可视化与日志

src/views/modules/monitoring/audit-log.vue

@@ -11,14 +11,31 @@
   
       <el-button @click="fetchLogs">查询</el-button>
   
-      <el-table :data="logs" v-if="logs.length > 0">
+      <el-table 
-        <el-table-column prop="id" label="日志ID"></el-table-column>
+        :data="logs.slice((currentPage-1)*pagesize,currentPage*pagesize)"  
+        highlight-current-row 
+        border 
+        stripe
+        fit 
+        :cell-style="cellStyle"  >
+        <el-table-column prop="id" label="序号"></el-table-column>
         <el-table-column prop="message" label="日志内容"></el-table-column>
-        <el-table-column prop="timestamp" label="时间戳"></el-table-column>
+        <el-table-column prop="timestamp" label="时间"></el-table-column>
+        <el-table-column prop="operation" label="操作">
+          <el-button size="mini" @click="readlogs">查看</el-button>
+        </el-table-column>
       </el-table>
-      <el-container style="height: 400px;">  
+      
-      <el-chart :options="chartOptions" ref="myChart"></el-chart>  
+      <el-pagination
-    </el-container>  
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          background
+          :page-sizes="[1,3,5,8,10]"  
+          :page-size="pagesize"         
+          layout="total, sizes,  prev, pager, next, jumper" 
+          :total="userTableData.length">   
+      </el-pagination>
     </div>
   </template>
   
@@ -26,37 +43,37 @@
   export default {
     data() {
       return {
+        logs: [ // 这里可以根据需要从后台获取真实数据
+             { id: 1, message: "日志1", timestamp: "2024-01-05 10:30:00" },
+             { id: 2, message: "日志2", timestamp: "2024-01-05 11:15:00" },
+             { id: 3, message: "日志3", timestamp: "2024-01-06 11:15:00" },
+             { id: 4, message: "日志4", timestamp: "2024-01-07 11:15:00" },
+             { id: 5, message: "日志5", timestamp: "2024-01-08 11:15:00" },
+             { id: 6, message: "日志6", timestamp: "2024-01-09 11:15:00" },
+      ],
+      currentPage:1, // 初始页
+      pagesize:3,  // 初始每页的数据 
         accounts: [
           { id: 1, name: "子账号1" },
           { id: 2, name: "子账号2" },
           // 添加更多子账号
         ],
         selectedAccount: null,
-        logs: [ // 这里可以根据需要从后台获取真实数据
+
-             { id: 1, message: "日志1", timestamp: "2024-01-05 10:30:00" },
-             { id: 2, message: "日志2", timestamp: "2024-01-05 11:15:00" },
-      ],
-      chartOptions: {  
-        title: {  
-          text: '柱状图示例'  
-        },  
-        tooltip: {},  
-        xAxis: {  
-          data: ['类别1', '类别2', '类别3', '类别4', '类别5']  
-        },  
-        yAxis: {},  
-        series: [{  
-          name: '数量',  
-          type: 'bar',  
-          data: [5, 20, 36, 10, 10]  
-        }]  
-      }  
       };
     },
     mounted() {  
     this.renderChart()  
   },  
     methods: {
+      // handleSizeChange: function (size) {
+      //         this.pagesize = size;
+      //         console.log(this.pagesize)  //每页下拉显示数据
+      //     },
+      // handleCurrentChange: function(currentPage){
+      //         this.currentPage = currentPage;
+      //         console.log(this.currentPage)  //点击第几页
+      //     },
       fetchLogs() {
         // 模拟从后端获取日志数据的过程
         // 这里可以使用axios或其他HTTP库发送请求
@@ -73,15 +90,20 @@
         //   ]
         // };
 
+  
         // 模拟异步请求
         setTimeout(() => {
           // 将返回的日志数据赋值给logs数组
           this.logs = response.data;
         }, 1000);
       },
+
       renderChart() {  
       const myChart = echarts.init(this.$refs.myChart)  
       myChart.setOption(this.chartOptions)  
+    } , 
+      readlogs(){
+
       }
     }
   };

src/views/modules/monitoring/chart-test.vue

@@ -1,38 +1,143 @@
 <template>
     <div>
-        <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
+        <el-row :gutter="10" style="margin-bottom:10px">
-            <el-card shadow="always">
+            <el-card style="color:#409EFF">
-                <div slot="header" class="clearfix">
+                    <div id="main" style="width:1000px; height:800px; margin-left: auto; margin-right: auto;"></div>
-                <span>数据上报</span>
-                <span class="card-div-desc">{{ lineCardTitle }}</span>
-                <el-radio-group style="float: right; padding: 3px 0" v-model="lineDataType"
-                                size="mini" @change="handleLineChange">
-                    <el-radio-button label="order">运行情况</el-radio-button>
-                    <el-radio-button label="sale">应用情况</el-radio-button>
-                </el-radio-group>
-                </div>
-                <div>
-                <LineHeapChart
-                    height="600px"
-                    :xAxisData="lineXAxisData"
-                    :seriesData="lineSeriesData"
-                />
-                </div>
                 </el-card>
-            </el-col>
+        </el-row>
+        <!-- <el-row :gutter="10" style="margin-bottom:10px">
+            <el-card style="color:#409EFF">
+                    <div id="main" style="width:1000px; height:400px; margin-left: auto; margin-right: auto;"></div>
+                </el-card>
+        </el-row> -->
     </div>
 </template>
-  
 <script>
-import * as echarts from "echarts";
+import * as echarts from 'echarts';
-  
-import LineHeapChart from '../../../components/charts/LineHeapChart.vue'
-import PieFlatChart from '../../../components/charts/PieFlatChart.vue'
 
 export default {
-  name: 'index',
+    name:"Home",
-  components: {
+    data(){
-    LineHeapChart,
+        return{
-    PieFlatChart
+            total:0
-  },
         }
+    },
+    mounted(){       //使用mounted的目的是为了等页面元素渲染之后再触发
+    
+        var chartDom = document.getElementById('main');
+        var myChart = echarts.init(chartDom);
+        var option;
+
+        const gaugeData = [
+  {
+    value: 20,
+    name: 'Perfect',
+    title: {
+      offsetCenter: ['0%', '-30%']
+    },
+    detail: {
+      valueAnimation: true,
+      offsetCenter: ['0%', '-20%']
+    }
+  },
+  {
+    value: 40,
+    name: 'Good',
+    title: {
+      offsetCenter: ['0%', '0%']
+    },
+    detail: {
+      valueAnimation: true,
+      offsetCenter: ['0%', '10%']
+    }
+  },
+  {
+    value: 60,
+    name: 'Commonly',
+    title: {
+      offsetCenter: ['0%', '30%']
+    },
+    detail: {
+      valueAnimation: true,
+      offsetCenter: ['0%', '40%']
+    }
+  }
+];
+option = {
+  series: [
+    {
+      type: 'gauge',
+      startAngle: 90,
+      endAngle: -270,
+      pointer: {
+        show: false
+      },
+      progress: {
+        show: true,
+        overlap: false,
+        roundCap: true,
+        clip: false,
+        itemStyle: {
+          borderWidth: 1,
+          borderColor: '#464646'
+        }
+      },
+      axisLine: {
+        lineStyle: {
+          width: 40
+        }
+      },
+      splitLine: {
+        show: false,
+        distance: 0,
+        length: 10
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        show: false,
+        distance: 50
+      },
+      data: gaugeData,
+      title: {
+        fontSize: 14
+      },
+      detail: {
+        width: 50,
+        height: 14,
+        fontSize: 14,
+        color: 'inherit',
+        borderColor: 'inherit',
+        borderRadius: 20,
+        borderWidth: 1,
+        formatter: '{value}%'
+      }
+    }
+  ]
+};
+setInterval(function () {
+  gaugeData[0].value = +(Math.random() * 100).toFixed(2);
+  gaugeData[1].value = +(Math.random() * 100).toFixed(2);
+  gaugeData[2].value = +(Math.random() * 100).toFixed(2);
+  myChart.setOption({
+    series: [
+      {
+        data: gaugeData,
+        pointer: {
+          show: false
+        }
+      }
+    ]
+  });
+}, 2000);
+      
+           myChart.setOption(option);
+        
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/modules/monitoring/chart-test2.vue

@@ -4,25 +4,25 @@
             <el-col :span="6">
                 <el-card style="color:#409EFF">
                     <div><i class="el-icon-user-solid"/>运行设备数量</div>
-                    <div style="padding:10px 0;text-align:center;font-weight:bold">{{total}}</div>
+                    <div style="padding:5px 0;text-align:center;font-weight:bold;font-size: 30px;">{{total}}</div>
                 </el-card>
             </el-col>
              <el-col :span="6">
                 <el-card style="color:#F56C6C">
                     <div><i class="el-icon-money"/>设备总量</div>
-                    <div style="padding:10px 0;text-align:center;font-weight:bold">1000</div>
+                    <div style="padding:5px 0;text-align:center;font-weight:bold;font-size: 30px;">1000</div>
                 </el-card>
             </el-col>
              <el-col :span="6">
                 <el-card  style="color:#67C23A">
                     <div><i class="el-icon-bank-card"/>覆盖地区</div>
-                    <div style="padding:10px 0;text-align:center;font-weight:bold">320</div>
+                    <div style="padding:5px 0;text-align:center;font-weight:bold;font-size: 30px">320</div>
                 </el-card>
             </el-col>
              <el-col :span="6">
                 <el-card  style="color:#409EFF">
                     <div style="color:#409EFF"><i class="el-icon-s-shop"/>上报数量</div>
-                    <div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
+                    <div style="padding:5px 0;text-align:center;font-weight:bold;font-size: 30px">100</div>
                 </el-card>
             </el-col>
         </el-row>
@@ -30,7 +30,7 @@
             <el-col :span="12">
                 <el-card style="color:#409EFF">
                     <div><i class="el-icon-bank-card"/>覆盖地区</div>
-                    <div id="main" style="width:500px; height:400px"></div>
+                    <div id="bar" style="width:500px; height:400px"></div>
                 </el-card>
             </el-col>
 
@@ -44,27 +44,99 @@
 
         <el-row :gutter="10" style="margin-bottom:10px">
             <el-card style="color:#409EFF">
-                    <div><i class="el-icon-bank-card"/>流量上报</div>
+                    <div><i class="el-icon-bell"/>流量上报</div>
                     <div id="stacked-area" style="width:1000px; height:400px; margin-left: auto; margin-right: auto;"></div>
                 </el-card>
         </el-row>
+        <el-row :gutter="10" style="margin-bottom:10px">
+            <el-col :span="12">
+                <el-card style="color:#409EFF">
+                    <div><i class="el-icon-map-location"/>设备运行</div>
+                    <div id="radar" style="width:500px; height:400px; margin-left: auto; margin-right: auto;"></div>
+                </el-card>
+            </el-col>
+            <el-col :span="12">
+                <el-card style="color:#409EFF">
+                    <div><i class="el-icon-map-location"/>设备信息</div>
+                    <el-table
+                        :data="tableData"
+                        height="400"
+                        border
+                        style="width: 100%">
+                        <el-table-column
+                        prop="id"
+                        label="序号"
+                        width="180">
+                        </el-table-column>
+                        <el-table-column
+                        prop="name"
+                        label="设备名称"
+                        width="180">
+                        </el-table-column>
+                        <el-table-column
+                        prop="count"
+                        label="运行数">
+                        </el-table-column>
+                    </el-table>
+                </el-card>
+            </el-col>
+
+        </el-row>
     </div>
 </template>
 <script>
 import * as echarts from 'echarts';
+
 export default {
     name:"Home",
     data(){
         return{
-            total:0
+            total:0,
+            tableData: [{
+                id: '1',
+                name: '设备1',
+                count: '209'
+                }, {
+                id: '2',
+                name: '设备2',
+                count: '126'
+                }, {
+                id: '3',
+                name: '设备3',
+                count: '96'
+                }, {
+                id: '4',
+                name: '设备4',
+                count: '82'
+                }, {
+                id: '5',
+                name: '设备5',
+                count: '76'
+                }, {
+                id: '6',
+                name: '设备6',
+                count: '58'
+                }, {
+                id: '7',
+                name: '设备7',
+                count: '49'
+                },{
+                id: '8',
+                name: '设备8',
+                count: '38'
+                },{
+                id: '9',
+                name: '设备9',
+                count: '28'
+                }]
         }
     },
     mounted(){       //使用mounted的目的是为了等页面元素渲染之后再触发
     
-        var chartDom = document.getElementById('main');
+        var barchartDom = document.getElementById('bar');
-        var myChart = echarts.init(chartDom);
+        var barChart = echarts.init(barchartDom);
-        var charOption;
+        var barOption;
-        charOption = {
+        barOption = {
             title: {
                 text: '运行设备统计',
                 subtext: '趋势图',
@@ -238,13 +310,57 @@ export default {
                 }
             ]
             };
+            var radarDom = document.getElementById('radar');
+            var radarChart = echarts.init(radarDom);
+            var radarOption;
+
+            radarOption = {
+            title: {
+                text:''
+            },
+            legend: {
+                data: ['高端型号', '中端型号']
+            },
+            radar: {
+                // shape: 'circle',
+                indicator: [
+                { name: '当前活跃', max: 6500 },
+                { name: '活跃峰值', max: 16000 },
+                { name: '存活峰值', max: 30000 },
+                { name: '已创建', max: 38000 },
+                { name: '已过期', max: 52000 },
+                { name: '已拒绝', max: 25000 }
+                ]
+            },
+            series: [
+                {
+                name: '高端型号 vs 中端型号',
+                type: 'radar',
+                data: [
+                    {
+                    value: [4200, 3000, 20000, 35000, 50000, 18000],
+                    name: '高端型号'
+                    },
+                    {
+                    value: [5000, 14000, 28000, 26000, 42000, 21000],
+                    name: '中端型号'
+                    }
+                ]
+                }
+            ]
+            };
+
+        
+            radarChart.setOption(radarOption);
+
+
 
         // this.request("http://localhost:8002/echarts").then(res=>{  
         //     console.log(res.data);          
         //      charOption.series[0].data=res.data;
         //      charOption.series[1].data=res.data;
         //      this.total=res.data[4];
-              myChart.setOption(charOption);
+            barChart.setOption(barOption);
 
         //     pieOption.series[0].data=[
         //         {name:"第一季度",value:res.data[0]},
@@ -257,6 +373,8 @@ export default {
 
             StackedareaChart.setOption(StackedareaOption);
                 
+           // strokeanimationChart.setOption(strokeanimationOption);
+        
     }
 }
 </script>

src/views/modules/monitoring/testn.vue

@@ -0,0 +1,236 @@
+<template>
+    <div>
+        <el-select v-model="selectedAccount" placeholder="选择账号">
+        <el-option
+          v-for="account in accounts"
+          :key="account.id"
+          :label="account.name"
+          :value="account.id"
+        ></el-option>
+      </el-select>
+  
+      <el-button @click="fetchLogs">查询</el-button>
+      <el-button type="primary" icon="el-icon-circle-plus" >新增日志</el-button>
+      <!-- 日志列表 -->
+      <!-- 
+        data 显示的数据   这里增加了分页功能
+        highlight-current-row 是否要高亮当前行 默认false
+        border 是否带有纵向边框 默认false
+        stripe 是否为斑马纹 默认false
+        fit 列的宽度是否自撑开	默认true
+        cell-style 通过回调函数逻辑操作增加style样式
+       -->
+      <el-table 
+        :data="userTableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"  
+        highlight-current-row 
+        border 
+        stripe
+        fit 
+        :cell-style="cellStyle"  >
+      <!-- id --> 
+        <el-table-column label="id" type="index" width="150px" align="center" :index="indexMethod"></el-table-column>
+        <!-- <el-table-column prop="id" label="id" width="90" align="center"></el-table-column> -->
+
+        <!-- 
+          prop  字段值
+          label 字段名称
+          width 宽度
+          align 是否剧中
+         -->
+        <!-- 日志内容 -->
+        <el-table-column prop="message" label="日志内容" width="500px" align="center"></el-table-column>
+        <!-- 时间 -->
+        <el-table-column   prop="timestamp" label="时间" width="300px" align="center" sortable>
+         <!-- <template slot-scope="scope">    
+              <i class="el-icon-time"></i>
+              <span style="margin-left: 10px">{{scope.row.birthday}}</span>
+        </template> -->
+        </el-table-column>
+        <!-- 操作列  -->
+        <!-- fixed 列是否固定在左侧或者右侧，true 表示固定在左侧  可选:true, left, right -->
+      <el-table-column fixed="right"  label="操作"  width="200px" align="center" >
+        <template slot-scope="scope"> 
+          <!--
+             scope.row就是这一行的数据  
+             size 尺寸 medium / small / mini
+             type 类型 	primary / success / warning / danger / info / text
+             icon 图标类名
+          -->
+          <el-button @click="handleDelete(scope.row)" type="danger" icon="el-icon-delete"  size="small" >删除</el-button>
+          <el-button type="warning" icon="el-icon-edit" size="small">编辑</el-button>
+        </template>
+      </el-table-column>
+
+      </el-table>
+      <!-- 分页 -->
+      <!-- 
+          @size-change //  pageSize 改变时会触发 每页条数
+          @current-change //  currentPage 改变时会触发 当前页
+          :current-page //  默认false
+          background//  是否为分页按钮添加背景色
+          :page-sizes // 每页显示个数选择器的选项设置 这是下拉框可以选择的，每选择一行，要展示多少内容 类似：[10, 20, 30, 40, 50, 100]
+          page-sizes=显示当前行的条数
+          layout // 组件布局，子组件名用逗号分隔
+         :total // 总条目数,一般从展示列表的总数获取
+       -->
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        background
+        :page-sizes="[1,3,5,8,10]"  
+        :page-size="pagesize"         
+        layout="total, sizes,  prev, pager, next, jumper" 
+        :total="userTableData.length">   
+      </el-pagination>
+    </div>
+  </template>
+  
+  <script>
+  // 引入axios
+  import axios from "axios";
+  export default {
+    name: "User",
+    data() {
+      return {
+        userTableData: [             
+            { id: 1, message: "日志1", timestamp: "2024-01-05 10:30:00" },
+             { id: 2, message: "日志2", timestamp: "2024-01-05 11:15:00" },
+             { id: 3, message: "日志3", timestamp: "2024-01-06 11:15:00" },
+             { id: 4, message: "日志4", timestamp: "2024-01-07 11:15:00" },
+             { id: 5, message: "日志5", timestamp: "2024-01-08 11:15:00" },
+             { id: 6, message: "日志6", timestamp: "2024-01-09 11:15:00" },
+             { id: 7, message: "日志7", timestamp: "2024-01-05 10:30:00" },
+             { id: 8, message: "日志8", timestamp: "2024-01-05 11:15:00" },
+             { id: 9, message: "日志9", timestamp: "2024-01-06 11:15:00" },
+             { id: 10, message: "日志10", timestamp: "2024-01-07 11:15:00" },
+             { id: 11, message: "日志11", timestamp: "2024-01-08 11:15:00" },
+             { id: 12, message: "日志12", timestamp: "2024-01-09 11:15:00" },
+            ], // 日志列表测试数据
+        currentPage:1, // 初始页
+        pagesize:3,  // 初始每页的数据
+        accounts: [
+          { id: 1, name: "子账号1" },
+          { id: 2, name: "子账号2" },
+          // 添加更多子账号
+        ],
+      };
+    },
+    methods: {
+        // 初始页currentPage、初始每页数据数pagesize和数据data
+        handleSizeChange: function (size) {
+                this.pagesize = size;
+                console.log(this.pagesize)  //每页下拉显示数据
+        },
+        handleCurrentChange: function(currentPage){
+                this.currentPage = currentPage;
+                console.log(this.currentPage)  //点击第几页
+        },
+      //改变表格某一列或者某一个单元格文本颜色 
+      cellStyle({row, column, rowIndex, columnIndex}) {
+        // 定义样式变量
+        let cellStyle;
+        // 根据每一行的status属性的值进行判断
+        // 如果是正常就展示以绿色字体展示，如果是禁用就以红色颜色展示
+        switch(row.status) {
+          // 0代表正常
+            case 0:
+              // 设置文本颜色 绿色 可以直接写颜色编码，也可以直接写颜色的单词
+              cellStyle = 'color:#70DB93';
+              break;
+              // 0代表金禁用
+            case 1:
+              // 设置文本颜色 红色
+              cellStyle = 'color:red';
+              break;
+              // 如果有其他状态，就默认显示，不给文本颜色
+            default:
+            cellStyle = '';
+        }
+          
+          //return cellStyle  // 返回最终处理过的样式 这样写就是让全部行被style修饰
+          // 返回最终处理过的样式 只让账号状态这个属性的属性被style修饰
+           if(column.label == '账号状态'){
+            return cellStyle
+          }
+      },
+      // 展示列表      
+      queryUserList() {
+         axios.get('http://localhost:9090/user/queryList', {
+            // 传递的参数
+            params: {
+            
+            }
+            // 回调函数,一定要使用箭头函数,不然this的指向不是vue示例
+            }).then(res =>{
+              // 请求成功后的数据返回给列表用于展示
+               this.userTableData = res.data.data;
+            }).catch(error =>{
+               console.log(error)
+            })
+      },
+      // 序列自增
+      indexMethod(index) {
+        // 每次自增1 可灵活修改
+        return (index += 1);
+      },
+      // 删除
+      handleDelete(row) {
+          // 确认框确认是否要删除
+          this.$confirm("确定要删除"+row.userName+"吗?", "删除提示", {
+            iconClass: "el-icon-question", //自定义图标样式
+            confirmButtonText: "残忍删除", //确认按钮文字
+            cancelButtonText: "取消删除", //取消按钮文字
+            showClose: true, //是否显示右上角关闭按钮  默认false
+            type: "warning", //提示类型  success/info/warning/error
+            //center:"true", //文字居中 默认false
+        }).then(res=> {  //选择确认按钮进入此方法
+            //确认操作 请求删除接口
+           axios.get('http://localhost:9090/user/delete', {
+            // 传递的参数
+            params: {
+              id:row.id //id,从row获取当前行的id
+            }
+            // 回调函数,一定要使用箭头函数,不然this的指向不是vue示例
+            }).then(res =>{
+                // 删除成功
+                if(res.data.status===200){
+                  // 删除成功提示
+                  this.$message({showClose: true, message: '删除成功！',type: 'success', duration:1000,center:true});
+                  // 重新刷新最新的列表
+                  this.queryUserList();
+                }
+               
+            }).catch(error =>{
+               console.log(error)
+            })
+        }).catch(() => { //选择取消按钮进入此方法
+          //取消操作
+        });    
+      }
+      // 打开新的弹窗
+        //  open() {
+        //   this.$alert('这是一段内容', '标题名称', {
+        //     confirmButtonText: '确定',
+        //     callback: action => {
+        //       this.$message({
+        //         type: 'info',
+        //         message: `action: ${ action }`
+        //       });
+        //     }
+        //   });
+        // },
+    },
+    mounted() {
+      // 页面加载就渲染列表
+      this.queryUserList();
+    },
+  };
+  </script>
+  
+  <style  >
+  </style>
+  
+  
+  
+