intellioa
/
super-fusion-platform
mirror of http://10.10.14.221/feiliming/oa-project-vue.git
6
0
Fork 0
Code Issues Projects Releases Wiki Activity

资产状态汇总

Browse Source
init
gongdi 4 years ago
parent 0aa0378161
commit 461fbb3fc2
2 changed files with 300 additions and 26 deletions
Show Stats Download Patch File Download Diff File

272
src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/assetStatus/assetStatusLarge.vue
Unescape View File

@ -63,22 +63,32 @@
<div class="part-title">状态统计</div> <div class="part-title">状态统计</div>
</div> </div>
</div> </div>
<div class="status-content-div"> <div v-if="showLoading" class="show-loading-div">
<div class="echart-left-div"></div> <a-spin/>
</div>
<div v-if="!showLoading" class="status-content-div">
<div class="echart-left-div">
<div id="typeEchart" style="width: 100%;height: 100%"></div>
</div>
<div class="echart-arrow-div"> <div class="echart-arrow-div">
<div class="arrow-div" style="width: 2rem;height: 3rem"> <div class="arrow-div" style="width: 2rem;height: 3rem">
<img src="./image/arrow.png" style="width: 100%;height: 100%"> <img src="./image/arrow.png" style="width: 100%;height: 100%">
</div> </div>
</div> </div>
<div class="echart-right-div"></div> <div class="echart-right-div">
<div id="categoryEchart" style="width: 100%;height: 100%"></div>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import interConfig from './interConfig'; import interConfig from './interConfig';
import * as echarts from 'echarts';
import {Spin} from 'ant-design-vue';
export default{ export default{
data(){ data(){
return { return {
showLoading: true,
stock_num: 0,//在库 stock_num: 0,//在库
use_num: 0,//在用 use_num: 0,//在用
borrow_num: 0,//借用 borrow_num: 0,//借用
@ -101,6 +111,7 @@
method: interConfig.getAllStatusGather.method, method: interConfig.getAllStatusGather.method,
isTestLogin: interConfig.getAllStatusGather.isTestLogin, isTestLogin: interConfig.getAllStatusGather.isTestLogin,
}], (result) => { }], (result) => {
this.showLoading = false;
let resData = result[0].data; let resData = result[0].data;
if (result[0].status === 200) { if (result[0].status === 200) {
if (resData.code === 2000) { if (resData.code === 2000) {
@ -110,10 +121,256 @@
this.repair_num = resData.data.repair_num; this.repair_num = resData.data.repair_num;
this.scrap_num = resData.data.scrap_num; this.scrap_num = resData.data.scrap_num;
this.transfer_num = resData.data.transfer_num; this.transfer_num = resData.data.transfer_num;
this.$nextTick(function () {
this.buildTypeEchart();
})
}
}
})
},
buildTypeEchart: function () {
let myEchart = echarts.getInstanceByDom(document.getElementById("typeEchart"));
if (myEchart == null) {
myEchart = echarts.init(document.getElementById('typeEchart'));
}
let chartData = [
{name: "在库资产", value: this.stock_num},
{name: "在用资产", value: this.use_num},
{name: "借用资产", value: this.borrow_num},
{name: "维修资产", value: this.repair_num},
{name: "待报废资产", value: this.scrap_num},
{name: "处置资产", value: this.transfer_num},
];
myEchart.setOption(
{
//color: ["rgb(129, 212, 250)", "rgb(165, 214, 167)", "rgb(255, 205, 210)", "rgb(250, 205, 145)","rgb(179, 157, 219)","rgb(158, 158, 158)"],
tooltip: {
trigger: 'item'//鼠标悬浮提示内容
},
legend: {
show: false,
top: 'bottom'
},
series: [
{
name: '资产数量',
type: 'pie',
minAngle: 10,
radius: [40, 90],
center: ['50%', '50%'],
//roseType: 'area',//南丁格尔图
label: {
//alignTo: 'edge',
formatter: '{name|{b}}\n{value|{c} }',
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 10,
color: '#999'
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < myEchart.getWidth() / 2;
const points = params.labelLinePoints;
// Update the end point.
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
emphasis: {
label: {
show: true
}
},
itemStyle: {
// normal: {
// borderWidth: 2,
// borderColor: '#fff',
// },
borderRadius: 5
},
data: chartData
}
]
}
)
myEchart.on("click", this.getAllStatusCategoryGather);
window.addEventListener("resize", () => {
if (myEchart) {
myEchart.resize()
}
})
this.getAllStatusCategoryGather(chartData[0]);
},
getAllStatusCategoryGather: function (chart) {
let status = "";
switch (chart.name) {
case "在库资产":
status = 0;
break;
case "在用资产":
status = 1;
break;
case "借用资产":
status = 2;
break;
case "维修资产":
status = 3;
break;
case "待报废资产":
status = 4;
break;
case "处置资产":
status = 5;
break;
default:
break;
}
let param = {
org_id: this.BaseConfig.person_info_my.bureau_id,
asset_status: status
}
this.InterfaceConfig.callInterface([{
url: interConfig.getAllStatusCategoryGather.url,
params: param,
method: interConfig.getAllStatusCategoryGather.method,
isTestLogin: interConfig.getAllStatusCategoryGather.isTestLogin,
}], (result) => {
let resData = result[0].data;
if (result[0].status === 200) {
if (resData.code === 2000) {
if (resData.data && resData.data.length > 0) {
this.buildCategoryEchart(resData.data, chart);
}
} }
} }
}) })
},
buildCategoryEchart: function (dataList, chart) {
let myEchart = echarts.getInstanceByDom(document.getElementById("categoryEchart"));
if (myEchart == null) {
myEchart = echarts.init(document.getElementById('categoryEchart'));
}
let chartData = [];
//let colorList = this.getColor(dataList.length);
for (let i = 0, len = dataList.length; i < len; i++) {
chartData.push(
{
name: dataList[i].asset_classify_name,
value: dataList[i].num,
// itemStyle: {color: colorList[i]},
// label: {color: colorList[i]}
}
)
}
myEchart.setOption(
{
title: {
text: chart.name + '\n' + chart.value,
x: "center",
y: "center",
// textStyle:{
// color:chart.color
// }
},
tooltip: {
trigger: 'item'//鼠标悬浮提示内容
},
legend: {
show: false,
top: 'bottom'
},
series: [
{
name: '资产数量',
type: 'pie',
minAngle: 10,
radius: [60, 90],
center: ['50%', '50%'],
//roseType: 'area',//南丁格尔图
label: {
alignTo: 'edge',
formatter: '{name|{b}}\n{value|{c} }',
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 10,
color: '#999'
} }
},
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < myEchart.getWidth() / 2;
const points = params.labelLinePoints;
// Update the end point.
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
emphasis: {
label: {
show: true
}
},
itemStyle: {
// normal: {
// borderWidth: 2,
// borderColor: '#fff',
// },
borderRadius: 5
},
data: chartData
}
]
}
)
window.addEventListener("resize", () => {
if (myEchart) {
myEchart.resize()
}
})
},
randColor: function () {
//生成随机颜色
return "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6);
// let r, g, b;
// r = Math.floor(Math.random() * 256);
// g = Math.floor(Math.random() * 256);
// b = Math.floor(Math.random() * 256);
// return "rgb(" +r + ',' +g+ ',' +b+ ")";
},
getColor: function (num) {
//获取随机颜色
var colorList = [];
for (var i = 0; i < num; i++) {
colorList.push(this.randColor());
}
return colorList;
},
},
components: {
ASpin: Spin
} }
} }
</script> </script>
@ -221,12 +478,19 @@
width: 3rem; width: 3rem;
height: 18rem; height: 18rem;
display: flex; display: flex;
justify-content: center;align-items: center; justify-content: center;
align-items: center;
} }
.echart-right-div { .echart-right-div {
width: calc(50% - 1.5rem); width: calc(50% - 1.5rem);
height: 18rem; height: 18rem;
} }
} }
.show-loading-div {
min-height: 15rem;
display: flex;
justify-content: center;
align-items: center;
}
} }
</style> </style>

10
src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/assetStatus/interConfig.js
Unescape View File

@ -19,4 +19,14 @@ export default {
isTestLogin:true isTestLogin:true
}, },
/*
* 资产状态统计-根据状态获取集体资产分类统计
* */
"getAllStatusCategoryGather":{
url:'/intellioa/asset/assetReport/getAllStatusCategoryGather',
method:'get',
isTestLogin:true
},
} }

Write Preview
Loading…
Cancel
Save