摄像头修改

src/App.vue

@@ -2,7 +2,7 @@
   <AdaptiveContainer :options="{ width: width, height: height }" style="overflow-y: hidden">
     <ConfigProvider :locale="getAntdLocale" prefixCls="zxm">
       <AppProvider>
-        <RouterView v-if="!isReload"/>
+        <RouterView v-if="!isReload" />
       </AppProvider>
     </ConfigProvider>
   </AdaptiveContainer>
@@ -32,36 +32,39 @@
   }
 
   const reloadRouter = () => {
-    isReload.value = true
+    isReload.value = true;
     nextTick(() => {
-      isReload.value = false
-    })
-  }
+      isReload.value = false;
+    });
+  };
 
-  watch([()=> appStore.getWidthScale, () => appStore.getHeightScale], () => {
-    const popoverDomList = document.getElementsByClassName('zxm-popover')
+  watch([() => appStore.getWidthScale, () => appStore.getHeightScale], () => {
+    const popoverDomList = document.getElementsByClassName('zxm-popover');
     Array.prototype.map.call(popoverDomList, dom => {
-      console.log('弹窗节点------>',dom,);  
-      
-    })
-  })
+      console.log('弹窗节点------>',dom);
+    });
+  });
 
   useTitle();
 
-  provide('reloadRouter', reloadRouter)
+  provide('reloadRouter', reloadRouter);
   onUnmounted(() => {
-    window['renderer']?.dispose()
-    window['renderer']?.forceContextLoss()
-    if(window['renderer'])window['renderer'].content = null
-    const gl = window['renderer']?.domElement.getContext('webgl')
-    gl && gl.getExtension('WEBGL_lose_context').loseContext()
-  })
+    window['renderer']?.dispose();
+    window['renderer']?.forceContextLoss();
+    if (window['renderer']) {
+      window['renderer'].content = null;
+    }
+    const gl = window['renderer']?.domElement.getContext('webgl');
+    gl && gl.getExtension('WEBGL_lose_context').loseContext();
+  });
 </script>
 
 <style lang="less">
-// update-begin--author:liaozhiyang---date:20230803---for：【QQYUN-5839】windi会影响到html2canvas绘制的图片样式
-img{display:inline-block;}
-// update-end--author:liaozhiyang---date:20230803---for：【QQYUN-5839】windi会影响到html2canvas绘制的图片样式
+  // update-begin--author:liaozhiyang---date:20230803---for：【QQYUN-5839】windi会影响到html2canvas绘制的图片样式
+  img {
+    display: inline-block;
+  }
+  // update-end--author:liaozhiyang---date:20230803---for：【QQYUN-5839】windi会影响到html2canvas绘制的图片样式
 </style>
 <style lang="less" scoped>
   #app {

src/api/common/api.ts

@@ -19,7 +19,8 @@ enum Api {
 /**
  * 上传父路径
  */
-export const uploadUrl = `${baseUploadUrl}/sys/common/upload`;
+// export const uploadUrl = `${baseUploadUrl}/sys/common/upload`;
+export const uploadUrl = `${baseUploadUrl}/sys/common/upload2`;
 
 /**
  * 职务列表
@@ -112,8 +113,8 @@ export const downloadFile = (url, fileName?, parameter?) => {
     if (typeof window.navigator.msSaveBlob !== 'undefined') {
       window.navigator.msSaveBlob(new Blob([data]), fileName);
     } else {
-      let url = window.URL.createObjectURL(new Blob([data]));
-      let link = document.createElement('a');
+      const url = window.URL.createObjectURL(new Blob([data]));
+      const link = document.createElement('a');
       link.style.display = 'none';
       link.href = url;
       link.setAttribute('download', fileName);

src/api/sys/user.ts

@@ -20,6 +20,7 @@ enum Api {
   // 2、所有权限
   // 3、系统安全模式
   GetPermCode = '/sys/permissionNew/getPermCode',
+  UserGetPermCode = '/sys/permissionNew/getUserPermissionByToken',
   //新加的获取图形验证码的接口
   getInputCode = '/sys/randomImage',
   //获取短信验证码的接口
@@ -92,10 +93,9 @@ export function getUserInfo() {
         query: {
           // 传入当前的路由，登录成功后跳转到当前路由
           redirect: router.currentRoute.value.fullPath,
-        }
+        },
       });
       // update-end-author:sunjianlei date:20230306 for: 修复登录成功后，没有正确重定向的问题
-
     }
     // update-end--author:zyf---date:20220425---for:【VUEN-76】捕获接口超时异常,跳转到登录界面
   });
@@ -105,6 +105,10 @@ export function getPermCode() {
   return defHttp.get({ url: Api.GetPermCode });
 }
 
+export function getUserPermissionByToken() {
+  return defHttp.get({ url: Api.UserGetPermCode });
+}
+
 export function doLogout() {
   return defHttp.get({ url: Api.Logout });
 }

src/components/Form/src/jeecg/components/JUpload/JUpload.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, computed, watch, nextTick, createApp,unref } from 'vue';
+  import { ref, reactive, computed, watch, nextTick, createApp, unref } from 'vue';
   import { Icon } from '/@/components/Icon';
   import { getToken } from '/@/utils/auth';
   import { uploadUrl } from '/@/api/common/api';
@@ -71,6 +71,7 @@
     replaceLastOne: propTypes.bool.def(false),
   });
 
+  const fileName = ref('');
   const headers = getHeaders();
   const fileList = ref<any[]>([]);
   const uploadGoOn = ref<boolean>(true);
@@ -81,29 +82,28 @@
   // 当前是否是上传图片模式
   const isImageMode = computed(() => props.fileType === UploadTypeEnum.image);
   // 上传按钮是否禁用
-  const buttonDisabled = computed(()=>{
-    if(props.disabled === true){
+  const buttonDisabled = computed(() => {
+    if (props.disabled === true) {
       return true;
     }
-    if(isMaxCount.value === true){
-      if(props.replaceLastOne === true){
-        return false
-      }else{
+    if (isMaxCount.value === true) {
+      if (props.replaceLastOne === true) {
+        return false;
+      } else {
         return true;
       }
     }
-    return false
+    return false;
   });
   // 合并 props 和 attrs
   const bindProps = computed(() => {
     //update-begin-author:liusq date:20220411 for: [issue/455]上传组件传入accept限制上传文件类型无效
     const bind: any = Object.assign({}, props, unref(attrs));
     //update-end-author:liusq date:20220411 for: [issue/455]上传组件传入accept限制上传文件类型无效
-
     bind.name = 'file';
     bind.listType = isImageMode.value ? 'picture-card' : 'text';
     bind.class = [bind.class, { 'upload-disabled': props.disabled }];
-    bind.data = { biz: props.bizPath, ...bind.data };
+    bind.data = { biz: props.bizPath, ...bind.data, filename: fileName.value };
     //update-begin-author:taoyan date:20220407 for: 自定义beforeUpload return false，并不能中断上传过程
     if (!bind.beforeUpload) {
       bind.beforeUpload = onBeforeUpload;
@@ -236,6 +236,7 @@
 
   // 文件上传之前的操作
   function onBeforeUpload(file) {
+    fileName.value = file.name;
     uploadGoOn.value = true;
     if (isImageMode.value) {
       if (file.type.indexOf('image') < 0) {
@@ -295,9 +296,9 @@
           }
           return file;
         });
-      }else{
-        successFileList = fileListTemp.filter(item=>{
-          return item.uid!=info.file.uid;
+      } else {
+        successFileList = fileListTemp.filter((item) => {
+          return item.uid != info.file.uid;
         });
         createMessage.error(`${info.file.name} 上传失败.`);
       }
@@ -321,7 +322,7 @@
               fileSize: item.size,
             };
             newFileList.push(fileJson);
-          }else{
+          } else {
             return;
           }
         }

src/design/vent/comment.less

@@ -201,8 +201,11 @@
 }
 #LivePlayerBox{
   width: 100%;
-  height: auto;
+  // height: 100%;
+  height: 208px;
+  position: relative;
   .liveVideo{
+    height: 208px;
     pointer-events: auto !important;
     .player {
         width: 314px;

src/hooks/event/useDrag.ts

@@ -1,8 +1,12 @@
 export function useDrag(sliderDom: HTMLElement) {
-  let startPoint = 0;
+  let startPoint = { x: 0, y: 0 };
   let isDown = false;
   let premitiveX = 0;
-  function onMouseDown(e: any) {
+  let premitiveY = 0;
+
+  function onMouseDown(e: Event) {
+    e.stopPropagation();
+    e.preventDefault();
     isDown = true;
     const style = window.getComputedStyle(sliderDom!);
     const { transform } = style;
@@ -10,11 +14,13 @@ export function useDrag(sliderDom: HTMLElement) {
       const matrixArr = transform.replace(/[^0-9\-,]/g, '').split(',');
       console.log('matrixArr', matrixArr);
       premitiveX = parseInt(matrixArr[4]);
+      premitiveY = parseInt(matrixArr[5]);
     } else {
       premitiveX = 0;
+      premitiveY = 0;
     }
-    const { clientX } = e;
-    startPoint = clientX;
+    const { clientX, clientY } = e;
+    startPoint = { x: clientX, y: clientY };
   }
 
   function onMosueUp(e: any) {
@@ -23,16 +29,17 @@ export function useDrag(sliderDom: HTMLElement) {
 
   function onMouseMove(e: any) {
     if (!isDown) return;
-    const { clientX } = e;
-    const moveDistance = clientX - startPoint;
-    const offset = premitiveX + moveDistance;
-    console.log('offset', offset);
-    sliderDom!.style.transform = `translateX(${offset}px)`;
+    const { clientX, clientY } = e;
+    const moveDistancX = clientX - startPoint.x;
+    const moveDistancY = clientY - startPoint.y;
+    const offsetX = premitiveX + moveDistancX;
+    const offsetY = premitiveY + moveDistancY;
+    sliderDom!.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
   }
 
-  sliderDom.addEventListener('mouseDown', onMouseDown);
-  sliderDom.addEventListener('mouseMove', onMouseMove);
-  sliderDom.addEventListener('mouseUp', onMosueUp);
+  sliderDom.addEventListener('mousedown', onMouseDown);
+  document.addEventListener('mousemove', onMouseMove);
+  document.addEventListener('pointerup', onMosueUp);
 
   return { onMouseDown, onMouseMove, onMosueUp };
 }

src/hooks/setting/index.ts

@@ -39,13 +39,13 @@ const getUrl = () => {
   });
 };
 
-export async function getRemoteSetting(){
+export async function getRemoteSetting() {
   if (!title) {
     try {
       await getUrl();
     } catch (error) {}
   }
-};
+}
 
 export const useGlobSetting = (): Readonly<GlobConfig> => {
   if (!title) {
@@ -72,7 +72,7 @@ export const useGlobSetting = (): Readonly<GlobConfig> => {
     // );
   }
   if (import.meta.env.DEV) {
-    domainUrl = VITE_GLOB_DOMAIN_URL;
+    domainUrl = VUE_APP_URL.baseUrl;
   } else if (import.meta.env.PROD) {
     domainUrl = VUE_APP_URL.baseUrl;
   }

src/hooks/system/useCamera.ts

@@ -103,7 +103,7 @@ export function useCamera() {
                   });
 
                   videoParentDomList.push(videoParentDom);
-                  livePlayerDiv?.appendChild(videoParentDom);
+
                   try {
                     const server = new window['WebRtcStreamer'](videoDom, location.protocol + VUE_APP_URL.webRtcUrl);
                     webRtcServer.unshift(server);
@@ -186,7 +186,8 @@ export function useCamera() {
             );
           }
         } else {
-          player.appendChild(videoParentDom as Node);
+          useDrag(videoParentDom as HTMLElement);
+          livePlayerDiv?.appendChild(videoParentDom as Node);
         }
       });
 

src/hooks/web/usePermission.ts

@@ -94,14 +94,19 @@ export function usePermission() {
       const allCodeList = permissionStore.getPermCodeList as string[];
       if (!isArray(value) && allCodeList && allCodeList.length > 0) {
         //=============================工作流权限判断-显示-begin==============================================
-        if (formData) {
+        if (formData && JSON.stringify(formData) !== '{}') {
           let code = value as string;
           if (hasBpmPermission(code, '1') === true) {
             return true;
           }
         }
         //=============================工作流权限判断-显示-end==============================================
-        return allCodeList.includes(value);
+        // return allCodeList.includes(value);
+        const permCode = allCodeList.find((item) => item['action'] == value);
+        if (permCode) {
+          return true;
+        }
+        return false;
       }
       return (intersection(value, allCodeList) as string[]).length > 0;
     }

src/layouts/default/header/components/user-dropdown/index.vue

@@ -199,7 +199,7 @@
     height: 48px;
     padding: 0 0 0 10px;
     padding-right: 10px;
-    overflow: hidden;
+    // overflow: hidden;
     font-size: 12px;
     cursor: pointer;
     align-items: center;

src/layouts/default/sider/bottomSideder.vue

@@ -2,12 +2,12 @@
   <div v-if="isShowMenu == -1" class="bottom-side" :class="{ 'bottom-size-show': isShowMenu }">
     <div class="menu-container">
       <template v-for="(menu, index) in currentParentRoute.children" :key="index">
-        <FourBorderBg class="four-border-bg"  v-if="!menu.hideMenu">
-          <div class="vent-flex-row" >
+        <FourBorderBg class="four-border-bg" v-if="!menu.hideMenu">
+          <div class="vent-flex-row">
             <div class="parent-menu">
               {{ menu.name }}
             </div>
-            <div class="vent-flex-row-wrap child-menu" >
+            <div class="vent-flex-row-wrap child-menu">
               <template v-for="(childMenu, childIndex) in menu.children" :key="childIndex">
                 <template v-if="!childMenu.hideMenu">
                   <template v-if="childMenu['ver'] == 1">
@@ -26,7 +26,7 @@
           </div>
         </FourBorderBg>
       </template>
-      
+
       <div class="vent-flex-row-between menu-button-group">
         <div class="vent-flex-row program-group">
           <template v-for="(programMenu, key) in menuModules" :key="key">
@@ -42,7 +42,7 @@
         <div class="setting-group">
           <SvgIcon class="icon-style" size="18" name="home" @click="geHome" />
           <SvgIcon class="icon-style" size="18" name="fixed" />
-          <SvgIcon class="icon-style" size="18" name="enter" @click="closeMenu"/>
+          <SvgIcon class="icon-style" size="18" name="enter" @click="closeMenu" />
           <!-- <SvgIcon class="icon-style" size="18" name="setting" />  
           <SvgIcon class="icon-style" size="18" name="hidden" /> -->
         </div>
@@ -68,7 +68,6 @@
   import { useGlobSetting } from '/@/hooks/setting';
   import { router } from '/@/router';
   import { unmountMicroApps } from '/@/qiankun';
-  
 
   export default defineComponent({
     name: 'BottomSider',
@@ -83,111 +82,62 @@
       const go = useGo();
       const glob = useGlobSetting();
 
-      function selectMenu(e:Event, programMenu) {
-        e.stopPropagation()
+      function selectMenu(e: Event, programMenu) {
+        e.stopPropagation();
         currentParentRoute.value = programMenu;
       }
 
       async function handleMenuClick(path: Menu) {
-        if(path.path.includes('sw/monitor-fanmain')) { // 上湾主风机
+        if (path.path.includes('sw/monitor-fanmain')) {
+          // 上湾主风机
           var url = window.open('_blank') as Window; //打开一个窗口，然后用
-          url.location = 'https://swkhmi.shendong.vip:9043/#SW_PW_NORTH';//使这个窗口跳转到。
-          return
+          url.location = 'https://swkhmi.shendong.vip:9043/#SW_PW_NORTH'; //使这个窗口跳转到。
+          return;
         }
-        if (path.path.includes('sw/forcFan')) { // 上湾压风
+        if (path.path.includes('sw/forcFan')) {
+          // 上湾压风
           var url = window.open('_blank') as Window; //打开一个窗口，然后用
-          url.location = 'https://swkhmi.shendong.vip:9043/#SW_CA';//使这个窗口跳转到。
-          return
-        }
-        // if (route.path.startsWith('/micro-')) {
-        //   // if(path.path.startsWith('/micro-vent-3dModal') && route.path.startsWith('/micro-vent-3dModal')){
-        //   //   debugger
-        //   //   // window['3DVentRouter'].push(path.path)
-        //   //   // 触发空路由转发到要跳转的路由
-        //   //   // route.matched
-        //   //   // router.replace(path.path)
-        //   //   // go('/monitorChannel/monitor-window')
-        //   //   router.push({ path: '/monitorChannel/monitor-window', query: { redirect: path.path } })
-        //   //   // await router.push({path: '/test', query: { redirect: path.path} })
-        //   //   // go(`/test${path.path}`)
-        //   //   // go(path.path);
-        //   //   // history.replaceState({}, '', 'path.path')
-        //   //   // router.push({path: '/', {redice}});
-        //   //   // const { query } = router.resolve(path.path)
-        //   //   // const { type, deviceType } = query
-        //   //   // if (type && deviceType) {
-        //   //   //   actions.setGlobalState({ pageObj: { pageType: type, deviceType } });
-        //   //   // } else {
-        //   //   //   actions.setGlobalState({ pageObj: { pageType: 'home' } });
-        //   //   // }
-        //   //   return
-        //   // }
-        //   go(path.path);
-
-        // } else {
-        //   debugger
-        //   if(route.path.startsWith('/subSysmodal/')) {
-        //     router.replace('/micro-vent-3dModal' + path.path)
-        //     return
-        //   }
-        //   debugger
-        //    go(path.path);
-        // }
-        if (route.path.startsWith('/subSysmodal/')) {
-          router.replace('/micro-vent-3dModal' + path.path)
-          return
+          url.location = 'https://swkhmi.shendong.vip:9043/#SW_CA'; //使这个窗口跳转到。
+          return;
         }
-        if(route.path.startsWith('/micro-vent-3dModal')){
+        if (route.path.startsWith('/micro-vent-3dModal')) {
           if (path.path.startsWith('/micro-vent-3dModal') && route.path.startsWith('/micro-vent-3dModal')) {
             unmountMicroApps(['/micro-vent-3dModal']);
             nextTick(() => {
               go(path.path);
-            })
-            
-            // const { query } = router.resolve(path.path)
-            // const { type, deviceType } = query
-            // if (type && deviceType) {
-            //   actions.setGlobalState({ pageObj: { pageType: type, deviceType } });
-            // } else {
-            //   actions.setGlobalState({ pageObj: { pageType: 'home' } });
-            // }
-          }else{
+            });
+          } else {
             go(path.path);
           }
-          // history.pushState(null, '', path.path)
-          
-          // router.push({path: path.path})
-        }else{
+        } else {
           go(path.path);
         }
-        
+
         isShowMenu.value = 0;
       }
 
-
       function geHome() {
-        isShowMenu.value = 0;
-        if(route.path.startsWith('/micro-vent-3dModal/dashboard/analysis')){
+        if (route.path.startsWith('/micro-vent-3dModal/dashboard/analysis')) {
           if (glob.homePath == '/micro-vent-3dModal/dashboard/analysis' || PageEnum.BASE_HOME == '/micro-vent-3dModal/dashboard/analysis') {
             actions.setGlobalState({ pageObj: { pageType: 'home' } });
-            go(glob.homePath || PageEnum.BASE_HOME)
+            go(glob.homePath || PageEnum.BASE_HOME);
           }
-        }else{
-          if(glob.homePath == '/model3D/home' || PageEnum.BASE_HOME == '/model3D/home'){
-            go(glob.homePath || PageEnum.BASE_HOME)
+        } else {
+          if (glob.homePath == '/model3D/home' || PageEnum.BASE_HOME == '/model3D/home') {
+            go(glob.homePath || PageEnum.BASE_HOME);
             // location.reload()
           }
-          go(glob.homePath || PageEnum.BASE_HOME)
+          go(glob.homePath || PageEnum.BASE_HOME);
         }
       }
-      function closeMenu(e?:Event) {
-        e?.stopPropagation()
+      function closeMenu(e?: Event) {
+        e?.stopPropagation();
         isShowMenu.value = 0;
         document.removeEventListener('click', closeMenu);
-      };
+      }
 
-      function openMenu(e:Event) {
-        e.stopPropagation()
+      function openMenu(e: Event) {
+        e.stopPropagation();
         isShowMenu.value = -1;
         document.addEventListener('click', closeMenu);
       }
@@ -212,7 +162,7 @@
 </script>
 
 <style lang="less" scoped>
-@keyframes menuShow {
+  @keyframes menuShow {
     0% {
       width: 0;
       height: 0;
@@ -273,7 +223,7 @@
             background: linear-gradient(#1d89bf, #17aeee);
           }
         }
-        .child-menu-item-disabled{
+        .child-menu-item-disabled {
           width: 100px;
           padding: 2px 0;
           border-radius: 2px;
@@ -293,7 +243,7 @@
       .program-menu {
         // width: 90px;
         padding: 1px 15px;
-        background:linear-gradient(#217aa5, #0f4f75);
+        background: linear-gradient(#217aa5, #0f4f75);
         margin-left: 5px;
         text-align: center;
         border-radius: 2px;

src/main.ts

@@ -2,7 +2,7 @@ import 'uno.css';
 import '/@/design/index.less';
 // 注册图标
 import 'virtual:svg-icons-register';
-
+import 'animate.css';
 import App from './App.vue';
 import { createApp } from 'vue';
 import { getRemoteSetting } from '/@/hooks/setting';
@@ -73,17 +73,18 @@ async function bootstrap() {
 
   initTHREE();
 
-  app.component('global-config', GlobalConfig);
+  app.component('GlobalConfig', GlobalConfig);
   app.provide('globalConfig', {
     // 你的全局配置
     simulatedPassword: VENT_PARAM['simulatedPassword'],
     History_Type: History_Type['type'],
     pageType: '',
+    showReport: VENT_PARAM['showReport'],
   });
 
   // 挂载应用
   app.mount('#app', true);
-  console.log(" vue3 app 加载完成！")
+  console.log(' vue3 app 加载完成！');
 }
 
 bootstrap();

src/store/modules/permission.ts

@@ -19,7 +19,7 @@ import { ERROR_LOG_ROUTE, PAGE_NOT_FOUND_ROUTE, QIANKUN_ROUTE } from '/@/router/
 import { filter } from '/@/utils/helper/treeHelper';
 
 import { getMenuList, switchVue3Menu } from '/@/api/sys/menu';
-import { getPermCode } from '/@/api/sys/user';
+import { getPermCode, getUserPermissionByToken } from '/@/api/sys/user';
 
 import { useMessage } from '/@/hooks/web/useMessage';
 import { PageEnum } from '/@/enums/pageEnum';
@@ -126,8 +126,10 @@ export const usePermissionStore = defineStore({
       this.lastBuildMenuTime = 0;
     },
     async changePermissionCode() {
-      const systemPermission = await getPermCode();
-      const codeList = systemPermission.codeList;
+      // const systemPermission = await getPermCode(); //getUserPermissionByToken
+      // const codeList = systemPermission.codeList;
+      const systemPermission = await getUserPermissionByToken(); //getUserPermissionByToken
+      const codeList = systemPermission.auth;
       this.setPermCodeList(codeList);
       this.setAuthData(systemPermission);
     },

src/utils/common/compUtils.ts

@@ -2,12 +2,12 @@ import { useGlobSetting } from '/@/hooks/setting';
 import { merge, random } from 'lodash-es';
 import { isArray } from '/@/utils/is';
 import { FormSchema } from '/@/components/Form';
-import { reactive } from "vue";
-import { getTenantId, getToken } from "/@/utils/auth";
-import { useUserStoreWithOut } from "/@/store/modules/user";
+import { reactive } from 'vue';
+import { getTenantId, getToken } from '/@/utils/auth';
+import { useUserStoreWithOut } from '/@/store/modules/user';
 
-import { Modal } from "ant-design-vue";
-import { defHttp } from "@/utils/http/axios";
+import { Modal } from 'ant-design-vue';
+import { defHttp } from '@/utils/http/axios';
 
 const globSetting = useGlobSetting();
 const baseApiUrl = globSetting.domainUrl;
@@ -21,9 +21,9 @@ export const getFileAccessHttpUrl = (fileUrl, prefix = 'http') => {
   try {
     if (fileUrl && fileUrl.length > 0 && !fileUrl.startsWith(prefix)) {
       //判断是否是数组格式
-      let isArray = fileUrl.indexOf('[') != -1;
+      const isArray = fileUrl.indexOf('[') != -1;
       if (!isArray) {
-        let prefix = `${baseApiUrl}/sys/common/static/`;
+        const prefix = `${baseApiUrl}/sys/common/static/`;
         // 判断是否已包含前缀
         if (!fileUrl.startsWith(prefix)) {
           result = `${prefix}${fileUrl}`;
@@ -38,7 +38,7 @@ export const getFileAccessHttpUrl = (fileUrl, prefix = 'http') => {
  * 触发 window.resize
  */
 export function triggerWindowResizeEvent() {
-  let event: any = document.createEvent('HTMLEvents');
+  const event: any = document.createEvent('HTMLEvents');
   event.initEvent('resize', true, true);
   event.eventType = 'message';
   window.dispatchEvent(event);
@@ -66,7 +66,7 @@ export function randomString(length: number, chats?: string) {
   }
   let str = '';
   for (let i = 0; i < length; i++) {
-    let num = random(0, chats.length - 1);
+    const num = random(0, chats.length - 1);
     str += chats[num];
   }
   return str;
@@ -140,7 +140,7 @@ export const toTree = (array, startPid, currentDept, opt) => {
  * @param fieldKeys 要计算合计的列字段
  */
 export function mapTableTotalSummary(tableData: Recordable[], fieldKeys: string[]) {
-  let totals: any = { _row: '合计', _index: '合计' };
+  const totals: any = { _row: '合计', _index: '合计' };
   fieldKeys.forEach((key) => {
     totals[key] = tableData.reduce((prev, next) => {
       prev += next[key];
@@ -164,7 +164,7 @@ export function mapTableTotalSummary(tableData: Recordable[], fieldKeys: string[
 export function simpleDebounce(fn, delay = 100) {
   let timer: any | null = null;
   return function () {
-    let args = arguments;
+    const args = arguments;
     if (timer) {
       clearTimeout(timer);
     }
@@ -219,8 +219,8 @@ export function dateFormat(date, block) {
  * 目前使用的地方：JVxeTable Span模式
  */
 export function getEventPath(event) {
-  let target = event.target;
-  let path = (event.composedPath && event.composedPath()) || event.path;
+  const target = event.target;
+  const path = (event.composedPath && event.composedPath()) || event.path;
 
   if (path != null) {
     return path.indexOf(window) < 0 ? path.concat(window) : path;
@@ -230,7 +230,7 @@ export function getEventPath(event) {
     return [window];
   }
 
-  let getParents = (node, memo) => {
+  const getParents = (node, memo) => {
     const parentNode = node.parentNode;
 
     if (!parentNode) {
@@ -250,7 +250,7 @@ export function getEventPath(event) {
  * @returns {boolean} 成功 push 返回 true，不处理返回 false
  */
 export function pushIfNotExist(array, value, key?) {
-  for (let item of array) {
+  for (const item of array) {
     if (key && item[key] === value[key]) {
       return false;
     } else if (item === value) {
@@ -270,7 +270,7 @@ export function filterObj(obj) {
     return;
   }
 
-  for (let key in obj) {
+  for (const key in obj) {
     if (obj.hasOwnProperty(key) && (obj[key] == null || obj[key] == undefined || obj[key] === '')) {
       delete obj[key];
     }
@@ -294,13 +294,13 @@ export function underLine2CamelCase(string: string) {
  */
 export function findTree(treeList: any[], fn: Fn, childrenKey = 'children') {
   for (let i = 0; i < treeList.length; i++) {
-    let item = treeList[i];
+    const item = treeList[i];
     if (fn(item, i, treeList)) {
       return item;
     }
-    let children = item[childrenKey];
+    const children = item[childrenKey];
     if (isArray(children)) {
-      let findResult = findTree(children, fn, childrenKey);
+      const findResult = findTree(children, fn, childrenKey);
       if (findResult) {
         return findResult;
       }
@@ -337,37 +337,37 @@ export function stringIsNull(str) {
  * @param node
  */
 export function getAutoScrollContainer(node: HTMLElement) {
-  let element: Nullable<HTMLElement> = node
+  let element: Nullable<HTMLElement> = node;
   while (element != null) {
     if (element.classList.contains('scrollbar__view')) {
       // 判断是否有滚动条
       if (element.clientHeight < element.scrollHeight) {
         // 有滚动条时，挂载到父级，解决滚动问题
-        return node.parentElement
+        return node.parentElement;
       } else {
         // 无滚动条时，挂载到body上，解决下拉框遮盖问题
-        return document.body
+        return document.body;
       }
     } else {
-      element = element.parentElement
+      element = element.parentElement;
     }
   }
   // 不在弹窗内，走默认逻辑
-  return node.parentElement
+  return node.parentElement;
 }
 
 /**
  * 判断子菜单是否全部隐藏
  * @param menuTreeItem
  */
-export  function checkChildrenHidden(menuTreeItem){
+export function checkChildrenHidden(menuTreeItem) {
   //是否是聚合路由
-  let alwaysShow=menuTreeItem.alwaysShow;
-  if(alwaysShow){
+  const alwaysShow = menuTreeItem.alwaysShow;
+  if (alwaysShow) {
     return false;
   }
-  if(!menuTreeItem.children){
-    return false
+  if (!menuTreeItem.children) {
+    return false;
   }
   return menuTreeItem.children?.find((item) => item.hideMenu == false) != null;
 }
@@ -398,7 +398,7 @@ export function calculateFileSize(fileSize, unit?) {
  * 获取上传header
  */
 export function getHeaders() {
-  let tenantId = getTenantId();
+  const tenantId = getTenantId();
   return reactive({
     'X-Access-Token': getToken(),
     'X-Tenant-Id': tenantId ? tenantId : '0',
@@ -411,7 +411,7 @@ export function getUserInfoByExpression(expression) {
     return expression;
   }
   const userStore = useUserStoreWithOut();
-  let userInfo = userStore.getUserInfo;
+  const userInfo = userStore.getUserInfo;
   if (userInfo) {
     switch (expression) {
       case 'sysUserId':
@@ -441,7 +441,7 @@ export function replaceUserInfoByExpression(expression: string | any[]) {
     return expression;
   }
   const isString = typeof expression === 'string';
-  const isArray = Array.isArray(expression)
+  const isArray = Array.isArray(expression);
   if (!isString && !isArray) {
     return expression;
   }
@@ -450,10 +450,10 @@ export function replaceUserInfoByExpression(expression: string | any[]) {
     if (typeof str !== 'string') {
       return str;
     }
-    let result = str.match(reg);
+    const result = str.match(reg);
     if (result && result.length > 0) {
       result.forEach((item) => {
-        let userInfo = getUserInfoByExpression(item.substring(2, item.length - 1));
+        const userInfo = getUserInfoByExpression(item.substring(2, item.length - 1));
         str = str.replace(item, userInfo);
       });
     }
@@ -465,26 +465,26 @@ export function replaceUserInfoByExpression(expression: string | any[]) {
 
 /**
  * 设置租户缓存，当租户退出的时候
- * 
+ *
  * @param tenantId
  */
-export async function userExitChangeLoginTenantId(tenantId){
+export async function userExitChangeLoginTenantId(tenantId) {
   const userStore = useUserStoreWithOut();
   //step 1 获取用户租户
-  const url = '/sys/tenant/getCurrentUserTenant'
+  const url = '/sys/tenant/getCurrentUserTenant';
   let currentTenantId = null;
   const data = await defHttp.get({ url });
-  if(data && data.list){
-    let arr = data.list;
-    if(arr.length>0){
+  if (data && data.list) {
+    const arr = data.list;
+    if (arr.length > 0) {
       //step 2.判断当前id是否存在用户租户中
-      let filterTenantId = arr.filter((item) => item.id == tenantId);
+      const filterTenantId = arr.filter((item) => item.id == tenantId);
       //存在说明不是退出的不是当前租户，还用用来的租户即可
-      if(filterTenantId && filterTenantId.length>0){
+      if (filterTenantId && filterTenantId.length > 0) {
         currentTenantId = tenantId;
-      }else{
+      } else {
         //不存在默认第一个
-        currentTenantId = arr[0].id
+        currentTenantId = arr[0].id;
       }
     }
   }
@@ -495,19 +495,19 @@ export async function userExitChangeLoginTenantId(tenantId){
 
 /**
  * 我的租户模块需要开启多租户提示
- * 
+ *
  * @param title 标题
  */
-export function tenantSaasMessage(title){
-  let tenantId = getTenantId();
-  if(!tenantId){
+export function tenantSaasMessage(title) {
+  const tenantId = getTenantId();
+  if (!tenantId) {
     Modal.confirm({
-      title:title,
+      title: title,
       content: '此菜单需要在多租户模式下使用，否则数据会出现混乱',
       okText: '确认',
       okType: 'danger',
       // @ts-ignore
       cancelButtonProps: { style: { display: 'none' } },
-    })
+    });
   }
-}
+}

src/utils/threejs/util.ts

@@ -501,3 +501,45 @@ export const setTag3D = (text, className) => {
   label.rotateX(-Math.PI / 2);
   return label; //返回CSS3模型标签
 };
+
+// convert #hex notation to rgb array
+const parseColor = function (hexStr) {
+  return hexStr.length === 4
+    ? hexStr
+        .substr(1)
+        .split('')
+        .map(function (s) {
+          return 0x11 * parseInt(s, 16);
+        })
+    : [hexStr.substr(1, 2), hexStr.substr(3, 2), hexStr.substr(5, 2)].map(function (s) {
+        return parseInt(s, 16);
+      });
+};
+
+// zero-pad 1 digit to 2
+const pad = function (s) {
+  return s.length === 1 ? '0' + s : s;
+};
+
+export const gradientColors = function (start, end, steps, gamma) {
+  let i, j,
+    ms,
+    me,
+    output = [],
+    so = [];
+  gamma = gamma || 1;
+  const normalize = function (channel) {
+    return Math.pow(channel / 255, gamma);
+  };
+  start = parseColor(start).map(normalize);
+  end = parseColor(end).map(normalize);
+  for (i = 0; i < steps; i++) {
+    ms = i / (steps - 1);
+    me = 1 - ms;
+    for (j = 0; j < 3; j++) {
+      so[j] = pad(Math.round(Math.pow(start[j] * me + end[j] * ms, 1 / gamma) * 255).toString(16));
+    }
+    output.push('#' + so.join(''));
+  }
+  return output;
+};

src/views/dashboard/Analysis/homePage/workerFace.vue

@@ -230,24 +230,24 @@
         yAxisIndex: 0,
         areaStyle: {
           color: new echarts.graphic.LinearGradient(
-          0,
-          0,
-          0,
-          1,
-          [
-            {
-              offset: 0,
-              color: 'rgba(185,150,248,0.3)',
-            },
-            {
-              offset: 0.8,
-              color: 'rgba(185,150,248,0)',
-            },
-          ],
-          false
-        ),
-        shadowColor: 'rgba(0, 0, 0, 0.1)',
-        shadowBlur: 10,
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                color: 'rgba(185,150,248,0.3)',
+              },
+              {
+                offset: 0.8,
+                color: 'rgba(185,150,248,0)',
+              },
+            ],
+            false
+          ),
+          shadowColor: 'rgba(0, 0, 0, 0.1)',
+          shadowBlur: 10,
         },
         itemStyle: { color: '#B996F8' },
         data: [],
@@ -260,24 +260,24 @@
         yAxisIndex: 0,
         areaStyle: {
           color: new echarts.graphic.LinearGradient(
-          0,
-          0,
-          0,
-          1,
-          [
-            {
-              offset: 0,
-              color: 'rgba(3, 194, 236, 0.3)',
-            },
-            {
-              offset: 0.8,
-              color: 'rgba(3, 194, 236, 0)',
-            },
-          ],
-          false
-        ),
-        shadowColor: 'rgba(0, 0, 0, 0.1)',
-        shadowBlur: 10,
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                color: 'rgba(3, 194, 236, 0.3)',
+              },
+              {
+                offset: 0.8,
+                color: 'rgba(3, 194, 236, 0)',
+              },
+            ],
+            false
+          ),
+          shadowColor: 'rgba(0, 0, 0, 0.1)',
+          shadowBlur: 10,
         },
         itemStyle: { color: '#03C2EC' },
         data: [],
@@ -381,7 +381,7 @@
 
 <style lang="less" scoped>
   @ventSpace: zxm;
-  .center-container{
+  .center-container {
     width: 100%;
     height: calc(100% - 100px);
     display: flex;
@@ -428,7 +428,7 @@
           height: 100%;
         }
       }
-      .need-air-group{
+      .need-air-group {
         width: calc(100% - 20px);
         display: flex;
         justify-content: space-between;
@@ -436,15 +436,15 @@
         box-shadow: 0 0 5px #00d8ff22 inset;
         padding: 10px;
         margin: 10px 10px 0 10px;
-        .air-box{
+        .air-box {
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
-          .title{
+          .title {
             margin-left: 5px;
           }
-          .air-num{
+          .air-num {
             font-family: 'numberFont';
             color: #20dbfd;
             text-shadow: 0 0 25px #00d8ff;
@@ -452,14 +452,13 @@
             font-weight: bolder;
           }
         }
-
       }
       .base-title {
         width: calc(100% - 60px);
         text-align: center;
         color: #00d8ff;
       }
-      .base-information-box{
+      .base-information-box {
         display: flex;
         margin-left: 5px;
         .base-information {
@@ -494,7 +493,7 @@
 
               .value {
                 font-family: 'douyuFont';
-                color: #28DCE4;
+                color: #28dce4;
                 margin-top: 5px;
               }
             }
@@ -502,64 +501,62 @@
         }
       }
 
-      .warning-box{
-        .warning-top{
+      .warning-box {
+        .warning-top {
           display: flex;
           justify-content: space-between;
           padding: 10px 2px 0px 2px;
-          .warning-icon{
+          .warning-icon {
             width: 168px;
             height: 105px;
             display: flex;
             flex-direction: column;
             background: url('/@/assets/images/vent/new-home/warning-bg.png') no-repeat;
             background-size: contain;
-            .title{
+            .title {
               font-size: 13px;
               margin: 5px 0 5px 14px;
-
             }
-            .num-box{
+            .num-box {
               display: flex;
               margin-left: 20px;
-              .num{
+              .num {
                 font-family: 'numberFont';
                 font-size: 34px;
                 color: #20dbfd;
                 text-shadow: 0 0 25px #00d8ff;
                 margin-right: 10px;
               }
-              .rate-box{
+              .rate-box {
                 font-size: 12px;
-                .day-rate{
-                  color: #FE3E12;
+                .day-rate {
+                  color: #fe3e12;
                 }
-                .week-rate{
-                  color: #FADB3E;
+                .week-rate {
+                  color: #fadb3e;
                 }
-                .moth-rate{
-                  color: #12FE81;
+                .moth-rate {
+                  color: #12fe81;
                 }
               }
             }
           }
-
         }
       }
-      .device-monitor-box{
+      .device-monitor-box {
         margin-top: 20px;
         position: reactive;
-        .device-btn-group{
+        .device-btn-group {
           display: flex;
           flex-wrap: wrap;
           margin-top: 10px;
-          .device-active{
-            &::before{
+          .device-active {
+            &::before {
               border-color: #0efcff;
               box-shadow: 1px 1px 3px 1px #0efcff inset;
             }
           }
-          .device-btn{
+          .device-btn {
             width: 100px;
             height: 40px;
             position: relative;
@@ -570,19 +567,19 @@
             color: #0efcff;
             cursor: pointer;
             margin: 0 6px;
-            &::before{
+            &::before {
               content: '';
               position: absolute;
               top: 0;
               right: 0;
               bottom: 0;
               left: 0;
-              border: 1px solid #6176AF;
+              border: 1px solid #6176af;
               transform: skewX(-38deg);
             }
           }
         }
-        .device-table{
+        .device-table {
           position: absolute;
           width: 1550px;
           height: 270px;
@@ -593,7 +590,7 @@
           padding: 2px 0 10px 10px;
           z-index: 9999;
 
-          &::before{
+          &::before {
             position: absolute;
             content: '';
             width: 10px;
@@ -603,7 +600,7 @@
             left: 0px;
             top: -1px;
           }
-          &::after{
+          &::after {
             position: absolute;
             content: '';
             width: 10px;
@@ -613,112 +610,110 @@
             left: 0px;
             bottom: -1px;
           }
-          .device-tab{
+          .device-tab {
             width: 100%;
-            .tab{
+            .tab {
               margin: 5px;
               cursor: pointer;
             }
-            .tab-active{
+            .tab-active {
               color: #00d8ff;
             }
           }
-          .device-animation{
+          .device-animation {
             border-bottom: 1px solid #91e9fe44;
           }
-          .monitor-table{
+          .monitor-table {
             background-color: #67e6fd05;
           }
         }
-        .device-table-open{
+        .device-table-open {
           width: 1550;
           animation-name: open;
           /* 持续时间 */
           animation-duration: 2s;
           transition: all 2s linear 1s;
         }
-        .device-table-close{
+        .device-table-close {
           width: 0px;
           animation-name: close;
           /* 持续时间 */
           animation-duration: 2s;
           transition: all 2s linear 1s;
         }
-
       }
     }
-    .left-box{
+    .left-box {
       margin-top: 30px;
     }
   }
 
-  :deep(.@{ventSpace}-table-thead){
+  :deep(.@{ventSpace}-table-thead) {
     background-color: transparent !important;
 
-    th{
+    th {
       color: #00d8ff !important;
       border-color: #91e9fe44 !important;
       border: none !important;
       border-top: 1px solid #91e9fe44 !important;
-      &:first-child{
+      &:first-child {
         border-left: 1px solid #91e9fe44 !important;
       }
-      &:last-child{
+      &:last-child {
         border-right: 1px solid #91e9fe44 !important;
       }
-      .@{ventSpace}-table-column-title{
+      .@{ventSpace}-table-column-title {
         color: #00d8ff !important;
       }
-      .@{ventSpace}-table-cell-scrollbar{
+      .@{ventSpace}-table-cell-scrollbar {
         box-shadow: none !important;
       }
     }
   }
-  :deep(.@{ventSpace}-table-tbody){
-    tr{
-      td{
+  :deep(.@{ventSpace}-table-tbody) {
+    tr {
+      td {
         background-color: transparent !important;
         border-bottom: 1px solid #91e9fe33 !important;
         // border-top: none !important;
         // border-left: none !important;
-        &:first-child{
+        &:first-child {
           border-left: 1px solid #91e9fe44 !important;
         }
-        &:last-child{
+        &:last-child {
           border-right: 1px solid #91e9fe44 !important;
         }
       }
-      &:last-child{
-        td{
+      &:last-child {
+        td {
           border-bottom: 1px solid #91e9fe44 !important;
         }
       }
     }
-
   }
 
   @keyframes open {
-      /* 开始状态 */
-      0% {
-          opacity: 0;
-          width: 0px;
-      }
-      /* 结束状态 */
-      100% {
-          opacity: 1;
-          width: 1550px;
-      }
+    /* 开始状态 */
+    0% {
+      opacity: 0;
+      width: 0px;
+    }
+    /* 结束状态 */
+    100% {
+      opacity: 1;
+      width: 1550px;
+    }
   }
   @keyframes close {
-      /* 开始状态 */
-      0% {
-          opacity: 1;
-          width: 1550px;
-      }
-      /* 结束状态 */
-      100% {
-          opacity: 0;
-          width: 0px;
-      }
+    /* 开始状态 */
+    0% {
+      opacity: 1;
+      width: 1550px;
+    }
+    /* 结束状态 */
+    100% {
+      opacity: 0;
+      width: 0px;
+    }
   }
 </style>

src/views/super/drag/page/components/CardList.vue

@@ -86,7 +86,6 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
   import { usePermission } from '/@/hooks/web/usePermission';
-  
   const { hasPermission } = usePermission();
   const ListItem = List.Item;
   const defCover = 'https://jeecgdev.oss-cn-beijing.aliyuncs.com/temp/designCover_1655434422024.png';

src/views/vent/deviceManager/pointTabel/index.vue

@@ -13,8 +13,7 @@
       designScope="table-search-reset"
       title="点表列表"
       :showTab="false"
-    >
-    </NormalTable>
+    />
   </div>
 </template>
 

src/views/vent/deviceManager/pointTabel/point.data.ts

@@ -74,6 +74,23 @@ export const searchFormSchema: FormSchema[] = [
     component: 'MTreeSelect',
     colProps: { span: 6 },
   },
+  {
+    label: '值code',
+    field: 'valuecode',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    label: '设备类型',
+    field: 'valuetype',
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: 'valuetype',
+      placeholder: '请选择设备类型',
+      stringToNumber: true,
+    },
+    colProps: { span: 6 },
+  },
 ];
 
 export const formSchema: FormSchema[] = [

src/views/vent/deviceManager/substationTabel/index.vue

@@ -17,10 +17,14 @@
         <a-tag v-if="column.dataIndex === 'linkstatus'" :color="record.linkstatus == 0 ? '#999' : '#87d068'">{{
           record.linkstatus == 1 ? '链接' : '断开'
         }}</a-tag>
-      
       </template>
       <template #action="{ record }">
-        <a v-if="record['strtype'] == 'http'|| record['strtype'] == 'kafka'" class="table-action-link" @click="addDevices(record)">同步设备</a>
+        <a
+          v-if="record['strtype'] == 'http' || record['strtype'] == 'kafka' || record['strtype'] == 'ftp'"
+          class="table-action-link"
+          @click="addDevices(record)"
+          >同步设备</a
+        >
       </template>
     </NormalTable>
   </div>
@@ -34,28 +38,29 @@
   import { list, getImportUrl, getExportUrl, deleteById, batchDeleteById, saveOrUpdate, addDevice } from './substation.api';
   import { message } from 'ant-design-vue';
   const normalTabel = ref();
-  let timer = undefined ;
+  let timer = undefined;
   function reload() {
     timer = setInterval(() => {
-      if(normalTabel.value)normalTabel.value.reload()
-    }, 30000)
+      if (normalTabel.value) normalTabel.value.reload();
+    }, 30000);
   }
 
   function addDevices(record) {
-    addDevice({ id: record.id }).then((result) => {
-      // message.success('同步生成')
-    }).catch(() => {
-      message.success('同步失败')
-    })
+    addDevice({ id: record.id })
+      .then((result) => {
+        // message.success('同步生成')
+      })
+      .catch(() => {
+        message.success('同步失败');
+      });
   }
   onMounted(() => {
-    reload()
-  })
+    reload();
+  });
 
   onUnmounted(() => {
-    clearInterval(timer)
-  })
-  
+    clearInterval(timer);
+  });
 </script>
 
 <style scoped></style>

src/views/vent/home/clique/components/dialog-modal.vue

@@ -1,539 +1,533 @@
 <template>
-    <div class="dialogModal">
-        <div class="modal-top">
-            <i>
-                <SvgIcon class="icon" size="14" name="inner-kd" />
-            </i>
-            <span class="modal-title"> {{ modalTitle }}</span>
-            <span class="close" @click="getClose">✕</span>
+  <div class="dialogModal" id="detailModal">
+    <div class="modal-top">
+      <i>
+        <SvgIcon class="icon" size="14" name="inner-kd" />
+      </i>
+      <span class="modal-title"> {{ modalTitle }}</span>
+      <span class="close">✕</span>
+    </div>
+    <div class="modal-card">
+      <div class="card-box" v-for="(item, index) in modalCard" :key="index">
+        <div class="card-pic">
+          <img :src="item.imgSrc" alt="" />
         </div>
-        <div class="modal-card">
-            <div class="card-box" v-for="(item, index) in modalCard" :key="index">
-                <div class="card-pic">
-                    <img :src="item.imgSrc" alt="">
-                </div>
-                <div class="card-content">
-                    <div class="content-label">{{ item.label }}</div>
-                    <div class="content-value">{{ item.value }}</div>
-                </div>
-            </div>
+        <div class="card-content">
+          <div class="content-label">{{ item.label }}</div>
+          <div class="content-value">{{ item.value }}</div>
         </div>
-        <div class="modal-card1">
-            <div class="left-modal">
-                <div class="value-m">{{ valueM }}</div>
-                <div class="label-m">{{ labelM }}</div>
+      </div>
+    </div>
+    <div class="modal-card1">
+      <div class="left-modal">
+        <div class="value-m">{{ valueM }}</div>
+        <div class="label-m">{{ labelM }}</div>
+      </div>
+      <div class="right-modal">
+        <div class="modal-zl" v-for="(item, index) in zlList" :key="index">
+          <div class="left-zl">
+            <div class="label-left">
+              <span class="pic"></span>
+              <span>{{ item.label }}</span>
             </div>
-            <div class="right-modal">
-                <div class="modal-zl" v-for="(item, index) in zlList" :key="index">
-                    <div class="left-zl">
-                        <div class="label-left">
-                            <span class="pic"></span>
-                            <span>{{ item.label }}</span>
-                        </div>
-                        <div class="value-left">
-                            <span class="text">{{ item.value }}</span>
-                            <span>Pa</span>
-                        </div>
-                    </div>
-                    <div class="right-zl">
-                        <span class="text"> {{ item.percent }}</span>
-                        <span>%</span>
-                    </div>
-                </div>
+            <div class="value-left">
+              <span class="text">{{ item.value }}</span>
+              <span>Pa</span>
             </div>
+          </div>
+          <div class="right-zl">
+            <span class="text"> {{ item.percent }}</span>
+            <span>%</span>
+          </div>
         </div>
-        <div class="modal-card2">
-            <div class="modal-wind" v-for="(item, index) in windLfList" :key="index">
-                <span class="text">{{ item.label }}</span>
-                <span class="num">{{ item.value }}</span>
-                <span class="dw">%</span>
-            </div>
+      </div>
+    </div>
+    <div class="modal-card2">
+      <div class="modal-wind" v-for="(item, index) in windLfList" :key="index">
+        <span class="text">{{ item.label }}</span>
+        <span class="num">{{ item.value }}</span>
+        <span class="dw">%</span>
+      </div>
+    </div>
+    <div class="modal-card3">
+      <div class="warn-left">
+        <div class="vent-l">
+          <span class="warn-label">{{ vent.value }}</span>
+          <span class="warn-value">{{ vent.label }}</span>
         </div>
-        <div class="modal-card3">
-            <div class="warn-left">
-                <div class="vent-l">
-                    <span class="warn-label">{{ vent.value }}</span>
-                    <span class="warn-value">{{ vent.label }}</span>
-                </div>
-                <div class="gas-l">
-                    <span class="warn-label">{{ gas.value }}</span>
-                    <span class="warn-value">{{ gas.label }}</span>
-                </div>
-            </div>
-            <div class="warn-c">
-                <div class="warn-icon"></div>
-            </div>
-            <div class="warn-right">
-                <div class="fire-r">
-                    <span class="warn-value">{{ fire.label }}</span>
-                    <span class="warn-label">{{ fire.value }}</span>
-                </div>
-                <div class="dust-r">
-                    <span class="warn-value">{{ dust.label }}</span>
-                    <span class="warn-label">{{ dust.value }}</span>
-                </div>
-            </div>
+        <div class="gas-l">
+          <span class="warn-label">{{ gas.value }}</span>
+          <span class="warn-value">{{ gas.label }}</span>
         </div>
-
+      </div>
+      <div class="warn-c">
+        <div class="warn-icon"></div>
+      </div>
+      <div class="warn-right">
+        <div class="fire-r">
+          <span class="warn-value">{{ fire.label }}</span>
+          <span class="warn-label">{{ fire.value }}</span>
+        </div>
+        <div class="dust-r">
+          <span class="warn-value">{{ dust.label }}</span>
+          <span class="warn-label">{{ dust.value }}</span>
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 <script lang="ts" setup>
-import { ref, reactive,defineEmits } from 'vue'
-import { SvgIcon } from '/@/components/Icon';
-import { getAssetURL } from '/@/utils/ui';
+  import { ref, reactive } from 'vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import { getAssetURL } from '/@/utils/ui';
 
-let modalTitle = ref('榆家梁矿')
-let modalCard = reactive([
+  let modalTitle = ref('榆家梁矿');
+  let modalCard = reactive([
     { imgSrc: getAssetURL('company/hang.png'), label: '巷道长度', value: 12300 },
     { imgSrc: getAssetURL('company/people.png'), label: '人员总数', value: 23 },
     { imgSrc: getAssetURL('company/car.png'), label: '车辆总数', value: 17 },
-])
+  ]);
 
-let valueM = ref('10000')
-let labelM = ref('1号回风立井')
+  let valueM = ref('10000');
+  let labelM = ref('1号回风立井');
 
-let zlList = reactive([
+  let zlList = reactive([
     { label: '关键阻力——进风', value: 3000, percent: 30 },
     { label: '关键阻力——用风', value: 3000, percent: 30 },
-    { label: '关键阻力——回风', value: 3000, percent: 30 }
-])
+    { label: '关键阻力——回风', value: 3000, percent: 30 },
+  ]);
 
-let windLfList = reactive([
+  let windLfList = reactive([
     { label: '有效风量率', value: 88 },
-    { label: '矿井风量率', value: 3.54 }
-])
+    { label: '矿井风量率', value: 3.54 },
+  ]);
 
-let vent = reactive({
+  let vent = reactive({
     label: '通风风险性',
-    value: '低风险'
-})
+    value: '低风险',
+  });
 
-let gas = reactive({
+  let gas = reactive({
     label: '瓦斯风险性',
-    value: '低风险'
-})
+    value: '低风险',
+  });
 
-let fire = reactive({
+  let fire = reactive({
     label: '火灾风险性',
-    value: '低风险'
-})
+    value: '低风险',
+  });
 
-let dust = reactive({
+  let dust = reactive({
     label: '粉尘风险性',
-    value: '低风险'
-})
-
-const emit = defineEmits(['closeDialog']);
+    value: '低风险',
+  });
 
-function getClose(){
- emit('closeDialog', false);
-}
+//   const emit = defineEmits(['closeDialog']);
 
+//   function getClose() {
+//     debugger;
+//     emit('closeDialog', false);
+//   }
 </script>
 <style lang="less" scoped>
-@font-face {
+  @font-face {
     font-family: 'douyuFont';
-    src: url('../../../../assets/font/douyuFont.otf');
-}
+    src: url('/@/assets/font/douyuFont.otf');
+  }
 
-.dialogModal {
+  .dialogModal {
     position: relative;
-    width: 100%;
-    height: 100%;
+    width: 568px;
+    height: 437px;
+    background: url('/@/assets/images/company/area-card2.png') no-repeat;
+    background-size: 100% 100%;
+    pointer-events: none;
 
     .modal-top {
+      position: absolute;
+      left: 32px;
+      top: 15px;
+      height: 30px;
+      line-height: 30px;
+      width: 90%;
+
+      .modal-title {
+        font-size: 14px;
+        font-family: 'douyuFont';
+        color: #fff;
+        margin-left: 10px;
+      }
+
+      .close {
         position: absolute;
-        left: 32px;
-        top: 15px;
-        height: 30px;
-        line-height: 30px;
-        width: 90%;
-
-        .modal-title {
-            font-size: 14px;
-            font-family: 'douyuFont';
-            color: #fff;
-            margin-left: 10px;
-        }
-
-        .close {
-            position: absolute;
-            right: 12px;
-            color: #2cb6ff;
-            cursor: pointer;
-        }
+        right: 12px;
+        color: #2cb6ff;
+        cursor: pointer;
+        pointer-events: auto;
+      }
     }
 
     .modal-card {
-        position: absolute;
-        top: 45px;
-        left: 50%;
-        transform: translate(-50%, 0);
-        height: 46px;
-        width: 90%;
-        margin-top: 15px;
+      position: absolute;
+      top: 45px;
+      left: 50%;
+      transform: translate(-50%, 0);
+      height: 46px;
+      width: 90%;
+      margin-top: 15px;
+      display: flex;
+      justify-content: space-between;
+      background: url('../../../../../assets/images/company/modal-card.png') no-repeat center;
+      background-size: 100% 100%;
+
+      .card-box {
         display: flex;
-        justify-content: space-between;
-        background: url('../../../../../assets/images/company/modal-card.png') no-repeat center;
-        background-size: 100% 100%;
-
-        .card-box {
-            display: flex;
-            flex: 1;
-            height: 100%;
-            justify-content: center;
-            align-items: center;
-
-            &:first-child {
-                margin-left: 15px;
-            }
+        flex: 1;
+        height: 100%;
+        justify-content: center;
+        align-items: center;
 
-            &:last-child {
-                margin-right: 10px;
-            }
+        &:first-child {
+          margin-left: 15px;
+        }
 
-            .card-pic {
-                margin-right: 10px;
-            }
+        &:last-child {
+          margin-right: 10px;
+        }
 
-            .card-content {
-                display: flex;
-                flex-direction: column;
-                justify-content: space-between;
+        .card-pic {
+          margin-right: 10px;
+        }
 
-                .content-label {
-                    font-size: 10px;
-                    color: #ccd6df;
-                }
+        .card-content {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
 
-                .content-value {
-                    font-family: 'douyuFont';
-                    font-size: 14px;
-                    color: #fff;
-                }
+          .content-label {
+            font-size: 10px;
+            color: #ccd6df;
+          }
 
-            }
+          .content-value {
+            font-family: 'douyuFont';
+            font-size: 14px;
+            color: #fff;
+          }
         }
+      }
     }
 
     .modal-card1 {
-        position: absolute;
-        top: 121px;
-        left: 50%;
-        transform: translate(-50%, 0);
-        height: 110px;
-        width: 90%;
-        padding: 0px 10px;
-        box-sizing: border-box;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        background: url('../../../../../assets/images/company/area3.png') no-repeat center;
+      position: absolute;
+      top: 121px;
+      left: 50%;
+      transform: translate(-50%, 0);
+      height: 110px;
+      width: 90%;
+      padding: 0px 10px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background: url('../../../../../assets/images/company/area3.png') no-repeat center;
+      background-size: 100% 100%;
+
+      .left-modal {
+        position: relative;
+        width: 95px;
+        height: 95px;
+        background: url('../../../../../assets/images/company/zfx.png') no-repeat center;
         background-size: 100% 100%;
 
-        .left-modal {
-            position: relative;
-            width: 95px;
-            height: 95px;
-            background: url('../../../../../assets/images/company/zfx.png') no-repeat center;
-            background-size: 100% 100%;
-
-            .value-m {
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                font-family: 'douyuFont';
-                font-size: 14px;
-                color: #3df6ff;
-            }
-
-            .label-m {
-                position: absolute;
-                bottom: 2px;
-                width: 100%;
-                font-size: 10px;
-                text-align: center;
-                color: #fff;
-            }
+        .value-m {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          font-family: 'douyuFont';
+          font-size: 14px;
+          color: #3df6ff;
         }
 
-        .right-modal {
-            width: calc(100% - 105px);
-            height: 95px;
-            margin-left: 10px;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-around;
-
-            .modal-zl {
-                height: 24px;
-                display: flex;
-                justify-content: space-between;
-
-                .left-zl {
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    width: calc(80% - 10px);
-                    padding: 0px 10px;
-                    margin-right: 10px;
-                    box-sizing: border-box;
-                    background-color: rgba(6, 57, 97, .3);
-
-                    .label-left {
-                        .pic {
-                            display: inline-block;
-                            width: 6px;
-                            height: 6px;
-                            border-radius: 50%;
-                            margin-right: 5px;
-
-                        }
-
-                        span {
-                            color: #ccd6df;
-                            font-size: 14px;
-                        }
-                    }
-
-                    .value-left {
-                        .text {
-                            font-family: 'douyuFont';
-                            font-size: 14px;
-                            margin-right: 5px;
-                        }
-
-                        span {
-                            font-size: 12px;
-                            color: #ccd6df;
-                        }
-                    }
-
-                }
-
-                &:nth-child(1) .left-zl .pic {
-                    background-color: #51cfff;
-                }
-
-                &:nth-child(2) .left-zl .pic {
-                    background-color: #ffb85b;
-                }
-
-                &:nth-child(3) .left-zl .pic {
-                    background-color: #a091ff;
-                }
-
-                &:nth-child(1) .left-zl .text {
-                    color: #51cfff;
-                }
-
-                &:nth-child(2) .left-zl .text {
-                    color: #ffb85b;
-                }
-
-                &:nth-child(3) .left-zl .text {
-                    color: #a091ff;
-                }
-
-
-                .right-zl {
-                    width: 20%;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    background-color: rgba(6, 57, 97, .3);
-
-                    .text {
-                        font-family: 'douyuFont';
-                        font-size: 14px;
-                    }
-
-                    span {
-                        margin-left: 5px;
-                    }
-                }
-
-                &:nth-child(1) .right-zl {
-                    color: #51cfff;
-                }
-
-                &:nth-child(2) .right-zl {
-                    color: #ffb85b;
-                }
-
-                &:nth-child(3) .right-zl {
-                    color: #a091ff;
-                }
-            }
+        .label-m {
+          position: absolute;
+          bottom: 2px;
+          width: 100%;
+          font-size: 10px;
+          text-align: center;
+          color: #fff;
         }
-    }
+      }
 
-    .modal-card2 {
-        position: absolute;
-        top: 231px;
-        left: 50%;
-        transform: translate(-50%, 0);
-        height: 50px;
-        width: 90%;
-        margin: 10px 0px;
-        padding: 0px 10px;
+      .right-modal {
+        width: calc(100% - 105px);
+        height: 95px;
+        margin-left: 10px;
         display: flex;
-        justify-content: space-between;
-        align-items: center;
-        box-sizing: border-box;
-        background: url('../../../../../assets/images/company/area3.png') no-repeat center;
-        background-size: 100% 100%;
+        flex-direction: column;
+        justify-content: space-around;
 
-        .modal-wind {
-            position: relative;
-            width: 50%;
-            height: 34px;
+        .modal-zl {
+          height: 24px;
+          display: flex;
+          justify-content: space-between;
 
-            .text {
-                position: absolute;
-                top: 50%;
-                left: 40px;
-                transform: translate(0, -50%);
-                color: #fff;
+          .left-zl {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: calc(80% - 10px);
+            padding: 0px 10px;
+            margin-right: 10px;
+            box-sizing: border-box;
+            background-color: rgba(6, 57, 97, 0.3);
+
+            .label-left {
+              .pic {
+                display: inline-block;
+                width: 6px;
+                height: 6px;
+                border-radius: 50%;
+                margin-right: 5px;
+              }
+
+              span {
+                color: #ccd6df;
                 font-size: 14px;
+              }
             }
 
-            .num {
-                position: absolute;
-                top: 50%;
-                right: 58px;
-                transform: translate(0, -50%);
-                color: #fff;
+            .value-left {
+              .text {
                 font-family: 'douyuFont';
                 font-size: 14px;
+                margin-right: 5px;
+              }
+
+              span {
+                font-size: 12px;
+                color: #ccd6df;
+              }
             }
+          }
 
-            .dw {
-                position: absolute;
-                top: 50%;
-                right: 12px;
-                transform: translate(0, -50%);
-                color: #fff;
+          &:nth-child(1) .left-zl .pic {
+            background-color: #51cfff;
+          }
 
-            }
+          &:nth-child(2) .left-zl .pic {
+            background-color: #ffb85b;
+          }
 
-            &:nth-child(1) {
-                background: url('../../../../../assets/images/company/green.png') no-repeat center;
-                background-size: 100% 100%;
-            }
+          &:nth-child(3) .left-zl .pic {
+            background-color: #a091ff;
+          }
 
-            &:nth-child(2) {
-                background: url('../../../../../assets/images/company/purple.png') no-repeat center;
-                background-size: 100% 100%;
-            }
+          &:nth-child(1) .left-zl .text {
+            color: #51cfff;
+          }
 
-            &:nth-child(1) .num {
-                color: #31fbcc;
-            }
+          &:nth-child(2) .left-zl .text {
+            color: #ffb85b;
+          }
 
-            &:nth-child(2) .num {
-                color: #97a3fa;
-            }
-        }
-    }
+          &:nth-child(3) .left-zl .text {
+            color: #a091ff;
+          }
 
-    .modal-card3 {
-        position: absolute;
-        top: 302px;
-        left: 50%;
-        transform: translate(-50%, 0);
-        height: 110px;
-        width: 90%;
-        padding: 0px 10px;
-        box-sizing: border-box;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        background: url('../../../../../assets/images/company/area3.png') no-repeat center;
-        background-size: 100% 100%;
+          .right-zl {
+            width: 20%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: rgba(6, 57, 97, 0.3);
 
-        .warn-left {
-            position: relative;
-            width: 206px;
-            height: 85px;
-            background: url('../../../../../assets/images/company/warn-left.png') no-repeat center;
-
-            .vent-l {
-                position: absolute;
-                top: 10px;
-                left: 0;
-                width: 80%;
-                display: flex;
-                justify-content: space-around;
+            .text {
+              font-family: 'douyuFont';
+              font-size: 14px;
             }
 
-            .gas-l {
-                position: absolute;
-                top: 52px;
-                left: 0;
-                width: 80%;
-                display: flex;
-                justify-content: space-around;
+            span {
+              margin-left: 5px;
             }
+          }
 
+          &:nth-child(1) .right-zl {
+            color: #51cfff;
+          }
+
+          &:nth-child(2) .right-zl {
+            color: #ffb85b;
+          }
+
+          &:nth-child(3) .right-zl {
+            color: #a091ff;
+          }
         }
+      }
+    }
 
-        .warn-c {
-            position: relative;
-            width: 90px;
-            height: 92px;
-            background: url('../../../../../assets/images/company/warn-center.png') no-repeat center;
-            .warn-icon{
-                position: absolute;
-                left: 50%;
-                top: 50%;
-                transform: translate(-50%,-85%);
-                width: 50px;
-                height: 50px;
-                background: url('../../../../../assets/images/company/icon1.png') no-repeat center;
-            }
+    .modal-card2 {
+      position: absolute;
+      top: 231px;
+      left: 50%;
+      transform: translate(-50%, 0);
+      height: 50px;
+      width: 90%;
+      margin: 10px 0px;
+      padding: 0px 10px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      box-sizing: border-box;
+      background: url('../../../../../assets/images/company/area3.png') no-repeat center;
+      background-size: 100% 100%;
+
+      .modal-wind {
+        position: relative;
+        width: 50%;
+        height: 34px;
+
+        .text {
+          position: absolute;
+          top: 50%;
+          left: 40px;
+          transform: translate(0, -50%);
+          color: #fff;
+          font-size: 14px;
         }
 
-        .warn-right {
-            position: relative;
-            width: 206px;
-            height: 85px;
-            background: url('../../../../../assets/images/company/warn-right.png') no-repeat center;
-
-            .fire-r {
-                position: absolute;
-                top: 10px;
-                right: 0;
-                width: 80%;
-                display: flex;
-                justify-content: space-around;
-            }
+        .num {
+          position: absolute;
+          top: 50%;
+          right: 58px;
+          transform: translate(0, -50%);
+          color: #fff;
+          font-family: 'douyuFont';
+          font-size: 14px;
+        }
 
-            .dust-r {
-                position: absolute;
-                top: 52px;
-                right: 0;
-                width: 80%;
-                display: flex;
-                justify-content: space-around;
-            }
+        .dw {
+          position: absolute;
+          top: 50%;
+          right: 12px;
+          transform: translate(0, -50%);
+          color: #fff;
         }
 
-        .warn-label {
-            font-family: 'douyuFont';
-            font-size: 14px;
-            color: #31fbcc;
-            line-height: 27px;
+        &:nth-child(1) {
+          background: url('../../../../../assets/images/company/green.png') no-repeat center;
+          background-size: 100% 100%;
         }
 
-        .warn-value {
-            color: #fff;
-            font-size: 14px;
+        &:nth-child(2) {
+          background: url('../../../../../assets/images/company/purple.png') no-repeat center;
+          background-size: 100% 100%;
         }
+
+        &:nth-child(1) .num {
+          color: #31fbcc;
+        }
+
+        &:nth-child(2) .num {
+          color: #97a3fa;
+        }
+      }
     }
 
+    .modal-card3 {
+      position: absolute;
+      top: 302px;
+      left: 50%;
+      transform: translate(-50%, 0);
+      height: 110px;
+      width: 90%;
+      padding: 0px 10px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background: url('../../../../../assets/images/company/area3.png') no-repeat center;
+      background-size: 100% 100%;
+
+      .warn-left {
+        position: relative;
+        width: 206px;
+        height: 85px;
+        background: url('../../../../../assets/images/company/warn-left.png') no-repeat center;
+
+        .vent-l {
+          position: absolute;
+          top: 10px;
+          left: 0;
+          width: 80%;
+          display: flex;
+          justify-content: space-around;
+        }
+
+        .gas-l {
+          position: absolute;
+          top: 52px;
+          left: 0;
+          width: 80%;
+          display: flex;
+          justify-content: space-around;
+        }
+      }
+
+      .warn-c {
+        position: relative;
+        width: 90px;
+        height: 92px;
+        background: url('../../../../../assets/images/company/warn-center.png') no-repeat center;
+        .warn-icon {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -85%);
+          width: 50px;
+          height: 50px;
+          background: url('../../../../../assets/images/company/icon1.png') no-repeat center;
+        }
+      }
+
+      .warn-right {
+        position: relative;
+        width: 206px;
+        height: 85px;
+        background: url('../../../../../assets/images/company/warn-right.png') no-repeat center;
+
+        .fire-r {
+          position: absolute;
+          top: 10px;
+          right: 0;
+          width: 80%;
+          display: flex;
+          justify-content: space-around;
+        }
 
-}
+        .dust-r {
+          position: absolute;
+          top: 52px;
+          right: 0;
+          width: 80%;
+          display: flex;
+          justify-content: space-around;
+        }
+      }
+
+      .warn-label {
+        font-family: 'douyuFont';
+        font-size: 14px;
+        color: #31fbcc;
+        line-height: 27px;
+      }
+
+      .warn-value {
+        color: #fff;
+        font-size: 14px;
+      }
+    }
+  }
 </style>
-    

src/views/vent/home/clique/index.vue

@@ -1,190 +1,190 @@
 <template>
   <div class="company-home">
-    <div class="top-bg"></div>
-    <div class="company-content">
+    <div class="top-bg">
       <div class="main-title">{{ mainTitle }}</div>
+    </div>
+    <mapComponent @open-detail="showDetail" />
+    <div class="company-content">
       <div class="area-content">
         <div class="left-area">
           <!-- 矿井通风状态监测 -->
           <div class="area-card">
-              <mineWind></mineWind>
+            <mineWind />
           </div>
           <!-- 一通三防风险分析与预警 -->
           <div class="area-card1">
-            <riskWarn></riskWarn>
+            <riskWarn />
           </div>
         </div>
         <div class="center-area">
           <!-- 榆家梁矿 -->
-          <div class="area-card2" v-if="isShowDialog">
-            <dialogModal @closeDialog="closeDialog"></dialogModal>
-          </div>
+          <!-- <div class="area-card2">
+            
+          </div> -->
           <!-- 文件共享中心 -->
           <div class="area-card3">
-            <fileShare></fileShare>
+            <fileShare />
           </div>
         </div>
         <div class="right-area">
           <!-- 关键场景通防综合监测 -->
           <div class="area-card">
-            <sceneKey></sceneKey>
+            <sceneKey />
           </div>
           <!-- 通风巷道长度统计 -->
           <div class="area-card1">
-            <windRoad></windRoad>
+            <windRoad />
           </div>
         </div>
       </div>
-
-
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { ref } from 'vue'
-import mineWind from './components/mine-wind.vue'
-import riskWarn from './components/risk-warn.vue'
-import dialogModal from './components/dialog-modal.vue'
-import fileShare from './components/file-share.vue'
-import windRoad from './components/wind-road.vue'
-import sceneKey from './components/scene-key.vue'
-
-let mainTitle = ref('国家能源神东煤炭集团')
-
-let isShowDialog=ref(true)
-
-function closeDialog(data){
-  isShowDialog.value=data
-}
+  import { ref } from 'vue';
+  import mineWind from './components/mine-wind.vue';
+  import riskWarn from './components/risk-warn.vue';
+  import fileShare from './components/file-share.vue';
+  import windRoad from './components/wind-road.vue';
+  import sceneKey from './components/scene-key.vue';
+  import mapComponent from './components/3Dmap/index.vue';
+
+  let mainTitle = ref('国家能源神东煤炭集团');
+  function showDetail(code) {
+    if (code) {
+      // isShowDialog.value = true;
+    }
+  }
 </script>
 <style lang="less" scoped>
-@font-face {
-  font-family: 'douyuFont';
-  src: url('../../../../assets/font/douyuFont.otf');
-}
-
-// @font-face {
-//   font-family: 'yjsz';
-//   src: url('../../../../assets/font/yjsz.TTF');
-// }
-.company-home {
-  width: 100%;
-  height: 100%;
-  position: relative;
-
-  .top-bg {
-    width: 100%;
-    height: 97px;
-    background: url('../../../../assets/images/company/top-bg.png') no-repeat center;
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
   }
 
-  .company-content {
-    position: absolute;
-    left: 0;
-    top: 0;
+  // @font-face {
+  //   font-family: 'yjsz';
+  //   src: url('../../../../assets/font/yjsz.TTF');
+  // }
+  .company-home {
     width: 100%;
     height: 100%;
-    background: url('../../../../assets/images/company/content-bg.png') no-repeat;
-    background-size: 100% 100%;
+    position: relative;
 
-    .main-title {
-      height: 96px;
-      color: #fff;
-      font-family: 'douyuFont';
-      font-size: 20px;
-      letter-spacing: 2px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    .area-content {
-      position: absolute;
-      top: 45px;
+    .top-bg {
       width: 100%;
-      height: calc(100% - 45px);
-      padding: 0px 20px 20px 20px;
-      box-sizing: border-box;
-      display: flex;
-      justify-content: space-between;
-
-      .left-area {
-        width: 23%;
-        height: 100%;
-        margin-right: 15px;
+      height: 97px;
+      background: url('../../../../assets/images/company/top-bg.png') no-repeat center;
+      position: absolute;
+      z-index: 1;
+      .main-title {
+        height: 96px;
+        color: #fff;
+        font-family: 'douyuFont';
+        font-size: 20px;
+        letter-spacing: 2px;
         display: flex;
-        flex-direction: column;
-        justify-content: space-between;
+        justify-content: center;
         align-items: center;
-
-        .area-card {
-          width: 100%;
-          height: calc(60% - 15px);
-          margin-bottom: 15px;
-          background: url('../../../../assets/images/company/area-card.png') no-repeat;
-          background-size: 100% 100%;
-        }
-
-        .area-card1 {
-          width: 100%;
-          height: 40%;
-          background: url('../../../../assets/images/company/area-card1.png') no-repeat;
-          background-size: 100% 100%;
-        }
-
-      }
-
-      .center-area {
-        width: calc(54% - 30px);
-        height: 100%;
-        position: relative;
-
-        .area-card2 {
-          position: absolute;
-          right: 0;
-          top: 62px;
-          width: 568px;
-          height: 437px;
-          background: url('../../../../assets/images/company/area-card2.png') no-repeat;
-          background-size: 100% 100%;
-        }
-
-        .area-card3 {
-          position: absolute;
-          right: 0;
-          bottom: 0px;
-          width: 100%;
-          height: 269px;
-          background: url('../../../../assets/images/company/area-card3.png') no-repeat;
-          background-size: 100% 100%;
-        }
       }
+    }
 
-      .right-area {
-        width: 23%;
-        height: 100%;
-        margin-left: 15px;
+    .company-content {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background: url('../../../../assets/images/company/content-bg.png') no-repeat;
+      background-size: 100% 100%;
+      pointer-events: none;
+
+      .area-content {
+        position: absolute;
+        top: 45px;
+        width: 100%;
+        height: calc(100% - 45px);
+        padding: 0px 20px 20px 20px;
+        box-sizing: border-box;
         display: flex;
-        flex-direction: column;
         justify-content: space-between;
-        align-items: center;
+        // pointer-events: none;
+        .left-area {
+          width: 23%;
+          height: 100%;
+          margin-right: 15px;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          align-items: center;
+          // pointer-events: auto;
+          .area-card {
+            width: 100%;
+            height: calc(60% - 15px);
+            margin-bottom: 15px;
+            background: url('../../../../assets/images/company/area-card.png') no-repeat;
+            background-size: 100% 100%;
+          }
+
+          .area-card1 {
+            width: 100%;
+            height: 40%;
+            background: url('../../../../assets/images/company/area-card1.png') no-repeat;
+            background-size: 100% 100%;
+          }
+        }
 
-        .area-card {
-          width: 100%;
-          height: calc(60% - 15px);
-          margin-bottom: 15px;
-          background: url('../../../../assets/images/company/area-card.png') no-repeat;
-          background-size: 100% 100%;
+        .center-area {
+          width: calc(54% - 30px);
+          height: 100%;
+          position: relative;
+          .area-card2 {
+            position: absolute;
+            right: 0;
+            top: 62px;
+            width: 568px;
+            height: 437px;
+            background: url('../../../../assets/images/company/area-card2.png') no-repeat;
+            background-size: 100% 100%;
+            // pointer-events: auto;
+          }
+
+          .area-card3 {
+            position: absolute;
+            right: 0;
+            bottom: 0px;
+            width: 100%;
+            height: 269px;
+            background: url('../../../../assets/images/company/area-card3.png') no-repeat;
+            background-size: 100% 100%;
+          }
         }
 
-        .area-card1 {
-          width: 100%;
-          height: 40%;
-          background: url('../../../../assets/images/company/area-card1.png') no-repeat;
-          background-size: 100% 100%;
+        .right-area {
+          width: 23%;
+          height: 100%;
+          margin-left: 15px;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          align-items: center;
+          // pointer-events: auto;
+          .area-card {
+            width: 100%;
+            height: calc(60% - 15px);
+            margin-bottom: 15px;
+            background: url('../../../../assets/images/company/area-card.png') no-repeat;
+            background-size: 100% 100%;
+          }
+
+          .area-card1 {
+            width: 100%;
+            height: 40%;
+            background: url('../../../../assets/images/company/area-card1.png') no-repeat;
+            background-size: 100% 100%;
+          }
         }
       }
     }
   }
-
-}</style>
+</style>

src/views/vent/home/colliery/components/device-warn.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="deviceWarn">
-    <div class="title-top" @click="getDetail">设备预警</div>
+    <div class="title-top" @click="getDetail">预警管控系统</div>
     <div class="toggle-search">
       <div class="status-yx">
         <div class="now-name">

src/views/vent/home/colliery/components/fan-monitor.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="fanMonitor">
-    <div class="title-top" @click="getDetail">局部通风系统</div>
+    <div class="title-top" @click="getDetail">局部通风机监测与控制系统</div>
     <div class="toggle-search">
       <i class="icon-search">
         <SvgIcon class="icon" size="14" name="toggle" />

src/views/vent/home/colliery/components/main-monitor.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="mainMonitor">
-    <div class="title-top" @click="getDetail">主通风系统</div>
+    <div class="title-top" @click="getDetail">主通风机监测与控制系统</div>
     <div class="toggle-search">
       <i class="icon-search">
         <SvgIcon class="icon" size="14" name="toggle" />

src/views/vent/home/colliery/components/wind-device.vue

@@ -1,18 +1,24 @@
 <template>
   <div class="windDevice">
-    <div class="title-top" @click="getDetail">通风设施远程控制</div>
+    <div class="title-top" @click="getDetail">通防设施远程控制</div>
     <div class="device-contents">
       <div class="icons-box" @mouseleave="resetScroll">
-        <div class="icon-item" v-for="(item, key) in iconsMonitor" :key="key">
-          <div class="wrapper">
-            {{ item.text }}
-          </div>
-          <div></div>
-          <img :src="item.url" :alt="item.text" />
-          <div
+        <template v-for="(item, key) in iconsMonitor" :key="key">
+          <div class="icon-item" v-if="item.text">
+            <div
+              class="wrapper"
+              :class="{
+                'level-warning': item['count'] > 0,
+              }"
+            >
+              {{ item.text }}
+            </div>
+            <div></div>
+            <img :src="item.url" :alt="item.text" />
+            <!-- <div
             class="level-text"
             :class="{
-                'level-text-0': item.level == 0,
+              'level-text-0': item.level == 0,
               'level-text-1': item.level == 101,
               'level-text-2': item.level == 102,
               'level-text-3': item.level == 103,
@@ -27,97 +33,109 @@
                 ? '较低风险'
                 : item.level == 102
                 ? '低风险'
-                : item.level ==103
+                : item.level == 103
                 ? '中风险'
                 : item.level == 104
                 ? '高风险'
-                : item.level==201 ? '报警' : '未连接'
-            }}</div
-          >
-        </div>
+                : item.level == 201
+                ? '报警'
+                : item.level > 1000
+                ? '网络断开'
+                : '未连接'
+            }}</div> -->
+            <div
+              class="level-text"
+              :class="{
+                'level-text-0': item['count'] == 0,
+                'level-text-5': item['count'] > 0,
+              }"
+              >{{ item['count'] == 0 ? '正常' : `${item['count']}` }}</div
+            >
+          </div>
+        </template>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive,defineProps, watch } from 'vue';
+  import { ref, reactive, defineProps, watch } from 'vue';
   import { getAssetURL } from '/@/utils/ui';
   let props = defineProps({
     devicedata: Object,
   });
-  const emit = defineEmits(['goDetail'])
+  const emit = defineEmits(['goDetail']);
   let iconsMonitor = reactive({
-    'fanmain': {
+    fanmain: {
       url: getAssetURL('home-container/device/zhushan.png'),
       level: 0,
-      text: '主风机',
+      text: '',
     },
-    'fanlocal': {
+    fanlocal: {
       url: getAssetURL('home-container/device/js.png'),
       level: 0,
-      text: '局部风机',
+      text: '',
     },
-    'gate': {
+    gate: {
       url: getAssetURL('home-container/device/fm.png'),
       level: 0,
-      text: '风门',
+      text: '',
     },
-    'window': {
+    window: {
       url: getAssetURL('home-container/device/fc.png'),
       level: 0,
-      text: '风窗',
+      text: '',
     },
-    'windrect': {
+    windrect: {
       url: getAssetURL('home-container/device/cf.png'),
       level: 0,
-      text: '测风装置',
+      text: '',
+    },
+    forcFan: {
+      url: getAssetURL('home-container/device/yafeng.png'),
+      level: 1,
+      text: '',
+    },
+    spray: {
+      url: getAssetURL('home-container/device/penlin.png'),
+      level: 1,
+      text: '',
+    },
+    dustdev: {
+      url: getAssetURL('home-container/device/penfen.png'),
+      level: 1,
+      text: '',
+    },
+    nitrogen: {
+      url: getAssetURL('home-container/device/zhudan.png'),
+      level: 1,
+      text: '',
+    },
+    pulping: {
+      url: getAssetURL('home-container/device/zhujiang.png'),
+      level: 1,
+      text: '',
+    },
+    atomizing: {
+      url: getAssetURL('home-container/device/pw.png'),
+      level: 1,
+      text: '',
+    },
+    dedustefan: {
+      url: getAssetURL('home-container/device/ccq.png'),
+      level: 1,
+      text: '',
+    },
+    pump: {
+      url: getAssetURL('home-container/device/wasibeng.png'),
+      level: 1,
+      text: '',
+    },
+    gas: {
+      url: getAssetURL('home-container/device/js.png'),
+      level: 1,
+      text: '',
     },
-    // 6: {
-    //   url: getAssetURL('home-container/device/yafeng.png'),
-    //   level: 1,
-    //   text: '压风装置',
-    // },
-    // 7: {
-    //   url: getAssetURL('home-container/device/penlin.png'),
-    //   level: 1,
-    //   text: '喷淋',
-    // },
-    // 8: {
-    //   url: getAssetURL('home-container/device/penfen.png'),
-    //   level: 1,
-    //   text: '喷粉',
-    // },
-    // 9: {
-    //   url: getAssetURL('home-container/device/zhudan.png'),
-    //   level: 1,
-    //   text: '注氮',
-    // },
-    // 10: {
-    //   url: getAssetURL('home-container/device/zhujiang.png'),
-    //   level: 1,
-    //   text: '注浆',
-    // },
-    // 11: {
-    //   url: getAssetURL('home-container/device/pw.png'),
-    //   level: 1,
-    //   text: '跟机喷雾',
-    // },
-    // 12: {
-    //   url: getAssetURL('home-container/device/ccq.png'),
-    //   level: 1,
-    //   text: '除尘器',
-    // },
-    // 13: {
-    //   url: getAssetURL('home-container/device/wasibeng.png'),
-    //   level: 1,
-    //   text: '瓦斯泵',
-    // },
-    // 14: {
-    //   url: getAssetURL('home-container/device/js.png'),
-    //   level: 1,
-    //   text: '瓦斯抽采管路',
-    // },
   });
 
   const resetScroll = (e: Event) => {
@@ -132,9 +150,11 @@
   watch(
     () => props.devicedata,
     (val) => {
-     Object.keys(iconsMonitor).forEach(el=>{
-      iconsMonitor[el].level=val[el].maxLevel
-     })
+      Object.keys(iconsMonitor).forEach((el) => {
+        iconsMonitor[el].level = val[el].maxLevel;
+        iconsMonitor[el]['text'] = val[el].name;
+        iconsMonitor[el]['count'] = val[el].count;
+      });
     },
     {
       deep: true,
@@ -173,14 +193,15 @@
       padding: 10px 15px;
       box-sizing: border-box;
       width: 100%;
+      overflow-y: auto;
       .icons-box {
         display: flex;
         flex-wrap: wrap;
         // justify-content: space-around; lxh
         justify-content: space-between;
         height: 100%;
-        overflow-y: hidden;
-        // align-items: start ;    
+        // overflow-y: hidden;
+        // align-items: start ;
         // &:hover {
         //   overflow-y: auto;
         //   & > .icon-item {
@@ -205,42 +226,42 @@
             font-size: 12px;
           }
 
+          .level-text-0 {
+            color: rgb(145, 230, 9);
+            text-shadow: 2px 2px 4px #001c22;
+          }
 
-  .level-text-0 {
-          color: rgb(145, 230, 9);
-          text-shadow: 2px 2px 4px #001c22;
-        }
-
-        .level-text-1 {
-          color: rgb(0, 242, 255);
-          text-shadow: 2px 2px 4px #001c22;
-        }
+          .level-text-1 {
+            color: rgb(0, 242, 255);
+            text-shadow: 2px 2px 4px #001c22;
+          }
 
-        .level-text-2 {
-          color: #ffff35;
-          text-shadow: 2px 2px 4px #313100;
-        }
+          .level-text-2 {
+            color: #ffff35;
+            text-shadow: 2px 2px 4px #313100;
+          }
 
-        .level-text-3 {
-          color: #ffbe69;
-          text-shadow: 2px 2px 4px #271600;
-        }
+          .level-text-3 {
+            color: #ffbe69;
+            text-shadow: 2px 2px 4px #271600;
+          }
 
-        .level-text-4 {
-          color: #ff6f00;
-          // color: #09caff;
-          text-shadow: 2px 2px 4px #060200;
-        }
+          .level-text-4 {
+            color: #ff6f00;
+            // color: #09caff;
+            text-shadow: 2px 2px 4px #060200;
+          }
 
-        .level-text-5 {
-          color: #ff0000;
-          text-shadow: 2px 2px 4px #200000;
-        }
+          .level-text-5 {
+            width: 35px;
+            color: #ff0000;
+            text-shadow: 2px 2px 4px #200000;
+          }
 
-        .level-text-6 {
-          color: #bbb;
-          text-shadow: 2px 2px 4px #001c22;
-        }
+          .level-text-6 {
+            color: #bbb;
+            text-shadow: 2px 2px 4px #001c22;
+          }
 
           img {
             width: 208px;
@@ -270,6 +291,11 @@
           text-align: center;
           letter-spacing: 1px;
         }
+        .level-warning {
+          font-weight: 600;
+          color: #ff2e2e;
+          text-shadow: 2px 2px 4px #000000;
+        }
       }
     }
   }

src/views/vent/home/colliery/components/wind-line.vue

@@ -1,12 +1,17 @@
 <template>
   <div class="windLine">
-    <div class="title-top" @click="getDetail">关键路线通风</div>
+    <div class="title-top" @click="getDetail">关键通风路线智能管控</div>
     <div class="toggle-search">
       <i class="icon-search">
         <SvgIcon class="icon" size="14" name="toggle" />
       </i>
-      <a-select v-model:value="searchValue" style="width: 180px; margin-right: 10px" :options="lineTypeList"
-        aria-placeholder="请选择" @change="changeSelect" />
+      <a-select
+        v-model:value="searchValue"
+        style="width: 180px; margin-right: 10px"
+        :options="lineTypeList"
+        aria-placeholder="请选择"
+        @change="changeSelect"
+      />
     </div>
     <div class="line-echart">
       <div class="line" ref="line"></div>
@@ -40,412 +45,418 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
-import { SvgIcon } from '/@/components/Icon';
-import * as echarts from 'echarts';
-import { formatNum } from '/@/utils/ventutil'
-
-const emit = defineEmits(['goDetail'])
-
-let props = defineProps({
-  lineList: Array,
-});
-
-//获取dom节点
-let line = ref<any>();
-let lineData = reactive<any[]>([]);
-let searchValue = ref('');
-const lineTypeList = reactive<any[]>([]);
-
-let echartData = reactive<any[]>([
-  { name: '进风区', value: 0 },
-  { name: '用风区', value: 0 },
-  { name: '回风区', value: 0 },
-]);
-let xData = reactive<any[]>([]);
-let yData = reactive<any[]>([]);
-let percentE = ref<any>(0);
-let percentF = ref<any>(0);
-let percentT = ref<any>(0);
-
-let tabList = reactive<any[]>([
-  { name: '总风量(m³/min)', val: 0 },
-  { name: '总阻力(Pa)', val: 0 },
-  { name: '等积孔(m²)', val: 0 },
-]);
-//跳转详情
-function getDetail() {
-  emit('goDetail', 'majorpath')
-}
-//选项切换
-function changeSelect(val) {
-  searchValue.value = val;
-  const selectData = lineData.find(item => item['deviceID'] == val)
-  if(selectData){
-    echartData[0].value = (selectData.majorpath['drag_1'] || Math.floor(Math.random() * (629 - 620 + 1)) + 620).toFixed(2);
-    echartData[1].value = (selectData.majorpath['drag_2'] || Math.floor(Math.random() * (949 - 940 + 1)) + 940).toFixed(2);
-    echartData[2].value = (selectData.majorpath['drag_3'] || Math.floor(Math.random() * (855 - 850 + 1)) + 850).toFixed(2);
-    tabList[0].val = ((selectData.majorpath['m3_total']) || (Math.floor(Math.random() * (10700 - 10600 + 1)) + 10600)).toFixed(2);
-    tabList[1].val = (selectData.majorpath['drag_total'] || Math.floor(Math.random() * (2433 - 2423 + 1)) + 2423).toFixed(2);
-    tabList[2].val = formatNum(1.19 * Number(tabList[0].val) / 60 / Math.sqrt(Number(tabList[1].val)));
-    percentF.value = formatNum((Number(echartData[0].value) / (Number(echartData[0].value) + Number(echartData[1].value) + Number(echartData[2].value))) * 100);
-    percentT.value = formatNum((Number(echartData[1].value) / (Number(echartData[0].value) + Number(echartData[1].value) + Number(echartData[2].value))) * 100)
-    percentE.value = formatNum((echartData[2].value / (Number(echartData[0].value) + Number(echartData[1].value) + Number(echartData[2].value))) * 100)
+  import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import * as echarts from 'echarts';
+  import { formatNum } from '/@/utils/ventutil';
+
+  const emit = defineEmits(['goDetail']);
+
+  let props = defineProps({
+    lineList: Array,
+  });
+
+  //获取dom节点
+  let line = ref<any>();
+  let lineData = reactive<any[]>([]);
+  let searchValue = ref('');
+  const lineTypeList = reactive<any[]>([]);
+
+  let echartData = reactive<any[]>([
+    { name: '进风区', value: 0 },
+    { name: '用风区', value: 0 },
+    { name: '回风区', value: 0 },
+  ]);
+  let xData = reactive<any[]>([]);
+  let yData = reactive<any[]>([]);
+  let percentE = ref<any>(0);
+  let percentF = ref<any>(0);
+  let percentT = ref<any>(0);
+
+  let tabList = reactive<any[]>([
+    { name: '总风量(m³/min)', val: 0 },
+    { name: '总阻力(Pa)', val: 0 },
+    { name: '等积孔(m²)', val: 0 },
+  ]);
+  //跳转详情
+  function getDetail() {
+    emit('goDetail', 'majorpath');
   }
-  getOption();
-}
-
-function getOption() {
-  nextTick(() => {
-    function deepCopy(obj) {
-      if (typeof obj !== 'object') {
-        return obj;
-      }
-      var newobj = {};
-      for (var attr in obj) {
-        newobj[attr] = obj[attr];
-      }
-      return newobj;
+  //选项切换
+  function changeSelect(val) {
+    searchValue.value = val;
+    const selectData = lineData.find((item) => item['deviceID'] == val);
+    if (selectData) {
+      echartData[0].value = (selectData.majorpath['drag_1'] || Math.floor(Math.random() * (629 - 620 + 1)) + 620).toFixed(2);
+      echartData[1].value = (selectData.majorpath['drag_2'] || Math.floor(Math.random() * (949 - 940 + 1)) + 940).toFixed(2);
+      echartData[2].value = (selectData.majorpath['drag_3'] || Math.floor(Math.random() * (855 - 850 + 1)) + 850).toFixed(2);
+      tabList[0].val = (selectData.majorpath['m3_total'] || Math.floor(Math.random() * (10700 - 10600 + 1)) + 10600).toFixed(2);
+      tabList[1].val = (selectData.majorpath['drag_total'] || Math.floor(Math.random() * (2433 - 2423 + 1)) + 2423).toFixed(2);
+      tabList[2].val = formatNum((1.19 * Number(tabList[0].val)) / 60 / Math.sqrt(Number(tabList[1].val)));
+      percentF.value = formatNum(
+        (Number(echartData[0].value) / (Number(echartData[0].value) + Number(echartData[1].value) + Number(echartData[2].value))) * 100
+      );
+      percentT.value = formatNum(
+        (Number(echartData[1].value) / (Number(echartData[0].value) + Number(echartData[1].value) + Number(echartData[2].value))) * 100
+      );
+      percentE.value = formatNum(
+        (echartData[2].value / (Number(echartData[0].value) + Number(echartData[1].value) + Number(echartData[2].value))) * 100
+      );
     }
+    getOption();
+  }
 
-    echartData.map((a, b) => {
-      xData.push(a.name);
-      yData.push(a.value);
-    });
-    var startColor = ['rgba(255, 224, 28,.6)', 'rgba(31, 248, 251,.6)', 'rgba(154, 255, 168,.6)'];
-    var borderStartColor = ['#ffe01c', '#1ff8fb', '#9affa8'];
-    var RealData = [];
-    var borderData = [];
-    echartData.map((item, index) => {
-      var newobj = deepCopy(item);
-      var newobj1 = deepCopy(item);
-      RealData.push(newobj);
-      borderData.push(newobj1);
-    });
-    RealData.map((item, index) => {
-      item.itemStyle = {
-        normal: {
-          color: startColor[index],
-        },
-      };
-    });
-    borderData.map((item, index) => {
-      item.itemStyle = {
-        normal: {
-          color: borderStartColor[index],
-        },
-      };
-    });
-    const myChart = echarts.init(line.value);
-
-    let option = {
-      legend: [
-        {
-          // orient: 'vertical',
-          x: '50%',
-          y: '12%',
-          itemWidth: 10,
-          itemHeight: 10,
-          align: 'left',
-          textStyle: {
-            fontSize: 14,
-            color: '#b3b8cc',
-          },
-          data: ['进风区'],
-        },
-        {
-          // orient: 'vertical',
-          x: '50%',
-          y: '42%',
-          itemWidth: 10,
-          itemHeight: 10,
-          align: 'left',
-          textStyle: {
-            fontSize: 14,
-            color: '#b3b8cc',
+  function getOption() {
+    nextTick(() => {
+      function deepCopy(obj) {
+        if (typeof obj !== 'object') {
+          return obj;
+        }
+        var newobj = {};
+        for (var attr in obj) {
+          newobj[attr] = obj[attr];
+        }
+        return newobj;
+      }
+
+      echartData.map((a, b) => {
+        xData.push(a.name);
+        yData.push(a.value);
+      });
+      var startColor = ['rgba(255, 224, 28,.6)', 'rgba(31, 248, 251,.6)', 'rgba(154, 255, 168,.6)'];
+      var borderStartColor = ['#ffe01c', '#1ff8fb', '#9affa8'];
+      var RealData = [];
+      var borderData = [];
+      echartData.map((item, index) => {
+        var newobj = deepCopy(item);
+        var newobj1 = deepCopy(item);
+        RealData.push(newobj);
+        borderData.push(newobj1);
+      });
+      RealData.map((item, index) => {
+        item.itemStyle = {
+          normal: {
+            color: startColor[index],
           },
-          data: ['用风区'],
-        },
-        {
-          // orient: 'vertical',
-          x: '50%',
-          y: '70%',
-          itemWidth: 10,
-          itemHeight: 10,
-          align: 'left',
-          textStyle: {
-            fontSize: 14,
-            color: '#b3b8cc',
+        };
+      });
+      borderData.map((item, index) => {
+        item.itemStyle = {
+          normal: {
+            color: borderStartColor[index],
           },
-          data: ['回风区'],
-        },
-      ],
-      tooltip: {
-        formatter: '{b}:{c}',
-      },
-      series: [
-        // 主要展示层的
-        {
-          radius: ['40%', '80%'],
-          center: ['25%', '50%'],
-          type: 'pie',
-          z: 10,
-          label: {
-            normal: {
-              show: false,
-            },
-            emphasis: {
-              show: false,
+        };
+      });
+      const myChart = echarts.init(line.value);
+
+      let option = {
+        legend: [
+          {
+            // orient: 'vertical',
+            x: '50%',
+            y: '12%',
+            itemWidth: 10,
+            itemHeight: 10,
+            align: 'left',
+            textStyle: {
+              fontSize: 14,
+              color: '#b3b8cc',
             },
+            data: ['进风区'],
           },
-          labelLine: {
-            normal: {
-              show: false,
-            },
-            emphasis: {
-              show: false,
+          {
+            // orient: 'vertical',
+            x: '50%',
+            y: '42%',
+            itemWidth: 10,
+            itemHeight: 10,
+            align: 'left',
+            textStyle: {
+              fontSize: 14,
+              color: '#b3b8cc',
             },
+            data: ['用风区'],
           },
-          itemStyle: {
-            normal: {
-              borderWidth: 5,
-              borderColor: 'rgba(1, 57, 134,1)',
+          {
+            // orient: 'vertical',
+            x: '50%',
+            y: '70%',
+            itemWidth: 10,
+            itemHeight: 10,
+            align: 'left',
+            textStyle: {
+              fontSize: 14,
+              color: '#b3b8cc',
             },
+            data: ['回风区'],
           },
-          data: RealData,
+        ],
+        tooltip: {
+          formatter: '{b}:{c}',
         },
-        // 边框的设置
-        {
-          radius: ['45%', '52%'],
-          center: ['25%', '50%'],
-          type: 'pie',
-          z: 5,
-          label: {
-            normal: {
-              show: false,
+        series: [
+          // 主要展示层的
+          {
+            radius: ['40%', '80%'],
+            center: ['25%', '50%'],
+            type: 'pie',
+            z: 10,
+            label: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+              },
             },
-            emphasis: {
-              show: false,
+            labelLine: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+              },
+            },
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                borderColor: 'rgba(1, 57, 134,1)',
+              },
             },
+            data: RealData,
           },
-          labelLine: {
-            normal: {
-              show: false,
+          // 边框的设置
+          {
+            radius: ['45%', '52%'],
+            center: ['25%', '50%'],
+            type: 'pie',
+            z: 5,
+            label: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+              },
             },
-            emphasis: {
+
+            animation: false,
+            tooltip: {
               show: false,
             },
+            data: borderData,
           },
+        ],
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
+    });
+  }
 
-          animation: false,
-          tooltip: {
-            show: false,
-          },
-          data: borderData,
-        },
-      ],
-    };
-    myChart.setOption(option);
-    window.onresize = function () {
-      myChart.resize();
-    };
-  });
-}
-
-watch(
-  () => props.lineList,
-  (val) => {
-    lineData = val;
-    lineTypeList.length = 0;
-    lineData.forEach((el) => {
-      lineTypeList.push({
-        label: el.deviceName,
-        value: el.deviceID,
+  watch(
+    () => props.lineList,
+    (val) => {
+      lineData = val;
+      lineTypeList.length = 0;
+      lineData.forEach((el) => {
+        lineTypeList.push({
+          label: el.deviceName,
+          value: el.deviceID,
+        });
       });
-    });
 
-    if (searchValue.value) {
-      changeSelect(searchValue.value);
-    } else {
-      searchValue.value = lineTypeList[0].value;
-      changeSelect(searchValue.value);
+      if (searchValue.value) {
+        changeSelect(searchValue.value);
+      } else {
+        searchValue.value = lineTypeList[0].value;
+        changeSelect(searchValue.value);
+      }
+    },
+    {
+      deep: true,
     }
-  },
-  {
-    deep: true,
-  }
-);
+  );
 
-onMounted(() => { });
+  onMounted(() => {});
 </script>
 
 <style lang="less" scoped>
-@font-face {
-  font-family: 'douyuFont';
-  src: url('../../../../../assets/font/douyuFont.otf');
-}
-
-.windLine {
-  width: 100%;
-  height: 100%;
-  position: relative;
-
-  .title-top {
-    position: absolute;
-    top: 9px;
-    left: 46px;
-    color: #fff;
-    font-size: 16px;
+  @font-face {
     font-family: 'douyuFont';
-    cursor: pointer;
-
-    &:hover {
-      color: #66ffff;
-    }
+    src: url('../../../../../assets/font/douyuFont.otf');
   }
 
-  .toggle-search {
-    position: absolute;
-    left: 9px;
-    top: 37px;
-    display: flex;
-
-    .icon-search {
-      position: absolute;
-      top: 50%;
-      left: 5px;
-      transform: translate(0%, -50%);
-    }
-  }
-
-  .line-echart {
-    position: absolute;
-    top: 66px;
-    left: 0;
+  .windLine {
     width: 100%;
-    height: 120px;
+    height: 100%;
+    position: relative;
 
-    .line {
-      width: 100%;
-      height: 100%;
+    .title-top {
+      position: absolute;
+      top: 9px;
+      left: 46px;
+      color: #fff;
+      font-size: 16px;
+      font-family: 'douyuFont';
+      cursor: pointer;
+
+      &:hover {
+        color: #66ffff;
+      }
     }
 
-    .pic {
-      height: 100%;
+    .toggle-search {
       position: absolute;
-      left: 45%;
-      top: 0;
+      left: 9px;
+      top: 37px;
       display: flex;
-      align-items: center;
 
-      img {
-        height: 60%;
+      .icon-search {
+        position: absolute;
+        top: 50%;
+        left: 5px;
+        transform: translate(0%, -50%);
       }
     }
 
-    .percent {
+    .line-echart {
       position: absolute;
-      left: 75%;
-      top: 0;
-      width: 45px;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      // justify-content: space-between;
-      align-items: center;
+      top: 66px;
+      left: 0;
+      width: 100%;
+      height: 120px;
 
-      .percent-box {
-        font-size: 14px;
+      .line {
+        width: 100%;
+        height: 100%;
+      }
 
-        // color: #b3b8cc;
-        &:nth-child(1) {
-          position: absolute;
-          top: 12%;
-          color: #ffe01c;
-        }
+      .pic {
+        height: 100%;
+        position: absolute;
+        left: 45%;
+        top: 0;
+        display: flex;
+        align-items: center;
 
-        &:nth-child(2) {
-          position: absolute;
-          top: 42%;
-          color: #1ff8fb;
+        img {
+          height: 60%;
         }
+      }
 
-        &:nth-child(3) {
-          position: absolute;
-          top: 70%;
-          color: #9affa8;
-        }
+      .percent {
+        position: absolute;
+        left: 75%;
+        top: 0;
+        width: 45px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        // justify-content: space-between;
+        align-items: center;
+
+        .percent-box {
+          font-size: 14px;
 
-        .dw {
-          color: #b3b8cc;
-          margin-left: 5px;
+          // color: #b3b8cc;
+          &:nth-child(1) {
+            position: absolute;
+            top: 12%;
+            color: #ffe01c;
+          }
+
+          &:nth-child(2) {
+            position: absolute;
+            top: 42%;
+            color: #1ff8fb;
+          }
+
+          &:nth-child(3) {
+            position: absolute;
+            top: 70%;
+            color: #9affa8;
+          }
+
+          .dw {
+            color: #b3b8cc;
+            margin-left: 5px;
+          }
         }
       }
     }
-  }
 
-  .line-card {
-    position: absolute;
-    top: 186px;
-    left: 0;
-    width: 100%;
-    height: calc(100% - 186px);
-    padding: 0px 15px 15px 15px;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-
-    .card-item {
+    .line-card {
+      position: absolute;
+      top: 186px;
+      left: 0;
+      width: 100%;
+      height: calc(100% - 186px);
+      padding: 0px 15px 15px 15px;
+      box-sizing: border-box;
       display: flex;
-      flex: 1;
-      justify-content: center;
+      justify-content: space-around;
       align-items: center;
-      height: 100%;
-
-      .item-s {
-        position: relative;
-        width: 105px;
-        height: 58px;
-        margin-top: 20px;
-        background: url('../../../../../assets/images/home-container/line-val.png') no-repeat;
-        background-size: 100% 90%;
-
-        .item-label {
-          width: 100%;
-          text-align: center;
-          color: #b3b8cc;
-          font-size: 12px;
-        }
 
-        .item-val {
-          position: absolute;
-          left: 50%;
-          top: 26px;
-          font-size: 14px;
-          font-family: 'douyuFont';
-          color: #fff;
-          transform: translate(-50%, 0);
+      .card-item {
+        display: flex;
+        flex: 1;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+
+        .item-s {
+          position: relative;
+          width: 105px;
+          height: 58px;
+          margin-top: 20px;
+          background: url('../../../../../assets/images/home-container/line-val.png') no-repeat;
+          background-size: 100% 90%;
+
+          .item-label {
+            width: 100%;
+            text-align: center;
+            color: #b3b8cc;
+            font-size: 12px;
+          }
+
+          .item-val {
+            position: absolute;
+            left: 50%;
+            top: 26px;
+            font-size: 14px;
+            font-family: 'douyuFont';
+            color: #fff;
+            transform: translate(-50%, 0);
+          }
         }
       }
     }
   }
-}
-
-:deep .zxm-select-selector {
-  width: 100%;
-  height: 30px !important;
-  padding: 0 11px 0px 25px !important;
-  background-color: rgba(8, 148, 255, 0.3) !important;
-  border: 1px solid #1d80da !important;
-}
-
-:deep .zxm-select-selection-item {
-  color: #fff !important;
-  line-height: 28px !important;
-}
-
-:deep .zxm-select-arrow {
-  color: #fff !important;
-}
+
+  :deep .zxm-select-selector {
+    width: 100%;
+    height: 30px !important;
+    padding: 0 11px 0px 25px !important;
+    background-color: rgba(8, 148, 255, 0.3) !important;
+    border: 1px solid #1d80da !important;
+  }
+
+  :deep .zxm-select-selection-item {
+    color: #fff !important;
+    line-height: 28px !important;
+  }
+
+  :deep .zxm-select-arrow {
+    color: #fff !important;
+  }
 </style>

src/views/vent/home/colliery/components/wind-monitor.vue

@@ -8,268 +8,271 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, nextTick, onMounted, defineProps, watch } from 'vue';
-import * as echarts from 'echarts';
-const emit = defineEmits(['goDetail'])
+  import { ref, reactive, nextTick, onMounted, defineProps, watch } from 'vue';
+  import * as echarts from 'echarts';
+  const emit = defineEmits(['goDetail']);
 
-let props = defineProps({
-  flList: Array,
-});
+  let props = defineProps({
+    flList: Array,
+  });
 
-//获取dom节点
-let windBar = ref<any>();
-//坐标轴最大值
-let maxY = ref(0)
-//echart数据
-let echartData = reactive<any>({ ydata: [], xdata: [] });
-//跳转详情
-function getDetail() {
-  emit('goDetail', 'windrect')
-}
-function getOption() {
-  nextTick(() => {
-    const color = '#66ffff';
-    let barWidth = echartData.ydata.length > 0 && echartData.ydata.length <= 1 ? 0.03 : 0.1; // 柱条占比
-    function renderItem(params, api) {
-      const topCenter = api.coord([api.value(0), api.value(1)]); // 顶点中心
-      const width = api.size([0, 1])[0] * barWidth; // 宽度
-      const ballRadius = width * 0.6;
-      return {
-        type: 'group',
-        children: [
-          {
-            // 圆形装饰
-            type: 'circle',
-            shape: {
-              cx: topCenter[0],
-              cy: topCenter[1],
-              r: ballRadius,
+  //获取dom节点
+  let windBar = ref<any>();
+  //坐标轴最大值
+  let maxY = ref(0);
+  //echart数据
+  let echartData = reactive<any>({ ydata: [], xdata: [] });
+  //跳转详情
+  function getDetail() {
+    emit('goDetail', 'windrect');
+  }
+  function getOption() {
+    nextTick(() => {
+      const color = '#66ffff';
+      let barWidth = echartData.ydata.length > 0 && echartData.ydata.length <= 1 ? 0.03 : 0.1; // 柱条占比
+      function renderItem(params, api) {
+        const topCenter = api.coord([api.value(0), api.value(1)]); // 顶点中心
+        const width = api.size([0, 1])[0] * barWidth; // 宽度
+        let ballRadius = width * 0.55;
+        if (topCenter[0] == 0 && topCenter[1] == 0) {
+          ballRadius = 0;
+        }
+        return {
+          type: 'group',
+          children: [
+            {
+              // 圆形装饰
+              type: 'circle',
+              shape: {
+                cx: topCenter[0],
+                cy: topCenter[1],
+                r: ballRadius,
+              },
+              style: api.style({
+                fill: '#66ffff',
+                stroke: color,
+                lineWidth: 2,
+              }),
             },
-            style: api.style({
-              fill: '#66ffff',
-              stroke: color,
-              lineWidth: 2,
-            }),
-          },
-        ],
-      };
-    }
+          ],
+        };
+      }
 
-    const myChart = echarts.init(windBar.value);
-    let option = {
-      color: [color],
-      tooltip: {
-        trigger: 'item',
-        show: true,
-        formatter: function (p) {
-          // console.info(p);
-          return p.marker + p.name + ' : ' + p.value;
+      const myChart = echarts.init(windBar.value);
+      let option = {
+        color: [color],
+        tooltip: {
+          trigger: 'item',
+          show: true,
+          formatter: function (p) {
+            // console.info(p);
+            return p.marker + p.name + ' : ' + p.value;
+          },
         },
-      },
 
-      grid: {
-        left: '8%',
-        top: '15%',
-        bottom: '32%',
-        right: '8%',
-        // containLabel: true
-      },
-      xAxis: {
-        type: 'category',
-        data: echartData.xdata,
-        axisLabel: {
-          formatter: function (params) {
-            var newParamsName = ''; // 最终拼接成的字符串
-            var paramsNameNumber = params.length; // 实际标签的个数
-            var provideNumber = 6; // 每行能显示的字的个数
-            var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
-            /**
-             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
-             */
-            // 条件等同于rowNumber>1
-            if (paramsNameNumber > provideNumber) {
-              /** 循环每一行,p表示行 */
-              for (var p = 0; p < rowNumber; p++) {
-                var tempStr = ''; // 表示每一次截取的字符串
-                var start = p * provideNumber; // 开始截取的位置
-                var end = start + provideNumber; // 结束截取的位置
-                // 此处特殊处理最后一行的索引值
-                if (p == rowNumber - 1) {
-                  // 最后一次不换行
-                  tempStr = params.substring(start, paramsNameNumber);
-                } else {
-                  // 每一次拼接字符串并换行
-                  tempStr = params.substring(start, end) + '\n';
+        grid: {
+          left: '8%',
+          top: '15%',
+          bottom: '32%',
+          right: '8%',
+          // containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: echartData.xdata,
+          axisLabel: {
+            formatter: function (params) {
+              var newParamsName = ''; // 最终拼接成的字符串
+              var paramsNameNumber = params.length; // 实际标签的个数
+              var provideNumber = 6; // 每行能显示的字的个数
+              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
+              /**
+               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
+               */
+              // 条件等同于rowNumber>1
+              if (paramsNameNumber > provideNumber) {
+                /** 循环每一行,p表示行 */
+                for (var p = 0; p < rowNumber; p++) {
+                  var tempStr = ''; // 表示每一次截取的字符串
+                  var start = p * provideNumber; // 开始截取的位置
+                  var end = start + provideNumber; // 结束截取的位置
+                  // 此处特殊处理最后一行的索引值
+                  if (p == rowNumber - 1) {
+                    // 最后一次不换行
+                    tempStr = params.substring(start, paramsNameNumber);
+                  } else {
+                    // 每一次拼接字符串并换行
+                    tempStr = params.substring(start, end) + '\n';
+                  }
+                  newParamsName += tempStr; // 最终拼成的字符串
                 }
-                newParamsName += tempStr; // 最终拼成的字符串
+              } else {
+                // 将旧标签的值赋给新标签
+                newParamsName = params;
               }
-            } else {
-              // 将旧标签的值赋给新标签
-              newParamsName = params;
-            }
-            //将最终的字符串返回
-            return newParamsName;
+              //将最终的字符串返回
+              return newParamsName;
+            },
+            fontSize: 14,
+            margin: 10,
+            interval: 0,
+            textStyle: {
+              color: '#b3b8cc',
+            },
           },
-          fontSize: 14,
-          margin: 10,
-          interval: 0,
-          textStyle: {
-            color: '#b3b8cc',
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(62, 103, 164)',
+            },
           },
-        },
-        axisLine: {
-          lineStyle: {
-            color: 'rgba(62, 103, 164)',
+          splitLine: {
+            show: false,
           },
-        },
-        splitLine: {
-          show: false,
-        },
-        axisTick: {
-          show: false,
-        },
-      },
-      yAxis: {
-        type: 'value',
-        name: '(m³/min)',
-        max: maxY.value,
-        axisLabel: {
-          textStyle: {
-            fontSize: 14,
-            color: '#b3b8cc',
+          axisTick: {
+            show: false,
           },
         },
-        nameTextStyle: {
-          color: '#fff',
-          fontSize: 12,
-          lineHeight: 10,
-        },
-        splitLine: {
-          lineStyle: {
-            color: 'rgba(62, 103, 164,.4)',
+        yAxis: {
+          type: 'value',
+          name: '(m³/min)',
+          max: maxY.value,
+          axisLabel: {
+            textStyle: {
+              fontSize: 14,
+              color: '#b3b8cc',
+            },
           },
-        },
-        axisLine: {
-          show: false,
-        },
-        axisTick: {
-          show: false,
-        },
-      },
-      series: [
-        {
-          data: echartData.ydata,
-          type: 'bar',
-          barWidth: barWidth * 100 + '%',
-          itemStyle: {
-            color: {
-              x: 0,
-              y: 0,
-              x2: 0,
-              y2: 1,
-              colorStops: [
-                {
-                  offset: 0,
-                  color: 'rgba(85, 255, 237, 1)', // 0% 处的颜色
-                },
-                {
-                  offset: 1,
-                  color: 'rgba(66, 142, 255, 0.1)', // 100% 处的颜色
-                },
-              ],
+          nameTextStyle: {
+            color: '#fff',
+            fontSize: 12,
+            lineHeight: 10,
+          },
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(62, 103, 164,.4)',
             },
           },
-          label: {
-            normal: {
-              show: true,
-              position: echartData.ydata.length > 0 && echartData.ydata.length <= 1 ? ['-17', '-30'] : ['-16', '-30'],
-              formatter: [' {a|{c}}'].join(','),
-              rich: {
-                a: {
-                  color: '#fff',
-                  align: 'center',
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: echartData.ydata,
+            type: 'bar',
+            barWidth: barWidth * 100 + '%',
+            itemStyle: {
+              color: {
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(85, 255, 237, 1)', // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(66, 142, 255, 0.1)', // 100% 处的颜色
+                  },
+                ],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                position: echartData.ydata.length > 0 && echartData.ydata.length <= 1 ? ['-17', '-30'] : ['-16', '-30'],
+                formatter: [' {a|{c}}'].join(','),
+                rich: {
+                  a: {
+                    color: '#fff',
+                    align: 'center',
+                  },
                 },
               },
             },
           },
-        },
-        {
-          data: echartData.ydata,
-          type: 'custom',
-          renderItem: renderItem,
-          zlevel: 2,
-        },
-      ],
-    };
-    myChart.setOption(option);
-    window.onresize = function () {
-      myChart.resize();
-    };
-  });
-}
-
-function formatRoundNum(num) {
-  let interger = Math.ceil(num)
-  let leng = String(interger).length
-  return Math.ceil(interger / Math.pow(10, leng - 1)) * Math.pow(10, leng - 1)
-}
-
-watch(
-  () => props.flList,
-  (val) => {
-    echartData.xdata.length = 0;
-    echartData.ydata.length = 0;
-    val.forEach((el: any) => {
-      if (el.readData.m3) {
-        echartData.xdata.push(el.strinstallpos);
-        echartData.ydata.push(el.readData.m3);
-      }
+          {
+            data: echartData.ydata,
+            type: 'custom',
+            renderItem: renderItem,
+            zlevel: 2,
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
     });
-    let max = echartData.ydata.reduce((acr, cur) => {
-      return parseFloat(acr) > parseFloat(cur) ? parseFloat(acr) : parseFloat(cur)
-    })
-    maxY.value = formatRoundNum(max * 1.5)
-    getOption();
-  },
-  {
-    deep: true,
   }
-);
 
-onMounted(() => { });
+  function formatRoundNum(num) {
+    let interger = Math.ceil(num);
+    let leng = String(interger).length;
+    return Math.ceil(interger / Math.pow(10, leng - 1)) * Math.pow(10, leng - 1);
+  }
+
+  watch(
+    () => props.flList,
+    (val) => {
+      echartData.xdata.length = 0;
+      echartData.ydata.length = 0;
+      val.forEach((el: any) => {
+        if (el.readData.m3) {
+          echartData.xdata.push(el.strinstallpos);
+          echartData.ydata.push(el.readData.m3);
+        }
+      });
+      let max = echartData.ydata.reduce((acr, cur) => {
+        return parseFloat(acr) > parseFloat(cur) ? parseFloat(acr) : parseFloat(cur);
+      });
+      maxY.value = formatRoundNum(max * 1.5);
+      getOption();
+    },
+    {
+      deep: true,
+    }
+  );
+
+  onMounted(() => {});
 </script>
 
 <style lang="less" scoped>
-.windMonitor {
-  width: 100%;
-  height: 100%;
-  position: relative;
+  .windMonitor {
+    width: 100%;
+    height: 100%;
+    position: relative;
 
-  .title-top {
-    position: absolute;
-    top: 9px;
-    left: 46px;
-    color: #fff;
-    font-size: 16px;
-    font-family: 'douyuFont';
-    cursor: pointer;
+    .title-top {
+      position: absolute;
+      top: 9px;
+      left: 46px;
+      color: #fff;
+      font-size: 16px;
+      font-family: 'douyuFont';
+      cursor: pointer;
 
-    &:hover {
-      color: #66ffff;
+      &:hover {
+        color: #66ffff;
+      }
     }
-  }
 
-  .wind-contents {
-    position: absolute;
-    left: 0;
-    top: 36px;
-    width: 100%;
-    height: calc(100% - 36px);
-
-    .wind-bar {
+    .wind-contents {
+      position: absolute;
+      left: 0;
+      top: 36px;
       width: 100%;
-      height: 100%;
+      height: calc(100% - 36px);
+
+      .wind-bar {
+        width: 100%;
+        height: 100%;
+      }
     }
   }
-}
 </style>

src/views/vent/home/colliery/index.vue

@@ -28,20 +28,22 @@
           <!-- 三维模型 -->
           <div class="three-box">
             <div class="three-nav">
-              <div class="nav-item" v-for="(item, index) in navList" :key="index">
-                <div class="item-label">{{ item.name }}</div>
-                <div class="item-value">
-                  <div v-if="item.isShow" class="bg-box" v-for="(ite, ind) in item.valList" :key="ind">
-                    <div class="box-line"></div>
-                    <div class="value-text">{{ ite.val }}</div>
+              <template v-for="(item, index) in navList" :key="index">
+                <div class="nav-item" v-if="(item.valList && item.valList.length > 0) || item.val">
+                  <div class="item-label">{{ item.name }}</div>
+                  <div class="item-value">
+                    <div v-if="item.isShow" class="bg-box" v-for="(ite, ind) in item.valList" :key="ind">
+                      <div class="box-line"></div>
+                      <div class="value-text">{{ ite.val }}</div>
+                    </div>
+                    <div v-else class="value-text1">{{ item.val }}</div>
                   </div>
-                  <div v-else class="value-text1">{{ item.val }}</div>
                 </div>
-              </div>
+              </template>
             </div>
-            <div class="three-modal" id="modalBox" style="position: relative;">
+            <div class="three-modal" id="modalBox" style="position: relative">
               <div class="btn-icon" @click="goModalDetail"></div>
-              <VentModal  style="width: calc(100% - 30px); height: calc(100% - 30px); position: absolute"/>
+              <VentModal style="width: calc(100% - 30px); height: calc(100% - 30px); position: absolute" />
             </div>
           </div>
           <!-- 风量监测 -->
@@ -66,451 +68,471 @@
       </div>
     </div>
     <!-- <DeviceMonitor :pageType="pageType" @goHome="goHome" /> -->
-
   </div>
-  <VentModal  v-else style="width: calc(100% - 30px); height: calc(100% - 30px); position: absolute"/>
+  <VentModal v-else style="width: calc(100% - 30px); height: calc(100% - 30px); position: absolute" />
 </template>
 <script lang="ts" setup>
-import { reactive, onMounted, ref, nextTick, computed, unref, inject, onBeforeUnmount, onUnmounted } from 'vue';
-import fanMonitor from './components/fan-monitor.vue';
-import mainMonitor from './components/main-monitor.vue';
-import windDevice from './components/wind-device.vue';
-import windMonitor from './components/wind-monitor.vue';
-import windLine from './components/wind-line.vue';
-import workMonitor from './components/work-monitor.vue';
-import deviceWarn from './components/device-warn.vue';
-import { useGlobSetting } from '/@/hooks/setting';
-import { list } from './clique.api';
-import DeviceMonitor from '../../monitorManager/deviceMonitor/index.vue';
-import { useRouter } from 'vue-router';
-import { router } from '/@/router';
-// import { Modal } from 'ant-design-vue';
-// import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-import moment from 'moment';
-import { getActions } from '/@/qiankun/state';
-import { unmountMicroApps, mountMicroApp } from '/@/qiankun'
-
-import { getDate } from './clique.data'
-import VentModal from '/@/components/vent/micro/ventModal.vue'
-
-
-const { currentRoute } = useRouter();
-const { title, logoUrl } = useGlobSetting();
-const actions = getActions();
-let timer: NodeJS.Timeout | null = null;
-let fanLocalList = reactive<any[]>([]); //局部风机数据
-let mainList = ref<any[]>([]); //主通风机数据
-let centerList = reactive<any[]>([]); //中间区域数据
-let flList = ref<any[]>([]); //风量监测数据
-let lineList = ref<any>([]); //关键路线数据
-let workList = ref<any>([]); //工作面数据
-let warnData = ref<any>([]); //预警数据
-let deviceData = ref<any>({}); //设备监测数据
-let navList = reactive([
-  { name: '总风量(m³/min)', isShow: true, valList: [] },
-  // { name: '需风量(m³/min)', isShow: true, valList: [] },
-  { name: '有效风量(m³/min)', isShow: true, valList: [] },
-  { name: '等积孔(m²)', isShow: true, valList: [{ val: '0' }, { val: '6' }, { val: '.' }, { val: '2' }, { val: '0' }] },
-  { name: '外部漏风率', isShow: false, val: 0 },
-  { name: '有效风量率', isShow: false, val: 0 },
-]);
-let nowTimeYear=ref('')
-let nowTimeWeek=ref('')
-let nowTime=ref('')
-
-const globSetting = useGlobSetting();
-const pageType = ref('home');
-let router = useRouter();
-
-function goDetail(deviceType) {
-  //lxh
-  // pageType.value = deviceType;
-  if (deviceType == 'fanMain') {
-    router.push('/monitorChannel/monitor-fanmain');
-  } else if (deviceType == 'fanLocal') {
-    router.push('/monitorChannel/monitor-fanlocal');
-  } else if (deviceType == 'windrect') {
-    router.push('/monitorChannel/monitor-windrect')
-  } else if (deviceType == 'warning') {
-    router.push('/monitorChannel/monitor-alarm-home');
-  }
-}
-function goHome() {
-  pageType.value = 'home';
-}
-
-function getList() {
-  list({}).then((res) => {
-    console.log(res, 'res-----------');
-    fanLocalList.length = 0;
-    fanLocalList.push(res.fanlocal);
-    mainList.value = res.fanmain;
-    // centerList = res.midinfo[0].sysdata;
-    // 窝兔沟模拟风量
-    centerList = {
-      zongfengliang: "8010", // 总风量
-      xufengliang: '7232', // 有效风量
-      zonghuifeng: '8188' // 总会风
-    }
-    navList[0].valList = centerList && centerList.zongfengliang
-      ? centerList.zongfengliang.split('').map((el) => {
-        return { val: el };
-      })
-      : [];
-    navList[1].valList = centerList && centerList.xufengliang
-      ? centerList.xufengliang
-        .toString()
-        .split('')
-        .map((el) => {
-          return { val: el };
-        })
-      : [];
-
-    if (centerList && centerList.zongfengliang && centerList.zonghuifeng) {
-      navList[3].val =
-        (((parseFloat(centerList.zonghuifeng) - parseFloat(centerList.zongfengliang)) / parseFloat(centerList.zonghuifeng)) * 100).toFixed(2) + '%';
-      navList[4].val = ((centerList.xufengliang / parseFloat(centerList.zongfengliang)) * 100).toFixed(2) + '%';
-    } else {
-      navList[3].val = '0%';
-      navList[4].val = '0%';
+  import { reactive, onMounted, ref, nextTick, computed, unref, inject, onBeforeUnmount, onUnmounted } from 'vue';
+  import fanMonitor from './components/fan-monitor.vue';
+  import mainMonitor from './components/main-monitor.vue';
+  import windDevice from './components/wind-device.vue';
+  import windMonitor from './components/wind-monitor.vue';
+  import windLine from './components/wind-line.vue';
+  import workMonitor from './components/work-monitor.vue';
+  import deviceWarn from './components/device-warn.vue';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { list } from './clique.api';
+  import DeviceMonitor from '../../monitorManager/deviceMonitor/index.vue';
+  import { useRouter } from 'vue-router';
+  import { router } from '/@/router';
+  // import { Modal } from 'ant-design-vue';
+  // import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import moment from 'moment';
+  import { getActions } from '/@/qiankun/state';
+  import { unmountMicroApps, mountMicroApp } from '/@/qiankun';
+
+  import { getDate } from './clique.data';
+  import VentModal from '/@/components/vent/micro/ventModal.vue';
+
+  const { currentRoute } = useRouter();
+  const { title, logoUrl } = useGlobSetting();
+  const actions = getActions();
+  let timer: NodeJS.Timeout | null = null;
+  let fanLocalList = reactive<any[]>([]); //局部风机数据
+  let mainList = ref<any[]>([]); //主通风机数据
+  let centerList = reactive<any[]>([]); //中间区域数据
+  let flList = ref<any[]>([]); //风量监测数据
+  let lineList = ref<any>([]); //关键路线数据
+  let workList = ref<any>([]); //工作面数据
+  let warnData = ref<any>([]); //预警数据
+  let deviceData = ref<any>({}); //设备监测数据
+  let navList = reactive([
+    { name: '总风量(m³/min)', isShow: true, valList: [] },
+    // { name: '需风量(m³/min)', isShow: true, valList: [] },
+    { name: '有效风量(m³/min)', isShow: true, valList: [] },
+    { name: '等积孔(m²)', isShow: true, valList: [] },
+    { name: '外部漏风率', isShow: false, val: 0 },
+    { name: '有效风量率', isShow: false, val: '0%' },
+  ]);
+  let nowTimeYear = ref('');
+  let nowTimeWeek = ref('');
+  let nowTime = ref('');
+
+  const globSetting = useGlobSetting();
+  const pageType = ref('home');
+  let router = useRouter();
+
+  function goDetail(deviceType) {
+    //lxh
+    // pageType.value = deviceType;
+    if (deviceType == 'fanMain') {
+      router.push('/monitorChannel/monitor-fanmain');
+    } else if (deviceType == 'fanLocal') {
+      router.push('/monitorChannel/monitor-fanlocal');
+    } else if (deviceType == 'windrect') {
+      router.push('/monitorChannel/monitor-windrect');
+    } else if (deviceType == 'warning') {
+      router.push('/monitorChannel/monitor-alarm-home');
     }
+  }
+  function goHome() {
+    pageType.value = 'home';
+  }
 
-    flList.value = res.windrect || res.sys_wind;
-
-    if (res.sys_majorpath.length != 0) {
-      lineList.value = res.sys_majorpath;
-    } else {
-      let paramArr: any = []
-      paramArr.push({
-        deviceName: '关键路线1',
-        deviceType: 'sys_majorpath',
-        deviceID: Math.random() * 100,
-        majorpath: {
-          drag_1: 380,
-          drag_2: 167,
-          drag_3: 333,
-          drag_total: Math.abs(Number(res.fanmain[0].readData.Fan1FanPre || res.fanmain[0].readData.Fan2FanPre || res.fanmain[0].readData.DataPa || 680 + (Math.random() * 2 - 1 * 5))),
-          m3_total: Number(res.fanmain[0].readData.Fan1m3 || res.fanmain[0].readData.Fan2m3 || res.fanmain[0].readData.m3 || 8138 + (Math.random() * 2 - 1 * 20))
-        }
-      })
-      lineList.value = paramArr
-    }
+  function getList() {
+    list({}).then((res) => {
+      console.log(res, 'res-----------');
+      fanLocalList.length = 0;
+      fanLocalList.push(res.fanlocal);
+      mainList.value = res.fanmain;
+      centerList = res.midinfo[0].sysdata;
+      // 窝兔沟模拟风量
+      // centerList = {
+      //   zongfengliang: "8010", // 总风量
+      //   xufengliang: '7232', // 有效风量
+      //   zonghuifeng: '8188' // 总会风
+      // }
+      navList[0].valList =
+        centerList && centerList.zongfengliang
+          ? centerList.zongfengliang.split('').map((el) => {
+              return { val: el };
+            })
+          : [];
+      navList[1].valList =
+        centerList && centerList.xufengliang
+          ? centerList.xufengliang
+              .toString()
+              .split('')
+              .map((el) => {
+                return { val: el };
+              })
+          : [];
+      navList[2].valList =
+        centerList && centerList.dengjikong
+          ? (Number(centerList.dengjikong) > 10 ? centerList.dengjikong.toFixed(2) : `0${centerList.dengjikong.toFixed(2)}`)
+              .toString()
+              .split('')
+              .map((el) => {
+                return { val: el };
+              })
+          : [];
+      if (centerList && centerList.zongfengliang && centerList.zongjinfeng) {
+        // 外部漏风率  （zongfengliang-zongjinfeng)/zongfengliang
+        navList[3].val =
+          (((parseFloat(centerList.zongfengliang) - parseFloat(centerList.zongjinfeng)) / parseFloat(centerList.zongfengliang)) * 100).toFixed(2) +
+          '%';
+        // navList[4].val = ((centerList.xufengliang / parseFloat(centerList.zongfengliang)) * 100).toFixed(2) + '%';
+      } else {
+        navList[3].val = '0%';
+      }
 
-    if (res.sys_surface_caimei.length != 0) {
-      workList.value = res.sys_surface_caimei;
-    } else {
-      let paramArr: any = []
-      paramArr.push({
-        deviceName: '12204工作面',
-        deviceType: 'sys_surface_caimei',
-        deviceID: '11111',
-        history: [],
-        jin: 100,
-        hui: 200,
-        xufengliang: 300,
-      })
-      workList.value = getDate(paramArr)
-    }
-    warnData.value = res.warn || [];
-    deviceData.value = res.device || {};
-  });
-}
-
-//获取当前时间年月日时分秒
-function getNowTime(){
-  setInterval(()=>{
-    nowTimeYear.value= moment().format('YYYY/MM/DD');
-    let week= moment(new Date().getTime()).day();
-    switch (week) {
-    case 0:
-    nowTimeWeek.value= '星期日';
-      break;
-    case 1:
-    nowTimeWeek.value= '星期一';
-      break;
-    case 2:
-    nowTimeWeek.value= '星期二';
-      break;
-    case 3:
-    nowTimeWeek.value= '星期三';
-      break;
-    case 4:
-    nowTimeWeek.value= '星期四';
-      break;
-    case 5:
-    nowTimeWeek.value= '星期五';
-      break;
-    case 6:
-    nowTimeWeek.value= '星期六';
-      break;
-  }
-    let date = new Date()
-    let hours = date.getHours()
-    let minutes = date.getMinutes()
-    let seconds = date.getSeconds()
-    console.log(seconds,'seconds----')
-    if(minutes>=0 && minutes<=9){
-      minutes=`0${minutes}`
-    }
-    if(seconds>=0 && seconds<=9){
-      seconds=`0${seconds}`
-    }
-    nowTime.value=`${hours}:${minutes}:${seconds}`
-  },1000)
-}
-
-function goModalDetail() {
-  router.push('/micro-vent-3dModal/modelchannel/model3D/home?deviceType=model3D')
-  // history.pushState({}, '', '/micro-vent-3dModal/modelchannel/model3D/home?deviceType=model3D');
-  // location.reload()
-  pageType.value = 'model3D'
-}
-
-onMounted(() => {
-  const currentRouteObj = unref(currentRoute)
-  if (currentRouteObj && currentRouteObj['query'] && currentRouteObj['query']['deviceType']) {
-    pageType.value = 'model3D'
+      if (res.midinfo[0] && res.midinfo[0].sysinfo) {
+        navList[4].val = (res.midinfo[0].sysinfo.useM3Perent ? res.midinfo[0].sysinfo.useM3Perent : '0') + '%';
+      }
+
+      flList.value = res.windrect || res.sys_wind;
+
+      if (res.sys_majorpath.length != 0) {
+        lineList.value = res.sys_majorpath;
+      } else {
+        let paramArr: any = [];
+        paramArr.push({
+          deviceName: '关键路线1',
+          deviceType: 'sys_majorpath',
+          deviceID: Math.random() * 100,
+          majorpath: {
+            drag_1: 380,
+            drag_2: 167,
+            drag_3: 333,
+            drag_total: Math.abs(
+              Number(
+                res.fanmain[0].readData.Fan1FanPre ||
+                  res.fanmain[0].readData.Fan2FanPre ||
+                  res.fanmain[0].readData.DataPa ||
+                  680 + (Math.random() * 2 - 1 * 5)
+              )
+            ),
+            m3_total: Number(
+              res.fanmain[0].readData.Fan1m3 || res.fanmain[0].readData.Fan2m3 || res.fanmain[0].readData.m3 || 8138 + (Math.random() * 2 - 1 * 20)
+            ),
+          },
+        });
+        lineList.value = paramArr;
+      }
+
+      if (res.sys_surface_caimei.length != 0) {
+        workList.value = res.sys_surface_caimei;
+      } else {
+        let paramArr: any = [];
+        paramArr.push({
+          deviceName: '12204工作面',
+          deviceType: 'sys_surface_caimei',
+          deviceID: '11111',
+          history: [],
+          jin: 100,
+          hui: 200,
+          xufengliang: 300,
+        });
+        workList.value = getDate(paramArr);
+      }
+      warnData.value = res.warn || [];
+      deviceData.value = res.device || {};
+    });
   }
-  getNowTime()
-  getList();
-  timer = Number(
+
+  //获取当前时间年月日时分秒
+  function getNowTime() {
     setInterval(() => {
-      getList();
-    }, 10000)
-  );
-});
-onBeforeUnmount(() => {
-  actions.setGlobalState({ url: { path: '', query: {} } });
-  clearInterval(timer);
-  timer = null
-});
+      nowTimeYear.value = moment().format('YYYY/MM/DD');
+      let week = moment(new Date().getTime()).day();
+      switch (week) {
+        case 0:
+          nowTimeWeek.value = '星期日';
+          break;
+        case 1:
+          nowTimeWeek.value = '星期一';
+          break;
+        case 2:
+          nowTimeWeek.value = '星期二';
+          break;
+        case 3:
+          nowTimeWeek.value = '星期三';
+          break;
+        case 4:
+          nowTimeWeek.value = '星期四';
+          break;
+        case 5:
+          nowTimeWeek.value = '星期五';
+          break;
+        case 6:
+          nowTimeWeek.value = '星期六';
+          break;
+      }
+      let date = new Date();
+      let hours = date.getHours();
+      let minutes = date.getMinutes();
+      let seconds = date.getSeconds();
+      console.log(seconds, 'seconds----');
+      if (minutes >= 0 && minutes <= 9) {
+        minutes = `0${minutes}`;
+      }
+      if (seconds >= 0 && seconds <= 9) {
+        seconds = `0${seconds}`;
+      }
+      nowTime.value = `${hours}:${minutes}:${seconds}`;
+    }, 1000);
+  }
+
+  function goModalDetail() {
+    router.push('/micro-vent-3dModal/modelchannel/model3D/home?deviceType=model3D');
+    // history.pushState({}, '', '/micro-vent-3dModal/modelchannel/model3D/home?deviceType=model3D');
+    // location.reload()
+    pageType.value = 'model3D';
+  }
 
+  onMounted(() => {
+    const currentRouteObj = unref(currentRoute);
+    if (currentRouteObj && currentRouteObj['query'] && currentRouteObj['query']['deviceType']) {
+      pageType.value = 'model3D';
+    }
+    getNowTime();
+    getList();
+    timer = Number(
+      setInterval(() => {
+        getList();
+      }, 10000)
+    );
+  });
+  onBeforeUnmount(() => {
+    actions.setGlobalState({ url: { path: '', query: {} } });
+    clearInterval(timer);
+    timer = null;
+  });
 </script>
 
 <style lang="less" scoped>
-@font-face {
-  font-family: 'douyuFont';
-  src: url('../../../../assets/font/douyuFont.otf');
-}
-
-@font-face {
-  font-family: 'yjsz';
-  src: url('../../../../assets/font/yjsz.TTF');
-}
-
-.home-container {
-  width: 100%;
-  height: 100%;
-  position: relative;
-
-  .header {
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
+  }
+
+  @font-face {
+    font-family: 'yjsz';
+    src: url('../../../../assets/font/yjsz.TTF');
+  }
+
+  .home-container {
     width: 100%;
-    height: 76px;
+    height: 100%;
     position: relative;
-    background: url('../../../../assets//images//home-container/header-nav.png') no-repeat;
-
-    .head-time {
-      position: absolute;
-      top: 14px;
-      left: 15px;
-      color: #b5c9e9;
-      font-size: 14px;
-
-      span {
-        margin-right: 20px;
-        letter-spacing: 2px;
+
+    .header {
+      width: 100%;
+      height: 76px;
+      position: relative;
+      background: url('../../../../assets//images//home-container/header-nav.png') no-repeat;
+
+      .head-time {
+        position: absolute;
+        top: 14px;
+        left: 15px;
+        color: #b5c9e9;
+        font-size: 14px;
+
+        span {
+          margin-right: 20px;
+          letter-spacing: 2px;
+        }
       }
-    }
 
-    .main-title {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      color: #fff;
-      font-size: 24px;
-      font-family: 'douyuFont';
+      .main-title {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        color: #fff;
+        font-size: 24px;
+        font-family: 'douyuFont';
+      }
     }
-  }
-
-  .home-contents {
-    display: flex;
-    justify-content: space-between;
-    height: calc(100% - 76px);
-    padding: 10px;
-    box-sizing: border-box;
 
-    .left-content {
+    .home-contents {
       display: flex;
-      flex-direction: column;
-      flex: 1;
       justify-content: space-between;
-      height: 100%;
+      height: calc(100% - 76px);
+      padding: 10px;
+      box-sizing: border-box;
 
-      .monitor-box {
+      .left-content {
         display: flex;
+        flex-direction: column;
         flex: 1;
-        width: 100%;
-        background: url('../../../../assets/images/home-container/dialog.png') no-repeat;
-        background-size: 100% 100%;
-      }
+        justify-content: space-between;
+        height: 100%;
 
-      .monitor-box1 {
-        margin: 10px 0px;
-      }
-    }
+        .monitor-box {
+          display: flex;
+          flex: 1;
+          width: 100%;
+          background: url('../../../../assets/images/home-container/dialog.png') no-repeat;
+          background-size: 100% 100%;
+        }
 
-    .center-content {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      flex: 2;
-      height: 100%;
-      margin: 0px 10px;
+        .monitor-box1 {
+          margin: 10px 0px;
+        }
+      }
 
-      .three-box {
-        position: relative;
+      .center-content {
         display: flex;
-        background-color: #fff;
+        flex-direction: column;
+        justify-content: space-between;
         flex: 2;
-        width: 100%;
-        margin-bottom: 15px;
-        background: url('../../../../assets/images/home-container/three-dialog.png') no-repeat;
-        background-size: 100% 100%;
-
-        .three-nav {
-          position: absolute;
-          z-index: 9999;
-          left: 50%;
-          top: 38px;
-          transform: translate(-50%, 0);
-          width: 812px;
-          height: 89px;
-          padding: 0px 20px;
-          box-sizing: border-box;
+        height: 100%;
+        margin: 0px 10px;
+
+        .three-box {
+          position: relative;
           display: flex;
-          justify-content: space-around;
-          align-items: center;
-          background: url('../../../../assets/images/home-container/three-nav.png') no-repeat;
+          background-color: #fff;
+          flex: 2;
+          width: 100%;
+          margin-bottom: 15px;
+          background: url('../../../../assets/images/home-container/three-dialog.png') no-repeat;
+          background-size: 100% 100%;
 
-          .nav-item {
+          .three-nav {
+            position: absolute;
+            z-index: 9999;
+            left: 50%;
+            top: 38px;
+            transform: translate(-50%, 0);
+            width: 812px;
+            height: 89px;
+            padding: 0px 20px;
+            box-sizing: border-box;
             display: flex;
-            flex: 1;
-            flex-direction: column;
             justify-content: space-around;
             align-items: center;
-            height: 80%;
+            background: url('../../../../assets/images/home-container/three-nav.png') no-repeat;
 
-            .item-label {
-              color: #98f5ff;
-            }
-
-            .item-value {
-              position: relative;
-              width: 125px;
-              height: 37px;
-              padding: 0px 5px;
-              box-sizing: border-box;
+            .nav-item {
               display: flex;
-              justify-content: space-between;
+              flex: 1;
+              flex-direction: column;
+              justify-content: space-around;
               align-items: center;
-              background: url('../../../../assets/images/home-container/item-value.png') no-repeat;
+              height: 80%;
+
+              .item-label {
+                color: #98f5ff;
+              }
 
-              .bg-box {
+              .item-value {
                 position: relative;
-                width: 20px;
-                height: 26px;
-                border-bottom: 2px solid #063493;
-                background: linear-gradient(to right, rgba(1, 194, 249), rgba(0, 125, 252));
-
-                .box-line {
-                  position: absolute;
-                  left: 0;
-                  top: 50%;
-                  transform: translate(0, -50%);
-                  height: 1px;
-                  width: 100%;
-                  background-color: rgba(6, 52, 147, 0.6);
+                width: 125px;
+                height: 37px;
+                padding: 0px 5px;
+                box-sizing: border-box;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                background: url('../../../../assets/images/home-container/item-value.png') no-repeat;
+
+                .bg-box {
+                  position: relative;
+                  width: 20px;
+                  height: 26px;
+                  border-bottom: 2px solid #063493;
+                  background: linear-gradient(to right, rgba(1, 194, 249), rgba(0, 125, 252));
+
+                  .box-line {
+                    position: absolute;
+                    left: 0;
+                    top: 50%;
+                    transform: translate(0, -50%);
+                    height: 1px;
+                    width: 100%;
+                    background-color: rgba(6, 52, 147, 0.6);
+                  }
+
+                  .value-text {
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    transform: translate(-50%, -50%);
+                    color: #fff;
+                    font-size: 22px;
+                    font-family: 'yjsz';
+                    font-weight: 500;
+                  }
                 }
 
-                .value-text {
-                  position: absolute;
-                  left: 50%;
-                  top: 50%;
-                  transform: translate(-50%, -50%);
+                .value-text1 {
+                  width: 100%;
+                  text-align: center;
                   color: #fff;
                   font-size: 22px;
                   font-family: 'yjsz';
                   font-weight: 500;
                 }
               }
+            }
+          }
 
-              .value-text1 {
-                width: 100%;
-                text-align: center;
-                color: #fff;
-                font-size: 22px;
-                font-family: 'yjsz';
-                font-weight: 500;
-              }
+          .three-modal {
+            width: 100%;
+            height: 100%;
+            padding: 20px 17px 20px 15px;
+            box-sizing: border-box;
+            position: relative;
+
+            .btn-icon {
+              width: 40px;
+              height: 40px;
+              background: url('/@/assets/images/vent/home/tosmall.png') no-repeat center;
+              background-size: 100% 100%;
+              position: absolute;
+              z-index: 99999;
+              bottom: 30px;
+              right: 30px;
             }
           }
         }
 
-        .three-modal {
+        .wind-box {
+          display: flex;
+          flex: 1;
           width: 100%;
-          height: 100%;
-          padding: 20px 17px 20px 15px;
-          box-sizing: border-box;
-          position: relative;
-
-          .btn-icon {
-            width: 40px;
-            height: 40px;
-            background: url('/@/assets/images/vent/home/tosmall.png') no-repeat center;
-            background-size: 100% 100%;
-            position: absolute;
-            z-index: 99999;
-            bottom: 30px;
-            right: 30px;
-          }
+          background: url('../../../../assets/images/home-container/dialog1.png') no-repeat;
+          background-size: 100% 100%;
         }
       }
 
-      .wind-box {
+      .right-content {
         display: flex;
+        flex-direction: column;
+        justify-content: space-between;
         flex: 1;
-        width: 100%;
-        background: url('../../../../assets/images/home-container/dialog1.png') no-repeat;
-        background-size: 100% 100%;
-      }
-    }
+        height: 100%;
 
-    .right-content {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      flex: 1;
-      height: 100%;
-
-      .monitor-box {
-        display: flex;
-        flex: 1;
-        width: 100%;
-        background: url('../../../../assets/images/home-container/dialog.png') no-repeat;
-        background-size: 100% 100%;
-      }
+        .monitor-box {
+          display: flex;
+          flex: 1;
+          width: 100%;
+          background: url('../../../../assets/images/home-container/dialog.png') no-repeat;
+          background-size: 100% 100%;
+        }
 
-      .monitor-box1 {
-        margin: 10px 0px;
+        .monitor-box1 {
+          margin: 10px 0px;
+        }
       }
     }
   }
-}
-
 
-// #__qiankun_microapp_wrapper_for_micro_vent_3_d_modal__{
-//   width: 100% !important;
-//   height: 100% !important;
-// }
+  // #__qiankun_microapp_wrapper_for_micro_vent_3_d_modal__{
+  //   width: 100% !important;
+  //   height: 100% !important;
+  // }
 </style>

src/views/vent/monitorManager/alarmMonitor/DetailModal.vue

@@ -16,8 +16,8 @@
                 <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : 'red'">{{
                   record.warnFlag == 0 ? '正常' : '报警'
                 }}</a-tag>
-                <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == 0 ? 'default' : 'green'">{{
-                  record.netStatus == 0 ? '断开' : '连接'
+                <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
+                  record.netStatus == '0' ? '断开' : '连接'
                 }}</a-tag>
               </template>
             </MonitorTable>
@@ -33,74 +33,69 @@
   </BasicModal>
 </template>
 <script lang="ts" setup>
-
-import { onMounted, ref, defineEmits, reactive, onUnmounted, watch } from 'vue';
-import MonitorTable from '../comment/MonitorTable.vue';
-import AlarmHistoryTable from './AlarmHistoryTable.vue';
-import { warningList } from './alarm.api';
-import { levelColumns,levelHisColumns } from './alarm.data'
-import { BasicModal, useModalInner } from '/@/components/Modal';
-
-
-const props = defineProps({
-  deviceId: { type: String },
-})
-
-const emit = defineEmits(['close','register'])
-
-// 默认初始是第一行
-const activeKey = ref('1');
-const dataSource = ref([]);
-
-const tabChange = (activeKeyVal) => {
-  activeKey.value = activeKeyVal;
-
-};
-
-
-// 注册 modal
-const [register, { closeModal }] = useModalInner();
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(flag = false) {
-  if (Object.prototype.toString.call(timer) === '[object Null]') {
-    timer = setTimeout(
-      async () => {
-        await getDataSource();
-        if (timer) {
-          timer = null;
-        }
-        getMonitor();
-      },
-      flag ? 0 : 10000
-    );
+  import { onMounted, ref, defineEmits, reactive, onUnmounted, watch } from 'vue';
+  import MonitorTable from '../comment/MonitorTable.vue';
+  import AlarmHistoryTable from './AlarmHistoryTable.vue';
+  import { warningList } from './alarm.api';
+  import { levelColumns, levelHisColumns } from './alarm.data';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+
+  const props = defineProps({
+    deviceId: { type: String },
+  });
+
+  const emit = defineEmits(['close', 'register']);
+
+  // 默认初始是第一行
+  const activeKey = ref('1');
+  const dataSource = ref([]);
+
+  const tabChange = (activeKeyVal) => {
+    activeKey.value = activeKeyVal;
+  };
+
+  // 注册 modal
+  const [register, { closeModal }] = useModalInner();
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag = false) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = setTimeout(
+        async () => {
+          await getDataSource();
+          if (timer) {
+            timer = null;
+          }
+          getMonitor();
+        },
+        flag ? 0 : 10000
+      );
+    }
+  }
+  //设备预警监测列表
+  async function getDataSource() {
+    const res = await warningList({ isok: 0 });
+    dataSource.value = res.list || [];
   }
-}
-//设备预警监测列表
-async function getDataSource() {
-  const res = await warningList({ isok: 0 });
-  dataSource.value = res.list || [];
-}
-
-async function onSubmit() {
-  clearTimeout(timer);
-  emit('close')
-  closeModal();
-}
 
-onMounted(async () => {
-  getMonitor(true);
-});
-onUnmounted(() => {
-  if (timer) {
+  async function onSubmit() {
     clearTimeout(timer);
-    timer = undefined;
+    emit('close');
+    closeModal();
   }
-});
+
+  onMounted(async () => {
+    getMonitor(true);
+  });
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  });
 </script>
 <style scoped lang="less">
-
   @import '/@/design/vent/color.less';
   @import '/@/design/vent/modal.less';
   .padding-0 {
@@ -190,19 +185,19 @@ onUnmounted(() => {
       background: #264d8833 !important;
     }
     .@{ventSpace}-table-row-selected {
-      background: #00c0a311  !important;
+      background: #00c0a311 !important;
       td {
         background-color: #00000000 !important;
       }
     }
     .@{ventSpace}-table-thead {
       // background: linear-gradient(#004a8655 0%, #004a86aa 10%) !important;
-      background: #3d9dd45d!important;
+      background: #3d9dd45d !important;
 
       & > tr > th,
       .@{ventSpace}-table-column-title {
         // color: #70f9fc !important;
-        border-color: #84f2ff  !important;
+        border-color: #84f2ff !important;
         border-left: none !important;
         border-right: none !important;
         padding: 7px;

src/views/vent/monitorManager/alarmMonitor/index1.vue

@@ -17,8 +17,8 @@
               <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : 'red'">{{
                 record.warnFlag == 0 ? '正常' : '报警'
               }}</a-tag>
-              <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == 0 ? 'default' : 'green'">{{
-                record.netStatus == 0 ? '断开' : '连接'
+              <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
+                record.netStatus == '0' ? '断开' : '连接'
               }}</a-tag>
             </template>
           </MonitorTable>
@@ -80,7 +80,7 @@
   import HistoryTable from '../comment/HistoryTable.vue';
   import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
   import { warningList } from './alarm.api';
-  import { formConfig } from './alarm.data'
+  import { formConfig } from './alarm.data';
   import { deviceList } from '../../deviceManager/comment/pointTabel/point.api';
 
   const SensorMonitorRef = ref();
@@ -95,44 +95,43 @@
   const historyDataSource = ref<any[]>([]);
   const chartsColumns = ref<any[]>([]);
 
-
   const echartsOption = {
     grid: {
       top: '20%',
       left: '10px',
       right: '5px',
       bottom: '5%',
-      containLabel: true
+      containLabel: true,
     },
     toolbox: {
-      feature: {
-
-      }
-    }
-  }
+      feature: {},
+    },
+  };
 
   const selectData = reactive({
     strname: '',
     deviceType: '',
-    deviceID: ''
+    deviceID: '',
   });
 
   const tabChange = (activeKeyVal) => {
     activeKey.value = activeKeyVal;
-  
   };
 
   // https获取监测数据
   let timer: null | NodeJS.Timeout = null;
   const getMonitor = (flag = false) => {
     if (Object.prototype.toString.call(timer) === '[object Null]') {
-      timer = setTimeout(async () => {
-        await getDataSource();
-        if (timer) {
-          timer = null;
-        }
-        getMonitor();
-      }, flag? 0 : 1000);
+      timer = setTimeout(
+        async () => {
+          await getDataSource();
+          if (timer) {
+            timer = null;
+          }
+          getMonitor();
+        },
+        flag ? 0 : 1000
+      );
     }
   };
 
@@ -146,7 +145,6 @@
     //     return data;
     //   });
     // }
-
   };
 
   const getSelectRow = (selectRow, index) => {
@@ -355,19 +353,19 @@
       background: #264d8833 !important;
     }
     .@{ventSpace}-table-row-selected {
-      background: #00c0a311  !important;
+      background: #00c0a311 !important;
       td {
         background-color: #00000000 !important;
       }
     }
     .@{ventSpace}-table-thead {
       // background: linear-gradient(#004a8655 0%, #004a86aa 10%) !important;
-      background: #3d9dd45d!important;
+      background: #3d9dd45d !important;
 
       & > tr > th,
       .@{ventSpace}-table-column-title {
         // color: #70f9fc !important;
-        border-color: #84f2ff  !important;
+        border-color: #84f2ff !important;
         border-left: none !important;
         border-right: none !important;
         padding: 7px;

src/views/vent/monitorManager/beltTunMonitor/beltTun.data.ts

@@ -241,7 +241,7 @@ export const windColumns: BasicColumn[] = [
   },
   {
     title: '风量',
-    dataIndex: 'm3',
+    dataIndex: 'm³',
     width: 80,
     align: 'center',
   },

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

@@ -1,107 +1,96 @@
 <template>
   <BasicModal @register="register" title="预警详情" width="100%" v-bind="$attrs" @ok="onSubmit" @cancel="onSubmit" :defaultFullscreen="true">
-    <MonitorTable ref="monitorTable" :columnsType="`${deviceType}_monitor`" :dataSource="dataSource"
-      design-scope="device_monitor" :isShowPagination="false" :isShowActionColumn="true" title="设备监测">
-
+    <MonitorTable
+      ref="monitorTable"
+      :columnsType="`${deviceType}_monitor`"
+      :dataSource="dataSource"
+      design-scope="device_monitor"
+      :isShowPagination="false"
+      :isShowActionColumn="true"
+      title="设备监测"
+    >
       <template #filterCell="{ column, record }">
         <template v-if="deviceType.startsWith('gate')">
           <template v-if="record.frontGateOpenCtrl">
-            <a-tag
-              v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0"
-              color="red">正在打开</a-tag>
+            <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0" color="red">正在打开</a-tag>
             <a-tag v-else-if="column.dataIndex === 'frontGateOpen'" color="processing">打开</a-tag>
           </template>
           <template v-else>
-            <a-tag
-              v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0"
-              color="red">正在关闭</a-tag>
-            <a-tag
-              v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 1"
-              color="default">关闭</a-tag>
-            <a-tag
-              v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 1 && record.frontGateClose == 0"
-              color="default">打开</a-tag>
+            <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0" color="red">正在关闭</a-tag>
+            <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 1" color="default"
+              >关闭</a-tag
+            >
+            <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 1 && record.frontGateClose == 0" color="default"
+              >打开</a-tag
+            >
           </template>
           <template v-if="record.rearGateOpenCtrl">
-            <a-tag
-              v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0"
-              color="red">正在打开</a-tag>
+            <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0" color="red">正在打开</a-tag>
             <a-tag v-else-if="column.dataIndex === 'rearGateOpen'" color="processing">打开</a-tag>
           </template>
           <template v-else>
-            <a-tag
-              v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0"
-              color="red">正在关闭</a-tag>
-            <a-tag
-              v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 1"
-              color="default">关闭</a-tag>
-            <a-tag
-              v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 1 && record.rearGateClose == 0"
-              color="default">打开</a-tag>
+            <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0" color="red">正在关闭</a-tag>
+            <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 1" color="default"
+              >关闭</a-tag
+            >
+            <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 1 && record.rearGateClose == 0" color="default"
+              >打开</a-tag
+            >
           </template>
         </template>
         <template v-if="deviceType.startsWith('windrect')">
-          <a-tag v-if="column.dataIndex === 'sign'"
-            :color="record.sign == 0 ? '#95CF65' : record.sign == 1 ? '#4590EA' : '#9876AA'"> {{
-              record.sign == 0 ? '高位' : record.sign == 1 ? '中位' : '低位'
-            }}</a-tag>
+          <a-tag v-if="column.dataIndex === 'sign'" :color="record.sign == 0 ? '#95CF65' : record.sign == 1 ? '#4590EA' : '#9876AA'">
+            {{ record.sign == 0 ? '高位' : record.sign == 1 ? '中位' : '低位' }}</a-tag
+          >
           <template v-if="record && column && column.dataIndex === 'isRun' && record.isRun">
-            <a-tag v-if="record.isRun == -2 || record.isRun == -1"
-              :color="record.isRun == -2 ? '#95CF65' : '#ED5700'">{{
-                record.isRun == -2 ? '空闲' : '等待'
-              }}</a-tag>
+            <a-tag v-if="record.isRun == -2 || record.isRun == -1" :color="record.isRun == -2 ? '#95CF65' : '#ED5700'">{{
+              record.isRun == -2 ? '空闲' : '等待'
+            }}</a-tag>
             <a-tag v-else-if="record.isRun == 100" color="#4693FF">完成</a-tag>
             <Progress v-else :percent="Number(record.isRun)" size="small" status="active" />
           </template>
         </template>
-        <a-tag v-if="column.dataIndex === 'warnFlag'"
-          :color="record.warnFlag == 0 ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'"> {{
-            record.warnFlag == 0 ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测'
-          }}</a-tag>
-        <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == 0 ? 'default' : 'green'">{{
-          record.netStatus == 0 ? '断开' : '连接'
+        <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'">
+          {{ record.warnFlag == 0 ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测' }}</a-tag
+        >
+        <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
+          record.netStatus == '0' ? '断开' : '连接'
         }}</a-tag>
       </template>
     </MonitorTable>
   </BasicModal>
 </template>
 <script lang="ts" setup>
+  import { onMounted, ref, defineEmits, onUnmounted, watch } from 'vue';
+  import MonitorTable from '../comment/MonitorTable.vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
 
-import { onMounted, ref, defineEmits, onUnmounted, watch } from 'vue';
-import MonitorTable from '../comment/MonitorTable.vue';
-import { BasicModal, useModalInner } from '/@/components/Modal';
-
-const emit = defineEmits(['close', 'register'])
-const props = defineProps({
-  deviceType: { 
-    type: String,
-    default: ''
-  },
-  scroll: {
-    type: Object,
-    default: { y: 0 }
-  }
-})
-
-const dataSource = ref([]);
-
-// 注册 modal
-const [register, { closeModal }] = useModalInner();
+  const emit = defineEmits(['close', 'register']);
+  const props = defineProps({
+    deviceType: {
+      type: String,
+      default: '',
+    },
+    scroll: {
+      type: Object,
+      default: { y: 0 },
+    },
+  });
 
-async function onSubmit() {
-  emit('close')
-  closeModal();
-}
+  const dataSource = ref([]);
 
-onMounted(async () => {
+  // 注册 modal
+  const [register, { closeModal }] = useModalInner();
 
-});
-onUnmounted(() => {
+  async function onSubmit() {
+    emit('close');
+    closeModal();
+  }
 
-});
+  onMounted(async () => {});
+  onUnmounted(() => {});
 </script>
 <style scoped lang="less">
-
   @import '/@/design/vent/color.less';
   @import '/@/design/vent/modal.less';
   .padding-0 {
@@ -141,63 +130,62 @@ onUnmounted(() => {
       margin-top: 10px;
     }
   }
-    .@{ventSpace}-picker,
-    .@{ventSpace}-select-selector {
-      width: 100% !important;
-      background: #00000017 !important;
-      border: 1px solid @vent-form-item-boder !important;
-      input,
-      .@{ventSpace}-select-selection-item,
-      .@{ventSpace}-picker-suffix {
-        color: #fff !important;
-      }
-      .@{ventSpace}-select-selection-placeholder {
-        color: #b7b7b7 !important;
-      }
-    }
-    .@{ventSpace}-pagination-next,
-    .action,
-    .@{ventSpace}-select-arrow,
-    .@{ventSpace}-picker-separator {
+  .@{ventSpace}-picker,
+  .@{ventSpace}-select-selector {
+    width: 100% !important;
+    background: #00000017 !important;
+    border: 1px solid @vent-form-item-boder !important;
+    input,
+    .@{ventSpace}-select-selection-item,
+    .@{ventSpace}-picker-suffix {
       color: #fff !important;
     }
-    .@{ventSpace}-table-cell-row-hover {
-      background: #264d8833 !important;
+    .@{ventSpace}-select-selection-placeholder {
+      color: #b7b7b7 !important;
     }
-    .@{ventSpace}-table-row-selected {
-      background: #00c0a311  !important;
-      td {
-        background-color: #00000000 !important;
-      }
+  }
+  .@{ventSpace}-pagination-next,
+  .action,
+  .@{ventSpace}-select-arrow,
+  .@{ventSpace}-picker-separator {
+    color: #fff !important;
+  }
+  .@{ventSpace}-table-cell-row-hover {
+    background: #264d8833 !important;
+  }
+  .@{ventSpace}-table-row-selected {
+    background: #00c0a311 !important;
+    td {
+      background-color: #00000000 !important;
     }
-    .@{ventSpace}-table-thead {
-      // background: linear-gradient(#004a8655 0%, #004a86aa 10%) !important;
-      background: #3d9dd45d!important;
+  }
+  .@{ventSpace}-table-thead {
+    // background: linear-gradient(#004a8655 0%, #004a86aa 10%) !important;
+    background: #3d9dd45d !important;
 
-      & > tr > th,
-      .@{ventSpace}-table-column-title {
-        // color: #70f9fc !important;
-        border-color: #84f2ff  !important;
-        border-left: none !important;
-        border-right: none !important;
-        padding: 7px;
-      }
+    & > tr > th,
+    .@{ventSpace}-table-column-title {
+      // color: #70f9fc !important;
+      border-color: #84f2ff !important;
+      border-left: none !important;
+      border-right: none !important;
+      padding: 7px;
     }
+  }
 
-    .@{ventSpace}-table-tbody {
-      tr > td {
-        padding: 12px;
-      }
-    }
-    .@{ventSpace}-table-tbody > tr:hover.@{ventSpace}-table-row > td {
-      background-color: #26648855 !important;
+  .@{ventSpace}-table-tbody {
+    tr > td {
+      padding: 12px;
     }
+  }
+  .@{ventSpace}-table-tbody > tr:hover.@{ventSpace}-table-row > td {
+    background-color: #26648855 !important;
+  }
 
-    .jeecg-basic-table-row__striped {
-      // background: #97efff11 !important;
-      td {
-        background-color: #97efff11 !important;
-      }
+  .jeecg-basic-table-row__striped {
+    // background: #97efff11 !important;
+    td {
+      background-color: #97efff11 !important;
     }
-  
+  }
 </style>

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

@@ -1,7 +1,17 @@
 <template>
   <div class="vent-table">
     <a-radio-group v-model:value="selectRowIndex" @change="setSelectedRowKeys" style="width: 100%">
-      <a-table :columns="columns" :pagination="false" :data-source="dataTableSource" ref="tableRef" bordered style="margin-top: 5px" :scroll="tableScroll" :selectType="'radio'" :customRow="rowClick">
+      <a-table
+        :columns="columns"
+        :pagination="false"
+        :data-source="dataTableSource"
+        ref="tableRef"
+        bordered
+        style="margin-top: 5px"
+        :scroll="tableScroll"
+        :selectType="'radio'"
+        :customRow="rowClick"
+      >
         <template #bodyCell="{ column, record }">
           <template v-if="column.dataIndex === 'isCheck'">
             <a-radio :value="record.deviceID" />
@@ -9,10 +19,9 @@
           <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : 'red'">{{
             record.warnFlag == 0 ? '正常' : '报警'
           }}</a-tag>
-          <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == 0 ? 'default' : 'green'">{{
-            record.netStatus == 0 ? '断开' : '连接'
+          <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
+            record.netStatus == '0' ? '断开' : '连接'
           }}</a-tag>
-          
         </template>
         <template #operation="{ column, record }">
           <slot name="action" v-bind="{ column, record }"></slot>
@@ -46,32 +55,32 @@
     },
     scroll: {
       type: Object,
-      default: () => null
+      default: () => null,
     },
     isAction: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isShowSelect: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   });
-  const tableRef = ref()
+  const tableRef = ref();
   const emits = defineEmits(['selectRow']);
   const dataTableSource = ref<any[]>([]);
   const loading = ref(true);
-  const tableScroll = props.scroll.y ? ref({ y: props.scroll.y, x: 'max-content' }) : ref({})
-  let scrollY = 0
-  const columns = ref<any[]>([])
+  const tableScroll = props.scroll.y ? ref({ y: props.scroll.y, x: 'max-content' }) : ref({});
+  let scrollY = 0;
+  const columns = ref<any[]>([]);
   // 默认初始是第一行
   const selectRowIndex = ref(-1);
-  const headElHeight = ref(0)
+  const headElHeight = ref(0);
 
   const rowClick = (record) => {
     return {
       onClick: () => {
-        setSelectedRowKeys(record['deviceID'])
+        setSelectedRowKeys(record['deviceID']);
       },
     };
   };
@@ -115,8 +124,8 @@
         }
       },
       customRender: function ({ index }) {
-        return index/2 + 1;
-      }
+        return index / 2 + 1;
+      },
     };
     const runDevice = {
       title: '运行风机',
@@ -126,7 +135,7 @@
     };
 
     columns.value = getTableHeaderColumns(columnsType);
-    console.log('风机columns------------------>', columnsType)
+    console.log('风机columns------------------>', columnsType);
     if (columns.value && columns.value.length < 1) {
       columns.value = getTableHeaderColumns(columnsType.split('_')[0] + '_monitor');
     }
@@ -143,8 +152,8 @@
         }
       };
     }
-    columns.value.forEach(item => {
-      if(item.dataIndex === 'strinstallpos' || item.dataIndex === 'strname' || item.dataIndex.endsWith('_merge')){
+    columns.value.forEach((item) => {
+      if (item.dataIndex === 'strinstallpos' || item.dataIndex === 'strname' || item.dataIndex.endsWith('_merge')) {
         item.customCell = (_, index) => {
           if (index % 2 == 0) {
             return { rowSpan: 2 };
@@ -153,52 +162,55 @@
           }
         };
       }
-    })
-    
+    });
+
     columns.value.splice(1, 0, runDevice);
     if (props.isShowSelect) {
       columns.value = [isCheckColumn, ...columns.value];
-    }else{
+    } else {
       columns.value = [indexColumn, ...columns.value];
     }
 
-    if(props.isAction){
-       columns.value = [...columns.value, {
-        title: '操作',
-        dataIndex: 'operation',
-        width: 120,
-        align: 'center',
-        slots: { customRender: 'operation' },
-        customCell:(_, index) => {
-          if (index % 2 == 0) {
-            return { rowSpan: 2 };
-          } else {
-            return { rowSpan: 0 };
-          }
-        }
-      }];
+    if (props.isAction) {
+      columns.value = [
+        ...columns.value,
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          width: 120,
+          align: 'center',
+          slots: { customRender: 'operation' },
+          customCell: (_, index) => {
+            if (index % 2 == 0) {
+              return { rowSpan: 2 };
+            } else {
+              return { rowSpan: 0 };
+            }
+          },
+        },
+      ];
     }
     // columns.value = [...columns.value, ...columns.value]
     return columns;
   }
-  
+
   watch(
     () => {
       return props.columnsType;
     },
     (newVal, oldVal) => {
-      if (!newVal) return
-      setColumns(newVal)
+      if (!newVal) return;
+      setColumns(newVal);
       nextTick(() => {
         const headEl = document.querySelector(`.zxm-table-thead`);
         if (headEl) {
-          headElHeight.value = headEl.clientHeight
-          tableScroll.value = { y: (scrollY || props.scroll.y) - (headElHeight.value - 56), x: 'max-content' }
+          headElHeight.value = headEl.clientHeight;
+          tableScroll.value = { y: (scrollY || props.scroll.y) - (headElHeight.value - 56), x: 'max-content' };
         }
-      })
+      });
     },
     {
-      immediate: true
+      immediate: true,
     }
   );
   watch(
@@ -214,31 +226,31 @@
         // 将主风机、备风机的数据进行拆分
         columns.value.forEach((column) => {
           const columnKey = column.dataIndex;
-          if(columnKey){
+          if (columnKey) {
             if (columnKey.startsWith('Fan')) {
               const key1 = columnKey.replace('Fan', 'Fan1');
               const key2 = columnKey.replace('Fan', 'Fan2');
               if (columnKey.endsWith('_merge')) {
-                resultData1[columnKey] = (data[key1] == 0 || data[key1] == null || data[key1] == undefined) ? data[key2] :  data[key1];
-              }else{
+                resultData1[columnKey] = data[key1] == 0 || data[key1] == null || data[key1] == undefined ? data[key2] : data[key1];
+              } else {
                 resultData1[columnKey] = data[key1];
                 resultData2[columnKey] = data[key2];
                 if (resultData1[columnKey] == undefined && resultData2[columnKey] == undefined) {
-                  resultData1[columnKey] = data[columnKey]
-                  resultData2[columnKey] = data[columnKey]
+                  resultData1[columnKey] = data[columnKey];
+                  resultData2[columnKey] = data[columnKey];
                 }
-              }              
-            } else if(columnKey.startsWith('fan')) {
+              }
+            } else if (columnKey.startsWith('fan')) {
               const key1 = columnKey.replace('fan', 'fan1');
               const key2 = columnKey.replace('fan', 'fan2');
               if (columnKey.endsWith('_merge')) {
-                resultData1[columnKey] = (!data[key1] || data[key1] == 0 || data[key1] == null || data[key1] == undefined ) ? data[key2] : data[key1];
+                resultData1[columnKey] = !data[key1] || data[key1] == 0 || data[key1] == null || data[key1] == undefined ? data[key2] : data[key1];
               } else {
                 resultData1[columnKey] = data[key1];
                 resultData2[columnKey] = data[key2];
-                if(resultData1[columnKey] == undefined && resultData2[columnKey] == undefined){
-                  resultData1[columnKey] = data[columnKey]
-                  resultData2[columnKey] = data[columnKey]
+                if (resultData1[columnKey] == undefined && resultData2[columnKey] == undefined) {
+                  resultData1[columnKey] = data[columnKey];
+                  resultData2[columnKey] = data[columnKey];
                 }
               }
             } else if (columnKey.endsWith('_merge')) {
@@ -249,10 +261,10 @@
           }
         });
         resultData1['deviceID'] = resultData2['deviceID'] = data['deviceID'];
-        if(props.columnsType.startsWith('fanlocal')){
+        if (props.columnsType.startsWith('fanlocal')) {
           resultData1['runDevice'] = '主机';
           resultData2['runDevice'] = '备机';
-        }else{
+        } else {
           resultData1['runDevice'] = '1#风机';
           resultData2['runDevice'] = '2#风机';
         }
@@ -268,22 +280,22 @@
       loading.value = false;
     }
   );
-  
-  watch(() => props.scroll.y, (newVal) => {
+
+  watch(
+    () => props.scroll.y,
+    (newVal) => {
       if (newVal) {
-        scrollY = newVal
-        tableScroll.value = { y: newVal - (headElHeight.value - 56) , x: 'max-content' }
+        scrollY = newVal;
+        tableScroll.value = { y: newVal - (headElHeight.value - 56), x: 'max-content' };
       } else {
-        tableScroll.value = {}
+        tableScroll.value = {};
       }
     }
-  )
+  );
 
   onMounted(() => {
     // 如果是https
     // 反之是websocket
-    
-
   });
 
   onUnmounted(() => {});
@@ -298,12 +310,11 @@
 
   :deep(.@{ventSpace}-table-body) {
     height: auto !important;
-    &::-webkit-scrollbar{
+    &::-webkit-scrollbar {
       height: 5px !important;
     }
   }
   :deep(.jeecg-basic-table .@{ventSpace}-table-wrapper .@{ventSpace}-table-title) {
     min-height: 0;
   }
- 
 </style>

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

@@ -174,8 +174,9 @@ import { onMounted } from 'vue';
               label: '时间区间',
               field: 'tickectDate',
               component: 'TimeRangePicker',
-              defaultValue: dayjs('HH:mm:ss'),
+              defaultValue: [dayjs().startOf('date').format('HH:mm:ss'), dayjs().format('HH:mm:ss')],
               componentProps: {
+                placement: 'topLeft',
                 placeholder: ['开始时间', '结束时间'],
                 valueFormat: 'HH:mm:ss',
               },
@@ -219,6 +220,7 @@ import { onMounted } from 'vue';
               label: '间隔时间',
               field: 'skip',
               component: 'Select',
+              defaultValue: 5,
               componentProps: {
                 options: [
                   {
@@ -274,6 +276,7 @@ import { onMounted } from 'vue';
         },
         beforeFetch(params) {
           params.strtype = props.deviceType + '*';
+          debugger;
           if(props.sysId){
             params.sysId = props.sysId;
           }

src/views/vent/monitorManager/compressor/nitrogen.dixia.threejs.ts

@@ -62,7 +62,7 @@ class NitrogenUnderground {
         y: 95,
       },
       {
-        text: `风量(m3/min):`,
+        text: `风量(m³/min):`,
         font: 'normal 29px Arial',
         color: '#009900',
         strokeStyle: '#002200',

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

@@ -196,7 +196,7 @@ export const majorColumns: BasicColumn[] = [
   {
     title: '风量(m³/min)',
     align: 'center',
-    dataIndex: 'm3',
+    dataIndex: 'm³',
     width: 110,
   },
 

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

@@ -121,9 +121,9 @@
                   <div v-if="!record.highRange && column.dataIndex === 'highRange'">-</div>
                   <div v-if="!record.lowRange && column.dataIndex === 'lowRange'">-</div>
                   <div v-if="!record.dataTypeName && column.dataIndex === 'dataTypeName'">-</div>
-                  <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == 0 ? 'default' : 'green'">{{
-                    record.netStatus == 0 ? '断开' : '连接'
-                  }}</a-tag>
+                  <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
+                  record.netStatus == '0' ? '断开' : '连接'
+                }}</a-tag>
                 </template>
               </MonitorTable>
             </template>
@@ -240,8 +240,8 @@
                     <a-tag v-else-if="record.warnLevel == '1001'" color="default">网络中断</a-tag>
                     <a-tag v-else color="green">正常</a-tag>
                   </template>
-                  <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == 0 ? 'default' : 'green'">{{
-                    record.netStatus == 0 ? '断开' : '连接'
+                  <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
+                    record.netStatus == '0' ? '断开' : '连接'
                   }}</a-tag>
                 </template>
               </MonitorTable>
@@ -590,7 +590,7 @@ function goDetail(record?) {
     } else if (deviceType.value.startsWith('bundletube')) {
       currentModal.value = BundleModal
       modalVisible.value = true;
-    } else if (deviceType.value.startsWith('Ballvalve')) {
+    } else if (deviceType.value.startsWith('ballvalve')) {
       currentModal.value = BallvalveModal
       modalVisible.value = true;
     } else if (deviceType.value.indexOf("gate") != -1) {

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

@@ -53,7 +53,7 @@ export const sensorColumns: BasicColumn[] = [
   },
   {
     title: '风量(m³)',
-    dataIndex: 'm3',
+    dataIndex: 'm³',
     width: 100,
     align: 'center',
   },

src/views/vent/monitorManager/fanLocalMonitor/fanLocal.three.ts

@@ -79,10 +79,12 @@ const setModalPosition = () => {
 };
 
 const setControls = () => {
-  model.orbitControls.panSpeed = 0.5;
-  model.orbitControls.rotateSpeed = 0.5;
-  model.orbitControls.maxPolarAngle = Math.PI / 2.4;
-  model.orbitControls.minPolarAngle = Math.PI / 3;
+  if (model && model.orbitControls) {
+    model.orbitControls.panSpeed = 0.5;
+    model.orbitControls.rotateSpeed = 0.5;
+    model.orbitControls.maxPolarAngle = Math.PI / 2.4;
+    model.orbitControls.minPolarAngle = Math.PI / 3;
+  }
 };
 
 // 切换局部通风机类型

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

@@ -1,9 +1,13 @@
 <template>
   <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
-    <a-spin :spinning="loading" >
-    </a-spin>
+    <a-spin :spinning="loading" />
     <div id="fanLocal3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
-    <div v-if="globalConfig?.simulatedPassword" id="fanLocal3DCSS" class="threejs-Object-CSS" style="width: 100%; height: 100%; position: absolute; overflow: hidden; pointer-events: none;">
+    <div
+      v-if="globalConfig?.simulatedPassword"
+      id="fanLocal3DCSS"
+      class="threejs-Object-CSS"
+      style="width: 100%; height: 100%; position: absolute; overflow: hidden; pointer-events: none"
+    >
       <div style="z-index: -1; position: relative">
         <div class="elementTag" id="inputBox">
           <div class="elementContent">
@@ -36,50 +40,63 @@
       </div>
     </div>
   </div>
-  
+
   <div class="scene-box">
     <div class="top-box" v-if="!loading">
       <div class="top-center row">
         <div class="vent-flex-row" id="fanLocalSelectDom" v-if="getDictItemsByCode('fanlocaltype') && !globalConfig?.simulatedPassword">
-          <span style="color: #00f5fe; margin-left: 5px;">风机类型：</span>
-          <JDictSelectTag v-model:value="devicekide" dictCode="fanlocaltype" :showChooseOption="false" :getPopupContainer="getPopupContainer" @change="changeDeviceKind" />
+          <span style="color: #00f5fe; margin-left: 5px">风机类型：</span>
+          <JDictSelectTag
+            v-model:value="devicekide"
+            dictCode="fanlocaltype"
+            :showChooseOption="false"
+            :getPopupContainer="getPopupContainer"
+            @change="changeDeviceKind"
+          />
         </div>
         <!-- fanlocal_systeml_zj 模拟局部风机，不显示操作按钮 -->
-        <div v-if="selectData.deviceType != 'fanlocal_systeml_zj'" class="button-box" v-for="(item, index) in modalTypeArr.leftBtnArr" :key="index" @click="showModal(item)">{{ item.value }}</div>
+        <div
+          v-if="selectData.deviceType != 'fanlocal_systeml_zj'"
+          class="button-box"
+          v-for="(item, index) in modalTypeArr.leftBtnArr"
+          :key="index"
+          @click="showModal(item)"
+          >{{ item.value }}</div
+        >
       </div>
       <div class="top-right row">
         <div class="button-box" v-for="(item, index) in modalTypeArr.rightBtnArr" :key="index" @click="showModal(item)">{{ item.value }}</div>
       </div>
     </div>
     <div class="title-text">
-      {{ selectData.supplyAirAddr||selectData.stationname }}
+      {{ selectData.supplyAirAddr || selectData.strinstallpos || selectData.stationname }}
     </div>
-    <div class="data-show-box" v-if="!loading"> 
-      <div class="data-item"> 
-          <div class="item-header">环境监测</div>
-          <div class="item-container">
-            <div class="tab">
-              <div class="tab-item" :class="{ 'tab-item-active-r': warningMonitorRowIndex === 0 }" @click="selectDevice('warningMonitorRowIndex', 0)"
-                >主机</div
-              >
-              <div class="tab-item" :class="{ 'tab-item-active-r': warningMonitorRowIndex === 1 }" @click="selectDevice('warningMonitorRowIndex', 1)"
-                >备机</div
-              >
-            </div>
-            <div class="container-group">
-              <div class="warning-header">
-                <div class="header-item">
-                  <div class="header-title">报警总数</div>
-                  <div class="header-value">0</div>
-                </div>
-                <div class="header-item">
-                  <div class="header-title"> 未处理数</div>
-                  <div class="header-value">0</div>
-                </div>
+    <div class="data-show-box" v-if="!loading">
+      <div class="data-item">
+        <div class="item-header">环境监测</div>
+        <div class="item-container">
+          <div class="tab">
+            <div class="tab-item" :class="{ 'tab-item-active-r': warningMonitorRowIndex === 0 }" @click="selectDevice('warningMonitorRowIndex', 0)"
+              >主机</div
+            >
+            <div class="tab-item" :class="{ 'tab-item-active-r': warningMonitorRowIndex === 1 }" @click="selectDevice('warningMonitorRowIndex', 1)"
+              >备机</div
+            >
+          </div>
+          <div class="container-group">
+            <div class="warning-header">
+              <div class="header-item">
+                <div class="header-title">报警总数</div>
+                <div class="header-value">0</div>
               </div>
-              <div class="warning-group">
-                <template v-if="selectData.deviceType">
-                  <!-- <div class="warning-item" v-for="(state, index) in leftColumns" :key="index">
+              <div class="header-item">
+                <div class="header-title"> 未处理数</div>
+                <div class="header-value">0</div>
+              </div>
+            </div>
+            <div class="warning-group">
+              <template v-if="selectData.deviceType">
+                <!-- <div class="warning-item" v-for="(state, index) in leftColumns" :key="index">
                 <div class="item-name"><div class="icon"></div> {{ state.title }}</div>
                 <div v-if="state.dataIndex.startsWith('Fan')">
                   <div class="signal-item" v-if="warningMonitorRowIndex == 0">
@@ -133,29 +150,28 @@
                   </div>
                 </div>
               </div> -->
-                  <div class="container-item" v-for="(data, index) in leftColumns" :key="index">
-                      <div class="item-icon">
-                        <!-- <SvgIcon class="icon-style" size="18" name="temperature" /> -->
-                        <CaretRightOutlined class="icon-style" />
-                      </div>
-                      <div class="item-name">{{ data.title }}</div>
-                      <div v-if="data.dataIndex.startsWith('Fan')">
-                        <div class="item-value" v-if="dataMonitorRowIndex == 0">{{
-                          selectData[data.dataIndex.replace('Fan', 'Fan1')] ? selectData[data.dataIndex.replace('Fan', 'Fan1')] : '-'
-                        }}</div>
-                        <div class="item-value" v-if="dataMonitorRowIndex == 1">{{
-                          selectData[data.dataIndex.replace('Fan', 'Fan2')] ? selectData[data.dataIndex.replace('Fan', 'Fan2')] : '-'
-                        }}</div>
-                      </div>
-                      <div v-else>
-                        <div class="item-value">{{ selectData[data.dataIndex] ? selectData[data.dataIndex] : '-' }}</div>
-                      </div>
+                <div class="container-item" v-for="(data, index) in leftColumns" :key="index">
+                  <div class="item-icon">
+                    <!-- <SvgIcon class="icon-style" size="18" name="temperature" /> -->
+                    <CaretRightOutlined class="icon-style" />
                   </div>
-                </template>
-              </div>
+                  <div class="item-name">{{ data.title }}</div>
+                  <div v-if="data.dataIndex.startsWith('Fan')">
+                    <div class="item-value" v-if="warningMonitorRowIndex == 0">{{
+                      selectData[data.dataIndex.replace('Fan', 'Fan1')] ? selectData[data.dataIndex.replace('Fan', 'Fan1')] : '-'
+                    }}</div>
+                    <div class="item-value" v-if="warningMonitorRowIndex == 1">{{
+                      selectData[data.dataIndex.replace('Fan', 'Fan2')] ? selectData[data.dataIndex.replace('Fan', 'Fan2')] : '-'
+                    }}</div>
+                  </div>
+                  <div v-else>
+                    <div class="item-value">{{ selectData[data.dataIndex] ? selectData[data.dataIndex] : '-' }}</div>
+                  </div>
+                </div>
+              </template>
             </div>
           </div>
-          
+        </div>
       </div>
       <div class="data-item">
         <div class="item-header">设备监测</div>
@@ -168,7 +184,7 @@
               >备机</div
             >
           </div>
-          <div class="container-group container-group-l" >
+          <div class="container-group container-group-l">
             <template v-if="!loading">
               <div class="container-item" v-for="(data, index) in rightColumns" :key="index">
                 <div class="item-icon">
@@ -195,15 +211,23 @@
       </div>
     </div>
     <div class="bottom-tabs-box" @mousedown="setDivHeight($event, 170, scroll, 180)">
-      <dv-border-box8 :dur="5" class="dv_border_8"  :style="`bottom: 20px; padding: 5px; height: ${scroll.y + 140}px`" >
+      <dv-border-box8 :dur="5" class="dv_border_8" :style="`bottom: 20px; padding: 5px; height: ${scroll.y + 140}px`">
         <!-- <div class="enter-detail" @click="goDetail()">
           <send-outlined class=""/>风机运行详情
         </div> -->
         <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
           <a-tab-pane key="1" tab="实时监测">
-            <GroupMonitorTable  v-if="activeKey === '1'" ref="MonitorDataTable" :dataSource="dataSource" :columnsType="`${selectData.deviceType}_monitor`" @selectRow="getSelectRow" :scroll="scroll" :is-action="true">
+            <GroupMonitorTable
+              v-if="activeKey === '1'"
+              ref="MonitorDataTable"
+              :dataSource="dataSource"
+              :columnsType="`${selectData.deviceType}_monitor`"
+              @selectRow="getSelectRow"
+              :scroll="scroll"
+              :is-action="true"
+            >
               <template #action="{ record }">
-                <a class="table-action-link" @click="deviceEdit($event, 'reportInfo', record)">报表录入</a>
+                <a v-if="globalConfig?.showReport" class="table-action-link" @click="deviceEdit($event, 'reportInfo', record)">报表录入</a>
                 <a class="table-action-link" @click="deviceEdit($event, 'deviceInfo', record)">设备编辑</a>
               </template>
             </GroupMonitorTable>
@@ -234,17 +258,35 @@
           </a-tab-pane>
           <a-tab-pane key="3" tab="历史数据">
             <div class="tab-item" v-if="activeKey === '3'">
-              <HistoryTable :columns-type="`${selectData.deviceType}`" :device-type="`${devicekide}`" :device-list-api="baseList" designScope="fanlocal-history" :scroll="scroll" />
+              <HistoryTable
+                :columns-type="`${selectData.deviceType}`"
+                :device-type="`${devicekide}`"
+                :device-list-api="baseList"
+                designScope="fanlocal-history"
+                :scroll="scroll"
+              />
             </div>
           </a-tab-pane>
           <a-tab-pane key="4" tab="报警历史">
             <div class="tab-item" v-if="activeKey === '4'">
-              <AlarmHistoryTable columns-type="alarm" :device-type="`${devicekide}`" :device-list-api="baseList" designScope="alarm-history" :scroll="scroll" />
+              <AlarmHistoryTable
+                columns-type="alarm"
+                :device-type="`${devicekide}`"
+                :device-list-api="baseList"
+                designScope="alarm-history"
+                :scroll="scroll"
+              />
             </div>
           </a-tab-pane>
           <a-tab-pane key="5" tab="操作历史">
             <div class="tab-item" v-if="activeKey === '5'">
-              <HandlerHistoryTable columns-type="operator_history" :device-type="`${devicekide}`" :device-list-api="baseList" designScope="alarm-history" :scroll="scroll" />
+              <HandlerHistoryTable
+                columns-type="operator_history"
+                :device-type="`${devicekide}`"
+                :device-list-api="baseList"
+                designScope="alarm-history"
+                :scroll="scroll"
+              />
             </div>
           </a-tab-pane>
         </a-tabs>
@@ -254,7 +296,10 @@
   <!-- <div style="z-index: -1; position: absolute; top: 50px; right: 10px; width: 300px; height: 280px; margin: auto" class="player1">
     <LivePlayer id="jb-player1" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
   </div> -->
-  <div ref="playerRef" style="z-index: 999; position: absolute; top: 100px; right: 15px; width: 100%; height: 100%; margin: auto; pointer-events: none;">
+  <div
+    ref="playerRef"
+    style="z-index: 999; position: absolute; top: 100px; right: 15px; width: 100%; height: 100%; margin: auto; pointer-events: none"
+  >
   </div>
   <a-modal v-model:visible="modalIsShow" :title="modalTitle" @ok="handleOk">
     <div class="modal-container">
@@ -339,7 +384,7 @@
       </div>
     </div>
   </a-modal>
-  <DeviceBaseInfo @register="registerModal" :device-type="selectData['deviceType']"/>
+  <DeviceBaseInfo @register="registerModal" :device-type="selectData['deviceType']" />
 </template>
 
 <script setup lang="ts">
@@ -369,7 +414,7 @@
   import { getPopupContainer } from '/@/utils';
   import { getDictItemsByCode } from '/@/utils/dict';
   import { message } from 'ant-design-vue';
-   import { useCamera } from '/@/hooks/system/useCamera';
+  import { useCamera } from '/@/hooks/system/useCamera';
   import { CaretRightOutlined } from '@ant-design/icons-vue';
 
   const globalConfig = inject('globalConfig');
@@ -378,96 +423,97 @@
   const { currentRoute } = useRouter();
 
   const modalTypeArr = reactive(
-    VENT_PARAM['simulatedPassword'] ? 
-    {
-      leftBtnArr: [
-        {
-          key: 'startSmoke',
-          value: '启动风机',
-        },
-        {
-          key: 'changeSmoke',
-          value: '一键倒机',
-        },
-        // {
-        //   key: 'Fan1Frequency',
-        //   value: '主机调频',
-        // },
-        // {
-        //   key: 'Fan2Frequency',
-        //   value: '备机调频',
-        // },
-        {
-          key: 'windPower',
-          value: '风电闭锁',
-        },
-        {
-          key: 'gasPower',
-          value: '瓦斯电闭锁',
-        },
-        {
-          key: 'needAir',
-          value: '需风量',
-        },
-        {
-          key: 'diameter',
-          value: '风筒直径',
-        },
-        {
-          key: 'len',
-          value: '风筒长度',
-        },
-      ],
-      rightBtnArr: [
-        // {
-        //   key: 'fanlocal',
-        //   value: '变频风机',
-        // },
-        // {
-        //   key: 'fanlocaldp',
-        //   value: '定频风机',
-        // },
-        {
-          key: 'frequency',
-          value: '调频',
-        },
-        {
-          key: 'windPowerLimit',
-          value: '风电闭锁限值',
-        },
-        {
-          key: 'gasPowerLimit',
-          value: '瓦斯电闭锁限值',
-        },
-        {
-          key: 'airVolumeAlarm',
-          value: '风量报警',
-          min: 0,
-          max: 100,
-        },
-        {
-          key: 'disAirAlarm',
-          value: '漏风率报警',
-        },
-        {
-          key: 'gasAlarm',
-          value: '瓦斯报警',
-        },
-      ],
-    }: {
-      leftBtnArr: [
-        {
-          key: 'startSmoke',
-          value: '启动风机',
-        },
-        {
-          key: 'changeSmoke',
-          value: '一键倒机',
-        },
-      ],
-      rightBtnArr: [
-      ],
-    });
+    VENT_PARAM['simulatedPassword']
+      ? {
+          leftBtnArr: [
+            {
+              key: 'startSmoke',
+              value: '启动风机',
+            },
+            {
+              key: 'changeSmoke',
+              value: '一键倒机',
+            },
+            // {
+            //   key: 'Fan1Frequency',
+            //   value: '主机调频',
+            // },
+            // {
+            //   key: 'Fan2Frequency',
+            //   value: '备机调频',
+            // },
+            {
+              key: 'windPower',
+              value: '风电闭锁',
+            },
+            {
+              key: 'gasPower',
+              value: '瓦斯电闭锁',
+            },
+            {
+              key: 'needAir',
+              value: '需风量',
+            },
+            {
+              key: 'diameter',
+              value: '风筒直径',
+            },
+            {
+              key: 'len',
+              value: '风筒长度',
+            },
+          ],
+          rightBtnArr: [
+            // {
+            //   key: 'fanlocal',
+            //   value: '变频风机',
+            // },
+            // {
+            //   key: 'fanlocaldp',
+            //   value: '定频风机',
+            // },
+            {
+              key: 'frequency',
+              value: '调频',
+            },
+            {
+              key: 'windPowerLimit',
+              value: '风电闭锁限值',
+            },
+            {
+              key: 'gasPowerLimit',
+              value: '瓦斯电闭锁限值',
+            },
+            {
+              key: 'airVolumeAlarm',
+              value: '风量报警',
+              min: 0,
+              max: 100,
+            },
+            {
+              key: 'disAirAlarm',
+              value: '漏风率报警',
+            },
+            {
+              key: 'gasAlarm',
+              value: '瓦斯报警',
+            },
+          ],
+        }
+      : {
+          leftBtnArr: [
+            {
+              key: 'startSmoke',
+              value: '启动风机',
+            },
+            {
+              key: 'changeSmoke',
+              value: '一键倒机',
+            },
+          ],
+          rightBtnArr: [],
+        }
+  );
   const sensorList = ref<any[]>([
     {
       value: '1',
@@ -484,10 +530,10 @@
   ]);
 
   const scroll = reactive({
-    y: 180
-  })
-  const playerRef = ref()
-  const MonitorDataTable = ref()
+    y: 180,
+  });
+  const playerRef = ref();
+  const MonitorDataTable = ref();
   const modalSensor = ref(null);
   const loading = ref(false);
   const activeKey = ref('1');
@@ -505,7 +551,7 @@
   // 默认数据右边监测的是主机
   const warningMonitorRowIndex = ref(0);
 
-  const xAxisDataGas = ref([])
+  const xAxisDataGas = ref([]);
   // 设备数据
   const controlType = ref(1);
   const modalType = ref('fm');
@@ -520,59 +566,58 @@
     dataDequivalarea: '-',
     netStatus: '0', //通信状态
     warnLevel_str: '',
-    stationname: ''
+    stationname: '',
   };
   const dataSource = ref([]);
   // 监测数据
   let selectData = reactive(lodash.cloneDeep(initData));
-  const rightColumns = ref<BasicColumn[]>([])
-  const leftColumns = ref<BasicColumn[]>([])
-  const devicekide = ref('fanlocal')
-  const deviceType = ref(selectData.deviceType)
-  const headElHeight = ref(0)
+  const rightColumns = ref<BasicColumn[]>([]);
+  const leftColumns = ref<BasicColumn[]>([]);
+  const devicekide = ref('fanlocal');
+  const deviceType = ref(selectData.deviceType);
+  const headElHeight = ref(0);
 
-  const {getCamera, webRtcServer} = useCamera()
+  const { getCamera, webRtcServer } = useCamera();
 
-  watch(deviceType , (type) => {
-    rightColumns.value = getTableHeaderColumns(type + '_monitor_right') as []
-    if(rightColumns.value && rightColumns.value.length < 1){
-      rightColumns.value = getTableHeaderColumns(type.split('_')[0] + '_monitor_right') as []
+  watch(deviceType, (type) => {
+    rightColumns.value = getTableHeaderColumns(type + '_monitor_right') as [];
+    if (rightColumns.value && rightColumns.value.length < 1) {
+      rightColumns.value = getTableHeaderColumns(type.split('_')[0] + '_monitor_right') as [];
     }
-    leftColumns.value = getTableHeaderColumns(type + '_monitor_left') as []
+    leftColumns.value = getTableHeaderColumns(type + '_monitor_left') as [];
     if (leftColumns.value && leftColumns.value.length < 1) {
-      leftColumns.value = getTableHeaderColumns(type.split('_')[0] + '_monitor_left') as []
+      leftColumns.value = getTableHeaderColumns(type.split('_')[0] + '_monitor_left') as [];
     }
-  })
+  });
 
   const flvURL1 = () => {
     // return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
-    return ''
+    return '';
   };
-   
+
   const changeDeviceKind = (e) => {
-    devicekide.value = e
-    loading.value = true
-    selectRowIndex.value = -1
-    nextTick( () => {
+    devicekide.value = e;
+    loading.value = true;
+    selectRowIndex.value = -1;
+    nextTick(() => {
       // selectRowIndex.value = 0
-      selectData = lodash.cloneDeep(initData)
-      loading.value = false
-      if(selectData.deviceID)MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID])
-      
+      selectData = lodash.cloneDeep(initData);
+      loading.value = false;
+      if (selectData.deviceID) MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID]);
+
       const headEl = document.querySelector(`.zxm-table-thead`);
       if (headEl) {
-        headElHeight.value = headEl.clientHeight
+        headElHeight.value = headEl.clientHeight;
       }
-
-    })
-  }
+    });
+  };
 
   const tabChange = (activeKeyVal) => {
     activeKey.value = activeKeyVal;
     if (activeKeyVal == 1) {
       nextTick(() => {
-        MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID])
-      })
+        MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID]);
+      });
     }
   };
 
@@ -586,11 +631,11 @@
 
   //详情
   function goDetail() {
-    openModal()
+    openModal();
   }
   //
-  async function getDataSource(){
-    if(devicekide.value){
+  async function getDataSource() {
+    if (devicekide.value) {
       const res = await list({ devicetype: devicekide.value, pagetype: 'normal' });
       if (res.msgTxt && res.msgTxt[0] && res.msgTxt[0].datalist && res.msgTxt[0].datalist.length > 0) {
         const dataArr = res.msgTxt[0].datalist || [];
@@ -601,51 +646,54 @@
           dataSource.value.push(data);
         });
         if (MonitorDataTable.value && selectRowIndex.value == -1) {
-          MonitorDataTable.value.setSelectedRowKeys([dataSource.value[0]['deviceID']])
+          MonitorDataTable.value.setSelectedRowKeys([dataSource.value[0]['deviceID']]);
         }
         const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
         return data;
       } else {
-        return dataSource.value = []
+        return (dataSource.value = []);
       }
-    }else{
+    } else {
       dataSource.value = [];
     }
-  };
+  }
 
   // https获取监测数据
   let timer: null | NodeJS.Timeout = null;
   async function getMonitor(flag?) {
     if (Object.prototype.toString.call(timer) === '[object Null]') {
-      timer = await setTimeout(async () => {
-        await getDataSource();
-        if (dataSource.value.length > 0 && selectRowIndex.value == -1 && MonitorDataTable.value) {
-          // 初始打开页面
-          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'])
+      timer = await setTimeout(
+        async () => {
+          await getDataSource();
+          if (dataSource.value.length > 0 && selectRowIndex.value == -1 && MonitorDataTable.value) {
+            // 初始打开页面
+            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']);
+            }
           }
-        }
-        for (const key in selectData) {
-          selectData[key] = ''
-        }
-        
-        if(dataSource.value.length > 0 && dataSource.value[selectRowIndex.value]){
-          deviceType.value = dataSource.value[selectRowIndex.value]['deviceType']
-          if (dataSource.value.length > 0 && dataSource.value[selectRowIndex.value]) {
-            Object.assign(selectData, dataSource.value[selectRowIndex.value])
+          for (const key in selectData) {
+            selectData[key] = '';
           }
-          playSmoke(selectData)
-          addText(selectData);
-          if (timer) {
-            timer = null;
+
+          if (dataSource.value.length > 0 && dataSource.value[selectRowIndex.value]) {
+            deviceType.value = dataSource.value[selectRowIndex.value]['deviceType'];
+            if (dataSource.value.length > 0 && dataSource.value[selectRowIndex.value]) {
+              Object.assign(selectData, dataSource.value[selectRowIndex.value]);
+            }
+            playSmoke(selectData);
+            addText(selectData);
+            if (timer) {
+              timer = null;
+            }
           }
-        }
-        getMonitor();
-      }, flag ? 0 :1000);
+          getMonitor();
+        },
+        flag ? 0 : 1000
+      );
     }
-  };
+  }
 
   // 获取设备基本信息列表
   const deviceBaseList = ref([]);
@@ -653,11 +701,11 @@
     getTableList({ pageSize: 1000 }).then((res) => {
       deviceBaseList.value = res.records;
     });
-  };
+  }
 
   // 切换检测数据
   async function getSelectRow(id) {
-    console.log('选中的设备id------->', id)
+    console.log('选中的设备id------->', id);
 
     if (!id || id == selectData['deviceID']) return;
     // loading.value = true;
@@ -668,39 +716,39 @@
     nextTick(() => {
       const headEl = document.querySelector(`.zxm-table-thead`);
       if (headEl) {
-        headElHeight.value = headEl.clientHeight
+        headElHeight.value = headEl.clientHeight;
       }
 
       setModelType(modalType.value).then(() => {
         // loading.value = false;
       });
-      
+
       const data = dataSource.value[selectIndex];
-      if(data){
+      if (data) {
         if (data['Fan1StartStatus'] == 1) {
           mainWindIsShow1.value = 'open';
           mainWindIsShow2.value = 'stop';
-          selectDevice('warningMonitorRowIndex', 0)
-          selectDevice('dataMonitorRowIndex', 0)
+          selectDevice('warningMonitorRowIndex', 0);
+          selectDevice('dataMonitorRowIndex', 0);
         } else if (data['Fan2StartStatus'] == 1) {
           mainWindIsShow2.value = 'open';
           mainWindIsShow1.value = 'stop';
-          selectDevice('warningMonitorRowIndex', 1)
-          selectDevice('dataMonitorRowIndex', 1)
+          selectDevice('warningMonitorRowIndex', 1);
+          selectDevice('dataMonitorRowIndex', 1);
         }
-        const xAxisDataGasArr = []
+        const xAxisDataGasArr = [];
         for (const key in selectData) {
           if (key.startsWith('gas') && key.length < 5) {
-            xAxisDataGasArr.push({ key: 'T' + key.substring(3), valueKey: key })
+            xAxisDataGasArr.push({ key: 'T' + key.substring(3), valueKey: key });
           }
         }
-        xAxisDataGas.value = xAxisDataGasArr
+        xAxisDataGas.value = xAxisDataGasArr;
       }
-    })
+    });
 
-    await getCamera(id, playerRef.value)
+    await getCamera(id, playerRef.value);
     return;
-  };
+  }
 
   // 打开并设置modal的标题
   function showModal(obj) {
@@ -708,9 +756,9 @@
     modalTitle.value = obj.value;
     passWord.value = '';
     modalIsShow.value = true;
-  };
+  }
 
-  function changeMotor(e){
+  function changeMotor(e) {
     const target = e.target;
     if (target.name === 'localWind1') {
       if (target.value === 'open') {
@@ -721,7 +769,7 @@
         mainWindIsShow1.value = 'stop';
       }
     }
-  };
+  }
 
   function handleOk(e: MouseEvent) {
     const handType = modalType.value;
@@ -737,31 +785,31 @@
       if (mainWindIsShow1.value === 'open' && mainWindIsShow2.value === 'stop') {
         // playSmoke(handType, 'top', frequency, 'open');
         data.paramcode = 'CtrlFan1Start';
-        deviceControlApi(data).then(() => {
-          if (globalConfig.History_Type == 'remote') {
-            message.success('指令已下发至生产管控平台成功！')
-          } else {
-            message.success('指令已下发成功！')
-          }
-          modalTitle.value = '';
-          modalIsShow.value = false;
-        }).catch((err) => {
-
-        });
+        deviceControlApi(data)
+          .then(() => {
+            if (globalConfig.History_Type == 'remote') {
+              message.success('指令已下发至生产管控平台成功！');
+            } else {
+              message.success('指令已下发成功！');
+            }
+            modalTitle.value = '';
+            modalIsShow.value = false;
+          })
+          .catch((err) => {});
       } else if (mainWindIsShow2.value === 'open' && mainWindIsShow1.value === 'stop') {
         // playSmoke(handType, 'down', frequency, 'open');
         data.paramcode = 'CtrlFan2Start';
-        deviceControlApi(data).then(() => {
-          if (globalConfig.History_Type == 'remote') {
-            message.success('指令已下发至生产管控平台成功！')
-          } else {
-            message.success('指令已下发成功！')
-          }
-          modalTitle.value = '';
-          modalIsShow.value = false;
-        }).catch((err) => {
-
-        });
+        deviceControlApi(data)
+          .then(() => {
+            if (globalConfig.History_Type == 'remote') {
+              message.success('指令已下发至生产管控平台成功！');
+            } else {
+              message.success('指令已下发成功！');
+            }
+            modalTitle.value = '';
+            modalIsShow.value = false;
+          })
+          .catch((err) => {});
       } else if (mainWindIsShow1.value === 'stop' && mainWindIsShow2.value === 'stop') {
         // playSmoke(handType, '', frequency, 'stop');
       }
@@ -774,51 +822,49 @@
         data.paramcode = 'Fan2FreqHz';
         data.value = fan2FrequencyVal.value;
       }
-      
-      deviceControlApi(data).then((res) => {
-        if (globalConfig.History_Type == 'remote') {
-          message.success('指令已下发至生产管控平台成功！')
-        } else {
-          message.success('指令已下发成功！')
-        }
-        modalTitle.value = '';
-        modalIsShow.value = false;
-      }).catch((err) => {
-   
-      });
-    } else if (handType === 'changeSmoke') {
-      if(selectData['Fan1StartStatus'] == 0 || !selectData['Fan1StartStatus']){
-        data.paramcode = 'CtrlFan1Start';
-        deviceControlApi(data).then((res) => {
-          if (globalConfig.History_Type == 'remote') {
-            message.success('指令已下发至生产管控平台成功！')
-          } else {
-            message.success('指令已下发成功！')
-          }
-          modalTitle.value = '';
-          modalIsShow.value = false;
-          mainWindIsShow1.value = 'stop';
-          mainWindIsShow2.value = 'open';
-        }).catch((err) => {
 
-        });
-        
-      }else if(selectData['Fan2StartStatus'] == 0 || !selectData['Fan2StartStatus']){
-        data.paramcode = 'CtrlFan2Start';
-        deviceControlApi(data).then((res) => {
+      deviceControlApi(data)
+        .then((res) => {
           if (globalConfig.History_Type == 'remote') {
-            message.success('指令已下发至生产管控平台成功！')
+            message.success('指令已下发至生产管控平台成功！');
           } else {
-            message.success('指令已下发成功！')
+            message.success('指令已下发成功！');
           }
           modalTitle.value = '';
           modalIsShow.value = false;
-          mainWindIsShow1.value = 'open';
-          mainWindIsShow2.value = 'stop';
-        }).catch((err) => {
-
-        });
-        
+        })
+        .catch((err) => {});
+    } else if (handType === 'changeSmoke') {
+      if (selectData['Fan1StartStatus'] == 0 || !selectData['Fan1StartStatus']) {
+        data.paramcode = 'CtrlFan1Start';
+        deviceControlApi(data)
+          .then((res) => {
+            if (globalConfig.History_Type == 'remote') {
+              message.success('指令已下发至生产管控平台成功！');
+            } else {
+              message.success('指令已下发成功！');
+            }
+            modalTitle.value = '';
+            modalIsShow.value = false;
+            mainWindIsShow1.value = 'stop';
+            mainWindIsShow2.value = 'open';
+          })
+          .catch((err) => {});
+      } else if (selectData['Fan2StartStatus'] == 0 || !selectData['Fan2StartStatus']) {
+        data.paramcode = 'CtrlFan2Start';
+        deviceControlApi(data)
+          .then((res) => {
+            if (globalConfig.History_Type == 'remote') {
+              message.success('指令已下发至生产管控平台成功！');
+            } else {
+              message.success('指令已下发成功！');
+            }
+            modalTitle.value = '';
+            modalIsShow.value = false;
+            mainWindIsShow1.value = 'open';
+            mainWindIsShow2.value = 'stop';
+          })
+          .catch((err) => {});
       }
       // // 一键倒机
       // if (mainWindIsShow1.value === 'open' && mainWindIsShow2.value === 'stop') {
@@ -849,26 +895,25 @@
       //   // playSmoke(handType, '', frequency, 'stop');
       // }
     }
-    
-  };
+  }
 
-  function handleChangeSensor(value: string){
+  function handleChangeSensor(value: string) {
     console.log(value);
-  };
+  }
 
   function addPlayVideo() {
     if (player1.value && player1.value.play) {
       if (!player1.value.paused()) player1.value.play();
       document.body.removeEventListener('mousedown', addPlayVideo);
     }
-  };
+  }
 
-  function deviceEdit(e:Event, type:string, record) {
-    e.stopPropagation()
+  function deviceEdit(e: Event, type: string, record) {
+    e.stopPropagation();
     openModal(true, {
-     type,
-     deviceId: record['deviceID']
-    })
+      type,
+      deviceId: record['deviceID'],
+    });
   }
 
   onBeforeMount(() => {
@@ -877,14 +922,14 @@
 
   onMounted(() => {
     const { query } = unref(currentRoute);
-    if(query['deviceType']) devicekide.value = query['deviceType'] as string
+    if (query['deviceType']) devicekide.value = query['deviceType'] as string;
     mountedThree(player1.value).then(async () => {
       await getMonitor(true);
-      nextTick(async() => {
-        addCssText();        
+      nextTick(async () => {
+        addCssText();
       });
     });
-    
+
     document.body.addEventListener('mousedown', addPlayVideo, false);
   });
 
@@ -895,9 +940,9 @@
       timer = undefined;
     }
     if (webRtcServer.length > 0) {
-      webRtcServer.forEach(item => {
-        item.disconnect()
-      })
+      webRtcServer.forEach((item) => {
+        item.disconnect();
+      });
     }
   });
 </script>
@@ -907,17 +952,17 @@
     height: 100%;
   }
   .scene-box {
-    .title-text{
+    .title-text {
       height: 32px;
     }
-    .bottom-tabs-box{
+    .bottom-tabs-box {
       height: 280px;
-      .tabs-box{
+      .tabs-box {
         position: relative !important;
       }
     }
   }
- 
+
   .data-show-box {
     position: relative;
     display: flex;
@@ -1125,8 +1170,8 @@
   .label {
     max-width: 220px;
   }
-  #fanLocalSelectDom{
-    :deep(.@{ventSpace}-select-dropdown){
+  #fanLocalSelectDom {
+    :deep(.@{ventSpace}-select-dropdown) {
       left: 0px !important;
       top: 35px !important;
     }
@@ -1134,9 +1179,15 @@
   .@{ventSpace}-input {
     width: 150px;
   }
-  :deep(#LivePlayerBox){
+  :deep(#LivePlayerBox) {
     display: flex;
-    justify-content: end;
+    flex-direction: row;
+    justify-content: flex-end;
     padding-right: 380px;
+    pointer-events: none;
+    .video-parent {
+      height: 208px;
+      pointer-events: auto !important;
+    }
   }
 </style>

src/views/vent/monitorManager/fiberMonitor/fiber.data.ts

@@ -122,7 +122,7 @@ export const innerResultColumns: BasicColumn[] = [
   },
   {
     title: '风量',
-    dataIndex: 'm3',
+    dataIndex: 'm³',
     align: 'center',
     width: 100,
   },

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

@@ -1,6 +1,5 @@
 <template>
-  <div class="bg"
-    style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
+  <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
     <a-spin :spinning="loading" />
     <!-- <div
         id="fiber3DCSS"
@@ -22,24 +21,19 @@
           </div>
         </div>
     </div> -->
-    <div id="fiberBox"  style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
+    <div id="fiberBox" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
   </div>
   <div class="scene-box">
     <div class="top-box">
       <div class="top-center">
         <div class="input-box">
           <span class="input-title">模型展示范围：</span>
-          <a-select
-            class="title-select"
-            ref="select"
-            v-model:value="currentLen"
-            @change="handleLenChange"
-          >
+          <a-select class="title-select" ref="select" v-model:value="currentLen" @change="handleLenChange">
             <a-select-option value="1">0m~1000m</a-select-option>
             <a-select-option value="2">1000m~2000m</a-select-option>
             <a-select-option value="3">2000m~3000m</a-select-option>
           </a-select>
-        </div>          
+        </div>
       </div>
     </div>
     <div class="title-text">
@@ -48,14 +42,19 @@
     <div class="bottom-tabs-box">
       <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
         <a-tab-pane key="1" tab="实时监测">
-          <MonitorTable columnsType="fiber_monitor"  :dataSource="dataSource" @selectRow="getSelectRow"
-            design-scope="fiber-monitor" title="皮带机监测">
+          <MonitorTable
+            columnsType="fiber_monitor"
+            :dataSource="dataSource"
+            @selectRow="getSelectRow"
+            design-scope="fiber-monitor"
+            title="皮带机监测"
+          >
             <template #filterCell="{ column, record }">
               <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : 'red'">{{
                 record.warnFlag == 0 ? '正常' : '报警'
               }}</a-tag>
-              <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == 0 ? 'default' : 'green'">{{
-                record.netStatus == 0 ? '断开' : '连接'
+              <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
+                record.netStatus == '0' ? '断开' : '连接'
               }}</a-tag>
               <div v-if="record.nwindownum == 1 && column.dataIndex === 'rearArea'">/</div>
             </template>
@@ -63,26 +62,30 @@
         </a-tab-pane>
         <a-tab-pane key="2" tab="实时曲线图" force-render>
           <div class="tab-item" v-if="activeKey === '2'">
-            <DeviceEcharts chartsColumnsType="fiber_chart" xAxisPropType="strname" :dataSource="dataSource" height="100%"
-              :chartsColumns="chartsColumns" :device-list-api="baseList" device-type="fiber" />
+            <DeviceEcharts
+              chartsColumnsType="fiber_chart"
+              xAxisPropType="strname"
+              :dataSource="dataSource"
+              height="100%"
+              :chartsColumns="chartsColumns"
+              :device-list-api="baseList"
+              device-type="fiber"
+            />
           </div>
         </a-tab-pane>
         <a-tab-pane key="3" tab="历史数据">
           <div class="tab-item">
-            <HistoryTable columns-type="fibre" device-type="fiber" :device-list-api="baseList"
-              designScope="fiber-history" />
+            <HistoryTable columns-type="fibre" device-type="fiber" :device-list-api="baseList" designScope="fiber-history" />
           </div>
         </a-tab-pane>
         <a-tab-pane key="4" tab="报警历史">
           <div class="tab-item">
-            <AlarmHistoryTable columns-type="alarm" device-type="fiber" :device-list-api="baseList"
-              designScope="alarm-history" />
+            <AlarmHistoryTable columns-type="alarm" device-type="fiber" :device-list-api="baseList" designScope="alarm-history" />
           </div>
         </a-tab-pane>
         <a-tab-pane key="5" tab="操作历史">
           <div class="tab-item">
-            <HandlerHistoryTable columns-type="operator_history" device-type="fiber" :device-list-api="baseList"
-              designScope="alarm-history" />
+            <HandlerHistoryTable columns-type="operator_history" device-type="fiber" :device-list-api="baseList" designScope="alarm-history" />
           </div>
         </a-tab-pane>
       </a-tabs>
@@ -91,199 +94,195 @@
 </template>
 
 <script setup lang="ts">
-import DeviceEcharts from '../comment/DeviceEcharts.vue';
-import { onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw, watch } from 'vue';
-import MonitorTable from '../comment/MonitorTable.vue';
-import HistoryTable from '../comment/HistoryTable.vue';
-import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
-import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
-import { mountedThree, destroy, setModelType, refreshModal, addFiberText } from './fiber.threejs';
-import { list, getTableList } from './fiber.api';
-import { list as baseList } from '../../deviceManager/windWindowTabel/ventanalyWindow.api';
-import { chartsColumns } from './fiber.data';
-import lodash from 'lodash';
+  import DeviceEcharts from '../comment/DeviceEcharts.vue';
+  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw, watch } from 'vue';
+  import MonitorTable from '../comment/MonitorTable.vue';
+  import HistoryTable from '../comment/HistoryTable.vue';
+  import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
+  import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
+  import { mountedThree, destroy, setModelType, refreshModal, addFiberText } from './fiber.threejs';
+  import { list, getTableList } from './fiber.api';
+  import { list as baseList } from '../../deviceManager/windWindowTabel/ventanalyWindow.api';
+  import { chartsColumns } from './fiber.data';
+  import lodash from 'lodash';
 
-const fiberListNum = ref(3)
+  const fiberListNum = ref(3);
 
-const deviceBaseList = ref([]);
-const activeKey = ref('1');
-const loading = ref(false);
+  const deviceBaseList = ref([]);
+  const activeKey = ref('1');
+  const loading = ref(false);
 
-const warningNum = ref<number[]>([])
-const errorNum = ref<number[]>([])
+  const warningNum = ref<number[]>([]);
+  const errorNum = ref<number[]>([]);
 
+  // 默认初始是第一行
+  const selectRowIndex = ref(0);
+  const dataSource = ref([]);
 
-// 默认初始是第一行
-const selectRowIndex = ref(0);
-const dataSource = ref([]);
+  const currentLen = ref('1'); // 选择光纤距离
 
-const currentLen = ref('1') // 选择光纤距离
+  // 设备数据
+  const controlType = ref(1);
 
+  const tabChange = (activeKeyVal) => {
+    activeKey.value = activeKeyVal;
+  };
 
-// 设备数据
-const controlType = ref(1);
+  const initData = {
+    deviceID: '',
+    deviceType: '',
+    strname: '',
+    dataDh: '-', //压差
+    dataDtestq: '-', //测试风量
+    sourcePressure: '-', //气源压力
+    dataDequivalarea: '-',
+    netStatus: '0', //通信状态
+    fault: '气源压力超限',
+    forntArea: '0',
+    rearArea: '0',
+    frontRearDifference: '-',
+    rearPresentValue: '-',
+    maxarea: '',
+    nwindownum: 0,
+  };
 
-const tabChange = (activeKeyVal) => {
-  activeKey.value = activeKeyVal;
-};
+  // 监测数据
+  const selectData = reactive(lodash.cloneDeep(initData));
 
-const initData = {
-  deviceID: '',
-  deviceType: '',
-  strname: '',
-  dataDh: '-', //压差
-  dataDtestq: '-', //测试风量
-  sourcePressure: '-', //气源压力
-  dataDequivalarea: '-',
-  netStatus: '0', //通信状态
-  fault: '气源压力超限',
-  forntArea: '0',
-  rearArea: '0',
-  frontRearDifference: '-',
-  rearPresentValue: '-',
-  maxarea: '',
-  nwindownum: 0
-};
+  watch([warningNum, errorNum], ([newWarningNum, newErrorNum]) => {
+    // 刷新
+    refreshModal(newWarningNum, newErrorNum);
+  });
 
-// 监测数据
-const selectData = reactive(lodash.cloneDeep(initData));
+  function handleLenChange() {
+    //
+  }
 
-watch([warningNum, errorNum], ([newWarningNum, newErrorNum]) => {
-  // 刷新
-  refreshModal(newWarningNum, newErrorNum)
-})
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor() {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = setTimeout(async () => {
+        const data = await getDataSource();
+        Object.assign(selectData, data);
+        // addFiberText(selectData)
+        if (timer) {
+          timer = null;
+        }
+        getMonitor();
+      }, 1000);
+    }
+  }
 
-function handleLenChange() {
-  //
-}
+  async function getDataSource() {
+    console.log(11111);
+    const res = await list({ devicetype: 'fiber', pagetype: 'normal' });
+    console.log(2222, res);
 
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(){
-  if (Object.prototype.toString.call(timer) === '[object Null]') {
-    timer = setTimeout(async () => {
-      const data = await getDataSource();
-      Object.assign(selectData, data);
-      // addFiberText(selectData)
-      if (timer) {
-        timer = null;
-      }
-      getMonitor();
-    }, 1000);
+    dataSource.value = res.msgTxt[0].datalist || [];
+    dataSource.value.forEach((data: any) => {
+      const readData = data.readData;
+      data = Object.assign(data, readData);
+    });
+    const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
+    return data;
   }
-};
 
-async function getDataSource(){
-  console.log(11111)
-  const res = await list({ devicetype: 'fiber', pagetype: 'normal' });
-  console.log(2222, res)
+  // 获取设备基本信息列表
+  function getDeviceBaseList() {
+    getTableList({ pageSize: 1000 }).then((res) => {
+      deviceBaseList.value = res.records;
+    });
+  }
 
-  dataSource.value = res.msgTxt[0].datalist || [];
-  dataSource.value.forEach((data: any) => {
-    const readData = data.readData;
-    data = Object.assign(data, readData);
-  });
-  const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
-  return data;
-};
+  // 切换检测数据
+  function getSelectRow(selectRow, index) {
+    if (!selectRow) return;
+    selectRowIndex.value = index;
+    const baseData: any = deviceBaseList.value.find((baseData: any) => baseData.id === selectRow.deviceID);
+    Object.assign(selectData, initData, selectRow, baseData);
 
-// 获取设备基本信息列表
-function getDeviceBaseList(){
-  getTableList({ pageSize: 1000 }).then((res) => {
-    deviceBaseList.value = res.records;
-  });
-};
+    setModelType('beltFiber');
+  }
 
-// 切换检测数据
-function getSelectRow(selectRow, index){
-  
-  if (!selectRow) return;
-  selectRowIndex.value = index;
-  const baseData: any = deviceBaseList.value.find((baseData: any) => baseData.id === selectRow.deviceID);
-  Object.assign(selectData, initData, selectRow, baseData);
-  
-  setModelType('beltFiber')
-};
+  onBeforeMount(() => {
+    getDeviceBaseList();
+  });
 
-onBeforeMount(() => {
-  getDeviceBaseList();
-});
+  onMounted(() => {
+    loading.value = true;
 
-onMounted(() => {
-  loading.value = true;
-  
-  mountedThree().then(async () => {
-    loading.value = false;
-    // getMonitor();
-    setTimeout(() => {
-      warningNum.value = [3, 6]
-      errorNum.value = [9]
-    }, 3000)
+    mountedThree().then(async () => {
+      loading.value = false;
+      // getMonitor();
+      setTimeout(() => {
+        warningNum.value = [3, 6];
+        errorNum.value = [9];
+      }, 3000);
+    });
+    getMonitor();
   });
-  getMonitor();
-});
-
-onUnmounted(() => {
-  destroy();
-  if (timer) {
-    clearTimeout(timer);
-    timer = undefined;
-  }
-});
 
+  onUnmounted(() => {
+    destroy();
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  });
 </script>
 <style lang="less" scoped>
-@import '/@/design/vent/modal.less';
-@ventSpace: zxm;
+  @import '/@/design/vent/modal.less';
+  @ventSpace: zxm;
 
-:deep(.@{ventSpace}-tabs-tabpane-active) {
-  overflow: auto;
-}
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    overflow: auto;
+  }
 
-.input-box {
-  display: flex;
-  align-items: center;
-  padding-left: 10px;
+  .input-box {
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
 
-  .input-title {
-    color: #73e8fe;
-    width: auto;
-  }
+    .input-title {
+      color: #73e8fe;
+      width: auto;
+    }
 
-  .@{ventSpace}-input-number {
-    border-color: #ffffff88 !important;
-  }
+    .@{ventSpace}-input-number {
+      border-color: #ffffff88 !important;
+    }
 
-  margin-right: 10px;
-}
-.monitor-msg-box{
-  width: 170px;
-  margin-top: 100px;
-  .monitor-msg-container{
-    width: 170px;
-    height: 150px;
-    box-shadow: rgba(128, 128, 128, 0.3) 0px 0px 40px inset;
-    border: 1px solid rgba(128, 128, 128, 0.3);
-    background-color: transparent;
+    margin-right: 10px;
   }
-  .errorColor{
-    box-shadow: #F73B2440 0px 0px 40px inset;
-    border: 1px solid #F73B2440;
-  }
-  .warningColor{
-    box-shadow: #FF9B1740 0px 0px 40px inset;
-    border: 1px solid #FF9B1740;
-  }
-  .monitor-item{
-    padding: 10px 10px 0px 10px;
-    color: #fff;
-    letter-spacing: 2px;
-    .item-title{
-      color: #73e8fe;
+  .monitor-msg-box {
+    width: 170px;
+    margin-top: 100px;
+    .monitor-msg-container {
+      width: 170px;
+      height: 150px;
+      box-shadow: rgba(128, 128, 128, 0.3) 0px 0px 40px inset;
+      border: 1px solid rgba(128, 128, 128, 0.3);
+      background-color: transparent;
     }
-    .num{
-      color: #FFA500;
+    .errorColor {
+      box-shadow: #f73b2440 0px 0px 40px inset;
+      border: 1px solid #f73b2440;
+    }
+    .warningColor {
+      box-shadow: #ff9b1740 0px 0px 40px inset;
+      border: 1px solid #ff9b1740;
+    }
+    .monitor-item {
+      padding: 10px 10px 0px 10px;
+      color: #fff;
+      letter-spacing: 2px;
+      .item-title {
+        color: #73e8fe;
+      }
+      .num {
+        color: #ffa500;
+      }
     }
   }
-}
 </style>

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

@@ -1,6 +1,5 @@
 <template>
-  <div class="bg"
-    style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
+  <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
     <a-spin :spinning="loading" />
     <div id="deviceDetail" class="device-detail">
       <div id="deviceCard" class="device-card" style="z-index: -1; position: absolute">
@@ -9,8 +8,11 @@
           <div class="left-box"></div>
           <div class="right-box">
             <div><span class="detail-title">规格型号：</span> <span>KJ-980-F</span></div>
-            <div><span class="detail-title">技术参数：</span>
-              <span>380V，电机功率22kW,50Hz，B级绝缘，额定电流42.2A，效率90.5%，能效等级3，接法角型，2940r/min，轴承6311/CM 6211/CM，功率因数0.89</span>
+            <div
+              ><span class="detail-title">技术参数：</span>
+              <span
+                >380V，电机功率22kW,50Hz，B级绝缘，额定电流42.2A，效率90.5%，能效等级3，接法角型，2940r/min，轴承6311/CM 6211/CM，功率因数0.89</span
+              >
             </div>
           </div>
         </div>
@@ -21,17 +23,17 @@
   <div class="scene-box">
     <div class="top-box">
       <div class="top-center row">
-        <div class="button-box" @click="playAnimation(1)">打开前门</div>
-        <div class="button-box" @click="playAnimation(2)">关闭前门</div>
-        <div class="button-box" @click="playAnimation(3)">打开后门</div>
-        <div class="button-box" @click="playAnimation(4)">关闭后门</div>
-        <div class="button-box" @click="playAnimation(5)">同时打开</div>
-        <div class="button-box" @click="playAnimation(6)">同时关闭</div>
+        <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation(1)">打开前门</div>
+        <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation(2)">关闭前门</div>
+        <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation(3)">打开后门</div>
+        <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation(4)">关闭后门</div>
+        <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation(5)">同时打开</div>
+        <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation(6)">同时关闭</div>
       </div>
-      <div class="top-right row">
+      <div class="top-right row" v-if="hasPermission('btn:remote')">
         <div class="control-type row">
           <div class="control-title">控制模式：</div>
-          <a-radio-group v-model:value="selectData.autoRoManual" @change="changeType">
+          <a-radio-group v-model:value="selectData.autoRoManual" @change="playAnimation(7)">
             <a-radio :value="`0`">就地</a-radio>
             <a-radio :value="`1`">远程</a-radio>
           </a-radio-group>
@@ -52,51 +54,61 @@
       <dv-border-box8 :dur="5" :style="`padding: 5px; height: ${scroll.y + 120}px`">
         <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
           <a-tab-pane key="1" tab="实时监测">
-            <MonitorTable v-if="activeKey === '1'" ref="MonitorDataTable" class="monitor-table" columnsType="gate_monitor" :isShowActionColumn="true"
-              :dataSource="dataSource" design-scope="gate-monitor" @selectRow="getSelectRow" :scroll="{ y: scroll.y - 40 }" title="风门监测"
-              :isShowPagination="true">
+            <MonitorTable
+              v-if="activeKey === '1'"
+              ref="MonitorDataTable"
+              class="monitor-table"
+              columnsType="gate_monitor"
+              :isShowActionColumn="true"
+              :dataSource="dataSource"
+              design-scope="gate-monitor"
+              @selectRow="getSelectRow"
+              :scroll="{ y: scroll.y - 40 }"
+              title="风门监测"
+              :isShowPagination="true"
+            >
               <template #filterCell="{ column, record }">
                 <template v-if="record.frontGateOpenCtrl == 1 || record.frontGateOpenCtrl === true">
-                  <a-tag
-                    v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0"
-                    color="red">正在打开</a-tag>
+                  <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0" color="red"
+                    >正在打开</a-tag
+                  >
                   <a-tag v-else-if="column.dataIndex === 'frontGateOpen'" color="processing">打开</a-tag>
                 </template>
                 <template v-else-if="record.frontGateOpenCtrl == 0 || record.frontGateOpenCtrl === false">
-                  <a-tag
-                    v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0"
-                    color="red">正在关闭</a-tag>
-                  <a-tag
-                    v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 1"
-                    color="default">关闭</a-tag>
-                  <a-tag
-                    v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 1 && record.frontGateClose == 0"
-                    color="default">打开</a-tag>
+                  <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0" color="red"
+                    >正在关闭</a-tag
+                  >
+                  <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 1" color="default"
+                    >关闭</a-tag
+                  >
+                  <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 1 && record.frontGateClose == 0" color="default"
+                    >打开</a-tag
+                  >
                 </template>
                 <template v-if="record.rearGateOpenCtrl == 1 || record.rearGateOpenCtrl === true">
-                  <a-tag
-                    v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0"
-                    color="red">正在打开</a-tag>
+                  <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0" color="red"
+                    >正在打开</a-tag
+                  >
                   <a-tag v-else-if="column.dataIndex === 'rearGateOpen'" color="processing">打开</a-tag>
                 </template>
                 <template v-else-if="record.rearGateOpenCtrl == 0 || record.rearGateOpenCtrl === false">
-                  <a-tag
-                    v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0"
-                    color="red">正在关闭</a-tag>
-                  <a-tag
-                    v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 1"
-                    color="default">关闭</a-tag>
-                  <a-tag
-                    v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 1 && record.rearGateClose == 0"
-                    color="default">打开</a-tag>
+                  <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0" color="red"
+                    >正在关闭</a-tag
+                  >
+                  <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 1" color="default"
+                    >关闭</a-tag
+                  >
+                  <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 1 && record.rearGateClose == 0" color="default"
+                    >打开</a-tag
+                  >
                 </template>
                 <template v-if="column.dataIndex === 'ndoortype'">
-                  <span
-                    v-if="record.ndoortype == 0"
-                    color="red">行车风门</span>
-                  <span
-                    v-else
-                    color="default">行人风门</span>
+                  <span v-if="record.ndoortype == 0">气动风门</span>
+                  <span v-else color="default">液压风门</span>
+                </template>
+                <template v-if="column.dataIndex === 'doorUse'">
+                  <span v-if="record.doorUse == 2">行人风门</span>
+                  <span v-else color="default">行车风门</span>
                 </template>
                 <template v-else-if="column.dataIndex === 'warnLevel'">
                   <a-tag v-if="record.warnLevel == '101'" color="green">低风险</a-tag>
@@ -111,13 +123,12 @@
                 <a-tag v-else-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : 'red'">{{
                   record.warnFlag == 0 ? '正常' : '报警'
                 }}</a-tag>
-                <a-tag v-else-if="column.dataIndex === 'netStatus'" :color="record.netStatus == 0 ? 'default' : 'green'">{{
-                  record.netStatus == 0 ? '断开' : '连接'
+                <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
+                  record.netStatus == '0' ? '断开' : '连接'
                 }}</a-tag>
-                
               </template>
               <template #action="{ record }">
-                <a class="table-action-link" @click="deviceEdit($event, 'reportInfo', record)">报表录入</a>
+                <a v-if="globalConfig?.showReport" class="table-action-link" @click="deviceEdit($event, 'reportInfo', record)">报表录入</a>
                 <a class="table-action-link" @click="deviceEdit($event, 'deviceInfo', record)">设备编辑</a>
               </template>
             </MonitorTable>
@@ -130,572 +141,598 @@
           </a-tab-pane> -->
           <a-tab-pane key="3" tab="历史数据">
             <div class="tab-item" v-if="activeKey === '3'">
-              <HistoryTable columns-type="gate" device-type="gate" :device-list-api="getTableList"
-                designScope="gate-history" :scroll="scroll" />
+              <HistoryTable columns-type="gate" device-type="gate" :device-list-api="getTableList" designScope="gate-history" :scroll="scroll" />
             </div>
           </a-tab-pane>
           <a-tab-pane key="4" tab="报警历史">
             <div class="tab-item" v-if="activeKey === '4'">
-              <AlarmHistoryTable columns-type="alarm" device-type="gate" :device-list-api="getTableList"
-                designScope="alarm-history" :scroll="scroll" />
+              <AlarmHistoryTable
+                columns-type="alarm"
+                device-type="gate"
+                :device-list-api="getTableList"
+                designScope="alarm-history"
+                :scroll="scroll"
+              />
             </div>
           </a-tab-pane>
           <a-tab-pane key="5" tab="操作历史">
             <div class="tab-item" v-if="activeKey === '5'">
-              <HandlerHistoryTable columns-type="operator_history" device-type="gate" :device-list-api="getTableList"
-                designScope="alarm-history" :scroll="scroll" />
+              <HandlerHistoryTable
+                columns-type="operator_history"
+                device-type="gate"
+                :device-list-api="getTableList"
+                designScope="alarm-history"
+                :scroll="scroll"
+              />
             </div>
           </a-tab-pane>
         </a-tabs>
       </dv-border-box8>
     </div>
   </div>
-  <div ref="playerRef" style="z-index: 999; position: absolute; top: 100px; right: 15px; width: 300px; height: 280px; margin: auto">
-  </div>
-  <LivePlayer id="fm-player1" style="height: 220px; width: 300px; position: absolute; top: 0px; z-index: -1;" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
-  <HandleModal v-if="!globalConfig?.simulatedPassword" :modal-is-show="modalIsShow" :modal-title="modalTitle" :modal-type="modalType" @handle-ok="handleOK"
-    @handle-cancel="handleCancel" />
-  <DeviceBaseInfo @register="registerModal" :device-type="selectData['deviceType']"/>
+  <div ref="playerRef" style="z-index: 999; position: absolute; top: 100px; right: 15px; width: 300px; height: 280px; margin: auto"> </div>
+  <LivePlayer
+    id="fm-player1"
+    style="height: 220px; width: 300px; position: absolute; top: 0px; z-index: -1"
+    ref="player1"
+    :videoUrl="flvURL1()"
+    muted
+    live
+    loading
+    controls
+  />
+  <HandleModal
+    v-if="!globalConfig?.simulatedPassword"
+    :modal-is-show="modalIsShow"
+    :modal-title="modalTitle"
+    :modal-type="modalType"
+    @handle-ok="handleOK"
+    @handle-cancel="handleCancel"
+  />
+  <DeviceBaseInfo @register="registerModal" :device-type="selectData['deviceType']" />
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onUnmounted, onMounted, ref, reactive, nextTick, inject  } from 'vue';
-import DeviceEcharts from '../comment/DeviceEcharts.vue';
-import MonitorTable from '../comment/MonitorTable.vue';
-import HistoryTable from '../comment/HistoryTable.vue';
-import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
-import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
-import HandleModal from './modal.vue';
-import DeviceBaseInfo from '../comment/components/DeviceBaseInfo.vue';
-import { mountedThree, addMonitorText, play, destroy, setModelType, initCameraCanvas } from './gate.threejs';
-import { deviceControlApi } from '/@/api/vent/index';
-import { message } from 'ant-design-vue';
-import { list, getTableList, cameraList, cameraAddrList } from './gate.api';
-import { chartsColumns, echartsOption, echartsOption1 } from './gate.data';
-import lodash from 'lodash';
-import { setDivHeight } from '/@/utils/event';
-import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
-import { useRouter } from 'vue-router';
-import { deviceCameraInit } from '/@/utils/ventutil.ts'
-import LivePlayer from '@liveqing/liveplayer-v3';
-import { useModal } from '/@/components/Modal';
-
-
-const globalConfig = inject('globalConfig');
-
-const { currentRoute } = useRouter();
-const MonitorDataTable = ref()
-
-const playerRef = ref();
-
-
-const activeKey = ref('1'); // tab
-const loading = ref(false);
-
-const scroll = reactive({
-  y: 230
-})
-
-const frontDoorIsOpen = ref(false); //前门是否开启
-const backDoorIsOpen = ref(false); //后门是否开启
-
-const modalIsShow = ref<boolean>(false); // 是否显示模态框
-const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
-const modalType = ref(''); // 模态框内容显示类型，设备操作类型
-
-const selectRowIndex = ref(-1); // 选中行
-const dataSource = ref([]);
-
-const deviceBaseList = ref([]); // 设备基本信息
-let webRtcServer: any[] = []
-const [registerModal, { openModal, closeModal }] = useModal();
-
-const tabChange = (activeKeyVal) => {
-  activeKey.value = activeKeyVal;
-  if (activeKeyVal == 1) {
-    nextTick(() => {
-      MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID])
-    })
-  }
-};
-
-const initData = {
-  deviceID: '',
-  deviceType: '',
-  strname: '',
-  frontRearDP: '-', //压差
-  // sourcePressure: '-', //气源压力
-  runRoRecondition: null,
-  autoRoManual: null,
-  netStatus: '0', //通信状态
-  frontGateOpen: '0',
-  frontGateClose: '1',
-  rearGateOpen: '0',
-  rearGateClose: '1',
-  fault: '气源压力超限',
-  masterComputer: 0,
-  frontGateOpenCtrl: false,
-  rearGateOpenCtrl: false,
-  cameras: []
-};
-
-// 监测数据
-const selectData = reactive(lodash.cloneDeep(initData));
-
-const flvURL1 = () => {
-  // return ''
-  return `/video/gate.mp4`;
-};
-
-function deviceEdit(e: Event, type: string, record) {
-  e.stopPropagation()
-  openModal(true, {
-    type,
-    deviceId: record['deviceID']
-  })
-}
-// 获取设备基本信息列表
-function getDeviceBaseList() {
-  getTableList({ pageSize: 1000 }).then((res) => {
-    deviceBaseList.value = res.records;
+  import { onBeforeUnmount, onUnmounted, onMounted, ref, reactive, nextTick, inject } from 'vue';
+  import DeviceEcharts from '../comment/DeviceEcharts.vue';
+  import MonitorTable from '../comment/MonitorTable.vue';
+  import HistoryTable from '../comment/HistoryTable.vue';
+  import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
+  import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
+  import HandleModal from './modal.vue';
+  import DeviceBaseInfo from '../comment/components/DeviceBaseInfo.vue';
+  import { mountedThree, addMonitorText, play, destroy, setModelType, initCameraCanvas } from './gate.threejs';
+  import { deviceControlApi } from '/@/api/vent/index';
+  import { message } from 'ant-design-vue';
+  import { list, getTableList, cameraList, cameraAddrList } from './gate.api';
+  import { chartsColumns, echartsOption, echartsOption1 } from './gate.data';
+  import lodash from 'lodash';
+  import { setDivHeight } from '/@/utils/event';
+  import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
+  import { useRouter } from 'vue-router';
+  import LivePlayer from '@liveqing/liveplayer-v3';
+  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 playerRef = ref();
+
+  const activeKey = ref('1'); // tab
+  const loading = ref(false);
+
+  const scroll = reactive({
+    y: 230,
   });
-};
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-async function getMonitor(flag?) {
-  if (Object.prototype.toString.call(timer) === '[object Null]') {
-    timer = await setTimeout(async () => {
-      const res = await list({ devicetype: 'gate', pagetype: 'normal' })
-      if (res.msgTxt && res.msgTxt[0]) {
-        dataSource.value = res.msgTxt[0].datalist || [];
-        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']])
-          }
-        }
-        Object.assign(selectData, dataSource.value[selectRowIndex.value]);
-        addMonitorText(selectData);
-        monitorAnimation(selectData)
-        if (timer) {
-          timer = null;
-        }
-        getMonitor();
-      }
-    }, flag ? 0 : 1000);
+
+  const frontDoorIsOpen = ref(false); //前门是否开启
+  const backDoorIsOpen = ref(false); //后门是否开启
+
+  const modalIsShow = ref<boolean>(false); // 是否显示模态框
+  const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
+  const modalType = ref(''); // 模态框内容显示类型，设备操作类型
+
+  const selectRowIndex = ref(-1); // 选中行
+  const dataSource = ref([]);
+
+  const deviceBaseList = ref([]); // 设备基本信息
+  const [registerModal, { openModal, closeModal }] = useModal();
+
+  const { getCamera, webRtcServer } = useCamera();
+
+  const tabChange = (activeKeyVal) => {
+    activeKey.value = activeKeyVal;
+    if (activeKeyVal == 1) {
+      nextTick(() => {
+        MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID]);
+      });
+    }
+  };
+
+  const initData = {
+    deviceID: '',
+    deviceType: '',
+    strname: '',
+    frontRearDP: '-', //压差
+    // sourcePressure: '-', //气源压力
+    runRoRecondition: null,
+    autoRoManual: null,
+    netStatus: '0', //通信状态
+    frontGateOpen: '0',
+    frontGateClose: '1',
+    rearGateOpen: '0',
+    rearGateClose: '1',
+    fault: '气源压力超限',
+    masterComputer: 0,
+    frontGateOpenCtrl: false,
+    rearGateOpenCtrl: false,
+    cameras: [],
+  };
+
+  // 监测数据
+  const selectData = reactive(lodash.cloneDeep(initData));
+
+  const flvURL1 = () => {
+    // return ''
+    return `/video/gate.mp4`;
+  };
+
+  function deviceEdit(e: Event, type: string, record) {
+    e.stopPropagation();
+    openModal(true, {
+      type,
+      deviceId: record['deviceID'],
+    });
   }
-};
-
-async function getCamera() {
-  const res = await cameraList({ deviceid: selectData['deviceID'] })
-  const cameras: [] = res.records || []
-  let cameraAddrs:any[] = [], cameraNames:string[] = [];
-  if (cameras.length > 0){
-    cameras.forEach(item => {
-      if (item['devicekind'] == 'toRtsp' || item['devicekind'] == 'toHLS') {
-        cameraNames.push(item['name'])
-      } else {
-        cameraAddrs.push({name: item['name'], addr: item['addr'] })
-      }
-    })
+  // 获取设备基本信息列表
+  function getDeviceBaseList() {
+    getTableList({ pageSize: 1000 }).then((res) => {
+      deviceBaseList.value = res.records;
+    });
   }
-  if (cameraNames.length > 0) {
-    // 请求接口从装备院拿数据
-    const addrs: string[] = await cameraAddrList({ cameraNameList: cameraNames })
-    for(let i=0; i < addrs.length; i++){
-      cameraAddrs.push({name: '摄像头'+i, addr: addrs[i]})
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  async function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = await setTimeout(
+        async () => {
+          const res = await list({ devicetype: 'gate', pagetype: 'normal' });
+          if (res.msgTxt && res.msgTxt[0]) {
+            dataSource.value = res.msgTxt[0].datalist || [];
+            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']]);
+              }
+            }
+            Object.assign(selectData, dataSource.value[selectRowIndex.value]);
+            addMonitorText(selectData);
+            monitorAnimation(selectData);
+            if (timer) {
+              timer = null;
+            }
+            getMonitor();
+          }
+        },
+        flag ? 0 : 1000
+      );
     }
   }
-  const obj = await deviceCameraInit(cameraAddrs, playerRef.value, webRtcServer)
-  webRtcServer = obj.webRtcServerList
-  const playerDoms = obj.playerDoms
-  // 注意前后门适应需要对应 //[0] 后门 [1]前门
-}
-
-// 切换检测数据
-async function getSelectRow(selectRow, index) {
-  if (!selectRow) return;
-  loading.value = true;
-  selectRowIndex.value = index;
-
-  const baseData: any = deviceBaseList.value.find((baseData: any) => baseData.id === selectRow.deviceID);
-  Object.assign(selectData, initData, selectRow, baseData);
-  isFrontOpenRunning = false //开关门动作是否在进行
-  isFrontCloseRunning = false //开关门动作是否在进行
-  isRearOpenRunning = false //开关门动作是否在进行
-  isRearCloseRunning = false //开关门动作是否在进行
-  frontDeviceState = 0 //记录设备状态，为了与下一次监测数据做比较
-  rearDeviceState = 0 //记录设备状态，为了与下一次监测数据做比较
-  // const type = selectData.nwindownum == 1 ? 'singleWindow' : 'doubleWindow';
-  let type;
-  if (selectData.deviceType == 'gate_ss') {
-    type = 'fm2'
-  } else if(selectData.deviceType == 'gate_qd') {
-    type = 'fm3'
-  } else{
-    type = 'fm1' // 液压
-  }
-  setModelType(type).then(async() => {
-    addMonitorText(selectData);
-    loading.value = false;
 
-  });
-  await getCamera()
-};
-
-// 播放动画
-function playAnimation(handlerState) {
-  switch (handlerState) {
-    case 1: // 打开前门
-      if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '1') {
-        modalTitle.value = '打开前门';
-        modalType.value = '1';
-        modalIsShow.value = true;
-      } else {
-        message.warning('前门已经打开或正在打开,请勿重新操作')
-      }
-      break;
-    case 2: // 关闭前门
-      if (selectData.frontGateOpen == '1' && selectData.frontGateClose == '0') {
-        modalTitle.value = '关闭前门';
-        modalType.value = '2';
-        modalIsShow.value = true;
-      } else {
-        message.warning('前门已经关闭或正在关闭,请勿重新操作')
-      }
-      break;
-    case 3: // 打开后门
-      if (selectData.rearGateOpen == '0' && selectData.rearGateClose == '1') {
-        modalTitle.value = '打开后门';
-        modalType.value = '3';
-        modalIsShow.value = true;
-      } else {
-        message.warning('后门已经打开或正在打开,请勿重新操作')
-      }
-      break;
-    case 4: // 关闭后门
-      if (selectData.rearGateOpen == '1' && selectData.rearGateClose == '0') {
-        modalTitle.value = '关闭后门';
-        modalType.value = '4';
-        modalIsShow.value = true;
-      } else {
-        message.warning('后门已经关闭或正在关闭,请勿重新操作')
-      }
-      break;
-    case 5: // 打开前后门
-      if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '1' && selectData.rearGateOpen == '0' && selectData.rearGateClose == '1') {
-        modalTitle.value = '打开前后门';
-        modalType.value = '5';
-        modalIsShow.value = true;
-      } else {
-        message.warning('前后门已经打开或正在打开,请勿重新操作')
-      }
-      break;
-    case 6: // 关闭前后门
-      if (selectData.frontGateOpen == '1' && selectData.frontGateClose == '0' && selectData.rearGateOpen == '1' && selectData.rearGateClose == '0') {
-        modalTitle.value = '关闭前后门';
-        modalType.value = '6';
-        modalIsShow.value = true;
+  // 切换检测数据
+  async function getSelectRow(selectRow, index) {
+    if (!selectRow) return;
+    loading.value = true;
+    selectRowIndex.value = index;
+
+    const baseData: any = deviceBaseList.value.find((baseData: any) => baseData.id === selectRow.deviceID);
+    Object.assign(selectData, initData, selectRow, baseData);
+    isFrontOpenRunning = false; //开关门动作是否在进行
+    isFrontCloseRunning = false; //开关门动作是否在进行
+    isRearOpenRunning = false; //开关门动作是否在进行
+    isRearCloseRunning = false; //开关门动作是否在进行
+    frontDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
+    rearDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
+    // const type = selectData.nwindownum == 1 ? 'singleWindow' : 'doubleWindow';
+    let type;
+    if (selectData['doorUse'] == 2) {
+      type = 'fmXr';
+    } else {
+      if (selectData.deviceType == 'gate_ss') {
+        type = 'fm2';
+      } else if (selectData.deviceType == 'gate_qd') {
+        type = 'fm3';
       } else {
-        message.warning('前后门已经关闭或正在关闭,请勿重新操作')
+        type = 'fm1'; // 液压
       }
-      break;
-  }
+    }
 
-  
-  if(globalConfig?.simulatedPassword){
-    handleOK('', handlerState+'')
+    setModelType(type).then(async () => {
+      addMonitorText(selectData);
+      loading.value = false;
+    });
+    await getCamera(selectRow.deviceID, playerRef.value);
   }
-};
 
+  // 播放动画
+  function playAnimation(handlerState) {
+    switch (handlerState) {
+      case 1: // 打开前门
+        if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '1') {
+          modalTitle.value = '打开前门';
+          modalType.value = '1';
+          modalIsShow.value = true;
+        } else {
+          message.warning('前门已经打开或正在打开,请勿重新操作');
+        }
+        break;
+      case 2: // 关闭前门
+        if (selectData.frontGateOpen == '1' && selectData.frontGateClose == '0') {
+          modalTitle.value = '关闭前门';
+          modalType.value = '2';
+          modalIsShow.value = true;
+        } else {
+          message.warning('前门已经关闭或正在关闭,请勿重新操作');
+        }
+        break;
+      case 3: // 打开后门
+        if (selectData.rearGateOpen == '0' && selectData.rearGateClose == '1') {
+          modalTitle.value = '打开后门';
+          modalType.value = '3';
+          modalIsShow.value = true;
+        } else {
+          message.warning('后门已经打开或正在打开,请勿重新操作');
+        }
+        break;
+      case 4: // 关闭后门
+        if (selectData.rearGateOpen == '1' && selectData.rearGateClose == '0') {
+          modalTitle.value = '关闭后门';
+          modalType.value = '4';
+          modalIsShow.value = true;
+        } else {
+          message.warning('后门已经关闭或正在关闭,请勿重新操作');
+        }
+        break;
+      case 5: // 打开前后门
+        if (
+          selectData.frontGateOpen == '0' &&
+          selectData.frontGateClose == '1' &&
+          selectData.rearGateOpen == '0' &&
+          selectData.rearGateClose == '1'
+        ) {
+          modalTitle.value = '打开前后门';
+          modalType.value = '5';
+          modalIsShow.value = true;
+        } else {
+          message.warning('前后门已经打开或正在打开,请勿重新操作');
+        }
+        break;
+      case 6: // 关闭前后门
+        if (
+          selectData.frontGateOpen == '1' &&
+          selectData.frontGateClose == '0' &&
+          selectData.rearGateOpen == '1' &&
+          selectData.rearGateClose == '0'
+        ) {
+          modalTitle.value = '关闭前后门';
+          modalType.value = '6';
+          modalIsShow.value = true;
+        } else {
+          message.warning('前后门已经关闭或正在关闭,请勿重新操作');
+        }
+        break;
 
-function handleOK(passWord, handlerState) {
-  // if (passWord !== '123456') {
-  //   message.warning('密码不正确，请重新输入');
-  //   return;
-  // }
+      case 7: // 关闭前后门
+        modalTitle.value = '控制模式切换';
+        modalType.value = '7';
+        modalIsShow.value = true;
+        break;
+    }
 
-  if ((isFrontOpenRunning || isFrontCloseRunning) && (handlerState == 2 || handlerState == 1 || handlerState == 5 || handlerState == 6)) {
-    return
+    if (globalConfig?.simulatedPassword) {
+      handleOK('', handlerState + '');
+    }
   }
 
-  if ((isRearOpenRunning || isRearCloseRunning) && (handlerState == 3 || handlerState == 4 || handlerState == 5 || handlerState == 6)) {
-    return
-  }
+  function handleOK(passWord, handlerState) {
+    // if (passWord !== '123456') {
+    //   message.warning('密码不正确，请重新输入');
+    //   return;
+    // }
 
-  const data = {
-    deviceid: selectData.deviceID,
-    devicetype: selectData.deviceType,
-    paramcode: '',
-    value: null,
-    password: passWord,
-    masterComputer: selectData.masterComputer,
-  };
-  let handler = () => { };
+    if ((isFrontOpenRunning || isFrontCloseRunning) && (handlerState == 2 || handlerState == 1 || handlerState == 5 || handlerState == 6)) {
+      return;
+    }
 
-  switch (handlerState) {
-    case '1': // 打开前门
-      if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '1') {
-        handler = () => {
-          frontDoorIsOpen.value = true;
-        };
-        data.paramcode = 'frontGateOpen_S';
-      }
-      break;
-    case '2': // 关闭前门
-      if (selectData.frontGateOpen == '1' && selectData.frontGateClose == '0') {
-        handler = () => {
-          frontDoorIsOpen.value = false;
-        };
-        data.paramcode = 'frontGateClose_S';
-      }
-      break;
-    case '3': // 打开后门
-      if (selectData.rearGateOpen == '0' && selectData.rearGateClose == '1') {
-        handler = () => {
-          backDoorIsOpen.value = true;
-        };
-        data.paramcode = 'rearGateOpen_S';
-      }
-      break;
-    case '4': // 关闭后门
-      if (selectData.rearGateOpen == '1' && selectData.rearGateClose == '0') {
-        handler = () => {
-          backDoorIsOpen.value = false;
-        };
-        data.paramcode = 'rearGateClose_S';
-      }
-      break;
-    case '5': // 打开前后门
-      if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '1' && selectData.rearGateOpen == '0' && selectData.rearGateClose == '1') {
-        handler = () => {
-          frontDoorIsOpen.value = true;
-          backDoorIsOpen.value = true;
-        };
-        data.paramcode = 'sameTimeOpen';
-      }
-      break;
-    case '6': // 关闭前后门
-      if (selectData.frontGateOpen == '1' && selectData.frontGateClose == '0' && selectData.rearGateOpen == '1' && selectData.rearGateClose == '0') {
-        handler = () => {
-          frontDoorIsOpen.value = false;
-          backDoorIsOpen.value = false;
-        };
-        data.paramcode = 'sameTimeClose';
-      }
-      break;
-  }
-  
-  if (data.paramcode) {
-    deviceControlApi(data)
-      .then((res) => {
+    if ((isRearOpenRunning || isRearCloseRunning) && (handlerState == 3 || handlerState == 4 || handlerState == 5 || handlerState == 6)) {
+      return;
+    }
+
+    const data = {
+      deviceid: selectData.deviceID,
+      devicetype: selectData.deviceType,
+      paramcode: '',
+      value: null,
+      password: passWord,
+      masterComputer: selectData.masterComputer,
+    };
+    let handler = () => {};
+
+    switch (handlerState) {
+      case '1': // 打开前门
+        if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '1') {
+          handler = () => {
+            frontDoorIsOpen.value = true;
+          };
+          data.paramcode = 'frontGateOpen_S';
+        }
+        break;
+      case '2': // 关闭前门
+        if (selectData.frontGateOpen == '1' && selectData.frontGateClose == '0') {
+          handler = () => {
+            frontDoorIsOpen.value = false;
+          };
+          data.paramcode = 'frontGateClose_S';
+        }
+        break;
+      case '3': // 打开后门
+        if (selectData.rearGateOpen == '0' && selectData.rearGateClose == '1') {
+          handler = () => {
+            backDoorIsOpen.value = true;
+          };
+          data.paramcode = 'rearGateOpen_S';
+        }
+        break;
+      case '4': // 关闭后门
+        if (selectData.rearGateOpen == '1' && selectData.rearGateClose == '0') {
+          handler = () => {
+            backDoorIsOpen.value = false;
+          };
+          data.paramcode = 'rearGateClose_S';
+        }
+        break;
+      case '5': // 打开前后门
+        if (
+          selectData.frontGateOpen == '0' &&
+          selectData.frontGateClose == '1' &&
+          selectData.rearGateOpen == '0' &&
+          selectData.rearGateClose == '1'
+        ) {
+          handler = () => {
+            frontDoorIsOpen.value = true;
+            backDoorIsOpen.value = true;
+          };
+          data.paramcode = 'sameTimeOpen';
+        }
+        break;
+      case '6': // 关闭前后门
+        if (
+          selectData.frontGateOpen == '1' &&
+          selectData.frontGateClose == '0' &&
+          selectData.rearGateOpen == '1' &&
+          selectData.rearGateClose == '0'
+        ) {
+          handler = () => {
+            frontDoorIsOpen.value = false;
+            backDoorIsOpen.value = false;
+          };
+          data.paramcode = 'sameTimeClose';
+        }
+        break;
+      case '7': // 远程与就地
+        data.paramcode = 'autoRoManualControl';
+        data.value = selectData.autoRoManual;
+    }
+
+    if (data.paramcode) {
+      deviceControlApi(data).then((res) => {
         // 模拟时开启
         if (res.success) {
           modalIsShow.value = false;
           if (globalConfig.History_Type == 'remote') {
-            message.success('指令已下发至生产管控平台成功！')
+            message.success('指令已下发至生产管控平台成功！');
           } else {
-            message.success('指令已下发成功！')
+            message.success('指令已下发成功！');
           }
         }
-      })
+      });
+    }
   }
-};
-
-/** 开关门动画调用 */
-let isFrontOpenRunning = false //开关门动作是否在进行
-let isFrontCloseRunning = false //开关门动作是否在进行
-let isRearOpenRunning = false //开关门动作是否在进行
-let isRearCloseRunning = false //开关门动作是否在进行
-let frontDeviceState = 0 //记录设备状态，为了与下一次监测数据做比较
-let rearDeviceState = 0 //记录设备状态，为了与下一次监测数据做比较  
-function monitorAnimation(selectData) {
-  const timeScale = 0.003
-  if (selectData.frontGateOpenCtrl == 1 || selectData.frontGateOpenCtrl === true) {
-    isFrontCloseRunning = false
-    if (selectData.frontGateOpen == 0 && selectData.frontGateClose == 0) {
-      //打开前门1
-
-      if (!isFrontOpenRunning) {
-        frontDoorIsOpen.value = true
-        backDoorIsOpen.value = true
-        isFrontOpenRunning = true
-        play(1, timeScale)
-        frontDeviceState = 1
-      }
 
-    }
-    if (selectData.frontGateOpen == 1 && selectData.frontGateClose == 0) {
-      isFrontOpenRunning = false
-      if (frontDeviceState != 1) {
-        import.meta.env.VITE_GLOB_IS_SIMULATE ? play(1, timeScale) : play(1)
-        frontDeviceState = 1
-        frontDoorIsOpen.value = false
-        backDoorIsOpen.value = true
+  /** 开关门动画调用 */
+  let isFrontOpenRunning = false; //开关门动作是否在进行
+  let isFrontCloseRunning = false; //开关门动作是否在进行
+  let isRearOpenRunning = false; //开关门动作是否在进行
+  let isRearCloseRunning = false; //开关门动作是否在进行
+  let frontDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
+  let rearDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
+  function monitorAnimation(selectData) {
+    const timeScale = 0.003;
+    if (selectData.frontGateOpenCtrl == 1 || selectData.frontGateOpenCtrl === true) {
+      isFrontCloseRunning = false;
+      if (selectData.frontGateOpen == 0 && selectData.frontGateClose == 0) {
+        //打开前门1
+
+        if (!isFrontOpenRunning) {
+          frontDoorIsOpen.value = true;
+          backDoorIsOpen.value = true;
+          isFrontOpenRunning = true;
+          play(1, timeScale);
+          frontDeviceState = 1;
+        }
       }
-    }
-  } else {
-    if (selectData.frontGateOpen == 0 && selectData.frontGateClose == 0) {
-      //关闭前门
-      isFrontOpenRunning = false
-      if (!isFrontCloseRunning) {
-        isFrontCloseRunning = true
-        play(2, timeScale)
-        frontDeviceState = 2
-        frontDoorIsOpen.value = true
-        backDoorIsOpen.value = true
+      if (selectData.frontGateOpen == 1 && selectData.frontGateClose == 0) {
+        isFrontOpenRunning = false;
+        if (frontDeviceState != 1) {
+          import.meta.env.VITE_GLOB_IS_SIMULATE ? play(1, timeScale) : play(1);
+          frontDeviceState = 1;
+          frontDoorIsOpen.value = false;
+          backDoorIsOpen.value = true;
+        }
       }
-    }
-    if (selectData.frontGateClose == 1 && selectData.frontGateOpen == 0) {
-      isFrontCloseRunning = false
-      if (frontDeviceState == 1) {
-        import.meta.env.VITE_GLOB_IS_SIMULATE ? play(2, timeScale) : play(2)
-        frontDeviceState = 2
-        frontDoorIsOpen.value = false
-        // backDoorIsOpen.value = false
+    } else {
+      if (selectData.frontGateOpen == 0 && selectData.frontGateClose == 0) {
+        //关闭前门
+        isFrontOpenRunning = false;
+        if (!isFrontCloseRunning) {
+          isFrontCloseRunning = true;
+          play(2, timeScale);
+          frontDeviceState = 2;
+          frontDoorIsOpen.value = true;
+          backDoorIsOpen.value = true;
+        }
+      }
+      if (selectData.frontGateClose == 1 && selectData.frontGateOpen == 0) {
+        isFrontCloseRunning = false;
+        if (frontDeviceState == 1) {
+          import.meta.env.VITE_GLOB_IS_SIMULATE ? play(2, timeScale) : play(2);
+          frontDeviceState = 2;
+          frontDoorIsOpen.value = false;
+          // backDoorIsOpen.value = false
+        }
       }
     }
-  }
 
-  if (selectData.rearGateOpenCtrl == 1 || selectData.rearGateOpenCtrl === true) {
-    isRearCloseRunning = false
-    if (selectData.rearGateOpen == 0 && selectData.rearGateClose == 0) {
-      //打开后门
-      if (!isRearOpenRunning) {
-        isRearOpenRunning = true
-        play(3, timeScale)
-        rearDeviceState = 3
-        frontDoorIsOpen.value = true
-        backDoorIsOpen.value = true
+    if (selectData.rearGateOpenCtrl == 1 || selectData.rearGateOpenCtrl === true) {
+      isRearCloseRunning = false;
+      if (selectData.rearGateOpen == 0 && selectData.rearGateClose == 0) {
+        //打开后门
+        if (!isRearOpenRunning) {
+          isRearOpenRunning = true;
+          play(3, timeScale);
+          rearDeviceState = 3;
+          frontDoorIsOpen.value = true;
+          backDoorIsOpen.value = true;
+        }
       }
+      if (selectData.rearGateOpen == 1 && selectData.rearGateClose == 0) {
+        isRearOpenRunning = false;
 
-    }
-    if (selectData.rearGateOpen == 1 && selectData.rearGateClose == 0) {
-      isRearOpenRunning = false
-
-      if (rearDeviceState != 3) {
-        rearDeviceState = 3
-        import.meta.env.VITE_GLOB_IS_SIMULATE ? play(3, timeScale) : play(3)
-        backDoorIsOpen.value = false
-        frontDoorIsOpen.value = true
+        if (rearDeviceState != 3) {
+          rearDeviceState = 3;
+          import.meta.env.VITE_GLOB_IS_SIMULATE ? play(3, timeScale) : play(3);
+          backDoorIsOpen.value = false;
+          frontDoorIsOpen.value = true;
+        }
       }
-    }
-  } else {
-    if (selectData.rearGateOpen == 0 && selectData.rearGateClose == 0) {
-      //关闭后门
-      isRearOpenRunning = false
-      if (!isRearCloseRunning) {
-        isRearCloseRunning = true
-        play(4, timeScale)
-        rearDeviceState = 4
-        frontDoorIsOpen.value = true
-        backDoorIsOpen.value = true
+    } else {
+      if (selectData.rearGateOpen == 0 && selectData.rearGateClose == 0) {
+        //关闭后门
+        isRearOpenRunning = false;
+        if (!isRearCloseRunning) {
+          isRearCloseRunning = true;
+          play(4, timeScale);
+          rearDeviceState = 4;
+          frontDoorIsOpen.value = true;
+          backDoorIsOpen.value = true;
+        }
       }
-    }
-    if (selectData.rearGateClose == 1 && selectData.rearGateOpen == 0) {
-      isRearCloseRunning = false
-      if (rearDeviceState == 3) {
-        rearDeviceState = 4
-        import.meta.env.VITE_GLOB_IS_SIMULATE ? play(4, timeScale) : play(4)
-        backDoorIsOpen.value = false
+      if (selectData.rearGateClose == 1 && selectData.rearGateOpen == 0) {
+        isRearCloseRunning = false;
+        if (rearDeviceState == 3) {
+          rearDeviceState = 4;
+          import.meta.env.VITE_GLOB_IS_SIMULATE ? play(4, timeScale) : play(4);
+          backDoorIsOpen.value = false;
+        }
       }
     }
-  }
 
-  // console.log('frontGateOpen:', selectData.frontGateOpen, '  frontGateClose:', selectData.frontGateClose, ' rearGateOpen:', selectData.rearGateOpen, '  rearGateClose:', selectData.rearGateClose, '  frontGateOpenCtrl:', selectData.frontGateOpenCtrl, '  rearGateOpenCtrl:', selectData.rearGateOpenCtrl)
+    // console.log('frontGateOpen:', selectData.frontGateOpen, '  frontGateClose:', selectData.frontGateClose, ' rearGateOpen:', selectData.rearGateOpen, '  rearGateClose:', selectData.rearGateClose, '  frontGateOpenCtrl:', selectData.frontGateOpenCtrl, '  rearGateOpenCtrl:', selectData.rearGateOpenCtrl)
+  }
 
-}
+  function handleCancel() {
+    modalIsShow.value = false;
+    modalTitle.value = '';
+    modalType.value = '';
+  }
 
-function handleCancel() {
-  modalIsShow.value = false;
-  modalTitle.value = '';
-  modalType.value = '';
-};
+  // // 远程、就地切换
+  // function changeType() {
+  //   const data = {
+  //     deviceid: selectData.deviceID,
+  //     devicetype: selectData.deviceType,
+  //     paramcode: 'autoRoManualControl',
+  //     value: selectData.autoRoManual,
+  //   };
+  //   deviceControlApi(data).then(() => {
+  //     if (globalConfig.History_Type == 'remote') {
+  //       message.success('指令已下发至生产管控平台成功！');
+  //     } else {
+  //       message.success('指令已下发成功！');
+  //     }
+  //   });
+  // }
 
-// 远程、就地切换
-function changeType() {
-  const data = {
-    deviceid: selectData.deviceID,
-    devicetype: selectData.deviceType,
-    paramcode: 'autoRoManualControl',
-    value: selectData.autoRoManual,
-  };
-  deviceControlApi(data).then(() => {
-    if (globalConfig.History_Type == 'remote') {
-      message.success('指令已下发至生产管控平台成功！')
-    } else {
-      message.success('指令已下发成功！')
-    }
-  });
-};
-
-onMounted(async () => {
-  loading.value = true;
-  const playerDom = document.getElementById('fm-player1')?.getElementsByClassName('vjs-tech')[0]
-  mountedThree(playerDom).then(async () => {
-    await getMonitor(true);
-    loading.value = false;
-    
+  onMounted(async () => {
+    loading.value = true;
+    const playerDom = document.getElementById('fm-player1')?.getElementsByClassName('vjs-tech')[0];
+    mountedThree(playerDom).then(async () => {
+      await getMonitor(true);
+      loading.value = false;
+    });
   });
-});
 
-onBeforeUnmount(() => {
-  getDeviceBaseList();
-});
+  onBeforeUnmount(() => {
+    getDeviceBaseList();
+  });
 
-onUnmounted(() => {
-  if (timer) {
-    clearTimeout(timer);
-    timer = undefined;
-  }
-  destroy()
-  if(webRtcServer.length > 0){
-    webRtcServer.forEach(item => {
-      item.disconnect()
-    })
-  }
-});
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+    destroy();
+    if (webRtcServer.length > 0) {
+      webRtcServer.forEach((item) => {
+        item.disconnect();
+      });
+    }
+  });
 </script>
- ,
+,
 <style lang="less" scoped>
-@import '/@/design/vent/modal.less';
-.scene-box{
-  .bottom-tabs-box{
-    height: 350px;
+  @import '/@/design/vent/modal.less';
+  .scene-box {
+    .bottom-tabs-box {
+      height: 350px;
+    }
   }
-}
-.button-box {
-  border: none !important;
-  height: 34px !important;
+  .button-box {
+    border: none !important;
+    height: 34px !important;
 
-  &:hover {
-    background: linear-gradient(#2cd1ff55, #1eb0ff55) !important;
-  }
+    &:hover {
+      background: linear-gradient(#2cd1ff55, #1eb0ff55) !important;
+    }
 
-  &::before {
-    height: 27px !important;
-    background: linear-gradient(#1fa6cb, #127cb5) !important;
-  }
+    &::before {
+      height: 27px !important;
+      background: linear-gradient(#1fa6cb, #127cb5) !important;
+    }
 
-  &::after {
-    top: 35px !important;
+    &::after {
+      top: 35px !important;
+    }
   }
-}
-
-:deep(.@{ventSpace}-tabs-tabpane-active) {
-  height: 100%;
-}
 
-::-webkit-scrollbar-thumb {
-  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  background: #4288A444;
-}
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    height: 100%;
+  }
 
+  ::-webkit-scrollbar-thumb {
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: #4288a444;
+  }
 </style>

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

@@ -6,26 +6,34 @@
       class="threejs-Object-CSS"
       v-show="!loading"
       style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 1; top: 0"
-      >
+    >
       <div style="position: relative">
         <div class="elementTag" id="inputBox">
           <div class="elementContent elementContent-r" v-if="selectData.DataPa && backMonitorIsShow">
             <!-- <div class="element-item"><span class="data-title">风机气压(Pa)：</span><span>{{ selectData.DataPa ? selectData.DataPa : '-' }}</span></div> -->
-            <div class="element-item"><span class="data-title">风机负压(Pa)：</span><span>{{ (selectData.Fan2FanPre) ? selectData.Fan2FanPre : '-' }}</span></div>
-            <div class="element-item"><span class="data-title">风机风量(m³/s)：</span><span>{{ selectData.Fan2m3 ? selectData.Fan2m3 : '-' }}</span></div>
+            <div class="element-item"
+              ><span class="data-title">风机负压(Pa)：</span><span>{{ selectData.Fan2FanPre ? selectData.Fan2FanPre : '-' }}</span></div
+            >
+            <div class="element-item"
+              ><span class="data-title">风机风量(m³/s)：</span><span>{{ selectData.Fan2m3 ? selectData.Fan2m3 : '-' }}</span></div
+            >
           </div>
         </div>
         <div class="elementTag" id="inputBox1">
           <div class="elementContent elementContent-r" v-if="selectData.DataPa && frontMonitorIsShow">
             <!-- <div class="element-item"><span class="data-title">风机全压(Pa)：</span><span>{{ selectData.DataPa ? selectData.DataPa : '-' }}</span></div> -->
-            <div class="element-item"><span class="data-title">风机负压(Pa)：</span><span>{{ (selectData.Fan1FanPre) ? selectData.Fan1FanPre : '-'  }}</span></div>
-            <div class="element-item"><span class="data-title">风机风量(m³/s)：</span><span>{{ selectData.Fan1m3 ? selectData.Fan1m3 : '-' }}</span></div>
+            <div class="element-item"
+              ><span class="data-title">风机负压(Pa)：</span><span>{{ selectData.Fan1FanPre ? selectData.Fan1FanPre : '-' }}</span></div
+            >
+            <div class="element-item"
+              ><span class="data-title">风机风量(m³/s)：</span><span>{{ selectData.Fan1m3 ? selectData.Fan1m3 : '-' }}</span></div
+            >
           </div>
         </div>
         <div v-if="globalConfig?.simulatedPassword" class="elementTag" id="fbm">
           <div class="elementContent elementContent-r fbm-box">
             <div class="fbm-video">
-              <LivePlayer id="main-player2" ref="player2" :videoUrl="flvURL2()" muted live/>
+              <LivePlayer id="main-player2" ref="player2" :videoUrl="flvURL2()" muted live />
               <div class="vent-flex-row-between vent-margin-t-20">
                 <span class="data-title">风门开启状态：</span>
                 <template v-if="selectData['ExplosionVentOpen'] == 1 && selectData['ExplosionVentClose'] == 0">
@@ -35,31 +43,53 @@
                   <span class="data-title"><span class="signal-round signal-round-gry vent-margin-r-8"></span>关闭</span>
                 </template>
                 <template v-else>
-                  <div class="vent-margin-l-10"><span class="signal-round signal-round-warning vent-margin-r-8"></span>防爆门正在运行 或 数据异常</div>
+                  <div class="vent-margin-l-10"
+                    ><span class="signal-round signal-round-warning vent-margin-r-8"></span>防爆门正在运行 或 数据异常</div
+                  >
                 </template>
               </div>
               <div class="vent-flex-row-between vent-margin-t-10">
                 <span class="data-title">反风锁紧状态：</span>
-                <template v-if="selectData['Lock1Open'] == 1 && selectData['Lock1Close'] == 0 && selectData['Lock2Open'] ==1 && selectData['Lock2Close'] == 0">
+                <template
+                  v-if="
+                    selectData['Lock1Open'] == 1 && selectData['Lock1Close'] == 0 && selectData['Lock2Open'] == 1 && selectData['Lock2Close'] == '0'
+                  "
+                >
                   <span class="data-title"><span class="signal-round signal-round-blue vent-margin-r-8"></span>锁1开</span>
                   <span class="data-title"><span class="signal-round signal-round-blue vent-margin-r-8"></span>锁2开</span>
                 </template>
-                <template v-else-if="selectData['Lock1Open']==0 && selectData['Lock1Close']==1 && selectData['Lock2Open']==0 && selectData['Lock2Close']==1">
+                <template
+                  v-else-if="
+                    selectData['Lock1Open'] == '0' && selectData['Lock1Close'] == 1 && selectData['Lock2Open'] == '0' && selectData['Lock2Close'] == 1
+                  "
+                >
                   <span class="data-title"><span class="signal-round signal-round-gry vent-margin-r-8"></span>锁1关</span>
                   <span class="data-title"><span class="signal-round signal-round-gry vent-margin-r-8"></span>锁2关</span>
                 </template>
                 <template v-else>
-                  <div class="vent-margin-l-10"><span class="signal-round signal-round-warning vent-margin-r-8"></span>反风锁紧正在运行 或 数据异常</div>
+                  <div class="vent-margin-l-10"
+                    ><span class="signal-round signal-round-warning vent-margin-r-8"></span>反风锁紧正在运行 或 数据异常</div
+                  >
                 </template>
               </div>
             </div>
             <div class="fbm-data">
-              <div class="element-item"><span class="data-title">井口负压(kPa)：</span><span>{{ selectData.DataPa ? selectData.DataPa : '-' }}</span></div>
-              <div class="element-item"><span class="data-title">井口正压(kPa)：</span><span>{{ selectData.DataPa ? selectData.DataPa : '-' }}</span></div>
-              <div class="element-item"><span class="data-title">井口温度(℃)：</span><span>{{ selectData.DataPa ? selectData.DataPa : '-' }}</span></div>
-              <div class="element-item"><span class="data-title">甲烷浓度(%)：</span><span>{{ selectData.Fan1Negative ? selectData.Fan1Negative : '-' }}</span></div>
-              <div class="element-item"><span class="data-title">CO浓度(%)：</span><span>{{ selectData.Fan1m3 ? selectData.Fan1m3 : '-' }}</span></div>
-              <div class="vent-flex-row-between ">
+              <div class="element-item"
+                ><span class="data-title">井口负压(kPa)：</span><span>{{ selectData.DataPa ? selectData.DataPa : '-' }}</span></div
+              >
+              <div class="element-item"
+                ><span class="data-title">井口正压(kPa)：</span><span>{{ selectData.DataPa ? selectData.DataPa : '-' }}</span></div
+              >
+              <div class="element-item"
+                ><span class="data-title">井口温度(℃)：</span><span>{{ selectData.DataPa ? selectData.DataPa : '-' }}</span></div
+              >
+              <div class="element-item"
+                ><span class="data-title">甲烷浓度(%)：</span><span>{{ selectData.Fan1Negative ? selectData.Fan1Negative : '-' }}</span></div
+              >
+              <div class="element-item"
+                ><span class="data-title">CO浓度(%)：</span><span>{{ selectData.Fan1m3 ? selectData.Fan1m3 : '-' }}</span></div
+              >
+              <div class="vent-flex-row-between">
                 <span class="data-title">操作方式：</span>
                 <span class="data-title"><span class="signal-round signal-round-blue vent-margin-r-8"></span>远程</span>
                 <span class="data-title"><span class="signal-round signal-round-gry vent-margin-r-8"></span>就地</span>
@@ -74,7 +104,9 @@
   </div>
 
   <div class="scene-box" style="z-index: 999">
-    <div class="title-text" style="position: absolute; z-index: 9999; width: 100%; text-align: center">{{ selectData.strname }}</div>
+    <div class="title-text" style="position: absolute; z-index: 9999; width: 100%; text-align: center">{{
+      selectData.supplyAirAddr || selectData.strinstallpos || selectData.stationname
+    }}</div>
     <div class="top-box control-group" v-if="globalConfig?.simulatedPassword">
       <div class="button-box" v-for="(item, index) in modalTypeArr.centerBtnArr" :key="index">{{ item.value }}</div>
       <!-- <div class="button-box" v-for="(item, index) in modalTypeArr.centerBtnArr" :key="index" @click="showModal(item)">{{ item.value }}</div> -->
@@ -188,7 +220,9 @@
                           'signal-round-gry': selectData[state.dataIndex] === undefined,
                         }"
                       ></div>
-                      <div class="vent-margin-l-8">{{ selectData[state.dataIndex] === undefined ? '无状态' : selectData[state.dataIndex] ? '正常' : '异常' }}</div>
+                      <div class="vent-margin-l-8">{{
+                        selectData[state.dataIndex] === undefined ? '无状态' : selectData[state.dataIndex] ? '正常' : '异常'
+                      }}</div>
                     </div>
                   </div>
                 </div>
@@ -199,10 +233,21 @@
       </div>
     </div>
     <div class="bottom-tabs-box" @mousedown="setDivHeight($event, 250, scroll, 170)">
-      <dv-border-box8 :dur="5"  :style="`padding: 5px; height: ${scroll.y + 120}px`" >
+      <dv-border-box8 :dur="5" :style="`padding: 5px; height: ${scroll.y + 120}px`">
         <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
           <a-tab-pane key="1" tab="实时监测">
-            <GroupMonitorTable ref="MonitorDataTable" :dataSource="dataSource" columnsType="fanmain_monitor" @selectRow="getSelectRow" :scroll="{y: scroll.y - (headElHeight - 56)}"/>
+            <GroupMonitorTable
+              ref="MonitorDataTable"
+              :dataSource="dataSource"
+              columnsType="fanmain_monitor"
+              @selectRow="getSelectRow"
+              :scroll="{ y: scroll.y - (headElHeight - 56) }"
+            >
+              <template #action="{ record }">
+                <a v-if="globalConfig?.showReport" class="table-action-link" @click="deviceEdit($event, 'reportInfo', record)">报表录入</a>
+                <a class="table-action-link" @click="deviceEdit($event, 'deviceInfo', record)">设备编辑</a>
+              </template>
+            </GroupMonitorTable>
           </a-tab-pane>
           <!-- <a-tab-pane key="2" tab="实时曲线图" force-render>
             <div class="tab-item" v-if="activeKey === '2'">
@@ -211,17 +256,29 @@
           </a-tab-pane> -->
           <a-tab-pane key="3" tab="历史数据">
             <div class="tab-item" v-if="activeKey === '3'">
-              <HistoryTable device-type="fanmain" :device-list-api="baseList" designScope="fanmain-history" :scroll="scroll"/>
+              <HistoryTable device-type="fanmain" :device-list-api="baseList" designScope="fanmain-history" :scroll="scroll" />
             </div>
           </a-tab-pane>
           <a-tab-pane key="4" tab="报警历史">
             <div class="tab-item" v-if="activeKey === '4'">
-              <AlarmHistoryTable columns-type="alarm" device-type="fanmain" :device-list-api="baseList" designScope="alarm-history" :scroll="scroll"/>
+              <AlarmHistoryTable
+                columns-type="alarm"
+                device-type="fanmain"
+                :device-list-api="baseList"
+                designScope="alarm-history"
+                :scroll="scroll"
+              />
             </div>
           </a-tab-pane>
           <a-tab-pane key="5" tab="操作历史">
             <div class="tab-item" v-if="activeKey === '5'">
-              <HandlerHistoryTable columns-type="operator_history" device-type="fanmain" :device-list-api="baseList" designScope="alarm-history" :scroll="scroll"/>
+              <HandlerHistoryTable
+                columns-type="operator_history"
+                device-type="fanmain"
+                :device-list-api="baseList"
+                designScope="alarm-history"
+                :scroll="scroll"
+              />
             </div>
           </a-tab-pane>
         </a-tabs>
@@ -229,9 +286,13 @@
     </div>
   </div>
   <div style="z-index: -1; position: absolute; top: -100px; right: 10px; width: 300px; height: 280px; margin: auto" class="palyer">
-    <!-- <LivePlayer id="main-player1" ref="player1" :videoUrl="flvURL1()" muted live loading controls /> -->
     <LivePlayer id="main-player1" ref="player1" :videoUrl="flvURL1()" muted loop loading controls />
   </div>
+  <div
+    ref="playerRef"
+    style="z-index: 999; position: absolute; top: 100px; right: 15px; width: 100%; height: 100%; margin: auto; pointer-events: none"
+  >
+  </div>
   <a-modal v-model:visible="modalIsShow" :centered="true" :title="modalTitle" @ok="handleOk" @cancel="handleCancel" :destroyOnClose="true">
     <template #footer v-if="modalType == 'fbm'">
       <a-button key="back" @click="handleCancel">取消</a-button>
@@ -271,16 +332,20 @@
       <div class="" v-if="modalType == 'fbm'">
         <div class="vent-margin-t-20">
           <span class="data-title vent-margin-r-8">反风锁紧状态：</span>
-          <template v-if="selectData['Lock1Open']==1 && selectData['Lock1Close'] == 0 && selectData['Lock2Open'] == 1 && selectData['Lock2Close'] == 0">
+          <template
+            v-if="selectData['Lock1Open'] == 1 && selectData['Lock1Close'] == 0 && selectData['Lock2Open'] == 1 && selectData['Lock2Close'] == 0"
+          >
             <span class="data-title vent-margin-l-10"><span class="signal-round signal-round-blue vent-margin-r-8"></span>锁1开到位</span>
             <span class="data-title vent-margin-l-20"><span class="signal-round signal-round-blue vent-margin-r-8"></span>锁2开到位</span>
           </template>
-          <template v-else-if="selectData['Lock1Open'] == 0 && selectData['Lock1Close'] == 1 && selectData['Lock2Open'] == 0 && selectData['  '] == 1">
+          <template
+            v-else-if="selectData['Lock1Open'] == 0 && selectData['Lock1Close'] == 1 && selectData['Lock2Open'] == 0 && selectData['  '] == 1"
+          >
             <span class="data-title vent-margin-l-10"><span class="signal-round signal-round-gry vent-margin-r-8"></span>锁1关到位</span>
             <span class="data-title vent-margin-l-20"><span class="signal-round signal-round-gry vent-margin-r-8"></span>锁2关到位</span>
           </template>
           <template v-else>
-            <span class="data-title vent-margin-l-10 "><span class="signal-round signal-round-gry vent-margin-r-8"></span>锁1-</span>
+            <span class="data-title vent-margin-l-10"><span class="signal-round signal-round-gry vent-margin-r-8"></span>锁1-</span>
             <span class="data-title vent-margin-l-20"><span class="signal-round signal-round-gry vent-margin-r-8"></span>锁2-</span>
           </template>
         </div>
@@ -291,7 +356,9 @@
             <span class="btn btn2" @click="handleOk('closeLock')">关锁</span>
           </div>
           <!-- <a-switch v-if="fbmControlData.CtrlLockOpen !== undefined" style="margin-left: 5px;" v-model:checked="fbmControlData.CtrlLockOpen" checked-children="开锁" un-checked-children="关锁" /> -->
-          <div v-else class="vent-margin-l-10"><span class="signal-round signal-round-warning vent-margin-r-8"></span>反风锁紧正在运行 或 数据异常</div>
+          <div v-else class="vent-margin-l-10"
+            ><span class="signal-round signal-round-warning vent-margin-r-8"></span>反风锁紧正在运行 或 数据异常</div
+          >
         </div>
         <div class="vent-flex-row btn-box vent-margin-t-20">
           <span class="data-title vent-margin-r-8">防爆门扇控制：</span>
@@ -306,7 +373,7 @@
     </div>
   </a-modal>
   <!-- 工况辅助决策 -->
-  <ConditionAssistance @register="registerModal"/>
+  <ConditionAssistance @register="registerModal" />
 </template>
 
 <script setup lang="ts">
@@ -330,21 +397,22 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
   import { useRouter } from 'vue-router';
-  import ConditionAssistance from './components/conditionAssistance.vue'
+  import ConditionAssistance from './components/conditionAssistance.vue';
   import { useModal } from '/@/components/Modal';
   import type { BasicColumn } from '/@/components/Table/src/types/table';
-  import lodash from 'lodash';
+  import { useCamera } from '/@/hooks/system/useCamera';
   const globalConfig = inject('globalConfig');
-  
+
   const [registerModal, { openModal, closeModal }] = useModal();
   const { currentRoute } = useRouter();
 
   const { createMessage } = useMessage();
   const scroll = reactive({
-    y: 180
-  })
-  const isSimulation = true // 是否模拟状态
-  const MonitorDataTable = ref()
+    y: 180,
+  });
+  const playerRef = ref();
+  const isSimulation = true; // 是否模拟状态
+  const MonitorDataTable = ref();
   const player1 = ref(null);
   const player2 = ref(null);
   const activeKey = ref('1');
@@ -364,7 +432,7 @@
   const dataMonitorRowIndex = ref(0);
   // 默认数据右边监测的是1#风机
   const warningMonitorRowIndex = ref(0);
-  let headElHeight = ref(0)
+  let headElHeight = ref(0);
 
   // 监测数据
   const selectData = reactive({
@@ -376,22 +444,22 @@
     Fan2m3: '-', //电机流量
     deviceType: '',
     Fan2FanPre: '-',
-    Fan1FanPre: '-'
+    Fan1FanPre: '-',
   });
 
-  const deviceType = ref(selectData.deviceType)
-  const rightColumns = ref<BasicColumn[]>([])
-  const leftColumns = ref<BasicColumn[]>([])
+  const deviceType = ref(selectData.deviceType);
+  const rightColumns = ref<BasicColumn[]>([]);
+  const leftColumns = ref<BasicColumn[]>([]);
   watch(deviceType, (type) => {
-    rightColumns.value = getTableHeaderColumns(type + '_monitor_right') as []
+    rightColumns.value = getTableHeaderColumns(type + '_monitor_right') as [];
     if (rightColumns.value && rightColumns.value.length < 1) {
-      rightColumns.value = getTableHeaderColumns(type.split('_')[0] + '_monitor_right') as []
+      rightColumns.value = getTableHeaderColumns(type.split('_')[0] + '_monitor_right') as [];
     }
-    leftColumns.value = getTableHeaderColumns(type + '_monitor_left') as []
+    leftColumns.value = getTableHeaderColumns(type + '_monitor_left') as [];
     if (leftColumns.value && leftColumns.value.length < 1) {
-      leftColumns.value = getTableHeaderColumns(type.split('_')[0] + '_monitor_left') as []
+      leftColumns.value = getTableHeaderColumns(type.split('_')[0] + '_monitor_left') as [];
     }
-  })
+  });
 
   const flvURL1 = () => {
     // return `https://muiplayer.js.org/media/media.m3u8`;
@@ -417,9 +485,12 @@
     ['incipientWindSpeed3', 'V3风速'],
     ['sourcePressure', '气源压力'],
   ]);
+
+  const { getCamera, webRtcServer } = useCamera();
+
   const tabChange = (activeKeyVal) => {
     activeKey.value = activeKeyVal;
-    MonitorDataTable.value.setSelectedRowKeys(selectData.deviceID)
+    MonitorDataTable.value.setSelectedRowKeys(selectData.deviceID);
   };
 
   // 设备数据
@@ -435,7 +506,7 @@
       dataSource.value.push(data);
     });
     const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
-    
+
     Object.assign(selectData, data);
     return data;
   };
@@ -443,32 +514,35 @@
   let timer: null | NodeJS.Timeout = null;
   const getMonitor = (flag?) => {
     if (Object.prototype.toString.call(timer) === '[object Null]') {
-      timer = setTimeout(async () => {
-        await getDataSource();
-        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'])
+      timer = setTimeout(
+        async () => {
+          await getDataSource();
+          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']);
+            }
           }
-        }        
-        Object.assign(selectData, deviceBaseList.value, dataSource.value[selectRowIndex.value]);
-        if (selectData['Fan1StartStatus'] == 1 && selectData['Fan2StartStatus'] == 0) {
-          frontMonitorIsShow.value = true
-          backMonitorIsShow.value = false
-        } else if (selectData['Fan2StartStatus'] == 1 && selectData['Fan1StartStatus'] == 0) {
-          backMonitorIsShow.value = true
-          frontMonitorIsShow.value = false;
-        }
-        deviceType.value = selectData.deviceType
-        addText();
-        playAnimate(selectData);
-        if (timer) {
-          timer = null;
-        }
-        getMonitor();
-      }, flag ? 0 : 1000);
+          Object.assign(selectData, deviceBaseList.value, dataSource.value[selectRowIndex.value]);
+          if (selectData['Fan1StartStatus'] == 1 && selectData['Fan2StartStatus'] == 0) {
+            frontMonitorIsShow.value = true;
+            backMonitorIsShow.value = false;
+          } else if (selectData['Fan2StartStatus'] == 1 && selectData['Fan1StartStatus'] == 0) {
+            backMonitorIsShow.value = true;
+            frontMonitorIsShow.value = false;
+          }
+          deviceType.value = selectData.deviceType;
+          addText();
+          playAnimate(selectData);
+          if (timer) {
+            timer = null;
+          }
+          getMonitor();
+        },
+        flag ? 0 : 1000
+      );
     }
   };
 
@@ -497,44 +571,42 @@
     });
   };
   // 切换检测数据
-  const getSelectRow = (id) => {
+  const getSelectRow = async (id) => {
     if (!id) return;
     loading.value = true;
     const baseDataIndex: any = dataSource.value.findIndex((baseData: any) => baseData.deviceID === id);
     selectRowIndex.value = baseDataIndex;
     const type = 'mainWindRect';
-    // const type = baseDataIndex > 0 ? 'fm' : 'fc';
-
     for (const key in selectData) {
-      selectData[key] = ''
+      selectData[key] = '';
     }
-    nextTick(async() => {
-      await setModelType(type)
+    nextTick(async () => {
+      await setModelType(type);
       loading.value = false;
-      if(!headElHeight.value){
+      if (!headElHeight.value) {
         const headEl = document.querySelector(`.zxm-table-thead`);
         if (headEl) {
-          headElHeight.value = headEl.clientHeight
+          headElHeight.value = headEl.clientHeight;
         }
-      } 
+      }
       const data = dataSource.value[selectRowIndex.value];
       if (data['Fan1StartStatus'] == 1) {
-        selectDevice('warningMonitorRowIndex', 0)
-        selectDevice('dataMonitorRowIndex', 0)
+        selectDevice('warningMonitorRowIndex', 0);
+        selectDevice('dataMonitorRowIndex', 0);
       } else if (data['Fan2StartStatus'] == 1) {
-        selectDevice('warningMonitorRowIndex', 1)
-        selectDevice('dataMonitorRowIndex', 1)
+        selectDevice('warningMonitorRowIndex', 1);
+        selectDevice('dataMonitorRowIndex', 1);
       }
       Object.assign(selectData, data);
-    })
-    
+    });
+    await getCamera(id, playerRef.value);
     return;
   };
 
   const start = (paramcode, value?, isTest?) => {
     return new Promise((reolve, reject) => {
       let data;
-      if(isTest){
+      if (isTest) {
         data = {
           deviceid: selectData.deviceID,
           devicetype: selectData.deviceType,
@@ -542,7 +614,7 @@
           password: passWord.value,
           testvalue: value,
         };
-      }else{
+      } else {
         data = {
           deviceid: selectData.deviceID,
           devicetype: selectData.deviceType,
@@ -551,16 +623,18 @@
           value: value,
         };
       }
-      deviceControlApi(data).then((res) => {
-        if (res.success) {
-          reolve(null)
-        }else{
-          reject(null)
-        }
-      }).catch(() => {
-        reject(null)
-      })
-    })
+      deviceControlApi(data)
+        .then((res) => {
+          if (res.success) {
+            reolve(null);
+          } else {
+            reject(null);
+          }
+        })
+        .catch(() => {
+          reject(null);
+        });
+    });
   };
 
   // 切换左右两边1#、2#风机的监测数据
@@ -577,31 +651,31 @@
     if (obj.key == 'kkjc') {
       // 工况辅助决策
       openModal(true, {});
-      return
+      return;
     }
 
     modalType.value = obj.key;
     modalTitle.value = obj.value;
     modalIsShow.value = true;
-    if(modalType.value == 'startSmoke'){
+    if (modalType.value == 'startSmoke') {
       if (selectData['Fan1StartStatus'] == 1 && selectData['Fan2StartStatus'] == 0) {
         mainWindIsShow1.value = 'open';
         mainWindIsShow2.value = 'stop';
-        frontMonitorIsShow.value = true
-        backMonitorIsShow.value = false
+        frontMonitorIsShow.value = true;
+        backMonitorIsShow.value = false;
       } else if (selectData['Fan2StartStatus'] == 1 && selectData['Fan1StartStatus'] == 0) {
         mainWindIsShow2.value = 'open';
         mainWindIsShow1.value = 'stop';
-        backMonitorIsShow.value = true
+        backMonitorIsShow.value = true;
         frontMonitorIsShow.value = false;
       }
     }
-    if(modalType.value == 'frequency') {
-      if(selectData['Fan1StartStatus'] == 1 && selectData['Fan2StartStatus'] == 0){
-        frequencyVal.value = selectData['Fan1FreqHz']
+    if (modalType.value == 'frequency') {
+      if (selectData['Fan1StartStatus'] == 1 && selectData['Fan2StartStatus'] == 0) {
+        frequencyVal.value = selectData['Fan1FreqHz'];
       }
-      if(selectData['Fan2StartStatus'] == 1 && selectData['Fan1StartStatus'] == 0){
-        frequencyVal.value = selectData['Fan2FreqHz']
+      if (selectData['Fan2StartStatus'] == 1 && selectData['Fan1StartStatus'] == 0) {
+        frequencyVal.value = selectData['Fan2FreqHz'];
       }
     }
   };
@@ -618,27 +692,31 @@
       }
     }
   };
-  
+
   const handleOk = (flag?) => {
     // if (passWord.value !== '123456') {
     //   createMessage.warning('密码不正确，请重新输入');
     //   return;
     // }
     if (modalType.value == 'startSmoke') {
-      if ((selectData['Fan1StartStatus'] == 1 && selectData['Fan2StartStatus'] == 0)) {
-        start('CtrlFan2Start').then(() => {
-          frontMonitorIsShow.value = false;
-          backMonitorIsShow.value = true;
-        }).catch(() => {
-          createMessage.error('操作失败，请联系管理员')
-        })
-      } else if ((selectData['Fan1StartStatus'] == 0 && selectData['Fan2StartStatus'] == 1)) {
-        start('CtrlFan1Start').then(() => {
-          frontMonitorIsShow.value = true;
-          backMonitorIsShow.value = false;
-        }).catch(() => {
-          createMessage.error('操作失败，请联系管理员')
-        });
+      if (selectData['Fan1StartStatus'] == 1 && selectData['Fan2StartStatus'] == 0) {
+        start('CtrlFan2Start')
+          .then(() => {
+            frontMonitorIsShow.value = false;
+            backMonitorIsShow.value = true;
+          })
+          .catch(() => {
+            createMessage.error('操作失败，请联系管理员');
+          });
+      } else if (selectData['Fan1StartStatus'] == 0 && selectData['Fan2StartStatus'] == 1) {
+        start('CtrlFan1Start')
+          .then(() => {
+            frontMonitorIsShow.value = true;
+            backMonitorIsShow.value = false;
+          })
+          .catch(() => {
+            createMessage.error('操作失败，请联系管理员');
+          });
       } else if (mainWindIsShow1.value === 'stop' && mainWindIsShow2.value === 'stop') {
         frontMonitorIsShow.value = false;
         backMonitorIsShow.value = false;
@@ -646,125 +724,131 @@
     } else if (modalType.value == 'changeDirection') {
       if (selectData['Fan1StartStatus'] == 1 && selectData['Fan2StartStatus'] == 0) {
         // 主机一键反风
-        if(isSimulation){
-          const fan1Forward = selectData['Fan1FreqForwardRun'] == 1 ? 0 : 1
-          const fan1Reverse = fan1Forward == 0 ? 1 : 0
+        if (isSimulation) {
+          const fan1Forward = selectData['Fan1FreqForwardRun'] == 1 ? 0 : 1;
+          const fan1Reverse = fan1Forward == 0 ? 1 : 0;
           // 模拟
-          start('CtrlFan1Reverse', { Fan1FreqForwardRun: fan1Forward, Fan1FreqReverseRun: fan1Reverse }, true ).catch(() => {
-            createMessage.error('操作失败，请联系管理员')
-          })
-        }else{
+          start('CtrlFan1Reverse', { Fan1FreqForwardRun: fan1Forward, Fan1FreqReverseRun: fan1Reverse }, true).catch(() => {
+            createMessage.error('操作失败，请联系管理员');
+          });
+        } else {
           // 实际
           start('CtrlFan1Reverse').catch(() => {
-            createMessage.error('操作失败，请联系管理员')
-          })
+            createMessage.error('操作失败，请联系管理员');
+          });
         }
       } else if (selectData['Fan2StartStatus'] == 1 && selectData['Fan1StartStatus'] == 0) {
-        if(isSimulation){
-          const fan2Forward = selectData['Fan2FreqForwardRun'] == 1 ? 0 : 1
-          const fan2Reverse = fan2Forward == 0 ? 1 : 0
+        if (isSimulation) {
+          const fan2Forward = selectData['Fan2FreqForwardRun'] == 1 ? 0 : 1;
+          const fan2Reverse = fan2Forward == 0 ? 1 : 0;
           // 模拟
           start('CtrlFan2Reverse', { Fan2FreqForwardRun: fan2Forward, Fan2FreqReverseRun: fan2Reverse }, true).catch(() => {
-            createMessage.error('操作失败，请联系管理员')
-          })
-        }else {
+            createMessage.error('操作失败，请联系管理员');
+          });
+        } else {
           // 实际
           start('CtrlFan2Reverse').catch(() => {
-            createMessage.error('操作失败，请联系管理员')
-          })
+            createMessage.error('操作失败，请联系管理员');
+          });
         }
       }
-    } else if(selectData['Fan2StartStatus'] == 0 && selectData['Fan1StartStatus'] == 0){
-
+    } else if (selectData['Fan2StartStatus'] == 0 && selectData['Fan1StartStatus'] == 0) {
     } else if (modalType.value == 'changeSmoke') {
       // 不听风倒机
-      if ((selectData['Fan1StartStatus'] == 1 && selectData['Fan2StartStatus'] == 0)) {
+      if (selectData['Fan1StartStatus'] == 1 && selectData['Fan2StartStatus'] == 0) {
         // 由主到备
         // 正启动
         if (selectData['Fan1FreqForwardRun'] && selectData['Fan1FreqForwardRun'] == 1) {
-          console.log('一键1倒2正启动控制  ')
-          start('CtrlFan1ToFan2Forward').then(() => {
-            frontMonitorIsShow.value = false;
-            backMonitorIsShow.value = true;
-          }).catch(() => {
-            createMessage.error('操作失败，请联系管理员')
-          });
+          console.log('一键1倒2正启动控制  ');
+          start('CtrlFan1ToFan2Forward')
+            .then(() => {
+              frontMonitorIsShow.value = false;
+              backMonitorIsShow.value = true;
+            })
+            .catch(() => {
+              createMessage.error('操作失败，请联系管理员');
+            });
         }
         // 反启动
         if (selectData['Fan1FreqReverseRun'] && selectData['Fan1FreqReverseRun'] == 1) {
-          console.log('一键1倒2反启动控制')
-          start('CtrlFan1ToFan2Reverse').then(() => {
-            frontMonitorIsShow.value = false;
-            backMonitorIsShow.value = true;
-          }).catch(() => {
-            createMessage.error('操作失败，请联系管理员')
-          });
+          console.log('一键1倒2反启动控制');
+          start('CtrlFan1ToFan2Reverse')
+            .then(() => {
+              frontMonitorIsShow.value = false;
+              backMonitorIsShow.value = true;
+            })
+            .catch(() => {
+              createMessage.error('操作失败，请联系管理员');
+            });
         }
-
       } else if (selectData['Fan2StartStatus'] == 1 && selectData['Fan1StartStatus'] == 0) {
         // 由备到主
         // 正启动
         if (selectData['Fan2FreqForwardRun'] && selectData['Fan2FreqForwardRun'] == 1) {
-          console.log('一键2倒1正启动控制')
-          start('CtrlFan2ToFan1Forward').then(() => {
-            frontMonitorIsShow.value = true;
-            backMonitorIsShow.value = false;
-          }).catch(() => {
-            createMessage.error('操作失败，请联系管理员')
-          });
+          console.log('一键2倒1正启动控制');
+          start('CtrlFan2ToFan1Forward')
+            .then(() => {
+              frontMonitorIsShow.value = true;
+              backMonitorIsShow.value = false;
+            })
+            .catch(() => {
+              createMessage.error('操作失败，请联系管理员');
+            });
         }
         // 反启动
         if (selectData['Fan2FreqReverseRun'] && selectData['Fan2FreqReverseRun'] == 1) {
-          console.log('一键2倒1反启动控制')
-          start('CtrlFan2ToFan1Reverse').then(() => {
-            frontMonitorIsShow.value = true;
-            backMonitorIsShow.value = false;
-          }).catch(() => {
-            createMessage.error('操作失败，请联系管理员')
-          });
+          console.log('一键2倒1反启动控制');
+          start('CtrlFan2ToFan1Reverse')
+            .then(() => {
+              frontMonitorIsShow.value = true;
+              backMonitorIsShow.value = false;
+            })
+            .catch(() => {
+              createMessage.error('操作失败，请联系管理员');
+            });
         }
       }
     } else if (modalType.value == 'frequency') {
       if (selectData['Fan1StartStatus'] == 1 && selectData['Fan2StartStatus'] == 0) {
         start('CtrlFan1FreqSet', frequencyVal.value).catch(() => {
-          createMessage.error('操作失败，请联系管理员')
-        })
+          createMessage.error('操作失败，请联系管理员');
+        });
       } else if (selectData['Fan2StartStatus'] == 1 && selectData['Fan1StartStatus'] == 0) {
         start('CtrlFan2FreqSet', frequencyVal.value).catch(() => {
-          createMessage.error('操作失败，请联系管理员')
-        })
+          createMessage.error('操作失败，请联系管理员');
+        });
       }
-    } else if(modalType.value == 'fbm'){
+    } else if (modalType.value == 'fbm') {
       // 门扇处于打开状态时，反风锁紧装置无法操作
-      if(selectData['ExplosionVentOpen']==1 && (flag === 'openLock' || flag === 'closeLock')){
-        createMessage.warning('门扇处于打开状态时，反风锁紧装置无法操作')
-        return
-      } 
+      if (selectData['ExplosionVentOpen'] == 1 && (flag === 'openLock' || flag === 'closeLock')) {
+        createMessage.warning('门扇处于打开状态时，反风锁紧装置无法操作');
+        return;
+      }
       // 当反风装置关锁时，无法控制门体打开或关闭
-      if((selectData['Lock1Close'] == 1 || selectData['Lock2Close'] == 1) && (flag === 'openGate' || flag === 'closeGate')){
-        createMessage.warning('当反风装置关锁时，无法控制门体打开或关闭')
-        return
+      if ((selectData['Lock1Close'] == 1 || selectData['Lock2Close'] == 1) && (flag === 'openGate' || flag === 'closeGate')) {
+        createMessage.warning('当反风装置关锁时，无法控制门体打开或关闭');
+        return;
       }
       // 开锁 // 关锁
-      if(flag === 'openLock'){
+      if (flag === 'openLock') {
         start('CtrlLockOpen').then(() => {
-          createMessage.success('开锁成功')
-        })
-      }else if(flag === 'closeLock'){
+          createMessage.success('开锁成功');
+        });
+      } else if (flag === 'closeLock') {
         start('CtrlLockClose').then(() => {
-          createMessage.success('关锁成功')
-        })
+          createMessage.success('关锁成功');
+        });
       }
-      
+
       // 开门  关门
-      if(flag === 'openGate') {
+      if (flag === 'openGate') {
         start('CtrlExplosionVentOpen').then(() => {
-          createMessage.success('开门成功')
-        })
-      }else if(flag === 'closeGate') {
+          createMessage.success('开门成功');
+        });
+      } else if (flag === 'closeGate') {
         start('CtrlExplosionVentClose').then(() => {
-          createMessage.success('关门成功')
-        })
+          createMessage.success('关门成功');
+        });
       }
     }
 
@@ -787,6 +871,14 @@
     modalIsShow.value = false;
   };
 
+  function deviceEdit(e: Event, type: string, record) {
+    e.stopPropagation();
+    openModal(true, {
+      type,
+      deviceId: record['deviceID'],
+    });
+  }
+
   onBeforeMount(() => {
     // document.body.addEventListener('mousedown', addPlayVideo, true);
     getDeviceBaseList();
@@ -794,7 +886,7 @@
 
   onMounted(() => {
     loading.value = true;
-   
+
     mountedThree(player1.value).then(async () => {
       // await setModelType('mainWindRect');
       getMonitor(true);
@@ -810,6 +902,11 @@
       clearTimeout(timer);
       timer = undefined;
     }
+    if (webRtcServer.length > 0) {
+      webRtcServer.forEach((item) => {
+        if (item) item.disconnect();
+      });
+    }
   });
 </script>
 
@@ -887,7 +984,7 @@
         top: 35px !important;
       }
     }
-    .button-box-disable{
+    .button-box-disable {
       border: 1px solid #65dbea !important;
       &:hover {
         background: none !important;
@@ -1094,16 +1191,15 @@
     }
   }
 
-  .scene-box .bottom-tabs-box{
+  .scene-box .bottom-tabs-box {
     height: 280px;
-    .tabs-box{
+    .tabs-box {
       position: relative !important;
     }
   }
 
   .threejs-Object-CSS {
     .elementTag {
-      
       .elementContent {
         backdrop-filter: blur(2px);
         width: 220px;
@@ -1115,18 +1211,16 @@
         .element-item {
           line-height: 38px;
           display: flex;
-          justify-content: space-between
+          justify-content: space-between;
         }
         span {
           color: #f2a500;
           // color: #74e9fe;
-
         }
-        .data-title{
+        .data-title {
           display: inline-block;
           color: #fff;
         }
-        
       }
       .elementContent-r {
         &::before {
@@ -1138,16 +1232,16 @@
           background: #a7a7a766;
         }
       }
-      .fbm-box{
+      .fbm-box {
         width: auto;
         display: flex;
         justify-content: space-between;
-        .fbm-video{
+        .fbm-video {
           width: 240px;
           margin-right: 20px;
         }
-        .fbm-data{
-          width: 200px
+        .fbm-data {
+          width: 200px;
         }
       }
     }
@@ -1202,7 +1296,17 @@
       }
     }
   }
-
+  ::v-deep(#LivePlayerBox) {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    padding-right: 380px;
+    pointer-events: none;
+    .video-parent {
+      height: 208px;
+      pointer-events: auto !important;
+    }
+  }
   ::v-deep(.@{ventSpace}-table-wrapper) {
     height: 100% !important;
   }

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

@@ -1,6 +1,5 @@
 <template>
-  <div class="bg"
-    style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
+  <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
     <a-spin :spinning="loading" />
     <div id="deviceDetail" class="device-detail">
       <div id="deviceCard" class="device-card" style="z-index: -1; position: absolute">
@@ -9,8 +8,11 @@
           <div class="left-box"></div>
           <div class="right-box">
             <div><span class="detail-title">规格型号：</span> <span>KJ-980-F</span></div>
-            <div><span class="detail-title">技术参数：</span>
-              <span>380V，电机功率22kW,50Hz，B级绝缘，额定电流42.2A，效率90.5%，能效等级3，接法角型，2940r/min，轴承6311/CM 6211/CM，功率因数0.89</span>
+            <div
+              ><span class="detail-title">技术参数：</span>
+              <span
+                >380V，电机功率22kW,50Hz，B级绝缘，额定电流42.2A，效率90.5%，能效等级3，接法角型，2940r/min，轴承6311/CM 6211/CM，功率因数0.89</span
+              >
             </div>
           </div>
         </div>
@@ -52,603 +54,649 @@
       <dv-border-box8 :dur="5" :style="`padding: 5px; height: ${scroll.y + 120}px`">
         <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
           <a-tab-pane key="1" tab="实时监测">
-            <MonitorTable v-if="activeKey === '1'" ref="MonitorDataTable" class="monitor-table" :columns="columns"
-              :dataSource="dataSource" design-scope="gate-monitor" @selectRow="getSelectRow" :scroll="{ y: scroll.y - 40 }" title="风门监测"
-              :isShowPagination="true">
+            <MonitorTable
+              v-if="activeKey === '1'"
+              ref="MonitorDataTable"
+              class="monitor-table"
+              :columns="columns"
+              :dataSource="dataSource"
+              design-scope="gate-monitor"
+              @selectRow="getSelectRow"
+              :scroll="{ y: scroll.y - 40 }"
+              title="风门监测"
+              :isShowPagination="true"
+            >
               <template #filterCell="{ column, record }">
                 <template v-if="record.frontGateOpenCtrl == 1 || record.frontGateOpenCtrl === true">
-                  <a-tag
-                    v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0"
-                    color="red">正在打开</a-tag>
+                  <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0" color="red"
+                    >正在打开</a-tag
+                  >
                   <a-tag v-else-if="column.dataIndex === 'frontGateOpen'" color="processing">打开</a-tag>
                 </template>
                 <template v-else-if="record.frontGateOpenCtrl == 0 || record.frontGateOpenCtrl === false">
-                  <a-tag
-                    v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0"
-                    color="red">正在关闭</a-tag>
-                  <a-tag
-                    v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 1"
-                    color="default">关闭</a-tag>
-                  <a-tag
-                    v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 1 && record.frontGateClose == 0"
-                    color="default">打开</a-tag>
+                  <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0" color="red"
+                    >正在关闭</a-tag
+                  >
+                  <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 1" color="default"
+                    >关闭</a-tag
+                  >
+                  <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 1 && record.frontGateClose == 0" color="default"
+                    >打开</a-tag
+                  >
                 </template>
                 <template v-if="record.rearGateOpenCtrl == 1 || record.rearGateOpenCtrl === true">
-                  <a-tag
-                    v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0"
-                    color="red">正在打开</a-tag>
+                  <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0" color="red"
+                    >正在打开</a-tag
+                  >
                   <a-tag v-else-if="column.dataIndex === 'rearGateOpen'" color="processing">打开</a-tag>
                 </template>
                 <template v-else-if="record.rearGateOpenCtrl == 0 || record.rearGateOpenCtrl === false">
-                  <a-tag
-                    v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0"
-                    color="red">正在关闭</a-tag>
-                  <a-tag
-                    v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 1"
-                    color="default">关闭</a-tag>
-                  <a-tag
-                    v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 1 && record.rearGateClose == 0"
-                    color="default">打开</a-tag>
+                  <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0" color="red"
+                    >正在关闭</a-tag
+                  >
+                  <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 1" color="default"
+                    >关闭</a-tag
+                  >
+                  <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 1 && record.rearGateClose == 0" color="default"
+                    >打开</a-tag
+                  >
                 </template>
 
                 <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : 'red'">{{
                   record.warnFlag == 0 ? '正常' : '报警'
                 }}</a-tag>
-                <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == 0 ? 'default' : 'green'">{{
-                  record.netStatus == 0 ? '断开' : '连接'
+                <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
+                  record.netStatus == '0' ? '断开' : '连接'
                 }}</a-tag>
               </template>
             </MonitorTable>
           </a-tab-pane>
           <a-tab-pane key="2" tab="实时曲线图" force-render>
             <div class="tab-item" v-if="activeKey === '2'">
-              <DeviceEcharts chartsColumnsType="gate_chart" xAxisPropType="strname" :dataSource="dataSource" height="100%"
-                :chartsColumns="chartsColumns" :device-list-api="list" device-type="gate" />
+              <DeviceEcharts
+                chartsColumnsType="gate_chart"
+                xAxisPropType="strname"
+                :dataSource="dataSource"
+                height="100%"
+                :chartsColumns="chartsColumns"
+                :device-list-api="list"
+                device-type="gate"
+              />
             </div>
           </a-tab-pane>
           <a-tab-pane key="3" tab="历史数据">
             <div class="tab-item" v-if="activeKey === '3'">
-              <HistoryTable columns-type="gate" device-type="gate" :device-list-api="getTableList"
-                designScope="gate-history" :scroll="scroll" />
+              <HistoryTable columns-type="gate" device-type="gate" :device-list-api="getTableList" designScope="gate-history" :scroll="scroll" />
             </div>
           </a-tab-pane>
           <a-tab-pane key="4" tab="报警历史">
             <div class="tab-item" v-if="activeKey === '4'">
-              <AlarmHistoryTable columns-type="alarm" device-type="gate" :device-list-api="getTableList"
-                designScope="alarm-history" :scroll="scroll" />
+              <AlarmHistoryTable
+                columns-type="alarm"
+                device-type="gate"
+                :device-list-api="getTableList"
+                designScope="alarm-history"
+                :scroll="scroll"
+              />
             </div>
           </a-tab-pane>
           <a-tab-pane key="5" tab="操作历史">
             <div class="tab-item" v-if="activeKey === '5'">
-              <HandlerHistoryTable columns-type="operator_history" device-type="gate" :device-list-api="getTableList"
-                designScope="alarm-history" :scroll="scroll" />
+              <HandlerHistoryTable
+                columns-type="operator_history"
+                device-type="gate"
+                :device-list-api="getTableList"
+                designScope="alarm-history"
+                :scroll="scroll"
+              />
             </div>
           </a-tab-pane>
         </a-tabs>
       </dv-border-box8>
     </div>
   </div>
-  <div ref="playerRef" style="z-index: 999; position: absolute; top: 100px; right: 15px; width: 300px; height: 280px; margin: auto">
-  </div>
-  <HandleModal v-if="!globalConfig?.simulatedPassword" :modal-is-show="modalIsShow" :modal-title="modalTitle" :modal-type="modalType" @handle-ok="handleOK"
-    @handle-cancel="handleCancel" />
+  <div ref="playerRef" style="z-index: 999; position: absolute; top: 100px; right: 15px; width: 300px; height: 280px; margin: auto"> </div>
+  <HandleModal
+    v-if="!globalConfig?.simulatedPassword"
+    :modal-is-show="modalIsShow"
+    :modal-title="modalTitle"
+    :modal-type="modalType"
+    @handle-ok="handleOK"
+    @handle-cancel="handleCancel"
+  />
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onUnmounted, onMounted, ref, reactive, nextTick, inject } from 'vue';
-import DeviceEcharts from '../comment/DeviceEcharts.vue';
-import MonitorTable from '../comment/MonitorTable.vue';
-import HistoryTable from '../comment/HistoryTable.vue';
-import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
-import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
-import HandleModal from './modal.vue';
-import { mountedThree, addMonitorText, play, destroy, setModelType, initCameraCanvas } from './gate.threejs';
-import { deviceControlApi } from '/@/api/vent/index';
-import { message } from 'ant-design-vue';
-import { list, getTableList, cameraList, cameraAddrList } from './gate.api';
-import { chartsColumns, columns, echartsOption, echartsOption1 } from './gate.data';
-import lodash from 'lodash';
-import { setDivHeight } from '/@/utils/event';
-import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
-import { useRouter } from 'vue-router';
-import { deviceCameraInit } from '/@/utils/ventutil.ts'
-const globalConfig = inject('globalConfig');
-
-const { currentRoute } = useRouter();
-const MonitorDataTable = ref()
-
-const playerRef = ref();
-
-
-const activeKey = ref('1'); // tab
-const loading = ref(false);
-
-const scroll = reactive({
-  y: 240
-})
-
-const frontDoorIsOpen = ref(false); //前门是否开启
-const backDoorIsOpen = ref(false); //后门是否开启
-
-const modalIsShow = ref<boolean>(false); // 是否显示模态框
-const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
-const modalType = ref(''); // 模态框内容显示类型，设备操作类型
-
-const selectRowIndex = ref(-1); // 选中行
-const dataSource = ref([]);
-
-const deviceBaseList = ref([]); // 设备基本信息
-let webRtcServer: any[] = []
-
-const tabChange = (activeKeyVal) => {
-  activeKey.value = activeKeyVal;
-  if (activeKeyVal == 1) {
-    nextTick(() => {
-      MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID])
-    })
-  }
-};
-
-const initData = {
-  deviceID: '',
-  deviceType: '',
-  strname: '',
-  frontRearDP: '-', //压差
-  sourcePressure: '-', //气源压力
-  runRoRecondition: null,
-  autoRoManual: null,
-  netStatus: '0', //通信状态
-  frontGateOpen: '0',
-  frontGateClose: '1',
-  rearGateOpen: '0',
-  rearGateClose: '1',
-  fault: '气源压力超限',
-  masterComputer: 0,
-  frontGateOpenCtrl: false,
-  rearGateOpenCtrl: false,
-  cameras: []
-};
-
-// 监测数据
-const selectData = reactive(lodash.cloneDeep(initData));
-
-// 获取设备基本信息列表
-function getDeviceBaseList() {
-  getTableList({ pageSize: 1000 }).then((res) => {
-    deviceBaseList.value = res.records;
+  import { onBeforeUnmount, onUnmounted, onMounted, ref, reactive, nextTick, inject } from 'vue';
+  import DeviceEcharts from '../comment/DeviceEcharts.vue';
+  import MonitorTable from '../comment/MonitorTable.vue';
+  import HistoryTable from '../comment/HistoryTable.vue';
+  import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
+  import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
+  import HandleModal from './modal.vue';
+  import { mountedThree, addMonitorText, play, destroy, setModelType, initCameraCanvas } from './gate.threejs';
+  import { deviceControlApi } from '/@/api/vent/index';
+  import { message } from 'ant-design-vue';
+  import { list, getTableList, cameraList, cameraAddrList } from './gate.api';
+  import { chartsColumns, columns, echartsOption, echartsOption1 } from './gate.data';
+  import lodash from 'lodash';
+  import { setDivHeight } from '/@/utils/event';
+  import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
+  import { useRouter } from 'vue-router';
+  import { deviceCameraInit } from '/@/utils/ventutil.ts';
+  const globalConfig = inject('globalConfig');
+
+  const { currentRoute } = useRouter();
+  const MonitorDataTable = ref();
+
+  const playerRef = ref();
+
+  const activeKey = ref('1'); // tab
+  const loading = ref(false);
+
+  const scroll = reactive({
+    y: 240,
   });
-};
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-async function getMonitor(flag?) {
-  if (Object.prototype.toString.call(timer) === '[object Null]') {
-    timer = await setTimeout(async () => {
-      const res = await list({ devicetype: 'gate', pagetype: 'normal' })
-      if (res.msgTxt && res.msgTxt[0]) {
-        dataSource.value = res.msgTxt[0].datalist || [];
-        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']])
-          }
-        }
-        Object.assign(selectData, dataSource.value[selectRowIndex.value]);
-        addMonitorText(selectData);
-        monitorAnimation(selectData)
-        if (timer) {
-          timer = null;
-        }
-        getMonitor();
-      }
-    }, flag ? 0 : 1000);
-  }
-};
-
-async function getCamera() {
-  const res = await cameraList({ deviceid: selectData['deviceID'] })
-  const cameras: [] = res.records || []
-  let cameraAddrs:any[] = [], cameraNames:string[] = [];
-  if (cameras.length > 0){
-    cameras.forEach(item => {
-      if (item['devicekind'] == 'toRtsp' || item['devicekind'] == 'toHLS') {
-        cameraNames.push(item['name'])
-      } else {
-        cameraAddrs.push({name: item['name'], addr: item['addr'] })
-      }
-    })
-  }
-  if (cameraNames.length > 0) {
-    // 请求接口从装备院拿数据
-    const addrs: string[] = await cameraAddrList({ cameraNameList: cameraNames })
-    for(let i=0; i < addrs.length; i++){
-      cameraAddrs.push({name: '摄像头'+i, addr: addrs[i]})
+
+  const frontDoorIsOpen = ref(false); //前门是否开启
+  const backDoorIsOpen = ref(false); //后门是否开启
+
+  const modalIsShow = ref<boolean>(false); // 是否显示模态框
+  const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
+  const modalType = ref(''); // 模态框内容显示类型，设备操作类型
+
+  const selectRowIndex = ref(-1); // 选中行
+  const dataSource = ref([]);
+
+  const deviceBaseList = ref([]); // 设备基本信息
+  let webRtcServer: any[] = [];
+
+  const tabChange = (activeKeyVal) => {
+    activeKey.value = activeKeyVal;
+    if (activeKeyVal == 1) {
+      nextTick(() => {
+        MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID]);
+      });
     }
+  };
+
+  const initData = {
+    deviceID: '',
+    deviceType: '',
+    strname: '',
+    frontRearDP: '-', //压差
+    sourcePressure: '-', //气源压力
+    runRoRecondition: null,
+    autoRoManual: null,
+    netStatus: '0', //通信状态
+    frontGateOpen: '0',
+    frontGateClose: '1',
+    rearGateOpen: '0',
+    rearGateClose: '1',
+    fault: '气源压力超限',
+    masterComputer: 0,
+    frontGateOpenCtrl: false,
+    rearGateOpenCtrl: false,
+    cameras: [],
+  };
+
+  // 监测数据
+  const selectData = reactive(lodash.cloneDeep(initData));
+
+  // 获取设备基本信息列表
+  function getDeviceBaseList() {
+    getTableList({ pageSize: 1000 }).then((res) => {
+      deviceBaseList.value = res.records;
+    });
   }
-  const obj = await deviceCameraInit(cameraAddrs, playerRef.value, webRtcServer)
-  webRtcServer = obj.webRtcServerList
-  const playerDoms = obj.playerDoms
-  // 注意前后门适应需要对应 //[0] 后门 [1]前门
-  await initCameraCanvas(...playerDoms)
-}
-
-// 切换检测数据
-async function getSelectRow(selectRow, index) {
-  if (!selectRow) return;
-  loading.value = true;
-  selectRowIndex.value = index;
-
-  const baseData: any = deviceBaseList.value.find((baseData: any) => baseData.id === selectRow.deviceID);
-  Object.assign(selectData, initData, selectRow, baseData);
-  isFrontOpenRunning = false //开关门动作是否在进行
-  isFrontCloseRunning = false //开关门动作是否在进行
-  isRearOpenRunning = false //开关门动作是否在进行
-  isRearCloseRunning = false //开关门动作是否在进行
-  frontDeviceState = 0 //记录设备状态，为了与下一次监测数据做比较
-  rearDeviceState = 0 //记录设备状态，为了与下一次监测数据做比较
-  // const type = selectData.nwindownum == 1 ? 'singleWindow' : 'doubleWindow';
-  let type;
-  if (selectData.deviceType == 'gate_ss') {
-    type = 'fm2'
-  } else {
-    type = 'fm1'
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  async function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = await setTimeout(
+        async () => {
+          const res = await list({ devicetype: 'gate', pagetype: 'normal' });
+          if (res.msgTxt && res.msgTxt[0]) {
+            dataSource.value = res.msgTxt[0].datalist || [];
+            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']]);
+              }
+            }
+            Object.assign(selectData, dataSource.value[selectRowIndex.value]);
+            addMonitorText(selectData);
+            monitorAnimation(selectData);
+            if (timer) {
+              timer = null;
+            }
+            getMonitor();
+          }
+        },
+        flag ? 0 : 1000
+      );
+    }
   }
-  setModelType(type).then(async() => {
-    addMonitorText(selectData);
-    loading.value = false;
-    
-  });
-  await getCamera()
-};
-
-// 播放动画
-function playAnimation(handlerState) {
-  switch (handlerState) {
-    case 1: // 打开前门
-      if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '1') {
-        modalTitle.value = '打开前门';
-        modalType.value = '1';
-        modalIsShow.value = true;
-      } else {
-        message.warning('前门已经打开或正在打开,请勿重新操作')
-      }
-      break;
-    case 2: // 关闭前门
-      if (selectData.frontGateOpen == '1' && selectData.frontGateClose == '0') {
-        modalTitle.value = '关闭前门';
-        modalType.value = '2';
-        modalIsShow.value = true;
-      } else {
-        message.warning('前门已经关闭或正在关闭,请勿重新操作')
-      }
-      break;
-    case 3: // 打开后门
-      if (selectData.rearGateOpen == '0' && selectData.rearGateClose == '1') {
-        modalTitle.value = '打开后门';
-        modalType.value = '3';
-        modalIsShow.value = true;
-      } else {
-        message.warning('后门已经打开或正在打开,请勿重新操作')
-      }
-      break;
-    case 4: // 关闭后门
-      if (selectData.rearGateOpen == '1' && selectData.rearGateClose == '0') {
-        modalTitle.value = '关闭后门';
-        modalType.value = '4';
-        modalIsShow.value = true;
-      } else {
-        message.warning('后门已经关闭或正在关闭,请勿重新操作')
-      }
-      break;
-    case 5: // 打开前后门
-      if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '1' && selectData.rearGateOpen == '0' && selectData.rearGateClose == '1') {
-        modalTitle.value = '打开前后门';
-        modalType.value = '5';
-        modalIsShow.value = true;
-      } else {
-        message.warning('前后门已经打开或正在打开,请勿重新操作')
-      }
-      break;
-    case 6: // 关闭前后门
-      if (selectData.frontGateOpen == '1' && selectData.frontGateClose == '0' && selectData.rearGateOpen == '1' && selectData.rearGateClose == '0') {
-        modalTitle.value = '关闭前后门';
-        modalType.value = '6';
-        modalIsShow.value = true;
-      } else {
-        message.warning('前后门已经关闭或正在关闭,请勿重新操作')
+
+  async function getCamera() {
+    const res = await cameraList({ deviceid: selectData['deviceID'] });
+    const cameras: [] = res.records || [];
+    let cameraAddrs: any[] = [],
+      cameraNames: string[] = [];
+    if (cameras.length > 0) {
+      cameras.forEach((item) => {
+        if (item['devicekind'] == 'toRtsp' || item['devicekind'] == 'toHLS') {
+          cameraNames.push(item['name']);
+        } else {
+          cameraAddrs.push({ name: item['name'], addr: item['addr'] });
+        }
+      });
+    }
+    if (cameraNames.length > 0) {
+      // 请求接口从装备院拿数据
+      const addrs: string[] = await cameraAddrList({ cameraNameList: cameraNames });
+      for (let i = 0; i < addrs.length; i++) {
+        cameraAddrs.push({ name: '摄像头' + i, addr: addrs[i] });
       }
-      break;
+    }
+    const obj = await deviceCameraInit(cameraAddrs, playerRef.value, webRtcServer);
+    webRtcServer = obj.webRtcServerList;
+    const playerDoms = obj.playerDoms;
+    // 注意前后门适应需要对应 //[0] 后门 [1]前门
+    await initCameraCanvas(...playerDoms);
   }
 
-  if (globalConfig?.simulatedPassword) {
-    handleOK('', handlerState + '')
+  // 切换检测数据
+  async function getSelectRow(selectRow, index) {
+    if (!selectRow) return;
+    loading.value = true;
+    selectRowIndex.value = index;
+
+    const baseData: any = deviceBaseList.value.find((baseData: any) => baseData.id === selectRow.deviceID);
+    Object.assign(selectData, initData, selectRow, baseData);
+    isFrontOpenRunning = false; //开关门动作是否在进行
+    isFrontCloseRunning = false; //开关门动作是否在进行
+    isRearOpenRunning = false; //开关门动作是否在进行
+    isRearCloseRunning = false; //开关门动作是否在进行
+    frontDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
+    rearDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
+    // const type = selectData.nwindownum == 1 ? 'singleWindow' : 'doubleWindow';
+    let type;
+    if (selectData.deviceType == 'gate_ss') {
+      type = 'fm2';
+    } else {
+      type = 'fm1';
+    }
+    setModelType(type).then(async () => {
+      addMonitorText(selectData);
+      loading.value = false;
+    });
+    await getCamera();
   }
-};
-
 
-function handleOK(passWord, handlerState) {
-  // if (passWord !== '123456') {
-  //   message.warning('密码不正确，请重新输入');
-  //   return;
-  // }
+  // 播放动画
+  function playAnimation(handlerState) {
+    switch (handlerState) {
+      case 1: // 打开前门
+        if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '1') {
+          modalTitle.value = '打开前门';
+          modalType.value = '1';
+          modalIsShow.value = true;
+        } else {
+          message.warning('前门已经打开或正在打开,请勿重新操作');
+        }
+        break;
+      case 2: // 关闭前门
+        if (selectData.frontGateOpen == '1' && selectData.frontGateClose == '0') {
+          modalTitle.value = '关闭前门';
+          modalType.value = '2';
+          modalIsShow.value = true;
+        } else {
+          message.warning('前门已经关闭或正在关闭,请勿重新操作');
+        }
+        break;
+      case 3: // 打开后门
+        if (selectData.rearGateOpen == '0' && selectData.rearGateClose == '1') {
+          modalTitle.value = '打开后门';
+          modalType.value = '3';
+          modalIsShow.value = true;
+        } else {
+          message.warning('后门已经打开或正在打开,请勿重新操作');
+        }
+        break;
+      case 4: // 关闭后门
+        if (selectData.rearGateOpen == '1' && selectData.rearGateClose == '0') {
+          modalTitle.value = '关闭后门';
+          modalType.value = '4';
+          modalIsShow.value = true;
+        } else {
+          message.warning('后门已经关闭或正在关闭,请勿重新操作');
+        }
+        break;
+      case 5: // 打开前后门
+        if (
+          selectData.frontGateOpen == '0' &&
+          selectData.frontGateClose == '1' &&
+          selectData.rearGateOpen == '0' &&
+          selectData.rearGateClose == '1'
+        ) {
+          modalTitle.value = '打开前后门';
+          modalType.value = '5';
+          modalIsShow.value = true;
+        } else {
+          message.warning('前后门已经打开或正在打开,请勿重新操作');
+        }
+        break;
+      case 6: // 关闭前后门
+        if (
+          selectData.frontGateOpen == '1' &&
+          selectData.frontGateClose == '0' &&
+          selectData.rearGateOpen == '1' &&
+          selectData.rearGateClose == '0'
+        ) {
+          modalTitle.value = '关闭前后门';
+          modalType.value = '6';
+          modalIsShow.value = true;
+        } else {
+          message.warning('前后门已经关闭或正在关闭,请勿重新操作');
+        }
+        break;
+    }
 
-  if ((isFrontOpenRunning || isFrontCloseRunning) && (handlerState == 2 || handlerState == 1 || handlerState == 5 || handlerState == 6)) {
-    return
+    if (globalConfig?.simulatedPassword) {
+      handleOK('', handlerState + '');
+    }
   }
 
-  if ((isRearOpenRunning || isRearCloseRunning) && (handlerState == 3 || handlerState == 4 || handlerState == 5 || handlerState == 6)) {
-    return
-  }
+  function handleOK(passWord, handlerState) {
+    // if (passWord !== '123456') {
+    //   message.warning('密码不正确，请重新输入');
+    //   return;
+    // }
 
-  const data = {
-    deviceid: selectData.deviceID,
-    devicetype: selectData.deviceType,
-    paramcode: '',
-    value: null,
-    password: passWord,
-    masterComputer: selectData.masterComputer,
-  };
-  let handler = () => { };
+    if ((isFrontOpenRunning || isFrontCloseRunning) && (handlerState == 2 || handlerState == 1 || handlerState == 5 || handlerState == 6)) {
+      return;
+    }
 
-  switch (handlerState) {
-    case '1': // 打开前门
-      if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '1') {
-        handler = () => {
-          frontDoorIsOpen.value = true;
-        };
-        data.paramcode = 'frontGateOpen_S';
-      }
-      break;
-    case '2': // 关闭前门
-      if (selectData.frontGateOpen == '1' && selectData.frontGateClose == '0') {
-        handler = () => {
-          frontDoorIsOpen.value = false;
-        };
-        data.paramcode = 'frontGateClose_S';
-      }
-      break;
-    case '3': // 打开后门
-      if (selectData.rearGateOpen == '0' && selectData.rearGateClose == '1') {
-        handler = () => {
-          backDoorIsOpen.value = true;
-        };
-        data.paramcode = 'rearGateOpen_S';
-      }
-      break;
-    case '4': // 关闭后门
-      if (selectData.rearGateOpen == '1' && selectData.rearGateClose == '0') {
-        handler = () => {
-          backDoorIsOpen.value = false;
-        };
-        data.paramcode = 'rearGateClose_S';
-      }
-      break;
-    case '5': // 打开前后门
-      if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '1' && selectData.rearGateOpen == '0' && selectData.rearGateClose == '1') {
-        handler = () => {
-          frontDoorIsOpen.value = true;
-          backDoorIsOpen.value = true;
-        };
-        data.paramcode = 'sameTimeOpen';
-      }
-      break;
-    case '6': // 关闭前后门
-      if (selectData.frontGateOpen == '1' && selectData.frontGateClose == '0' && selectData.rearGateOpen == '1' && selectData.rearGateClose == '0') {
-        handler = () => {
-          frontDoorIsOpen.value = false;
-          backDoorIsOpen.value = false;
-        };
-        data.paramcode = 'sameTimeClose';
-      }
-      break;
-  }
-  if (data.paramcode) {
-    deviceControlApi(data)
-      .then((res) => {
+    if ((isRearOpenRunning || isRearCloseRunning) && (handlerState == 3 || handlerState == 4 || handlerState == 5 || handlerState == 6)) {
+      return;
+    }
+
+    const data = {
+      deviceid: selectData.deviceID,
+      devicetype: selectData.deviceType,
+      paramcode: '',
+      value: null,
+      password: passWord,
+      masterComputer: selectData.masterComputer,
+    };
+    let handler = () => {};
+
+    switch (handlerState) {
+      case '1': // 打开前门
+        if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '1') {
+          handler = () => {
+            frontDoorIsOpen.value = true;
+          };
+          data.paramcode = 'frontGateOpen_S';
+        }
+        break;
+      case '2': // 关闭前门
+        if (selectData.frontGateOpen == '1' && selectData.frontGateClose == '0') {
+          handler = () => {
+            frontDoorIsOpen.value = false;
+          };
+          data.paramcode = 'frontGateClose_S';
+        }
+        break;
+      case '3': // 打开后门
+        if (selectData.rearGateOpen == '0' && selectData.rearGateClose == '1') {
+          handler = () => {
+            backDoorIsOpen.value = true;
+          };
+          data.paramcode = 'rearGateOpen_S';
+        }
+        break;
+      case '4': // 关闭后门
+        if (selectData.rearGateOpen == '1' && selectData.rearGateClose == '0') {
+          handler = () => {
+            backDoorIsOpen.value = false;
+          };
+          data.paramcode = 'rearGateClose_S';
+        }
+        break;
+      case '5': // 打开前后门
+        if (
+          selectData.frontGateOpen == '0' &&
+          selectData.frontGateClose == '1' &&
+          selectData.rearGateOpen == '0' &&
+          selectData.rearGateClose == '1'
+        ) {
+          handler = () => {
+            frontDoorIsOpen.value = true;
+            backDoorIsOpen.value = true;
+          };
+          data.paramcode = 'sameTimeOpen';
+        }
+        break;
+      case '6': // 关闭前后门
+        if (
+          selectData.frontGateOpen == '1' &&
+          selectData.frontGateClose == '0' &&
+          selectData.rearGateOpen == '1' &&
+          selectData.rearGateClose == '0'
+        ) {
+          handler = () => {
+            frontDoorIsOpen.value = false;
+            backDoorIsOpen.value = false;
+          };
+          data.paramcode = 'sameTimeClose';
+        }
+        break;
+    }
+    if (data.paramcode) {
+      deviceControlApi(data).then((res) => {
         // 模拟时开启
         if (res.success) {
           modalIsShow.value = false;
           if (globalConfig.History_Type == 'remote') {
-            message.success('指令已下发至生产管控平台成功！')
+            message.success('指令已下发至生产管控平台成功！');
           } else {
-            message.success('指令已下发成功！')
+            message.success('指令已下发成功！');
           }
         }
-      })
+      });
+    }
   }
-};
-
-/** 开关门动画调用 */
-let isFrontOpenRunning = false //开关门动作是否在进行
-let isFrontCloseRunning = false //开关门动作是否在进行
-let isRearOpenRunning = false //开关门动作是否在进行
-let isRearCloseRunning = false //开关门动作是否在进行
-let frontDeviceState = 0 //记录设备状态，为了与下一次监测数据做比较
-let rearDeviceState = 0 //记录设备状态，为了与下一次监测数据做比较  
-function monitorAnimation(selectData) {
-  const timeScale = 0.003
-  if (selectData.frontGateOpenCtrl == 1 || selectData.frontGateOpenCtrl === true) {
-    isFrontCloseRunning = false
-    if (selectData.frontGateOpen == 0 && selectData.frontGateClose == 0) {
-      //打开前门1
-
-      if (!isFrontOpenRunning) {
-        frontDoorIsOpen.value = true
-        backDoorIsOpen.value = true
-        isFrontOpenRunning = true
-        play(1, timeScale)
-        frontDeviceState = 1
-      }
 
-    }
-    if (selectData.frontGateOpen == 1 && selectData.frontGateClose == 0) {
-      isFrontOpenRunning = false
-      if (frontDeviceState != 1) {
-        import.meta.env.VITE_GLOB_IS_SIMULATE ? play(1, timeScale) : play(1)
-        frontDeviceState = 1
-        frontDoorIsOpen.value = false
-        backDoorIsOpen.value = true
+  /** 开关门动画调用 */
+  let isFrontOpenRunning = false; //开关门动作是否在进行
+  let isFrontCloseRunning = false; //开关门动作是否在进行
+  let isRearOpenRunning = false; //开关门动作是否在进行
+  let isRearCloseRunning = false; //开关门动作是否在进行
+  let frontDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
+  let rearDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
+  function monitorAnimation(selectData) {
+    const timeScale = 0.003;
+    if (selectData.frontGateOpenCtrl == 1 || selectData.frontGateOpenCtrl === true) {
+      isFrontCloseRunning = false;
+      if (selectData.frontGateOpen == 0 && selectData.frontGateClose == 0) {
+        //打开前门1
+
+        if (!isFrontOpenRunning) {
+          frontDoorIsOpen.value = true;
+          backDoorIsOpen.value = true;
+          isFrontOpenRunning = true;
+          play(1, timeScale);
+          frontDeviceState = 1;
+        }
       }
-    }
-  } else {
-    if (selectData.frontGateOpen == 0 && selectData.frontGateClose == 0) {
-      //关闭前门
-      isFrontOpenRunning = false
-      if (!isFrontCloseRunning) {
-        isFrontCloseRunning = true
-        play(2, timeScale)
-        frontDeviceState = 2
-        frontDoorIsOpen.value = true
-        backDoorIsOpen.value = true
+      if (selectData.frontGateOpen == 1 && selectData.frontGateClose == 0) {
+        isFrontOpenRunning = false;
+        if (frontDeviceState != 1) {
+          import.meta.env.VITE_GLOB_IS_SIMULATE ? play(1, timeScale) : play(1);
+          frontDeviceState = 1;
+          frontDoorIsOpen.value = false;
+          backDoorIsOpen.value = true;
+        }
       }
-    }
-    if (selectData.frontGateClose == 1 && selectData.frontGateOpen == 0) {
-      isFrontCloseRunning = false
-      if (frontDeviceState == 1) {
-        import.meta.env.VITE_GLOB_IS_SIMULATE ? play(2, timeScale) : play(2)
-        frontDeviceState = 2
-        frontDoorIsOpen.value = false
-        // backDoorIsOpen.value = false
+    } else {
+      if (selectData.frontGateOpen == 0 && selectData.frontGateClose == 0) {
+        //关闭前门
+        isFrontOpenRunning = false;
+        if (!isFrontCloseRunning) {
+          isFrontCloseRunning = true;
+          play(2, timeScale);
+          frontDeviceState = 2;
+          frontDoorIsOpen.value = true;
+          backDoorIsOpen.value = true;
+        }
+      }
+      if (selectData.frontGateClose == 1 && selectData.frontGateOpen == 0) {
+        isFrontCloseRunning = false;
+        if (frontDeviceState == 1) {
+          import.meta.env.VITE_GLOB_IS_SIMULATE ? play(2, timeScale) : play(2);
+          frontDeviceState = 2;
+          frontDoorIsOpen.value = false;
+          // backDoorIsOpen.value = false
+        }
       }
     }
-  }
 
-  if (selectData.rearGateOpenCtrl == 1 || selectData.rearGateOpenCtrl === true) {
-    isRearCloseRunning = false
-    if (selectData.rearGateOpen == 0 && selectData.rearGateClose == 0) {
-      //打开后门
-      if (!isRearOpenRunning) {
-        isRearOpenRunning = true
-        play(3, timeScale)
-        rearDeviceState = 3
-        frontDoorIsOpen.value = true
-        backDoorIsOpen.value = true
+    if (selectData.rearGateOpenCtrl == 1 || selectData.rearGateOpenCtrl === true) {
+      isRearCloseRunning = false;
+      if (selectData.rearGateOpen == 0 && selectData.rearGateClose == 0) {
+        //打开后门
+        if (!isRearOpenRunning) {
+          isRearOpenRunning = true;
+          play(3, timeScale);
+          rearDeviceState = 3;
+          frontDoorIsOpen.value = true;
+          backDoorIsOpen.value = true;
+        }
       }
+      if (selectData.rearGateOpen == 1 && selectData.rearGateClose == 0) {
+        isRearOpenRunning = false;
 
-    }
-    if (selectData.rearGateOpen == 1 && selectData.rearGateClose == 0) {
-      isRearOpenRunning = false
-
-      if (rearDeviceState != 3) {
-        rearDeviceState = 3
-        import.meta.env.VITE_GLOB_IS_SIMULATE ? play(3, timeScale) : play(3)
-        backDoorIsOpen.value = false
-        frontDoorIsOpen.value = true
+        if (rearDeviceState != 3) {
+          rearDeviceState = 3;
+          import.meta.env.VITE_GLOB_IS_SIMULATE ? play(3, timeScale) : play(3);
+          backDoorIsOpen.value = false;
+          frontDoorIsOpen.value = true;
+        }
       }
-    }
-  } else {
-    if (selectData.rearGateOpen == 0 && selectData.rearGateClose == 0) {
-      //关闭后门
-      isRearOpenRunning = false
-      if (!isRearCloseRunning) {
-        isRearCloseRunning = true
-        play(4, timeScale)
-        rearDeviceState = 4
-        frontDoorIsOpen.value = true
-        backDoorIsOpen.value = true
+    } else {
+      if (selectData.rearGateOpen == 0 && selectData.rearGateClose == 0) {
+        //关闭后门
+        isRearOpenRunning = false;
+        if (!isRearCloseRunning) {
+          isRearCloseRunning = true;
+          play(4, timeScale);
+          rearDeviceState = 4;
+          frontDoorIsOpen.value = true;
+          backDoorIsOpen.value = true;
+        }
       }
-    }
-    if (selectData.rearGateClose == 1 && selectData.rearGateOpen == 0) {
-      isRearCloseRunning = false
-      if (rearDeviceState == 3) {
-        rearDeviceState = 4
-        import.meta.env.VITE_GLOB_IS_SIMULATE ? play(4, timeScale) : play(4)
-        backDoorIsOpen.value = false
+      if (selectData.rearGateClose == 1 && selectData.rearGateOpen == 0) {
+        isRearCloseRunning = false;
+        if (rearDeviceState == 3) {
+          rearDeviceState = 4;
+          import.meta.env.VITE_GLOB_IS_SIMULATE ? play(4, timeScale) : play(4);
+          backDoorIsOpen.value = false;
+        }
       }
     }
-  }
 
-  // console.log('frontGateOpen:', selectData.frontGateOpen, '  frontGateClose:', selectData.frontGateClose, ' rearGateOpen:', selectData.rearGateOpen, '  rearGateClose:', selectData.rearGateClose, '  frontGateOpenCtrl:', selectData.frontGateOpenCtrl, '  rearGateOpenCtrl:', selectData.rearGateOpenCtrl)
+    // console.log('frontGateOpen:', selectData.frontGateOpen, '  frontGateClose:', selectData.frontGateClose, ' rearGateOpen:', selectData.rearGateOpen, '  rearGateClose:', selectData.rearGateClose, '  frontGateOpenCtrl:', selectData.frontGateOpenCtrl, '  rearGateOpenCtrl:', selectData.rearGateOpenCtrl)
+  }
 
-}
+  function handleCancel() {
+    modalIsShow.value = false;
+    modalTitle.value = '';
+    modalType.value = '';
+  }
 
-function handleCancel() {
-  modalIsShow.value = false;
-  modalTitle.value = '';
-  modalType.value = '';
-};
+  // 远程、就地切换
+  function changeType() {
+    const data = {
+      deviceid: selectData.deviceID,
+      devicetype: selectData.deviceType,
+      paramcode: 'autoRoManualControl',
+      value: selectData.autoRoManual,
+    };
+    deviceControlApi(data).then(() => {
+      if (globalConfig.History_Type == 'remote') {
+        message.success('指令已下发至生产管控平台成功！');
+      } else {
+        message.success('指令已下发成功！');
+      }
+    });
+  }
 
-// 远程、就地切换
-function changeType() {
-  const data = {
-    deviceid: selectData.deviceID,
-    devicetype: selectData.deviceType,
-    paramcode: 'autoRoManualControl',
-    value: selectData.autoRoManual,
-  };
-  deviceControlApi(data).then(() => {
-    if (globalConfig.History_Type == 'remote') {
-      message.success('指令已下发至生产管控平台成功！')
-    } else {
-      message.success('指令已下发成功！')
-    }
+  onMounted(async () => {
+    loading.value = true;
+    mountedThree().then(async () => {
+      await getMonitor(true);
+      loading.value = false;
+    });
   });
-};
 
-onMounted(async () => {
-  loading.value = true;
-  mountedThree().then(async () => {
-    await getMonitor(true);
-    loading.value = false;
+  onBeforeUnmount(() => {
+    getDeviceBaseList();
   });
-});
-
-onBeforeUnmount(() => {
-  getDeviceBaseList();
-});
 
-onUnmounted(() => {
-  if (timer) {
-    clearTimeout(timer);
-    timer = undefined;
-  }
-  destroy()
-  if(webRtcServer.length > 0){
-    webRtcServer.forEach(item => {
-      item.disconnect()
-    })
-  }
-});
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+    destroy();
+    if (webRtcServer.length > 0) {
+      webRtcServer.forEach((item) => {
+        item.disconnect();
+      });
+    }
+  });
 </script>
 
 <style lang="less" scoped>
-@import '/@/design/vent/modal.less';
-.scene-box{
-  .bottom-tabs-box{
-    height: 350px;
+  @import '/@/design/vent/modal.less';
+  .scene-box {
+    .bottom-tabs-box {
+      height: 350px;
+    }
   }
-}
-.button-box {
-  border: none !important;
-  height: 34px !important;
+  .button-box {
+    border: none !important;
+    height: 34px !important;
 
-  &:hover {
-    background: linear-gradient(#2cd1ff55, #1eb0ff55) !important;
-  }
+    &:hover {
+      background: linear-gradient(#2cd1ff55, #1eb0ff55) !important;
+    }
 
-  &::before {
-    height: 27px !important;
-    background: linear-gradient(#1fa6cb, #127cb5) !important;
-  }
+    &::before {
+      height: 27px !important;
+      background: linear-gradient(#1fa6cb, #127cb5) !important;
+    }
 
-  &::after {
-    top: 35px !important;
+    &::after {
+      top: 35px !important;
+    }
   }
-}
-
-:deep(.@{ventSpace}-tabs-tabpane-active) {
-  height: 100%;
-}
 
-::-webkit-scrollbar-thumb {
-  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  background: #4288A444;
-}
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    height: 100%;
+  }
 
+  ::-webkit-scrollbar-thumb {
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: #4288a444;
+  }
 </style>

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

@@ -6,56 +6,63 @@
           <GroupMonitorTable :dataSource="dataSource" :columnsType="`${deviceType}_monitor`" />
         </template>
         <template v-else-if="activeKey == '1' && deviceType">
-          <MonitorTable ref="monitorTable" :columnsType="`${deviceType}_monitor`" :dataSource="dataSource"
-            design-scope="device_monitor" :isShowPagination="false" :isShowActionColumn="isHaveAction.includes(deviceType.split('_')[0]) ? false : true" :is-show-select="false" title="设备监测"
-            :form-config="deviceType == 'safetymonitor' ? formConfig : undefined" :scroll="{y: 650}">
+          <MonitorTable
+            ref="monitorTable"
+            :columnsType="`${deviceType}_monitor`"
+            :dataSource="dataSource"
+            design-scope="device_monitor"
+            :isShowPagination="false"
+            :isShowActionColumn="isHaveAction.includes(deviceType.split('_')[0]) ? false : true"
+            :is-show-select="false"
+            title="设备监测"
+            :form-config="deviceType == 'safetymonitor' ? formConfig : undefined"
+            :scroll="{ y: 650 }"
+          >
             <template #filterCell="{ column, record }">
               <template v-if="deviceType.startsWith('gate')">
                 <template v-if="record.frontGateOpenCtrl == 1 || record.frontGateOpenCtrl === true">
-                  <a-tag
-                    v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0"
-                    color="red">正在打开</a-tag>
+                  <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0" color="red"
+                    >正在打开</a-tag
+                  >
                   <a-tag v-else-if="column.dataIndex === 'frontGateOpen'" color="processing">打开</a-tag>
                 </template>
                 <template v-else-if="record.frontGateOpenCtrl == 0 || record.frontGateOpenCtrl === false">
-                  <a-tag
-                    v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0"
-                    color="red">正在关闭</a-tag>
-                  <a-tag
-                    v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 1"
-                    color="default">关闭</a-tag>
-                  <a-tag
-                    v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 1 && record.frontGateClose == 0"
-                    color="default">打开</a-tag>
+                  <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0" color="red"
+                    >正在关闭</a-tag
+                  >
+                  <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 1" color="default"
+                    >关闭</a-tag
+                  >
+                  <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 1 && record.frontGateClose == 0" color="default"
+                    >打开</a-tag
+                  >
                 </template>
                 <template v-if="record.rearGateOpenCtrl == 1 || record.rearGateOpenCtrl === true">
-                  <a-tag
-                    v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0"
-                    color="red">正在打开</a-tag>
+                  <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0" color="red"
+                    >正在打开</a-tag
+                  >
                   <a-tag v-else-if="column.dataIndex === 'rearGateOpen'" color="processing">打开</a-tag>
                 </template>
                 <template v-else-if="record.rearGateOpenCtrl == 0 || record.rearGateOpenCtrl === false">
-                  <a-tag
-                    v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0"
-                    color="red">正在关闭</a-tag>
-                  <a-tag
-                    v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 1"
-                    color="default">关闭</a-tag>
-                  <a-tag
-                    v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 1 && record.rearGateClose == 0"
-                    color="default">打开</a-tag>
+                  <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0" color="red"
+                    >正在关闭</a-tag
+                  >
+                  <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 1" color="default"
+                    >关闭</a-tag
+                  >
+                  <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 1 && record.rearGateClose == 0" color="default"
+                    >打开</a-tag
+                  >
                 </template>
               </template>
               <template v-if="deviceType.startsWith('windrect')">
-                <a-tag v-if="column.dataIndex === 'sign'"
-                  :color="record.sign == 0 ? '#95CF65' : record.sign == 1 ? '#4590EA' : '#9876AA'"> {{
-                    record.sign == 0 ? '高位' : record.sign == 1 ? '中位' : '低位'
-                  }}</a-tag>
+                <a-tag v-if="column.dataIndex === 'sign'" :color="record.sign == '0' ? '#95CF65' : record.sign == 1 ? '#4590EA' : '#9876AA'">
+                  {{ record.sign == '0' ? '高位' : record.sign == 1 ? '中位' : '低位' }}</a-tag
+                >
                 <template v-if="record && column && column.dataIndex === 'isRun' && record.isRun">
-                  <a-tag v-if="record.isRun == -2 || record.isRun == -1"
-                    :color="record.isRun == -2 ? '#95CF65' : '#ED5700'">{{
-                      record.isRun == -2 ? '空闲' : '等待'
-                    }}</a-tag>
+                  <a-tag v-if="record.isRun == -2 || record.isRun == -1" :color="record.isRun == -2 ? '#95CF65' : '#ED5700'">{{
+                    record.isRun == -2 ? '空闲' : '等待'
+                  }}</a-tag>
                   <a-tag v-else-if="record.isRun == 100" color="#4693FF">完成</a-tag>
                   <Progress v-else :percent="Number(record.isRun)" size="small" status="active" />
                 </template>
@@ -68,12 +75,11 @@
                 <div v-if="!record.lowRange && column.dataIndex === 'lowRange'">-</div>
                 <div v-if="!record.dataTypeName && column.dataIndex === 'dataTypeName'">-</div>
               </template>
-              <a-tag v-if="column.dataIndex === 'warnFlag'"
-                :color="record.warnFlag == 0 ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'"> {{
-                  record.warnFlag == 0 ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测'
-                }}</a-tag>
-              <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == 0 ? 'default' : 'green'">{{
-                record.netStatus == 0 ? '断开' : '连接'
+              <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'">
+                {{ record.warnFlag == '0' ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测' }}</a-tag
+              >
+              <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
+                record.netStatus == '0' ? '断开' : '连接'
               }}</a-tag>
             </template>
           </MonitorTable>
@@ -95,13 +101,18 @@
           <BarAndLine v-else xAxisPropType="strname" :dataSource="dataSource" height="100%"
             :chartsColumns="chartsColumnsreal" chartsType="" :option="echartsOption" />
         </div> -->
-
       </a-tab-pane>
       <a-tab-pane key="2" tab="历史数据">
         <div class="tab-item">
-          <HistoryTable ref="historyTable" v-if="activeKey == '2'" :columns-type="`${deviceType}`"
-            :device-type="deviceType" :device-list-api="getDeviceList.bind(null, { devicekind: deviceType })"
-            designScope="device-history" @change="changeHis" />
+          <HistoryTable
+            ref="historyTable"
+            v-if="activeKey == '2'"
+            :columns-type="`${deviceType}`"
+            :device-type="deviceType"
+            :device-list-api="getDeviceList.bind(null, { devicekind: deviceType })"
+            designScope="device-history"
+            @change="changeHis"
+          />
         </div>
         <!-- 图表 -->
         <!-- <div v-if="alive" style="width:100%;height:280px;margin: 20px 0px;">
@@ -124,16 +135,26 @@
       </a-tab-pane>
       <a-tab-pane key="3" tab="报警历史">
         <div class="tab-item">
-          <AlarmHistoryTable ref="alarmHistoryTable" v-if="activeKey == '3'" columns-type="alarm"
-            :device-type="deviceType" :device-list-api="getDeviceList.bind(null, { devicekind: deviceType })"
-            designScope="alarm-history" />
+          <AlarmHistoryTable
+            ref="alarmHistoryTable"
+            v-if="activeKey == '3'"
+            columns-type="alarm"
+            :device-type="deviceType"
+            :device-list-api="getDeviceList.bind(null, { devicekind: deviceType })"
+            designScope="alarm-history"
+          />
         </div>
       </a-tab-pane>
       <a-tab-pane key="4" tab="操作历史" v-if="deviceType !== 'safetymonitor'">
         <div class="tab-item">
-          <HandlerHistoryTable ref="handlerHistoryTable" v-if="activeKey == '4'" columns-type="operator_history"
-            :device-type="deviceType" :device-list-api="getDeviceList.bind(null, { devicekind: deviceType })"
-            designScope="operator-history" />
+          <HandlerHistoryTable
+            ref="handlerHistoryTable"
+            v-if="activeKey == '4'"
+            columns-type="operator_history"
+            :device-type="deviceType"
+            :device-list-api="getDeviceList.bind(null, { devicekind: deviceType })"
+            designScope="operator-history"
+          />
         </div>
       </a-tab-pane>
     </a-tabs>
@@ -141,418 +162,415 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, shallowRef, defineProps, watch, nextTick, unref } from 'vue'
-import BarAndLine from '/@/components/chart/BarAndLine.vue';
-import { list, getDeviceList } from './safety.api'
-import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
-import HistoryTable from '../comment/HistoryTable.vue';
-import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
-import MonitorTable from '../comment/MonitorTable.vue';
-import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
-import { Progress } from 'ant-design-vue';
-import { useRouter } from 'vue-router';
-import { formConfig, isHaveAction } from './safety.data'
-import { getDictItemsByCode } from '/@/utils/dict';
-
-// import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
-
-// const echartsOption = {
-//   grid: {
-//     top: '60px',
-//     left: '10px',
-//     right: '25px',
-//     bottom: '5%',
-//     containLabel: true,
-//   },
-//   toolbox: {
-//     feature: {},
-//   },
-// };
-// let alive = ref(true)
-
-type DeviceType = { deviceType: string, deviceName: string, datalist: any[] };
-
-const props = defineProps({
-  pageData: {
-    type: Object,
-    default: () => { }
+  import { ref, onMounted, onUnmounted, shallowRef, defineProps, watch, nextTick, unref } from 'vue';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import { list, getDeviceList } from './safety.api';
+  import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
+  import HistoryTable from '../comment/HistoryTable.vue';
+  import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
+  import MonitorTable from '../comment/MonitorTable.vue';
+  import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
+  import { Progress } from 'ant-design-vue';
+  import { useRouter } from 'vue-router';
+  import { formConfig, isHaveAction } from './safety.data';
+  import { getDictItemsByCode } from '/@/utils/dict';
+
+  // import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
+
+  // const echartsOption = {
+  //   grid: {
+  //     top: '60px',
+  //     left: '10px',
+  //     right: '25px',
+  //     bottom: '5%',
+  //     containLabel: true,
+  //   },
+  //   toolbox: {
+  //     feature: {},
+  //   },
+  // };
+  // let alive = ref(true)
+
+  type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
+
+  const props = defineProps({
+    pageData: {
+      type: Object,
+      default: () => {},
+    },
+  });
+
+  const scroll = {
+    y: 360,
+  };
+  const monitorTable = ref();
+  const historyTable = ref();
+  const alarmHistoryTable = ref();
+  const handlerHistoryTable = ref();
+
+  const isRefresh = ref(true);
+
+  const activeKey = ref('1'); // tab key
+  const dataSource = shallowRef([]); // 实时监测数据
+  const deviceType = ref(''); // 监测设备类型
+
+  // let dataSourceHis = shallowRef([])//历史数据
+
+  //历史数据
+  async function changeHis(data) {
+    // alive.value = false
+    // nextTick(() => {
+    //   dataSourceHis = data
+    //   alive.value = true
+    // })
   }
-})
-
-const scroll = {
-  y: 360
-}
-const monitorTable = ref()
-const historyTable = ref()
-const alarmHistoryTable = ref()
-const handlerHistoryTable = ref()
-
-const isRefresh = ref(true)
-
-const activeKey = ref('1'); // tab key
-const dataSource = shallowRef([]) // 实时监测数据
-const deviceType = ref('') // 监测设备类型
-
-// let dataSourceHis = shallowRef([])//历史数据
 
-//历史数据
-async function changeHis(data) {
-  // alive.value = false
-  // nextTick(() => {
-  //   dataSourceHis = data
-  //   alive.value = true
-
-  // })
-
-}
-
-async function tabChange(activeKeyVal) {
-  activeKey.value = activeKeyVal;
-  if (activeKey.value != '1') {
-    if (timer != undefined) {
-      clearTimeout(timer);
-      timer = undefined;
+  async function tabChange(activeKeyVal) {
+    activeKey.value = activeKeyVal;
+    if (activeKey.value != '1') {
+      if (timer != undefined) {
+        clearTimeout(timer);
+        timer = undefined;
+      }
+    } else {
+      timer = null;
+      await getMonitor(true);
     }
-  } else {
-    timer = null
-    await getMonitor(true)
   }
-};
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(flag?) {
-  if (deviceType.value) {
-    if (timer) timer = null
-    if (Object.prototype.toString.call(timer) === '[object Null]') {
-      timer = setTimeout(async () => {
-        await getDataSource()
-        if (timer) {
-          getMonitor();
-        }
-      }, flag ? 0 : 1000);
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag?) {
+    if (deviceType.value) {
+      if (timer) timer = null;
+      if (Object.prototype.toString.call(timer) === '[object Null]') {
+        timer = setTimeout(
+          async () => {
+            await getDataSource();
+            if (timer) {
+              getMonitor();
+            }
+          },
+          flag ? 0 : 1000
+        );
+      }
     }
   }
-};
-
-async function getDataSource() {
-  const formData = monitorTable.value.getForm()
-  const res = await list({ devicetype: deviceType.value, filterParams: { ...formData.getFieldsValue() } })
-  if (res.msgTxt.length > 0) {
-    dataSource.value = []
-    const dataArr = res.msgTxt[0].datalist || [];
-    dataArr.filter((data: any) => {
-      const readData = data.readData;
-      return Object.assign(data, readData);
-    });
-    if(deviceType.value == 'safetymonitor'){
-      // 如果是安全监控的数据时需要过滤常见设备数据，根据设定的常用安全监控字典去匹配
-      const dictCodes = getDictItemsByCode('safetynormal')
-      const searchForm = formData.getFieldsValue()
-      if(!searchForm['dataTypeName'] && dictCodes && dictCodes.length){
-        for(let i=0; i< dictCodes.length; i++){
-          const dict = dictCodes[i]
+
+  async function getDataSource() {
+    const formData = monitorTable.value.getForm();
+    const res = await list({ devicetype: deviceType.value, filterParams: { ...formData.getFieldsValue() } });
+    if (res.msgTxt.length > 0) {
+      dataSource.value = [];
+      let dataArr = res.msgTxt[0].datalist || [];
+      dataArr.filter((data: any) => {
+        const readData = data.readData;
+        return Object.assign(data, readData);
+      });
+      if (deviceType.value == 'safetymonitor') {
+        // 如果是安全监控的数据时需要过滤常见设备数据，根据设定的常用安全监控字典去匹配
+        let dictCodes = getDictItemsByCode('safetynormal');
+        const searchForm = formData.getFieldsValue();
+        if (!searchForm['dataTypeName'] && dictCodes && dictCodes.length) {
+          const tempData = [];
+          const tempData1 = [];
+
           dataArr.forEach((item) => {
-            if(dict['value'] == item['dataTypeName']){
-              dataSource.value.push(item)
+            let flag = false;
+            for (let i = 0; i < dictCodes.length; i++) {
+              const dict = dictCodes[i];
+              if (dict['value'] == item['dataTypeName']) {
+                flag = true;
+              }
             }
-          })
+            if (flag) {
+              tempData.push(item);
+            } else {
+              tempData1.push(item);
+            }
+          });
+          dataSource.value = [...tempData, ...tempData1];
+          debugger;
+        } else {
+          dataSource.value = dataArr;
         }
-      }else{
-        dataSource.value = dataArr
+      } else {
+        dataSource.value = dataArr;
       }
-    }else{
-      dataSource.value = dataArr
-    }
-    
-
-  } else {
-    dataSource.value = []
-  }
-}
-
-onMounted(async () => {
-  const { currentRoute } = useRouter();
-  if(unref(currentRoute)){
-    const path = unref(currentRoute).path
-    if (path) {
-      deviceType.value = path.substring(path.lastIndexOf('/') + 1)
+    } else {
+      dataSource.value = [];
     }
-    await getMonitor(true)
   }
-})
 
-onUnmounted(() => {
-  if (timer) {
-    clearTimeout(timer);
-  }
-  timer = undefined;
-})
+  onMounted(async () => {
+    const { currentRoute } = useRouter();
+    if (unref(currentRoute)) {
+      const path = unref(currentRoute).path;
+      if (path) {
+        deviceType.value = path.substring(path.lastIndexOf('/') + 1);
+      }
+      await getMonitor(true);
+    }
+  });
 
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = undefined;
+  });
 </script>
 
-<style lang="less" scoped >
-@import '/@/design/vent/color.less';
-@import '/@/design/vent/modal.less';
-@ventSpace: zxm;
-
-.device-box {
-  width: 100%;
-  height: calc(100% - 100px);
-  padding-bottom: 10px;
-  margin-top: 20px;
-  display: flex;
-  justify-content: center;
-
-  .tabs-box {
-    width: calc(100% - 12px) !important;
-    height: 100% !important;
-    bottom: 3px !important;
-  }
+<style lang="less" scoped>
+  @import '/@/design/vent/color.less';
+  @import '/@/design/vent/modal.less';
+  @ventSpace: zxm;
 
-  .device-button-group {
-    position: absolute;
-    top: -30px;
-    display: flex;
+  .device-box {
     width: 100%;
+    height: calc(100% - 100px);
+    padding-bottom: 10px;
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
 
-    .device-button {
-      height: 26px;
-      padding: 0 20px;
-      background: linear-gradient(45deg, #04e6fb55, #0c5cab55);
-      clip-path: polygon(10px 0,
-          0 50%,
-          10px 100%,
-          100% 100%,
-          calc(100% - 10px) 50%,
-          100% 0);
+    .tabs-box {
+      width: calc(100% - 12px) !important;
+      height: 100% !important;
+      bottom: 3px !important;
+    }
+
+    .device-button-group {
+      position: absolute;
+      top: -30px;
       display: flex;
-      justify-content: center;
-      align-items: center;
-      color: #FFF;
-      position: relative;
-      cursor: pointer;
+      width: 100%;
+
+      .device-button {
+        height: 26px;
+        padding: 0 20px;
+        background: linear-gradient(45deg, #04e6fb55, #0c5cab55);
+        clip-path: polygon(10px 0, 0 50%, 10px 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+        position: relative;
+        cursor: pointer;
+
+        &:nth-child(1) {
+          left: calc(-6px * 1);
+        }
 
-      &:nth-child(1) {
-        left: calc(-6px * 1);
-      }
+        &:nth-child(2) {
+          left: calc(-6px * 2);
+        }
 
-      &:nth-child(2) {
-        left: calc(-6px * 2);
-      }
+        &:nth-child(3) {
+          left: calc(-6px * 3);
+        }
 
-      &:nth-child(3) {
-        left: calc(-6px * 3);
-      }
+        &:nth-child(4) {
+          left: calc(-6px * 4);
+        }
 
-      &:nth-child(4) {
-        left: calc(-6px * 4);
-      }
+        &:nth-child(5) {
+          left: calc(-6px * 5);
+        }
 
-      &:nth-child(5) {
-        left: calc(-6px * 5);
-      }
+        &:nth-child(6) {
+          left: calc(-6px * 6);
+        }
 
-      &:nth-child(6) {
-        left: calc(-6px * 6);
-      }
+        &:nth-child(7) {
+          left: calc(-6px * 7);
+        }
 
-      &:nth-child(7) {
-        left: calc(-6px * 7);
-      }
+        &:nth-child(8) {
+          left: calc(-6px * 8);
+        }
 
-      &:nth-child(8) {
-        left: calc(-6px * 8);
-      }
+        &:nth-child(9) {
+          left: calc(-6px * 9);
+        }
 
-      &:nth-child(9) {
-        left: calc(-6px * 9);
-      }
+        &:nth-child(10) {
+          left: calc(-6px * 10);
+        }
 
-      &:nth-child(10) {
-        left: calc(-6px * 10);
-      }
+        &:nth-child(11) {
+          left: calc(-6px * 11);
+        }
 
-      &:nth-child(11) {
-        left: calc(-6px * 11);
-      }
+        &:nth-child(12) {
+          left: calc(-6px * 12);
+        }
 
-      &:nth-child(12) {
-        left: calc(-6px * 12);
-      }
+        &:nth-child(13) {
+          left: calc(-6px * 13);
+        }
 
-      &:nth-child(13) {
-        left: calc(-6px * 13);
-      }
+        &:nth-child(14) {
+          left: calc(-6px * 14);
+        }
 
-      &:nth-child(14) {
-        left: calc(-6px * 14);
-      }
+        &:nth-child(15) {
+          left: calc(-6px * 15);
+        }
 
-      &:nth-child(15) {
-        left: calc(-6px * 15);
+        &:first-child {
+          clip-path: polygon(0 0, 10px 50%, 0 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
+        }
       }
 
-      &:first-child {
-        clip-path: polygon(0 0,
-            10px 50%,
-            0 100%,
-            100% 100%,
-            calc(100% - 10px) 50%,
-            100% 0);
-      }
+      .device-active {
+        background: linear-gradient(45deg, #04e6fb, #0c5cab);
 
+        &::before {
+          border-color: #0efcff;
+          box-shadow: 1px 1px 3px 1px #0efcff inset;
+        }
+      }
     }
 
-    .device-active {
-      background: linear-gradient(45deg, #04e6fb, #0c5cab);
+    .enter-detail {
+      color: #fff;
+      cursor: pointer;
+      position: absolute;
+      right: 120px;
+      top: -6px;
+      padding: 5px;
+      border-radius: 5px;
+      margin-left: 8px;
+      margin-right: 8px;
+      width: auto;
+      height: 33px !important;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      padding: 5px 15px 5px 15px;
+      cursor: pointer;
+
+      &:hover {
+        background: linear-gradient(#2cd1ff55, #1eb0ff55);
+      }
 
       &::before {
-        border-color: #0efcff;
-        box-shadow: 1px 1px 3px 1px #0efcff inset;
+        width: calc(100% - 6px);
+        height: 27px;
+        content: '';
+        position: absolute;
+        top: 3px;
+        right: 0;
+        left: 3px;
+        bottom: 0;
+        z-index: -1;
+        border-radius: inherit;
+        /*important*/
+        background: linear-gradient(#1fa6cb, #127cb5);
       }
     }
   }
 
-  .enter-detail {
-    color: #fff;
-    cursor: pointer;
-    position: absolute;
-    right: 120px;
-    top: -6px;
-    padding: 5px;
-    border-radius: 5px;
-    margin-left: 8px;
-    margin-right: 8px;
-    width: auto;
-    height: 33px !important;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #fff;
-    padding: 5px 15px 5px 15px;
-    cursor: pointer;
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    height: 100%;
+    border: 1px solid #44d3ff70;
+    border-radius: 2px;
+    -webkit-backdrop-filter: blur(8px);
+    box-shadow: 0 0 20px #44b4ff33 inset;
+    background-color: #ffffff11;
+    overflow-y: auto;
+  }
 
-    &:hover {
+  :deep(.@{ventSpace}-tabs-card) {
+    .@{ventSpace}-tabs-tab {
       background: linear-gradient(#2cd1ff55, #1eb0ff55);
+      border-color: #74e9fe;
+      border-radius: 0%;
+
+      &:hover {
+        color: #64d5ff;
+      }
     }
 
-    &::before {
-      width: calc(100% - 6px);
-      height: 27px;
-      content: '';
-      position: absolute;
-      top: 3px;
-      right: 0;
-      left: 3px;
-      bottom: 0;
-      z-index: -1;
-      border-radius: inherit;
-      /*important*/
-      background: linear-gradient(#1fa6cb, #127cb5);
+    .@{ventSpace}-tabs-content {
+      height: 100% !important;
     }
-  }
-}
-
-:deep(.@{ventSpace}-tabs-tabpane-active) {
-  height: 100%;
-  border: 1px solid #44d3ff70;
-  border-radius: 2px;
-  -webkit-backdrop-filter: blur(8px);
-  box-shadow: 0 0 20px #44b4ff33 inset;
-  background-color: #ffffff11;
-  overflow-y: auto;
-}
-
-:deep(.@{ventSpace}-tabs-card) {
-  .@{ventSpace}-tabs-tab {
-    background: linear-gradient(#2cd1ff55, #1eb0ff55);
-    border-color: #74e9fe;
-    border-radius: 0%;
-
-    &:hover {
-      color: #64d5ff;
+
+    .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
+      color: aqua;
     }
-  }
 
-  .@{ventSpace}-tabs-content{
-    height: 100% !important;
-  }
+    .@{ventSpace}-tabs-nav::before {
+      border-color: #74e9fe;
+    }
 
-  .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
-    color: aqua;
-  }
+    .@{ventSpace}-picker,
+    .@{ventSpace}-select-selector {
+      width: 100% !important;
+      background: #00000017 !important;
+      border: 1px solid @vent-form-item-boder !important;
 
-  .@{ventSpace}-tabs-nav::before {
-    border-color: #74e9fe;
-  }
+      input,
+      .@{ventSpace}-select-selection-item,
+      .@{ventSpace}-picker-suffix {
+        color: #fff !important;
+      }
 
-  .@{ventSpace}-picker,
-  .@{ventSpace}-select-selector {
-    width: 100% !important;
-    background: #00000017 !important;
-    border: 1px solid @vent-form-item-boder !important;
+      .@{ventSpace}-select-selection-placeholder {
+        color: #b7b7b7 !important;
+      }
+    }
 
-    input,
-    .@{ventSpace}-select-selection-item,
-    .@{ventSpace}-picker-suffix {
+    .@{ventSpace}-pagination-next,
+    .action,
+    .@{ventSpace}-select-arrow,
+    .@{ventSpace}-picker-separator {
       color: #fff !important;
     }
 
-    .@{ventSpace}-select-selection-placeholder {
-      color: #b7b7b7 !important;
+    .@{ventSpace}-table-cell-row-hover {
+      background: #264d8833 !important;
     }
-  }
 
-  .@{ventSpace}-pagination-next,
-  .action,
-  .@{ventSpace}-select-arrow,
-  .@{ventSpace}-picker-separator {
-    color: #fff !important;
-  }
+    .@{ventSpace}-table-row-selected {
+      background: #00c0a311 !important;
 
-  .@{ventSpace}-table-cell-row-hover {
-    background: #264d8833 !important;
-  }
-
-  .@{ventSpace}-table-row-selected {
-    background: #00c0a311 !important;
-
-    td {
-      background-color: #00000000 !important;
+      td {
+        background-color: #00000000 !important;
+      }
     }
-  }
 
-  .@{ventSpace}-table-thead {
-    // background: linear-gradient(#004a8655 0%, #004a86aa 10%) !important;
-    background: #3d9dd45d !important;
-
-    &>tr>th,
-    .@{ventSpace}-table-column-title {
-      // color: #70f9fc !important;
-      border-color: #84f2ff !important;
-      border-left: none !important;
-      border-right: none !important;
-      padding: 7px;
+    .@{ventSpace}-table-thead {
+      // background: linear-gradient(#004a8655 0%, #004a86aa 10%) !important;
+      background: #3d9dd45d !important;
+
+      & > tr > th,
+      .@{ventSpace}-table-column-title {
+        // color: #70f9fc !important;
+        border-color: #84f2ff !important;
+        border-left: none !important;
+        border-right: none !important;
+        padding: 7px;
+      }
     }
-  }
 
-  .@{ventSpace}-table-tbody {
-    tr>td {
-      padding: 12px;
+    .@{ventSpace}-table-tbody {
+      tr > td {
+        padding: 12px;
+      }
     }
-  }
-
-  .@{ventSpace}-table-tbody>tr:hover.@{ventSpace}-table-row>td {
-    background-color: #26648855 !important;
-  }
 
-  .jeecg-basic-table-row__striped {
+    .@{ventSpace}-table-tbody > tr:hover.@{ventSpace}-table-row > td {
+      background-color: #26648855 !important;
+    }
 
-    // background: #97efff11 !important;
-    td {
-      background-color: #97efff11 !important;
+    .jeecg-basic-table-row__striped {
+      // background: #97efff11 !important;
+      td {
+        background-color: #97efff11 !important;
+      }
     }
   }
-}
-</style>
+</style>

src/views/vent/monitorManager/safetyMonitor/safety.data.ts

@@ -52,7 +52,7 @@ export const chartsColumnsRect = [
     color: '#37BCF2',
     sort: 1,
     xRotate: 0,
-    dataIndex: 'm3',
+    dataIndex: 'm³',
   },
   {
     legend: '气源压力',

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

@@ -27,11 +27,11 @@
                 title="传感器监测"
               >
                 <template #filterCell="{ column, record }">
-                  <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : 'red'">{{
-                    record.warnFlag == 0 ? '正常' : '报警'
+                  <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : 'red'">{{
+                    record.warnFlag == '0' ? '正常' : '报警'
                   }}</a-tag>
-                  <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == 0 ? 'default' : 'green'">{{
-                    record.netStatus == 0 ? '断开' : '连接'
+                  <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? 'default' : 'green'">{{
+                    record.netStatus == '0' ? '断开' : '连接'
                   }}</a-tag>
                 </template>
               </MonitorTable>

src/views/vent/monitorManager/tunFaceMonitor/components/tunFaceVentHome.vue

@@ -50,7 +50,7 @@
               maxWidth="340" :scroll="{ x: 'max-content', y: 85 }">
               <template #bodyCell="{ column, record }">
                 <template v-if="column.dataIndex === 'warnFlag'">
-                  <span v-if="record['warnFlag'] == 0" style="color: #00ff00;">正常</span>
+                  <span v-if="record['warnFlag'] == '0'" style="color: #00ff00;">正常</span>
                   <span v-else style="color: #ff0000;"> {{ record.warnDes }}</span>
                 </template>
                 <template v-if="column.dataIndex === 'action'">
@@ -69,7 +69,7 @@
               maxWidth="340" :scroll="{ x: 'max-content', y: 85 }">
               <template #bodyCell="{ column, record }">
                 <template v-if="column.dataIndex === 'warnFlag'">
-                  <span v-if="record['warnFlag'] == 0" style="color: #00ff00;">正常</span>
+                  <span v-if="record['warnFlag'] == '0'" style="color: #00ff00;">正常</span>
                   <span v-else style="color: #ff0000;"> {{ record.warnDes }}</span>
                 </template>
                 <template v-if="column.dataIndex === 'action'">
@@ -89,7 +89,7 @@
               maxWidth="340" :scroll="{ x: 'max-content', y: 85 }">
               <template #bodyCell="{ column, record }">
                 <template v-if="column.dataIndex === 'warnFlag'">
-                  <span v-if="record['warnFlag'] == 0" style="color: #00ff00;">正常</span>
+                  <span v-if="record['warnFlag'] == '0'" style="color: #00ff00;">正常</span>
                   <span v-else style="color: #ff0000;"> {{ record.warnDes }}</span>
                 </template>
                 <template v-if="column.dataIndex === 'action'">

src/views/vent/monitorManager/tunFaceMonitor/tunFace.data.ts

@@ -295,7 +295,7 @@ export const windColumns: BasicColumn[] = [
   },
   {
     title: '风量',
-    dataIndex: 'm3',
+    dataIndex: 'm³',
     width: 80,
     align: 'center',
   },

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

@@ -27,9 +27,8 @@
           <div class="button-box" @click="setArea(2)">设定后窗面积</div>
         </div>
         <div v-if="selectData.nwindownum == 1" class="row">
-            <div class="button-box" @click="setArea(1)">设定风窗面积</div>
+          <div class="button-box" @click="setArea(1)">设定风窗面积</div>
         </div>
-        
       </div>
       <!-- <div class="top-right row">
         <div class="control-type row">
@@ -57,7 +56,7 @@
       {{ selectData.strname }}
     </div>
     <div class="bottom-tabs-box" @mousedown="setDivHeight($event, 350, scroll)">
-      <dv-border-box8 :dur="5"  :style="`padding: 5px; height: ${scroll.y + 120}px`" >
+      <dv-border-box8 :dur="5" :style="`padding: 5px; height: ${scroll.y + 120}px`">
         <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
           <a-tab-pane key="1" tab="实时监测">
             <MonitorTable
@@ -67,22 +66,22 @@
               :dataSource="dataSource"
               @selectRow="getSelectRow"
               design-scope="window-monitor"
-              :scroll="{y: scroll.y - 40}"
+              :scroll="{ y: scroll.y - 40 }"
               title="风窗监测"
               :isShowPagination="true"
               :isShowActionColumn="true"
             >
               <template #filterCell="{ column, record }">
-                <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : 'red'">{{
-                  record.warnFlag == 0 ? '正常' : '报警'
+                <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : 'red'">{{
+                  record.warnFlag == '0' ? '正常' : '报警'
                 }}</a-tag>
-                <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == 0 ? 'default' : 'green'">{{
-                  record.netStatus == 0 ? '断开' : '连接'
+                <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? 'default' : 'green'">{{
+                  record.netStatus == '0' ? '断开' : '连接'
                 }}</a-tag>
                 <div v-if="record.nwindownum == 1 && column.dataIndex === 'rearArea'">/</div>
               </template>
               <template #action="{ record }">
-                <a class="table-action-link" @click="deviceEdit($event, 'reportInfo', record)">报表录入</a>
+                <a v-if="globalConfig?.showReport" class="table-action-link" @click="deviceEdit($event, 'reportInfo', record)">报表录入</a>
                 <a class="table-action-link" @click="deviceEdit($event, 'deviceInfo', record)">设备编辑</a>
               </template>
             </MonitorTable>
@@ -102,17 +101,23 @@
           </a-tab-pane> -->
           <a-tab-pane key="3" tab="历史数据">
             <div class="tab-item" v-if="activeKey === '3'">
-              <HistoryTable columns-type="window" device-type="window" :device-list-api="baseList" designScope="window-history" :scroll="scroll"/>
+              <HistoryTable columns-type="window" device-type="window" :device-list-api="baseList" designScope="window-history" :scroll="scroll" />
             </div>
           </a-tab-pane>
           <a-tab-pane key="4" tab="报警历史">
             <div class="tab-item" v-if="activeKey === '4'">
-              <AlarmHistoryTable columns-type="alarm" device-type="window" :device-list-api="baseList" designScope="alarm-history" :scroll="scroll"/>
+              <AlarmHistoryTable columns-type="alarm" device-type="window" :device-list-api="baseList" designScope="alarm-history" :scroll="scroll" />
             </div>
           </a-tab-pane>
           <a-tab-pane key="5" tab="操作历史">
             <div class="tab-item" v-if="activeKey === '5'">
-              <HandlerHistoryTable columns-type="operator_history" device-type="window" :device-list-api="baseList" designScope="alarm-history" :scroll="scroll"/>
+              <HandlerHistoryTable
+                columns-type="operator_history"
+                device-type="window"
+                :device-list-api="baseList"
+                designScope="alarm-history"
+                :scroll="scroll"
+              />
             </div>
           </a-tab-pane>
         </a-tabs>
@@ -120,9 +125,20 @@
     </div>
   </div>
   <div ref="playerRef" style="z-index: 999; position: absolute; top: 100px; right: 10px; width: 300px; height: 280px; margin: auto"></div>
-  <LivePlayer id="fc-player1" style="height: 220px; width: 300px; position: absolute; top: 0px; z-index: -1;" ref="player1" :videoUrl="flvURL1()" muted loading autoplay controls loop fluent />
+  <LivePlayer
+    id="fc-player1"
+    style="height: 220px; width: 300px; position: absolute; top: 0px; z-index: -1"
+    ref="player1"
+    :videoUrl="flvURL1()"
+    muted
+    loading
+    autoplay
+    controls
+    loop
+    fluent
+  />
   <HandleModal :modal-is-show="modalIsShow" :modal-title="modalTitle" :modal-type="modalType" @handle-ok="handleOK" @handle-cancel="handleCancel" />
-  <DeviceBaseInfo @register="regModal" :device-type="selectData['deviceType']"/>
+  <DeviceBaseInfo @register="regModal" :device-type="selectData['deviceType']" />
 </template>
 
 <script setup lang="ts">
@@ -144,21 +160,20 @@
   import { setDivHeight } from '/@/utils/event';
   import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
   import { useRouter } from 'vue-router';
-  import { deviceCameraInit } from '/@/utils/ventutil.ts'
   import LivePlayer from '@liveqing/liveplayer-v3';
   import { useModal } from '/@/components/Modal';
+  import { useCamera } from '/@/hooks/system/useCamera';
 
   const globalConfig = inject('globalConfig');
 
   const { currentRoute } = useRouter();
 
-  const MonitorDataTable = ref()
+  const MonitorDataTable = ref();
 
   const playerRef = ref();
-  let webRtcServer: any[] = []
   const scroll = reactive({
-    y: 230
-  })
+    y: 230,
+  });
 
   const modalIsShow = ref<boolean>(false); // 是否显示模态框
   const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
@@ -187,13 +202,14 @@
     return `/video/window.mp4`;
   };
   const [regModal, { openModal }] = useModal();
+  const { getCamera, webRtcServer } = useCamera();
 
   const tabChange = (activeKeyVal) => {
     activeKey.value = activeKeyVal;
-    if(activeKeyVal == 1){
+    if (activeKeyVal == 1) {
       nextTick(() => {
-        MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID])
-      })
+        MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID]);
+      });
     }
   };
 
@@ -212,7 +228,7 @@
     frontRearDifference: '-',
     rearPresentValue: '-',
     maxarea: 0,
-    nwindownum: 0
+    nwindownum: 0,
   };
 
   // 监测数据
@@ -222,16 +238,19 @@
   let timer: null | NodeJS.Timeout = null;
   const getMonitor = (flag?) => {
     if (Object.prototype.toString.call(timer) === '[object Null]') {
-      timer = setTimeout(async () => {
-        const data = await getDataSource();
-        Object.assign(selectData, data);
-        playAnimation(selectData, selectData.maxarea);
-        addMonitorText(selectData);
-        if (timer) {
-          timer = null;
-        }
-        getMonitor();
-      }, flag ? 0 : 2000);
+      timer = setTimeout(
+        async () => {
+          const data = await getDataSource();
+          Object.assign(selectData, data);
+          playAnimation(selectData, selectData.maxarea);
+          addMonitorText(selectData);
+          if (timer) {
+            timer = null;
+          }
+          getMonitor();
+        },
+        flag ? 0 : 2000
+      );
     }
   };
 
@@ -245,9 +264,9 @@
     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']])
+        MonitorDataTable.value.setSelectedRowKeys([currentRoute.value['query']['id']]);
       } else {
-        MonitorDataTable.value.setSelectedRowKeys([dataSource.value[0]['deviceID']])
+        MonitorDataTable.value.setSelectedRowKeys([dataSource.value[0]['deviceID']]);
       }
     }
     const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
@@ -261,33 +280,6 @@
     });
   };
 
-  async function getCamera() {
-    const res = await cameraList({ deviceid: selectData['deviceID'] })
-    const cameras: [] = res.records || []
-    let cameraAddrs: any[] = [], cameraNames: string[] = [];
-    if (cameras.length > 0) {
-      cameras.forEach(item => {
-        if (item['devicekind'] == 'toRtsp' || item['devicekind'] == 'toHLS') {
-          cameraNames.push(item['name'])
-        } else {
-          cameraAddrs.push({ name: item['name'], addr: item['addr'] })
-        }
-      })
-    }
-    if (cameraNames.length > 0) {
-      // 请求接口从装备院拿数据
-      const addrs: string[] = await cameraAddrList({ cameraNameList: cameraNames })
-      for (let i = 0; i < addrs.length; i++) {
-        cameraAddrs.push({ name: '摄像头' + i, addr: addrs[i] })
-      }
-    }
-    const obj = await deviceCameraInit(cameraAddrs, playerRef.value, webRtcServer)
-    webRtcServer = obj.webRtcServerList
-    // const playerDoms = obj.playerDoms
-    // 注意前后门适应需要对应 //[0] 后门 [1]前门
-    // await initCameraCanvas(...playerDoms)
-  }
-
   // 切换检测数据
   const getSelectRow = async (selectRow, index) => {
     if (!selectRow) return;
@@ -299,10 +291,10 @@
     const type = selectData.nwindownum == 1 ? 'singleWindow' : 'doubleWindow';
     setModelType(type).then(() => {
       addMonitorText(selectData);
-      playAnimation(selectRow, baseData.maxarea, true);
+      playAnimation(selectRow, selectData.maxarea, true);
       loading.value = false;
     });
-    await getCamera()
+    await getCamera(selectRow.deviceID, playerRef.value);
   };
 
   // 判断前后窗的面积是否发生改变，如果改变则开启动画
@@ -312,9 +304,27 @@
     rotationParam.frontDeg1 = (90 / maxarea) * Number(data.forntArea) || 0;
     rotationParam.backDeg1 = (90 / maxarea) * Number(data.rearArea) || 0;
     if (isFirst) {
-      console.log('最大面积---->', maxarea, '前窗实际面积---->', selectData.forntArea, '后窗实际面积---->', selectData.rearArea, '计算的值---->', rotationParam);
+      console.log(
+        '最大面积---->',
+        maxarea,
+        '前窗实际面积---->',
+        selectData.forntArea,
+        '后窗实际面积---->',
+        selectData.rearArea,
+        '计算的值---->',
+        rotationParam
+      );
     }
-    console.log('最大面积---->', maxarea, '前窗实际面积---->', selectData.forntArea, '后窗实际面积---->', selectData.rearArea, '计算的值---->', rotationParam);
+    console.log(
+      '最大面积---->',
+      maxarea,
+      '前窗实际面积---->',
+      selectData.forntArea,
+      '后窗实际面积---->',
+      selectData.rearArea,
+      '计算的值---->',
+      rotationParam
+    );
     if (!rotationParam.frontDeg1 && !rotationParam.backDeg1) {
       // 当返回值有误时默认关闭
       play(rotationParam, 0);
@@ -334,13 +344,13 @@
 
   // 设置风窗面积
   const setArea = (flag) => {
-    if(selectData.nwindownum == 2){
+    if (selectData.nwindownum == 2) {
       modalTitle.value = flag === 1 ? '设定前窗面积' : '设定后窗面积';
-    }else {
-      modalTitle.value = '设定风窗面积'
+    } else {
+      modalTitle.value = '设定风窗面积';
     }
-    
-    modalType.value = flag+'';
+
+    modalType.value = flag + '';
     modalIsShow.value = true;
   };
 
@@ -360,9 +370,9 @@
     deviceControlApi(data)
       .then(() => {
         if (globalConfig.History_Type == 'remote') {
-          message.success('指令已下发至生产管控平台成功！')
+          message.success('指令已下发至生产管控平台成功！');
         } else {
-          message.success('指令已下发成功！')
+          message.success('指令已下发成功！');
         }
       })
       .finally(() => {
@@ -375,13 +385,13 @@
     modalTitle.value = '';
     modalType.value = '';
   };
-  
+
   function deviceEdit(e: Event, type: string, record) {
-    e.stopPropagation()
+    e.stopPropagation();
     openModal(true, {
       type,
-      deviceId: record['deviceID']
-    })
+      deviceId: record['deviceID'],
+    });
   }
 
   onBeforeMount(() => {
@@ -392,14 +402,13 @@
 
   onMounted(() => {
     loading.value = true;
-    const playerDom = document.getElementById('fc-player1')?.getElementsByClassName('vjs-tech')[0]
+    const playerDom = document.getElementById('fc-player1')?.getElementsByClassName('vjs-tech')[0];
     mountedThree(playerDom).then(async () => {
       // await setModelType('singleWindow');
       getMonitor(true);
       loading.value = false;
       addMonitorText(selectData);
     });
-   
   });
   onUnmounted(() => {
     destroy();
@@ -408,9 +417,9 @@
       timer = undefined;
     }
     if (webRtcServer && webRtcServer.length > 0) {
-      webRtcServer.forEach(item => {
-        item.disconnect()
-      })
+      webRtcServer.forEach((item) => {
+        item.disconnect();
+      });
     }
   });
 </script>
@@ -434,10 +443,9 @@
     }
     margin-right: 10px;
   }
-  .scene-box{
-    .bottom-tabs-box{
+  .scene-box {
+    .bottom-tabs-box {
       height: 350px;
     }
   }
-  
 </style>

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

@@ -41,7 +41,7 @@
       {{ selectData.supplyAirAddr || selectData.stationname || selectData.strname }}
     </div>
     <div class="bottom-tabs-box" @mousedown="setDivHeight($event, 350, scroll)">
-      <dv-border-box8 :dur="5"  :style="`padding: 5px; height: ${scroll.y + 120}px`" >
+      <dv-border-box8 :dur="5" :style="`padding: 5px; height: ${scroll.y + 120}px`">
         <div class="tabs-button-group">
           <a-button class="tabs-button" type="primary" @click="openModel">一键测风</a-button>
         </div>
@@ -60,15 +60,15 @@
               :isShowActionColumn="true"
             >
               <template #filterCell="{ column, record }">
-                <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == 0 ? '#FF5812' : 'green'">{{
-                  record.netStatus == 0 ? '断开' : '连接'
-                }}</a-tag>
-                <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray' "> {{
-                  record.warnFlag == 0 ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测'
-                }}</a-tag>
-                <a-tag v-if="column.dataIndex === 'sign'" :color="record.sign == 0 ? '#95CF65' : record.sign == 1 ? '#4590EA' : '#9876AA'"> {{ 
-                  record.sign == 0 ? '高位' : record.sign == 1 ? '中位' : '低位'
+                <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#FF5812' : 'green'">{{
+                  record.netStatus == '0' ? '断开' : '连接'
                 }}</a-tag>
+                <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'">
+                  {{ record.warnFlag == '0' ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测' }}</a-tag
+                >
+                <a-tag v-if="column.dataIndex === 'sign'" :color="record.sign == '0' ? '#95CF65' : record.sign == 1 ? '#4590EA' : '#9876AA'">
+                  {{ record.sign == '0' ? '高位' : record.sign == 1 ? '中位' : '低位' }}</a-tag
+                >
                 <template v-if="record && column && column.dataIndex === 'isRun' && record.isRun">
                   <a-tag v-if="record.isRun == -2 || record.isRun == -1" :color="record.isRun == -2 ? '#95CF65' : '#ED5700'">{{
                     record.isRun == -2 ? '空闲' : '等待'
@@ -78,7 +78,7 @@
                 </template>
               </template>
               <template #action="{ record }">
-                <a class="table-action-link" @click="deviceEdit($event, 'reportInfo', record)">报表录入</a>
+                <a v-if="globalConfig?.showReport" class="table-action-link" @click="deviceEdit($event, 'reportInfo', record)">报表录入</a>
                 <a class="table-action-link" @click="deviceEdit($event, 'deviceInfo', record)">设备编辑</a>
               </template>
             </MonitorTable>
@@ -98,34 +98,63 @@
           </a-tab-pane>
           <a-tab-pane key="3" tab="历史数据">
             <div class="tab-item">
-              <HistoryTable columns-type="windrect" device-type="windrect" :device-list-api="baseList" designScope="windrect-history" :scroll="scroll">
+              <HistoryTable
+                columns-type="windrect"
+                device-type="windrect"
+                :device-list-api="baseList"
+                designScope="windrect-history"
+                :scroll="scroll"
+              >
                 <template #filterCell="{ column, record }">
-                  <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'"> {{
-                    record.warnFlag == 0 ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测'
-                  }}</a-tag>
+                  <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'">
+                    {{ record.warnFlag == '0' ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测' }}</a-tag
+                  >
                 </template>
               </HistoryTable>
             </div>
           </a-tab-pane>
           <a-tab-pane key="4" tab="报警历史">
             <div class="tab-item" v-if="activeKey === '4'">
-              <AlarmHistoryTable columns-type="alarm" device-type="windrect" :device-list-api="baseList" designScope="alarm-history" :scroll="scroll"/>
+              <AlarmHistoryTable
+                columns-type="alarm"
+                device-type="windrect"
+                :device-list-api="baseList"
+                designScope="alarm-history"
+                :scroll="scroll"
+              />
             </div>
           </a-tab-pane>
           <a-tab-pane key="5" tab="操作历史">
             <div class="tab-item" v-if="activeKey === '5'">
-              <HandlerHistoryTable columns-type="operator_history" device-type="windrect" :device-list-api="baseList" designScope="operator_history" :scroll="scroll"/>
+              <HandlerHistoryTable
+                columns-type="operator_history"
+                device-type="windrect"
+                :device-list-api="baseList"
+                designScope="operator_history"
+                :scroll="scroll"
+              />
             </div>
           </a-tab-pane>
           <a-tab-pane v-if="globalConfig?.simulatedPassword" key="6" tab="测风结果">
-            <ResultTable  deviceType="windrect_list" :scroll="scroll"/>
+            <ResultTable deviceType="windrect_list" :scroll="scroll" />
           </a-tab-pane>
         </a-tabs>
       </dv-border-box8>
     </div>
   </div>
   <div ref="playerRef" style="z-index: 999; position: absolute; top: 100px; right: 10px; width: 300px; height: 280px; margin: auto"></div>
-  <LivePlayer id="cf-player1" style="height: 220px; width: 300px; position: absolute; top: 0px; z-index: -1;" ref="player1" :videoUrl="flvURL1()" muted loading autoplay controls loop fluent/>
+  <LivePlayer
+    id="cf-player1"
+    style="height: 220px; width: 300px; position: absolute; top: 0px; z-index: -1"
+    ref="player1"
+    :videoUrl="flvURL1()"
+    muted
+    loading
+    autoplay
+    controls
+    loop
+    fluent
+  />
   <BasicModal v-bind="$attrs" @register="registerModal" title="一键测风" width="900px" @ok="handleOk" @cancel="handleCancel">
     <div class="head-line">
       <div class="vent-flex-row">
@@ -142,14 +171,20 @@
       <ModalTable ref="modalTable" deviceType="windrect_list" />
     </div>
   </BasicModal>
-  <HandleModal v-if="!globalConfig?.simulatedPassword" :modal-is-show="modalIsShow" modal-title="启动测风" :modal-type="modalType"  @handle-ok="controlDevice"
-      @handle-cancel="handleCancelControl" />
-  <DeviceBaseInfo @register="regModal" :device-type="selectData['deviceType']"/>
+  <HandleModal
+    v-if="!globalConfig?.simulatedPassword"
+    :modal-is-show="modalIsShow"
+    modal-title="启动测风"
+    :modal-type="modalType"
+    @handle-ok="controlDevice"
+    @handle-cancel="handleCancelControl"
+  />
+  <DeviceBaseInfo @register="regModal" :device-type="selectData['deviceType']" />
 </template>
 
 <script setup lang="ts">
   import DeviceEcharts from '../comment/DeviceEcharts.vue';
-  import { onBeforeMount,ref, onMounted, onUnmounted, reactive, toRaw, nextTick, inject } from 'vue';
+  import { 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';
@@ -162,28 +197,27 @@
   import { deviceControlApi } from '/@/api/vent/index';
   import { mountedThree, destroy, addMonitorText, play, setModelType, playCamera, initCameraCanvas } from './windrect.threejs';
   import { list, pathList, deviceList, testWind, cameraAddrList, cameraList, exportXls } from './windrect.api';
-  import { list as baseList} from '../../deviceManager/windfindingTabel/windfinding.api';
+  import { list as baseList } from '../../deviceManager/windfindingTabel/windfinding.api';
   import { message, Progress } from 'ant-design-vue';
   import { chartsColumns } from './windrect.data';
   import { setDivHeight } from '/@/utils/event';
   import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
   import { useRouter } from 'vue-router';
-  import { deviceCameraInit } from '/@/utils/ventutil.ts'
+  import { deviceCameraInit } from '/@/utils/ventutil.ts';
   import LivePlayer from '@liveqing/liveplayer-v3';
   import { useModal } from '/@/components/Modal';
+  import { useCamera } from '/@/hooks/system/useCamera';
 
   const globalConfig = inject('globalConfig');
 
   const { currentRoute } = useRouter();
 
-  const MonitorDataTable = ref()
-  let webRtcServer: any[] = []
-
+  const MonitorDataTable = ref();
   const scroll = reactive({
-    y: 230
-  })
-  const modalType = ref('')
-  const modalIsShow = ref(false)
+    y: 230,
+  });
+  const modalType = ref('');
+  const modalIsShow = ref(false);
   const modalTable = ref();
   const runNum = ref(5); //设备运行数量
   const criticalPathList = ref([]);
@@ -206,10 +240,9 @@
     sign: -1,
     sensorRight: 0,
     sensorMiddle: 1,
-    sensorLeft: 0
+    sensorLeft: 0,
   });
 
-
   // const dataSource = computed(() => {
   //   const data = [...getRecordList()] || [];
   //   Object.assign(selectData, toRaw(data[selectRowIndex.value]));
@@ -222,77 +255,80 @@
     // return ''
     return `/video/wind.mp4`;
   };
-  
+
   const [regModal, { openModal }] = useModal();
 
+  const { getCamera, webRtcServer } = useCamera();
   const tabChange = (activeKeyVal) => {
     activeKey.value = activeKeyVal;
     if (activeKeyVal == 1) {
       nextTick(() => {
-        MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID])
-      })
+        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 (timer == null) {
-      timer = setTimeout(() => {
-        list({ devicetype: 'windrect', 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']])
+      timer = setTimeout(
+        () => {
+          list({ devicetype: 'windrect', 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']]);
+                  }
                 }
-              }
-              const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
-              Object.assign(selectData, data);
-              addMonitorText(selectData);
-
-              palyAnimation(selectData)
+                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);
+            if (timer) {
+              timer = null;
+            }
+            getMonitor();
+          });
+        },
+        flag ? 0 : 1000
+      );
     }
-  };
-  
-  let deviceRunState = '', tanTouRunState= '';
+  }
+
+  let deviceRunState = '',
+    tanTouRunState = '';
   // 根据3个点位分别执行动画
   function palyAnimation(selectData) {
-    if (selectData.deviceType == "windrect_normal") {
+    if (selectData.deviceType == 'windrect_normal') {
       if (selectData['apparatusRun'] == 1) {
-        const flag = selectData.sign == 0 ? 'up' : selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : null
+        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
+        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 (selectData.deviceType == 'windrect_rect_single') {
+      if (selectData['apparatusRun'] == 1) {
         // 镜头指向横杆
         // if(!deviceRunState && !tanTouRunState)playCamera('start')
         // 正在执行或是开始执行
@@ -310,156 +346,151 @@
         // 8. 探头移到中间play('middle')
         // 9. 探头右移play('right')
         // 10. 测风结束，探头移到中间play('middle')，横杆向高位移动
-        if(selectData['poleIncipient'] == 1){
+        if (selectData['poleIncipient'] == 1) {
           // 横杆在高位，开始执行 或是 执行结束
-          if(selectData.sensorMiddle == 1 && !deviceRunState && !tanTouRunState){
-            
+          if (selectData.sensorMiddle == 1 && !deviceRunState && !tanTouRunState) {
             // 1. 开始执行
-            deviceRunState = 'up'
-            tanTouRunState= 'middle'
-            play('up', true)
-            play('middle', true)
+            deviceRunState = 'up';
+            tanTouRunState = 'middle';
+            play('up', true);
+            play('middle', true);
           }
           if (deviceRunState == 'up-m') {
-            play('up', true)
-            play('middle', true)
-            deviceRunState = ''
-            tanTouRunState = ''
-            playCamera('end')
+            play('up', true);
+            play('middle', true);
+            deviceRunState = '';
+            tanTouRunState = '';
+            playCamera('end');
           }
           // 初始已经在运行
-          
-          if(selectData.sensorLeft == 0 && selectData.sensorMiddle == 0 && selectData.sensorRight == 0) {
+
+          if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
             //2.探头左移play('left')
-            if(tanTouRunState == 'middle'){
-              tanTouRunState = 'left-m'
-              play('left')
+            if (tanTouRunState == 'middle') {
+              tanTouRunState = 'left-m';
+              play('left');
             }
             //3. 探头右移play('right')
             if (tanTouRunState == 'left') {
-              tanTouRunState = 'right-m'
-              play('right')
+              tanTouRunState = 'right-m';
+              play('right');
             }
           }
-          if(selectData.sensorLeft == 1){
-            tanTouRunState = 'left'
+          if (selectData.sensorLeft == 1) {
+            tanTouRunState = 'left';
             if (!tanTouRunState || tanTouRunState == 'left-m') {
-              play('left', true)
+              play('left', true);
             }
           }
           if (selectData.sensorRight == 1) {
-            tanTouRunState = 'right'
+            tanTouRunState = 'right';
             if (!tanTouRunState || tanTouRunState == 'right-m') {
-              play('right', true)
+              play('right', true);
             }
           }
-        }else if (selectData['poleMiddle'] == 1) {
-          
-          if(deviceRunState == 'center-m'){
-            play('center', true)
-            deviceRunState = 'center'
-            tanTouRunState = 'right'
-            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)
+            deviceRunState = 'center';
+            play('center', true);
           }
           if (!tanTouRunState) {
-            play('right', true)
+            play('right', true);
           }
-          
+
           // 横杆在中位
-          if (selectData.sensorLeft == 0 && selectData.sensorMiddle == 0 && selectData.sensorRight == 0) {
+          if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
             //5. 探头移到中间play('middle')
             if (tanTouRunState == 'right') {
-              tanTouRunState = 'middle-m'
-              play('middle')
+              tanTouRunState = 'middle-m';
+              play('middle');
             }
             //6. 探头移到左边play('left')
             if (tanTouRunState == 'middle') {
-              tanTouRunState = 'left-m'
-              play('left')
+              tanTouRunState = 'left-m';
+              play('left');
             }
           }
           if (selectData.sensorMiddle == 1) {
-            tanTouRunState = 'middle'
+            tanTouRunState = 'middle';
             if (!tanTouRunState || tanTouRunState == 'middle-m') {
-              play('middle', true)
+              play('middle', true);
             }
           }
           if (selectData.sensorLeft == 1) {
-            tanTouRunState = 'left'
+            tanTouRunState = 'left';
             if (!tanTouRunState || tanTouRunState == 'left-m') {
-              play('left', true)
+              play('left', true);
             }
           }
-        }else if (selectData['poleNether'] == 1) {
-          
+        } else if (selectData['poleNether'] == 1) {
           if (deviceRunState == 'down-m') {
-            play('down', true)
-            deviceRunState = 'down'
-            tanTouRunState = 'left'
-            play('left', true)
+            play('down', true);
+            deviceRunState = 'down';
+            tanTouRunState = 'left';
+            play('left', true);
           }
-          if(!deviceRunState) {
-            play('down', true)
-            deviceRunState = 'down'
+          if (!deviceRunState) {
+            play('down', true);
+            deviceRunState = 'down';
           }
           if (!tanTouRunState) {
-            play('left', true)
+            play('left', true);
           }
           // 横杆在低位
-          if (selectData.sensorLeft == 0 && selectData.sensorMiddle == 0 && selectData.sensorRight == 0) {
+          if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
             //8. 探头移到中间play('middle')
             if (tanTouRunState == 'left') {
-              tanTouRunState = 'left-middle-m'
-              play('middle')
+              tanTouRunState = 'left-middle-m';
+              play('middle');
             }
             //9. 探头右移play('right')
             if (tanTouRunState == 'middle1') {
-              tanTouRunState = 'right-m'
-              play('right')
+              tanTouRunState = 'right-m';
+              play('right');
             }
             // 10. 测风结束，探头移到中间play('middle')，横杆向高位移动
             if (tanTouRunState == 'right') {
-              tanTouRunState = 'right-middle-m'
-              play('middle')
+              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 (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)
+              play('middle', true);
             }
           }
-          
+
           if (selectData.sensorRight == 1) {
-            tanTouRunState = 'right'
+            tanTouRunState = 'right';
             if (!tanTouRunState || tanTouRunState == 'right-m') {
-              play('right', true)
+              play('right', true);
             }
           }
-
-        }else {
+        } else {
           // 横杆正在运行
-          if(deviceRunState == 'up'){
-            deviceRunState = 'center-m'
-            play('center')
+          if (deviceRunState == 'up') {
+            deviceRunState = 'center-m';
+            play('center');
           }
           if (deviceRunState == 'center') {
-            deviceRunState = 'down-m'
-            play('down')
+            deviceRunState = 'down-m';
+            play('down');
           }
           if (deviceRunState == 'down') {
-            deviceRunState = 'up-m'
-            play('up')
+            deviceRunState = 'up-m';
+            play('up');
           }
         }
-        
 
         // //正在执行时
 
@@ -468,7 +499,6 @@
         //   // 判断是否有前一个状态值，有的话执行
         //   //没有前一个状态
 
-
         //   //有前一个状态
 
         //   // 横杆前状态在上位时，横杆中位移动，探头在右边
@@ -490,8 +520,7 @@
 
         //   }
         // }
-
-      }else {
+      } else {
         // if(selectData['poleIncipient'] == 1){
         //   deviceRunState = ''
         //   tanTouRunState = ''
@@ -499,189 +528,157 @@
       }
     }
 
-    if (selectData.deviceType == "windrect_rect") {
+    if (selectData.deviceType == 'windrect_rect') {
       if (selectData['apparatusRun'] == 1) {
-        const flag = selectData.sign == 0 ? 'center' : selectData.sign == 1 ? 'down' : selectData.sign == 2 ? 'up' : null
+        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
+        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.deviceType == 'windrect_ds') {
       if (selectData['apparatusRun'] == 1) {
-        if(!deviceRunState) {
-          deviceRunState = 'start'
-          play('start')
+        if (!deviceRunState) {
+          deviceRunState = 'start';
+          play('start');
         }
-        
       } else {
-        deviceRunState = ''
-        play('start', true)
+        deviceRunState = '';
+        play('start', true);
       }
     }
   }
 
   // 自测动画方法
   function testPlay(flag) {
-
     if (selectData.deviceType == 'windrect_rect') {
       setTimeout(() => {
-        play('center')
-      }, 0)
+        play('center');
+      }, 0);
       setTimeout(() => {
-        play('down')
-      }, 4000)
+        play('down');
+      }, 4000);
       setTimeout(() => {
-        play('up')
-      }, 10000)
+        play('up');
+      }, 10000);
     }
-    if(selectData.deviceType == 'windrect_normal') {
+    if (selectData.deviceType == 'windrect_normal') {
       setTimeout(() => {
-        play('up')
-      }, 0)
+        play('up');
+      }, 0);
       setTimeout(() => {
-        play('center')
-      }, 10000)
+        play('center');
+      }, 10000);
       setTimeout(() => {
-        play('down')
-      }, 18000)
+        play('down');
+      }, 18000);
       setTimeout(() => {
-        play('up')
-      }, 21000)
-
+        play('up');
+      }, 21000);
     }
-    if(selectData.deviceType == 'windrect_ds') {
-      play('moni')
+    if (selectData.deviceType == 'windrect_ds') {
+      play('moni');
     }
-  };
-  
+  }
+
   function clearPlay() {
-    modalType.value = 'autoClear'
-    modalIsShow.value = true
+    modalType.value = 'autoClear';
+    modalIsShow.value = true;
     if (globalConfig?.simulatedPassword) {
-      controlDevice('', modalType.value)
+      controlDevice('', modalType.value);
     }
   }
 
   function startRun() {
-    modalType.value = 'sing'
-    modalIsShow.value = true
+    modalType.value = 'sing';
+    modalIsShow.value = true;
     if (globalConfig?.simulatedPassword) {
-      controlDevice('', modalType.value)
+      controlDevice('', modalType.value);
     }
   }
-
-  async function getCamera() {
-    const res = await cameraList({ deviceid: selectData['deviceID'] })
-    const cameras: [] = res.records || []
-    let cameraAddrs: any[] = [], cameraNames: string[] = [];
-    if (cameras.length > 0) {
-      cameras.forEach(item => {
-        if (item['devicekind'] == 'toRtsp' || item['devicekind'] == 'toHLS') {
-          cameraNames.push(item['name'])
-        } else {
-          cameraAddrs.push({ name: item['name'], addr: item['addr'] })
-        }
-      })
-    }
-    if (cameraNames.length > 0) {
-      // 请求接口从装备院拿数据
-      const addrs: string[] = await cameraAddrList({ cameraNameList: cameraNames })
-      for (let i = 0; i < addrs.length; i++) {
-        cameraAddrs.push({ name: '摄像头' + i, addr: addrs[i] })
-      }
-    }
-    const obj = await deviceCameraInit(cameraAddrs, playerRef.value, webRtcServer)
-    webRtcServer = obj.webRtcServerList
-    const playerDoms = obj.playerDoms
-    // 注意前后门适应需要对应 //[0] 后门 [1]前门
-    await initCameraCanvas(...playerDoms)
-  }
-
   // 切换检测数据
   async function getSelectRow(selectRow, index) {
-    if(selectRow){
+    if (selectRow) {
       loading.value = true;
       selectRowIndex.value = index;
       Object.assign(selectData, selectRow);
-      let type = ''
-      if(selectRow.deviceType == 'windrect_rect') {
-        type = 'lmWindRect'
+      let type = '';
+      if (selectRow.deviceType == 'windrect_rect') {
+        type = 'lmWindRect';
       }
       if (selectRow.deviceType == 'windrect_normal') {
-        type = 'zdWindRect'
+        type = 'zdWindRect';
       }
       if (selectRow.deviceType == 'windrect_rect_single') {
-        type = 'lmWindSide'
+        type = 'lmWindSide';
       }
       if (selectRow.deviceType == 'windrect_ds') {
-        type = 'dsWindRect_move'
+        type = 'dsWindRect_move';
       }
       if (selectRow.deviceType == 'windrect_ds_four') {
-        type = 'dsWindRect_four'
+        type = 'dsWindRect_four';
       }
       if (selectRow.deviceType == 'windrect_ds_two') {
         // type = 'dsWindRect_two'
-        type = 'duisheFixed'
+        type = 'duisheFixed';
       }
-      
-      if (selectRow.deviceType == 'windrect_dd' || selectRow.deviceType == 'windrect_safety') {
-        type = 'ddWindSide'
+
+      if (selectRow.deviceType == '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 = ''
-      getCamera()
+      deviceRunState = '';
+      tanTouRunState = '';
+      await getCamera(selectRow.deviceID, playerRef.value);
     }
-    
-  };
+  }
 
   /* 一键测风 */
   function handleOk() {
-    modalType.value = 'multiple'
-    modalIsShow.value = true
+    modalType.value = 'multiple';
+    modalIsShow.value = true;
     if (globalConfig?.simulatedPassword) {
-      controlDevice('', modalType.value)
+      controlDevice('', modalType.value);
     }
-  };
+  }
 
   /* 打开一键测风弹窗 */
   function openModel() {
     setModalProps({ visible: true });
-  };
+  }
 
   function exportExcel(id) {
-    exportXls({ testid: id })
+    exportXls({ testid: id });
   }
 
   /* 关闭一键测风弹窗 */
   function handleCancel() {
     setModalProps({ visible: false });
     modalTable.value.clearSelectedRowKeys();
-  };
+  }
 
   /* 关闭一键测风控制*/
   function handleCancelControl() {
-    modalIsShow.value = false
-  };
+    modalIsShow.value = false;
+  }
 
   function controlDevice(passWord, type) {
-    if(type == 'sing'){
+    if (type == 'sing') {
       testWind({ ids: [selectData.deviceID], maxnum: runNum.value, password: passWord }).then((res) => {
         message.success('开始测风。。。');
       });
-    }else if(type == 'multiple'){
+    } else if (type == 'multiple') {
       const ids = toRaw(modalTable.value.selectedRowKeys);
       testWind({ ids: ids, maxnum: runNum.value, password: passWord }).then((res) => {
         message.success(res);
         setModalProps({ visible: false });
         modalTable.value.clearSelectedRowKeys();
       });
-    }else if(type == 'autoClear') {
+    } else if (type == 'autoClear') {
       const data = {
         deviceid: selectData.deviceID,
         devicetype: selectData.deviceType,
@@ -690,17 +687,16 @@
         password: passWord,
         masterComputer: selectData.masterComputer,
       };
-      deviceControlApi(data)
-      .then((res) => {
+      deviceControlApi(data).then((res) => {
         // 模拟时开启
         if (res.success) {
           if (globalConfig.History_Type == 'remote') {
-            message.success('指令已下发至生产管控平台成功！')
+            message.success('指令已下发至生产管控平台成功！');
           } else {
-            message.success('指令已下发成功！')
+            message.success('指令已下发成功！');
           }
         }
-      })
+      });
     }
   }
 
@@ -710,7 +706,7 @@
     criticalPathList.value = pathArr.records.filter((item) => {
       return item.strsystype == 3;
     });
-  };
+  }
 
   /* 根据路线选择测风装置 */
   function selectCriticalPath(pathId) {
@@ -721,14 +717,14 @@
       });
       if (modalTable.value) modalTable.value.setSelectedRowKeys(ids);
     });
-  };
+  }
 
   function deviceEdit(e: Event, type: string, record) {
-    e.stopPropagation()
+    e.stopPropagation();
     openModal(true, {
       type,
-      deviceId: record['deviceID']
-    })
+      deviceId: record['deviceID'],
+    });
   }
 
   onBeforeMount(() => {
@@ -736,7 +732,7 @@
   });
 
   onMounted(() => {
-    const playerDom = document.getElementById('cf-player1')?.getElementsByClassName('vjs-tech')[0]
+    const playerDom = document.getElementById('cf-player1')?.getElementsByClassName('vjs-tech')[0];
     loading.value = true;
     mountedThree(playerDom).then(async () => {
       getMonitor(true);
@@ -751,9 +747,9 @@
       timer = undefined;
     }
     if (webRtcServer.length > 0) {
-      webRtcServer.forEach(item => {
-        item.disconnect()
-      })
+      webRtcServer.forEach((item) => {
+        item.disconnect();
+      });
     }
   });
 </script>
@@ -761,12 +757,11 @@
   @import '/@/design/vent/modal.less';
   @ventSpace: zxm;
 
-  
   :deep(.@{ventSpace}-tabs-tabpane-active) {
     height: 100%;
   }
-  .scene-box{
-    .bottom-tabs-box{
+  .scene-box {
+    .bottom-tabs-box {
       height: 350px;
     }
   }

src/views/vent/monitorManager/windrectMonitor/windrect.data.ts

@@ -122,7 +122,7 @@ export const innerResultColumns: BasicColumn[] = [
   },
   {
     title: '风量',
-    dataIndex: 'm3',
+    dataIndex: 'm³',
     align: 'center',
     width: 100,
   },
@@ -420,7 +420,7 @@ export const chartsColumns = [
     color: '#3DF6FF',
     sort: 1,
     xRotate: 0,
-    dataIndex: 'm3',
+    dataIndex: 'm³',
   },
   {
     legend: '风速',

src/views/vent/monitorManager/workFaceMonitor/components/workFaceFireHome.vue

@@ -271,7 +271,7 @@
                 :scroll="{ x: 'max-content', y: 100 }">
                 <template #bodyCell="{ column, record }">
                   <template v-if="column.dataIndex === 'warnFlag'">
-                    <span v-if="record['warnFlag'] == 0" style="color: #00ff00;">链接</span>
+                    <span v-if="record['warnFlag'] == '0'" style="color: #00ff00;">链接</span>
                     <span v-else style="color: #ff0000;"> {{ record.warnDes }}</span>
                   </template>
                   <template v-if="column.dataIndex === 'action'">

src/views/vent/monitorManager/workFaceMonitor/components/workFaceVentHome.vue

@@ -75,7 +75,7 @@
               maxWidth="340" :scroll="{ x: 'max-content', y: 140 }">
               <template #bodyCell="{ column, record }">
                 <template v-if="column.dataIndex === 'warnFlag'">
-                  <span v-if="record['warnFlag'] == 0" style="color: #00ff00;">正常</span>
+                  <span v-if="record['warnFlag'] == '0'" style="color: #00ff00;">正常</span>
                   <span v-else style="color: #ff0000;"> {{ record.warnDes }}</span>
                 </template>
                 <template v-if="column.dataIndex === 'action'">
@@ -94,7 +94,7 @@
               maxWidth="340" :scroll="{ x: 'max-content', y: 140 }">
               <template #bodyCell="{ column, record }">
                 <template v-if="column.dataIndex === 'warnFlag'">
-                  <span v-if="record['warnFlag'] == 0" style="color: #00ff00;">正常</span>
+                  <span v-if="record['warnFlag'] == '0'" style="color: #00ff00;">正常</span>
                   <span v-else style="color: #ff0000;"> {{ record.warnDes }}</span>
                 </template>
                 <template v-if="column.dataIndex === 'action'">
@@ -176,7 +176,7 @@
                 maxWidth="340" :scroll="{ x: 'max-content', y: 180 }">
                 <template #bodyCell="{ column, record }">
                   <template v-if="column.dataIndex === 'warnFlag'">
-                    <span v-if="record['warnFlag'] == 0" style="color: #00ff00;">正常</span>
+                    <span v-if="record['warnFlag'] == '0'" style="color: #00ff00;">正常</span>
                     <span v-else style="color: #ff0000;"> {{ record.warnDes }}</span>
                   </template>
                   <template v-if="column.dataIndex === 'action'">

src/views/vent/monitorManager/workFaceMonitor/workFace.data.ts

@@ -256,7 +256,7 @@ export const windColumns: BasicColumn[] = [
   },
   {
     title: '风量',
-    dataIndex: 'm3',
+    dataIndex: 'm³',
     width: 80,
     align: 'center',
   },

src/views/vent/performance/fileDetail/fileDetail.api.ts

@@ -9,7 +9,6 @@ enum Api {
   uploadApi = '/ventanaly-sharefile/fileServer/upload',
   downLoad = '/ventanaly-sharefile/fileServer/download',
   deleteById = '/ventanaly-sharefile/fileServer/delete?id=',
-  
 }
 
 /**
@@ -18,8 +17,6 @@ enum Api {
  */
 export const getTree = (params) => defHttp.post({ url: Api.getTree, params });
 
-
-
 /**
  * 创建文件夹接口
  * @param params
@@ -48,8 +45,6 @@ export const delMenu = (params) => defHttp.delete({ url: Api.delMenu + params.id
  */
 export const downLoad = (params) => defHttp.post({ url: Api.downLoad, params, responseType: 'blob' });
 
-
-
 /**
  * 删除文件/文件夹
  */
@@ -58,4 +53,3 @@ export const deleteById = (params, handleSuccess) => {
     handleSuccess();
   });
 };
-

src/views/vent/performance/fileIndex/index.vue

@@ -1,12 +1,17 @@
 <template>
   <div class="performance">
-    <customHeader >文件共享中心</customHeader>
+    <customHeader>文件共享中心</customHeader>
     <div class="main-container">
-      <div class="card" v-for="(item, index) in titleList" :class="index === active ? 'actived' : 'isActived'"
-        :key="index" @click="getDetails(index)">
+      <div
+        class="card"
+        v-for="(item, index) in titleList"
+        :class="index === active ? 'actived' : 'isActived'"
+        :key="index"
+        @click="getDetails(index)"
+      >
         <div class="card-t">{{ item.sysOrgName }}</div>
         <div class="card-b">
-          <div class="box" v-for="(items, ind) in item.tab" :key="ind" @click="getToggle(ind,item)">
+          <div class="box" v-for="(items, ind) in item.tab" :key="ind" @click="getToggle(ind, item)">
             <div class="img"> <img :src="items.src" alt="" /> </div>
             <div class="text">{{ items.text }}</div>
             <div class="num">{{ items.num }}</div>
@@ -17,197 +22,196 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { reactive, ref, onMounted } from 'vue';
-
-import { useRouter } from 'vue-router';
-import leftImg from '../../../../assets/images/files/homes/file.svg';
-import rightImg from '../../../../assets/images/files/homes/sp.svg';
-import { list } from './fileIndex.api';
-import customHeader from '/@/views/vent/comment/components/customHeader.vue';
-let router = useRouter(); //路由
-let active = ref(); //当前选中项
-let titleList = reactive<any[]>([]);
-let homeParam = reactive({
-  sysOrgCode: '',
-  bpmStatus: null,
-  flag:''
-})
-//获取首页数据
-let getPageList = async () => {
-  let data = await list();
-  console.log(data, '首页数据');
-  if (data.length !== 0) {
-    let datas = data.map((el) => {
-      return {
-        sysOrgName: el.sysOrgName,
-        sysOrgCode: el.sysOrgCode,
-        flag:el.flag,
-        tab: [
-          { src: leftImg, text: '文档总数', num: el.tolalNum },
-          { src: rightImg, text: '待审批数', num: el.approveNum },
-        ],
-      };
+  import { reactive, ref, onMounted } from 'vue';
+
+  import { useRouter } from 'vue-router';
+  import leftImg from '../../../../assets/images/files/homes/file.svg';
+  import rightImg from '../../../../assets/images/files/homes/sp.svg';
+  import { list } from './fileIndex.api';
+  import customHeader from '/@/views/vent/comment/components/customHeader.vue';
+  let router = useRouter(); //路由
+  let active = ref(); //当前选中项
+  let titleList = reactive<any[]>([]);
+  let homeParam = reactive({
+    sysOrgCode: '',
+    bpmStatus: null,
+    flag: '',
+  });
+  //获取首页数据
+  let getPageList = async () => {
+    let data = await list();
+    console.log(data, '首页数据');
+    if (data.length !== 0) {
+      let datas = data.map((el) => {
+        return {
+          sysOrgName: el.sysOrgName,
+          sysOrgCode: el.sysOrgCode,
+          flag: el.flag,
+          tab: [
+            { src: leftImg, text: '文档总数', num: el.tolalNum },
+            { src: rightImg, text: '待审批数', num: el.approveNum },
+          ],
+        };
+      });
+      titleList.push(...datas);
+      console.log(titleList, '123456');
+    }
+  };
+
+  //切换选项
+  let getDetails = (index) => {
+    active.value = index;
+  };
+  // //切换左右选项
+  let getToggle = (ind, item) => {
+    console.log(ind, '审批状态索引');
+    console.log(item, 'item');
+    homeParam.sysOrgCode = item.sysOrgCode;
+    homeParam.flag = item.flag;
+    if (ind) {
+      homeParam.bpmStatus = 2;
+    } else {
+      homeParam.bpmStatus = homeParam.flag ? '' : 'All';
+    }
+
+    console.log(homeParam, 'home0000000000');
+    router.push({
+      path: '/fileManager/fileDetail/home',
+      query: { sysOrgCode: homeParam.sysOrgCode, bpmStatus: homeParam.bpmStatus, flag: homeParam.flag },
     });
-    titleList.push(...datas);
-    console.log(titleList, '123456');
-  }
-};
-
-//切换选项
-let getDetails = (index) => {
-  active.value = index;
-};
-// //切换左右选项
-let getToggle = (ind,item) => {
-  console.log(ind,'审批状态索引');
-  console.log(item,'item')
-  homeParam.sysOrgCode = item.sysOrgCode
-  homeParam.flag=item.flag
-  if(ind){
-    homeParam.bpmStatus=2
-  }else {
-    homeParam.bpmStatus=homeParam.flag ?  '' : 'All'
-  }
- 
-  console.log(homeParam,'home0000000000')
-   router.push({
-    path:'/fileManager/fileDetail/home',
-    query:{sysOrgCode:homeParam.sysOrgCode,bpmStatus:homeParam.bpmStatus,flag:homeParam.flag}
+  };
+  onMounted(() => {
+    getPageList();
   });
-};
-onMounted(() => {
-  getPageList();
-});
 </script>
 
 <style lang="less" scoped>
-@font-face {
-  font-family: 'douyuFont';
-  src: url(../../../../assets/images/files/douyuFont.otf);
-}
-
-.performance {
-  width: 100%;
-  height: 100%;
-  padding: 15px;
-  position: relative;
-  box-sizing: border-box;
-  background: url(../../../../assets/images/files/homes/bd.png) no-repeat center;
-
-  .main-container {
-    width: 100%;
-    height: calc(100% - 30px);
-    display: flex;
-    flex-direction: row;
-    // justify-content: flex-start;
-    // align-items: flex-start;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-
-    .card {
-      width: 331px;
-      height: 235px;
-      background: url(../../../../assets/images/files/homes/default.png) no-repeat center;
-      background-size: 100% 100%;
-      margin: 0px 23px 15px 23px;
-      cursor: pointer;
-
-      .card-t {
-        height: 50px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-family: '思源黑体', 'Microsoft Yahei';
-        font-size: 20px;
-        color: #fff;
-      }
-
-      .card-b {
-        height: calc(100% - 65px);
-        margin-top: 15px;
-        display: flex;
-        flex-direction: row;
+  @font-face {
+    font-family: 'douyuFont';
+    src: url(../../../../assets/images/files/douyuFont.otf);
+  }
 
-        .box {
+  .performance {
+    width: 100%;
+    height: 100%;
+    padding: 15px;
+    position: relative;
+    box-sizing: border-box;
+    background: url(../../../../assets/images/files/homes/bd.png) no-repeat center;
+
+    .main-container {
+      width: 100%;
+      height: calc(100% - 30px);
+      display: flex;
+      flex-direction: row;
+      // justify-content: flex-start;
+      // align-items: flex-start;
+      justify-content: center;
+      align-items: center;
+      flex-wrap: wrap;
+
+      .card {
+        width: 331px;
+        height: 235px;
+        background: url(../../../../assets/images/files/homes/default.png) no-repeat center;
+        background-size: 100% 100%;
+        margin: 0px 23px 15px 23px;
+        cursor: pointer;
+
+        .card-t {
+          height: 50px;
           display: flex;
-          flex: 1;
-          flex-direction: column;
-          justify-content: flex-start;
+          justify-content: center;
           align-items: center;
+          font-family: '思源黑体', 'Microsoft Yahei';
+          font-size: 20px;
+          color: #fff;
+        }
 
-          &:first-child .img {
-            position: relative;
-            width: 72px;
-            height: 78px;
-            background: url(../../../../assets/images/files/homes/file1.png) no-repeat center;
-
-            img {
-              position: absolute;
-              left: 50%;
-              top: 50%;
-              transform: translate(-50%, -75%);
-            }
-          }
+        .card-b {
+          height: calc(100% - 65px);
+          margin-top: 15px;
+          display: flex;
+          flex-direction: row;
 
-          &:last-child .img {
-            position: relative;
-            width: 72px;
-            height: 78px;
-            background: url(../../../../assets/images/files/homes/sp.png) no-repeat center;
-
-            img {
-              position: absolute;
-              left: 50%;
-              top: 50%;
-              transform: translate(-50%, -75%);
+          .box {
+            display: flex;
+            flex: 1;
+            flex-direction: column;
+            justify-content: flex-start;
+            align-items: center;
+
+            &:first-child .img {
+              position: relative;
+              width: 72px;
+              height: 78px;
+              background: url(../../../../assets/images/files/homes/file1.png) no-repeat center;
+
+              img {
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -75%);
+              }
             }
-          }
 
+            &:last-child .img {
+              position: relative;
+              width: 72px;
+              height: 78px;
+              background: url(../../../../assets/images/files/homes/sp.png) no-repeat center;
+
+              img {
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -75%);
+              }
+            }
 
-          .text {
-            margin: 5px 0px;
-            font-family: '思源黑体', 'Microsoft Yahei';
-            color: #fff;
-            font-size: 14px;
-          }
+            .text {
+              margin: 5px 0px;
+              font-family: '思源黑体', 'Microsoft Yahei';
+              color: #fff;
+              font-size: 14px;
+            }
 
-          &:first-child .num {
-            width: 120px;
-            height: 30px;
-            font-family: 'douyuFont';
-            color: #fff;
-            font-size: 20px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            background: url(../../../../assets/images/files/homes/file2.png) no-repeat center;
-          }
+            &:first-child .num {
+              width: 120px;
+              height: 30px;
+              font-family: 'douyuFont';
+              color: #fff;
+              font-size: 20px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              background: url(../../../../assets/images/files/homes/file2.png) no-repeat center;
+            }
 
-          &:last-child .num {
-            width: 120px;
-            height: 30px;
-            font-family: 'douyuFont';
-            color: #fff;
-            font-size: 20px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            background: url(../../../../assets/images/files/homes/sp2.png) no-repeat center;
+            &:last-child .num {
+              width: 120px;
+              height: 30px;
+              font-family: 'douyuFont';
+              color: #fff;
+              font-size: 20px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              background: url(../../../../assets/images/files/homes/sp2.png) no-repeat center;
+            }
           }
         }
       }
-    }
 
-    .actived {
-      background: url(../../../../assets/images/files/homes/mouse.png) no-repeat center;
-      background-size: 100% 100%;
-    }
+      .actived {
+        background: url(../../../../assets/images/files/homes/mouse.png) no-repeat center;
+        background-size: 100% 100%;
+      }
 
-    .isActived {
-      background: url(../../../../assets/images/files/homes/default.png) no-repeat center;
-      background-size: 100% 100%;
+      .isActived {
+        background: url(../../../../assets/images/files/homes/default.png) no-repeat center;
+        background-size: 100% 100%;
+      }
     }
   }
-}
 </style>

src/views/vent/sys/setting/index.vue

@@ -6,6 +6,7 @@
           <a class="action-link" @click="handleEdit(record)">编辑</a>
         </template>
         <template v-if="column.dataIndex === 'logoIcon' || column.dataIndex === 'loginBack'">
+          <span>{{ record[column.dataIndex] }}</span>
           <img width="50" height="50" :src=" urlStr + '/sys/common/static/'+ record[column.dataIndex]">
         </template>
       </template>