[Mod 000000] 解决测风监测模型上监测数据不显示问题

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

@@ -73,6 +73,7 @@ export function getMonitorComponent() {
     case 'sdmtjtcctmk': //榆家梁
     case 'sdmtjtswmk': //上湾
     case 'zmhjhzmy': // 韩咀
+    case 'dttzjymy': //东泰金源
       FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal.sw.vue'));
       break;
     case 'sdmtjtwlmlmk': //乌兰木伦
@@ -552,7 +553,7 @@ export const noWarningArr = [
   'bundleSpyDayReport',
   'gate_linkdlfm',
   'substation_normal',
-  'safetymonitor'
+  'safetymonitor',
 ]; // 无预警详情的
 export const haveSysDetailArr = ['forcFan', 'pulping']; //有场景详情的
 

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

@@ -151,776 +151,775 @@
 </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 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, getRegulation } 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';
-import { useGlobSetting } from '/@/hooks/setting';
-const { hasPermission } = usePermission();
-
-const globalConfig = inject('globalConfig');
-
-const { sysOrgCode } = useGlobSetting();
-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.regulation) {
-//                 getRegulationList(data.regulation);
-//               }
-//             });
-//             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
-//     );
-//   }
-// }
-// function getRegulationList(data) {
-//   getRegulation().then((res) => {
-//     if (res) {
-//       const regulation = res.find((item) => item.id == data);
-//       data.regulation = regulation;
-//       data.fmin = data.regulation.fmin;
-//       data.fmax = data.regulation.fmax;
-//     }
-//   });
-// }
-function getMonitor(flag?: boolean) {
-  if (timer === null) {
-    timer = setTimeout(
-      async () => {
-        try {
-          const res = await list({ devicetype: deviceType.value, pagetype: 'normal' });
-          if (res && res.msgTxt[0]) {
-            const rawData = res.msgTxt[0].datalist || [];
-            const processedData = [...rawData];
-
-            // 并行获取所有regulation数据
-            const regulationPromises = processedData.filter((data) => data.regulation).map((data) => getRegulationList(data.regulation, data));
-
-            await Promise.all(regulationPromises);
-
-            // 确保所有异步操作完成后再更新数据源
-            dataSource.value = processedData;
-
-            // 处理readData和初始选择
-            if (dataSource.value.length > 0) {
-              await processReadData(processedData);
-              await handleInitialSelection();
+  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, getRegulation } 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';
+  import { useGlobSetting } from '/@/hooks/setting';
+  const { hasPermission } = usePermission();
+
+  const globalConfig = inject('globalConfig');
+
+  const { sysOrgCode } = useGlobSetting();
+  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.regulation) {
+  //                 getRegulationList(data.regulation);
+  //               }
+  //             });
+  //             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
+  //     );
+  //   }
+  // }
+  // function getRegulationList(data) {
+  //   getRegulation().then((res) => {
+  //     if (res) {
+  //       const regulation = res.find((item) => item.id == data);
+  //       data.regulation = regulation;
+  //       data.fmin = data.regulation.fmin;
+  //       data.fmax = data.regulation.fmax;
+  //     }
+  //   });
+  // }
+  function getMonitor(flag?: boolean) {
+    if (timer === null) {
+      timer = setTimeout(
+        async () => {
+          try {
+            const res = await list({ devicetype: deviceType.value, pagetype: 'normal' });
+            if (res && res.msgTxt[0]) {
+              const rawData = res.msgTxt[0].datalist || [];
+              const processedData = [...rawData];
+
+              // 并行获取所有regulation数据
+              const regulationPromises = processedData.filter((data) => data.regulation).map((data) => getRegulationList(data.regulation, data));
+
+              await Promise.all(regulationPromises);
+
+              // 确保所有异步操作完成后再更新数据源
+              dataSource.value = processedData;
+
+              // 处理readData和初始选择
+              if (dataSource.value.length > 0) {
+                await processReadData(processedData);
+                await handleInitialSelection();
+              }
             }
+          } catch (error) {
+            console.error('Erro', error);
+          } finally {
+            timer = null;
+            getMonitor(flag);
           }
-        } catch (error) {
-          console.error('Erro', error);
-        } finally {
-          timer = null;
-          getMonitor(flag);
-        }
-      },
-      flag ? 0 : 1000
-    );
-  }
-}
-
-async function getRegulationList(regulationId: string, data: any) {
-  const res = await getRegulation();
-  if (res) {
-    const regulation = res.find((item) => item.id === regulationId);
-    if (regulation) {
-      data.regulation = regulation;
-      data.fmin = regulation.fmin;
-      data.fmax = regulation.fmax;
+        },
+        flag ? 0 : 1000
+      );
     }
   }
-}
 
-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);
-}
-
-async function handleInitialSelection() {
-  if (selectRowIndex.value === -1 && dataSource.value.length > 0) {
-    const deviceId = currentRoute.value?.query?.['id'] || dataSource.value[0]['deviceID'];
-    selectRowIndex.value = dataSource.value.findIndex((item) => item.deviceID === deviceId);
-
-    const selectedData = toRaw(dataSource.value[selectRowIndex.value]);
-    Object.assign(selectData, selectedData);
-    addMonitorText(selectData);
-    palyAnimation(selectedData);
+  async function getRegulationList(regulationId: string, data: any) {
+    const res = await getRegulation();
+    if (res) {
+      const regulation = res.find((item) => item.id === regulationId);
+      if (regulation) {
+        data.regulation = regulation;
+        data.fmin = regulation.fmin;
+        data.fmax = regulation.fmax;
+      }
+    }
+  }
 
-    MonitorDataTable.value.setSelectedRowKeys([deviceId]);
+  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);
   }
-}
-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);
+
+  async function handleInitialSelection() {
+    if (dataSource.value.length > 0) {
+      const selectedData = toRaw(dataSource.value[selectRowIndex.value]);
+      Object.assign(selectData, selectedData);
+      addMonitorText(selectData);
+      palyAnimation(selectedData);
     }
   }
-  // 运行中是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');
-        }
-        // 初始已经在运行
+  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');
+          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');
+            }
           }
-          //3. 探头右移play('right')
-          if (tanTouRunState == 'left') {
-            tanTouRunState = 'right-m';
-            play('right');
+          if (selectData.sensorLeft == 1) {
+            tanTouRunState = 'left';
+            if (!tanTouRunState || tanTouRunState == 'left-m') {
+              play('left', true);
+            }
           }
-        }
-        if (selectData.sensorLeft == 1) {
-          tanTouRunState = 'left';
-          if (!tanTouRunState || tanTouRunState == 'left-m') {
-            play('left', true);
+          if (selectData.sensorRight == 1) {
+            tanTouRunState = 'right';
+            if (!tanTouRunState || tanTouRunState == 'right-m') {
+              play('right', true);
+            }
           }
-        }
-        if (selectData.sensorRight == 1) {
-          tanTouRunState = 'right';
-          if (!tanTouRunState || tanTouRunState == 'right-m') {
+        } 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);
           }
-        }
-      } 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');
+          // 横杆在中位
+          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');
+            }
           }
-          //6. 探头移到左边play('left')
-          if (tanTouRunState == 'middle') {
-            tanTouRunState = 'left-m';
-            play('left');
+          if (selectData.sensorMiddle == 1) {
+            tanTouRunState = 'middle';
+            if (!tanTouRunState || tanTouRunState == 'middle-m') {
+              play('middle', true);
+            }
           }
-        }
-        if (selectData.sensorMiddle == 1) {
-          tanTouRunState = 'middle';
-          if (!tanTouRunState || tanTouRunState == 'middle-m') {
-            play('middle', true);
+          if (selectData.sensorLeft == 1) {
+            tanTouRunState = 'left';
+            if (!tanTouRunState || tanTouRunState == 'left-m') {
+              play('left', true);
+            }
           }
-        }
-        if (selectData.sensorLeft == 1) {
-          tanTouRunState = 'left';
-          if (!tanTouRunState || tanTouRunState == 'left-m') {
+        } else if (selectData['poleNether'] == 1) {
+          if (deviceRunState == 'down-m') {
+            play('down', true);
+            deviceRunState = 'down';
+            tanTouRunState = 'left';
             play('left', true);
           }
-        }
-      } 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 (!deviceRunState) {
+            play('down', true);
+            deviceRunState = 'down';
           }
-          //9. 探头右移play('right')
-          if (tanTouRunState == 'middle1') {
-            tanTouRunState = 'right-m';
-            play('right');
+          if (!tanTouRunState) {
+            play('left', true);
           }
-          // 10. 测风结束，探头移到中间play('middle')，横杆向高位移动
-          if (tanTouRunState == 'right') {
-            tanTouRunState = 'right-middle-m';
-            play('middle');
+          // 横杆在低位
+          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');
+            }
           }
-        }
 
-        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);
+          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');
           }
         }
-      } 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['poleIncipient'] == 1) {
+        //     // 滑杆停在上面，探头在中间
 
-      //   }else if (selectData['poleMiddle'] == 1) {
-      //     // 滑杆停在中间面，初始探头在右边
+        //   }else if (selectData['poleMiddle'] == 1) {
+        //     // 滑杆停在中间面，初始探头在右边
 
-      //   } else if (selectData['poleNether'] == 1) {
-      //     // 滑杆停在下面，初始探头在左边
+        //   } else if (selectData['poleNether'] == 1) {
+        //     // 滑杆停在下面，初始探头在左边
 
-      //   }
-      // }
-    } else {
-      // if(selectData['poleIncipient'] == 1){
-      //   deviceRunState = ''
-      //   tanTouRunState = ''
-      // }
+        //   }
+        // }
+      } else {
+        // if(selectData['poleIncipient'] == 1){
+        //   deviceRunState = ''
+        //   tanTouRunState = ''
+        // }
+      }
     }
-  }
 
-  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);
+    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);
+      }
+    }
+
+    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');
+      }
     }
   }
 
-  if (selectData.deviceType == 'windrect_ds') {
-    if (selectData['apparatusRun'] == 1 && selectData['sign'] == 2) {
-      if (!deviceRunState) {
-        deviceRunState = 'start';
+  // 自测动画方法
+  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');
+    }
+  }
+
+  function clearPlay() {
+    modalType.value = 'autoClear';
+    modalIsShow.value = true;
+    if (globalConfig?.simulatedPassword) {
+      controlDevice('', modalType.value);
+    }
+  }
+
+  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'];
+        // debugger;
+      } 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';
+        }
       }
-    } else if (selectData['apparatusRun'] == 0 && selectData['sign'] == 0 && deviceRunState == 'start') {
+
+      // const type = selectRowIndex.value >= 1 ? 'lmWindRect' : selectRowIndex.value <= 3 ? 'zdWindRect' : 'dsWindRect';
+      await setModelType(type);
+      loading.value = false;
       deviceRunState = '';
-      play('up');
+      tanTouRunState = '';
+      await getCamera(selectRow.deviceID, playerRef.value);
     }
   }
-}
-
-// 自测动画方法
-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);
+
+  /* 一键测风 */
+  function handleOk() {
+    modalType.value = 'multiple';
+    modalIsShow.value = true;
+    if (globalConfig?.simulatedPassword) {
+      controlDevice('', modalType.value);
+    }
   }
-  if (selectData.deviceType == 'windrect_ds') {
-    play('moni');
+
+  /* 打开一键测风弹窗 */
+  function openModel() {
+    setModalProps({ visible: true });
   }
-}
 
-function clearPlay() {
-  modalType.value = 'autoClear';
-  modalIsShow.value = true;
-  if (globalConfig?.simulatedPassword) {
-    controlDevice('', modalType.value);
+  function resetHandle() {
+    modalType.value = 'resetWind';
+    modalIsShow.value = true;
   }
-}
 
-function startRun() {
-  modalType.value = 'sing';
-  modalIsShow.value = true;
-  if (globalConfig?.simulatedPassword) {
-    controlDevice('', modalType.value);
+  function exportExcel(id) {
+    exportXls({ testid: id });
   }
-}
-// 切换检测数据
-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'];
-      // debugger;
-    } 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';
-      }
-    }
 
-    // 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 handleCancel() {
+    setModalProps({ visible: false });
+    modalTable.value.clearSelectedRowKeys();
   }
-}
-
-/* 一键测风 */
-function handleOk() {
-  modalType.value = 'multiple';
-  modalIsShow.value = true;
-  if (globalConfig?.simulatedPassword) {
-    controlDevice('', modalType.value);
+
+  /* 关闭一键测风控制*/
+  function handleCancelControl() {
+    modalIsShow.value = false;
   }
-}
-
-/* 打开一键测风弹窗 */
-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('指令已下发至生产管控平台成功！');
+
+  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 {
-            message.success('指令已下发成功！');
+            if (globalConfig.History_Type == 'remote') {
+              message.success('指令已下发至生产管控平台成功！');
+            } else {
+              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);
-        } else {
-          if (globalConfig.History_Type == 'remote') {
-            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);
           } else {
-            message.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('指令已下发至生产管控平台成功！');
+          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('指令已下发成功！');
+            }
           } else {
-            message.success('指令已下发成功！');
+            message.error(res.message);
           }
-        } else {
-          message.error(res.message);
-        }
+          modalIsShow.value = false;
+        });
+      } else if (type == 'resetWind') {
+        resetWind({}).then((res: any) => {
+          message.info(res);
+        });
         modalIsShow.value = false;
-      });
-    } else if (type == 'resetWind') {
-      resetWind({}).then((res: any) => {
-        message.info(res);
-      });
+      }
+    } catch (error) {
+      message.error('测风失败，请联系管理员。。。');
       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);
+  /** 避灾路线上的测风装置 */
+  async function getPathList() {
+    const pathArr = await pathList({});
+    criticalPathList.value = pathArr.records.filter((item) => {
+      return item.strsystype == 3;
     });
-    if (modalTable.value) modalTable.value.setSelectedRowKeys(ids);
-  });
-}
+  }
 
-function deviceEdit(e: Event, type: string, record) {
-  e.stopPropagation();
-  openModal(true, {
-    type,
-    deviceId: record['deviceID'],
+  /* 根据路线选择测风装置 */
+  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();
   });
-}
-
-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;
+
+  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;
+    });
   });
-});
 
-onUnmounted(() => {
-  removeCamera();
-  if (timer) {
-    clearTimeout(timer);
-    timer = undefined;
-  }
-  destroy();
-});
+  onUnmounted(() => {
+    removeCamera();
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+    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;
+  @import '/@/design/theme.less';
+  @import '/@/design/vent/modal.less';
+  @ventSpace: zxm;
+
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    height: 100%;
   }
-}
-.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;
-    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);
+  .scene-box {
+    .bottom-tabs-box {
+      height: 350px;
     }
-    &::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);
+  }
+  .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;
+      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>