1 anno fa · 343b589292
--- a/.env
+++ b/.env
@@ -10,7 +10,7 @@ VITE_GLOB_AP_LOGO =
 
				 VITE_GLOB_APP_SHORT_NAME = JeecgBootAdmin
			
 
				 
			
 
				 # 单点登录服务端地址
			
 
				-#VITE_GLOB_APP_CAS_BASE_URL=http://47.94.222.6:8070/cas
			
 
				+VITE_GLOB_APP_CAS_BASE_URL=https://id.shendong.com.cn/default
			
 
				 
			
 
				 # 是否开启单点登录
			
 
				 VITE_GLOB_APP_OPEN_SSO=false
			
--- a/.env.production
+++ b/.env.production
@@ -2,7 +2,7 @@
 
				 VITE_USE_MOCK = true
			
 
				 
			
 
				 # 发布路径
			
 
				-VITE_PUBLIC_PATH = ./
			
 
				+VITE_PUBLIC_PATH = /
			
 
				 
			
 
				 # 控制台不输出
			
 
				 VITE_DROP_CONSOLE = true
			
@@ -33,7 +33,7 @@ VITE_GLOB_API_URL=/modelreq
 
				 #VITE_GLOB_DOMAIN_URL=http://jeecg-boot-system:8080/jeecg-boot
			
 
				 #VITE_GLOB_DOMAIN_URL=http://182.92.126.35:9999
			
 
				 #VITE_GLOB_DOMAIN_URL=http://10.248.210.152:9999 #宝德
			
 
				-VITE_GLOB_DOMAIN_URL = http://172.16.41.171:9999
			
 
				+#VITE_GLOB_DOMAIN_URL = http://172.16.41.171:9999
			
 
				 #VITE_GLOB_DOMAIN_URL = http://10.120.120.163:9999
			
 
				 #VITE_GLOB_DOMAIN_URL=http://10.248.223.50:9999
			
 
				 #VITE_GLOB_DOMAIN_URL=http://192.168.1.4:9999
			
@@ -63,7 +63,7 @@ VITE_LEGACY = false
 
				 #VITE_APP_SUB_APP = [["micro-need-air", "//182.92.126.35:8093/"], ["micro-vent-3dModal", "//182.92.126.35:8091/"]]
			
 
				 #VITE_APP_SUB_APP = [["micro-need-air", ":8093/"], ["micro-vent-3dModal", ":8091/"]]
			
 
				 #VITE_APP_SUB_APP = [["micro-vent-3dModal", ":8091/", "micro-vent-3dModal"], ["micro-need-air", ":8093/", "micro-need-air"]]
			
 
				-VITE_APP_SUB_APP = [["micro-vent-3dModal", "/models/"], ["micro-need-air", "/vent-need-air/"]] #[name, entry, container]
			
 
				+VITE_APP_SUB_APP = [["micro-vent-3dModal", "/models/", ":8091/"], ["micro-need-air", "/vent-need-air/", ":8093/"]] #[name, entry, container]
			
 
				 #VITE_APP_SUB_APP = [["micro-need-air", "//172.16.41.171:7123/"], ["micro-vent-3dModal", "//172.16.41.171:7121/"]]
			
 
				 #VITE_APP_SUB_APP = [["micro-vent-3dModal", "//192.168.0.79:7121/"]]
			
 
				 #VITE_APP_SUB_APP = [["micro-need-air", "//127.0.0.1:20000/"], ["micro-vent-3dModal", "//127.0.0.1:30000/"], ["micro-fire-front", "//127.0.0.1:40000/"]]
			
--- a/index.html
+++ b/index.html
@@ -12,11 +12,11 @@
 
				     <script src="/js/liveplayer-lib.min.js"></script>
			
 
				     <script src="/js/webrtcstreamer.js"></script>
			
 
				     <script src="/js/adapter.min.js"></script>
			
 
				-    <!-- <script type="text/javascript" src="/web-apps/apps/api/documents/api.js"></script> -->
			
 
				+    <script type="text/javascript" src="http://182.92.126.35:9050/web-apps/apps/api/documents/api.js"></script>
			
 
				   </head>
			
 
				   <body>
			
 
				     <script>
			
 
				-      (async() => {
			
 
				+      (() => {
			
 
				         var htmlRoot = document.getElementById('htmlRoot');
			
 
				         var theme = window.localStorage.getItem('__APP__DARK__MODE__');
			
 
				         if (htmlRoot && theme) {
			
@@ -329,5 +329,15 @@
 
				       //   s.parentNode.insertBefore(hm, s);
			
 
				       // })();
			
 
				     </script>
			
 
				+    <script>
			
 
				+      var _hmt = _hmt || [];
			
 
				+      (function() {
			
 
				+        var hm = document.createElement("script");
			
 
				+        const ip = window.location.origin.split(':')[0]
			
 
				+        hm.src = ip + ":9050/web-apps/apps/api/documents/api.js";
			
 
				+        var s = document.getElementsByTagName("script")[0];
			
 
				+        s.parentNode.insertBefore(hm, s);
			
 
				+      })();
			
 
				+    </script>
			
 
				   </body>
			
 
				 </html>
			
--- a/src/api/common/api.ts
+++ b/src/api/common/api.ts
@@ -19,8 +19,8 @@ enum Api {
 
				 /**
			
 
				  * 上传父路径
			
 
				  */
			
 
				-// export const uploadUrl = `${baseUploadUrl}/sys/common/upload`;
			
 
				-export const uploadUrl = `${baseUploadUrl}/sys/common/upload2`;
			
 
				+export const uploadUrl = `${baseUploadUrl}/sys/common/upload`;
			
 
				+export const uploadUrl2 = `${baseUploadUrl}/sys/common/upload2`;
			
 
				 
			
 
				 /**
			
 
				  * 职务列表
			
@@ -94,6 +94,13 @@ export const loadCategoryData = (params) => {
 
				 /**
			
 
				  * 文件上传
			
 
				  */
			
 
				+export const uploadFile2 = (params, success) => {
			
 
				+  return defHttp.uploadFile({ url: uploadUrl2 }, params, { success });
			
 
				+};
			
 
				+
			
 
				+/**
			
 
				+ * 文件上传
			
 
				+ */
			
 
				 export const uploadFile = (params, success) => {
			
 
				   return defHttp.uploadFile({ url: uploadUrl }, params, { success });
			
 
				 };
			
--- a/src/api/sys/user.ts
+++ b/src/api/sys/user.ts
@@ -114,7 +114,7 @@ export function doLogout() {
 
				 }
			
 
				 
			
 
				 export function getCodeInfo(currdatetime) {
			
 
				-  let url = Api.getInputCode + `/${currdatetime}`;
			
 
				+  const url = Api.getInputCode + `/${currdatetime}`;
			
 
				   return defHttp.get({ url: url });
			
 
				 }
			
 
				 /**
			
@@ -161,8 +161,8 @@ export const passwordChange = (params) => defHttp.get({ url: Api.passwordChange,
 
				  */
			
 
				 export function thirdLogin(params, mode: ErrorMessageMode = 'modal') {
			
 
				   //==========begin 第三方登录/auth2登录需要传递租户id===========
			
 
				-  let tenantId = "0";
			
 
				-  if(!params.tenantId){
			
 
				+  let tenantId = '0';
			
 
				+  if (!params.tenantId) {
			
 
				     tenantId = params.tenantId;
			
 
				   }
			
 
				   //==========end 第三方登录/auth2登录需要传递租户id===========
			
@@ -196,7 +196,7 @@ export function setThirdCaptcha(params) {
 
				  * 获取登录二维码信息
			
 
				  */
			
 
				 export function getLoginQrcode() {
			
 
				-  let url = Api.getLoginQrcode;
			
 
				+  const url = Api.getLoginQrcode;
			
 
				   return defHttp.get({ url: url });
			
 
				 }
			
 
				 
			
@@ -204,7 +204,7 @@ export function getLoginQrcode() {
 
				  * 监控扫码状态
			
 
				  */
			
 
				 export function getQrcodeToken(params) {
			
 
				-  let url = Api.getQrcodeToken;
			
 
				+  const url = Api.getQrcodeToken;
			
 
				   return defHttp.get({ url: url, params });
			
 
				 }
			
 
				 
			
@@ -212,6 +212,6 @@ export function getQrcodeToken(params) {
 
				  * SSO登录校验
			
 
				  */
			
 
				 export async function validateCasLogin(params) {
			
 
				-  let url = Api.validateCasLogin;
			
 
				+  const url = Api.validateCasLogin;
			
 
				   return defHttp.get({ url: url, params });
			
 
				 }
			
--- a/src/assets/images/company/car.png
+++ b/src/assets/images/company/car.png
--- a/src/assets/images/company/file1.png
+++ b/src/assets/images/company/file1.png
--- a/src/assets/images/company/file2.png
+++ b/src/assets/images/company/file2.png
--- a/src/assets/images/company/hang.png
+++ b/src/assets/images/company/hang.png
--- a/src/assets/images/company/people.png
+++ b/src/assets/images/company/people.png
--- a/src/assets/images/company/select-bg.png
+++ b/src/assets/images/company/select-bg.png
--- a/src/assets/images/company/unselect-bg.png
+++ b/src/assets/images/company/unselect-bg.png
--- a/src/assets/images/home-container/warn-icon.png
+++ b/src/assets/images/home-container/warn-icon.png
--- a/src/assets/images/home-container/warn-icon1.png
+++ b/src/assets/images/home-container/warn-icon1.png
--- a/src/assets/images/home-container/warn-icon2.png
+++ b/src/assets/images/home-container/warn-icon2.png
--- a/src/assets/images/home-container/warn-icon3.png
+++ b/src/assets/images/home-container/warn-icon3.png
--- a/src/assets/images/home-container/背景图.png
+++ b/src/assets/images/home-container/背景图.png
--- a/src/components/Form/src/jeecg/components/JUpload/JUpload.vue
+++ b/src/components/Form/src/jeecg/components/JUpload/JUpload.vue
@@ -1,6 +1,7 @@
 
				 <template>
			
 
				   <div ref="containerRef" :class="`${prefixCls}-container`">
			
 
				     <a-upload
			
 
				+      v-if="bizPath === 'temp'"
			
 
				       :headers="headers"
			
 
				       :multiple="multiple"
			
 
				       :action="uploadUrl"
			
@@ -22,6 +23,29 @@
 
				         <span>{{ text }}</span>
			
 
				       </a-button>
			
 
				     </a-upload>
			
 
				+    <a-upload
			
 
				+      v-else
			
 
				+      :headers="headers"
			
 
				+      :multiple="multiple"
			
 
				+      :action="uploadUrl2"
			
 
				+      :fileList="fileList"
			
 
				+      :disabled="disabled"
			
 
				+      v-bind="bindProps"
			
 
				+      @remove="onRemove"
			
 
				+      @change="onFileChange"
			
 
				+      @preview="onFilePreview"
			
 
				+    >
			
 
				+      <template v-if="isImageMode">
			
 
				+        <div v-if="!isMaxCount">
			
 
				+          <Icon icon="ant-design:plus-outlined" />
			
 
				+          <div class="ant-upload-text">{{ text }}</div>
			
 
				+        </div>
			
 
				+      </template>
			
 
				+      <a-button v-else-if="buttonVisible" :disabled="buttonDisabled">
			
 
				+        <Icon icon="ant-design:upload-outlined" />
			
 
				+        <span>{{ text }}</span>
			
 
				+      </a-button>
			
 
				+    </a-upload>
			
 
				   </div>
			
 
				 </template>
			
 
				 
			
@@ -29,7 +53,7 @@
 
				   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';
			
 
				+  import { uploadUrl, uploadUrl2 } from '/@/api/common/api';
			
 
				   import { propTypes } from '/@/utils/propTypes';
			
 
				   import { useMessage } from '/@/hooks/web/useMessage';
			
 
				   import { createImgPreview } from '/@/components/Preview/index';
			
--- a/src/hooks/web/useSso.ts
+++ b/src/hooks/web/useSso.ts
@@ -20,11 +20,15 @@ export function useSso() {
 
				           await validateCasLogin({
			
 
				             ticket: ticket,
			
 
				             service: locationUrl,
			
 
				-          }).then((res) => {
			
 
				-            const userStore = useUserStore();
			
 
				-            userStore.setToken(res.token);
			
 
				-            return userStore.afterLoginAction(true, {});
			
 
				-          });
			
 
				+          })
			
 
				+            .then((res) => {
			
 
				+              const userStore = useUserStore();
			
 
				+              userStore.setToken(res.token);
			
 
				+              return userStore.afterLoginAction(true, {});
			
 
				+            })
			
 
				+            .catch(() => {
			
 
				+              window.location.href = globSetting.casBaseUrl + '/login?service=' + encodeURIComponent(locationUrl);
			
 
				+            });
			
 
				         } else {
			
 
				           window.location.href = globSetting.casBaseUrl + '/login?service=' + encodeURIComponent(locationUrl);
			
 
				         }
			
--- a/src/qiankun/apps.ts
+++ b/src/qiankun/apps.ts
@@ -11,15 +11,17 @@ for (const key in import.meta.env) {
 
				   if (key === 'VITE_APP_SUB_APP') {
			
 
				     const appList = JSON.parse(import.meta.env[key].replace(/'/g, '"'));
			
 
				     appList.forEach((app) => {
			
 
				-      // const name = app[0];
			
 
				-      const utlStr = app[1];
			
 
				-      // if (import.meta.env.PROD) {
			
 
				-      //   // 多端口请求
			
 
				-      //   // utlStr = VUE_APP_URL.baseUrl.split(':')[1] + app[1];
			
 
				-      //   utlStr = app[1];
			
 
				-      // } else {
			
 
				-      //   utlStr = app[1];
			
 
				-      // }
			
 
				+      let utlStr;
			
 
				+      if (import.meta.env.PROD) {
			
 
				+        // 多端口请求
			
 
				+        if (VUE_APP_URL.baseUrl.split(':').length > 1) {
			
 
				+          utlStr = VUE_APP_URL.baseUrl.split(':')[1] + app[1];
			
 
				+        } else {
			
 
				+          utlStr = app[1];
			
 
				+        }
			
 
				+      } else {
			
 
				+        utlStr = app[1];
			
 
				+      }
			
 
				       const obj = {
			
 
				         name: app[0],
			
 
				         entry: utlStr,
			
--- a/src/qiankun/index.ts
+++ b/src/qiankun/index.ts
@@ -34,7 +34,22 @@ const mountMicroApp = (path, toPath?) => {
 
				       if (toPath) {
			
 
				         app['props']['data']['publicPath'] = toPath;
			
 
				       }
			
 
				-      activeApps[app['activeRule']] = loadMicroApp(app); // 手动加载子应用
			
 
				+      activeApps[app['activeRule']] = loadMicroApp(app, {
			
 
				+        fetch(url, ...args) {
			
 
				+          // 给指定的微应用 entry 开启跨域请求
			
 
				+          if (url === 'http://1.1.1.3:89/cookie/flash.js') {
			
 
				+            return window.fetch(url, {
			
 
				+              ...args,
			
 
				+              headers: {
			
 
				+                'Access-Control-Allow-Origin': '*',
			
 
				+              },
			
 
				+              mode: 'cors',
			
 
				+              credentials: 'include',
			
 
				+            });
			
 
				+          }
			
 
				+          return window.fetch(url, ...args);
			
 
				+        },
			
 
				+      }); // 手动加载子应用
			
 
				     }
			
 
				   }
			
 
				 };
			
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -188,7 +188,7 @@ export const useUserStore = defineStore({
 
				         //update-end-author:liusq date:2022-5-5 for: 登录成功后缓存拖拽模块的接口前缀
			
 
				         goHome && (await router.replace((userInfo && userInfo.homePath) || glob.homePath || PageEnum.BASE_HOME));
			
 
				         // update-begin-author:sunjianlei date:20230306 for: 修复登录成功后，没有正确重定向的问题
			
 
				-        let redirect = router.currentRoute.value?.query?.redirect as string;
			
 
				+        const redirect = router.currentRoute.value?.query?.redirect as string;
			
 
				         // 判断是否有 redirect 重定向地址
			
 
				         //update-begin---author:wangshuai ---date:20230424  for：【QQYUN-5195】登录之后直接刷新页面导致没有进入创建组织页面------------
			
 
				         if (redirect && goHome) {
			
--- a/src/utils/threejs/util.ts
+++ b/src/utils/threejs/util.ts
@@ -64,7 +64,7 @@ export const getTextCanvas = (w, h, textArr, imgUrl) => {
 
				     if (imgUrl) {
			
 
				       const img = new Image();
			
 
				 
			
 
				-      img.src = new URL(location.origin + '../../assets/images/vent/model_image/' + imgUrl, import.meta.url).href;
			
 
				+      img.src = new URL('/src/assets/images/vent/model_image/' + imgUrl, import.meta.url).href;
			
 
				       img.onload = () => {
			
 
				         //将画布处理为透明
			
 
				         ctx.clearRect(0, 0, width, height);
			
--- a/src/utils/ui.js
+++ b/src/utils/ui.js
@@ -73,9 +73,6 @@ export function rainBg(className, bgClassName) {
 
				   anim();
			
 
				 }
			
 
				 
			
 
				-// 获取图片资源路径
			
 
				-export const getAssetURL = (image) => {
			
 
				-  // 参数一: 相对路径
			
 
				-  // 参数二: 当前路径的URL
			
 
				-  return new URL(`${location.origin}../assets/images/${image}`, import.meta.url).href;
			
 
				+export const getAssetURL = (imagePath) => {
			
 
				+  return new URL(`../assets/images/${imagePath}`, import.meta.url).href;
			
 
				 };
			
--- a/src/views/vent/home/clique/clique.data.ts
+++ b/src/views/vent/home/clique/clique.data.ts
@@ -83,4 +83,4 @@ export const airVolumeMonitor = [
 
				     hui: 10215,
			
 
				     xufeng: 10215,
			
 
				   },
			
 
				-];
			
 
				+];
			
--- a/src/views/vent/home/clique/components/dialog-modal.vue
+++ b/src/views/vent/home/clique/components/dialog-modal.vue
@@ -83,9 +83,9 @@
 
				 
			
 
				   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 },
			
 
				+    { imgSrc: getAssetURL('company/home/hang.png'), label: '巷道长度', value: 12300 },
			
 
				+    { imgSrc: getAssetURL('company/home/people.png'), label: '人员总数', value: 23 },
			
 
				+    { imgSrc: getAssetURL('company/home/car.png'), label: '车辆总数', value: 17 },
			
 
				   ]);
			
 
				 
			
 
				   let valueM = ref('10000');
			
@@ -122,12 +122,12 @@
 
				     value: '低风险',
			
 
				   });
			
 
				 
			
 
				-//   const emit = defineEmits(['closeDialog']);
			
 
				+  //   const emit = defineEmits(['closeDialog']);
			
 
				 
			
 
				-//   function getClose() {
			
 
				-//     debugger;
			
 
				-//     emit('closeDialog', false);
			
 
				-//   }
			
 
				+  //   function getClose() {
			
 
				+  //     debugger;
			
 
				+  //     emit('closeDialog', false);
			
 
				+  //   }
			
 
				 </script>
			
 
				 <style lang="less" scoped>
			
 
				   @font-face {
			
--- a/src/views/vent/home/clique/components/file-share.vue
+++ b/src/views/vent/home/clique/components/file-share.vue
@@ -1,186 +1,224 @@
 
				 <template>
			
 
				-    <div class="fileShare">
			
 
				-        <div class="file-title">{{ fileTitle }}</div>
			
 
				-        <div class="file-content">
			
 
				-            <div class="left-jt">
			
 
				-                <SvgIcon class="icon" size="24" name="jt2" />
			
 
				+  <div class="fileShare">
			
 
				+    <div class="file-title">{{ fileTitle }}</div>
			
 
				+    <div class="file-content">
			
 
				+      <div class="left-jt">
			
 
				+        <SvgIcon class="icon" size="24" name="jt2" />
			
 
				+      </div>
			
 
				+      <div class="right-jt">
			
 
				+        <SvgIcon class="icon" size="24" name="jt1" />
			
 
				+      </div>
			
 
				+      <div class="file-card">
			
 
				+        <div class="card-box" v-for="(item, index) in fileData" :key="index">
			
 
				+          <div class="box-t">{{ item.title }}</div>
			
 
				+          <div class="box-b">
			
 
				+            <div class="ite-box">
			
 
				+              <img :src="item.imgSrc" alt="" />
			
 
				+              <div class="content">
			
 
				+                <div class="content-label">{{ item.label }}</div>
			
 
				+                <div class="content-value">{{ item.value }}</div>
			
 
				+              </div>
			
 
				             </div>
			
 
				-            <div class="right-jt">
			
 
				-                <SvgIcon class="icon" size="24" name="jt1" />
			
 
				-            </div>
			
 
				-            <div class="file-card">
			
 
				-                <div class="card-box" v-for="(item, index) in fileData" :key="index">
			
 
				-                    <div class="box-t">{{ item.title }}</div>
			
 
				-                    <div class="box-b">
			
 
				-                        <div class="ite-box">
			
 
				-                            <img :src="item.imgSrc" alt="">
			
 
				-                            <div class="content">
			
 
				-                                <div class="content-label">{{ item.label }}</div>
			
 
				-                                <div class="content-value">{{ item.value }}</div>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="ite-box">
			
 
				-                            <img :src="item.imgSrc1" alt="">
			
 
				-                            <div class="content">
			
 
				-                                <div class="content-label1">{{ item.label1 }}</div>
			
 
				-                                <div class="content-value1">{{ item.value1 }}</div>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                    </div>
			
 
				-                </div>
			
 
				+            <div class="ite-box">
			
 
				+              <img :src="item.imgSrc1" alt="" />
			
 
				+              <div class="content">
			
 
				+                <div class="content-label1">{{ item.label1 }}</div>
			
 
				+                <div class="content-value1">{{ item.value1 }}</div>
			
 
				+              </div>
			
 
				             </div>
			
 
				+          </div>
			
 
				         </div>
			
 
				+      </div>
			
 
				     </div>
			
 
				+  </div>
			
 
				 </template>
			
 
				 <script lang="ts" setup>
			
 
				-import { ref, reactive } from 'vue'
			
 
				-import { SvgIcon } from '/@/components/Icon';
			
 
				-import { getAssetURL } from '/@/utils/ui';
			
 
				-
			
 
				-
			
 
				-let fileTitle = ref('文件共享中心')
			
 
				-
			
 
				-let fileData = reactive([
			
 
				-    { title: "大柳塔井", imgSrc: getAssetURL('company/file2.png'), imgSrc1: getAssetURL('company/file1.png'), label: '文件总数', label1: '待审批文件', value: 10, value1: 10 },
			
 
				-    { title: "大柳塔井", imgSrc: getAssetURL('company/file2.png'), imgSrc1: getAssetURL('company/file1.png'), label: '文件总数', label1: '待审批文件', value: 10, value1: 10 },
			
 
				-    { title: "大柳塔井", imgSrc: getAssetURL('company/file2.png'), imgSrc1: getAssetURL('company/file1.png'), label: '文件总数', label1: '待审批文件', value: 10, value1: 10 },
			
 
				-    { title: "大柳塔井", imgSrc: getAssetURL('company/file2.png'), imgSrc1: getAssetURL('company/file1.png'), label: '文件总数', label1: '待审批文件', value: 10, value1: 10 },
			
 
				-    { title: "大柳塔井", imgSrc: getAssetURL('company/file2.png'), imgSrc1: getAssetURL('company/file1.png'), label: '文件总数', label1: '待审批文件', value: 10, value1: 10 },
			
 
				-    { title: "大柳塔井", imgSrc: getAssetURL('company/file2.png'), imgSrc1: getAssetURL('company/file1.png'), label: '文件总数', label1: '待审批文件', value: 10, value1: 10 }
			
 
				-])
			
 
				-
			
 
				-
			
 
				+  import { ref, reactive } from 'vue';
			
 
				+  import { SvgIcon } from '/@/components/Icon';
			
 
				+  import { getAssetURL } from '/@/utils/ui';
			
 
				+
			
 
				+  let fileTitle = ref('文件共享中心');
			
 
				+  let fileData = reactive([
			
 
				+    {
			
 
				+      title: '大柳塔井',
			
 
				+      imgSrc: getAssetURL('company/file/file2.png'),
			
 
				+      imgSrc1: getAssetURL('company/file/file1.png'),
			
 
				+      label: '文件总数',
			
 
				+      label1: '待审批文件',
			
 
				+      value: 10,
			
 
				+      value1: 10,
			
 
				+    },
			
 
				+    {
			
 
				+      title: '大柳塔井',
			
 
				+      imgSrc: getAssetURL('company/file/file2.png'),
			
 
				+      imgSrc1: getAssetURL('company/file/file1.png'),
			
 
				+      label: '文件总数',
			
 
				+      label1: '待审批文件',
			
 
				+      value: 10,
			
 
				+      value1: 10,
			
 
				+    },
			
 
				+    {
			
 
				+      title: '大柳塔井',
			
 
				+      imgSrc: getAssetURL('company/file/file2.png'),
			
 
				+      imgSrc1: getAssetURL('company/file/file1.png'),
			
 
				+      label: '文件总数',
			
 
				+      label1: '待审批文件',
			
 
				+      value: 10,
			
 
				+      value1: 10,
			
 
				+    },
			
 
				+    {
			
 
				+      title: '大柳塔井',
			
 
				+      imgSrc: getAssetURL('company/file/file2.png'),
			
 
				+      imgSrc1: getAssetURL('company/file/file1.png'),
			
 
				+      label: '文件总数',
			
 
				+      label1: '待审批文件',
			
 
				+      value: 10,
			
 
				+      value1: 10,
			
 
				+    },
			
 
				+    {
			
 
				+      title: '大柳塔井',
			
 
				+      imgSrc: getAssetURL('company/file/file2.png'),
			
 
				+      imgSrc1: getAssetURL('company/file/file1.png'),
			
 
				+      label: '文件总数',
			
 
				+      label1: '待审批文件',
			
 
				+      value: 10,
			
 
				+      value1: 10,
			
 
				+    },
			
 
				+    {
			
 
				+      title: '大柳塔井',
			
 
				+      imgSrc: getAssetURL('company/file/file2.png'),
			
 
				+      imgSrc1: getAssetURL('company/file/file1.png'),
			
 
				+      label: '文件总数',
			
 
				+      label1: '待审批文件',
			
 
				+      value: 10,
			
 
				+      value1: 10,
			
 
				+    },
			
 
				+  ]);
			
 
				 </script>
			
 
				 <style lang="less" scoped>
			
 
				-@font-face {
			
 
				+  @font-face {
			
 
				     font-family: 'douyuFont';
			
 
				     src: url('../../../../assets/font/douyuFont.otf');
			
 
				-}
			
 
				+  }
			
 
				 
			
 
				-
			
 
				-.fileShare {
			
 
				+  .fileShare {
			
 
				     width: 100%;
			
 
				     height: 100%;
			
 
				     position: relative;
			
 
				 
			
 
				     .file-title {
			
 
				-        position: absolute;
			
 
				-        left: 54px;
			
 
				-        top: 12px;
			
 
				-        color: #fff;
			
 
				-        font-family: 'douyuFont';
			
 
				-        font-size: 14px;
			
 
				+      position: absolute;
			
 
				+      left: 54px;
			
 
				+      top: 12px;
			
 
				+      color: #fff;
			
 
				+      font-family: 'douyuFont';
			
 
				+      font-size: 14px;
			
 
				     }
			
 
				 
			
 
				     .file-content {
			
 
				-        position: relative;
			
 
				+      position: relative;
			
 
				+      height: 100%;
			
 
				+      padding: 57px 40px 23px 40px;
			
 
				+      box-sizing: border-box;
			
 
				+
			
 
				+      .left-jt {
			
 
				+        position: absolute;
			
 
				+        top: 50%;
			
 
				+        left: 18px;
			
 
				+        transform: translate(0, -50%);
			
 
				+      }
			
 
				+
			
 
				+      .right-jt {
			
 
				+        position: absolute;
			
 
				+        top: 50%;
			
 
				+        right: 18px;
			
 
				+        transform: translate(0, -50%);
			
 
				+      }
			
 
				+
			
 
				+      .file-card {
			
 
				         height: 100%;
			
 
				-        padding: 57px 40px 23px 40px;
			
 
				+        padding: 0px 30px;
			
 
				+        display: flex;
			
 
				+        justify-content: flex-start;
			
 
				+        align-items: flex-start;
			
 
				+        flex-wrap: wrap;
			
 
				         box-sizing: border-box;
			
 
				 
			
 
				-        .left-jt {
			
 
				+        .card-box {
			
 
				+          position: relative;
			
 
				+          width: 255px;
			
 
				+          height: 91px;
			
 
				+          background: url('../../../../../assets/images/company/file-card.png') no-repeat center;
			
 
				+          background-size: 100% 100%;
			
 
				+          .box-t {
			
 
				             position: absolute;
			
 
				-            top: 50%;
			
 
				-            left: 18px;
			
 
				-            transform: translate(0, -50%);
			
 
				-        }
			
 
				-
			
 
				-        .right-jt {
			
 
				+            left: 12px;
			
 
				+            top: 3px;
			
 
				+            font-family: 'douyuFont';
			
 
				+            font-size: 14px;
			
 
				+            color: #fff;
			
 
				+          }
			
 
				+          .box-b {
			
 
				             position: absolute;
			
 
				-            top: 50%;
			
 
				-            right: 18px;
			
 
				-            transform: translate(0, -50%);
			
 
				-        }
			
 
				-
			
 
				-        .file-card {
			
 
				-            height: 100%;
			
 
				-            padding: 0px 30px;
			
 
				+            left: 0;
			
 
				+            top: 24px;
			
 
				+            width: 100%;
			
 
				+            height: 66px;
			
 
				             display: flex;
			
 
				-            justify-content: flex-start;
			
 
				-            align-items: flex-start;
			
 
				-            flex-wrap: wrap;
			
 
				-            box-sizing: border-box;
			
 
				-
			
 
				-            .card-box {
			
 
				-                position: relative;
			
 
				-                width: 255px;
			
 
				-                height: 91px;
			
 
				-                background: url('../../../../../assets/images/company/file-card.png') no-repeat center;
			
 
				-                background-size: 100% 100%;
			
 
				-                .box-t{
			
 
				-                    position: absolute;
			
 
				-                    left: 12px;
			
 
				-                    top: 3px;
			
 
				-                    font-family: 'douyuFont';
			
 
				-                    font-size: 14px;
			
 
				-                    color: #fff;
			
 
				+            justify-content: space-between;
			
 
				+            .ite-box {
			
 
				+              display: flex;
			
 
				+              flex: 1;
			
 
				+              justify-content: center;
			
 
				+              align-items: center;
			
 
				+              height: 100%;
			
 
				+
			
 
				+              .content {
			
 
				+                display: flex;
			
 
				+                flex-direction: column;
			
 
				+                justify-content: space-around;
			
 
				+                align-items: center;
			
 
				+                .content-label {
			
 
				+                  padding-left: 5px;
			
 
				+                  font-size: 12px;
			
 
				+                  color: #fff;
			
 
				+                  background: linear-gradient(to right, rgba(3, 52, 105, 1), rgba(3, 52, 105, 0.4), transparent);
			
 
				                 }
			
 
				-                .box-b{
			
 
				-                    position: absolute;
			
 
				-                    left: 0;
			
 
				-                    top: 24px;
			
 
				-                    width: 100%;
			
 
				-                    height: 66px;
			
 
				-                    display: flex;
			
 
				-                    justify-content: space-between;
			
 
				-                    .ite-box{
			
 
				-                        display: flex;
			
 
				-                        flex: 1;
			
 
				-                        justify-content: center;
			
 
				-                        align-items: center;
			
 
				-                        height: 100%;
			
 
				-
			
 
				-                        .content{
			
 
				-                            display: flex;
			
 
				-                            flex-direction: column;
			
 
				-                            justify-content: space-around;
			
 
				-                            align-items: center;
			
 
				-                            .content-label{
			
 
				-                                padding-left: 5px;
			
 
				-                                font-size: 12px;
			
 
				-                                color: #fff;
			
 
				-                                background: linear-gradient(to right, rgba(3, 52, 105,1),rgba(3, 52, 105,.4),transparent);
			
 
				-                            }
			
 
				-                            .content-value{
			
 
				-                                font-size: 16px;
			
 
				-                                color: #64caff;
			
 
				-                            }
			
 
				-                            .content-label1{
			
 
				-                                padding-left: 5px;
			
 
				-                                font-size: 12px;
			
 
				-                                color: #fff;
			
 
				-                                background: linear-gradient(to right, rgba(3, 73, 104,1),rgba(3, 73, 104,.4),transparent);
			
 
				-                            }
			
 
				-                            .content-value1{
			
 
				-                                font-size: 16px;
			
 
				-                                color: #3df6ff;
			
 
				-                            }
			
 
				-
			
 
				-                        }
			
 
				-                    }
			
 
				-
			
 
				+                .content-value {
			
 
				+                  font-size: 16px;
			
 
				+                  color: #64caff;
			
 
				                 }
			
 
				-
			
 
				-                &:nth-child(1) {
			
 
				-                    margin-bottom: 10px;
			
 
				+                .content-label1 {
			
 
				+                  padding-left: 5px;
			
 
				+                  font-size: 12px;
			
 
				+                  color: #fff;
			
 
				+                  background: linear-gradient(to right, rgba(3, 73, 104, 1), rgba(3, 73, 104, 0.4), transparent);
			
 
				                 }
			
 
				-
			
 
				-                &:nth-child(2) {
			
 
				-                    margin: 0px 39px 10px 39px;
			
 
				+                .content-value1 {
			
 
				+                  font-size: 16px;
			
 
				+                  color: #3df6ff;
			
 
				                 }
			
 
				+              }
			
 
				+            }
			
 
				+          }
			
 
				 
			
 
				-                &:nth-child(3) {
			
 
				-                    margin-bottom: 10px;
			
 
				-                }
			
 
				+          &:nth-child(1) {
			
 
				+            margin-bottom: 10px;
			
 
				+          }
			
 
				 
			
 
				-                &:nth-child(5) {
			
 
				-                    margin: 0px 39px;
			
 
				-                }
			
 
				-            }
			
 
				-        }
			
 
				-    }
			
 
				+          &:nth-child(2) {
			
 
				+            margin: 0px 39px 10px 39px;
			
 
				+          }
			
 
				 
			
 
				+          &:nth-child(3) {
			
 
				+            margin-bottom: 10px;
			
 
				+          }
			
 
				 
			
 
				-}
			
 
				+          &:nth-child(5) {
			
 
				+            margin: 0px 39px;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				 </style>
			
 
				-  
			
--- a/src/views/vent/home/clique/components/icon-light.vue
+++ b/src/views/vent/home/clique/components/icon-light.vue
@@ -1,58 +1,58 @@
 
				 <template>
			
 
				-    <div class="icon-light">
			
 
				-        <div class="icon-point" v-for="(item, index) in pointList" :key="index"
			
 
				-            :style="{ left: item.leftV, top: item.topV }">
			
 
				-            <img :src="item.imgSrc" alt="">
			
 
				-            <span :style="{ color: item.textColor }">{{ item.label }}</span>
			
 
				-        </div>
			
 
				+  <div class="icon-light">
			
 
				+    <div class="icon-point" v-for="(item, index) in pointList" :key="index" :style="{ left: item.leftV, top: item.topV }">
			
 
				+      <img :src="item.imgSrc" alt="" />
			
 
				+      <span :style="{ color: item.textColor }">{{ item.label }}</span>
			
 
				     </div>
			
 
				+  </div>
			
 
				 </template>
			
 
				 
			
 
				 <script setup lang="ts">
			
 
				-import { ref, reactive } from 'vue'
			
 
				-import { getAssetURL } from '/@/utils/ui';
			
 
				-
			
 
				-let pointList = reactive<any[]>([
			
 
				-    { imgSrc: getAssetURL('company/unselect-bg.png'), label: '柳塔矿', leftV: '327px', topV: '40px', textColor: '#fff' },
			
 
				-    { imgSrc: getAssetURL('company/unselect-bg.png'), label: '寸草塔二矿', leftV: '291px', topV: '69px', textColor: '#fff' },
			
 
				-    { imgSrc: getAssetURL('company/select-bg.png'), label: '布尔台矿', leftV: '286px', topV: '97px', textColor: 'rgba(255, 231, 83,.9)' },
			
 
				-    { imgSrc: getAssetURL('company/unselect-bg.png'), label: '乌兰木伦矿', leftV: '327px', topV: '115px', textColor: '#fff' },
			
 
				-    { imgSrc: getAssetURL('company/select-bg.png'), label: '寸草塔矿', leftV: '346px', topV: '132px', textColor: 'rgba(255, 231, 83,.9)' },
			
 
				-    { imgSrc: getAssetURL('company/unselect-bg.png'), label: '石坎台矿', leftV: '373px', topV: '149px', textColor: '#fff' },
			
 
				-    { imgSrc: getAssetURL('company/select-bg.png'), label: '补连塔矿', leftV: '408px', topV: '184px', textColor: 'rgba(255, 231, 83,.9)' },
			
 
				-    { imgSrc: getAssetURL('company/unselect-bg.png'), label: '哈拉沟矿', leftV: '445px', topV: '214px', textColor: '#fff' },
			
 
				-    { imgSrc: getAssetURL('company/select-bg.png'), label: '上湾矿', leftV: '439px', topV: '244px', textColor: 'rgba(255, 231, 83,.9)' },
			
 
				-    { imgSrc: getAssetURL('company/unselect-bg.png'), label: '活鸡兔井', leftV: '398px', topV: '265px', textColor: '#fff' },
			
 
				-    { imgSrc: getAssetURL('company/unselect-bg.png'), label: '大柳塔矿', leftV: '492px', topV: '260px', textColor: '#fff' },
			
 
				-    { imgSrc: getAssetURL('company/select-bg.png'), label: '锦界矿', leftV: '565px', topV: '413px', textColor: 'rgba(255, 231, 83,.9)' },
			
 
				-    { imgSrc: getAssetURL('company/unselect-bg.png'), label: '榆家梁矿', leftV: '669px', topV: '308px', textColor: '#fff' },
			
 
				-    { imgSrc: getAssetURL('company/select-bg.png'), label: '宝德矿', leftV: '862px', topV: '340px', textColor: 'rgba(255, 231, 83,.9)' },
			
 
				-])
			
 
				-
			
 
				+  import { ref, reactive } from 'vue';
			
 
				+  import { getAssetURL } from '/@/utils/ui';
			
 
				+  // const modules = await import.meta.glob('/src/assets/images/company/home/*', { eager: true });
			
 
				+  const unselectBgPath = getAssetURL('company/home/unselect-bg.png');
			
 
				+  const selectBgPath = getAssetURL('company/home/select-bg.png');
			
 
				+  let pointList = ref<any[]>([
			
 
				+    { imgSrc: unselectBgPath, label: '柳塔矿', leftV: '327px', topV: '40px', textColor: '#fff' },
			
 
				+    { imgSrc: unselectBgPath, label: '寸草塔二矿', leftV: '291px', topV: '69px', textColor: '#fff' },
			
 
				+    { imgSrc: selectBgPath, label: '布尔台矿', leftV: '286px', topV: '97px', textColor: 'rgba(255, 231, 83,.9)' },
			
 
				+    { imgSrc: unselectBgPath, label: '乌兰木伦矿', leftV: '327px', topV: '115px', textColor: '#fff' },
			
 
				+    { imgSrc: selectBgPath, label: '寸草塔矿', leftV: '346px', topV: '132px', textColor: 'rgba(255, 231, 83,.9)' },
			
 
				+    { imgSrc: unselectBgPath, label: '石坎台矿', leftV: '373px', topV: '149px', textColor: '#fff' },
			
 
				+    { imgSrc: selectBgPath, label: '补连塔矿', leftV: '408px', topV: '184px', textColor: 'rgba(255, 231, 83,.9)' },
			
 
				+    { imgSrc: unselectBgPath, label: '哈拉沟矿', leftV: '445px', topV: '214px', textColor: '#fff' },
			
 
				+    { imgSrc: selectBgPath, label: '上湾矿', leftV: '439px', topV: '244px', textColor: 'rgba(255, 231, 83,.9)' },
			
 
				+    { imgSrc: unselectBgPath, label: '活鸡兔井', leftV: '398px', topV: '265px', textColor: '#fff' },
			
 
				+    { imgSrc: unselectBgPath, label: '大柳塔矿', leftV: '492px', topV: '260px', textColor: '#fff' },
			
 
				+    { imgSrc: selectBgPath, label: '锦界矿', leftV: '565px', topV: '413px', textColor: 'rgba(255, 231, 83,.9)' },
			
 
				+    { imgSrc: unselectBgPath, label: '榆家梁矿', leftV: '669px', topV: '308px', textColor: '#fff' },
			
 
				+    { imgSrc: selectBgPath, label: '宝德矿', leftV: '862px', topV: '340px', textColor: 'rgba(255, 231, 83,.9)' },
			
 
				+  ]);
			
 
				 </script>
			
 
				 
			
 
				 <style lang="less" scoped>
			
 
				-.icon-light {
			
 
				+  .icon-light {
			
 
				     position: relative;
			
 
				     width: 100%;
			
 
				     height: 100%;
			
 
				 
			
 
				     .icon-point {
			
 
				-        display: flex;
			
 
				-        align-items: center;
			
 
				-        position: absolute;
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      position: absolute;
			
 
				 
			
 
				-        img {
			
 
				-            width: 35px;
			
 
				-            height: 35px;
			
 
				-            cursor: pointer;
			
 
				-        }
			
 
				+      img {
			
 
				+        width: 35px;
			
 
				+        height: 35px;
			
 
				+        cursor: pointer;
			
 
				+      }
			
 
				 
			
 
				-        span {
			
 
				-            font-size: 12px;
			
 
				-            padding: 0px 5px;
			
 
				-            background-color: rgba(12, 13, 13);
			
 
				-        }
			
 
				+      span {
			
 
				+        font-size: 12px;
			
 
				+        padding: 0px 5px;
			
 
				+        background-color: rgba(12, 13, 13);
			
 
				+      }
			
 
				     }
			
 
				-}
			
 
				-</style>
			
 
				+  }
			
 
				+</style>
			
--- a/src/views/vent/home/clique/components/wind-road.vue
+++ b/src/views/vent/home/clique/components/wind-road.vue
@@ -1,377 +1,454 @@
 
				 <template>
			
 
				-    <div class="windRoad">
			
 
				-        <div class="road-title">{{ roadTitle }}</div>
			
 
				-        <div class="road-content">
			
 
				-            <div class="left-jt">
			
 
				-                <SvgIcon class="icon" size="24" name="jt2" />
			
 
				-            </div>
			
 
				-            <div class="right-jt">
			
 
				-                <SvgIcon class="icon" size="24" name="jt1" />
			
 
				-            </div>
			
 
				-            <div class="road-card">
			
 
				-                <div class="head-nav">
			
 
				-                    <span>{{ roadData.label }} : </span>
			
 
				-                    <span>{{ roadData.value }}</span>
			
 
				-                </div>
			
 
				-                <div class="echart-box">
			
 
				-                    <div ref="road" class="road"></div>
			
 
				-                </div>
			
 
				-            </div>
			
 
				-
			
 
				+  <div class="windRoad">
			
 
				+    <div class="road-title">{{ roadTitle }}</div>
			
 
				+    <div class="road-content">
			
 
				+      <div class="left-jt">
			
 
				+        <SvgIcon class="icon" size="24" name="jt2" />
			
 
				+      </div>
			
 
				+      <div class="right-jt">
			
 
				+        <SvgIcon class="icon" size="24" name="jt1" />
			
 
				+      </div>
			
 
				+      <div class="road-card">
			
 
				+        <div class="head-nav">
			
 
				+          <span>{{ roadData.label }} : </span>
			
 
				+          <span>{{ roadData.value }}</span>
			
 
				+        </div>
			
 
				+        <div class="echart-box">
			
 
				+          <div ref="road" class="road"></div>
			
 
				         </div>
			
 
				+      </div>
			
 
				     </div>
			
 
				+  </div>
			
 
				 </template>
			
 
				 <script lang="ts" setup>
			
 
				-import { ref, reactive, nextTick, onMounted } from 'vue'
			
 
				-import { SvgIcon } from '/@/components/Icon';
			
 
				-import { getAssetURL } from '/@/utils/ui';
			
 
				-import * as echarts from 'echarts';
			
 
				-
			
 
				+  import { ref, reactive, nextTick, onMounted } from 'vue';
			
 
				+  import { SvgIcon } from '/@/components/Icon';
			
 
				+  import * as echarts from 'echarts';
			
 
				 
			
 
				-let roadTitle = ref('通风巷道长度统计')
			
 
				-let road = ref()//获取Dom节点
			
 
				-let roadData = reactive({
			
 
				+  let roadTitle = ref('通风巷道长度统计');
			
 
				+  let road = ref(); //获取Dom节点
			
 
				+  let roadData = reactive({
			
 
				     label: '通风巷道总长度',
			
 
				-    value: '1737公里'
			
 
				-})
			
 
				+    value: '1737公里',
			
 
				+  });
			
 
				 
			
 
				-let xData = reactive(["宝德", "榆家梁", "锦界", "大柳塔", "哈拉沟"]);
			
 
				-var yData = reactive([200, 100, 200, 200, 100]);
			
 
				-var maxData = reactive([300, 200, 300, 300, 200])
			
 
				+  let xData = reactive(['宝德', '榆家梁', '锦界', '大柳塔', '哈拉沟']);
			
 
				+  var yData = reactive([200, 100, 200, 200, 100]);
			
 
				+  var maxData = reactive([300, 200, 300, 300, 200]);
			
 
				 
			
 
				-function getOption() {
			
 
				+  function getOption() {
			
 
				     nextTick(() => {
			
 
				-        const myChart = echarts.init(road.value);
			
 
				-        let option = {
			
 
				-            grid: {
			
 
				-                top: '14%',
			
 
				-                left: '2%',
			
 
				-                bottom: '4%',
			
 
				-                right: '2%',
			
 
				-                containLabel: true,
			
 
				+      const myChart = echarts.init(road.value);
			
 
				+      let option = {
			
 
				+        grid: {
			
 
				+          top: '14%',
			
 
				+          left: '2%',
			
 
				+          bottom: '4%',
			
 
				+          right: '2%',
			
 
				+          containLabel: true,
			
 
				+        },
			
 
				+        xAxis: {
			
 
				+          data: xData,
			
 
				+          axisTick: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+
			
 
				+          axisLine: {
			
 
				+            lineStyle: {
			
 
				+              color: 'rgba(187, 187, 187,.2)',
			
 
				+              type: 'dashed',
			
 
				             },
			
 
				-            xAxis: {
			
 
				-                data: xData,
			
 
				-                axisTick: {
			
 
				-                    show: false
			
 
				-                },
			
 
				-
			
 
				-                axisLine: {
			
 
				-                    lineStyle: {
			
 
				-                        color: 'rgba(187, 187, 187,.2)',
			
 
				-                        type: 'dashed',
			
 
				-                    },
			
 
				-                },
			
 
				-                splitLine: {
			
 
				-                    show: false,
			
 
				-                },
			
 
				-                axisLabel: {
			
 
				-                    interval: 0,
			
 
				-                    textStyle: {
			
 
				-                        color: '#fff',
			
 
				-                        fontSize: 14,
			
 
				-                    },
			
 
				-                    margin: 20, //刻度标签与轴线之间的距离。
			
 
				-                },
			
 
				-
			
 
				+          },
			
 
				+          splitLine: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          axisLabel: {
			
 
				+            interval: 0,
			
 
				+            textStyle: {
			
 
				+              color: '#fff',
			
 
				+              fontSize: 14,
			
 
				             },
			
 
				-
			
 
				-            yAxis: {
			
 
				-                max: 300,
			
 
				-                name: '长度(km)',
			
 
				-                nameTextStyle: {
			
 
				-                    color: '#3df6ff',
			
 
				-                    fontSize: 12,
			
 
				-                    lineHeight: 20,
			
 
				-                },
			
 
				-                splitLine: {
			
 
				-                    lineStyle: {
			
 
				-                        color: 'rgba(187, 187, 187,.2)',
			
 
				-                        type: 'dashed',
			
 
				-                    },
			
 
				-                },
			
 
				-                axisTick: {
			
 
				-                    show: false
			
 
				-                },
			
 
				-                axisLine: {
			
 
				-                    show: false,
			
 
				-                },
			
 
				-                axisLabel: {
			
 
				-                    textStyle: {
			
 
				-                        color: '#fff',
			
 
				-                        fontSize: 14,
			
 
				-                    },
			
 
				+            margin: 20, //刻度标签与轴线之间的距离。
			
 
				+          },
			
 
				+        },
			
 
				+
			
 
				+        yAxis: {
			
 
				+          max: 300,
			
 
				+          name: '长度(km)',
			
 
				+          nameTextStyle: {
			
 
				+            color: '#3df6ff',
			
 
				+            fontSize: 12,
			
 
				+            lineHeight: 20,
			
 
				+          },
			
 
				+          splitLine: {
			
 
				+            lineStyle: {
			
 
				+              color: 'rgba(187, 187, 187,.2)',
			
 
				+              type: 'dashed',
			
 
				+            },
			
 
				+          },
			
 
				+          axisTick: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          axisLine: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          axisLabel: {
			
 
				+            textStyle: {
			
 
				+              color: '#fff',
			
 
				+              fontSize: 14,
			
 
				+            },
			
 
				+          },
			
 
				+        },
			
 
				+
			
 
				+        series: [
			
 
				+          {
			
 
				+            //三个最低下的圆片
			
 
				+            name: '',
			
 
				+            type: 'pictorialBar',
			
 
				+            symbolSize: [30, 10],
			
 
				+            symbolOffset: [0, 7],
			
 
				+            z: 12,
			
 
				+            itemStyle: {
			
 
				+              opacity: 1,
			
 
				+              color: function (params) {
			
 
				+                var a = params.name.slice(0, 2);
			
 
				+                if (a === '宝德') {
			
 
				+                  return new echarts.graphic.LinearGradient(
			
 
				+                    0,
			
 
				+                    0,
			
 
				+                    0,
			
 
				+                    1,
			
 
				+                    [
			
 
				+                      {
			
 
				+                        offset: 0,
			
 
				+                        color: '#FF9A22', // 0% 处的颜色
			
 
				+                      },
			
 
				+                      {
			
 
				+                        offset: 1,
			
 
				+                        color: '#FFD56E', // 100% 处的颜色
			
 
				+                      },
			
 
				+                    ],
			
 
				+                    false
			
 
				+                  );
			
 
				+                } else if (a === '榆家' || a == '大柳') {
			
 
				+                  return new echarts.graphic.LinearGradient(
			
 
				+                    0,
			
 
				+                    0,
			
 
				+                    0,
			
 
				+                    1,
			
 
				+                    [
			
 
				+                      {
			
 
				+                        offset: 0,
			
 
				+                        color: '#00EC28', // 0% 处的颜色
			
 
				+                      },
			
 
				+                      {
			
 
				+                        offset: 1,
			
 
				+                        color: '#5DF076', // 100% 处的颜色
			
 
				+                      },
			
 
				+                    ],
			
 
				+                    false
			
 
				+                  );
			
 
				+                } else if (a === '锦界' || a == '哈拉') {
			
 
				+                  return new echarts.graphic.LinearGradient(
			
 
				+                    0,
			
 
				+                    0,
			
 
				+                    0,
			
 
				+                    1,
			
 
				+                    [
			
 
				+                      {
			
 
				+                        offset: 0,
			
 
				+                        color: '#12B9DB', // 0% 处的颜色
			
 
				+                      },
			
 
				+                      {
			
 
				+                        offset: 1,
			
 
				+                        color: '#6F8EF2', // 100% 处的颜色
			
 
				+                      },
			
 
				+                    ],
			
 
				+                    false
			
 
				+                  );
			
 
				                 }
			
 
				+              },
			
 
				             },
			
 
				-
			
 
				-            series: [
			
 
				-                {//三个最低下的圆片
			
 
				-                    "name": "",
			
 
				-                    "type": "pictorialBar",
			
 
				-                    "symbolSize": [30, 10],
			
 
				-                    "symbolOffset": [0, 7],
			
 
				-                    "z": 12,
			
 
				-                    itemStyle: {
			
 
				-                        opacity: 1,
			
 
				-                        color: function (params) {
			
 
				-                            var a = params.name.slice(0, 2);
			
 
				-                            if (a === '宝德') {
			
 
				-                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			
 
				-                                    offset: 0,
			
 
				-                                    color: '#FF9A22' // 0% 处的颜色
			
 
				-                                }, {
			
 
				-                                    offset: 1,
			
 
				-                                    color: '#FFD56E'// 100% 处的颜色
			
 
				-                                }], false)
			
 
				-                            } else if (a === '榆家' || a == '大柳') {
			
 
				-                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			
 
				-                                    offset: 0,
			
 
				-                                    color: '#00EC28' // 0% 处的颜色
			
 
				-                                }, {
			
 
				-                                    offset: 1,
			
 
				-                                    color: '#5DF076'// 100% 处的颜色
			
 
				-                                }], false)
			
 
				-                            } else if (a === '锦界' || a == '哈拉') {
			
 
				-                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			
 
				-                                    offset: 0,
			
 
				-                                    color: '#12B9DB' // 0% 处的颜色
			
 
				-                                }, {
			
 
				-                                    offset: 1,
			
 
				-                                    color: '#6F8EF2'// 100% 处的颜色
			
 
				-                                }], false)
			
 
				-                            }
			
 
				-                        }
			
 
				-                    },
			
 
				-                    "data": [1, 1, 1, 1, 1]
			
 
				-
			
 
				-                },
			
 
				-
			
 
				-
			
 
				-                //下半截柱状图
			
 
				-                {
			
 
				-                    name: '2020',
			
 
				-                    type: 'bar',
			
 
				-                    barWidth: 30,
			
 
				-                    barGap: '-100%',
			
 
				-                    itemStyle: {//lenged文本
			
 
				-                        opacity: .7,
			
 
				-                        color: function (params) {
			
 
				-                            var a = params.name.slice(0, 2);
			
 
				-                            if (a === '宝德') {
			
 
				-                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			
 
				-                                    offset: 0,
			
 
				-                                    color: '#FF9A22' // 0% 处的颜色
			
 
				-                                }, {
			
 
				-                                    offset: 1,
			
 
				-                                    color: '#FFD56E'// 100% 处的颜色
			
 
				-                                }], false)
			
 
				-                            } else if (a === '榆家' || a == '大柳') {
			
 
				-                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			
 
				-                                    offset: 0,
			
 
				-                                    color: '#00EC28' // 0% 处的颜色
			
 
				-                                }, {
			
 
				-                                    offset: 1,
			
 
				-                                    color: '#5DF076'// 100% 处的颜色
			
 
				-                                }], false)
			
 
				-                            } else if (a === '锦界' || a == '哈拉') {
			
 
				-                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			
 
				-                                    offset: 0,
			
 
				-                                    color: '#12B9DB' // 0% 处的颜色
			
 
				-                                }, {
			
 
				-                                    offset: 1,
			
 
				-                                    color: '#6F8EF2'// 100% 处的颜色
			
 
				-                                }], false)
			
 
				-                            }
			
 
				-                        }
			
 
				-                    },
			
 
				-                    data: yData
			
 
				-                },
			
 
				-
			
 
				-                { // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
			
 
				-                    type: 'bar',
			
 
				-                    barWidth: 30,
			
 
				-                    barGap: '-100%',
			
 
				-                    stack: '广告',
			
 
				-                    itemStyle: {
			
 
				-                        color: 'transparent'
			
 
				-                    },
			
 
				-                    data: maxData
			
 
				-                },
			
 
				-
			
 
				-                {
			
 
				-                    "name": "", //头部
			
 
				-                    "type": "pictorialBar",
			
 
				-                    "symbolSize": [30, 10],
			
 
				-                    "symbolOffset": [0, -7],
			
 
				-                    "z": 12,
			
 
				-                    "symbolPosition": "end",
			
 
				-                    itemStyle: {
			
 
				-                        color: '#163F7A',
			
 
				-                        opacity: 1,
			
 
				-                    },
			
 
				-                    "data": maxData
			
 
				-                },
			
 
				-
			
 
				-                {
			
 
				-                    "name": "",
			
 
				-                    "type": "pictorialBar",
			
 
				-                    "symbolSize": [30, 10],
			
 
				-                    "symbolOffset": [0, -7],
			
 
				-                    "z": 12,
			
 
				-                    itemStyle: {
			
 
				-                        opacity: 1,
			
 
				-                        color: function (params) {
			
 
				-                            var a = params.name.slice(0, 2);
			
 
				-                            if (a === '宝德') {
			
 
				-                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			
 
				-                                    offset: 0,
			
 
				-                                    color: '#FF9A22' // 0% 处的颜色
			
 
				-                                }, {
			
 
				-                                    offset: 1,
			
 
				-                                    color: '#FFD56E'// 100% 处的颜色
			
 
				-                                }], false)
			
 
				-                            } else if (a === '榆家' || a == '大柳') {
			
 
				-                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			
 
				-                                    offset: 0,
			
 
				-                                    color: '#00EC28' // 0% 处的颜色
			
 
				-                                }, {
			
 
				-                                    offset: 1,
			
 
				-                                    color: '#5DF076'// 100% 处的颜色
			
 
				-                                }], false)
			
 
				-                            } else if (a === '锦界' || a == '哈拉') {
			
 
				-                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			
 
				-                                    offset: 0,
			
 
				-                                    color: '#12B9DB' // 0% 处的颜色
			
 
				-                                }, {
			
 
				-                                    offset: 1,
			
 
				-                                    color: '#6F8EF2'// 100% 处的颜色
			
 
				-                                }], false)
			
 
				-                            }
			
 
				-                        }
			
 
				-                    },
			
 
				-                    "symbolPosition": "end",
			
 
				-
			
 
				-                    label: {
			
 
				-                        normal: {
			
 
				-                            show: true,
			
 
				-                            position: 'top',
			
 
				-                            fontSize: 12,
			
 
				-                            // fontWeight: 'bold',
			
 
				-                            color: '#fff',
			
 
				-                        },
			
 
				-                    },
			
 
				-                    "data": yData
			
 
				-                },
			
 
				-
			
 
				-                {
			
 
				-                    name: '2019',
			
 
				-                    type: 'bar',
			
 
				-                    barWidth: 30,
			
 
				-                    barGap: '-100%',
			
 
				-                    z: 0,
			
 
				-                    itemStyle: {
			
 
				-                        color: '#163F7A',
			
 
				-                        opacity: .7,
			
 
				-                    },
			
 
				-
			
 
				-                    data: maxData
			
 
				+            data: [1, 1, 1, 1, 1],
			
 
				+          },
			
 
				+
			
 
				+          //下半截柱状图
			
 
				+          {
			
 
				+            name: '2020',
			
 
				+            type: 'bar',
			
 
				+            barWidth: 30,
			
 
				+            barGap: '-100%',
			
 
				+            itemStyle: {
			
 
				+              //lenged文本
			
 
				+              opacity: 0.7,
			
 
				+              color: function (params) {
			
 
				+                var a = params.name.slice(0, 2);
			
 
				+                if (a === '宝德') {
			
 
				+                  return new echarts.graphic.LinearGradient(
			
 
				+                    0,
			
 
				+                    0,
			
 
				+                    0,
			
 
				+                    1,
			
 
				+                    [
			
 
				+                      {
			
 
				+                        offset: 0,
			
 
				+                        color: '#FF9A22', // 0% 处的颜色
			
 
				+                      },
			
 
				+                      {
			
 
				+                        offset: 1,
			
 
				+                        color: '#FFD56E', // 100% 处的颜色
			
 
				+                      },
			
 
				+                    ],
			
 
				+                    false
			
 
				+                  );
			
 
				+                } else if (a === '榆家' || a == '大柳') {
			
 
				+                  return new echarts.graphic.LinearGradient(
			
 
				+                    0,
			
 
				+                    0,
			
 
				+                    0,
			
 
				+                    1,
			
 
				+                    [
			
 
				+                      {
			
 
				+                        offset: 0,
			
 
				+                        color: '#00EC28', // 0% 处的颜色
			
 
				+                      },
			
 
				+                      {
			
 
				+                        offset: 1,
			
 
				+                        color: '#5DF076', // 100% 处的颜色
			
 
				+                      },
			
 
				+                    ],
			
 
				+                    false
			
 
				+                  );
			
 
				+                } else if (a === '锦界' || a == '哈拉') {
			
 
				+                  return new echarts.graphic.LinearGradient(
			
 
				+                    0,
			
 
				+                    0,
			
 
				+                    0,
			
 
				+                    1,
			
 
				+                    [
			
 
				+                      {
			
 
				+                        offset: 0,
			
 
				+                        color: '#12B9DB', // 0% 处的颜色
			
 
				+                      },
			
 
				+                      {
			
 
				+                        offset: 1,
			
 
				+                        color: '#6F8EF2', // 100% 处的颜色
			
 
				+                      },
			
 
				+                    ],
			
 
				+                    false
			
 
				+                  );
			
 
				                 }
			
 
				+              },
			
 
				+            },
			
 
				+            data: yData,
			
 
				+          },
			
 
				+
			
 
				+          {
			
 
				+            // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
			
 
				+            type: 'bar',
			
 
				+            barWidth: 30,
			
 
				+            barGap: '-100%',
			
 
				+            stack: '广告',
			
 
				+            itemStyle: {
			
 
				+              color: 'transparent',
			
 
				+            },
			
 
				+            data: maxData,
			
 
				+          },
			
 
				+
			
 
				+          {
			
 
				+            name: '', //头部
			
 
				+            type: 'pictorialBar',
			
 
				+            symbolSize: [30, 10],
			
 
				+            symbolOffset: [0, -7],
			
 
				+            z: 12,
			
 
				+            symbolPosition: 'end',
			
 
				+            itemStyle: {
			
 
				+              color: '#163F7A',
			
 
				+              opacity: 1,
			
 
				+            },
			
 
				+            data: maxData,
			
 
				+          },
			
 
				+
			
 
				+          {
			
 
				+            name: '',
			
 
				+            type: 'pictorialBar',
			
 
				+            symbolSize: [30, 10],
			
 
				+            symbolOffset: [0, -7],
			
 
				+            z: 12,
			
 
				+            itemStyle: {
			
 
				+              opacity: 1,
			
 
				+              color: function (params) {
			
 
				+                var a = params.name.slice(0, 2);
			
 
				+                if (a === '宝德') {
			
 
				+                  return new echarts.graphic.LinearGradient(
			
 
				+                    0,
			
 
				+                    0,
			
 
				+                    0,
			
 
				+                    1,
			
 
				+                    [
			
 
				+                      {
			
 
				+                        offset: 0,
			
 
				+                        color: '#FF9A22', // 0% 处的颜色
			
 
				+                      },
			
 
				+                      {
			
 
				+                        offset: 1,
			
 
				+                        color: '#FFD56E', // 100% 处的颜色
			
 
				+                      },
			
 
				+                    ],
			
 
				+                    false
			
 
				+                  );
			
 
				+                } else if (a === '榆家' || a == '大柳') {
			
 
				+                  return new echarts.graphic.LinearGradient(
			
 
				+                    0,
			
 
				+                    0,
			
 
				+                    0,
			
 
				+                    1,
			
 
				+                    [
			
 
				+                      {
			
 
				+                        offset: 0,
			
 
				+                        color: '#00EC28', // 0% 处的颜色
			
 
				+                      },
			
 
				+                      {
			
 
				+                        offset: 1,
			
 
				+                        color: '#5DF076', // 100% 处的颜色
			
 
				+                      },
			
 
				+                    ],
			
 
				+                    false
			
 
				+                  );
			
 
				+                } else if (a === '锦界' || a == '哈拉') {
			
 
				+                  return new echarts.graphic.LinearGradient(
			
 
				+                    0,
			
 
				+                    0,
			
 
				+                    0,
			
 
				+                    1,
			
 
				+                    [
			
 
				+                      {
			
 
				+                        offset: 0,
			
 
				+                        color: '#12B9DB', // 0% 处的颜色
			
 
				+                      },
			
 
				+                      {
			
 
				+                        offset: 1,
			
 
				+                        color: '#6F8EF2', // 100% 处的颜色
			
 
				+                      },
			
 
				+                    ],
			
 
				+                    false
			
 
				+                  );
			
 
				+                }
			
 
				+              },
			
 
				+            },
			
 
				+            symbolPosition: 'end',
			
 
				+
			
 
				+            label: {
			
 
				+              normal: {
			
 
				+                show: true,
			
 
				+                position: 'top',
			
 
				+                fontSize: 12,
			
 
				+                // fontWeight: 'bold',
			
 
				+                color: '#fff',
			
 
				+              },
			
 
				+            },
			
 
				+            data: yData,
			
 
				+          },
			
 
				+
			
 
				+          {
			
 
				+            name: '2019',
			
 
				+            type: 'bar',
			
 
				+            barWidth: 30,
			
 
				+            barGap: '-100%',
			
 
				+            z: 0,
			
 
				+            itemStyle: {
			
 
				+              color: '#163F7A',
			
 
				+              opacity: 0.7,
			
 
				+            },
			
 
				 
			
 
				-
			
 
				-            ]
			
 
				-        };
			
 
				-        myChart.setOption(option);
			
 
				-        window.onresize = function () {
			
 
				-            myChart.resize();
			
 
				-        };
			
 
				+            data: maxData,
			
 
				+          },
			
 
				+        ],
			
 
				+      };
			
 
				+      myChart.setOption(option);
			
 
				+      window.onresize = function () {
			
 
				+        myChart.resize();
			
 
				+      };
			
 
				     });
			
 
				-}
			
 
				-
			
 
				-onMounted(() => {
			
 
				-    getOption()
			
 
				-})
			
 
				-
			
 
				+  }
			
 
				 
			
 
				+  onMounted(() => {
			
 
				+    getOption();
			
 
				+  });
			
 
				 </script>
			
 
				 <style lang="less" scoped>
			
 
				-@font-face {
			
 
				+  @font-face {
			
 
				     font-family: 'douyuFont';
			
 
				     src: url('../../../../assets/font/douyuFont.otf');
			
 
				-}
			
 
				-
			
 
				+  }
			
 
				 
			
 
				-.windRoad {
			
 
				+  .windRoad {
			
 
				     width: 100%;
			
 
				     height: 100%;
			
 
				     position: relative;
			
 
				 
			
 
				     .road-title {
			
 
				-        position: absolute;
			
 
				-        left: 50px;
			
 
				-        top: 10px;
			
 
				-        color: #fff;
			
 
				-        font-family: 'douyuFont';
			
 
				-        font-size: 14px;
			
 
				+      position: absolute;
			
 
				+      left: 50px;
			
 
				+      top: 10px;
			
 
				+      color: #fff;
			
 
				+      font-family: 'douyuFont';
			
 
				+      font-size: 14px;
			
 
				     }
			
 
				 
			
 
				     .road-content {
			
 
				-        position: relative;
			
 
				-        height: 100%;
			
 
				-        padding: 52px 40px 23px 40px;
			
 
				-        box-sizing: border-box;
			
 
				+      position: relative;
			
 
				+      height: 100%;
			
 
				+      padding: 52px 40px 23px 40px;
			
 
				+      box-sizing: border-box;
			
 
				 
			
 
				-        .left-jt {
			
 
				-            position: absolute;
			
 
				-            top: 50%;
			
 
				-            left: 18px;
			
 
				-            transform: translate(0, -50%);
			
 
				-        }
			
 
				-
			
 
				-        .right-jt {
			
 
				-            position: absolute;
			
 
				-            top: 50%;
			
 
				-            right: 18px;
			
 
				-            transform: translate(0, -50%);
			
 
				-        }
			
 
				+      .left-jt {
			
 
				+        position: absolute;
			
 
				+        top: 50%;
			
 
				+        left: 18px;
			
 
				+        transform: translate(0, -50%);
			
 
				+      }
			
 
				 
			
 
				-        .road-card {
			
 
				-            height: 100%;
			
 
				+      .right-jt {
			
 
				+        position: absolute;
			
 
				+        top: 50%;
			
 
				+        right: 18px;
			
 
				+        transform: translate(0, -50%);
			
 
				+      }
			
 
				 
			
 
				-            .head-nav {
			
 
				-                height: 30px;
			
 
				-                line-height: 30px;
			
 
				-                padding-left: 58px;
			
 
				-                box-sizing: border-box;
			
 
				-                background: url('../../../../../assets/images/company/lentj.png') no-repeat center;
			
 
				-                background-size: 100% 100%;
			
 
				+      .road-card {
			
 
				+        height: 100%;
			
 
				 
			
 
				-                span {
			
 
				-                    font-size: 14px;
			
 
				+        .head-nav {
			
 
				+          height: 30px;
			
 
				+          line-height: 30px;
			
 
				+          padding-left: 58px;
			
 
				+          box-sizing: border-box;
			
 
				+          background: url('../../../../../assets/images/company/lentj.png') no-repeat center;
			
 
				+          background-size: 100% 100%;
			
 
				 
			
 
				-                    &:nth-child(1) {
			
 
				-                        color: #fff;
			
 
				-                    }
			
 
				+          span {
			
 
				+            font-size: 14px;
			
 
				 
			
 
				-                    &:nth-child(2) {
			
 
				-                        color: #3df6ff;
			
 
				-                    }
			
 
				-                }
			
 
				+            &:nth-child(1) {
			
 
				+              color: #fff;
			
 
				             }
			
 
				 
			
 
				-            .echart-box {
			
 
				-                height: calc(100% - 30px);
			
 
				-
			
 
				-                .road {
			
 
				-                    width: 100%;
			
 
				-                    height: 100%;
			
 
				-                }
			
 
				+            &:nth-child(2) {
			
 
				+              color: #3df6ff;
			
 
				             }
			
 
				+          }
			
 
				         }
			
 
				 
			
 
				+        .echart-box {
			
 
				+          height: calc(100% - 30px);
			
 
				 
			
 
				+          .road {
			
 
				+            width: 100%;
			
 
				+            height: 100%;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				     }
			
 
				-
			
 
				-
			
 
				-}
			
 
				+  }
			
 
				 </style>
			
 
				-  
			
--- a/src/views/vent/home/clique/index.vue
+++ b/src/views/vent/home/clique/index.vue
@@ -3,7 +3,6 @@
 
				     <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">
			
@@ -20,7 +19,7 @@
 
				           <!-- 地图底图 -->
			
 
				           <div class="center-bg">
			
 
				             <div class="bg-map">
			
 
				-              <iconLight></iconLight>
			
 
				+              <iconLight />
			
 
				             </div>
			
 
				           </div>
			
 
				           <!-- 榆家梁矿 -->
			
@@ -51,12 +50,10 @@
 
				   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';
			
 
				   import windRoad from './components/wind-road.vue';
			
 
				   import sceneKey from './components/scene-key.vue';
			
 
				-  import iconLight from './components/icon-light.vue'
			
 
				+  import iconLight from './components/icon-light.vue';
			
 
				   // import mapComponent from './components/3Dmap/index.vue';
			
 
				 
			
 
				   let mainTitle = ref('国家能源神东煤炭集团');
			
@@ -150,16 +147,16 @@
 
				           width: calc(54% - 30px);
			
 
				           height: 100%;
			
 
				           position: relative;
			
 
				-          .center-bg{
			
 
				+          .center-bg {
			
 
				             position: absolute;
			
 
				             bottom: 269px;
			
 
				             left: 50%;
			
 
				-            transform: translate(-50%,0);
			
 
				+            transform: translate(-50%, 0);
			
 
				             height: calc(100% - 325px);
			
 
				             width: 100%;
			
 
				             background: url('../../../../assets/images/company/home-dz.png') no-repeat center;
			
 
				             background-position: 50% 90%;
			
 
				-            .bg-map{
			
 
				+            .bg-map {
			
 
				               width: 100%;
			
 
				               height: 100%;
			
 
				               background: url('../../../../assets/images/company/home-map.png') no-repeat center;
			
--- a/src/views/vent/home/colliery/components/device-warn.vue
+++ b/src/views/vent/home/colliery/components/device-warn.vue
@@ -10,7 +10,7 @@
 
				           <span style="color: #fff">{{ nowStatus ? '报警信息' : '网络断开' }}</span>
			
 
				         </div>
			
 
				 
			
 
				-        <div class="now-status">{{ nowStatus ? nowStatus : 0  }}</div>
			
 
				+        <div class="now-status">{{ nowStatus ? nowStatus : 0 }}</div>
			
 
				       </div>
			
 
				     </div>
			
 
				     <div class="warn-contents">
			
@@ -35,7 +35,7 @@
 
				   import { ref, reactive, defineProps, watch } from 'vue';
			
 
				   import { SvgIcon } from '/@/components/Icon';
			
 
				   import { getAssetURL } from '/@/utils/ui';
			
 
				-
			
 
				+  const modules = await import.meta.glob('/src/assets/images/home-container/warning/*', { eager: true });
			
 
				   let props = defineProps({
			
 
				     warnData: Array,
			
 
				   });
			
@@ -43,11 +43,11 @@
 
				   const emit = defineEmits(['goDetail']);
			
 
				   let nowStatus = ref<any>(0);
			
 
				   let warnList = reactive<any[]>([
			
 
				-    { name: '报警', icon: getAssetURL('home-container/warn-icon.png'), val: 0 },
			
 
				-    { name: '重大风险预警', icon: getAssetURL('home-container/warn-icon.png'), val: 0 },
			
 
				-    { name: '较大风险预警', icon: getAssetURL('home-container/warn-icon1.png'), val: 0 },
			
 
				-    { name: '一般风险预警', icon: getAssetURL('home-container/warn-icon2.png'), val: 0 },
			
 
				-    { name: '低风险预警', icon: getAssetURL('home-container/warn-icon3.png'), val: 0 },
			
 
				+    { name: '报警', icon: getAssetURL('home-container/warning/warn-icon.png'), val: 0 },
			
 
				+    { name: '重大风险预警', icon: getAssetURL('home-container/warning/warn-icon.png'), val: 0 },
			
 
				+    { name: '较大风险预警', icon: getAssetURL('home-container/warning/warn-icon1.png'), val: 0 },
			
 
				+    { name: '一般风险预警', icon: getAssetURL('home-container/warning/warn-icon2.png'), val: 0 },
			
 
				+    { name: '低风险预警', icon: getAssetURL('home-container/warning/warn-icon3.png'), val: 0 },
			
 
				   ]);
			
 
				 
			
 
				   //跳转详情
			
@@ -59,7 +59,7 @@
 
				     (val) => {
			
 
				       val.forEach((el) => {
			
 
				         // nowStatus.value = el.netstatus.val;
			
 
				-        nowStatus.value=0
			
 
				+        nowStatus.value = 0;
			
 
				         warnList[0].val = el.red.val;
			
 
				         warnList[1].val = el.alarm.val;
			
 
				         warnList[2].val = el.orange.val;
			
--- a/src/views/vent/monitorManager/alarmMonitor/alarm.data.ts
+++ b/src/views/vent/monitorManager/alarmMonitor/alarm.data.ts
@@ -4,7 +4,6 @@ import echarts from '/@/utils/lib/echarts';
 
				 import type { EChartsOption } from 'echarts';
			
 
				 import { getAssetURL } from '/@/utils/ui';
			
 
				 import { render } from '/@/utils/common/renderUtils';
			
 
				-
			
 
				 export const formConfig = {
			
 
				   labelAlign: 'left',
			
 
				   showAdvancedButton: false,
			
@@ -632,31 +631,31 @@ export const fireMonitor1 = [
 
				   {
			
 
				     title: 'CO最大值(ppm)',
			
 
				     code: '',
			
 
				-    level:null,
			
 
				+    level: null,
			
 
				     value: 0,
			
 
				   },
			
 
				   {
			
 
				     title: 'CH₄最大值(%)',
			
 
				     code: '',
			
 
				-    level:null,
			
 
				+    level: null,
			
 
				     value: 0,
			
 
				   },
			
 
				   {
			
 
				     title: 'C₂H₄最大值(ppm)',
			
 
				     code: '',
			
 
				-    level:null,
			
 
				+    level: null,
			
 
				     value: 0,
			
 
				   },
			
 
				   {
			
 
				     title: 'CO₂最大值(%)',
			
 
				     code: '',
			
 
				-    level:null,
			
 
				+    level: null,
			
 
				     value: 0,
			
 
				   },
			
 
				   {
			
 
				     title: '上隅角O₂最小值(%)',
			
 
				     code: '',
			
 
				-    level:null,
			
 
				+    level: null,
			
 
				     value: 0,
			
 
				   },
			
 
				 ];
			
--- a/src/views/vent/monitorManager/alarmMonitor/fire.data.ts
+++ b/src/views/vent/monitorManager/alarmMonitor/fire.data.ts
@@ -5,7 +5,6 @@ import { getAssetURL } from '/@/utils/ui';
 
				 //内外因火灾菜单列表
			
 
				 export const typeMenuList = [{ name: '内因火灾' }, { name: '外因火灾' }];
			
 
				 
			
 
				-
			
 
				 //当前加载组件
			
 
				 export const componentName = {
			
 
				   fireWork: markRaw(defineAsyncComponent(() => import('./fire/fireWork.vue'))),
			
@@ -13,7 +12,7 @@ export const componentName = {
 
				   mainWell: markRaw(defineAsyncComponent(() => import('./fire/mainWell.vue'))),
			
 
				   dustPage: markRaw(defineAsyncComponent(() => import('./fire/dustPage.vue'))),
			
 
				   gasPage: markRaw(defineAsyncComponent(() => import('./fire/gasPage.vue'))),
			
 
				-  ventilate:markRaw(defineAsyncComponent(() => import('./fire/ventilate.vue'))),
			
 
				+  ventilate: markRaw(defineAsyncComponent(() => import('./fire/ventilate.vue'))),
			
 
				 };
			
 
				 
			
 
				 //工作面
			
@@ -73,7 +72,7 @@ export const contentList = [
 
				       {
			
 
				         id: '0-0',
			
 
				         title: 'O₂',
			
 
				-        dw:'(%)',
			
 
				+        dw: '(%)',
			
 
				         label: '浓度 : ',
			
 
				         value: '--',
			
 
				         label1: '时间 : ',
			
@@ -82,7 +81,7 @@ export const contentList = [
 
				       {
			
 
				         id: '0-1',
			
 
				         title: 'C₂H₄',
			
 
				-        dw:'(ppm)',
			
 
				+        dw: '(ppm)',
			
 
				         label: '浓度 : ',
			
 
				         value: '--',
			
 
				         label1: '时间 : ',
			
@@ -96,7 +95,7 @@ export const contentList = [
 
				       {
			
 
				         id: '1-0',
			
 
				         title: 'CO',
			
 
				-        dw:'(ppm)',
			
 
				+        dw: '(ppm)',
			
 
				         label: '浓度 : ',
			
 
				         value: '--',
			
 
				         label1: '时间 : ',
			
@@ -105,7 +104,7 @@ export const contentList = [
 
				       {
			
 
				         id: '1-1',
			
 
				         title: 'CH₄',
			
 
				-        dw:'(ppm)',
			
 
				+        dw: '(ppm)',
			
 
				         label: '浓度 : ',
			
 
				         value: '--',
			
 
				         label1: '时间 : ',
			
@@ -119,7 +118,7 @@ export const contentList = [
 
				       {
			
 
				         id: '2-0',
			
 
				         title: 'CO₂',
			
 
				-        dw:'(%)',
			
 
				+        dw: '(%)',
			
 
				         label: '浓度 : ',
			
 
				         value: '--',
			
 
				         label1: '时间 : ',
			
@@ -128,7 +127,7 @@ export const contentList = [
 
				       {
			
 
				         id: '2-1',
			
 
				         title: 'C₂H₂',
			
 
				-        dw:'(ppm)',
			
 
				+        dw: '(ppm)',
			
 
				         label: '浓度 : ',
			
 
				         value: '--',
			
 
				         label1: '时间 : ',
			
@@ -138,9 +137,6 @@ export const contentList = [
 
				   },
			
 
				 ];
			
 
				 
			
 
				-
			
 
				-
			
 
				-
			
 
				 //其他工作面table列
			
 
				 export const columnsOther = [
			
 
				   { rowIndex: 1, dataIndex: 'info', title: '监测位置', type: '1', align: 'center' },
			
@@ -558,12 +554,10 @@ export const centerAreaListB1 = [
 
				   },
			
 
				   {
			
 
				     id: 1,
			
 
				-    content:'',
			
 
				+    content: '',
			
 
				   },
			
 
				   {
			
 
				     id: 2,
			
 
				     content: '',
			
 
				   },
			
 
				-  
			
 
				 ];
			
 
				-
			
--- a/src/views/vent/monitorManager/compressor/components/nitrogenHome.vue
+++ b/src/views/vent/monitorManager/compressor/components/nitrogenHome.vue
@@ -1,6 +1,9 @@
 
				 <template>
			
 
				-  <div id="nitrogenCss3D" class="threejs-Object-CSS"
			
 
				-    style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px">
			
 
				+  <div
			
 
				+    id="nitrogenCss3D"
			
 
				+    class="threejs-Object-CSS"
			
 
				+    style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px"
			
 
				+  >
			
 
				     <a-spin :spinning="loading" />
			
 
				     <template>
			
 
				       <div v-for="groupNum in monitorDataGroupNum" :key="groupNum" class="modal-monitor">
			
@@ -8,25 +11,45 @@
 
				           <div class="title">{{ monitorData[groupNum - 1]['strname'] }} </div>
			
 
				           <div class="monitor-item">
			
 
				             <span class="monitor-title">注氮压力:</span>
			
 
				-            <span class="monitor-val"><span class="val">{{ monitorData[groupNum - 1]['nitrogenPressure'] ?
			
 
				-              monitorData[groupNum - 1]['nitrogenPressure'] : '-' }}</span><span class="unit">Mpa</span></span>
			
 
				+            <span class="monitor-val"
			
 
				+              ><span class="val">{{ monitorData[groupNum - 1]['nitrogenPressure'] ? monitorData[groupNum - 1]['nitrogenPressure'] : '-' }}</span
			
 
				+              ><span class="unit">Mpa</span></span
			
 
				+            >
			
 
				           </div>
			
 
				           <div class="monitor-item">
			
 
				             <span class="monitor-title">氮气实时流量:</span>
			
 
				-            <span class="monitor-val"><span class="val">{{ monitorData[groupNum - 1]['instantaneousFlow'] ?
			
 
				-              monitorData[groupNum - 1]['instantaneousFlow'] : '-' }}</span><span class="unit">m³/h</span></span>
			
 
				+            <span class="monitor-val"
			
 
				+              ><span class="val">{{ monitorData[groupNum - 1]['instantaneousFlow'] ? monitorData[groupNum - 1]['instantaneousFlow'] : '-' }}</span
			
 
				+              ><span class="unit">m³/h</span></span
			
 
				+            >
			
 
				           </div>
			
 
				           <div class="monitor-item">
			
 
				             <span class="monitor-title">氮气浓度:</span>
			
 
				-            <span class="monitor-val"><span class="val">{{ monitorData[groupNum - 1]['nitrogenContent'] ?
			
 
				-              monitorData[groupNum - 1]['nitrogenContent'] : '-' }}</span><span class="unit">%</span></span>
			
 
				+            <span class="monitor-val"
			
 
				+              ><span class="val">{{ monitorData[groupNum - 1]['nitrogenContent'] ? monitorData[groupNum - 1]['nitrogenContent'] : '-' }}</span
			
 
				+              ><span class="unit">%</span></span
			
 
				+            >
			
 
				           </div>
			
 
				           <div class="signal-item">
			
 
				-            <div class="signal"><span class="monitor-title">运行信号</span><span
			
 
				-                :class="{ 'signal-round': true, 'signal-round-run': monitorData[groupNum - 1]['compressRunSigF1'], 'signal-round-gry': !monitorData[groupNum - 1]['compressRunSigF1'] }"></span>
			
 
				+            <div class="signal"
			
 
				+              ><span class="monitor-title">运行信号</span
			
 
				+              ><span
			
 
				+                :class="{
			
 
				+                  'signal-round': true,
			
 
				+                  'signal-round-run': monitorData[groupNum - 1]['compressRunSigF1'],
			
 
				+                  'signal-round-gry': !monitorData[groupNum - 1]['compressRunSigF1'],
			
 
				+                }"
			
 
				+              ></span>
			
 
				             </div>
			
 
				-            <div class="signal"><span class="monitor-title">加载信号</span><span
			
 
				-                :class="{ 'signal-round': true, 'signal-round-run': monitorData[groupNum - 1]['compressLoadSigF1'], 'signal-round-gry': !monitorData[groupNum - 1]['compressLoadSigF1'] }"></span>
			
 
				+            <div class="signal"
			
 
				+              ><span class="monitor-title">加载信号</span
			
 
				+              ><span
			
 
				+                :class="{
			
 
				+                  'signal-round': true,
			
 
				+                  'signal-round-run': monitorData[groupNum - 1]['compressLoadSigF1'],
			
 
				+                  'signal-round-gry': !monitorData[groupNum - 1]['compressLoadSigF1'],
			
 
				+                }"
			
 
				+              ></span>
			
 
				             </div>
			
 
				           </div>
			
 
				         </fourBorderBg>
			
@@ -47,32 +70,48 @@
 
				               </template>
			
 
				               <template #container>
			
 
				                 <div class="monitor-box">
			
 
				-                  <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="38" name="device-group-paramer"/><span>机组参数</span></div>
			
 
				+                  <div class="parameter-title group-parameter-title"
			
 
				+                    ><SvgIcon class="icon" size="38" name="device-group-paramer" /><span>机组参数</span></div
			
 
				+                  >
			
 
				                   <div class="state-item" v-for="(data, index) in groupParameterData" :key="index">
			
 
				                     <div class="item-col">
			
 
				                       <span class="state-title">{{ Object.values(data)[0] }} :</span>
			
 
				-                      <span class="state-val">{{ (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[0]])
			
 
				-                        >= 0 ? monitorData[groupNum - 1][Object.keys(data)[0]] : '-' }}</span>
			
 
				+                      <span class="state-val">{{
			
 
				+                        (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[0]]) >= 0
			
 
				+                          ? monitorData[groupNum - 1][Object.keys(data)[0]]
			
 
				+                          : '-'
			
 
				+                      }}</span>
			
 
				                     </div>
			
 
				                     <div class="item-col" v-if="Object.keys(data)[1]">
			
 
				                       <span class="state-title">{{ Object.values(data)[1] }} :</span>
			
 
				-                      <span class="state-val">{{ (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[1]])
			
 
				-                        >= 0 ? monitorData[groupNum - 1][Object.keys(data)[1]] : '-' }}</span>
			
 
				+                      <span class="state-val">{{
			
 
				+                        (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[1]]) >= 0
			
 
				+                          ? monitorData[groupNum - 1][Object.keys(data)[1]]
			
 
				+                          : '-'
			
 
				+                      }}</span>
			
 
				                     </div>
			
 
				                   </div>
			
 
				                 </div>
			
 
				                 <div class="monitor-box">
			
 
				-                  <div class="parameter-title device-parameter-title"><SvgIcon class="icon" size="32" name="device-paramer"/><span>电机数据</span></div>
			
 
				+                  <div class="parameter-title device-parameter-title"
			
 
				+                    ><SvgIcon class="icon" size="32" name="device-paramer" /><span>电机数据</span></div
			
 
				+                  >
			
 
				                   <div class="state-item" v-for="(data, index) in deviceParameterData" :key="index">
			
 
				                     <div class="item-col">
			
 
				                       <span class="state-title">{{ Object.values(data)[0] }} :</span>
			
 
				-                      <span class="state-val">{{ (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[0]])
			
 
				-                        >= 0 ? monitorData[groupNum - 1][Object.keys(data)[0]] : '-' }}</span>
			
 
				+                      <span class="state-val">{{
			
 
				+                        (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[0]]) >= 0
			
 
				+                          ? monitorData[groupNum - 1][Object.keys(data)[0]]
			
 
				+                          : '-'
			
 
				+                      }}</span>
			
 
				                     </div>
			
 
				                     <div class="item-col" v-if="Object.keys(data)[1]">
			
 
				                       <span class="state-title">{{ Object.values(data)[1] }} :</span>
			
 
				-                      <span class="state-val">{{ (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[1]])
			
 
				-                        >= 0 ? monitorData[groupNum - 1][Object.keys(data)[1]] : '-' }}</span>
			
 
				+                      <span class="state-val">{{
			
 
				+                        (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[1]]) >= 0
			
 
				+                          ? monitorData[groupNum - 1][Object.keys(data)[1]]
			
 
				+                          : '-'
			
 
				+                      }}</span>
			
 
				                     </div>
			
 
				                   </div>
			
 
				                 </div>
			
@@ -91,19 +130,27 @@
 
				                 <div class="control-item" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
			
 
				                   <div class="control-item-title">{{ monitorData[groupNum - 1]['strname'] }}</div>
			
 
				                   <div class="control-item-state">
			
 
				-                    <a-switch v-model="airCompressorState[groupNum - 1][`compressRunSigF1`]" size="small"  checked-children="开启"
			
 
				-                      un-checked-children="关闭" :disabled="airCompressorState[groupNum - 1][`controlModel`]"
			
 
				-                      @change="handlerDevice(airCompressorState[groupNum - 1])">
			
 
				-                    </a-switch>
			
 
				+                    <a-switch
			
 
				+                      v-model="airCompressorState[groupNum - 1][`compressRunSigF1`]"
			
 
				+                      size="small"
			
 
				+                      checked-children="开启"
			
 
				+                      un-checked-children="关闭"
			
 
				+                      :disabled="airCompressorState[groupNum - 1][`controlModel`]"
			
 
				+                      @change="handlerDevice(airCompressorState[groupNum - 1])"
			
 
				+                    />
			
 
				                   </div>
			
 
				                 </div>
			
 
				                 <div class="control-item" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
			
 
				                   <div class="control-item-title">{{ kyjs[groupNum - 1] }}</div>
			
 
				                   <div class="control-item-state">
			
 
				-                    <a-switch v-model="airCompressorState[groupNum - 1][`compressRunSigF1`]" size="small"  checked-children="开启"
			
 
				-                      un-checked-children="关闭" :disabled="airCompressorState[groupNum - 1][`controlModel`]"
			
 
				-                      @change="handlerDevice(airCompressorState[groupNum - 1])">
			
 
				-                    </a-switch>
			
 
				+                    <a-switch
			
 
				+                      v-model="airCompressorState[groupNum - 1][`compressRunSigF1`]"
			
 
				+                      size="small"
			
 
				+                      checked-children="开启"
			
 
				+                      un-checked-children="关闭"
			
 
				+                      :disabled="airCompressorState[groupNum - 1][`controlModel`]"
			
 
				+                      @change="handlerDevice(airCompressorState[groupNum - 1])"
			
 
				+                    />
			
 
				                   </div>
			
 
				                 </div>
			
 
				                 <div class="control-item">
			
@@ -119,7 +166,7 @@
 
				             <template #title>
			
 
				               <div>设备实时监测曲线</div>
			
 
				             </template>
			
 
				-            <template #container >
			
 
				+            <template #container>
			
 
				               <BarAndLineCustom xAxisPropType="readTime" :chartData="monitorData" height="240px" :propTypeArr="['flowRate']" :option="zhudanOption" />
			
 
				             </template>
			
 
				           </ventBox1>
			
@@ -130,583 +177,570 @@
 
				       </div>
			
 
				     </div>
			
 
				   </div>
			
 
				-  
			
 
				 </template>
			
 
				 <script lang="ts" setup name="nitrogenHome">
			
 
				-import { onMounted, onUnmounted, ref, watch, reactive, defineProps, nextTick } from 'vue'
			
 
				-import ventBox1 from '/@/components/vent/ventBox1.vue'
			
 
				-import fourBorderBg from '../../../comment/components/fourBorderBg.vue'
			
 
				-import { mountedThree, destroy, setModelType } from '../nitrogen.threejs'
			
 
				-import { list } from '../nitrogen.api'
			
 
				-import { SvgIcon } from '/@/components/Icon'
			
 
				-import LivePlayer from '@liveqing/liveplayer-v3';
			
 
				-import BarAndLineCustom from '/@/components/chart/BarAndLineCustom.vue';
			
 
				-import { zhudanOption } from '../nitrogen.data.ts'
			
 
				-
			
 
				-
			
 
				-const props = defineProps({
			
 
				-  deviceId: {
			
 
				-    type: String,
			
 
				-    require: true
			
 
				-  },
			
 
				-  modalType: {
			
 
				-    type: String,
			
 
				-    require: true
			
 
				-  }
			
 
				-})
			
 
				-const loading = ref(true)
			
 
				-const isLink = ref(true)
			
 
				-const isRefresh = ref(true)
			
 
				-
			
 
				-const zdjs = ['1号制氮机', '2号制氮机', '3号制氮机', '4号制氮机'];
			
 
				-const kyjs = ['1号空压机', '1号空压机', '1号空压机', '1号空压机'];
			
 
				-
			
 
				-const flvURL1 = () => {
			
 
				-  return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
			
 
				-  // return ''
			
 
				-};
			
 
				-const monitorNetStatus = ref(0)
			
 
				-const monitorDataGroupNum = ref(0);
			
 
				-
			
 
				-const airCompressorState = reactive([
			
 
				-  {
			
 
				-    id: '',
			
 
				-    compressRunSigF1: false,
			
 
				-    controlModel: false
			
 
				-  },
			
 
				-  {
			
 
				-    id: '',
			
 
				-    compressRunSigF1: false,
			
 
				-    controlModel: false
			
 
				-  },
			
 
				-  {
			
 
				-    id: '',
			
 
				-    compressRunSigF1: false,
			
 
				-    controlModel: false
			
 
				-  },
			
 
				-  {
			
 
				-    id: '',
			
 
				-    compressRunSigF1: false,
			
 
				-    controlModel: false
			
 
				+  import { onMounted, onUnmounted, ref, watch, reactive, defineProps, nextTick } from 'vue';
			
 
				+  import ventBox1 from '/@/components/vent/ventBox1.vue';
			
 
				+  import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
			
 
				+  import { mountedThree, destroy, setModelType } from '../nitrogen.threejs';
			
 
				+  import { list } from '../nitrogen.api';
			
 
				+  import { SvgIcon } from '/@/components/Icon';
			
 
				+  import LivePlayer from '@liveqing/liveplayer-v3';
			
 
				+  import BarAndLineCustom from '/@/components/chart/BarAndLineCustom.vue';
			
 
				+  import { zhudanOption } from '../nitrogen.data.ts';
			
 
				+
			
 
				+  const props = defineProps({
			
 
				+    deviceId: {
			
 
				+      type: String,
			
 
				+      require: true,
			
 
				+    },
			
 
				+    modalType: {
			
 
				+      type: String,
			
 
				+      require: true,
			
 
				+    },
			
 
				+  });
			
 
				+  const loading = ref(true);
			
 
				+  const isLink = ref(true);
			
 
				+  const isRefresh = ref(true);
			
 
				+
			
 
				+  const zdjs = ['1号制氮机', '2号制氮机', '3号制氮机', '4号制氮机'];
			
 
				+  const kyjs = ['1号空压机', '1号空压机', '1号空压机', '1号空压机'];
			
 
				+
			
 
				+  const flvURL1 = () => {
			
 
				+    return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
			
 
				+    // return ''
			
 
				+  };
			
 
				+  const monitorNetStatus = ref(0);
			
 
				+  const monitorDataGroupNum = ref(0);
			
 
				+
			
 
				+  const airCompressorState = reactive([
			
 
				+    {
			
 
				+      id: '',
			
 
				+      compressRunSigF1: false,
			
 
				+      controlModel: false,
			
 
				+    },
			
 
				+    {
			
 
				+      id: '',
			
 
				+      compressRunSigF1: false,
			
 
				+      controlModel: false,
			
 
				+    },
			
 
				+    {
			
 
				+      id: '',
			
 
				+      compressRunSigF1: false,
			
 
				+      controlModel: false,
			
 
				+    },
			
 
				+    {
			
 
				+      id: '',
			
 
				+      compressRunSigF1: false,
			
 
				+      controlModel: false,
			
 
				+    },
			
 
				+  ]);
			
 
				+
			
 
				+  const groupParameterData = [
			
 
				+    {
			
 
				+      cumulativeFlow: '累计流量(m³)',
			
 
				+      centerTemperature: '加热器中心温度',
			
 
				+    },
			
 
				+    {
			
 
				+      outletTemperature: '加热器出口温度',
			
 
				+    },
			
 
				+  ];
			
 
				+  const deviceParameterData = [
			
 
				+    {
			
 
				+      Ia: 'A项电流(A)',
			
 
				+      Ib: 'B项电流(A)',
			
 
				+    },
			
 
				+    {
			
 
				+      Ic: 'c项电流(A)',
			
 
				+      Vab: 'AB项间电压(V)',
			
 
				+    },
			
 
				+    {
			
 
				+      Vac: 'AC项间电压(V)',
			
 
				+      Vbc: 'BC项间电压(V)',
			
 
				+    },
			
 
				+  ];
			
 
				+
			
 
				+  const monitorData = ref(
			
 
				+    new Array(3).fill({
			
 
				+      strName: '空压机',
			
 
				+      cumulativeFlow: '-',
			
 
				+      centerTemperature: '-',
			
 
				+      outletTemperature: '-',
			
 
				+      Ia: '-',
			
 
				+      Ib: '-',
			
 
				+      Ic: '-',
			
 
				+      Vab: '-',
			
 
				+      Vac: '-',
			
 
				+      Vbc: '-',
			
 
				+      compressGroupName: '',
			
 
				+      compressExhaustPressF1: '-',
			
 
				+      compressSeparatePressF1: '-',
			
 
				+      compressHostTempF1: '-',
			
 
				+      compressCrewTempF1: '-',
			
 
				+      compressRunTimeF1: '-',
			
 
				+      controlModel: 'LOC',
			
 
				+    })
			
 
				+  );
			
 
				+
			
 
				+  // https获取监测数据
			
 
				+  let timer: null | NodeJS.Timeout = null;
			
 
				+  async function getMonitor(flag?) {
			
 
				+    if (Object.prototype.toString.call(timer) === '[object Null]') {
			
 
				+      timer = await setTimeout(
			
 
				+        async () => {
			
 
				+          if (props.deviceId) {
			
 
				+            await getDataSource(props.deviceId);
			
 
				+          }
			
 
				+          if (timer) {
			
 
				+            timer = null;
			
 
				+          }
			
 
				+          await getMonitor();
			
 
				+        },
			
 
				+        flag ? 0 : 1000
			
 
				+      );
			
 
				+    }
			
 
				   }
			
 
				-]);
			
 
				-
			
 
				-const groupParameterData = [
			
 
				-  {
			
 
				-    cumulativeFlow: '累计流量(m³)',
			
 
				-    centerTemperature: '加热器中心温度',
			
 
				-  },
			
 
				-  {
			
 
				-    outletTemperature: '加热器出口温度',
			
 
				-  },
			
 
				-];
			
 
				-const deviceParameterData = [
			
 
				-  {
			
 
				-    Ia: 'A项电流(A)',
			
 
				-    Ib: 'B项电流(A)',
			
 
				-  },
			
 
				-  {
			
 
				-    Ic: 'c项电流(A)',
			
 
				-    Vab: 'AB项间电压(V)',
			
 
				-  },
			
 
				-  {
			
 
				-    Vac: 'AC项间电压(V)',
			
 
				-    Vbc: 'BC项间电压(V)',
			
 
				-  },
			
 
				-];
			
 
				-
			
 
				-const monitorData = ref(new Array(3).fill({
			
 
				-  strName: '空压机',
			
 
				-  cumulativeFlow: '-',
			
 
				-  centerTemperature: '-',
			
 
				-  outletTemperature: '-',
			
 
				-  Ia: '-',
			
 
				-  Ib: '-',
			
 
				-  Ic: '-',
			
 
				-  Vab: '-',
			
 
				-  Vac: '-',
			
 
				-  Vbc: '-',
			
 
				-  compressGroupName: '',
			
 
				-  compressExhaustPressF1: '-',
			
 
				-  compressSeparatePressF1: '-',
			
 
				-  compressHostTempF1: '-',
			
 
				-  compressCrewTempF1: '-',
			
 
				-  compressRunTimeF1: '-',
			
 
				-  controlModel: 'LOC'
			
 
				-}));
			
 
				-
			
 
				-// https获取监测数据
			
 
				-let timer: null | NodeJS.Timeout = null;
			
 
				-async function getMonitor(flag?) {
			
 
				-  if (Object.prototype.toString.call(timer) === '[object Null]') {
			
 
				-    timer = await setTimeout(async () => {
			
 
				-      if (props.deviceId) {
			
 
				-        await getDataSource(props.deviceId)
			
 
				-      }
			
 
				-      if (timer) {
			
 
				-        timer = null;
			
 
				+
			
 
				+  async function getDataSource(systemID) {
			
 
				+    const res = await list({ devicetype: 'sys', systemID, type: 'all' });
			
 
				+    const result = res.msgTxt;
			
 
				+    if (!result || result.length < 1) return;
			
 
				+    result.forEach((item) => {
			
 
				+      if (item.type === 'nitrogen_auto') {
			
 
				+        let netStatus = 0;
			
 
				+        monitorData.value = item['datalist'].filter((data) => {
			
 
				+          if (data['netStatus'] == 1) {
			
 
				+            netStatus = 1;
			
 
				+          }
			
 
				+          const item = data.readData;
			
 
				+          return Object.assign(data, item);
			
 
				+        });
			
 
				+        monitorNetStatus.value = netStatus;
			
 
				       }
			
 
				-      await getMonitor();
			
 
				-    }, flag ? 0 : 1000);
			
 
				+    });
			
 
				+    monitorDataGroupNum.value = monitorData.value.length;
			
 
				   }
			
 
				-};
			
 
				-
			
 
				-async function getDataSource(systemID) {
			
 
				-  const res = await list({ devicetype: 'sys', systemID, type: 'all'  });
			
 
				-  const result = res.msgTxt;
			
 
				-  if (!result || result.length < 1) return
			
 
				-  result.forEach(item => {
			
 
				-    if (item.type === 'nitrogen_auto') {
			
 
				-      let netStatus = 0
			
 
				-      monitorData.value = item['datalist'].filter((data) => {
			
 
				-        if(data['netStatus'] == 1){
			
 
				-          netStatus = 1
			
 
				-        }
			
 
				-        const item = data.readData;
			
 
				-        return Object.assign(data, item);
			
 
				-      });
			
 
				-      monitorNetStatus.value = netStatus
			
 
				-    }
			
 
				-  })
			
 
				-  monitorDataGroupNum.value = monitorData.value.length
			
 
				-  
			
 
				-};
			
 
				-
			
 
				-function handlerDevice(data) {
			
 
				-  // if (data.length < 1) return
			
 
				-  // handleAirCompressor({ id: data.id, compressRunF1: data.compressRunSigF1 }).then(res => {
			
 
				-  //   if (res.success) {
			
 
				-  //     message.success('操作成功')
			
 
				-  //   } else {
			
 
				-  //     message.warning(data.msg)
			
 
				-  //   }
			
 
				-  // })
			
 
				-};
			
 
				-function resetDevice(data) {
			
 
				-
			
 
				-}
			
 
				-
			
 
				-function handlerControlModel(data) {
			
 
				-
			
 
				-}
			
 
				-
			
 
				-watch([monitorDataGroupNum, loading], ([newMonitorDataGroupNum, newLoading]) => {
			
 
				-  nextTick(() => {
			
 
				-    if (newMonitorDataGroupNum && !newLoading) {
			
 
				-      setModelType(props.modalType, newMonitorDataGroupNum)
			
 
				-    }
			
 
				-  })
			
 
				-})
			
 
				-
			
 
				-
			
 
				-onMounted(async () => {
			
 
				-  await getMonitor(true)
			
 
				-  await mountedThree().then(() => {
			
 
				-    loading.value = false
			
 
				-  })
			
 
				-})
			
 
				-
			
 
				-onUnmounted(() => {
			
 
				-  destroy();
			
 
				-  if (timer) {
			
 
				-    clearTimeout(timer);
			
 
				-    timer = undefined;
			
 
				+
			
 
				+  function handlerDevice(data) {
			
 
				+    // if (data.length < 1) return
			
 
				+    // handleAirCompressor({ id: data.id, compressRunF1: data.compressRunSigF1 }).then(res => {
			
 
				+    //   if (res.success) {
			
 
				+    //     message.success('操作成功')
			
 
				+    //   } else {
			
 
				+    //     message.warning(data.msg)
			
 
				+    //   }
			
 
				+    // })
			
 
				   }
			
 
				-});
			
 
				+  function resetDevice(data) {}
			
 
				+
			
 
				+  function handlerControlModel(data) {}
			
 
				 
			
 
				+  watch([monitorDataGroupNum, loading], ([newMonitorDataGroupNum, newLoading]) => {
			
 
				+    nextTick(() => {
			
 
				+      if (newMonitorDataGroupNum && !newLoading) {
			
 
				+        setModelType(props.modalType, newMonitorDataGroupNum);
			
 
				+      }
			
 
				+    });
			
 
				+  });
			
 
				+
			
 
				+  onMounted(async () => {
			
 
				+    await getMonitor(true);
			
 
				+    await mountedThree().then(() => {
			
 
				+      loading.value = false;
			
 
				+    });
			
 
				+  });
			
 
				+
			
 
				+  onUnmounted(() => {
			
 
				+    destroy();
			
 
				+    if (timer) {
			
 
				+      clearTimeout(timer);
			
 
				+      timer = undefined;
			
 
				+    }
			
 
				+  });
			
 
				 </script>
			
 
				 
			
 
				 <style lang="less" scoped>
			
 
				-@ventSpace: zxm;
			
 
				-
			
 
				-.nitrogen-box {
			
 
				-  width: 100%;
			
 
				-  height: 100%;
			
 
				-  display: flex;
			
 
				-  justify-content: center;
			
 
				-}
			
 
				-#nitrogenCss3D {
			
 
				-  .modal-monitor {
			
 
				-    width: 200px;
			
 
				-    position: absolute;
			
 
				-    left: 0px;
			
 
				-    top: 0px;
			
 
				-    
			
 
				-  }
			
 
				-  &:deep(.win) {
			
 
				-    margin: 0 !important;
			
 
				-    background: #00000044;
			
 
				-  }
			
 
				+  @ventSpace: zxm;
			
 
				 
			
 
				-}
			
 
				-.nitrogen-home {
			
 
				-  width: 100%;
			
 
				-  height: 100%;
			
 
				-  position: fixed;
			
 
				-  z-index: 9999;
			
 
				-  display: flex;
			
 
				-  flex-direction: column;
			
 
				-  justify-content: center;
			
 
				-  align-items: center;
			
 
				-  pointer-events: none;
			
 
				-  top: 60px;
			
 
				-  .nitrogen-container {
			
 
				+  .nitrogen-box {
			
 
				     width: 100%;
			
 
				-    height: calc(100% - 100px);
			
 
				+    height: 100%;
			
 
				     display: flex;
			
 
				-    justify-content: space-between;
			
 
				-    margin-bottom: 100px;
			
 
				-    .device-state{
			
 
				-      width: 100%;
			
 
				+    justify-content: center;
			
 
				+  }
			
 
				+  #nitrogenCss3D {
			
 
				+    .modal-monitor {
			
 
				+      width: 200px;
			
 
				       position: absolute;
			
 
				-      top: 70px;
			
 
				-      color: #e90000;
			
 
				-      display: flex;
			
 
				-      justify-content: center;
			
 
				-      font-size: 20px;
			
 
				+      left: 0px;
			
 
				+      top: 0px;
			
 
				+    }
			
 
				+    &:deep(.win) {
			
 
				+      margin: 0 !important;
			
 
				+      background: #00000044;
			
 
				     }
			
 
				-    .top-box {
			
 
				+  }
			
 
				+  .nitrogen-home {
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    position: fixed;
			
 
				+    z-index: 9999;
			
 
				+    display: flex;
			
 
				+    flex-direction: column;
			
 
				+    justify-content: center;
			
 
				+    align-items: center;
			
 
				+    pointer-events: none;
			
 
				+    top: 60px;
			
 
				+    .nitrogen-container {
			
 
				       width: 100%;
			
 
				-      padding: 10px;
			
 
				-      overflow: hidden;
			
 
				+      height: calc(100% - 100px);
			
 
				       display: flex;
			
 
				       justify-content: space-between;
			
 
				-
			
 
				-      .lr-box {
			
 
				-        height: fit-content;
			
 
				+      margin-bottom: 100px;
			
 
				+      .device-state {
			
 
				+        width: 100%;
			
 
				+        position: absolute;
			
 
				+        top: 70px;
			
 
				+        color: #e90000;
			
 
				         display: flex;
			
 
				-        flex-direction: column;
			
 
				-        position: relative;
			
 
				-        overflow: hidden;
			
 
				-        z-index: 9999;
			
 
				-        pointer-events: auto;
			
 
				-        
			
 
				+        justify-content: center;
			
 
				+        font-size: 20px;
			
 
				       }
			
 
				-
			
 
				-      .item {
			
 
				-        width: 335px;
			
 
				-        height: auto;
			
 
				-        position: relative;
			
 
				-        border-radius: 5px;
			
 
				-        margin-top: 10px;
			
 
				-        margin-bottom: 0px;
			
 
				-        pointer-events: auto;
			
 
				-        color: #fff;
			
 
				+      .top-box {
			
 
				+        width: 100%;
			
 
				+        padding: 10px;
			
 
				         overflow: hidden;
			
 
				-        &:first-child{
			
 
				-          margin-top: 0px;
			
 
				-        }
			
 
				-        
			
 
				-        .base-title {
			
 
				-          color: #fff;
			
 
				-          margin-bottom: 8px;
			
 
				-          padding-left: 10px;
			
 
				+        display: flex;
			
 
				+        justify-content: space-between;
			
 
				+
			
 
				+        .lr-box {
			
 
				+          height: fit-content;
			
 
				+          display: flex;
			
 
				+          flex-direction: column;
			
 
				           position: relative;
			
 
				-          font-size: 16px;
			
 
				-          &::after{
			
 
				-            content: '';
			
 
				-            position: absolute;
			
 
				-            display: block;
			
 
				-            width: 4px;
			
 
				-            height: 12px;
			
 
				-            top: 7px;
			
 
				-            left: 0px;
			
 
				-            background: #45d3fd;
			
 
				-            border-radius: 4px;
			
 
				-          }
			
 
				+          overflow: hidden;
			
 
				+          z-index: 9999;
			
 
				+          pointer-events: auto;
			
 
				         }
			
 
				 
			
 
				-        .state-item {
			
 
				-          display: flex;
			
 
				-          flex-direction: row;
			
 
				-          padding: 5px;
			
 
				+        .item {
			
 
				+          width: 335px;
			
 
				+          height: auto;
			
 
				+          position: relative;
			
 
				+          border-radius: 5px;
			
 
				+          margin-top: 10px;
			
 
				+          margin-bottom: 0px;
			
 
				+          pointer-events: auto;
			
 
				+          color: #fff;
			
 
				+          overflow: hidden;
			
 
				+          &:first-child {
			
 
				+            margin-top: 0px;
			
 
				+          }
			
 
				 
			
 
				-          .item-col {
			
 
				-            width: calc(50% - 5px);
			
 
				-            display: flex;
			
 
				-            justify-content: center;
			
 
				-            align-items: center;
			
 
				-            padding-right: 4px;
			
 
				-            background-image: linear-gradient(to right, #39A3FF00, #39A3FF10);
			
 
				-            &:first-child{
			
 
				-              margin-right: 10px;
			
 
				+          .base-title {
			
 
				+            color: #fff;
			
 
				+            margin-bottom: 8px;
			
 
				+            padding-left: 10px;
			
 
				+            position: relative;
			
 
				+            font-size: 16px;
			
 
				+            &::after {
			
 
				+              content: '';
			
 
				+              position: absolute;
			
 
				+              display: block;
			
 
				+              width: 4px;
			
 
				+              height: 12px;
			
 
				+              top: 7px;
			
 
				+              left: 0px;
			
 
				+              background: #45d3fd;
			
 
				+              border-radius: 4px;
			
 
				             }
			
 
				+          }
			
 
				 
			
 
				-            .state-title {
			
 
				-              color: #ffffffcc;
			
 
				-              flex: 9;
			
 
				-              font-size: 14px;
			
 
				-            }
			
 
				+          .state-item {
			
 
				+            display: flex;
			
 
				+            flex-direction: row;
			
 
				+            padding: 5px;
			
 
				 
			
 
				-            .state-val {
			
 
				-              flex: 1;
			
 
				-              color: #00eefffe;
			
 
				-              margin-right: 5px;
			
 
				-              text-align: right;
			
 
				-              font-size: 14px;
			
 
				+            .item-col {
			
 
				+              width: calc(50% - 5px);
			
 
				+              display: flex;
			
 
				+              justify-content: center;
			
 
				+              align-items: center;
			
 
				+              padding-right: 4px;
			
 
				+              background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
			
 
				+              &:first-child {
			
 
				+                margin-right: 10px;
			
 
				+              }
			
 
				+
			
 
				+              .state-title {
			
 
				+                color: #ffffffcc;
			
 
				+                flex: 9;
			
 
				+                font-size: 14px;
			
 
				+              }
			
 
				+
			
 
				+              .state-val {
			
 
				+                flex: 1;
			
 
				+                color: #00eefffe;
			
 
				+                margin-right: 5px;
			
 
				+                text-align: right;
			
 
				+                font-size: 14px;
			
 
				+              }
			
 
				             }
			
 
				           }
			
 
				-        }
			
 
				 
			
 
				-        .signal-box {
			
 
				-          margin: 5px 0;
			
 
				-          display: flex;
			
 
				-          align-items: center;
			
 
				+          .signal-box {
			
 
				+            margin: 5px 0;
			
 
				+            display: flex;
			
 
				+            align-items: center;
			
 
				 
			
 
				-          .signal-title {
			
 
				-            color: #7AF5FF;
			
 
				-            margin: 0 5px;
			
 
				-          }
			
 
				+            .signal-title {
			
 
				+              color: #7af5ff;
			
 
				+              margin: 0 5px;
			
 
				+            }
			
 
				 
			
 
				-          &:last-child {
			
 
				-            margin-right: 0px;
			
 
				+            &:last-child {
			
 
				+              margin-right: 0px;
			
 
				+            }
			
 
				           }
			
 
				-        }
			
 
				 
			
 
				-        .list-item {
			
 
				-          padding: 0 10px;
			
 
				-          display: flex;
			
 
				-          justify-content: space-between;
			
 
				-          align-items: center;
			
 
				+          .list-item {
			
 
				+            padding: 0 10px;
			
 
				+            display: flex;
			
 
				+            justify-content: space-between;
			
 
				+            align-items: center;
			
 
				 
			
 
				-          .item-data-key {
			
 
				-            color: #ffffff99;
			
 
				+            .item-data-key {
			
 
				+              color: #ffffff99;
			
 
				+            }
			
 
				           }
			
 
				-        }
			
 
				 
			
 
				-        .item-data-box {
			
 
				-          color: #fff;
			
 
				+          .item-data-box {
			
 
				+            color: #fff;
			
 
				 
			
 
				-          .state-icon {
			
 
				-            display: inline-block;
			
 
				-            width: 12px;
			
 
				-            height: 12px;
			
 
				-            border-radius: 12px;
			
 
				-          }
			
 
				+            .state-icon {
			
 
				+              display: inline-block;
			
 
				+              width: 12px;
			
 
				+              height: 12px;
			
 
				+              border-radius: 12px;
			
 
				+            }
			
 
				 
			
 
				-          .open {
			
 
				-            border: 5px solid #133a56;
			
 
				-            background: #4ecb73;
			
 
				-          }
			
 
				+            .open {
			
 
				+              border: 5px solid #133a56;
			
 
				+              background: #4ecb73;
			
 
				+            }
			
 
				 
			
 
				-          .close {
			
 
				-            border: 5px solid #192961;
			
 
				-            background: #6d7898;
			
 
				+            .close {
			
 
				+              border: 5px solid #192961;
			
 
				+              background: #6d7898;
			
 
				+            }
			
 
				           }
			
 
				         }
			
 
				-      }
			
 
				 
			
 
				-      .item-l {
			
 
				-        width: 100%;
			
 
				-        .monitor-box {
			
 
				+        .item-l {
			
 
				           width: 100%;
			
 
				-          .parameter-title{
			
 
				-            position: relative;
			
 
				+          .monitor-box {
			
 
				             width: 100%;
			
 
				-            height: 14px;
			
 
				-            margin-top: 10px;
			
 
				-            .icon, span{
			
 
				-              position: absolute;
			
 
				-              top: -10px;
			
 
				-            }
			
 
				-            
			
 
				-          }
			
 
				-          .group-parameter-title{
			
 
				-            background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
			
 
				-            
			
 
				-            .icon{
			
 
				-              left: -12px;
			
 
				-              top: -17px;
			
 
				-            }
			
 
				-            span{
			
 
				-              left: 18px;
			
 
				-            }
			
 
				-            .item-col{
			
 
				-              background-image: linear-gradient(to right, #39A3FF00, #39A3FF10);
			
 
				-            }
			
 
				-          }
			
 
				-          .device-parameter-title{
			
 
				-            background-image: linear-gradient(to right, #3df6ff40, #3df6ff00);
			
 
				-            .icon{
			
 
				-              left: -10px;
			
 
				-              top: -14px;
			
 
				+            .parameter-title {
			
 
				+              position: relative;
			
 
				+              width: 100%;
			
 
				+              height: 14px;
			
 
				+              margin-top: 10px;
			
 
				+              .icon,
			
 
				+              span {
			
 
				+                position: absolute;
			
 
				+                top: -10px;
			
 
				+              }
			
 
				             }
			
 
				-            span{
			
 
				-              left: 18px;
			
 
				+            .group-parameter-title {
			
 
				+              background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
			
 
				+
			
 
				+              .icon {
			
 
				+                left: -12px;
			
 
				+                top: -17px;
			
 
				+              }
			
 
				+              span {
			
 
				+                left: 18px;
			
 
				+              }
			
 
				+              .item-col {
			
 
				+                background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
			
 
				+              }
			
 
				             }
			
 
				-            .item-col{
			
 
				-              background-image: linear-gradient(to right, #3df6ff10, #3df6ff00);
			
 
				+            .device-parameter-title {
			
 
				+              background-image: linear-gradient(to right, #3df6ff40, #3df6ff00);
			
 
				+              .icon {
			
 
				+                left: -10px;
			
 
				+                top: -14px;
			
 
				+              }
			
 
				+              span {
			
 
				+                left: 18px;
			
 
				+              }
			
 
				+              .item-col {
			
 
				+                background-image: linear-gradient(to right, #3df6ff10, #3df6ff00);
			
 
				+              }
			
 
				             }
			
 
				           }
			
 
				-          
			
 
				         }
			
 
				-      }
			
 
				 
			
 
				-      .right-box {
			
 
				-        width: 330px;
			
 
				-        margin-top: 50px;
			
 
				-        .control-group{
			
 
				-          display: flex;
			
 
				-          // justify-content: space-around;
			
 
				-          flex-wrap: wrap;
			
 
				-          .control-item {
			
 
				-            
			
 
				+        .right-box {
			
 
				+          width: 330px;
			
 
				+          margin-top: 50px;
			
 
				+          .control-group {
			
 
				             display: flex;
			
 
				-            flex-direction: column;
			
 
				-            justify-content: center;
			
 
				-            align-items: center;
			
 
				-            padding: 0 4px;
			
 
				-            .control-item-title{
			
 
				-              color: #A6DCE9;
			
 
				-              position: relative;
			
 
				-              top: 5px;
			
 
				-            }
			
 
				-            .control-item-state{
			
 
				-              width: 94px;
			
 
				-              height: 47px;
			
 
				-              background: url('/@/assets/images/vent/control-switch-bg.png');
			
 
				+            // justify-content: space-around;
			
 
				+            flex-wrap: wrap;
			
 
				+            .control-item {
			
 
				               display: flex;
			
 
				+              flex-direction: column;
			
 
				               justify-content: center;
			
 
				               align-items: center;
			
 
				-              color: #fff;
			
 
				-            }
			
 
				-          
			
 
				-            .button-box {
			
 
				-              position: relative;
			
 
				-              padding: 5px;
			
 
				-              border: 1px transparent solid;
			
 
				-              background-clip: border-box;
			
 
				-              border-radius: 5px;
			
 
				-              margin-left: 8px;
			
 
				-            }
			
 
				-
			
 
				-            .a-button {
			
 
				-              pointer-events: auto;
			
 
				-            }
			
 
				-
			
 
				-            &::v-deep .a-button--mini {
			
 
				-              padding: 6px 10px;
			
 
				-            }
			
 
				-
			
 
				-            &::v-deep .a-button--mini.is-round {
			
 
				-              padding: 6px 10px;
			
 
				+              padding: 0 4px;
			
 
				+              .control-item-title {
			
 
				+                color: #a6dce9;
			
 
				+                position: relative;
			
 
				+                top: 5px;
			
 
				+              }
			
 
				+              .control-item-state {
			
 
				+                width: 94px;
			
 
				+                height: 47px;
			
 
				+                background: url('/@/assets/images/vent/control-switch-bg.png');
			
 
				+                display: flex;
			
 
				+                justify-content: center;
			
 
				+                align-items: center;
			
 
				+                color: #fff;
			
 
				+              }
			
 
				+
			
 
				+              .button-box {
			
 
				+                position: relative;
			
 
				+                padding: 5px;
			
 
				+                border: 1px transparent solid;
			
 
				+                background-clip: border-box;
			
 
				+                border-radius: 5px;
			
 
				+                margin-left: 8px;
			
 
				+              }
			
 
				+
			
 
				+              .a-button {
			
 
				+                pointer-events: auto;
			
 
				+              }
			
 
				+
			
 
				+              &::v-deep .a-button--mini {
			
 
				+                padding: 6px 10px;
			
 
				+              }
			
 
				+
			
 
				+              &::v-deep .a-button--mini.is-round {
			
 
				+                padding: 6px 10px;
			
 
				+              }
			
 
				             }
			
 
				           }
			
 
				+        }
			
 
				 
			
 
				+        .left-box {
			
 
				+          width: 365px;
			
 
				+          margin-top: 80px;
			
 
				         }
			
 
				       }
			
 
				-
			
 
				-      .left-box {
			
 
				-        width: 365px;
			
 
				-        margin-top: 80px;
			
 
				+      &:deep(.win) {
			
 
				+        width: 100%;
			
 
				+        margin: 0 !important;
			
 
				       }
			
 
				     }
			
 
				-    &:deep(.win) {
			
 
				-      width: 100%;
			
 
				-      margin: 0 !important;
			
 
				-    }
			
 
				   }
			
 
				-  
			
 
				-}
			
 
				-
			
 
				-&:deep(.main) {
			
 
				-  .title {
			
 
				-    height: 34px;
			
 
				-    text-align: center;
			
 
				-    font-weight: 600;
			
 
				-    color: #7AF5FF;
			
 
				-    // background-image: url('../../../assets/img/yfj/light.png');
			
 
				-    background-repeat: no-repeat;
			
 
				-    background-position-x: center;
			
 
				-    background-position-y: 100%;
			
 
				-    background-size: 80%;
			
 
				-    font-size: 16px;
			
 
				-  }
			
 
				-  .monitor-item {
			
 
				-    width: 200px;
			
 
				-    display: flex;
			
 
				-    flex-direction: row;
			
 
				-    width: auto;
			
 
				-    margin-bottom: 3px;
			
 
				 
			
 
				-    .monitor-val {
			
 
				-      color: #ffb700;
			
 
				+  &:deep(.main) {
			
 
				+    .title {
			
 
				+      height: 34px;
			
 
				+      text-align: center;
			
 
				+      font-weight: 600;
			
 
				+      color: #7af5ff;
			
 
				+      // background-image: url('../../../assets/img/yfj/light.png');
			
 
				+      background-repeat: no-repeat;
			
 
				+      background-position-x: center;
			
 
				+      background-position-y: 100%;
			
 
				+      background-size: 80%;
			
 
				+      font-size: 16px;
			
 
				+    }
			
 
				+    .monitor-item {
			
 
				+      width: 200px;
			
 
				       display: flex;
			
 
				+      flex-direction: row;
			
 
				       width: auto;
			
 
				+      margin-bottom: 3px;
			
 
				 
			
 
				-      .val {
			
 
				-        width: 80px;
			
 
				-        font-size: 14px;
			
 
				-      }
			
 
				+      .monitor-val {
			
 
				+        color: #ffb700;
			
 
				+        display: flex;
			
 
				+        width: auto;
			
 
				 
			
 
				-      .unit {
			
 
				-        color: #ffffffbb;
			
 
				-        font-size: 14px;
			
 
				+        .val {
			
 
				+          width: 80px;
			
 
				+          font-size: 14px;
			
 
				+        }
			
 
				 
			
 
				+        .unit {
			
 
				+          color: #ffffffbb;
			
 
				+          font-size: 14px;
			
 
				+        }
			
 
				       }
			
 
				     }
			
 
				-  }
			
 
				-  .monitor-title {
			
 
				-    width: 100px;
			
 
				-    color: #7AF5FF;
			
 
				-    font-weight: 400;
			
 
				-    font-size: 14px;
			
 
				-  }
			
 
				-  .signal-item {
			
 
				-    display: flex;
			
 
				-    justify-content: space-between;
			
 
				-
			
 
				-    // margin-bottom: 5px;
			
 
				-    .signal-round {
			
 
				-      display: inline-block;
			
 
				-      width: 8px;
			
 
				-      height: 8px;
			
 
				-      border-radius: 50%;
			
 
				-      margin: 0 10px;
			
 
				-      position: relative;
			
 
				-
			
 
				-      &::after {
			
 
				-        display: block;
			
 
				-        content: '';
			
 
				-        position: absolute;
			
 
				-        width: 12px;
			
 
				-        height: 12px;
			
 
				-        top: -2px;
			
 
				-        left: -2px;
			
 
				+    .monitor-title {
			
 
				+      width: 100px;
			
 
				+      color: #7af5ff;
			
 
				+      font-weight: 400;
			
 
				+      font-size: 14px;
			
 
				+    }
			
 
				+    .signal-item {
			
 
				+      display: flex;
			
 
				+      justify-content: space-between;
			
 
				+
			
 
				+      // margin-bottom: 5px;
			
 
				+      .signal-round {
			
 
				+        display: inline-block;
			
 
				+        width: 8px;
			
 
				+        height: 8px;
			
 
				         border-radius: 50%;
			
 
				+        margin: 0 10px;
			
 
				+        position: relative;
			
 
				+
			
 
				+        &::after {
			
 
				+          display: block;
			
 
				+          content: '';
			
 
				+          position: absolute;
			
 
				+          width: 12px;
			
 
				+          height: 12px;
			
 
				+          top: -2px;
			
 
				+          left: -2px;
			
 
				+          border-radius: 50%;
			
 
				+        }
			
 
				       }
			
 
				-    }
			
 
				 
			
 
				-    .signal-round-gry {
			
 
				-      background-color: #858585;
			
 
				+      .signal-round-gry {
			
 
				+        background-color: #858585;
			
 
				 
			
 
				-      &::after {
			
 
				-        background-color: #85858544;
			
 
				-        box-shadow: 0 0 1px 1px #85858599;
			
 
				+        &::after {
			
 
				+          background-color: #85858544;
			
 
				+          box-shadow: 0 0 1px 1px #85858599;
			
 
				+        }
			
 
				       }
			
 
				-    }
			
 
				 
			
 
				-    .signal-round-run {
			
 
				-      background-color: #67FC00;
			
 
				+      .signal-round-run {
			
 
				+        background-color: #67fc00;
			
 
				 
			
 
				-      &::after {
			
 
				-        background-color: #67FC0044;
			
 
				-        box-shadow: 0 0 1px 1px #c6ff77;
			
 
				+        &::after {
			
 
				+          background-color: #67fc0044;
			
 
				+          box-shadow: 0 0 1px 1px #c6ff77;
			
 
				+        }
			
 
				       }
			
 
				-    }
			
 
				 
			
 
				-    .signal-round-warning {
			
 
				-      background-color: #E9170B;
			
 
				+      .signal-round-warning {
			
 
				+        background-color: #e9170b;
			
 
				 
			
 
				-      &::after {
			
 
				-        background-color: #E9170B44;
			
 
				-        box-shadow: 0 0 1px 1px #E9170B;
			
 
				+        &::after {
			
 
				+          background-color: #e9170b44;
			
 
				+          box-shadow: 0 0 1px 1px #e9170b;
			
 
				+        }
			
 
				       }
			
 
				     }
			
 
				   }
			
 
				-}
			
 
				-:deep(.zxm-radio-wrapper){
			
 
				-  color: #fff !important;
			
 
				-}
			
 
				-
			
 
				+  :deep(.zxm-radio-wrapper) {
			
 
				+    color: #fff !important;
			
 
				+  }
			
 
				 </style>
			
--- a/src/views/vent/monitorManager/compressor/index.vue
+++ b/src/views/vent/monitorManager/compressor/index.vue
@@ -2,8 +2,8 @@
 
				   <div class="nitrogen-box">
			
 
				     <customHeader :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }" :options = 'options' @change="getSelectRow" :optionValue="optionValue">智能注氮管控系统</customHeader>
			
 
				     <!-- <nitrogenHome v-if="activeKey == 'nitrogen_page' && optionValue && optionValue !='1702602347296399361'" :device-id="optionValue" :modal-type="modalType" /> -->
			
 
				-    <nitrogenHome1 v-if="activeKey == 'nitrogen_page' && optionValue" :device-id="optionValue" :modal-type="modalType" />
			
 
				-    <!-- <nitrogenHome2 v-if="activeKey == 'nitrogen_page' && optionValue" :device-id="optionValue" :modal-type="modalType" /> -->
			
 
				+    <!-- <nitrogenHome1 v-if="activeKey == 'nitrogen_page' && optionValue" :device-id="optionValue" :modal-type="modalType" /> -->
			
 
				+    <nitrogenHome2 v-if="activeKey == 'nitrogen_page' && optionValue" :device-id="optionValue" :modal-type="modalType" />
			
 
				     <nitrogenEcharts v-if="activeKey == 'yfj_monitor_echarts'"/>
			
 
				     <nitrogenHistory ref="historyTable" :device-id="optionValue" :device-type="optionType" v-if="activeKey == 'yfj_history'"/>
			
 
				     <nitrogenHandleHistory ref="alarmHistoryTable" v-if="activeKey == 'yfj_handler_history'"/>
			
@@ -16,8 +16,8 @@
 
				 import { ref, onMounted, onUnmounted, nextTick } from 'vue'
			
 
				 import customHeader from '/@/views/vent/comment/components/customHeader.vue';
			
 
				 import nitrogenHome from './components/nitrogenHome.vue'
			
 
				-import nitrogenHome1 from './components/nitrogenHome1.vue'
			
 
				-import nitrogenHome2 from './components/nitrogenHome2.vue'
			
 
				+import nitrogenHome1 from './components/nitrogenHome1.vue' // 布尔台
			
 
				+import nitrogenHome2 from './components/nitrogenHome2.vue' // 保德
			
 
				 import nitrogenEcharts from './components/nitrogenEcharts.vue'
			
 
				 import nitrogenHistory from './components/nitrogenHistory.vue'
			
 
				 import nitrogenHandleHistory from './components/nitrogenHandleHistory.vue'
			
--- a/src/views/vent/monitorManager/nitrogen/components/nitrogenHome.vue
+++ b/src/views/vent/monitorManager/nitrogen/components/nitrogenHome.vue
@@ -1,42 +1,73 @@
 
				 <template>
			
 
				-    <div id="compressor3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
			
 
				-    <div v-show="monitorDataGroupFlag == 1" id="compressorCss3D"  class="threejs-Object-CSS compressorCss3D-box"
			
 
				-        style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px">
			
 
				-        <!-- <a-spin :spinning="loading" /> -->
			
 
				-        <div  v-for="(groupNum, index) in monitorDataGroupNum" :key="index" class="modal-monitor">
			
 
				-          <fourBorderBg :class="`kyj${groupNum}`" :id="`nitrogenMonitor${groupNum}`">
			
 
				-            <div class="title">{{ groupNum }}号空压机 </div>
			
 
				-            <div class="monitor-item">
			
 
				-              <span class="monitor-title">机头温度:</span>
			
 
				-              <span class="monitor-val"><span class="val">{{ monitorData[`PRE${groupNum}_CPR_HeadTemp`] ?
			
 
				-                formatNum(monitorData[`PRE${groupNum}_CPR_HeadTemp`]) : '-' }}</span><span class="unit">℃</span></span>
			
 
				-            </div>
			
 
				-            <div class="monitor-item">
			
 
				-              <span class="monitor-title">冷却温度:</span>
			
 
				-              <span class="monitor-val"><span class="val">{{ monitorData[`PRE${groupNum}_CPR_CoolantTemp`] ?
			
 
				-                formatNum(monitorData[`PRE${groupNum}_CPR_CoolantTemp`]) : '-' }}</span><span class="unit">℃</span></span>
			
 
				-            </div>
			
 
				-            <div class="monitor-item">
			
 
				-              <span class="monitor-title">排气温度:</span>
			
 
				-              <span class="monitor-val"><span class="val">{{ monitorData[`PRE${groupNum}_CPR_ExhaustTemp`] ? formatNum(monitorData[`PRE${groupNum}_CPR_ExhaustTemp`]) : '-' }}</span><span class="unit">℃</span></span>
			
 
				-            </div>
			
 
				-            <div class="signal-item">
			
 
				-              <div class="signal"><span class="monitor-title">运行信号</span><span
			
 
				-                  :class="{ 'signal-round': true, 'signal-round-run': monitorData[`PRE${groupNum}_MOT_Running`] == '1', 'signal-round-gry': monitorData[`PRE${groupNum}_MOT_Running`] != '1' }"></span>
			
 
				-              </div>
			
 
				-              <div class="signal"><span class="monitor-title">故障信号</span><span
			
 
				-                  :class="{ 'signal-round': true, 'signal-round-warning': monitorData[`PRE${groupNum}_MOT_Fault`] == '1', 'signal-round-gry': monitorData[`PRE${groupNum}_MOT_Fault`] != '1' }"></span>
			
 
				-              </div>
			
 
				-            </div>
			
 
				-          </fourBorderBg>
			
 
				-          <fourBorderBg :class="`cqg${groupNum}`" :id="`cqgMonitor${groupNum}`">
			
 
				-            <div class="title">{{ groupNum }}号储气罐 </div>
			
 
				-            <div class="monitor-item">
			
 
				-              <span class="monitor-title">气囊温度:</span>
			
 
				-              <span class="monitor-val"><span class="val">{{ monitorData[`PRE${groupNum}_VLS_Temp`] ?
			
 
				-                formatNum(monitorData[`PRE${groupNum}_VLS_Temp`]) : '-' }}</span><span class="unit">℃</span></span>
			
 
				-            </div>
			
 
				-            <!-- <div class="monitor-item">
			
 
				+  <div id="compressor3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
			
 
				+  <div
			
 
				+    v-show="monitorDataGroupFlag == 1"
			
 
				+    id="compressorCss3D"
			
 
				+    class="threejs-Object-CSS compressorCss3D-box"
			
 
				+    style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px"
			
 
				+  >
			
 
				+    <!-- <a-spin :spinning="loading" /> -->
			
 
				+    <div v-for="(groupNum, index) in monitorDataGroupNum" :key="index" class="modal-monitor">
			
 
				+      <fourBorderBg :class="`kyj${groupNum}`" :id="`nitrogenMonitor${groupNum}`">
			
 
				+        <div class="title">{{ groupNum }}号空压机 </div>
			
 
				+        <div class="monitor-item">
			
 
				+          <span class="monitor-title">机头温度:</span>
			
 
				+          <span class="monitor-val"
			
 
				+            ><span class="val">{{ monitorData[`PRE${groupNum}_CPR_HeadTemp`] ? formatNum(monitorData[`PRE${groupNum}_CPR_HeadTemp`]) : '-' }}</span
			
 
				+            ><span class="unit">℃</span></span
			
 
				+          >
			
 
				+        </div>
			
 
				+        <div class="monitor-item">
			
 
				+          <span class="monitor-title">冷却温度:</span>
			
 
				+          <span class="monitor-val"
			
 
				+            ><span class="val">{{
			
 
				+              monitorData[`PRE${groupNum}_CPR_CoolantTemp`] ? formatNum(monitorData[`PRE${groupNum}_CPR_CoolantTemp`]) : '-'
			
 
				+            }}</span
			
 
				+            ><span class="unit">℃</span></span
			
 
				+          >
			
 
				+        </div>
			
 
				+        <div class="monitor-item">
			
 
				+          <span class="monitor-title">排气温度:</span>
			
 
				+          <span class="monitor-val"
			
 
				+            ><span class="val">{{
			
 
				+              monitorData[`PRE${groupNum}_CPR_ExhaustTemp`] ? formatNum(monitorData[`PRE${groupNum}_CPR_ExhaustTemp`]) : '-'
			
 
				+            }}</span
			
 
				+            ><span class="unit">℃</span></span
			
 
				+          >
			
 
				+        </div>
			
 
				+        <div class="signal-item">
			
 
				+          <div class="signal"
			
 
				+            ><span class="monitor-title">运行信号</span
			
 
				+            ><span
			
 
				+              :class="{
			
 
				+                'signal-round': true,
			
 
				+                'signal-round-run': monitorData[`PRE${groupNum}_MOT_Running`] == '1',
			
 
				+                'signal-round-gry': monitorData[`PRE${groupNum}_MOT_Running`] != '1',
			
 
				+              }"
			
 
				+            ></span>
			
 
				+          </div>
			
 
				+          <div class="signal"
			
 
				+            ><span class="monitor-title">故障信号</span
			
 
				+            ><span
			
 
				+              :class="{
			
 
				+                'signal-round': true,
			
 
				+                'signal-round-warning': monitorData[`PRE${groupNum}_MOT_Fault`] == '1',
			
 
				+                'signal-round-gry': monitorData[`PRE${groupNum}_MOT_Fault`] != '1',
			
 
				+              }"
			
 
				+            ></span>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </fourBorderBg>
			
 
				+      <fourBorderBg :class="`cqg${groupNum}`" :id="`cqgMonitor${groupNum}`">
			
 
				+        <div class="title">{{ groupNum }}号储气罐 </div>
			
 
				+        <div class="monitor-item">
			
 
				+          <span class="monitor-title">气囊温度:</span>
			
 
				+          <span class="monitor-val"
			
 
				+            ><span class="val">{{ monitorData[`PRE${groupNum}_VLS_Temp`] ? formatNum(monitorData[`PRE${groupNum}_VLS_Temp`]) : '-' }}</span
			
 
				+            ><span class="unit">℃</span></span
			
 
				+          >
			
 
				+        </div>
			
 
				+        <!-- <div class="monitor-item">
			
 
				               <span class="monitor-title">气囊压力<span class="unit"></span>:</span>
			
 
				               <span class="monitor-val"><span class="val">{{ monitorData[groupNum - 1] && monitorData[groupNum - 1]['airReceiverPress'] ?
			
 
				                 monitorData[groupNum - 1]['airReceiverPress'] : '-' }}</span><span class="unit">Mpa</span></span>
			
@@ -46,107 +77,139 @@
 
				               <span class="monitor-val"><span class="val">{{ monitorData[groupNum - 1] && monitorData[groupNum - 1]['airReceiverFlow'] ?
			
 
				                 monitorData[groupNum - 1]['airReceiverFlow'] : '-' }}</span><span class="unit">m³/k</span></span>
			
 
				             </div> -->
			
 
				-          </fourBorderBg>
			
 
				-        </div>
			
 
				+      </fourBorderBg>
			
 
				     </div>
			
 
				-    <div class="nitrogen-home">
			
 
				-      <!-- <div style="position: absolute; color: #fff; top: 30px; pointer-events: auto; display: flex;">
			
 
				+  </div>
			
 
				+  <div class="nitrogen-home">
			
 
				+    <!-- <div style="position: absolute; color: #fff; top: 30px; pointer-events: auto; display: flex;">
			
 
				         <span class="tab-button-box" :class="{'tab-button-box-active': monitorDataGroupFlag == 1}" @click="setMonitorGroupNum(monitorDataGroupNum1, 1)">压风系统1</span>
			
 
				         <span class="tab-button-box" :class="{ 'tab-button-box-active': monitorDataGroupFlag == 2 }" @click="setMonitorGroupNum(monitorDataGroupNum2, 2)">压风系统2</span>
			
 
				       </div> -->
			
 
				-      <div class="total-data">
			
 
				-        <div class="vent-flex-row">
			
 
				-          <div class="item">总流量(m³/min)：<span class="val">{{ monitorData[`PreSys_TotalOutPipeFlow${monitorDataGroupFlag}`] ? formatNum(monitorData[`PreSys_TotalOutPipeFlow${monitorDataGroupFlag}`]) : '-' }}</span></div>
			
 
				-          <div class="item">总压力(bar)：<span class="val">{{ monitorData[`PreSys_TotalOutPipePre${monitorDataGroupFlag}`] ? formatNum(monitorData[`PreSys_TotalOutPipePre${monitorDataGroupFlag}`]): '-' }}</span></div>
			
 
				-        </div>
			
 
				-        <div class="" style="margin-left: 30px; margin-top: 10px;">
			
 
				-          <div v-if="Number(monitorData[`PreSys_TotalOutPipeFlow${monitorDataGroupFlag}`]) < 0" style="color: red;">总流量异常</div>
			
 
				-          <div v-if="Number(monitorData[`PreSys_TotalOutPipePre${monitorDataGroupFlag}`]) < 0" style="color: red;">总压力异常</div>
			
 
				-        </div>
			
 
				+    <div class="total-data">
			
 
				+      <div class="vent-flex-row">
			
 
				+        <div class="item"
			
 
				+          >总流量(m³/min)：<span class="val">{{
			
 
				+            monitorData[`PreSys_TotalOutPipeFlow${monitorDataGroupFlag}`]
			
 
				+              ? formatNum(monitorData[`PreSys_TotalOutPipeFlow${monitorDataGroupFlag}`])
			
 
				+              : '-'
			
 
				+          }}</span></div
			
 
				+        >
			
 
				+        <div class="item"
			
 
				+          >总压力(bar)：<span class="val">{{
			
 
				+            monitorData[`PreSys_TotalOutPipePre${monitorDataGroupFlag}`]
			
 
				+              ? formatNum(monitorData[`PreSys_TotalOutPipePre${monitorDataGroupFlag}`])
			
 
				+              : '-'
			
 
				+          }}</span></div
			
 
				+        >
			
 
				       </div>
			
 
				-      <div class="nitrogen-container">
			
 
				-        <div v-if="monitorData['netStatus'] == 0" class="device-state">网络断开</div>
			
 
				-        <div class="top-box">
			
 
				-          <!-- 左边监测数据 -->
			
 
				-          <div class="lr-box left-box">
			
 
				-            <div class="left-container">
			
 
				-              <div class="item item-l" v-for="(groupNum, index) in monitorDataGroupNum" :key="index">
			
 
				-                <div class="monitor-box">
			
 
				-                  <ventBox1>
			
 
				-                    <template #title>
			
 
				-                      <div>{{ groupNum }}号空压机组</div>
			
 
				-                    </template>
			
 
				-                    <template #container>
			
 
				-                      <div class="state-item" v-for="(data, index) in showMonitorData" :key="index">
			
 
				-                        <div class="item-col">
			
 
				-                          <span class="state-title">{{ Object.values(data)[0] }} :</span>
			
 
				-                          <span class="state-val">{{ (monitorData[Object.keys(data)[0].replace('PRE', 'PRE'+ groupNum)])
			
 
				-                            >= 0 ? formatNum(Number(monitorData[Object.keys(data)[0].replace('PRE', 'PRE' + groupNum)])) : '-' }}</span>
			
 
				-                        </div>
			
 
				-                        <div class="item-col">
			
 
				-                          <span class="state-title">{{ Object.values(data)[1] }} :</span>
			
 
				-                          <span class="state-val">{{ (monitorData[Object.keys(data)[0].replace('PRE', 'PRE' + groupNum)])
			
 
				-                            >= 0 ? formatNum(Number(monitorData[Object.keys(data)[0].replace('PRE', 'PRE' + groupNum)])) : '-' }}</span>
			
 
				-                        </div>
			
 
				+      <div class="" style="margin-left: 30px; margin-top: 10px">
			
 
				+        <div v-if="Number(monitorData[`PreSys_TotalOutPipeFlow${monitorDataGroupFlag}`]) < 0" style="color: red">总流量异常</div>
			
 
				+        <div v-if="Number(monitorData[`PreSys_TotalOutPipePre${monitorDataGroupFlag}`]) < 0" style="color: red">总压力异常</div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="nitrogen-container">
			
 
				+      <div v-if="monitorData['netStatus'] == 0" class="device-state">网络断开</div>
			
 
				+      <div class="top-box">
			
 
				+        <!-- 左边监测数据 -->
			
 
				+        <div class="lr-box left-box">
			
 
				+          <div class="left-container">
			
 
				+            <div class="item item-l" v-for="(groupNum, index) in monitorDataGroupNum" :key="index">
			
 
				+              <div class="monitor-box">
			
 
				+                <ventBox1>
			
 
				+                  <template #title>
			
 
				+                    <div>{{ groupNum }}号空压机组</div>
			
 
				+                  </template>
			
 
				+                  <template #container>
			
 
				+                    <div class="state-item" v-for="(data, index) in showMonitorData" :key="index">
			
 
				+                      <div class="item-col">
			
 
				+                        <span class="state-title">{{ Object.values(data)[0] }} :</span>
			
 
				+                        <span class="state-val">{{
			
 
				+                          monitorData[Object.keys(data)[0].replace('PRE', 'PRE' + groupNum)] >= 0
			
 
				+                            ? formatNum(Number(monitorData[Object.keys(data)[0].replace('PRE', 'PRE' + groupNum)]))
			
 
				+                            : '-'
			
 
				+                        }}</span>
			
 
				                       </div>
			
 
				-                    </template>
			
 
				-                  </ventBox1>                
			
 
				-                </div>
			
 
				+                      <div class="item-col">
			
 
				+                        <span class="state-title">{{ Object.values(data)[1] }} :</span>
			
 
				+                        <span class="state-val">{{
			
 
				+                          monitorData[Object.keys(data)[0].replace('PRE', 'PRE' + groupNum)] >= 0
			
 
				+                            ? formatNum(Number(monitorData[Object.keys(data)[0].replace('PRE', 'PRE' + groupNum)]))
			
 
				+                            : '-'
			
 
				+                        }}</span>
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                  </template>
			
 
				+                </ventBox1>
			
 
				               </div>
			
 
				             </div>
			
 
				           </div>
			
 
				-          <!-- 右边控制状态 -->
			
 
				-          <div class="lr-box right-box" style="display: none;">
			
 
				-            <ventBox1>
			
 
				-              <template #title>
			
 
				-                <div>远程控制</div>
			
 
				-              </template>
			
 
				-              <template #container>
			
 
				-                <div class="control-group">
			
 
				-                  <div class="control-item" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
			
 
				-                    <div class="control-item-title">{{ kyjs[groupNum - 1] }}</div>
			
 
				-                    <div class="control-item-state">
			
 
				-                      <a-switch v-model="airCompressorState[groupNum - 1][`compressRunSigF1`]" size="small"  checked-children="开启"
			
 
				-                        un-checked-children="关闭" :disabled="airCompressorState[groupNum - 1][`controlModel`]"
			
 
				-                        @change="handlerDevice(airCompressorState[groupNum - 1])">
			
 
				-                      </a-switch>
			
 
				-                    </div>
			
 
				+        </div>
			
 
				+        <!-- 右边控制状态 -->
			
 
				+        <div class="lr-box right-box" style="display: none">
			
 
				+          <ventBox1>
			
 
				+            <template #title>
			
 
				+              <div>远程控制</div>
			
 
				+            </template>
			
 
				+            <template #container>
			
 
				+              <div class="control-group">
			
 
				+                <div class="control-item" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
			
 
				+                  <div class="control-item-title">{{ kyjs[groupNum - 1] }}</div>
			
 
				+                  <div class="control-item-state">
			
 
				+                    <a-switch
			
 
				+                      v-model="airCompressorState[groupNum - 1][`compressRunSigF1`]"
			
 
				+                      size="small"
			
 
				+                      checked-children="开启"
			
 
				+                      un-checked-children="关闭"
			
 
				+                      :disabled="airCompressorState[groupNum - 1][`controlModel`]"
			
 
				+                      @change="handlerDevice(airCompressorState[groupNum - 1])"
			
 
				+                    />
			
 
				                   </div>
			
 
				-                  <div class="control-item" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
			
 
				-                    <div class="control-item-title">{{ cqgs[groupNum - 1] }}</div>
			
 
				-                    <div class="control-item-state">
			
 
				-                      <a-switch v-model="airCompressorState[groupNum - 1][`compressRunSigF1`]" size="small"  checked-children="开启"
			
 
				-                        un-checked-children="关闭" :disabled="airCompressorState[groupNum - 1][`controlModel`]"
			
 
				-                        @change="handlerDevice(airCompressorState[groupNum - 1])">
			
 
				-                      </a-switch>
			
 
				-                    </div>
			
 
				+                </div>
			
 
				+                <div class="control-item" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
			
 
				+                  <div class="control-item-title">{{ cqgs[groupNum - 1] }}</div>
			
 
				+                  <div class="control-item-state">
			
 
				+                    <a-switch
			
 
				+                      v-model="airCompressorState[groupNum - 1][`compressRunSigF1`]"
			
 
				+                      size="small"
			
 
				+                      checked-children="开启"
			
 
				+                      un-checked-children="关闭"
			
 
				+                      :disabled="airCompressorState[groupNum - 1][`controlModel`]"
			
 
				+                      @change="handlerDevice(airCompressorState[groupNum - 1])"
			
 
				+                    />
			
 
				                   </div>
			
 
				-                  
			
 
				-                  <a-divider style="height: 1px; background-color: #d7d7d755" />
			
 
				-                  <div class="control-btn-group vent-margin-b-20">
			
 
				-                    <div class="control-left-box">
			
 
				-                      <div class="btn-box">
			
 
				-                        <span @click="handlerDevice({ remote: true })">远程</span>
			
 
				-                        <span @click="handlerDevice({ remote: false })">就地</span>
			
 
				-                      </div>
			
 
				-                      <div class="icon-box" :class="{ 'remote-icon-box': true }">
			
 
				-                        <div class="icon"></div>
			
 
				-                      </div>
			
 
				+                </div>
			
 
				+
			
 
				+                <a-divider style="height: 1px; background-color: #d7d7d755" />
			
 
				+                <div class="control-btn-group vent-margin-b-20">
			
 
				+                  <div class="control-left-box">
			
 
				+                    <div class="btn-box">
			
 
				+                      <span @click="handlerDevice({ remote: true })">远程</span>
			
 
				+                      <span @click="handlerDevice({ remote: false })">就地</span>
			
 
				                     </div>
			
 
				-                    <div class="control-right-box">
			
 
				-                      <div class="control-item-title">是否开启联动</div>
			
 
				-                      <div class="item-data-box" >
			
 
				-                        <div :class="{ 'state-icon': true, 'open': monitorData[0] && monitorData[0].linkState, 'close': monitorData[0] && !monitorData[0].linkState }">
			
 
				-                        </div>
			
 
				-                        <div >{{ monitorData[0] && !monitorData[0].linkState ? '不联动' : '联动' }}</div>
			
 
				+                    <div class="icon-box" :class="{ 'remote-icon-box': true }">
			
 
				+                      <div class="icon"></div>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <div class="control-right-box">
			
 
				+                    <div class="control-item-title">是否开启联动</div>
			
 
				+                    <div class="item-data-box">
			
 
				+                      <div
			
 
				+                        :class="{
			
 
				+                          'state-icon': true,
			
 
				+                          open: monitorData[0] && monitorData[0].linkState,
			
 
				+                          close: monitorData[0] && !monitorData[0].linkState,
			
 
				+                        }"
			
 
				+                      >
			
 
				                       </div>
			
 
				+                      <div>{{ monitorData[0] && !monitorData[0].linkState ? '不联动' : '联动' }}</div>
			
 
				                     </div>
			
 
				                   </div>
			
 
				                 </div>
			
 
				-              </template>
			
 
				-            </ventBox1>
			
 
				-            
			
 
				-            <!-- <div class="control-item">
			
 
				+              </div>
			
 
				+            </template>
			
 
				+          </ventBox1>
			
 
				+
			
 
				+          <!-- <div class="control-item">
			
 
				               <div class="control-item-l">
			
 
				                 <span class="round"></span>
			
 
				                 <span>控制模式</span>
			
@@ -157,694 +220,692 @@
 
				                 </a-switch>
			
 
				               </div>
			
 
				             </div> -->
			
 
				-          </div>
			
 
				         </div>
			
 
				       </div>
			
 
				     </div>
			
 
				+  </div>
			
 
				 </template>
			
 
				 <script lang="ts" setup name="nitrogenHome">
			
 
				-import { onMounted, onUnmounted, ref, watch } from 'vue'
			
 
				-import fourBorderBg from '../../../comment/components/fourBorderBg.vue'
			
 
				-import { mountedThree, destroy, setModelType, clearCssText } from '../nitrogen.threejs'
			
 
				-import { list } from '../nitrogen.api'
			
 
				-import ventBox1 from '/@/components/vent/ventBox1.vue'
			
 
				-import { monitorDataGroupNum1, monitorDataGroupNum2, monitorDataGroupNum3, airCompressorState, showMonitorData, monitorData } from '../nitrogen.data'
			
 
				-import { formatNum } from '/@/utils/ventutil'
			
 
				-
			
 
				-
			
 
				-const loading = ref(true)
			
 
				-const monitorDataGroupNum = ref(4)
			
 
				-const monitorDataGroupFlag = ref(1)
			
 
				-const kyjs = ['1号空压机', '2号空压机', '3号空压机', '4号空压机'];
			
 
				-const cqgs = ['1号储气罐', '2号储气罐', '3号储气罐', '4号储气罐'];
			
 
				-
			
 
				-// 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 (timer) {
			
 
				-        timer = null;
			
 
				-      }
			
 
				-      await getMonitor(false);
			
 
				-    }, flag ? 0 : 1000);
			
 
				+  import { onMounted, onUnmounted, ref, watch } from 'vue';
			
 
				+  import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
			
 
				+  import { mountedThree, destroy, setModelType, clearCssText } from '../nitrogen.threejs';
			
 
				+  import { list } from '../nitrogen.api';
			
 
				+  import ventBox1 from '/@/components/vent/ventBox1.vue';
			
 
				+  import {
			
 
				+    monitorDataGroupNum1,
			
 
				+    monitorDataGroupNum2,
			
 
				+    monitorDataGroupNum3,
			
 
				+    airCompressorState,
			
 
				+    showMonitorData,
			
 
				+    monitorData,
			
 
				+  } from '../nitrogen.data';
			
 
				+  import { formatNum } from '/@/utils/ventutil';
			
 
				+
			
 
				+  const loading = ref(true);
			
 
				+  const monitorDataGroupNum = ref(4);
			
 
				+  const monitorDataGroupFlag = ref(1);
			
 
				+  const kyjs = ['1号空压机', '2号空压机', '3号空压机', '4号空压机'];
			
 
				+  const cqgs = ['1号储气罐', '2号储气罐', '3号储气罐', '4号储气罐'];
			
 
				+
			
 
				+  // 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 (timer) {
			
 
				+            timer = null;
			
 
				+          }
			
 
				+          await getMonitor(false);
			
 
				+        },
			
 
				+        flag ? 0 : 1000
			
 
				+      );
			
 
				+    }
			
 
				   }
			
 
				-};
			
 
				 
			
 
				-async function getDataSource() {
			
 
				-  const res = await list({ devicetype: 'forcFan', pagetype: 'normal' });
			
 
				-  let dataSource = res.msgTxt[0].datalist[0];
			
 
				-  if(dataSource){
			
 
				-    monitorData.value = Object.assign(dataSource, dataSource.readData);
			
 
				-  }
			
 
				-  // dataSource.forEach((data, index) => {
			
 
				-  //   const item = data.readData;
			
 
				-  //   Object.assign(item, data);
			
 
				-  //   item.compressRunSigF1 = item.compressRunSigF1 ? true : false
			
 
				-  //   airCompressorState.value[index].id = item.id
			
 
				-  //   airCompressorState.value[index].compressRunSigF1 = item.compressRunSigF1
			
 
				-  //   airCompressorState.value[index].controlModel = item.controlModel === 'LOC' ? true : false
			
 
				-  //   monitorData.value[index] = item
			
 
				-  // });
			
 
				-  // monitorDataGroupNum.value = monitorData.value.length
			
 
				-  loading.value = false
			
 
				-};
			
 
				-
			
 
				-function handlerDevice(data) {
			
 
				-  // if (data.length < 1) return
			
 
				-  // handleAirCompressor({ id: data.id, compressRunF1: data.compressRunSigF1 }).then(res => {
			
 
				-  //   if (res.success) {
			
 
				-  //     message.success('操作成功')
			
 
				-  //   } else {
			
 
				-  //     message.warning(data.msg)
			
 
				-  //   }
			
 
				-  // })
			
 
				-};
			
 
				-function resetDevice(data) {
			
 
				-
			
 
				-}
			
 
				-
			
 
				-function handlerControlModel(data) {
			
 
				-
			
 
				-}
			
 
				-
			
 
				-watch(monitorDataGroupFlag, (newVal) => {
			
 
				-
			
 
				-  if(newVal == 1){
			
 
				-    setModelType('compressor1')
			
 
				-  }
			
 
				-  if (newVal == 2) {
			
 
				-    setModelType('compressor2')
			
 
				+  async function getDataSource() {
			
 
				+    const res = await list({ devicetype: 'forcFan', pagetype: 'normal' });
			
 
				+    let dataSource = res.msgTxt[0].datalist[0];
			
 
				+    if (dataSource) {
			
 
				+      monitorData.value = Object.assign(dataSource, dataSource.readData);
			
 
				+    }
			
 
				+    // dataSource.forEach((data, index) => {
			
 
				+    //   const item = data.readData;
			
 
				+    //   Object.assign(item, data);
			
 
				+    //   item.compressRunSigF1 = item.compressRunSigF1 ? true : false
			
 
				+    //   airCompressorState.value[index].id = item.id
			
 
				+    //   airCompressorState.value[index].compressRunSigF1 = item.compressRunSigF1
			
 
				+    //   airCompressorState.value[index].controlModel = item.controlModel === 'LOC' ? true : false
			
 
				+    //   monitorData.value[index] = item
			
 
				+    // });
			
 
				+    // monitorDataGroupNum.value = monitorData.value.length
			
 
				+    loading.value = false;
			
 
				   }
			
 
				-})
			
 
				-
			
 
				-onMounted(async () => {
			
 
				-  mountedThree(monitorDataGroupNum3).then(async() => {
			
 
				-    await getMonitor(true)
			
 
				-    setModelType('compressor1')
			
 
				-  })
			
 
				-})
			
 
				-
			
 
				-onUnmounted(() => {
			
 
				-  destroy();
			
 
				-  if (timer) {
			
 
				-    clearTimeout(timer);
			
 
				-    timer = undefined;
			
 
				+
			
 
				+  function handlerDevice(data) {
			
 
				+    // if (data.length < 1) return
			
 
				+    // handleAirCompressor({ id: data.id, compressRunF1: data.compressRunSigF1 }).then(res => {
			
 
				+    //   if (res.success) {
			
 
				+    //     message.success('操作成功')
			
 
				+    //   } else {
			
 
				+    //     message.warning(data.msg)
			
 
				+    //   }
			
 
				+    // })
			
 
				   }
			
 
				-});
			
 
				+  function resetDevice(data) {}
			
 
				+
			
 
				+  function handlerControlModel(data) {}
			
 
				 
			
 
				+  watch(monitorDataGroupFlag, (newVal) => {
			
 
				+    if (newVal == 1) {
			
 
				+      setModelType('compressor1');
			
 
				+    }
			
 
				+    if (newVal == 2) {
			
 
				+      setModelType('compressor2');
			
 
				+    }
			
 
				+  });
			
 
				+
			
 
				+  onMounted(async () => {
			
 
				+    mountedThree(monitorDataGroupNum3).then(async () => {
			
 
				+      await getMonitor(true);
			
 
				+      setModelType('compressor1');
			
 
				+    });
			
 
				+  });
			
 
				+
			
 
				+  onUnmounted(() => {
			
 
				+    destroy();
			
 
				+    if (timer) {
			
 
				+      clearTimeout(timer);
			
 
				+      timer = undefined;
			
 
				+    }
			
 
				+  });
			
 
				 </script>
			
 
				 
			
 
				 <style lang="less" scoped>
			
 
				-@ventSpace: zxm;
			
 
				-
			
 
				-.nitrogen-home {
			
 
				-  width: 100%;
			
 
				-  height: 100%;
			
 
				-  display: flex;
			
 
				-  justify-content: center;
			
 
				-  position: relative;
			
 
				-  .total-data{
			
 
				-    position: absolute;
			
 
				-    color: #e4cd00;
			
 
				-    z-index: 9;
			
 
				-    top: 50px;
			
 
				-    right: 30px;
			
 
				-    // display: flex;
			
 
				-    font-size: 18px;
			
 
				-    .item{
			
 
				-      width: 200px;
			
 
				-      margin-left: 30px;
			
 
				-      .val{
			
 
				-        color: #00d8ff;
			
 
				+  @ventSpace: zxm;
			
 
				+
			
 
				+  .nitrogen-home {
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    display: flex;
			
 
				+    justify-content: center;
			
 
				+    position: relative;
			
 
				+    .total-data {
			
 
				+      position: absolute;
			
 
				+      color: #e4cd00;
			
 
				+      z-index: 9;
			
 
				+      top: 50px;
			
 
				+      right: 30px;
			
 
				+      // display: flex;
			
 
				+      font-size: 18px;
			
 
				+      .item {
			
 
				+        width: 200px;
			
 
				+        margin-left: 30px;
			
 
				+        .val {
			
 
				+          color: #00d8ff;
			
 
				+        }
			
 
				       }
			
 
				     }
			
 
				   }
			
 
				 
			
 
				-}
			
 
				-
			
 
				-.compressorCss3D-box {
			
 
				-  .modal-monitor {
			
 
				-    position: absolute;
			
 
				-    left: 0px;
			
 
				-    top: 0px;
			
 
				-  }
			
 
				-
			
 
				-  &:deep(.win) {
			
 
				-    margin: 0 !important;
			
 
				-    background: #00000044;
			
 
				-  }
			
 
				+  .compressorCss3D-box {
			
 
				+    .modal-monitor {
			
 
				+      position: absolute;
			
 
				+      left: 0px;
			
 
				+      top: 0px;
			
 
				+    }
			
 
				 
			
 
				-  &:deep(.main) {
			
 
				-    .title {
			
 
				-      height: 34px;
			
 
				-      text-align: center;
			
 
				-      font-weight: 600;
			
 
				-      color: #7AF5FF;
			
 
				-      // background-image: url('../../../assets/img/yfj/light.png');
			
 
				-      background-repeat: no-repeat;
			
 
				-      background-position-x: center;
			
 
				-      background-position-y: 100%;
			
 
				-      background-size: 80%;
			
 
				-      font-size: 16px;
			
 
				+    &:deep(.win) {
			
 
				+      margin: 0 !important;
			
 
				+      background: #00000044;
			
 
				     }
			
 
				 
			
 
				-    .monitor-item {
			
 
				-      display: flex;
			
 
				-      flex-direction: row;
			
 
				-      width: auto;
			
 
				-      margin-bottom: 3px;
			
 
				-      .monitor-val {
			
 
				-        color: #ffb700;
			
 
				+    &:deep(.main) {
			
 
				+      .title {
			
 
				+        height: 34px;
			
 
				+        text-align: center;
			
 
				+        font-weight: 600;
			
 
				+        color: #7af5ff;
			
 
				+        // background-image: url('../../../assets/img/yfj/light.png');
			
 
				+        background-repeat: no-repeat;
			
 
				+        background-position-x: center;
			
 
				+        background-position-y: 100%;
			
 
				+        background-size: 80%;
			
 
				+        font-size: 16px;
			
 
				+      }
			
 
				+
			
 
				+      .monitor-item {
			
 
				         display: flex;
			
 
				+        flex-direction: row;
			
 
				         width: auto;
			
 
				+        margin-bottom: 3px;
			
 
				+        .monitor-val {
			
 
				+          color: #ffb700;
			
 
				+          display: flex;
			
 
				+          width: auto;
			
 
				 
			
 
				-        .val {
			
 
				-          width: 80px;
			
 
				-          font-size: 14px;
			
 
				-        }
			
 
				-
			
 
				-        .unit {
			
 
				-          color: #ffffffbb;
			
 
				-          font-size: 14px;
			
 
				+          .val {
			
 
				+            width: 80px;
			
 
				+            font-size: 14px;
			
 
				+          }
			
 
				 
			
 
				+          .unit {
			
 
				+            color: #ffffffbb;
			
 
				+            font-size: 14px;
			
 
				+          }
			
 
				         }
			
 
				       }
			
 
				-    }
			
 
				 
			
 
				-    .monitor-title {
			
 
				-      width: 100px;
			
 
				-      color: #7AF5FF;
			
 
				-      font-weight: 400;
			
 
				-      font-size: 14px;
			
 
				-    }
			
 
				+      .monitor-title {
			
 
				+        width: 100px;
			
 
				+        color: #7af5ff;
			
 
				+        font-weight: 400;
			
 
				+        font-size: 14px;
			
 
				+      }
			
 
				 
			
 
				-    .signal-item {
			
 
				-      display: flex;
			
 
				-      justify-content: space-between;
			
 
				+      .signal-item {
			
 
				+        display: flex;
			
 
				+        justify-content: space-between;
			
 
				 
			
 
				-      // margin-bottom: 5px;
			
 
				-      .signal-round {
			
 
				-        display: inline-block;
			
 
				-        width: 8px;
			
 
				-        height: 8px;
			
 
				-        border-radius: 50%;
			
 
				-        margin: 0 10px;
			
 
				-        position: relative;
			
 
				-
			
 
				-        &::after {
			
 
				-          display: block;
			
 
				-          content: '';
			
 
				-          position: absolute;
			
 
				-          width: 12px;
			
 
				-          height: 12px;
			
 
				-          top: -2px;
			
 
				-          left: -2px;
			
 
				+        // margin-bottom: 5px;
			
 
				+        .signal-round {
			
 
				+          display: inline-block;
			
 
				+          width: 8px;
			
 
				+          height: 8px;
			
 
				           border-radius: 50%;
			
 
				+          margin: 0 10px;
			
 
				+          position: relative;
			
 
				+
			
 
				+          &::after {
			
 
				+            display: block;
			
 
				+            content: '';
			
 
				+            position: absolute;
			
 
				+            width: 12px;
			
 
				+            height: 12px;
			
 
				+            top: -2px;
			
 
				+            left: -2px;
			
 
				+            border-radius: 50%;
			
 
				+          }
			
 
				         }
			
 
				-      }
			
 
				 
			
 
				-      .signal-round-gry {
			
 
				-        background-color: #858585;
			
 
				+        .signal-round-gry {
			
 
				+          background-color: #858585;
			
 
				 
			
 
				-        &::after {
			
 
				-          background-color: #85858544;
			
 
				-          box-shadow: 0 0 1px 1px #85858599;
			
 
				+          &::after {
			
 
				+            background-color: #85858544;
			
 
				+            box-shadow: 0 0 1px 1px #85858599;
			
 
				+          }
			
 
				         }
			
 
				-      }
			
 
				 
			
 
				-      .signal-round-run {
			
 
				-        background-color: #67FC00;
			
 
				+        .signal-round-run {
			
 
				+          background-color: #67fc00;
			
 
				 
			
 
				-        &::after {
			
 
				-          background-color: #67FC0044;
			
 
				-          box-shadow: 0 0 1px 1px #c6ff77;
			
 
				+          &::after {
			
 
				+            background-color: #67fc0044;
			
 
				+            box-shadow: 0 0 1px 1px #c6ff77;
			
 
				+          }
			
 
				         }
			
 
				-      }
			
 
				 
			
 
				-      .signal-round-warning {
			
 
				-        background-color: #E9170B;
			
 
				+        .signal-round-warning {
			
 
				+          background-color: #e9170b;
			
 
				 
			
 
				-        &::after {
			
 
				-          background-color: #E9170B44;
			
 
				-          box-shadow: 0 0 1px 1px #E9170B;
			
 
				+          &::after {
			
 
				+            background-color: #e9170b44;
			
 
				+            box-shadow: 0 0 1px 1px #e9170b;
			
 
				+          }
			
 
				         }
			
 
				       }
			
 
				     }
			
 
				   }
			
 
				-}
			
 
				-
			
 
				-.nitrogen-home {
			
 
				-  width: 100%;
			
 
				-  height: calc(100% - 100px);
			
 
				-  position: fixed;
			
 
				-  z-index: 99;
			
 
				-  display: flex;
			
 
				-  flex-direction: column;
			
 
				-  justify-content: center;
			
 
				-  align-items: center;
			
 
				-  pointer-events: none;
			
 
				-  top: 60px;
			
 
				-  .nitrogen-container {
			
 
				+
			
 
				+  .nitrogen-home {
			
 
				     width: 100%;
			
 
				-    height: calc(100%);
			
 
				+    height: calc(100% - 100px);
			
 
				+    position: fixed;
			
 
				+    z-index: 99;
			
 
				     display: flex;
			
 
				-    justify-content: space-between;
			
 
				-    margin-bottom: 100px;
			
 
				-    position: relative;
			
 
				-    .device-state{
			
 
				+    flex-direction: column;
			
 
				+    justify-content: center;
			
 
				+    align-items: center;
			
 
				+    pointer-events: none;
			
 
				+    top: 60px;
			
 
				+    .nitrogen-container {
			
 
				       width: 100%;
			
 
				-      position: absolute;
			
 
				-      top: 20px;
			
 
				-      color: #e90000;
			
 
				-      display: flex;
			
 
				-      justify-content: center;
			
 
				-      font-size: 20px;
			
 
				-    }
			
 
				-    .top-box {
			
 
				-      width: 100%;
			
 
				-      padding: 10px;
			
 
				-      overflow: hidden;
			
 
				+      height: calc(100%);
			
 
				       display: flex;
			
 
				       justify-content: space-between;
			
 
				-
			
 
				-      .lr-box {
			
 
				+      margin-bottom: 100px;
			
 
				+      position: relative;
			
 
				+      .device-state {
			
 
				+        width: 100%;
			
 
				+        position: absolute;
			
 
				+        top: 20px;
			
 
				+        color: #e90000;
			
 
				         display: flex;
			
 
				-        flex-direction: column;
			
 
				-        position: relative;
			
 
				-        z-index: 9999;
			
 
				-        pointer-events: auto;
			
 
				+        justify-content: center;
			
 
				+        font-size: 20px;
			
 
				       }
			
 
				-
			
 
				-      .item {
			
 
				-        width: 285px;
			
 
				-        height: auto;
			
 
				-        position: relative;
			
 
				-        border-radius: 5px;
			
 
				-        margin-top: 10px;
			
 
				-        margin-bottom: 0px;
			
 
				-        pointer-events: auto;
			
 
				-        color: #fff;
			
 
				+      .top-box {
			
 
				+        width: 100%;
			
 
				+        padding: 10px;
			
 
				         overflow: hidden;
			
 
				+        display: flex;
			
 
				+        justify-content: space-between;
			
 
				 
			
 
				-        .control-item {
			
 
				-          height: auto;
			
 
				-          min-height: 35px;
			
 
				+        .lr-box {
			
 
				           display: flex;
			
 
				-          flex-direction: row;
			
 
				-          justify-content: space-between;
			
 
				-          align-items: center;
			
 
				-          padding: 5px;
			
 
				-          margin: 0 10px 0 3px;
			
 
				+          flex-direction: column;
			
 
				+          position: relative;
			
 
				+          z-index: 9999;
			
 
				           pointer-events: auto;
			
 
				-          background: linear-gradient(to right, #0063CD22, #0063CD04);
			
 
				-
			
 
				-          margin-bottom: 5px;
			
 
				-          border-width: 1px;
			
 
				-          border-style: dashed;
			
 
				+        }
			
 
				 
			
 
				-          border-image: linear-gradient(to right, #008ccd66, #0063CD04)1 1;
			
 
				+        .item {
			
 
				+          width: 285px;
			
 
				+          height: auto;
			
 
				+          position: relative;
			
 
				           border-radius: 5px;
			
 
				+          margin-top: 10px;
			
 
				+          margin-bottom: 0px;
			
 
				+          pointer-events: auto;
			
 
				+          color: #fff;
			
 
				+          overflow: hidden;
			
 
				 
			
 
				-          &:last-child {
			
 
				-            margin-bottom: 0
			
 
				-          }
			
 
				-
			
 
				-          .control-item-l {
			
 
				+          .control-item {
			
 
				+            height: auto;
			
 
				+            min-height: 35px;
			
 
				             display: flex;
			
 
				+            flex-direction: row;
			
 
				+            justify-content: space-between;
			
 
				             align-items: center;
			
 
				-            font-size: 14px;
			
 
				+            padding: 5px;
			
 
				+            margin: 0 10px 0 3px;
			
 
				+            pointer-events: auto;
			
 
				+            background: linear-gradient(to right, #0063cd22, #0063cd04);
			
 
				 
			
 
				-            .round {
			
 
				-              display: inline-block;
			
 
				-              width: 3px;
			
 
				-              height: 3px;
			
 
				-              padding: 1px;
			
 
				-              border-radius: 50%;
			
 
				-              background-color: #3DF6FF;
			
 
				-              margin-right: 5px;
			
 
				-              box-shadow: 0 0 1px 1px #64f7ff;
			
 
				+            margin-bottom: 5px;
			
 
				+            border-width: 1px;
			
 
				+            border-style: dashed;
			
 
				+
			
 
				+            border-image: linear-gradient(to right, #008ccd66, #0063cd04) 1 1;
			
 
				+            border-radius: 5px;
			
 
				+
			
 
				+            &:last-child {
			
 
				+              margin-bottom: 0;
			
 
				             }
			
 
				-          }
			
 
				 
			
 
				-          .control-item-r {
			
 
				-            text-align: right;
			
 
				-          }
			
 
				+            .control-item-l {
			
 
				+              display: flex;
			
 
				+              align-items: center;
			
 
				+              font-size: 14px;
			
 
				 
			
 
				-          .button-box {
			
 
				-            position: relative;
			
 
				-            padding: 5px;
			
 
				-            border: 1px transparent solid;
			
 
				-            background-clip: border-box;
			
 
				-            border-radius: 5px;
			
 
				-            margin-left: 8px;
			
 
				-          }
			
 
				+              .round {
			
 
				+                display: inline-block;
			
 
				+                width: 3px;
			
 
				+                height: 3px;
			
 
				+                padding: 1px;
			
 
				+                border-radius: 50%;
			
 
				+                background-color: #3df6ff;
			
 
				+                margin-right: 5px;
			
 
				+                box-shadow: 0 0 1px 1px #64f7ff;
			
 
				+              }
			
 
				+            }
			
 
				 
			
 
				-          .a-button {
			
 
				-            pointer-events: auto;
			
 
				-          }
			
 
				+            .control-item-r {
			
 
				+              text-align: right;
			
 
				+            }
			
 
				 
			
 
				-          &::v-deep .a-button--mini {
			
 
				-            padding: 6px 10px;
			
 
				-          }
			
 
				+            .button-box {
			
 
				+              position: relative;
			
 
				+              padding: 5px;
			
 
				+              border: 1px transparent solid;
			
 
				+              background-clip: border-box;
			
 
				+              border-radius: 5px;
			
 
				+              margin-left: 8px;
			
 
				+            }
			
 
				 
			
 
				-          &::v-deep .a-button--mini.is-round {
			
 
				-            padding: 6px 10px;
			
 
				-          }
			
 
				-        }
			
 
				+            .a-button {
			
 
				+              pointer-events: auto;
			
 
				+            }
			
 
				 
			
 
				-        .base-title {
			
 
				-          width: calc(100% - 60px);
			
 
				-          text-align: center;
			
 
				-          color: #00d8ff;
			
 
				-        }
			
 
				+            &::v-deep .a-button--mini {
			
 
				+              padding: 6px 10px;
			
 
				+            }
			
 
				 
			
 
				-        .state-item {
			
 
				-          display: flex;
			
 
				-          flex-direction: row;
			
 
				-          padding: 5px;
			
 
				+            &::v-deep .a-button--mini.is-round {
			
 
				+              padding: 6px 10px;
			
 
				+            }
			
 
				+          }
			
 
				 
			
 
				-          .item-col {
			
 
				-            width: 50%;
			
 
				+          .base-title {
			
 
				+            width: calc(100% - 60px);
			
 
				+            text-align: center;
			
 
				+            color: #00d8ff;
			
 
				+          }
			
 
				+
			
 
				+          .state-item {
			
 
				             display: flex;
			
 
				-            justify-content: center;
			
 
				-            align-items: center;
			
 
				-            padding-right: 4px;
			
 
				+            flex-direction: row;
			
 
				+            padding: 5px;
			
 
				 
			
 
				-            .state-title {
			
 
				-              color: #ffffffcc;
			
 
				-              flex: 9;
			
 
				-              font-size: 14px;
			
 
				+            .item-col {
			
 
				+              width: 50%;
			
 
				+              display: flex;
			
 
				+              justify-content: center;
			
 
				+              align-items: center;
			
 
				+              padding-right: 4px;
			
 
				+
			
 
				+              .state-title {
			
 
				+                color: #ffffffcc;
			
 
				+                flex: 9;
			
 
				+                font-size: 14px;
			
 
				 
			
 
				-              .unit {
			
 
				-                // color: #ffffffbb;
			
 
				+                .unit {
			
 
				+                  // color: #ffffffbb;
			
 
				+                }
			
 
				               }
			
 
				-            }
			
 
				 
			
 
				-            .state-val {
			
 
				-              flex: 1;
			
 
				-              color: #e4a300;
			
 
				-              margin-right: 5px;
			
 
				-              text-align: right;
			
 
				-              font-size: 14px;
			
 
				+              .state-val {
			
 
				+                flex: 1;
			
 
				+                color: #e4a300;
			
 
				+                margin-right: 5px;
			
 
				+                text-align: right;
			
 
				+                font-size: 14px;
			
 
				+              }
			
 
				             }
			
 
				           }
			
 
				-        }
			
 
				 
			
 
				-        .signal-box {
			
 
				-          margin: 5px 0;
			
 
				-          display: flex;
			
 
				-          align-items: center;
			
 
				+          .signal-box {
			
 
				+            margin: 5px 0;
			
 
				+            display: flex;
			
 
				+            align-items: center;
			
 
				 
			
 
				-          .signal-title {
			
 
				-            color: #7AF5FF;
			
 
				-            margin: 0 5px;
			
 
				-          }
			
 
				+            .signal-title {
			
 
				+              color: #7af5ff;
			
 
				+              margin: 0 5px;
			
 
				+            }
			
 
				 
			
 
				-          &:last-child {
			
 
				-            margin-right: 0px;
			
 
				+            &:last-child {
			
 
				+              margin-right: 0px;
			
 
				+            }
			
 
				           }
			
 
				-        }
			
 
				 
			
 
				-        .list-item {
			
 
				-          padding: 0 10px;
			
 
				-          display: flex;
			
 
				-          justify-content: space-between;
			
 
				-          align-items: center;
			
 
				+          .list-item {
			
 
				+            padding: 0 10px;
			
 
				+            display: flex;
			
 
				+            justify-content: space-between;
			
 
				+            align-items: center;
			
 
				 
			
 
				-          .item-data-key {
			
 
				-            color: #ffffff99;
			
 
				+            .item-data-key {
			
 
				+              color: #ffffff99;
			
 
				+            }
			
 
				           }
			
 
				-        }
			
 
				 
			
 
				-        .item-data-box {
			
 
				-          color: #fff;
			
 
				+          .item-data-box {
			
 
				+            color: #fff;
			
 
				 
			
 
				-          .state-icon {
			
 
				-            display: inline-block;
			
 
				-            width: 12px;
			
 
				-            height: 12px;
			
 
				-            border-radius: 12px;
			
 
				-          }
			
 
				+            .state-icon {
			
 
				+              display: inline-block;
			
 
				+              width: 12px;
			
 
				+              height: 12px;
			
 
				+              border-radius: 12px;
			
 
				+            }
			
 
				 
			
 
				-          .open {
			
 
				-            border: 5px solid #133a56;
			
 
				-            background: #4ecb73;
			
 
				-          }
			
 
				+            .open {
			
 
				+              border: 5px solid #133a56;
			
 
				+              background: #4ecb73;
			
 
				+            }
			
 
				 
			
 
				-          .close {
			
 
				-            border: 5px solid #192961;
			
 
				-            background: #6d7898;
			
 
				+            .close {
			
 
				+              border: 5px solid #192961;
			
 
				+              background: #6d7898;
			
 
				+            }
			
 
				           }
			
 
				         }
			
 
				-      }
			
 
				 
			
 
				-      .item-l {
			
 
				-        width: 335px;
			
 
				+        .item-l {
			
 
				+          width: 335px;
			
 
				 
			
 
				-        .monitor-box {
			
 
				-          // width: 335px;
			
 
				-          background-color: #ffffff05;
			
 
				-          // margin-left: 2px;
			
 
				-          // border-radius: 5px;
			
 
				-          // backdrop-filter: blur(10px);
			
 
				+          .monitor-box {
			
 
				+            // width: 335px;
			
 
				+            background-color: #ffffff05;
			
 
				+            // margin-left: 2px;
			
 
				+            // border-radius: 5px;
			
 
				+            // backdrop-filter: blur(10px);
			
 
				+          }
			
 
				         }
			
 
				-      }
			
 
				 
			
 
				-      .right-box {
			
 
				-         width: 330px;
			
 
				-        .control-group{
			
 
				-          display: flex;
			
 
				-          // justify-content: space-around;
			
 
				-          flex-wrap: wrap;
			
 
				-          .control-item {
			
 
				-            
			
 
				+        .right-box {
			
 
				+          width: 330px;
			
 
				+          .control-group {
			
 
				             display: flex;
			
 
				-            flex-direction: column;
			
 
				-            justify-content: center;
			
 
				-            align-items: center;
			
 
				-            padding: 0 4px;
			
 
				-            .control-item-title{
			
 
				-              color: #A6DCE9;
			
 
				-              position: relative;
			
 
				-              top: 5px;
			
 
				-            }
			
 
				-            .control-item-state{
			
 
				-              width: 94px;
			
 
				-              height: 47px;
			
 
				-              background: url('/@/assets/images/vent/control-switch-bg.png');
			
 
				+            // justify-content: space-around;
			
 
				+            flex-wrap: wrap;
			
 
				+            .control-item {
			
 
				               display: flex;
			
 
				+              flex-direction: column;
			
 
				               justify-content: center;
			
 
				               align-items: center;
			
 
				-              color: #fff;
			
 
				-            }
			
 
				-          
			
 
				-            .button-box {
			
 
				-              position: relative;
			
 
				-              padding: 5px;
			
 
				-              border: 1px transparent solid;
			
 
				-              background-clip: border-box;
			
 
				-              border-radius: 5px;
			
 
				-              margin-left: 8px;
			
 
				-            }
			
 
				+              padding: 0 4px;
			
 
				+              .control-item-title {
			
 
				+                color: #a6dce9;
			
 
				+                position: relative;
			
 
				+                top: 5px;
			
 
				+              }
			
 
				+              .control-item-state {
			
 
				+                width: 94px;
			
 
				+                height: 47px;
			
 
				+                background: url('/@/assets/images/vent/control-switch-bg.png');
			
 
				+                display: flex;
			
 
				+                justify-content: center;
			
 
				+                align-items: center;
			
 
				+                color: #fff;
			
 
				+              }
			
 
				 
			
 
				-            .a-button {
			
 
				-              pointer-events: auto;
			
 
				-            }
			
 
				+              .button-box {
			
 
				+                position: relative;
			
 
				+                padding: 5px;
			
 
				+                border: 1px transparent solid;
			
 
				+                background-clip: border-box;
			
 
				+                border-radius: 5px;
			
 
				+                margin-left: 8px;
			
 
				+              }
			
 
				 
			
 
				-            &::v-deep .a-button--mini {
			
 
				-              padding: 6px 10px;
			
 
				-            }
			
 
				+              .a-button {
			
 
				+                pointer-events: auto;
			
 
				+              }
			
 
				 
			
 
				-            &::v-deep .a-button--mini.is-round {
			
 
				-              padding: 6px 10px;
			
 
				+              &::v-deep .a-button--mini {
			
 
				+                padding: 6px 10px;
			
 
				+              }
			
 
				+
			
 
				+              &::v-deep .a-button--mini.is-round {
			
 
				+                padding: 6px 10px;
			
 
				+              }
			
 
				             }
			
 
				           }
			
 
				-
			
 
				-        }
			
 
				-        .control-btn-group{
			
 
				-          width: 100%;
			
 
				-          display: flex;
			
 
				-          flex-direction: row;
			
 
				-          justify-content: space-between;
			
 
				-          align-items: center;
			
 
				-          .control-left-box{
			
 
				+          .control-btn-group {
			
 
				+            width: 100%;
			
 
				             display: flex;
			
 
				-            flex-direction: column;
			
 
				-            justify-content: center;
			
 
				+            flex-direction: row;
			
 
				+            justify-content: space-between;
			
 
				             align-items: center;
			
 
				-            padding: 0 20px;
			
 
				-            .btn-box{
			
 
				-              width: 100px;
			
 
				-              color: #fff;
			
 
				-              display: flex;
			
 
				-              justify-content: space-between;
			
 
				-              span{
			
 
				-                display: inline-block;
			
 
				-                padding: 2px 8px;
			
 
				-                background: #007099;
			
 
				-                border-radius: 4px;
			
 
				-                border: 1px solid rgb(125, 230, 249);
			
 
				-                cursor: pointer;
			
 
				-                &:hover{
			
 
				-                  background: #005574;
			
 
				-                }
			
 
				-              }
			
 
				-            }
			
 
				-            .icon-box{
			
 
				-              width: 60px;
			
 
				-              height: 60px;
			
 
				-              border-radius: 30px;
			
 
				-              border: 2px solid #00bcdd;
			
 
				-              box-shadow: 0 0 20px #ffffff88;
			
 
				+            .control-left-box {
			
 
				               display: flex;
			
 
				+              flex-direction: column;
			
 
				               justify-content: center;
			
 
				               align-items: center;
			
 
				-              margin-top: 20px;
			
 
				-                
			
 
				-              .icon{
			
 
				-                width: 18px;
			
 
				-                height: 18px;
			
 
				-                border-radius: 9px;
			
 
				-                border: 3px solid #d7f9ff;
			
 
				-                position: relative;
			
 
				-                background: #00bcdd;
			
 
				-                &::before{
			
 
				-                  position: absolute;
			
 
				-                  content: '';
			
 
				-                  width: 2px;
			
 
				-                  height: 12px;
			
 
				-                  background-color: #00bcdd;
			
 
				-                  left: 6px;
			
 
				-                  top: -16px;
			
 
				-                }
			
 
				-                &::after{
			
 
				-                  position: absolute;
			
 
				-                  content: '';
			
 
				-                  width: 2px;
			
 
				-                  height: 12px;
			
 
				-                  left: 6px;
			
 
				-                  top: 17px;
			
 
				-                  background-color: #00d9ff;
			
 
				+              padding: 0 20px;
			
 
				+              .btn-box {
			
 
				+                width: 100px;
			
 
				+                color: #fff;
			
 
				+                display: flex;
			
 
				+                justify-content: space-between;
			
 
				+                span {
			
 
				+                  display: inline-block;
			
 
				+                  padding: 2px 8px;
			
 
				+                  background: #007099;
			
 
				+                  border-radius: 4px;
			
 
				+                  border: 1px solid rgb(125, 230, 249);
			
 
				+                  cursor: pointer;
			
 
				+                  &:hover {
			
 
				+                    background: #005574;
			
 
				+                  }
			
 
				                 }
			
 
				               }
			
 
				-            }
			
 
				-            .remote-icon-box{
			
 
				-              transform: rotate(30deg);
			
 
				-              animation: iconRotate 1s linear;
			
 
				-            }
			
 
				-            .remote-icon-box1{
			
 
				-              transform: rotate(-30deg);
			
 
				-              animation: iconRotate1 1s linear;
			
 
				-            }
			
 
				-
			
 
				-            @keyframes iconRotate{
			
 
				-              from{
			
 
				-                transform: rotate(-30deg);
			
 
				-              }
			
 
				-              to {
			
 
				-                transform: rotate(30deg);
			
 
				+              .icon-box {
			
 
				+                width: 60px;
			
 
				+                height: 60px;
			
 
				+                border-radius: 30px;
			
 
				+                border: 2px solid #00bcdd;
			
 
				+                box-shadow: 0 0 20px #ffffff88;
			
 
				+                display: flex;
			
 
				+                justify-content: center;
			
 
				+                align-items: center;
			
 
				+                margin-top: 20px;
			
 
				+
			
 
				+                .icon {
			
 
				+                  width: 18px;
			
 
				+                  height: 18px;
			
 
				+                  border-radius: 9px;
			
 
				+                  border: 3px solid #d7f9ff;
			
 
				+                  position: relative;
			
 
				+                  background: #00bcdd;
			
 
				+                  &::before {
			
 
				+                    position: absolute;
			
 
				+                    content: '';
			
 
				+                    width: 2px;
			
 
				+                    height: 12px;
			
 
				+                    background-color: #00bcdd;
			
 
				+                    left: 6px;
			
 
				+                    top: -16px;
			
 
				+                  }
			
 
				+                  &::after {
			
 
				+                    position: absolute;
			
 
				+                    content: '';
			
 
				+                    width: 2px;
			
 
				+                    height: 12px;
			
 
				+                    left: 6px;
			
 
				+                    top: 17px;
			
 
				+                    background-color: #00d9ff;
			
 
				+                  }
			
 
				+                }
			
 
				               }
			
 
				-            }
			
 
				-            @keyframes iconRotate1{
			
 
				-              from {
			
 
				+              .remote-icon-box {
			
 
				                 transform: rotate(30deg);
			
 
				+                animation: iconRotate 1s linear;
			
 
				               }
			
 
				-              to {
			
 
				+              .remote-icon-box1 {
			
 
				                 transform: rotate(-30deg);
			
 
				+                animation: iconRotate1 1s linear;
			
 
				+              }
			
 
				+
			
 
				+              @keyframes iconRotate {
			
 
				+                from {
			
 
				+                  transform: rotate(-30deg);
			
 
				+                }
			
 
				+                to {
			
 
				+                  transform: rotate(30deg);
			
 
				+                }
			
 
				+              }
			
 
				+              @keyframes iconRotate1 {
			
 
				+                from {
			
 
				+                  transform: rotate(30deg);
			
 
				+                }
			
 
				+                to {
			
 
				+                  transform: rotate(-30deg);
			
 
				+                }
			
 
				               }
			
 
				             }
			
 
				-            
			
 
				-          }
			
 
				-          .control-right-box{
			
 
				-            width: 100px;
			
 
				-            color: #fff;
			
 
				-            height: 80px;
			
 
				-            justify-content: space-between;
			
 
				-            align-items: center;
			
 
				-            .btn{
			
 
				-              margin-bottom: 30px;
			
 
				+            .control-right-box {
			
 
				+              width: 100px;
			
 
				+              color: #fff;
			
 
				+              height: 80px;
			
 
				+              justify-content: space-between;
			
 
				+              align-items: center;
			
 
				+              .btn {
			
 
				+                margin-bottom: 30px;
			
 
				+              }
			
 
				             }
			
 
				           }
			
 
				         }
			
 
				-      }
			
 
				 
			
 
				-      .left-box {
			
 
				-        height: calc(100% );
			
 
				-        overflow-x: hidden;
			
 
				-        overflow-y: auto;
			
 
				-        pointer-events: auto;
			
 
				-        direction: rtl;
			
 
				-        .left-container{
			
 
				-          direction: ltr;
			
 
				-        }
			
 
				-        .control-item {
			
 
				-          height: 36px;
			
 
				+        .left-box {
			
 
				+          height: calc(100%);
			
 
				+          overflow-x: hidden;
			
 
				+          overflow-y: auto;
			
 
				+          pointer-events: auto;
			
 
				+          direction: rtl;
			
 
				+          .left-container {
			
 
				+            direction: ltr;
			
 
				+          }
			
 
				+          .control-item {
			
 
				+            height: 36px;
			
 
				+          }
			
 
				         }
			
 
				       }
			
 
				     }
			
 
				   }
			
 
				-}
			
 
				-.tab-button-box{
			
 
				-  display: inline-block;
			
 
				-  position: relative;
			
 
				-  padding: 5px;
			
 
				-  // border: 1px transparent solid;
			
 
				-  border-radius: 5px;
			
 
				-  margin-left: 8px;
			
 
				-  margin-right: 8px;
			
 
				-  width: auto;
			
 
				-  // height: 40px;
			
 
				-  // border: 1px solid #65dbea;
			
 
				-  height: 35px !important;
			
 
				-  display: flex;
			
 
				-  align-items: center;
			
 
				-  justify-content: center;
			
 
				-  color: #fff;
			
 
				-  padding: 0 15px 5px 15px;
			
 
				-  cursor: pointer;
			
 
				-  &:hover {
			
 
				-    background: linear-gradient(#2cd1ff55, #1eb0ff55);
			
 
				-  }
			
 
				-  &::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);
			
 
				-  }
			
 
				-  &::after {
			
 
				-    width: calc(100% + 32px);
			
 
				-    height: 10px;
			
 
				-    content: '';
			
 
				-    position: absolute;
			
 
				-    top: 28px;
			
 
				-    right: 0;
			
 
				-    left: -16px;
			
 
				-    bottom: 0;
			
 
				-    z-index: -1;
			
 
				-    border-radius: inherit; /*important*/
			
 
				-    background: url('/@/assets/images/vent/short-light.png') no-repeat;
			
 
				-    background-position: center;
			
 
				-    background-size: 100%;
			
 
				-    z-index: 999;
			
 
				+  .tab-button-box {
			
 
				+    display: inline-block;
			
 
				+    position: relative;
			
 
				+    padding: 5px;
			
 
				+    // border: 1px transparent solid;
			
 
				+    border-radius: 5px;
			
 
				+    margin-left: 8px;
			
 
				+    margin-right: 8px;
			
 
				+    width: auto;
			
 
				+    // height: 40px;
			
 
				+    // border: 1px solid #65dbea;
			
 
				+    height: 35px !important;
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    justify-content: center;
			
 
				+    color: #fff;
			
 
				+    padding: 0 15px 5px 15px;
			
 
				+    cursor: pointer;
			
 
				+    &:hover {
			
 
				+      background: linear-gradient(#2cd1ff55, #1eb0ff55);
			
 
				+    }
			
 
				+    &::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);
			
 
				+    }
			
 
				+    &::after {
			
 
				+      width: calc(100% + 32px);
			
 
				+      height: 10px;
			
 
				+      content: '';
			
 
				+      position: absolute;
			
 
				+      top: 28px;
			
 
				+      right: 0;
			
 
				+      left: -16px;
			
 
				+      bottom: 0;
			
 
				+      z-index: -1;
			
 
				+      border-radius: inherit; /*important*/
			
 
				+      background: url('/@/assets/images/vent/short-light.png') no-repeat;
			
 
				+      background-position: center;
			
 
				+      background-size: 100%;
			
 
				+      z-index: 999;
			
 
				+    }
			
 
				   }
			
 
				-}
			
 
				 
			
 
				-.tab-button-box-active {
			
 
				-  border: 1px solid #66989e !important;
			
 
				-  &:hover {
			
 
				-    background: none !important;
			
 
				-  }
			
 
				-  &::before {
			
 
				-    background: linear-gradient(#1fa6cbcc, #127cb5cc) !important;
			
 
				+  .tab-button-box-active {
			
 
				+    border: 1px solid #66989e !important;
			
 
				+    &:hover {
			
 
				+      background: none !important;
			
 
				+    }
			
 
				+    &::before {
			
 
				+      background: linear-gradient(#1fa6cbcc, #127cb5cc) !important;
			
 
				+    }
			
 
				   }
			
 
				-}
			
 
				 </style>
			
--- a/src/views/vent/monitorManager/nitrogen/components/nitrogenHome1.vue
+++ b/src/views/vent/monitorManager/nitrogen/components/nitrogenHome1.vue
@@ -1,42 +1,69 @@
 
				 <template>
			
 
				-    <div id="compressor3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
			
 
				-    <div v-show="monitorDataGroupFlag == 1" id="compressorCss3D"  class="threejs-Object-CSS compressorCss3D-box"
			
 
				-        style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px">
			
 
				-        <!-- <a-spin :spinning="loading" /> -->
			
 
				-        <div  v-for="(groupNum, index) in monitorDataGroupNum1" :key="index" class="modal-monitor">
			
 
				-          <fourBorderBg :class="`kyj${groupNum}`" :id="`nitrogenMonitor${groupNum}`">
			
 
				-            <div class="title">{{ groupNum }}号空压机 </div>
			
 
				-            <div class="monitor-item">
			
 
				-              <span class="monitor-title">机头温度:</span>
			
 
				-              <span class="monitor-val"><span class="val">{{ monitorData[`PRE${groupNum}_CPR_HeadTemp`] ?
			
 
				-                monitorData[`PRE${groupNum}_CPR_HeadTemp`] : '-' }}</span><span class="unit"></span>℃</span>
			
 
				-            </div>
			
 
				-            <div class="monitor-item">
			
 
				-              <span class="monitor-title">冷却温度:</span>
			
 
				-              <span class="monitor-val"><span class="val">{{ monitorData[`PRE${groupNum}_CPR_CoolantTemp`] ?
			
 
				-                monitorData[`PRE${groupNum}_CPR_CoolantTemp`] : '-' }}</span><span class="unit">℃</span></span>
			
 
				-            </div>
			
 
				-            <div class="monitor-item">
			
 
				-              <span class="monitor-title">排气温度:</span>
			
 
				-              <span class="monitor-val"><span class="val">{{ monitorData[`PRE${groupNum}_CPR_ExhaustTemp`] ? monitorData[`PRE${groupNum}_CPR_ExhaustTemp`] : '-' }}</span><span class="unit">℃</span></span>
			
 
				-            </div>
			
 
				-            <div class="signal-item">
			
 
				-              <div class="signal"><span class="monitor-title">运行信号</span><span
			
 
				-                  :class="{ 'signal-round': true, 'signal-round-run': monitorData[`PRE${groupNum}_MOT_Running`] == '1', 'signal-round-gry': monitorData[`PRE${groupNum}_MOT_Running`] != '1' }"></span>
			
 
				-              </div>
			
 
				-              <div class="signal"><span class="monitor-title">故障信号</span><span
			
 
				-                  :class="{ 'signal-round': true, 'signal-round-warning': monitorData[`PRE${groupNum}_MOT_Fault`] == '1', 'signal-round-gry': monitorData[`PRE${groupNum}_MOT_Fault`] != '1' }"></span>
			
 
				-              </div>
			
 
				-            </div>
			
 
				-          </fourBorderBg>
			
 
				-          <fourBorderBg :class="`cqg${groupNum}`" :id="`cqgMonitor${groupNum}`">
			
 
				-            <div class="title">{{ groupNum }}号储气罐 </div>
			
 
				-            <div class="monitor-item">
			
 
				-              <span class="monitor-title">气囊温度:</span>
			
 
				-              <span class="monitor-val"><span class="val">{{ monitorData[`PRE${groupNum}_VLS_Temp`] ?
			
 
				-                monitorData[`PRE${groupNum}_VLS_Temp`] : '-' }}</span><span class="unit">℃</span></span>
			
 
				-            </div>
			
 
				-            <!-- <div class="monitor-item">
			
 
				+  <div id="compressor3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
			
 
				+  <div
			
 
				+    v-show="monitorDataGroupFlag == 1"
			
 
				+    id="compressorCss3D"
			
 
				+    class="threejs-Object-CSS compressorCss3D-box"
			
 
				+    style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px"
			
 
				+  >
			
 
				+    <!-- <a-spin :spinning="loading" /> -->
			
 
				+    <div v-for="(groupNum, index) in monitorDataGroupNum1" :key="index" class="modal-monitor">
			
 
				+      <fourBorderBg :class="`kyj${groupNum}`" :id="`nitrogenMonitor${groupNum}`">
			
 
				+        <div class="title">{{ groupNum }}号空压机 </div>
			
 
				+        <div class="monitor-item">
			
 
				+          <span class="monitor-title">机头温度:</span>
			
 
				+          <span class="monitor-val"
			
 
				+            ><span class="val">{{ monitorData[`PRE${groupNum}_CPR_HeadTemp`] ? monitorData[`PRE${groupNum}_CPR_HeadTemp`] : '-' }}</span
			
 
				+            ><span class="unit"></span>℃</span
			
 
				+          >
			
 
				+        </div>
			
 
				+        <div class="monitor-item">
			
 
				+          <span class="monitor-title">冷却温度:</span>
			
 
				+          <span class="monitor-val"
			
 
				+            ><span class="val">{{ monitorData[`PRE${groupNum}_CPR_CoolantTemp`] ? monitorData[`PRE${groupNum}_CPR_CoolantTemp`] : '-' }}</span
			
 
				+            ><span class="unit">℃</span></span
			
 
				+          >
			
 
				+        </div>
			
 
				+        <div class="monitor-item">
			
 
				+          <span class="monitor-title">排气温度:</span>
			
 
				+          <span class="monitor-val"
			
 
				+            ><span class="val">{{ monitorData[`PRE${groupNum}_CPR_ExhaustTemp`] ? monitorData[`PRE${groupNum}_CPR_ExhaustTemp`] : '-' }}</span
			
 
				+            ><span class="unit">℃</span></span
			
 
				+          >
			
 
				+        </div>
			
 
				+        <div class="signal-item">
			
 
				+          <div class="signal"
			
 
				+            ><span class="monitor-title">运行信号</span
			
 
				+            ><span
			
 
				+              :class="{
			
 
				+                'signal-round': true,
			
 
				+                'signal-round-run': monitorData[`PRE${groupNum}_MOT_Running`] == '1',
			
 
				+                'signal-round-gry': monitorData[`PRE${groupNum}_MOT_Running`] != '1',
			
 
				+              }"
			
 
				+            ></span>
			
 
				+          </div>
			
 
				+          <div class="signal"
			
 
				+            ><span class="monitor-title">故障信号</span
			
 
				+            ><span
			
 
				+              :class="{
			
 
				+                'signal-round': true,
			
 
				+                'signal-round-warning': monitorData[`PRE${groupNum}_MOT_Fault`] == '1',
			
 
				+                'signal-round-gry': monitorData[`PRE${groupNum}_MOT_Fault`] != '1',
			
 
				+              }"
			
 
				+            ></span>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </fourBorderBg>
			
 
				+      <fourBorderBg :class="`cqg${groupNum}`" :id="`cqgMonitor${groupNum}`">
			
 
				+        <div class="title">{{ groupNum }}号储气罐 </div>
			
 
				+        <div class="monitor-item">
			
 
				+          <span class="monitor-title">气囊温度:</span>
			
 
				+          <span class="monitor-val"
			
 
				+            ><span class="val">{{ monitorData[`PRE${groupNum}_VLS_Temp`] ? monitorData[`PRE${groupNum}_VLS_Temp`] : '-' }}</span
			
 
				+            ><span class="unit">℃</span></span
			
 
				+          >
			
 
				+        </div>
			
 
				+        <!-- <div class="monitor-item">
			
 
				               <span class="monitor-title">气囊压力<span class="unit"></span>:</span>
			
 
				               <span class="monitor-val"><span class="val">{{ monitorData[groupNum - 1] && monitorData[groupNum - 1]['airReceiverPress'] ?
			
 
				                 monitorData[groupNum - 1]['airReceiverPress'] : '-' }}</span><span class="unit">Mpa</span></span>
			
@@ -46,45 +73,76 @@
 
				               <span class="monitor-val"><span class="val">{{ monitorData[groupNum - 1] && monitorData[groupNum - 1]['airReceiverFlow'] ?
			
 
				                 monitorData[groupNum - 1]['airReceiverFlow'] : '-' }}</span><span class="unit">m³/k</span></span>
			
 
				             </div> -->
			
 
				-          </fourBorderBg>
			
 
				-        </div>
			
 
				+      </fourBorderBg>
			
 
				     </div>
			
 
				-    <div v-show="monitorDataGroupFlag == 2" id="compressorCss3D1" class="threejs-Object-CSS compressorCss3D-box"
			
 
				-        style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 3; top: 0px; left: 0px">
			
 
				-        <div  v-for="(groupNum, index) in monitorDataGroupNum2" :key="index" class="modal-monitor">
			
 
				-            <fourBorderBg :class="`kyj${groupNum}`" :id="`nitrogenMonitor${groupNum}`">
			
 
				-              <div class="title">{{ groupNum }}号空压机 </div>
			
 
				-              <div class="monitor-item">
			
 
				-                <span class="monitor-title">机头温度:</span>
			
 
				-                <span class="monitor-val"><span class="val">{{ monitorData[`PRE${groupNum}_CPR_HeadTemp`] ?
			
 
				-                  formatNum(monitorData[`PRE${groupNum}_CPR_HeadTemp`]) : '-' }}</span><span class="unit">℃</span></span>
			
 
				-              </div>
			
 
				-              <div class="monitor-item">
			
 
				-                <span class="monitor-title">冷却温度:</span>
			
 
				-                <span class="monitor-val"><span class="val">{{ monitorData[`PRE${groupNum}_CPR_CoolantTemp`] ?
			
 
				-                  formatNum(monitorData[`PRE${groupNum}_CPR_CoolantTemp`]) : '-' }}</span><span class="unit">℃</span></span>
			
 
				-              </div>
			
 
				-              <div class="monitor-item">
			
 
				-                <span class="monitor-title">排气温度:</span>
			
 
				-                <span class="monitor-val"><span class="val">{{ monitorData[`PRE${groupNum}_CPR_ExhaustTemp`] ? formatNum(monitorData[`PRE${groupNum}_CPR_ExhaustTemp`]) : '-' }}</span><span class="unit">℃</span></span>
			
 
				-              </div>
			
 
				-              <div class="signal-item">
			
 
				-                <div class="signal"><span class="monitor-title">运行信号</span><span
			
 
				-                    :class="{ 'signal-round': true, 'signal-round-run': monitorData[`PRE${groupNum}_MOT_Running`] == '1', 'signal-round-gry': monitorData[`PRE${groupNum}_MOT_Running`] != '1' }"></span>
			
 
				-                </div>
			
 
				-                <div class="signal"><span class="monitor-title">故障信号</span><span
			
 
				-                    :class="{ 'signal-round': true, 'signal-round-warning': monitorData[`PRE${groupNum}_MOT_Fault`] == '1', 'signal-round-gry': monitorData[`PRE${groupNum}_MOT_Fault`] != '1' }"></span>
			
 
				-                </div>
			
 
				-              </div>
			
 
				-            </fourBorderBg>
			
 
				-            <fourBorderBg :class="`cqg${groupNum}`" :id="`cqgMonitor${groupNum}`">
			
 
				-              <div class="title">{{ groupNum }}号储气罐 </div>
			
 
				-              <div class="monitor-item">
			
 
				-                <span class="monitor-title">气囊温度:</span>
			
 
				-                <span class="monitor-val"><span class="val">{{ monitorData[`PRE${groupNum}_VLS_Temp`] ?
			
 
				-                  formatNum(monitorData[`PRE${groupNum}_VLS_Temp`]) : '-' }}</span><span class="unit">℃</span></span>
			
 
				-              </div>
			
 
				-              <!-- <div class="monitor-item">
			
 
				+  </div>
			
 
				+  <div
			
 
				+    v-show="monitorDataGroupFlag == 2"
			
 
				+    id="compressorCss3D1"
			
 
				+    class="threejs-Object-CSS compressorCss3D-box"
			
 
				+    style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 3; top: 0px; left: 0px"
			
 
				+  >
			
 
				+    <div v-for="(groupNum, index) in monitorDataGroupNum2" :key="index" class="modal-monitor">
			
 
				+      <fourBorderBg :class="`kyj${groupNum}`" :id="`nitrogenMonitor${groupNum}`">
			
 
				+        <div class="title">{{ groupNum }}号空压机 </div>
			
 
				+        <div class="monitor-item">
			
 
				+          <span class="monitor-title">机头温度:</span>
			
 
				+          <span class="monitor-val"
			
 
				+            ><span class="val">{{ monitorData[`PRE${groupNum}_CPR_HeadTemp`] ? formatNum(monitorData[`PRE${groupNum}_CPR_HeadTemp`]) : '-' }}</span
			
 
				+            ><span class="unit">℃</span></span
			
 
				+          >
			
 
				+        </div>
			
 
				+        <div class="monitor-item">
			
 
				+          <span class="monitor-title">冷却温度:</span>
			
 
				+          <span class="monitor-val"
			
 
				+            ><span class="val">{{
			
 
				+              monitorData[`PRE${groupNum}_CPR_CoolantTemp`] ? formatNum(monitorData[`PRE${groupNum}_CPR_CoolantTemp`]) : '-'
			
 
				+            }}</span
			
 
				+            ><span class="unit">℃</span></span
			
 
				+          >
			
 
				+        </div>
			
 
				+        <div class="monitor-item">
			
 
				+          <span class="monitor-title">排气温度:</span>
			
 
				+          <span class="monitor-val"
			
 
				+            ><span class="val">{{
			
 
				+              monitorData[`PRE${groupNum}_CPR_ExhaustTemp`] ? formatNum(monitorData[`PRE${groupNum}_CPR_ExhaustTemp`]) : '-'
			
 
				+            }}</span
			
 
				+            ><span class="unit">℃</span></span
			
 
				+          >
			
 
				+        </div>
			
 
				+        <div class="signal-item">
			
 
				+          <div class="signal"
			
 
				+            ><span class="monitor-title">运行信号</span
			
 
				+            ><span
			
 
				+              :class="{
			
 
				+                'signal-round': true,
			
 
				+                'signal-round-run': monitorData[`PRE${groupNum}_MOT_Running`] == '1',
			
 
				+                'signal-round-gry': monitorData[`PRE${groupNum}_MOT_Running`] != '1',
			
 
				+              }"
			
 
				+            ></span>
			
 
				+          </div>
			
 
				+          <div class="signal"
			
 
				+            ><span class="monitor-title">故障信号</span
			
 
				+            ><span
			
 
				+              :class="{
			
 
				+                'signal-round': true,
			
 
				+                'signal-round-warning': monitorData[`PRE${groupNum}_MOT_Fault`] == '1',
			
 
				+                'signal-round-gry': monitorData[`PRE${groupNum}_MOT_Fault`] != '1',
			
 
				+              }"
			
 
				+            ></span>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </fourBorderBg>
			
 
				+      <fourBorderBg :class="`cqg${groupNum}`" :id="`cqgMonitor${groupNum}`">
			
 
				+        <div class="title">{{ groupNum }}号储气罐 </div>
			
 
				+        <div class="monitor-item">
			
 
				+          <span class="monitor-title">气囊温度:</span>
			
 
				+          <span class="monitor-val"
			
 
				+            ><span class="val">{{ monitorData[`PRE${groupNum}_VLS_Temp`] ? formatNum(monitorData[`PRE${groupNum}_VLS_Temp`]) : '-' }}</span
			
 
				+            ><span class="unit">℃</span></span
			
 
				+          >
			
 
				+        </div>
			
 
				+        <!-- <div class="monitor-item">
			
 
				               <span class="monitor-title">气囊压力<span class="unit"></span>:</span>
			
 
				               <span class="monitor-val"><span class="val">{{ monitorData[groupNum - 1] && monitorData[groupNum - 1]['airReceiverPress'] ?
			
 
				                 monitorData[groupNum - 1]['airReceiverPress'] : '-' }}</span><span class="unit">Mpa</span></span>
			
@@ -94,107 +152,149 @@
 
				               <span class="monitor-val"><span class="val">{{ monitorData[groupNum - 1] && monitorData[groupNum - 1]['airReceiverFlow'] ?
			
 
				                 monitorData[groupNum - 1]['airReceiverFlow'] : '-' }}</span><span class="unit">m³/k</span></span>
			
 
				             </div> -->
			
 
				-            </fourBorderBg>
			
 
				-          </div>
			
 
				+      </fourBorderBg>
			
 
				     </div>
			
 
				-    <div class="nitrogen-home">
			
 
				-      <div style="position: absolute; color: #fff; top: 30px; pointer-events: auto; display: flex;">
			
 
				-        <span class="tab-button-box" :class="{'tab-button-box-active': monitorDataGroupFlag == 1}" @click="setMonitorGroupNum(monitorDataGroupNum1, 1)">压风系统1</span>
			
 
				-        <span class="tab-button-box" :class="{ 'tab-button-box-active': monitorDataGroupFlag == 2 }" @click="setMonitorGroupNum(monitorDataGroupNum2, 2)">压风系统2</span>
			
 
				+  </div>
			
 
				+  <div class="nitrogen-home">
			
 
				+    <div style="position: absolute; color: #fff; top: 30px; pointer-events: auto; display: flex">
			
 
				+      <span
			
 
				+        class="tab-button-box"
			
 
				+        :class="{ 'tab-button-box-active': monitorDataGroupFlag == 1 }"
			
 
				+        @click="setMonitorGroupNum(monitorDataGroupNum1, 1)"
			
 
				+        >压风系统1</span
			
 
				+      >
			
 
				+      <span
			
 
				+        class="tab-button-box"
			
 
				+        :class="{ 'tab-button-box-active': monitorDataGroupFlag == 2 }"
			
 
				+        @click="setMonitorGroupNum(monitorDataGroupNum2, 2)"
			
 
				+        >压风系统2</span
			
 
				+      >
			
 
				+    </div>
			
 
				+    <div class="total-data">
			
 
				+      <div class="vent-flex-row">
			
 
				+        <div class="item"
			
 
				+          >总流量(m³/min)：<span class="val">{{
			
 
				+            monitorData[`PreSys_TotalOutPipeFlow${monitorDataGroupFlag}`]
			
 
				+              ? formatNum(monitorData[`PreSys_TotalOutPipeFlow${monitorDataGroupFlag}`])
			
 
				+              : '-'
			
 
				+          }}</span></div
			
 
				+        >
			
 
				+        <div class="item"
			
 
				+          >总压力(bar)：<span class="val">{{
			
 
				+            monitorData[`PreSys_TotalOutPipePre${monitorDataGroupFlag}`]
			
 
				+              ? formatNum(monitorData[`PreSys_TotalOutPipePre${monitorDataGroupFlag}`])
			
 
				+              : '-'
			
 
				+          }}</span></div
			
 
				+        >
			
 
				       </div>
			
 
				-      <div class="total-data">
			
 
				-        <div class="vent-flex-row">
			
 
				-          <div class="item">总流量(m³/min)：<span class="val">{{ monitorData[`PreSys_TotalOutPipeFlow${monitorDataGroupFlag}`] ? formatNum(monitorData[`PreSys_TotalOutPipeFlow${monitorDataGroupFlag}`]) : '-' }}</span></div>
			
 
				-          <div class="item">总压力(bar)：<span class="val">{{ monitorData[`PreSys_TotalOutPipePre${monitorDataGroupFlag}`] ? formatNum(monitorData[`PreSys_TotalOutPipePre${monitorDataGroupFlag}`]) : '-' }}</span></div>
			
 
				-        </div>
			
 
				-        <div class="" style="margin-left: 30px; margin-top: 10px;">
			
 
				-          <div v-if="Number(monitorData[`PreSys_TotalOutPipeFlow${monitorDataGroupFlag}`]) < 0" style="color: red;">总流量异常</div>
			
 
				-          <div v-if="Number(monitorData[`PreSys_TotalOutPipePre${monitorDataGroupFlag}`]) < 0" style="color: red;">总压力异常</div>
			
 
				-        </div>
			
 
				+      <div class="" style="margin-left: 30px; margin-top: 10px">
			
 
				+        <div v-if="Number(monitorData[`PreSys_TotalOutPipeFlow${monitorDataGroupFlag}`]) < 0" style="color: red">总流量异常</div>
			
 
				+        <div v-if="Number(monitorData[`PreSys_TotalOutPipePre${monitorDataGroupFlag}`]) < 0" style="color: red">总压力异常</div>
			
 
				       </div>
			
 
				-      <div class="nitrogen-container">
			
 
				-        <div v-if="monitorData['netStatus'] == 0" class="device-state">网络断开</div>
			
 
				-        <div class="top-box">
			
 
				-          <!-- 左边监测数据 -->
			
 
				-          <div class="lr-box left-box">
			
 
				-            <div class="left-container">
			
 
				-              <div class="item item-l" v-for="(groupNum, index) in monitorDataGroupNum" :key="index">
			
 
				-                <div class="monitor-box">
			
 
				-                  <ventBox1>
			
 
				-                    <template #title>
			
 
				-                      <div>{{ groupNum }}号空压机组</div>
			
 
				-                    </template>
			
 
				-                    <template #container>
			
 
				-                      <div class="state-item" v-for="(data, index) in showMonitorData" :key="index">
			
 
				-                        <div class="item-col">
			
 
				-                          <span class="state-title">{{ Object.values(data)[0] }} :</span>
			
 
				-                          <span class="state-val">{{ (monitorData[Object.keys(data)[0].replace('PRE', 'PRE' + groupNum)])
			
 
				-                            >= 0 ? formatNum(Number(monitorData[Object.keys(data)[0].replace('PRE', 'PRE' + groupNum)])) : '-' }}</span>
			
 
				-                        </div>
			
 
				-                        <div class="item-col">
			
 
				-                          <span class="state-title">{{ Object.values(data)[1] }} :</span>
			
 
				-                          <span class="state-val">{{ (monitorData[Object.keys(data)[0].replace('PRE', 'PRE' + groupNum)])
			
 
				-                            >= 0 ? formatNum(Number(monitorData[Object.keys(data)[0].replace('PRE', 'PRE' + groupNum)])) : '-' }}</span>
			
 
				-                        </div>
			
 
				+    </div>
			
 
				+    <div class="nitrogen-container">
			
 
				+      <div v-if="monitorData['netStatus'] == 0" class="device-state">网络断开</div>
			
 
				+      <div class="top-box">
			
 
				+        <!-- 左边监测数据 -->
			
 
				+        <div class="lr-box left-box">
			
 
				+          <div class="left-container">
			
 
				+            <div class="item item-l" v-for="(groupNum, index) in monitorDataGroupNum" :key="index">
			
 
				+              <div class="monitor-box">
			
 
				+                <ventBox1>
			
 
				+                  <template #title>
			
 
				+                    <div>{{ groupNum }}号空压机组</div>
			
 
				+                  </template>
			
 
				+                  <template #container>
			
 
				+                    <div class="state-item" v-for="(data, index) in showMonitorData" :key="index">
			
 
				+                      <div class="item-col">
			
 
				+                        <span class="state-title">{{ Object.values(data)[0] }} :</span>
			
 
				+                        <span class="state-val">{{
			
 
				+                          monitorData[Object.keys(data)[0].replace('PRE', 'PRE' + groupNum)] >= 0
			
 
				+                            ? formatNum(Number(monitorData[Object.keys(data)[0].replace('PRE', 'PRE' + groupNum)]))
			
 
				+                            : '-'
			
 
				+                        }}</span>
			
 
				                       </div>
			
 
				-                    </template>
			
 
				-                  </ventBox1>                
			
 
				-                </div>
			
 
				+                      <div class="item-col">
			
 
				+                        <span class="state-title">{{ Object.values(data)[1] }} :</span>
			
 
				+                        <span class="state-val">{{
			
 
				+                          monitorData[Object.keys(data)[0].replace('PRE', 'PRE' + groupNum)] >= 0
			
 
				+                            ? formatNum(Number(monitorData[Object.keys(data)[0].replace('PRE', 'PRE' + groupNum)]))
			
 
				+                            : '-'
			
 
				+                        }}</span>
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                  </template>
			
 
				+                </ventBox1>
			
 
				               </div>
			
 
				             </div>
			
 
				           </div>
			
 
				-          <!-- 右边控制状态 -->
			
 
				-          <div class="lr-box right-box" style="display: none;">
			
 
				-            <ventBox1>
			
 
				-              <template #title>
			
 
				-                <div>远程控制</div>
			
 
				-              </template>
			
 
				-              <template #container>
			
 
				-                <div class="control-group">
			
 
				-                  <div class="control-item" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
			
 
				-                    <div class="control-item-title">{{ kyjs[groupNum - 1] }}</div>
			
 
				-                    <div class="control-item-state">
			
 
				-                      <a-switch v-model="airCompressorState[groupNum - 1][`compressRunSigF1`]" size="small"  checked-children="开启"
			
 
				-                        un-checked-children="关闭" :disabled="airCompressorState[groupNum - 1][`controlModel`]"
			
 
				-                        @change="handlerDevice(airCompressorState[groupNum - 1])">
			
 
				-                      </a-switch>
			
 
				-                    </div>
			
 
				+        </div>
			
 
				+        <!-- 右边控制状态 -->
			
 
				+        <div class="lr-box right-box" style="display: none">
			
 
				+          <ventBox1>
			
 
				+            <template #title>
			
 
				+              <div>远程控制</div>
			
 
				+            </template>
			
 
				+            <template #container>
			
 
				+              <div class="control-group">
			
 
				+                <div class="control-item" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
			
 
				+                  <div class="control-item-title">{{ kyjs[groupNum - 1] }}</div>
			
 
				+                  <div class="control-item-state">
			
 
				+                    <a-switch
			
 
				+                      v-model="airCompressorState[groupNum - 1][`compressRunSigF1`]"
			
 
				+                      size="small"
			
 
				+                      checked-children="开启"
			
 
				+                      un-checked-children="关闭"
			
 
				+                      :disabled="airCompressorState[groupNum - 1][`controlModel`]"
			
 
				+                      @change="handlerDevice(airCompressorState[groupNum - 1])"
			
 
				+                    />
			
 
				                   </div>
			
 
				-                  <div class="control-item" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
			
 
				-                    <div class="control-item-title">{{ cqgs[groupNum - 1] }}</div>
			
 
				-                    <div class="control-item-state">
			
 
				-                      <a-switch v-model="airCompressorState[groupNum - 1][`compressRunSigF1`]" size="small"  checked-children="开启"
			
 
				-                        un-checked-children="关闭" :disabled="airCompressorState[groupNum - 1][`controlModel`]"
			
 
				-                        @change="handlerDevice(airCompressorState[groupNum - 1])">
			
 
				-                      </a-switch>
			
 
				-                    </div>
			
 
				+                </div>
			
 
				+                <div class="control-item" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
			
 
				+                  <div class="control-item-title">{{ cqgs[groupNum - 1] }}</div>
			
 
				+                  <div class="control-item-state">
			
 
				+                    <a-switch
			
 
				+                      v-model="airCompressorState[groupNum - 1][`compressRunSigF1`]"
			
 
				+                      size="small"
			
 
				+                      checked-children="开启"
			
 
				+                      un-checked-children="关闭"
			
 
				+                      :disabled="airCompressorState[groupNum - 1][`controlModel`]"
			
 
				+                      @change="handlerDevice(airCompressorState[groupNum - 1])"
			
 
				+                    />
			
 
				                   </div>
			
 
				-                  
			
 
				-                  <a-divider style="height: 1px; background-color: #d7d7d755" />
			
 
				-                  <div class="control-btn-group vent-margin-b-20">
			
 
				-                    <div class="control-left-box">
			
 
				-                      <div class="btn-box">
			
 
				-                        <span @click="handlerDevice({ remote: true })">远程</span>
			
 
				-                        <span @click="handlerDevice({ remote: false })">就地</span>
			
 
				-                      </div>
			
 
				-                      <div class="icon-box" :class="{ 'remote-icon-box': true }">
			
 
				-                        <div class="icon"></div>
			
 
				-                      </div>
			
 
				+                </div>
			
 
				+
			
 
				+                <a-divider style="height: 1px; background-color: #d7d7d755" />
			
 
				+                <div class="control-btn-group vent-margin-b-20">
			
 
				+                  <div class="control-left-box">
			
 
				+                    <div class="btn-box">
			
 
				+                      <span @click="handlerDevice({ remote: true })">远程</span>
			
 
				+                      <span @click="handlerDevice({ remote: false })">就地</span>
			
 
				+                    </div>
			
 
				+                    <div class="icon-box" :class="{ 'remote-icon-box': true }">
			
 
				+                      <div class="icon"></div>
			
 
				                     </div>
			
 
				-                    <div class="control-right-box">
			
 
				-                      <div class="control-item-title">是否开启联动</div>
			
 
				-                      <div class="item-data-box" >
			
 
				-                        <div :class="{ 'state-icon': true, 'open': monitorData[0] && monitorData[0].linkState, 'close': monitorData[0] && !monitorData[0].linkState }">
			
 
				-                        </div>
			
 
				-                        <div >{{ monitorData[0] && !monitorData[0].linkState ? '不联动' : '联动' }}</div>
			
 
				+                  </div>
			
 
				+                  <div class="control-right-box">
			
 
				+                    <div class="control-item-title">是否开启联动</div>
			
 
				+                    <div class="item-data-box">
			
 
				+                      <div
			
 
				+                        :class="{
			
 
				+                          'state-icon': true,
			
 
				+                          open: monitorData[0] && monitorData[0].linkState,
			
 
				+                          close: monitorData[0] && !monitorData[0].linkState,
			
 
				+                        }"
			
 
				+                      >
			
 
				                       </div>
			
 
				+                      <div>{{ monitorData[0] && !monitorData[0].linkState ? '不联动' : '联动' }}</div>
			
 
				                     </div>
			
 
				                   </div>
			
 
				                 </div>
			
 
				-              </template>
			
 
				-            </ventBox1>
			
 
				-            
			
 
				-            <!-- <div class="control-item">
			
 
				+              </div>
			
 
				+            </template>
			
 
				+          </ventBox1>
			
 
				+
			
 
				+          <!-- <div class="control-item">
			
 
				               <div class="control-item-l">
			
 
				                 <span class="round"></span>
			
 
				                 <span>控制模式</span>
			
@@ -205,834 +305,826 @@
 
				                 </a-switch>
			
 
				               </div>
			
 
				             </div> -->
			
 
				-          </div>
			
 
				         </div>
			
 
				       </div>
			
 
				     </div>
			
 
				+  </div>
			
 
				 </template>
			
 
				 <script lang="ts" setup name="nitrogenHome">
			
 
				-import { onMounted, onUnmounted, ref, watch } from 'vue'
			
 
				-import fourBorderBg from '../../../comment/components/fourBorderBg.vue'
			
 
				-import { mountedThree, destroy, setModelType, clearCssText } from '../nitrogen.threejs'
			
 
				-import { list } from '../nitrogen.api'
			
 
				-import ventBox1 from '/@/components/vent/ventBox1.vue'
			
 
				-import { monitorDataGroupNum1, monitorDataGroupNum2, airCompressorState, showMonitorData, monitorData } from '../nitrogen.data'
			
 
				-import { formatNum } from '/@/utils/ventutil'
			
 
				-
			
 
				-const loading = ref(true)
			
 
				-const monitorDataGroupNum = ref(monitorDataGroupNum1)
			
 
				-const monitorDataGroupFlag = ref(1)
			
 
				-const kyjs = ['1号空压机', '2号空压机', '3号空压机', '4号空压机'];
			
 
				-const cqgs = ['1号储气罐', '2号储气罐', '3号储气罐', '4号储气罐'];
			
 
				-
			
 
				-// 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 (timer) {
			
 
				-        timer = null;
			
 
				-      }
			
 
				-      await getMonitor();
			
 
				-    }, flag ? 0 : 1000);
			
 
				-  }
			
 
				-};
			
 
				-
			
 
				-async function getDataSource() {
			
 
				-  const res = await list({ devicetype: 'forcFan', pagetype: 'normal' });
			
 
				-  let dataSource = res.msgTxt[0].datalist[0];
			
 
				-  // dataSource =  
			
 
				-  //   {
			
 
				-  //     "msgType": null,
			
 
				-  //     "deviceID": "1705212847586627592",
			
 
				-  //     "strname": "压风机系统",
			
 
				-  //     "strinstallpos": "压风机系统",
			
 
				-  //     "fsectarea": "null",
			
 
				-  //     "stationname": "压风机系统分站",
			
 
				-  //     "deviceType": "forcFan",
			
 
				-  //     "typeName": null,
			
 
				-  //     "netStatus": 1,
			
 
				-  //     "warnFlag": 0,
			
 
				-  //     "warnLevel": null,
			
 
				-  //     "warnLevel_str": null,
			
 
				-  //     "warnTime": null,
			
 
				-  //     "readTime": "2023-10-24 08:47:27",
			
 
				-  //     "warnDes": "",
			
 
				-  //     "frontGateOpenCtrl": null,
			
 
				-  //     "rearGateOpenCtrl": null,
			
 
				-  //     "readData": {
			
 
				-  //       "PRE1_MOT_PhaseATemp": "526",
			
 
				-  //       "PRE3_CPR_CoolantTemp": "12",
			
 
				-  //       "PRE4_CPR_HeadTemp": "13",
			
 
				-  //       "PRE2_MOT_PhaseATempAlarm": "0",
			
 
				-  //       "PRE5_MOT_Fault": "0",
			
 
				-  //       "PRE4_MOT_PhaseATempStop": "0",
			
 
				-  //       "PRE4_CPR_LoadPre": "65",
			
 
				-  //       "PRE5_CPR_LoadPre": "62",
			
 
				-  //       "PRE4_MOT_CtrlMode": "1",
			
 
				-  //       "PRE2_CPR_LoadorUnload": "1",
			
 
				-  //       "PRE3_MOT_PhaseBTemp": "133",
			
 
				-  //       "PRE1_CPR_ExhaustPre": "66",
			
 
				-  //       "PRE1_MOT_PhaseATempAlarm": "0",
			
 
				-  //       "PRE5_CPR_UnLoadPre": "69",
			
 
				-  //       "PRE4_MOT_PhaseATemp": "129",
			
 
				-  //       "PRE5_MOT_PhaseCTemp": "685",
			
 
				-  //       "PRE5_MOT_PhaseATemp": "681",
			
 
				-  //       "PRE5_VLS_Temp": "590",
			
 
				-  //       "PRE1_CPR_LoadTime": "8344",
			
 
				-  //       "PRE2_CPR_LoadTime": "5553",
			
 
				-  //       "PRE4_CPR_LoadorUnload": "0",
			
 
				-  //       "PRE5_MOT_PhaseATempAlarm": "0",
			
 
				-  //       "PRE3_CPR_LoadTime": "4511",
			
 
				-  //       "PRE5_CPR_LoadTime": "6032",
			
 
				-  //       "PRE1_MOT_PhaseATempStop": "0",
			
 
				-  //       "PRE2_MOT_CompProtFault": "0",
			
 
				-  //       "PRE5_MOT_PhaseATempStop": "0",
			
 
				-  //       "PRE3_MOT_PhaseATempStop": "0",
			
 
				-  //       "PRE1_VLS_Temp": "436",
			
 
				-  //       "PRE2_CPR_ExhaustPre": "71",
			
 
				-  //       "PRE5_MOT_CtrlMode": "1",
			
 
				-  //       "PRE3_CPR_ExhaustTemp": "10",
			
 
				-  //       "PRE3_MOT_TotalRunTime": "5342",
			
 
				-  //       "P RE2_MOT_PhaseATemp": "541",
			
 
				-  //       "PRE4_MOT_PhaseCTemp": "130",
			
 
				-  //       "PRE4_MOT_PhaseATempAlarm": "0",
			
 
				-  //       "timestamp": "1698108447720",
			
 
				-  //       "PRE3_VLS_Temp": "219",
			
 
				-  //       "PRE1_HostorLoc": "0",
			
 
				-  //       "PRE2_MOT_Running": "1",
			
 
				-  //       "PRE1_CPR_LoadPre": "65",
			
 
				-  //       "PRE1_MOT_Running": "1",
			
 
				-  //       "PRE4_MOT_Fault": "0",
			
 
				-  //       "PRE2_CPR_LoadPre": "65",
			
 
				-  //       "PRE3_MOT_Running": "0",
			
 
				-  //       "PRE4_MOT_Running": "0",
			
 
				-  //       "PRE3_CPR_LoadPre": "65",
			
 
				-  //       "PRE1_MOT_CtrlMode": "1",
			
 
				-  //       "PRE3_MOT_CtrlMode": "1",
			
 
				-  //       "PRE3_CPR_LoadorUnload": "0",
			
 
				-  //       "PRE2_MOT_PhaseCTemp": "550",
			
 
				-  //       "PRE1_CPR_CoolantTemp": "71",
			
 
				-  //       "PRE1_MOT_PhaseBTemp": "539",
			
 
				-  //       "PRE3_MOT_PhaseATempAlarm": "0",
			
 
				-  //       "PRE5_MOT_Running": "1",
			
 
				-  //       "PRE1_MOT_Fault": "0",
			
 
				-  //       "PRE4_CPR_ExhaustPre": "66",
			
 
				-  //       "PRE4_CPR_CoolantTemp": "12",
			
 
				-  //       "PRE5_CPR_ExhaustTemp": "76",
			
 
				-  //       "PRE2_CPR_HeadTemp": "89",
			
 
				-  //       "PRE3_MOT_PhaseCTemp": "135",
			
 
				-  //       "PRE4_CPR_LoadTime": "5084",
			
 
				-  //       "sign": "0",
			
 
				-  //       "PRE1_CPR_UnLoadPre": "72",
			
 
				-  //       "PRE4_HostorLoc": "0",
			
 
				-  //       "PRE4_MOT_CompProtFault": "0",
			
 
				-  //       "PRE1_CPR_LoadorUnload": "1",
			
 
				-  //       "PRE3_CPR_ExhaustPre": "68",
			
 
				-  //       "PRE2_CPR_ExhaustTemp": "77",
			
 
				-  //       "PRE2_MOT_PhaseATempStop": "0",
			
 
				-  //       "PRE5_MOT_CompProtFault": "0",
			
 
				-  //       "PRE2_MOT_Fault": "0",
			
 
				-  //       "PRE5_MOT_PhaseBTemp": "676",
			
 
				-  //       "PRE3_MOT_PhaseATemp": "134",
			
 
				-  //       "PRE4_MOT_PhaseBTemp": "130",
			
 
				-  //       "PRE2_CPR_CoolantTemp": "66",
			
 
				-  //       "PRE3_HostorLoc": "0",
			
 
				-  //       "PRE4_MOT_TotalRunTime": "5104",
			
 
				-  //       "PRE1_MOT_TotalRunTime": "8416",
			
 
				-  //       "PRE3_MOT_CompProtFault": "0",
			
 
				-  //       "PRE3_MOT_Fault": "0",
			
 
				-  //       "PRE4_CPR_UnLoadPre": "72",
			
 
				-  //       "PRE1_CPR_HeadTemp": "97",
			
 
				-  //       "PRE2_HostorLoc": "0",
			
 
				-  //       "PRE2_MOT_PhaseBTemp": "562",
			
 
				-  //       "PRE3_CPR_HeadTemp": "13",
			
 
				-  //       "PRE2_MOT_TotalRunTime": "5586",
			
 
				-  //       "PRE5_CPR_HeadTemp": "95",
			
 
				-  //       "PRE3_CPR_UnLoadPre": "72",
			
 
				-  //       "PRE4_VLS_Temp": "166",
			
 
				-  //       "PRE5_CPR_CoolantTemp": "70",
			
 
				-  //       "PRE1_MOT_CompProtFault": "0",
			
 
				-  //       "PRE5_MOT_TotalRunTime": "7825",
			
 
				-  //       "PRE2_MOT_CtrlMode": "1",
			
 
				-  //       "PRE5_CPR_ExhaustPre": "68",
			
 
				-  //       "PRE1_MOT_PhaseCTemp": "544",
			
 
				-  //       "PRE5_CPR_LoadorUnload": "1",
			
 
				-  //       "PRE2_CPR_UnLoadPre": "72",
			
 
				-  //       "PRE4_CPR_ExhaustTemp": "11",
			
 
				-  //       "PRE2_VLS_Temp": "445",
			
 
				-  //       "isRun": "-2",
			
 
				-  //       "PRE5_HostorLoc": "0",
			
 
				-  //       "PRE1_CPR_ExhaustTemp": "68"
			
 
				-  //     },
			
 
				-  //     "readDataDes": null,
			
 
				-  //     "summaryHour": [],
			
 
				-  //     "summaryDay": [],
			
 
				-  //     "history": [],
			
 
				-  //     "totalInfo": null,
			
 
				-  //     "sign": null,
			
 
				-  //     "cameras": [],
			
 
				-  //     "links": [],
			
 
				-  //     "other1": null,
			
 
				-  //     "other2": null,
			
 
				-  //     "other3": null
			
 
				-  //   }
			
 
				-  if(dataSource){
			
 
				-    monitorData.value = Object.assign(dataSource, dataSource.readData);
			
 
				+  import { onMounted, onUnmounted, ref, watch } from 'vue';
			
 
				+  import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
			
 
				+  import { mountedThree, destroy, setModelType, clearCssText } from '../nitrogen.threejs';
			
 
				+  import { list } from '../nitrogen.api';
			
 
				+  import ventBox1 from '/@/components/vent/ventBox1.vue';
			
 
				+  import { monitorDataGroupNum1, monitorDataGroupNum2, airCompressorState, showMonitorData, monitorData } from '../nitrogen.data';
			
 
				+  import { formatNum } from '/@/utils/ventutil';
			
 
				+
			
 
				+  const loading = ref(true);
			
 
				+  const monitorDataGroupNum = ref(monitorDataGroupNum1);
			
 
				+  const monitorDataGroupFlag = ref(1);
			
 
				+  const kyjs = ['1号空压机', '2号空压机', '3号空压机', '4号空压机'];
			
 
				+  const cqgs = ['1号储气罐', '2号储气罐', '3号储气罐', '4号储气罐'];
			
 
				+
			
 
				+  // 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 (timer) {
			
 
				+            timer = null;
			
 
				+          }
			
 
				+          await getMonitor();
			
 
				+        },
			
 
				+        flag ? 0 : 1000
			
 
				+      );
			
 
				+    }
			
 
				   }
			
 
				-  // dataSource.forEach((data, index) => {
			
 
				-  //   const item = data.readData;
			
 
				-  //   Object.assign(item, data);
			
 
				-  //   item.compressRunSigF1 = item.compressRunSigF1 ? true : false
			
 
				-  //   airCompressorState.value[index].id = item.id
			
 
				-  //   airCompressorState.value[index].compressRunSigF1 = item.compressRunSigF1
			
 
				-  //   airCompressorState.value[index].controlModel = item.controlModel === 'LOC' ? true : false
			
 
				-  //   monitorData.value[index] = item
			
 
				-  // });
			
 
				-  // monitorDataGroupNum.value = monitorData.value.length
			
 
				-  loading.value = false
			
 
				-};
			
 
				-
			
 
				-function setMonitorGroupNum(num, flag){
			
 
				-  
			
 
				-  monitorDataGroupNum.value = num
			
 
				-  monitorDataGroupFlag.value = flag
			
 
				-}
			
 
				-
			
 
				-function handlerDevice(data) {
			
 
				-  // if (data.length < 1) return
			
 
				-  // handleAirCompressor({ id: data.id, compressRunF1: data.compressRunSigF1 }).then(res => {
			
 
				-  //   if (res.success) {
			
 
				-  //     message.success('操作成功')
			
 
				-  //   } else {
			
 
				-  //     message.warning(data.msg)
			
 
				-  //   }
			
 
				-  // })
			
 
				-};
			
 
				-function resetDevice(data) {
			
 
				-
			
 
				-}
			
 
				-
			
 
				-function handlerControlModel(data) {
			
 
				-
			
 
				-}
			
 
				-
			
 
				-watch(monitorDataGroupFlag, (newVal) => {
			
 
				-
			
 
				-  if(newVal == 1){
			
 
				-    setModelType('compressor1')
			
 
				+
			
 
				+  async function getDataSource() {
			
 
				+    const res = await list({ devicetype: 'forcFan', pagetype: 'normal' });
			
 
				+    let dataSource = res.msgTxt[0].datalist[0];
			
 
				+    // dataSource =
			
 
				+    //   {
			
 
				+    //     "msgType": null,
			
 
				+    //     "deviceID": "1705212847586627592",
			
 
				+    //     "strname": "压风机系统",
			
 
				+    //     "strinstallpos": "压风机系统",
			
 
				+    //     "fsectarea": "null",
			
 
				+    //     "stationname": "压风机系统分站",
			
 
				+    //     "deviceType": "forcFan",
			
 
				+    //     "typeName": null,
			
 
				+    //     "netStatus": 1,
			
 
				+    //     "warnFlag": 0,
			
 
				+    //     "warnLevel": null,
			
 
				+    //     "warnLevel_str": null,
			
 
				+    //     "warnTime": null,
			
 
				+    //     "readTime": "2023-10-24 08:47:27",
			
 
				+    //     "warnDes": "",
			
 
				+    //     "frontGateOpenCtrl": null,
			
 
				+    //     "rearGateOpenCtrl": null,
			
 
				+    //     "readData": {
			
 
				+    //       "PRE1_MOT_PhaseATemp": "526",
			
 
				+    //       "PRE3_CPR_CoolantTemp": "12",
			
 
				+    //       "PRE4_CPR_HeadTemp": "13",
			
 
				+    //       "PRE2_MOT_PhaseATempAlarm": "0",
			
 
				+    //       "PRE5_MOT_Fault": "0",
			
 
				+    //       "PRE4_MOT_PhaseATempStop": "0",
			
 
				+    //       "PRE4_CPR_LoadPre": "65",
			
 
				+    //       "PRE5_CPR_LoadPre": "62",
			
 
				+    //       "PRE4_MOT_CtrlMode": "1",
			
 
				+    //       "PRE2_CPR_LoadorUnload": "1",
			
 
				+    //       "PRE3_MOT_PhaseBTemp": "133",
			
 
				+    //       "PRE1_CPR_ExhaustPre": "66",
			
 
				+    //       "PRE1_MOT_PhaseATempAlarm": "0",
			
 
				+    //       "PRE5_CPR_UnLoadPre": "69",
			
 
				+    //       "PRE4_MOT_PhaseATemp": "129",
			
 
				+    //       "PRE5_MOT_PhaseCTemp": "685",
			
 
				+    //       "PRE5_MOT_PhaseATemp": "681",
			
 
				+    //       "PRE5_VLS_Temp": "590",
			
 
				+    //       "PRE1_CPR_LoadTime": "8344",
			
 
				+    //       "PRE2_CPR_LoadTime": "5553",
			
 
				+    //       "PRE4_CPR_LoadorUnload": "0",
			
 
				+    //       "PRE5_MOT_PhaseATempAlarm": "0",
			
 
				+    //       "PRE3_CPR_LoadTime": "4511",
			
 
				+    //       "PRE5_CPR_LoadTime": "6032",
			
 
				+    //       "PRE1_MOT_PhaseATempStop": "0",
			
 
				+    //       "PRE2_MOT_CompProtFault": "0",
			
 
				+    //       "PRE5_MOT_PhaseATempStop": "0",
			
 
				+    //       "PRE3_MOT_PhaseATempStop": "0",
			
 
				+    //       "PRE1_VLS_Temp": "436",
			
 
				+    //       "PRE2_CPR_ExhaustPre": "71",
			
 
				+    //       "PRE5_MOT_CtrlMode": "1",
			
 
				+    //       "PRE3_CPR_ExhaustTemp": "10",
			
 
				+    //       "PRE3_MOT_TotalRunTime": "5342",
			
 
				+    //       "P RE2_MOT_PhaseATemp": "541",
			
 
				+    //       "PRE4_MOT_PhaseCTemp": "130",
			
 
				+    //       "PRE4_MOT_PhaseATempAlarm": "0",
			
 
				+    //       "timestamp": "1698108447720",
			
 
				+    //       "PRE3_VLS_Temp": "219",
			
 
				+    //       "PRE1_HostorLoc": "0",
			
 
				+    //       "PRE2_MOT_Running": "1",
			
 
				+    //       "PRE1_CPR_LoadPre": "65",
			
 
				+    //       "PRE1_MOT_Running": "1",
			
 
				+    //       "PRE4_MOT_Fault": "0",
			
 
				+    //       "PRE2_CPR_LoadPre": "65",
			
 
				+    //       "PRE3_MOT_Running": "0",
			
 
				+    //       "PRE4_MOT_Running": "0",
			
 
				+    //       "PRE3_CPR_LoadPre": "65",
			
 
				+    //       "PRE1_MOT_CtrlMode": "1",
			
 
				+    //       "PRE3_MOT_CtrlMode": "1",
			
 
				+    //       "PRE3_CPR_LoadorUnload": "0",
			
 
				+    //       "PRE2_MOT_PhaseCTemp": "550",
			
 
				+    //       "PRE1_CPR_CoolantTemp": "71",
			
 
				+    //       "PRE1_MOT_PhaseBTemp": "539",
			
 
				+    //       "PRE3_MOT_PhaseATempAlarm": "0",
			
 
				+    //       "PRE5_MOT_Running": "1",
			
 
				+    //       "PRE1_MOT_Fault": "0",
			
 
				+    //       "PRE4_CPR_ExhaustPre": "66",
			
 
				+    //       "PRE4_CPR_CoolantTemp": "12",
			
 
				+    //       "PRE5_CPR_ExhaustTemp": "76",
			
 
				+    //       "PRE2_CPR_HeadTemp": "89",
			
 
				+    //       "PRE3_MOT_PhaseCTemp": "135",
			
 
				+    //       "PRE4_CPR_LoadTime": "5084",
			
 
				+    //       "sign": "0",
			
 
				+    //       "PRE1_CPR_UnLoadPre": "72",
			
 
				+    //       "PRE4_HostorLoc": "0",
			
 
				+    //       "PRE4_MOT_CompProtFault": "0",
			
 
				+    //       "PRE1_CPR_LoadorUnload": "1",
			
 
				+    //       "PRE3_CPR_ExhaustPre": "68",
			
 
				+    //       "PRE2_CPR_ExhaustTemp": "77",
			
 
				+    //       "PRE2_MOT_PhaseATempStop": "0",
			
 
				+    //       "PRE5_MOT_CompProtFault": "0",
			
 
				+    //       "PRE2_MOT_Fault": "0",
			
 
				+    //       "PRE5_MOT_PhaseBTemp": "676",
			
 
				+    //       "PRE3_MOT_PhaseATemp": "134",
			
 
				+    //       "PRE4_MOT_PhaseBTemp": "130",
			
 
				+    //       "PRE2_CPR_CoolantTemp": "66",
			
 
				+    //       "PRE3_HostorLoc": "0",
			
 
				+    //       "PRE4_MOT_TotalRunTime": "5104",
			
 
				+    //       "PRE1_MOT_TotalRunTime": "8416",
			
 
				+    //       "PRE3_MOT_CompProtFault": "0",
			
 
				+    //       "PRE3_MOT_Fault": "0",
			
 
				+    //       "PRE4_CPR_UnLoadPre": "72",
			
 
				+    //       "PRE1_CPR_HeadTemp": "97",
			
 
				+    //       "PRE2_HostorLoc": "0",
			
 
				+    //       "PRE2_MOT_PhaseBTemp": "562",
			
 
				+    //       "PRE3_CPR_HeadTemp": "13",
			
 
				+    //       "PRE2_MOT_TotalRunTime": "5586",
			
 
				+    //       "PRE5_CPR_HeadTemp": "95",
			
 
				+    //       "PRE3_CPR_UnLoadPre": "72",
			
 
				+    //       "PRE4_VLS_Temp": "166",
			
 
				+    //       "PRE5_CPR_CoolantTemp": "70",
			
 
				+    //       "PRE1_MOT_CompProtFault": "0",
			
 
				+    //       "PRE5_MOT_TotalRunTime": "7825",
			
 
				+    //       "PRE2_MOT_CtrlMode": "1",
			
 
				+    //       "PRE5_CPR_ExhaustPre": "68",
			
 
				+    //       "PRE1_MOT_PhaseCTemp": "544",
			
 
				+    //       "PRE5_CPR_LoadorUnload": "1",
			
 
				+    //       "PRE2_CPR_UnLoadPre": "72",
			
 
				+    //       "PRE4_CPR_ExhaustTemp": "11",
			
 
				+    //       "PRE2_VLS_Temp": "445",
			
 
				+    //       "isRun": "-2",
			
 
				+    //       "PRE5_HostorLoc": "0",
			
 
				+    //       "PRE1_CPR_ExhaustTemp": "68"
			
 
				+    //     },
			
 
				+    //     "readDataDes": null,
			
 
				+    //     "summaryHour": [],
			
 
				+    //     "summaryDay": [],
			
 
				+    //     "history": [],
			
 
				+    //     "totalInfo": null,
			
 
				+    //     "sign": null,
			
 
				+    //     "cameras": [],
			
 
				+    //     "links": [],
			
 
				+    //     "other1": null,
			
 
				+    //     "other2": null,
			
 
				+    //     "other3": null
			
 
				+    //   }
			
 
				+    if (dataSource) {
			
 
				+      monitorData.value = Object.assign(dataSource, dataSource.readData);
			
 
				+    }
			
 
				+    // dataSource.forEach((data, index) => {
			
 
				+    //   const item = data.readData;
			
 
				+    //   Object.assign(item, data);
			
 
				+    //   item.compressRunSigF1 = item.compressRunSigF1 ? true : false
			
 
				+    //   airCompressorState.value[index].id = item.id
			
 
				+    //   airCompressorState.value[index].compressRunSigF1 = item.compressRunSigF1
			
 
				+    //   airCompressorState.value[index].controlModel = item.controlModel === 'LOC' ? true : false
			
 
				+    //   monitorData.value[index] = item
			
 
				+    // });
			
 
				+    // monitorDataGroupNum.value = monitorData.value.length
			
 
				+    loading.value = false;
			
 
				   }
			
 
				-  if (newVal == 2) {
			
 
				-    setModelType('compressor2')
			
 
				+
			
 
				+  function setMonitorGroupNum(num, flag) {
			
 
				+    monitorDataGroupNum.value = num;
			
 
				+    monitorDataGroupFlag.value = flag;
			
 
				   }
			
 
				-})
			
 
				-
			
 
				-onMounted(async () => {
			
 
				-  mountedThree(monitorDataGroupNum1, monitorDataGroupNum2).then(async() => {
			
 
				-    await getMonitor(true)
			
 
				-    setModelType('compressor1')
			
 
				-  })
			
 
				-})
			
 
				-
			
 
				-onUnmounted(() => {
			
 
				-  destroy();
			
 
				-  if (timer) {
			
 
				-    clearTimeout(timer);
			
 
				-    timer = undefined;
			
 
				+
			
 
				+  function handlerDevice(data) {
			
 
				+    // if (data.length < 1) return
			
 
				+    // handleAirCompressor({ id: data.id, compressRunF1: data.compressRunSigF1 }).then(res => {
			
 
				+    //   if (res.success) {
			
 
				+    //     message.success('操作成功')
			
 
				+    //   } else {
			
 
				+    //     message.warning(data.msg)
			
 
				+    //   }
			
 
				+    // })
			
 
				   }
			
 
				-});
			
 
				+  function resetDevice(data) {}
			
 
				 
			
 
				+  function handlerControlModel(data) {}
			
 
				+
			
 
				+  watch(monitorDataGroupFlag, (newVal) => {
			
 
				+    if (newVal == 1) {
			
 
				+      setModelType('compressor1');
			
 
				+    }
			
 
				+    if (newVal == 2) {
			
 
				+      setModelType('compressor2');
			
 
				+    }
			
 
				+  });
			
 
				+
			
 
				+  onMounted(async () => {
			
 
				+    mountedThree(monitorDataGroupNum1, monitorDataGroupNum2).then(async () => {
			
 
				+      await getMonitor(true);
			
 
				+      setModelType('compressor1');
			
 
				+    });
			
 
				+  });
			
 
				+
			
 
				+  onUnmounted(() => {
			
 
				+    destroy();
			
 
				+    if (timer) {
			
 
				+      clearTimeout(timer);
			
 
				+      timer = undefined;
			
 
				+    }
			
 
				+  });
			
 
				 </script>
			
 
				 
			
 
				 <style lang="less" scoped>
			
 
				-@ventSpace: zxm;
			
 
				-
			
 
				-.nitrogen-home {
			
 
				-  width: 100%;
			
 
				-  height: 100%;
			
 
				-  display: flex;
			
 
				-  justify-content: center;
			
 
				-  position: relative;
			
 
				-  .total-data{
			
 
				-    position: absolute;
			
 
				-    color: #e4cd00;
			
 
				-    z-index: 9;
			
 
				-    top: 50px;
			
 
				-    right: 30px;
			
 
				-    //display: flex;
			
 
				-    font-size: 18px;
			
 
				-    .item{
			
 
				-      width: 200px;
			
 
				-      margin-left: 30px;
			
 
				-      .val{
			
 
				-        color: #00d8ff;
			
 
				+  @ventSpace: zxm;
			
 
				+
			
 
				+  .nitrogen-home {
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    display: flex;
			
 
				+    justify-content: center;
			
 
				+    position: relative;
			
 
				+    .total-data {
			
 
				+      position: absolute;
			
 
				+      color: #e4cd00;
			
 
				+      z-index: 9;
			
 
				+      top: 50px;
			
 
				+      right: 30px;
			
 
				+      //display: flex;
			
 
				+      font-size: 18px;
			
 
				+      .item {
			
 
				+        width: 200px;
			
 
				+        margin-left: 30px;
			
 
				+        .val {
			
 
				+          color: #00d8ff;
			
 
				+        }
			
 
				       }
			
 
				     }
			
 
				   }
			
 
				-}
			
 
				-
			
 
				-.compressorCss3D-box {
			
 
				-  .modal-monitor {
			
 
				-    position: absolute;
			
 
				-    left: 0px;
			
 
				-    top: 0px;
			
 
				-  }
			
 
				 
			
 
				-  &:deep(.win) {
			
 
				-    margin: 0 !important;
			
 
				-    background: #00000044;
			
 
				-  }
			
 
				+  .compressorCss3D-box {
			
 
				+    .modal-monitor {
			
 
				+      position: absolute;
			
 
				+      left: 0px;
			
 
				+      top: 0px;
			
 
				+    }
			
 
				 
			
 
				-  &:deep(.main) {
			
 
				-    .title {
			
 
				-      height: 34px;
			
 
				-      text-align: center;
			
 
				-      font-weight: 600;
			
 
				-      color: #7AF5FF;
			
 
				-      // background-image: url('../../../assets/img/yfj/light.png');
			
 
				-      background-repeat: no-repeat;
			
 
				-      background-position-x: center;
			
 
				-      background-position-y: 100%;
			
 
				-      background-size: 80%;
			
 
				-      font-size: 16px;
			
 
				+    &:deep(.win) {
			
 
				+      margin: 0 !important;
			
 
				+      background: #00000044;
			
 
				     }
			
 
				 
			
 
				-    .monitor-item {
			
 
				-      display: flex;
			
 
				-      flex-direction: row;
			
 
				-      width: auto;
			
 
				-      margin-bottom: 3px;
			
 
				-      .monitor-val {
			
 
				-        color: #ffb700;
			
 
				+    &:deep(.main) {
			
 
				+      .title {
			
 
				+        height: 34px;
			
 
				+        text-align: center;
			
 
				+        font-weight: 600;
			
 
				+        color: #7af5ff;
			
 
				+        // background-image: url('../../../assets/img/yfj/light.png');
			
 
				+        background-repeat: no-repeat;
			
 
				+        background-position-x: center;
			
 
				+        background-position-y: 100%;
			
 
				+        background-size: 80%;
			
 
				+        font-size: 16px;
			
 
				+      }
			
 
				+
			
 
				+      .monitor-item {
			
 
				         display: flex;
			
 
				+        flex-direction: row;
			
 
				         width: auto;
			
 
				+        margin-bottom: 3px;
			
 
				+        .monitor-val {
			
 
				+          color: #ffb700;
			
 
				+          display: flex;
			
 
				+          width: auto;
			
 
				 
			
 
				-        .val {
			
 
				-          width: 80px;
			
 
				-          font-size: 14px;
			
 
				-        }
			
 
				-
			
 
				-        .unit {
			
 
				-          color: #ffffffbb;
			
 
				-          font-size: 14px;
			
 
				+          .val {
			
 
				+            width: 80px;
			
 
				+            font-size: 14px;
			
 
				+          }
			
 
				 
			
 
				+          .unit {
			
 
				+            color: #ffffffbb;
			
 
				+            font-size: 14px;
			
 
				+          }
			
 
				         }
			
 
				       }
			
 
				-    }
			
 
				 
			
 
				-    .monitor-title {
			
 
				-      width: 100px;
			
 
				-      color: #7AF5FF;
			
 
				-      font-weight: 400;
			
 
				-      font-size: 14px;
			
 
				-    }
			
 
				+      .monitor-title {
			
 
				+        width: 100px;
			
 
				+        color: #7af5ff;
			
 
				+        font-weight: 400;
			
 
				+        font-size: 14px;
			
 
				+      }
			
 
				 
			
 
				-    .signal-item {
			
 
				-      display: flex;
			
 
				-      justify-content: space-between;
			
 
				+      .signal-item {
			
 
				+        display: flex;
			
 
				+        justify-content: space-between;
			
 
				 
			
 
				-      // margin-bottom: 5px;
			
 
				-      .signal-round {
			
 
				-        display: inline-block;
			
 
				-        width: 8px;
			
 
				-        height: 8px;
			
 
				-        border-radius: 50%;
			
 
				-        margin: 0 10px;
			
 
				-        position: relative;
			
 
				-
			
 
				-        &::after {
			
 
				-          display: block;
			
 
				-          content: '';
			
 
				-          position: absolute;
			
 
				-          width: 12px;
			
 
				-          height: 12px;
			
 
				-          top: -2px;
			
 
				-          left: -2px;
			
 
				+        // margin-bottom: 5px;
			
 
				+        .signal-round {
			
 
				+          display: inline-block;
			
 
				+          width: 8px;
			
 
				+          height: 8px;
			
 
				           border-radius: 50%;
			
 
				+          margin: 0 10px;
			
 
				+          position: relative;
			
 
				+
			
 
				+          &::after {
			
 
				+            display: block;
			
 
				+            content: '';
			
 
				+            position: absolute;
			
 
				+            width: 12px;
			
 
				+            height: 12px;
			
 
				+            top: -2px;
			
 
				+            left: -2px;
			
 
				+            border-radius: 50%;
			
 
				+          }
			
 
				         }
			
 
				-      }
			
 
				 
			
 
				-      .signal-round-gry {
			
 
				-        background-color: #858585;
			
 
				+        .signal-round-gry {
			
 
				+          background-color: #858585;
			
 
				 
			
 
				-        &::after {
			
 
				-          background-color: #85858544;
			
 
				-          box-shadow: 0 0 1px 1px #85858599;
			
 
				+          &::after {
			
 
				+            background-color: #85858544;
			
 
				+            box-shadow: 0 0 1px 1px #85858599;
			
 
				+          }
			
 
				         }
			
 
				-      }
			
 
				 
			
 
				-      .signal-round-run {
			
 
				-        background-color: #67FC00;
			
 
				+        .signal-round-run {
			
 
				+          background-color: #67fc00;
			
 
				 
			
 
				-        &::after {
			
 
				-          background-color: #67FC0044;
			
 
				-          box-shadow: 0 0 1px 1px #c6ff77;
			
 
				+          &::after {
			
 
				+            background-color: #67fc0044;
			
 
				+            box-shadow: 0 0 1px 1px #c6ff77;
			
 
				+          }
			
 
				         }
			
 
				-      }
			
 
				 
			
 
				-      .signal-round-warning {
			
 
				-        background-color: #E9170B;
			
 
				+        .signal-round-warning {
			
 
				+          background-color: #e9170b;
			
 
				 
			
 
				-        &::after {
			
 
				-          background-color: #E9170B44;
			
 
				-          box-shadow: 0 0 1px 1px #E9170B;
			
 
				+          &::after {
			
 
				+            background-color: #e9170b44;
			
 
				+            box-shadow: 0 0 1px 1px #e9170b;
			
 
				+          }
			
 
				         }
			
 
				       }
			
 
				     }
			
 
				   }
			
 
				-}
			
 
				-
			
 
				-.nitrogen-home {
			
 
				-  width: 100%;
			
 
				-  height: calc(100% - 100px);
			
 
				-  position: fixed;
			
 
				-  z-index: 99;
			
 
				-  display: flex;
			
 
				-  flex-direction: column;
			
 
				-  justify-content: center;
			
 
				-  align-items: center;
			
 
				-  pointer-events: none;
			
 
				-  top: 60px;
			
 
				-  .nitrogen-container {
			
 
				+
			
 
				+  .nitrogen-home {
			
 
				     width: 100%;
			
 
				-    height: calc(100%);
			
 
				+    height: calc(100% - 100px);
			
 
				+    position: fixed;
			
 
				+    z-index: 99;
			
 
				     display: flex;
			
 
				-    justify-content: space-between;
			
 
				-    margin-bottom: 100px;
			
 
				-    position: relative;
			
 
				-    .device-state{
			
 
				+    flex-direction: column;
			
 
				+    justify-content: center;
			
 
				+    align-items: center;
			
 
				+    pointer-events: none;
			
 
				+    top: 60px;
			
 
				+    .nitrogen-container {
			
 
				       width: 100%;
			
 
				-      position: absolute;
			
 
				-      top: 70px;
			
 
				-      color: #e90000;
			
 
				-      display: flex;
			
 
				-      justify-content: center;
			
 
				-      font-size: 20px;
			
 
				-    }
			
 
				-    .top-box {
			
 
				-      width: 100%;
			
 
				-      padding: 10px;
			
 
				-      overflow: hidden;
			
 
				+      height: calc(100%);
			
 
				       display: flex;
			
 
				       justify-content: space-between;
			
 
				-
			
 
				-      .lr-box {
			
 
				+      margin-bottom: 100px;
			
 
				+      position: relative;
			
 
				+      .device-state {
			
 
				+        width: 100%;
			
 
				+        position: absolute;
			
 
				+        top: 70px;
			
 
				+        color: #e90000;
			
 
				         display: flex;
			
 
				-        flex-direction: column;
			
 
				-        position: relative;
			
 
				-        z-index: 9999;
			
 
				-        pointer-events: auto;
			
 
				+        justify-content: center;
			
 
				+        font-size: 20px;
			
 
				       }
			
 
				-
			
 
				-      .item {
			
 
				-        width: 285px;
			
 
				-        height: auto;
			
 
				-        position: relative;
			
 
				-        border-radius: 5px;
			
 
				-        margin-top: 10px;
			
 
				-        margin-bottom: 0px;
			
 
				-        pointer-events: auto;
			
 
				-        color: #fff;
			
 
				+      .top-box {
			
 
				+        width: 100%;
			
 
				+        padding: 10px;
			
 
				         overflow: hidden;
			
 
				+        display: flex;
			
 
				+        justify-content: space-between;
			
 
				 
			
 
				-        .control-item {
			
 
				-          height: auto;
			
 
				-          min-height: 35px;
			
 
				+        .lr-box {
			
 
				           display: flex;
			
 
				-          flex-direction: row;
			
 
				-          justify-content: space-between;
			
 
				-          align-items: center;
			
 
				-          padding: 5px;
			
 
				-          margin: 0 10px 0 3px;
			
 
				+          flex-direction: column;
			
 
				+          position: relative;
			
 
				+          z-index: 9999;
			
 
				           pointer-events: auto;
			
 
				-          background: linear-gradient(to right, #0063CD22, #0063CD04);
			
 
				-
			
 
				-          margin-bottom: 5px;
			
 
				-          border-width: 1px;
			
 
				-          border-style: dashed;
			
 
				+        }
			
 
				 
			
 
				-          border-image: linear-gradient(to right, #008ccd66, #0063CD04)1 1;
			
 
				+        .item {
			
 
				+          width: 285px;
			
 
				+          height: auto;
			
 
				+          position: relative;
			
 
				           border-radius: 5px;
			
 
				+          margin-top: 10px;
			
 
				+          margin-bottom: 0px;
			
 
				+          pointer-events: auto;
			
 
				+          color: #fff;
			
 
				+          overflow: hidden;
			
 
				 
			
 
				-          &:last-child {
			
 
				-            margin-bottom: 0
			
 
				-          }
			
 
				-
			
 
				-          .control-item-l {
			
 
				+          .control-item {
			
 
				+            height: auto;
			
 
				+            min-height: 35px;
			
 
				             display: flex;
			
 
				+            flex-direction: row;
			
 
				+            justify-content: space-between;
			
 
				             align-items: center;
			
 
				-            font-size: 14px;
			
 
				+            padding: 5px;
			
 
				+            margin: 0 10px 0 3px;
			
 
				+            pointer-events: auto;
			
 
				+            background: linear-gradient(to right, #0063cd22, #0063cd04);
			
 
				 
			
 
				-            .round {
			
 
				-              display: inline-block;
			
 
				-              width: 3px;
			
 
				-              height: 3px;
			
 
				-              padding: 1px;
			
 
				-              border-radius: 50%;
			
 
				-              background-color: #3DF6FF;
			
 
				-              margin-right: 5px;
			
 
				-              box-shadow: 0 0 1px 1px #64f7ff;
			
 
				+            margin-bottom: 5px;
			
 
				+            border-width: 1px;
			
 
				+            border-style: dashed;
			
 
				+
			
 
				+            border-image: linear-gradient(to right, #008ccd66, #0063cd04) 1 1;
			
 
				+            border-radius: 5px;
			
 
				+
			
 
				+            &:last-child {
			
 
				+              margin-bottom: 0;
			
 
				             }
			
 
				-          }
			
 
				 
			
 
				-          .control-item-r {
			
 
				-            text-align: right;
			
 
				-          }
			
 
				+            .control-item-l {
			
 
				+              display: flex;
			
 
				+              align-items: center;
			
 
				+              font-size: 14px;
			
 
				 
			
 
				-          .button-box {
			
 
				-            position: relative;
			
 
				-            padding: 5px;
			
 
				-            border: 1px transparent solid;
			
 
				-            background-clip: border-box;
			
 
				-            border-radius: 5px;
			
 
				-            margin-left: 8px;
			
 
				-          }
			
 
				+              .round {
			
 
				+                display: inline-block;
			
 
				+                width: 3px;
			
 
				+                height: 3px;
			
 
				+                padding: 1px;
			
 
				+                border-radius: 50%;
			
 
				+                background-color: #3df6ff;
			
 
				+                margin-right: 5px;
			
 
				+                box-shadow: 0 0 1px 1px #64f7ff;
			
 
				+              }
			
 
				+            }
			
 
				 
			
 
				-          .a-button {
			
 
				-            pointer-events: auto;
			
 
				-          }
			
 
				+            .control-item-r {
			
 
				+              text-align: right;
			
 
				+            }
			
 
				 
			
 
				-          &::v-deep .a-button--mini {
			
 
				-            padding: 6px 10px;
			
 
				-          }
			
 
				+            .button-box {
			
 
				+              position: relative;
			
 
				+              padding: 5px;
			
 
				+              border: 1px transparent solid;
			
 
				+              background-clip: border-box;
			
 
				+              border-radius: 5px;
			
 
				+              margin-left: 8px;
			
 
				+            }
			
 
				 
			
 
				-          &::v-deep .a-button--mini.is-round {
			
 
				-            padding: 6px 10px;
			
 
				-          }
			
 
				-        }
			
 
				+            .a-button {
			
 
				+              pointer-events: auto;
			
 
				+            }
			
 
				 
			
 
				-        .base-title {
			
 
				-          width: calc(100% - 60px);
			
 
				-          text-align: center;
			
 
				-          color: #00d8ff;
			
 
				-        }
			
 
				+            &::v-deep .a-button--mini {
			
 
				+              padding: 6px 10px;
			
 
				+            }
			
 
				 
			
 
				-        .state-item {
			
 
				-          display: flex;
			
 
				-          flex-direction: row;
			
 
				-          padding: 5px;
			
 
				+            &::v-deep .a-button--mini.is-round {
			
 
				+              padding: 6px 10px;
			
 
				+            }
			
 
				+          }
			
 
				 
			
 
				-          .item-col {
			
 
				-            width: 50%;
			
 
				+          .base-title {
			
 
				+            width: calc(100% - 60px);
			
 
				+            text-align: center;
			
 
				+            color: #00d8ff;
			
 
				+          }
			
 
				+
			
 
				+          .state-item {
			
 
				             display: flex;
			
 
				-            justify-content: center;
			
 
				-            align-items: center;
			
 
				-            padding-right: 4px;
			
 
				+            flex-direction: row;
			
 
				+            padding: 5px;
			
 
				 
			
 
				-            .state-title {
			
 
				-              color: #ffffffcc;
			
 
				-              flex: 9;
			
 
				-              font-size: 14px;
			
 
				+            .item-col {
			
 
				+              width: 50%;
			
 
				+              display: flex;
			
 
				+              justify-content: center;
			
 
				+              align-items: center;
			
 
				+              padding-right: 4px;
			
 
				 
			
 
				-              .unit {
			
 
				-                // color: #ffffffbb;
			
 
				+              .state-title {
			
 
				+                color: #ffffffcc;
			
 
				+                flex: 9;
			
 
				+                font-size: 14px;
			
 
				+
			
 
				+                .unit {
			
 
				+                  // color: #ffffffbb;
			
 
				+                }
			
 
				               }
			
 
				-            }
			
 
				 
			
 
				-            .state-val {
			
 
				-              flex: 1;
			
 
				-              color: #e4a300;
			
 
				-              margin-right: 5px;
			
 
				-              text-align: right;
			
 
				-              font-size: 14px;
			
 
				+              .state-val {
			
 
				+                flex: 1;
			
 
				+                color: #e4a300;
			
 
				+                margin-right: 5px;
			
 
				+                text-align: right;
			
 
				+                font-size: 14px;
			
 
				+              }
			
 
				             }
			
 
				           }
			
 
				-        }
			
 
				 
			
 
				-        .signal-box {
			
 
				-          margin: 5px 0;
			
 
				-          display: flex;
			
 
				-          align-items: center;
			
 
				+          .signal-box {
			
 
				+            margin: 5px 0;
			
 
				+            display: flex;
			
 
				+            align-items: center;
			
 
				 
			
 
				-          .signal-title {
			
 
				-            color: #7AF5FF;
			
 
				-            margin: 0 5px;
			
 
				-          }
			
 
				+            .signal-title {
			
 
				+              color: #7af5ff;
			
 
				+              margin: 0 5px;
			
 
				+            }
			
 
				 
			
 
				-          &:last-child {
			
 
				-            margin-right: 0px;
			
 
				+            &:last-child {
			
 
				+              margin-right: 0px;
			
 
				+            }
			
 
				           }
			
 
				-        }
			
 
				 
			
 
				-        .list-item {
			
 
				-          padding: 0 10px;
			
 
				-          display: flex;
			
 
				-          justify-content: space-between;
			
 
				-          align-items: center;
			
 
				+          .list-item {
			
 
				+            padding: 0 10px;
			
 
				+            display: flex;
			
 
				+            justify-content: space-between;
			
 
				+            align-items: center;
			
 
				 
			
 
				-          .item-data-key {
			
 
				-            color: #ffffff99;
			
 
				+            .item-data-key {
			
 
				+              color: #ffffff99;
			
 
				+            }
			
 
				           }
			
 
				-        }
			
 
				 
			
 
				-        .item-data-box {
			
 
				-          color: #fff;
			
 
				+          .item-data-box {
			
 
				+            color: #fff;
			
 
				 
			
 
				-          .state-icon {
			
 
				-            display: inline-block;
			
 
				-            width: 12px;
			
 
				-            height: 12px;
			
 
				-            border-radius: 12px;
			
 
				-          }
			
 
				+            .state-icon {
			
 
				+              display: inline-block;
			
 
				+              width: 12px;
			
 
				+              height: 12px;
			
 
				+              border-radius: 12px;
			
 
				+            }
			
 
				 
			
 
				-          .open {
			
 
				-            border: 5px solid #133a56;
			
 
				-            background: #4ecb73;
			
 
				-          }
			
 
				+            .open {
			
 
				+              border: 5px solid #133a56;
			
 
				+              background: #4ecb73;
			
 
				+            }
			
 
				 
			
 
				-          .close {
			
 
				-            border: 5px solid #192961;
			
 
				-            background: #6d7898;
			
 
				+            .close {
			
 
				+              border: 5px solid #192961;
			
 
				+              background: #6d7898;
			
 
				+            }
			
 
				           }
			
 
				         }
			
 
				-      }
			
 
				 
			
 
				-      .item-l {
			
 
				-        width: 335px;
			
 
				+        .item-l {
			
 
				+          width: 335px;
			
 
				 
			
 
				-        .monitor-box {
			
 
				-          // width: 335px;
			
 
				-          background-color: #ffffff05;
			
 
				-          // margin-left: 2px;
			
 
				-          // border-radius: 5px;
			
 
				-          // backdrop-filter: blur(10px);
			
 
				+          .monitor-box {
			
 
				+            // width: 335px;
			
 
				+            background-color: #ffffff05;
			
 
				+            // margin-left: 2px;
			
 
				+            // border-radius: 5px;
			
 
				+            // backdrop-filter: blur(10px);
			
 
				+          }
			
 
				         }
			
 
				-      }
			
 
				 
			
 
				-      .right-box {
			
 
				-         width: 330px;
			
 
				-        .control-group{
			
 
				-          display: flex;
			
 
				-          // justify-content: space-around;
			
 
				-          flex-wrap: wrap;
			
 
				-          .control-item {
			
 
				-            
			
 
				+        .right-box {
			
 
				+          width: 330px;
			
 
				+          .control-group {
			
 
				             display: flex;
			
 
				-            flex-direction: column;
			
 
				-            justify-content: center;
			
 
				-            align-items: center;
			
 
				-            padding: 0 4px;
			
 
				-            .control-item-title{
			
 
				-              color: #A6DCE9;
			
 
				-              position: relative;
			
 
				-              top: 5px;
			
 
				-            }
			
 
				-            .control-item-state{
			
 
				-              width: 94px;
			
 
				-              height: 47px;
			
 
				-              background: url('/@/assets/images/vent/control-switch-bg.png');
			
 
				+            // justify-content: space-around;
			
 
				+            flex-wrap: wrap;
			
 
				+            .control-item {
			
 
				               display: flex;
			
 
				+              flex-direction: column;
			
 
				               justify-content: center;
			
 
				               align-items: center;
			
 
				-              color: #fff;
			
 
				-            }
			
 
				-          
			
 
				-            .button-box {
			
 
				-              position: relative;
			
 
				-              padding: 5px;
			
 
				-              border: 1px transparent solid;
			
 
				-              background-clip: border-box;
			
 
				-              border-radius: 5px;
			
 
				-              margin-left: 8px;
			
 
				-            }
			
 
				+              padding: 0 4px;
			
 
				+              .control-item-title {
			
 
				+                color: #a6dce9;
			
 
				+                position: relative;
			
 
				+                top: 5px;
			
 
				+              }
			
 
				+              .control-item-state {
			
 
				+                width: 94px;
			
 
				+                height: 47px;
			
 
				+                background: url('/@/assets/images/vent/control-switch-bg.png');
			
 
				+                display: flex;
			
 
				+                justify-content: center;
			
 
				+                align-items: center;
			
 
				+                color: #fff;
			
 
				+              }
			
 
				 
			
 
				-            .a-button {
			
 
				-              pointer-events: auto;
			
 
				-            }
			
 
				+              .button-box {
			
 
				+                position: relative;
			
 
				+                padding: 5px;
			
 
				+                border: 1px transparent solid;
			
 
				+                background-clip: border-box;
			
 
				+                border-radius: 5px;
			
 
				+                margin-left: 8px;
			
 
				+              }
			
 
				 
			
 
				-            &::v-deep .a-button--mini {
			
 
				-              padding: 6px 10px;
			
 
				-            }
			
 
				+              .a-button {
			
 
				+                pointer-events: auto;
			
 
				+              }
			
 
				 
			
 
				-            &::v-deep .a-button--mini.is-round {
			
 
				-              padding: 6px 10px;
			
 
				+              &::v-deep .a-button--mini {
			
 
				+                padding: 6px 10px;
			
 
				+              }
			
 
				+
			
 
				+              &::v-deep .a-button--mini.is-round {
			
 
				+                padding: 6px 10px;
			
 
				+              }
			
 
				             }
			
 
				           }
			
 
				-
			
 
				-        }
			
 
				-        .control-btn-group{
			
 
				-          width: 100%;
			
 
				-          display: flex;
			
 
				-          flex-direction: row;
			
 
				-          justify-content: space-between;
			
 
				-          align-items: center;
			
 
				-          .control-left-box{
			
 
				+          .control-btn-group {
			
 
				+            width: 100%;
			
 
				             display: flex;
			
 
				-            flex-direction: column;
			
 
				-            justify-content: center;
			
 
				+            flex-direction: row;
			
 
				+            justify-content: space-between;
			
 
				             align-items: center;
			
 
				-            padding: 0 20px;
			
 
				-            .btn-box{
			
 
				-              width: 100px;
			
 
				-              color: #fff;
			
 
				-              display: flex;
			
 
				-              justify-content: space-between;
			
 
				-              span{
			
 
				-                display: inline-block;
			
 
				-                padding: 2px 8px;
			
 
				-                background: #007099;
			
 
				-                border-radius: 4px;
			
 
				-                border: 1px solid rgb(125, 230, 249);
			
 
				-                cursor: pointer;
			
 
				-                &:hover{
			
 
				-                  background: #005574;
			
 
				-                }
			
 
				-              }
			
 
				-            }
			
 
				-            .icon-box{
			
 
				-              width: 60px;
			
 
				-              height: 60px;
			
 
				-              border-radius: 30px;
			
 
				-              border: 2px solid #00bcdd;
			
 
				-              box-shadow: 0 0 20px #ffffff88;
			
 
				+            .control-left-box {
			
 
				               display: flex;
			
 
				+              flex-direction: column;
			
 
				               justify-content: center;
			
 
				               align-items: center;
			
 
				-              margin-top: 20px;
			
 
				-                
			
 
				-              .icon{
			
 
				-                width: 18px;
			
 
				-                height: 18px;
			
 
				-                border-radius: 9px;
			
 
				-                border: 3px solid #d7f9ff;
			
 
				-                position: relative;
			
 
				-                background: #00bcdd;
			
 
				-                &::before{
			
 
				-                  position: absolute;
			
 
				-                  content: '';
			
 
				-                  width: 2px;
			
 
				-                  height: 12px;
			
 
				-                  background-color: #00bcdd;
			
 
				-                  left: 6px;
			
 
				-                  top: -16px;
			
 
				-                }
			
 
				-                &::after{
			
 
				-                  position: absolute;
			
 
				-                  content: '';
			
 
				-                  width: 2px;
			
 
				-                  height: 12px;
			
 
				-                  left: 6px;
			
 
				-                  top: 17px;
			
 
				-                  background-color: #00d9ff;
			
 
				+              padding: 0 20px;
			
 
				+              .btn-box {
			
 
				+                width: 100px;
			
 
				+                color: #fff;
			
 
				+                display: flex;
			
 
				+                justify-content: space-between;
			
 
				+                span {
			
 
				+                  display: inline-block;
			
 
				+                  padding: 2px 8px;
			
 
				+                  background: #007099;
			
 
				+                  border-radius: 4px;
			
 
				+                  border: 1px solid rgb(125, 230, 249);
			
 
				+                  cursor: pointer;
			
 
				+                  &:hover {
			
 
				+                    background: #005574;
			
 
				+                  }
			
 
				                 }
			
 
				               }
			
 
				-            }
			
 
				-            .remote-icon-box{
			
 
				-              transform: rotate(30deg);
			
 
				-              animation: iconRotate 1s linear;
			
 
				-            }
			
 
				-            .remote-icon-box1{
			
 
				-              transform: rotate(-30deg);
			
 
				-              animation: iconRotate1 1s linear;
			
 
				-            }
			
 
				-
			
 
				-            @keyframes iconRotate{
			
 
				-              from{
			
 
				-                transform: rotate(-30deg);
			
 
				-              }
			
 
				-              to {
			
 
				-                transform: rotate(30deg);
			
 
				+              .icon-box {
			
 
				+                width: 60px;
			
 
				+                height: 60px;
			
 
				+                border-radius: 30px;
			
 
				+                border: 2px solid #00bcdd;
			
 
				+                box-shadow: 0 0 20px #ffffff88;
			
 
				+                display: flex;
			
 
				+                justify-content: center;
			
 
				+                align-items: center;
			
 
				+                margin-top: 20px;
			
 
				+
			
 
				+                .icon {
			
 
				+                  width: 18px;
			
 
				+                  height: 18px;
			
 
				+                  border-radius: 9px;
			
 
				+                  border: 3px solid #d7f9ff;
			
 
				+                  position: relative;
			
 
				+                  background: #00bcdd;
			
 
				+                  &::before {
			
 
				+                    position: absolute;
			
 
				+                    content: '';
			
 
				+                    width: 2px;
			
 
				+                    height: 12px;
			
 
				+                    background-color: #00bcdd;
			
 
				+                    left: 6px;
			
 
				+                    top: -16px;
			
 
				+                  }
			
 
				+                  &::after {
			
 
				+                    position: absolute;
			
 
				+                    content: '';
			
 
				+                    width: 2px;
			
 
				+                    height: 12px;
			
 
				+                    left: 6px;
			
 
				+                    top: 17px;
			
 
				+                    background-color: #00d9ff;
			
 
				+                  }
			
 
				+                }
			
 
				               }
			
 
				-            }
			
 
				-            @keyframes iconRotate1{
			
 
				-              from {
			
 
				+              .remote-icon-box {
			
 
				                 transform: rotate(30deg);
			
 
				+                animation: iconRotate 1s linear;
			
 
				               }
			
 
				-              to {
			
 
				+              .remote-icon-box1 {
			
 
				                 transform: rotate(-30deg);
			
 
				+                animation: iconRotate1 1s linear;
			
 
				+              }
			
 
				+
			
 
				+              @keyframes iconRotate {
			
 
				+                from {
			
 
				+                  transform: rotate(-30deg);
			
 
				+                }
			
 
				+                to {
			
 
				+                  transform: rotate(30deg);
			
 
				+                }
			
 
				+              }
			
 
				+              @keyframes iconRotate1 {
			
 
				+                from {
			
 
				+                  transform: rotate(30deg);
			
 
				+                }
			
 
				+                to {
			
 
				+                  transform: rotate(-30deg);
			
 
				+                }
			
 
				               }
			
 
				             }
			
 
				-            
			
 
				-          }
			
 
				-          .control-right-box{
			
 
				-            width: 100px;
			
 
				-            color: #fff;
			
 
				-            height: 80px;
			
 
				-            justify-content: space-between;
			
 
				-            align-items: center;
			
 
				-            .btn{
			
 
				-              margin-bottom: 30px;
			
 
				+            .control-right-box {
			
 
				+              width: 100px;
			
 
				+              color: #fff;
			
 
				+              height: 80px;
			
 
				+              justify-content: space-between;
			
 
				+              align-items: center;
			
 
				+              .btn {
			
 
				+                margin-bottom: 30px;
			
 
				+              }
			
 
				             }
			
 
				           }
			
 
				         }
			
 
				-      }
			
 
				 
			
 
				-      .left-box {
			
 
				-        height: calc(100% );
			
 
				-        overflow-x: hidden;
			
 
				-        overflow-y: auto;
			
 
				-        pointer-events: auto;
			
 
				-        direction: rtl;
			
 
				-        .left-container{
			
 
				-          direction: ltr;
			
 
				-        }
			
 
				-        .control-item {
			
 
				-          height: 36px;
			
 
				+        .left-box {
			
 
				+          height: calc(100%);
			
 
				+          overflow-x: hidden;
			
 
				+          overflow-y: auto;
			
 
				+          pointer-events: auto;
			
 
				+          direction: rtl;
			
 
				+          .left-container {
			
 
				+            direction: ltr;
			
 
				+          }
			
 
				+          .control-item {
			
 
				+            height: 36px;
			
 
				+          }
			
 
				         }
			
 
				       }
			
 
				     }
			
 
				   }
			
 
				-}
			
 
				-.tab-button-box{
			
 
				-  display: inline-block;
			
 
				-  position: relative;
			
 
				-  padding: 5px;
			
 
				-  // border: 1px transparent solid;
			
 
				-  border-radius: 5px;
			
 
				-  margin-left: 8px;
			
 
				-  margin-right: 8px;
			
 
				-  width: auto;
			
 
				-  // height: 40px;
			
 
				-  // border: 1px solid #65dbea;
			
 
				-  height: 35px !important;
			
 
				-  display: flex;
			
 
				-  align-items: center;
			
 
				-  justify-content: center;
			
 
				-  color: #fff;
			
 
				-  padding: 0 15px 5px 15px;
			
 
				-  cursor: pointer;
			
 
				-  &:hover {
			
 
				-    background: linear-gradient(#2cd1ff55, #1eb0ff55);
			
 
				-  }
			
 
				-  &::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);
			
 
				-  }
			
 
				-  &::after {
			
 
				-    width: calc(100% + 32px);
			
 
				-    height: 10px;
			
 
				-    content: '';
			
 
				-    position: absolute;
			
 
				-    top: 28px;
			
 
				-    right: 0;
			
 
				-    left: -16px;
			
 
				-    bottom: 0;
			
 
				-    z-index: -1;
			
 
				-    border-radius: inherit; /*important*/
			
 
				-    background: url('/@/assets/images/vent/short-light.png') no-repeat;
			
 
				-    background-position: center;
			
 
				-    background-size: 100%;
			
 
				-    z-index: 999;
			
 
				+  .tab-button-box {
			
 
				+    display: inline-block;
			
 
				+    position: relative;
			
 
				+    padding: 5px;
			
 
				+    // border: 1px transparent solid;
			
 
				+    border-radius: 5px;
			
 
				+    margin-left: 8px;
			
 
				+    margin-right: 8px;
			
 
				+    width: auto;
			
 
				+    // height: 40px;
			
 
				+    // border: 1px solid #65dbea;
			
 
				+    height: 35px !important;
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    justify-content: center;
			
 
				+    color: #fff;
			
 
				+    padding: 0 15px 5px 15px;
			
 
				+    cursor: pointer;
			
 
				+    &:hover {
			
 
				+      background: linear-gradient(#2cd1ff55, #1eb0ff55);
			
 
				+    }
			
 
				+    &::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);
			
 
				+    }
			
 
				+    &::after {
			
 
				+      width: calc(100% + 32px);
			
 
				+      height: 10px;
			
 
				+      content: '';
			
 
				+      position: absolute;
			
 
				+      top: 28px;
			
 
				+      right: 0;
			
 
				+      left: -16px;
			
 
				+      bottom: 0;
			
 
				+      z-index: -1;
			
 
				+      border-radius: inherit; /*important*/
			
 
				+      background: url('/@/assets/images/vent/short-light.png') no-repeat;
			
 
				+      background-position: center;
			
 
				+      background-size: 100%;
			
 
				+      z-index: 999;
			
 
				+    }
			
 
				   }
			
 
				-}
			
 
				 
			
 
				-.tab-button-box-active {
			
 
				-  border: 1px solid #66989e !important;
			
 
				-  &:hover {
			
 
				-    background: none !important;
			
 
				-  }
			
 
				-  &::before {
			
 
				-    background: linear-gradient(#1fa6cbcc, #127cb5cc) !important;
			
 
				+  .tab-button-box-active {
			
 
				+    border: 1px solid #66989e !important;
			
 
				+    &:hover {
			
 
				+      background: none !important;
			
 
				+    }
			
 
				+    &::before {
			
 
				+      background: linear-gradient(#1fa6cbcc, #127cb5cc) !important;
			
 
				+    }
			
 
				   }
			
 
				-}
			
 
				 </style>
			
--- a/src/views/vent/monitorManager/nitrogen/index.vue
+++ b/src/views/vent/monitorManager/nitrogen/index.vue
@@ -1,68 +1,65 @@
 
				 <template>
			
 
				   <div class="nitrogen-box">
			
 
				-    <customHeader >智能压风管控系统</customHeader>
			
 
				+    <customHeader>智能压风管控系统</customHeader>
			
 
				     <!-- 锦界 -->
			
 
				     <!-- <nitrogenHome v-if="btnActive == 'nitrogen_page'" /> -->
			
 
				     <!-- 布尔台 -->
			
 
				     <nitrogenHome1 v-if="btnActive == 'nitrogen_page'" />
			
 
				-    <nitrogenEcharts v-if="btnActive == 'yfj_monitor_echarts'"/>
			
 
				-    <nitrogenHistory v-if="btnActive == 'yfj_history'"/>
			
 
				-    <nitrogenHandleHistory v-if="btnActive == 'yfj_handler_history'"/>
			
 
				-    <nitrogenAlarmHistory v-if="btnActive == 'yfj_faultRecord'"/>
			
 
				-    <BottomMenu :nav-list="navList" @change="changeActive"/>
			
 
				+    <nitrogenEcharts v-if="btnActive == 'yfj_monitor_echarts'" />
			
 
				+    <nitrogenHistory v-if="btnActive == 'yfj_history'" />
			
 
				+    <nitrogenHandleHistory v-if="btnActive == 'yfj_handler_history'" />
			
 
				+    <nitrogenAlarmHistory v-if="btnActive == 'yfj_faultRecord'" />
			
 
				+    <BottomMenu :nav-list="navList" @change="changeActive" />
			
 
				   </div>
			
 
				-  
			
 
				 </template>
			
 
				 <script lang="ts" setup>
			
 
				-import { ref } from 'vue'
			
 
				-import nitrogenHome from './components/nitrogenHome.vue'
			
 
				-import nitrogenHome1 from './components/nitrogenHome1.vue'
			
 
				-import nitrogenEcharts from './components/nitrogenEcharts.vue'
			
 
				-import nitrogenHistory from './components/nitrogenHistory.vue'
			
 
				-import nitrogenHandleHistory from './components/nitrogenHandleHistory.vue'
			
 
				-import nitrogenAlarmHistory from './components/nitrogenAlarmHistory.vue'
			
 
				-import customHeader from '/@/views/vent/comment/components/customHeader.vue';
			
 
				-import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
			
 
				+  import { ref } from 'vue';
			
 
				+  import nitrogenHome from './components/nitrogenHome.vue';
			
 
				+  import nitrogenHome1 from './components/nitrogenHome1.vue';
			
 
				+  import nitrogenEcharts from './components/nitrogenEcharts.vue';
			
 
				+  import nitrogenHistory from './components/nitrogenHistory.vue';
			
 
				+  import nitrogenHandleHistory from './components/nitrogenHandleHistory.vue';
			
 
				+  import nitrogenAlarmHistory from './components/nitrogenAlarmHistory.vue';
			
 
				+  import customHeader from '/@/views/vent/comment/components/customHeader.vue';
			
 
				+  import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
			
 
				 
			
 
				-const btnActive = ref('nitrogen_page')
			
 
				-const navList = ref([
			
 
				-  {
			
 
				-    title: '监控界面',
			
 
				-    pathName: 'nitrogen_page',
			
 
				-    isHover: false
			
 
				-  },
			
 
				-  // {
			
 
				-  //   title: '实时曲线',
			
 
				-  //   pathName: 'yfj_monitor_echarts',
			
 
				-  //   isHover: false
			
 
				-  // },
			
 
				-  {
			
 
				-    title: '历史监测记录',
			
 
				-    pathName: 'yfj_history',
			
 
				-    isHover: false
			
 
				-  },
			
 
				-  {
			
 
				-    title: '操作历史记录',
			
 
				-    pathName: 'yfj_handler_history',
			
 
				-    isHover: false
			
 
				-  },
			
 
				-  {
			
 
				-    title: '故障诊断历史记录',
			
 
				-    pathName: 'yfj_faultRecord',
			
 
				-    isHover: false
			
 
				-  }
			
 
				-])
			
 
				-
			
 
				-
			
 
				-function changeActive(activeValue) {
			
 
				-  btnActive.value = activeValue
			
 
				-}
			
 
				+  const btnActive = ref('nitrogen_page');
			
 
				+  const navList = ref([
			
 
				+    {
			
 
				+      title: '监控界面',
			
 
				+      pathName: 'nitrogen_page',
			
 
				+      isHover: false,
			
 
				+    },
			
 
				+    // {
			
 
				+    //   title: '实时曲线',
			
 
				+    //   pathName: 'yfj_monitor_echarts',
			
 
				+    //   isHover: false
			
 
				+    // },
			
 
				+    {
			
 
				+      title: '历史监测记录',
			
 
				+      pathName: 'yfj_history',
			
 
				+      isHover: false,
			
 
				+    },
			
 
				+    {
			
 
				+      title: '操作历史记录',
			
 
				+      pathName: 'yfj_handler_history',
			
 
				+      isHover: false,
			
 
				+    },
			
 
				+    {
			
 
				+      title: '故障诊断历史记录',
			
 
				+      pathName: 'yfj_faultRecord',
			
 
				+      isHover: false,
			
 
				+    },
			
 
				+  ]);
			
 
				 
			
 
				+  function changeActive(activeValue) {
			
 
				+    btnActive.value = activeValue;
			
 
				+  }
			
 
				 </script>
			
 
				 
			
 
				 <style lang="less" scoped>
			
 
				-@ventSpace: zxm;
			
 
				-.nitrogen-home-header {
			
 
				+  @ventSpace: zxm;
			
 
				+  .nitrogen-home-header {
			
 
				     width: 100%;
			
 
				     height: 100px;
			
 
				     position: fixed;
			
@@ -83,29 +80,28 @@ function changeActive(activeValue) {
 
				       font-size: 24px;
			
 
				     }
			
 
				   }
			
 
				-.nitrogen-box{
			
 
				-  width: 100%;
			
 
				-  height: 100%;
			
 
				-  display: flex;
			
 
				-  justify-content: center;
			
 
				-  .bottom-btn-group {
			
 
				+  .nitrogen-box {
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				     display: flex;
			
 
				-    position: fixed;
			
 
				-    width: calc(100% - 400px);
			
 
				-    height: 100px;
			
 
				-    bottom: 10px;
			
 
				-    align-items: center;
			
 
				     justify-content: center;
			
 
				-    z-index: 2;
			
 
				-    .btn-item {
			
 
				-      width: 200px;
			
 
				-      height: 60px;
			
 
				-      margin: 10px;
			
 
				-      color: #fff;
			
 
				-      cursor: pointer;
			
 
				-      pointer-events: auto;
			
 
				+    .bottom-btn-group {
			
 
				+      display: flex;
			
 
				+      position: fixed;
			
 
				+      width: calc(100% - 400px);
			
 
				+      height: 100px;
			
 
				+      bottom: 10px;
			
 
				+      align-items: center;
			
 
				+      justify-content: center;
			
 
				+      z-index: 2;
			
 
				+      .btn-item {
			
 
				+        width: 200px;
			
 
				+        height: 60px;
			
 
				+        margin: 10px;
			
 
				+        color: #fff;
			
 
				+        cursor: pointer;
			
 
				+        pointer-events: auto;
			
 
				+      }
			
 
				     }
			
 
				   }
			
 
				-}
			
 
				-
			
 
				 </style>
			
--- a/src/views/vent/performance/comment/DeviceModal.vue
+++ b/src/views/vent/performance/comment/DeviceModal.vue
@@ -53,7 +53,8 @@
 
				         height: '100%',
			
 
				         document: {
			
 
				           title: '文档管理',
			
 
				-          url: 'http://182.92.126.35:9999/ventanaly-sharefile/fileServer/onlyOffice/read?id=' + props.editID, //id表示文件id，后端接口用这个id来加载文件
			
 
				+          // url: 'http://182.92.126.35:9999/ventanaly-sharefile/fileServer/onlyOffice/read?id=' + props.editID, //id表示文件id，后端接口用这个id来加载文件
			
 
				+          url: `${window.location.origin}:9050/ventanaly-sharefile/fileServer/onlyOffice/read?id=${props.editID}`, //id表示文件id，后端接口用这个id来加载文件
			
 
				           fileType: props.fileType == 'doc' ? 'docx' : props.fileType == 'xls' ? 'xlsx' : props.fileType == 'ppt' ? 'pptx' : props.fileType, //当文件类型为doc、xls、ppt时，对应用docx、xlsx、pptx否则会保存异常。
			
 
				           key: '',
			
 
				           lang: 'zh-CN',
			
@@ -67,7 +68,8 @@
 
				         editorConfig: {
			
 
				           lang: 'zh-CN',
			
 
				           mode: 'edit', //view：只读且可复制内容，edit：可编辑
			
 
				-          callbackUrl: 'http://182.92.126.35:9999/ventanaly-sharefile/fileServer/onlyOffice/save?id=' + props.editID, //id表示文件id，后端接口用这个id来加载文件
			
 
				+          // callbackUrl: 'http://182.92.126.35:9999/ventanaly-sharefile/fileServer/onlyOffice/save?id=' + props.editID, //id表示文件id，后端接口用这个id来加载文件
			
 
				+          callbackUrl: `${window.location.origin}:9050/ventanaly-sharefile/fileServer/onlyOffice/save?id=${props.editID}`, //id表示文件id，后端接口用这个id来加载文件
			
 
				           coEditing: {
			
 
				             mode: 'fast',
			
 
				             change: true,
			
--- a/src/views/vent/performance/comment/NormalTable.vue
+++ b/src/views/vent/performance/comment/NormalTable.vue
@@ -4,10 +4,7 @@
 
				       <template #action="{ record }">
			
 
				         <!-- <TableAction :actions="getActions(record)" :dropDownActions="getDropDownAction(record)" /> -->
			
 
				         <a class="table-action-link" @click="handleEdit(record)">编辑</a>
			
 
				-        <a-popconfirm
			
 
				-          title="确定删除?"
			
 
				-          @confirm="handleDelete(record)"
			
 
				-        >
			
 
				+        <a-popconfirm title="确定删除?" @confirm="handleDelete(record)">
			
 
				           <a class="table-action-link">删除</a>
			
 
				         </a-popconfirm>
			
 
				         <a class="table-action-link" @click="handleDownLoad(record)">下载</a>
			
@@ -21,296 +18,296 @@
 
				 </template>
			
 
				 
			
 
				 <script lang="ts" name="system-user" setup>
			
 
				-//ts语法
			
 
				-import { ref, provide, reactive, toRaw, defineExpose, } from 'vue';
			
 
				-import { BasicTable, TableAction } from '/@/components/Table';
			
 
				-import { useModal } from '/@/components/Modal';
			
 
				-import DeviceModal from './DeviceModal.vue';
			
 
				-import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
			
 
				-import { useListPage } from '/@/hooks/system/useListPage';
			
 
				+  //ts语法
			
 
				+  import { ref, provide, reactive, toRaw, defineExpose } from 'vue';
			
 
				+  import { BasicTable, TableAction } from '/@/components/Table';
			
 
				+  import { useModal } from '/@/components/Modal';
			
 
				+  import DeviceModal from './DeviceModal.vue';
			
 
				+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
			
 
				+  import { useListPage } from '/@/hooks/system/useListPage';
			
 
				 
			
 
				-const props = defineProps({
			
 
				-  //各矿参数
			
 
				-  selfParam: {
			
 
				-    type: Object,
			
 
				-    default: () => {
			
 
				-      return {}
			
 
				-    }
			
 
				-  },
			
 
				-  //查询参数
			
 
				-  searchParam: {
			
 
				-    type: String,
			
 
				-    default: '',
			
 
				-  },
			
 
				-  //菜单树传递参数
			
 
				-  nodeParam: {
			
 
				-    type: Object,
			
 
				-    default: () => {
			
 
				-      return {};
			
 
				+  const props = defineProps({
			
 
				+    //各矿参数
			
 
				+    selfParam: {
			
 
				+      type: Object,
			
 
				+      default: () => {
			
 
				+        return {};
			
 
				+      },
			
 
				+    },
			
 
				+    //查询参数
			
 
				+    searchParam: {
			
 
				+      type: String,
			
 
				+      default: '',
			
 
				+    },
			
 
				+    //菜单树传递参数
			
 
				+    nodeParam: {
			
 
				+      type: Object,
			
 
				+      default: () => {
			
 
				+        return {};
			
 
				+      },
			
 
				+    },
			
 
				+    columnsType: {
			
 
				+      type: String,
			
 
				+      // required: true,
			
 
				+    },
			
 
				+    columns: {
			
 
				+      type: Array,
			
 
				+      // required: true,
			
 
				+      default: () => [],
			
 
				     },
			
 
				-  },
			
 
				-  columnsType: {
			
 
				-    type: String,
			
 
				-    // required: true,
			
 
				-  },
			
 
				-  columns: {
			
 
				-    type: Array,
			
 
				-    // required: true,
			
 
				-    default: () => [],
			
 
				-  },
			
 
				 
			
 
				-  list: {
			
 
				-    type: Function,
			
 
				-    required: true,
			
 
				-  },
			
 
				-  //下载文件接口
			
 
				-  downLoad: {
			
 
				-    type: Function,
			
 
				-    required: true,
			
 
				-  },
			
 
				+    list: {
			
 
				+      type: Function,
			
 
				+      required: true,
			
 
				+    },
			
 
				+    //下载文件接口
			
 
				+    downLoad: {
			
 
				+      type: Function,
			
 
				+      required: true,
			
 
				+    },
			
 
				 
			
 
				-  deleteById: {
			
 
				-    type: Function,
			
 
				-    required: true,
			
 
				-  },
			
 
				-  pointList: {
			
 
				-    type: Function,
			
 
				-    // required: true,
			
 
				-  },
			
 
				-  designScope: {
			
 
				-    type: String,
			
 
				-  },
			
 
				-  title: {
			
 
				-    type: String,
			
 
				-  },
			
 
				-});
			
 
				-let fileType = ref(''); //文件类型
			
 
				-let editID = ref(0); //文件ID
			
 
				+    deleteById: {
			
 
				+      type: Function,
			
 
				+      required: true,
			
 
				+    },
			
 
				+    pointList: {
			
 
				+      type: Function,
			
 
				+      // required: true,
			
 
				+    },
			
 
				+    designScope: {
			
 
				+      type: String,
			
 
				+    },
			
 
				+    title: {
			
 
				+      type: String,
			
 
				+    },
			
 
				+  });
			
 
				+  let fileType = ref(''); //文件类型
			
 
				+  let editID = ref(0); //文件ID
			
 
				 
			
 
				-const isUpdate = ref(false);
			
 
				-const record = reactive({});
			
 
				+  const isUpdate = ref(false);
			
 
				+  const record = reactive({});
			
 
				 
			
 
				-provide('formData', record);
			
 
				-const [registerModal, { openModal, closeModal }] = useModal();
			
 
				+  provide('formData', record);
			
 
				+  const [registerModal, { openModal, closeModal }] = useModal();
			
 
				 
			
 
				-const columnList = getTableHeaderColumns(props.columnsType);
			
 
				-console.log('aaa', columnList);
			
 
				+  const columnList = getTableHeaderColumns(props.columnsType);
			
 
				+  console.log('aaa', columnList);
			
 
				 
			
 
				-// 列表页面公共参数、方法
			
 
				-const { tableContext, doRequest } = useListPage({
			
 
				-  designScope: props.designScope,
			
 
				-  tableProps: {
			
 
				-    title: props.title,
			
 
				-    api: props.list,
			
 
				-    columns: props.columns.length > 0 ? (props.columns as any[]) : columnList,
			
 
				-    // size: 'small',
			
 
				-    bordered: false,
			
 
				-    // formConfig: {
			
 
				-    //   // labelWidth: 100,
			
 
				-    //   labelAlign: 'left',
			
 
				-    //   labelCol: {
			
 
				-    //     xs: 24,
			
 
				-    //     sm: 24,
			
 
				-    //     md: 24,
			
 
				-    //     lg: 9,
			
 
				-    //     xl: 7,
			
 
				-    //     xxl: 5,
			
 
				-    //   },
			
 
				-    //   schemas: props.searchFormSchema as any[],
			
 
				-    // },
			
 
				-    striped: true,
			
 
				-    showIndexColumn: true, //是否显示序列号
			
 
				-    actionColumn: {
			
 
				-      width: 280,
			
 
				-    },
			
 
				-    useSearchForm: false, //不使用查询条件
			
 
				-    // pagination: false, //不使用分页组件
			
 
				-    beforeFetch: (params) => {
			
 
				-      params.parentId = props.nodeParam.id ? props.nodeParam.id : '';
			
 
				-      params.selectFlag = props.nodeParam.id ? false : true;
			
 
				-      params.likeFileName = props.searchParam ? props.searchParam : '';
			
 
				-      params.bpmStatus = props.selfParam.bpmStatus ? props.selfParam.bpmStatus : ''
			
 
				-      params.sysOrgCode = props.selfParam.sysOrgCode ? props.selfParam.sysOrgCode : ''
			
 
				-      // return Object.assign({ column: '111', order: 'd11' }, params);
			
 
				-      // return Object.assign({ parentId: '', selectFlag: true, likeFileName: '' }, params);
			
 
				+  // 列表页面公共参数、方法
			
 
				+  const { tableContext, doRequest } = useListPage({
			
 
				+    designScope: props.designScope,
			
 
				+    tableProps: {
			
 
				+      title: props.title,
			
 
				+      api: props.list,
			
 
				+      columns: props.columns.length > 0 ? (props.columns as any[]) : columnList,
			
 
				+      // size: 'small',
			
 
				+      bordered: false,
			
 
				+      // formConfig: {
			
 
				+      //   // labelWidth: 100,
			
 
				+      //   labelAlign: 'left',
			
 
				+      //   labelCol: {
			
 
				+      //     xs: 24,
			
 
				+      //     sm: 24,
			
 
				+      //     md: 24,
			
 
				+      //     lg: 9,
			
 
				+      //     xl: 7,
			
 
				+      //     xxl: 5,
			
 
				+      //   },
			
 
				+      //   schemas: props.searchFormSchema as any[],
			
 
				+      // },
			
 
				+      striped: true,
			
 
				+      showIndexColumn: true, //是否显示序列号
			
 
				+      actionColumn: {
			
 
				+        width: 280,
			
 
				+      },
			
 
				+      useSearchForm: false, //不使用查询条件
			
 
				+      // pagination: false, //不使用分页组件
			
 
				+      beforeFetch: (params) => {
			
 
				+        params.parentId = props.nodeParam.id ? props.nodeParam.id : '';
			
 
				+        params.selectFlag = props.nodeParam.id ? false : true;
			
 
				+        params.likeFileName = props.searchParam ? props.searchParam : '';
			
 
				+        params.bpmStatus = props.selfParam.bpmStatus ? props.selfParam.bpmStatus : '';
			
 
				+        params.sysOrgCode = props.selfParam.sysOrgCode ? props.selfParam.sysOrgCode : '';
			
 
				+        // return Object.assign({ column: '111', order: 'd11' }, params);
			
 
				+        // return Object.assign({ parentId: '', selectFlag: true, likeFileName: '' }, params);
			
 
				+      },
			
 
				     },
			
 
				-  },
			
 
				-});
			
 
				-
			
 
				-//注册table数据
			
 
				-const [registerTable, { reload }, { selectedRowKeys }] = tableContext;
			
 
				-/**
			
 
				- * 编辑事件
			
 
				- */
			
 
				-function handleEdit(data) {
			
 
				-  isUpdate.value = true;
			
 
				-  Object.assign(record, toRaw(data));
			
 
				-  console.log(record, '编辑');
			
 
				-  let index = record.fileSuffix.indexOf('.');
			
 
				-  fileType.value = record.fileSuffix.substring(index + 1);
			
 
				-  editID.value = record.id;
			
 
				-  console.log(fileType, '文件格式');
			
 
				-  console.log(editID.value, '编辑文件ID');
			
 
				-  openModal(true, {
			
 
				-    record,
			
 
				   });
			
 
				-}
			
 
				 
			
 
				-/**
			
 
				- * 删除事件
			
 
				- */
			
 
				-async function handleDelete(record) {
			
 
				-  await props.deleteById({ id: record.id }, reload);
			
 
				-}
			
 
				+  //注册table数据
			
 
				+  const [registerTable, { reload }, { selectedRowKeys }] = tableContext;
			
 
				+  /**
			
 
				+   * 编辑事件
			
 
				+   */
			
 
				+  function handleEdit(data) {
			
 
				+    isUpdate.value = true;
			
 
				+    Object.assign(record, toRaw(data));
			
 
				+    console.log(record, '编辑');
			
 
				+    let index = record.fileSuffix.indexOf('.');
			
 
				+    fileType.value = record.fileSuffix.substring(index + 1);
			
 
				+    editID.value = record.id;
			
 
				+    console.log(fileType, '文件格式');
			
 
				+    console.log(editID.value, '编辑文件ID');
			
 
				+    openModal(true, {
			
 
				+      record,
			
 
				+    });
			
 
				+  }
			
 
				 
			
 
				-//下载文件
			
 
				-function handleDownLoad(record) {
			
 
				-  console.log(record, '下载');
			
 
				-  props.downLoad({ id: record.id }).then((res) => {
			
 
				-    console.log('11111');
			
 
				-    console.log(res, '文件下载成功');
			
 
				-    let filename = `${record.fileName}`;
			
 
				-    downFilePublic(res, filename);
			
 
				-  });
			
 
				-}
			
 
				-// 下载公用方法
			
 
				-function downFilePublic(content, fileName) {
			
 
				-  const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
			
 
				-  // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
			
 
				-  // IE10以上支持blob但是依然不支持download
			
 
				-  if ('download' in document.createElement('a')) {
			
 
				-    // 支持a标签download的浏览器
			
 
				-    const link = document.createElement('a'); // 创建a标签
			
 
				-    link.download = fileName; // a标签添加属性
			
 
				-    link.style.display = 'none';
			
 
				-    link.href = URL.createObjectURL(blob);
			
 
				-    document.body.appendChild(link);
			
 
				-    link.click(); // 执行下载
			
 
				-    URL.revokeObjectURL(link.href); // 释放url
			
 
				-    document.body.removeChild(link); // 释放标签
			
 
				-  } else {
			
 
				-    // 其他浏览器
			
 
				-    navigator.msSaveBlob(blob, fileName);
			
 
				+  /**
			
 
				+   * 删除事件
			
 
				+   */
			
 
				+  async function handleDelete(record) {
			
 
				+    await props.deleteById({ id: record.id }, reload);
			
 
				   }
			
 
				-}
			
 
				 
			
 
				-// /**
			
 
				-//  * 操作列定义
			
 
				-//  * @param record
			
 
				-//  */
			
 
				-// function getActions(record) {
			
 
				-//   return [
			
 
				-//     {
			
 
				-//       label: '详情',
			
 
				-//       onClick: handleEdit.bind(null, record),
			
 
				-//     },
			
 
				-//     {
			
 
				-//       label: '编辑',
			
 
				-//       onClick: handleEdit.bind(null, record),
			
 
				-//     },
			
 
				-//     {
			
 
				-//       label: '删除',
			
 
				-//       popConfirm: {
			
 
				-//         title: '是否确认删除',
			
 
				-//         confirm: handleDelete.bind(null, record),
			
 
				-//       },
			
 
				-//     },
			
 
				-//     {
			
 
				-//       label: '下载',
			
 
				-//       onClick: handleDownLoad.bind(null, record),
			
 
				-//     },
			
 
				-//     // {
			
 
				-//     //   label: '审批',
			
 
				-//     //   onClick: handleEdit.bind(null, record),
			
 
				-//     // },
			
 
				-//     // {
			
 
				-//     //   label: '查看',
			
 
				-//     //   onClick: handleDetail.bind(null, record),
			
 
				-//     // },
			
 
				-//   ];
			
 
				-// }
			
 
				-/**
			
 
				- * 下拉操作栏
			
 
				- */
			
 
				-function getDropDownAction(record) {
			
 
				-  return [
			
 
				-    // {
			
 
				-    //   label: '删除',
			
 
				-    //   popConfirm: {
			
 
				-    //     title: '是否确认删除',
			
 
				-    //     confirm: handleDelete.bind(null, record),
			
 
				-    //   },
			
 
				-    // },
			
 
				-    // {
			
 
				-    //   label: '查看',
			
 
				-    //   onClick: handleDetail.bind(null, record),
			
 
				-    // },
			
 
				-  ];
			
 
				-}
			
 
				+  //下载文件
			
 
				+  function handleDownLoad(record) {
			
 
				+    console.log(record, '下载');
			
 
				+    props.downLoad({ id: record.id }).then((res) => {
			
 
				+      console.log('11111');
			
 
				+      console.log(res, '文件下载成功');
			
 
				+      let filename = `${record.fileName}`;
			
 
				+      downFilePublic(res, filename);
			
 
				+    });
			
 
				+  }
			
 
				+  // 下载公用方法
			
 
				+  function downFilePublic(content, fileName) {
			
 
				+    const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
			
 
				+    // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
			
 
				+    // IE10以上支持blob但是依然不支持download
			
 
				+    if ('download' in document.createElement('a')) {
			
 
				+      // 支持a标签download的浏览器
			
 
				+      const link = document.createElement('a'); // 创建a标签
			
 
				+      link.download = fileName; // a标签添加属性
			
 
				+      link.style.display = 'none';
			
 
				+      link.href = URL.createObjectURL(blob);
			
 
				+      document.body.appendChild(link);
			
 
				+      link.click(); // 执行下载
			
 
				+      URL.revokeObjectURL(link.href); // 释放url
			
 
				+      document.body.removeChild(link); // 释放标签
			
 
				+    } else {
			
 
				+      // 其他浏览器
			
 
				+      navigator.msSaveBlob(blob, fileName);
			
 
				+    }
			
 
				+  }
			
 
				 
			
 
				+  // /**
			
 
				+  //  * 操作列定义
			
 
				+  //  * @param record
			
 
				+  //  */
			
 
				+  // function getActions(record) {
			
 
				+  //   return [
			
 
				+  //     {
			
 
				+  //       label: '详情',
			
 
				+  //       onClick: handleEdit.bind(null, record),
			
 
				+  //     },
			
 
				+  //     {
			
 
				+  //       label: '编辑',
			
 
				+  //       onClick: handleEdit.bind(null, record),
			
 
				+  //     },
			
 
				+  //     {
			
 
				+  //       label: '删除',
			
 
				+  //       popConfirm: {
			
 
				+  //         title: '是否确认删除',
			
 
				+  //         confirm: handleDelete.bind(null, record),
			
 
				+  //       },
			
 
				+  //     },
			
 
				+  //     {
			
 
				+  //       label: '下载',
			
 
				+  //       onClick: handleDownLoad.bind(null, record),
			
 
				+  //     },
			
 
				+  //     // {
			
 
				+  //     //   label: '审批',
			
 
				+  //     //   onClick: handleEdit.bind(null, record),
			
 
				+  //     // },
			
 
				+  //     // {
			
 
				+  //     //   label: '查看',
			
 
				+  //     //   onClick: handleDetail.bind(null, record),
			
 
				+  //     // },
			
 
				+  //   ];
			
 
				+  // }
			
 
				+  /**
			
 
				+   * 下拉操作栏
			
 
				+   */
			
 
				+  function getDropDownAction(record) {
			
 
				+    return [
			
 
				+      // {
			
 
				+      //   label: '删除',
			
 
				+      //   popConfirm: {
			
 
				+      //     title: '是否确认删除',
			
 
				+      //     confirm: handleDelete.bind(null, record),
			
 
				+      //   },
			
 
				+      // },
			
 
				+      // {
			
 
				+      //   label: '查看',
			
 
				+      //   onClick: handleDetail.bind(null, record),
			
 
				+      // },
			
 
				+    ];
			
 
				+  }
			
 
				 
			
 
				-defineExpose({
			
 
				-  doRequest,
			
 
				-});
			
 
				+  defineExpose({
			
 
				+    doRequest,
			
 
				+  });
			
 
				 </script>
			
 
				 
			
 
				 <style scoped lang="less">
			
 
				-// @ventSpace: zxm;
			
 
				+  // @ventSpace: zxm;
			
 
				 
			
 
				-// @vent-table-no-hover: rgba(43, 135, 255, 0.1);
			
 
				+  // @vent-table-no-hover: rgba(43, 135, 255, 0.1);
			
 
				 
			
 
				-// @vent-table-hover: rgba(53, 147, 255, 0.2);
			
 
				-// :deep(.zxm-table-row) {
			
 
				-//   td {
			
 
				-//     background-color: @vent-table-hover !important;
			
 
				-//   }
			
 
				-// }
			
 
				-// :deep(.jeecg-basic-table-row__striped) {
			
 
				-//   td {
			
 
				-//     background-color: @vent-table-no-hover !important;
			
 
				-//   }
			
 
				-// }
			
 
				+  // @vent-table-hover: rgba(53, 147, 255, 0.2);
			
 
				+  // :deep(.zxm-table-row) {
			
 
				+  //   td {
			
 
				+  //     background-color: @vent-table-hover !important;
			
 
				+  //   }
			
 
				+  // }
			
 
				+  // :deep(.jeecg-basic-table-row__striped) {
			
 
				+  //   td {
			
 
				+  //     background-color: @vent-table-no-hover !important;
			
 
				+  //   }
			
 
				+  // }
			
 
				 
			
 
				-// ::v-deep .zxm-table-title {
			
 
				-//   display: none;
			
 
				-// }
			
 
				-// ::v-deep .zxm-table-thead > tr > th {
			
 
				-//   border-top: 0px !important;
			
 
				-//   border-left: 0px !important;
			
 
				-//   border-right: 0px !important;
			
 
				-//   border-bottom: 1px solid #268bc1 !important;
			
 
				-//   color: #3beff9 !important;
			
 
				-// }
			
 
				-// ::v-deep .zxm-table-tbody > tr > td {
			
 
				-//   border: none;
			
 
				-// }
			
 
				+  // ::v-deep .zxm-table-title {
			
 
				+  //   display: none;
			
 
				+  // }
			
 
				+  // ::v-deep .zxm-table-thead > tr > th {
			
 
				+  //   border-top: 0px !important;
			
 
				+  //   border-left: 0px !important;
			
 
				+  //   border-right: 0px !important;
			
 
				+  //   border-bottom: 1px solid #268bc1 !important;
			
 
				+  //   color: #3beff9 !important;
			
 
				+  // }
			
 
				+  // ::v-deep .zxm-table-tbody > tr > td {
			
 
				+  //   border: none;
			
 
				+  // }
			
 
				 
			
 
				-// ::v-deep .zxm-table-thead {
			
 
				-//   background: linear-gradient(to bottom, transparent, rgba(53, 147, 255, 0.5)) !important;
			
 
				-// }
			
 
				+  // ::v-deep .zxm-table-thead {
			
 
				+  //   background: linear-gradient(to bottom, transparent, rgba(53, 147, 255, 0.5)) !important;
			
 
				+  // }
			
 
				 
			
 
				-@ventSpace: zxm;
			
 
				+  @ventSpace: zxm;
			
 
				 
			
 
				-@vent-table-no-hover: #00bfff10;
			
 
				+  @vent-table-no-hover: #00bfff10;
			
 
				 
			
 
				-:deep(.@{ventSpace}-table-cell-row-hover) {
			
 
				-  background: #264d8833 !important;
			
 
				-}
			
 
				+  :deep(.@{ventSpace}-table-cell-row-hover) {
			
 
				+    background: #264d8833 !important;
			
 
				+  }
			
 
				 
			
 
				-:deep(.@{ventSpace}-table-row-selected) {
			
 
				-  background: #268bc522 !important;
			
 
				-}
			
 
				+  :deep(.@{ventSpace}-table-row-selected) {
			
 
				+    background: #268bc522 !important;
			
 
				+  }
			
 
				 
			
 
				-:deep(.@{ventSpace}-table-tbody > tr > td) {
			
 
				-  background-color: #0dc3ff05;
			
 
				-}
			
 
				+  :deep(.@{ventSpace}-table-tbody > tr > td) {
			
 
				+    background-color: #0dc3ff05;
			
 
				+  }
			
 
				 
			
 
				-:deep(.jeecg-basic-table-row__striped) {
			
 
				-  td {
			
 
				-    background-color: @vent-table-no-hover !important;
			
 
				+  :deep(.jeecg-basic-table-row__striped) {
			
 
				+    td {
			
 
				+      background-color: @vent-table-no-hover !important;
			
 
				+    }
			
 
				   }
			
 
				-}
			
 
				 
			
 
				-::v-deep .zxm-table-title {
			
 
				-  display: none;
			
 
				-}</style>
			
 
				+  ::v-deep .zxm-table-title {
			
 
				+    display: none;
			
 
				+  }
			
 
				+</style>
			
--- a/src/views/vent/performance/fileDetail/commen/treeList.vue
+++ b/src/views/vent/performance/fileDetail/commen/treeList.vue
@@ -307,7 +307,7 @@
 
				 
			
 
				       &.selected {
			
 
				         // background-color: rgba(45, 113, 134, 0.2);
			
 
				-        background-color: #1C4869;
			
 
				+        background-color: #1c4869;
			
 
				       }
			
 
				 
			
 
				       .vtl-input {
			
--- a/src/views/vent/performance/fileDetail/fileDetail.data.ts
+++ b/src/views/vent/performance/fileDetail/fileDetail.data.ts
@@ -20,7 +20,6 @@ export const columns: BasicColumn[] = [
 
				   {
			
 
				     title: '文件类型',
			
 
				     dataIndex: 'fileType_dictText',
			
 
				-  
			
 
				   },
			
 
				   {
			
 
				     title: '文件来源',
			
@@ -34,7 +33,6 @@ export const columns: BasicColumn[] = [
 
				   {
			
 
				     title: '审批状态',
			
 
				     dataIndex: 'bpmStatus_dictText',
			
 
				-    
			
 
				   },
			
 
				   {
			
 
				     title: '当前审批人',
			
@@ -46,5 +44,3 @@ export const columns: BasicColumn[] = [
 
				     dataIndex: 'createTime',
			
 
				   },
			
 
				 ];
			
 
				-
			
 
				-
			
--- a/src/views/vent/performance/fileDetail/index.vue
+++ b/src/views/vent/performance/fileDetail/index.vue
@@ -301,8 +301,8 @@
 
				     padding: 15px;
			
 
				     position: relative;
			
 
				     margin-top: 100px;
			
 
				-    background: url(../../../../assets/images/files/homes/bd.png) no-repeat center;
			
 
				-    background-size: contain;
			
 
				+    // background: url(../../../../assets/images/files/homes/bd.png) no-repeat center;
			
 
				+    // background-size: contain;
			
 
				 
			
 
				     &::after {
			
 
				       display: block;
			
@@ -441,7 +441,6 @@
 
				     // background: transparent !important;
			
 
				     // backdrop-filter: blur(50px);
			
 
				 
			
 
				-
			
 
				     .@{ventSpace}-select-item-option-selected,
			
 
				     .@{ventSpace}-select-item-option-active {
			
 
				       background-color: #ffffff33 !important;
			
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -71,7 +71,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
 
				     },
			
 
				     build: {
			
 
				       minify: 'esbuild',
			
 
				-      target: 'es2015',
			
 
				+      target: 'es2020',
			
 
				       cssTarget: 'chrome80',
			
 
				       outDir: OUTPUT_DIR,
			
 
				       rollupOptions: {