Explorar o código

Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-5

hongrunxia hai 1 ano
pai
achega
61e1b976ef

+ 13 - 0
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 });
+
+
+

+ 46 - 42
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,26 +30,13 @@
 </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 emit = defineEmits(['goDetail'])
   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>();
@@ -57,27 +50,25 @@ function getDetail(){
     emit('goDetail', 'fanlocal')
   }
   //选项切换
-  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(() => {
@@ -142,7 +133,7 @@ function getDetail(){
                 color: 'rgba(62, 103, 164)',
               },
             },
-           
+
             axisLabel: {
               show: true,
               textStyle: {
@@ -160,7 +151,6 @@ function getDetail(){
             axisTick: {
               show: false,
             },
-           
           },
         ],
         series: [
@@ -169,7 +159,7 @@ function getDetail(){
             type: 'pictorialBar',
             symbolSize: [60, 16],
             symbolOffset: [0, -10],
-            symbolPosition: 'end',  
+            symbolPosition: 'end',
             z: 12,
             //"barWidth": "20",
             label: {
@@ -177,7 +167,7 @@ function getDetail(){
                 show: true,
                 position: 'top',
                 formatter: '{c}',
-                color:'#fff'
+                color: '#fff',
               },
             },
             data: [
@@ -283,6 +273,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();
   });
@@ -297,7 +301,7 @@ function getDetail(){
     width: 100%;
     height: 100%;
     position: relative;
-   
+
     .title-top {
       position: absolute;
       top: 9px;
@@ -306,7 +310,7 @@ function getDetail(){
       font-size: 16px;
       font-family: 'douyuFont';
       cursor: pointer;
-      &:hover{
+      &:hover {
         color: #66ffff;
       }
     }

+ 40 - 29
src/views/vent/home/clique/index.vue

@@ -14,7 +14,7 @@
         <div class="left-content">
           <!-- 局部通风机 -->
           <div class="monitor-box">
-            <fanMonitor @goDetail="goDetail"/>
+            <fanMonitor @goDetail="goDetail":fandata="fanLocalList" />
           </div>
           <!-- 主通风机 -->
           <div class="monitor-box monitor-box1">
@@ -84,6 +84,8 @@
   import { onUnmounted } from 'vue';
   import DeviceMonitor from '../../monitorManager/deviceMonitor/index.vue'
   
+  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' }] },
@@ -95,36 +97,42 @@
   const globSetting = useGlobSetting();
   const openQianKun = globSetting.openQianKun;
   let actions;
-
   const pageType = ref('home')
-  
-  function goDetail(deviceType) {
-    pageType.value = deviceType
+
+function goDetail(deviceType) {
+  pageType.value = deviceType
+  changeModalBox()
+}
+function goHome() {
+  pageType.value = 'home'
+  nextTick(() => {
     changeModalBox()
-  }
-  function goHome() {
-    pageType.value = 'home'
-    nextTick(() => {
-      changeModalBox()
-    })
-  }
-  function changeModalBox() {
-    if(pageType.value === 'home'){
-      const dom = document.getElementById('modalBox') as HTMLElement
-      if (dom && dom.parentElement) {
-        const contentDom = document.getElementById('content') as HTMLElement
-        contentDom?.setAttribute('style', `top: ${dom.parentElement.offsetTop + 20}px; left: ${dom.parentElement.offsetLeft + 20}px; width: ${dom.offsetWidth - 40}px; height: ${dom.offsetHeight - 40}px; position: fixed;`)
-      }
-    }else{
-      const dom = document.getElementById('modalBox') as HTMLElement
-      if (dom && dom.parentElement) {
-        const contentDom = document.getElementById('content') as HTMLElement
-        contentDom?.setAttribute('style', `top:0px; left: 0px; width: 100%; height: 100%; position: fixed;`)
-      }
+  })
+}
+function changeModalBox() {
+  if (pageType.value === 'home') {
+    const dom = document.getElementById('modalBox') as HTMLElement
+    if (dom && dom.parentElement) {
+      const contentDom = document.getElementById('content') as HTMLElement
+      contentDom?.setAttribute('style', `top: ${dom.parentElement.offsetTop + 20}px; left: ${dom.parentElement.offsetLeft + 20}px; width: ${dom.offsetWidth - 40}px; height: ${dom.offsetHeight - 40}px; position: fixed;`)
+    }
+  } else {
+    const dom = document.getElementById('modalBox') as HTMLElement
+    if (dom && dom.parentElement) {
+      const contentDom = document.getElementById('content') as HTMLElement
+      contentDom?.setAttribute('style', `top:0px; left: 0px; width: 100%; height: 100%; position: fixed;`)
     }
   }
+}
+function getList() {
+  list({}).then((res) => {
+    console.log(res, 'res-----------');
+    fanLocalList.length = 0
+    fanLocalList.push(res.fanlocal)
+    console.log(fanLocalList, '---------');
+  });
+}
   onMounted(() => {
-    changeModalBox()
     const renderModal = () => {
       const element = document.getElementById('__qiankun_microapp_wrapper_for_micro_vent_3_d_modal__')
       if(element){
@@ -136,8 +144,11 @@
       }
     }
     renderModal()
-  })
-  onUnmounted(() => {
+    timer = Number(
+      setInterval(() => {
+        getList();
+      }, 3000)
+    );
   })
 </script>
 
@@ -289,7 +300,7 @@
               }
             }
           }
-          .three-modal{
+          .three-modal {
             width: 100%;
             height: 100%;
             padding: 20px 17px 20px 15px;