[Feat 0000]历史数据查询计算

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

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