操作日志修改

src/api/monitor/operlog.js

@@ -2,25 +2,41 @@ import request from '@/utils/request'
 
 // 查询操作日志列表
 export function list(query) {
-  return request({
-    url: '/monitor/operlog/list',
-    method: 'get',
-    params: query
-  })
+	return request({
+		url: '/monitor/operlog/list',
+		method: 'get',
+		params: query
+	})
+}
+// 查询操作日志统计
+export function calcData(query) {
+	return request({
+		url: '/monitor/operlog/calc',
+		method: 'get',
+		params: query
+	})
+}
+// 图表分析
+export function analData(query) {
+	return request({
+		url: '/monitor/operlog/anal',
+		method: 'get',
+		params: query
+	})
 }
 
 // 删除操作日志
 export function delOperlog(operId) {
-  return request({
-    url: '/monitor/operlog/' + operId,
-    method: 'delete'
-  })
+	return request({
+		url: '/monitor/operlog/' + operId,
+		method: 'delete'
+	})
 }
 
 // 清空操作日志
 export function cleanOperlog() {
-  return request({
-    url: '/monitor/operlog/clean',
-    method: 'delete'
-  })
-}
+	return request({
+		url: '/monitor/operlog/clean',
+		method: 'delete'
+	})
+}

src/views/monitor/operlog/index.vue

@@ -44,7 +44,7 @@
 
 		<el-row :gutter="10" class="mb8">
 			<el-col :span="1.5">
-				<el-button type="primary" plain icon="HelpFilled" @click="handleAnalysis">图表分析</el-button>
+				<el-button type="primary" plain icon="HelpFilled" @click="handleAnal">图表分析</el-button>
 			</el-col>
 			<el-col :span="1.5">
 				<el-button type="primary" plain icon="Histogram" @click="handleCalc">操作统计</el-button>
@@ -108,34 +108,6 @@
 			v-model:limit="queryParams.pageSize" @pagination="getList" />
 
 		<!-- 操作日志详细 -->
-		<el-dialog title="操作日志详细" v-model="calc" width="700px" append-to-body>
-			<el-table ref="operlogRef" v-loading="loading" :data="operlogList"
-				:default-sort="defaultSort" @sort-change="handleSortChange">
-				<!-- <el-table-column type="selection" width="50" align="center" /> -->
-				<el-table-column label="操作人员" align="center" width="110" prop="operName" :show-overflow-tooltip="true"
-					sortable="custom" :sort-orders="['descending', 'ascending']" />
-				<el-table-column label="主机" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
-				<el-table-column label="事件类型" align="center" prop="eventType">
-					<template #default="scope">
-						<dict-tag :options="event_type" :value="scope.row.eventType" />
-					</template>
-				</el-table-column>
-				<el-table-column label="操作类型" align="center" prop="businessType">
-					<template #default="scope">
-						<dict-tag :options="sys_oper_type" :value="scope.row.businessType" />
-					</template>
-				</el-table-column>
-				<el-table-column label="操作次数" align="center" class-name="small-padding fixed-width">
-				</el-table-column>
-			</el-table>
-			<template #footer>
-				<div class="dialog-footer">
-					<el-button @click="calc = false">关 闭</el-button>
-				</div>
-			</template>
-		</el-dialog>
-
-		<!-- 操作日志详细 -->
 		<el-dialog title="操作日志详细" v-model="open" width="700px" append-to-body>
 			<el-form :model="form" label-width="100px">
 				<el-row>
@@ -181,16 +153,79 @@
 				</div>
 			</template>
 		</el-dialog>
+
+		<!-- 操作日志统计 -->
+		<el-dialog title="操作日志统计" v-model="calc" width="700px" append-to-body>
+			<el-table ref="operlogRef" v-loading="loading" :data="calcList" :default-sort="defaultSort"
+				@sort-change="handleSortChange">
+				<!-- <el-table-column type="selection" width="50" align="center" /> -->
+				<el-table-column label="操作人员" align="center" width="110" prop="operName" :show-overflow-tooltip="true"
+					sortable="custom" :sort-orders="['descending', 'ascending']" />
+				<el-table-column label="主机" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
+				<el-table-column label="事件类型" align="center" prop="eventType">
+					<template #default="scope">
+						<dict-tag :options="event_type" :value="scope.row.eventType" />
+					</template>
+				</el-table-column>
+				<el-table-column label="操作类型" align="center" prop="businessType">
+					<template #default="scope">
+						<dict-tag :options="sys_oper_type" :value="scope.row.businessType" />
+					</template>
+				</el-table-column>
+				<el-table-column label="操作次数" align="center" prop="times" width="130" />
+			</el-table>
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button @click="calc = false">关 闭</el-button>
+				</div>
+			</template>
+		</el-dialog>
+
+		<!-- 图表分析 -->
+		<el-dialog title="图表分析" v-model="anal" width="1300px" append-to-body>
+			<el-row>
+				<el-col :span="10" class="card-box">
+					<el-card>
+						<template #header>
+							<PieChart style="width: 1em; height: 1em; vertical-align: middle;" /> <span
+								style="vertical-align: middle;">操作类型占比</span>
+						</template>
+						<div class="el-table el-table--enable-row-hover el-table--medium">
+							<div ref="pieChart" style="height: 420px;" />
+						</div>
+					</el-card>
+				</el-col>
+
+				<el-col :span="14" class="card-box">
+					<el-card>
+						<template #header>
+							<Odometer style="width: 1em; height: 1em; vertical-align: middle;" /> <span
+								style="vertical-align: middle;">操作时间分布</span>
+						</template>
+						<div class="el-table el-table--enable-row-hover el-table--medium">
+							<div ref="lineChart" style="height: 420px;" />
+						</div>
+					</el-card>
+				</el-col>
+			</el-row>
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button @click="anal = false">关 闭</el-button>
+				</div>
+			</template>
+		</el-dialog>
 	</div>
 </template>
 
 <script setup name="Operlog">
 	import {
 		list,
+		calcData,
+		analData,
 		delOperlog,
 		cleanOperlog
 	} from "@/api/monitor/operlog";
-
+	import * as echarts from 'echarts';
 	const {
 		proxy
 	} = getCurrentInstance();
@@ -200,10 +235,14 @@
 		event_type,
 		event_level
 	} = proxy.useDict("sys_oper_type", "sys_common_status", "event_type", "event_level");
-
+	const chart = ref([]);
+	const pieChart = ref(null);
+	const lineChart = ref(null);
 	const operlogList = ref([]);
+	const calcList = ref([]);
 	const open = ref(false);
 	const calc = ref(false);
+	const anal = ref(false);
 	const loading = ref(true);
 	const showSearch = ref(true);
 	const ids = ref([]);
@@ -260,15 +299,72 @@
 		queryParams.value.pageNum = 1;
 		getList();
 	}
-	/** 图表分析 */
-	function handleAnalysis() {
-		queryParams.value.pageNum = 1;
-		getList();
-	}
 	/** 操作统计 */
 	function handleCalc() {
+		calcData(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
+			calcList.value = response.rows;
+			total.value = response.total;
+			loading.value = false;
+		});
 		calc.value = true;
 	}
+	/** 图表分析 */
+	function handleAnal() {
+		proxy.$modal.loading("正在加载缓存监控数据，请稍候！");
+		analData(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
+			proxy.$modal.closeLoading();
+			const pie = echarts.init(pieChart.value, "macarons");
+			pie.setOption({
+				tooltip: {
+					trigger: "item",
+					formatter: "{a} <br/>{b} : {c} ({d}%)"
+				},
+				series: [{
+					name: "命令",
+					type: "pie",
+					roseType: "radius",
+					radius: [35, 95],
+					center: ["50%", "48%"],
+					data: response.data.pie,
+					animationEasing: "cubicInOut",
+					animationDuration: 1000
+				}]
+			});
+			const x = new Array();
+			const y = new Array();
+			response.data.line.forEach((item) => {
+				x.push(item.name);
+				y.push(item.value);
+			});
+			const line = echarts.init(lineChart.value, "macarons");
+			line.setOption({
+				tooltip: {
+					show: true,
+					trigger: "axis",
+					formatter: "时间：{b}点<br/>操作次数：{c} (次)"
+				},
+				xAxis: {
+					type: 'category',
+					data: x,
+					axisLabel: {
+						// 每个数据后面都会带有单位
+						formatter: '{value}点'
+					}
+				},
+				yAxis: {
+					type: 'value',
+					name: "单位：次"
+				},
+				series: [{
+					data: y,
+					type: 'line',
+					smooth: true,
+				}]
+			})
+		})
+		anal.value = true;
+	}
+
 	/** 重置按钮操作 */
 	function resetQuery() {
 		dateRange.value = [];