1、新增图表看板

components/WarningStatistics.vue

@@ -14,6 +14,7 @@
       <third-level-label :title="warningTypeTitle"/>
 
       <div class="warning-type-pie">
+        <div class="_bg"></div>
         <warning-type-chart :data-source="warningTypeDataSource"/>
       </div>
     </div>
@@ -109,7 +110,14 @@ export default {
     .warning-type-pie {
       flex: 1;
       height: 0;
-      .bg("~/assets/peakCoalImages/right/warning-type-pie-bg.png", left, 20px);
+      position: relative;
+      ._bg{
+        position: absolute;
+        width: 314px;
+        height: 313px;
+        background: url("~/assets/peakCoalImages/right/warning-type-pie-bg.png") no-repeat 16px 48px;
+        background-size: 100% 100%;
+      }
     }
   }
 }

components/charts/AirQualityTrendCharts.vue

@@ -84,7 +84,7 @@ export default {
           data: yAxisDataSource,
           yAxisIndex: 0, // 通过这个判断左右
           lineStyle: {
-            width: 6,
+            width: 3,
           }
         }
         seriesList.push(series)
@@ -94,20 +94,21 @@ export default {
         legend: {
           top: 20,
           left: '30%',
-          itemWidth: 22,
+          itemWidth: 11,
-          itemHeight: 22,
+          itemHeight: 11,
           icon: 'circle',
           textStyle: {
             color: 'rgba(106,196,255,0.60)',
-            fontSize: 30,
+            fontSize: 15,
-            padding: [0, 0, 0, 20]
+            padding: [0, 0, 0, 10]
           }
         },
         tooltip: {
           trigger: 'axis',
         },
         grid: {
-          top: 100,
+          top: 50,
+          bottom: 10,
           containLabel: true,
         },
         xAxis: [
@@ -115,7 +116,7 @@ export default {
             type: 'category',
             boundaryGap: true,
             axisLabel: {
-              fontSize: 30,
+              fontSize: 15,
               color: 'rgba(106,196,255,0.60)'
             },
             axisLine: {
@@ -135,13 +136,13 @@ export default {
             type: 'value',
             splitNumber: 5,
             axisLabel: {
-              fontSize: 30,
+              fontSize: 15,
               color: 'rgba(106,196,255,0.60)'
             },
             nameTextStyle: {
               color: 'rgba(106,196,255,0.60)',
-              fontSize: 30,
+              fontSize: 15,
-              lineHeight: 40,
+              lineHeight: 20,
             },
             // 分割线
             splitLine: {

components/charts/COTrendCharts.vue

@@ -89,7 +89,7 @@ export default {
           data: yAxisDataSource,
           yAxisIndex: 0, // 通过这个判断左右
           lineStyle: {
-            width: 6,
+            width: 3,
           },
           areaStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -111,22 +111,23 @@ export default {
       let option = {
         color: color,
         legend: {
-          top: 20,
+          top: 10,
           right: '10%',
-          itemWidth: 22,
+          itemWidth: 11,
-          itemHeight: 22,
+          itemHeight: 11,
           icon: 'circle',
           textStyle: {
             color: 'rgba(106,196,255,0.60)',
-            fontSize: 30,
+            fontSize: 15,
-            padding: [0, 0, 0, 20]
+            padding: [0, 0, 0, 10]
           }
         },
         tooltip: {
           trigger: 'axis',
         },
         grid: {
-          top: 100,
+          top: 50,
+          bottom: 10,
           containLabel: true,
           left: 0
         },
@@ -135,7 +136,7 @@ export default {
             type: 'category',
             boundaryGap: true,
             axisLabel: {
-              fontSize: 30,
+              fontSize: 15,
               color: 'rgba(106,196,255,0.60)'
             },
             axisLine: {
@@ -155,12 +156,12 @@ export default {
             type: 'value',
             splitNumber: 5,
             axisLabel: {
-              fontSize: 30,
+              fontSize: 15,
               color: 'rgba(106,196,255,0.60)'
             },
             nameTextStyle: {
               color: 'rgba(106,196,255,0.60)',
-              fontSize: 30,
+              fontSize: 15,
               lineHeight: 40,
             },
             // 分割线

components/charts/ElectricityWaterCharts.vue

@@ -85,7 +85,7 @@ export default {
           type: 'bar',
           color: 'transparent',
           yAxisIndex: 0,
-          barWidth: '60',
+          barWidth: '30',
           data: yAxisDataSource,
         }
         let topBar =
@@ -96,13 +96,12 @@ export default {
             color: color[index],
             symbol: 'rect',
             symbolPosition: 'end', // 在数据结尾显示
-            symbolSize: [60, 20], // 「树叶大小」
+            symbolSize: [30, 10], // 「树叶大小」
             symbolOffset: ['0', '0'], //「偏移量」
 
           }
         seriesList.push(topBar)
         seriesList.push(series)
-        console.log()
       }
       let option = {
         color: color,
@@ -110,20 +109,21 @@ export default {
           show: false,
           top: 20,
           left: '30%',
-          itemWidth: 22,
+          itemWidth: 11,
-          itemHeight: 22,
+          itemHeight: 11,
           icon: 'circle',
           textStyle: {
             color: 'rgba(106,196,255,0.60)',
-            fontSize: 30,
+            fontSize: 15,
-            padding: [0, 0, 0, 20]
+            padding: [0, 0, 0, 10]
           }
         },
         tooltip: {
           trigger: 'axis',
         },
         grid: {
-          top: 60,
+          top: 30,
+          bottom: 10,
           containLabel: true,
         },
         xAxis: [
@@ -131,7 +131,7 @@ export default {
             type: 'category',
             boundaryGap: true,
             axisLabel: {
-              fontSize: 30,
+              fontSize: 15,
               color: 'rgba(106,196,255,0.60)'
             },
             axisLine: {
@@ -151,13 +151,13 @@ export default {
             type: 'value',
             splitNumber: 5,
             axisLabel: {
-              fontSize: 30,
+              fontSize: 15,
               color: 'rgba(106,196,255,0.60)'
             },
             nameTextStyle: {
               color: 'rgba(106,196,255,0.60)',
-              fontSize: 30,
+              fontSize: 15,
-              lineHeight: 40,
+              lineHeight: 20,
             },
             // 分割线
             splitLine: {

components/charts/PollutantTrendCharts.vue

@@ -89,7 +89,7 @@ export default {
             data: yAxisDataSource,
             yAxisIndex: 0, // 通过这个判断左右
             lineStyle: {
-              width: 6,
+              width: 3,
             }
           }
         } else if (index == 0) {
@@ -97,7 +97,7 @@ export default {
             name: attrNames[index],
             type: 'bar',
             color: color[index],
-            barWidth: '50%',
+            barWidth: '25%',
             data: yAxisDataSource,
           }
         }
@@ -108,22 +108,23 @@ export default {
         color: color,
         legend: {
           show: false,
-          top: 20,
+          top: 10,
-          left: '30%',
+          left: '15%%',
-          itemWidth: 22,
+          itemWidth: 11,
-          itemHeight: 22,
+          itemHeight: 11,
           icon: 'circle',
           textStyle: {
             color: 'rgba(106,196,255,0.60)',
-            fontSize: 30,
+            fontSize: 15,
-            padding: [0, 0, 0, 20]
+            padding: [0, 0, 0, 10]
           }
         },
         tooltip: {
           trigger: 'axis',
         },
         grid: {
-          top: 60,
+          top: 30,
+          bottom: 10,
           containLabel: true,
         },
         xAxis: [
@@ -131,7 +132,7 @@ export default {
             type: 'category',
             boundaryGap: true,
             axisLabel: {
-              fontSize: 30,
+              fontSize: 15,
               color: 'rgba(106,196,255,0.60)'
             },
             axisLine: {
@@ -151,13 +152,13 @@ export default {
             type: 'value',
             splitNumber: 5,
             axisLabel: {
-              fontSize: 30,
+              fontSize: 15,
               color: 'rgba(106,196,255,0.60)'
             },
             nameTextStyle: {
               color: 'rgba(106,196,255,0.60)',
-              fontSize: 30,
+              fontSize: 15,
-              lineHeight: 40,
+              lineHeight: 20,
             },
             // 分割线
             splitLine: {

components/charts/ProduceTrendChart.vue

@@ -66,12 +66,12 @@ export default {
         legend: {
           top: 0,
           right: 0,
-          itemWidth: 22,
+          itemWidth: 11,
-          itemHeight: 22,
+          itemHeight: 11,
           icon: 'circle',
           textStyle: {
             color: 'rgba(106,196,255,0.60)',
-            fontSize: 30,
+            fontSize: 15,
 
           }
         },
@@ -79,7 +79,8 @@ export default {
           trigger: 'axis',
         },
         grid: {
-          top: 100,
+          top: 50,
+          bottom: 10,
           containLabel: true,
         },
         xAxis: [
@@ -87,7 +88,7 @@ export default {
             type: 'category',
             boundaryGap: true,
             axisLabel: {
-              fontSize: 30,
+              fontSize: 15,
               color: 'rgba(106,196,255,0.60)'
             },
             axisLine: {
@@ -109,13 +110,13 @@ export default {
             splitNumber: 5,
             name: '单位：t',
             axisLabel: {
-              fontSize: 30,
+              fontSize: 15,
               color: 'rgba(106,196,255,0.60)'
             },
             nameTextStyle: {
               color: 'rgba(106,196,255,0.60)',
-              fontSize: 30,
+              fontSize: 15,
-              lineHeight: 40,
+              lineHeight: 20,
             },
             // 分割线
             splitLine: {
@@ -137,13 +138,13 @@ export default {
             name: '单位：m³',
             splitNumber: 5,
             axisLabel: {
-              fontSize: 30,
+              fontSize: 15,
               color: 'rgba(106,196,255,0.60)'
             },
             nameTextStyle: {
               color: 'rgba(106,196,255,0.60)',
-              fontSize: 30,
+              fontSize: 15,
-              lineHeight: 40,
+              lineHeight: 20,
             },
             // 分割线
             splitLine: {
@@ -170,7 +171,7 @@ export default {
             data: yAxisData1,
             yAxisIndex: 0, // 通过这个判断左右
             lineStyle: {
-              width: 6,
+              width: 3,
             }
           },
           {
@@ -182,7 +183,7 @@ export default {
             data: yAxisData2,
             yAxisIndex: 1, // 通过这个判断左右
             lineStyle: {
-              width: 6,
+              width: 3,
             }
           },
           {
@@ -194,7 +195,7 @@ export default {
             data: yAxisData3,
             yAxisIndex: 1, // 通过这个判断左右
             lineStyle: {
-              width: 6,
+              width: 3,
             }
           },
         ],

components/charts/WarningTypeChart.vue

@@ -84,8 +84,8 @@ export default {
           left: lefts[i],
           top: tops[i],
           align: aligns[i],
-          itemWidth: 19,
+          itemWidth: 10,
-          itemHeight: 74,
+          itemHeight: 37,
           itemStyle: {
             color: colorList[i],
           },
@@ -94,28 +94,28 @@ export default {
           textStyle: {
             fontWeight: 'lighter',
             fontSize: 14,
-            width: 460,
+            width: 230,
-            height: 74,
+            height: 37,
             padding: [0, 10, 0, 10],
             backgroundColor: bgColorList[i],
-            lineHeight: 74,
+            lineHeight: 37,
             rich: {
               a: {
                 align: 'right',
                 color: '#C1DEFF',
-                fontSize: 42,
+                fontSize: 17,
                 fontWeight: 700
               },
               b: {
                 align: 'left',
                 color: '#C1DEFF',
-                fontSize: 34,
+                fontSize: 17,
                 padding: [0, 0, 0, 10]
               },
               c:{
                 align: 'center',
                 color: '#C1DEFF',
-                fontSize: 34,
+                fontSize: 17,
                 padding: [0, 0, 0, 10]
               }
             }
@@ -155,7 +155,7 @@ export default {
             },
             itemStyle: {
               borderRadius: 0,
-              borderWidth: 10
+              borderWidth: 5
             },
             data: pieData1
           },

mixins/screen-scale-mixin_v2.js

@@ -0,0 +1,78 @@
+import {sendMessage} from '@/utils/iframe';
+
+const VISUAL_CONFIG = {width: 9450, height: 3000}
+
+export default {
+    data() {
+        return {
+            autoStyle: {}
+        }
+    },
+    computed: {
+    },
+    mounted() {
+        this.getAutoStyle()
+        this.initScaleEvent()
+    },
+    beforeDestroy() {
+        this._removeScaleEvent()
+    },
+    methods: {
+        getAutoStyle() {
+            const innerHeight = window.innerHeight
+            const innerWidth = window.innerWidth
+            const {scale, origin, position, type} = this.getScale()
+            sendMessage('scale', {scale, type, innerHeight, innerWidth})
+            localStorage.setItem('scale', JSON.stringify({scale, type, innerHeight, innerWidth}))
+            this.autoStyle = {
+                width: VISUAL_CONFIG.width + 'px',
+                height: VISUAL_CONFIG.height + 'px',
+                transform: `scale(${scale})`,
+                transformOrigin: origin,
+                ...position
+            }
+        },
+        getScale() {
+            let scale = 1
+            // 1 按照高度缩放 2 按照宽度缩放
+            let type = 1
+            let origin = 'top center'
+            const innerWidth = window.innerWidth
+            const innerHeight = window.innerHeight
+            const widthScale = innerWidth / VISUAL_CONFIG.width
+            const scaleHeight = VISUAL_CONFIG.height * widthScale
+            const position = {left: 0, top: 0, marginTop: 0, marginLeft: 0}
+            if (scaleHeight <= innerHeight) {
+                origin = 'left center'
+                scale = widthScale
+                position.left = 0
+                position.top = '50%'
+                position.marginTop = -VISUAL_CONFIG.height / 2 + 'px'
+                position.marginLeft = 0
+                let type = 2
+
+                if (scale > 1) {
+                    origin = 'left top'
+                    position.left = 0
+                    position.top = 0
+                    position.marginTop = 0
+                    position.marginLeft = 0
+                }
+            } else {
+                scale = innerHeight / VISUAL_CONFIG.height
+                position.left = '50%'
+                position.top = 0
+                position.marginTop = 0
+                position.marginLeft = -VISUAL_CONFIG.width / 2 + 'px'
+            }
+            return {scale, origin, position, type}
+        },
+
+        initScaleEvent() {
+            window.addEventListener('resize', this.getAutoStyle.bind(this))
+        },
+        _removeScaleEvent() {
+            window.removeEventListener('resize', this.getAutoStyle.bind(this))
+        }
+    }
+}

pages/autovisual/index.vue

@@ -0,0 +1,86 @@
+<!--
+* @description:
+* @component: index
+* @author: wangzhigang11
+* @date: 2023/8/21 19:30
+-->
+<template>
+  <div class="index">
+    <div :style="autoStyle" class="iframe-container">
+      <iframe
+          ref="iframe"
+          :src="src"
+          frameborder="0"
+          height="100%"
+          width="100%"
+          marginheight="0"
+          marginwidth="0"
+          scrolling="auto"
+          allowfullscreen="true"
+          webkitallowfullscreen="true"
+          mozallowfullscreen="true"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import screenScaleMixin from '@/mixins/screen-scale-mixin_v2';
+import {urlJoin} from '@northeast-utils/core'
+
+export default {
+  name: 'Index',
+  components: {
+  },
+  mixins: [
+    screenScaleMixin
+  ],
+  props: {},
+  data() {
+    return {
+    }
+  },
+  computed: {
+    src() {
+      const {href} = this.$router.resolve({name: '/visual/PeakCoalView'})
+      return urlJoin(href)
+    }
+  },
+  watch: {},
+  created() {
+  },
+  beforeDestroy() {
+  },
+  mounted() {
+  },
+  methods: {
+  },
+}
+</script>
+<style>
+#overviewBody {
+  height: 100vh;
+}
+</style>
+<style lang='scss' scoped>
+.index {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background-color: #000;
+  position: relative;
+
+  .iframe-container {
+    position: absolute;
+
+    > iframe {
+      background-color: transparent;
+    }
+  }
+
+  .basin-dialog {
+    position: absolute;
+  }
+
+}
+</style>

utils/iframe.js

@@ -0,0 +1,27 @@
+
+export const onMessage = function (eventName, cb) {
+  window.parent.addEventListener('message', function (e) {  // 监听 message 事件
+    if ( e.data) {
+      const _eventName = e.data.type
+      if (eventName === _eventName) {
+        cb && cb(e.data.data)
+      }
+    }
+  });
+}
+
+export function sendMessage (eventName, message) {
+  window.postMessage({
+    type: eventName,
+    data: message
+  }, '/')
+}
+
+export function sendSelfMessage (eventName, message) {
+  window.postMessage({
+    type: eventName,
+    data: message
+  }, '/')
+}
+
+window.sendSelfMessage = sendSelfMessage