红沙泉露天煤矿-提交新版本

src/assets/icons/csb.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.957" height="17.905" viewBox="0 0 20.957 17.905">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#8694fd"/>
+      <stop offset="1" stop-color="#ccedff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_58003" data-name="路径 58003" d="M204.045,138.406h-3.151V125.194h-3.853l7.008-7.04v20.252Zm3.9-19.482h3.151v13.148h3.853l-7.008,7.039V118.924Z" transform="translate(139.111 -197.041) rotate(90)" fill="url(#linear-gradient)"/>
+</svg>

src/assets/icons/data-reset.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.792" height="17.023" viewBox="0 0 16.792 17.023">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.295" x2="0.946" y2="0.843" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#95ffee"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_57970" data-name="路径 57970" d="M146.112,153.6c.337.114,3.835,2.145,4.849,2.708.565.226.114.451.114.451l-1.58.9a6.689,6.689,0,0,0,2.145,1.692,4.877,4.877,0,0,0,4.173.226,5.967,5.967,0,0,0,3.045-2.82l1.692,1.128c.225,0-1.241,2.257-3.5,3.384a6.786,6.786,0,0,1-6.88-.337,8.549,8.549,0,0,1-2.482-2.145l-1.579,1.016s-.339.114-.339-.226v-5.639S145.773,153.492,146.112,153.6Zm11.165-6.2a8.574,8.574,0,0,1,2.484,2.145l1.467-1.016s.337-.114.337.226v5.639s0,.451-.339.339-3.835-2.145-4.849-2.708c-.565-.226-.114-.451-.114-.451l1.467-.9a6.672,6.672,0,0,0-2.143-1.692,4.88,4.88,0,0,0-4.174-.226,5.965,5.965,0,0,0-3.044,2.82l-1.7-1.128a10.9,10.9,0,0,1,3.722-3.384A6.788,6.788,0,0,1,157.277,147.4Z" transform="translate(-145.273 -145.657)" stroke="rgba(0,0,0,0)" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/assets/icons/device-status.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="37.538" height="32.004" viewBox="0 0 37.538 32.004">
+  <g id="组_16750" data-name="组 16750" transform="translate(-4.299 -79.536)">
+    <path id="路径_57962" data-name="路径 57962" d="M21.612,325.169a1.8,1.8,0,0,1-1.7-1.222l-2.682-10.233-2.581,3.113a1.789,1.789,0,0,1-1.385.655H6.15a1.851,1.851,0,1,1,0-3.7h6.267l4.06-4.9a1.8,1.8,0,0,1,1.705-.625,1.825,1.825,0,0,1,1.385,1.192l2.534,9.81,1.7-4.936a1.8,1.8,0,0,1,1.7-.807,1.818,1.818,0,0,1,1.488,1.169l.87,2.28,1.836-2.745a1.8,1.8,0,0,1,1.5-.807h8.821a1.852,1.852,0,0,1,0,3.7H32.154l-3.234,4.84a1.8,1.8,0,0,1-3.188-.373l-.861-2.256-1.754,5.025a1.8,1.8,0,0,1-1.5.818Z" transform="translate(0 -220.228)" fill="#fff"/>
+    <path id="路径_57963" data-name="路径 57963" d="M112.866,92.2a1.221,1.221,0,0,1-.4-.067,1.3,1.3,0,0,1-.8-1.631,15.583,15.583,0,0,1,29.741-.076,1.3,1.3,0,0,1-.794,1.636,1.26,1.26,0,0,1-1.6-.811,13.071,13.071,0,0,0-24.945.063,1.264,1.264,0,0,1-1.2.886Zm13.682,19.343a15.632,15.632,0,0,1-15-11.331,1.3,1.3,0,0,1,.841-1.611,1.264,1.264,0,0,1,1.577.859,13.109,13.109,0,0,0,12.578,9.5,13.255,13.255,0,0,0,12.62-9.645,1.26,1.26,0,0,1,1.568-.875,1.3,1.3,0,0,1,.859,1.6,15.8,15.8,0,0,1-15.046,11.5Z" transform="translate(-103.229)" fill="#fff"/>
+  </g>
+</svg>

src/assets/icons/internet-on.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="19.937" height="16.129" viewBox="0 0 19.937 16.129">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.295" x2="0.946" y2="0.843" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#83e4ff"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_57971" data-name="路径 57971" d="M131.491,194.329h3.491V179.2h-1.746l-1.746,1.681L128,184.243h3.491Zm10.474-1.681,3.491-3.362h-3.491V179.2h-3.491v15.129h1.746Z" transform="translate(-126.76 -178.7)" stroke="rgba(0,0,0,0)" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/assets/icons/spml.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="19.438" height="13.678" viewBox="0 0 19.438 13.678">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#2cfff1"/>
+      <stop offset="1" stop-color="#ccedff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_58001" data-name="路径 58001" d="M105.288,225.76H124.63a.048.048,0,0,1,.048.048v13.583a.048.048,0,0,1-.048.048H105.288a.048.048,0,0,1-.048-.048V225.808A.048.048,0,0,1,105.288,225.76Zm9.412,10.032v-6.529a.146.146,0,0,0-.035-.1.249.249,0,0,0-.117-.07,1.17,1.17,0,0,0-.217-.043,2.983,2.983,0,0,0-.342-.016,3.119,3.119,0,0,0-.35.016,1.091,1.091,0,0,0-.217.043.248.248,0,0,0-.114.07.147.147,0,0,0-.035.1V231.8h-2.625v-2.538a.154.154,0,0,0-.033-.1.231.231,0,0,0-.114-.07,1.17,1.17,0,0,0-.217-.043,3.742,3.742,0,0,0-.691,0,1.153,1.153,0,0,0-.22.043.247.247,0,0,0-.117.07.147.147,0,0,0-.035.1v6.529a.146.146,0,0,0,.035.1.249.249,0,0,0,.117.07,1.153,1.153,0,0,0,.22.043,3.742,3.742,0,0,0,.691,0,1.151,1.151,0,0,0,.217-.043.229.229,0,0,0,.114-.07.154.154,0,0,0,.033-.1V233h2.625v2.795a.146.146,0,0,0,.035.1.248.248,0,0,0,.114.07,1.09,1.09,0,0,0,.217.043,3.123,3.123,0,0,0,.35.016,2.987,2.987,0,0,0,.342-.016,1.151,1.151,0,0,0,.217-.043.247.247,0,0,0,.117-.07A.147.147,0,0,0,114.7,235.792Zm7.5-3.366a4.129,4.129,0,0,0-.233-1.448,2.745,2.745,0,0,0-.681-1.05,2.89,2.89,0,0,0-1.1-.641,5.1,5.1,0,0,0-1.592-.216h-1.8a.448.448,0,0,0-.3.1.424.424,0,0,0-.122.339v6.027a.423.423,0,0,0,.122.339.447.447,0,0,0,.3.1h1.676a5.692,5.692,0,0,0,1.608-.2,2.915,2.915,0,0,0,1.147-.628,2.756,2.756,0,0,0,.724-1.1A4.661,4.661,0,0,0,122.2,232.426Zm-1.475.048a3.7,3.7,0,0,1-.133,1.047,1.941,1.941,0,0,1-.4.751,1.653,1.653,0,0,1-.67.452,2.84,2.84,0,0,1-.987.15h-.743v-4.7h.721a2.718,2.718,0,0,1,1.06.174,1.735,1.735,0,0,1,.662.484,1.933,1.933,0,0,1,.374.732A3.422,3.422,0,0,1,120.72,232.474Z" transform="translate(-105.24 -225.76)" fill="url(#linear-gradient)"/>
+</svg>

src/assets/icons/sswd.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10.087" height="20.825" viewBox="0 0 10.087 20.825">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#2cc1ff"/>
+      <stop offset="1" stop-color="#ccedff"/>
+    </linearGradient>
+  </defs>
+  <g id="组_16837" data-name="组 16837" transform="translate(-122.197 -1.365)">
+    <path id="路径_57994" data-name="路径 57994" d="M266.442,491.164v-3.74h-1.629v3.74a2.15,2.15,0,0,0-1.3,1.955,2.111,2.111,0,1,0,2.932-1.955Z" transform="translate(-138.38 -475.972)" fill="url(#linear-gradient)"/>
+    <path id="路径_57995" data-name="路径 57995" d="M131,13.761V5.105a3.747,3.747,0,0,0-7.494,0v8.656a4.455,4.455,0,0,0-1.3,3.386,5.043,5.043,0,1,0,10.086,0A4.516,4.516,0,0,0,131,13.761Zm-3.754,6.8a3.416,3.416,0,0,1-3.414-3.414,3.339,3.339,0,0,1,1.048-2.479l.255-.227V5.105a2.111,2.111,0,0,1,4.222,0v9.336l.255.227a3.426,3.426,0,0,1-2.366,5.893Z" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

src/assets/icons/time-run.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.066" height="16.066" viewBox="0 0 16.066 16.066">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.295" x2="0.946" y2="0.843" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#83e4ff"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <g id="组_16762" data-name="组 16762" transform="translate(-12.123 -12.57)">
+    <path id="路径_57964" data-name="路径 57964" d="M206.642,201.568a5.095,5.095,0,1,0,.4,1.971A5.039,5.039,0,0,0,206.642,201.568Zm-2.673,3.357a.585.585,0,0,1-.583.583H200.6a.585.585,0,0,1-.583-.583v-2.782a.583.583,0,0,1,1.167,0v2.2h2.2a.583.583,0,0,1,.583.583Z" transform="translate(-181.817 -182.916)" fill="url(#linear-gradient)"/>
+    <path id="路径_57965" data-name="路径 57965" d="M20.156,12.57A8.033,8.033,0,1,0,28.19,20.6,8.033,8.033,0,0,0,20.156,12.57Zm0,13.975a5.924,5.924,0,1,1,5.924-5.924,5.924,5.924,0,0,1-5.924,5.924Z" transform="translate(0 0)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

src/assets/icons/wlyc.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="19.519" height="18.31" viewBox="0 0 19.519 18.31">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#2cc1ff"/>
+      <stop offset="1" stop-color="#ccedff"/>
+    </linearGradient>
+  </defs>
+  <g id="组_16836" data-name="组 16836" transform="translate(0.027 -51.195)">
+    <path id="路径_57997" data-name="路径 57997" d="M9.135,69.5a9.155,9.155,0,1,1,5.077-16.768l-.943,1.411a7.457,7.457,0,1,0,3.322,6.207h1.7A9.165,9.165,0,0,1,9.134,69.5Z" transform="translate(0)" fill="url(#linear-gradient)"/>
+    <path id="路径_57998" data-name="路径 57998" d="M432.142,308.619l2.064-3.022,2.171,3.022Zm-2.127,1.329H424.96v-5.82h1.7v4.121h3.357v1.7Z" transform="translate(-416.887 -248.112)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

src/assets/icons/yxzt.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="19.438" height="19.438" viewBox="0 0 19.438 19.438">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#8694fd"/>
+      <stop offset="1" stop-color="#ccedff"/>
+    </linearGradient>
+  </defs>
+  <g id="组_16835" data-name="组 16835" transform="translate(-101.973 -101.973)">
+    <path id="路径_57987" data-name="路径 57987" d="M262.068,262.068m-6.068,0A6.068,6.068,0,1,0,262.068,256,6.068,6.068,0,0,0,256,262.068Z" transform="translate(-150.376 -150.376)" fill="url(#linear-gradient)"/>
+    <path id="路径_57988" data-name="路径 57988" d="M109.479,103.916l-.558-1.943a10.115,10.115,0,0,0-6.948,6.948l1.943.558A8.089,8.089,0,0,1,109.479,103.916Z" fill="url(#linear-gradient)"/>
+    <path id="路径_57989" data-name="路径 57989" d="M611.751,109.6l1.943-.558a10.117,10.117,0,0,0-6.934-6.945l-.552,1.945A8.092,8.092,0,0,1,611.751,109.6Z" transform="translate(-492.283 -0.125)" fill="url(#linear-gradient)"/>
+    <path id="路径_57990" data-name="路径 57990" d="M606.208,611.747l.552,1.945a10.128,10.128,0,0,0,6.932-6.932l-1.945-.552A8.1,8.1,0,0,1,606.208,611.747Z" transform="translate(-492.283 -492.283)" fill="url(#linear-gradient)"/>
+    <path id="路径_57991" data-name="路径 57991" d="M104,606.208l-1.945.552A10.121,10.121,0,0,0,109,613.694l.558-1.943A8.1,8.1,0,0,1,104,606.208Z" transform="translate(-0.084 -492.283)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

src/assets/icons/zl.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21.341" height="15.691" viewBox="0 0 21.341 15.691">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#2cfff1"/>
+      <stop offset="1" stop-color="#ccedff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_58002" data-name="路径 58002" d="M12.553,0a1.234,1.234,0,0,1,1.255,1.255V14.436a1.242,1.242,0,0,1-1.16,1.252l-.1,0A1.234,1.234,0,0,1,11.3,14.436V1.255A1.231,1.231,0,0,1,12.458,0Zm3.766,1.883a1.24,1.24,0,0,1,1.255,1.255v8.787a1.239,1.239,0,0,1-1.16,1.252l-.1,0a1.24,1.24,0,0,1-1.255-1.255V3.138a1.239,1.239,0,0,1,1.16-1.252l.1,0ZM5.021.628A1.255,1.255,0,0,1,6.277,1.883V11.926a1.255,1.255,0,0,1-2.511,0V1.883A1.255,1.255,0,0,1,5.021.628ZM8.787,3.138a1.255,1.255,0,0,1,1.255,1.255V10.67a1.255,1.255,0,0,1-2.511,0V4.394A1.255,1.255,0,0,1,8.787,3.138Zm11.3-1.255c.705,0,1.255.336,1.255.628V8.16c0,.276-.49.59-1.139.625l-.116,0c-.705,0-1.255-.336-1.255-.628V2.511c0-.276.49-.59,1.139-.625l.116,0Zm-18.83,0c.705,0,1.255.336,1.255.628V8.16c0,.276-.49.59-1.139.625l-.116,0C.55,8.787,0,8.451,0,8.16V2.511c0-.276.49-.59,1.139-.625l.116,0Z" fill="url(#linear-gradient)"/>
+</svg>

src/components/vent/ventBoxHsq.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="vent-box1-bg">
+    <!-- <div class="box1-top">
+      <div class="title">
+        <slot name="title"></slot>
+      </div>
+    </div> -->
+    <div class="box1-center">
+      <div class="box-container">
+        <slot name="container"></slot>
+      </div>
+    </div>
+    <!-- <div class="box1-bottom"></div> -->
+  </div>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  export default defineComponent({
+    name: 'VentBox1',
+    setup() {},
+  });
+</script>
+
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+  @{theme-green} {
+    .vent-box1-bg {}
+  }
+
+  .vent-box1-bg {
+    //  --image-box1-bg: url('@/assets/images/home-container/configurable/hsq/2-10.png');
+    //      --image-box1-bg1: url('@/assets/images/home-container/configurable/hsq/2-5.png');
+    width: 100%;
+    min-height: 80px;
+    position: relative;
+    overflow-x: hidden;
+    // background: var(--image-box1-bg) no-repeat;
+    // background-size: 100% 100%;
+    // .box1-top {
+    //   width: 100%;
+    //   height: 40px;
+    //   .title {
+    //     width: 177px;
+    //     height: 40px;
+    //     display: flex;
+    //     // justify-content: center;
+    //     align-items: center;
+    //     color: #01fdfb;
+    //     font-weight: bolder;
+    //     padding-left: 30px;
+    //     background: var(--image-box1-bg1) no-repeat;
+    //     background-size: 100% 100%;
+    //   }
+    // }
+    .box1-center {
+      width: 100%;
+      height: 100%;
+      position: relative;
+
+      .box-container {
+        width: calc(100% - 2px);
+        min-height: 50px;
+        // position: relative;
+        padding: 10px;
+        color: #fff;
+
+        // &::before {
+        //   content: '';
+        //   display: block;
+        //   position: absolute;
+        //   top: 5px;
+        //   left: 0;
+        //   width: 1px;
+        //   height: calc(100% - 10px);
+        // }
+        // &::after {
+        //   content: '';
+        //   display: block;
+        //   position: absolute;
+        //   right: 1px;
+        //   top: 5px;
+        //   width: 1px;
+        //   height: calc(100% - 10px);
+        // }
+      }
+    }
+    // .box1-bottom {
+    //   width: 100%;
+    //   height: 35px;
+    //   position: absolute;
+    //   bottom: 0px;
+    //   z-index: 1;
+    //   pointer-events: none;
+    // }
+  }
+</style>

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

@@ -0,0 +1,124 @@
+<template>
+  <!-- 常用模块 -->
+  <Transition
+    :enter-active-class="`animate__animated  animate__fadeIn${capitalizedPosition}`"
+    :leave-active-class="`animate__animated  animate__fadeOut${capitalizedPosition}`"
+  >
+    <ventBox1 v-if="visible" :class="getModuleClass(showStyle)" :style="style">
+      <template v-if="moduleName" #title>
+        <div :class="{ 'cursor-pointer': !!moduleData.to }" @click="redirectTo">{{ moduleName }}</div>
+      </template>
+      <template #container>
+        <slot>
+          <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event" />
+          <Content
+            :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }"
+            :moduleData="moduleData"
+            :data="selectedData"
+            :chartData="chartData"
+          />
+        </slot>
+      </template>
+    </ventBox1>
+  </Transition>
+</template>
+<script lang="ts" setup>
+  import Header from './header.vue';
+  import Content from './content.vue';
+  // import ModuleLeft from './original/moduleLeft.vue';
+  // import ModuleBottom from './original/moduleBottom.vue';
+  import { computed, ref } from 'vue';
+  import ventBox1 from '/@/components/vent/ventBoxHsq.vue';
+  import { openWindow } from '/@/utils';
+  import { getFormattedText } from '../hooks/helper.js';
+  // import { ModuleProps } from '../types';
+
+  const props = defineProps<{
+    /** 配置的详细模块信息 */
+    moduleData: any;
+    /** 配置的详细样式信息 */
+    showStyle: any;
+    /** 该模块配置中的设备标识符 */
+    deviceType: string;
+    /** api返回的数据 */
+    data: any;
+    moduleName: string;
+    visible: boolean;
+    chartData?: any;
+  }>();
+  defineEmits(['close', 'click']);
+
+  const { header } = props.moduleData;
+  const selectedData = ref();
+
+  const style = computed(() => {
+    const size = props.showStyle.size;
+    const position = props.showStyle.position;
+    return size + position + 'position: absolute; pointer-events: auto; z-index: 1';
+  });
+
+  const capitalizedPosition = computed(() => {
+    return props.showStyle.position.includes('left') ? 'Left' : 'Right';
+  });
+
+  // 根据配置里的定位判断应该使用哪个class
+  function getModuleClass({ size, position }) {
+    const [_, width] = size.match(/width:([0-9]+)px/) || [];
+    if (position.includes('bottom') || parseInt(width) > 800) {
+      return 'module-common module-common-longer';
+    }
+    return 'module-common';
+  }
+
+  function redirectTo() {
+    const { to } = props.moduleData;
+    if (!to) return;
+    openWindow(getFormattedText(selectedData.value, to));
+  }
+</script>
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+
+  .module-common .box1-center {
+    height: calc(100% - 48px);
+  }
+
+  :deep(.box1-center) {
+    height: calc(100% - 48px);
+  }
+  :deep(.box1-center > .box-container) {
+    height: 100%;
+    padding: 0 !important;
+    width: 100% !important;
+  }
+  @{theme-green} {
+    .module-common-longer {
+      :deep(.box1-top) {
+        --image-box1-top: url('/@/assets/images/themify/green/vent/border/box-top.png');
+      }
+      :deep(.box1-bottom) {
+        --image-box1-bottom: url('/@/assets/images/themify/green/vent/border/box-bottom.png');
+      }
+    }
+  }
+  @{theme-deepblue} {
+    .module-common-longer {
+      :deep(.box1-top) {
+        --image-box1-top: url('/@/assets/images/themify/deepblue/vent/border/box2-top-long.png');
+      }
+      :deep(.box1-bottom) {
+        --image-box1-bottom: none;
+      }
+    }
+  }
+  .module-common-longer {
+    :deep(.box1-top) {
+      --image-box1-top: url('/@/assets/images/vent/box-top-bg.png');
+      background-image: var(--image-box1-top);
+    }
+    :deep(.box1-bottom) {
+      --image-box1-bottom: url('/@/assets/images/vent/box-bottom-bg.png');
+      background-image: var(--image-box1-bottom);
+    }
+  }
+</style>

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

@@ -0,0 +1,52 @@
+<template>
+  <div class="basic-border">
+    <div class="title">{{ title }}</div>
+    <div class="content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+let props = defineProps({
+  title: {
+    type: String
+  }
+})
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .basic-border {}
+}
+
+.basic-border {
+  --image-box-bg: url('@/assets/images/home-container/configurable/hsq/2-12.png');
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border: 1px solid rgba(11, 37, 66);
+  box-shadow: 0px 0px 20px 5px rgba(32, 131, 189, 0.7) inset;
+  backdrop-filter: blur(10px);
+
+  .title {
+    display: flex;
+    align-items: center;
+    width: 146px;
+    height: 30px;
+    color: #fff;
+    padding-left: 15px;
+    background: var(--image-box-bg) no-repeat;
+    background-size: 100% 100%;
+  }
+  .content{
+    height: calc(100% - 30px);
+    padding: 10px 15px;
+    box-sizing: border-box;
+  }
+}
+</style>

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

@@ -0,0 +1,156 @@
+<template>
+  <div class="basic-device">
+    <div class="icon-left">
+      <div class="icon-item"></div>
+    </div>
+    <div class="basic-title">
+      <div class="title-text">CAM-001</div>
+      <div class="title-btn">
+        <div class="btn">详情</div>
+        <div class="btn">配置</div>
+        <div class="btn">重启</div>
+      </div>
+    </div>
+    <div class="basic-content">
+      <div class="content-item">双光谱摄像机#1</div>
+      <div class="content-item">
+        <span class="icon-pie">
+          <span class="pie-item"></span>
+        </span>
+        <span>在线</span>
+      </div>
+      <div class="content-item">采掘场A区</div>
+      <div class="content-item">
+        <span>32</span>
+        <span>℃</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .basic-device {}
+}
+
+.basic-device {
+  --image-box-bg: url('@/assets/images/home-container/configurable/hsq/2-7.png');
+  --image-box-bg1: url('@/assets/images/home-container/configurable/hsq/2-8.png');
+  --image-box-bg2: url('@/assets/images/home-container/configurable/hsq/2-9.png');
+  position: relative;
+  height: 106px;
+  margin-right: 5px;
+  background: var(--image-box-bg) no-repeat;
+  background-size: 100% 100%;
+  margin-bottom: 10px;
+
+  .icon-left {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 29px;
+    height: 29px;
+    background: var(--image-box-bg1) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .icon-item {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: #4fffad;
+  }
+
+  .basic-title {
+    height: 30px;
+    margin: 0px 20px 5px 32px;
+    padding-left: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--image-box-bg2) no-repeat bottom;
+    background-size: 100% auto;
+  }
+
+  .title-btn {
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  .btn {
+    width: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #1e7db4;
+    margin: 0px 2px;
+    cursor: pointer;
+  }
+
+  .basic-content {
+    display: flex;
+    flex-wrap: wrap;
+    height: calc(100% - 30px);
+    padding-left: 20px;
+    padding-bottom: 10px;
+  }
+
+  .content-item {
+    display: flex;
+    align-items: center;
+    width: 50%;
+    height: calc(50% - 10px);
+    margin: 5px 0px;
+    padding-left: 15px;
+
+    &:nth-child(1) {
+      background: linear-gradient(to right, #0e5183, transparent);
+    }
+
+    &:nth-child(2) {
+      background: linear-gradient(to right, #104974, transparent);
+    }
+
+    &:nth-child(3) {
+      background: linear-gradient(to right, #0e5183, transparent);
+    }
+
+    &:nth-child(4) {
+      background: linear-gradient(to right, #104974, transparent);
+    }
+  }
+
+  .icon-pie {
+    display: inline-block;
+    position: relative;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: rgba(79, 255, 173, .3);
+    margin-right: 5px;
+  }
+
+  .pie-item {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: rgba(79, 255, 173);
+  }
+}
+</style>

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

@@ -16,7 +16,7 @@
     </video>
     <div class="flex w-full h-full" :style="{ flexDirection: layout.direction }">
       <div v-for="config in layoutConfig" :key="config.name"
-        :style="{ flexBasis: config.basis, overflow: config.overflow ? 'auto' : 'none' }">
+        :style="{ flexBasis: config.basis, overflow: config.overflow ? 'auto' : 'hidden' }">
         <!-- 告示板部分 -->
         <template v-if="config.name === 'board'">
           <div v-if="config.pageType == 'vent_New'" style="padding-top: 11%"
@@ -128,7 +128,7 @@
           <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"  :listData="config.data" />
+          <gasInjectList class="content__module" :listData="config.data" />
         </template>
         <template v-else-if="config.name === 'gas_zy_chart'">
           <gasZyChart class="content__module" :data="config.data" />
@@ -149,18 +149,39 @@
         <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'">
-          <echartLineDate class="content__module" :echartOption="config.config.echartOption"  :data="data" />
-        </template>
-         <template v-else-if="config.name === 'gas_cc_chart'">
-          <echartLine class="content__module" :echartOption="config.config.echartOption"  :ecahrtData="config.data" />
+        <template v-else-if="config.name === 'gas_cc_chart'">
+          <echartLine 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 v-if="config.name === 'gallery_new'">
+          <CustomGalleryNew class="content__module" :type="config.config.type" :option="config.config.items"
+            :galleryData="config.data" />
+        </template>
+        <template v-if="config.name === 'card_new'">
+          <ImageCardNew :option="config.config.items" :cardData="config.data"></ImageCardNew>
+        </template>
+        <template v-if="config.name === 'btn_new'">
+          <BtnListNew :option="config.config.items" :data="config.data"></BtnListNew>
+        </template>
+        <template v-if="config.name === 'oerate_new'">
+          <OperateNew :option="config.config.items" :btnOption="config.config.option" :data="config.data"></OperateNew>
+        </template>
+        <template v-if="config.name === 'long_list'">
+          <LongList></LongList>
+        </template>
+         <template v-if="config.name === 'long_list1'">
+          <LongList1></LongList1>
+        </template>
+         <template v-if="config.name === 'long_list2'">
+          <LongList2></LongList2>
+        </template>
+         <template v-if="config.name === 'search_table'">
+          <SearchTable></SearchTable>
+        </template>
+        <template v-if="config.name === 'mixed_warn'">
+          <MixedWarn></MixedWarn>
         </template>
       </div>
     </div>
@@ -212,10 +233,17 @@ import gasWarnList from './preset/gasWarnList.vue'
 import gasDeviceStatusControl from './preset/gasDeviceStatusControl.vue'
 import gasBoard from './preset/gasBoard.vue'
 import gasInjectCard from './preset/gasInjectCard.vue'
-import echartLineDate from './gasInject/echartLineDate.vue'
 import cameraModal from './preset/cameraModal.vue'
-import gasChlChart from './preset/gasChlChart.vue'
 import echartLine from './preset/echartLine.vue'
+import CustomGalleryNew from './preset/CustomGalleryNew.vue'
+import ImageCardNew from './preset/ImageCardNew.vue'
+import BtnListNew from './preset/BtnListNew.vue'
+import OperateNew from './preset/OperateNew.vue'
+import LongList from './preset/LongList.vue'
+import LongList1 from './preset/LongList1.vue'
+import LongList2 from './preset/LongList2.vue'
+import SearchTable from './preset/SearchTable.vue'
+import MixedWarn from './preset/MixedWarn.vue'
 // import FIreWarn from './preset/FIreWarn.vue';
 // import FIreControl from './preset/FIreControl.vue';
 

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

@@ -1,13 +1,18 @@
 <template>
   <div class="table__content">
     <div class="table__content_label" :class="`table__content_label_${type}`">
-      <div class="label-t" v-for="(item, index) in columns" :key="`svvhbcth-${index}`" :style="{ flexBasis }">{{ item.name }}</div>
+      <div class="label-t" v-for="(item, index) in columns" :key="`svvhbcth-${index}`" :style="{ flexBasis }">{{
+        item.name }}</div>
     </div>
     <div ref="scrollRef" class="table__content_list" :class="`table__content_list_${type}`">
       <div class="table__content_list_row" v-for="(item, index) in data" :key="`svvhbct-${index}`">
-        <div v-for="(t, i) in columns" :key="`svvhbctr-${i}`" :style="{ flexBasis }" :class="`table__content__list_item_${type}`">
+        <div v-for="(t, i) in columns" :key="`svvhbctr-${i}`" :style="{ flexBasis }"
+          :class="`table__content__list_item_${type}`">
           <slot :name="t.prop" :scope="item">
-            <span>{{ get(item, t.prop) }}</span>
+            <span v-if="t.prop == 'status' || t.prop == 'remark' || t.prop == 'grade'" class="icon-pie" >
+              <span class="icon-item" ></span>
+            </span>
+            <span :style="{color:t.prop == 'grade' ? 'rgba(79, 255, 173)' : ''}">{{ get(item, t.prop) }}</span>
           </slot>
         </div>
       </div>
@@ -15,186 +20,218 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, defineProps, ref } from 'vue';
-  import _ from 'lodash';
-  import { useAutoScroll } from '/@/hooks/core/useAutoScroll';
-
-  let props = withDefaults(
-    defineProps<{
-      /** B | C */
-      type: string;
-      autoScroll: boolean;
-      /** 列表表头配置，每个prop都有其对应的slot来提供定制化功能 */
-      columns: { prop: string; name: string }[];
-      data: any[];
-      defaultValue: string;
-    }>(),
-    {
-      type: 'B',
-      autoScroll: false,
-      columns: () => [],
-      data: () => [],
-      defaultValue: '-',
-    }
-  );
+import { computed, defineProps, ref } from 'vue';
+import _ from 'lodash';
+import { useAutoScroll } from '/@/hooks/core/useAutoScroll';
 
-  const scrollRef = ref(null);
-  if (props.autoScroll) {
-    useAutoScroll(scrollRef);
+let props = withDefaults(
+  defineProps<{
+    /** B | C */
+    type: string;
+    autoScroll: boolean;
+    /** 列表表头配置，每个prop都有其对应的slot来提供定制化功能 */
+    columns: { prop: string; name: string }[];
+    data: any[];
+    defaultValue: string;
+  }>(),
+  {
+    type: 'B',
+    autoScroll: false,
+    columns: () => [],
+    data: () => [],
+    defaultValue: '-',
   }
+);
 
-  const flexBasis = computed(() => {
-    return Math.fround(100 / props.columns.length) + '%';
-  });
+const scrollRef = ref(null);
+if (props.autoScroll) {
+  useAutoScroll(scrollRef);
+}
 
-  function get(o, p) {
-    const d = _.get(o, p);
-    return _.isNil(d) ? props.defaultValue : d === '' ? props.defaultValue : d;
-  }
+const flexBasis = computed(() => {
+  return Math.fround(100 / props.columns.length) + '%';
+});
+
+function get(o, p) {
+  const d = _.get(o, p);
+  return _.isNil(d) ? props.defaultValue : d === '' ? props.defaultValue : d;
+}
 </script>
 <style lang="less" scoped>
-  @import '/@/design/theme.less';
-  @import '@/design/theme.less';
+@import '/@/design/theme.less';
+@import '@/design/theme.less';
+
+@font-face {
+  font-family: 'douyuFont';
+  src: url('/@/assets/font/douyuFont.otf');
+}
 
-  @font-face {
-    font-family: 'douyuFont';
-    src: url('/@/assets/font/douyuFont.otf');
+@{theme-green} {
+  .table__content {
+    --image-content-label: url(/@/assets/images/themify/green/company/content-label.png);
+    --image-content-text: url('/@/assets/images/themify/green/company/content-text.png');
+    --image-list-head: url('/@/assets/images/themify/green/home-container/configurable/firehome/list-head.png');
+
+    .table__content_label_A {
+      color: #00ffea;
+    }
   }
+}
 
-  @{theme-green} {
-    .table__content {
-      --image-content-label: url(/@/assets/images/themify/green/company/content-label.png);
-      --image-content-text: url('/@/assets/images/themify/green/company/content-text.png');
-      --image-list-head: url('/@/assets/images/themify/green/home-container/configurable/firehome/list-head.png');
-      .table__content_label_A {
-        color: #00ffea;
-      }
+@{theme-deepblue} {
+  .table__content {
+    --image-content-label: url(/@/assets/images/themify/deepblue/company/content-label.png);
+    --image-content-text: url('/@/assets/images/themify/deepblue/company/content-text.png');
+    --image-list-head: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/list-head.png');
+  }
+}
+
+.table__content {
+  --image-content-label: url('/@/assets/images/home-container/configurable/hsq/1-5.png');
+  --image-content-text: url('/@/assets/images/company/content-text.png');
+  --image-list-head: url('/@/assets/images/home-container/configurable/firehome/list-head.png');
+  --image-content-label-d: url(/@/assets/images/home-container/configurable/minehome/content-label.png);
+  --image-content-body-d: url('/@/assets/images/home-container/configurable/minehome/content-body.png');
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 5px 0;
+
+  .table__content_label {
+    width: 400px;
+    height: 32px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+
+    .label-t {
+      text-align: center;
+      font-size: 14px;
     }
   }
-  @{theme-deepblue} {
-    .table__content {
-      --image-content-label: url(/@/assets/images/themify/deepblue/company/content-label.png);
-      --image-content-text: url('/@/assets/images/themify/deepblue/company/content-text.png');
-      --image-list-head: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/list-head.png');
+
+  .table__content_label_A {
+    background-image: var(--image-content-label);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    color: #3df6ff;
+  }
+
+  .table__content_label_B {
+    background-image: linear-gradient(to top, #04698c, #04698c00);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    color: #31b9ef;
+  }
+
+  .table__content_label_C {
+    background-position: center 100%;
+    background-size: 100% 25px;
+    background-repeat: no-repeat;
+    background-image: var(--image-content-text);
+    height: 40px;
+
+    .label-t {
+      background-repeat: no-repeat;
+      background-size: 80% auto;
+      background-position: center;
+      background-image: var(--image-list-head);
     }
   }
 
-  .table__content {
-    --image-content-label: url(/@/assets/images/company/content-label.png);
-    --image-content-text: url('/@/assets/images/company/content-text.png');
-    --image-list-head: url('/@/assets/images/home-container/configurable/firehome/list-head.png');
-    --image-content-label-d: url(/@/assets/images/home-container/configurable/minehome/content-label.png);
-    --image-content-body-d: url('/@/assets/images/home-container/configurable/minehome/content-body.png');
-    height: 100%;
-    box-sizing: border-box;
+  .table__content_list {
+    height: calc(100% - 32px);
+    width: 400px;
     display: flex;
     flex-direction: column;
-    align-items: center;
     padding: 5px 0;
+    box-sizing: border-box;
+    overflow-y: auto;
 
-    .table__content_label {
-      width: 400px;
-      height: 32px;
+    .table__content_list_row {
+      width: 100%;
       display: flex;
       justify-content: space-around;
       align-items: center;
-      .label-t {
+      color: #fff;
+      margin-bottom: 5px;
+
+      span {
+        display: inline-block;
         text-align: center;
-        font-size: 14px;
       }
     }
-    .table__content_label_A {
-      background-image: var(--image-content-label);
-      background-size: 100% 100%;
-      background-repeat: no-repeat;
-      color: #31b9ef;
-    }
-    .table__content_label_B {
-      background-image: linear-gradient(to top, #04698c, #04698c00);
-      background-size: 100% 100%;
+  }
+
+  .table__content_list_A {
+    .table__content_list_row {
+      background-size: 100% auto;
       background-repeat: no-repeat;
-      color: #31b9ef;
+      background-position: center bottom;
+      background-image: var(--image-content-text);
     }
-    .table__content_label_C {
-      background-position: center 100%;
-      background-size: 100% 25px;
+  }
+
+  .table__content_list_C {
+    .table__content_list_row {
+      min-height: 50px;
+      background-size: 100% auto;
       background-repeat: no-repeat;
+      background-position: center bottom;
       background-image: var(--image-content-text);
-      height: 40px;
-
-      .label-t {
-        background-repeat: no-repeat;
-        background-size: 80% auto;
-        background-position: center;
-        background-image: var(--image-list-head);
-      }
     }
+  }
 
-    .table__content_list {
-      height: calc(100% - 32px);
-      width: 400px;
-      display: flex;
-      flex-direction: column;
-      padding: 5px 0;
-      box-sizing: border-box;
-      overflow-y: auto;
-      .table__content_list_row {
-        width: 100%;
-        display: flex;
-        justify-content: space-around;
-        align-items: center;
-        color: #fff;
-        margin-bottom: 5px;
-        span {
-          display: inline-block;
-          text-align: center;
-        }
-      }
-    }
+  .table__content_label_D {
+    width: calc(100% - 10px);
+    background-image: var(--image-content-label-d);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    color: #fff;
+  }
 
-    .table__content_list_A {
-      .table__content_list_row {
-        background-size: 100% auto;
-        background-repeat: no-repeat;
-        background-position: center bottom;
-        background-image: var(--image-content-text);
-      }
-    }
-    .table__content_list_C {
-      .table__content_list_row {
-        min-height: 50px;
-        background-size: 100% auto;
-        background-repeat: no-repeat;
-        background-position: center bottom;
-        background-image: var(--image-content-text);
-      }
+  .table__content_list_D {
+    width: calc(100% - 10px);
+    background-image: var(--image-content-body-d);
+    background-size: 100% 100%;
+    padding: 5px;
+
+    .table__content_list_row {
+      height: 20%;
+      margin: 0;
     }
 
-    .table__content_label_D {
-      width: calc(100% - 10px);
-      background-image: var(--image-content-label-d);
-      background-size: 100% 100%;
-      background-repeat: no-repeat;
-      color: #fff;
+    /* 奇数行背景颜色 */
+    .table__content_list_row:nth-child(odd) {
+      background: #061b24;
     }
-    .table__content_list_D {
-      width: calc(100% - 10px);
-      background-image: var(--image-content-body-d);
-      background-size: 100% 100%;
-      padding: 5px;
-      .table__content_list_row {
-        height: 20%;
-        margin: 0;
-      }
-      /* 奇数行背景颜色 */
-      .table__content_list_row:nth-child(odd) {
-        background: #061b24;
-      }
 
-      /* 偶数行背景颜色 */
-      .table__content_list_row:nth-child(even) {
-        background: #092b3a;
-      }
+    /* 偶数行背景颜色 */
+    .table__content_list_row:nth-child(even) {
+      background: #092b3a;
     }
   }
+
+  .icon-pie {
+    position: relative;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: rgba(79, 255, 173, .3);
+    margin-right: 5px;
+  }
+
+  .icon-item {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: rgba(79, 255, 173);
+  }
+}
 </style>

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

@@ -1,176 +0,0 @@
-<template>
-  <a-modal v-model:visible="visibleDetail" width="1350px" :footer="null" :title="modalTitle" centered destroyOnClose
-    @cancel="handleCancel">
-    <!-- 注气参数/注气数据监测 -->
-    <template v-if="deviceType == 'Zq_zqcs' || deviceType == 'gas_zq_sj'">
-      <curveEchartDetail :sysType="'Zq'" :isShowExport="false" :tableColumn="tableColumnZqcs" :deviceID="data.deviceId"
-        :strtype="data.strtype" :isShowExports="true"></curveEchartDetail>
-    </template>
-    <!-- 抽采参数 -->
-    <template v-if="deviceType == 'Zq_cccs'">
-      <curveEchartDetail :sysType="'Cc'" :isShowExport="false" :tableColumn="tableColumnCcs" :deviceID="data.pumpDeviceId" :strtype="data.pumpStrtype"
-        :isShowExports="true"></curveEchartDetail>
-    </template>
-    <!-- 注气驱替促抽效果评价   -->
-    <template v-if="deviceType == 'gas_cc_detail'">
-      <TableAndLine :showFormDateTime="false" activeFlag="xgpj" :strtype="data.pumpStrtype" :deviceID="data.pumpDeviceId"></TableAndLine>
-    </template>
-    <!-- 支管抽采数据  -->
-    <template v-if="deviceType == 'gas_cc_data'">
-      <TableAndLine :showFormDateTime="true" activeFlag="ccsj" :strtype="data.pumpStrtype" :deviceID="data.pumpDeviceId"></TableAndLine>
-    </template>
-    <!-- 注气数据监测 -->
-    <!-- <template v-if="deviceType == 'gas_zq_sj'">
-      <LineAndBarDetail :sysType="'Zq'" :isShowExport="false" :tableColumn="tableColumnSj" :deviceID="data.deviceId"
-        :strtype="data.strtype" :isShowExports="true">
-      </LineAndBarDetail>
-    </template> -->
-    <!-- 环境监测 -->
-    <template v-if="deviceType == 'gas_zq_hj'">
-      <environmentDetailTable :deviceData="data"></environmentDetailTable>
-    </template>
-    <!-- 装备运行工况监测 -->
-    <template v-if="deviceType == 'gas_zq_paramline'">
-      <echartLineDateGk :echartOption="echartOptionGk" :deviceID="data.deviceId" :strtype="data.strtype" />
-    </template>
-    <!-- 视屏监控 -->
-    <template v-if="deviceType == 'gas_zq_video'">
-      <cameraDetailModal></cameraDetailModal>
-    </template>
-    <!-- 系统运行状态 -->
-    <template v-if="deviceType == 'run-status'">
-      <systemDetailTable :tableData="data.systemRunData"></systemDetailTable>
-    </template>
-    <!-- 异常提醒 -->
-    <template v-if="deviceType == 'warn-info'">
-      <warnDetailTable></warnDetailTable>
-    </template>
-    <!-- 装备运行状态与控制 -->
-    <template v-if="deviceType == 'device_status_control'">
-      <div class="history-pad">
-        <zqHistoryExport :isShowIcon="true" :tableColumn="columnControl" :deviceId="data.deviceId"
-          :strtype="data.strtype" :isShowExports="false"></zqHistoryExport>
-      </div>
-    </template>
-
-  </a-modal>
-</template>
-
-<script setup lang="ts">
-import { computed, reactive, ref, watch } from 'vue'
-import curveEchartDetail from './curveEchartDetail.vue'
-import { columnControl, tableColumnZqcs, tableColumnCcs, echartOptionGk } from './gasInject.data'
-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'
-import TableAndLine from './TableAndLine.vue'
-import zqHistoryExport from './zqHistoryExport.vue';
-let props = defineProps({
-  //是否显示弹窗
-  showDetail: {
-    type: Boolean
-  },
-  //设备类型
-  deviceType: {
-    type: String
-  },
-  //数据
-  data: {
-    type: Object as any
-  }
-
-})
-let visibleDetail = ref(false)
-let $emit = defineEmits(['closeModal'])
-
-//弹窗标题
-let modalTitle = computed(() => {
-  if (props.deviceType == 'Zq_zqcs') {
-    return '注气参数时程曲线'
-  } else if (props.deviceType == 'Zq_cccs') {
-    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 '视屏监控详情'
-  } else if (props.deviceType == 'gas_cc_detail') {
-    return '注气驱替促抽效果评价'
-  } else if (props.deviceType == 'gas_cc_data') {
-    return '抽采数据'
-  } else if (props.deviceType == 'run-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 '装备运行工况监测'
-  }
-})
-
-//关闭弹窗
-function handleCancel() {
-  $emit('closeModal', false)
-}
-
-watch(() => props.showDetail, (newV, oldV) => {
-  visibleDetail.value = newV
-}, { immediate: true })
-</script>
-
-<style lang="less">
-.history-pad {
-  min-height: 550px;
-  padding: 15px 20px;
-  box-sizing: border-box;
-}
-
-.zxm-modal-content {
-  // height: 700px;
-  border: none !important;
-  box-shadow: none !important;
-  background-color: transparent !important;
-  background-color: transparent !important;
-  background: url('@/assets/images/gasInjection/9-1.png') no-repeat;
-  background-size: 100% 100% !important;
-}
-
-.zxm-modal-header {
-  background-color: transparent !important;
-  box-shadow: none !important;
-  border-color: none !important;
-  backdrop-filter: blur(0);
-  background: url('@/assets/images/gasInjection/9-2.png') no-repeat bottom !important;
-  border-bottom: 0px !important;
-
-  .zxm-modal-title {
-    color: #fff !important;
-    text-align: center;
-    font-size: 18px;
-  }
-}
-
-.zxm-modal-close {
-  position: absolute;
-  top: -26px !important;
-  right: -22px !important;
-  color: #2b9fce !important;
-}
-
-.zxm-modal-close-x {
-  display: inline-block;
-  width: 44px !important;
-  height: 44px !important;
-  line-height: 39px !important;
-  background-color: #00000b;
-  border-radius: 50%;
-  border: 3px solid #2b9fce;
-  font-size: 24px !important;
-  font-weight: 700 !important;
-}
-</style>

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

@@ -1,252 +0,0 @@
-<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" @change="changeRadio">
-            <a-radio value="8">按小时</a-radio>
-            <a-radio value="5">按分钟</a-radio>
-          </a-radio-group>
-          <!-- 时间查询条件 -->
-           <a-range-picker style="width:340px" :value="[searchData.startTime, searchData.endTime]"
-            :show-time="{ format: 'HH:mm:ss' }" valueFormat="YYYY-MM-DD HH:mm:ss" :placeholder="['开始时间', '结束时间']"
-            @change="onRangeChange" />
-            <a-button type="primary" preIcon="ant-design:search-outlined" @click="getSearch"
-            style="margin-left: 10px;">查询</a-button>
-        </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="zqEchartOption"></echartLineDate>
-          </div>
-        </div>
-      </div>
-      <!-- <div class="curve-bar-content">
-          <gasInjectChart  :option="echartBarOption" />
-      </div> -->
-    </template>
-    <template v-else>
-      <zqHistoryExport :tableColumn="tableColumn" :detailType="'history'" @handleBack="handleBack" :deviceId="deviceID" :strtype="strtype" :isShowExports="isShowExports"></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,echartBarOption } from './gasInject.data'
-import dayjs from 'dayjs';
-import { listdays } from './gasInject.api';
-
-let props = defineProps({
-  //是否打开历史数据页面
-  isShowExport: {
-    type: Boolean
-  },
-  //table列
-  tableColumn: {
-    type: Array
-  },
-  //详情图表系统类型
-  sysType: {
-    type: String
-  },
-  //设备ID
-  deviceID:{
-    type:String,
-  },
-   //设备类型
-  strtype: {
-    type: String
-  },
-  //是否显示导出按钮
-  isShowExports:{
-    type:Boolean
-  }
-  
-})
-let searchData = reactive({
-  startTime: dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
-  endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
-})
-//注气参数详情数据
-let listData = ref<any[]>([])
-let timerTabs = ref('8')
-let showExport = ref(false)
-
-//时间间隔切换
-function changeRadio(val) {
-  timerTabs.value = val.target.value
-}
-//日期切换
-function onRangeChange(__, time) {
-  searchData.startTime = time[0];
-  searchData.endTime = time[1];
-}
-//打开历史数据详情及导出
-function handleHistory() {
-  showExport.value = true
-}
-//历史数据返回至详情
-function handleBack() {
-  showExport.value = false
-}
-//查询
-function getSearch() {
-  switch (timerTabs.value) {
-    case '8':
-      getHistoryData(timerTabs.value)
-      break;
-    case '5':
-      getHistoryData(timerTabs.value)
-      break;
-  }
-}
-async function getHistoryData(skip) {
-    let res = await listdays({ pageNo: 1, pageSize: 1000, gdeviceids: props.deviceID, strtype: props.strtype, ttime_begin: searchData.startTime, ttime_end: searchData.endTime, skip: skip })
-    if (res.datalist.records.length) {
-      let count = 0
-      let data = res.datalist.records.find(el => el.readData.flowStdInstant_1)
-      Object.keys(data.readData).forEach(el => {
-        if (el.indexOf('flowStdAccum_') != -1) {
-          count += 1
-        }
-      })
-      listData.value = Array.from({ length: count }).map((el, index) => {
-        return {
-          label: `钻孔${index + 1}`,
-          xData: res.xlist,
-          yData: res.datalist.records.map(dl => dl.readData[`flowStdInstant_${index + 1}`]),
-          yData1: res.datalist.records.map(dl => dl.readData[`injectionPressure_${index + 1}`]),
-        }
-      })
-    }
-}
-
-watch(() => props.isShowExport, (newV, oldV) => {
-  showExport.value = newV
-   getHistoryData(timerTabs.value)
-}, { 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%;
- min-height: 550px;
- 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%;
-  }
-
-  .curve-line-content {
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-    margin:10px 0px ;
-    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/TableAndLine.vue

@@ -1,374 +0,0 @@
-<template>
-  <div class="tableandLine">
-    <div class="top-area">
-      <div class="curve-nav">
-        <div class="nav-search">
-          <!-- 时间查询选项 -->
-          <a-radio-group v-if="showFormDateTime" v-model:value="timerTabs" name="radioGroup" @change="changeRadio">
-            <a-radio value="8">按小时</a-radio>
-            <a-radio value="5">按分钟</a-radio>
-          </a-radio-group>
-          <!-- 时间查询条件 -->
-          <!-- <span style="color:#fff">时间:</span> -->
-          <a-range-picker style="width:340px" :value="[searchData.startTime, searchData.endTime]"
-            :show-time="{ format: 'HH:mm:ss' }" valueFormat="YYYY-MM-DD HH:mm:ss" :placeholder="['开始时间', '结束时间']"
-            @change="onRangeChange" />
-          <a-button type="primary" preIcon="ant-design:search-outlined" @click="getSearch"
-            style="margin-left: 10px;">查询</a-button>
-        </div>
-        <div class="nav-btn" @click="handleHisExport">
-          <div class="nav-text">
-            <SvgIcon class="icon-style" size="18" name="gas-export" />
-            <span>数据导出</span>
-          </div>
-        </div>
-      </div>
-
-      <a-tabs v-model:activeKey="activeKey" @change="tabChange">
-        <a-tab-pane v-if="activeFlag == 'ccsj'" key="1" tab="瞬时抽采数据">
-          <a-table size="small" :dataSource="dataSource" :columns="tableColumn" :scroll="{ y: 200 }"
-            :pagination="false">
-            <template #action="{ record }">
-              <!-- <a class="table-action-link" @click="handleSpDetail(record)">审批详情</a> -->
-            </template>
-          </a-table>
-        </a-tab-pane>
-        <a-tab-pane v-if="activeFlag == 'ccsj'" key="2" tab="累计抽采数据">
-          <a-table size="small" :dataSource="dataSource" :columns="tableColumn" :scroll="{ y: 200 }"
-            :pagination="false">
-            <template #action="{ record }">
-              <!-- <a class="table-action-link" @click="handleSpDetail(record)">审批详情</a> -->
-            </template>
-          </a-table>
-        </a-tab-pane>
-        <a-tab-pane v-if="activeFlag == 'xgpj'" key="3" tab="抽采率">
-          <a-table size="small" :dataSource="dataSource" :columns="tableColumn" :scroll="{ y: 200 }"
-            :pagination="false">
-            <template #action="{ record }">
-              <!-- <a class="table-action-link" @click="handleSpDetail(record)">审批详情</a> -->
-            </template>
-          </a-table>
-        </a-tab-pane>
-        <a-tab-pane v-if="activeFlag == 'xgpj'" key="4" tab="残余瓦斯含量">
-          <a-table size="small" :dataSource="dataSource" :columns="tableColumn" :scroll="{ y: 200 }"
-            :pagination="false">
-            <template #action="{ record }">
-              <!-- <a class="table-action-link" @click="handleSpDetail(record)">审批详情</a> -->
-            </template>
-          </a-table>
-        </a-tab-pane>
-        <a-tab-pane v-if="activeFlag == 'xgpj'" key="5" tab="瓦斯含量降低速率">
-          <a-table size="small" :dataSource="dataSource" :columns="tableColumn" :scroll="{ y: 200 }"
-            :pagination="false">
-            <template #action="{ record }">
-              <!-- <a class="table-action-link" @click="handleSpDetail(record)">审批详情</a> -->
-            </template>
-          </a-table>
-        </a-tab-pane>
-      </a-tabs>
-    </div>
-
-    <div class="bot-area">
-      <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>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue'
-import echartLineDate from './echartLineDate.vue'
-import { tableColumnSshl, tableColumnLjhl, tableColumnCcl, tableColumnWshl, tableColumnJdsl } from './gasInject.data'
-import { ccHlEchartOption, ccLEchartOption, wshLEchartOption, jdsLEchartOption } from './gasInject.data'
-import { historydata, listdays, historydataEvaluation,historydataZq } from './gasInject.api'
-import dayjs from 'dayjs'
-import { message } from 'ant-design-vue'
-
-let props = defineProps({
-  activeFlag: {
-    type: String
-  },
-  strtype: {
-    type: String
-  },
-  deviceID: {
-    type: String
-  },
-  showFormDateTime: {
-    type: Boolean
-  }
-})
-
-let timerTabs = props.showFormDateTime ? ref('8') : ref('9')
-let activeKey = props.activeFlag == 'ccsj' ? ref('1') : ref('3')
-let searchData = reactive({
-  startTime: dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
-  endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
-})
-let dataSource = ref<any[]>([])
-let tableColumn = props.activeFlag == 'ccsj' ? ref(tableColumnSshl) : ref(tableColumnCcl)
-let listData = ref<any[]>([])
-
-let EchartOption = computed(() => {
-  if (props.activeFlag == 'ccsj') {
-    return ccHlEchartOption
-  } else if (props.activeFlag != 'ccsj' && activeKey.value == '3') {
-    return ccLEchartOption
-  } else if (props.activeFlag != 'ccsj' && activeKey.value == '4') {
-    return wshLEchartOption
-  } else if (props.activeFlag != 'ccsj' && activeKey.value == '5') {
-    return jdsLEchartOption
-  }
-})
-
-//时间间隔切换
-function changeRadio(val) {
-  timerTabs.value = val.target.value
-}
-//日期切换
-function onRangeChange(__, time) {
-  searchData.startTime = time[0];
-  searchData.endTime = time[1];
-}
-//tab选项切换
-function tabChange(val) {
-  activeKey.value = val
-  switch (val) {
-    case '1':
-      tableColumn.value = tableColumnSshl
-      getHistoryData(timerTabs.value)
-      break;
-    case '2':
-      tableColumn.value = tableColumnLjhl
-      getHistoryData(timerTabs.value)
-      break;
-    case '3':
-      tableColumn.value = tableColumnCcl
-      getHistoryData(timerTabs.value)
-      break;
-    case '4':
-      tableColumn.value = tableColumnWshl
-      getHistoryData(timerTabs.value)
-      break;
-    case '5':
-      tableColumn.value = tableColumnJdsl
-      getHistoryData(timerTabs.value)
-      break;
-  }
-}
-//查询
-function getSearch() {
-  getHistoryData(timerTabs.value)
-}
-async function getHistoryData(skip) {
-  let res = await listdays({ pageNo: 1, pageSize: 1000, strtype: 'pump', ttime_begin: searchData.startTime, ttime_end: searchData.endTime, skip: skip })
-  console.log(res, '抽采数据===')
-  if (res.datalist.records.length) {
-    let gdevicetype = res.datalist.records.map(v => v.gdevicetype)
-    let count = [...new Set(gdevicetype)].filter(el => el != 'pump_under_1');
-    let data = res.datalist.records.filter(fl => fl.gdevicetype != 'pump_under_1').map(el => {
-      return {
-        ...el,
-        ...el.readData
-      }
-    })
-    dataSource.value = data
-    if (activeKey.value == '1') {
-      listData.value = count.map((el, index) => {
-        return {
-          label: `汇流单元${index + 1}`,
-          xData: res.xlist,
-          yData: res.datalist.records.filter(fl => fl.gdevicetype == el).map(dl => dl.readData['mixStdInstant']),
-          yData1: res.datalist.records.filter(fl => fl.gdevicetype == el).map(dl => dl.readData['gasConcentration']),
-          yData2: res.datalist.records.filter(fl => fl.gdevicetype == el).map(dl => dl.readData['methaneStdInstant']),
-        }
-      })
-    } else if (activeKey.value == '3') {
-      listData.value = count.map((el, index) => {
-        return {
-          label: `汇流单元${index + 1}`,
-          xData: res.xlist,
-          yData: res.datalist.records.filter(fl => fl.gdevicetype == el).map(dl => dl.readData['ext_rate_percent']),
-        }
-      })
-    } else if (activeKey.value == '4') {
-      listData.value = count.map((el, index) => {
-        return {
-          label: `汇流单元${index + 1}`,
-          xData: res.xlist,
-          yData: res.datalist.records.filter(fl => fl.gdevicetype == el).map(dl => dl.readData['residual_gas_content_m3_t']),
-        }
-      })
-    } else if (activeKey.value == '5') {
-      listData.value = count.map((el, index) => {
-        return {
-          label: `单元${index + 1}`,
-          xData: res.xlist,
-          yData: res.datalist.records.filter(fl => fl.gdevicetype == el).map(dl => dl.readData['gas_drop_rate_m3_t_mon']),
-        }
-      })
-    }
-    console.log(listData.value, 'listData.value')
-  }
-}
-
-//导出历史数据
-async function handleHisExport() {
-  if (props.activeFlag == 'xgpj') {
-    let res = await historydataEvaluation({ ttime_begin: searchData.startTime, ttime_end: searchData.endTime, skip: '8', gdeviceids: props.deviceID, pageNo: 1, pageSize: 1000, strtype: props.strtype })
-    console.log(res, '导出---')
-    let filename = `促抽效果评价-${new Date().getFullYear()}.${new Date().getMonth() + 1}.${new Date().getDate()}.xlsx`;
-    downFilePublic(res, filename);
-  } else {
- let res = await historydataZq({ ttime_begin: searchData.startTime, ttime_end: searchData.endTime, skip: '8', gdeviceids: props.deviceID, pageNo: 1, pageSize: 1000, strtype: props.strtype })
-    console.log(res, '导出---')
-    let filename = `支管抽采数据-${new Date().getFullYear()}.${new Date().getMonth() + 1}.${new Date().getDate()}.xlsx`;
-    downFilePublic(res, filename);
-  }
-
-  message.success('导出成功')
-}
-// 下载公用方法
-function downFilePublic(content, fileName) {
-  const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
-  // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
-  // IE10以上支持blob但是依然不支持download
-  if ('download' in document.createElement('a')) {
-    // 支持a标签download的浏览器
-    const link = document.createElement('a'); // 创建a标签
-    link.download = fileName; // a标签添加属性
-    link.style.display = 'none';
-    link.href = URL.createObjectURL(blob);
-    document.body.appendChild(link);
-    link.click(); // 执行下载
-    URL.revokeObjectURL(link.href); // 释放url
-    document.body.removeChild(link); // 释放标签
-  } else {
-    // 其他浏览器
-    navigator.msSaveBlob(blob, fileName);
-  }
-}
-
-onMounted(() => {
-  getHistoryData(timerTabs.value)
-})
-
-</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');
-  }
-}
-
-.tableandLine {
-  --image-inject_curve_bg: url('@/assets/images/gasInjection/9-3.png');
-  --image-inject_curve_bg1: url('@/assets/images/gasInjection/9-4.png');
-  width: 100%;
-  min-height: 550px;
-  padding: 15px 20px;
-  box-sizing: border-box;
-}
-
-.top-area {
-  margin-bottom: 10px;
-}
-
-.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;
-}
-
-.curve-nav {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  height: 39px;
-  padding: 0px 20px;
-  background: var(--image-inject_curve_bg) no-repeat;
-  background-size: 100% 100%;
-}
-
-.bot-area {
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-  height: 450px;
-  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%;
-}
-
-.curve-content-item-xg {
-  position: relative;
-  width: 420px;
-  height: 230px;
-  margin: 8px;
-  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);
-}
-
-: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

@@ -1,115 +0,0 @@
-<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/commonTable.vue

@@ -1,46 +0,0 @@
-<template>
-  <div class="common-table">
-    <a-table size="small" :dataSource="tableD" :columns="tableColumn" :scroll="{ y: 465 }"
-        :pagination="false">
-        <template #action="{ record }">
-          <!-- <a class="table-action-link" @click="handleSpDetail(record)">审批详情</a> -->
-        </template>
-      </a-table>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref } from 'vue'
-
-let props=defineProps({
-  tableColumn:{
-    type:Array 
-  },
-  tableD:{
-    type:Array
-  }
-})
-
-
-
-</script>
-
-<style lang="less" scoped>
-@import '/@/design/theme.less';
-
-@{theme-deepblue} {
-  .common-table {
-    --image-inject_zq_monitor: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/9-3.png');
-  }
-}
-
-.common-table {
-  --image-inject_zq_monitor: url('@/assets/images/gasInjection/9-3.png');
-  position: relative;
-  width: 100%;
-  min-height: 550px;
-  
-
- 
-}
-</style>

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

@@ -1,282 +0,0 @@
-<template>
-  <div class="curve-detail">
-    <template v-if="!showExport">
-      <div class="curve-nav">
-        <div class="nav-search">
-          <!-- 时间查询选项 -->
-          <a-radio-group v-model:value="timerTabs" name="radioGroup" @change="changeRadio">
-            <a-radio value="8">按小时</a-radio>
-            <a-radio value="5">按分钟</a-radio>
-          </a-radio-group>
-          <!-- 时间查询条件 -->
-          <a-range-picker style="width:340px" :value="[searchData.startTime, searchData.endTime]"
-            :show-time="{ format: 'HH:mm:ss' }" valueFormat="YYYY-MM-DD HH:mm:ss" :placeholder="['开始时间', '结束时间']"
-            @change="onRangeChange" />
-          <a-button type="primary" preIcon="ant-design:search-outlined" @click="getSearch"
-            style="margin-left: 10px;">查询</a-button>
-        </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="sysType != 'Cc-xg' ? 'curve-content-item' : 'curve-content-item-xg'" 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>
-    </template>
-    <template v-else>
-      <zqHistoryExport :tableColumn="tableColumn" :detailType="'history'" :deviceId="deviceID" :isShowExports="isShowExports" :strtype="strtype"
-      :sysType="sysType"  @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 { zqEchartOption, ccEchartOption, ccxgEchartOption, gkEchartOption } from './gasInject.data'
-import { listdays } from './gasInject.api'
-import dayjs from 'dayjs';
-
-let props = defineProps({
-
-  //是否打开历史数据页面
-  isShowExport: {
-    type: Boolean
-  },
-  //table列
-  tableColumn: {
-    type: Array
-  },
-  //详情图表系统类型
-  sysType: {
-    type: String
-  },
-  //设备ID
-  deviceID: {
-    type: String
-  },
-  //设备类型
-  strtype: {
-    type: String
-  },
-  //是否显示导出按钮
-  isShowExports:{
-    type:Boolean
-  }
-})
-//注气参数详情数据
-let listData = ref<any[]>([])
-
-let searchData = reactive({
-  startTime: dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
-  endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
-})
-let timerTabs = ref('8')
-let showExport = ref(false)
-
-//图表配置项
-let echartOption = computed(() => {
-  return props.sysType == 'Cc' ? ccEchartOption : props.sysType == 'Zq' ? zqEchartOption : props.sysType == 'Cc-xg' ? ccxgEchartOption : gkEchartOption
-})
-
-//时间间隔切换
-function changeRadio(val) {
-  timerTabs.value = val.target.value
-}
-//日期切换
-function onRangeChange(__, time) {
-  searchData.startTime = time[0];
-  searchData.endTime = time[1];
-}
-async function getHistoryData(skip) {
-  if (props.sysType == 'Zq') {
-    let res = await listdays({ pageNo: 1, pageSize: 1000, gdeviceids: props.deviceID, strtype: props.strtype, ttime_begin: searchData.startTime, ttime_end: searchData.endTime, skip: skip })
-    if (res.datalist.records.length) {
-      let count = 0
-      let data = res.datalist.records.find(el => el.readData.flowStdInstant_1)
-      Object.keys(data.readData).forEach(el => {
-        if (el.indexOf('flowStdAccum_') != -1) {
-          count += 1
-        }
-      })
-      listData.value = Array.from({ length: count }).map((el, index) => {
-        return {
-          label: `钻孔${index + 1}`,
-          xData: res.xlist,
-          yData: res.datalist.records.map(dl => dl.readData[`flowStdInstant_${index + 1}`]),
-          yData1: res.datalist.records.map(dl => dl.readData[`injectionPressure_${index + 1}`]),
-        }
-      })
-    }
-  } else if (props.sysType == 'Cc' || props.sysType == 'Cc-xg') {
-    let res = await listdays({ pageNo: 1, pageSize: 1000, strtype: 'pump', ttime_begin: searchData.startTime, ttime_end: searchData.endTime, skip: skip })
-    console.log(res, '抽采数据')
-    if (res.datalist.records.length) {
-      let gdevicetype = res.datalist.records.map(v => v.gdevicetype)
-      let count = [...new Set(gdevicetype)].filter(el => el != 'pump_under_1');
-      console.log(count, 'count')
-      listData.value = count.map((el, index) => {
-        return {
-          label: `汇流单元${index + 1}`,
-          xData: res.xlist,
-          yData: res.datalist.records.filter(fl => fl.gdevicetype == el).map(dl => dl.readData['mixStdInstant']),
-          yData1: res.datalist.records.filter(fl => fl.gdevicetype == el).map(dl => dl.readData['gasConcentration']),
-           yData2: res.datalist.records.filter(fl => fl.gdevicetype == el).map(dl => dl.readData['methaneStdInstant']),
-          ext_rate_percent: res.datalist.records.filter(fl => fl.gdevicetype == el).map(dl => dl.readData['ext_rate_percent']),
-          residual_gas_content_m3_t: res.datalist.records.filter(fl => fl.gdevicetype == el).map(dl => dl.readData['residual_gas_content_m3_t']),
-          gas_drop_rate_m3_t_mon: res.datalist.records.filter(fl => fl.gdevicetype == el).map(dl => dl.readData['gas_drop_rate_m3_t_mon']),
-        }
-      })
-      console.log(listData.value, 'listData.value')
-    }
-  }
-
-
-}
-//查询
-function getSearch() {
-  console.log(timerTabs.value,'timerTabs.value')
-  switch (timerTabs.value) {
-    case '8':
-      getHistoryData(timerTabs.value)
-      break;
-    case '5':
-      getHistoryData(timerTabs.value)
-      break;
-  }
-}
-//打开历史数据详情及导出
-function handleHistory() {
-  showExport.value = true
-}
-//历史数据返回至详情
-function handleBack() {
-  showExport.value = false
-}
-
-watch(() => props.isShowExport, (newV, oldV) => {
-  showExport.value = newV
-  getHistoryData(timerTabs.value)
-}, { 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');
-  }
-}
-
-.curve-detail {
-  --image-inject_curve_bg: url('@/assets/images/gasInjection/9-3.png');
-  --image-inject_curve_bg1: url('@/assets/images/gasInjection/9-4.png');
-  width: 100%;
-  min-height: 550px;
-  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%;
-  }
-
-  .curve-content {
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-    height: calc(100% - 54px);
-    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%;
-  }
-  .curve-content-item-xg{
-    position: relative;
-    width: 420px;
-    height: 230px;
-    margin: 8px;
-    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);
-  }
-
-  .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/echartLineDate.vue

@@ -1,212 +0,0 @@
-<template>
-  <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="8">按小时</a-radio>
-        <a-radio value="5">按分钟</a-radio>
-      </a-radio-group>
-    </div>
-    <div class="echart-line" ref="echartLines"></div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { nextTick, onMounted, reactive, ref, watch } from 'vue'
-import * as echarts from 'echarts';
-import { listdays } from './gasInject.api'
-
-let props = defineProps({
-  //图表配置项
-  echartOption: {
-    type: Object as any
-  },
-  data: {
-    type: Object
-  },
-  //图表数据
-  ecahrtData: {
-    type: Object as any
-  }
-})
-
-let flag = ref(false)
-let echartLines = ref(null)
-let nowData = ref('8')
-let deviceData = reactive({}) as any
-let deviceId = ref<any>('')
-let strtype = ref<any>('')
-let ecahrtDatas = reactive({}) as any
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor() {
-  if (nowData.value == '8') {
-    timer = setTimeout(
-      async () => {
-        getInitData(nowData.value)
-        if (timer) {
-          timer = null;
-        }
-        getMonitor();
-      },
-      1000 * 60 * 60
-    );
-  } else {
-    timer = setTimeout(
-      async () => {
-        getInitData(nowData.value)
-        if (timer) {
-          timer = null;
-        }
-        getMonitor();
-      },
-      1000 * 60 * 10
-    );
-  }
-
-}
-function getOption() {
-  nextTick(() => {
-    let myChart = echarts.init(echartLines.value);
-    let option = {
-      tooltip: props.echartOption.tooltip,
-      grid: props.echartOption.grid,
-      legend: props.echartOption.legend,
-      dataZoom: [
-        {
-          // 这部分是关键
-          show: true,
-          type: 'inside', // 这里可以选择你需要的类型，例如 'inside'
-          height: 10, // 设置缩放条高度
-          left: 'center',
-          bottom: 25,
-          labelPrecision: 0, // 标签精度，默认为auto
-          showDetail: false, // 是否显示详情
-          showDataShadow: false, // 是否显示数据阴影
-        },
-      ],
-      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: ecahrtDatas.xData
-      }],
-      yAxis: props.echartOption.yAxis,
-      series: props.echartOption.series.map((el, index) => {
-        return {
-          ...el,
-          data: ecahrtDatas[el.data]
-        }
-      })
-    };
-    myChart.setOption(option);
-    window.onresize = function () {
-      myChart.resize();
-    };
-  });
-}
-//选项切换
-async function changeRadio(val) {
-  nowData.value = val.target.value
-  await getInitData(nowData.value)
-}
-
-async function getInitData(skip) {
-  let res = await listdays({ pageNo: 1, pageSize: 100, gdeviceids: deviceId.value, strtype: strtype.value, skip: skip })
-  console.log(res, '80000===')
-  ecahrtDatas.xData = res.xlist || []
-  ecahrtDatas.injectionPressure = res.datalist.records.map(el => el.readData.injectionPressure) || []
-  ecahrtDatas.flowStdInstant = res.datalist.records.map(el => el.readData.flowStdInstant) || []
-  ecahrtDatas.mixStdInstant = res.datalist.records.map(el => el.readData.mixStdInstant) || []
-  ecahrtDatas.gasConcentration = res.datalist.records.map(el => el.readData.gasConcentration) || []
-  ecahrtDatas.methaneStdInstant = res.datalist.records.map(el => el.readData.methaneStdInstant) || []
-  getOption()
-}
-
-watch(() => props.data, (newV, oldV) => {
-  if (newV?.deviceId && !flag.value) {
-    deviceData = Object.assign({}, newV)
-    if (props.echartOption.types == 'zq') {
-      deviceId.value = deviceData.deviceId
-      strtype.value = deviceData.strtype
-    } else if (props.echartOption.types == 'cc') {
-      deviceId.value = deviceData.pumpDeviceId
-      strtype.value = deviceData.pumpData.deviceType
-    }
-    getInitData(nowData.value)
-    flag.value = true
-  }
-})
-
-watch(() => props.ecahrtData, (newV, oldV) => {
-  if (newV && !props.echartOption.showTime) {
-    //不发起请求，使用父子组件传值
-    ecahrtDatas = Object.assign({}, newV)
-    getOption()
-  }
-}, { immediate: true })
-
-onMounted(() => {
-
-  getMonitor()
-})
-</script>
-
-<style lang="less" scoped>
-.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

@@ -1,270 +0,0 @@
-<template>
-  <div class="echartLineDateGk">
-    <div class="curve-nav">
-      <div class="nav-search">
-        <!-- 时间查询选项 -->
-        <a-radio-group v-model:value="timerTabs" name="radioGroup" @change="changeRadio">
-          <a-radio value="8">按小时</a-radio>
-          <a-radio value="5">按分钟</a-radio>
-        </a-radio-group>
-        <!-- 时间查询条件 -->
-        <a-range-picker style="width:340px" :value="[searchData.startTime, searchData.endTime]"
-          :show-time="{ format: 'HH:mm:ss' }" valueFormat="YYYY-MM-DD HH:mm:ss" :placeholder="['开始时间', '结束时间']"
-          @change="onRangeChange" />
-        <a-button type="primary" preIcon="ant-design:search-outlined" @click="getSearch"
-          style="margin-left: 10px;">查询</a-button>
-      </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, onMounted, reactive } from 'vue'
-import * as echarts from 'echarts';
-import { listdays,historydata,historydataEquipment } from './gasInject.api'
-import dayjs from 'dayjs';
-import { message } from 'ant-design-vue';
-
-let props = defineProps({
-  //图表配置项
-  echartOption: {
-    type: Object as any
-  },
-  //设备ID
-  deviceID: {
-    type: String
-  },
-  //设备类型
-  strtype: {
-    type: String
-  }
-})
-
-let timerTabs = ref('8')
-//查询时间段-天
-let searchData = reactive({
-  startTime: dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
-  endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
-})
-let echartLines = ref(null)
-let echartData = reactive({}) as any
-
-
-//时间间隔切换
-function changeRadio(val) {
-  timerTabs.value = val.target.value
-}
-//日期切换
-function onRangeChange(__, time) {
-  searchData.startTime = time[0];
-  searchData.endTime = time[1];
-}
-//获取图表数据
-async function getInit(skip) {
-  let res = await listdays({ pageNo: 1, pageSize: 1000, gdeviceids: props.deviceID, strtype: props.strtype, ttime_begin: searchData.startTime, ttime_end: searchData.endTime, skip: skip })
-  console.log(res, '图表曲线')
-  if (res) {
-    echartData.xData = res.xlist || []
-    echartData.xitongVoltage = res.datalist.records.map(el => el.readData.xitongVoltage) || []
-    echartData.zhujiCurrent = res.datalist.records.map(el => el.readData.zhujiCurrent) || []
-    echartData.fenglengCurrent = res.datalist.records.map(el => el.readData.fenglengCurrent) || []
-    echartData.qianzhouTemp = res.datalist.records.map(el => el.readData.qianzhouTemp) || []
-    echartData.houzhouTemp = res.datalist.records.map(el => el.readData.houzhouTemp) || []
-    echartData.raozuTemp = res.datalist.records.map(el => el.readData.raozuTemp) || []
-    echartData.paiqiTemp = res.datalist.records.map(el => el.readData.paiqiTemp) || []
-    echartData.penyouTemp = res.datalist.records.map(el => el.readData.penyouTemp) || []
-    echartData.youqitongTemp = res.datalist.records.map(el => el.readData.youqitongTemp) || []
-    getOption()
-  }
-}
-//查询
-function getSearch() {
-  switch (timerTabs.value) {
-    case '8':
-      getInit(timerTabs.value)
-      break;
-    case '5':
-      getInit(timerTabs.value)
-      break;
-  }
-
-}
-
-function getOption() {
-  nextTick(() => {
-    let myChart = echarts.init(echartLines.value);
-    let option = {
-      tooltip: props.echartOption.tooltip,
-      grid: props.echartOption.grid,
-      legend: props.echartOption.legend,
-      dataZoom: [
-        {
-          // 这部分是关键
-          show: true,
-          type: 'inside', // 这里可以选择你需要的类型，例如 'inside'
-          height: 10, // 设置缩放条高度
-          left: 'center',
-          bottom: 25,
-          labelPrecision: 0, // 标签精度，默认为auto
-          showDetail: false, // 是否显示详情
-          showDataShadow: false, // 是否显示数据阴影
-        },
-      ],
-      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: echartData.xData
-      }],
-      yAxis: props.echartOption.yAxis,
-      series: props.echartOption.series.map((el, index) => {
-        return {
-          ...el,
-          data: echartData[el.data]
-        }
-      })
-    };
-    myChart.setOption(option);
-    window.onresize = function () {
-      myChart.resize();
-    };
-  });
-}
-//导出
-async function handleHistory() {
- let res = await historydataEquipment({ ttime_begin: searchData.startTime, ttime_end: searchData.endTime, skip: timerTabs.value, gdeviceids:props.deviceID, pageNo: 1, pageSize: 1000, strtype:props.strtype })
-  console.log(res, '导出---')
-  let filename = `装备运行工况-${new Date().getFullYear()}.${new Date().getMonth() +1}.${new Date().getDate()}.xlsx`;
-  downFilePublic(res, filename);
-  message.success('导出成功')
-}
-// 下载公用方法
-function downFilePublic(content, fileName) {
-  const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
-  // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
-  // IE10以上支持blob但是依然不支持download
-  if ('download' in document.createElement('a')) {
-    // 支持a标签download的浏览器
-    const link = document.createElement('a'); // 创建a标签
-    link.download = fileName; // a标签添加属性
-    link.style.display = 'none';
-    link.href = URL.createObjectURL(blob);
-    document.body.appendChild(link);
-    link.click(); // 执行下载
-    URL.revokeObjectURL(link.href); // 释放url
-    document.body.removeChild(link); // 释放标签
-  } else {
-    // 其他浏览器
-    navigator.msSaveBlob(blob, fileName);
-  }
-}
-
-onMounted(() => {
-  getInit(timerTabs.value)
-})
-
-</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

@@ -1,281 +0,0 @@
-<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:340px" :value="[searchData.startTime, searchData.endTime]"
-            :show-time="{ format: 'HH:mm:ss' }" valueFormat="YYYY-MM-DD HH:mm:ss" :placeholder="['开始时间', '结束时间']"
-            @change="onRangeChange" />
-        </div>
-        <div class="search-item">
-          <span> 间隔时间:</span>
-          <a-select ref="select" v-model:value="skip" style="width: 240px">
-            <a-select-option v-for="(item, index) in timeOption" :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" @click="getSearch">查询</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" @change="changePage">
-        <template #action="{ record }">
-          <!-- <a class="table-action-link" @click="handleSpDetail(record)">审批详情</a> -->
-        </template>
-      </a-table>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue'
-import { SvgIcon } from '/@/components/Icon';
-import { listdays, historydata } from './gasInject.api'
-import { timeOption } from './gasInject.data'
-import dayjs from 'dayjs';
-import { message } from 'ant-design-vue';
-
-let props = defineProps({
-  //是否显示返回按钮
-  isShowIcon: {
-    type: Boolean
-  },
-  tableColumn: {
-    type: Array
-  },
-  deviceId: {
-    type: String
-  },
-  //设备类型
-  strtype: {
-    type: String
-  }
-})
-
-let searchData = reactive({
-  startTime: dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
-  endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
-})
-let skip = ref('1')
-
-let dataSource = ref<any[]>([])
-//分页参数配置
-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 onRangeChange(__, time) {
-  searchData.startTime = time[0];
-  searchData.endTime = time[1];
-}
-//查询
-function getSearch() {
-  pagination.current = 1
-  getTbleData()
-}
-//获取table数据
-async function getTbleData() {
-  let res = await listdays({ ttime_begin: searchData.startTime, ttime_end: searchData.endTime, skip: skip.value, gdeviceids: props.deviceId, pageNo: pagination.current, pageSize: pagination.pageSize, strtype: props.strtype })
-  console.log(res, '环境监测')
-  dataSource.value = res.datalist.records.map(el => {
-    return {
-      ...el,
-      ...el.readData
-    }
-  }) || []
-  pagination.total = res.datalist.total
-}
-//分页切换
-function changePage(val) {
-  pagination.current = val.current
-  pagination.pageSize = val.pageSize
-  getTbleData()
-}
-//导出历史数据
-async function handleHisExport() {
-  let res = await historydata({ ttime_begin: searchData.startTime, ttime_end: searchData.endTime, skip: skip.value, gdeviceids: props.deviceId, pageNo: pagination.current, pageSize: pagination.pageSize, strtype: props.strtype })
-  let fileName = props.strtype == 'modelsensor_o2' ? '氧气传感器' : props.strtype == 'modelsensor_ch4' ? '甲烷传感器' : props.strtype == 'modelsensor_temperature' ? '温度传感器' : props.strtype == 'modelsensor_co' ? 'CO传感器' : ''
-  let filename = `${fileName}-${new Date().getFullYear()}.${new Date().getMonth() + 1}.${new Date().getDate()}.xlsx`;
-  downFilePublic(res, filename);
-  message.success('导出成功')
-}
-// 下载公用方法
-function downFilePublic(content, fileName) {
-  const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
-  // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
-  // IE10以上支持blob但是依然不支持download
-  if ('download' in document.createElement('a')) {
-    // 支持a标签download的浏览器
-    const link = document.createElement('a'); // 创建a标签
-    link.download = fileName; // a标签添加属性
-    link.style.display = 'none';
-    link.href = URL.createObjectURL(blob);
-    document.body.appendChild(link);
-    link.click(); // 执行下载
-    URL.revokeObjectURL(link.href); // 释放url
-    document.body.removeChild(link); // 释放标签
-  } else {
-    // 其他浏览器
-    navigator.msSaveBlob(blob, fileName);
-  }
-}
-
-onMounted(() => {
-  getTbleData()
-})
-</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

@@ -1,79 +0,0 @@
-<template>
-  <div class="environment-detail-table">
-    <a-tabs v-model:activeKey="activeKey" @change="changeTab">
-      <a-tab-pane key="1" tab="氧气传感器">
-        <environHistoryExport :isShowIcon="true" :tableColumn="columnO2" :deviceId="deviceId" :strtype="strtype">
-        </environHistoryExport>
-      </a-tab-pane>
-      <a-tab-pane key="2" tab="甲烷传感器">
-        <environHistoryExport :isShowIcon="true" :tableColumn="columnCh4" :deviceId="deviceId" :strtype="strtype">
-        </environHistoryExport>
-      </a-tab-pane>
-      <a-tab-pane key="3" tab="温度传感器">
-        <environHistoryExport :isShowIcon="true" :tableColumn="columnTemp" :deviceId="deviceId" :strtype="strtype">
-        </environHistoryExport>
-      </a-tab-pane>
-      <a-tab-pane key="4" tab="CO传感器">
-        <environHistoryExport :isShowIcon="true" :tableColumn="columnCO" :deviceId="deviceId" :strtype="strtype">
-        </environHistoryExport>
-      </a-tab-pane>
-    </a-tabs>
-  </div>
-</template>
-
-<script setup lang='ts'>
-import { ref, onMounted, onBeforeMount } from 'vue'
-import environHistoryExport from './environHistoryExport.vue'
-import { columnO2, columnCh4, columnTemp, columnCO } from './gasInject.data'
-
-
-let props = defineProps({
-  deviceData: {
-    type: Object as any
-  },
-})
-
-let activeKey = ref('1')
-let deviceId = ref('')
-let strtype = ref('')
-
-//tab切换
-function changeTab(val) {
-  activeKey.value = val
-  switch (val) {
-    case '1':
-      deviceId.value = props.deviceData.o2.deviceID
-      strtype.value = props.deviceData.o2.deviceType
-      break;
-    case '2':
-      deviceId.value = props.deviceData.ch4.deviceID
-      strtype.value = props.deviceData.ch4.deviceType
-      break;
-    case '3':
-      deviceId.value = props.deviceData.temp.deviceID
-      strtype.value = props.deviceData.temp.deviceType
-      break;
-    case '4':
-      deviceId.value = props.deviceData.co.deviceID
-      strtype.value = props.deviceData.co.deviceType
-      break;
-  }
-}
-
-
-onBeforeMount(() => {
-  if (props.deviceData.o2) {
-    deviceId.value = props.deviceData.o2.deviceID
-     strtype.value = props.deviceData.o2.deviceType
-  }
-})
-</script>
-
-<style lang="less" scoped>
-.environment-detail-table {
-  width: 100%;
-  min-height: 550px;
-  padding: 15px 20px;
-  box-sizing: border-box;
-}
-</style>

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

@@ -1,80 +0,0 @@
-import { defHttp } from '/@/utils/http/axios';
-import { AesEncryption } from '/@/utils/cipher';
-import { loginCipher } from '/@/settings/encryptionSetting';
-
-
-enum Api {
-getlist = '/safety/ventanalyDevicesetLog/list',
-devicecontrol = '/safety/ventanalyMonitorData/devicecontrol',
-listdays = '/safety/ventanalyMonitorData/listdaysFast',
-historydata = '/safety/ventanalyMonitorData/export/historydata',
-getAlarmLogList = '/monitor/groupCompany/getAlarmLogList',
-exportXls = '/safety/ventanalyAlarmLog/exportXls',
-historydataZq='/safety/ventanalyMonitorData/export/injection/historydata',
-historydataEquipment='/safety/ventanalyMonitorData/export/injection/equipment/historydata',
-historydataEvaluation= '/safety/ventanalyMonitorData/export/injection/evaluation/historydata'
-}
-
-
-
-/**
-* 装备运行状态与控制-详情列表
-* @param params
-*/
-export const getList = (params) => defHttp.get({ url: Api.getlist, params }, { joinParamsToUrl: true });
-
-
-/**
-*装备运行状态与控制-控制
-* @param params
-*/
-export const devicecontrol = (params) => {
-// 加密password
-const encryption = new AesEncryption({ key: loginCipher.key, iv: loginCipher.iv });
-params.password = encryption.encryptByAES(params.password);
-return defHttp.put({ url: Api.devicecontrol, params });
-};
-
-/**
-* 详情历史曲线
-* @param params
-*/
-export const listdays = (params) => defHttp.get({ url: Api.listdays, params }, { joinParamsToUrl: true });
-
-/**
-* 导出详情历史
-* @param params
-*/
-export const historydata = (params) => defHttp.get({ url: Api.historydata, params, responseType: 'blob' });
-
-/**
-* 设备预警历史
-* @param params
-*/
-export const getAlarmLogList = (params) => defHttp.post({ url: Api.getAlarmLogList, params },);
-
-/**
-* 异常详情-导出
-* @param params
-*/
-export const exportXls = (params) => defHttp.get({ url: Api.exportXls, params, responseType: 'blob' });
-
-/**
-* 注气参数历史详情-导出
-* @param params
-*/
-export const historydataZq = (params) => defHttp.get({ url: Api.historydataZq, params, responseType: 'blob' });
-
-/**装备运行工况-导出
-* 导出
-* @param params
-*/
-export const historydataEquipment = (params) => defHttp.get({ url: Api.historydataEquipment, params, responseType:
-'blob' });
-
-/**促抽效果评价-导出
-* 导出
-* @param params
-*/
-export const historydataEvaluation = (params) => defHttp.get({ url: Api.historydataEvaluation, params, responseType:
-'blob' });

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

@@ -1,3506 +0,0 @@
-import * as echarts from 'echarts';
-import { BasicColumn } from '/@/components/Table';
-
-//时间间隔选择器
-export let timeOption = [
-  {
-    label: '1秒',
-    value: '1',
-  },
-  {
-    label: '5秒',
-    value: '2',
-  },
-  {
-    label: '10秒',
-    value: '3',
-  },
-  {
-    label: '30秒',
-    value: '4',
-  },
-  {
-    label: '1分钟',
-    value: '5',
-  },
-  {
-    label: '10分钟',
-    value: '6',
-  },
-  {
-    label: '30分钟',
-    value: '7',
-  },
-  {
-    label: '1小时',
-    value: '8',
-  },
-  {
-    label: '1天',
-    value: '9',
-  },
-
-]
-//装备控制
-export let columnControl: BasicColumn[] = [
-  {
-    title: '序号',
-    width: 60,
-    align: 'center',
-    customRender: ({ index }: { index: number }) => `${index + 1}`
-  },
-  {
-    title: '设备名称',
-    dataIndex: 'devicename',
-    key: 'devicename',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '状态',
-    dataIndex: 'strremark',
-    key: 'strremark',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '操作人',
-    dataIndex: 'username',
-    key: 'username',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '操作时间',
-    dataIndex: 'createTime',
-    key: 'createTime',
-    align: 'center',
-    ellipsis: true,
-  },
-]
-//注气参数
-export let tableColumnZqcs: BasicColumn[] = [
-  {
-    title: '序号',
-    width: 60,
-    align: 'center',
-    customRender: ({ index }: { index: number }) => `${index + 1}`
-  },
-  {
-    title: '时间',
-    dataIndex: 'ttime',
-    key: 'ttime',
-    width: 160,
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '1#注氮定向钻孔',
-    children: [
-      {
-        title: '注气压力(kPa)',
-        dataIndex: 'injectionPressure_1',
-        key: 'injectionPressure_1',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '标况瞬时流量(Nm³/h)',
-        dataIndex: 'flowStdInstant_1',
-        key: 'flowStdInstant_1',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '标况累计流量(Nm³)',
-        dataIndex: 'flowStdAccum_1',
-        key: 'flowStdAccum_1',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '工况瞬时流量(Nm³/h)',
-        dataIndex: 'flowWorkInstant_1',
-        key: 'flowWorkInstant_1',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '工况累计流量(Nm³)',
-        dataIndex: 'flowWorkAccum_1',
-        key: 'flowWorkAccum_1',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '注气温度(℃)',
-        dataIndex: 'injectionTemperature',
-        key: 'injectionTemperature',
-        width: 160,
-        align: 'center',
-        ellipsis: true,
-      },
-    ]
-  },
-  {
-    title: '2#注氮定向钻孔',
-    children: [
-      {
-        title: '注气压力(kPa)',
-        dataIndex: 'injectionPressure_2',
-        key: 'injectionPressure_2',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-
-      },
-      {
-        title: '标况瞬时流量(Nm³/h)',
-        dataIndex: 'flowStdInstant_2',
-        key: 'flowStdInstant_2',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '标况累计流量(Nm³)',
-        dataIndex: 'flowStdAccum_2',
-        key: 'flowStdAccum_2',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '工况瞬时流量(Nm³/h)',
-        dataIndex: 'flowWorkInstant_2',
-        key: 'flowWorkInstant_2',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '工况累计流量(Nm³)',
-        dataIndex: 'flowWorkAccum_2',
-        key: 'flowWorkAccum_2',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-        {
-          title: '注气温度(℃)',
-        dataIndex: 'injectionTemperature',
-        key: 'injectionTemperature',
-        width: 160,
-        align: 'center',
-        ellipsis: true,
-      },
-    ]
-  },
-  {
-    title: '3#注氮定向钻孔',
-    children: [
-      {
-        title: '注气压力(kPa)',
-        dataIndex: 'injectionPressure_3',
-        key: 'injectionPressure_3',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '标况瞬时流量(Nm³/h)',
-        dataIndex: 'flowStdInstant_3',
-        key: 'flowStdInstant_3',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '标况累计流量(Nm³)',
-        dataIndex: 'flowStdAccum_3',
-        key: 'flowStdAccum_3',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '工况瞬时流量(Nm³/h)',
-        dataIndex: 'flowWorkInstant_3',
-        key: 'flowWorkInstant_3',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '工况累计流量(Nm³)',
-        dataIndex: 'flowWorkAccum_3',
-        key: 'flowWorkAccum_3',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-        {
-      title: '注气温度(℃)',
-        dataIndex: 'injectionTemperature',
-        key: 'injectionTemperature',
-        width: 160,
-        align: 'center',
-        ellipsis: true,
-      },
-    ]
-  },
-  {
-    title: '4#注氮定向钻孔',
-    children: [
-      {
-        title: '注气压力(kPa)',
-        dataIndex: 'injectionPressure_4',
-        key: 'injectionPressure_4',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '标况瞬时流量(Nm³/h)',
-        dataIndex: 'flowStdInstant_4',
-        key: 'flowStdInstant_4',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '标况累计流量(Nm³)',
-        dataIndex: 'flowStdAccum_4',
-        key: 'flowStdAccum_4',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '工况瞬时流量(Nm³/h)',
-        dataIndex: 'flowWorkInstant_4',
-        key: 'flowWorkInstant_4',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '工况累计流量(Nm³)',
-        dataIndex: 'flowWorkAccum_4',
-        key: 'flowWorkAccum_4',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-        {
-         title: '注气温度(℃)',
-        dataIndex: 'injectionTemperature',
-        key: 'injectionTemperature',
-        width: 160,
-        align: 'center',
-        ellipsis: true,
-      },
-    ]
-  },
-  {
-    title: '5#注氮定向钻孔',
-    children: [
-      {
-        title: '注气压力(kPa)',
-        dataIndex: 'injectionPressure_5',
-        key: 'injectionPressure_5',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '标况瞬时流量(Nm³/h)',
-        dataIndex: 'flowStdInstant_5',
-        key: 'flowStdInstant_5',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '标况累计流量(Nm³)',
-        dataIndex: 'flowStdAccum_5',
-        key: 'flowStdAccum_5',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '工况瞬时流量(Nm³/h)',
-        dataIndex: 'flowWorkInstant_5',
-        key: 'flowWorkInstant_5',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '工况累计流量(Nm³)',
-        dataIndex: 'flowWorkAccum_5',
-        key: 'flowWorkAccum_5',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-        {
-        title: '注气温度(℃)',
-        dataIndex: 'injectionTemperature',
-        key: 'injectionTemperature',
-        width: 160,
-        align: 'center',
-        ellipsis: true,
-      },
-    ]
-  },
-  {
-    title: '6#注氮定向钻孔',
-    children: [
-      {
-        title: '注气压力(kPa)',
-        dataIndex: 'injectionPressure_6',
-        key: 'injectionPressure_6',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '标况瞬时流量(Nm³/h)',
-        dataIndex: 'flowStdInstant_6',
-        key: 'flowStdInstant_6',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '标况累计流量(Nm³)',
-        dataIndex: 'flowStdAccum_6',
-        key: 'flowStdAccum_6',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '工况瞬时流量(Nm³/h)',
-        dataIndex: 'flowWorkInstant_6',
-        key: 'flowWorkInstant_6',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '工况累计流量(Nm³)',
-        dataIndex: 'flowWorkAccum_6',
-        key: 'flowWorkAccum_6',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-        {
-         title: '注气温度(℃)',
-        dataIndex: 'injectionTemperature',
-        key: 'injectionTemperature',
-        width: 160,
-        align: 'center',
-        ellipsis: true,
-      },
-    ]
-  },
-  {
-    title: '7#注氮定向钻孔',
-    children: [
-      {
-        title: '注气压力(kPa)',
-        dataIndex: 'injectionPressure_7',
-        key: 'injectionPressure_7',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '标况瞬时流量(Nm³/h)',
-        dataIndex: 'flowStdInstant_7',
-        key: 'flowStdInstant_7',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '标况累计流量(Nm³)',
-        dataIndex: 'flowStdAccum_7',
-        key: 'flowStdAccum_7',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '工况瞬时流量(Nm³/h)',
-        dataIndex: 'flowWorkInstant_7',
-        key: 'flowWorkInstant_7',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '工况累计流量(Nm³)',
-        dataIndex: 'flowWorkAccum_7',
-        key: 'flowWorkAccum_7',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-        {
-        title: '注气温度(℃)',
-        dataIndex: 'injectionTemperature',
-        key: 'injectionTemperature',
-        width: 160,
-        align: 'center',
-        ellipsis: true,
-      },
-    ]
-  },
-  {
-    title: '8#注氮定向钻孔',
-    children: [
-      {
-        title: '注气压力(kPa)',
-        dataIndex: 'injectionPressure_8',
-        key: 'injectionPressure_8',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '标况瞬时流量(Nm³/h)',
-        dataIndex: 'flowStdInstant_8',
-        key: 'flowStdInstant_8',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '标况累计流量(Nm³)',
-        dataIndex: 'flowStdAccum_8',
-        key: 'flowStdAccum_8',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '工况瞬时流量(Nm³/h)',
-        dataIndex: 'flowWorkInstant_8',
-        key: 'flowWorkInstant_8',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-      {
-        title: '工况累计流量(Nm³)',
-        dataIndex: 'flowWorkAccum_8',
-        key: 'flowWorkAccum_8',
-        align: 'center',
-        ellipsis: true,
-        width: 160,
-      },
-        {
-        title: '注气温度(℃)',
-        dataIndex: 'injectionTemperature',
-        key: 'injectionTemperature',
-        width: 160,
-        align: 'center',
-        ellipsis: true,
-      },
-    ]
-  },
-]
-//抽采参数
-export let tableColumnCcs: BasicColumn[] = [
-  {
-    title: '序号',
-    width: 60,
-    align: 'center',
-    customRender: ({ index }: { index: number }) => `${index + 1}`
-  },
-  {
-    title: '设备名称',
-    dataIndex: 'gdevicename',
-    key: 'gdevicename',
-    align: 'center',
-    ellipsis: true,
-    width: 155,
-  },
-  {
-    title: '抽采负压(kPa)',
-    dataIndex: 'negativePressure',
-    key: 'negativePressure',
-    align: 'center',
-    ellipsis: true,
-    width: 155,
-  },
-  {
-    title: '标瞬混量(m³/min)',
-    dataIndex: 'mixStdInstant',
-    key: 'mixStdInstant',
-    align: 'center',
-    ellipsis: true,
-    width: 155,
-  },
-  {
-    title: '瓦斯浓度(%)',
-    dataIndex: 'gasConcentration',
-    key: 'gasConcentration',
-    align: 'center',
-    ellipsis: true,
-    width: 155,
-  },
-  {
-    title: '标瞬纯量(m³/min)',
-    dataIndex: 'methaneStdInstant',
-    key: 'methaneStdInstant',
-    align: 'center',
-    ellipsis: true,
-    width: 155,
-  },
-  {
-    title: '标累混量(m³)',
-    dataIndex: 'mixStdTotal',
-    key: 'mixStdTotal',
-    align: 'center',
-    ellipsis: true,
-    width: 155,
-  },
-
-  {
-    title: '标累纯量(m³)',
-    dataIndex: 'methaneStdTotal',
-    key: 'methaneStdTotal',
-    align: 'center',
-    ellipsis: true,
-    width: 155,
-  },
-  {
-    title: '时间',
-    dataIndex: 'ttime',
-    key: 'ttime',
-    align: 'center',
-    ellipsis: true,
-  },
-]
-//抽采数据-瞬时
-export let tableColumnSshl: BasicColumn[] = [
-  {
-    title: '序号',
-    width: 60,
-    align: 'center',
-    customRender: ({ index }: { index: number }) => `${index + 1}`
-  },
-  {
-    title: '设备名称',
-    dataIndex: 'gdevicename',
-    key: 'gdevicename',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '安装位置',
-    dataIndex: 'ginstallpos',
-    key: 'ginstallpos',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '瞬时混量(m³/min)',
-    dataIndex: 'mixStdInstant',
-    key: 'mixStdInstant',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '抽采浓度(%)',
-    dataIndex: 'gasConcentration',
-    key: 'gasConcentration',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '瞬时纯量(m³/min)',
-    dataIndex: 'methaneStdInstant',
-    key: 'methaneStdInstant',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '抽采负压(kPa)',
-    dataIndex: 'negativePressure',
-    key: 'negativePressure',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '时间',
-    dataIndex: 'ttime',
-    key: 'ttime',
-    align: 'center',
-    ellipsis: true,
-  },
-]
-//抽采数据-累计
-export let tableColumnLjhl: BasicColumn[] = [
-  {
-    title: '序号',
-    width: 60,
-    align: 'center',
-    customRender: ({ index }: { index: number }) => `${index + 1}`
-  },
-  {
-    title: '设备名称',
-    dataIndex: 'gdevicename',
-    key: 'gdevicename',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '安装位置',
-    dataIndex: 'ginstallpos',
-    key: 'ginstallpos',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '累计混量(m³)',
-    dataIndex: 'mixStdTotal',
-    key: 'mixStdTotal',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '累计纯量(m³)',
-    dataIndex: 'methaneStdTotal',
-    key: 'methaneStdTotal',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '时间',
-    dataIndex: 'ttime',
-    key: 'ttime',
-    align: 'center',
-    ellipsis: true,
-  },
-]
-//效果评价-抽采率
-export let tableColumnCcl: BasicColumn[] = [
-  {
-    title: '序号',
-    width: 60,
-    align: 'center',
-    customRender: ({ index }: { index: number }) => `${index + 1}`
-  },
-  {
-    title: '设备名称',
-    dataIndex: 'gdevicename',
-    key: 'gdevicename',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '安装位置',
-    dataIndex: 'ginstallpos',
-    key: 'ginstallpos',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '抽采率(%)',
-    dataIndex: 'ext_rate_percent',
-    key: 'ext_rate_percent',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '时间',
-    dataIndex: 'ttime',
-    key: 'ttime',
-    align: 'center',
-    ellipsis: true,
-  },
-]
-//效果评价-残余瓦斯含量
-export let tableColumnWshl: BasicColumn[] = [
-  {
-    title: '序号',
-    width: 60,
-    align: 'center',
-    customRender: ({ index }: { index: number }) => `${index + 1}`
-  },
-  {
-    title: '设备名称',
-    dataIndex: 'gdevicename',
-    key: 'gdevicename',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '安装位置',
-    dataIndex: 'ginstallpos',
-    key: 'ginstallpos',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '残余瓦斯含量(m³/t)',
-    dataIndex: 'residual_gas_content_m3_t',
-    key: 'residual_gas_content_m3_t',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '时间',
-    dataIndex: 'ttime',
-    key: 'ttime',
-    align: 'center',
-    ellipsis: true,
-  },
-]
-//效果评价-瓦斯含量降低速率
-export let tableColumnJdsl: BasicColumn[] = [
-  {
-    title: '序号',
-    width: 60,
-    align: 'center',
-    customRender: ({ index }: { index: number }) => `${index + 1}`
-  },
-  {
-    title: '设备名称',
-    dataIndex: 'gdevicename',
-    key: 'gdevicename',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '安装位置',
-    dataIndex: 'ginstallpos',
-    key: 'ginstallpos',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '瓦斯含量降低速率(m³/t/mon)',
-    dataIndex: 'gas_drop_rate_m3_t_mon',
-    key: 'gas_drop_rate_m3_t_mon',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '时间',
-    dataIndex: 'ttime',
-    key: 'ttime',
-    align: 'center',
-    ellipsis: true,
-  },
-]
-
-//抽采混量
-export let columnCchl: BasicColumn[] = [
-  {
-    title: '序号',
-    width: 60,
-    align: 'center',
-    customRender: ({ index }: { index: number }) => `${index + 1}`
-  },
-  {
-    title: '设备名称',
-    dataIndex: 'gdevicename',
-    key: 'gdevicename',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '安装位置',
-    dataIndex: 'ginstallpos',
-    key: 'ginstallpos',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '混合气体标况瞬量(m³‌/min)',
-    dataIndex: 'mixStdInstant',
-    key: 'mixStdInstant',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '时间',
-    dataIndex: 'ttime',
-    key: 'ttime',
-    align: 'center',
-    ellipsis: true,
-  },
-]
-//抽采浓度
-export let columnNd: BasicColumn[] = [
-  {
-    title: '序号',
-    width: 60,
-    align: 'center',
-    customRender: ({ index }: { index: number }) => `${index + 1}`
-  },
-  {
-    title: '设备名称',
-    dataIndex: 'gdevicename',
-    key: 'gdevicename',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '安装位置',
-    dataIndex: 'ginstallpos',
-    key: 'ginstallpos',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '瓦斯浓度(%)',
-    dataIndex: 'gasConcentration',
-    key: 'gasConcentration',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '时间',
-    dataIndex: 'ttime',
-    key: 'ttime',
-    align: 'center',
-    ellipsis: true,
-  },
-]
-//抽采负压
-export let columnCcfy: BasicColumn[] = [
-  {
-    title: '序号',
-    width: 60,
-    align: 'center',
-    customRender: ({ index }: { index: number }) => `${index + 1}`
-  },
-  {
-    title: '设备名称',
-    dataIndex: 'gdevicename',
-    key: 'gdevicename',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '安装位置',
-    dataIndex: 'ginstallpos',
-    key: 'ginstallpos',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '抽采负压(kPa)',
-    dataIndex: 'negativePressure',
-    key: 'negativePressure',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '时间',
-    dataIndex: 'ttime',
-    key: 'ttime',
-    align: 'center',
-    ellipsis: true,
-  },
-]
-//增压装备运行状态
-export let columnRunstatus: BasicColumn[] = [
-  {
-    title: '序号',
-    width: 60,
-    align: 'center',
-    customRender: ({ index }: { index: number }) => `${index + 1}`
-  },
-  {
-    title: '运行状态',
-    dataIndex: 'label',
-    key: 'label',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '开始运行时间',
-    dataIndex: 'start',
-    key: 'start',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '结束运行时间',
-    dataIndex: 'end',
-    key: 'end',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '持续时间(ms)',
-    dataIndex: 'durationSeconds',
-    key: 'durationSeconds',
-    align: 'center',
-    ellipsis: true,
-  },
-]
-//设备异常提醒历史
-export let columnDeviceWarn: BasicColumn[] = [
-  {
-    title: '序号',
-    width: 60,
-    align: 'center',
-    customRender: ({ index }: { index: number }) => `${index + 1}`
-  },
-  {
-    title: '设备名称',
-    dataIndex: 'devicename',
-    key: 'devicename',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '故障类型报警字段',
-    dataIndex: 'valuename',
-    key: 'valuename',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '报警类型',
-    dataIndex: 'nwartype_dictText',
-    key: 'nwartype_dictText',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '报警描述',
-    dataIndex: 'wardescrip',
-    key: 'wardescrip',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '报警时间',
-    dataIndex: 'createTime',
-    key: 'createTime',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '解决时间',
-    dataIndex: 'oktime',
-    key: 'oktime',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '报警时长',
-    dataIndex: 'warntime',
-    key: 'warntime',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '是否解决',
-    dataIndex: 'isokC',
-    key: 'isokC',
-    align: 'center',
-    ellipsis: true,
-  },
-]
-//环境监测-详情-氧气
-export let columnO2: BasicColumn[] = [
-  {
-    title: '序号',
-    width: 60,
-    align: 'center',
-    customRender: ({ index }: { index: number }) => `${index + 1}`
-  },
-  {
-    title: '设备名称',
-    dataIndex: 'gdevicename',
-    key: 'gdevicename',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '设备类型',
-    dataIndex: 'gdevicetype',
-    key: 'gdevicetype',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '安装位置',
-    dataIndex: 'ginstallpos',
-    key: 'ginstallpos',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '监测值',
-    dataIndex: 'o2Value',
-    key: 'o2Value',
-    align: 'center',
-    ellipsis: true,
-  },
-]
-//环境监测-详情-甲烷
-export let columnCh4: BasicColumn[] = [
-  {
-    title: '序号',
-    width: 60,
-    align: 'center',
-    customRender: ({ index }: { index: number }) => `${index + 1}`
-  },
-  {
-    title: '设备名称',
-    dataIndex: 'gdevicename',
-    key: 'gdevicename',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '设备类型',
-    dataIndex: 'gdevicetype',
-    key: 'gdevicetype',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '安装位置',
-    dataIndex: 'ginstallpos',
-    key: 'ginstallpos',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '监测值',
-    dataIndex: 'ch4val',
-    key: 'ch4val',
-    align: 'center',
-    ellipsis: true,
-  },
-]
-//环境监测-详情-温度
-export let columnTemp: BasicColumn[] = [
-  {
-    title: '序号',
-    width: 60,
-    align: 'center',
-    customRender: ({ index }: { index: number }) => `${index + 1}`
-  },
-  {
-    title: '设备名称',
-    dataIndex: 'gdevicename',
-    key: 'gdevicename',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '设备类型',
-    dataIndex: 'gdevicetype',
-    key: 'gdevicetype',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '安装位置',
-    dataIndex: 'ginstallpos',
-    key: 'ginstallpos',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '监测值',
-    dataIndex: 'temperatureValue',
-    key: 'temperatureValue',
-    align: 'center',
-    ellipsis: true,
-  },
-]
-//环境监测-详情-一氧化碳
-export let columnCO: BasicColumn[] = [
-  {
-    title: '序号',
-    width: 60,
-    align: 'center',
-    customRender: ({ index }: { index: number }) => `${index + 1}`
-  },
-  {
-    title: '设备名称',
-    dataIndex: 'gdevicename',
-    key: 'gdevicename',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '设备类型',
-    dataIndex: 'gdevicetype',
-    key: 'gdevicetype',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '安装位置',
-    dataIndex: 'ginstallpos',
-    key: 'ginstallpos',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '监测值',
-    dataIndex: 'coval',
-    key: 'coval',
-    align: 'center',
-    ellipsis: true,
-  },
-]
-export let tableColumnHj: BasicColumn[] = [
-  {
-    title: '序号',
-    width: 60,
-    align: 'center',
-    customRender: ({ index }: { index: number }) => `${index + 1}`
-  },
-  {
-    title: '时间',
-    dataIndex: 'fileName',
-    key: 'fileName',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '注气区域 (定向钻场)',
-    children: [
-      {
-        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: '抽采区域(回风巷)',
-    children: [
-      {
-        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: '风速(m/s)',
-        dataIndex: 'fileType_dictText',
-        key: 'fileType_dictText',
-        align: 'center',
-        ellipsis: true,
-      },
-    ]
-  },
-  // {
-  // title: '审批操作',
-  // dataIndex: 'actionSp',
-  // width: 200,
-  // align: 'center',
-  // slots: { customRender: 'actionSp' },
-  // },
-
-]
-export let tableColumnCc: BasicColumn[] = [
-  {
-    title: '序号',
-    width: 60,
-    align: 'center',
-    customRender: ({ index }: { index: number }) => `${index + 1}`
-  },
-  {
-    title: '时间',
-    dataIndex: 'fileName',
-    key: 'fileName',
-    align: 'center',
-    ellipsis: true,
-  },
-  {
-    title: '1#汇流单元',
-    children: [
-      {
-        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: '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: '2#汇流单元',
-    children: [
-      {
-        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: '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 optionDetailZq = [
-  { label: '注气总量(m³)', value: 'flowStdAccum' },
-  { label: '标况瞬量(m³/min)', value: 'flowStdInstant' },
-  { label: '工况瞬量(m³/min)', value: 'flowWorkInstant' },
-  { label: '注气压力(Pa)', value: 'injectionPressure' },
-]
-//抽采详情界面配置项数据
-export let optionDetailCc = [
-  { label: '混合气体标况总量', value: 'flowStdAccum' },
-  { label: '混合气体标况瞬量', value: 'flowStdInstant' },
-  { label: '甲烷气体标况总量', value: 'flowWorkInstant' },
-  { label: '甲烷气体标况瞬量', value: 'flowWorkInstant' },
-  { label: '甲烷浓度', value: 'flowWorkInstant' },
-  { label: '抽采负压', value: 'flowWorkInstant' },
-]
-
-//注气详情图表配置项
-export let zqEchartOption = {
-  showTime: false,
-  tooltip: {
-    trigger: 'axis',
-    padding: 8,
-    backgroundColor: 'rgba(0, 0, 0, .6)',
-    textStyle: {
-      color: '#fff',
-      fontSize: 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: '瞬时压力' },
-    ]
-  },
-  yAxis: [
-    {
-      type: 'value',
-      position: 'left', // Y轴1在左边
-      name: '(Nm³/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: '(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: '注气标况瞬量',
-      type: 'line',
-      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
-      showAllSymbol: true,
-      symbolSize: 0,
-      smooth: true,
-      yAxisIndex: 0,
-      lineStyle: {
-        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'
-    },
-  ]
-}
-//抽采详情图表配置项
-export let ccEchartOption = {
-  showTime: false,
-  tooltip: {
-    trigger: 'axis',
-    padding: 8,
-    backgroundColor: 'rgba(0, 0, 0, .6)',
-    textStyle: {
-      color: '#fff',
-      fontSize: 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: '(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: '(%)',
-      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: '抽采混量',
-      type: 'line',
-      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
-      showAllSymbol: true,
-      symbolSize: 0,
-      smooth: true,
-      yAxisIndex: 0,
-      lineStyle: {
-        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'
-    },
-    {
-      name: '抽采纯量',
-      type: 'line',
-      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
-      showAllSymbol: true,
-      symbolSize: 0,
-      smooth: true,
-      yAxisIndex: 0,
-      lineStyle: {
-        normal: {
-          width: 2,
-          color: 'rgba(227, 61, 48,1)', // 线条颜色
-        },
-        borderColor: 'rgba(0,0,0,.4)',
-      },
-      itemStyle: {
-        color: 'rgba(227, 61, 48,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(227, 61, 48,.4)"
-          },
-          {
-            offset: 1,
-            color: "rgba(227, 61, 48, .1)"
-          }
-          ], false),
-          shadowColor: 'rgba(227, 61, 48, 0.5)', //阴影颜色
-          shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
-        }
-      },
-      data: 'yData2'
-    },
-  ]
-}
-//抽采数据显示详情图表配置项
-export let ccHlEchartOption = {
-  showTime: false,
-  tooltip: {
-    trigger: 'axis',
-    padding: 8,
-    backgroundColor: 'rgba(0, 0, 0, .6)',
-    textStyle: {
-      color: '#fff',
-      fontSize: 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: '(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: '(%)',
-      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: '抽采混量',
-      type: 'line',
-      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
-      showAllSymbol: true,
-      symbolSize: 0,
-      smooth: true,
-      yAxisIndex: 0,
-      lineStyle: {
-        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'
-    },
-    {
-      name: '抽采纯量',
-      type: 'line',
-      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
-      showAllSymbol: true,
-      symbolSize: 0,
-      smooth: true,
-      yAxisIndex: 0,
-      lineStyle: {
-        normal: {
-          width: 2,
-          color: 'rgba(228, 64, 50,1)', // 线条颜色
-        },
-        borderColor: 'rgba(0,0,0,.4)',
-      },
-      itemStyle: {
-        color: 'rgba(228, 64, 50,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(228, 64, 50,.4)"
-          },
-          {
-            offset: 1,
-            color: "rgba(228, 64, 50, .1)"
-          }
-          ], false),
-          shadowColor: 'rgba(228, 64, 50, 0.5)', //阴影颜色
-          shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
-        }
-      },
-      data: 'yData2'
-    },
-  ]
-}
-//效果评价-抽采率
-export let ccLEchartOption = {
-  showTime: false,
-  tooltip: {
-    trigger: 'axis',
-    padding: 8,
-    backgroundColor: 'rgba(0, 0, 0, .6)',
-    textStyle: {
-      color: '#fff',
-      fontSize: 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: '抽采率' },
-    ]
-  },
-  yAxis: [
-    {
-      type: 'value',
-      position: 'left', // Y轴1在左边
-      name: '(%)',
-      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: '抽采率',
-      type: 'line',
-      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
-      showAllSymbol: true,
-      symbolSize: 0,
-      smooth: true,
-      lineStyle: {
-        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'
-    },
-  ]
-}
-//效果评价-残余瓦斯含量
-export let wshLEchartOption = {
-  showTime: false,
-  tooltip: {
-    trigger: 'axis',
-    padding: 8,
-    backgroundColor: 'rgba(0, 0, 0, .6)',
-    textStyle: {
-      color: '#fff',
-      fontSize: 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: '残余瓦斯含量' },
-    ]
-  },
-  yAxis: [
-    {
-      type: 'value',
-      position: 'left', // Y轴1在左边
-      name: '(m³/t)',
-      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: '残余瓦斯含量',
-      type: 'line',
-      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
-      showAllSymbol: true,
-      symbolSize: 0,
-      smooth: true,
-      lineStyle: {
-        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'
-    },
-  ]
-}
-//效果评价-瓦斯含量降低速率
-export let jdsLEchartOption = {
-  showTime: false,
-  tooltip: {
-    trigger: 'axis',
-    padding: 8,
-    backgroundColor: 'rgba(0, 0, 0, .6)',
-    textStyle: {
-      color: '#fff',
-      fontSize: 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: '瓦斯含量降低速率' },
-    ]
-  },
-  yAxis: [
-    {
-      type: 'value',
-      position: 'left', // Y轴1在左边
-      name: '(m³/t/mon)',
-      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: '瓦斯含量降低速率',
-      type: 'line',
-      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
-      showAllSymbol: true,
-      symbolSize: 0,
-      smooth: true,
-      lineStyle: {
-        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'
-    },
-  ]
-}
-
-//注气驱替促抽效果评价详情图表配置项
-export let ccxgEchartOption = {
-  showTime: false,
-  tooltip: {
-    trigger: 'axis',
-    padding: 8,
-    backgroundColor: 'rgba(0, 0, 0, .6)',
-    textStyle: {
-      color: '#fff',
-      fontSize: 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: '(%)',
-      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: '(m³/t)',
-      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在右边
-      offset: 80,
-      name: '(m³/t/mon)',
-      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: '抽采率',
-      type: 'line',
-      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
-      showAllSymbol: true,
-      symbolSize: 0,
-      smooth: true,
-      yAxisIndex: 0,
-      lineStyle: {
-        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: 'ext_rate_percent'
-    },
-    {
-      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: 'residual_gas_content_m3_t'
-    },
-    {
-      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: 'gas_drop_rate_m3_t_mon'
-    },
-  ]
-}
-//工况详情图表配置项
-export let gkEchartOption = {
-  showTime: false,
-  tooltip: {
-    trigger: 'axis',
-    padding: 8,
-    backgroundColor: 'rgba(0, 0, 0, .6)',
-    textStyle: {
-      color: '#fff',
-      fontSize: 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,
-      },
-    },
-    {
-      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: '系统电压',
-      type: 'line',
-      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
-      showAllSymbol: true,
-      symbolSize: 0,
-      smooth: true,
-      yAxisIndex: 0,
-      lineStyle: {
-        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'
-    },
-    {
-      name: '风机电流',
-      type: 'line',
-      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
-      showAllSymbol: true,
-      symbolSize: 0,
-      smooth: true,
-      yAxisIndex: 1,
-      lineStyle: {
-        normal: {
-          width: 2,
-          color: 'rgba(230, 64, 50,1)', // 线条颜色
-        },
-        borderColor: 'rgba(0,0,0,.4)',
-      },
-      itemStyle: {
-        color: 'rgba(230, 64, 50,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(230, 64, 50,.4)"
-          },
-          {
-            offset: 1,
-            color: "rgba(230, 64, 50, .1)"
-          }
-          ], false),
-          shadowColor: 'rgba(230, 64, 50, 0.5)', //阴影颜色
-          shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
-        }
-      },
-      data: 'yData2'
-    },
-  ]
-}
-
-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%',
-    left: 'center',
-    icon: 'circle',
-    itemWidth: 8,
-    itemHeight: 8,
-    itemGap: 12,
-    textStyle: {
-      color: '#fff',
-      fontSize: 12,
-    },
-    data: [
-      { name: '系统电压' },
-      { name: '主机电流' },
-      { name: '风冷电流' },
-      { 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: 'xitongVoltage'
-    },
-    {
-      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: 'zhujiCurrent'
-    },
-    {
-      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: 'fenglengCurrent'
-    },
-    {
-      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: 'qianzhouTemp'
-    },
-    {
-      name: '后轴温度',
-      type: 'line',
-      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
-      showAllSymbol: true,
-      symbolSize: 0,
-      smooth: true,
-      yAxisIndex: 2,
-      lineStyle: {
-        normal: {
-          width: 2,
-          color: 'rgba(228, 90, 186,1)', // 线条颜色
-        },
-        borderColor: 'rgba(0,0,0,.4)',
-      },
-      itemStyle: {
-        color: 'rgba(228, 90, 186,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(228, 90, 186,.4)"
-      //    },
-      //    {
-      //      offset: 1,
-      //      color: "rgba(228, 90, 186, .1)"
-      //    }
-      //    ], false),
-      //    shadowColor: 'rgba(228, 90, 186, 0.5)', //阴影颜色
-      //    shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
-      //  }
-      //},
-      data: 'houzhouTemp'
-    },
-    {
-      name: '绕组温度',
-      type: 'line',
-      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
-      showAllSymbol: true,
-      symbolSize: 0,
-      smooth: true,
-      yAxisIndex: 2,
-      lineStyle: {
-        normal: {
-          width: 2,
-          color: 'rgba(6, 199, 99,1)', // 线条颜色
-        },
-        borderColor: 'rgba(0,0,0,.4)',
-      },
-      itemStyle: {
-        color: 'rgba(6, 199, 99,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(6, 199, 99,.4)"
-      //    },
-      //    {
-      //      offset: 1,
-      //      color: "rgba(6, 199, 99, .1)"
-      //    }
-      //    ], false),
-      //    shadowColor: 'rgba(6, 199, 99, 0.5)', //阴影颜色
-      //    shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
-      //  }
-      //},
-      data: 'raozuTemp'
-    },
-    {
-      name: '排气温度',
-      type: 'line',
-      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
-      showAllSymbol: true,
-      symbolSize: 0,
-      smooth: true,
-      yAxisIndex: 2,
-      lineStyle: {
-        normal: {
-          width: 2,
-          color: 'rgba(252, 195, 31,1)', // 线条颜色
-        },
-        borderColor: 'rgba(0,0,0,.4)',
-      },
-      itemStyle: {
-        color: 'rgba(252, 195, 31,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(252, 195, 31,.4)"
-      //     },
-      //     {
-      //       offset: 1,
-      //       color: "rgba(252, 195, 31, .1)"
-      //     }
-      //     ], false),
-      //     shadowColor: 'rgba(252, 195, 31, 0.5)', //阴影颜色
-      //     shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
-      //   }
-      // },
-      data: 'paiqiTemp'
-    },
-    {
-      name: '喷油温度',
-      type: 'line',
-      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
-      showAllSymbol: true,
-      symbolSize: 0,
-      smooth: true,
-      yAxisIndex: 2,
-      lineStyle: {
-        normal: {
-          width: 2,
-          color: 'rgba(218, 170, 183,1)', // 线条颜色
-        },
-        borderColor: 'rgba(0,0,0,.4)',
-      },
-      itemStyle: {
-        color: 'rgba(218, 170, 183,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(218, 170, 183,.4)"
-      //    },
-      //    {
-      //      offset: 1,
-      //      color: "rgba(218, 170, 183, .1)"
-      //    }
-      //    ], false),
-      //    shadowColor: 'rgba(218, 170, 183, 0.5)', //阴影颜色
-      //    shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
-      //  }
-      //},
-      data: 'penyouTemp'
-    },
-    {
-      name: '油气桶温度',
-      type: 'line',
-      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
-      showAllSymbol: true,
-      symbolSize: 0,
-      smooth: true,
-      yAxisIndex: 2,
-      lineStyle: {
-        normal: {
-          width: 2,
-          color: 'rgba(242, 117, 148,1)', // 线条颜色
-        },
-        borderColor: 'rgba(0,0,0,.4)',
-      },
-      itemStyle: {
-        color: 'rgba(242, 117, 148,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(242, 117, 148,.4)"
-      //     },
-      //     {
-      //       offset: 1,
-      //       color: "rgba(242, 117, 148, .1)"
-      //     }
-      //     ], false),
-      //     shadowColor: 'rgba(242, 117, 148, 0.5)', //阴影颜色
-      //     shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
-      //   }
-      // },
-      data: 'youqitongTemp'
-    },
-  ]
-}

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

@@ -1,98 +0,0 @@
-<template>
-  <Transition>
-    <div v-if="visible" class="module-content">
-      <div v-if="title" class="module-content__title__expand">
-        <div>
-          <span class="action-btn close-btn" @click="closeModel"></span>
-          <span @click="clickHandler">{{ title }}</span>
-        </div>
-        <span v-if="visibleDetail" class="detail-text" @click="handleClickDetail">详情</span>
-      </div>
-      <div class="module-slot">
-        <slot></slot>
-      </div>
-    </div>
-  </Transition>
-</template>
-<script lang="ts" setup>
-  defineProps<{ title: string; visible: boolean; visibleDetail: boolean }>();
-  const emit = defineEmits(['close', 'click', 'handleClickDetail']);
-
-  function closeModel() {
-    emit('close');
-  }
-  function clickHandler() {
-    emit('click');
-  }
-  //详情点击
-  function handleClickDetail() {
-    emit('handleClickDetail');
-  }
-</script>
-<style lang="less" scoped>
-  @import '/@/design/theme.less';
-
-  @{theme-deepblue} {
-    .module-content {
-      --image-model_original_title_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/11-1.png');
-      --image-model_original_border_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/11-2.png');
-    }
-  }
-
-  .module-content {
-    --image-model_original_title_bg: url('@/assets/images/gasInjection/11-1.png');
-    --image-model_original_border_bg: url('@/assets/images/gasInjection/11-2.png');
-    --bg-height: 40px;
-    color: #fff;
-    box-sizing: border-box;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-  }
-
-  .module-content__title__expand {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    height: var(--bg-height);
-    background: var(--image-model_original_title_bg) no-repeat;
-    background-size: 100% 100%;
-    position: relative;
-    padding-left: 55px;
-    padding-right: 24px;
-    // padding-top: 3px;
-    margin-bottom: 5px;
-    // font-family: 'douyuFont';
-    font-size: 18px;
-    font-weight: 700;
-    line-height: var(--bg-height);
-  }
-  .module-slot {
-    height: calc(100% - 33px);
-    width: calc(100% - 15px);
-    background: var(--image-model_original_border_bg) no-repeat;
-    background-size: 100% 100%;
-    // backdrop-filter: blur(5px);
-    // background-color: var(--vent-configurable-original-module-bg);
-    // margin-left: 5px;
-  }
-  .detail-text {
-    color: #2cb6ff;
-    cursor: pointer;
-    font-family: 'douyuFont';
-    font-size: 13px;
-  }
-
-  // Transition动画相关
-  .v-enter-active,
-  .v-leave-active {
-    transition: all 0.3s ease;
-  }
-
-  .v-enter-from,
-  .v-leave-to {
-    opacity: 0;
-    transform: translateY(-33px);
-  }
-</style>

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

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

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

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

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

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

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

@@ -1,59 +0,0 @@
-<template>
-  <div class="tab-detail-table">
-    <a-tabs v-model:activeKey="activeKey" @change="tabChange">
-      <a-tab-pane key="1" tab="增压装备运行状态历史数据">
-        <commonTable :tableColumn="columnRunstatus" :tableD="tableDatas"></commonTable>
-      </a-tab-pane>
-      <a-tab-pane key="2" tab="抽采系统运行状态历史数据">
-        <commonTable :tableColumn="columnRunstatus" :tableD="tableDatas"></commonTable>
-      </a-tab-pane>
-    </a-tabs>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref, watch } from 'vue'
-import commonTable from './commonTable.vue'
-import { columnRunstatus } from './gasInject.data'
-
-let props = defineProps({
-  tableData: {
-    type: Object as any
-  }
-})
-
-let activeKey = ref('1')
-let readData = reactive({}) as any
-let tableDatas = ref<any[]>([])
-
-
-//tab选项切换
-function tabChange(val) {
-  activeKey.value = val
-  switch (val) {
-    case '1':
-      tableDatas.value = readData.devices[0].segments || []
-      break;
-    case '2':
-      tableDatas.value = readData.devices[1].segments || []
-      break;
-  }
-}
-
-watch(() => props.tableData, (newV, oldV) => {
-  if (newV) {
-    readData = Object.assign({}, newV)
-    tableDatas.value = activeKey.value == '1' ?  readData.devices[0].segments : readData.devices[1].segments
-  }
-}, { immediate: true })
-
-</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

@@ -1,189 +0,0 @@
-<template>
-  <div class="warn-detail-table">
-    <div class="nav-box">
-      <div class="nav-search">
-        <div class="search-item">
-          <span>是否解决:</span>
-          <a-select ref="select" v-model:value="isOk" style="width: 240px">
-            <a-select-option v-for="(item, index) in isOkList" :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" @click="getSearch">查询</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>
-
-    <a-tabs v-model:activeKey="activeKey" @change="tabChange">
-      <a-tab-pane key="1" tab="设备预警历史">
-        <commonTable :tableColumn="columnDeviceWarn" :tableD="tableData"></commonTable>
-      </a-tab-pane>
-      <!-- <a-tab-pane key="2" tab="环境监测异常历史数据">
-        <zqHistoryExport :isShowIcon="true" :tableColumn="columnRunstatus"></zqHistoryExport>
-      </a-tab-pane>
-      <a-tab-pane key="3" tab="信号传输异常历史数据">
-        <zqHistoryExport :isShowIcon="true" :tableColumn="columnRunstatus"></zqHistoryExport>
-      </a-tab-pane> -->
-    </a-tabs>
-  </div>
-</template>
-
-<script setup lang='ts'>
-import { onMounted, reactive, ref } from 'vue'
-import commonTable from './commonTable.vue'
-import { columnDeviceWarn } from './gasInject.data'
-import { getAlarmLogList, exportXls } from './gasInject.api'
-import { SvgIcon } from '/@/components/Icon';
-import { message } from 'ant-design-vue';
-
-let props = defineProps({
-
-})
-
-let activeKey = ref('1')
-let tableData = ref<any[]>([])
-let isOk = ref(false)
-let isOkList = ref([
-  { label: '已解决', value: true },
-  { label: '未解决', value: false },
-])
-
-
-//tab选项切换
-function tabChange(val) {
-  activeKey.value = val
-  switch (val) {
-    case '1':
-      break;
-    case '2':
-      break;
-  }
-}
-
-//获取列表数据
-async function getData() {
-  let res = await getAlarmLogList({ deviceKind: null, isOk: isOk.value, pageNo: 1, pageSize: 1000 })
-  console.log(res, '预警历史')
-  tableData.value = res.records.map(el=>{
-    return {
-      ...el,
-      isokC:el.isok ? '是' : '否' 
-    }
-  }) || []
-}
-//查询
-function getSearch() {
-  getData()
-}
-//导出
-async function handleHisExport() {
-  let res = await exportXls({ isOk: isOk.value, order: 'desc' })
-  let filename = `预警历史-${new Date().getFullYear()}.${new Date().getMonth() +1}.${new Date().getDate()}.xlsx`;
-  downFilePublic(res, filename);
-  message.success('导出成功')
-}
-// 下载公用方法
-function downFilePublic(content, fileName) {
-  const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
-  // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
-  // IE10以上支持blob但是依然不支持download
-  if ('download' in document.createElement('a')) {
-    // 支持a标签download的浏览器
-    const link = document.createElement('a'); // 创建a标签
-    link.download = fileName; // a标签添加属性
-    link.style.display = 'none';
-    link.href = URL.createObjectURL(blob);
-    document.body.appendChild(link);
-    link.click(); // 执行下载
-    URL.revokeObjectURL(link.href); // 释放url
-    document.body.removeChild(link); // 释放标签
-  } else {
-    // 其他浏览器
-    navigator.msSaveBlob(blob, fileName);
-  }
-}
-
-onMounted(() => {
-  getData()
-})
-</script>
-
-<style lang="less" scoped>
-@import '/@/design/theme.less';
-
-@{theme-deepblue} {
-  .warn-detail-table {
-    --image-inject_zq_monitor: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/9-3.png');
-  }
-}
-
-.warn-detail-table {
-  --image-inject_zq_monitor: url('@/assets/images/gasInjection/9-3.png');
-  position: relative;
-  width: 100%;
-  height: 100%;
-  padding: 20px;
-  box-sizing: border-box;
-
-  .nav-box {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    height: 39px;
-    padding: 0px 20px;
-    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;
-  }
-}
-:deep(.zxm-select) {
-  color: #fff !important;
-}
-
-:deep(.zxm-select-selector) {
-  background: #0b223f !important;
-  border: 1px solid #1081d7 !important;
-  border-radius: 4px;
-  margin-left: 10px;
-}
-</style>

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

@@ -1,329 +0,0 @@
-<template>
-  <div class="history-export">
-    <SvgIcon v-if="!isShowIcon" class="icon-style-back" size="32" name="modal-back" @click="handleBack" />
-    <div class="nav-box">
-      <div class="nav-search">
-        <!-- 时间查询选项 -->
-        <!-- <a-radio-group v-model:value="timerTabs" name="radioGroup" @change="changeRadio">
-          <a-radio value="8">按小时</a-radio>
-          <a-radio value="6">按分钟</a-radio>
-        </a-radio-group> -->
-        <div class="search-item">
-          <span>时间:</span>
-          <a-range-picker style="width:340px" :value="[searchData.startTime, searchData.endTime]"
-            :show-time="{ format: 'HH:mm:ss' }" valueFormat="YYYY-MM-DD HH:mm:ss" :placeholder="['开始时间', '结束时间']"
-            @change="onRangeChange" />
-          <a-button type="primary" preIcon="ant-design:search-outlined" @click="getSearch"
-            style="margin-left: 10px;">查询</a-button>
-        </div>
-      </div>
-      <div v-if="isShowExports" class="nav-btn" @click="handleHisExport">
-        <div class="nav-text">
-          <SvgIcon class="icon-style" size="18" name="gas-export" />
-          <span>数据导出</span>
-        </div>
-      </div>
-    </div>
-    <div class="main-content">
-      <a-table size="small" :dataSource="dataSource" :columns="tableColumn" maxWidth="1310"
-        :scroll="{ x: 'max-content', y: 465 }" :pagination="pagination" @change="changePage">
-        <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, onMounted } from 'vue'
-import { SvgIcon } from '/@/components/Icon';
-import { listdays, getList, historydata, historydataZq } from './gasInject.api'
-import dayjs from 'dayjs';
-import { message } from 'ant-design-vue';
-
-let props = defineProps({
-  //是否显示返回按钮
-  isShowIcon: {
-    type: Boolean
-  },
-  tableColumn: {
-    type: Array
-  },
-  //设备ID
-  deviceId: {
-    type: String
-  },
-  //详情页数据类型
-  detailType: {
-    type: String
-  },
-  //设备类型
-  strtype: {
-    type: String
-  },
-  //是否显示导出按钮
-  isShowExports: {
-    type: Boolean,
-    default: true
-  },
-  //详情图表系统类型
-  sysType: {
-    type: String
-  },
-})
-
-let timerTabs = ref('5')
-let searchData = reactive({
-  startTime: dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
-  endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
-})
-let dataSource = ref<any[]>([])
-//分页参数配置
-let pagination = reactive({
-  current: 1, // 当前页码
-  pageSize: 15, // 每页显示条数
-  total: 0, // 总条目数，后端返回
-  // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
-  showSizeChanger: true, // 是否可改变每页显示条数
-  pageSizeOptions: ['15', '30', '50'], // 可选的每页显示条数
-});
-
-let $emit = defineEmits(['handleBack'])
-//返回上一级
-function handleBack() {
-  $emit('handleBack')
-}
-// //时间间隔切换
-// function changeRadio(val) {
-//   timerTabs.value = val.target.value
-// }
-//日期切换
-function onRangeChange(__, time) {
-  searchData.startTime = time[0];
-  searchData.endTime = time[1];
-}
-
-//注气详情table数据
-async function getHistoryTableData(skip) {
-  if (props.detailType == 'history') {
-    let res = await listdays({ pageNo: pagination.current, pageSize: pagination.pageSize, gdeviceids: props.deviceId, strtype: props.strtype, ttime_begin: searchData.startTime, ttime_end: searchData.endTime, skip: skip })
-    console.log(res, 'tableData---')
-    let data = res.datalist.records.map(el => {
-      return {
-        ...el,
-        ...el.readData
-      }
-    })
-    dataSource.value = data
-    pagination.total = res.datalist.total
-  } else {
-    let res = await getList({ pageNo: pagination.current, pageSize: pagination.pageSize, createTime_begin: searchData.startTime, createTime_end: searchData.endTime, devicetype: props.strtype })
-    console.log(res, '装备运行状态与控制')
-    dataSource.value = res.records || []
-    pagination.total = res.total
-  }
-}
-//查询
-function getSearch() {
-  pagination.current = 1
-  getHistoryTableData(timerTabs.value)
-  // switch (timerTabs.value) {
-  //   case 'day':
-  //     getHistoryTableData(timerTabs.value)
-  //     break;
-  //   case 'hours':
-  //     getHistoryTableData(timerTabs.value)
-  //     break;
-  //   case 'minutes':
-  //     getHistoryTableData(timerTabs.value)
-  //     break;
-  // }
-}
-//切换分页
-function changePage(val) {
-  pagination.current = val.current;
-  pagination.pageSize = val.pageSize;
-  getHistoryTableData(timerTabs.value)
-}
-//导出历史数据
-async function handleHisExport() {
-  let res = await historydataZq({ ttime_begin: searchData.startTime, ttime_end: searchData.endTime, skip: '8', gdeviceids: props.deviceId, pageNo: pagination.current, pageSize: pagination.pageSize, strtype: props.strtype })
-  console.log(res, '导出---')
-  let fileName = props.strtype == 'injection_standard' ? '注气数据' : props.strtype == 'pump' ? '抽采数据' : ''
-  let filename = `${fileName}-${new Date().getFullYear()}.${new Date().getMonth() + 1}.${new Date().getDate()}.xlsx`;
-  downFilePublic(res, filename);
-  message.success('导出成功')
-}
-// 下载公用方法
-function downFilePublic(content, fileName) {
-  const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
-  // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
-  // IE10以上支持blob但是依然不支持download
-  if ('download' in document.createElement('a')) {
-    // 支持a标签download的浏览器
-    const link = document.createElement('a'); // 创建a标签
-    link.download = fileName; // a标签添加属性
-    link.style.display = 'none';
-    link.href = URL.createObjectURL(blob);
-    document.body.appendChild(link);
-    link.click(); // 执行下载
-    URL.revokeObjectURL(link.href); // 释放url
-    document.body.removeChild(link); // 释放标签
-  } else {
-    // 其他浏览器
-    navigator.msSaveBlob(blob, fileName);
-  }
-}
-
-
-onMounted(() => {
-  getHistoryTableData(timerTabs.value)
-})
-</script>
-
-<style lang="less" scoped>
-@import '/@/design/theme.less';
-
-@{theme-deepblue} {
-  .history-export {
-    --image-inject_zq_monitor: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/9-3.png');
-  }
-}
-
-.history-export {
-  --image-inject_zq_monitor: url('@/assets/images/gasInjection/9-3.png');
-  position: relative;
-  width: 100%;
-  min-height: 550px;
-
-  .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;
-  }
-
-  .search-btn-item {
-    display: flex;
-    width: 100px;
-    height: 78%;
-    padding: 2px;
-    cursor: pointer;
-    justify-content: center;
-    align-items: center;
-    background-color: #1081d7;
-    border-radius: 4px;
-  }
-
-  .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-cell-fix-left) {
-  background-color: var(--vent-table-thead) !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/zqMonitorDetail.vue

@@ -1,246 +0,0 @@
-<template>
-  <div class="zq-monitor">
-    <zqHistoryExport :tableColumn="tableColumn" :detailType="'operation'" :isShowIcon="isShowExport" :deviceId="deviceID"  :strtype="strtype">
-    </zqHistoryExport>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { reactive, ref, watch } from 'vue';
-  // import { SvgIcon } from '/@/components/Icon';
-  // import zqDetailCard from './zqDetailCard.vue';
-  import zqHistoryExport from './zqHistoryExport.vue';
-
-let props = defineProps({
-  //是否打开历史数据页面
-  isShowExport: {
-    type: Boolean
-  },
-  //table列
-  tableColumn: {
-    type: Array
-  },
-  //详情界面配置项
-  optionDetail: {
-    type: Array
-  },
-  //设备ID
-  deviceID: {
-    type: String
-  },
-  //设备类型
-  strtype:{
-    type:String
-  }
-})
-
-</script>
-
-<style lang="less" scoped>
-  @import '/@/design/theme.less';
-
-  @{theme-deepblue} {
-    .gas-inject-card {
-      --image-inject_zq_monitor: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/9-3.png');
-      --image-inject_zq_monitor1: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/9-6.png');
-    }
-  }
-
-  .zq-monitor {
-    --image-inject_zq_monitor: url('@/assets/images/gasInjection/9-3.png');
-    --image-inject_zq_monitor1: url('@/assets/images/gasInjection/9-6.png');
-    width: 100%;
-    min-height: 550px;
-    padding: 15px 25px;
-    box-sizing: border-box;
-
-    .nav-box {
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      width: 100%;
-      height: 39px;
-      padding: 0px 20px;
-      background: var(--image-inject_zq_monitor) 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;
-    }
-
-    .main-content {
-      display: flex;
-      justify-content: space-between;
-      width: 100%;
-      height: calc(100% - 39px);
-      padding: 30px 0px 20px 0px;
-    }
-
-    .common-area {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      width: 320px;
-      height: 100%;
-    }
-
-    .area-item {
-      width: 100%;
-      height: calc(50% - 15px);
-    }
-
-    .center-area {
-      position: relative;
-      width: calc(100% - 640px);
-      height: 100%;
-    }
-
-    .center-content {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      width: 500px;
-      height: 315px;
-      border-radius: 20px;
-      box-shadow: inset 0px 0px 20px rgba(34, 142, 220, 0.8);
-    }
-
-    .line-L {
-      display: flex;
-      position: absolute;
-      left: 0;
-      top: 24px;
-      width: 90px;
-      height: 282px;
-    }
-
-    .line-R {
-      display: flex;
-      position: absolute;
-      right: 0;
-      top: 24px;
-      width: 90px;
-      height: 282px;
-    }
-
-    .line-L-1 {
-      width: 50%;
-      height: 100%;
-      border-top: 2px solid #277297;
-      border-right: 2px solid #277297;
-      border-bottom: 2px solid #277297;
-    }
-
-    .line-R-1 {
-      position: absolute;
-      left: 50%;
-      top: 0;
-      width: 50%;
-      height: 100%;
-      border-top: 2px solid #277297;
-      border-left: 2px solid #277297;
-      border-bottom: 2px solid #277297;
-    }
-
-    .t-icon {
-      position: absolute;
-      left: 0;
-      top: -8px;
-      width: 30px;
-      height: 18px;
-      background: var(--image-inject_zq_monitor1) no-repeat;
-      background-size: 100% 100%;
-    }
-
-    .t-icon-r {
-      position: absolute;
-      right: 0;
-      top: -10px;
-      width: 30px;
-      height: 18px;
-      background: var(--image-inject_zq_monitor1) no-repeat;
-      background-size: 100% 100%;
-      transform: rotate(180deg);
-    }
-
-    .t-icon1 {
-      position: absolute;
-      left: 0;
-      bottom: -8px;
-      width: 30px;
-      height: 18px;
-      background: var(--image-inject_zq_monitor1) no-repeat;
-      background-size: 100% 100%;
-    }
-
-    .t-icon-r1 {
-      position: absolute;
-      right: 0;
-      bottom: -10px;
-      width: 30px;
-      height: 18px;
-      background: var(--image-inject_zq_monitor1) no-repeat;
-      background-size: 100% 100%;
-      transform: rotate(180deg);
-    }
-
-    .line-L-2 {
-      position: absolute;
-      width: 50%;
-      height: 2px;
-      left: 50%;
-      top: 190px;
-      background-color: #277297;
-    }
-
-    .line-R-2 {
-      position: absolute;
-      width: 50%;
-      height: 2px;
-      left: 0;
-      top: 190px;
-      background-color: #277297;
-    }
-
-    .t-icon2 {
-      position: absolute;
-      right: 5px;
-      top: 182px;
-      width: 30px;
-      height: 18px;
-      background: var(--image-inject_zq_monitor1) no-repeat;
-      background-size: 100% 100%;
-    }
-
-    .t-icon2-r {
-      position: absolute;
-      left: 5px;
-      top: 182px;
-      width: 30px;
-      height: 18px;
-      background: var(--image-inject_zq_monitor1) no-repeat;
-      background-size: 100% 100%;
-      transform: rotate(180deg);
-    }
-  }
-</style>

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

@@ -0,0 +1,76 @@
+<template>
+  <div class="nav-menu">
+    <div  :class="activeIndex == index ? 'menu-item-active' : 'menu-item'" v-for="(item, index) in menuList" :key="index"
+      @click="handlerClick(item, index)">{{ item.label }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+//当前激活menu选项索引
+let activeIndex = ref(0)
+let menuList = ref<any[]>([
+  { label: '一张图', value: 'yzt' },
+  { label: '监测预警', value: 'jcyj' },
+  { label: '设备管理', value: 'sbgl' },
+  { label: '联动配置', value: 'ldpz' },
+  { label: '系统管理', value: 'xtgl' },
+  { label: '大屏展示', value: 'dpzs' },
+])
+let $emit=defineEmits(['changeMenu'])
+
+//menu选项切换
+function handlerClick(item, index) {
+  activeIndex.value = index
+  $emit('changeMenu',item.value)
+}
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .nav-menu {}
+}
+
+.nav-menu {
+  --image-modal-nav: url('@/assets/images/home-container/configurable/hsq/2-1.png');
+  --image-modal-nav1: url('@/assets/images/home-container/configurable/hsq/2-2.png');
+  --image-modal-nav2: url('@/assets/images/home-container/configurable/hsq/2-3.png');
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: var(--image-modal-nav) no-repeat;
+  background-size: 100% 100%;
+  padding: 6px 15px 0px 15px;
+  box-sizing: border-box;
+
+  .menu-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 104px;
+    height: 34px;
+    background: var(--image-modal-nav1) no-repeat;
+    background-size: 100% 100%;
+    cursor: pointer;
+     user-select: none; /* 禁止选择文本 */
+  }
+
+  .menu-item-active {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 104px;
+    height: 34px;
+    background: var(--image-modal-nav2) no-repeat;
+    background-size: 100% 100%;
+    cursor: pointer;
+     user-select: none; /* 禁止选择文本 */
+  }
+}
+</style>

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

@@ -0,0 +1,82 @@
+<template>
+  <div class="BtnListNew">
+    <div class="basic-btn" v-for="(item, index) in option" :key="index">
+      <div class="btn-label">{{ item.label }}</div>
+      <div class="btn-value">
+        <div class="text-value">{{ data[item.value] }}</div>
+        <div class="text-value unit-value">{{ item.unit }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+let props = defineProps({
+  option: {
+    type: Array as any
+  },
+  data: {
+    type: Object,
+    default: () => {
+      return {
+        tempHj: '',
+        fsfx: '',
+        temp: '',
+        coval: '',
+        co2val: '',
+        o2val: '',
+        ch4val: '',
+        fcnd: '',
+        ywzs: '',
+        tempDb: '',
+
+      }
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {}
+
+.BtnListNew {
+  --image-btn-bg: url('@/assets/images/home-container/configurable/hsq/1-9.png');
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  overflow-y: auto;
+
+  .basic-btn {
+    width: calc(50% - 10px);
+    height: 60px;
+    background: var(--image-btn-bg) no-repeat bottom;
+    background-size: 100% auto;
+    margin: 5px;
+  }
+
+  .btn-label {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .btn-value {
+    display: flex;
+    justify-content: center;
+    padding: 2px 0px;
+  }
+
+  .text-value {
+    font-family: 'douyuFont';
+    color: #3df6ff;
+  }
+}
+</style>

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

@@ -0,0 +1,202 @@
+<template>
+  <div class="custom-gallery-new">
+    <div :class="`gallery-new-box-${type}`">
+      <div :class="`gallery-content-${type}`" v-for="(item, index) in option" :key="index">
+        <SvgIcon v-if="type == 'B'" :class="index % 2 == 0 ? 'icon-style' : 'icon-style1'" size="20"
+          :name="item.iconName" />
+        <div :class="index % 2 == 0 ? 'gallery-content-text' : 'gallery-content-text-r'">{{ item.label }}</div>
+        <div :class="index % 2 == 0 ? 'gallery-content-value' : 'gallery-content-value-r'">{{ galleryData ?
+          galleryData[item.value] : 0}}</div>
+      </div>
+      <div :class="`gallery-content-${type}`">
+        <SvgIcon  class="icon-style2" size="30" :name="type=='B' ? 'zsj' : 'device-status'" />
+        <!-- <div v-else class="gallery-content-text1">{{ galleryData?.totalNum || 0 }}</div> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { SvgIcon } from '/@/components/Icon';
+
+let props = defineProps({
+  type: {
+    type: String
+  },
+  option: {
+    type: Array as any
+  },
+  galleryData: {
+    type: Object
+  }
+})
+
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {}
+
+.custom-gallery-new {
+  --image-gallery-bg: url('@/assets/images/home-container/configurable/dusthome/gallery-bg.png');
+  --image-gallery-bg-b: url('@/assets/images/home-container/configurable/dusthome/gallery-bg-b.png');
+  position: relative;
+  padding: 10px 15px;
+
+  .gallery-new-box-A {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background: var(--image-gallery-bg) no-repeat;
+    background-size: 100% 100%;
+
+  }
+
+  .gallery-new-box-B {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background: var(--image-gallery-bg-b) no-repeat;
+    background-size: 100% 100%;
+
+  }
+
+  .gallery-content-A {
+    position: absolute;
+
+    &:nth-child(1) {
+      left: 22px;
+      top: 1px;
+    }
+
+    &:nth-child(2) {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      right: 24px;
+      top: 1px;
+    }
+
+    &:nth-child(3) {
+      left: 22px;
+      top: 61px;
+    }
+
+    &:nth-child(4) {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      right: 24px;
+      top: 61px;
+    }
+
+    &:nth-child(5) {
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .gallery-content-text {
+      margin-bottom: 2px;
+    }
+
+    .gallery-content-text-r {
+      margin-bottom: 2px;
+    }
+
+    .gallery-content-text1 {
+      font-size: 24px;
+      font-family: 'douyuFont';
+    }
+
+    .gallery-content-value,
+    .gallery-content-value-r {
+      font-family: 'douyuFont';
+      color: #fff;
+    }
+
+  }
+
+  .gallery-content-B {
+    position: absolute;
+    width: 160px;
+    height: 80px;
+
+    &:nth-child(1) {
+      left: 0px;
+      top: 0px;
+    }
+
+    &:nth-child(2) {
+      right: 0px;
+      top: 0px;
+    }
+
+    &:nth-child(3) {
+      left: 0px;
+      top: 99px;
+    }
+
+    &:nth-child(4) {
+      right: 0px;
+      top: 98px;
+    }
+
+    &:nth-child(5) {
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .icon-style {
+      position: absolute;
+      left: 15px;
+      top: 8px;
+    }
+
+    .icon-style1 {
+      position: absolute;
+      right: 15px;
+      top: 8px;
+    }
+
+    .icon-style2 {
+      position: absolute;
+      left: 65px;
+      top: 25px;
+    }
+
+    .gallery-content-text {
+      position: absolute;
+      left: 42px;
+      top: 6px;
+    }
+
+    .gallery-content-text-r {
+      position: absolute;
+      right: 42px;
+      top: 6px;
+    }
+
+    .gallery-content-value {
+      position: absolute;
+      left: 42px;
+      top: 50px;
+      font-family: 'douyuFont';
+      color: #b9f3ff;
+    }
+
+    .gallery-content-value-r {
+      position: absolute;
+      right: 42px;
+      top: 50px;
+      font-family: 'douyuFont';
+      color: #b9f3ff;
+    }
+  }
+
+
+}
+</style>

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

@@ -0,0 +1,78 @@
+<template>
+  <div class="ImageCardNew">
+    <div class="card-item" v-for="(item, index) in option" :key="index">
+      <div class="item-value">{{ cardData[item.value] }}</div>
+      <div class="item-label">{{ item.label }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+let props=defineProps({
+  option:{
+    type:Array as any
+  },
+  cardData:{
+    type:Object as any,
+    default:()=>{
+      return {
+          dayWarn:12,
+      warnOk:2,
+      warnUnOk:10
+      }
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {}
+
+.ImageCardNew {
+  --image-card-bg: url('@/assets/images/home-container/configurable/hsq/1-7.png');
+  --image-card-bg1: url('@/assets/images/home-container/configurable/hsq/1-8.png');
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  width: calc(100% - 20px);
+  height: 100%;
+  background: var(--image-card-bg) no-repeat bottom;
+  background-size: 100% auto;
+  margin: 0px 10px;
+
+  .card-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 89px;
+    height: 49px;
+    background: var(--image-card-bg1) no-repeat;
+    background-size: 100% 100%;
+
+    &:nth-child(1) {
+      .item-value {
+        font-family: 'douyuFont';
+        color: #ff3d3d;
+      }
+    }
+     &:nth-child(2) {
+      .item-value {
+        font-family: 'douyuFont';
+        color: #ff983d;
+      }
+    }
+     &:nth-child(3) {
+      .item-value {
+        font-family: 'douyuFont';
+        color: #3dff69;
+      }
+    }
+  }
+
+}
+</style>

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

@@ -0,0 +1,142 @@
+<template>
+  <div class="long-list">
+    <div class="list-title">
+      <span>设备列表</span>
+      <span style="margin-left: 5px;">{{ count }}</span>
+    </div>
+    <div class="list-content">
+      <div class="list-search">
+        <a-input v-model:value="searchData" placeholder="搜索设备编号，名称" size="small" />
+      </div>
+      <div class="content-container">
+        <div class="content-nav">
+          <div :class="activeIndex == index ? 'nav-item-active' : 'nav-item'" v-for="(item, index) in navList"
+            :key="index" @click="changeNav(item, index)">{{ item.label }}</div>
+        </div>
+        <div class="content-box">
+          <basicDevice v-for="(item,index) in 10" :key="index"></basicDevice>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import basicDevice from '../basicDevice.vue'
+
+//设备列表数量
+let count = ref(0)
+//搜索条件
+let searchData = ref('')
+//当前激活nav选项
+let activeIndex = ref(0)
+let navList = ref<any[]>([
+  { label: '全部', value: '0' },
+  { label: 'xxx', value: '1' },
+  { label: 'xxx', value: '2' },
+  { label: 'xxx', value: '3' },
+  { label: 'xxx', value: '4' },
+  { label: 'xxx', value: '5' },
+])
+
+//nav选项切换
+function changeNav(item, index) {
+  activeIndex.value = index
+}
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .long-list {}
+}
+
+.long-list {
+  --image-box-bg: url('@/assets/images/home-container/configurable/hsq/2-5.png');
+  --image-box-bg1: url('@/assets/images/home-container/configurable/hsq/2-6.png');
+  --image-box-bg2: url('@/assets/images/home-container/configurable/hsq/2-2.png');
+
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 15px;
+  box-sizing: border-box;
+
+  .list-title {
+    width: 177px;
+    height: 30px;
+    line-height: 22px;
+    padding-left: 16px;
+    color: #01fefc;
+    font-weight: bolder;
+    background: var(--image-box-bg) no-repeat;
+    background-size: 100% 100%;
+    margin-bottom: 5px;
+  }
+
+  .list-content {
+    width: 100%;
+    height: calc(100% - 35px);
+  }
+
+  .list-search {
+    margin-bottom: 5px;
+  }
+
+  .content-container {
+    width: 100%;
+    height: calc(100% - 47px);
+  }
+
+  .content-nav {
+    display: flex;
+    align-items: center;
+    height: 32px;
+    margin: 0px 5px 10px 5px;
+    background-color: #15517b;
+  }
+
+  .nav-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 120px;
+    height: 100%;
+    cursor: pointer;
+  }
+
+  .nav-item-active {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 120px;
+    height: 100%;
+    cursor: pointer;
+    background-color: #1d73a8;
+    border-bottom: 2px solid #36c7ff;
+  }
+  .content-box{
+    height: calc(100% - 42px);
+    overflow-y: auto;
+  }
+
+  .zxm-input {
+    height: 42px;
+    color: #fff;
+    background-color: transparent;
+    border: none;
+    background: var(--image-box-bg1) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .zxm-input-sm {
+    padding: 0px 20px;
+  }
+  ::-webkit-scrollbar{
+    display: none;
+  }
+}
+</style>

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

@@ -0,0 +1,443 @@
+<template>
+  <div class="long-list1">
+    <div class="list-title">
+      <div class="title-l">
+        <span>设备详情-</span>
+        <span style="margin-left: 5px;">{{ deviceModel }}</span>
+      </div>
+      <div class="title-r">
+        <span class="icon-pie"></span>
+        <span>报警中</span>
+      </div>
+    </div>
+    <div class="basic-box">
+      <basicBorder title="基本信息">
+        <div class="basic-card">
+          <div class="card-t">
+            <div class="card-item">
+              <div class="label-text">设备编号</div>
+              <div class="value-text">{{ cardData.deviceCode }}</div>
+            </div>
+            <div class="card-item">
+              <div class="label-text">设备名称</div>
+              <div class="value-text">{{ cardData.deviceName }}</div>
+            </div>
+            <div class="card-item">
+              <div class="label-text">设备类型</div>
+              <div class="value-text">{{ cardData.deviceType }}</div>
+            </div>
+            <div class="card-item">
+              <div class="label-text">安装位置</div>
+              <div class="value-text">{{ cardData.address }}</div>
+            </div>
+          </div>
+          <div class="card-b">
+            <div class="card-item">
+              <div class="label-text">安装时间</div>
+              <div class="value-text">{{ cardData.time }}</div>
+            </div>
+            <div class="card-item">
+              <div class="label-text">生产厂家</div>
+              <div class="value-text">{{ cardData.company }}</div>
+            </div>
+            <div class="card-item">
+              <div class="label-text">Ip地址</div>
+              <div class="value-text">{{ cardData.ip }}</div>
+            </div>
+            <div class="card-item">
+              <div class="label-text">固件版本</div>
+              <div class="value-text">{{ cardData.version }}</div>
+            </div>
+          </div>
+        </div>
+      </basicBorder>
+    </div>
+    <div class="basic-box">
+      <basicBorder title="实时状态">
+        <div class="basic-card">
+          <div class="card-status-t">
+            <div class="card-item">
+              <SvgIcon class="icon-style" size="20" name="yxzt" />
+              <div class="label-status-text">运行状态</div>
+              <div :class="statusData.runstatus == '报警' ? 'value-status-warn' : 'value-status-text'">{{
+                statusData.runstatus }}</div>
+            </div>
+            <div class="card-item">
+              <SvgIcon class="icon-style" size="20" name="wlyc" />
+              <div class="label-status-text">网络延迟</div>
+              <div class="value-status-text">
+                <span>{{ statusData.internet }}</span>
+                <span>ms</span>
+              </div>
+            </div>
+            <div class="card-item">
+              <SvgIcon class="icon-style" size="20" name="spml" />
+              <div class="label-status-text">视频码率</div>
+              <div class="value-status-text">
+                <sapn>{{ statusData.videocode }}</sapn>
+                <sapn>Mbps</sapn>
+              </div>
+            </div>
+
+          </div>
+          <div class="card-status-b">
+            <div class="card-item">
+              <SvgIcon class="icon-style" size="20" name="sswd" />
+              <div class="label-status-text">实时温度</div>
+              <div class="value-status-text">
+                <span> {{ statusData.temp }}</span>
+                <span> ℃</span>
+
+              </div>
+            </div>
+            <div class="card-item">
+              <SvgIcon class="icon-style" size="20" name="zl" />
+              <div class="label-status-text">帧率</div>
+              <div class="value-status-text">{{ statusData.framerate }}</div>
+            </div>
+            <div class="card-item">
+              <SvgIcon class="icon-style" size="20" name="csb" />
+              <div class="label-status-text">传输比</div>
+              <div class="value-status-text">{{ statusData.ratio }}</div>
+            </div>
+          </div>
+        </div>
+      </basicBorder>
+    </div>
+    <div class="basic-box1">
+      <basicBorder title="历史报警记录">
+        <div class="basic-history">
+          <div class="history-title">
+            <div class="title-item" v-for="(item, index) in titleList" :key="index">{{ item.label }}</div>
+          </div>
+          <div class="history-content">
+            <div class="content-item" v-for="(item, index) in tableData" :key="index">
+              <div class="item-text">{{ item.time }}</div>
+              <div class="item-text item-text1">
+                <span>{{ item.temp }}</span>
+                <span>℃</span>
+              </div>
+              <div class="item-text">
+                <span> {{ item.durTime }}</span>
+                <span>min</span>
+              </div>
+              <div class="item-text item-text1">{{ item.grade }}</div>
+              <div class="item-text item-text2">{{ item.status }}</div>
+              <div class="item-text">{{ item.person }}</div>
+              <div class="item-text">
+                <span class="text-look">查看</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </basicBorder>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import basicBorder from '../BasicBorder.vue'
+import { SvgIcon } from '/@/components/Icon';
+
+let deviceModel = ref('CAM-001')
+let cardData = reactive({
+  deviceCode: 'CAM-001',
+  deviceName: '双光谱摄像机',
+  deviceType: '双光谱热成像',
+  address: '采掘场A区',
+  time: '2024-06-15',
+  company: 'xxx',
+  ip: '192.168.10.13',
+  version: 'v2.4.1',
+})
+let statusData = reactive({
+  runstatus: '报警',
+  internet: '12',
+  videocode: '3',
+  temp: '65.5',
+  framerate: 'xxx',
+  ratio: 'xxxx',
+})
+let titleList = ref<any[]>([
+  { label: '时间', value: '1' },
+  { label: '最高温度', value: '2' },
+  { label: '持续时间', value: '3' },
+  { label: '报警级别', value: '4' },
+  { label: '处理状态', value: '5' },
+  { label: '处理人', value: '6' },
+  { label: '操作', value: '7' },
+])
+let tableData = ref<any[]>([
+  { time: '14:31:22', temp: 65.3, durTime: 15, grade: '一级', status: '未处理', person: '张三', },
+  { time: '14:31:22', temp: 65.3, durTime: 15, grade: '一级', status: '未处理', person: '张三', },
+  { time: '14:31:22', temp: 65.3, durTime: 15, grade: '一级', status: '未处理', person: '张三', },
+  { time: '14:31:22', temp: 65.3, durTime: 15, grade: '一级', status: '未处理', person: '张三', },
+  { time: '14:31:22', temp: 65.3, durTime: 15, grade: '一级', status: '未处理', person: '张三', },
+  { time: '14:31:22', temp: 65.3, durTime: 15, grade: '一级', status: '未处理', person: '张三', },
+  { time: '14:31:22', temp: 65.3, durTime: 15, grade: '一级', status: '未处理', person: '张三', },
+  { time: '14:31:22', temp: 65.3, durTime: 15, grade: '一级', status: '未处理', person: '张三', },
+  { time: '14:31:22', temp: 65.3, durTime: 15, grade: '一级', status: '未处理', person: '张三', },
+  { time: '14:31:22', temp: 65.3, durTime: 15, grade: '一级', status: '未处理', person: '张三', },
+])
+
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .long-list1 {}
+}
+
+.long-list1 {
+  --image-box-bg: url('@/assets/images/home-container/configurable/hsq/2-11.png');
+  --image-box-bg1: url('@/assets/images/home-container/configurable/hsq/2-13.png');
+  --image-box-bg2: url('@/assets/images/home-container/configurable/hsq/2-14.png');
+  --image-box-bg3: url('@/assets/images/home-container/configurable/hsq/2-15.png');
+  --image-box-bg4: url('@/assets/images/home-container/configurable/hsq/2-16.png');
+  --image-box-bg5: url('@/assets/images/home-container/configurable/hsq/2-17.png');
+  --image-box-bg6: url('@/assets/images/home-container/configurable/hsq/2-24.png');
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 15px 30px;
+  box-sizing: border-box;
+
+  .list-title {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    height: 30px;
+    line-height: 22px;
+    margin-bottom: 10px;
+  }
+
+  .title-l {
+    width: 177px;
+    height: 100%;
+    color: #fc002a;
+    font-weight: bolder;
+    padding-left: 16px;
+    background: var(--image-box-bg) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .title-r {
+    padding-right: 16px;
+  }
+
+  .icon-pie {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: #fc002a;
+    margin-right: 5px;
+  }
+
+  .basic-box {
+    height: 180px;
+    margin-bottom: 10px;
+  }
+
+  .basic-box1 {
+    height: calc(100% - 420px);
+  }
+
+
+  .basic-card {
+    height: 100%;
+  }
+
+  .card-t {
+    height: 50%;
+    display: flex;
+
+    .card-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 25%;
+      height: 100%;
+      padding: 0px 40px;
+
+      &:nth-child(odd) {
+        background: var(--image-box-bg1) no-repeat center;
+      }
+
+      &:nth-child(even) {
+        background: var(--image-box-bg2) no-repeat center;
+      }
+    }
+  }
+
+  .card-status-t {
+    height: 50%;
+    display: flex;
+
+    .card-item {
+      position: relative;
+      width: 33.3%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+
+      &:nth-child(1) {
+        background: var(--image-box-bg3) no-repeat center;
+      }
+
+      &:nth-child(2) {
+        background: var(--image-box-bg5) no-repeat center;
+        margin: 0px 20px;
+      }
+
+      &:nth-child(3) {
+        background: var(--image-box-bg4) no-repeat center;
+      }
+    }
+  }
+
+  .card-b {
+    height: 50%;
+    display: flex;
+
+    .card-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 25%;
+      height: 100%;
+      padding: 0px 40px;
+
+      &:nth-child(even) {
+        background: var(--image-box-bg1) no-repeat center;
+      }
+
+      &:nth-child(odd) {
+        background: var(--image-box-bg2) no-repeat center;
+      }
+    }
+  }
+
+  .card-status-b {
+    height: 50%;
+    display: flex;
+
+    .card-item {
+      position: relative;
+      width: 33.3%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+
+      &:nth-child(1) {
+        background: var(--image-box-bg5) no-repeat center;
+      }
+
+      &:nth-child(2) {
+        background: var(--image-box-bg4) no-repeat center;
+        margin: 0px 20px;
+      }
+
+      &:nth-child(3) {
+        background: var(--image-box-bg3) no-repeat center;
+      }
+    }
+  }
+
+  .label-text {
+    color: #c3f5ff;
+  }
+
+  .icon-style {
+    position: absolute;
+    left: 38px;
+  }
+
+  .label-status-text {
+    position: absolute;
+    left: 78px;
+  }
+
+  .value-status-text {
+    font-size: 12px;
+    font-family: 'douyuFont';
+    position: absolute;
+    right: 36px;
+  }
+
+  .value-status-warn {
+    font-size: 12px;
+    font-family: 'douyuFont';
+    position: absolute;
+    right: 36px;
+    color: #fc002a;
+    font-weight: bold;
+  }
+
+  .basic-history {
+    height: 100%;
+  }
+
+  .history-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 34px;
+    background: var(--image-box-bg6) no-repeat;
+    background-size: 100% 100%;
+    margin-bottom: 6px;
+  }
+
+  .title-item {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+    color: #01fefc;
+  }
+
+  .history-content {
+    height: calc(100% - 40px);
+    overflow-y: auto;
+  }
+
+  .content-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 36px;
+
+    &:nth-child(odd) {
+      background-color: #0e3455;
+    }
+
+    &:nth-child(even) {
+      background-color: #114268;
+    }
+  }
+
+  .item-text {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+  }
+  .item-text1{
+    color: #fc002a;
+  }
+   .item-text2{
+    color: orange;
+  }
+  .text-look{
+    padding: 0px 5px;
+    border-radius: 2px;
+    background-color: #2484bc;
+    cursor: pointer;
+  }
+   ::-webkit-scrollbar{
+    display: none;
+  }
+}
+</style>

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

@@ -0,0 +1,315 @@
+<template>
+  <div class="long-list2">
+    <div class="list-title">
+      <span>设备配置</span>
+    </div>
+    <div class="list-content">
+      <div class="content-nav">
+        <div :class="activeIndex == index ? 'nav-item-active' : 'nav-item'" v-for="(item, index) in navList"
+          :key="index" @click="changeNav(item, index)">{{ item.label }}</div>
+      </div>
+      <div class="basic-box">
+        <basicBorder title="【温度报警阈值】">
+          <div class="temp-warn">
+            <div class="warn-item">
+              <div class="item-label">一级报警温度 : </div>
+              <a-input class="item-input" v-model:value="formData.tempOne" placeholder="请输入" size="small" />
+            </div>
+            <div class="warn-item">
+              <div class="item-label">二级报警温度 : </div>
+              <a-input class="item-input" v-model:value="formData.tempTwo" placeholder="请输入" size="small" />
+            </div>
+            <div class="warn-item">
+              <div class="item-label">三级报警温度 : </div>
+              <a-input class="item-input" v-model:value="formData.tempThree" placeholder="请输入" size="small" />
+            </div>
+            <div class="warn-item">
+              <div class="item-label">温升速率阈值 : </div>
+              <a-input class="item-input" v-model:value="formData.tempMax" placeholder="请输入" size="small" />
+            </div>
+            <div class="warn-item">
+              <div class="item-label">持续时间 : </div>
+              <a-input class="item-input" v-model:value="formData.time" placeholder="请输入" size="small" />
+            </div>
+          </div>
+        </basicBorder>
+      </div>
+      <div class="basic-box1">
+        <basicBorder title="【图像参数配置】">
+          <div class="temp-warn">
+            <div class="warn-item">
+              <div class="item-basic">
+                <div class="item-label">亮度 : </div>
+                <a-input class="item-input" v-model:value="formData.tempOne" placeholder="请输入" size="small" />
+              </div>
+              <div class="item-basic">
+                <div class="item-label">对比度 : </div>
+                <a-input class="item-input" v-model:value="formData.tempOne" placeholder="请输入" size="small" />
+              </div>
+            </div>
+            <div class="warn-item">
+              <div class="item-basic">
+                <div class="item-label">饱和度 : </div>
+                <a-input class="item-input" v-model:value="formData.tempOne" placeholder="请输入" size="small" />
+              </div>
+              <div class="item-basic">
+                <div class="item-label">锐度 : </div>
+                <a-input class="item-input" v-model:value="formData.tempOne" placeholder="请输入" size="small" />
+              </div>
+            </div>
+            <div class="warn-item">
+              <div class="item-basic">
+                <div class="item-label">色温 : </div>
+                <a-input class="item-input" v-model:value="formData.tempOne" placeholder="请输入" size="small" />
+              </div>
+              <div class="item-basic">
+                <div class="item-label">增益 : </div>
+                <a-input class="item-input" v-model:value="formData.tempOne" placeholder="请输入" size="small" />
+              </div>
+            </div>
+            <div class="warn-item">
+              <div class="item-basic">
+                <div class="item-label">曝光 : </div>
+                <a-input class="item-input" v-model:value="formData.tempOne" placeholder="请输入" size="small" />
+              </div>
+              <div class="item-basic">
+                <div class="item-label">白平衡 : </div>
+                <a-input class="item-input" v-model:value="formData.tempOne" placeholder="请输入" size="small" />
+              </div>
+            </div>
+          </div>
+        </basicBorder>
+      </div>
+      <div class="basic-box1">
+        <basicBorder title="【联动配置】">
+          <div class="temp-warn">
+            <div class="warn-item">
+              <div class="item-basic">
+                <div class="item-label1">声光报警器联动 : </div>
+                <a-switch v-model:checked="formData.checked" />
+              </div>
+              <div class="item-basic">
+                <div class="item-label1">短信通知联动 : </div>
+                <a-switch v-model:checked="formData.checked" />
+              </div>
+            </div>
+            <div class="warn-item">
+              <div class="item-basic">
+                <div class="item-label1">视频录制联动 : </div>
+                <a-switch v-model:checked="formData.checked" />
+              </div>
+              <div class="item-basic">
+                <div class="item-label1">消防系统联动 : </div>
+                <a-switch v-model:checked="formData.checked" />
+              </div>
+            </div>
+            <div class="warn-item">
+              <div class="item-basic">
+                <div class="item-label1">应急广播联动 : </div>
+                <a-switch v-model:checked="formData.checked" />
+              </div>
+              <div class="item-basic">
+                <div class="item-label1">大屏显示联动 : </div>
+                <a-switch v-model:checked="formData.checked" />
+              </div>
+            </div>
+            <div class="warn-item">
+              <div class="item-basic">
+                <div class="item-label1">GIS定位联动 : </div>
+                <a-switch v-model:checked="formData.checked" />
+              </div>
+              <div class="item-basic">
+                <div class="item-label1">数据记录联动 : </div>
+                <a-switch v-model:checked="formData.checked" />
+              </div>
+            </div>
+          </div>
+        </basicBorder>
+      </div>
+      <div class="btn-box">
+        <div class="baisc-btn">恢复默认</div>
+        <div class="baisc-btn">
+          <div class="btn-item">保存设置</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import basicBorder from '../BasicBorder.vue'
+
+//当前激活nav选项
+let activeIndex = ref(0)
+let navList = ref<any[]>([
+  { label: '报警阈值', value: '0' },
+  { label: 'xxx', value: '1' },
+  { label: 'xxx', value: '2' },
+  { label: 'xxx', value: '3' },
+  { label: 'xxx', value: '4' },
+  { label: 'xxx', value: '5' },
+])
+let formData = reactive({
+  tempOne: '',
+  tempTwo: '',
+  tempThree: '',
+  tempMax: '',
+  time: '',
+  checked: true
+})
+
+//nav选项切换
+function changeNav(item, index) {
+  activeIndex.value = index
+}
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .long-list2 {}
+}
+
+.long-list2 {
+  --image-box-bg: url('@/assets/images/home-container/configurable/hsq/2-5.png');
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 15px;
+  box-sizing: border-box;
+
+  .list-title {
+    width: 177px;
+    height: 30px;
+    line-height: 22px;
+    padding-left: 16px;
+    color: #01fefc;
+    font-weight: bolder;
+    background: var(--image-box-bg) no-repeat;
+    background-size: 100% 100%;
+    margin-bottom: 5px;
+  }
+
+  .list-content {
+    width: 100%;
+    height: calc(100% - 35px);
+  }
+
+  .content-nav {
+    display: flex;
+    align-items: center;
+    height: 32px;
+    margin: 0px 5px 10px 5px;
+    background-color: #15517b;
+  }
+
+  .nav-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 120px;
+    height: 100%;
+    cursor: pointer;
+  }
+
+  .nav-item-active {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 120px;
+    height: 100%;
+    cursor: pointer;
+    background-color: #1d73a8;
+    border-bottom: 2px solid #36c7ff;
+  }
+
+  .basic-box {
+    height: 260px;
+    margin-bottom: 10px;
+  }
+
+  .basic-box1 {
+    height: 210px;
+    margin-bottom: 10px;
+  }
+
+  .temp-warn {
+    height: 100%;
+  }
+
+  .warn-item {
+    display: flex;
+    align-items: center;
+    height: 32px;
+    background: linear-gradient(to right, #134c77, transparent);
+    margin-bottom: 10px;
+    padding: 0px 10px;
+    box-sizing: border-box;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .item-label {
+    width: 130px;
+    text-align: right;
+    margin-right: 5px;
+  }
+
+  .item-label1 {
+    width: 105px;
+    text-align: right;
+    margin-right: 5px;
+  }
+
+  .item-basic {
+    display: flex;
+    flex: 1;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .zxm-input {
+    background-color: transparent;
+    border: 1px solid #2792c2;
+    color: #fff;
+  }
+
+  .btn-box {
+    width: 190px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: absolute;
+    right: 16px;
+    bottom: 18px;
+  }
+
+  .baisc-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 85px;
+    height: 30px;
+    border: 1px solid #01fefc;
+    border-radius: 4px;
+    padding: 3px;
+    cursor: pointer;
+  }
+
+  .btn-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(32, 166, 169);
+  }
+   ::-webkit-scrollbar{
+    display: none;
+  }
+}
+</style>

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

@@ -0,0 +1,174 @@
+<template>
+  <div class="mixed-warn">
+    <div class="list-title">
+      <span>设备详情-</span>
+      <span style="margin-left: 5px;">{{ deviceModel }}</span>
+    </div>
+    <div class="list-t">
+      <div class="basic-box">
+        <div class="box-btn">
+          <div class="baisc-btn">
+            <div class="btn-item">确认报警</div>
+          </div>
+          <div class="baisc-btn">
+            <div class="btn-item">视频回放</div>
+          </div>
+          <div class="baisc-btn">
+            <div class="btn-item">联动处置</div>
+          </div>
+          <div class="baisc-btn">
+            <div class="btn-item">上报值班</div>
+          </div>
+        </div>
+        <div class="echart-box"></div>
+      </div>
+      <div class="basic-box">
+        <basicBorder title="报警详情">
+          <div class="warn-detail">
+            <div class="warn-item">
+              <div class="item-label">报警级别 : </div>
+              <div class="item-val"> {{ warnDetail.grade }}</div>
+            </div>
+            <div class="warn-item">
+              <div class="item-label">报警时间 : </div>
+              <div class="item-val"> {{ warnDetail.time }}</div>
+            </div>
+            <div class="warn-item">
+              <div class="item-label">报警位置 : </div>
+              <div class="item-val"> {{ warnDetail.address }}</div>
+            </div>
+            <div class="warn-item">
+              <div class="item-label">监测设备 : </div>
+              <div class="item-val"> {{ warnDetail.device }}</div>
+            </div>
+            <div class="warn-item">
+              <div class="item-label">最高温度 : </div>
+              <div class="item-val"> {{ warnDetail.maxtemp }}</div>
+            </div>
+            <div class="warn-item">
+              <div class="item-label">平均速度 : </div>
+              <div class="item-val"> {{ warnDetail.speed }}</div>
+            </div>
+          </div>
+        </basicBorder>
+      </div>
+    </div>
+    <div class="list-c"></div>
+    <div class="list-b"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import basicBorder from '../BasicBorder.vue'
+
+let deviceModel = ref('CAM-001')
+let warnDetail = reactive({
+  grade: '一级报警（严重）',
+  time: '2024-12-20 14:31:22',
+  address: '采掘场A区,东经87.6，北纬43.8',
+  device: '双光谱相机',
+  maxtemp: '65.3',
+  speed: '48.7'
+
+})
+
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .mixed-warn {}
+}
+
+.mixed-warn {
+  --image-box-bg: url('@/assets/images/home-container/configurable/hsq/2-11.png');
+  --image-box-bg1: url('@/assets/images/home-container/configurable/hsq/3-4.png');
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 15px 30px;
+  box-sizing: border-box;
+
+  .list-title {
+    width: 177px;
+    height: 30px;
+    line-height: 22px;
+    margin-bottom: 10px;
+    color: #fc002a;
+    font-weight: bolder;
+    background: var(--image-box-bg) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .list-t {
+    display: flex;
+    justify-content: space-between;
+    height: 260px;
+    margin-bottom: 10px;
+  }
+
+  .basic-box {
+    width: calc(50% - 5px);
+    height: 100%;
+
+    &:nth-child(1) {
+      margin-right: 10px;
+    }
+  }
+
+  .box-btn {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+    height: 34px;
+    background: var(--image-box-bg1) no-repeat;
+    background-size: 100% 100%;
+    margin-bottom: 10px;
+  }
+
+  .baisc-btn {
+    width: 85px;
+    height: 28px;
+    border: 1px solid #01fefc;
+    border-radius: 2px;
+    padding: 3px;
+    cursor: pointer;
+  }
+
+  .btn-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(32, 166, 169);
+  }
+
+  .echart-box {
+    height: calc(100% - 44px);
+    background-color: #114268;
+  }
+
+  .warn-detail {
+    height: 100%;
+  }
+
+  .warn-item {
+    display: flex;
+    align-items: center;
+    height: 32px;
+    background: linear-gradient(to right, #134c77, transparent);
+    margin-bottom: 10px;
+    padding: 0px 10px;
+    box-sizing: border-box;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+}
+</style>

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

@@ -0,0 +1,164 @@
+<template>
+  <div class="OperateNew">
+    <div class="basic-box basic-boxT">
+      <div class="nav-box" v-for="(item, index) in option" :key="index">
+        <SvgIcon class="box-icon-style" size="20" :name="item.iconName" />
+        <div class="box-label">{{ item.label }}</div>
+        <div class="box-value">{{ data[item.value] }}</div>
+      </div>
+    </div>
+    <div class="basic-box basic-boxB">
+      <div class="card-box" v-for="(item, index) in btnOption" :key="index">
+        <div class="card-box-text">{{ item.firstLabel }}</div>
+        <div class="card-box-text">{{ item.secondLabel }}</div>
+        <div class="card-box-text">{{ item.thirdLabel }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { SvgIcon } from '/@/components/Icon';
+
+let props = defineProps({
+  option: {
+    type: Array as any
+  },
+  btnOption: {
+    type: Array as any
+  },
+  data: {
+    type: Object,
+    default: () => {
+      return {
+        time: '',
+        sjsx: '',
+        wlyc: ''
+      }
+    }
+  }
+})
+
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {}
+
+.OperateNew {
+  --image-card-bg: url('@/assets/images/home-container/configurable/hsq/1-10.png');
+  --image-card-bg1: url('@/assets/images/home-container/configurable/hsq/1-11.png');
+  --image-card-bg2: url('@/assets/images/home-container/configurable/hsq/1-15.png');
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  padding: 15px 15px 0px 15px;
+  box-sizing: border-box;
+
+  .basic-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .basic-boxT {
+    height: calc(100% - 50px);
+  }
+
+  .basic-boxB {
+    height: 50px;
+  }
+
+  .nav-box {
+    position: relative;
+    width: 327px;
+    height: 35px;
+    display: flex;
+    align-items: center;
+
+    &:nth-child(1) {
+      background: var(--image-card-bg) no-repeat;
+      background-size: 100% 100%;
+
+      .box-label {
+        position: absolute;
+        left: 50px;
+      }
+
+      .box-value {
+        position: absolute;
+        right: 15px;
+        font-size: 12px;
+        font-family: 'douyuFont';
+        color: #89deff;
+      }
+    }
+
+    &:nth-child(2) {
+      background: var(--image-card-bg1) no-repeat;
+      background-size: 100% 100%;
+
+      .box-label {
+        position: absolute;
+        left: 76px;
+      }
+
+      .box-value {
+        position: absolute;
+        right: 15px;
+        font-size: 12px;
+        font-family: 'douyuFont';
+        color: #2bfad9;
+      }
+    }
+
+    &:nth-child(3) {
+      background: var(--image-card-bg) no-repeat;
+      background-size: 100% 100%;
+
+      .box-label {
+        position: absolute;
+        left: 76px;
+      }
+
+      .box-value {
+        position: absolute;
+        right: 15px;
+        font-size: 12px;
+        font-family: 'douyuFont';
+        color: #89deff;
+      }
+    }
+  }
+
+  .box-icon-style {
+    position: absolute;
+    left: 11px;
+  }
+
+  .card-box {
+    position: relative;
+    width: 327px;
+    height: 50px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .card-box-text {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 126px;
+      height: 50px;
+      background: var(--image-card-bg2) no-repeat;
+      background-size: 100% 100%;
+      cursor: pointer;
+    }
+  }
+
+}
+</style>

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

@@ -0,0 +1,182 @@
+<template>
+  <div class="search-table">
+    <div class="search-area">
+      <a-input v-model:value="searchWarn" placeholder="搜索报警" size="small" />
+      <div class="search-btn">
+        <div class="btn-item">筛选</div>
+      </div>
+    </div>
+    <div class="content-area">
+      <div class="content-title">
+        <div class="title-item" v-for="(item, index) in titleList" :key="index">{{ item.label }}</div>
+      </div>
+      <div class="history-content">
+        <div class="content-item" v-for="(item, index) in tableData" :key="index">
+          <div class="item-text">{{ item.time }}</div>
+          <div class="item-text">{{ item.address }}
+          </div>
+          <div class="item-text item-text1">{{ item.grade }}</div>
+          <div class="item-text item-text2">{{ item.status }}</div>
+          <div class="item-text">
+            <span class="text-look">确认</span>
+            <span class="text-look">详情</span>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+let searchWarn = ref('')
+let titleList = ref<any[]>([
+  { label: '时间', value: '1' },
+  { label: '位置', value: '2' },
+  { label: '级别', value: '3' },
+  { label: '状态', value: '4' },
+  { label: '操作', value: '5' },
+])
+let tableData = ref<any[]>([
+  { time: '14:31:22', address: '采掘场A区', grade: '一级', status: '未处理', },
+  { time: '14:31:22', address: '采掘场A区', grade: '一级', status: '未处理', },
+  { time: '14:31:22', address: '采掘场A区', grade: '一级', status: '未处理', },
+  { time: '14:31:22', address: '采掘场A区', grade: '一级', status: '未处理', },
+  { time: '14:31:22', address: '采掘场A区', grade: '一级', status: '未处理', },
+  { time: '14:31:22', address: '采掘场A区', grade: '一级', status: '未处理', },
+  { time: '14:31:22', address: '采掘场A区', grade: '一级', status: '未处理', },
+  { time: '14:31:22', address: '采掘场A区', grade: '一级', status: '未处理', },
+  { time: '14:31:22', address: '采掘场A区', grade: '一级', status: '未处理', },
+  { time: '14:31:22', address: '采掘场A区', grade: '一级', status: '未处理', },
+  { time: '14:31:22', address: '采掘场A区', grade: '一级', status: '未处理', },
+  { time: '14:31:22', address: '采掘场A区', grade: '一级', status: '未处理', },
+  { time: '14:31:22', address: '采掘场A区', grade: '一级', status: '未处理', },
+  { time: '14:31:22', address: '采掘场A区', grade: '一级', status: '未处理', },
+  { time: '14:31:22', address: '采掘场A区', grade: '一级', status: '未处理', },
+])
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .search-table {}
+}
+
+.search-table {
+  --image-box-bg1: url('@/assets/images/home-container/configurable/hsq/2-6.png');
+  --image-box-bg2: url('@/assets/images/home-container/configurable/hsq/2-24.png');
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 15px;
+  box-sizing: border-box;
+}
+
+.search-area {
+  height: 42px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 5px;
+}
+
+.search-btn {
+  width: 85px;
+  height: 30px;
+  border: 1px solid #01fefc;
+  border-radius: 4px;
+  padding: 3px;
+  cursor: pointer;
+}
+
+.btn-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(32, 166, 169);
+}
+
+
+.content-area {
+  height: calc(100% - 47px);
+}
+
+.content-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 34px;
+  background: var(--image-box-bg2) no-repeat;
+  background-size: 100% 100%;
+  margin-bottom: 6px;
+}
+
+.title-item {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  color: #01fefc;
+}
+
+.history-content {
+  height: calc(100% - 40px);
+  overflow-y: auto;
+}
+
+.content-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 36px;
+
+  &:nth-child(odd) {
+    background-color: #0e3455;
+  }
+
+  &:nth-child(even) {
+    background-color: #114268;
+  }
+}
+
+.item-text {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+}
+
+.item-text1 {
+  color: #fc002a;
+}
+
+.item-text2 {
+  color: orange;
+}
+
+.text-look {
+  padding: 0px 3px;
+  margin: 0px 2px;
+  border-radius: 2px;
+  background-color: #2484bc;
+  cursor: pointer;
+}
+
+.zxm-input {
+  height: 42px;
+  color: #fff;
+  background-color: transparent;
+  border: none;
+  background: var(--image-box-bg1) no-repeat;
+  background-size: 100% 100%;
+}
+
+.zxm-input-sm {
+  padding: 0px 20px;
+}
+</style>

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

@@ -1,126 +0,0 @@
-<template>
-  <div class="gas-chl-chart">
-    <div class="echart-box" v-for="(item, index) in echartOption" :key="index">
-      <div class="box-title">
-        <span>{{ item.title }}</span>
-        <span class="box-btn-detail" @click="handlerDetail(index)">详情</span>
-      </div>
-      <div class="box-content">
-        <echartLine :echartOption="item.option" :ecahrtData="echartData" />
-      </div>
-      <div class="box-foot"></div>
-    </div>
-    <!-- 详情 -->
-    <a-modal v-model:visible="visibleDetail" width="1350px" :footer="null" :title="modalTitle" centered destroyOnClose
-      @cancel="handleCancel">
-      <div style="padding: 20px;">
-        <zqHistoryExport :tableColumn="tableColumn" detailType="history" :isShowIcon="true" :strtype="strtype">
-      </zqHistoryExport>
-      </div>
-    </a-modal>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import echartLine from '../preset/echartLine.vue'
-import { columnCchl, columnNd, columnCcfy } from '../gasInject/gasInject.data'
-import zqHistoryExport from '../gasInject/zqHistoryExport.vue'
-
-let props = defineProps({
-  echartOption: {
-    type: Array as any
-  },
-  echartData: {
-    type: Array as any
-  }
-})
-
-let visibleDetail = ref(false)
-let modalTitle = ref('')
-let tableColumn = ref<any>(null)
-let strtype = ref('pump')
-
-//点击查看详情
-function handlerDetail(index) {
-  visibleDetail.value = true
-  switch (index) {
-    case 0:
-      modalTitle.value = '抽采混量'
-      tableColumn.value = columnCchl
-      break;
-    case 1:
-      modalTitle.value = '抽采浓度'
-      tableColumn.value = columnNd
-      break;
-    case 2:
-      modalTitle.value = '抽采负压'
-      tableColumn.value = columnCcfy
-      break;
-  }
-}
-//关闭弹窗
-function handleCancel() {
-
-}
-
-</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 {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      width: 100%;
-      height: 28px;
-      padding: 0px 15px;
-      background: var(--image-gas_board_bg1) no-repeat;
-      background-size: 100% 100%;
-    }
-
-    .box-btn-detail {
-      color: #2cb6ff;
-    }
-
-    .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

@@ -53,7 +53,6 @@
 import { reactive, ref, watch } from 'vue'
 import { SvgIcon } from '/@/components/Icon';
 import { ExclamationCircleFilled } from '@ant-design/icons-vue';
-import { devicecontrol } from '../gasInject/gasInject.api'
 import { useMessage } from '/@/hooks/web/useMessage';
 
 let props = defineProps({

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

@@ -23,33 +23,7 @@ enum Api {
   summary = '/safety/ventanalyAlarmStatistic/summary',
 }
 
-//注气驱替相关数据定义
-let count = ref(0)
-//抽采参数
-let ccEchart = reactive({
-  xData: [],
-  yData: [],
-  yData1: []
-}) as any
-//绘流管抽采数据
-let hlgEchart = reactive({
-  xData: [],
-  yDataHl: [],
-  yDataHl1: [],
-  yDataHl2: [],
-  yDataHl3: [],
-  yDataHl4: [],
-  yDataNd: [],
-  yDataNd1: [],
-  yDataNd2: [],
-  yDataNd3: [],
-  yDataNd4: [],
-  yDataFy: [],
-  yDataFy1: [],
-  yDataFy2: [],
-  yDataFy3: [],
-  yDataFy4: [],
-}) as any
+
 // 搞这个缓存是由于：目前代码上的设计是多个模块发出多次请求，每个模块自己负责消费前者的响应。
 // 这会导致相同的请求被同时发送多次。
 const cache = new Map<string, Promise<any>>();
@@ -665,24 +639,24 @@ export const getElectroData = (params) => {
 
 
 //获取注气历史数据
-export const sysZq = (params) => defHttp.get({ url: Api.listdays, params });
+//export const sysZq = (params) => defHttp.get({ url: Api.listdays, params });
 //获取注气历史数据
-async function getZqSystem(param) {
-  const result = await sysZq(param);
-  return result
-}
+//async function getZqSystem(param) {
+//  const result = await sysZq(param);
+//  return result
+//}
 //获取系统运行状态数据
-export const todayDeviceRunStatus = (params) => defHttp.post({ url: Api.todayDeviceRunStatus, params });
-async function getTodayDeviceRunStatus(param) {
-  const result = await todayDeviceRunStatus(param);
-  return result
-}
+//export const todayDeviceRunStatus = (params) => defHttp.post({ url: Api.todayDeviceRunStatus, params });
+//async function getTodayDeviceRunStatus(param) {
+//  const result = await todayDeviceRunStatus(param);
+//  return result
+//}
 //获取异常提醒数据
-export const summary = (params) => defHttp.get({ url: Api.summary, params });
-async function getSummary(param) {
-  const result = await summary(param);
-  return result
-}
+//export const summary = (params) => defHttp.get({ url: Api.summary, params });
+//async function getSummary(param) {
+//  const result = await summary(param);
+//  return result
+//}
 //获取注气驱替数据
 export const getSystemApi = (params) => {
   const key = `${Api.getSystem}?${JSON.stringify(params)}`;
@@ -695,163 +669,78 @@ export const getSystemApi = (params) => {
     );
   }
   return (cache.get(key) as Promise<any>).then(async (res) => {
-
-    //注气数据
-    let zqData = res.msgTxt.find(v => v.type == 'injection_standard').datalist[0]
-    res.co = res.msgTxt.find(v => v.type == 'modelsensor_co').datalist[0]
-    res.ch4 = res.msgTxt.find(v => v.type == 'modelsensor_ch4').datalist[0]
-    res.o2 = res.msgTxt.find(v => v.type == 'modelsensor_o2').datalist[0]
-    res.temp = res.msgTxt.find(v => v.type == 'modelsensor_temperature').datalist[0]
-    //视频监控
-    res.deviceId = zqData.deviceID
-    res.strtype = zqData.deviceType
-    //注气驱替促抽系统状态
-    res.zyStatusData = {
-      Pressure: zqData.readData.Pressure,
-      paiqiPressure: zqData.readData.paiqiPressure,
-    };
-    //装备运行状态与控制
-    res.deviceStatusControl = {
-      deviceId: zqData.deviceID,
-      devicetype: zqData.deviceType,
-      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.environmentData = {
-      coVal: res.co.readData.coval || '-',
-      ch4Val: res.ch4.readData.ch4val || '-',
-      o2Val: res.o2.readData.o2val || '-',
-      temperature: res.temp.readData.temperature || '-',
-    }
-    //装备运行工况监测
-    res.deviceGkData = {
-      xitongVoltage: zqData.readData.xitongVoltage || '-',
-      zhujiCurrent: zqData.readData.zhujiCurrent || '-',
-      fenglengCurrent: zqData.readData.fenglengCurrent || '-',
-      qianzhouTemp: zqData.readData.qianzhouTemp || '-',
-      houzhouTemp: zqData.readData.houzhouTemp || '-',
-      raozuTemp: zqData.readData.raozuTemp || '-',
-      paiqiTemp: zqData.readData.paiqiTemp || '-',
-      penyouTemp: zqData.readData.penyouTemp || '-',
-      youqitongTemp: zqData.readData.youqitongTemp || '-',
-    }
-
-
-    //抽采数据
-    //let pumpData = await getCcSystem();
-    let pumpD=res.msgTxt[res.msgTxt.length - 1].empty_device.filter(v=>v.type=='pump_under_1')
-    res.pumpData = pumpD[0].datalist[0]
-    res.pumpDeviceId = res.pumpData.deviceID
-    res.pumpStrtype = 'pump'
-    res.pumpStrtypes = res.pumpData.deviceType
-
-    //应用场景信息
-    res.workInfo = res.msgTxt[res.msgTxt.length - 1].empty_device.map(v => {
-      return {
-        id: v.datalist[0].deviceID,
-        ...v.datalist[0],
-        ...v.datalist[0].readData
-      }
-    })
-    //单元抽采数据
-    res.dyCcData = res.msgTxt[res.msgTxt.length - 1].empty_device.filter(v => v.type != 'pump_under_1' && v.type != 'sys')
-    res.dyCcData.sort((a, b) => parseInt(a.typeName.split('').reverse().join('')) - parseInt(b.typeName.split('').reverse().join('')));
-    //抽采数据
-    res.ccBoard = {
-      mixStdInstant: res.pumpData.readData.mixStdInstant || '-',
-      gasConcentration: res.pumpData.readData.gasConcentration || '-',
-      negativePressure: res.pumpData.readData.negativePressure || '-',
-      methaneStdInstant: res.pumpData.readData.methaneStdInstant || '-',
-    }
-
-    count.value += 1
-    let hlg1 = res.dyCcData[0].datalist[0].readData
-    let hlg2 = res.dyCcData[1].datalist[0].readData
-    let hlg3 = res.dyCcData[2].datalist[0].readData
-    let hlg4 = res.dyCcData[3].datalist[0].readData
-    let hlg5 = res.dyCcData[4].datalist[0].readData
-    if (count.value <= 11) {
-      ccEchart.xData.push(res.pumpData.readTime)
-      ccEchart.yData.push(res.pumpData.readData.mixStdInstant)
-      ccEchart.yData1.push(res.pumpData.readData.gasConcentration)
-
-      hlgEchart.xData.push(res.pumpData.readTime)
-      hlgEchart.yDataHl.push(hlg1.mixStdInstant)
-      hlgEchart.yDataHl1.push(hlg2.mixStdInstant)
-      hlgEchart.yDataHl2.push(hlg3.mixStdInstant)
-      hlgEchart.yDataHl3.push(hlg4.mixStdInstant)
-      hlgEchart.yDataHl4.push(hlg5.mixStdInstant)
-      hlgEchart.yDataNd.push(hlg1.gasConcentration)
-      hlgEchart.yDataNd1.push(hlg2.gasConcentration)
-      hlgEchart.yDataNd2.push(hlg3.gasConcentration)
-      hlgEchart.yDataNd3.push(hlg4.gasConcentration)
-      hlgEchart.yDataNd4.push(hlg5.gasConcentration)
-      hlgEchart.yDataFy.push(hlg1.negativePressure)
-      hlgEchart.yDataFy1.push(hlg2.negativePressure)
-      hlgEchart.yDataFy2.push(hlg3.negativePressure)
-      hlgEchart.yDataFy3.push(hlg4.negativePressure)
-      hlgEchart.yDataFy4.push(hlg5.negativePressure)
-
-    } else {
-      count.value = count.value - 2
-      ccEchart.xData.shift()
-      ccEchart.yData.shift()
-      ccEchart.yData1.shift()
-      hlgEchart.xData.shift()
-      hlgEchart.yDataHl.shift()
-      hlgEchart.yDataHl1.shift()
-      hlgEchart.yDataHl2.shift()
-      hlgEchart.yDataHl3.shift()
-      hlgEchart.yDataHl4.shift()
-      hlgEchart.yDataNd.shift()
-      hlgEchart.yDataNd1.shift()
-      hlgEchart.yDataNd2.shift()
-      hlgEchart.yDataNd3.shift()
-      hlgEchart.yDataNd4.shift()
-      hlgEchart.yDataFy.shift()
-      hlgEchart.yDataFy1.shift()
-      hlgEchart.yDataFy2.shift()
-      hlgEchart.yDataFy3.shift()
-      hlgEchart.yDataFy4.shift()
-
+    //设备状态总览
+    res.deviceStatusNum = {
+      zxNum: 5,
+      lxNum: 5,
+      gzNum: 5,
+      bjNum: 5,
     }
-    res.hlgEchart = hlgEchart
-    res.ccEchart = ccEchart
-
-    //注气驱替促抽效果评价
-    res.ccPjData = {
-      ext_rate_percent: res.pumpData.readData.ext_rate_percent || '-',
-      residual_gas_content_m3_t: res.pumpData.readData.residual_gas_content_m3_t || '-',
-      gas_drop_rate_m3_t_mon: res.pumpData.readData.gas_drop_rate_m3_t_mon || '-',
-      inject_extract_ratio: res.pumpData.readData.inject_extract_ratio || '-',
+    res.deviceStatusData = [
+      { deviceName: 'CAM-001', status: '在线', remark: '正常' },
+      { deviceName: 'CAM-002', status: '在线', remark: '正常' },
+      { deviceName: 'CAM-003', status: '报警', remark: '高温' },
+      { deviceName: 'CAM-001', status: '在线', remark: '正常' },
+      { deviceName: 'CAM-002', status: '在线', remark: '正常' },
+      { deviceName: 'CAM-003', status: '报警', remark: '高温' },
+    ]
+    //实时温度曲线
+    res.temptureLineData = [
+      { pos: '1', value: '12' },
+      { pos: '2', value: '44' },
+      { pos: '3', value: '44' },
+      { pos: '4', value: '20' },
+    ]
+    //最近处理记录
+    res.processingRecordData = [
+      { time: '14:25:10', deviceName: 'CAM-001', status: '在线', },
+      { time: '14:25:10', deviceName: 'CAM-002', status: '在线', },
+      { time: '14:25:10', deviceName: 'CAM-003', status: '报警', },
+      { time: '14:25:10', deviceName: 'CAM-001', status: '在线', },
+      { time: '14:25:10', deviceName: 'CAM-002', status: '在线', },
+      { time: '14:25:10', deviceName: 'CAM-003', status: '报警', },
+    ]
+    //报警监控
+    res.alarmMonitoringDataT = {
+      dayWarn: 12,
+      warnOk: 2,
+      warnUnOk: 10
     }
-    //系统运行状态
-    let systemRun = await getTodayDeviceRunStatus({ "injectionDeviceId": res.deviceId, "injectionValueCode": "runStatus", "pumpDeviceId": res.pumpDeviceId, "pumpStatusCode": "runStatus" })
-    res.systemRunData = systemRun
-    //异常提醒数据
-    let SummaryD = await getSummary({})
-    res.warnechartD = [
-      { name: "装备运行异常", value: SummaryD.alarmTypeStats[2].count },
-      { name: "环境监测异常", value: SummaryD.alarmTypeStats[0].count },
-      { name: "信号传输异常", value: SummaryD.alarmTypeStats[1].count },
-      { name: "驱替数据异常", value: 0 },
+    res.alarmMonitoringData = [
+      { time: '14:25:10', address: '采掘场A区', grade: '一级', },
+      { time: '14:25:10', address: '采掘场B区', grade: '一级', },
+      { time: '14:25:10', address: '采掘场C区', grade: '一级', },
+      { time: '14:25:10', address: '采掘场D区', grade: '一级', },
+      { time: '14:25:10', address: '采掘场E区', grade: '一级', },
+      { time: '14:25:10', address: '采掘场F区', grade: '一级', },
     ]
-    res.warnListD = {
-      deviceWarn: SummaryD.alarmTypeStats[2].count,
-      hjWarn: SummaryD.alarmTypeStats[0].count,
-      xhWarn: SummaryD.alarmTypeStats[1].count,
-      qtWarn: 0,
+    //
+    res.areaTemptureData = [
+      { x: '1', y: '12' },
+      { x: '2', y: '44' },
+      { x: '3', y: '44' },
+      { x: '4', y: '20' },
+    ]
+    //环境监测数据
+    res.environmentalMonitoringData = {
+      tempHj: '-8.5',
+      fsfx: '3.2',
+      temp: '42',
+      coval: '12',
+      co2val: '380',
+      o2val: '20.9',
+      ch4val: '0.02',
+      fcnd: '0.08',
+      ywzs: '0.15',
+      tempDb: '28',
+    }
+    //快捷操作
+    res.quickOperationData={
+      time:'128天06:32:18',
+      sjsx:'实时',
+      wlyc:'12s'
     }
+    console.log(res, '红沙泉---')
     return res;
   });
 };