|
|
@@ -178,7 +178,7 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 告警列表 -->
|
|
|
- <div class="panel alert-list-panel">
|
|
|
+ <!-- <div class="panel alert-list-panel">
|
|
|
<div class="panel-title">
|
|
|
<div class="panel-icon"></div>
|
|
|
告警列表
|
|
|
@@ -189,7 +189,7 @@
|
|
|
style="width: 100%; height: calc(100% - 2.5rem)"
|
|
|
/>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
|
|
|
<!-- 设备告警趋势图 -->
|
|
|
<div class="panel chart-panel">
|
|
|
@@ -199,6 +199,13 @@
|
|
|
</div>
|
|
|
<div class="chart-container" ref="alertTrendChart"></div>
|
|
|
</div>
|
|
|
+ <div class="panel chart-panel">
|
|
|
+ <div class="panel-title">
|
|
|
+ <div class="panel-icon"></div>
|
|
|
+ 用电趋势图
|
|
|
+ </div>
|
|
|
+ <div class="chart-container" ref="electricityTrendChart"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -217,7 +224,8 @@
|
|
|
comprehensiveData,
|
|
|
waterCoalTrend,
|
|
|
wasteTrend,
|
|
|
- listFactoryLine
|
|
|
+ listFactoryLine,
|
|
|
+ electricityTrend
|
|
|
} from '@/api/pcsData/index.js';
|
|
|
|
|
|
export default {
|
|
|
@@ -241,7 +249,7 @@
|
|
|
params: []
|
|
|
},
|
|
|
{
|
|
|
- title: '注气检查记录',
|
|
|
+ title: '生产记录',
|
|
|
params: []
|
|
|
},
|
|
|
{
|
|
|
@@ -319,10 +327,11 @@
|
|
|
|
|
|
init() {
|
|
|
this.alarmOverview();
|
|
|
- this.queryAlarmList();
|
|
|
+ // this.queryAlarmList();
|
|
|
this.deviceAlarmTrend();
|
|
|
this.waterCoalTrend();
|
|
|
this.wasteTrend();
|
|
|
+ this.electricityTrend();
|
|
|
this.comprehensiveData();
|
|
|
},
|
|
|
//告警数据概览
|
|
|
@@ -350,11 +359,11 @@
|
|
|
{ label: '年度总注气量(M³)', value: res.yearTotalGasInjection },
|
|
|
{ label: '年度总水量(T)', value: res.yearTotalWater },
|
|
|
{ label: '年度用煤总量(T)', value: res.yearTotalCoal },
|
|
|
- // { label: '年度固废量(T)', value: res.yearTotalWaste },
|
|
|
+ { label: '年度用电量(kWh)', value: res.yearTotalElectricity },
|
|
|
{ label: '本月注气量(M³)', value: res.monthTotalGasInjection },
|
|
|
{ label: '本月水量(T)', value: res.monthTotalWater },
|
|
|
{ label: '本月用煤量(T)', value: res.monthTotalCoal },
|
|
|
- // { label: '本月固废量(T)', value: res.monthTotalWaste }
|
|
|
+ { label: '本月用电量(kWh)', value: res.monthTotalElectricity }
|
|
|
];
|
|
|
this.$set(
|
|
|
this.boilerData[0],
|
|
|
@@ -364,7 +373,7 @@
|
|
|
this.$set(
|
|
|
this.boilerData[1],
|
|
|
'params',
|
|
|
- this.getParams(res['gasInjectionInspectionRecord'] || {})
|
|
|
+ this.getParams(res['productionRecord'] || {})
|
|
|
);
|
|
|
this.$set(
|
|
|
this.boilerData[2],
|
|
|
@@ -409,84 +418,92 @@
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
- //告警列表
|
|
|
- queryAlarmList() {
|
|
|
- let dataKey = [
|
|
|
- 'name',
|
|
|
- 'deviceLocation',
|
|
|
- 'alertLevel',
|
|
|
- 'ruleName',
|
|
|
- 'alarmTime',
|
|
|
- 'handleStatus'
|
|
|
- ];
|
|
|
-
|
|
|
- queryAlarmList({ stationId: this.stationId }).then((res) => {
|
|
|
- let dataArr = [];
|
|
|
- res.forEach((item, index) => {
|
|
|
- let data = [index + 1];
|
|
|
- dataKey.forEach((key, index) => {
|
|
|
- if (key == 'alertLevel') {
|
|
|
- item[key] =
|
|
|
- item[key] == 1
|
|
|
- ? '紧急'
|
|
|
- : item[key] == 2
|
|
|
- ? '严重'
|
|
|
- : item[key] == 3
|
|
|
- ? '一般'
|
|
|
- : '告警';
|
|
|
- }
|
|
|
- if (key == 'handleStatus') {
|
|
|
- item[key] =
|
|
|
- item[key] == 1
|
|
|
- ? '处理中'
|
|
|
- : item[key] == 2
|
|
|
- ? '已处理'
|
|
|
- : '未处理';
|
|
|
- }
|
|
|
- data.push(item[key]);
|
|
|
- });
|
|
|
- dataArr.push(data);
|
|
|
+ //用电趋势图
|
|
|
+ electricityTrend() {
|
|
|
+ electricityTrend({ stationId: this.stationId }).then((res) => {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initElectricityTrend(res);
|
|
|
});
|
|
|
- this.alertConfig = {
|
|
|
- header: [
|
|
|
- '序号',
|
|
|
- '设备名称',
|
|
|
- '设备位置',
|
|
|
- '告警级别',
|
|
|
- '告警内容描述',
|
|
|
- '告警时间',
|
|
|
- '处理状态'
|
|
|
- ].map(
|
|
|
- (item) =>
|
|
|
- `<div style="color: #38fdf8;font-size: 0.9rem;font-weight: bold">${item}</div>`
|
|
|
- ),
|
|
|
-
|
|
|
- data: dataArr.map((data) =>
|
|
|
- data.map((item, index) => {
|
|
|
- return `<div style="color: ${
|
|
|
- index == 3 ? this.getClolr(item) : '#fff'
|
|
|
- };font-size: 0.9rem;">${item}</div>`;
|
|
|
- })
|
|
|
- ),
|
|
|
- rowNum: 4,
|
|
|
- headerBGC: 'transparent',
|
|
|
- oddRowBGC: 'rgba(13, 41, 96, 0.3)',
|
|
|
- evenRowBGC: 'rgba(13, 41, 96, 0.1)',
|
|
|
- headerHeight: 30,
|
|
|
- waitTime: 3000,
|
|
|
- align: [
|
|
|
- 'center',
|
|
|
- 'center',
|
|
|
- 'center',
|
|
|
- 'center',
|
|
|
- 'center',
|
|
|
- 'center',
|
|
|
- 'center'
|
|
|
- ],
|
|
|
- columnWidth: []
|
|
|
- };
|
|
|
});
|
|
|
},
|
|
|
+ // //告警列表
|
|
|
+ // queryAlarmList() {
|
|
|
+ // let dataKey = [
|
|
|
+ // 'name',
|
|
|
+ // 'deviceLocation',
|
|
|
+ // 'alertLevel',
|
|
|
+ // 'ruleName',
|
|
|
+ // 'alarmTime',
|
|
|
+ // 'handleStatus'
|
|
|
+ // ];
|
|
|
+
|
|
|
+ // queryAlarmList({ stationId: this.stationId }).then((res) => {
|
|
|
+ // let dataArr = [];
|
|
|
+ // res.forEach((item, index) => {
|
|
|
+ // let data = [index + 1];
|
|
|
+ // dataKey.forEach((key, index) => {
|
|
|
+ // if (key == 'alertLevel') {
|
|
|
+ // item[key] =
|
|
|
+ // item[key] == 1
|
|
|
+ // ? '紧急'
|
|
|
+ // : item[key] == 2
|
|
|
+ // ? '严重'
|
|
|
+ // : item[key] == 3
|
|
|
+ // ? '一般'
|
|
|
+ // : '告警';
|
|
|
+ // }
|
|
|
+ // if (key == 'handleStatus') {
|
|
|
+ // item[key] =
|
|
|
+ // item[key] == 1
|
|
|
+ // ? '处理中'
|
|
|
+ // : item[key] == 2
|
|
|
+ // ? '已处理'
|
|
|
+ // : '未处理';
|
|
|
+ // }
|
|
|
+ // data.push(item[key]);
|
|
|
+ // });
|
|
|
+ // dataArr.push(data);
|
|
|
+ // });
|
|
|
+ // this.alertConfig = {
|
|
|
+ // header: [
|
|
|
+ // '序号',
|
|
|
+ // '设备名称',
|
|
|
+ // '设备位置',
|
|
|
+ // '告警级别',
|
|
|
+ // '告警内容描述',
|
|
|
+ // '告警时间',
|
|
|
+ // '处理状态'
|
|
|
+ // ].map(
|
|
|
+ // (item) =>
|
|
|
+ // `<div style="color: #38fdf8;font-size: 0.9rem;font-weight: bold">${item}</div>`
|
|
|
+ // ),
|
|
|
+
|
|
|
+ // data: dataArr.map((data) =>
|
|
|
+ // data.map((item, index) => {
|
|
|
+ // return `<div style="color: ${
|
|
|
+ // index == 3 ? this.getClolr(item) : '#fff'
|
|
|
+ // };font-size: 0.9rem;">${item}</div>`;
|
|
|
+ // })
|
|
|
+ // ),
|
|
|
+ // rowNum: 4,
|
|
|
+ // headerBGC: 'transparent',
|
|
|
+ // oddRowBGC: 'rgba(13, 41, 96, 0.3)',
|
|
|
+ // evenRowBGC: 'rgba(13, 41, 96, 0.1)',
|
|
|
+ // headerHeight: 30,
|
|
|
+ // waitTime: 3000,
|
|
|
+ // align: [
|
|
|
+ // 'center',
|
|
|
+ // 'center',
|
|
|
+ // 'center',
|
|
|
+ // 'center',
|
|
|
+ // 'center',
|
|
|
+ // 'center',
|
|
|
+ // 'center'
|
|
|
+ // ],
|
|
|
+ // columnWidth: []
|
|
|
+ // };
|
|
|
+ // });
|
|
|
+ // },
|
|
|
|
|
|
onFullscreen() {
|
|
|
this.isFullscreen = !this.isFullscreen;
|
|
|
@@ -872,6 +889,57 @@
|
|
|
};
|
|
|
chart.setOption(option);
|
|
|
this.charts.alertTrend = chart;
|
|
|
+ },
|
|
|
+ initElectricityTrend(res) {
|
|
|
+ if (!this.$refs.electricityTrendChart) return;
|
|
|
+ const chart = echarts.init(this.$refs.electricityTrendChart);
|
|
|
+ const option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ backgroundColor: '#fff',
|
|
|
+ borderColor: '#e0e0e0',
|
|
|
+ borderWidth: 1,
|
|
|
+ textStyle: {
|
|
|
+ color: '#333'
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ type: 'line',
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(255, 255, 255, 0.5)'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: { top: 30, right: 20, bottom: 30, left: 50 },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: res.map((item) => item.time),
|
|
|
+ axisLine: { lineStyle: { color: '#4a6fa5' } },
|
|
|
+ axisLabel: { color: '#8ba3c7' }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ axisLine: { lineStyle: { color: '#4a6fa5' } },
|
|
|
+ axisLabel: { color: '#8ba3c7' },
|
|
|
+ splitLine: { lineStyle: { color: 'rgba(74, 111, 165, 0.2)' } }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: res.map((item) => item.value),
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ areaStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ { offset: 0, color: 'rgba(59, 130, 246, 0.5)' },
|
|
|
+ { offset: 1, color: 'rgba(59, 130, 246, 0.05)' }
|
|
|
+ ])
|
|
|
+ },
|
|
|
+ lineStyle: { color: '#3b82f6', width: 2 },
|
|
|
+ itemStyle: { color: '#3b82f6' }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ chart.setOption(option);
|
|
|
+ this.charts.electricityTrendChart = chart;
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -1193,7 +1261,7 @@
|
|
|
gap: 0.5rem;
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
- width: 23%;
|
|
|
+ width: 18%;
|
|
|
height: 3.75rem;
|
|
|
background: url('~@/assets/pcs/leftItem.png') no-repeat center top;
|
|
|
background-size: 100% 100%;
|
