|
@@ -40,11 +40,16 @@
|
|
<view class="small-title">
|
|
<view class="small-title">
|
|
<view class="small-title-l">特种设备与常规冷热设备安全隐患统计</view>
|
|
<view class="small-title-l">特种设备与常规冷热设备安全隐患统计</view>
|
|
</view>
|
|
</view>
|
|
- <view class="small-title-tow">
|
|
|
|
- <view class="small-title-tow-l">安全检查校级巡查计划标题标题标题标题标题</view>
|
|
|
|
- <img class="small-title-tow-r" src="@/pages/images/dataBoard/icon_06.png">
|
|
|
|
- </view>
|
|
|
|
<view class="chart-three">
|
|
<view class="chart-three">
|
|
|
|
+ <view class="small-title-three">
|
|
|
|
+ <view class="small-title-l"></view>
|
|
|
|
+ <viwe class="chart-tab-tow">
|
|
|
|
+ <view class="chart-tab-li" :class="chartTabIndexThree==index?'tab-A':'tab-B'"
|
|
|
|
+ v-for="(item,index) in chartTabListThree" :key="index" @click="chartTabClickThree(index)">
|
|
|
|
+ {{item}}
|
|
|
|
+ </view>
|
|
|
|
+ </viwe>
|
|
|
|
+ </view>
|
|
<view class="chart-three-b">
|
|
<view class="chart-three-b">
|
|
<qiun-data-charts type="pie" :opts="optsThree" :echartsH5="true" :chartData="chartDataThree" />
|
|
<qiun-data-charts type="pie" :opts="optsThree" :echartsH5="true" :chartData="chartDataThree" />
|
|
</view>
|
|
</view>
|
|
@@ -72,6 +77,8 @@
|
|
reportAppletReportApiDeviceStatGetDeviceStat,
|
|
reportAppletReportApiDeviceStatGetDeviceStat,
|
|
reportAppletReportBsEquipDangerCheckList,
|
|
reportAppletReportBsEquipDangerCheckList,
|
|
reportAppletReportBsEquipDangerList,
|
|
reportAppletReportBsEquipDangerList,
|
|
|
|
+ reportAppletReportApiEquipOverdueList,
|
|
|
|
+ reportAppletReportApiEquipLifeList,
|
|
} from '@/pages/api/index.js'
|
|
} from '@/pages/api/index.js'
|
|
export default {
|
|
export default {
|
|
name: "equipmentControl",
|
|
name: "equipmentControl",
|
|
@@ -164,7 +171,9 @@
|
|
newlyAddToday: 0,
|
|
newlyAddToday: 0,
|
|
overdueDeviceNum: 0,
|
|
overdueDeviceNum: 0,
|
|
totalDeviceNum: 0,
|
|
totalDeviceNum: 0,
|
|
- statisticsType:1,//1.年度2.季度3.月度
|
|
|
|
|
|
+ statisticsType: 1, //1.年度2.季度3.月度
|
|
|
|
+ chartTabListThree: ['年度', '季度', '月度'],
|
|
|
|
+ chartTabIndexThree: 0,
|
|
}
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
@@ -177,11 +186,92 @@
|
|
this.reportAppletReportApiDeviceStatGetDeviceStat();
|
|
this.reportAppletReportApiDeviceStatGetDeviceStat();
|
|
this.reportAppletReportBsEquipDangerCheckList();
|
|
this.reportAppletReportBsEquipDangerCheckList();
|
|
this.reportAppletReportBsEquipDangerList();
|
|
this.reportAppletReportBsEquipDangerList();
|
|
- this.getServerData();
|
|
|
|
- this.getServerDataTow();
|
|
|
|
- this.getServerDataThree();
|
|
|
|
|
|
+ this.reportAppletReportApiEquipOverdueList();
|
|
|
|
+ this.reportAppletReportApiEquipLifeList();
|
|
|
|
+ //this.getServerData();
|
|
|
|
+ //this.getServerDataTow();
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ //隐患统计
|
|
|
|
+ async reportAppletReportBsEquipDangerList() {
|
|
|
|
+ let self = this;
|
|
|
|
+ const {
|
|
|
|
+ data
|
|
|
|
+ } = await reportAppletReportBsEquipDangerList({
|
|
|
|
+ dangerType: '3',
|
|
|
|
+ statisticsType: this.statisticsType
|
|
|
|
+ });
|
|
|
|
+ if (data.code == 200) {
|
|
|
|
+ let list = [];
|
|
|
|
+ data.data.subjectList.forEach(function(item, index) {
|
|
|
|
+ if (index < 5) {
|
|
|
|
+ list.push({
|
|
|
|
+ "name": item.subjectName,
|
|
|
|
+ "value": item.dangerNum,
|
|
|
|
+ "textColor": "#fff",
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ let res = {
|
|
|
|
+ series: [{
|
|
|
|
+ data: list
|
|
|
|
+ }]
|
|
|
|
+ };
|
|
|
|
+ this.chartDataThree = JSON.parse(JSON.stringify(res));
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ //超期服役统计
|
|
|
|
+ async reportAppletReportApiEquipOverdueList() {
|
|
|
|
+ let self = this;
|
|
|
|
+ const {
|
|
|
|
+ data
|
|
|
|
+ } = await reportAppletReportApiEquipOverdueList();
|
|
|
|
+ if (data.code == 200) {
|
|
|
|
+ let list = [];
|
|
|
|
+ let list2 = [];
|
|
|
|
+ data.data.forEach(function(item, index) {
|
|
|
|
+ list.push(item.deptName)
|
|
|
|
+ list2.push(item.deviceNum)
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ let res = {
|
|
|
|
+ categories: list,
|
|
|
|
+ series: [{
|
|
|
|
+ name: "目标值",
|
|
|
|
+ textColor: '#fff',
|
|
|
|
+ data: list2
|
|
|
|
+ }, ]
|
|
|
|
+ };
|
|
|
|
+ this.chartData = JSON.parse(JSON.stringify(res));
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ //设备使用寿命统计
|
|
|
|
+ async reportAppletReportApiEquipLifeList() {
|
|
|
|
+ let self = this;
|
|
|
|
+ const {
|
|
|
|
+ data
|
|
|
|
+ } = await reportAppletReportApiEquipLifeList();
|
|
|
|
+ if (data.code == 200) {
|
|
|
|
+ let list = [];
|
|
|
|
+ data.data.forEach(function(item, index) {
|
|
|
|
+ list.push({
|
|
|
|
+ "name":item.lifeInterval,
|
|
|
|
+ "value": item.deviceNum,
|
|
|
|
+ "labelText":item.lifeInterval +item.deviceNum+item.unit+ item.deviceRate+'%',
|
|
|
|
+ "textColor": "#fff",
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ let res = {
|
|
|
|
+ series: [{
|
|
|
|
+ data: list
|
|
|
|
+ }]
|
|
|
|
+ };
|
|
|
|
+ this.chartDataTow = JSON.parse(JSON.stringify(res));
|
|
|
|
+ }
|
|
|
|
+ },
|
|
async reportAppletReportApiDeviceStatGetDeviceStat() {
|
|
async reportAppletReportApiDeviceStatGetDeviceStat() {
|
|
let self = this;
|
|
let self = this;
|
|
const {
|
|
const {
|
|
@@ -203,16 +293,6 @@
|
|
this.$set(self, 'dataList', data.data);
|
|
this.$set(self, 'dataList', data.data);
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- //特种设备与常规冷热设备安全隐患统计
|
|
|
|
- async reportAppletReportBsEquipDangerList() {
|
|
|
|
- let self = this;
|
|
|
|
- const {
|
|
|
|
- data
|
|
|
|
- } = await reportAppletReportBsEquipDangerList({dangerType:'1',statisticsType:this.statisticsType});
|
|
|
|
- if (data.code == 200) {
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
getServerData() {
|
|
getServerData() {
|
|
//模拟从服务器获取数据时的延时
|
|
//模拟从服务器获取数据时的延时
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
@@ -265,34 +345,7 @@
|
|
this.chartDataTow = JSON.parse(JSON.stringify(res));
|
|
this.chartDataTow = JSON.parse(JSON.stringify(res));
|
|
}, 500);
|
|
}, 500);
|
|
},
|
|
},
|
|
- getServerDataThree() {
|
|
|
|
- //模拟从服务器获取数据时的延时
|
|
|
|
- setTimeout(() => {
|
|
|
|
- //模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
|
|
|
|
- let res = {
|
|
|
|
- series: [{
|
|
|
|
- data: [{
|
|
|
|
- "name": "13.2压力容器30%",
|
|
|
|
- "value": 50,
|
|
|
|
- "textColor": "#fff",
|
|
|
|
- }, {
|
|
|
|
- "name": "13.1起重类设备10%",
|
|
|
|
- "value": 30,
|
|
|
|
- "textColor": "#fff",
|
|
|
|
- }, {
|
|
|
|
- "name": "13.4加热及制冷装置管理40%",
|
|
|
|
- "value": 20,
|
|
|
|
- "textColor": "#fff",
|
|
|
|
- }, {
|
|
|
|
- "name": "13.3场(厂)内专用机动车辆20%",
|
|
|
|
- "value": 18,
|
|
|
|
- "textColor": "#fff",
|
|
|
|
- }]
|
|
|
|
- }]
|
|
|
|
- };
|
|
|
|
- this.chartDataThree = JSON.parse(JSON.stringify(res));
|
|
|
|
- }, 500);
|
|
|
|
- },
|
|
|
|
|
|
+
|
|
dateClick(index) {
|
|
dateClick(index) {
|
|
this.dateIndex = index;
|
|
this.dateIndex = index;
|
|
},
|
|
},
|
|
@@ -307,6 +360,11 @@
|
|
});
|
|
});
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ chartTabClickThree(index) {
|
|
|
|
+ this.chartTabIndexThree = index;
|
|
|
|
+ this.statisticsType = index + 1;
|
|
|
|
+ this.reportAppletReportBsEquipDangerList();
|
|
|
|
+ },
|
|
},
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
@@ -392,6 +450,7 @@
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+
|
|
.chart {
|
|
.chart {
|
|
width: 690rpx;
|
|
width: 690rpx;
|
|
height: 476rpx;
|
|
height: 476rpx;
|
|
@@ -447,12 +506,66 @@
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ .small-title-three {
|
|
|
|
+ height: 50rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+ margin: 24rpx 30rpx;
|
|
|
|
+
|
|
|
|
+ .small-title-l {
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
+ line-height: 45rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .chart-tab-tow {
|
|
|
|
+ width: 300rpx;
|
|
|
|
+ height: 50rpx;
|
|
|
|
+ border-radius: 25rpx;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ border: 1rpx solid #52545F;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+
|
|
|
|
+ .chart-tab-li {
|
|
|
|
+ width: 100rpx;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ color: #999999;
|
|
|
|
+ line-height: 50rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .chart-tab-li:nth-of-type(1) {
|
|
|
|
+ border-right: 1rpx solid #52545F;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .chart-tab-li:nth-of-type(2) {
|
|
|
|
+ border-right: 1rpx solid #52545F;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .tab-A {
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
+ background: #0183FA;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .tab-B {
|
|
|
|
+ color: #999999;
|
|
|
|
+ background: none;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
.chart-three {
|
|
.chart-three {
|
|
width: 690rpx;
|
|
width: 690rpx;
|
|
- height: 394rpx;
|
|
|
|
|
|
+ height: 509rpx;
|
|
background: #3E414F;
|
|
background: #3E414F;
|
|
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
|
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
|
margin: 34rpx 30rpx 0;
|
|
margin: 34rpx 30rpx 0;
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
.chart-three-b {
|
|
.chart-three-b {
|
|
width: 690rpx;
|
|
width: 690rpx;
|