feat(*): 布袋监测优化

src/router/index.js

@@ -4,6 +4,12 @@ import Layout from '../layout/index.vue'
 
 // 检查路由是否在授权菜单中的函数
 const checkRoutePermission = (route, menuList) => {
+
+    // bag-monitor 路由不需要权限验证
+    if (route.path === '/bag-monitor') {
+      return true;
+    }
+    
   // 检查当前路由
   const hasPermission = menuList.some(menu => 
     menu.name === route.meta?.title && 

src/router/routePermission.js

@@ -5,7 +5,7 @@ import NProgress from 'nprogress'
 import 'nprogress/nprogress.css' // progress bar style
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
-const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist
+const whiteList = ['/login', '/auth-redirect', '/bag-monitor'] // no redirect whitelist
 router.beforeEach(async (to, from, next) => {
   const store = useUsersStore()
   const hasToken = getToken('TOKEN')
@@ -50,19 +50,6 @@ router.beforeEach(async (to, from, next) => {
         }
       } else {
         try {
-          // debugger
-          // get user info
-          // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
-          // const roles = await store.getInfo()
-          // generate accessible routes map based on roles
-          // const menuLimitsObj = await store.menuLimitsObj
-        //   const accessRoutes = await store.dispatch('permission/generateRoutes', { roles, menuLimitsObj })
-          // console.log("accessRoutes",accessRoutes)
-          // dynamically add accessible routes
-        //   router.addRoutes(accessRoutes)
-          // hack method to ensure that addRoutes is complete
-          // set the replace: true, so the navigation will not leave a history record
-          // next({ ...to, replace: true })
           next()
         } catch (error) {
           console.log(error)

src/utils/chart.js

@@ -159,7 +159,7 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
     type: "value",
     min: 0,
     // max: 600,
-    interval: 200,
+    // interval: 200,
     axisLabel: {
       color: "rgba(0,0,0,0.6)",
       formatter: "{value}",

src/views/dustMonitoring/bag-monitoring.vue

@@ -42,23 +42,23 @@
         </div>
 
         <div class="data-item">
-            <div>DI3: {{ currentData.di3 }}</div>
-            <div>排: {{ currentData.row }}</div>
-            <div>实时值: {{ currentData.realData }}</div>
-          </div>
-          <div class="data-item">
-            <div>基线值: {{ currentData.baseline }}</div>
-            <div>Delay: {{ currentData.delay }}</div>
-            <div>totaltime: {{ currentData.totalTime }}</div>
-          </div>
-          <div class="data-item">
-            <div>next:{{ currentData.next }}</div>
-            <div>valve:{{ currentData.valveNo }}</div>
-            <div>DI_TIME={{ currentData.diTime }}</div>
-          </div>
-          <div class="data-item">
-            <div>peak={{ currentData.peak }}</div>
-          </div>
+          <div>DI3: {{ currentData.di3 }}</div>
+          <div>排: {{ currentData.row }}</div>
+          <div>实时值: {{ currentData.realData }}</div>
+        </div>
+        <div class="data-item">
+          <div>基线值: {{ currentData.baseline }}</div>
+          <div>Delay: {{ currentData.delay }}</div>
+          <div>totaltime: {{ currentData.totalTime }}</div>
+        </div>
+        <div class="data-item">
+          <div>next:{{ currentData.next }}</div>
+          <div>valve:{{ currentData.valveNo }}</div>
+          <div>DI_TIME={{ currentData.diTime }}</div>
+        </div>
+        <div class="data-item">
+          <div>peak={{ currentData.peak }}</div>
+        </div>
       </div>
 
       <!-- <div class="data-box second-box">
@@ -68,7 +68,11 @@
 
     <div class="data-table">
       <div class="time-controls">
-        <el-button @click="navigateBackward">
+        <div class="time-desc">
+          <span class="icon"></span>
+          当前实时信号：{{ currentData.compartNo }}仓 / {{ currentData.row }}排</div>
+        <div>
+          <el-button @click="navigateBackward">
           <el-icon><ArrowLeftBold />向前</el-icon>
         </el-button>
         <el-button @click="navigateForward">
@@ -79,6 +83,8 @@
         <span class="time-unit">分钟</span>
 
         <el-button @click="reset">重置</el-button>
+        </div>
+       
       </div>
 
       <table>
@@ -92,8 +98,8 @@
         </thead>
         <tbody>
           <tr>
-            <td>峰值{{currentData.row}}排_R</td>
-            <td v-for="(value, index) in tableData" :key="'r' + index">
+            <td>峰值{{ currentData.row }}排_R</td>
+            <td v-for="(value, index) in tableData" :key="'r' + index" :class="{ 'online-style': value.compartNo ===  currentData.compartNo }">
               {{ value.peakValueR || "-" }}
             </td>
           </tr>
@@ -482,9 +488,12 @@ const getDeviceList = () => {
   getMonitorList({
     dusterNo: dusterNo.value,
   }).then((res) => {
-    deviceList.value = res.data.devices || [];
-    if (deviceList.value.length > 0) {
-      selectedDevice.value = deviceList.value[0].deviceNo;
+    if (res.data) {
+      deviceList.value = res.data.devices || [];
+      if (deviceList.value.length > 0) {
+        selectedDevice.value = deviceList.value[0].deviceNo;
+      }
+
       tableData.value = Array.from(
         { length: res.data.compartCount },
         (item, index) => ({
@@ -495,8 +504,8 @@ const getDeviceList = () => {
           blowBack: 0,
         })
       );
+      initChart();
     }
-    initChart();
   });
 };
 
@@ -573,7 +582,7 @@ onBeforeUnmount(() => {
     .title {
       font-size: 18px;
       font-weight: bold;
-      color: #409eff;
+      color: #2182a0;
     }
   }
 
@@ -712,14 +721,31 @@ onBeforeUnmount(() => {
           z-index: 1;
         }
       }
+      .online-style {
+        background-color: rgba(33, 130, 160, 1);
+        color: #fff;
+      }
     }
 
     .time-controls {
       margin-bottom: 10px;
       display: flex;
       align-items: center;
-      justify-content: flex-end;
-
+      justify-content: space-between;
+      .time-desc {
+        font-size: 14px;
+        color: #606266;
+        display: flex;
+        align-items: center;
+        .icon {
+          display: inline-block;
+          width: 12px;
+          height: 12px;
+          background-color: #05ea09;
+          border-radius: 50%;
+          margin-right: 5px;
+        }
+      }
       .time-label,
       .time-unit {
         margin: 0 5px;