【web】 样式修改

ALOps_sys_fe/alops-ui/public/index.html

@@ -5,7 +5,6 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="renderer" content="webkit">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico"> -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <title><%= webpackConfig.name %></title>
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->

ALOps_sys_fe/alops-ui/src/views/device/files/index.vue

@@ -346,7 +346,8 @@ export default {
         pageNum: 1,
         pageSize: 10,
         name: undefined,
-        status: undefined
+        status: undefined,
+        floor: undefined
       },
       // 表单校验
       rules: {
@@ -408,6 +409,11 @@ export default {
     }
   },
   created() {
+    // 检查路由参数是否有floor
+    const floor = this.$route.query.floor;
+    if (floor) {
+      this.queryParams.floor = floor;
+    }
     this.getList()
     this.getDeviceTypeList()
     this.getDeviceManuList()

ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/cardItem.vue

@@ -10,9 +10,9 @@
                             <i class="fas fa-network-wired"></i>
                             {{cardData.name}}
                         </h2>
-                        <span class="status-badge " :class="cardData.status ? 'status-online' : 'status-danger'">
+                        <span class="status-badge " :class="cardData.status == 1 ? 'status-online' : 'status-danger'">
                             <i class="fas fa-circle"></i> 
-                            {{ cardData.status ? '正常' : '停用' }}
+                            {{ cardData.status == 1 ? '在线' : '离线' }}
                         </span>
                     </div>
                     

ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/detail.vue

@@ -9,9 +9,9 @@
                             <i class="fas fa-network-wired"></i>
                             {{details.name}}
                         </h2>
-                        <span class="status-badge " :class="details.status ? 'status-online' : 'status-danger'">
+                        <span class="status-badge " :class="details.status == 1 ? 'status-online' : 'status-danger'">
                             <i class="fas fa-circle"></i> 
-                            {{ details.status ? '正常' : '停用' }}
+                            {{ details.status == 1 ? '在线' : '离线' }}
                         </span>
                     </div>
                     <div class="top-section-con">
@@ -1050,6 +1050,7 @@ mounted() {
             font-size: 14px;
             font-weight: 600;
             color: #2d3748;
+            padding-left: 18px;
         }
         
         .chart-container {

ALOps_sys_fe/alops-ui/src/views/inMonitoring/inMonitor/message/index.vue

@@ -44,27 +44,31 @@
                 width="60"
                 type="index"
               ></el-table-column>              
-              <el-table-column label="预警时间" align="center" key="occurTime" prop="occurTime" />
+              <el-table-column label="预警时间" align="center" key="occurTime" prop="occurTime" :show-overflow-tooltip="true" />
               <el-table-column label="预警等级" align="center" key="level" prop="level" :show-overflow-tooltip="true" />
-              <el-table-column label="预警信息" align="center" key="message" prop="message" width="200"  />
+              <el-table-column label="预警信息" align="center" key="message" prop="message" width="200" :show-overflow-tooltip="true">
+                <template slot-scope="scope">
+                  <span @click="showContentDialog('预警信息', scope.row.message)" class="clickable-cell">{{ scope.row.message || '--' }}</span>
+                </template>
+              </el-table-column>
               <el-table-column label="预警状态" align="center" key="status">
                 <template slot-scope="scope">
                   <dict-tag :options="dict.type.alert_message_status" :value="scope.row.status"/>
                 </template>
               </el-table-column>
-              <el-table-column label="处理人" align="center" key="handler" prop="handler"  width="120" >
+              <el-table-column label="处理人" align="center" key="handler" prop="handler"  width="120" :show-overflow-tooltip="true" >
                 <template slot-scope="scope">
                   <span>{{ scope.row.handler || '--' }}</span>
                 </template> 
               </el-table-column>
-              <el-table-column label="处理时间" align="center" prop="handleTime" width="160">
+              <el-table-column label="处理时间" align="center" prop="handleTime" width="160" :show-overflow-tooltip="true">
                 <template slot-scope="scope">
                   <span>{{ parseTime(scope.row.handleTime) || '--' }}</span>
                 </template> 
               </el-table-column>
               <el-table-column label="解决方案" align="center" key="solution" prop="solution" :show-overflow-tooltip="true" >
                 <template slot-scope="scope">
-                  <span>{{  scope.row.solution || '--'}}</span>
+                  <span @click="showContentDialog('解决方案', scope.row.solution)" class="clickable-cell">{{  scope.row.solution || '--'}}</span>
                 </template> 
               </el-table-column>
 
@@ -98,12 +102,21 @@
     </el-row>
 
   
-  </el-form>
+</el-form>
    <span slot="footer" class="dialog-footer">
       <el-button type="primary" @click="submitForm">确 定</el-button>
       <el-button @click="cancel">取 消</el-button>
     </span>
+  </el-dialog>
 
+<!-- 内容查看弹窗 -->
+<el-dialog :title="contentDialogTitle" :visible.sync="contentDialogVisible" width="600px" append-to-body :close-on-click-modal="false">
+  <div class="content-display">
+    <p v-bind:style="contentStyles">{{ contentDialogContent }}</p>
+  </div>
+  <span slot="footer" class="dialog-footer">
+    <el-button @click="contentDialogVisible = false">关 闭</el-button>
+  </span>
 </el-dialog>
   </div>
 </template>
@@ -148,6 +161,17 @@ export default {
       deptName: undefined,
       // 默认密码
       initPassword: undefined,
+      // 内容查看弹窗相关
+      contentDialogVisible: false,
+      contentDialogTitle: '',
+      contentDialogContent: '',
+      // 内容显示样式
+      contentStyles: {
+        wordBreak: 'break-all',
+        whiteSpace: 'pre-wrap',
+        fontSize: '14px',
+        lineHeight: '1.8'
+      },
       // 日期范围
       dateRange: [],
       // 岗位选项
@@ -180,7 +204,8 @@ export default {
         pageNum: 1,
         pageSize: 10,
         name: undefined,
-        status: undefined
+        status: undefined,
+        level: undefined
       },
       // 表单校验
       rules: {
@@ -200,6 +225,11 @@ export default {
     }
   },
   created() {
+    // 检查路由参数是否有level
+    const level = this.$route.query.level;
+    if (level) {
+      this.queryParams.level = level;
+    }
     this.getList()
   },
   methods: {
@@ -325,7 +355,32 @@ export default {
     // 提交上传文件
     submitFileForm() {
       this.$refs.upload.submit()
+    },
+    
+    /** 显示内容弹窗 */
+    showContentDialog(title, content) {
+      // 只有当内容存在时才显示弹窗
+      if (content && content.trim() !== '') {
+        this.contentDialogTitle = title;
+        this.contentDialogContent = content;
+        this.contentDialogVisible = true;
+      }
     }
   }
 }
 </script>
+
+<style scoped>
+.clickable-cell {
+  cursor: pointer;
+  color: #409EFF;
+  text-decoration: underline;
+}
+.clickable-cell:hover {
+  color: #66b1ff;
+}
+.content-display {
+  max-height: 400px;
+  overflow-y: auto;
+}
+</style>

ALOps_sys_fe/alops-ui/src/views/index.vue

@@ -3,7 +3,7 @@
         <div id="app" class="dashboard" style="overflow-x: hidden;">
             
             <div class="header">
-                <h1>设备监控中心大屏 - 智能管理版</h1>
+                <h1>唐山烟草网络设备智能监管平台</h1>
                 <div class="time-display">{{ currentTime }}</div>
             </div>
             
@@ -37,7 +37,7 @@
                             <div class="floor-device-grid">
                                 <div v-for="floor in floorDeviceDistribution" 
                                     :key="floor.level" 
-                                    class="floor-device-card">
+                                    class="floor-device-card" @click="jumpToDeviceFiles(floor.floor)">
                                     <div class="floor-level">{{ floor.floor }}</div>
                                     <div class="floor-count">{{ floor.count }}</div>
                                 </div>
@@ -52,11 +52,11 @@
                     <div class="panel">
                         <div class="panel-title">设备信息统计</div>
                         <div class="device-stats-container">
-                            <div class="device-stat-item">
+                            <div class="device-stat-item clickable-item" @click="goToDeviceFiles">
                                 <div class="device-stat-value">{{ totalDevices }}</div>
                                 <div class="device-stat-label">设备总数</div>
                             </div>
-                            <div class="device-stat-item">
+                            <div class="device-stat-item clickable-item" @click="goToDeviceStateMonitor">
                                 <div class="device-stat-value">{{ onlineDevices }}</div>
                                 <div class="device-stat-label">在线设备数</div>
                             </div>
@@ -377,6 +377,19 @@ export default {
                     this.refreshDeviceStatus();
                 }, 60000);
             },
+            activated() {
+                // 每次进入首页时刷新数据
+                this.refreshDeviceStatus();
+                this.loadDeviceTypeData();
+                this.loadAlertStatistics();
+                this.loadAlertTimes();
+                this.loadFloorDeviceDistribution();
+                this.updateTimeDisplay();
+                
+                // 更新最后刷新时间
+                this.updateTime = this.currentTime;
+            },
+            
             beforeDestroy() {
                 // 移除事件监听
                 window.removeEventListener('resize', this.handleResize);
@@ -385,6 +398,14 @@ export default {
                 }
             },
             methods: {
+            // 跳转到设备档案页面
+            goToDeviceFiles() {
+                this.$router.push('/device/files');
+            },
+            // 跳转到设备状态监控页面
+            goToDeviceStateMonitor() {
+                this.$router.push('/inMonitoring/devicesState');
+            },
                     // 处理日期范围变化，将结束时间设置为23:59:59
                     handleDateRangeChange(range) {
                         if (range && range.length === 2) {
@@ -868,6 +889,37 @@ export default {
                     } else {
                         this.warningLevelFilter = level;
                     }
+                    
+                    // 年度预警跳转到预警信息页面
+                    if (level === 'annual') {
+                        this.$router.push('/inMonitoring/inMonitoring/message');
+                    }
+                    // 1-3级预警跳转到预警信息页面并传递级别参数
+                    else if (level === 'level1') {
+                        this.$router.push({
+                            path: '/inMonitoring/inMonitoring/message',
+                            query: { level: '1' }
+                        });
+                    }
+                    else if (level === 'level2') {
+                        this.$router.push({
+                            path: '/inMonitoring/inMonitoring/message',
+                            query: { level: '2' }
+                        });
+                    }
+                    else if (level === 'level3') {
+                        this.$router.push({
+                            path: '/inMonitoring/inMonitoring/message',
+                            query: { level: '3' }
+                        });
+                    }
+                },
+                // 跳转到设备档案页面并传递楼层参数
+                jumpToDeviceFiles(floor) {
+                    this.$router.push({
+                        path: '/device/files',
+                        query: { floor: floor }
+                    });
                 },
                 
                 refreshDeviceStatus() {
@@ -983,14 +1035,24 @@ export default {
         }
         
         .index-box {
-            background-color: #0a1633;
+        background-color: #0a1633;
-            color: #e6e6e6;
+        color: #e6e6e6;
-            overflow: auto;
+        overflow: auto;
-            padding: 16px;
+        padding: 16px;
-            min-height: 100%;
+        min-height: 100%;
-            position: relative;
+        position: relative;
-            box-sizing: border-box;
+        box-sizing: border-box;
-        }
+    }
+    
+    /* 可点击元素的样式 */
+    .clickable-item {
+        cursor: pointer;
+        transition: all 0.3s;
+    }
+    
+    .clickable-item:hover {
+        background-color: #f0f9ff;
+    }
         
         .dashboard {
             width: 100%;