【web】样式修改

8 months ago · 6b43af9840
parent 04b683549b
commit 6b43af9840
7 changed files with 150 additions and 27 deletions
--- a/ALOps_sys_fe/alops-ui/public/favicon.ico
+++ b/ALOps_sys_fe/alops-ui/public/favicon.ico
--- a/ALOps_sys_fe/alops-ui/public/index.html
+++ b/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]-->
--- a/ALOps_sys_fe/alops-ui/src/views/device/files/index.vue
+++ b/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()
--- a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/cardItem.vue
+++ b/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>
                    
--- a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/detail.vue
+++ b/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 {
--- a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/inMonitor/message/index.vue
+++ b/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>
--- a/ALOps_sys_fe/alops-ui/src/views/index.vue
+++ b/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() {
@ -992,6 +1044,16 @@ export default {
        box-sizing: border-box;
    }
    
+    /* 可点击元素的样式 */
+    .clickable-item {
+        cursor: pointer;
+        transition: all 0.3s;
+    }
+    
+    .clickable-item:hover {
+        background-color: #f0f9ff;
+    }
+        
        .dashboard {
            width: 100%;
            min-height: 100%;