预警管控bug修改-提交

src/views/vent/home/clique/components/echart-scene.vue

@@ -1,43 +1,256 @@
 <template>
     <div class="echartScene">
-      <div class="scene" ref="scene"></div>
-      <div class="pic">
-      <img src="../../assets/images/echart-zu.png" alt="" />
+        <div class="scene" ref="scene"></div>
+        <div class="pic">
+            <img src="../../../../../assets/images/company/echart-zu.png" alt="" />
+        </div>
+        <div class="percent">
+            <div class="percent-box">{{ `${percent.jf}%` }}</div>
+            <div class="percent-box">{{ `${percent.yf}%` }}</div>
+            <div class="percent-box">{{ `${percent.hf}%` }}</div>
+        </div>
     </div>
-    <div class="percent">
-      <div class="percent-box">{{ `${percent.jf}%` }}</div>
-      <div class="percent-box">{{ `${percent.yf}%` }}</div>
-      <div class="percent-box">{{ `${percent.hf}%` }}</div>
-    </div>
-    </div>
-  </template>
-  
-  <script lang="ts" setup>
-    import {defineProps,  ref,  nextTick, reactive,  watch,  } from 'vue';
-    import * as echarts from 'echarts';
-    //获取dom元素节点
-    let scene = ref<any>();
+</template>
   
-    function getOption() {
-      nextTick(() => {
+<script lang="ts" setup>
+import { defineProps, ref, nextTick, reactive, watch,onMounted } from 'vue';
+import * as echarts from 'echarts';
+//获取dom元素节点
+let scene = ref<any>();
+
+let percent = reactive({
+    jf: 0,
+    yf: 0,
+    hf: 0,
+})
+let echartData = reactive([
+    { name: '进风区', value: 854 },
+    { name: '用风区', value: 495 },
+    { name: '回风区', value: 896 }
+])
+let xData = reactive([])
+let yData = reactive([])
+
+function deepCopy(obj) {
+    if (typeof obj !== 'object') {
+        return obj
+    }
+    let newobj = {}
+    for (var attr in obj) {
+        newobj[attr] = obj[attr]
+    }
+    return newobj
+}
+
+function getOption() {
+    nextTick(() => {
+        xData.length = 0
+        yData.length = 0
+        echartData.forEach((a, b) => {
+            xData.push(a.name)
+            yData.push(a.value)
+        })
+        let startColor = ['rgba(27, 164, 255,.6)', 'rgba(31, 248, 251,.6)', 'rgba(154, 225, 255,.6)']
+        let borderStartColor = ['#1ba4ff', '#1ff8fb', '#9ae1ff']
+        let RealData = []
+        let borderData = []
+        echartData.forEach((item, index) => {
+            let newobj = deepCopy(item)
+            let newobj1 = deepCopy(item)
+            RealData.push(newobj)
+            borderData.push(newobj1)
+        })
+        RealData.forEach((item, index) => {
+            item.itemStyle = {
+                normal: {
+                    color: startColor[index]
+                }
+            }
+        })
+        borderData.forEach((item, index) => {
+            item.itemStyle = {
+                normal: {
+                    color: borderStartColor[index]
+                }
+            }
+        })
+        console.log(scene.value,'scene')
         const myChart = echarts.init(scene.value);
-        let option = 
+        let option = {
+            legend: [
+                {
+                    // orient: 'vertical',
+                    x: '65%',
+                    y: '12%',
+                    itemWidth: 10,
+                    itemHeight: 10,
+                    align: 'left',
+                    textStyle: {
+                        fontSize: 14,
+                        color: '#1ba4ff'
+                    },
+                    data: ['进风区']
+                },
+                {
+                    // orient: 'vertical',
+                    x: '65%',
+                    y: '45%',
+                    itemWidth: 10,
+                    itemHeight: 10,
+                    align: 'left',
+                    textStyle: {
+                        fontSize: 14,
+                        color: '#1ff8fb'
+                    },
+                    data: ['用风区']
+                },
+                {
+                    // orient: 'vertical',
+                    x: '65%',
+                    y: '76%',
+                    itemWidth: 10,
+                    itemHeight: 10,
+                    align: 'left',
+                    textStyle: {
+                        fontSize: 14,
+                        color: '#9ae1ff'
+                    },
+                    data: ['回风区']
+                }
+            ],
+            tooltip: {
+                formatter: '{b}:{c}'
+            },
+            series: [
+                // 主要展示层的
+                {
+                    radius: ['35%', '70%'],
+                    center: ['30%', '50%'],
+                    type: 'pie',
+                    z: 10,
+                    label: {
+                        normal: {
+                            show: false
+                        },
+                        emphasis: {
+                            show: false
+                        }
+                    },
+                    labelLine: {
+                        normal: {
+                            show: false
+                        },
+                        emphasis: {
+                            show: false
+                        }
+                    },
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            borderColor: 'rgba(7, 45, 84,.9)'
+                        }
+                    },
+                    data: RealData
+                },
+                // 边框的设置
+                {
+                    radius: ['35%', '42%'],
+                    center: ['30%', '50%'],
+                    type: 'pie',
+                    z: 5,
+                    label: {
+                        normal: {
+                            show: false
+                        },
+                        emphasis: {
+                            show: false
+                        }
+                    },
+                    labelLine: {
+                        normal: {
+                            show: false
+                        },
+                        emphasis: {
+                            show: false
+                        }
+                    },
+
+                    animation: false,
+                    tooltip: {
+                        show: false
+                    },
+                    data: borderData
+                }
+            ]
+        }
         myChart.setOption(option);
         window.onresize = function () {
-          myChart.resize();
+            myChart.resize();
         };
-      });
-    }
-  </script>
+    });
+}
+
+onMounted(()=>{
+    getOption()
+})
+</script>
   
-  <style scoped lang="less">
-    .echartScene {
-      width: 100%;
-      height: 100%;
-      .scene{
+<style scoped lang="less">
+.echartScene {
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    .scene {
         width: 100%;
         height: 100%;
-      }
     }
-  </style>
+
+    .pic {
+        height: 100%;
+        position: absolute;
+        left: 55%;
+        top: 0;
+        display: flex;
+        align-items: center;
+
+        img {
+            height: 60%;
+        }
+    }
+
+    .percent {
+        position: absolute;
+        left: 85%;
+        top: 0;
+        width: 45px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        // justify-content: space-between;
+        align-items: center;
+
+        .percent-box {
+            font-size: 14px;
+
+            &:nth-child(1) {
+                position: absolute;
+                top: 12%;
+                color: #1ba4ff;
+            }
+
+            &:nth-child(2) {
+                position: absolute;
+                top: 45%;
+                color: #1ff8fb;
+            }
+
+            &:nth-child(3) {
+                position: absolute;
+                top: 76%;
+                color: #9ae1ff;
+            }
+        }
+    }
+}</style>
   

src/views/vent/monitorManager/alarmMonitor/fire/common/echartLine.vue

@@ -72,7 +72,7 @@
           {
             boundaryGap: false,
             type: 'value',
-            max: 50,
+            max: 1000,
             axisLabel: {
               textStyle: {
                 color: '#b3b8cc',

src/views/vent/monitorManager/alarmMonitor/fire/common/echartLine1.vue

@@ -107,7 +107,7 @@ function getOption() {
                     boundaryGap: false,
                     name: '(%)',
                     type: 'value',
-                    max: 50,
+                    max: 1000,
                     axisLabel: {
                         textStyle: {
                             color: '#b3b8cc',

src/views/vent/monitorManager/alarmMonitor/fire/common/echartLine2.vue

@@ -113,7 +113,7 @@ function getOption() {
                         padding: 0,
                     },
                     min: 0,
-                    max: 100,
+                    max: 1000,
                     splitLine: {
                         show: true,
                         lineStyle: {

src/views/vent/monitorManager/alarmMonitor/index.vue

@@ -424,7 +424,9 @@
     data = data.sort((a, b) => b - a);
     centerData.levels = data[0];
     Object.keys(iconsMonitor).forEach((el) => {
-      iconsMonitor[el].level = res.info.devicekindInfo[el].maxLevel || 0;
+      if(res.info.devicekindInfo[el]){
+        iconsMonitor[el].level = res.info.devicekindInfo[el].maxLevel ;
+      }
     });
     console.log(iconsMonitor,'设备监测数据---')
     fireMonitor[0].value = res.info.sysInfo.fireS.summaryInfo.external.temperature.value;