[Wip 0000] 对接瓦斯抽采泵相关内容

src/hooks/vent/useSystemSelect.ts

@@ -6,12 +6,18 @@ type OptionType = { id: string; strsystype: string; systemname: string };
 const getTableList = (params) => defHttp.get({ url: '/safety/ventanalyManageSystem/list', params });
 const systemList = (params) => defHttp.post({ url: '/ventanaly-device/monitor/device', params });
 
+/**
+ * 用于setup关于系统设备下拉框相关的内容
+ * @param sysType 对应的设备/类型码，可在设备管理 -> 设备类型管理里查阅
+ * @param changeModalType 即 optionValue（选择了的设备）变化后的回调，参数为该 option
+ */
 export function useSystemSelect(sysType: string, changeModalType?: (param) => {}) {
   const options = ref<OptionType[]>([]);
   const optionValue = ref('');
   const deviceList = ref<DeviceType[]>([]);
   const deviceActive = ref('');
   const deviceType = ref('');
+  const deviceValue = ref({});
   const isRefresh = ref(true);
 
   async function getDeviceList() {
@@ -33,6 +39,7 @@ export function useSystemSelect(sysType: string, changeModalType?: (param) => {}
     });
     deviceList.value = deviceArr;
     deviceActive.value = deviceArr[0].deviceType;
+    console.log('debug', deviceList.value, deviceActive.value);
     deviceChange(0);
   }
 
@@ -50,7 +57,8 @@ export function useSystemSelect(sysType: string, changeModalType?: (param) => {}
   }
 
   function deviceChange(index) {
-    deviceActive.value = deviceType.value = deviceList.value[index]['deviceType'];
+    deviceValue.value = deviceList.value[index];
+    deviceActive.value = deviceType.value = deviceValue.value['deviceType'];
     isRefresh.value = false;
     nextTick(() => {
       isRefresh.value = true;
@@ -66,5 +74,20 @@ export function useSystemSelect(sysType: string, changeModalType?: (param) => {}
     getDeviceList();
   }
 
-  return { options, optionValue, deviceList, deviceActive, deviceType, isRefresh, getSysDataSource, getSelectRow, deviceChange };
+  return {
+    /** 下拉框选项 */
+    options,
+    /** 下拉框目前选择的值 */
+    optionValue,
+    /** 设备列表 */
+    deviceList,
+    deviceActive,
+    deviceType,
+    isRefresh,
+    /** 选中了的具体设备 */
+    deviceValue,
+    getSysDataSource,
+    getSelectRow,
+    deviceChange,
+  };
 }

src/views/vent/gas/gasPumpMonitor/components/monitor.vue

@@ -54,7 +54,8 @@
 </template>
 
 <script setup lang="ts" name="gas-pump-monitor">
-  import { ref, onMounted, defineProps, computed } from 'vue';
+  import _ from 'lodash';
+  import { ref, defineProps, computed } from 'vue';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
   import List from '@/views/vent/gas/components/list/index.vue';
   import BaseTab from '@/views/vent/gas/components/tab/baseTab.vue';
@@ -74,9 +75,10 @@
     LPumpCategoryConfig,
   } from '../gasPumpMonitor.data';
 
-  defineProps({
-    deviceId: {
-      type: String,
+  const props = defineProps({
+    device: {
+      type: Object,
+      default: () => {},
       require: true,
     },
   });
@@ -92,11 +94,12 @@
 
   // const pump = ref({});
   // 将列表配置项转换为列表可用的prop
-  function transConfigToProp(config) {
+  function transConfigToProp(config, source) {
+    console.log('debug', source);
     return config.map((c) => {
       return {
         ...c,
-        value: c.label,
+        value: _.get(c.prop, source),
         label: c.label,
       };
     });
@@ -105,52 +108,50 @@
   // 各个模块的配置项
   const pumpListProp = computed(() => {
     return {
-      items: transConfigToProp(pumpListConfig),
+      items: transConfigToProp(pumpListConfig, props.device),
     };
   });
   const pumpStationListProp = computed(() => {
     return {
-      items: transConfigToProp(pumpStationListConfig),
+      items: transConfigToProp(pumpStationListConfig, props.device),
     };
   });
   const pumpStatusProp = computed(() => {
     return {
       status: statusConfig as any,
-      items: transConfigToProp(pumpStatusConfig),
+      items: transConfigToProp(pumpStatusConfig, props.device),
     };
   });
   const waterPumpStatusProp = computed(() => {
     return {
       status: statusConfig as any,
-      items: transConfigToProp(waterPumpStatusConfig),
+      items: transConfigToProp(waterPumpStatusConfig, props.device),
     };
   });
   const HPumpStatusProp = computed(() => {
     return {
       status: statusConfig as any,
-      items: transConfigToProp(HPumpStationListItems),
+      items: transConfigToProp(HPumpStationListItems, props.device),
     };
   });
   const LPumpStatusProp = computed(() => {
     return {
       status: statusConfig as any,
-      items: transConfigToProp(LPumpStationListItems),
+      items: transConfigToProp(LPumpStationListItems, props.device),
     };
   });
 
   // 告示板相关字段
   const pumpCategoryProp = computed(() => {
     return {
-      categoryTop: transConfigToProp(HPumpCategoryConfig),
-      categoryButtom: transConfigToProp(LPumpCategoryConfig),
+      categoryTop: transConfigToProp(HPumpCategoryConfig, props.device),
+      categoryButtom: transConfigToProp(LPumpCategoryConfig, props.device),
     };
   });
 
   // 模态框相关
   const reverseModalVisible = ref(false);
   const switchModalVisible = ref(false);
-
-  onMounted(async () => {});
 </script>
 
 <style lang="less" scoped>

src/views/vent/gas/gasPumpMonitor/components/monitorChart.vue

@@ -37,8 +37,8 @@
   import { LimitedArray } from '/@/utils/limitedArray';
   import { onMounted, onUnmounted, ref } from 'vue';
   defineProps({
-    deviceId: {
-      type: String,
+    device: {
+      type: Object,
       require: true,
     },
   });
@@ -57,7 +57,6 @@
         valueB: Math.floor(Math.random() * 10),
         date: new Date().getSeconds().toString(),
       };
-      console.log('debug ', testobj, testChartData.value);
       testChartData.value.push(testobj);
     }, 2000);
   });

src/views/vent/gas/gasPumpMonitor/gasPumpMonitor.api.ts

@@ -0,0 +1,16 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  list = '/ventanaly-device/monitor/device',
+  baseList = '/safety/ventanalyDeviceInfo/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 });

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

@@ -4,10 +4,10 @@
     <customHeader :fieldNames="calcFieldNames" :options="options" @change="getSelectRow" :optionValue="optionValue">瓦斯抽采泵监测系统</customHeader>
     <div class="center-container">
       <template v-if="activeKey == 'deviceMonitor'">
-        <GasPumpMonitor :deviceId="optionValue" />
+        <GasPumpMonitor :device="deviceValue" />
       </template>
       <template v-if="activeKey == 'monitorChart'">
-        <GasMonitorChart :deviceId="optionValue" />
+        <GasMonitorChart :device="deviceValue" />
       </template>
       <div v-else class="history-group">
         <div class="device-button-group" v-if="deviceList.length > 0 && activeKey !== 'faultRecord'">
@@ -46,8 +46,8 @@
 
   const activeKey = ref('deviceMonitor');
 
-  const { options, optionValue, deviceType, isRefresh, deviceActive, deviceList, getSelectRow, getSysDataSource, deviceChange } =
-    useSystemSelect('sys_surface_caimei');
+  const { options, optionValue, deviceType, isRefresh, deviceActive, deviceList, deviceValue, getSelectRow, getSysDataSource, deviceChange } =
+    useSystemSelect('sys_gasstation');
 
   function changeActive(activeValue) {
     activeKey.value = activeValue;
@@ -61,8 +61,8 @@
     return { label: 'systemname', value: 'id', options: 'children' };
   });
 
-  onMounted(async () => {
-    await getSysDataSource();
+  onMounted(() => {
+    getSysDataSource();
   });
 </script>
 

src/views/vent/gas/gasPumpSetting/components/settingForm.vue

@@ -57,7 +57,7 @@
     labelCol: { span: 0 },
     wrapperCol: { span: 24 },
     baseColProps: {
-      flex: '20%',
+      flex: '16.6667%',
     },
   };
 

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

@@ -151,35 +151,59 @@ export const calculationFormSchema: FormSchema[] = [
     slot: 'input',
   },
   {
-    label: '单元钻孔抽采时间差异系数',
-    field: 'differenceExtractionTime',
+    label: '煤的灰分',
+    field: 'Ad',
     component: 'Input',
     slot: 'input',
   },
   {
-    label: '围岩瓦斯涌出影响系数',
+    label: 'K1',
     field: 'K1',
     component: 'Input',
     slot: 'input',
   },
   {
-    label: '采区内准备巷道预排瓦斯对开采层瓦斯涌出影响系数',
+    label: 'K2',
     field: 'K2',
     component: 'Input',
     slot: 'input',
   },
   {
-    label: '放落煤体破碎度对放顶煤瓦斯涌出影响系数',
+    label: 'K3',
     field: 'K3',
     component: 'Input',
     slot: 'input',
   },
   {
-    label: '留煤瓦斯涌出不均衡系数',
+    label: 'K4',
     field: 'K4',
     component: 'Input',
     slot: 'input',
   },
+  {
+    label: 'Q',
+    field: 'Q',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: 'R',
+    field: 'R',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '吸附常数a',
+    field: 'a',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '吸附常数b',
+    field: 'b',
+    component: 'Input',
+    slot: 'input',
+  },
 ];
 
 /** 抽采单元参数表单配置项 */

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

@@ -1,252 +1,285 @@
 <template>
-  <div class="bg"
-    style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
+  <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
     <a-spin :spinning="loading" />
-    <div id="gas3DCSS" v-show="activeKey == 'monitor' && !loading && currentDeviceType == 'pump_under'" style="width: 100%; height: 100%; top:0; left: 0; position: absolute; overflow: hidden;">
+    <div
+      id="gas3DCSS"
+      v-show="activeKey == 'monitor' && !loading && currentDeviceType == 'pump_under'"
+      style="width: 100%; height: 100%; top: 0; left: 0; position: absolute; overflow: hidden"
+    >
     </div>
     <div id="gasPump3D" v-show="activeKey == 'monitor'" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
-    
   </div>
   <div class="scene-box">
-    <customHeader :fieldNames="{ label: 'strinstallpos', value: 'deviceID', options: 'children' }" :options = 'options' @change="getSelectRow" :optionValue="optionValue">瓦斯抽采泵站监测与管控</customHeader>
+    <customHeader
+      :fieldNames="{ label: 'strinstallpos', value: 'deviceID', options: 'children' }"
+      :options="options"
+      @change="getSelectRow"
+      :optionValue="optionValue"
+      >瓦斯抽采泵站监测与管控</customHeader
+    >
     <div class="center-container">
-      <gasPumpHome v-if="activeKey == 'monitor'" :deviceId = 'optionValue' :device-type="currentDeviceType" />
+      <gasPumpHome v-if="activeKey == 'monitor'" :deviceId="optionValue" :device-type="currentDeviceType" />
       <div v-else class="history-group">
         <div class="device-button-group" v-if="deviceList.length > 0">
-          <div class="device-button" :class="{ 'device-active': deviceActive == device.deviceType }" v-for="(device, index) in deviceList" :key="index" @click="deviceChange(index)">{{ device.deviceName }}</div>
+          <div
+            class="device-button"
+            :class="{ 'device-active': deviceActive == device.deviceType }"
+            v-for="(device, index) in deviceList"
+            :key="index"
+            @click="deviceChange(index)"
+            >{{ device.deviceName }}</div
+          >
         </div>
-        <gasPumpHistory v-if="activeKey == 'monitor_history'" ref="historyTable" class="vent-margin-t-20"  :device-type="currentDeviceType" :device-id="optionValue"/>
-        <gasPumpHandleHistoryVue v-if="activeKey == 'handler_history'" ref="alarmHistoryTable" class="vent-margin-t-20" :deviceId = 'optionValue' :device-type="currentDeviceType" />
-        <gasPumpAlarmHistory v-if="activeKey == 'faultRecord'" ref="handlerHistoryTable" class="vent-margin-t-20" :deviceId = 'optionValue' :device-type="currentDeviceType"/>
-      </div>      
+        <gasPumpHistory
+          v-if="activeKey == 'monitor_history'"
+          ref="historyTable"
+          class="vent-margin-t-20"
+          :device-type="currentDeviceType"
+          :device-id="optionValue"
+        />
+        <gasPumpHandleHistoryVue
+          v-if="activeKey == 'handler_history'"
+          ref="alarmHistoryTable"
+          class="vent-margin-t-20"
+          :deviceId="optionValue"
+          :device-type="currentDeviceType"
+        />
+        <gasPumpAlarmHistory
+          v-if="activeKey == 'faultRecord'"
+          ref="handlerHistoryTable"
+          class="vent-margin-t-20"
+          :deviceId="optionValue"
+          :device-type="currentDeviceType"
+        />
+      </div>
     </div>
-    <BottomMenu @change="changeActive"/>
+    <BottomMenu @change="changeActive" />
   </div>
-  
 </template>
 
 <script setup lang="ts">
-import customHeader from '/@/components/vent/customHeader.vue';
-import { onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw } from 'vue';
-import { list } from './gasPump.api';
-import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
-import {getComponent} from './gasPump.data'
-import gasPumpHistory from './components/gasPumpHistory.vue';
-import gasPumpHandleHistoryVue from './components/gasPumpHandleHistory.vue';
-import gasPumpAlarmHistory from './components/gasPumpAlarmHistory.vue';
-import { mountedThree, destroy, setModelType } from './gasPump.threejs';
-import { useRouter } from 'vue-router';
-
-type DeviceType = { deviceType: string, deviceName: string, datalist: any[] };
-const gasPumpHome = getComponent()
-const { currentRoute } = useRouter();
-const activeKey = ref('monitor');
-const loading = ref(false);
-
-const historyTable = ref()
-const alarmHistoryTable = ref()
-const handlerHistoryTable = ref()
-
-
-//关联设备
-const deviceList = ref<DeviceType[]>([])
-const deviceActive = ref('')
-const deviceType = ref('')
-
-const options = ref()
-// 默认初始是第一行
-const selectRowIndex = ref(0);
-const dataSource = ref([])
-
-const optionValue = ref('')
-const currentDeviceType = ref('')
-
-// 监测数据
-const selectData = reactive({
-  FlowSensor_InputFlux: 0
-});
-
-function changeActive(activeValue) {
-  if(activeKey.value == 'monitor'){
-    if (currentDeviceType.value == 'pump_over') {
-      setModelType('gasPump')
-    } else if (currentDeviceType.value == 'pump_under') {
-      setModelType('gasPumpUnder')
+  import customHeader from '/@/components/vent/customHeader.vue';
+  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw } from 'vue';
+  import { list } from './gasPump.api';
+  import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
+  import { getComponent } from './gasPump.data';
+  import gasPumpHistory from './components/gasPumpHistory.vue';
+  import gasPumpHandleHistoryVue from './components/gasPumpHandleHistory.vue';
+  import gasPumpAlarmHistory from './components/gasPumpAlarmHistory.vue';
+  import { mountedThree, destroy, setModelType } from './gasPump.threejs';
+  import { useRouter } from 'vue-router';
+
+  type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
+  const gasPumpHome = getComponent();
+  const { currentRoute } = useRouter();
+  const activeKey = ref('monitor');
+  const loading = ref(false);
+
+  const historyTable = ref();
+  const alarmHistoryTable = ref();
+  const handlerHistoryTable = ref();
+
+  //关联设备
+  const deviceList = ref<DeviceType[]>([]);
+  const deviceActive = ref('');
+  const deviceType = ref('');
+
+  const options = ref();
+  // 默认初始是第一行
+  const selectRowIndex = ref(0);
+  const dataSource = ref([]);
+
+  const optionValue = ref('');
+  const currentDeviceType = ref('');
+
+  // 监测数据
+  const selectData = reactive({
+    FlowSensor_InputFlux: 0,
+  });
+
+  function changeActive(activeValue) {
+    if (activeKey.value == 'monitor') {
+      if (currentDeviceType.value == 'pump_over') {
+        setModelType('gasPump');
+      } else if (currentDeviceType.value == 'pump_under') {
+        setModelType('gasPumpUnder');
+      }
+    }
+    activeKey.value = activeValue;
+  }
+
+  function deviceChange(index) {
+    if (deviceList.value.length > 0) {
+      deviceActive.value = deviceType.value = deviceList.value[index].deviceType;
     }
   }
-  activeKey.value = activeValue
-}
 
-function deviceChange(index) {
-  if(deviceList.value.length > 0){
-    deviceActive.value = deviceType.value = deviceList.value[index].deviceType
-    
+  // 查询关联设备列表
+  async function getDeviceList() {
+    const res = await list({ devicetype: 'sys', systemID: optionValue.value });
+    const result = res.msgTxt;
+    const deviceArr = <DeviceType[]>[];
+    result.forEach((item) => {
+      const data = item['datalist'].filter((data: any) => {
+        const readData = data.readData;
+        return Object.assign(data, readData);
+      });
+      if (item.type != 'sys') {
+        deviceArr.unshift({
+          deviceType: item.type,
+          deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
+          datalist: data,
+        });
+      }
+    });
+    deviceList.value = deviceArr;
+    if (deviceArr[0]) deviceActive.value = deviceArr[0].deviceType;
   }
-}
-
-// 查询关联设备列表
-async function getDeviceList() {
-  const res = await list({ devicetype: 'sys', systemID: optionValue.value });
-  const result = res.msgTxt;
-  const deviceArr = <DeviceType[]>[]
-  result.forEach(item => {
-    const data = item['datalist'].filter((data: any) => {
+
+  async function getSysDataSource() {
+    const res = await list({ devicetype: 'pump', pagetype: 'normal' });
+    dataSource.value = res.msgTxt[0].datalist || [];
+    dataSource.value.forEach((data: any) => {
       const readData = data.readData;
-      return Object.assign(data, readData);
-    })
-    if (item.type != 'sys') {
-      deviceArr.unshift({ deviceType: item.type, deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'], datalist: data })
-    }
-  })
-  deviceList.value = deviceArr
-  if(deviceArr[0])deviceActive.value = deviceArr[0].deviceType
-};
-
-async function getSysDataSource () {
-  const res = await list({ devicetype: 'pump', pagetype: 'normal' });
-  dataSource.value = res.msgTxt[0].datalist || [];
-  dataSource.value.forEach((data: any) => {
-    const readData = data.readData;
-    data = Object.assign(data, readData);
-  });
-  
-  if(!options.value) {
-    // 初始时选择第一条数据
-    options.value = dataSource.value
-    if(!optionValue.value){
-      optionValue.value = dataSource.value[0]['deviceID']
-      Object.assign(selectData, dataSource.value[0])
-      getSelectRow(optionValue.value)
-    }else{
-      const currentData = dataSource.value.find(item => item['deviceID'] === optionValue.value) || {}
-      Object.assign(selectData, currentData)
+      data = Object.assign(data, readData);
+    });
+
+    if (!options.value) {
+      // 初始时选择第一条数据
+      options.value = dataSource.value;
+      if (!optionValue.value) {
+        optionValue.value = dataSource.value[0]['deviceID'];
+        Object.assign(selectData, dataSource.value[0]);
+        getSelectRow(optionValue.value);
+      } else {
+        const currentData = dataSource.value.find((item) => item['deviceID'] === optionValue.value) || {};
+        Object.assign(selectData, currentData);
+      }
     }
+    const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
+    return data;
   }
-  const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
-  return data;
-};
-
-// 切换检测数据
-function getSelectRow(deviceID){
-  const currentData = dataSource.value.find((item: any) => {
-    return item.deviceID == deviceID
-  })
-  if(currentData){
-    optionValue.value = currentData['deviceID']
-    currentDeviceType.value = currentData['deviceType']
-    Object.assign(selectData, currentData)
-    if (currentDeviceType.value == 'pump_over') {
-      setModelType('gasPump')
-    } else if (currentDeviceType.value == 'pump_under') {
-      setModelType('gasPumpUnder')
+
+  // 切换检测数据
+  function getSelectRow(deviceID) {
+    const currentData = dataSource.value.find((item: any) => {
+      return item.deviceID == deviceID;
+    });
+    if (currentData) {
+      optionValue.value = currentData['deviceID'];
+      currentDeviceType.value = currentData['deviceType'];
+      Object.assign(selectData, currentData);
+      if (currentDeviceType.value == 'pump_over') {
+        setModelType('gasPump');
+      } else if (currentDeviceType.value == 'pump_under') {
+        setModelType('gasPumpUnder');
+      }
     }
   }
-}
-
-onMounted(async() => {
-  if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) optionValue.value = currentRoute.value['query']['id']
-  mountedThree().then(async () => {
-    await getSysDataSource()
-    await getDeviceList()
-    getSelectRow(optionValue.value)
-  });
 
-});
+  onMounted(async () => {
+    if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) optionValue.value = currentRoute.value['query']['id'];
+    mountedThree().then(async () => {
+      await getSysDataSource();
+      await getDeviceList();
+      getSelectRow(optionValue.value);
+    });
+  });
 
-onUnmounted(() => {
-  destroy();
-});
+  onUnmounted(() => {
+    destroy();
+  });
 </script>
 <style lang="less" scoped>
-@import '/@/design/vent/modal.less';
-@ventSpace: zxm;
-.scene-box{
-  pointer-events: none;
-  .history-group{
-    padding: 0 20px;
-    .history-container{
-      position: relative;
-      background: #6195af1a;
-      width: calc(100% + 10px);
-      top: 0px;
-      left: -10px;
-      border: 1px solid #00fffd22;
-      padding: 10px 0;
-      box-shadow: 0 0 20px #44b4ff33 inset;
-    }
-  }
-  .device-button-group{
-    // margin: 0 20px;
-    display: flex;
-    pointer-events: auto;
-    position: relative;
-    margin-top: 90px;
-    &::after{
-      position:absolute;
-      content: '';
-      width: calc(100% + 10px);
-      height: 2px;
-      top: 30px;
-      left: -10px;
-      border-bottom: 1px solid #0efcff;
+  @import '/@/design/vent/modal.less';
+  @ventSpace: zxm;
+  .scene-box {
+    pointer-events: none;
+    .history-group {
+      padding: 0 20px;
+      .history-container {
+        position: relative;
+        background: #6195af1a;
+        width: calc(100% + 10px);
+        top: 0px;
+        left: -10px;
+        border: 1px solid #00fffd22;
+        padding: 10px 0;
+        box-shadow: 0 0 20px #44b4ff33 inset;
+      }
     }
-    .device-button{
-      padding: 4px 15px;
-      position: relative;
+    .device-button-group {
+      // margin: 0 20px;
       display: flex;
-      justify-content: center;
-      align-items: center;
-      font-size: 14px;
-      
-      color: #fff;
-      cursor: pointer;
-      margin: 0 3px;
-
-      &::before{
-        content: '';
+      pointer-events: auto;
+      position: relative;
+      margin-top: 90px;
+      &::after {
         position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        border: 1px solid #6176AF;
-        transform: skewX(-38deg);
-        background-color: rgba(0, 77, 103,85%);
-        z-index: -1;
+        content: '';
+        width: calc(100% + 10px);
+        height: 2px;
+        top: 30px;
+        left: -10px;
+        border-bottom: 1px solid #0efcff;
       }
-    }
-    .device-active{
-      // color: #0efcff;
-      &::before{
-        border-color: #0efcff;
-        box-shadow: 1px 1px 3px 1px #0efcff inset;
+      .device-button {
+        padding: 4px 15px;
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 14px;
+
+        color: #fff;
+        cursor: pointer;
+        margin: 0 3px;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          border: 1px solid #6176af;
+          transform: skewX(-38deg);
+          background-color: rgba(0, 77, 103, 85%);
+          z-index: -1;
+        }
+      }
+      .device-active {
+        // color: #0efcff;
+        &::before {
+          border-color: #0efcff;
+          box-shadow: 1px 1px 3px 1px #0efcff inset;
+        }
       }
     }
   }
-}
-.center-container{
-  width: 100%;
-  height: calc(100% - 100px);
-}
-
-:deep(.@{ventSpace}-tabs-tabpane-active) {
-  overflow: auto;
-}
-
-.input-box {
-  display: flex;
-  align-items: center;
-  padding-left: 10px;
-
-  .input-title {
-    color: #73e8fe;
-    width: auto;
+  .center-container {
+    width: 100%;
+    height: calc(100% - 100px);
   }
 
-  .@{ventSpace}-input-number {
-    border-color: #ffffff88 !important;
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    overflow: auto;
   }
 
-  margin-right: 10px;
-}
+  .input-box {
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
+
+    .input-title {
+      color: #73e8fe;
+      width: auto;
+    }
+
+    .@{ventSpace}-input-number {
+      border-color: #ffffff88 !important;
+    }
+
+    margin-right: 10px;
+  }
 </style>

src/views/vent/performance/fileDetail/commen/CADViewer.vue

@@ -31,7 +31,6 @@
     () => props.id,
     (v) => {
       if (!v) return;
-      console.log('debug watch');
       openFile(v, props.filename);
     }
   );