神东5.5提交更新

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

@@ -7,12 +7,12 @@
           <i style="margin: 0px 5px 0px 5px">
             <SvgIcon class="icon" size="14" name="internet-bad" />
           </i>
-          <span style="color: #fff">网络断开</span>
+          <span style="color: #fff">{{nowStatus ? '报警信息' : '网络断开'}}</span>
         </div>
 
-        <div class="now-status">25条</div>
+        <div class="now-status">{{ nowStatus ? nowStatus : 0}}</div>
       </div>
-    </div>
+    </div> 
     <div class="warn-contents">
       <div class="warn-box" v-for="(item, index) in warnList" :key="index">
         <div class="warn-icon">
@@ -32,10 +32,15 @@
 </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 searchValue = ref('');
+
+  let props = defineProps({
+    warnData: Array,
+  });
+
+ let nowStatus=ref<any>(0)
   const options1 = reactive<any>([
     {
       value: '测试',
@@ -53,17 +58,34 @@
   ]);
 
   let warnList = reactive<any[]>([
-    { name: '报警', icon: getAssetURL('home-container/warn-icon.png'), val: '5' },
-    { name: '重大风险预警', icon: getAssetURL('home-container/warn-icon.png'), val: '5' },
-    { name: '较大风险预警', icon: getAssetURL('home-container/warn-icon1.png'), val: '5' },
-    { name: '一般风险预警', icon: getAssetURL('home-container/warn-icon2.png'), val: '5' },
-    { name: '低风险预警', icon: getAssetURL('home-container/warn-icon3.png'), val: '5' },
+    { name: '报警', icon: getAssetURL('home-container/warn-icon.png'), val: 0 },
+    { name: '重大风险预警', icon: getAssetURL('home-container/warn-icon.png'), val: 0 },
+    { name: '较大风险预警', icon: getAssetURL('home-container/warn-icon1.png'), val: 0 },
+    { name: '一般风险预警', icon: getAssetURL('home-container/warn-icon2.png'), val: 0 },
+    { name: '低风险预警', icon: getAssetURL('home-container/warn-icon3.png'), val: 0 },
   ]);
 
   //跳转详情
    function getDetail(){
     console.log('跳转详情')
   }
+  watch(
+    () => props.warnData,
+    (val) => {
+      console.log(val, '预警数据');
+      val.forEach(el=>{
+       nowStatus.value=el.netstatus.val 
+       warnList[0].val=el.red.val
+       warnList[1].val=el.alarm.val
+       warnList[2].val=el.orange.val
+       warnList[3].val=el.yellow.val
+       warnList[4].val=el.blue.val
+      })
+    },
+    {
+      deep: true,
+    }
+  );
 </script>
 
 <style lang="less" scoped>

src/views/vent/home/clique/components/fan-monitor.vue

@@ -20,7 +20,7 @@
           <span style="color: #fff">运行风机</span>
         </div>
 
-        <div class="now-status">主风机</div>
+        <div class="now-status">{{ fjStatus }}</div>
       </div>
     </div>
     <div class="fan-contents">
@@ -34,40 +34,41 @@
   import { SvgIcon } from '/@/components/Icon';
   import * as echarts from 'echarts';
   import { useGo } from '/@/hooks/web/usePage';
+  let props = defineProps({
+    fandata: Array,
+  });
   const go = useGo();
+  let searchValue = ref('');
+  let fanList=reactive<any[]>([])
+  let fanTypeList = reactive<any[]>([]);//下拉列表
+  let fjStatus=ref('')//运行风机
 
-  let searchValue = ref('局扇监测');
-  let fanTypeList = reactive<any[]>([]);
 
   //获取dom节点
   let fan = ref<any>();
   //echart图表数据
-  let echartData=reactive<any>({
-    xdata:80,
-    ydata:60
-  })
-//跳转详情
-function getDetail(){
-    console.log('跳转详情')
-    go('/micro-vent-3dModal/dashboard/analysis')
+  let echartData = reactive<any>({
+    xdata: 80,
+    ydata: 60,
+  });
+  //跳转详情
+  function getDetail() {
+    console.log('跳转详情');
+    go('/micro-vent-3dModal/dashboard/analysis');
   }
   //选项切换
   function changeSelect(val) {
-    console.log(val, 'val-------');
     switch (val) {
       case '局扇监测':
-        echartData.xdata = 80;
-        echartData.ydata = 60;
+      fjStatus.value=fanList.filter(v=>v.strinstallpos=='局扇监测')[0].readData.Fan1StartStatus=='1' ? '1号风机' : fanList.filter(v=>v.strinstallpos=='局扇监测')[0].readData.Fan2StartStatus=='1' ? '2号风机' :''  
+        echartData.xdata = fanList.filter(v=>v.strinstallpos=='局扇监测')[0].readData.windQuantity1;
+        echartData.ydata = fanList.filter(v=>v.strinstallpos=='局扇监测')[0].readData.windQuantity2;
         getOption();
         break;
-      case '局扇监测1':
-        echartData.xdata = 50;
-        echartData.ydata = 70;
-        getOption();
-        break;
-      case '局扇监测2':
-        echartData.xdata = 40;
-        echartData.ydata = 90;
+      case '局部通风机系统':
+      fjStatus.value=fanList.filter(v=>v.strinstallpos=='局扇监测')[1].readData.Fan1StartStatus=='1' ? '1号风机' : fanList.filter(v=>v.strinstallpos=='局扇监测')[0].readData.Fan2StartStatus=='1' ? '2号风机' :''  
+        echartData.xdata = fanList.filter(v=>v.strinstallpos=='局扇监测')[1].readData.windQuantity1;
+        echartData.ydata = fanList.filter(v=>v.strinstallpos=='局扇监测')[1].readData.windQuantity2;
         getOption();
         break;
     }
@@ -275,23 +276,32 @@ function getDetail(){
       };
     });
   }
-
- watch(()=>props.fandata,(val,val1)=>{
-  console.log(val,'局部风机数据')
- fanTypeList=val[0].map(el=>{
-  return {
-    label:el.strinstallpos,
-    value:el.strinstallpos
-  }
-  })
   
- },{
-  deep:true
- })
 
-  onMounted(() => {
-    getOption();
-  });
+  watch(
+    () => props.fandata,
+    (val) => {
+      console.log(val, '局部风机数据');
+      fanList=val[0]
+      fanTypeList.length = 0;
+      fanList.forEach((el) => {
+        fanTypeList.push({
+          label: el.strinstallpos,
+          value: el.strinstallpos,
+        });
+      });
+      searchValue.value=fanTypeList[0].value
+      console.log( searchValue.value,'77777')
+     
+      changeSelect(searchValue.value)
+      
+    },
+    {
+      deep: true,
+    }
+  );
+
+  onMounted(() => {});
 </script>
 
 <style lang="less" scoped>

src/views/vent/home/clique/components/main-monitor.vue

@@ -8,7 +8,7 @@
       <a-select
         v-model:value="searchValue"
         style="width: 180px; margin-right: 10px"
-        :options="options1"
+        :options="mainTypeList"
         aria-placeholder="请选择"
         @change="changeSelect"
       />
@@ -30,32 +30,25 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, onMounted, nextTick } from 'vue';
+  import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
   import * as echarts from 'echarts';
-  let searchValue = ref('1号回风斜井');
-  const options1 = reactive<any>([
-    {
-      value: '1号回风斜井',
-      label: '1号回风斜井',
-    },
-    {
-      value: '2号回风斜井',
-      label: '2号回风斜井',
-    },
-    {
-      value: '3号回风斜井',
-      label: '3号回风斜井',
-    },
-  ]);
+
+  let props = defineProps({
+    maindata: Array,
+  });
+
+  let searchValue = ref('');
+  let mainTypeList = reactive<any>([]); //下拉框
+  let mainList = reactive<any[]>([]); //主风机列表
 
   //获取dom节点
   let main = ref<any>();
   //echart图表数据
   let echartData = reactive<any>({
     xdata: ['1000', '2000', '3000', '4000', '5000', '6000'],
-    ydata: [0, 20, 50, 90, 140, 200],
-    ydata1: [210, 190, 160, 120, 80, 30],
+    ydata: [],
+    ydata1: [],
   });
   //跳转详情
   function getDetail() {
@@ -63,24 +56,15 @@
   }
   //选项切换
   function changeSelect(val) {
+    (echartData.ydata.length = 0), (echartData.ydata1.length = 0);
     switch (val) {
-      case '1号回风斜井':
-        (echartData.xdata = ['1000', '2000', '3000', '4000', '5000', '6000']),
-          (echartData.ydata = [0, 20, 50, 90, 140, 200]),
-          (echartData.ydata1 = [210, 190, 160, 120, 80, 30]),
-          getOption();
-        break;
-      case '2号回风斜井':
-        (echartData.xdata = ['1000', '2000', '3000', '4000', '5000', '6000']),
-          (echartData.ydata = [20, 40, 70, 110, 160, 220]),
-          (echartData.ydata1 = [270, 260, 240, 210, 170, 120]),
-          getOption();
-        break;
-      case '3号回风斜井':
-        (echartData.xdata = ['1000', '2000', '3000', '4000', '5000', '6000']),
-          (echartData.ydata = [40, 60, 100, 160, 240, 340]),
-          (echartData.ydata1 = [380, 360, 320, 260, 180, 80]),
-          getOption();
+      case '王坡主风机测试':
+        mainList.forEach((el) => {
+          echartData.ydata1.push(el.readData.DataPa);
+          echartData.ydata.push(el.readData.m3);
+        });
+
+        getOption();
         break;
     }
   }
@@ -96,31 +80,6 @@
           },
         },
 
-        legend: {
-          align: 'left',
-          right: '4%',
-          top: '6%',
-          type: 'plain',
-          textStyle: {
-            color: '#7ec7ff',
-            fontSize: 14,
-          },
-          // icon:'rect',
-          itemGap: 25,
-          itemWidth: 18,
-          icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
-          data: [
-            {
-              name: '风阻',
-            },
-            {
-              name: '负压',
-            },
-            // {
-            //   name: '工作面需风'
-            // }
-          ],
-        },
 
         grid: {
           top: '22%',
@@ -133,7 +92,7 @@
         xAxis: [
           {
             type: 'category',
-            name: '风量\n(m³/min)',
+            name: '负压(Pa)',
             nameTextStyle: {
               color: '#b3b8cc',
               fontSize: 12,
@@ -170,7 +129,7 @@
 
         yAxis: [
           {
-            name: '负压(Pa)',
+            name: '风量\n(m³/min)',
             nameTextStyle: {
               color: '#b3b8cc',
               fontSize: 12,
@@ -210,7 +169,7 @@
         ],
         series: [
           {
-            name: '风阻',
+            name: '风量',
             type: 'line',
             smooth: true,
             yAxisIndex: 0,
@@ -258,9 +217,25 @@
       };
     });
   }
-  onMounted(() => {
-    getOption();
-  });
+
+  watch(
+    () => props.maindata,
+    (val) => {
+      console.log(val, '主风机数据');
+      mainList = val;
+      mainTypeList.length = 0;
+      mainTypeList.push({
+        label: mainList[0].typeName,
+        value: mainList[0].typeName,
+      });
+      searchValue.value = mainTypeList[0].value;
+      changeSelect(searchValue.value);
+    },
+    {
+      deep: true,
+    }
+  );
+  onMounted(() => { });
 </script>
 
 <style lang="less" scoped>
@@ -280,7 +255,7 @@
       font-size: 16px;
       font-family: 'douyuFont';
       cursor: pointer;
-      &:hover{
+      &:hover {
         color: #66ffff;
       }
     }

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

@@ -1,54 +1,129 @@
 <template>
   <div class="windDevice">
     <div class="title-top" @click="getDetail">通风设施远程控制</div>
-    <div class="toggle-search">
-      <i class="icon-search">
-        <SvgIcon class="icon" size="14" name="toggle" />
-      </i>
-      <a-select
-        v-model:value="searchValue"
-        style="width: 180px; margin-right: 10px"
-        :options="options1"
-        aria-placeholder="请选择"
-        @change="changeSelect"
-      />
+    <div class="device-contents">
+      <div class="icons-box" @mouseleave="resetScroll">
+        <div class="icon-item" v-for="(item, key) in iconsMonitor" :key="key">
+          <div class="wrapper">
+            {{ item.text }}
+          </div>
+          <div></div>
+          <img :src="item.url" :alt="item.text" />
+          <div
+            class="level-text"
+            :class="{
+              'level-text-1': item.level == 1,
+              'level-text-2': item.level == 2,
+              'level-text-3': item.level == 3,
+              'level-text-4': item.level == 4,
+              'level-text-5': item.level == 5,
+            }"
+            >{{
+              item.level == 1
+                ? '正常'
+                : item.level == 2
+                ? '低风险'
+                : item.level == 3
+                ? '中风险'
+                : item.level == 4
+                ? '高风险'
+                : item.level == 5
+                ? '报警'
+                : ''
+            }}</div
+          >
+        </div>
+      </div>
     </div>
-    <!-- <img class="contents" :src="imgSrc" alt="" /> -->
   </div>
 </template>
 
 <script lang="ts" setup>
   import { ref, reactive } from 'vue';
-  import { SvgIcon } from '/@/components/Icon';
-  // import { getAssetURL } from '/@/utils/ui';
-  let searchValue = ref('风门');
-  const options1 = reactive<any>([
-    {
-      value: '风门',
-      label: '风门',
+  import { getAssetURL } from '/@/utils/ui';
+
+  let iconsMonitor = reactive({
+    1: {
+      url: getAssetURL('home-container/device/zhushan.png'),
+      level: 1,
+      text: '主风机',
+    },
+    2: {
+      url: getAssetURL('home-container/device/js.png'),
+      level: 2,
+      text: '局部风机',
+    },
+    3: {
+      url: getAssetURL('home-container/device/fm.png'),
+      level: 1,
+      text: '风门',
+    },
+    4: {
+      url: getAssetURL('home-container/device/fc.png'),
+      level: 1,
+      text: '风窗',
+    },
+    5: {
+      url: getAssetURL('home-container/device/cf.png'),
+      level: 5,
+      text: '测风装置',
+    },
+    6: {
+      url: getAssetURL('home-container/device/yafeng.png'),
+      level: 1,
+      text: '压风装置',
+    },
+    7: {
+      url: getAssetURL('home-container/device/penlin.png'),
+      level: 4,
+      text: '喷淋',
+    },
+    8: {
+      url: getAssetURL('home-container/device/penfen.png'),
+      level: 1,
+      text: '喷粉',
+    },
+    9: {
+      url: getAssetURL('home-container/device/zhudan.png'),
+      level: 1,
+      text: '注氮',
+    },
+    10: {
+      url: getAssetURL('home-container/device/zhujiang.png'),
+      level: 1,
+      text: '注浆',
     },
-    {
-      value: '风窗',
-      label: '风窗',
+    11: {
+      url: getAssetURL('home-container/device/pw.png'),
+      level: 3,
+      text: '跟机喷雾',
     },
-  ]);
+    12: {
+      url: getAssetURL('home-container/device/ccq.png'),
+      level: 1,
+      text: '除尘器',
+    },
+    13: {
+      url: getAssetURL('home-container/device/wasibeng.png'),
+      level: 2,
+      text: '瓦斯泵',
+    },
+    14: {
+      url: getAssetURL('home-container/device/wasichoucaig.png'),
+      level: 1,
+      text: '瓦斯抽采管路',
+    },
+  });
+
+  const resetScroll = (e: Event) => {
+    if (e.target && e.target) (e.target as Element).scrollTop = 0;
+  };
+
   //跳转详情
   function getDetail() {
     console.log('跳转详情');
   }
-  // let imgSrc = ref(getAssetURL('home-container/wind-door.gif'));
-  //选项切换
-  function changeSelect(val) {
-    switch (val) {
-      case '风门':
-        // imgSrc.value = getAssetURL('home-container/wind-door.gif');
-        break;
-      case '风窗':
-      
-        break;
-    }
-  }
-</script>  
+</script>
 
 <style lang="less" scoped>
   @font-face {
@@ -67,33 +142,100 @@
       font-size: 16px;
       font-family: 'douyuFont';
       cursor: pointer;
-      &:hover{
+      &:hover {
         color: #66ffff;
       }
     }
-    .toggle-search {
+
+    .device-contents {
       position: absolute;
-      left: 9px;
-      top: 37px;
-      display: flex;
-      .icon-search {
-        position: absolute;
-        top: 50%;
-        left: 5px;
-        transform: translate(0%, -50%);
+      top: 30px;
+      left: 0;
+      height: calc(100% - 30px);
+      padding: 10px;
+      box-sizing: border-box;
+      width: 100%;
+      .icons-box {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-around;
+        height: 100%;
+        overflow-y: hidden;
+        // align-items: start ;
+        &:hover {
+          overflow-y: auto;
+          & > .icon-item {
+            animation-play-state: paused;
+            animation: move1 2s linear;
+          }
+        }
+        .icon-item {
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 3px;
+          animation: move 10s linear infinite;
+
+          .level-text {
+            position: absolute;
+            top: 42px;
+            right: 25px;
+            color: #fff;
+            font-family: 'douyuFont';
+            font-size: 12px;
+          }
+          .level-text-1 {
+            color: rgb(0, 242, 255);
+            text-shadow: 2px 2px 4px #001c22;
+          }
+          .level-text-2 {
+            color: #ffff35;
+            text-shadow: 2px 2px 4px #313100;
+          }
+          .level-text-3 {
+            color: #ffbe69;
+            text-shadow: 2px 2px 4px #271600;
+          }
+          .level-text-4 {
+            color: #ff6f00;
+            // color: #09caff;
+            text-shadow: 2px 2px 4px #060200;
+          }
+          .level-text-5 {
+            color: #ff0000;
+            text-shadow: 2px 2px 4px #200000;
+          }
+          img {
+            width: 210px;
+            height: 69px;
+          }
+        }
+        @keyframes move {
+          0% {
+            transform: translateY(0px);
+          }
+          100% {
+            transform: translateY(-269px);
+          }
+        }
+
+        @keyframes move1 {
+          0% {
+            transform: translateY(0px);
+          }
+        }
+        .wrapper {
+          position: absolute;
+          top: 40px;
+          left: 82px;
+          color: #ffffffe0;
+          font-size: 13px;
+          text-align: center;
+          letter-spacing: 1px;
+        }
       }
     }
-    // .contents {
-    //   display: inline-block;
-    //   position: absolute;
-    //   top: 66px;
-    //   left: 50%;
-    //   transform: translate(-50%, 0);
-    //   // width: 100%;
-    //   height: calc(100% - 66px);
-    //   padding-bottom: 10px;
-    //   box-sizing: border-box;
-    // }
   }
   :deep .zxm-select-selector {
     width: 100%;

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

@@ -5,7 +5,13 @@
       <i class="icon-search">
         <SvgIcon class="icon" size="14" name="toggle" />
       </i>
-      <a-select v-model:value="searchValue" style="width: 180px; margin-right: 10px" :options="options1" aria-placeholder="请选择" />
+      <a-select
+        v-model:value="searchValue"
+        style="width: 180px; margin-right: 10px"
+        :options="lineTypeList"
+        aria-placeholder="请选择"
+        @change="changeSelect"
+      />
     </div>
     <div class="line-echart">
       <div class="line" ref="line"></div>
@@ -14,16 +20,16 @@
       </div>
       <div class="percent">
         <div class="percent-box">
-          <span>20</span>
-          <span class="dw">Pa</span>
+          <span>{{ percentF }}</span>
+          <span class="dw">%</span>
         </div>
         <div class="percent-box">
-          <span>20</span>
-          <span class="dw">Pa</span>
+          <span>{{ percentT }}</span>
+          <span class="dw">%</span>
         </div>
         <div class="percent-box">
-          <span>40</span>
-          <span class="dw">Pa</span>
+          <span>{{ percentE }}</span>
+          <span class="dw">%</span>
         </div>
       </div>
     </div>
@@ -39,46 +45,70 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, onMounted, nextTick } from 'vue';
+  import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
   import * as echarts from 'echarts';
 
+  let props = defineProps({
+    lineList: Array,
+  });
+
   //获取dom节点
   let line = ref<any>();
-  let searchValue = ref('1号回风斜井');
-  const options1 = reactive<any>([
-    {
-      value: '1号回风斜井',
-      label: '1号回风斜井',
-    },
-    {
-      value: '2号回风斜井',
-      label: '2号回风斜井',
-    },
-    {
-      value: '3号回风斜井',
-      label: '3号回风斜井',
-      disabled: true,
-    },
-  ]);
+  let lineData = reactive<any[]>([]);
+  let searchValue = ref('');
+  const lineTypeList = reactive<any[]>([]);
 
   let echartData = reactive<any[]>([
-    { name: '进风区', value: 13684 },
-    { name: '用风区', value: 34555 },
-    { name: '回风区', value: 16905 },
+    { name: '进风区', value: 0 },
+    { name: '用风区', value: 0 },
+    { name: '回风区', value: 0 },
   ]);
   let xData = reactive<any[]>([]);
   let yData = reactive<any[]>([]);
+  let percentE = ref<any>(0);
+  let percentF = ref<any>(0);
+  let percentT = ref<any>(0);
 
   let tabList = reactive<any[]>([
-    { name: '总风量(m³/min)', val: '13129' },
-    { name: '总阻力(Pa)', val: '217010' },
-    { name: '等积孔(m²)', val: '0.56' },
+    { name: '总风量(m³/min)', val: 0 },
+    { name: '总阻力(Pa)', val: 0 },
+    { name: '等积孔(m²)', val: 0 },
   ]);
-//跳转详情
-function getDetail() {
+  //跳转详情
+  function getDetail() {
     console.log('跳转详情');
   }
+  //选项切换
+  function changeSelect(val) {
+    switch (val) {
+      case '1号回风斜井':
+        echartData[0].value = lineData[0].majorpath.drag_1;
+        echartData[1].value = lineData[0].majorpath.drag_2;
+        echartData[2].value = lineData[0].majorpath.drag_3;
+        tabList[0].val = lineData[0].majorpath.drag_total;
+        tabList[1].val = lineData[0].majorpath.m3_total;
+        tabList[2].val = 0.56;
+        percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
+        percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
+        percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
+        getOption();
+        break;
+      case '2号回风立井':
+        echartData[0].value = lineData[1].majorpath.drag_1;
+        echartData[1].value = lineData[1].majorpath.drag_2;
+        echartData[2].value = lineData[1].majorpath.drag_3;
+        tabList[0].val = lineData[1].majorpath.drag_total;
+        tabList[1].val = lineData[1].majorpath.m3_total;
+        tabList[2].val = 0.78;
+        percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
+        percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
+        percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
+        getOption();
+        break;
+    }
+  }
+
   function getOption() {
     nextTick(() => {
       function deepCopy(obj) {
@@ -235,13 +265,33 @@ function getDetail() {
       };
     });
   }
-  onMounted(() => {
-    getOption();
-  });
+
+  watch(
+    () => props.lineList,
+    (val) => {
+      console.log(val, '关键路线数据');
+      lineData = val;
+      lineTypeList.length = 0;
+      lineData.forEach((el) => {
+        lineTypeList.push({
+          label: el.deviceName,
+          value: el.deviceName,
+        });
+      });
+      searchValue.value = lineTypeList[0].value;
+
+      changeSelect(searchValue.value);
+    },
+    {
+      deep: true,
+    }
+  );
+
+  onMounted(() => {});
 </script>
 
 <style lang="less" scoped>
- @font-face {
+  @font-face {
     font-family: 'douyuFont';
     src: url('../../../../../assets/font/douyuFont.otf');
   }
@@ -257,7 +307,7 @@ function getDetail() {
       font-size: 16px;
       font-family: 'douyuFont';
       cursor: pointer;
-      &:hover{
+      &:hover {
         color: #66ffff;
       }
     }
@@ -322,7 +372,7 @@ function getDetail() {
             top: 70%;
             color: #9affa8;
           }
-          .dw{
+          .dw {
             color: #b3b8cc;
             margin-left: 5px;
           }

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

@@ -8,17 +8,23 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, nextTick, onMounted } from 'vue';
+  import { ref, reactive, nextTick, onMounted, defineProps, watch } from 'vue';
   import * as echarts from 'echarts';
+
+  let props = defineProps({
+    flList: Array,
+  });
+
   //获取dom节点
   let windBar = ref<any>();
-//跳转详情
-function getDetail() {
+  //echart数据
+  let echartData = reactive<any>({ ydata: [], xdata: [] });
+  //跳转详情
+  function getDetail() {
     console.log('跳转详情');
   }
   function getOption() {
     nextTick(() => {
-      const data = [60, 90, 100, 50, 70, 33,];
       const color = '#66ffff';
       const barWidth = 0.1; // 柱条占比
 
@@ -62,17 +68,49 @@ function getDetail() {
         grid: {
           left: '8%',
           top: '15%',
-          bottom: '15%',
+          bottom: '32%',
           right: '8%',
           // containLabel: true
         },
         xAxis: {
           type: 'category',
-          data: ['2023.1', '2023.2',  '2023.3', '2023.4', '2023.5', '2023.6'],
+          data: echartData.xdata,
           axisLabel: {
-            formatter: '{value}',
+            formatter: function (params) {
+              var newParamsName = ''; // 最终拼接成的字符串
+              var paramsNameNumber = params.length; // 实际标签的个数
+              var provideNumber = 6; // 每行能显示的字的个数
+              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
+              /**
+               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
+               */
+              // 条件等同于rowNumber>1
+              if (paramsNameNumber > provideNumber) {
+                /** 循环每一行,p表示行 */
+                for (var p = 0; p < rowNumber; p++) {
+                  var tempStr = ''; // 表示每一次截取的字符串
+                  var start = p * provideNumber; // 开始截取的位置
+                  var end = start + provideNumber; // 结束截取的位置
+                  // 此处特殊处理最后一行的索引值
+                  if (p == rowNumber - 1) {
+                    // 最后一次不换行
+                    tempStr = params.substring(start, paramsNameNumber);
+                  } else {
+                    // 每一次拼接字符串并换行
+                    tempStr = params.substring(start, end) + '\n';
+                  }
+                  newParamsName += tempStr; // 最终拼成的字符串
+                }
+              } else {
+                // 将旧标签的值赋给新标签
+                newParamsName = params;
+              }
+              //将最终的字符串返回
+              return newParamsName;
+            },
             fontSize: 14,
             margin: 10,
+            interval: 0,
             textStyle: {
               color: '#b3b8cc',
             },
@@ -91,11 +129,11 @@ function getDetail() {
         },
         yAxis: {
           type: 'value',
-          name: '(%)',
-          max: 150,
+          name: '(m³/min)',
+          max: 5000,
           axisLabel: {
             textStyle: {
-                fontSize: 14, 
+              fontSize: 14,
               color: '#b3b8cc',
             },
           },
@@ -118,7 +156,7 @@ function getDetail() {
         },
         series: [
           {
-            data: data,
+            data: echartData.ydata,
             type: 'bar',
             barWidth: barWidth * 100 + '%',
             itemStyle: {
@@ -154,7 +192,7 @@ function getDetail() {
             },
           },
           {
-            data: data,
+            data: echartData.ydata,
             type: 'custom',
             renderItem: renderItem,
             zlevel: 2,
@@ -167,9 +205,25 @@ function getDetail() {
       };
     });
   }
-  onMounted(() => {
-    getOption();
-  });
+
+  watch(
+    () => props.flList,
+    (val) => {
+      console.log(val, '测风数据');
+      echartData.xdata.length = 0;
+      echartData.ydata.length = 0;
+      val.forEach((el) => {
+        echartData.xdata.push(el.strinstallpos);
+        echartData.ydata.push(el.readData.m3);
+      });
+      getOption();
+    },
+    {
+      deep: true,
+    }
+  );
+
+  onMounted(() => {});
 </script>
 
 <style lang="less" scoped>
@@ -185,7 +239,7 @@ function getDetail() {
       font-size: 16px;
       font-family: 'douyuFont';
       cursor: pointer;
-      &:hover{
+      &:hover {
         color: #66ffff;
       }
     }

src/views/vent/home/clique/components/work-monitor.vue

@@ -5,7 +5,13 @@
       <i class="icon-search">
         <SvgIcon class="icon" size="14" name="toggle" />
       </i>
-      <a-select v-model:value="searchValue" style="width: 180px; margin-right: 10px" :options="options1" aria-placeholder="请选择" />
+      <a-select
+        v-model:value="searchValue"
+        style="width: 180px; margin-right: 10px"
+        :options="workTypeList"
+        aria-placeholder="请选择"
+        @change="changeSelect"
+      />
     </div>
     <div class="work-echart">
       <div class="work" ref="work"></div>
@@ -22,216 +28,257 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive,nextTick,onMounted } from 'vue';
+  import { ref, reactive, nextTick, onMounted, defineProps, watch } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
   import * as echarts from 'echarts';
 
-  let searchValue = ref('15212工作面');
-  const options1 = reactive<any>([
-    {
-      value: '15212工作面',
-      label: '15212工作面',
-    },
-    {
-      value: '15213工作面',
-      label: '15213工作面',
-    },
-    {
-      value: '15214工作面',
-      label: '15214工作面',
-      disabled: true,
-    },
-  ]);
+  let props = defineProps({
+    workList: Array,
+  });
+
+  let workData = reactive<any[]>([]);
+  let searchValue = ref('');
+  const workTypeList = reactive<any[]>([]);
 
   let tabList = reactive<any[]>([
-    { name: '总风量(m³/min)', val: '13129' },
-    { name: '总阻力(Pa)', val: '217010' },
-    { name: '等积孔(m²)', val: '0.56' },
+    { name: '进风量(m³/min)', val: null },
+    { name: '回风量(m³/min)', val: null },
+    { name: '需风量(m³/min)', val: null },
   ]);
 
   let work = ref<any>();
-  let echartData=reactive({
-    xdata:['08:00:00', '09:00:00', '10:00:00', '11:00:00', '12:00:00', '13:00:00', ],
-    ydata:[12, 5, 12, 46, 22, 24, ],
-    ydata1:[18, 27, 20, 58, 37, 28,]
-  })
-//跳转详情
-function getDetail() {
+  let echartData = reactive({
+    xdata: [],
+    ydata: [],
+    ydata1: [],
+  });
+  //跳转详情
+  function getDetail() {
     console.log('跳转详情');
   }
+  //选项切换
+  function changeSelect(val) {
+    switch (val) {
+      case '15212工作面':
+        tabList[0].val = workData[0].jin;
+        tabList[1].val = workData[0].hui;
+        tabList[2].val = workData[0].xufengliang;
+        echartData.xdata.length = 0;
+        echartData.ydata.length = 0;
+        echartData.ydata1.length = 0;
+        workData[0].history.forEach((el) => {
+          echartData.xdata.push(el.time);
+          echartData.ydata.push(el.jin);
+          echartData.ydata1.push(el.hui);
+        });
+
+        getOption();
+        break;
+      case '采煤工作面':
+        tabList[0].val = workData[1].jin;
+        tabList[1].val = workData[1].hui;
+        tabList[2].val = workData[1].xufengliang;
+        echartData.xdata.length = 0;
+        echartData.ydata.length = 0;
+        echartData.ydata1.length = 0;
+        workData[1].history.forEach((el) => {
+          echartData.xdata.push(el.time);
+          echartData.ydata.push(el.jin);
+          echartData.ydata1.push(el.hui);
+        });
+        getOption();
+        break;
+    }
+  }
+
   function getOption() {
-      nextTick(() => {
-        const myChart = echarts.init(work.value)
-        let option = {
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'cross'
-            }
+    nextTick(() => {
+      const myChart = echarts.init(work.value);
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
           },
+        },
 
-          legend: {
-            align: 'left',
-            right: '4%',
-            top: '6%',
-            type: 'plain',
-            textStyle: {
-              color: '#7ec7ff',
-              fontSize: 12
-            },
-            // icon:'rect',
-            itemGap: 25,
-            itemWidth: 18,
-            icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
-            data: [
-              {
-                name: '工作面进风'
-              },
-              {
-                name: '工作面回风'
-              },
-              // {
-              //   name: '工作面需风'
-              // }
-            ]
+        legend: {
+          align: 'left',
+          right: '4%',
+          top: '6%',
+          type: 'plain',
+          textStyle: {
+            color: '#7ec7ff',
+            fontSize: 12,
           },
+          // icon:'rect',
+          itemGap: 25,
+          itemWidth: 18,
+          icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
+          data: [
+            {
+              name: '工作面进风',
+            },
+            {
+              name: '工作面回风',
+            },
+            // {
+            //   name: '工作面需风'
+            // }
+          ],
+        },
 
-          grid: {
-            top: '28%',
-            left: '5%',
-            right: '5%',
-            bottom: '5%',
-            containLabel: true
-          },
+        grid: {
+          top: '28%',
+          left: '5%',
+          right: '5%',
+          bottom: '5%',
+          containLabel: true,
+        },
 
-          xAxis: [
-            {
-              type: 'category',
-              // boundaryGap: false,
-              axisLine: {
-                //坐标轴轴线相关设置。数学上的x轴
-                show: true,
-                lineStyle: {
-                  color: 'rgba(62, 103, 164)',
-                }
-              },
-              axisLabel: {
-                //坐标轴刻度标签的相关设置
-                textStyle: {
-                  color: '#b3b8cc',
-                  padding: 0,
-                  fontSize: 12
-                },
-                formatter: function (data) {
-                  return data
-                }
+        xAxis: [
+          {
+            type: 'category',
+            // boundaryGap: false,
+            axisLine: {
+              //坐标轴轴线相关设置。数学上的x轴
+              show: true,
+              lineStyle: {
+                color: 'rgba(62, 103, 164)',
               },
-              splitLine: {
-                show: false,
-                
+            },
+            axisLabel: {
+              //坐标轴刻度标签的相关设置
+              textStyle: {
+                color: '#b3b8cc',
+                padding: 0,
+                fontSize: 12,
               },
-              axisTick: {
-                show: false
+              formatter: function (data) {
+                return data;
               },
-              data: echartData.xdata
-            }
-          ],
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            data: echartData.xdata,
+          },
+        ],
 
-          yAxis: [
-            {
-              name: 'm³/s',
-              nameTextStyle: {
-                color: '#b3b8cc',
-                fontSize: 12,
-                padding: -10
+        yAxis: [
+          {
+            name: 'm³/s',
+            nameTextStyle: {
+              color: '#b3b8cc',
+              fontSize: 12,
+              padding: -10,
+            },
+            min: 0,
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(62, 103, 164,.4)',
               },
-              min: 0,
-              splitLine: {
-                show: true,
-                lineStyle: {
-                  color: 'rgba(62, 103, 164,.4)',
-                }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(62, 103, 164)',
               },
-              axisLine: {
-                show: true,
-                lineStyle: {
-                  color: 'rgba(62, 103, 164)',
-                }
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: '#b3b8cc',
+                padding: 0,
+                fontSize: 12,
               },
-              axisLabel: {
-                show: true,
-                textStyle: {
-                  color: '#b3b8cc',
-                  padding: 0,
-                  fontSize: 12
-                },
-                formatter: function (value) {
-                  if (value === 0) {
-                    return value
-                  }
-                  return value
+              formatter: function (value) {
+                if (value === 0) {
+                  return value;
                 }
+                return value;
               },
-              axisTick: {
-                show: false
-              }
-            }
-          ],
-          series: [
-            {
-              name: '工作面进风',
-              type: 'line',
-              yAxisIndex: 0,
-              symbolSize: 6,
-              lineStyle: {
-                normal: {
-                  width: 2,
-                  color: 'orange' // 线条颜色
-                },
-                borderColor: 'rgba(0,0,0,.4)'
-              },
-              itemStyle: {
-                color: 'orange',
-                borderColor: '#646ace',
-                borderWidth: 0
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: '工作面进风',
+            type: 'line',
+            yAxisIndex: 0,
+            symbolSize: 6,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: 'orange', // 线条颜色
               },
-              data: echartData.ydata
+              borderColor: 'rgba(0,0,0,.4)',
             },
-            {
-              name: '工作面回风',
-              type: 'line',
-              yAxisIndex: 0,
-              symbolSize: 6,
+            itemStyle: {
+              color: 'orange',
+              borderColor: '#646ace',
+              borderWidth: 0,
+            },
+            data: echartData.ydata,
+          },
+          {
+            name: '工作面回风',
+            type: 'line',
+            yAxisIndex: 0,
+            symbolSize: 6,
 
-              lineStyle: {
-                normal: {
-                  width: 2,
-                  color: '#1891de' // 线条颜色
-                },
-                borderColor: 'rgba(0,0,0,.4)'
-              },
-              itemStyle: {
-                color: '#1891de',
-                borderColor: '#646ace',
-                borderWidth: 0
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: '#1891de', // 线条颜色
               },
-              data: echartData.ydata1
+              borderColor: 'rgba(0,0,0,.4)',
             },
-           
-          ]
-        }
-        myChart.setOption(option)
-        window.onresize = function () {
-          myChart.resize()
-        }
-      })
-    }
-  onMounted(() => {
-    getOption();
-  });
+            itemStyle: {
+              color: '#1891de',
+              borderColor: '#646ace',
+              borderWidth: 0,
+            },
+            data: echartData.ydata1,
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
+    });
+  }
 
+  watch(
+    () => props.workList,
+    (val) => {
+      console.log(val, '工作面数据');
+      workData = val;
+      workTypeList.length = 0;
+      workData.forEach((el) => {
+        workTypeList.push({
+          label: el.deviceName,
+          value: el.deviceName,
+        });
+      });
+      searchValue.value = workTypeList[0].value;
+
+      changeSelect(searchValue.value);
+    },
+    {
+      deep: true,
+    }
+  );
 
-  
+  onMounted(() => {});
 </script>
 
 <style lang="less" scoped>
@@ -247,7 +294,7 @@ function getDetail() {
       font-size: 16px;
       font-family: 'douyuFont';
       cursor: pointer;
-      &:hover{
+      &:hover {
         color: #66ffff;
       }
     }

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

@@ -16,7 +16,7 @@
         </div>
         <!-- 主通风机 -->
         <div class="monitor-box monitor-box1">
-          <mainMonitor />
+          <mainMonitor :maindata="mainList" />
         </div>
         <!-- 通风设备远程控制 -->
         <div class="monitor-box">
@@ -39,27 +39,27 @@
             </div>
           </div>
           <div class="three-modal">
-            <!-- <iframe id="iframe" ref="iframe" src="http://10.10.150.72:8091/user/autologin" scrolling="auto" frameborder="0" width="100%" height="100%"></iframe> -->
+            <iframe id="iframe" ref="iframe" src="http://182.92.126.35:8091/user/autologin" scrolling="auto" frameborder="0" width="100%" height="100%"></iframe>
             <!-- <div id="content" style="width: 100%; height: 100%;"></div> -->
           </div>
         </div>
         <!-- 风量监测 -->
-        <div class="wind-box">
-          <windMonitor />
+        <div class="wind-box" >
+          <windMonitor :flList="flList" />
         </div>
       </div>
       <div class="right-content">
         <!-- 关键通风路线 -->
         <div class="monitor-box">
-          <windLine />
+          <windLine :lineList="lineList"/>
         </div>
         <!-- 工作面智能管控 -->
         <div class="monitor-box monitor-box1">
-          <workMonitor />
+          <workMonitor :workList="workList" />
         </div>
         <!-- 设备预警 -->
         <div class="monitor-box">
-          <deviceWarn />
+          <deviceWarn :warnData="warnData"/>
         </div>
       </div>
     </div>
@@ -76,23 +76,49 @@
   import workMonitor from './components/work-monitor.vue';
   import deviceWarn from './components/device-warn.vue';
   import { useGlobSetting } from '/@/hooks/setting';
+  import {list} from './clique.api'
   
 
   let timer: NodeJS.Timeout | null = null;
   let fanLocalList = reactive<any[]>([]); //局部风机数据
+  let mainList=ref<any[]>([])//主通风机数据
+  let centerList=reactive<any[]>([])//中间区域数据
+  let flList=ref<any[]>([])//风量监测数据
+  let lineList=ref<any>([])//关键路线数据
+  let workList=ref<any>([])//工作面数据
+  let warnData=ref<any>([])//预警数据
   let navList = reactive([
-    { name: '总风量(m³/min)', isShow: true, valList: [{ val: '2' }, { val: '1' }, { val: '3' }, { val: '3' }, { val: '0' }] },
-    { name: '总阻力(Pa)', isShow: true, valList: [{ val: '0' }, { val: '2' }, { val: '4' }, { val: '6' }, { val: '3' }] },
-    { name: '等积孔(m²)', isShow: true, valList: [{ val: '1' }, { val: '0' }, { val: '.' }, { val: '5' }, { val: '4' }] },
-    { name: '外部漏风率', isShow: false, val: '6%' },
-    { name: '有效风量率', isShow: false, val: '91.5%' },
+    { name: '总风量(m³/min)', isShow: true, valList: [] },
+    { name: '需风量(m³/min)', isShow: true, valList: [] },
+    { name: '等积孔(m²)', isShow: true, valList: [
+      {val:'1'},
+      {val:'0'},
+      {val:'.'},
+      {val:'5'},
+      {val:'4'},
+    ] },
+    { name: '外部漏风率', isShow: false, val:0 },
+    { name: '有效风量率', isShow: false, val: 0 },
   ]);
   function getList() {
     list({}).then((res) => {
       console.log(res, 'res-----------');
       fanLocalList.length=0
       fanLocalList.push(res.fanlocal) 
-      console.log(fanLocalList, '---------');
+      mainList.value=res.fanmain
+      centerList=res.midinfo[0].sysdata
+      navList[0].valList=centerList.zongfengliang.split('').map(el=>{
+        return {val:el}
+      })  
+      navList[1].valList=centerList.xufengliang.toString().split('').map(el=>{
+        return {val:el}
+      })  
+      navList[3].val=(((parseFloat(centerList.zongfengliang)-parseFloat(centerList.zonghuifeng)) / parseFloat(centerList.zonghuifeng))*100).toFixed(2)+ '%'
+      navList[4].val=((centerList.xufengliang / parseFloat(centerList.zongfengliang))*100).toFixed(2)+'%'
+      flList.value=res.windrect
+      lineList.value=res.sys_majorpath
+      workList.value=res.sys_surface_caimei
+      warnData.value=res.warn
     });
   }
   onMounted(() => {
@@ -100,7 +126,7 @@
     timer = Number(
       setInterval(() => {
         getList();
-      }, 3000)
+      }, 10000)
     );
   });
 </script>