在线离线设备大屏

.env.development

@@ -15,7 +15,7 @@ ENV = 'development'
 VUE_APP_BASE_API  = 'http://192.168.99.72:7080'
 VUE_APP_WS_API = 'ws://192.168.99.72:7080'
 VUE_APP_WEBRTCSTREAMER_API = '127.0.0.1:8000'
-VUE_APP_SDEVID = "D003"
+VUE_APP_SDEVID = "D005"
 
 # 是否启用 babel-plugin-dynamic-import-node插件
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

src/views/components/AccessDoor.vue

@@ -75,11 +75,11 @@ export default {
   },
   methods: {
     toPage() {
-      if (this.roles.includes('admin') || this.roles.includes('logManage:list')) {
+      if (this.roles.includes('admin') || this.roles.includes('RunningLog:list')) {
         this.$router.push({
-          name: 'LogManage',
+          name: 'RunningLog',
           params: {
-            locationIndex: 3
+            locationIndex: 1
           }
         })
       } else {

src/views/components/WarehouseWarning.vue

@@ -70,11 +70,11 @@ export default {
   },
   methods: {
     toPage() {
-      if (this.roles.includes('admin') || this.roles.includes('logManage:list')) {
+      if (this.roles.includes('admin') || this.roles.includes('RunningLog:list')) {
         this.$router.push({
-          name: 'LogManage',
+          name: 'RunningLog',
           params: {
-            locationIndex: 2
+            locationIndex: 0
           }
         })
       } else {

src/views/components/category/PreviewForm.vue

@@ -59,7 +59,7 @@
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
       <div class="setting-dialog">
-        <el-table ref="popoverTable" :data="popoverTableData" highlight-current-row row-key="id" :tree-props="{children: 'childMenus', hasChildren: 'hasChildren'}" style="width: 100%;" @selection-change="handleSelectionChange" @row-click="clickRowHandler">
+        <el-table ref="popoverTable" :data="popoverTableData" highlight-current-row row-key="id" :tree-props="{children: 'childMenus', hasChildren: 'hasChildren'}" style="width: 100%;" height="calc(100vh - 360px)" @selection-change="handleSelectionChange" @row-click="clickRowHandler">
           <el-table-column type="selection" width="55" />
           <el-table-column prop="dicName" label="字典名称" />
           <el-table-column prop="dicCode" label="字典代码" />

src/views/environmentalScreen/index.vue

@@ -29,48 +29,7 @@
           <h3>
             <i class="iconfont icon-kongqizhiliangshuju" />环控数据
           </h3>
-          <!-- <ul
-            class="leakage-list"
-            :style="{
-              height: showScroll ? 'calc(100% - 40px)' : 'auto',
-              overflow: showScroll ? 'auto' : 'hidden'
-            }"
-          >
-            <li
-              v-for="item in validDisplayConfigData"
-              :key="item.id"
-              :class="{ 'leakage-warn': item.NetStatus === 0 }"
-              :style="{
-                width: liWidth,
-                height: liHeight,
-                marginRight: '12px',
-                marginBottom: '12px'
-              }"
-            >
-              <p><i class="iconfont icon-shebei" />{{ item.Name }}</p>
-              <span class="leakage-state-tip" />
-            </li>
-          </ul> -->
           <ul v-if="newAlarm && newAlarm.length !== 0" class="screen-env-list">
-            <!-- <li :class="alarmStatus.infrared === '告警' ? 'li-warn alarm-status' : 'alarm-status'">
-              <div class="msg-txt">
-
-                <p class="msg-list-unit">红外 </p>
-                <span class="msg-list-num">{{ alarmStatus.infrared }}</span>
-              </div>
-            </li>
-            <li :class="alarmStatus.fire === '告警' ? 'li-warn alarm-status' : 'alarm-status'">
-              <div class="msg-txt">
-                <p class="msg-list-unit">消防 </p>
-                <span class="msg-list-num">{{ alarmStatus.fire }}</span>
-              </div>
-            </li>
-            <li :class="alarmStatus.waterLeak === '告警' ? 'li-warn alarm-status' : 'alarm-status'">
-              <div class="msg-txt">
-                <p class="msg-list-unit">漏水 </p>
-                <span class="msg-list-num">{{ alarmStatus.waterLeak }}</span>
-              </div>
-            </li>-->
             <li>
               <svg-icon icon-class="pm25" class-name="msg-list-svg" />
               <div class="msg-txt">
@@ -197,43 +156,13 @@
               </div>
             </div>
           </div>
-          <!-- <el-row :gutter="10" class="panel-group" type="flex" justify="space-between">
-            <el-col class="card-panel-col">
-              <div class="card-panel zaixianshebei">
-                <div class="card-panel-icon-wrapper icon-shopping">
-                  <svg-icon icon-class="zaixianshebei" class-name="card-panel-icon" />
-                </div>
-                <div class="card-panel-description">
-                  <div class="card-panel-text">
-                    <count-to v-if="getDeviceFlag" :start-val="0" :end-val="onlineDeviceNum" :duration="3200" class="card-panel-num" />
-                    <div v-if="!getDeviceFlag" class="card-panel-text"><span class="card-panel-num">获取中...</span></div>
-                  </div>
-                  在线设备
-                </div>
-              </div>
-            </el-col>
-            <el-col class="card-panel-col">
-              <div class="card-panel lixianshebei">
-                <div class="card-panel-icon-wrapper icon-shopping">
-                  <svg-icon icon-class="lixianshebei" class-name="card-panel-icon" />
-                </div>
-                <div class="card-panel-description">
-                  <div class="card-panel-text">
-                    <count-to v-if="getDeviceFlag" :start-val="0" :end-val="offlineDeviceNum" :duration="3200" class="card-panel-num" />
-                    <div v-if="!getDeviceFlag" class="card-panel-text"><span class="card-panel-num">获取中...</span></div>
-                  </div>
-                  离线设备
-                </div>
-              </div>
-            </el-col>
-          </el-row> -->
           <ul class="env-alarm-list env-alarm-list-first">
             <li>
               <svg-icon icon-class="zaixian" class-name="msg-list-svg" />
               <div>
                 <!-- <span>{{ avgData.temperature }} </span> -->
                 <count-to v-if="getDeviceFlag" :start-val="0" :end-val="onlineDeviceNum" :duration="3200" class="card-panel-num" />
-                <div v-if="!getDeviceFlag" class="card-panel-text"><span class="card-panel-num">获取中...</span></div>
+                <div v-if="!getDeviceFlag" class="card-panel-text" style="font-size: 18px;"><span class="card-panel-num">获取中...</span></div>
                 <p>在线设备</p>
               </div>
             </li>
@@ -242,7 +171,7 @@
               <div>
                 <!-- <span>{{ avgData.humidity }}</span> -->
                 <count-to v-if="getDeviceFlag" :start-val="0" :end-val="offlineDeviceNum" :duration="3200" class="card-panel-num" />
-                <div v-if="!getDeviceFlag" class="card-panel-text"><span class="card-panel-num">获取中...</span></div>
+                <div v-if="!getDeviceFlag" class="card-panel-text" style="font-size: 18px;"><span class="card-panel-num">获取中...</span></div>
                 <p>离线设备</p>
               </div>
             </li>
@@ -386,8 +315,10 @@ export default {
       targetDeviceIps: ['192.168.99.101:5003', '192.168.99.101:6003', '192.168.99.101:5004'],
       getDeviceFlag: false,
       totalDeviceNum: 0,
-      onlineDeviceNum: 0,
-      offlineDeviceNum: 0,
+      onlineDeviceNum: 0, // 合并后的在线总数
+      offlineDeviceNum: 0, // 合并后的离线总数
+      apiOnlineNum: 0,
+      apiOfflineNum: 0,
       alarmStatisticsRaw: [], // 原始告警统计数据
       alarmChartData: [], // 格式化后给饼图的数据源
       alarmRefreshTimer: null, // 告警数据刷新定时器
@@ -428,6 +359,24 @@ export default {
     },
     showScroll() {
       return this.validDisplayConfigData.length > 8
+    },
+    // 统计本地配置设备的在线/离线数量
+    localDeviceStats() {
+      const stats = {
+        online: 0,
+        offline: 0
+      }
+      this.allDisplayConfigData.forEach(item => {
+        const ip = (item.IP || '').trim()
+        if (ip) {
+          if (item.NetStatus === 1) {
+            stats.online++
+          } else if (item.NetStatus === 0) {
+            stats.offline++
+          }
+        }
+      })
+      return stats
     }
   },
   async created() {
@@ -439,26 +388,7 @@ export default {
     this.getTodayHikAlarmLog()
     // 初始化
     window.getIframeLoading = this.getIframeLoading
-    // this.allDisplayConfigData = allDeviceData
-    // this.handleDeviceIpList()
 
-    // await alarmApi.FetchYpGetSite().then((data) => {
-    //   if (data && data.length > 0) {
-    //     this.allDisplayConfigData = data
-    //     this.handleDeviceIpList()
-    //   } else {
-    //     this.allDisplayConfigData = []
-    //   }
-    // })
-
-    // if (this.allDeviceIds.length > 0) {
-    //   await this.getAllDevicesData()
-    //   this.calcAllAvgData() // 计算所有指标平均值
-    //   this.calcAQIByAvg() // 根据平均值计算AQI
-    // } else {
-    //   console.warn('无设备IP数据')
-    //   this.hasValidData = false
-    // }
     await this.fullDataRefresh()
     this.deviceConfigTimer = setInterval(() => {
       this.fullDataRefresh()
@@ -583,12 +513,68 @@ export default {
     },
     getDevice() {
       getDeviceOnoff().then(data => {
+        // 保存接口返回的原始数量
+        this.apiOnlineNum = data.online.length
+        this.apiOfflineNum = data.offline.length
         this.getDeviceFlag = true
         this.totalDeviceNum = data.deviceall.length
-        this.onlineDeviceNum = data.online.length
-        this.offlineDeviceNum = data.offline.length
-        // this.onlineDevice = data.online
-        // this.offDevice = data.offline
+
+        // 计算合并后的数量
+        this.calcMergedDeviceNum()
+      }).catch(error => {
+        console.error('获取设备在线离线数量失败:', error)
+        this.getDeviceFlag = true
+        this.apiOnlineNum = 0
+        this.apiOfflineNum = 0
+        this.calcMergedDeviceNum()
+      })
+    },
+    // 计算合并后的在线/离线设备数量
+    calcMergedDeviceNum() {
+      // 1. 先重新计算本地设备统计（包含IP明细）
+      const localStats = {
+        online: 0,
+        offline: 0,
+        onlineIps: [],
+        offlineIps: []
+      }
+      // 遍历所有IP非空的设备，统计数量并记录IP
+      this.allDisplayConfigData.forEach(item => {
+        const ip = (item.IP || '').trim()
+        if (ip) {
+          if (item.NetStatus === 1) {
+            localStats.online++
+            localStats.onlineIps.push({
+              ip: ip,
+              name: item.Name || '未知设备'
+            })
+          } else if (item.NetStatus === 0) {
+            localStats.offline++
+            localStats.offlineIps.push({
+              ip: ip,
+              name: item.Name || '未知设备'
+            })
+          }
+        }
+      })
+
+      // 2. 合并数量
+      this.onlineDeviceNum = this.apiOnlineNum + localStats.online
+      this.offlineDeviceNum = this.apiOfflineNum + localStats.offline
+
+      // 3. 打印详细日志（包含IP明细）
+      console.log('===== 合并后的设备数量详情 =====', {
+        // 接口返回数据
+        接口在线数量: this.apiOnlineNum,
+        接口离线数量: this.apiOfflineNum,
+        // 本地配置数据（含IP）
+        本地在线数量: localStats.online,
+        本地在线设备IP: localStats.onlineIps,
+        本地离线数量: localStats.offline,
+        本地离线设备IP: localStats.offlineIps,
+        // 合并后总数
+        总在线数量: this.onlineDeviceNum,
+        总离线数量: this.offlineDeviceNum
       })
     },
     getVideoUrl() {
@@ -701,9 +687,6 @@ export default {
     },
     /**
      * 计算所有设备指标的平均值（适配ON/OFF告警状态，保留单位）
-     */
-    /**
- * 计算所有设备指标的平均值（适配ON/OFF告警状态，保留单位）
      */
     calcAllAvgData() {
       if (!this.hasValidData) return

vue.config.js

@@ -6,7 +6,7 @@ function resolve(dir) {
   return path.join(__dirname, dir)
 }
 const name = defaultSettings.title // 网址标题
-const port = 8013 // 端口配置
+const port = 7080 // 端口配置
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
   // hash 模式下可使用