Merge branch 'master' of http://39.97.59.228:8013/lxh/gas-injection

src/assets/images/gasInjection/syq/7-CH4.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40.935" height="26.291" viewBox="0 0 40.935 26.291">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#fff"/>
+      <stop offset="1" stop-color="#ffd5ab"/>
+    </linearGradient>
+  </defs>
+  <g id="甲烷浓度" transform="translate(-803.875 -420.516)">
+    <g id="组_16566" data-name="组 16566" transform="translate(804.375 421.016)" style="isolation: isolate">
+      <path id="路径_57850" data-name="路径 57850" d="M807.4,444.781a6.122,6.122,0,0,1-2.211-2.2,5.807,5.807,0,0,1-.817-3.013v-12.53a5.811,5.811,0,0,1,.817-3.014,6.122,6.122,0,0,1,2.211-2.2,5.881,5.881,0,0,1,3.027-.816h2a5.883,5.883,0,0,1,3.027.816,6.012,6.012,0,0,1,2.2,2.2,5.89,5.89,0,0,1,.8,3.014v.76h-2.76v-.76a3.268,3.268,0,0,0-3.266-3.267h-2a3.135,3.135,0,0,0-2.323.957,3.172,3.172,0,0,0-.943,2.31v12.53a3.169,3.169,0,0,0,.943,2.309,3.131,3.131,0,0,0,2.323.958h2a3.269,3.269,0,0,0,3.266-3.267v-.76h2.76v.76a5.886,5.886,0,0,1-.8,3.013,6.012,6.012,0,0,1-2.2,2.2,5.884,5.884,0,0,1-3.027.817h-2A5.882,5.882,0,0,1,807.4,444.781Z" transform="translate(-804.375 -421.016)" stroke="rgba(0,0,0,0)" stroke-width="1" fill="url(#linear-gradient)"/>
+      <path id="路径_57851" data-name="路径 57851" d="M831.6,421.016h2.788v10.531h8.531V421.016h2.76V445.6h-2.76V434.306h-8.531V445.6H831.6Z" transform="translate(-816.432 -421.016)" stroke="rgba(0,0,0,0)" stroke-width="1" fill="url(#linear-gradient)"/>
+    </g>
+    <g id="组_16567" data-name="组 16567" transform="translate(834.3 434.62)" style="isolation: isolate">
+      <path id="路径_57852" data-name="路径 57852" d="M878.179,452.023h-1.512v2.42h-2.928v-2.42H868.17v-1.939a29.755,29.755,0,0,0,2.7-3.4,29.347,29.347,0,0,0,2.248-3.925h3.547v7.136h1.512Zm-4.441-2.131v-4.359q-.3.647-.674,1.286t-.77,1.21q-.4.57-.8,1.051a8.349,8.349,0,0,1-.756.812Z" transform="translate(-868.17 -442.756)" stroke="rgba(0,0,0,0)" stroke-width="1" fill="url(#linear-gradient)"/>
+    </g>
+  </g>
+</svg>

src/assets/images/gasInjection/syq/7-O2.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="31.934" height="33.379" viewBox="0 0 31.934 33.379">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#fff"/>
+      <stop offset="1" stop-color="#abf9ff"/>
+    </linearGradient>
+  </defs>
+  <g id="氧气浓度" transform="translate(-922.945 -514.519)">
+    <g id="组_16564" data-name="组 16564" transform="translate(923.445 515.019)" style="isolation: isolate">
+      <path id="路径_57848" data-name="路径 57848" d="M927.93,546.17a8.93,8.93,0,0,1-3.28-3.261,8.686,8.686,0,0,1-1.205-4.466V523.951a8.686,8.686,0,0,1,1.205-4.466,8.93,8.93,0,0,1,3.28-3.261,8.782,8.782,0,0,1,4.485-1.2h1.3a8.684,8.684,0,0,1,4.466,1.2,8.987,8.987,0,0,1,3.262,3.261,8.686,8.686,0,0,1,1.2,4.466v14.491a8.685,8.685,0,0,1-1.2,4.466,8.987,8.987,0,0,1-3.262,3.261,8.692,8.692,0,0,1-4.466,1.2h-1.3A8.79,8.79,0,0,1,927.93,546.17Zm-.092-5.1a5.482,5.482,0,0,0,1.927,1.946,5.053,5.053,0,0,0,2.65.723h1.3a5.057,5.057,0,0,0,2.65-.723,5.48,5.48,0,0,0,1.927-1.946,5.082,5.082,0,0,0,.722-2.632V523.951a5.089,5.089,0,0,0-.722-2.632,5.484,5.484,0,0,0-1.927-1.945,5.058,5.058,0,0,0-2.65-.723h-1.3a5.053,5.053,0,0,0-2.65.723,5.486,5.486,0,0,0-1.927,1.945,5.09,5.09,0,0,0-.723,2.632v14.491A5.084,5.084,0,0,0,927.837,541.073Z" transform="translate(-923.445 -515.019)" stroke="rgba(0,0,0,0)" stroke-width="1" fill="url(#linear-gradient)"/>
+    </g>
+    <g id="组_16565" data-name="组 16565" transform="translate(943.449 531.654)" style="isolation: isolate">
+      <path id="路径_57849" data-name="路径 57849" d="M969.7,552.064h-10.93v-1.52a5.033,5.033,0,0,1,.488-2.281,6.938,6.938,0,0,1,1.212-1.728,12.308,12.308,0,0,1,1.574-1.375q.851-.624,1.575-1.23a7.437,7.437,0,0,0,1.212-1.267,2.507,2.507,0,0,0,.489-1.529,1.406,1.406,0,0,0-.507-1.166,2.127,2.127,0,0,0-1.375-.408,4.771,4.771,0,0,0-.96.108,6.659,6.659,0,0,0-1.04.308,7.413,7.413,0,0,0-.995.47,3.842,3.842,0,0,0-.824.615v-3.51a6.972,6.972,0,0,1,2.207-.969,10.167,10.167,0,0,1,2.317-.262,7.17,7.17,0,0,1,2.1.3,4.8,4.8,0,0,1,1.692.9,4.306,4.306,0,0,1,1.132,1.466,4.6,4.6,0,0,1,.416,2.008,4.167,4.167,0,0,1-.461,1.918,8.526,8.526,0,0,1-1.15,1.7,13.128,13.128,0,0,1-1.483,1.466q-.8.67-1.484,1.193c-.459.351-.842.651-1.15.906s-.46.452-.46.6v.072H969.7Z" transform="translate(-958.769 -536.32)" stroke="rgba(0,0,0,0)" stroke-width="1" fill="url(#linear-gradient)"/>
+    </g>
+  </g>
+</svg>

src/assets/images/gasInjection/syq/7-tem.svg

@@ -0,0 +1,9 @@
+<svg id="试验区温度" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21.385" height="36.621" viewBox="0 0 21.385 36.621">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" y1="1" x2="0.5" y2="0.083" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#abdcff"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_55369" data-name="路径 55369" d="M224.93,22.543V12.72a1.085,1.085,0,0,0-1.084-1.084h-.086a1.051,1.051,0,0,0-1.051,1.051v9.855a3.815,3.815,0,0,0-2.8,3.637,3.912,3.912,0,1,0,5.021-3.637Zm5.754-4.352a.989.989,0,0,1-.386-.751V6.333a6.481,6.481,0,0,0-12.959,0V17.125a1.544,1.544,0,0,1-.526,1.184,10.3,10.3,0,0,0-3.683,7.874,10.7,10.7,0,0,0,21.384,0A10.3,10.3,0,0,0,230.684,18.191Zm-6.866,15.116a7.234,7.234,0,0,1-7.324-7.127,7.06,7.06,0,0,1,3.422-6.022l.519-.318a.575.575,0,0,0,.272-.486V6.333a3.116,3.116,0,0,1,6.229,0v13.02a.575.575,0,0,0,.272.486l.519.318a7.052,7.052,0,0,1,3.419,6.022,7.241,7.241,0,0,1-7.327,7.127Z" transform="translate(-213.129 0)" fill="url(#linear-gradient)"/>
+</svg>

src/views/vent/deviceManager/configurationTable/types.ts

@@ -180,7 +180,8 @@ export interface ModuleDataBoard extends ReadFrom {
     | 'R'
     | 'S'
     | 'T'
-    | 'U';
+    | 'U'
+    | 'inject-syq';
   /** 展示牌布局，决定是 label 部分在上方或是 value 在上方 */
   layout: 'val-top' | 'label-top' | 'new-top' | 'new1-top' | 'new2-top' | 'new3-top';
   /** 核心配置，每个展示牌对应一项 */
@@ -212,7 +213,8 @@ export interface ModuleDataList extends ReadFrom {
     | 'Q'
     | 'R'
     | 'S'
-    | 'T';
+    | 'T'
+    | 'inject-syq-list';
   /** 是否需要根据数据来决定所展示的项目数量，需要确保 items 至少有一项，且 readFrom 指向数组 */
   mapFromData?: boolean;
   /** 核心配置，每个列表项对应一项 */
@@ -275,7 +277,8 @@ export interface ModuleDataChart extends ReadFrom {
     | 'pie_halo'
     | 'line_enhance'
     | 'pie_drag'
-    | 'scatter';
+    | 'scatter'
+    | 'inject-syq-chart';
   /** 排序依据，该项应配置将配合 readFrom 使用 */
   sortBy?: string;
   /** 排序规则，desc降序，asc升序 */

src/views/vent/home/configurable/components/detail/CustomChart.vue

@@ -1113,6 +1113,148 @@
         }, []),
       };
     }
+    if (type === 'inject-syq-chart') {
+      // 通用渐变配色库（可扩展，按索引循环分配，不绑定固定名称）
+      const universalGradients = [
+        {
+          line: '#74d8f0', // 浅蓝系
+          area: new graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(116, 216, 240, 0.8)' },
+            { offset: 0.5, color: 'rgba(116, 216, 240, 0.4)' },
+            { offset: 1, color: 'rgba(116, 216, 240, 0.05)' },
+          ]),
+        },
+        {
+          line: '#d4e05c', // 黄绿系
+          area: new graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(212, 224, 92, 0.8)' },
+            { offset: 0.5, color: 'rgba(212, 224, 92, 0.4)' },
+            { offset: 1, color: 'rgba(212, 224, 92, 0.05)' },
+          ]),
+        },
+        {
+          line: '#4cd2a7', // 青绿系
+          area: new graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(76, 210, 167, 0.8)' },
+            { offset: 0.5, color: 'rgba(76, 210, 167, 0.4)' },
+            { offset: 1, color: 'rgba(76, 210, 167, 0.05)' },
+          ]),
+        },
+        {
+          line: '#91CC75', // 浅绿系（扩展备用）
+          area: new graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(145, 204, 117, 0.8)' },
+            { offset: 0.5, color: 'rgba(145, 204, 117, 0.4)' },
+            { offset: 1, color: 'rgba(145, 204, 117, 0.05)' },
+          ]),
+        },
+      ];
+
+      return {
+        backgroundColor: 'rgba(0, 15, 30, 0.95)',
+        textStyle,
+        // 通用图例配置（自动匹配系列颜色，无硬编码名称）
+        legend: {
+          show: legend.show ?? true,
+          top: 10,
+          right: 20,
+          textStyle: { color: '#fff', fontSize: 12 },
+          itemWidth: 10, // 图例圆点宽度
+          itemHeight: 10, // 图例圆点高度（圆形）
+          itemGap: 20, // 图例项间距
+          icon: 'circle', // 强制圆点样式（匹配设计图）
+          // 自动读取系列名称，无需硬编码
+          data: baseSeries.map(item => item.name),
+        },
+        grid: {
+          left: 40,
+          top: 40,
+          right: 20,
+          bottom: 40,
+          ...grid,
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'line',
+            lineStyle: { color: '#fff', width: 1, type: 'solid' },
+          },
+          backgroundColor: 'rgba(0, 20, 40, 0.9)',
+          textStyle: { color: '#fff' },
+          borderColor: '#00a8ff',
+          borderWidth: 1,
+        },
+        xAxis: xAxis.map((e) => ({
+          ...e,
+          type: 'category',
+          axisLine: { lineStyle: { color: '#6688aa' } },
+          axisTick: { lineStyle: { color: '#6688aa' } },
+          axisLabel: {
+            color: '#fff',
+            fontSize: 11,
+            width: 80,
+            overflow: 'truncate',
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: 'rgba(102, 160, 180, 0.2)',
+              width: 0.8,
+              type: 'dashed',
+            },
+          },
+        })),
+        yAxis: yAxis.map((e) => ({
+          ...e,
+          type: 'value',
+          axisLine: { lineStyle: { color: '#6688aa' } },
+          axisTick: { lineStyle: { color: '#6688aa' } },
+          axisLabel: { color: '#fff', fontSize: 11 },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: 'rgba(102, 160, 180, 0.2)',
+              width: 0.8,
+              type: 'dashed',
+            },
+          },
+          min: (value: any) => Math.floor(value.min * 0.9),
+          max: (value: any) => Math.ceil(value.max * 1.1),
+        })),
+        // 系列配置：通用化，按索引分配配色，优先使用配置里的color
+        series: baseSeries.map((serie, index) => {
+          // 优先使用chartConfig里配置的color，无则用通用配色（按索引循环）
+          const colorConfig = serie.color 
+            ? {
+                line: serie.color,
+                area: new graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: `${serie.color}80` },
+                  { offset: 0.5, color: `${serie.color}40` },
+                  { offset: 1, color: `${serie.color}05` },
+                ]),
+              }
+            : universalGradients[index % universalGradients.length];
+
+          return {
+            ...serie,
+            type: 'line',
+            smooth: true, // 平滑曲线
+            symbol: 'none', // 隐藏数据点
+            lineStyle: {
+              color: colorConfig.line,
+              width: 2,
+            },
+            areaStyle: {
+              color: colorConfig.area,
+            },
+            // 强制图例标记和系列颜色一致（核心：解决错位问题）
+            itemStyle: {
+              color: colorConfig.line,
+            },
+          };
+        }),
+      };
+    }
 
     return {};
   };

src/views/vent/home/configurable/components/detail/CustomList.vue

@@ -731,4 +731,72 @@
   .gallery-item__value_lightblue {
     color: @vent-configurable-home-light-border;
   }
+
+  .list_inject-syq-list {
+    background: none;
+  }
+  .list-item__content_inject-syq-list {
+    height: 45px;
+    position: relative;
+    padding: 0 5px 0 75px;
+    display: flex;
+    background-image: url('/@/assets/images/gasInjection/syq/7-7.png');
+    background-position: center;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    margin-bottom: 10px;
+    text-align: left;
+    align-items: center;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 20px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 30px;
+      height: 30px;
+      background-image: url('/@/assets/images/gasInjection/syq/7-tem.svg');
+      background-position: center;
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      z-index: 1;
+    }
+  }
+  .list-item_inject-syq-list:nth-of-type(2) {
+    .list-item__content_inject-syq-list {
+      background-image: url('/@/assets/images/gasInjection/syq/7-8.png');
+
+      &::before {
+        background-image: url('/@/assets/images/gasInjection/syq/7-O2.svg');
+      }
+    }
+    .list-item__value_inject-syq-list {
+      color: #91faff;
+    }
+  }
+  .list-item_inject-syq-list:nth-of-type(3) {
+    .list-item__content_inject-syq-list {
+      background-image: url('/@/assets/images/gasInjection/syq/7-9.png');
+
+      &::before {
+        width: 34px;
+        left: 15px;
+        background-image: url('/@/assets/images/gasInjection/syq/7-CH4.svg');
+      }
+    }
+    .list-item__value_inject-syq-list {
+      color: #ffab3c;
+    }
+  }
+  .list-item__value_inject-syq-list {
+    font-family: 'douyuFont';
+    font-weight: 600;
+    font-size: 15px;
+    letter-spacing: 3px;
+    color: #89d6ff;
+  }
+  .list-item__content_inject-syq-list > div {
+    flex-basis: 33.3%;
+  }
 </style>

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

@@ -818,21 +818,60 @@ defineEmits(['click']);
   .mini-board__label_E {
     background-image: var(--image-jdjl);
   }
-}
-
-.mini-board_H_low_risk {
-  background-image: var(--image-board_bg_3);
-}
-
-.mini-board_H_risk {
-  background-image: var(--image-board_bg_2);
-}
-
-.mini-board_H_high_risk {
-  background-image: var(--image-board_bg_5);
-}
 
-.mini-board_H_warning {
-  background-image: var(--image-board_bg_4);
+  .mini-board_inject-syq {
+    width: 100px;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    .mini-board__label_inject-syq {
+      width: 100%;
+      height: 100px;
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      background-position: top center;
+      text-align: center;
+      padding-top: 100px;
+      line-height: 20px;
+      box-sizing: border-box;
+    }
+    .mini-board__value_inject-syq {
+      width: 100%;
+      height: 30px;
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      background-position: top center;
+      text-align: center;
+      margin-top: 18px;
+      line-height: 35px;
+      box-sizing: border-box;
+      font-family: 'douyuFont';
+    }
+    &:nth-of-type(1) {
+      .mini-board__label_inject-syq {
+        background-image: url('/@/assets/images/gasInjection/syq/7-1.png');
+      }
+      .mini-board__value_inject-syq {
+        background-image: url('/@/assets/images/gasInjection/syq/7-2.png');
+      }
+    }
+    &:nth-of-type(2) {
+      .mini-board__label_inject-syq {
+        background-image: url('/@/assets/images/gasInjection/syq/7-3.png');
+      }
+      .mini-board__value_inject-syq {
+        background-image: url('/@/assets/images/gasInjection/syq/7-4.png');
+      }
+    }
+    &:nth-of-type(3) {
+      .mini-board__label_inject-syq {
+        background-image: url('/@/assets/images/gasInjection/syq/7-5.png');
+      }
+      .mini-board__value_inject-syq {
+        background-image: url('/@/assets/images/gasInjection/syq/7-6.png');
+      }
+    }
+  }
 }
 </style>

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

@@ -55,7 +55,7 @@ export const testConfigGasInject: Config[] = [
                 labelL: '进气阀',
                 valueL: '开启',
                 labelR: '出气阀',
-                valueR: '关闭'
+                valueR: '关闭',
               },
               bottom: {
                 labelL: '进气压力',
@@ -65,10 +65,9 @@ export const testConfigGasInject: Config[] = [
                 valueR: '0.5',
                 dwR: 'mPa',
               },
-
             },
           },
-        }
+        },
       ],
       to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=fanmain',
     },
@@ -313,7 +312,7 @@ export const testConfigGasInject: Config[] = [
       preset: [
         {
           readFrom: '',
-        }
+        },
       ],
     },
     showStyle: {
@@ -864,41 +863,265 @@ export const testConfigGasInjectCc: Config[] = [
         direction: 'row',
         items: [
           {
-            name: 'gas_inject_card',
+            name: 'board',
             basis: '100%',
           },
         ],
       },
-      board: [],
+      board: [
+        {
+          type: 'inject-syq',
+          readFrom: '',
+          layout: 'label-top',
+          items: [
+            {
+              label: '空压机',
+              value: '正常',
+            },
+            {
+              label: '注气设备',
+              value: '正常',
+            },
+            {
+              label: '抽采设备',
+              value: '异常',
+            },
+          ],
+        },
+      ],
       chart: [],
       gallery: [],
       gallery_list: [],
       table: [],
       list: [],
       complex_list: [],
-      preset: [
-        {
-          readFrom: '',
-          option: [
-            { label: '瓦斯浓度', value: '12304' },
-            { label: '抽采负压', value: '2号煤' },
-            { label: '混合气体标况总量', value: '2924.6' },
-            { label: '混合气体标况瞬量', value: '300.4' },
-            { label: '甲烷气体标况总量', value: '900' },
-            { label: '甲烷气体标况瞬量', value: '3.40' },
-            { label: '累计流量', value: '100' },
-          ]
-        }
-      ],
+      preset: [],
     },
     showStyle: {
-      size: 'width:440px;height:380px;',
+      size: 'width:470px;height:220px;',
       version: '注气',
-      position: 'top:460px;left:10px;',
+      position: 'top:350px;left:10px;',
     },
   },
-
-]
+//  {
+//    deviceType: 'env-monitor',
+//    moduleName: '试验区环境监测',
+//    pageType: 'gas_injection_syq',
+//    moduleData: {
+//      header: {
+//        show: false,
+//        readFrom: '',
+//        selector: {
+//          show: false,
+//          value: '',
+//        },
+//        slot: {
+//          show: false,
+//          value: '',
+//        },
+//      },
+//      background: {
+//        show: false,
+//        type: 'video',
+//        link: '',
+//      },
+//      layout: {
+//        direction: 'row',
+//        items: [
+//          {
+//            name: 'list',
+//            basis: '100%',
+//          },
+//        ],
+//      },
+//      board: [],
+//      chart: [],
+//      gallery: [],
+//      gallery_list: [],
+//      table: [],
+//      list: [
+//        {
+//          type: 'inject-syq-list',
+//          readFrom: '',
+//          items: [
+//            {
+//              label: '试验区温度(℃)',
+//              value: 'xxxxxx',
+//              info: '',
+//            },
+//            {
+//              label: '氧气浓度',
+//              value: 'xxxxxx',
+//              info: '',
+//            },
+//            {
+//              label: '甲烷浓度',
+//              value: 'xxxxxx',
+//              info: '',
+//            },
+//          ],
+//        },
+//      ],
+//      complex_list: [],
+//      preset: [],
+//    },
+//    showStyle: {
+//      size: 'width:470px;height:240px;',
+//      version: '注气',
+//      position: 'top:600px;left:10px;',
+//    },
+// },
+// {
+//    deviceType: 'inject-status',
+//    moduleName: '注气驱替概况',
+//    pageType: 'gas_injection_syq',
+//    moduleData: {
+//      header: {
+//        show: false,
+//        readFrom: '',
+//        selector: {
+//          show: false,
+//          value: '${strinstallpos}',
+//        },
+//        slot: {
+//          show: false,
+//          value: '',
+//        },
+//      },
+//      background: {
+//        show: true,
+//        type: 'video',
+//        link: 'https://data.playground.edgeone.ai/resource/video/flv/demo-1/index.flv',
+//      },
+//      layout: {
+//        direction: 'row',
+//        items: [
+//          {
+//            name: 'chart',
+//            basis: '100%',
+//          },
+//        ],
+//      },
+//      board: [],
+//      chart: [
+//        {
+//          type: 'inject-syq-chart',
+//          readFrom: '',
+//          legend: { show: true },
+//          xAxis: [{ show: true }],
+//          yAxis: [{ show: true, name: '', position: 'left' }],
+//          series: [
+//            { readFrom: 'chartMock', xprop: 'time', yprop: 'inject', label: '总注气量' },
+//            { readFrom: 'chartMock', xprop: 'time', yprop: 'gas', label: '总抽采瓦斯纯量' },
+//            { readFrom: 'chartMock', xprop: 'time', yprop: 'rate', label: '注抽比' },
+//          ],
+//        },
+//      ],
+//      gallery: [],
+//      gallery_list: [],
+//      table: [],
+//      list: [],
+//      complex_list: [],
+//      preset: [],
+//      mock: {
+//        chartMock: [
+//          { time: '00:00', inject: 100, gas: 80, rate: 40 },
+//          { time: '02:00', inject: 160, gas: 120, rate: 60 },
+//          { time: '04:00', inject: 140, gas: 100, rate: 80 },
+//          { time: '06:00', inject: 150, gas: 130, rate: 50 },
+//          { time: '08:00', inject: 120, gas: 90, rate: 30 },
+//        ],
+//      },
+//    },
+//    showStyle: {
+//      size: 'width:470px;height:240px;',
+//      version: '注气',
+//      position: 'top:600px;left:490px;',
+//    },
+// },
+// {
+//    deviceType: 'inject-video',
+//    moduleName: '注气区视频监控',
+//    pageType: 'gas_injection_syq',
+//    moduleData: {
+//      header: {
+//        show: false,
+//        readFrom: '',
+//        selector: {
+//          show: false,
+//          value: '${strinstallpos}',
+//        },
+//        slot: {
+//          show: false,
+//          value: '',
+//        },
+//      },
+//      background: {
+//        show: true,
+//        type: 'video',
+//        link: 'https://data.playground.edgeone.ai/resource/video/flv/demo-1/index.flv',
+//      },
+//      layout: {
+//        direction: 'row',
+//        items: [],
+//      },
+//      board: [],
+//      chart: [],
+//      gallery: [],
+//      gallery_list: [],
+//      table: [],
+//      list: [],
+//      complex_list: [],
+//      preset: [],
+//    },
+//    showStyle: {
+//      size: 'width:470px;height:240px;',
+//      version: '注气',
+//      position: 'top:600px;right:490px;',
+//    },
+// },
+// {
+//    deviceType: 'extraction-video',
+//    moduleName: '抽采区视频监控',
+//    pageType: 'gas_injection_syq',
+//    moduleData: {
+//      header: {
+//        show: false,
+//        readFrom: '',
+//        selector: {
+//          show: false,
+//          value: '${strinstallpos}',
+//        },
+//        slot: {
+//          show: false,
+//          value: '',
+//        },
+//      },
+//      background: {
+//        show: true,
+//        type: 'video',
+//        link: 'https://data.playground.edgeone.ai/resource/video/flv/demo-1/index.flv',
+//      },
+//      layout: {
+//        direction: 'row',
+//        items: [],
+//      },
+//      board: [],
+//      chart: [],
+//      gallery: [],
+//      gallery_list: [],
+//      table: [],
+//      list: [],
+//      complex_list: [],
+//      preset: [],
+//    },
+//    showStyle: {
+//      size: 'width:470px;height:240px;',
+//      version: '注气',
+//      position: 'top:600px;right:10px;',
+//    },
+// },
+];
 
 export const testConfigVentSsl: Config[] = [
   {
@@ -5745,7 +5968,7 @@ export const testConfigWarnMonitor: Config[] = [
   },
 ];
 
-export let menuList: any[] = [
+export const menuList: any[] = [
   { name: '灾害预警', MenuItemList: [] },
   { name: '通风预警', MenuItemList: [] },
   { name: '火灾预警', MenuItemList: [] },

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

@@ -1,7 +1,10 @@
 <template>
   <div class="company-home">
-    <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
-      <VentModal />
+    <div v-if="menuName !== 'syq'" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
+      <!-- <VentModal /> -->
+    </div>
+    <div v-if="menuName === 'syq'" class="syq-modal">
+      <!-- <VentModal /> -->
     </div>
     <div class="top-bg">
       <div class="main-title">{{ mainTitle }}</div>
@@ -28,7 +31,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref, computed } from 'vue';
 import { useInitConfigs, useInitPage } from './hooks/useInit';
 import ModuleGasInject from './components/ModuleGasInject.vue';
 import navMenu from './components/gasInject/navMenu.vue'
@@ -43,7 +46,15 @@ const { mainTitle, data, updateData } = useInitPage('注气驱替智能管控系
 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
@@ -191,4 +202,15 @@ onUnmounted(() => {
 :deep(.loading-box) {
   position: unset;
 }
+// 试验区模型区域样式
+.syq-modal {
+  position: absolute;
+  top: 135px;
+  right: 20px;
+  width: calc(100% - 510px);
+  height: 515px;
+  background: url('@/assets/images/gasInjection/syq/modal-bg.png') no-repeat;
+  background-size: 100% 100%;
+}
+
 </style>