可视化与日志
code_nan
parent
3451db7b8a
commit
f4101e26af
|
|
@ -11,14 +11,31 @@
|
||||||
|
|
||||||
<el-button @click="fetchLogs">查询</el-button>
|
<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="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-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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -26,37 +43,37 @@
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
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: [
|
accounts: [
|
||||||
{ id: 1, name: "子账号1" },
|
{ id: 1, name: "子账号1" },
|
||||||
{ id: 2, name: "子账号2" },
|
{ id: 2, name: "子账号2" },
|
||||||
// 添加更多子账号
|
// 添加更多子账号
|
||||||
],
|
],
|
||||||
selectedAccount: null,
|
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() {
|
mounted() {
|
||||||
this.renderChart()
|
this.renderChart()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// handleSizeChange: function (size) {
|
||||||
|
// this.pagesize = size;
|
||||||
|
// console.log(this.pagesize) //每页下拉显示数据
|
||||||
|
// },
|
||||||
|
// handleCurrentChange: function(currentPage){
|
||||||
|
// this.currentPage = currentPage;
|
||||||
|
// console.log(this.currentPage) //点击第几页
|
||||||
|
// },
|
||||||
fetchLogs() {
|
fetchLogs() {
|
||||||
// 模拟从后端获取日志数据的过程
|
// 模拟从后端获取日志数据的过程
|
||||||
// 这里可以使用axios或其他HTTP库发送请求
|
// 这里可以使用axios或其他HTTP库发送请求
|
||||||
|
|
@ -73,15 +90,20 @@
|
||||||
// ]
|
// ]
|
||||||
// };
|
// };
|
||||||
|
|
||||||
|
|
||||||
// 模拟异步请求
|
// 模拟异步请求
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
// 将返回的日志数据赋值给logs数组
|
// 将返回的日志数据赋值给logs数组
|
||||||
this.logs = response.data;
|
this.logs = response.data;
|
||||||
}, 1000);
|
}, 1000);
|
||||||
},
|
},
|
||||||
|
|
||||||
renderChart() {
|
renderChart() {
|
||||||
const myChart = echarts.init(this.$refs.myChart)
|
const myChart = echarts.init(this.$refs.myChart)
|
||||||
myChart.setOption(this.chartOptions)
|
myChart.setOption(this.chartOptions)
|
||||||
|
} ,
|
||||||
|
readlogs(){
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,38 +1,143 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<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-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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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 {
|
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>
|
||||||
|
|
|
||||||
|
|
@ -4,25 +4,25 @@
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<el-card style="color:#409EFF">
|
<el-card style="color:#409EFF">
|
||||||
<div><i class="el-icon-user-solid"/>运行设备数量</div>
|
<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-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<el-card style="color:#F56C6C">
|
<el-card style="color:#F56C6C">
|
||||||
<div><i class="el-icon-money"/>设备总量</div>
|
<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-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<el-card style="color:#67C23A">
|
<el-card style="color:#67C23A">
|
||||||
<div><i class="el-icon-bank-card"/>覆盖地区</div>
|
<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-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<el-card style="color:#409EFF">
|
<el-card style="color:#409EFF">
|
||||||
<div style="color:#409EFF"><i class="el-icon-s-shop"/>上报数量</div>
|
<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-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
@ -30,7 +30,7 @@
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-card style="color:#409EFF">
|
<el-card style="color:#409EFF">
|
||||||
<div><i class="el-icon-bank-card"/>覆盖地区</div>
|
<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-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
|
|
@ -44,27 +44,99 @@
|
||||||
|
|
||||||
<el-row :gutter="10" style="margin-bottom:10px">
|
<el-row :gutter="10" style="margin-bottom:10px">
|
||||||
<el-card style="color:#409EFF">
|
<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>
|
<div id="stacked-area" style="width:1000px; height:400px; margin-left: auto; margin-right: auto;"></div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-row>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name:"Home",
|
name:"Home",
|
||||||
data(){
|
data(){
|
||||||
return{
|
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的目的是为了等页面元素渲染之后再触发
|
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: {
|
title: {
|
||||||
text: '运行设备统计',
|
text: '运行设备统计',
|
||||||
subtext: '趋势图',
|
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=>{
|
// this.request("http://localhost:8002/echarts").then(res=>{
|
||||||
// console.log(res.data);
|
// console.log(res.data);
|
||||||
// charOption.series[0].data=res.data;
|
// charOption.series[0].data=res.data;
|
||||||
// charOption.series[1].data=res.data;
|
// charOption.series[1].data=res.data;
|
||||||
// this.total=res.data[4];
|
// this.total=res.data[4];
|
||||||
myChart.setOption(charOption);
|
barChart.setOption(barOption);
|
||||||
|
|
||||||
// pieOption.series[0].data=[
|
// pieOption.series[0].data=[
|
||||||
// {name:"第一季度",value:res.data[0]},
|
// {name:"第一季度",value:res.data[0]},
|
||||||
|
|
@ -257,6 +373,8 @@ export default {
|
||||||
|
|
||||||
StackedareaChart.setOption(StackedareaOption);
|
StackedareaChart.setOption(StackedareaOption);
|
||||||
|
|
||||||
|
// strokeanimationChart.setOption(strokeanimationOption);
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue