From 8a34c18827206ff03fc48b9dfaf19a3ad4ad08c0 Mon Sep 17 00:00:00 2001
From: ldrop <ldrop>
Date: Mon, 20 Jan 2025 14:09:53 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E4=B8=9A=E5=8A=A1=E7=9B=91=E6=8E=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/monitor/operlog/business.vue       |  76 +++++++++
 src/views/monitor/operlog/chartAndTables.vue | 166 +++++++++++++++++++
 src/views/monitor/operlog/moduleBarChart.vue | 130 +++++++++++++++
 3 files changed, 372 insertions(+)
 create mode 100644 src/views/monitor/operlog/business.vue
 create mode 100644 src/views/monitor/operlog/chartAndTables.vue
 create mode 100644 src/views/monitor/operlog/moduleBarChart.vue

diff --git a/src/views/monitor/operlog/business.vue b/src/views/monitor/operlog/business.vue
new file mode 100644
index 0000000..e6716b8
--- /dev/null
+++ b/src/views/monitor/operlog/business.vue
@@ -0,0 +1,76 @@
+<template>
+<div class="app-container">
+    <!-- 筛选条件 -->
+    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
+        <el-form-item label="系统模块" prop="title">
+            <el-input v-model="queryParams.title" placeholder="请输入系统模块" clearable style="width: 200px;" @keyup.enter="getList"/>
+        </el-form-item>
+        <el-form-item label="请求方式" prop="requestMethod">
+            <el-input v-model="queryParams.requestMethod" placeholder="请输入请求方式" clearable style="width: 200px;" @keyup.enter="getList"/>
+        </el-form-item>
+        <el-form-item label="操作类型" prop="businessType">
+            <el-select v-model="queryParams.businessType" placeholder="操作类型" clearable style="width: 200px" @change="getList">
+                <el-option v-for="dict in sys_oper_type" :key="dict.value" :label="dict.label" :value="dict.value" />
+            </el-select>
+        </el-form-item>
+        <el-form-item label="操作状态" prop="status">
+            <el-select v-model="queryParams.status" placeholder="操作状态" clearable style="width: 200px" @change="getList">
+                <el-option v-for="dict in sys_common_status" :key="dict.value" :label="dict.label" :value="dict.value" />
+            </el-select>
+        </el-form-item>
+        <el-form-item label="操作日期" style="width: 300px">
+            <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
+            start-placeholder="开始日期" end-placeholder="结束日期" @change="getList" />
+        </el-form-item>
+    </el-form>
+    <!-- 饼图和表格 -->
+    <ChartAndTables :queryParams="queryParams" :dateRange="dateRange" />
+    <!-- 平台模块堆叠柱状图 -->
+    <ModuleBarChart :queryParams="queryParams" :dateRange="dateRange" />
+</div>
+</template>
+
+<script setup name="Business">
+import { reactive, ref, toRefs, onMounted } from 'vue';
+import { business } from "@/api/monitor/operlog";
+import ChartAndTables from './chartAndTables.vue';
+import ModuleBarChart from './moduleBarChart.vue';
+
+const { proxy } = getCurrentInstance();
+const { sys_oper_type, sys_common_status } = proxy.useDict("sys_oper_type", "sys_common_status");
+const operlogList = ref([]);
+const loading = ref(true);
+const dateRange = ref([]);
+const data = reactive({
+    form: {},
+    queryParams: {
+        title: undefined,
+        operName: undefined,
+        businessType: undefined,
+        status: undefined,
+        requestMethod: undefined
+    }
+});
+const { queryParams } = toRefs(data);
+
+/** 查询业务信息 */
+function getList() {
+    loading.value = true;
+    business(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
+        operlogList.value = response.rows;
+        loading.value = false;
+    });
+}
+onMounted(() => {
+    getList(); 
+});
+</script>
+<style scoped>
+.app-container {
+    padding: 20px;
+    background-color: #f0f2f5;
+}
+</style>
+
+
+
diff --git a/src/views/monitor/operlog/chartAndTables.vue b/src/views/monitor/operlog/chartAndTables.vue
new file mode 100644
index 0000000..2ef4b1b
--- /dev/null
+++ b/src/views/monitor/operlog/chartAndTables.vue
@@ -0,0 +1,166 @@
+<template>
+<div>
+    <!-- 左侧 成功次数 中间饼图 右侧失败次数 -->
+    <el-row :gutter="20">
+        <el-col :span="8">
+            <el-card shadow="always" class="box-card hover-card">
+                <template #header>
+                    <span>成功次数排名</span>
+                </template>
+                <el-table :data="paginatedSuccessRank" stripe style="height: 370px;">
+                    <el-table-column label="系统模块" prop="title" align="center" />
+                    <el-table-column label="成功次数" prop="count" align="center" sortable/>
+                </el-table>
+                <br>
+                <el-pagination v-model:current-page="successCurrentPage" :page-size="pageSize" :total="successRank.length"
+                @current-change="handleSuccessPageChange" layout="prev, pager, next" background/>
+            </el-card>
+        </el-col>
+        <el-col :span="8">
+            <el-card shadow="always" class="box-card hover-card">
+                <template #header>
+                    <span>操作状态统计</span>
+                </template>
+                <div id="statusPieChart" style="width: 100%; height: 420px;"></div>
+            </el-card>
+        </el-col>
+        <el-col :span="8">
+            <el-card shadow="always" class="box-card hover-card">
+                <template #header>
+                    <span>失败次数排名</span>
+                </template>
+                <el-table :data="paginatedFailureRank" stripe style="height: 370px;">
+                    <el-table-column label="系统模块" prop="title" align="center" />
+                    <el-table-column label="失败次数" prop="count" align="center" sortable/>
+                </el-table>
+                <br>
+                <el-pagination v-model:current-page="failureCurrentPage" :page-size="pageSize" :total="failureRank.length"
+                @current-change="handleFailurePageChange" layout="prev, pager, next" background/>
+            </el-card>
+        </el-col>
+    </el-row>
+</div>
+</template>
+
+<script setup name="ChartAndTables">
+import { ref, computed, onMounted, watch, getCurrentInstance } from 'vue';
+import * as echarts from 'echarts';
+import { business } from "@/api/monitor/operlog";
+
+const props = defineProps({
+    queryParams: Object,
+    dateRange: Array
+});
+const { proxy } = getCurrentInstance();
+const operlogList = ref([]);
+const successRank = ref([]);
+const failureRank = ref([]);
+const successCurrentPage = ref(1);
+const failureCurrentPage = ref(1);
+const pageSize = 8;
+
+/** 成功请求分页 */
+const paginatedSuccessRank = computed(() => {
+    const start = (successCurrentPage.value - 1) * pageSize;
+    const end = start + pageSize;
+    return successRank.value.slice(start, end);
+});
+
+/** 失败请求分页 */
+const paginatedFailureRank = computed(() => {
+    const start = (failureCurrentPage.value - 1) * pageSize;
+    const end = start + pageSize;
+    return failureRank.value.slice(start, end);
+});
+
+/** 查询业务信息 */
+function getList() {
+    business(proxy.addDateRange(props.queryParams, props.dateRange)).then(response => {
+        operlogList.value = response.rows;
+        updateRankTables();
+        updateCharts();
+    });
+}
+
+/** 更新图表 */
+function updateCharts() {
+    if (operlogList.value.length == 0) return;
+    const filteredList = operlogList.value.filter(item => {
+        return (!props.queryParams.title || item.title.includes(props.queryParams.title)) &&
+                (!props.queryParams.businessType || item.businessType == props.queryParams.businessType) &&
+                (!props.queryParams.requestMethod || item.requestMethod == props.queryParams.requestMethod) &&
+                (!props.queryParams.status || item.status == props.queryParams.status) &&
+                (!props.dateRange.length || (new Date(item.operTime) >= new Date(props.dateRange[0]) && new Date(props.dateRange[1]) >= new Date(item.operTime)));
+    });
+    updateStatusPieChart(filteredList);
+}
+
+/** 渲染饼图 */
+function updateStatusPieChart(filteredList) {
+    const successCount = filteredList.filter(item => item.status == '0').length;
+    const failureCount = filteredList.filter(item => item.status == '1').length;
+    const chart = echarts.init(document.getElementById('statusPieChart'));
+    chart.setOption({
+        tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' },
+        legend: { orient: 'vertical', left: 'left'},
+        series: [ 
+        { name: '操作状态', type: 'pie', radius: '60%',
+            data: [
+            { value: failureCount, name: '失败', itemStyle: { color: '#ec0000', }},
+            { value: successCount, name: '成功', itemStyle: { color: '#67C23A' }}
+            ],
+            emphasis: {
+            itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(4, 116, 245, 0.5)' }
+            }
+        }
+        ]
+    });
+    chart.resize();
+}
+
+/** 成功和失败排行表格 */
+function updateRankTables() {
+    if (operlogList.value.length == 0) return;
+    const successMap = new Map();
+    const failureMap = new Map();
+    operlogList.value.forEach(item => {
+        if (item.status == '0') {
+            successMap.set(item.title, (successMap.get(item.title) || 0) + 1);
+        } else if (item.status == '1') {
+            failureMap.set(item.title, (failureMap.get(item.title) || 0) + 1);
+        }
+    });
+    successRank.value = Array.from(successMap, ([title, count]) => ({ title, count })).sort((a, b) => b.count - a.count);
+    failureRank.value = Array.from(failureMap, ([title, count]) => ({ title, count })).sort((a, b) => b.count - a.count);
+}
+
+/** 成功次数分页 */
+function handleSuccessPageChange(page) {
+    successCurrentPage.value = page;
+}
+
+/** 失败次数分页 */
+function handleFailurePageChange(page) {
+    failureCurrentPage.value = page;
+}
+
+onMounted(() => {
+    getList();
+});
+
+watch([props.queryParams, props.dateRange], () => {
+    getList();
+});
+</script>
+<style scoped>
+.box-card {
+    margin-bottom: 20px;
+    border-radius: 15px;
+    transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.box-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 2px 12px rgba(4, 116, 245, 0.3);
+}
+</style>
diff --git a/src/views/monitor/operlog/moduleBarChart.vue b/src/views/monitor/operlog/moduleBarChart.vue
new file mode 100644
index 0000000..d894779
--- /dev/null
+++ b/src/views/monitor/operlog/moduleBarChart.vue
@@ -0,0 +1,130 @@
+<template>
+    <!-- 平台模块堆叠柱状图 -->
+    <el-card shadow="always" class="box-card hover-card">
+        <template #header>
+            <span>系统模块统计</span>
+        </template>
+        <div id="moduleBarChart" style="width: 100%; height: 400px;"></div>
+    </el-card>
+</template>
+<script setup name="ModuleBarChart">
+import { ref, watch, onMounted, getCurrentInstance } from 'vue';
+import * as echarts from 'echarts';
+import { business } from "@/api/monitor/operlog";
+
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+    queryParams: Object,
+    dateRange: Array
+});
+const operlogList = ref([]);
+/** 查询业务信息 */
+function getList() {
+    business(proxy.addDateRange(props.queryParams, props.dateRange)).then(response => {
+        operlogList.value = response.rows;
+        updateModuleBarChart();
+    });
+}
+
+/** 渲染堆叠柱状图 */
+function updateModuleBarChart() {
+    const moduleMap = new Map();
+    // 遍历操作日志数据，统计各模块的操作次数
+    operlogList.value.forEach(item => {
+        if (!moduleMap.has(item.title)) {
+            moduleMap.set(item.title, { 
+                add: { success: 0, fail: 0 },  //默认初始都是0
+                edit: { success: 0, fail: 0 }, 
+                delete: { success: 0, fail: 0 }, 
+                authorization: { success: 0, fail: 0 }, 
+                export: { success: 0, fail: 0 }, 
+                import: { success: 0, fail: 0 }, 
+                exit: { success: 0, fail: 0 }, 
+                generate: { success: 0, fail: 0 }, 
+                clean: { success: 0, fail: 0 }, 
+                else: { success: 0, fail: 0 } 
+            });
+        }
+        const module = moduleMap.get(item.title);
+        const status = item.status == '0' ? 'success' : 'fail';
+        // 根据业务类型和状态，累加操作次数
+        switch (String(item.businessType)) { 
+            case '0': module.else[status] += 1; break;
+            case '1': module.add[status] += 1; break;
+            case '2': module.edit[status] += 1; break;
+            case '3': module.delete[status] += 1; break;
+            case '4': module.authorization[status] += 1; break;
+            case '5': module.export[status] += 1; break;
+            case '6': module.import[status] += 1; break;
+            case '7': module.exit[status] += 1; break;
+            case '8': module.generate[status] += 1; break;
+            case '9': module.clean[status] += 1; break;
+            default: console.log(`未知的请求类型: ${item.businessType}`); break;
+        }
+    });
+
+    const categories = Array.from(moduleMap.keys());
+    const chartData = categories.map(category => moduleMap.get(category));
+
+    // 初始化 ECharts 实例
+    const chart = echarts.init(document.getElementById('moduleBarChart'));
+    chart.setOption({
+        tooltip: { 
+            trigger: 'axis', 
+            axisPointer: { 
+                type: 'shadow',
+                shadowStyle: { color: 'rgba(150, 150, 150 ,0.04)'}
+            },
+            confine: true,
+            formatter: function (params) {
+                let result = params[0].name + '<br/>';
+                params.forEach(item => {
+                    const data = item.data;
+                    result += item.marker + item.seriesName + ': 成功 ' + data.success + ' 失败 ' + data.fail + '<br/>';
+                });
+                return result;
+            }
+        },
+        legend: { data: ['新增', '修改', '删除', '授权', '导出', '导入', '强退', '生成代码', '清空数据', '其他'] },
+        xAxis: { type: 'category', data: categories },
+        yAxis: { type: 'value' },
+        series: [
+            { name: '新增', type: 'bar', stack: '总量', data: chartData.map(data => ({ value: data.add.success + data.add.fail, success: data.add.success, fail: data.add.fail })), itemStyle: { color: '#67C23A' }, emphasis: { focus: 'series' } },
+            { name: '修改', type: 'bar', stack: '总量', data: chartData.map(data => ({ value: data.edit.success + data.edit.fail, success: data.edit.success, fail: data.edit.fail })), itemStyle: { color: '#1E90FF' }, emphasis: { focus: 'series' } },
+            { name: '删除', type: 'bar', stack: '总量', data: chartData.map(data => ({ value: data.delete.success + data.delete.fail, success: data.delete.success, fail: data.delete.fail })), itemStyle: { color: '#ec0000' }, emphasis: { focus: 'series' } },
+            { name: '授权', type: 'bar', stack: '总量', data: chartData.map(data => ({ value: data.authorization.success + data.authorization.fail, success: data.authorization.success, fail: data.authorization.fail })), itemStyle: { color: '#FF69B4' }, emphasis: { focus: 'series' } },
+            { name: '导出', type: 'bar', stack: '总量', data: chartData.map(data => ({ value: data.export.success + data.export.fail, success: data.export.success, fail: data.export.fail })), itemStyle: { color: '#FFD700' }, emphasis: { focus: 'series' } },
+            { name: '导入', type: 'bar', stack: '总量', data: chartData.map(data => ({ value: data.import.success + data.import.fail, success: data.import.success, fail: data.import.fail })), itemStyle: { color: '#8A2BE2' }, emphasis: { focus: 'series' } },
+            { name: '强退', type: 'bar', stack: '总量', data: chartData.map(data => ({ value: data.exit.success + data.exit.fail, success: data.exit.success, fail: data.exit.fail })), itemStyle: { color: '#FF4500' }, emphasis: { focus: 'series' } },
+            { name: '生成代码', type: 'bar', stack: '总量', data: chartData.map(data => ({ value: data.generate.success + data.generate.fail, success: data.generate.success, fail: data.generate.fail })), itemStyle: { color: '#2E8B57' }, emphasis: { focus: 'series' } },
+            { name: '清空数据', type: 'bar', stack: '总量', data: chartData.map(data => ({ value: data.clean.success + data.clean.fail, success: data.clean.success, fail: data.clean.fail })), itemStyle: { color: '#000000' }, emphasis: { focus: 'series' } },
+            { name: '其他', type: 'bar', stack: '总量', data: chartData.map(data => ({ value: data.else.success + data.else.fail, success: data.else.success, fail: data.else.fail })), itemStyle: { color: '#A9A9A9' }, emphasis: { focus: 'series' } }
+        ]
+    });
+    chart.resize();
+}
+
+onMounted(() => { 
+    getList();
+});
+watch([props.queryParams, props.dateRange], () => {  
+    getList();
+});
+</script>
+<style scoped>
+.app-container {
+    padding: 20px;
+    background-color: #f0f2f5;
+}
+
+.box-card {
+    margin-bottom: 20px;
+    border-radius: 15px;
+    transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.box-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 2px 12px rgba(4, 116, 245, 0.3);
+}
+</style>
\ No newline at end of file
-- 
Gitee


From 520a7f75fa5ba9235929ba2a3337166be7bbc4e0 Mon Sep 17 00:00:00 2001
From: ldrop <ldrop>
Date: Thu, 23 Jan 2025 14:10:22 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E4=B8=9A=E5=8A=A1=E7=9B=91=E6=8E=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/monitor/operlog/business.vue       | 16 ++----
 src/views/monitor/operlog/chartAndTables.vue | 56 +++++++-------------
 src/views/monitor/operlog/moduleBarChart.vue | 42 ++++++++-------
 3 files changed, 44 insertions(+), 70 deletions(-)

diff --git a/src/views/monitor/operlog/business.vue b/src/views/monitor/operlog/business.vue
index e6716b8..01e3365 100644
--- a/src/views/monitor/operlog/business.vue
+++ b/src/views/monitor/operlog/business.vue
@@ -30,7 +30,7 @@
 </div>
 </template>
 
-<script setup name="Business">
+<script setup name="NewBusiness">
 import { reactive, ref, toRefs, onMounted } from 'vue';
 import { business } from "@/api/monitor/operlog";
 import ChartAndTables from './chartAndTables.vue';
@@ -38,14 +38,12 @@ import ModuleBarChart from './moduleBarChart.vue';
 
 const { proxy } = getCurrentInstance();
 const { sys_oper_type, sys_common_status } = proxy.useDict("sys_oper_type", "sys_common_status");
-const operlogList = ref([]);
-const loading = ref(true);
+
 const dateRange = ref([]);
 const data = reactive({
     form: {},
     queryParams: {
         title: undefined,
-        operName: undefined,
         businessType: undefined,
         status: undefined,
         requestMethod: undefined
@@ -55,12 +53,9 @@ const { queryParams } = toRefs(data);
 
 /** 查询业务信息 */
 function getList() {
-    loading.value = true;
-    business(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
-        operlogList.value = response.rows;
-        loading.value = false;
-    });
+    business(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {});
 }
+
 onMounted(() => {
     getList(); 
 });
@@ -71,6 +66,3 @@ onMounted(() => {
     background-color: #f0f2f5;
 }
 </style>
-
-
-
diff --git a/src/views/monitor/operlog/chartAndTables.vue b/src/views/monitor/operlog/chartAndTables.vue
index 2ef4b1b..ab95ffd 100644
--- a/src/views/monitor/operlog/chartAndTables.vue
+++ b/src/views/monitor/operlog/chartAndTables.vue
@@ -12,7 +12,7 @@
                     <el-table-column label="成功次数" prop="count" align="center" sortable/>
                 </el-table>
                 <br>
-                <el-pagination v-model:current-page="successCurrentPage" :page-size="pageSize" :total="successRank.length"
+                <el-pagination v-model:current-page="successCurrentPage" :page-size="pageSize" :total="successStats.length"
                 @current-change="handleSuccessPageChange" layout="prev, pager, next" background/>
             </el-card>
         </el-col>
@@ -34,7 +34,7 @@
                     <el-table-column label="失败次数" prop="count" align="center" sortable/>
                 </el-table>
                 <br>
-                <el-pagination v-model:current-page="failureCurrentPage" :page-size="pageSize" :total="failureRank.length"
+                <el-pagination v-model:current-page="failureCurrentPage" :page-size="pageSize" :total="failureStats.length"
                 @current-change="handleFailurePageChange" layout="prev, pager, next" background/>
             </el-card>
         </el-col>
@@ -42,7 +42,7 @@
 </div>
 </template>
 
-<script setup name="ChartAndTables">
+<script setup name="NewChartAndTables">
 import { ref, computed, onMounted, watch, getCurrentInstance } from 'vue';
 import * as echarts from 'echarts';
 import { business } from "@/api/monitor/operlog";
@@ -52,53 +52,49 @@ const props = defineProps({
     dateRange: Array
 });
 const { proxy } = getCurrentInstance();
-const operlogList = ref([]);
-const successRank = ref([]);
-const failureRank = ref([]);
+const successStats = ref([]);
+const failureStats = ref([]);
+const statusStats = ref([]);
 const successCurrentPage = ref(1);
 const failureCurrentPage = ref(1);
 const pageSize = 8;
 
 /** 成功请求分页 */
 const paginatedSuccessRank = computed(() => {
+    if (!successStats.value) return [];
     const start = (successCurrentPage.value - 1) * pageSize;
     const end = start + pageSize;
-    return successRank.value.slice(start, end);
+    return successStats.value.slice(start, end);
 });
 
 /** 失败请求分页 */
 const paginatedFailureRank = computed(() => {
+    if (!failureStats.value) return [];
     const start = (failureCurrentPage.value - 1) * pageSize;
     const end = start + pageSize;
-    return failureRank.value.slice(start, end);
+    return failureStats.value.slice(start, end);
 });
 
 /** 查询业务信息 */
 function getList() {
     business(proxy.addDateRange(props.queryParams, props.dateRange)).then(response => {
-        operlogList.value = response.rows;
-        updateRankTables();
+        successStats.value = response.data.successStats.map(item => ({ title: item.title, count: item.success_count })) || [];
+        failureStats.value = response.data.failureStats.map(item => ({ title: item.title, count: item.failure_count })) || [];
+        statusStats.value = response.data.statusStats || [];
         updateCharts();
     });
 }
 
 /** 更新图表 */
 function updateCharts() {
-    if (operlogList.value.length == 0) return;
-    const filteredList = operlogList.value.filter(item => {
-        return (!props.queryParams.title || item.title.includes(props.queryParams.title)) &&
-                (!props.queryParams.businessType || item.businessType == props.queryParams.businessType) &&
-                (!props.queryParams.requestMethod || item.requestMethod == props.queryParams.requestMethod) &&
-                (!props.queryParams.status || item.status == props.queryParams.status) &&
-                (!props.dateRange.length || (new Date(item.operTime) >= new Date(props.dateRange[0]) && new Date(props.dateRange[1]) >= new Date(item.operTime)));
-    });
-    updateStatusPieChart(filteredList);
+    if (statusStats.value.length == 0) return;
+    updateStatusPieChart();
 }
 
 /** 渲染饼图 */
-function updateStatusPieChart(filteredList) {
-    const successCount = filteredList.filter(item => item.status == '0').length;
-    const failureCount = filteredList.filter(item => item.status == '1').length;
+function updateStatusPieChart() {
+    const successCount = statusStats.value.find(item => item.status_desc == '成功')?.status_count || 0;
+    const failureCount = statusStats.value.find(item => item.status_desc == '失败')?.status_count || 0;
     const chart = echarts.init(document.getElementById('statusPieChart'));
     chart.setOption({
         tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' },
@@ -118,22 +114,6 @@ function updateStatusPieChart(filteredList) {
     chart.resize();
 }
 
-/** 成功和失败排行表格 */
-function updateRankTables() {
-    if (operlogList.value.length == 0) return;
-    const successMap = new Map();
-    const failureMap = new Map();
-    operlogList.value.forEach(item => {
-        if (item.status == '0') {
-            successMap.set(item.title, (successMap.get(item.title) || 0) + 1);
-        } else if (item.status == '1') {
-            failureMap.set(item.title, (failureMap.get(item.title) || 0) + 1);
-        }
-    });
-    successRank.value = Array.from(successMap, ([title, count]) => ({ title, count })).sort((a, b) => b.count - a.count);
-    failureRank.value = Array.from(failureMap, ([title, count]) => ({ title, count })).sort((a, b) => b.count - a.count);
-}
-
 /** 成功次数分页 */
 function handleSuccessPageChange(page) {
     successCurrentPage.value = page;
diff --git a/src/views/monitor/operlog/moduleBarChart.vue b/src/views/monitor/operlog/moduleBarChart.vue
index d894779..b4e83f9 100644
--- a/src/views/monitor/operlog/moduleBarChart.vue
+++ b/src/views/monitor/operlog/moduleBarChart.vue
@@ -7,7 +7,7 @@
         <div id="moduleBarChart" style="width: 100%; height: 400px;"></div>
     </el-card>
 </template>
-<script setup name="ModuleBarChart">
+<script setup name="NewModuleBarChart">
 import { ref, watch, onMounted, getCurrentInstance } from 'vue';
 import * as echarts from 'echarts';
 import { business } from "@/api/monitor/operlog";
@@ -17,11 +17,24 @@ const props = defineProps({
     queryParams: Object,
     dateRange: Array
 });
-const operlogList = ref([]);
+const moduleOperationStats = ref([]);
+const operationTypes = {
+    1: 'add',
+    2: 'edit',
+    3: 'delete',
+    4: 'authorization',
+    5: 'export',
+    6: 'import',
+    7: 'exit',
+    8: 'generate',
+    9: 'clean',
+    0: 'else'
+};
+
 /** 查询业务信息 */
 function getList() {
     business(proxy.addDateRange(props.queryParams, props.dateRange)).then(response => {
-        operlogList.value = response.rows;
+        moduleOperationStats.value = response.data.moduleOperationStats;
         updateModuleBarChart();
     });
 }
@@ -29,8 +42,9 @@ function getList() {
 /** 渲染堆叠柱状图 */
 function updateModuleBarChart() {
     const moduleMap = new Map();
+
     // 遍历操作日志数据，统计各模块的操作次数
-    operlogList.value.forEach(item => {
+    moduleOperationStats.value.forEach(item => {
         if (!moduleMap.has(item.title)) {
             moduleMap.set(item.title, { 
                 add: { success: 0, fail: 0 },  //默认初始都是0
@@ -46,21 +60,9 @@ function updateModuleBarChart() {
             });
         }
         const module = moduleMap.get(item.title);
-        const status = item.status == '0' ? 'success' : 'fail';
-        // 根据业务类型和状态，累加操作次数
-        switch (String(item.businessType)) { 
-            case '0': module.else[status] += 1; break;
-            case '1': module.add[status] += 1; break;
-            case '2': module.edit[status] += 1; break;
-            case '3': module.delete[status] += 1; break;
-            case '4': module.authorization[status] += 1; break;
-            case '5': module.export[status] += 1; break;
-            case '6': module.import[status] += 1; break;
-            case '7': module.exit[status] += 1; break;
-            case '8': module.generate[status] += 1; break;
-            case '9': module.clean[status] += 1; break;
-            default: console.log(`未知的请求类型: ${item.businessType}`); break;
-        }
+        const type = operationTypes[item.business_type] || 'else';
+        module[type].success += item.success_count || 0;
+        module[type].fail += item.failure_count || 0;
     });
 
     const categories = Array.from(moduleMap.keys());
@@ -127,4 +129,4 @@ watch([props.queryParams, props.dateRange], () => {
     transform: translateY(-5px);
     box-shadow: 0 2px 12px rgba(4, 116, 245, 0.3);
 }
-</style>
\ No newline at end of file
+</style>
-- 
Gitee


From 7435cf3b03d73e0dc371a5cd314652dcb192c15c Mon Sep 17 00:00:00 2001
From: ldrop <ldrop>
Date: Mon, 24 Mar 2025 15:18:35 +0800
Subject: [PATCH 3/3] t

---
 src/api/monitor/operlog.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/api/monitor/operlog.js b/src/api/monitor/operlog.js
index a04bca8..8b19a4e 100644
--- a/src/api/monitor/operlog.js
+++ b/src/api/monitor/operlog.js
@@ -24,3 +24,13 @@ export function cleanOperlog() {
     method: 'delete'
   })
 }
+
+// 业务监控接口
+export function business(query) {
+  return request({
+    url: '/monitor/operlog/business',
+    method: 'get',
+    params: query
+  })
+}
+
-- 
Gitee