设备监测页面底部数据监测列表拖拽拉升

src/design/public.less

@@ -9,7 +9,7 @@
 // =================================
 
 ::-webkit-scrollbar {
-  width: 7px;
+  width: 4px;
   height: 8px;
 }
 

src/design/vent/modal.less

@@ -420,10 +420,13 @@
         height: 240px;
         color: #fff;
       }
-      .@{ventSpace}-tabs-content,
-      .vent-table {
-        height: calc(100% - 10px);
-      }
+      // .@{ventSpace}-tabs-content,
+      // .vent-table {
+      //   height: calc(100% - 10px);
+      // }
+      // .@{ventSpace}-tabs-content{
+      //   height: calc(100% - 10px);
+      // }
       .@{ventSpace}-tabs-top > .@{ventSpace}-tabs-nav {
         margin: 0 !important;
       }
@@ -431,7 +434,6 @@
         padding: 0 !important;
       }
       .vent-table {
-        overflow-y: auto;
         .@{ventSpace}-table-column-title,
         .@{ventSpace}-table-thead > tr > th {
           color: #84f2ff !important;

src/utils/event/index.ts

@@ -40,3 +40,35 @@ export function triggerWindowResize() {
   (event as any).eventType = 'message';
   window.dispatchEvent(event);
 }
+
+export function setDivHeight(e: MouseEvent, minHeight, scroll) {
+  e.preventDefault();
+  const divObject = e.currentTarget as HTMLElement;
+  if (divObject) {
+    const divHeight = divObject.offsetHeight;
+    let height = divHeight;
+    const startY = e.clientY;
+    document.onmousemove = function (res) {
+      res.preventDefault();
+      const distY = Math.abs(res.clientY - startY);
+      if (res.clientY > startY) {
+        if (divHeight - distY >= minHeight) {
+          height = divHeight - distY;
+        } else {
+          height = minHeight;
+        }
+      }
+      if (res.clientY < startY) {
+        height = divHeight + distY;
+      }
+      divObject.style.height = height + 'px';
+    };
+    document.onmouseup = function () {
+      document.onmousemove = null;
+      if (scroll.y != height - 100) {
+        scroll.y = height - 100;
+      }
+      console.log('scroll.y-------------->', scroll.y);
+    };
+  }
+}

src/views/vent/monitorManager/comment/GroupMonitorTable.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="vent-table">
     <a-radio-group v-model:value="selectRowIndex" @change="setSelectedRowKeys" style="width: 100%">
-      <a-table :columns="columns" :pagination="false" :data-source="dataTableSource" bordered style="margin-top: 5px">
-        <template #bodyCell="{ column, record, index }">
+      <a-table :columns="columns" :pagination="false" :data-source="dataTableSource" bordered style="margin-top: 5px" :scroll="scroll">
+        <template #bodyCell="{ column, record }">
           <template v-if="column.dataIndex === 'isCheck'">
             <a-radio :value="record.deviceID" />
           </template>
@@ -20,7 +20,7 @@
 
 <script lang="ts" setup>
   //ts语法
-  import { defineExpose, toRaw, watch, ref, onMounted, onUnmounted } from 'vue';
+  import { toRaw, watch, ref, onMounted, onUnmounted } from 'vue';
   import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
   const props = defineProps({
     columnsType: {
@@ -40,6 +40,10 @@
     title: {
       type: String,
     },
+    scroll: {
+      type: Object,
+      default: () => null
+    },
   });
 
   const emits = defineEmits(['selectRow']);

src/views/vent/monitorManager/compressor/components/nitrogenHome.vue

@@ -284,7 +284,6 @@ onUnmounted(() => {
   display: flex;
   justify-content: center;
 }
-
 #nitrogenCss3D {
   .modal-monitor {
     width: 200px;
@@ -299,7 +298,6 @@ onUnmounted(() => {
   }
 
 }
-
 .nitrogen-home {
   width: 100%;
   height: 100%;
@@ -559,109 +557,105 @@ onUnmounted(() => {
   }
   
 }
-  
 
-  &:deep(.main) {
-    .title {
-      height: 34px;
-      text-align: center;
-      font-weight: 600;
-      color: #7AF5FF;
-      // background-image: url('../../../assets/img/yfj/light.png');
-      background-repeat: no-repeat;
-      background-position-x: center;
-      background-position-y: 100%;
-      background-size: 80%;
-      font-size: 16px;
-    }
+&:deep(.main) {
+  .title {
+    height: 34px;
+    text-align: center;
+    font-weight: 600;
+    color: #7AF5FF;
+    // background-image: url('../../../assets/img/yfj/light.png');
+    background-repeat: no-repeat;
+    background-position-x: center;
+    background-position-y: 100%;
+    background-size: 80%;
+    font-size: 16px;
+  }
+  .monitor-item {
+    width: 200px;
+    display: flex;
+    flex-direction: row;
+    width: auto;
+    margin-bottom: 3px;
 
-    .monitor-item {
-      width: 200px;
+    .monitor-val {
+      color: #ffb700;
       display: flex;
-      flex-direction: row;
       width: auto;
-      margin-bottom: 3px;
-
-      .monitor-val {
-        color: #ffb700;
-        display: flex;
-        width: auto;
 
-        .val {
-          width: 80px;
-          font-size: 14px;
-        }
+      .val {
+        width: 80px;
+        font-size: 14px;
+      }
 
-        .unit {
-          color: #ffffffbb;
-          font-size: 14px;
+      .unit {
+        color: #ffffffbb;
+        font-size: 14px;
 
-        }
       }
     }
+  }
+  .monitor-title {
+    width: 100px;
+    color: #7AF5FF;
+    font-weight: 400;
+    font-size: 14px;
+  }
+  .signal-item {
+    display: flex;
+    justify-content: space-between;
 
-    .monitor-title {
-      width: 100px;
-      color: #7AF5FF;
-      font-weight: 400;
-      font-size: 14px;
-    }
-
-    .signal-item {
-      display: flex;
-      justify-content: space-between;
-
-      // margin-bottom: 5px;
-      .signal-round {
-        display: inline-block;
-        width: 8px;
-        height: 8px;
+    // margin-bottom: 5px;
+    .signal-round {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      margin: 0 10px;
+      position: relative;
+
+      &::after {
+        display: block;
+        content: '';
+        position: absolute;
+        width: 12px;
+        height: 12px;
+        top: -2px;
+        left: -2px;
         border-radius: 50%;
-        margin: 0 10px;
-        position: relative;
-
-        &::after {
-          display: block;
-          content: '';
-          position: absolute;
-          width: 12px;
-          height: 12px;
-          top: -2px;
-          left: -2px;
-          border-radius: 50%;
-        }
       }
+    }
 
-      .signal-round-gry {
-        background-color: #858585;
+    .signal-round-gry {
+      background-color: #858585;
 
-        &::after {
-          background-color: #85858544;
-          box-shadow: 0 0 1px 1px #85858599;
-        }
+      &::after {
+        background-color: #85858544;
+        box-shadow: 0 0 1px 1px #85858599;
       }
+    }
 
-      .signal-round-run {
-        background-color: #67FC00;
+    .signal-round-run {
+      background-color: #67FC00;
 
-        &::after {
-          background-color: #67FC0044;
-          box-shadow: 0 0 1px 1px #c6ff77;
-        }
+      &::after {
+        background-color: #67FC0044;
+        box-shadow: 0 0 1px 1px #c6ff77;
       }
+    }
 
-      .signal-round-warning {
-        background-color: #E9170B;
+    .signal-round-warning {
+      background-color: #E9170B;
 
-        &::after {
-          background-color: #E9170B44;
-          box-shadow: 0 0 1px 1px #E9170B;
-        }
+      &::after {
+        background-color: #E9170B44;
+        box-shadow: 0 0 1px 1px #E9170B;
       }
     }
   }
-  :deep(.zxm-radio-wrapper){
-    color: #fff !important;
-  }
+}
+:deep(.zxm-radio-wrapper){
+  color: #fff !important;
+}
 
 </style>

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

@@ -43,7 +43,7 @@
       </div>
     </div>
    
-    <div class="bottom-tabs-box" @mousedown="setDivHeight" id="monitorBox">
+    <div class="bottom-tabs-box" @mousedown="setDivHeight($event, 250, scroll)" id="monitorBox">
       <div class="to-small" @click="toHome"></div>
       <div class="device-button-group" v-if="deviceList.length > 0">
         <div class="device-button" :class="{ 'device-active': deviceActive == device.deviceType }"
@@ -55,12 +55,12 @@
       </div>
       <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
         <a-tab-pane key="1" tab="实时监测">
-          <template v-if="deviceType == 'fan' && activeKey == '1'">
+          <template v-if="deviceType == 'fan' && activeKey == '1' && isRefresh">
             <GroupMonitorTable :dataSource="dataSource" :columnsType="`${deviceType}_monitor`" />
           </template>
-          <template v-else-if="activeKey == '1'">
+          <template v-else-if="activeKey == '1' && isRefresh">
             <MonitorTable ref="monitorTable" :columnsType="`${deviceType}_monitor`" :dataSource="dataSource"
-              design-scope="device_monitor" :isShowPagination="false" :isShowActionColumn="true" title="设备监测">
+              design-scope="device_monitor" :isShowPagination="false" :isShowActionColumn="true" title="设备监测" :scroll="scroll">
               <template #action="{ record }">
                 <TableAction :actions="[
                   {
@@ -118,25 +118,29 @@
         </a-tab-pane>
         <a-tab-pane key="2" tab="历史数据">
           <div class="tab-item">
-            <HistoryTable ref="historyTable" v-if="activeKey == '2'" :sysId="systemID" :columns-type="`${deviceType}`"
+            <HistoryTable ref="historyTable" v-if="activeKey == '2' && isRefresh" :sysId="systemID" :columns-type="`${deviceType}`"
               :device-type="deviceType"
               :device-list-api="getDeviceList.bind(null, { strtype: deviceType, sysId: systemID })"
-              designScope="device-history" />
+              designScope="device-history"
+              :scroll="scroll"
+               />
           </div>
         </a-tab-pane>
         <a-tab-pane key="3" tab="报警历史">
           <div class="tab-item">
-            <AlarmHistoryTable ref="alarmHistoryTable" v-if="activeKey == '3'" :sysId="systemID" columns-type="alarm"
+            <AlarmHistoryTable ref="alarmHistoryTable" v-if="activeKey == '3' && isRefresh" :sysId="systemID" columns-type="alarm"
               :device-type="deviceType"
               :device-list-api="getDeviceList.bind(null, { strtype: deviceType, sysId: systemID })"
+              :scroll="scroll"
               designScope="alarm-history" />
           </div>
         </a-tab-pane>
         <a-tab-pane key="4" tab="操作历史">
           <div class="tab-item">
-            <HandlerHistoryTable ref="handlerHistoryTable" v-if="activeKey == '4'" :sysId="systemID"
+            <HandlerHistoryTable ref="handlerHistoryTable" v-if="activeKey == '4' && isRefresh" :sysId="systemID"
               columns-type="operatorhistory" :device-type="deviceType"
               :device-list-api="getDeviceList.bind(null, { strtype: deviceType, sysId: systemID })"
+              :scroll="scroll"
               designScope="operator-history" />
           </div>
         </a-tab-pane>
@@ -147,7 +151,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, ComponentOptions, shallowRef, nextTick } from 'vue'
+import { ref, onMounted, onUnmounted, ComponentOptions, shallowRef, nextTick, watch, reactive } from 'vue'
 import { SendOutlined } from '@ant-design/icons-vue';
 import { list, getDeviceList, getDeviceTypeList } from './device.api'
 import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
@@ -163,6 +167,7 @@ import DustModal from './modal/dust.modal.vue'
 import { SvgIcon } from '/@/components/Icon';
 import { getActions } from '/@/qiankun/state';
 import { useRouter } from 'vue-router';
+import { setDivHeight } from '/@/utils/event';
 
 
 type DeviceType = { deviceType: string, deviceName: string, datalist: any[] };
@@ -184,13 +189,13 @@ const currentModal = shallowRef<Nullable<ComponentOptions>>(null); //模态框
 const modalVisible = ref<Boolean>(false); // 模态框是否可见
 
 //
-const drawerHeight = ref(240) // 监测框最小高度
+
+// const drawerHeight = ref(240) // 监测框最小高度
 const treeShow = ref(true) //是否显示树形菜单
 const locationSettingShow = ref(false) //是否显示树形菜单
 const treeNodeTitle = ref('') // 选中的树形标题
 
 const locationList = ref([]) //巷道定位图标显示列表
-let locationListTemp = []
 const deviceList = ref<DeviceType[]>([]) //关联设备列表
 const deviceActive = ref('')
 const activeKey = ref('1'); // tab key
@@ -201,8 +206,9 @@ const systemType = ref('')
 const systemID = ref('') // 系统监测时，系统id
 const selectedKeys = ref<string[]>([]);
 const expandedKeys = ref<string[]>([]);
-const scroll = ref({
-  y: drawerHeight.value - 100
+const isRefresh = ref(true) 
+const scroll = reactive({
+  y: 240
 })
 const treeData = ref<TreeProps['treeData']>([]);
 
@@ -278,19 +284,21 @@ async function getDeviceType() {
 // https获取监测数据
 let timer: null | NodeJS.Timeout = undefined;
 function getMonitor() {
-  if (timer) timer = null
-  if (Object.prototype.toString.call(timer) === '[object Null]' && deviceType.value) {
-    timer = setTimeout(async () => {
-      await getDataSource()
-      if (timer) {
-        getMonitor();
-      }
-    }, 1000);
+  if(deviceType.value){
+    if (timer) timer = null
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = setTimeout(async () => {
+        await getDataSource()
+        if (timer) {
+          getMonitor();
+        }
+      }, 1000);
+    }
   }
 };
 
 async function getDataSource() {
-  if (deviceType.value.startsWith('sys') && systemID.value) {
+  if (deviceType.value && deviceType.value.startsWith('sys') && systemID.value) {
     const res = await list({ devicetype: 'sys', systemID: systemID.value });
     const result = res.msgTxt;
     const deviceArr = <DeviceType[]>[]
@@ -305,8 +313,15 @@ async function getDataSource() {
     })
 
     deviceList.value = deviceArr
-    deviceActive.value = deviceArr[1].deviceType
-    monitorChange(1)
+    if(deviceArr.length > 0){
+      if(deviceArr[1]){
+        deviceActive.value = deviceArr[1].deviceType
+        monitorChange(1)
+      }else{
+        deviceActive.value = deviceArr[0].deviceType
+        monitorChange(0)
+      }
+    }
   } else {
     const res = await list({ devicetype: deviceType.value, pagetype: 'normal' })
     if (res.msgTxt[0]) {
@@ -319,34 +334,6 @@ async function getDataSource() {
   }
 }
 
-function setDivHeight(e: MouseEvent) {
-  const divObject = document.getElementById('monitorBox') as HTMLElement
-  const divHeight = divObject.offsetHeight
-  drawerHeight.value = divHeight
-  const startY = e.clientY
-  document.onmousemove = function (res) {
-    res.preventDefault()
-    const distY = Math.abs(res.clientY - startY)
-    if (res.clientY > startY) {
-      if (divHeight - distY >= 240) {
-        drawerHeight.value = divHeight - distY
-      } else {
-        drawerHeight.value = 240
-      }
-    }
-    if (res.clientY < startY) {
-      drawerHeight.value = divHeight + distY
-    }
-    divObject.style.height = drawerHeight.value + 'px'
-  }
-  document.onmouseup = function () {
-    document.onmousemove = null
-    if (scroll.value.y != drawerHeight.value - 100) {
-      scroll.value = { y: drawerHeight.value - 100 }
-    }
-  }
-}
-
 function goLocation(record) {
   actions.setGlobalState({ locationId: record.deviceID, locationObj: null, pageObj: null });
 }
@@ -411,6 +398,7 @@ function toHome() {
   deviceList.value = []
   if(timer) clearTimeout(timer)
   timer = undefined
+  deviceType.value = ''
   actions.setGlobalState({ pageObj: { pageType: 'home' } });
 }
 
@@ -477,6 +465,13 @@ function setLocation() {
   }, 600)
 }
 
+watch(() => scroll.y, () => {
+  isRefresh.value = false
+  nextTick(() => {
+    isRefresh.value = true
+  } )
+})
+
 onMounted(async () => {
   actions.onGlobalStateChange((newState, prev) => {
     for (const key in newState) {
@@ -494,7 +489,6 @@ onMounted(async () => {
           const posShowData = pageObj.locationPlane
           if (posShowData) {
             locationList.value = posShowData
-            locationListTemp = [...posShowData]
           }
         }
       }
@@ -1039,8 +1033,8 @@ onUnmounted(() => {
 }
 
 :deep(.@{ventSpace}-tabs-tabpane-active) {
-  overflow: auto;
-  // height: 100%;
+  // overflow: auto;
+  height: 100%;
 }
 
 :deep(.zxm-select-dropdown) {

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

@@ -49,20 +49,13 @@
     <div class="title-text">
       {{ selectData.stationname }}
     </div>
-    <div class="bottom-tabs-box">
+    <div class="bottom-tabs-box" @mousedown="setDivHeight($event, 240, scroll)">
       <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
         <a-tab-pane key="1" tab="实时监测">
-          <GroupMonitorTable :dataSource="dataSource" columnsType="fanlocal_monitor" @selectRow="getSelectRow" />
-          <!-- <MonitorTable
-            columnsType="fanlocal_monitor"
-            :dataSource="dataSource"
-            @selectRow="getSelectRow"
-            design-scope="fanlocal-monitor"
-            title="局部通风机监测"
-          /> -->
+          <GroupMonitorTable  v-if="activeKey === '1' && isRefresh" :dataSource="dataSource" columnsType="fanlocal_monitor" @selectRow="getSelectRow" :scroll="scroll"/>
         </a-tab-pane>
         <a-tab-pane key="2" tab="实时曲线图" force-render>
-          <div class="tab-item" v-if="activeKey === '2'">
+          <div class="tab-item" v-if="activeKey === '2' && isRefresh">
             <div class="vent-flex-row-between" style="height: 100%">
               <BarSingle
                 :xAxisData="[
@@ -90,17 +83,17 @@
           </div>
         </a-tab-pane>
         <a-tab-pane key="3" tab="历史数据">
-          <div class="tab-item">
+          <div class="tab-item" v-if="activeKey === '3' && isRefresh">
             <HistoryTable columns-type="fanlocal" device-type="fanlocal" :device-list-api="baseList" designScope="fanlocal-history" />
           </div>
         </a-tab-pane>
         <a-tab-pane key="4" tab="报警历史">
-          <div class="tab-item">
+          <div class="tab-item" v-if="activeKey === '4' && isRefresh">
             <AlarmHistoryTable columns-type="alarm" device-type="fanlocal" :device-list-api="baseList" designScope="alarm-history" />
           </div>
         </a-tab-pane>
         <a-tab-pane key="5" tab="操作历史">
-          <div class="tab-item">
+          <div class="tab-item" v-if="activeKey === '5' && isRefresh">
             <HandlerHistoryTable columns-type="operatorhistory" device-type="fanlocal" :device-list-api="baseList" designScope="alarm-history" />
           </div>
         </a-tab-pane>
@@ -193,7 +186,7 @@
 
 <script setup lang="ts">
   import { ExclamationCircleFilled } from '@ant-design/icons-vue';
-  import { onBeforeMount, ref, onMounted, nextTick, toRaw, reactive, onUnmounted } from 'vue';
+  import { onBeforeMount, ref, onMounted, nextTick, toRaw, reactive, onUnmounted, watch } from 'vue';
   import BarSingle from '../../../../components/chart/BarSingle.vue';
   import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
   import HistoryTable from '../comment/HistoryTable.vue';
@@ -207,6 +200,7 @@
   import { deviceControlApi } from '/@/api/vent/index';
   import LivePlayer from '@liveqing/liveplayer-v3';
   import { message } from 'ant-design-vue';
+  import { setDivHeight } from '/@/utils/event';
 
   const modalTypeArr = reactive({
     leftBtnArr: [
@@ -282,6 +276,12 @@
       label: 'T3',
     },
   ]);
+
+  const isRefresh = ref(true)
+  const scroll = reactive({
+    y: 180
+  })
+  
   const modalSensor = ref(null);
   const loading = ref(false);
   const activeKey = ref('1');
@@ -315,11 +315,7 @@
   };
   // 监测数据
   const selectData = reactive(lodash.cloneDeep(initData));
-  // const dataSource = computed(() => {
-  //   const data = [...getRecordList()] || [];
-  //   Object.assign(selectData, toRaw(data[selectRowIndex.value]));
-  //   return data;
-  // });
+
   const tabChange = (activeKeyVal) => {
     activeKey.value = activeKeyVal;
   };
@@ -376,8 +372,6 @@
       loading.value = false;
     });
     const data = dataSource.value[baseDataIndex];
-    // mainWindIsShow1.value = 'stop';
-    // mainWindIsShow2.value = 'stop';
     if (data['fanStart1'] == 1) {
       mainWindIsShow1.value = 'open';
       mainWindIsShow2.value = 'stop';
@@ -492,6 +486,13 @@
     }
   };
 
+  watch(() => scroll.y, () => {
+    isRefresh.value = false
+    nextTick(() => {
+      isRefresh.value = true
+    })
+  })
+
   onBeforeMount(() => {
     getDeviceBaseList();
   });

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

@@ -71,16 +71,19 @@
     <div class="title-text">
       {{ selectData.strname }}
     </div>
-    <div class="bottom-tabs-box">
+    <div class="bottom-tabs-box" @mousedown="setDivHeight($event, 250, scroll)">
       <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
         <a-tab-pane key="1" tab="实时监测">
           <MonitorTable
+            v-if="activeKey === '1' && isRefresh"
             class="monitor-table"
             columnsType="gate_monitor"
             :dataSource="dataSource"
             design-scope="gate-monitor"
             @selectRow="getSelectRow"
+            :scroll="scroll"
             title="风门监测"
+            :isShowPagination="false"
           >
             <template #filterCell="{ column, record }">
               <template v-if="record.frontGateOpenCtrl">
@@ -112,7 +115,7 @@
           </MonitorTable>
         </a-tab-pane>
         <a-tab-pane key="2" tab="实时曲线图" force-render>
-          <div class="tab-item" v-if="activeKey === '2'">
+          <div class="tab-item" v-if="activeKey === '2' && isRefresh">
             <DeviceEcharts
               chartsColumnsType="gate_chart"
               xAxisPropType="strname"
@@ -125,18 +128,18 @@
           </div>
         </a-tab-pane>
         <a-tab-pane key="3" tab="历史数据">
-          <div class="tab-item">
-            <HistoryTable columns-type="gate" device-type="gate" :device-list-api="getTableList" designScope="gate-history" />
+          <div class="tab-item"  v-if="activeKey === '3' && isRefresh">
+            <HistoryTable columns-type="gate" device-type="gate" :device-list-api="getTableList" designScope="gate-history" :scroll="scroll"/>
           </div>
         </a-tab-pane>
         <a-tab-pane key="4" tab="报警历史">
-          <div class="tab-item">
-            <AlarmHistoryTable columns-type="alarm" device-type="gate" :device-list-api="getTableList" designScope="alarm-history" />
+          <div class="tab-item"  v-if="activeKey === '4' && isRefresh">
+            <AlarmHistoryTable columns-type="alarm" device-type="gate" :device-list-api="getTableList" designScope="alarm-history" :scroll="scroll"/>
           </div>
         </a-tab-pane>
         <a-tab-pane key="5" tab="操作历史">
-          <div class="tab-item">
-            <HandlerHistoryTable columns-type="operatorhistory" device-type="gate" :device-list-api="getTableList" designScope="alarm-history" />
+          <div class="tab-item"  v-if="activeKey === '5' && isRefresh">
+            <HandlerHistoryTable columns-type="operatorhistory" device-type="gate" :device-list-api="getTableList" designScope="alarm-history" :scroll="scroll"/>
           </div>
         </a-tab-pane>
       </a-tabs>
@@ -159,7 +162,7 @@
 
 <script setup lang="ts">
   import LivePlayer from '@liveqing/liveplayer-v3';
-  import {onBeforeUnmount, onUnmounted, onMounted, ref, reactive, toRaw, nextTick } from 'vue';
+  import {onBeforeUnmount, onUnmounted, onMounted, ref, reactive, toRaw, nextTick, watch } from 'vue';
   import DeviceEcharts from '../comment/DeviceEcharts.vue';
   import MonitorTable from '../comment/MonitorTable.vue';
   import HistoryTable from '../comment/HistoryTable.vue';
@@ -172,6 +175,7 @@
   import { list, getTableList } from './gate.api';
   import { chartsColumns } from './gate.data';
   import lodash from 'lodash';
+  import { setDivHeight } from '/@/utils/event';
 
   const player1 = ref(null);
   const player2 = ref(null);
@@ -179,6 +183,11 @@
   const activeKey = ref('1'); // tab
   const loading = ref(false);
 
+  const isRefresh = ref(true)
+  const scroll = reactive({
+    y: 240
+  })
+
   const frontDoorIsOpen = ref(false); //前门是否开启
   const backDoorIsOpen = ref(false); //后门是否开启
 
@@ -290,11 +299,6 @@
 
   // 播放动画
   function playAnimation(handlerState) {
-    
-    // frontGateOpenCtrl rearGateOpenCtrl
-    //selectData.frontGateOpen == 0 && selectData.frontGateClose == 0
-    //selectData.rearGateOpen == 0 && selectData.rearGateClose == 0
-
     switch (handlerState) {
       case 1: // 打开前门
         if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '1') {
@@ -583,6 +587,12 @@
     }
   };
   
+  watch(() => scroll.y, () => {
+    isRefresh.value = false
+    nextTick(() => {
+      isRefresh.value = true
+    })
+  })
 
   onMounted(() => {
     loading.value = true;
@@ -628,4 +638,8 @@
   :deep(.@{ventSpace}-tabs-tabpane-active) {
     overflow: auto;
   }
+  ::-webkit-scrollbar-thumb {
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: #4288A444;
+  }
 </style>

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

@@ -6,7 +6,7 @@
       class="threejs-Object-CSS"
       v-show="!loading"
       style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 1; top: 0"
-    >
+      >
       <div style="position: relative">
         <div class="elementTag" id="inputBox">
           <div class="elementContent elementContent-r" v-if="selectData.DataPa && backMonitorIsShow">
@@ -152,10 +152,10 @@
         </div>
       </div>
     </div>
-    <div class="bottom-tabs-box">
+    <div class="bottom-tabs-box" @mousedown="setDivHeight($event, 250, scroll)">
       <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
         <a-tab-pane key="1" tab="实时监测">
-          <GroupMonitorTable :dataSource="dataSource" columnsType="fanmain_monitor" @selectRow="getSelectRow" />
+          <GroupMonitorTable v-if="activeKey === '1' && isRefresh" :dataSource="dataSource" columnsType="fanmain_monitor" @selectRow="getSelectRow" :scroll="scroll"/>
         </a-tab-pane>
         <!-- <a-tab-pane key="2" tab="实时曲线图" force-render>
           <div class="tab-item" v-if="activeKey === '2'">
@@ -163,18 +163,18 @@
           </div>
         </a-tab-pane> -->
         <a-tab-pane key="3" tab="历史数据">
-          <div class="tab-item">
-            <HistoryTable columns-type="fanmain" device-type="fanmain" :device-list-api="baseList" designScope="fanmain-history" />
+          <div class="tab-item" v-if="activeKey === '3' && isRefresh">
+            <HistoryTable columns-type="fanmain" device-type="fanmain" :device-list-api="baseList" designScope="fanmain-history" :scroll="scroll"/>
           </div>
         </a-tab-pane>
         <a-tab-pane key="4" tab="报警历史">
-          <div class="tab-item">
-            <AlarmHistoryTable columns-type="alarm" device-type="fanmain" :device-list-api="baseList" designScope="alarm-history" />
+          <div class="tab-item" v-if="activeKey === '4' && isRefresh">
+            <AlarmHistoryTable columns-type="alarm" device-type="fanmain" :device-list-api="baseList" designScope="alarm-history" :scroll="scroll"/>
           </div>
         </a-tab-pane>
         <a-tab-pane key="5" tab="操作历史">
-          <div class="tab-item">
-            <HandlerHistoryTable columns-type="operatorhistory" device-type="fanlocal" :device-list-api="baseList" designScope="alarm-history" />
+          <div class="tab-item" v-if="activeKey === '5' && isRefresh">
+            <HandlerHistoryTable columns-type="operatorhistory" device-type="fanlocal" :device-list-api="baseList" designScope="alarm-history" :scroll="scroll"/>
           </div>
         </a-tab-pane>
       </a-tabs>
@@ -223,7 +223,7 @@
 <script setup lang="ts">
   import { ExclamationCircleFilled } from '@ant-design/icons-vue';
   import FanEchrats from '/@/views/vent/monitorManager/mainFanMonitor/fanEchrats.vue';
-  import { onBeforeMount, computed, ComputedRef, ref, onMounted, nextTick, onUnmounted, reactive, toRaw, toRef, toRefs } from 'vue';
+  import { onBeforeMount, computed, ref, onMounted, nextTick, onUnmounted, reactive, toRaw, watch } from 'vue';
   import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
   import HistoryTable from '../comment/HistoryTable.vue';
   import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
@@ -237,6 +237,12 @@
   import { list as baseList } from '../../deviceManager/fanTabel/fan.api';
   import { getTableList } from '/@/views/vent/monitorManager/fanLocalMonitor/fanLocal.api';
   import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+  import { setDivHeight } from '/@/utils/event';
+
+  const isRefresh = ref(true)
+  const scroll = reactive({
+    y: 180
+  })
 
   const modalTypeArr = reactive({
     centerBtnArr: [
@@ -561,6 +567,13 @@
     }
   };
 
+  watch(() => scroll.y, () => {
+    isRefresh.value = false
+    nextTick(() => {
+      isRefresh.value = true
+    })
+  })
+
   onBeforeMount(() => {
     // document.body.addEventListener('mousedown', addPlayVideo, true);
     getDeviceBaseList();

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

@@ -56,15 +56,18 @@
     <div class="title-text">
       {{ selectData.strname }}
     </div>
-    <div class="bottom-tabs-box">
+    <div class="bottom-tabs-box" @mousedown="setDivHeight($event, 250, scroll)">
       <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
         <a-tab-pane key="1" tab="实时监测">
           <MonitorTable
+            v-if="activeKey === '1' && isRefresh"
             columnsType="window_monitor"
             :dataSource="dataSource"
             @selectRow="getSelectRow"
             design-scope="window-monitor"
+            :scroll="scroll"
             title="风窗监测"
+            :isShowPagination="false"
           >
             <template #filterCell="{ column, record }">
               <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : 'red'">{{
@@ -78,7 +81,7 @@
           </MonitorTable>
         </a-tab-pane>
         <a-tab-pane key="2" tab="实时曲线图" force-render>
-          <div class="tab-item" v-if="activeKey === '2'">
+          <div class="tab-item" v-if="activeKey === '2' && isRefresh">
             <DeviceEcharts
               chartsColumnsType="window_chart"
               xAxisPropType="strname"
@@ -91,18 +94,18 @@
           </div>
         </a-tab-pane>
         <a-tab-pane key="3" tab="历史数据">
-          <div class="tab-item">
-            <HistoryTable columns-type="window" device-type="window" :device-list-api="baseList" designScope="window-history" />
+          <div class="tab-item" v-if="activeKey === '3' && isRefresh">
+            <HistoryTable columns-type="window" device-type="window" :device-list-api="baseList" designScope="window-history" :scroll="scroll"/>
           </div>
         </a-tab-pane>
         <a-tab-pane key="4" tab="报警历史">
-          <div class="tab-item">
-            <AlarmHistoryTable columns-type="alarm" device-type="window" :device-list-api="baseList" designScope="alarm-history" />
+          <div class="tab-item" v-if="activeKey === '4' && isRefresh">
+            <AlarmHistoryTable columns-type="alarm" device-type="window" :device-list-api="baseList" designScope="alarm-history" :scroll="scroll"/>
           </div>
         </a-tab-pane>
         <a-tab-pane key="5" tab="操作历史">
-          <div class="tab-item">
-            <HandlerHistoryTable columns-type="operatorhistory" device-type="fanlocal" :device-list-api="baseList" designScope="alarm-history" />
+          <div class="tab-item" v-if="activeKey === '5' && isRefresh">
+            <HandlerHistoryTable columns-type="operatorhistory" device-type="fanlocal" :device-list-api="baseList" designScope="alarm-history" :scroll="scroll"/>
           </div>
         </a-tab-pane>
       </a-tabs>
@@ -118,13 +121,12 @@
 <script setup lang="ts">
   import { message } from 'ant-design-vue';
   import DeviceEcharts from '../comment/DeviceEcharts.vue';
-  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw } from 'vue';
+  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw, watch, nextTick } from 'vue';
   import MonitorTable from '../comment/MonitorTable.vue';
   import HistoryTable from '../comment/HistoryTable.vue';
   import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
   import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
   import HandleModal from './modal.vue';
-  import { initWebSocket, getRecordList } from '/@/hooks/web/useVentWebSocket';
   import { mountedThree, destroy, addFmText, play, setModelType } from './window.threejs';
   import { list, getTableList } from './window.api';
   import { list as baseList } from '../../deviceManager/windWindowTabel/ventanalyWindow.api';
@@ -132,10 +134,16 @@
   import { deviceControlApi } from '/@/api/vent/index';
   import lodash from 'lodash';
   import LivePlayer from '@liveqing/liveplayer-v3';
+  import { setDivHeight } from '/@/utils/event';
 
   const player1 = ref(null);
   const player2 = ref(null);
 
+  const isRefresh = ref(true)
+  const scroll = reactive({
+    y: 240
+  })
+
   const modalIsShow = ref<boolean>(false); // 是否显示模态框
   const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
   const modalType = ref(''); // 模态框内容显示类型，设备操作类型
@@ -324,6 +332,13 @@
     }
   };
 
+  watch(() => scroll.y, () => {
+    isRefresh.value = false
+    nextTick(() => {
+      isRefresh.value = true
+    })
+  })
+
   onBeforeMount(() => {
     // const sendVal = JSON.stringify({ pagetype: 'normal', devicetype: 'window', orgcode: '', ids: '', systemID: '' });
     // initWebSocket(sendVal);
@@ -352,9 +367,9 @@
   @import '/@/design/vent/modal.less';
   @ventSpace: zxm;
 
-  :deep(.@{ventSpace}-tabs-tabpane-active) {
-    overflow: auto;
-  }
+  // :deep(.@{ventSpace}-tabs-tabpane-active) {
+  //   height: 100%;
+  // }
   .input-box {
     display: flex;
     align-items: center;

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

@@ -40,7 +40,7 @@
     <div class="title-text">
       {{ selectData.strname }}
     </div>
-    <div class="bottom-tabs-box">
+    <div class="bottom-tabs-box" @mousedown="setDivHeight($event, 250, scroll)">
       <div class="tabs-button-group">
         <a-button class="tabs-button" type="primary" @click="openModel">一键测风</a-button>
         <!-- <a-button class="tabs-button" type="primary" @click="exportExcel()">导出报表</a-button> -->
@@ -48,11 +48,14 @@
       <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
         <a-tab-pane key="1" tab="实时监测">
           <MonitorTable
+            v-if="activeKey === '1' && isRefresh"
             columnsType="windrect_monitor"
             :dataSource="dataSource"
             design-scope="windrect-monitor"
             @selectRow="getSelectRow"
+            :scroll="scroll"
             title="测风装置监测"
+            :isShowPagination="false"
           >
             <template #filterCell="{ column, record }">
               <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == 0 ? '#FF5812' : 'green'">{{
@@ -75,7 +78,7 @@
           </MonitorTable>
         </a-tab-pane>
         <a-tab-pane key="2" tab="监测曲线图" force-render>
-          <div class="tab-item" v-if="activeKey === '2'">
+          <div class="tab-item" v-if="activeKey === '2' && isRefresh">
             <DeviceEcharts
               chartsColumnsType="windrect_chart"
               xAxisPropType="strname"
@@ -89,7 +92,7 @@
         </a-tab-pane>
         <a-tab-pane key="3" tab="历史数据">
           <div class="tab-item">
-            <HistoryTable columns-type="windrect" device-type="windrect" :device-list-api="baseList" designScope="windrect-history" >
+            <HistoryTable columns-type="windrect" device-type="windrect" :device-list-api="baseList" designScope="windrect-history" :scroll="scroll">
               <template #filterCell="{ column, record }">
                 <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'"> {{
                   record.warnFlag == 0 ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测'
@@ -99,17 +102,17 @@
           </div>
         </a-tab-pane>
         <a-tab-pane key="4" tab="报警历史">
-          <div class="tab-item">
-            <AlarmHistoryTable columns-type="alarm" device-type="windrect" :device-list-api="baseList" designScope="alarm-history" />
+          <div class="tab-item" v-if="activeKey === '4' && isRefresh">
+            <AlarmHistoryTable columns-type="alarm" device-type="windrect" :device-list-api="baseList" designScope="alarm-history" :scroll="scroll"/>
           </div>
         </a-tab-pane>
         <a-tab-pane key="5" tab="操作历史">
-          <div class="tab-item">
-            <HandlerHistoryTable columns-type="operator_history" device-type="fanlocal" :device-list-api="baseList" designScope="operator_history" />
+          <div class="tab-item" v-if="activeKey === '5' && isRefresh">
+            <HandlerHistoryTable columns-type="operator_history" device-type="fanlocal" :device-list-api="baseList" designScope="operator_history" :scroll="scroll"/>
           </div>
         </a-tab-pane>
-        <a-tab-pane key="6" tab="测风结果">
-          <ResultTable v-if="activeKey == 6" deviceType="windrect_list" />
+        <a-tab-pane key="6" tab="测风结果" v-if="activeKey === '6' && isRefresh">
+          <ResultTable v-if="activeKey == 6" deviceType="windrect_list" :scroll="scroll"/>
         </a-tab-pane>
       </a-tabs>
     </div>
@@ -139,7 +142,7 @@
 
 <script setup lang="ts">
   import DeviceEcharts from '../comment/DeviceEcharts.vue';
-  import { onBeforeMount, computed, ComputedRef, ref, onMounted, onUnmounted, reactive, toRaw, toRef, toRefs, Ref } from 'vue';
+  import { onBeforeMount,ref, onMounted, onUnmounted, reactive, toRaw, nextTick, watch } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import MonitorTable from '../comment/MonitorTable.vue';
   import ModalTable from './components/modalTable.vue';
@@ -147,7 +150,6 @@
   import HistoryTable from '../comment/HistoryTable.vue';
   import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
   import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
-  import { initWebSocket, getRecordList } from '/@/hooks/web/useVentWebSocket';
   import { deviceControlApi } from '/@/api/vent/index';
   import { mountedThree, destroy, addFmText, play, setModelType, playCamera } from './windrect.threejs';
   import LivePlayer from '@liveqing/liveplayer-v3';
@@ -155,6 +157,12 @@
   import { list as baseList } from '../../deviceManager/windfindingTabel/windfinding.api';
   import { message, Progress } from 'ant-design-vue';
   import { chartsColumns } from './windrect.data';
+  import { setDivHeight } from '/@/utils/event';
+
+  const isRefresh = ref(true)
+  const scroll = reactive({
+    y: 240
+  })
 
   const modalTable = ref();
   const runNum = ref(5); //设备运行数量
@@ -628,6 +636,13 @@
     });
   };
 
+  watch(() => scroll.y, () => {
+    isRefresh.value = false
+    nextTick(() => {
+      isRefresh.value = true
+    })
+  })
+
   onBeforeMount(() => {
     getPathList();
   });
@@ -656,7 +671,7 @@
 
   
   :deep(.@{ventSpace}-tabs-tabpane-active) {
-    overflow: auto;
+    height: 100%;
   }
   .head-line {
     display: flex;
@@ -697,7 +712,4 @@
       }
     }
   }
-  .@{ventSpace}-tabs-tabpane {
-    overflow-y: auto !important;
-  }
 </style>