123123

components/BFC.vue

@@ -0,0 +1,96 @@
+<!--
+* @Description: Description
+* @ComponentName: BFC
+* @Author: wangzhigang11
+* @Date: 2023-05-10 18:59
+-->
+<template>
+  <div class="BFC">
+    <div v-if="showLeft" class="left" :style="curStyle">
+      <slot name="left"></slot>
+    </div>
+    <div v-if="showRight" class="right" :style="curStyle">
+      <slot name="right"></slot>
+    </div>
+    <div v-if="showCenter" class="center" :style="curStyle">
+      <slot name="center"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import {getSize} from "@/utils/tools";
+
+  export default {
+    name: 'BFC',
+    components: {},
+    mixins: [],
+    inject: [],
+    provide() {
+      return {
+        BFC: this
+      }
+    },
+    props: {
+      height: {
+        type: [Number, String],
+        default: '100%'
+      }
+    },
+    data() {
+      return {}
+    },
+    computed: {
+      curStyle () {
+        return {
+          height: getSize(this.height)
+        }
+      },
+      showLeft () {
+        const left = this.$slots.left
+        return left && left.length > 0
+      },
+      showRight () {
+        const right = this.$slots.right
+        return right && right.length > 0
+      },
+      showCenter () {
+        const center = this.$slots.center
+        return center && center.length > 0
+      }
+    },
+    watch: {},
+    created() {
+    },
+    beforeDestroy() {
+    },
+    mounted() {
+    },
+    methods: {},
+  }
+</script>
+
+<style scoped lang="less">
+@import "assets/styles/mixin";
+  .BFC {
+    width: 100%;
+    height: 100%;
+    .clear-fix;
+    pointer-events: none;
+    .left {
+      float: left;
+      .clear-fix;
+      pointer-events: auto;
+    }
+    .right {
+      float: right;
+      .clear-fix;
+      pointer-events: auto;
+    }
+    .center {
+      overflow: hidden;
+      .clear-fix;
+    }
+  }
+
+</style>

components/FlexCenter.vue

@@ -0,0 +1,59 @@
+<!--
+* @Description: Description
+* @ComponentName: FlexCol
+* @Author: wangzhigang11
+* @Date: 2023-05-10 13:42
+-->
+<template>
+  <div class="FlexCenter" :style="{height: cHeight}">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import {getSize} from "@/utils/tools";
+  export default {
+    name: 'FlexCenter',
+    components: {},
+    mixins: [],
+    inject: [],
+    provide() {
+      return {
+        FlexCol: this
+      }
+    },
+    props: {
+      height: {
+        type: String,
+        default: ''
+      }
+    },
+    data() {
+      return {}
+    },
+    computed: {
+      cHeight () {
+        return getSize(this.height)
+      }
+    },
+    watch: {},
+    created() {
+    },
+    beforeDestroy() {
+    },
+    mounted() {
+    },
+    methods: {},
+  }
+</script>
+
+<style scoped lang="less">
+@import "assets/styles/mixin";
+  .FlexCenter {
+    width: 100%;
+    height: 100%;
+    .flex-row;
+    justify-content: center;
+    align-items: center;
+  }
+</style>

components/FlexCol.vue

@@ -0,0 +1,73 @@
+<!--
+* @Description: Description
+* @ComponentName: FlexCol
+* @Author: wangzhigang11
+* @Date: 2023-05-10 13:42
+-->
+<template>
+  <div class="FlexCol" :style="curStyle">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import {getSize} from "@/utils/tools";
+
+  export default {
+    name: 'FlexCol',
+    components: {},
+    mixins: [],
+    inject: [],
+    provide() {
+      return {
+        FlexCol: this
+      }
+    },
+    props: {
+      width: {
+        type: [Number, String],
+        default: 'auto'
+      },
+      paddingTop: {
+        type: [Number, String],
+        default: '0'
+      }
+    },
+    data() {
+      return {}
+    },
+    computed: {
+      curStyle () {
+        if (this.width === 'auto') {
+          return {
+            flex: 1,
+            paddingTop: getSize(this.paddingTop)
+          }
+        }
+        return {
+          width: getSize(this.width),
+          paddingTop: getSize(this.paddingTop)
+        }
+      }
+    },
+    watch: {},
+    created() {
+    },
+    beforeDestroy() {
+    },
+    mounted() {
+    },
+    methods: {},
+  }
+</script>
+
+<style scoped lang="less">
+  .FlexCol {
+    height: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+</style>

components/FlexRow.vue

@@ -0,0 +1,59 @@
+<!--
+* @Description: Description
+* @ComponentName: FlexCol
+* @Author: wangzhigang11
+* @Date: 2023-05-10 13:42
+-->
+<template>
+  <div class="FlexRow" :style="{height: cHeight}">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import {getSize} from "@/utils/tools";
+  export default {
+    name: 'FlexRow',
+    components: {},
+    mixins: [],
+    inject: [],
+    provide() {
+      return {
+        FlexCol: this
+      }
+    },
+    props: {
+      height: {
+        type: String,
+        default: ''
+      }
+    },
+    data() {
+      return {}
+    },
+    computed: {
+      cHeight () {
+        return getSize(this.height)
+      }
+    },
+    watch: {},
+    created() {
+    },
+    beforeDestroy() {
+    },
+    mounted() {
+    },
+    methods: {},
+  }
+</script>
+
+<style scoped lang="less">
+@import "assets/styles/mixin";
+  .FlexRow {
+    width: 100%;
+    height: 100%;
+    .flex-row;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>

components/Map.vue

@@ -46,6 +46,7 @@ export default {
         this.$http.get('http://101.43.201.20:5000/api/Home/view').then(({ data }) => {
           win.document.title = data.home.title
           this.setTitle(data.home.title)
+          this.setInfo(data)
           this.initMap(data.home.center)
         })
       }
@@ -70,7 +71,7 @@ export default {
     })
   },
   methods: {
-    ...mapActions('system', ['setTitle']),
+    ...mapActions('system', ['setTitle', 'setInfo']),
     //创建三维地球场景
     initMap (center) {
       const { lon, lat } = center

components/ModuleContent.vue

@@ -0,0 +1,107 @@
+<!--
+* @Description: 内容
+* @ComponentName: ModuleContent
+* @Author: wangzhigang11
+* @Date: 2023-05-06 18:30
+-->
+<template>
+  <div class="Content " :style="curStyle">
+    <div class="content-box" :style="{padding}" :class="{ noneEvent }">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import {getSize} from "@/utils/tools";
+  export default {
+    name: 'ModuleContent',
+    components: {},
+    mixins: [],
+    inject: [],
+    provide() {
+      return {
+        Content: this
+      }
+    },
+    props: {
+      noneEvent: {
+        type: Boolean,
+        default: false
+      },
+      height: {
+        type: [Number, String],
+        default: 'auto'
+      },
+      scroll: {
+        type: Boolean,
+        default: true
+      },
+      padding: {
+        type: String,
+        default: '20px 50px'
+      },
+     unShowBackground: {
+        type: Boolean,
+        default: true
+      },
+      border: {
+        type: Boolean,
+        default: true
+      }
+    },
+    data() {
+      return {}
+    },
+    computed: {
+      curStyle () {
+        if (this.height === 'auto') {
+          return {
+            flex: 1
+          }
+        }
+        return {
+          height: getSize(this.height)
+        }
+      }
+    },
+    watch: {},
+    created() {
+    },
+    beforeDestroy() {
+    },
+    mounted() {
+    },
+    methods: {},
+  }
+</script>
+
+<style scoped lang="less">
+@import "assets/styles/mixin";
+  .Content {
+    width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    position: relative;
+    pointer-events: none;
+    .content-border {
+
+    }
+    .content-header {
+    }
+
+    .content-body {
+    }
+    .content-box {
+      height: 100%;
+      @include clearfix;
+      position: relative;
+      padding: 8px;
+      box-sizing: border-box;
+      pointer-events: auto;
+      &.noneEvent {
+        pointer-events: none;
+      }
+    }
+  }
+</style>

components/NewBg.vue

@@ -0,0 +1,30 @@
+<!--
+* @Description: 内容
+* @ComponentName: ModuleContent
+* @Author: wangzhigang11
+* @Date: 2023-05-06 18:30
+-->
+<template>
+  <div class="bg">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'NewBg'
+  }
+</script>
+
+<style scoped lang="less">
+@import "assets/styles/mixin";
+  .bg {
+    width: 100%;
+    box-sizing: border-box;
+    height: 100%;
+    box-sizing: border-box;
+    background: url('~/assets/images/new/大背景.png') center  no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+  }
+</style>

components/charts/AirQualityTrendCharts.vue

@@ -92,8 +92,8 @@ export default {
       let option = {
         color: color,
         legend: {
-          top: 20,
-          left: '30%',
+          top: 10,
+          left: 'center',
           itemWidth: 11,
           itemHeight: 11,
           icon: 'circle',
@@ -105,10 +105,13 @@ export default {
         },
         tooltip: {
           trigger: 'axis',
+          appendToBody: true
         },
         grid: {
+          left: 10,
+          right: 5,
           top: 50,
-          bottom: 10,
+          bottom: 5,
           containLabel: true,
         },
         xAxis: [

components/charts/PeakWarningTypeChart2.vue

@@ -0,0 +1,136 @@
+<!--预警类型分布饼图-->
+<template>
+  <div id="charts" ref="charts">
+
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import {EleResize} from '@/utils/esresize';
+
+export default {
+  name: 'PeakWarningTypeChart2',
+  props: {
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    color: {
+      type: Array,
+      default: () => [
+        '#F8F661',
+        '#61F8F6',
+        '#1872FF',
+        'rgba(173,122,255,1)',
+        'rgba(253,189,0,1)'
+      ]
+    }
+  },
+  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)','rgba(173,122,255,0.2)','rgba(253,189,0,0.2)']
+      const pieData1 = [];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const gap = (1 * sum) / 100;
+      const gapData = {
+        name: '',
+        value: gap,
+        itemStyle: {
+          color: 'transparent',
+        },
+      };
+      //图标位置显示
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+          itemStyle: {
+            borderRadius: 0,
+          },
+        });
+        pieData1.push(gapData);
+
+      }
+
+      let option = {
+        tooltip: {
+          show: false,
+          backgroundColor: 'rgba(0, 0, 0,.8)',
+          textStyle: {
+            color: '#fff',
+          },
+          appendToBody: true
+        },
+        legend: {
+          show: false
+        },
+        grid: {
+          top: 10,
+          right: 0,
+          bottom: 0,
+          left: 0,
+        },
+        color: colorList,
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            roundCap: true,
+            radius: ['70%', '90%'],
+            center: ['50%', '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>

components/peak-coal-monitoring/PeakCustomTable2.vue

@@ -0,0 +1,258 @@
+<!--自定义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" v-if="dataIndex.dataIndex !== 'operation'">{{ item[dataIndex.dataIndex] }}</div>
+                  <div class="_operation" v-else @click="viewDetail(item)">详情</div>
+                  <div class="_unit" v-if="dataIndex.dataUnit">{{ item[dataIndex.dataUnit] }}</div>
+                </div>
+              </div>
+
+            </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
+    },
+    limitMoveNum: {
+      type: Number,
+      default: 9
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    defaultOption() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: this.limitMoveNum, // 开始无缝滚动的数据量 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: {
+    viewDetail(val){
+      console.log('val:',val)
+    }
+  }
+}
+</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 {
+      min-width: 100%;
+      height: 100%;
+      overflow: auto;
+
+      .table-header {
+        position: sticky;
+        top: 0;
+        height: 40px;
+        opacity: 1;
+        background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
+        line-height: 40px;
+        word-break: keep-all;
+
+        .table-header-item {
+          display: inline-block;
+          font-family: MicrosoftYaHei-Bold;
+          /** 文本1 */
+          font-size: 16px;
+          font-weight: 400;
+          letter-spacing: 0px;
+          line-height: 40px;
+          color: rgba(255, 255, 255, 1);
+          text-align: center;
+          vertical-align: top;
+
+        }
+      }
+
+      .table-body {
+        height: calc(100% - 30px);
+
+        .seamless-scroll {
+          height: 100%;
+          overflow: hidden;
+        }
+
+        .table-item-body {
+          margin-top: 10px;
+          width: 100%;
+          white-space: nowrap;
+          height: 30px;
+          opacity: 1;
+          background: rgba(255, 255, 255, 0.01);
+          box-shadow: 0px 1px 0px  rgba(29, 198, 247, 0.2);
+          line-height: 48px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .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;
+              }
+
+              ._operation{
+                font-family: MicrosoftYaHei-Bold;
+                font-size: 14px;
+                color: #FFFFFF;
+                letter-spacing: 0;
+                font-weight: 700;
+                cursor: pointer;
+              }
+
+              ._unit {
+                font-family: MicrosoftYaHei-Bold;
+                font-size: 12px;
+                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>

components/peak-coal-monitoring/PollutionInformation2.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="pollution-information">
+    <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";
+import {mapState} from "vuex";
+
+export default {
+  name: "PollutionInformation2",
+  components: {PeakSecondaryTitle},
+  data() {
+    return {
+      title: '污染物信息总览'
+    }
+  },
+  computed: {
+    ...mapState({
+      dataSource: state => (state.system.info?.ariQuality || []).map(item => {
+        const maplevel = {
+          '优': 1,
+          '持平': 2,
+          '差': 3,
+        }
+        return {
+          pollutionName: item.key,
+          pollutionValue: item.val,
+          pollutionUnit: '',
+          standardValue: item.standard,
+          state: maplevel[item.level]
+        }
+      }).flat(Infinity)
+    })
+  },
+  methods:{
+    getPollutionIcon(val){
+      if(val === 1){
+        return 'you-icon'
+      } else if(val === 2){
+        return 'chi-ping-icon'
+      } else {
+        return 'cha-icon'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "assets/styles/mixin";
+
+.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: 60px;
+      width: 170px;
+      .flex-row;
+      &:nth-child(2n){
+        margin-left: 20px;
+      }
+      .pollution-icon{
+        width: 50px;
+        height: 50px;
+      }
+
+      .you-icon{
+        background: url("~/assets/peakCoalMonitoring/left/pollution-you.png") center no-repeat;
+        background-size: 100% 100%;
+      }
+
+      .chi-ping-icon{
+        background: url("~/assets/peakCoalMonitoring/left/pollution-chi-ping.png") center no-repeat;
+        background-size: 100% 100%;
+      }
+
+      .cha-icon{
+        background: url("~/assets/peakCoalMonitoring/left/pollution-cha.png") center no-repeat;
+        background-size: 100% 100%;
+      }
+
+      .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: 16px;
+            color: #24DCF7;
+            letter-spacing: 2px;
+            font-weight: 400;
+            text-align: right;
+            .text-ellipsis;
+          }
+          ._title{
+            font-family: MicrosoftYaHei;
+            font-size: 12px;
+            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: 2px;
+            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>

components/smallCommon/CusButton.vue

@@ -0,0 +1,61 @@
+
+
+<template>
+  <div class="cusbutton" @click="$emit('click')" :class="{ small, selected }">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: "CusButton",
+  props: {
+    small: {
+      type: Boolean,
+      default: false
+    },
+    selected: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+  .cusbutton {
+    display: inline-block;
+    border-radius: 4px;
+    background: linear-gradient(180deg, rgba(26, 94, 232, 0.8) 0%, rgba(61, 198, 239, 0.4) 49.3%, rgba(29, 242, 228, 0.8) 100%);
+    border: 1px solid rgba(29, 228, 242, 0.6);
+    box-shadow: 0px 4px 4px  rgba(3, 167, 255, 0.3);
+    padding: 10px 15px;
+    word-break: keep-all;
+    cursor: pointer;
+
+    /** 文本1 */
+    font-size: 18px;
+    font-weight: 500;
+    letter-spacing: 0px;
+    line-height: 26.06px;
+    color: rgba(255, 255, 255, 1);
+    text-align: left;
+    vertical-align: top;
+    &.small {
+      padding: 2px 10px;
+      background: linear-gradient(180deg, rgba(188, 216, 247, 0.4) 0%, rgba(152, 217, 237, 0.15) 48.61%, rgba(156, 255, 248, 0.4) 100%);
+      border: 1px solid rgba(29, 228, 242, 0.6);
+      box-shadow: 0px 4px 4px  rgba(190, 244, 247, 0.2);
+      color: rgba(255, 255, 255, 1);
+      &:hover {
+        background: linear-gradient(180deg, rgba(26, 94, 232, 0.8) 0%, rgba(61, 198, 239, 0.4) 49.3%, rgba(29, 242, 228, 0.8) 100%);
+        border: 1px solid rgba(29, 228, 242, 0.6);
+        box-shadow: 0px 4px 4px  rgba(3, 167, 255, 0.3);
+      }
+      &.selected {
+        background: linear-gradient(180deg, rgba(26, 94, 232, 0.8) 0%, rgba(61, 198, 239, 0.4) 49.3%, rgba(29, 242, 228, 0.8) 100%);
+        border: 1px solid rgba(29, 228, 242, 0.6);
+        box-shadow: 0px 4px 4px  rgba(3, 167, 255, 0.3);
+      }
+
+    }
+  }
+</style>

components/smallCommon/CusButton2.vue

@@ -0,0 +1,57 @@
+
+
+<template>
+  <div class="cusbutton" @click="$emit('click')" :class="{ flex, selected }">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: "CusButton2",
+  props: {
+    flex: {
+      type: Boolean,
+      default: false
+    },
+    selected: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+  .cusbutton {
+    display: inline-block;
+    background: rgba(19, 66, 97, 1);
+    border: 1px solid rgba(0, 0, 0, 1);
+    padding: 10px 13px;
+
+    /** 文本1 */
+    font-size: 16px;
+    font-weight: 400;
+    letter-spacing: 0px;
+    color: rgba(255, 255, 255, 1);
+    text-align: center;
+    vertical-align: top;
+    cursor: pointer;
+    &.flex {
+      flex: 1;
+    }
+
+    &.selected {
+      background: linear-gradient(180deg, rgba(24, 131, 201, 1) 0%, rgba(10, 64, 99, 1) 100%);
+
+
+    }
+
+    &:hover {
+      background: linear-gradient(180deg, rgba(24, 131, 201, 1) 0%, rgba(10, 64, 99, 1) 100%);
+
+
+    }
+
+
+
+  }
+</style>

components/smallCommon/CusButton3.vue

@@ -0,0 +1,60 @@
+
+
+<template>
+  <div class="cusbutton" @click="$emit('click')" :class="{ flex, selected }">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: "CusButton3",
+  props: {
+    flex: {
+      type: Boolean,
+      default: false
+    },
+    selected: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+  .cusbutton {
+    display: inline-block;
+    border-radius: 2.56px;
+    border: 1.28px solid rgba(56, 159, 255, 1);
+    padding: 10px 13px;
+    /** 文本1 */
+    font-size: 16px;
+    font-weight: 400;
+    letter-spacing: 0px;
+    color: rgba(35, 209, 232, 1);
+    text-align: center;
+    vertical-align: top;
+    cursor: pointer;
+
+
+
+
+
+    &.flex {
+      flex: 1;
+    }
+
+    &.selected {
+      background: rgba(45, 205, 255, 1);
+      color:rgba(8, 37, 63, 1);
+
+    }
+
+    &:hover {
+      background: rgba(45, 205, 255, 1);
+      color:rgba(8, 37, 63, 1);
+    }
+
+
+
+  }
+</style>

components/smallCommon/CusButton4.vue

@@ -0,0 +1,59 @@
+
+
+<template>
+  <div class="cusbutton" @click="$emit('click')" :class="{ flex, selected }">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: "CusButton4",
+  props: {
+    flex: {
+      type: Boolean,
+      default: false
+    },
+    selected: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+  .cusbutton {
+    display: inline-block;
+    border-radius: 2.56px;
+    border: 2px solid rgba(24, 131, 201, 1);
+    padding:  0 20px;
+    /** 文本1 */
+    font-size: 12px;
+    font-weight: 400;
+    letter-spacing: 0px;
+    color: #fff;
+    text-align: center;
+    vertical-align: top;
+    cursor: pointer;
+    height: 20px;
+    line-height: 20px;
+
+
+    &.flex {
+      flex: 1;
+    }
+
+    &.selected {
+      background: rgba(24, 131, 201, 1);
+      color: #fff;
+
+    }
+
+    &:hover {
+      background: rgba(24, 131, 201, 1);
+      color: #fff;
+    }
+
+
+
+  }
+</style>

components/smallCommon/CusDesc.vue

@@ -0,0 +1,47 @@
+
+<template>
+  <div class="cusdesc">
+    <div class="desc" v-for="(col, index) in columns" :key="index">
+      <div class="desc-title">{{ col.title }}:</div>
+      <div class="desc-value">{{ data[col.key] }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CusDesc",
+  props: {
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    data: {
+      type: Object,
+      default: () => ({})
+    }
+  }
+}
+</script>
+
+
+<style scoped lang="less">
+  .cusdesc {
+    width: 100%;
+    /** 文本1 */
+    font-size: 16px;
+    font-weight: 400;
+    letter-spacing: 0px;
+    line-height: 23.17px;
+    color: rgba(255, 255, 255, 1);
+    text-align: left;
+    vertical-align: top;
+    .desc {
+      margin-top: 16px;
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+
+  }
+</style>

components/smallCommon/ModuleContent2.vue

@@ -0,0 +1,213 @@
+<!--
+* @Description: 内容
+* @ComponentName: ModuleContent
+* @Author: wangzhigang11
+* @Date: 2023-05-06 18:30
+-->
+<template>
+  <div class="Content " :style="curStyle">
+    <div class="content-header" :class="{ border }"></div>
+    <div class="content-body" :class="{ border }"></div>
+    <div class="content-box" :style="{padding, ...bgStyle}" :class="{ bg: isBg, bgStr, bgColor }">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import {getSize} from "@/utils/tools";
+import checkTypes from "@/utils/checkTypes";
+  export default {
+    name: 'ModuleContent2',
+    components: {},
+    mixins: [],
+    inject: [],
+    provide() {
+      return {
+        Content: this
+      }
+    },
+    props: {
+      height: {
+        type: [Number, String],
+        default: 'auto'
+      },
+      scroll: {
+        type: Boolean,
+        default: true
+      },
+      bg: {
+        type: [Boolean, String, Object],
+        default: false
+      },
+      bgStr: {
+        type: [Boolean, String, Object],
+        default: false
+      },
+      bgColor: {
+        type: [Boolean, String, Object],
+        default: false
+      },
+      padding: {
+        type: String,
+        default: ''
+      },
+     unShowBackground: {
+        type: Boolean,
+        default: true
+      },
+      border: {
+        type: Boolean,
+        default: true
+      }
+    },
+    data() {
+      return {}
+    },
+    computed: {
+      isBg () {
+        if (checkTypes.isString(this.bg)) {
+          return false
+        }
+        return this.bg
+      },
+      bgStyle () {
+        if (checkTypes.isString(this.bg)) {
+          return {
+            backgroundSize: '100% 100%',
+            border: '1px solid rgba(0, 64, 152, 1)'
+          }
+        }
+        if (checkTypes.isObject(this.bg)) {
+          return {
+            ...this.bg,
+            border: '1px solid rgba(0, 64, 152, 1)'
+          }
+        }
+        return {}
+      },
+      curStyle () {
+        if (this.height === 'auto') {
+          return {
+            flex: 1
+          }
+        }
+        return {
+          height: getSize(this.height)
+        }
+      }
+    },
+    watch: {},
+    created() {
+    },
+    beforeDestroy() {
+    },
+    mounted() {
+    },
+    methods: {},
+  }
+</script>
+
+<style scoped lang="less">
+@import "../../assets/styles/mixin";
+  .Content {
+    width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    position: relative;
+    box-sizing: border-box;
+    pointer-events: auto;
+    height: 100%;
+
+    .content-border {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      &.border {
+        border: 2px solid rgba(42, 207, 255, 1);
+      }
+    }
+
+
+    .content-header {
+      &.border {
+
+        &::before {
+          content: '';
+          position: absolute;
+          width: 15px;
+          height: 15px;
+          top: 0px;
+          left: 0px;
+          border-top: 2px solid rgba(42, 207, 255, 1);
+          border-left: 2px solid rgba(42, 207, 255, 1);
+          z-index: 2;
+          pointer-events: none;
+        }
+        &::after {
+          content: '';
+          position: absolute;
+          width: 15px;
+          height: 15px;
+          top:  0px;
+          right:  0px;
+          border-top: 2px solid rgba(42, 207, 255, 1);
+          border-right: 2px solid rgba(42, 207, 255, 1);
+          z-index: 2;
+          pointer-events: none;
+        }
+      }
+    }
+
+    .content-body {
+      &.border {
+        &::before {
+          content: '';
+          position: absolute;
+          width: 15px;
+          height: 15px;
+          bottom:  0px;
+          left:  0px;
+          border-bottom: 2px solid rgba(42, 207, 255, 1);
+          border-left: 2px solid rgba(42, 207, 255, 1);
+          z-index: 2;
+          pointer-events: none;
+        }
+        &::after {
+          content: '';
+          position: absolute;
+          width: 15px;
+          height: 15px;
+          bottom:  0px;
+          right:  0px;
+          border-bottom: 2px solid rgba(42, 207, 255, 1);
+          border-right: 2px solid rgba(42, 207, 255, 1);
+          z-index: 2;
+          pointer-events: none;
+        }
+      }
+    }
+    .content-box {
+      height: 100%;
+      .clear-fix;
+      position: relative;
+      padding: 20px;
+      box-sizing: border-box;
+      &.bg {
+        border: 1px solid rgba(0, 64, 152, 1);
+        &.bgStr {
+          background: url("~/assets/images/new/矩形 17.png") no-repeat;
+          background-size: 100% 100%;
+        }
+        &.bgColor {
+          background: linear-gradient(90deg, rgba(0, 107, 207, 0.08) 0%, rgba(0, 107, 207, 0.4) 52.25%, rgba(0, 128, 247, 0.08) 100%);
+        }
+
+      }
+
+
+    }
+  }
+</style>

components/smallCommon/ProgressDesc.vue

@@ -0,0 +1,108 @@
+
+
+<template>
+  <div class="progress">
+    <div class="progress-item" v-for="(item, index) in rate" :key="index">
+      <BFC>
+        <div class="percent" slot="right">
+          {{ item.val * 100 }}
+          <div class="unit">%</div>
+        </div>
+        <div class="info" slot="center">
+          <div class="bar">
+            <div class="bar-color">
+              <div class="bf" :style="{ width: item.val * 100 + '%' }"></div>
+            </div>
+          </div>
+          <div class="tit">
+            {{ item.key }}
+          </div>
+        </div>
+      </BFC>
+    </div>
+  </div>
+</template>
+<script>
+import BFC from "../BFC.vue";
+import { mapState } from 'vuex'
+export default {
+  name: "ProgressDesc",
+  components: {BFC},
+  computed: {
+    ...mapState({
+      info: state => state.system.info
+    }),
+    rate () {
+      return this.info?.rate || []
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+  .progress {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    width: 100%;
+    height: 100%;
+    .progress-item {
+      width: 50%;
+      height: 40px;
+      box-sizing: border-box;
+      padding: 0 4px;
+      .percent {
+        height: 40px;
+        line-height: 40px;
+        /** 文本1 */
+        font-size: 28px;
+        font-weight: 400;
+        letter-spacing: 0px;
+        color: rgba(255, 255, 255, 1);
+        word-break: keep-all;
+        margin-top: -10px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        .unit {
+          /** 文本1 */
+          font-size: 16px;
+          font-weight: 400;
+          letter-spacing: 0px;
+          line-height: 38.42px;
+          color: rgba(255, 255, 255, 1);
+          text-align: left;
+          vertical-align: top;
+        }
+      }
+      .tit {
+        /** 文本1 */
+        font-size: 16px;
+        font-weight: 400;
+        letter-spacing: 0px;
+        line-height: 21.95px;
+        color: rgba(64, 204, 151, 1);
+        text-align: left;
+        vertical-align: top;
+        margin-top: 5px;
+      }
+      .info {
+        height: 40px;
+        padding-right: 10px;
+        padding-top: 10px;
+        .bar {
+          height: 3px;
+          background: rgba(64, 204, 151, 0.3);
+          position: relative;
+          .bf {
+            position: absolute;
+            left: 0;
+            top: -1px;
+            height: 5px;
+            background: rgba(64, 204, 151, 1);          ;
+          }
+        }
+      }
+    }
+  }
+</style>

components/smallCommon/Split.vue

@@ -0,0 +1,27 @@
+<script>
+import {getSize} from "@/utils/tools";
+export default {
+  name: "Split",
+  props: {
+    height: {
+      type: [Number, String],
+      default: 0
+    }
+  },
+  computed: {
+    sh () {
+      return getSize(this.height)
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="split" :style="{ height: sh }"></div>
+</template>
+
+<style scoped lang="less">
+  .split {
+    width: 100%;
+  }
+</style>

components/smallCommon/SystemTitle.vue

@@ -0,0 +1,112 @@
+
+
+<template>
+  <div class="system-title">
+    <div class="header-content">
+      <div class="time"><a-icon type="clock-circle" style="margin-right: 10px;" />{{ time }}</div>
+      <div class="tq">{{ tq }}</div>
+      <p class="_title">{{ title }}一体化平台</p>
+    </div>
+  </div>
+</template>
+<script>
+import {mapState} from "vuex";
+import moment from "moment";
+export default {
+  name: "SystemTitle",
+  computed: {
+    ...mapState({
+      title: state => state.system.title,
+      info: state => state.system.info,
+    }),
+    tq () {
+      if (this.info) {
+        const weather = this.info?.weather || {}
+        return `${weather.location || ''}: ${weather.windDirection || ''};${weather.temperature || ''}℃`
+      }
+      return ''
+    }
+  },
+  data () {
+    return {
+      time: moment().format('YYYY-MM-DD HH:mm:ss'),
+    }
+  },
+  mounted() {
+    setInterval(() => {
+      this.time = moment().format('YYYY-MM-DD HH:mm:ss')
+    }, 1000)
+  }
+}
+</script>
+<style scoped lang="less">
+  .system-title {
+    width: 100%;
+    display: flex;
+    flex-flow: row;
+    justify-content: center;
+    background-size: 100% 100%;
+    pointer-events: auto;
+    z-index: 2;
+    .header-content {
+      width: 100%;
+      background: url("~/assets/images/new/标题.png") center top no-repeat;
+      background-size: 100% 100%;
+      height: 78px;
+      box-sizing: border-box;
+      padding-top: 5px;
+      position: relative;
+      .time {
+        position: absolute;
+        left: 20px;
+        top: 5px;
+        /** 文本1 */
+        font-size: 20px;
+        font-weight: 400;
+        letter-spacing: 0px;
+        line-height: 23.44px;
+        color: rgba(255, 255, 255, 1);
+        text-align: left;
+        vertical-align: top;
+      }
+      .tq {
+        position: absolute;
+        right:  20px;
+        top: 5px;
+        /** 文本1 */
+        font-size: 20px;
+        font-weight: 400;
+        letter-spacing: 0px;
+        line-height: 23.44px;
+        color: rgba(255, 255, 255, 1);
+        text-align: left;
+        vertical-align: top;
+      }
+      ._title{
+        width: 100%;
+        font-family: AlimamaShuHeiTi-Bold;
+        font-size: 25px;
+        color: #D8F0FF;
+        letter-spacing: 7.68px;
+        text-align: center;
+        text-shadow: 0 0 11px #000000;
+        font-weight: 700;
+        margin: 0;
+        &.sub {
+          font-size: 18px;
+        }
+
+      }
+      .subtitle {
+        width: 100%;
+        font-family: AlimamaShuHeiTi-Bold;
+        font-size: 16px;
+        color: #D8F0FF;
+        letter-spacing: 7.68px;
+        text-align: center;
+        text-shadow: 0 0 11px #000000;
+        font-weight: 700;
+      }
+    }
+  }
+</style>

components/smallCommon/Web2Title.vue

@@ -0,0 +1,29 @@
+
+
+<template>
+  <div class="web2tit">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: "Web2Title"
+}
+</script>
+<style scoped lang="less">
+  .web2tit {
+    width: 100%;
+    height: 46px;
+    background: linear-gradient(90deg, rgba(0, 107, 207, 0.4) 0%, rgba(0, 128, 247, 0.08) 100%);
+    border-left: 4px solid rgba(45, 205, 255, 1);
+    /** 文本1 */
+    font-size: 20px;
+    font-weight: 700;
+    letter-spacing: 0px;
+    color: rgba(255, 255, 255, 1);
+    text-align: left;
+    vertical-align: top;
+    padding-left: 20px;
+    line-height: 46px;
+  }
+</style>

components/smallCommon/Web3Title.vue

@@ -0,0 +1,58 @@
+
+
+<template>
+  <div class="web2tit">
+    <slot></slot>
+    <div class="action">
+      <slot name="action"></slot>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "Web3Title"
+}
+</script>
+<style scoped lang="less">
+ .web2tit {
+   width: 100%;
+   height: 48px;
+   line-height: 48px;
+   border-bottom: 1px solid rgba(255, 255, 255, 0.4);
+   /** 文本1 */
+   font-size: 16px;
+   font-weight: 500;
+   letter-spacing: 0px;
+   color: rgba(255, 255, 255, 1);
+   text-align: left;
+   vertical-align: top;
+   background: url("~/assets/images/new/标题12.png") no-repeat left center;
+   background-size: 10px 16px;
+   box-sizing: border-box;
+   padding-left: 20px;
+   position: relative;
+   &::after {
+     position: absolute;
+     bottom: -1px;
+     left: 0;
+     display: table;
+     content: ' ';
+     width: 120px;
+     height: 2px;
+     background: rgba(120, 240, 253, 1);
+
+   }
+
+   .action {
+     position: absolute;
+     right: 0;
+     bottom: 0;
+     display: flex;
+     justify-content: flex-end;
+     align-items: center;
+     flex-wrap: nowrap;
+     height: 48px;
+
+   }
+ }
+</style>

components/smallCommon/Web4Title.vue

@@ -0,0 +1,45 @@
+
+
+<template>
+  <div class="web2tit">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: "Web4Title"
+}
+</script>
+<style scoped lang="less">
+ .web2tit {
+   width: 100%;
+   height: 48px;
+   line-height: 48px;
+   border-bottom: 1px solid rgba(255, 255, 255, 0.4);
+   /** 文本1 */
+   font-size: 14px;
+   font-weight: 500;
+   letter-spacing: 0px;
+   color: rgba(255, 255, 255, 1);
+   text-align: left;
+   vertical-align: top;
+   background-size: 10px 16px;
+   box-sizing: border-box;
+   padding-left: 20px;
+   position: relative;
+   &::after {
+     position: absolute;
+     left: 0;
+     top: 50%;
+     transform: translateY(-50%);
+     display: table;
+     content: ' ';
+     width: 10px;
+     height: 10px;
+     opacity: 1;
+     border: 2px solid rgba(255, 255, 255, 1);
+     border-radius: 50%;
+
+   }
+ }
+</style>

components/smallCommon/butgroup.vue

@@ -0,0 +1,37 @@
+
+
+<template>
+  <div class="group" :class="{ bg }">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: "butgroup",
+  props: {
+    bg: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+  .group {
+    width: 100%;
+    text-align: center;
+    pointer-events: auto;
+    box-sizing: border-box;
+    > div {
+      margin-left: 24px;
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+    &.bg {
+      background: linear-gradient(90deg, rgba(0, 107, 207, 0) 0%, rgba(0, 107, 207, 0.08) 35%, rgba(0, 107, 207, 0.4) 50%, rgba(0, 107, 207, 0.08) 65%, rgba(0, 128, 247, 0) 100%);
+      padding: 16px 0;
+
+    }
+  }
+</style>

components/smallCommon/butgroup2.vue

@@ -0,0 +1,21 @@
+
+
+<template>
+  <div class="group">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: "butgroup2"
+}
+</script>
+<style scoped lang="less">
+  .group {
+    width: 100%;
+    text-align: center;
+    display: flex;
+    justify-content: space-around;
+    align-content: center;
+  }
+</style>

components/smallCommon/miaoshu.vue

@@ -0,0 +1,57 @@
+
+
+<template>
+  <div class="miaoshu">
+    <div class="tit">{{ title }}</div>
+    <div class="value" :style="{ color }">{{ value || 0 }}</div>
+  </div>
+</template>
+<script>
+export default {
+  name: "miaoshu",
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    color: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+.miaoshu {
+  text-align: center;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  .tit {
+    /** 文本1 */
+    font-size: 18px;
+    font-weight: 400;
+    letter-spacing: 0px;
+    line-height: 26.06px;
+    color: rgba(255, 255, 255, 1);
+    text-align: center;
+    vertical-align: middle;
+
+  }
+  .value {
+    /** 文本1 */
+    font-size: 40px;
+    font-weight: 700;
+    letter-spacing: 0px;
+    line-height: 46.88px;
+    text-align: center;
+    vertical-align: middle;
+  }
+
+}
+
+</style>

components/smallCommon/visualTable.vue

@@ -0,0 +1,13 @@
+<script>
+export default {
+  name: "visualTable"
+}
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="less">
+
+</style>

nuxt.config.js

@@ -36,9 +36,7 @@ export default {
   // Global CSS: https://go.nuxtjs.dev/config-css
   css: [
     'ant-design-vue/dist/antd.css',
-
-    '@/assets/styles/mixin.less',
-
+    '@/assets/styles/mixin.less'
   ],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins

pages/web1/index.vue

@@ -0,0 +1,529 @@
+<!--峰煤监控系统-->
+<template>
+  <new-bg>
+    <div class="center-panel">
+      <Map type="middle" @pointClick="pointClick" />
+    </div>
+    <flex-col class="main">
+      <system-title/>
+      <ModuleContent none-event padding="0px 20px 20px">
+        <BFC>
+          <flex-col slot="left" width="412">
+            <ModuleContent2 bg bg-color padding="20px">
+              <flex-col>
+                <web3-title>本市空气质量</web3-title>
+                <ModuleContent padding="0" height="210">
+                  <pollution-information/>
+                </ModuleContent>
+                <web3-title>治理设备在线率</web3-title>
+                <ModuleContent padding="20px 0" height="180">
+                  <ProgressDesc></ProgressDesc>
+                </ModuleContent>
+                <web3-title>厂区环境趋势</web3-title>
+                <ModuleContent padding="0" height="180">
+                  <air-quality-trend-charts :data-source="airQualityTrendDataSource"/>
+                </ModuleContent>
+                <web3-title>设备报警信息汇总</web3-title>
+                <ModuleContent padding="0">
+                  <peak-custom-table :table-title="columnsForTable" :data-source="dataSource" :limit-move-num="3"/>
+                </ModuleContent>
+              </flex-col>
+            </ModuleContent2>
+          </flex-col>
+          <flex-col slot="right" width="412">
+            <ModuleContent2 bg bg-color padding="20px">
+              <flex-col>
+                <web3-title>
+                  清洁运输比例
+                  <template slot="action">
+                    <butgroup2 style="height: 20px;line-height: 20px;">
+                      <cus-button4 @click="active = 'Yesterday'" :selected="active === 'Yesterday'">昨日</cus-button4>
+                      <cus-button4 @click="active = 'LastWeek'" :selected="active === 'LastWeek'">上周</cus-button4>
+                    </butgroup2>
+                  </template>
+                </web3-title>
+                <ModuleContent padding="0">
+                  <PeakWarningTypeChart2 :color="['rgb(0 255, 255)', 'transparent']" :data-source="pieData"></PeakWarningTypeChart2>
+                  <div class="c-title">
+                    <div class="t">{{ Math.round(pieData[0].value * 100) }}%</div>
+                    <div class="t2">运输比例</div>
+                  </div>
+                </ModuleContent>
+                <web4-title>日排放量</web4-title>
+                <ModuleContent padding="20px 0 0" height="140">
+                  <div class="pf">
+                    <div class="t">当前VOC的日排放量</div>
+                    <div class="v">{{ todaypf.voc || 0 }}mg/m3</div>
+                  </div><div class="pf">
+                  <div class="t">当前CEMS的日排放量</div>
+                  <div class="v">{{ todaypf.cems || 0 }}mg/m3</div>
+                </div>
+
+                </ModuleContent>
+                <web4-title>周排放量</web4-title>
+                <ModuleContent padding="0 ">
+                  <peak-custom-table :table-title="columns2ForTable" :data-source="weekData" :limit-move-num="3"/>
+                </ModuleContent>
+                <web3-title>设备超标报警</web3-title>
+                <ModuleContent padding="0 20px 20px">
+                </ModuleContent>
+              </flex-col>
+
+            </ModuleContent2>
+
+          </flex-col>
+          <div class="center" slot="center">
+            <butgroup :bg="false">
+              <cus-button small :selected="mapTab==='rl'" @click="mapTab = 'rl'">热力地图</cus-button>
+              <cus-button small :selected="mapTab==='wx'" @click="mapTab = 'wx'">卫星地图</cus-button>
+            </butgroup>
+
+
+            <butgroup class="real-data">
+              <cus-button>有组织</cus-button>
+              <cus-button>无组织</cus-button>
+              <cus-button>清洁运输</cus-button>
+              <cus-button>视频广场</cus-button>
+            </butgroup>
+          </div>
+        </BFC>
+      </ModuleContent>
+    </flex-col>
+  </new-bg>
+</template>
+
+<script>
+import AtmosphericModule from "@/components/peak-coal-monitoring/AtmosphericModule";
+import PollutionInformation from "@/components/peak-coal-monitoring/PollutionInformation2";
+import MonitorData from "@/components/peak-coal-monitoring/MonitorData";
+import MonitorData2 from "@/components/peak-coal-monitoring/MonitorData2";
+import EnergyProfile from "@/components/peak-coal-monitoring/EnergyProfile";
+import DeviceOverview from "@/components/peak-coal-monitoring/DeviceOverview";
+import AlarmOverview from "@/components/peak-coal-monitoring/AlarmOverview";
+import WZDialog from "@/components/WZDialog";
+import SDJCYDialog from "@/components/SDJCYDialog";
+import ZKZDialog from "@/components/ZKZDialog";
+import GBZDialog from "@/components/GBZDialog";
+import CEMSDialog from "@/components/CEMSDialog";
+import pointDialog from '@/components/PointDialog'
+import {mapState} from "vuex";
+import NewBg from "../../components/NewBg.vue";
+import BFC from "../../components/BFC.vue";
+import CusButton3 from "../../components/smallCommon/CusButton3.vue";
+import Butgroup from "../../components/smallCommon/butgroup.vue";
+import ModuleContent2 from "../../components/smallCommon/ModuleContent2.vue";
+import SystemTitle from "../../components/smallCommon/SystemTitle.vue";
+import ModuleContent from "../../components/ModuleContent.vue";
+import Split from "../../components/smallCommon/Split.vue";
+import FlexCol from "../../components/FlexCol.vue";
+import Web2Title from "../../components/smallCommon/Web2Title.vue";
+import Web3Title from "../../components/smallCommon/Web3Title.vue";
+import ProgressDesc from "../../components/smallCommon/ProgressDesc.vue";
+import Web4Title from "../../components/smallCommon/Web4Title.vue";
+import CusButton from "../../components/smallCommon/CusButton.vue";
+import AirQualityTrendCharts from "../../components/charts/AirQualityTrendCharts.vue";
+import PeakCustomTable from "../../components/peak-coal-monitoring/PeakCustomTable2.vue";
+import PeakWarningTypeChart2 from "../../components/charts/PeakWarningTypeChart2.vue";
+import CusButton4 from "../../components/smallCommon/CusButton4.vue";
+import Butgroup2 from "../../components/smallCommon/butgroup2.vue";
+export default {
+  name: "PeakCoalMonitoring",
+  components: {
+    Butgroup2,
+    CusButton4,
+    PeakWarningTypeChart2,
+    PeakCustomTable,
+    AirQualityTrendCharts,
+    CusButton,
+    Web4Title,
+    ProgressDesc,
+    Web3Title,
+    Web2Title,
+    FlexCol,
+    Split,
+    ModuleContent,
+    SystemTitle,
+    ModuleContent2,
+    Butgroup,
+    CusButton3,
+    BFC,
+    NewBg,
+    AlarmOverview, DeviceOverview, EnergyProfile, MonitorData, PollutionInformation, AtmosphericModule, MonitorData2},
+  computed: {
+    ...mapState({
+      title: state => state.system.title,
+      info: state => state.system.info || {},
+      airQualityTrendDataSource: state => (state.system.info?.trend || []).map(item => {
+        const { date, ...attr } = item
+        const result = []
+        for (const attrKey in attr) {
+          const obj = { name: date }
+          obj.attr = attrKey
+          obj.value = attr[attrKey]
+          result.push(obj)
+        }
+        console.log(result)
+        return result
+      }).flat(Infinity),
+      dataSource: state => state.system.info?.alerts || []
+    }),
+    pieData () {
+      if (this.info.cleanData && this.info.cleanData[this.active]) {
+        return [
+          {
+            attr: '清运',
+            name: '清洁',
+            value: this.info.cleanData[this.active]
+          },
+          {
+            attr: '清运',
+            name: '剩余',
+            value: 1 - this.info.cleanData[this.active]
+          },
+        ]
+      }
+      return [
+        {
+          attr: '清运',
+          name: '清洁',
+          value: 0
+        },
+        {
+          attr: '清运',
+          name: '剩余',
+          value: 0
+        },
+      ]
+
+    },
+    todaypf () {
+      return this.info.today || {}
+    },
+    columns2ForTable () {
+      const week = this.todaypf.week || {}
+      const columns = [
+        {
+          title: '类型',
+          dataIndex: 'deviceName',
+        }
+      ]
+      for (const weekKey in week) {
+        if (week[weekKey] && week[weekKey].length > 0) {
+          const data = week[weekKey]
+          columns.push.apply(columns, data.map(item => ({
+            title: item.Key,
+            dataIndex: item.Key
+          })))
+          break
+        }
+      }
+      const len = columns.length
+      const per = 100 / len + '%'
+      return columns.map((item, index) => {
+        if (item === 0) return item
+        return {
+          ...item,
+          width: per
+        }
+      })
+    },
+    weekData () {
+      const week = this.todaypf.week || {}
+      const results = []
+      for (const weekKey in week) {
+        const row = {
+          deviceName:weekKey,
+        }
+        if (!week[weekKey].length) continue
+
+        for (const weekElement of week[weekKey]) {
+          console.log(weekElement)
+          row[weekElement.Key] = weekElement.value
+        }
+        results.push(row)
+      }
+      return results
+    }
+  },
+  data () {
+    return {
+      mapTab: 'rl',
+      active: 'Yesterday',
+
+      columnsForTable: [
+        {
+          title: '设备名称',
+          dataIndex: 'deviceName',
+          width: '33.333%'
+        },
+        {
+          title: '报警时间',
+          dataIndex: 'CreateDateTime',
+          width: '33.333%'
+        },
+        {
+          title: '报警内容',
+          dataIndex: 'AlertContent',
+          width: '33.333%'
+        },
+      ]
+    }
+  },
+  methods: {
+    /**
+     * 图层构造器
+     * @param { object } props
+     * @param { 'cems' | 'sdjcy' | 'zkz' | 'gbz' | 'ssc' | 'shisc' | 'wz' | 'jkd' } props.layerType 图层类型 jkd(监控点) wz(微站) sdjcy(深度检测仪)  zkz（质控站） gbz(国标站) ssc(洒水车) shisc(湿扫车) cems（CEMS）
+     * @param { object } props.data 图层类型
+     */
+    pointClick ({layerType, data}) {
+      // todo
+      if(layerType == 'wz'){
+        this.$open(WZDialog, {
+          type: 'middle'
+        }, {
+          screenType: 'middle',
+          title: '微站',
+          width: 1100,
+          onClose () {
+            console.log(1);
+          }
+        })
+      } else if(layerType === 'sdjcy'){
+        this.$open(SDJCYDialog, {
+          type: 'middle'
+        }, {
+          screenType: 'custommiddle',
+          title: '深度检测仪',
+          width: 1100,
+          onClose () {
+            console.log(1);
+          }
+        })
+      }else if(layerType === 'zkz'){
+        this.$open(ZKZDialog, {
+          type: 'middle'
+        }, {
+          screenType: 'custommiddle',
+          title: '质控站',
+          width: 1100,
+          onClose () {
+            console.log(1);
+          }
+        })
+      } else if(layerType === 'gbz'){
+        this.$open(GBZDialog, {
+          type: 'middle'
+        }, {
+          screenType: 'custommiddle',
+          title: '国标站',
+          width: 1100,
+          onClose () {
+            console.log(1);
+          }
+        })
+      } else if(layerType === 'cems'){
+        this.$open(CEMSDialog, {
+          type: 'middle'
+        }, {
+          screenType: 'custommiddle',
+          title: 'CEMS',
+          width: 1100,
+          onClose () {
+            console.log(1);
+          }
+        })
+      } else if (layerType === 'jkd'){
+        this.$open(pointDialog, {
+          type: 'middle'
+        }, {
+          screenType: 'custommiddle',
+          title: '监控点',
+          width: 1100,
+          onClose () {
+            console.log(1);
+          }
+        })
+      }
+    },
+  }
+}
+</script>
+
+<style>
+body, html, #__nuxt, #__layout {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #09151F;
+}
+
+.list-enter-active, .list-leave-active {
+  transition: all 0.5s;
+}
+
+.list-enter, .list-leave-to
+  /* .list-leave-active for below version 2.1.8 */
+{
+  opacity: 0;
+  transform: translateY(30px);
+}
+</style>
+<style scoped lang="less">
+@import "../../assets/styles/mixin";
+.pf {
+  background: rgba(0, 186, 186, 0.08);
+  padding: 15px 17px;
+  border: 0.6px solid rgba(0, 186, 186, 1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  &:last-child {
+    margin-top: 20px;
+  }
+  .t {
+    /** 文本1 */
+    font-size: 16px;
+    font-weight: 400;
+    letter-spacing: 0px;
+    line-height: 16.46px;
+    color: rgba(219, 234, 234, 1);
+    text-align: left;
+    vertical-align: top;
+  }
+  .v {
+    /** 文本1 */
+    font-size: 16px;
+    font-weight: 400;
+    letter-spacing: 0px;
+    line-height: 16.46px;
+    color: rgba(8, 255, 255, 1);
+    text-align: right;
+    vertical-align: top;
+
+  }
+}
+.c-title {
+  position: absolute;
+  left: 50%;
+  top: 45%;
+  transform: translate(-50%, -50%);
+  .t {
+    /** 文本1 */
+    font-size: 35.84px;
+    font-weight: 400;
+    letter-spacing: 0px;
+    line-height: 51.9px;
+    color: rgba(55, 254, 247, 1);
+    text-align: left;
+    vertical-align: top;
+  }
+  .t2 {
+    /** 文本1 */
+    font-size: 14px;
+    font-weight: 400;
+    letter-spacing: 0px;
+    line-height: 20.27px;
+    color: rgba(243, 255, 255, 1);
+    text-align: center;
+    vertical-align: top;
+
+  }
+}
+.center {
+  padding: 0 20px;
+  position: relative;
+  height: 100%;
+  pointer-events: none;
+  .real-data {
+    pointer-events: auto;
+    position: absolute;
+    bottom: 0;
+    width: calc(100% - 40px);
+  }
+}
+.center-panel{
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+}
+.main {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  z-index: 2;
+  pointer-events: none;
+}
+.sou-suo-kuang {
+  height: 100%;
+  width: 580px;
+  box-sizing: border-box;
+  padding: 0 32px 0;
+
+
+  .search {
+    /deep/ .ant-input {
+      color: #fff;
+      background: rgba(5, 38, 93, 1);
+      border: 1.28px solid rgba(35, 209, 232, 1);
+      &:hover {
+        color: #fff;
+        background: rgba(5, 38, 93, 1);
+        border: 1.28px solid rgba(35, 209, 232, 1);
+
+      }
+    }
+    width: 100%;
+    height: 90px;
+    box-sizing: border-box;
+    padding: 28px 16px;
+
+    background: rgba(24, 131, 201, 0.2);
+
+
+    /** 文本1 */
+    font-size: 16px;
+    font-weight: 400;
+    letter-spacing: 0px;
+    line-height: 23.17px;
+    color: rgba(255, 255, 255, 1);
+    text-align: left;
+    vertical-align: top;
+    line-height: 32px;
+
+    .input {
+      margin-left: 10px;
+    }
+
+  }
+
+}
+
+.liebiao {
+  height: 100%;
+
+}
+
+.car-preview {
+  width: 100%;
+  height: 260px;
+}
+
+.desc {
+  background: rgba(24, 131, 201, 0.2);
+  border: 1px solid rgba(15, 81, 122, 1);
+}
+.table-content{
+  padding-top: 20px;
+  flex: 1;
+  height: 100%;
+}
+
+.video {
+  height: 178px;
+}
+
+</style>
+

pages/web2/index.vue

@@ -0,0 +1,396 @@
+<!--峰煤监控系统-->
+<template>
+  <new-bg>
+    <flex-col>
+      <system-title/>
+      <ModuleContent padding="20px">
+        <flex-col>
+          <web2-title>清洁运输</web2-title>
+          <ModuleContent padding="0 20px 20px">
+            <BFC>
+              <div class="sou-suo-kuang" slot="right">
+                <ModuleContent2 bg padding="20px">
+                  <flex-col>
+                    <div class="search">
+                      <BFC>
+                        <span slot="left"> 车牌号:</span>
+                        <div slot="center" class="input">
+                          <a-input placeholder="请输入"/>
+                        </div>
+                      </BFC>
+                    </div>
+                    <ModuleContent padding="0">
+                      <flex-col>
+                        <web3-title>门禁详情</web3-title>
+                        <ModuleContent padding="0">
+                          <flex-col>
+                            <img src="" alt="" class="car-preview">
+                            <butgroup2>
+                              <cus-button2 flex>进出场抓拍图</cus-button2>
+                              <cus-button2>行驶证-正面</cus-button2>
+                              <cus-button2>行驶证-反面</cus-button2>
+                              <cus-button2>环保清单</cus-button2>
+                            </butgroup2>
+                            <ModuleContent padding="20px 27px" class="desc">
+                              <cus-desc :columns="columns"></cus-desc>
+                            </ModuleContent>
+                          </flex-col>
+
+                        </ModuleContent>
+                      </flex-col>
+
+                    </ModuleContent>
+                  </flex-col>
+                </ModuleContent2>
+              </div>
+              <div class="liebiao" slot="center">
+                <flex-col>
+                  <div style="height: 144px;width: 100%;">
+                    <ModuleContent2 bg bg-str :border="false">
+                      <butgroup2 style="height: 100%;">
+                        <ModuleContent2 bg bg-color border>
+                          <miaoshu title="进场车辆" value="111" color="rgba(42, 207, 255, 1)"></miaoshu>
+                        </ModuleContent2>
+
+                        <ModuleContent2 bg bg-color border style="margin-left: 16px;">
+                          <miaoshu title="出场车辆" value="111" color="rgba(255, 171, 87, 1)"></miaoshu>
+                        </ModuleContent2>
+
+                        <ModuleContent2 bg bg-color border style="margin-left: 16px;">
+                          <miaoshu title="在场车辆" value="111" color="rgba(122, 175, 255, 1)"></miaoshu>
+                        </ModuleContent2>
+
+                        <ModuleContent2 bg bg-color border style="margin-left: 16px;">
+                          <miaoshu title="新增车辆" value="111" color="rgba(76, 243, 129, 1)"></miaoshu>
+                        </ModuleContent2>
+                      </butgroup2>
+                    </ModuleContent2>
+                  </div>
+                  <web3-title>门禁监控</web3-title>
+                  <ModuleContent padding="20px 0" ref="module">
+                    <div class="table-content">
+                      <peak-custom-table :table-title="columnsForTable" :data-source="dataSource" :limit-move-num="11"/>
+                    </div>
+                  </ModuleContent>
+                </flex-col>
+
+
+              </div>
+            </BFC>
+          </ModuleContent>
+          <butgroup>
+            <cus-button>厂区车辆台账</cus-button>
+            <cus-button>清洁运输趋势</cus-button>
+            <cus-button>磅秤台账</cus-button>
+            <cus-button>门禁监控</cus-button>
+          </butgroup>
+        </flex-col>
+      </ModuleContent>
+    </flex-col>
+  </new-bg>
+</template>
+
+<script>
+import {mapActions, mapState} from "vuex";
+import SystemTitle from "../../components/smallCommon/SystemTitle.vue";
+import FlexCol from "../../components/FlexCol.vue";
+import ModuleContent from "../../components/ModuleContent.vue";
+import Web2Title from "../../components/smallCommon/Web2Title.vue";
+import NewBg from "../../components/NewBg.vue";
+import BFC from "../../components/BFC.vue";
+import Butgroup from "../../components/smallCommon/butgroup.vue";
+import CusButton from "../../components/smallCommon/CusButton.vue";
+import Web3Title from "../../components/smallCommon/Web3Title.vue";
+import CusButton2 from "../../components/smallCommon/CusButton2.vue";
+import Butgroup2 from "../../components/smallCommon/butgroup2.vue";
+import CusDesc from "../../components/smallCommon/CusDesc.vue";
+import ModuleContent2 from "../../components/smallCommon/ModuleContent2.vue";
+import Miaoshu from "../../components/smallCommon/miaoshu.vue";
+import bgStr from '../../assets/images/new/矩形 17.png'
+import PeakCustomTable from "@/components/peak-coal-monitoring/PeakCustomTable2";
+
+export default {
+  name: "PeakCoalMonitoring",
+  components: {
+    Miaoshu,
+    ModuleContent2,
+    CusDesc,
+    Butgroup2,
+    CusButton2,
+    Web3Title,
+    CusButton,
+    Butgroup,
+    BFC,
+    Web2Title,
+    NewBg,
+    ModuleContent,
+    FlexCol,
+    SystemTitle,
+    PeakCustomTable
+  },
+  data() {
+    return {
+      bgStr,
+      tableH: 513,
+
+      dataSource: [
+        {
+          deviceName: '高炉',
+          errorName: '异常',
+          errorImg: '红灯'
+        },
+        {
+          deviceName: '高炉',
+          errorName: '异常',
+          errorImg: '红灯'
+        },
+        {
+          deviceName: '高炉',
+          errorName: '异常',
+          errorImg: '红灯'
+        },
+        {
+          deviceName: '高炉',
+          errorName: '异常',
+          errorImg: '红灯'
+        },
+        {
+          deviceName: '高炉',
+          errorName: '异常',
+          errorImg: '红灯'
+        },
+        {
+          deviceName: '高炉',
+          errorName: '异常',
+          errorImg: '红灯'
+        }
+      ],
+      columnsForTable:  [
+      {
+        title: '设备掉线',
+        dataIndex: 'deviceName',
+        width: '33.333%'
+      },
+      {
+        title: '故障异常',
+        dataIndex: 'errorName',
+        width: '33.333%'
+      },
+      {
+        title: '异常报警',
+        dataIndex: 'errorImg',
+        width: '33.333%'
+      }
+    ],
+      columns: [
+        {
+          title: '排放标准',
+          key: 'bz',
+        },
+        {
+          title: 'VIN',
+          key: 'vin',
+        },
+        {
+          title: '发动机号',
+          key: 'fdjh',
+        },
+        {
+          title: '注册日期',
+          key: 'zcr',
+        }
+      ]
+    }
+  },
+  computed: {
+    ...mapState({
+      title: state => state.system.title,
+    })
+  },
+  mounted() {
+    this.$nextTick(() => {
+      const win = window.top
+      this.$http.get('http://101.43.201.20:5000/api/Home/view').then(({data}) => {
+        win.document.title = data.home.title
+        this.setTitle(data.home.title)
+        this.setInfo(data)
+      })
+
+      if (this.$refs.module) {
+        const offsetHeight = this.$refs.module.$el.offsetHeight - 40
+        this.tableH = offsetHeight
+      }
+    })
+  },
+  methods: {
+    ...mapActions('system', ['setTitle', 'setInfo']),
+    /**
+     * 图层构造器
+     * @param { object } props
+     * @param { 'cems' | 'sdjcy' | 'zkz' | 'gbz' | 'ssc' | 'shisc' | 'wz' | 'jkd' } props.layerType 图层类型 jkd(监控点) wz(微站) sdjcy(深度检测仪)  zkz（质控站） gbz(国标站) ssc(洒水车) shisc(湿扫车) cems（CEMS）
+     * @param { object } props.data 图层类型
+     */
+    pointClick({layerType, data}) {
+      // todo
+      if (layerType == 'wz') {
+        this.$open(WZDialog, {
+          type: 'middle'
+        }, {
+          screenType: 'middle',
+          title: '微站',
+          width: 1100,
+          onClose() {
+            console.log(1);
+          }
+        })
+      } else if (layerType === 'sdjcy') {
+        this.$open(SDJCYDialog, {
+          type: 'middle'
+        }, {
+          screenType: 'custommiddle',
+          title: '深度检测仪',
+          width: 1100,
+          onClose() {
+            console.log(1);
+          }
+        })
+      } else if (layerType === 'zkz') {
+        this.$open(ZKZDialog, {
+          type: 'middle'
+        }, {
+          screenType: 'custommiddle',
+          title: '质控站',
+          width: 1100,
+          onClose() {
+            console.log(1);
+          }
+        })
+      } else if (layerType === 'gbz') {
+        this.$open(GBZDialog, {
+          type: 'middle'
+        }, {
+          screenType: 'custommiddle',
+          title: '国标站',
+          width: 1100,
+          onClose() {
+            console.log(1);
+          }
+        })
+      } else if (layerType === 'cems') {
+        this.$open(CEMSDialog, {
+          type: 'middle'
+        }, {
+          screenType: 'custommiddle',
+          title: 'CEMS',
+          width: 1100,
+          onClose() {
+            console.log(1);
+          }
+        })
+      } else if (layerType === 'jkd') {
+        this.$open(pointDialog, {
+          type: 'middle'
+        }, {
+          screenType: 'custommiddle',
+          title: '监控点',
+          width: 1100,
+          onClose() {
+            console.log(1);
+          }
+        })
+      }
+    },
+  }
+}
+</script>
+
+<style>
+body, html, #__nuxt, #__layout {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #09151F;
+}
+
+.list-enter-active, .list-leave-active {
+  transition: all 0.5s;
+}
+
+.list-enter, .list-leave-to
+  /* .list-leave-active for below version 2.1.8 */
+{
+  opacity: 0;
+  transform: translateY(30px);
+}
+</style>
+
+<style scoped lang="less">
+@import "../../assets/styles/mixin";
+
+.sou-suo-kuang {
+  height: 100%;
+  width: 580px;
+  box-sizing: border-box;
+  padding-left: 20px;
+
+
+  .search {
+    /deep/ .ant-input {
+      color: #fff;
+      background: rgba(5, 38, 93, 1);
+      border: 1.28px solid rgba(35, 209, 232, 1);
+      &:hover {
+        color: #fff;
+        background: rgba(5, 38, 93, 1);
+        border: 1.28px solid rgba(35, 209, 232, 1);
+
+      }
+    }
+    width: 100%;
+    height: 90px;
+    box-sizing: border-box;
+    padding: 28px 16px;
+
+    background: rgba(24, 131, 201, 0.2);
+
+
+    /** 文本1 */
+    font-size: 16px;
+    font-weight: 400;
+    letter-spacing: 0px;
+    line-height: 23.17px;
+    color: rgba(255, 255, 255, 1);
+    text-align: left;
+    vertical-align: top;
+    line-height: 32px;
+
+    .input {
+      margin-left: 10px;
+    }
+
+  }
+
+}
+
+.liebiao {
+  height: 100%;
+
+}
+
+.car-preview {
+  width: 100%;
+  height: 260px;
+}
+
+.desc {
+  background: rgba(24, 131, 201, 0.2);
+  border: 1px solid rgba(15, 81, 122, 1);
+}
+.table-content{
+  padding-top: 20px;
+  flex: 1;
+  height: 100%;
+}
+
+</style>
+

pages/web3/index.vue

@@ -0,0 +1,392 @@
+<!--峰煤监控系统-->
+<template>
+  <new-bg>
+    <div class="center-panel">
+      <Map type="middle" @pointClick="pointClick" />
+    </div>
+    <flex-col class="main">
+      <system-title/>
+      <ModuleContent none-event padding="0 20px 20px">
+        <BFC>
+          <flex-col slot="left" width="412">
+            <web2-title>环境治理</web2-title>
+            <ModuleContent padding="20px 0" height="218">
+              <div class="video"></div>
+            </ModuleContent>
+            <ModuleContent2 border bg bg-color padding="0 20px 20px">
+              <flex-col>
+                <web3-title>视频列表</web3-title>
+                <ModuleContent padding="0" height="160"></ModuleContent>
+                <web3-title>日志信息</web3-title>
+                <ModuleContent padding="0"></ModuleContent>
+              </flex-col>
+            </ModuleContent2>
+          </flex-col>
+          <flex-col slot="right" width="412">
+            <ModuleContent2 border bg bg-color padding="0 20px 20px">
+              <web3-title>雾炮</web3-title>
+            </ModuleContent2>
+            <split height="20px"></split>
+            <ModuleContent2 border bg bg-color padding="0 20px 20px">
+              <web3-title>雾帘</web3-title>
+            </ModuleContent2>
+            <split height="20px"></split>
+            <ModuleContent2 border bg bg-color padding="0 20px 20px">
+              <web3-title>天雾</web3-title>
+            </ModuleContent2>
+          </flex-col>
+          <div class="center" slot="center">
+            <butgroup :bg="false">
+              <cus-button3>一号焦炭料棚</cus-button3>
+              <cus-button3>二号焦炭料棚</cus-button3>
+              <cus-button3>三号焦炭料棚</cus-button3>
+              <cus-button3>四号焦炭料棚</cus-button3>
+              <cus-button3>五号焦炭料棚</cus-button3>
+            </butgroup>
+            <ModuleContent2 border bg bg-color padding="0 20px 20px" height="301" class="real-data">
+              <web3-title>实时数据</web3-title>
+            </ModuleContent2>
+          </div>
+        </BFC>
+      </ModuleContent>
+    </flex-col>
+  </new-bg>
+</template>
+
+<script>
+import {mapActions, mapState} from "vuex";
+import SystemTitle from "../../components/smallCommon/SystemTitle.vue";
+import FlexCol from "../../components/FlexCol.vue";
+import ModuleContent from "../../components/ModuleContent.vue";
+import Web2Title from "../../components/smallCommon/Web2Title.vue";
+import NewBg from "../../components/NewBg.vue";
+import BFC from "../../components/BFC.vue";
+import Butgroup from "../../components/smallCommon/butgroup.vue";
+import CusButton from "../../components/smallCommon/CusButton.vue";
+import Web3Title from "../../components/smallCommon/Web3Title.vue";
+import CusButton2 from "../../components/smallCommon/CusButton2.vue";
+import Butgroup2 from "../../components/smallCommon/butgroup2.vue";
+import CusDesc from "../../components/smallCommon/CusDesc.vue";
+import ModuleContent2 from "../../components/smallCommon/ModuleContent2.vue";
+import Miaoshu from "../../components/smallCommon/miaoshu.vue";
+import bgStr from '../../assets/images/new/矩形 17.png'
+import PeakCustomTable from "@/components/peak-coal-monitoring/PeakCustomTable2";
+import Split from "../../components/smallCommon/Split.vue";
+import CusButton3 from "../../components/smallCommon/CusButton3.vue";
+
+export default {
+  name: "PeakCoalMonitoring",
+  components: {
+    CusButton3,
+    Split,
+    Miaoshu,
+    ModuleContent2,
+    CusDesc,
+    Butgroup2,
+    CusButton2,
+    Web3Title,
+    CusButton,
+    Butgroup,
+    BFC,
+    Web2Title,
+    NewBg,
+    ModuleContent,
+    FlexCol,
+    SystemTitle,
+    PeakCustomTable
+  },
+  data() {
+    return {
+      bgStr,
+      tableH: 513,
+
+      dataSource: [
+        {
+          deviceName: '高炉',
+          errorName: '异常',
+          errorImg: '红灯'
+        },
+        {
+          deviceName: '高炉',
+          errorName: '异常',
+          errorImg: '红灯'
+        },
+        {
+          deviceName: '高炉',
+          errorName: '异常',
+          errorImg: '红灯'
+        },
+        {
+          deviceName: '高炉',
+          errorName: '异常',
+          errorImg: '红灯'
+        },
+        {
+          deviceName: '高炉',
+          errorName: '异常',
+          errorImg: '红灯'
+        },
+        {
+          deviceName: '高炉',
+          errorName: '异常',
+          errorImg: '红灯'
+        }
+      ],
+      columnsForTable:  [
+      {
+        title: '设备掉线',
+        dataIndex: 'deviceName',
+        width: '33.333%'
+      },
+      {
+        title: '故障异常',
+        dataIndex: 'errorName',
+        width: '33.333%'
+      },
+      {
+        title: '异常报警',
+        dataIndex: 'errorImg',
+        width: '33.333%'
+      }
+    ],
+      columns: [
+        {
+          title: '排放标准',
+          key: 'bz',
+        },
+        {
+          title: 'VIN',
+          key: 'vin',
+        },
+        {
+          title: '发动机号',
+          key: 'fdjh',
+        },
+        {
+          title: '注册日期',
+          key: 'zcr',
+        }
+      ]
+    }
+  },
+  computed: {
+    ...mapState({
+      title: state => state.system.title,
+    })
+  },
+  mounted() {
+    this.$nextTick(() => {
+      const win = window.top
+      this.$http.get('http://101.43.201.20:5000/api/Home/view').then(({data}) => {
+        win.document.title = data.home.title
+        this.setTitle(data.home.title)
+        this.setInfo(data)
+      })
+
+      if (this.$refs.module) {
+        const offsetHeight = this.$refs.module.$el.offsetHeight - 40
+        this.tableH = offsetHeight
+      }
+    })
+  },
+  methods: {
+    ...mapActions('system', ['setTitle', 'setInfo']),
+    /**
+     * 图层构造器
+     * @param { object } props
+     * @param { 'cems' | 'sdjcy' | 'zkz' | 'gbz' | 'ssc' | 'shisc' | 'wz' | 'jkd' } props.layerType 图层类型 jkd(监控点) wz(微站) sdjcy(深度检测仪)  zkz（质控站） gbz(国标站) ssc(洒水车) shisc(湿扫车) cems（CEMS）
+     * @param { object } props.data 图层类型
+     */
+    pointClick({layerType, data}) {
+      // todo
+      if (layerType == 'wz') {
+        this.$open(WZDialog, {
+          type: 'middle'
+        }, {
+          screenType: 'middle',
+          title: '微站',
+          width: 1100,
+          onClose() {
+            console.log(1);
+          }
+        })
+      } else if (layerType === 'sdjcy') {
+        this.$open(SDJCYDialog, {
+          type: 'middle'
+        }, {
+          screenType: 'custommiddle',
+          title: '深度检测仪',
+          width: 1100,
+          onClose() {
+            console.log(1);
+          }
+        })
+      } else if (layerType === 'zkz') {
+        this.$open(ZKZDialog, {
+          type: 'middle'
+        }, {
+          screenType: 'custommiddle',
+          title: '质控站',
+          width: 1100,
+          onClose() {
+            console.log(1);
+          }
+        })
+      } else if (layerType === 'gbz') {
+        this.$open(GBZDialog, {
+          type: 'middle'
+        }, {
+          screenType: 'custommiddle',
+          title: '国标站',
+          width: 1100,
+          onClose() {
+            console.log(1);
+          }
+        })
+      } else if (layerType === 'cems') {
+        this.$open(CEMSDialog, {
+          type: 'middle'
+        }, {
+          screenType: 'custommiddle',
+          title: 'CEMS',
+          width: 1100,
+          onClose() {
+            console.log(1);
+          }
+        })
+      } else if (layerType === 'jkd') {
+        this.$open(pointDialog, {
+          type: 'middle'
+        }, {
+          screenType: 'custommiddle',
+          title: '监控点',
+          width: 1100,
+          onClose() {
+            console.log(1);
+          }
+        })
+      }
+    },
+  }
+}
+</script>
+
+<style>
+body, html, #__nuxt, #__layout {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #09151F;
+}
+
+.list-enter-active, .list-leave-active {
+  transition: all 0.5s;
+}
+
+.list-enter, .list-leave-to
+  /* .list-leave-active for below version 2.1.8 */
+{
+  opacity: 0;
+  transform: translateY(30px);
+}
+</style>
+
+<style scoped lang="less">
+@import "../../assets/styles/mixin";
+.center {
+  padding: 0 20px;
+  position: relative;
+  height: 100%;
+  pointer-events: none;
+  .real-data {
+    pointer-events: auto;
+    position: absolute;
+    bottom: 0;
+    width: calc(100% - 40px);
+  }
+}
+.center-panel{
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+}
+.main {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  z-index: 2;
+  pointer-events: none;
+}
+.sou-suo-kuang {
+  height: 100%;
+  width: 580px;
+  box-sizing: border-box;
+  padding: 0 32px 0;
+
+
+  .search {
+    /deep/ .ant-input {
+      color: #fff;
+      background: rgba(5, 38, 93, 1);
+      border: 1.28px solid rgba(35, 209, 232, 1);
+      &:hover {
+        color: #fff;
+        background: rgba(5, 38, 93, 1);
+        border: 1.28px solid rgba(35, 209, 232, 1);
+
+      }
+    }
+    width: 100%;
+    height: 90px;
+    box-sizing: border-box;
+    padding: 28px 16px;
+
+    background: rgba(24, 131, 201, 0.2);
+
+
+    /** 文本1 */
+    font-size: 16px;
+    font-weight: 400;
+    letter-spacing: 0px;
+    line-height: 23.17px;
+    color: rgba(255, 255, 255, 1);
+    text-align: left;
+    vertical-align: top;
+    line-height: 32px;
+
+    .input {
+      margin-left: 10px;
+    }
+
+  }
+
+}
+
+.liebiao {
+  height: 100%;
+
+}
+
+.car-preview {
+  width: 100%;
+  height: 260px;
+}
+
+.desc {
+  background: rgba(24, 131, 201, 0.2);
+  border: 1px solid rgba(15, 81, 122, 1);
+}
+.table-content{
+  padding-top: 20px;
+  flex: 1;
+  height: 100%;
+}
+
+.video {
+  height: 178px;
+}
+
+</style>
+

postcss.config.js

@@ -3,7 +3,13 @@ module.exports = {
   plugins: [
     require('./buildPlugins/pxresize')({
       scale: 0.5,
-      ignore: ['manager', 'node_modules','peak-coal-monitoring']
+      ignore: [
+        'manager',
+        'node_modules',
+        'peak-coal-monitoring',
+        'web',
+        'smallCommon'
+      ]
     })
   ]
 };

store/system.js

@@ -1,15 +1,22 @@
 export const state = {
-  title: ''
+  title: '',
+  info: {}
 }
 
 export const mutations = {
   setTitle (state, title) {
     state.title = title
+  },
+  setInfo (state, info) {
+    state.info = info
   }
 }
 
 export const actions = {
   setTitle ({ commit }, title) {
     commit('setTitle', title)
+  },
+  setInfo ({ commit }, info) {
+    commit('setInfo', info)
   }
 }