1、新增图表看板

2024-02-21 21:09:38 +08:00 · 2024-02-21 21:09:38 +08:00 · 7e8c42ca60
parent e0e046f3d8
commit 7e8c42ca60
27 changed files with 2107 additions and 35 deletions
--- a/assets/peakCoalImages/coommon/long-seconfary-title-bg.png
+++ b/assets/peakCoalImages/coommon/long-seconfary-title-bg.png
--- a/assets/peakCoalImages/coommon/no-data.png
+++ b/assets/peakCoalImages/coommon/no-data.png
--- a/assets/peakCoalImages/coommon/small-seconfary-title-bg.png
+++ b/assets/peakCoalImages/coommon/small-seconfary-title-bg.png
--- a/assets/peakCoalImages/common/third-level-label-icon.png
+++ b/assets/peakCoalImages/common/third-level-label-icon.png
--- a/assets/peakCoalImages/left/pollutant-type-active-bg.png
+++ b/assets/peakCoalImages/left/pollutant-type-active-bg.png
--- a/assets/peakCoalImages/left/pollutant-type-default-bg.png
+++ b/assets/peakCoalImages/left/pollutant-type-default-bg.png
--- a/assets/peakCoalImages/right/warning-type-pie-bg.png
+++ b/assets/peakCoalImages/right/warning-type-pie-bg.png
--- a/components/AirQuality.vue
+++ b/components/AirQuality.vue
@ -10,17 +10,99 @@
          90%
        </div>
      </div>
-      <div class="air-quality-trend"></div>
+
+      <div class="air-quality-trend">
+        <third-level-label :title="thirdLevelLabel"/>
+        <div class="_charts">
+          <air-quality-trend-charts :data-source="airQualityTrendDataSource"/>
+        </div>
+      </div>
    </div>
  </div>
 </template>

 <script>
+import AirQualityTrendCharts from "@/components/charts/AirQualityTrendCharts";
+
 export default {
  name: "AirQuality",
+  components: {AirQualityTrendCharts},
  data() {
    return {
-      title: '空气质量指数'
+      title: '空气质量指数',
+      thirdLevelLabel: '空气质量变化趋势',
+      airQualityTrendDataSource: [
+        {
+          name: '1',
+          value: 3,
+          attr: '2021'
+        },
+        {
+          name: '2',
+          value: 4,
+          attr: '2021'
+        },
+        {
+          name: '3',
+          value: 1,
+          attr: '2021'
+        },
+        {
+          name: '4',
+          value: 4,
+          attr: '2021'
+        },
+        {
+          name: '5',
+          value: 6,
+          attr: '2021'
+        },
+        {
+          name: '6',
+          value: 1,
+          attr: '2021'
+        },
+        {
+          name: '7',
+          value: 8,
+          attr: '2021'
+        },
+        {
+          name: '1',
+          value: 1,
+          attr: '2022'
+        },
+        {
+          name: '2',
+          value: 4,
+          attr: '2022'
+        },
+        {
+          name: '3',
+          value: 7,
+          attr: '2022'
+        },
+        {
+          name: '4',
+          value: 8,
+          attr: '2022'
+        },
+        {
+          name: '5',
+          value: 2,
+          attr: '2022'
+        },
+        {
+          name: '6',
+          value: 7,
+          attr: '2022'
+        },
+        {
+          name: '7',
+          value: 1,
+          attr: '2022'
+        }
+      ]
    }
  }
 }
@ -33,9 +115,9 @@ export default {
  width: 100%;
  height: 601px;
  background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
-/*  border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
-  border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); !* 使用线性渐变作为边框图片 *!
-  border-image-slice: 1; !* 指定切分边框图像的位置 *!*/
+  /*  border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
+    border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); !* 使用线性渐变作为边框图片 *!
+    border-image-slice: 1; !* 指定切分边框图像的位置 *!*/
  .flex-column;

  .air-data {
@ -74,7 +156,14 @@ export default {
    }

    .air-quality-trend {
+      height: 100%;
      flex: 1;
+      .flex-column;
+
+      ._charts {
+        flex: 1;
+        height: 0;
+      }
    }
  }
 }
--- a/components/DeviceRun.vue
+++ b/components/DeviceRun.vue
@ -82,7 +82,7 @@ export default {

 .device-run {
  margin-top: 43px;
-  height: 416px;
+  height: 516px;
  width: 100%;
  background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
  /*  border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
--- a/components/EnergyUse.vue
+++ b/components/EnergyUse.vue
@ -3,7 +3,11 @@
  <div class="energy-use">
    <secondary-title :title="title">
      <template>
-        <div class="right-tip">
+        <div class="right-tab">
+          <div class="tab-type" v-for="item of tabDataList" :class="activeTab === item.value? 'active-tab':''"
+               @click="tabChange(item.value)">
+            {{ item.name }}
+          </div>
        </div>
      </template>
    </secondary-title>
@ -24,16 +28,101 @@
          </div>
        </div>
      </div>
+      <third-level-label :title="thirdLevelLabel">
+        <template>
+          <div class="electricity-water-tab">
+            <div class="_title" :class="electricityWaterTab === 0? 'activeTitle':''" @click="changeTitle(0)">用电</div>
+            <div class="_line">|</div>
+            <div class="_title" :class="electricityWaterTab === 1? 'activeTitle':''" @click="changeTitle(1)">用水</div>
+          </div>
+        </template>
+      </third-level-label>
+      <div class="electricity-water-trends">
+        <electricity-water-charts :data-source="electricityWaterDataSource"/>
+      </div>
    </div>
+
  </div>
 </template>

 <script>
+
+import ElectricityWaterCharts from "@/components/charts/ElectricityWaterCharts";
+
 export default {
  name: "EnergyUse",
+  components: {ElectricityWaterCharts},
  data() {
    return {
-      title: '能源使用情况'
+      title: '能源使用情况',
+      thirdLevelLabel: '水电使用趋势',
+      tabDataList: [
+        {
+          name: '今日',
+          value: '0'
+        },
+        {
+          name: '本月',
+          value: '1'
+        },
+        {
+          name: '上月',
+          value: '2'
+        }
+      ],
+      activeTab: '0',
+      electricityWaterDataSource: [
+        {
+          attr: '用电',
+          name: '00:00',
+          value: '10'
+        },
+        {
+          attr: '用电',
+          name: '01:00',
+          value: '30'
+        },
+        {
+          attr: '用电',
+          name: '02:00',
+          value: '20',
+        },
+        {
+          attr: '用电',
+          name: '03:00',
+          value: '20'
+        },
+        {
+          attr: '用电',
+          name: '04:00',
+          value: '30'
+        },
+        {
+          attr: '用电',
+          name: '05:00',
+          value: '10'
+        },
+        {
+          attr: '用电',
+          name: '06:00',
+          value: '16'
+        },
+        {
+          attr: '用电',
+          name: '07:00',
+          value: '30'
+        }
+      ],
+      electricityWaterTab: 0
+    }
+  },
+  methods: {
+    tabChange(val) {
+      this.activeTab = val
+    },
+    //用电、用水tab切换
+    changeTitle(val) {
+      this.electricityWaterTab = val
    }
  }
 }
@ -43,7 +132,7 @@ export default {
@import "assets/styles/mixin";

 .energy-use {
-  height: 777px;
+  height: 877px;
  width: 100%;
  background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
  /*  border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
@ -55,6 +144,7 @@ export default {
    flex: 1;
    height: 0;
    padding: 0 50px;
+    .flex-column;

    .electricity-water-usage {
      height: 247px;
@ -69,12 +159,13 @@ export default {
          height: 159px;
          background: url("assets/peakCoalImages/right/electricity-icon.png") no-repeat;
        }
-        .electricity-info{
+
+        .electricity-info {
          padding-left: 20px;
        }
      }

-      .water-usage{
+      .water-usage {
        .flex-row;

        .water-icon {
@ -82,7 +173,8 @@ export default {
          height: 159px;
          background: url("assets/peakCoalImages/right/water-icon.png") no-repeat;
        }
-        .water-info{
+
+        .water-info {
          padding-left: 20px;
        }
      }
@ -103,6 +195,68 @@ export default {
        font-weight: 400;
      }
    }
+
+    .electricity-water-trends {
+      flex: 1;
+      height: 0;
+    }
+
  }
+
+  .right-tab {
+    height: 100%;
+    .flex-row;
+    justify-content: space-between;
+    width: 480px;
+
+    .tab-type {
+      width: 144px;
+      height: 59px;
+      background: url("assets/peakCoalImages/left/pollutant-type-default-bg.png") no-repeat;
+      font-family: MicrosoftYaHei;
+      font-size: 29.97px;
+      color: rgba(216, 240, 255, 0.50);
+      letter-spacing: 0;
+      text-align: center;
+      line-height: 59px;
+      text-shadow: 0 0 11px #0091FF;
+      font-weight: 400;
+      cursor: pointer;
+    }
+
+    .active-tab {
+      background: url("assets/peakCoalImages/left/pollutant-type-active-bg.png") no-repeat;
+      color: #D8F0FF;
+      text-shadow: 0 0 33px #0091FF;
+      font-weight: 400;
+    }
+  }
+
+  .electricity-water-tab {
+    width: 180px;
+    height: 100%;
+    .flex-row;
+    justify-content: space-between;
+
+    ._title {
+      font-family: PingFangSC-Semibold;
+      font-size: 30.01px;
+      color: rgba(106, 196, 255, 0.60);
+      letter-spacing: 0;
+      text-align: right;
+      line-height: 42px;
+      font-weight: 600;
+      cursor: pointer;
+    }
+
+    .activeTitle {
+      color: #6AC4FF;
+    }
+
+    ._line {
+      color: #6AC4FF;
+    }
+  }
+
 }
 </style>
--- a/components/EnterpriseOperations.vue
+++ b/components/EnterpriseOperations.vue
@ -3,7 +3,11 @@
  <div class="enterprise-operations">
    <secondary-title :title="title">
      <template>
-        <div class="right-tip">
+        <div class="right-tab">
+          <div class="tab-type" v-for="item of tabDataList" :class="activeTab === item.value? 'active-tab':''"
+               @click="tabChange(item.value)">
+            {{ item.name }}
+          </div>
        </div>
      </template>
    </secondary-title>
@ -25,16 +29,97 @@
          <div class="_icon"></div>
        </div>
      </div>
+
+      <third-level-label :title="thirdLevelLabel"/>
+
+      <div class="produce-trend-chart">
+        <produce-trend-chart :data-source="produceTrendDataSource"/>
+      </div>
    </div>
  </div>
 </template>

 <script>
+import ProduceTrendChart from "@/components/charts/ProduceTrendChart";
+
 export default {
  name: "EnterpriseOperations",
+  components: {ProduceTrendChart},
+
  data() {
    return {
-      title: '企业运营情况'
+      title: '企业运营情况',
+      thirdLevelLabel: '生产趋势',
+      produceTrendDataSource: [
+        {
+          name: '00:00',
+          value1: '10',
+          value2: '30',
+          value3: '20'
+        },
+        {
+          name: '01:00',
+          value1: '30',
+          value2: '20',
+          value3: '10'
+        },
+        {
+          name: '02:00',
+          value1: '20',
+          value2: '10',
+          value3: '20'
+        },
+        {
+          name: '03:00',
+          value1: '20',
+          value2: '30',
+          value3: '60'
+        },
+        {
+          name: '04:00',
+          value1: '30',
+          value2: '40',
+          value3: '50'
+        },
+        {
+          name: '05:00',
+          value1: '10',
+          value2: '20',
+          value3: '30'
+        },
+        {
+          name: '06:00',
+          value1: '16',
+          value2: '17',
+          value3: '18'
+        },
+        {
+          name: '07:00',
+          value1: '30',
+          value2: '20',
+          value3: '10'
+        }
+      ],
+      tabDataList: [
+        {
+          name: '今日',
+          value: '0'
+        },
+        {
+          name: '本月',
+          value: '1'
+        },
+        {
+          name: '上月',
+          value: '2'
+        }
+      ],
+      activeTab: '0'
+    }
+  },
+  methods: {
+    tabChange(val) {
+      this.activeTab = val
    }
  }
 }
@ -44,7 +129,7 @@ export default {
@import "assets/styles/mixin";

 .enterprise-operations {
-  height: 777px;
+  height: 877px;
  width: 100%;
  background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
  /*  border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
@ -56,6 +141,7 @@ export default {
    flex: 1;
    height: 0;
    padding: 0 50px;
+    .flex-column;

    .operational-value-info {
      height: 247px;
@ -92,6 +178,41 @@ export default {
        }
      }
    }
+
+    .produce-trend-chart {
+      flex: 1;
+      height: 0;
+
+    }
+  }
+
+  .right-tab {
+    height: 100%;
+    .flex-row;
+    justify-content: space-between;
+    width: 480px;
+
+    .tab-type {
+      width: 144px;
+      height: 59px;
+      background: url("assets/peakCoalImages/left/pollutant-type-default-bg.png") no-repeat;
+      font-family: MicrosoftYaHei;
+      font-size: 29.97px;
+      color: rgba(216, 240, 255, 0.50);
+      letter-spacing: 0;
+      text-align: center;
+      line-height: 59px;
+      text-shadow: 0 0 11px #0091FF;
+      font-weight: 400;
+      cursor: pointer;
+    }
+
+    .active-tab {
+      background: url("assets/peakCoalImages/left/pollutant-type-active-bg.png") no-repeat;
+      color: #D8F0FF;
+      text-shadow: 0 0 33px #0091FF;
+      font-weight: 400;
+    }
  }
 }
 </style>
--- a/components/LatestWarning.vue
+++ b/components/LatestWarning.vue
@ -1,7 +1,16 @@
 <!--最新预警-->
 <template>
  <div class="latest-warning">
-    <secondary-title :title="title"/>
+    <secondary-title :title="title">
+      <template>
+        <div class="right-tab">
+          <div class="tab-type" v-for="item of tabDataList" :class="activeTab === item.value? 'active-tab':''"
+               @click="tabChange(item.value)">
+            {{ item.name }}
+          </div>
+        </div>
+      </template>
+    </secondary-title>
    <div class="latest-warning-info">
      <div class="warning-data-list">
        <vue-seamless-scroll
@ -62,7 +71,26 @@ export default {
          warningTime: '2023-12-12 12:32:45',
          state: 1
        }
-      ]
+      ],
+      tabDataList: [
+        {
+          name: '全部',
+          value: '0'
+        },
+        {
+          name: '待研判',
+          value: '1'
+        },
+        {
+          name: '待审批',
+          value: '2'
+        },
+        {
+          name: '已归档',
+          value: '3'
+        }
+      ],
+      activeTab: '0'
    }
  },
  computed: {
@ -79,6 +107,11 @@ export default {
      }
    },
  },
+  methods: {
+    tabChange(val) {
+      this.activeTab = val
+    }
+  }
 }
 </script>

@ -87,7 +120,7 @@ export default {

 .latest-warning {
  margin-top: 43px;
-  height: 984px;
+  height: 784px;
  width: 100%;
  background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
  /*  border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
@ -103,6 +136,7 @@ export default {
    .warning-data-list {
      height: 100%;
      padding-top: 20px;
+
      .seamless-scroll {
        height: 100%;
        overflow: hidden;
@ -113,5 +147,34 @@ export default {
      }
    }
  }
+
+  .right-tab {
+    height: 100%;
+    .flex-row;
+    justify-content: space-between;
+    width: 580px;
+
+    .tab-type {
+      width: 144px;
+      height: 59px;
+      background: url("assets/peakCoalImages/left/pollutant-type-default-bg.png") no-repeat;
+      font-family: MicrosoftYaHei;
+      font-size: 29.97px;
+      color: rgba(216, 240, 255, 0.50);
+      letter-spacing: 0;
+      text-align: center;
+      line-height: 59px;
+      text-shadow: 0 0 11px #0091FF;
+      font-weight: 400;
+      cursor: pointer;
+    }
+
+    .active-tab {
+      background: url("assets/peakCoalImages/left/pollutant-type-active-bg.png") no-repeat;
+      color: #D8F0FF;
+      text-shadow: 0 0 33px #0091FF;
+      font-weight: 400;
+    }
+  }
 }
 </style>
--- a/components/OverviewPollutants.vue
+++ b/components/OverviewPollutants.vue
@ -16,16 +16,27 @@
          </div>
        </div>
      </div>
+
+      <div class="co-trend-info">
+        <third-level-label :title="thirdLevelLabel"/>
+        <div class="co-trend">
+          <c-o-trend-charts :data-source="coTrendDataSource"/>
+        </div>
+      </div>
    </div>
  </div>
 </template>

 <script>
+import COTrendCharts from "@/components/charts/COTrendCharts";
+
 export default {
  name: "OverviewPollutants",
+  components: {COTrendCharts},
  data() {
    return {
      title: '污染物信息总览',
+      thirdLevelLabel: '一氧化碳变化趋势',
      pollutantValuesDataList: [
        {
          pollutantName: '一氧化碳',
@ -63,6 +74,78 @@ export default {
          actualValue: '9.0',
          unit: 'ug/m³'
        }
+      ],
+      coTrendDataSource: [
+        {
+          name: '1',
+          value: 3,
+          attr: '2021'
+        },
+        {
+          name: '2',
+          value: 4,
+          attr: '2021'
+        },
+        {
+          name: '3',
+          value: 1,
+          attr: '2021'
+        },
+        {
+          name: '4',
+          value: 4,
+          attr: '2021'
+        },
+        {
+          name: '5',
+          value: 6,
+          attr: '2021'
+        },
+        {
+          name: '6',
+          value: 1,
+          attr: '2021'
+        },
+        {
+          name: '7',
+          value: 8,
+          attr: '2021'
+        },
+        {
+          name: '1',
+          value: 1,
+          attr: '2022'
+        },
+        {
+          name: '2',
+          value: 4,
+          attr: '2022'
+        },
+        {
+          name: '3',
+          value: 7,
+          attr: '2022'
+        },
+        {
+          name: '4',
+          value: 8,
+          attr: '2022'
+        },
+        {
+          name: '5',
+          value: 2,
+          attr: '2022'
+        },
+        {
+          name: '6',
+          value: 7,
+          attr: '2022'
+        },
+        {
+          name: '7',
+          value: 1,
+          attr: '2022'
+        }
      ]
    }
  },
@ -89,9 +172,9 @@ export default {
  height: 601px;
  width: 100%;
  background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
-/*  border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
-  border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); !* 使用线性渐变作为边框图片 *!
-  border-image-slice: 1; !* 指定切分边框图像的位置 *!*/
+  /*  border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
+    border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); !* 使用线性渐变作为边框图片 *!
+    border-image-slice: 1; !* 指定切分边框图像的位置 *!*/
  .flex-column;

  .pollutants-data {
@ -179,6 +262,17 @@ export default {
        }
      }
    }
+
+    .co-trend-info {
+      flex: 1;
+      height: 100%;
+      .flex-column;
+
+      .co-trend {
+        flex: 1;
+        height: 0;
+      }
+    }
  }
 }
 </style>
--- a/components/PollutantTrends.vue
+++ b/components/PollutantTrends.vue
@ -2,27 +2,181 @@
 <template>
  <div class="pollutant-trends">
    <secondary-title :title="title"/>
+    <div class="pollutant-type-list">
+      <div class="pollutant-type" v-for="item of pollutantTypeList" :class="activeTab === item.value? 'active-tab':''"
+           @click="tabChange(item.value)">
+        {{ item.name }}
+      </div>
+    </div>
+    <div class="trend-charts">
+      <pollutant-trend-charts :data-source="pollutantTrendsDataSource"/>
+    </div>
  </div>
 </template>

 <script>
+import PollutantTrendCharts from "@/components/charts/PollutantTrendCharts";
+
 export default {
  name: "PollutantTrends",
+  components: {PollutantTrendCharts},
  data() {
    return {
-      title: '首要污染物变化趋势'
+      title: '首要污染物变化趋势',
+      pollutantTypeList: [
+        {
+          name: '一氧化碳',
+          value: '1'
+        },
+        {
+          name: '二氧化碳',
+          value: '2'
+        },
+        {
+          name: '氮氧化物',
+          value: '3'
+        },
+        {
+          name: '臭氧',
+          value: '4'
+        },
+        {
+          name: 'PM10',
+          value: '5'
+        },
+        {
+          name: 'PM2.5',
+          value: '6'
+        }
+      ],
+      activeTab: '1',
+      pollutantTrendsDataSource: [
+        {
+          name: '1',
+          value: 3,
+          attr: '2021'
+        },
+        {
+          name: '2',
+          value: 4,
+          attr: '2021'
+        },
+        {
+          name: '3',
+          value: 1,
+          attr: '2021'
+        },
+        {
+          name: '4',
+          value: 4,
+          attr: '2021'
+        },
+        {
+          name: '5',
+          value: 6,
+          attr: '2021'
+        },
+        {
+          name: '6',
+          value: 1,
+          attr: '2021'
+        },
+        {
+          name: '7',
+          value: 8,
+          attr: '2021'
+        },
+        {
+          name: '1',
+          value: 1,
+          attr: '2022'
+        },
+        {
+          name: '2',
+          value: 4,
+          attr: '2022'
+        },
+        {
+          name: '3',
+          value: 7,
+          attr: '2022'
+        },
+        {
+          name: '4',
+          value: 8,
+          attr: '2022'
+        },
+        {
+          name: '5',
+          value: 2,
+          attr: '2022'
+        },
+        {
+          name: '6',
+          value: 7,
+          attr: '2022'
+        },
+        {
+          name: '7',
+          value: 1,
+          attr: '2022'
+        }
+      ]
+    }
+  },
+  methods: {
+    tabChange(val) {
+      this.activeTab = val
    }
  }
 }
 </script>

 <style scoped lang="less">
-.pollutant-trends{
+@import "assets/styles/mixin";
+
+.pollutant-trends {
  width: 100%;
  height: 601px;
-  background-image: linear-gradient(62deg, rgba(8,31,55,0.10) 0%, rgba(18,50,81,0.10) 100%);
-/*  border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
-  border-image: linear-gradient(rgba(79,182,238,0), rgba(39,127,216,1)); !* 使用线性渐变作为边框图片 *!
-  border-image-slice: 1; !* 指定切分边框图像的位置 *!*/
+  background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
+  /*  border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
+    border-image: linear-gradient(rgba(79,182,238,0), rgba(39,127,216,1)); !* 使用线性渐变作为边框图片 *!
+    border-image-slice: 1; !* 指定切分边框图像的位置 *!*/
+  .flex-column;
+
+  .pollutant-type-list {
+    padding: 0 50px;
+    height: 100px;
+    .flex-row;
+    justify-content: space-between;
+
+    .pollutant-type {
+      width: 144px;
+      height: 59px;
+      background: url("assets/peakCoalImages/left/pollutant-type-default-bg.png") no-repeat;
+      font-family: MicrosoftYaHei;
+      font-size: 29.97px;
+      color: rgba(216, 240, 255, 0.50);
+      letter-spacing: 0;
+      text-align: center;
+      line-height: 59px;
+      text-shadow: 0 0 11px #0091FF;
+      font-weight: 400;
+      cursor: pointer;
+    }
+
+    .active-tab {
+      background: url("assets/peakCoalImages/left/pollutant-type-active-bg.png") no-repeat;
+      color: #D8F0FF;
+      text-shadow: 0 0 33px #0091FF;
+      font-weight: 400;
+    }
+  }
+
+  .trend-charts {
+    flex: 1;
+    height: 0;
+
+  }
 }
 </style>
--- a/components/SecondaryTitle.vue
+++ b/components/SecondaryTitle.vue
@ -30,14 +30,14 @@ export default {
 .secondary-title {
  width: 100%;
  height: 84px;
-  background: url("assets/peakCoalImages/coommon/small-seconfary-title-bg.png") no-repeat;
+  background: url("assets/peakCoalImages/common/small-seconfary-title-bg.png") no-repeat;
  background-size: 100% 100%;
  .clear-fix;

  &.longBg {
    width: 100%;
    height: 84px;
-    background: url("assets/peakCoalImages/coommon/long-seconfary-title-bg.png") no-repeat;
+    background: url("assets/peakCoalImages/common/long-seconfary-title-bg.png") no-repeat;
    background-size: 100% 100%;
  }

@ -64,7 +64,7 @@ export default {
 .longBg {
  width: 100%;
  height: 84px;
-  background: url("assets/peakCoalImages/coommon/long-seconfary-title-bg.png") no-repeat;
+  background: url("assets/peakCoalImages/common/long-seconfary-title-bg.png") no-repeat;
  background-size: 100% 100%;
 }*/
 </style>
--- a/components/ThirdLevelLabel.vue
+++ b/components/ThirdLevelLabel.vue
@ -0,0 +1,72 @@
+<!--二级标题-->
+<template>
+  <div class="secondary-title">
+    <div class="_icon"></div>
+    <div class="_title">{{ title }}</div>
+    <div class="_right">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ThirdLevelLabel",
+  props: {
+    longBg: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "assets/styles/mixin";
+
+.secondary-title {
+  width: 100%;
+  height: 54px;
+  .clear-fix;
+
+  ._icon {
+    width: 20px;
+    height: 20px;
+    background: url("assets/peakCoalImages/common/third-level-label-icon.png") no-repeat;
+    float: left;
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  ._title {
+    height: 100%;
+    line-height: 54px;
+    padding-left: 20px;
+    float: left;
+    font-family: PingFangSC-Medium;
+    font-size: 38.59px;
+    color: #D8F0FF;
+    letter-spacing: 0;
+    text-shadow: 0 0 11px #0091FF;
+    font-weight: 500;
+  }
+
+  ._right {
+    float: right;
+    height: 100%;
+  }
+}
+
+/*
+.longBg {
+  width: 100%;
+  height: 84px;
+  background: url("assets/peakCoalImages/common/long-seconfary-title-bg.png") no-repeat;
+  background-size: 100% 100%;
+}*/
+</style>
--- a/components/WarningInfoItem.vue
+++ b/components/WarningInfoItem.vue
@ -23,7 +23,7 @@
 </template>

 <script>
-import noData from 'assets/peakCoalImages/coommon/no-data.png'
+import noData from 'assets/peakCoalImages/common/no-data.png'

 export default {
  name: "WarningInfoItem",
--- a/components/WarningStatistics.vue
+++ b/components/WarningStatistics.vue
@ -10,16 +10,43 @@
          <div class="_value">234</div>
        </div>
      </div>
+
+      <third-level-label :title="warningTypeTitle"/>
+
+      <div class="warning-type-pie">
+        <warning-type-chart :data-source="warningTypeDataSource"/>
+      </div>
    </div>
  </div>
 </template>

 <script>
+import WarningTypeChart from "@/components/charts/WarningTypeChart";
+
 export default {
  name: "WarningStatistics",
+  components: {WarningTypeChart},
  data() {
    return {
-      title: '智能预警统计'
+      title: '智能预警统计',
+      warningTypeTitle: '报警类型分布',
+      warningTypeDataSource: [
+        {
+          name: '断电掉线',
+          value: 214,
+          rate: '38%'
+        },
+        {
+          name: '区域入侵',
+          value: 342,
+          rate: '32%'
+        },
+        {
+          name: '污染超标',
+          value: 12,
+          rate: '30%'
+        }
+      ]
    }
  }
 }
@ -30,7 +57,7 @@ export default {

 .warning-statistics {
  margin-top: 43px;
-  height: 984px;
+  height: 784px;
  width: 100%;
  background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
  /*  border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
@ -42,6 +69,7 @@ export default {
    flex: 1;
    height: 0;
    padding: 0 50px;
+    .flex-column;

    .warning-total-info {
      height: 238px;
@ -53,6 +81,7 @@ export default {
        background: rgba(1, 120, 198, 0.30);
        .flex-row;
        justify-content: space-around;
+
        .warning-icon {
          width: 194px;
          height: 114px;
@ -76,6 +105,12 @@ export default {
        }
      }
    }
+
+    .warning-type-pie {
+      flex: 1;
+      height: 0;
+      background: url("assets/peakCoalImages/right/warning-type-pie-bg.png") no-repeat 20px center;
+    }
  }
 }
 </style>
--- a/components/charts/AirQualityTrendCharts.vue
+++ b/components/charts/AirQualityTrendCharts.vue
@ -0,0 +1,180 @@
+<!--空气质量变化趋势-->
+<template>
+  <div id="charts" ref="charts">
+
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import {EleResize} from '@/utils/esresize';
+
+const lodash = require('lodash')
+export default {
+  name: 'AirQualityTrendCharts',
+  props: {
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    color: {
+      type: Array,
+      default: () => [
+        '#FDBD00',
+        '#00D5FF',
+        '#1978E5'
+      ]
+    }
+  },
+  data() {
+    return {}
+  },
+  watch: {
+    dataSource: {
+      deep: true,
+      immediate: true,
+      handler(value) {
+        if (value.length) {
+          this.$nextTick(() => {
+            this.init()
+          })
+        }
+      }
+    }
+  },
+  mounted() {
+  },
+
+  methods: {
+    init() {
+      let myCharts = echarts.init(this.$refs.charts)
+      let barCharts = this.$refs.charts
+      // 复制代码
+      let color = this.color;
+      let chartData = this.dataSource;
+      //将数据根据attr进行分组
+      let dataSourceByAttrObj = lodash.groupBy(chartData, 'attr')
+      //将不同对象的值转换成不同的数组
+      let dataSource = Object.values(dataSourceByAttrObj)
+      //过滤x轴名称
+      let xAxisName = []
+      let nameLengthMaxIndex = 0
+      let nameLength = 0
+      //找出name最多的数据
+      for (const index in dataSource) {
+        let xAxisNameList = dataSource[index].map(item => item.name) || []
+        if (xAxisNameList.length > nameLength) {
+          nameLength = xAxisNameList.length
+          nameLengthMaxIndex = index
+        }
+      }
+      //将挑选的name作为x轴数据
+      xAxisName = dataSource[nameLengthMaxIndex].map(item => item.name) || []
+      //获取y周值
+      let attrNames = Object.keys(dataSourceByAttrObj)
+      let seriesList = []
+      for (const index in dataSource) {
+        let yAxisDataSource = dataSource[index].map(item => item.value)
+        let series = {
+          name: attrNames[index],
+          type: 'line',
+          smooth: false,
+          zlevel: 3,
+          symbol: 'none', //数据交叉点样式
+          data: yAxisDataSource,
+          yAxisIndex: 0, // 通过这个判断左右
+          lineStyle: {
+            width: 6,
+          }
+        }
+        seriesList.push(series)
+      }
+      let option = {
+        color: color,
+        legend: {
+          top: 20,
+          left: '30%',
+          itemWidth: 22,
+          itemHeight: 22,
+          icon: 'circle',
+          textStyle: {
+            color: 'rgba(106,196,255,0.60)',
+            fontSize: 30,
+            padding: [0, 0, 0, 20]
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        grid: {
+          top: 100,
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: true,
+            axisLabel: {
+              fontSize: 30,
+              color: 'rgba(106,196,255,0.60)'
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(176,215,255,0.40)',
+              },
+            },
+            axisTick: {
+              show: false
+            },
+            data: xAxisName,
+          },
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            splitNumber: 5,
+            axisLabel: {
+              fontSize: 30,
+              color: 'rgba(106,196,255,0.60)'
+            },
+            nameTextStyle: {
+              color: 'rgba(106,196,255,0.60)',
+              fontSize: 30,
+              lineHeight: 40,
+            },
+            // 分割线
+            splitLine: {
+              lineStyle: {
+                color: 'rgba(176,215,255,0.40)',
+                type: 'dashed'
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+          }
+        ],
+        series: seriesList,
+      };
+
+
+      myCharts.setOption(option)
+      let listener = function () {
+        myCharts.resize()
+      }
+      EleResize.on(barCharts, listener)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+#charts {
+  height: 100%;
+  width: 100%;
+}
+</style>
--- a/components/charts/COTrendCharts.vue
+++ b/components/charts/COTrendCharts.vue
@ -0,0 +1,200 @@
+<!--一氧化碳变化趋势-->
+<template>
+  <div id="charts" ref="charts">
+
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import {EleResize} from '@/utils/esresize';
+
+const lodash = require('lodash')
+export default {
+  name: 'COTrendCharts',
+  props: {
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    color: {
+      type: Array,
+      default: () => [
+        '#FDBD00',
+        '#00D5FF',
+        '#1978E5'
+      ]
+    }
+  },
+  data() {
+    return {}
+  },
+  watch: {
+    dataSource: {
+      deep: true,
+      immediate: true,
+      handler(value) {
+        if (value.length) {
+          this.$nextTick(() => {
+            this.init()
+          })
+        }
+      }
+    }
+  },
+  mounted() {
+  },
+
+  methods: {
+    init() {
+      let myCharts = echarts.init(this.$refs.charts)
+      let barCharts = this.$refs.charts
+      // 复制代码
+      let color = this.color;
+      let areaColorList = [
+        ['rgba(253,189,0,0.5)', 'rgba(253,189,0,0)'],
+        ['rgba(0,213,255,0.5)', 'rgba(0,213,255,0)'],
+        ['rgba(25,120,229,0.5)', 'rgba(25,120,229,1)'],
+      ]
+      let chartData = this.dataSource;
+      //将数据根据attr进行分组
+      let dataSourceByAttrObj = lodash.groupBy(chartData, 'attr')
+      //将不同对象的值转换成不同的数组
+      let dataSource = Object.values(dataSourceByAttrObj)
+      //过滤x轴名称
+      let xAxisName = []
+      let nameLengthMaxIndex = 0
+      let nameLength = 0
+      //找出name最多的数据
+      for (const index in dataSource) {
+        let xAxisNameList = dataSource[index].map(item => item.name) || []
+        if (xAxisNameList.length > nameLength) {
+          nameLength = xAxisNameList.length
+          nameLengthMaxIndex = index
+        }
+      }
+      //将挑选的name作为x轴数据
+      xAxisName = dataSource[nameLengthMaxIndex].map(item => item.name) || []
+      //获取y周值
+      let attrNames = Object.keys(dataSourceByAttrObj)
+      let seriesList = []
+      for (const index in dataSource) {
+        let yAxisDataSource = dataSource[index].map(item => item.value)
+        let series = {
+          name: attrNames[index],
+          type: 'line',
+          smooth: true,
+          zlevel: 3,
+          symbol: 'none', //数据交叉点样式
+          data: yAxisDataSource,
+          yAxisIndex: 0, // 通过这个判断左右
+          lineStyle: {
+            width: 6,
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: areaColorList[index][0],
+                },
+                {
+                  offset: 1,
+                  color: areaColorList[index][1],
+                },
+              ],
+              false
+            ),
+          }
+        }
+        seriesList.push(series)
+      }
+      let option = {
+        color: color,
+        legend: {
+          top: 20,
+          right: '10%',
+          itemWidth: 22,
+          itemHeight: 22,
+          icon: 'circle',
+          textStyle: {
+            color: 'rgba(106,196,255,0.60)',
+            fontSize: 30,
+            padding: [0, 0, 0, 20]
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        grid: {
+          top: 100,
+          containLabel: true,
+          left: 0
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: true,
+            axisLabel: {
+              fontSize: 30,
+              color: 'rgba(106,196,255,0.60)'
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(176,215,255,0.40)',
+              },
+            },
+            axisTick: {
+              show: false
+            },
+            data: xAxisName,
+          },
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            splitNumber: 5,
+            axisLabel: {
+              fontSize: 30,
+              color: 'rgba(106,196,255,0.60)'
+            },
+            nameTextStyle: {
+              color: 'rgba(106,196,255,0.60)',
+              fontSize: 30,
+              lineHeight: 40,
+            },
+            // 分割线
+            splitLine: {
+              lineStyle: {
+                color: 'rgba(176,215,255,0.40)',
+                type: 'dashed'
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+          }
+        ],
+        series: seriesList,
+      };
+
+
+      myCharts.setOption(option)
+      let listener = function () {
+        myCharts.resize()
+      }
+      EleResize.on(barCharts, listener)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+#charts {
+  height: 100%;
+  width: 100%;
+}
+</style>
--- a/components/charts/ElectricityWaterCharts.vue
+++ b/components/charts/ElectricityWaterCharts.vue
@ -0,0 +1,210 @@
+<!--用电、用水使用趋势-->
+<template>
+  <div id="charts" ref="charts">
+
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import {EleResize} from '@/utils/esresize';
+
+const lodash = require('lodash')
+export default {
+  name: 'ElectricityWaterCharts',
+  props: {
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    color: {
+      type: Array,
+      default: () => [
+        '#00D5FF',
+        '#FDBD00',
+        '#1978E5'
+      ]
+    }
+  },
+  data() {
+    return {}
+  },
+  watch: {
+    dataSource: {
+      deep: true,
+      immediate: true,
+      handler(value) {
+        if (value.length) {
+          this.$nextTick(() => {
+            this.init()
+          })
+        }
+      }
+    }
+  },
+  mounted() {
+  },
+
+  methods: {
+    init() {
+      let myCharts = echarts.init(this.$refs.charts)
+      let barCharts = this.$refs.charts
+      // 复制代码
+      let color = this.color;
+      let chartData = this.dataSource;
+      //将数据根据attr进行分组
+      let dataSourceByAttrObj = lodash.groupBy(chartData, 'attr')
+      //将不同对象的值转换成不同的数组
+      let dataSource = Object.values(dataSourceByAttrObj)
+      //过滤x轴名称
+      let xAxisName = []
+      let nameLengthMaxIndex = 0
+      let nameLength = 0
+      //找出name最多的数据
+      for (const index in dataSource) {
+        let xAxisNameList = dataSource[index].map(item => item.name) || []
+        if (xAxisNameList.length > nameLength) {
+          nameLength = xAxisNameList.length
+          nameLengthMaxIndex = index
+        }
+      }
+      //将挑选的name作为x轴数据
+      xAxisName = dataSource[nameLengthMaxIndex].map(item => item.name) || []
+      //获取y周值
+      let attrNames = Object.keys(dataSourceByAttrObj)
+      let seriesList = []
+      console.log('dataSource:', dataSource)
+      for (const index in dataSource) {
+        let yAxisDataSource = dataSource[index].map(item => item.value)
+        let series = {
+          name: attrNames[index],
+          backgroundStyle: {
+            color: 'rgba(180, 180, 180, 0.1)'
+          },
+          showBackground: true,
+          type: 'bar',
+          color: 'transparent',
+          yAxisIndex: 0,
+          barWidth: '60',
+          data: yAxisDataSource,
+        }
+        let topBar =
+          {
+            data: yAxisDataSource,
+            type: "pictorialBar",
+            yAxisIndex: 0,
+            color: color[index],
+            symbol: 'rect',
+            symbolPosition: 'end', // 在数据结尾显示
+            symbolSize: [60, 20], // 「树叶大小」
+            symbolOffset: ['0', '0'], //「偏移量」
+
+          }
+        seriesList.push(topBar)
+        seriesList.push(series)
+        console.log()
+      }
+      let option = {
+        color: color,
+        legend: {
+          show: false,
+          top: 20,
+          left: '30%',
+          itemWidth: 22,
+          itemHeight: 22,
+          icon: 'circle',
+          textStyle: {
+            color: 'rgba(106,196,255,0.60)',
+            fontSize: 30,
+            padding: [0, 0, 0, 20]
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        grid: {
+          top: 60,
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: true,
+            axisLabel: {
+              fontSize: 30,
+              color: 'rgba(106,196,255,0.60)'
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(176,215,255,0.40)',
+              },
+            },
+            axisTick: {
+              show: false
+            },
+            data: xAxisName,
+          },
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            splitNumber: 5,
+            axisLabel: {
+              fontSize: 30,
+              color: 'rgba(106,196,255,0.60)'
+            },
+            nameTextStyle: {
+              color: 'rgba(106,196,255,0.60)',
+              fontSize: 30,
+              lineHeight: 40,
+            },
+            // 分割线
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: 'rgba(176,215,255,0.40)',
+                type: 'dashed'
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+          {
+            splitNumber: 4,
+            type: 'value', scale: true, min: 0,
+            nameTextStyle: {color: '#fff', fontSize: 12},
+            // y轴线
+            splitLine: {show: false},
+            // y轴
+            axisLine: {lineStyle: {color: 'rgba(255, 255, 255, .35)'}},
+            // 文字
+            axisLabel: {textStyle: {fontSize: 14, color: '#fff'}},
+            // 刻度
+            axisTick: {show: false}
+          }
+        ],
+        series: seriesList,
+      };
+
+
+      myCharts.setOption(option)
+      let listener = function () {
+        myCharts.resize()
+      }
+      EleResize.on(barCharts, listener)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+#charts {
+  height: 100%;
+  width: 100%;
+}
+</style>
--- a/components/charts/PollutantTrendCharts.vue
+++ b/components/charts/PollutantTrendCharts.vue
@ -0,0 +1,196 @@
+<!--污染物趋势变化-->
+<template>
+  <div id="charts" ref="charts">
+
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import {EleResize} from '@/utils/esresize';
+
+const lodash = require('lodash')
+export default {
+  name: 'PollutantTrendCharts',
+  props: {
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    color: {
+      type: Array,
+      default: () => [
+        '#00D5FF',
+        '#FDBD00',
+        '#1978E5'
+      ]
+    }
+  },
+  data() {
+    return {}
+  },
+  watch: {
+    dataSource: {
+      deep: true,
+      immediate: true,
+      handler(value) {
+        if (value.length) {
+          this.$nextTick(() => {
+            this.init()
+          })
+        }
+      }
+    }
+  },
+  mounted() {
+  },
+
+  methods: {
+    init() {
+      let myCharts = echarts.init(this.$refs.charts)
+      let barCharts = this.$refs.charts
+      // 复制代码
+      let color = this.color;
+      let chartData = this.dataSource;
+      //将数据根据attr进行分组
+      let dataSourceByAttrObj = lodash.groupBy(chartData, 'attr')
+      //将不同对象的值转换成不同的数组
+      let dataSource = Object.values(dataSourceByAttrObj)
+      //过滤x轴名称
+      let xAxisName = []
+      let nameLengthMaxIndex = 0
+      let nameLength = 0
+      //找出name最多的数据
+      for (const index in dataSource) {
+        let xAxisNameList = dataSource[index].map(item => item.name) || []
+        if (xAxisNameList.length > nameLength) {
+          nameLength = xAxisNameList.length
+          nameLengthMaxIndex = index
+        }
+      }
+      //将挑选的name作为x轴数据
+      xAxisName = dataSource[nameLengthMaxIndex].map(item => item.name) || []
+      console.log('xAxisName:', xAxisName)
+      //获取y周值
+      let attrNames = Object.keys(dataSourceByAttrObj)
+      let seriesList = []
+      for (const index in dataSource) {
+        let yAxisDataSource = dataSource[index].map(item => item.value)
+        let series = {}
+        console.log('index:',index)
+        if (index == 1) {
+          series = {
+            name: attrNames[index],
+            type: 'line',
+            smooth: false,
+            zlevel: 3,
+            color: color[index],
+            symbol: 'none', //数据交叉点样式
+            data: yAxisDataSource,
+            yAxisIndex: 0, // 通过这个判断左右
+            lineStyle: {
+              width: 6,
+            }
+          }
+        } else if (index == 0) {
+          series = {
+            name: attrNames[index],
+            type: 'bar',
+            color: color[index],
+            barWidth: '50%',
+            data: yAxisDataSource,
+          }
+        }
+        seriesList.push(series)
+      }
+      console.log('seriesList:', seriesList)
+      let option = {
+        color: color,
+        legend: {
+          show: false,
+          top: 20,
+          left: '30%',
+          itemWidth: 22,
+          itemHeight: 22,
+          icon: 'circle',
+          textStyle: {
+            color: 'rgba(106,196,255,0.60)',
+            fontSize: 30,
+            padding: [0, 0, 0, 20]
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        grid: {
+          top: 60,
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: true,
+            axisLabel: {
+              fontSize: 30,
+              color: 'rgba(106,196,255,0.60)'
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(176,215,255,0.40)',
+              },
+            },
+            axisTick: {
+              show: false
+            },
+            data: xAxisName,
+          },
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            splitNumber: 5,
+            axisLabel: {
+              fontSize: 30,
+              color: 'rgba(106,196,255,0.60)'
+            },
+            nameTextStyle: {
+              color: 'rgba(106,196,255,0.60)',
+              fontSize: 30,
+              lineHeight: 40,
+            },
+            // 分割线
+            splitLine: {
+              lineStyle: {
+                color: 'rgba(176,215,255,0.40)',
+                type: 'dashed'
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+          }
+        ],
+        series: seriesList,
+      };
+
+
+      myCharts.setOption(option)
+      let listener = function () {
+        myCharts.resize()
+      }
+      EleResize.on(barCharts, listener)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+#charts {
+  height: 100%;
+  width: 100%;
+}
+</style>
--- a/components/charts/ProduceTrendChart.vue
+++ b/components/charts/ProduceTrendChart.vue
@ -0,0 +1,219 @@
+<!--生产趋势-->
+<template>
+  <div id="charts" ref="charts">
+
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import {EleResize} from '@/utils/esresize';
+
+const lodash = require('lodash')
+export default {
+  name: 'ProduceTrendChart',
+  props: {
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    color: {
+      type: Array,
+      default: () => [
+        '#AD7AFF',
+        '#36FD00',
+        '#FDBD00'
+      ]
+    }
+  },
+  data() {
+    return {}
+  },
+  watch: {
+    dataSource: {
+      deep: true,
+      immediate: true,
+      handler(value) {
+        if (value.length) {
+          this.$nextTick(() => {
+            this.init()
+          })
+        }
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.init()
+    })
+  },
+
+  methods: {
+    init() {
+      let myCharts = echarts.init(this.$refs.charts)
+      let barCharts = this.$refs.charts
+      // 复制代码
+
+      let color = this.color;
+
+      let xAxisData = this.dataSource.map(item => item.name);
+      let yAxisData1 = this.dataSource.map(item => item.value1);
+      let yAxisData2 = this.dataSource.map(item => item.value2);
+      let yAxisData3 = this.dataSource.map(item => item.value3)
+
+      let option = {
+        color: color,
+        legend: {
+          top: 0,
+          right: 0,
+          itemWidth: 22,
+          itemHeight: 22,
+          icon: 'circle',
+          textStyle: {
+            color: 'rgba(106,196,255,0.60)',
+            fontSize: 30,
+
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        grid: {
+          top: 100,
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: true,
+            axisLabel: {
+              fontSize: 30,
+              color: 'rgba(106,196,255,0.60)'
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(176,215,255,0.40)',
+              },
+            },
+            axisTick: {
+              show: false
+            },
+            data: xAxisData,
+          },
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            position: 'left',
+            splitNumber: 5,
+            name: '单位：t',
+            axisLabel: {
+              fontSize: 30,
+              color: 'rgba(106,196,255,0.60)'
+            },
+            nameTextStyle: {
+              color: 'rgba(106,196,255,0.60)',
+              fontSize: 30,
+              lineHeight: 40,
+            },
+            // 分割线
+            splitLine: {
+              lineStyle: {
+                color: 'rgba(176,215,255,0.40)',
+                type: 'dashed'
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+          {
+            type: 'value',
+            position: 'right',
+            name: '单位：m³',
+            splitNumber: 5,
+            axisLabel: {
+              fontSize: 30,
+              color: 'rgba(106,196,255,0.60)'
+            },
+            nameTextStyle: {
+              color: 'rgba(106,196,255,0.60)',
+              fontSize: 30,
+              lineHeight: 40,
+            },
+            // 分割线
+            splitLine: {
+              lineStyle: {
+                color: 'rgba(176,215,255,0.40)',
+                type: 'dashed'
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: '石油',
+            type: 'line',
+            smooth: false,
+            zlevel: 3,
+            symbol: 'none', //数据交叉点样式
+            data: yAxisData1,
+            yAxisIndex: 0, // 通过这个判断左右
+            lineStyle: {
+              width: 6,
+            }
+          },
+          {
+            name: '氧气',
+            type: 'line',
+            smooth: false,
+            zlevel: 3,
+            symbol: 'none', //数据交叉点样式 (实心点)
+            data: yAxisData2,
+            yAxisIndex: 1, // 通过这个判断左右
+            lineStyle: {
+              width: 6,
+            }
+          },
+          {
+            name: '氮气',
+            type: 'line',
+            smooth: false,
+            zlevel: 3,
+            symbol: 'none', //数据交叉点样式 (实心点)
+            data: yAxisData3,
+            yAxisIndex: 1, // 通过这个判断左右
+            lineStyle: {
+              width: 6,
+            }
+          },
+        ],
+      };
+
+
+      myCharts.setOption(option)
+      let listener = function () {
+        myCharts.resize()
+      }
+      EleResize.on(barCharts, listener)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+#charts {
+  height: 100%;
+  width: 100%;
+}
+</style>
--- a/components/charts/WarningTypeChart.vue
+++ b/components/charts/WarningTypeChart.vue
@ -0,0 +1,180 @@
+<!--预警类型分布饼图-->
+<template>
+  <div id="charts" ref="charts">
+
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import {EleResize} from '@/utils/esresize';
+
+export default {
+  name: 'WarningTypeChart',
+  props: {
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    color: {
+      type: Array,
+      default: () => [
+        '#F8F661',
+        '#61F8F6',
+        '#1872FF'
+      ]
+    }
+  },
+  data() {
+    return {}
+  },
+  watch: {
+    dataSource: {
+      deep: true,
+      immediate: true,
+      handler(value) {
+        if (value.length) {
+          this.$nextTick(() => {
+            this.init()
+          })
+        }
+      }
+    }
+  },
+  mounted() {
+  },
+
+  methods: {
+    init() {
+      let myCharts = echarts.init(this.$refs.charts)
+      let barCharts = this.$refs.charts
+      // 复制代码
+      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 pieData1 = [];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const gap = (1 * sum) / 100;
+      const gapData = {
+        name: '',
+        value: gap,
+        itemStyle: {
+          color: 'transparent',
+        },
+      };
+      //图标位置显示
+      let lefts = ['40%', '40%', '40%', '40%'];
+      let aligns = ['left', 'left', 'left', 'left'];
+      let tops = ['15%', '40%', '65%', '90%'];
+      let legendData = [];
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+          itemStyle: {
+            borderRadius: 0,
+          },
+        });
+        pieData1.push(gapData);
+
+        //  分散图例
+        legendData.push({
+          show: true,
+          icon: 'rect', //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
+          left: lefts[i],
+          top: tops[i],
+          align: aligns[i],
+          itemWidth: 19,
+          itemHeight: 74,
+          itemStyle: {
+            color: colorList[i],
+          },
+          formatter:
+            '{b|' + (chartData[i].name.length > 6 ? chartData[i].name.substr(0, 6) + '...' : chartData[i].name) + '}' + '{c|' + chartData[i].rate + '}' +'{a|' + chartData[i].value + '}',
+          textStyle: {
+            fontWeight: 'lighter',
+            fontSize: 14,
+            width: 460,
+            height: 74,
+            padding: [0, 10, 0, 10],
+            backgroundColor: bgColorList[i],
+            lineHeight: 74,
+            rich: {
+              a: {
+                align: 'right',
+                color: '#C1DEFF',
+                fontSize: 42,
+                fontWeight: 700
+              },
+              b: {
+                align: 'left',
+                color: '#C1DEFF',
+                fontSize: 34,
+                padding: [0, 0, 0, 10]
+              },
+              c:{
+                align: 'center',
+                color: '#C1DEFF',
+                fontSize: 34,
+                padding: [0, 0, 0, 10]
+              }
+            }
+          },
+          data: [chartData[i].name],
+        });
+      }
+
+      let option = {
+        tooltip: {
+          show: true,
+          backgroundColor: 'rgba(0, 0, 0,.8)',
+          textStyle: {
+            color: '#fff',
+          },
+        },
+        legend: legendData,
+        grid: {
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+        },
+        color: colorList,
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            roundCap: true,
+            radius: ['26%', '50%'],
+            center: ['20%', '50%'],
+            label: {
+              show: false
+            },
+            labelLine: {
+              show: false
+            },
+            itemStyle: {
+              borderRadius: 0,
+              borderWidth: 10
+            },
+            data: pieData1
+          },
+        ],
+      }
+
+      myCharts.setOption(option)
+      let listener = function () {
+        myCharts.resize()
+      }
+      EleResize.on(barCharts, listener)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+#charts {
+  height: 100%;
+  width: 100%;
+}
+</style>
--- a/package.json
+++ b/package.json
@ -20,7 +20,8 @@
    "vue-echarts": "^4.1.0",
    "vue-seamless-scroll": "^1.1.23",
    "vue-server-renderer": "^2.7.10",
-    "vue-template-compiler": "^2.7.10"
+    "vue-template-compiler": "^2.7.10",
+    "lodash": "^4.17.21"
  },
  "devDependencies": {
    "less": "^4.2.0",
--- a/pages/visual/PeakCoalView.vue
+++ b/pages/visual/PeakCoalView.vue
@ -106,7 +106,6 @@ export default {
      const innerHeight = window.innerHeight
      const widthScale = innerWidth / baseWidth
      const scaleHeight = baseHeight * widthScale
-      console.log('scaleHeight:', scaleHeight)
      if (scaleHeight <= innerHeight) {
        origin = 'left top'
        scale = widthScale
--- a/utils/esresize.js
+++ b/utils/esresize.js
@ -0,0 +1,105 @@
+let EleResize = {
+    _handleResize: function (e) {
+        let ele = e.target || e.srcElement
+        let trigger = ele.__resizeTrigger__
+        if (trigger) {
+            let handlers = trigger.__z_resizeListeners
+            if (handlers) {
+                let size = handlers.length
+                for (let i = 0; i < size; i++) {
+                    let h = handlers[i]
+                    let handler = h.handler
+                    let context = h.context
+                    handler.apply(context, [e])
+                }
+            }
+        }
+    },
+    _removeHandler: function (ele, handler, context) {
+        let handlers = ele.__z_resizeListeners
+        if (handlers) {
+            let size = handlers.length
+            for (let i = 0; i < size; i++) {
+                let h = handlers[i]
+                if (h.handler === handler && h.context === context) {
+                    handlers.splice(i, 1)
+                    return
+                }
+            }
+        }
+    },
+    _createResizeTrigger: function (ele) {
+        let obj = document.createElement('object')
+        obj.setAttribute('style',
+            'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;')
+        obj.onload = EleResize._handleObjectLoad
+        obj.type = 'text/html'
+        ele.appendChild(obj)
+        obj.data = 'about:blank'
+        return obj
+    },
+    _handleObjectLoad: function (evt) {
+        this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__
+        this.contentDocument.defaultView.addEventListener('resize', EleResize._handleResize)
+    }
+}
+if (document.attachEvent) { // ie9-10
+    EleResize.on = function (ele, handler, context) {
+        let handlers = ele.__z_resizeListeners
+        if (!handlers) {
+            handlers = []
+            ele.__z_resizeListeners = handlers
+            ele.__resizeTrigger__ = ele
+            ele.attachEvent('onresize', EleResize._handleResize)
+        }
+        handlers.push({
+            handler: handler,
+            context: context
+        })
+    }
+    EleResize.off = function (ele, handler, context) {
+        let handlers = ele.__z_resizeListeners
+        if (handlers) {
+            EleResize._removeHandler(ele, handler, context)
+            if (handlers.length === 0) {
+                ele.detachEvent('onresize', EleResize._handleResize)
+                delete ele.__z_resizeListeners
+            }
+        }
+    }
+} else {
+    EleResize.on = function (ele, handler, context) {
+        let handlers = ele.__z_resizeListeners
+        if (!handlers) {
+            handlers = []
+            ele.__z_resizeListeners = handlers
+
+            if (getComputedStyle(ele, null).position === 'static') {
+                ele.style.position = 'relative'
+            }
+            let obj = EleResize._createResizeTrigger(ele)
+            ele.__resizeTrigger__ = obj
+            obj.__resizeElement__ = ele
+        }
+        handlers.push({
+            handler: handler,
+            context: context
+        })
+    }
+    EleResize.off = function (ele, handler, context) {
+        let handlers = ele.__z_resizeListeners
+        if (handlers) {
+            EleResize._removeHandler(ele, handler, context)
+            if (handlers.length === 0) {
+                let trigger = ele.__resizeTrigger__
+                if (trigger) {
+                    trigger.contentDocument.defaultView.removeEventListener('resize', EleResize._handleResize)
+                    ele.removeChild(trigger)
+                    delete ele.__resizeTrigger__
+                }
+                delete ele.__z_resizeListeners
+            }
+        }
+    }
+}
+export {EleResize}