diff --git a/src/views/monitor/operlog/business.vue b/src/views/monitor/operlog/business.vue
new file mode 100644
index 0000000000000000000000000000000000000000..01e33656338a655704cde5deea1569a7ac924162
--- /dev/null
+++ b/src/views/monitor/operlog/business.vue
@@ -0,0 +1,68 @@
+<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="NewBusiness">
+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 dateRange = ref([]);
+const data = reactive({
+    form: {},
+    queryParams: {
+        title: undefined,
+        businessType: undefined,
+        status: undefined,
+        requestMethod: undefined
+    }
+});
+const { queryParams } = toRefs(data);
+
+/** 查询业务信息 */
+function getList() {
+    business(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {});
+}
+
+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 0000000000000000000000000000000000000000..ab95ffdce4a03457714d787990e8ed521b667ac0
--- /dev/null
+++ b/src/views/monitor/operlog/chartAndTables.vue
@@ -0,0 +1,146 @@
+<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="successStats.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="failureStats.length"
+                @current-change="handleFailurePageChange" layout="prev, pager, next" background/>
+            </el-card>
+        </el-col>
+    </el-row>
+</div>
+</template>
+
+<script setup name="NewChartAndTables">
+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 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 successStats.value.slice(start, end);
+});
+
+/** 失败请求分页 */
+const paginatedFailureRank = computed(() => {
+    if (!failureStats.value) return [];
+    const start = (failureCurrentPage.value - 1) * pageSize;
+    const end = start + pageSize;
+    return failureStats.value.slice(start, end);
+});
+
+/** 查询业务信息 */
+function getList() {
+    business(proxy.addDateRange(props.queryParams, props.dateRange)).then(response => {
+        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 (statusStats.value.length == 0) return;
+    updateStatusPieChart();
+}
+
+/** 渲染饼图 */
+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}%)' },
+        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 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 0000000000000000000000000000000000000000..b4e83f9cefb935d9a5e865fc205685ff38d5ccfb
--- /dev/null
+++ b/src/views/monitor/operlog/moduleBarChart.vue
@@ -0,0 +1,132 @@
+<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="NewModuleBarChart">
+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 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 => {
+        moduleOperationStats.value = response.data.moduleOperationStats;
+        updateModuleBarChart();
+    });
+}
+
+/** 渲染堆叠柱状图 */
+function updateModuleBarChart() {
+    const moduleMap = new Map();
+
+    // 遍历操作日志数据，统计各模块的操作次数
+    moduleOperationStats.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 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());
+    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>