首页跳转

src/layouts/default/content/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="[prefixCls, getLayoutContentMode, { 'layout-content-full': getShowFullHeader }]" v-loading="getOpenPageLoading && getPageLoading">
+  <div id="layoutPage" :class="[prefixCls, getLayoutContentMode, { 'layout-content-full': getShowFullHeader }]" v-loading="getOpenPageLoading && getPageLoading">
     <PageLayout class="page-box"/>
     <!-- update-begin-author:zyf date:20211129 for:qiankun 挂载子应用盒子 -->
     <div v-if="getShowFullHeader && loading" class="app-loading">
@@ -11,9 +11,10 @@
         </div>
       </div>
     </div>
-    <template v-show="openQianKun == 'true' && currentRoute.path.startsWith('/micro-') && !currentRoute.path.endsWith('/modelchannel/model3D-')">
-      <div id="content" class="app-view-box"  :style="{top: getShowFullHeader ? 0 : '48px'}"> </div>
-    </template>
+
+    <div class="app-view-box" v-if="openQianKun == 'true' && currentRoute.path.startsWith('/micro-') && !currentRoute.path.endsWith('/modelchannel/model3D')"  :style="{ top: getShowFullHeader ? 0 : '48px', width: '100%', height: '100%' }"> 
+      <div id="content" :style="{ width: '100%', height: '100%' }"></div>
+    </div>
     <!-- update-end-author:zyf date:20211129 for: qiankun 挂载子应用盒子-->
   </div>
 </template>
@@ -66,7 +67,8 @@
       });
       onBeforeMount(() => {});
       onMounted(() => {
-        //注册openQianKun
+        
+        // 注册openQianKun
         // console.log('window.qiankunStarted------>', window.qiankunStarted);
         if (openQianKun == 'true') {
           if (!window.qiankunStarted) {

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

@@ -35,6 +35,7 @@
   import { ref, reactive } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
   import { getAssetURL } from '/@/utils/ui';
+  const emit = defineEmits(['goDetail'])
   let searchValue = ref('');
   const options1 = reactive<any>([
     {

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

@@ -27,9 +27,8 @@
   import { ref, reactive, onMounted, nextTick } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
   import * as echarts from 'echarts';
-  import { useGo } from '/@/hooks/web/usePage';
-  const go = useGo();
 
+  const emit = defineEmits(['goDetail'])
   let searchValue = ref('局扇监测');
   const options1 = reactive<any>([
     {
@@ -55,8 +54,7 @@
   })
 //跳转详情
 function getDetail(){
-    console.log('跳转详情')
-    go('/micro-vent-3dModal/dashboard/analysis')
+    emit('goDetail', 'fanlocal')
   }
   //选项切换
   function changeSelect(val){

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

@@ -33,6 +33,7 @@
   import { ref, reactive, onMounted, nextTick } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
   import * as echarts from 'echarts';
+  const emit = defineEmits(['goDetail'])
   let searchValue = ref('1号回风斜井');
   const options1 = reactive<any>([
     {
@@ -60,6 +61,7 @@
   //跳转详情
   function getDetail() {
     console.log('跳转详情');
+    emit('goDetail', 'fanmain')
   }
   //选项切换
   function changeSelect(val) {

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

@@ -20,6 +20,7 @@
 <script lang="ts" setup>
   import { ref, reactive } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
+  const emit = defineEmits(['goDetail'])
   // import { getAssetURL } from '/@/utils/ui';
   let searchValue = ref('风门');
   const options1 = reactive<any>([
@@ -35,6 +36,7 @@
   //跳转详情
   function getDetail() {
     console.log('跳转详情');
+    emit('goDetail', 'gate')
   }
   // let imgSrc = ref(getAssetURL('home-container/wind-door.gif'));
   //选项切换

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

@@ -42,6 +42,7 @@
   import { ref, reactive, onMounted, nextTick } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
   import * as echarts from 'echarts';
+  const emit = defineEmits(['goDetail'])
 
   //获取dom节点
   let line = ref<any>();
@@ -78,6 +79,7 @@
 //跳转详情
 function getDetail() {
     console.log('跳转详情');
+    emit('goDetail', 'obfurage')
   }
   function getOption() {
     nextTick(() => {

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

@@ -10,11 +10,12 @@
 <script lang="ts" setup>
   import { ref, reactive, nextTick, onMounted } from 'vue';
   import * as echarts from 'echarts';
+  const emit = defineEmits(['goDetail'])
   //获取dom节点
   let windBar = ref<any>();
 //跳转详情
 function getDetail() {
-    console.log('跳转详情');
+    emit('goDetail', 'windrect')
   }
   function getOption() {
     nextTick(() => {

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

@@ -25,7 +25,7 @@
   import { ref, reactive,nextTick,onMounted } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
   import * as echarts from 'echarts';
-
+  const emit = defineEmits(['goDetail'])
   let searchValue = ref('15212工作面');
   const options1 = reactive<any>([
     {

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

@@ -1,73 +1,78 @@
 <template>
-  <div class="home-container">
-    <div class="header">
-      <div class="head-time">
-        <span>2022/03/28</span>
-        <span>星期一</span>
-        <span>13:46:37</span>
-      </div>
-      <div class="main-title">通防智能管控系统</div>
-    </div>
-    <div class="home-contents">
-      <div class="left-content">
-        <!-- 局部通风机 -->
-        <div class="monitor-box">
-          <fanMonitor />
-        </div>
-        <!-- 主通风机 -->
-        <div class="monitor-box monitor-box1">
-          <mainMonitor />
-        </div>
-        <!-- 通风设备远程控制 -->
-        <div class="monitor-box">
-          <windDevice />
+  <div style="position: relative; width: 100%; height: 100%;">
+    
+    <div class="home-container" v-if="pageType == 'home'">
+      <div class="header">
+        <div class="head-time">
+          <span>2022/03/28</span>
+          <span>星期一</span>
+          <span>13:46:37</span>
         </div>
+        <div class="main-title">通防智能管控系统</div>
       </div>
-      <div class="center-content">
-        <!-- 三维模型 -->
-        <div class="three-box">
-          <div class="three-nav">
-            <div class="nav-item" v-for="(item, index) in navList" :key="index">
-              <div class="item-label">{{ item.name }}</div>
-              <div class="item-value">
-                <div v-if="item.isShow" class="bg-box" v-for="(ite, ind) in item.valList" :key="ind">
-                  <div class="box-line"></div>
-                  <div class="value-text">{{ ite.val }}</div>
+      <div class="home-contents">
+        <div class="left-content">
+          <!-- 局部通风机 -->
+          <div class="monitor-box">
+            <fanMonitor @goDetail="goDetail"/>
+          </div>
+          <!-- 主通风机 -->
+          <div class="monitor-box monitor-box1">
+            <mainMonitor @goDetail="goDetail"/>
+          </div>
+          <!-- 通风设备远程控制 -->
+          <div class="monitor-box">
+            <windDevice @goDetail="goDetail"/>
+          </div>
+        </div>
+        <div class="center-content">
+          <!-- 三维模型 -->
+          <div class="three-box">
+            <div class="three-nav">
+              <div class="nav-item" v-for="(item, index) in navList" :key="index">
+                <div class="item-label">{{ item.name }}</div>
+                <div class="item-value">
+                  <div v-if="item.isShow" class="bg-box" v-for="(ite, ind) in item.valList" :key="ind">
+                    <div class="box-line"></div>
+                    <div class="value-text">{{ ite.val }}</div>
+                  </div>
+                  <div v-else class="value-text1">{{ item.val }}</div>
                 </div>
-                <div v-else class="value-text1">{{ item.val }}</div>
               </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> -->
+            
+            </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> -->
-            <!-- <div id="content" style="width: 100%; height: 100%;"></div> -->
+          <!-- 风量监测 -->
+          <div class="wind-box">
+            <windMonitor @goDetail="goDetail"/>
           </div>
         </div>
-        <!-- 风量监测 -->
-        <div class="wind-box">
-          <windMonitor />
-        </div>
-      </div>
-      <div class="right-content">
-        <!-- 关键通风路线 -->
-        <div class="monitor-box">
-          <windLine />
-        </div>
-        <!-- 工作面智能管控 -->
-        <div class="monitor-box monitor-box1">
-          <workMonitor />
-        </div>
-        <!-- 设备预警 -->
-        <div class="monitor-box">
-          <deviceWarn />
+        <div class="right-content">
+          <!-- 关键通风路线 -->
+          <div class="monitor-box">
+            <windLine @goDetail="goDetail"/>
+          </div>
+          <!-- 工作面智能管控 -->
+          <div class="monitor-box monitor-box1">
+            <workMonitor @goDetail="goDetail"/>
+          </div>
+          <!-- 设备预警 -->
+          <div class="monitor-box">
+            <deviceWarn @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>
   </div>
+  
 </template>
 <script lang="ts" setup>
-  import { reactive, onMounted, ref } from 'vue';
-  import { getActions } from '/@/qiankun/state';
+  import { reactive, onMounted, ref, nextTick } from 'vue';
   import fanMonitor from './components/fan-monitor.vue';
   import mainMonitor from './components/main-monitor.vue';
   import windDevice from './components/wind-device.vue';
@@ -76,8 +81,9 @@
   import workMonitor from './components/work-monitor.vue';
   import deviceWarn from './components/device-warn.vue';
   import { useGlobSetting } from '/@/hooks/setting';
+  import { onUnmounted } from 'vue';
+  import DeviceMonitor from '../../monitorManager/deviceMonitor/index.vue'
   
-
   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' }] },
@@ -89,23 +95,36 @@
   const globSetting = useGlobSetting();
   const openQianKun = globSetting.openQianKun;
   let actions;
-  if (openQianKun == 'true') {
-    actions = getActions();
-    actions.setGlobalState({ isMounted: false });
-    actions.onGlobalStateChange((newState, prev) => {
-      for (const key in newState) {
-        if (key === 'isMounted') {
-          if (newState[key] !== prev[key] && newState[key] === true) {
-            loading.value = false;
-            console.log('首页已经渲染完毕');
-            
-          }
-        }
+
+  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;`)
       }
-    });
+    }
   }
-
   onMounted(() => {
+    changeModalBox()
     const renderModal = () => {
       const element = document.getElementById('__qiankun_microapp_wrapper_for_micro_vent_3_d_modal__')
       if(element){
@@ -118,6 +137,8 @@
     }
     renderModal()
   })
+  onUnmounted(() => {
+  })
 </script>
 
 <style lang="less" scoped>
@@ -132,6 +153,7 @@
   .home-container {
     width: 100%;
     height: 100%;
+    position: relative;
     .header {
       width: 100%;
       height: 76px;

src/views/vent/monitorManager/deviceMonitor/components/device/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="scene-box">
+    <div id="content" style="width: 100%; height: 100%; position: fixed; z-index: 9999;"></div>
     <!-- <div class="top-header">智能通风管理系统</div> -->
     <div class="select-node" :class="{ 'node-select-show': !treeShow, 'node-select-hide': treeShow, }"
       @click="showTree('treeShow', true)">
@@ -205,11 +206,11 @@ import BundleModal from './modal/bundle.modal.vue'
 import DustModal from './modal/dust.modal.vue'
 import { SvgIcon } from '/@/components/Icon';
 import { getActions } from '/@/qiankun/state';
-import { useRouter } from 'vue-router';
 import { setDivHeight } from '/@/utils/event';
 import { majorColumns } from  './device.data'
+import { useGo } from '/@/hooks/web/usePage';
 // import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
-
+const emit = defineEmits(['goHome'])
 
 type DeviceType = { deviceType: string, deviceName: string, datalist: any[] };
 
@@ -217,10 +218,13 @@ const props = defineProps({
   pageData: {
     type: Object,
     default: () => { }
+  },
+  monitorType: {
+    type: String,
+    default: ''
   }
 })
 
-const router = useRouter()
 
 const actions = getActions();
 // actions.setGlobalState({ pageObj: { pageType: 'home' } });
@@ -319,6 +323,8 @@ async function getDeviceType() {
       return dataSourceList
     }
     treeData.value = getData(result, dataSource, key)
+    debugger
+    console.log('treeData.value------------>', treeData.value)
   }
 }
 
@@ -460,29 +466,33 @@ function goDetail(record?) {
 }
 
 function toHome() {
-  deviceList.value = []
-  if (timer) clearTimeout(timer)
-  timer = undefined
-  deviceType.value = ''
-  actions.setGlobalState({ pageObj: { pageType: 'home' } });
+  // history.pushState({}, '', '/micro-vent-3dModal/modelchannel/model3D');
+  // go('/micro-vent-3dModal/modelchannel/model3D')
+  emit('goHome')
 }
 
 async function findTreeDataValue(obj) {
+  
   const findDeviceType = (data: [], obj) => {
     let type = ''
-    if (obj.deviceid) {
+    if (obj && obj.deviceid) {
       type = obj.deviceid
     } else {
       type = obj.deviceType
     }
+    debugger
     data.find((item: any) => {
       if (item.children.length > 0) {
         findDeviceType(item.children, obj)
       }
-
-      if (item.type == type) {
+      if(item.type == 'fanlocal'){
+        item.type
+        debugger
+      }
+      if (item.type == type && obj) {
+        
         deviceType.value = obj.deviceid ? 'sys' : item.type
-        if (obj.deviceid) systemID.value = obj.deviceid
+        if (obj && obj.deviceid) systemID.value = obj.deviceid
         selectedKeys.value = [item.key]
         expandedKeys.value = [item.key]
         treeNodeTitle.value = item.title
@@ -491,7 +501,7 @@ async function findTreeDataValue(obj) {
       return false
     })
   }
-
+  await getDeviceType()
   findDeviceType(treeData.value, obj)
 
   if (timer === undefined) {
@@ -535,21 +545,23 @@ function setLocation() {
   }, 600)
 }
 
-
-
 onMounted(async () => {
   await getDeviceType()
-
   const pageObj = props.pageData
-  if (pageObj.deviceid) {
-    findTreeDataValue({ deviceid: pageObj.deviceid })
-  } else {
-    findTreeDataValue({ deviceType: pageObj.pageType })
+  if(pageObj){
+    if (pageObj.deviceid) {
+      findTreeDataValue({ deviceid: pageObj.deviceid })
+    } else {
+      if (pageObj.pageType) findTreeDataValue({ deviceType: pageObj.pageType })
+    }
+    // 定位
+    const posShowData = pageObj.locationPlane
+    if (posShowData) {
+      locationList.value = posShowData
+    }
   }
-  // 定位
-  const posShowData = pageObj.locationPlane
-  if (posShowData) {
-    locationList.value = posShowData
+  if(props.monitorType){
+    findTreeDataValue({ deviceType: props.monitorType })
   }
 })
 

src/views/vent/monitorManager/deviceMonitor/index.vue

@@ -1,41 +1,62 @@
 <template>
   <div class="scene-box" >
-    <DeviceVue ref="DeviceRef" v-if="routerParam !== 'home' && routerParam !== 'timesolution' && routerParam !== 'model3D' " :pageData="pageData" />
     <Network ref="NetworkRef" v-if="routerParam === 'timesolution'" :pageResult="pageResult" @changePageType="changePageType"/>
+    <DeviceVue ref="DeviceRef" v-else-if="routerParam === 'tunMonitor'" :pageData="pageData" :monitorType="monitorType" @goHome="emit('goHome')"/>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onUnmounted, onMounted } from 'vue';
+import { ref, onUnmounted, onMounted, watch } from 'vue';
 import DeviceVue from './components/device/index.vue';
 import Network from './components/network/index.vue'
 import { getActions } from '/@/qiankun/state';
 import { useRoute } from 'vue-router';
-
+const emit = defineEmits(['goHome'])
+const props = defineProps({
+  pageType: {
+    type: String,
+    default: ''
+  }
+})
 const route = useRoute()
 const actions = getActions();
 
 const DeviceRef = ref(null)
-const NetworkRef = ref(null)
+const NetworkRef = ref<Object | null>(null)
 
 const routerParam = ref('home')
 const pageData = ref(null)
 const pageResult = ref({})
+const monitorType = ref(props.pageType)
 
 const changePageType = (pageType) => {
   console.log('页面类型', pageType)
   routerParam.value = pageType
   actions.setGlobalState({ pageObj: { pageType: pageType } });
 }
+const getPage = (pageType) => {
+
+}
 
 onMounted(() => {
-  const {type} = route.query
-  if(type === 'network'){
-    routerParam.value = 'network'
-    actions.setGlobalState({ pageObj: { pageType: 'network' } });
-  }else{
-    actions.setGlobalState({ pageObj: { pageType: 'home' } });
+  
+  if(props.pageType){
+    routerParam.value = 'tunMonitor'
+    monitorType.value = props.pageType
   }
+
+  // const {type, deviceType } = route.query
+  // if(type === 'network'){
+  //   routerParam.value = 'network'
+  //   actions.setGlobalState({ pageObj: { pageType: 'network' } });
+  // } else if (type === 'tunMonitor') {
+  //   routerParam.value = 'tunMonitor'
+  //   debugger
+  //   monitorType.value = deviceType as string
+  //   // actions.setGlobalState({ locationObj: { pageType: deviceType, deviceid: '' }, pageObj: null });
+  // } else{
+  //   actions.setGlobalState({ pageObj: { pageType: 'home' } });
+  // }
   actions.onGlobalStateChange((newState) => {
     for (const key in newState) {
       if (key === 'pageObj') {