注气详情界面-提交

src/design/vent/antCss.less

@@ -143,23 +143,32 @@ tr.@{ventSpace}-table-expanded-row:hover > td {
 
 /* modal 组件 */
 .@{ventSpace}-modal-content {
-  color: @vent-font-color !important;
-  background-color: @vent-modal-bg !important;
-  border: 1px solid @vent-modal-border !important;
-  box-shadow: 0px 0px 10px @vent-modal-box-shadow inset !important;
-  backdrop-filter: blur(10px);
+  // color: @vent-font-color !important;
+  // background-color: @vent-modal-bg !important;
+  // border: 1px solid @vent-modal-border !important;
+  // box-shadow: 0px 0px 10px @vent-modal-box-shadow inset !important;
+  // backdrop-filter: blur(10px);
+  height: 700px;
+  background-color: transparent !important;
+background: url('@/assets/images/gasInjection/9-1.png') no-repeat;
+background-size: 100% 100%;
 }
 .@{ventSpace}-modal-header {
-  color: @vent-font-color !important;
+  // color: @vent-font-color !important;
   background-color: transparent !important;
-  box-shadow: 0px 0px 0px @vent-modal-box-shadow inset !important;
-  border-color: #ffffff22 !important;
-  backdrop-filter: blur(10px);
+  // box-shadow: 0px 0px 0px @vent-modal-box-shadow inset !important;
+  // border-color: #ffffff22 !important;
+  // backdrop-filter: blur(10px);
+  background: url('@/assets/images/gasInjection/9-2.png') no-repeat bottom !important;
+  border-bottom:0px !important; 
   .jeecg-basic-title {
     color: @vent-font-color !important;
   }
   .@{ventSpace}-modal-title {
-    color: @vent-modal-title !important;
+    // color: @vent-modal-title !important;
+    color: #fff;
+    text-align: center;
+    font-size: 18px;
   }
 }
 .@{ventSpace}-modal-body {
@@ -197,7 +206,23 @@ tr.@{ventSpace}-table-expanded-row:hover > td {
   }
 }
 .@{ventSpace}-modal-close {
-  color: #ffffff !important;
+  // color: #ffffff !important;
+  position: absolute;
+  top: -26px !important;
+    right: -22px !important;
+  color: #2b9fce !important;
+  
+}
+.@{ventSpace}-modal-close-x{
+  display: inline-block;
+    width: 44px !important;
+    height: 44px !important;
+    line-height: 39px !important;
+    background-color: #00000b;
+    border-radius: 50%;
+    border: 3px solid #2b9fce;
+    font-size: 24px !important;
+    font-weight: 700 !important;
 }
 .@{ventSpace}-modal-footer {
   border-color: #ffffff22 !important;

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

@@ -1,74 +1,82 @@
 <template>
   <!-- 注气驱替 -->
-  <component
-    :is="getModuleComponent(showStyle)"
-    :style="style"
-    :title="moduleName"
-    :visible="visible"
-    :visibleDetail="visibleDetail"
-    :class="{ 'cursor-pointer': !!moduleData.to }"
-    @close="$emit('close')"
-    @click="redirectTo"
-  >
+  <component :is="getModuleComponent(showStyle)" :style="style" :title="moduleName" :visible="visible"
+    :visibleDetail="visibleDetail" :class="{ 'cursor-pointer': !!moduleData.to }" @close="$emit('close')"
+    @click="redirectTo" @handleClickDetail="handleClickDetail">
     <slot>
       <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event" />
-      <Content :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }" :moduleData="moduleData" :data="selectedData" />
+      <Content :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }" :moduleData="moduleData"
+        :data="selectedData" />
+      <DetailInfo v-if="showDetail" :deviceType="deviceType" @closeModal="closeModal"></DetailInfo>
     </slot>
   </component>
 </template>
 <script lang="ts" setup>
-  import Header from './header.vue';
-  import Content from './content.vue';
-  import ModuleLeft from './gasInject/moduleLeft.vue';
-  import ModuleRight from './gasInject/moduleRight.vue';
-  import ModuleBottom from './gasInject/moduleBottom.vue';
-  import { computed, ref } from 'vue';
-  import { openWindow } from '/@/utils';
-  import { getFormattedText } from '../hooks/helper';
-  // import { ModuleProps } from '../types';
+import Header from './header.vue';
+import Content from './content.vue';
+import ModuleLeft from './gasInject/moduleLeft.vue';
+import ModuleRight from './gasInject/moduleRight.vue';
+import ModuleBottom from './gasInject/moduleBottom.vue';
+import DetailInfo from './gasInject/DetailInfo.vue'
+import { computed, ref } from 'vue';
+import { openWindow } from '/@/utils';
+import { getFormattedText } from '../hooks/helper';
+// import { ModuleProps } from '../types';
 
-  const props = defineProps<{
-    /** 配置的详细模块信息 */
-    moduleData: any;
-    /** 配置的详细样式信息 */
-    showStyle: any;
-    /** 该模块配置中的设备标识符 */
-    deviceType: string;
-    /** api返回的数据 */
-    data: any;
-    moduleName: string;
-    visible: boolean;
-    visibleDetail:boolean
-  }>();
-  defineEmits(['close', 'click']);
+const props = defineProps<{
+  /** 配置的详细模块信息 */
+  moduleData: any;
+  /** 配置的详细样式信息 */
+  showStyle: any;
+  /** 该模块配置中的设备标识符 */
+  deviceType: string;
+  /** api返回的数据 */
+  data: any;
+  moduleName: string;
+  visible: boolean;
+  visibleDetail: boolean
+}>();
+defineEmits(['close', 'click']);
 
-  const { header } = props.moduleData;
-  const selectedData = ref();
+const { header } = props.moduleData;
+const selectedData = ref();
+//是否显示详情信息
+const showDetail = ref(false)
 
-  const style = computed(() => {
-    const size = props.showStyle.size;
-    const position = props.showStyle.position;
-    return size + position;
-  });
+const style = computed(() => {
+  const size = props.showStyle.size;
+  const position = props.showStyle.position;
+  return size + position;
+});
 
-  // 根据配置里的定位判断应该使用哪个module组件
-  function getModuleComponent({ size, position }) {
-    const [_, width] = size.match(/width:([0-9]+)px/) || [];
-    if (position.includes('bottom') || parseInt(width) > 800) {
-      return ModuleBottom;
-    }
-    if (position.includes('left')) {
-      return ModuleLeft;
-    }
-    if (position.includes('right')) {
-      return ModuleRight;
-    }
+// 根据配置里的定位判断应该使用哪个module组件
+function getModuleComponent({ size, position }) {
+  const [_, width] = size.match(/width:([0-9]+)px/) || [];
+  if (position.includes('bottom') || parseInt(width) > 800) {
     return ModuleBottom;
   }
-
-  function redirectTo() {
-    const { to } = props.moduleData;
-    if (!to) return;
-    openWindow(getFormattedText(selectedData.value, to));
+  if (position.includes('left')) {
+    return ModuleLeft;
+  }
+  if (position.includes('right')) {
+    return ModuleRight;
   }
+  return ModuleBottom;
+}
+
+function redirectTo() {
+  const { to } = props.moduleData;
+  if (!to) return;
+  openWindow(getFormattedText(selectedData.value, to));
+}
+
+//详情点击
+function handleClickDetail() {
+  console.log('111')
+  showDetail.value = true
+}
+//关闭弹窗
+function closeModal(param) {
+  showDetail.value = param
+}
 </script>

src/views/vent/home/configurable/components/gasInject/DetailInfo.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="detail-info">
+    <a-modal v-model:visible="visibleDetail" width="1350px" :footer="null" :title="detailTitle" centered destroyOnClose
+      @cancel="handleCancel">
+      <template v-if="deviceType == 'cc_gas'">
+        <curveEchartDetail></curveEchartDetail>
+      </template>
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import curveEchartDetail from '../gasInject/curveEchartDetail.vue'
+
+let props = defineProps({
+  deviceType: {
+    type: String
+  }
+})
+let visibleDetail = ref(true)
+let detailTitle = ref('抽采参数时程曲线')
+let $emit = defineEmits(['closeModal'])
+
+//关闭弹窗
+function handleCancel() {
+  visibleDetail.value = false
+  $emit('closeModal', visibleDetail.value)
+}
+
+
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .detail-info {
+    --image-modal-gas_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/9-1.png');
+  }
+}
+
+.detail-info {
+  --image-modal-gas_bg: url('@/assets/images/gasInjection/9-1.png');
+}
+:deep(.zxm-modal-content){
+    border: none !important;
+    box-shadow: none !important;
+    background-color: transparent !important;
+    background-image: var(--image-confirm-modal) !important;
+    background-size: 100% auto;
+    background-repeat: no-repeat;
+  }
+</style>

src/views/vent/home/configurable/components/gasInject/curveEchartDetail.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="curve-detail">
+<h1>111</h1>
+<h2>222</h2>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+</script>
+
+<style lang="less" scoped>
+.curve-detail{
+  width: 100%;
+  height: 300px;
+}
+</style>

src/views/vent/home/configurable/components/gasInject/moduleLeft.vue

@@ -6,7 +6,7 @@
           <span class="action-btn close-btn" @click="closeModel"></span>
           <span @click="clickHandler">{{ title }}</span>
         </div>
-        <span v-if="visibleDetail" class="detail-text">详情</span>
+        <span v-if="visibleDetail" class="detail-text" @click="handleClickDetail">详情</span>
       </div>
       <div class="module-slot">
         <slot></slot>
@@ -15,8 +15,8 @@
   </Transition>
 </template>
 <script lang="ts" setup>
-defineProps<{ title: string; visible: boolean,visibleDetail:boolean }>();
-const emit = defineEmits(['close', 'click']);
+defineProps<{ title: string; visible: boolean, visibleDetail: boolean }>();
+const emit = defineEmits(['close', 'click', 'handleClickDetail']);
 
 function closeModel() {
   emit('close');
@@ -24,6 +24,10 @@ function closeModel() {
 function clickHandler() {
   emit('click');
 }
+//详情点击
+function handleClickDetail() {
+  emit('handleClickDetail')
+}
 </script>
 <style lang="less" scoped>
 @import '/@/design/theme.less';
@@ -72,9 +76,12 @@ function clickHandler() {
   background-size: 100% 100%;
   // margin-left: 10px;
 }
-.detail-text{
-    color: #2cb6ff;
-  }
+
+.detail-text {
+  color: #2cb6ff;
+  cursor: pointer;
+}
+
 // Transition动画相关
 .v-enter-active,
 .v-leave-active {

src/views/vent/home/configurable/components/preset/gasInjectCard.vue

@@ -2,6 +2,11 @@
   <div class="gas-inject-card">
     <div class="inject-card-item" v-for="(item, index) in listData" :key="index">
       <div class="pie-bg"></div>
+      <div class="icon-bg"></div>
+      <div class="card-item-content">
+        <div class="content-label">{{ item.label }}</div>
+        <div class="content-value">{{ item.value }}</div>
+      </div>
     </div>
   </div>
 </template>
@@ -10,9 +15,9 @@
 import { ref } from 'vue'
 
 let listData = ref([
-  { id: 1 },
-  { id: 2 },
-  { id: 3 }
+  { label:'抽采单元-1',value:'xx'  },
+  { label:'抽采单元-2',value:'xx' },
+  { label:'抽采单元-3',value:'xx' }
 ])
 </script>
 
@@ -43,19 +48,41 @@ let listData = ref([
   .inject-card-item {
     position: relative;
     width: 379px;
-    height: 90px;
+    height: 94px;
     margin: 10px auto;
     background: var(--image-inject_card_bg) no-repeat;
     background-size: 100% 100%;
   }
   .pie-bg{
     position: absolute;
-    top: 0;
-    right: 0;
-    width: 73px;
-    height: 73px;
+    top: -9px;
+    right: -5px;
+    width: 78px;
+    height: 78px;
     background: var(--image-inject_card_bg1) no-repeat;
     background-size: 100% 100%;
   }
+  .icon-bg{
+    position: absolute;
+    left: 20px;
+    top: -4px;
+    width: 77px;
+    height: 79px;
+    background: var(--image-inject_card_bg2) no-repeat;
+    background-size: 100% 100%;
+  }
+  .card-item-content{
+    position: absolute;
+    left: 144px;
+    top: 50%;
+    transform: translate(0,-50%);
+  }
+  .content-label{
+    margin-bottom: 10px;
+  }
+  .content-value{
+     font-family: 'douyuFont';
+    color: #91faff;
+  }
 }
 </style>

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

@@ -81,6 +81,7 @@ export const testConfigGasInject: Config[] = [
     deviceType: 'cc_gas',
     moduleName: '抽采支管瓦斯浓度',
     pageType: 'gas_injection',
+    showDetail:true,
     moduleData: {
       header: {
         show: false,
@@ -836,12 +837,128 @@ export const testConfigGasInjectCc: Config[] = [
       position: 'top:10px;left:10px;',
     },
   },
- 
+  {
+    deviceType: 'cc-detail',
+    moduleName: '各抽采单元详情',
+    pageType: 'gas_injection',
+    showDetail: true,
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '${strinstallpos}',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'gas_inject_card',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [
+        {
+          readFrom: '',
+          option: [
 
+          ]
+        }
+      ],
+    },
+    showStyle: {
+      size: 'width:440px;height:380px;',
+      version: '注气',
+      position: 'top:460px;left:10px;',
+    },
+  },
+  {
+    deviceType: 'zq_param-line',
+    moduleName: '注气压力/流量',
+    pageType: 'gas_injection',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '${strinstallpos}',
+        },
+        slot: {
+          show: false,
+          value: '',
+          trans: {},
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'chart',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      list: [],
+      chart: [
+        {
+          type: 'line_area',
+          readFrom: '',
+          legend: { show: false },
+          xAxis: [{ show: true }],
+          yAxis: [{ show: true, name: '浓度', position: 'left' }],
+          series: [
+            {
+              label: '${strinstallpos}',
+              readFrom: 'historyList',
+              xprop: 'time',
+              yprop: 'dustval',
+            },
+          ],
+        },
+      ],
+      table: [],
+      gallery: [],
+      complex_list: [],
+      gallery_list: [],
+      preset: [],
+      to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=fanmain',
+    },
+    showStyle: {
+      size: 'width:calc(100% - 450px);height:260px;',
+      version: '注气',
+      position: 'bottom:22px;left:460px;',
+    },
+  },
 ];
 //注气驱替-试验
 export const testConfigGasInjectSy: Config[] = [
- {
+  {
     deviceType: 'cc-detail',
     moduleName: '抽采单元详情',
     pageType: 'gas_injection',
@@ -1717,56 +1834,56 @@ export const testConfigVent: Config[] = [
     },
   },
   // {
-  //   deviceType: '',
-  //   moduleName: '通风设施远程控制',
-  //   pageType: 'vent',
-  //   moduleData: {
-  //     header: {
-  //       show: false,
-  //       readFrom: '',
-  //       selector: {
-  //         show: false,
-  //         value: '',
-  //       },
-  //       slot: {
-  //         show: false,
-  //         value: '',
-  //       },
-  //     },
-  //     background: {
-  //       // show: true,
-  //       show: false,
-  //       type: 'video',
-  //       link: '/video/gate.mp4',
-  //     },
-  //     layout: {
-  //       direction: 'row',
-  //       items: [
-  //         {
-  //           name: 'device_alarm',
-  //           basis: '100%',
-  //         },
-  //       ],
-  //     },
-  //     board: [],
-  //     list: [],
-  //     chart: [],
-  //     table: [],
-  //     gallery: [],
-  //     complex_list: [],
-  //     gallery_list: [],
-  //     preset: [
-  //       {
-  //         readFrom: 'device',
-  //       },
-  //     ],
-  //     to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=gate_xinJianFuXieJin',
-  //   },
-  //   showStyle: {
-  //     size: 'width:390px;height:260px;',
-  //     version: '原版',
-  //     position: 'top:555px;left:15px;',
-  //   },
+  // deviceType: '',
+  // moduleName: '通风设施远程控制',
+  // pageType: 'vent',
+  // moduleData: {
+  // header: {
+  // show: false,
+  // readFrom: '',
+  // selector: {
+  // show: false,
+  // value: '',
+  // },
+  // slot: {
+  // show: false,
+  // value: '',
+  // },
+  // },
+  // background: {
+  // // show: true,
+  // show: false,
+  // type: 'video',
+  // link: '/video/gate.mp4',
+  // },
+  // layout: {
+  // direction: 'row',
+  // items: [
+  // {
+  // name: 'device_alarm',
+  // basis: '100%',
+  // },
+  // ],
+  // },
+  // board: [],
+  // list: [],
+  // chart: [],
+  // table: [],
+  // gallery: [],
+  // complex_list: [],
+  // gallery_list: [],
+  // preset: [
+  // {
+  // readFrom: 'device',
+  // },
+  // ],
+  // to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=gate_xinJianFuXieJin',
+  // },
+  // showStyle: {
+  // size: 'width:390px;height:260px;',
+  // version: '原版',
+  // position: 'top:555px;left:15px;',
+  // },
   // },
   {
     deviceType: 'warn',
@@ -3130,35 +3247,35 @@ export const testConfigFire: Config[] = [
       board: [],
       chart: [],
       // chart: [
-      //   {
-      //     type: 'line_bar',
-      //     readFrom: 'dsArray',
-      //     xAxis: [
-      //       {
-      //         label: 'null',
-      //       },
-      //     ],
-      //     yAxis: [
-      //       {
-      //         label: 'A',
-      //         align: 'left',
-      //       },
-      //       {
-      //         label: 'A',
-      //         align: 'left',
-      //       },
-      //     ],
-      //     series: [
-      //       {
-      //         label: 'A',
-      //         prop: 'top',
-      //       },
-      //       {
-      //         label: 'B',
-      //         prop: 'bot',
-      //       },
-      //     ],
-      //   },
+      // {
+      // type: 'line_bar',
+      // readFrom: 'dsArray',
+      // xAxis: [
+      // {
+      // label: 'null',
+      // },
+      // ],
+      // yAxis: [
+      // {
+      // label: 'A',
+      // align: 'left',
+      // },
+      // {
+      // label: 'A',
+      // align: 'left',
+      // },
+      // ],
+      // series: [
+      // {
+      // label: 'A',
+      // prop: 'top',
+      // },
+      // {
+      // label: 'B',
+      // prop: 'bot',
+      // },
+      // ],
+      // },
       // ],
       gallery: [],
       gallery_list: [
@@ -3243,28 +3360,28 @@ export const testConfigFire: Config[] = [
               info: '',
             },
             // {
-            //   label: '乙烯',
-            //   value: '${c2h4Val}',
-            //   color: 'blue',
-            //   info: '',
+            // label: '乙烯',
+            // value: '${c2h4Val}',
+            // color: 'blue',
+            // info: '',
             // },
             // {
-            //   label: '甲烷',
-            //   value: '${ch4Val}',
-            //   color: 'blue',
-            //   info: '',
+            // label: '甲烷',
+            // value: '${ch4Val}',
+            // color: 'blue',
+            // info: '',
             // },
             // {
-            //   label: '乙炔',
-            //   value: '${c2h2Val}',
-            //   color: 'blue',
-            //   info: '',
+            // label: '乙炔',
+            // value: '${c2h2Val}',
+            // color: 'blue',
+            // info: '',
             // },
             // {
-            //   label: '压差',
-            //   value: '${dpVal}',
-            //   color: 'blue',
-            //   info: '',
+            // label: '压差',
+            // value: '${dpVal}',
+            // color: 'blue',
+            // info: '',
             // },
           ],
         },
@@ -3336,8 +3453,8 @@ export const testConfigFire: Config[] = [
               prop: 'warnLevel',
             },
             // {
-            //   name: '时间',
-            //   prop: 'time',
+            // name: '时间',
+            // prop: 'time',
             // },
           ],
         },
@@ -4204,8 +4321,8 @@ export const testConfigVentRealtime: Config[] = [
               value: '${hui}',
             },
             // {
-            //   label: '需风量(m³/min)',
-            //   value: '${xufengliang}',
+            // label: '需风量(m³/min)',
+            // value: '${xufengliang}',
             // },
           ],
         },
@@ -4930,8 +5047,8 @@ export const testConfigVentNew: Config[] = [
               label: '风压(Pa)',
               value: '${DataPa}',
               // trans: {
-              //   '1': '${Fan1FreqHz}',
-              //   '0': '${Fan1FreqHz}',
+              // '1': '${Fan1FreqHz}',
+              // '0': '${Fan1FreqHz}',
               // },
             },
             {
@@ -5220,8 +5337,8 @@ export const testConfigVentNew: Config[] = [
         direction: 'column',
         items: [
           // {
-          //   name: 'board',
-          //   basis: '25%',
+          // name: 'board',
+          // basis: '25%',
           // },
           {
             name: 'chart',
@@ -5372,8 +5489,8 @@ export const testConfigVentNew: Config[] = [
             basis: '100%',
           },
           // {
-          //   name: 'board',
-          //   basis: '25%',
+          // name: 'board',
+          // basis: '25%',
           // },
         ],
       },
@@ -6595,8 +6712,8 @@ export const testConfigBDFire: Config[] = [
               prop: 'warnLevel',
             },
             // {
-            //   name: '时间',
-            //   prop: 'time',
+            // name: '时间',
+            // prop: 'time',
             // },
           ],
         },

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

@@ -1,6 +1,6 @@
 <template>
   <div class="company-home">
-    <div v-if="menuName !== 'syq'" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
+    <div v-if="menuName !== 'syq'" :class="menuName == 'zjm' ?  'vent-modal' : 'vent-modal-1'">
       <!-- <VentModal /> -->
     </div>
     <div v-if="menuName === 'syq'" class="syq-modal">
@@ -26,7 +26,7 @@
           :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
           :visible="true" :visible-detail="cfg.showDetail" />
       </template>
-      
+
     </div>
   </div>
 </template>
@@ -39,22 +39,13 @@ import navMenu from './components/gasInject/navMenu.vue'
 import VentModal from '/@/components/vent/micro/ventModal.vue';
 import { getHomeData } from './configurable.api';
 // import { useRoute } from 'vue-router';
-import { testConfigGasInject, testConfigGasInjectZq,testConfigGasInjectCc,testConfigGasInjectSy } from './configurable.data';
+import { testConfigGasInject, testConfigGasInjectZq, testConfigGasInjectCc, testConfigGasInjectSy } from './configurable.data';
 const { configs, fetchConfigs } = useInitConfigs();
 const { mainTitle, data, updateData } = useInitPage('注气驱替智能管控系统');
 // const route = useRoute();
 let interval: number | undefined;
 let menuName = ref('zjm')
 
-// const menuPageTypeMap = {
-//     zjm: 'gas_injection', // 对应主界面
-//     syq: 'gas_injection_syq', // 对应试验区
-// };
-// // 计算属性：筛选当前 menuName 对应的模块
-// const filteredConfigs = computed(() => {
-//   const targetPageType = menuPageTypeMap[menuName.value] || 'gas_injection';
-//   return configs.value.filter(item => item.pageType === targetPageType);
-// });
 //选项切换
 function toggleMenu(param) {
   menuName.value = param
@@ -63,13 +54,13 @@ function toggleMenu(param) {
       configs.value = testConfigGasInject;
       break;
     case 'syq':
-       configs.value = testConfigGasInjectSy;
+      configs.value = testConfigGasInjectSy;
       break;
     case 'zqxt':
       configs.value = testConfigGasInjectZq;
       break;
     case 'ccxt':
-       configs.value = testConfigGasInjectCc
+      configs.value = testConfigGasInjectCc
       break;
   }
 }
@@ -203,6 +194,7 @@ onUnmounted(() => {
 :deep(.loading-box) {
   position: unset;
 }
+
 // 试验区模型区域样式
 .syq-modal {
   position: absolute;
@@ -214,4 +206,23 @@ onUnmounted(() => {
   background-size: 100% 100%;
 }
 
+.vent-modal {
+  position: absolute;
+  top: 134px;
+  left: 50%;
+  transform: translate(-50%, 0px);
+  width: calc(100% - 920px);
+  height: 505px;
+  background: url(/src/assets/images/gasInjection/syq/modal-bg.png) no-repeat;
+  background-size: 100% 100%;
+}
+.vent-modal-1 {
+  position: absolute;
+  top: 134px;
+  left: 460px;
+  width: calc(100% - 470px);
+  height: 505px;
+  background: url(/src/assets/images/gasInjection/syq/modal-bg.png) no-repeat;
+  background-size: 100% 100%;
+}
 </style>