1

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

@@ -245,6 +245,52 @@ export const surfaceChartsColumns = [
     dataIndex: 'hui',
   },
 ];
+
+export const ballvalveColumns = [
+  {
+    title: '设备编号',
+    dataIndex: 'deviceNum',
+    width: 60,
+    align: 'center',
+  },
+  {
+    title: '温度(℃)',
+    dataIndex: 'tempRealtime',
+    align: 'center',
+    width: 60,
+  },
+  {
+    title: 'CO(ppm)',
+    dataIndex: 'CORealtime',
+    align: 'center',
+    width: 50,
+  },
+  {
+    title: '压力(Pa)',
+    dataIndex: 'PressureRealtime',
+    align: 'center',
+    width: 50,
+  },
+  {
+    title: '烟雾(%)',
+    dataIndex: 'SmokeRealtime485',
+    align: 'center',
+    width: 50,
+    customRender: () => {
+      return `正常`;
+    },
+  },
+  {
+    title: '是否报警',
+    dataIndex: 'isWarn',
+    align: 'center',
+    width: 50,
+    // customRender: () => {
+    //   return `正常`;
+    // },
+  },
+];
+
 export const noDetailArr = ['nitrogen', 'forcFan']; // 前端详情的，
 export const haveDetailArr = [
   'windrect',

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

@@ -585,6 +585,7 @@ function goDetail(record?) {
       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('bundletube')) {

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

@@ -9,13 +9,33 @@
         </div>
       </div>
       <div class="modal-right">
-        <!-- <span class="base-title">基本信息</span>
-        <div>
-          <div>
-            <span>监测区域范围：</span>
-            <span>{{ 0 }} - {{ 1 }}</span>
+        <span class="base-title">基本信息</span>
+        <div class="base-box">
+          <div class="base-item">
+            <span class="title">所属区域：</span>
+            <span class="value">采区水泵房</span>
           </div>
-        </div> -->
+          <div class="base-item">
+            <span class="title">当前区域名称：</span>
+            <span class="value">分区1</span>
+          </div>
+          <div class="base-item">
+            <span class="title">设备编号：</span>
+            <span class="value">001</span>
+          </div>
+          <div class="base-item">
+            <span class="title">监测区域范围：</span>
+            <span class="value">{{ 0 }}m - {{ 1 }}m</span>
+          </div>
+          <div class="base-item">
+            <span class="title">开启温度：</span>
+            <span class="value">{{ 60 }}℃</span>
+          </div>
+          <div class="base-item">
+            <span class="title">关闭温度：</span>
+            <span class="value">{{ 30 }}℃</span>
+          </div>
+        </div>
         <span class="base-title">实时监测参数</span>
         <div class="right-top">
           <!-- 温度 -->
@@ -57,101 +77,62 @@
           </div>
           <div class="top-item item-data">
             <div class="icon">
-              <SvgIcon class="icon-style" name="coval" style="width: 62px; height: 38px; margin-top: 10px;" />
+              <SvgIcon class="icon-style" name="temp" style="width: 62px; height: 38px; margin-top: 10px;" />
             </div>
             <div class="item-container">
-              <div class="title">温度</div>
+              <div class="title">温度监测</div>
               <div class="value">{{ (posMonitor.coval !== undefined && posMonitor.coval !== null) ? posMonitor.coval : '-'
               }} <span>ppm</span> </div>
-              <div>报警阈值：12</div>
             </div>
+            <div class="rang">报警阈值：小于-10或大于100</div>
           </div>
           <div class="top-item item-data">
             <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="title">CO监测</div>
               <div class="value">{{ (posMonitor.coval !== undefined && posMonitor.coval !== null) ? posMonitor.coval : '-'
               }} <span>ppm</span> </div>
-              <div>报警阈值：12</div>
             </div>
+            <div class="rang">报警阈值：12</div>
           </div>
           <div class="top-item item-data">
             <div class="icon">
-              <SvgIcon class="icon-style" name="co2val" style="width: 72px; height: 46px;" />
+              <SvgIcon class="icon-style" name="smoke" style="width: 72px; height: 46px;" />
             </div>
             <div class="item-container">
-              <div class="title">二氧化碳</div>
+              <div class="title">烟雾监测</div>
               <div class="value">{{ (posMonitor.co2val !== undefined && posMonitor.co2val !== null) ? posMonitor.co2val :
                 '-' }} <span>%</span></div>
             </div>
+            <div class="rang">报警阈值：12</div>
           </div>
           <div class="top-item item-data">
             <div class="icon">
-              <SvgIcon class="icon-style" name="gasval" style="width: 72px; height: 46px;" />
+              <SvgIcon class="icon-style" name="pressure" style="width: 62px; height: 38px;" />
             </div>
             <div class="item-container">
-              <div class="title">甲烷</div>
+              <div class="title">压力监测</div>
               <div class="value">{{ (posMonitor.gasval !== undefined && posMonitor.gasval !== null) ? posMonitor.gasval :
                 '-' }} <span>%</span></div>
             </div>
-          </div>
-          <div class="top-item item-data">
-            <div class="icon">
-              <SvgIcon class="icon-style" name="ch2val" style="width: 76px; height: 42px;" />
-            </div>
-            <div class="item-container">
-              <div class="title">乙烯</div>
-              <div class="value">{{ (posMonitor.ch2val !== undefined && posMonitor.ch2val !== null) ? posMonitor.ch2val :
-                '-' }} <span>ppm</span></div>
-            </div>
-          </div>
-          <div class="top-item">
-            <div class="icon">
-              <SvgIcon class="icon-style" name="chval" style="width: 76px; height: 42px;" />
-            </div>
-            <div class="item-container">
-              <div class="title">乙炔</div>
-              <div class="value">{{ (posMonitor.chval !== undefined && posMonitor.chval !== null) ? posMonitor.chval : '-'
-              }} <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.o2val !== undefined && posMonitor.o2val !== null) ? posMonitor.o2val : '-'
-              }} <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="warning-value">{{ posMonitor['warnLevel_str'] ? posMonitor['warnLevel_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 class="rang">报警阈值：12</div>
           </div>
         </div>
         <div class="right-bottom">
           <span class="base-title">设备监测曲线</span>
-          <div class="echarts-box">
+          <!-- <div class="echarts-box">
             <BarAndLine class="echarts-line" xAxisPropType="time" :dataSource="historyList" height="100%"
               :chartsColumns="chartsColumns" :option="echatsOption" chartsType="listMonitor" />
-          </div>
+          </div> -->
+          <a-table
+            size="small"
+            :columns="ballvalveColumns"
+            :data-source="[]"
+            :pagination="false"
+            :scroll="{ y: 200 }"
+          />
         </div>
       </div>
     </div>
@@ -164,6 +145,7 @@ import BarAndLine from '/@/components/chart/BarAndLine.vue';
 import { SvgIcon } from '/@/components/Icon';
 import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
 import dayjs from 'dayjs'
+import { ballvalveColumns } from '../device.data'
 
 export default defineComponent({
   components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
@@ -370,7 +352,7 @@ export default defineComponent({
 
   .modal-right {
     width: calc(100% - 220px);
-
+    overflow-y: auto;
     .base-title {
       line-height: 32px;
       position: relative;
@@ -389,13 +371,40 @@ export default defineComponent({
       }
     }
 
+    .base-box{
+      width: 100%;
+      height: 100px;
+      font-size: 14px;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      border: 1px solid rgba(25, 237, 255, .4);
+      box-shadow: inset 0 0 10px rgba(0, 197, 255, .3);
+      background: rgba(0, 0, 0, .06666666666666667);
+      padding: 15px 20px;
+      margin-bottom: 10px;
+      .base-item{
+        width: 33%;
+        line-height: 30px;
+        span{
+          display: inline-block;
+        }
+        .title{
+          width: 120px;
+
+        }
+        .value{
+          width: 100px;
+        }
+      }
+    }
+
     .right-top {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       flex-wrap: wrap;
       margin-bottom: 10px;
-
       .top-item {
         width: 220px;
         height: 100px;
@@ -419,7 +428,7 @@ export default defineComponent({
           display: flex;
           flex-direction: column;
           justify-content: center;
-
+      
           div {
             text-align: center;
           }
@@ -452,6 +461,7 @@ export default defineComponent({
         }
       }
       .item-data{
+        position: relative;
         height: 130px;
         padding-top: 0;
         .icon{
@@ -459,12 +469,18 @@ export default defineComponent({
           margin-top: 25px;
         }
         .item-container{
+          padding-top: 18px;
+          justify-content: flex-start;
           .value{
             top: 0px;
           }
-          .rang{
-            color: #ff8663;;
-          }
+          
+        }
+        .rang{
+          position: absolute;
+          color: #ff8331;
+          bottom: 10px;
+          right: 20px;
         }
       }
 

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

@@ -307,6 +307,7 @@ export default defineComponent({
     }
     .modal-right{
       width: calc(100% - 220px);
+      overflow-y: auto;
       .base-title{
         line-height: 32px;
         position: relative;

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

@@ -312,6 +312,7 @@ export default defineComponent({
     }
     .modal-right{
       width: calc(100% - 220px);
+      overflow-y: auto;
       .base-title{
         line-height: 32px;
         position: relative;

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

@@ -282,6 +282,7 @@ export default defineComponent({
     }
     .modal-right{
       width: calc(100% - 220px);
+      overflow-y: auto;
       .base-title{
         line-height: 32px;
         position: relative;