更换组合式API写法
This commit is contained in:
不做码农
parent
4035eaee47
commit
6b505312d9
@ -1,101 +1,90 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
<div ref="chartRef" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
// import resize from './mixins/resize'
|
||||
|
||||
<script setup>
|
||||
import * as echarts from 'echarts'
|
||||
let chart = null
|
||||
const { proxy } = getCurrentInstance()
|
||||
const animationDuration = 6000
|
||||
const props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px',
|
||||
},
|
||||
})
|
||||
function initChart() {
|
||||
chart = echarts.init(proxy.$refs.chartRef, 'macarons')
|
||||
|
||||
export default {
|
||||
// mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
grid: {
|
||||
top: 10,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
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)
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
},
|
||||
grid: {
|
||||
top: 10,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: 'pageA',
|
||||
type: 'bar',
|
||||
stack: 'vistors',
|
||||
barWidth: '60%',
|
||||
data: [79, 52, 200, 334, 390, 330, 220],
|
||||
animationDuration
|
||||
}, {
|
||||
name: 'pageB',
|
||||
type: 'bar',
|
||||
stack: 'vistors',
|
||||
barWidth: '60%',
|
||||
data: [80, 52, 200, 334, 390, 330, 220],
|
||||
animationDuration
|
||||
}, {
|
||||
name: 'pageC',
|
||||
type: 'bar',
|
||||
stack: 'vistors',
|
||||
barWidth: '60%',
|
||||
data: [30, 52, 200, 334, 390, 330, 220],
|
||||
animationDuration
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'pageA',
|
||||
type: 'bar',
|
||||
stack: 'vistors',
|
||||
barWidth: '60%',
|
||||
data: [79, 52, 200, 334, 390, 330, 220],
|
||||
animationDuration,
|
||||
},
|
||||
{
|
||||
name: 'pageB',
|
||||
type: 'bar',
|
||||
stack: 'vistors',
|
||||
barWidth: '60%',
|
||||
data: [80, 52, 200, 334, 390, 330, 220],
|
||||
animationDuration,
|
||||
},
|
||||
{
|
||||
name: 'pageC',
|
||||
type: 'bar',
|
||||
stack: 'vistors',
|
||||
barWidth: '60%',
|
||||
data: [30, 52, 200, 334, 390, 330, 220],
|
||||
animationDuration,
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,133 +1,118 @@
|
||||
<template>
|
||||
<div :class="className" :style="{ height: height, width: width }" />
|
||||
<div ref="chartRef" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts'
|
||||
// import resize from './mixins/resize'
|
||||
const { proxy } = getCurrentInstance()
|
||||
const chartRef = ref(null)
|
||||
const props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '350px',
|
||||
},
|
||||
autoResize: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
chartData: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
let chart = null
|
||||
watch(
|
||||
() => props.chartData,
|
||||
(val) => {
|
||||
setOptions(val)
|
||||
},
|
||||
{ deep: true },
|
||||
)
|
||||
|
||||
export default {
|
||||
// mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '350px',
|
||||
},
|
||||
autoResize: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
chartData: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chartData: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.setOptions(val)
|
||||
function setOptions({ expectedData, actualData } = {}) {
|
||||
chart.setOption({
|
||||
xAxis: {
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el)
|
||||
this.setOptions(this.chartData)
|
||||
grid: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 20,
|
||||
top: 30,
|
||||
containLabel: true,
|
||||
},
|
||||
setOptions({ expectedData, actualData } = {}) {
|
||||
this.chart.setOption({
|
||||
xAxis: {
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 20,
|
||||
top: 30,
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
},
|
||||
padding: [5, 10],
|
||||
},
|
||||
yAxis: {
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['expected', 'actual'],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'expected',
|
||||
itemStyle: {
|
||||
color: '#FF005A',
|
||||
lineStyle: {
|
||||
color: '#FF005A',
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
data: expectedData,
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'cubicInOut',
|
||||
},
|
||||
{
|
||||
name: 'actual',
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
color: '#3888fa',
|
||||
areaStyle: {
|
||||
color: '#f3f8ff',
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#3888fa',
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
data: actualData,
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'quadraticOut',
|
||||
},
|
||||
],
|
||||
})
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
},
|
||||
padding: [5, 10],
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['expected', 'actual'],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'expected',
|
||||
itemStyle: {
|
||||
color: '#FF005A',
|
||||
lineStyle: {
|
||||
color: '#FF005A',
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
data: expectedData,
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'cubicInOut',
|
||||
},
|
||||
{
|
||||
name: 'actual',
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
color: '#3888fa',
|
||||
areaStyle: {
|
||||
color: '#f3f8ff',
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#3888fa',
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
data: actualData,
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'quadraticOut',
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
function initChart() {
|
||||
chart = echarts.init(proxy.$refs.chartRef, 'macarons')
|
||||
setOptions(props.chartData)
|
||||
}
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
})
|
||||
window.onresize = function () {
|
||||
chart.resize()
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,78 +1,60 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
<div ref="chartRef" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
// import resize from './mixins/resize'
|
||||
<script setup>
|
||||
import * as echarts from 'echarts'
|
||||
const { proxy } = getCurrentInstance()
|
||||
let chart = null
|
||||
const props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px',
|
||||
},
|
||||
})
|
||||
|
||||
export default {
|
||||
// mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
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)
|
||||
function initChart() {
|
||||
chart = echarts.init(proxy.$refs.chartRef)
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '10',
|
||||
data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'WEEKLY WRITE ARTICLES',
|
||||
type: 'pie',
|
||||
roseType: 'radius',
|
||||
radius: [15, 95],
|
||||
center: ['50%', '38%'],
|
||||
data: [
|
||||
{ value: 320, name: 'Industries' },
|
||||
{ value: 240, name: 'Technology' },
|
||||
{ value: 149, name: 'Forex' },
|
||||
{ value: 100, name: 'Gold' },
|
||||
{ value: 59, name: 'Forecasts' }
|
||||
],
|
||||
animationEasing: 'cubicInOut',
|
||||
animationDuration: 2600
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)',
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '10',
|
||||
data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'WEEKLY WRITE ARTICLES',
|
||||
type: 'pie',
|
||||
roseType: 'radius',
|
||||
radius: [15, 95],
|
||||
center: ['50%', '38%'],
|
||||
data: [
|
||||
{ value: 320, name: 'Industries' },
|
||||
{ value: 240, name: 'Technology' },
|
||||
{ value: 149, name: 'Forex' },
|
||||
{ value: 100, name: 'Gold' },
|
||||
{ value: 59, name: 'Forecasts' },
|
||||
],
|
||||
animationEasing: 'cubicInOut',
|
||||
animationDuration: 2600,
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
// import resize from './mixins/resize'
|
||||
|
||||
const animationDuration = 3000
|
||||
|
||||
|
||||
@ -5,15 +5,21 @@
|
||||
<el-input v-model="queryParams.ipaddr" placeholder="请输入登录地址" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable @keyup.enter="handleQuery" />
|
||||
<el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="登录状态" clearable >
|
||||
<el-select v-model="queryParams.status" placeholder="登录状态" clearable>
|
||||
<el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录时间">
|
||||
<el-date-picker v-model="dateRange" style="width: 240px" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
style="width: 240px"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
|
||||
@ -23,7 +29,9 @@
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['monitor:logininfor:remove']">删除</el-button>
|
||||
<el-button type="danger" plain icon="delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['monitor:logininfor:remove']"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="delete" @click="handleClean" v-hasPermi="['monitor:logininfor:remove']">清空</el-button>
|
||||
@ -43,7 +51,7 @@
|
||||
<el-table-column label="浏览器" align="center" prop="browser" />
|
||||
<el-table-column label="操作系统" align="center" prop="os" />
|
||||
<el-table-column label="操作状态" align="center" prop="status">
|
||||
<template #default="{row}">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="statusOptions" :value="row.status"></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@ -55,142 +63,124 @@
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
list,
|
||||
delLogininfor,
|
||||
cleanLogininfor,
|
||||
exportLogininfor,
|
||||
} from "@/api/monitor/logininfor";
|
||||
<script setup name="logininfor">
|
||||
import { list as queryList, delLogininfor, cleanLogininfor, exportLogininfor } from '@/api/monitor/logininfor'
|
||||
|
||||
export default {
|
||||
name: "logininfor",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 表格数据
|
||||
list: [],
|
||||
// 状态数据字典
|
||||
statusOptions: [],
|
||||
// 日期范围
|
||||
dateRange: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
ipaddr: undefined,
|
||||
userName: undefined,
|
||||
status: undefined,
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getDicts("sys_common_status").then((response) => {
|
||||
this.statusOptions = response.data;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
/** 查询登录日志列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
list(this.addDateRange(this.queryParams, this.dateRange)).then(
|
||||
(response) => {
|
||||
this.loading = false;
|
||||
if (response.code == 200) {
|
||||
this.list = response.data.result;
|
||||
this.total = response.data.totalNum;
|
||||
} else {
|
||||
this.total = 0;
|
||||
this.list = [];
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
// 登录状态字典翻译
|
||||
statusFormat(row, column) {
|
||||
return this.selectDictLabel(this.statusOptions, row.status);
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.dateRange = [];
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map((item) => item.infoId);
|
||||
this.multiple = !selection.length;
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const infoIds = row.infoId || this.ids;
|
||||
this.$confirm(
|
||||
'是否确认删除访问编号为"' + infoIds + '"的数据项?',
|
||||
"警告",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}
|
||||
)
|
||||
.then(function () {
|
||||
return delLogininfor(infoIds);
|
||||
})
|
||||
.then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
});
|
||||
},
|
||||
/** 清空按钮操作 */
|
||||
handleClean() {
|
||||
this.$confirm("是否确认清空所有登录日志数据项?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(function () {
|
||||
return cleanLogininfor();
|
||||
})
|
||||
.then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("清空成功");
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
const queryParams = this.queryParams;
|
||||
this.$confirm("是否确认导出所有操作日志数据项?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(function () {
|
||||
return exportLogininfor(queryParams);
|
||||
})
|
||||
.then((response) => {
|
||||
this.download(response.data.path);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
// 遮罩层
|
||||
const loading = ref(true)
|
||||
// 选中数组
|
||||
const ids = ref([])
|
||||
// 非多个禁用
|
||||
const multiple = ref(true)
|
||||
// 显示搜索条件
|
||||
const showSearch = ref(true)
|
||||
// 总条数
|
||||
const total = ref(0)
|
||||
// 表格数据
|
||||
const list = ref([])
|
||||
// 状态数据字典
|
||||
const statusOptions = ref([])
|
||||
// 日期范围
|
||||
const dateRange = ref([])
|
||||
// 查询参数
|
||||
const queryParams = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
ipaddr: undefined,
|
||||
userName: undefined,
|
||||
status: undefined,
|
||||
})
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
/** 查询登录日志列表 */
|
||||
function getList() {
|
||||
loading.value = true
|
||||
queryList(proxy.addDateRange(queryParams, dateRange.value)).then((response) => {
|
||||
loading.value = false
|
||||
if (response.code == 200) {
|
||||
list.value = response.data.result
|
||||
total.value = response.data.totalNum
|
||||
} else {
|
||||
total.value = 0
|
||||
list.value = []
|
||||
}
|
||||
})
|
||||
}
|
||||
// 登录状态字典翻译
|
||||
function statusFormat(row, column) {
|
||||
return proxy.selectDictLabel(statusOptions.value, row.status)
|
||||
}
|
||||
getList()
|
||||
proxy.getDicts('sys_common_status').then((response) => {
|
||||
statusOptions.value = response.data
|
||||
})
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
function handleQuery() {
|
||||
queryParams.pageNum = 1
|
||||
getList()
|
||||
}
|
||||
/** 重置按钮操作 */
|
||||
function resetQuery() {
|
||||
dateRange.value = []
|
||||
proxy.resetForm('queryForm')
|
||||
handleQuery()
|
||||
}
|
||||
// 多选框选中数据
|
||||
function handleSelectionChange(selection) {
|
||||
ids.value = selection.map((item) => item.infoId)
|
||||
multiple.value = !selection.length
|
||||
}
|
||||
/** 删除按钮操作 */
|
||||
function handleDelete(row) {
|
||||
const infoIds = row.infoId || ids.value
|
||||
proxy
|
||||
.$confirm('是否确认删除访问编号为"' + infoIds + '"的数据项?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(function () {
|
||||
return delLogininfor(infoIds)
|
||||
})
|
||||
.then(() => {
|
||||
getList()
|
||||
proxy.$modal.msgSuccess('删除成功')
|
||||
})
|
||||
}
|
||||
/** 清空按钮操作 */
|
||||
function handleClean() {
|
||||
proxy
|
||||
.$confirm('是否确认清空所有登录日志数据项?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(function () {
|
||||
return cleanLogininfor()
|
||||
})
|
||||
.then(() => {
|
||||
getList()
|
||||
proxy.$modal.msgSuccess('清空成功')
|
||||
})
|
||||
}
|
||||
/** 导出按钮操作 */
|
||||
function handleExport() {
|
||||
proxy
|
||||
.$confirm('是否确认导出所有操作日志数据项?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(function () {
|
||||
return exportLogininfor(queryParams)
|
||||
})
|
||||
.then((response) => {
|
||||
proxy.download(response.data.path)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -90,7 +90,7 @@
|
||||
|
||||
<!-- 操作日志详细 -->
|
||||
<el-dialog title="操作日志详细" v-model="open" width="700px" append-to-body>
|
||||
<el-form ref="form" :model="form" label-width="100px">
|
||||
<el-form ref="formRef" :model="form" label-width="100px">
|
||||
<el-row>
|
||||
<el-col :lg="12">
|
||||
<el-form-item label="操作模块：">{{ form.title }} </el-form-item>
|
||||
@ -136,148 +136,167 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { list, delOperlog, cleanOperlog, exportOperlog } from '@/api/monitor/operlog'
|
||||
<script setup name="operlog">
|
||||
import { list as listOperLog, delOperlog, cleanOperlog, exportOperlog } from '@/api/monitor/operlog'
|
||||
|
||||
export default {
|
||||
name: 'operlog',
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 表格数据
|
||||
list: [],
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 类型数据字典
|
||||
statusOptions: [],
|
||||
// 业务类型（0其它 1新增 2修改 3删除）选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
|
||||
businessTypeOptions: [],
|
||||
// 日期范围
|
||||
dateRange: [],
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
title: undefined,
|
||||
operName: undefined,
|
||||
businessType: undefined,
|
||||
status: undefined,
|
||||
},
|
||||
const { proxy } = getCurrentInstance()
|
||||
// 遮罩层
|
||||
const loading = ref(true)
|
||||
// 选中数组
|
||||
const ids = ref([])
|
||||
// 非多个禁用
|
||||
const multiple = ref(true)
|
||||
// 显示搜索条件
|
||||
const showSearch = ref(true)
|
||||
// 总条数
|
||||
const total = ref(0)
|
||||
// 表格数据
|
||||
const list = ref([])
|
||||
// 是否显示弹出层
|
||||
const open = ref(false)
|
||||
// 类型数据字典
|
||||
const statusOptions = ref([])
|
||||
// 业务类型（0其它 1新增 2修改 3删除）选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
|
||||
const businessTypeOptions = ref([])
|
||||
// 日期范围
|
||||
const dateRange = ref([])
|
||||
|
||||
const state = reactive({
|
||||
form: {},
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
title: undefined,
|
||||
operName: undefined,
|
||||
businessType: undefined,
|
||||
status: undefined,
|
||||
},
|
||||
})
|
||||
const { form, queryParams } = toRefs(state)
|
||||
var dictParams = [
|
||||
{ dictType: 'sys_oper_type', columnName: 'businessTypeOptions' },
|
||||
{ dictType: 'sys_common_status', columnName: 'statusOptions' },
|
||||
]
|
||||
proxy.getDicts(dictParams).then((response) => {
|
||||
response.data.forEach((element) => {
|
||||
proxy[element.columnName] = element.list
|
||||
})
|
||||
})
|
||||
/** 查询登录日志 */
|
||||
function getList() {
|
||||
loading.value = true
|
||||
listOperLog(proxy.addDateRange(queryParams.value, dateRange.value)).then((response) => {
|
||||
loading.value = false
|
||||
if (response.code == 200) {
|
||||
list.value = response.data.result
|
||||
total.value = response.data.totalNum
|
||||
} else {
|
||||
total.value = 0
|
||||
list.value = []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
var dictParams = [
|
||||
{ dictType: 'sys_oper_type', columnName: 'businessTypeOptions' },
|
||||
{ dictType: 'sys_common_status', columnName: 'statusOptions' },
|
||||
]
|
||||
this.getDicts(dictParams).then((response) => {
|
||||
response.data.forEach((element) => {
|
||||
this[element.columnName] = element.list
|
||||
})
|
||||
})
|
||||
}
|
||||
// 操作日志状态字典翻译
|
||||
function statusFormat(row, column) {
|
||||
return proxy.selectDictLabel(statusOptions.value, row.status)
|
||||
}
|
||||
/** 搜索按钮操作 */
|
||||
function handleQuery() {
|
||||
queryParams.value.pageNum = 1
|
||||
getList()
|
||||
}
|
||||
/** 重置按钮操作 */
|
||||
function resetQuery() {
|
||||
dateRange.value = []
|
||||
proxy.resetForm('queryForm')
|
||||
handleQuery()
|
||||
}
|
||||
// 多选框选中数据
|
||||
function handleSelectionChange(selection) {
|
||||
ids.value = selection.map((item) => item.operId)
|
||||
multiple.value = !selection.length
|
||||
}
|
||||
const formRef = ref()
|
||||
/** 重置操作表单 */
|
||||
function reset() {
|
||||
form.value = {
|
||||
operId: undefined,
|
||||
title: undefined,
|
||||
businessType: undefined,
|
||||
method: undefined,
|
||||
requestMethod: undefined,
|
||||
operatorType: undefined,
|
||||
deptName: undefined,
|
||||
operUrl: undefined,
|
||||
operIp: undefined,
|
||||
operLocation: undefined,
|
||||
operParam: undefined,
|
||||
jsonResult: undefined,
|
||||
status: 0,
|
||||
errorMsg: undefined,
|
||||
operTime: undefined,
|
||||
elapsed: 0,
|
||||
}
|
||||
proxy.resetForm('formRef')
|
||||
}
|
||||
/** 详细按钮操作 */
|
||||
function handleView(row) {
|
||||
reset()
|
||||
open.value = true
|
||||
form.value = row
|
||||
}
|
||||
/** 删除按钮操作 */
|
||||
function handleDelete(row) {
|
||||
const operIds = row.operId || ids.value
|
||||
proxy
|
||||
.$confirm('是否确认删除日志编号为"' + operIds + '"的数据项?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
/** 查询登录日志 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
list(this.addDateRange(this.queryParams, this.dateRange)).then((response) => {
|
||||
this.loading = false
|
||||
if (response.code == 200) {
|
||||
this.list = response.data.result
|
||||
this.total = response.data.totalNum
|
||||
.then(function () {
|
||||
return delOperlog(operIds)
|
||||
})
|
||||
.then(() => {
|
||||
getList()
|
||||
proxy.$modal.msgSuccess('删除成功')
|
||||
})
|
||||
}
|
||||
/** 清空按钮操作 */
|
||||
function handleClean() {
|
||||
proxy
|
||||
.$confirm('是否确认清空所有操作日志数据项?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(function () {
|
||||
return cleanOperlog()
|
||||
})
|
||||
.then(() => {
|
||||
getList()
|
||||
proxy.$modal.msgSuccess('清空成功')
|
||||
})
|
||||
}
|
||||
/** 导出按钮操作 */
|
||||
function handleExport() {
|
||||
proxy
|
||||
.$confirm('是否确认导出所有操作日志?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
exportOperlog(queryParams.value).then((response) => {
|
||||
const { code, data } = response
|
||||
if (code == 200) {
|
||||
proxy.$modal.msgSuccess('导出成功')
|
||||
proxy.download(data.path)
|
||||
} else {
|
||||
this.total = 0
|
||||
this.list = []
|
||||
proxy.$modal.msgError('导出失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 操作日志状态字典翻译
|
||||
statusFormat(row, column) {
|
||||
return this.selectDictLabel(this.statusOptions, row.status)
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.dateRange = []
|
||||
this.resetForm('queryForm')
|
||||
this.handleQuery()
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map((item) => item.operId)
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 详细按钮操作 */
|
||||
handleView(row) {
|
||||
this.open = true
|
||||
this.form = row
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const operIds = row.operId || this.ids
|
||||
this.$confirm('是否确认删除日志编号为"' + operIds + '"的数据项?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(function () {
|
||||
return delOperlog(operIds)
|
||||
})
|
||||
.then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess('删除成功')
|
||||
})
|
||||
},
|
||||
/** 清空按钮操作 */
|
||||
handleClean() {
|
||||
this.$confirm('是否确认清空所有操作日志数据项?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(function () {
|
||||
return cleanOperlog()
|
||||
})
|
||||
.then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess('清空成功')
|
||||
})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
const queryParams = this.queryParams
|
||||
this.$confirm('是否确认导出所有操作日志?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
exportOperlog(queryParams).then((response) => {
|
||||
const { code, data } = response
|
||||
if (code == 200) {
|
||||
this.$modal.msgSuccess('导出成功')
|
||||
this.download(data.path)
|
||||
} else {
|
||||
this.$modal.msgError('导出失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
handleQuery()
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user