cb/front-end
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

可视化与日志

Browse Source
This commit is contained in:
code_nan 2024-01-10 15:44:45 +08:00
parent 3451db7b8a
commit f4101e26af
4 changed files with 551 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/views/modules/monitoring/audit-log.vue
View File

@ -11,14 +11,31 @@
<el-button @click="fetchLogs">查询</el-button>
<el-table :data="logs" v-if="logs.length > 0">
<el-table-column prop="id" label="日志ID"></el-table-column>
<el-table
: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-container>
<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>
@ -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(){
}
}
};

161
src/views/modules/monitoring/chart-test.vue
View File

@ -1,38 +1,143 @@
<template>
<div>
<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
<el-card shadow="always">
<div slot="header" class="clearfix">
<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-row :gutter="10" style="margin-bottom:10px">
<el-card style="color:#409EFF">
<div id="main" style="width:1000px; height:800px; margin-left: auto; margin-right: auto;"></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 LineHeapChart from '../../../components/charts/LineHeapChart.vue'
import PieFlatChart from '../../../components/charts/PieFlatChart.vue'
import * as echarts from 'echarts';
export default {
name: 'index',
components: {
LineHeapChart,
PieFlatChart
name:"Home",
data(){
return{
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>

142
src/views/modules/monitoring/chart-test2.vue
View File

@ -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 myChart = echarts.init(chartDom);
var charOption;
charOption = {
var barchartDom = document.getElementById('bar');
var barChart = echarts.init(barchartDom);
var barOption;
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>

236
src/views/modules/monitoring/testn.vue Normal file
View File

@ -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>