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

.env.development

@@ -19,8 +19,7 @@ VITE_GLOB_API_URL=/modelreq
 
 #后台接口全路径地址(必填)
 VITE_GLOB_DOMAIN_URL=http://10.10.150.72:9999
-#VITE_GLOB_DOMAIN_URL=http://182.92.126.35:9999
-#VITE_GLOB_DOMAIN_URL=http://192.168.1.8:9999
+# VITE_GLOB_DOMAIN_URL=http://182.92.126.35:9999
 
 # 接口前缀
 VITE_GLOB_API_URL_PREFIX=
@@ -28,5 +27,5 @@ VITE_GLOB_API_URL_PREFIX=
 #微前端qiankun应用,命名必须以VITE_APP_SUB_开头,jeecg-app-1为子应用的项目名称,也是子应用的路由父路径
 #VITE_APP_SUB_APP = [["micro-need-air", "//10.10.150.72:8099/"], ["micro-vent-3dModal", "//localhost:8091/"], ["micro-fire-front", "//localhost:8090/"]]
 VITE_APP_SUB_APP = [["micro-vent-3dModal", "//192.168.183.154:8091/", "micro-vent-3dModal"], ["micro-need-air", "//localhost:8099/", "micro-need-air"], ["micro-fire-front", "//localhost:8097/", "fire-Micro"]]
-#VITE_APP_SUB_APP = [["micro-vent-3dModal", "//localhost:8091/", "micro-vent-3dModal"], ["micro-need-air", "//localhost:8099/", "micro-need-air"], ["micro-fire-front", "//localhost:8097/", "fire-Micro"]]
+# VITE_APP_SUB_APP = [["micro-vent-3dModal", "//localhost:8091/", "micro-vent-3dModal"], ["micro-need-air", "//localhost:8099/", "micro-need-air"], ["micro-fire-front", "//localhost:8097/", "fire-Micro"]]
 # VITE_APP_SUB_APP = [["micro-vent-3dModal", "//localhost:8091/"], ["micro-need-air", "//localhost:8099/"], ["micro-fire-front", "//localhost:8090/"]]

src/App.vue

@@ -2,7 +2,7 @@
   <AdaptiveContainer :options="{ width: width, height: height }" style="overflow-y: hidden">
     <ConfigProvider :locale="getAntdLocale" prefixCls="zxm">
       <AppProvider>
-        <RouterView v-if="!isReload" />
+        <RouterView />
       </AppProvider>
     </ConfigProvider>
   </AdaptiveContainer>

src/components/chart/PictorialBar.vue

@@ -0,0 +1,111 @@
+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, ref, Ref, reactive, watchEffect } from 'vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+  import { EChartsOption } from 'echarts';
+  import { assign } from 'lodash-es';
+  export default defineComponent({
+    name: 'PictorialBar',
+    props: {
+      chartData: {
+        type: Array,
+        default: () => [],
+      },
+      /** 图表配置 */
+      option: {
+        type: Object,
+        default: () => ({}),
+      },
+      xAxisPropType: {
+        type: String,
+        required: true,
+      },
+      seriesPropType: {
+        type: String,
+        required: true,
+      },
+      width: {
+        type: String as PropType<string>,
+        default: '100%',
+      },
+      height: {
+        type: String as PropType<string>,
+        default: 'calc(100vh - 78px)',
+      },
+    },
+    setup(props) {
+      const chartRef = ref<HTMLDivElement | null>(null);
+      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+      const option: EChartsOption = reactive({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+            label: {
+              show: true,
+              backgroundColor: '#333',
+            },
+          },
+        },
+        grid: {
+          left: 60,
+          right: 50,
+          bottom: 50,
+        },
+        xAxis: {
+          type: 'category',
+          data: [],
+        },
+        yAxis: {
+          type: 'value',
+          nameTextStyle: {
+            fontSize: 14,
+          },
+        },
+        series: [
+          {
+            name: 'bar',
+            type: 'bar',
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(220, 220, 220, 0.8)',
+            },
+            data: [],
+          },
+        ],
+      });
+
+      watchEffect(() => {
+        props.chartData && initCharts();
+      });
+
+      function initCharts() {
+        if (props.option) {
+          assign(option, props.option);
+        }
+        let seriesData = props.chartData.map((item: any) => {
+          // return item.value;
+          return item[props.seriesPropType];
+        });
+        let xAxisData = props.chartData.map((item: any) => {
+          // return item.name;
+          return item[props.xAxisPropType];
+        });
+        if (Array.isArray(option.series)) {
+          option.series.forEach((ele) => {
+            ele.data = seriesData;
+          });
+        } else {
+          option.series!.data = seriesData;
+        }
+
+        (option.xAxis as any).data = xAxisData;
+
+        setOptions(option, false);
+      }
+      return { chartRef };
+    },
+  });
+</script>

src/components/vent/micro/needAir.vue

@@ -19,9 +19,9 @@
         });
       });
 
-      onBeforeUnmount(() => {
-        unmountMicroApps(['/micro-need-air']);
-      });
+      // onBeforeUnmount(() => {
+      //   unmountMicroApps(['/micro-need-air']);
+      // });
 
       return { loading };
     },

src/components/vent/micro/ventModal.vue

@@ -6,7 +6,7 @@
 </template>
 <script lang="ts">
   import { ref, onMounted, onBeforeUnmount, defineComponent } from 'vue';
-  import { unmountMicroApps, mountMicroApp } from '/@/qiankun';
+  import { unmountMicroApps, mountMicroApp, activeApps } from '/@/qiankun';
   import { resetMicroContentWH } from '/@/utils/domUtils';
 
   export default defineComponent({
@@ -14,15 +14,17 @@
     setup() {
       const loading = ref(true);
       onMounted(() => {
+        debugger;
+        // 判断子应用是否存在，不存在注册
         mountMicroApp('/micro-vent-3dModal');
         resetMicroContentWH('micro-vent-3dModal', () => {
           loading.value = false;
         });
       });
 
-      onBeforeUnmount(() => {
-        unmountMicroApps(['/micro-vent-3dModal']);
-      });
+      // onBeforeUnmount(() => {
+      //   unmountMicroApps(['/micro-vent-3dModal']);
+      // });
 
       return { loading };
     },

src/design/vent/color.less

@@ -26,4 +26,5 @@
 // vent/gas 模块下的客制ListItem组件背景色
 @vent-gas-list-item-bg-img: linear-gradient(to right, #39a3ff55, #3977e500);
 @vent-configurable-home-bg-img: linear-gradient(to top, #39a3ff00, #0091ff99);
+@vent-configurable-home-timeline: linear-gradient(to top, #39a3ff00, #0091ff99, #39a3ff00);
 @vent-configurable-home-light-border: #3df6ff;

src/layouts/default/sider/bottomSideder.vue

@@ -105,10 +105,7 @@
         }
         if (currentRoute.value.path.startsWith('/micro-vent-3dModal')) {
           if (path.path.startsWith('/micro-vent-3dModal') && currentRoute.value.path.startsWith('/micro-vent-3dModal')) {
-            unmountMicroApps(['/micro-vent-3dModal']);
-            // nextTick(() => {
-            //   go(path.path);
-            // });
+            // unmountMicroApps(['/micro-vent-3dModal']);
             go(path.path);
           } else {
             go(path.path);

src/layouts/page/index.vue

@@ -17,11 +17,13 @@
         <!--      >-->
         <keep-alive v-if="openCache" :include="getCaches">
           <Suspense>
-            <component :is="Component" :key="route.fullPath" />
+            <!-- <component :is="Component" :key="route.fullPath" /> -->
+            <component :is="Component" :key="route.path" />
           </Suspense>
         </keep-alive>
         <Suspense v-else>
-          <component :is="Component" :key="route.fullPath" />
+          <!-- <component :is="Component" :key="route.fullPath" /> -->
+          <component :is="Component" :key="route.path" />
         </Suspense>
 
         <!--      </transition>-->

src/qiankun/index.ts

@@ -25,7 +25,11 @@ function filterApps() {
 const mountMicroApp = (path, toPath?) => {
   const microApps = filterApps();
   const app = microApps.find((item) => path.startsWith(item['activeRule']));
+  debugger;
   if (app) {
+    if (activeApps[app['activeRule']]) {
+      return;
+    }
     const instance = activeApps[app['activeRule']];
     console.log('子应用实例--------------->', instance);
     if (instance) {
@@ -56,6 +60,7 @@ const mountMicroApp = (path, toPath?) => {
 
 // 卸载app的方法
 const unmountMicroApps = async (multipleApp) => {
+  debugger;
   for (const key in activeApps) {
     const isExist = multipleApp.some((name) => name == key);
     if (isExist) {
@@ -66,4 +71,4 @@ const unmountMicroApps = async (multipleApp) => {
   }
 };
 
-export { mountMicroApp, unmountMicroApps };
+export { mountMicroApp, unmountMicroApps, activeApps };

src/router/guard/index.ts

@@ -39,12 +39,12 @@ function createPageGuard(router: Router) {
   const loadedPageMap = new Map<string, boolean>();
 
   router.beforeEach(async (to) => {
-    if (!to.path.startsWith('/micro-vent-3dModal')) {
-      unmountMicroApps(['/micro-vent-3dModal']);
-    }
-    if (!to.path.startsWith('/micro-need-air')) {
-      unmountMicroApps(['/micro-need-air']);
-    }
+    // if (!to.path.startsWith('/micro-vent-3dModal')) {
+    //   unmountMicroApps(['/micro-vent-3dModal']);
+    // }
+    // if (!to.path.startsWith('/micro-need-air')) {
+    //   unmountMicroApps(['/micro-need-air']);
+    // }
     // The page has already been loaded, it will be faster to open it again, you don’t need to do loading and other processing
     to.meta.loaded = !!loadedPageMap.get(to.path);
     // Notify routing changes

src/router/routes/index.ts

@@ -20,7 +20,7 @@ const routeModuleList: AppRouteModule[] = [];
 // });
 
 export const asyncRoutes = [PAGE_NOT_FOUND_ROUTE, QIANKUN_ROUTE, ...routeModuleList];
-export const RootRoute: AppRouteRecordRaw = await(async() => {
+export const RootRoute: AppRouteRecordRaw = await (async () => {
   await getRemoteSetting();
   const glob = useGlobSetting();
   return {
@@ -81,10 +81,9 @@ export const ventModelRedirect: AppRouteRecordRaw = {
     ignoreAuth: true,
   },
   ver: '1',
-  redirect: ''
+  redirect: '',
 };
 
-
 // Basic routing without permission
 export const basicRoutes = [
   LoginRoute,

src/utils/event/index.ts

@@ -42,7 +42,7 @@ export function triggerWindowResize() {
 }
 
 export function setDivHeight(e: MouseEvent, minHeight, scroll, scrollClientMaxHeight = 175, scrollClientHeight = 100) {
-  if (e && e.target && e.target['className'] && e.target['className'].includes('input')) {
+  if (e && e.target && e.target['className'] && (e.target['className'].includes('input') || e.target['className'].includes('table-hide-icon'))) {
     return;
   }
   e.preventDefault();

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

@@ -45,8 +45,10 @@
               <!-- <div class="btn-icon" @click="goModalDetail"></div> -->
               <!-- 展会不显示按钮 -->
               <div v-if="sysOrgCode !== 'mkyzhpt'" class="btn-icon" @click="goModalDetail"></div>
-              <VentModal ref="centerModalRef"
-                style="width: calc(100% - 30px); height: calc(100% - 30px); position: absolute; background-color: #fff;" />
+              <VentModal
+                ref="centerModalRef"
+                style="width: calc(100% - 30px); height: calc(100% - 30px); position: absolute; background-color: #fff"
+              />
             </div>
           </div>
           <!-- 风量监测 -->
@@ -71,10 +73,12 @@
       </div>
     </div>
   </div>
-  <Network ref="NetworkRef" v-if="pageType == 'timesolution'" :pageResult="pageResult" @changePageType="changePageType"
-    style="position: absolute" />
-  <VentModal v-if="pageType == 'model3D' || pageType == 'timesolution'" ref="fullModalRef"
-    style="width: calc(100% - 30px); height: calc(100% - 30px); position: absolute" />
+  <Network ref="NetworkRef" v-if="pageType == 'timesolution'" :pageResult="pageResult" @changePageType="changePageType" style="position: absolute" />
+  <VentModal
+    v-if="pageType == 'model3D' || pageType == 'timesolution'"
+    ref="fullModalRef"
+    style="width: calc(100% - 30px); height: calc(100% - 30px); position: absolute"
+  />
 </template>
 <script lang="ts" setup>
   import { reactive, onMounted, ref, nextTick, computed, unref, inject, onBeforeUnmount, onUnmounted } from 'vue';

src/views/vent/home/configurable/components/AirVolumeMonitor.vue

@@ -1,27 +1,27 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <CostumeHeader :api="fetchOptions" @change="selectDeviceByID">
+  <!-- <CostumeHeader :api="fetchOptions" @change="selectDeviceByID">
     <div class="w-200px flex flex-items-center">
       <RightCircleOutlined class="w-30px" />
       <div class="flex-grow-1">
         {{ selectedDevice.strinstallpos }}
       </div>
     </div>
-  </CostumeHeader>
-  <Bar
+  </CostumeHeader> -->
+  <PictorialBar
     :option="chartOption"
     series-prop-type="valueA"
     x-axis-prop-type="x"
     :chart-data="[
       { valueA: 1, valueB: 1, x: 2 },
+      { valueA: 1, valueB: 1, x: 3 },
       { valueA: 1, valueB: 1, x: 4 },
-      { valueA: 1, valueB: 1, x: 4 },
-      { valueA: 1, valueB: 1, x: 4 },
-      { valueA: 2, valueB: 2, x: 4 },
-      { valueA: 3, valueB: 1, x: 4 },
-      { valueA: 1, valueB: 1, x: 4 },
+      { valueA: 1, valueB: 1, x: 5 },
+      { valueA: 2, valueB: 2, x: 6 },
+      { valueA: 3, valueB: 1, x: 7 },
+      { valueA: 1, valueB: 1, x: 8 },
     ]"
-    height="220px"
+    height="100%"
   />
   <!-- <div class="flex justify-around mt-10px">
     <MiniBoard v-for="item in configs" :key="item.prop" :label="item.label" :value="selectedDevice[item.prop]" />
@@ -33,7 +33,7 @@
   import { list } from '@/views/vent/deviceManager/deviceTable/device.api';
   import CostumeHeader from './CostumeHeader.vue';
   import { RightCircleOutlined } from '@ant-design/icons-vue';
-  import Bar from '/@/components/chart/Bar.vue';
+  import PictorialBar from '/@/components/chart/PictorialBar.vue';
   import { EChartsOption, graphic } from 'echarts';
   // import MiniBoard from './MiniBoard.vue';
   // import mapComponent from './components/3Dmap/index.vue';
@@ -81,6 +81,10 @@
 
   // 图表相关
   const chartOption: EChartsOption = {
+    grid: {
+      top: 50,
+      height: 150,
+    },
     yAxis: {
       splitLine: {
         lineStyle: {
@@ -89,18 +93,35 @@
         },
       },
     },
+    legend: { show: false },
     series: [
       {
-        name: 'bar',
+        type: 'pictorialBar',
+        name: 'pictorial element',
+        symbol: 'circle',
+        symbolPosition: 'end',
+        symbolSize: [16, 16],
+        symbolOffset: [0, -8],
+        itemStyle: {
+          color: '#66ffff',
+        },
+        data: [],
+      },
+      {
+        name: 'reference bar',
         type: 'bar',
+        silent: true,
         itemStyle: {
           color: new graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: '#0091ffff' },
-            { offset: 1, color: '#0091ff44' },
+            { offset: 0, color: '#66ffff' },
+            { offset: 0.2, color: '#66ffff' },
+            { offset: 1, color: '#66ffff22' },
           ]),
-          borderRadius: [50, 50, 0, 0],
         },
-        barWidth: 20,
+        tooltip: {
+          show: false,
+        },
+        barWidth: 8,
         data: [],
       },
     ],

src/views/vent/home/configurable/components/DeviceWarning.vue

@@ -13,13 +13,14 @@
       </div>
     </div>
   </CostumeHeader>
-  <div>
+  <div class="timeline">
     <div v-for="(item, i) in warns" :key="`svvhccdw-${i}`" class="flex items-center timeline-item">
       <div class="timeline-item__icon" :class="`timeline-item__icon_${item.color}`"></div>
       <div class="timeline-item__dot"></div>
       <div class="timeline-item__label">{{ item.label }}</div>
       <div :class="`timeline-item__value_${item.color}`">{{ item.count }}</div>
     </div>
+    <div class="position-absolute timeline-component"></div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -55,6 +56,11 @@
       count: 0,
       color: 'red',
     },
+    {
+      label: 'test',
+      count: 0,
+      color: 'orange',
+    },
     {
       label: 'test',
       count: 0,
@@ -95,29 +101,34 @@
   @import '@/design/vent/color.less';
 
   .timeline-item {
-    height: 50px;
+    height: 20%;
   }
   .timeline-item__icon_red {
-    background-image: url('@/assets/images/home-container/warn-icon.png');
+    background-image: url('@/assets/images/home-container/configurable/warn_icon_5.png');
+  }
+  .timeline-item__icon_orange {
+    background-image: url('@/assets/images/home-container/configurable/warn_icon_4.png');
   }
   .timeline-item__icon_yellow {
-    background-image: url('@/assets/images/home-container/warn-icon1.png');
+    background-image: url('@/assets/images/home-container/configurable/warn_icon_3.png');
   }
   .timeline-item__icon_green {
-    background-image: url('@/assets/images/home-container/warn-icon2.png');
+    background-image: url('@/assets/images/home-container/configurable/warn_icon_2.png');
   }
   .timeline-item__icon_blue {
-    background-image: url('@/assets/images/home-container/warn-icon3.png');
+    background-image: url('@/assets/images/home-container/configurable/warn_icon_1.png');
   }
   .timeline-item__icon {
     width: 54px;
     height: 45px;
     margin: 0 50px 0 50px;
+    background-repeat: no-repeat;
   }
   .timeline-item__dot {
+    position: absolute;
     width: 10px;
     height: 10px;
-    margin: 0 50px 0 0;
+    left: 7px;
     background-color: @vent-gas-primary-bg;
     border-radius: 5px;
     position: relative;
@@ -133,18 +144,35 @@
     border: 1px solid @vent-gas-tab-border;
   }
   .timeline-item__label {
-    width: 150px;
+    width: 100px;
+    margin-left: 100px;
   }
   .timeline-item__value_red {
     color: red;
   }
+  .timeline-item__value_orange {
+    color: orange;
+  }
   .timeline-item__value_yellow {
     color: yellow;
   }
   .timeline-item__value_green {
-    color: green;
+    color: yellowgreen;
   }
   .timeline-item__value_blue {
-    color: blue;
+    color: lightblue;
+  }
+
+  .timeline {
+    height: 220px;
+    padding: 5px;
+    position: relative;
+  }
+  .timeline-component {
+    width: 2px;
+    height: 180px;
+    top: 20px;
+    left: 170px;
+    background-image: @vent-configurable-home-timeline;
   }
 </style>

src/views/vent/home/configurable/components/MiniBoard.vue

@@ -98,14 +98,15 @@
   // }
 
   .mini-board__value_B {
+    color: @vent-gas-primary-text;
     font-size: 20px;
     font-weight: bold;
     height: 40px;
     line-height: 40px;
   }
   .mini-board__label_B {
-    line-height: 20px;
-    height: 20px;
+    line-height: 24px;
+    height: 24px;
   }
 
   .mini-board__value_C {
@@ -119,14 +120,13 @@
   // }
 
   .mini-board__value_D {
-    color: @vent-gas-primary-text;
     font-size: 20px;
     font-weight: bold;
     height: 40px;
     line-height: 40px;
   }
   .mini-board__label_D {
-    line-height: 20px;
-    height: 20px;
+    line-height: 17px;
+    height: 17px;
   }
 </style>

src/views/vent/home/configurable/components/VentilateAnalysis.vue

@@ -1,12 +1,12 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <CostumeHeader :api="fetchOptions" @change="selectDeviceByID">
-    <div class="w-200px flex flex-items-center">
+    <!-- <div class="w-200px flex flex-items-center">
       <RightCircleOutlined class="w-30px" />
       <div class="flex-grow-1">
         {{ selectedDevice.strinstallpos }}
       </div>
-    </div>
+    </div> -->
   </CostumeHeader>
   <Pie
     :option="chartOption"

src/views/vent/home/configurable/components/WorkSurface.vue

@@ -1,12 +1,12 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <CostumeHeader :api="fetchOptions" @change="selectDeviceByID">
-    <div class="w-200px flex flex-items-center">
+    <!-- <div class="w-200px flex flex-items-center">
       <RightCircleOutlined class="w-30px" />
       <div class="flex-grow-1">
         {{ selectedDevice.strinstallpos }}
       </div>
-    </div>
+    </div> -->
   </CostumeHeader>
   <LineMulti
     :option="chartOption"
@@ -26,6 +26,7 @@
       { valueA: 1, valueB: 2, x: 7 },
     ]"
     height="140px"
+    class="worksurface-chart"
   />
   <div class="flex justify-around">
     <MiniBoard v-for="item in configs" :key="item.prop" :label="item.label" :value="selectedDevice[item.prop]" layout="label-top" type="B" />
@@ -93,8 +94,8 @@
       },
     },
     grid: {
-      top: 40,
-      height: 70,
+      top: 35,
+      height: 80,
     },
     yAxis: {
       type: 'value',
@@ -108,10 +109,18 @@
     textStyle: {
       color: '#fff',
     },
+    backgroundColor: '#081f33',
+    // backgroundColor: '#0091ff12',
   };
 
   onMounted(() => {
     fetchConfig();
   });
 </script>
-<style scoped></style>
+<style scoped lang="less">
+  @import '@/design/vent/color.less';
+
+  .worksurface-chart {
+    border: 1px solid @vent-configurable-home-light-border;
+  }
+</style>

src/views/vent/home/configurable/configurable.data.ts

@@ -1,156 +0,0 @@
-import dayjs from 'dayjs';
-import { cloneDeep } from 'lodash-es';
-
-export const airVolumeMonitorKey = [
-  {
-    code: 'name',
-    value: '矿井名称',
-  },
-  {
-    code: 'jin',
-    value: '总进风量',
-  },
-  {
-    code: 'hui',
-    value: '总回风量',
-  },
-  {
-    code: 'xufeng',
-    value: '总需风量',
-  },
-];
-export const airVolumeMonitor = [
-  {
-    name: 'XXX',
-    jin: 10215,
-    hui: 10215,
-    xufeng: 10215,
-  },
-  {
-    name: 'XXX',
-    jin: 10215,
-    hui: 10215,
-    xufeng: 10215,
-  },
-  {
-    name: 'XXX',
-    jin: 10215,
-    hui: 10215,
-    xufeng: 10215,
-  },
-  {
-    name: 'XXX',
-    jin: 10215,
-    hui: 10215,
-    xufeng: 10215,
-  },
-  {
-    name: 'XXX',
-    jin: 10215,
-    hui: 10215,
-    xufeng: 10215,
-  },
-  {
-    name: 'XXX',
-    jin: 10215,
-    hui: 10215,
-    xufeng: 10215,
-  },
-  {
-    name: 'XXX',
-    jin: 10215,
-    hui: 10215,
-    xufeng: 10215,
-  },
-  {
-    name: 'XXX',
-    jin: 10215,
-    hui: 10215,
-    xufeng: 10215,
-  },
-  {
-    name: 'XXX',
-    jin: 10215,
-    hui: 10215,
-    xufeng: 10215,
-  },
-  {
-    name: 'XXX',
-    jin: 10215,
-    hui: 10215,
-    xufeng: 10215,
-  },
-  {
-    name: 'XXX',
-    jin: 10215,
-    hui: 10215,
-    xufeng: 10215,
-  },
-];
-
-let latestData = [];
-let latestTime = 0;
-export function getDate(workData) {
-  // debugger;
-  const workTypeList = cloneDeep(workData);
-  workData = latestData;
-  const getTime = (val) => {
-    const fiveSecondsAgo = dayjs().subtract(val, 'second');
-    // 获取时分秒
-    const hours = fiveSecondsAgo.hour();
-    const minutes = fiveSecondsAgo.minute();
-    const seconds = fiveSecondsAgo.second();
-    return `${hours}:${minutes}:${seconds}`;
-  };
-  if (latestData.length == 0) {
-    for (let j = 0; j < workTypeList.length; j++) {
-      const itemData = {
-        jin: '0',
-        hui: '0',
-        history: [],
-        deviceName: workTypeList[j]['deviceName'],
-        deviceID: workTypeList[j]['deviceID'],
-        deviceType: 'sys_surface_caimei',
-      };
-      itemData['jin'] = (1042 + (Math.random() * 2 - 1 * 50)).toFixed(2);
-      itemData['hui'] = (1082 + (Math.random() * 2 - 1 * 50)).toFixed(2);
-
-      // 第一次模拟
-      for (let i = 0; i < 5; i++) {
-        const item = {
-          jin: (1042 + (Math.random() * 2 - 1 * 50)).toFixed(2),
-          hui: (1082 + (Math.random() * 2 - 1 * 50)).toFixed(2),
-          time: getTime((i + 1) * 5),
-          deviceName: workTypeList[j]['deviceName'],
-          deviceID: workTypeList[j]['deviceID'],
-          deviceType: 'sys_surface_caimei',
-        };
-        itemData['history'].unshift(item);
-      }
-      workData.push(itemData);
-    }
-    latestTime = new Date().getTime();
-  } else {
-    if (new Date().getTime() - latestTime >= 5000) {
-      for (let j = 0; j < workTypeList.length; j++) {
-        const now = dayjs(latestTime + 5000);
-        // 获取时分秒
-        const hours = now.hour() > 9 ? now.hour() : `0${now.hour()}`;
-        const minutes = now.minute() > 9 ? now.minute() : `0${now.minute()}`;
-        const seconds = now.second() > 9 ? now.second() : `0${now.second()}`;
-        workData[j]['history'].shift();
-        workData[j]['jin'] = (1042 + (Math.random() * 2 - 1 * 50)).toFixed(2);
-        workData[j]['hui'] = (1082 + (Math.random() * 2 - 1 * 50)).toFixed(2);
-        workData[j]['history'].push({
-          jin: (1042 + (Math.random() * 2 - 1 * 50)).toFixed(2),
-          hui: (1082 + (Math.random() * 2 - 1 * 50)).toFixed(2),
-          time: `${hours}:${minutes}:${seconds}`,
-        });
-      }
-      latestTime = new Date().getTime();
-    }
-  }
-  latestData = workData;
-
-  return workData;
-}

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

@@ -12,33 +12,28 @@
         <MonitorCenter />
       </template>
     </a-dropdown>
-    <div class="module-left-wrapper">
-      <ModuleLeft class="module-left" title="局部通风机监测">
-        <SubVentilate />
-      </ModuleLeft>
-      <ModuleLeft class="module-left" title="主通风机监测">
-        <Ventilate />
-      </ModuleLeft>
-      <ModuleLeft class="module-left" title="通风设施远程控制">
-        <VentilateControl />
-      </ModuleLeft>
-    </div>
-    <div class="module-bottom-wrapper">
-      <ModuleBottom class="module-bottom" title="矿井风量实时监测">
-        <AirVolumeMonitor />
-      </ModuleBottom>
-    </div>
-    <div class="module-right-wrapper">
-      <ModuleRight class="module-right" title="通风系统监测与分析">
-        <VentilateAnalysis />
-      </ModuleRight>
-      <ModuleRight class="module-right" title="采煤工作面智能管控">
-        <WorkSurface />
-      </ModuleRight>
-      <ModuleRight class="module-right" title="设备告警">
-        <DeviceWarning />
-      </ModuleRight>
-    </div>
+    <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
+    <ModuleLeft class="module-left top-60px" title="局部通风机监测">
+      <SubVentilate />
+    </ModuleLeft>
+    <ModuleLeft class="module-left top-350px" title="主通风机监测">
+      <Ventilate />
+    </ModuleLeft>
+    <ModuleLeft class="module-left top-640px" title="通风设施远程控制">
+      <VentilateControl />
+    </ModuleLeft>
+    <ModuleBottom class="module-bottom top-640px left-460px" title="矿井风量实时监测">
+      <AirVolumeMonitor />
+    </ModuleBottom>
+    <ModuleRight class="module-right top-60px" title="通风系统监测与分析">
+      <VentilateAnalysis />
+    </ModuleRight>
+    <ModuleRight class="module-right top-350px" title="采煤工作面智能管控">
+      <WorkSurface />
+    </ModuleRight>
+    <ModuleRight class="module-right top-640px" title="设备告警">
+      <DeviceWarning />
+    </ModuleRight>
   </div>
 </template>
 <script lang="ts" setup>
@@ -88,38 +83,22 @@
       }
     }
 
-    .module-left-wrapper {
+    .module-left {
       position: absolute;
-      top: 50px;
+      width: 450px;
+      height: 280px;
       left: 0;
-
-      .module-left {
-        width: 450px;
-        height: 280px;
-        margin-top: 10px;
-      }
     }
-    .module-right-wrapper {
+    .module-right {
       position: absolute;
-      top: 50px;
+      width: 450px;
+      height: 280px;
       right: 0;
-
-      .module-right {
-        width: 450px;
-        height: 280px;
-        margin-top: 10px;
-      }
     }
-
-    .module-bottom-wrapper {
+    .module-bottom {
       position: absolute;
-      bottom: 10px;
-      left: 460px;
-
-      .module-bottom {
-        width: 1000px;
-        height: 280px;
-      }
+      width: 1000px;
+      height: 280px;
     }
     .module-dropdown {
       padding: 10px;

src/views/vent/monitorManager/deviceMonitor/components/device/device.data.ts

@@ -419,5 +419,6 @@ export const vehicleFormConfig = {
 };
 export const haveHandlerArr = ['windrect', 'window', 'gate', 'fanlocal', 'fanmain', 'pump', 'obfurage', 'nitrogen', 'pulping', 'spray', 'dustdev']; // table无操作
 export const noWarningArr = ['location', 'vehicle', 'cheliang']; // 无预警详情的
+// export const haveSysDetailArr = ['forcFan']; //有场景详情的
 export const haveSysDetailArr = ['']; //有场景详情的
 export const noHistoryArr = () => (History_Type['type'] == 'remote' ? ['surface_history'] : []);

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

@@ -46,28 +46,24 @@
         </div>
       </div>
     </div>
-
-    <div class="tabs-box bottom-tabs-box " style="height: 290px;" @mousedown="setDivHeight($event, 230, scroll, 0)" id="monitorBox">
-      <!-- <dv-border-box8 :dur="5"  :style="`padding: 5px; height: ${scroll.y + 100}px`" > -->
+    <div  class="tabs-box bottom-tabs-box" :class="{'table-hide': !tableShow, 'table-show': tableShow }" style="height:290px;" @mousedown="setDivHeight($event, 230, scroll, 0)" id="monitorBox">
       <div :style="`padding: 5px; height: ${scroll.y + 100}px`">
-        <div class="to-small" @click="toHome"></div>
+        <div class="to-small">
+          <div class="to-home" @click="toHome"></div>
+          <FullscreenOutlined v-if="!tableShow" class="table-show-icon" @click="toHide"/>
+        </div>
         <div class="device-button-group" v-if="deviceList.length > 0">
+          <!-- 关联设备 -->
           <div class="device-button" :class="{ 'device-active': deviceActive == device.deviceType }"
             v-for="(device, index) in deviceList" :key="index" @click="monitorChange(index)">{{ device.deviceName }}
           </div>
+          <!-- 场景详情进入 -->
           <div v-if="haveSysDetailArr.find((item) => deviceType.startsWith(item))" class="enter-detail"
-            @click="goDetail()">
+            @click.stop="goDetail()">
             <send-outlined />
             {{ treeNodeTitle }}详情
           </div>
-        </div>
-        <div v-else-if="deviceType == 'forcFan'">
-          <div class="device-button-group">
-            <div class="enter-detail" @click="goDetail()">
-              <send-outlined />
-              {{ treeNodeTitle }}详情
-            </div>
-          </div>
+          
         </div>
         <div v-if="deviceType == 'gaspatrol'">
           <div class="device-button-group">
@@ -77,6 +73,9 @@
             </div>
           </div>
         </div>
+        <div class="table-hide-icon" @click="toHide">
+          <FullscreenExitOutlined style="font-size: 18px;"/>  
+        </div>
         <!-- 是人员定位表单代码，由于放在tab中，表格对已知刷新，导致表单数据也在刷寻，造成输入一半的中文时会清空输入框的内容，导致的输入不上数据 -->
         <div v-if="deviceType.startsWith('location')" class="location-form" style="position: absolute; z-index: 9999; top: 50px;">
           <div class="location-form-item">
@@ -92,7 +91,6 @@
             <Input style="width: 200px;" v-model:value="locationForm.stationname" />
           </div>
         </div>
-        <div style="color: #fff;">{{ deviceType }}</div>
         <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange" id="tabsBox">
           <a-tab-pane key="1" tab="实时监测">
             <template
@@ -123,16 +121,6 @@
                 :pagination="false"></a-table>
             </template>
             <template v-else-if="deviceType.startsWith('safetymonitor') && activeKey == '1'">
-              <!-- <div class="location-form">
-                <div class="location-form-item">
-                  <span class="location-form-label">设备类型:</span>
-                  <Select style="width: 300px;" v-model:value="safetymonitorForm.dataTypeName" placeholder="请选择设备类型" :option="safetyOption" labelField="name" valueField="code"/>
-                </div>
-                <div class="location-form-item">
-                  <span class="location-form-label">分站名称:</span>
-                  <Input style="width: 200px;" v-model:value="safetymonitorForm.strinstallpos" />
-                </div>
-              </div> -->
               <MonitorTable ref="monitorTable" :columnsType="`${deviceType}_monitor`" :deviceType="deviceType"
                 :dataSource="dataSource" design-scope="device_monitor" :isShowActionColumn="true" :isShowSelect="false"
                 title="设备监测" :form-config="formConfig" :scroll="{ y: scroll.y - 110 }">
@@ -333,7 +321,6 @@
             </div>
           </a-tab-pane>
         </a-tabs>
-        <!-- </dv-border-box8> -->
       </div>
     </div>
     <mainPath v-if="deviceType == 'majorpath'" :dataSource="majorPathEchartsData"
@@ -345,7 +332,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, ComponentOptions, shallowRef, reactive, defineProps, watch } from 'vue'
-import { SendOutlined } from '@ant-design/icons-vue';
+import { SendOutlined, FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue';
 import { list, getDeviceList, getDeviceTypeList, devPosition, getDepartmentInfo,getExportUrl } from './device.api'
 import AlarmHistoryTable from '../../../comment/AlarmHistoryTable.vue';
 import HistoryTable from '../../../comment/HistoryTable.vue';
@@ -358,7 +345,7 @@ import { SvgIcon } from '/@/components/Icon';
 import { getActions } from '/@/qiankun/state';
 import { useRouter } from 'vue-router';
 import { setDivHeight } from '/@/utils/event';
-import { majorColumns, haveSysDetailArr, haveDetailArr, haveHandlerArr, noWarningArr, surfaceChartsColumns, noHistoryArr, getMonitorComponent, locationFormConfig, vehicleFormConfig } from './device.data'
+import { majorColumns, haveSysDetailArr, haveDetailArr, haveHandlerArr, noWarningArr, surfaceChartsColumns, noHistoryArr, getMonitorComponent, vehicleFormConfig } from './device.data'
 import mainPath from './modal/mainPath.vue'
 import { formConfig } from '../../../safetyMonitor/safety.data'
 import { getDictItemsByCode } from '/@/utils/dict';
@@ -367,6 +354,7 @@ import MTreeSelect from '/@/components/Form/src/jeecg/components/MTreeSelect.vue
 // import ApiSelect from '/@/components/Form/src/components/ApiSelect.vue';
 import { nextTick } from 'vue';
 import { useMethods } from '/@/hooks/system/useMethods';
+import { useGo } from '/@/hooks/web/usePage';
 // import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
 
 const { FiberModal, BundleModal, DustModal, BallvalveModal, AtomizingModal, GaspatrolModal } = getMonitorComponent()
@@ -379,6 +367,7 @@ const props = defineProps({
   }
 })
 const { handleExportXls } = useMethods();
+const go = useGo()
 const echatsOption = {
   grid: {
     top: '35',
@@ -419,6 +408,7 @@ const modalVisible = ref<Boolean>(false); // 模态框是否可见
 
 // const drawerHeight = ref(240) // 监测框最小高度
 const treeShow = ref(true) //是否显示树形菜单
+const tableShow = ref(true) //是否显示树形菜单
 const locationSettingShow = ref(false) //是否显示树形菜单
 const treeNodeTitle = ref('') // 选中的树形标题
 
@@ -453,11 +443,11 @@ const onSelect: TreeProps['onSelect'] = (keys, e) => {
     if(deviceType.value != e.node.parent.node.type)deviceType.value = e.node.parent.node.type
     systemID.value = e.node.type
     // 传递工作面id信息,用于定位
-    actions.setGlobalState({ locationObj: { pageType: deviceType.value, deviceid: systemID.value }, pageObj: null });
+    go(`/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=${deviceType.value}&deviceid=${systemID.value}`)
   } else {
     systemType.value = e.node.type
     if(deviceType.value != e.node.type)deviceType.value = e.node.type
-    actions.setGlobalState({ locationObj: { pageType: deviceType.value }, pageObj: null });
+    go(`/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=${deviceType.value}&deviceid=`)
   }
   clearTimeout(timer)
   timer = undefined
@@ -786,7 +776,20 @@ function toHome() {
   if (timer) clearTimeout(timer)
   timer = undefined
   deviceType.value = ''
-  actions.setGlobalState({ pageObj: { pageType: 'home' } });
+  go(`/micro-vent-3dModal/dashboard/analysis`)
+  // actions.setGlobalState({ pageObj: { pageType: 'home' } });
+}
+
+function toHide() {
+  tableShow.value = !tableShow.value;
+  document.getElementById("monitorBox").addEventListener("animationend", ()=>{
+    if(!tableShow.value){
+      document.getElementById('monitorBox').style.height = '0px';
+    }else{
+      document.getElementById('monitorBox').style.height = '290px';
+    }
+  });
+  
 }
 
 async function findTreeDataValue(obj) {
@@ -1246,6 +1249,7 @@ onUnmounted(() => {
 }
 
 .location-select-hide {
+  
   right: -2px;
   animation-name: locationHide;
   /* 持续时间 */
@@ -1271,29 +1275,39 @@ onUnmounted(() => {
 .tabs-box{
   height: 290px;
 }
+
 .bottom-tabs-box {
   position: relative;
   .tabs-box {
     width: calc(100% - 12px) !important;
     bottom: 3px !important;
   }
-
+  
   .to-small {
-    width: 60px;
-    height: 60px;
-    background: url('/@/assets/images/vent/home/tosmall.png') no-repeat center;
-    background-size: auto;
     position: absolute;
     top: -65px;
     right: 36px;
-    border-radius: 10px;
-    padding: 8px;
-    backdrop-filter: blur(10px);
-    background-color: rgba(45, 86, 137, 0.418);
-
-    &:hover {
-      background-color: rgba(79, 104, 134, 0.418);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .to-home{
+      width: 60px;
+      height: 60px;
+      background: url('/@/assets/images/vent/home/tohome.png') no-repeat center;
+      background-size: auto;
+      padding: 8px;
+      &:hover {
+        background-color: rgba(79, 104, 134, 0.418);
+      }
     }
+    .table-show-icon{
+      width: 30px;
+      height: 30px;
+      font-size: 30px;
+      color: #fff;
+      margin-left: 10px;
+    }
+    
   }
 
   .device-button-group {
@@ -1414,6 +1428,15 @@ onUnmounted(() => {
         box-shadow: 1px 1px 3px 1px #0efcff inset;
       }
     }
+  
+  }
+  .table-hide-icon{
+    color: #fff;
+    cursor: pointer;
+    position: absolute;
+    right: 20px;
+    top: 10px;
+    z-index: 9999
   }
 
   .enter-detail {
@@ -1456,7 +1479,20 @@ onUnmounted(() => {
     }
   }
 }
-
+.table-hide{
+  height: 0px;
+  animation-name: tableHide;
+  /* 持续时间 */
+  animation-duration: 1s;
+  transition: all 1s ;
+}
+.table-show{
+  height: 290px;
+  animation-name: tableShow;
+  /* 持续时间 */
+  animation-duration: 1s;
+  transition: all 1s ;
+}
 .location-form{
   display: flex;
   margin: 8px;
@@ -1478,7 +1514,28 @@ onUnmounted(() => {
   }
 }
 
+@keyframes tableShow {
+  0% {
+    height: 0px;
+    opacity: 0;
+  }
 
+  100% {
+    height: 290px;
+    opacity: 1;
+  }
+}
+
+@keyframes tableHide {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    height: 0px ;
+    opacity: 0 ;
+  }
+}
 
 @keyframes treeShow {
   0% {

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

@@ -6,12 +6,12 @@
       <DeviceVue ref="DeviceRef" :pageData="pageData" />
     </template>
     <Network ref="NetworkRef" v-if="routerParam === 'timesolution'" :pageResult="pageResult" @changePageType="changePageType" />
+    <VentModal style="width: 100%; height: 100%; position: absolute" />
   </div>
-  <VentModal style="width: 100%; height: 100%; position: absolute" />
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, watch } from 'vue';
+  import { ref, onMounted, watch, onUnmounted } from 'vue';
   import DeviceVue from './components/device/index.vue';
   import Network from './components/network/index.vue';
   import Emergency from './components/emergency/index.vue';
@@ -19,6 +19,7 @@
   import { useRoute } from 'vue-router';
   import { onBeforeUnmount } from 'vue';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import { unmountMicroApps } from '/@/qiankun';
 
   const route = useRoute();
   const actions = getActions();
@@ -53,6 +54,7 @@
   );
 
   onMounted(() => {
+    debugger;
     const { type, deviceType, topage } = route.query;
     deviceKind.value = deviceType as string;
     if (!topage) {
@@ -101,6 +103,9 @@
   onBeforeUnmount(async () => {
     //
   });
+  onUnmounted(() => {
+    // unmountMicroApps(['/micro-vent-3dModal']);
+  });
 </script>
 
 <style lang="less" scoped>