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

2024-06-07 20:42:14 +08:00 · 2024-06-07 20:42:14 +08:00 · e9191ace5a
parent 2ecb435a6f
commit e9191ace5a
11 changed files with 272 additions and 453 deletions
--- a/components/charts/PeakEnergyUseChart.vue
+++ b/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,
            }
--- a/components/charts/PeakWarningTypeChart.vue
+++ b/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 aligns = ['left', 'left', 'left', 'left'];
-      let tops = ['15%', '40%', '65%', '90%'];
+      let lefts = ['40%', '40%', '40%', '40%','40%'];
+      let aligns = ['left', 'left', 'left', 'left','left'];
+      let tops = ['15%', '30%', '45%', '60%','75%'];
      let legendData = [];
      for (let i = 0; i < chartData.length; i++) {
        // 第一圈数据
--- a/components/peak-coal-monitoring/AtmosphericModule.vue
+++ b/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 v-if="activeTab === 2"/>
+      <changes-pollutants />
    </div>
  </div>
 </template>
@ -23,24 +17,10 @@ export default {
  components: {PeakAirQuality, ChangesPollutants, PeakSecondaryTitle},
  data() {
    return {
-      title: '大气质量信息总览',
-      tabList: [
-        {
-          label: '空气质量指数',
-          value: 1
-        },
-        {
-          label: '重要污染物变化趋势',
-          value: 2
-        }
-      ],
-      activeTab: 1
+      title: '本市空气质量',
    }
  },
  methods: {
-    tabChange(val) {
-      this.activeTab = val
-    }
  }
 }
 </script>
--- a/components/peak-coal-monitoring/DeviceOnlineRate.vue
+++ b/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>
--- a/components/peak-coal-monitoring/EnergyProfile.vue
+++ b/components/peak-coal-monitoring/EnergyProfile.vue
@ -1,15 +1,6 @@
 <template>
  <div class="energy-profile">
-    <peak-secondary-title :title="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>
+    <peak-secondary-title :title="title"></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">
-        <peak-enterprise-operations v-if="activeTab === 2"/>
+      <div class="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 PeakEnterpriseOperations from "@/components/peak-coal-monitoring/PeakEnterpriseOperations";
+import PeakWarningTypeChart from "@/components/charts/PeakWarningTypeChart";

 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: [
+      activeDateTab: '0',
+      activeTab: 1,
+      warningTypeDataSource: [
        {
-          name: '今日',
-          value: '0'
+          name: '水运',
+          value: 214,
+          rate: '38%'
        },
        {
-          name: '本月',
-          value: '1'
+          name: '铁路',
+          value: 342,
+          rate: '32%'
        },
        {
-          name: '上月',
-          value: '2'
+          name: '管道',
+          value: 12,
+          rate: '30%'
+        },
+        {
+          name: '国六',
+          value: 12,
+          rate: '30%'
+        },
+        {
+          name: '新能源',
+          value: 12,
+          rate: '30%'
        }
-      ],
-      activeDateTab:'0',
-      activeTab: 1
+      ]
    }
  },
  methods: {
    tabChange(val) {
      this.activeTab = val
-    },
-    tabDateChange(val) {
-      this.activeDateTab = val
-    },
+    }
  }
 }
 </script>
@ -112,13 +112,25 @@ export default {
  .energy-content {
    flex: 1;
    height: 0;
-    .peak-energy-use{
+
+    .peak-energy-use {
      height: 100%;
    }

-    .peak-enterprise-operations{
+    .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 {
--- a/components/peak-coal-monitoring/ExcessiveWarning.vue
+++ b/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>
--- a/components/peak-coal-monitoring/MonitorData.vue
+++ b/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: '监测设备',
-          dataIndex: 'pointName',
-          dataUnit: null,
+          title: '设备掉线',
+          dataIndex: 'deviceName',
+          width: '35%'
+        },
+        {
+          title: '故障异常',
+          dataIndex: 'errorName',
          width: '25%'
        },
        {
-          title: '一氧化碳',
-          dataIndex: 'COValue',
-          dataUnit: 'COUnit',
-          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%'
+          title: '异常报警',
+          dataIndex: 'errorImg',
+          width: '40%'
        }
      ],
      dataSource: [
        {
-          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³'
+          deviceName: '高炉',
+          errorName: '异常',
+          errorImg: '红灯'
        },
        {
-          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³'
+          deviceName: '高炉',
+          errorName: '异常',
+          errorImg: '红灯'
        },
        {
-          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³'
+          deviceName: '高炉',
+          errorName: '异常',
+          errorImg: '红灯'
        },
        {
-          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³'
+          deviceName: '高炉',
+          errorName: '异常',
+          errorImg: '红灯'
        },
        {
-          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³'
+          deviceName: '高炉',
+          errorName: '异常',
+          errorImg: '红灯'
        },
        {
-          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³'
-        },
-        {
-          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³'
+          deviceName: '高炉',
+          errorName: '异常',
+          errorImg: '红灯'
        }
      ]
    }
--- a/components/peak-coal-monitoring/PeakAirQuality.vue
+++ b/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>
--- a/components/peak-coal-monitoring/PeakCustomTable.vue
+++ b/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;
--- a/components/peak-coal-monitoring/PeakEnergyUse.vue
+++ b/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: '能源使用情况',
-      thirdLevelLabel: '水电使用情况',
+      title: 'VOC、SEMES排放统计',
+      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
--- a/pages/peak-coal-monitoring/PeakCoalMonitoring.vue
+++ b/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">
-        <pollution-information/>
+      <div class="device-online-rate">
+        <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;