[Mod 0000] 新增主风机、局部风机历史曲线；优化曲线公共方法；

src/components/chart/BarAndLine.vue

@@ -271,11 +271,11 @@
                 ymin = group[i].ymin;
               }
             }
-            if (!tempYmax[index] || tempYmax[index] != ymax) {
+            if (!tempYmax[index] || tempYmax[index] < ymax) {
               tempYmax[index] = ymax;
               isFresh = true;
             }
-            if (tempYmin[index] != ymin) {
+            if (tempYmin[index] > ymin) {
               tempYmin[index] = ymin;
               isFresh = true;
             }

src/hooks/setting/index.ts

@@ -73,11 +73,13 @@ export const useGlobSetting = (): Readonly<GlobConfig> => {
     //   `VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`
     // );
   }
+  import.meta.env.VITE_GLOB_APP_TITLE = title;
   if (import.meta.env.DEV) {
     domainUrl = VUE_APP_URL.baseUrl;
   } else if (import.meta.env.PROD) {
     domainUrl = VUE_APP_URL.baseUrl;
   }
+
   // Take global configuration
   const glob: Readonly<GlobConfig> = {
     logoUrl: logoUrl,

src/router/guard/permissionGuard.ts

@@ -43,7 +43,6 @@ export function createPermissionGuard(router: Router) {
   const userStore = useUserStoreWithOut();
   const permissionStore = usePermissionStoreWithOut();
   const { doAutoLogin, doTokenLogin, validateRoute, tokenValidateRoute } = useAutoLogin();
-
   router.beforeEach(async (to, from, next) => {
     RootRoute.redirect = glob.homePath || PageEnum.BASE_HOME;
 

src/views/vent/deviceManager/comment/pointTabel/WorkFacePointTable.vue

@@ -16,7 +16,14 @@
     </div>
     <div class="monitor-nav">
       <div class="device-button-group" v-if="relevanceDeviceData.length > 0">
-        <div class="device-button" :class="{ 'device-active': deviceActive == device.type }" v-for="(device, index) in relevanceDeviceData" :key="index" @click="deviceChange(index)">{{ device.typeName }}</div>
+        <div
+          class="device-button"
+          :class="{ 'device-active': deviceActive == device.type }"
+          v-for="(device, index) in relevanceDeviceData"
+          :key="index"
+          @click="deviceChange(index)"
+          >{{ device.typeName }}</div
+        >
       </div>
     </div>
     <BasicTable ref="editTable" @register="registerTable" :dataSource="dataSource" :columns="columns" @edit-change="onEditChange" v-if="refresh">
@@ -43,10 +50,10 @@
   import { workFaceColumns, deviceColumns } from './point.data';
 
   type RelevanceDeviceType = {
-    datalist: [],
-    type: string,
-    typeName: string
-  }
+    datalist: [];
+    type: string;
+    typeName: string;
+  };
 
   export default defineComponent({
     components: { BasicTable, TableAction, DeviceModalTable, ApiTreeSelect },
@@ -73,39 +80,37 @@
       const activeTab = ref('1');
       const deviceKind = ref('');
       const type = inject('deviceType') || '';
-      const refresh = ref(true)
+      const refresh = ref(true);
       const currentEditKeyRef = ref('');
       const options = ref([]);
 
       const dataSource = ref<any>([]);
       const selectionRowKeys = ref<any[]>([]);
 
-      const linkColumns = ref(props.columns)
+      const linkColumns = ref(props.columns);
 
-      const relevanceDeviceData = ref<RelevanceDeviceType[]>([])
-      const deviceNavData = ref<any[]>([]) // 关联设备
-      const deviceActive = ref('') // 激活状态下的设备
+      const relevanceDeviceData = ref<RelevanceDeviceType[]>([]);
+      const deviceNavData = ref<any[]>([]); // 关联设备
+      const deviceActive = ref(''); // 激活状态下的设备
 
       const [registerModal, { openModal }] = useModal();
 
-      const [registerTable, { insertTableDataRecord, setColumns }] = useTable(
-        {
-          title: '',
-          showIndexColumn: true,
-          showTableSetting: false,
-          tableSetting: { fullScreen: true },
-          actionColumn: {
-            width: 160,
-            title: '操作',
-            dataIndex: 'action',
-            slots: { customRender: 'action' },
-          },
-        }
-      );
+      const [registerTable, { insertTableDataRecord, setColumns }] = useTable({
+        title: '',
+        showIndexColumn: true,
+        showTableSetting: false,
+        tableSetting: { fullScreen: true },
+        actionColumn: {
+          width: 160,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+        },
+      });
 
       async function getDeviceNavData() {
-        relevanceDeviceData.value = await workRelevanceDeviceTypes({ id: props.deviceId })
-        deviceChange(0)
+        relevanceDeviceData.value = await workRelevanceDeviceTypes({ id: props.deviceId });
+        deviceChange(0);
       }
 
       function addRow() {
@@ -131,27 +136,27 @@
       }
 
       function getWorkFaceList() {
-        deviceActive.value = deviceKind.value
-        handleSuccess()
+        deviceActive.value = deviceKind.value;
+        handleSuccess();
       }
-      
+
       function deviceChange(index) {
-        deviceActive.value = relevanceDeviceData.value[index].type
-        dataSource.value = relevanceDeviceData.value[index].datalist
+        deviceActive.value = relevanceDeviceData.value[index].type;
+        dataSource.value = relevanceDeviceData.value[index].datalist;
       }
 
       function handleChange(value, label, extra) {
-        console.log('树节点选中------>',value, label, extra)
+        console.log('树节点选中------>', value, label, extra);
         deviceKind.value = value;
-        const activeData = relevanceDeviceData.value.find(item => {
-          return item.type === value
-        })
-        if(activeData){
-          deviceActive.value = activeData.type
-          dataSource.value = activeData.datalist
-        }else{
-          deviceActive.value = ''
-          dataSource.value = []
+        const activeData = relevanceDeviceData.value.find((item) => {
+          return item.type === value;
+        });
+        if (activeData) {
+          deviceActive.value = activeData.type;
+          dataSource.value = activeData.datalist;
+        } else {
+          deviceActive.value = '';
+          dataSource.value = [];
         }
       }
 
@@ -166,7 +171,7 @@
           // 校验
           await edit(dataSource.value);
           record.onEdit?.(false);
-          refresh.value = false
+          refresh.value = false;
         } else {
           //workDeviceEdit
           if (editTable.value && editTable?.value.getDataSource) {
@@ -175,7 +180,7 @@
             const ids = <any[]>[];
             dataList.forEach((element) => {
               arr.push(Object.assign(element, element.editValueRefs));
-              ids.push(element.deviceId)
+              ids.push(element.deviceId);
             });
             dataSource.value = dataList;
             // await workDeviceEdit({ deviceKind : deviceKind.value, ids: ids, sysid: props.deviceId }, handleSuccess)
@@ -183,14 +188,14 @@
           }
         }
         nextTick(() => {
-          refresh.value = true
-          clearSelectedRowKeys()
-        })
+          refresh.value = true;
+          clearSelectedRowKeys();
+        });
       }
 
       async function handleSuccess() {
-        relevanceDeviceData.value = await workRelevanceDeviceTypes({ id: props.deviceId })
-        handleChange(deviceActive.value)
+        relevanceDeviceData.value = await workRelevanceDeviceTypes({ id: props.deviceId });
+        handleChange(deviceActive.value);
       }
 
       function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
@@ -245,15 +250,18 @@
         // console.log(column, value, record);
       }
 
-      watch(() => props.columns, (columns) => {
-        // linkColumns.value = columns
-        // reload()
-        setColumns(columns)
-      })
+      watch(
+        () => props.columns,
+        (columns) => {
+          // linkColumns.value = columns
+          // reload()
+          setColumns(columns);
+        }
+      );
 
       onMounted(async () => {
         await getOptions();
-        await getDeviceNavData()
+        await getDeviceNavData();
         // getWorkFaceList();
       });
 
@@ -282,8 +290,8 @@
         deviceNavData,
         deviceActive,
         deviceChange,
-        linkColumns
-        
+        linkColumns,
+
         // handleChangeDeviceType,
         // handleChangeLinkCode,
         // monitorParamsOptions,
@@ -300,7 +308,7 @@
   .btm-group {
     padding-bottom: 2px;
   }
-  .device-button-group{
+  .device-button-group {
     // margin: 0 20px;
     display: flex;
     flex-wrap: wrap;
@@ -308,8 +316,8 @@
     position: relative;
     margin-top: 10px;
     margin-bottom: 5px;
-    &::after{
-      position:absolute;
+    &::after {
+      position: absolute;
       content: '';
       width: calc(100% + 10px);
       height: 2px;
@@ -317,34 +325,34 @@
       left: -10px;
       border-bottom: 1px solid #0efcff;
     }
-    .device-button{
+    .device-button {
       padding: 4px 10px;
       position: relative;
       display: flex;
       justify-content: center;
       align-items: center;
       font-size: 14px;
-      
+
       color: #fff;
       cursor: pointer;
       margin: 0 1px;
 
-      &::before{
+      &::before {
         content: '';
         position: absolute;
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
-        border: 1px solid #6176AF;
+        border: 1px solid #6176af;
         // transform: skewX(-38deg);
-        background-color: rgba(0, 77, 103,85%);
+        background-color: rgba(0, 77, 103, 85%);
         z-index: -1;
       }
     }
-    .device-active{
+    .device-active {
       // color: #0efcff;
-      &::before{
+      &::before {
         border-color: #0efcff;
         box-shadow: 1px 1px 3px 1px #0efcff inset;
       }

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

@@ -171,13 +171,13 @@
               deviceType.startsWith('gasDay_normal')
                 ? '当日巡检监测'
                 : deviceType.startsWith('dustDayReport') ||
-                  deviceType.startsWith('bundleDayReport') ||
-                  deviceType.startsWith('bundleSpyDayReport') ||
-                  deviceType.startsWith('bundleReport') ||
-                  deviceType.startsWith('bundleSpyReport') ||
-                  deviceType.startsWith('dustReport')
-                ? '最新监测报表'
-                : '实时监测'
+                    deviceType.startsWith('bundleDayReport') ||
+                    deviceType.startsWith('bundleSpyDayReport') ||
+                    deviceType.startsWith('bundleReport') ||
+                    deviceType.startsWith('bundleSpyReport') ||
+                    deviceType.startsWith('dustReport')
+                  ? '最新监测报表'
+                  : '实时监测'
             "
           >
             <template v-if="(deviceType.startsWith('fanlocal') || deviceType.startsWith('fanmain')) && activeKey == 'monitor'">
@@ -635,1562 +635,1565 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, ComponentOptions, shallowRef, reactive, defineProps, watch } from 'vue';
-import { SendOutlined, FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue';
-import { list, getDeviceList, getDeviceTypeList, devPosition, getDepartmentInfo, getExportUrl, getRegulation } 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 stationTable from '../../../comment/stationTable.vue';
-import gaspatrolTable from '../../../comment/gaspatrolTable.vue';
-import gasReport from '../../../comment/gasReport.vue';
-import gasReportCount from '../../../comment/gasReportCount.vue';
-import dustMonitorTable from '../../../comment/dustMonitorTable.vue';
-import bundleMonitorTable from '../../../comment/bundleMonitorTable.vue';
-import gasInspectDialog from '../../../comment/gasInspectDialog.vue';
-import DustingTable from '../../../comment/DustingTable.vue';
-import bundleSpyMonitorTable from '../../../comment/bundleSpyMonitorTable.vue';
-import GasPipeTable from '../../../comment/GasPipeTable.vue';
-import HistoryTableMajorPath from './modal/HistoryTableMajorPath.vue';
-import HistoryBall from './modal/history-ball.vue';
-import { TreeProps, message, Progress, Input, Select } from 'ant-design-vue';
-import { TableAction } from '/@/components/Table';
-import { SvgIcon } from '/@/components/Icon';
-import { getActions } from '/@/qiankun/state';
-import { useRouter, useRoute } from 'vue-router';
-import { setDivHeight } from '/@/utils/event';
-import { render } from '/@/utils/common/renderUtils';
-import {
-  majorColumns,
-  haveSysDetailArr,
-  haveDetailArr,
-  haveHandlerArr,
-  noWarningArr,
-  surfaceChartsColumns,
-  noHistoryArr,
-  getMonitorComponent,
-  noLocationArr,
-  haveHistoryEcharts,
-} from './device.data';
-import mainPath from './modal/mainPath.vue';
-import { formConfig } from '../../../safetyMonitor/safety.data';
-import { getDictItemsByCode } from '/@/utils/dict';
-import BarAndLine from '/@/components/chart/BarAndLine.vue';
-import MTreeSelect from '/@/components/Form/src/jeecg/components/MTreeSelect.vue';
-// import ApiSelect from '/@/components/Form/src/components/ApiSelect.vue';
-import { nextTick } from 'vue';
-import { useMethods } from '/@/hooks/system/useMethods';
-import { useGo } from '/@/hooks/web/usePage';
-import { useGlobSetting } from '/@/hooks/setting';
-import { usePermission } from '/@/hooks/web/usePermission';
-
-type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
-const glob = useGlobSetting();
-// import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
-
-const { FiberModal, BundleModal, DustModal, BallvalveModal, AtomizingModal, GaspatrolModal, WisdomBallModal } = getMonitorComponent();
-
-const props = defineProps({
-  pageData: {
-    type: Object,
-    default: () => {},
-  },
-});
-
-const { hasPermission } = usePermission();
-const { handleExportXls } = useMethods();
-const go = useGo();
-const echatsOption = {
-  grid: {
-    top: '35',
-    left: '30',
-    right: '45',
-    bottom: '25',
-    containLabel: true,
-  },
-  toolbox: {
-    feature: {},
-  },
-};
-const router = useRouter();
-const route = useRoute();
-const actions = getActions();
-const locationForm = reactive({
-  strname: '',
-  department: '',
-  stationname: '',
-});
-const noLocationList = noLocationArr();
-const monitorTable = ref();
-const historyTable = ref();
-const alarmHistoryTable = ref();
-const handlerHistoryTable = ref();
-
-// const routerParam = ref('home') // 默认进来时首页
-const isRefresh = ref(true);
-// 模态框
-const currentModal = shallowRef<Nullable<ComponentOptions>>(null); //模态框
-const modalVisible = ref<Boolean>(false); // 模态框是否可见
-
-// const drawerHeight = ref(240) // 监测框最小高度
-const treeShow = ref(true); //是否显示树形菜单
-const tableShow = ref(true); //是否显示树形菜单
-const locationSettingShow = ref(false); //是否显示树形菜单
-const treeNodeTitle = ref(''); // 选中的树形标题
-
-const locationList = ref([]); //巷道定位图标显示列表
-const deviceList = ref<DeviceType[]>([]); //关联设备列表
-const deviceActive = ref('');
-const activeKey = ref('monitor'); // tab key
-const dataSource = shallowRef([]); // 实时监测数据
-const majorPathEchartsData = ref({}); // 关键路线echarts数据
-const surfaceEchartsData = ref<any[]>(); // 工作面历史记录，echarts数据
-const activeID = ref(''); // 打开详情modal时监测的设备id
-const deviceType = ref(''); // 监测设备类型
-const systemType = ref('');
-const systemID = ref(''); // 系统监测时，系统id
-const selectedKeys = ref<string[]>([]);
-const expandedKeys = ref<string[]>([]);
-const scroll = reactive({
-  y: 180,
-});
-const treeData = ref<TreeProps['treeData']>([]);
-let departmentInfo: Null | Object = null;
-let startMonitorTimer = 0;
-let gaspatrol = ref(null);
-let gasreport = ref(null);
-let gasreportcount = ref(null);
-let station = ref(null);
-let gasSearch = reactive({
-  address: '',
-  userName: '',
-  insType: '2',
-  class: 'night',
-});
-//树形菜单选择事件
-const onSelect: TreeProps['onSelect'] = (keys, e) => {
-  deviceType.value = '';
-  systemID.value = '';
-  deviceList.value = [];
-  const title = e.node.title; // 在
-  if (e.node.parent && e.node.parent.node.type.toString().startsWith('sys')) {
-    systemType.value = e.node.parent.node.type;
-    if (deviceType.value != e.node.parent.node.type) deviceType.value = e.node.parent.node.type;
-    systemID.value = e.node.type;
-    // 传递工作面id信息,用于定位
-    go(`/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=${deviceType.value}&deviceid=${systemID.value}`);
-  } else {
-    systemType.value = e.node.type;
-    if (deviceType.value != e.node.type) deviceType.value = e.node.type;
-    go(`/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=${deviceType.value}&deviceid=`);
-  }
-  clearTimeout(timer);
-  timer = undefined;
-  if (startMonitorTimer) {
-    clearTimeout(startMonitorTimer);
-  }
-  dataSource.value = [];
-  monitorTable.value.resetPagination();
-  if (!startMonitorTimer) {
-    startMonitorTimer = setTimeout(() => {
-      expandedKeys.value = keys;
-      selectedKeys.value = keys;
-      treeNodeTitle.value = e.node.title;
-
-      if (e.node.children?.length < 1 && timer) {
-        getMonitor(true);
-      }
-    }, 1000);
-  }
-  // activeKey.value = '1';
-};
-
-function tabChange(activeKeyVal) {
-  activeKey.value = activeKeyVal;
-  router.push({ path: route.path, query: { ...route.query, tabtype: activeKey.value } });
-}
-
-function showTree(flag, value) {
-  if (flag == 'treeShow') treeShow.value = value;
-  if (flag == 'location') locationSettingShow.value = value;
-}
-
-async function getDeviceType(sysType?) {
-  if (treeData.value?.length > 0) return;
-  const result = await getDeviceTypeList({});
-  if (result.length > 0) {
-    const dataSource = <TreeProps['treeData']>[];
-    let key = '0';
-    const getData = (resultList, dataSourceList, keyVal) => {
-      resultList.forEach((item, index) => {
-        if (item.deviceType != 'sys' && item.children && item.children.length > 0) {
-          const children = getData(item.children, [], `${keyVal}-${index}`);
-          // 判断关键阻力路线
-          if (item.itemValue.startsWith(sysType) && children[0]) {
-            systemID.value = item.children[0]['itemValue'];
-          }
+  import { ref, onMounted, onUnmounted, ComponentOptions, shallowRef, reactive, defineProps, watch } from 'vue';
+  import { SendOutlined, FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue';
+  import { list, getDeviceList, getDeviceTypeList, devPosition, getDepartmentInfo, getExportUrl, getRegulation } 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 stationTable from '../../../comment/stationTable.vue';
+  import gaspatrolTable from '../../../comment/gaspatrolTable.vue';
+  import gasReport from '../../../comment/gasReport.vue';
+  import gasReportCount from '../../../comment/gasReportCount.vue';
+  import dustMonitorTable from '../../../comment/dustMonitorTable.vue';
+  import bundleMonitorTable from '../../../comment/bundleMonitorTable.vue';
+  import gasInspectDialog from '../../../comment/gasInspectDialog.vue';
+  import DustingTable from '../../../comment/DustingTable.vue';
+  import bundleSpyMonitorTable from '../../../comment/bundleSpyMonitorTable.vue';
+  import GasPipeTable from '../../../comment/GasPipeTable.vue';
+  import HistoryTableMajorPath from './modal/HistoryTableMajorPath.vue';
+  import HistoryBall from './modal/history-ball.vue';
+  import { TreeProps, message, Progress, Input, Select } from 'ant-design-vue';
+  import { TableAction } from '/@/components/Table';
+  import { SvgIcon } from '/@/components/Icon';
+  import { getActions } from '/@/qiankun/state';
+  import { useRouter, useRoute } from 'vue-router';
+  import { setDivHeight } from '/@/utils/event';
+  import { render } from '/@/utils/common/renderUtils';
+  import {
+    majorColumns,
+    haveSysDetailArr,
+    haveDetailArr,
+    haveHandlerArr,
+    noWarningArr,
+    surfaceChartsColumns,
+    noHistoryArr,
+    getMonitorComponent,
+    noLocationArr,
+    haveHistoryEcharts,
+  } from './device.data';
+  import mainPath from './modal/mainPath.vue';
+  import { formConfig } from '../../../safetyMonitor/safety.data';
+  import { getDictItemsByCode } from '/@/utils/dict';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import MTreeSelect from '/@/components/Form/src/jeecg/components/MTreeSelect.vue';
+  // import ApiSelect from '/@/components/Form/src/components/ApiSelect.vue';
+  import { nextTick } from 'vue';
+  import { useMethods } from '/@/hooks/system/useMethods';
+  import { useGo } from '/@/hooks/web/usePage';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { usePermission } from '/@/hooks/web/usePermission';
+
+  type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
+  const glob = useGlobSetting();
+  // import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
+
+  const { FiberModal, BundleModal, DustModal, BallvalveModal, AtomizingModal, GaspatrolModal, WisdomBallModal } = getMonitorComponent();
+
+  const props = defineProps({
+    pageData: {
+      type: Object,
+      default: () => {},
+    },
+  });
 
-          dataSourceList.push({
-            children: children,
-            title: item.itemText,
-            key: `${keyVal}-${index}`,
-            type: item.itemValue,
-            parentKey: `${keyVal}`,
-          });
-        } else {
-          dataSourceList.push({
-            children: [],
-            title: item.itemText,
-            key: `${keyVal}-${index}`,
-            type: item.itemValue,
-            parentKey: `${keyVal}`,
-          });
+  const { hasPermission } = usePermission();
+  const { handleExportXls } = useMethods();
+  const go = useGo();
+  const echatsOption = {
+    grid: {
+      top: '35',
+      left: '30',
+      right: '45',
+      bottom: '25',
+      containLabel: true,
+    },
+    toolbox: {
+      feature: {},
+    },
+  };
+  const router = useRouter();
+  const route = useRoute();
+  const actions = getActions();
+  const locationForm = reactive({
+    strname: '',
+    department: '',
+    stationname: '',
+  });
+  const noLocationList = noLocationArr();
+  const monitorTable = ref();
+  const historyTable = ref();
+  const alarmHistoryTable = ref();
+  const handlerHistoryTable = ref();
+
+  // const routerParam = ref('home') // 默认进来时首页
+  const isRefresh = ref(true);
+  // 模态框
+  const currentModal = shallowRef<Nullable<ComponentOptions>>(null); //模态框
+  const modalVisible = ref<Boolean>(false); // 模态框是否可见
+
+  // const drawerHeight = ref(240) // 监测框最小高度
+  const treeShow = ref(true); //是否显示树形菜单
+  const tableShow = ref(true); //是否显示树形菜单
+  const locationSettingShow = ref(false); //是否显示树形菜单
+  const treeNodeTitle = ref(''); // 选中的树形标题
+
+  const locationList = ref([]); //巷道定位图标显示列表
+  const deviceList = ref<DeviceType[]>([]); //关联设备列表
+  const deviceActive = ref('');
+  const activeKey = ref('monitor'); // tab key
+  const dataSource = shallowRef([]); // 实时监测数据
+  const majorPathEchartsData = ref({}); // 关键路线echarts数据
+  const surfaceEchartsData = ref<any[]>(); // 工作面历史记录，echarts数据
+  const activeID = ref(''); // 打开详情modal时监测的设备id
+  const deviceType = ref(''); // 监测设备类型
+  const systemType = ref('');
+  const systemID = ref(''); // 系统监测时，系统id
+  const selectedKeys = ref<string[]>([]);
+  const expandedKeys = ref<string[]>([]);
+  const scroll = reactive({
+    y: 180,
+  });
+  const treeData = ref<TreeProps['treeData']>([]);
+  let departmentInfo: Null | Object = null;
+  let startMonitorTimer = 0;
+  let gaspatrol = ref(null);
+  let gasreport = ref(null);
+  let gasreportcount = ref(null);
+  let station = ref(null);
+  let gasSearch = reactive({
+    address: '',
+    userName: '',
+    insType: '2',
+    class: 'night',
+  });
+  //树形菜单选择事件
+  const onSelect: TreeProps['onSelect'] = (keys, e) => {
+    deviceType.value = '';
+    systemID.value = '';
+    deviceList.value = [];
+    const title = e.node.title; // 在
+    if (e.node.parent && e.node.parent.node.type.toString().startsWith('sys')) {
+      systemType.value = e.node.parent.node.type;
+      if (deviceType.value != e.node.parent.node.type) deviceType.value = e.node.parent.node.type;
+      systemID.value = e.node.type;
+      // 传递工作面id信息,用于定位
+      go(`/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=${deviceType.value}&deviceid=${systemID.value}`);
+    } else {
+      systemType.value = e.node.type;
+      if (deviceType.value != e.node.type) deviceType.value = e.node.type;
+      go(`/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=${deviceType.value}&deviceid=`);
+    }
+    clearTimeout(timer);
+    timer = undefined;
+    if (startMonitorTimer) {
+      clearTimeout(startMonitorTimer);
+    }
+    dataSource.value = [];
+    monitorTable.value.resetPagination();
+    if (!startMonitorTimer) {
+      startMonitorTimer = setTimeout(() => {
+        expandedKeys.value = keys;
+        selectedKeys.value = keys;
+        treeNodeTitle.value = e.node.title;
+
+        if (e.node.children?.length < 1 && timer) {
+          getMonitor(true);
         }
-      });
-      return dataSourceList;
-    };
-    treeData.value = getData(result, dataSource, key);
-  }
-}
-
-// 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 () => {
-          if (deviceType.value.startsWith('gasDay_normal') && gaspatrol.value) {
-            gaspatrol.value.queryNowGasInsInfoList(); //人工瓦斯巡检
-          } else if (deviceType.value.startsWith('gasDayReport')) {
-            if (glob.sysOrgCode == 'sdmtjtbetmk') {
-              gasreportcount.value.getSearchReport();
-            } else {
-              gasreport.value.getSearchReport(); //瓦斯日报
+      }, 1000);
+    }
+    // activeKey.value = '1';
+  };
+
+  function tabChange(activeKeyVal) {
+    activeKey.value = activeKeyVal;
+    router.push({ path: route.path, query: { ...route.query, tabtype: activeKey.value } });
+  }
+
+  function showTree(flag, value) {
+    if (flag == 'treeShow') treeShow.value = value;
+    if (flag == 'location') locationSettingShow.value = value;
+  }
+
+  async function getDeviceType(sysType?) {
+    if (treeData.value?.length > 0) return;
+    const result = await getDeviceTypeList({});
+    if (result.length > 0) {
+      const dataSource = <TreeProps['treeData']>[];
+      let key = '0';
+      const getData = (resultList, dataSourceList, keyVal) => {
+        resultList.forEach((item, index) => {
+          if (item.deviceType != 'sys' && item.children && item.children.length > 0) {
+            const children = getData(item.children, [], `${keyVal}-${index}`);
+            // 判断关键阻力路线
+            if (item.itemValue.startsWith(sysType) && children[0]) {
+              systemID.value = item.children[0]['itemValue'];
             }
-          } else if (deviceType.value.startsWith('substation') && station.value) {
-            //分站
-            station.value.getStationList();
+
+            dataSourceList.push({
+              children: children,
+              title: item.itemText,
+              key: `${keyVal}-${index}`,
+              type: item.itemValue,
+              parentKey: `${keyVal}`,
+            });
           } else {
-            await getDataSource();
-          }
-          if (timer) {
-            getMonitor();
+            dataSourceList.push({
+              children: [],
+              title: item.itemText,
+              key: `${keyVal}-${index}`,
+              type: item.itemValue,
+              parentKey: `${keyVal}`,
+            });
           }
-        },
-        flag ? 0 : 1000
-      );
+        });
+        return dataSourceList;
+      };
+      treeData.value = getData(result, dataSource, key);
     }
   }
-}
-let allRegulations: any[] | null = null;
-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);
-      });
 
-      // 如果查出的所有设备里，设备类型是sys的，标识其是系统总体，不应显示在设备列表中
-      if (item.type == 'sys') return;
-
-      // majorpath关键线路需要显示图表
-      if (item.type === 'majorpath') {
-        deviceArr.unshift({ deviceType: item.type, deviceName: item['typeName'], datalist: item['datalist'][0]['paths'] });
-        return (majorPathEchartsData.value = item['datalist'][0]);
+  // 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 () => {
+            if (deviceType.value.startsWith('gasDay_normal') && gaspatrol.value) {
+              gaspatrol.value.queryNowGasInsInfoList(); //人工瓦斯巡检
+            } else if (deviceType.value.startsWith('gasDayReport')) {
+              if (glob.sysOrgCode == 'sdmtjtbetmk') {
+                gasreportcount.value.getSearchReport();
+              } else {
+                gasreport.value.getSearchReport(); //瓦斯日报
+              }
+            } else if (deviceType.value.startsWith('substation') && station.value) {
+              //分站
+              station.value.getStationList();
+            } else {
+              await getDataSource();
+            }
+            if (timer) {
+              getMonitor();
+            }
+          },
+          flag ? 0 : 1000
+        );
       }
-      // 工作面历史数据需要显示图表
-      if (item.type.startsWith('surface_history')) {
-        surfaceEchartsData.value = item['datalist'][0];
-        return deviceArr.unshift({
-          deviceType: item.type,
-          deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
-          datalist: data,
+    }
+  }
+  let allRegulations: any[] | null = null;
+  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);
         });
-      }
-      // 其余的存在 subtype 的（一般为报表）仅需显示报表表格，同时它们一版都排在后面
-      if (item.subtype) {
-        return deviceArr.push({
-          deviceType: item.subtype,
+
+        // 如果查出的所有设备里，设备类型是sys的，标识其是系统总体，不应显示在设备列表中
+        if (item.type == 'sys') return;
+
+        // majorpath关键线路需要显示图表
+        if (item.type === 'majorpath') {
+          deviceArr.unshift({ deviceType: item.type, deviceName: item['typeName'], datalist: item['datalist'][0]['paths'] });
+          return (majorPathEchartsData.value = item['datalist'][0]);
+        }
+        // 工作面历史数据需要显示图表
+        if (item.type.startsWith('surface_history')) {
+          surfaceEchartsData.value = item['datalist'][0];
+          return deviceArr.unshift({
+            deviceType: item.type,
+            deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
+            datalist: data,
+          });
+        }
+        // 其余的存在 subtype 的（一般为报表）仅需显示报表表格，同时它们一版都排在后面
+        if (item.subtype) {
+          return deviceArr.push({
+            deviceType: item.subtype,
+            deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
+            datalist: data,
+          });
+        }
+
+        deviceArr.unshift({
+          deviceType: item.type,
           deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
           datalist: data,
         });
-      }
-
-      deviceArr.unshift({
-        deviceType: item.type,
-        deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
-        datalist: data,
       });
-    });
 
-    deviceList.value = deviceArr;
-    if (deviceArr.length > 0) {
-      // if (deviceArr[1]) {
-      //   deviceActive.value = deviceArr[1].deviceType
-      //   monitorChange(1)
-      // } else {
-      //   deviceActive.value = deviceArr[0].deviceType
-      //   monitorChange(0)
-      // }
-      // deviceActive.value = route.query['deviceActive'] || 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;
-              }
-              return;
-            }
-          }
-        });
+      deviceList.value = deviceArr;
+      if (deviceArr.length > 0) {
+        // if (deviceArr[1]) {
+        //   deviceActive.value = deviceArr[1].deviceType
+        //   monitorChange(1)
+        // } else {
+        //   deviceActive.value = deviceArr[0].deviceType
+        //   monitorChange(0)
+        // }
+        // deviceActive.value = route.query['deviceActive'] || deviceArr[0].deviceType;
+        monitorChange(0);
       }
     } 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({});
-          }
-          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;
+      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;
+                }
+                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;
               }
-            });
-            const rawData = [...tableData, ...noNetData] || [];
-            const processedData = [...rawData];
-
-            // 首次请求获取去所有regulation数据
-            if (allRegulations === null) {
-              console.log(allRegulations, 'sssssssss');
-              const regulationRes = await getRegulation({
-                deviceKind: deviceType.value,
+            } else {
+              let tableData: any[] = [];
+              let noNetData: any[] = [];
+              data.filter((el) => {
+                if (el.netStatus == 1) {
+                  tableData.push(el);
+                } else {
+                  noNetData.push(el);
+                }
               });
-              allRegulations = regulationRes || [];
-            }
-            // 根据id创建一个映射表
-            const regulationMap = new Map();
-            allRegulations.forEach((reg) => {
-              regulationMap.set(reg.id, reg);
-            });
-            // 对regulation字段进行替换
-            processedData.forEach((data) => {
-              if (data.regulation) {
-                const reg = regulationMap.get(data.regulation);
-                if (reg) {
-                  data.regulation = reg; // 替换为完整对象
-                  data.fmin = reg.fmin;
-                  data.fmax = reg.fmax;
+              const rawData = [...tableData, ...noNetData] || [];
+              const processedData = [...rawData];
+
+              // 首次请求获取去所有regulation数据
+              if (allRegulations === null) {
+                console.log(allRegulations, 'sssssssss');
+                const regulationRes = await getRegulation({
+                  deviceKind: deviceType.value,
+                });
+                allRegulations = regulationRes || [];
+              }
+              // 根据id创建一个映射表
+              const regulationMap = new Map();
+              allRegulations.forEach((reg) => {
+                regulationMap.set(reg.id, reg);
+              });
+              // 对regulation字段进行替换
+              processedData.forEach((data) => {
+                if (data.regulation) {
+                  const reg = regulationMap.get(data.regulation);
+                  if (reg) {
+                    data.regulation = reg; // 替换为完整对象
+                    data.fmin = reg.fmin;
+                    data.fmax = reg.fmax;
+                  }
                 }
+              });
+              dataSource.value = processedData;
+              if (dataSource.value.length > 0) {
+                await processReadData(processedData);
               }
-            });
-            dataSource.value = processedData;
-            if (dataSource.value.length > 0) {
-              await processReadData(processedData);
             }
+          } else {
+            dataSource.value = [];
           }
         } else {
           dataSource.value = [];
         }
-      } else {
-        dataSource.value = [];
       }
     }
   }
-}
 
-async function processReadData(data: any[]) {
-  const promises = data
-    .filter((item) => item.readData)
-    .map(async (item) => {
-      item.readData && Object.assign(item, item.readData);
-    });
-  await Promise.all(promises);
-}
-//设备分站详情跳转
-function stationDetail() {
-  const newPage = router.resolve({ path: '/safety/list/detail/home' });
-  window.open(newPage.href, '_blank');
-}
-
-function goLocation(record) {
-  // debugger;
-  if (record['deviceType'] == 'person_bd' || record['deviceType'] == 'car_bd') {
-    actions.setGlobalState({ locationId: record.devNum, locationObj: null, pageObj: null, type: record['deviceType'].split('_')[0] });
-  } else if (deviceType.value == 'bundleSpyDayReport' || deviceType.value == 'dustDayReport' || deviceType.value == 'bundleDayReport') {
-    actions.setGlobalState({ locationName: record.jcdd, locationObj: null, pageObj: null, type: record['deviceType'] });
-  } else if (deviceType.value.startsWith('gasDay')) {
-    actions.setGlobalState({ locationName: record.strInstallPos, locationObj: null, pageObj: null, type: record['deviceType'] });
-  } else if (deviceType.value == 'gasDayReport') {
-    actions.setGlobalState({ locationName: record.jcdd, locationObj: null, pageObj: null, type: record['deviceType'] });
-  } else if (deviceType.value.startsWith('substation')) {
-    actions.setGlobalState({ locationId: record.id, locationObj: null, pageObj: null, type: record['deviceType'] });
-  } else {
-    if (deviceType.value.startsWith('location')) {
-      actions.setGlobalState({ locationId: record.deviceID, locationObj: null, pageObj: null, type: 'person' });
-    } else if (deviceType.value.startsWith('vehicle')) {
-      actions.setGlobalState({ locationId: record.deviceID, locationObj: null, pageObj: null, type: 'car' });
+  async function processReadData(data: any[]) {
+    const promises = data
+      .filter((item) => item.readData)
+      .map(async (item) => {
+        item.readData && Object.assign(item, item.readData);
+      });
+    await Promise.all(promises);
+  }
+  //设备分站详情跳转
+  function stationDetail() {
+    const newPage = router.resolve({ path: '/safety/list/detail/home' });
+    window.open(newPage.href, '_blank');
+  }
+
+  function goLocation(record) {
+    // debugger;
+    if (record['deviceType'] == 'person_bd' || record['deviceType'] == 'car_bd') {
+      actions.setGlobalState({ locationId: record.devNum, locationObj: null, pageObj: null, type: record['deviceType'].split('_')[0] });
+    } else if (deviceType.value == 'bundleSpyDayReport' || deviceType.value == 'dustDayReport' || deviceType.value == 'bundleDayReport') {
+      actions.setGlobalState({ locationName: record.jcdd, locationObj: null, pageObj: null, type: record['deviceType'] });
+    } else if (deviceType.value.startsWith('gasDay')) {
+      actions.setGlobalState({ locationName: record.strInstallPos, locationObj: null, pageObj: null, type: record['deviceType'] });
+    } else if (deviceType.value == 'gasDayReport') {
+      actions.setGlobalState({ locationName: record.jcdd, locationObj: null, pageObj: null, type: record['deviceType'] });
+    } else if (deviceType.value.startsWith('substation')) {
+      actions.setGlobalState({ locationId: record.id, locationObj: null, pageObj: null, type: record['deviceType'] });
     } else {
-      actions.setGlobalState({ locationId: record.deviceID, locationObj: null, pageObj: null });
+      if (deviceType.value.startsWith('location')) {
+        actions.setGlobalState({ locationId: record.deviceID, locationObj: null, pageObj: null, type: 'person' });
+      } else if (deviceType.value.startsWith('vehicle')) {
+        actions.setGlobalState({ locationId: record.deviceID, locationObj: null, pageObj: null, type: 'car' });
+      } else {
+        actions.setGlobalState({ locationId: record.deviceID, locationObj: null, pageObj: null });
+      }
     }
   }
-}
-function getSearch(param) {
-  (gasSearch.address = param.address), (gasSearch.userName = param.userName), (gasSearch.insType = param.insType), (gasSearch.class = param.class);
-}
-// 详情跳转
-function goDetail(record?) {
-  if (record) {
-    activeID.value = record.deviceID;
-    if (deviceType.value.startsWith('fiber')) {
-      currentModal.value = FiberModal;
-      modalVisible.value = true;
-    } else if (deviceType.value.startsWith('dusting')) {
-      currentModal.value = DustModal;
-      modalVisible.value = true;
-    } else if (deviceType.value.startsWith('bundletube')) {
-      currentModal.value = BundleModal;
-      modalVisible.value = true;
-    } else if (deviceType.value.startsWith('firemon_normal')) {
-      // currentModal.value = BundleModal;
-      currentModal.value = WisdomBallModal;
-      modalVisible.value = true;
-    } else if (deviceType.value.startsWith('ballvalve')) {
-      currentModal.value = BallvalveModal;
-      modalVisible.value = true;
-    } else if (deviceType.value.startsWith('atomizing')) {
-      currentModal.value = AtomizingModal;
-      modalVisible.value = true;
-    } else if (deviceType.value.startsWith('gaspatrol')) {
-      currentModal.value = GaspatrolModal;
-      modalVisible.value = true;
-    } else if (deviceType.value.startsWith('door')) {
-      const newPage = router.resolve({ path: '/monitorChannel/monitor-firedoor', query: { id: activeID.value, deviceType: deviceType.value } });
-      window.open(newPage.href, '_blank');
-    } else if (deviceType.value.indexOf('gate') != -1) {
-      const newPage = router.resolve({ path: '/monitorChannel/monitor-gate', query: { id: activeID.value, deviceType: deviceType.value } });
-      window.open(newPage.href, '_blank');
-    } else if (deviceType.value.indexOf('window') != -1) {
-      const newPage = router.resolve({ path: '/monitorChannel/monitor-window', query: { id: activeID.value, deviceType: deviceType.value } });
-      window.open(newPage.href, '_blank');
-    } else if (deviceType.value.indexOf('windrect') != -1) {
-      const newPage = router.resolve({ path: '/monitorChannel/monitor-windrect', query: { id: activeID.value, deviceType: deviceType.value } });
-      window.open(newPage.href, '_blank');
-    } else if (deviceType.value.indexOf('fanmain') != -1) {
-      const newPage = router.resolve({ path: '/monitorChannel/monitor-fanmain', query: { id: activeID.value, deviceType: deviceType.value } });
-      window.open(newPage.href, '_blank');
-    } else if (deviceType.value.indexOf('fanlocal') != -1 && glob.sysOrgCode !== 'ymdnymdn') {
-      const newPage = router.resolve({ path: '/monitorChannel/monitor-fanlocal', query: { id: activeID.value, deviceType: deviceType.value } });
-      window.open(newPage.href, '_blank');
-    } else if (deviceType.value.indexOf('fanlocal') != -1 && glob.sysOrgCode == 'ymdnymdn') {
-      const newPage = router.resolve({ path: '/monitorChannel/monitor-fanlocal1', query: { id: activeID.value, deviceType: record.deviceType } });
-      window.open(newPage.href, '_blank');
-    } else if (deviceType.value.indexOf('pulping') != -1) {
-      // const newPage = router.resolve({ path: '/grout-home', query: { id: activeID.value } });
-      const newPage = router.resolve({ path: '/grout-home' });
-      window.open(newPage.href, '_blank');
-    } else if (deviceType.value.indexOf('pressurefan') != -1) {
-      const newPage = router.resolve({ path: '/nitrogen/home', query: { id: activeID.value } });
-      window.open(newPage.href, '_blank');
-    } else if (deviceType.value.indexOf('chamber') != -1) {
-      const newPage = router.resolve({ path: '/chamber-home', query: { id: activeID.value } });
-      window.open(newPage.href, '_blank');
-    } else if (deviceType.value.indexOf('safetymonitor') != -1) {
-      const newPage = router.resolve({ path: '/monitorChannel/device-monitor/safetymonitor', query: { id: activeID.value } });
-      window.open(newPage.href, '_blank');
-    } else if (deviceType.value.indexOf('pump') != -1) {
-      const newPage = router.resolve({ path: '/monitorChannel/gasPump-home', query: { id: activeID.value } });
-      window.open(newPage.href, '_blank');
-    } else if (systemType.value.indexOf('nitrogen') != -1) {
-      const newPage = router.resolve({ path: '/nitrogen-home', query: { id: systemID.value } });
-      window.open(newPage.href, '_blank');
-    } else if (deviceType.value.indexOf('forcFan') != -1) {
-      const newPage = router.resolve({ path: '/forcFan/home', query: { id: activeID.value } });
-      window.open(newPage.href, '_blank');
-    } else if (deviceType.value.indexOf('pulping') != -1) {
-      // const newPage = router.resolve({ path: '/grout-home', query: { id: activeID.value } });
-      const newPage = router.resolve({ path: '/grout-home' });
-      window.open(newPage.href, '_blank');
-    } else if (deviceType.value.indexOf('gasmonitor') != -1) {
-      const newPage = router.resolve({ path: '/gas/warn/home' });
-      window.open(newPage.href, '_blank');
-    } else {
-      message.info('待开发。。。');
-    }
-  } else {
-    if (systemType.value.indexOf('sys_dongshi') != -1) {
-      const newPage = router.resolve({ path: '/chamber-home', query: { id: systemID.value } });
-      window.open(newPage.href, '_blank');
-    } else if (systemType.value.indexOf('sys_obfurage') != -1) {
-      const newPage = router.resolve({ path: '/monitorChannel/obfurage-home', query: { id: systemID.value } });
-      window.open(newPage.href, '_blank');
-    } else if (systemType.value.indexOf('sys_surface_caimei') != -1) {
-      const newPage = router.resolve({ path: '/monitorChannel/wokerFace-home', query: { id: systemID.value } });
-      window.open(newPage.href, '_blank');
-    } else if (systemType.value.indexOf('sys_surface_juejin') != -1) {
-      const newPage = router.resolve({ path: '/monitorChannel/tunFace-home', query: { id: systemID.value } });
-      window.open(newPage.href, '_blank');
-    } else if (systemType.value.indexOf('sys_maintunnel_leather') != -1) {
-      const newPage = router.resolve({ path: '/monitorChannel/beltTun-home', query: { id: systemID.value } });
-      window.open(newPage.href, '_blank');
-    } else if (systemType.value.indexOf('sys_surface_junya') != -1) {
-      const newPage = router.resolve({ path: '/monitorChannel/balancePress-home', query: { id: systemID.value } });
-      window.open(newPage.href, '_blank');
-    } else if (systemType.value.indexOf('sys_nitrogen') != -1) {
-      const newPage = router.resolve({ path: '/nitrogen-home', query: { id: systemID.value } });
-      window.open(newPage.href, '_blank');
-    } else if (deviceType.value.indexOf('forcFan') != -1) {
-      const newPage = router.resolve({ path: '/forcFan/home', query: { id: activeID.value } });
-      window.open(newPage.href, '_blank');
-    } else if (deviceType.value.indexOf('pulping') != -1) {
-      // const newPage = router.resolve({ path: '/grout-home', query: { id: systemID.value } });
-      const newPage = router.resolve({ path: '/grout-home' });
-      window.open(newPage.href, '_blank');
-    } else if (deviceType.value.indexOf('gasDay_normal') != -1) {
-      const newPage = router.resolve({ path: '/gas/gas-report-inspect/home' });
-      window.open(newPage.href, '_blank');
-    } else if (deviceType.value.indexOf('gasDayReport') != -1) {
-      const newPage = router.resolve({ path: '/gas/gasDayReport/home' });
-      window.open(newPage.href, '_blank');
-    } else if (deviceType.value.indexOf('dustDayReport') != -1) {
-      const newPage = router.resolve({ path: '/dustDayReport/home' });
-      window.open(newPage.href, '_blank');
-    } else if (deviceType.value.indexOf('bundleDayReport') != -1) {
-      const newPage = router.resolve({ path: '/bundleDayReport/home' });
-      window.open(newPage.href, '_blank');
-    } else if (deviceType.value.indexOf('bundleSpyDayReport') != -1) {
-      const newPage = router.resolve({ path: '/bundleSpyDayReport/home' });
-      window.open(newPage.href, '_blank');
+  function getSearch(param) {
+    ((gasSearch.address = param.address),
+      (gasSearch.userName = param.userName),
+      (gasSearch.insType = param.insType),
+      (gasSearch.class = param.class));
+  }
+  // 详情跳转
+  function goDetail(record?) {
+    if (record) {
+      activeID.value = record.deviceID;
+      if (deviceType.value.startsWith('fiber')) {
+        currentModal.value = FiberModal;
+        modalVisible.value = true;
+      } else if (deviceType.value.startsWith('dusting')) {
+        currentModal.value = DustModal;
+        modalVisible.value = true;
+      } else if (deviceType.value.startsWith('bundletube')) {
+        currentModal.value = BundleModal;
+        modalVisible.value = true;
+      } else if (deviceType.value.startsWith('firemon_normal')) {
+        // currentModal.value = BundleModal;
+        currentModal.value = WisdomBallModal;
+        modalVisible.value = true;
+      } else if (deviceType.value.startsWith('ballvalve')) {
+        currentModal.value = BallvalveModal;
+        modalVisible.value = true;
+      } else if (deviceType.value.startsWith('atomizing')) {
+        currentModal.value = AtomizingModal;
+        modalVisible.value = true;
+      } else if (deviceType.value.startsWith('gaspatrol')) {
+        currentModal.value = GaspatrolModal;
+        modalVisible.value = true;
+      } else if (deviceType.value.startsWith('door')) {
+        const newPage = router.resolve({ path: '/monitorChannel/monitor-firedoor', query: { id: activeID.value, deviceType: deviceType.value } });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('gate') != -1) {
+        const newPage = router.resolve({ path: '/monitorChannel/monitor-gate', query: { id: activeID.value, deviceType: deviceType.value } });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('window') != -1) {
+        const newPage = router.resolve({ path: '/monitorChannel/monitor-window', query: { id: activeID.value, deviceType: deviceType.value } });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('windrect') != -1) {
+        const newPage = router.resolve({ path: '/monitorChannel/monitor-windrect', query: { id: activeID.value, deviceType: deviceType.value } });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('fanmain') != -1) {
+        const newPage = router.resolve({ path: '/monitorChannel/monitor-fanmain', query: { id: activeID.value, deviceType: deviceType.value } });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('fanlocal') != -1 && glob.sysOrgCode !== 'ymdnymdn') {
+        const newPage = router.resolve({ path: '/monitorChannel/monitor-fanlocal', query: { id: activeID.value, deviceType: deviceType.value } });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('fanlocal') != -1 && glob.sysOrgCode == 'ymdnymdn') {
+        const newPage = router.resolve({ path: '/monitorChannel/monitor-fanlocal1', query: { id: activeID.value, deviceType: record.deviceType } });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('pulping') != -1) {
+        // const newPage = router.resolve({ path: '/grout-home', query: { id: activeID.value } });
+        const newPage = router.resolve({ path: '/grout-home' });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('pressurefan') != -1) {
+        const newPage = router.resolve({ path: '/nitrogen/home', query: { id: activeID.value } });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('chamber') != -1) {
+        const newPage = router.resolve({ path: '/chamber-home', query: { id: activeID.value } });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('safetymonitor') != -1) {
+        const newPage = router.resolve({ path: '/monitorChannel/device-monitor/safetymonitor', query: { id: activeID.value } });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('pump') != -1) {
+        const newPage = router.resolve({ path: '/monitorChannel/gasPump-home', query: { id: activeID.value } });
+        window.open(newPage.href, '_blank');
+      } else if (systemType.value.indexOf('nitrogen') != -1) {
+        const newPage = router.resolve({ path: '/nitrogen-home', query: { id: systemID.value } });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('forcFan') != -1) {
+        const newPage = router.resolve({ path: '/forcFan/home', query: { id: activeID.value } });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('pulping') != -1) {
+        // const newPage = router.resolve({ path: '/grout-home', query: { id: activeID.value } });
+        const newPage = router.resolve({ path: '/grout-home' });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('gasmonitor') != -1) {
+        const newPage = router.resolve({ path: '/gas/warn/home' });
+        window.open(newPage.href, '_blank');
+      } else {
+        message.info('待开发。。。');
+      }
     } else {
-      message.info('待开发。。。');
+      if (systemType.value.indexOf('sys_dongshi') != -1) {
+        const newPage = router.resolve({ path: '/chamber-home', query: { id: systemID.value } });
+        window.open(newPage.href, '_blank');
+      } else if (systemType.value.indexOf('sys_obfurage') != -1) {
+        const newPage = router.resolve({ path: '/monitorChannel/obfurage-home', query: { id: systemID.value } });
+        window.open(newPage.href, '_blank');
+      } else if (systemType.value.indexOf('sys_surface_caimei') != -1) {
+        const newPage = router.resolve({ path: '/monitorChannel/wokerFace-home', query: { id: systemID.value } });
+        window.open(newPage.href, '_blank');
+      } else if (systemType.value.indexOf('sys_surface_juejin') != -1) {
+        const newPage = router.resolve({ path: '/monitorChannel/tunFace-home', query: { id: systemID.value } });
+        window.open(newPage.href, '_blank');
+      } else if (systemType.value.indexOf('sys_maintunnel_leather') != -1) {
+        const newPage = router.resolve({ path: '/monitorChannel/beltTun-home', query: { id: systemID.value } });
+        window.open(newPage.href, '_blank');
+      } else if (systemType.value.indexOf('sys_surface_junya') != -1) {
+        const newPage = router.resolve({ path: '/monitorChannel/balancePress-home', query: { id: systemID.value } });
+        window.open(newPage.href, '_blank');
+      } else if (systemType.value.indexOf('sys_nitrogen') != -1) {
+        const newPage = router.resolve({ path: '/nitrogen-home', query: { id: systemID.value } });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('forcFan') != -1) {
+        const newPage = router.resolve({ path: '/forcFan/home', query: { id: activeID.value } });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('pulping') != -1) {
+        // const newPage = router.resolve({ path: '/grout-home', query: { id: systemID.value } });
+        const newPage = router.resolve({ path: '/grout-home' });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('gasDay_normal') != -1) {
+        const newPage = router.resolve({ path: '/gas/gas-report-inspect/home' });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('gasDayReport') != -1) {
+        const newPage = router.resolve({ path: '/gas/gasDayReport/home' });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('dustDayReport') != -1) {
+        const newPage = router.resolve({ path: '/dustDayReport/home' });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('bundleDayReport') != -1) {
+        const newPage = router.resolve({ path: '/bundleDayReport/home' });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('bundleSpyDayReport') != -1) {
+        const newPage = router.resolve({ path: '/bundleSpyDayReport/home' });
+        window.open(newPage.href, '_blank');
+      } else {
+        message.info('待开发。。。');
+      }
     }
   }
-}
-function exportXls() {
-  handleExportXls('瓦斯巡检记录', getExportUrl, { devicetype: deviceType.value });
-}
-
-function toHome() {
-  deviceList.value = [];
-  if (timer) clearTimeout(timer);
-  timer = undefined;
-  deviceType.value = '';
-  go(glob.homePath);
-}
-
-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 exportXls() {
+    handleExportXls('瓦斯巡检记录', getExportUrl, { devicetype: deviceType.value });
+  }
+
+  function toHome() {
+    deviceList.value = [];
+    if (timer) clearTimeout(timer);
+    timer = undefined;
+    deviceType.value = '';
+    go(glob.homePath);
+  }
 
-async function findTreeDataValue(obj) {
-  const findDeviceType = (data: any[], obj, flag = true) => {
-    return data.find((item: any) => {
-      if (item.children.length > 0) {
-        findDeviceType(item.children, obj);
+  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';
       }
-      // debugger;
-      if (obj.deviceType && obj.deviceType.startsWith('sys_')) {
-        // debugger;
-        if (item.type == obj.deviceid) {
-          deviceType.value = 'sys';
-          systemID.value = obj.deviceid;
-          selectedKeys.value = [item.key];
-          expandedKeys.value = [item.key];
-          treeNodeTitle.value = item.title;
+    });
+  }
+
+  async function findTreeDataValue(obj) {
+    const findDeviceType = (data: any[], obj, flag = true) => {
+      return data.find((item: any) => {
+        if (item.children.length > 0) {
+          findDeviceType(item.children, obj);
         }
-      } else {
-        if (!flag) {
-          if (obj.deviceType && item.type.startsWith(obj.deviceType)) {
-            deviceType.value = item.type;
+        // debugger;
+        if (obj.deviceType && obj.deviceType.startsWith('sys_')) {
+          // debugger;
+          if (item.type == obj.deviceid) {
+            deviceType.value = 'sys';
+            systemID.value = obj.deviceid;
             selectedKeys.value = [item.key];
             expandedKeys.value = [item.key];
             treeNodeTitle.value = item.title;
-            return true;
           }
-          return false;
         } else {
-          if (obj.deviceType && item.type == obj.deviceType) {
-            deviceType.value = item.type;
-            selectedKeys.value = [item.key];
-            expandedKeys.value = [item.key];
-            treeNodeTitle.value = item.title;
-            return true;
+          if (!flag) {
+            if (obj.deviceType && item.type.startsWith(obj.deviceType)) {
+              deviceType.value = item.type;
+              selectedKeys.value = [item.key];
+              expandedKeys.value = [item.key];
+              treeNodeTitle.value = item.title;
+              return true;
+            }
+            return false;
+          } else {
+            if (obj.deviceType && item.type == obj.deviceType) {
+              deviceType.value = item.type;
+              selectedKeys.value = [item.key];
+              expandedKeys.value = [item.key];
+              treeNodeTitle.value = item.title;
+              return true;
+            }
+            return false;
           }
-          return false;
         }
-      }
-      return false;
-    });
-  };
-  const flag = findDeviceType(treeData.value, obj);
-  if (!flag) {
-    findDeviceType(treeData.value, obj, false);
-  }
-  // 无类型时
-  if (!treeNodeTitle.value && treeData.value && treeData.value[0] && treeData.value[0]['children']) {
-    const defaultData = treeData.value[0]['children'][0];
-    if (deviceType.value !== defaultData.type) deviceType.value = defaultData.type;
-    selectedKeys.value = [defaultData.key as string];
-    expandedKeys.value = [defaultData.key as string];
-    treeNodeTitle.value = defaultData.title;
-  }
+        return false;
+      });
+    };
+    const flag = findDeviceType(treeData.value, obj);
+    if (!flag) {
+      findDeviceType(treeData.value, obj, false);
+    }
+    // 无类型时
+    if (!treeNodeTitle.value && treeData.value && treeData.value[0] && treeData.value[0]['children']) {
+      const defaultData = treeData.value[0]['children'][0];
+      if (deviceType.value !== defaultData.type) deviceType.value = defaultData.type;
+      selectedKeys.value = [defaultData.key as string];
+      expandedKeys.value = [defaultData.key as string];
+      treeNodeTitle.value = defaultData.title;
+    }
 
-  if (timer === undefined) {
-    timer = null;
-    await getDataSource();
-    getMonitor(true);
-  }
-}
-
-function monitorChange(index) {
-  dataSource.value = [];
-  deviceActive.value = deviceList.value[index].deviceType;
-  router.replace({ path: route.path, query: { ...route.query, deviceActive: deviceActive.value } });
-  if (deviceType.value != deviceActive.value) deviceType.value = deviceActive.value;
-  if (activeKey.value == 'monitor' && monitorTable.value) {
-    monitorTable.value.setLoading(true);
-    dataSource.value = deviceList.value[index].datalist;
-  }
-  if (activeKey.value == 'history' && historyTable.value) {
-    historyTable.value.setLoading(true);
-  }
-  if (activeKey.value == 'alarm' && alarmHistoryTable.value) {
-    alarmHistoryTable.value.setLoading(true);
-  }
-  if (activeKey.value == '4' && handlerHistoryTable.value) {
-    handlerHistoryTable.value.setLoading(true);
+    if (timer === undefined) {
+      timer = null;
+      await getDataSource();
+      getMonitor(true);
+    }
   }
-}
-/**
- * 设置巷道设备定位图标的显示与隐藏
- */
-function setLocation() {
-  let locationStr = '';
-  locationList.value.forEach((item: any) => {
-    if (item.Visible) {
-      locationStr = locationStr ? locationStr + ',' + item.value : item.value;
+
+  function monitorChange(index) {
+    dataSource.value = [];
+    deviceActive.value = deviceList.value[index].deviceType;
+    router.replace({ path: route.path, query: { ...route.query, deviceactive: deviceActive.value } });
+    if (deviceType.value != deviceActive.value) deviceType.value = deviceActive.value;
+    if (activeKey.value == 'monitor' && monitorTable.value) {
+      monitorTable.value.setLoading(true);
+      dataSource.value = deviceList.value[index].datalist;
     }
-  });
-  actions.setGlobalState({ locationId: null, locationObj: null, pageObj: null, locationPlane: locationStr });
-  setTimeout(() => {
-    message.success('设置成功');
-  }, 600);
-}
-watch(
-  () => props.pageData,
-  async (pageObj) => {
-    isRefresh.value = false;
-    if (!treeData.value || treeData.value?.length < 1) {
-      await getDeviceType();
+    if (activeKey.value == 'history' && historyTable.value) {
+      historyTable.value.setLoading(true);
     }
-    nextTick(() => {
-      isRefresh.value = true;
-      // if (pageObj && pageObj.pageType && pageObj.pageType.startsWith('sys_')) {
-      //   findTreeDataValue({ deviceid: systemID.value });
-      // } else {
-      //   findTreeDataValue({ deviceType: pageObj.pageType });
-      // }
-      findTreeDataValue(pageObj);
-    });
-  },
-  { immediate: true }
-);
-
-watch(
-  () => deviceActive.value,
-  async (val) => {
-    if (val) {
-      router.push({ path: route.path, query: { ...route.query, deviceActive: deviceActive.value } });
+    if (activeKey.value == 'alarm' && alarmHistoryTable.value) {
+      alarmHistoryTable.value.setLoading(true);
+    }
+    if (activeKey.value == '4' && handlerHistoryTable.value) {
+      handlerHistoryTable.value.setLoading(true);
     }
   }
-);
-
-onMounted(async () => {
-  const pageObj = props.pageData;
-  if (!pageObj) return;
-  if (pageObj && pageObj.pageType) {
-    if (pageObj.pageType.startsWith('sys_')) {
-      await getDeviceType(pageObj.pageType);
-      findTreeDataValue({ deviceType: pageObj.pageType, deviceid: pageObj.deviceid });
+  /**
+   * 设置巷道设备定位图标的显示与隐藏
+   */
+  function setLocation() {
+    let locationStr = '';
+    locationList.value.forEach((item: any) => {
+      if (item.Visible) {
+        locationStr = locationStr ? locationStr + ',' + item.value : item.value;
+      }
+    });
+    actions.setGlobalState({ locationId: null, locationObj: null, pageObj: null, locationPlane: locationStr });
+    setTimeout(() => {
+      message.success('设置成功');
+    }, 600);
+  }
+  watch(
+    () => props.pageData,
+    async (pageObj) => {
+      isRefresh.value = false;
+      if (!treeData.value || treeData.value?.length < 1) {
+        await getDeviceType();
+      }
+      nextTick(() => {
+        isRefresh.value = true;
+        // if (pageObj && pageObj.pageType && pageObj.pageType.startsWith('sys_')) {
+        //   findTreeDataValue({ deviceid: systemID.value });
+        // } else {
+        //   findTreeDataValue({ deviceType: pageObj.pageType });
+        // }
+        findTreeDataValue(pageObj);
+      });
+    },
+    { immediate: true }
+  );
+
+  watch(
+    () => deviceActive.value,
+    async (val) => {
+      if (val) {
+        router.push({ path: route.path, query: { ...route.query, deviceactive: deviceActive.value } });
+      }
+    }
+  );
+
+  onMounted(async () => {
+    const pageObj = props.pageData;
+    if (!pageObj) return;
+    if (pageObj && pageObj.pageType) {
+      if (pageObj.pageType.startsWith('sys_')) {
+        await getDeviceType(pageObj.pageType);
+        findTreeDataValue({ deviceType: pageObj.pageType, deviceid: pageObj.deviceid });
+      } else {
+        await getDeviceType();
+        findTreeDataValue({ deviceType: pageObj.pageType });
+      }
     } else {
       await getDeviceType();
-      findTreeDataValue({ deviceType: pageObj.pageType });
+      findTreeDataValue({ deviceid: pageObj.deviceid });
+    }
+    // 定位
+    const posShowData = pageObj.locationPlane;
+    if (posShowData) {
+      locationList.value = posShowData;
+    } else {
+      locationList.value = await devPosition({});
     }
-  } else {
-    await getDeviceType();
-    findTreeDataValue({ deviceid: pageObj.deviceid });
-  }
-  // 定位
-  const posShowData = pageObj.locationPlane;
-  if (posShowData) {
-    locationList.value = posShowData;
-  } else {
-    locationList.value = await devPosition({});
-  }
 
-  router.push({ path: route.path, query: { ...route.query, tabtype: activeKey.value } });
-  // safetyOption.value = await safetyDeviceList(null, { devicetype: 'safetymonitor', code: 'dataTypeName' })
-});
+    router.push({ path: route.path, query: { ...route.query, tabtype: activeKey.value } });
+    // safetyOption.value = await safetyDeviceList(null, { devicetype: 'safetymonitor', code: 'dataTypeName' })
+  });
 
-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;
-  }
-}
-
-.scene-box {
-  --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-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;
+    --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-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;
+    }
   }
-}
 
-.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;
   }
-}
-
-.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;
+
+  .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;
   }
 
-  .put-away-icon {
-    position: relative;
-    display: inline-block;
-    left: 4px;
+  .is-expansion-icon {
+    padding: 5px;
+    pointer-events: auto;
+    z-index: 999;
   }
-}
-
-.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-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;
 
-    .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;
+      }
+    }
+
+    .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-show-icon {
-      width: 30px;
-      height: 30px;
-      font-size: 30px;
+    .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>

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

@@ -281,7 +281,7 @@
               </template>
             </div>
           </a-tab-pane>
-          <a-tab-pane key="7" v-if="false" tab="监测曲线图" force-render>
+          <a-tab-pane key="7" v-if="hasPermission('show:historyFanLocalEcharts')" tab="历史曲线图" force-render>
             <div class="tab-item" v-if="activeKey === '7'">
               <FanDeviceEcharts
                 chartsColumnsType="fanlocal_chart"
@@ -1957,6 +1957,7 @@
     }
     .video-parent {
       pointer-events: auto !important;
+      align-self: auto !important;
     }
   }
 
@@ -1965,6 +1966,9 @@
       padding-right: 0px;
     }
   }
+  .to-no-right {
+    padding: 0 350px !important;
+  }
 
   :deep(.button-box) {
     position: relative;

src/views/vent/monitorManager/gateMonitor/gate.threejs.tj.ssl.ts

@@ -74,7 +74,7 @@ class ddFmSsl {
         y: 95,
       },
       {
-        text: `${selectData.OpenDegree ? '开度值(°)' : selectData.frontArea ? '过风面积(㎡)' : '过风面积(㎡)'}:`,
+        text: `${selectData.OpenDegree ? '开度值(°)' : selectData.totalArea ? '过风面积(㎡)' : '过风面积(㎡)'}:`,
         font: 'normal 30px Arial',
         color: '#009900',
         strokeStyle: '#002200',
@@ -84,8 +84,8 @@ class ddFmSsl {
       {
         text: selectData.OpenDegree
           ? Number(`${selectData.OpenDegree}`).toFixed(2)
-          : selectData.frontArea
-            ? Number(`${selectData.frontArea}`).toFixed(2)
+          : selectData.totalArea
+            ? Number(`${selectData.totalArea}`).toFixed(2)
             : '-',
         font: 'normal 30px Arial',
         color: '#009900',

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

@@ -364,7 +364,7 @@
               <Bar :chartData="dataSource" xAxisPropType="strname" :propTypeArr="propTypeArr" height="40vh" width="100%" />
             </div>
           </a-tab-pane> -->
-          <a-tab-pane key="7" v-if="false" tab="历史曲线图" force-render>
+          <a-tab-pane key="7" v-if="hasPermission('show:historyFanEcharts')" tab="历史曲线图" force-render>
             <div class="tab-item" v-if="activeKey === '7'" style="padding-bottom: 20px">
               <FanDeviceEcharts
                 chartsColumnsType="fanmain_chart"
@@ -429,6 +429,7 @@
   <div
     v-show="showPlay"
     ref="playerRef"
+    :class="{ 'to-right': rightColumns.length < 1 || leftColumns.length < 1, 'to-no-right': rightColumns.length > 0 && leftColumns.length > 0 }"
     style="z-index: 999; position: absolute; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; margin: auto; pointer-events: none"
     :style="{ top: hasPermission('btn:show') ? '155px' : '100px' }"
   >
@@ -2382,8 +2383,12 @@
     }
     .video-parent {
       pointer-events: auto !important;
+      align-self: auto !important;
     }
   }
+  .to-no-right {
+    padding: 0 350px !important;
+  }
 
   ::v-deep(.@{ventSpace}-table-wrapper) {
     height: 100% !important;