提交

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

@@ -0,0 +1,13 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  list = '/ventanaly-device/safety/ventanalyDevice/homedata',
+}
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.post({ url: Api.list, params });
+
+
+

src/views/vent/home/clique/components/fan-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="请选择" @change="changeSelect" />
+      <a-select
+        v-model:value="searchValue"
+        style="width: 180px; margin-right: 10px"
+        :options="fanTypeList"
+        aria-placeholder="请选择"
+        @change="changeSelect"
+      />
       <div class="status-yx">
         <div class="now-name">
           <i style="margin: 0px 5px 0px 5px">
@@ -24,58 +30,50 @@
 </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';
+
+  const props = defineProps({
+    fandata: {
+      type:Array,
+    }
+  });
+
   let searchValue = ref('局扇监测');
-  const options1 = reactive<any>([
-    {
-      value: '局扇监测',
-      label: '局扇监测',
-    },
-    {
-      value: '局扇监测1',
-      label: '局扇监测1',
-    },
-    {
-      value: '局扇监测2',
-      label: '局扇监测2',
-    },
-  ]);
+  let fanTypeList = reactive<any[]>([]);
 
   //获取dom节点
   let fan = ref<any>();
   //echart图表数据
-  let echartData=reactive<any>({
-    xdata:80,
-    ydata:60
-  })
-//跳转详情
-function getDetail(){
-    console.log('跳转详情')
+  let echartData = reactive<any>({
+    xdata: 80,
+    ydata: 60,
+  });
+  //跳转详情
+  function getDetail() {
+    console.log('跳转详情');
   }
   //选项切换
-  function changeSelect(val){
-    console.log(val,'val-------')
-    switch(val){
-        case '局扇监测':
-          echartData.xdata=80
-          echartData.ydata=60
-          getOption()
-          break;
-          case '局扇监测1':
-          echartData.xdata=50
-          echartData.ydata=70
-          getOption()
-          break;
-          case '局扇监测2':
-          echartData.xdata=40
-          echartData.ydata=90
-          getOption()
-          break;
-
+  function changeSelect(val) {
+    console.log(val, 'val-------');
+    switch (val) {
+      case '局扇监测':
+        echartData.xdata = 80;
+        echartData.ydata = 60;
+        getOption();
+        break;
+      case '局扇监测1':
+        echartData.xdata = 50;
+        echartData.ydata = 70;
+        getOption();
+        break;
+      case '局扇监测2':
+        echartData.xdata = 40;
+        echartData.ydata = 90;
+        getOption();
+        break;
     }
-    
   }
   function getOption() {
     nextTick(() => {
@@ -140,7 +138,7 @@ function getDetail(){
                 color: 'rgba(62, 103, 164)',
               },
             },
-           
+
             axisLabel: {
               show: true,
               textStyle: {
@@ -158,7 +156,6 @@ function getDetail(){
             axisTick: {
               show: false,
             },
-           
           },
         ],
         series: [
@@ -167,7 +164,7 @@ function getDetail(){
             type: 'pictorialBar',
             symbolSize: [60, 16],
             symbolOffset: [0, -10],
-            symbolPosition: 'end',  
+            symbolPosition: 'end',
             z: 12,
             //"barWidth": "20",
             label: {
@@ -175,7 +172,7 @@ function getDetail(){
                 show: true,
                 position: 'top',
                 formatter: '{c}',
-                color:'#fff'
+                color: '#fff',
               },
             },
             data: [
@@ -281,6 +278,20 @@ 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();
   });
@@ -295,7 +306,7 @@ function getDetail(){
     width: 100%;
     height: 100%;
     position: relative;
-   
+
     .title-top {
       position: absolute;
       top: 9px;
@@ -304,7 +315,7 @@ function getDetail(){
       font-size: 16px;
       font-family: 'douyuFont';
       cursor: pointer;
-      &:hover{
+      &:hover {
         color: #66ffff;
       }
     }

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

@@ -12,7 +12,7 @@
       <div class="left-content">
         <!-- 局部通风机 -->
         <div class="monitor-box">
-          <fanMonitor />
+          <fanMonitor :fandata="fanLocalList" />
         </div>
         <!-- 主通风机 -->
         <div class="monitor-box monitor-box1">
@@ -39,7 +39,15 @@
             </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://10.10.150.72:8091/user/autologin"
+              scrolling="auto"
+              frameborder="0"
+              width="100%"
+              height="100%"
+            ></iframe>
           </div>
         </div>
         <!-- 风量监测 -->
@@ -65,7 +73,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { reactive } from 'vue';
+  import { reactive, onMounted, ref } from 'vue';
   import fanMonitor from './components/fan-monitor.vue';
   import mainMonitor from './components/main-monitor.vue';
   import windDevice from './components/wind-device.vue';
@@ -73,7 +81,10 @@
   import windLine from './components/wind-line.vue';
   import workMonitor from './components/work-monitor.vue';
   import deviceWarn from './components/device-warn.vue';
+  import { list } from './clique.api';
 
+  let timer: NodeJS.Timeout | null = null;
+  let fanLocalList = reactive<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' }] },
@@ -81,6 +92,22 @@
     { name: '外部漏风率', isShow: false, val: '6%' },
     { name: '有效风量率', isShow: false, val: '91.5%' },
   ]);
+  function getList() {
+    list({}).then((res) => {
+      console.log(res, 'res-----------');
+      fanLocalList.length=0
+      fanLocalList.push(res.fanlocal) 
+      console.log(fanLocalList, '---------');
+    });
+  }
+  onMounted(() => {
+    // getList()
+    timer = Number(
+      setInterval(() => {
+        getList();
+      }, 3000)
+    );
+  });
 </script>
 
 <style lang="less" scoped>
@@ -230,7 +257,7 @@
               }
             }
           }
-          .three-modal{
+          .three-modal {
             width: 100%;
             height: 100%;
             padding: 20px 17px 20px 15px;