|
@@ -1,20 +1,20 @@
|
|
|
<template>
|
|
<template>
|
|
|
|
|
|
|
|
<div class="charts-container">
|
|
<div class="charts-container">
|
|
|
- <div style="width: 100%;">
|
|
|
|
|
- <span style="margin: 10px;">统计区间:</span>
|
|
|
|
|
- <el-date-picker
|
|
|
|
|
- style="margin: 10px"
|
|
|
|
|
- v-model="value2"
|
|
|
|
|
- type="daterange"
|
|
|
|
|
- align="right"
|
|
|
|
|
- unlink-panels
|
|
|
|
|
- range-separator="至"
|
|
|
|
|
- start-placeholder="开始日期"
|
|
|
|
|
- end-placeholder="结束日期"
|
|
|
|
|
- :picker-options="pickerOptions" >
|
|
|
|
|
- </el-date-picker>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+<!-- <div style="width: 100%;">-->
|
|
|
|
|
+<!-- <span style="margin: 10px;">统计区间:</span>-->
|
|
|
|
|
+<!-- <el-date-picker-->
|
|
|
|
|
+<!-- style="margin: 10px"-->
|
|
|
|
|
+<!-- v-model="value2"-->
|
|
|
|
|
+<!-- type="daterange"-->
|
|
|
|
|
+<!-- align="right"-->
|
|
|
|
|
+<!-- unlink-panels-->
|
|
|
|
|
+<!-- range-separator="至"-->
|
|
|
|
|
+<!-- start-placeholder="开始日期"-->
|
|
|
|
|
+<!-- end-placeholder="结束日期"-->
|
|
|
|
|
+<!-- :picker-options="pickerOptions" >-->
|
|
|
|
|
+<!-- </el-date-picker>-->
|
|
|
|
|
+<!-- </div>-->
|
|
|
<!-- 使用 v-for 动态渲染饼图 -->
|
|
<!-- 使用 v-for 动态渲染饼图 -->
|
|
|
<div class="pie-chart" v-for="(cabinet, index) in cabinetData" :key="index">
|
|
<div class="pie-chart" v-for="(cabinet, index) in cabinetData" :key="index">
|
|
|
<div :id="'pieChart' + cabinet.cabinetId" style="width: 300px; height: 150px;"></div>
|
|
<div :id="'pieChart' + cabinet.cabinetId" style="width: 300px; height: 150px;"></div>
|
|
@@ -28,6 +28,16 @@ import * as echarts from 'echarts'
|
|
|
|
|
|
|
|
export default {
|
|
export default {
|
|
|
name: 'warehouseEquipmentUsageStatus',
|
|
name: 'warehouseEquipmentUsageStatus',
|
|
|
|
|
+ props: {
|
|
|
|
|
+ startTime:{
|
|
|
|
|
+ type: String,
|
|
|
|
|
+ default: ''
|
|
|
|
|
+ },
|
|
|
|
|
+ endTime:{
|
|
|
|
|
+ type: String,
|
|
|
|
|
+ default: ''
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
cabinetData: [], // 存储请求到的柜子数据
|
|
cabinetData: [], // 存储请求到的柜子数据
|
|
@@ -66,15 +76,30 @@ export default {
|
|
|
},
|
|
},
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
|
|
+ computed: {
|
|
|
|
|
+ dateRange() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ startTime: this.startTime,
|
|
|
|
|
+ endTime: this.endTime
|
|
|
|
|
+ };
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
watch: {
|
|
watch: {
|
|
|
- value2(val) {
|
|
|
|
|
- if(val){
|
|
|
|
|
- this.getList()
|
|
|
|
|
|
|
+ // value2(val) {
|
|
|
|
|
+ // if(val){
|
|
|
|
|
+ // this.getList()
|
|
|
|
|
+ // }
|
|
|
|
|
+ // },
|
|
|
|
|
+ dateRange(newVal, oldVal) {
|
|
|
|
|
+ if (newVal.startTime && newVal.endTime) {
|
|
|
|
|
+ this.queryParams.startTime = newVal.startTime;
|
|
|
|
|
+ this.queryParams.endTime = newVal.endTime;
|
|
|
|
|
+ this.getList();
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
mounted() {
|
|
mounted() {
|
|
|
- this.getList()
|
|
|
|
|
|
|
+ // this.getList()
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
getDefaultDateRange() {
|
|
getDefaultDateRange() {
|
|
@@ -94,12 +119,12 @@ export default {
|
|
|
},
|
|
},
|
|
|
// 请求数据
|
|
// 请求数据
|
|
|
getList() {
|
|
getList() {
|
|
|
- if (Array.isArray(this.value2) && this.value2.length === 2) {
|
|
|
|
|
- this.queryParams.startTime = this.formatDate(this.value2[0])
|
|
|
|
|
- this.queryParams.endTime = this.formatDate(this.value2[1])
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ // if (Array.isArray(this.value2) && this.value2.length === 2) {
|
|
|
|
|
+ // this.queryParams.startTime = this.formatDate(this.value2[0])
|
|
|
|
|
+ // this.queryParams.endTime = this.formatDate(this.value2[1])
|
|
|
|
|
+ // }
|
|
|
getCabinetStatistics(this.queryParams).then(response => {
|
|
getCabinetStatistics(this.queryParams).then(response => {
|
|
|
- console.log(response, '物资柜状态统计--开关次数')
|
|
|
|
|
|
|
+ console.log(response, '物资柜状态统计--物资柜异常数据统计')
|
|
|
this.cabinetData = response.data // 获取数据后保存
|
|
this.cabinetData = response.data // 获取数据后保存
|
|
|
|
|
|
|
|
// 在数据加载完成后渲染图表
|
|
// 在数据加载完成后渲染图表
|
|
@@ -122,6 +147,7 @@ export default {
|
|
|
const options = {
|
|
const options = {
|
|
|
title: {
|
|
title: {
|
|
|
text: cabinet.cabinetName, // 添加饼图标题
|
|
text: cabinet.cabinetName, // 添加饼图标题
|
|
|
|
|
+ subTitle:'物资柜异常统计',
|
|
|
left: 'center',
|
|
left: 'center',
|
|
|
top: 'center',
|
|
top: 'center',
|
|
|
textStyle: {
|
|
textStyle: {
|
|
@@ -152,12 +178,13 @@ export default {
|
|
|
{ value: cabinet.misplaceCount || 0, name: '物资错放' },
|
|
{ value: cabinet.misplaceCount || 0, name: '物资错放' },
|
|
|
],
|
|
],
|
|
|
itemStyle: {
|
|
itemStyle: {
|
|
|
- // 自定义颜色
|
|
|
|
|
color: (params) => {
|
|
color: (params) => {
|
|
|
- if (params.name === '超时未关') {
|
|
|
|
|
- return '#91cc75' // 超时未关用绿色
|
|
|
|
|
|
|
+ if (params.value === 0) {
|
|
|
|
|
+ return '#dcdfe6'; // 数据为0时,渲染为灰色
|
|
|
|
|
+ } else if (params.name === '超时未关') {
|
|
|
|
|
+ return '#91cc75'; // 超时未关用绿色
|
|
|
} else {
|
|
} else {
|
|
|
- return '#5470c6' // 物资错放用蓝色
|
|
|
|
|
|
|
+ return '#5470c6'; // 物资错放用蓝色
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
@@ -169,7 +196,6 @@ export default {
|
|
|
fontSize: 14,
|
|
fontSize: 14,
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
},
|
|
},
|
|
|
],
|
|
],
|
|
|
}
|
|
}
|