提交最新

src/assets/icons/device-run.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14.06" height="17.331" viewBox="0 0 14.06 17.331">
+  <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="路径_57901" data-name="路径 57901" d="M170.667,86.213l.041,14.692a.774.774,0,0,0,1.224.653l11.427-7.346a.8.8,0,0,0,0-1.347l-11.468-7.346A.8.8,0,0,0,170.667,86.213Z" transform="translate(-170.167 -84.886)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/assets/icons/famen-open.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="19.285" height="18.424" viewBox="0 0 19.285 18.424">
+  <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="路径_57902" data-name="路径 57902" d="M107.209,123.053V120.26H103a1.007,1.007,0,1,1,0-2.013h10.2a1.008,1.008,0,1,1,0,2.015H109v2.791h.33a.7.7,0,0,1,.709.69v1.643l-3.868-.007v-1.637a.7.7,0,0,1,.71-.69Zm-6.928,10.715v1.159a.314.314,0,0,1-.321.308h-.822a.318.318,0,0,1-.322-.315v-7.411a.315.315,0,0,1,.322-.313h.82a.315.315,0,0,1,.322.313v1.51h2.732a3.034,3.034,0,0,1,3.058-2.775h3.774a3.036,3.036,0,0,1,3.058,2.775h2.739V127.5a.3.3,0,0,1,.308-.3h.843a.3.3,0,0,1,.309.3v7.436a.3.3,0,0,1-.309.3h-.842a.3.3,0,0,1-.308-.3v-1.164H112.7a3.065,3.065,0,0,1-2.854,1.9H106.07a3.058,3.058,0,0,1-2.854-1.9Z" transform="translate(-98.316 -117.746)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/design/themify/dark.less

@@ -27,8 +27,7 @@ html[data-theme='dark2'] {
   --vent-base-light-bg: #60f4ff;
   --vent-base-light-bg-opcity: #60f4ff55;
   --vent-transparent: #fff0;
-  // --vent-font-color: #fff;
-    --vent-font-color: #3df6ff;
+  --vent-font-color: #fff;
   --vent-font-action-link: #7af5ff;
   --vent-configurable-bg: #09316a;
   --vent-configurable-module-bg: #3df6ff11;

src/design/themify/default.less

@@ -35,8 +35,7 @@ html {
   --vent-base-light-bg: #60f4ff;
   --vent-base-light-bg-opcity: #60f4ff55;
   --vent-transparent: #ffffff00;
-  // --vent-font-color: #ffffff;
-   --vent-font-color: #3df6ff;
+  --vent-font-color: #ffffff;
   --vent-font-yellow-color: #ffae00;
   --vent-font-action-link: #7af5ff;
 

src/design/vent/antCss.less

@@ -143,32 +143,23 @@ tr.@{ventSpace}-table-expanded-row:hover > td {
 
 /* modal 组件 */
 .@{ventSpace}-modal-content {
-  // color: @vent-font-color !important;
-  // background-color: @vent-modal-bg !important;
-  // border: 1px solid @vent-modal-border !important;
-  // box-shadow: 0px 0px 10px @vent-modal-box-shadow inset !important;
-  // backdrop-filter: blur(10px);
-  height: 700px;
-  background-color: transparent !important;
-background: url('@/assets/images/gasInjection/9-1.png') no-repeat;
-background-size: 100% 100%;
+  color: @vent-font-color !important;
+  background-color: @vent-modal-bg !important;
+  border: 1px solid @vent-modal-border !important;
+  box-shadow: 0px 0px 10px @vent-modal-box-shadow inset !important;
+  backdrop-filter: blur(10px);
 }
 .@{ventSpace}-modal-header {
-  // color: @vent-font-color !important;
+  color: @vent-font-color !important;
+  box-shadow: 0px 0px 0px @vent-modal-box-shadow inset !important;
+  border-color: #ffffff22 !important;
+  backdrop-filter: blur(10px);
   background-color: transparent !important;
-  // box-shadow: 0px 0px 0px @vent-modal-box-shadow inset !important;
-  // border-color: #ffffff22 !important;
-  // backdrop-filter: blur(10px);
-  background: url('@/assets/images/gasInjection/9-2.png') no-repeat bottom !important;
-  border-bottom:0px !important; 
   .jeecg-basic-title {
     color: @vent-font-color !important;
   }
   .@{ventSpace}-modal-title {
-    // color: @vent-modal-title !important;
-    color: #fff;
-    text-align: center;
-    font-size: 18px;
+    color: @vent-modal-title !important;
   }
 }
 .@{ventSpace}-modal-body {
@@ -207,24 +198,9 @@ background-size: 100% 100%;
   }
 }
 .@{ventSpace}-modal-close {
-  // color: #ffffff !important;
-  position: absolute;
-  top: -26px !important;
-    right: -22px !important;
-  color: #2b9fce !important;
-  
-}
-.@{ventSpace}-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;
+  color: #ffffff !important; 
 }
+
 .@{ventSpace}-modal-footer {
   border-color: #ffffff22 !important;
 }

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

@@ -7,7 +7,7 @@
       <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event" />
       <Content :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }" :moduleData="moduleData"
         :data="selectedData" />
-      <DetailInfo v-if="showDetail" :deviceType="deviceType" @closeModal="closeModal"></DetailInfo>
+      <DetailInfo :showDetail="showDetail" :deviceType="deviceType" @closeModal="closeModal"></DetailInfo>
     </slot>
   </component>
 </template>

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

@@ -130,7 +130,8 @@
           <gasInjectList class="content__module" :option="config.config.option" :upDownData="config.data" />
         </template>
         <template v-else-if="config.name === 'gas_zy_chart'">
-          <gasZyChart class="content__module" />
+          <!-- <gasZyChart class="content__module" /> -->
+           <gasZyList gasZyListrt class="content__module" :option="config.config.option" />
         </template>
         <template v-else-if="config.name === 'gas_warn_chart'">
           <gasWarnChart class="content__module" :option="config.config.option" />
@@ -190,7 +191,8 @@ import generalList from './preset/generalList.vue';
 import upDown from './preset/upDown.vue'
 import gasInjectChart from './preset/gasInjectChart.vue'
 import gasInjectList from './preset/gasInjectList.vue'
-import gasZyChart from './preset/gasZyChart.vue'
+// import gasZyChart from './preset/gasZyChart.vue'
+import gasZyList from './preset/gasZyList.vue'
 import gasWarnChart from './preset/gasWarnChart.vue'
 import gasWarnList from './preset/gasWarnList.vue'
 import gasDeviceStatusControl from './preset/gasDeviceStatusControl.vue'

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

@@ -1,56 +1,59 @@
 <template>
-  <div class="detail-info">
-    <a-modal v-model:visible="visibleDetail" width="1350px" :footer="null" :title="modalTitle" centered destroyOnClose
-      @cancel="handleCancel">
-      <template v-if="deviceType == 'cc_gas_nd'">
-        <curveEchartDetail :sysType="'Cc'" :isShowExport="false" :tableColumn="tableColumnCc"></curveEchartDetail>
-      </template>
-      <template v-if="deviceType == 'cc_gas_ll'">
-        <curveEchartDetail :sysType="'Cc'" :isShowExport="false" :tableColumn="tableColumnCc"></curveEchartDetail>
-      </template>
-      <template v-if="deviceType == 'gas_zq-yl'">
-        <curveEchartDetail :sysType="'Zq'" :isShowExport="false" :tableColumn="tableColumnSj"></curveEchartDetail>
-      </template>
-      <template v-if="deviceType == 'gas_zq_sj'">
-        <zqMonitorDetail :isShowExport="false" :tableColumn="tableColumnSj" :optionDetail="optionDetailZq">
-        </zqMonitorDetail>
-      </template>
-      <template v-if="deviceType == 'gas_zq_hj'">
-        <zqMonitorDetail :isShowExport="true" :tableColumn="tableColumnHj"></zqMonitorDetail>
-      </template>
-      <template v-if="deviceType == 'gas_zq_paramline'">
-        <curveEchartDetail :sysType="'Zq'" :isShowExport="false" :tableColumn="tableColumnSj"></curveEchartDetail>
-      </template>
-      <template v-if="deviceType == 'gas_zq_video'">
-        <zqMonitorDetail :isShowExport="true" :tableColumn="tableColumnSj"></zqMonitorDetail>
-      </template>
-      <template v-if="deviceType == 'gas_cc_detail'">
-        <zqMonitorDetail :isShowExport="false" :tableColumn="tableColumnCc" :optionDetail="optionDetailCc">
-        </zqMonitorDetail>
-      </template>
-      <template v-if="deviceType == 'gas_cc_line'">
-        <curveEchartDetail :sysType="'Cc'" :isShowExport="false" :tableColumn="tableColumnCc">
-        </curveEchartDetail>
-      </template>
-      <template v-if="deviceType == 'syq-env-monitor'">
-        <SyqDetails />
-      </template>
-    </a-modal>
-  </div>
+  <a-modal v-model:visible="visibleDetail" width="1350px" :footer="null" :title="modalTitle" centered destroyOnClose
+    @cancel="handleCancel">
+    <template v-if="deviceType == 'cc_gas_nd'">
+      <curveEchartDetail :sysType="'Cc'" :isShowExport="false" :tableColumn="tableColumnCc"></curveEchartDetail>
+    </template>
+    <template v-if="deviceType == 'cc_gas_ll'">
+      <curveEchartDetail :sysType="'Cc'" :isShowExport="false" :tableColumn="tableColumnCc"></curveEchartDetail>
+    </template>
+    <template v-if="deviceType == 'gas_zq-yl'">
+      <curveEchartDetail :sysType="'Zq'" :isShowExport="false" :tableColumn="tableColumnSj"></curveEchartDetail>
+    </template>
+    <template v-if="deviceType == 'gas_zq_sj'">
+      <zqMonitorDetail :isShowExport="false" :tableColumn="tableColumnSj" :optionDetail="optionDetailZq">
+      </zqMonitorDetail>
+    </template>
+    <template v-if="deviceType == 'gas_zq_hj'">
+      <zqMonitorDetail :isShowExport="true" :tableColumn="tableColumnHj"></zqMonitorDetail>
+    </template>
+    <template v-if="deviceType == 'gas_zq_paramline'">
+      <curveEchartDetail :sysType="'Zq'" :isShowExport="false" :tableColumn="tableColumnSj"></curveEchartDetail>
+    </template>
+    <template v-if="deviceType == 'gas_zq_video'">
+      <zqMonitorDetail :isShowExport="true" :tableColumn="tableColumnSj"></zqMonitorDetail>
+    </template>
+    <template v-if="deviceType == 'gas_cc_detail'">
+      <zqMonitorDetail :isShowExport="false" :tableColumn="tableColumnCc" :optionDetail="optionDetailCc">
+      </zqMonitorDetail>
+    </template>
+    <template v-if="deviceType == 'gas_cc_line'">
+      <curveEchartDetail :sysType="'Cc'" :isShowExport="false" :tableColumn="tableColumnCc">
+      </curveEchartDetail>
+    </template>
+    <template v-if="deviceType == 'syq-env-monitor'">
+      <SyqDetails />
+    </template>
+  </a-modal>
+
 </template>
 
 <script setup lang="ts">
-import { computed, reactive, ref } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import curveEchartDetail from './curveEchartDetail.vue'
 import zqMonitorDetail from './zqMonitorDetail.vue'
 import { tableColumnSj, tableColumnHj, tableColumnCc, optionDetailZq, optionDetailCc } from '../gasInject/gasInject.data'
 import SyqDetails from './SyqDetails.vue';
 let props = defineProps({
+  //是否显示弹窗
+  showDetail: {
+    type: Boolean
+  },
   deviceType: {
     type: String
   }
 })
-let visibleDetail = ref(true)
+let visibleDetail = ref(false)
 let $emit = defineEmits(['closeModal'])
 
 // //注气压力/流量配置项
@@ -85,11 +88,56 @@ let modalTitle = computed(() => {
 
 //关闭弹窗
 function handleCancel() {
-  visibleDetail.value = false
-  $emit('closeModal', visibleDetail.value)
+  $emit('closeModal', false)
 }
 
-
+watch(() => props.showDetail, (newV, oldV) => {
+  visibleDetail.value = newV
+}, { immediate: true })
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" >
+.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/moduleBottom.vue

@@ -34,14 +34,14 @@
 
   @{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');
+      --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');
+    --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;
@@ -59,9 +59,9 @@
     background: var(--image-model_original_title_bg) no-repeat;
     background-size: 100% 100%;
     position: relative;
-    padding-left: 75px;
+    padding-left: 55px;
     padding-right: 24px;
-    padding-top: 2px;
+    padding-top: 4px;
     margin-bottom: 5px;
     font-family: 'douyuFont';
     line-height: var(--bg-height);

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

@@ -60,7 +60,7 @@
     background-size: 100% 100%;
     position: relative;
     padding-left: 45px;
-    padding-top: 2px;
+    padding-top: 4px;
     margin-bottom: 5px;
     font-family: 'douyuFont';
     line-height: var(--bg-height);

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

@@ -61,7 +61,7 @@ function handleClickDetail() {
   background-size: 100% 100%;
   position: relative;
   padding-left: 45px;
-  padding-top: 2px;
+  padding-top: 4px;
   margin-bottom: 5px;
   font-family: 'douyuFont';
   line-height: var(--bg-height);

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

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

@@ -9,7 +9,13 @@
       </div>
       <div class="control-box" v-else>
         <a-input v-model:value="presure" size="small" placeholder="请输入"  />
-        <span style="font-size: 12px;">MPa</span>
+        <!-- <span style="font-size: 12px;">MPa</span> -->
+         <div class="nav-btn" @click="handleSetting">
+            <div class="nav-text">
+              <SvgIcon class="icon-style1" size="12" name="gas-export"></SvgIcon>
+              <span>设置</span>
+            </div>
+          </div>
       </div>
     </div>
   </div>
@@ -26,6 +32,11 @@ let props=defineProps({
 })
 let presure=ref('')
 
+//设置
+function handleSetting(){
+
+}
+
 </script>
 
 <style lang="less" scoped>
@@ -93,6 +104,28 @@ let presure=ref('')
     margin-right: 5px;
 
   }
+  .nav-btn {
+    width: 56px;
+    height: 78%;
+    padding: 2px;
+    border: 1px solid #1081d7;
+    cursor: pointer;
+    color: #fff;
+  }
+
+  .nav-text {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    font-size: 12px;
+    justify-content: center;
+    align-items: center;
+    background-color: #1081d7;
+  }
+
+  .icon-style1 {
+    margin-right: 5px;
+  }
 }
 ::v-deep .zxm-input-sm{
   width: 70px;

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

@@ -44,7 +44,7 @@ function getOption() {
           data: xData,
           axisLabel: {
             textStyle: {
-              color: '#b3b8cc',
+              color: 'rgba(181, 185, 191)',
               fontSize: 12
             },
             margin: 10, //刻度标签与轴线之间的距离。
@@ -52,7 +52,7 @@ function getOption() {
 
           axisLine: {
             lineStyle: {
-              color: 'rgba(4, 49, 79)',
+              color: 'rgba(1, 63, 97)',
             },
           },
           axisTick: {
@@ -64,9 +64,15 @@ function getOption() {
           },
         }],
         yAxis: [{
+           name: '(%)',
+          nameTextStyle: {
+            color: 'rgba(181, 185, 191)',
+            fontSize: 12,
+            padding: 0
+          },
           splitLine: {
             lineStyle: {
-              color: 'rgba(4, 49, 79)',
+              color: 'rgba(1, 63, 97)',
             },
           },
           axisTick: {
@@ -77,7 +83,7 @@ function getOption() {
           },
           axisLabel: {
             textStyle: {
-              color: '#b3b8cc'
+              color: 'rgba(181, 185, 191)',
             },
           }
         }],
@@ -171,12 +177,12 @@ function getOption() {
           axisLine: { //坐标轴轴线相关设置。数学上的x轴
             show: true,
             lineStyle: {
-              color: 'rgba(4, 49, 79)',
+              color: 'rgba(1, 63, 97)',
             },
           },
           axisLabel: { //坐标轴刻度标签的相关设置
             textStyle: {
-              color: '#7ec7ff',
+              color: 'rgba(181, 185, 191)',
               padding: 5,
               fontSize: 12
             },
@@ -193,9 +199,9 @@ function getOption() {
           data: xLabel
         }],
         yAxis: [{
-          name: 'MPa',
+          name: '(MPa)',
           nameTextStyle: {
-            color: "#7ec7ff",
+            color: 'rgba(181, 185, 191)',
             fontSize: 12,
             padding: 0
           },
@@ -203,7 +209,7 @@ function getOption() {
           splitLine: {
             show: true,
             lineStyle: {
-              color: 'rgba(4, 49, 79)',
+              color: 'rgba(1, 63, 97)',
             },
           },
           axisLine: {
@@ -212,7 +218,7 @@ function getOption() {
           axisLabel: {
             show: true,
             textStyle: {
-              color: '#7ec7ff',
+              color: 'rgba(181, 185, 191)',
               padding: 12
             },
             formatter: '{value}',

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

@@ -1,11 +1,14 @@
 <template>
   <div class="gas-inject-list">
-   
-      <div class="list-box-item" v-for="(item, index) in option" :key="index">
-        <div class="box-item-label">{{ item.label }}</div>
-        <div class="box-item-value">{{ item.value }}</div>
+
+    <div class="list-box-item" v-for="(item, index) in option" :key="index">
+      <div class="box-item-label">{{ item.label }}</div>
+      <div class="box-item-value">
+        <span>  {{ item.value }}</span>
+        <span style="margin-left: 5px;">{{ item.unit }}</span>
       </div>
-      <!-- <div class="list-box-item">
+    </div>
+    <!-- <div class="list-box-item">
         <div class="box-item-label">{{ item.mcTitle }}</div>
         <div class="box-item-value">{{ item.mcValue }}</div>
       </div>
@@ -25,16 +28,16 @@
         <div class="box-item-label">{{ item.hlTitle }}</div>
         <div class="box-item-value">{{ item.hlValue }}</div>
       </div> -->
-   
+
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 
-let props=defineProps({
-  option:{
-    type:Array as any
+let props = defineProps({
+  option: {
+    type: Array as any
   }
 })
 // let listData = ref([
@@ -57,7 +60,7 @@ let props=defineProps({
   position: relative;
   width: 100%;
   height: 100%;
-  padding: 15px;
+  padding: 13px 15px;
   box-sizing: border-box;
   overflow-y: auto;
 
@@ -66,16 +69,19 @@ let props=defineProps({
     justify-content: space-between;
     align-items: center;
     width: 100%;
-    height: 52px;
+    height: 50px;
     padding: 0px 28px;
     background: var(--image-model_list_bg) no-repeat;
     background-size: 100% 100%;
   }
-  .box-item-label{
+
+  .box-item-label {
     color: #c3f5ff;
   }
-  .box-item-value{
-      font-family: 'douyuFont';
+
+  .box-item-value {
+    font-size: 12px;
+    font-family: 'douyuFont';
     color: #91faff;
   }
 }

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

@@ -1,7 +1,7 @@
 <template>
   <div class="gas-warn-chart">
     <div class="echart-box" ref="gasWarnChart"></div>
-    <SvgIcon class="icon-style" size="40" name="warn-chart" />
+    <SvgIcon class="icon-style" size="46" name="warn-chart" />
   </div>
 </template>
 

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

@@ -0,0 +1,92 @@
+<template>
+  <div class="gasZyList">
+    <div class="list-box">
+      <div class="list-box-item" v-for="(item, index) in option" :key="index">
+             <SvgIcon class="icon-style" size="20" :name="item.iconName" />
+        <div class="item-label">{{ item.label }}</div>
+        <div class="item-value">{{ item.value }}</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
+  }
+})
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .gasZyList {
+    --image-zy_list_bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/12-1.png');
+    --image-zy_list_bg1: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/12-2.png');
+  }
+}
+
+.gasZyList {
+  --image-zy_list_bg: url('@/assets/images/gasInjection/12-1.png');
+  --image-zy_list_bg1: url('@/assets/images/gasInjection/12-2.png');
+  width: 100%;
+  height: 100%;
+  padding: 25px 15px;
+  box-sizing: border-box;
+
+  .list-box {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .list-box-item {
+    position: relative;
+    width: 100%;
+    height: 43px;
+    display: flex;
+    align-items: center;
+
+    &:nth-child(1) {
+      .item-value {
+        color: #04cdff;
+      }
+
+      background: var(--image-zy_list_bg) no-repeat;
+      background-size: 100% 100%;
+    }
+
+    &:nth-child(2) {
+      .item-value {
+        color: #2cffdd;
+      }
+
+      background: var(--image-zy_list_bg1) no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+
+  .item-label {
+    position: absolute;
+    left: 56px;
+  }
+
+  .item-value {
+    font-size: 12px;
+    position: absolute;
+    right: 40px;
+    font-family: 'douyuFont';
+  }
+  .icon-style{
+    position: absolute;
+    left: 13px;
+  }
+}
+</style>

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

@@ -1,6 +1,5 @@
 // import { truncateSync } from 'fs-extra';
 import { Config } from '../../deviceManager/configurationTable/types';
-import { fanControlState1 } from '../../monitorManager/fanLocalMonitor1/fanLocal.data';
 // import { BDdustMock, BDfireMock } from './configurable.data.bd';
 import { getThemifyImagesURL } from '/@/utils/ui';
 
@@ -195,7 +194,7 @@ export const testConfigGasInject: Config[] = [
               },
             },
             grid: {
-              top: "8%",
+              top: "18%",
               left: "6%",
               right: "6%",
               bottom: "3%",
@@ -257,12 +256,12 @@ export const testConfigGasInject: Config[] = [
         {
           readFrom: '',
           option: [
-            { label: '工作面', value: '12304工作面' },
-            { label: '所属煤层', value: '2号煤' },
-            { label: '设计长度', value: '2924.6' },
-            { label: '采面宽度', value: '300.4' },
-            { label: '剩余可采长度', value: '900' },
-            { label: '原始煤层瓦斯含量', value: '3.40' },
+            { label: '工作面', value: '12304工作面',unit:'' },
+            { label: '所属煤层', value: '2号煤',unit:'' },
+            { label: '设计长度', value: '2924.6' ,unit:'m'},
+            { label: '采面宽度', value: '300.4' ,unit:'m'},
+            { label: '剩余可采长度', value: '900' ,unit:'m'},
+            { label: '原始煤层瓦斯含量', value: '3.40',unit:'%'},
           ]
         }
       ],
@@ -314,6 +313,10 @@ export const testConfigGasInject: Config[] = [
       preset: [
         {
           readFrom: '',
+          option: [
+            { label: '装备运行', value: '2025-07-30 21:29:00', iconName: 'famen-open' },
+            { label: '注气阀门开启', value: '2025-07-30 21:29:00', iconName: 'device-run' },
+          ]
         },
       ],
     },
@@ -734,7 +737,7 @@ export const testConfigGasInjectZq: Config[] = [
     deviceType: 'gas_zq_video',
     moduleName: '视频监控',
     pageType: 'gas_injection',
-     showDetail: true,
+    showDetail: true,
     moduleData: {
       header: {
         show: false,
@@ -898,7 +901,7 @@ export const testConfigGasInjectCc: Config[] = [
   {
     deviceType: 'gas_cc_line',
     moduleName: '抽采数据曲线',
-     showDetail: true,
+    showDetail: true,
     pageType: 'gas_injection',
     moduleData: {
       header: {

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

@@ -9,32 +9,17 @@
       </div>
       <template v-if="menuName == 'zjm'">
         <div class="main-status"> 运行中 </div>
-        <ModuleGasInject
-          v-for="cfg in configs"
-          :key="cfg.deviceType"
-          :show-style="cfg.showStyle"
-          :module-data="cfg.moduleData"
-          :module-name="cfg.moduleName"
-          :device-type="cfg.deviceType"
-          :data="data"
-          :visible="true"
-          :visible-detail="cfg.showDetail"
-        />
+        <ModuleGasInject v-for="cfg in configs" :key="cfg.deviceType" :show-style="cfg.showStyle"
+          :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
+          :visible="true" :visible-detail="cfg.showDetail" />
       </template>
       <template v-else>
-        <ModuleGasInject
-          v-for="cfg in configs"
-          :key="cfg.deviceType"
-          :show-style="cfg.showStyle"
-          :module-data="cfg.moduleData"
-          :module-name="cfg.moduleName"
-          :device-type="cfg.deviceType"
-          :data="data"
-          :visible="true"
-          :visible-detail="cfg.showDetail"
-        />
+        <ModuleGasInject v-for="cfg in configs" :key="cfg.deviceType" :show-style="cfg.showStyle"
+          :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
+          :visible="true" :visible-detail="cfg.showDetail" />
       </template>
-      <div :class="{ 'vent-modal': menuName == 'zjm', 'vent-modal-1': menuName == 'syq' || menuName == 'zqxt' || menuName == 'ccxt' }">
+      <div
+        :class="{ 'vent-modal': menuName == 'zjm', 'vent-modal-1': menuName == 'syq' || menuName == 'zqxt' || menuName == 'ccxt' }">
         <div class="modal-box">
           <Three3D ref="three3D" :modalName="'zhuqi'" class="modal-3d" />
         </div>
@@ -45,238 +30,240 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, onUnmounted, ref, computed, nextTick } from 'vue';
-  import { useInitConfigs, useInitPage } from './hooks/useInit';
-  import ModuleGasInject from './components/ModuleGasInject.vue';
-  import navMenu from './components/gasInject/navMenu.vue';
-  import Three3D from './components/three3D.vue';
-  // import { useRoute } from 'vue-router';
-  import VentModal from '/@/components/vent/micro/ventModal.vue';
-  import { getHomeData } from './configurable.api';
-  // import { useRoute } from 'vue-router';
-  import { testConfigGasInject, testConfigGasInjectZq, testConfigGasInjectCc, testConfigGasInjectSy } from './configurable.data';
-  import { animateCamera } from '/@/utils/threejs/util';
+import { onMounted, onUnmounted, ref, computed, nextTick } from 'vue';
+import { useInitConfigs, useInitPage } from './hooks/useInit';
+import ModuleGasInject from './components/ModuleGasInject.vue';
+import navMenu from './components/gasInject/navMenu.vue';
+import Three3D from './components/three3D.vue';
+import { getHomeData } from './configurable.api';
+import { testConfigGasInject, testConfigGasInjectZq, testConfigGasInjectCc, testConfigGasInjectSy } from './configurable.data';
+import { animateCamera } from '/@/utils/threejs/util';
 
-  const { configs, fetchConfigs } = useInitConfigs();
-  const { mainTitle, data, updateData } = useInitPage('注气驱替智能管控系统');
-  // const route = useRoute();
-  const three3D = ref(null);
-  let interval: number | undefined;
-  let menuName = ref('zjm');
+const { configs, fetchConfigs } = useInitConfigs();
+const { mainTitle, data, updateData } = useInitPage('注气驱替智能管控系统');
+const three3D = ref(null);
+let interval: number | undefined;
+let menuName = ref('zjm');
 
-  //选项切换
-  function toggleMenu(param) {
-    menuName.value = param;
-    switch (menuName.value) {
-      case 'zjm':
-        configs.value = testConfigGasInject;
-        break;
-      case 'syq':
-        configs.value = testConfigGasInjectSy;
-        break;
-      case 'zqxt':
-        configs.value = testConfigGasInjectZq;
-        break;
-      case 'ccxt':
-        configs.value = testConfigGasInjectCc;
-        break;
-    }
+//选项切换
+function toggleMenu(param) {
+  menuName.value = param;
+  switch (menuName.value) {
+    case 'zjm':
+      configs.value = testConfigGasInject;
+      break;
+    case 'syq':
+      configs.value = testConfigGasInjectSy;
+      break;
+    case 'zqxt':
+      configs.value = testConfigGasInjectZq;
+      break;
+    case 'ccxt':
+      configs.value = testConfigGasInjectCc;
+      break;
+  }
 
-    // 刷新/
-    nextTick(async () => {
-      three3D.value?.resizeRenderer();
-      const modal = three3D.value.getModal();
-      if (modal) {
-        const oldCamera = modal.camera;
-        const oldCameraPosition = { x: oldCamera.position.x, y: oldCamera.position.y, z: oldCamera.position.z };
-        if (param == 'zqxt') {
-          const newP = { x: -26.587483577770445, y: -1.885170491810538, z: 39.104309663143255 };
-          const newT = { x: 10.919881491980828, y: -4.7228274957026946, z: 38.87645926712004 };
-          await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, newP, newT, modal);
-        } else {
-          const newP = { x: -45.69228602978097, y: 49.59721939545517, z: 2.6454258202266985 };
-          const newT = { x: 9.289291846942458, y: -21.608842010051386, z: 2.7675348357947906 };
-          await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, newP, newT, modal);
-        }
+  // 刷新/
+  nextTick(async () => {
+    three3D.value?.resizeRenderer();
+    const modal = three3D.value.getModal();
+    if (modal) {
+      const oldCamera = modal.camera;
+      const oldCameraPosition = { x: oldCamera.position.x, y: oldCamera.position.y, z: oldCamera.position.z };
+      if (param == 'zqxt') {
+        const newP = { x: -26.587483577770445, y: -1.885170491810538, z: 39.104309663143255 };
+        const newT = { x: 10.919881491980828, y: -4.7228274957026946, z: 38.87645926712004 };
+        await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, newP, newT, modal);
+      } else {
+        const newP = { x: -50.67171826505719,y: 51.72951331422375,z: -0.2490818466518837 };
+        const newT = { x: 7.203626999999999,y: -23.224234999999993,z: -0.12054599999999999 };
+        await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, newP, newT, modal);
       }
-    });
-  }
-  onMounted(() => {
-    // fetchConfigs('vent_new').then(() => {
-    configs.value = testConfigGasInject;
-    // updateEnhancedConfigs(configs.value);
+    }
+  });
+}
+onMounted(() => {
+  // fetchConfigs('vent_new').then(() => {
+  configs.value = testConfigGasInject;
+  // updateEnhancedConfigs(configs.value);
 
+  getHomeData({}).then(updateData);
+  // });
+  setInterval(() => {
     getHomeData({}).then(updateData);
-    // });
-    setInterval(() => {
-      getHomeData({}).then(updateData);
-    }, 60000);
-  });
+  }, 60000);
+});
 
-  onUnmounted(() => {
-    clearInterval(interval);
-  });
+onUnmounted(() => {
+  clearInterval(interval);
+});
 </script>
 
 <style lang="less" scoped>
-  @import '/@/design/theme.less';
-
-  @{theme-deepblue} {
-    .company-home {
-      --image-modal-top: url('@/assets/images/gasInjection/1-1.png');
-      --image-modal-status: url('@/assets/images/gasInjection/3-1.png');
-      --image-modal-center: url('@/assets/images/gasInjection/1-2.png');
-    }
-  }
+@import '/@/design/theme.less';
 
+@{theme-deepblue} {
   .company-home {
     --image-modal-top: url('@/assets/images/gasInjection/1-1.png');
     --image-modal-status: url('@/assets/images/gasInjection/3-1.png');
     --image-modal-center: url('@/assets/images/gasInjection/1-2.png');
-    width: 100%;
-    height: 100%;
-    color: @white;
-    position: relative;
-    background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
-
-    .top-bg {
-      width: 100%;
-      height: 66px;
-      background: var(--image-modal-top) no-repeat center;
-      background-size: 100% 100%;
-      position: absolute;
-      z-index: 1;
-
-      .main-title {
-        height: 66px;
-        font-family: 'douyuFont';
-        font-size: 20px;
-        letter-spacing: 2px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
+  }
+}
 
-      .top-nav {
-        position: absolute;
-        top: 0;
-        width: 880px;
-        height: 100%;
-        display: flex;
-        justify-content: flex-start;
-      }
-    }
+.company-home {
+  --image-modal-top: url('@/assets/images/gasInjection/1-1.png');
+  --image-modal-status: url('@/assets/images/gasInjection/3-1.png');
+  --image-modal-center: url('@/assets/images/gasInjection/1-2.png');
+  width: 100%;
+  height: 100%;
+  color: @white;
+  position: relative;
+  background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
 
-    .main-container {
-      position: absolute;
-      top: 66px;
-      width: 100%;
-      height: calc(100% - 66px);
-      padding: 0px 10px;
-      box-sizing: border-box;
-    }
+  .top-bg {
+    width: 100%;
+    height: 66px;
+    background: var(--image-modal-top) no-repeat center;
+    background-size: 100% 100%;
+    position: absolute;
+    z-index: 1;
 
-    .main-status {
+    .main-title {
+      height: 66px;
+      font-family: 'douyuFont';
+      font-size: 20px;
+      letter-spacing: 2px;
       display: flex;
       justify-content: center;
       align-items: center;
-      width: 440px;
-      height: 80px;
-      font-size: 18px;
-      font-family: 'douyuFont';
-      margin: 10px 0px;
-      background: var(--image-modal-status);
-      background-size: 100% 100%;
-    }
-
-    .module-dropdown {
-      padding: 10px;
-      background-image: @vent-configurable-dropdown;
-      border-bottom: 2px solid @vent-configurable-home-light-border;
-      color: @vent-font-color;
-      position: absolute;
-      top: 70px;
-      right: 460px;
     }
 
-    .module-dropdown-original {
-      padding: 10px;
-      background-image: @vent-configurable-dropdown;
-      border-bottom: 2px solid @vent-configurable-home-light-border;
-      color: @vent-font-color;
+    .top-nav {
       position: absolute;
-      top: 70px;
-      right: 460px;
-    }
-
-    .module-trigger-button {
-      color: @vent-font-color;
-      background-image: @vent-configurable-dropdown;
-      border: none;
-      border-bottom: 2px solid @vent-configurable-home-light-border;
-    }
-
-    .nav-cards {
-      position: absolute;
-      left: 50%;
-      top: 0px;
-      transform: translate(-50%, 0);
-      width: 691px;
-      height: 58px;
-      background: var(--image-modal-center) no-repeat;
-      background-size: 100% 100%;
+      top: 0;
+      width: 880px;
+      height: 100%;
+      display: flex;
+      justify-content: flex-start;
     }
   }
 
-  :deep(.loading-box) {
-    position: unset;
-  }
-
-  .modal-box {
+  .main-container {
+    position: absolute;
+    top: 66px;
     width: 100%;
-    height: 100%;
-    position: relative;
-    pointer-events: auto;
-    padding: 20px;
+    height: calc(100% - 66px);
+    padding: 0px 10px;
+    box-sizing: border-box;
   }
 
-  // 试验区模型区域样式
-  .syq-modal {
-    position: absolute;
-    top: 135px;
-    right: 20px;
-    width: calc(100% - 510px);
-    height: 515px;
-    background: url('@/assets/images/gasInjection/syq/modal-bg.png') no-repeat;
+  .main-status {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 440px;
+    height: 80px;
+    font-size: 18px;
+    font-family: 'douyuFont';
+    margin: 10px 0px;
+    background: var(--image-modal-status);
     background-size: 100% 100%;
   }
 
-  .vent-modal {
+  .module-dropdown {
+    padding: 10px;
+    background-image: @vent-configurable-dropdown;
+    border-bottom: 2px solid @vent-configurable-home-light-border;
+    color: @vent-font-color;
     position: absolute;
     top: 70px;
-    left: 50%;
-    transform: translate(-50%, 0px);
-    width: calc(100% - 920px);
-    height: 505px;
-    background: url(/src/assets/images/gasInjection/syq/modal-bg.png) no-repeat;
-    background-size: 100% 100%;
-    pointer-events: auto;
-    background-color: transparent !important;
+    right: 460px;
   }
-  .vent-modal-1 {
+
+  .module-dropdown-original {
+    padding: 10px;
+    background-image: @vent-configurable-dropdown;
+    border-bottom: 2px solid @vent-configurable-home-light-border;
+    color: @vent-font-color;
     position: absolute;
     top: 70px;
-    left: 460px;
-    width: calc(100% - 470px);
-    height: 505px;
-    background: url(/src/assets/images/gasInjection/syq/modal-bg.png) no-repeat;
-    background-size: 100% 100%;
-    pointer-events: auto;
-    background-color: transparent !important;
+    right: 460px;
   }
-  .modal-3d {
-    padding: 10px;
-    width: calc(100% - 20px) !important;
-    height: calc(100% - 20px) !important;
+
+  .module-trigger-button {
+    color: @vent-font-color;
+    background-image: @vent-configurable-dropdown;
+    border: none;
+    border-bottom: 2px solid @vent-configurable-home-light-border;
+  }
+
+  .nav-cards {
+    position: absolute;
+    left: 50%;
+    top: 0px;
+    transform: translate(-50%, 0);
+    width: 691px;
+    height: 58px;
+    background: var(--image-modal-center) no-repeat;
+    background-size: 100% 100%;
   }
+}
+
+:deep(.loading-box) {
+  position: unset;
+}
+
+.modal-box {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  pointer-events: auto;
+  padding: 20px;
+}
+
+// 试验区模型区域样式
+.syq-modal {
+  position: absolute;
+  top: 135px;
+  right: 20px;
+  width: calc(100% - 510px);
+  height: 515px;
+  background: url('@/assets/images/gasInjection/syq/modal-bg.png') no-repeat;
+  background-size: 100% 100%;
+}
+
+.vent-modal {
+  position: absolute;
+  top: 70px;
+  left: 50%;
+  transform: translate(-50%, 0px);
+  width: calc(100% - 920px);
+  height: 500px;
+  background: url(/src/assets/images/gasInjection/syq/modal-bg.png) no-repeat;
+  background-size: 100% 100%;
+  pointer-events: auto;
+  padding: 15px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.vent-modal-1 {
+  position: absolute;
+  top: 70px;
+  left: 460px;
+  width: calc(100% - 470px);
+  height: 500px;
+  background: url(/src/assets/images/gasInjection/syq/modal-bg.png) no-repeat;
+  background-size: 100% 100%;
+  pointer-events: auto;
+    padding:10px 15px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.modal-3d {
+  padding: 10px;
+  width: calc(100% - 20px) !important;
+  height: calc(100% - 20px) !important;
+}
 </style>

src/views/vent/monitorManager/sensorMonitor/index.vue

@@ -0,0 +1,615 @@
+<template>
+  <div class="sensor-container">
+    <a-spin :spinning="loading">
+      <a-tabs class="tabs-box" type="card" v-model:activeKey="activeKey" @change="tabChange">
+        <a-tab-pane key="1" tab="实时监测">
+          <div class="box-bg table-box" style="margin-bottom: 10px">
+            <div>
+              <label style="color: var(--vent-font-color)">设备类型：</label>
+              <Select
+                @change="handleSensorChange"
+                :options="deviceTypeOption"
+                :fieldNames="{ label: 'label', value: 'value' }"
+                v-model:value="deviceKind"
+                style="width: 200px; margin-bottom: 5px; color: black"
+                placeholder="请选择设备类型"
+                :allowClear="true"
+              />
+              <template v-if="deviceKind === 'modelsensor_multi' && sysOrgCode != 'hnjmypmk'">
+                <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXlsFns"> 导出</a-button>
+              </template>
+              <!--hnjmypmk 崖坪 特有 -->
+              <template v-if="deviceKind === 'modelsensor_multi' && sysOrgCode === 'hnjmypmk'">
+                <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXlsFn"> 导出</a-button>
+              </template>
+              <MonitorTable
+                ref="SensorMonitorRef"
+                :is-show-select="true"
+                :columnsType="deviceKind + '_monitor'"
+                :dataSource="dataSource"
+                design-scope="modelsensor_monitor"
+                @select-row="getSelectRow"
+                :deviceType="deviceKind"
+                :scroll="{ y: chartsColumns.length > 0 ? 600 : 600 }"
+                size="''"
+                title="传感器监测"
+              >
+                <template #filterCell="{ column, record }">
+                  <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : 'red'">{{
+                    record.warnFlag == '0' ? '正常' : '报警'
+                  }}</a-tag>
+                  <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? 'default' : 'green'">{{
+                    record.netStatus == '0' ? '断开' : '连接'
+                  }}</a-tag>
+                </template>
+              </MonitorTable>
+            </div>
+            <!-- v-if="chartsColumns.length > 0" -->
+            <div class="charts-box" v-if="hasPermission('sensor:showMonitorChart') && chartsColumns && chartsColumns.length > 0">
+              ">
+              <BarAndLine
+                :chartsColumnsType="selectData.deviceType"
+                xAxisPropType="readTime"
+                :dataSource="detailDataSource"
+                height="300px"
+                :chartsColumns="chartsColumns"
+                chartsType="detail"
+                :option="echartsOption"
+                @refresh="refreshEchatrs"
+              />
+            </div>
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="历史数据">
+          <div class="tab-item table-box box-bg padding-0" v-if="activeKey == '2'">
+            <HistoryTable
+              :columns-type="deviceKind"
+              :device-type="deviceKind"
+              @change="historyDataSourceChange"
+              designScope="modelsensor-history"
+              :scroll="{ y: 600 }"
+            />
+            <!-- <div class="charts-box" v-if="chartsColumns.length > 0">
+              <BarAndLine
+                :chartsColumnsType="selectData.deviceType"
+                xAxisPropType="ttime"
+                :dataSource="historyDataSource"
+                height="300px"
+                :chartsColumns="chartsColumns"
+                chartsType="history"
+                :option="echartsOption1"
+                @refresh="refreshEchatrs"
+              />
+
+              <DeviceHistoryChart
+                :chartsColumnsType="selectData.deviceType"
+                xAxisPropType="ttime"
+                :dataSource="historyDataSource"
+                height="300px"
+                :chartsColumns="chartsColumns"
+                chartsType="history"
+                :option="echartsOption1"
+                @refresh="refreshEchatrs"
+              />
+            </div> -->
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="5" tab="近一月数据分析" v-if="hasPermission('ventanalyAlarmAnalysis:showMonth')">
+          <div class="tab-item box-bg" style="margin-bottom: 10px">
+            <div style="margin-top: 20px">
+              <label style="color: var(--vent-font-color); margin-left: 20px">查询设备：</label>
+              <Select
+                :options="deviceTypeOption"
+                :fieldNames="{ label: 'label', value: 'value' }"
+                v-model:value="deviceKind"
+                style="width: 200px; margin-bottom: 5px; color: black"
+                placeholder="请选择传感器类型"
+                :allowClear="true"
+              />
+              <Select
+                @change="handleSensorChange1"
+                :options="FxData"
+                :fieldNames="{ label: 'strinstallpos', value: 'deviceID' }"
+                v-model:value="strinstallpos"
+                style="width: 200px; margin-bottom: 5px; margin-left: 5px; color: black"
+                placeholder="请选择查询设备"
+                :allowClear="true"
+              />
+              <a-button type="primary" style="margin-left: 5px" preIcon="ant-design:export-outlined" @click="onExportXlsFnFx">导出分析数据</a-button>
+            </div>
+            <div class="charts-box" v-if="chartsColumnsFx.length > 0">
+              <BarAndLine
+                :chartsColumnsType="selectData.deviceType"
+                xAxisPropType="ttime"
+                :dataSource="historyDataSource1"
+                height="300px"
+                :chartsColumns="chartsColumnsFx"
+                chartsType="history"
+                :option="echartsOption1"
+                @refresh="refreshEchatrs"
+              />
+            </div>
+            <div class="charts-box" v-else> <span style="color: aliceblue"> 暂无数据 </span> </div>
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="6" tab="历史数据分析" v-if="hasPermission('ventanalyAlarmAnalysis:show')">
+          <div class="history-echart-box" style="margin-bottom: 10px">
+            <DeviceHistoryChart
+              chartsColumnsType="modelsensor_chart"
+              :dataSource="dataSource"
+              height="100%"
+              :chartsColumns="chartsColumns"
+              device-type="modelsensor"
+              :is-show-child-type="true"
+            />
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="3" tab="报警历史">
+          <div class="tab-item box-bg" v-if="activeKey == '3'">
+            <AlarmHistoryTable columns-type="alarm" device-type="modelsensor" designScope="alarm-history" />
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="4" tab="报警分析">
+          <div class="tab-item box-bg" v-if="activeKey == '4'">
+            <warnAnalysis device-type="modelsensor" />
+          </div>
+        </a-tab-pane>
+        <!-- <a-tab-pane key="4" tab="操作历史">
+          <div class="tab-item box-bg">
+            <HandlerHistoryTable columns-type="operator_history" device-type="modelsensor" designScope="alarm-history" />
+          </div>
+        </a-tab-pane> -->
+      </a-tabs>
+      <div class="title-text">
+        {{ selectData.strinstallpos || selectData.strname }}
+      </div>
+    </a-spin>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import DeviceHistoryChart from '/@/views/vent/monitorManager/comment/DeviceHistoryEcharts.vue';
+  import { Select } from 'ant-design-vue';
+  import { onBeforeMount, computed, ref, onMounted, onUnmounted, toRaw, reactive, nextTick, unref } from 'vue';
+  import MonitorTable from '../comment/MonitorTable.vue';
+  import HistoryTable from '../comment/HistoryTable.vue';
+  import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
+  import warnAnalysis from '../comment/warnAnalysis.vue';
+  import { list, getTableList } from './sensor.api';
+  import { deviceList } from '../../deviceManager/comment/pointTabel/point.api';
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+  import { cloneDeep } from 'lodash-es';
+  import { useMethods } from '/@/hooks/system/useMethods';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { useRouter } from 'vue-router';
+  import { getDictItemsByCode } from '/@/utils/dict';
+  import { device } from '../../gas/gasPipeNet/gasPipeNet.api';
+  import { defHttp } from '/@/utils/http/axios';
+  import { usePermission } from '/@/hooks/web/usePermission';
+
+  const router = useRouter();
+  const { sysOrgCode } = useGlobSetting();
+  const { exportXlsPostBlob, exportXlsGetBlob } = useMethods();
+  const { hasPermission } = usePermission();
+  const SensorMonitorRef = ref();
+  const deviceBaseList = ref([]);
+  const activeKey = ref('1');
+  const deviceKind = ref('');
+  const deviceId = ref('');
+  const FxId = ref('');
+  const IDvalue = ref('');
+  const deviceTypeOption = ref([]);
+  // 默认初始是第一行
+  const selectRowIndex = ref(0);
+  const dataSource = ref([]);
+  interface DeviceItem {
+    deviceID: string;
+    strinstallpos: string;
+  }
+  const FxData = ref<any[]>([]);
+  const detailDataSource = ref<any[]>([]);
+  const historyDataSource = ref<any[]>([]);
+  const historyDataSource1 = ref<any[]>([]);
+  const chartsColumns = ref<any[]>([]);
+  const chartsColumnsFx = ref<any[]>([]);
+  const loading = ref(true);
+
+  const echartsOption = {
+    grid: {
+      top: '20%',
+      left: '10px',
+      right: '5px',
+      bottom: '5%',
+      containLabel: true,
+    },
+    toolbox: {
+      feature: {},
+    },
+  };
+  const echartsOption1 = {
+    grid: {
+      top: '20%',
+      left: '10px',
+      right: '5px',
+      bottom: '10%',
+      containLabel: true,
+    },
+    toolbox: {
+      feature: {},
+    },
+  };
+
+  const selectData = reactive({
+    strname: '',
+    deviceType: '',
+    deviceID: '',
+  });
+
+  const tabChange = (activeKeyVal) => {
+    activeKey.value = activeKeyVal;
+    detailDataSource.value = [];
+    if (activeKeyVal == 1) {
+      nextTick(() => {
+        SensorMonitorRef.value.setSelectedRowKeys([selectData.deviceID]);
+      });
+    }
+  };
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  const getMonitor = (flag?) => {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = setTimeout(
+        async () => {
+          await getDataSource(deviceKind.value);
+          if (timer) {
+            timer = null;
+          }
+          getMonitor();
+        },
+        flag ? 0 : 1000
+      );
+    }
+  };
+
+  const getDataSource = async (devicetype) => {
+    const type = devicetype ? devicetype : 'modelsensor';
+    const res = await list({ devicetype: type, pagetype: 'normal' });
+    dataSource.value = res.msgTxt[0].datalist || [];
+    dataSource.value.map((data: any) => {
+      const readData = data.readData;
+      data = Object.assign(data, readData);
+      return data;
+    });
+    FxData.value = [];
+    dataSource.value.forEach((item: DeviceItem) => {
+      FxData.value.push({
+        strinstallpos: item.strinstallpos, // 无报错
+        deviceID: item.deviceID, // 无报错
+      });
+      IDvalue.value = item.strinstallpos;
+    });
+    const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
+    Object.assign(selectData, data);
+
+    // if (chartsColumns.value.length <= 0 && selectData.deviceType) {
+    //   handleChange(selectData.deviceType);
+    // }a
+
+    // 如果当前为监测tab
+    if (activeKey.value === '1') {
+      // const isHas = detailDataSource.value.find((item) => item['readTime'] === selectData['readTime']);
+      // // 获取选中数据
+      // if (!isHas) {
+      //   if (detailDataSource.value.length < 15) {
+      //     detailDataSource.value.push({ ...selectData });
+      //   } else {
+      //     detailDataSource.value.shift();
+      //     detailDataSource.value.push({ ...selectData });
+      //   }
+      // }
+      const dataList = cloneDeep(detailDataSource.value);
+      if (dataList.length < 15) {
+        dataList.push({ ...selectData });
+      } else {
+        dataList.shift();
+        dataList.push({ ...selectData });
+      }
+      detailDataSource.value = dataList;
+    }
+
+    if (loading.value) {
+      loading.value = false;
+    }
+    return data;
+  };
+
+  const getSelectRow = (selectRow, index) => {
+    if (!selectRow) return;
+    selectRowIndex.value = index;
+    const baseData: any = deviceBaseList.value.find((baseData: any) => baseData.id === selectRow.deviceID);
+    Object.assign(selectData, selectRow, baseData);
+    if (selectData.deviceType) {
+      // if (timer) {
+      //   clearTimeout(timer);
+      //   timer = undefined;
+      // }
+      if (activeKey.value === '1') detailDataSource.value = [];
+      if (activeKey.value === '2') historyDataSource.value = [];
+      handleChange(selectData.deviceType);
+    }
+  };
+
+  // 获取设备基本信息列表
+  const getDeviceBaseList = () => {
+    getTableList({ pageSize: 1000 }).then((res) => {
+      deviceBaseList.value = res.records;
+    });
+  };
+
+  function handleChange(type) {
+    chartsColumns.value = getTableHeaderColumns(type + '_chart');
+    console.log('[ type ] >', type, chartsColumns.value);
+  }
+  function handleChangeFx(type) {
+    chartsColumnsFx.value = getTableHeaderColumns(type + '_chart-Fx');
+    console.log('[ type ] >', type, chartsColumnsFx.value);
+  }
+  function handleSensorChange(type) {
+    loading.value = true;
+    handleChange(type);
+    FxData.value = [];
+    timer = null;
+    dataSource.value = [];
+    detailDataSource.value = [];
+  }
+  async function handleSensorChange1(id) {
+    FxId.value = id;
+    const result = await defHttp.get({
+      url: '/safety/ventanalyMonitorData/getDeviceAvgData',
+      params: {
+        deviceId: id,
+      },
+    });
+    result.forEach((item) => {
+      handleChangeFx(item.deviceKind);
+      item.ttime = item.createTime;
+    });
+    historyDataSource1.value = result || [];
+  }
+
+  function refreshEchatrs() {
+    timer = null;
+    // getMonitor(true);
+    console.log('echarts 刷新');
+  }
+  function historyDataSourceChange(dataSource) {
+    historyDataSource.value = dataSource;
+    if (historyDataSource.value.length > 0) handleChange(historyDataSource.value[0].gdevicetype);
+  }
+
+  //导出
+  function onExportXlsFns() {
+    // 判断时间间隔和查询时间区间，数据量下载大时进行提示
+    const url = '/ventanaly-device/monitor/exportAllDeviceInfo';
+    return exportXlsPostBlob('多参数报表', url, {
+      devicetype: deviceKind.value,
+      pagetype: 'normal',
+    });
+  }
+
+  function onExportXlsFn() {
+    // 判断时间间隔和查询时间区间，数据量下载大时进行提示
+    const url = '/ventanaly-device/safety/reportInfo/expComReportByParam';
+    return exportXlsPostBlob('多参数报表', url, {
+      deviceKind: deviceKind.value.split('_')[0],
+      deviceType: deviceKind.value,
+      tempName: 'dcsbb',
+    });
+  }
+  function onExportXlsFnFx() {
+    // 判断时间间隔和查询时间区间，数据量下载大时进行提示
+    const url = '/safety/ventanalyMonitorData/exportDeviceAvgData';
+    return exportXlsGetBlob('分析数据报表', url, {
+      deviceId: FxId.value,
+    });
+  }
+
+  onBeforeMount(() => {
+    getDeviceBaseList();
+  });
+
+  onMounted(async () => {
+    let dictName = 'modelsensorkind';
+    const route = unref(router.currentRoute);
+    if (route.name) {
+      const nameStrList = route.name.split('-');
+      if (nameStrList.length > 0 && nameStrList[nameStrList.length - 1] !== 'sensorMonitor') {
+        dictName = nameStrList[nameStrList.length - 1];
+      }
+    }
+    const res = getDictItemsByCode(dictName);
+    deviceTypeOption.value = res;
+    deviceKind.value = deviceTypeOption.value[0]['value'];
+    handleChange(deviceKind.value);
+    await getMonitor(true);
+  });
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  });
+</script>
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+  @import '/@/design/vent/modal.less';
+
+  .padding-0 {
+    padding: 10px 0 !important;
+  }
+
+  .sensor-container {
+    height: 100%;
+    position: relative;
+    top: 65px;
+    padding: 10px;
+    z-index: 999;
+
+    // max-height: calc(100vh - 150px);
+    .@{ventSpace}-tabs {
+      max-height: calc(100% - 100px);
+
+      .tab-item {
+        max-height: calc(100% - 170px);
+        overflow-y: auto;
+      }
+    }
+
+    .title-text {
+      position: absolute;
+      top: -24px;
+      left: 0;
+      width: 100%;
+      text-align: center;
+      color: var(--vent-font-color);
+    }
+
+    .table-box {
+      // height: calc(60% - 150px);
+      height: 780px;
+      padding: 20px 10px;
+      overflow-y: auto;
+    }
+
+    .box-bg {
+      // border: 1px solid #4d7ad855;
+      // border-radius: 2px;
+      // // background-color: #001d3055;
+      // -webkit-backdrop-filter: blur(8px);
+      // backdrop-filter: blur(8px);
+      // box-shadow: 0 0 10px #5984e055 inset;
+      // background-color: #00b3ff12;
+      padding-bottom: 10px;
+      border: 1px solid #44d3ff70;
+      border-radius: 2px;
+      -webkit-backdrop-filter: blur(8px);
+      box-shadow: 0 0 20px #44b4ff33 inset;
+      background-color: #ffffff11;
+      overflow-y: auto;
+    }
+
+    .table-box-content {
+      height: 430px;
+      background-color: #ffffff03;
+      border-bottom: 1px solid #44d3ff70;
+    }
+
+    .charts-box {
+      height: 300px;
+      padding: 5px 10px;
+      margin-top: 10px;
+    }
+    .history-echart-box {
+      height: 800px;
+      margin-top: 20px;
+    }
+  }
+
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    height: 100%;
+  }
+
+  :deep(.@{ventSpace}-tabs-card) {
+    .@{ventSpace}-tabs-tab {
+      background: var(--vent-device-manager-control-btn-hover);
+      border-color: #74e9fe;
+      border-radius: 0%;
+
+      &:hover {
+        color: #64d5ff;
+      }
+    }
+
+    .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
+      color: aqua;
+    }
+
+    .@{ventSpace}-tabs-nav::before {
+      border-color: #74e9fe;
+    }
+
+    .@{ventSpace}-picker,
+    .@{ventSpace}-select-selector {
+      width: 100%;
+      background: #00000017 !important;
+      border: 1px solid @vent-form-item-border !important;
+
+      input,
+      .@{ventSpace}-select-selection-item,
+      .@{ventSpace}-picker-suffix {
+        color: #fff !important;
+      }
+
+      .@{ventSpace}-select-selection-placeholder {
+        color: #b7b7b7 !important;
+      }
+    }
+
+    .@{ventSpace}-pagination-next,
+    .action,
+    .@{ventSpace}-select-arrow,
+    .@{ventSpace}-picker-separator {
+      color: var(--vent-font-color) !important;
+    }
+
+    .@{ventSpace}-table-cell-row-hover {
+      background: #264d8833 !important;
+    }
+
+    .@{ventSpace}-table-row-selected {
+      background: #00c0a311 !important;
+
+      td {
+        background-color: #00000000 !important;
+      }
+    }
+
+    .@{ventSpace}-table-thead {
+      // background: linear-gradient(#004a8655 0%, #004a86aa 10%) !important;
+      background: #3d9dd45d !important;
+
+      & > tr > th,
+      .@{ventSpace}-table-column-title {
+        // color: #70f9fc !important;
+        border-color: var(--vent-base-border) !important;
+        border-left: none !important;
+        border-right: none !important;
+        padding: 7px;
+      }
+    }
+
+    .@{ventSpace}-table-tbody {
+      tr > td {
+        padding: 12px;
+      }
+    }
+
+    .@{ventSpace}-table-tbody > tr:hover.@{ventSpace}-table-row > td {
+      background-color: #26648855 !important;
+    }
+
+    .jeecg-basic-table-row__striped {
+      // background: #97efff11 !important;
+      td {
+        background-color: #97efff11 !important;
+      }
+    }
+
+    :deep(.vent-form) {
+      .@{ventSpace}-select-dropdown {
+        color: #000000 !important;
+      }
+    }
+  }
+</style>

src/views/vent/monitorManager/sensorMonitor/sensor.api.ts

@@ -0,0 +1,17 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  list = '/monitor/device',
+  baseList = '/safety/ventanalyWindow/list',
+}
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.post({ url: Api.list, params });
+
+/**
+ * 保存或者更新用户
+ * @param params
+ */
+export const getTableList = (params) => defHttp.get({ url: Api.baseList, params });