可视化与日志
code_nan
parent
3451db7b8a
commit
f4101e26af
|
|
@ -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(){
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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