Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

src/hooks/vent/useAutoLogin.ts

@@ -7,27 +7,41 @@ import { AxiosError } from 'axios';
 
 /** 自动登录功能的Hook，该Hook是为了部署在同一局域网内的多套系统之间能够无缝切换 */
 export function useAutoLogin() {
-  /** 启用自动登录功能来跳转新的页面 */
-  function open(url: string, target?: string) {
+  /** 获取自动登录的url */
+  function getUrl(baseUrl: string, extraQuery: Record<string, string> = {}) {
     const userStore = useUserStore();
     const qs = QueryString.stringify({
       [AUTO_LOGIN_URL_QUERY.key]: AUTO_LOGIN_URL_QUERY.val,
-      username: userStore.getUserInfo.username,
+      realname: userStore.getUserInfo.realname,
       workNo: userStore.getUserInfo.workNo,
+      ...extraQuery,
     });
-    window.open(`${url}?${qs}`, target);
+    return `${baseUrl}?${qs}`;
+  }
+
+  /** 启用自动登录功能来跳转新的页面 */
+  function open(url: string, target?: string) {
+    window.open(getUrl(url), target);
   }
 
-  /** 用在路由守卫里，执行自动登录的逻辑，如果存在符合自动登录标准的query则执行自动登录，返回是否需要重定向 */
+  /** 判断当前路由是否需要自动登录，本方法是同步方法，可以用于事先判断 */
+  function validateRoute(route: RouteLocationNormalized) {
+    if (route.query && route.query[AUTO_LOGIN_URL_QUERY.key] === AUTO_LOGIN_URL_QUERY.val) {
+      return true;
+    }
+
+    return false;
+  }
+
+  /** 用在路由守卫里，执行自动登录的逻辑，如果存在符合自动登录标准的query则执行自动登录，返回是否自动登录 */
   async function doAutoLogin(route: RouteLocationNormalized): Promise<void> {
-    if (!route.query) return;
-    if (route.query[AUTO_LOGIN_URL_QUERY.key] !== AUTO_LOGIN_URL_QUERY.val) return;
+    if (!validateRoute(route)) return;
 
-    const { username, workNo } = route.query;
-    if (!username || !workNo) return;
+    const { realname, workNo } = route.query;
+    if (!realname || !workNo) return;
 
     const params = {
-      username: username as string,
+      username: realname as string,
       workNo: workNo as string,
       checkKey: new Date().getTime(),
     };
@@ -37,18 +51,25 @@ export function useAutoLogin() {
         ...params,
         goHome: false,
       });
+      delete route.query[AUTO_LOGIN_URL_QUERY.key];
+      delete route.query['username'];
+      delete route.query['workNo'];
       return;
     } catch (e) {
       const message = useMessage().createMessage;
       message.error((e as AxiosError).message);
-      return;
+      throw e;
     }
   }
 
   return {
-    /** 启用单点登录功能来跳转新的页面，参数与window.open一致，但需要注意url需要指向登录页 */
+    /** 启用单点登录功能来跳转新的页面，参数与window.open一致 */
     open,
     /** 用在跳转到的页面上，执行单点登录的逻辑 */
     doAutoLogin,
+    /** 获取自动登录的url */
+    getUrl,
+    /** 判断当前路由是否需要自动登录，本方法是同步方法，可以用于事先判断 */
+    validateRoute,
   };
 }

src/router/guard/permissionGuard.ts

@@ -15,7 +15,7 @@ import { OAUTH2_THIRD_LOGIN_TENANT_ID } from '/@/enums/cacheEnum';
 import { useGlobSetting } from '/@/hooks/setting';
 
 import _ from 'lodash';
-import { AUTO_LOGIN_URL_QUERY, MOCK_LOGIN_URL_QUERY, SKIP_SSO_URL_QUERY } from '../constant';
+import { AUTO_LOGIN_URL_QUERY, SKIP_SSO_URL_QUERY } from '../constant';
 import { useSso } from '/@/hooks/web/useSso';
 import { useAutoLogin } from '/@/hooks/vent/useAutoLogin';
 
@@ -41,15 +41,14 @@ const glob = useGlobSetting();
 export function createPermissionGuard(router: Router) {
   const userStore = useUserStoreWithOut();
   const permissionStore = usePermissionStoreWithOut();
-  const { doAutoLogin } = useAutoLogin();
+  const { doAutoLogin, validateRoute } = useAutoLogin();
 
-  router.beforeEach(async (to, from) => {
+  router.beforeEach(async (to, from, next) => {
     RootRoute.redirect = glob.homePath || PageEnum.BASE_HOME;
 
     if (_.isEmpty(history.state.current)) {
       _.assign(history.state, { current: from.fullPath });
     }
-
     if (
       from.path === ROOT_PATH &&
       to.path === (glob.homePath || PageEnum.BASE_HOME) &&
@@ -57,12 +56,17 @@ export function createPermissionGuard(router: Router) {
       userStore.getUserInfo.homePath !== (glob.homePath || PageEnum.BASE_HOME)
     ) {
       // mountMicroApp(userStore.getUserInfo.homePath);
+      next(userStore.getUserInfo.homePath);
       document.title = '首页';
-      return userStore.getUserInfo.homePath;
+      return;
     }
 
     // 如果符合自动登录的相关条件则直接执行自动登录，覆盖原有的登录信息
-    await doAutoLogin(to);
+    if (validateRoute(to)) {
+      await doAutoLogin(to);
+      // 自动登录后会动态添加路由，此处应当重定向到fullPath，否则会加载404页面内容
+      return next({ path: to.fullPath, replace: true });
+    }
 
     const token = userStore.getToken;
 
@@ -78,8 +82,9 @@ export function createPermissionGuard(router: Router) {
 
         try {
           if (!isSessionTimeout) {
+            next((to.query?.redirect as string) || '/');
             document.title = '';
-            return (to.query?.redirect as string) || '/';
+            return;
           }
         } catch {}
         //update-begin---author:wangshuai ---date:20220629  for：[issues/I5BG1I]vue3不支持auth2登录------------
@@ -90,24 +95,27 @@ export function createPermissionGuard(router: Router) {
         // if (to.query.tenantId) {
         //   setAuthCache(OAUTH2_THIRD_LOGIN_TENANT_ID, to.query.tenantId);
         // }
+        next({ path: OAUTH2_LOGIN_PAGE_PATH });
         document.title = '登录';
-        return { path: OAUTH2_LOGIN_PAGE_PATH };
         ///
 
         //update-end---author:wangshuai ---date:20230224  for：[QQYUN-3440]新建企业微信和钉钉配置表，通过租户模式隔离------------
-        return true;
+        return;
         //update-end---author:wangshuai ---date:20220629  for：[issues/I5BG1I]vue3不支持auth2登录------------
       }
+      next();
+
       document.title = to.meta.title;
-      return true;
+      return;
     }
 
     // token does not exist
     if (!token) {
       // You can access without permission. You need to set the routing meta.ignoreAuth to true
       if (to.meta.ignoreAuth) {
+        next();
         document.title = to.meta.title;
-        return true;
+        return;
       }
       // query如果没有明确要求跳过sso则执行sso登录
       if (to.query[SKIP_SSO_URL_QUERY.key] !== SKIP_SSO_URL_QUERY.val) {
@@ -115,30 +123,30 @@ export function createPermissionGuard(router: Router) {
         // 如果需要重定向到sso页面则取消路由导航
         if (redirectSso) return;
       }
-      // query中要求自动登录的执行自动登录
-      if (to.query[MOCK_LOGIN_URL_QUERY.key] === MOCK_LOGIN_URL_QUERY.val) {
-        const userStore = useUserStoreWithOut();
-        await userStore.mockLogin({
-          goHome: false,
-        });
-        return {
-          path: to.path,
-          query: to.query,
-        };
-      }
+      // @deprecated query中要求自动登录的执行自动登录
+      // if (to.query[AUTO_LOGIN_URL_QUERY.key] === AUTO_LOGIN_URL_QUERY.val) {
+      //   const userStore = useUserStoreWithOut();
+      //   await userStore.mockLogin({
+      //     goHome: false,
+      //   });
+      //   return next({
+      //     path: to.path,
+      //     query: to.query,
+      //   });
+      // }
 
       //update-begin---author:wangshuai ---date:20220629  for：[issues/I5BG1I]vue3 Auth2未实现------------
       let path = LOGIN_PATH;
       if (whitePathList.includes(to.path as PageEnum)) {
         // 在免登录白名单，如果进入的页面是login页面并且当前是OAuth2app环境，就进入OAuth2登录页面
         if (to.path === LOGIN_PATH && isOAuth2AppEnv()) {
+          next({ path: OAUTH2_LOGIN_PAGE_PATH });
           document.title = '登录';
-          return { path: OAUTH2_LOGIN_PAGE_PATH };
         } else {
           //在免登录白名单，直接进入
           // mountMicroApp(to.path);
+          next();
           document.title = to.meta.title;
-          return true;
         }
       } else {
         //update-begin---author:wangshuai ---date:20230302  for：只有首次登陆并且是企业微信或者钉钉的情况下才会调用------------
@@ -189,14 +197,16 @@ export function createPermissionGuard(router: Router) {
         };
       }
       // mountMicroApp(redirectData.path);
+      next(redirectData);
       document.title = '';
-      return redirectData;
+      return;
     }
     //==============================【首次登录并且是企业微信或者钉钉的情况下才会调用】==================
     //判断是免登录页面,如果页面包含/tenantId/,那么就直接前往主页
     if (isOAuth2AppEnv() && to.path.indexOf('/tenantId/') != -1) {
+      next(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
       document.title = '首页';
-      return userStore.getUserInfo.homePath || PageEnum.BASE_HOME;
+      return;
     }
     //==============================【首次登录并且是企业微信或者钉钉的情况下才会调用】==================
 
@@ -207,8 +217,9 @@ export function createPermissionGuard(router: Router) {
       to.fullPath !== (userStore.getUserInfo.homePath || glob.homePath || PageEnum.BASE_HOME)
     ) {
       // mountMicroApp(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
+      next(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
       document.title = '首页';
-      return userStore.getUserInfo.homePath || PageEnum.BASE_HOME;
+      return;
     }
 
     // get userinfo while last fetch time is empty
@@ -218,14 +229,15 @@ export function createPermissionGuard(router: Router) {
       } catch (err) {
         console.info(err);
         // mountMicroApp(to.path);
+        next();
         document.title = to.meta.title;
-        return true;
       }
     }
     if (permissionStore.getIsDynamicAddedRoute) {
       // mountMicroApp(to.path);
+      next();
       document.title = to.meta.title;
-      return true;
+      return;
     }
 
     const routes = await permissionStore.buildRoutesAction();
@@ -241,13 +253,14 @@ export function createPermissionGuard(router: Router) {
 
     if (to.name === PAGE_NOT_FOUND_ROUTE.name) {
       // 动态添加路由后，此处应当重定向到fullPath，否则会加载404页面内容
-      return { path: to.fullPath, replace: true, query: to.query };
+      next({ path: to.fullPath, replace: true, query: to.query });
     } else {
       const redirectPath = (from.query.redirect || to.path) as string;
       const redirect = decodeURIComponent(redirectPath);
-      // mountMicroApp(return Data.path);
+      const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect };
+      // mountMicroApp(nextData.path);
+      next(nextData);
       document.title = '';
-      return to.path === redirect ? { ...to, replace: true } : { path: redirect };
     }
   });
 }

src/store/modules/user.ts

@@ -86,8 +86,7 @@ export const useUserStore = defineStore({
       return this.shareTenantId != null && this.shareTenantId !== '';
     },
     // 目前用户角色列表为空数组，所以使用既定的用户名判断
-    getIsMockLogin() {
-      console.log(this.getUserInfo.username === MOCK_LOGIN_UESRNAME);
+    getIsMockLogin(): boolean {
       return this.getUserInfo.username === MOCK_LOGIN_UESRNAME;
     },
   },

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

@@ -136,7 +136,7 @@
   // 页面跳转
   function openHandler(ip: string) {
     // const url = `http://localhost:3100/login`;
-    const url = `http://${ip}:8092/${routePathMap[props.billboardType]}`;
+    const url = `http://${ip}:8092${routePathMap[props.billboardType]}`;
     open(url);
   }
 

src/views/vent/monitorManager/alarmMonitor/warn/gasWarn.vue

@@ -1,246 +1,256 @@
 <template>
-    <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 瓦斯监测预警 </customHeader>
-    <div class="gasWarn">
-        <a-button preIcon="ant-design:rollback-outlined" type="text" size="small"
-            style="position: absolute;left:15px;top:15px;color: #fff;" @click="getBack">返回</a-button>
-        <div class="alarm-menu">
-            <div class="type-btn">
-                <div :class="activeIndex == index ? 'btn1' : 'btn'" v-for="(item, index) in typeMenuListGas"
-                    :key="index" @click="btnClick(index)">
-                    {{ item.name }}
-                </div>
-            </div>
-            <div class="card-btn">
-                <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind"
-                    @click="cardClick(ind, item)">
-                    <div class="text">{{ item.name }}</div>
-                    <div class="warn">{{ item.warn }}</div>
+  <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 瓦斯监测预警 </customHeader>
+  <div class="gasWarn">
+    <a-button
+      preIcon="ant-design:rollback-outlined"
+      type="text"
+      size="small"
+      style="position: absolute; left: 15px; top: 15px; color: #fff"
+      @click="getBack"
+      >返回</a-button
+    >
+    <div class="alarm-menu">
+      <div class="type-btn">
+        <div :class="activeIndex == index ? 'btn1' : 'btn'" v-for="(item, index) in typeMenuListGas" :key="index" @click="btnClick(index)">
+          {{ item.name }}
+        </div>
+      </div>
+      <div class="card-btn">
+        <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind" @click="cardClick(ind, item)">
+          <div class="text">{{ item.name }}</div>
+          <div class="warn">{{ item.warn }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="gas-content">
+      <div style="width: 100%; height: 100%" v-if="isShow == 'yjjc'">
+        <div class="top-area" v-if="topAreaListWs.length != 0">
+          <div class="title-t">
+            <div class="text-t">瓦斯抽采泵信息</div>
+          </div>
+          <div class="content-t">
+            <div class="top-box" v-for="(item, index) in topAreaListWs" :key="index">
+              <div class="box-label">{{ item.label }}</div>
+              <div class="box-values">
+                <div class="value-b" v-for="(items, ind) in item.list" :key="ind">
+                  <span>{{ `${items.name} : ` }}</span>
+                  <span
+                    :class="{
+                      'box-value': items.val == 0 && items.name == '报警状态',
+                      'box-value1': items.val == 101 && items.name == '报警状态',
+                      'box-value2': items.val == 102 && items.name == '报警状态',
+                      'box-value3': items.val == 103 && items.name == '报警状态',
+                      'box-value4': items.val == 104 && items.name == '报警状态',
+                      'box-value5': (items.val == 201 || item.val == 1001) && items.name == '报警状态',
+                    }"
+                    >{{
+                      items.val == 0 && items.name == '报警状态'
+                        ? '正常'
+                        : items.val == 101 && items.name == '报警状态'
+                        ? '较低风险'
+                        : items.val == 102 && items.name == '报警状态'
+                        ? '低风险'
+                        : items.val == 103 && items.name == '报警状态'
+                        ? '中风险'
+                        : items.val == 104 && items.name == '报警状态'
+                        ? '高风险'
+                        : items.val == 201 && items.name == '报警状态'
+                        ? '报警'
+                        : items.val == 1001 && items.name == '报警状态'
+                        ? '网络断开'
+                        : items.val
+                    }}</span
+                  >
                 </div>
+              </div>
             </div>
+          </div>
         </div>
-        <div class="gas-content">
-            <div style="width:100%;height:100%" v-if="isShow=='yjjc'">
-                <div class="top-area" v-if="topAreaListWs.length != 0">
-                    <div class="title-t">
-                        <div class="text-t">瓦斯抽采泵信息</div>
-                    </div>
-                    <div class="content-t">
-                        <div class="top-box" v-for="(item, index) in topAreaListWs" :key="index">
-                            <div class="box-label">{{ item.label }}</div>
-                            <div class="box-values">
-                                <div class="value-b" v-for="(items, ind) in item.list" :key="ind">
-                                    <span>{{ `${items.name} : ` }}</span>
-                                    <span :class="{
-                                        'box-value': items.val == 0 && items.name == '报警状态',
-                                        'box-value1': items.val == 101 && items.name == '报警状态',
-                                        'box-value2': items.val == 102 && items.name == '报警状态',
-                                        'box-value3': items.val == 103 && items.name == '报警状态',
-                                        'box-value4': items.val == 104 && items.name == '报警状态',
-                                        'box-value5': (items.val == 201 || item.val == 1001) && items.name == '报警状态',
-                                    }">{{
-                                        items.val == 0 && items.name == '报警状态'
-                                            ? '正常'
-                                            : items.val == 101 && items.name == '报警状态'
-                                                ? '较低风险'
-                                                : items.val == 102 && items.name == '报警状态'
-                                                    ? '低风险'
-                                                    : items.val == 103 && items.name == '报警状态'
-                                                        ? '中风险'
-                                                        : items.val == 104 && items.name == '报警状态'
-                                                            ? '高风险'
-                                                            : items.val == 201 && items.name == '报警状态'
-                                                                ? '报警' : items.val == 1001 && items.name == '报警状态' ? '网络断开'
-                                                                    : items.val
-                                    }}</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                </div>
 
-                <div :class="topAreaListWs.length != 0 ? 'bot-area' : 'bot-area1'">
-                    <div class="title-b">
-                        <div class="text-b">安全监控测点信息</div>
-                    </div>
-                    <div class="content-b">
-                        <div class="card-b" v-for="(item, index) in cardListWs" :key="index">
-                            <div class="item-l">
-                                <div class="label-l">{{ item.label }}</div>
-                                <div class="value-l">{{ `${item.value}%` }}</div>
-                            </div>
-                            <div class="item-r">
-                                <div class="content-r" v-for="(items, ind) in item.listR" :key="ind">
-                                    <span>{{ `${items.label} : ` }}</span>
-                                    <span :class="{
-                                        'status-f': items.value == 1,
-                                        'status-l': items.value == 0,
-                                    }">{{ items.value == 1 ? '异常' : items.value == 0 ? '正常' : items.value }}</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+        <div :class="topAreaListWs.length != 0 ? 'bot-area' : 'bot-area1'">
+          <div class="title-b">
+            <div class="text-b">安全监控测点信息</div>
+          </div>
+          <div class="content-b">
+            <div class="card-b" v-for="(item, index) in cardListWs" :key="index">
+              <div class="item-l">
+                <div class="label-l">{{ item.label }}</div>
+                <div class="value-l">{{ `${item.value}%` }}</div>
+              </div>
+              <div class="item-r">
+                <div class="content-r" v-for="(items, ind) in item.listR" :key="ind">
+                  <span>{{ `${items.label} : ` }}</span>
+                  <span
+                    :class="{
+                      'status-f': items.value == 1,
+                      'status-l': items.value == 0,
+                    }"
+                    >{{ items.value == 1 ? '异常' : items.value == 0 ? '正常' : items.value }}</span
+                  >
                 </div>
+              </div>
             </div>
-            <div style="width:100%;height:100%" v-else-if="isShow=='yjzb'">
-                <warnTargetGas></warnTargetGas>
-            </div>
-            <div style="width:100%;height:100%" v-else-if="isShow=='wscs'">
-                <gasParamter></gasParamter>
-            </div>
+          </div>
         </div>
+      </div>
+      <div style="width: 100%; height: 100%" v-else-if="isShow == 'yjzb'">
+        <warnTargetGas></warnTargetGas>
+      </div>
+      <div style="width: 100%; height: 100%" v-else-if="isShow == 'wscs'">
+        <gasParamter></gasParamter>
+      </div>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, onUnmounted } from 'vue'
-import { sysTypeWarnList, sysWarn } from '../common.api'
-import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
-import { useRouter } from 'vue-router';
-import CustomHeader from '/@/components/vent/customHeader.vue';
-import warnTargetGas from '../common/warnTargetGas.vue'
-import gasParamter from '../common/gasParamter.vue'
-import { typeMenuListGas } from '../common.data'
-
-const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
-//当前左侧激活菜单的索引
-let activeIndex1 = ref(0);
-//左侧数据列表
-let menuList = reactive<any[]>([])
-//瓦斯顶部区域数据
-let topAreaListWs = reactive<any[]>([]);
-//瓦斯监控列表数据
-let cardListWs = reactive<any[]>([]);
-let router = useRouter()
-//监测/指标激活索引
-let activeIndex = ref(0);
-let isShow = ref('')
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(deviceID, flag?) {
+  import { ref, reactive, onMounted, onUnmounted } from 'vue';
+  import { sysTypeWarnList, sysWarn } from '../common.api';
+  import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
+  import { useRouter } from 'vue-router';
+  import CustomHeader from '/@/components/vent/customHeader.vue';
+  import warnTargetGas from '../common/warnTargetGas.vue';
+  import gasParamter from '../common/gasParamter.vue';
+  import { typeMenuListGas } from '../common.data';
+
+  const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
+  //当前左侧激活菜单的索引
+  let activeIndex1 = ref(0);
+  //左侧数据列表
+  let menuList = reactive<any[]>([]);
+  //瓦斯顶部区域数据
+  let topAreaListWs = reactive<any[]>([]);
+  //瓦斯监控列表数据
+  let cardListWs = reactive<any[]>([]);
+  let router = useRouter();
+  //监测/指标激活索引
+  let activeIndex = ref(0);
+  let isShow = ref('yjjc');
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(deviceID, flag?) {
     timer = setTimeout(
-        async () => {
-            await getSysWarnList(deviceID, 'gas');
-            if (timer) {
-                timer = null;
-            }
-            getMonitor(deviceID);
-        },
-        flag ? 0 : 1000
+      async () => {
+        await getSysWarnList(deviceID, 'gas');
+        if (timer) {
+          timer = null;
+        }
+        getMonitor(deviceID);
+      },
+      flag ? 0 : 1000
     );
-}
+  }
 
-//返回首页
-function getBack() {
-    router.push('/monitorChannel/monitor-alarm-home')
-}
+  //返回首页
+  function getBack() {
+    router.push('/monitorChannel/monitor-alarm-home');
+  }
 
-//获取预警详情弹窗右侧数据
-function getSysWarnList(id, type) {
+  //获取预警详情弹窗右侧数据
+  function getSysWarnList(id, type) {
     sysWarn({ sysid: id, type: type }).then((res) => {
-        // listData.common = res;
-        topAreaListWs.length = 0;
-        cardListWs.length = 0;
-        if (JSON.stringify(res) != '{}') {
-            res.pump.forEach((v) => {
-                topAreaListWs.push({
-                    label: v.strinstallpos || '--',
-                    list: [
-                        // { name: '抽采泵流量', val: v.readData.FlowSensor_InputFlux || 0 },
-                        { name: '报警状态', val: v.warnLevel || 0 },
-                        { name: '输入管道内一氧化碳(ppm)', val: v.readData.coVal && v.readData.coVal != '0' ? v.readData.coVal : '-' },
-                        { name: '管路出口处瓦斯(%CH4)', val: v.readData.gas1 && v.readData.gas1 != '0' ? v.readData.gas1 : '-' }, //v.readData.gas1
-                        { name: '泵站内瓦斯(%CH4)', val: v.readData.gas2 && v.readData.gas2 != '0' ? v.readData.gas2 : '-' }, //v.readData.gas2
-                        { name: '输入管道内瓦斯(%CH4)', val: v.readData.gas3 && v.readData.gas3 != '0' ? v.readData.gas3 : '-' }, //v.readData.gas3
-                        { name: '管道输出瓦斯(%CH4)', val: v.readData.gas4 && v.readData.gas4 != '0' ? v.readData.gas4 : '-' }, //v.readData.gas4
-                        { name: '输入管道内工混流量(m³/min)', val: v.readData.mixedTraffic && v.readData.mixedTraffic != '0' ? v.readData.mixedTraffic : '-' }, //v.readData.mixedTraffic
-                        {
-                            name: '输入管道内标况流量(m³/min)',
-                            val: v.readData.standardTraffic && v.readData.standardTraffic != '0' ? v.readData.standardTraffic : '-',
-                        }, //v.readData.standardTraffic
-                        { name: '瓦斯抽放量(m³)', val: v.readData.totalGasDrainage && v.readData.totalGasDrainage != '0' ? v.readData.totalGasDrainage : '-' },
-                    ],
-                });
-            });
-
-            res.gas.forEach((el) => {
-                el.strinstallpos = el.strinstallpos.indexOf('&') == -1 ? el.strinstallpos : el.strinstallpos.substring(0, el.strinstallpos.indexOf('&'));
-                cardListWs.push({
-                    label: '甲烷',
-                    value: el.readData.gasC || '--',
-                    // value: 0,
-                    listR: [
-                        { id: 0, label: '测点类型', value: '瓦斯' },
-                        { id: 1, label: '测点位置', value: el.strinstallpos || '--' },
-                        // { id: 2, label: '数据时间', value: el.readData.datetime || '--' },
-                        { id: 2, label: '数据时间', value: el.readTime || '--' },
-                        { id: 3, label: '测点状态', value: el.warnFlag },
-                    ],
-                });
-            });
-        }
+      // listData.common = res;
+      topAreaListWs.length = 0;
+      cardListWs.length = 0;
+      if (JSON.stringify(res) != '{}') {
+        res.pump.forEach((v) => {
+          topAreaListWs.push({
+            label: v.strinstallpos || '--',
+            list: [
+              // { name: '抽采泵流量', val: v.readData.FlowSensor_InputFlux || 0 },
+              { name: '报警状态', val: v.warnLevel || 0 },
+              { name: '输入管道内一氧化碳(ppm)', val: v.readData.coVal && v.readData.coVal != '0' ? v.readData.coVal : '-' },
+              { name: '管路出口处瓦斯(%CH4)', val: v.readData.gas1 && v.readData.gas1 != '0' ? v.readData.gas1 : '-' }, //v.readData.gas1
+              { name: '泵站内瓦斯(%CH4)', val: v.readData.gas2 && v.readData.gas2 != '0' ? v.readData.gas2 : '-' }, //v.readData.gas2
+              { name: '输入管道内瓦斯(%CH4)', val: v.readData.gas3 && v.readData.gas3 != '0' ? v.readData.gas3 : '-' }, //v.readData.gas3
+              { name: '管道输出瓦斯(%CH4)', val: v.readData.gas4 && v.readData.gas4 != '0' ? v.readData.gas4 : '-' }, //v.readData.gas4
+              { name: '输入管道内工混流量(m³/min)', val: v.readData.mixedTraffic && v.readData.mixedTraffic != '0' ? v.readData.mixedTraffic : '-' }, //v.readData.mixedTraffic
+              {
+                name: '输入管道内标况流量(m³/min)',
+                val: v.readData.standardTraffic && v.readData.standardTraffic != '0' ? v.readData.standardTraffic : '-',
+              }, //v.readData.standardTraffic
+              { name: '瓦斯抽放量(m³)', val: v.readData.totalGasDrainage && v.readData.totalGasDrainage != '0' ? v.readData.totalGasDrainage : '-' },
+            ],
+          });
+        });
+
+        res.gas.forEach((el) => {
+          el.strinstallpos = el.strinstallpos.indexOf('&') == -1 ? el.strinstallpos : el.strinstallpos.substring(0, el.strinstallpos.indexOf('&'));
+          cardListWs.push({
+            label: '甲烷',
+            value: el.readData.gasC || '--',
+            // value: 0,
+            listR: [
+              { id: 0, label: '测点类型', value: '瓦斯' },
+              { id: 1, label: '测点位置', value: el.strinstallpos || '--' },
+              // { id: 2, label: '数据时间', value: el.readData.datetime || '--' },
+              { id: 2, label: '数据时间', value: el.readTime || '--' },
+              { id: 3, label: '测点状态', value: el.warnFlag },
+            ],
+          });
+        });
+      }
     });
-}
+  }
 
-//获取左侧菜单列表
-async function getMenuList() {
-    let res = await sysTypeWarnList({ type: 'gas' })
+  //获取左侧菜单列表
+  async function getMenuList() {
+    let res = await sysTypeWarnList({ type: 'gas' });
     if (res.length != 0) {
-        menuList.length = 0
-        res.forEach((el) => {
-            menuList.push({
-                name: el.systemname,
-                warn: '低风险',
-                deviceID: el.id,
-                strtype: el.strtype,
-            });
+      menuList.length = 0;
+      res.forEach((el) => {
+        menuList.push({
+          name: el.systemname,
+          warn: '低风险',
+          deviceID: el.id,
+          strtype: el.strtype,
         });
-        getMonitor(menuList[0].deviceID, true);
+      });
+      getMonitor(menuList[0].deviceID, true);
     }
-}
+  }
 
-//监测/预警指标选项切换
-function btnClick(ind) {
+  //监测/预警指标选项切换
+  function btnClick(ind) {
     activeIndex.value = ind;
     clearTimeout(timer);
     switch (ind) {
-        case 0:
-            activeIndex1.value = 0;
-            isShow.value = 'yjjc'
-            break;
-        case 1:
-            activeIndex1.value = 0;
-            isShow.value = 'yjzb'
-            break;
-        case 2:
-            activeIndex1.value=0
-            isShow.value='wscs'
-            break;
+      case 0:
+        activeIndex1.value = 0;
+        isShow.value = 'yjjc';
+        break;
+      case 1:
+        activeIndex1.value = 0;
+        isShow.value = 'yjzb';
+        break;
+      case 2:
+        activeIndex1.value = 0;
+        isShow.value = 'wscs';
+        break;
     }
-}
+  }
 
-//菜单选项切换
-function cardClick(ind, item) {
+  //菜单选项切换
+  function cardClick(ind, item) {
     activeIndex1.value = ind;
     clearTimeout(timer);
     getMonitor(item.deviceID, true);
-}
+  }
 
-onMounted(() => {
-    getMenuList()
-})
-onUnmounted(() => {
+  onMounted(() => {
+    getMenuList();
+  });
+  onUnmounted(() => {
     if (timer) {
-        clearTimeout(timer);
-        timer = undefined;
+      clearTimeout(timer);
+      timer = undefined;
     }
-});
-
+  });
 </script>
 
 <style lang="less" scoped>
-.gasWarn {
+  .gasWarn {
     width: 100%;
     height: 100%;
     padding: 80px 10px 15px 10px;
@@ -249,454 +259,453 @@ onUnmounted(() => {
     justify-content: space-between;
 
     .alarm-menu {
-        height: 100%;
-        width: 15%;
+      height: 100%;
+      width: 15%;
+
+      .type-btn {
+        width: 100%;
+        height: 28px;
+        line-height: 28px;
+        border: 1px solid #0058ee;
+        margin-bottom: 20px;
+        border-radius: 5px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+
+        .btn {
+          width: 33.33%;
+          height: 100%;
+          font-size: 14px;
+          text-align: center;
+          color: #fff;
+          cursor: pointer;
+        }
 
-        .type-btn {
+        .btn1 {
+          width: 33.33%;
+          height: 100%;
+          font-size: 14px;
+          color: #fff;
+          text-align: center;
+          border-radius: 2px;
+          background: #0058ee;
+          cursor: pointer;
+        }
+      }
+
+      .card-btn {
+        width: 100%;
+        height: calc(100% - 48px);
+        overflow-y: auto;
+
+        .btn {
+          position: relative;
+          width: 81%;
+          height: 14%;
+          margin-bottom: 10%;
+          font-family: 'douyuFont';
+          background: url('../../../../../assets/images/fire/no-choice.png') no-repeat;
+          background-size: 100% 100%;
+          cursor: pointer;
+
+          .text {
+            width: 80%;
+            position: absolute;
+            left: 50%;
+            top: 28px;
+            font-size: 16px;
+            color: #01fefc;
+            text-align: center;
+            transform: translate(-50%, 0);
+          }
+
+          .warn {
             width: 100%;
-            height: 28px;
-            line-height: 28px;
-            border: 1px solid #0058ee;
-            margin-bottom: 20px;
-            border-radius: 5px;
-            box-sizing: border-box;
-            display: flex;
-            justify-content: space-between;
-
-            .btn {
-                width: 33.33%;
-                height: 100%;
-                font-size: 14px;
-                text-align: center;
-                color: #fff;
-                cursor: pointer;
-            }
-
-            .btn1 {
-                width: 33.33%;
-                height: 100%;
-                font-size: 14px;
-                color: #fff;
-                text-align: center;
-                border-radius: 2px;
-                background: #0058ee;
-                cursor: pointer;
-            }
+            position: absolute;
+            left: 50%;
+            bottom: 14px;
+            font-size: 14px;
+            color: #fff;
+            text-align: center;
+            transform: translate(-50%, 0);
+          }
         }
 
-        .card-btn {
+        .btn1 {
+          position: relative;
+          width: 100%;
+          height: 14%;
+          margin-bottom: 10%;
+          font-family: 'douyuFont';
+          background: url('../../../../../assets/images/fire/choice.png') no-repeat;
+          background-size: 100% 100%;
+          cursor: pointer;
+
+          .text {
+            width: 80%;
+            position: absolute;
+            left: 50%;
+            top: 28px;
+            font-size: 16px;
+            color: #01fefc;
+            text-align: center;
+            transform: translate(-62%, 0);
+          }
+
+          .warn {
             width: 100%;
-            height: calc(100% - 48px);
-            overflow-y: auto;
-
-            .btn {
-                position: relative;
-                width: 81%;
-                height: 14%;
-                margin-bottom: 10%;
-                font-family: 'douyuFont';
-                background: url('../../../../../assets/images/fire/no-choice.png') no-repeat;
-                background-size: 100% 100%;
-                cursor: pointer;
-
-                .text {
-                    width: 80%;
-                    position: absolute;
-                    left: 50%;
-                    top: 28px;
-                    font-size: 16px;
-                    color: #01fefc;
-                    text-align: center;
-                    transform: translate(-50%, 0);
-                }
-
-                .warn {
-                    width: 100%;
-                    position: absolute;
-                    left: 50%;
-                    bottom: 14px;
-                    font-size: 14px;
-                    color: #fff;
-                    text-align: center;
-                    transform: translate(-50%, 0);
-                }
-            }
-
-            .btn1 {
-                position: relative;
-                width: 100%;
-                height: 14%;
-                margin-bottom: 10%;
-                font-family: 'douyuFont';
-                background: url('../../../../../assets/images/fire/choice.png') no-repeat;
-                background-size: 100% 100%;
-                cursor: pointer;
-
-                .text {
-                    width: 80%;
-                    position: absolute;
-                    left: 50%;
-                    top: 28px;
-                    font-size: 16px;
-                    color: #01fefc;
-                    text-align: center;
-                    transform: translate(-62%, 0);
-                }
-
-                .warn {
-                    width: 100%;
-                    position: absolute;
-                    left: 50%;
-                    bottom: 14px;
-                    font-size: 14px;
-                    color: #fff;
-                    text-align: center;
-                    transform: translate(-60%, 0);
-                }
-            }
+            position: absolute;
+            left: 50%;
+            bottom: 14px;
+            font-size: 14px;
+            color: #fff;
+            text-align: center;
+            transform: translate(-60%, 0);
+          }
         }
+      }
     }
 
     .gas-content {
-        position: relative;
-        width: calc(85% - 10px);
-        height: 100%;
-        margin-left: 10px;
-        padding: 15px;
-        background: url('../../../../../assets/images/fire/border.png') no-repeat;
+      position: relative;
+      width: calc(85% - 10px);
+      height: 100%;
+      margin-left: 10px;
+      padding: 15px;
+      background: url('../../../../../assets/images/fire/border.png') no-repeat;
+      background-size: 100% 100%;
+      box-sizing: border-box;
+
+      .top-area {
+        height: 356px;
+        margin-bottom: 10px;
+        padding: 10px;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
         background-size: 100% 100%;
         box-sizing: border-box;
 
-        .top-area {
-            height: 356px;
-            margin-bottom: 10px;
-            padding: 10px;
-            background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+        .title-t {
+          height: 30px;
+          margin-bottom: 10px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .text-t {
+            font-family: 'douyuFont';
+            font-size: 14px;
+            color: #fff;
+          }
+        }
+
+        .content-t {
+          width: 100%;
+          height: 276px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 0px 10px;
+          box-sizing: border-box;
+
+          .top-box {
+            position: relative;
+            width: 724px;
+            height: 100%;
+            background: url('../../../../../assets/images/fire/top-area.png') no-repeat center;
             background-size: 100% 100%;
-            box-sizing: border-box;
 
-            .title-t {
-                height: 30px;
-                margin-bottom: 10px;
+            .box-label {
+              position: absolute;
+              left: 50%;
+              top: 198px;
+              transform: translate(-50%, 0);
+              width: 80%;
+              font-family: 'douyuFont';
+              font-size: 16px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              word-wrap: break-word;
+              color: #fff;
+            }
+
+            .box-values {
+              position: absolute;
+              left: 50%;
+              top: 26px;
+              transform: translate(-50%, 0);
+              width: 84%;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              flex-wrap: wrap;
+
+              .value-b {
+                width: calc(50% - 10px);
+                height: 25px;
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
+                color: #fff;
+                font-size: 14px;
+
+                span {
+                  font-size: 14px;
 
-                .text-t {
+                  &:last-child {
                     font-family: 'douyuFont';
-                    font-size: 14px;
-                    color: #fff;
+                    color: rgb(0, 242, 255);
+                  }
                 }
-            }
 
-            .content-t {
-                width: 100%;
-                height: 276px;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                padding: 0px 10px;
-                box-sizing: border-box;
-
-                .top-box {
-                    position: relative;
-                    width: 724px;
-                    height: 100%;
-                    background: url('../../../../../assets/images/fire/top-area.png') no-repeat center;
-                    background-size: 100% 100%;
-
-                    .box-label {
-                        position: absolute;
-                        left: 50%;
-                        top: 198px;
-                        transform: translate(-50%, 0);
-                        width: 80%;
-                        font-family: 'douyuFont';
-                        font-size: 16px;
-                        display: flex;
-                        justify-content: center;
-                        align-items: center;
-                        word-wrap: break-word;
-                        color: #fff;
-                    }
-
-                    .box-values {
-                        position: absolute;
-                        left: 50%;
-                        top: 26px;
-                        transform: translate(-50%, 0);
-                        width: 84%;
-                        display: flex;
-                        justify-content: space-between;
-                        align-items: center;
-                        flex-wrap: wrap;
-
-                        .value-b {
-                            width: calc(50% - 10px);
-                            height: 25px;
-                            display: flex;
-                            justify-content: space-between;
-                            align-items: center;
-                            color: #fff;
-                            font-size: 14px;
-
-                            span {
-                                font-size: 14px;
-
-                                &:last-child {
-                                    font-family: 'douyuFont';
-                                    color: rgb(0, 242, 255);
-                                }
-                            }
-
-                            .box-value {
-                                color: rgb(145, 230, 9) !important;
-                            }
-
-                            .box-value1 {
-                                color: rgb(0, 242, 255) !important;
-                            }
-
-                            .box-value2 {
-                                color: #ffff35 !important;
-                            }
-
-                            .box-value3 {
-                                color: #ffbe69 !important;
-                            }
-
-                            .box-value4 {
-                                color: #ff6f00 !important;
-                            }
-
-                            .box-value5 {
-                                color: #ff0000 !important;
-                            }
-                        }
-                    }
+                .box-value {
+                  color: rgb(145, 230, 9) !important;
                 }
+
+                .box-value1 {
+                  color: rgb(0, 242, 255) !important;
+                }
+
+                .box-value2 {
+                  color: #ffff35 !important;
+                }
+
+                .box-value3 {
+                  color: #ffbe69 !important;
+                }
+
+                .box-value4 {
+                  color: #ff6f00 !important;
+                }
+
+                .box-value5 {
+                  color: #ff0000 !important;
+                }
+              }
             }
+          }
+        }
+      }
+
+      .bot-area {
+        height: calc(100% - 356px);
+        padding: 10px;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+        background-size: 100% 100%;
+        box-sizing: border-box;
 
+        .title-b {
+          height: 30px;
+          margin-bottom: 10px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .text-b {
+            font-family: 'douyuFont';
+            font-size: 14px;
+            color: #fff;
+          }
         }
 
-        .bot-area {
-            height: calc(100% - 356px);
-            padding: 10px;
-            background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+        .content-b {
+          height: calc(100% - 40px);
+          display: flex;
+          justify-content: flex-start;
+          align-items: flex-start;
+          flex-wrap: wrap;
+          overflow-y: auto;
+
+          .card-b {
+            position: relative;
+            width: 30%;
+            height: 128px;
+            margin: 0px 15px 15px 15px;
+            background: url('../../../../../assets/images/fire/bot-area.png') no-repeat center;
             background-size: 100% 100%;
-            box-sizing: border-box;
 
-            .title-b {
-                height: 30px;
-                margin-bottom: 10px;
+            .item-l {
+              position: absolute;
+              left: 32px;
+              top: 50%;
+              transform: translate(0, -50%);
+              width: 89px;
+              height: 98px;
+              background: url('../../../../../assets/images/fire/bot-area1.png') no-repeat center;
+
+              .label-l {
+                position: absolute;
+                left: 50%;
+                top: 7px;
+                color: #fff;
+                font-size: 14px;
+                transform: translate(-50%, 0);
+              }
+
+              .value-l {
+                position: absolute;
+                left: 50%;
+                top: 50px;
+                transform: translate(-50%, 0);
+                font-family: 'douyuFont';
+                font-size: 14px;
+                color: #3df6ff;
+              }
+            }
+
+            .item-r {
+              position: absolute;
+              left: 132px;
+              top: 50%;
+              transform: translate(0, -50%);
+              height: 128px;
+              padding: 5px 0px;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+              box-sizing: border-box;
+
+              .content-r {
                 display: flex;
-                justify-content: space-between;
-                align-items: center;
 
-                .text-b {
-                    font-family: 'douyuFont';
-                    font-size: 14px;
-                    color: #fff;
+                span {
+                  font-size: 14px;
+                  color: #fff;
+
+                  &:first-child {
+                    display: inline-block;
+                    width: 68px;
+                  }
+
+                  &:last-child {
+                    display: inline-block;
+                    width: calc(100% - 68px);
+                  }
                 }
-            }
 
-            .content-b {
-                height: calc(100% - 40px);
-                display: flex;
-                justify-content: flex-start;
-                align-items: flex-start;
-                flex-wrap: wrap;
-                overflow-y: auto;
-
-                .card-b {
-                    position: relative;
-                    width: 30%;
-                    height: 128px;
-                    margin: 0px 15px 15px 15px;
-                    background: url('../../../../../assets/images/fire/bot-area.png') no-repeat center;
-                    background-size: 100% 100%;
-
-                    .item-l {
-                        position: absolute;
-                        left: 32px;
-                        top: 50%;
-                        transform: translate(0, -50%);
-                        width: 89px;
-                        height: 98px;
-                        background: url('../../../../../assets/images/fire/bot-area1.png') no-repeat center;
-
-                        .label-l {
-                            position: absolute;
-                            left: 50%;
-                            top: 7px;
-                            color: #fff;
-                            font-size: 14px;
-                            transform: translate(-50%, 0);
-                        }
-
-                        .value-l {
-                            position: absolute;
-                            left: 50%;
-                            top: 50px;
-                            transform: translate(-50%, 0);
-                            font-family: 'douyuFont';
-                            font-size: 14px;
-                            color: #3df6ff;
-                        }
-                    }
-
-                    .item-r {
-                        position: absolute;
-                        left: 132px;
-                        top: 50%;
-                        transform: translate(0, -50%);
-                        height: 128px;
-                        padding: 5px 0px;
-                        display: flex;
-                        flex-direction: column;
-                        justify-content: space-around;
-                        box-sizing: border-box;
-
-                        .content-r {
-                            display: flex;
-
-                            span {
-                                font-size: 14px;
-                                color: #fff;
-
-                                &:first-child {
-                                    display: inline-block;
-                                    width: 68px;
-                                }
-
-                                &:last-child {
-                                    display: inline-block;
-                                    width: calc(100% - 68px);
-                                }
-                            }
-
-                            .status-f {
-                                color: #ff0000;
-                            }
-
-                            .status-l {
-                                color: #3df6ff;
-                            }
-                        }
-                    }
+                .status-f {
+                  color: #ff0000;
+                }
+
+                .status-l {
+                  color: #3df6ff;
                 }
+              }
             }
+          }
         }
+      }
 
-        .bot-area1 {
-            height: 100%;
-            padding: 10px 15px 0px 15px;
-            background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      .bot-area1 {
+        height: 100%;
+        padding: 10px 15px 0px 15px;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+        background-size: 100% 100%;
+        box-sizing: border-box;
+
+        .title-b {
+          height: 30px;
+          margin-bottom: 10px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .text-b {
+            font-family: 'douyuFont';
+            font-size: 14px;
+            color: #fff;
+          }
+        }
+
+        .content-b {
+          width: 100%;
+          height: calc(100% - 40px);
+          display: flex;
+          justify-content: flex-start;
+          align-items: flex-start;
+          flex-wrap: wrap;
+          overflow-y: auto;
+
+          .card-b {
+            position: relative;
+            width: 30%;
+            height: 128px;
+            margin: 0px 15px 15px 15px;
+            background: url('../../../../../assets/images/fire/bot-area.png') no-repeat center;
             background-size: 100% 100%;
-            box-sizing: border-box;
 
-            .title-b {
-                height: 30px;
-                margin-bottom: 10px;
+            .item-l {
+              position: absolute;
+              left: 32px;
+              top: 50%;
+              transform: translate(0, -50%);
+              width: 89px;
+              height: 98px;
+              background: url('../../../../../assets/images/fire/bot-area1.png') no-repeat center;
+
+              .label-l {
+                position: absolute;
+                left: 50%;
+                top: 7px;
+                font-size: 14px;
+                color: #fff;
+                transform: translate(-50%, 0);
+              }
+
+              .value-l {
+                position: absolute;
+                left: 50%;
+                top: 50px;
+                transform: translate(-50%, 0);
+                font-family: 'douyuFont';
+                font-size: 14px;
+                color: #3df6ff;
+              }
+            }
+
+            .item-r {
+              position: absolute;
+              left: 132px;
+              top: 50%;
+              transform: translate(0, -50%);
+              height: 128px;
+              padding: 5px 0px;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+              box-sizing: border-box;
+
+              .content-r {
                 display: flex;
-                justify-content: space-between;
-                align-items: center;
 
-                .text-b {
-                    font-family: 'douyuFont';
-                    font-size: 14px;
-                    color: #fff;
+                span {
+                  font-size: 14px;
+                  color: #fff;
+
+                  &:first-child {
+                    display: inline-block;
+                    width: 68px;
+                  }
+
+                  &:last-child {
+                    display: inline-block;
+                    width: calc(100% - 68px);
+                  }
                 }
-            }
 
-            .content-b {
-                width: 100%;
-                height: calc(100% - 40px);
-                display: flex;
-                justify-content: flex-start;
-                align-items: flex-start;
-                flex-wrap: wrap;
-                overflow-y: auto;
-
-                .card-b {
-                    position: relative;
-                    width: 30%;
-                    height: 128px;
-                    margin: 0px 15px 15px 15px;
-                    background: url('../../../../../assets/images/fire/bot-area.png') no-repeat center;
-                    background-size: 100% 100%;
-
-                    .item-l {
-                        position: absolute;
-                        left: 32px;
-                        top: 50%;
-                        transform: translate(0, -50%);
-                        width: 89px;
-                        height: 98px;
-                        background: url('../../../../../assets/images/fire/bot-area1.png') no-repeat center;
-
-                        .label-l {
-                            position: absolute;
-                            left: 50%;
-                            top: 7px;
-                            font-size: 14px;
-                            color: #fff;
-                            transform: translate(-50%, 0);
-                        }
-
-                        .value-l {
-                            position: absolute;
-                            left: 50%;
-                            top: 50px;
-                            transform: translate(-50%, 0);
-                            font-family: 'douyuFont';
-                            font-size: 14px;
-                            color: #3df6ff;
-                        }
-                    }
-
-                    .item-r {
-                        position: absolute;
-                        left: 132px;
-                        top: 50%;
-                        transform: translate(0, -50%);
-                        height: 128px;
-                        padding: 5px 0px;
-                        display: flex;
-                        flex-direction: column;
-                        justify-content: space-around;
-                        box-sizing: border-box;
-
-                        .content-r {
-                            display: flex;
-
-                            span {
-                                font-size: 14px;
-                                color: #fff;
-
-                                &:first-child {
-                                    display: inline-block;
-                                    width: 68px;
-                                }
-
-                                &:last-child {
-                                    display: inline-block;
-                                    width: calc(100% - 68px);
-                                }
-                            }
-
-                            .status-f {
-                                color: #ff0000;
-                            }
-
-                            .status-l {
-                                color: #3df6ff;
-                            }
-                        }
-                    }
+                .status-f {
+                  color: #ff0000;
+                }
+
+                .status-l {
+                  color: #3df6ff;
                 }
+              }
             }
+          }
         }
+      }
     }
-}
-</style>
+  }
+</style>

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

@@ -472,7 +472,20 @@ export const vehicleFormConfig = {
     span: 4,
   },
 };
-export const haveHandlerArr = ['windrect', 'window', 'gate', 'fanlocal', 'fanmain', 'pump', 'obfurage', 'nitrogen', 'pulping', 'spray', 'dustdev']; // table无操作
+export const haveHandlerArr = [
+  'windrect',
+  'window',
+  'gate',
+  'fanlocal',
+  'fanmain',
+  'pump',
+  'obfurage',
+  'nitrogen',
+  'pulping',
+  'spray',
+  'dustdev',
+  // 'firemon',
+]; // table无操作
 export const noWarningArr = ['location', 'vehicle', 'cheliang']; // 无预警详情的
 // export const haveSysDetailArr = ['forcFan']; //有场景详情的
 export const haveSysDetailArr = ['']; //有场景详情的

src/views/vent/monitorManager/deviceMonitor/components/device/modal/firemon.modal.vue

@@ -2,7 +2,7 @@
   <BasicModal
     v-bind="$attrs"
     @register="register"
-    :title="`束管监测详情 ${currentTime}`"
+    :title="`智慧球监测详情 ${currentTime}`"
     width="1200px"
     @ok="handleOk"
     @cancel="handleCancel"
@@ -27,36 +27,35 @@
               <SvgIcon class="icon-style" name="coval" style="width: 62px; height: 38px; margin-top: 10px" />
             </div>
             <div class="item-container">
-              <div class="title">一氧化碳</div>
-              <div class="value"
-                >{{ posMonitor.coValue !== undefined && posMonitor.coValue !== null ? posMonitor.coValue : '-' }} <span>ppm</span>
-              </div>
+              <div class="title">距停采线距离</div>
+              <div class="value">{{ get(posMonitor, 'initStopLine') }} <span>m</span> </div>
             </div>
           </div>
           <div class="top-item">
             <div class="icon">
-              <SvgIcon class="icon-style" name="o2val" style="width: 76px; height: 50px" />
+              <SvgIcon class="icon-style" name="coval" style="width: 62px; height: 38px; margin-top: 10px" />
             </div>
             <div class="item-container">
               <div class="title">氧气</div>
-              <div class="value">{{ posMonitor.o2Value !== undefined && posMonitor.o2Value !== null ? posMonitor.o2Value : '-' }} <span>%</span></div>
+              <div class="value">{{ get(posMonitor, 'o2Value') }} <span>%</span> </div>
             </div>
           </div>
           <div class="top-item warning-box">
             <div class="icon">
-              <SvgIcon class="icon-style" size="42" name="alarm-warning" style="margin-top: 5px" />
+              <SvgIcon class="icon-style" size="42" name="link" style="margin-top: 5px" />
             </div>
             <div class="item-container">
-              <div class="title">风险等级</div>
-              <div
-                :class="{
-                  value1: posMonitor['syswarnLevel_str'] == '绿色预警',
-                  value2: posMonitor['syswarnLevel_str'] == '黄色预警',
-                  value3: posMonitor['syswarnLevel_str'] == '红色预警',
-                }"
-              >
-                {{ posMonitor['syswarnLevel_str'] || '-' }}
-              </div>
+              <div class="title">氧气值状态名称</div>
+              <div class="warning-value">{{ get(posMonitor, 'o2ValueStateName') }}</div>
+            </div>
+          </div>
+          <div class="top-item">
+            <div class="icon">
+              <SvgIcon class="icon-style" name="coval" style="width: 62px; height: 38px; margin-top: 10px" />
+            </div>
+            <div class="item-container">
+              <div class="title">一氧化碳</div>
+              <div class="value">{{ get(posMonitor, 'coValue') }} <span>%</span> </div>
             </div>
           </div>
           <div class="top-item warning-box">
@@ -64,8 +63,44 @@
               <SvgIcon class="icon-style" size="42" name="link" style="margin-top: 5px" />
             </div>
             <div class="item-container">
-              <div class="title">连接状态</div>
-              <div class="warning-value">{{ posMonitor['netStatus'] == 1 ? '连接' : '未连接' }}</div>
+              <div class="title">一氧化碳值状态名称</div>
+              <div class="warning-value">{{ get(posMonitor, 'coValueStateName') }}</div>
+            </div>
+          </div>
+          <div class="top-item">
+            <div class="icon">
+              <SvgIcon class="icon-style" name="coval" style="width: 62px; height: 38px; margin-top: 10px" />
+            </div>
+            <div class="item-container">
+              <div class="title">温度值 </div>
+              <div class="value">{{ get(posMonitor, 'tempValue') }} <span>%</span> </div>
+            </div>
+          </div>
+          <div class="top-item warning-box">
+            <div class="icon">
+              <SvgIcon class="icon-style" size="42" name="link" style="margin-top: 5px" />
+            </div>
+            <div class="item-container">
+              <div class="title">温度值状态名称</div>
+              <div class="warning-value">{{ get(posMonitor, 'tempValueStateName') }}</div>
+            </div>
+          </div>
+          <div class="top-item">
+            <div class="icon">
+              <SvgIcon class="icon-style" name="coval" style="width: 62px; height: 38px; margin-top: 10px" />
+            </div>
+            <div class="item-container">
+              <div class="title">设备电量值</div>
+              <div class="value">{{ get(posMonitor, 'quantity') }} <span>%</span> </div>
+            </div>
+          </div>
+          <div class="top-item warning-box">
+            <div class="icon">
+              <SvgIcon class="icon-style" size="42" name="link" style="margin-top: 5px" />
+            </div>
+            <div class="item-container">
+              <div class="title">设备电量状态名称</div>
+              <div class="warning-value">{{ get(posMonitor, 'quantityValueStateName') }}</div>
             </div>
           </div>
         </div>
@@ -105,6 +140,7 @@
   import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
   import { chartsColumnList } from '../device.data';
   import { listdays, getHistoryData } from '../device.api';
+  import { isNil } from 'lodash-es';
 
   export default defineComponent({
     components: { BasicModal, BarAndLine, SvgIcon },
@@ -194,7 +230,6 @@
             column: 'createTime',
             gdeviceid: activeDeviceID.value,
           });
-          console.log(res, '束管历史数据');
           let data = res.datalist.records;
           if (data.length != 0) {
             data.forEach((el) => {
@@ -228,6 +263,10 @@
         }
       }
 
+      function get(object, path) {
+        return isNil(object[path]) ? '-' : object[path];
+      }
+
       watch(
         [() => props.dataSource, () => props.activeID],
         ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
@@ -265,6 +304,7 @@
         posList,
         chartsColumns,
         xAxisPropType,
+        get,
       };
     },
   });

src/views/vent/monitorManager/deviceMonitor/staticSheets/commonSheet.vue

@@ -1,331 +1,352 @@
 <template>
-  <div class="h-92% overflow-auto mt-10px mb-10px">
-    <table style="width: 740pt">
-      <colgroup>
-        <col width="16" style="width: 9.75pt" />
-        <col width="30" style="width: 18.45pt" />
-        <col width="16" style="width: 9.75pt" span="10" />
-        <col width="23" style="width: 14.05pt" />
-        <col width="16" style="width: 9.75pt" span="5" />
-        <col width="60" style="width: 36.3pt" />
-        <col width="16" style="width: 9.75pt" span="2" />
-        <col width="35" style="width: 21.35pt" span="2" />
-        <col width="10" style="width: 6.05pt" />
-        <col width="16" style="width: 9.75pt" />
-        <col width="33" style="width: 20.2pt" />
-        <col width="16" style="width: 9.75pt" span="4" />
-        <col width="28" style="width: 17.3pt" />
-        <col width="16" style="width: 9.75pt" span="3" />
-        <col width="58" style="width: 35.15pt" />
-        <col width="69" style="width: 41.5pt" />
-        <col width="16" style="width: 9.75pt" span="7" />
-        <col width="6" style="width: 3.7pt" />
-        <col width="16" style="width: 9.75pt" span="2" />
-        <col width="29" style="width: 17.9pt" />
-        <col width="16" style="width: 9.75pt" span="4" />
-      </colgroup>
-      <tbody>
-        <tr height="30">
-          <td colspan="51" class="et22 bg0">主要通风机参数</td>
-        </tr>
-        <tr height="30">
-          <td colspan="10" class="et21">地点</td>
-          <td colspan="11" class="et21">型号</td>
-          <td colspan="8" class="et21">电机功率（KW）</td>
-          <td colspan="7" class="et21">最大风量</td>
-          <td colspan="8" class="et21">实际风量</td>
-          <td colspan="7" class="et21">负压（Pa）</td>
-        </tr>
-        <tr height="30">
-          <td colspan="10" class="et66">明安木独</td>
-          <td colspan="11" class="et66">FBCDZ-10-NO.36</td>
-          <td colspan="8" class="et66">2×800</td>
-          <td colspan="7" class="et66">23400</td>
-          <td colspan="8" class="et66">18857</td>
-          <td colspan="7" class="et66">2280</td>
-        </tr>
-        <tr height="30">
-          <td colspan="10" class="et66">松定霍洛</td>
-          <td colspan="11" class="et66">FBCDZ-10-NO.34</td>
-          <td colspan="8" class="et66">2×560</td>
-          <td colspan="7" class="et66">18000</td>
-          <td colspan="8" class="et66">12867</td>
-          <td colspan="7" class="et66">1500</td>
-        </tr>
-        <tr height="30">
-          <td colspan="51" class="et22 bg0">通风系统</td>
-        </tr>
-        <tr height="30">
-          <td colspan="10" class="et66">进风井</td>
-          <td colspan="6" class="et66">风量</td>
-          <td colspan="10" class="et66">回风井</td>
-          <td colspan="6" class="et66">风量</td>
-          <td colspan="9" class="et21">综采面</td>
-          <td colspan="10" class="et21">配风量</td>
-        </tr>
-        <tr height="30">
-          <td colspan="10" class="et21">辅运平硐</td>
-          <td colspan="6" class="et21">9542</td>
-          <td colspan="7" rowspan="3" class="et21">明安木独 回风立井</td>
-          <td colspan="3" rowspan="2" class>22煤</td>
-          <td colspan="6" rowspan="2" class="et21">7695</td>
-          <td colspan="9" class="et66">12201综采面</td>
-          <td colspan="10" class="et66">1036</td>
-        </tr>
-        <tr height="30">
-          <td colspan="10" class="et21">主斜井</td>
-          <td colspan="6" class="et21">3939</td>
-          <td colspan="9" class="et66">42204综放面</td>
-          <td colspan="10" class="et66">1750</td>
-        </tr>
-        <tr height="30">
-          <td colspan="10" class="et21">工业广场进风斜井</td>
-          <td colspan="6" class="et21">339</td>
-          <td colspan="3" class="et21">12煤</td>
-          <td colspan="6" class="et21">11162</td>
-          <td colspan="9" class="et66">12上302综放面</td>
-          <td colspan="10" class="et66">1788</td>
-        </tr>
-        <tr height="30">
-          <td colspan="7" rowspan="2" class="et21">松定霍洛 进风立井</td>
-          <td colspan="3" class="et21">22煤</td>
-          <td colspan="6" class="et21">7132</td>
-          <td colspan="7" rowspan="2" class="et21">松定霍洛 回风立井</td>
-          <td colspan="3" class="et21">22煤</td>
-          <td colspan="6" class="et21">2098</td>
-          <td colspan="19" rowspan="3" class="et21">等积孔14.2；＜1困难、1-2中等、＞2容易。</td>
-        </tr>
-        <tr height="30">
-          <td colspan="3" class="et21">42煤</td>
-          <td colspan="6" class="et21">9831</td>
-          <td colspan="3" class="et21">42煤</td>
-          <td colspan="6" class="et21">10769</td>
-        </tr>
-        <tr height="30">
-          <td colspan="10" class="et21">总计</td>
-          <td colspan="6" class="et21">30783</td>
-          <td colspan="10" class="et66">总计</td>
-          <td colspan="6" class="et66">31724</td>
-        </tr>
-        <tr height="30">
-          <td colspan="51" class="et22 bg0">瓦斯参数</td>
-        </tr>
-        <tr height="30">
-          <td colspan="17" class="et66">瓦斯等级鉴定</td>
-          <td colspan="34" class="et66">瓦斯抽放</td>
-        </tr>
-        <tr height="30">
-          <td colspan="10" class="et66">绝对瓦斯涌出量</td>
-          <td colspan="7" class="et66">29.92m³/min</td>
-          <td colspan="14" class="et66">抽放泵站地点</td>
-          <td colspan="8" class="et66">抽放工作面</td>
-          <td colspan="12" class="et66">设备型号</td>
-        </tr>
-        <tr height="30">
-          <td colspan="10" class="et66">相对瓦斯涌出量</td>
-          <td colspan="7" class="et66">0.83m³/t</td>
-          <td colspan="14" class="et66">二水平中部辅运大巷1860米</td>
-          <td colspan="8" class="et66">42205综放面</td>
-          <td colspan="12" class="et66">ZWY270/355</td>
-        </tr>
-        <tr height="30">
-          <td colspan="10" class="et66">综采最大涌出量</td>
-          <td colspan="7" class="et66">3.16m³/min</td>
-          <td colspan="14" class="et66">12煤组辅运大巷480米</td>
-          <td colspan="8" class="et66">12上302综放面</td>
-          <td colspan="12" class="et66">ZWY300/355</td>
-        </tr>
-        <tr height="30">
-          <td colspan="10" class="et66">掘进最大涌出量</td>
-          <td colspan="7" class="et66">0.68m³/min</td>
-          <td colspan="14" class="et66">12煤二盘区辅运大巷1280米</td>
-          <td colspan="8" class="et66">12201综采面</td>
-          <td colspan="12" class="et66">ZWY300/355</td>
-        </tr>
-        <tr height="28">
-          <td colspan="51" rowspan="2" class="et12"
-            >ZWY300/355：Z-泵站、W-瓦斯抽放、Y-移动式、270/300-流量（m³/min）、355-功率（KW），抽放混合量160～230m³/min，抽放瓦斯浓度0.5～1.2%，抽放瓦斯量0.8～3m³/min。</td
-          >
-        </tr>
-        <tr height="28"> </tr>
-        <tr height="30">
-          <td colspan="51" class="et22 bg0">防灭火参数</td>
-        </tr>
-        <tr height="30">
-          <td colspan="4" class="et66">煤层</td>
-          <td colspan="4" class="et66">倾向性</td>
-          <td colspan="6" class="et66">最短发火期</td>
-          <td colspan="4" class="et21">三带</td>
-          <td colspan="6" class="et21">散热带m</td>
-          <td colspan="6" class="et21">氧化带m</td>
-          <td colspan="6" class="et21">窒息带m</td>
-          <td colspan="15" class="et66">红外束管</td>
-        </tr>
-        <tr height="30">
-          <td colspan="4" class="et66">12上煤</td>
-          <td colspan="4" rowspan="4" class="et21">I类易自燃</td>
-          <td colspan="6" class="et66">53</td>
-          <td colspan="4" rowspan="2" class="et21">12上煤</td>
-          <td colspan="6" rowspan="2" class="et21">＜69</td>
-          <td colspan="6" rowspan="2" class="et66">69-188</td>
-          <td colspan="6" rowspan="2" class="et66">＞188</td>
-          <td colspan="4" class="et66">型号</td>
-          <td colspan="11" class="et21">可分析气体</td>
-        </tr>
-        <tr height="30">
-          <td colspan="4" class="et66">12煤</td>
-          <td colspan="6" class="et66">37</td>
-          <td colspan="4" rowspan="3" class="et66">JSG-8</td>
-          <td colspan="4" class="et21">甲烷</td>
-          <td colspan="7" class="et21">一氧化碳</td>
-        </tr>
-        <tr height="30">
-          <td colspan="4" class="et66">22煤</td>
-          <td colspan="6" class="et66">36</td>
-          <td colspan="4" class="et21">22煤</td>
-          <td colspan="6" class="et21">＜45.9</td>
-          <td colspan="6" class="et66">45.9-222.3</td>
-          <td colspan="6" class="et66">＞222.3</td>
-          <td colspan="4" class="et21">氧气</td>
-          <td colspan="7" class="et21">二氧化碳</td>
-        </tr>
-        <tr height="30">
-          <td colspan="4" class="et66">42上煤</td>
-          <td colspan="6" class="et66">34</td>
-          <td colspan="4" class="et21">42上煤</td>
-          <td colspan="6" class="et21">＜47.3</td>
-          <td colspan="6" class="et66">47.3-188.0</td>
-          <td colspan="6" class="et66">＞188.0</td>
-          <td colspan="4" class="et21">乙烯</td>
-          <td colspan="7" class="et21">乙炔</td>
-        </tr>
-        <tr height="30">
-          <td colspan="16" class="et66">色谱分析仪</td>
-          <td colspan="8" class="et66">注浆系统</td>
-          <td colspan="12" class="et66">注氮系统</td>
-          <td colspan="7" class="et66">地表回填</td>
-          <td colspan="8" class="et66">采空区管理</td>
-        </tr>
-        <tr height="30">
-          <td colspan="4" class="et66">型号</td>
-          <td colspan="12" class="et21">可分析气体</td>
-          <td colspan="3" rowspan="2" class="et21">松定霍洛风井广场</td>
-          <td colspan="3" rowspan="4" class="et21">能力 120m³/h</td>
-          <td colspan="2" rowspan="4" class="et21">20.4万m³/年</td>
-          <td colspan="8" class="et66">22209辅运1#联巷</td>
-          <td colspan="3" class="et66">DM-1000</td>
-          <td rowspan="4" class="et21">534 万m³/年</td>
-          <td colspan="7" rowspan="3" class="et21">鄂尔多斯宇和劳务服务有限公司</td>
-          <td colspan="4" class="et66">12煤</td>
-          <td colspan="4" class="et66">0个</td>
-        </tr>
-        <tr height="38">
-          <td colspan="4" rowspan="3" class="et66">SP-2010</td>
-          <td colspan="3" class="et21">甲烷</td>
-          <td colspan="7" class="et21">一氧化碳</td>
-          <td colspan="2" rowspan="3" class="et21">乙 烷</td>
-          <td colspan="8" class="et66">42205辅运1#联巷</td>
-          <td colspan="3" class="et66">DM-1500</td>
-          <td colspan="4" class="et66">12上煤</td>
-          <td colspan="4" class="et66">1个</td>
-        </tr>
-        <tr height="30">
-          <td colspan="3" class="et21">氧气</td>
-          <td colspan="7" class="et21">二氧化碳</td>
-          <td colspan="3" rowspan="2" class="et21">明安木独风井广场</td>
-          <td colspan="8" class="et66">12302主运4联巷</td>
-          <td colspan="3" class="et66">DM-1500</td>
-          <td colspan="4" class="et66">22煤</td>
-          <td colspan="4" class="et66">17个</td>
-        </tr>
-        <tr height="30">
-          <td colspan="3" class="et21">乙烯</td>
-          <td colspan="7" class="et21">乙炔</td>
-          <td colspan="8" class="et66">12煤集中供液站</td>
-          <td colspan="3" class="et66">DM-1500</td>
-          <td colspan="7" class="et66">246万㎡</td>
-          <td colspan="4" class="et66">42煤</td>
-          <td colspan="4" class="et66">12个</td>
-        </tr>
-        <tr height="63">
-          <td colspan="51" rowspan="2" class="et12"
-            >1.JSG-8:J-监测、SG-束管、可分析8种气体。DM-1000、DM-1500：D-制氮装置、M-膜分离、1000m³/h、1500m³/h。
-            2.井下现有束管监测分站3套，对3个回采面采空区和3个相邻的已采采空区共计12个监测点24小时监测。采空区瓦斯最大为22煤一盘区边界巷密闭内36.
-            3.一般防火密闭设计:1米砼闭+1米黄土+0.5米砖闭+1.5米砼闭。
-            4.永久防火密闭12道、一般防火密闭143道、临时密闭468道、行车风门103道、行人风门87道、风桥62道。</td
-          >
-        </tr>
-        <tr height="63"> </tr>
-        <tr height="30">
-          <td colspan="51" class="et22 bg0">防尘参数</td>
-        </tr>
-        <tr height="30">
-          <td colspan="3" rowspan="6" class>煤尘有爆炸性</td>
-          <td colspan="15" class="et66">掘进除尘</td>
-          <td colspan="33" class="et66">ZGJFH30、ZGJFH55煤矿井下自动隔爆装置</td>
-        </tr>
-        <tr height="30">
-          <td colspan="4" class="et66">除尘箱</td>
-          <td colspan="11" class="et66">KCG-350/500D</td>
-          <td colspan="10" class="et66">安装位置</td>
-          <td colspan="12" class="et66">工作原理</td>
-          <td colspan="11" rowspan="5" class="et12">ZGJFH30：Z-装置、G-隔爆、J-机械式、F-粉剂、H-巷道、30-粉剂量30KG</td>
-        </tr>
-        <tr height="26">
-          <td colspan="4" class="et66">风机</td>
-          <td colspan="11" class="et66">2×30/37KW</td>
-          <td colspan="10" rowspan="2" class="et21">盘区大巷、工作面顺槽</td>
-          <td colspan="12" rowspan="4" class="et12">爆炸冲击波冲击触发装置，启动主体装置喷射干粉灭火剂扑灭火焰。</td>
-        </tr>
-        <tr height="26">
-          <td colspan="15" rowspan="3" class="et12">KCG-500D：K-矿用、C-除尘、G-干式、500-处理风量、D-电动。</td>
-        </tr>
-        <tr height="26">
-          <td colspan="10" rowspan="2" class="et21">采掘工作面60~200m内</td>
-        </tr>
-        <tr height="26"> </tr>
-      </tbody>
-    </table>
+  <div class="sheet-bg">
+    <div class="sheet-bg-inner">
+      <table class="sheet-content">
+        <colgroup>
+          <col width="16" style="width: 9.75pt" />
+          <col width="30" style="width: 18.45pt" />
+          <col width="16" style="width: 9.75pt" span="10" />
+          <col width="23" style="width: 14.05pt" />
+          <col width="16" style="width: 9.75pt" span="5" />
+          <col width="60" style="width: 36.3pt" />
+          <col width="16" style="width: 9.75pt" span="2" />
+          <col width="35" style="width: 21.35pt" span="2" />
+          <col width="10" style="width: 6.05pt" />
+          <col width="16" style="width: 9.75pt" />
+          <col width="33" style="width: 20.2pt" />
+          <col width="16" style="width: 9.75pt" span="4" />
+          <col width="28" style="width: 17.3pt" />
+          <col width="16" style="width: 9.75pt" span="3" />
+          <col width="58" style="width: 35.15pt" />
+          <col width="69" style="width: 41.5pt" />
+          <col width="16" style="width: 9.75pt" span="7" />
+          <col width="6" style="width: 3.7pt" />
+          <col width="16" style="width: 9.75pt" span="2" />
+          <col width="29" style="width: 17.9pt" />
+          <col width="16" style="width: 9.75pt" span="4" />
+        </colgroup>
+        <tbody>
+          <tr height="30">
+            <td colspan="51" class="et22 bg0">主要通风机参数</td>
+          </tr>
+          <tr height="30">
+            <td colspan="10" class="et21 bg1">地点</td>
+            <td colspan="11" class="et21 bg1">型号</td>
+            <td colspan="8" class="et21 bg1">电机功率（KW）</td>
+            <td colspan="7" class="et21 bg1">最大风量</td>
+            <td colspan="8" class="et21 bg1">实际风量</td>
+            <td colspan="7" class="et21 bg1">负压（Pa）</td>
+          </tr>
+          <tr height="30">
+            <td colspan="10" class="et66">明安木独</td>
+            <td colspan="11" class="et66">FBCDZ-10-NO.36</td>
+            <td colspan="8" class="et66">2×800</td>
+            <td colspan="7" class="et66">23400</td>
+            <td colspan="8" class="et66">18857</td>
+            <td colspan="7" class="et66">2280</td>
+          </tr>
+          <tr height="30">
+            <td colspan="10" class="et66">松定霍洛</td>
+            <td colspan="11" class="et66">FBCDZ-10-NO.34</td>
+            <td colspan="8" class="et66">2×560</td>
+            <td colspan="7" class="et66">18000</td>
+            <td colspan="8" class="et66">12867</td>
+            <td colspan="7" class="et66">1500</td>
+          </tr>
+          <tr height="30">
+            <td colspan="51" class="et22 bg2">通风系统</td>
+          </tr>
+          <tr height="30">
+            <td colspan="10" class="et66 bg1">进风井</td>
+            <td colspan="6" class="et66 bg1">风量</td>
+            <td colspan="10" class="et66 bg1">回风井</td>
+            <td colspan="6" class="et66 bg1">风量</td>
+            <td colspan="9" class="et21 bg1">综采面</td>
+            <td colspan="10" class="et21 bg1">配风量</td>
+          </tr>
+          <tr height="30">
+            <td colspan="10" class="et21">辅运平硐</td>
+            <td colspan="6" class="et21">9542</td>
+            <td colspan="7" rowspan="3" class="et21">明安木独 回风立井</td>
+            <td colspan="3" rowspan="2" class>22煤</td>
+            <td colspan="6" rowspan="2" class="et21">7695</td>
+            <td colspan="9" class="et66">12201综采面</td>
+            <td colspan="10" class="et66">1036</td>
+          </tr>
+          <tr height="30">
+            <td colspan="10" class="et21">主斜井</td>
+            <td colspan="6" class="et21">3939</td>
+            <td colspan="9" class="et66">42204综放面</td>
+            <td colspan="10" class="et66">1750</td>
+          </tr>
+          <tr height="30">
+            <td colspan="10" class="et21">工业广场进风斜井</td>
+            <td colspan="6" class="et21">339</td>
+            <td colspan="3" class="et21">12煤</td>
+            <td colspan="6" class="et21">11162</td>
+            <td colspan="9" class="et66">12上302综放面</td>
+            <td colspan="10" class="et66">1788</td>
+          </tr>
+          <tr height="30">
+            <td colspan="7" rowspan="2" class="et21">松定霍洛 进风立井</td>
+            <td colspan="3" class="et21">22煤</td>
+            <td colspan="6" class="et21">7132</td>
+            <td colspan="7" rowspan="2" class="et21">松定霍洛 回风立井</td>
+            <td colspan="3" class="et21">22煤</td>
+            <td colspan="6" class="et21">2098</td>
+            <td colspan="19" rowspan="3" class="et21">等积孔14.2；＜1困难、1-2中等、＞2容易。</td>
+          </tr>
+          <tr height="30">
+            <td colspan="3" class="et21">42煤</td>
+            <td colspan="6" class="et21">9831</td>
+            <td colspan="3" class="et21">42煤</td>
+            <td colspan="6" class="et21">10769</td>
+          </tr>
+          <tr height="30">
+            <td colspan="10" class="et21">总计</td>
+            <td colspan="6" class="et21">30783</td>
+            <td colspan="10" class="et66">总计</td>
+            <td colspan="6" class="et66">31724</td>
+          </tr>
+          <tr height="30">
+            <td colspan="51" class="et22 bg2">瓦斯参数</td>
+          </tr>
+          <tr height="30">
+            <td colspan="17" class="et66 bg1">瓦斯等级鉴定</td>
+            <td colspan="34" class="et66 bg1">瓦斯抽放</td>
+          </tr>
+          <tr height="30">
+            <td colspan="10" class="et66">绝对瓦斯涌出量</td>
+            <td colspan="7" class="et66">29.92m³/min</td>
+            <td colspan="14" class="et66">抽放泵站地点</td>
+            <td colspan="8" class="et66">抽放工作面</td>
+            <td colspan="12" class="et66">设备型号</td>
+          </tr>
+          <tr height="30">
+            <td colspan="10" class="et66">相对瓦斯涌出量</td>
+            <td colspan="7" class="et66">0.83m³/t</td>
+            <td colspan="14" class="et66">二水平中部辅运大巷1860米</td>
+            <td colspan="8" class="et66">42205综放面</td>
+            <td colspan="12" class="et66">ZWY270/355</td>
+          </tr>
+          <tr height="30">
+            <td colspan="10" class="et66">综采最大涌出量</td>
+            <td colspan="7" class="et66">3.16m³/min</td>
+            <td colspan="14" class="et66">12煤组辅运大巷480米</td>
+            <td colspan="8" class="et66">12上302综放面</td>
+            <td colspan="12" class="et66">ZWY300/355</td>
+          </tr>
+          <tr height="30">
+            <td colspan="10" class="et66">掘进最大涌出量</td>
+            <td colspan="7" class="et66">0.68m³/min</td>
+            <td colspan="14" class="et66">12煤二盘区辅运大巷1280米</td>
+            <td colspan="8" class="et66">12201综采面</td>
+            <td colspan="12" class="et66">ZWY300/355</td>
+          </tr>
+          <tr height="28">
+            <td colspan="51" rowspan="2" class="et12"
+              >ZWY300/355：Z-泵站、W-瓦斯抽放、Y-移动式、270/300-流量（m³/min）、355-功率（KW），抽放混合量160～230m³/min，抽放瓦斯浓度0.5～1.2%，抽放瓦斯量0.8～3m³/min。</td
+            >
+          </tr>
+          <tr height="28"> </tr>
+          <tr height="30">
+            <td colspan="51" class="et22 bg2">防灭火参数</td>
+          </tr>
+          <tr height="30">
+            <td colspan="4" class="et66 bg1">煤层</td>
+            <td colspan="4" class="et66 bg1">倾向性</td>
+            <td colspan="6" class="et66 bg1">最短发火期</td>
+            <td colspan="4" class="et21 bg1">三带</td>
+            <td colspan="6" class="et21 bg1">散热带m</td>
+            <td colspan="6" class="et21 bg1">氧化带m</td>
+            <td colspan="6" class="et21 bg1">窒息带m</td>
+            <td colspan="15" class="et66 bg1">红外束管</td>
+          </tr>
+          <tr height="30">
+            <td colspan="4" class="et66">12上煤</td>
+            <td colspan="4" rowspan="4" class="et21">I类易自燃</td>
+            <td colspan="6" class="et66">53</td>
+            <td colspan="4" rowspan="2" class="et21">12上煤</td>
+            <td colspan="6" rowspan="2" class="et21">＜69</td>
+            <td colspan="6" rowspan="2" class="et66">69-188</td>
+            <td colspan="6" rowspan="2" class="et66">＞188</td>
+            <td colspan="4" class="et66">型号</td>
+            <td colspan="11" class="et21">可分析气体</td>
+          </tr>
+          <tr height="30">
+            <td colspan="4" class="et66">12煤</td>
+            <td colspan="6" class="et66">37</td>
+            <td colspan="4" rowspan="3" class="et66">JSG-8</td>
+            <td colspan="4" class="et21">甲烷</td>
+            <td colspan="7" class="et21">一氧化碳</td>
+          </tr>
+          <tr height="30">
+            <td colspan="4" class="et66">22煤</td>
+            <td colspan="6" class="et66">36</td>
+            <td colspan="4" class="et21">22煤</td>
+            <td colspan="6" class="et21">＜45.9</td>
+            <td colspan="6" class="et66">45.9-222.3</td>
+            <td colspan="6" class="et66">＞222.3</td>
+            <td colspan="4" class="et21">氧气</td>
+            <td colspan="7" class="et21">二氧化碳</td>
+          </tr>
+          <tr height="30">
+            <td colspan="4" class="et66">42上煤</td>
+            <td colspan="6" class="et66">34</td>
+            <td colspan="4" class="et21">42上煤</td>
+            <td colspan="6" class="et21">＜47.3</td>
+            <td colspan="6" class="et66">47.3-188.0</td>
+            <td colspan="6" class="et66">＞188.0</td>
+            <td colspan="4" class="et21">乙烯</td>
+            <td colspan="7" class="et21">乙炔</td>
+          </tr>
+          <tr height="30">
+            <td colspan="16" class="et66 bg1">色谱分析仪</td>
+            <td colspan="8" class="et66 bg1">注浆系统</td>
+            <td colspan="12" class="et66 bg1">注氮系统</td>
+            <td colspan="7" class="et66 bg1">地表回填</td>
+            <td colspan="8" class="et66 bg1">采空区管理</td>
+          </tr>
+          <tr height="30">
+            <td colspan="4" class="et66">型号</td>
+            <td colspan="12" class="et21">可分析气体</td>
+            <td colspan="3" rowspan="2" class="et21">松定霍洛风井广场</td>
+            <td colspan="3" rowspan="4" class="et21">能力 120m³/h</td>
+            <td colspan="2" rowspan="4" class="et21">20.4万m³/年</td>
+            <td colspan="8" class="et66">22209辅运1#联巷</td>
+            <td colspan="3" class="et66">DM-1000</td>
+            <td rowspan="4" class="et21">534 万m³/年</td>
+            <td colspan="7" rowspan="3" class="et21">鄂尔多斯宇和劳务服务有限公司</td>
+            <td colspan="4" class="et66">12煤</td>
+            <td colspan="4" class="et66">0个</td>
+          </tr>
+          <tr height="38">
+            <td colspan="4" rowspan="3" class="et66">SP-2010</td>
+            <td colspan="3" class="et21">甲烷</td>
+            <td colspan="7" class="et21">一氧化碳</td>
+            <td colspan="2" rowspan="3" class="et21">乙 烷</td>
+            <td colspan="8" class="et66">42205辅运1#联巷</td>
+            <td colspan="3" class="et66">DM-1500</td>
+            <td colspan="4" class="et66">12上煤</td>
+            <td colspan="4" class="et66">1个</td>
+          </tr>
+          <tr height="30">
+            <td colspan="3" class="et21">氧气</td>
+            <td colspan="7" class="et21">二氧化碳</td>
+            <td colspan="3" rowspan="2" class="et21">明安木独风井广场</td>
+            <td colspan="8" class="et66">12302主运4联巷</td>
+            <td colspan="3" class="et66">DM-1500</td>
+            <td colspan="4" class="et66">22煤</td>
+            <td colspan="4" class="et66">17个</td>
+          </tr>
+          <tr height="30">
+            <td colspan="3" class="et21">乙烯</td>
+            <td colspan="7" class="et21">乙炔</td>
+            <td colspan="8" class="et66">12煤集中供液站</td>
+            <td colspan="3" class="et66">DM-1500</td>
+            <td colspan="7" class="et66">246万㎡</td>
+            <td colspan="4" class="et66">42煤</td>
+            <td colspan="4" class="et66">12个</td>
+          </tr>
+          <tr height="63">
+            <td colspan="51" rowspan="2" class="et12"
+              >1.JSG-8:J-监测、SG-束管、可分析8种气体。DM-1000、DM-1500：D-制氮装置、M-膜分离、1000m³/h、1500m³/h。
+              2.井下现有束管监测分站3套，对3个回采面采空区和3个相邻的已采采空区共计12个监测点24小时监测。采空区瓦斯最大为22煤一盘区边界巷密闭内36.
+              3.一般防火密闭设计:1米砼闭+1米黄土+0.5米砖闭+1.5米砼闭。
+              4.永久防火密闭12道、一般防火密闭143道、临时密闭468道、行车风门103道、行人风门87道、风桥62道。</td
+            >
+          </tr>
+          <tr height="63"> </tr>
+          <tr height="30">
+            <td colspan="51" class="et22 bg2">防尘参数</td>
+          </tr>
+          <tr height="30">
+            <td colspan="3" rowspan="6" class="bg1">煤尘有爆炸性</td>
+            <td colspan="15" class="et66">掘进除尘</td>
+            <td colspan="33" class="et66">ZGJFH30、ZGJFH55煤矿井下自动隔爆装置</td>
+          </tr>
+          <tr height="30">
+            <td colspan="4" class="et66">除尘箱</td>
+            <td colspan="11" class="et66">KCG-350/500D</td>
+            <td colspan="10" class="et66">安装位置</td>
+            <td colspan="12" class="et66">工作原理</td>
+            <td colspan="11" rowspan="5" class="et12">ZGJFH30：Z-装置、G-隔爆、J-机械式、F-粉剂、H-巷道、30-粉剂量30KG</td>
+          </tr>
+          <tr height="26">
+            <td colspan="4" class="et66">风机</td>
+            <td colspan="11" class="et66">2×30/37KW</td>
+            <td colspan="10" rowspan="2" class="et21">盘区大巷、工作面顺槽</td>
+            <td colspan="12" rowspan="4" class="et12">爆炸冲击波冲击触发装置，启动主体装置喷射干粉灭火剂扑灭火焰。</td>
+          </tr>
+          <tr height="26">
+            <td colspan="15" rowspan="3" class="et12">KCG-500D：K-矿用、C-除尘、G-干式、500-处理风量、D-电动。</td>
+          </tr>
+          <tr height="26">
+            <td colspan="10" rowspan="2" class="et21">采掘工作面60~200m内</td>
+          </tr>
+          <tr height="26"> </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
   // 转换工具 https://www.lingdaima.com/table/
 </script>
-<style scoped>
-  table {
-    border-top: 1px solid #333;
-    border-left: 1px solid #333;
-    border-spacing: 0;
-    background-color: #ddd;
+<style lang="less" scoped>
+  @import url('/@/design/vent/color.less');
+
+  .sheet-bg {
     width: 100%;
-    color: #000;
-    margin: 0 auto;
+    height: 92%;
+    background-image: url(/@/assets/images/vent/sheet-bg.png);
+    background-size: 98% 98%;
+    background-repeat: no-repeat;
+    background-position: center;
+    position: relative;
+    padding: 50px 0;
   }
-  table td {
-    border-bottom: 1px solid #333;
-    border-right: 1px solid #333;
-    font-size: 13px;
-    padding: 5px;
+  .sheet-bg-inner {
+    margin: 0 auto;
+    height: 100%;
+    overflow-y: auto;
   }
-  .et42 {
+  .sheet-content {
+    width: 1260px;
+    border-spacing: 0;
+    color: #fff;
+    margin: 0 auto;
     text-align: center;
   }
-  .et5 {
-    text-align: left;
-  }
-  .et6 {
-    text-align: left;
+  .bg0 {
+    width: 100%;
+    height: 73px;
+    font-size: 20px;
+    background-image: url(/@/assets/images/vent/sheet-header.png);
+    background-size: 100% 73px;
+    background-repeat: no-repeat;
+    border: none;
   }
-  .et22 {
-    text-align: center;
+  .bg1 {
+    background-image: linear-gradient(to bottom, #04698c, #04698c00);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    color: #31b9ef;
   }
-  .et29 {
-    text-align: center;
+  .bg2 {
+    width: 100%;
+    height: 93px;
+    font-size: 20px;
+    background-image: url(/@/assets/images/vent/sheet-header.png);
+    background-size: 100% 73px;
+    background-repeat: no-repeat;
+    background-position: bottom;
+    border: none;
+    padding-top: 20px;
   }
-  /* .font0 {
-  } */
-  .bg0 {
-    background-color: #333;
-    color: #fff;
+  table td {
+    border: 1px solid @vent-gas-tab-border;
+    font-size: 13px;
+    padding: 5px;
   }
 </style>

src/views/vent/monitorManager/deviceMonitor/staticSheets/dustSheet.vue

@@ -1,139 +1,160 @@
 <template>
-  <div class="h-92% overflow-auto mt-10px mb-10px">
-    <table style="width: 740pt">
-      <colgroup>
-        <col width="16" style="width: 9.75pt" span="28" />
-        <col width="31" style="width: 18.9pt" />
-        <col width="16" style="width: 9.75pt" span="23" />
-      </colgroup>
-      <tbody>
-        <tr height="30">
-          <td colspan="52" class="et29 bg0">防尘参数</td>
-        </tr>
-        <tr height="30">
-          <td colspan="3" rowspan="6" class>煤尘有爆炸性</td>
-          <td colspan="15" class="et21">掘进除尘</td>
-          <td colspan="34" class="et21">ZGJFH30、ZGJFH55煤矿井下自动隔爆装置</td>
-        </tr>
-        <tr height="30">
-          <td colspan="4" class="et22">除尘箱</td>
-          <td colspan="11" class="et22">KCG-350/500D</td>
-          <td colspan="10" class="et22">安装位置</td>
-          <td colspan="12" class="et22">工作原理</td>
-          <td colspan="12" rowspan="5" class="et22">ZGJFH30：Z-装置、G-隔爆、J-机械式、F-粉剂、H-巷道、30-粉剂量30KG</td>
-        </tr>
-        <tr height="30">
-          <td colspan="4" class="et22">风机</td>
-          <td colspan="11" class="et22">2×30/37KW</td>
-          <td colspan="10" rowspan="2" class="et22">盘区大巷、工作面顺槽</td>
-          <td colspan="12" rowspan="4" class="et3">爆炸冲击波冲击触发装置，启动主体装置喷射干粉灭火剂扑灭火焰。</td>
-        </tr>
-        <tr height="30">
-          <td colspan="15" rowspan="3" class="et3">KCG-500D：K-矿用、C-除尘、G-干式、500-处理风量、D-电动。</td>
-        </tr>
-        <tr height="30">
-          <td colspan="10" rowspan="2" class="et22">采掘工作面60~200m内</td>
-        </tr>
-        <tr height="20"> </tr>
-      </tbody>
-    </table>
-    <table style="width: 740pt">
-      <colgroup>
-        <col width="190" style="width: 114pt" />
-        <col width="205" style="width: 123pt" />
-        <col width="262" style="width: 157.5pt" />
-        <col width="305" style="width: 183pt" />
-      </colgroup>
-      <tbody>
-        <tr height="50">
-          <td class="et2">掘进队名称</td>
-          <td class="et2">除尘风箱型号</td>
-          <td class="et2">除尘风机型号</td>
-          <td class="et2">压入式风机型号</td>
-        </tr>
-        <tr height="50">
-          <td class="et2">掘锚一队</td>
-          <td class="et2">KCG500D</td>
-          <td class="et2">FBCD.NO.6.7-2×37</td>
-          <td class="et2">FBD--NO.8.0-2×75</td>
-        </tr>
-        <tr height="50">
-          <td class="et2">掘锚二队</td>
-          <td class="et2">KCG500D</td>
-          <td class="et2">FBCD.NO.6.7-2×37</td>
-          <td class="et2">FBDY--NO.7.1-2×45</td>
-        </tr>
-        <tr height="50">
-          <td class="et2">掘锚三队</td>
-          <td class="et2">KCG350D</td>
-          <td class="et2">FBCD.NO.6.7-2×37</td>
-          <td class="et2">FBD--NO.7.5-2×45</td>
-        </tr>
-        <tr height="50">
-          <td class="et2">掘锚五队</td>
-          <td class="et2">KCG500D</td>
-          <td class="et2">FBCD.NO.6.7-2×37</td>
-          <td class="et2">FBDY--NO.7.1-2×45</td>
-        </tr>
-        <tr height="50">
-          <td class="et2">掘锚六队</td>
-          <td class="et2">KCG500D</td>
-          <td class="et2">FBCD.NO.7.1-2×30</td>
-          <td class="et2">FBDY--NO.7.1-2×45</td>
-        </tr>
-        <tr height="50">
-          <td class="et2">掘锚七队</td>
-          <td class="et2">KCG350D</td>
-          <td class="et2">FBCD.NO.7.1-2×37</td>
-          <td class="et2">FBDY--NO.7.1-2×45</td>
-        </tr>
-        <tr height="50">
-          <td class="et2">综掘六队</td>
-          <td colspan="2" class="et2">KCS1000DZ</td>
-          <td class="et2">FBDY--NO.6.3-2×30</td>
-        </tr>
-      </tbody>
-    </table>
+  <div class="sheet-bg">
+    <div class="sheet-bg-inner">
+      <table class="sheet-content">
+        <colgroup>
+          <col width="16" style="width: 9.75pt" span="28" />
+          <col width="31" style="width: 18.9pt" />
+          <col width="16" style="width: 9.75pt" span="23" />
+        </colgroup>
+        <tbody>
+          <tr height="30">
+            <td colspan="52" class="et29 bg0">防尘参数</td>
+          </tr>
+          <tr height="30">
+            <td colspan="3" rowspan="6" class="bg1">煤尘有爆炸性</td>
+            <td colspan="15" class="et21">掘进除尘</td>
+            <td colspan="34" class="et21">ZGJFH30、ZGJFH55煤矿井下自动隔爆装置</td>
+          </tr>
+          <tr height="30">
+            <td colspan="4" class="et22">除尘箱</td>
+            <td colspan="11" class="et22">KCG-350/500D</td>
+            <td colspan="10" class="et22">安装位置</td>
+            <td colspan="12" class="et22">工作原理</td>
+            <td colspan="12" rowspan="5" class="et22">ZGJFH30：Z-装置、G-隔爆、J-机械式、F-粉剂、H-巷道、30-粉剂量30KG</td>
+          </tr>
+          <tr height="30">
+            <td colspan="4" class="et22">风机</td>
+            <td colspan="11" class="et22">2×30/37KW</td>
+            <td colspan="10" rowspan="2" class="et22">盘区大巷、工作面顺槽</td>
+            <td colspan="12" rowspan="4" class="et3">爆炸冲击波冲击触发装置，启动主体装置喷射干粉灭火剂扑灭火焰。</td>
+          </tr>
+          <tr height="30">
+            <td colspan="15" rowspan="3" class="et3">KCG-500D：K-矿用、C-除尘、G-干式、500-处理风量、D-电动。</td>
+          </tr>
+          <tr height="30">
+            <td colspan="10" rowspan="2" class="et22">采掘工作面60~200m内</td>
+          </tr>
+          <tr height="20"> </tr>
+        </tbody>
+      </table>
+      <table class="sheet-content">
+        <colgroup>
+          <col width="190" style="width: 114pt" />
+          <col width="205" style="width: 123pt" />
+          <col width="262" style="width: 157.5pt" />
+          <col width="305" style="width: 183pt" />
+        </colgroup>
+        <tbody>
+          <tr height="50">
+            <td class="et2 bg1">掘进队名称</td>
+            <td class="et2 bg1">除尘风箱型号</td>
+            <td class="et2 bg1">除尘风机型号</td>
+            <td class="et2 bg1">压入式风机型号</td>
+          </tr>
+          <tr height="50">
+            <td class="et2">掘锚一队</td>
+            <td class="et2">KCG500D</td>
+            <td class="et2">FBCD.NO.6.7-2×37</td>
+            <td class="et2">FBD--NO.8.0-2×75</td>
+          </tr>
+          <tr height="50">
+            <td class="et2">掘锚二队</td>
+            <td class="et2">KCG500D</td>
+            <td class="et2">FBCD.NO.6.7-2×37</td>
+            <td class="et2">FBDY--NO.7.1-2×45</td>
+          </tr>
+          <tr height="50">
+            <td class="et2">掘锚三队</td>
+            <td class="et2">KCG350D</td>
+            <td class="et2">FBCD.NO.6.7-2×37</td>
+            <td class="et2">FBD--NO.7.5-2×45</td>
+          </tr>
+          <tr height="50">
+            <td class="et2">掘锚五队</td>
+            <td class="et2">KCG500D</td>
+            <td class="et2">FBCD.NO.6.7-2×37</td>
+            <td class="et2">FBDY--NO.7.1-2×45</td>
+          </tr>
+          <tr height="50">
+            <td class="et2">掘锚六队</td>
+            <td class="et2">KCG500D</td>
+            <td class="et2">FBCD.NO.7.1-2×30</td>
+            <td class="et2">FBDY--NO.7.1-2×45</td>
+          </tr>
+          <tr height="50">
+            <td class="et2">掘锚七队</td>
+            <td class="et2">KCG350D</td>
+            <td class="et2">FBCD.NO.7.1-2×37</td>
+            <td class="et2">FBDY--NO.7.1-2×45</td>
+          </tr>
+          <tr height="50">
+            <td class="et2">综掘六队</td>
+            <td colspan="2" class="et2">KCS1000DZ</td>
+            <td class="et2">FBDY--NO.6.3-2×30</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
   // 转换工具 https://www.lingdaima.com/table/
 </script>
-<style scoped>
-  table {
-    border-top: 1px solid #333;
-    border-left: 1px solid #333;
-    border-spacing: 0;
-    background-color: #ddd;
+<style lang="less" scoped>
+  @import url('/@/design/vent/color.less');
+
+  .sheet-bg {
     width: 100%;
-    color: #000;
-    margin: 0 auto;
+    height: 92%;
+    background-image: url(/@/assets/images/vent/sheet-bg.png);
+    background-size: 98% 98%;
+    background-repeat: no-repeat;
+    background-position: center;
+    position: relative;
+    padding: 50px 0;
   }
-  table td {
-    border-bottom: 1px solid #333;
-    border-right: 1px solid #333;
-    font-size: 13px;
-    padding: 5px;
+  .sheet-bg-inner {
+    margin: 0 auto;
+    height: 100%;
+    overflow-y: auto;
   }
-  .et42 {
+  .sheet-content {
+    width: 1260px;
+    border-spacing: 0;
+    color: #fff;
+    margin: 0 auto;
     text-align: center;
   }
-  .et5 {
-    text-align: left;
-  }
-  .et6 {
-    text-align: left;
+  .bg0 {
+    width: 100%;
+    height: 73px;
+    font-size: 20px;
+    background-image: url(/@/assets/images/vent/sheet-header.png);
+    background-size: 100% 73px;
+    background-repeat: no-repeat;
+    border: none;
   }
-  .et22 {
-    text-align: center;
+  .bg1 {
+    background-image: linear-gradient(to bottom, #04698c, #04698c00);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    color: #31b9ef;
   }
-  .et29 {
-    text-align: center;
+  .bg2 {
+    width: 100%;
+    height: 93px;
+    font-size: 20px;
+    background-image: url(/@/assets/images/vent/sheet-header.png);
+    background-size: 100% 73px;
+    background-repeat: no-repeat;
+    background-position: bottom;
+    border: none;
+    padding-top: 20px;
   }
-  /* .font0 {
-  } */
-  .bg0 {
-    background-color: #333;
-    color: #fff;
+  table td {
+    border: 1px solid @vent-gas-tab-border;
+    font-size: 13px;
+    padding: 5px;
   }
 </style>

src/views/vent/monitorManager/deviceMonitor/staticSheets/fireSheet.vue

@@ -1,178 +1,199 @@
 <template>
-  <div class="h-92% overflow-auto mt-10px mb-10px">
-    <table style="width: 740pt">
-      <colgroup>
-        <col width="16" style="width: 9.75pt" span="7" />
-        <col width="31" style="width: 19.05pt" />
-        <col width="16" style="width: 9.75pt" span="9" />
-        <col width="22" style="width: 13.5pt" />
-        <col width="54" style="width: 32.6pt" />
-        <col width="16" style="width: 9.75pt" span="3" />
-        <col width="65" style="width: 39.05pt" />
-        <col width="33" style="width: 20.2pt" />
-        <col width="16" style="width: 9.75pt" span="3" />
-        <col width="25" style="width: 15pt" />
-        <col width="16" style="width: 9.75pt" span="3" />
-        <col width="36" style="width: 21.9pt" />
-        <col width="16" style="width: 9.75pt" />
-        <col width="51" style="width: 31.15pt" />
-        <col width="16" style="width: 9.75pt" />
-        <col width="64" style="width: 38.6pt" />
-        <col width="16" style="width: 9.75pt" span="15" />
-      </colgroup>
-      <tbody>
-        <tr height="30">
-          <td colspan="51" class="et22 bg0">防灭火参数</td>
-        </tr>
-        <tr height="30">
-          <td colspan="4" class="et42">煤层</td>
-          <td colspan="4" class="et42">倾向性</td>
-          <td colspan="6" class="et42">最短发火期</td>
-          <td colspan="4" class="et22">三带</td>
-          <td colspan="6" class="et22">散热带m</td>
-          <td colspan="6" class="et22">氧化带m</td>
-          <td colspan="6" class="et22">窒息带m</td>
-          <td colspan="15" class="et42">激光束管</td>
-        </tr>
-        <tr height="30">
-          <td colspan="4" class="et42">12上煤</td>
-          <td colspan="4" rowspan="4" class="et22">I类易自燃</td>
-          <td colspan="6" class="et42">53</td>
-          <td colspan="4" rowspan="2" class="et22">12上煤</td>
-          <td colspan="6" rowspan="2" class="et22">＜69</td>
-          <td colspan="6" rowspan="2" class="et42">69-188</td>
-          <td colspan="6" rowspan="2" class="et42">＞188</td>
-          <td colspan="4" class="et42">型号</td>
-          <td colspan="11" class="et22">可分析气体</td>
-        </tr>
-        <tr height="30">
-          <td colspan="4" class="et42">12煤</td>
-          <td colspan="6" class="et42">37</td>
-          <td colspan="4" rowspan="3" class="et42">JSG-8</td>
-          <td colspan="4" class="et22">甲烷</td>
-          <td colspan="7" class="et22">一氧化碳</td>
-        </tr>
-        <tr height="30">
-          <td colspan="4" class="et42">22煤</td>
-          <td colspan="6" class="et42">36</td>
-          <td colspan="4" class="et22">22煤</td>
-          <td colspan="6" class="et22">＜45.9</td>
-          <td colspan="6" class="et42">45.9-222.3</td>
-          <td colspan="6" class="et42">＞222.3</td>
-          <td colspan="4" class="et22">氧气</td>
-          <td colspan="7" class="et22">二氧化碳</td>
-        </tr>
-        <tr height="33">
-          <td colspan="4" class="et42">42上煤</td>
-          <td colspan="6" class="et42">34</td>
-          <td colspan="4" class="et22">42上煤</td>
-          <td colspan="6" class="et22">＜47.3</td>
-          <td colspan="6" class="et42">47.3-188.0</td>
-          <td colspan="6" class="et42">＞188.0</td>
-          <td colspan="4" class="et22">乙烯</td>
-          <td colspan="7" class="et22">乙炔</td>
-        </tr>
-        <tr height="30">
-          <td colspan="16" class="et42">色谱分析仪</td>
-          <td colspan="8" class="et42">注浆系统</td>
-          <td colspan="12" class="et29">注氮系统</td>
-          <td colspan="7" class="et29">地表回填</td>
-          <td colspan="8" class="et42">采空区管理</td>
-        </tr>
-        <tr height="30">
-          <td colspan="4" class="et42">型号</td>
-          <td colspan="12" class="et22">可分析气体</td>
-          <td colspan="3" rowspan="2" class="et22">松定霍洛风井广场</td>
-          <td colspan="3" rowspan="4" class="et22">能力 120m³/h</td>
-          <td colspan="2" rowspan="4" class="et22">20.4万m³/年</td>
-          <td colspan="8" class="et42">22209辅运1#联巷</td>
-          <td colspan="3" class="et42">DM-1000</td>
-          <td rowspan="4" class="et22">534 万m³/年</td>
-          <td colspan="7" rowspan="3" class="et22">鄂尔多斯宇和劳务服务有限公司</td>
-          <td colspan="4" class="et42">12煤</td>
-          <td colspan="4" class="et42">0个</td>
-        </tr>
-        <tr height="30">
-          <td colspan="4" rowspan="3" class="et22">SP-2010</td>
-          <td colspan="3" class="et22">甲烷</td>
-          <td colspan="7" class="et22">一氧化碳</td>
-          <td colspan="2" rowspan="3" class="et22">乙 烷</td>
-          <td colspan="8" class="et42">42205辅运1#联巷</td>
-          <td colspan="3" class="et42">DM-1500</td>
-          <td colspan="4" class="et42">12上煤</td>
-          <td colspan="4" class="et42">1个</td>
-        </tr>
-        <tr height="30">
-          <td colspan="3" class="et22">氧气</td>
-          <td colspan="7" class="et22">二氧化碳</td>
-          <td colspan="3" rowspan="2" class="et22">明安木独风井广场</td>
-          <td colspan="8" class="et42">12302主运4联巷</td>
-          <td colspan="3" class="et42">DM-1500</td>
-          <td colspan="4" class="et42">22煤</td>
-          <td colspan="4" class="et42">17个</td>
-        </tr>
-        <tr height="50">
-          <td colspan="3" class="et22">乙烯</td>
-          <td colspan="7" class="et22">乙炔</td>
-          <td colspan="8" class="et42">12煤集中供液站</td>
-          <td colspan="3" class="et42">DM-1500</td>
-          <td colspan="7" class="et29">246万㎡</td>
-          <td colspan="4" class="et29">42煤</td>
-          <td colspan="4" class="et42">12个</td>
-        </tr>
-        <tr height="30">
-          <td colspan="51" rowspan="4" class="et5">
-            1.JSG-8:J-监测、SG-束管、可分析8种气体。DM-1000、DM-1500：D-制氮装置、M-膜分离、1000m³/h、1500m³/h。
-            2.井下现有束管监测分站3套，对3个回采面采空区和3个相邻的已采采空区共计12个监测点24小时监测。采空区瓦斯最大为22煤一盘区边界巷密闭内36.4%。
-            3.ZJ-120T：Z-自动化、J-注浆、120-注浆量、T-黄土。
-            4.三相泡沫发泡剂型号：SKF-Ⅱ，添加比例：0.5%-1.0%，发泡倍数≥30，泡沫稳定时间：≥8.5h，凝固点≤-10℃；三相泡沫专用高温渣油泵型号ZYB-200,流量12m³/h，压力0.36MPa，吸程5m，轴速1400r/min，功率4kW。
-          </td>
-        </tr>
-        <tr height="30"> </tr>
-        <tr height="30"> </tr>
-        <tr height="56"> </tr>
-      </tbody>
-    </table>
+  <div class="sheet-bg">
+    <div class="sheet-bg-inner">
+      <table class="sheet-content">
+        <colgroup>
+          <col width="16" style="width: 9.75pt" span="7" />
+          <col width="31" style="width: 19.05pt" />
+          <col width="16" style="width: 9.75pt" span="9" />
+          <col width="22" style="width: 13.5pt" />
+          <col width="54" style="width: 32.6pt" />
+          <col width="16" style="width: 9.75pt" span="3" />
+          <col width="65" style="width: 39.05pt" />
+          <col width="33" style="width: 20.2pt" />
+          <col width="16" style="width: 9.75pt" span="3" />
+          <col width="25" style="width: 15pt" />
+          <col width="16" style="width: 9.75pt" span="3" />
+          <col width="36" style="width: 21.9pt" />
+          <col width="16" style="width: 9.75pt" />
+          <col width="51" style="width: 31.15pt" />
+          <col width="16" style="width: 9.75pt" />
+          <col width="64" style="width: 38.6pt" />
+          <col width="16" style="width: 9.75pt" span="15" />
+        </colgroup>
+        <tbody>
+          <tr height="30">
+            <td colspan="51" class="et22 bg0">防灭火参数</td>
+          </tr>
+          <tr height="30">
+            <td colspan="4" class="et42 bg1">煤层</td>
+            <td colspan="4" class="et42 bg1">倾向性</td>
+            <td colspan="6" class="et42 bg1">最短发火期</td>
+            <td colspan="4" class="et22 bg1">三带</td>
+            <td colspan="6" class="et22 bg1">散热带m</td>
+            <td colspan="6" class="et22 bg1">氧化带m</td>
+            <td colspan="6" class="et22 bg1">窒息带m</td>
+            <td colspan="15" class="et42 bg1">激光束管</td>
+          </tr>
+          <tr height="30">
+            <td colspan="4" class="et42">12上煤</td>
+            <td colspan="4" rowspan="4" class="et22">I类易自燃</td>
+            <td colspan="6" class="et42">53</td>
+            <td colspan="4" rowspan="2" class="et22">12上煤</td>
+            <td colspan="6" rowspan="2" class="et22">＜69</td>
+            <td colspan="6" rowspan="2" class="et42">69-188</td>
+            <td colspan="6" rowspan="2" class="et42">＞188</td>
+            <td colspan="4" class="et42">型号</td>
+            <td colspan="11" class="et22">可分析气体</td>
+          </tr>
+          <tr height="30">
+            <td colspan="4" class="et42">12煤</td>
+            <td colspan="6" class="et42">37</td>
+            <td colspan="4" rowspan="3" class="et42">JSG-8</td>
+            <td colspan="4" class="et22">甲烷</td>
+            <td colspan="7" class="et22">一氧化碳</td>
+          </tr>
+          <tr height="30">
+            <td colspan="4" class="et42">22煤</td>
+            <td colspan="6" class="et42">36</td>
+            <td colspan="4" class="et22">22煤</td>
+            <td colspan="6" class="et22">＜45.9</td>
+            <td colspan="6" class="et42">45.9-222.3</td>
+            <td colspan="6" class="et42">＞222.3</td>
+            <td colspan="4" class="et22">氧气</td>
+            <td colspan="7" class="et22">二氧化碳</td>
+          </tr>
+          <tr height="33">
+            <td colspan="4" class="et42">42上煤</td>
+            <td colspan="6" class="et42">34</td>
+            <td colspan="4" class="et22">42上煤</td>
+            <td colspan="6" class="et22">＜47.3</td>
+            <td colspan="6" class="et42">47.3-188.0</td>
+            <td colspan="6" class="et42">＞188.0</td>
+            <td colspan="4" class="et22">乙烯</td>
+            <td colspan="7" class="et22">乙炔</td>
+          </tr>
+          <tr height="30">
+            <td colspan="16" class="et42 bg1">色谱分析仪</td>
+            <td colspan="8" class="et42 bg1">注浆系统</td>
+            <td colspan="12" class="et29 bg1">注氮系统</td>
+            <td colspan="7" class="et29 bg1">地表回填</td>
+            <td colspan="8" class="et42 bg1">采空区管理</td>
+          </tr>
+          <tr height="30">
+            <td colspan="4" class="et42">型号</td>
+            <td colspan="12" class="et22">可分析气体</td>
+            <td colspan="3" rowspan="2" class="et22">松定霍洛风井广场</td>
+            <td colspan="3" rowspan="4" class="et22">能力 120m³/h</td>
+            <td colspan="2" rowspan="4" class="et22">20.4万m³/年</td>
+            <td colspan="8" class="et42">22209辅运1#联巷</td>
+            <td colspan="3" class="et42">DM-1000</td>
+            <td rowspan="4" class="et22">534 万m³/年</td>
+            <td colspan="7" rowspan="3" class="et22">鄂尔多斯宇和劳务服务有限公司</td>
+            <td colspan="4" class="et42">12煤</td>
+            <td colspan="4" class="et42">0个</td>
+          </tr>
+          <tr height="30">
+            <td colspan="4" rowspan="3" class="et22">SP-2010</td>
+            <td colspan="3" class="et22">甲烷</td>
+            <td colspan="7" class="et22">一氧化碳</td>
+            <td colspan="2" rowspan="3" class="et22">乙 烷</td>
+            <td colspan="8" class="et42">42205辅运1#联巷</td>
+            <td colspan="3" class="et42">DM-1500</td>
+            <td colspan="4" class="et42">12上煤</td>
+            <td colspan="4" class="et42">1个</td>
+          </tr>
+          <tr height="30">
+            <td colspan="3" class="et22">氧气</td>
+            <td colspan="7" class="et22">二氧化碳</td>
+            <td colspan="3" rowspan="2" class="et22">明安木独风井广场</td>
+            <td colspan="8" class="et42">12302主运4联巷</td>
+            <td colspan="3" class="et42">DM-1500</td>
+            <td colspan="4" class="et42">22煤</td>
+            <td colspan="4" class="et42">17个</td>
+          </tr>
+          <tr height="50">
+            <td colspan="3" class="et22">乙烯</td>
+            <td colspan="7" class="et22">乙炔</td>
+            <td colspan="8" class="et42">12煤集中供液站</td>
+            <td colspan="3" class="et42">DM-1500</td>
+            <td colspan="7" class="et29">246万㎡</td>
+            <td colspan="4" class="et29">42煤</td>
+            <td colspan="4" class="et42">12个</td>
+          </tr>
+          <tr height="30">
+            <td colspan="51" rowspan="4" class="et5">
+              1.JSG-8:J-监测、SG-束管、可分析8种气体。DM-1000、DM-1500：D-制氮装置、M-膜分离、1000m³/h、1500m³/h。
+              2.井下现有束管监测分站3套，对3个回采面采空区和3个相邻的已采采空区共计12个监测点24小时监测。采空区瓦斯最大为22煤一盘区边界巷密闭内36.4%。
+              3.ZJ-120T：Z-自动化、J-注浆、120-注浆量、T-黄土。
+              4.三相泡沫发泡剂型号：SKF-Ⅱ，添加比例：0.5%-1.0%，发泡倍数≥30，泡沫稳定时间：≥8.5h，凝固点≤-10℃；三相泡沫专用高温渣油泵型号ZYB-200,流量12m³/h，压力0.36MPa，吸程5m，轴速1400r/min，功率4kW。
+            </td>
+          </tr>
+          <tr height="30"> </tr>
+          <tr height="30"> </tr>
+          <tr height="56"> </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
   // 转换工具 https://www.lingdaima.com/table/
 </script>
-<style scoped>
-  table {
-    border-top: 1px solid #333;
-    border-left: 1px solid #333;
-    border-spacing: 0;
-    background-color: #ddd;
+<style lang="less" scoped>
+  @import url('/@/design/vent/color.less');
+
+  .sheet-bg {
     width: 100%;
-    color: #000;
-    margin: 0 auto;
+    height: 92%;
+    background-image: url(/@/assets/images/vent/sheet-bg.png);
+    background-size: 98% 98%;
+    background-repeat: no-repeat;
+    background-position: center;
+    position: relative;
+    padding: 50px 0;
   }
-  table td {
-    border-bottom: 1px solid #333;
-    border-right: 1px solid #333;
-    font-size: 13px;
-    padding: 5px;
+  .sheet-bg-inner {
+    margin: 0 auto;
+    height: 100%;
+    overflow-y: auto;
   }
-  .et42 {
+  .sheet-content {
+    width: 1260px;
+    border-spacing: 0;
+    color: #fff;
+    margin: 0 auto;
     text-align: center;
   }
-  .et5 {
-    text-align: left;
-  }
-  .et6 {
-    text-align: left;
+  .bg0 {
+    width: 100%;
+    height: 73px;
+    font-size: 20px;
+    background-image: url(/@/assets/images/vent/sheet-header.png);
+    background-size: 100% 73px;
+    background-repeat: no-repeat;
+    border: none;
   }
-  .et22 {
-    text-align: center;
+  .bg1 {
+    background-image: linear-gradient(to bottom, #04698c, #04698c00);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    color: #31b9ef;
   }
-  .et29 {
-    text-align: center;
+  .bg2 {
+    width: 100%;
+    height: 93px;
+    font-size: 20px;
+    background-image: url(/@/assets/images/vent/sheet-header.png);
+    background-size: 100% 73px;
+    background-repeat: no-repeat;
+    background-position: bottom;
+    border: none;
+    padding-top: 20px;
   }
-  /* .font0 {
-  } */
-  .bg0 {
-    background-color: #333;
-    color: #fff;
+  table td {
+    border: 1px solid @vent-gas-tab-border;
+    font-size: 13px;
+    padding: 5px;
   }
 </style>

src/views/vent/monitorManager/deviceMonitor/staticSheets/gasSheet.vue

@@ -1,187 +1,208 @@
 <template>
-  <div class="h-92% overflow-auto mt-10px mb-10px">
-    <table style="width: 740pt">
-      <colgroup>
-        <col width="16" style="width: 9.75pt" span="7" />
-        <col width="31" style="width: 19.05pt" />
-        <col width="16" style="width: 9.75pt" span="9" />
-        <col width="22" style="width: 13.5pt" />
-        <col width="54" style="width: 32.6pt" />
-        <col width="16" style="width: 9.75pt" span="3" />
-        <col width="65" style="width: 39.05pt" />
-        <col width="33" style="width: 20.2pt" />
-        <col width="16" style="width: 9.75pt" span="3" />
-        <col width="25" style="width: 15pt" />
-        <col width="16" style="width: 9.75pt" span="3" />
-        <col width="36" style="width: 21.9pt" />
-        <col width="16" style="width: 9.75pt" />
-        <col width="51" style="width: 31.15pt" />
-        <col width="16" style="width: 9.75pt" />
-        <col width="64" style="width: 38.6pt" />
-        <col width="16" style="width: 9.75pt" span="15" />
-      </colgroup>
-      <tbody>
-        <tr height="30">
-          <td colspan="51" class="et22 bg0">瓦斯参数</td>
-        </tr>
-        <tr height="30">
-          <td colspan="17" class="et42">瓦斯等级鉴定</td>
-          <td colspan="34" class="et42">瓦斯抽放</td>
-        </tr>
-        <tr height="30">
-          <td colspan="10" class="et42">绝对瓦斯涌出量</td>
-          <td colspan="7" class="et42">29.92m³/min</td>
-          <td colspan="14" class="et42">抽放泵站地点</td>
-          <td colspan="8" class="et42">抽放工作面</td>
-          <td colspan="12" class="et42">设备型号</td>
-        </tr>
-        <tr height="30">
-          <td colspan="10" class="et42">相对瓦斯涌出量</td>
-          <td colspan="7" class="et42">0.83m³/t</td>
-          <td colspan="14" class="et42">二水平中部辅运大巷1860米</td>
-          <td colspan="8" class="et42">42205综放面</td>
-          <td colspan="12" class="et42">ZWY270/355</td>
-        </tr>
-        <tr height="30">
-          <td colspan="10" class="et42">综采最大涌出量</td>
-          <td colspan="7" class="et42">3.16m³/min</td>
-          <td colspan="14" class="et42">12煤组辅运大巷480米</td>
-          <td colspan="8" class="et42">12上302综放面</td>
-          <td colspan="12" class="et42">ZWY300/355</td>
-        </tr>
-        <tr height="30">
-          <td colspan="10" class="et42">掘进最大涌出量</td>
-          <td colspan="7" class="et42">0.68m³/min</td>
-          <td colspan="14" class="et42">12煤二盘区辅运大巷1280米</td>
-          <td colspan="8" class="et42">12201综采面</td>
-          <td colspan="12" class="et42">ZWY300/355</td>
-        </tr>
-        <tr height="30">
-          <td colspan="51" rowspan="2" class="et5"
-            >ZWY300/355：Z-泵站、W-瓦斯抽放、Y-移动式、270/300-流量（m³/min）、355-功率（KW），抽放混合量160～230m³/min，抽放瓦斯浓度0.5～1.2%，抽放瓦斯量0.8～3m³/min。</td
-          >
-        </tr>
-        <tr height="30"> </tr>
-        <tr height="30">
-          <td colspan="51" class="et22 bg0">各煤层瓦斯基础数据</td>
-        </tr>
-        <tr height="30">
-          <td colspan="4" rowspan="3" class="et42">煤层编号</td>
-          <td colspan="4" rowspan="3" class="et42">瓦斯含量m3/t</td>
-          <td colspan="5" rowspan="3" class="et42">压力MPa</td>
-          <td colspan="7" rowspan="3" class="et42">煤层透气性系数m2/Mpa2·d</td>
-          <td colspan="8" rowspan="2" class="et42">吸附常数</td>
-          <td colspan="12" rowspan="2" class="et42">工业常数</td>
-          <td colspan="4" rowspan="3" class="et42">孔隙率</td>
-          <td colspan="4" rowspan="3" class="et42">坚固性系数</td>
-          <td colspan="3" rowspan="3" class="et42">瓦斯放散初速度</td>
-        </tr>
-        <tr height="30"> </tr>
-        <tr height="30">
-          <td colspan="4" class="et42">a</td>
-          <td colspan="4" class="et42">b</td>
-          <td colspan="4" class="et42">水份</td>
-          <td colspan="4" class="et42">灰份</td>
-          <td colspan="4" class="et42">挥发份</td>
-        </tr>
-        <tr height="30">
-          <td colspan="4" class="et42">12上</td>
-          <td colspan="4" class="et42">1.88</td>
-          <td colspan="5" class="et42">0.25</td>
-          <td colspan="7" class="et42">0.1483-0.9281</td>
-          <td colspan="4" class="et42">35.115</td>
-          <td colspan="4" class="et42">0.481</td>
-          <td colspan="4" class="et22">6.90</td>
-          <td colspan="4" class="et22">13.23</td>
-          <td colspan="4" class="et22">14.30</td>
-          <td colspan="4" class="et22">4.44</td>
-          <td colspan="4" class="et42">0.7</td>
-          <td colspan="3" class="et42">19.5</td>
-        </tr>
-        <tr height="30">
-          <td colspan="4" class="et42">22</td>
-          <td colspan="4" class="et42">2.29</td>
-          <td colspan="5" class="et42">-</td>
-          <td colspan="7" class="et42">0.1364-0.2564</td>
-          <td colspan="4" class="et42">33.333</td>
-          <td colspan="4" class="et42">0.696</td>
-          <td colspan="4" class="et22">13.23</td>
-          <td colspan="4" class="et22">10.75</td>
-          <td colspan="4" class="et22">40.95</td>
-          <td colspan="4" class="et22">7.53</td>
-          <td colspan="4" class="et42">-</td>
-          <td colspan="3" class="et42">-</td>
-        </tr>
-        <tr height="30">
-          <td colspan="4" class="et42">42</td>
-          <td colspan="4" class="et42">2.43</td>
-          <td colspan="5" class="et42">-</td>
-          <td colspan="7" class="et42">0.1588-0.2651</td>
-          <td colspan="4" class="et42">32.362</td>
-          <td colspan="4" class="et42">0.702</td>
-          <td colspan="4" class="et22">12.83</td>
-          <td colspan="4" class="et22">1.59</td>
-          <td colspan="4" class="et22">37.51</td>
-          <td colspan="4" class="et22">7.19</td>
-          <td colspan="4" class="et42">-</td>
-          <td colspan="3" class="et42">-</td>
-        </tr>
-        <tr height="30">
-          <td colspan="4" class="et42">12</td>
-          <td colspan="4" class="et42">1.98</td>
-          <td colspan="5" class="et42">0.24</td>
-          <td colspan="7" class="et42">0.0182-1.3335</td>
-          <td colspan="4" class="et42">32.575</td>
-          <td colspan="4" class="et42">0.825</td>
-          <td colspan="4" class="et22">5.36</td>
-          <td colspan="4" class="et22">3.84</td>
-          <td colspan="4" class="et22">26.84</td>
-          <td colspan="4" class="et22">7.09</td>
-          <td colspan="4" class="et42">0.675</td>
-          <td colspan="3" class="et42">10.293</td>
-        </tr>
-      </tbody>
-    </table>
+  <div class="sheet-bg">
+    <div class="sheet-bg-inner">
+      <table class="sheet-content">
+        <colgroup>
+          <col width="16" style="width: 9.75pt" span="7" />
+          <col width="31" style="width: 19.05pt" />
+          <col width="16" style="width: 9.75pt" span="9" />
+          <col width="22" style="width: 13.5pt" />
+          <col width="54" style="width: 32.6pt" />
+          <col width="16" style="width: 9.75pt" span="3" />
+          <col width="65" style="width: 39.05pt" />
+          <col width="33" style="width: 20.2pt" />
+          <col width="16" style="width: 9.75pt" span="3" />
+          <col width="25" style="width: 15pt" />
+          <col width="16" style="width: 9.75pt" span="3" />
+          <col width="36" style="width: 21.9pt" />
+          <col width="16" style="width: 9.75pt" />
+          <col width="51" style="width: 31.15pt" />
+          <col width="16" style="width: 9.75pt" />
+          <col width="64" style="width: 38.6pt" />
+          <col width="16" style="width: 9.75pt" span="15" />
+        </colgroup>
+        <tbody>
+          <tr height="30">
+            <td colspan="51" class="et22 bg0">瓦斯参数</td>
+          </tr>
+          <tr height="30">
+            <td colspan="17" class="et42 bg1">瓦斯等级鉴定</td>
+            <td colspan="34" class="et42 bg1">瓦斯抽放</td>
+          </tr>
+          <tr height="30">
+            <td colspan="10" class="et42">绝对瓦斯涌出量</td>
+            <td colspan="7" class="et42">29.92m³/min</td>
+            <td colspan="14" class="et42">抽放泵站地点</td>
+            <td colspan="8" class="et42">抽放工作面</td>
+            <td colspan="12" class="et42">设备型号</td>
+          </tr>
+          <tr height="30">
+            <td colspan="10" class="et42">相对瓦斯涌出量</td>
+            <td colspan="7" class="et42">0.83m³/t</td>
+            <td colspan="14" class="et42">二水平中部辅运大巷1860米</td>
+            <td colspan="8" class="et42">42205综放面</td>
+            <td colspan="12" class="et42">ZWY270/355</td>
+          </tr>
+          <tr height="30">
+            <td colspan="10" class="et42">综采最大涌出量</td>
+            <td colspan="7" class="et42">3.16m³/min</td>
+            <td colspan="14" class="et42">12煤组辅运大巷480米</td>
+            <td colspan="8" class="et42">12上302综放面</td>
+            <td colspan="12" class="et42">ZWY300/355</td>
+          </tr>
+          <tr height="30">
+            <td colspan="10" class="et42">掘进最大涌出量</td>
+            <td colspan="7" class="et42">0.68m³/min</td>
+            <td colspan="14" class="et42">12煤二盘区辅运大巷1280米</td>
+            <td colspan="8" class="et42">12201综采面</td>
+            <td colspan="12" class="et42">ZWY300/355</td>
+          </tr>
+          <tr height="30">
+            <td colspan="51" rowspan="2" class="et5"
+              >ZWY300/355：Z-泵站、W-瓦斯抽放、Y-移动式、270/300-流量（m³/min）、355-功率（KW），抽放混合量160～230m³/min，抽放瓦斯浓度0.5～1.2%，抽放瓦斯量0.8～3m³/min。</td
+            >
+          </tr>
+          <tr height="30"> </tr>
+          <tr height="30">
+            <td colspan="51" class="et22 bg2">各煤层瓦斯基础数据</td>
+          </tr>
+          <tr height="30">
+            <td colspan="4" rowspan="3" class="et42 bg1">煤层编号</td>
+            <td colspan="4" rowspan="3" class="et42 bg1">瓦斯含量m3/t</td>
+            <td colspan="5" rowspan="3" class="et42 bg1">压力MPa</td>
+            <td colspan="7" rowspan="3" class="et42 bg1">煤层透气性系数m2/Mpa2·d</td>
+            <td colspan="8" rowspan="2" class="et42 bg1">吸附常数</td>
+            <td colspan="12" rowspan="2" class="et42 bg1">工业常数</td>
+            <td colspan="4" rowspan="3" class="et42 bg1">孔隙率</td>
+            <td colspan="4" rowspan="3" class="et42 bg1">坚固性系数</td>
+            <td colspan="3" rowspan="3" class="et42 bg1">瓦斯放散初速度</td>
+          </tr>
+          <tr height="30"> </tr>
+          <tr height="30">
+            <td colspan="4" class="et42">a</td>
+            <td colspan="4" class="et42">b</td>
+            <td colspan="4" class="et42">水份</td>
+            <td colspan="4" class="et42">灰份</td>
+            <td colspan="4" class="et42">挥发份</td>
+          </tr>
+          <tr height="30">
+            <td colspan="4" class="et42">12上</td>
+            <td colspan="4" class="et42">1.88</td>
+            <td colspan="5" class="et42">0.25</td>
+            <td colspan="7" class="et42">0.1483-0.9281</td>
+            <td colspan="4" class="et42">35.115</td>
+            <td colspan="4" class="et42">0.481</td>
+            <td colspan="4" class="et22">6.90</td>
+            <td colspan="4" class="et22">13.23</td>
+            <td colspan="4" class="et22">14.30</td>
+            <td colspan="4" class="et22">4.44</td>
+            <td colspan="4" class="et42">0.7</td>
+            <td colspan="3" class="et42">19.5</td>
+          </tr>
+          <tr height="30">
+            <td colspan="4" class="et42">22</td>
+            <td colspan="4" class="et42">2.29</td>
+            <td colspan="5" class="et42">-</td>
+            <td colspan="7" class="et42">0.1364-0.2564</td>
+            <td colspan="4" class="et42">33.333</td>
+            <td colspan="4" class="et42">0.696</td>
+            <td colspan="4" class="et22">13.23</td>
+            <td colspan="4" class="et22">10.75</td>
+            <td colspan="4" class="et22">40.95</td>
+            <td colspan="4" class="et22">7.53</td>
+            <td colspan="4" class="et42">-</td>
+            <td colspan="3" class="et42">-</td>
+          </tr>
+          <tr height="30">
+            <td colspan="4" class="et42">42</td>
+            <td colspan="4" class="et42">2.43</td>
+            <td colspan="5" class="et42">-</td>
+            <td colspan="7" class="et42">0.1588-0.2651</td>
+            <td colspan="4" class="et42">32.362</td>
+            <td colspan="4" class="et42">0.702</td>
+            <td colspan="4" class="et22">12.83</td>
+            <td colspan="4" class="et22">1.59</td>
+            <td colspan="4" class="et22">37.51</td>
+            <td colspan="4" class="et22">7.19</td>
+            <td colspan="4" class="et42">-</td>
+            <td colspan="3" class="et42">-</td>
+          </tr>
+          <tr height="30">
+            <td colspan="4" class="et42">12</td>
+            <td colspan="4" class="et42">1.98</td>
+            <td colspan="5" class="et42">0.24</td>
+            <td colspan="7" class="et42">0.0182-1.3335</td>
+            <td colspan="4" class="et42">32.575</td>
+            <td colspan="4" class="et42">0.825</td>
+            <td colspan="4" class="et22">5.36</td>
+            <td colspan="4" class="et22">3.84</td>
+            <td colspan="4" class="et22">26.84</td>
+            <td colspan="4" class="et22">7.09</td>
+            <td colspan="4" class="et42">0.675</td>
+            <td colspan="3" class="et42">10.293</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
   // 转换工具 https://www.lingdaima.com/table/
 </script>
-<style scoped>
-  table {
-    border-top: 1px solid #333;
-    border-left: 1px solid #333;
-    border-spacing: 0;
-    background-color: #ddd;
+<style lang="less" scoped>
+  @import url('/@/design/vent/color.less');
+
+  .sheet-bg {
     width: 100%;
-    color: #000;
-    margin: 0 auto;
+    height: 92%;
+    background-image: url(/@/assets/images/vent/sheet-bg.png);
+    background-size: 98% 98%;
+    background-repeat: no-repeat;
+    background-position: center;
+    position: relative;
+    padding: 50px 0;
   }
-  table td {
-    border-bottom: 1px solid #333;
-    border-right: 1px solid #333;
-    font-size: 13px;
-    padding: 5px;
+  .sheet-bg-inner {
+    margin: 0 auto;
+    height: 100%;
+    overflow-y: auto;
   }
-  .et42 {
+  .sheet-content {
+    width: 1260px;
+    border-spacing: 0;
+    color: #fff;
+    margin: 0 auto;
     text-align: center;
   }
-  .et5 {
-    text-align: left;
-  }
-  .et6 {
-    text-align: left;
+  .bg0 {
+    width: 100%;
+    height: 73px;
+    font-size: 20px;
+    background-image: url(/@/assets/images/vent/sheet-header.png);
+    background-size: 100% 73px;
+    background-repeat: no-repeat;
+    border: none;
   }
-  .et22 {
-    text-align: center;
+  .bg1 {
+    background-image: linear-gradient(to bottom, #04698c, #04698c00);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    color: #31b9ef;
   }
-  .et29 {
-    text-align: center;
+  .bg2 {
+    width: 100%;
+    height: 93px;
+    font-size: 20px;
+    background-image: url(/@/assets/images/vent/sheet-header.png);
+    background-size: 100% 73px;
+    background-repeat: no-repeat;
+    background-position: bottom;
+    border: none;
+    padding-top: 20px;
   }
-  /* .font0 {
-  } */
-  .bg0 {
-    background-color: #333;
-    color: #fff;
+  table td {
+    border: 1px solid @vent-gas-tab-border;
+    font-size: 13px;
+    padding: 5px;
   }
 </style>

src/views/vent/monitorManager/deviceMonitor/staticSheets/ventilateSheet.vue

@@ -1,274 +1,295 @@
 <template>
-  <div class="h-92% overflow-auto mt-10px mb-10px">
-    <table style="width: 740pt">
-      <colgroup>
-        <col width="16" style="width: 9.75pt" span="28" />
-        <col width="31" style="width: 18.9pt" />
-        <col width="16" style="width: 9.75pt" span="23" />
-      </colgroup>
-      <tbody>
-        <tr height="30">
-          <td colspan="52" class="et29 bg0">主要通风机参数</td>
-        </tr>
-        <tr height="30">
-          <td colspan="10" class="et3">地点</td>
-          <td colspan="11" class="et3">型号</td>
-          <td colspan="8" class="et3">电机功率</td>
-          <td colspan="7" class="et3">最大风量</td>
-          <td colspan="8" class="et3">实际风量</td>
-          <td colspan="8" class="et3">负压（Pa）</td>
-        </tr>
-        <tr height="30">
-          <td colspan="10" class="et22">明安木独</td>
-          <td colspan="11" class="et22">FBCDZ-10-NO.36</td>
-          <td colspan="8" class="et22">2×800</td>
-          <td colspan="7" class="et22">23400</td>
-          <td colspan="8" class="et22">18857</td>
-          <td colspan="8" class="et22">2280</td>
-        </tr>
-        <tr height="30">
-          <td colspan="10" class="et22">松定霍洛</td>
-          <td colspan="11" class="et22">FBCDZ-10-NO.34</td>
-          <td colspan="8" class="et22">2×560</td>
-          <td colspan="7" class="et22">18000</td>
-          <td colspan="8" class="et22">12867</td>
-          <td colspan="8" class="et22">1500</td>
-        </tr>
-        <tr height="30">
-          <td colspan="52" rowspan="2" class="et3"
-            >主要通风机型号含义：F(风机）B（防爆）C（抽出式）D（对旋）Z（主要通风机）10(电机的转速,指10级电机,590转/min）No36（指36号风机,36代表扇叶直径3米6）</td
-          >
-        </tr>
-        <tr height="30"> </tr>
-        <tr height="30">
-          <td colspan="10" rowspan="2" class="et21"><img src="./images/formula0.png" /></td>
-          <td colspan="4" rowspan="2" class="et22">输入功率</td>
-          <td colspan="14" rowspan="2" class="et22"><img src="./images/formula1.png" /></td>
-          <td colspan="4" rowspan="2" class="et22">输出功率</td>
-          <td colspan="10" rowspan="2" class="et21"><img src="./images/formula2.png" /></td>
-          <td colspan="10" rowspan="2" class="et22">效率分静压效率和全压效率</td>
-        </tr>
-        <tr height="30"> </tr>
-        <tr height="30">
-          <td colspan="52" class="et29 bg0">通风系统</td>
-        </tr>
-        <tr height="30">
-          <td colspan="10" class="et21">进风井</td>
-          <td colspan="6" class="et21">风量</td>
-          <td colspan="10" class="et21">回风井</td>
-          <td colspan="6" class="et21">风量</td>
-          <td colspan="9" class="et3">综采面</td>
-          <td colspan="11" class="et21">配风量</td>
-        </tr>
-        <tr height="30">
-          <td colspan="10" class="et22">辅运平硐</td>
-          <td colspan="6" class="et22">9542</td>
-          <td colspan="7" rowspan="3" class="et22">明安木独 回风立井</td>
-          <td colspan="3" rowspan="2" class>22煤</td>
-          <td colspan="6" rowspan="2" class="et22">7695</td>
-          <td colspan="9" class="et22">12201综采面</td>
-          <td colspan="11" class="et21">1036</td>
-        </tr>
-        <tr height="30">
-          <td colspan="10" class="et22">主斜井</td>
-          <td colspan="6" class="et22">3939</td>
-          <td colspan="9" class="et22">42204综放面</td>
-          <td colspan="11" class="et21">1750</td>
-        </tr>
-        <tr height="30">
-          <td colspan="10" class="et22">工业广场进风斜井</td>
-          <td colspan="6" class="et22">339</td>
-          <td colspan="3" class="et22">12煤</td>
-          <td colspan="6" class="et22">11162</td>
-          <td colspan="9" class="et22">12上302综放面</td>
-          <td colspan="11" class="et21">1788</td>
-        </tr>
-        <tr height="30">
-          <td colspan="7" rowspan="2" class="et22">松定霍洛 进风立井</td>
-          <td colspan="3" class="et22">22煤</td>
-          <td colspan="6" class="et22">7132</td>
-          <td colspan="7" rowspan="2" class="et22">松定霍洛 回风立井</td>
-          <td colspan="3" class="et22">22煤</td>
-          <td colspan="6" class="et22">2098</td>
-          <td colspan="20" rowspan="3" class>等积孔14.2；＜1困难、1-2中等、＞2容易。</td>
-        </tr>
-        <tr height="30">
-          <td colspan="3" class="et22">42煤</td>
-          <td colspan="6" class="et22">9831</td>
-          <td colspan="3" class="et22">42煤</td>
-          <td colspan="6" class="et22">10769</td>
-        </tr>
-        <tr height="30">
-          <td colspan="10" class="et22">总计</td>
-          <td colspan="6" class="et22">30783</td>
-          <td colspan="10" class="et22">总计</td>
-          <td colspan="6" class="et22">31724</td>
-        </tr>
-        <tr height="30">
-          <td colspan="13" class="et21">通风巷道米数</td>
-          <td colspan="14" class="et21">通风阻力测定数据</td>
-          <td colspan="4" rowspan="2" class="et22">自然风压</td>
-          <td colspan="11" rowspan="2" class="et22"><img src="./images/formula3.png" /></td>
-          <td colspan="10" rowspan="2" class="et22">井口两侧空气单位面积重力差</td>
-        </tr>
-        <tr height="30">
-          <td colspan="8" class="et22">12上煤</td>
-          <td colspan="5" class="et22">45260</td>
-          <td colspan="6" class="et21">检测时间</td>
-          <td colspan="8" class="et21">2021.11.19</td>
-        </tr>
-        <tr height="30">
-          <td colspan="8" class="et22">12煤</td>
-          <td colspan="5" class="et22">15414</td>
-          <td colspan="6" class="et21">检验周期</td>
-          <td colspan="8" class="et21">三年</td>
-          <td colspan="16" class="et22">风速测定</td>
-          <td colspan="9" class="et22">主扇性能测定</td>
-        </tr>
-        <tr height="30">
-          <td colspan="8" class="et22">22煤三盘区</td>
-          <td colspan="5" class="et22">14477</td>
-          <td colspan="6" class="et21">矿总风阻</td>
-          <td colspan="8" class="et21">0.015Ns2/m8</td>
-          <td colspan="4" class="et22">风表</td>
-          <td colspan="6" class="et22">测量范围</td>
-          <td colspan="6" class="et22">启动风速</td>
-          <td colspan="9" class="et21">检测时间</td>
-        </tr>
-        <tr height="31">
-          <td colspan="8" class="et22">22下煤二盘区</td>
-          <td colspan="5" class="et21">1374</td>
-          <td colspan="3" rowspan="3" class="et22">自然 风压</td>
-          <td colspan="6" rowspan="2" class="et22">明安木独 回风立井</td>
-          <td colspan="5" rowspan="2" class="et21">141.51</td>
-          <td colspan="4" rowspan="2" class="et21">低</td>
-          <td colspan="6" rowspan="2" class="et21">0.3-5m/s</td>
-          <td colspan="6" rowspan="2" class="et21">≤0.2m/s</td>
-          <td colspan="9" rowspan="2" class="et22">松定霍洛：2022.07.29 明安木独：2023.11.15</td>
-        </tr>
-        <tr height="40">
-          <td colspan="8" class="et22">22煤二盘区</td>
-          <td colspan="5" class="et22">36667</td>
-        </tr>
-        <tr height="51">
-          <td colspan="8" class="et22">22煤一盘区</td>
-          <td colspan="5" class="et22">18914</td>
-          <td colspan="6" class="et22">松定霍洛 回风立井</td>
-          <td colspan="5" class="et21">157.61</td>
-          <td colspan="4" class="et22">中</td>
-          <td colspan="6" class="et22">0.5-10m/s</td>
-          <td colspan="6" class="et22">≤0.4m/s</td>
-          <td colspan="9" class="et21">检测周期</td>
-        </tr>
-        <tr height="30">
-          <td colspan="8" class="et22">42煤二盘区</td>
-          <td colspan="5" class="et22">52309</td>
-          <td colspan="14" class="et22">等积孔</td>
-          <td colspan="4" class="et22">高</td>
-          <td colspan="6" class="et22">0.8-25m/s</td>
-          <td colspan="6" class="et22">≤0.6m/s</td>
-          <td colspan="9" class="et21">3年</td>
-        </tr>
-        <tr height="30">
-          <td colspan="8" class="et22">42煤一盘区</td>
-          <td colspan="5" class="et22">23833</td>
-          <td colspan="14" rowspan="2" class="et22"><img src="./images/formula4.png" /></td>
-          <td colspan="8" class="et21">测量方法</td>
-          <td colspan="8" class="et21">侧身法</td>
-          <td colspan="9" class="et21">测定角度</td>
-        </tr>
-        <tr height="30">
-          <td colspan="8" class="et22">全矿(含立井)</td>
-          <td colspan="5" class="et22">217284</td>
-          <td colspan="8" class="et22">校正系数</td>
-          <td colspan="8" class="et22">（s-0.4）/s</td>
-          <td colspan="9" class="et21">3个</td>
-        </tr>
-        <tr height="30">
-          <td colspan="52" class="et29 bg0">通风设施</td>
-        </tr>
-        <tr height="30">
-          <td colspan="11" class="et21">一般防火密闭设计</td>
-          <td colspan="11" class="et21">永久防火密闭设计</td>
-          <td colspan="7" class="et22">永久防火密闭</td>
-          <td colspan="5" class="et21">12</td>
-          <td colspan="18" rowspan="2" class="et22">维修三厂出厂价格</td>
-        </tr>
-        <tr height="30">
-          <td colspan="11" rowspan="5" class="et22">1米砼闭+1米黄土+0.5米砖闭+1.5米砼闭</td>
-          <td colspan="11" rowspan="5" class="et22">0.37米砖闭+0.5米砼闭+3.5米黄土+0.5米砖闭+1.5米砼闭</td>
-          <td colspan="7" class="et22">一般防火密闭</td>
-          <td colspan="5" class="et21">143</td>
-        </tr>
-        <tr height="30">
-          <td colspan="7" class="et22">临时密闭</td>
-          <td colspan="5" class="et21">468</td>
-          <td colspan="9" class="et22">竹制行人风门</td>
-          <td colspan="5" class="et21">1.2*1.6</td>
-          <td colspan="4" class="et21">7765</td>
-        </tr>
-        <tr height="30">
-          <td colspan="7" class="et22">行车风门</td>
-          <td colspan="5" class="et21">103</td>
-          <td colspan="9" rowspan="2" class="et22">竹制行车风门</td>
-          <td colspan="5" class="et21">3.3*2.7</td>
-          <td colspan="4" class="et21">17174</td>
-        </tr>
-        <tr height="30">
-          <td colspan="7" class="et22">行人风门</td>
-          <td colspan="5" class="et21">87</td>
-          <td colspan="5" class="et21">4.2*2.8</td>
-          <td colspan="4" class="et21">18612</td>
-        </tr>
-        <tr height="30">
-          <td colspan="7" class="et22">风桥</td>
-          <td colspan="5" class="et21">62</td>
-          <td colspan="9" class="et22">自动风门</td>
-          <td colspan="5" class="et21">5.0*3.0</td>
-          <td colspan="4" class="et21">1.32万</td>
-        </tr>
-      </tbody>
-    </table>
+  <div class="sheet-bg">
+    <div class="sheet-bg-inner">
+      <table class="sheet-content">
+        <colgroup>
+          <col width="16" style="width: 9.75pt" span="28" />
+          <col width="31" style="width: 18.9pt" />
+          <col width="16" style="width: 9.75pt" span="23" />
+        </colgroup>
+        <tbody>
+          <tr height="30">
+            <td colspan="52" class="et29 bg0">主要通风机参数</td>
+          </tr>
+          <tr height="30">
+            <td colspan="10" class="et3 bg1">地点</td>
+            <td colspan="11" class="et3 bg1">型号</td>
+            <td colspan="8" class="et3 bg1">电机功率</td>
+            <td colspan="7" class="et3 bg1">最大风量</td>
+            <td colspan="8" class="et3 bg1">实际风量</td>
+            <td colspan="8" class="et3 bg1">负压（Pa）</td>
+          </tr>
+          <tr height="30">
+            <td colspan="10" class="et22">明安木独</td>
+            <td colspan="11" class="et22">FBCDZ-10-NO.36</td>
+            <td colspan="8" class="et22">2×800</td>
+            <td colspan="7" class="et22">23400</td>
+            <td colspan="8" class="et22">18857</td>
+            <td colspan="8" class="et22">2280</td>
+          </tr>
+          <tr height="30">
+            <td colspan="10" class="et22">松定霍洛</td>
+            <td colspan="11" class="et22">FBCDZ-10-NO.34</td>
+            <td colspan="8" class="et22">2×560</td>
+            <td colspan="7" class="et22">18000</td>
+            <td colspan="8" class="et22">12867</td>
+            <td colspan="8" class="et22">1500</td>
+          </tr>
+          <tr height="30">
+            <td colspan="52" rowspan="2" class="et3"
+              >主要通风机型号含义：F(风机）B（防爆）C（抽出式）D（对旋）Z（主要通风机）10(电机的转速,指10级电机,590转/min）No36（指36号风机,36代表扇叶直径3米6）</td
+            >
+          </tr>
+          <tr height="30"> </tr>
+          <tr height="30">
+            <td colspan="10" rowspan="2" class="et21"><img src="./images/formula0.png" /></td>
+            <td colspan="4" rowspan="2" class="et22">输入功率</td>
+            <td colspan="14" rowspan="2" class="et22"><img src="./images/formula1.png" /></td>
+            <td colspan="4" rowspan="2" class="et22">输出功率</td>
+            <td colspan="10" rowspan="2" class="et21"><img src="./images/formula2.png" /></td>
+            <td colspan="10" rowspan="2" class="et22">效率分静压效率和全压效率</td>
+          </tr>
+          <tr height="30"> </tr>
+          <tr height="30">
+            <td colspan="52" class="et29 bg2">通风系统</td>
+          </tr>
+          <tr height="30">
+            <td colspan="10" class="et21 bg1">进风井</td>
+            <td colspan="6" class="et21 bg1">风量</td>
+            <td colspan="10" class="et21 bg1">回风井</td>
+            <td colspan="6" class="et21 bg1">风量</td>
+            <td colspan="9" class="et3 bg1">综采面</td>
+            <td colspan="11" class="et21 bg1">配风量</td>
+          </tr>
+          <tr height="30">
+            <td colspan="10" class="et22">辅运平硐</td>
+            <td colspan="6" class="et22">9542</td>
+            <td colspan="7" rowspan="3" class="et22">明安木独 回风立井</td>
+            <td colspan="3" rowspan="2" class>22煤</td>
+            <td colspan="6" rowspan="2" class="et22">7695</td>
+            <td colspan="9" class="et22">12201综采面</td>
+            <td colspan="11" class="et21">1036</td>
+          </tr>
+          <tr height="30">
+            <td colspan="10" class="et22">主斜井</td>
+            <td colspan="6" class="et22">3939</td>
+            <td colspan="9" class="et22">42204综放面</td>
+            <td colspan="11" class="et21">1750</td>
+          </tr>
+          <tr height="30">
+            <td colspan="10" class="et22">工业广场进风斜井</td>
+            <td colspan="6" class="et22">339</td>
+            <td colspan="3" class="et22">12煤</td>
+            <td colspan="6" class="et22">11162</td>
+            <td colspan="9" class="et22">12上302综放面</td>
+            <td colspan="11" class="et21">1788</td>
+          </tr>
+          <tr height="30">
+            <td colspan="7" rowspan="2" class="et22">松定霍洛 进风立井</td>
+            <td colspan="3" class="et22">22煤</td>
+            <td colspan="6" class="et22">7132</td>
+            <td colspan="7" rowspan="2" class="et22">松定霍洛 回风立井</td>
+            <td colspan="3" class="et22">22煤</td>
+            <td colspan="6" class="et22">2098</td>
+            <td colspan="20" rowspan="3" class>等积孔14.2；＜1困难、1-2中等、＞2容易。</td>
+          </tr>
+          <tr height="30">
+            <td colspan="3" class="et22">42煤</td>
+            <td colspan="6" class="et22">9831</td>
+            <td colspan="3" class="et22">42煤</td>
+            <td colspan="6" class="et22">10769</td>
+          </tr>
+          <tr height="30">
+            <td colspan="10" class="et22">总计</td>
+            <td colspan="6" class="et22">30783</td>
+            <td colspan="10" class="et22">总计</td>
+            <td colspan="6" class="et22">31724</td>
+          </tr>
+          <tr height="30">
+            <td colspan="13" class="et21 bg1">通风巷道米数</td>
+            <td colspan="14" class="et21 bg1">通风阻力测定数据</td>
+            <td colspan="4" rowspan="2" class="et22">自然风压</td>
+            <td colspan="11" rowspan="2" class="et22"><img src="./images/formula3.png" /></td>
+            <td colspan="10" rowspan="2" class="et22">井口两侧空气单位面积重力差</td>
+          </tr>
+          <tr height="30">
+            <td colspan="8" class="et22">12上煤</td>
+            <td colspan="5" class="et22">45260</td>
+            <td colspan="6" class="et21">检测时间</td>
+            <td colspan="8" class="et21">2021.11.19</td>
+          </tr>
+          <tr height="30">
+            <td colspan="8" class="et22">12煤</td>
+            <td colspan="5" class="et22">15414</td>
+            <td colspan="6" class="et21">检验周期</td>
+            <td colspan="8" class="et21">三年</td>
+            <td colspan="16" class="et22 bg1">风速测定</td>
+            <td colspan="9" class="et22 bg1">主扇性能测定</td>
+          </tr>
+          <tr height="30">
+            <td colspan="8" class="et22">22煤三盘区</td>
+            <td colspan="5" class="et22">14477</td>
+            <td colspan="6" class="et21">矿总风阻</td>
+            <td colspan="8" class="et21">0.015Ns2/m8</td>
+            <td colspan="4" class="et22">风表</td>
+            <td colspan="6" class="et22">测量范围</td>
+            <td colspan="6" class="et22">启动风速</td>
+            <td colspan="9" class="et21">检测时间</td>
+          </tr>
+          <tr height="31">
+            <td colspan="8" class="et22">22下煤二盘区</td>
+            <td colspan="5" class="et21">1374</td>
+            <td colspan="3" rowspan="3" class="et22">自然 风压</td>
+            <td colspan="6" rowspan="2" class="et22">明安木独 回风立井</td>
+            <td colspan="5" rowspan="2" class="et21">141.51</td>
+            <td colspan="4" rowspan="2" class="et21">低</td>
+            <td colspan="6" rowspan="2" class="et21">0.3-5m/s</td>
+            <td colspan="6" rowspan="2" class="et21">≤0.2m/s</td>
+            <td colspan="9" rowspan="2" class="et22">松定霍洛：2022.07.29 明安木独：2023.11.15</td>
+          </tr>
+          <tr height="40">
+            <td colspan="8" class="et22">22煤二盘区</td>
+            <td colspan="5" class="et22">36667</td>
+          </tr>
+          <tr height="51">
+            <td colspan="8" class="et22">22煤一盘区</td>
+            <td colspan="5" class="et22">18914</td>
+            <td colspan="6" class="et22">松定霍洛 回风立井</td>
+            <td colspan="5" class="et21">157.61</td>
+            <td colspan="4" class="et22">中</td>
+            <td colspan="6" class="et22">0.5-10m/s</td>
+            <td colspan="6" class="et22">≤0.4m/s</td>
+            <td colspan="9" class="et21">检测周期</td>
+          </tr>
+          <tr height="30">
+            <td colspan="8" class="et22">42煤二盘区</td>
+            <td colspan="5" class="et22">52309</td>
+            <td colspan="14" class="et22">等积孔</td>
+            <td colspan="4" class="et22">高</td>
+            <td colspan="6" class="et22">0.8-25m/s</td>
+            <td colspan="6" class="et22">≤0.6m/s</td>
+            <td colspan="9" class="et21">3年</td>
+          </tr>
+          <tr height="30">
+            <td colspan="8" class="et22">42煤一盘区</td>
+            <td colspan="5" class="et22">23833</td>
+            <td colspan="14" rowspan="2" class="et22"><img src="./images/formula4.png" /></td>
+            <td colspan="8" class="et21">测量方法</td>
+            <td colspan="8" class="et21">侧身法</td>
+            <td colspan="9" class="et21">测定角度</td>
+          </tr>
+          <tr height="30">
+            <td colspan="8" class="et22">全矿(含立井)</td>
+            <td colspan="5" class="et22">217284</td>
+            <td colspan="8" class="et22">校正系数</td>
+            <td colspan="8" class="et22">（s-0.4）/s</td>
+            <td colspan="9" class="et21">3个</td>
+          </tr>
+          <tr height="30">
+            <td colspan="52" class="et29 bg2">通风设施</td>
+          </tr>
+          <tr height="30">
+            <td colspan="11" class="et21 bg1">一般防火密闭设计</td>
+            <td colspan="11" class="et21 bg1">永久防火密闭设计</td>
+            <td colspan="7" class="et22 bg1">永久防火密闭</td>
+            <td colspan="5" class="et21 bg1">12</td>
+            <td colspan="18" rowspan="2" class="et22 bg1">维修三厂出厂价格</td>
+          </tr>
+          <tr height="30">
+            <td colspan="11" rowspan="5" class="et22">1米砼闭+1米黄土+0.5米砖闭+1.5米砼闭</td>
+            <td colspan="11" rowspan="5" class="et22">0.37米砖闭+0.5米砼闭+3.5米黄土+0.5米砖闭+1.5米砼闭</td>
+            <td colspan="7" class="et22">一般防火密闭</td>
+            <td colspan="5" class="et21">143</td>
+          </tr>
+          <tr height="30">
+            <td colspan="7" class="et22">临时密闭</td>
+            <td colspan="5" class="et21">468</td>
+            <td colspan="9" class="et22">竹制行人风门</td>
+            <td colspan="5" class="et21">1.2*1.6</td>
+            <td colspan="4" class="et21">7765</td>
+          </tr>
+          <tr height="30">
+            <td colspan="7" class="et22">行车风门</td>
+            <td colspan="5" class="et21">103</td>
+            <td colspan="9" rowspan="2" class="et22">竹制行车风门</td>
+            <td colspan="5" class="et21">3.3*2.7</td>
+            <td colspan="4" class="et21">17174</td>
+          </tr>
+          <tr height="30">
+            <td colspan="7" class="et22">行人风门</td>
+            <td colspan="5" class="et21">87</td>
+            <td colspan="5" class="et21">4.2*2.8</td>
+            <td colspan="4" class="et21">18612</td>
+          </tr>
+          <tr height="30">
+            <td colspan="7" class="et22">风桥</td>
+            <td colspan="5" class="et21">62</td>
+            <td colspan="9" class="et22">自动风门</td>
+            <td colspan="5" class="et21">5.0*3.0</td>
+            <td colspan="4" class="et21">1.32万</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
   // 转换工具 https://www.lingdaima.com/table/
 </script>
-<style scoped>
-  table {
-    border-top: 1px solid #333;
-    border-left: 1px solid #333;
-    border-spacing: 0;
-    background-color: #ddd;
+<style lang="less" scoped>
+  @import url('/@/design/vent/color.less');
+
+  .sheet-bg {
     width: 100%;
-    color: #000;
-    margin: 0 auto;
+    height: 92%;
+    background-image: url(/@/assets/images/vent/sheet-bg.png);
+    background-size: 98% 98%;
+    background-repeat: no-repeat;
+    background-position: center;
+    position: relative;
+    padding: 50px 0;
   }
-  table td {
-    border-bottom: 1px solid #333;
-    border-right: 1px solid #333;
-    font-size: 13px;
-    padding: 5px;
+  .sheet-bg-inner {
+    margin: 0 auto;
+    height: 100%;
+    overflow-y: auto;
   }
-  .et42 {
+  .sheet-content {
+    width: 1260px;
+    border-spacing: 0;
+    color: #fff;
+    margin: 0 auto;
     text-align: center;
   }
-  .et5 {
-    text-align: left;
-  }
-  .et6 {
-    text-align: left;
+  .bg0 {
+    width: 100%;
+    height: 73px;
+    font-size: 20px;
+    background-image: url(/@/assets/images/vent/sheet-header.png);
+    background-size: 100% 73px;
+    background-repeat: no-repeat;
+    border: none;
   }
-  .et22 {
-    text-align: center;
+  .bg1 {
+    background-image: linear-gradient(to bottom, #04698c, #04698c00);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    color: #31b9ef;
   }
-  .et29 {
-    text-align: center;
+  .bg2 {
+    width: 100%;
+    height: 93px;
+    font-size: 20px;
+    background-image: url(/@/assets/images/vent/sheet-header.png);
+    background-size: 100% 73px;
+    background-repeat: no-repeat;
+    background-position: bottom;
+    border: none;
+    padding-top: 20px;
   }
-  /* .font0 {
-  } */
-  .bg0 {
-    background-color: #333;
-    color: #fff;
+  table td {
+    border: 1px solid @vent-gas-tab-border;
+    font-size: 13px;
+    padding: 5px;
   }
 </style>

src/views/vent/performance/comment/CADModal.vue

@@ -35,9 +35,11 @@
   import { onMounted } from 'vue';
   import CADViewer from '/@/views/vent/performance/fileDetail/commen/CADViewer.vue';
   import { useGlobSetting } from '/@/hooks/setting';
-  import { MOCK_LOGIN_URL_QUERY, SKIP_SSO_URL_QUERY } from '/@/router/constant';
+  import { useAutoLogin } from '/@/hooks/vent/useAutoLogin';
+  import { MOCK_LOGIN_UESRNAME } from '/@/store/constant';
 
   const { sysOrgCode } = useGlobSetting();
+  const { getUrl } = useAutoLogin();
   // 不是布尔台的使用 mxcad 模式，是布尔台的使用 iframe 模式以避免“法律风险”
   const mxcadmode = ref(sysOrgCode !== 'sdmtjtbetmk');
 
@@ -60,7 +62,13 @@
       // 当以 iframe 模式运行时，origin 在生产模式下需要指向本项目公司端所部署的地址
       const origin = import.meta.env.PROD ? 'http://10.248.235.101:8092' : window.location.origin;
       // const origin = import.meta.env.DEV ? 'http://182.92.126.35:8092' : window.location.origin;
-      iframesrc.value = `${origin}/fileManager/cad-viewer?${SKIP_SSO_URL_QUERY.key}=${SKIP_SSO_URL_QUERY.val}&${MOCK_LOGIN_URL_QUERY.key}=${MOCK_LOGIN_URL_QUERY.val}&id=${record.id}&filename=${record.fileName}`;
+      iframesrc.value = getUrl(`${origin}/fileManager/cad-viewer`, {
+        // [SKIP_SSO_URL_QUERY.key]: SKIP_SSO_URL_QUERY.val,
+        id: record.id,
+        filename: record.fileName,
+        workNo: MOCK_LOGIN_UESRNAME,
+      });
+      // iframesrc.value = `${origin}/fileManager/cad-viewer?${SKIP_SSO_URL_QUERY.key}=${SKIP_SSO_URL_QUERY.val}&${MOCK_LOGIN_URL_QUERY.key}=${MOCK_LOGIN_URL_QUERY.val}&id=${record.id}&filename=${record.fileName}`;
     }
   });