注气驱替接口对接，界面调整-提交

src/assets/icons/ccl.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27.08" height="19.886" viewBox="0 0 27.08 19.886">
+  <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>
+  </defs>
+  <path id="路径_57992" data-name="路径 57992" d="M31.9,42.158a8.51,8.51,0,0,1-8.627-8.37V24.957a1.724,1.724,0,0,1,3.448,0v8.831a5.181,5.181,0,0,0,10.357,0V32.221a4,4,0,0,1,7.99,0v4.153a1.724,1.724,0,0,1-3.448,0V32.221a.539.539,0,0,0-.552-.52.532.532,0,0,0-.541.52v1.568a8.509,8.509,0,0,1-8.625,8.37Zm15.729-4.111A1.7,1.7,0,0,1,45.9,36.364v-4.15a5.177,5.177,0,0,0-10.348,0v1.568a4,4,0,0,1-8,0V24.956a1.724,1.724,0,0,1,3.448,0v8.826a.552.552,0,0,0,1.1,0V32.214a8.626,8.626,0,0,1,17.244,0v4.15a1.7,1.7,0,0,1-1.724,1.684Z" transform="translate(-22.772 -22.773)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/assets/icons/czb.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17.744" height="27.621" viewBox="0 0 17.744 27.621">
+  <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>
+  </defs>
+  <path id="路径_57999" data-name="路径 57999" d="M242.292,80.414a8.373,8.373,0,0,0-4.976-14.239V64h-1.887v2.176a8.373,8.373,0,0,0,0,16.638V85.83h-3.641l4.584,4.584,4.584-4.584h-3.641V82.814A8.305,8.305,0,0,0,242.292,80.414Zm.566-5.92h-5.542V68.077A6.5,6.5,0,0,1,242.858,74.495Zm-7.429-6.418v6.418h-5.542A6.5,6.5,0,0,1,235.429,68.077Z" transform="translate(-227.5 -63.5)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/assets/icons/dian.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18.756" height="27.376" viewBox="0 0 18.756 27.376">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" y1="1" x2="0.5" y2="0.083" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#abdcff"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_58001" data-name="路径 58001" d="M164.878,0,156.7,1.7l-3.1,12.891,8.162-1.014L160.21,24.438l10.5-16.63L160.6,9.164Z" transform="translate(-152.945 0.693)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/assets/icons/jdsl.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.413" height="26.789" viewBox="0 0 16.413 26.789">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#a6fffc"/>
+      <stop offset="0.449" stop-color="#fff"/>
+      <stop offset="1" stop-color="#90fbff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_57998" data-name="路径 57998" d="M266.292,76.871l-7.339,12.711-7.343-12.709h4.6V64.293h5.488V76.871Z" transform="translate(-250.745 -63.793)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/assets/icons/pqyl.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28.81" height="28.799" viewBox="0 0 28.81 28.799">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" y1="1" x2="0.5" y2="0.083" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#abffff"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_57958" data-name="路径 57958" d="M8.225,16.452l.092.017.024.005.073.016-.069-.016h0l-.024-.005.028.005.069.016a1.481,1.481,0,0,1,.976.874l.064.191,2.2,8.333a1.519,1.519,0,0,1-1.027,1.859,1.459,1.459,0,0,1-1.8-1.063l-2.2-8.334A1.546,1.546,0,0,1,7,16.888a1.437,1.437,0,0,1,1.223-.436Zm11.759,0,.073.014.049.01.057.014a1.513,1.513,0,0,1,1.065,1.67l-.036.188-2.2,8.333a1.489,1.489,0,0,1-1.039,1.065,1.433,1.433,0,0,1-1.413-.4,1.546,1.546,0,0,1-.374-1.463l2.2-8.333a1.465,1.465,0,0,1,1.616-1.1Zm-5.959-1.673a1.49,1.49,0,0,1,1.465,1.512v9.234a1.465,1.465,0,1,1-2.929,0V16.3a1.489,1.489,0,0,1,1.465-1.512ZM14.087,0c4.344,0,7.29,2.752,8.112,7.306l.005.045L22.2,7.316l.238.035a6.007,6.007,0,0,1,5.337,5.556l.021.344,0,.33c-.033,3.157-1.772,5.513-4.552,5.513a1.512,1.512,0,0,1,0-3.023c.956,0,1.607-.963,1.625-2.523.017-2.041-1.362-3.292-3.96-3.292a1.484,1.484,0,0,1-1.459-1.378c-.325-3.8-2.2-5.855-5.365-5.855S8.765,5.261,8.364,8.913A1.482,1.482,0,0,1,6.91,10.256c-2.6,0-3.982,1.251-3.982,3.308,0,1.519.679,2.505,1.649,2.505a1.513,1.513,0,0,1,0,3.025C1.788,19.094,0,16.688,0,13.564a6.056,6.056,0,0,1,5.367-6.21l.288-.043,0-.017C6.545,3.145,9.384.374,13.291.035l.393-.026L14.073,0Z" transform="translate(28.31 0.5) rotate(90)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/assets/icons/qyyl.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="31.172" height="27.651" viewBox="0 0 31.172 27.651">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" y1="1" x2="0.5" y2="0.083" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#abdcff"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_57957" data-name="路径 57957" d="M48.787,89.372a12.818,12.818,0,0,1,6.343,2.877c2.472,2.133,4.394,5.632,4.165,11.163H56.174a1.224,1.224,0,0,0,0,2.447h5.388l.1-1.115c.613-6.879-1.638-11.506-4.932-14.348a15.236,15.236,0,0,0-10.38-3.6A14.657,14.657,0,0,0,32.58,105.416l.281.832h4.693a1.223,1.223,0,1,0,0-2.446H34.669a12.385,12.385,0,0,1,1.576-8.672c.1-.162.2-.323.3-.482l1.524,1.666a1.5,1.5,0,0,0,2.119.1l.037-.035a1.5,1.5,0,0,0,.1-2.118l-1.633-1.785a1.513,1.513,0,0,0-.152-.146,12.346,12.346,0,0,1,7.219-3.031,1.447,1.447,0,0,0-.014.211v2.416a1.5,1.5,0,0,0,1.5,1.5h.05a1.5,1.5,0,0,0,1.5-1.5V89.5c0-.045,0-.089-.006-.133Zm-1.519,14.48a2.493,2.493,0,0,0,2.492-2.558l3.965-3.862a1.5,1.5,0,0,0,.028-2.121l-.036-.037a1.5,1.5,0,0,0-2.121-.027l-3.778,3.68a2.493,2.493,0,1,0-.55,4.925Zm7.167,7.11c2.133-.418,3.292.562,4.63,1.694.163.138.331.28.5.42a1.53,1.53,0,1,0,1.943-2.363c-.125-.1-.263-.222-.412-.353-1.311-1.139-3.589-3.118-7.251-2.4a17.863,17.863,0,0,0-2.092.61l-.153.052a23.786,23.786,0,0,1-2.376.7,7.305,7.305,0,0,1-4.951-.391,9.476,9.476,0,0,0-6.12-.553,13.447,13.447,0,0,0-4.335,1.764,1.53,1.53,0,0,0,1.674,2.559,10.447,10.447,0,0,1,3.3-1.333,6.435,6.435,0,0,1,4.151.321,10.346,10.346,0,0,0,6.942.619,26.426,26.426,0,0,0,2.682-.782l.054-.019a16.106,16.106,0,0,1,1.81-.541Z" transform="translate(-31.397 -86.275)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/assets/icons/temp-gk.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18.914" height="18.849" viewBox="0 0 18.914 18.849">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" y1="1" x2="0.5" y2="0.083" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#abdcff"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_57976" data-name="路径 57976" d="M66.065,78.428h-.127a5.074,5.074,0,0,1,0-10.149h.127a4.962,4.962,0,0,1,.5.027l6.711-6.71a3.171,3.171,0,1,1,4.483,4.483L71.048,72.8a5.1,5.1,0,0,1-4.983,5.63ZM66,70.816a2.537,2.537,0,1,0,2.362,1.607l3.185-3.183A.953.953,0,1,0,70.2,67.893l-3.147,3.147A2.588,2.588,0,0,0,66,70.816Zm-.948-4.44H62.516a.951.951,0,1,1,0-1.9h2.537a.951.951,0,0,1,0,1.9ZM67.59,63.2H62.516a.951.951,0,0,1,0-1.9H67.59a.951.951,0,1,1,0,1.9Z" transform="translate(-60.363 -60.078)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/assets/icons/wshl.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32.983" height="20.19" viewBox="0 0 32.983 20.19">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#a6fffc"/>
+      <stop offset="0.449" stop-color="#fff"/>
+      <stop offset="1" stop-color="#90fbff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_57993" data-name="路径 57993" d="M61.089,233.882a1.594,1.594,0,0,1,1.594,1.594v5.147h4.454v-5.147a1.594,1.594,0,1,1,3.187,0v13.871a1.594,1.594,0,0,1-3.187,0v-6.225H62.682v6.225a1.594,1.594,0,1,1-3.186,0V235.476a1.594,1.594,0,0,1,1.593-1.594Zm11.1,13.337,3.234-6.719h2.207v6.7h.9v1.562h-.9v2.172H75.635v-2.172h-3.45v-1.548Zm1.464-.013h1.984V242.86Zm-19.008-9.175a1.349,1.349,0,0,0,2.7,0,5.4,5.4,0,0,0-10.793,0v8.5a5.4,5.4,0,0,0,10.795,0,1.349,1.349,0,0,0-2.7,0,2.7,2.7,0,0,1-5.4,0v-8.5a2.7,2.7,0,0,1,5.4,0Z" transform="translate(-46.046 -232.227)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

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

@@ -121,17 +121,17 @@
           <generalList class="content__module" :generalData="config.data" />
         </template>
         <template v-else-if="config.name === 'upDown'">
-          <upDown class="content__module" :option="config.config.items.option" :upDownData="config.data" />
+          <!-- <upDown class="content__module" :option="config.config.items.option" :upDownData="config.data" /> -->
+           <gasZyList gasZyListrt class="content__module" :option="config.config.option" :listData="config.data" />
         </template>
         <template v-else-if="config.name === 'chart_inject'">
-          <gasInjectChart class="content__module" :option="config.config.option" />
+          <gasInjectChart class="content__module" :option="config.config.option" :echartData="config.data"/>
         </template>
         <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" /> -->
-           <gasZyList gasZyListrt class="content__module" :option="config.config.option" />
+          <gasZyChart class="content__module" />
         </template>
         <template v-else-if="config.name === 'gas_warn_chart'">
           <gasWarnChart class="content__module" :option="config.config.option" />
@@ -143,15 +143,20 @@
           <gasDeviceStatusControl class="content__module" :option="config.config.option" :statusData="config.data" />
         </template>
         <template v-else-if="config.name === 'board_gas'">
-          <gasBoard class="content__module" :option="config.config.option" />
+          <gasBoard class="content__module" :option="config.config.option" :type="config.config.type" />
         </template>
          <template v-else-if="config.name === 'gas_inject_card'">
           <gasInjectCard class="content__module" :option="config.config.option" />
         </template>
-          <template v-else-if="config.name === 'gas_line_chart'">
+         <template v-else-if="config.name === 'gas_line_chart'">
           <echartLineDate class="content__module" :echartOption="config.config.echartOption" :ecahrtData="config.data" />
         </template>
-        
+        <template v-else-if="config.name === 'jk-video'">
+          <cameraModal class="content__module"  :deviceId="config.data" />
+        </template>
+          <template v-else-if="config.name === 'gas_chl_chart'">
+          <gasChlChart class="content__module"  :echartOption="config.config.echartOption" :echartData="config.data"></gasChlChart>
+        </template>
       </div>
     </div>
   </div>
@@ -195,7 +200,7 @@ 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 gasZyChart from './preset/gasZyChart.vue'
 import gasZyList from './preset/gasZyList.vue'
 import gasWarnChart from './preset/gasWarnChart.vue'
 import gasWarnList from './preset/gasWarnList.vue'
@@ -203,6 +208,8 @@ import gasDeviceStatusControl from './preset/gasDeviceStatusControl.vue'
 import gasBoard from './preset/gasBoard.vue'
 import gasInjectCard from './preset/gasInjectCard.vue'
 import echartLineDate from './gasInject/echartLineDate.vue'
+import cameraModal from './preset/cameraModal.vue'
+import gasChlChart from './preset/gasChlChart.vue'
 // import FIreWarn from './preset/FIreWarn.vue';
 // import FIreControl from './preset/FIreControl.vue';
 

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

@@ -4,7 +4,8 @@
     <template v-if="layout === 'val-top'">
       <slot name="value">
         <div class="mini-board__value" :class="`mini-board__value_${type}`">
-          {{ value }}
+          <span> {{ value }}</span>
+          <span style="margin-left: 5px;">{{ unit }}</span>
         </div>
       </slot>
       <slot name="label">
@@ -73,7 +74,7 @@ withDefaults(
   defineProps<{
     label: string;
     value?: string;
-    unit?:string;
+    unit?: string;
     // 告示牌布局，类型为：'val-top' | 'label-top'
     layout: string;
     // 告示牌类型，类型为：'A' | 'B' | 'C' | 'D' | 'E' | 'F' |'New' | 'localFannew'
@@ -188,6 +189,11 @@ defineEmits(['click']);
     --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');
+
+    --image-gas_board_bg2: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/3-2.png');
+    --image-gas_board_bg3: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/3-3.png');
+    --image-gas_board_bg4: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/3-4.png');
+    --image-gas_board_bg5: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/3-5.png');
   }
 }
 
@@ -234,6 +240,11 @@ defineEmits(['click']);
   --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');
+
+  --image-gas_board_bg2: url('@/assets/images/gasInjection/3-2.png');
+  --image-gas_board_bg3: url('@/assets/images/gasInjection/3-3.png');
+  --image-gas_board_bg4: url('@/assets/images/gasInjection/3-4.png');
+  --image-gas_board_bg5: url('@/assets/images/gasInjection/3-5.png');
   height: 50px;
   line-height: 25px;
   width: 130px;
@@ -396,38 +407,98 @@ defineEmits(['click']);
 
   &:nth-child(1) {
     background-image: var(--image-gas_board_bg);
-    .mini-board__value_Gas{
+
+    .mini-board__value_Gas {
       color: #2cffdd;
     }
   }
 
   &:nth-child(2) {
     background-image: var(--image-gas_board_bg1);
-    .mini-board__value_Gas{
+
+    .mini-board__value_Gas {
       color: #91e0ff;
     }
   }
 
   &:nth-child(3) {
     background-image: var(--image-gas_board_bg1);
-    .mini-board__value_Gas{
+
+    .mini-board__value_Gas {
       color: #91e0ff;
     }
   }
 
   &:nth-child(4) {
     background-image: var(--image-gas_board_bg);
-    .mini-board__value_Gas{
+
+    .mini-board__value_Gas {
       color: #2cffdd;
     }
   }
 }
-.mini-board__label_Gas{
+
+.mini-board__label_Gas {
   margin-bottom: 5px;
 }
-.mini-board__value_Gas{
+
+.mini-board__value_Gas {
   font-size: 12px;
-   font-family: 'douyuFont';
+  font-family: 'douyuFont';
+}
+
+.mini-board_gas-cc {
+  width: 166px;
+  height: 84px;
+  padding-top: 25px;
+  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_bg2);
+
+    .mini-board__value_gas-cc {
+         color: #91e0ff;
+    }
+  }
+
+  &:nth-child(2) {
+    background-image: var(--image-gas_board_bg5);
+
+    .mini-board__value_gas-cc {
+   color: #2cffdd;
+    }
+  }
+
+  &:nth-child(3) {
+    background-image: var(--image-gas_board_bg5);
+
+    .mini-board__value_gas-cc {
+        color: #2cffdd;
+    }
+  }
+
+  &:nth-child(4) {
+    background-image: var(--image-gas_board_bg2);
+
+    .mini-board__value_gas-cc {
+      color: #91e0ff;
+    }
+  }
+}
+
+.mini-board__value_gas-cc {
+  margin-bottom: 35px;
+}
+
+.mini-board__value_gas-cc {
+  font-size: 14px;
+  font-family: 'douyuFont';
 }
 
 .mini-board_E {
@@ -821,58 +892,67 @@ defineEmits(['click']);
     background-image: var(--image-jdjl);
   }
 }
-  .mini-board_inject-syq {
-    width: 100px;
-    height: auto;
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
+
+.mini-board_inject-syq {
+  width: 100px;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+
+  .mini-board__label_inject-syq {
+    width: 100%;
+    height: 100px;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: top center;
+    text-align: center;
+    padding-top: 100px;
+    line-height: 20px;
+    box-sizing: border-box;
+  }
+
+  .mini-board__value_inject-syq {
+    width: 100%;
+    height: 30px;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: top center;
+    text-align: center;
+    margin-top: 18px;
+    line-height: 35px;
+    box-sizing: border-box;
+    font-family: 'douyuFont';
+  }
+
+  &:nth-of-type(1) {
     .mini-board__label_inject-syq {
-      width: 100%;
-      height: 100px;
-      background-size: 100% 100%;
-      background-repeat: no-repeat;
-      background-position: top center;
-      text-align: center;
-      padding-top: 100px;
-      line-height: 20px;
-      box-sizing: border-box;
+      background-image: url('/@/assets/images/gasInjection/syq/7-1.png');
     }
+
     .mini-board__value_inject-syq {
-      width: 100%;
-      height: 30px;
-      background-size: 100% 100%;
-      background-repeat: no-repeat;
-      background-position: top center;
-      text-align: center;
-      margin-top: 18px;
-      line-height: 35px;
-      box-sizing: border-box;
-      font-family: 'douyuFont';
+      background-image: url('/@/assets/images/gasInjection/syq/7-2.png');
     }
-    &:nth-of-type(1) {
-      .mini-board__label_inject-syq {
-        background-image: url('/@/assets/images/gasInjection/syq/7-1.png');
-      }
-      .mini-board__value_inject-syq {
-        background-image: url('/@/assets/images/gasInjection/syq/7-2.png');
-      }
+  }
+
+  &:nth-of-type(2) {
+    .mini-board__label_inject-syq {
+      background-image: url('/@/assets/images/gasInjection/syq/7-3.png');
     }
-    &:nth-of-type(2) {
-      .mini-board__label_inject-syq {
-        background-image: url('/@/assets/images/gasInjection/syq/7-3.png');
-      }
-      .mini-board__value_inject-syq {
-        background-image: url('/@/assets/images/gasInjection/syq/7-4.png');
-      }
+
+    .mini-board__value_inject-syq {
+      background-image: url('/@/assets/images/gasInjection/syq/7-4.png');
+    }
+  }
+
+  &:nth-of-type(3) {
+    .mini-board__label_inject-syq {
+      background-image: url('/@/assets/images/gasInjection/syq/7-5.png');
     }
-    &:nth-of-type(3) {
-      .mini-board__label_inject-syq {
-        background-image: url('/@/assets/images/gasInjection/syq/7-5.png');
-      }
-      .mini-board__value_inject-syq {
-        background-image: url('/@/assets/images/gasInjection/syq/7-6.png');
-      }
+
+    .mini-board__value_inject-syq {
+      background-image: url('/@/assets/images/gasInjection/syq/7-6.png');
     }
   }
+}
 </style>

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

@@ -2,7 +2,7 @@
   <a-modal v-model:visible="visibleDetail" width="1350px" :footer="null" :title="modalTitle" centered destroyOnClose
     @cancel="handleCancel">
     <template v-if="deviceType == 'cc_gas_nd'">
-      <curveEchartDetail :sysType="'Cc'" :isShowExport="false" :tableColumn="tableColumnCc"></curveEchartDetail>
+      <curveEchartDetail :sysType="'Zq'" :isShowExport="false" :tableColumn="tableColumnCc"></curveEchartDetail>
     </template>
     <template v-if="deviceType == 'cc_gas_ll'">
       <curveEchartDetail :sysType="'Cc'" :isShowExport="false" :tableColumn="tableColumnCc"></curveEchartDetail>
@@ -11,17 +11,23 @@
       <curveEchartDetail :sysType="'Zq'" :isShowExport="false" :tableColumn="tableColumnSj"></curveEchartDetail>
     </template>
     <template v-if="deviceType == 'gas_zq_sj'">
-      <zqMonitorDetail :isShowExport="false" :tableColumn="tableColumnSj" :data="data" :optionDetail="optionDetailZq">
-      </zqMonitorDetail>
+      <!-- <zqMonitorDetail :isShowExport="false" :tableColumn="tableColumnSj" :data="data" :optionDetail="optionDetailZq">
+      </zqMonitorDetail> -->
+      <LineAndBarDetail :sysType="'Zq'" :isShowExport="false" :tableColumn="tableColumnSj"></LineAndBarDetail>
     </template>
-    <template v-if="deviceType == 'gas_zq_hj'">
+    <!-- <template v-if="deviceType == 'gas_zq_hj'">
       <zqMonitorDetail :isShowExport="true" :tableColumn="tableColumnHj"></zqMonitorDetail>
+    </template> -->
+    <template v-if="deviceType == 'gas_zq_hj'">
+      <environmentDetailTable :isShowExport="true"></environmentDetailTable>
     </template>
     <template v-if="deviceType == 'gas_zq_paramline'">
-      <curveEchartDetail :sysType="'Zq'" :isShowExport="false" :tableColumn="tableColumnSj"></curveEchartDetail>
+      <!-- <curveEchartDetail :sysType="'Gk'" :isShowExport="false" :tableColumn="tableColumnSj"></curveEchartDetail> -->
+      <echartLineDateGk :echartOption="echartOptionGk" :ecahrtData="echartDataGk" />
     </template>
     <template v-if="deviceType == 'gas_zq_video'">
-      <zqMonitorDetail :isShowExport="true" :tableColumn="tableColumnSj"></zqMonitorDetail>
+      <!-- <zqMonitorDetail :isShowExport="true" :tableColumn="tableColumnSj"></zqMonitorDetail> -->
+       <cameraDetailModal></cameraDetailModal>
     </template>
     <template v-if="deviceType == 'gas_cc_detail'">
       <zqMonitorDetail :isShowExport="false" :tableColumn="tableColumnCc" :optionDetail="optionDetailCc">
@@ -34,16 +40,31 @@
     <template v-if="deviceType == 'syq-env-monitor'">
       <SyqDetails />
     </template>
+    <template v-if="deviceType == 'zy-device-status'">
+      <systemDetailTable :isShowExport="true"></systemDetailTable>
+    </template>
+    <template v-if="deviceType == 'warn-info'">
+      <warnDetailTable :isShowExport="true"></warnDetailTable>
+    </template>
+    <template v-if="deviceType == 'device_status_control'">
+      <zqMonitorDetail :isShowExport="true" :tableColumn="columnCc"></zqMonitorDetail>
+    </template>
+   
   </a-modal>
-
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import curveEchartDetail from './curveEchartDetail.vue'
 import zqMonitorDetail from './zqMonitorDetail.vue'
-import { tableColumnSj, tableColumnHj, tableColumnCc, optionDetailZq, optionDetailCc } from '../gasInject/gasInject.data'
+import { tableColumnSj, tableColumnHj, tableColumnCc, optionDetailZq, optionDetailCc, columnCc, echartOptionGk } from '../gasInject/gasInject.data'
 import SyqDetails from './SyqDetails.vue';
+import systemDetailTable from './systemDetailTable.vue'
+import warnDetailTable from './warnDetailTable.vue'
+import LineAndBarDetail from './LineAndBarDetail.vue'
+import environmentDetailTable from './environmentDetailTable.vue'
+import echartLineDateGk from './echartLineDateGk.vue'
+import cameraDetailModal from './cameraDetailModal.vue'
 let props = defineProps({
   //是否显示弹窗
   showDetail: {
@@ -54,39 +75,45 @@ let props = defineProps({
     type: String
   },
   //数据
-  data:{
-    type:Object
+  data: {
+    type: Object
   }
 
 })
 let visibleDetail = ref(false)
 let $emit = defineEmits(['closeModal'])
 
-// //注气压力/流量配置项
-// let optionDataYl = ref<any[]>([
-//   { label: '压力', value: 'yl' },
-//   { label: '流量', value: 'll' },
-// ])
-//抽采流量配置项
-// let optionDataLl = ref<any[]>([
-//   { label: '纯量', value: 'cl' },
-//   { label: '混量', value: 'hl' },
-// ])
+let echartDataGk = reactive({
+  xData: ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31'],
+  yData: ["20", "50", "12", "65", "30", "60"],
+  yData1: ["40", "60", "22", "85", "50", "40"],
+  yData2: ["70", "30", "42", "65", "80", "60"],
+  yData3: ['50','30','68','42','58','37'],
+  yData4: []
+})
 
 //弹窗标题
 let modalTitle = computed(() => {
   if (props.deviceType == 'cc_gas_nd' || props.deviceType == 'cc_gas_ll' || props.deviceType == 'gas_cc_line') {
     return '抽采参数时程曲线'
-  } else if (props.deviceType == 'gas_zq-yl' || props.deviceType == 'gas_zq_paramline') {
+  } else if (props.deviceType == 'gas_zq-yl') {
     return '注气参数时程曲线'
   } else if (props.deviceType == 'gas_zq_sj') {
     return '注气数据监测'
   } else if (props.deviceType == 'gas_zq_hj') {
     return '环境监测'
   } else if (props.deviceType == 'gas_zq_video') {
-    return '历史数据'
+    return '视屏监控详情'
   } else if (props.deviceType == 'gas_cc_detail') {
     return '抽采数据监测'
+  } else if (props.deviceType == 'zy-device-status') {
+    return '系统运行状态'
+  } else if (props.deviceType == 'warn-info') {
+    return '异常提醒'
+  } else if (props.deviceType == 'device_status_control') {
+    return '运行历史'
+  } else if (props.deviceType == 'gas_zq_paramline') {
+    return '装备运行工况监测'
   }
 })
 
@@ -102,7 +129,7 @@ watch(() => props.showDetail, (newV, oldV) => {
 }, { immediate: true })
 </script>
 
-<style lang="less" >
+<style lang="less">
 .zxm-modal-content {
   // height: 700px;
   border: none !important;

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

@@ -0,0 +1,219 @@
+<template>
+  <div class="bar-and-line">
+    <template v-if="!showExport">
+      <div class="curve-nav">
+        <div class="nav-search">
+          <!-- 时间查询选项 -->
+          <a-radio-group v-model:value="timerTabs" name="radioGroup">
+            <a-radio value="day">按天</a-radio>
+            <a-radio value="hours">按小时</a-radio>
+            <a-radio value="minutes">按分钟</a-radio>
+          </a-radio-group>
+          <!-- 时间查询条件 -->
+          <a-range-picker style="width:280px" v-model:value="timerSearch" :show-time="formatDate"
+            format="YYYY-MM-DD HH:mm" :placeholder="['开始时间', '结束时间']" />
+        </div>
+        <div class="nav-btn" @click="handleHistory">
+          <div class="nav-text">
+            <SvgIcon class="icon-style" size="18" name="gas-export"></SvgIcon>
+            <span>历史数据详情</span>
+          </div>
+        </div>
+      </div>
+      <div class="curve-line-content">
+        <div class="curve-content-item" v-for="(item, index) in listData" :key="index">
+          <div class="content-item-title">{{ item.label }}</div>
+          <div class="content-echart-box">
+            <echartLineDate :ecahrtData="item" :echartOption="echartOption"></echartLineDate>
+          </div>
+        </div>
+      </div>
+      <div class="curve-bar-content">
+          <gasInjectChart  :option="echartBarOption" />
+      </div>
+    </template>
+    <template v-else>
+      <zqHistoryExport :tableColumn="tableColumn" @handleBack="handleBack"></zqHistoryExport>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue'
+import echartLineDate from './echartLineDate.vue'
+import { SvgIcon } from '/@/components/Icon';
+import zqHistoryExport from './zqHistoryExport.vue'
+import gasInjectChart from '../preset/gasInjectChart.vue'
+import { zqEchartOption, ccEchartOption,echartBarOption } from './gasInject.data'
+
+let props = defineProps({
+  //是否打开历史数据页面
+  isShowExport: {
+    type: Boolean
+  },
+  //table列
+  tableColumn: {
+    type: Array
+  },
+  //详情图表系统类型
+  sysType: {
+    type: String
+  }
+})
+//注气参数详情数据
+let listData = ref<any[]>([
+  { label: '钻孔1', xData: ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31'], yData: ["20", "50", "12", "65", "30", "60"], yData1: ["40", "60", "22", "85", "50", "40"], yData2: ["70", "30", "42", "65", "80", "60"], },
+  { label: '钻孔2', xData: ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31'], yData: ["20", "50", "12", "65", "30", "60"], yData1: ["40", "60", "22", "85", "50", "40"], yData2: ["70", "30", "42", "65", "80", "60"], },
+  { label: '钻孔3', xData: ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31'], yData: ["20", "50", "12", "65", "30", "60"], yData1: ["40", "60", "22", "85", "50", "40"], yData2: ["70", "30", "42", "65", "80", "60"], },
+  { label: '钻孔4', xData: ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31'], yData: ["20", "50", "12", "65", "30", "60"], yData1: ["40", "60", "22", "85", "50", "40"], yData2: ["70", "30", "42", "65", "80", "60"], },
+  { label: '钻孔5', xData: ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31'], yData: ["20", "50", "12", "65", "30", "60"], yData1: ["40", "60", "22", "85", "50", "40"], yData2: ["70", "30", "42", "65", "80", "60"], },
+  { label: '钻孔6', xData: ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31'], yData: ["20", "50", "12", "65", "30", "60"], yData1: ["40", "60", "22", "85", "50", "40"], yData2: ["70", "30", "42", "65", "80", "60"], },
+  { label: '钻孔7', xData: ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31'], yData: ["20", "50", "12", "65", "30", "60"], yData1: ["40", "60", "22", "85", "50", "40"], yData2: ["70", "30", "42", "65", "80", "60"], },
+  { label: '钻孔8', xData: ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31'], yData: ["20", "50", "12", "65", "30", "60"], yData1: ["40", "60", "22", "85", "50", "40"], yData2: ["70", "30", "42", "65", "80", "60"], },
+  { label: '钻孔9', xData: ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31'], yData: ["20", "50", "12", "65", "30", "60"], yData1: ["40", "60", "22", "85", "50", "40"], yData2: ["70", "30", "42", "65", "80", "60"], },
+])
+let timerTabs = ref('day')
+let showExport = ref(false)
+//查询时间段-天
+let timerSearch = ref('')
+//时间显示格式
+let formatDate = computed(() => {
+  let showTime = {}
+  if (timerTabs.value == 'day') {
+    showTime = {}
+  } else if (timerTabs.value == 'hours') {
+    showTime = Object.assign({}, { format: 'HH' })
+  } else if (timerTabs.value == 'minutes') {
+    showTime = Object.assign({}, { format: 'HH:mm' })
+  }
+  return showTime
+})
+//图表配置项
+let echartOption = computed(() => {
+  return props.sysType == 'Cc' ? ccEchartOption : zqEchartOption
+})
+
+//打开历史数据详情及导出
+function handleHistory() {
+  showExport.value = true
+}
+//历史数据返回至详情
+function handleBack() {
+  showExport.value = false
+}
+
+watch(() => props.isShowExport, (newV, oldV) => {
+  showExport.value = newV
+}, { immediate: true })
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .gas-inject-card {
+    --image-inject_curve_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/9-3.png');
+    --image-inject_curve_bg1: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/9-4.png');
+  }
+}
+
+.bar-and-line {
+  --image-inject_curve_bg: url('@/assets/images/gasInjection/9-3.png');
+  --image-inject_curve_bg1: url('@/assets/images/gasInjection/9-4.png');
+  width: 100%;
+  height: 100%;
+  padding: 25px 20px;
+  box-sizing: border-box;
+
+  .curve-nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 39px;
+    margin-bottom: 15px;
+    padding: 0px 20px;
+    background: var(--image-inject_curve_bg) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .curve-line-content {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    height: 415px;
+    margin-bottom: 15px;
+    overflow-y: auto;
+  }
+
+  .curve-content-item {
+    position: relative;
+    width: 315px;
+    height: 200px;
+    margin: 5px;
+    background: var(--image-inject_curve_bg1) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .content-item-title {
+    position: absolute;
+    left: 15px;
+    top: 3px;
+    color: #fff;
+  }
+
+  .content-echart-box {
+    position: absolute;
+    left: 0;
+    top: 25px;
+    width: 100%;
+    height: calc(100% - 25px);
+  }
+
+  .curve-bar-content {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    height: 240px;
+   background: var(--image-inject_curve_bg1) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .nav-btn {
+    width: 125px;
+    height: 78%;
+    padding: 2px;
+    border: 1px solid #1081d7;
+    cursor: pointer;
+    color: #fff;
+  }
+
+  .nav-text {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #1081d7;
+  }
+
+  .icon-style {
+    margin-right: 5px;
+  }
+}
+
+:deep(.zxm-picker) {
+  background: #0b223f !important;
+  border: 1px solid #1081d7 !important;
+  border-radius: 4px;
+  margin-left: 10px;
+}
+
+:deep(.zxm-picker-input > input) {
+  color: #fff;
+}
+
+:deep(.zxm-picker-separator) {
+  color: #fff;
+}
+</style>

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

@@ -0,0 +1,115 @@
+<template>
+  <div class="camera-modal">
+    <div class="camrea-area">
+      <div v-if="renderPlayer" ref="playerRef" style="
+     display: flex;
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+      pointer-events: none;
+    ">
+      </div>
+    </div>
+    <div class="pagination-area">
+      <Pagination v-model:current="pagination.current" v-model:page-size="pagination.pageSize"
+        :total="cameraData.length" @change="onChange" />
+    </div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, reactive, onBeforeUnmount, computed } from 'vue';
+import { useCamera } from '/@/hooks/system/useCameraPianation';
+import { Pagination, Empty } from 'ant-design-vue';
+
+let props = defineProps({
+  cameraData: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  },
+});
+const { getCamera, removeCamera, } = useCamera();
+const playerRef = ref();
+const renderPlayer = ref(true);
+let pagination = reactive({
+  current: 1,
+  pageSize: 6,
+})
+
+
+let cameraD: any = computed(() => {
+  let cameras: any[] = []
+  if (props.cameraData.length <= pagination.pageSize) {
+    cameras = props.cameraData
+  } else {
+    const size = pagination.pageSize;
+    const result: any = [];
+    for (let i = 0; i < props.cameraData.length; i += size) {
+      result.push(props.cameraData.slice(i, i + size));
+    }
+    cameras = result[pagination.current - 1]
+  }
+  return cameras
+})
+
+
+
+//分页
+async function onChange(page) {
+  pagination.current = page
+  await getCamera('', playerRef, renderPlayer, '', cameraD.value);
+}
+
+onMounted(async () => {
+  await getCamera('', playerRef, renderPlayer, '', cameraD.value);
+});
+
+onBeforeUnmount(() => {
+  removeCamera(playerRef);
+});
+</script>
+
+<style lang="less" scoped>
+.camera-modal {
+  width: 100%;
+
+  .camrea-area {
+    width: 100%;
+    height: 600px;
+  }
+
+  .pagination-area {
+    width: 100%;
+    height: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+}
+
+:deep(#LivePlayerBox) {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  pointer-events: none;
+
+  .liveVideo {
+    width: 462px !important;
+    height: 276px !important;
+    padding: 15px !important;
+    align-self: auto !important;
+    margin: 10px 8px !important;
+    background-size: 100% 100% !important;
+  }
+
+  .video-parent {
+    pointer-events: auto !important;
+    align-self: auto !important;
+  }
+}
+</style>

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

@@ -13,18 +13,13 @@
           <a-range-picker style="width:280px" v-model:value="timerSearch" :show-time="formatDate"
             format="YYYY-MM-DD HH:mm" :placeholder="['开始时间', '结束时间']" />
         </div>
-     
-          <a-radio-group v-model:value="nowData" name="radioGroup">
-            <a-radio v-for="(item, index) in option" :value="item.value">{{ item.label }}</a-radio>
-          </a-radio-group>
-     
-          <div class="nav-btn" @click="handleHistory">
-            <div class="nav-text">
-              <SvgIcon class="icon-style" size="18" name="gas-export"></SvgIcon>
-              <span>历史数据详情</span>
-            </div>
+        <div class="nav-btn" @click="handleHistory">
+          <div class="nav-text">
+            <SvgIcon class="icon-style" size="18" name="gas-export"></SvgIcon>
+            <span>历史数据详情</span>
           </div>
-       
+        </div>
+
       </div>
       <div class="curve-content">
         <div class="curve-content-item" v-for="(item, index) in listData" :key="index">
@@ -46,13 +41,10 @@ import { computed, reactive, ref, watch } from 'vue'
 import echartLineDate from './echartLineDate.vue'
 import { SvgIcon } from '/@/components/Icon';
 import zqHistoryExport from './zqHistoryExport.vue'
-import { zqEchartOption, ccEchartOption } from './gasInject.data'
+import { zqEchartOption, ccEchartOption, gkEchartOption } from './gasInject.data'
 
 let props = defineProps({
-  //选择按钮配置项
-  option: {
-    type: Array as any,
-  },
+
   //是否打开历史数据页面
   isShowExport: {
     type: Boolean
@@ -66,7 +58,7 @@ let props = defineProps({
     type: String
   }
 })
-
+//注气参数详情数据
 let listData = ref<any[]>([
   { label: '绘流管1', xData: ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31'], yData: ["20", "50", "12", "65", "30", "60"], yData1: ["40", "60", "22", "85", "50", "40"], yData2: ["70", "30", "42", "65", "80", "60"], },
   { label: '绘流管2', xData: ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31'], yData: ["20", "50", "12", "65", "30", "60"], yData1: ["40", "60", "22", "85", "50", "40"], yData2: ["70", "30", "42", "65", "80", "60"], },
@@ -80,7 +72,6 @@ let listData = ref<any[]>([
 ])
 
 let timerTabs = ref('day')
-let nowData = ref('cl')
 let showExport = ref(false)
 //查询时间段-天
 let timerSearch = ref('')
@@ -98,7 +89,7 @@ let formatDate = computed(() => {
 })
 //图表配置项
 let echartOption = computed(() => {
-  return props.sysType == 'Cc' ? ccEchartOption : zqEchartOption
+  return props.sysType == 'Cc' ? ccEchartOption : props.sysType == 'Zq' ? zqEchartOption : gkEchartOption
 })
 
 //打开历史数据详情及导出
@@ -106,8 +97,8 @@ function handleHistory() {
   showExport.value = true
 }
 //历史数据返回至详情
-function handleBack(){
-  showExport.value=false
+function handleBack() {
+  showExport.value = false
 }
 
 watch(() => props.isShowExport, (newV, oldV) => {

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

@@ -1,9 +1,18 @@
 <template>
-  <div class="echart-line" ref="echartLines"></div>
+  <div class="echartLine">
+    <!-- 年月日切换 -->
+    <div v-if="echartOption.showTime" class="radio-box">
+      <a-radio-group v-model:value="nowData" name="radioGroup" @change="changeRadio">
+        <a-radio value="minutes">按分钟</a-radio>
+        <a-radio value="hours">按小时</a-radio>
+      </a-radio-group>
+    </div>
+    <div class="echart-line" ref="echartLines"></div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { nextTick, onMounted, ref } from 'vue'
+import { nextTick, onMounted, reactive, ref, watch } from 'vue'
 import * as echarts from 'echarts';
 
 let props = defineProps({
@@ -17,6 +26,8 @@ let props = defineProps({
   }
 })
 let echartLines = ref(null)
+let nowData = ref('hours')
+let ecahrtDatas = reactive({}) as any
 
 function getOption() {
   nextTick(() => {
@@ -36,7 +47,7 @@ function getOption() {
         },
         axisLabel: { //坐标轴刻度标签的相关设置
           textStyle: {
-            color: '#7ec7ff',
+            color: '#a3a7ae',
             padding: 5,
             fontSize: 12
           },
@@ -50,22 +61,13 @@ function getOption() {
         axisTick: {
           show: false,
         },
-        data: props.ecahrtData.xData
+        data: ecahrtDatas.xData
       }],
-      yAxis:props.echartOption.yAxis,
+      yAxis: props.echartOption.yAxis,
       series: props.echartOption.series.map((el, index) => {
         return {
-          name: el.name,
-          type: el.type,
-          yAxisIndex:el.yAxisIndex,
-          symbol: el.symbol, // 默认是空心圆（中间是白色的），改成实心圆
-          showAllSymbol: el.showAllSymbol,
-          symbolSize: el.symbolSize,
-          smooth: el.smooth,
-          lineStyle: el.lineStyle,
-          itemStyle: el.itemStyle,
-          areaStyle: el.areaStyle,
-          data: props.ecahrtData[el.data]
+          ...el,
+          data: ecahrtDatas[el.data]
         }
       })
     };
@@ -75,14 +77,74 @@ function getOption() {
     };
   });
 }
-onMounted(() => {
+//选项切换
+function changeRadio(val) {
+  console.log(val, 'val---')
+  nowData.value = val.target.value
+  getFormat()
+}
+//数据格式化
+function getFormat() {
+  if (nowData.value == 'hours') {
+    ecahrtDatas.xData = ecahrtDatas.hourData.xlist
+    ecahrtDatas.injectionPressure = ecahrtDatas.hourData.datalist.records.map(el => el.readData.injectionPressure) || []
+    ecahrtDatas.flowStdInstant = ecahrtDatas.hourData.datalist.records.map(el => el.readData.flowStdInstant) || []
+    ecahrtDatas.yData = ["20", "50", "12", "65", "30", "60", "50", "12", "65",]
+    ecahrtDatas.yData1 = ["40", "60", "22", "85", "50", "40", "60", "22", "85",]
+    ecahrtDatas.yData2 = ["70", "30", "42", "65", "80", "60", "30", "42", "65",]
+  } else {
+    ecahrtDatas.xData = ecahrtDatas.minitesData.xlist || []
+    ecahrtDatas.injectionPressure = ecahrtDatas.minitesData.datalist.records.map(el => el.readData.injectionPressure) || []
+    ecahrtDatas.flowStdInstant = ecahrtDatas.minitesData.datalist.records.map(el => el.readData.flowStdInstant) || []
+    ecahrtDatas.yData = ["200", "500", "120", "650", "300", "600", "500", "120", "650",]
+    ecahrtDatas.yData1 = ["400", "600", "220", "850", "500", "400", "600", "220", "850",]
+    ecahrtDatas.yData2 = ["700", "300", "420", "650", "800", "600", "300", "420", "650",]
+  }
   getOption()
-})
+}
+
+watch(() => props.ecahrtData, (newV, oldV) => {
+  if (newV) {
+    ecahrtDatas = Object.assign({}, newV)
+    getFormat()
+  }
+
+}, { immediate: true, deep: true })
 </script>
 
 <style lang="less" scoped>
-.echart-line {
+.echartLine {
+  position: relative;
   width: 100%;
   height: 100%;
+
+  .radio-box {
+    position: absolute;
+    right: 0;
+    top: 0%;
+  }
+
+  .echart-line {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+::v-deep .radio-box {
+  background-color: transparent !important;
+}
+
+::v-deep .zxm-radio-inner {
+  background-color: transparent;
+}
+
+::v-deep .zxm-radio-wrapper {
+  font-size: 12px;
+}
+
+::v-deep .zxm-radio-inner {
+  width: 10px;
+  height: 10px;
+  top: -2px !important;
 }
 </style>

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

@@ -0,0 +1,192 @@
+<template>
+  <div class="echartLineDateGk">
+    <div class="curve-nav">
+      <div class="nav-search">
+        <!-- 时间查询选项 -->
+        <a-radio-group v-model:value="timerTabs" name="radioGroup">
+          <a-radio value="day">按天</a-radio>
+          <a-radio value="hours">按小时</a-radio>
+          <a-radio value="minutes">按分钟</a-radio>
+        </a-radio-group>
+        <!-- 时间查询条件 -->
+        <a-range-picker style="width:280px" v-model:value="timerSearch" :show-time="formatDate"
+          format="YYYY-MM-DD HH:mm" :placeholder="['开始时间', '结束时间']" />
+      </div>
+      <div class="nav-btn" @click="handleHistory">
+        <div class="nav-text">
+          <SvgIcon class="icon-style" size="18" name="gas-export"></SvgIcon>
+          <span>导出</span>
+        </div>
+      </div>
+
+    </div>
+    <div class="echart-line" ref="echartLines"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue'
+import * as echarts from 'echarts';
+
+let props = defineProps({
+  //图表配置项
+  echartOption: {
+    type: Object as any
+  },
+  //图表数据
+  ecahrtData: {
+    type: Object as any
+  }
+})
+
+let timerTabs = ref('day')
+//查询时间段-天
+let timerSearch = ref('')
+let echartLines = ref(null)
+
+//时间显示格式
+let formatDate = computed(() => {
+  let showTime = {}
+  if (timerTabs.value == 'day') {
+    showTime = {}
+  } else if (timerTabs.value == 'hours') {
+    showTime = Object.assign({}, { format: 'HH' })
+  } else if (timerTabs.value == 'minutes') {
+    showTime = Object.assign({}, { format: 'HH:mm' })
+  }
+  return showTime
+})
+
+function getOption() {
+  nextTick(() => {
+    let myChart = echarts.init(echartLines.value);
+    let option = {
+      tooltip: props.echartOption.tooltip,
+      grid: props.echartOption.grid,
+      legend: props.echartOption.legend,
+      xAxis: [{
+        type: 'category',
+        boundaryGap: false,
+        axisLine: { //坐标轴轴线相关设置。数学上的x轴
+          show: true,
+          lineStyle: {
+            color: 'rgba(4, 49, 79)',
+          },
+        },
+        axisLabel: { //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: '#a3a7ae',
+            padding: 5,
+            fontSize: 12
+          },
+          formatter: function (data) {
+            return data
+          }
+        },
+        splitLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        data: props.ecahrtData.xData
+      }],
+      yAxis: props.echartOption.yAxis,
+      series: props.echartOption.series.map((el, index) => {
+        return {
+          ...el,
+          data: props.ecahrtData[el.data]
+        }
+      })
+    };
+    myChart.setOption(option);
+    window.onresize = function () {
+      myChart.resize();
+    };
+  });
+}
+//导出
+function handleHistory() {
+
+}
+
+watch(() => props.ecahrtData, (newV, oldV) => {
+  if (newV) {
+    getOption()
+  }
+}, { immediate: true })
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .echartLineDateGk {
+    --image-inject_curve_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/9-3.png');
+    --image-inject_curve_bg1: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/9-4.png');
+  }
+}
+
+.echartLineDateGk {
+  --image-inject_curve_bg: url('@/assets/images/gasInjection/9-3.png');
+  --image-inject_curve_bg1: url('@/assets/images/gasInjection/9-4.png');
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 15px 20px;
+  box-sizing: border-box;
+
+  .curve-nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 39px;
+    margin-bottom: 15px;
+    padding: 0px 20px;
+    background: var(--image-inject_curve_bg) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .nav-btn {
+    width: 125px;
+    height: 78%;
+    padding: 2px;
+    border: 1px solid #1081d7;
+    cursor: pointer;
+    color: #fff;
+  }
+
+  .nav-text {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #1081d7;
+  }
+
+  .icon-style {
+    margin-right: 5px;
+  }
+
+  .echart-line {
+    width: 100%;
+    height: 420px;
+  }
+}
+:deep(.zxm-picker) {
+  background: #0b223f !important;
+  border: 1px solid #1081d7 !important;
+  border-radius: 4px;
+  margin-left: 10px;
+}
+
+:deep(.zxm-picker-input > input) {
+  color: #fff;
+}
+
+:deep(.zxm-picker-separator) {
+  color: #fff;
+}
+</style>

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

@@ -0,0 +1,230 @@
+<template>
+  <div class="env-history-export">
+    <SvgIcon v-if="!isShowIcon" class="icon-style-back" size="32" name="modal-back" @click="handleBack"></SvgIcon>
+    <div class="nav-box">
+      <div class="nav-search">
+        <div class="search-item">
+          <span>时间:</span>
+          <a-range-picker style="width:300px" v-model:value="searchData.timer" :show-time="{ format: 'HH:mm' }"
+            format="YYYY-MM-DD HH:mm" :placeholder="['开始时间', '结束时间']" @change="onRangeChange" />
+        </div>
+        <div class="search-item">
+          <span>分站:</span>
+          <a-select ref="select" v-model:value="searchData.station" style="width: 240px">
+            <a-select-option v-for="(item, index) in optionList" :key="item.label" :value="item.value">{{ item.label
+            }}</a-select-option>
+          </a-select>
+        </div>
+        <div class="search-item">
+          <a-button type="primary" preIcon="ant-design:search-outlined">查询</a-button>
+        </div>
+      </div>
+      <div class="nav-btn" @click="handleHisExport">
+        <div class="nav-text">
+          <SvgIcon class="icon-style" size="18" name="gas-export"></SvgIcon>
+          <span>数据导出</span>
+        </div>
+      </div>
+    </div>
+    <div class="main-content">
+      <a-table size="small" :dataSource="dataSource" :columns="tableColumn" :scroll="{ y: 455 }"
+        :pagination="pagination">
+        <template #action="{ record }">
+          <!-- <a class="table-action-link" @click="handleSpDetail(record)">审批详情</a> -->
+        </template>
+      </a-table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import { SvgIcon } from '/@/components/Icon';
+
+let props = defineProps({
+  //是否显示返回按钮
+  isShowIcon: {
+    type: Boolean
+  },
+  tableColumn: {
+    type: Array
+  }
+})
+
+let searchData = reactive({
+  timer: '',
+  station: '',
+})
+let optionList = ref<any[]>([
+  { label: '分站', value: '1' },
+  { label: '分站1', value: '2' },
+  { label: '分站2', value: '3' },
+])
+let dataSource = ref<any[]>([
+  { fileName: '测试' },
+  { fileName: '测试' },
+  { fileName: '测试' },
+  { fileName: '测试' },
+  { fileName: '测试' },
+  { fileName: '测试' },
+  { fileName: '测试' },
+  { fileName: '测试' },
+  { fileName: '测试' },
+  { fileName: '测试' },
+  { fileName: '测试' },
+  { fileName: '测试' },
+  { fileName: '测试' },
+])
+//分页参数配置
+let pagination = reactive({
+  current: 1, // 当前页码
+  pageSize: 15, // 每页显示条数
+  total: 0, // 总条目数，后端返回
+  // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
+  showSizeChanger: true, // 是否可改变每页显示条数
+  pageSizeOptions: ['15', '20', '25', '30', '50'], // 可选的每页显示条数
+});
+let $emit = defineEmits(['handleBack'])
+
+//返回上一级
+function handleBack() {
+  $emit('handleBack')
+}
+//导出历史数据
+function handleHisExport() { }
+//日期切换
+function onRangeChange() { }
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .env-history-export {
+    --image-inject_zq_monitor: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/9-3.png');
+  }
+}
+
+.env-history-export {
+  --image-inject_zq_monitor: url('@/assets/images/gasInjection/9-3.png');
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .icon-style-back {
+    position: absolute;
+    left: 6px;
+    top: -44px;
+    cursor: pointer;
+  }
+
+  .nav-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 39px;
+    padding: 0px 20px;
+    margin-bottom: 15px;
+    background: var(--image-inject_zq_monitor) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .nav-search {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    color: #fff;
+  }
+
+  .search-item {
+    margin-right: 40px;
+  }
+
+  .nav-btn {
+    width: 100px;
+    height: 78%;
+    padding: 2px;
+    border: 1px solid #1081d7;
+    cursor: pointer;
+    color: #fff;
+  }
+
+  .nav-text {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #1081d7;
+  }
+
+  .icon-style {
+    margin-right: 5px;
+  }
+
+  .main-content {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    height: calc(100% - 54px);
+  }
+}
+
+:deep(.zxm-picker) {
+  background: #0b223f !important;
+  border: 1px solid #1081d7 !important;
+  border-radius: 4px;
+  margin-left: 10px;
+}
+
+:deep(.zxm-picker-input > input) {
+  color: #fff;
+}
+
+:deep(.zxm-picker-separator) {
+  color: #fff;
+}
+
+:deep(.zxm-select) {
+  color: #fff !important;
+}
+
+:deep(.zxm-select-selector) {
+  background: #0b223f !important;
+  border: 1px solid #1081d7 !important;
+  border-radius: 4px;
+  margin-left: 10px;
+}
+
+
+:deep(.zxm-table-header) {
+  border-left: 1px solid #2896ca !important;
+  border-right: 1px solid #2896ca !important;
+}
+
+:deep(.zxm-table-thead > tr > th:last-child) {
+  border-right: 1px solid #2896ca !important;
+}
+
+:deep(.zxm-table-tbody > tr) {
+  &:nth-child(odd) {
+    td {
+      background-color: #0d2c50 !important;
+    }
+
+  }
+
+  &:nth-child(even) {
+    td {
+      background-color: #0d233f !important;
+    }
+
+  }
+}
+
+:deep(.zxm-table-tbody > tr > td) {
+  border-color: transparent !important;
+  background: #0a2140 !important;
+}
+</style>

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

@@ -0,0 +1,35 @@
+<template>
+  <div class="environment-detail-table">
+    <a-tabs v-model:activeKey="activeKey">
+      <a-tab-pane key="1" tab="氧气传感器">
+        <environHistoryExport :isShowIcon="true" :tableColumn="columnZy"></environHistoryExport>
+      </a-tab-pane>
+      <a-tab-pane key="2" tab="甲烷传感器">
+        <environHistoryExport :isShowIcon="true" :tableColumn="columnCc"></environHistoryExport>
+      </a-tab-pane>
+      <a-tab-pane key="3" tab="温度传感器">
+        <environHistoryExport :isShowIcon="true" :tableColumn="columnCc"></environHistoryExport>
+      </a-tab-pane>
+       <a-tab-pane key="4" tab="CO传感器">
+        <environHistoryExport :isShowIcon="true" :tableColumn="columnCc"></environHistoryExport>
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import { ref } from 'vue'
+import environHistoryExport from './environHistoryExport.vue'
+import { columnZy, columnCc } from './gasInject.data'
+
+let activeKey = ref('1')
+</script>
+
+<style lang="less" scoped>
+.environment-detail-table {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+}
+</style>

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

@@ -1,6 +1,110 @@
 import * as echarts from 'echarts';
 import { BasicColumn } from '/@/components/Table';
 
+export let columnZy: BasicColumn[] = [
+  {
+    title: '序号',
+    width: 60,
+    align: 'center',
+    customRender: ({ index }: { index: number }) => `${index + 1}`
+  },
+  {
+    title: '时间',
+    dataIndex: 'fileName',
+    key: 'fileName',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '累计流量',
+    dataIndex: 'fileType_dictText',
+    key: 'fileType_dictText',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '标况瞬量',
+    dataIndex: 'fileType_dictText',
+    key: 'fileType_dictText',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '工况瞬量',
+    dataIndex: 'fileType_dictText',
+    key: 'fileType_dictText',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '压力',
+    dataIndex: 'fileType_dictText',
+    key: 'fileType_dictText',
+    align: 'center',
+    ellipsis: true,
+  },
+  // {
+  // title: '审批操作',
+  // dataIndex: 'actionSp',
+  // width: 200,
+  // align: 'center',
+  // slots: { customRender: 'actionSp' },
+  // },
+
+]
+
+export let columnCc: BasicColumn[] = [
+  {
+    title: '序号',
+    width: 60,
+    align: 'center',
+    customRender: ({ index }: { index: number }) => `${index + 1}`
+  },
+  {
+    title: '时间1',
+    dataIndex: 'fileName',
+    key: 'fileName',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '累计流量1',
+    dataIndex: 'fileType_dictText',
+    key: 'fileType_dictText',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '标况瞬量1',
+    dataIndex: 'fileType_dictText',
+    key: 'fileType_dictText',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '工况瞬量1',
+    dataIndex: 'fileType_dictText',
+    key: 'fileType_dictText',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '压力1',
+    dataIndex: 'fileType_dictText',
+    key: 'fileType_dictText',
+    align: 'center',
+    ellipsis: true,
+  },
+  // {
+  // title: '审批操作',
+  // dataIndex: 'actionSp',
+  // width: 200,
+  // align: 'center',
+  // slots: { customRender: 'actionSp' },
+  // },
+
+]
+
 export let tableColumnSj: BasicColumn[] = [
   {
     title: '序号',
@@ -374,6 +478,7 @@ export let optionDetailCc = [
 
 //注气详情图表配置项
 export let zqEchartOption = {
+  showTime: false,
   tooltip: {
     trigger: 'axis',
     padding: 8,
@@ -384,10 +489,10 @@ export let zqEchartOption = {
     },
   },
   grid: {
-    top: '27%',
-    left: '7%',
-    right: '5%',
-    bottom: '8%',
+    top: '28%',
+    left: '6%',
+    right: '6%',
+    bottom: '7%',
     containLabel: true
   },
   legend: {
@@ -402,47 +507,89 @@ export let zqEchartOption = {
       fontSize: 12,
     },
     data: [
-      { name: '注气流量' },
-      { name: '注气压力' },
+      { name: '注气标况瞬量' },
+      { name: '瞬时压力' },
     ]
   },
-  yAxis: [{
-    name: 'MPa',
-    nameTextStyle: {
-      color: "#7ec7ff",
-      fontSize: 12,
-      padding: 0
-    },
-    min: 0,
-    splitLine: {
-      show: true,
-      lineStyle: {
-        color: 'rgba(4, 49, 79)',
+  yAxis: [
+    {
+      type: 'value',
+      position: 'left', // Y轴1在左边
+      name: '(Nm³/min)',
+      nameTextStyle: {
+        color: "#a3a7ae",
+        fontSize: 12,
+        padding: 0
       },
-    },
-    axisLine: {
-      show: false,
-    },
-    axisLabel: {
-      show: true,
-      textStyle: {
-        color: '#7ec7ff',
-        padding: 12
+      min: 0,
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: 'rgba(4, 49, 79)',
+        },
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: 'rgba(4, 49, 79)',
+        },
+      },
+      axisLabel: {
+        show: true,
+        textStyle: {
+          color: '#a3a7ae',
+          padding: 5
+        },
+        formatter: '{value}',
+      },
+      axisTick: {
+        show: false,
       },
-      formatter: '{value}',
     },
-    axisTick: {
-      show: false,
+    {
+      type: 'value',
+      position: 'right', // Y轴2在右边
+      name: '(MPa)',
+      nameTextStyle: {
+        color: "#a3a7ae",
+        fontSize: 12,
+        padding: 0
+      },
+      min: 0,
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: 'rgba(4, 49, 79)',
+        },
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: 'rgba(4, 49, 79)',
+        },
+      },
+      axisLabel: {
+        show: true,
+        textStyle: {
+          color: '#a3a7ae',
+          padding: 5
+        },
+        formatter: '{value}',
+      },
+      axisTick: {
+        show: false,
+      },
     },
-  }],
+  ],
   series: [
     {
-      name: '注气流量',
+      name: '注气标况瞬量',
       type: 'line',
       symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
       showAllSymbol: true,
       symbolSize: 0,
       smooth: true,
+      yAxisIndex: 0,
       lineStyle: {
         normal: {
           width: 2,
@@ -474,12 +621,13 @@ export let zqEchartOption = {
       data: 'yData'
     },
     {
-      name: '注气压力',
+      name: '瞬时压力',
       type: 'line',
       symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
       showAllSymbol: true,
       symbolSize: 0,
       smooth: true,
+      yAxisIndex: 1,
       lineStyle: {
         normal: {
           width: 2,
@@ -515,6 +663,7 @@ export let zqEchartOption = {
 }
 //抽采详情图表配置项
 export let ccEchartOption = {
+  showTime: false,
   tooltip: {
     trigger: 'axis',
     padding: 8,
@@ -525,10 +674,10 @@ export let ccEchartOption = {
     },
   },
   grid: {
-    top: '27%',
-    left: '7%',
-    right: '5%',
-    bottom: '8%',
+    top: '28%',
+    left: '6%',
+    right: '6%',
+    bottom: '7%',
     containLabel: true
   },
   legend: {
@@ -543,48 +692,275 @@ export let ccEchartOption = {
       fontSize: 12,
     },
     data: [
-      { name: '抽采纯量' },
-      { name: '抽采混量' },
-      { name: '瓦斯浓度' },
+      { name: '历史混量' },
+      { name: '历史压力' },
     ]
   },
-  yAxis: [{
-    name: 'MPa',
-    nameTextStyle: {
-      color: "#7ec7ff",
-      fontSize: 12,
-      padding: 0
+  yAxis: [
+    {
+      type: 'value',
+      position: 'left', // Y轴1在左边
+      name: '(m³/min)',
+      nameTextStyle: {
+        color: "#a3a7ae",
+        fontSize: 12,
+        padding: 0
+      },
+      min: 0,
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: 'rgba(4, 49, 79)',
+        },
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: 'rgba(4, 49, 79)',
+        },
+      },
+      axisLabel: {
+        show: true,
+        textStyle: {
+          color: '#a3a7ae',
+          padding: 5
+        },
+        formatter: '{value}',
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+    {
+      type: 'value',
+      position: 'right', // Y轴2在右边
+      name: '(kPa)',
+      nameTextStyle: {
+        color: "#a3a7ae",
+        fontSize: 12,
+        padding: 0
+      },
+      min: 0,
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: 'rgba(4, 49, 79)',
+        },
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: 'rgba(4, 49, 79)',
+        },
+      },
+      axisLabel: {
+        show: true,
+        textStyle: {
+          color: '#a3a7ae',
+          padding: 5
+        },
+        formatter: '{value}',
+      },
+      axisTick: {
+        show: false,
+      },
     },
-    min: 0,
-    splitLine: {
-      show: true,
+  ],
+  series: [
+    {
+      name: '历史混量',
+      type: 'line',
+      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+      showAllSymbol: true,
+      symbolSize: 0,
+      smooth: true,
+      yAxisIndex: 0,
       lineStyle: {
-        color: 'rgba(4, 49, 79)',
+        normal: {
+          width: 2,
+          color: 'rgba(236, 255, 62,1)', // 线条颜色
+        },
+        borderColor: 'rgba(0,0,0,.4)',
+      },
+      itemStyle: {
+        color: 'rgba(236, 255, 62,1)',
+        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: "rgba(236, 255, 62,.4)"
+          },
+          {
+            offset: 1,
+            color: "rgba(236, 255, 62, .1)"
+          }
+          ], false),
+          shadowColor: 'rgba(236, 255, 62, 0.5)', //阴影颜色
+          shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+        }
+      },
+      data: 'yData'
+    },
+    {
+      name: '历史压力',
+      type: 'line',
+      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+      showAllSymbol: true,
+      symbolSize: 0,
+      smooth: true,
+      yAxisIndex: 1,
+      lineStyle: {
+        normal: {
+          width: 2,
+          color: 'rgba(86, 241, 133,1)', // 线条颜色
+        },
+        borderColor: 'rgba(0,0,0,.4)',
+      },
+      itemStyle: {
+        color: 'rgba(86, 241, 133,1)',
+        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: "rgba(86, 241, 133,.4)"
+          },
+          {
+            offset: 1,
+            color: "rgba(86, 241, 133, .1)"
+          }
+          ], false),
+          shadowColor: 'rgba(86, 241, 133, 0.5)', //阴影颜色
+          shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+        }
       },
+      data: 'yData1'
     },
-    axisLine: {
-      show: false,
+  ]
+}
+//工况详情图表配置项
+export let gkEchartOption = {
+  showTime: false,
+  tooltip: {
+    trigger: 'axis',
+    padding: 8,
+    backgroundColor: 'rgba(0, 0, 0, .6)',
+    textStyle: {
+      color: '#fff',
+      fontSize: 12,
     },
-    axisLabel: {
-      show: true,
-      textStyle: {
-        color: '#7ec7ff',
-        padding: 12
+  },
+  grid: {
+    top: '28%',
+    left: '6%',
+    right: '6%',
+    bottom: '7%',
+    containLabel: true
+  },
+  legend: {
+    top: '1%',
+    right: '3%',
+    icon: 'circle',
+    itemWidth: 8,
+    itemHeight: 8,
+    itemGap: 12,
+    textStyle: {
+      color: '#fff',
+      fontSize: 12,
+    },
+    data: [
+      { name: '系统电压' },
+      { name: '主机电流' },
+      { name: '风机电流' },
+    ]
+  },
+  yAxis: [
+    {
+      type: 'value',
+      position: 'left', // Y轴1在左边
+      name: '(V)',
+      nameTextStyle: {
+        color: "#a3a7ae",
+        fontSize: 12,
+        padding: 0
+      },
+      min: 0,
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: 'rgba(4, 49, 79)',
+        },
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: 'rgba(4, 49, 79)',
+        },
+      },
+      axisLabel: {
+        show: true,
+        textStyle: {
+          color: '#a3a7ae',
+          padding: 5
+        },
+        formatter: '{value}',
+      },
+      axisTick: {
+        show: false,
       },
-      formatter: '{value}',
     },
-    axisTick: {
-      show: false,
+    {
+      type: 'value',
+      position: 'right', // Y轴2在右边
+      name: '(A)',
+      nameTextStyle: {
+        color: "#a3a7ae",
+        fontSize: 12,
+        padding: 0
+      },
+      min: 0,
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: 'rgba(4, 49, 79)',
+        },
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: 'rgba(4, 49, 79)',
+        },
+      },
+      axisLabel: {
+        show: true,
+        textStyle: {
+          color: '#a3a7ae',
+          padding: 5
+        },
+        formatter: '{value}',
+      },
+      axisTick: {
+        show: false,
+      },
     },
-  }],
+  ],
   series: [
     {
-      name: '抽采纯量',
+      name: '系统电压',
       type: 'line',
       symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
       showAllSymbol: true,
       symbolSize: 0,
       smooth: true,
+      yAxisIndex: 0,
       lineStyle: {
         normal: {
           width: 2,
@@ -616,12 +992,13 @@ export let ccEchartOption = {
       data: 'yData'
     },
     {
-      name: '瓦斯浓度',
+      name: '主机电流',
       type: 'line',
       symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
       showAllSymbol: true,
       symbolSize: 0,
       smooth: true,
+      yAxisIndex: 1,
       lineStyle: {
         normal: {
           width: 2,
@@ -654,21 +1031,22 @@ export let ccEchartOption = {
       data: 'yData1'
     },
     {
-      name: '抽采混量',
+      name: '风机电流',
       type: 'line',
       symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
       showAllSymbol: true,
       symbolSize: 0,
       smooth: true,
+      yAxisIndex: 1,
       lineStyle: {
         normal: {
           width: 2,
-          color: 'rgba(56, 218, 228,1)', // 线条颜色
+          color: 'rgba(230, 64, 50,1)', // 线条颜色
         },
         borderColor: 'rgba(0,0,0,.4)',
       },
       itemStyle: {
-        color: 'rgba(56, 218, 228,1)',
+        color: 'rgba(230, 64, 50,1)',
         borderColor: "#646ace",
         borderWidth: 2
 
@@ -678,14 +1056,14 @@ export let ccEchartOption = {
           //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
             offset: 0,
-            color: "rgba(56, 218, 228,.4)"
+            color: "rgba(230, 64, 50,.4)"
           },
           {
             offset: 1,
-            color: "rgba(56, 218, 228, .1)"
+            color: "rgba(230, 64, 50, .1)"
           }
           ], false),
-          shadowColor: 'rgba(56, 218, 228, 0.5)', //阴影颜色
+          shadowColor: 'rgba(230, 64, 50, 0.5)', //阴影颜色
           shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
         }
       },
@@ -693,3 +1071,445 @@ export let ccEchartOption = {
     },
   ]
 }
+
+export let echartBarOption = {
+  type: 'bar_lt',
+  tooltip: {
+    trigger: 'item',
+    padding: 8,
+    backgroundColor: 'rgba(0, 0, 0, .6)',
+    textStyle: {
+      color: '#fff',
+      fontSize: 12,
+    },
+  },
+  grid: {
+    top: '30%',
+    left: '4%',
+    right: '4%',
+    bottom: '8%',
+    containLabel: true,
+  },
+  legend: {
+    top: '16%',
+    right: 'center',
+    icon: 'circle',
+    itemWidth: 8,
+    itemHeight: 8,
+    itemGap: 12,
+    textStyle: {
+      color: '#fff',
+      fontSize: 12,
+    },
+    data: [
+      { name: '累计注气流量' },
+    ]
+  },
+  yAxis: [
+    {
+      type: 'value',
+      name: '(Nm³/min)',
+      nameTextStyle: {
+        color: 'rgba(181, 185, 191)',
+        fontSize: 12,
+        padding: 0
+      },
+      min: 0,
+      splitLine: {
+        lineStyle: {
+          color: 'rgba(1, 63, 97)',
+        },
+      },
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: false,
+      },
+      axisLabel: {
+        textStyle: {
+          color: 'rgba(181, 185, 191)',
+        },
+        formatter: '{value}',
+      }
+    },
+  ],
+  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: 'rgba(8, 213, 252,1)',
+          },
+          {
+            offset: 1,
+            color: 'rgba(8, 213, 252,1)',
+          }
+          ])
+        }
+      },
+      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": 'rgba(7, 67, 96)'
+            }, {
+              "offset": 1,
+              "color": 'rgba(9, 214, 252)'
+            }]
+          }
+        }
+      },
+      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: 'rgba(9, 170, 208,1)'
+            },
+            {
+              offset: 1,
+              color: 'rgba(9, 170, 208,1)'
+            }
+            ],
+            false
+          ),
+        }
+      },
+      data: 'line'
+    },
+  ]
+}
+//装备运行工况监测详情曲线配置
+export let echartOptionGk = {
+  showTime: false,
+  tooltip: {
+    trigger: 'axis',
+    padding: 8,
+    backgroundColor: 'rgba(0, 0, 0, .6)',
+    textStyle: {
+      color: '#fff',
+      fontSize: 12,
+    },
+  },
+  grid: {
+    top: '10%',
+    left: '2%',
+    right: '6%',
+    bottom: '6%',
+    containLabel: true
+  },
+  legend: {
+    top: '2%',
+    right: 'center',
+    icon: 'circle',
+    itemWidth: 8,
+    itemHeight: 8,
+    itemGap: 12,
+    textStyle: {
+      color: '#fff',
+      fontSize: 12,
+    },
+    data: [
+      { name: '系统电压' },
+      { name: '主机电流' },
+      { name: '风机电流' },
+      { name: '前轴温度' },
+      { name: '后轴温度' },
+      { name: '绕组温度' },
+    ]
+  },
+  yAxis: [
+    {
+      type: 'value',
+      position: 'left', // Y轴1在左边
+      name: '(V)',
+      nameTextStyle: {
+        color: "#a3a7ae",
+        fontSize: 12,
+        padding: 0
+      },
+      min: 0,
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: 'rgba(4, 49, 79)',
+        },
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: 'rgba(4, 49, 79)',
+        },
+      },
+      axisLabel: {
+        show: true,
+        textStyle: {
+          color: '#a3a7ae',
+          padding: 12
+        },
+        formatter: '{value}',
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+    {
+      type: 'value',
+      position: 'right', // Y轴2在右边
+      name: '(A)',
+      nameTextStyle: {
+        color: "#a3a7ae",
+        fontSize: 12,
+        padding: 0
+      },
+      min: 0,
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: 'rgba(4, 49, 79)',
+        },
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: 'rgba(4, 49, 79)',
+        },
+      },
+      axisLabel: {
+        show: true,
+        textStyle: {
+          color: '#a3a7ae',
+          padding: 12
+        },
+        formatter: '{value}',
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+    {
+      type: 'value',
+      position: 'right', // Y轴2在右边
+      offset:80,
+      name: '( ℃)',
+      nameTextStyle: {
+        color: "#a3a7ae",
+        fontSize: 12,
+        padding: 0
+      },
+      min: 0,
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: 'rgba(4, 49, 79)',
+        },
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: 'rgba(4, 49, 79)',
+        },
+      },
+      axisLabel: {
+        show: true,
+        textStyle: {
+          color: '#a3a7ae',
+          padding: 12
+        },
+        formatter: '{value}',
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+  ],
+  series: [
+    {
+      name: '系统电压',
+      type: 'line',
+      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+      showAllSymbol: true,
+      symbolSize: 0,
+      smooth: true,
+      yAxisIndex: 0,
+      lineStyle: {
+        normal: {
+          width: 2,
+          color: 'rgba(254, 157, 29,1)', // 线条颜色
+        },
+        borderColor: 'rgba(0,0,0,.4)',
+      },
+      itemStyle: {
+        color: 'rgba(254, 157, 29,1)',
+        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: "rgba(254, 157, 29,.4)"
+          },
+          {
+            offset: 1,
+            color: "rgba(254, 157, 29, .1)"
+          }
+          ], false),
+          shadowColor: 'rgba(254, 157, 29, 0.5)', //阴影颜色
+          shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+        }
+      },
+      data: 'yData'
+    },
+    {
+      name: '主机电流',
+      type: 'line',
+      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+      showAllSymbol: true,
+      symbolSize: 0,
+      smooth: true,
+      yAxisIndex: 1,
+      lineStyle: {
+        normal: {
+          width: 2,
+          color: 'rgba(58, 233, 242,1)', // 线条颜色
+        },
+        borderColor: 'rgba(0,0,0,.4)',
+      },
+      itemStyle: {
+        color: 'rgba(58, 233, 242,1)',
+        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: "rgba(58, 233, 242,.4)"
+          },
+          {
+            offset: 1,
+            color: "rgba(58, 233, 242, .1)"
+          }
+          ], false),
+          shadowColor: 'rgba(58, 233, 242, 0.5)', //阴影颜色
+          shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+        }
+      },
+      data: 'yData1'
+    },
+     {
+      name: '风机电流',
+      type: 'line',
+      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+      showAllSymbol: true,
+      symbolSize: 0,
+      smooth: true,
+      yAxisIndex: 1,
+      lineStyle: {
+        normal: {
+          width: 2,
+          color: 'rgba(229, 65, 51,1)', // 线条颜色
+        },
+        borderColor: 'rgba(0,0,0,.4)',
+      },
+      itemStyle: {
+        color: 'rgba(229, 65, 51,1)',
+        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: "rgba(229, 65, 51,.4)"
+          },
+          {
+            offset: 1,
+            color: "rgba(229, 65, 51, .1)"
+          }
+          ], false),
+          shadowColor: 'rgba(229, 65, 51, 0.5)', //阴影颜色
+          shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+        }
+      },
+      data: 'yData2'
+    },
+     {
+      name: '前轴温度',
+      type: 'line',
+      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+      showAllSymbol: true,
+      symbolSize: 0,
+      smooth: true,
+      yAxisIndex: 2,
+      lineStyle: {
+        normal: {
+          width: 2,
+          color: 'rgba(15, 204, 117,1)', // 线条颜色
+        },
+        borderColor: 'rgba(0,0,0,.4)',
+      },
+      itemStyle: {
+        color: 'rgba(15, 204, 117,1)',
+        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: "rgba(15, 204, 117,.4)"
+          },
+          {
+            offset: 1,
+            color: "rgba(15, 204, 117, .1)"
+          }
+          ], false),
+          shadowColor: 'rgba(15, 204, 117, 0.5)', //阴影颜色
+          shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+        }
+      },
+      data: 'yData3'
+    },
+  ]
+}

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

@@ -1,10 +1,7 @@
 <template>
   <div class="nav-menu">
     <div class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handlerClick(index, item)">
-      <div :class="{
-        'menu-item-label': index != menuList.length - 1,
-        'menu-item-label-1': index == menuList.length - 1,
-        'bg-position': index == menuList.length - 1,
+      <div class="menu-item-label" :class="{
         'active-menu': activeIndex == index,
         'unactive-menu': activeIndex != index,
       }">
@@ -16,12 +13,14 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-
+ //  'menu-item-label': index != menuList.length - 1,
+// 'menu-item-label-1': index == menuList.length - 1,
+//         'bg-position': index == menuList.length - 1,
 let menuList = ref([
   // { name: '设备监测', code: 'device' },
-  { name: '试验区', code: 'syq' },
-  { name: '主界面', code: 'zjm' },
+  // { name: '试验区', code: 'syq' },
   { name: '注气系统', code: 'zqxt' },
+  { name: '主界面', code: 'zjm' },
   { name: '抽采系统', code: 'ccxt' },
 ]);
 let activeIndex = ref<number>(1);
@@ -57,7 +56,7 @@ function handlerClick(index, item) {
   box-sizing: border-box;
 
   .menu-item {
-    width: 25%;
+    width: 33.3%;
     height: 100%;
     display: flex;
     cursor: pointer;
@@ -70,7 +69,7 @@ function handlerClick(index, item) {
 
     &:nth-child(2) {
       .menu-item-icon {
-        background: var(--image-menu-bg-R) no-repeat center;
+        background: var(--image-menu-bg-L) no-repeat center;
       }
     }
 
@@ -80,11 +79,11 @@ function handlerClick(index, item) {
       }
     }
 
-    &:nth-child(4) {
-      .menu-item-icon {
-        background: var(--image-menu-bg-L) no-repeat center;
-      }
-    }
+    // &:nth-child(4) {
+    //   .menu-item-icon {
+    //     background: var(--image-menu-bg-L) no-repeat center;
+    //   }
+    // }
   }
 
   .menu-item-label {

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

@@ -0,0 +1,29 @@
+<template>
+  <div class="tab-detail-table">
+    <a-tabs v-model:activeKey="activeKey">
+      <a-tab-pane key="1" tab="增压装备运行状态历史数据">
+        <zqHistoryExport :isShowIcon="true" :tableColumn="columnZy"></zqHistoryExport>
+      </a-tab-pane>
+      <a-tab-pane key="2" tab="抽采系统运行状态历史数据">
+        <zqHistoryExport :isShowIcon="true" :tableColumn="columnCc"></zqHistoryExport>
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import zqHistoryExport from './zqHistoryExport.vue'
+import {columnZy,columnCc} from './gasInject.data'
+
+let activeKey = ref('1')
+</script>
+
+<style lang="less" scoped>
+.tab-detail-table {
+  width: 100%;
+  height: 100%;
+  padding:20px;
+  box-sizing: border-box;
+}
+</style>

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

@@ -0,0 +1,32 @@
+<template>
+  <div class="warn-detail-table">
+    <a-tabs v-model:activeKey="activeKey">
+      <a-tab-pane key="1" tab="装备运行异常历史数据">
+        <zqHistoryExport :isShowIcon="true" :tableColumn="columnZy"></zqHistoryExport>
+      </a-tab-pane>
+      <a-tab-pane key="2" tab="环境监测异常历史数据">
+        <zqHistoryExport :isShowIcon="true" :tableColumn="columnCc"></zqHistoryExport>
+      </a-tab-pane>
+      <a-tab-pane key="3" tab="信号传输异常历史数据">
+        <zqHistoryExport :isShowIcon="true" :tableColumn="columnCc"></zqHistoryExport>
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import { ref } from 'vue'
+import zqHistoryExport from './zqHistoryExport.vue'
+import { columnZy, columnCc } from './gasInject.data'
+
+let activeKey = ref('1')
+</script>
+
+<style lang="less" scoped>
+.warn-detail-table {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+}
+</style>

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

@@ -2,10 +2,12 @@
   <div class="history-export">
     <SvgIcon v-if="!isShowIcon" class="icon-style-back" size="32" name="modal-back" @click="handleBack"></SvgIcon>
     <div class="nav-box">
-      <div class="nav-picker">
-        <span>时间:</span>
-        <a-range-picker style="width:300px" v-model:value="timer" :show-time="{ format: 'HH:mm' }"
-          format="YYYY-MM-DD HH:mm" :placeholder="['开始时间', '结束时间']" @change="onRangeChange" />
+      <div class="nav-search">
+        <div class="search-item">
+          <span>时间:</span>
+          <a-range-picker style="width:300px" v-model:value="searchData.timer" :show-time="{ format: 'HH:mm' }"
+            format="YYYY-MM-DD HH:mm" :placeholder="['开始时间', '结束时间']" @change="onRangeChange" />
+        </div>
       </div>
       <div class="nav-btn" @click="handleHisExport">
         <div class="nav-text">
@@ -31,15 +33,17 @@ import { SvgIcon } from '/@/components/Icon';
 
 let props = defineProps({
   //是否显示返回按钮
-  isShowIcon:{
-    type:Boolean
+  isShowIcon: {
+    type: Boolean
   },
   tableColumn: {
     type: Array
   }
 })
 
-let timer = ref('')
+let searchData = reactive({
+  timer: '',
+})
 let dataSource = ref<any[]>([
   { fileName: '测试' },
   { fileName: '测试' },
@@ -64,11 +68,11 @@ let pagination = reactive({
   showSizeChanger: true, // 是否可改变每页显示条数
   pageSizeOptions: ['15', '20', '25', '30', '50'], // 可选的每页显示条数
 });
-let $emit=defineEmits(['handleBack'])
+let $emit = defineEmits(['handleBack'])
 
 //返回上一级
-function handleBack(){
-$emit('handleBack')
+function handleBack() {
+  $emit('handleBack')
 }
 //导出历史数据
 function handleHisExport() { }
@@ -110,10 +114,17 @@ function onRangeChange() { }
     background-size: 100% 100%;
   }
 
-  .nav-picker {
+  .nav-search {
+    display: flex;
+    align-items: center;
+    height: 100%;
     color: #fff;
   }
 
+  .search-item {
+    margin-right: 40px;
+  }
+
   .nav-btn {
     width: 100px;
     height: 78%;
@@ -159,6 +170,18 @@ function onRangeChange() { }
   color: #fff;
 }
 
+:deep(.zxm-select) {
+  color: #fff !important;
+}
+
+:deep(.zxm-select-selector) {
+  background: #0b223f !important;
+  border: 1px solid #1081d7 !important;
+  border-radius: 4px;
+  margin-left: 10px;
+}
+
+
 :deep(.zxm-table-header) {
   border-left: 1px solid #2896ca !important;
   border-right: 1px solid #2896ca !important;

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

@@ -0,0 +1,59 @@
+<template>
+  <div class="camera-modal">
+    <div v-if="renderPlayer" ref="playerRef" style="
+     display: flex;
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+      pointer-events: none;
+    ">
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, reactive, onBeforeUnmount } from 'vue';
+import { useCamera } from '/@/hooks/system/useCamera';
+
+let props = defineProps({
+  deviceId: {
+    type: String,
+    default: ''
+  },
+});
+const { getCamera, removeCamera } = useCamera();
+const playerRef = ref();
+const renderPlayer = ref(true);
+
+onMounted(async () => {
+  await getCamera(props.deviceId, playerRef, renderPlayer);
+});
+
+onBeforeUnmount(() => {
+  removeCamera(playerRef);
+});
+</script>
+
+<style lang="less" scoped>
+:deep(#LivePlayerBox) {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  pointer-events: none;
+
+  .liveVideo {
+    width: 525px !important;
+    height: 312px !important;
+    padding: 15px !important;
+    align-self: auto !important;
+    margin: 10px 8px !important;
+    background-size: 100% 100% !important;
+  }
+
+  .video-parent {
+    pointer-events: auto !important;
+    align-self: auto !important;
+  }
+}
+</style>

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

@@ -1,15 +1,15 @@
 <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 :class="`board-box-${type}`" v-for="(item, index) in option" :key="index">
+      <div :class="`board-item-${type}`">
+        <div :class="`board-item-icon-${type}`">
+          <SvgIcon :class="`icon-style-${type}`" size="24" :name="item.iconName" />
         </div>
-        <div class="board-item-content">
-          <div class="item-content-label">{{ item.label }}</div>
-          <div class="item-content-value">
+        <div :class="`board-item-content-${type}`">
+          <div :class="`item-content-label-${type}`">{{ item.label }}</div>
+          <div :class="`item-content-value-${type}`">
             <span>{{ item.value }}</span>
-            <span>{{ item.unit }}</span>
+            <span style="margin-left: 10px;">{{ item.unit }}</span>
           </div>
         </div>
       </div>
@@ -21,9 +21,12 @@
 import { ref } from 'vue'
 import { SvgIcon } from '/@/components/Icon';
 
-let props=defineProps({
-  option:{
-    type:Array as any
+let props = defineProps({
+  option: {
+    type: Array as any
+  },
+  type: {
+    type: String
   }
 })
 
@@ -44,12 +47,18 @@ let props=defineProps({
   .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');
+    --image-gas_board_bg2: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/2-12.png');
+    --image-gas_board_bg3: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/3-3.png');
+    --image-gas_board_bg4: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/3-4.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');
+  --image-gas_board_bg2: url('@/assets/images/gasInjection/2-12.png');
+  --image-gas_board_bg3: url('@/assets/images/gasInjection/3-3.png');
+  --image-gas_board_bg4: url('@/assets/images/gasInjection/3-4.png');
   display: flex;
   flex-wrap: wrap;
   width: 100%;
@@ -57,7 +66,7 @@ let props=defineProps({
   padding: 15px 20px;
   box-sizing: border-box;
 
-  .board-box {
+  .board-box-A {
     width: 50%;
     height: 50%;
     display: flex;
@@ -65,60 +74,161 @@ let props=defineProps({
     align-items: center;
 
     &:nth-child(1) {
-      .board-item {
+      .board-item-A {
         background: var(--image-gas_board_bg1) no-repeat;
         background-size: 100% 100%;
+
+        .item-content-value-A {
+          color: #91e0ff;
+        }
       }
-      .item-content-value{
-        color: #91e0ff;
-      }
+
     }
 
     &:nth-child(2) {
-      .board-item {
+      .board-item-A {
         background: var(--image-gas_board_bg) no-repeat;
         background-size: 100% 100%;
+
+        .item-content-value-A {
+          color: #2cffdd;
+        }
       }
-      .item-content-value{
-        color: #2cffdd;
-      }
+
     }
 
     &:nth-child(3) {
-      .board-item {
+      .board-item-A {
         background: var(--image-gas_board_bg) no-repeat;
         background-size: 100% 100%;
+
+        .item-content-value-A {
+          color: #2cffdd;
+        }
       }
-      .item-content-value{
-        color: #2cffdd;
-      }
+
+
     }
 
     &:nth-child(4) {
-      .board-item {
+      .board-item-A {
         background: var(--image-gas_board_bg1) no-repeat;
         background-size: 100% 100%;
+
+        .item-content-value-A {
+          color: #91e0ff;
+        }
+      }
+    }
+  }
+
+  .board-box-B {
+    width: 33.3%;
+    height: 33.3%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .board-box-C {
+    width: 50%;
+    height: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:nth-child(1) {
+      .board-item-C {
+        background: var(--image-gas_board_bg3) no-repeat;
+        background-size: 100% 100%;
+
+        .item-content-value-C {
+          color: #91e0ff;
+        }
+      }
+
+    }
+
+    &:nth-child(2) {
+      .board-item-C {
+        background: var(--image-gas_board_bg4) no-repeat;
+        background-size: 100% 100%;
+
+        .item-content-value-C {
+          color: #2cffdd;
+        }
       }
-      .item-content-value{
-        color: #91e0ff;
+
+    }
+
+    &:nth-child(3) {
+      .board-item-C {
+        background: var(--image-gas_board_bg4) no-repeat;
+        background-size: 100% 100%;
+
+        .item-content-value-C {
+          color: #2cffdd;
+        }
+      }
+
+
+    }
+
+    &:nth-child(4) {
+      .board-item-C {
+        background: var(--image-gas_board_bg3) no-repeat;
+        background-size: 100% 100%;
+
+        .item-content-value-C {
+          color: #91e0ff;
+        }
       }
     }
   }
 
-  .board-item {
+  .board-item-A {
     position: relative;
     width: 180px;
     height: 60px;
   }
 
-  .board-item-icon {
+
+  .board-item-B {
+    position: relative;
+    width: 213px;
+    height: 57px;
+    background: var(--image-gas_board_bg2) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .board-item-C {
+    position: relative;
+    width: 194px;
+    height: 76px;
+  }
+
+  .board-item-icon-A {
     position: absolute;
     left: 24px;
     top: 50%;
     transform: translate(0, -35%);
   }
 
-  .board-item-content {
+  .board-item-icon-B {
+    position: absolute;
+    left: 14px;
+    top: 50%;
+    transform: translate(0, -45%);
+  }
+
+  .board-item-icon-C {
+    position: absolute;
+    left: 24px;
+    top: 50%;
+    transform: translate(0, -45%);
+  }
+
+  .board-item-content-A {
     position: absolute;
     height: 100%;
     left: 70px;
@@ -127,11 +237,49 @@ let props=defineProps({
     justify-content: center;
   }
 
-  .item-content-label {
+  .board-item-content-B {
+    position: absolute;
+    height: 100%;
+    left: 70px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .board-item-content-C {
+    position: absolute;
+    height: 100%;
+    left: 82px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .item-content-label-A {
+    margin-bottom: 10px;
+  }
+
+  .item-content-label-B {
     margin-bottom: 10px;
   }
 
-  .item-content-value {
+  .item-content-label-C {
+      font-size: 13px;
+    margin-bottom: 10px;
+  }
+
+  .item-content-value-A {
+    font-size: 12px;
+    font-family: 'douyuFont';
+  }
+
+  .item-content-value-B {
+    font-size: 12px;
+    color: #91e0ff;
+    font-family: 'douyuFont';
+  }
+
+  .item-content-value-C {
     font-size: 12px;
     font-family: 'douyuFont';
   }

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

@@ -0,0 +1,79 @@
+<template>
+  <div class="gas-chl-chart">
+    <div class="echart-box" v-for="(item, index) in echartOption" :key="index">
+      <div class="box-title">{{ item.title }}</div>
+      <div class="box-content">
+        <echartLineDate :echartOption="item.option" :ecahrtData="echartData" />
+      </div>
+      <div class="box-foot"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import echartLineDate from '../gasInject/echartLineDate.vue'
+
+let props = defineProps({
+  echartOption: {
+    type: Array as any
+  },
+  echartData: {
+    type: Array as any
+  }
+})
+
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .gas-chl-chart {
+    --image-gas_board_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/3-10.png');
+    --image-gas_board_bg1: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/3-11.png');
+    --image-gas_board_bg2: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/3-9.png');
+  }
+}
+
+.gas-chl-chart {
+  --image-gas_board_bg: url('@/assets/images/gasInjection/3-10.png');
+  --image-gas_board_bg1: url('@/assets/images/gasInjection/3-11.png');
+  --image-gas_board_bg2: url('@/assets/images/gasInjection/3-9.png');
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  height: 100%;
+  padding: 15px 20px;
+  box-sizing: border-box;
+
+  .echart-box {
+    width: 425px;
+    height: 100%;
+
+    .box-title {
+      width: 100%;
+      height: 28px;
+      line-height: 28px;
+      padding-left: 15px;
+      background: var(--image-gas_board_bg1) no-repeat;
+      background-size: 100% 100%;
+    }
+
+    .box-content {
+      width: 100%;
+      height: calc(100% - 45px);
+      background: var(--image-gas_board_bg) no-repeat;
+      background-size: 100% 100%;
+    }
+
+    .box-foot {
+      width: 100%;
+      height: 17px;
+      background: var(--image-gas_board_bg2) no-repeat;
+      background-size: 100% 100%;
+    }
+
+  }
+}
+</style>

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

@@ -4,17 +4,26 @@
       <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" :class="statusDatas[item.value] == '1' ? 'btn-avtive' : ''"
+        <div class="btn-item" :class="statusDatas[item.value] == '1' ? 'btn-avtive' : ''"
           @click="handlerClick('open', item)">开启
         </div>
-        <div class=" btn-item btn-close" :class="statusDatas[item.value] != '1' ? 'btn-avtive' : ''"
+        <div class=" btn-item" :class="statusDatas[item.value] != '1' ? 'btn-avtive' : ''"
           @click="handlerClick('close', item)">
           关闭
         </div>
       </div>
+      <div class="control-box" v-else-if="item.toggleModel">
+        <div class="btn-item" :class="statusDatas[item.value] == '1' ? 'btn-avtive' : ''"
+          @click="handlerClick('jd', item)">就地
+        </div>
+        <div class="btn-item" :class="statusDatas[item.value] != '1' ? 'btn-avtive' : ''"
+          @click="handlerClick('yc', item)">
+          远程
+        </div>
+      </div>
       <div class="control-box" v-else>
         <a-input v-model:value="presure" size="small" placeholder="请输入" />
-        <!-- <span style="font-size: 12px;">MPa</span> -->
+        <span style="font-size: 12px;">MPa</span>
         <div class="nav-btn" @click="handleSetting">
           <div class="nav-text">
             <SvgIcon class="icon-style1" size="12" name="gas-export"></SvgIcon>
@@ -23,6 +32,14 @@
         </div>
       </div>
     </div>
+    <!--密码操作弹窗 -->
+    <a-modal v-model:visible="visibleTip" width="450px" okText="确定" cancelText="" title="提示" centered destroyOnClose
+      @cancel="handleCancel" @ok="handleOk">
+      <div class="pass-box" style="display: flex;align-items: center; margin:25px 15px;">
+        <span style="width:100px">操作密码：</span>
+        <a-input-password  v-model:value="passWords"  :disabled="false"  />
+      </div>
+    </a-modal>
   </div>
 </template>
 
@@ -41,13 +58,17 @@ let props = defineProps({
 
 let statusDatas = reactive({})
 let presure = ref('')
+let visibleTip = ref(false)//密码提示弹窗是否开启
+let passWords = ref('')//操作密码
 
 //设置
 function handleSetting() {
 
 }
-//开启/关闭
+//按钮操作
 function handlerClick(param, item) {
+  passWords.value=''
+  visibleTip.value = true
   switch (param) {
     case 'open':
       statusDatas[item.value] = '1'
@@ -55,12 +76,26 @@ function handlerClick(param, item) {
     case 'close':
       statusDatas[item.value] = '0'
       break;
+    case 'jd':
+      break;
+    case 'yc':
+      break;
   }
 }
+//密码提示弹窗-确定
+function handleOk(){
+  visibleTip.value = false
+}
+//密码提示弹窗-关闭
+function handleCancel() {
+  visibleTip.value = false
+}
+
 
 watch(() => props.statusData, (newV, oldV) => {
   if (newV) {
     statusDatas = newV
+    presure.value=presure.value ? presure.value : newV.paramSetting
   }
 })
 
@@ -125,6 +160,7 @@ watch(() => props.statusData, (newV, oldV) => {
     padding: 5px 10px 3px 10px;
     border: 1px solid #2cb6ff;
     border-radius: 4px;
+    margin-right: 5px;
   }
 
   .btn-open {
@@ -142,6 +178,7 @@ watch(() => props.statusData, (newV, oldV) => {
     border: 1px solid #1081d7;
     cursor: pointer;
     color: #fff;
+    margin-left: 10px;
   }
 
   .nav-text {
@@ -157,6 +194,7 @@ watch(() => props.statusData, (newV, oldV) => {
   .icon-style1 {
     margin-right: 5px;
   }
+  
 }
 
 ::v-deep .zxm-input-sm {
@@ -167,4 +205,5 @@ watch(() => props.statusData, (newV, oldV) => {
   border: 1px solid #2cb6ff;
   color: #fff;
 }
+
 </style>

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

@@ -1,32 +1,27 @@
 <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>
+  <div ref="gasInjectChart" class="inject-echart-box"></div>
 </template>
 
 <script setup lang="ts">
-import { nextTick, ref, onMounted } from 'vue'
+import { nextTick, ref, onMounted, reactive } from 'vue'
 import * as echarts from 'echarts';
 
 let props = defineProps({
   option: {
     type: Object as any
+  },
+  echartData:{
+    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 echartData = reactive({
+  line: ["1030", "205", "84", "568", "689", "4587"],
+  line1: ["103", "20", "8", "56", "68", "458"]
+})
 
 let xLabel = ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31']
 let goToSchool = ["40", "60", "22", "85", "50", "40"]
@@ -40,6 +35,7 @@ function getOption() {
       option = {
         tooltip: props.option.tooltip,
         grid: props.option.grid,
+        legend: props.option.legend,
         xAxis: [{
           data: xData,
           axisLabel: {
@@ -63,109 +59,13 @@ function getOption() {
             show: false,
           },
         }],
-        yAxis: [{
-           name: '(%)',
-          nameTextStyle: {
-            color: 'rgba(181, 185, 191)',
-            fontSize: 12,
-            padding: 0
-          },
-          splitLine: {
-            lineStyle: {
-              color: 'rgba(1, 63, 97)',
-            },
-          },
-          axisTick: {
-            show: false
-          },
-          axisLine: {
-            show: false,
-          },
-          axisLabel: {
-            textStyle: {
-              color: 'rgba(181, 185, 191)',
-            },
+        yAxis: props.option.yAxis,
+        series: props.option.series.map(el => {
+          return {
+            ...el,
+            data:echartData[el.data]
           }
-        }],
-        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 = {
@@ -283,30 +183,8 @@ onMounted(() => {
 </script>
 
 <style lang="less" scoped>
-.gasInjectChart {
+.inject-echart-box {
   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/gasZyChart.vue

@@ -10,7 +10,7 @@ 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', 'C']);
@@ -18,25 +18,25 @@ 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: '注气阀门开启',
+    series: '抽采系统运行状态',
     startTime: '2021-03-03 10:00:00',
     endTime: '2021-03-03 18: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',
   },
@@ -166,19 +166,18 @@ function getOption() {
         containLabel: true,
       },
       legend: {
-        align: 'left',
-        right: 'center',
-        top: '0',
+        right: '10',
+        top: '2',
         type: 'plain',
         textStyle: {
           color: '#fff',
           fontSize: 12,
         },
         // icon:'rect',
-        itemGap: 25,
+        itemGap: 2,
         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: ['装备运行', '注气阀门开启',],
+        data: ['增压装备运行状态', '抽采系统运行状态',],
       },
 
       xAxis: [

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

@@ -2,95 +2,105 @@
   <div class="gasZyList">
     <div class="list-box">
       <div class="list-box-item" v-for="(item, index) in option" :key="index">
-        <SvgIcon class="icon-style" size="20" :name="item.iconName" />
+        <SvgIcon class="icon-style" size="30" :name="item.iconName" />
         <div class="item-label">{{ item.label }}</div>
-        <div class="item-value">{{ item.value }}</div>
+        <div class="item-value">
+          <span> {{ listData ? listData[item.value] : '-'}}</span>
+          <span class="item-unit">{{ item.unit }}</span>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue';
-  import { SvgIcon } from '/@/components/Icon';
+import { ref } from 'vue';
+import { SvgIcon } from '/@/components/Icon';
 
-  let props = defineProps({
-    option: {
-      type: Array as any,
-    },
-  });
+let props = defineProps({
+  listData: {
+    type: Object as any
+  },
+  option: {
+    type: Array as any,
+  },
+});
 </script>
 
 <style lang="less" scoped>
-  @import '/@/design/theme.less';
+@import '/@/design/theme.less';
 
-  @{theme-deepblue} {
-    .gasZyList {
-      --image-zy_list_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/12-1.png');
-      --image-zy_list_bg1: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/12-2.png');
-    }
+@{theme-deepblue} {
+  .gasZyList {
+    --image-zy_list_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/1-7.png');
+    --image-zy_list_bg1: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/1-8.png');
   }
+}
 
-  .gasZyList {
-    --image-zy_list_bg: url('@/assets/images/gasInjection/12-1.png');
-    --image-zy_list_bg1: url('@/assets/images/gasInjection/12-2.png');
-    width: 100%;
-    height: 100%;
-    padding: 25px 15px;
-    box-sizing: border-box;
+.gasZyList {
+  --image-zy_list_bg: url('@/assets/images/gasInjection/1-7.png');
+  --image-zy_list_bg1: url('@/assets/images/gasInjection/1-8.png');
+  width: 100%;
+  height: 100%;
+  padding: 25px;
+  box-sizing: border-box;
 
-    .list-box {
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      align-items: center;
-    }
-
-    .list-box-item {
-      position: relative;
-      width: 100%;
-      height: 43px;
-      display: flex;
-      align-items: center;
+  .list-box {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+  }
 
-      &:nth-child(1) {
-        .item-value {
-          color: #04cdff;
-        }
+  .list-box-item {
+    position: relative;
+    width: 100%;
+    height: 57px;
+    display: flex;
 
-        background: var(--image-zy_list_bg) no-repeat;
-        background-size: 100% 100%;
+    &:nth-child(1) {
+      .item-value {
+        color: #c4ebff;
       }
 
-      &:nth-child(2) {
-        .item-value {
-          color: #2cffdd;
-        }
+      background: var(--image-zy_list_bg) no-repeat;
+      background-size: 100% 100%;
+    }
 
-        background: var(--image-zy_list_bg1) no-repeat;
-        background-size: 100% 100%;
+    &:nth-child(2) {
+      .item-value {
+        color: #91faff;
       }
-    }
 
-    .item-label {
-      position: absolute;
-      left: 56px;
-      font-size: 16px;
-      font-weight: 700;
+      background: var(--image-zy_list_bg1) no-repeat;
+      background-size: 100% 100%;
     }
+  }
 
-    .item-value {
-      font-size: 12px;
-      position: absolute;
-      right: 40px;
-      // font-family: 'douyuFont';
-      font-size: 16px;
-      font-weight: 700;
-    }
-    .icon-style {
-      position: absolute;
-      left: 13px;
-    }
+  .item-label {
+    position: absolute;
+    left: 76px;
+    bottom: 10px;
+  }
+
+  .item-value {
+    font-size: 12px;
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    font-family: 'douyuFont';
+  }
+
+  .item-unit {
+    margin-left: 10px;
+  }
+
+  .icon-style {
+    position: absolute;
+    left: 11px;
+    top: 50%;
+    transform: translate(0, -50%);
   }
+}
 </style>

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

@@ -18,7 +18,8 @@ enum Api {
   sysTypeWarnList = '/safety/ventanalyAlarmLog/sysTypeWarn',
   getDisasterProportion = '/safety/ventanalyAlarmLog/getDisasterProportion',
   system = '/ventanaly-device/monitor/device',
-  getSystem = '/monitor/system'
+  getSystem = '/monitor/deviceForZhuQi',
+  listdays = '/safety/ventanalyMonitorData/listdays'
 }
 
 // 搞这个缓存是由于：目前代码上的设计是多个模块发出多次请求，每个模块自己负责消费前者的响应。
@@ -654,11 +655,20 @@ export const sysCc = (params) => {
 //获取抽采系统数据
 function getCcSystem() {
   return new Promise(async (resolve) => {
-    const result = await sysCc({ systemID: "2036610034808954882" });
+    const result = await sysCc({ devicetype: 'sys', systemID: "2036610034808954882" });
     resolve(result);
   });
 }
-//获取注气系统数据
+//获取注气历史数据
+export const sysZq = (params) => defHttp.get({ url: Api.listdays, params });
+//获取注气历史数据
+function getZqSystem(param) {
+  return new Promise(async (resolve) => {
+    const result = await sysZq(param);
+    resolve(result);
+  });
+}
+//获取注气驱替数据
 export const getSystemApi = (params) => {
   const key = `${Api.getSystem}?${JSON.stringify(params)}`;
   if (!cache.has(key)) {
@@ -670,57 +680,39 @@ export const getSystemApi = (params) => {
     );
   }
   return (cache.get(key) as Promise<any>).then(async (res) => {
+    //抽采数据
     let pumpData = await getCcSystem();
-    res.pumpData = pumpData
-   // let pdata= res.pumpData.deviceInfo.pump
-   // res.pumpSj= res.pumpData
-    console.log(res, '注气系统数据-----')
+    res.pumpData = pumpData.msgTxt[0].datalist[0]
+    let historyDataCc = reactive<any>({})
+    historyDataCc.hourData = await getZqSystem({ gdeviceids: res.pumpData.deviceID, strtype: 'pump_standard', skip: '8' })
+    historyDataCc.minitesData = await getZqSystem({ gdeviceids: res.pumpData.deviceID, strtype: 'pump_standard', skip: '6' })
+    res.historyDataCc = historyDataCc
     //注气数据
-    let data = res.deviceInfo.injection.datalist[0].readData
-    res.deviceStatusControl = {
-      runStatus: data.runStatus || '-',
-      paramSetting: data.paramSetting || '-'
-    }
-    res.ZqsjData = {
-      injectionPressure: data.injectionPressure || '-',
-      injectionTemperature: data.injectionTemperature || '-',
-      flowStdInstant: data.flowStdInstant || '-',
-      flowStdAccum: data.flowStdAccum || '-',
+    let zqData = res.msgTxt.find(v => v.type == 'injection_standard').datalist[0]
+    //注气驱替促抽系统状态
+    res.zyStatusData = {
+      Pressure: zqData.readData.Pressure,
+      paiqiPressure: zqData.readData.paiqiPressure
     }
-    res.ZqsjDetail = {
-      first: {
-        flowStdAccum: data.flowStdAccum_1,
-        flowStdInstant: data.flowStdInstant_1,
-        flowWorkInstant: data.flowWorkInstant_1,
-        injectionPressure: data.injectionPressure_1,
-      },
-      second: {
-        flowStdAccum: data.flowStdAccum_2,
-        flowStdInstant: data.flowStdInstant_2,
-        flowWorkInstant: data.flowWorkInstant_2,
-        injectionPressure: data.injectionPressure_2,
-      },
-      third: {
-        flowStdAccum: data.flowStdAccum_3,
-        flowStdInstant: data.flowStdInstant_3,
-        flowWorkInstant: data.flowWorkInstant_3,
-        injectionPressure: data.injectionPressure_3,
-      },
-      fourth: {
-        flowStdAccum: data.flowStdAccum_4,
-        flowStdInstant: data.flowStdInstant_4,
-        flowWorkInstant: data.flowWorkInstant_4,
-        injectionPressure: data.injectionPressure_4,
-      },
+    //注气/抽采历史图表数据
+    let historyDataZq = reactive<any>({})
+    historyDataZq.hourData = await getZqSystem({ gdeviceids: zqData.deviceID, strtype: 'injection_standard', skip: '8' })
+    historyDataZq.minitesData = await getZqSystem({ gdeviceids: zqData.deviceID, strtype: 'injection_standard', skip: '6' })
+    res.historyDataZq = historyDataZq
+    //装备运行状态与控制
+    res.deviceStatusControl = {
+      remoteStatus: zqData.readData.remoteStatus,
+      runStatus: zqData.readData.runStatus,
+      paramSetting: zqData.readData.paramSetting,
+      paiqiStatus: zqData.readData.paiqiStatus,
     }
+    //注气数据监测
+    res.dataMonitor = {
+      flowStdInstant: zqData.readData.flowStdInstant,
+      flowStdAccum: zqData.readData.flowStdAccum,
+      injectionTemperature: zqData.readData.injectionTemperature,
+      injectionPressure: zqData.readData.injectionPressure,
 
-    res.ZqParamLine = {
-      xData: ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31'],
-      yData: ["20", "50", "12", "65", "30", "60"],
-      yData1: ["40", "60", "22", "85", "50", "40"],
-      yData2: ["70", "30", "42", "65", "80", "60"],
-      yData3: [],
-      yData4: []
     }
 
     return res;

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

@@ -72,9 +72,9 @@
       case 'zjm':
         configs.value = testConfigGasInject;
         break;
-      case 'syq':
-        configs.value = testConfigGasInjectSy;
-        break;
+      // case 'syq':
+      //   configs.value = testConfigGasInjectSy;
+      //   break;
       case 'zqxt':
         configs.value = testConfigGasInjectZq;
         break;
@@ -118,11 +118,11 @@
     fetchConfigs('gas_injection').then(() => {
       configs.value = testConfigGasInject;
       //  updateEnhancedConfigs(configs.value);
-      getSystemApi({ systemID: '2036323791827165185' }).then(updateData);
+      getSystemApi({devicetype:'sys', systemID: '2036323791827165185' }).then(updateData);
     });
 
     setInterval(() => {
-      getSystemApi({ systemID: '2036323791827165185' }).then(updateData);
+      getSystemApi({devicetype:'sys', systemID: '2036323791827165185' }).then(updateData);
     }, 60000);
   });
 
@@ -291,7 +291,7 @@
     top: 70px;
     left: 460px;
     width: calc(100% - 470px);
-    height: 500px;
+    height: 480px;
     background: url(/src/assets/images/gasInjection/syq/modal-bg.png) no-repeat;
     background-size: 100% 100%;
     pointer-events: auto;