公司端首页前后台接口对接-提交

src/views/vent/home/clique/clique.api.ts

@@ -3,6 +3,7 @@ import { defHttp } from '/@/utils/http/axios';
 
 enum Api {
     getHomeData = '/company/index/getHomeData',
+    getList = '/ventanaly-sharefile/fileServer/queryEachFileNum',
 }
 
 
@@ -12,4 +13,10 @@ enum Api {
  */
 export const getHomeData = () => defHttp.post({ url: Api.getHomeData,  });
 
+/**
+ * 文件共享中心
+ * @param params
+ */
+export const getList = () => defHttp.post({ url: Api.getList,  });
+
 

src/views/vent/home/clique/components/dialog-modal.vue

@@ -68,66 +68,122 @@
           <span class="warn-value">{{ fire.label }}</span>
           <span class="warn-label">{{ fire.value }}</span>
         </div>
-        <div class="dust-r">
+        <!-- <div class="dust-r">
           <span class="warn-value">{{ dust.label }}</span>
           <span class="warn-label">{{ dust.value }}</span>
-        </div>
+        </div> -->
       </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, reactive } from 'vue';
+  import { ref, reactive,defineProps,watch } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
   import { getAssetURL } from '/@/utils/ui';
 
+  let props=defineProps({
+    centerDetail:{
+      type:Object,
+      default:()=>{
+        return {}
+      }
+    }
+  })
+
   // let modalTitle = ref('榆家梁矿');
   let modalTitle = ref('yjl');
   let modalCard = reactive([
-    { imgSrc: getAssetURL('company/home/hang.png'), label: '巷道长度', value: 12300 },
-    { imgSrc: getAssetURL('company/home/people.png'), label: '人员总数', value: 23 },
-    { imgSrc: getAssetURL('company/home/car.png'), label: '车辆总数', value: 17 },
+    { imgSrc: getAssetURL('company/home/hang.png'), label: '巷道长度', value: 0 },
+    { imgSrc: getAssetURL('company/home/people.png'), label: '人员总数', value: 0 },
+    { imgSrc: getAssetURL('company/home/car.png'), label: '车辆总数', value: 0 },
   ]);
 
-  let valueM = ref('10000');
-  let labelM = ref('1号回风立井');
+  let valueM = ref(0);
+  let labelM = ref('');
 
   let zlList = reactive([
-    { label: '关键阻力——进风', value: 3000, percent: 30 },
-    { label: '关键阻力——用风', value: 3000, percent: 30 },
-    { label: '关键阻力——回风', value: 3000, percent: 30 },
+    { label: '关键阻力——进风', value: 0, percent: 0 },
+    { label: '关键阻力——用风', value: 0, percent: 0 },
+    { label: '关键阻力——回风', value: 0, percent: 0 },
   ]);
 
   let windLfList = reactive([
-    { label: '有效风量率', value: 88 },
-    { label: '矿井风量率', value: 3.54 },
+    { label: '有效风量率', value: 0 },
+    { label: '矿井漏风率', value: 0 },
   ]);
 
+  // let vent = reactive({
+  //   label: '通风风险性',
+  //   value: '低风险',
+  // });
+
+  // let gas = reactive({
+  //   label: '瓦斯风险性',
+  //   value: '低风险',
+  // });
+
+  // let fire = reactive({
+  //   label: '火灾风险性',
+  //   value: '低风险',
+  // });
+
+  // let dust = reactive({
+  //   label: '粉尘风险性',
+  //   value: '低风险',
+  // });
   let vent = reactive({
-    label: '通风风险性',
-    value: '低风险',
+    label: '总进风',
+    value: 0,
   });
 
   let gas = reactive({
-    label: '瓦斯风险性',
-    value: '低风险',
+    label: '总风量',
+    value: 0,
   });
 
   let fire = reactive({
-    label: '火灾风险性',
-    value: '低风险',
+    label: '等积孔',
+    value: 0,
   });
 
-  let dust = reactive({
-    label: '粉尘风险性',
-    value: '低风险',
-  });
+  // let dust = reactive({
+  //   label: '粉尘风险性',
+  //   value: '低风险',
+  // });
 
   const emit = defineEmits(['closeDialog']);
 
   function getClose() {
     emit('closeDialog', false);
   }
+
+  watch(()=>props.centerDetail,(newC,oldC)=>{
+    console.log(newC,'地图区域详情数据-------')
+   if(JSON.stringify(newC)!='{}'){
+    modalCard[0]['value']=newC.sys_data.totallength
+    modalCard[1]['value']=0
+    modalCard[2]['value']=0
+    
+    labelM.value=newC.majorpath_data[0].deviceName
+    valueM.value=newC.majorpath_data[0].majorpath.drag_total
+    zlList[0]['value']=newC.majorpath_data[0].majorpath.drag_1
+    zlList[1]['value']=newC.majorpath_data[0].majorpath.drag_2
+    zlList[2]['value']=newC.majorpath_data[0].majorpath.drag_3
+    zlList[0]['percent']=(( zlList[0]['value'] / valueM.value )*100).toFixed(2)
+    zlList[1]['percent']=(( zlList[1]['value'] / valueM.value )*100).toFixed(2)
+    zlList[2]['percent']=(( zlList[2]['value'] / valueM.value )*100).toFixed(2)
+
+    windLfList[0].value=(newC.sys_data.xufengliang / parseFloat(newC.sys_data.zongfengliang) * 100).toFixed(2)
+    windLfList[1].value=((parseFloat(newC.sys_data.zongfengliang) - parseFloat(newC.sys_data.zonghuifeng)) / parseFloat(newC.sys_data.zonghuifeng) * 100 ).toFixed(2)
+
+    vent.value = newC.majorpath_data[0].majorpath.drag_total
+    gas.value = newC.majorpath_data[0].majorpath.m3_total
+    fire.value = Math.round(((1.19 *  gas.value) / 60 / Math.sqrt(vent.value)) * 100) / 100
+   }
+  },{
+    immediate:true,
+    deep:true
+  })
 </script>
 <style lang="less" scoped>
   @font-face {
@@ -402,7 +458,7 @@
         .num {
           position: absolute;
           top: 50%;
-          right: 58px;
+          right: 45px;
           transform: translate(0, -50%);
           color: #fff;
           font-family: 'douyuFont';

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

@@ -22,8 +22,17 @@
 </template>
   
 <script lang="ts" setup>
-import { defineProps, ref, nextTick, reactive, watch, onMounted } from 'vue';
+import { defineProps, ref, nextTick, reactive, watch,  } from 'vue';
 import * as echarts from 'echarts';
+
+let props=defineProps({
+    echartData:{
+        type:Object,
+        default:()=>{
+            return {}
+        }
+    }
+})
 //获取dom元素节点
 let scene = ref<any>();
 
@@ -31,6 +40,9 @@ let percent = reactive({
     jf: 0,
     yf: 0,
     hf: 0,
+    jfEcharts:0,
+    yfEcharts:0,
+    hfEcharts:0,
 })
 
 function getOption() {
@@ -110,8 +122,8 @@ function getOption() {
                 hoverAnimation: true,
                 hoverOffset: 8,
                 data: [{
-                    value: 300,
-                    name: '到场总人数',
+                    value: percent.jf,
+                    name: '占比',
                     itemStyle: {
                         normal: {
                             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
@@ -130,8 +142,8 @@ function getOption() {
                     }
                 },
                 {
-                    value: 25,
-                    name: '未到场总人数',
+                    value: percent.jfEcharts,
+                    name: '未占比',
                     hoverAnimation: true,
                     itemStyle: placeHolderStyle
                 }
@@ -147,8 +159,8 @@ function getOption() {
                 hoverAnimation: true,
                 hoverOffset: 3,
                 data: [{
-                    value: 120,
-                    name: '到场人数',
+                    value: percent.yf,
+                    name: '占比',
                     itemStyle: {
                         color: { // 完成的圆环的颜色
                             colorStops: [{
@@ -162,9 +174,9 @@ function getOption() {
                     }
                 },
                 {
-                    value: 15,
+                    value: percent.yfEcharts,
                     hoverAnimation: true,
-                    name: '未到场人数',
+                    name: '未占比',
                     itemStyle: placeHolderStyle
                 }
                 ]
@@ -179,8 +191,8 @@ function getOption() {
                 hoverAnimation: true,
                 hoverOffset: 3,
                 data: [{
-                    value: 160,
-                    name: '到场人数',
+                    value: percent.hf,
+                    name: '占比',
                     itemStyle: {
                         color: { // 完成的圆环的颜色
                             colorStops: [{
@@ -194,8 +206,8 @@ function getOption() {
                     }
                 },
                 {
-                    value: 10,
-                    name: '未到场人数',
+                    value: percent.hfEcharts,
+                    name: '未占比',
                     hoverAnimation: true, //鼠标移入变大
                     itemStyle: placeHolderStyle
                 }
@@ -210,9 +222,21 @@ function getOption() {
     });
 }
 
-onMounted(() => {
+watch(()=>props.echartData,(newV,oldV)=>{
+    console.log(newV,'newV-----------')
+    percent.jf=newV.jfq
+    percent.yf=newV.yfq
+    percent.hf=newV.hfq
+    percent.jfEcharts=Math.ceil(newV.zf -  percent.jf)
+    percent.yfEcharts=Math.ceil(newV.zf -  percent.yf)
+    percent.hfEcharts=Math.ceil(newV.zf -  percent.hf)
     getOption()
+},{
+    immediate:true,
+    deep:true
 })
+
+
 </script>
   
 <style scoped lang="less">

src/views/vent/home/clique/components/file-share.vue

@@ -33,192 +33,175 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, reactive } from 'vue';
-  import { SvgIcon } from '/@/components/Icon';
-  import { getAssetURL } from '/@/utils/ui';
-
-  let fileTitle = ref('文件共享中心');
-  let fileData = reactive([
-    {
-      title: 'XXX井',
-      imgSrc: getAssetURL('company/file/file2.png'),
-      imgSrc1: getAssetURL('company/file/file1.png'),
-      label: '文件总数',
-      label1: '待审批文件',
-      value: 10,
-      value1: 10,
-    },
-    {
-      title: 'XXX',
-      imgSrc: getAssetURL('company/file/file2.png'),
-      imgSrc1: getAssetURL('company/file/file1.png'),
-      label: '文件总数',
-      label1: '待审批文件',
-      value: 10,
-      value1: 10,
-    },
-    {
-      title: 'XXX',
-      imgSrc: getAssetURL('company/file/file2.png'),
-      imgSrc1: getAssetURL('company/file/file1.png'),
-      label: '文件总数',
-      label1: '待审批文件',
-      value: 10,
-      value1: 10,
-    },
-    {
-      title: 'XXX',
-      imgSrc: getAssetURL('company/file/file2.png'),
-      imgSrc1: getAssetURL('company/file/file1.png'),
-      label: '文件总数',
-      label1: '待审批文件',
-      value: 10,
-      value1: 10,
-    },
-    {
-      title: 'XXX',
-      imgSrc: getAssetURL('company/file/file2.png'),
-      imgSrc1: getAssetURL('company/file/file1.png'),
-      label: '文件总数',
-      label1: '待审批文件',
-      value: 10,
-      value1: 10,
-    },
-    {
-      title: 'XXX',
-      imgSrc: getAssetURL('company/file/file2.png'),
-      imgSrc1: getAssetURL('company/file/file1.png'),
-      label: '文件总数',
-      label1: '待审批文件',
-      value: 10,
-      value1: 10,
-    },
-  ]);
+import { ref, reactive, watch, defineProps } from 'vue';
+import { SvgIcon } from '/@/components/Icon';
+import { getAssetURL } from '/@/utils/ui';
+
+let props = defineProps({
+  shareData: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  }
+})
+
+let fileTitle = ref('文件共享中心');
+let fileData = reactive<any[]>([]);
+
+watch(() => props.shareData, (newV, oldV) => {
+  console.log(newV, '文件共享中心数据999999-----')
+  if (newV.length != 0) {
+    fileData.length = 0
+    newV.forEach(el => {
+      fileData.push({
+        title: el.title,
+        imgSrc: getAssetURL('company/file/file2.png'),
+        imgSrc1: getAssetURL('company/file/file1.png'),
+        label: '文件总数',
+        label1: '待审批文件',
+        value: el.value,
+        value1: el.value1,
+      })
+    })
+
+  }
+}, {
+  immediate: true,
+  deep: true
+})
 </script>
 <style lang="less" scoped>
-  @font-face {
+@font-face {
+  font-family: 'douyuFont';
+  src: url('../../../../assets/font/douyuFont.otf');
+}
+
+.fileShare {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .file-title {
+    position: absolute;
+    left: 54px;
+    top: 12px;
+    color: #fff;
     font-family: 'douyuFont';
-    src: url('../../../../assets/font/douyuFont.otf');
+    font-size: 14px;
   }
 
-  .fileShare {
-    width: 100%;
-    height: 100%;
+  .file-content {
     position: relative;
+    height: 100%;
+    padding: 57px 40px 23px 40px;
+    box-sizing: border-box;
+
+    .left-jt {
+      position: absolute;
+      top: 50%;
+      left: 18px;
+      transform: translate(0, -50%);
+    }
 
-    .file-title {
+    .right-jt {
       position: absolute;
-      left: 54px;
-      top: 12px;
-      color: #fff;
-      font-family: 'douyuFont';
-      font-size: 14px;
+      top: 50%;
+      right: 18px;
+      transform: translate(0, -50%);
     }
 
-    .file-content {
-      position: relative;
+    .file-card {
       height: 100%;
-      padding: 57px 40px 23px 40px;
+      padding: 0px 30px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      flex-wrap: wrap;
       box-sizing: border-box;
 
-      .left-jt {
-        position: absolute;
-        top: 50%;
-        left: 18px;
-        transform: translate(0, -50%);
-      }
+      .card-box {
+        position: relative;
+        width: 255px;
+        height: 91px;
+        background: url('../../../../../assets/images/company/file-card.png') no-repeat center;
+        background-size: 100% 100%;
 
-      .right-jt {
-        position: absolute;
-        top: 50%;
-        right: 18px;
-        transform: translate(0, -50%);
-      }
+        .box-t {
+          position: absolute;
+          left: 12px;
+          top: 3px;
+          font-family: 'douyuFont';
+          font-size: 14px;
+          color: #fff;
+        }
 
-      .file-card {
-        height: 100%;
-        padding: 0px 30px;
-        display: flex;
-        justify-content: flex-start;
-        align-items: flex-start;
-        flex-wrap: wrap;
-        box-sizing: border-box;
-
-        .card-box {
-          position: relative;
-          width: 255px;
-          height: 91px;
-          background: url('../../../../../assets/images/company/file-card.png') no-repeat center;
-          background-size: 100% 100%;
-          .box-t {
-            position: absolute;
-            left: 12px;
-            top: 3px;
-            font-family: 'douyuFont';
-            font-size: 14px;
-            color: #fff;
-          }
-          .box-b {
-            position: absolute;
-            left: 0;
-            top: 24px;
-            width: 100%;
-            height: 66px;
+        .box-b {
+          position: absolute;
+          left: 0;
+          top: 24px;
+          width: 100%;
+          height: 66px;
+          display: flex;
+          justify-content: space-between;
+
+          .ite-box {
             display: flex;
-            justify-content: space-between;
-            .ite-box {
+            flex: 1;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+
+            .content {
               display: flex;
-              flex: 1;
-              justify-content: center;
+              flex-direction: column;
+              justify-content: space-around;
               align-items: center;
-              height: 100%;
-
-              .content {
-                display: flex;
-                flex-direction: column;
-                justify-content: space-around;
-                align-items: center;
-                .content-label {
-                  padding-left: 5px;
-                  font-size: 12px;
-                  color: #fff;
-                  background: linear-gradient(to right, rgba(3, 52, 105, 1), rgba(3, 52, 105, 0.4), transparent);
-                }
-                .content-value {
-                  font-size: 16px;
-                  color: #64caff;
-                }
-                .content-label1 {
-                  padding-left: 5px;
-                  font-size: 12px;
-                  color: #fff;
-                  background: linear-gradient(to right, rgba(3, 73, 104, 1), rgba(3, 73, 104, 0.4), transparent);
-                }
-                .content-value1 {
-                  font-size: 16px;
-                  color: #3df6ff;
-                }
+
+              .content-label {
+                padding-left: 5px;
+                font-size: 12px;
+                color: #fff;
+                background: linear-gradient(to right, rgba(3, 52, 105, 1), rgba(3, 52, 105, 0.4), transparent);
+              }
+
+              .content-value {
+                font-size: 16px;
+                color: #64caff;
+              }
+
+              .content-label1 {
+                padding-left: 5px;
+                font-size: 12px;
+                color: #fff;
+                background: linear-gradient(to right, rgba(3, 73, 104, 1), rgba(3, 73, 104, 0.4), transparent);
+              }
+
+              .content-value1 {
+                font-size: 16px;
+                color: #3df6ff;
               }
             }
           }
+        }
 
-          &:nth-child(1) {
-            margin-bottom: 10px;
-          }
+        &:nth-child(1) {
+          margin-bottom: 10px;
+        }
 
-          &:nth-child(2) {
-            margin: 0px 39px 10px 39px;
-          }
+        &:nth-child(2) {
+          margin: 0px 39px 10px 39px;
+        }
 
-          &:nth-child(3) {
-            margin-bottom: 10px;
-          }
+        &:nth-child(3) {
+          margin-bottom: 10px;
+        }
 
-          &:nth-child(5) {
-            margin: 0px 39px;
-          }
+        &:nth-child(5) {
+          margin: 0px 39px;
         }
       }
     }
   }
+}
 </style>

src/views/vent/home/clique/components/mine-wind.vue

@@ -7,7 +7,7 @@
       </div>
       <div class="content-text">
         <div class="text" v-for="(item, index) in mineData" :key="index">
-          <span>{{ item.name }}</span>
+          <span>{{ item.deviceName }}</span>
           <span>{{ item.jf }}</span>
           <span>{{ item.hf }}</span>
           <span>{{ item.xf }}</span>
@@ -17,19 +17,28 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, reactive } from 'vue';
+  import { ref, reactive,watch,defineProps } from 'vue';
 
+  let props=defineProps({
+    airKjStatus:{
+      type:Array,
+      default:()=>{
+        return []
+      }
+    }
+  })
   let mineTitle = ref('矿井通风状态监测');
   let labelList = reactive([{ name: '矿井名称' }, { name: '总进风量' }, { name: '总回风量' }, { name: '总需风量' }]);
-  let mineData = reactive([
-    { name: 'XXX', jf: 10215, hf: 10198, xf: 9810 },
-    { name: 'XXX', jf: 10215, hf: 10198, xf: 9810 },
-    { name: 'XXX', jf: 10215, hf: 10198, xf: 9810 },
-    { name: 'XXX', jf: 10215, hf: 10198, xf: 9810 },
-    { name: 'XXX', jf: 10215, hf: 10198, xf: 9810 },
-    { name: 'XXX', jf: 10215, hf: 10198, xf: 9810 },
-    { name: 'XXX', jf: 10215, hf: 10198, xf: 9810 },
-  ]);
+  let mineData = ref<any[]>([]);
+
+  watch(()=>props.airKjStatus,(newA,oldA)=>{
+    console.log(newA,'airKjStatus-----------')
+    if(newA.length!=0){
+      mineData.value=newA
+    }
+  },{
+    immediate: true, deep: true
+  })
 </script>
 <style lang="less" scoped>
   @font-face {
@@ -67,10 +76,22 @@
         align-items: center;
         background: url('../../../../../assets/images/company/content-label.png') no-repeat;
         .label-t {
-          width: 25%;
           color: #3df6ff;
           text-align: center;
           font-size: 14px;
+          &:nth-child(1){
+            width: 31%;
+          }
+          &:nth-child(2){
+            width: 23%;
+          }
+          &:nth-child(3){
+            width: 23%;
+          }
+          &:nth-child(4){
+            width: 23%;
+          }
+         
         }
       }
 
@@ -79,20 +100,36 @@
         width: 378px;
         display: flex;
         flex-direction: column;
-        justify-content: space-around;
+        // justify-content: space-around;
+        justify-content: flex-start;
+        padding: 5px 0px;
+        box-sizing: border-box;
         overflow-y: auto;
         .text {
           width: 100%;
-          height: 25px;
+          height: 28px;
           display: flex;
           justify-content: space-around;
           align-items: flex-start;
           background: url('../../../../../assets/images/company/content-text.png') no-repeat;
           color: #fff;
+          margin-bottom: 5px;
           span {
             display: inline-block;
-            width: 25%;
             text-align: center;
+            &:nth-child(1){
+            width: 31%;
+            }
+            &:nth-child(2){
+            width: 23%;
+            }
+            &:nth-child(3){
+            width: 23%;
+            }
+            &:nth-child(4){
+            width: 23%;
+            }
+           
           }
         }
       }

src/views/vent/home/clique/components/risk-warn.vue

@@ -6,16 +6,13 @@
         <div class="animation-box">
           <canvas class="rain"></canvas>
 
-          <div
-            class="bottom"
-            :class="{
-              bottom1: centerData.levels == 101,
-              bottom2: centerData.levels == 102,
-              bottom3: centerData.levels == 103,
-              bottom4: centerData.levels == 104,
-              bottom5: centerData.levels == 201,
-            }"
-          >
+          <div class="bottom" :class="{
+      bottom1: centerData.levels == 101,
+      bottom2: centerData.levels == 102,
+      bottom3: centerData.levels == 103,
+      bottom4: centerData.levels == 104,
+      bottom5: centerData.levels == 201,
+    }">
             <!-- <div class="animation1">
                             <div class="ball"></div>
                             <svg xmlns="http://www.w3.org/2000/svg" width="355.334" height="77.559"
@@ -40,18 +37,18 @@
                         </div> -->
             <div class="text-box">
               <div class="text1">{{
-                centerData.levels == 101
-                  ? '正常'
-                  : centerData.levels == 102
-                  ? '低风险'
-                  : centerData.levels == 103
-                  ? '中风险'
-                  : centerData.levels == 104
-                  ? '高风险'
-                  : centerData.levels == 201
-                  ? '报警'
-                  : '--'
-              }}</div>
+      centerData.levels == 101
+        ? '正常'
+        : centerData.levels == 102
+          ? '低风险'
+          : centerData.levels == 103
+            ? '中风险'
+            : centerData.levels == 104
+              ? '高风险'
+              : centerData.levels == 201
+                ? '报警'
+                : '--'
+    }}</div>
               <div class="text2">风险分析</div>
             </div>
             <div class="icon-animation"></div>
@@ -113,515 +110,537 @@
     </div>
   </div>
 </template>
+
 <script lang="ts" setup>
-  import { ref, reactive, onMounted } from 'vue';
-  import { rainBg } from '/@/utils/ui.js';
-
-  let riskTitle = ref('一通三防风险分析与预警');
-  let centerData = reactive({
-    levels: 103,
-    fire: '正常',
-    sb: '正常',
-    ws: '异常',
-    fc: '正常',
-    tf: '正常',
-  });
-
-  onMounted(async () => {
-    rainBg('rain', 'animation-box');
-  });
+import { ref, reactive, onMounted, defineProps, watch } from 'vue';
+import { rainBg } from '/@/utils/ui.js';
+
+let props = defineProps({
+  earlyWarn: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  }
+})
+
+let riskTitle = ref('一通三防风险分析与预警');
+let centerData = reactive({
+  levels: 0,
+  fire: '',
+  sb: '',
+  ws: '',
+  fc: '',
+  tf: '',
+});
+
+watch(() => props.earlyWarn, (newE, oldE) => {
+  console.log(newE, '预警与分析数据------------')
+  centerData.levels = newE.levels
+  centerData.fire = newE.fire
+  centerData.sb = newE.sb
+  centerData.ws = newE.ws
+  centerData.fc = newE.fc
+  centerData.tf = newE.tf
+}, {
+  immediate: true,
+  deep: true
+})
+
+onMounted(async () => {
+  rainBg('rain', 'animation-box');
+});
 </script>
+
 <style lang="less" scoped>
-  @font-face {
+@font-face {
+  font-family: 'douyuFont';
+  src: url('../../../../assets/font/douyuFont.otf');
+}
+
+.riskWarn {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .risk-title {
+    position: absolute;
+    left: 50px;
+    top: 10px;
+    color: #fff;
     font-family: 'douyuFont';
-    src: url('../../../../assets/font/douyuFont.otf');
+    font-size: 14px;
   }
 
-  .riskWarn {
-    position: relative;
-    width: 100%;
+  .risk-content {
     height: 100%;
+    padding: 55px 0px 20px 0px;
+    box-sizing: border-box;
 
-    .risk-title {
-      position: absolute;
-      left: 50px;
-      top: 10px;
-      color: #fff;
-      font-family: 'douyuFont';
-      font-size: 14px;
-    }
-
-    .risk-content {
+    .center-box {
+      width: 100%;
       height: 100%;
-      padding: 55px 0px 20px 0px;
-      box-sizing: border-box;
-
-      .center-box {
-        width: 100%;
-        height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+
+      .animation-box {
+        height: fit-content;
+        flex: 1;
+        margin-bottom: 10px;
+        background: url('/@/assets/images/vent/alarm/center-bg.png');
+        background-size: contain;
+        background-position: center;
         display: flex;
         flex-direction: column;
-        justify-content: flex-end;
-
-        .animation-box {
-          height: fit-content;
-          flex: 1;
-          margin-bottom: 10px;
-          background: url('/@/assets/images/vent/alarm/center-bg.png');
-          background-size: contain;
-          background-position: center;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          position: relative;
-          top: 0px;
+        align-items: center;
+        position: relative;
+        top: 0px;
+
+        .rain {
+          position: absolute;
+        }
 
-          .rain {
+        .bottom {
+          width: 100%;
+          height: 90%;
+          background-repeat: no-repeat;
+          position: absolute;
+          z-index: 999;
+
+          &::before {
+            content: '';
+            width: 230px;
+            height: 234px;
             position: absolute;
+            left: 112px;
+            top: -19px;
+            background: url('/@/assets/images/vent/alarm/warning-bg.png') no-repeat;
+            background-size: 92% 100%;
           }
 
-          .bottom {
-            width: 100%;
-            height: 90%;
-            background-repeat: no-repeat;
+          .animation1 {
+            width: 320px;
+            height: 78px;
             position: absolute;
+            top: 4px;
+            left: 31px;
             z-index: 999;
 
-            &::before {
-              content: '';
-              width: 230px;
-              height: 234px;
+            .ball {
               position: absolute;
-              left: 112px;
-              top: -19px;
-              background: url('/@/assets/images/vent/alarm/warning-bg.png') no-repeat;
-              background-size: 92% 100%;
-            }
-
-            .animation1 {
-              width: 320px;
-              height: 78px;
-              position: absolute;
-              top: 4px;
-              left: 31px;
-              z-index: 999;
-
-              .ball {
-                position: absolute;
-                width: 12px;
-                height: 12px;
-                background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
-                border-radius: 6px;
-                background-size: cover;
-                offset-path: path(
-                  'M186.917-.75c12.711,0,25.415.263,37.757.783,12.03.506,23.863,1.262,35.171,2.245,11.1.966,21.816,2.161,31.835,3.553,9.928,1.379,19.265,2.963,27.751,4.709s16.2,3.668,22.92,5.713A120.653,120.653,0,0,1,359.7,22.825a40.842,40.842,0,0,1,11.018,7.3c2.568,2.581,3.87,5.239,3.87,7.9s-1.3,5.322-3.87,7.9a40.842,40.842,0,0,1-11.018,7.3,120.653,120.653,0,0,1-17.345,6.572c-6.716,2.044-14.428,3.966-22.92,5.713s-17.823,3.329-27.751,4.709c-10.02,1.392-20.731,2.588-31.835,3.553-11.308.984-23.142,1.739-35.171,2.245-12.343.519-25.046.783-37.757.783s-25.415-.263-37.757-.783c-12.03-.506-23.863-1.262-35.171-2.245-11.1-.966-21.816-2.161-31.835-3.553-9.928-1.379-19.265-2.963-27.751-4.709s-16.2-3.668-22.92-5.713a120.652,120.652,0,0,1-17.345-6.572,40.841,40.841,0,0,1-11.018-7.3c-2.568-2.581-3.87-5.239-3.87-7.9s1.3-5.322,3.87-7.9a40.842,40.842,0,0,1,11.018-7.3,120.651,120.651,0,0,1,17.345-6.572C38.2,14.208,45.91,12.286,54.4,10.54S72.225,7.211,82.153,5.831c10.02-1.392,20.731-2.588,31.835-3.553C125.3,1.294,137.13.539,149.16.033,161.5-.487,174.206-.75,186.917-.75Zm0,76.98c49.941,0,96.885-4,132.186-11.257,17.134-3.523,30.578-7.623,39.96-12.184,9.642-4.688,14.53-9.653,14.53-14.759s-4.889-10.072-14.53-14.759c-9.382-4.561-22.826-8.66-39.96-12.184C283.8,3.827,236.858-.171,186.917-.171s-96.885,4-132.186,11.257C37.6,14.61,24.153,18.709,14.771,23.27,5.129,27.958.241,32.923.241,38.029S5.129,48.1,14.771,52.789c9.382,4.561,22.826,8.661,39.96,12.184C90.032,72.232,136.976,76.23,186.917,76.23Z'
+              width: 12px;
+              height: 12px;
+              background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
+              border-radius: 6px;
+              background-size: cover;
+              offset-path: path('M186.917-.75c12.711,0,25.415.263,37.757.783,12.03.506,23.863,1.262,35.171,2.245,11.1.966,21.816,2.161,31.835,3.553,9.928,1.379,19.265,2.963,27.751,4.709s16.2,3.668,22.92,5.713A120.653,120.653,0,0,1,359.7,22.825a40.842,40.842,0,0,1,11.018,7.3c2.568,2.581,3.87,5.239,3.87,7.9s-1.3,5.322-3.87,7.9a40.842,40.842,0,0,1-11.018,7.3,120.653,120.653,0,0,1-17.345,6.572c-6.716,2.044-14.428,3.966-22.92,5.713s-17.823,3.329-27.751,4.709c-10.02,1.392-20.731,2.588-31.835,3.553-11.308.984-23.142,1.739-35.171,2.245-12.343.519-25.046.783-37.757.783s-25.415-.263-37.757-.783c-12.03-.506-23.863-1.262-35.171-2.245-11.1-.966-21.816-2.161-31.835-3.553-9.928-1.379-19.265-2.963-27.751-4.709s-16.2-3.668-22.92-5.713a120.652,120.652,0,0,1-17.345-6.572,40.841,40.841,0,0,1-11.018-7.3c-2.568-2.581-3.87-5.239-3.87-7.9s1.3-5.322,3.87-7.9a40.842,40.842,0,0,1,11.018-7.3,120.651,120.651,0,0,1,17.345-6.572C38.2,14.208,45.91,12.286,54.4,10.54S72.225,7.211,82.153,5.831c10.02-1.392,20.731-2.588,31.835-3.553C125.3,1.294,137.13.539,149.16.033,161.5-.487,174.206-.75,186.917-.75Zm0,76.98c49.941,0,96.885-4,132.186-11.257,17.134-3.523,30.578-7.623,39.96-12.184,9.642-4.688,14.53-9.653,14.53-14.759s-4.889-10.072-14.53-14.759c-9.382-4.561-22.826-8.66-39.96-12.184C283.8,3.827,236.858-.171,186.917-.171s-96.885,4-132.186,11.257C37.6,14.61,24.153,18.709,14.771,23.27,5.129,27.958.241,32.923.241,38.029S5.129,48.1,14.771,52.789c9.382,4.561,22.826,8.661,39.96,12.184C90.032,72.232,136.976,76.23,186.917,76.23Z'
                 );
-                animation: 10s linear 0s infinite alternate ball;
-              }
+              animation: 10s linear 0s infinite alternate ball;
             }
+          }
 
-            .animation2 {
-              width: 340px;
-              height: 92px;
-              position: absolute;
-              top: 36px;
-              left: 12px;
-              z-index: 999;
+          .animation2 {
+            width: 340px;
+            height: 92px;
+            position: absolute;
+            top: 36px;
+            left: 12px;
+            z-index: 999;
 
-              // animation: rotate4 3s linear infinite;
-              .ball1 {
-                position: absolute;
-                width: 12px;
-                height: 12px;
-                background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
-                border-radius: 6px;
-                background-size: cover;
-                offset-path: path(
-                  'M206.689-.75c14.05,0,28.092.311,41.735.925,13.3.6,26.377,1.492,38.877,2.655,12.275,1.142,24.114,2.555,35.189,4.2,10.974,1.631,21.294,3.5,30.674,5.567s17.91,4.337,25.335,6.754a128.134,128.134,0,0,1,19.172,7.771,45.082,45.082,0,0,1,12.178,8.633c2.838,3.051,4.278,6.195,4.278,9.344s-1.439,6.293-4.278,9.344a45.082,45.082,0,0,1-12.178,8.633A128.134,128.134,0,0,1,378.5,70.847c-7.424,2.417-15.948,4.69-25.335,6.754s-19.7,3.936-30.674,5.567c-11.075,1.646-22.915,3.059-35.189,4.2-12.5,1.163-25.58,2.056-38.877,2.655-13.643.614-27.685.925-41.735.925s-28.092-.311-41.735-.925c-13.3-.6-26.377-1.492-38.877-2.655-12.275-1.142-24.114-2.555-35.189-4.2-10.974-1.631-21.294-3.5-30.674-5.567S42.3,73.265,34.879,70.847a128.133,128.133,0,0,1-19.173-7.771A45.082,45.082,0,0,1,3.528,54.444C.689,51.393-.75,48.249-.75,45.1s1.439-6.293,4.278-9.344a45.083,45.083,0,0,1,12.178-8.633,128.133,128.133,0,0,1,19.173-7.771c7.424-2.417,15.948-4.69,25.335-6.754s19.7-3.936,30.674-5.567c11.075-1.646,22.915-3.059,35.189-4.2,12.5-1.163,25.58-2.056,38.877-2.655C178.6-.439,192.639-.75,206.689-.75Zm0,91.015c55.2,0,107.093-4.727,146.113-13.31,18.939-4.166,33.8-9.012,44.17-14.405,10.657-5.542,16.061-11.413,16.061-17.45s-5.4-11.908-16.061-17.45c-10.37-5.393-25.231-10.24-44.17-14.405C313.782,4.662,261.892-.065,206.689-.065S99.6,4.662,60.576,13.244c-18.939,4.166-33.8,9.012-44.17,14.405C5.749,33.192.345,39.063.345,45.1s5.4,11.908,16.061,17.45c10.37,5.393,25.231,10.24,44.17,14.405C99.6,85.538,151.487,90.265,206.689,90.265Z'
+            // animation: rotate4 3s linear infinite;
+            .ball1 {
+              position: absolute;
+              width: 12px;
+              height: 12px;
+              background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
+              border-radius: 6px;
+              background-size: cover;
+              offset-path: path('M206.689-.75c14.05,0,28.092.311,41.735.925,13.3.6,26.377,1.492,38.877,2.655,12.275,1.142,24.114,2.555,35.189,4.2,10.974,1.631,21.294,3.5,30.674,5.567s17.91,4.337,25.335,6.754a128.134,128.134,0,0,1,19.172,7.771,45.082,45.082,0,0,1,12.178,8.633c2.838,3.051,4.278,6.195,4.278,9.344s-1.439,6.293-4.278,9.344a45.082,45.082,0,0,1-12.178,8.633A128.134,128.134,0,0,1,378.5,70.847c-7.424,2.417-15.948,4.69-25.335,6.754s-19.7,3.936-30.674,5.567c-11.075,1.646-22.915,3.059-35.189,4.2-12.5,1.163-25.58,2.056-38.877,2.655-13.643.614-27.685.925-41.735.925s-28.092-.311-41.735-.925c-13.3-.6-26.377-1.492-38.877-2.655-12.275-1.142-24.114-2.555-35.189-4.2-10.974-1.631-21.294-3.5-30.674-5.567S42.3,73.265,34.879,70.847a128.133,128.133,0,0,1-19.173-7.771A45.082,45.082,0,0,1,3.528,54.444C.689,51.393-.75,48.249-.75,45.1s1.439-6.293,4.278-9.344a45.083,45.083,0,0,1,12.178-8.633,128.133,128.133,0,0,1,19.173-7.771c7.424-2.417,15.948-4.69,25.335-6.754s19.7-3.936,30.674-5.567c11.075-1.646,22.915-3.059,35.189-4.2,12.5-1.163,25.58-2.056,38.877-2.655C178.6-.439,192.639-.75,206.689-.75Zm0,91.015c55.2,0,107.093-4.727,146.113-13.31,18.939-4.166,33.8-9.012,44.17-14.405,10.657-5.542,16.061-11.413,16.061-17.45s-5.4-11.908-16.061-17.45c-10.37-5.393-25.231-10.24-44.17-14.405C313.782,4.662,261.892-.065,206.689-.065S99.6,4.662,60.576,13.244c-18.939,4.166-33.8,9.012-44.17,14.405C5.749,33.192.345,39.063.345,45.1s5.4,11.908,16.061,17.45c10.37,5.393,25.231,10.24,44.17,14.405C99.6,85.538,151.487,90.265,206.689,90.265Z'
                 );
-                animation: 10s linear 0s infinite alternate ball1;
-              }
+              animation: 10s linear 0s infinite alternate ball1;
             }
+          }
 
-            .text-box {
-              width: 100%;
-              display: flex;
-              flex-direction: column;
-              color: #fff;
-              align-items: center;
-              margin-top: 52px;
-
-              .text1 {
-                font-size: 18px;
-                font-weight: 600;
-                letter-spacing: 2px;
-                margin-bottom: 10px;
-              }
+          .text-box {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            color: #fff;
+            align-items: center;
+            margin-top: 52px;
 
-              .text2 {
-                font-size: 14px;
-                color: #ffffffdd;
-              }
+            .text1 {
+              font-size: 18px;
+              font-weight: 600;
+              letter-spacing: 2px;
+              margin-bottom: 10px;
             }
 
-            .icon-animation {
-              width: 118px;
-              height: 129px;
-              margin: 0 auto;
-              top: -90px;
-              left: 2px;
-              position: relative;
-              animation: 0.5s linear 0s infinite alternate iconMove;
+            .text2 {
+              font-size: 14px;
+              color: #ffffffdd;
             }
           }
 
-          .bottom1 {
-            background-image: url('/@/assets/images/vent/alarm/warning-icon-bg1.png');
-            background-size: 80% 100%;
-            background-position: 50% 0%;
-
-            .icon-animation {
-              background: url('/@/assets/images/vent/alarm/warning-icon-bg-a1.png');
-              background-size: 100% 100%;
-            }
-
-            .text-box {
-              .text1 {
-                color: #00d8ff;
-              }
-            }
+          .icon-animation {
+            width: 118px;
+            height: 129px;
+            margin: 0 auto;
+            top: -90px;
+            left: 2px;
+            position: relative;
+            animation: 0.5s linear 0s infinite alternate iconMove;
           }
+        }
 
-          .bottom2 {
-            background-image: url('/@/assets/images/vent/alarm/warning-icon-bg2.png');
-            background-size: 80% 100%;
-            background-position: 50% 0%;
+        .bottom1 {
+          background-image: url('/@/assets/images/vent/alarm/warning-icon-bg1.png');
+          background-size: 80% 100%;
+          background-position: 50% 0%;
 
-            .icon-animation {
-              background: url('/@/assets/images/vent/alarm/warning-icon-bg-a2.png');
-              background-size: 100% 100%;
-            }
+          .icon-animation {
+            background: url('/@/assets/images/vent/alarm/warning-icon-bg-a1.png');
+            background-size: 100% 100%;
+          }
 
-            .text-box {
-              .text1 {
-                color: #fcfc22;
-              }
+          .text-box {
+            .text1 {
+              color: #00d8ff;
             }
           }
+        }
 
-          .bottom3 {
-            background-image: url('/@/assets/images/vent/alarm/warning-icon-bg3.png');
-            background-size: 80% 100%;
-            background-position: 50% 0%;
+        .bottom2 {
+          background-image: url('/@/assets/images/vent/alarm/warning-icon-bg2.png');
+          background-size: 80% 100%;
+          background-position: 50% 0%;
 
-            .icon-animation {
-              background: url('/@/assets/images/vent/alarm/warning-icon-bg-a3.png');
-              background-size: 100% 100%;
-            }
+          .icon-animation {
+            background: url('/@/assets/images/vent/alarm/warning-icon-bg-a2.png');
+            background-size: 100% 100%;
+          }
 
-            .text-box {
-              .text1 {
-                color: #ff7010;
-              }
+          .text-box {
+            .text1 {
+              color: #fcfc22;
             }
           }
+        }
 
-          .bottom4 {
-            background-image: url('/@/assets/images/vent/alarm/warning-icon-bg4.png');
-            background-size: 80% 100%;
-            background-position: 50% 0%;
+        .bottom3 {
+          background-image: url('/@/assets/images/vent/alarm/warning-icon-bg3.png');
+          background-size: 80% 100%;
+          background-position: 50% 0%;
 
-            .icon-animation {
-              background: url('/@/assets/images/vent/alarm/warning-icon-bg-a4.png');
-              background-size: 100% 100%;
-            }
+          .icon-animation {
+            background: url('/@/assets/images/vent/alarm/warning-icon-bg-a3.png');
+            background-size: 100% 100%;
+          }
 
-            .text-box {
-              .text1 {
-                color: #df4e43;
-              }
+          .text-box {
+            .text1 {
+              color: #ff7010;
             }
           }
+        }
 
-          .bottom5 {
-            background-image: url('/@/assets/images/vent/alarm/warning-icon-bg5.png');
-            background-size: 80% 100%;
-            background-position: 50% 0%;
+        .bottom4 {
+          background-image: url('/@/assets/images/vent/alarm/warning-icon-bg4.png');
+          background-size: 80% 100%;
+          background-position: 50% 0%;
 
-            .icon-animation {
-              background: url('/@/assets/images/vent/alarm/warning-icon-bg-a5.png');
-              background-size: 100% 100%;
-            }
-
-            .text-box {
-              .text1 {
-                color: #ff2313;
-                // animation: color-blink 1s infinite;
-              }
+          .icon-animation {
+            background: url('/@/assets/images/vent/alarm/warning-icon-bg-a4.png');
+            background-size: 100% 100%;
+          }
 
-              // @keyframes color-blink {
-              //   0% { color: red; }
-              //   50% { color: blue; }
-              //   100% { color: red; }
-              // }
+          .text-box {
+            .text1 {
+              color: #df4e43;
             }
           }
+        }
 
-          .total-item-monitor-box {
-            width: 66%;
-            height: 124px;
-            position: relative;
-
-            top: 122px;
-            left: 0;
-            background: url('/@/assets/images/vent/alarm/bottom1.png') no-repeat;
+        .bottom5 {
+          background-image: url('/@/assets/images/vent/alarm/warning-icon-bg5.png');
+          background-size: 80% 100%;
+          background-position: 50% 0%;
 
+          .icon-animation {
+            background: url('/@/assets/images/vent/alarm/warning-icon-bg-a5.png');
             background-size: 100% 100%;
+          }
 
-            &::after {
-              content: '';
-
-              width: 400px;
-              height: 362px;
-              position: absolute;
-              transform-style: preserve-3d;
-              transform: translateX(0%) translateY(0%) rotateX(72deg);
-              background: url('/@/assets/images/vent/alarm/bottom.png');
-              background-size: 100% 100%; //lxh
-              animation: rotate1 3s linear infinite;
-
-              top: -93px;
-              left: -52px;
+          .text-box {
+            .text1 {
+              color: #ff2313;
+              // animation: color-blink 1s infinite;
             }
 
-            .item {
-              position: absolute;
+            // @keyframes color-blink {
+            //   0% { color: red; }
+            //   50% { color: blue; }
+            //   100% { color: red; }
+            // }
+          }
+        }
 
-              // width: 107px;
-              // height: 107px;
-              // left: 120px;
-              // top: 115px;
-              // animation: red-ball 10s linear infinite;
-              .icon-box {
-                width: 60px;
-                height: 60px;
+        .total-item-monitor-box {
+          width: 66%;
+          height: 124px;
+          position: relative;
 
-                position: relative;
-                z-index: 0;
-
-                &::before {
-                  position: absolute;
-                  content: '';
-
-                  width: 80px;
-                  height: 42px;
-                  top: 30px;
-                  z-index: -1;
-                  background: url('/@/assets/images/vent/alarm/icon-bg.png') no-repeat;
-                  background-size: 100% 100%;
-                }
+          top: 122px;
+          left: 0;
+          background: url('/@/assets/images/vent/alarm/bottom1.png') no-repeat;
 
-                &::after {
-                  position: absolute;
-                  content: '';
-                  width: 48px;
-                  height: 48px;
-                  top: 33px;
-                  left: 14px;
-                  z-index: 1;
-                  background: url(/src/assets/images/vent/alarm/icon-animation.png) no-repeat;
-                  background-size: 100% 100%;
-                  transform: translateX(0%) rotateX(70deg);
-                  animation: rotate2 2s linear infinite;
-                }
+          background-size: 100% 100%;
 
-                .icon {
-                  width: 32px;
-                  height: 32px;
-                  background-repeat: no-repeat;
-                  background-position: top center;
-                  position: relative;
-                  top: 27px;
-                  left: 24px;
-                }
-              }
+          &::after {
+            content: '';
 
-              .item-monitor-box {
-                width: 112px;
-                color: #fff;
-                position: relative;
-                top: -58px;
-                left: -16px;
-                font-weight: 600;
-
-                padding: 0px 5px 0px 5px;
-
-                &::before {
-                  position: absolute;
-                  content: '';
-                  width: 112px;
-                  height: 24px;
-                  left: 4px;
-                  top: 0px;
-                  background: url('/@/assets/images/vent/alarm/data-bg.png');
-                  background-size: 100% 100%;
-                }
+            width: 400px;
+            height: 362px;
+            position: absolute;
+            transform-style: preserve-3d;
+            transform: translateX(0%) translateY(0%) rotateX(72deg);
+            background: url('/@/assets/images/vent/alarm/bottom.png');
+            background-size: 100% 100%; //lxh
+            animation: rotate1 3s linear infinite;
+
+            top: -93px;
+            left: -52px;
+          }
 
-                .value {
-                  color: #2bdcff;
-                  margin-left: 10px;
-                }
+          .item {
+            position: absolute;
 
-                .value1 {
-                  font-size: 16px;
-                  font-weight: 800;
-                  margin-top: 6px;
-                  color: #ff0000;
-                  animation: color-blink 1s infinite;
-                }
+            // width: 107px;
+            // height: 107px;
+            // left: 120px;
+            // top: 115px;
+            // animation: red-ball 10s linear infinite;
+            .icon-box {
+              width: 60px;
+              height: 60px;
 
-                @keyframes color-blink {
-                  0% {
-                    color: red;
-                  }
+              position: relative;
+              z-index: 0;
 
-                  50% {
-                    color: rgb(198, 0, 0);
-                  }
+              &::before {
+                position: absolute;
+                content: '';
 
-                  100% {
-                    color: rgb(255, 18, 18);
-                  }
-                }
+                width: 80px;
+                height: 42px;
+                top: 30px;
+                z-index: -1;
+                background: url('/@/assets/images/vent/alarm/icon-bg.png') no-repeat;
+                background-size: 100% 100%;
               }
-            }
-
-            .item1 {
-              top: 85px;
-              left: 100px;
 
-              .icon {
-                background-image: url('/@/assets/images/vent/alarm/icon-fire.svg');
+              &::after {
+                position: absolute;
+                content: '';
+                width: 48px;
+                height: 48px;
+                top: 33px;
+                left: 14px;
+                z-index: 1;
+                background: url(/src/assets/images/vent/alarm/icon-animation.png) no-repeat;
                 background-size: 100% 100%;
+                transform: translateX(0%) rotateX(70deg);
+                animation: rotate2 2s linear infinite;
               }
-            }
-
-            .item2 {
-              top: 68px;
-              left: -38px;
 
               .icon {
-                background-image: url('/@/assets/images/vent/alarm/icon-device.svg');
-                background-size: 100% 100%;
+                width: 32px;
+                height: 32px;
+                background-repeat: no-repeat;
+                background-position: top center;
+                position: relative;
+                top: 27px;
+                left: 24px;
               }
             }
 
-            .item3 {
-              top: 68px;
-              left: 247px;
+            .item-monitor-box {
+              width: 112px;
+              color: #fff;
+              position: relative;
+              top: -58px;
+              left: -16px;
+              font-weight: 600;
 
-              .icon {
-                background-image: url('/@/assets/images/vent/alarm/icon-gas.svg');
+              padding: 0px 5px 0px 5px;
+
+              &::before {
+                position: absolute;
+                content: '';
+                width: 112px;
+                height: 24px;
+                left: 4px;
+                top: 0px;
+                background: url('/@/assets/images/vent/alarm/data-bg.png');
                 background-size: 100% 100%;
               }
 
-              // .item-monitor-box {
-              //     top: -155px;
+              .value {
+                color: #2bdcff;
+                margin-left: 10px;
+              }
 
-              //     &::before {
-              //         top: 10px;
-              //     }
-              // }
-            }
+              .value1 {
+                font-size: 16px;
+                font-weight: 800;
+                margin-top: 6px;
+                color: #ff0000;
+                animation: color-blink 1s infinite;
+              }
 
-            .item4 {
-              top: -5px;
-              left: 247px;
+              @keyframes color-blink {
+                0% {
+                  color: red;
+                }
 
-              .icon {
-                background-image: url('/@/assets/images/vent/alarm/icon-dust.svg');
-                background-size: 100% 100%;
+                50% {
+                  color: rgb(198, 0, 0);
+                }
+
+                100% {
+                  color: rgb(255, 18, 18);
+                }
               }
             }
+          }
 
-            .item5 {
-              top: -5px;
-              left: -38px;
+          .item1 {
+            top: 85px;
+            left: 100px;
 
-              .icon {
-                background-image: url('/@/assets/images/vent/alarm/icon-vent.svg');
-                background-size: 100% 100%;
-              }
+            .icon {
+              background-image: url('/@/assets/images/vent/alarm/icon-fire.svg');
+              background-size: 100% 100%;
             }
           }
 
-          @keyframes iconMove {
-            100% {
-              opacity: 0;
+          .item2 {
+            top: 68px;
+            left: -38px;
+
+            .icon {
+              background-image: url('/@/assets/images/vent/alarm/icon-device.svg');
+              background-size: 100% 100%;
             }
           }
 
-          @keyframes rotate1 {
-            0% {
-              transform: translateX(0%) rotateX(72deg) rotateZ(-360deg);
-            }
+          .item3 {
+            top: 68px;
+            left: 247px;
 
-            100% {
-              transform: translateX(0%) rotateX(72deg) rotateZ(0);
+            .icon {
+              background-image: url('/@/assets/images/vent/alarm/icon-gas.svg');
+              background-size: 100% 100%;
             }
+
+            // .item-monitor-box {
+            //     top: -155px;
+
+            //     &::before {
+            //         top: 10px;
+            //     }
+            // }
           }
 
-          @keyframes rotate2 {
-            0% {
-              transform: translateX(0%) rotateX(70deg) rotateZ(0);
-            }
+          .item4 {
+            top: -5px;
+            left: 247px;
 
-            100% {
-              transform: translateX(0%) rotateX(70deg) rotateZ(-360deg);
+            .icon {
+              background-image: url('/@/assets/images/vent/alarm/icon-dust.svg');
+              background-size: 100% 100%;
             }
           }
 
-          @keyframes rotate3 {
-            0% {
-              transform: translateX(0%) rotateX(80deg) rotateZ(0);
-            }
+          .item5 {
+            top: -5px;
+            left: -38px;
 
-            100% {
-              transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
+            .icon {
+              background-image: url('/@/assets/images/vent/alarm/icon-vent.svg');
+              background-size: 100% 100%;
             }
           }
+        }
 
-          @keyframes rotate4 {
-            100% {
-              transform: translateX(0%) rotateX(80deg) rotateZ(0);
-            }
+        @keyframes iconMove {
+          100% {
+            opacity: 0;
+          }
+        }
 
-            0% {
-              transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
-            }
+        @keyframes rotate1 {
+          0% {
+            transform: translateX(0%) rotateX(72deg) rotateZ(-360deg);
           }
 
-          @keyframes ball {
-            100% {
-              offset-distance: 100%;
-            }
+          100% {
+            transform: translateX(0%) rotateX(72deg) rotateZ(0);
+          }
+        }
 
-            0% {
-              offset-distance: 0%;
-            }
+        @keyframes rotate2 {
+          0% {
+            transform: translateX(0%) rotateX(70deg) rotateZ(0);
           }
 
-          @keyframes ball1 {
-            0% {
-              offset-distance: 100%;
-            }
+          100% {
+            transform: translateX(0%) rotateX(70deg) rotateZ(-360deg);
+          }
+        }
 
-            100% {
-              offset-distance: 0%;
-            }
+        @keyframes rotate3 {
+          0% {
+            transform: translateX(0%) rotateX(80deg) rotateZ(0);
+          }
+
+          100% {
+            transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
+          }
+        }
+
+        @keyframes rotate4 {
+          100% {
+            transform: translateX(0%) rotateX(80deg) rotateZ(0);
+          }
+
+          0% {
+            transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
+          }
+        }
+
+        @keyframes ball {
+          100% {
+            offset-distance: 100%;
+          }
+
+          0% {
+            offset-distance: 0%;
+          }
+        }
+
+        @keyframes ball1 {
+          0% {
+            offset-distance: 100%;
+          }
+
+          100% {
+            offset-distance: 0%;
           }
         }
       }
     }
   }
+}
 </style>

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

@@ -4,30 +4,16 @@
     <div class="scene-content">
       <div class="content-t">
 
-        <a-select style="width: 120px;" v-model="select1" allowClear class="code-mode-select"
-          placeholder="请选择">
-          <a-select-option v-for="device in selectList1" :key="device.value" :value="device.value">{{
-            device.label
-          }}
-          </a-select-option>
-        </a-select>
-        <a-select style="width: 120px; " v-model="select1" allowClear class="code-mode-select"
-          placeholder="请选择">
-          <a-select-option v-for="device in selectList1" :key="device.value" :value="device.value">{{
-            device.label
-          }}
-          </a-select-option>
-        </a-select>
-        <a-select style="width: 120px; " v-model="select1" allowClear class="code-mode-select"
-          placeholder="请选择">
-          <a-select-option v-for="device in selectList1" :key="device.value" :value="device.value">{{
-            device.label
-          }}
+        <a-select style="width: 372px;" v-model:value="selectVal" allowClear class="code-mode-select" @change="changeSelect" >
+          <a-select-option v-for="item in selectList"  :value="item.value">{{
+      item.label
+    }}
           </a-select-option>
         </a-select>
+
       </div>
       <div class="content-c">
-        <echartScene></echartScene>
+        <echartScene :echartData="echartData"></echartScene>
       </div>
       <div class="content-b">
         <div class="card-box" v-for="(item, index) in sceneList" :key="index">
@@ -39,7 +25,7 @@
           </i>
           <span class="box-label">{{ item.label }}</span>
           <span class="box-value">{{ item.value }}</span>
-          <i  class="box-img">
+          <i class="box-img">
             <img v-if="true" src="../../../../../assets/images/company/iconS1.png" alt="">
             <img v-else src="../../../../../assets/images/company/iconS2.png" alt="">
             <img v-else src="../../../../../assets/images/company/iconS3.png" alt="">
@@ -50,28 +36,101 @@
     </div>
   </div>
 </template>
+
 <script lang="ts" setup>
-import { ref, reactive } from 'vue'
+import { ref, reactive, defineProps, watch } from 'vue'
 import { SvgIcon } from '/@/components/Icon';
 import echartScene from '../components/echart-scene.vue'
 
+let props = defineProps({
+  compositeData: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  }
+})
+
 let sceneTitle = ref('关键场景通防综合监测')
 
 let sceneList = reactive([
-  { label: '通风风险性', value: '低风险' },
-  { label: '火灾风险性', value: '低风险' },
-  { label: '瓦斯风险性', value: '低风险' },
-  { label: '粉尘风险性', value: '低风险' },
+  { label: '总进风', value: 0 },
+  { label: '总风量', value: 0 },
+  { label: '等级孔', value: 0 },
 ])
 
-let select1 = ref('')
-let selectList1 = reactive([
-  { label: '测试', value: '测试' },
-  { label: '测试1', value: '测试1' }
-])
+let selectVal = ref('')
+let selectList = reactive<any[]>([])
+let compositeDatas=ref<any[]>([])
+
+//图表数据
+let echartData = reactive({
+  jfq: 0,
+  yfq: 0,
+  hfq: 0,
+  zf: 0
+})
+
+//下拉选项切换
+function changeSelect(val){
+  console.log(val,'下拉选项')
+  selectVal.value=val
+  let datas=compositeDatas.value.filter(v=>v.deviceName==selectVal.value)[0]
+      echartData.jfq = datas.majorpath.drag_1
+      echartData.yfq = datas.majorpath.drag_2
+      echartData.hfq = datas.majorpath.drag_3
+      echartData.zf =datas.majorpath.drag_total
+
+      sceneList[0].value = datas.majorpath.drag_total
+      sceneList[1].value = datas.majorpath.m3_total
+      sceneList[2].value = Math.round(((1.19 * sceneList[1].value) / 60 / Math.sqrt(sceneList[0].value)) * 100) / 100
+}
+
+watch(() => props.compositeData, (newS, oldS) => {
+  console.log(newS, '综合监测数据------------')
+  compositeDatas.value=newS
+  if (newS.length != 0) {
+    selectList.length = 0
+    newS.forEach(el => {
+      selectList.push({ label: el.deviceName, value: el.deviceName })
+    })
+    if (selectVal.value) {
+      let datas=newS.filter(v=>v.deviceName==selectVal.value)[0]
+      echartData.jfq = datas.majorpath.drag_1
+      echartData.yfq = datas.majorpath.drag_2
+      echartData.hfq = datas.majorpath.drag_3
+      echartData.zf =datas.majorpath.drag_total
+
+      sceneList[0].value = datas.majorpath.drag_total
+      sceneList[1].value = datas.majorpath.m3_total
+      sceneList[2].value = Math.round(((1.19 * sceneList[1].value) / 60 / Math.sqrt(sceneList[0].value)) * 100) / 100
+    } else {
+      selectVal.value = selectList[0].value
+      console.log(selectVal.value, '0009999')
+      echartData.jfq = newS[0].majorpath.drag_1
+      echartData.yfq = newS[0].majorpath.drag_2
+      echartData.hfq = newS[0].majorpath.drag_3
+      echartData.zf = newS[0].majorpath.drag_total
+
+      sceneList[0].value = newS[0].majorpath.drag_total
+      sceneList[1].value = newS[0].majorpath.m3_total
+      sceneList[2].value = Math.round(((1.19 * sceneList[1].value) / 60 / Math.sqrt(sceneList[0].value)) * 100) / 100
+    }
+  }
+
+
+
+
+
+
+}, {
+  immediate: true,
+  deep: true
+})
 
 
 </script>
+
 <style lang="less" scoped>
 @font-face {
   font-family: 'douyuFont';
@@ -121,14 +180,6 @@ let selectList1 = reactive([
         &:nth-child(1) {
           left: 10px;
         }
-
-        &:nth-child(2) {
-          left: 136px;
-        }
-
-        &:nth-child(3) {
-          left: 262px;
-        }
       }
     }
 
@@ -181,7 +232,8 @@ let selectList1 = reactive([
           font-size: 14px;
           color: #31fbcc;
         }
-        .box-img{
+
+        .box-img {
           position: absolute;
           right: 2px;
           top: 50%;
@@ -204,20 +256,30 @@ let selectList1 = reactive([
   color: #fff !important;
   line-height: 22px !important;
 }
+
 ::v-deep .zxm-select-single:not(.zxm-select-customize-input) .zxm-select-selector::after {
-    line-height: 24px;
+  line-height: 24px;
 }
-::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector{
+
+::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
   background-color: transparent;
- border-top: 0px;
- border-bottom: 0px;
- border-left: 2px solid ;
- border-right: 2px solid;
- border-image: linear-gradient(to bottom, transparent, rgba(49, 184, 255, 1), transparent) 1 1 1;
+  border-top: 0px;
+  border-bottom: 0px;
+  border-left: 2px solid;
+  border-right: 2px solid;
+  border-image: linear-gradient(to bottom, transparent, rgba(49, 184, 255, 1), transparent) 1 1 1;
 
 }
-::v-deep .zxm-select-arrow{
+
+::v-deep .zxm-select-arrow {
   color: #fff !important;
 }
-</style>
-    
+
+::v-deep .zxm-select-selection-item {
+  color: #fff !important
+}
+
+::v-deep .zxm-select-single .zxm-select-selector .zxm-select-selection-item {
+  line-height: 24px !important;
+}
+</style>

src/views/vent/home/clique/components/wind-road.vue

@@ -10,8 +10,8 @@
       </div>
       <div class="road-card">
         <div class="head-nav">
-          <span>{{ roadData.label }} : </span>
-          <span>{{ roadData.value }}</span>
+          <span>{{ roadDatas.label }} : </span>
+          <span>{{ roadDatas.value }}</span>
         </div>
         <div class="echart-box">
           <div ref="road" class="road"></div>
@@ -21,25 +21,45 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, reactive, nextTick, onMounted } from 'vue';
+  import { ref, reactive, nextTick,defineProps,watch } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
   import * as echarts from 'echarts';
 
+  let props=defineProps({
+    roadData:{
+      type:Object,
+      default:()=>{
+        return {}
+      }
+    }
+  })
+
   let roadTitle = ref('通风巷道长度统计');
   let road = ref(); //获取Dom节点
-  let roadData = reactive({
+  let roadDatas = reactive({
     label: '通风巷道总长度',
-    value: '1737公里',
+    value: '',
   });
 
   // let xData = reactive(['宝德', '榆家梁', '锦界', '大柳塔', '哈拉沟']);
-  let xData = reactive(['bd', 'yjl', 'jj', 'dlt', 'hlg']);
-  var yData = reactive([200, 100, 200, 200, 100]);
-  var maxData = reactive([300, 200, 300, 300, 200]);
+  let xData = ref<any[]>([]);
+  // var yData = reactive([200, 100, 200, 200, 100]);
+  // var maxData = reactive([300, 200, 300, 300, 200]);
+  let yData = ref<any[]>([]);
+  let maxData = reactive<any[]>([]);
 
   function getOption() {
     nextTick(() => {
       const myChart = echarts.init(road.value);
+      let color=[
+      '#FF9A22',
+      '#FFD56E',
+      '#00EC28',
+      '#5DF076',
+      '#12B9DB',
+      '#6F8EF2',
+
+      ]
       let option = {
         grid: {
           top: '14%',
@@ -49,7 +69,7 @@
           containLabel: true,
         },
         xAxis: {
-          data: xData,
+          data: xData.value,
           axisTick: {
             show: false,
           },
@@ -74,7 +94,7 @@
         },
 
         yAxis: {
-          max: 300,
+          max: Math.ceil(roadDatas.value+1000),
           name: '长度(km)',
           nameTextStyle: {
             color: '#3df6ff',
@@ -111,45 +131,10 @@
             z: 12,
             itemStyle: {
               opacity: 1,
-              color: function (params) {
-                var a = params.name.slice(0, 2);
-                if (a === '宝德') {
-                  return new echarts.graphic.LinearGradient(
-                    0,
-                    0,
-                    0,
-                    1,
-                    [
-                      {
-                        offset: 0,
-                        color: '#FF9A22', // 0% 处的颜色
-                      },
-                      {
-                        offset: 1,
-                        color: '#FFD56E', // 100% 处的颜色
-                      },
-                    ],
-                    false
-                  );
-                } else if (a === '榆家' || a == '大柳') {
-                  return new echarts.graphic.LinearGradient(
-                    0,
-                    0,
-                    0,
-                    1,
-                    [
-                      {
-                        offset: 0,
-                        color: '#00EC28', // 0% 处的颜色
-                      },
-                      {
-                        offset: 1,
-                        color: '#5DF076', // 100% 处的颜色
-                      },
-                    ],
-                    false
-                  );
-                } else if (a === '锦界' || a == '哈拉') {
+              color: function (params,) {
+                console.log(params,'index-----11111111111111111')
+                // var a = params.name.slice(0, 2);
+          
                   return new echarts.graphic.LinearGradient(
                     0,
                     0,
@@ -158,16 +143,16 @@
                     [
                       {
                         offset: 0,
-                        color: '#12B9DB', // 0% 处的颜色
+                        color:  color[params.seriesIndex], // 0% 处的颜色
                       },
                       {
                         offset: 1,
-                        color: '#6F8EF2', // 100% 处的颜色
+                        color: color[params.seriesIndex + 1], // 100% 处的颜色
                       },
                     ],
                     false
                   );
-                }
+                
               },
             },
             data: [1, 1, 1, 1, 1],
@@ -183,27 +168,8 @@
               //lenged文本
               opacity: 0.7,
               color: function (params) {
-                var a = params.name.slice(0, 2);
-                if (a === '宝德') {
-                  return new echarts.graphic.LinearGradient(
-                    0,
-                    0,
-                    0,
-                    1,
-                    [
-                      {
-                        offset: 0,
-                        color: '#FF9A22', // 0% 处的颜色
-                      },
-                      {
-                        offset: 1,
-                        color: '#FFD56E', // 100% 处的颜色
-                      },
-                    ],
-                    false
-                  );
-                } else if (a === '榆家' || a == '大柳') {
-                  return new echarts.graphic.LinearGradient(
+                console.log(params,'index-----222222222222222')
+                return new echarts.graphic.LinearGradient(
                     0,
                     0,
                     0,
@@ -211,37 +177,76 @@
                     [
                       {
                         offset: 0,
-                        color: '#00EC28', // 0% 处的颜色
+                        color:  color[params.dataIndex], // 0% 处的颜色
                       },
                       {
                         offset: 1,
-                        color: '#5DF076', // 100% 处的颜色
+                        color: color[params.dataIndex + 1], // 100% 处的颜色
                       },
                     ],
                     false
                   );
-                } else if (a === '锦界' || a == '哈拉') {
-                  return new echarts.graphic.LinearGradient(
-                    0,
-                    0,
-                    0,
-                    1,
-                    [
-                      {
-                        offset: 0,
-                        color: '#12B9DB', // 0% 处的颜色
-                      },
-                      {
-                        offset: 1,
-                        color: '#6F8EF2', // 100% 处的颜色
-                      },
-                    ],
-                    false
-                  );
-                }
+                // var a = params.name.slice(0, 2);
+                // if (a === '全矿') {
+                //   return new echarts.graphic.LinearGradient(
+                //     0,
+                //     0,
+                //     0,
+                //     1,
+                //     [
+                //       {
+                //         offset: 0,
+                //         color: '#FF9A22', // 0% 处的颜色
+                //       },
+                //       {
+                //         offset: 1,
+                //         color: '#FFD56E', // 100% 处的颜色
+                //       },
+                //     ],
+                //     false
+                //   );
+                // } 
+                // // else if (a === '榆家' || a == '大柳') {
+                // //   return new echarts.graphic.LinearGradient(
+                // //     0,
+                // //     0,
+                // //     0,
+                // //     1,
+                // //     [
+                // //       {
+                // //         offset: 0,
+                // //         color: '#00EC28', // 0% 处的颜色
+                // //       },
+                // //       {
+                // //         offset: 1,
+                // //         color: '#5DF076', // 100% 处的颜色
+                // //       },
+                // //     ],
+                // //     false
+                // //   );
+                // // } 
+                // // else if (a === '锦界' || a == '哈拉') {
+                // //   return new echarts.graphic.LinearGradient(
+                // //     0,
+                // //     0,
+                // //     0,
+                // //     1,
+                // //     [
+                // //       {
+                // //         offset: 0,
+                // //         color: '#12B9DB', // 0% 处的颜色
+                // //       },
+                // //       {
+                // //         offset: 1,
+                // //         color: '#6F8EF2', // 100% 处的颜色
+                // //       },
+                // //     ],
+                // //     false
+                // //   );
+                // // }
               },
             },
-            data: yData,
+            data: yData.value,
           },
 
           {
@@ -279,27 +284,8 @@
             itemStyle: {
               opacity: 1,
               color: function (params) {
-                var a = params.name.slice(0, 2);
-                if (a === '宝德') {
-                  return new echarts.graphic.LinearGradient(
-                    0,
-                    0,
-                    0,
-                    1,
-                    [
-                      {
-                        offset: 0,
-                        color: '#FF9A22', // 0% 处的颜色
-                      },
-                      {
-                        offset: 1,
-                        color: '#FFD56E', // 100% 处的颜色
-                      },
-                    ],
-                    false
-                  );
-                } else if (a === '榆家' || a == '大柳') {
-                  return new echarts.graphic.LinearGradient(
+                console.log(params,'index-----333333333333333')
+                return new echarts.graphic.LinearGradient(
                     0,
                     0,
                     0,
@@ -307,34 +293,15 @@
                     [
                       {
                         offset: 0,
-                        color: '#00EC28', // 0% 处的颜色
+                        color:  color[params.dataIndex], // 0% 处的颜色
                       },
                       {
                         offset: 1,
-                        color: '#5DF076', // 100% 处的颜色
+                        color: color[params.dataIndex + 1], // 100% 处的颜色
                       },
                     ],
                     false
                   );
-                } else if (a === '锦界' || a == '哈拉') {
-                  return new echarts.graphic.LinearGradient(
-                    0,
-                    0,
-                    0,
-                    1,
-                    [
-                      {
-                        offset: 0,
-                        color: '#12B9DB', // 0% 处的颜色
-                      },
-                      {
-                        offset: 1,
-                        color: '#6F8EF2', // 100% 处的颜色
-                      },
-                    ],
-                    false
-                  );
-                }
               },
             },
             symbolPosition: 'end',
@@ -348,7 +315,7 @@
                 color: '#fff',
               },
             },
-            data: yData,
+            data: yData.value,
           },
 
           {
@@ -373,9 +340,24 @@
     });
   }
 
-  onMounted(() => {
-    getOption();
-  });
+  watch(()=>props.roadData,(newR,oldR)=>{
+    console.log(newR,'通风巷道长度数据-------')
+    if(JSON.stringify(newR)!='{}'){
+      maxData.length=0
+      roadDatas.value=newR.totallength
+      xData.value=newR.data1
+      yData.value=newR.data
+      yData.value.forEach(el=>{
+        maxData.push(el+200)
+      })
+      getOption();
+    }
+  },{
+    immediate:true,
+    deep:true
+  })
+
+  
 </script>
 <style lang="less" scoped>
   @font-face {

src/views/vent/home/clique/index.vue

@@ -8,11 +8,11 @@
         <div class="left-area">
           <!-- 矿井通风状态监测 -->
           <div class="area-card">
-            <mineWind />
+            <mineWind :airKjStatus="airKjStatus"/>
           </div>
           <!-- 一通三防风险分析与预警 -->
           <div class="area-card1">
-            <riskWarn />
+            <riskWarn :earlyWarn="earlyWarn"/>
           </div>
         </div>
         <div class="center-area">
@@ -28,28 +28,28 @@
           </div> -->
           <!-- 文件共享中心 -->
           <div class="area-card3">
-            <fileShare />
+            <fileShare :shareData="shareData" />
           </div>
         </div>
         <div class="right-area">
           <!-- 关键场景通防综合监测 -->
           <div class="area-card">
-            <sceneKey />
+            <sceneKey :compositeData="compositeData"/>
           </div>
           <!-- 通风巷道长度统计 -->
           <div class="area-card1">
-            <windRoad />
+            <windRoad :roadData="roadData"/>
           </div>
         </div>
       </div>
     </div>
     <div class="area-card2" v-show="isShowDialog">
-      <dialogModal ref="dialogModalRef" @close-dialog="closeDialog" />
+      <dialogModal ref="dialogModalRef" @close-dialog="closeDialog" :centerDetail="centerDetail" />
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, nextTick,onMounted,onUnmounted } from 'vue';
+  import { ref, reactive, nextTick,onMounted,onUnmounted } from 'vue';
   import mineWind from './components/mine-wind.vue';
   import riskWarn from './components/risk-warn.vue';
   import fileShare from './components/file-share.vue';
@@ -57,18 +57,48 @@
   import sceneKey from './components/scene-key.vue';
   import iconLight from './components/icon-light.vue';
   import dialogModal from './components/dialog-modal.vue';
-  import {getHomeData} from './clique.api'
+  import {getHomeData,getList} from './clique.api'
   const dialogModalRef = ref();
   // let mainTitle = ref('国家能源神东煤炭集团');
   let mainTitle = ref('XXXX集团');
   const isShowDialog = ref(false);
 
+  //矿井通风状态数据
+  let airKjStatus=reactive<any[]>([])
+
+  //风险分析与预警数据
+  let earlyWarn=reactive({
+    levels: 0,
+    fire: '',
+    sb: '',
+    ws: '',
+    fc: '',
+    tf: '',
+  })
+
+  //通防综合监测数据
+  let compositeData=ref<any[]>([])
+
+  //地图区域详情数据
+  let centerDetail=ref({})
+
+  //文件共享中心数据
+  let shareData=reactive<any[]>([])
+
+  //通风巷道长度统计数据
+  let roadData=reactive({
+    totallength:0,
+    data:[],
+    data1:[]
+  })
+
 // https获取监测数据
 let timer: null | NodeJS.Timeout = null;
 function getMonitor() {
   timer = setTimeout(
     async () => {
       await getHomeDataList();
+      await getLists()
       if (timer) {
         timer = null;
       }
@@ -82,6 +112,42 @@ function getMonitor() {
 async function getHomeDataList(){
   let res=await getHomeData()
   console.log(res,'公司端首页数据----------')
+  if(res.length!=0){
+    earlyWarn.levels=res[0].sys_warndata.info.sysInfo.synthesizeS.maxLevel
+    earlyWarn.fire=res[0].sys_warndata.info.sysInfo.fireS.maxLevel_str
+    earlyWarn.sb=res[0].sys_warndata.info.sysInfo.deviceWarnInfo.maxLevel_str
+    earlyWarn.ws=res[0].sys_warndata.info.sysInfo.gasS.maxLevel_str
+    earlyWarn.fc=res[0].sys_warndata.info.sysInfo.dustS.maxLevel_str
+    earlyWarn.tf=res[0].sys_warndata.info.sysInfo.ventS.maxLevel_str
+
+    roadData.totallength=res[0].sys_data.totallength
+    roadData.data.length=0
+    roadData.data1.length=0
+
+    airKjStatus.length=0
+    res.forEach(el=>{
+      airKjStatus.push({deviceName:el.sys_data.deviceName,jf:el.sys_data.zongjinfeng,xf:el.sys_data.xufengliang,hf:el.sys_data.zonghuifeng})
+      roadData.data.push(el.sys_data.totallength)
+      roadData.data1.push(el.sys_data.deviceName)
+    })
+   
+    compositeData.value=res[0].majorpath_data
+    centerDetail.value=res[0]
+
+ 
+    
+  }
+  
+}
+//获取文件共享中心数据
+async function getLists(){
+  let res=await getList()
+  if(res.length!=0){
+    shareData.length=0
+    res.forEach(el=>{
+      shareData.push({title:el.sysOrgName,value:el.tolalNum,value1:el.approveNum})
+    })
+  }
 }
 
 
@@ -100,6 +166,8 @@ async function getHomeDataList(){
   }
 
   onMounted(()=>{
+    getHomeDataList()
+    getLists()
     getMonitor()
   })
   onUnmounted(() => {

src/views/vent/monitorManager/groutMonitor/grout.data.ts

@@ -317,7 +317,7 @@ export function getMonitorComponent() {
       groutHome = defineAsyncComponent(() => import('./components/groutHomeJj.vue'));
       return groutHome;
     case 'sdmtjtdltmkhjtj': // 活鸡兔井
-      groutHome = defineAsyncComponent(() => import('./components/groutHomeHjt.vue'));
+      // groutHome = defineAsyncComponent(() => import('./components/groutHomeHjt.vue'));
       return groutHome;
     default:
       groutHome = defineAsyncComponent(() => import('./components/groutHome.vue'));