主模块，注气系统首页-提交

src/assets/icons/ch4-gas.svg

@@ -0,0 +1,45 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42.389" height="34.155" viewBox="0 0 42.389 34.155">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#a6e0ff"/>
+      <stop offset="0.449" stop-color="#fff"/>
+      <stop offset="1" stop-color="#90e0ff"/>
+    </linearGradient>
+    <filter id="路径_57850" x="0" y="4.887" width="18.831" height="29.269" filterUnits="userSpaceOnUse">
+      <feOffset dx="-3" dy="-2" input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="1" result="blur"/>
+      <feFlood flood-color="#04756d" flood-opacity="0.51"/>
+      <feComposite operator="in" in2="blur"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+    <filter id="路径_57851" x="13.823" y="0" width="18.828" height="31.778" filterUnits="userSpaceOnUse">
+      <feOffset dx="-3" dy="-2" input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="1" result="blur-2"/>
+      <feFlood flood-color="#04756d" flood-opacity="0.51"/>
+      <feComposite operator="in" in2="blur-2"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+    <filter id="路径_57852" x="27.269" y="10.198" width="15.12" height="17.348" filterUnits="userSpaceOnUse">
+      <feOffset dx="-3" dy="-2" input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="1" result="blur-3"/>
+      <feFlood flood-color="#04756d" flood-opacity="0.51"/>
+      <feComposite operator="in" in2="blur-3"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+  </defs>
+  <g id="CH_" data-name="CH " transform="translate(-1110.76 -574.492)">
+    <g id="组_16566" data-name="组 16566" transform="translate(1116.76 579.492)">
+      <g transform="matrix(1, 0, 0, 1, -6, -5)" filter="url(#路径_57850)">
+        <path id="路径_57850-2" data-name="路径 57850" d="M1119.519,614.266a3.822,3.822,0,0,1-2.015-1.474,4.324,4.324,0,0,1-.744-2.549V598.826a6.4,6.4,0,0,1,.744-2.942,8.2,8.2,0,0,1,2.015-2.535,6.975,6.975,0,0,1,2.758-1.47l1.822-.48a4.833,4.833,0,0,1,2.758.018,3.754,3.754,0,0,1,2,1.477,4.4,4.4,0,0,1,.729,2.554v.692l-2.515.662v-.693a2.218,2.218,0,0,0-2.976-2.193l-1.822.48a3.905,3.905,0,0,0-2.116,1.429,3.723,3.723,0,0,0-.859,2.331v11.417a2.2,2.2,0,0,0,.859,1.877,2.353,2.353,0,0,0,2.116.315l1.822-.48a4.143,4.143,0,0,0,2.976-3.76v-.693l2.515-.662v.692a6.453,6.453,0,0,1-.729,2.937,8.046,8.046,0,0,1-2,2.532,6.984,6.984,0,0,1-2.758,1.471l-1.822.48A4.832,4.832,0,0,1,1119.519,614.266Z" transform="translate(-1110.76 -581.32)" fill="url(#linear-gradient)"/>
+      </g>
+      <g transform="matrix(1, 0, 0, 1, -6, -5)" filter="url(#路径_57851)">
+        <path id="路径_57851-2" data-name="路径 57851" d="M1149.9,582.87l2.54-.669v9.6l7.773-2.047v-9.6l2.515-.662v22.4l-2.515.662v-10.29l-7.773,2.047V604.6l-2.54.669Z" transform="translate(-1130.08 -574.49)" fill="url(#linear-gradient)"/>
+      </g>
+    </g>
+    <g id="组_16567" data-name="组 16567" transform="translate(1144.029 589.69)">
+      <g transform="matrix(1, 0, 0, 1, -33.27, -15.2)" filter="url(#路径_57852)">
+        <path id="路径_57852-2" data-name="路径 57852" d="M1191.256,612.017l-1.378.363v2.205l-2.668.7v-2.205l-5.074,1.336v-1.767a39.409,39.409,0,0,0,2.46-3.746,37.08,37.08,0,0,0,2.048-4.116l3.232-.851v6.5l1.378-.363Zm-4.046-.876V607.17q-.274.661-.614,1.334t-.7,1.287q-.364.616-.729,1.15a11.249,11.249,0,0,1-.689.921Z" transform="translate(-1148.87 -588.74)" fill="url(#linear-gradient)"/>
+      </g>
+    </g>
+  </g>
+</svg>

src/assets/icons/fameng.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21.464" height="18.241" viewBox="0 0 21.464 18.241">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#2cb5fd"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_57862" data-name="路径 57862" d="M14.093,90.23c-.624.44-.726.778-.726,2.292V93.8h5.525v2.046h2.967V93.8h5.014V92.522c0-1.484-.092-1.8-.675-2.282a1.155,1.155,0,0,0-.941-.327,2.291,2.291,0,0,0-.767.113,1.745,1.745,0,0,0-.839.921l-.072.3h-.911c-.778,0-.931-.031-.982-.184a1.578,1.578,0,0,0-2.609-.072c-.113.246-.133.256-1.259.256H16.682l-.092-.327a1.558,1.558,0,0,0-.542-.665,1.264,1.264,0,0,0-.982-.338,1.333,1.333,0,0,0-.972.317ZM17.562,97.8v.931l-.512.522a3.909,3.909,0,0,0-.573.706c-.051.164-.2.184-1.637.184a6.8,6.8,0,0,1-1.576-.092,3.544,3.544,0,0,0-.512-.6,4.069,4.069,0,0,0-2.2-1.126l-.563-.092v8.053h.338a3.18,3.18,0,0,0,1.627-.5l.5-.317h4.236l.46.471a5.261,5.261,0,0,0,1.228.839,3.081,3.081,0,0,0,2,.379,3.033,3.033,0,0,0,1.913-.338,6.279,6.279,0,0,0,1.218-.839l.542-.512h3.827l.747.348a5.167,5.167,0,0,0,1.3.409l.532.051V98.231l-.532.082A4.076,4.076,0,0,0,27.5,99.5l-.675.645H25.573a5.145,5.145,0,0,1-1.259-.082,3.909,3.909,0,0,0-.563-.706l-.563-.624V96.87H17.562V97.8Z" transform="translate(-9.49 -89.413)" stroke="rgba(0,0,0,0)" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/assets/icons/kaiguan.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17.856" height="15.749" viewBox="0 0 17.856 15.749">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#2cb5fd"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_57859" data-name="路径 57859" d="M183.309,224.922v-1.053h2.107v1.053h2.107v2.107h-2.107v1.053h-2.107v-1.053H170.667v-2.107Zm-5.268-5.268V218.6h2.107v1.053h7.375v2.107h-7.375v1.054h-2.107v-1.054h-7.375v-2.107Zm-5.268-5.268v-1.053h2.107v1.053h12.642v2.107H174.881v1.053h-2.107v-1.053h-2.107v-2.107Z" transform="translate(-170.167 -212.833)" stroke="rgba(0,0,0,0)" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/assets/icons/o2-gas.svg

@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34.097" height="36.484" viewBox="0 0 34.097 36.484">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#a6e0ff"/>
+      <stop offset="0.449" stop-color="#fff"/>
+      <stop offset="1" stop-color="#90e0ff"/>
+    </linearGradient>
+    <filter id="路径_57848" x="0" y="0" width="23.437" height="36.484" filterUnits="userSpaceOnUse">
+      <feOffset dx="-3" dy="-2" input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="1" result="blur"/>
+      <feFlood flood-color="#043175" flood-opacity="0.51"/>
+      <feComposite operator="in" in2="blur"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+    <filter id="路径_57849" x="18.169" y="11.003" width="15.929" height="22.089" filterUnits="userSpaceOnUse">
+      <feOffset dx="-3" dy="-2" input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="1" result="blur-2"/>
+      <feFlood flood-color="#043175" flood-opacity="0.51"/>
+      <feComposite operator="in" in2="blur-2"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+  </defs>
+  <g id="O_" data-name="O " transform="translate(-1086.261 -519.761)">
+    <g id="组_16564" data-name="组 16564" transform="translate(1092.261 524.761)">
+      <g transform="matrix(1, 0, 0, 1, -6, -5)" filter="url(#路径_57848)">
+        <path id="路径_57848-2" data-name="路径 57848" d="M1096.334,555.018a5.261,5.261,0,0,1-2.979-2.057,6.252,6.252,0,0,1-1.095-3.724V536.075a9.79,9.79,0,0,1,1.095-4.389,12.625,12.625,0,0,1,2.979-3.867,10.916,10.916,0,0,1,4.074-2.327l1.181-.359a7.125,7.125,0,0,1,4.056-.142,5.293,5.293,0,0,1,2.963,2.062,6.26,6.26,0,0,1,1.09,3.725v13.162a9.774,9.774,0,0,1-1.09,4.387,12.707,12.707,0,0,1-2.963,3.862,10.8,10.8,0,0,1-4.056,2.322l-1.181.359A7.219,7.219,0,0,1,1096.334,555.018Zm-.083-4.607a3.221,3.221,0,0,0,1.75,1.236,4.129,4.129,0,0,0,2.407-.074l1.181-.359a6.3,6.3,0,0,0,2.407-1.387,7.747,7.747,0,0,0,1.75-2.3,5.736,5.736,0,0,0,.655-2.59V531.78a3.65,3.65,0,0,0-.655-2.192,3.222,3.222,0,0,0-1.75-1.235,4.132,4.132,0,0,0-2.407.074l-1.181.359a6.29,6.29,0,0,0-2.407,1.388,7.747,7.747,0,0,0-1.75,2.3,5.754,5.754,0,0,0-.657,2.59v13.161a3.648,3.648,0,0,0,.656,2.19Z" transform="translate(-1086.26 -519.76)" fill="url(#linear-gradient)"/>
+      </g>
+    </g>
+    <g id="组_16565" data-name="组 16565" transform="translate(1110.429 535.764)">
+      <g transform="matrix(1, 0, 0, 1, -24.17, -16)" filter="url(#路径_57849)">
+        <path id="路径_57849-2" data-name="路径 57849" d="M1144.7,563.577l-9.927,3.015v-1.38a5.463,5.463,0,0,1,.443-2.207,9.488,9.488,0,0,1,1.1-1.9,17.615,17.615,0,0,1,1.429-1.683q.773-.8,1.43-1.552a10.513,10.513,0,0,0,1.1-1.485,2.91,2.91,0,0,0,.444-1.524.928.928,0,0,0-.46-.919,1.708,1.708,0,0,0-1.249.009,5.4,5.4,0,0,0-.872.363,8.411,8.411,0,0,0-.945.567,10.013,10.013,0,0,0-.9.7,5.492,5.492,0,0,0-.748.786v-3.188a9.354,9.354,0,0,1,2-1.489,11.509,11.509,0,0,1,2.1-.877,6.553,6.553,0,0,1,1.907-.307,3.254,3.254,0,0,1,1.537.35,2.52,2.52,0,0,1,1.028,1.019,3.476,3.476,0,0,1,.378,1.709,4.611,4.611,0,0,1-.419,1.869,11.6,11.6,0,0,1-1.045,1.861,18.666,18.666,0,0,1-1.347,1.74q-.726.83-1.348,1.493c-.417.446-.765.824-1.045,1.14s-.417.537-.417.672v.065l5.817-1.767Z" transform="translate(-1110.6 -534.5)" fill="url(#linear-gradient)"/>
+      </g>
+    </g>
+  </g>
+</svg>

src/assets/icons/temp-gas.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26.266" height="42.32" viewBox="0 0 26.266 42.32">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#a6e0ff"/>
+      <stop offset="0.449" stop-color="#fff"/>
+      <stop offset="1" stop-color="#90e0ff"/>
+    </linearGradient>
+    <filter id="路径_55369" x="0" y="0" width="26.266" height="42.32" filterUnits="userSpaceOnUse">
+      <feOffset dx="-3" dy="-2" input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="1" result="blur"/>
+      <feFlood flood-color="#04756d" flood-opacity="0.51"/>
+      <feComposite operator="in" in2="blur"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+  </defs>
+  <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#路径_55369)">
+    <path id="路径_55369-2" data-name="路径 55369" d="M1180.215,579.578v-9.309c0-.567-.46-.809-1.027-.539l-.082.039a1.818,1.818,0,0,0-1,1.469v9.34a6.517,6.517,0,0,0-2.653,4.708c-.06,2.075,1.551,3.017,3.6,2.1a6.8,6.8,0,0,0,3.814-5.411,2.132,2.132,0,0,0-2.653-2.4Zm5.453-6.718a.533.533,0,0,1-.366-.538V561.8c-.073-3.357-2.882-4.711-6.273-3.026-3.288,1.634-5.938,5.544-6.009,8.866v10.228a2.336,2.336,0,0,1-.5,1.359,15.836,15.836,0,0,0-3.491,9.122c.216,5.494,4.929,7.614,10.525,4.736,5.292-2.721,9.536-8.984,9.741-14.373-.006-2.94-1.34-5.089-3.63-5.848Zm-6.507,17.42c-3.78,1.845-6.885.3-6.941-3.454a11.406,11.406,0,0,1,3.243-7.249l.492-.535a.922.922,0,0,0,.258-.583v-12.34a5.418,5.418,0,0,1,3.044-4.307c1.559-.693,2.812-.036,2.86,1.5v12.339a.31.31,0,0,0,.258.338l.492.068c2,.251,3.233,1.831,3.24,4.166-.059,3.808-3.164,8.3-6.944,10.057Z" transform="translate(-1163.03 -553.05)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

src/assets/icons/wind-gas.svg

@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36.692" height="35.292" viewBox="0 0 36.692 35.292">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#a6e0ff"/>
+      <stop offset="0.449" stop-color="#fff"/>
+      <stop offset="1" stop-color="#90e0ff"/>
+    </linearGradient>
+    <filter id="路径_55281" x="2.129" y="0" width="30.675" height="35.292" filterUnits="userSpaceOnUse">
+      <feOffset dx="-3" dy="-2" input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="1" result="blur"/>
+      <feFlood flood-color="#043175" flood-opacity="0.51"/>
+      <feComposite operator="in" in2="blur"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+    <filter id="路径_55282" x="0" y="2.425" width="36.692" height="25.337" filterUnits="userSpaceOnUse">
+      <feOffset dx="-3" dy="-2" input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="1" result="blur-2"/>
+      <feFlood flood-color="#043175" flood-opacity="0.51"/>
+      <feComposite operator="in" in2="blur-2"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+  </defs>
+  <g id="组_16590" data-name="组 16590" transform="translate(-1113.382 -539.378)">
+    <g transform="matrix(1, 0, 0, 1, 1113.38, 539.38)" filter="url(#路径_55281)">
+      <path id="路径_55281-2" data-name="路径 55281" d="M1125.136,559.715l11.4-3.7a8.528,8.528,0,0,0,5.714-7.468c.028-3.137-2.484-4.878-5.612-3.891a8.4,8.4,0,0,0-4,2.906,8.856,8.856,0,0,0-1.245,2.2c-.335.9.03,1.685.817,1.765a2.185,2.185,0,0,0,2.03-1.475h0a3.6,3.6,0,0,1,3.393-2.406c1.3.156,1.88,1.486,1.3,2.97a3.961,3.961,0,0,1-2.385,2.3l-11.409,3.706a2.331,2.331,0,0,0-1.549,2.052,1.086,1.086,0,0,0,1.549,1.045Zm.509,8.094.022,1.541Zm16.948-5.756-14.7,4.99-.705.24a2.327,2.327,0,0,0-1.525,2.068,1.089,1.089,0,0,0,1.573,1.014l.705-.24c4.293-1.459,14.285-4.854,14.66-4.978a1.8,1.8,0,0,1,2.556,1.75,3.865,3.865,0,0,1-2.58,3.394,1.842,1.842,0,0,1-2.339-.776c-.33-.682-1.236-.758-2.024-.173a2.023,2.023,0,0,0-.83,2.294l.014.028a3.5,3.5,0,0,0,1.244,1.39c2.24,1.456,5.827.246,8.01-2.7s2.138-6.521-.1-7.978a4.589,4.589,0,0,0-3.953-.324Z" transform="translate(-1115.46 -539.38)" fill="url(#linear-gradient)"/>
+    </g>
+    <g transform="matrix(1, 0, 0, 1, 1113.38, 539.38)" filter="url(#路径_55282)">
+      <path id="路径_55282-2" data-name="路径 55282" d="M1146.521,549.169a2.2,2.2,0,0,0-1.979,1.528,1.81,1.81,0,0,0-.1.572v.05a1.024,1.024,0,0,0,.949,1.105c1.318.1,1.961,1.383,1.436,2.872a3.97,3.97,0,0,1-2.388,2.394l-23.507,7.636a2.33,2.33,0,0,0-1.549,2.052,1.087,1.087,0,0,0,1.549,1.046l23.51-7.637a8.529,8.529,0,0,0,5.633-7.541,3.807,3.807,0,0,0-3.553-4.068Z" transform="translate(-1113.38 -541.74)" fill="url(#linear-gradient)"/>
+    </g>
+  </g>
+</svg>

src/assets/icons/yalishezhi.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="19.311" height="22.948" viewBox="0 0 19.311 22.948">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#2cb5fd"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_57860" data-name="路径 57860" d="M262.485,209.853a9.17,9.17,0,0,1,2.687-6.474,9.509,9.509,0,0,1,2.925-1.95,8.842,8.842,0,0,1,3.55-.725,8.946,8.946,0,0,1,3.562.725,9.025,9.025,0,0,1,4.862,4.862A9.09,9.09,0,0,1,279,215.278a9.058,9.058,0,0,1-4.637,3.262v4.112h-5.3V218.59a8.976,8.976,0,0,1-4.737-3.262,8.817,8.817,0,0,1-1.837-5.475Zm2.012,0a6.738,6.738,0,0,0,2.112,4.987,6.816,6.816,0,0,0,5.025,2.1,6.957,6.957,0,0,0,3.575-.95,7.2,7.2,0,0,0,2.612-2.587,6.924,6.924,0,0,0,.962-3.562A7.176,7.176,0,0,0,276.7,204.8a7.12,7.12,0,0,0-2.287-1.525,7.12,7.12,0,0,0-9.324,3.8,6.709,6.709,0,0,0-.587,2.775Zm.725.45v-.9h2.712v.9Zm1.362-4.425.65-.65,1.9,1.9-.65.662Zm3.162,6.162a1.929,1.929,0,0,1,.55-1.362,1.823,1.823,0,0,1,1.325-.6l3.412-5.612.825.437-2.525,6.037a1.816,1.816,0,0,1,.325,1.1,1.849,1.849,0,0,1-.575,1.387,1.934,1.934,0,0,1-1.4.562,1.921,1.921,0,0,1-1.937-1.95Zm1.637-5.837v-2.7h.862v2.712h-.862Zm3.675,4.087v-.925h2.712v.925Z" transform="translate(-261.985 -200.204)" stroke="rgba(0,0,0,0)" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

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

@@ -1,10 +0,0 @@
-<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

@@ -1,9 +0,0 @@
-<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

@@ -1,18 +0,0 @@
-<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/home/configurable/components/ModuleGasInject.vue

@@ -5,6 +5,7 @@
     :style="style"
     :title="moduleName"
     :visible="visible"
+    :visibleDetail="visibleDetail"
     :class="{ 'cursor-pointer': !!moduleData.to }"
     @close="$emit('close')"
     @click="redirectTo"
@@ -37,6 +38,7 @@
     data: any;
     moduleName: string;
     visible: boolean;
+    visibleDetail:boolean
   }>();
   defineEmits(['close', 'click']);
 

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

@@ -4,74 +4,40 @@
   <div class="content">
     <!-- 背景 -->
     <img v-if="background.show && background.type === 'image'" class="content__background" :src="background.link" />
-    <video
-      v-if="background.show && background.type === 'video' && background.isBoard"
-      class="content__background"
-      width="100%"
-      autoplay
-      loop
-      muted
-      disablepictureinpicture
-      playsinline
-    >
+    <video v-if="background.show && background.type === 'video' && background.isBoard" class="content__background"
+      width="100%" autoplay loop muted disablepictureinpicture playsinline>
       <source :src="background.link" />
       Not Supportted Link Or Browser
     </video>
-    <video
-      v-if="background.show && background.type === 'video' && !background.isBoard"
-      class="content__background_1"
-      width="100%"
-      autoplay
-      loop
-      muted
-      disablepictureinpicture
-      playsinline
-    >
+    <video v-if="background.show && background.type === 'video' && !background.isBoard" class="content__background_1"
+      width="100%" autoplay loop muted disablepictureinpicture playsinline>
       <source :src="background.link" />
       Not Supportted Link Or Browser
     </video>
     <div class="flex w-full h-full" :style="{ flexDirection: layout.direction }">
-      <div v-for="config in layoutConfig" :key="config.name" :style="{ flexBasis: config.basis, overflow: config.overflow ? 'auto' : 'none' }">
+      <div v-for="config in layoutConfig" :key="config.name"
+        :style="{ flexBasis: config.basis, overflow: config.overflow ? 'auto' : 'none' }">
         <!-- 告示板部分 -->
         <template v-if="config.name === 'board'">
-          <div
-            v-if="config.pageType == 'vent_New'"
-            style="padding-top: 11%"
-            class="content__module content__module1 flex flex-justify-around flex-items-center flex-wrap"
-          >
-            <MiniBoard
-              v-for="item in config.items"
-              :key="item.prop"
-              :label="item.label"
-              :value="item.value"
-              :type="config.type"
-              :layout="config.layout"
-            />
+          <div v-if="config.pageType == 'vent_New'" style="padding-top: 11%"
+            class="content__module content__module1 flex flex-justify-around flex-items-center flex-wrap">
+            <MiniBoard v-for="item in config.items" :key="item.prop" :label="item.label" :value="item.value"
+              :type="config.type" :layout="config.layout" />
           </div>
-          <div v-else-if="config.pageType == 'New_fire'" class="content__module flex flex-justify-around flex-items-center flex-wrap">
-            <MiniBoardNew
-              v-for="item in config.items"
-              :key="item.prop"
-              :label="item.label"
-              :value="item.value"
-              :type="config.type"
-              :layout="config.layout"
-            />
+          <div v-else-if="config.pageType == 'New_fire'"
+            class="content__module flex flex-justify-around flex-items-center flex-wrap">
+            <MiniBoardNew v-for="item in config.items" :key="item.prop" :label="item.label" :value="item.value"
+              :type="config.type" :layout="config.layout" />
           </div>
           <div v-else class="content__module flex flex-justify-around flex-items-center flex-wrap">
-            <MiniBoard
-              v-for="item in config.items"
-              :key="item.prop"
-              :label="item.label"
-              :value="item.value"
-              :type="config.type"
-              :layout="config.layout"
-            />
+            <MiniBoard v-for="item in config.items" :key="item.prop" :label="item.label" :value="item.value"
+              :type="config.type" :layout="config.layout" />
           </div>
         </template>
         <!-- 图表部分，这部分通常需要填充，有告示板、Header等内容需要填充父级 -->
         <template v-if="config.name === 'chart'">
-          <CustomChart v-if="config.pageType == 'New_dust'" class="content__module_dust" :chart-config="config.config" :chart-data="config.data" />
+          <CustomChart v-if="config.pageType == 'New_dust'" class="content__module_dust" :chart-config="config.config"
+            :chart-data="config.data" />
           <CustomChart v-else class="content__module" :chart-config="config.config" :chart-data="config.data" />
         </template>
         <!-- 通常列表部分 -->
@@ -95,7 +61,8 @@
         </template>
         <!-- 复杂列表部分 -->
         <template v-if="config.name === 'gallery_list'">
-          <GalleryList class="content__module" :type="config.type" :list-config="config.items" :gallery-config="config.galleryItems" />
+          <GalleryList class="content__module" :type="config.type" :list-config="config.items"
+            :gallery-config="config.galleryItems" />
         </template>
         <!-- 复杂列表部分 -->
         <template v-if="config.name === 'complex_list'">
@@ -103,28 +70,22 @@
         </template>
         <!-- 表格部分，这部分通常是占一整个模块的 -->
         <template v-if="config.name === 'table'">
-          <CustomTable
-            class="content__module text-center overflow-auto"
-            :type="config.type"
-            :columns="config.columns"
-            :auto-scroll="config.autoScroll"
-            :data="config.data"
-          />
+          <CustomTable class="content__module text-center overflow-auto" :type="config.type" :columns="config.columns"
+            :auto-scroll="config.autoScroll" :data="config.data" />
         </template>
         <template v-if="config.name === 'tabs'">
-          <CustomTabs class="content__module" :type="config.type" :tab-config="config.items" :overflow="config.overflow" />
+          <CustomTabs class="content__module" :type="config.type" :tab-config="config.items"
+            :overflow="config.overflow" />
         </template>
         <template v-if="config.name === 'blast_delta'">
-          <BlastDelta
-            v-if="config.pageType === 'New_fire'"
-            class="content__moduleFire"
-            :pos-monitor="config.data"
-            :canvasSize="{ width: 250, height: 200 }"
-          />
-          <BlastDelta v-else class="content__module" :pos-monitor="config.data" :canvasSize="{ width: 250, height: 200 }" />
+          <BlastDelta v-if="config.pageType === 'New_fire'" class="content__moduleFire" :pos-monitor="config.data"
+            :canvasSize="{ width: 250, height: 200 }" />
+          <BlastDelta v-else class="content__module" :pos-monitor="config.data"
+            :canvasSize="{ width: 250, height: 200 }" />
         </template>
         <template v-if="config.name === 'qh_curve'">
-          <QHCurve class="content__module" :mainfan="config.data" :fan1-prop="config.config.fan1Prop" :fan2-prop="config.config.fan2Prop" />
+          <QHCurve class="content__module" :mainfan="config.data" :fan1-prop="config.config.fan1Prop"
+            :fan2-prop="config.config.fan2Prop" />
         </template>
         <template v-if="config.name === 'ai_chat'">
           <AIChat class="content__module" />
@@ -137,13 +98,8 @@
           <SelectCs :devicedata="config.data" :config="config.config" />
         </template>
         <template v-if="config.name === 'measure_detail'">
-          <MeasureDetail
-            class="content__module"
-            :show-title="false"
-            :composite-data="config.data"
-            :topconfig="config.config.topconfig"
-            :btnconfig="config.config.btnconfig"
-          />
+          <MeasureDetail class="content__module" :show-title="false" :composite-data="config.data"
+            :topconfig="config.config.topconfig" :btnconfig="config.config.btnconfig" />
         </template>
         <template v-if="config.name === 'partition'">
           <Partition class="content__module" :type="config.type" :label="config.label" :icon="config.icon" />
@@ -155,7 +111,8 @@
           <RadioLabel class="content__module" :type="config.config.type" :config="config.config" />
         </template>
         <template v-if="config.name === 'button_list'">
-          <ButtonList class="content__module" :type="config.config.type" :config="config.config" :buttonList="config.config.buttonList" />
+          <ButtonList class="content__module" :type="config.config.type" :config="config.config"
+            :buttonList="config.config.buttonList" />
         </template>
         <template v-if="config.name === 'card_list'">
           <cardList class="content__module" :cardData="config.data" />
@@ -163,438 +120,458 @@
         <template v-else-if="config.name === 'generalist'">
           <generalList class="content__module" :generalData="config.data" />
         </template>
-          <template v-else-if="config.name === 'upDown'">
+        <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 v-else-if="config.name === 'chart_inject'">
+          <gasInjectChart class="content__module" :option="config.config.option" />
         </template>
-         <template v-else-if="config.name === 'gas_inject_list'">
-          <gasInjectList class="content__module"  :upDownData="config.data" />
+        <template v-else-if="config.name === 'gas_inject_list'">
+          <gasInjectList class="content__module" :option="config.config.option" :upDownData="config.data" />
         </template>
-          <template v-else-if="config.name === 'gas_zy_chart'">
-          <gasZyChart class="content__module"   />
+        <template v-else-if="config.name === 'gas_zy_chart'">
+          <gasZyChart class="content__module" />
+        </template>
+        <template v-else-if="config.name === 'gas_warn_chart'">
+          <gasWarnChart class="content__module" :option="config.config.option" />
+        </template>
+        <template v-else-if="config.name === 'gas_warn_list'">
+          <gasWarnList class="content__module" :option="config.config.option" />
+        </template>
+        <template v-else-if="config.name === 'gasdevice_status_control'">
+          <gasDeviceStatusControl class="content__module" :option="config.config.option" />
+        </template>
+        <template v-else-if="config.name === 'board_gas'">
+          <gasBoard class="content__module" :option="config.config.option" />
+        </template>
+         <template v-else-if="config.name === 'gas_inject_card'">
+          <gasInjectCard class="content__module" :option="config.config.option" />
         </template>
       </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed } from 'vue';
-  import {
-    CommonItem,
-    Config,
-    // ModuleDataBoard,
-    // ModuleDataChart,
-    // ModuleDataList,
-    // ModuleDataPreset,
-    // ModuleDataTable,
-  } from '../../../deviceManager/configurationTable/types';
-  import MiniBoard from './detail/MiniBoard.vue';
-  import TimelineList from './detail/TimelineList.vue';
-  import TimelineListNew from './detail/TimelineListNew.vue';
-  import CustomList from './detail/CustomList.vue';
-  import CustomGallery from './detail/CustomGallery.vue';
-  import ComplexList from './detail/ComplexList.vue';
-  import GalleryList from './detail/GalleryList.vue';
-  import CustomTable from './detail/CustomTable.vue';
-  import CustomChart from './detail/CustomChart.vue';
-  import { clone } from 'lodash-es';
-  import { getData, getFormattedText } from '../hooks/helper';
-  import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
-  import QHCurve from './preset/QHCurve.vue';
-  import MeasureDetail from './preset/MeasureDetail.vue';
-  import CustomTabs from './preset/CustomTabs.vue';
-  import AIChat from '/@/components/AIChat/MiniChat.vue';
-  import DeviceAlarm from './preset/DeviceAlarm.vue';
-  import SelectCs from './preset/SelectCs.vue';
-  import MiniBoardNew from './detail/MiniBoard-New.vue';
-  import Partition from './preset/partition.vue';
-  import SelectorDualChart from './preset/selectorDualChart.vue';
-  import RadioLabel from './preset/radioLabel.vue';
-  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 { computed } from 'vue';
+import {
+  CommonItem,
+  Config,
+  // ModuleDataBoard,
+  // ModuleDataChart,
+  // ModuleDataList,
+  // ModuleDataPreset,
+  // ModuleDataTable,
+} from '../../../deviceManager/configurationTable/types';
+import MiniBoard from './detail/MiniBoard.vue';
+import TimelineList from './detail/TimelineList.vue';
+import TimelineListNew from './detail/TimelineListNew.vue';
+import CustomList from './detail/CustomList.vue';
+import CustomGallery from './detail/CustomGallery.vue';
+import ComplexList from './detail/ComplexList.vue';
+import GalleryList from './detail/GalleryList.vue';
+import CustomTable from './detail/CustomTable.vue';
+import CustomChart from './detail/CustomChart.vue';
+import { clone } from 'lodash-es';
+import { getData, getFormattedText } from '../hooks/helper';
+import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
+import QHCurve from './preset/QHCurve.vue';
+import MeasureDetail from './preset/MeasureDetail.vue';
+import CustomTabs from './preset/CustomTabs.vue';
+import AIChat from '/@/components/AIChat/MiniChat.vue';
+import DeviceAlarm from './preset/DeviceAlarm.vue';
+import SelectCs from './preset/SelectCs.vue';
+import MiniBoardNew from './detail/MiniBoard-New.vue';
+import Partition from './preset/partition.vue';
+import SelectorDualChart from './preset/selectorDualChart.vue';
+import RadioLabel from './preset/radioLabel.vue';
+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 gasWarnChart from './preset/gasWarnChart.vue'
+import gasWarnList from './preset/gasWarnList.vue'
+import gasDeviceStatusControl from './preset/gasDeviceStatusControl.vue'
+import gasBoard from './preset/gasBoard.vue'
+import gasInjectCard from './preset/gasInjectCard.vue'
+// import FIreWarn from './preset/FIreWarn.vue';
+// import FIreControl from './preset/FIreControl.vue';
 
-  // import FIreWarn from './preset/FIreWarn.vue';
-  // import FIreControl from './preset/FIreControl.vue';
+const props = defineProps<{
+  data: any;
+  moduleData: Config['moduleData'];
+  chartData: any;
+}>();
 
-  const props = defineProps<{
-    data: any;
-    moduleData: Config['moduleData'];
-    chartData: any;
-  }>();
+const { background, layout } = props.moduleData;
 
-  const { background, layout } = props.moduleData;
+// 获取当原始配置带 items 项时的最终 items 配置
+function getItems(raw, items: CommonItem[]) {
+  return items.map((i) => {
+    return {
+      ...i,
+      label: getFormattedText(raw, i.label, i.trans),
+      value: getFormattedText(raw, i.value, i.trans),
+    };
+  });
+}
 
-  // 获取当原始配置带 items 项时的最终 items 配置
-  function getItems(raw, items: CommonItem[]) {
-    return items.map((i) => {
+// 获取当 List 组件配置带 items 项时的最终 items 配置
+function getListItems(raw: any, items: CommonItem[], mapFromData?: boolean) {
+  if (mapFromData && Array.isArray(raw)) {
+    return raw.map((data) => {
+      const item = items[0];
       return {
-        ...i,
-        label: getFormattedText(raw, i.label, i.trans),
-        value: getFormattedText(raw, i.value, i.trans),
+        ...item,
+        label: getFormattedText(data, item.label, item.trans),
+        value: getFormattedText(data, item.value, item.trans),
       };
     });
   }
+  return getItems(raw, items);
+}
 
-  // 获取当 List 组件配置带 items 项时的最终 items 配置
-  function getListItems(raw: any, items: CommonItem[], mapFromData?: boolean) {
-    if (mapFromData && Array.isArray(raw)) {
-      return raw.map((data) => {
-        const item = items[0];
-        return {
+/** 根据配置里的layout将配置格式化为带 key 的具体配置，例如：[{ key: 'list', value: any, ...ModuleDataList }] */
+const layoutConfig = computed(() => {
+  const refData = props.data;
+  const board = clone(props.moduleData.board) || [];
+  const list = clone(props.moduleData.list) || [];
+  const gallery = clone(props.moduleData.gallery) || [];
+  const complex_list = clone(props.moduleData.complex_list) || [];
+  const gallery_list = clone(props.moduleData.gallery_list) || [];
+  const tabs = clone(props.moduleData.tabs) || [];
+  const chart = clone(props.moduleData.chart) || [];
+  const table = clone(props.moduleData.table) || [];
+  const preset = clone(props.moduleData.preset) || [];
+  const partition = clone(props.moduleData.partition) || [];
+  const mockData = clone(props.chartData) || [];
+  return layout.items.reduce((arr: any[], item) => {
+    switch (item.name) {
+      case 'board': {
+        const cfg = board.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+
+        arr.push({
+          overflow: true,
           ...item,
-          label: getFormattedText(data, item.label, item.trans),
-          value: getFormattedText(data, item.value, item.trans),
-        };
-      });
-    }
-    return getItems(raw, items);
-  }
+          ...cfg,
+          items: getItems(data, cfg.items),
+        });
+        break;
+      }
+      case 'list': {
+        const cfg = list.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
 
-  /** 根据配置里的layout将配置格式化为带 key 的具体配置，例如：[{ key: 'list', value: any, ...ModuleDataList }] */
-  const layoutConfig = computed(() => {
-    const refData = props.data;
-    const board = clone(props.moduleData.board) || [];
-    const list = clone(props.moduleData.list) || [];
-    const gallery = clone(props.moduleData.gallery) || [];
-    const complex_list = clone(props.moduleData.complex_list) || [];
-    const gallery_list = clone(props.moduleData.gallery_list) || [];
-    const tabs = clone(props.moduleData.tabs) || [];
-    const chart = clone(props.moduleData.chart) || [];
-    const table = clone(props.moduleData.table) || [];
-    const preset = clone(props.moduleData.preset) || [];
-    const partition = clone(props.moduleData.partition) || [];
-    const mockData = clone(props.chartData) || [];
-    return layout.items.reduce((arr: any[], item) => {
-      switch (item.name) {
-        case 'board': {
-          const cfg = board.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
+        arr.push({
+          overflow: true,
+          ...item,
+          ...cfg,
+          items: getListItems(data, cfg.items, cfg.mapFromData),
+        });
+        break;
+      }
+      case 'gallery': {
+        const cfg = gallery.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+
+        arr.push({
+          overflow: true,
+          ...item,
+          ...cfg,
+          items: getItems(data, cfg.items),
+        });
+        break;
+      }
+      case 'complex_list': {
+        const cfg = complex_list.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
 
+        if (cfg.mapFromData) {
+          const firstListItem = cfg.items[0];
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: getItems(data, cfg.items),
+            items: (data || []).map((d) => {
+              return {
+                title: getFormattedText(d, firstListItem.title, firstListItem.trans),
+                contents: firstListItem.contents.map((e) => {
+                  return {
+                    ...e,
+                    label: getFormattedText(d, e.label, e.trans),
+                    value: getFormattedText(d, e.value, e.trans),
+                  };
+                }),
+              };
+            }),
           });
-          break;
-        }
-        case 'list': {
-          const cfg = list.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
-
+        } else {
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: getListItems(data, cfg.items, cfg.mapFromData),
+            items: cfg.items.map((i) => {
+              return {
+                title: getFormattedText(data, i.title, i.trans),
+                contents: i.contents.map((e) => {
+                  return {
+                    ...e,
+                    label: getFormattedText(data, e.label, e.trans),
+                    value: getFormattedText(data, e.value, e.trans),
+                  };
+                }),
+              };
+            }),
           });
-          break;
         }
-        case 'gallery': {
-          const cfg = gallery.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
+        break;
+      }
+      case 'gallery_list': {
+        const cfg = gallery_list.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+
+        arr.push({
+          overflow: true,
+          ...item,
+          ...cfg,
+          items: getItems(data, cfg.items),
+          galleryItems: getItems(data, cfg.galleryItems),
+        });
+        break;
+      }
+      case 'tabs': {
+        const cfg = tabs.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
 
+        if (cfg.mapFromData) {
+          const firstListItem = cfg.items[0];
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: getItems(data, cfg.items),
+            items: (data || []).map((d) => {
+              return {
+                title: getFormattedText(d, firstListItem.title, firstListItem.trans),
+                contents: firstListItem.contents.map((e) => {
+                  return {
+                    ...e,
+                    label: getFormattedText(d, e.label, e.trans),
+                    value: getFormattedText(d, e.value, e.trans),
+                  };
+                }),
+              };
+            }),
           });
-          break;
-        }
-        case 'complex_list': {
-          const cfg = complex_list.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
-
-          if (cfg.mapFromData) {
-            const firstListItem = cfg.items[0];
-            arr.push({
-              overflow: true,
-              ...item,
-              ...cfg,
-              items: (data || []).map((d) => {
-                return {
-                  title: getFormattedText(d, firstListItem.title, firstListItem.trans),
-                  contents: firstListItem.contents.map((e) => {
-                    return {
-                      ...e,
-                      label: getFormattedText(d, e.label, e.trans),
-                      value: getFormattedText(d, e.value, e.trans),
-                    };
-                  }),
-                };
-              }),
-            });
-          } else {
-            arr.push({
-              overflow: true,
-              ...item,
-              ...cfg,
-              items: cfg.items.map((i) => {
-                return {
-                  title: getFormattedText(data, i.title, i.trans),
-                  contents: i.contents.map((e) => {
-                    return {
-                      ...e,
-                      label: getFormattedText(data, e.label, e.trans),
-                      value: getFormattedText(data, e.value, e.trans),
-                    };
-                  }),
-                };
-              }),
-            });
-          }
-          break;
-        }
-        case 'gallery_list': {
-          const cfg = gallery_list.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
-
+        } else {
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: getItems(data, cfg.items),
-            galleryItems: getItems(data, cfg.galleryItems),
+            items: cfg.items.map((i) => {
+              return {
+                title: getFormattedText(data, i.title, i.trans),
+                contents: i.contents.map((e) => {
+                  return {
+                    ...e,
+                    label: getFormattedText(data, e.label, e.trans),
+                    value: getFormattedText(data, e.value, e.trans),
+                  };
+                }),
+              };
+            }),
           });
-          break;
         }
-        case 'tabs': {
-          const cfg = tabs.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
-
-          if (cfg.mapFromData) {
-            const firstListItem = cfg.items[0];
-            arr.push({
-              overflow: true,
-              ...item,
-              ...cfg,
-              items: (data || []).map((d) => {
-                return {
-                  title: getFormattedText(d, firstListItem.title, firstListItem.trans),
-                  contents: firstListItem.contents.map((e) => {
-                    return {
-                      ...e,
-                      label: getFormattedText(d, e.label, e.trans),
-                      value: getFormattedText(d, e.value, e.trans),
-                    };
-                  }),
-                };
-              }),
-            });
-          } else {
-            arr.push({
-              overflow: true,
-              ...item,
-              ...cfg,
-              items: cfg.items.map((i) => {
-                return {
-                  title: getFormattedText(data, i.title, i.trans),
-                  contents: i.contents.map((e) => {
-                    return {
-                      ...e,
-                      label: getFormattedText(data, e.label, e.trans),
-                      value: getFormattedText(data, e.value, e.trans),
-                    };
-                  }),
-                };
-              }),
-            });
-          }
-          break;
-        }
-        case 'chart': {
-          const cfg = chart.shift();
-          if (cfg?.type == 'scatter') {
-            if (!cfg) break;
-            const data = getData(mockData, cfg.readFrom, cfg.parser);
-
-            arr.push({
-              ...item,
-              config: cfg,
-              data,
-            });
-            break;
-          } else {
-            if (!cfg) break;
-            const data = getData(refData, cfg.readFrom, cfg.parser);
-            arr.push({
-              ...item,
-              config: cfg,
-              data,
-            });
-            break;
-          }
-        }
-        case 'table': {
-          const cfg = table.shift();
+        break;
+      }
+      case 'chart': {
+        const cfg = chart.shift();
+        if (cfg?.type == 'scatter') {
           if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
+          const data = getData(mockData, cfg.readFrom, cfg.parser);
 
           arr.push({
-            ...cfg,
             ...item,
-            columns: cfg.columns,
+            config: cfg,
             data,
           });
           break;
-        }
-        case 'partition': {
-          const cfg = partition.shift();
+        } else {
           if (!cfg) break;
           const data = getData(refData, cfg.readFrom, cfg.parser);
           arr.push({
-            overflow: true,
             ...item,
+            config: cfg,
             data,
-            ...cfg,
           });
           break;
         }
-        default: {
-          const cfg = preset.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
+      }
+      case 'table': {
+        const cfg = table.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
 
-          arr.push({
-            ...item,
-            data,
-            config: cfg,
-          });
-          break;
-        }
+        arr.push({
+          ...cfg,
+          ...item,
+          columns: cfg.columns,
+          data,
+        });
+        break;
       }
-      // console.log(arr,'arr---')
-      return arr;
-    }, []);
-  });
+      case 'partition': {
+        const cfg = partition.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+        arr.push({
+          overflow: true,
+          ...item,
+          data,
+          ...cfg,
+        });
+        break;
+      }
+      default: {
+        const cfg = preset.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+
+        arr.push({
+          ...item,
+          data,
+          config: cfg,
+        });
+        break;
+      }
+    }
+    // console.log(arr,'arr---')
+    return arr;
+  }, []);
+});
 </script>
 <style lang="less" scoped>
-  @import '@/design/theme.less';
+@import '@/design/theme.less';
 
-  .content {
-    height: calc(100% - 30px);
-    position: relative;
-    // z-index: -2;
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto; // 这里会导致样式无故添加滚动条
-    overflow-x: hidden;
-  }
+.content {
+  height: calc(100% - 30px);
+  position: relative;
+  // z-index: -2;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto; // 这里会导致样式无故添加滚动条
+  overflow-x: hidden;
+}
 
-  .content__background {
-    width: 100%;
-    // height: 100%;
-    height: calc(100% - 65px);
-    position: absolute;
-    top: 65px;
-    left: 0;
-    z-index: 0;
-    object-fit: fill;
-    padding: 5px;
-    box-sizing: border-box;
-  }
-  .content__background_1 {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0px;
-    left: 0;
-    z-index: 0;
-    object-fit: fill;
-  }
+.content__background {
+  width: 100%;
+  // height: 100%;
+  height: calc(100% - 65px);
+  position: absolute;
+  top: 65px;
+  left: 0;
+  z-index: 0;
+  object-fit: fill;
+  padding: 5px;
+  box-sizing: border-box;
+}
 
-  .image__background {
-    width: 35%;
-    height: 61%;
-    left: 30%;
-  }
+.content__background_1 {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0px;
+  left: 0;
+  z-index: 0;
+  object-fit: fill;
+}
 
-  .content__module {
-    // margin-top: 5px;
-    // margin-bottom: 5px;
-    width: 100%;
-    height: 100%;
-  }
+.image__background {
+  width: 35%;
+  height: 61%;
+  left: 30%;
+}
 
-  .content__module1 {
-    background: url('@/assets/images/vent/homeNew/databg/4.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    height: 129px;
-    margin-top: 20%;
-  }
+.content__module {
+  // margin-top: 5px;
+  // margin-bottom: 5px;
+  width: 100%;
+  height: 100%;
+}
 
-  .content__moduleFire {
-    width: 100%;
-    height: 100%;
-    margin-left: -24% !important;
-  }
+.content__module1 {
+  background: url('@/assets/images/vent/homeNew/databg/4.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  height: 129px;
+  margin-top: 20%;
+}
 
-  .content__module_dust {
-    background: url('@/assets/images/vent/homeNew/bottomBg.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    width: 100%;
-    height: 100%;
-  }
+.content__moduleFire {
+  width: 100%;
+  height: 100%;
+  margin-left: -24% !important;
+}
 
-  // .content__module:first-of-type {
-  //   margin-top: 0;
-  // }
-  // .content__module:last-of-type {
-  //   margin-bottom: 0;
-  // }
-  ::-webkit-scrollbar {
-    width: 5px !important;
-  }
+.content__module_dust {
+  background: url('@/assets/images/vent/homeNew/bottomBg.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+}
 
-  ::-webkit-scrollbar-thumb {
-    width: 5px !important;
-  }
+// .content__module:first-of-type {
+//   margin-top: 0;
+// }
+// .content__module:last-of-type {
+//   margin-bottom: 0;
+// }
+::-webkit-scrollbar {
+  width: 5px !important;
+}
 
-  :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
-    /* background-color: transparent; */
-    color: #fff;
-  }
+::-webkit-scrollbar-thumb {
+  width: 5px !important;
+}
 
-  :deep(.zxm-select-arrow) {
-    color: #fff;
-  }
+:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
+  /* background-color: transparent; */
+  color: #fff;
+}
 
-  :deep(.zxm-select-selection-item) {
-    color: #fff !important;
-  }
+:deep(.zxm-select-arrow) {
+  color: #fff;
+}
 
-  :deep(.zxm-select-selection-placeholder) {
-    color: #fff !important;
-  }
+:deep(.zxm-select-selection-item) {
+  color: #fff !important;
+}
 
-  :deep(.dialog-overlay) {
-    width: 100%;
-    height: 100%;
-    position: unset;
-    box-shadow: unset;
-  }
+:deep(.zxm-select-selection-placeholder) {
+  color: #fff !important;
+}
 
-  ::-webkit-scrollbar {
-    width: 5px !important;
-  }
+:deep(.dialog-overlay) {
+  width: 100%;
+  height: 100%;
+  position: unset;
+  box-shadow: unset;
+}
 
-  ::-webkit-scrollbar-thumb {
-    width: 5px !important;
-  }
+::-webkit-scrollbar {
+  width: 5px !important;
+}
+
+::-webkit-scrollbar-thumb {
+  width: 5px !important;
+}
 </style>

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

@@ -68,656 +68,771 @@
   </div>
 </template>
 <script lang="ts" setup>
-  withDefaults(
-    defineProps<{
-      label: string;
-      value?: string;
-      // 告示牌布局，类型为：'val-top' | 'label-top'
-      layout: string;
-      // 告示牌类型，类型为：'A' | 'B' | 'C' | 'D' | 'E' | 'F' |'New' | 'localFannew'
-      type?: string;
-    }>(),
-    {
-      value: '/',
-      type: 'A',
-      layout: 'val-top',
-    }
-  );
-
-  // 获取某些 value 对应的特殊的 装饰用的类名
-  function getValueDecoClass(value) {
-    switch (value) {
-      case '低风险':
-        return 'low_risk';
-      case '一般风险':
-        return 'risk';
-      case '较大风险':
-        return 'high_risk';
-      case '报警':
-        return 'warning';
-      default:
-        return '';
-    }
-  }
+withDefaults(
+  defineProps<{
+    label: string;
+    value?: string;
+    // 告示牌布局，类型为：'val-top' | 'label-top'
+    layout: string;
+    // 告示牌类型，类型为：'A' | 'B' | 'C' | 'D' | 'E' | 'F' |'New' | 'localFannew'
+    type?: string;
+  }>(),
+  {
+    value: '/',
+    type: 'A',
+    layout: 'val-top',
+  }
+);
+
+// 获取某些 value 对应的特殊的 装饰用的类名
+function getValueDecoClass(value) {
+  switch (value) {
+    case '低风险':
+      return 'low_risk';
+    case '一般风险':
+      return 'risk';
+    case '较大风险':
+      return 'high_risk';
+    case '报警':
+      return 'warning';
+    default:
+      return '';
+  }
+}
 
-  defineEmits(['click']);
+defineEmits(['click']);
 </script>
 <style lang="less" scoped>
-  @import '/@/design/theme.less';
-  @import '/@/design/theme.less';
-
-  @{theme-green} {
-    .mini-board {
-      // --image-areaNew: url('/@/assets/images/vent/homeNew/databg/1.png');
-      // --image-areaNew1: url('/@/assets/images/vent/homeNew/databg/2.png');
-      // --image-areaNew2: url('/@/assets/images/vent/homeNew/databg/3.png');
-      // --image-areaNew3: url('/@/assets/images/vent/homeNew/databg/8.png');
-      // --image-areaNew4: url('/@/assets/images/vent/homeNew/databg/7.png');
-      // --image-area3: url('/@/assets/images/themify/deepblue/company/area3.png');
-      // --image-areaR: url('/@/assets/images/themify/deepblue/company/areaR.png');
-      // --image-areaT: url('/@/assets/images/themify/deepblue/company/areaT.png');
-      // --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
-      // --image-value-S: url('/@/assets/images/themify/deepblue/vent/value-S.png');
-      // --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent/vent-param-bg.png');
-      // --image-mini-board-1: url('/@/assets/images/themify/deepblue/vent/home/mini-board-1.png');
-      // --image-board_bg_1: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_1.png');
-      --image-miehuo: url(/@/assets/images/themify/green/home-container/configurable/firehome/miehuo.png);
-      // --image-value-bg-2: url('/@/assets/images/themify/deepblue/vent/value-bg-2.png');
-      // --image-board_bg_3: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_3.png');
-      // --image-board_bg_2: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_2.png');
-      // --image-board_bg_5: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_5.png');
-      // --image-board_bg_4: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_4.png');
-      --image-hycd: url(/@/assets/images/themify/green/home-container/configurable/dusthome/hycd.png);
-      --image-dyfl: url(/@/assets/images/themify/green/home-container/configurable/dusthome/dyfl.png);
-      --image-jdjl: url(/@/assets/images/themify/green/home-container/configurable/dusthome/jdjl.png);
-    }
-    // type E 专用样式调整
-    .mini-board_E .mini-board__label {
-      height: 100px;
-      white-space: normal;
-    }
-    .mini-board_E:nth-child(1) {
-      background-image: var(--image-hycd);
-      .mini-board__label_E {
-        background-image: none;
-      }
-    }
-    .mini-board_E:nth-child(2) {
-      background-image: var(--image-dyfl);
-      .mini-board__label_E {
-        background-image: none;
-      }
+@import '/@/design/theme.less';
+@import '/@/design/theme.less';
+
+@{theme-green} {
+  .mini-board {
+    // --image-areaNew: url('/@/assets/images/vent/homeNew/databg/1.png');
+    // --image-areaNew1: url('/@/assets/images/vent/homeNew/databg/2.png');
+    // --image-areaNew2: url('/@/assets/images/vent/homeNew/databg/3.png');
+    // --image-areaNew3: url('/@/assets/images/vent/homeNew/databg/8.png');
+    // --image-areaNew4: url('/@/assets/images/vent/homeNew/databg/7.png');
+    // --image-area3: url('/@/assets/images/themify/deepblue/company/area3.png');
+    // --image-areaR: url('/@/assets/images/themify/deepblue/company/areaR.png');
+    // --image-areaT: url('/@/assets/images/themify/deepblue/company/areaT.png');
+    // --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
+    // --image-value-S: url('/@/assets/images/themify/deepblue/vent/value-S.png');
+    // --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent/vent-param-bg.png');
+    // --image-mini-board-1: url('/@/assets/images/themify/deepblue/vent/home/mini-board-1.png');
+    // --image-board_bg_1: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_1.png');
+    --image-miehuo: url(/@/assets/images/themify/green/home-container/configurable/firehome/miehuo.png);
+    // --image-value-bg-2: url('/@/assets/images/themify/deepblue/vent/value-bg-2.png');
+    // --image-board_bg_3: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_3.png');
+    // --image-board_bg_2: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_2.png');
+    // --image-board_bg_5: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_5.png');
+    // --image-board_bg_4: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_4.png');
+    --image-hycd: url(/@/assets/images/themify/green/home-container/configurable/dusthome/hycd.png);
+    --image-dyfl: url(/@/assets/images/themify/green/home-container/configurable/dusthome/dyfl.png);
+    --image-jdjl: url(/@/assets/images/themify/green/home-container/configurable/dusthome/jdjl.png);
+  }
+
+  // type E 专用样式调整
+  .mini-board_E .mini-board__label {
+    height: 100px;
+    white-space: normal;
+  }
+
+  .mini-board_E:nth-child(1) {
+    background-image: var(--image-hycd);
+
+    .mini-board__label_E {
+      background-image: none;
     }
-    .mini-board_E:nth-child(3) {
-      background-image: var(--image-jdjl);
-      .mini-board__label_E {
-        background-image: none;
-      }
+  }
+
+  .mini-board_E:nth-child(2) {
+    background-image: var(--image-dyfl);
+
+    .mini-board__label_E {
+      background-image: none;
     }
   }
-  @{theme-deepblue} {
-    .mini-board {
-      --image-areaNew: url('/@/assets/images/vent/homeNew/databg/1.png');
-      --image-areaNew1: url('/@/assets/images/vent/homeNew/databg/2.png');
-      --image-areaNew2: url('/@/assets/images/vent/homeNew/databg/3.png');
-      --image-areaNew3: url('/@/assets/images/vent/homeNew/databg/8.png');
-      --image-areaNew4: url('/@/assets/images/vent/homeNew/databg/7.png');
-      --image-area3: url('/@/assets/images/themify/deepblue/company/area3.png');
-      --image-areaR: url('/@/assets/images/themify/deepblue/company/areaR.png');
-      --image-areaT: url('/@/assets/images/themify/deepblue/company/areaT.png');
-      --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
-      --image-value-S: url('/@/assets/images/themify/deepblue/vent/value-S.png');
-      --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent/vent-param-bg.png');
-      --image-mini-board-1: url('/@/assets/images/themify/deepblue/vent/home/mini-board-1.png');
-      --image-board_bg_1: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_1.png');
-      --image-miehuo: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/miehuo.png');
-      --image-value-bg-2: url('/@/assets/images/themify/deepblue/vent/value-bg-2.png');
-      --image-board_bg_3: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_3.png');
-      --image-board_bg_2: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_2.png');
-      --image-board_bg_5: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_5.png');
-      --image-board_bg_4: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_4.png');
+
+  .mini-board_E:nth-child(3) {
+    background-image: var(--image-jdjl);
+
+    .mini-board__label_E {
+      background-image: none;
     }
   }
+}
 
+@{theme-deepblue} {
   .mini-board {
     --image-areaNew: url('/@/assets/images/vent/homeNew/databg/1.png');
     --image-areaNew1: url('/@/assets/images/vent/homeNew/databg/2.png');
     --image-areaNew2: url('/@/assets/images/vent/homeNew/databg/3.png');
     --image-areaNew3: url('/@/assets/images/vent/homeNew/databg/8.png');
     --image-areaNew4: url('/@/assets/images/vent/homeNew/databg/7.png');
-    --image-area3: url('/@/assets/images/company/area3.png');
-    --image-areaT: url('/@/assets/images/company/areaT.png');
-    --image-areaR: url('/@/assets/images/company/areaR.png');
-    --image-value-bg: url('/@/assets/images/vent/value-bg.png');
-    --image-value-S: url('/@/assets/images/vent/value-S.png');
-    --image-vent-param-bg: url('/@/assets/images/vent/vent-param-bg.png');
-    --image-mini-board-1: url('/@/assets/images/vent/home/mini-board-1.png');
-    --image-board_bg_1: url('/@/assets/images/home-container/configurable/board_bg_1.png');
-    --image-miehuo: url('/@/assets/images/home-container/configurable/firehome/miehuo.png');
-    --image-value-bg-2: url('/@/assets/images/vent/value-bg-2.png');
-    --image-board_bg_3: url('/@/assets/images/home-container/configurable/board_bg_3.png');
-    --image-board_bg_2: url('/@/assets/images/home-container/configurable/board_bg_2.png');
-    --image-board_bg_5: url('/@/assets/images/home-container/configurable/board_bg_5.png');
-    --image-board_bg_4: url('/@/assets/images/home-container/configurable/board_bg_4.png');
-    --image-board_bg_6: url('/@/assets/images/home-container/configurable/board_bg_6.png');
-    --image-board-bg-J: url('/@/assets/images/home-container/configurable/minehome/board-bg-j.png');
-    --image-board-bg-k1: url('/@/assets/images/home-container/configurable/minehome/board-bg-k1.png');
-    --image-board-bg-k2: url('/@/assets/images/home-container/configurable/minehome/board-bg-k2.png');
-    --image-board-bg-l1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-l1.png');
-    --image-board-bg-l2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-l2.png');
-    --image-board-bg-m1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-m1.png');
-    --image-board-bg-m2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-m2.png');
-    --image-board-bg-nl1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n1.png');
-    --image-board-bg-nr1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n2.png');
-    --image-board-bg-nl2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n3.png');
-    --image-board-bg-nr2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n4.png');
-    --image-board-bg-o: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-o.png');
-    --image-board_bg_7: url('/@/assets/images/home-container/configurable/board_bg_7.png');
-    --image-board_bg_8: url('/@/assets/images/home-container/configurable/board_bg_8.png');
-    --image-board_bg_9: url('/@/assets/images/home-container/configurable/board_bg_9.png');
-    --image-board_bg_10: url('/@/assets/images/home-container/configurable/board_bg_10.png');
-
-    --image-hycd: url(/@/assets/images/home-container/configurable/dusthome/hycd.png);
-    --image-dyfl: url(/@/assets/images/home-container/configurable/dusthome/dyfl.png);
-    --image-jdjl: url(/@/assets/images/home-container/configurable/dusthome/jdjl.png);
-    height: 50px;
-    line-height: 25px;
-    width: 130px;
-    padding: 0 5px 0 5px;
-    text-align: center;
-    background-size: 100% 100%;
-    position: relative;
-  }
+    --image-area3: url('/@/assets/images/themify/deepblue/company/area3.png');
+    --image-areaR: url('/@/assets/images/themify/deepblue/company/areaR.png');
+    --image-areaT: url('/@/assets/images/themify/deepblue/company/areaT.png');
+    --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
+    --image-value-S: url('/@/assets/images/themify/deepblue/vent/value-S.png');
+    --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent/vent-param-bg.png');
+    --image-mini-board-1: url('/@/assets/images/themify/deepblue/vent/home/mini-board-1.png');
+    --image-board_bg_1: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_1.png');
+    --image-miehuo: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/miehuo.png');
+    --image-value-bg-2: url('/@/assets/images/themify/deepblue/vent/value-bg-2.png');
+    --image-board_bg_3: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_3.png');
+    --image-board_bg_2: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_2.png');
+    --image-board_bg_5: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_5.png');
+    --image-board_bg_4: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_4.png');
+    --image-gas_board_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/7-2.png');
+    --image-gas_board_bg1: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/7-3.png');
+  }
+}
 
-  .mini-board__label {
-    white-space: nowrap;
-  }
-  .mini-board__value {
-    white-space: nowrap;
-  }
+.mini-board {
+  --image-areaNew: url('/@/assets/images/vent/homeNew/databg/1.png');
+  --image-areaNew1: url('/@/assets/images/vent/homeNew/databg/2.png');
+  --image-areaNew2: url('/@/assets/images/vent/homeNew/databg/3.png');
+  --image-areaNew3: url('/@/assets/images/vent/homeNew/databg/8.png');
+  --image-areaNew4: url('/@/assets/images/vent/homeNew/databg/7.png');
+  --image-area3: url('/@/assets/images/company/area3.png');
+  --image-areaT: url('/@/assets/images/company/areaT.png');
+  --image-areaR: url('/@/assets/images/company/areaR.png');
+  --image-value-bg: url('/@/assets/images/vent/value-bg.png');
+  --image-value-S: url('/@/assets/images/vent/value-S.png');
+  --image-vent-param-bg: url('/@/assets/images/vent/vent-param-bg.png');
+  --image-mini-board-1: url('/@/assets/images/vent/home/mini-board-1.png');
+  --image-board_bg_1: url('/@/assets/images/home-container/configurable/board_bg_1.png');
+  --image-miehuo: url('/@/assets/images/home-container/configurable/firehome/miehuo.png');
+  --image-value-bg-2: url('/@/assets/images/vent/value-bg-2.png');
+  --image-board_bg_3: url('/@/assets/images/home-container/configurable/board_bg_3.png');
+  --image-board_bg_2: url('/@/assets/images/home-container/configurable/board_bg_2.png');
+  --image-board_bg_5: url('/@/assets/images/home-container/configurable/board_bg_5.png');
+  --image-board_bg_4: url('/@/assets/images/home-container/configurable/board_bg_4.png');
+  --image-board_bg_6: url('/@/assets/images/home-container/configurable/board_bg_6.png');
+  --image-board-bg-J: url('/@/assets/images/home-container/configurable/minehome/board-bg-j.png');
+  --image-board-bg-k1: url('/@/assets/images/home-container/configurable/minehome/board-bg-k1.png');
+  --image-board-bg-k2: url('/@/assets/images/home-container/configurable/minehome/board-bg-k2.png');
+  --image-board-bg-l1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-l1.png');
+  --image-board-bg-l2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-l2.png');
+  --image-board-bg-m1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-m1.png');
+  --image-board-bg-m2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-m2.png');
+  --image-board-bg-nl1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n1.png');
+  --image-board-bg-nr1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n2.png');
+  --image-board-bg-nl2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n3.png');
+  --image-board-bg-nr2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n4.png');
+  --image-board-bg-o: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-o.png');
+  --image-board_bg_7: url('/@/assets/images/home-container/configurable/board_bg_7.png');
+  --image-board_bg_8: url('/@/assets/images/home-container/configurable/board_bg_8.png');
+  --image-board_bg_9: url('/@/assets/images/home-container/configurable/board_bg_9.png');
+  --image-board_bg_10: url('/@/assets/images/home-container/configurable/board_bg_10.png');
 
-  .mini-board_New {
-    width: 120px;
-    height: 60px;
-    background-image: var(--image-areaNew);
-    background-size: 100% 100%;
-  }
-  .mini-board_New1 {
-    width: 118px;
-    height: 60px;
-    background-image: var(--image-areaNew1);
-    background-size: 100% 100%;
-  }
-  .mini-board_New2 {
-    width: 93px;
-    height: 60px;
-    margin: 0px;
-    background-image: var(--image-areaNew2);
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-  }
-  .mini-board_New3 {
-    margin-bottom: 0;
-    width: 170px;
-    height: 50px;
-  }
-  .mini-board_New3_jin {
-    background-image: var(--image-areaNew3);
-    background-size: 100% 100%;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-  }
-  .mini-board_New3_hui {
-    background-image: var(--image-areaNew4);
-    background-size: 100% 100%;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-  }
+  --image-hycd: url(/@/assets/images/home-container/configurable/dusthome/hycd.png);
+  --image-dyfl: url(/@/assets/images/home-container/configurable/dusthome/dyfl.png);
+  --image-jdjl: url(/@/assets/images/home-container/configurable/dusthome/jdjl.png);
+  --image-gas_board_bg: url('@/assets/images/gasInjection/7-2.png');
+  --image-gas_board_bg1: url('@/assets/images/gasInjection/7-3.png');
+  height: 50px;
+  line-height: 25px;
+  width: 130px;
+  padding: 0 5px 0 5px;
+  text-align: center;
+  background-size: 100% 100%;
+  position: relative;
+}
 
-  .mini-board_A {
-    width: 120px;
-    height: 60px;
-    background-image: var(--image-area3);
-    background-size: 100% 100%;
-  }
-  .mini-board_B {
-    width: 131px;
-    height: 64px;
-    background-image: var(--image-value-bg);
-    background-size: auto 40px;
-    background-position: center bottom;
-    background-repeat: no-repeat;
-  }
-  .mini-board_R {
-    width: 120px;
-    height: 90px;
-    background-image: var(--image-areaR);
-    background-size: 100% 100%;
-    position: relative;
-    .mini-board__value_R {
-      position: absolute;
-      left: 30%;
-      top: 30%;
-      font-family: 'douyuFont';
-      color: @vent-gas-primary-text;
-    }
-    .mini-board__label_R {
-      position: absolute;
-      right: 0;
-      bottom: 20px;
-      font-size: 15px;
-    }
-  }
-  .mini-board_S {
-    width: 131px;
-    height: 64px;
-    background-image: var(--image-value-S);
-    background-size: auto 40px;
-    background-position: center bottom;
-    background-repeat: no-repeat;
-  }
-  .mini-board_T {
-    width: 120px;
-    height: 80px;
-    background-image: var(--image-areaT);
-    background-size: 100% 100%;
-  }
-  .mini-board__label_T {
-    margin-top: 15px;
-  }
-  .mini-board__value_T {
-    font-family: 'douyuFont';
-    color: @vent-gas-primary-text;
-    font-size: 12px;
-    height: 30px;
-    line-height: 30px;
-  }
+.mini-board__label {
+  white-space: nowrap;
+}
 
-  .mini-board_C {
-    width: 121px;
-    height: 69px;
-    background-image: var(--image-vent-param-bg);
-  }
-  .mini-board_D {
-    // width: 105px;
-    height: 58px;
-    background-image: var(--image-mini-board-1);
-    background-position: center bottom;
-    background-repeat: no-repeat;
-  }
-  .mini-board_E {
-    width: 30%;
-    height: 180px;
-    padding: 20px 5px;
-    background-image: var(--image-board_bg_1);
-    background-position: center bottom;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-  .mini-board_F {
-    width: 140px;
-    height: 70px;
-    background-image: var(--image-miehuo);
-    background-size: 100% 80%;
-    background-position: center bottom;
-    background-repeat: no-repeat;
-  }
-  .mini-board_G {
-    width: 98px;
-    height: 70px;
-    background-image: var(--image-value-bg-2);
-    background-size: 100% auto;
-    background-position: center bottom;
-    background-repeat: no-repeat;
-  }
-  .mini-board_H {
-    width: 174px;
-    height: 104px;
-    background-image: var(--image-board_bg_3);
-    background-size: 100% auto;
-    background-position: center bottom;
-    background-repeat: no-repeat;
-    padding: 45px 0 0 0;
-  }
-  .mini-board_I {
-    width: 139px;
-    height: 67px;
-    background-image: var(--image-board_bg_6);
-    background-size: 100% 100%;
-  }
+.mini-board__value {
+  white-space: nowrap;
+}
 
-  .mini-board_J {
-    width: 110px;
-    height: 58px;
-    background-image: var(--image-board-bg-J);
-    background-size: 100% 100%;
-  }
-  .mini-board_K {
-    width: 170px;
-    height: 70px;
-    background-size: 100% 100%;
-  }
-  /* 第一个mini-board_K使用k1背景 */
-  .mini-board_K:first-of-type {
-    background-image: var(--image-board-bg-k1);
-  }
+.mini-board_New {
+  width: 120px;
+  height: 60px;
+  background-image: var(--image-areaNew);
+  background-size: 100% 100%;
+}
 
-  /* 第二个mini-board_K使用k2背景 */
-  .mini-board_K:first-of-type + .mini-board_K {
-    background-image: var(--image-board-bg-k2);
-  }
+.mini-board_New1 {
+  width: 118px;
+  height: 60px;
+  background-image: var(--image-areaNew1);
+  background-size: 100% 100%;
+}
 
-  .mini-board_L {
-    width: 120px;
-    height: 100px;
-    background-size: 100% 100%;
-  }
-  .mini-board_L:nth-child(odd) {
-    background-image: var(--image-board-bg-l1);
-  }
-  .mini-board_L:nth-child(even) {
-    background-image: var(--image-board-bg-l2);
-  }
+.mini-board_New2 {
+  width: 93px;
+  height: 60px;
+  margin: 0px;
+  background-image: var(--image-areaNew2);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
 
-  .mini-board_M {
-    width: 180px;
-    height: 60px;
-    background-image: var(--image-board-bg-m1);
-    background-size: 100% 100%;
-    margin: 5px 0 15px 0;
-  }
-  .mini-board_M:nth-child(2),
-  .mini-board_M:nth-child(3),
-  .mini-board_M:nth-child(6),
-  .mini-board_M:nth-child(7) {
-    background-image: var(--image-board-bg-m2);
-    .mini-board__value_M {
-      color: #27cab7;
-    }
-  }
+.mini-board_New3 {
+  margin-bottom: 0;
+  width: 170px;
+  height: 50px;
+}
 
-  .mini-board_N {
-    width: 200px;
-    height: 68px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 25px 0 20px;
-    margin-top: -15px;
-    background-image: var(--image-board-bg-nl1);
-    background-size: 100% 100%;
-  }
-  .mini-board_N:nth-child(2) {
-    background-image: var(--image-board-bg-nr1);
-  }
-  .mini-board_N:nth-child(3) {
-    background-image: var(--image-board-bg-nl2);
-  }
-  .mini-board_N:nth-child(4) {
-    background-image: var(--image-board-bg-nr2);
-  }
-  .mini-board_N:nth-child(5) {
-    background-image: var(--image-board-bg-nl1);
-  }
-  .mini-board_N:nth-child(6) {
-    background-image: var(--image-board-bg-nr1);
-  }
+.mini-board_New3_jin {
+  background-image: var(--image-areaNew3);
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
 
-  .mini-board_O {
-    width: 110px;
-    height: 50px;
-    background-image: var(--image-board-bg-o);
-    background-size: 100% 100%;
-  }
+.mini-board_New3_hui {
+  background-image: var(--image-areaNew4);
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
 
-  .mini-board_P {
-    width: 97px;
-    height: 170px;
-    padding-top: 105px;
-    background-image: var(--image-board_bg_7), var(--image-board_bg_10);
-    background-size:
-      97px 105px,
-      100% 40px;
-    background-repeat: no-repeat;
-    background-position:
-      center top,
-      center bottom;
-  }
-  .mini-board_P:nth-of-type(2) {
-    width: 97px;
-    height: 170px;
-    padding-top: 105px;
-    background-image: var(--image-board_bg_8), var(--image-board_bg_9);
-    background-size:
-      97px 105px,
-      100% 40px;
-    background-repeat: no-repeat;
-    background-position:
-      center top,
-      center bottom;
-  }
+.mini-board_A {
+  width: 120px;
+  height: 60px;
+  background-image: var(--image-area3);
+  background-size: 100% 100%;
+}
 
-  .mini-board__value_New {
-    color: @vent-gas-primary-text;
-    font-size: 15px;
-    float: left;
-    margin: 0 0 0 13px;
-    font-weight: bold;
-    height: 30px;
-    line-height: 30px;
-  }
-  .mini-board__lable_New {
-    line-height: 24px;
-    height: 24px;
-  }
-  .mini-board__value_New1 {
-    color: @vent-gas-primary-text;
-    font-size: 16px;
-    float: left;
-    margin: 0 0 0 45%;
-    height: 30px;
-    line-height: 30px;
-  }
-  .mini-board__lable_New1 {
-    line-height: 24px;
-    height: 24px;
-  }
-  .mini-board__value_New2 {
-    color: @vent-gas-primary-text;
-    font-size: 15px;
-    font-weight: bold;
-    height: 30px;
-    line-height: 30px;
-  }
-  .mini-board__lable_New2 {
-    line-height: 24px;
-    height: 24px;
-  }
-  .mini-board__value_New3 {
-    color: #afe6f2;
-    font-size: 15px;
-    font-weight: bold;
-    margin-left: 10px;
-  }
-  .mini-board__lable_New3 {
-    color: #afe6f2;
-    height: 30px;
-    font-size: 10px;
-  }
-  .mini-board__value_A {
-    color: @vent-gas-primary-text;
-    font-size: 20px;
-    font-weight: bold;
-    height: 30px;
-    line-height: 30px;
-  }
+.mini-board_B {
+  width: 131px;
+  height: 64px;
+  background-image: var(--image-value-bg);
+  background-size: auto 40px;
+  background-position: center bottom;
+  background-repeat: no-repeat;
+}
 
-  .mini-board__value_B {
-    color: @vent-gas-primary-text;
-    font-size: 20px;
-    font-weight: bold;
-    height: 40px;
-    line-height: 40px;
-  }
-  .mini-board__label_B {
-    line-height: 24px;
-    height: 24px;
-  }
+.mini-board_R {
+  width: 120px;
+  height: 90px;
+  background-image: var(--image-areaR);
+  background-size: 100% 100%;
+  position: relative;
 
-  .mini-board__value_C {
+  .mini-board__value_R {
+    position: absolute;
+    left: 30%;
+    top: 30%;
+    font-family: 'douyuFont';
     color: @vent-gas-primary-text;
-    height: 40px;
-    line-height: 40px;
-    font-size: 20px;
-    font-weight: bold;
   }
 
-  .mini-board__value_D {
-    font-size: 20px;
-    font-weight: bold;
-    height: 40px;
-    line-height: 40px;
-  }
-  .mini-board__label_D {
-    line-height: 17px;
-    height: 17px;
-  }
-  .mini-board__value_E {
-    font-size: 19px;
-    font-weight: bold;
-  }
-  .mini-board__label_E {
-    line-height: 20px;
-    height: 90px;
-    padding-top: 30%;
-    background-repeat: no-repeat;
-    background-position: center top;
-    white-space: normal;
+  .mini-board__label_R {
+    position: absolute;
+    right: 0;
+    bottom: 20px;
+    font-size: 15px;
   }
+}
 
-  .mini-board__value_F {
-    font-size: 20px;
-    font-weight: bold;
-    color: @vent-gas-primary-text;
-  }
-  .mini-board__label_F {
-    line-height: 50px;
-  }
+.mini-board_S {
+  width: 131px;
+  height: 64px;
+  background-image: var(--image-value-S);
+  background-size: auto 40px;
+  background-position: center bottom;
+  background-repeat: no-repeat;
+}
 
-  .mini-board__value_G {
-    color: @vent-gas-primary-text;
-    font-size: 20px;
-    font-weight: bold;
-    height: 42px;
-    line-height: 42px;
-  }
-  .mini-board__label_G {
-    line-height: 20px;
-    height: 20px;
-  }
+.mini-board_T {
+  width: 120px;
+  height: 80px;
+  background-image: var(--image-areaT);
+  background-size: 100% 100%;
+}
 
-  .mini-board__value_J {
-    color: #b3ebf7;
-    font-size: 16px;
-    font-weight: bold;
-    height: 25px;
-    line-height: 25px;
-  }
-  .mini-board__label_J {
-    line-height: 20px;
-    height: 20px;
-  }
+.mini-board__label_T {
+  margin-top: 15px;
+}
 
-  .mini-board__value_K {
-    color: #fff;
-    font-family: 'douyuFont';
-    font-size: 16px;
-    // font-weight: bold;
-    height: 55px;
-    line-height: 55px;
-    padding-left: 60px;
-  }
-  .mini-board__label_K {
-    line-height: 21px;
-    height: 21px;
-    text-align: end;
-    font-size: 13px;
-  }
-  .mini-board__label_L {
-    line-height: 21px;
-    height: 21px;
-    text-align: center;
-    font-size: 14px;
-    margin-top: 30px;
-  }
-  .mini-board__value_L {
-    font-family: 'douyuFont';
-    color: @vent-gas-primary-text;
-    font-size: 14px;
-    height: 30px;
-    line-height: 30px;
-  }
+.mini-board__value_T {
+  font-family: 'douyuFont';
+  color: @vent-gas-primary-text;
+  font-size: 12px;
+  height: 30px;
+  line-height: 30px;
+}
 
-  .mini-board__label_M {
-    line-height: 21px;
-    height: 21px;
-    text-align: center;
-    font-size: 14px;
-  }
-  .mini-board__value_M {
-    font-family: 'douyuFont';
-    color: @vent-gas-primary-text;
-    font-size: 12px;
-    height: 23px;
-    margin-top: 5px;
-  }
+.mini-board_C {
+  width: 121px;
+  height: 69px;
+  background-image: var(--image-vent-param-bg);
+}
 
-  .mini-board__value_O {
-    font-family: 'douyuFont';
-    font-size: 11px;
-    color: @vent-gas-primary-text;
-  }
+.mini-board_D {
+  // width: 105px;
+  height: 58px;
+  background-image: var(--image-mini-board-1);
+  background-position: center bottom;
+  background-repeat: no-repeat;
+}
 
-  .mini-board__value_P {
-    font-family: 'douyuFont';
-    font-size: 20px;
-    margin-top: 10px;
+.mini-board_Gas {
+  width: 154px;
+  height: 68px;
+  background-position: center bottom;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  &:nth-child(1) {
+    background-image: var(--image-gas_board_bg);
+    .mini-board__value_Gas{
+      color: #2cffdd;
+    }
   }
 
-  .mini-board_E:nth-child(1) {
-    .mini-board__label_E {
-      background-image: var(--image-hycd);
+  &:nth-child(2) {
+    background-image: var(--image-gas_board_bg1);
+    .mini-board__value_Gas{
+      color: #91e0ff;
     }
   }
-  .mini-board_E:nth-child(2) {
-    .mini-board__label_E {
-      background-image: var(--image-dyfl);
+
+  &:nth-child(3) {
+    background-image: var(--image-gas_board_bg1);
+    .mini-board__value_Gas{
+      color: #91e0ff;
     }
   }
-  .mini-board_E:nth-child(3) {
-    .mini-board__label_E {
-      background-image: var(--image-jdjl);
+
+  &:nth-child(4) {
+    background-image: var(--image-gas_board_bg);
+    .mini-board__value_Gas{
+      color: #2cffdd;
     }
   }
+}
+.mini-board__label_Gas{
+  margin-bottom: 5px;
+}
+.mini-board__value_Gas{
+  font-size: 12px;
+   font-family: 'douyuFont';
+}
+
+.mini-board_E {
+  width: 30%;
+  height: 180px;
+  padding: 20px 5px;
+  background-image: var(--image-board_bg_1);
+  background-position: center bottom;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.mini-board_F {
+  width: 140px;
+  height: 70px;
+  background-image: var(--image-miehuo);
+  background-size: 100% 80%;
+  background-position: center bottom;
+  background-repeat: no-repeat;
+}
+
+.mini-board_G {
+  width: 98px;
+  height: 70px;
+  background-image: var(--image-value-bg-2);
+  background-size: 100% auto;
+  background-position: center bottom;
+  background-repeat: no-repeat;
+}
 
-  .mini-board_H_low_risk {
-    background-image: var(--image-board_bg_3);
+.mini-board_H {
+  width: 174px;
+  height: 104px;
+  background-image: var(--image-board_bg_3);
+  background-size: 100% auto;
+  background-position: center bottom;
+  background-repeat: no-repeat;
+  padding: 45px 0 0 0;
+}
+
+.mini-board_I {
+  width: 139px;
+  height: 67px;
+  background-image: var(--image-board_bg_6);
+  background-size: 100% 100%;
+}
+
+.mini-board_J {
+  width: 110px;
+  height: 58px;
+  background-image: var(--image-board-bg-J);
+  background-size: 100% 100%;
+}
+
+.mini-board_K {
+  width: 170px;
+  height: 70px;
+  background-size: 100% 100%;
+}
+
+/* 第一个mini-board_K使用k1背景 */
+.mini-board_K:first-of-type {
+  background-image: var(--image-board-bg-k1);
+}
+
+/* 第二个mini-board_K使用k2背景 */
+.mini-board_K:first-of-type+.mini-board_K {
+  background-image: var(--image-board-bg-k2);
+}
+
+.mini-board_L {
+  width: 120px;
+  height: 100px;
+  background-size: 100% 100%;
+}
+
+.mini-board_L:nth-child(odd) {
+  background-image: var(--image-board-bg-l1);
+}
+
+.mini-board_L:nth-child(even) {
+  background-image: var(--image-board-bg-l2);
+}
+
+.mini-board_M {
+  width: 180px;
+  height: 60px;
+  background-image: var(--image-board-bg-m1);
+  background-size: 100% 100%;
+  margin: 5px 0 15px 0;
+}
+
+.mini-board_M:nth-child(2),
+.mini-board_M:nth-child(3),
+.mini-board_M:nth-child(6),
+.mini-board_M:nth-child(7) {
+  background-image: var(--image-board-bg-m2);
+
+  .mini-board__value_M {
+    color: #27cab7;
   }
-  .mini-board_H_risk {
-    background-image: var(--image-board_bg_2);
+}
+
+.mini-board_N {
+  width: 200px;
+  height: 68px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 25px 0 20px;
+  margin-top: -15px;
+  background-image: var(--image-board-bg-nl1);
+  background-size: 100% 100%;
+}
+
+.mini-board_N:nth-child(2) {
+  background-image: var(--image-board-bg-nr1);
+}
+
+.mini-board_N:nth-child(3) {
+  background-image: var(--image-board-bg-nl2);
+}
+
+.mini-board_N:nth-child(4) {
+  background-image: var(--image-board-bg-nr2);
+}
+
+.mini-board_N:nth-child(5) {
+  background-image: var(--image-board-bg-nl1);
+}
+
+.mini-board_N:nth-child(6) {
+  background-image: var(--image-board-bg-nr1);
+}
+
+.mini-board_O {
+  width: 110px;
+  height: 50px;
+  background-image: var(--image-board-bg-o);
+  background-size: 100% 100%;
+}
+
+.mini-board_P {
+  width: 97px;
+  height: 170px;
+  padding-top: 105px;
+  background-image: var(--image-board_bg_7), var(--image-board_bg_10);
+  background-size:
+    97px 105px,
+    100% 40px;
+  background-repeat: no-repeat;
+  background-position:
+    center top,
+    center bottom;
+}
+
+.mini-board_P:nth-of-type(2) {
+  width: 97px;
+  height: 170px;
+  padding-top: 105px;
+  background-image: var(--image-board_bg_8), var(--image-board_bg_9);
+  background-size:
+    97px 105px,
+    100% 40px;
+  background-repeat: no-repeat;
+  background-position:
+    center top,
+    center bottom;
+}
+
+.mini-board__value_New {
+  color: @vent-gas-primary-text;
+  font-size: 15px;
+  float: left;
+  margin: 0 0 0 13px;
+  font-weight: bold;
+  height: 30px;
+  line-height: 30px;
+}
+
+.mini-board__lable_New {
+  line-height: 24px;
+  height: 24px;
+}
+
+.mini-board__value_New1 {
+  color: @vent-gas-primary-text;
+  font-size: 16px;
+  float: left;
+  margin: 0 0 0 45%;
+  height: 30px;
+  line-height: 30px;
+}
+
+.mini-board__lable_New1 {
+  line-height: 24px;
+  height: 24px;
+}
+
+.mini-board__value_New2 {
+  color: @vent-gas-primary-text;
+  font-size: 15px;
+  font-weight: bold;
+  height: 30px;
+  line-height: 30px;
+}
+
+.mini-board__lable_New2 {
+  line-height: 24px;
+  height: 24px;
+}
+
+.mini-board__value_New3 {
+  color: #afe6f2;
+  font-size: 15px;
+  font-weight: bold;
+  margin-left: 10px;
+}
+
+.mini-board__lable_New3 {
+  color: #afe6f2;
+  height: 30px;
+  font-size: 10px;
+}
+
+.mini-board__value_A {
+  color: @vent-gas-primary-text;
+  font-size: 20px;
+  font-weight: bold;
+  height: 30px;
+  line-height: 30px;
+}
+
+.mini-board__value_B {
+  color: @vent-gas-primary-text;
+  font-size: 20px;
+  font-weight: bold;
+  height: 40px;
+  line-height: 40px;
+}
+
+.mini-board__label_B {
+  line-height: 24px;
+  height: 24px;
+}
+
+.mini-board__value_C {
+  color: @vent-gas-primary-text;
+  height: 40px;
+  line-height: 40px;
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.mini-board__value_D {
+  font-size: 20px;
+  font-weight: bold;
+  height: 40px;
+  line-height: 40px;
+}
+
+.mini-board__label_D {
+  line-height: 17px;
+  height: 17px;
+}
+
+.mini-board__value_E {
+  font-size: 19px;
+  font-weight: bold;
+}
+
+.mini-board__label_E {
+  line-height: 20px;
+  height: 90px;
+  padding-top: 30%;
+  background-repeat: no-repeat;
+  background-position: center top;
+  white-space: normal;
+}
+
+.mini-board__value_F {
+  font-size: 20px;
+  font-weight: bold;
+  color: @vent-gas-primary-text;
+}
+
+.mini-board__label_F {
+  line-height: 50px;
+}
+
+.mini-board__value_G {
+  color: @vent-gas-primary-text;
+  font-size: 20px;
+  font-weight: bold;
+  height: 42px;
+  line-height: 42px;
+}
+
+.mini-board__label_G {
+  line-height: 20px;
+  height: 20px;
+}
+
+.mini-board__value_J {
+  color: #b3ebf7;
+  font-size: 16px;
+  font-weight: bold;
+  height: 25px;
+  line-height: 25px;
+}
+
+.mini-board__label_J {
+  line-height: 20px;
+  height: 20px;
+}
+
+.mini-board__value_K {
+  color: #fff;
+  font-family: 'douyuFont';
+  font-size: 16px;
+  // font-weight: bold;
+  height: 55px;
+  line-height: 55px;
+  padding-left: 60px;
+}
+
+.mini-board__label_K {
+  line-height: 21px;
+  height: 21px;
+  text-align: end;
+  font-size: 13px;
+}
+
+.mini-board__label_L {
+  line-height: 21px;
+  height: 21px;
+  text-align: center;
+  font-size: 14px;
+  margin-top: 30px;
+}
+
+.mini-board__value_L {
+  font-family: 'douyuFont';
+  color: @vent-gas-primary-text;
+  font-size: 14px;
+  height: 30px;
+  line-height: 30px;
+}
+
+.mini-board__label_M {
+  line-height: 21px;
+  height: 21px;
+  text-align: center;
+  font-size: 14px;
+}
+
+.mini-board__value_M {
+  font-family: 'douyuFont';
+  color: @vent-gas-primary-text;
+  font-size: 12px;
+  height: 23px;
+  margin-top: 5px;
+}
+
+.mini-board__value_O {
+  font-family: 'douyuFont';
+  font-size: 11px;
+  color: @vent-gas-primary-text;
+}
+
+.mini-board__value_P {
+  font-family: 'douyuFont';
+  font-size: 20px;
+  margin-top: 10px;
+}
+
+.mini-board_E:nth-child(1) {
+  .mini-board__label_E {
+    background-image: var(--image-hycd);
   }
-  .mini-board_H_high_risk {
-    background-image: var(--image-board_bg_5);
+}
+
+.mini-board_E:nth-child(2) {
+  .mini-board__label_E {
+    background-image: var(--image-dyfl);
   }
-  .mini-board_H_warning {
-    background-image: var(--image-board_bg_4);
+}
+
+.mini-board_E:nth-child(3) {
+  .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);
+}
 </style>

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

@@ -2,8 +2,11 @@
   <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>
+       <div>
+         <span class="action-btn close-btn" @click="closeModel"></span>
         <span @click="clickHandler">{{ title }}</span>
+       </div>
+       <span v-if="visibleDetail" class="detail-text">详情</span>
       </div>
       <div class="module-slot">
         <slot></slot>
@@ -12,7 +15,7 @@
   </Transition>
 </template>
 <script lang="ts" setup>
-  defineProps<{ title: string; visible: boolean }>();
+  defineProps<{ title: string; visible: boolean,visibleDetail:boolean }>();
   const emit = defineEmits(['close', 'click']);
 
   function closeModel() {
@@ -44,6 +47,9 @@
   }
 
   .module-content__title__expand {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
      width: 100%;
     height: var(--bg-height);
     background: var(--image-model_original_title_bg) no-repeat;
@@ -64,6 +70,9 @@
     // background-color: var(--vent-configurable-original-module-bg);
     // margin-left: 5px;
   }
+  .detail-text{
+    color: #2cb6ff;
+  }
 
   // Transition动画相关
   .v-enter-active,

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

@@ -2,8 +2,11 @@
   <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>
+          <span class="action-btn close-btn" @click="closeModel"></span>
+          <span @click="clickHandler">{{ title }}</span>
+        </div>
+        <span v-if="visibleDetail" class="detail-text">详情</span>
       </div>
       <div class="module-slot">
         <slot></slot>
@@ -12,70 +15,77 @@
   </Transition>
 </template>
 <script lang="ts" setup>
-  defineProps<{ title: string; visible: boolean }>();
-  const emit = defineEmits(['close', 'click']);
+defineProps<{ title: string; visible: boolean,visibleDetail:boolean }>();
+const emit = defineEmits(['close', 'click']);
 
-  function closeModel() {
-    emit('close');
-  }
-  function clickHandler() {
-    emit('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');
-    }
-  }
+@import '/@/design/theme.less';
 
+@{theme-deepblue} {
   .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%;
+    --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-4.png');
   }
+}
 
-  .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;
-  }
+.module-content {
+  --image-model_original_title_bg: url('@/assets/images/gasInjection/2-1.png');
+  --image-model_original_border_bg: url('@/assets/images/gasInjection/2-4.png');
+  --bg-height: 40px;
+  color: #fff;
+  box-sizing: border-box;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
 
-  // Transition动画相关
-  .v-enter-active,
-  .v-leave-active {
-    transition: all 0.3s ease;
-  }
+.module-content__title__expand {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  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);
+}
 
-  .v-enter-from,
-  .v-leave-to {
-    // opacity: 1;
-    transform: translateX(-100%);
-    // transform: scaleY(0);
-    // transform-origin: center top;
+.module-slot {
+  height: calc(100% - 33px);
+  width: 100%;
+  // 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;
+}
+.detail-text{
+    color: #2cb6ff;
   }
+// 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

@@ -2,8 +2,11 @@
   <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>
+       <div>
+         <span class="action-btn close-btn" @click="closeModel"></span>
         <span @click="clickHandler">{{ title }}</span>
+       </div>
+       <span v-if="visibleDetail" class="detail-text">详情</span>
       </div>
       <div class="module-slot">
         <slot></slot>
@@ -13,7 +16,7 @@
 </template>
 <script lang="ts" setup>
 // 和 ./moduleLeft 一样，针对动画做了一些修改
-defineProps<{ title: string; visible: boolean }>();
+defineProps<{ title: string; visible: boolean,visibleDetail:boolean }>();
 const emit = defineEmits(['close', 'click']);
 
 function closeModel() {
@@ -29,13 +32,13 @@ function clickHandler() {
 @{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');
+    --image-model_original_border_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/2-4.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');
+  --image-model_original_border_bg: url('@/assets/images/gasInjection/2-4.png');
   --bg-height: 40px;
   color: #fff;
   box-sizing: border-box;
@@ -45,6 +48,9 @@ function clickHandler() {
 }
 
 .module-content__title__expand {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   width: 100%;
   height: var(--bg-height);
   background: var(--image-model_original_title_bg) no-repeat;
@@ -61,13 +67,18 @@ function clickHandler() {
 
 .module-slot {
   height: calc(100% - 33px);
-  width: calc(100% - 20px);
+  // width: calc(100% - 20px);
+  width: 100%;
   // backdrop-filter: blur(5px);
   // #182d47
   background: var(--image-model_original_border_bg) no-repeat;
   background-size: 100% 100%;
 }
 
+.detail-text{
+    color: #2cb6ff;
+  }
+
 // Transition动画相关
 .v-enter-active,
 .v-leave-active {

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

@@ -0,0 +1,139 @@
+<template>
+  <div class="gas-board">
+    <div class="board-box" v-for="(item, index) in option" :key="index">
+      <div class="board-item">
+        <div class="board-item-icon">
+          <SvgIcon class="icon-style" size="26" :name="item.iconName" />
+        </div>
+        <div class="board-item-content">
+          <div class="item-content-label">{{ item.label }}</div>
+          <div class="item-content-value">
+            <span>{{ item.value }}</span>
+            <span>{{ item.unit }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { SvgIcon } from '/@/components/Icon';
+
+let props=defineProps({
+  option:{
+    type:Array as any
+  }
+})
+
+// let listData = ref<any[]>(
+//   [
+//   { label: '氧气浓度', value: '60', iconName: 'o2-gas', unit: 'Nm³' },
+//   { label: '甲烷浓度', value: '60', iconName: 'ch4-gas', unit: 'm³/min' },
+//   { label: '温度', value: '60', iconName: 'temp-gas', unit: '' },
+//   { label: '风速', value: '60', iconName: 'wind-gas', unit: '' },
+// ]
+// )
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .gas-board {
+    --image-gas_board_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/7-4.png');
+    --image-gas_board_bg1: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/7-5.png');
+  }
+}
+
+.gas-board {
+  --image-gas_board_bg: url('@/assets/images/gasInjection/7-4.png');
+  --image-gas_board_bg1: url('@/assets/images/gasInjection/7-5.png');
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  height: 100%;
+  padding: 15px 20px;
+  box-sizing: border-box;
+
+  .board-box {
+    width: 50%;
+    height: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:nth-child(1) {
+      .board-item {
+        background: var(--image-gas_board_bg1) no-repeat;
+        background-size: 100% 100%;
+      }
+      .item-content-value{
+        color: #91e0ff;
+      }
+    }
+
+    &:nth-child(2) {
+      .board-item {
+        background: var(--image-gas_board_bg) no-repeat;
+        background-size: 100% 100%;
+      }
+      .item-content-value{
+        color: #2cffdd;
+      }
+    }
+
+    &:nth-child(3) {
+      .board-item {
+        background: var(--image-gas_board_bg) no-repeat;
+        background-size: 100% 100%;
+      }
+      .item-content-value{
+        color: #2cffdd;
+      }
+    }
+
+    &:nth-child(4) {
+      .board-item {
+        background: var(--image-gas_board_bg1) no-repeat;
+        background-size: 100% 100%;
+      }
+      .item-content-value{
+        color: #91e0ff;
+      }
+    }
+  }
+
+  .board-item {
+    position: relative;
+    width: 180px;
+    height: 60px;
+  }
+
+  .board-item-icon {
+    position: absolute;
+    left: 24px;
+    top: 50%;
+    transform: translate(0, -35%);
+  }
+
+  .board-item-content {
+    position: absolute;
+    height: 100%;
+    left: 70px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .item-content-label {
+    margin-bottom: 10px;
+  }
+
+  .item-content-value {
+    font-size: 12px;
+    font-family: 'douyuFont';
+  }
+}
+</style>

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

@@ -0,0 +1,105 @@
+<template>
+  <div class="device-status-control">
+    <div class="status-control-box" v-for="(item, index) in option" :key="index">
+      <SvgIcon class="icon-style" size="20" :name="item.iconName" />
+      <div class="control-box-title">{{ item.label }}</div>
+      <div class="control-box" v-if="item.isShowSwitch">
+        <div class="btn-item btn-open">开启</div>
+        <div class=" btn-item btn-close">关闭</div>
+      </div>
+      <div class="control-box" v-else>
+        <a-input v-model:value="presure" size="small" placeholder="请输入"  />
+        <span style="font-size: 12px;">MPa</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { SvgIcon } from '/@/components/Icon';
+
+let props=defineProps({
+  option:{
+    type:Array as any
+  }
+})
+let presure=ref('')
+
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .device-status-control {
+    --image-status_control_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/7-1.png');
+  }
+}
+
+.device-status-control {
+  --image-status_control_bg: url('@/assets/images/gasInjection/7-1.png');
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 15px 25px;
+  box-sizing: border-box;
+
+  .status-control-box {
+    position: relative;
+    width: 100%;
+    height: 39px;
+    background: var(--image-status_control_bg) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .icon-style {
+    position: absolute;
+    left: 10px;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+
+  .control-box-title {
+    position: absolute;
+    left: 50px;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+
+  .control-box {
+    position: absolute;
+    right: 0px;
+    top: 50%;
+    transform: translate(0, -50%);
+    display: flex;
+    align-items: center;
+  }
+
+  .btn-item {
+    font-size: 10px;
+    font-family: 'douyuFont';
+    display: flex;
+    align-items: center;
+    padding: 5px 10px 3px 10px;
+    border: 1px solid #2cb6ff;
+    border-radius: 4px;
+  }
+
+  .btn-open {
+    margin-right: 5px;
+
+  }
+}
+::v-deep .zxm-input-sm{
+  width: 70px;
+    margin-right: 5px;
+    height: 25px !important;
+    background-color: transparent !important;
+    border: 1px solid #2cb6ff;
+    color: #fff;
+}
+</style>

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

@@ -0,0 +1,61 @@
+<template>
+  <div class="gas-inject-card">
+    <div class="inject-card-item" v-for="(item, index) in listData" :key="index">
+      <div class="pie-bg"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+let listData = ref([
+  { id: 1 },
+  { id: 2 },
+  { id: 3 }
+])
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .gas-inject-card {
+    --image-inject_card_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/8-1.png');
+    --image-inject_card_bg1: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/8-2.png');
+    --image-inject_card_bg2: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/8-3.png');
+  }
+}
+
+.gas-inject-card {
+  --image-inject_card_bg: url('@/assets/images/gasInjection/8-1.png');
+  --image-inject_card_bg1: url('@/assets/images/gasInjection/8-2.png');
+  --image-inject_card_bg2: url('@/assets/images/gasInjection/8-3.png');
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 20px 15px;
+  box-sizing: border-box;
+  overflow-y: auto;
+
+  .inject-card-item {
+    position: relative;
+    width: 379px;
+    height: 90px;
+    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;
+    background: var(--image-inject_card_bg1) no-repeat;
+    background-size: 100% 100%;
+  }
+}
+</style>

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

@@ -1,14 +1,278 @@
 <template>
   <div class="gasInjectChart">
+    <!-- 年月日切换 -->
+    <div class="radio-box">
+      <a-radio-group v-model:value="nowData" name="radioGroup">
+        <a-radio value="minutes">按分钟</a-radio>
+        <a-radio value="hours">按小时</a-radio>
+        <a-radio value="days">按天</a-radio>
+      </a-radio-group>
+    </div>
     <div ref="gasInjectChart" class="inject-echart-box"></div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { nextTick, ref, onMounted } from 'vue'
 import * as echarts from 'echarts';
 
-let gasInjectChart=ref(null)
+let props = defineProps({
+  option: {
+    type: Object as any
+  }
+})
+
+let nowData = ref('hours')
+let gasInjectChart = ref(null)
+
+var xData = ["01:00", "02:00", "03:00", "04:00", "05:00", "06:00"]
+var line = ["1030", "205", "84", "568", "689", "4587"];
+
+let xLabel = ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31']
+let goToSchool = ["40", "60", "22", "85", "50", "40"]
+let goOutSchool = ["20", "50", "12", "65", "30", "60"]
+
+function getOption() {
+  nextTick(() => {
+    let myChart = echarts.init(gasInjectChart.value);
+    let option
+    if (props.option.type == 'bar_lt') {
+      option = {
+        tooltip: props.option.tooltip,
+        grid: props.option.grid,
+        xAxis: [{
+          data: xData,
+          axisLabel: {
+            textStyle: {
+              color: '#b3b8cc',
+              fontSize: 12
+            },
+            margin: 10, //刻度标签与轴线之间的距离。
+          },
+
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(4, 49, 79)',
+            },
+          },
+          axisTick: {
+            show: false //不显示刻度
+          },
+          boundaryGap: true,
+          splitLine: {
+            show: false,
+          },
+        }],
+        yAxis: [{
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(4, 49, 79)',
+            },
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#b3b8cc'
+            },
+          }
+        }],
+        series: [
+          {//柱底圆片
+            name: "",
+            type: "pictorialBar",
+            symbolSize: [25, 15],
+            symbolOffset: [0, 5],
+            z: 12,
+            itemStyle: {
+              "normal": {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: props.option.botColor
+                },
+                {
+                  offset: 1,
+                  color: props.option.botColor
+                }
+                ])
+              }
+            },
+            data: line
+          },
+
+          //柱体
+          {
+            name: '',
+            type: 'bar',
+            barWidth: 25,
+            barGap: '0%',
+            itemStyle: {
+              "normal": {
+                "color": {
+                  "x": 0,
+                  "y": 0,
+                  "x2": 0,
+                  "y2": 1,
+                  "type": "linear",
+                  "global": false,
+                  "colorStops": [{//第一节下面
+                    "offset": 0,
+                    "color": props.option.cenColor[0]
+                  }, {
+                    "offset": 1,
+                    "color": props.option.cenColor[1]
+                  }]
+                }
+              }
+            },
+
+            data: line
+          },
+
+          //柱顶圆片
+          {
+            name: "",
+            type: "pictorialBar",
+            symbolSize: [25, 15],
+            symbolOffset: [0, -5],
+            z: 12,
+            symbolPosition: "end",
+            "itemStyle": {
+              "normal": {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
+                  [{
+                    offset: 0,
+                    color: props.option.topColor
+                  },
+                  {
+                    offset: 1,
+                    color: props.option.topColor
+                  }
+                  ],
+                  false
+                ),
+              }
+            },
+            data: line
+          }
+        ]
+      };
+    } else if (props.option.type == 'line-area') {
+      option = {
+        tooltip: props.option.tooltip,
+        grid: props.option.grid,
+        xAxis: [{
+          type: 'category',
+          boundaryGap: false,
+          axisLine: { //坐标轴轴线相关设置。数学上的x轴
+            show: true,
+            lineStyle: {
+              color: 'rgba(4, 49, 79)',
+            },
+          },
+          axisLabel: { //坐标轴刻度标签的相关设置
+            textStyle: {
+              color: '#7ec7ff',
+              padding: 5,
+              fontSize: 12
+            },
+            formatter: function (data) {
+              return data
+            }
+          },
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          data: xLabel
+        }],
+        yAxis: [{
+          name: 'MPa',
+          nameTextStyle: {
+            color: "#7ec7ff",
+            fontSize: 12,
+            padding: 0
+          },
+          min: 0,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: 'rgba(4, 49, 79)',
+            },
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#7ec7ff',
+              padding: 12
+            },
+            formatter: '{value}',
+          },
+          axisTick: {
+            show: false,
+          },
+        }],
+        series: [{
+          name: '',
+          type: 'line',
+          symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+          showAllSymbol: true,
+          symbolSize: 0,
+          smooth: true,
+          lineStyle: {
+            normal: {
+              width: 3,
+              color: props.option.colorLine, // 线条颜色
+            },
+            borderColor: 'rgba(0,0,0,.4)',
+          },
+          itemStyle: {
+            color: props.option.colorLine,
+            borderColor: "#646ace",
+            borderWidth: 2
+
+          },
+          areaStyle: { //区域填充样式
+            normal: {
+              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: props.option.colorArea[0]
+              },
+              {
+                offset: 1,
+                color: props.option.colorArea[1]
+              }
+              ], false),
+              shadowColor: 'rgba(255, 157, 29, 0.5)', //阴影颜色
+              shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+            }
+          },
+          data: goToSchool
+        },
+        ]
+      };
+    }
+
+    myChart.setOption(option);
+    window.onresize = function () {
+      myChart.resize();
+    };
+  });
+}
+
+onMounted(() => {
+  getOption()
+})
 
 </script>
 
@@ -16,5 +280,27 @@ let gasInjectChart=ref(null)
 .gasInjectChart {
   width: 100%;
   height: 100%;
+
+  .radio-box {
+    width: 100%;
+    font-size: 12px;
+    display: flex;
+    justify-content: flex-end;
+    padding: 5px 10px;
+    box-sizing: border-box;
+  }
+
+  .inject-echart-box {
+    width: 100%;
+    height: calc(100% - 32px);
+  }
+}
+
+::v-deep .radio-box {
+  background-color: transparent !important;
+}
+
+::v-deep .zxm-radio-inner {
+  background-color: transparent;
 }
 </style>

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

@@ -1,11 +1,11 @@
 <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 class="list-box-item" v-for="(item, index) in option" :key="index">
+        <div class="box-item-label">{{ item.label }}</div>
+        <div class="box-item-value">{{ item.value }}</div>
       </div>
-      <div class="list-box-item">
+      <!-- <div class="list-box-item">
         <div class="box-item-label">{{ item.mcTitle }}</div>
         <div class="box-item-value">{{ item.mcValue }}</div>
       </div>
@@ -24,18 +24,22 @@
       <div class="list-box-item">
         <div class="box-item-label">{{ item.hlTitle }}</div>
         <div class="box-item-value">{{ item.hlValue }}</div>
-      </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' },
-
-])
+let props=defineProps({
+  option:{
+    type:Array as any
+  }
+})
+// 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>
 
@@ -57,11 +61,6 @@ let listData = ref([
   box-sizing: border-box;
   overflow-y: auto;
 
-  .inject-list-box {
-    width: 100%;
-    height: 100%;
-  }
-
   .list-box-item {
     display: flex;
     justify-content: space-between;
@@ -72,5 +71,12 @@ let listData = ref([
     background: var(--image-model_list_bg) no-repeat;
     background-size: 100% 100%;
   }
+  .box-item-label{
+    color: #c3f5ff;
+  }
+  .box-item-value{
+      font-family: 'douyuFont';
+    color: #91faff;
+  }
 }
 </style>

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

@@ -0,0 +1,128 @@
+<template>
+  <div class="gas-warn-chart">
+    <div class="echart-box" ref="gasWarnChart"></div>
+    <SvgIcon class="icon-style" size="40" name="warn-chart" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onMounted, ref } from 'vue'
+import { SvgIcon } from '/@/components/Icon';
+import * as echarts from 'echarts';
+
+let props = defineProps({
+  option: {
+    type: Object as any
+  }
+})
+let gasWarnChart = ref(null)
+
+const data = [
+  { name: "消纳场-01", value: 900 },
+  { name: "消纳场-02", value: 900 },
+  { name: "消纳场-03", value: 650 },
+  { name: "消纳场-04", value: 450 },
+];
+
+const maxCircleData = data.map((item, index) => {
+  return {
+    ...item,
+    itemStyle: {
+      color: props.option.colorOn[index],
+    },
+  };
+});
+
+function getOption() {
+  nextTick(() => {
+    let myChart = echarts.init(gasWarnChart.value);
+    let option = {
+      color: props.option.colorOut,
+      series: [
+        {
+          type: "pie",
+          padAngle: 2,
+          radius: ["55%", "64%"],
+          label: {
+            show: false,
+          },
+          emphasis: {
+            disabled: true,
+          },
+          data: maxCircleData,
+        },
+        {
+          type: "pie",
+          padAngle: 2,
+          radius: ["64%", "77%"],
+          avoidLabelOverlap: false,
+          label: {
+            show: false,
+            // formatter: function (params) {
+            //   return "20%";
+            // },
+            // color: "#fff",
+            // fontSize: 14,
+            // fontFamily: "DIN",
+          },
+          emphasis: {
+            disabled: false,
+          },
+          // labelLine: {
+          //   show: false,
+          //   length: 6,
+          //   length2: 6,
+          //   minTurnAngle: 30,
+          // },
+          data: data,
+        },
+      ],
+    }
+    myChart.setOption(option);
+    window.onresize = function () {
+      myChart.resize();
+    };
+  });
+}
+
+onMounted(() => {
+  getOption()
+})
+
+
+
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .gas-warn-chart {
+    --image-chart_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/6-1.png');
+  }
+}
+
+.gas-warn-chart {
+  --image-chart_bg: url('@/assets/images/gasInjection/6-1.png');
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+
+  .echart-box {
+    width: 168px;
+    height: 168px;
+    background: var(--image-chart_bg) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .icon-style {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+</style>

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

@@ -0,0 +1,122 @@
+<template>
+  <div class="gas-warn-list">
+    <div class="warn-list-box">
+      <div class="list-box-item" v-for="(item, index) in option" :key="index">
+        <div class="box-item-label">
+          <div class="item-icon"></div>
+          <div class="item-text">{{ item.label }}</div>
+        </div>
+        <div class="box-item-value">{{ item.value }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+let props = defineProps({
+  option: {
+    type: Array as any,
+  }
+})
+// let listData = ref<any[]>([
+//   { label: '设备运行异常', value: '50' },
+//   { label: '环境监测异常', value: '30' },
+//   { label: '信号传输异常', value: '10' },
+//   { label: '驱替数据异常', value: '20' },
+// ])
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .gas-warn-list {
+    --image-warn_list_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/6-2.png');
+  }
+}
+
+.gas-warn-list {
+  --image-warn_list_bg: url('@/assets/images/gasInjection/6-2.png');
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+
+  .warn-list-box {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: flex-start;
+    width: 100%;
+    height: 154px;
+  }
+
+  .list-box-item {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    width: 186px;
+    height: 26px;
+    background: var(--image-warn_list_bg) no-repeat;
+    background-size: 100% 100%;
+    font-size: 12px;
+    color: #fff;
+
+    &:nth-child(1) {
+      .item-icon {
+        width: 7px;
+        height: 7px;
+        margin-right: 5px;
+        background-color: rgba(70, 255, 156);
+        border-radius: 50%;
+      }
+    }
+
+    &:nth-child(2) {
+      .item-icon {
+        width: 7px;
+        height: 7px;
+        margin-right: 5px;
+        background-color: rgba(0, 243, 255);
+        border-radius: 50%;
+      }
+    }
+
+    &:nth-child(3) {
+      .item-icon {
+        width: 7px;
+        height: 7px;
+        margin-right: 5px;
+        background-color: rgba(255, 157, 28);
+        border-radius: 50%;
+      }
+    }
+
+    &:nth-child(4) {
+      .item-icon {
+        width: 7px;
+        height: 7px;
+        margin-right: 5px;
+        background-color: rgba(44, 182, 255);
+        border-radius: 50%;
+      }
+    }
+
+  }
+
+  .box-item-label {
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  .box-item-value {
+    font-family: 'douyuFont';
+    color: #91faff;
+  }
+
+}
+</style>

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

@@ -10,50 +10,43 @@ import * as echarts from 'echarts';
 
 let gasZyChart = ref(null)
 
-let series = ref<any[]>(['故障', '换模', '换刀']);
+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 categories = ref<any[]>(['A', 'C']);
 let seriesValue = ref<any[]>([]);
 let jsonData = ref<any[]>([
   {
     category: 'A',
-    series: '故障',
+    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: '换模',
+    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: '故障',
+    series: '装备运行',
     startTime: '2021-03-01 08:00:00',
     endTime: '2021-03-01 16:00:00',
   },
   {
     category: 'C',
-    series: '换模',
+    series: '注气阀门开启',
     startTime: '2021-03-02 04:00:00',
     endTime: '2021-03-02 19:00:00',
   },
 ])
 
+let colorList=[
+  {color:'rgba(255, 158, 30)',color1:'rgba(255, 247, 194)'},
+  {color:'rgba(14, 98, 255)',color1:'rgba(3, 223, 252)'},
+]
+
 function getXDate(time) {
   let year = time.getFullYear();
   let month = parseInt(time.getMonth()) + 1;
@@ -89,7 +82,23 @@ echarts.util.each(categories.value, function (category, index: number) {
             renderItem: renderItem,
             itemStyle: {
               normal: {
-                opacity: 0.8,
+                color:new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  1,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: colorList[indexS].color,
+                    },
+                    {
+                      offset: 1,
+                      color:colorList[indexS].color1,
+                    },
+                  ],
+                  false
+                ),
               },
             },
             encode: {
@@ -108,7 +117,7 @@ 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 height = api.size([0, 1])[1] * 0.1;
 
   let rectShape = echarts.graphic.clipRectByRect(
     {
@@ -139,6 +148,16 @@ function getOption() {
   nextTick(() => {
     let myChart = echarts.init(gasZyChart.value);
     let option = {
+      tooltip: {
+        backgroundColor: 'rgba(0, 0, 0, .6)',
+        textStyle: {
+          color: '#fff',
+          fontSize: 12,
+        },
+        formatter: function (params) {
+          return params.marker + params.name + ': ' + params.value[3] / 1000 / 60 / 60 + ' h';
+        },
+      },
       grid: {
         top: "12%",
         left: "6%",
@@ -156,15 +175,10 @@ function getOption() {
           fontSize: 12,
         },
         // icon:'rect',
-        // itemGap: 25,
-        // itemWidth: 18,
+        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';
-        },
+        data: ['装备运行', '注气阀门开启',],
       },
 
       xAxis: [
@@ -174,7 +188,7 @@ function getOption() {
           interval: 3600 * 24 * 1000,
           axisLabel: {
             show: true,
-            fontSize: 14,
+            fontSize: 12,
             textStyle: {
               color: '#b3b8cc',
             },
@@ -186,7 +200,6 @@ function getOption() {
           axisLine: {
             lineStyle: {
               // color: 'rgba(14, 53, 95)',
-              color: 'red',
             },
           },
           splitLine: {
@@ -196,13 +209,20 @@ function getOption() {
             show: false,
           },
         },
-        {
-          // data: ['2021-03-01', '2021-03-02', '2021-03-03'],
-          data: [],
-        },
+        // {
+        //   // data: ['2021-03-01', '2021-03-02', '2021-03-03'],
+        //   data: [],
+        // },
       ],
       yAxis: {
         data: categories.value,
+        axisLabel: {
+          show: true,
+          fontSize: 12,
+          textStyle: {
+            color: '#b3b8cc',
+          },
+        },
         axisLine: {
           show: false,
         },
@@ -212,6 +232,9 @@ function getOption() {
             color: 'rgba(6, 48, 77)',
           },
         },
+        axisTick: {
+          show: false,
+        },
       },
       series: seriesValue.value
     };

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

@@ -4,6 +4,8 @@ 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',
@@ -73,7 +75,7 @@ export const testConfigGasInject: Config[] = [
     showStyle: {
       size: 'width:440px;height:250px;',
       version: '注气',
-      position: 'top:100px;left:10;',
+      position: 'top:100px;left:10px;',
     },
   },
   {
@@ -180,6 +182,28 @@ export const testConfigGasInject: Config[] = [
       preset: [
         {
           readFrom: '',
+          option: {
+            type: 'bar_lt',
+            tooltip: {
+              trigger: 'item',
+              padding: 8,
+              backgroundColor: 'rgba(0, 0, 0, .6)',
+              textStyle: {
+                color: '#fff',
+                fontSize: 12,
+              },
+            },
+            grid: {
+              top: "8%",
+              left: "6%",
+              right: "6%",
+              bottom: "3%",
+              containLabel: true,
+            },
+            botColor: ['rgba(8, 213, 252,1)'],
+            cenColor: ["rgba(7, 67, 96)", "rgba(9, 214, 252)"],
+            topColor: ["rgba(9, 170, 208,1)"]
+          }
         }
       ],
       // mock: BDdustMock,
@@ -231,6 +255,14 @@ export const testConfigGasInject: Config[] = [
       preset: [
         {
           readFrom: '',
+          option: [
+            { label: '工作面', value: '12304工作面' },
+            { label: '所属煤层', value: '2号煤' },
+            { label: '设计长度', value: '2924.6' },
+            { label: '采面宽度', value: '300.4' },
+            { label: '剩余可采长度', value: '900' },
+            { label: '原始煤层瓦斯含量', value: '3.40' },
+          ]
         }
       ],
     },
@@ -290,7 +322,7 @@ export const testConfigGasInject: Config[] = [
       position: 'top:390px;right:10px;',
     },
   },
-    {
+  {
     deviceType: 'warn-info',
     moduleName: '数据异常信息显示',
     pageType: 'gas_injection',
@@ -316,8 +348,12 @@ export const testConfigGasInject: Config[] = [
         direction: 'row',
         items: [
           {
-            name: 'gas_list',
-            basis: '100%',
+            name: 'gas_warn_chart',
+            basis: '50%',
+          },
+          {
+            name: 'gas_warn_list',
+            basis: '50%',
           },
         ],
       },
@@ -331,7 +367,30 @@ export const testConfigGasInject: Config[] = [
       preset: [
         {
           readFrom: '',
-        }
+          option: {
+            colorOn: [
+              "rgba(70, 255, 156, 1)",
+              "rgba(0, 243, 255, 1)",
+              "rgba(255, 157, 28, 1)",
+              "rgba(44, 182, 255, 1)",
+            ],
+            colorOut: [
+              "rgba(70, 255, 156, .5)",
+              "rgba(0, 243, 255, .5)",
+              "rgba(255, 157, 28, .5)",
+              "rgba(44, 182, 255, .5)",
+            ],
+          }
+        },
+        {
+          readFrom: '',
+          option: [
+            { label: '设备运行异常', value: '50' },
+            { label: '环境监测异常', value: '30' },
+            { label: '信号传输异常', value: '10' },
+            { label: '驱替数据异常', value: '20' },
+          ]
+        },
       ],
     },
     showStyle: {
@@ -340,7 +399,7 @@ export const testConfigGasInject: Config[] = [
       position: 'top:620px;right:10px;',
     },
   },
-   {
+  {
     deviceType: 'zq-infos',
     moduleName: '注气压力/流量',
     pageType: 'gas_injection',
@@ -366,7 +425,7 @@ export const testConfigGasInject: Config[] = [
         direction: 'row',
         items: [
           {
-            name: 'gas_list',
+            name: 'chart_inject',
             basis: '100%',
           },
         ],
@@ -381,15 +440,464 @@ export const testConfigGasInject: Config[] = [
       preset: [
         {
           readFrom: '',
+          option: {
+            type: 'line-area',
+            tooltip: {
+              trigger: 'axis',
+              padding: 8,
+              backgroundColor: 'rgba(0, 0, 0, .6)',
+              textStyle: {
+                color: '#fff',
+                fontSize: 12,
+              },
+            },
+            grid: {
+              top: '15%',
+              left: '5%',
+              right: '5%',
+              bottom: '10%',
+              containLabel: true
+            },
+            colorLine: "rgba(255, 157, 29,1)",
+            colorArea: ["rgba(255, 157, 29,.4)", "rgba(255, 157, 29, .1)"]
+          }
+        }
+      ],
+    },
+    showStyle: {
+      size: 'width:1015px;height:260px;',
+      version: '注气',
+      position: 'bottom:22px;left:460px;',
+    },
+  },
+]
+//注气驱替-注气
+export const testConfigGasInjectZq: Config[] = [
+  {
+    deviceType: 'device_status_control',
+    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: 'gasdevice_status_control',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      list: [],
+      chart: [],
+      table: [],
+      gallery: [],
+      complex_list: [],
+      gallery_list: [],
+      preset: [
+        {
+          readFrom: '',
+          option: [
+            { label: '开关', isShowSwitch: true, value: '1', iconName: 'kaiguan' },
+            { label: '出口压力设置', isShowSwitch: false, value: '1', iconName: 'yalishezhi' },
+            { label: '进气端阀门', isShowSwitch: true, value: '1', iconName: 'fameng' },
+            { label: '出气端阀门', isShowSwitch: true, value: '1', iconName: 'fameng' },
+          ]
+        }
+      ],
+      to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=fanmain',
+    },
+    showStyle: {
+      size: 'width:440px;height:280px;',
+      version: '注气',
+      position: 'top:10px;left:10px;',
+    },
+  },
+  {
+    deviceType: 'monitor_sj',
+    moduleName: '注气数据监测',
+    showDetail: true,
+    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: 'board',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [
+        {
+          type: 'Gas',
+          readFrom: '',
+          layout: 'label-top',
+          items: [
+            {
+              label: '瞬时注气流量',
+              value: '${flow_merge}',
+            },
+            {
+              label: '累计注气流量',
+              value: '${fy_merge}',
+            },
+            {
+              label: '注气温度',
+              value: '${leakage}',
+            },
+            {
+              label: '注气压力',
+              value: '${leakage}',
+            },
+          ],
+        },
+      ],
+      list: [],
+      chart: [],
+      table: [],
+      gallery: [],
+      complex_list: [],
+      gallery_list: [],
+      preset: [],
+      to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=fanmain',
+    },
+    showStyle: {
+      size: 'width:440px;height:250px;',
+      version: '注气',
+      position: 'top:310px;left:10px;',
+    },
+  },
+  {
+    deviceType: 'monitor_hj',
+    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: 'board_gas',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      list: [],
+      chart: [],
+      table: [],
+      gallery: [],
+      complex_list: [],
+      gallery_list: [],
+      preset: [
+        {
+          readFrom: '',
+          option: [
+            { label: '氧气浓度', value: '60', iconName: 'o2-gas', unit: 'Nm³' },
+            { label: '甲烷浓度', value: '60', iconName: 'ch4-gas', unit: 'm³/min' },
+            { label: '温度', value: '60', iconName: 'temp-gas', unit: '' },
+            { label: '风速', value: '60', iconName: 'wind-gas', unit: '' },
+          ]
         }
       ],
+      to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=fanmain',
     },
     showStyle: {
-      size: 'width:1035px;height:260px;',
+      size: 'width:440px;height:260px;',
       version: '注气',
-      position: 'bottom:22px;left:440px;',
+      position: 'top:580px;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:1015px;height:260px;',
+      version: '注气',
+      position: 'bottom:22px;left:460px;',
+    },
+  },
+  {
+    deviceType: 'video-monitor',
+    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: [],
+      table: [],
+      gallery: [],
+      complex_list: [],
+      gallery_list: [],
+      preset: [],
+      to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=fanmain',
+    },
+    showStyle: {
+      size: 'width:440px;height:260px;',
+      version: '注气',
+      position: 'top:580px;right:10px;',
+    },
+  },
+]
+//注气驱替-抽采
+export const testConfigGasInjectCc: Config[] = [
+  {
+    deviceType: 'cc-data',
+    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_list',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      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' },
+          ]
+        }
+      ],
+    },
+    showStyle: {
+      size: 'width:440px;height:430px;',
+      version: '注气',
+      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: [
+            { label: '瓦斯浓度', value: '12304' },
+            { label: '抽采负压', value: '2号煤' },
+            { label: '混合气体标况总量', value: '2924.6' },
+            { label: '混合气体标况瞬量', value: '300.4' },
+            { label: '甲烷气体标况总量', value: '900' },
+            { label: '甲烷气体标况瞬量', value: '3.40' },
+            { label: '累计流量', value: '100' },
+          ]
+        }
+      ],
+    },
+    showStyle: {
+      size: 'width:440px;height:380px;',
+      version: '注气',
+      position: 'top:460px;left:10px;',
+    },
+  },
+
 ]
 
 export const testConfigVentSsl: Config[] = [

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

@@ -16,8 +16,14 @@
         </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" />
+          :visible="true" :visible-detail="cfg.showDetail" />
       </template>
+      <template v-else>
+        <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" :visible-detail="cfg.showDetail" />
+      </template>
+      
     </div>
   </div>
 </template>
@@ -30,7 +36,7 @@ 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 } from './configurable.data';
+import { testConfigGasInject, testConfigGasInjectZq,testConfigGasInjectCc } from './configurable.data';
 const { configs, fetchConfigs } = useInitConfigs();
 const { mainTitle, data, updateData } = useInitPage('注气驱替智能管控系统');
 // const route = useRoute();
@@ -41,6 +47,19 @@ let menuName = ref('zjm')
 //选项切换
 function toggleMenu(param) {
   menuName.value = param
+  switch (menuName.value) {
+    case 'zjm':
+      configs.value = testConfigGasInject;
+      break;
+    case 'syq':
+      break;
+    case 'zqxt':
+      configs.value = testConfigGasInjectZq;
+      break;
+    case 'ccxt':
+       configs.value = testConfigGasInjectCc
+      break;
+  }
 }
 onMounted(() => {
   // fetchConfigs('vent_new').then(() => {