1、新增1920*1080看板布局

assets/fonts/fonts.less

@@ -17,3 +17,8 @@
   font-family: MicrosoftYaHei-Bold;
   src: url("./Microsoft-YaHei-Bold.ttf") format("truetype");
 }
+
+@font-face {
+  font-family: 思源黑体;
+  src: url("./思源黑体1 SourceHanSansCN-ExtraLight.otf") format("truetype");
+}

components/charts/AirRateCharts.vue

@@ -0,0 +1,166 @@
+<!--空气质量变化趋势-->
+<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: 'AirRateCharts',
+  props: {
+    rateNum: {
+      type: Number,
+      default: 0
+    },
+    color: {
+      type: Array,
+      default: () => [
+        '#FDBD00',
+        '#00D5FF',
+        '#1978E5'
+      ]
+    }
+  },
+  data() {
+    return {}
+  },
+  watch: {
+    rateNum: {
+      deep: true,
+      immediate: true,
+      handler(value) {
+        if (value) {
+          this.$nextTick(() => {
+            this.init()
+          })
+        }
+      }
+    }
+  },
+  mounted() {
+  },
+
+  methods: {
+    init() {
+      let myCharts = echarts.init(this.$refs.charts)
+      let barCharts = this.$refs.charts
+      let sexdata = [{
+          value: this.rateNum,
+          symbol: 'rect',
+          symbolClip: true,
+          symbolRepeat: true,
+          symbolSize: [
+            '40%', // 50% of the width of reference bar.
+            "80%" // 100% of the height of reference bar.
+          ]
+        }]
+      let option = {
+        legend: {},
+        //在坐标系内绘制
+        grid: [{
+          left: 10,
+          bottom: 10,
+          top: 10,
+          right: 60
+        }],
+        //x 轴
+        xAxis: {
+          max: 100,
+          splitLine: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+        },
+        //y 轴
+        yAxis: {
+          data: ['a'],
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          }
+        },
+        //展示层
+        series: [
+          //目标数据
+          {
+            type: 'pictorialBar',
+            symbolBoundingData: 100,
+            itemStyle: {
+              normal: {
+                color: 'rgba(76,184,255,1)'
+              }
+            },
+            z: 20,
+            data: sexdata
+          },
+          //背景数据
+          {
+            type: 'pictorialBar',
+            symbolBoundingData: 100,
+            z: 15,
+            itemStyle: {
+              normal: {
+                color: '#1B2940'
+              }
+            },
+            label: {
+              show: true,
+              position: 'right',
+              distance: 16,
+              color: '#fff',
+              fontSize: 16,
+              formatter(params) {
+                return sexdata[0].value + " % "
+              }
+            },
+            data: [{
+              symbol: 'rect',
+              value: 100,
+              symbolClip: true,
+              symbolRepeat: true,
+              symbolSize: [
+                '40%', // 50% of the width of reference bar.
+                "80%" // 100% of the height of reference bar.
+              ]
+            }]
+          }
+        ]
+      };
+
+      myCharts.setOption(option)
+      let listener = function () {
+        myCharts.resize()
+      }
+      EleResize.on(barCharts, listener)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+#charts {
+  height: 100%;
+  width: 100%;
+}
+</style>

components/charts/ChangesPollutantsCharts.vue

@@ -0,0 +1,206 @@
+<!--空气质量变化趋势-->
+<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: 'ChangesPollutantsCharts',
+  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 areaStartColor = ['rgba(20,153,255,0.1)', 'rgba(20,224,214,0.1)', 'rgba(224,214,101,0.1)']
+      let areaEndColor = ['rgba(20,153,255,1)', 'rgba(20,224,214,1)', 'rgba(224,214,101,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: 'pictorialBar',
+          barGap: '-20%',
+          symbol: 'path://M18,3 L46,3 78,68 18,68 46,3 z',
+
+          itemStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: areaEndColor[index],
+                },
+                {
+                  offset: 1,
+                  color: areaStartColor[index],
+                },
+              ],
+              global: false, //  缺省为  false
+            },
+          },
+          emphasis: {
+            itemStyle: {
+              opacity: 1,
+            },
+          },
+          data: yAxisDataSource,
+        }
+        seriesList.push(series)
+      }
+      let option = {
+        color: color,
+        legend: {
+          top: 20,
+          left: '30%',
+          itemWidth: 11,
+          itemHeight: 11,
+          icon: 'circle',
+          textStyle: {
+            color: 'rgba(106,196,255,0.60)',
+            fontSize: 12,
+            padding: [0, 0, 0, 10]
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        grid: {
+          top: 50,
+          bottom: 10,
+          left: 10,
+          right: 10,
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: true,
+            axisLabel: {
+              fontSize: 12,
+              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: 12,
+              color: 'rgba(106,196,255,0.60)'
+            },
+            nameTextStyle: {
+              color: 'rgba(106,196,255,0.60)',
+              fontSize: 12,
+              lineHeight: 20,
+            },
+            // 分割线
+            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>

components/charts/PeakAirQualityTrendCharts.vue

@@ -0,0 +1,205 @@
+<!--空气质量变化趋势-->
+<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: 'PeakAirQualityTrendCharts',
+  props: {
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    color: {
+      type: Array,
+      default: () => [
+        'rgba(28,162,251,1)',
+        'rgba(17,208,242,1)',
+        '#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 areaStartColor = ['rgba(28,162,251,0.5)', 'rgba(17,208,242,0.5)',]
+      let areaEndColor = ['rgba(28,162,251,0.1)', 'rgba(17,208,242,0.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: false,
+          zlevel: 3,
+          symbol: 'none', //数据交叉点样式
+          data: yAxisDataSource,
+          yAxisIndex: 0, // 通过这个判断左右
+          lineStyle: {
+            width: 3,
+          },
+          areaStyle: {
+            color: {
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: areaStartColor[index] // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: areaEndColor[index] //   100% 处的颜色
+                }
+              ],
+              global: false // 缺省为 false
+            }
+          },
+        }
+        seriesList.push(series)
+      }
+      let option = {
+        color: color,
+        legend: {
+          top: 20,
+          left: '30%',
+          itemWidth: 11,
+          itemHeight: 11,
+          icon: 'circle',
+          textStyle: {
+            color: 'rgba(106,196,255,0.60)',
+            fontSize: 12,
+            padding: [0, 0, 0, 10]
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        grid: {
+          top: 50,
+          bottom: 10,
+          left: 10,
+          right: 10,
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: true,
+            axisLabel: {
+              fontSize: 12,
+              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: 12,
+              color: 'rgba(106,196,255,0.60)'
+            },
+            nameTextStyle: {
+              color: 'rgba(106,196,255,0.60)',
+              fontSize: 12,
+              lineHeight: 20,
+            },
+            // 分割线
+            splitLine: {
+              show: false,
+              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>

components/peak-coal-monitoring/AlarmOverview.vue

@@ -1,6 +1,15 @@
 <template>
   <div class="alarm-overview">
-    <peak-secondary-title :title="title"/>
+    <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>
     <div class="_tab">
       <div class="tab-item" v-for="item of tabList" :class="item.value === activeTab?'active-tab':''"
            @click="tabChange(item.value)">{{ item.label }}
@@ -38,13 +47,35 @@ export default {
           value: 2
         }
       ],
-      activeTab: 1
+      activeTab: 1,
+      tabDataList: [
+        {
+          name: '全部',
+          value: '0'
+        },
+        {
+          name: '待审批',
+          value: '1'
+        },
+        {
+          name: '带研判',
+          value: '2'
+        },
+        {
+          name: '已归档',
+          value: '3'
+        }
+      ],
+      activeDateTab:'0',
     }
   },
   methods: {
     tabChange(val) {
       this.activeTab = val
-    }
+    },
+    tabDateChange(val) {
+      this.activeDateTab = val
+    },
   }
 }
 </script>
@@ -95,5 +126,35 @@ export default {
       height: 100%;
     }
   }
+
+  .right-tab {
+    height: 100%;
+    .flex-row;
+    justify-content: space-between;
+    width: 249px;
+
+    .tab-type {
+      margin-bottom: 15px;
+      width: 57px;
+      height: 30px;
+      .bg("~/assets/peakCoalImages/left/pollutant-type-default-bg.png");
+      font-family: MicrosoftYaHei;
+      font-size: 14px;
+      color: rgba(216, 240, 255, 0.50);
+      letter-spacing: 0;
+      text-align: center;
+      line-height: 30px;
+      text-shadow: 0 0 11px #0091FF;
+      font-weight: 400;
+      cursor: pointer;
+    }
+
+    .active-tab {
+      .bg("~/assets/peakCoalImages/left/pollutant-type-active-bg.png");
+      color: #D8F0FF;
+      text-shadow: 0 0 33px #0091FF;
+      font-weight: 400;
+    }
+  }
 }
 </style>

components/peak-coal-monitoring/AtmosphericModule.vue

@@ -2,18 +2,27 @@
   <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 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"/>
     </div>
   </div>
 </template>
 
 <script>
 import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
+import ChangesPollutants from "@/components/peak-coal-monitoring/ChangesPollutants";
+import PeakAirQuality from "@/components/peak-coal-monitoring/PeakAirQuality";
+
 export default {
   name: "AtmosphericModule",
-  components: {PeakSecondaryTitle},
+  components: {PeakAirQuality, ChangesPollutants, PeakSecondaryTitle},
-  data(){
+  data() {
-    return{
+    return {
       title: '大气质量信息总览',
       tabList: [
         {
@@ -29,7 +38,7 @@ export default {
     }
   },
   methods: {
-    tabChange(val){
+    tabChange(val) {
       this.activeTab = val
     }
   }
@@ -38,16 +47,19 @@ export default {
 
 <style scoped lang="less">
 @import "../../assets/styles/mixin";
-.atmospheric-module{
+
+.atmospheric-module {
   height: 100%;
   width: 100%;
   .flex-column;
-  ._tab{
+
+  ._tab {
     margin-top: 10px;
     width: 100%;
     height: 30px;
     .flex-row;
-    .tab-item{
+
+    .tab-item {
       width: 50%;
       height: 100%;
       font-family: MicrosoftYaHei-Bold;
@@ -55,14 +67,20 @@ export default {
       color: #FFFFFF;
       letter-spacing: 0;
       text-align: center;
-      text-shadow: 0 2px 2px rgba(0,0,0,0.50);
+      text-shadow: 0 2px 2px rgba(0, 0, 0, 0.50);
       font-weight: 700;
       cursor: pointer;
     }
-    .active-tab{
+
+    .active-tab {
       background: url("~/assets/peakCoalMonitoring/common/tab-active-bg.png") no-repeat;
       background-size: 100% 100%;
     }
   }
+
+  .charts-info {
+    flex: 1;
+    height: 0;
+  }
 }
 </style>

components/peak-coal-monitoring/ChangesPollutants.vue

@@ -0,0 +1,134 @@
+<!--污染物变化趋势-->
+<template>
+  <div class="changes-pollutants">
+    <changes-pollutants-charts :data-source="dataSource"/>
+  </div>
+</template>
+
+<script>
+import ChangesPollutantsCharts from "@/components/charts/ChangesPollutantsCharts";
+export default {
+  name: "ChangesPollutants",
+  components: {ChangesPollutantsCharts},
+  data(){
+    return{
+      dataSource: [
+        {
+          name: '星期一',
+          value: 3,
+          attr: '一氧化碳'
+        },
+        {
+          name: '星期二',
+          value: 4,
+          attr: '一氧化碳'
+        },
+        {
+          name: '星期三',
+          value: 1,
+          attr: '一氧化碳'
+        },
+        {
+          name: '星期四',
+          value: 4,
+          attr: '一氧化碳'
+        },
+        {
+          name: '星期五',
+          value: 6,
+          attr: '一氧化碳'
+        },
+        {
+          name: '星期六',
+          value: 1,
+          attr: '一氧化碳'
+        },
+        {
+          name: '星期日',
+          value: 8,
+          attr: '一氧化碳'
+        },
+        {
+          name: '星期一',
+          value: 1,
+          attr: 'PM2.5'
+        },
+        {
+          name: '星期二',
+          value: 4,
+          attr: 'PM2.5'
+        },
+        {
+          name: '星期三',
+          value: 7,
+          attr: 'PM2.5'
+        },
+        {
+          name: '星期四',
+          value: 8,
+          attr: 'PM2.5'
+        },
+        {
+          name: '星期五',
+          value: 2,
+          attr: 'PM2.5'
+        },
+        {
+          name: '星期六',
+          value: 7,
+          attr: 'PM2.5'
+        },
+        {
+          name: '星期日',
+          value: 1,
+          attr: 'PM2.5'
+        },
+        {
+          name: '星期一',
+          value: 1,
+          attr: 'PM10'
+        },
+        {
+          name: '星期二',
+          value: 4,
+          attr: 'PM10'
+        },
+        {
+          name: '星期三',
+          value: 7,
+          attr: 'PM10'
+        },
+        {
+          name: '星期四',
+          value: 8,
+          attr: 'PM10'
+        },
+        {
+          name: '星期五',
+          value: 2,
+          attr: 'PM10'
+        },
+        {
+          name: '星期六',
+          value: 7,
+          attr: 'PM10'
+        },
+        {
+          name: '星期日',
+          value: 1,
+          attr: 'PM10'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "../../assets/styles/mixin";
+
+.changes-pollutants {
+  height: 100%;
+  width: 100%;
+}
+</style>

components/peak-coal-monitoring/DeviceOverview.vue

@@ -1,6 +1,43 @@
 <template>
 <div class="device-overview">
   <peak-secondary-title :title="title" />
+  <div class="device-total">
+    <div class="device-item">
+      <div class="point-icon"></div>
+      <div class="title-value">
+        <div class="_title">监控点</div>
+        <div class="_value">287</div>
+      </div>
+      <div class="title-value">
+        <div class="_title">在线率</div>
+        <div class="_value">98%</div>
+      </div>
+    </div>
+    <div class="_line"></div>
+    <div class="device-item">
+      <div class="microsite-icon"></div>
+      <div class="title-value">
+        <div class="_title">微站</div>
+        <div class="_value">287</div>
+      </div>
+      <div class="title-value">
+        <div class="_title">在线率</div>
+        <div class="_value">98%</div>
+      </div>
+    </div>
+    <div class="_line"></div>
+    <div class="device-item">
+      <div class="tester-icon"></div>
+      <div class="title-value">
+        <div class="_title">检测仪</div>
+        <div class="_value">287</div>
+      </div>
+      <div class="title-value">
+        <div class="_title">在线率</div>
+        <div class="_value">98%</div>
+      </div>
+    </div>
+  </div>
 </div>
 </template>
 
@@ -22,5 +59,59 @@ export default {
 .device-overview{
   height: 100%;
   width: 100%;
+  .flex-column;
+  .device-total{
+    flex: 1;
+    height: 0;
+    .flex-row;
+    justify-content: space-around;
+    .device-item{
+      height: 60%;
+      width: 140px;
+      .flex-column;
+      justify-content: space-between;
+      align-items: center;
+      .point-icon{
+        width: 61px;
+        height: 61px;
+        background: url("~/assets/peakCoalMonitoring/right/point-icon.png") no-repeat;
+      }
+      .microsite-icon{
+        width: 61px;
+        height: 61px;
+        background: url("~/assets/peakCoalMonitoring/right/microsite-icon.png") no-repeat;
+      }
+      .tester-icon{
+        width: 61px;
+        height: 61px;
+        background: url("~/assets/peakCoalMonitoring/right/tester-icon.png") no-repeat;
+      }
+      .title-value{
+        .flex-row;
+        ._title{
+          font-family: MicrosoftYaHei;
+          font-size: 14px;
+          color: #6AC4FF;
+          letter-spacing: 2.26px;
+          font-weight: 400;
+        }
+        ._value {
+          padding-left: 10px;
+          font-family: YouSheBiaoTiHei;
+          font-size: 18px;
+          color: #FFFFFF;
+          letter-spacing: 5.64px;
+          font-weight: 400;
+          text-align: right;
+          .text-ellipsis;
+        }
+      }
+    }
+    ._line{
+      width: 1px;
+      height: 160px;
+      background: #1A4157;
+    }
+  }
 }
 </style>

components/peak-coal-monitoring/EnergyProfile.vue

@@ -1,6 +1,15 @@
 <template>
   <div class="energy-profile">
-    <peak-secondary-title :title="title"/>
+    <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>
     <div class="_tab">
       <div class="tab-item" v-for="item of tabList" :class="item.value === activeTab?'active-tab':''"
            @click="tabChange(item.value)">{{ item.label }}
@@ -38,13 +47,31 @@ export default {
           value: 2
         }
       ],
+      tabDataList: [
+        {
+          name: '今日',
+          value: '0'
+        },
+        {
+          name: '本月',
+          value: '1'
+        },
+        {
+          name: '上月',
+          value: '2'
+        }
+      ],
+      activeDateTab:'0',
       activeTab: 1
     }
   },
   methods: {
     tabChange(val) {
       this.activeTab = val
-    }
+    },
+    tabDateChange(val) {
+      this.activeDateTab = val
+    },
   }
 }
 </script>
@@ -93,5 +120,35 @@ export default {
       height: 100%;
     }
   }
+
+  .right-tab {
+    height: 100%;
+    .flex-row;
+    justify-content: space-between;
+    width: 220px;
+
+    .tab-type {
+      margin-bottom: 15px;
+      width: 67px;
+      height: 30px;
+      .bg("~/assets/peakCoalImages/left/pollutant-type-default-bg.png");
+      font-family: MicrosoftYaHei;
+      font-size: 14px;
+      color: rgba(216, 240, 255, 0.50);
+      letter-spacing: 0;
+      text-align: center;
+      line-height: 30px;
+      text-shadow: 0 0 11px #0091FF;
+      font-weight: 400;
+      cursor: pointer;
+    }
+
+    .active-tab {
+      .bg("~/assets/peakCoalImages/left/pollutant-type-active-bg.png");
+      color: #D8F0FF;
+      text-shadow: 0 0 33px #0091FF;
+      font-weight: 400;
+    }
+  }
 }
 </style>

components/peak-coal-monitoring/PeakAirQuality.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="peak-air-quality">
+    <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>
+
+<script>
+import PeakAirQualityTrendCharts from "@/components/charts/PeakAirQualityTrendCharts";
+import AirRateCharts from "@/components/charts/AirRateCharts";
+
+export default {
+  name: "PeakAirQuality",
+  components: {AirRateCharts, PeakAirQualityTrendCharts},
+  data() {
+    return {
+      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'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "../../assets/styles/mixin";
+
+.peak-air-quality {
+  height: 100%;
+  width: 100%;
+  .flex-column;
+
+  .line-charts {
+    height: 170px;
+    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/PollutionInformation.vue

@@ -1,17 +1,88 @@
 <template>
-<div class="pollution-information">
+  <div class="pollution-information">
     <peak-secondary-title :title="title"/>
-</div>
+    <div class="pollution-content">
+      <div class="pollution-item" v-for="item of dataSource">
+        <div class="pollution-icon" :class="getPollutionIcon(item.state)"></div>
+        <div class="total-info">
+          <div class="title-value">
+            <div class="_value">{{ item.pollutionValue }}</div>
+            <div class="_title">{{ item.pollutionName }}</div>
+          </div>
+          <div class="unit-value">
+            <div class="standard-title">标准:</div>
+            <div class="standard-value">{{ item.standardValue }}{{ item.pollutionUnit }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
+
 export default {
   name: "PollutionInformation",
   components: {PeakSecondaryTitle},
-  data(){
+  data() {
-    return{
+    return {
-      title: '污染物信息总览'
+      title: '污染物信息总览',
+      dataSource: [
+        {
+          pollutionName: '一氧化碳',
+          pollutionValue: '9.0',
+          pollutionUnit: 'ug/m³',
+          standardValue: '6',
+          state: 1
+        },
+        {
+          pollutionName: '氮氧化物',
+          pollutionValue: '9.0',
+          pollutionUnit: 'ug/m³',
+          standardValue: '6',
+          state: 2
+        },
+        {
+          pollutionName: 'PM10',
+          pollutionValue: '9.0',
+          pollutionUnit: 'ug/m³',
+          standardValue: '16',
+          state: 0
+        },
+        {
+          pollutionName: 'PM2.5',
+          pollutionValue: '9.0',
+          pollutionUnit: 'ug/m³',
+          standardValue: '6',
+          state: 1
+        },
+        {
+          pollutionName: '二氧化硫',
+          pollutionValue: '9.0',
+          pollutionUnit: 'ug/m³',
+          standardValue: '6',
+          state: 1
+        },
+        {
+          pollutionName: '臭氧',
+          pollutionValue: '9.0',
+          pollutionUnit: 'ug/m³',
+          standardValue: '6',
+          state: 0
+        }
+      ]
+    }
+  },
+  methods:{
+    getPollutionIcon(val){
+      if(val === 1){
+        return 'you-icon'
+      } else if(val === 2){
+        return 'chi-ping-icon'
+      } else {
+        return 'cha-icon'
+      }
     }
   }
 }
@@ -19,8 +90,102 @@ export default {
 
 <style scoped lang="less">
 @import "assets/styles/mixin";
-.pollution-information{
+
+.pollution-information {
   height: 100%;
   width: 100%;
+  .flex-column;
+
+  .pollution-content {
+    padding-top: 10px;
+    flex: 1;
+    height: 0;
+    display: flex;
+    flex-flow: row;
+    justify-content: start;
+    flex-wrap: wrap;
+    .pollution-item {
+      height: 66px;
+      width: 200px;
+      .flex-row;
+      &:nth-child(2n){
+        margin-left: 20px;
+      }
+      .pollution-icon{
+        width: 66px;
+        height: 66px;
+      }
+
+      .you-icon{
+        background: url("~/assets/peakCoalMonitoring/left/pollution-you.png") no-repeat;
+      }
+
+      .chi-ping-icon{
+        background: url("~/assets/peakCoalMonitoring/left/pollution-chi-ping.png") no-repeat;
+      }
+
+      .cha-icon{
+        background: url("~/assets/peakCoalMonitoring/left/pollution-cha.png") no-repeat;
+      }
+
+      .total-info{
+        flex: 1;
+        width: 0;
+        .flex-column;
+        justify-content: space-between;
+        .title-value{
+          width: 100%;
+          .flex-row;
+          justify-content: space-between;
+          ._value{
+            padding-left: 10px;
+            font-family: YouSheBiaoTiHei;
+            font-size: 18px;
+            color: #24DCF7;
+            letter-spacing: 5.64px;
+            font-weight: 400;
+            text-align: right;
+            .text-ellipsis;
+          }
+          ._title{
+            font-family: MicrosoftYaHei;
+            font-size: 14px;
+            color: #24DCF7;
+            letter-spacing: 2.26px;
+            font-weight: 400;
+          }
+        }
+        .unit-value{
+          width: 100%;
+          .flex-row;
+          justify-content: space-between;
+          .standard-value{
+            font-family: 思源黑体;
+            font-size: 12px;
+            color: #FFFFFF;
+            letter-spacing: 5.64px;
+            font-weight: 400;
+            text-align: right;
+            .text-ellipsis;
+          }
+          .standard-title{
+            padding-left: 10px;
+            font-family: 思源黑体;
+            font-size: 12px;
+            color: #FFFFFF;
+            letter-spacing: 2.26px;
+            font-weight: 400;
+          }
+          .standard-unit{
+            font-family: 思源黑体;
+            font-size: 12px;
+            color: #FFFFFF;
+            letter-spacing: 2.26px;
+            font-weight: 400;
+          }
+        }
+      }
+    }
+  }
 }
 </style>

pages/peak-coal-monitoring/PeakCoalMonitoring.vue

@@ -7,7 +7,9 @@
     </div>
 
     <div class="header-panel">
-      <div class="header-content"></div>
+      <div class="header-content">
+        <div class="_title">峰煤智慧监控应用系统</div>
+      </div>
     </div>
 
 
@@ -98,6 +100,18 @@ body, html, #__nuxt, #__layout {
       background-size: 100% 100%;
       position: absolute;
       top: -123px;
+      ._title{
+        padding-top: 140px;
+        width: 100%;
+        height: 60px;
+        font-family: AlimamaShuHeiTi-Bold;
+        font-size: 32px;
+        color: #D8F0FF;
+        letter-spacing: 7.68px;
+        text-align: center;
+        text-shadow: 0 0 11px #000000;
+        font-weight: 700;
+      }
     }
   }