[Mod 0000] 给预警分析添加权限

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

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