1、新增修改的看板新增修改的看板

components/charts/PeakEnergyUseChart.vue

@@ -133,58 +133,27 @@ export default {
             axisTick: {
               show: false,
             },
-          },
+          }
-          {
-            type: 'value',
-            position: 'right',
-            name: '单位：KWH',
-            splitNumber: 5,
-            axisLabel: {
-              fontSize: 12,
-              color: '#B8D3F1'
-            },
-            nameTextStyle: {
-              color: '#B8D3F1',
-              fontSize: 12,
-              lineHeight: 10,
-            },
-            // 分割线
-            splitLine: {
-              show: false,
-              lineStyle: {
-                color: 'rgba(176,215,255,0.40)',
-                type: 'dashed'
-              },
-            },
-            axisLine: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-          },
         ],
         series: [
           {
-            name: '用电',
+            name: 'VOC',
             type: 'line',
             smooth: false,
             zlevel: 3,
             symbol: 'none', //数据交叉点样式
             data: yAxisData1,
-            yAxisIndex: 0, // 通过这个判断左右
             lineStyle: {
               width: 3,
             }
           },
           {
-            name: '用水',
+            name: 'SEMES',
             type: 'line',
             smooth: false,
             zlevel: 3,
             symbol: 'none', //数据交叉点样式 (实心点)
             data: yAxisData2,
-            yAxisIndex: 1, // 通过这个判断左右
             lineStyle: {
               width: 3,
             }

components/charts/PeakWarningTypeChart.vue

@@ -21,7 +21,9 @@ export default {
       default: () => [
         '#F8F661',
         '#61F8F6',
-        '#1872FF'
+        '#1872FF',
+        'rgba(173,122,255,1)',
+        'rgba(253,189,0,1)'
       ]
     }
   },
@@ -51,7 +53,7 @@ export default {
       // 复制代码
       let chartData = this.dataSource;
       const colorList = this.color;
-      const bgColorList = ['rgba(255,221,48,0.2)', 'rgba(84,255,210,0.2)', 'rgba(24,114,255,0.2)']
+      const bgColorList = ['rgba(255,221,48,0.2)', 'rgba(84,255,210,0.2)', 'rgba(24,114,255,0.2)','rgba(173,122,255,0.2)','rgba(253,189,0,0.2)']
       const pieData1 = [];
       const sum = chartData.reduce((per, cur) => per + cur.value, 0);
       const gap = (1 * sum) / 100;
@@ -63,9 +65,9 @@ export default {
         },
       };
       //图标位置显示
-      let lefts = ['40%', '40%', '40%', '40%'];
+      let lefts = ['40%', '40%', '40%', '40%','40%'];
-      let aligns = ['left', 'left', 'left', 'left'];
+      let aligns = ['left', 'left', 'left', 'left','left'];
-      let tops = ['15%', '40%', '65%', '90%'];
+      let tops = ['15%', '30%', '45%', '60%','75%'];
       let legendData = [];
       for (let i = 0; i < chartData.length; i++) {
         // 第一圈数据

components/peak-coal-monitoring/AtmosphericModule.vue

@@ -1,14 +1,8 @@
 <template>
   <div class="atmospheric-module">
     <peak-secondary-title :title="title"/>
-    <div class="_tab">
-      <div class="tab-item" v-for="item of tabList" :class="item.value === activeTab?'active-tab':''"
-           @click="tabChange(item.value)">{{ item.label }}
-      </div>
-    </div>
     <div class="charts-info">
-      <peak-air-quality v-if="activeTab === 1"/>
+      <changes-pollutants />
-      <changes-pollutants v-if="activeTab === 2"/>
     </div>
   </div>
 </template>
@@ -23,24 +17,10 @@ export default {
   components: {PeakAirQuality, ChangesPollutants, PeakSecondaryTitle},
   data() {
     return {
-      title: '大气质量信息总览',
+      title: '本市空气质量',
-      tabList: [
-        {
-          label: '空气质量指数',
-          value: 1
-        },
-        {
-          label: '重要污染物变化趋势',
-          value: 2
-        }
-      ],
-      activeTab: 1
     }
   },
   methods: {
-    tabChange(val) {
-      this.activeTab = val
-    }
   }
 }
 </script>

components/peak-coal-monitoring/DeviceOnlineRate.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="atmospheric-module">
+    <peak-secondary-title :title="title"/>
+    <div class="charts-info">
+      <peak-air-quality/>
+    </div>
+  </div>
+</template>
+
+<script>
+import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
+import PeakAirQuality from "@/components/peak-coal-monitoring/PeakAirQuality";
+
+export default {
+  name: "DeviceOnlineRate",
+  components: {PeakAirQuality, PeakSecondaryTitle},
+  data() {
+    return {
+      title: '治理设备在线率'
+    }
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="less">
+@import "../../assets/styles/mixin";
+
+.atmospheric-module {
+  height: 100%;
+  width: 100%;
+  .flex-column;
+
+  .charts-info {
+    flex: 1;
+    height: 0;
+  }
+}
+</style>

components/peak-coal-monitoring/EnergyProfile.vue

@@ -1,15 +1,6 @@
 <template>
   <div class="energy-profile">
-    <peak-secondary-title :title="title">
+    <peak-secondary-title :title="title"></peak-secondary-title>
-      <template>
-        <div class="right-tab">
-          <div class="tab-type" v-for="item of tabDataList" :class="activeDateTab === item.value? 'active-tab':''"
-               @click="tabDateChange(item.value)">
-            {{ item.name }}
-          </div>
-        </div>
-      </template>
-    </peak-secondary-title>
     <div class="_tab">
       <div class="tab-item" v-for="item of tabList" :class="item.value === activeTab?'active-tab':''"
            @click="tabChange(item.value)">{{ item.label }}
@@ -17,10 +8,10 @@
     </div>
     <div class="energy-content">
       <div class="peak-energy-use" v-if="activeTab === 1">
-        <peak-energy-use/>
+        <peak-warning-type-chart :data-source="warningTypeDataSource"/>
       </div>
-      <div class="peak-enterprise-operations">
+      <div class="peak-enterprise-operations" v-if="activeTab === 2">
-        <peak-enterprise-operations v-if="activeTab === 2"/>
+        <peak-warning-type-chart :data-source="warningTypeDataSource"/>
       </div>
     </div>
   </div>
@@ -28,50 +19,59 @@
 
 <script>
 import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
-import PeakEnergyUse from "@/components/peak-coal-monitoring/PeakEnergyUse";
+import PeakWarningTypeChart from "@/components/charts/PeakWarningTypeChart";
-import PeakEnterpriseOperations from "@/components/peak-coal-monitoring/PeakEnterpriseOperations";
 
 export default {
   name: "EnergyProfile",
-  components: {PeakEnterpriseOperations, PeakEnergyUse, PeakSecondaryTitle},
+  components: {PeakSecondaryTitle, PeakWarningTypeChart},
   data() {
     return {
-      title: '能源概况',
+      title: '清洁运输情况',
       tabList: [
         {
-          label: '能源使用情况',
+          label: '昨日清洁运输比例',
           value: 1
         },
         {
-          label: '企业运营情况',
+          label: '上周清洁运输比例',
           value: 2
         }
       ],
-      tabDataList: [
-        {
-          name: '今日',
-          value: '0'
-        },
-        {
-          name: '本月',
-          value: '1'
-        },
-        {
-          name: '上月',
-          value: '2'
-        }
-      ],
       activeDateTab: '0',
-      activeTab: 1
+      activeTab: 1,
+      warningTypeDataSource: [
+        {
+          name: '水运',
+          value: 214,
+          rate: '38%'
+        },
+        {
+          name: '铁路',
+          value: 342,
+          rate: '32%'
+        },
+        {
+          name: '管道',
+          value: 12,
+          rate: '30%'
+        },
+        {
+          name: '国六',
+          value: 12,
+          rate: '30%'
+        },
+        {
+          name: '新能源',
+          value: 12,
+          rate: '30%'
+        }
+      ]
     }
   },
   methods: {
     tabChange(val) {
       this.activeTab = val
-    },
+    }
-    tabDateChange(val) {
-      this.activeDateTab = val
-    },
   }
 }
 </script>
@@ -112,6 +112,7 @@ export default {
   .energy-content {
     flex: 1;
     height: 0;
+
     .peak-energy-use {
       height: 100%;
     }
@@ -119,6 +120,17 @@ export default {
     .peak-enterprise-operations {
       height: 100%;
     }
+
+
+    ._bg {
+      position: absolute;
+      left: 26px;
+      top: 24px;
+      width: 120px;
+      height: 120px;
+      background: url("~/assets/peakCoalImages/right/warning-type-pie-bg.png") no-repeat;
+      background-size: 100% 100%;
+    }
   }
 
   .right-tab {

components/peak-coal-monitoring/ExcessiveWarning.vue

@@ -0,0 +1,90 @@
+<template>
+<div class="monitor-data">
+  <peak-secondary-title :title="title"/>
+  <div class="table-content">
+    <peak-custom-table :table-title="tableTitle" :data-source="dataSource" :limit-move-num="4" :table-roll="false"/>
+  </div>
+</div>
+</template>
+
+<script>
+import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
+import PeakCustomTable from "@/components/peak-coal-monitoring/PeakCustomTable";
+export default {
+  name: "ExcessiveWarning",
+  components: {PeakCustomTable, PeakSecondaryTitle},
+  data(){
+    return{
+      title: '超标预警',
+      tableTitle: [
+        {
+          title: '工序',
+          dataIndex: 'workingProcedure',
+          width: '35%'
+        },
+        {
+          title: '数值',
+          dataIndex: 'standardNum',
+          width: '25%'
+        },
+        {
+          title: '超标后数值',
+          dataIndex: 'overNum',
+          width: '25%'
+        },
+        {
+          title: '详情',
+          dataIndex: 'operation',
+          width: '15%'
+        }
+      ],
+      dataSource: [
+        {
+          workingProcedure: '高炉',
+          standardNum: '10',
+          overNum: '20'
+        },
+        {
+          workingProcedure: '高炉',
+          standardNum: '50',
+          overNum: '20'
+        },
+        {
+          workingProcedure: '高炉',
+          standardNum: '40',
+          overNum: '20'
+        },
+        {
+          workingProcedure: '高炉',
+          standardNum: '10',
+          overNum: '20'
+        },
+        {
+          workingProcedure: '高炉',
+          standardNum: '50',
+          overNum: '20'
+        },
+        {
+          workingProcedure: '高炉',
+          standardNum: '40',
+          overNum: '20'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "assets/styles/mixin";
+.monitor-data{
+  height: 100%;
+  width: 100%;
+  .flex-column;
+  .table-content{
+    padding-top: 20px;
+    flex: 1;
+    height: 0;
+  }
+}
+</style>

components/peak-coal-monitoring/MonitorData.vue

@@ -2,7 +2,7 @@
 <div class="monitor-data">
   <peak-secondary-title :title="title"/>
   <div class="table-content">
-    <peak-custom-table :table-title="tableTitle" :data-source="dataSource"/>
+    <peak-custom-table :table-title="tableTitle" :data-source="dataSource" :limit-move-num="4"/>
   </div>
 </div>
 </template>
@@ -15,330 +15,54 @@ export default {
   components: {PeakCustomTable, PeakSecondaryTitle},
   data(){
     return{
-      title: '实时监测数据',
+      title: '厂区环境趋势',
       tableTitle: [
         {
-          title: '监测设备',
+          title: '设备掉线',
-          dataIndex: 'pointName',
+          dataIndex: 'deviceName',
-          dataUnit: null,
+          width: '35%'
+        },
+        {
+          title: '故障异常',
+          dataIndex: 'errorName',
           width: '25%'
         },
         {
-          title: '一氧化碳',
+          title: '异常报警',
-          dataIndex: 'COValue',
+          dataIndex: 'errorImg',
-          dataUnit: 'COUnit',
+          width: '40%'
-          width: '15%'
-        },
-        {
-          title: '二氧化硫',
-          dataIndex: 'SO2Value',
-          dataUnit: 'SO2Unit',
-          width: '15%'
-        },
-        {
-          title: '氮氧化物',
-          dataIndex: 'NOValue',
-          dataUnit: 'NOUnit',
-          width: '15%'
-        },
-        {
-          title: '臭氧',
-          dataIndex: 'O3Value',
-          dataUnit: 'O3Unit',
-          width: '15%'
-        },
-        {
-          title: 'PM10',
-          dataIndex: 'PM10Value',
-          dataUnit: 'PM10Unit',
-          width: '15%'
         }
       ],
       dataSource: [
         {
-          pointName: '监测设备名称',
+          deviceName: '高炉',
-          COValue: 2,
+          errorName: '异常',
-          COUnit: '%VOL',
+          errorImg: '红灯'
-          SO2Value: 30,
-          SO2Unit: 'mg/m³',
-          NOValue: 20,
-          NOUnit: 'mg/L',
-          O3Value: 10,
-          O3Unit: 'ppm',
-          PM10Value: 10,
-          PM10Unit: 'μg/m³',
-          PM25Value: 30,
-          PM25Unit: 'μg/m³'
         },
         {
-          pointName: '监测设备名称',
+          deviceName: '高炉',
-          COValue: 2,
+          errorName: '异常',
-          COUnit: '%VOL',
+          errorImg: '红灯'
-          SO2Value: 30,
-          SO2Unit: 'mg/m³',
-          NOValue: 20,
-          NOUnit: 'mg/L',
-          O3Value: 10,
-          O3Unit: 'ppm',
-          PM10Value: 10,
-          PM10Unit: 'μg/m³',
-          PM25Value: 30,
-          PM25Unit: 'μg/m³'
         },
         {
-          pointName: '监测设备名称',
+          deviceName: '高炉',
-          COValue: 2,
+          errorName: '异常',
-          COUnit: '%VOL',
+          errorImg: '红灯'
-          SO2Value: 30,
-          SO2Unit: 'mg/m³',
-          NOValue: 20,
-          NOUnit: 'mg/L',
-          O3Value: 10,
-          O3Unit: 'ppm',
-          PM10Value: 10,
-          PM10Unit: 'μg/m³',
-          PM25Value: 30,
-          PM25Unit: 'μg/m³'
         },
         {
-          pointName: '监测设备名称',
+          deviceName: '高炉',
-          COValue: 2,
+          errorName: '异常',
-          COUnit: '%VOL',
+          errorImg: '红灯'
-          SO2Value: 30,
-          SO2Unit: 'mg/m³',
-          NOValue: 20,
-          NOUnit: 'mg/L',
-          O3Value: 10,
-          O3Unit: 'ppm',
-          PM10Value: 10,
-          PM10Unit: 'μg/m³',
-          PM25Value: 30,
-          PM25Unit: 'μg/m³'
         },
         {
-          pointName: '监测设备名称',
+          deviceName: '高炉',
-          COValue: 2,
+          errorName: '异常',
-          COUnit: '%VOL',
+          errorImg: '红灯'
-          SO2Value: 30,
-          SO2Unit: 'mg/m³',
-          NOValue: 20,
-          NOUnit: 'mg/L',
-          O3Value: 10,
-          O3Unit: 'ppm',
-          PM10Value: 10,
-          PM10Unit: 'μg/m³',
-          PM25Value: 30,
-          PM25Unit: 'μg/m³'
         },
         {
-          pointName: '监测设备名称',
+          deviceName: '高炉',
-          COValue: 2,
+          errorName: '异常',
-          COUnit: '%VOL',
+          errorImg: '红灯'
-          SO2Value: 30,
-          SO2Unit: 'mg/m³',
-          NOValue: 20,
-          NOUnit: 'mg/L',
-          O3Value: 10,
-          O3Unit: 'ppm',
-          PM10Value: 10,
-          PM10Unit: 'μg/m³',
-          PM25Value: 30,
-          PM25Unit: 'μg/m³'
-        },
-        {
-          pointName: '监测设备名称',
-          COValue: 2,
-          COUnit: '%VOL',
-          SO2Value: 30,
-          SO2Unit: 'mg/m³',
-          NOValue: 20,
-          NOUnit: 'mg/L',
-          O3Value: 10,
-          O3Unit: 'ppm',
-          PM10Value: 10,
-          PM10Unit: 'μg/m³',
-          PM25Value: 30,
-          PM25Unit: 'μg/m³'
-        },
-        {
-          pointName: '监测设备名称',
-          COValue: 2,
-          COUnit: '%VOL',
-          SO2Value: 30,
-          SO2Unit: 'mg/m³',
-          NOValue: 20,
-          NOUnit: 'mg/L',
-          O3Value: 10,
-          O3Unit: 'ppm',
-          PM10Value: 10,
-          PM10Unit: 'μg/m³',
-          PM25Value: 30,
-          PM25Unit: 'μg/m³'
-        },
-        {
-          pointName: '监测设备名称',
-          COValue: 2,
-          COUnit: '%VOL',
-          SO2Value: 30,
-          SO2Unit: 'mg/m³',
-          NOValue: 20,
-          NOUnit: 'mg/L',
-          O3Value: 10,
-          O3Unit: 'ppm',
-          PM10Value: 10,
-          PM10Unit: 'μg/m³',
-          PM25Value: 30,
-          PM25Unit: 'μg/m³'
-        },
-        {
-          pointName: '监测设备名称',
-          COValue: 2,
-          COUnit: '%VOL',
-          SO2Value: 30,
-          SO2Unit: 'mg/m³',
-          NOValue: 20,
-          NOUnit: 'mg/L',
-          O3Value: 10,
-          O3Unit: 'ppm',
-          PM10Value: 10,
-          PM10Unit: 'μg/m³',
-          PM25Value: 30,
-          PM25Unit: 'μg/m³'
-        },
-        {
-          pointName: '监测设备名称',
-          COValue: 2,
-          COUnit: '%VOL',
-          SO2Value: 30,
-          SO2Unit: 'mg/m³',
-          NOValue: 20,
-          NOUnit: 'mg/L',
-          O3Value: 10,
-          O3Unit: 'ppm',
-          PM10Value: 10,
-          PM10Unit: 'μg/m³',
-          PM25Value: 30,
-          PM25Unit: 'μg/m³'
-        },
-        {
-          pointName: '监测设备名称',
-          COValue: 2,
-          COUnit: '%VOL',
-          SO2Value: 30,
-          SO2Unit: 'mg/m³',
-          NOValue: 20,
-          NOUnit: 'mg/L',
-          O3Value: 10,
-          O3Unit: 'ppm',
-          PM10Value: 10,
-          PM10Unit: 'μg/m³',
-          PM25Value: 30,
-          PM25Unit: 'μg/m³'
-        },
-        {
-          pointName: '监测设备名称',
-          COValue: 2,
-          COUnit: '%VOL',
-          SO2Value: 30,
-          SO2Unit: 'mg/m³',
-          NOValue: 20,
-          NOUnit: 'mg/L',
-          O3Value: 10,
-          O3Unit: 'ppm',
-          PM10Value: 10,
-          PM10Unit: 'μg/m³',
-          PM25Value: 30,
-          PM25Unit: 'μg/m³'
-        },
-        {
-          pointName: '监测设备名称',
-          COValue: 2,
-          COUnit: '%VOL',
-          SO2Value: 30,
-          SO2Unit: 'mg/m³',
-          NOValue: 20,
-          NOUnit: 'mg/L',
-          O3Value: 10,
-          O3Unit: 'ppm',
-          PM10Value: 10,
-          PM10Unit: 'μg/m³',
-          PM25Value: 30,
-          PM25Unit: 'μg/m³'
-        },
-        {
-          pointName: '监测设备名称',
-          COValue: 2,
-          COUnit: '%VOL',
-          SO2Value: 30,
-          SO2Unit: 'mg/m³',
-          NOValue: 20,
-          NOUnit: 'mg/L',
-          O3Value: 10,
-          O3Unit: 'ppm',
-          PM10Value: 10,
-          PM10Unit: 'μg/m³',
-          PM25Value: 30,
-          PM25Unit: 'μg/m³'
-        },
-        {
-          pointName: '监测设备名称',
-          COValue: 2,
-          COUnit: '%VOL',
-          SO2Value: 30,
-          SO2Unit: 'mg/m³',
-          NOValue: 20,
-          NOUnit: 'mg/L',
-          O3Value: 10,
-          O3Unit: 'ppm',
-          PM10Value: 10,
-          PM10Unit: 'μg/m³',
-          PM25Value: 30,
-          PM25Unit: 'μg/m³'
-        },
-        {
-          pointName: '监测设备名称',
-          COValue: 2,
-          COUnit: '%VOL',
-          SO2Value: 30,
-          SO2Unit: 'mg/m³',
-          NOValue: 20,
-          NOUnit: 'mg/L',
-          O3Value: 10,
-          O3Unit: 'ppm',
-          PM10Value: 10,
-          PM10Unit: 'μg/m³',
-          PM25Value: 30,
-          PM25Unit: 'μg/m³'
-        },
-        {
-          pointName: '监测设备名称',
-          COValue: 2,
-          COUnit: '%VOL',
-          SO2Value: 30,
-          SO2Unit: 'mg/m³',
-          NOValue: 20,
-          NOUnit: 'mg/L',
-          O3Value: 10,
-          O3Unit: 'ppm',
-          PM10Value: 10,
-          PM10Unit: 'μg/m³',
-          PM25Value: 30,
-          PM25Unit: 'μg/m³'
-        },
-        {
-          pointName: '监测设备名称',
-          COValue: 2,
-          COUnit: '%VOL',
-          SO2Value: 30,
-          SO2Unit: 'mg/m³',
-          NOValue: 20,
-          NOUnit: 'mg/L',
-          O3Value: 10,
-          O3Unit: 'ppm',
-          PM10Value: 10,
-          PM10Unit: 'μg/m³',
-          PM25Value: 30,
-          PM25Unit: 'μg/m³'
         }
       ]
     }

components/peak-coal-monitoring/PeakAirQuality.vue

@@ -3,12 +3,6 @@
     <div class="line-charts">
       <peak-air-quality-trend-charts :data-source="airQualityTrendDataSource"/>
     </div>
-    <div class="bar-charts">
-      <div class="_title"></div>
-      <div class="_bar">
-        <air-rate-charts :rate-num="60"/>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -111,22 +105,5 @@ export default {
     width: 100%;
   }
 
-  .bar-charts {
-    flex: 1;
-    height: 0;
-    width: 100%;
-    .flex-column;
-
-    ._title {
-      width: 300px;
-      height: 30px;
-      background: url("~/assets/peakCoalMonitoring/left/air-rate-bg.png") no-repeat;
-    }
-
-    ._bar {
-      flex: 1;
-      height: 0;
-    }
-  }
 }
 </style>

components/peak-coal-monitoring/PeakCustomTable.vue

@@ -35,7 +35,8 @@
             <span class="data-content" v-for="dataIndex of tableTitle" :style="`width:${dataIndex.width};`">
               <div class="_content">
                 <div class="point-name">
-                  <div class="_value">{{ item[dataIndex.dataIndex] }}</div>
+                  <div class="_value" v-if="dataIndex.dataIndex !== 'operation'">{{ item[dataIndex.dataIndex] }}</div>
+                  <div class="_operation" v-else @click="viewDetail(item)">详情</div>
                   <div class="_unit" v-if="dataIndex.dataUnit">{{ item[dataIndex.dataUnit] }}</div>
                 </div>
               </div>
@@ -64,6 +65,10 @@ export default {
     tableRoll: {
       type: Boolean,
       default: true
+    },
+    limitMoveNum: {
+      type: Number,
+      default: 9
     }
   },
   data() {
@@ -73,7 +78,7 @@ export default {
     defaultOption() {
       return {
         step: 0.3, // 数值越大速度滚动越快
-        limitMoveNum: 9, // 开始无缝滚动的数据量 this.dataList.length
+        limitMoveNum: this.limitMoveNum, // 开始无缝滚动的数据量 this.dataList.length
         hoverStop: true, // 是否开启鼠标悬停stop
         direction: 1, // 0向下 1向上 2向左 3向右
         openWatch: true, // 开启数据实时监控刷新dom
@@ -83,7 +88,11 @@ export default {
       }
     },
   },
-  methods: {}
+  methods: {
+    viewDetail(val){
+      console.log('val:',val)
+    }
+  }
 }
 </script>
 
@@ -162,6 +171,15 @@ export default {
                 font-weight: 700;
               }
 
+              ._operation{
+                font-family: MicrosoftYaHei-Bold;
+                font-size: 14px;
+                color: #FFFFFF;
+                letter-spacing: 0;
+                font-weight: 700;
+                cursor: pointer;
+              }
+
               ._unit {
                 font-family: MicrosoftYaHei-Bold;
                 font-size: 12px;

components/peak-coal-monitoring/PeakEnergyUse.vue

@@ -1,11 +1,12 @@
 <!--能源使用情况-->
 <template>
   <div class="energy-use">
+    <peak-secondary-title :title="title"></peak-secondary-title>
     <div class="electricity-water-usage">
       <div class="electricity-usage">
         <div class="electricity-icon"></div>
         <div class="electricity-info">
-          <div class="_title">今日用电[kwh]</div>
+          <div class="_title">今日VOC排放[t]</div>
           <div class="_value">
             <Number :num="1244"/>
           </div>
@@ -14,7 +15,7 @@
       <div class="water-usage">
         <div class="water-icon"></div>
         <div class="water-info">
-          <div class="_title">今日用水[m³]</div>
+          <div class="_title">今日SEMES排放[t]</div>
           <div class="_value">
             <Number :num="185"/>
           </div>
@@ -33,62 +34,56 @@
 import ElectricityWaterCharts from "@/components/charts/ElectricityWaterCharts";
 import PeakThirdLevelLabel from "@/components/peak-coal-monitoring/PeakThirdLevelLabel";
 import PeakEnergyUseChart from "@/components/charts/PeakEnergyUseChart";
-
+import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
 export default {
   name: "PeakEnergyUse",
-  components: {PeakEnergyUseChart, PeakThirdLevelLabel, ElectricityWaterCharts},
+  components: {PeakEnergyUseChart, PeakThirdLevelLabel, ElectricityWaterCharts,PeakSecondaryTitle},
   data() {
     return {
-      title: '能源使用情况',
+      title: 'VOC、SEMES排放统计',
-      thirdLevelLabel: '水电使用情况',
+      thirdLevelLabel: '历史排放统计(周)',
       electricityWaterDataSource: [
         {
-          name: '00:00',
+          name: '周一',
           value1: '10',
           value2: '30',
           value3: '20'
         },
         {
-          name: '01:00',
+          name: '周二',
           value1: '30',
           value2: '20',
           value3: '10'
         },
         {
-          name: '02:00',
+          name: '周三',
           value1: '20',
           value2: '10',
           value3: '20'
         },
         {
-          name: '03:00',
+          name: '周四',
           value1: '20',
           value2: '30',
           value3: '60'
         },
         {
-          name: '04:00',
+          name: '周五',
           value1: '30',
           value2: '40',
           value3: '50'
         },
         {
-          name: '05:00',
+          name: '周六',
           value1: '10',
           value2: '20',
           value3: '30'
         },
         {
-          name: '06:00',
+          name: '周日',
           value1: '16',
           value2: '17',
           value3: '18'
-        },
-        {
-          name: '07:00',
-          value1: '30',
-          value2: '20',
-          value3: '10'
         }
       ],
       electricityWaterTab: 0

pages/peak-coal-monitoring/PeakCoalMonitoring.vue

@@ -15,11 +15,14 @@
 
 
     <div class="left-panel show-top">
+      <div class="pollution-information-module">
+        <pollution-information/>
+      </div>
       <div class="atmospheric-module-module">
         <atmospheric-module />
       </div>
-      <div class="pollution-information-module">
+      <div class="device-online-rate">
-        <pollution-information/>
+        <device-online-rate />
       </div>
       <div class="monitor-data-module">
         <monitor-data/>
@@ -31,10 +34,10 @@
         <energy-profile/>
       </div>
       <div class="device-overview-module">
-        <device-overview/>
+        <peak-energy-use/>
       </div>
       <div class="alarm-overview-module">
-        <alarm-overview/>
+        <excessive-warning/>
       </div>
     </div>
 
@@ -57,9 +60,16 @@ import GBZDialog from "@/components/GBZDialog";
 import CEMSDialog from "@/components/CEMSDialog";
 import pointDialog from '@/components/PointDialog'
 import {mapState} from "vuex";
+import DeviceOnlineRate from "@/components/peak-coal-monitoring/DeviceOnlineRate";
+import PeakEnergyUse from "@/components/peak-coal-monitoring/PeakEnergyUse";
+import ExcessiveWarning from "@/components/peak-coal-monitoring/ExcessiveWarning";
 export default {
   name: "PeakCoalMonitoring",
-  components: {AlarmOverview, DeviceOverview, EnergyProfile, MonitorData, PollutionInformation, AtmosphericModule},
+  components: {
+    ExcessiveWarning,
+    PeakEnergyUse,
+    DeviceOnlineRate,
+    AlarmOverview, DeviceOverview, EnergyProfile, MonitorData, PollutionInformation, AtmosphericModule},
   computed: {
     ...mapState({
       title: state => state.system.title,
@@ -239,9 +249,12 @@ body, html, #__nuxt, #__layout {
     padding-right: 0;
 
     .atmospheric-module-module{
-      height: 336px;
+      height: 230px;
       width: 100%;
     }
+    .device-online-rate{
+      height: 230px;
+    }
 
     .pollution-information-module{
       height: 260px;