From 1456a811d768a645cbea3cd9c0b9995002f6aeca Mon Sep 17 00:00:00 2001
From: Wangxin <wangxin@icanag.com>
Date: Tue, 5 Aug 2025 15:23:14 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90web=E3=80=91=20=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ALOps_sys_fe/alops-ui/package.json            |   2 +-
 .../alops-ui/src/assets/styles/index.scss     |   1 +
 .../alops-ui/src/assets/styles/ruoyi.scss     |  19 ++
 ALOps_sys_fe/alops-ui/src/router/index.js     |  14 ++
 .../inMonitoring/devicesState/LineChart.vue   | 132 ++++++++++++
 .../inMonitoring/devicesState/cardItem.vue    |   8 +-
 .../inMonitoring/devicesState/detail.vue      | 198 ++++++++++++++++++
 .../views/inMonitoring/devicesState/index.vue |   7 +-
 8 files changed, 378 insertions(+), 3 deletions(-)
 create mode 100644 ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/LineChart.vue
 create mode 100644 ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/detail.vue

diff --git a/ALOps_sys_fe/alops-ui/package.json b/ALOps_sys_fe/alops-ui/package.json
index 6db56331..56ba358e 100644
--- a/ALOps_sys_fe/alops-ui/package.json
+++ b/ALOps_sys_fe/alops-ui/package.json
@@ -69,4 +69,4 @@
     "> 1%",
     "last 2 versions"
   ]
-}
\ No newline at end of file
+}
diff --git a/ALOps_sys_fe/alops-ui/src/assets/styles/index.scss b/ALOps_sys_fe/alops-ui/src/assets/styles/index.scss
index bb87292c..87b5d122 100644
--- a/ALOps_sys_fe/alops-ui/src/assets/styles/index.scss
+++ b/ALOps_sys_fe/alops-ui/src/assets/styles/index.scss
@@ -11,6 +11,7 @@ body {
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  color: #606266;
 }
 
 label {
diff --git a/ALOps_sys_fe/alops-ui/src/assets/styles/ruoyi.scss b/ALOps_sys_fe/alops-ui/src/assets/styles/ruoyi.scss
index ab4a1d2d..c7dac774 100644
--- a/ALOps_sys_fe/alops-ui/src/assets/styles/ruoyi.scss
+++ b/ALOps_sys_fe/alops-ui/src/assets/styles/ruoyi.scss
@@ -285,3 +285,22 @@
 .splitpanes.default-theme .splitpanes__pane {
   background-color: #fff!important;
 }
+
+
+.flex-center{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.flex{
+  display: flex;
+}
+.justifyContent{
+  justify-content: center;
+}
+.alignItems{
+  align-items: center;
+}
+.gap10{
+  gap: 10px;
+}
diff --git a/ALOps_sys_fe/alops-ui/src/router/index.js b/ALOps_sys_fe/alops-ui/src/router/index.js
index 14f088b7..175e7e6c 100644
--- a/ALOps_sys_fe/alops-ui/src/router/index.js
+++ b/ALOps_sys_fe/alops-ui/src/router/index.js
@@ -92,6 +92,20 @@ export const constantRoutes = [
 
 // 动态路由，基于用户权限动态去加载
 export const dynamicRoutes = [
+  {
+    path: '/inMonitoring/devicesState-detail',
+    component: Layout,
+    hidden: true,
+    permissions: ['inMonitoring:devicesState:edit'],
+    children: [
+      {
+        path: 'detail/:userId(\\d+)',
+        component: () => import('@/views/inMonitoring/devicesState/detail'),
+        name: 'DevicesStateDetail',
+        meta: { title: '设备详情', activeMenu: '/inMonitoring/devicesState-detail' }
+      }
+    ]
+  },
   {
     path: '/system/user-auth',
     component: Layout,
diff --git a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/LineChart.vue b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/LineChart.vue
new file mode 100644
index 00000000..daee64a7
--- /dev/null
+++ b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/LineChart.vue
@@ -0,0 +1,132 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+
+const animationDuration = 6000
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption(
+        {
+    color: ['#5b9bd5', '#ed7d31'],
+    backgroundColor: '#FFF',
+    grid: {
+
+        top: 20,
+        bottom: 100,
+        left: '12%',
+        right: '2%'
+    },
+    legend: {
+        bottom: '10',
+        itemWidth: 30,
+        itemHeight: 6,
+        data: ['逐月总逆温日', '逐月PM2.5浓度']
+    },
+    xAxis: [{
+        name: '城市',
+        nameLocation: 'center',
+        nameGap: 50,
+        axisLine: {
+            show: false
+        },
+        axisTick: {
+            show: false
+        },
+        axisLabel: {
+            rotate: 50
+        },
+        data: ['南京', '无锡', '徐州', '常州', '苏州', '南通', '连云港', '淮安', '盐城', '扬州', '镇江', '泰州', '宿迁'],
+    }],
+    yAxis: [{
+
+        name: '地面风速（m/s）',
+        nameLocation: 'center',
+        nameGap: 40,
+        nameTextStyle: {
+            color: '#000'
+        },
+        axisTick: {
+            show: false
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: '#CCC'
+            }
+        },
+        axisLabel: {
+            color: '#000'
+        }
+    }],
+    series: [{
+            name: '逐月总逆温日',
+            type: 'line',
+            itemStyle: {
+                color: '#5b9bd5',
+                borderColor: '#5b9bd5',
+                borderWidth: 4
+            },
+            lineStyle: {
+                width: 4
+            },
+            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 20]
+        },
+        {
+            name: '逐月PM2.5浓度',
+            type: 'line',
+            itemStyle: {
+                color: '#ed7d31',
+                borderColor: '#ed7d31',
+                borderWidth: 4
+            },
+            lineStyle: {
+                width: 4
+            },
+            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 15]
+        }
+    ]
+}
+      )
+    }
+  }
+}
+</script>
diff --git a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/cardItem.vue b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/cardItem.vue
index fc8b6de7..445debfc 100644
--- a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/cardItem.vue
+++ b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/cardItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="">
-    <h3 class="h3">交换机</h3>
+    <h3 class="h3" @click="handleDetail">交换机</h3>
     <el-row>
       <el-col :span="14">
         <img src="../../../assets/images/profile.jpg" width="100%" alt="" srcset="">
@@ -64,6 +64,12 @@ export default {
   created() {
   },
   methods: {
+    /** 查看详情 */
+    handleDetail: function(row) {
+    console.log("%c 🖍️: row ", "font-size:16px;background-color:#3c235b;color:white;", row)
+      const userId = row.pointerId
+      this.$router.push("/inMonitoring/devicesState-detail/detail/" + userId)
+    },
   }
 }
 </script>
\ No newline at end of file
diff --git a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/detail.vue b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/detail.vue
new file mode 100644
index 00000000..c6aeb13f
--- /dev/null
+++ b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/detail.vue
@@ -0,0 +1,198 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="5">
+      <el-col :span="24">
+        <el-card>
+          <el-row>
+            <el-col :span="4">
+              <h3>交换机</h3>
+            </el-col>
+            <el-col :span="4">
+              <h3>持续在线XXXXX小时</h3>
+            </el-col>
+          </el-row>
+          <el-divider></el-divider>
+
+          
+          <el-row>
+            <el-col :span="8">
+              <h3>交换机</h3>
+            </el-col>
+            <el-col :span="4">
+              <h3>设备基本信息</h3>
+              <p>
+                <span>设备型号:</span>
+                <span>待开发</span>
+              </p>
+              <p>
+                <span>设备级别:</span>
+                <span>待开发</span>
+              </p>
+              <p>
+                <span>设备版本:</span>
+                <span>待开发</span>
+              </p>
+              <p>
+                <span>设备类型:</span>
+                <span>待开发</span>
+              </p>
+            </el-col>
+            <el-col :span="4">
+              <h3>设备出厂信息</h3>
+              <p>
+                <span>生产商名称:</span>
+                <span>待开发</span>
+              </p>
+              <p>
+                <span>供货商名称:</span>
+                <span>待开发</span>
+              </p>
+              <p>
+                <span>出厂日期:</span>
+                <span>待开发</span>
+              </p>
+              <p>
+                <span>质保时间:</span>
+                <span>待开发</span>
+              </p>
+              <p>
+                <span>联系人:</span>
+                <span>待开发</span>
+              </p>
+              <p>
+                <span>联系电话:</span>
+                <span>待开发</span>
+              </p>
+            </el-col>
+            <el-col :span="4">
+              <h3>设备管理信息</h3>
+              <p>
+                <span>带外IP管理:</span>
+                <span>待开发</span>
+              </p>
+              <p>
+                <span>安装位置:</span>
+                <span>待开发</span>
+              </p>
+              <p>
+                <span>安装日期:</span>
+                <span>待开发</span>
+              </p>
+              <p>
+                <span>服役年限:</span>
+                <span>待开发</span>
+              </p>
+              <p>
+                <span>管理员:</span>
+                <span>待开发</span>
+              </p>
+            </el-col>
+            <el-col :span="4">
+              <h3>设备状态信息</h3>
+              <p>
+                <span>累计预警次数:</span>
+                <span>待开发</span>
+              </p>
+              <p>
+                <span>累计维修次数:</span>
+                <span>待开发</span>
+              </p>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row class="mt10" :gutter="10">
+      <el-col :span="12">
+        <el-card  :style="{height: '500px'}">
+          <el-row>
+            <el-col :span="24" class="flex alignItems gap10">
+              <h3>设备运行数据</h3>
+              <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+            </el-col>
+            <el-col :span="14">
+              <el-row>
+                <el-col :span="12">
+                  <LineChart></LineChart>
+                </el-col>
+                <el-col :span="12">
+                  <LineChart></LineChart>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="12">
+                  <LineChart></LineChart>
+                </el-col>
+                <el-col :span="12">
+                  <LineChart></LineChart>
+                </el-col>
+              </el-row>
+            </el-col>
+            <el-col :span="10">
+              <el-row>
+                <el-col :span="12">
+                  <BarChart height="200px" :dateRange="dateRange"></BarChart>
+                </el-col>
+                <el-col :span="12">
+                  <BarChart height="200px" :dateRange="dateRange"></BarChart>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="8">
+                  <BarChart2 height="200px" :dateRange="dateRange"></BarChart2>
+                </el-col>
+                <el-col :span="8">
+                  <BarChart2 height="200px" :dateRange="dateRange"></BarChart2>
+                </el-col>
+                <el-col :span="8">
+                  <BarChart2 height="200px" :dateRange="dateRange"></BarChart2>
+                </el-col>
+              </el-row>
+            </el-col>
+
+
+          </el-row>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card :style="{height: '500px'}">
+          <el-tabs v-model="selectedTab">
+            <el-tab-pane label="历史预警" :name="1">
+              历史预警
+            </el-tab-pane>
+            <el-tab-pane label="接口信息" :name="2">
+              接口信息
+            </el-tab-pane>
+            <el-tab-pane label="其他指标" :name="3">
+              其他指标
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+
+import BarChart from './BarChart1.vue'
+import LineChart from './LineChart.vue'
+import BarChart2 from './BarChart2.vue'
+export default {
+  name: "cardItem",
+  components: { BarChart, BarChart2, LineChart },
+  data() {
+    return {
+      dateRange: [],
+      selectedTab: 1
+    }
+  },
+  created() {
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file
diff --git a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/index.vue b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/index.vue
index 3da60b4b..03a0dfc3 100644
--- a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/index.vue
+++ b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/index.vue
@@ -40,7 +40,7 @@
             
             <div class="app-container" v-loading="loading">
               <el-row :gutter="10">
-                <el-col :span="8" class="card-box" v-for="(i,k) in userList" :key="k">
+                <el-col :span="8" class="card-box" v-for="(i,k) in userList" :key="k"  @click="handleDetail(i)">
                   <el-card>
                     <cardItem/>
                   </el-card>
@@ -385,6 +385,11 @@ export default {
         this.form.password = this.initPassword
       })
     },
+    /** 查看详情 */
+    handleDetail: function(row) {
+      const userId = row.userId
+      this.$router.push("/inMonitoring/devicesState-detail/detail/" + userId)
+    },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset()