小屏幕兼容

assets/styles/global.less

@@ -1,4 +1,24 @@
 .visual-dialog {
+  &.custommiddle {
+    .ant-modal-header {
+      padding: 16px 24px !important;
+    }
+    .ant-modal-close-x {
+      width: 68px !important;
+      height: 68px !important;
+      line-height: 75px !important;
+      font-size: 30px !important;
+      color: #fff;
+    }
+    .ant-modal-title {
+      font-size: 35px !important;
+      line-height: 68px !important;
+      color: #fff;
+    }
+    .ant-modal-body {
+      padding: 18px !important;
+    }
+  }
   .ant-modal-content {
     background-color: #063367;
     .ant-modal-header {

components/CEMSDialog.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="w-z-dialog">
-    <custom-table :table-title="tableTitle" :standard-value="standardValue" :data-source="dataSource"/>
+  <div class="w-z-dialog" :class="[type]">
+    <custom-table :type="type" :table-title="tableTitle" :standard-value="standardValue" :data-source="dataSource"/>
   </div>
 </template>
 
@@ -337,6 +337,16 @@ export default {
       ]
 
     }
+  },
+  props: {
+    /**
+     * 地图类型
+     * @param { 'big' | 'small' } type
+     */
+    type: {
+      type: String,
+      default: 'big'
+    },
   }
 }
 </script>
@@ -345,6 +355,9 @@ export default {
 .w-z-dialog {
   height: 2000px;
   width: 100%;
+  &.middle {
+    height: 1200px;
+  }
 }
 </style>
 

components/CustomTable.vue

@@ -1,6 +1,6 @@
 <!--自定义table-->
 <template>
-  <div class="custom-table">
+  <div class="custom-table" :class="[type]">
     <div class="check-data-info">
       <div class="table-info">
         <div class="table-header">
@@ -34,6 +34,14 @@
 export default {
   name: "CustomTable",
   props: {
+    /**
+     * 地图类型
+     * @param { 'big' | 'small' } type
+     */
+    type: {
+      type: String,
+      default: 'big'
+    },
     tableTitle: {
       type: Array,
       default: () => []
@@ -74,6 +82,54 @@ export default {
   height: 100%;
   width: 100%;
   overflow: auto;
+  &.middle {
+    height: 1200px !important;
+    .table-header {
+      font-size: 20px !important;
+    }
+    .data-content {
+      height: 50px !important;
+    }
+
+
+    .table-header {
+      height: 50px !important;
+      .table-header-item {
+        font-size: 30px !important;
+        line-height: 50px !important;
+      }
+    }
+    .table-info, .check-data-info {
+      height: 1200px !important;
+    }
+    .table-body {
+      height: 1200px !important;
+      overflow-y: auto;
+      .table-item-body {
+        margin-top: 10px !important;
+        height: 50px !important;
+      }
+      .point-name {
+        font-size: 30px !important;
+
+      }
+    }
+    .odds-ratio-up-icon {
+      width: 11px !important;
+      height: 11px !important;
+      padding-left: 10px !important;
+    }
+    .odds-ratio-reduction-icon {
+      width: 11px !important;
+      height: 11px !important;
+      padding-left: 10px !important;
+    }
+    .data-value {
+      ._value {
+        font-size: 16px !important;
+      }
+    }
+  }
 
   .check-data-info {
     height: 100%;
@@ -140,15 +196,15 @@ export default {
           .odds-ratio-up-icon {
             width: 23px;
             height: 25px;
-            background: url("assets/peakCoalImages/left/odds-ratio-up-icon.png") no-repeat;
             padding-left: 20px;
+            background: url("assets/peakCoalImages/left/odds-ratio-up-icon.png") no-repeat;
           }
 
           .odds-ratio-reduction-icon {
             width: 22px;
             height: 26px;
-            background: url("assets/peakCoalImages/left/odds-ratio-reduction-icon.png") no-repeat;
             padding-left: 20px;
+            background: url("assets/peakCoalImages/left/odds-ratio-reduction-icon.png") no-repeat;
           }
 
 

components/GBZDialog.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="w-z-dialog">
-    <custom-table :table-title="tableTitle" :standard-value="standardValue" :data-source="dataSource"/>
+  <div class="w-z-dialog" :class="[type]">
+    <custom-table :type="type" :table-title="tableTitle" :standard-value="standardValue" :data-source="dataSource"/>
   </div>
 </template>
 
@@ -337,6 +337,17 @@ export default {
       ]
 
     }
+  },
+
+  props: {
+    /**
+     * 地图类型
+     * @param { 'big' | 'small' } type
+     */
+    type: {
+      type: String,
+      default: 'big'
+    },
   }
 }
 </script>
@@ -345,6 +356,9 @@ export default {
 .w-z-dialog {
   height: 2000px;
   width: 100%;
+  &.middle {
+    height: 1200px;
+  }
 }
 </style>
 

components/Map.vue

@@ -23,6 +23,16 @@ export default {
       layerMap: new Map()
     }
   },
+  props: {
+    /**
+     * 地图类型
+     * @param { 'big' | 'small' } type
+     */
+    type: {
+      type: String,
+      default: 'big'
+    }
+  },
   mounted() {
     this.$nextTick(() => {
       if (this.$refs.mapRef) {
@@ -120,6 +130,7 @@ export default {
      * @param { Array<{ longitude: string | number, latitude: string | number, name: string }> }data
      */
     addDataByLayerType (layerType, data) {
+      const scale = this.type === 'middle' ? 4: 2
       if (this.layerMap.has(layerType)) {
         const graphicLayer = this.layerMap.get(layerType)
         for (const datum of data) {
@@ -132,8 +143,8 @@ export default {
               horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
               verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
               clampToGround: true,
-              width: 290 / 2,
-              height: 426 / 2
+              width: 290 / scale,
+              height: 426 / scale
             },
             attr: datum
           })

components/PointDialog.vue

@@ -1,12 +1,23 @@
 <template>
-<div class="point-dialog">
+<div class="point-dialog" :class="[type]">
 
 </div>
 </template>
 
 <script>
 export default {
-  name: "PointDialog"
+  name: "PointDialog",
+
+  props: {
+    /**
+     * 地图类型
+     * @param { 'big' | 'small' } type
+     */
+    type: {
+      type: String,
+      default: 'big'
+    },
+  }
 }
 </script>
 
@@ -15,5 +26,8 @@ export default {
   height: 2000px;
   width: 100%;
   background: black;
+  &.middle {
+    height: 1200px;
+  }
 }
 </style>

components/SDJCYDialog.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="w-z-dialog">
-    <custom-table :table-title="tableTitle" :standard-value="standardValue" :data-source="dataSource"/>
+  <div class="w-z-dialog" :class="[type]">
+    <custom-table :type="type" :table-title="tableTitle" :standard-value="standardValue" :data-source="dataSource"/>
   </div>
 </template>
 
@@ -337,6 +337,16 @@ export default {
       ]
 
     }
+  },
+  props: {
+    /**
+     * 地图类型
+     * @param { 'big' | 'small' } type
+     */
+    type: {
+      type: String,
+      default: 'big'
+    },
   }
 }
 </script>
@@ -345,6 +355,9 @@ export default {
 .w-z-dialog {
   height: 2000px;
   width: 100%;
+  &.middle {
+    height: 1200px;
+  }
 }
 </style>
 

components/ZKZDialog.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="w-z-dialog">
-    <custom-table :table-title="tableTitle" :standard-value="standardValue" :data-source="dataSource"/>
+  <div class="w-z-dialog" :class="[type]">
+    <custom-table :type="type" :table-title="tableTitle" :standard-value="standardValue" :data-source="dataSource"/>
   </div>
 </template>
 
@@ -337,6 +337,16 @@ export default {
       ]
 
     }
+  },
+  props: {
+    /**
+     * 地图类型
+     * @param { 'big' | 'small' } type
+     */
+    type: {
+      type: String,
+      default: 'big'
+    },
   }
 }
 </script>
@@ -345,6 +355,9 @@ export default {
 .w-z-dialog {
   height: 2000px;
   width: 100%;
+  &.middle {
+    height: 1200px;
+  }
 }
 </style>
 

pages/peak-coal-monitoring/PeakCoalMonitoring.vue

@@ -3,17 +3,17 @@
   <div class="peak-coal-monitoring">
 
     <div class="center-panel">
-
+      <Map type="middle" @pointClick="pointClick" />
     </div>
 
-    <div class="header-panel">
+    <div class="header-panel show-top">
       <div class="header-content">
         <div class="_title">峰煤智慧监控应用系统</div>
       </div>
     </div>
 
 
-    <div class="left-panel">
+    <div class="left-panel show-top">
       <div class="atmospheric-module-module">
         <atmospheric-module />
       </div>
@@ -25,7 +25,7 @@
       </div>
     </div>
 
-    <div class="right-panel">
+    <div class="right-panel show-top">
       <div class="energy-profile-module">
         <energy-profile/>
       </div>
@@ -38,7 +38,7 @@
     </div>
 
 
-    <div class="footer-panel"></div>
+    <div class="footer-panel show-top"></div>
   </div>
 </template>
 
@@ -49,9 +49,93 @@ 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";
+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'
 export default {
   name: "PeakCoalMonitoring",
-  components: {AlarmOverview, DeviceOverview, EnergyProfile, MonitorData, PollutionInformation, AtmosphericModule}
+  components: {AlarmOverview, DeviceOverview, EnergyProfile, MonitorData, PollutionInformation, AtmosphericModule},
+  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>
 
@@ -82,6 +166,9 @@ body, html, #__nuxt, #__layout {
   width: 100%;
   height: 100%;
   position: relative;
+  .show-top {
+    z-index: 2;
+  }
 
   .header-panel {
     position: absolute;
@@ -92,6 +179,7 @@ body, html, #__nuxt, #__layout {
     justify-content: center;
     background: url("~/assets/peakCoalMonitoring/header/header-shadow.png") no-repeat;
     background-size: 100% 100%;
+    pointer-events: auto;
 
     .header-content {
       height: 360px;
@@ -122,7 +210,12 @@ body, html, #__nuxt, #__layout {
     height: 960px;
     top: 50%;
     transform: translateY(-50%);
+    pointer-events: auto;
     .flex-column;
+    background: url("~/assets/peakCoalMonitoring/left/bg.png") left bottom no-repeat;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    padding: 16px;
 
     .atmospheric-module-module{
       height: 336px;
@@ -148,7 +241,12 @@ body, html, #__nuxt, #__layout {
     height: 960px;
     top: 50%;
     transform: translateY(-50%);
+    background: url("~/assets/peakCoalMonitoring/right/bg.png") left bottom no-repeat;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    padding: 16px;
     .flex-column;
+    pointer-events: auto;
     .energy-profile-module{
       height: 336px;
       width: 100%;
@@ -173,11 +271,12 @@ body, html, #__nuxt, #__layout {
 
   .footer-panel{
     width: 100%;
-    height: 50px;
-    background: url("~/assets/peakCoalMonitoring/footer/footer-bg.png") no-repeat;
+    height: 43px;
+    background: url("~/assets/peakCoalMonitoring/footer/footer-bg.png") left bottom no-repeat;
     background-size: 100% 100%;
     position: absolute;
     bottom: -6px;
+    pointer-events: auto;
   }
 }
 </style>

plugins/dialog/index.js

@@ -12,10 +12,11 @@ var confirm = function confirmFn(props) {
 };
 
 Vue.prototype.$open = function (vNode, props, dialogProps) {
+  const { screenType, ...otherProps } = dialogProps
   return confirm({
     centered: true,
-    prefixCls: 'visual-dialog ant-modal',
+    prefixCls: ` ${screenType || ''} visual-dialog ant-modal`,
     content: (h) => h(vNode, { props }),
-    ...dialogProps
+    ...otherProps
   })
 }

store/dialog.js

@@ -0,0 +1,19 @@
+export const state = {
+  /**
+   * 屏幕类型
+   * big 大屏  middle 中评
+   */
+  screenType: 'big'
+}
+
+export const mutations = {
+  setScreenType (state, screenType) {
+    state.screenType = screenType
+  }
+}
+
+export const actions = {
+  setScreenType (state, screenType) {
+    state.screenType = screenType
+  }
+}