神东5.5添加弹窗提交

src/design/vent/antCss.less

@@ -141,6 +141,11 @@ tr.@{ventSpace}-table-expanded-row:hover > td {
 }
 
 /* modal 组件 */
+.zxm-modal{
+  top: 320px !important;//lxh
+}
+
+
 .@{ventSpace}-modal-content {
   color: @vent-font-color !important;
   background-color: #0042ab22 !important;
@@ -158,7 +163,7 @@ tr.@{ventSpace}-table-expanded-row:hover > td {
     color: @vent-font-color !important;
   }
   .@{ventSpace}-modal-title {
-    color: #39e9fe !important;
+    color: #fff !important;
   }
 }
 .@{ventSpace}-modal-body {
@@ -166,8 +171,13 @@ tr.@{ventSpace}-table-expanded-row:hover > td {
     background-color: #ffffff00 !important;
   }
   .@{ventSpace}-modal-confirm-title {
-    color: #fff !important;
+    // color: #fff !important;
+    color: #39e9fe !important;//lxh
+  }
+  .@{ventSpace}-modal-confirm-content {
+    color: #fff !important;//lxh
   }
+  
   .@{ventSpace}-form {
     label {
       color: #fff;

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

@@ -53,6 +53,7 @@
   //跳转详情
   function getDetail() {
     console.log('跳转详情');
+    emit('goDetail', 'deviceMo');
   }
   watch(
     () => props.warnData,

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

@@ -37,38 +37,47 @@
   let props = defineProps({
     fandata: Array,
   });
-  const emit = defineEmits(['goDetail'])
+  const emit = defineEmits(['goDetail']);
   const go = useGo();
   let searchValue = ref('');
-  let fanList=reactive<any[]>([])
-  let fanTypeList = reactive<any[]>([]);//下拉列表
-  let fjStatus=ref('')//运行风机
-
+  let fanList = reactive<any[]>([]);
+  let fanTypeList = reactive<any[]>([]); //下拉列表
+  let fjStatus = ref(''); //运行风机
 
   //获取dom节点
   let fan = ref<any>();
   //echart图表数据
-  let echartData=reactive<any>({
-    xdata:0,
-    ydata:0
-  })
-//跳转详情
-function getDetail(){
-    emit('goDetail', 'fanlocal')
+  let echartData = reactive<any>({
+    xdata: 0,
+    ydata: 0,
+  });
+  //跳转详情
+  function getDetail() {
+    emit('goDetail', 'fanlocal');
   }
   //选项切换
   function changeSelect(val) {
     switch (val) {
       case '局扇监测':
-      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;
+        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 '局部通风机系统':
-      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;
+        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;
     }
@@ -276,13 +285,12 @@ function getDetail(){
       };
     });
   }
-  
 
   watch(
     () => props.fandata,
     (val) => {
       console.log(val, '局部风机数据');
-      fanList=val[0]
+      fanList = val[0];
       fanTypeList.length = 0;
       fanList.forEach((el) => {
         fanTypeList.push({
@@ -290,11 +298,10 @@ function getDetail(){
           value: el.strinstallpos,
         });
       });
-      searchValue.value=fanTypeList[0].value
-      console.log( searchValue.value,'77777')
-     
-      changeSelect(searchValue.value)
-      
+      searchValue.value = fanTypeList[0].value;
+      console.log(searchValue.value, '77777');
+
+      changeSelect(searchValue.value);
     },
     {
       deep: true,

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

@@ -39,8 +39,11 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive } from 'vue';
+  import { ref, reactive,defineProps, watch } from 'vue';
   import { getAssetURL } from '/@/utils/ui';
+  let props = defineProps({
+    devicedata: Object,
+  });
   const emit = defineEmits(['goDetail'])
   let iconsMonitor = reactive({
     1: {
@@ -65,7 +68,7 @@
     },
     5: {
       url: getAssetURL('home-container/device/cf.png'),
-      level: 5,
+      level: 2,
       text: '测风装置',
     },
     6: {
@@ -75,7 +78,7 @@
     },
     7: {
       url: getAssetURL('home-container/device/penlin.png'),
-      level: 4,
+      level: 2,
       text: '喷淋',
     },
     8: {
@@ -109,7 +112,7 @@
       text: '瓦斯泵',
     },
     14: {
-      url: getAssetURL('home-container/device/wasichoucaig.png'),
+      url: getAssetURL('home-container/device/js.png'),
       level: 1,
       text: '瓦斯抽采管路',
     },
@@ -124,6 +127,17 @@
     console.log('跳转详情');
     emit('goDetail', 'gate')
   }
+
+  watch(
+    () => props.devicedata,
+    (val) => {
+      console.log(val, '设备数据');
+     
+    },
+    {
+      deep: true,
+    }
+  );
 </script>
 
 <style lang="less" scoped>

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

@@ -55,6 +55,7 @@
   //跳转详情
   function getDetail() {
     console.log('跳转详情');
+    emit('goDetail', 'workMo');
   }
   //选项切换
   function changeSelect(val) {

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

@@ -1,5 +1,5 @@
 <template>
-  <div style="position: relative; width: 100%; height: 100%;">
+  <div style="position: relative; width: 100%; height: 100%">
     <div class="home-container" v-if="pageType == 'home'">
       <div class="header">
         <div class="head-time">
@@ -17,11 +17,11 @@
           </div>
           <!-- 主通风机 -->
           <div class="monitor-box monitor-box1">
-            <mainMonitor  @goDetail="goDetail"/>
+            <mainMonitor :maindata="mainList" @goDetail="goDetail" />
           </div>
           <!-- 通风设备远程控制 -->
           <div class="monitor-box">
-            <windDevice @goDetail="goDetail"/>
+            <windDevice :devicedata="deviceData" @goDetail="goDetail" />
           </div>
         </div>
         <div class="center-content">
@@ -40,38 +40,44 @@
               </div>
             </div>
             <div class="three-modal" id="modalBox">
-              <!-- <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>
           </div>
           <!-- 风量监测 -->
           <div class="wind-box">
-            <windMonitor @goDetail="goDetail"/>
+            <windMonitor :flList="flList" @goDetail="goDetail" />
           </div>
         </div>
         <div class="right-content">
           <!-- 关键通风路线 -->
           <div class="monitor-box">
-            <windLine @goDetail="goDetail"/>
+            <windLine :lineList="lineList" @goDetail="goDetail" />
           </div>
           <!-- 工作面智能管控 -->
           <div class="monitor-box monitor-box1">
-            <workMonitor @goDetail="goDetail"/>
+            <workMonitor :workList="workList" @goDetail="goDetail" />
           </div>
           <!-- 设备预警 -->
           <div class="monitor-box">
-            <deviceWarn @goDetail="goDetail"/>
+            <deviceWarn :warnData="warnData" @goDetail="goDetail" />
           </div>
         </div>
       </div>
     </div>
-    <DeviceMonitor v-else-if="pageType" :pageType="pageType" @goHome="goHome"/>
-    <div id="content" style="width: 100%; height: 100%; position: fixed;"></div>
+    <DeviceMonitor v-else-if="pageType" :pageType="pageType" @goHome="goHome" />
+    <div id="content" style="width: 100%; height: 100%; position: fixed"></div>
   </div>
-  
 </template>
 <script lang="ts" setup>
-  import { reactive, onMounted, ref, nextTick } from 'vue';
+  import { reactive, onMounted, ref, nextTick, createVNode } from 'vue';
   import fanMonitor from './components/fan-monitor.vue';
   import mainMonitor from './components/main-monitor.vue';
   import windDevice from './components/wind-device.vue';
@@ -81,103 +87,124 @@
   import deviceWarn from './components/device-warn.vue';
   import { useGlobSetting } from '/@/hooks/setting';
   import { list } from './clique.api';
-  import DeviceMonitor from '../../monitorManager/deviceMonitor/index.vue'
-  
+  import DeviceMonitor from '../../monitorManager/deviceMonitor/index.vue';
+  import { Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+
   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 mainList = ref<any[]>([]); //主通风机数据
+  let centerList = reactive<any[]>([]); //中间区域数据
+  let flList = ref<any[]>([]); //风量监测数据
+  let lineList = ref<any>([]); //关键路线数据
+  let workList = ref<any>([]); //工作面数据
+  let warnData = ref<any>([]); //预警数据
+  let deviceData = ref<any>({}); //设备监测数据
   let navList = reactive([
     { 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: '等积孔(m²)', isShow: true, valList: [{ val: '1' }, { val: '0' }, { val: '.' }, { val: '5' }, { val: '4' }] },
+    { name: '外部漏风率', isShow: false, val: 0 },
     { name: '有效风量率', isShow: false, val: 0 },
   ]);
-  
-  const loading = ref(false);
+
+  // const loading = ref(false);
   const globSetting = useGlobSetting();
-  const openQianKun = globSetting.openQianKun;
-  let actions;
-  const pageType = ref('home')
+  // const openQianKun = globSetting.openQianKun;
+  // let actions;
+  const pageType = ref('home');
 
-function goDetail(deviceType) {
-  pageType.value = deviceType
-  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 goDetail(deviceType) {
+    Modal.confirm({
+      content: () => '暂未连接井下设备！',
+      icon: () => createVNode(ExclamationCircleOutlined),
+      title: '消息提示',
+      onOk() {
+        return new Promise((resolve, reject) => {
+          setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
+        }).catch(() => console.log('Oops errors!'));
+      },
+      cancelText: () => '取消',
+      onCancel() {
+        Modal.destroyAll();
+      },
+    });
+    // pageType.value = deviceType
+    // 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 getList() {
     list({}).then((res) => {
       console.log(res, 'res-----------');
-      fanLocalList.length=0
-      fanLocalList.push(res.fanlocal) 
-      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
+      fanLocalList.length = 0;
+      fanLocalList.push(res.fanlocal);
+      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;
+      deviceData.value = res.device;
     });
   }
 
-
   onMounted(() => {
-    changeModalBox()
+    getList();
+    changeModalBox();
     const renderModal = () => {
-      const element = document.getElementById('__qiankun_microapp_wrapper_for_micro_vent_3_d_modal__')
-      if(element){
+      const element = document.getElementById('__qiankun_microapp_wrapper_for_micro_vent_3_d_modal__');
+      if (element) {
         element?.setAttribute('style', 'width: 100%; height: 100%');
-      }else{
+      } else {
         setTimeout(() => {
-          renderModal()
-        }, 2000)
+          renderModal();
+        }, 2000);
       }
-    }
-    renderModal()
+    };
+    renderModal();
     timer = Number(
       setInterval(() => {
         getList();
       }, 10000)
     );
-  })
+  });
 </script>
 
 <style lang="less" scoped>
@@ -361,11 +388,10 @@ function changeModalBox() {
         }
       }
     }
-    
   }
-  
+
   // #__qiankun_microapp_wrapper_for_micro_vent_3_d_modal__{
   //   width: 100% !important;
   //   height: 100% !important;
   // }
-</style>
+</style>