[Wip 0000] 通风、粉尘预警-添加测点监测/预测

曲线切换功能

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

@@ -46,29 +46,7 @@
     </div>
     <div class="bot-dust">
       <div class="bot-area">
-        <div class="title-b">
-          <div class="text-b">粉尘监控测点信息</div>
-        </div>
-        <div class="content-b">
-          <div class="card-b" v-for="(item, index) in cardListTf" :key="index">
-            <div class="item-l">
-              <div class="label-l">{{ item.label }}</div>
-              <div class="value-l">{{ item.value }}</div>
-            </div>
-            <div class="item-r">
-              <div class="content-r" v-for="(items, ind) in item.listR" :key="ind">
-                <span>{{ `${items.label} : ` }}</span>
-                <span
-                  :class="{
-                    'status-f': items.value == 1,
-                    'status-l': items.value == 0,
-                  }"
-                  >{{ `${items.value}${items.dw}` }}</span
-                >
-              </div>
-            </div>
-          </div>
-        </div>
+        <MeasurePoint title="粉尘监控测点信息" :cards="cardListTf" :charts="chartListTf" />
       </div>
     </div>
   </div>
@@ -82,6 +60,7 @@
   import { useRouter } from 'vue-router';
   import CustomHeader from '/@/components/vent/customHeader.vue';
   import { usePermission } from '/@/hooks/web/usePermission';
+  import MeasurePoint from '../common/measurePoint.vue';
 
   const { hasPermission } = usePermission();
   const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
@@ -120,6 +99,7 @@
     containLabel: true,
   });
   let cardListTf = reactive<any[]>([]);
+  const chartListTf = reactive<any[]>([]);
   let router = useRouter();
   let echartNow = ref<any[]>([]);
   let echartYc = reactive<any[]>([]);
@@ -310,6 +290,7 @@
   //获取粉尘监控测点信息
   async function getWindDeviceList() {
     cardListTf.length = 0;
+    chartListTf.length = 0;
     let res = await getDevice({ devicetype: 'dusting', pagetype: 'normal' });
     if (res && res.msgTxt[0]) {
       let list = res.msgTxt[0].datalist || [];
@@ -338,6 +319,10 @@
               },
             ],
           });
+          chartListTf.push({
+            label: el.strinstallpos,
+            data: [],
+          });
         });
       }
     }
@@ -367,8 +352,6 @@
       --image-dust-choice1: url('/@/assets/images/themify/deepblue/fire/dust-choice1.png');
       --image-dust-content: url('/@/assets/images/themify/deepblue/fire/dust-content.png');
       --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
-      --image-bot-area: url(/src/assets/images/themify/deepblue/fire/bot-area.png);
-      --image-bot-area1: url('/@/assets/images/themify/deepblue/fire/bot-area1.png');
     }
   }
 
@@ -381,8 +364,6 @@
     --image-dust-choice1: url('/@/assets/images/fire/dust-choice1.png');
     --image-dust-content: url('/@/assets/images/fire/dust-content.png');
     --image-bj1: url('/@/assets/images/fire/bj1.png');
-    --image-bot-area: url(/src/assets/images/fire/bot-area.png);
-    --image-bot-area1: url('/@/assets/images/fire/bot-area1.png');
     width: 100%;
     height: 100%;
     padding: 80px 10px 15px 10px;
@@ -641,115 +622,6 @@
         background: var(--image-bj1) no-repeat center;
         background-size: 100% 100%;
         box-sizing: border-box;
-
-        .title-b {
-          height: 30px;
-          margin-bottom: 10px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-
-          .text-b {
-            font-family: 'douyuFont';
-            font-size: 14px;
-            color: #fff;
-          }
-        }
-
-        .content-b {
-          height: calc(100% - 40px);
-          display: flex;
-          justify-content: flex-start;
-          align-items: flex-start;
-          flex-wrap: wrap;
-          overflow-y: auto;
-
-          .card-b {
-            position: relative;
-            width: 24%;
-            height: 128px;
-            margin: 0px 9px 10px 9px;
-            background: var(--image-bot-area) no-repeat center;
-            background-size: 100% 100%;
-
-            .item-l {
-              position: absolute;
-              left: 32px;
-              top: 50%;
-              transform: translate(0, -50%);
-              width: 89px;
-              height: 98px;
-              background: var(--image-bot-area1) no-repeat center;
-
-              .label-l {
-                width: 100%;
-                position: absolute;
-                top: 7px;
-                color: #fff;
-                font-size: 12px;
-                text-align: center;
-              }
-
-              .value-l {
-                width: 100%;
-                position: absolute;
-                top: 50px;
-                font-family: 'douyuFont';
-                font-size: 14px;
-                color: var(--vent-table-action-link);
-                text-align: center;
-              }
-            }
-
-            .item-r {
-              position: absolute;
-              left: 132px;
-              top: 50%;
-              transform: translate(0, -50%);
-              height: 128px;
-              padding: 5px 0px;
-              display: flex;
-              flex-direction: column;
-              justify-content: space-around;
-              box-sizing: border-box;
-
-              .content-r {
-                display: flex;
-
-                span {
-                  font-size: 14px;
-                  color: #fff;
-
-                  &:first-child {
-                    display: inline-block;
-                    width: 68px;
-                  }
-
-                  &:last-child {
-                    display: inline-block;
-                    width: calc(100% - 68px);
-                    color: var(--vent-table-action-link);
-                    overflow: hidden;
-                    white-space: nowrap;
-                    /* 不换行 */
-
-                    /* 超出部分隐藏 */
-                    text-overflow: ellipsis;
-                    /* 使用省略符号 */
-                  }
-                }
-
-                .status-f {
-                  color: #ff0000;
-                }
-
-                .status-l {
-                  color: var(--vent-table-action-link);
-                }
-              }
-            }
-          }
-        }
       }
     }
   }

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

@@ -58,30 +58,7 @@
     </div>
     <div class="ventilate-bottom">
       <div class="bot-area">
-        <div class="title-b">
-          <div class="text-b">通风监控测点信息</div>
-        </div>
-        <div class="content-b">
-          <div class="card-b" v-for="(item, index) in cardListTf" :key="index">
-            <div class="item-l">
-              <div class="label-l">{{ item.label }}</div>
-              <div class="value-l">{{ item.value }}</div>
-            </div>
-            <div class="item-r">
-              <div class="content-r" v-for="(items, ind) in item.listR" :key="ind">
-                <span>{{ `${items.label} : ` }}</span>
-                <span
-                  :class="{
-                    'status-f': items.value == 1,
-                    'status-l': items.value == 0,
-                  }"
-                >
-                  {{ `${items.value}${items.dw}` }}
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
+        <MeasurePoint title="通风监控测点信息" :cards="cardListTf" :charts="chartListTf" />
       </div>
     </div>
   </div>
@@ -96,6 +73,7 @@
   import CustomHeader from '/@/components/vent/customHeader.vue';
   import echartLine from '../common/echartLine.vue';
   import { usePermission } from '/@/hooks/web/usePermission';
+  import MeasurePoint from '../common/measurePoint.vue';
 
   const { hasPermission } = usePermission();
   const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
@@ -123,6 +101,7 @@
     xData: [],
   });
   let cardListTf = reactive<any[]>([]);
+  const chartListTf = reactive<any[]>([]);
 
   // https获取监测数据
   let timer: null | NodeJS.Timeout = null;
@@ -220,6 +199,7 @@
   //获取通风监控测点信息
   async function getWindDeviceList() {
     cardListTf.length = 0;
+    chartListTf.length = 0;
     let res = await getDevice({ devicetype: 'windrect', pagetype: 'normal' });
     if (res && res.msgTxt[0]) {
       let list = res.msgTxt[0].datalist || [];
@@ -243,6 +223,10 @@
               },
             ],
           });
+          chartListTf.push({
+            label: el.strinstallpos,
+            data: [],
+          });
         });
       }
     }
@@ -271,8 +255,6 @@
       --image-jinfengliang: url('/@/assets/images/themify/deepblue/fire/jinfengliang.png');
       --image-huifengliang: url('/@/assets/images/themify/deepblue/fire/huifengliang.png');
       --image-xufengliang: url('/@/assets/images/themify/deepblue/fire/xufengliang.png');
-      --image-bot-area: url('/@/assets/images/themify/deepblue/fire/bot-area.png');
-      --image-bot-area1: url('/@/assets/images/themify/deepblue/fire/bot-area1.png');
     }
   }
 
@@ -284,8 +266,6 @@
     --image-jinfengliang: url('/@/assets/images/fire/jinfengliang.png');
     --image-huifengliang: url('/@/assets/images/fire/huifengliang.png');
     --image-xufengliang: url('/@/assets/images/fire/xufengliang.png');
-    --image-bot-area: url('/@/assets/images/fire/bot-area.png');
-    --image-bot-area1: url('/@/assets/images/fire/bot-area1.png');
     --border-image-1: linear-gradient(to bottom, #2d74a0, #2d74a0, #2d74a0);
     --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
     width: 100%;
@@ -552,115 +532,6 @@
         background: var(--image-bj1) no-repeat center;
         background-size: 100% 100%;
         box-sizing: border-box;
-
-        .title-b {
-          height: 30px;
-          margin-bottom: 10px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-
-          .text-b {
-            font-family: 'douyuFont';
-            font-size: 14px;
-            color: var(--vent-font-color);
-          }
-        }
-
-        .content-b {
-          height: calc(100% - 40px);
-          display: flex;
-          justify-content: flex-start;
-          align-items: flex-start;
-          flex-wrap: wrap;
-          overflow-y: auto;
-
-          .card-b {
-            position: relative;
-            width: 24%;
-            height: 128px;
-            margin: 0px 9px 10px 9px;
-            background: var(--image-bot-area) no-repeat center;
-            background-size: 100% 100%;
-
-            .item-l {
-              position: absolute;
-              left: 32px;
-              top: 50%;
-              transform: translate(0, -50%);
-              width: 89px;
-              height: 98px;
-              background: var(--image-bot-area1) no-repeat center;
-
-              .label-l {
-                width: 100%;
-                position: absolute;
-                top: 7px;
-                color: var(--vent-font-color);
-                font-size: 12px;
-                text-align: center;
-              }
-
-              .value-l {
-                width: 100%;
-                position: absolute;
-                top: 50px;
-                font-family: 'douyuFont';
-                font-size: 14px;
-                color: var(--vent-table-action-link);
-                text-align: center;
-              }
-            }
-
-            .item-r {
-              position: absolute;
-              left: 132px;
-              top: 50%;
-              transform: translate(0, -50%);
-              height: 128px;
-              padding: 5px 0px;
-              display: flex;
-              flex-direction: column;
-              justify-content: space-around;
-              box-sizing: border-box;
-
-              .content-r {
-                display: flex;
-
-                span {
-                  font-size: 14px;
-                  color: var(--vent-font-color);
-
-                  &:first-child {
-                    display: inline-block;
-                    width: 68px;
-                    text-align: right;
-                  }
-
-                  &:last-child {
-                    display: inline-block;
-                    width: calc(100% - 68px);
-                    overflow: hidden;
-                    white-space: nowrap;
-                    /* 不换行 */
-
-                    /* 超出部分隐藏 */
-                    text-overflow: ellipsis;
-                    /* 使用省略符号 */
-                  }
-                }
-
-                .status-f {
-                  color: #ff0000;
-                }
-
-                .status-l {
-                  color: var(--vent-table-action-link);
-                }
-              }
-            }
-          }
-        }
       }
     }
   }