绿色版本首页更新

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

@@ -2829,7 +2829,7 @@ export const testConfigFusionGreen: Config[] = [
           },
         },
       ],
-     to:'/ventilate/warn/home',
+      to: '/ventilate/warn/home',
     },
     showStyle: {
       size: 'width:420px;height:400px;',
@@ -3052,7 +3052,7 @@ export const testConfigFusionGreen: Config[] = [
           },
         },
       ],
-     to:'/device/warn/home',
+      to: '/device/warn/home',
     },
     showStyle: {
       size: 'width:420px;height:400px;',
@@ -3134,7 +3134,7 @@ export const testConfigFusionGreen: Config[] = [
           },
         },
       ],
-      to:'/fire/warn/home',
+      to: '/fire/warn/home',
     },
     showStyle: {
       size: 'width:420px;height:400px;',
@@ -3230,7 +3230,7 @@ export const testConfigFusionGreen: Config[] = [
           },
         },
       ],
-     to:'/dust/warn/home',
+      to: '/dust/warn/home',
     },
     showStyle: {
       size: 'width:420px;height:400px;',
@@ -3298,7 +3298,7 @@ export const testConfigFusionGreen: Config[] = [
           },
         },
       ],
-       to:'/gas/warn/home',
+      to: '/gas/warn/home',
     },
     showStyle: {
       size: 'width:990px;height:170px;',
@@ -4457,3 +4457,10 @@ export const testConfigWarnMonitor: Config[] = [
     },
   },
 ];
+
+export let menuList: any[] = [
+  { name: '灾害预警', MenuItemList: [] },
+  { name: '通风预警', MenuItemList: [] },
+  { name: '火灾预警', MenuItemList: [] },
+  { name: '粉尘预警', MenuItemList: [] },
+]

src/views/vent/home/configurable/green/common-green.vue

@@ -1,7 +1,10 @@
 <template>
-  <div class="common-green">
+  <div class="vent-green">
     <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
     <template v-if="!route.query.deviceType">
+      <div v-if="!route.query.embed" class="top-bg">
+        <greenNav :activeIndex="activeIndex" />
+      </div>
       <div class="main-container">
         <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
         <ModuleOriginal v-for="cfg in configs" :key="cfg.deviceType" :show-style="cfg.showStyle"
@@ -13,7 +16,7 @@
       </div>
     </template>
 
-    <div style="width: 1300px; height: 530px; position: absolute; left: 436px; top: 0">
+    <div style="width: calc(100% - 468px); height: 530px; position: absolute; left: 436px; top: 110px">
       <VentModal />
     </div>
   </div>
@@ -21,12 +24,13 @@
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
 import { useInitConfigs, useInitPage } from '../hooks/useInit';
+import greenNav from './components/green-nav.vue';
 import ModuleOriginal from './components/ModuleOriginal-green.vue';
 // import greenRightTag from './components/green-right-tag.vue';
 import { list } from '../configurable.api';
 import { useRoute, useRouter } from 'vue-router';
 import { useGlobSetting } from '/@/hooks/setting';
-import { testConfigVent, testConfigVentRealtime } from '../configurable.data';
+import { testConfigVent, } from '../configurable.data';
 import VentModal from '/@/components/vent/micro/ventModal.vue';
 
 const { title = '智能通风管控系统' } = useGlobSetting();
@@ -34,41 +38,13 @@ const { title = '智能通风管控系统' } = useGlobSetting();
 const { isOriginal, fetchConfigs } = useInitConfigs();
 const { mainTitle, data, updateData, updateEnhancedConfigs } = useInitPage(title);
 const route = useRoute();
-
+let activeIndex = ref(1)
 let interval: number | undefined;
 let configs = ref<any[]>([]);
 function refresh() {
   fetchConfigs('vent').then(() => {
     configs.value = testConfigVent;
     updateEnhancedConfigs(configs.value);
-
-    // 测风装置	windrect
-    // 自动风窗	window
-    // 自动风门	gate
-    // 传感器	modelsensor
-    // 局部通风机	fanlocal
-    // 主通风机	fanmain
-    // 密闭	obfurage
-    // 安全监控	safetymonitor
-    // 光纤测温	fiber
-    // 束管监测	bundletube
-    // 制氮	nitrogen
-    // 制浆	pulping
-    // 喷淋	spray
-    // 喷粉	dustdev
-    // 喷雾设备	atomizing
-    // 除尘风机	dedustefan
-    // 粉尘传感器	dustsensor
-    // 转载点	transferpoint
-    // 瓦斯抽采泵	pump
-    // 粉尘	dusting
-    // 瓦斯监测	gasmonitor
-    // 球阀	ballvalve
-    // 压风机	forcFan
-    // 瓦斯巡检	gaspatrol
-    // 防火门	firedoor
-    // 隔爆设施	explosionProof
-    // 瓦斯管道阀门	gasvalve
     list({
       types: configs.value
         .filter((e) => e.deviceType)
@@ -121,24 +97,32 @@ onUnmounted(() => {
 }
 
 @{theme-deepblue} {
-  .common-green {
+  .vent-green {
     --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
   }
 }
 
-.common-green {
+.vent-green {
   --image-modal-top: url('/@/assets/images/vent/home/modal-top.png');
-  --image-monitor-realtime: url('/@/assets/images/company/monitor-realtime.png');
-  --image-monitor-doc: url('/@/assets/images/company/monitor-doc.png');
-  --image-monitor-goto: url('/@/assets/images/company/monitor-goto.png');
 
   width: 100%;
   height: 100%;
   position: relative;
 
-  .main-container {
+  .top-bg {
     width: 100%;
-    height: 100%;
+    height: 96px;
+    position: absolute;
+    z-index: 1;
+  }
+
+  .main-container {
+    position: absolute;
+    top: 96px;
+    width: calc(100% - 30px);
+    height: calc(100% - 96px);
+    margin: 0px 15px;
+    box-sizing: border-box;
   }
 }
 

src/views/vent/home/configurable/green/components/center-area-green.vue

@@ -28,7 +28,7 @@
             </div>
             <div class="vent-warn">
                 <div class="vent-icon"></div>
-                <div class="item-content"  @click="showModal('vent')">
+                <div class="item-content" @click="showModal('vent')">
                     <div class="ite-label">通风监测预警</div>
                     <div class="ite-val">{{ paramDatas.tf == 0
                         ? '低风险'
@@ -91,7 +91,7 @@
             </div>
             <div class="fire-warn">
                 <div class="fire-icon"></div>
-                <div class="item-content" @click="showModal('fire')" >
+                <div class="item-content" @click="showModal('fire')">
                     <div class="ite-label">火灾监测预警</div>
                     <div class="ite-val">{{ paramDatas.fire == 0
                         ? '低风险'
@@ -131,7 +131,7 @@
 
 <script lang="ts" setup>
 import { reactive, watch } from 'vue'
- import { useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 import { useGlobSetting } from '/@/hooks/setting';
 import RiskWarnLevel from './dz-risk.vue'
 let props = defineProps({
@@ -148,32 +148,32 @@ let paramDatas = reactive<any>({})
 const { sysOrgCode, sysDataType } = useGlobSetting();
 
 //跳转详情
-  function showModal(data) {
+function showModal(data) {
     switch (data) {
-      case 'vent':
-        router.push('/ventilate/warn/home');
-        break;
-      case 'fire':
-        router.push('/fire/warn/home');
-        break;
-      case 'dust':
-        router.push('/dust/warn/home');
-        break;
-      case 'waterLevel':
-        console.log('waterLevel');
-        router.push('/warn/waterLevel/home');
-        break;
-      case 'gas':
-        router.push('/gas/warn/home');
-        break;
-      case 'sbyj':
-        router.push('/device/warn/home');
-        break;
-      case 'Minepressure':
-        router.push('/monitorChannel/monitor-Minepressure');
-        break;
+        case 'vent':
+            router.push('/ventilate/warn/home');
+            break;
+        case 'fire':
+            router.push('/fire/warn/home');
+            break;
+        case 'dust':
+            router.push('/dust/warn/home');
+            break;
+        case 'waterLevel':
+            console.log('waterLevel');
+            router.push('/warn/waterLevel/home');
+            break;
+        case 'gas':
+            router.push('/gas/warn/home');
+            break;
+        case 'sbyj':
+            router.push('/device/warn/home');
+            break;
+        case 'Minepressure':
+            router.push('/monitorChannel/monitor-Minepressure');
+            break;
     }
-  }
+}
 
 watch(() => props.paramData, (newV, oldV) => {
     paramDatas = newV
@@ -276,8 +276,8 @@ watch(() => props.paramData, (newV, oldV) => {
 
     .gas-warn {
         position: absolute;
-      left: 420px;
-    top: 436px;
+        left: 420px;
+        top: 436px;
         width: 132px;
         height: 108px;
         background: var(--image-model_gas_warn) no-repeat;
@@ -296,7 +296,7 @@ watch(() => props.paramData, (newV, oldV) => {
 
     .fire-warn {
         position: absolute;
-           right: 178px;
+        right: 178px;
         top: 58px;
         width: 132px;
         height: 108px;
@@ -316,7 +316,7 @@ watch(() => props.paramData, (newV, oldV) => {
 
     .sz-warn {
         position: absolute;
-        right:34px;
+        right: 34px;
         top: 136px;
         width: 132px;
         height: 108px;
@@ -332,6 +332,7 @@ watch(() => props.paramData, (newV, oldV) => {
         height: 56px;
         background: var(--image-model_item_content) no-repeat;
         background-size: 100% 100%;
+        color: #fff;
     }
 
     .item-content1 {
@@ -362,6 +363,7 @@ watch(() => props.paramData, (newV, oldV) => {
     .ite-content {
         width: 50%;
         height: 100%;
+        color: #fff;
     }
 }
 </style>

src/views/vent/home/configurable/green/components/green-nav.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div class="green-nav">
-    <div class="main-title">{{ Title }}</div>
+    <div class="main-title">{{ mainTitle }}</div>
     <!-- menu区域 -->
     <div class="nav-menu">
       <div :class="activeIndex == index ? 'nav-menu-active' : 'nav-menu-unactive'" v-for="(item, index) in menuList"
@@ -20,47 +20,44 @@
 </template>
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
-let props = defineProps({
-  Title: {
-    type: String,
-    default: ''
-  },
-  activeIndex: {
-    type: Number,
-    default: 0
+import { menuList } from '../../configurable.data'
+import { useGlobSetting } from '/@/hooks/setting';
+import { useInitPage } from '../../hooks/useInit';
+import { useRouter } from 'vue-router';
+
+let props=defineProps({
+  activeIndex:{
+    type:Number,
   }
 })
 
-let menuList = ref<any[]>([
-  {
-    name: '灾害预警', MenuItemList: [
-      // { name: '光纤测温监测' },
-      // { name: '束管监测' },
-      // { name: '智能注氮系统' },
-      // { name: '智能注浆系统' },
-      // { name: '火灾监测预警' },
-      // { name: '色谱仪报表分析' },
-    ]
-  },
-  { name: '火灾监控', MenuItemList: [] },
-  { name: '粉尘监控', MenuItemList: [] },
-  { name: '多灾融合预警', MenuItemList: [] },
-  // { name: '智能通风', MenuItemList: [] },
-  // { name: '瓦斯监控', MenuItemList: [] },
-  // { name: '综合管控', MenuItemList: [] },
-])//一级菜单列表
-
-
+const { title = '智能通风管控系统' } = useGlobSetting();
+const { mainTitle } = useInitPage(title);
 let isShowMenuItem = ref(false)//是否显示menuItem下拉选项菜单
 let menuItemActive = ref(0)//menuItem当前激活选项
-let $emit = defineEmits(['menuToggle'])
+let router = useRouter()
+
 
 
 //menu选项切换
 function menuClick(index, item) {
   isShowMenuItem.value = !isShowMenuItem.value
   //menu切换，界面跳转
-  $emit('menuToggle', item, index)
+  switch (item.name) {
+    case '灾害预警':
+      router.push('/configurable/green/home')
+      break;
+    case '通风预警':
+      router.push('/micro-vent-3dModal/configurable/green/ventS/home')
+      break;
+    case '火灾预警':
+      router.push('/micro-vent-3dModal/configurable/green/fireS/home')
+      break;
+    case '粉尘预警':
+      router.push('/micro-vent-3dModal/configurable/green/dustS/home')
+      break;
+
+  }
 }
 
 //menuItem选项切换
@@ -102,6 +99,7 @@ function menuItemClick(ind) {
     font-family: 'douyuFont';
     font-size: 20px;
     letter-spacing: 2px;
+    color: #fff;
   }
 
   .nav-menu {
@@ -112,6 +110,7 @@ function menuItemClick(ind) {
     height: 100%;
     display: flex;
     justify-content: flex-start;
+    color: #fff;
 
     .nav-menu-active {
       position: relative;
@@ -173,27 +172,6 @@ function menuItemClick(ind) {
         }
       }
     }
-
-    // @keyframes fadeIn {
-    //   from {
-    //     opacity: 0;
-    //   }
-
-    //   to {
-    //     opacity: 1;
-    //   }
-    // }
-
-    // /* 定义淡出动画 */
-    // @keyframes fadeOut {
-    //   from {
-    //     opacity: 1;
-    //   }
-
-    //   to {
-    //     opacity: 0;
-    //   }
-    // }
   }
 }
 </style>

src/views/vent/home/configurable/green/dust-green.vue

@@ -2,19 +2,23 @@
   <div class="dust-green">
     <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
     <template v-if="!route.query.deviceType">
+       <div v-if="!route.query.embed" class="top-bg">
+        <greenNav :activeIndex="activeIndex"/>
+      </div>
       <div class="main-container">
         <ModuleOriginal v-for="cfg in configs" :key="cfg.deviceType" :show-style="cfg.showStyle"
           :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
           :visible="true" />
       </div>
     </template>
-    <div style="width: 1020px; height: 530px; position: absolute; left: 436px; top: 0">
+    <div style="width: calc(100% - 928px); height: 544px; position: absolute; left: 464px; top: 96px">
       <VentModal />
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted,ref } from 'vue';
+import greenNav from './components/green-nav.vue';
 import { useInitConfigs, useInitPage } from '../hooks/useInit';
 import ModuleOriginal from './components/ModuleOriginal-green.vue';
 import VentModal from '/@/components/vent/micro/ventModal.vue';
@@ -29,7 +33,7 @@ const { configs, fetchConfigs } = useInitConfigs();
 const { data, updateData, updateEnhancedConfigs } = useInitPage(title);
 const route = useRoute();
 let interval: number | undefined;
-
+let activeIndex=ref(3)
 onMounted(() => {
   fetchConfigs('dust-green').then(() => {
     configs.value = testConfigDustGreen;
@@ -70,9 +74,22 @@ onUnmounted(() => {
   height: 100%;
   position: relative;
 
-  .main-container {
+   .top-bg {
     width: 100%;
-    height: 100%;
+    height: 96px;
+    // background: var(--image-modal-top) no-repeat center;
+    position: absolute;
+    z-index: 1;
+  }
+
+
+  .main-container {
+     position: absolute;
+    top: 96px;
+    width: calc(100% - 30px);
+    height: calc(100% - 96px);
+    margin: 0px 15px;
+    box-sizing: border-box;
   }
 }
 

src/views/vent/home/configurable/green/fire-green.vue

@@ -2,6 +2,9 @@
   <div class="fire-green">
     <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
     <template v-if="!route.query.deviceType">
+        <div v-if="!route.query.embed" class="top-bg">
+        <greenNav :activeIndex="activeIndex"/>
+      </div>
       <div class="main-container">
         <ModuleOriginal v-for="(cfg, index) in configs" :key="cfg.deviceType + index" :show-style="cfg.showStyle"
           :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
@@ -9,13 +12,14 @@
       </div>
     </template>
 
-    <div style="width: 1020px; height: 530px; position: absolute; left: 436px; top: 0">
+    <div style="width: calc(100% - 928px); height: 544px; position: absolute; left: 464px; top: 96px">
       <VentModal />
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted,ref } from 'vue';
+import greenNav from './components/green-nav.vue';
 import { useInitConfigs, useInitPage } from '../hooks/useInit';
 import ModuleOriginal from './components/ModuleOriginal-green.vue';
 import VentModal from '/@/components/vent/micro/ventModal.vue';
@@ -27,8 +31,8 @@ const { title = '智能通风管控系统' } = useGlobSetting();
 const { configs, fetchConfigs } = useInitConfigs();
 const { data, updateData } = useInitPage(title);
 const route = useRoute();
+let activeIndex=ref(2)
 let interval: number | undefined;
-
 onMounted(() => {
   fetchConfigs('fire-green').then(() => {
     configs.value = testConfigFireGreen;
@@ -62,10 +66,20 @@ onUnmounted(() => {
    width: 100%;
   height: 100%;
   position: relative;
+  .top-bg {
+    width: 100%;
+    height: 96px;
+    position: absolute;
+    z-index: 1;
+  }
 
   .main-container {
-    width: 100%;
-    height: 100%;
+    position: absolute;
+    top: 96px;
+    width: calc(100% - 30px);
+    height: calc(100% - 96px);
+    margin: 0px 15px;
+    box-sizing: border-box;
   }
 }
 

src/views/vent/home/configurable/green/fusion-warn-green.vue

@@ -2,6 +2,9 @@
   <div class="fusion-home">
     <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
     <template v-if="!route.query.deviceType">
+       <div  class="top-bg">
+        <greenNav :activeIndex="activeIndex"/>
+      </div>
       <div class="main-container">
         <ModuleOriginal v-for="(cfg, index) in configs" :key="cfg.deviceType + index" :show-style="cfg.showStyle"
           :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
@@ -16,6 +19,7 @@
 </template>
 <script lang="ts" setup>
 import { ref, reactive, onMounted, onUnmounted } from 'vue';
+import greenNav from './components/green-nav.vue';
 import { useInitConfigs, useInitPage } from '../hooks/useInit';
 import ModuleOriginal from './components/ModuleOriginal-green.vue';
 import CenterAreaGreen from './components/center-area-green.vue';
@@ -28,6 +32,7 @@ const { configs, fetchConfigs } = useInitConfigs();
 const { data, updateData } = useInitPage(title);
 const route = useRoute();
 const paramData = reactive<any>({})
+let activeIndex=ref(0)
 // https获取监测数据
 let timer: null | NodeJS.Timeout = null;
 function getMonitor(flag = false) {
@@ -99,15 +104,27 @@ onUnmounted(() => {
   height: 100%;
   position: relative;
 
-  .main-container {
+   .top-bg {
     width: 100%;
-    height: 100%;
+    height: 96px;
+    // background: var(--image-modal-top) no-repeat center;
+    position: absolute;
+    z-index: 1;
+  }
+
+  .main-container {
+     position: absolute;
+    top: 96px;
+    width: calc(100% - 30px);
+    height: calc(100% - 96px);
+    margin: 0px 15px;
+    box-sizing: border-box;
   }
 
   .center-area {
     position: absolute;
     left: 450px;
-    top: 0;
+    top: 96px;
     width: calc(100% - 900px);
     height: calc(100% - 200px);
   }

src/views/vent/home/configurable/green/vent-Green.vue

@@ -1,106 +0,0 @@
-<template>
-  <div class="company-home">
-    <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
-    <template v-if="!route.query.deviceType">
-      <div v-if="!route.query.embed" class="top-bg">
-        <greenNav :Title="mainTitle" :activeIndex="activeIndex" @menuToggle="menuToggle" />
-      </div>
-
-      <div class="main-container">
-        <component :is="currentComponent" />
-      </div>
-    </template>
-  </div>
-</template>
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import { useInitPage } from '../hooks/useInit';
-import fireGreen from './fire-green.vue';
-import dustGreen from './dust-green.vue';
-import fusionWarnGreen from './fusion-warn-green.vue'
-import commonGreen from './common-green.vue';
-import greenNav from './components/green-nav.vue';
-import { useRoute } from 'vue-router';
-import { useGlobSetting } from '/@/hooks/setting';
-
-//当前激活menu索引
-let activeIndex = ref(0);
-//当前加载menu组件
-let currentComponent = ref<any>(commonGreen);
-const { title = '智能通风管控系统' } = useGlobSetting();
-const route = useRoute();
-
-const { mainTitle } = useInitPage(title);
-
-//menu切换，界面跳转
-function menuToggle(item, index) {
-  activeIndex.value = index;
-  switch (item.name) {
-    case '灾害预警':
-      currentComponent.value = commonGreen;
-      break;
-    case '火灾监控':
-      currentComponent.value = fireGreen;
-      break;
-    case '粉尘监控':
-      currentComponent.value = dustGreen;
-      break;
-    case '多灾融合预警':
-      currentComponent.value = fusionWarnGreen;
-      break;
-  }
-}
-
-onMounted(() => { });
-
-onUnmounted(() => { });
-</script>
-<style lang="less" scoped>
-@import '/@/design/theme.less';
-
-@font-face {
-  font-family: 'douyuFont';
-  src: url('/@/assets/font/douyuFont.otf');
-}
-
-@{theme-deepblue} {
-  .company-home {
-    --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
-  }
-}
-
-.company-home {
-  --image-modal-top: url('/@/assets/images/vent/home/modal-top.png');
-  --image-monitor-realtime: url('/@/assets/images/company/monitor-realtime.png');
-  --image-monitor-doc: url('/@/assets/images/company/monitor-doc.png');
-  --image-monitor-goto: url('/@/assets/images/company/monitor-goto.png');
-
-  width: 100%;
-  // height: calc(100% - 52px);
-  height: 100%;
-  color: @white;
-  position: relative;
-  background: #181b24;
-
-  .top-bg {
-    width: 100%;
-    height: 96px;
-    // background: var(--image-modal-top) no-repeat center;
-    position: absolute;
-    z-index: 1;
-  }
-
-  .main-container {
-    position: absolute;
-    top: 96px;
-    width: calc(100% - 30px);
-    height: calc(100% - 96px);
-    margin: 0px 15px;
-    box-sizing: border-box;
-  }
-}
-
-:deep(.loading-box) {
-  position: unset;
-}
-</style>