外因火灾动态加载-提交

src/views/vent/home/fireHome/components/workJc.vue

@@ -6,217 +6,301 @@
                 <div class="echart-line"></div>
                 <div class="echart-boxs" ref="ring"></div>
             </div>
-            <div class="workJc-r"></div>
+            <div class="workJc-r">
+                <div class="fx-box" v-for="(item, index) in fxLenged" :key="index">
+                    <div class="fx-label">
+                        <div class="fx-label-l">
+                            <div class="bg-pie"></div>
+                        </div>
+                        <div class="fx-label-r">{{ item.label }}</div>
+                    </div>
+                    <div class="fx-val">{{ item.val }}</div>
+                </div>
+            </div>
 
         </div>
-        <div class="card-workJc"></div>
+        <div class="card-workJc">
+            <div class="card-box" v-for="(ite, ind) in cardList" :key="ind">
+                <div class="card-l">
+                    <div class="card-l-label"></div>
+                    <div class="card-l-val"></div>
+                </div>
+                <div class="card-r">
+                    <div class="card-r-label"></div>
+                    <div class="card-r-content">
+                        <div>
+                            <span></span>
+                            <span></span>
+                        </div>
+                        <div>
+                            <span></span>
+                            <span></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import {ref,onMounted} from 'vue'
+import { ref, reactive, onMounted, nextTick } from 'vue'
 import * as echarts from 'echarts';
 //获取dom节点
-let ring=ref()
+let ring = ref()
 
-function getOption() {
-    nextTick(() => {
+let fxLenged = reactive([
+    {
+        label: '低风险',
+        val: 1,
+    },
+    {
+        label: '中风险',
+        val: 2,
+    },
+    {
+        label: '高风险',
+        val: 3
+    },
+    {
+        label: '报警',
+        val: 4
+    },
+    {
+        label: '正常',
+        val: 5
+    }
+])
 
-  let  color = [
-    '#0CD2E6',
-    '#3751E6',
-    '#FFC722',
-    '#886EFF',
-    '#008DEC',
-    '#114C90',
-    '#00BFA5',
-];
-
-let title = '自定义legend、默认选中';
-let legend = [
-    'A需求类型',
-    'B需求类型',
-    'C需求类型',
-    'D需求类型',
-    'E需求类型',
-    '其他'
-];
-
-let seriesData = [
-    { "name": "A需求类型", "value": 30 },
-    { "name": "B需求类型", "value": 10 },
-    { "name": "C需求类型", "value": 15 },
-    { "name": "D需求类型", "value": 23 },
-    { "name": "E需求类型", "value": 10 },
-    { "name": "其他", "value": 12 }
-]
-
-
-      let myChart = echarts.init(ring.value);
-      let option = {
-    backgroundColor:'#050e31',
-    color: color,
-    title: {
-        top: 20,
-        text: title,
-        textStyle: {
-            fontSize: 20,
-            color: '#DDEEFF',
-        },
+let cardList = reactive([
+    {
+        title: '风险',
+        val: '低',
+        label: '81202综放工作面',
+        title1: '温度最大值',
+        val1: '30',
+        title2: '预测风险区域',
+        val2: '散热带，氧化带，窒息带'
     },
-    grid: {
-        top: '15%',
-        left: 0,
-        right: '1%',
-        bottom: 5,
-        containLabel: true,
+    {
+        title: '风险',
+        val: '低',
+        label: '81202综放工作面',
+        title1: '温度最大值',
+        val1: '30',
+        title2: '预测风险区域',
+        val2: '散热带，氧化带，窒息带'
     },
-    legend: {
-        orient: 'vertical',
-        top: 'center',
-        right: 50,
-        textStyle: {
-            align: 'left',
-            verticalAlign: 'middle',
-            rich: {
-                name: {
-                    color: 'rgba(255,255,255,0.5)',
-                    fontSize: 10,
-                },
-                value: {
-                    color: 'rgba(255,255,255,0.5)',
-                    fontSize: 10,
-                },
-                rate: {
-                    color: 'rgba(255,255,255,0.9)',
-                    fontSize: 10,
-                },
-            },
-        },
-        data: legend,
-        formatter: (name) => {
-            if (seriesData.length) {
-                const item = seriesData.filter((item) => item.name === name)[0];
-                return `{name|${name}：}{value| ${item.value}} {rate| ${item.value}%}`;
-            }
-        },
+    {
+        title: '风险',
+        val: '低',
+        label: '81202综放工作面',
+        title1: '温度最大值',
+        val1: '30',
+        title2: '预测风险区域',
+        val2: '散热带，氧化带，窒息带'
     },
-    series: [{
-        name: '需求类型占比',
-        type: 'pie',
-        center: ['50%', '50%'],
-        radius: ['45%', '65%'],
-        label: {
-            normal: {
-                show: false,
-                position: 'center',
-                formatter: '{value|{c}}\n{label|{b}}',
-                rich: {
-                    value: {
-                        padding: 5,
-                        align: 'center',
-                        verticalAlign: 'middle',
-                        fontSize: 32,
+])
+
+function getOption() {
+    nextTick(() => {
+        let color = [
+            '#0CD2E6',
+            '#3751E6',
+            '#FFC722',
+            '#886EFF',
+            '#008DEC',
+            '#114C90',
+            '#00BFA5',
+        ];
+
+        let seriesData = [
+            { "name": "低风险", "value": 30 },
+            { "name": "中风险", "value": 10 },
+            { "name": "高风险", "value": 15 },
+            { "name": "报警", "value": 23 },
+            { "name": "正常", "value": 10 },
+        ]
+
+
+        let myChart = echarts.init(ring.value);
+        let option = {
+            color: color,
+            grid: {
+                top: '15%',
+                left: 0,
+                right: '1%',
+                bottom: 5,
+                containLabel: true,
+            },
+
+            series: [{
+                name: '风险占比',
+                type: 'pie',
+                center: ['50%', '50%'],
+                radius: ['65%', '85%'],
+                label: {
+                    normal: {
+                        show: false,
+                        position: 'center',
+                        formatter: '{value|{c}}\n{label|{b}}',
+                        rich: {
+                            value: {
+                                padding: 5,
+                                align: 'center',
+                                verticalAlign: 'middle',
+                                fontSize: 16,
+                            },
+                            label: {
+                                align: 'center',
+                                verticalAlign: 'middle',
+                                fontSize: 14,
+                            },
+                        },
                     },
-                    label: {
-                        align: 'center',
-                        verticalAlign: 'middle',
-                        fontSize: 16,
+                    emphasis: {
+                        show: true,
+                        textStyle: {
+                            fontSize: '10',
+                        },
                     },
                 },
-            },
-            emphasis: {
-                show: true,
-                textStyle: {
-                    fontSize: '12',
+                labelLine: {
+                    show: false,
+                    length: 0,
+                    length2: 0,
                 },
-            },
-        },
-        labelLine: {
-            show: false,
-            length: 0,
-            length2: 0,
-        },
-        data: seriesData,
-    }],
-};
-      myChart.setOption(option);
-      window.onresize = function () {
-        myChart.resize();
-      };
+                data: seriesData,
+            }],
+        };
+        myChart.setOption(option);
+        window.onresize = function () {
+            myChart.resize();
+        };
     });
-  }
+}
 
-  onMounted(()=>{
+onMounted(() => {
     getOption()
-  })
+})
 
 </script>
 
 <style lang="less" scoped>
+@font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../../assets/font/douyuFont.otf');
+}
+
 .workJc {
     width: 100%;
     height: 100%;
+
     .echart-workJc {
-                    width: 100%;
-                    height: 45%;
+        width: 100%;
+        height: 45%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .workJc-l {
+            position: relative;
+            width: 180px;
+            height: 100%;
+
+            .echart-yh {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: 100px;
+                height: 100px;
+                background: url('../../../../../assets/images/fire/firehome/zu-e.png') no-repeat center;
+                background-size: 100% 100%;
+            }
+
+            .echart-line {
+                position: absolute;
+                top: 8%;
+                left: 15%;
+                width: 125px;
+                height: 125px;
+                background: url('../../../../../assets/images/fire/firehome/ty-e.png') no-repeat center;
+                background-size: 100% 100%;
+                animation: rotationLine 10s linear infinite;
+            }
+
+            @keyframes rotationLine {
+                0% {
+                    transform: rotate(0deg);
+                }
+
+                100% {
+                    transform: rotate(360deg);
+                }
+            }
+
+            .echart-boxs {
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -50%);
+                width: 90px;
+                height: 90px;
+            }
+        }
+
+        .workJc-r {
+            width: calc(100% - 180px);
+            height: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            .fx-box {
+                height: 80px;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+                align-items: center;
+                color: #fff;
+
+                .fx-label {
+                    height: 28px;
                     display: flex;
-                    justify-content: space-between;
                     align-items: center;
-                    .workJc-l {
-                        position: relative;
-                        width: 180px;
-                        height: 100%;
-                        .echart-yh {
-                            position: absolute;
-                            top: 50%;
-                            left: 50%;
-                            transform: translate(-50%, -50%);
-                            width: 100px;
-                            height: 100px;
-                            background: url('../../../../../assets/images/fire/firehome/zu-e.png') no-repeat center;
-                            background-size: 100% 100%;
-                        }
-                        .echart-line {
-                            position: absolute;
-                            top: 8%;
-                            left: 15%;
-                            width: 125px;
-                            height: 125px;
-                            background: url('../../../../../assets/images/fire/firehome/ty-e.png') no-repeat center;
-                            background-size: 100% 100%;
-                            animation: rotationLine 10s linear infinite;
-                        }
-
-                        @keyframes rotationLine {
-                            0% {
-                                transform: rotate(0deg);
-                            }
 
-                            100% {
-                                transform: rotate(360deg);
-                            }
-                        }
+                    .fx-label-l {
+                        position: relative;
+                        width: 14px;
+                        height: 14px;
+                        padding: 1px;
+                        box-sizing: border-box;
+                        border: 1px solid #1fb3f7;
+                        margin-right: 5px;
 
-                        .echart-boxs {
-                            position: absolute;
-                            left: 50%;
-                            top: 50%;
-                            transform: translate(-50%,-50%);
-                            width: 90px;
-                            height: 90px;
+                        .bg-pie {
+                            width: 100%;
+                            height: 100%;
+                            border-radius: 50%;
+                            background-color: #1fb3f7;
                         }
                     }
-                    .workJc-r{
-                        
-                    }
-
-
                 }
 
-                .card-workJc {
-                    height: 55%;
-                    border: 1px solid #ccc;
+                .fx-val {
+                    font-family: 'douyuFont';
+                    font-size: 18px;
                 }
-}
-</style>
+            }
+        }
+
+
+    }
+
+    .card-workJc {
+        height: 55%;
+        border: 1px solid #ccc;
+        overflow-y: auto;
+    }
+}</style>

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

@@ -60,7 +60,7 @@ let activeIndex1 = ref(0);
 //当前加载组件
 let current = ref('');
 
-let strType=ref('')//火灾外因-区别工作面和煤层
+let strType = ref('')//火灾外因-区别工作面和煤层
 
 
 const emit = defineEmits(['close', 'register']);
@@ -87,7 +87,7 @@ function btnClick(ind) {
           warn: '低风险',
           type: 'on',
           deviceID: el.id,
-          strtype:el.strtype,
+          strtype: el.strtype,
         }
       })
       clearInterval(timer)
@@ -95,27 +95,31 @@ function btnClick(ind) {
       break;
     case 1:
       activeIndex1.value = 0;
-      menuList = menuList1.external.map(el => {
-        return {
-          name: el.systemname,
-          warn: '低风险',
-          type: 'out',
-          deviceID: el.id,
-          strtype:el.strtype,
-        }
-      })  
-      // menuList.length=0
-      clearInterval(timer)
-      // current.value = ''
-      getSysWarnList(menuList[0].deviceID, 'fire');
-      strType.value=menuList[0].strtype
+      if (menuList1.external.length != 0) {
+        menuList = menuList1.external.map(el => {
+          return {
+            name: el.systemname,
+            warn: '低风险',
+            type: 'out',
+            deviceID: el.id,
+            strtype: el.strtype,
+          }
+        })
+        clearInterval(timer)
+        getSysWarnList(menuList[0].deviceID, 'fire');
+        strType.value = menuList[0].strtype
+      } else {
+        menuList.length = 0
+        clearInterval(timer)
+        current.value = ''
+      }
       break;
   }
 }
 //菜单选项切换
 function cardClick(ind, item) {
   activeIndex1.value = ind;
-  strType.value=item.strtype
+  strType.value = item.strtype
   if (props.moduleName == 'fire') {
     clearInterval(timer)
     getSysWarnList(item.deviceID, 'fire');
@@ -156,7 +160,7 @@ function getSysTypeWarnList(data) {
           warn: el.netStatus ? '高风险' : '低风险',
           type: 'on',
           deviceID: el.deviceID,
-          strtype:el.deviceType
+          strtype: el.deviceType
         });
       });
       clearInterval(timer)
@@ -170,7 +174,7 @@ function getSysTypeWarnList(data) {
           warn: '低风险',
           type: 'on',
           deviceID: el.id,
-          strtype:el.strtype
+          strtype: el.strtype
         });
       })
       clearInterval(timer)
@@ -182,7 +186,7 @@ function getSysTypeWarnList(data) {
           warn: '低风险',
           type: 'on',
           deviceID: el.id,
-          strtype:el.strtype
+          strtype: el.strtype
         });
       });
       clearInterval(timer)
@@ -194,7 +198,7 @@ function getSysTypeWarnList(data) {
           warn: '低风险',
           type: 'on',
           deviceID: el.id,
-          strtype:el.strtype
+          strtype: el.strtype
         });
       });
       clearInterval(timer)
@@ -205,7 +209,7 @@ function getSysTypeWarnList(data) {
 //获取预警详情弹窗右侧数据
 function getSysWarnList(id, type) {
   timer = setInterval(() => {
-     sysWarn({ sysid: id, type: type }).then((res) => {
+    sysWarn({ sysid: id, type: type }).then((res) => {
       if (type == 'fire') {
         listData.bundletube = res.bundletube,
           listData.fiber = res.fiber
@@ -213,7 +217,7 @@ function getSysWarnList(id, type) {
           listData.smoke = res.smoke,
           listData.spray = res.spray,
           listData.temperature = res.temperature,
-        loadZj()
+          loadZj()
       } else if (type == 'vent' || type == 'dust' || type == 'gas') {
         listData.common = res
       }