更新oa的数据统计
This commit is contained in:
@@ -1,5 +1,12 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getReimbursementDashboard() {
|
||||
return request({
|
||||
url: '/backend/reimbursements/dashboard',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function getReimbursementList(params) {
|
||||
return request({
|
||||
url: '/backend/reimbursements',
|
||||
|
||||
@@ -1,255 +1,256 @@
|
||||
<template>
|
||||
<div class="erp-dashboard">
|
||||
<!-- 第一行统计卡片 -->
|
||||
<el-row :gutter="16" class="stat-row">
|
||||
<el-col :span="4" :xs="12" v-for="(item, index) in firstRowStats" :key="'first-' + index">
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<span class="stat-label">{{ item.label }}</span>
|
||||
<el-icon class="stat-icon"><Info-Filled /></el-icon>
|
||||
</div>
|
||||
<div class="stat-value">
|
||||
<span class="currency">¥</span>
|
||||
<span class="number">{{ formatMoney(item.value) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="oa-dashboard">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h2>OA 工作台</h2>
|
||||
<p>个人办公数据概览</p>
|
||||
</div>
|
||||
<el-button :icon="Refresh" @click="loadDashboard">刷新</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 第二行统计卡片 -->
|
||||
<el-row :gutter="16" class="stat-row" style="margin-top: 16px;">
|
||||
<el-col :span="4" :xs="12" v-for="(item, index) in secondRowStats" :key="'second-' + index">
|
||||
<!-- 报销统计卡片 -->
|
||||
<el-row :gutter="16" class="stat-row">
|
||||
<el-col :span="8" :xs="24" v-for="item in statCards" :key="item.key">
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<span class="stat-label">{{ item.label }}</span>
|
||||
<el-icon class="stat-icon"><Info-Filled /></el-icon>
|
||||
</div>
|
||||
<div class="stat-value">
|
||||
<div class="stat-title">{{ item.label }}</div>
|
||||
<div class="stat-amount">
|
||||
<span class="currency">¥</span>
|
||||
<span class="number">{{ formatMoney(item.value) }}</span>
|
||||
<span class="number">{{ money(item.data.total) }}</span>
|
||||
</div>
|
||||
<div class="stat-meta">
|
||||
<span>{{ item.data.count }} 单</span>
|
||||
<span>已报销 ¥ {{ money(item.data.paid) }}</span>
|
||||
<span>未报销 ¥ {{ money(item.data.unpaid) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 图表区域 -->
|
||||
<el-row :gutter="16" class="chart-row" style="margin-top: 16px;">
|
||||
<el-col :span="8" :xs="24">
|
||||
<el-row :gutter="16" class="chart-row">
|
||||
<el-col :span="14" :xs="24">
|
||||
<div class="chart-card">
|
||||
<div class="chart-title">销售统计</div>
|
||||
<div ref="salesChartRef" class="chart-container"></div>
|
||||
<div class="chart-title">近6个月报销趋势</div>
|
||||
<div ref="trendChartRef" class="chart-container"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8" :xs="24">
|
||||
<el-col :span="10" :xs="24">
|
||||
<div class="chart-card">
|
||||
<div class="chart-title">零售统计</div>
|
||||
<div ref="retailChartRef" class="chart-container"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8" :xs="24">
|
||||
<div class="chart-card">
|
||||
<div class="chart-title">采购统计</div>
|
||||
<div ref="purchaseChartRef" class="chart-container"></div>
|
||||
<div class="chart-title">状态分布</div>
|
||||
<div class="status-dist">
|
||||
<div
|
||||
v-for="(item, key) in dashboard.status_dist"
|
||||
:key="key"
|
||||
class="dist-row"
|
||||
>
|
||||
<el-tag :type="statusType(Number(key))" size="small">{{
|
||||
item.name
|
||||
}}</el-tag>
|
||||
<div class="dist-bar-wrap">
|
||||
<div
|
||||
class="dist-bar"
|
||||
:style="{ width: distPercent(item.count) }"
|
||||
/>
|
||||
</div>
|
||||
<span class="dist-count"
|
||||
>{{ item.count }} 单 / ¥ {{ money(item.amount) }}</span
|
||||
>
|
||||
</div>
|
||||
<el-empty
|
||||
v-if="!Object.keys(dashboard.status_dist).length"
|
||||
description="暂无数据"
|
||||
:image-size="60"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 报销类型分析 -->
|
||||
<div class="chart-card type-card">
|
||||
<div class="chart-title">报销类型分析</div>
|
||||
<div class="type-dist">
|
||||
<div
|
||||
v-for="item in dashboard.expense_types"
|
||||
:key="item.name"
|
||||
class="type-row"
|
||||
>
|
||||
<span class="type-name">{{ item.name }}</span>
|
||||
<div class="type-bar-wrap">
|
||||
<div class="type-bar" :style="{ width: typePercent(item.amount) }" />
|
||||
</div>
|
||||
<span class="type-count">{{ item.count }} 笔</span>
|
||||
<span class="type-amount">¥ {{ money(item.amount) }}</span>
|
||||
</div>
|
||||
<el-empty
|
||||
v-if="!dashboard.expense_types.length"
|
||||
description="暂无费用明细"
|
||||
:image-size="60"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, shallowRef, nextTick } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { InfoFilled } from '@element-plus/icons-vue';
|
||||
<script setup>
|
||||
import { computed, onBeforeUnmount, onMounted, reactive, ref } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import { Refresh } from "@element-plus/icons-vue";
|
||||
import { getReimbursementDashboard } from "@/api/reimburse";
|
||||
|
||||
// 统计卡片数据 - 第一行
|
||||
const firstRowStats = ref([
|
||||
{ label: '今日销售', value: 0 },
|
||||
{ label: '今日零售', value: 0 },
|
||||
{ label: '今日采购', value: 0 },
|
||||
{ label: '本月累计销售', value: 0 },
|
||||
{ label: '本月累计零售', value: 0 },
|
||||
{ label: '本月累计采购', value: 0 },
|
||||
const emptyStat = () => ({ total: 0, paid: 0, unpaid: 0, count: 0 });
|
||||
const dashboard = reactive({
|
||||
week: emptyStat(),
|
||||
month: emptyStat(),
|
||||
year: emptyStat(),
|
||||
trend: [],
|
||||
status_dist: {},
|
||||
expense_types: [],
|
||||
});
|
||||
|
||||
const statCards = computed(() => [
|
||||
{ key: "week", label: "本周报销", data: dashboard.week },
|
||||
{ key: "month", label: "本月报销", data: dashboard.month },
|
||||
{ key: "year", label: "本年报销", data: dashboard.year },
|
||||
]);
|
||||
|
||||
// 统计卡片数据 - 第二行
|
||||
const secondRowStats = ref([
|
||||
{ label: '昨日销售', value: 0 },
|
||||
{ label: '昨日零售', value: 0 },
|
||||
{ label: '昨日采购', value: 0 },
|
||||
{ label: '今年累计销售', value: 0 },
|
||||
{ label: '今年累计零售', value: 0 },
|
||||
{ label: '今年累计采购', value: 0 },
|
||||
]);
|
||||
// 趋势图
|
||||
const trendChartRef = ref(null);
|
||||
let trendChart = null;
|
||||
|
||||
// 图表实例
|
||||
const salesChartRef = ref<HTMLElement | null>(null);
|
||||
const retailChartRef = ref<HTMLElement | null>(null);
|
||||
const purchaseChartRef = ref<HTMLElement | null>(null);
|
||||
const salesChartInstance = shallowRef<echarts.ECharts | null>(null);
|
||||
const retailChartInstance = shallowRef<echarts.ECharts | null>(null);
|
||||
const purchaseChartInstance = shallowRef<echarts.ECharts | null>(null);
|
||||
|
||||
// 格式化金额
|
||||
const formatMoney = (value: number): string => {
|
||||
return value.toLocaleString();
|
||||
};
|
||||
|
||||
// 生成最近6个月的月份标签
|
||||
const getMonthLabels = (): string[] => {
|
||||
const labels: string[] = [];
|
||||
const now = new Date();
|
||||
for (let i = 5; i >= 0; i--) {
|
||||
const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
|
||||
const year = d.getFullYear();
|
||||
const month = String(d.getMonth() + 1).padStart(2, '0');
|
||||
labels.push(`${year}-${month}`);
|
||||
}
|
||||
return labels;
|
||||
};
|
||||
|
||||
// 初始化图表通用配置
|
||||
const initChart = (refEl: HTMLElement, title: string, color: string) => {
|
||||
const chart = echarts.init(refEl);
|
||||
const months = getMonthLabels();
|
||||
|
||||
chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'cross' }
|
||||
},
|
||||
const renderTrendChart = () => {
|
||||
if (!trendChartRef.value) return;
|
||||
if (!trendChart) trendChart = echarts.init(trendChartRef.value);
|
||||
const months = dashboard.trend.map((item) => item.month.slice(5) + "月");
|
||||
trendChart.setOption({
|
||||
tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
|
||||
legend: { data: ["已报销", "未报销"], top: 0 },
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
top: "18%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
type: "category",
|
||||
data: months,
|
||||
axisLine: { lineStyle: { color: '#E0E6ED' } },
|
||||
axisLabel: { color: '#606266', fontSize: 11 }
|
||||
axisLine: { lineStyle: { color: "#E0E6ED" } },
|
||||
axisLabel: { color: "#606266", fontSize: 11 },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
type: "value",
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
splitLine: { lineStyle: { color: '#F2F6FC' } },
|
||||
axisLabel: { color: '#606266', fontSize: 11 }
|
||||
splitLine: { lineStyle: { color: "#F2F6FC" } },
|
||||
axisLabel: { color: "#606266", fontSize: 11 },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: title,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
lineStyle: { color: color, width: 2 },
|
||||
itemStyle: { color: color },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: color + '40' },
|
||||
{ offset: 1, color: color + '10' }
|
||||
])
|
||||
},
|
||||
data: [0, 0, 0, 0, 0, 0]
|
||||
}
|
||||
]
|
||||
name: "已报销",
|
||||
type: "bar",
|
||||
stack: "total",
|
||||
barMaxWidth: 32,
|
||||
itemStyle: { color: "#67C23A" },
|
||||
data: dashboard.trend.map((item) => Number(item.paid || 0)),
|
||||
},
|
||||
{
|
||||
name: "未报销",
|
||||
type: "bar",
|
||||
stack: "total",
|
||||
barMaxWidth: 32,
|
||||
itemStyle: { color: "#E6A23C" },
|
||||
data: dashboard.trend.map((item) => Number(item.unpaid || 0)),
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
return chart;
|
||||
};
|
||||
|
||||
// 初始化所有图表
|
||||
const initCharts = () => {
|
||||
if (salesChartRef.value) {
|
||||
salesChartInstance.value = initChart(salesChartRef.value, '销售', '#409EFF');
|
||||
}
|
||||
if (retailChartRef.value) {
|
||||
retailChartInstance.value = initChart(retailChartRef.value, '零售', '#67C23A');
|
||||
}
|
||||
if (purchaseChartRef.value) {
|
||||
purchaseChartInstance.value = initChart(purchaseChartRef.value, '采购', '#E6A23C');
|
||||
// 状态分布占比
|
||||
const distTotal = computed(() =>
|
||||
Object.values(dashboard.status_dist).reduce(
|
||||
(sum, item) => sum + Number(item.count || 0),
|
||||
0,
|
||||
),
|
||||
);
|
||||
const distPercent = (count) =>
|
||||
distTotal.value
|
||||
? `${Math.round((Number(count || 0) / distTotal.value) * 100)}%`
|
||||
: "0%";
|
||||
|
||||
// 类型分析占比
|
||||
const maxTypeAmount = computed(() =>
|
||||
Math.max(1, ...dashboard.expense_types.map((item) => Number(item.amount || 0))),
|
||||
);
|
||||
const typePercent = (amount) =>
|
||||
`${Math.round((Number(amount || 0) / maxTypeAmount.value) * 100)}%`;
|
||||
|
||||
const responseData = (res) => res?.data?.data ?? res?.data ?? res ?? {};
|
||||
|
||||
const loadDashboard = async () => {
|
||||
try {
|
||||
const data = responseData(await getReimbursementDashboard());
|
||||
dashboard.week = data.week || emptyStat();
|
||||
dashboard.month = data.month || emptyStat();
|
||||
dashboard.year = data.year || emptyStat();
|
||||
dashboard.trend = data.trend || [];
|
||||
dashboard.status_dist = data.status_dist || {};
|
||||
dashboard.expense_types = data.expense_types || [];
|
||||
} catch (error) {
|
||||
console.warn("加载报销统计失败:", error?.message);
|
||||
}
|
||||
renderTrendChart();
|
||||
};
|
||||
|
||||
// 加载数据（模拟接口调用）
|
||||
const loadData = async () => {
|
||||
// TODO: 调用接口获取真实数据
|
||||
// const res = await getErpDashboard();
|
||||
|
||||
// 模拟数据更新
|
||||
firstRowStats.value = [
|
||||
{ label: '今日销售', value: 12580 },
|
||||
{ label: '今日零售', value: 8560 },
|
||||
{ label: '今日采购', value: 23400 },
|
||||
{ label: '本月累计销售', value: 358600 },
|
||||
{ label: '本月累计零售', value: 245800 },
|
||||
{ label: '本月累计采购', value: 568900 },
|
||||
];
|
||||
|
||||
secondRowStats.value = [
|
||||
{ label: '昨日销售', value: 15230 },
|
||||
{ label: '昨日零售', value: 9870 },
|
||||
{ label: '昨日采购', value: 18900 },
|
||||
{ label: '今年累计销售', value: 2856000 },
|
||||
{ label: '今年累计零售', value: 1985000 },
|
||||
{ label: '今年累计采购', value: 4568000 },
|
||||
];
|
||||
|
||||
// 更新图表数据
|
||||
updateCharts();
|
||||
};
|
||||
const handleResize = () => trendChart?.resize();
|
||||
|
||||
// 更新图表数据
|
||||
const updateCharts = () => {
|
||||
const salesData = [28000, 32000, 35000, 38000, 42000, 358600];
|
||||
const retailData = [18000, 21000, 22000, 25000, 28000, 245800];
|
||||
const purchaseData = [45000, 48000, 52000, 55000, 58000, 568900];
|
||||
|
||||
if (salesChartInstance.value) {
|
||||
salesChartInstance.value.setOption({ series: [{ data: salesData }] });
|
||||
}
|
||||
if (retailChartInstance.value) {
|
||||
retailChartInstance.value.setOption({ series: [{ data: retailData }] });
|
||||
}
|
||||
if (purchaseChartInstance.value) {
|
||||
purchaseChartInstance.value.setOption({ series: [{ data: purchaseData }] });
|
||||
}
|
||||
};
|
||||
|
||||
// 自适应窗口大小
|
||||
const handleResize = () => {
|
||||
salesChartInstance.value?.resize();
|
||||
retailChartInstance.value?.resize();
|
||||
purchaseChartInstance.value?.resize();
|
||||
};
|
||||
const money = (value) => Number(value || 0).toLocaleString("zh-CN", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
||||
const statusType = (value) =>
|
||||
({ 0: "info", 1: "warning", 2: "success", 3: "danger", 4: "info", 5: "success" })[value] ||
|
||||
"info";
|
||||
|
||||
onMounted(async () => {
|
||||
initCharts();
|
||||
await nextTick();
|
||||
await loadData();
|
||||
window.addEventListener('resize', handleResize);
|
||||
await loadDashboard();
|
||||
window.addEventListener("resize", handleResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
salesChartInstance.value?.dispose();
|
||||
retailChartInstance.value?.dispose();
|
||||
purchaseChartInstance.value?.dispose();
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("resize", handleResize);
|
||||
trendChart?.dispose();
|
||||
trendChart = null;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.erp-dashboard {
|
||||
background-color: #f5f7fa;
|
||||
// min-height: calc(100vh - 84px);
|
||||
.oa-dashboard {
|
||||
background: #f5f7fa;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
h2 {
|
||||
margin: 0 0 8px;
|
||||
color: #303133;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-row {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.el-col {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -258,48 +259,46 @@ onUnmounted(() => {
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.stat-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 14px;
|
||||
color: #c0c4cc;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.stat-title {
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
|
||||
.stat-amount {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
margin-bottom: 8px;
|
||||
|
||||
.currency {
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
font-weight: 500;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
|
||||
.number {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-meta {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
flex-wrap: wrap;
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-row {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.el-col {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -308,10 +307,7 @@ onUnmounted(() => {
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
||||
height: 320px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
.chart-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
@@ -320,70 +316,103 @@ onUnmounted(() => {
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
|
||||
.chart-container {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
height: 280px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// 手机端适配：统计卡片每行 2 个，图表卡片每行 1 个
|
||||
.type-card {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.status-dist,
|
||||
.type-dist {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.dist-row,
|
||||
.type-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.dist-bar-wrap,
|
||||
.type-bar-wrap {
|
||||
flex: 1;
|
||||
height: 10px;
|
||||
background: #f0f2f5;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dist-bar {
|
||||
height: 100%;
|
||||
background: #409eff;
|
||||
border-radius: 5px;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
.type-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #409eff, #67c23a);
|
||||
border-radius: 5px;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
.dist-count {
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.type-name {
|
||||
width: 110px;
|
||||
color: #606266;
|
||||
font-size: 13px;
|
||||
text-align: right;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.type-count {
|
||||
width: 50px;
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.type-amount {
|
||||
width: 110px;
|
||||
color: #303133;
|
||||
font-size: 13px;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.erp-dashboard {
|
||||
overflow-x: hidden;
|
||||
.oa-dashboard {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
// el-row gutter 通过负 margin + col padding 实现，手机端缩小间距并防止横向溢出
|
||||
.stat-row {
|
||||
margin-left: -4px !important;
|
||||
margin-right: -4px !important;
|
||||
|
||||
:deep(.el-col) {
|
||||
padding-left: 4px !important;
|
||||
padding-right: 4px !important;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:nth-last-child(-n + 2) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.page-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.chart-row {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
|
||||
:deep(.el-col) {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.type-name {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
// 一行两个统计卡片，缩小内边距与字号防止挤压
|
||||
.stat-card {
|
||||
padding: 10px 12px;
|
||||
|
||||
.stat-header {
|
||||
margin-bottom: 8px;
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-value .number {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
height: 280px;
|
||||
.type-amount {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -140,25 +140,25 @@
|
||||
>
|
||||
详情
|
||||
</el-button>
|
||||
<el-button
|
||||
<!-- <el-button
|
||||
size="small"
|
||||
type="danger"
|
||||
link
|
||||
@click="handleDelete(scope.row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</el-button> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 批量删除 -->
|
||||
<div class="batch-bar" v-if="selectedLogs.length > 0">
|
||||
<!-- <div class="batch-bar" v-if="selectedLogs.length > 0">
|
||||
<el-button type="danger" plain @click="handleBatchDelete">
|
||||
<el-icon><Delete /></el-icon>
|
||||
批量删除 ({{ selectedLogs.length }})
|
||||
</el-button>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-bar">
|
||||
|
||||
Reference in New Issue
Block a user