|
|
|
|
@ -63,37 +63,47 @@
|
|
|
|
|
<div class="part-title">状态统计</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="status-content-div">
|
|
|
|
|
<div class="echart-left-div"></div>
|
|
|
|
|
<div v-if="showLoading" class="show-loading-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="arrow-div" style="width: 2rem;height: 3rem">
|
|
|
|
|
<img src="./image/arrow.png" style="width: 100%;height: 100%">
|
|
|
|
|
</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>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import interConfig from './interConfig';
|
|
|
|
|
import * as echarts from 'echarts';
|
|
|
|
|
import {Spin} from 'ant-design-vue';
|
|
|
|
|
export default{
|
|
|
|
|
data(){
|
|
|
|
|
return {
|
|
|
|
|
stock_num:0,//在库
|
|
|
|
|
use_num:0,//在用
|
|
|
|
|
borrow_num:0,//借用
|
|
|
|
|
repair_num:0,//维修
|
|
|
|
|
scrap_num:0,//待报废
|
|
|
|
|
transfer_num:0,//处置
|
|
|
|
|
showLoading: true,
|
|
|
|
|
stock_num: 0,//在库
|
|
|
|
|
use_num: 0,//在用
|
|
|
|
|
borrow_num: 0,//借用
|
|
|
|
|
repair_num: 0,//维修
|
|
|
|
|
scrap_num: 0,//待报废
|
|
|
|
|
transfer_num: 0,//处置
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted(){
|
|
|
|
|
this.getAllStatusGather();
|
|
|
|
|
},
|
|
|
|
|
methods:{
|
|
|
|
|
getAllStatusGather:function () {
|
|
|
|
|
methods: {
|
|
|
|
|
getAllStatusGather: function () {
|
|
|
|
|
let param = {
|
|
|
|
|
org_id:this.BaseConfig.person_info_my.bureau_id
|
|
|
|
|
org_id: this.BaseConfig.person_info_my.bureau_id
|
|
|
|
|
}
|
|
|
|
|
this.InterfaceConfig.callInterface([{
|
|
|
|
|
url: interConfig.getAllStatusGather.url,
|
|
|
|
|
@ -101,6 +111,7 @@
|
|
|
|
|
method: interConfig.getAllStatusGather.method,
|
|
|
|
|
isTestLogin: interConfig.getAllStatusGather.isTestLogin,
|
|
|
|
|
}], (result) => {
|
|
|
|
|
this.showLoading = false;
|
|
|
|
|
let resData = result[0].data;
|
|
|
|
|
if (result[0].status === 200) {
|
|
|
|
|
if (resData.code === 2000) {
|
|
|
|
|
@ -110,10 +121,256 @@
|
|
|
|
|
this.repair_num = resData.data.repair_num;
|
|
|
|
|
this.scrap_num = resData.data.scrap_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>
|
|
|
|
|
@ -124,31 +381,31 @@
|
|
|
|
|
padding: 0.5rem;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.asset-type-tab-list-div{
|
|
|
|
|
.asset-type-tab-list-div {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 5rem;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.type-tab-div{
|
|
|
|
|
.type-tab-div {
|
|
|
|
|
width: 16%;
|
|
|
|
|
height: 4rem;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
color: white;
|
|
|
|
|
.img-div{
|
|
|
|
|
.img-div {
|
|
|
|
|
width: 40%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.info-div{
|
|
|
|
|
.info-div {
|
|
|
|
|
width: 60%;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
padding-right: 0.3rem;
|
|
|
|
|
.info-row{
|
|
|
|
|
.info-row {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 50%;
|
|
|
|
|
display: flex;
|
|
|
|
|
@ -156,16 +413,16 @@
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
}
|
|
|
|
|
.row-top{
|
|
|
|
|
.row-top {
|
|
|
|
|
border-bottom: 1px solid white;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.tab-left{
|
|
|
|
|
.tab-left {
|
|
|
|
|
border-top-left-radius: 2rem;
|
|
|
|
|
border-bottom-left-radius: 2rem;
|
|
|
|
|
}
|
|
|
|
|
.tab-right{
|
|
|
|
|
.tab-right {
|
|
|
|
|
border-top-right-radius: 2rem;
|
|
|
|
|
border-bottom-right-radius: 2rem;
|
|
|
|
|
}
|
|
|
|
|
@ -208,25 +465,32 @@
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.status-content-div{
|
|
|
|
|
.status-content-div {
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
min-height: 15rem;
|
|
|
|
|
margin-top: 1rem;
|
|
|
|
|
.echart-left-div{
|
|
|
|
|
.echart-left-div {
|
|
|
|
|
width: calc(50% - 1.5rem);
|
|
|
|
|
height: 18rem;
|
|
|
|
|
}
|
|
|
|
|
.echart-arrow-div{
|
|
|
|
|
.echart-arrow-div {
|
|
|
|
|
width: 3rem;
|
|
|
|
|
height: 18rem;
|
|
|
|
|
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);
|
|
|
|
|
height: 18rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.show-loading-div {
|
|
|
|
|
min-height: 15rem;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
