diff --git a/assets/peakCoalMonitoring/common/tab-active-bg.png b/assets/peakCoalMonitoring/common/tab-active-bg.png
new file mode 100644
index 0000000..d0221c8
Binary files /dev/null and b/assets/peakCoalMonitoring/common/tab-active-bg.png differ
diff --git a/assets/peakCoalMonitoring/common/tab-line.png b/assets/peakCoalMonitoring/common/tab-line.png
new file mode 100644
index 0000000..9c74f78
Binary files /dev/null and b/assets/peakCoalMonitoring/common/tab-line.png differ
diff --git a/assets/peakCoalMonitoring/common/title-bg.png b/assets/peakCoalMonitoring/common/title-bg.png
new file mode 100644
index 0000000..268ba23
Binary files /dev/null and b/assets/peakCoalMonitoring/common/title-bg.png differ
diff --git a/assets/peakCoalMonitoring/footer/footer-bg.png b/assets/peakCoalMonitoring/footer/footer-bg.png
new file mode 100644
index 0000000..ca4a947
Binary files /dev/null and b/assets/peakCoalMonitoring/footer/footer-bg.png differ
diff --git a/assets/peakCoalMonitoring/header/header-shadow.png b/assets/peakCoalMonitoring/header/header-shadow.png
new file mode 100644
index 0000000..85bdadc
Binary files /dev/null and b/assets/peakCoalMonitoring/header/header-shadow.png differ
diff --git a/assets/peakCoalMonitoring/right/charts-title-icon.png b/assets/peakCoalMonitoring/right/charts-title-icon.png
new file mode 100644
index 0000000..481c5fc
Binary files /dev/null and b/assets/peakCoalMonitoring/right/charts-title-icon.png differ
diff --git a/assets/peakCoalMonitoring/right/electricity-icon.png b/assets/peakCoalMonitoring/right/electricity-icon.png
new file mode 100644
index 0000000..0b81a8d
Binary files /dev/null and b/assets/peakCoalMonitoring/right/electricity-icon.png differ
diff --git a/assets/peakCoalMonitoring/right/num-bottom-bg.png b/assets/peakCoalMonitoring/right/num-bottom-bg.png
new file mode 100644
index 0000000..c066b31
Binary files /dev/null and b/assets/peakCoalMonitoring/right/num-bottom-bg.png differ
diff --git a/assets/peakCoalMonitoring/right/water-icon.png b/assets/peakCoalMonitoring/right/water-icon.png
new file mode 100644
index 0000000..6528b9d
Binary files /dev/null and b/assets/peakCoalMonitoring/right/water-icon.png differ
diff --git a/components/charts/PeakEnergyUseChart.vue b/components/charts/PeakEnergyUseChart.vue
new file mode 100644
index 0000000..885fac0
--- /dev/null
+++ b/components/charts/PeakEnergyUseChart.vue
@@ -0,0 +1,211 @@
+<!--能源使用情况-->
+<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: 'PeakEnergyUseChart',
+  props: {
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    color: {
+      type: Array,
+      default: () => [
+        '#00F6FF',
+        '#007CFF',
+        '#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 option = {
+        color: color,
+        legend: {
+          top: 0,
+          right: 0,
+          itemWidth: 11,
+          itemHeight: 11,
+          icon: 'circle',
+          textStyle: {
+            color: '#B8D3F1',
+            fontSize: 12,
+
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        grid: {
+          top: 50,
+          bottom: 10,
+          left: 20,
+          right: 20,
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: true,
+            axisLabel: {
+              fontSize: 12,
+              color: '#B8D3F1'
+            },
+            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: 12,
+              color: '#B8D3F1'
+            },
+            nameTextStyle: {
+              color: '#B8D3F1',
+              fontSize: 12,
+              lineHeight: 10,
+            },
+            // 分割线
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: 'rgba(176,215,255,0.40)',
+                type: 'dashed'
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+          {
+            type: 'value',
+            position: 'right',
+            name: '单位：KWH',
+            splitNumber: 5,
+            axisLabel: {
+              fontSize: 12,
+              color: '#B8D3F1'
+            },
+            nameTextStyle: {
+              color: '#B8D3F1',
+              fontSize: 12,
+              lineHeight: 10,
+            },
+            // 分割线
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: 'rgba(176,215,255,0.40)',
+                type: 'dashed'
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: '用电',
+            type: 'line',
+            smooth: false,
+            zlevel: 3,
+            symbol: 'none', //数据交叉点样式
+            data: yAxisData1,
+            yAxisIndex: 0, // 通过这个判断左右
+            lineStyle: {
+              width: 3,
+            }
+          },
+          {
+            name: '用水',
+            type: 'line',
+            smooth: false,
+            zlevel: 3,
+            symbol: 'none', //数据交叉点样式 (实心点)
+            data: yAxisData2,
+            yAxisIndex: 1, // 通过这个判断左右
+            lineStyle: {
+              width: 3,
+            }
+          }
+        ],
+      };
+
+
+      myCharts.setOption(option)
+      let listener = function () {
+        myCharts.resize()
+      }
+      EleResize.on(barCharts, listener)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+#charts {
+  height: 100%;
+  width: 100%;
+}
+</style>
diff --git a/components/charts/PeakProduceTrendChart.vue b/components/charts/PeakProduceTrendChart.vue
new file mode 100644
index 0000000..dd51680
--- /dev/null
+++ b/components/charts/PeakProduceTrendChart.vue
@@ -0,0 +1,224 @@
+<!--生产趋势-->
+<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: 'PeakProduceTrendChart',
+  props: {
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    color: {
+      type: Array,
+      default: () => [
+        '#00F6FF',
+        '#007CFF',
+        '#FF8D1A'
+      ]
+    }
+  },
+  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: 11,
+          itemHeight: 11,
+          icon: 'circle',
+          textStyle: {
+            color: '#B8D3F1',
+            fontSize: 12,
+
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        grid: {
+          top: 50,
+          bottom: 10,
+          left: 20,
+          right: 20,
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: true,
+            axisLabel: {
+              fontSize: 12,
+              color: '#B8D3F1'
+            },
+            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: 12,
+              color: '#B8D3F1'
+            },
+            nameTextStyle: {
+              color: '#B8D3F1',
+              fontSize: 12,
+              lineHeight: 10,
+            },
+            // 分割线
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: 'rgba(176,215,255,0.40)',
+                type: 'dashed'
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+          {
+            type: 'value',
+            position: 'right',
+            name: '单位：m³',
+            splitNumber: 5,
+            axisLabel: {
+              fontSize: 12,
+              color: '#B8D3F1'
+            },
+            nameTextStyle: {
+              color: '#B8D3F1',
+              fontSize: 12,
+              lineHeight: 10,
+            },
+            // 分割线
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: 'rgba(176,215,255,0.40)',
+                type: 'dashed'
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: '石油',
+            type: 'line',
+            smooth: false,
+            zlevel: 3,
+            symbol: 'none', //数据交叉点样式
+            data: yAxisData1,
+            yAxisIndex: 0, // 通过这个判断左右
+            lineStyle: {
+              width: 3,
+            }
+          },
+          {
+            name: '氧气',
+            type: 'line',
+            smooth: false,
+            zlevel: 3,
+            symbol: 'none', //数据交叉点样式 (实心点)
+            data: yAxisData2,
+            yAxisIndex: 1, // 通过这个判断左右
+            lineStyle: {
+              width: 3,
+            }
+          },
+          {
+            name: '氮气',
+            type: 'line',
+            smooth: false,
+            zlevel: 3,
+            symbol: 'none', //数据交叉点样式 (实心点)
+            data: yAxisData3,
+            yAxisIndex: 1, // 通过这个判断左右
+            lineStyle: {
+              width: 3,
+            }
+          },
+        ],
+      };
+
+
+      myCharts.setOption(option)
+      let listener = function () {
+        myCharts.resize()
+      }
+      EleResize.on(barCharts, listener)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+#charts {
+  height: 100%;
+  width: 100%;
+}
+</style>
diff --git a/components/charts/PeakWarningTypeChart.vue b/components/charts/PeakWarningTypeChart.vue
new file mode 100644
index 0000000..d2bd42f
--- /dev/null
+++ b/components/charts/PeakWarningTypeChart.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: 'PeakWarningTypeChart',
+  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: 10,
+          itemHeight: 20,
+          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: 210,
+            height: 20,
+            padding: [0, 10, 0, 10],
+            backgroundColor: bgColorList[i],
+            lineHeight: 20,
+            rich: {
+              a: {
+                align: 'right',
+                color: '#C1DEFF',
+                fontSize: 12,
+                fontWeight: 700
+              },
+              b: {
+                align: 'left',
+                color: '#C1DEFF',
+                fontSize: 12,
+                padding: [0, 0, 0, 10]
+              },
+              c:{
+                align: 'center',
+                color: '#C1DEFF',
+                fontSize: 12,
+                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: 10,
+          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: 5
+            },
+            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>
diff --git a/components/peak-coal-monitoring/AlarmOverview.vue b/components/peak-coal-monitoring/AlarmOverview.vue
new file mode 100644
index 0000000..3a72dcb
--- /dev/null
+++ b/components/peak-coal-monitoring/AlarmOverview.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="alarm-overview">
+    <peak-secondary-title :title="title"/>
+    <div class="_tab">
+      <div class="tab-item" v-for="item of tabList" :class="item.value === activeTab?'active-tab':''"
+           @click="tabChange(item.value)">{{ item.label }}
+      </div>
+    </div>
+    <div class="alarm-data">
+      <div class="alarm-total" v-if="activeTab === 1">
+        <peak-warning-statistics/>
+      </div>
+      <div class="alarm-details" v-if="activeTab === 2">
+        <peak-latest-warning/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
+import PeakLatestWarning from "@/components/peak-coal-monitoring/PeakLatestWarning";
+import PeakWarningStatistics from "@/components/peak-coal-monitoring/PeakWarningStatistics";
+
+export default {
+  name: "AlarmOverview",
+  components: {PeakWarningStatistics, PeakLatestWarning, PeakSecondaryTitle},
+  data() {
+    return {
+      title: '智能预警概况',
+      tabList: [
+        {
+          label: '智能预警统计',
+          value: 1
+        },
+        {
+          label: '智能预警详情',
+          value: 2
+        }
+      ],
+      activeTab: 1
+    }
+  },
+  methods: {
+    tabChange(val) {
+      this.activeTab = val
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "../../assets/styles/mixin";
+
+.alarm-overview {
+  height: 100%;
+  width: 100%;
+  .flex-column;
+
+  ._tab {
+    margin-top: 10px;
+    width: 100%;
+    height: 30px;
+    .flex-row;
+
+    .tab-item {
+      width: 50%;
+      height: 100%;
+      font-family: MicrosoftYaHei-Bold;
+      font-size: 14px;
+      color: #FFFFFF;
+      letter-spacing: 0;
+      text-align: center;
+      text-shadow: 0 2px 2px rgba(0, 0, 0, 0.50);
+      font-weight: 700;
+      cursor: pointer;
+    }
+
+    .active-tab {
+      background: url("~/assets/peakCoalMonitoring/common/tab-active-bg.png") no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+
+  .alarm-data {
+    flex: 1;
+    height: 0;
+
+    .alarm-total {
+      height: 100%;
+      padding-top: 20px;
+    }
+
+    .alarm-details {
+      height: 100%;
+    }
+  }
+}
+</style>
diff --git a/components/peak-coal-monitoring/AtmosphericModule.vue b/components/peak-coal-monitoring/AtmosphericModule.vue
new file mode 100644
index 0000000..3ed25d4
--- /dev/null
+++ b/components/peak-coal-monitoring/AtmosphericModule.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="atmospheric-module">
+    <peak-secondary-title :title="title"/>
+    <div class="_tab">
+      <div class="tab-item" v-for="item of tabList" :class="item.value === activeTab?'active-tab':''" @click="tabChange(item.value)">{{ item.label }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
+export default {
+  name: "AtmosphericModule",
+  components: {PeakSecondaryTitle},
+  data(){
+    return{
+      title: '大气质量信息总览',
+      tabList: [
+        {
+          label: '空气质量指数',
+          value: 1
+        },
+        {
+          label: '重要污染物变化趋势',
+          value: 2
+        }
+      ],
+      activeTab: 1
+    }
+  },
+  methods: {
+    tabChange(val){
+      this.activeTab = val
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "../../assets/styles/mixin";
+.atmospheric-module{
+  height: 100%;
+  width: 100%;
+  .flex-column;
+  ._tab{
+    margin-top: 10px;
+    width: 100%;
+    height: 30px;
+    .flex-row;
+    .tab-item{
+      width: 50%;
+      height: 100%;
+      font-family: MicrosoftYaHei-Bold;
+      font-size: 14px;
+      color: #FFFFFF;
+      letter-spacing: 0;
+      text-align: center;
+      text-shadow: 0 2px 2px rgba(0,0,0,0.50);
+      font-weight: 700;
+      cursor: pointer;
+    }
+    .active-tab{
+      background: url("~/assets/peakCoalMonitoring/common/tab-active-bg.png") no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}
+</style>
diff --git a/components/peak-coal-monitoring/DeviceOverview.vue b/components/peak-coal-monitoring/DeviceOverview.vue
new file mode 100644
index 0000000..f4c31c1
--- /dev/null
+++ b/components/peak-coal-monitoring/DeviceOverview.vue
@@ -0,0 +1,26 @@
+<template>
+<div class="device-overview">
+  <peak-secondary-title :title="title" />
+</div>
+</template>
+
+<script>
+import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
+export default {
+  name: "DeviceOverview",
+  components: {PeakSecondaryTitle},
+  data(){
+    return{
+      title: '设备概况'
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "assets/styles/mixin";
+.device-overview{
+  height: 100%;
+  width: 100%;
+}
+</style>
diff --git a/components/peak-coal-monitoring/EnergyProfile.vue b/components/peak-coal-monitoring/EnergyProfile.vue
new file mode 100644
index 0000000..fca4d0a
--- /dev/null
+++ b/components/peak-coal-monitoring/EnergyProfile.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="energy-profile">
+    <peak-secondary-title :title="title"/>
+    <div class="_tab">
+      <div class="tab-item" v-for="item of tabList" :class="item.value === activeTab?'active-tab':''"
+           @click="tabChange(item.value)">{{ item.label }}
+      </div>
+    </div>
+    <div class="energy-content">
+      <div class="peak-energy-use" v-if="activeTab === 1">
+        <peak-energy-use/>
+      </div>
+      <div class="peak-enterprise-operations">
+        <peak-enterprise-operations v-if="activeTab === 2"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
+import PeakEnergyUse from "@/components/peak-coal-monitoring/PeakEnergyUse";
+import PeakEnterpriseOperations from "@/components/peak-coal-monitoring/PeakEnterpriseOperations";
+
+export default {
+  name: "EnergyProfile",
+  components: {PeakEnterpriseOperations, PeakEnergyUse, PeakSecondaryTitle},
+  data() {
+    return {
+      title: '能源概况',
+      tabList: [
+        {
+          label: '能源使用情况',
+          value: 1
+        },
+        {
+          label: '企业运营情况',
+          value: 2
+        }
+      ],
+      activeTab: 1
+    }
+  },
+  methods: {
+    tabChange(val) {
+      this.activeTab = val
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "assets/styles/mixin";
+
+.energy-profile {
+  height: 100%;
+  width: 100%;
+  .flex-column;
+
+  ._tab {
+    margin-top: 10px;
+    width: 100%;
+    height: 30px;
+    .flex-row;
+
+    .tab-item {
+      width: 50%;
+      height: 100%;
+      font-family: MicrosoftYaHei-Bold;
+      font-size: 14px;
+      color: #FFFFFF;
+      letter-spacing: 0;
+      text-align: center;
+      text-shadow: 0 2px 2px rgba(0, 0, 0, 0.50);
+      font-weight: 700;
+      cursor: pointer;
+    }
+
+    .active-tab {
+      background: url("~/assets/peakCoalMonitoring/common/tab-active-bg.png") no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+
+  .energy-content {
+    flex: 1;
+    height: 0;
+    .peak-energy-use{
+      height: 100%;
+    }
+
+    .peak-enterprise-operations{
+      height: 100%;
+    }
+  }
+}
+</style>
diff --git a/components/peak-coal-monitoring/MonitorData.vue b/components/peak-coal-monitoring/MonitorData.vue
new file mode 100644
index 0000000..d699654
--- /dev/null
+++ b/components/peak-coal-monitoring/MonitorData.vue
@@ -0,0 +1,361 @@
+<template>
+<div class="monitor-data">
+  <peak-secondary-title :title="title"/>
+  <div class="table-content">
+    <peak-custom-table :table-title="tableTitle" :data-source="dataSource"/>
+  </div>
+</div>
+</template>
+
+<script>
+import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
+import PeakCustomTable from "@/components/peak-coal-monitoring/PeakCustomTable";
+export default {
+  name: "MonitorData",
+  components: {PeakCustomTable, PeakSecondaryTitle},
+  data(){
+    return{
+      title: '实时监测数据',
+      tableTitle: [
+        {
+          title: '监测设备',
+          dataIndex: 'pointName',
+          dataUnit: null,
+          width: '25%'
+        },
+        {
+          title: '一氧化碳',
+          dataIndex: 'COValue',
+          dataUnit: 'COUnit',
+          width: '15%'
+        },
+        {
+          title: '二氧化硫',
+          dataIndex: 'SO2Value',
+          dataUnit: 'SO2Unit',
+          width: '15%'
+        },
+        {
+          title: '氮氧化物',
+          dataIndex: 'NOValue',
+          dataUnit: 'NOUnit',
+          width: '15%'
+        },
+        {
+          title: '臭氧',
+          dataIndex: 'O3Value',
+          dataUnit: 'O3Unit',
+          width: '15%'
+        },
+        {
+          title: 'PM10',
+          dataIndex: 'PM10Value',
+          dataUnit: 'PM10Unit',
+          width: '15%'
+        }
+      ],
+      dataSource: [
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "assets/styles/mixin";
+.monitor-data{
+  height: 100%;
+  width: 100%;
+  .flex-column;
+  .table-content{
+    padding-top: 20px;
+    flex: 1;
+    height: 0;
+  }
+}
+</style>
diff --git a/components/peak-coal-monitoring/PeakCustomTable.vue b/components/peak-coal-monitoring/PeakCustomTable.vue
new file mode 100644
index 0000000..42bf5f0
--- /dev/null
+++ b/components/peak-coal-monitoring/PeakCustomTable.vue
@@ -0,0 +1,229 @@
+<!--自定义table-->
+<template>
+  <div class="custom-table">
+    <div class="check-data-info">
+      <div class="table-info">
+        <div class="table-header">
+          <span class="table-header-item" v-for="(item,index) of tableTitle"
+                :style="`width:${item.width};`">
+            {{ item.title }}
+          </span>
+        </div>
+        <div class="table-body" v-if="dataSource.length && tableRoll">
+          <vue-seamless-scroll
+            v-if="dataSource.length && tableRoll"
+            ref="vueSeamless"
+            :data="dataSource"
+            class="seamless-scroll"
+            :class-option="defaultOption"
+          >
+            <div class="table-item-body" v-for="item of dataSource">
+            <span class="data-content" v-for="dataIndex of tableTitle" :style="`width:${dataIndex.width};`">
+              <div class="_content">
+                <div class="point-name">
+                  <div class="_value">{{ item[dataIndex.dataIndex] }}</div>
+                  <div class="_unit" v-if="dataIndex.dataUnit">{{ item[dataIndex.dataUnit] }}</div>
+                </div>
+              </div>
+
+            </span>
+            </div>
+          </vue-seamless-scroll>
+        </div>
+        <div class="table-body" v-if="dataSource.length && !tableRoll">
+          <div class="table-item-body" v-for="item of dataSource">
+            <span class="data-content" v-for="dataIndex of tableTitle" :style="`width:${dataIndex.width};`">
+              <div class="_content">
+                <div class="point-name">
+                  <div class="_value">{{ item[dataIndex.dataIndex] }}</div>
+                  <div class="_unit" v-if="dataIndex.dataUnit">{{ item[dataIndex.dataUnit] }}</div>
+                </div>
+              </div>
+
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import vueSeamlessScroll from 'vue-seamless-scroll'
+export default {
+  name: "PeakCustomTable",
+  components: {vueSeamlessScroll},
+  props: {
+    tableTitle: {
+      type: Array,
+      default: () => []
+    },
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    tableRoll: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    defaultOption() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 9, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
+      }
+    },
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="less">
+@import "assets/styles/mixin";
+
+.custom-table {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+
+  .check-data-info {
+    height: 100%;
+    width: 100%;
+
+    .table-info {
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+
+      .table-header {
+        position: sticky;
+        top: 0;
+        height: 30px;
+        white-space: nowrap;
+        background-color: #063367;
+
+        .table-header-item {
+          background-color: rgba(35, 140, 255, 0.2);
+          display: inline-block;
+          font-family: MicrosoftYaHei-Bold;
+          font-size: 14px;
+          color: #37EAFF;
+          letter-spacing: 0;
+          text-align: center;
+          line-height: 30px;
+          font-weight: 700;
+        }
+      }
+
+      .table-body {
+        height: calc(100% - 30px);
+
+        .seamless-scroll {
+          height: 100%;
+          overflow: hidden;
+        }
+
+        .table-item-body {
+          height: 30px;
+          margin-top: 10px;
+          width: 100%;
+          white-space: nowrap;
+
+          .data-content {
+            display: inline-block;
+            height: 30px;
+            background: rgba(21, 77, 160, 0.20);
+
+            ._content {
+              height: 100%;
+              width: 100%;
+              .flex-row;
+              justify-content: center;
+            }
+
+            .point-name {
+              .text-ellipsis;
+              .flex-row;
+
+              ._value {
+                font-family: MicrosoftYaHei-Bold;
+                font-size: 14px;
+                color: #FFFFFF;
+                letter-spacing: 0;
+                font-weight: 700;
+              }
+
+              ._unit {
+                font-family: MicrosoftYaHei-Bold;
+                font-size: 12px;
+                color: #FFFFFF;
+                letter-spacing: 0;
+                font-weight: 700;
+              }
+            }
+
+            ._icon {
+            }
+          }
+
+          .odds-ratio-up-icon {
+            width: 23px;
+            height: 25px;
+            background: url("assets/peakCoalImages/left/odds-ratio-up-icon.png") no-repeat;
+            padding-left: 20px;
+          }
+
+          .odds-ratio-reduction-icon {
+            width: 22px;
+            height: 26px;
+            background: url("assets/peakCoalImages/left/odds-ratio-reduction-icon.png") no-repeat;
+            padding-left: 20px;
+          }
+
+
+          .data-value {
+            .flex-row;
+            justify-content: center;
+
+            ._value {
+              font-family: MicrosoftYaHei-Bold;
+              font-size: 14px;
+              color: #FFFFFF;
+              letter-spacing: 0;
+              text-align: center;
+              font-weight: 700;
+            }
+          }
+        }
+      }
+    }
+  }
+
+}
+
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background-color: rgba(21, 77, 160, 0.20);;
+}
+
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 5px;
+  background-color: #d3dce6;
+}
+</style>
diff --git a/components/peak-coal-monitoring/PeakEnergyUse.vue b/components/peak-coal-monitoring/PeakEnergyUse.vue
new file mode 100644
index 0000000..709fb3e
--- /dev/null
+++ b/components/peak-coal-monitoring/PeakEnergyUse.vue
@@ -0,0 +1,167 @@
+<!--能源使用情况-->
+<template>
+  <div class="energy-use">
+    <div class="electricity-water-usage">
+      <div class="electricity-usage">
+        <div class="electricity-icon"></div>
+        <div class="electricity-info">
+          <div class="_title">今日用电[kwh]</div>
+          <div class="_value">
+            <Number :num="1244"/>
+          </div>
+        </div>
+      </div>
+      <div class="water-usage">
+        <div class="water-icon"></div>
+        <div class="water-info">
+          <div class="_title">今日用水[m³]</div>
+          <div class="_value">
+            <Number :num="185"/>
+          </div>
+        </div>
+      </div>
+    </div>
+    <peak-third-level-label :title="thirdLevelLabel"/>
+    <div class="electricity-water-trends">
+      <peak-energy-use-chart :data-source="electricityWaterDataSource"/>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import ElectricityWaterCharts from "@/components/charts/ElectricityWaterCharts";
+import PeakThirdLevelLabel from "@/components/peak-coal-monitoring/PeakThirdLevelLabel";
+import PeakEnergyUseChart from "@/components/charts/PeakEnergyUseChart";
+
+export default {
+  name: "PeakEnergyUse",
+  components: {PeakEnergyUseChart, PeakThirdLevelLabel, ElectricityWaterCharts},
+  data() {
+    return {
+      title: '能源使用情况',
+      thirdLevelLabel: '水电使用情况',
+      electricityWaterDataSource: [
+        {
+          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'
+        }
+      ],
+      electricityWaterTab: 0
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "assets/styles/mixin";
+
+.energy-use {
+  height: 100%;
+  width: 100%;
+  .flex-column;
+
+
+  .electricity-water-usage {
+    height: 80px;
+    .flex-row;
+    justify-content: space-between;
+
+    .electricity-usage {
+      .flex-row;
+
+      .electricity-icon {
+        width: 49px;
+        height: 49px;
+        .bg("~/assets/peakCoalMonitoring/right/electricity-icon.png");
+      }
+
+      .electricity-info {
+        padding-left: 20px;
+      }
+    }
+
+    .water-usage {
+      .flex-row;
+
+      .water-icon {
+        width: 49px;
+        height: 49px;
+        .bg("~/assets/peakCoalMonitoring/right/water-icon.png");
+      }
+
+      .water-info {
+        padding-left: 20px;
+      }
+    }
+
+    ._title {
+      font-family: MicrosoftYaHei;
+      font-size: 14px;
+      color: #6AC4FF;
+      letter-spacing: 2.26px;
+      font-weight: 400;
+    }
+
+    ._value {
+      font-family: YouSheBiaoTiHei;
+      font-size: 20px;
+      color: #FFFFFF;
+      letter-spacing: 5.64px;
+      font-weight: 400;
+    }
+  }
+
+  .electricity-water-trends {
+    flex: 1;
+    height: 0;
+  }
+
+}
+</style>
diff --git a/components/peak-coal-monitoring/PeakEnterpriseOperations.vue b/components/peak-coal-monitoring/PeakEnterpriseOperations.vue
new file mode 100644
index 0000000..77bd300
--- /dev/null
+++ b/components/peak-coal-monitoring/PeakEnterpriseOperations.vue
@@ -0,0 +1,176 @@
+<!--企业运营情况-->
+<template>
+  <div class="enterprise-operations">
+    <div class="operational-value-info">
+      <div class="operational-value-item-info">
+        <div class="_title">氮气外供[m³]</div>
+        <div class="_value">
+          <Number :num="124"/>
+        </div>
+        <div class="_icon"></div>
+      </div>
+      <div class="operational-value-item-info">
+        <div class="_title">液化石油气[t]</div>
+        <div class="_value">
+          <Number :num="1123"/>
+        </div>
+        <div class="_icon"></div>
+      </div>
+      <div class="operational-value-item-info">
+        <div class="_title">氧气外供[m³]</div>
+        <div class="_value">
+          <Number :num="185"/>
+        </div>
+        <div class="_icon"></div>
+      </div>
+    </div>
+
+    <peak-third-level-label :title="thirdLevelLabel"/>
+
+    <div class="produce-trend-chart">
+      <peak-produce-trend-chart :data-source="produceTrendDataSource"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import ProduceTrendChart from "@/components/charts/ProduceTrendChart";
+import PeakThirdLevelLabel from "@/components/peak-coal-monitoring/PeakThirdLevelLabel";
+import PeakProduceTrendChart from "@/components/charts/PeakProduceTrendChart";
+
+export default {
+  name: "PeakEnterpriseOperations",
+  components: {PeakProduceTrendChart, PeakThirdLevelLabel, ProduceTrendChart},
+
+  data() {
+    return {
+      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
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "assets/styles/mixin";
+
+.enterprise-operations {
+  height: 100%;
+  width: 100%;
+  .flex-column;
+
+  .operational-value-info {
+    padding-top: 10px;
+    height: 100px;
+    display: flex;
+    flex-flow: row;
+    justify-content: space-between;
+
+    .operational-value-item-info {
+      position: relative;
+
+      ._title {
+        font-family: MicrosoftYaHei;
+        font-size: 14px;
+        color: #6AC4FF;
+        letter-spacing: 2.26px;
+        font-weight: 400;
+        text-align: center;
+      }
+
+      ._value {
+        font-family: YouSheBiaoTiHei;
+        font-size: 20px;
+        color: #FFFFFF;
+        letter-spacing: 5.64px;
+        font-weight: 400;
+        text-align: center;
+      }
+
+      ._icon {
+        position: absolute;
+        bottom: 10px;
+        width: 80px;
+        height: 48px;
+        left: 10px;
+        .bg("~/assets/peakCoalMonitoring/right/num-bottom-bg.png");
+      }
+    }
+  }
+
+  .produce-trend-chart {
+    flex: 1;
+    height: 0;
+
+  }
+}
+</style>
diff --git a/components/peak-coal-monitoring/PeakLatestWarning.vue b/components/peak-coal-monitoring/PeakLatestWarning.vue
new file mode 100644
index 0000000..05d8cc0
--- /dev/null
+++ b/components/peak-coal-monitoring/PeakLatestWarning.vue
@@ -0,0 +1,105 @@
+<!--最新预警-->
+<template>
+  <div class="latest-warning">
+    <div class="warning-data-list">
+      <vue-seamless-scroll
+        v-if="warningDataList.length"
+        ref="vueSeamless"
+        :data="warningDataList"
+        class="seamless-scroll"
+        :class-option="defaultOption"
+      >
+        <div v-for="item of warningDataList" :key="item.indexCode" class="event-item">
+          <peak-warning-info-item :data-item="item"/>
+        </div>
+      </vue-seamless-scroll>
+    </div>
+  </div>
+</template>
+
+<script>
+import vueSeamlessScroll from 'vue-seamless-scroll'
+import PeakWarningInfoItem from "@/components/peak-coal-monitoring/PeakWarningInfoItem";
+
+export default {
+  name: "PeakLatestWarning",
+  components: {PeakWarningInfoItem, vueSeamlessScroll},
+  data() {
+    return {
+      warningDataList: [
+        {
+          indexCode: '001',
+          snapImgUrl: 'https://img1.baidu.com/it/u=1579566612,4009913306&fm=253&fmt=auto&app=138&f=JPEG?w=693&h=417',
+          warningName: '区域入侵',
+          site: 'xxx地区西门',
+          warningTime: '2023-12-12 12:32:45',
+          state: 1
+        },
+        {
+          indexCode: '002',
+          snapImgUrl: 'https://img1.baidu.com/it/u=1579566612,4009913306&fm=253&fmt=auto&app=138&f=JPEG?w=693&h=417',
+          warningName: '区域入侵',
+          site: 'xxx地区西门',
+          warningTime: '2023-12-12 12:32:45',
+          state: 0
+        },
+        {
+          indexCode: '003',
+          snapImgUrl: 'https://img1.baidu.com/it/u=1579566612,4009913306&fm=253&fmt=auto&app=138&f=JPEG?w=693&h=417',
+          warningName: '区域入侵',
+          site: 'xxx地区西门',
+          warningTime: '2023-12-12 12:32:45',
+          state: 1
+        },
+        {
+          indexCode: '004',
+          snapImgUrl: 'https://img1.baidu.com/it/u=1579566612,4009913306&fm=253&fmt=auto&app=138&f=JPEG?w=693&h=417',
+          warningName: '区域入侵',
+          site: 'xxx地区西门',
+          warningTime: '2023-12-12 12:32:45',
+          state: 1
+        }
+      ]
+    }
+  },
+  computed: {
+    defaultOption() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
+      }
+    },
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="less">
+@import "assets/styles/mixin";
+
+.latest-warning {
+  height: 100%;
+  width: 100%;
+
+  .warning-data-list {
+    height: 100%;
+    padding-top: 20px;
+
+    .seamless-scroll {
+      height: 100%;
+      overflow: hidden;
+
+      .event-item {
+        margin-top: 20px;
+      }
+    }
+  }
+
+}
+</style>
diff --git a/components/peak-coal-monitoring/PeakSecondaryTitle.vue b/components/peak-coal-monitoring/PeakSecondaryTitle.vue
new file mode 100644
index 0000000..6bd7d09
--- /dev/null
+++ b/components/peak-coal-monitoring/PeakSecondaryTitle.vue
@@ -0,0 +1,62 @@
+<!--二级标题-->
+<template>
+  <div class="secondary-title">
+    <div class="_title">{{ title }}</div>
+    <div class="_right">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PeakSecondaryTitle",
+  props: {
+    longBg: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "assets/styles/mixin";
+
+.secondary-title {
+  width: 100%;
+  height: 41px;
+  .bg("~/assets/peakCoalMonitoring/common/title-bg.png");
+  .clear-fix;
+
+  ._title {
+    height: 100%;
+    line-height: 26px;
+    padding-left: 30px;
+    float: left;
+    font-family: AlimamaShuHeiTi-Bold;
+    font-size: 18px;
+    color: #D8F0FF;
+    letter-spacing: 3.04px;
+    text-shadow: 0 0 25px rgba(0, 145, 255, 0.50);
+    font-weight: 700;
+  }
+
+  ._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>
diff --git a/components/peak-coal-monitoring/PeakThirdLevelLabel.vue b/components/peak-coal-monitoring/PeakThirdLevelLabel.vue
new file mode 100644
index 0000000..257656f
--- /dev/null
+++ b/components/peak-coal-monitoring/PeakThirdLevelLabel.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: "PeakThirdLevelLabel",
+  props: {
+    longBg: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "assets/styles/mixin";
+
+.secondary-title {
+  width: 100%;
+  height: 16px;
+  .clear-fix;
+
+  ._icon {
+    width: 10px;
+    height: 16px;
+    .bg("~/assets/peakCoalMonitoring/right/charts-title-icon.png");
+    float: left;
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  ._title {
+    height: 100%;
+    line-height: 16px;
+    padding-left: 20px;
+    float: left;
+    font-family: PingFangSC-Medium;
+    font-size: 16px;
+    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>
diff --git a/components/peak-coal-monitoring/PeakWarningInfoItem.vue b/components/peak-coal-monitoring/PeakWarningInfoItem.vue
new file mode 100644
index 0000000..33ccc65
--- /dev/null
+++ b/components/peak-coal-monitoring/PeakWarningInfoItem.vue
@@ -0,0 +1,138 @@
+<!--预警数据卡片-->
+<template>
+  <div class="warning-data-card">
+    <div class="warning-state">
+      {{ warningStateValue }}
+    </div>
+    <div class="snap-img">
+      <img :src="dataItem.snapImgUrl" v-if="dataItem.snapImgUrl">
+      <img :src="noData" v-else>
+    </div>
+    <div class="warning-data-info">
+      <div class="warning-name" :title="dataItem.warningName">{{ dataItem.warningName }}</div>
+      <div class="warning-site-time">
+        <div class="site-icon"></div>
+        <div class="_value" :title="dataItem.site">{{ dataItem.site }}</div>
+      </div>
+      <div class="warning-site-time">
+        <div class="warning-time-icon"></div>
+        <div class="_value" :title="dataItem.warningTime">{{ dataItem.warningTime }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import noData from 'assets/peakCoalImages/common/no-data.png'
+
+export default {
+  name: "PeakWarningInfoItem",
+  props: {
+    dataItem: {
+      type: Object,
+      default: () => {
+      }
+    }
+  },
+  data() {
+    return {
+      noData
+    }
+  },
+  computed: {
+    warningStateValue() {
+      if (this.dataItem.state === 1) {
+        return '代研判'
+      } else if (this.dataItem.state === 0) {
+        return '待审批'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "assets/styles/mixin";
+
+.warning-data-card {
+  height: 78px;
+  width: 415px;
+  .bg("~/assets/peakCoalImages/right/warning-card-bg.png");
+  padding-left: 10px;
+  position: relative;
+  .flex-row;
+
+  .snap-img {
+    width: 93px;
+    height: 66px;
+
+    img {
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  .warning-data-info {
+    height:100%;
+    width: 0;
+    flex: 1;
+    padding-left: 20px;
+    .flex-column;
+    justify-content: space-around;
+
+    .warning-name {
+      width: 100%;
+      font-family: MicrosoftYaHei-Bold;
+      font-size: 14px;
+      color: #F6B545;
+      letter-spacing: 0;
+      font-weight: 700;
+      .text-ellipsis;
+    }
+
+    .warning-site-time {
+      width: 100%;
+      .flex-row;
+
+      .site-icon {
+        width: 10px;
+        height: 10px;
+        .bg("~/assets/peakCoalImages/right/warning-site-icon.png");
+      }
+
+      .warning-time-icon {
+        width: 10px;
+        height: 10px;
+        .bg("~/assets/peakCoalImages/right/warning-time-icon.png");
+
+      }
+
+      ._value {
+        width: calc(100% - 26px);
+        padding-left: 10px;
+        font-family: MicrosoftYaHei;
+        font-size: 14px;
+        color: rgba(202, 244, 255, 0.9);
+        font-weight: 400;
+        .text-ellipsis;
+      }
+    }
+  }
+
+  .warning-state {
+    width: 60px;
+    height: 20px;
+    position: absolute;
+    right: 0px;
+    top: 10px;
+    font-family: PingFangSC-Semibold;
+    font-size: 12px;
+    color: #B8D3F1;
+    letter-spacing: 0;
+    text-align: center;
+    line-height: 20px;
+    font-weight: 600;
+  }
+
+}
+</style>
diff --git a/components/peak-coal-monitoring/PeakWarningStatistics.vue b/components/peak-coal-monitoring/PeakWarningStatistics.vue
new file mode 100644
index 0000000..51e199e
--- /dev/null
+++ b/components/peak-coal-monitoring/PeakWarningStatistics.vue
@@ -0,0 +1,115 @@
+<!--智能预警统计-->
+<template>
+  <div class="warning-statistics">
+    <div class="warning-total-info">
+      <div class="warning-data">
+        <div class="warning-icon"></div>
+        <div class="_title">报警总数</div>
+        <div class="_value">
+          <Number :num="286"/>
+        </div>
+      </div>
+    </div>
+
+    <peak-third-level-label :title="warningTypeTitle"/>
+
+    <div class="warning-type-pie">
+      <div class="_bg"></div>
+      <peak-warning-type-chart :data-source="warningTypeDataSource"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import WarningTypeChart from "@/components/charts/WarningTypeChart";
+import PeakWarningTypeChart from "@/components/charts/PeakWarningTypeChart";
+import PeakThirdLevelLabel from "@/components/peak-coal-monitoring/PeakThirdLevelLabel";
+
+export default {
+  name: "PeakWarningStatistics",
+  components: {PeakThirdLevelLabel, PeakWarningTypeChart, WarningTypeChart},
+  data() {
+    return {
+      warningTypeTitle: '报警类型分布',
+      warningTypeDataSource: [
+        {
+          name: '断电掉线',
+          value: 214,
+          rate: '38%'
+        },
+        {
+          name: '区域入侵',
+          value: 342,
+          rate: '32%'
+        },
+        {
+          name: '污染超标',
+          value: 12,
+          rate: '30%'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "assets/styles/mixin";
+
+.warning-statistics {
+  height: 100%;
+  width: 100%;
+  .flex-column;
+
+  .warning-total-info {
+    height: 60px;
+    .flex-row;
+    margin-bottom: 20px;
+    .warning-data {
+      width: 100%;
+      height: 100%;
+      background: rgba(1, 120, 198, 0.30);
+      .flex-row;
+      justify-content: space-around;
+
+      .warning-icon {
+        width: 60px;
+        height: 40px;
+        .bg("~/assets/peakCoalImages/right/warning-icon.png");
+      }
+
+      ._title {
+        font-family: MicrosoftYaHei;
+        font-size: 14px;
+        color: #6AC4FF;
+        letter-spacing: 2.26px;
+        font-weight: 400;
+      }
+
+      ._value {
+        font-family: YouSheBiaoTiHei;
+        font-size:20px;
+        color: #FFFFFF;
+        letter-spacing: 5.64px;
+        font-weight: 400;
+      }
+    }
+  }
+
+  .warning-type-pie {
+    flex: 1;
+    height: 0;
+    position: relative;
+
+    ._bg {
+      position: absolute;
+      left: 26px;
+      top: 24px;
+      width: 120px;
+      height: 120px;
+      background: url("~/assets/peakCoalImages/right/warning-type-pie-bg.png") no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}
+</style>
diff --git a/components/peak-coal-monitoring/PollutionInformation.vue b/components/peak-coal-monitoring/PollutionInformation.vue
new file mode 100644
index 0000000..ccd0652
--- /dev/null
+++ b/components/peak-coal-monitoring/PollutionInformation.vue
@@ -0,0 +1,26 @@
+<template>
+<div class="pollution-information">
+  <peak-secondary-title :title="title"/>
+</div>
+</template>
+
+<script>
+import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
+export default {
+  name: "PollutionInformation",
+  components: {PeakSecondaryTitle},
+  data(){
+    return{
+      title: '污染物信息总览'
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "assets/styles/mixin";
+.pollution-information{
+  height: 100%;
+  width: 100%;
+}
+</style>
diff --git a/pages/peak-coal-monitoring/PeakCoalMonitoring.vue b/pages/peak-coal-monitoring/PeakCoalMonitoring.vue
index 6849771..875b788 100644
--- a/pages/peak-coal-monitoring/PeakCoalMonitoring.vue
+++ b/pages/peak-coal-monitoring/PeakCoalMonitoring.vue
@@ -1,13 +1,55 @@
 <!--峰煤监控系统-->
 <template>
   <div class="peak-coal-monitoring">
-    <div class="header-content"></div>
+
+    <div class="center-panel">
+
+    </div>
+
+    <div class="header-panel">
+      <div class="header-content"></div>
+    </div>
+
+
+    <div class="left-panel">
+      <div class="atmospheric-module-module">
+        <atmospheric-module />
+      </div>
+      <div class="pollution-information-module">
+        <pollution-information/>
+      </div>
+      <div class="monitor-data-module">
+        <monitor-data/>
+      </div>
+    </div>
+
+    <div class="right-panel">
+      <div class="energy-profile-module">
+        <energy-profile/>
+      </div>
+      <div class="device-overview-module">
+        <device-overview/>
+      </div>
+      <div class="alarm-overview-module">
+        <alarm-overview/>
+      </div>
+    </div>
+
+
+    <div class="footer-panel"></div>
   </div>
 </template>
 
 <script>
+import AtmosphericModule from "@/components/peak-coal-monitoring/AtmosphericModule";
+import PollutionInformation from "@/components/peak-coal-monitoring/PollutionInformation";
+import MonitorData from "@/components/peak-coal-monitoring/MonitorData";
+import EnergyProfile from "@/components/peak-coal-monitoring/EnergyProfile";
+import DeviceOverview from "@/components/peak-coal-monitoring/DeviceOverview";
+import AlarmOverview from "@/components/peak-coal-monitoring/AlarmOverview";
 export default {
-  name: "PeakCoalMonitoring"
+  name: "PeakCoalMonitoring",
+  components: {AlarmOverview, DeviceOverview, EnergyProfile, MonitorData, PollutionInformation, AtmosphericModule}
 }
 </script>
 
@@ -16,6 +58,7 @@ body, html, #__nuxt, #__layout {
   width: 100%;
   height: 100%;
   overflow: hidden;
+  background: #09151F;
 }
 
 .list-enter-active, .list-leave-active {
@@ -37,14 +80,90 @@ body, html, #__nuxt, #__layout {
   width: 100%;
   height: 100%;
   position: relative;
-  .header-content{
+
+  .header-panel {
     position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
     width: 100%;
-    height: 80px;
-    background: url("~/assets/peakCoalMonitoring/header/header-bg.png") no-repeat center center;
-    background-size: 1000px 80px;
+    height: 160px;
+    display: flex;
+    flex-flow: row;
+    justify-content: center;
+    background: url("~/assets/peakCoalMonitoring/header/header-shadow.png") no-repeat;
+    background-size: 100% 100%;
+
+    .header-content {
+      height: 360px;
+      width: 100%;
+      background: url("~/assets/peakCoalMonitoring/header/header-bg.png") no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      top: -123px;
+    }
+  }
+
+  .left-panel {
+    width: 430px;
+    position: absolute;
+    left: 20px;
+    height: 960px;
+    top: 50%;
+    transform: translateY(-50%);
+    .flex-column;
+
+    .atmospheric-module-module{
+      height: 336px;
+      width: 100%;
+    }
+
+    .pollution-information-module{
+      height: 260px;
+      width: 100%;
+    }
+
+    .monitor-data-module{
+      flex: 1;
+      height: 0;
+      width: 100%;
+    }
+  }
+
+  .right-panel {
+    width: 430px;
+    position: absolute;
+    right: 20px;
+    height: 960px;
+    top: 50%;
+    transform: translateY(-50%);
+    .flex-column;
+    .energy-profile-module{
+      height: 336px;
+      width: 100%;
+    }
+    .device-overview-module{
+      height: 260px;
+      width: 100%;
+    }
+    .alarm-overview-module{
+      flex: 1;
+      height: 0;
+      width: 100%;
+    }
+  }
+
+  .center-panel{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+  }
+
+  .footer-panel{
+    width: 100%;
+    height: 50px;
+    background: url("~/assets/peakCoalMonitoring/footer/footer-bg.png") no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    bottom: -6px;
   }
 }
 </style>