[Mod 0000] 新增历史数据分析功能

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

@@ -0,0 +1,396 @@
+<template>
+  <div class="charts-container">
+    <a-form
+      class="form-container"
+      :model="historyParams"
+      layout="inline"
+      :label-col="{ style: { width: '100px' } }"
+      :wrapper-col="{ span: 8 }"
+      autocomplete="off"
+      @submit.prevent="handleQuery"
+    >
+      <a-form-item v-if="isShowChildType" label="设备类型">
+        <a-select v-model:value="deviceKind" style="width: 200px" @change="deviceKindChange">
+          <a-select-option v-for="d in deviceKindOptions" :key="d.value" :value="d.value">{{ d.label }}</a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="查询设备">
+        <a-select v-model:value="historyParams.selectedDeviceId" style="width: 200px">
+          <a-select-option v-for="d in deviceOptions" :key="d.deviceID" :value="d.deviceID">{{ d.strname }}</a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="分析点位">
+        <a-select v-model:value="historyParams.selectedValueCode" style="width: 200px" @change="handleChartColumn">
+          <a-select-option v-for="item in chartsColumnList" :key="item.legend" :value="item.dataIndex">
+            {{ item.legend }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="开始时间">
+        <a-date-picker
+          v-model:value="historyParams.startTime"
+          style="width: 200px"
+          show-time
+          valueFormat="YYYY-MM-DD HH:mm:ss"
+          placeholder="请选择开始时间"
+        />
+      </a-form-item>
+      <a-form-item label="结束时间">
+        <a-date-picker
+          v-model:value="historyParams.endTime"
+          style="width: 200px"
+          show-time
+          valueFormat="YYYY-MM-DD HH:mm:ss"
+          placeholder="请选择结束时间"
+        />
+      </a-form-item>
+      <a-form-item>
+        <a-button type="primary" html-type="submit">查询</a-button>
+      </a-form-item>
+    </a-form>
+
+    <Pagination
+      v-if="isShowPagination"
+      size="small"
+      v-model:current="currentPage"
+      v-model:page-size="pageSize"
+      :total="total"
+      :show-total="(total) => `共 ${total} 条`"
+      style="position: absolute; z-index: 99; top: 2px; right: 30px"
+    />
+    <template v-if="chartData.length > 0 && historyParams.selectedValueCode">
+      <BarAndLine
+        class="device-history-echarts"
+        :xAxisPropType="resultXAxisPropType"
+        :dataSource="chartData"
+        height="580px"
+        :option="echartsOption"
+        chartsType="history"
+        :chartsColumns="currentChartsColumnList"
+      />
+    </template>
+    <template v-else>
+      <div class="no-data"> </div>
+    </template>
+  </div>
+</template>
+<script lang="ts">
+  import { ref, defineComponent, watch, reactive, onMounted, watchEffect, inject } from 'vue';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import dayjs from 'dayjs';
+  import { Select, Pagination, message } from 'ant-design-vue';
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+  import { getDictItemsByCode } from '/@/utils/dict';
+  import { defHttp } from '/@/utils/http/axios';
+  import { getDeviceHistoryData } from '@/views/vent/monitorManager/deviceMonitor/components/device/device.api';
+  const deviceList = (params) => defHttp.post({ url: '/monitor/device', params });
+  export default defineComponent({
+    name: 'DeviceEcharts',
+    components: { BarAndLine, Select, Pagination },
+    props: {
+      chartsColumns: {
+        type: Array,
+        default: () => [],
+      },
+      chartsColumnsHistory: {
+        type: Array,
+        default: () => [],
+      },
+      chartsColumnsType: {
+        type: String,
+        required: true,
+      },
+      dataSource: {
+        type: Array,
+        default: () => [],
+      },
+      deviceType: {
+        type: String,
+        required: true,
+      },
+      isShowChildType: {
+        type: Boolean,
+        default: false,
+      },
+      isShowPagination: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    setup(props) {
+      const globalConfig = inject('globalConfig');
+      const deviceKind = ref('');
+      const chartsType = ref('history');
+      const deviceId = ref('');
+      const deviceOptions = ref([]);
+      const historyParams = reactive({
+        startTime: dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss').toString(),
+        endTime: dayjs().format('YYYY-MM-DD HH:mm:ss').toString(),
+        skip: '8',
+        interval: '1h',
+        selectedDeviceId: '',
+        selectedValueCode: '',
+      });
+      const deviceKindOptions = ref([]);
+      const chartsColumnList = ref([]);
+      const currentChartsColumnList = ref([]);
+      const resultXAxisPropType = ref('createtime');
+      const chartData = ref<any[]>([]);
+      const currentPage = ref<number>(1);
+      const pageSize = ref<number>(20);
+      const total = ref(0);
+      const baseChartColumn = [
+        {
+          legend: '最大值',
+          seriesName: '',
+          ymax: 100,
+          yname: '',
+          linetype: 'line',
+          yaxispos: 'left',
+          color: '#DA3914',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'max',
+        },
+        {
+          legend: '最小值', // average，max，median，min
+          seriesName: '',
+          ymax: 100,
+          yname: '',
+          linetype: 'line',
+          yaxispos: 'left',
+          color: '#00FFA8',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'min',
+        },
+        {
+          legend: '平均值',
+          seriesName: '',
+          ymax: 100,
+          yname: '',
+          linetype: 'line',
+          yaxispos: 'left',
+          color: '#AE19FF',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'average',
+        },
+        {
+          legend: '中位数',
+          seriesName: '',
+          ymax: 100,
+          yname: '',
+          linetype: 'line',
+          yaxispos: 'left',
+          color: '#749f83',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'median',
+        },
+      ];
+      const echartsOption = {
+        grid: {
+          top: '80px',
+          left: '20px',
+          right: '20px',
+          bottom: '5%',
+          containLabel: true,
+        },
+        legend: {
+          top: '0px',
+        },
+        toolbox: {
+          feature: {},
+        },
+        xAxis: {
+          axisLabel: {
+            interval: 0,
+          },
+        },
+      };
+
+      const onChange = (pageNumber: number) => {
+        console.log('Page: ', pageNumber);
+      };
+
+      const handleChartColumn = () => {
+        const column = chartsColumnList.value.find((item) => item['dataIndex'] === historyParams.selectedValueCode);
+        if (column) {
+          const tempColumn = JSON.parse(JSON.stringify(column));
+          tempColumn['legend'] = '实时值';
+          tempColumn['sort'] = 1;
+          tempColumn['linetype'] = 'line';
+          tempColumn['yaxispos'] = 'left';
+          tempColumn['yname'] = '';
+
+          currentChartsColumnList.value = [tempColumn, ...baseChartColumn];
+        }
+      };
+
+      const getDeviceList = async () => {
+        const columnType = deviceKind.value ? deviceKind.value : props;
+        const res = await deviceList({ devicetype: columnType, pagetype: 'normal' });
+        // debugger;
+        if (res['msgTxt'] && res['msgTxt'][0] && res['msgTxt'][0]['datalist']) {
+          deviceOptions.value = res['msgTxt'][0]['datalist'];
+          if (deviceOptions.value && deviceOptions.value.length > 0) historyParams.selectedDeviceId = deviceOptions.value[0]['deviceID'];
+        }
+      };
+
+      const deviceKindChange = async (deviceTypeValue) => {
+        const columnType = deviceTypeValue ? deviceTypeValue + '_chart' : props.deviceType + '_chart';
+        chartsColumnList.value = getTableHeaderColumns(columnType) || [];
+        if (chartsColumnList.value && chartsColumnList.value.length && chartsColumnList.value.length > 0) {
+          historyParams.selectedValueCode = chartsColumnList.value[0].dataIndex;
+        } else {
+          historyParams.selectedValueCode = '';
+        }
+        handleChartColumn();
+        await getDeviceList();
+      };
+
+      watch(
+        () => props.deviceType,
+        async (deviceTypeValue) => {
+          const columnType = deviceKind.value ? deviceKind.value + '_chart' : deviceTypeValue + '_chart';
+          deviceKindOptions.value = getDictItemsByCode(deviceTypeValue + 'kind');
+          chartsColumnList.value = getTableHeaderColumns(columnType);
+          if (chartsColumnList.value && chartsColumnList.value.length && chartsColumnList.value.length > 0) {
+            historyParams.selectedValueCode = chartsColumnList.value[0].dataIndex;
+          }
+          deviceKind.value = deviceKindOptions.value[0].value;
+          handleChartColumn();
+          await getDeviceList();
+        },
+        { immediate: true }
+      );
+
+      async function handleQuery() {
+        if (!historyParams.selectedDeviceId || !historyParams.selectedValueCode) {
+          message.warning('请选择设备和分析点位');
+          return;
+        }
+        try {
+          chartData.value = [];
+          const res = await getDeviceHistoryData({
+            deviceId: historyParams.selectedDeviceId,
+            valueCode: historyParams.selectedValueCode,
+            startTime: historyParams.startTime,
+            endTime: historyParams.endTime,
+          });
+          if (res && Array.isArray(res.list)) {
+            // average，max，median，min
+            chartData.value = res.list.map((item) => ({
+              ...item,
+              [historyParams.selectedValueCode]: Number(item.val),
+              average: Number(res.average),
+              max: Number(res.max),
+              median: Number(res.median),
+              min: Number(res.min),
+            }));
+          } else {
+            chartData.value = [];
+          }
+        } catch (e) {
+          chartData.value = [];
+        }
+      }
+
+      onMounted(async () => {
+        await getDeviceList();
+        await handleQuery();
+      });
+
+      return {
+        chartsType,
+        deviceId,
+        chartData,
+        historyParams,
+        deviceOptions,
+        resultXAxisPropType,
+        currentPage,
+        pageSize,
+        total,
+        echartsOption,
+        onChange,
+        globalConfig,
+        deviceKind,
+        chartsColumnList,
+        deviceKindOptions,
+        currentChartsColumnList,
+        handleQuery,
+        handleChartColumn,
+        deviceKindChange,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  :deep(.vent-select-dropdown) {
+    color: #000 !important;
+    .vent-select-item {
+      color: #000 !important;
+    }
+  }
+  label {
+    color: #fff !important;
+  }
+</style>
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+
+  .charts-container {
+    --image-no-camera_bg: url('/@/assets/images/vent/no-data.png');
+    position: relative;
+    height: 100%;
+    .form-container {
+      display: flex;
+      // justify-content: center;
+      margin-top: 50px !important;
+      margin-bottom: 80px !important;
+    }
+    .charts-box {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      bottom: 0;
+      top: 0px;
+    }
+
+    .@{ventSpace}-picker,
+    .@{ventSpace}-select-selector {
+      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-arrow,
+    .@{ventSpace}-picker-separator {
+      color: #fff !important;
+    }
+  }
+  .no-data {
+    width: 100%;
+    height: 475px;
+    padding-top: 80px;
+    background: var(--image-no-camera_bg) no-repeat;
+    background-position: center;
+    display: flex;
+    justify-content: center;
+    font-size: 50px;
+    color: var(--vent-text-base);
+  }
+  :deep(.@{ventSpace}-select-dropdown) {
+    color: #000 !important;
+    .@{ventSpace}-select-item {
+      color: #000 !important;
+    }
+  }
+</style>

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

@@ -3,21 +3,39 @@
     <div class="top-box">
       <div class="top-center row">
         <template v-if="deviceType == 'gate'">
-          <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation('打开前门','frontGateOpen_S')">打开前门</div>
-          <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation('关闭前门','frontGateClose_S')">关闭前门</div>
-          <div v-if="hasPermission('btn:control') && selectData.ndoorcount == '3'" class="button-box" @click="playAnimation('打开中间门','midGateOpen_S')">打开中间门</div>
-          <div v-if="hasPermission('btn:control') && selectData.ndoorcount == '3'" class="button-box" @click="playAnimation('关闭中间门','midGateClose_S')">关闭中间门</div>
-          <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation('打开后门','rearGateOpen_S')">打开后门</div>
-          <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation('关闭后门','rearGateClose_S')">关闭后门</div>
-          <div v-if="selectData['isShowGatesContrl']" class="button-box" @click="playAnimation('同时打开','sameTimeOpen')">同时打开</div>
-          <div v-if="selectData['isShowGatesContrl']" class="button-box" @click="playAnimation('同时关闭','sameTimeClose')">同时关闭</div>
+          <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation('打开前门', 'frontGateOpen_S')">打开前门</div>
+          <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation('关闭前门', 'frontGateClose_S')">关闭前门</div>
+          <div
+            v-if="hasPermission('btn:control') && selectData.ndoorcount == '3'"
+            class="button-box"
+            @click="playAnimation('打开中间门', 'midGateOpen_S')"
+            >打开中间门</div
+          >
+          <div
+            v-if="hasPermission('btn:control') && selectData.ndoorcount == '3'"
+            class="button-box"
+            @click="playAnimation('关闭中间门', 'midGateClose_S')"
+            >关闭中间门</div
+          >
+          <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation('打开后门', 'rearGateOpen_S')">打开后门</div>
+          <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation('关闭后门', 'rearGateClose_S')">关闭后门</div>
+          <div v-if="selectData['isShowGatesContrl']" class="button-box" @click="playAnimation('同时打开', 'sameTimeOpen')">同时打开</div>
+          <div v-if="selectData['isShowGatesContrl']" class="button-box" @click="playAnimation('同时关闭', 'sameTimeClose')">同时关闭</div>
         </template>
         <template v-if="deviceType == 'window'">
           <div class="row" v-if="Number(selectData.nwindownum) == 2">
-            <div v-if="hasPermission('window:AreaControl')" class="button-box" @click="playAnimation('设定前窗面积', 'frontSetValue')">设定前窗面积</div>
-            <div v-if="hasPermission('window:AreaControl')" class="button-box" @click="playAnimation('设定后窗面积', 'rearSetValue')">设定后窗面积</div>
-            <div v-if="hasPermission('window:showAngle')" class="button-box" @click="playAnimation('设定前窗角度', 'frontSetValue')">设定前窗角度</div>
-            <div v-if="hasPermission('window:showAngle')" class="button-box" @click="playAnimation('设定后窗角度', 'frontSetValue')">设定后窗角度</div>
+            <div v-if="hasPermission('window:AreaControl')" class="button-box" @click="playAnimation('设定前窗面积', 'frontSetValue')"
+              >设定前窗面积</div
+            >
+            <div v-if="hasPermission('window:AreaControl')" class="button-box" @click="playAnimation('设定后窗面积', 'rearSetValue')"
+              >设定后窗面积</div
+            >
+            <div v-if="hasPermission('window:showAngle')" class="button-box" @click="playAnimation('设定前窗角度', 'frontSetValue')"
+              >设定前窗角度</div
+            >
+            <div v-if="hasPermission('window:showAngle')" class="button-box" @click="playAnimation('设定后窗角度', 'frontSetValue')"
+              >设定后窗角度</div
+            >
           </div>
           <div class="row" v-if="hasPermission('window:fourAreaControl') && Number(selectData.nwindownum) == 4">
             <div class="button-box" @click="playAnimation('前窗1面积设置', 'frontSetValue1')">前窗1面积</div>
@@ -28,14 +46,18 @@
           <div v-if="hasPermission('window:ldkz')" class="button-box" @click="playAnimation('风窗自主调控', 'ldkz')">风窗自主调控</div>
           <div v-if="hasPermission('window:sameSet')" class="button-box" @click="playAnimation('风窗面积设置', 'sameSetValue')">设定风窗面积</div>
           <div class="row" v-if="Number(selectData.nwindownum) == 1">
-            <div v-if="hasPermission('window:AreaControl')" class="button-box" @click="playAnimation('设定风窗面积', 'frontSetValue')">设定风窗面积</div>
-            <div v-if="hasPermission('window:showAngle')" class="button-box" @click="playAnimation('设定风窗角度', 'frontSetValue')">设定风窗角度</div>
+            <div v-if="hasPermission('window:AreaControl')" class="button-box" @click="playAnimation('设定风窗面积', 'frontSetValue')"
+              >设定风窗面积</div
+            >
+            <div v-if="hasPermission('window:showAngle')" class="button-box" @click="playAnimation('设定风窗角度', 'frontSetValue')"
+              >设定风窗角度</div
+            >
           </div>
         </template>
       </div>
     </div>
     <div ref="playerRef" class="player-List">
-      <template v-if="cameraAddrs.length > 0"> 
+      <template v-if="cameraAddrs.length > 0">
         <div v-for="(item, index) in cameraAddrs" :key="index" class="player-box">
           <div class="player-name">{{ item.name }}</div>
           <div style="padding-top: 3px">
@@ -49,65 +71,102 @@
           </div>
         </div>
       </template>
-      <div class='no-player' v-else>暂无视频</div>
+      <div class="no-player" v-else>暂无视频</div>
     </div>
-    <div class="tabs-box bottom-tabs-box" :class="{ 'table-hide': !tableShow, 'table-show': tableShow }"
-      style="height: 290px" @mousedown="setDivHeight($event, 230, scroll, 0)" id="monitorBox">
+    <div
+      class="tabs-box bottom-tabs-box"
+      :class="{ 'table-hide': !tableShow, 'table-show': tableShow }"
+      style="height: 290px"
+      @mousedown="setDivHeight($event, 230, scroll, 0)"
+      id="monitorBox"
+    >
       <div :style="`padding: 5px; height: ${scroll.y + 100}px`">
         <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange" id="tabsBox">
           <a-tab-pane key="1" tab="实时监测">
-            <template
-              v-if="(deviceType.startsWith('fanlocal') || deviceType.startsWith('fanmain')) && activeKey == '1'">
-              <GroupMonitorTable ref="MonitorDataTable" :dataSource="dataSource" :columnsType="`${deviceType}_monitor`"
-                :scroll="scroll" :isAction="true" :isShowSelect="false">
+            <template v-if="(deviceType.startsWith('fanlocal') || deviceType.startsWith('fanmain')) && activeKey == '1'">
+              <GroupMonitorTable
+                ref="MonitorDataTable"
+                :dataSource="dataSource"
+                :columnsType="`${deviceType}_monitor`"
+                :scroll="scroll"
+                :isAction="true"
+                :isShowSelect="false"
+              >
               </GroupMonitorTable>
             </template>
             <template v-else>
               <!-- 工作面echarts图标 -->
-              <BarAndLine v-if="activeKey == '1' && deviceType == 'surface_history'" class="echarts-line"
-                xAxisPropType="time" :dataSource="surfaceEchartsData" height="300px"
-                :chartsColumns="surfaceChartsColumns" :option="echatsOption" />
-              <MonitorTable v-else-if="activeKey == '1'" ref="monitorTable" :columnsType="`${deviceType}_monitor`"
-                :dataSource="dataSource" design-scope="device_monitor" :isShowActionColumn="false" :isShowSelect="true"
-                title="设备监测" :scroll="{ y: scroll.y - 30 }"  @selectRow="getSelectRow">
+              <BarAndLine
+                v-if="activeKey == '1' && deviceType == 'surface_history'"
+                class="echarts-line"
+                xAxisPropType="time"
+                :dataSource="surfaceEchartsData"
+                height="300px"
+                :chartsColumns="surfaceChartsColumns"
+                :option="echatsOption"
+              />
+              <MonitorTable
+                v-else-if="activeKey == '1'"
+                ref="monitorTable"
+                :columnsType="`${deviceType}_monitor`"
+                :dataSource="dataSource"
+                design-scope="device_monitor"
+                :isShowActionColumn="false"
+                :isShowSelect="true"
+                title="设备监测"
+                :scroll="{ y: scroll.y - 30 }"
+                @selectRow="getSelectRow"
+              >
                 <template #filterCell="{ column, record }">
                   <template v-if="deviceType.startsWith('gate') || deviceType.startsWith('door')">
-                    <a-tag
-                      v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '0' && record.frontGateClose == '0'"
-                      color="red">正在运行</a-tag>
+                    <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '0' && record.frontGateClose == '0'" color="red"
+                      >正在运行</a-tag
+                    >
                     <a-tag
                       v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '0' && record.frontGateClose == 1"
-                      color="default">关闭</a-tag>
+                      color="default"
+                      >关闭</a-tag
+                    >
                     <a-tag
                       v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '1' && record.frontGateClose == '0'"
-                      color="#46C66F">打开</a-tag>
+                      color="#46C66F"
+                      >打开</a-tag
+                    >
                     <a-tag
                       v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '1' && record.frontGateClose == '1'"
-                      color="#FF0000">点位异常</a-tag>
-                    <a-tag
-                      v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '0' && record.rearGateClose == '0'"
-                      color="red">正在运行</a-tag>
+                      color="#FF0000"
+                      >点位异常</a-tag
+                    >
+                    <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '0' && record.rearGateClose == '0'" color="red"
+                      >正在运行</a-tag
+                    >
                     <a-tag
                       v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '0' && record.rearGateClose == '1'"
-                      color="default">关闭</a-tag>
+                      color="default"
+                      >关闭</a-tag
+                    >
                     <a-tag
                       v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '1' && record.rearGateClose == '0'"
-                      color="#46C66F">打开</a-tag>
+                      color="#46C66F"
+                      >打开</a-tag
+                    >
                     <a-tag
                       v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '1' && record.rearGateClose == '1'"
-                      color="#FF0000">点位异常</a-tag>
-                    <a-tag
-                      v-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '0' && record.midGateClose == '0'"
-                      color="red">正在运行</a-tag>
-                    <a-tag
-                      v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '0' && record.midGateClose == 1"
-                      color="default">关闭</a-tag>
-                    <a-tag
-                      v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '1' && record.midGateClose == '0'"
-                      color="#46C66F">打开</a-tag>
-                    <a-tag
-                      v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '1' && record.midGateClose == '1'"
-                      color="#FF0000">点位异常</a-tag>
+                      color="#FF0000"
+                      >点位异常</a-tag
+                    >
+                    <a-tag v-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '0' && record.midGateClose == '0'" color="red"
+                      >正在运行</a-tag
+                    >
+                    <a-tag v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '0' && record.midGateClose == 1" color="default"
+                      >关闭</a-tag
+                    >
+                    <a-tag v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '1' && record.midGateClose == '0'" color="#46C66F"
+                      >打开</a-tag
+                    >
+                    <a-tag v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '1' && record.midGateClose == '1'" color="#FF0000"
+                      >点位异常</a-tag
+                    >
                     <template v-if="column.dataIndex === 'ndoortype'">
                       <span>{{ render.renderDictText(record.ndoortype, 'ndoortype') }}</span>
                     </template>
@@ -116,14 +175,13 @@
                     </template>
                   </template>
                   <template v-else-if="deviceType.startsWith('windrect')">
-                    <a-tag v-if="column.dataIndex === 'sign'"
-                      :color="record.sign == 0 ? '#95CF65' : record.sign == 1 ? '#4590EA' : '#9876AA'">
-                      {{ record.sign == 0 ? '高位' : record.sign == 1 ? '中位' : '低位' }}</a-tag>
+                    <a-tag v-if="column.dataIndex === 'sign'" :color="record.sign == 0 ? '#95CF65' : record.sign == 1 ? '#4590EA' : '#9876AA'">
+                      {{ record.sign == 0 ? '高位' : record.sign == 1 ? '中位' : '低位' }}</a-tag
+                    >
                     <template v-if="record && column && column.dataIndex === 'isRun' && record.isRun">
-                      <a-tag v-if="record.isRun == -2 || record.isRun == -1"
-                        :color="record.isRun == -2 ? '#95CF65' : '#ED5700'">{{
-                          record.isRun == -2 ? '空闲' : '等待'
-                        }}</a-tag>
+                      <a-tag v-if="record.isRun == -2 || record.isRun == -1" :color="record.isRun == -2 ? '#95CF65' : '#ED5700'">{{
+                        record.isRun == -2 ? '空闲' : '等待'
+                      }}</a-tag>
                       <a-tag v-else-if="record.isRun == 100" color="#4693FF">完成</a-tag>
                       <Progress v-else :percent="Number(record.isRun)" size="small" status="active" />
                     </template>
@@ -141,19 +199,16 @@
                     <a-tag v-if="column.dataIndex === 'stateConn' && record.stateConn == '0'" color="red">断开</a-tag>
                   </template>
                   <template v-else-if="deviceType.startsWith('gaspatrol')">
-                    <a-tag v-if="column.dataIndex === 'deviceConnect_str' && record.deviceConnect_str.endsWith('正常')"
-                      color="green">{{
-                        record.deviceConnect_str
-                      }}</a-tag>
-                    <a-tag v-if="column.dataIndex === 'deviceConnect_str' && record.deviceConnect_str.endsWith('断开')"
-                      color="red">{{
-                        record.deviceConnect_str
-                      }}</a-tag>
-                  </template>
-                  <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 ? '断开' : '未监测'
+                    <a-tag v-if="column.dataIndex === 'deviceConnect_str' && record.deviceConnect_str.endsWith('正常')" color="green">{{
+                      record.deviceConnect_str
                     }}</a-tag>
+                    <a-tag v-if="column.dataIndex === 'deviceConnect_str' && record.deviceConnect_str.endsWith('断开')" color="red">{{
+                      record.deviceConnect_str
+                    }}</a-tag>
+                  </template>
+                  <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 ? '断开' : '未监测' }}</a-tag
+                  >
                   <template v-else-if="column.dataIndex === 'warnLevel'">
                     <a-tag v-if="record.warnLevel == '101'" color="green">低风险</a-tag>
                     <a-tag v-else-if="record.warnLevel == '102'" color="#FF5812">一般风险</a-tag>
@@ -174,39 +229,55 @@
           <a-tab-pane key="2" tab="历史数据" v-if="!noHistoryArr().find((item) => deviceType.startsWith(item))">
             <div class="tab-item" v-if="activeKey == '2'">
               <template v-if="deviceType.startsWith('fanmain')">
-                <HistoryTableNew class="w-100% h-100%" :device-code="`${deviceType}`" :scroll="scroll"
-                  dict-code="fan_dict" />
+                <HistoryTableNew class="w-100% h-100%" :device-code="`${deviceType}`" :scroll="scroll" dict-code="fan_dict" />
               </template>
               <template v-else-if="deviceType.startsWith('fanlocal')">
                 <HistoryTableNew class="w-100% hM-100%" :device-code="`${deviceType}`" :scroll="scroll" dict-code="fanlocal_dict" />
               </template>
               <template v-else>
-                <HistoryTable ref="historyTable" :sysId="systemID" :columns-type="`${deviceType}`"
-                  :device-type="deviceType" designScope="device-history" :scroll="scroll" />
+                <HistoryTable
+                  ref="historyTable"
+                  :sysId="systemID"
+                  :columns-type="`${deviceType}`"
+                  :device-type="deviceType"
+                  designScope="device-history"
+                  :scroll="scroll"
+                />
               </template>
             </div>
           </a-tab-pane>
           <a-tab-pane key="3" tab="报警历史" v-if="!noWarningArr.find((item) => deviceType.startsWith(item))">
             <div class="tab-item">
-              <AlarmHistoryTable ref="alarmHistoryTable" v-if="activeKey == '3'" :sysId="systemID" columns-type="alarm"
+              <AlarmHistoryTable
+                ref="alarmHistoryTable"
+                v-if="activeKey == '3'"
+                :sysId="systemID"
+                columns-type="alarm"
                 :device-type="deviceType"
                 :device-list-api="getDeviceList.bind(null, { devicekind: deviceType, sysId: systemID, pageSize: 10000 })"
-                :scroll="scroll" designScope="alarm-history" />
+                :scroll="scroll"
+                designScope="alarm-history"
+              />
             </div>
           </a-tab-pane>
           <a-tab-pane key="4" tab="操作历史" v-if="haveHandlerArr.find((item) => deviceType.startsWith(item))">
             <div class="tab-item">
-              <HandlerHistoryTable ref="handlerHistoryTable" v-if="activeKey == '4'" :sysId="systemID"
-                columns-type="operator_history" :device-type="deviceType"
+              <HandlerHistoryTable
+                ref="handlerHistoryTable"
+                v-if="activeKey == '4'"
+                :sysId="systemID"
+                columns-type="operator_history"
+                :device-type="deviceType"
                 :device-list-api="getDeviceList.bind(null, { devicekind: deviceType, sysId: systemID })"
-                :scroll="scroll" designScope="operator-history" />
+                :scroll="scroll"
+                designScope="operator-history"
+              />
             </div>
           </a-tab-pane>
         </a-tabs>
       </div>
     </div>
-    <component v-if="modalVisible" :is="currentModal" v-model:visible="modalVisible" :dataSource="dataSource"
-      :activeID="activeID" />
+    <component v-if="modalVisible" :is="currentModal" v-model:visible="modalVisible" :dataSource="dataSource" :activeID="activeID" />
     <HandleModal
       v-if="!globalConfig?.simulatedPassword"
       :modal-is-show="modalIsShow"
@@ -227,1267 +298,1259 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, ComponentOptions, shallowRef, reactive, defineProps, watch, toRaw, nextTick,unref, inject } from 'vue';
-import { list, getDeviceList, getDepartmentInfo } from './device.api';
-import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
-import HistoryTable from '../comment/HistoryTable.vue';
-import HistoryTableNew from '/@/views/vent/comment/history/HistoryTable.vue';
-import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
-import MonitorTable from '../comment/MonitorTable.vue';
-import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
-import { message, Progress, } from 'ant-design-vue';
-import { useRouter } from 'vue-router';
-import { setDivHeight } from '/@/utils/event';
-import { render } from '/@/utils/common/renderUtils';
-import HandleModal from './modal.vue';
-import {
-  haveHandlerArr,
-  noWarningArr,
-  surfaceChartsColumns,
-  noHistoryArr,
-} from './device.data';
-import { getDictItemsByCode } from '/@/utils/dict';
-import BarAndLine from '/@/components/chart/BarAndLine.vue';
-import { useGlobSetting } from '/@/hooks/setting';
-import { useCamera } from '/@/hooks/system/useCamera';
-import { usePermission } from '/@/hooks/web/usePermission';
-import { deviceControlApi } from '/@/api/vent/index';
-import SupplyAir from '../windowMonitor/components/supplyAir.vue';
-import { updateWindowAutoAdjustStatus } from '../windowMonitor/window.api';
-
-type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
-const glob = useGlobSetting();
-
-const props = defineProps({
-  deviceType: {
-    type: Object,
-    default: () => { },
-  },
-});
-const echatsOption = {
-  grid: {
-    top: '35',
-    left: '30',
-    right: '45',
-    bottom: '25',
-    containLabel: true,
-  },
-  toolbox: {
-    feature: {},
-  },
-};
-const initData = {
-  deviceID: '',
-  deviceType: '',
-  strname: '',
-  dataDh: '-', //压差
-  dataDtestq: '-', //测试风量
-  sourcePressure: '-', //气源压力
-  dataDequivalarea: '-',
-  netStatus: '0', //通信状态
-  fault: '气源压力超限',
-  forntArea: '0',
-  rearArea: '0',
-  frontRearDifference: '-',
-  rearPresentValue: '-',
-  maxarea: 0,
-  nwindownum: 0,
-};
-const { hasPermission } = usePermission();
-const { getCamera, removeCamera, getPlayer } = useCamera();
-const playerRef = ref()
-const router = useRouter();
-const monitorTable = ref();
-const historyTable = ref();
-const alarmHistoryTable = ref();
-const handlerHistoryTable = ref();
-// 模态框
-const currentModal = shallowRef<Nullable<ComponentOptions>>(null); //模态框
-const modalVisible = ref<Boolean>(false); // 模态框是否可见
-
-const tableShow = ref(true); //是否显示树形菜单
-const modalIsShow = ref<boolean>(false); // 是否显示模态框
-const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
-const modalType = ref(''); // 模态框内容显示类型，设备操作类型
-const deviceList = ref<DeviceType[]>([]); //关联设备列表
-const deviceActive = ref('');
-const activeKey = ref('1'); // tab key
-const dataSource = shallowRef([]); // 实时监测数据
-const selectData = ref({})
-const currentData = ref(initData);
-const majorPathEchartsData = ref({}); // 关键路线echarts数据
-const surfaceEchartsData = ref<any[]>(); // 工作面历史记录，echarts数据
-const activeID = ref(''); // 打开详情modal时监测的设备id
-const deviceType = ref(''); // 监测设备类型
-const selectRowIndex = ref(-1)
-const systemID = ref(''); // 系统监测时，系统id
-const cameraAddrs = ref([]);
-const targetVolume = ref(0);
-const showTargetModal = ref(false);
-const scroll = reactive({
-  y: 180,
-});
-const globalConfig = inject('globalConfig');
-let departmentInfo: Null | Object = null;
-function tabChange(activeKeyVal) {
-  activeKey.value = activeKeyVal;
-}
-
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = undefined;
-function getMonitor(flag?) {
-  if (deviceType.value) {
-    if (timer) timer = null;
-    if (Object.prototype.toString.call(timer) === '[object Null]') {
-      timer = setTimeout(
-        async () => {
-          const data = await getDataSource();
-          currentData.value = data
-          if (timer) {
-            getMonitor();
-          }
-        },
-        flag ? 0 : 1000
-      );
+  import { ref, onMounted, onUnmounted, ComponentOptions, shallowRef, reactive, defineProps, watch, toRaw, nextTick, unref, inject } from 'vue';
+  import { list, getDeviceList, getDepartmentInfo } from './device.api';
+  import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
+  import HistoryTable from '../comment/HistoryTable.vue';
+  import HistoryTableNew from '/@/views/vent/comment/history/HistoryTable.vue';
+  import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
+  import MonitorTable from '../comment/MonitorTable.vue';
+  import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
+  import { message, Progress } from 'ant-design-vue';
+  import { useRouter } from 'vue-router';
+  import { setDivHeight } from '/@/utils/event';
+  import { render } from '/@/utils/common/renderUtils';
+  import HandleModal from './modal.vue';
+  import { haveHandlerArr, noWarningArr, surfaceChartsColumns, noHistoryArr } from './device.data';
+  import { getDictItemsByCode } from '/@/utils/dict';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { useCamera } from '/@/hooks/system/useCamera';
+  import { usePermission } from '/@/hooks/web/usePermission';
+  import { deviceControlApi } from '/@/api/vent/index';
+  import SupplyAir from '../windowMonitor/components/supplyAir.vue';
+  import { updateWindowAutoAdjustStatus } from '../windowMonitor/window.api';
+
+  type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
+  const glob = useGlobSetting();
+
+  const props = defineProps({
+    deviceType: {
+      type: Object,
+      default: () => {},
+    },
+  });
+  const echatsOption = {
+    grid: {
+      top: '35',
+      left: '30',
+      right: '45',
+      bottom: '25',
+      containLabel: true,
+    },
+    toolbox: {
+      feature: {},
+    },
+  };
+  const initData = {
+    deviceID: '',
+    deviceType: '',
+    strname: '',
+    dataDh: '-', //压差
+    dataDtestq: '-', //测试风量
+    sourcePressure: '-', //气源压力
+    dataDequivalarea: '-',
+    netStatus: '0', //通信状态
+    fault: '气源压力超限',
+    forntArea: '0',
+    rearArea: '0',
+    frontRearDifference: '-',
+    rearPresentValue: '-',
+    maxarea: 0,
+    nwindownum: 0,
+  };
+  const { hasPermission } = usePermission();
+  const { getCamera, removeCamera, getPlayer } = useCamera();
+  const playerRef = ref();
+  const router = useRouter();
+  const monitorTable = ref();
+  const historyTable = ref();
+  const alarmHistoryTable = ref();
+  const handlerHistoryTable = ref();
+  // 模态框
+  const currentModal = shallowRef<Nullable<ComponentOptions>>(null); //模态框
+  const modalVisible = ref<Boolean>(false); // 模态框是否可见
+
+  const tableShow = ref(true); //是否显示树形菜单
+  const modalIsShow = ref<boolean>(false); // 是否显示模态框
+  const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
+  const modalType = ref(''); // 模态框内容显示类型，设备操作类型
+  const deviceList = ref<DeviceType[]>([]); //关联设备列表
+  const deviceActive = ref('');
+  const activeKey = ref('1'); // tab key
+  const dataSource = shallowRef([]); // 实时监测数据
+  const selectData = ref({});
+  const currentData = ref(initData);
+  const majorPathEchartsData = ref({}); // 关键路线echarts数据
+  const surfaceEchartsData = ref<any[]>(); // 工作面历史记录，echarts数据
+  const activeID = ref(''); // 打开详情modal时监测的设备id
+  const deviceType = ref(''); // 监测设备类型
+  const selectRowIndex = ref(-1);
+  const systemID = ref(''); // 系统监测时，系统id
+  const cameraAddrs = ref([]);
+  const targetVolume = ref(0);
+  const showTargetModal = ref(false);
+  const scroll = reactive({
+    y: 180,
+  });
+  const globalConfig = inject('globalConfig');
+  let departmentInfo: Null | Object = null;
+  function tabChange(activeKeyVal) {
+    activeKey.value = activeKeyVal;
+  }
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = undefined;
+  function getMonitor(flag?) {
+    if (deviceType.value) {
+      if (timer) timer = null;
+      if (Object.prototype.toString.call(timer) === '[object Null]') {
+        timer = setTimeout(
+          async () => {
+            const data = await getDataSource();
+            currentData.value = data;
+            if (timer) {
+              getMonitor();
+            }
+          },
+          flag ? 0 : 1000
+        );
+      }
     }
   }
-}
-
-async function getDataSource() {
-  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[]>[];
-    result.forEach((item) => {
-      const data = item['datalist'].filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      });
-      
-      if (item.type != 'sys') {
-        if (item.type === 'majorpath') {
-          deviceArr.unshift({ deviceType: item.type, deviceName: item['typeName'], datalist: item['datalist'][0]['paths'] });
-          majorPathEchartsData.value = item['datalist'][0];
-        } else if (item.type.startsWith('surface_history')) {
-          surfaceEchartsData.value = item['datalist'][0];
-          deviceArr.unshift({
-            deviceType: item.type,
-            deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
-            datalist: data,
-          });
-        } else {
-          deviceArr.unshift({
-            deviceType: item.type,
-            deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
-            datalist: data,
-          });
-        }
-      }
-    });
 
-    deviceList.value = deviceArr;
-    if (deviceArr.length > 0) {
-      deviceActive.value = deviceArr[0].deviceType;
-      monitorChange(0);
-    }
-  } else {
-    let res = null;
-    if (systemID.value) {
-      res = await list({ devicetype: 'sys', types: deviceType.value, systemID: systemID.value });
-      if (res && res.msgTxt) {
-        const result = res.msgTxt;
-        result.forEach((item) => {
-          const data = item['datalist'].filter((data: any) => {
-            const readData = data.readData;
-            return Object.assign(data, readData);
-          });
-          if (item.type != 'sys') {
-            if (item.type.startsWith('majorpath') && item.type == deviceType.value) {
-              dataSource.value = item['datalist'][0]['paths'];
-              majorPathEchartsData.value = item['datalist'][0];
-              return;
-            } else if (item.type == deviceType.value) {
-              if (item.type == 'surface_history') {
-                // 工作面图标数据
-                surfaceEchartsData.value = item['datalist'][0];
-              } else {
-                dataSource.value = data;
-                console.log('关联设备数据--------------->', data);
-              }
-              return;
-            }
-          }
+  async function getDataSource() {
+    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[]>[];
+      result.forEach((item) => {
+        const data = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
         });
-      }
-    } else {
-      let resultData, searchForm;
-      if (monitorTable.value) {
-        const formData = monitorTable.value.getForm();
-        searchForm = formData.getFieldsValue();
-      }
 
-      if (monitorTable.value) {
-        if (deviceType.value.startsWith('safetymonitor')) {
-          resultData = await list({ devicetype: deviceType.value, pagetype: 'normal', filterParams: { ...searchForm } });
-        } else if (deviceType.value.startsWith('location')) {
-          if (!departmentInfo) {
-            departmentInfo = await getDepartmentInfo({});
+        if (item.type != 'sys') {
+          if (item.type === 'majorpath') {
+            deviceArr.unshift({ deviceType: item.type, deviceName: item['typeName'], datalist: item['datalist'][0]['paths'] });
+            majorPathEchartsData.value = item['datalist'][0];
+          } else if (item.type.startsWith('surface_history')) {
+            surfaceEchartsData.value = item['datalist'][0];
+            deviceArr.unshift({
+              deviceType: item.type,
+              deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
+              datalist: data,
+            });
+          } else {
+            deviceArr.unshift({
+              deviceType: item.type,
+              deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
+              datalist: data,
+            });
           }
-          let department = null;
-          if (departmentInfo && locationForm && locationForm['department']) {
-            for (const key in departmentInfo) {
-              const item = departmentInfo[key];
-              if (item['id'] === locationForm['department']) {
-                department = item;
-                break;
+        }
+      });
+
+      deviceList.value = deviceArr;
+      if (deviceArr.length > 0) {
+        deviceActive.value = deviceArr[0].deviceType;
+        monitorChange(0);
+      }
+    } else {
+      let res = null;
+      if (systemID.value) {
+        res = await list({ devicetype: 'sys', types: deviceType.value, systemID: systemID.value });
+        if (res && res.msgTxt) {
+          const result = res.msgTxt;
+          result.forEach((item) => {
+            const data = item['datalist'].filter((data: any) => {
+              const readData = data.readData;
+              return Object.assign(data, readData);
+            });
+            if (item.type != 'sys') {
+              if (item.type.startsWith('majorpath') && item.type == deviceType.value) {
+                dataSource.value = item['datalist'][0]['paths'];
+                majorPathEchartsData.value = item['datalist'][0];
+                return;
+              } else if (item.type == deviceType.value) {
+                if (item.type == 'surface_history') {
+                  // 工作面图标数据
+                  surfaceEchartsData.value = item['datalist'][0];
+                } else {
+                  dataSource.value = data;
+                  console.log('关联设备数据--------------->', data);
+                }
+                return;
               }
             }
-          }
-          resultData = await list({
-            devicetype: deviceType.value,
-            pagetype: 'normal',
-            filterParams: {
-              strinstallpos: locationForm['stationname'] ? locationForm['stationname'] : '',
-              userName: locationForm['strname'] ? locationForm['strname'] : '',
-              userJson: department && department['name'] ? department['name'] : '',
-            },
           });
-        } else if (deviceType.value.startsWith('vehicle')) {
-          resultData = await list({
-            devicetype: deviceType.value,
-            pagetype: 'normal',
-            filterParams: {
-              strinstallpos: locationForm['stationname'] ? locationForm['stationname'] : '',
-              vehicleName: locationForm['strname'] ? locationForm['strname'] : '',
-            },
-          });
-        } else {
-          resultData = await list({ devicetype: deviceType.value, pagetype: 'normal' });
         }
       } else {
-        // 非安全监控
-        resultData = await list({ devicetype: deviceType.value, pagetype: 'normal' });
-      }
-      if (resultData && resultData.msgTxt) {
-        const result = resultData.msgTxt[0];
-        if (result) {
-          const data = result['datalist'].filter((data: any) => {
-            const readData = data.readData;
-            return Object.assign(data, readData);
-          });
+        let resultData, searchForm;
+        if (monitorTable.value) {
+          const formData = monitorTable.value.getForm();
+          searchForm = formData.getFieldsValue();
+        }
+
+        if (monitorTable.value) {
           if (deviceType.value.startsWith('safetymonitor')) {
-            const resultData = <any[]>[];
-            // 如果是安全监控的数据时需要过滤常见设备数据，根据设定的常用安全监控字典去匹配
-            const dictCodes = getDictItemsByCode('safetynormal');
-            if (searchForm && !searchForm['dataTypeName'] && dictCodes && dictCodes.length) {
-              for (let i = 0; i < dictCodes.length; i++) {
-                const dict = dictCodes[i];
-                data.forEach((item) => {
-                  if (dict['value'] == item['dataTypeName']) {
-                    resultData.push(item);
-                  }
-                });
+            resultData = await list({ devicetype: deviceType.value, pagetype: 'normal', filterParams: { ...searchForm } });
+          } else if (deviceType.value.startsWith('location')) {
+            if (!departmentInfo) {
+              departmentInfo = await getDepartmentInfo({});
+            }
+            let department = null;
+            if (departmentInfo && locationForm && locationForm['department']) {
+              for (const key in departmentInfo) {
+                const item = departmentInfo[key];
+                if (item['id'] === locationForm['department']) {
+                  department = item;
+                  break;
+                }
               }
-              dataSource.value = resultData;
-            } else {
-              dataSource.value = data;
             }
+            resultData = await list({
+              devicetype: deviceType.value,
+              pagetype: 'normal',
+              filterParams: {
+                strinstallpos: locationForm['stationname'] ? locationForm['stationname'] : '',
+                userName: locationForm['strname'] ? locationForm['strname'] : '',
+                userJson: department && department['name'] ? department['name'] : '',
+              },
+            });
+          } else if (deviceType.value.startsWith('vehicle')) {
+            resultData = await list({
+              devicetype: deviceType.value,
+              pagetype: 'normal',
+              filterParams: {
+                strinstallpos: locationForm['stationname'] ? locationForm['stationname'] : '',
+                vehicleName: locationForm['strname'] ? locationForm['strname'] : '',
+              },
+            });
           } else {
-            let tableData: any[] = [];
-            let noNetData: any[] = [];
-            data.filter((el) => {
-              if (el.netStatus == 1) {
-                tableData.push(el);
+            resultData = await list({ devicetype: deviceType.value, pagetype: 'normal' });
+          }
+        } else {
+          // 非安全监控
+          resultData = await list({ devicetype: deviceType.value, pagetype: 'normal' });
+        }
+        if (resultData && resultData.msgTxt) {
+          const result = resultData.msgTxt[0];
+          if (result) {
+            const data = result['datalist'].filter((data: any) => {
+              const readData = data.readData;
+              return Object.assign(data, readData);
+            });
+            if (deviceType.value.startsWith('safetymonitor')) {
+              const resultData = <any[]>[];
+              // 如果是安全监控的数据时需要过滤常见设备数据，根据设定的常用安全监控字典去匹配
+              const dictCodes = getDictItemsByCode('safetynormal');
+              if (searchForm && !searchForm['dataTypeName'] && dictCodes && dictCodes.length) {
+                for (let i = 0; i < dictCodes.length; i++) {
+                  const dict = dictCodes[i];
+                  data.forEach((item) => {
+                    if (dict['value'] == item['dataTypeName']) {
+                      resultData.push(item);
+                    }
+                  });
+                }
+                dataSource.value = resultData;
               } else {
-                noNetData.push(el);
+                dataSource.value = data;
               }
-            });
-            dataSource.value = [...tableData, ...noNetData];
+            } else {
+              let tableData: any[] = [];
+              let noNetData: any[] = [];
+              data.filter((el) => {
+                if (el.netStatus == 1) {
+                  tableData.push(el);
+                } else {
+                  noNetData.push(el);
+                }
+              });
+              dataSource.value = [...tableData, ...noNetData];
+            }
+          } else {
+            dataSource.value = [];
           }
         } else {
           dataSource.value = [];
         }
-      } else {
-        dataSource.value = [];
       }
     }
+    const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
+    return data;
   }
-  const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
-  return data;
-}
 
+  function toHide() {
+    tableShow.value = !tableShow.value;
+    document.getElementById('monitorBox').addEventListener('animationend', () => {
+      if (!tableShow.value) {
+        document.getElementById('monitorBox').style.height = '0px';
+      } else {
+        document.getElementById('monitorBox').style.height = '290';
+      }
+    });
+  }
 
-function toHide() {
-  tableShow.value = !tableShow.value;
-  document.getElementById('monitorBox').addEventListener('animationend', () => {
-    if (!tableShow.value) {
-      document.getElementById('monitorBox').style.height = '0px';
-    } else {
-      document.getElementById('monitorBox').style.height = '290';
+  function monitorChange(index) {
+    dataSource.value = [];
+    deviceActive.value = deviceList.value[index].deviceType;
+    if (deviceType.value != deviceActive.value) deviceType.value = deviceActive.value;
+    if (activeKey.value == '1' && monitorTable.value) {
+      monitorTable.value.setLoading(true);
+      dataSource.value = deviceList.value[index].datalist;
+    }
+    if (activeKey.value == '2' && historyTable.value) {
+      historyTable.value.setLoading(true);
+    }
+    if (activeKey.value == '3' && alarmHistoryTable.value) {
+      alarmHistoryTable.value.setLoading(true);
+    }
+    if (activeKey.value == '4' && handlerHistoryTable.value) {
+      handlerHistoryTable.value.setLoading(true);
     }
-  });
-}
-
-
-function monitorChange(index) {
-  dataSource.value = [];
-  deviceActive.value = deviceList.value[index].deviceType;
-  if (deviceType.value != deviceActive.value) deviceType.value = deviceActive.value;
-  if (activeKey.value == '1' && monitorTable.value) {
-    monitorTable.value.setLoading(true);
-    dataSource.value = deviceList.value[index].datalist;
-  }
-  if (activeKey.value == '2' && historyTable.value) {
-    historyTable.value.setLoading(true);
-  }
-  if (activeKey.value == '3' && alarmHistoryTable.value) {
-    alarmHistoryTable.value.setLoading(true);
-  }
-  if (activeKey.value == '4' && handlerHistoryTable.value) {
-    handlerHistoryTable.value.setLoading(true);
   }
-}
 
   // 切换检测数据
-async function getSelectRow(selectRow, index) {
-  if (!selectRow) return;
-  selectRowIndex.value = index;
-  selectData.value = selectRow;
-  
-  cameraAddrs.value = await getCamera(selectRow.deviceID, playerRef.value, null, true);
-  if(cameraAddrs.value && cameraAddrs.value.length > 0){
-    nextTick(async() => {
-      for(let i=0; i<cameraAddrs.value.length; i++){
-        const item = cameraAddrs.value[i]
-        const fileExtension = item.addr.split('.').pop();
-        if (item['addr'] && item['addr'].includes('0.0.0.0')) {
-          item['addr'] = item['addr'].replace('0.0.0.0', window.location.hostname);
-        }
-        if(item['addr'].startsWith('rtsp://')) {
-          const videoDom = document.getElementById('video' + i);
-          if(videoDom){
-            const server = new window['WebRtcStreamer'](
-              videoDom,
-              VUE_APP_URL.webRtcUrl.startsWith('/') ? location.protocol + VUE_APP_URL.webRtcUrl : VUE_APP_URL.webRtcUrl
-            );
-            await server.connect(item['addr']);
-            videoDom.play();
+  async function getSelectRow(selectRow, index) {
+    if (!selectRow) return;
+    selectRowIndex.value = index;
+    selectData.value = selectRow;
+
+    cameraAddrs.value = await getCamera(selectRow.deviceID, playerRef.value, null, true);
+    if (cameraAddrs.value && cameraAddrs.value.length > 0) {
+      nextTick(async () => {
+        for (let i = 0; i < cameraAddrs.value.length; i++) {
+          const item = cameraAddrs.value[i];
+          const fileExtension = item.addr.split('.').pop();
+          if (item['addr'] && item['addr'].includes('0.0.0.0')) {
+            item['addr'] = item['addr'].replace('0.0.0.0', window.location.hostname);
+          }
+          if (item['addr'].startsWith('rtsp://')) {
+            const videoDom = document.getElementById('video' + i);
+            if (videoDom) {
+              const server = new window['WebRtcStreamer'](
+                videoDom,
+                VUE_APP_URL.webRtcUrl.startsWith('/') ? location.protocol + VUE_APP_URL.webRtcUrl : VUE_APP_URL.webRtcUrl
+              );
+              await server.connect(item['addr']);
+              videoDom.play();
+            }
+          } else {
+            getPlayer(fileExtension, 'player' + i, item['devicekind'], item['addr'], item['cameraRate'], { width: 755, height: 490 });
           }
-        }else{
-          getPlayer(fileExtension, 'player' + i,item['devicekind'], item['addr'], item['cameraRate'], {width: 755, height: 490})
         }
-      }
-    })
-  }
-}
-
-const playAnimation = (title, flag) => {
-  modalType.value = flag + '';
-  modalTitle.value = title;
-  modalIsShow.value = true;
-};
-const handleOK = async(passWord, handlerState, value) => {
-  if (!passWord && !globalConfig?.simulatedPassword) {
-    message.warning('请输入密码！');
-    return;
+      });
+    }
   }
-  
-  if (handlerState == 'sameSetValue') {
-    const data1 = {
-      deviceid: selectData.value.deviceID,
-      devicetype: selectData.value.deviceType,
-      paramcode: 'frontSetValue',
-      password: passWord || globalConfig?.simulatedPassword,
-      value: value ? value : null,
-    };
-    const data2 = {
-      deviceid: selectData.value.deviceID,
-      devicetype: selectData.value.deviceType,
-      paramcode: 'rearSetValue',
-      password: passWord || globalConfig?.simulatedPassword,
-      value: value ? value : null,
-    };
-    const res1 = await deviceControlApi(data1);
-    const res2 = await deviceControlApi(data2);
-    if (res1.success && res2.success) {
-      message.success('指令已下发成功！');
-    } else {
-      message.error(res1.message);
-    }
-    handleCancel();
-  }else if(handlerState == 'ldkz') {
-    const params = {
-      windowId: selectData.value.deviceID,
-      auto: 1,
-      fengliangF: value,
-    };
-    updateWindowAutoAdjustStatus(params).then((res) => {
-      if (res.success) {
-        if (globalConfig.History_Type == 'remote') {
-          message.success('指令已下发至生产管控平台成功！');
-        } else {
-          message.success('指令已下发成功！');
-        }
-        handleCancel();
-        targetVolume.value = value;
-        showTargetModal.value = true;
+
+  const playAnimation = (title, flag) => {
+    modalType.value = flag + '';
+    modalTitle.value = title;
+    modalIsShow.value = true;
+  };
+  const handleOK = async (passWord, handlerState, value) => {
+    if (!passWord && !globalConfig?.simulatedPassword) {
+      message.warning('请输入密码！');
+      return;
+    }
+
+    if (handlerState == 'sameSetValue') {
+      const data1 = {
+        deviceid: selectData.value.deviceID,
+        devicetype: selectData.value.deviceType,
+        paramcode: 'frontSetValue',
+        password: passWord || globalConfig?.simulatedPassword,
+        value: value ? value : null,
+      };
+      const data2 = {
+        deviceid: selectData.value.deviceID,
+        devicetype: selectData.value.deviceType,
+        paramcode: 'rearSetValue',
+        password: passWord || globalConfig?.simulatedPassword,
+        value: value ? value : null,
+      };
+      const res1 = await deviceControlApi(data1);
+      const res2 = await deviceControlApi(data2);
+      if (res1.success && res2.success) {
+        message.success('指令已下发成功！');
       } else {
-        message.error(res.message);
+        message.error(res1.message);
       }
-    });
-    return;
-  } else{
-    let data = {
-      deviceid: selectData.value.deviceID,
-      devicetype: selectData.value.deviceType,
-      paramcode: handlerState,
-      password: passWord || globalConfig?.simulatedPassword,
-      value: value ? value : null,
-    };
-    deviceControlApi(data)
-      .then((res) => {
+      handleCancel();
+    } else if (handlerState == 'ldkz') {
+      const params = {
+        windowId: selectData.value.deviceID,
+        auto: 1,
+        fengliangF: value,
+      };
+      updateWindowAutoAdjustStatus(params).then((res) => {
         if (res.success) {
-          message.success('指令已下发成功！');
+          if (globalConfig.History_Type == 'remote') {
+            message.success('指令已下发至生产管控平台成功！');
+          } else {
+            message.success('指令已下发成功！');
+          }
+          handleCancel();
+          targetVolume.value = value;
+          showTargetModal.value = true;
         } else {
           message.error(res.message);
         }
-      })
-      .finally(() => {
-        handleCancel();
       });
-  }
- 
-};
-
-const handleCancel = () => {
-  modalIsShow.value = false;
-  modalTitle.value = '';
-  modalType.value = '';
-};
-
-onMounted( () => {
-  debugger;
-  const route = unref(router.currentRoute);
-  const nameStrList = route.name.split('-')
-  if(nameStrList.length > 0){
-    deviceType.value = nameStrList[nameStrList.length -1];
-  }
-  timer = null
-  getMonitor(true)
-});
+      return;
+    } else {
+      let data = {
+        deviceid: selectData.value.deviceID,
+        devicetype: selectData.value.deviceType,
+        paramcode: handlerState,
+        password: passWord || globalConfig?.simulatedPassword,
+        value: value ? value : null,
+      };
+      deviceControlApi(data)
+        .then((res) => {
+          if (res.success) {
+            message.success('指令已下发成功！');
+          } else {
+            message.error(res.message);
+          }
+        })
+        .finally(() => {
+          handleCancel();
+        });
+    }
+  };
+
+  const handleCancel = () => {
+    modalIsShow.value = false;
+    modalTitle.value = '';
+    modalType.value = '';
+  };
+
+  onMounted(() => {
+    debugger;
+    const route = unref(router.currentRoute);
+    const nameStrList = route.name.split('-');
+    if (nameStrList.length > 0) {
+      deviceType.value = nameStrList[nameStrList.length - 1];
+    }
+    timer = null;
+    getMonitor(true);
+  });
 
-onUnmounted(() => {
-  if (timer) {
-    clearTimeout(timer);
-  }
-  timer = undefined;
-});
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = undefined;
+  });
 </script>
 
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-@import '/@/design/vent/modal.less';
-@ventSpace: zxm;
+  @import '/@/design/theme.less';
+  @import '/@/design/vent/modal.less';
+  @ventSpace: zxm;
+
+  @{theme-deepblue} {
+    .scene-box {
+      // --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
+      // --image-tree-icon-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-icon-bg.png');
+      // --image-tree-icon-hover-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-icon-hover-bg.png');
+      // --image-tree-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-bg.png');
+      // --image-tree-expansion-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-expansion-bg.png');
+      // --image-tree-expansion-hover-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-expansion-hover-bg.png');
+      // --image-location-bg: url('/@/assets/images/themify/deepblue/vent/home/location-bg.png');
+      // --image-location-hover-bg: url('/@/assets/images/themify/deepblue/vent/home/location-hover-bg.png');
+      // --image-tree-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-bg.png');
+      // --image-turn-location-top-bg: url('/@/assets/images/themify/deepblue/vent/home/turn-location-top-bg.png');
+      // --image-tree-icon-cover-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-icon-cover-bg.png');
+      // --image-tree-icon-cover-hover-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-icon-cover-hover-bg.png');
+      // --image-tohome: url('/@/assets/images/themify/deepblue/vent/home/tohome.png');
+      // --tree-node-select: #0963c1;
+      // --tree-node-hover: #0f376ccc;
+      // --location-bottom-bg: #21324855;
+      // --location-bottom-border: #aed1ff4d;
+    }
+  }
 
-@{theme-deepblue} {
   .scene-box {
-    // --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
-    // --image-tree-icon-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-icon-bg.png');
-    // --image-tree-icon-hover-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-icon-hover-bg.png');
-    // --image-tree-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-bg.png');
-    // --image-tree-expansion-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-expansion-bg.png');
-    // --image-tree-expansion-hover-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-expansion-hover-bg.png');
-    // --image-location-bg: url('/@/assets/images/themify/deepblue/vent/home/location-bg.png');
-    // --image-location-hover-bg: url('/@/assets/images/themify/deepblue/vent/home/location-hover-bg.png');
-    // --image-tree-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-bg.png');
-    // --image-turn-location-top-bg: url('/@/assets/images/themify/deepblue/vent/home/turn-location-top-bg.png');
-    // --image-tree-icon-cover-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-icon-cover-bg.png');
-    // --image-tree-icon-cover-hover-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-icon-cover-hover-bg.png');
-    // --image-tohome: url('/@/assets/images/themify/deepblue/vent/home/tohome.png');
-    // --tree-node-select: #0963c1;
-    // --tree-node-hover: #0f376ccc;
-    // --location-bottom-bg: #21324855;
-    // --location-bottom-border: #aed1ff4d;
+    --image-no-camera_bg: url('/@/assets/images/vent/no-data.png');
+    --image-camera_bg: url('/@/assets/images/themify/deepblue/vent/camera_bg.png');
+    --image-modal-top: url('/@/assets/images/vent/home/modal-top.png');
+    --image-tree-icon-bg: url('/@/assets/images/vent/home/tree-icon-bg.png');
+    --image-tree-icon-hover-bg: url('/@/assets/images/vent/home/tree-icon-hover-bg.png');
+    --image-tree-bg: url('/@/assets/images/vent/home/tree-bg.png');
+    --image-tree-expansion-bg: url('/@/assets/images/vent/home/tree-expansion-bg.png');
+    --image-tree-expansion-hover-bg: url('/@/assets/images/vent/home/tree-expansion-hover-bg.png');
+    --image-location-bg: url('/@/assets/images/vent/home/location-bg.png');
+    --image-location-hover-bg: url('/@/assets/images/vent/home/location-hover-bg.png');
+    --image-turn-location-top-bg: url('/@/assets/images/vent/home/turn-location-top-bg.png');
+    --image-tree-icon-cover-bg: url('/@/assets/images/vent/home/tree-icon-cover-bg.png');
+    --image-tree-icon-cover-hover-bg: url('/@/assets/images/vent/home/tree-icon-cover-hover-bg.png');
+    --image-tohome: url('/@/assets/images/vent/home/tohome.png');
+    --tree-node-select: #00b1c8;
+    --tree-node-hover: #00b1c855;
+    --location-bottom-bg: #00709955;
+    --location-bottom-border: #aef3ff4d;
+  }
+  .top-box {
+    z-index: 9999;
+    top: 10px !important;
   }
-}
-
-.scene-box {
-  --image-no-camera_bg: url('/@/assets/images/vent/no-data.png');
-  --image-camera_bg: url('/@/assets/images/themify/deepblue/vent/camera_bg.png');
-  --image-modal-top: url('/@/assets/images/vent/home/modal-top.png');
-  --image-tree-icon-bg: url('/@/assets/images/vent/home/tree-icon-bg.png');
-  --image-tree-icon-hover-bg: url('/@/assets/images/vent/home/tree-icon-hover-bg.png');
-  --image-tree-bg: url('/@/assets/images/vent/home/tree-bg.png');
-  --image-tree-expansion-bg: url('/@/assets/images/vent/home/tree-expansion-bg.png');
-  --image-tree-expansion-hover-bg: url('/@/assets/images/vent/home/tree-expansion-hover-bg.png');
-  --image-location-bg: url('/@/assets/images/vent/home/location-bg.png');
-  --image-location-hover-bg: url('/@/assets/images/vent/home/location-hover-bg.png');
-  --image-turn-location-top-bg: url('/@/assets/images/vent/home/turn-location-top-bg.png');
-  --image-tree-icon-cover-bg: url('/@/assets/images/vent/home/tree-icon-cover-bg.png');
-  --image-tree-icon-cover-hover-bg: url('/@/assets/images/vent/home/tree-icon-cover-hover-bg.png');
-  --image-tohome: url('/@/assets/images/vent/home/tohome.png');
-  --tree-node-select: #00b1c8;
-  --tree-node-hover: #00b1c855;
-  --location-bottom-bg: #00709955;
-  --location-bottom-border: #aef3ff4d;
-}
-.top-box{
-  z-index: 9999;
-  top: 10px !important;
-}
-.player-List{
-  position: relative;
-  width: 100%;
-  height: 580px;
-  display: flex;
-  overflow-y: auto;
-  pointer-events: auto;
-  .player-box {
-    width: 806px;
-    height: 555px;
-    padding: 17px 18px;
-    background: var(--image-camera_bg);
-    background-size: 100% 100%;
+  .player-List {
     position: relative;
-    margin: 10px 70px;
+    width: 100%;
+    height: 580px;
+    display: flex;
+    overflow-y: auto;
+    pointer-events: auto;
+    .player-box {
+      width: 806px;
+      height: 555px;
+      padding: 17px 18px;
+      background: var(--image-camera_bg);
+      background-size: 100% 100%;
+      position: relative;
+      margin: 10px 70px;
+
+      .player-name {
+        font-size: 14px;
+        position: absolute;
+        top: 35px;
+        right: 35px;
+        color: #fff;
+        background-color: hsla(0, 0%, 50%, 0.5);
+        border-radius: 2px;
+        padding: 1px 5px;
+        max-width: 120px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        z-index: 999;
+      }
 
-    .player-name {
-      font-size: 14px;
-      position: absolute;
-      top: 35px;
-      right: 35px;
-      color: #fff;
-      background-color: hsla(0, 0%, 50%, 0.5);
-      border-radius: 2px;
-      padding: 1px 5px;
-      max-width: 120px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      z-index: 999;
+      .click-box {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+      }
     }
-
-    .click-box {
-      position: absolute;
+    .no-player {
       width: 100%;
       height: 100%;
-      top: 0;
-      left: 0;
+      padding-top: 80px;
+      background: var(--image-no-camera_bg) no-repeat;
+      background-position: center;
+      display: flex;
+      justify-content: center;
+      font-size: 50px;
+      color: var(--vent-text-base);
     }
   }
-  .no-player{
+
+  .top-header {
+    position: fixed;
     width: 100%;
-    height: 100%;
-    padding-top: 80px;
-    background: var(--image-no-camera_bg) no-repeat;
-    background-position: center;
+    height: 56px;
+    background: var(--image-modal-top);
+    text-align: center;
+    line-height: 56px;
+    font-size: 28px;
+    color: #ffffffdd;
+    font-weight: 600;
+    z-index: 1;
+    letter-spacing: 2px;
+    font-size: 30px;
+  }
+
+  .select-node {
+    position: fixed;
+    top: 100px;
+    left: 10px;
+    color: var(--vent-font-color);
     display: flex;
     justify-content: center;
-    font-size: 50px;
-    color: var(--vent-text-base)
-  }
-}
-
-.top-header {
-  position: fixed;
-  width: 100%;
-  height: 56px;
-  background: var(--image-modal-top);
-  text-align: center;
-  line-height: 56px;
-  font-size: 28px;
-  color: #ffffffdd;
-  font-weight: 600;
-  z-index: 1;
-  letter-spacing: 2px;
-  font-size: 30px;
-}
-
-.select-node {
-  position: fixed;
-  top: 100px;
-  left: 10px;
-  color: var(--vent-font-color);
-  display: flex;
-  justify-content: center;
-  font-size: 22px;
-
-  .title {
-    margin-left: 10px;
+    font-size: 22px;
+
+    .title {
+      margin-left: 10px;
+    }
   }
-}
 
-.expansion-icon {
-  background: var(--image-tree-icon-bg) no-repeat;
-  background-size: contain;
-  position: absolute;
-  left: 190px;
-  top: 25px;
+  .expansion-icon {
+    background: var(--image-tree-icon-bg) no-repeat;
+    background-size: contain;
+    position: absolute;
+    left: 190px;
+    top: 25px;
 
-  &:hover {
-    background: var(--image-tree-icon-hover-bg) no-repeat;
+    &:hover {
+      background: var(--image-tree-icon-hover-bg) no-repeat;
+      background-size: contain;
+    }
+  }
+
+  .device-select {
+    width: 250px;
+    height: 500px;
+    background: var(--image-tree-bg) no-repeat;
+    position: fixed;
+    top: 100px;
+    left: 10px;
     background-size: contain;
+    pointer-events: auto;
+    padding: 20px 10px 30px 10px;
+  }
+
+  .inspect-info-xj {
+    position: fixed;
+    top: 100px;
+    left: 250px;
+    width: 320px;
+    height: 272px;
+    padding: 20px;
+    background: url('@/assets/images/inspect-bg.png') no-repeat center;
+    background-size: 100% 100%;
+    box-sizing: border-box;
   }
-}
-
-.device-select {
-  width: 250px;
-  height: 500px;
-  background: var(--image-tree-bg) no-repeat;
-  position: fixed;
-  top: 100px;
-  left: 10px;
-  background-size: contain;
-  pointer-events: auto;
-  padding: 20px 10px 30px 10px;
-}
-
-.inspect-info-xj {
-  position: fixed;
-  top: 100px;
-  left: 250px;
-  width: 320px;
-  height: 272px;
-  padding: 20px;
-  background: url('@/assets/images/inspect-bg.png') no-repeat center;
-  background-size: 100% 100%;
-  box-sizing: border-box;
-}
-
-.is-expansion-icon {
-  padding: 5px;
-  pointer-events: auto;
-  z-index: 999;
-}
-
-.device-select-show {
-  left: 10px;
-  animation-name: treeShow;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
-}
-
-.device-select-hide {
-  left: -250px;
-  animation-name: treeHide;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
-}
-
-.node-select-show {
-  width: 276px;
-  height: 44px;
-  background: var(--image-tree-expansion-bg) no-repeat;
-  left: 10px;
-  animation-name: treeShow;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
-  display: flex;
-  align-items: center;
-  margin-left: 0;
-  justify-content: flex-start;
-  pointer-events: auto;
-
-  &:hover {
-    background: var(--image-tree-expansion-hover-bg) no-repeat;
+
+  .is-expansion-icon {
+    padding: 5px;
+    pointer-events: auto;
+    z-index: 999;
   }
 
-  .put-away-icon {
-    position: relative;
-    display: inline-block;
-    left: 4px;
+  .device-select-show {
+    left: 10px;
+    animation-name: treeShow;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
   }
-}
-
-.node-select-hide {
-  left: -400px;
-  animation-name: treeHide;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
-}
-
-.device-select-box {
-  width: 208px;
-  height: 450px;
-  overflow-y: auto;
-  color: var(--vent-font-color);
-
-  :deep(.zxm-tree) {
-    background: transparent !important;
-    color: var(--vent-font-color) !important;
-
-    .zxm-tree-switcher {
-      background: transparent !important;
-    }
 
-    .zxm-tree-node-content-wrapper.zxm-tree-node-selected {
-      background-color: var(--tree-node-select);
-    }
+  .device-select-hide {
+    left: -250px;
+    animation-name: treeHide;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
+  }
+
+  .node-select-show {
+    width: 276px;
+    height: 44px;
+    background: var(--image-tree-expansion-bg) no-repeat;
+    left: 10px;
+    animation-name: treeShow;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
+    display: flex;
+    align-items: center;
+    margin-left: 0;
+    justify-content: flex-start;
+    pointer-events: auto;
 
-    .zxm-tree-node-content-wrapper:hover {
-      background-color: var(--tree-node-hover);
+    &:hover {
+      background: var(--image-tree-expansion-hover-bg) no-repeat;
     }
 
-    input {
-      height: 0px !important;
+    .put-away-icon {
+      position: relative;
+      display: inline-block;
+      left: 4px;
     }
   }
 
-  &::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-    border-radius: 10px;
-    background: #ededed22;
-    height: 100px;
+  .node-select-hide {
+    left: -400px;
+    animation-name: treeHide;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
   }
 
-  &::-webkit-scrollbar-thumb {
-    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-    background: #4288a444;
-  }
-}
-
-.location-icon {
-  width: 46px;
-  height: 178px;
-  position: absolute;
-  top: 100px;
-  background: var(--image-location-bg) no-repeat;
-  background-size: contain;
-  writing-mode: vertical-lr;
-  line-height: 46px;
-  color: var(--vent-font-color);
-  padding-top: 10px;
-  pointer-events: auto;
-  cursor: pointer;
-
-  &:hover {
-    background: var(--image-location-hover-bg) no-repeat;
-  }
+  .device-select-box {
+    width: 208px;
+    height: 450px;
+    overflow-y: auto;
+    color: var(--vent-font-color);
 
-  .location-text {
-    padding-top: 20px;
-    letter-spacing: 3px;
-    font-size: 16px;
-  }
-}
+    :deep(.zxm-tree) {
+      background: transparent !important;
+      color: var(--vent-font-color) !important;
 
-.location-select {
-  position: fixed;
-  top: 100px;
-  pointer-events: auto;
+      .zxm-tree-switcher {
+        background: transparent !important;
+      }
 
-  .location-select-box {
-    width: 100%;
-    height: 100%;
-    position: relative;
+      .zxm-tree-node-content-wrapper.zxm-tree-node-selected {
+        background-color: var(--tree-node-select);
+      }
 
-    &::before {
-      content: '';
-      position: absolute;
-      width: 230px;
-      height: 500px;
-      top: 0;
-      left: 0;
-      background: var(--image-tree-bg) no-repeat;
-      background-size: contain;
-      transform: rotateY(180deg);
-      z-index: -1;
+      .zxm-tree-node-content-wrapper:hover {
+        background-color: var(--tree-node-hover);
+      }
+
+      input {
+        height: 0px !important;
+      }
     }
 
-    .location-top-title {
-      color: var(--vent-font-color);
-      position: absolute;
-      width: 225px;
-      height: 68px;
-      background: var(--image-turn-location-top-bg) no-repeat;
-      background-size: contain;
-      top: 5px;
-      left: 5px;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: flex-end;
+    &::-webkit-scrollbar-track {
+      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+      border-radius: 10px;
+      background: #ededed22;
+      height: 100px;
+    }
 
-      .title {
-        font-size: 18px;
-        position: relative;
-        top: -14px;
-        right: 15px;
-      }
+    &::-webkit-scrollbar-thumb {
+      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+      background: #4288a444;
     }
+  }
 
-    .location-expansion-icon {
-      background: var(--image-tree-icon-cover-bg) no-repeat;
-      background-size: contain;
+  .location-icon {
+    width: 46px;
+    height: 178px;
+    position: absolute;
+    top: 100px;
+    background: var(--image-location-bg) no-repeat;
+    background-size: contain;
+    writing-mode: vertical-lr;
+    line-height: 46px;
+    color: var(--vent-font-color);
+    padding-top: 10px;
+    pointer-events: auto;
+    cursor: pointer;
+
+    &:hover {
+      background: var(--image-location-hover-bg) no-repeat;
+    }
+
+    .location-text {
+      padding-top: 20px;
+      letter-spacing: 3px;
+      font-size: 16px;
+    }
+  }
+
+  .location-select {
+    position: fixed;
+    top: 100px;
+    pointer-events: auto;
+
+    .location-select-box {
+      width: 100%;
+      height: 100%;
       position: relative;
-      left: 10px;
-      top: -15px;
-      padding: 5px;
 
-      &:hover {
-        background: var(--image-tree-icon-cover-hover-bg) no-repeat;
+      &::before {
+        content: '';
+        position: absolute;
+        width: 230px;
+        height: 500px;
+        top: 0;
+        left: 0;
+        background: var(--image-tree-bg) no-repeat;
         background-size: contain;
+        transform: rotateY(180deg);
+        z-index: -1;
       }
-    }
-  }
 
-  .location-container {
-    width: 200px;
-    height: 390px;
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    top: 80px;
-    left: 18px;
-    overflow-y: auto;
+      .location-top-title {
+        color: var(--vent-font-color);
+        position: absolute;
+        width: 225px;
+        height: 68px;
+        background: var(--image-turn-location-top-bg) no-repeat;
+        background-size: contain;
+        top: 5px;
+        left: 5px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: flex-end;
+
+        .title {
+          font-size: 18px;
+          position: relative;
+          top: -14px;
+          right: 15px;
+        }
+      }
 
-    .location-item {
-      color: var(--vent-font-color);
-      line-height: 30px;
-      display: flex;
-      justify-content: space-between;
-      // background-image: var(--vent-gas-list-item-bg-img);
-      background-image: linear-gradient(to left, #39f5ff05, #39f5ff10);
-      margin: 3px 0;
-
-      .item-title {
-        width: 80px;
-        text-align: right;
-        color: var(--vent-table-action-link);
+      .location-expansion-icon {
+        background: var(--image-tree-icon-cover-bg) no-repeat;
+        background-size: contain;
+        position: relative;
+        left: 10px;
+        top: -15px;
+        padding: 5px;
+
+        &:hover {
+          background: var(--image-tree-icon-cover-hover-bg) no-repeat;
+          background-size: contain;
+        }
       }
     }
 
-    .location-bottom-btn {
-      width: 100%;
-      color: var(--vent-font-color);
+    .location-container {
+      width: 200px;
+      height: 390px;
+      position: absolute;
       display: flex;
-      justify-content: flex-end;
-      margin-top: 20px;
+      flex-direction: column;
+      top: 80px;
+      left: 18px;
+      overflow-y: auto;
+
+      .location-item {
+        color: var(--vent-font-color);
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+        // background-image: var(--vent-gas-list-item-bg-img);
+        background-image: linear-gradient(to left, #39f5ff05, #39f5ff10);
+        margin: 3px 0;
+
+        .item-title {
+          width: 80px;
+          text-align: right;
+          color: var(--vent-table-action-link);
+        }
+      }
 
-      span {
-        display: inline-block;
+      .location-bottom-btn {
         width: 100%;
-        background: var(--location-bottom-bg);
-        border-radius: 3px;
-        border: 1px solid var(--location-bottom-border);
-        text-align: center;
-        padding: 2px 0;
-        cursor: pointer;
-
-        &:hover {
-          background: #00557422;
+        color: var(--vent-font-color);
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 20px;
+
+        span {
+          display: inline-block;
+          width: 100%;
+          background: var(--location-bottom-bg);
+          border-radius: 3px;
+          border: 1px solid var(--location-bottom-border);
+          text-align: center;
+          padding: 2px 0;
+          cursor: pointer;
+
+          &:hover {
+            background: #00557422;
+          }
         }
       }
     }
   }
-}
-
-.location-select-show {
-  right: 240px;
-  animation-name: locationShow;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
-}
-
-.location-select-hide {
-  right: -2px;
-  animation-name: locationHide;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
-}
-
-.location-btn-show {
-  right: -0px;
-  animation-name: locationBtnShow;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
-}
-
-.location-btn-hide {
-  right: -240px;
-  animation-name: locationBtnHide;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
-}
-
-.tabs-box {
-  height: 290px;
-}
-
-.bottom-tabs-box {
-  position: relative;
+
+  .location-select-show {
+    right: 240px;
+    animation-name: locationShow;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
+  }
+
+  .location-select-hide {
+    right: -2px;
+    animation-name: locationHide;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
+  }
+
+  .location-btn-show {
+    right: -0px;
+    animation-name: locationBtnShow;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
+  }
+
+  .location-btn-hide {
+    right: -240px;
+    animation-name: locationBtnHide;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
+  }
 
   .tabs-box {
-    width: calc(100% - 12px) !important;
-    bottom: 3px !important;
-    background-color: red;
+    height: 290px;
   }
 
-  .to-small {
-    position: absolute;
-    top: -65px;
-    right: 36px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  .bottom-tabs-box {
+    position: relative;
 
-    .to-home {
-      width: 60px;
-      height: 60px;
-      background: var(--image-tohome) no-repeat center;
-      background-size: auto;
-      padding: 8px;
+    .tabs-box {
+      width: calc(100% - 12px) !important;
+      bottom: 3px !important;
+      background-color: red;
+    }
 
-      &:hover {
-        background-color: rgba(79, 104, 134, 0.418);
+    .to-small {
+      position: absolute;
+      top: -65px;
+      right: 36px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .to-home {
+        width: 60px;
+        height: 60px;
+        background: var(--image-tohome) no-repeat center;
+        background-size: auto;
+        padding: 8px;
+
+        &:hover {
+          background-color: rgba(79, 104, 134, 0.418);
+        }
+      }
+
+      .table-show-icon {
+        width: 30px;
+        height: 30px;
+        font-size: 30px;
+        color: var(--vent-font-color);
+        margin-left: 10px;
       }
     }
 
-    .table-show-icon {
-      width: 30px;
-      height: 30px;
-      font-size: 30px;
+    .device-button-group {
+      position: absolute;
+      top: -30px;
+      display: flex;
+      width: 100%;
+
+      .device-active {
+        background: linear-gradient(45deg, #04e6fb, #0c5cab);
+
+        &::before {
+          border-color: #0efcff;
+          box-shadow: 1px 1px 3px 1px #0efcff inset;
+        }
+      }
+    }
+
+    .table-hide-icon {
       color: var(--vent-font-color);
-      margin-left: 10px;
+      cursor: pointer;
+      position: absolute;
+      right: 20px;
+      top: 10px;
+      z-index: 9999;
     }
-  }
 
-  .device-button-group {
-    position: absolute;
-    top: -30px;
-    display: flex;
-    width: 100%;
+    .enter-detail {
+      color: var(--vent-font-color);
+      cursor: pointer;
+      position: absolute;
+      right: 35px;
+      top: 35px;
+      padding: 5px;
+      border-radius: 5px;
+      margin-left: 8px;
+      margin-right: 8px;
+      width: auto;
+      height: 33px !important;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--vent-font-color);
+      padding: 5px 15px 5px 15px;
+      z-index: 999;
+      cursor: pointer;
 
-    .device-active {
-      background: linear-gradient(45deg, #04e6fb, #0c5cab);
+      &:hover {
+        background: var(--vent-device-manager-control-btn-hover);
+      }
 
       &::before {
-        border-color: #0efcff;
-        box-shadow: 1px 1px 3px 1px #0efcff inset;
+        width: calc(100% - 6px);
+        height: 27px;
+        content: '';
+        position: absolute;
+        top: 3px;
+        right: 0;
+        left: 3px;
+        bottom: 0;
+        z-index: -1;
+        border-radius: inherit;
+        /*important*/
+        background: var(--vent-device-manager-control-btn);
       }
     }
   }
 
-  .table-hide-icon {
-    color: var(--vent-font-color);
-    cursor: pointer;
-    position: absolute;
-    right: 20px;
-    top: 10px;
-    z-index: 9999;
+  .table-hide {
+    height: 0px;
+    animation-name: tableHide;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s;
   }
 
-  .enter-detail {
-    color: var(--vent-font-color);
-    cursor: pointer;
-    position: absolute;
-    right: 35px;
-    top: 35px;
-    padding: 5px;
-    border-radius: 5px;
-    margin-left: 8px;
-    margin-right: 8px;
-    width: auto;
-    height: 33px !important;
+  .table-show {
+    height: 290px;
+    animation-name: tableShow;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s;
+  }
+
+  .location-form {
     display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--vent-font-color);
-    padding: 5px 15px 5px 15px;
-    z-index: 999;
-    cursor: pointer;
+    margin: 8px;
 
-    &:hover {
-      background: var(--vent-device-manager-control-btn-hover);
+    .location-form-item {
+      width: 400px;
+
+      .location-form-label {
+        width: 100px;
+        display: inline-block;
+        color: var(--vent-font-color);
+      }
+
+      input {
+        background: transparent !important;
+        color: var(--vent-font-color);
+        border: 1px solid var(--vent-form-item-border) !important;
+      }
     }
 
-    &::before {
-      width: calc(100% - 6px);
-      height: 27px;
-      content: '';
-      position: absolute;
-      top: 3px;
-      right: 0;
-      left: 3px;
-      bottom: 0;
-      z-index: -1;
-      border-radius: inherit;
-      /*important*/
-      background: var(--vent-device-manager-control-btn);
+    .zxm-select-selector {
+      width: 200px !important;
     }
   }
-}
-
-.table-hide {
-  height: 0px;
-  animation-name: tableHide;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s;
-}
-
-.table-show {
-  height: 290px;
-  animation-name: tableShow;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s;
-}
-
-.location-form {
-  display: flex;
-  margin: 8px;
-
-  .location-form-item {
-    width: 400px;
-
-    .location-form-label {
-      width: 100px;
-      display: inline-block;
-      color: var(--vent-font-color);
+
+  @keyframes tableShow {
+    0% {
+      height: 0px;
+      opacity: 0;
     }
 
-    input {
-      background: transparent !important;
-      color: var(--vent-font-color);
-      border: 1px solid var(--vent-form-item-border) !important;
+    100% {
+      height: 290px;
+      opacity: 1;
     }
   }
 
-  .zxm-select-selector {
-    width: 200px !important;
-  }
-}
+  @keyframes tableHide {
+    0% {
+      opacity: 1;
+    }
 
-@keyframes tableShow {
-  0% {
-    height: 0px;
-    opacity: 0;
+    100% {
+      height: 0px;
+      opacity: 0;
+    }
   }
 
-  100% {
-    height: 290px;
-    opacity: 1;
-  }
-}
+  @keyframes treeShow {
+    0% {
+      left: -400px;
+      opacity: 0;
+    }
 
-@keyframes tableHide {
-  0% {
-    opacity: 1;
+    100% {
+      left: 10px;
+      opacity: 1;
+    }
   }
 
-  100% {
-    height: 0px;
-    opacity: 0;
-  }
-}
+  @keyframes treeHide {
+    0% {
+      left: 10px;
+      opacity: 1;
+    }
 
-@keyframes treeShow {
-  0% {
-    left: -400px;
-    opacity: 0;
+    100% {
+      left: -400px;
+      opacity: 0;
+    }
   }
 
-  100% {
-    left: 10px;
-    opacity: 1;
-  }
-}
+  @keyframes locationShow {
+    0% {
+      right: 0px;
+      opacity: 0;
+    }
 
-@keyframes treeHide {
-  0% {
-    left: 10px;
-    opacity: 1;
+    100% {
+      right: 240px;
+      opacity: 1;
+    }
   }
 
-  100% {
-    left: -400px;
-    opacity: 0;
-  }
-}
+  @keyframes locationHide {
+    0% {
+      right: 240px;
+      opacity: 1;
+    }
 
-@keyframes locationShow {
-  0% {
-    right: 0px;
-    opacity: 0;
+    100% {
+      right: 0;
+      opacity: 0;
+    }
   }
 
-  100% {
-    right: 240px;
-    opacity: 1;
-  }
-}
+  @keyframes locationBtnShow {
+    0% {
+      right: -240px;
+      opacity: 0;
+    }
 
-@keyframes locationHide {
-  0% {
-    right: 240px;
-    opacity: 1;
+    100% {
+      right: -2px;
+      opacity: 1;
+    }
   }
 
-  100% {
-    right: 0;
-    opacity: 0;
-  }
-}
+  @keyframes locationBtnHide {
+    0% {
+      right: -2px;
+      opacity: 1;
+    }
 
-@keyframes locationBtnShow {
-  0% {
-    right: -240px;
-    opacity: 0;
+    100% {
+      right: -240px;
+      opacity: 0;
+    }
   }
 
-  100% {
-    right: -2px;
-    opacity: 1;
+  :deep(.@{ventSpace}-picker-datetime-panel) {
+    height: 200px !important;
+    overflow-y: auto !important;
   }
-}
 
-@keyframes locationBtnHide {
-  0% {
-    right: -2px;
-    opacity: 1;
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    // overflow: auto;
+    height: 100%;
   }
 
-  100% {
-    right: -240px;
-    opacity: 0;
+  :deep(.zxm-select-dropdown) {
+    left: 0 !important;
+    color: #000000 !important;
   }
-}
 
-:deep(.@{ventSpace}-picker-datetime-panel) {
-  height: 200px !important;
-  overflow-y: auto !important;
-}
+  :deep(.zxm-select-selector) {
+    height: 34px !important;
+    line-height: 34px !important;
+  }
 
-:deep(.@{ventSpace}-tabs-tabpane-active) {
-  // overflow: auto;
-  height: 100%;
-}
+  :deep(.zxm-input) {
+    height: 32px !important;
+    line-height: 32px !important;
 
-:deep(.zxm-select-dropdown) {
-  left: 0 !important;
-  color: #000000 !important;
-}
+    .zxm-select-selection-item {
+      line-height: 32px !important;
+    }
+  }
 
-:deep(.zxm-select-selector) {
-  height: 34px !important;
-  line-height: 34px !important;
-}
+  .device-button {
+    height: 26px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--vent-font-color);
+    position: relative;
+    cursor: pointer;
+    padding: 0 20px;
+    background: linear-gradient(45deg, #04e6fb55, #0c5cab55);
+    clip-path: polygon(10px 0, 0 50%, 10px 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
 
-:deep(.zxm-input) {
-  height: 32px !important;
-  line-height: 32px !important;
+    &:nth-child(1) {
+      left: calc(-6px * 1);
+    }
 
-  .zxm-select-selection-item {
-    line-height: 32px !important;
-  }
-}
-
-.device-button {
-  height: 26px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: var(--vent-font-color);
-  position: relative;
-  cursor: pointer;
-  padding: 0 20px;
-  background: linear-gradient(45deg, #04e6fb55, #0c5cab55);
-  clip-path: polygon(10px 0, 0 50%, 10px 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
-
-  &:nth-child(1) {
-    left: calc(-6px * 1);
-  }
+    &:nth-child(2) {
+      left: calc(-6px * 2);
+    }
 
-  &:nth-child(2) {
-    left: calc(-6px * 2);
-  }
+    &:nth-child(3) {
+      left: calc(-6px * 3);
+    }
 
-  &:nth-child(3) {
-    left: calc(-6px * 3);
-  }
+    &:nth-child(4) {
+      left: calc(-6px * 4);
+    }
 
-  &:nth-child(4) {
-    left: calc(-6px * 4);
-  }
+    &:nth-child(5) {
+      left: calc(-6px * 5);
+    }
 
-  &:nth-child(5) {
-    left: calc(-6px * 5);
-  }
+    &:nth-child(6) {
+      left: calc(-6px * 6);
+    }
 
-  &:nth-child(6) {
-    left: calc(-6px * 6);
-  }
+    &:nth-child(7) {
+      left: calc(-6px * 7);
+    }
 
-  &:nth-child(7) {
-    left: calc(-6px * 7);
-  }
+    &:nth-child(8) {
+      left: calc(-6px * 8);
+    }
 
-  &:nth-child(8) {
-    left: calc(-6px * 8);
-  }
+    &:nth-child(9) {
+      left: calc(-6px * 9);
+    }
 
-  &:nth-child(9) {
-    left: calc(-6px * 9);
-  }
+    &:nth-child(10) {
+      left: calc(-6px * 10);
+    }
 
-  &:nth-child(10) {
-    left: calc(-6px * 10);
-  }
+    &:nth-child(11) {
+      left: calc(-6px * 11);
+    }
 
-  &:nth-child(11) {
-    left: calc(-6px * 11);
-  }
+    &:nth-child(12) {
+      left: calc(-6px * 12);
+    }
 
-  &:nth-child(12) {
-    left: calc(-6px * 12);
-  }
+    &:nth-child(13) {
+      left: calc(-6px * 13);
+    }
 
-  &:nth-child(13) {
-    left: calc(-6px * 13);
-  }
+    &:nth-child(14) {
+      left: calc(-6px * 14);
+    }
 
-  &:nth-child(14) {
-    left: calc(-6px * 14);
-  }
+    &:nth-child(15) {
+      left: calc(-6px * 15);
+    }
 
-  &:nth-child(15) {
-    left: calc(-6px * 15);
-  }
+    &:nth-child(16) {
+      left: calc(-6px * 16);
+    }
 
-  &:nth-child(16) {
-    left: calc(-6px * 16);
-  }
+    &:nth-child(17) {
+      left: calc(-6px * 17);
+    }
 
-  &:nth-child(17) {
-    left: calc(-6px * 17);
-  }
+    &:nth-child(18) {
+      left: calc(-6px * 18);
+    }
 
-  &:nth-child(18) {
-    left: calc(-6px * 18);
-  }
+    &:nth-child(19) {
+      left: calc(-6px * 19);
+    }
 
-  &:nth-child(19) {
-    left: calc(-6px * 19);
+    // &:first-child {
+    //   clip-path: polygon(0 0, 10px 50%, 0 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
+    // }
   }
 
-  // &:first-child {
-  //   clip-path: polygon(0 0, 10px 50%, 0 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
+  // :deep(.@{ventSpace}-pagination){
+  //   margin-right: 20px !important;
+  //   margin-top: 5px !important;
+  //   display: flex;
+  //   align-items: center;
   // }
-}
-
-// :deep(.@{ventSpace}-pagination){
-//   margin-right: 20px !important;
-//   margin-top: 5px !important;
-//   display: flex;
-//   align-items: center;
-// }</style>
+</style>

src/views/vent/monitorManager/deviceMonitor/components/device/device.api.ts

@@ -61,5 +61,4 @@ export const queryReportData = (params) => defHttp.post({ url: Api.queryReportDa
  * 设备历史数据接口
  * @param params
  */
-export const getDeviceHistoryData = (params) => defHttp.post({ url: "safety/ventanalyMonitorData/getRealHistoryData?startTime=2025-07-02 00:00:00&endTime=2025-07-03 23:00:00&deviceId=1657545388451663016&valueCode=dustval" });
-// export const getDeviceHistoryData = (params) => defHttp.post({ url: Api.getDeviceHistoryData, data: params });
+export const getDeviceHistoryData = (params) => defHttp.post({ url: Api.getDeviceHistoryData, data: params });

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

@@ -67,10 +67,10 @@
               :device-list-api="list.bind(null, { devicetype: selectData.deviceType })"
               @change="historyDataSourceChange"
               designScope="modelsensor-history"
-              :scroll="{ y: chartsColumns.length > 0 ? 300 : 600 }"
+              :scroll="{ y: 600 }"
             />
-            <div class="charts-box" v-if="chartsColumns.length > 0">
-              <!-- <BarAndLine
+            <!-- <div class="charts-box" v-if="chartsColumns.length > 0">
+              <BarAndLine
                 :chartsColumnsType="selectData.deviceType"
                 xAxisPropType="ttime"
                 :dataSource="historyDataSource"
@@ -79,8 +79,8 @@
                 chartsType="history"
                 :option="echartsOption1"
                 @refresh="refreshEchatrs"
-              /> -->
-              <!-- 设备历史数据组件测试代码 -->
+              />
+
               <DeviceHistoryChart
                 :chartsColumnsType="selectData.deviceType"
                 xAxisPropType="ttime"
@@ -91,10 +91,10 @@
                 :option="echartsOption1"
                 @refresh="refreshEchatrs"
               />
-            </div>
+            </div> -->
           </div>
         </a-tab-pane>
-        <a-tab-pane key="5" tab="近一月数据分析" v-if="!hasPermission('ventanalyAlarmAnalysis:noShow')">
+        <a-tab-pane key="5" tab="近一月数据分析" v-if="!hasPermission('ventanalyAlarmAnalysis:noShowMonth')">
           <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>
@@ -132,6 +132,18 @@
             <div class="charts-box" v-else> <span style="color: aliceblue"> 暂无数据 </span> </div>
           </div>
         </a-tab-pane>
+        <a-tab-pane key="6" tab="历史数据分析" v-if="!hasPermission('ventanalyAlarmAnalysis:noShow')">
+          <div class="history-echart-box" style="margin-bottom: 10px">
+            <DeviceHistoryChart
+              chartsColumnsType="modelsensor_chart"
+              :dataSource="dataSource"
+              height="100%"
+              :chartsColumns="chartsColumns"
+              device-type="modelsensor"
+              :is-show-child-type="true"
+            />
+          </div>
+        </a-tab-pane>
         <a-tab-pane key="3" tab="报警历史">
           <div class="tab-item box-bg" v-if="activeKey == '3'">
             <AlarmHistoryTable columns-type="alarm" device-type="modelsensor" designScope="alarm-history" />
@@ -156,444 +168,448 @@
 </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]);
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import DeviceHistoryChart from '/@/views/vent/monitorManager/comment/DeviceHistoryEcharts.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);
   }
-};
-// 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();
+  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,
       },
-      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;
+  onBeforeMount(() => {
+    getDeviceBaseList();
   });
-};
-
-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',
-  });
-}
-
-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;
-  }
+  .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-content {
-    height: 430px;
-    background-color: #ffffff03;
-    border-bottom: 1px solid #44d3ff70;
-  }
+    .title-text {
+      position: absolute;
+      top: -24px;
+      left: 0;
+      width: 100%;
+      text-align: center;
+      color: var(--vent-font-color);
+    }
 
-  .charts-box {
-    height: 300px;
-    padding: 5px 10px;
-    margin-top: 10px;
-  }
-}
+    .table-box {
+      // height: calc(60% - 150px);
+      height: 780px;
+      padding: 20px 10px;
+      overflow-y: auto;
+    }
 
-:deep(.@{ventSpace}-tabs-tabpane-active) {
-  height: 100%;
-}
+    .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;
+    }
 
-:deep(.@{ventSpace}-tabs-card) {
-  .@{ventSpace}-tabs-tab {
-    background: var(--vent-device-manager-control-btn-hover);
-    border-color: #74e9fe;
-    border-radius: 0%;
+    .table-box-content {
+      height: 430px;
+      background-color: #ffffff03;
+      border-bottom: 1px solid #44d3ff70;
+    }
 
-    &:hover {
-      color: #64d5ff;
+    .charts-box {
+      height: 300px;
+      padding: 5px 10px;
+      margin-top: 10px;
+    }
+    .history-echart-box {
+      height: 800px;
+      margin-top: 20px;
     }
   }
 
-  .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
-    color: aqua;
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    height: 100%;
   }
 
-  .@{ventSpace}-tabs-nav::before {
-    border-color: #74e9fe;
-  }
+  :deep(.@{ventSpace}-tabs-card) {
+    .@{ventSpace}-tabs-tab {
+      background: var(--vent-device-manager-control-btn-hover);
+      border-color: #74e9fe;
+      border-radius: 0%;
 
-  .@{ventSpace}-picker,
-  .@{ventSpace}-select-selector {
-    width: 100%;
-    background: #00000017 !important;
-    border: 1px solid @vent-form-item-border !important;
+      &:hover {
+        color: #64d5ff;
+      }
+    }
 
-    input,
-    .@{ventSpace}-select-selection-item,
-    .@{ventSpace}-picker-suffix {
-      color: #fff !important;
+    .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
+      color: aqua;
     }
 
-    .@{ventSpace}-select-selection-placeholder {
-      color: #b7b7b7 !important;
+    .@{ventSpace}-tabs-nav::before {
+      border-color: #74e9fe;
     }
-  }
 
-  .@{ventSpace}-pagination-next,
-  .action,
-  .@{ventSpace}-select-arrow,
-  .@{ventSpace}-picker-separator {
-    color: var(--vent-font-color) !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-cell-row-hover {
-    background: #264d8833 !important;
-  }
+    .@{ventSpace}-pagination-next,
+    .action,
+    .@{ventSpace}-select-arrow,
+    .@{ventSpace}-picker-separator {
+      color: var(--vent-font-color) !important;
+    }
 
-  .@{ventSpace}-table-row-selected {
-    background: #00c0a311 !important;
+    .@{ventSpace}-table-cell-row-hover {
+      background: #264d8833 !important;
+    }
 
-    td {
-      background-color: #00000000 !important;
+    .@{ventSpace}-table-row-selected {
+      background: #00c0a311 !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>