[Feat 0000]测风装置需求开发

src/views/vent/deviceManager/comment/warningTabel/warning.data.ts

@@ -51,7 +51,8 @@ export const levelColumns: BasicColumn[] = [
     width: 180,
     editRow: true,
     dataIndex: 'alarmType',
-    editComponent: 'Input',
+    editComponent: 'ApiSelect',
+    editComponentProps: { api: initDictOptions.bind(null, 'alarmType') },
   },
   {
     title: '是否语音播报',

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

@@ -0,0 +1,242 @@
+<template>
+  <div class="alarm-history-table">
+    <BasicTable ref="alarmHistory" @register="registerTable" :data-source="dataSource">
+      <template #bodyCell="{ column, record }">
+        <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : 'red'">{{
+          record.warnFlag == '0' ? '正常' : '报警'
+        }}</a-tag>
+        <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
+          record.netStatus == '0' ? '断开' : '连接'
+        }}</a-tag>
+        <template v-if="column.dataIndex === 'nwartype'">
+          <!-- 除了 101（蓝色预警）其他都是红色字体 -->
+          <span :class="{ 'color-#ff3823': ['102', '103', '104', '201', '1001'].includes(record.nwartype) }">
+            {{ render.renderDictText(record.nwartype, 'leveltype') || '-' }}
+          </span>
+        </template>
+        <slot name="filterCell" v-bind="{ column, record }"></slot>
+      </template>
+    </BasicTable>
+  </div>
+</template>
+
+<script lang="ts" name="system-user" setup>
+//ts语法
+import { watch, ref, defineExpose, onMounted } from 'vue';
+import { BasicTable } from '/@/components/Table';
+import { useListPage } from '/@/hooks/system/useListPage';
+import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+import { defHttp } from '/@/utils/http/axios';
+import dayjs from 'dayjs';
+import { getAutoScrollContainer } from '/@/utils/common/compUtils';
+import { usePermission } from '/@/hooks/web/usePermission';
+
+const props = defineProps({
+  columnsType: {
+    type: String,
+    required: true,
+  },
+  columns: {
+    type: Array,
+    // required: true,
+    default: () => [],
+  },
+  deviceType: {
+    type: String,
+    required: true,
+  },
+  deviceListApi: {
+    type: Function,
+  },
+  designScope: {
+    type: String,
+  },
+  sysId: {
+    type: String,
+  },
+  deviceId: {
+    type: String,
+    default: '',
+  },
+  scroll: {
+    type: Object,
+    default: { y: 0 },
+  },
+  list: {
+    type: Function,
+    default: (params) => defHttp.get({ url: '/safety/ventanalyAlarmLog/list', params }),
+  },
+});
+
+const { hasPermission } = usePermission();
+const getAlarmLogNumApi = (params) => defHttp.post({ url: '/safety/ventanalyAlarmLog/queryAlarmLogNumByType', params });
+const alarmHistory = ref();
+const columns = ref([]);
+const dataSource = ref([]);
+
+const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
+
+async function getDeviceList() {
+  const formData = getForm().getFieldsValue();
+  const params = {
+    deviceType: 'windrect_ds',
+    starttime: formData['createTime_begin'],
+    endtime: formData['createTime_end'],
+  };
+  const res = await getAlarmLogNumApi(params);
+  const flattenedData = res.result.map((item) => {
+    return {
+      deviceid: item.deviceid,
+      devicename: item.devicename,
+      ...item.alarmTypeCounts,
+    };
+  });
+
+  dataSource.value = flattenedData;
+}
+
+watch(
+  () => {
+    return props.columnsType;
+  },
+  async (newVal) => {
+    if (!newVal) return;
+    const column = getTableHeaderColumns(props.deviceType + '_alarmNum');
+    columns.value = column;
+    // if (alarmHistory.value) reload();
+  },
+  {
+    immediate: true,
+  }
+);
+
+watch(
+  () => props.deviceType,
+  async () => {
+    await getDeviceList();
+  }
+);
+
+watch(
+  () => props.scroll.y,
+  (newVal) => {
+    if (newVal) {
+      tableScroll.value = { y: newVal - 100 };
+    } else {
+      tableScroll.value = {};
+    }
+  }
+);
+
+// 列表页面公共参数、方法
+const { tableContext } = useListPage({
+  tableProps: {
+    // api: props.list,
+    columns: props.columnsType ? columns : (props.columns as any[]),
+    canResize: true,
+    showTableSetting: false,
+    showActionColumn: !hasPermission('ventanalyAlarmAnalysis:noShow'),
+    bordered: false,
+    size: 'small',
+    scroll: tableScroll,
+    showIndexColumn: true,
+    formConfig: {
+      labelAlign: 'left',
+      showAdvancedButton: false,
+      // autoAdvancedCol: 2,
+      schemas: [
+        {
+          field: 'createTime_begin',
+          label: '开始时间',
+          component: 'DatePicker',
+          defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
+          required: true,
+          componentProps: {
+            showTime: true,
+            valueFormat: 'YYYY-MM-DD HH:mm:ss',
+            getPopupContainer: getAutoScrollContainer,
+          },
+          colProps: {
+            span: 4,
+          },
+        },
+        {
+          field: 'createTime_end',
+          label: '结束时间',
+          component: 'DatePicker',
+          defaultValue: dayjs(),
+          required: true,
+          componentProps: {
+            showTime: true,
+            valueFormat: 'YYYY-MM-DD HH:mm:ss',
+            getPopupContainer: getAutoScrollContainer,
+          },
+          colProps: {
+            span: 4,
+          },
+        },
+      ],
+      // fieldMapToTime: [['createTime', ['createTime_begin', 'createTime_end'], '']],
+    },
+    // fetchSetting: {
+    //   listField: 'records',
+    // },
+    pagination: {
+      current: 1,
+      pageSize: 10,
+      pageSizeOptions: ['10', '30', '50', '100'],
+    },
+    beforeFetch(params) {
+      params.devicetype = props.deviceType + '*';
+      if (props.sysId) {
+        params.sysId = props.sysId;
+      }
+    },
+  },
+});
+//注册table数据
+const [registerTable, { reload, setLoading, getForm }] = tableContext;
+onMounted(async () => {
+  await getDeviceList();
+});
+
+defineExpose({ setLoading });
+</script>
+
+<style scoped lang="less">
+@ventSpace: zxm;
+
+:deep(.ventSpace-table-body) {
+  height: auto !important;
+}
+:deep(.zxm-picker) {
+  height: 30px !important;
+}
+.alarm-history-table {
+  width: 100%;
+  :deep(.jeecg-basic-table-form-container) {
+    .@{ventSpace}-form {
+      padding: 0 !important;
+      border: none !important;
+      margin-bottom: 0 !important;
+      .@{ventSpace}-picker,
+      .@{ventSpace}-select-selector {
+        width: 100% !important;
+        background: #00000017;
+        border: 1px solid #b7b7b7;
+        input,
+        .@{ventSpace}-select-selection-item,
+        .@{ventSpace}-picker-suffix {
+          color: #fff;
+        }
+        .@{ventSpace}-select-selection-placeholder {
+          color: #ffffffaa;
+        }
+      }
+    }
+    .@{ventSpace}-table-title {
+      min-height: 0 !important;
+    }
+  }
+}
+</style>

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

@@ -113,6 +113,11 @@
           <a-tab-pane v-if="hasPermission('windrect:result')" key="6" tab="测风结果">
             <ResultTable v-if="activeKey === '6'" deviceType="windrect_list" :scroll="scroll" />
           </a-tab-pane>
+          <a-tab-pane key="7" tab="报警次数统计">
+            <div class="tab-item" v-if="activeKey === '7'">
+              <AlarmNumTable columns-type="alarm" :device-type="deviceType" designScope="alarm-history" :scroll="280" />
+            </div>
+          </a-tab-pane>
         </a-tabs>
       </dv-border-box8>
     </div>
@@ -146,690 +151,701 @@
 </template>
 
 <script setup lang="ts">
-  import DeviceEcharts from '../comment/DeviceEcharts.vue';
-  import { unref, onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw, nextTick, inject } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import MonitorTable from '../comment/MonitorTable.vue';
-  import ModalTable from './components/modalTable.vue';
-  import HandleModal from './components/modal.vue';
-  import DeviceBaseInfo from '../comment/components/DeviceBaseInfo.vue';
-  import ResultTable from './components/resultTable.vue';
-  import HistoryTable from '../comment/HistoryTable.vue';
-  import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
-  import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
-  import { deviceControlApi } from '/@/api/vent/index';
-  import { mountedThree, destroy, addMonitorText, play, setModelType, playCamera } from './windrect.threejs';
-  import { list, pathList, deviceList, testWind, exportXls, resetWind } from './windrect.api';
-  import { message, Progress } from 'ant-design-vue';
-  import { chartsColumns, chartsColumnsHistory, option } from './windrect.data';
-  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
-  import { setDivHeight } from '/@/utils/event';
-  import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
-  import { useRouter } from 'vue-router';
-  import { useModal } from '/@/components/Modal';
-  import { useCamera } from '/@/hooks/system/useCamera';
-  import { usePermission } from '/@/hooks/web/usePermission';
-  const { hasPermission } = usePermission();
-
-  const globalConfig = inject('globalConfig');
-
-  const { currentRoute } = useRouter();
-
-  const MonitorDataTable = ref();
-  const scroll = reactive({
-    y: 230,
-  });
-  const modalType = ref('');
-  const modalIsShow = ref(false);
-  const modalTable = ref();
-  const runNum = ref(5); //设备运行数量
-  const criticalPathList = ref([]);
-  const playerRef = ref();
-  const activeKey = ref('1');
-  const loading = ref(false);
-  // 默认初始是第一行
-  const selectRowIndex = ref(-1);
-  // 监测数据
-  const selectData = reactive({
-    deviceID: '',
-    deviceType: '',
-    strname: '',
-    dataDh: '-', //压差
-    dataDtestq: '-', //测试风量
-    // sourcePressure: '-', //气源压力
-    dataDequivalarea: '-',
-    netStatus: '0', //通信状态
-    fault: '气源压力超限',
-    sign: -1,
-    sensorRight: 0,
-    sensorMiddle: 1,
-    sensorLeft: 0,
-  });
-  const deviceType = ref('windrect');
-  const deviceId = ref('');
-  const chartsColumnArr = getTableHeaderColumns('windrect_chart');
-  const chartsColumnList = ref(chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumns);
-
-  // const dataSource = computed(() => {
-  //   const data = [...getRecordList()] || [];
-  //   Object.assign(selectData, toRaw(data[selectRowIndex.value]));
-  //   addMonitorText(selectData);
-  //   return data;
-  // });
-
-  const dataSource = ref([]);
-  const [regModal, { openModal }] = useModal();
-
-  const { getCamera, removeCamera } = useCamera();
-  const tabChange = (activeKeyVal) => {
-    activeKey.value = activeKeyVal;
-    if (activeKeyVal == 1) {
-      nextTick(() => {
-        MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID]);
-      });
-    }
-  };
-
-  // 设备数据
-  const controlType = ref(1);
-  //表单赋值
-  const [registerModal, { setModalProps, closeModal }] = useModalInner();
-
-  // https获取监测数据
-  let timer: null | NodeJS.Timeout = null;
-  function getMonitor(flag?) {
-    if (Object.prototype.toString.call(timer) === '[object Null]') {
-      timer = setTimeout(
-        () => {
-          list({ devicetype: deviceType.value, pagetype: 'normal' }).then((res) => {
-            if (res && res.msgTxt[0]) {
-              dataSource.value = res.msgTxt[0].datalist || [];
-              if (dataSource.value.length > 0) {
-                dataSource.value.forEach((data: any) => {
-                  const readData = data.readData;
-                  data = Object.assign(data, readData);
-                });
-                if (dataSource.value.length > 0 && selectRowIndex.value == -1) {
-                  // 初始打开页面
-                  if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) {
-                    MonitorDataTable.value.setSelectedRowKeys([currentRoute.value['query']['id']]);
-                  } else {
-                    MonitorDataTable.value.setSelectedRowKeys([dataSource.value[0]['deviceID']]);
+import DeviceEcharts from '../comment/DeviceEcharts.vue';
+import { unref, onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw, nextTick, inject } from 'vue';
+import { BasicModal, useModalInner } from '/@/components/Modal';
+import MonitorTable from '../comment/MonitorTable.vue';
+import ModalTable from './components/modalTable.vue';
+import HandleModal from './components/modal.vue';
+import DeviceBaseInfo from '../comment/components/DeviceBaseInfo.vue';
+import ResultTable from './components/resultTable.vue';
+import HistoryTable from '../comment/HistoryTable.vue';
+import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
+import AlarmNumTable from '../comment/AlarmNumTable.vue';
+import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
+import { deviceControlApi } from '/@/api/vent/index';
+import { mountedThree, destroy, addMonitorText, play, setModelType, playCamera } from './windrect.threejs';
+import { list, pathList, deviceList, testWind, exportXls, resetWind } from './windrect.api';
+import { message, Progress } from 'ant-design-vue';
+import { chartsColumns, chartsColumnsHistory, option } from './windrect.data';
+import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+import { setDivHeight } from '/@/utils/event';
+import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
+import { useRouter } from 'vue-router';
+import { useModal } from '/@/components/Modal';
+import { useCamera } from '/@/hooks/system/useCamera';
+import { usePermission } from '/@/hooks/web/usePermission';
+const { hasPermission } = usePermission();
+
+const globalConfig = inject('globalConfig');
+
+const { currentRoute } = useRouter();
+
+const MonitorDataTable = ref();
+const scroll = reactive({
+  y: 230,
+});
+const modalType = ref('');
+const modalIsShow = ref(false);
+const modalTable = ref();
+const runNum = ref(5); //设备运行数量
+const criticalPathList = ref([]);
+const playerRef = ref();
+const activeKey = ref('1');
+const loading = ref(false);
+// 默认初始是第一行
+const selectRowIndex = ref(-1);
+// 监测数据
+const selectData = reactive({
+  deviceID: '',
+  deviceType: '',
+  strname: '',
+  dataDh: '-', //压差
+  dataDtestq: '-', //测试风量
+  // sourcePressure: '-', //气源压力
+  dataDequivalarea: '-',
+  netStatus: '0', //通信状态
+  fault: '气源压力超限',
+  sign: -1,
+  sensorRight: 0,
+  sensorMiddle: 1,
+  sensorLeft: 0,
+});
+const deviceType = ref('windrect');
+const deviceId = ref('');
+const chartsColumnArr = getTableHeaderColumns('windrect_chart');
+const chartsColumnList = ref(chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumns);
+
+// const dataSource = computed(() => {
+//   const data = [...getRecordList()] || [];
+//   Object.assign(selectData, toRaw(data[selectRowIndex.value]));
+//   addMonitorText(selectData);
+//   return data;
+// });
+
+const dataSource = ref([]);
+const [regModal, { openModal }] = useModal();
+
+const { getCamera, removeCamera } = useCamera();
+const tabChange = (activeKeyVal) => {
+  activeKey.value = activeKeyVal;
+  if (activeKeyVal == 1) {
+    nextTick(() => {
+      MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID]);
+    });
+  }
+};
+
+// 设备数据
+const controlType = ref(1);
+//表单赋值
+const [registerModal, { setModalProps, closeModal }] = useModalInner();
+
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor(flag?) {
+  if (Object.prototype.toString.call(timer) === '[object Null]') {
+    timer = setTimeout(
+      () => {
+        list({ devicetype: deviceType.value, pagetype: 'normal' }).then((res) => {
+          if (res && res.msgTxt[0]) {
+            // dataSource.value = res.msgTxt[0].datalist || [];
+            const getData = res.msgTxt[0].datalist || [];
+            getData.forEach((data) => {
+              if (data.limits.m3 && data.limits.m3.limitlevels) {
+                data.limits.m3.limitlevels.forEach((item) => {
+                  if (item.alarmType) {
+                    // 拼接字段名并存入readData
+                    data.readData[`${item.alarmType}_fmin`] = item.fmin;
+                    data.readData[`${item.alarmType}_fmax`] = item.fmax;
                   }
+                });
+              }
+              return data;
+            });
+            dataSource.value = getData;
+            if (dataSource.value.length > 0) {
+              dataSource.value.forEach((data: any) => {
+                const readData = data.readData;
+                data = Object.assign(data, readData);
+              });
+              if (dataSource.value.length > 0 && selectRowIndex.value == -1) {
+                // 初始打开页面
+                if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) {
+                  MonitorDataTable.value.setSelectedRowKeys([currentRoute.value['query']['id']]);
+                } else {
+                  MonitorDataTable.value.setSelectedRowKeys([dataSource.value[0]['deviceID']]);
                 }
-                const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
-                Object.assign(selectData, data);
-                addMonitorText(selectData);
-
-                palyAnimation(selectData);
               }
-            }
-            if (timer) {
-              timer = null;
-            }
-            getMonitor();
-          });
-        },
-        flag ? 0 : 1000
-      );
-    }
-  }
-
-  let deviceRunState = '',
-    tanTouRunState = '';
-  // 根据3个点位分别执行动画
-  function palyAnimation(selectData) {
-    if (selectData.deviceType == 'windrect_normal') {
-      if (selectData['apparatusRun'] == 1) {
-        const flag = selectData.sign == '0' ? 'up' : selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : null;
-        if (flag) play(flag);
-      } else {
-        const flag = selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : null;
-        if (flag) play(flag, true);
-      }
-    }
-    // 运行中是0，运行到达是1
-    if (selectData.deviceType == 'windrect_rect_single') {
-      if (selectData['apparatusRun'] == 1) {
-        // 镜头指向横杆
-        // if(!deviceRunState && !tanTouRunState)playCamera('start')
-        // 正在执行或是开始执行
-
-        //开始执行时，
-        // selectData['poleIncipient'] == 1 selectData.sensorMiddle == 1 代表可是执行 或是 执行结束
-
-        // 1. selectData['poleIncipient'] == 1 selectData.sensorMiddle == 1, 执行 play('up', true)，play('middle', true)
-        // 2. 探头左移play('left')
-        // 3. 探头右移play('right')
-        // 4. 横杆向中位移动，探头在右边
-        // 5. 探头移到中间play('middle')
-        // 6. 探头移到左边play('left')
-        // 7. 横杆向低位移动，探头在左边
-        // 8. 探头移到中间play('middle')
-        // 9. 探头右移play('right')
-        // 10. 测风结束，探头移到中间play('middle')，横杆向高位移动
-        if (selectData['poleIncipient'] == 1) {
-          // 横杆在高位，开始执行 或是 执行结束
-          if (selectData.sensorMiddle == 1 && !deviceRunState && !tanTouRunState) {
-            // 1. 开始执行
-            deviceRunState = 'up';
-            tanTouRunState = 'middle';
-            play('up', true);
-            play('middle', true);
-          }
-          if (deviceRunState == 'up-m') {
-            play('up', true);
-            play('middle', true);
-            deviceRunState = '';
-            tanTouRunState = '';
-            playCamera('end');
-          }
-          // 初始已经在运行
+              const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
+              Object.assign(selectData, data);
+              addMonitorText(selectData);
 
-          if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
-            //2.探头左移play('left')
-            if (tanTouRunState == 'middle') {
-              tanTouRunState = 'left-m';
-              play('left');
-            }
-            //3. 探头右移play('right')
-            if (tanTouRunState == 'left') {
-              tanTouRunState = 'right-m';
-              play('right');
+              palyAnimation(selectData);
             }
           }
-          if (selectData.sensorLeft == 1) {
-            tanTouRunState = 'left';
-            if (!tanTouRunState || tanTouRunState == 'left-m') {
-              play('left', true);
-            }
+          if (timer) {
+            timer = null;
           }
-          if (selectData.sensorRight == 1) {
-            tanTouRunState = 'right';
-            if (!tanTouRunState || tanTouRunState == 'right-m') {
-              play('right', true);
-            }
+          getMonitor();
+        });
+      },
+      flag ? 0 : 1000
+    );
+  }
+}
+
+let deviceRunState = '',
+  tanTouRunState = '';
+// 根据3个点位分别执行动画
+function palyAnimation(selectData) {
+  if (selectData.deviceType == 'windrect_normal') {
+    if (selectData['apparatusRun'] == 1) {
+      const flag = selectData.sign == '0' ? 'up' : selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : null;
+      if (flag) play(flag);
+    } else {
+      const flag = selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : null;
+      if (flag) play(flag, true);
+    }
+  }
+  // 运行中是0，运行到达是1
+  if (selectData.deviceType == 'windrect_rect_single') {
+    if (selectData['apparatusRun'] == 1) {
+      // 镜头指向横杆
+      // if(!deviceRunState && !tanTouRunState)playCamera('start')
+      // 正在执行或是开始执行
+
+      //开始执行时，
+      // selectData['poleIncipient'] == 1 selectData.sensorMiddle == 1 代表可是执行 或是 执行结束
+
+      // 1. selectData['poleIncipient'] == 1 selectData.sensorMiddle == 1, 执行 play('up', true)，play('middle', true)
+      // 2. 探头左移play('left')
+      // 3. 探头右移play('right')
+      // 4. 横杆向中位移动，探头在右边
+      // 5. 探头移到中间play('middle')
+      // 6. 探头移到左边play('left')
+      // 7. 横杆向低位移动，探头在左边
+      // 8. 探头移到中间play('middle')
+      // 9. 探头右移play('right')
+      // 10. 测风结束，探头移到中间play('middle')，横杆向高位移动
+      if (selectData['poleIncipient'] == 1) {
+        // 横杆在高位，开始执行 或是 执行结束
+        if (selectData.sensorMiddle == 1 && !deviceRunState && !tanTouRunState) {
+          // 1. 开始执行
+          deviceRunState = 'up';
+          tanTouRunState = 'middle';
+          play('up', true);
+          play('middle', true);
+        }
+        if (deviceRunState == 'up-m') {
+          play('up', true);
+          play('middle', true);
+          deviceRunState = '';
+          tanTouRunState = '';
+          playCamera('end');
+        }
+        // 初始已经在运行
+
+        if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
+          //2.探头左移play('left')
+          if (tanTouRunState == 'middle') {
+            tanTouRunState = 'left-m';
+            play('left');
           }
-        } else if (selectData['poleMiddle'] == 1) {
-          if (deviceRunState == 'center-m') {
-            play('center', true);
-            deviceRunState = 'center';
-            tanTouRunState = 'right';
-            play('right', true);
+          //3. 探头右移play('right')
+          if (tanTouRunState == 'left') {
+            tanTouRunState = 'right-m';
+            play('right');
           }
-          if (!deviceRunState) {
-            deviceRunState = 'center';
-            play('center', true);
+        }
+        if (selectData.sensorLeft == 1) {
+          tanTouRunState = 'left';
+          if (!tanTouRunState || tanTouRunState == 'left-m') {
+            play('left', true);
           }
-          if (!tanTouRunState) {
+        }
+        if (selectData.sensorRight == 1) {
+          tanTouRunState = 'right';
+          if (!tanTouRunState || tanTouRunState == 'right-m') {
             play('right', true);
           }
+        }
+      } else if (selectData['poleMiddle'] == 1) {
+        if (deviceRunState == 'center-m') {
+          play('center', true);
+          deviceRunState = 'center';
+          tanTouRunState = 'right';
+          play('right', true);
+        }
+        if (!deviceRunState) {
+          deviceRunState = 'center';
+          play('center', true);
+        }
+        if (!tanTouRunState) {
+          play('right', true);
+        }
 
-          // 横杆在中位
-          if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
-            //5. 探头移到中间play('middle')
-            if (tanTouRunState == 'right') {
-              tanTouRunState = 'middle-m';
-              play('middle');
-            }
-            //6. 探头移到左边play('left')
-            if (tanTouRunState == 'middle') {
-              tanTouRunState = 'left-m';
-              play('left');
-            }
+        // 横杆在中位
+        if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
+          //5. 探头移到中间play('middle')
+          if (tanTouRunState == 'right') {
+            tanTouRunState = 'middle-m';
+            play('middle');
           }
-          if (selectData.sensorMiddle == 1) {
-            tanTouRunState = 'middle';
-            if (!tanTouRunState || tanTouRunState == 'middle-m') {
-              play('middle', true);
-            }
+          //6. 探头移到左边play('left')
+          if (tanTouRunState == 'middle') {
+            tanTouRunState = 'left-m';
+            play('left');
           }
-          if (selectData.sensorLeft == 1) {
-            tanTouRunState = 'left';
-            if (!tanTouRunState || tanTouRunState == 'left-m') {
-              play('left', true);
-            }
+        }
+        if (selectData.sensorMiddle == 1) {
+          tanTouRunState = 'middle';
+          if (!tanTouRunState || tanTouRunState == 'middle-m') {
+            play('middle', true);
           }
-        } else if (selectData['poleNether'] == 1) {
-          if (deviceRunState == 'down-m') {
-            play('down', true);
-            deviceRunState = 'down';
-            tanTouRunState = 'left';
+        }
+        if (selectData.sensorLeft == 1) {
+          tanTouRunState = 'left';
+          if (!tanTouRunState || tanTouRunState == 'left-m') {
             play('left', true);
           }
-          if (!deviceRunState) {
-            play('down', true);
-            deviceRunState = 'down';
+        }
+      } else if (selectData['poleNether'] == 1) {
+        if (deviceRunState == 'down-m') {
+          play('down', true);
+          deviceRunState = 'down';
+          tanTouRunState = 'left';
+          play('left', true);
+        }
+        if (!deviceRunState) {
+          play('down', true);
+          deviceRunState = 'down';
+        }
+        if (!tanTouRunState) {
+          play('left', true);
+        }
+        // 横杆在低位
+        if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
+          //8. 探头移到中间play('middle')
+          if (tanTouRunState == 'left') {
+            tanTouRunState = 'left-middle-m';
+            play('middle');
           }
-          if (!tanTouRunState) {
-            play('left', true);
+          //9. 探头右移play('right')
+          if (tanTouRunState == 'middle1') {
+            tanTouRunState = 'right-m';
+            play('right');
           }
-          // 横杆在低位
-          if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
-            //8. 探头移到中间play('middle')
-            if (tanTouRunState == 'left') {
-              tanTouRunState = 'left-middle-m';
-              play('middle');
-            }
-            //9. 探头右移play('right')
-            if (tanTouRunState == 'middle1') {
-              tanTouRunState = 'right-m';
-              play('right');
-            }
-            // 10. 测风结束，探头移到中间play('middle')，横杆向高位移动
-            if (tanTouRunState == 'right') {
-              tanTouRunState = 'right-middle-m';
-              play('middle');
-            }
+          // 10. 测风结束，探头移到中间play('middle')，横杆向高位移动
+          if (tanTouRunState == 'right') {
+            tanTouRunState = 'right-middle-m';
+            play('middle');
           }
+        }
 
-          if (selectData.sensorMiddle == 1) {
-            if (tanTouRunState == 'left-middle-m') tanTouRunState = 'middle1';
-            if (tanTouRunState == 'right-middle-m') tanTouRunState = 'middle2';
+        if (selectData.sensorMiddle == 1) {
+          if (tanTouRunState == 'left-middle-m') tanTouRunState = 'middle1';
+          if (tanTouRunState == 'right-middle-m') tanTouRunState = 'middle2';
 
-            if (!tanTouRunState || tanTouRunState == 'left-middle-m' || tanTouRunState == 'right-middle-m') {
-              play('middle', true);
-            }
+          if (!tanTouRunState || tanTouRunState == 'left-middle-m' || tanTouRunState == 'right-middle-m') {
+            play('middle', true);
           }
+        }
 
-          if (selectData.sensorRight == 1) {
-            tanTouRunState = 'right';
-            if (!tanTouRunState || tanTouRunState == 'right-m') {
-              play('right', true);
-            }
-          }
-        } else {
-          // 横杆正在运行
-          if (deviceRunState == 'up') {
-            deviceRunState = 'center-m';
-            play('center');
-          }
-          if (deviceRunState == 'center') {
-            deviceRunState = 'down-m';
-            play('down');
-          }
-          if (deviceRunState == 'down') {
-            deviceRunState = 'up-m';
-            play('up');
+        if (selectData.sensorRight == 1) {
+          tanTouRunState = 'right';
+          if (!tanTouRunState || tanTouRunState == 'right-m') {
+            play('right', true);
           }
         }
+      } else {
+        // 横杆正在运行
+        if (deviceRunState == 'up') {
+          deviceRunState = 'center-m';
+          play('center');
+        }
+        if (deviceRunState == 'center') {
+          deviceRunState = 'down-m';
+          play('down');
+        }
+        if (deviceRunState == 'down') {
+          deviceRunState = 'up-m';
+          play('up');
+        }
+      }
 
-        // //正在执行时
-
-        // // 判断上中下是否都为0
-        // if(selectData['poleIncipient'] == 0 && selectData['poleMiddle'] == 0 && selectData['poleNether'] == 0) {
-        //   // 判断是否有前一个状态值，有的话执行
-        //   //没有前一个状态
-
-        //   //有前一个状态
-
-        //   // 横杆前状态在上位时，横杆中位移动，探头在右边
+      // //正在执行时
 
-        //   // 横杆前状态在中位时，横杆下位移动，探头在左边
+      // // 判断上中下是否都为0
+      // if(selectData['poleIncipient'] == 0 && selectData['poleMiddle'] == 0 && selectData['poleNether'] == 0) {
+      //   // 判断是否有前一个状态值，有的话执行
+      //   //没有前一个状态
 
-        //   // 横杆前状态在下位时，横杆上位移动，探头在中间
+      //   //有前一个状态
 
-        // }else{
-        //   // 判断当前动画停在固定位置
-        //   if(selectData['poleIncipient'] == 1) {
-        //     // 滑杆停在上面，探头在中间
+      //   // 横杆前状态在上位时，横杆中位移动，探头在右边
 
-        //   }else if (selectData['poleMiddle'] == 1) {
-        //     // 滑杆停在中间面，初始探头在右边
+      //   // 横杆前状态在中位时，横杆下位移动，探头在左边
 
-        //   } else if (selectData['poleNether'] == 1) {
-        //     // 滑杆停在下面，初始探头在左边
+      //   // 横杆前状态在下位时，横杆上位移动，探头在中间
 
-        //   }
-        // }
-      } else {
-        // if(selectData['poleIncipient'] == 1){
-        //   deviceRunState = ''
-        //   tanTouRunState = ''
-        // }
-      }
-    }
+      // }else{
+      //   // 判断当前动画停在固定位置
+      //   if(selectData['poleIncipient'] == 1) {
+      //     // 滑杆停在上面，探头在中间
 
-    if (selectData.deviceType == 'windrect_rect') {
-      if (selectData['apparatusRun'] == 1) {
-        const flag = selectData.sign == '0' ? 'center' : selectData.sign == 1 ? 'down' : selectData.sign == 2 ? 'up' : null;
-        if (flag) play(flag);
-      } else {
-        const flag = selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : selectData.sign == '0' ? 'up' : null;
-        if (flag) play(flag, true);
-      }
-    }
+      //   }else if (selectData['poleMiddle'] == 1) {
+      //     // 滑杆停在中间面，初始探头在右边
 
-    if (selectData.deviceType == 'windrect_ds') {
-      if (selectData['apparatusRun'] == 1 && selectData['sign'] == 2) {
-        if (!deviceRunState) {
-          deviceRunState = 'start';
-          play('down');
-        }
-      } else if (selectData['apparatusRun'] == 0 && selectData['sign'] == 0 && deviceRunState == 'start') {
-        deviceRunState = '';
-        play('up');
-      }
-    }
-  }
+      //   } else if (selectData['poleNether'] == 1) {
+      //     // 滑杆停在下面，初始探头在左边
 
-  // 自测动画方法
-  function testPlay(flag) {
-    if (selectData.deviceType == 'windrect_rect') {
-      setTimeout(() => {
-        play('center');
-      }, 0);
-      setTimeout(() => {
-        play('down');
-      }, 4000);
-      setTimeout(() => {
-        play('up');
-      }, 10000);
-    }
-    if (selectData.deviceType == 'windrect_normal') {
-      setTimeout(() => {
-        play('up');
-      }, 0);
-      setTimeout(() => {
-        play('center');
-      }, 10000);
-      setTimeout(() => {
-        play('down');
-      }, 18000);
-      setTimeout(() => {
-        play('up');
-      }, 21000);
-    }
-    if (selectData.deviceType == 'windrect_ds') {
-      play('moni');
+      //   }
+      // }
+    } else {
+      // if(selectData['poleIncipient'] == 1){
+      //   deviceRunState = ''
+      //   tanTouRunState = ''
+      // }
     }
   }
 
-  function clearPlay() {
-    modalType.value = 'autoClear';
-    modalIsShow.value = true;
-    if (globalConfig?.simulatedPassword) {
-      controlDevice('', modalType.value);
+  if (selectData.deviceType == 'windrect_rect') {
+    if (selectData['apparatusRun'] == 1) {
+      const flag = selectData.sign == '0' ? 'center' : selectData.sign == 1 ? 'down' : selectData.sign == 2 ? 'up' : null;
+      if (flag) play(flag);
+    } else {
+      const flag = selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : selectData.sign == '0' ? 'up' : null;
+      if (flag) play(flag, true);
     }
   }
 
-  function startRun() {
-    modalType.value = 'sing';
-    modalIsShow.value = true;
-    if (globalConfig?.simulatedPassword) {
-      controlDevice('', modalType.value);
-    }
-  }
-  // 切换检测数据
-  async function getSelectRow(selectRow, index) {
-    if (selectRow) {
-      loading.value = true;
-      selectRowIndex.value = index;
-      Object.assign(selectData, selectRow);
-      let type = '';
-      if (selectRow['modelType']) {
-        type = selectRow['modelType'];
-      } else {
-        if (selectRow.deviceType.startsWith('windrect_rect')) {
-          type = 'lmWindRect';
-        }
-        if (selectRow.deviceType.startsWith('windrect_normal')) {
-          type = 'zdWindRect';
-        }
-        if (selectRow.deviceType.startsWith('windrect_rect_single')) {
-          type = 'lmWindSide';
-        }
-        if (selectRow.deviceType.startsWith('windrect_ds')) {
-          type = 'dsWindRect_move';
-          // type = 'duisheFixed';
-        }
-        if (selectRow.deviceType.startsWith('windrect_ds_four')) {
-          //windrect_ds_two
-          type = 'dsWindRect_four';
-        }
-        if (selectRow.deviceType.startsWith('windrect_ds_two')) {
-          type = 'dsWindRect_two';
-        }
-        if (selectRow.deviceType.startsWith('windrect_ds_sut') || selectRow.deviceType.startsWith('windrect_muti')) {
-          type = 'duisheFixed';
-        }
-        if (
-          selectRow.deviceType.startsWith('windrect_dd') ||
-          selectRow.deviceType == 'windrect_safety' ||
-          selectRow.deviceType == 'windrect_sensor'
-        ) {
-          type = 'ddWindSide';
-        }
+  if (selectData.deviceType == 'windrect_ds') {
+    if (selectData['apparatusRun'] == 1 && selectData['sign'] == 2) {
+      if (!deviceRunState) {
+        deviceRunState = 'start';
+        play('down');
       }
-
-      // const type = selectRowIndex.value >= 1 ? 'lmWindRect' : selectRowIndex.value <= 3 ? 'zdWindRect' : 'dsWindRect';
-      await setModelType(type);
-      loading.value = false;
+    } else if (selectData['apparatusRun'] == 0 && selectData['sign'] == 0 && deviceRunState == 'start') {
       deviceRunState = '';
-      tanTouRunState = '';
-      await getCamera(selectRow.deviceID, playerRef.value);
+      play('up');
     }
   }
-
-  /* 一键测风 */
-  function handleOk() {
-    modalType.value = 'multiple';
-    modalIsShow.value = true;
-    if (globalConfig?.simulatedPassword) {
-      controlDevice('', modalType.value);
-    }
+}
+
+// 自测动画方法
+function testPlay(flag) {
+  if (selectData.deviceType == 'windrect_rect') {
+    setTimeout(() => {
+      play('center');
+    }, 0);
+    setTimeout(() => {
+      play('down');
+    }, 4000);
+    setTimeout(() => {
+      play('up');
+    }, 10000);
   }
-
-  /* 打开一键测风弹窗 */
-  function openModel() {
-    setModalProps({ visible: true });
+  if (selectData.deviceType == 'windrect_normal') {
+    setTimeout(() => {
+      play('up');
+    }, 0);
+    setTimeout(() => {
+      play('center');
+    }, 10000);
+    setTimeout(() => {
+      play('down');
+    }, 18000);
+    setTimeout(() => {
+      play('up');
+    }, 21000);
   }
-
-  function resetHandle() {
-    modalType.value = 'resetWind';
-    modalIsShow.value = true;
+  if (selectData.deviceType == 'windrect_ds') {
+    play('moni');
   }
+}
 
-  function exportExcel(id) {
-    exportXls({ testid: id });
+function clearPlay() {
+  modalType.value = 'autoClear';
+  modalIsShow.value = true;
+  if (globalConfig?.simulatedPassword) {
+    controlDevice('', modalType.value);
   }
+}
 
-  /* 关闭一键测风弹窗 */
-  function handleCancel() {
-    setModalProps({ visible: false });
-    modalTable.value.clearSelectedRowKeys();
+function startRun() {
+  modalType.value = 'sing';
+  modalIsShow.value = true;
+  if (globalConfig?.simulatedPassword) {
+    controlDevice('', modalType.value);
   }
+}
+// 切换检测数据
+async function getSelectRow(selectRow, index) {
+  if (selectRow) {
+    loading.value = true;
+    selectRowIndex.value = index;
+    Object.assign(selectData, selectRow);
+    let type = '';
+    if (selectRow['modelType']) {
+      type = selectRow['modelType'];
+    } else {
+      if (selectRow.deviceType.startsWith('windrect_rect')) {
+        type = 'lmWindRect';
+      }
+      if (selectRow.deviceType.startsWith('windrect_normal')) {
+        type = 'zdWindRect';
+      }
+      if (selectRow.deviceType.startsWith('windrect_rect_single')) {
+        type = 'lmWindSide';
+      }
+      if (selectRow.deviceType.startsWith('windrect_ds')) {
+        type = 'dsWindRect_move';
+        // type = 'duisheFixed';
+      }
+      if (selectRow.deviceType.startsWith('windrect_ds_four')) {
+        //windrect_ds_two
+        type = 'dsWindRect_four';
+      }
+      if (selectRow.deviceType.startsWith('windrect_ds_two')) {
+        type = 'dsWindRect_two';
+      }
+      if (selectRow.deviceType.startsWith('windrect_ds_sut') || selectRow.deviceType.startsWith('windrect_muti')) {
+        type = 'duisheFixed';
+      }
+      if (selectRow.deviceType.startsWith('windrect_dd') || selectRow.deviceType == 'windrect_safety' || selectRow.deviceType == 'windrect_sensor') {
+        type = 'ddWindSide';
+      }
+    }
 
-  /* 关闭一键测风控制*/
-  function handleCancelControl() {
-    modalIsShow.value = false;
+    // const type = selectRowIndex.value >= 1 ? 'lmWindRect' : selectRowIndex.value <= 3 ? 'zdWindRect' : 'dsWindRect';
+    await setModelType(type);
+    loading.value = false;
+    deviceRunState = '';
+    tanTouRunState = '';
+    await getCamera(selectRow.deviceID, playerRef.value);
   }
-
-  function controlDevice(passWord, type) {
-    try {
-      if (type == 'sing') {
-        testWind({
-          ids: [selectData.deviceID],
-          maxnum: 1000,
-          windnum: 1,
-          password: passWord || globalConfig?.simulatedPassword,
-        }).then((res) => {
-          if (res && res.success === false) {
-            message.error(res.message);
+}
+
+/* 一键测风 */
+function handleOk() {
+  modalType.value = 'multiple';
+  modalIsShow.value = true;
+  if (globalConfig?.simulatedPassword) {
+    controlDevice('', modalType.value);
+  }
+}
+
+/* 打开一键测风弹窗 */
+function openModel() {
+  setModalProps({ visible: true });
+}
+
+function resetHandle() {
+  modalType.value = 'resetWind';
+  modalIsShow.value = true;
+}
+
+function exportExcel(id) {
+  exportXls({ testid: id });
+}
+
+/* 关闭一键测风弹窗 */
+function handleCancel() {
+  setModalProps({ visible: false });
+  modalTable.value.clearSelectedRowKeys();
+}
+
+/* 关闭一键测风控制*/
+function handleCancelControl() {
+  modalIsShow.value = false;
+}
+
+function controlDevice(passWord, type) {
+  try {
+    if (type == 'sing') {
+      testWind({
+        ids: [selectData.deviceID],
+        maxnum: 1000,
+        windnum: 1,
+        password: passWord || globalConfig?.simulatedPassword,
+      }).then((res) => {
+        if (res && res.success === false) {
+          message.error(res.message);
+        } else {
+          if (globalConfig.History_Type == 'remote') {
+            message.success('指令已下发至生产管控平台成功！');
           } else {
-            if (globalConfig.History_Type == 'remote') {
-              message.success('指令已下发至生产管控平台成功！');
-            } else {
-              message.success('指令已下发成功！');
-            }
+            message.success('指令已下发成功！');
           }
-          modalIsShow.value = false;
-        });
-      } else if (type == 'multiple') {
-        const ids = toRaw(modalTable.value.selectedRowKeys);
-        testWind({
-          ids: ids,
-          maxnum: 1000,
-          windnum: modalTable.value.selectedRowKeys.length,
-          password: passWord || globalConfig?.simulatedPassword,
-        }).then((res) => {
-          if (res && res.success === false) {
-            message.error(res.message);
+        }
+        modalIsShow.value = false;
+      });
+    } else if (type == 'multiple') {
+      const ids = toRaw(modalTable.value.selectedRowKeys);
+      testWind({
+        ids: ids,
+        maxnum: 1000,
+        windnum: modalTable.value.selectedRowKeys.length,
+        password: passWord || globalConfig?.simulatedPassword,
+      }).then((res) => {
+        if (res && res.success === false) {
+          message.error(res.message);
+        } else {
+          if (globalConfig.History_Type == 'remote') {
+            message.success('指令已下发至生产管控平台成功！');
           } else {
-            if (globalConfig.History_Type == 'remote') {
-              message.success('指令已下发至生产管控平台成功！');
-            } else {
-              message.success('指令已下发成功！');
-            }
+            message.success('指令已下发成功！');
           }
-          modalIsShow.value = false;
-          setModalProps({ visible: false });
-          modalTable.value.clearSelectedRowKeys();
-        });
-      } else if (type == 'autoClear') {
-        const data = {
-          deviceid: selectData.deviceID,
-          devicetype: selectData.deviceType,
-          paramcode: 'autoClear',
-          value: null,
-          password: passWord || globalConfig?.simulatedPassword,
-          masterComputer: selectData.masterComputer,
-        };
-        deviceControlApi(data).then((res) => {
-          // 模拟时开启
-          if (res.success) {
-            if (globalConfig.History_Type == 'remote') {
-              message.success('指令已下发至生产管控平台成功！');
-            } else {
-              message.success('指令已下发成功！');
-            }
+        }
+        modalIsShow.value = false;
+        setModalProps({ visible: false });
+        modalTable.value.clearSelectedRowKeys();
+      });
+    } else if (type == 'autoClear') {
+      const data = {
+        deviceid: selectData.deviceID,
+        devicetype: selectData.deviceType,
+        paramcode: 'autoClear',
+        value: null,
+        password: passWord || globalConfig?.simulatedPassword,
+        masterComputer: selectData.masterComputer,
+      };
+      deviceControlApi(data).then((res) => {
+        // 模拟时开启
+        if (res.success) {
+          if (globalConfig.History_Type == 'remote') {
+            message.success('指令已下发至生产管控平台成功！');
           } else {
-            message.error(res.message);
+            message.success('指令已下发成功！');
           }
-          modalIsShow.value = false;
-        });
-      } else if (type == 'resetWind') {
-        resetWind({}).then((res: any) => {
-          message.info(res);
-        });
+        } else {
+          message.error(res.message);
+        }
         modalIsShow.value = false;
-      }
-    } catch (error) {
-      message.error('测风失败，请联系管理员。。。');
+      });
+    } else if (type == 'resetWind') {
+      resetWind({}).then((res: any) => {
+        message.info(res);
+      });
       modalIsShow.value = false;
     }
+  } catch (error) {
+    message.error('测风失败，请联系管理员。。。');
+    modalIsShow.value = false;
   }
+}
 
-  /** 避灾路线上的测风装置 */
-  async function getPathList() {
-    const pathArr = await pathList({});
-    criticalPathList.value = pathArr.records.filter((item) => {
-      return item.strsystype == 3;
-    });
-  }
-
-  /* 根据路线选择测风装置 */
-  function selectCriticalPath(pathId) {
-    deviceList({ deviceType: 'wind', sysId: pathId }).then((res) => {
-      const ids: string[] = [];
-      res.records.forEach((item) => {
-        ids.push(item.id);
-      });
-      if (modalTable.value) modalTable.value.setSelectedRowKeys(ids);
-    });
-  }
-
-  function deviceEdit(e: Event, type: string, record) {
-    e.stopPropagation();
-    openModal(true, {
-      type,
-      deviceId: record['deviceID'],
-    });
-  }
-
-  onBeforeMount(() => {
-    getPathList();
+/** 避灾路线上的测风装置 */
+async function getPathList() {
+  const pathArr = await pathList({});
+  criticalPathList.value = pathArr.records.filter((item) => {
+    return item.strsystype == 3;
   });
-
-  onMounted(async () => {
-    // const playerDom = document.getElementById('cf-player1')?.getElementsByClassName('vjs-tech')[0];
-    // loading.value = true;
-    // mountedThree(playerDom).then(async () => {
-    //   getMonitor(true);
-    //   // loading.value = false;
-    // });
-    const { query } = unref(currentRoute);
-    if (query['deviceType']) deviceType.value = query['deviceType'] as string;
-    loading.value = true;
-    mountedThree(null).then(async () => {
-      await getMonitor(true);
-      loading.value = false;
+}
+
+/* 根据路线选择测风装置 */
+function selectCriticalPath(pathId) {
+  deviceList({ deviceType: 'wind', sysId: pathId }).then((res) => {
+    const ids: string[] = [];
+    res.records.forEach((item) => {
+      ids.push(item.id);
     });
+    if (modalTable.value) modalTable.value.setSelectedRowKeys(ids);
   });
+}
 
-  onUnmounted(() => {
-    removeCamera();
-    if (timer) {
-      clearTimeout(timer);
-      timer = undefined;
-    }
-    destroy();
+function deviceEdit(e: Event, type: string, record) {
+  e.stopPropagation();
+  openModal(true, {
+    type,
+    deviceId: record['deviceID'],
   });
-</script>
-<style scoped lang="less">
-  @import '/@/design/theme.less';
-  @import '/@/design/vent/modal.less';
-  @ventSpace: zxm;
+}
+
+onBeforeMount(() => {
+  getPathList();
+});
+
+onMounted(async () => {
+  // const playerDom = document.getElementById('cf-player1')?.getElementsByClassName('vjs-tech')[0];
+  // loading.value = true;
+  // mountedThree(playerDom).then(async () => {
+  //   getMonitor(true);
+  //   // loading.value = false;
+  // });
+  const { query } = unref(currentRoute);
+  if (query['deviceType']) deviceType.value = query['deviceType'] as string;
+  loading.value = true;
+  mountedThree(null).then(async () => {
+    await getMonitor(true);
+    loading.value = false;
+  });
+});
 
-  :deep(.@{ventSpace}-tabs-tabpane-active) {
-    height: 100%;
+onUnmounted(() => {
+  removeCamera();
+  if (timer) {
+    clearTimeout(timer);
+    timer = undefined;
   }
-  .scene-box {
-    .bottom-tabs-box {
-      height: 350px;
-    }
+  destroy();
+});
+</script>
+<style scoped lang="less">
+@import '/@/design/theme.less';
+@import '/@/design/vent/modal.less';
+@ventSpace: zxm;
+
+:deep(.@{ventSpace}-tabs-tabpane-active) {
+  height: 100%;
+}
+.scene-box {
+  .bottom-tabs-box {
+    height: 350px;
   }
-  .head-line {
+}
+.head-line {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  .button-box {
+    position: relative;
+    padding: 5px;
+    border: 1px transparent solid;
+    border-radius: 5px;
+    margin-left: 8px;
+    margin-right: 8px;
+    width: auto;
+    height: 34px;
+    border: 1px solid var(--vent-base-border);
     display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    .button-box {
-      position: relative;
-      padding: 5px;
-      border: 1px transparent solid;
-      border-radius: 5px;
-      margin-left: 8px;
-      margin-right: 8px;
-      width: auto;
-      height: 34px;
-      border: 1px solid var(--vent-base-border);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--vent-font-color);
-      padding: 0 15px;
-      cursor: pointer;
-      pointer-events: auto;
-      &:hover {
-        background: var(--vent-device-manager-control-btn-hover);
-      }
-      &::before {
-        width: calc(100% - 6px);
-        height: 26px;
-        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);
-      }
+    align-items: center;
+    justify-content: center;
+    color: var(--vent-font-color);
+    padding: 0 15px;
+    cursor: pointer;
+    pointer-events: auto;
+    &:hover {
+      background: var(--vent-device-manager-control-btn-hover);
+    }
+    &::before {
+      width: calc(100% - 6px);
+      height: 26px;
+      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);
     }
   }
-  :deep(.@{ventSpace}-picker-datetime-panel) {
-    height: 200px !important;
-    overflow-y: auto !important;
-  }
+}
+:deep(.@{ventSpace}-picker-datetime-panel) {
+  height: 200px !important;
+  overflow-y: auto !important;
+}
 </style>