1. 新增瓦斯抽采调控页面

2. 新增瓦斯管道数据监测页面
3. 添加瓦斯综合系统底部菜单样式

src/router/routes/basic.ts

@@ -75,6 +75,17 @@ export const QIANKUN_ROUTE: AppRouteRecordRaw = {
       },
       ver: '1',
     },
+    {
+      path: '/micro-vent-3dModal/dashboard/analysis',
+      name: 'dashboard-analysis',
+      component: () => import('/@/views/vent/monitorManager/deviceMonitor/index.vue'),
+      meta: {
+        title: '通防综合管控',
+        hideBreadcrumb: true,
+        hideMenu: true,
+      },
+      ver: '1',
+    },
   ],
   ver: '1',
 };

src/views/vent/comment/components/bottomMenu.vue

@@ -1,18 +1,26 @@
 <template>
   <div class="bottom-btn-group">
-    <div
-      v-for="item in navList"
-      :key="item.pathName"
-      class="vent-row-center btn-item"
-      :class="{ 'btn-item-active': isBtnActive === item.pathName || item.isHover }"
-      @click="setBtn('click', item)"
-    >
-      {{ item.title }}
-    </div>
+    <template v-if="buttonType != 'router'">
+      <div
+        v-for="item in navList"
+        :key="item.pathName"
+        class="vent-row-center btn-item"
+        :class="{ 'btn-item-active': isBtnActive === item.pathName || item.isHover }"
+        @click="setBtn('click', item)"
+      >
+        {{ item.title }}
+      </div>
+    </template>
+    <template v-else>
+      <div v-for="item in navList" :key="item.pathName" class="vent-row-center btn-item-route" @click="setBtn('click', item)">
+        {{ item.title }}
+      </div>
+    </template>
   </div>
 </template>
 <script lang="ts">
   import { ref, defineComponent } from 'vue';
+  import { string } from 'vue-types';
   type navListType = { title: string; pathName: string; isHover: Boolean };
 
   export default defineComponent({
@@ -43,19 +51,23 @@
           },
         ],
       },
+      type: {
+        type: String,
+        default: 'tab',
+      },
     },
     emits: ['change'],
     setup(props, { emit }) {
-      const isBtnActive = ref(props.navList[0].pathName);
-
+      const isBtnActive = ref(props.type !== 'router' ? props.navList[0].pathName : '');
+      const buttonType = props.type;
       function setBtn(type, activeObj) {
         if (type === 'click') {
           isBtnActive.value = activeObj.pathName;
-          activeObj.isHover = true;
+          if (props.type !== 'router') activeObj.isHover = true;
         }
         props.navList.forEach((item) => {
           if (item.title !== activeObj.title) {
-            activeObj.isHover = false;
+            if (props.type !== 'router') activeObj.isHover = false;
           }
         });
         emit('change', isBtnActive.value);
@@ -63,6 +75,7 @@
       return {
         setBtn,
         isBtnActive,
+        buttonType,
       };
     },
   });
@@ -87,13 +100,31 @@
       cursor: pointer;
       padding-bottom: 2px;
       pointer-events: auto;
-      background: url('/@/assets/images/vent/bottom-btn.png');
       font-family: 'ysbtFont';
       font-size: 18px;
+      background: url('/@/assets/images/vent/bottom-btn.png');
     }
     .btn-item-active {
-      background: url('/@/assets/images/vent/bottom-btn-active.png') !important;
       color: #ffffff !important;
+      background: url('/@/assets/images/vent/bottom-btn-active.png') !important;
+    }
+    .btn-item-route {
+      width: 194px;
+      height: 73px;
+      margin: 10px;
+      color: #fff;
+      cursor: pointer;
+      padding-bottom: 2px;
+      pointer-events: auto;
+      font-weight: 600;
+      font-size: 16px;
+      background: url('/@/assets/images/vent/bottom-btn-route.png');
+      &:hover {
+        color: var(--vent-base-light-bg) !important;
+      }
+    }
+    .btn-item-route-active {
+      background: url('/@/assets/images/vent/bottom-btn-route-active.png') !important;
     }
   }
 </style>

src/views/vent/gas/components/list/listItem.vue

@@ -13,7 +13,14 @@
         </div>
         <!-- 输入框 -->
         <div v-if="type === 'input'">
-          <Input :bordered="false" :value="value" @update:value="$emit('update:value', $event)" />
+          <div class="list-item__set">
+            <div class="list-item__monitor_val">{{ value }}</div>
+            <Input class="list-item__set_val" :bordered="true" :value="value" @update:value="$emit('update:value', $event)" />
+            <div class="list-item__set_button">设置</div>
+          </div>
+        </div>
+        <div v-if="type === 'inputSet'">
+          <Input :bordered="true" :value="value" @update:value="$emit('update:value', $event)" />
         </div>
         <!-- 默认 -->
         <div v-if="type === 'default'" class="text-right list-item__text_blue">
@@ -40,7 +47,7 @@
       /** value（即右侧）内容，可用slot */
       value?: string;
       /** 条目类型 */
-      type?: 'input' | 'default' | 'status-light';
+      type?: 'input' | 'default' | 'status-light' | 'inputSet';
       /** 输入框的固定宽度 */
       labelWidth?: number | string;
       /** 输入框的固定宽度 */
@@ -99,6 +106,27 @@
   .list-item__value {
     flex-grow: 1;
   }
+  .list-item__set {
+    display: flex;
+    flex-direction: row;
+    .list-item__monitor_val {
+      width: 80px;
+    }
+    .list-item__set_val {
+      width: 100px;
+      background: transparent !important;
+      margin: 2px 5px;
+    }
+    .list-item__set_button {
+      width: 60px;
+      margin-left: 5px;
+      cursor: pointer;
+      color: var(--vent-btn-primary-hover-color);
+      &:hover {
+        color: var(--vent-gas-tab-bg-avtived);
+      }
+    }
+  }
 
   .list-item__background {
     background-image: @vent-gas-list-item-bg-img;

src/views/vent/gas/gasAssessment/components/gasControl.vue

@@ -3,18 +3,19 @@
   <div class="monitor-container">
     <transition enter-active-class="animate__animated  animate__fadeInLeft" leave-active-class="animate__animated  animate__fadeOutLeft">
       <div class="lr left-box" v-if="loading">
-        <template v-for="unitIndex in unitNum" :key="unitIndex">
-          <ventBox1 v-if="unitIndex < 4" class="vent-margin-t-10">
+        <template v-for="monitorPos in monitorPosNum" :key="monitorPos">
+          <ventBox1 v-if="monitorPos < 4" class="vent-margin-t-10">
             <template #title>
-              <div>抽采单元{{ unitIndex }}</div>
+              <div>测点{{ monitorPos }}</div>
             </template>
             <template #container>
-              <BarAndLine
-                xAxisPropType="time"
-                :dataSource="get(mockGasUnitData, 'history')"
-                height="205px"
-                :chartsColumns="gasUnitOption"
-                :option="echatsOption"
+              <ListItem
+                v-for="(item, index) in monitorPosData"
+                :key="index"
+                class="w-100% mb-5px"
+                :value="get(dataSource, item.code)"
+                :label="item.title"
+                labelWidth="200px"
               />
             </template>
           </ventBox1>
@@ -23,30 +24,39 @@
     </transition>
     <transition enter-active-class="animate__animated  animate__fadeInRight" leave-active-class="animate__animated  animate__fadeInRight">
       <div class="lr right-box" v-if="loading">
-        <template v-for="unitIndex in unitNum" :key="unitIndex">
-          <ventBox1 v-if="unitIndex >= 4" class="vent-margin-t-10">
-            <template #title>
-              <div>抽采单元{{ unitIndex }}</div>
-            </template>
-            <template #container>
-              <BarAndLine
-                xAxisPropType="time"
-                :dataSource="get(mockGasUnitData, 'history')"
-                height="205px"
-                :chartsColumns="gasUnitOption"
-                :option="echatsOption"
-              />
-            </template>
-          </ventBox1>
-        </template>
         <ventBox1 class="vent-margin-t-10">
           <template #title>
             <div>阀门调控</div>
           </template>
           <template #container>
-            <CustomChart :chart-config="gasUnitPieOption" :chart-data="mockPieData" height="200px" />
+            <ListItem
+              v-for="(item, index) in monitorValveData"
+              :key="index"
+              class="w-100% mb-5px"
+              :value="get(dataSource, item.code)"
+              :label="item.title"
+              labelWidth="150px"
+              type="input"
+            />
           </template>
         </ventBox1>
+        <template v-for="monitorPos in monitorPosNum" :key="monitorPos">
+          <ventBox1 v-if="monitorPos >= 4" class="vent-margin-t-10">
+            <template #title>
+              <div>测点{{ monitorPos }}</div>
+            </template>
+            <template #container>
+              <ListItem
+                v-for="(item, index) in monitorPosData"
+                :key="index"
+                class="w-100% mb-5px"
+                :value="get(dataSource, item.code)"
+                :label="item.title"
+                labelWidth="200px"
+              />
+            </template>
+          </ventBox1>
+        </template>
       </div>
     </transition>
   </div>
@@ -56,7 +66,7 @@
   import { ref, onMounted } from 'vue';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
   import CustomBadges from './customHeader.vue';
-  import { gasUnitOption, headerBadges, mockGasUnitData, gasUnitBarOption, mockData, gasUnitPieOption, mockPieData } from '../gasAssessment.data';
+  import { gasUnitOption, headerBadges, monitorValveData, monitorPosData, mockData, gasUnitPieOption, mockPieData } from '../gasAssessment.data';
   import ListItem from '@/views/vent/gas/components/list/listItem.vue';
   import { get } from '@/utils/ventutil';
   import CustomChart from '@/views/vent/home/configurable/components/detail/CustomChart.vue';
@@ -75,7 +85,7 @@
   };
   const loading = ref(false);
   const dataSource = ref({});
-  const unitNum = ref(5);
+  const monitorPosNum = ref(5);
   // // https获取监测数据
   let timer: null | NodeJS.Timeout = null;
   function getMonitor(flag?) {

src/views/vent/gas/gasAssessment/components/gasEcharts.vue

@@ -0,0 +1,225 @@
+<template>
+  <CustomBadges class="w-1710px ml-100px mt-50px" :badges="headerBadges" />
+  <div class="monitor-container">
+    <transition enter-active-class="animate__animated  animate__fadeInLeft" leave-active-class="animate__animated  animate__fadeOutLeft">
+      <div class="lr left-box" v-if="loading">
+        <template v-for="unitIndex in unitNum" :key="unitIndex">
+          <ventBox1 v-if="unitIndex < 4" class="vent-margin-t-10">
+            <template #title>
+              <div>抽采单元{{ unitIndex }}</div>
+            </template>
+            <template #container>
+              <BarAndLine
+                xAxisPropType="time"
+                :dataSource="get(mockGasUnitData, 'history')"
+                height="205px"
+                :chartsColumns="gasUnitOption"
+                :option="echatsOption"
+              />
+            </template>
+          </ventBox1>
+        </template>
+      </div>
+    </transition>
+    <transition enter-active-class="animate__animated  animate__fadeInRight" leave-active-class="animate__animated  animate__fadeInRight">
+      <div class="lr right-box" v-if="loading">
+        <template v-for="unitIndex in unitNum" :key="unitIndex">
+          <ventBox1 v-if="unitIndex >= 4" class="vent-margin-t-10">
+            <template #title>
+              <div>抽采单元{{ unitIndex }}</div>
+            </template>
+            <template #container>
+              <BarAndLine
+                xAxisPropType="time"
+                :dataSource="get(mockGasUnitData, 'history')"
+                height="205px"
+                :chartsColumns="gasUnitOption"
+                :option="echatsOption"
+              />
+            </template>
+          </ventBox1>
+        </template>
+        <ventBox1 class="vent-margin-t-10">
+          <template #title>
+            <div>单元瓦斯累计抽采量</div>
+          </template>
+          <template #container>
+            <CustomChart :chart-config="gasUnitPieOption" :chart-data="mockPieData" height="220px" />
+          </template>
+        </ventBox1>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import CustomBadges from './customHeader.vue';
+  import { gasUnitOption, headerBadges, mockGasUnitData, gasUnitBarOption, mockData, gasUnitPieOption, mockPieData } from '../gasAssessment.data';
+  import ListItem from '@/views/vent/gas/components/list/listItem.vue';
+  import { get } from '@/utils/ventutil';
+  import CustomChart from '@/views/vent/home/configurable/components/detail/CustomChart.vue';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  const echatsOption = {
+    grid: {
+      top: '70px',
+      left: '0px',
+      right: '30px',
+      bottom: '10px',
+      containLabel: true,
+    },
+    legend: {
+      top: '5',
+    },
+  };
+  const loading = ref(false);
+  const dataSource = ref({});
+  const unitNum = ref(5);
+  // // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = setTimeout(
+        async () => {
+          if (timer) {
+            timer = null;
+          }
+          await getMonitor();
+          // loading.value = false;
+        },
+        flag ? 0 : 1000
+      );
+    }
+  }
+
+  onMounted(async () => {
+    timer = null;
+    await getMonitor(true);
+    loading.value = true;
+  });
+</script>
+
+<style lang="less" scoped>
+  @ventSpace: zxm;
+  @import '/@/design/vent/modal.less';
+  @import '@/views/vent/monitorManager/comment/less/workFace.less';
+  .monitor-container {
+    height: 850px;
+    pointer-events: none;
+  }
+  .modal-monitor {
+    position: absolute;
+    z-index: -1;
+    flex-direction: row-reverse;
+    .main-container {
+      background-color: #00000078;
+    }
+    .monitor-item {
+      width: 180px;
+      display: flex;
+      flex-direction: row;
+      width: auto;
+      margin-bottom: 3px;
+      .monitor-title {
+        width: 120px;
+        color: #7af5ff;
+        font-weight: 400;
+        font-size: 13px;
+      }
+      .monitor-val {
+        color: #ffb700;
+        display: flex;
+        width: auto;
+
+        .val {
+          width: 60px;
+          font-size: 13px;
+          text-align: center;
+        }
+
+        .unit {
+          color: #ffffffbb;
+          font-size: 13px;
+        }
+      }
+    }
+    .title {
+      text-align: center;
+    }
+  }
+  .left-box,
+  .right-box {
+    width: 380px !important;
+  }
+  .gas-pump-item {
+    padding: 3px 0;
+  }
+
+  .param-set {
+    color: #45d3fd;
+    cursor: pointer;
+    &:hover {
+      color: #38a6c8;
+    }
+  }
+
+  .input-item {
+    margin: 3px 0 !important;
+    .value {
+      width: 80px;
+      text-align: center;
+    }
+  }
+  .data-group {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding-bottom: 8px;
+    .data-item {
+      width: calc(50% - 10px);
+      display: flex;
+      justify-content: space-between;
+      line-height: 24px;
+      background-image: linear-gradient(to right, #39a3ff00, #39a3ff10, #39a3ff02);
+      margin: 4px 0;
+    }
+    .value {
+      color: #00eefffe;
+    }
+    .data-item1 {
+      width: 100%;
+      line-height: 24px;
+      background-image: linear-gradient(to right, #39a3ff00, #39a3ff10, #39a3ff02);
+      margin: 4px 0;
+    }
+  }
+
+  .base-title {
+    line-height: 26px;
+    position: relative;
+    padding-left: 15px;
+    color: #9bf2ff;
+    &::after {
+      content: '';
+      position: absolute;
+      display: block;
+      width: 4px;
+      height: 12px;
+      top: 8px;
+      left: 5px;
+      background: #45d3fd;
+      border-radius: 4px;
+    }
+  }
+
+  .detail {
+    border: 1px solid #9bf2ff88;
+    padding: 0 5px;
+    background-color: #ffffff11;
+    margin-right: 4px;
+    &:hover {
+      background-color: #ffffff05;
+    }
+  }
+</style>

src/views/vent/gas/gasAssessment/components/gasPipingEcharts.vue

@@ -0,0 +1,289 @@
+<template>
+  <CustomBadges class="w-1710px ml-100px mt-50px" :badges="headerBadges" />
+  <div class="monitor-container">
+    <transition enter-active-class="animate__animated  animate__fadeInLeft" leave-active-class="animate__animated  animate__fadeOutLeft">
+      <div class="lr left-box" v-if="loading">
+        <ventBox1 class="vent-margin-t-10">
+          <template #title>
+            <div>甲烷浓度监测</div>
+          </template>
+          <template #container>
+            <BarAndLine
+              xAxisPropType="time"
+              :dataSource="mockGasPipingData"
+              height="205px"
+              :chartsColumns="gasPipingCH4Option"
+              :option="echatsOption"
+            />
+          </template>
+        </ventBox1>
+        <ventBox1 class="vent-margin-t-10">
+          <template #title>
+            <div>甲CO浓度监测</div>
+          </template>
+          <template #container>
+            <BarAndLine
+              xAxisPropType="time"
+              :dataSource="mockGasPipingCOData"
+              height="205px"
+              :chartsColumns="gasPipingCOOption"
+              :option="echatsOption"
+            />
+          </template>
+        </ventBox1>
+        <ventBox1 class="vent-margin-t-10">
+          <template #title>
+            <div>管路温度监测</div>
+          </template>
+          <template #container>
+            <BarAndLine
+              xAxisPropType="time"
+              :dataSource="mockGasPipingWdData"
+              height="205px"
+              :chartsColumns="gasPipingWdOption"
+              :option="echatsOption"
+            />
+          </template>
+        </ventBox1>
+      </div>
+    </transition>
+    <transition enter-active-class="animate__animated  animate__fadeInRight" leave-active-class="animate__animated  animate__fadeInRight">
+      <div class="lr right-box" v-if="loading">
+        <ventBox1 class="vent-margin-t-10">
+          <template #title>
+            <div>管路纯流量监测</div>
+          </template>
+          <template #container>
+            <BarAndLine
+              xAxisPropType="time"
+              :dataSource="mockGasPipingFlowData"
+              height="205px"
+              :chartsColumns="gasPipingFlowOption"
+              :option="echatsOption"
+            />
+          </template>
+        </ventBox1>
+        <ventBox1 class="vent-margin-t-10">
+          <template #title>
+            <div>管路累计抽采量</div>
+          </template>
+          <template #container>
+            <BarAndLine
+              xAxisPropType="time"
+              :dataSource="mockGasPipingCylData"
+              height="205px"
+              :chartsColumns="gasPipingCylOption"
+              :option="echatsOption"
+            />
+          </template>
+        </ventBox1>
+        <ventBox1 class="vent-margin-t-10">
+          <template #title>
+            <div>管路负压</div>
+          </template>
+          <template #container>
+            <BarAndLine
+              xAxisPropType="time"
+              :dataSource="mockGasPipingFyData"
+              height="205px"
+              :chartsColumns="gasPipingFyOption"
+              :option="echatsOption"
+            />
+          </template>
+        </ventBox1>
+        <!-- <ventBox1 class="vent-margin-t-10">
+          <template #title>
+            <div>单元瓦斯累计抽采量</div>
+          </template>
+          <template #container>
+            <CustomChart :chart-config="gasUnitPieOption" :chart-data="mockPieData" height="220px" />
+          </template>
+        </ventBox1> -->
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import CustomBadges from './customHeader.vue';
+  import {
+    gasPipingCylOption,
+    mockGasPipingCylData,
+    mockGasPipingFyData,
+    gasPipingFyOption,
+    mockGasPipingFlowData,
+    gasPipingFlowOption,
+    gasPipingCOOption,
+    mockGasPipingCOData,
+    headerBadges,
+    gasPipingWdOption,
+    mockGasPipingWdData,
+    gasPipingCH4Option,
+    mockGasPipingData,
+  } from '../gasAssessment.data';
+  import CustomChart from '@/views/vent/home/configurable/components/detail/CustomChart.vue';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  const echatsOption = {
+    grid: {
+      top: '60px',
+      left: '-20px',
+      right: '0px',
+      bottom: '10px',
+      containLabel: true,
+    },
+    legend: {
+      top: '5',
+    },
+  };
+  const loading = ref(false);
+  const dataSource = ref({});
+  const unitNum = ref(5);
+  // // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = setTimeout(
+        async () => {
+          if (timer) {
+            timer = null;
+          }
+          await getMonitor();
+          // loading.value = false;
+        },
+        flag ? 0 : 1000
+      );
+    }
+  }
+
+  onMounted(async () => {
+    timer = null;
+    await getMonitor(true);
+    loading.value = true;
+  });
+</script>
+
+<style lang="less" scoped>
+  @ventSpace: zxm;
+  @import '/@/design/vent/modal.less';
+  @import '@/views/vent/monitorManager/comment/less/workFace.less';
+  .monitor-container {
+    height: 850px;
+    pointer-events: none;
+  }
+  .modal-monitor {
+    position: absolute;
+    z-index: -1;
+    flex-direction: row-reverse;
+    .main-container {
+      background-color: #00000078;
+    }
+    .monitor-item {
+      width: 180px;
+      display: flex;
+      flex-direction: row;
+      width: auto;
+      margin-bottom: 3px;
+      .monitor-title {
+        width: 120px;
+        color: #7af5ff;
+        font-weight: 400;
+        font-size: 13px;
+      }
+      .monitor-val {
+        color: #ffb700;
+        display: flex;
+        width: auto;
+
+        .val {
+          width: 60px;
+          font-size: 13px;
+          text-align: center;
+        }
+
+        .unit {
+          color: #ffffffbb;
+          font-size: 13px;
+        }
+      }
+    }
+    .title {
+      text-align: center;
+    }
+  }
+  .left-box,
+  .right-box {
+    width: 380px !important;
+  }
+  .gas-pump-item {
+    padding: 3px 0;
+  }
+
+  .param-set {
+    color: #45d3fd;
+    cursor: pointer;
+    &:hover {
+      color: #38a6c8;
+    }
+  }
+
+  .input-item {
+    margin: 3px 0 !important;
+    .value {
+      width: 80px;
+      text-align: center;
+    }
+  }
+  .data-group {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding-bottom: 8px;
+    .data-item {
+      width: calc(50% - 10px);
+      display: flex;
+      justify-content: space-between;
+      line-height: 24px;
+      background-image: linear-gradient(to right, #39a3ff00, #39a3ff10, #39a3ff02);
+      margin: 4px 0;
+    }
+    .value {
+      color: #00eefffe;
+    }
+    .data-item1 {
+      width: 100%;
+      line-height: 24px;
+      background-image: linear-gradient(to right, #39a3ff00, #39a3ff10, #39a3ff02);
+      margin: 4px 0;
+    }
+  }
+
+  .base-title {
+    line-height: 26px;
+    position: relative;
+    padding-left: 15px;
+    color: #9bf2ff;
+    &::after {
+      content: '';
+      position: absolute;
+      display: block;
+      width: 4px;
+      height: 12px;
+      top: 8px;
+      left: 5px;
+      background: #45d3fd;
+      border-radius: 4px;
+    }
+  }
+
+  .detail {
+    border: 1px solid #9bf2ff88;
+    padding: 0 5px;
+    background-color: #ffffff11;
+    margin-right: 4px;
+    &:hover {
+      background-color: #ffffff05;
+    }
+  }
+</style>

src/views/vent/gas/gasAssessment/components/gasVideo.vue

@@ -0,0 +1,83 @@
+<template>
+  <CustomBadges class="w-1710px ml-100px mt-50px" :badges="headerBadges" />
+  <div class="monitor-container">
+    <transition enter-active-class="animate__animated  animate__fadeInLeft" leave-active-class="animate__animated  animate__fadeOutLeft">
+      <div class="lr left-box" v-if="loading">
+        <template v-for="unitIndex in unitNum" :key="unitIndex">
+          <ventBox1 v-if="unitIndex < 4" class="vent-margin-t-10">
+            <template #title>
+              <div>视频{{ unitIndex }}</div>
+            </template>
+            <template #container>
+              <div class="video-box"></div>
+            </template>
+          </ventBox1>
+        </template>
+      </div>
+    </transition>
+    <transition enter-active-class="animate__animated  animate__fadeInRight" leave-active-class="animate__animated  animate__fadeInRight">
+      <div class="lr right-box" v-if="loading">
+        <template v-for="unitIndex in unitNum" :key="unitIndex">
+          <ventBox1 v-if="unitIndex >= 4" class="vent-margin-t-10">
+            <template #title>
+              <div>视频{{ unitIndex }}</div>
+            </template>
+            <template #container>
+              <div class="video-box"></div>
+            </template>
+          </ventBox1>
+        </template>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import CustomBadges from './customHeader.vue';
+  import { gasUnitOption, headerBadges, mockGasUnitData, gasUnitBarOption, mockData, gasUnitPieOption, mockPieData } from '../gasAssessment.data';
+  const loading = ref(false);
+  const dataSource = ref({});
+  const unitNum = ref(5);
+  // // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = setTimeout(
+        async () => {
+          if (timer) {
+            timer = null;
+          }
+          await getMonitor();
+          // loading.value = false;
+        },
+        flag ? 0 : 1000
+      );
+    }
+  }
+
+  onMounted(async () => {
+    timer = null;
+    await getMonitor(true);
+    loading.value = true;
+  });
+</script>
+
+<style lang="less" scoped>
+  @ventSpace: zxm;
+  @import '/@/design/vent/modal.less';
+  @import '@/views/vent/monitorManager/comment/less/workFace.less';
+  .monitor-container {
+    height: 850px;
+    pointer-events: none;
+  }
+
+  .left-box,
+  .right-box {
+    width: 380px !important;
+  }
+  .video-box {
+    height: 200px;
+  }
+</style>

src/views/vent/gas/gasAssessment/gasAssessment.data.ts

@@ -16,10 +16,20 @@ export const monitorNav = [
     isShow: false,
   },
   {
-    title: '历史曲线',
-    pathName: 'unitEcharts',
+    title: '单元时程曲线',
+    pathName: 'gasEcharts',
     isShow: false,
   },
+  {
+    title: '管道参数监测',
+    pathName: 'gasPiping',
+    isShow: false,
+  },
+  {
+    title: '视频监测',
+    pathName: 'gasVideo',
+    isHover: false,
+  },
 ];
 
 export const echartsOption = reactive({
@@ -259,6 +269,61 @@ export const gasUnitMonitor = [
   },
 ];
 
+export const monitorPosData = [
+  {
+    title: '负压',
+    code: 'T0',
+    unit: 'KPa',
+  },
+  {
+    title: 'CH₄浓度',
+    code: 'T1',
+    unit: '%',
+  },
+  {
+    title: '流量',
+    code: 'T2',
+    unit: 'm³/min',
+  },
+  {
+    title: '管道温度',
+    code: 'CO2',
+    unit: '℃',
+  },
+  {
+    title: 'CO浓度',
+    code: 'gasC',
+    unit: 'ppm',
+  },
+];
+export const monitorValveData = [
+  {
+    title: '1#阀门',
+    code: 'T0',
+    unit: 'KPa',
+  },
+  {
+    title: '2#阀门',
+    code: 'T1',
+    unit: '%',
+  },
+  {
+    title: '3#阀门',
+    code: 'T2',
+    unit: 'm³/min',
+  },
+  {
+    title: '4#阀门',
+    code: 'CO2',
+    unit: '℃',
+  },
+  {
+    title: '5#阀门',
+    code: 'gasC',
+    unit: 'ppm',
+  },
+];
+
 export const gasParamData = [
   {
     title: '走向长度 (m)',
@@ -673,6 +738,7 @@ export const gasUnitOption = [
     dataIndex: 'flowNum',
   },
 ];
+
 export const mockGasUnitData = {
   history: [
     {
@@ -713,6 +779,477 @@ export const mockGasUnitData = {
     },
   ],
 };
+// 管道甲烷
+export const gasPipingCH4Option = [
+  {
+    legend: '主管道',
+    seriesName: '(%)',
+    ymax: 50,
+    yname: '%',
+    linetype: 'line',
+    yaxispos: 'left',
+    color: '#37BCF2',
+    sort: 1,
+    xRotate: 10,
+    dataIndex: 'CH40',
+  },
+  {
+    legend: '支路1',
+    seriesName: '(%)',
+    ymax: 50,
+    yname: '%',
+    linetype: 'line',
+    yaxispos: 'left',
+    color: '#FC4327',
+    sort: 1,
+    xRotate: 10,
+    dataIndex: 'CH41',
+  },
+  {
+    legend: '支路2',
+    seriesName: '(%)',
+    ymax: 50,
+    yname: '%',
+    linetype: 'line',
+    yaxispos: 'left',
+    color: '#91CC75',
+    sort: 1,
+    xRotate: 10,
+    dataIndex: 'CH42',
+  },
+];
+
+export const mockGasPipingData = [
+  {
+    time: '08:12:00',
+    CH40: '43',
+    CH41: '24.23',
+    CH42: '14.23',
+  },
+  {
+    time: '08:12:01',
+    CH40: '43',
+    CH41: '28.23',
+    CH42: '16.23',
+  },
+  {
+    time: '08:12:02',
+    CH40: '43',
+    CH41: '21.23',
+    CH42: '16.23',
+  },
+  {
+    time: '08:12:03',
+    CH40: '43',
+    CH41: '25.23',
+    CH42: '11.23',
+  },
+  {
+    time: '08:12:04',
+    CH40: '43',
+    CH41: '27.23',
+    CH42: '15.23',
+  },
+  {
+    time: '08:12:05',
+    CH40: '43',
+    CH41: '28.23',
+    CH42: '12.23',
+  },
+];
+// 管道一氧化碳
+export const gasPipingCOOption = [
+  {
+    legend: '主管道',
+    seriesName: '(ppm)',
+    ymax: 50,
+    yname: 'ppm',
+    linetype: 'line',
+    yaxispos: 'left',
+    color: '#37BCF2',
+    sort: 1,
+    xRotate: 10,
+    dataIndex: 'CO0',
+  },
+  {
+    legend: '支路1',
+    seriesName: '(ppm)',
+    ymax: 50,
+    yname: 'ppm',
+    linetype: 'line',
+    yaxispos: 'left',
+    color: '#FC4327',
+    sort: 1,
+    xRotate: 10,
+    dataIndex: 'CO1',
+  },
+  {
+    legend: '支路2',
+    seriesName: '(ppm)',
+    ymax: 50,
+    yname: 'ppm',
+    linetype: 'line',
+    yaxispos: 'left',
+    color: '#91CC75',
+    sort: 1,
+    xRotate: 10,
+    dataIndex: 'CO2',
+  },
+];
+
+export const mockGasPipingCOData = [
+  {
+    time: '08:12:00',
+    CO0: '43',
+    CO1: '24.23',
+    CO2: '14.23',
+  },
+  {
+    time: '08:12:01',
+    CO0: '21.98',
+    CO1: '18.23',
+    CO2: '16.23',
+  },
+  {
+    time: '08:12:02',
+    CO0: '23.89',
+    CO1: '21.23',
+    CO2: '16.23',
+  },
+  {
+    time: '08:12:03',
+    CO0: '20.23',
+    CO1: '15.23',
+    CO2: '11.23',
+  },
+  {
+    time: '08:12:04',
+    CO0: '24.75',
+    CO1: '17.23',
+    CO2: '15.23',
+  },
+  {
+    time: '08:12:05',
+    CO0: '23.45',
+    CO1: '18.23',
+    CO2: '12.23',
+  },
+];
+// 管道温度
+export const gasPipingWdOption = [
+  {
+    legend: '主管道',
+    seriesName: '(℃)',
+    ymax: 20,
+    yname: '℃',
+    linetype: 'line',
+    yaxispos: 'left',
+    color: '#37BCF2',
+    sort: 1,
+    xRotate: 10,
+    dataIndex: 'wd0',
+  },
+  {
+    legend: '支路1',
+    seriesName: '(℃)',
+    ymax: 20,
+    yname: '℃',
+    linetype: 'line',
+    yaxispos: 'left',
+    color: '#FC4327',
+    sort: 1,
+    xRotate: 10,
+    dataIndex: 'wd1',
+  },
+  {
+    legend: '支路2',
+    seriesName: '(℃)',
+    ymax: 20,
+    yname: '℃',
+    linetype: 'line',
+    yaxispos: 'left',
+    color: '#91CC75',
+    sort: 1,
+    xRotate: 10,
+    dataIndex: 'wd2',
+  },
+];
+
+export const mockGasPipingWdData = [
+  {
+    time: '08:12:00',
+    wd0: '22.23',
+    wd1: '18.32',
+    wd2: '14.23',
+  },
+  {
+    time: '08:12:01',
+    wd0: '14.23',
+    wd1: '18.23',
+    wd2: '16.23',
+  },
+  {
+    time: '08:12:02',
+    wd0: '18.98',
+    wd1: '15.23',
+    wd2: '16.23',
+  },
+  {
+    time: '08:12:03',
+    wd0: '22.45',
+    wd1: '15.23',
+    wd2: '11.23',
+  },
+  {
+    time: '08:12:04',
+    wd0: '23.87',
+    wd1: '19.23',
+    wd2: '15.23',
+  },
+  {
+    time: '08:12:05',
+    wd0: '25.42',
+    wd1: '21.23',
+    wd2: '12.23',
+  },
+];
+// 管道流量
+export const gasPipingFlowOption = [
+  {
+    legend: '主管道',
+    seriesName: '(m³/min)',
+    ymax: 20,
+    yname: 'm³/min',
+    linetype: 'line',
+    yaxispos: 'left',
+    color: '#37BCF2',
+    sort: 1,
+    xRotate: 10,
+    dataIndex: 'flow0',
+  },
+  {
+    legend: '支路1',
+    seriesName: '(m³/min)',
+    ymax: 20,
+    yname: 'm³/min',
+    linetype: 'line',
+    yaxispos: 'left',
+    color: '#FC4327',
+    sort: 1,
+    xRotate: 10,
+    dataIndex: 'flow1',
+  },
+  {
+    legend: '支路2',
+    seriesName: '(m³/min)',
+    ymax: 20,
+    yname: 'm³/min',
+    linetype: 'line',
+    yaxispos: 'left',
+    color: '#91CC75',
+    sort: 1,
+    xRotate: 10,
+    dataIndex: 'flow2',
+  },
+];
+
+export const mockGasPipingFlowData = [
+  {
+    time: '08:12:00',
+    flow0: '22.23',
+    flow1: '18.32',
+    flow2: '14.23',
+  },
+  {
+    time: '08:12:01',
+    flow0: '14.23',
+    flow1: '18.23',
+    flow2: '16.23',
+  },
+  {
+    time: '08:12:02',
+    flow0: '18.98',
+    flow1: '15.23',
+    flow2: '16.23',
+  },
+  {
+    time: '08:12:03',
+    flow0: '22.45',
+    flow1: '15.23',
+    flow2: '11.23',
+  },
+  {
+    time: '08:12:04',
+    flow0: '23.87',
+    flow1: '19.23',
+    flow2: '15.23',
+  },
+  {
+    time: '08:12:05',
+    flow0: '25.42',
+    flow1: '21.23',
+    flow2: '12.23',
+  },
+];
+
+// 管道流量
+export const gasPipingCylOption = [
+  {
+    legend: '主管道',
+    seriesName: '(m³)',
+    ymax: 20,
+    yname: 'm³',
+    linetype: 'line',
+    yaxispos: 'left',
+    color: '#37BCF2',
+    sort: 1,
+    xRotate: 10,
+    dataIndex: 'flow0',
+  },
+  {
+    legend: '支路1',
+    seriesName: '(m³)',
+    ymax: 20,
+    yname: 'm³',
+    linetype: 'line',
+    yaxispos: 'left',
+    color: '#FC4327',
+    sort: 1,
+    xRotate: 10,
+    dataIndex: 'flow1',
+  },
+  {
+    legend: '支路2',
+    seriesName: '(m³)',
+    ymax: 20,
+    yname: 'm³',
+    linetype: 'line',
+    yaxispos: 'left',
+    color: '#91CC75',
+    sort: 1,
+    xRotate: 10,
+    dataIndex: 'flow2',
+  },
+];
+
+export const mockGasPipingCylData = [
+  {
+    time: '08:12:00',
+    flow0: '13452',
+    flow1: '3452',
+    flow2: '9032.23',
+  },
+  {
+    time: '08:12:01',
+    flow0: '17452',
+    flow1: '3452',
+    flow2: '9032.23',
+  },
+  {
+    time: '08:12:02',
+    flow0: '14452',
+    flow1: '3452',
+    flow2: '9032.23',
+  },
+  {
+    time: '08:12:03',
+    flow0: '16452',
+    flow1: '3452',
+    flow2: '9032.23',
+  },
+  {
+    time: '08:12:04',
+    flow0: '19452',
+    flow1: '3452',
+    flow2: '9032.23',
+  },
+  {
+    time: '08:12:05',
+    flow0: '20452',
+    flow1: '3452',
+    flow2: '9032.23',
+  },
+];
+
+// 管道负压
+
+export const gasPipingFyOption = [
+  {
+    legend: '主管道',
+    seriesName: '(KPa)',
+    ymax: 30,
+    yname: 'KPa',
+    linetype: 'line',
+    yaxispos: 'left',
+    color: '#37BCF2',
+    sort: 1,
+    xRotate: 10,
+    dataIndex: 'fy0',
+  },
+  {
+    legend: '支路1',
+    seriesName: '(KPa)',
+    ymax: 30,
+    yname: 'KPa',
+    linetype: 'line',
+    yaxispos: 'left',
+    color: '#FC4327',
+    sort: 1,
+    xRotate: 10,
+    dataIndex: 'fy1',
+  },
+  {
+    legend: '支路2',
+    seriesName: '(KPa)',
+    ymax: 30,
+    yname: 'KPa',
+    linetype: 'line',
+    yaxispos: 'left',
+    color: '#91CC75',
+    sort: 1,
+    xRotate: 10,
+    dataIndex: 'fy2',
+  },
+];
+
+export const mockGasPipingFyData = [
+  {
+    time: '08:12:00',
+    fy0: '22.23',
+    fy1: '18.32',
+    fy2: '14.23',
+  },
+  {
+    time: '08:12:01',
+    fy0: '14.23',
+    fy1: '18.23',
+    fy2: '16.23',
+  },
+  {
+    time: '08:12:02',
+    fy0: '18.98',
+    fy1: '15.23',
+    fy2: '16.23',
+  },
+  {
+    time: '08:12:03',
+    fy0: '22.45',
+    fy1: '15.23',
+    fy2: '11.23',
+  },
+  {
+    time: '08:12:04',
+    fy0: '23.87',
+    fy1: '19.23',
+    fy2: '15.23',
+  },
+  {
+    time: '08:12:05',
+    fy0: '25.42',
+    fy1: '21.23',
+    fy2: '12.23',
+  },
+];
 
 export const unitHeaderBadges = ref([
   {

src/views/vent/gas/gasAssessment/index.vue

@@ -35,9 +35,18 @@
     <WorkFace class="point-event" v-if="pageType == 'workFace'" />
     <gasUnit class="point-event" v-if="pageType == 'gasUnit'" />
   </template>
+  <template v-if="activeKey == 'gasEcharts'">
+    <GasEcharts class="point-event" />
+  </template>
   <template v-if="activeKey == 'gasControl'">
     <GasControl class="point-event" />
   </template>
+  <template v-if="activeKey == 'gasPiping'">
+    <GasPiping class="point-event" />
+  </template>
+  <template v-if="activeKey == 'gasVideo'">
+    <GasVideo class="point-event" />
+  </template>
   <BottomMenu :navList="monitorNav" @change="changeActive" />
 </template>
 
@@ -49,8 +58,11 @@
   import { mountedThree, destroy, setModelType, setCss3D } from './threejs/gasAssessmen.threejs';
   import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
   import gasUnit from './components/gasUnit.vue';
+  import GasEcharts from './components/gasEcharts.vue';
   import GasControl from './components/gasControl.vue';
+  import GasPiping from './components/gasPipingEcharts.vue';
   import WorkFace from './components/workFace.vue';
+  import GasVideo from './components/gasVideo.vue';
   import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
 
   const activeKey = ref('gasAssessment');

src/views/vent/gas/gasAssessment/threejs/gasAssessmen.threejs.ts

@@ -55,13 +55,6 @@ const render = () => {
   }
 };
 
-export const setCss3D = () => {
-  workFaceObj?.setCss3D();
-};
-export const clearCss3D = () => {
-  workFaceObj?.clearCss3D();
-};
-
 // 切换风窗类型
 export const setModelType = (type, n = Math.ceil(Math.random() * 4)) => {
   return new Promise((resolve) => {

src/views/vent/gas/gasHome/gasHome.data.ts

@@ -1,20 +1,25 @@
 import { ref } from 'vue';
 export const navList = ref([
   {
-    title: '智能监测管控',
-    pathName: 'gasHome',
+    title: '抽采泵站管控',
+    pathName: 'gasPump',
     isHover: false,
   },
-  // {
-  //   title: '抽采泵站管控',
-  //   pathName: 'gasPump',
-  //   isHover: false,
-  // },
   {
     title: '抽采达标评判',
     pathName: 'gasStandard',
     isHover: false,
   },
+  {
+    title: '抽采管路',
+    pathName: 'gasPiping',
+    isHover: false,
+  },
+  {
+    title: '瓦斯监测预警',
+    pathName: 'gasAlarm',
+    isHover: false,
+  },
 ]);
 
 export const sysInfo = [

src/views/vent/gas/gasHome/index.vue

@@ -4,15 +4,10 @@
     <CustomHeader> 瓦斯抽采综合管控系统 </CustomHeader>
     <template v-if="activeKey == 'gasHome'">
       <VentModal />
-      <div class="gas-container">
-        <CustomBadges class="w-1710px ml-100px mt-50px" :badges="headerBadges" />
-        <GasMonitor v-if="dataSource" :dataSource="dataSource" />
-      </div>
+      <CustomBadges class="w-1710px ml-100px mt-50px" :badges="headerBadges" />
+      <GasMonitor v-if="dataSource" :dataSource="dataSource" />
     </template>
-    <template v-if="activeKey == 'gasStandard'">
-      <GasAssessment />
-    </template>
-    <BottomMenu :navList="navList" @change="changeActive" />
+    <BottomMenu :navList="navList" @change="changeActive" type="router" />
   </div>
 </template>
 <script lang="ts" setup>
@@ -21,15 +16,31 @@
   import CustomBadges from './components/customHeader.vue';
   import GasMonitor from './components/gasMonitor.vue';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
-  import GasAssessment from '../gasAssessment/index.vue';
   import { gasSystem } from './gasHome.api';
   import { unmountMicroApps } from '/@/qiankun';
   import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
   import { navList } from './gasHome.data';
+  import { useRouter } from 'vue-router';
+  const router = useRouter();
   const activeKey = ref('gasHome');
   const dataSource = ref<any | null>(null);
   function changeActive(activeValue) {
-    activeKey.value = activeValue;
+    if (activeValue == 'gasPump') {
+      const newPage = router.resolve({ path: '/gas/gas-pump-monitor/home' });
+      window.open(newPage.href, '_blank');
+    }
+    if (activeValue == 'gasStandard') {
+      const newPage = router.resolve({ path: '/gasAssessment/home' });
+      window.open(newPage.href, '_blank');
+    }
+    if (activeValue == 'gasPiping') {
+      const newPage = router.resolve({ path: '/micro-vent-3dModal/dashboard/analysis', query: { type: 'sysMonitor', deviceType: 'pipingpage' } });
+      window.open(newPage.href, '_blank');
+    }
+    if (activeValue == 'gasAlarm') {
+      const newPage = router.resolve({ path: '/gas/warn/home?p=0' });
+      window.open(newPage.href, '_blank');
+    }
   }
 
   const headerBadges = ref([

src/views/vent/monitorManager/workFaceMonitor/components/workFaceGasHome.vue

@@ -125,8 +125,6 @@ import ventBox1 from '/@/components/vent/ventBox1.vue'
 import { SvgIcon } from '/@/components/Icon';
 import { list } from '../workFace.api';
 import { gasMonitor, gasParamData, currentGasMonitor, gasPumpValve, gasPump, gasExtractionUnit, highTensionNum, lowTensionNum, gasPumpCtr, gasUnitDetail } from '../workFace.data'
-import {setCss3D, changeCss3D } from '../wokeFace.threejs'
-import { nextTick } from 'vue';
 
 const props = defineProps({
   deviceId: {
@@ -233,9 +231,6 @@ function toDetail() {
 
 watch(() => props.gasUnitNum, (val) => {
   monitorDataGroupNum.value = val
-  nextTick(() => {
-    setCss3D()
-  })
 })
 
 onBeforeMount(() => {
@@ -246,9 +241,6 @@ onMounted(async () => {
   loading.value = true;
   timer = null
   await getMonitor(true)
-  nextTick(() => {
-    setCss3D()
-  })
   
   // changeCss3D(true)
 });

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

@@ -47,7 +47,7 @@
 
 <script setup lang="ts">
 import { onBeforeMount, ref, onMounted, onUnmounted, nextTick } from 'vue';
-import { mountedThree, destroy, setModelType, clearCss3D, showOrHideGasPlane } from './wokeFace.threejs';
+import { mountedThree, destroy, setModelType, showOrHideGasPlane } from './wokeFace.threejs';
 import { getTableList, systemList } from './workFace.api';
 import { monitorNav } from './workFace.data'
 import customHeader from '/@/components/vent/customHeader.vue';
@@ -100,7 +100,6 @@ function changeActive(activeValue) {
     
   }else{
     loading.value = false
-    clearCss3D()
   }
   nextTick(() => {
     setModelType(modalType, gasUnitNum.value, monitorActive.value == 4 ? true : false)
@@ -182,7 +181,6 @@ function changeMonitor(nav) {
     }else{
       monitorActive.value = index
       if (monitorActive.value != 4) {
-        clearCss3D()
       }
     }
   })

src/views/vent/monitorManager/workFaceMonitor/wokeFace.threejs.ts

@@ -52,23 +52,14 @@ const render = () => {
   }
 };
 
-export const setCss3D = () => {
-  workFaceObj?.setCss3D();
-};
-export const clearCss3D = () => {
-  workFaceObj?.clearCss3D();
-};
-
 // 切换风窗类型
 export const setModelType = (type, n = Math.ceil(Math.random() * 4), isShowPlane) => {
   fiberType = type;
   return new Promise((resolve) => {
     if (workFaceObj) {
-      workFaceObj.clearPlanes();
       group = workFaceObj.group;
 
       workFaceObj.setModalType(type);
-      workFaceObj?.setPlanes(n);
       showOrHideGasPlane(isShowPlane);
       const oldControlsPosition = { x: 0.055, y: 0.062, z: 0.117 };
       const oldCameraPosition = { x: 0.055, y: 0.062, z: 0.117 };
@@ -119,7 +110,7 @@ export const mountedThree = () => {
 export const destroy = () => {
   if (model) {
     model.isRender = false;
-    workFaceObj.destroy();
+    if (workFaceObj) workFaceObj.destroy();
     workFaceObj = undefined;
     model.destroy();
     model = null;

src/views/vent/monitorManager/workFaceMonitor/workFace.threejs.base.ts

@@ -1,14 +1,7 @@
 import * as THREE from 'three';
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
-import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
-import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
 import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js';
-import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js';
-import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';
-import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass.js';
-import { setModalCenter, setTag3D, gradientColors } from '/@/utils/threejs/util';
-import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
-import { number } from 'vue-types';
+import { setModalCenter } from '/@/utils/threejs/util';
 
 // import * as dat from 'dat.gui';
 // const gui = new dat.GUI();
@@ -43,26 +36,10 @@ class WorkFace {
     this.group.name = this.modelName;
   }
   addLight() {
-    // const _this = this;
     const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
     directionalLight.position.set(-196, 150, 258);
     this.group.add(directionalLight);
     directionalLight.target = this.group;
-
-    // const pointLight = new THREE.PointLight(0xffffff, 1, 1000);
-    // pointLight.position.set(12, 51, -27);
-    // pointLight.shadow.bias = 0.05;
-    // this.group.add(pointLight);
-
-    // gui.add(directionalLight.position, 'x', -1000, 1000).onChange(() => {
-    //   _this.render();
-    // });
-    // gui.add(directionalLight.position, 'y', -1000, 1000).onChange(() => {
-    //   _this.render();
-    // });
-    // gui.add(directionalLight.position, 'z', -1000, 1000).onChange(() => {
-    //   _this.render();
-    // });
   }
   setControls = () => {
     if (this.model && this.model.orbitControls) {
@@ -77,262 +54,6 @@ class WorkFace {
 
   render() {
     this.model.renderer?.render(this.model.scene as THREE.Scene, this.model.camera as THREE.PerspectiveCamera);
-    // const _this = this;
-    // if (this.model && this.model.scene.getObjectByName(this.modelName)) {
-    //   this.group?.traverse((obj) => {
-    //     _this.darkenNonBloomed(obj);
-    //   });
-    //   this.bloomComposer?.render();
-    //   this.group?.traverse((obj) => {
-    //     _this.restoreMaterial(obj);
-    //   });
-    //   this.finalComposer?.render();
-    // }
-  }
-  // 绘制抽采单元
-  setPlanes = (n, colors = new Array(n).fill(new THREE.Color('rgb(100%, 0%, 0%)'))) => {
-    colors = gradientColors('#00FF2C', '#FF0000', n, 2);
-    this.planeNum = n;
-    const lenScale = 0.77 / n;
-    const planeGeo = new THREE.PlaneGeometry();
-    planeGeo.applyMatrix4(new THREE.Matrix4().makeTranslation(-1, 0, 0));
-    for (let i = 0; i < n; i++) {
-      const material = new THREE.MeshBasicMaterial({ color: colors[i], transparent: true, opacity: 0.6, depthTest: false, depthWrite: false });
-      const plane = new THREE.Mesh(planeGeo, material);
-      plane.name = 'unit' + i;
-      plane.rotation.x = -Math.PI / 2;
-      plane.scale.set(lenScale - 0.001, 0.375, 1.0);
-      plane.position.set(0.282 - lenScale * (i - 0.5), 0.015, 0.142);
-      this.planeGroup.add(plane);
-    }
-  };
-
-  // 清除抽采单元绘制面
-  clearPlanes = () => {
-    for (let i = 0; i < this.planeNum; i++) {
-      const plane = this.planeGroup.getObjectByName(`unit${i}`);
-      const label = this.planeGroup.getObjectByName(`planeText${i}`);
-      if (plane) this.planeGroup.remove(plane);
-      if (label) this.planeGroup.remove(label);
-    }
-  };
-  // 抽采单元内容显示
-  setCss3D = () => {
-    const obj = this.group.getObjectByName(`unitText`);
-    if (!obj) {
-      const element = document.getElementById(`gasUnitBox`) as HTMLElement;
-      if (element) {
-        const gasUnitCSS3D = new CSS3DObject(element);
-        gasUnitCSS3D.name = `unitText`;
-        gasUnitCSS3D.scale.set(0.0009, 0.0009, 0.0009);
-        gasUnitCSS3D.position.set(-0.1, 0.11, 0.05);
-        gasUnitCSS3D.lookAt(-0.1, 0.5, 1);
-        this.planeGroup.add(gasUnitCSS3D);
-      }
-    }
-    for (let i = 0; i < this.planeNum; i++) {
-      const lenScale = 0.77 / this.planeNum;
-      const label = setTag3D(`抽采单元${i + 1}`, 'gas_unit_text');
-      label.scale.set(0.0018, 0.0018, 1); //根据相机渲染范围控制HTML 3D标签尺寸
-      label.position.set(0.282 - lenScale * (i + 0.5), 0.015, 0.142);
-      label.name = 'planeText' + i;
-      this.planeGroup.add(label);
-    }
-  };
-  // 显示或隐藏抽采单元显示内容
-  changeCss3D = (isHide) => {
-    for (let i = 0; i < this.planeNum; i++) {
-      const obj = this.group.getObjectByName(`unitText${i}`);
-      if (obj) {
-        obj.visible = isHide;
-      }
-    }
-  };
-  // 清除抽采单元显示内容
-  clearCss3D = () => {
-    const obj = this.group.getObjectByName(`unitText`);
-    if (obj) this.group.remove(obj);
-    const element = document.getElementById(`gasUnitBox`) as HTMLElement;
-    if (element) {
-      element.remove();
-    }
-    for (let i = 0; i < this.planeNum; i++) {
-      const label = this.planeGroup.getObjectByName(`planeText${i}`);
-      if (label) this.planeGroup.remove(label);
-    }
-  };
-
-  setRenderPass = () => {
-    this.bloomLayer.set(this.glob.BLOOM_SCENE);
-
-    const params = {
-      bloomStrength: 2.5,
-      bloomThreshold: 0,
-      bloomRadius: 0,
-    };
-    const renderScene = new RenderPass(this.model.scene, this.model.camera);
-
-    const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
-
-    bloomPass.strength = params.bloomStrength;
-    bloomPass.radius = params.bloomRadius;
-    bloomPass.threshold = params.bloomThreshold;
-
-    this.bloomComposer = new EffectComposer(this.model.renderer);
-    this.bloomComposer.renderToScreen = false;
-    this.bloomComposer.addPass(renderScene);
-    this.bloomComposer.addPass(bloomPass);
-
-    const finalPass = new ShaderPass(
-      new THREE.ShaderMaterial({
-        uniforms: {
-          baseTexture: { value: null },
-          bloomTexture: { value: this.bloomComposer.renderTarget2.texture },
-        },
-        vertexShader: `
-      varying vec2 vUv;
-
-      void main() {
-        vUv = uv;
-        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
-      }`,
-        fragmentShader: `uniform sampler2D baseTexture;
-      uniform sampler2D bloomTexture;
-
-      varying vec2 vUv;
-
-      void main() {
-        gl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0, 1.0, 1.0, 0.0 ) * texture2D( bloomTexture, vUv ) );
-      }`,
-        defines: {},
-      }),
-      'baseTexture'
-    );
-    // const gammaCorrection = new ShaderPass(GammaCorrectionShader);
-    const outputPass = new OutputPass();
-    finalPass.needsSwap = true;
-
-    this.model.renderer.toneMapping = THREE.ReinhardToneMapping;
-    this.finalComposer = new EffectComposer(this.model.renderer);
-    this.finalComposer.addPass(renderScene);
-
-    this.finalComposer.addPass(outputPass);
-    this.finalComposer.addPass(finalPass);
-
-    const effectFXAA = new ShaderPass(FXAAShader);
-    effectFXAA.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
-    this.finalComposer.addPass(effectFXAA);
-
-    // this.outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), this.model.scene, this.model.camera);
-    // this.finalComposer.addPass(this.outlinePass);
-  };
-
-  getPositions(num = 40) {
-    const curve1 = new THREE.LineCurve3(new THREE.Vector3(-595.2, 0.046, -2.863), new THREE.Vector3(595.2, 0.046, -2.863)); // 前
-    const curve2 = new THREE.LineCurve3(new THREE.Vector3(-595.065, 0.014, 1.696), new THREE.Vector3(595.048, 0.014, 1.696)); // 中
-    const curve3 = new THREE.LineCurve3(new THREE.Vector3(0.0, 0.0, 190.611), new THREE.Vector3(0.0, 0.0, -190.611)); // 后‘
-
-    const len1 = curve1.getLength();
-    const len2 = curve2.getLength();
-    const len3 = curve3.getLength();
-
-    const unit = (len1 + len2 + len3) / num;
-    const num1 = Math.floor(len1 / unit);
-    const num2 = Math.floor(len2 / unit);
-    const num3 = Math.floor(len3 / unit);
-
-    const points1 = curve1.getPoints(num1);
-    const points2 = curve2.getPoints(num2);
-    const points3 = curve3.getPoints(num3);
-
-    this.positions = [points1, points2, points3];
-  }
-
-  drawSpheres = () => {
-    const _this = this;
-    const pointLines = new THREE.Object3D();
-    pointLines.name = 'pointLines';
-    return new Promise((resolve) => {
-      new THREE.TextureLoader().load('/model/img/texture-smoke.png', (texture) => {
-        const material = new THREE.PointsMaterial({
-          color: '#FFFFFF',
-          size: 0.008,
-          map: texture,
-          opacity: 0.8,
-          transparent: true, // 开启透明度
-        });
-
-        _this.positions.forEach((position, index) => {
-          const geometry = new THREE.BufferGeometry();
-          geometry.setFromPoints(position);
-          const points = new THREE.Points(geometry, material);
-          points.renderOrder = 0;
-          index == 0 ? (points.name = 'line_q') : index == 1 ? (points.name = 'line_h') : (points.name = 'line_z');
-          let opticalfiber;
-
-          if (index == 0) {
-            points.name = 'line_q';
-            opticalfiber = this.group.getObjectByName('opticalfiber03');
-          } else if (index == 1) {
-            points.name = 'line_h';
-            opticalfiber = this.group.getObjectByName('opticalfiber01');
-          } else {
-            points.name = 'line_z';
-            opticalfiber = this.group.getObjectByName('opticalfiber02');
-          }
-
-          if (opticalfiber) points.applyMatrix4(opticalfiber.matrix);
-          const box = new THREE.Box3();
-          box.setFromObject(points);
-          // points.geometry.boundingBox?.set(box);
-
-          pointLines.add(points);
-          points.layers.enable(_this.glob.BLOOM_SCENE);
-        });
-
-        this.group.add(pointLines);
-
-        resolve(null);
-        texture.dispose();
-      });
-    });
-  };
-
-  darkenNonBloomed(obj) {
-    if (obj.isMesh && this.bloomLayer.test(obj.layers) === false) {
-      const opacity = obj.material.opacity;
-      this.materials[obj.uuid] = obj.material;
-      obj.material = this.darkMaterial.clone();
-      obj.material.opacity = opacity;
-    }
-  }
-
-  restoreMaterial(obj) {
-    if (this.materials[obj.uuid]) {
-      obj.material = this.materials[obj.uuid];
-      delete this.materials[obj.uuid];
-    }
-  }
-
-  resetMesh() {
-    // const opticalFiber = this.group.getObjectByName('opticalfiber');
-    const optical = this.group?.getObjectByName('optical_fiber_02');
-    const optical1 = this.group?.getObjectByName('optical_fiber_01');
-    const optical2 = this.group?.getObjectByName('optical_fiber_03');
-    if (optical && optical1 && optical2) {
-      optical.renderOrder = 100;
-      optical1.renderOrder = 100;
-      optical2.renderOrder = 100;
-      optical.material =
-        optical1.material =
-        optical2.material =
-          new THREE.MeshStandardMaterial({
-            color: 0x555555,
-            side: THREE.DoubleSide,
-            transparent: true,
-            opacity: 0.45,
-          });
-    }
   }
 
   /* 点击 */
@@ -358,6 +79,7 @@ class WorkFace {
   mouseUpModel() {
     //
   }
+
   setThreePlane() {
     const gltfModal = this.group.getObjectByName('workFace');
     const PouMian01 = gltfModal?.getObjectByName('PouMian01');
@@ -539,6 +261,7 @@ class WorkFace {
     mesh1.position.setZ(-1);
     DiXing?.add(mesh1);
   }
+
   setModalType(modalType) {
     // debugger;
     const gltfModal = this.group.getObjectByName('workFace');
@@ -574,13 +297,9 @@ class WorkFace {
         this.group.name = this.modelName;
         setModalCenter(this.group);
         this.group.scale.set(2.5, 2.5, 2.5);
-        // this.resetMesh();
-        this.getPositions(this.glob.N);
         this.addLight();
         this.setThreePlane();
         this.setControls();
-        // this.drawSpheres();
-
         resolve(null);
       });
     });