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

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

@@ -63,12 +63,13 @@ export function getMonitorComponent() {
       FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal.bd.vue'));
   }
   const BundleModal = defineAsyncComponent(() => import('./modal/bundle.modal.vue'));
+  const FiremonNormalModal = defineAsyncComponent(() => import('./modal/firemonNormal.modal.vue'));
   const DustModal = defineAsyncComponent(() => import('./modal/dust.modal.vue'));
   const BallvalveModal = defineAsyncComponent(() => import('./modal/ballvalve.modal.vue'));
   const AtomizingModal = defineAsyncComponent(() => import('./modal/atomizing.modal.vue'));
   const GaspatrolModal = defineAsyncComponent(() => import('./modal/gaspatrol.modal.vue'));
 
-  return { FiberModal, BundleModal, DustModal, BallvalveModal, AtomizingModal, GaspatrolModal };
+  return { FiberModal, FiremonNormalModal, BundleModal, DustModal, BallvalveModal, AtomizingModal, GaspatrolModal };
 }
 
 export const chartsColumnList = [
@@ -342,6 +343,7 @@ export const haveDetailArr = [
   'safetymonitor',
   'nitrogen',
   'atomizing',
+  'firemon_normal',
 ];
 
 export const locationFormConfig = {

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

@@ -1,28 +1,33 @@
 <template>
-  <div class="scene-box" >
+  <div class="scene-box">
     <!-- <div class="top-header">智能通风管理系统</div> -->
-    <div class="select-node" :class="{ 'node-select-show': !treeShow, 'node-select-hide': treeShow, }"
-      @click="showTree('treeShow', true)">
+    <div class="select-node" :class="{ 'node-select-show': !treeShow, 'node-select-hide': treeShow }" @click="showTree('treeShow', true)">
       <SvgIcon class="is-expansion-icon put-away-icon" size="38" name="expansion" />
       <span class="title">{{ treeNodeTitle }}</span>
     </div>
-    <div class="device-select" :class="{ 'device-select-show': treeShow, 'device-select-hide': !treeShow, }">
-      <SvgIcon class="is-expansion-icon expansion-icon" size="28" name="put-away"
-        @click="showTree('treeShow', false)" />
+    <div class="device-select" :class="{ 'device-select-show': treeShow, 'device-select-hide': !treeShow }">
+      <SvgIcon class="is-expansion-icon expansion-icon" size="28" name="put-away" @click="showTree('treeShow', false)" />
       <div class="device-select-box">
-        <a-tree :show-line="true" :tree-data="treeData" v-model:selectedKeys="selectedKeys" :autoExpandParent="true"
-          v-model:expandedKeys="expandedKeys" @select="onSelect">
+        <a-tree
+          :show-line="true"
+          :tree-data="treeData"
+          v-model:selectedKeys="selectedKeys"
+          :autoExpandParent="true"
+          v-model:expandedKeys="expandedKeys"
+          @select="onSelect"
+        >
         </a-tree>
       </div>
     </div>
-    <div class="location-icon"
-      :class="{ 'location-btn-show': !locationSettingShow, 'location-btn-hide': locationSettingShow, }"
-      @click="showTree('location', true)">
+    <div
+      class="location-icon"
+      :class="{ 'location-btn-show': !locationSettingShow, 'location-btn-hide': locationSettingShow }"
+      @click="showTree('location', true)"
+    >
       <SvgIcon size="18" name="put-away" />
       <span class="location-text">定位图标显示</span>
     </div>
-    <div class="location-select"
-      :class="{ 'location-select-show': locationSettingShow, 'location-select-hide': !locationSettingShow, }">
+    <div class="location-select" :class="{ 'location-select-show': locationSettingShow, 'location-select-hide': !locationSettingShow }">
       <div class="location-select-box">
         <div class="location-top-title" @click="showTree('location', false)">
           <SvgIcon class="is-expansion-icon location-expansion-icon" size="28" name="expansion" />
@@ -46,24 +51,33 @@
         </div>
       </div>
     </div>
-    <div  class="tabs-box bottom-tabs-box" :class="{'table-hide': !tableShow, 'table-show': tableShow }" style="height:290px;" @mousedown="setDivHeight($event, 230, scroll, 0)" id="monitorBox">
+    <div
+      class="tabs-box bottom-tabs-box"
+      :class="{ 'table-hide': !tableShow, 'table-show': tableShow }"
+      style="height: 290px"
+      @mousedown="setDivHeight($event, 230, scroll, 0)"
+      id="monitorBox"
+    >
       <div :style="`padding: 5px; height: ${scroll.y + 100}px`">
         <div class="to-small">
           <div class="to-home" @click="toHome"></div>
-          <FullscreenOutlined v-if="!tableShow" class="table-show-icon" @click="toHide"/>
+          <FullscreenOutlined v-if="!tableShow" class="table-show-icon" @click="toHide" />
         </div>
         <div class="device-button-group" v-if="deviceList.length > 0">
           <!-- 关联设备 -->
-          <div class="device-button" :class="{ 'device-active': deviceActive == device.deviceType }"
-            v-for="(device, index) in deviceList" :key="index" @click="monitorChange(index)">{{ device.deviceName }}
+          <div
+            class="device-button"
+            :class="{ 'device-active': deviceActive == device.deviceType }"
+            v-for="(device, index) in deviceList"
+            :key="index"
+            @click="monitorChange(index)"
+            >{{ device.deviceName }}
           </div>
           <!-- 场景详情进入 -->
-          <div v-if="haveSysDetailArr.find((item) => deviceType.startsWith(item))" class="enter-detail"
-            @click.stop="goDetail()">
+          <div v-if="haveSysDetailArr.find((item) => deviceType.startsWith(item))" class="enter-detail" @click.stop="goDetail()">
             <send-outlined />
             {{ treeNodeTitle }}详情
           </div>
-          
         </div>
         <div v-if="deviceType == 'gaspatrol'">
           <div class="device-button-group">
@@ -74,72 +88,104 @@
           </div>
         </div>
         <div class="table-hide-icon" @click="toHide">
-          <FullscreenExitOutlined style="font-size: 18px;"/>  
+          <FullscreenExitOutlined style="font-size: 18px" />
         </div>
         <!-- 是人员定位表单代码，由于放在tab中，表格对已知刷新，导致表单数据也在刷寻，造成输入一半的中文时会清空输入框的内容，导致的输入不上数据 -->
-        <div v-if="deviceType.startsWith('location')" class="location-form" style="position: absolute; z-index: 9999; top: 50px;">
+        <div v-if="deviceType.startsWith('location')" class="location-form" style="position: absolute; z-index: 9999; top: 50px">
           <div class="location-form-item">
             <span class="location-form-label">人员名称:</span>
-            <Input style="width: 200px;" v-model:value="locationForm.strname" />
+            <Input style="width: 200px" v-model:value="locationForm.strname" />
           </div>
           <div class="location-form-item">
             <span class="location-form-label">所属部门:</span>
-            <MTreeSelect style="width: 200px;" v-model:value="locationForm.department" placeholder="请选择所属部门" api="/ventanaly-device/getDepartmentInfo" :virtual="false" :isGetPopupContainer="false"/>
+            <MTreeSelect
+              style="width: 200px"
+              v-model:value="locationForm.department"
+              placeholder="请选择所属部门"
+              api="/ventanaly-device/getDepartmentInfo"
+              :virtual="false"
+              :isGetPopupContainer="false"
+            />
           </div>
           <div class="location-form-item">
             <span class="location-form-label">分站名称:</span>
-            <Input style="width: 200px;" v-model:value="locationForm.stationname" />
+            <Input style="width: 200px" v-model:value="locationForm.stationname" />
           </div>
         </div>
         <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange" id="tabsBox">
           <a-tab-pane key="1" tab="实时监测">
-            <template
-              v-if="(deviceType.startsWith('fanlocal') || deviceType.startsWith('fanmain')) && activeKey == '1'">
-              <GroupMonitorTable ref="MonitorDataTable" :dataSource="dataSource" :columnsType="`${deviceType}_monitor`"
-                :scroll="scroll" :isAction="true" :isShowSelect="false">
+            <template v-if="(deviceType.startsWith('fanlocal') || deviceType.startsWith('fanmain')) && activeKey == '1'">
+              <GroupMonitorTable
+                ref="MonitorDataTable"
+                :dataSource="dataSource"
+                :columnsType="`${deviceType}_monitor`"
+                :scroll="scroll"
+                :isAction="true"
+                :isShowSelect="false"
+              >
                 <template #action="{ record }">
-                  <TableAction :actions="haveDetailArr.find((item) => deviceType.startsWith(item)) ? [
-                    {
-                      label: '详情',
-                      onClick: goDetail.bind(null, record),
-                    },
-                    {
-                      label: '定位',
-                      onClick: goLocation.bind(null, record),
-                    },
-                  ] : [
-                    {
-                      label: '定位',
-                      onClick: goLocation.bind(null, record),
-                    },
-                  ]" />
+                  <TableAction
+                    :actions="
+                      haveDetailArr.find((item) => deviceType.startsWith(item))
+                        ? [
+                            {
+                              label: '详情',
+                              onClick: goDetail.bind(null, record),
+                            },
+                            {
+                              label: '定位',
+                              onClick: goLocation.bind(null, record),
+                            },
+                          ]
+                        : [
+                            {
+                              label: '定位',
+                              onClick: goLocation.bind(null, record),
+                            },
+                          ]
+                    "
+                  />
                 </template>
               </GroupMonitorTable>
             </template>
             <template v-else-if="deviceType == 'majorpath' && activeKey == '1'">
-              <a-table :columns="majorColumns" :data-source="dataSource" bordered :scroll="{ y: scroll.y - 30 }"
-                :pagination="false"></a-table>
+              <a-table :columns="majorColumns" :data-source="dataSource" bordered :scroll="{ y: scroll.y - 30 }" :pagination="false"></a-table>
             </template>
             <template v-else-if="deviceType.startsWith('safetymonitor') && activeKey == '1'">
-              <MonitorTable ref="monitorTable" :columnsType="`${deviceType}_monitor`" :deviceType="deviceType"
-                :dataSource="dataSource" design-scope="device_monitor" :isShowActionColumn="true" :isShowSelect="false"
-                title="设备监测" :form-config="formConfig" :scroll="{ y: scroll.y - 110 }">
+              <MonitorTable
+                ref="monitorTable"
+                :columnsType="`${deviceType}_monitor`"
+                :deviceType="deviceType"
+                :dataSource="dataSource"
+                design-scope="device_monitor"
+                :isShowActionColumn="true"
+                :isShowSelect="false"
+                title="设备监测"
+                :form-config="formConfig"
+                :scroll="{ y: scroll.y - 110 }"
+              >
                 <template #action="{ record }">
-                  <TableAction :actions="haveDetailArr.find((item) => deviceType.startsWith(item)) ? [
-                    {
-                      label: '详情',
-                      onClick: goDetail.bind(null, record),
-                    },
-                    {
-                      label: '定位',
-                      onClick: goLocation.bind(null, record),
-                    },
-                  ] : [
-                    {
-                      label: '定位',
-                      onClick: goLocation.bind(null, record),
-                    },
-                  ]" />
+                  <TableAction
+                    :actions="
+                      haveDetailArr.find((item) => deviceType.startsWith(item))
+                        ? [
+                            {
+                              label: '详情',
+                              onClick: goDetail.bind(null, record),
+                            },
+                            {
+                              label: '定位',
+                              onClick: goLocation.bind(null, record),
+                            },
+                          ]
+                        : [
+                            {
+                              label: '定位',
+                              onClick: goLocation.bind(null, record),
+                            },
+                          ]
+                    "
+                  />
                 </template>
                 <template #filterCell="{ column, record }">
                   <div v-if="!record.devicename && column.dataIndex === 'devicename'">-</div>
@@ -150,99 +196,145 @@
                   <div v-if="!record.dataTypeName && column.dataIndex === 'dataTypeName'">-</div>
                   <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
                     record.netStatus == '0' ? '断开' : '连接'
-                    }}</a-tag>
+                  }}</a-tag>
                 </template>
               </MonitorTable>
             </template>
             <template v-else-if="deviceType.startsWith('location') && activeKey == '1'">
-              <MonitorTable ref="monitorTable" :columnsType="`${deviceType}_monitor`" :deviceType="deviceType"
-                :dataSource="dataSource" design-scope="device_monitor" :isShowActionColumn="true" :isShowSelect="false"
-                title="设备监测" :scroll="{ y: scroll.y - 110 }" style="margin-top: 60px;">
+              <MonitorTable
+                ref="monitorTable"
+                :columnsType="`${deviceType}_monitor`"
+                :deviceType="deviceType"
+                :dataSource="dataSource"
+                design-scope="device_monitor"
+                :isShowActionColumn="true"
+                :isShowSelect="false"
+                title="设备监测"
+                :scroll="{ y: scroll.y - 110 }"
+                style="margin-top: 60px"
+              >
                 <template #action="{ record }">
-                  <TableAction :actions="[
-                    {
-                      label: '定位',
-                      onClick: goLocation.bind(null, record),
-                    },
-                  ]" />
+                  <TableAction
+                    :actions="[
+                      {
+                        label: '定位',
+                        onClick: goLocation.bind(null, record),
+                      },
+                    ]"
+                  />
                 </template>
               </MonitorTable>
             </template>
             <template v-else-if="deviceType.startsWith('vehicle') && activeKey == '1'">
-              <MonitorTable ref="monitorTable" :columnsType="`${deviceType}_monitor`" :deviceType="deviceType"
-                :dataSource="dataSource" design-scope="device_monitor" :isShowActionColumn="true" :isShowSelect="false"
-                title="设备监测" :form-config="vehicleFormConfig" :scroll="{ y: scroll.y - 110 }">
+              <MonitorTable
+                ref="monitorTable"
+                :columnsType="`${deviceType}_monitor`"
+                :deviceType="deviceType"
+                :dataSource="dataSource"
+                design-scope="device_monitor"
+                :isShowActionColumn="true"
+                :isShowSelect="false"
+                title="设备监测"
+                :form-config="vehicleFormConfig"
+                :scroll="{ y: scroll.y - 110 }"
+              >
                 <template #action="{ record }">
-                  <TableAction :actions="[
-                    {
-                      label: '定位',
-                      onClick: goLocation.bind(null, record),
-                    },
-                  ]" />
+                  <TableAction
+                    :actions="[
+                      {
+                        label: '定位',
+                        onClick: goLocation.bind(null, record),
+                      },
+                    ]"
+                  />
                 </template>
               </MonitorTable>
             </template>
             <template v-else>
               <!-- 工作面echarts图标 -->
-              <BarAndLine v-if="activeKey == '1' && deviceType == 'surface_history'" class="echarts-line"
-                xAxisPropType="time" :dataSource="surfaceEchartsData" height="300px"
-                :chartsColumns="surfaceChartsColumns" :option="echatsOption" chartsType="listMonitor" />
-              <MonitorTable v-else-if="activeKey == '1'" ref="monitorTable" :columnsType="`${deviceType}_monitor`"
-                :dataSource="dataSource" design-scope="device_monitor" :isShowActionColumn="true" :isShowSelect="false"
-                title="设备监测" :scroll="{ y: scroll.y - 30 }">
+              <BarAndLine
+                v-if="activeKey == '1' && deviceType == 'surface_history'"
+                class="echarts-line"
+                xAxisPropType="time"
+                :dataSource="surfaceEchartsData"
+                height="300px"
+                :chartsColumns="surfaceChartsColumns"
+                :option="echatsOption"
+                chartsType="listMonitor"
+              />
+              <MonitorTable
+                v-else-if="activeKey == '1'"
+                ref="monitorTable"
+                :columnsType="`${deviceType}_monitor`"
+                :dataSource="dataSource"
+                design-scope="device_monitor"
+                :isShowActionColumn="true"
+                :isShowSelect="false"
+                title="设备监测"
+                :scroll="{ y: scroll.y - 30 }"
+              >
                 <template #action="{ record }">
-                  <TableAction :actions="haveDetailArr.find((item) => deviceType.startsWith(item)) ? [
-                    {
-                      label: '详情',
-                      onClick: goDetail.bind(null, record),
-                    },
-                    {
-                      label: '定位',
-                      onClick: goLocation.bind(null, record),
-                    },
-                  ] : [
-                    {
-                      label: '定位',
-                      onClick: goLocation.bind(null, record),
-                    },
-                  ]" />
-
+                  <TableAction
+                    :actions="
+                      haveDetailArr.find((item) => deviceType.startsWith(item))
+                        ? [
+                            {
+                              label: '详情',
+                              onClick: goDetail.bind(null, record),
+                            },
+                            {
+                              label: '定位',
+                              onClick: goLocation.bind(null, record),
+                            },
+                          ]
+                        : [
+                            {
+                              label: '定位',
+                              onClick: goLocation.bind(null, record),
+                            },
+                          ]
+                    "
+                  />
                 </template>
                 <template #filterCell="{ column, record }">
                   <template v-if="deviceType.startsWith('gate')">
                     <template v-if="record.frontGateOpenCtrl == 1 || record.frontGateOpenCtrl === true">
-                      <a-tag
-                        v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0"
-                        color="red">正在打开</a-tag>
+                      <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0" color="red"
+                        >正在打开</a-tag
+                      >
                       <a-tag v-else-if="column.dataIndex === 'frontGateOpen'" color="processing">打开</a-tag>
                     </template>
                     <template v-else-if="record.frontGateOpenCtrl == 0 || record.frontGateOpenCtrl === false">
-                      <a-tag
-                        v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0"
-                        color="red">正在关闭</a-tag>
+                      <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0" color="red"
+                        >正在关闭</a-tag
+                      >
                       <a-tag
                         v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 1"
-                        color="default">关闭</a-tag>
+                        color="default"
+                        >关闭</a-tag
+                      >
                       <a-tag
                         v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 1 && record.frontGateClose == 0"
-                        color="default">打开</a-tag>
+                        color="default"
+                        >打开</a-tag
+                      >
                     </template>
                     <template v-if="record.rearGateOpenCtrl == 1 || record.rearGateOpenCtrl === true">
-                      <a-tag
-                        v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0"
-                        color="red">正在打开</a-tag>
+                      <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0" color="red"
+                        >正在打开</a-tag
+                      >
                       <a-tag v-else-if="column.dataIndex === 'rearGateOpen'" color="processing">打开</a-tag>
                     </template>
                     <template v-else-if="record.rearGateOpenCtrl == 0 || record.rearGateOpenCtrl === false">
-                      <a-tag
-                        v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0"
-                        color="red">正在关闭</a-tag>
-                      <a-tag
-                        v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 1"
-                        color="default">关闭</a-tag>
-                      <a-tag
-                        v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 1 && record.rearGateClose == 0"
-                        color="default">打开</a-tag>
+                      <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0" color="red"
+                        >正在关闭</a-tag
+                      >
+                      <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 1" color="default"
+                        >关闭</a-tag
+                      >
+                      <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 1 && record.rearGateClose == 0" color="default"
+                        >打开</a-tag
+                      >
                     </template>
                     <template v-if="column.dataIndex === 'doorUse'">
                       <span v-if="record.doorUse == 1" color="default">行车风门</span>
@@ -251,15 +343,13 @@
                     </template>
                   </template>
                   <template v-else-if="deviceType.startsWith('windrect')">
-                    <a-tag v-if="column.dataIndex === 'sign'"
-                      :color="record.sign == 0 ? '#95CF65' : record.sign == 1 ? '#4590EA' : '#9876AA'"> {{
-                        record.sign == 0 ? '高位' : record.sign == 1 ? '中位' : '低位'
-                      }}</a-tag>
+                    <a-tag v-if="column.dataIndex === 'sign'" :color="record.sign == 0 ? '#95CF65' : record.sign == 1 ? '#4590EA' : '#9876AA'">
+                      {{ record.sign == 0 ? '高位' : record.sign == 1 ? '中位' : '低位' }}</a-tag
+                    >
                     <template v-if="record && column && column.dataIndex === 'isRun' && record.isRun">
-                      <a-tag v-if="record.isRun == -2 || record.isRun == -1"
-                        :color="record.isRun == -2 ? '#95CF65' : '#ED5700'">{{
-                          record.isRun == -2 ? '空闲' : '等待'
-                        }}</a-tag>
+                      <a-tag v-if="record.isRun == -2 || record.isRun == -1" :color="record.isRun == -2 ? '#95CF65' : '#ED5700'">{{
+                        record.isRun == -2 ? '空闲' : '等待'
+                      }}</a-tag>
                       <a-tag v-else-if="record.isRun == 100" color="#4693FF">完成</a-tag>
                       <Progress v-else :percent="Number(record.isRun)" size="small" status="active" />
                     </template>
@@ -273,15 +363,12 @@
                     <div v-if="!record.dataTypeName && column.dataIndex === 'dataTypeName'">-</div>
                   </template>
                   <template v-else-if="deviceType.startsWith('atomizing')">
-                    <a-tag
-                        v-if="column.dataIndex === 'stateConn' && record.stateConn == '1'" color="green">连接</a-tag>
-                    <a-tag
-                        v-if="column.dataIndex === 'stateConn' && record.stateConn == '0'" color="red">断开</a-tag>
+                    <a-tag v-if="column.dataIndex === 'stateConn' && record.stateConn == '1'" color="green">连接</a-tag>
+                    <a-tag v-if="column.dataIndex === 'stateConn' && record.stateConn == '0'" color="red">断开</a-tag>
                   </template>
-                  <a-tag v-if="column.dataIndex === 'warnFlag'"
-                    :color="record.warnFlag == 0 ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'"> {{
-                      record.warnFlag == 0 ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测'
-                    }}</a-tag>
+                  <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'">
+                    {{ record.warnFlag == 0 ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测' }}</a-tag
+                  >
                   <template v-else-if="column.dataIndex === 'warnLevel'">
                     <a-tag v-if="record.warnLevel == '101'" color="green">低风险</a-tag>
                     <a-tag v-else-if="record.warnLevel == '102'" color="#FF5812">一般风险</a-tag>
@@ -299,1339 +386,1382 @@
               </MonitorTable>
             </template>
           </a-tab-pane>
-          <a-tab-pane key="2" tab="历史数据" v-if="!(noHistoryArr()).find((item) => deviceType.startsWith(item))">
+          <a-tab-pane key="2" tab="历史数据" v-if="!noHistoryArr().find((item) => deviceType.startsWith(item))">
             <div class="tab-item">
-              <HistoryTable ref="historyTable" v-if="activeKey == '2'" :sysId="systemID" :columns-type="`${deviceType}`"
-                :device-type="deviceType" designScope="device-history" :scroll="scroll" />
+              <HistoryTable
+                ref="historyTable"
+                v-if="activeKey == '2'"
+                :sysId="systemID"
+                :columns-type="`${deviceType}`"
+                :device-type="deviceType"
+                designScope="device-history"
+                :scroll="scroll"
+              />
             </div>
           </a-tab-pane>
           <a-tab-pane key="3" tab="报警历史" v-if="!noWarningArr.find((item) => deviceType.startsWith(item))">
             <div class="tab-item">
-              <AlarmHistoryTable ref="alarmHistoryTable" v-if="activeKey == '3'" :sysId="systemID" columns-type="alarm"
+              <AlarmHistoryTable
+                ref="alarmHistoryTable"
+                v-if="activeKey == '3'"
+                :sysId="systemID"
+                columns-type="alarm"
                 :device-type="deviceType"
                 :device-list-api="getDeviceList.bind(null, { devicekind: deviceType, sysId: systemID, pageSize: 10000 })"
-                :scroll="scroll" designScope="alarm-history" />
+                :scroll="scroll"
+                designScope="alarm-history"
+              />
             </div>
           </a-tab-pane>
           <a-tab-pane key="4" tab="操作历史" v-if="haveHandlerArr.find((item) => deviceType.startsWith(item))">
             <div class="tab-item">
-              <HandlerHistoryTable ref="handlerHistoryTable" v-if="activeKey == '4'" :sysId="systemID"
-                columns-type="operator_history" :device-type="deviceType"
+              <HandlerHistoryTable
+                ref="handlerHistoryTable"
+                v-if="activeKey == '4'"
+                :sysId="systemID"
+                columns-type="operator_history"
+                :device-type="deviceType"
                 :device-list-api="getDeviceList.bind(null, { devicekind: deviceType, sysId: systemID })"
-                :scroll="scroll" designScope="operator-history" />
+                :scroll="scroll"
+                designScope="operator-history"
+              />
             </div>
           </a-tab-pane>
         </a-tabs>
       </div>
     </div>
-    <mainPath v-if="deviceType == 'majorpath'" :dataSource="majorPathEchartsData"
-      style="width: 300px; height: 300px; position: absolute; left: 250px; top: 40px;" />
-    <component v-if="modalVisible" :is="currentModal" v-model:visible="modalVisible" :dataSource="dataSource"
-      :activeID="activeID" />
+    <mainPath
+      v-if="deviceType == 'majorpath'"
+      :dataSource="majorPathEchartsData"
+      style="width: 300px; height: 300px; position: absolute; left: 250px; top: 40px"
+    />
+    <component v-if="modalVisible" :is="currentModal" v-model:visible="modalVisible" :dataSource="dataSource" :activeID="activeID" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, ComponentOptions, shallowRef, reactive, defineProps, watch } from 'vue'
-import { SendOutlined, FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue';
-import { list, getDeviceList, getDeviceTypeList, devPosition, getDepartmentInfo,getExportUrl } from './device.api'
-import AlarmHistoryTable from '../../../comment/AlarmHistoryTable.vue';
-import HistoryTable from '../../../comment/HistoryTable.vue';
-import HandlerHistoryTable from '../../../comment/HandlerHistoryTable.vue';
-import MonitorTable from '../../../comment/MonitorTable.vue';
-import GroupMonitorTable from '../../../comment/GroupMonitorTable.vue';
-import { TreeProps, message, Progress, Input, Select } from 'ant-design-vue';
-import { TableAction } from '/@/components/Table';
-import { SvgIcon } from '/@/components/Icon';
-import { getActions } from '/@/qiankun/state';
-import { useRouter } from 'vue-router';
-import { setDivHeight } from '/@/utils/event';
-import { majorColumns, haveSysDetailArr, haveDetailArr, haveHandlerArr, noWarningArr, surfaceChartsColumns, noHistoryArr, getMonitorComponent, vehicleFormConfig } from './device.data'
-import mainPath from './modal/mainPath.vue'
-import { formConfig } from '../../../safetyMonitor/safety.data'
-import { getDictItemsByCode } from '/@/utils/dict';
-import BarAndLine from '/@/components/chart/BarAndLine.vue';
-import MTreeSelect from '/@/components/Form/src/jeecg/components/MTreeSelect.vue';
-// import ApiSelect from '/@/components/Form/src/components/ApiSelect.vue';
-import { nextTick } from 'vue';
-import { useMethods } from '/@/hooks/system/useMethods';
-import { useGo } from '/@/hooks/web/usePage';
-import { useGlobSetting } from '/@/hooks/setting';
-
-const glob = useGlobSetting();
-// import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
-
-const { FiberModal, BundleModal, DustModal, BallvalveModal, AtomizingModal, GaspatrolModal } = getMonitorComponent()
-type DeviceType = { deviceType: string, deviceName: string, datalist: any[] };
-
-const props = defineProps({
-  pageData: {
-    type: Object,
-    default: () => { }
-  }
-})
-const { handleExportXls } = useMethods();
-const go = useGo()
-const echatsOption = {
-  grid: {
-    top: '35',
-    left: '30',
-    right: '45',
-    bottom: '25',
-    containLabel: true
-  },
-  toolbox: {
-    feature: {}
-  },
-}
-const router = useRouter()
-
-const actions = getActions();
-// actions.setGlobalState({ pageObj: { pageType: 'home' } });
-const locationForm = reactive({
-  strname:'',
-  department: '',
-  stationname: ''
-})
-
-const safetymonitorForm = reactive({
-  dataTypeName:'',
-  strinstallpos: '',
-})
-
-const monitorTable = ref()
-const historyTable = ref()
-const alarmHistoryTable = ref()
-const handlerHistoryTable = ref()
-
-// const routerParam = ref('home') // 默认进来时首页
-const isRefresh = ref(true)
-// 模态框
-const currentModal = shallowRef<Nullable<ComponentOptions>>(null); //模态框
-const modalVisible = ref<Boolean>(false); // 模态框是否可见
-
-// const drawerHeight = ref(240) // 监测框最小高度
-const treeShow = ref(true) //是否显示树形菜单
-const tableShow = ref(true) //是否显示树形菜单
-const locationSettingShow = ref(false) //是否显示树形菜单
-const treeNodeTitle = ref('') // 选中的树形标题
-
-const locationList = ref([]) //巷道定位图标显示列表
-const deviceList = ref<DeviceType[]>([]) //关联设备列表
-const deviceActive = ref('')
-const activeKey = ref('1'); // tab key
-const dataSource = shallowRef([]) // 实时监测数据
-const majorPathEchartsData = ref({}) // 关键路线echarts数据
-const surfaceEchartsData = ref<any[]>() // 工作面历史记录，echarts数据
-const activeID = ref('') // 打开详情modal时监测的设备id
-const deviceType = ref('') // 监测设备类型
-const systemType = ref('')
-const systemID = ref('') // 系统监测时，系统id
-const selectedKeys = ref<string[]>([]);
-const expandedKeys = ref<string[]>([]);
-const scroll = reactive({
-  y: 180
-})
-const treeData = ref<TreeProps['treeData']>([]);
-let departmentInfo: Null | Object = null
-let startMonitorTimer = 0
-
-//树形菜单选择事件
-const onSelect: TreeProps['onSelect'] = (keys, e) => {
-  deviceType.value = ''
-  systemID.value = ''
-  deviceList.value = []
-  const title = e.node.title; // 在
-  if (e.node.parent && (e.node.parent.node.type.toString()).startsWith('sys')) {
-    systemType.value = e.node.parent.node.type
-    if(deviceType.value != e.node.parent.node.type)deviceType.value = e.node.parent.node.type
-    systemID.value = e.node.type
-    // 传递工作面id信息,用于定位
-    go(`/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=${deviceType.value}&deviceid=${systemID.value}`)
-  } else {
-    systemType.value = e.node.type
-    if(deviceType.value != e.node.type)deviceType.value = e.node.type
-    go(`/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=${deviceType.value}&deviceid=`)
-  }
-  clearTimeout(timer)
-  timer = undefined
-  if (startMonitorTimer) {
-    clearTimeout(startMonitorTimer)
-  }
-  dataSource.value = []
-  startMonitorTimer = setTimeout(() => {
-    expandedKeys.value = keys
-    selectedKeys.value = keys
-    treeNodeTitle.value = e.node.title
-    activeKey.value = '1'
-    timer = null
-    if (e.node.children?.length < 1) {
-      getMonitor(true)
-    }
-  }, 1000)
-};
-
-function tabChange(activeKeyVal) {
-  activeKey.value = activeKeyVal;
-};
-
-function showTree(flag, value) {
-  if (flag == 'treeShow') treeShow.value = value
-  if (flag == 'location') locationSettingShow.value = value
-}
-
-async function getDeviceType(sysType?) {
-  if (treeData.value?.length > 0) return
-  const result = await getDeviceTypeList({})
-  if (result.length > 0) {
-    const dataSource = <TreeProps['treeData']>[]
-    let key = '0'
-    const getData = (resultList, dataSourceList, keyVal) => {
-      resultList.forEach((item, index) => {
-        if (item.deviceType != 'sys' && item.children && item.children.length > 0) {
-          const children = getData(item.children, [], `${keyVal}-${index}`)
-          // 判断关键阻力路线
-          if (item.itemValue.startsWith(sysType) && children[0]) {
-            systemID.value = item.children[0]['itemValue']
-          }
+  import { ref, onMounted, onUnmounted, ComponentOptions, shallowRef, reactive, defineProps, watch } from 'vue';
+  import { SendOutlined, FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue';
+  import { list, getDeviceList, getDeviceTypeList, devPosition, getDepartmentInfo, getExportUrl } from './device.api';
+  import AlarmHistoryTable from '../../../comment/AlarmHistoryTable.vue';
+  import HistoryTable from '../../../comment/HistoryTable.vue';
+  import HandlerHistoryTable from '../../../comment/HandlerHistoryTable.vue';
+  import MonitorTable from '../../../comment/MonitorTable.vue';
+  import GroupMonitorTable from '../../../comment/GroupMonitorTable.vue';
+  import { TreeProps, message, Progress, Input, Select } from 'ant-design-vue';
+  import { TableAction } from '/@/components/Table';
+  import { SvgIcon } from '/@/components/Icon';
+  import { getActions } from '/@/qiankun/state';
+  import { useRouter } from 'vue-router';
+  import { setDivHeight } from '/@/utils/event';
+  import {
+    majorColumns,
+    haveSysDetailArr,
+    haveDetailArr,
+    haveHandlerArr,
+    noWarningArr,
+    surfaceChartsColumns,
+    noHistoryArr,
+    getMonitorComponent,
+    vehicleFormConfig,
+  } from './device.data';
+  import mainPath from './modal/mainPath.vue';
+  import { formConfig } from '../../../safetyMonitor/safety.data';
+  import { getDictItemsByCode } from '/@/utils/dict';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import MTreeSelect from '/@/components/Form/src/jeecg/components/MTreeSelect.vue';
+  // import ApiSelect from '/@/components/Form/src/components/ApiSelect.vue';
+  import { nextTick } from 'vue';
+  import { useMethods } from '/@/hooks/system/useMethods';
+  import { useGo } from '/@/hooks/web/usePage';
+  import { useGlobSetting } from '/@/hooks/setting';
+
+  const glob = useGlobSetting();
+  // import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
+
+  const { FiberModal, BundleModal, DustModal, BallvalveModal, AtomizingModal, GaspatrolModal } = getMonitorComponent();
+  type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
+
+  const props = defineProps({
+    pageData: {
+      type: Object,
+      default: () => {},
+    },
+  });
+  const { handleExportXls } = useMethods();
+  const go = useGo();
+  const echatsOption = {
+    grid: {
+      top: '35',
+      left: '30',
+      right: '45',
+      bottom: '25',
+      containLabel: true,
+    },
+    toolbox: {
+      feature: {},
+    },
+  };
+  const router = useRouter();
+
+  const actions = getActions();
+  // actions.setGlobalState({ pageObj: { pageType: 'home' } });
+  const locationForm = reactive({
+    strname: '',
+    department: '',
+    stationname: '',
+  });
 
-          dataSourceList.push({
-            children: children,
-            title: item.itemText,
-            key: `${keyVal}-${index}`,
-            type: item.itemValue,
-            parentKey: `${keyVal}`
-          });
+  const safetymonitorForm = reactive({
+    dataTypeName: '',
+    strinstallpos: '',
+  });
 
-        } else {
-          dataSourceList.push({
-            children: [],
-            title: item.itemText,
-            key: `${keyVal}-${index}`,
-            type: item.itemValue,
-            parentKey: `${keyVal}`
-          });
-        }
-      });
-      return dataSourceList
+  const monitorTable = ref();
+  const historyTable = ref();
+  const alarmHistoryTable = ref();
+  const handlerHistoryTable = ref();
+
+  // const routerParam = ref('home') // 默认进来时首页
+  const isRefresh = ref(true);
+  // 模态框
+  const currentModal = shallowRef<Nullable<ComponentOptions>>(null); //模态框
+  const modalVisible = ref<Boolean>(false); // 模态框是否可见
+
+  // const drawerHeight = ref(240) // 监测框最小高度
+  const treeShow = ref(true); //是否显示树形菜单
+  const tableShow = ref(true); //是否显示树形菜单
+  const locationSettingShow = ref(false); //是否显示树形菜单
+  const treeNodeTitle = ref(''); // 选中的树形标题
+
+  const locationList = ref([]); //巷道定位图标显示列表
+  const deviceList = ref<DeviceType[]>([]); //关联设备列表
+  const deviceActive = ref('');
+  const activeKey = ref('1'); // tab key
+  const dataSource = shallowRef([]); // 实时监测数据
+  const majorPathEchartsData = ref({}); // 关键路线echarts数据
+  const surfaceEchartsData = ref<any[]>(); // 工作面历史记录，echarts数据
+  const activeID = ref(''); // 打开详情modal时监测的设备id
+  const deviceType = ref(''); // 监测设备类型
+  const systemType = ref('');
+  const systemID = ref(''); // 系统监测时，系统id
+  const selectedKeys = ref<string[]>([]);
+  const expandedKeys = ref<string[]>([]);
+  const scroll = reactive({
+    y: 180,
+  });
+  const treeData = ref<TreeProps['treeData']>([]);
+  let departmentInfo: Null | Object = null;
+  let startMonitorTimer = 0;
+
+  //树形菜单选择事件
+  const onSelect: TreeProps['onSelect'] = (keys, e) => {
+    deviceType.value = '';
+    systemID.value = '';
+    deviceList.value = [];
+    const title = e.node.title; // 在
+    if (e.node.parent && e.node.parent.node.type.toString().startsWith('sys')) {
+      systemType.value = e.node.parent.node.type;
+      if (deviceType.value != e.node.parent.node.type) deviceType.value = e.node.parent.node.type;
+      systemID.value = e.node.type;
+      // 传递工作面id信息,用于定位
+      go(`/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=${deviceType.value}&deviceid=${systemID.value}`);
+    } else {
+      systemType.value = e.node.type;
+      if (deviceType.value != e.node.type) deviceType.value = e.node.type;
+      go(`/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=${deviceType.value}&deviceid=`);
+    }
+    clearTimeout(timer);
+    timer = undefined;
+    if (startMonitorTimer) {
+      clearTimeout(startMonitorTimer);
     }
-    treeData.value = getData(result, dataSource, key)
+    dataSource.value = [];
+    startMonitorTimer = setTimeout(() => {
+      expandedKeys.value = keys;
+      selectedKeys.value = keys;
+      treeNodeTitle.value = e.node.title;
+      activeKey.value = '1';
+      timer = null;
+      if (e.node.children?.length < 1) {
+        getMonitor(true);
+      }
+    }, 1000);
+  };
+
+  function tabChange(activeKeyVal) {
+    activeKey.value = activeKeyVal;
   }
-}
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = undefined;
-function getMonitor(flag?) {
-  if (deviceType.value) {
-    if (timer) timer = null
-    if (Object.prototype.toString.call(timer) === '[object Null]') {
-      timer = setTimeout(async () => {
-        await getDataSource()
-        if (timer) {
-          getMonitor();
-        }
-      }, flag ? 0 : 1000);
+
+  function showTree(flag, value) {
+    if (flag == 'treeShow') treeShow.value = value;
+    if (flag == 'location') locationSettingShow.value = value;
+  }
+
+  async function getDeviceType(sysType?) {
+    if (treeData.value?.length > 0) return;
+    const result = await getDeviceTypeList({});
+    if (result.length > 0) {
+      const dataSource = <TreeProps['treeData']>[];
+      let key = '0';
+      const getData = (resultList, dataSourceList, keyVal) => {
+        resultList.forEach((item, index) => {
+          if (item.deviceType != 'sys' && item.children && item.children.length > 0) {
+            const children = getData(item.children, [], `${keyVal}-${index}`);
+            // 判断关键阻力路线
+            if (item.itemValue.startsWith(sysType) && children[0]) {
+              systemID.value = item.children[0]['itemValue'];
+            }
+
+            dataSourceList.push({
+              children: children,
+              title: item.itemText,
+              key: `${keyVal}-${index}`,
+              type: item.itemValue,
+              parentKey: `${keyVal}`,
+            });
+          } else {
+            dataSourceList.push({
+              children: [],
+              title: item.itemText,
+              key: `${keyVal}-${index}`,
+              type: item.itemValue,
+              parentKey: `${keyVal}`,
+            });
+          }
+        });
+        return dataSourceList;
+      };
+      treeData.value = getData(result, dataSource, key);
     }
   }
-};
-
-async function getDataSource() {
-  if (deviceType.value && deviceType.value.startsWith('sys') && systemID.value) {
-    const res = await list({ devicetype: 'sys', systemID: systemID.value });
-    const result = res.msgTxt;
-    const deviceArr = <DeviceType[]>[]
-    result.forEach(item => {
-      const data = item['datalist'].filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      })
-      if (item.type != 'sys') {
-        if (item.type === 'majorpath') {
-          deviceArr.unshift({ deviceType: item.type, deviceName: item['typeName'], datalist: item['datalist'][0]['paths'] })
-          majorPathEchartsData.value = item['datalist'][0]
-        } else if (item.type.startsWith('surface_history')) {
-          surfaceEchartsData.value = item['datalist'][0]
-          deviceArr.unshift({ deviceType: item.type, deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'], datalist: data })
-        } else {
-          deviceArr.unshift({ deviceType: item.type, deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'], datalist: data })
-        }
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = undefined;
+  function getMonitor(flag?) {
+    if (deviceType.value) {
+      if (timer) timer = null;
+      if (Object.prototype.toString.call(timer) === '[object Null]') {
+        timer = setTimeout(
+          async () => {
+            await getDataSource();
+            if (timer) {
+              getMonitor();
+            }
+          },
+          flag ? 0 : 1000
+        );
       }
-    })
-
-    deviceList.value = deviceArr
-    if (deviceArr.length > 0) {
-      // if (deviceArr[1]) {
-      //   deviceActive.value = deviceArr[1].deviceType
-      //   monitorChange(1)
-      // } else {
-      //   deviceActive.value = deviceArr[0].deviceType
-      //   monitorChange(0)
-      // }
-      deviceActive.value = deviceArr[0].deviceType
-      monitorChange(0)
     }
-  } else {
-    let res = null
-    if (systemID.value) {
-      res = await list({ devicetype: 'sys', types: deviceType.value, systemID: systemID.value })
-      if (res && res.msgTxt) {
-        const result = res.msgTxt;
-        result.forEach(item => {
-          const data = item['datalist'].filter((data: any) => {
-            const readData = data.readData;
-            return Object.assign(data, readData);
-          })
-          if (item.type != 'sys') {
-            if (item.type.startsWith('majorpath') && item.type == deviceType.value) {
-              dataSource.value = item['datalist'][0]['paths']
-              majorPathEchartsData.value = item['datalist'][0]
-              return
-            } else if (item.type == deviceType.value) {
-              if (item.type == 'surface_history') { // 工作面图标数据
-                surfaceEchartsData.value = item['datalist'][0]
-              } else {
-                dataSource.value = data
-                console.log('关联设备数据--------------->', data)
-              }
-              return
-            }
+  }
+
+  async function getDataSource() {
+    if (deviceType.value && deviceType.value.startsWith('sys') && systemID.value) {
+      const res = await list({ devicetype: 'sys', systemID: systemID.value });
+      const result = res.msgTxt;
+      const deviceArr = <DeviceType[]>[];
+      result.forEach((item) => {
+        const data = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        });
+        if (item.type != 'sys') {
+          if (item.type === 'majorpath') {
+            deviceArr.unshift({ deviceType: item.type, deviceName: item['typeName'], datalist: item['datalist'][0]['paths'] });
+            majorPathEchartsData.value = item['datalist'][0];
+          } else if (item.type.startsWith('surface_history')) {
+            surfaceEchartsData.value = item['datalist'][0];
+            deviceArr.unshift({
+              deviceType: item.type,
+              deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
+              datalist: data,
+            });
+          } else {
+            deviceArr.unshift({
+              deviceType: item.type,
+              deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
+              datalist: data,
+            });
           }
-        })
+        }
+      });
+
+      deviceList.value = deviceArr;
+      if (deviceArr.length > 0) {
+        // if (deviceArr[1]) {
+        //   deviceActive.value = deviceArr[1].deviceType
+        //   monitorChange(1)
+        // } else {
+        //   deviceActive.value = deviceArr[0].deviceType
+        //   monitorChange(0)
+        // }
+        deviceActive.value = deviceArr[0].deviceType;
+        monitorChange(0);
       }
     } else {
-      let resultData, searchForm;
-      if(monitorTable.value){
-        const formData = monitorTable.value.getForm()
-        searchForm = formData.getFieldsValue()
-      }
-      
-      if (monitorTable.value) {
-        if (deviceType.value.startsWith('safetymonitor')) {     
-          resultData = await list({ devicetype: deviceType.value, pagetype: 'normal', filterParams: { ...searchForm } })
-        } else if (deviceType.value.startsWith('location')) {
-          if (!departmentInfo) {
-            departmentInfo = await getDepartmentInfo({})
-          }
-          let department = null
-          if (departmentInfo && locationForm && locationForm['department']) {
-            for (const key in departmentInfo) {
-              const item = departmentInfo[key]
-              if (item['id'] === locationForm['department']) {
-                department = item
-                break;
+      let res = null;
+      if (systemID.value) {
+        res = await list({ devicetype: 'sys', types: deviceType.value, systemID: systemID.value });
+        if (res && res.msgTxt) {
+          const result = res.msgTxt;
+          result.forEach((item) => {
+            const data = item['datalist'].filter((data: any) => {
+              const readData = data.readData;
+              return Object.assign(data, readData);
+            });
+            if (item.type != 'sys') {
+              if (item.type.startsWith('majorpath') && item.type == deviceType.value) {
+                dataSource.value = item['datalist'][0]['paths'];
+                majorPathEchartsData.value = item['datalist'][0];
+                return;
+              } else if (item.type == deviceType.value) {
+                if (item.type == 'surface_history') {
+                  // 工作面图标数据
+                  surfaceEchartsData.value = item['datalist'][0];
+                } else {
+                  dataSource.value = data;
+                  console.log('关联设备数据--------------->', data);
+                }
+                return;
               }
             }
-          }
-          resultData = await list({ devicetype: deviceType.value, pagetype: 'normal', filterParams: { strinstallpos: locationForm['stationname'] ? locationForm['stationname'] : '', userName: locationForm['strname'] ? locationForm['strname'] : '', userJson: department && department['name'] ? department['name'] : '' } })
-        } else if (deviceType.value.startsWith('vehicle')) {
-          resultData = await list({ devicetype: deviceType.value, pagetype: 'normal', filterParams: { strinstallpos: locationForm['stationname'] ? locationForm['stationname'] : '', vehicleName: locationForm['strname'] ? locationForm['strname'] : '' } })
-        } else {
-          resultData = await list({ devicetype: deviceType.value, pagetype: 'normal' })
+          });
         }
       } else {
-        // 非安全监控
-        resultData = await list({ devicetype: deviceType.value, pagetype: 'normal' })
-      }
-      if (resultData && resultData.msgTxt) {
-        const result = resultData.msgTxt[0];
-        if (result) {
-          const data = result['datalist'].filter((data: any) => {
-            const readData = data.readData;
-            return Object.assign(data, readData);
-          })
+        let resultData, searchForm;
+        if (monitorTable.value) {
+          const formData = monitorTable.value.getForm();
+          searchForm = formData.getFieldsValue();
+        }
+
+        if (monitorTable.value) {
           if (deviceType.value.startsWith('safetymonitor')) {
-            const resultData = <any[]>[]
-            // 如果是安全监控的数据时需要过滤常见设备数据，根据设定的常用安全监控字典去匹配
-            const dictCodes = getDictItemsByCode('safetynormal')
-            if (searchForm && !searchForm['dataTypeName'] && dictCodes && dictCodes.length) {
-              for (let i = 0; i < dictCodes.length; i++) {
-                const dict = dictCodes[i]
-                data.forEach((item) => {
-                  if (dict['value'] == item['dataTypeName']) {
-                    resultData.push(item)
-                  }
-                })
+            resultData = await list({ devicetype: deviceType.value, pagetype: 'normal', filterParams: { ...searchForm } });
+          } else if (deviceType.value.startsWith('location')) {
+            if (!departmentInfo) {
+              departmentInfo = await getDepartmentInfo({});
+            }
+            let department = null;
+            if (departmentInfo && locationForm && locationForm['department']) {
+              for (const key in departmentInfo) {
+                const item = departmentInfo[key];
+                if (item['id'] === locationForm['department']) {
+                  department = item;
+                  break;
+                }
               }
-              dataSource.value = resultData
-            } else {
-              dataSource.value = data
             }
+            resultData = await list({
+              devicetype: deviceType.value,
+              pagetype: 'normal',
+              filterParams: {
+                strinstallpos: locationForm['stationname'] ? locationForm['stationname'] : '',
+                userName: locationForm['strname'] ? locationForm['strname'] : '',
+                userJson: department && department['name'] ? department['name'] : '',
+              },
+            });
+          } else if (deviceType.value.startsWith('vehicle')) {
+            resultData = await list({
+              devicetype: deviceType.value,
+              pagetype: 'normal',
+              filterParams: {
+                strinstallpos: locationForm['stationname'] ? locationForm['stationname'] : '',
+                vehicleName: locationForm['strname'] ? locationForm['strname'] : '',
+              },
+            });
           } else {
-            let tableData: any[] = []
-            let noNetData: any[] = []
-            data.filter(el => {
-              if (el.netStatus == 1) {
-                tableData.push(el)
+            resultData = await list({ devicetype: deviceType.value, pagetype: 'normal' });
+          }
+        } else {
+          // 非安全监控
+          resultData = await list({ devicetype: deviceType.value, pagetype: 'normal' });
+        }
+        if (resultData && resultData.msgTxt) {
+          const result = resultData.msgTxt[0];
+          if (result) {
+            const data = result['datalist'].filter((data: any) => {
+              const readData = data.readData;
+              return Object.assign(data, readData);
+            });
+            if (deviceType.value.startsWith('safetymonitor')) {
+              const resultData = <any[]>[];
+              // 如果是安全监控的数据时需要过滤常见设备数据，根据设定的常用安全监控字典去匹配
+              const dictCodes = getDictItemsByCode('safetynormal');
+              if (searchForm && !searchForm['dataTypeName'] && dictCodes && dictCodes.length) {
+                for (let i = 0; i < dictCodes.length; i++) {
+                  const dict = dictCodes[i];
+                  data.forEach((item) => {
+                    if (dict['value'] == item['dataTypeName']) {
+                      resultData.push(item);
+                    }
+                  });
+                }
+                dataSource.value = resultData;
               } else {
-                noNetData.push(el)
+                dataSource.value = data;
               }
-            })
-            dataSource.value = [...tableData, ...noNetData]
+            } else {
+              let tableData: any[] = [];
+              let noNetData: any[] = [];
+              data.filter((el) => {
+                if (el.netStatus == 1) {
+                  tableData.push(el);
+                } else {
+                  noNetData.push(el);
+                }
+              });
+              dataSource.value = [...tableData, ...noNetData];
+            }
+          } else {
+            dataSource.value = [];
           }
         } else {
-          dataSource.value = []
+          dataSource.value = [];
         }
-      } else {
-        dataSource.value = []
       }
     }
   }
-}
-
-function goLocation(record) {
-  actions.setGlobalState({ locationId: record.deviceID, locationObj: null, pageObj: null });
-}
-
-function goDetail(record?) {
-  if (record) {
-    activeID.value = record.deviceID
-    if (deviceType.value.startsWith('fiber')) {
-      currentModal.value = FiberModal
-      modalVisible.value = true;
-    } else if (deviceType.value.startsWith('dusting')) {
-      currentModal.value = DustModal
-      modalVisible.value = true;
-    } else if (deviceType.value.startsWith('bundletube')) {
-      currentModal.value = BundleModal
-      // currentModal.value = BallvalveModal
-      modalVisible.value = true;
-    } else if (deviceType.value.startsWith('ballvalve')) {
-      currentModal.value = BallvalveModal
-      modalVisible.value = true;
-    } else if (deviceType.value.startsWith('atomizing')) {
-      currentModal.value = AtomizingModal
-      modalVisible.value = true;
-    } else if (deviceType.value.startsWith('gaspatrol')) {
-      currentModal.value = GaspatrolModal
-      modalVisible.value = true;
-    } else if (deviceType.value.indexOf("gate") != -1) {
-      const newPage = router.resolve({ path: '/monitorChannel/monitor-gate', query: { id: activeID.value, deviceType: deviceType.value } })
-      window.open(newPage.href, '_blank')
-    } else if (deviceType.value.indexOf("window") != -1) {
-      const newPage = router.resolve({ path: '/monitorChannel/monitor-window', query: { id: activeID.value, deviceType: deviceType.value  } })
-      window.open(newPage.href, '_blank')
-    } else if (deviceType.value.indexOf("windrect") != -1) {
-      const newPage = router.resolve({ path: '/monitorChannel/monitor-windrect', query: { id: activeID.value, deviceType: deviceType.value  } })
-      window.open(newPage.href, '_blank')
-    } else if (deviceType.value.indexOf("fanmain") != -1) {
-      const newPage = router.resolve({ path: '/monitorChannel/monitor-fanmain', query: { id: activeID.value, deviceType: deviceType.value  } })
-      window.open(newPage.href, '_blank')
-    } else if (deviceType.value.indexOf("fanlocal") != -1) {
-      const newPage = router.resolve({ path: '/monitorChannel/monitor-fanlocal', query: { id: activeID.value, deviceType: deviceType.value } })
-      window.open(newPage.href, '_blank')
-    } else if (deviceType.value.indexOf("pulping") != -1) {
-      const newPage = router.resolve({ path: '/grout-home', query: { id: activeID.value } })
-      window.open(newPage.href, '_blank')
-    } else if (deviceType.value.indexOf("pressurefan") != -1) {
-      const newPage = router.resolve({ path: '/nitrogen/home', query: { id: activeID.value } })
-      window.open(newPage.href, '_blank')
-    } else if (deviceType.value.indexOf("chamber") != -1) {
-      const newPage = router.resolve({ path: '/chamber-home', query: { id: activeID.value } })
-      window.open(newPage.href, '_blank')
-    } else if (deviceType.value.indexOf("safetymonitor") != -1) {
-      const newPage = router.resolve({ path: '/monitorChannel/device-monitor/safetymonitor', query: { id: activeID.value } })
-      window.open(newPage.href, '_blank')
-    } else if (deviceType.value.indexOf("pump") != -1) {
-      const newPage = router.resolve({ path: '/monitorChannel/gasPump-home', query: { id: activeID.value } })
-      window.open(newPage.href, '_blank')
-    } else if (systemType.value.indexOf("nitrogen") != -1) {
-      const newPage = router.resolve({ path: '/nitrogen-home', query: { id: systemID.value } })
-      window.open(newPage.href, '_blank')
-    } else {
-      message.info('待开发。。。')
-    }
-  } else {
-    if (systemType.value.indexOf("sys_dongshi") != -1) {
-      const newPage = router.resolve({ path: '/chamber-home', query: { id: systemID.value } })
-      window.open(newPage.href, '_blank')
-    } else if (systemType.value.indexOf("sys_obfurage") != -1) {
-      const newPage = router.resolve({ path: '/monitorChannel/obfurage-home', query: { id: systemID.value } })
-      window.open(newPage.href, '_blank')
-    } else if (systemType.value.indexOf("sys_surface_caimei") != -1) {
-      const newPage = router.resolve({ path: '/monitorChannel/wokerFace-home', query: { id: systemID.value } })
-      window.open(newPage.href, '_blank')
-    } else if (systemType.value.indexOf("sys_surface_juejin") != -1) {
-      const newPage = router.resolve({ path: '/monitorChannel/tunFace-home', query: { id: systemID.value } })
-      window.open(newPage.href, '_blank')
-    } else if (systemType.value.indexOf("sys_maintunnel_leather") != -1) {
-      const newPage = router.resolve({ path: '/monitorChannel/beltTun-home', query: { id: systemID.value } })
-      window.open(newPage.href, '_blank')
-    } else if (systemType.value.indexOf("sys_surface_junya") != -1) {
-      const newPage = router.resolve({ path: '/monitorChannel/balancePress-home', query: { id: systemID.value } })
-      window.open(newPage.href, '_blank')
-    } else if (systemType.value.indexOf("sys_nitrogen") != -1) {
-      const newPage = router.resolve({ path: '/nitrogen-home', query: { id: systemID.value } })
-      window.open(newPage.href, '_blank')
-    } else if (deviceType.value.indexOf("forcFan") != -1) {
-      const newPage = router.resolve({ path: '/forcFan/home', query: { id: activeID.value } })
-      window.open(newPage.href, '_blank')
+
+  function goLocation(record) {
+    actions.setGlobalState({ locationId: record.deviceID, locationObj: null, pageObj: null });
+  }
+
+  function goDetail(record?) {
+    if (record) {
+      activeID.value = record.deviceID;
+      if (deviceType.value.startsWith('fiber')) {
+        currentModal.value = FiberModal;
+        modalVisible.value = true;
+      } else if (deviceType.value.startsWith('dusting')) {
+        currentModal.value = DustModal;
+        modalVisible.value = true;
+      } else if (deviceType.value.startsWith('bundletube')) {
+        currentModal.value = BundleModal;
+        // currentModal.value = BallvalveModal
+        modalVisible.value = true;
+      } else if (deviceType.value.startsWith('firemon_normal')) {
+        currentModal.value = BundleModal;
+        // currentModal.value = BallvalveModal
+        modalVisible.value = true;
+      } else if (deviceType.value.startsWith('ballvalve')) {
+        currentModal.value = BallvalveModal;
+        modalVisible.value = true;
+      } else if (deviceType.value.startsWith('atomizing')) {
+        currentModal.value = AtomizingModal;
+        modalVisible.value = true;
+      } else if (deviceType.value.startsWith('gaspatrol')) {
+        currentModal.value = GaspatrolModal;
+        modalVisible.value = true;
+      } else if (deviceType.value.indexOf('gate') != -1) {
+        const newPage = router.resolve({ path: '/monitorChannel/monitor-gate', query: { id: activeID.value, deviceType: deviceType.value } });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('window') != -1) {
+        const newPage = router.resolve({ path: '/monitorChannel/monitor-window', query: { id: activeID.value, deviceType: deviceType.value } });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('windrect') != -1) {
+        const newPage = router.resolve({ path: '/monitorChannel/monitor-windrect', query: { id: activeID.value, deviceType: deviceType.value } });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('fanmain') != -1) {
+        const newPage = router.resolve({ path: '/monitorChannel/monitor-fanmain', query: { id: activeID.value, deviceType: deviceType.value } });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('fanlocal') != -1) {
+        const newPage = router.resolve({ path: '/monitorChannel/monitor-fanlocal', query: { id: activeID.value, deviceType: deviceType.value } });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('pulping') != -1) {
+        const newPage = router.resolve({ path: '/grout-home', query: { id: activeID.value } });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('pressurefan') != -1) {
+        const newPage = router.resolve({ path: '/nitrogen/home', query: { id: activeID.value } });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('chamber') != -1) {
+        const newPage = router.resolve({ path: '/chamber-home', query: { id: activeID.value } });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('safetymonitor') != -1) {
+        const newPage = router.resolve({ path: '/monitorChannel/device-monitor/safetymonitor', query: { id: activeID.value } });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('pump') != -1) {
+        const newPage = router.resolve({ path: '/monitorChannel/gasPump-home', query: { id: activeID.value } });
+        window.open(newPage.href, '_blank');
+      } else if (systemType.value.indexOf('nitrogen') != -1) {
+        const newPage = router.resolve({ path: '/nitrogen-home', query: { id: systemID.value } });
+        window.open(newPage.href, '_blank');
+      } else {
+        message.info('待开发。。。');
+      }
     } else {
-      message.info('待开发。。。')
+      if (systemType.value.indexOf('sys_dongshi') != -1) {
+        const newPage = router.resolve({ path: '/chamber-home', query: { id: systemID.value } });
+        window.open(newPage.href, '_blank');
+      } else if (systemType.value.indexOf('sys_obfurage') != -1) {
+        const newPage = router.resolve({ path: '/monitorChannel/obfurage-home', query: { id: systemID.value } });
+        window.open(newPage.href, '_blank');
+      } else if (systemType.value.indexOf('sys_surface_caimei') != -1) {
+        const newPage = router.resolve({ path: '/monitorChannel/wokerFace-home', query: { id: systemID.value } });
+        window.open(newPage.href, '_blank');
+      } else if (systemType.value.indexOf('sys_surface_juejin') != -1) {
+        const newPage = router.resolve({ path: '/monitorChannel/tunFace-home', query: { id: systemID.value } });
+        window.open(newPage.href, '_blank');
+      } else if (systemType.value.indexOf('sys_maintunnel_leather') != -1) {
+        const newPage = router.resolve({ path: '/monitorChannel/beltTun-home', query: { id: systemID.value } });
+        window.open(newPage.href, '_blank');
+      } else if (systemType.value.indexOf('sys_surface_junya') != -1) {
+        const newPage = router.resolve({ path: '/monitorChannel/balancePress-home', query: { id: systemID.value } });
+        window.open(newPage.href, '_blank');
+      } else if (systemType.value.indexOf('sys_nitrogen') != -1) {
+        const newPage = router.resolve({ path: '/nitrogen-home', query: { id: systemID.value } });
+        window.open(newPage.href, '_blank');
+      } else if (deviceType.value.indexOf('forcFan') != -1) {
+        const newPage = router.resolve({ path: '/forcFan/home', query: { id: activeID.value } });
+        window.open(newPage.href, '_blank');
+      } else {
+        message.info('待开发。。。');
+      }
     }
   }
-}
-
-function exportXls() {
-  handleExportXls('瓦斯巡检记录', getExportUrl, { devicetype: deviceType.value })
-}
-
-function toHome() {
-  deviceList.value = []
-  if (timer) clearTimeout(timer)
-  timer = undefined
-  deviceType.value = ''
-  go(glob.homePath)
-}
-
-function toHide() {
-  tableShow.value = !tableShow.value;
-  document.getElementById("monitorBox").addEventListener("animationend", ()=>{
-    if(!tableShow.value){
-      document.getElementById('monitorBox').style.height = '0px';
-    }else{
-      document.getElementById('monitorBox').style.height = '290px';
-    }
-  });
-  
-}
-
-async function findTreeDataValue(obj) {
-  ;
-  const findDeviceType = (data: any[], obj, flag = true) => {
-    return data.find((item: any) => {
-      if (item.children.length > 0) {
-        findDeviceType(item.children, obj)
+
+  function exportXls() {
+    handleExportXls('瓦斯巡检记录', getExportUrl, { devicetype: deviceType.value });
+  }
+
+  function toHome() {
+    deviceList.value = [];
+    if (timer) clearTimeout(timer);
+    timer = undefined;
+    deviceType.value = '';
+    go(glob.homePath);
+  }
+
+  function toHide() {
+    tableShow.value = !tableShow.value;
+    document.getElementById('monitorBox').addEventListener('animationend', () => {
+      if (!tableShow.value) {
+        document.getElementById('monitorBox').style.height = '0px';
+      } else {
+        document.getElementById('monitorBox').style.height = '290px';
       }
-      if(obj.deviceType.startsWith('sys_')){
-        if(item.type == obj.deviceid) {
-          deviceType.value = 'sys'
-          systemID.value = obj.deviceid
-          selectedKeys.value = [item.key]
-          expandedKeys.value = [item.key]
-          treeNodeTitle.value = item.title
+    });
+  }
+
+  async function findTreeDataValue(obj) {
+    const findDeviceType = (data: any[], obj, flag = true) => {
+      return data.find((item: any) => {
+        if (item.children.length > 0) {
+          findDeviceType(item.children, obj);
         }
-      }else{
-        if(!flag){
-          if(item.type.startsWith(obj.deviceType)) {
-            deviceType.value = item.type
-            selectedKeys.value = [item.key]
-            expandedKeys.value = [item.key]
-            treeNodeTitle.value = item.title
-            return true
+        if (obj.deviceType.startsWith('sys_')) {
+          if (item.type == obj.deviceid) {
+            deviceType.value = 'sys';
+            systemID.value = obj.deviceid;
+            selectedKeys.value = [item.key];
+            expandedKeys.value = [item.key];
+            treeNodeTitle.value = item.title;
           }
-          return false
-        }else{
-          if (item.type == obj.deviceType) {
-            deviceType.value = item.type
-            selectedKeys.value = [item.key]
-            expandedKeys.value = [item.key]
-            treeNodeTitle.value = item.title
-            return true
+        } else {
+          if (!flag) {
+            if (item.type.startsWith(obj.deviceType)) {
+              deviceType.value = item.type;
+              selectedKeys.value = [item.key];
+              expandedKeys.value = [item.key];
+              treeNodeTitle.value = item.title;
+              return true;
+            }
+            return false;
+          } else {
+            if (item.type == obj.deviceType) {
+              deviceType.value = item.type;
+              selectedKeys.value = [item.key];
+              expandedKeys.value = [item.key];
+              treeNodeTitle.value = item.title;
+              return true;
+            }
+            return false;
           }
-          return false
         }
-      }
-      return false
-    })
-  }
-  const flag = findDeviceType(treeData.value, obj)
-  if(!flag){
-    findDeviceType(treeData.value, obj, false)
-  }
-  // 无类型时
-  if (!treeNodeTitle.value && treeData.value && treeData.value[0] && treeData.value[0]['children']) {
-    const defaultData = treeData.value[0]['children'][0]
-    if(deviceType.value !== defaultData.type)deviceType.value = defaultData.type
-    selectedKeys.value = [(defaultData.key as string)]
-    expandedKeys.value = [(defaultData.key as string)]
-    treeNodeTitle.value = defaultData.title
-  }
+        return false;
+      });
+    };
+    const flag = findDeviceType(treeData.value, obj);
+    if (!flag) {
+      findDeviceType(treeData.value, obj, false);
+    }
+    // 无类型时
+    if (!treeNodeTitle.value && treeData.value && treeData.value[0] && treeData.value[0]['children']) {
+      const defaultData = treeData.value[0]['children'][0];
+      if (deviceType.value !== defaultData.type) deviceType.value = defaultData.type;
+      selectedKeys.value = [defaultData.key as string];
+      expandedKeys.value = [defaultData.key as string];
+      treeNodeTitle.value = defaultData.title;
+    }
 
-  if (timer === undefined) {
-    timer = null
-    await getDataSource()
-    getMonitor(true)
-  }
-}
-
-function monitorChange(index) {
-  dataSource.value = []
-  deviceActive.value = deviceList.value[index].deviceType
-  if(deviceType.value != deviceActive.value) deviceType.value = deviceActive.value
-  if (activeKey.value == '1' && monitorTable.value) {
-    monitorTable.value.setLoading(true)
-    dataSource.value = deviceList.value[index].datalist
-  }
-  if (activeKey.value == '2' && historyTable.value) {
-    historyTable.value.setLoading(true)
-  }
-  if (activeKey.value == '3' && alarmHistoryTable.value) {
-    alarmHistoryTable.value.setLoading(true)
-  }
-  if (activeKey.value == '4' && handlerHistoryTable.value) {
-    handlerHistoryTable.value.setLoading(true)
-  }
-}
-/**
- * 设置巷道设备定位图标的显示与隐藏
- */
-function setLocation() {
-  let locationStr = ''
-  locationList.value.forEach((item: any) => {
-    if (item.Visible) {
-      locationStr = locationStr ? locationStr + ',' + item.value : item.value
+    if (timer === undefined) {
+      timer = null;
+      await getDataSource();
+      getMonitor(true);
     }
-  })
-  actions.setGlobalState({ locationId: null, locationObj: null, pageObj: null, locationPlane: locationStr });
-  setTimeout(() => {
-    message.success('设置成功')
-  }, 600)
-}
-
-watch(() => props.pageData, async (pageObj) => {
-  debugger;
-  isRefresh.value = false
-  if (!treeData.value || treeData.value?.length < 1) {
-    await getDeviceType()
   }
-  nextTick(() => {
-    isRefresh.value = true
-    findTreeDataValue(pageObj)
-  })
-},{immediate: true})
-
-onMounted(async () => {
-  const pageObj = props.pageData
-  if (!pageObj) return
-  if (pageObj.deviceid) {
-    await getDeviceType()
-    findTreeDataValue({ deviceid: pageObj.deviceid })
-  } else {
-    if (pageObj.pageType.startsWith('sys_')) {
-      await getDeviceType(pageObj.pageType)
-      findTreeDataValue({ deviceid: systemID.value })
 
-    } else {
-      await getDeviceType()
-      findTreeDataValue({ deviceType: pageObj.pageType })
+  function monitorChange(index) {
+    dataSource.value = [];
+    deviceActive.value = deviceList.value[index].deviceType;
+    if (deviceType.value != deviceActive.value) deviceType.value = deviceActive.value;
+    if (activeKey.value == '1' && monitorTable.value) {
+      monitorTable.value.setLoading(true);
+      dataSource.value = deviceList.value[index].datalist;
+    }
+    if (activeKey.value == '2' && historyTable.value) {
+      historyTable.value.setLoading(true);
+    }
+    if (activeKey.value == '3' && alarmHistoryTable.value) {
+      alarmHistoryTable.value.setLoading(true);
+    }
+    if (activeKey.value == '4' && handlerHistoryTable.value) {
+      handlerHistoryTable.value.setLoading(true);
     }
   }
-  // 定位
-  const posShowData = pageObj.locationPlane
-  if (posShowData) {
-    locationList.value = posShowData
-  } else {
-    locationList.value = await devPosition({})
+  /**
+   * 设置巷道设备定位图标的显示与隐藏
+   */
+  function setLocation() {
+    let locationStr = '';
+    locationList.value.forEach((item: any) => {
+      if (item.Visible) {
+        locationStr = locationStr ? locationStr + ',' + item.value : item.value;
+      }
+    });
+    actions.setGlobalState({ locationId: null, locationObj: null, pageObj: null, locationPlane: locationStr });
+    setTimeout(() => {
+      message.success('设置成功');
+    }, 600);
   }
-  
 
-  // safetyOption.value = await safetyDeviceList(null, { devicetype: 'safetymonitor', code: 'dataTypeName' })
-})
+  watch(
+    () => props.pageData,
+    async (pageObj) => {
+      debugger;
+      isRefresh.value = false;
+      if (!treeData.value || treeData.value?.length < 1) {
+        await getDeviceType();
+      }
+      nextTick(() => {
+        isRefresh.value = true;
+        findTreeDataValue(pageObj);
+      });
+    },
+    { immediate: true }
+  );
+
+  onMounted(async () => {
+    const pageObj = props.pageData;
+    if (!pageObj) return;
+    if (pageObj.deviceid) {
+      await getDeviceType();
+      findTreeDataValue({ deviceid: pageObj.deviceid });
+    } else {
+      if (pageObj.pageType.startsWith('sys_')) {
+        await getDeviceType(pageObj.pageType);
+        findTreeDataValue({ deviceid: systemID.value });
+      } else {
+        await getDeviceType();
+        findTreeDataValue({ deviceType: pageObj.pageType });
+      }
+    }
+    // 定位
+    const posShowData = pageObj.locationPlane;
+    if (posShowData) {
+      locationList.value = posShowData;
+    } else {
+      locationList.value = await devPosition({});
+    }
+
+    // safetyOption.value = await safetyDeviceList(null, { devicetype: 'safetymonitor', code: 'dataTypeName' })
+  });
 
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = undefined;
+  });
+</script>
 
+<style lang="less" scoped>
+  @import '/@/design/vent/modal.less';
+  @ventSpace: zxm;
 
-onUnmounted(() => {
-  if (timer) {
-    clearTimeout(timer);
+  .top-header {
+    position: fixed;
+    width: 100%;
+    height: 56px;
+    background: url('/@/assets/images/vent/home/modal-top.png');
+    text-align: center;
+    line-height: 56px;
+    font-size: 28px;
+    color: #ffffffdd;
+    font-weight: 600;
+    z-index: 1;
+    letter-spacing: 2px;
+    font-size: 30px;
   }
-  timer = undefined;
-})
 
-</script>
+  .select-node {
+    position: fixed;
+    top: 100px;
+    left: 10px;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    font-size: 22px;
 
-<style lang="less" scoped>
-@import '/@/design/vent/modal.less';
-@ventSpace: zxm;
-
-.top-header {
-  position: fixed;
-  width: 100%;
-  height: 56px;
-  background: url('/@/assets/images/vent/home/modal-top.png');
-  text-align: center;
-  line-height: 56px;
-  font-size: 28px;
-  color: #ffffffdd;
-  font-weight: 600;
-  z-index: 1;
-  letter-spacing: 2px;
-  font-size: 30px;
-}
-
-.select-node {
-  position: fixed;
-  top: 100px;
-  left: 10px;
-  color: #fff;
-  display: flex;
-  justify-content: center;
-  font-size: 22px;
-
-  .title {
-    margin-left: 10px;
+    .title {
+      margin-left: 10px;
+    }
   }
-}
 
-.expansion-icon {
-  background: url('/@/assets/images/vent/home/tree-icon-bg.png') no-repeat;
-  background-size: contain;
-  position: absolute;
-  left: 190px;
-  top: 25px;
+  .expansion-icon {
+    background: url('/@/assets/images/vent/home/tree-icon-bg.png') no-repeat;
+    background-size: contain;
+    position: absolute;
+    left: 190px;
+    top: 25px;
+
+    &:hover {
+      background: url('/@/assets/images/vent/home/tree-icon-hover-bg.png') no-repeat;
+      background-size: contain;
+    }
+  }
 
-  &:hover {
-    background: url('/@/assets/images/vent/home/tree-icon-hover-bg.png') no-repeat;
+  .device-select {
+    width: 250px;
+    height: 500px;
+    background: url('/@/assets/images/vent/home/tree-bg.png') no-repeat;
+    position: fixed;
+    top: 100px;
+    left: 10px;
     background-size: contain;
+    pointer-events: auto;
+    padding: 20px 10px 30px 10px;
   }
-}
-
-.device-select {
-  width: 250px;
-  height: 500px;
-  background: url('/@/assets/images/vent/home/tree-bg.png') no-repeat;
-  position: fixed;
-  top: 100px;
-  left: 10px;
-  background-size: contain;
-  pointer-events: auto;
-  padding: 20px 10px 30px 10px;
-
-}
-
-.is-expansion-icon {
-  padding: 5px;
-  pointer-events: auto;
-  z-index: 999;
-}
-
-.device-select-show {
-  left: 10px;
-  animation-name: treeShow;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
-
-}
-
-.device-select-hide {
-  left: -250px;
-  animation-name: treeHide;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
-}
-
-.node-select-show {
-  width: 276px;
-  height: 44px;
-  background: url('/@/assets/images/vent/home/tree-expansion-bg.png') no-repeat;
-  left: 10px;
-  animation-name: treeShow;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
-  display: flex;
-  align-items: center;
-  margin-left: 0;
-  justify-content: flex-start;
-  pointer-events: auto;
-
-  &:hover {
-    background: url('/@/assets/images/vent/home/tree-expansion-hover-bg.png') no-repeat;
+
+  .is-expansion-icon {
+    padding: 5px;
+    pointer-events: auto;
+    z-index: 999;
   }
 
-  .put-away-icon {
-    position: relative;
-    display: inline-block;
-    left: 4px;
+  .device-select-show {
+    left: 10px;
+    animation-name: treeShow;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
   }
-}
-
-.node-select-hide {
-  left: -400px;
-  animation-name: treeHide;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
-}
-
-.device-select-box {
-  width: 208px;
-  height: 450px;
-  overflow-y: auto;
-  color: #fff;
-
-  :deep(.zxm-tree) {
-    background: transparent !important;
-    color: #fff !important;
-
-    .zxm-tree-switcher {
-      background: transparent !important;
-    }
 
-    .zxm-tree-node-content-wrapper.zxm-tree-node-selected {
-      background-color: #00b1c8;
-    }
+  .device-select-hide {
+    left: -250px;
+    animation-name: treeHide;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
+  }
 
-    .zxm-tree-node-content-wrapper:hover {
-      background-color: #00b1c855;
+  .node-select-show {
+    width: 276px;
+    height: 44px;
+    background: url('/@/assets/images/vent/home/tree-expansion-bg.png') no-repeat;
+    left: 10px;
+    animation-name: treeShow;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
+    display: flex;
+    align-items: center;
+    margin-left: 0;
+    justify-content: flex-start;
+    pointer-events: auto;
+
+    &:hover {
+      background: url('/@/assets/images/vent/home/tree-expansion-hover-bg.png') no-repeat;
     }
 
-    input {
-      height: 0px !important;
+    .put-away-icon {
+      position: relative;
+      display: inline-block;
+      left: 4px;
     }
   }
 
-  &::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-    border-radius: 10px;
-    background: #ededed22;
-    height: 100px;
+  .node-select-hide {
+    left: -400px;
+    animation-name: treeHide;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
   }
 
-  &::-webkit-scrollbar-thumb {
-    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-    background: #4288A444;
-  }
-}
-
-.location-icon {
-  width: 46px;
-  height: 178px;
-  position: absolute;
-  top: 100px;
-  // right: 0;
-  background: url('/@/assets/images/vent/home/location-bg.png') no-repeat;
-  background-size: contain;
-  writing-mode: vertical-lr;
-  line-height: 46px;
-  color: #fff;
-  padding-top: 10px;
-  pointer-events: auto;
-  cursor: pointer;
-
-  &:hover {
-    background: url('/@/assets/images/vent/home/location-hover-bg.png') no-repeat;
-  }
+  .device-select-box {
+    width: 208px;
+    height: 450px;
+    overflow-y: auto;
+    color: #fff;
 
-  .location-text {
-    padding-top: 20px;
-    letter-spacing: 3px;
-    font-size: 16px;
-  }
-}
+    :deep(.zxm-tree) {
+      background: transparent !important;
+      color: #fff !important;
 
-.location-select {
-  position: fixed;
-  top: 100px;
-  // right: 240px;
-  pointer-events: auto;
+      .zxm-tree-switcher {
+        background: transparent !important;
+      }
 
-  .location-select-box {
-    width: 100%;
-    height: 100%;
-    position: relative;
+      .zxm-tree-node-content-wrapper.zxm-tree-node-selected {
+        background-color: #00b1c8;
+      }
 
-    &::before {
-      content: "";
-      position: absolute;
-      width: 230px;
-      height: 500px;
-      top: 0;
-      left: 0;
-      background: url('/@/assets/images/vent/home/tree-bg.png') no-repeat;
-      background-size: contain;
-      transform: rotateY(180deg);
-      z-index: -1;
-      // &:hover {
-      //   background: url('/@/assets/images/vent/home/tree-icon-hover-bg.png') no-repeat;
-      //   background-size: contain;
-      // }
+      .zxm-tree-node-content-wrapper:hover {
+        background-color: #00b1c855;
+      }
+
+      input {
+        height: 0px !important;
+      }
     }
 
-    .location-top-title {
-      color: #fff;
-      position: absolute;
-      width: 225px;
-      height: 68px;
-      background: url('/@/assets/images/vent/home/turn-location-top-bg.png') no-repeat;
-      background-size: contain;
-      top: 5px;
-      left: 5px;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: flex-end;
+    &::-webkit-scrollbar-track {
+      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+      border-radius: 10px;
+      background: #ededed22;
+      height: 100px;
+    }
 
-      .title {
-        font-size: 18px;
-        position: relative;
-        top: -14px;
-        right: 15px;
-      }
+    &::-webkit-scrollbar-thumb {
+      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+      background: #4288a444;
     }
+  }
 
-    .location-expansion-icon {
-      background: url('/@/assets/images/vent/home/tree-icon-cover-bg.png') no-repeat;
-      background-size: contain;
+  .location-icon {
+    width: 46px;
+    height: 178px;
+    position: absolute;
+    top: 100px;
+    // right: 0;
+    background: url('/@/assets/images/vent/home/location-bg.png') no-repeat;
+    background-size: contain;
+    writing-mode: vertical-lr;
+    line-height: 46px;
+    color: #fff;
+    padding-top: 10px;
+    pointer-events: auto;
+    cursor: pointer;
+
+    &:hover {
+      background: url('/@/assets/images/vent/home/location-hover-bg.png') no-repeat;
+    }
+
+    .location-text {
+      padding-top: 20px;
+      letter-spacing: 3px;
+      font-size: 16px;
+    }
+  }
+
+  .location-select {
+    position: fixed;
+    top: 100px;
+    // right: 240px;
+    pointer-events: auto;
+
+    .location-select-box {
+      width: 100%;
+      height: 100%;
       position: relative;
-      left: 10px;
-      top: -15px;
-      padding: 5px;
 
-      &:hover {
-        background: url('/@/assets/images/vent/home/tree-icon-cover-hover-bg.png') no-repeat;
+      &::before {
+        content: '';
+        position: absolute;
+        width: 230px;
+        height: 500px;
+        top: 0;
+        left: 0;
+        background: url('/@/assets/images/vent/home/tree-bg.png') no-repeat;
         background-size: contain;
+        transform: rotateY(180deg);
+        z-index: -1;
+        // &:hover {
+        //   background: url('/@/assets/images/vent/home/tree-icon-hover-bg.png') no-repeat;
+        //   background-size: contain;
+        // }
       }
-    }
-  }
 
-  .location-container {
-    width: 200px;
-    height: 390px;
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    top: 80px;
-    left: 18px;
-    overflow-y: auto;
+      .location-top-title {
+        color: #fff;
+        position: absolute;
+        width: 225px;
+        height: 68px;
+        background: url('/@/assets/images/vent/home/turn-location-top-bg.png') no-repeat;
+        background-size: contain;
+        top: 5px;
+        left: 5px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: flex-end;
+
+        .title {
+          font-size: 18px;
+          position: relative;
+          top: -14px;
+          right: 15px;
+        }
+      }
 
-    .location-item {
-      color: #fff;
-      line-height: 30px;
-      display: flex;
-      justify-content: space-between;
-      background-image: linear-gradient(to left, #39f5ff05, #39f5ff10);
-      margin: 3px 0;
-
-      .item-title {
-        width: 80px;
-        text-align: right;
-        color: #87f1ff;
+      .location-expansion-icon {
+        background: url('/@/assets/images/vent/home/tree-icon-cover-bg.png') no-repeat;
+        background-size: contain;
+        position: relative;
+        left: 10px;
+        top: -15px;
+        padding: 5px;
+
+        &:hover {
+          background: url('/@/assets/images/vent/home/tree-icon-cover-hover-bg.png') no-repeat;
+          background-size: contain;
+        }
       }
     }
 
-    .location-bottom-btn {
-      width: 100%;
-      color: #fff;
+    .location-container {
+      width: 200px;
+      height: 390px;
+      position: absolute;
       display: flex;
-      justify-content: flex-end;
-      margin-top: 20px;
+      flex-direction: column;
+      top: 80px;
+      left: 18px;
+      overflow-y: auto;
+
+      .location-item {
+        color: #fff;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+        background-image: linear-gradient(to left, #39f5ff05, #39f5ff10);
+        margin: 3px 0;
+
+        .item-title {
+          width: 80px;
+          text-align: right;
+          color: #87f1ff;
+        }
+      }
 
-      span {
-        display: inline-block;
+      .location-bottom-btn {
         width: 100%;
-        background: #00709955;
-        border-radius: 3px;
-        border: 1px solid rgba(174, 243, 255, 0.3);
-        text-align: center;
-        padding: 2px 0;
-        cursor: pointer;
-
-        &:hover {
-          background: #00557422;
+        color: #fff;
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 20px;
+
+        span {
+          display: inline-block;
+          width: 100%;
+          background: #00709955;
+          border-radius: 3px;
+          border: 1px solid rgba(174, 243, 255, 0.3);
+          text-align: center;
+          padding: 2px 0;
+          cursor: pointer;
+
+          &:hover {
+            background: #00557422;
+          }
         }
       }
     }
   }
-}
-
-.location-select-show {
-  right: 240px;
-  animation-name: locationShow;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
-}
-
-.location-select-hide {
-  
-  right: -2px;
-  animation-name: locationHide;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
-}
-
-.location-btn-show {
-  right: -0px;
-  animation-name: locationBtnShow;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
-}
-
-.location-btn-hide {
-  right: -240px;
-  animation-name: locationBtnHide;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
-}
-.tabs-box{
-  height: 290px;
-}
-
-.bottom-tabs-box {
-  position: relative;
-  .tabs-box {
-    width: calc(100% - 12px) !important;
-    bottom: 3px !important;
+
+  .location-select-show {
+    right: 240px;
+    animation-name: locationShow;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
   }
-  
-  .to-small {
-    position: absolute;
-    top: -65px;
-    right: 36px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    .to-home{
-      width: 60px;
-      height: 60px;
-      background: url('/@/assets/images/vent/home/tohome.png') no-repeat center;
-      background-size: auto;
-      padding: 8px;
-      &:hover {
-        background-color: rgba(79, 104, 134, 0.418);
-      }
-    }
-    .table-show-icon{
-      width: 30px;
-      height: 30px;
-      font-size: 30px;
-      color: #fff;
-      margin-left: 10px;
-    }
-    
+
+  .location-select-hide {
+    right: -2px;
+    animation-name: locationHide;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
   }
 
-  .device-button-group {
-    position: absolute;
-    top: -30px;
-    display: flex;
-    width: 100%;
+  .location-btn-show {
+    right: -0px;
+    animation-name: locationBtnShow;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
+  }
+
+  .location-btn-hide {
+    right: -240px;
+    animation-name: locationBtnHide;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
+  }
+  .tabs-box {
+    height: 290px;
+  }
+
+  .bottom-tabs-box {
+    position: relative;
+    .tabs-box {
+      width: calc(100% - 12px) !important;
+      bottom: 3px !important;
+    }
 
-    .device-button {
-      height: 26px;
-      padding: 0 20px;
-      background: linear-gradient(45deg, #04e6fb55, #0c5cab55);
-      clip-path: polygon(10px 0,
-          0 50%,
-          10px 100%,
-          100% 100%,
-          calc(100% - 10px) 50%,
-          100% 0);
+    .to-small {
+      position: absolute;
+      top: -65px;
+      right: 36px;
       display: flex;
-      justify-content: center;
       align-items: center;
-      color: #FFF;
-      position: relative;
-      cursor: pointer;
-
-      &:nth-child(1) {
-        left: calc(-6px * 1);
+      justify-content: center;
+      .to-home {
+        width: 60px;
+        height: 60px;
+        background: url('/@/assets/images/vent/home/tohome.png') no-repeat center;
+        background-size: auto;
+        padding: 8px;
+        &:hover {
+          background-color: rgba(79, 104, 134, 0.418);
+        }
       }
-
-      &:nth-child(2) {
-        left: calc(-6px * 2);
+      .table-show-icon {
+        width: 30px;
+        height: 30px;
+        font-size: 30px;
+        color: #fff;
+        margin-left: 10px;
       }
+    }
 
-      &:nth-child(3) {
-        left: calc(-6px * 3);
-      }
+    .device-button-group {
+      position: absolute;
+      top: -30px;
+      display: flex;
+      width: 100%;
 
-      &:nth-child(4) {
-        left: calc(-6px * 4);
-      }
+      .device-button {
+        height: 26px;
+        padding: 0 20px;
+        background: linear-gradient(45deg, #04e6fb55, #0c5cab55);
+        clip-path: polygon(10px 0, 0 50%, 10px 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+        position: relative;
+        cursor: pointer;
 
-      &:nth-child(5) {
-        left: calc(-6px * 5);
-      }
+        &:nth-child(1) {
+          left: calc(-6px * 1);
+        }
 
-      &:nth-child(6) {
-        left: calc(-6px * 6);
-      }
+        &:nth-child(2) {
+          left: calc(-6px * 2);
+        }
 
-      &:nth-child(7) {
-        left: calc(-6px * 7);
-      }
+        &:nth-child(3) {
+          left: calc(-6px * 3);
+        }
 
-      &:nth-child(8) {
-        left: calc(-6px * 8);
-      }
+        &:nth-child(4) {
+          left: calc(-6px * 4);
+        }
 
-      &:nth-child(9) {
-        left: calc(-6px * 9);
-      }
+        &:nth-child(5) {
+          left: calc(-6px * 5);
+        }
 
-      &:nth-child(10) {
-        left: calc(-6px * 10);
-      }
+        &:nth-child(6) {
+          left: calc(-6px * 6);
+        }
 
-      &:nth-child(11) {
-        left: calc(-6px * 11);
-      }
+        &:nth-child(7) {
+          left: calc(-6px * 7);
+        }
 
-      &:nth-child(12) {
-        left: calc(-6px * 12);
-      }
+        &:nth-child(8) {
+          left: calc(-6px * 8);
+        }
 
-      &:nth-child(13) {
-        left: calc(-6px * 13);
-      }
+        &:nth-child(9) {
+          left: calc(-6px * 9);
+        }
 
-      &:nth-child(14) {
-        left: calc(-6px * 14);
-      }
+        &:nth-child(10) {
+          left: calc(-6px * 10);
+        }
 
-      &:nth-child(15) {
-        left: calc(-6px * 15);
-      }
+        &:nth-child(11) {
+          left: calc(-6px * 11);
+        }
 
-      &:nth-child(16) {
-        left: calc(-6px * 16);
-      }
+        &:nth-child(12) {
+          left: calc(-6px * 12);
+        }
 
-      &:nth-child(17) {
-        left: calc(-6px * 17);
-      }
+        &:nth-child(13) {
+          left: calc(-6px * 13);
+        }
 
-      &:nth-child(18) {
-        left: calc(-6px * 18);
-      }
+        &:nth-child(14) {
+          left: calc(-6px * 14);
+        }
 
-      &:nth-child(19) {
-        left: calc(-6px * 19);
-      }
+        &:nth-child(15) {
+          left: calc(-6px * 15);
+        }
 
-      &:first-child {
-        clip-path: polygon(0 0,
-            10px 50%,
-            0 100%,
-            100% 100%,
-            calc(100% - 10px) 50%,
-            100% 0);
+        &:nth-child(16) {
+          left: calc(-6px * 16);
+        }
+
+        &:nth-child(17) {
+          left: calc(-6px * 17);
+        }
+
+        &:nth-child(18) {
+          left: calc(-6px * 18);
+        }
+
+        &:nth-child(19) {
+          left: calc(-6px * 19);
+        }
+
+        &:first-child {
+          clip-path: polygon(0 0, 10px 50%, 0 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
+        }
       }
 
+      .device-active {
+        background: linear-gradient(45deg, #04e6fb, #0c5cab);
+
+        &::before {
+          border-color: #0efcff;
+          box-shadow: 1px 1px 3px 1px #0efcff inset;
+        }
+      }
+    }
+    .table-hide-icon {
+      color: #fff;
+      cursor: pointer;
+      position: absolute;
+      right: 20px;
+      top: 10px;
+      z-index: 9999;
     }
 
-    .device-active {
-      background: linear-gradient(45deg, #04e6fb, #0c5cab);
+    .enter-detail {
+      color: #fff;
+      cursor: pointer;
+      position: absolute;
+      right: 20px;
+      top: 35px;
+      padding: 5px;
+      border-radius: 5px;
+      margin-left: 8px;
+      margin-right: 8px;
+      width: auto;
+      height: 33px !important;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      padding: 5px 15px 5px 15px;
+      z-index: 999;
+      cursor: pointer;
+
+      &:hover {
+        background: linear-gradient(#2cd1ff55, #1eb0ff55);
+      }
 
       &::before {
-        border-color: #0efcff;
-        box-shadow: 1px 1px 3px 1px #0efcff inset;
+        width: calc(100% - 6px);
+        height: 27px;
+        content: '';
+        position: absolute;
+        top: 3px;
+        right: 0;
+        left: 3px;
+        bottom: 0;
+        z-index: -1;
+        border-radius: inherit;
+        /*important*/
+        background: linear-gradient(#1fa6cb, #127cb5);
       }
     }
-  
   }
-  .table-hide-icon{
-    color: #fff;
-    cursor: pointer;
-    position: absolute;
-    right: 20px;
-    top: 10px;
-    z-index: 9999
+  .table-hide {
+    height: 0px;
+    animation-name: tableHide;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s;
   }
-
-  .enter-detail {
-    color: #fff;
-    cursor: pointer;
-    position: absolute;
-    right: 20px;
-    top: 35px;
-    padding: 5px;
-    border-radius: 5px;
-    margin-left: 8px;
-    margin-right: 8px;
-    width: auto;
-    height: 33px !important;
+  .table-show {
+    height: 290px;
+    animation-name: tableShow;
+    /* 持续时间 */
+    animation-duration: 1s;
+    transition: all 1s;
+  }
+  .location-form {
     display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #fff;
-    padding: 5px 15px 5px 15px;
-    z-index: 999;
-    cursor: pointer;
-
-    &:hover {
-      background: linear-gradient(#2cd1ff55, #1eb0ff55);
+    margin: 8px;
+    .location-form-item {
+      width: 400px;
+      .location-form-label {
+        width: 100px;
+        display: inline-block;
+        color: #fff;
+      }
+      input {
+        background: transparent !important;
+        color: #fff;
+        border: 1px solid #3ad8ff77 !important;
+      }
     }
-
-    &::before {
-      width: calc(100% - 6px);
-      height: 27px;
-      content: '';
-      position: absolute;
-      top: 3px;
-      right: 0;
-      left: 3px;
-      bottom: 0;
-      z-index: -1;
-      border-radius: inherit;
-      /*important*/
-      background: linear-gradient(#1fa6cb, #127cb5);
+    .zxm-select-selector {
+      width: 200px !important;
     }
   }
-}
-.table-hide{
-  height: 0px;
-  animation-name: tableHide;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s ;
-}
-.table-show{
-  height: 290px;
-  animation-name: tableShow;
-  /* 持续时间 */
-  animation-duration: 1s;
-  transition: all 1s ;
-}
-.location-form{
-  display: flex;
-  margin: 8px;
-  .location-form-item{
-    width: 400px;
-    .location-form-label{
-      width: 100px;
-      display: inline-block;
-      color: #fff;
+
+  @keyframes tableShow {
+    0% {
+      height: 0px;
+      opacity: 0;
     }
-    input{
-      background: transparent !important;
-      color: #fff;
-      border: 1px solid #3ad8ff77 !important
+
+    100% {
+      height: 290px;
+      opacity: 1;
     }
   }
-  .zxm-select-selector{
-    width: 200px !important;
-  }
-}
 
-@keyframes tableShow {
-  0% {
-    height: 0px;
-    opacity: 0;
-  }
+  @keyframes tableHide {
+    0% {
+      opacity: 1;
+    }
 
-  100% {
-    height: 290px;
-    opacity: 1;
+    100% {
+      height: 0px;
+      opacity: 0;
+    }
   }
-}
 
-@keyframes tableHide {
-  0% {
-    opacity: 1;
-  }
+  @keyframes treeShow {
+    0% {
+      left: -400px;
+      opacity: 0;
+    }
 
-  100% {
-    height: 0px ;
-    opacity: 0 ;
+    100% {
+      left: 10px;
+      opacity: 1;
+    }
   }
-}
 
-@keyframes treeShow {
-  0% {
-    left: -400px;
-    opacity: 0;
-  }
+  @keyframes treeHide {
+    0% {
+      left: 10px;
+      opacity: 1;
+    }
 
-  100% {
-    left: 10px;
-    opacity: 1;
+    100% {
+      left: -400px;
+      opacity: 0;
+    }
   }
-}
 
-@keyframes treeHide {
-  0% {
-    left: 10px;
-    opacity: 1;
-  }
+  @keyframes locationShow {
+    0% {
+      right: 0px;
+      opacity: 0;
+    }
 
-  100% {
-    left: -400px;
-    opacity: 0;
+    100% {
+      right: 240px;
+      opacity: 1;
+    }
   }
-}
 
-@keyframes locationShow {
-  0% {
-    right: 0px;
-    opacity: 0;
-  }
+  @keyframes locationHide {
+    0% {
+      right: 240px;
+      opacity: 1;
+    }
 
-  100% {
-    right: 240px;
-    opacity: 1;
+    100% {
+      right: 0;
+      opacity: 0;
+    }
   }
-}
 
-@keyframes locationHide {
-  0% {
-    right: 240px;
-    opacity: 1;
-  }
+  @keyframes locationBtnShow {
+    0% {
+      right: -240px;
+      opacity: 0;
+    }
 
-  100% {
-    right: 0;
-    opacity: 0;
+    100% {
+      right: -2px;
+      opacity: 1;
+    }
   }
-}
 
-@keyframes locationBtnShow {
-  0% {
-    right: -240px;
-    opacity: 0;
-  }
+  @keyframes locationBtnHide {
+    0% {
+      right: -2px;
+      opacity: 1;
+    }
 
-  100% {
-    right: -2px;
-    opacity: 1;
+    100% {
+      right: -240px;
+      opacity: 0;
+    }
   }
-}
 
-@keyframes locationBtnHide {
-  0% {
-    right: -2px;
-    opacity: 1;
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    // overflow: auto;
+    height: 100%;
   }
 
-  100% {
-    right: -240px;
-    opacity: 0;
+  :deep(.zxm-select-dropdown) {
+    left: 0 !important;
+    color: #000000 !important;
   }
-}
-
-:deep(.@{ventSpace}-tabs-tabpane-active) {
-  // overflow: auto;
-  height: 100%;
-}
 
-:deep(.zxm-select-dropdown) {
-  left: 0 !important;
-  color: #000000 !important;
-}
-
-:deep(.zxm-select-selector) {
-  height: 34px !important;
-  line-height: 34px !important;
-}
-
-:deep(.zxm-input) {
-  height: 32px !important;
-  line-height: 32px !important;
+  :deep(.zxm-select-selector) {
+    height: 34px !important;
+    line-height: 34px !important;
+  }
 
-  .zxm-select-selection-item {
+  :deep(.zxm-input) {
+    height: 32px !important;
     line-height: 32px !important;
+
+    .zxm-select-selection-item {
+      line-height: 32px !important;
+    }
   }
-}
-
-// :deep(.@{ventSpace}-pagination){
-//   margin-right: 20px !important;
-//   margin-top: 5px !important;
-//   display: flex;
-//   align-items: center;
-// }</style>
+
+  // :deep(.@{ventSpace}-pagination){
+  //   margin-right: 20px !important;
+  //   margin-top: 5px !important;
+  //   display: flex;
+  //   align-items: center;
+  // }
+</style>

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

@@ -0,0 +1,523 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="register"
+    :title="`束管监测详情 ${currentTime}`"
+    width="1200px"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    wrapClassName="bundle-modal"
+  >
+    <div class="fiber-modal">
+      <div class="modal-left">
+        <div
+          v-for="device in deviceList"
+          class="link-item"
+          :class="{ 'active-device-title': device.deviceID === activeDeviceID }"
+          :key="device.deviceID"
+        >
+          <span class="" @click="selectDevice(device.deviceID)">{{ device.strinstallpos }}</span>
+        </div>
+      </div>
+      <div class="modal-right">
+        <span class="base-title">实时监测参数</span>
+        <div class="right-top">
+          <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"
+                >{{ posMonitor.coValue !== undefined && posMonitor.coValue !== null ? posMonitor.coValue : '-' }} <span>ppm</span>
+              </div>
+            </div>
+          </div>
+          <div class="top-item">
+            <div class="icon">
+              <SvgIcon class="icon-style" name="o2val" style="width: 76px; height: 50px" />
+            </div>
+            <div class="item-container">
+              <div class="title">氧气</div>
+              <div class="value">{{ posMonitor.o2Value !== undefined && posMonitor.o2Value !== null ? 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" />
+            </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>
+          </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">{{ posMonitor['netStatus'] == 1 ? '连接' : '未连接' }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="right-bottom">
+          <span class="base-title"
+            >设备监测曲线&nbsp; <span style="color: red">{{ posMonitor['netStatus'] != 1 ? '(设备未连接)' : '' }}</span></span
+          >
+          <div class="echarts-box">
+            <BarAndLine
+              class="echarts-line"
+              :xAxisPropType="xAxisPropType"
+              :dataSource="historyList"
+              height="100%"
+              width="100%"
+              :chartsColumns="chartsColumns"
+              :option="echatsOption"
+              chartsType="listMonitor"
+            />
+
+            <!-- 爆炸三角形 -->
+            <!-- <div style="width: 35%; height: 100%; margin: 0px auto">
+              <blastDelta :posMonitor="posMonitor" />
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, watch, shallowRef, onMounted } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  // import blastDelta from './blastDelta.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import dayjs from 'dayjs';
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+  import { chartsColumnList } from '../device.data';
+  import { listdays, getHistoryData } from '../device.api';
+
+  export default defineComponent({
+    components: { BasicModal, BarAndLine, SvgIcon },
+    props: {
+      dataSource: { type: Array },
+      activeID: { type: String },
+    },
+    setup(props) {
+      const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
+      const modelRef = ref({});
+      const loading = ref(true);
+      const activeDeviceID = ref('');
+      const deviceList = ref<any[]>([]);
+      const historyList = ref<any[]>([]);
+      const posList = ref<any[]>([]);
+      const posMonitor = shallowRef({});
+
+      const echatsOption = {
+        grid: {
+          top: '29%',
+          left: '3',
+          right: '45',
+          bottom: '3%',
+          containLabel: true,
+        },
+        toolbox: {
+          feature: {},
+        },
+      };
+
+      const chartsColumnArr = getTableHeaderColumns('firemon_normal_chart');
+      const chartsColumns = chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumnList;
+      const xAxisPropType = ref('ttime');
+      const [register, { setModalProps, closeModal }] = useModalInner();
+
+      function handleVisibleChange(visible) {
+        if (visible) {
+          loading.value = true;
+          setModalProps({ loading: true, confirmLoading: true });
+
+          setTimeout(() => {
+            loading.value = false;
+            setModalProps({ loading: false, confirmLoading: false });
+          }, 1000);
+        }
+      }
+
+      // 选择监测
+      function selectDevice(id) {
+        loading.value = true;
+        setModalProps({ loading: true, confirmLoading: true });
+        setTimeout(() => {
+          loading.value = false;
+          activeDeviceID.value = id;
+          setModalProps({ loading: false, confirmLoading: false });
+        }, 300);
+        getListdays();
+      }
+
+      function handleOk(e) {
+        e.preventDefault();
+        closeModal();
+      }
+
+      function handleCancel(e) {
+        e.preventDefault();
+        closeModal();
+      }
+
+      //获取历史数据
+      async function getListdays() {
+        if (posMonitor.value.stationtype && posMonitor.value.stationtype != 'redis') {
+          xAxisPropType.value = 'ttime';
+          const ttime_begin = dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss');
+          const ttime_end = dayjs().format('YYYY-MM-DD HH:mm:ss');
+          const pageNo = 1;
+          const pageSize = 100;
+          const skip = 8;
+          const strtype = posMonitor.value.deviceType;
+          let res = await listdays({
+            ttime_begin,
+            ttime_end,
+            pageNo,
+            pageSize,
+            skip,
+            strtype,
+            column: 'createTime',
+            gdeviceid: activeDeviceID.value,
+          });
+          console.log(res, '束管历史数据');
+          let data = res.datalist.records;
+          if (data.length != 0) {
+            data.forEach((el) => {
+              Object.assign(el, el.readData);
+            });
+          }
+          historyList.value = data;
+        } else {
+          const params = {
+            pageNum: 1,
+            pageSize: 100,
+            startTime: dayjs(new Date().getTime() - 3 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss'),
+            endTime: dayjs(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss'),
+            deviceId: activeDeviceID.value,
+            interval: '1h',
+            isEmployee: true,
+          };
+          xAxisPropType.value = 'time';
+          const result = await getHistoryData({ ...params });
+          if (result['records'].length != 0) {
+            result['records'].forEach((el) => {
+              el.ch2val = el.C2H4;
+              el.chval = el.C2H2;
+              el.co2val = el.CO2;
+              el.coval = el.CO;
+              el.gasval = el.CH4;
+              el.o2val = el.O2;
+            });
+          }
+          historyList.value = result['records'];
+        }
+      }
+
+      watch(
+        [() => props.dataSource, () => props.activeID],
+        ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
+          // if (newActiveID != oldActiveID) {
+          //   activeDeviceID.value = newActiveID as string;
+          // }
+          activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
+          deviceList.value = newDataSource?.filter((item: any, index) => {
+            if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
+              // activeDeviceID.value = item.deviceID;
+              posMonitor.value = Object.assign(item, item.readData);
+            }
+            item.readTime = item.readTime?.substring(11);
+            return item;
+          });
+        },
+        { immediate: true }
+      );
+      onMounted(() => {
+        getListdays();
+      });
+      return {
+        register,
+        model: modelRef,
+        currentTime,
+        handleVisibleChange,
+        selectDevice,
+        handleOk,
+        handleCancel,
+        deviceList,
+        historyList,
+        activeDeviceID,
+        posMonitor,
+        echatsOption,
+        posList,
+        chartsColumns,
+        xAxisPropType,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  .bundle-modal {
+    .zxm-modal {
+      top: 30px !important;
+    }
+  }
+</style>
+
+<style lang="less" scoped>
+  .fiber-modal {
+    width: 100%;
+    height: 650px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    .modal-left {
+      width: 200px;
+      height: 100%;
+      overflow-y: auto;
+      background: #ffffff11;
+      padding: 5px;
+      border-radius: 5px;
+
+      .active-device-title {
+        color: aqua;
+      }
+
+      .link-item {
+        position: relative;
+        cursor: pointer;
+        line-height: 30px;
+        padding-left: 30px;
+
+        span:hover {
+          color: #89ffff;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          display: block;
+          width: 8px;
+          height: 8px;
+          top: 12px;
+          left: 10px;
+          transform: rotateZ(45deg) skew(10deg, 10deg);
+          background: #45d3fd;
+        }
+      }
+    }
+
+    .modal-right {
+      width: calc(100% - 220px);
+      overflow-y: auto;
+
+      .base-title {
+        line-height: 32px;
+        position: relative;
+        padding-left: 20px;
+
+        &::after {
+          content: '';
+          position: absolute;
+          display: block;
+          width: 4px;
+          height: 12px;
+          top: 4px;
+          left: 10px;
+          background: #45d3fd;
+          border-radius: 4px;
+        }
+      }
+
+      .right-top {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        margin-bottom: 10px;
+
+        .top-item {
+          width: 220px;
+          height: 100px;
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          border: 1px solid rgba(25, 237, 255, 0.4);
+          box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
+          background: rgba(0, 0, 0, 0.06666666666666667);
+          padding-top: 20px;
+          margin: 10px 0;
+
+          .icon {
+            margin-right: 10px;
+            margin-top: 5px;
+            color: #fdb146;
+          }
+
+          .item-container {
+            width: 110px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+
+            div {
+              text-align: center;
+            }
+
+            .title {
+              font-size: 18px;
+            }
+
+            .value {
+              text-shadow: 0 0 25px #00fbfe;
+              background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
+              font-style: normal;
+              background-size: cover;
+              font-family: electronicFont;
+              font-size: 30px;
+              -webkit-background-clip: text;
+              background-clip: text;
+              -webkit-text-fill-color: transparent;
+              position: relative;
+              top: -8px;
+
+              span {
+                font-family: Arial, Helvetica, sans-serif;
+                font-size: 18px;
+                color: aliceblue;
+              }
+            }
+          }
+        }
+
+        .warning-box {
+          padding-top: 0px;
+
+          .icon {
+            margin-top: 20px;
+
+            :deep(.icon-style) {
+              width: auto;
+              color: #fdb146;
+            }
+          }
+
+          .warning-value {
+            font-size: 18px;
+            color: #61ddb1;
+          }
+
+          .value1 {
+            font-size: 18px;
+            color: rgb(145, 230, 9) !important;
+          }
+
+          .value2 {
+            font-size: 18px;
+            // color: rgb(0, 242, 255) !important;
+            color: #ffff35 !important;
+          }
+
+          .value3 {
+            font-size: 18px;
+            // color: #ffff35 !important;
+            color: #ff0000 !important;
+          }
+
+          .value4 {
+            font-size: 18px;
+            color: #ffbe69 !important;
+          }
+
+          .value5 {
+            font-size: 18px;
+            color: #ff6f00 !important;
+          }
+
+          .value6 {
+            font-size: 18px;
+            color: #ff0000 !important;
+          }
+        }
+      }
+
+      .right-center {
+        margin-top: 20px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+
+        .table-box {
+          position: relative;
+          width: 500px;
+          height: 250px;
+        }
+
+        .warning-box {
+          width: calc(100% - 520px);
+
+          .warning-container {
+            width: 100%;
+            height: convert;
+            background: #009acd00;
+
+            :deep(.dv-scroll-board) {
+              .row-item {
+                height: 40px !important;
+                line-height: 40px !important;
+              }
+
+              .header-item {
+                border-top: 1px solid #91e9fe !important;
+                border-bottom: 1px solid #91e9fe !important;
+              }
+            }
+          }
+        }
+      }
+
+      .right-bottom {
+        margin-top: 20px;
+
+        .echarts-box {
+          width: 100%;
+          height: 320px;
+          position: relative;
+          display: flex;
+          justify-content: space-between;
+
+          .echarts-line {
+            width: calc(100% + 80px);
+            position: absolute;
+          }
+        }
+      }
+    }
+  }
+
+  :deep(.zxm-table-body) {
+    border: 1px solid rgba(57, 232, 255, 0.2) !important;
+
+    .zxm-table-tbody > tr > td {
+      border: none !important;
+    }
+  }
+
+  :deep(.zxm-table-cell) {
+    border-right: none !important;
+  }
+</style>

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

@@ -0,0 +1,331 @@
+<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>
+</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;
+    width: 100%;
+    color: #000;
+    margin: 0 auto;
+  }
+  table td {
+    border-bottom: 1px solid #333;
+    border-right: 1px solid #333;
+    font-size: 13px;
+    padding: 5px;
+  }
+  .et42 {
+    text-align: center;
+  }
+  .et5 {
+    text-align: left;
+  }
+  .et6 {
+    text-align: left;
+  }
+  .et22 {
+    text-align: center;
+  }
+  .et29 {
+    text-align: center;
+  }
+  /* .font0 {
+  } */
+  .bg0 {
+    background-color: #333;
+    color: #fff;
+  }
+</style>

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

@@ -0,0 +1,139 @@
+<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>
+</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;
+    width: 100%;
+    color: #000;
+    margin: 0 auto;
+  }
+  table td {
+    border-bottom: 1px solid #333;
+    border-right: 1px solid #333;
+    font-size: 13px;
+    padding: 5px;
+  }
+  .et42 {
+    text-align: center;
+  }
+  .et5 {
+    text-align: left;
+  }
+  .et6 {
+    text-align: left;
+  }
+  .et22 {
+    text-align: center;
+  }
+  .et29 {
+    text-align: center;
+  }
+  /* .font0 {
+  } */
+  .bg0 {
+    background-color: #333;
+    color: #fff;
+  }
+</style>

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

@@ -0,0 +1,178 @@
+<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>
+</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;
+    width: 100%;
+    color: #000;
+    margin: 0 auto;
+  }
+  table td {
+    border-bottom: 1px solid #333;
+    border-right: 1px solid #333;
+    font-size: 13px;
+    padding: 5px;
+  }
+  .et42 {
+    text-align: center;
+  }
+  .et5 {
+    text-align: left;
+  }
+  .et6 {
+    text-align: left;
+  }
+  .et22 {
+    text-align: center;
+  }
+  .et29 {
+    text-align: center;
+  }
+  /* .font0 {
+  } */
+  .bg0 {
+    background-color: #333;
+    color: #fff;
+  }
+</style>

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

@@ -0,0 +1,187 @@
+<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>
+</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;
+    width: 100%;
+    color: #000;
+    margin: 0 auto;
+  }
+  table td {
+    border-bottom: 1px solid #333;
+    border-right: 1px solid #333;
+    font-size: 13px;
+    padding: 5px;
+  }
+  .et42 {
+    text-align: center;
+  }
+  .et5 {
+    text-align: left;
+  }
+  .et6 {
+    text-align: left;
+  }
+  .et22 {
+    text-align: center;
+  }
+  .et29 {
+    text-align: center;
+  }
+  /* .font0 {
+  } */
+  .bg0 {
+    background-color: #333;
+    color: #fff;
+  }
+</style>

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

@@ -0,0 +1,274 @@
+<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>
+</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;
+    width: 100%;
+    color: #000;
+    margin: 0 auto;
+  }
+  table td {
+    border-bottom: 1px solid #333;
+    border-right: 1px solid #333;
+    font-size: 13px;
+    padding: 5px;
+  }
+  .et42 {
+    text-align: center;
+  }
+  .et5 {
+    text-align: left;
+  }
+  .et6 {
+    text-align: left;
+  }
+  .et22 {
+    text-align: center;
+  }
+  .et29 {
+    text-align: center;
+  }
+  /* .font0 {
+  } */
+  .bg0 {
+    background-color: #333;
+    color: #fff;
+  }
+</style>

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

@@ -0,0 +1,274 @@
+<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>
+</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;
+    width: 100%;
+    color: #000;
+    margin: 0 auto;
+  }
+  table td {
+    border-bottom: 1px solid #333;
+    border-right: 1px solid #333;
+    font-size: 13px;
+    padding: 5px;
+  }
+  .et42 {
+    text-align: center;
+  }
+  .et5 {
+    text-align: left;
+  }
+  .et6 {
+    text-align: left;
+  }
+  .et22 {
+    text-align: center;
+  }
+  .et29 {
+    text-align: center;
+  }
+  /* .font0 {
+  } */
+  .bg0 {
+    background-color: #333;
+    color: #fff;
+  }
+</style>