注气驱替-提交新版本

.env

@@ -1,5 +1,5 @@
 # port
-VITE_PORT = 8092
+VITE_PORT = 3100
 
 #  网站标题
 VITE_GLOB_APP_TITLE = 智能通风管控系统

.env.development

@@ -31,6 +31,6 @@ VITE_GLOB_API_URL_PREFIX=
 #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", "//192.168.183.88:8093/", "micro-need-air"], ["micro-fire-front", "//localhost:8097/", "fire-Micro"]]
 # VITE_APP_SUB_APP = [["micro-vent-3dModal", "//192.168.1.16:8091/", "micro-vent-3dModal"], ["micro-need-air", "//192.168.183.88:8093/", "micro-need-air"], ["micro-fire-front", "//localhost:8097/", "fire-Micro"]]
-# VITE_APP_SUB_APP = [["micro-vent-3dModal", "//182.92.126.35:8091", "micro-vent-3dModal"],["micro-vent-2dModal", "//localhost:8088", "micro-vent-2dModal"],["micro-vent-doc", "//localhost:5173", "micro-vent-doc"],["micro-need-air", "//182.92.126.35:8093", "micro-need-air"], ["micro-fire-front", "//182.92.126.35:8097", "fire-Micro"]]
-VITE_APP_SUB_APP = [["micro-vent-3dModal", "//192.168.1.16:8091", "micro-vent-3dModal"],["micro-vent-2dModal", "//localhost:8088", "micro-vent-2dModal"],["micro-vent-doc", "//localhost:5173", "micro-vent-doc"],["micro-need-air", "//182.92.126.35:8093", "micro-need-air"], ["micro-fire-front", "//182.92.126.35:8097", "fire-Micro"]]
+VITE_APP_SUB_APP = [["micro-vent-3dModal", "//182.92.126.35:8091", "micro-vent-3dModal"],["micro-vent-2dModal", "//localhost:8088", "micro-vent-2dModal"],["micro-vent-doc", "//localhost:5173", "micro-vent-doc"],["micro-need-air", "//182.92.126.35:8093", "micro-need-air"], ["micro-fire-front", "//182.92.126.35:8097", "fire-Micro"]]
+# VITE_APP_SUB_APP = [["micro-vent-3dModal", "//192.168.1.16:8091", "micro-vent-3dModal"],["micro-vent-2dModal", "//localhost:8088", "micro-vent-2dModal"],["micro-vent-doc", "//localhost:5173", "micro-vent-doc"],["micro-need-air", "//182.92.126.35:8093", "micro-need-air"], ["micro-fire-front", "//182.92.126.35:8097", "fire-Micro"]]
 # VITE_APP_SUB_APP = [["micro-vent-3dModal", "//localhost:8091/"], ["micro-need-air", "//localhost:8099/"], ["micro-fire-front", "//localhost:8090/"]]

npminstall-debug.log

@@ -1,9 +1,9 @@
 {
-  root: 'D:\\project\\ventsystem_2.0_front',
+  root: 'D:\\project\\gasinpect-project\\vent-template',
   registry: 'https://registry.npmmirror.com',
   pkgs: [
     {
-      name: 'uni-nfc',
+      name: 'refreshHatch',
       version: 'latest',
       type: 'tag',
       alias: undefined,
@@ -15,7 +15,7 @@
   cacheDir: 'C:\\Users\\86175\\.npminstall_tarball',
   env: {
     npm_config_registry: 'https://registry.npmmirror.com',
-    npm_config_argv: '{"remain":[],"cooked":["--fix-bug-versions","--china","--userconfig=C:\\\\Users\\\\86175\\\\.cnpmrc","--disturl=https://cdn.npmmirror.com/binaries/node","--registry=https://registry.npmmirror.com","uni-nfc"],"original":["--fix-bug-versions","--china","--userconfig=C:\\\\Users\\\\86175\\\\.cnpmrc","--disturl=https://cdn.npmmirror.com/binaries/node","--registry=https://registry.npmmirror.com","uni-nfc"]}',
+    npm_config_argv: '{"remain":[],"cooked":["--fix-bug-versions","--china","--userconfig=C:\\\\Users\\\\86175\\\\.cnpmrc","--disturl=https://cdn.npmmirror.com/binaries/node","--registry=https://registry.npmmirror.com","refreshHatch"],"original":["--fix-bug-versions","--china","--userconfig=C:\\\\Users\\\\86175\\\\.cnpmrc","--disturl=https://cdn.npmmirror.com/binaries/node","--registry=https://registry.npmmirror.com","refreshHatch"]}',
     npm_config_user_agent: 'npminstall/7.8.0 npm/? node/v18.14.0 win32 x64',
     npm_config_cache: 'C:\\Users\\86175\\.npminstall_tarball',
     NODE: 'C:\\Program Files\\nodejs\\node.exe',
@@ -39,7 +39,10 @@
     NWJS_URLBASE: 'https://cdn.npmmirror.com/binaries/nwjs/v',
     PUPPETEER_DOWNLOAD_HOST: 'https://cdn.npmmirror.com/binaries/chrome-for-testing',
     PUPPETEER_DOWNLOAD_BASE_URL: 'https://cdn.npmmirror.com/binaries/chrome-for-testing',
+    PUPPETEER_CHROME_DOWNLOAD_BASE_URL: 'https://cdn.npmmirror.com/binaries/chrome-for-testing',
+    PUPPETEER_CHROME_HEADLESS_SHELL_DOWNLOAD_BASE_URL: 'https://cdn.npmmirror.com/binaries/chrome-for-testing',
     PLAYWRIGHT_DOWNLOAD_HOST: 'https://cdn.npmmirror.com/binaries/playwright',
+    PLAYWRIGHT_CHROMIUM_DOWNLOAD_HOST: 'https://cdn.npmmirror.com/binaries/chrome-for-testing',
     SENTRYCLI_CDNURL: 'https://cdn.npmmirror.com/binaries/sentry-cli',
     SAUCECTL_INSTALL_BINARY_MIRROR: 'https://cdn.npmmirror.com/binaries/saucectl',
     RE2_DOWNLOAD_MIRROR: 'https://cdn.npmmirror.com/binaries/node-re2',
@@ -50,8 +53,10 @@
     npm_config_sharp_binary_host: 'https://cdn.npmmirror.com/binaries/sharp',
     npm_config_sharp_libvips_binary_host: 'https://cdn.npmmirror.com/binaries/sharp-libvips',
     npm_config_robotjs_binary_host: 'https://cdn.npmmirror.com/binaries/robotjs',
-    npm_rootpath: 'D:\\project\\ventsystem_2.0_front',
-    INIT_CWD: 'D:\\project\\ventsystem_2.0_front'
+    npm_config_gl_binary_host: 'https://cdn.npmmirror.com/binaries/gl',
+    RIPGREP_PREBUILT_BINARIES_MIRROR: 'https://registry.npmmirror.com/-/binary/ripgrep-prebuilt',
+    npm_rootpath: 'D:\\project\\gasinpect-project\\vent-template',
+    INIT_CWD: 'D:\\project\\gasinpect-project\\vent-template'
   },
   binaryMirrors: {
     ENVS: {
@@ -70,7 +75,10 @@
       NWJS_URLBASE: 'https://cdn.npmmirror.com/binaries/nwjs/v',
       PUPPETEER_DOWNLOAD_HOST: 'https://cdn.npmmirror.com/binaries/chrome-for-testing',
       PUPPETEER_DOWNLOAD_BASE_URL: 'https://cdn.npmmirror.com/binaries/chrome-for-testing',
+      PUPPETEER_CHROME_DOWNLOAD_BASE_URL: 'https://cdn.npmmirror.com/binaries/chrome-for-testing',
+      PUPPETEER_CHROME_HEADLESS_SHELL_DOWNLOAD_BASE_URL: 'https://cdn.npmmirror.com/binaries/chrome-for-testing',
       PLAYWRIGHT_DOWNLOAD_HOST: 'https://cdn.npmmirror.com/binaries/playwright',
+      PLAYWRIGHT_CHROMIUM_DOWNLOAD_HOST: 'https://cdn.npmmirror.com/binaries/chrome-for-testing',
       SENTRYCLI_CDNURL: 'https://cdn.npmmirror.com/binaries/sentry-cli',
       SAUCECTL_INSTALL_BINARY_MIRROR: 'https://cdn.npmmirror.com/binaries/saucectl',
       RE2_DOWNLOAD_MIRROR: 'https://cdn.npmmirror.com/binaries/node-re2',
@@ -80,7 +88,9 @@
       npm_config_keytar_binary_host: 'https://cdn.npmmirror.com/binaries/keytar',
       npm_config_sharp_binary_host: 'https://cdn.npmmirror.com/binaries/sharp',
       npm_config_sharp_libvips_binary_host: 'https://cdn.npmmirror.com/binaries/sharp-libvips',
-      npm_config_robotjs_binary_host: 'https://cdn.npmmirror.com/binaries/robotjs'
+      npm_config_robotjs_binary_host: 'https://cdn.npmmirror.com/binaries/robotjs',
+      npm_config_gl_binary_host: 'https://cdn.npmmirror.com/binaries/gl',
+      RIPGREP_PREBUILT_BINARIES_MIRROR: 'https://registry.npmmirror.com/-/binary/ripgrep-prebuilt'
     },
     '@ali/s2': { host: 'https://cdn.npmmirror.com/binaries/looksgood-s2' },
     sharp: { replaceHostFiles: [Array], replaceHostMap: [Object] },
@@ -119,7 +129,10 @@
     },
     fsevents: { host: 'https://cdn.npmmirror.com/binaries/fsevents' },
     nodejieba: { host: 'https://cdn.npmmirror.com/binaries/nodejieba' },
-    canvas: { host: 'https://cdn.npmmirror.com/binaries/canvas' },
+    canvas: {
+      host: 'https://cdn.npmmirror.com/binaries/canvas',
+      remote_path: 'v{version}'
+    },
     'skia-canvas': { host: 'https://cdn.npmmirror.com/binaries/skia-canvas' },
     'flow-bin': {
       replaceHost: 'https://github.com/facebook/flow/releases/download/v',
@@ -187,7 +200,7 @@
   disableFallbackStore: false,
   workspacesMap: Map(0) {},
   enableWorkspace: false,
-  workspaceRoot: 'D:\\project\\ventsystem_2.0_front',
+  workspaceRoot: 'D:\\project\\gasinpect-project\\vent-template',
   isWorkspaceRoot: true,
   isWorkspacePackage: false,
   offline: false,

package.json

@@ -106,7 +106,8 @@
     "xss": "^1.0.14"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.23.3",
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.0",
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
     "@iconify/json": "^2.2.107",
@@ -137,6 +138,7 @@
     "@vue/compiler-sfc": "^3.3.4",
     "@vue/test-utils": "^2.4.1",
     "autoprefixer": "^10.4.16",
+    "babel-loader": "^10.1.1",
     "commitizen": "^4.3.0",
     "conventional-changelog-cli": "^3.0.0",
     "cross-env": "^7.0.3",

src/assets/icons/famen.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="52.2" height="37.682" viewBox="0 0 52.2 37.682">
+  <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="#53c4ff"/>
+    </linearGradient>
+  </defs>
+  <path id="阀门" d="M51.919,200.025a.612.612,0,0,1,0,1.22H50.795v3.074h1.124a.612.612,0,0,1,0,1.22h-1.24a1.539,1.539,0,0,1-1.414,1.032,1.6,1.6,0,0,1-1.533-1.649v-.69a1.356,1.356,0,0,1-.924.391,1.468,1.468,0,0,1-1.4-1.408H35.9a11.457,11.457,0,0,1-18.954,0H7.364a1.468,1.468,0,0,1-1.4,1.408,1.35,1.35,0,0,1-.924-.391v.69A1.6,1.6,0,0,1,3.5,206.571a1.539,1.539,0,0,1-1.414-1.032H.852a.612.612,0,0,1,0-1.22H1.974v-3.074H.852a.612.612,0,0,1,0-1.22H1.974v-3.188H.852a.612.612,0,0,1,0-1.22H1.974v-2.875H.852a.613.613,0,0,1,0-1.223H1.974v-3.283H.852a.613.613,0,0,1,0-1.223H2.09A1.536,1.536,0,0,1,3.5,185.986a1.6,1.6,0,0,1,1.533,1.646v.69a1.35,1.35,0,0,1,.924-.391,1.468,1.468,0,0,1,1.4,1.408h9.629a11.625,11.625,0,0,1,8.322-4.9V181.2l-.029-.012-8.522-6.027a1.315,1.315,0,0,1-.493-1.142H10.763a1.741,1.741,0,0,1,0-3.471H42.084a1.741,1.741,0,0,1,0,3.471H36.5a1.31,1.31,0,0,1-.5,1.142l-8.522,6.027v3.237a11.611,11.611,0,0,1,8.377,4.909H45.4a1.468,1.468,0,0,1,1.4-1.408,1.356,1.356,0,0,1,.924.391v-.69a1.594,1.594,0,0,1,1.533-1.646,1.536,1.536,0,0,1,1.414,1.029h1.24a.613.613,0,0,1,0,1.223H50.795v3.283h1.124a.613.613,0,0,1,0,1.223H50.795v2.875h1.124a.612.612,0,0,1,0,1.22H50.795v3.187h1.124Zm-32.15-26,5.546,3.921v-3.834c0-.035.032-.055.035-.087H19.769Zm13.228,0H27.445c0,.032.035.052.035.087v3.816l5.517-3.9Z" transform="translate(-0.284 -170.552)" fill="url(#linear-gradient)"/>
+</svg>

src/assets/icons/yali.svg

@@ -0,0 +1,10 @@
+<svg id="压力" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="44.399" height="44.399" viewBox="0 0 44.399 44.399">
+  <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="#53c4ff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_57819" data-name="路径 57819" d="M54.9,33.616a22.2,22.2,0,1,0,22.2,22.2A22.2,22.2,0,0,0,54.9,33.616Zm2.289,25.6a4.322,4.322,0,1,1-5.5-4.257l9.6-6.85-4.1,11.107ZM67.346,69.923a2.144,2.144,0,0,1-1.471.58h0a2.158,2.158,0,0,1-1.47-3.738,13.945,13.945,0,1,0-19.01,0,2.159,2.159,0,0,1-2.942,3.162,18.261,18.261,0,1,1,24.893,0Z" transform="translate(-32.7 -33.616)" fill="url(#linear-gradient)"/>
+  <path id="路径_57820" data-name="路径 57820" d="M180.422,180.848a16.121,16.121,0,0,0-10.98,27.91s0,0,0,0a.011.011,0,0,0,0-.006,16.1,16.1,0,1,1,21.951,0v.005h0a16.121,16.121,0,0,0-10.976-27.911Z" transform="translate(-158.221 -174.029)" fill="url(#linear-gradient)"/>
+</svg>

src/assets/images/gasInjection/6-异常.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="58.354" height="53.68" viewBox="0 0 58.354 53.68">
+  <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="#53c4ff"/>
+    </linearGradient>
+    <filter id="路径_57841" x="0" y="0" width="58.354" height="53.68" filterUnits="userSpaceOnUse">
+      <feOffset dy="3" input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feFlood/>
+      <feComposite operator="in" in2="blur"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+  </defs>
+  <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#路径_57841)">
+    <path id="路径_57841-2" data-name="路径 57841" d="M155.174,95.521,137.731,65.306a2.733,2.733,0,0,0-4.733,0L115.554,95.521a2.733,2.733,0,0,0,2.367,4.1h34.888a2.732,2.732,0,0,0,2.366-4.1ZM135.718,73.747a2.508,2.508,0,0,1,2.472,2.114l-.613,10.572a1.859,1.859,0,1,1-3.717,0l-.613-10.572A2.352,2.352,0,0,1,135.718,73.747Zm0,22.231a2.554,2.554,0,1,1,2.554-2.554A2.554,2.554,0,0,1,135.718,95.978Z" transform="translate(-106.19 -57.94)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

src/assets/images/themify/deepblue/home-container/configurable/gasInjection/4-压力.svg

@@ -0,0 +1,10 @@
+<svg id="压力" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="44.399" height="44.399" viewBox="0 0 44.399 44.399">
+  <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="#53c4ff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_57819" data-name="路径 57819" d="M54.9,33.616a22.2,22.2,0,1,0,22.2,22.2A22.2,22.2,0,0,0,54.9,33.616Zm2.289,25.6a4.322,4.322,0,1,1-5.5-4.257l9.6-6.85-4.1,11.107ZM67.346,69.923a2.144,2.144,0,0,1-1.471.58h0a2.158,2.158,0,0,1-1.47-3.738,13.945,13.945,0,1,0-19.01,0,2.159,2.159,0,0,1-2.942,3.162,18.261,18.261,0,1,1,24.893,0Z" transform="translate(-32.7 -33.616)" fill="url(#linear-gradient)"/>
+  <path id="路径_57820" data-name="路径 57820" d="M180.422,180.848a16.121,16.121,0,0,0-10.98,27.91s0,0,0,0a.011.011,0,0,0,0-.006,16.1,16.1,0,1,1,21.951,0v.005h0a16.121,16.121,0,0,0-10.976-27.911Z" transform="translate(-158.221 -174.029)" fill="url(#linear-gradient)"/>
+</svg>

src/assets/images/themify/deepblue/home-container/configurable/gasInjection/4-阀门.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="52.2" height="37.682" viewBox="0 0 52.2 37.682">
+  <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="#53c4ff"/>
+    </linearGradient>
+  </defs>
+  <path id="阀门" d="M51.919,200.025a.612.612,0,0,1,0,1.22H50.795v3.074h1.124a.612.612,0,0,1,0,1.22h-1.24a1.539,1.539,0,0,1-1.414,1.032,1.6,1.6,0,0,1-1.533-1.649v-.69a1.356,1.356,0,0,1-.924.391,1.468,1.468,0,0,1-1.4-1.408H35.9a11.457,11.457,0,0,1-18.954,0H7.364a1.468,1.468,0,0,1-1.4,1.408,1.35,1.35,0,0,1-.924-.391v.69A1.6,1.6,0,0,1,3.5,206.571a1.539,1.539,0,0,1-1.414-1.032H.852a.612.612,0,0,1,0-1.22H1.974v-3.074H.852a.612.612,0,0,1,0-1.22H1.974v-3.188H.852a.612.612,0,0,1,0-1.22H1.974v-2.875H.852a.613.613,0,0,1,0-1.223H1.974v-3.283H.852a.613.613,0,0,1,0-1.223H2.09A1.536,1.536,0,0,1,3.5,185.986a1.6,1.6,0,0,1,1.533,1.646v.69a1.35,1.35,0,0,1,.924-.391,1.468,1.468,0,0,1,1.4,1.408h9.629a11.625,11.625,0,0,1,8.322-4.9V181.2l-.029-.012-8.522-6.027a1.315,1.315,0,0,1-.493-1.142H10.763a1.741,1.741,0,0,1,0-3.471H42.084a1.741,1.741,0,0,1,0,3.471H36.5a1.31,1.31,0,0,1-.5,1.142l-8.522,6.027v3.237a11.611,11.611,0,0,1,8.377,4.909H45.4a1.468,1.468,0,0,1,1.4-1.408,1.356,1.356,0,0,1,.924.391v-.69a1.594,1.594,0,0,1,1.533-1.646,1.536,1.536,0,0,1,1.414,1.029h1.24a.613.613,0,0,1,0,1.223H50.795v3.283h1.124a.613.613,0,0,1,0,1.223H50.795v2.875h1.124a.612.612,0,0,1,0,1.22H50.795v3.187h1.124Zm-32.15-26,5.546,3.921v-3.834c0-.035.032-.055.035-.087H19.769Zm13.228,0H27.445c0,.032.035.052.035.087v3.816l5.517-3.9Z" transform="translate(-0.284 -170.552)" fill="url(#linear-gradient)"/>
+</svg>

src/assets/images/themify/deepblue/home-container/configurable/gasInjection/6-异常.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="58.354" height="53.68" viewBox="0 0 58.354 53.68">
+  <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="#53c4ff"/>
+    </linearGradient>
+    <filter id="路径_57841" x="0" y="0" width="58.354" height="53.68" filterUnits="userSpaceOnUse">
+      <feOffset dy="3" input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feFlood/>
+      <feComposite operator="in" in2="blur"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+  </defs>
+  <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#路径_57841)">
+    <path id="路径_57841-2" data-name="路径 57841" d="M155.174,95.521,137.731,65.306a2.733,2.733,0,0,0-4.733,0L115.554,95.521a2.733,2.733,0,0,0,2.367,4.1h34.888a2.732,2.732,0,0,0,2.366-4.1ZM135.718,73.747a2.508,2.508,0,0,1,2.472,2.114l-.613,10.572a1.859,1.859,0,1,1-3.717,0l-.613-10.572A2.352,2.352,0,0,1,135.718,73.747Zm0,22.231a2.554,2.554,0,1,1,2.554-2.554A2.554,2.554,0,0,1,135.718,95.978Z" transform="translate(-106.19 -57.94)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

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

@@ -99,7 +99,7 @@ export interface ModuleData {
         | 'radio_label'
         | 'button_list'
         | 'card_list'
-        | 'generalist';
+        | 'generalist'
         | 'nitrogenBtnList';
       /** 分区大小 */
       basis: string;
@@ -127,7 +127,7 @@ export interface ShowStyle {
   /** 模块的宽高，特殊情况下可以自定义宽高 */
   size: string;
   /** 模块的版本，除了新版，只要有一个模块指定为旧版或其他版本，那么整个页面风格将变更为对应版本，优先级 旧版 > 普通版 > 新版 */
-  version: '原版' | '新版' | '普通版' | '保德' | '淡蓝色' | '翠绿色';
+  version: '原版' | '新版' | '普通版' | '保德' | '淡蓝色' | '翠绿色' | '注气';
   /** 模块的位置，即定位，特殊情况下可以自定义定位 */
   position: string;
   // 模块位置  根据这个配置决定使用hearder的方式

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

@@ -0,0 +1,72 @@
+<template>
+  <!-- 注气驱替 -->
+  <component
+    :is="getModuleComponent(showStyle)"
+    :style="style"
+    :title="moduleName"
+    :visible="visible"
+    :class="{ 'cursor-pointer': !!moduleData.to }"
+    @close="$emit('close')"
+    @click="redirectTo"
+  >
+    <slot>
+      <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event" />
+      <Content :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }" :moduleData="moduleData" :data="selectedData" />
+    </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';
+
+  const props = defineProps<{
+    /** 配置的详细模块信息 */
+    moduleData: any;
+    /** 配置的详细样式信息 */
+    showStyle: any;
+    /** 该模块配置中的设备标识符 */
+    deviceType: string;
+    /** api返回的数据 */
+    data: any;
+    moduleName: string;
+    visible: boolean;
+  }>();
+  defineEmits(['close', 'click']);
+
+  const { header } = props.moduleData;
+  const selectedData = ref();
+
+  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;
+    }
+    return ModuleBottom;
+  }
+
+  function redirectTo() {
+    const { to } = props.moduleData;
+    if (!to) return;
+    openWindow(getFormattedText(selectedData.value, to));
+  }
+</script>

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

@@ -163,12 +163,18 @@
         <template v-else-if="config.name === 'generalist'">
           <generalList class="content__module" :generalData="config.data" />
         </template>
-        <!-- <template v-if="config.key === 'fire_control'">
-        <FIreControl class="content__module" />
-      </template>
-      <template v-if="config.key === 'fire_warn'">
-        <FIreWarn class="content__module" />
-      </template> -->
+          <template v-else-if="config.name === 'upDown'">
+          <upDown class="content__module" :option="config.config.items.option" :upDownData="config.data" />
+        </template>
+         <template v-else-if="config.name === 'chart_inject'">
+          <gasInjectChart class="content__module"  :upDownData="config.data" />
+        </template>
+         <template v-else-if="config.name === 'gas_inject_list'">
+          <gasInjectList class="content__module"  :upDownData="config.data" />
+        </template>
+          <template v-else-if="config.name === 'gas_zy_chart'">
+          <gasZyChart class="content__module"   />
+        </template>
       </div>
     </div>
   </div>
@@ -209,6 +215,10 @@
   import ButtonList from './preset/buttonList.vue';
   import cardList from './preset/cardList.vue';
   import generalList from './preset/generalList.vue';
+  import upDown from './preset/upDown.vue'
+  import gasInjectChart from './preset/gasInjectChart.vue'
+  import gasInjectList from './preset/gasInjectList.vue'
+  import gasZyChart from './preset/gasZyChart.vue'
 
   // import FIreWarn from './preset/FIreWarn.vue';
   // import FIreControl from './preset/FIreControl.vue';

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

@@ -0,0 +1,79 @@
+<template>
+  <Transition>
+    <div v-if="visible" class="module-content">
+      <div v-if="title" class="module-content__title__expand">
+        <span class="action-btn close-btn" @click="closeModel"></span>
+        <span @click="clickHandler">{{ title }}</span>
+      </div>
+      <div class="module-slot">
+        <slot></slot>
+      </div>
+    </div>
+  </Transition>
+</template>
+<script lang="ts" setup>
+  defineProps<{ title: string; visible: boolean }>();
+  const emit = defineEmits(['close', 'click']);
+
+  function closeModel() {
+    emit('close');
+  }
+  function clickHandler() {
+    emit('click');
+  }
+</script>
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .module-content {
+       --image-model_original_title_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/2-5.png');
+       --image-model_original_border_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/2-6.png');
+    }
+  }
+
+  .module-content {
+    --image-model_original_title_bg: url('@/assets/images/gasInjection/2-5.png');
+    --image-model_original_border_bg: url('@/assets/images/gasInjection/2-6.png');
+    --bg-height: 40px;
+    color: #fff;
+    box-sizing: border-box;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  .module-content__title__expand {
+     width: 100%;
+    height: var(--bg-height);
+    background: var(--image-model_original_title_bg) no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+    padding-left: 45px;
+    padding-top: 2px;
+    margin-bottom: 5px;
+    font-family: 'douyuFont';
+    line-height: var(--bg-height);
+  }
+  .module-slot {
+    height: calc(100% - 33px);
+    width: calc(100% - 15px);
+    background: var( --image-model_original_border_bg) no-repeat;
+    background-size: 100% 100%;
+    // backdrop-filter: blur(5px);
+    // background-color: var(--vent-configurable-original-module-bg);
+    // margin-left: 5px;
+  }
+
+  // Transition动画相关
+  .v-enter-active,
+  .v-leave-active {
+    transition: all 0.3s ease;
+  }
+
+  .v-enter-from,
+  .v-leave-to {
+    opacity: 0;
+    transform: translateY(-33px);
+  }
+</style>

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

@@ -0,0 +1,81 @@
+<template>
+  <Transition>
+    <div v-if="visible" class="module-content">
+      <div v-if="title" class="module-content__title__expand">
+        <span class="action-btn close-btn" @click="closeModel"></span>
+        <span @click="clickHandler">{{ title }}</span>
+      </div>
+      <div class="module-slot">
+        <slot></slot>
+      </div>
+    </div>
+  </Transition>
+</template>
+<script lang="ts" setup>
+  defineProps<{ title: string; visible: boolean }>();
+  const emit = defineEmits(['close', 'click']);
+
+  function closeModel() {
+    emit('close');
+  }
+  function clickHandler() {
+    emit('click');
+  }
+</script>
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .module-content {
+      --image-model_original_title_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/2-1.png');
+       --image-model_original_border_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/2-2.png');
+    }
+  }
+
+  .module-content {
+    --image-model_original_title_bg: url('@/assets/images/gasInjection/2-1.png');
+    --image-model_original_border_bg: url('@/assets/images/gasInjection/2-2.png');
+    --bg-height: 40px;
+    color: #fff;
+    box-sizing: border-box;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  .module-content__title__expand {
+    width: 100%;
+    height: var(--bg-height);
+    background: var(--image-model_original_title_bg) no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+    padding-left: 45px;
+    padding-top: 2px;
+    margin-bottom: 5px;
+    font-family: 'douyuFont';
+    line-height: var(--bg-height);
+  }
+  .module-slot {
+    height: calc(100% - 33px);
+    width: calc(100% - 20px);
+    // backdrop-filter: blur(5px);
+    // #182d47
+    background: var( --image-model_original_border_bg) no-repeat;
+    background-size: 100% 100%;
+    // margin-left: 10px;
+  }
+
+  // Transition动画相关
+  .v-enter-active,
+  .v-leave-active {
+    transition: all 0.3s ease;
+  }
+
+  .v-enter-from,
+  .v-leave-to {
+    // opacity: 1;
+    transform: translateX(-100%);
+    // transform: scaleY(0);
+    // transform-origin: center top;
+  }
+</style>

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

@@ -0,0 +1,84 @@
+<template>
+  <Transition>
+    <div v-if="visible" class="module-content">
+      <div v-if="title" class="module-content__title__expand">
+        <span class="action-btn close-btn" @click="closeModel"></span>
+        <span @click="clickHandler">{{ title }}</span>
+      </div>
+      <div class="module-slot">
+        <slot></slot>
+      </div>
+    </div>
+  </Transition>
+</template>
+<script lang="ts" setup>
+// 和 ./moduleLeft 一样，针对动画做了一些修改
+defineProps<{ title: string; visible: boolean }>();
+const emit = defineEmits(['close', 'click']);
+
+function closeModel() {
+  emit('close');
+}
+function clickHandler() {
+  emit('click');
+}
+</script>
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .module-content {
+    --image-model_original_title_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/2-1.png');
+    --image-model_original_border_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/2-2.png');
+  }
+}
+
+.module-content {
+  --image-model_original_title_bg: url('@/assets/images/gasInjection/2-1.png');
+  --image-model_original_border_bg: url('@/assets/images/gasInjection/2-2.png');
+  --bg-height: 40px;
+  color: #fff;
+  box-sizing: border-box;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.module-content__title__expand {
+  width: 100%;
+  height: var(--bg-height);
+  background: var(--image-model_original_title_bg) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  padding-left: 45px;
+  padding-top: 2px;
+  margin-bottom: 5px;
+  font-family: 'douyuFont';
+  line-height: var(--bg-height);
+}
+
+
+
+.module-slot {
+  height: calc(100% - 33px);
+  width: calc(100% - 20px);
+  // backdrop-filter: blur(5px);
+  // #182d47
+  background: var(--image-model_original_border_bg) no-repeat;
+  background-size: 100% 100%;
+}
+
+// Transition动画相关
+.v-enter-active,
+.v-leave-active {
+  transition: all 0.3s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  // opacity: 1;
+  transform: translateX(100%);
+  // transform: scaleY(0);
+  // transform-origin: center top;
+}
+</style>

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

@@ -0,0 +1,121 @@
+<template>
+  <div class="nav-menu">
+    <div class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handlerClick(index, item)">
+      <div
+        :class="{ 'menu-item-label': index != menuList.length - 1, 'menu-item-label-1': index == menuList.length - 1, 'bg-position': index == menuList.length - 1, 'active-menu': activeIndex == index, 'unactive-menu': activeIndex != index }">
+        {{ item.name }}</div>
+      <div v-if="index != menuList.length - 1" class="menu-item-icon"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+let menuList = ref([
+  { name: '设备监测', code: 'device' },
+  { name: '试验区', code: 'syq' },
+  { name: '主界面', code: 'zjm' },
+  { name: '注气系统', code: 'zqxt' },
+  { name: '抽采系统', code: 'ccxt' },
+])
+let activeIndex = ref<number>(2)
+let $emit = defineEmits(['toggleMenu'])
+
+
+//选项切换
+function handlerClick(index, item) {
+  activeIndex.value = index
+  $emit('toggleMenu', item.code)
+}
+
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .nav-menu {
+    --image-menu-center: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/1-5.png');
+    --image-menu-bg-L: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/1-4.png');
+    --image-menu-bg-R: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/1-3.png');
+  }
+}
+
+.nav-menu {
+  --image-menu-center: url('@/assets/images/gasInjection/1-5.png');
+  --image-menu-bg-L: url('@/assets/images/gasInjection/1-4.png');
+  --image-menu-bg-R: url('@/assets/images/gasInjection/1-3.png');
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  padding: 9px 0px 0px 35px;
+  box-sizing: border-box;
+
+  .menu-item {
+    width: 20%;
+    height: 100%;
+    display: flex;
+    cursor: pointer;
+
+    &:nth-child(1) {
+      .menu-item-icon {
+        background: var(--image-menu-bg-R) no-repeat center;
+      }
+    }
+
+    &:nth-child(2) {
+      .menu-item-icon {
+        background: var(--image-menu-bg-R) no-repeat center;
+      }
+    }
+
+    &:nth-child(3) {
+      .menu-item-icon {
+        background: var(--image-menu-bg-L) no-repeat center;
+      }
+    }
+
+    &:nth-child(4) {
+      .menu-item-icon {
+        background: var(--image-menu-bg-L) no-repeat center;
+      }
+    }
+  }
+
+  .menu-item-label {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: calc(100% - 33px);
+    font-size: 13px;
+    font-family: 'douyuFont';
+  }
+
+  .menu-item-label-1 {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    font-size: 13px;
+    padding-left: 15px;
+    font-family: 'douyuFont';
+  }
+
+  .menu-item-icon {
+    width: 33px;
+  }
+
+  .active-menu {
+    height: 100%;
+    background: var(--image-menu-center) no-repeat bottom;
+    background-size: 100% 100%;
+  }
+
+  .bg-position {
+    background-position: -2px 0;
+    background-size: 78% 100%;
+  }
+
+}
+</style>

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

@@ -0,0 +1,20 @@
+<template>
+  <div class="gasInjectChart">
+    <div ref="gasInjectChart" class="inject-echart-box"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import * as echarts from 'echarts';
+
+let gasInjectChart=ref(null)
+
+</script>
+
+<style lang="less" scoped>
+.gasInjectChart {
+  width: 100%;
+  height: 100%;
+}
+</style>

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

@@ -0,0 +1,76 @@
+<template>
+  <div class="gas-inject-list">
+    <div class="inject-list-box" v-for="(item, index) in listData" :key="index">
+      <div class="list-box-item">
+        <div class="box-item-label">{{ item.gzmTitle }}</div>
+        <div class="box-item-value">{{ item.gzmValue }}</div>
+      </div>
+      <div class="list-box-item">
+        <div class="box-item-label">{{ item.mcTitle }}</div>
+        <div class="box-item-value">{{ item.mcValue }}</div>
+      </div>
+      <div class="list-box-item">
+        <div class="box-item-label">{{ item.cdTitle }}</div>
+        <div class="box-item-value">{{ item.cdValue }}</div>
+      </div>
+      <div class="list-box-item">
+        <div class="box-item-label">{{ item.kdTitle }}</div>
+        <div class="box-item-value">{{ item.kdValue }}</div>
+      </div>
+      <div class="list-box-item">
+        <div class="box-item-label">{{ item.sycdTitle }}</div>
+        <div class="box-item-value">{{ item.sycdValue }}</div>
+      </div>
+      <div class="list-box-item">
+        <div class="box-item-label">{{ item.hlTitle }}</div>
+        <div class="box-item-value">{{ item.hlValue }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+let listData = ref([
+  { id: 1, gzmTitle: '工作面', gzmValue: '12304工作面', mcTitle: '所属煤层', mcValue: '2号煤', cdTitle: '设计长度', cdValue: '2924.6', kdTitle: '采面宽度', kdValue: '300.4', sycdTitle: '剩余可采长度', sycdValue: '900', hlTitle: '原始煤层瓦斯含量', hlValue: '3.40' },
+
+])
+
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .gas-inject-list {
+    --image-model_list_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/5-1.png');
+  }
+}
+
+.gas-inject-list {
+  --image-model_list_bg: url('@/assets/images/gasInjection/5-1.png');
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 15px;
+  box-sizing: border-box;
+  overflow-y: auto;
+
+  .inject-list-box {
+    width: 100%;
+    height: 100%;
+  }
+
+  .list-box-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 52px;
+    padding: 0px 28px;
+    background: var(--image-model_list_bg) no-repeat;
+    background-size: 100% 100%;
+  }
+}
+</style>

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

@@ -0,0 +1,240 @@
+<template>
+  <div class="gas-zy-chart">
+    <div class="echart-box" ref="gasZyChart"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onMounted, ref } from 'vue'
+import * as echarts from 'echarts';
+
+let gasZyChart = ref(null)
+
+let series = ref<any[]>(['故障', '换模', '换刀']);
+let startTimeAll = ref(new Date('2021-03-01 00:00:00').getTime());
+let endTimeAll = ref(new Date('2021-03-04 00:00:00').getTime());
+let categories = ref<any[]>(['A', 'B', 'C']);
+let seriesValue = ref<any[]>([]);
+let jsonData = ref<any[]>([
+  {
+    category: 'A',
+    series: '故障',
+    startTime: '2021-03-01 08:00:00',
+    endTime: '2021-03-01 18:00:00',
+  },
+  {
+    category: 'A',
+    series: '换刀',
+    startTime: '2021-03-01 18:00:00',
+    endTime: '2021-03-02 14:00:00',
+  },
+  {
+    category: 'A',
+    series: '换模',
+    startTime: '2021-03-03 10:00:00',
+    endTime: '2021-03-03 18:00:00',
+  },
+  {
+    category: 'B',
+    series: '故障',
+    startTime: '2021-03-01 08:00:00',
+    endTime: '2021-03-01 13:00:00',
+  },
+  {
+    category: 'C',
+    series: '故障',
+    startTime: '2021-03-01 08:00:00',
+    endTime: '2021-03-01 16:00:00',
+  },
+  {
+    category: 'C',
+    series: '换模',
+    startTime: '2021-03-02 04:00:00',
+    endTime: '2021-03-02 19:00:00',
+  },
+])
+
+function getXDate(time) {
+  let year = time.getFullYear();
+  let month = parseInt(time.getMonth()) + 1;
+  let day = time.getDate();
+  let hour = time.getHours();
+  let minutes = time.getMinutes();
+  let seconds = time.getSeconds();
+  return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
+}
+
+echarts.util.each(categories.value, function (category, index: number) {
+  let cgory = categories.value[index];
+  series.value.forEach((itemS, indexS) => {
+    jsonData.value.forEach((itemj, indexj) => {
+      if (itemj.category == cgory) {
+        let data: any[] = [];
+        let startTime = new Date(itemj.startTime).getTime();
+        let endTime = new Date(itemj.endTime).getTime();
+        let duration = endTime - startTime;
+        if (itemj.series == itemS) {
+          data.push({
+            name: itemj.series,
+            value: [index, startTime, endTime, duration],
+            itemStyle: {
+              normal: {
+                //color: '#7b9ce1',
+              },
+            },
+          });
+          seriesValue.value.push({
+            name: itemS,
+            type: 'custom',
+            renderItem: renderItem,
+            itemStyle: {
+              normal: {
+                opacity: 0.8,
+              },
+            },
+            encode: {
+              x: [1, 2],
+              y: 0,
+            },
+            data: data,
+          });
+        }
+      }
+    });
+  });
+});
+
+function renderItem(params, api) {
+  let categoryIndex = api.value(0);
+  let start = api.coord([api.value(1), categoryIndex]);
+  let end = api.coord([api.value(2), categoryIndex]);
+  let height = api.size([0, 1])[1] * 0.6;
+
+  let rectShape = echarts.graphic.clipRectByRect(
+    {
+      x: start[0],
+      y: start[1] - height / 2,
+      width: end[0] - start[0],
+      height: height,
+    },
+    {
+      x: params.coordSys.x,
+      y: params.coordSys.y,
+      width: params.coordSys.width,
+      height: params.coordSys.height,
+    }
+  );
+
+  return (
+    rectShape && {
+      type: 'rect',
+      shape: rectShape,
+      style: api.style(),
+    }
+  );
+}
+
+
+function getOption() {
+  nextTick(() => {
+    let myChart = echarts.init(gasZyChart.value);
+    let option = {
+      grid: {
+        top: "12%",
+        left: "6%",
+        right: "6%",
+        bottom: "3%",
+        containLabel: true,
+      },
+      legend: {
+        align: 'left',
+        right: 'center',
+        top: '0',
+        type: 'plain',
+        textStyle: {
+          color: '#fff',
+          fontSize: 12,
+        },
+        // icon:'rect',
+        // itemGap: 25,
+        // itemWidth: 18,
+        icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
+        data: ['故障', '换模', '换刀'],
+      },
+      tooltip: {
+        formatter: function (params) {
+          return params.marker + params.name + ': ' + params.value[3] / 1000 / 60 / 60 + ' h';
+        },
+      },
+
+      xAxis: [
+        {
+          min: startTimeAll.value,
+          max: endTimeAll.value,
+          interval: 3600 * 24 * 1000,
+          axisLabel: {
+            show: true,
+            fontSize: 14,
+            textStyle: {
+              color: '#b3b8cc',
+            },
+            formatter: function (val) {
+              let dateTime = new Date(val);
+              return getXDate(dateTime);
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              // color: 'rgba(14, 53, 95)',
+              color: 'red',
+            },
+          },
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        {
+          // data: ['2021-03-01', '2021-03-02', '2021-03-03'],
+          data: [],
+        },
+      ],
+      yAxis: {
+        data: categories.value,
+        axisLine: {
+          show: false,
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: 'rgba(6, 48, 77)',
+          },
+        },
+      },
+      series: seriesValue.value
+    };
+    myChart.setOption(option);
+    window.onresize = function () {
+      myChart.resize();
+    };
+  });
+}
+
+onMounted(() => {
+  getOption()
+})
+
+</script>
+
+<style lang="less" scoped>
+.gas-zy-chart {
+  width: 100%;
+  height: 100%;
+
+  .echart-box {
+    height: 100%;
+  }
+}
+</style>

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

@@ -0,0 +1,157 @@
+<template>
+  <div class="upDown">
+    <div class="up-box">
+      <div class="box-t-L">
+        <div class="t-text">{{ option.top.labelL }}</div>
+        <div class="t-val">
+          <span class="t-icon"></span>
+          <span class="val-text">{{ option.top.valueL }}</span>
+        </div>
+      </div>
+      <div class="box-t-R">
+        <div class="t-text">{{ option.top.labelR }}</div>
+        <div class="t-val">
+          <span class="t-icon"></span>
+          <span class="val-text">{{ option.top.valueR }}</span>
+
+        </div>
+      </div>
+      <div class="box-icon">
+         <SvgIcon  class="icon-style" size="38" name="famen" />
+      </div>
+    </div>
+    <div class="down-box">
+      <div class="box-b-L">
+        <div class="t-text">{{ option.bottom.labelL }}</div>
+        <div class="t-val">
+          <span class="val-text">{{ option.bottom.valueL }}</span>
+          <span class="val-text">{{ option.bottom.dwL }}</span>
+        </div>
+      </div>
+      <div class="box-b-R">
+        <div class="t-text">{{ option.bottom.labelR }}</div>
+        <div class="t-val">
+          <span class="val-text">{{ option.bottom.valueR }}</span>
+          <span class="val-text">{{ option.bottom.dwR }}</span>
+        </div>
+      </div>
+      <div class="box-icon">
+         <SvgIcon class="icon-style" size="38" name="yali" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { SvgIcon } from '/@/components/Icon';
+
+let props = defineProps({
+  option: {
+    type: Object
+  },
+  upDownData: {
+    type: Object
+  }
+})
+
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .upDown {
+    --image-model_updown_up: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/4-1.png');
+    --image-model_updown_down: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/4-2.png');
+  }
+}
+
+.upDown {
+  --image-model_updown_up: url('@/assets/images/gasInjection/4-1.png');
+  --image-model_updown_down: url('@/assets/images/gasInjection/4-2.png');
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+
+  .up-box {
+    position: relative;
+    width: 344px;
+    height: 96px;
+    margin-bottom: 10px;
+    background: var(--image-model_updown_up) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .down-box {
+    position: relative;
+    width: 344px;
+    height: 96px;
+    background: var(--image-model_updown_down) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .box-t-L {
+    position: absolute;
+    left: 47px;
+    top: 33px;
+  }
+
+  .box-t-R {
+    position: absolute;
+    right: 33px;
+    top: 33px;
+  }
+
+  .box-b-L {
+   position: absolute;
+    width: 120px;
+    left: 6px;
+    top: 23px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .box-b-R {
+   width: 120px;
+    position: absolute;
+    right: 4px;
+    top: 23px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .t-icon {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    background-color: red;
+    border-radius: 50%;
+    margin-right: 5px;
+  }
+
+  .t-text {
+    font-size: 12px;
+    color: #c3f5ff;
+    margin-bottom: 4px;
+  }
+
+  .val-text {
+    font-family: 'douyuFont';
+    font-size: 13px;
+    color: #91faff;
+    margin-right: 5px;
+  }
+  .box-icon{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+  }
+}
+</style>

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

@@ -4,6 +4,394 @@ import { fanControlState1 } from '../../monitorManager/fanLocalMonitor1/fanLocal
 // import { BDdustMock, BDfireMock } from './configurable.data.bd';
 import { getThemifyImagesURL } from '/@/utils/ui';
 
+export const testConfigGasInject: Config[] = [
+  {
+    deviceType: 'zy_device',
+    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: 'upDown',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      list: [],
+      chart: [],
+      table: [],
+      gallery: [],
+      complex_list: [],
+      gallery_list: [],
+      preset: [
+        {
+          readFrom: '',
+          items: {
+            option: {
+              top: {
+                labelL: '进气阀',
+                valueL: '开启',
+                labelR: '出气阀',
+                valueR: '关闭'
+              },
+              bottom: {
+                labelL: '进气压力',
+                valueL: '0.3',
+                dwL: 'mPa',
+                labelR: '出气压力',
+                valueR: '0.5',
+                dwR: 'mPa',
+              },
+
+            },
+          },
+        }
+      ],
+      to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=fanmain',
+    },
+    showStyle: {
+      size: 'width:440px;height:250px;',
+      version: '注气',
+      position: 'top:100px;left:10;',
+    },
+  },
+  {
+    deviceType: 'cc_gas',
+    moduleName: '抽采支管瓦斯浓度',
+    pageType: 'gas_injection',
+    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: 'chart',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      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',
+            },
+          ],
+        },
+      ],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+      // mock: BDdustMock,
+    },
+    showStyle: {
+      size: 'width:440px;height:220px;',
+      version: '注气',
+      position: 'top:370px;left:10px;',
+    },
+  },
+  {
+    deviceType: 'cc_gas_ll',
+    moduleName: '抽采支管瓦斯流量',
+    pageType: 'gas_injection',
+    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: 'chart_inject',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [
+        {
+          readFrom: '',
+        }
+      ],
+      // mock: BDdustMock,
+    },
+    showStyle: {
+      size: 'width:440px;height:230px;',
+      version: '注气',
+      position: 'top:610px;left:10px;',
+    },
+  },
+  {
+    deviceType: 'work-info',
+    moduleName: '工作面信息',
+    pageType: 'gas_injection',
+    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_list',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [
+        {
+          readFrom: '',
+        }
+      ],
+    },
+    showStyle: {
+      size: 'width:440px;height:360px;',
+      version: '注气',
+      position: 'top:10px;right:10px;',
+    },
+  },
+  {
+    deviceType: 'zy-device-status',
+    moduleName: '增压装备运行监测',
+    pageType: 'gas_injection',
+    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_zy_chart',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [
+        {
+          readFrom: '',
+        }
+      ],
+    },
+    showStyle: {
+      size: 'width:440px;height:210px;',
+      version: '注气',
+      position: 'top:390px;right:10px;',
+    },
+  },
+    {
+    deviceType: 'warn-info',
+    moduleName: '数据异常信息显示',
+    pageType: 'gas_injection',
+    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_list',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [
+        {
+          readFrom: '',
+        }
+      ],
+    },
+    showStyle: {
+      size: 'width:440px;height:220px;',
+      version: '注气',
+      position: 'top:620px;right:10px;',
+    },
+  },
+   {
+    deviceType: 'zq-infos',
+    moduleName: '注气压力/流量',
+    pageType: 'gas_injection',
+    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_list',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [
+        {
+          readFrom: '',
+        }
+      ],
+    },
+    showStyle: {
+      size: 'width:1035px;height:260px;',
+      version: '注气',
+      position: 'bottom:22px;left:440px;',
+    },
+  },
+]
+
 export const testConfigVentSsl: Config[] = [
   {
     deviceType: 'fanmain',

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

@@ -0,0 +1,175 @@
+<template>
+  <div class="company-home">
+    <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
+      <VentModal />
+    </div>
+    <div class="top-bg">
+      <div class="main-title">{{ mainTitle }}</div>
+    </div>
+    <div class="main-container">
+      <div class="nav-cards">
+        <navMenu @toggleMenu="toggleMenu"></navMenu>
+      </div>
+      <template v-if="menuName == 'zjm'">
+        <div class="main-status">
+          运行中
+        </div>
+        <ModuleGasInject 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" />
+      </template>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import { useInitConfigs, useInitPage } from './hooks/useInit';
+import ModuleGasInject from './components/ModuleGasInject.vue';
+import navMenu from './components/gasInject/navMenu.vue'
+// import { useRoute } from 'vue-router';
+import VentModal from '/@/components/vent/micro/ventModal.vue';
+import { getHomeData } from './configurable.api';
+// import { useRoute } from 'vue-router';
+import { testConfigGasInject } from './configurable.data';
+const { configs, fetchConfigs } = useInitConfigs();
+const { mainTitle, data, updateData } = useInitPage('注气驱替智能管控系统');
+// const route = useRoute();
+let interval: number | undefined;
+let menuName = ref('zjm')
+
+
+//选项切换
+function toggleMenu(param) {
+  menuName.value = param
+}
+onMounted(() => {
+  // fetchConfigs('vent_new').then(() => {
+  configs.value = testConfigGasInject;
+  // updateEnhancedConfigs(configs.value);
+
+  getHomeData({}).then(updateData);
+  // });
+  setInterval(() => {
+    getHomeData({}).then(updateData);
+  }, 60000);
+});
+
+onUnmounted(() => {
+  clearInterval(interval);
+});
+</script>
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .company-home {
+    --image-modal-top: url('@/assets/images/gasInjection/1-1.png');
+    --image-modal-status: url('@/assets/images/gasInjection/3-1.png');
+    --image-modal-center: url('@/assets/images/gasInjection/1-2.png');
+  }
+}
+
+.company-home {
+  --image-modal-top: url('@/assets/images/gasInjection/1-1.png');
+  --image-modal-status: url('@/assets/images/gasInjection/3-1.png');
+  --image-modal-center: url('@/assets/images/gasInjection/1-2.png');
+  width: 100%;
+  height: 100%;
+  color: @white;
+  position: relative;
+  background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
+
+  .top-bg {
+    width: 100%;
+    height: 66px;
+    background: var(--image-modal-top) no-repeat center;
+    background-size: 100% 100%;
+    position: absolute;
+    z-index: 1;
+
+    .main-title {
+      height: 66px;
+      font-family: 'douyuFont';
+      font-size: 20px;
+      letter-spacing: 2px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .top-nav {
+      position: absolute;
+      top: 0;
+      width: 880px;
+      height: 100%;
+      display: flex;
+      justify-content: flex-start;
+    }
+  }
+
+  .main-container {
+    position: absolute;
+    top: 66px;
+    width: 100%;
+    height: calc(100% - 66px);
+    padding: 0px 10px;
+    box-sizing: border-box;
+  }
+
+  .main-status {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 440px;
+    height: 80px;
+    font-size: 18px;
+    font-family: 'douyuFont';
+    margin: 10px 0px;
+    background: var(--image-modal-status);
+    background-size: 100% 100%;
+  }
+
+
+  .module-dropdown {
+    padding: 10px;
+    background-image: @vent-configurable-dropdown;
+    border-bottom: 2px solid @vent-configurable-home-light-border;
+    color: @vent-font-color;
+    position: absolute;
+    top: 70px;
+    right: 460px;
+  }
+
+  .module-dropdown-original {
+    padding: 10px;
+    background-image: @vent-configurable-dropdown;
+    border-bottom: 2px solid @vent-configurable-home-light-border;
+    color: @vent-font-color;
+    position: absolute;
+    top: 70px;
+    right: 460px;
+  }
+
+  .module-trigger-button {
+    color: @vent-font-color;
+    background-image: @vent-configurable-dropdown;
+    border: none;
+    border-bottom: 2px solid @vent-configurable-home-light-border;
+  }
+
+  .nav-cards {
+    position: absolute;
+    left: 50%;
+    top: 0px;
+    transform: translate(-50%, 0);
+    width: 691px;
+    height: 58px;
+    background: var(--image-modal-center) no-repeat;
+    background-size: 100% 100%;
+  }
+}
+
+:deep(.loading-box) {
+  position: unset;
+}
+</style>

src/views/vent/home/configurable/hooks/useInit.ts

@@ -40,6 +40,11 @@ export function useInitConfigs() {
       return c.showStyle.version === '普通版';
     });
   });
+  const isGasInject = computed(() => {
+    return configs.value.some((c) => {
+      return c.showStyle.version === '注气';
+    });
+  });
   const isBD = computed(() => {
     return configs.value.some((c) => {
       return c.showStyle.version === '保德';
@@ -72,6 +77,7 @@ export function useInitConfigs() {
     devicesTypes,
     isOriginal,
     isCommon,
+    isGasInject,
     isBD,
     isNew,
   };