<template>
|
<div class="dashboard-container">
|
<!-- 顶部KPI卡片：显示仓库总数和总库存量 -->
|
<div class="kpi-cards">
|
<div class="kpi-card">
|
<div class="kpi-icon">🏚️</div>
|
<div class="kpi-info">
|
<div class="kpi-label">仓库总数</div>
|
<div class="kpi-value">{{ totalWarehouses }}</div>
|
</div>
|
</div>
|
<div class="kpi-card">
|
<div class="kpi-icon">📦</div>
|
<div class="kpi-info">
|
<div class="kpi-label">总库存量</div>
|
<div class="kpi-value">{{ totalStock.toLocaleString() }}</div>
|
</div>
|
</div>
|
<div class="kpi-card">
|
<div class="kpi-icon">📊</div>
|
<div class="kpi-info">
|
<div class="kpi-label">本月总入库</div>
|
<div class="kpi-value">{{ monthlyInboundTotal.toLocaleString() }}</div>
|
</div>
|
</div>
|
<div class="kpi-card">
|
<div class="kpi-icon">📤</div>
|
<div class="kpi-info">
|
<div class="kpi-label">本月总出库</div>
|
<div class="kpi-value">{{ monthlyOutboundTotal.toLocaleString() }}</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 顶部：本月出入库趋势 - 上3下2布局，每个卡片直接显示仓库数字 -->
|
<div class="chart-row top-three">
|
<div v-for="warehouse in topWarehouses" :key="warehouse.code" class="chart-card">
|
<div class="card-title">{{ warehouse.name }}</div>
|
<!-- 仓库数字显示区域 -->
|
<div class="warehouse-numbers">
|
<div class="number-item inbound">
|
<span class="number-label">入库</span>
|
<span class="number-value">{{ getMonthlyInbound(warehouse.code) }}</span>
|
</div>
|
<div class="number-item outbound">
|
<span class="number-label">出库</span>
|
<span class="number-value">{{ getMonthlyOutbound(warehouse.code) }}</span>
|
</div>
|
<div class="number-item stock">
|
<span class="number-label">库存</span>
|
<span class="number-value">{{ getWarehouseStock(warehouse.code) }}</span>
|
</div>
|
</div>
|
<div :id="`chart-${warehouse.code}`" class="chart-content"></div>
|
</div>
|
</div>
|
|
<div class="chart-row bottom-two">
|
<div v-for="warehouse in bottomWarehouses" :key="warehouse.code" class="chart-card">
|
<div class="card-title">{{ warehouse.name }}</div>
|
<!-- 仓库数字显示区域 -->
|
<div class="warehouse-numbers">
|
<div class="number-item inbound">
|
<span class="number-label">入库</span>
|
<span class="number-value">{{ getMonthlyInbound(warehouse.code) }}</span>
|
</div>
|
<div class="number-item outbound">
|
<span class="number-label">出库</span>
|
<span class="number-value">{{ getMonthlyOutbound(warehouse.code) }}</span>
|
</div>
|
<div class="number-item stock">
|
<span class="number-label">库存</span>
|
<span class="number-value">{{ getWarehouseStock(warehouse.code) }}</span>
|
</div>
|
</div>
|
<div :id="`chart-${warehouse.code}`" class="chart-content"></div>
|
</div>
|
</div>
|
|
<!-- 每日出入库趋势 (全宽) -->
|
<div class="chart-row full-width">
|
<div class="chart-card">
|
<div class="card-title">每日出入库趋势</div>
|
<div id="chart-daily" class="chart-content"></div>
|
</div>
|
</div>
|
|
<!-- 仓库分布 -->
|
<div class="chart-row">
|
<div class="chart-card">
|
<div class="card-title">各仓库库存分布</div>
|
<div id="chart-warehouse" class="chart-content"></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from "echarts";
|
|
export default {
|
name: "Home",
|
data() {
|
return {
|
charts: {},
|
// 五个仓库定义 - 上3个
|
topWarehouses: [
|
{ code: "GWSC1", name: "高温1号仓库" },
|
{ code: "CWSC1", name: "常温1号仓库" },
|
{ code: "HCSC1", name: "分容1号仓库" }
|
],
|
// 下2个
|
bottomWarehouses: [
|
{ code: "FJSC1", name: "负极卷1号仓库" },
|
{ code: "ZJSC1", name: "正极卷1号仓库" }
|
],
|
dailyData: [],
|
// 存储每个仓库的月度数据
|
monthlyData: {
|
GWSC1: [],
|
CWSC1: [],
|
HCSC1: [],
|
FJSC1: [],
|
ZJSC1: []
|
},
|
// 存储每个仓库的当前库存
|
warehouseStocks: {
|
GWSC1: 0,
|
CWSC1: 0,
|
HCSC1: 0,
|
FJSC1: 0,
|
ZJSC1: 0
|
},
|
warehouseData: [],
|
// KPI 汇总数据
|
totalWarehouses: 5,
|
totalStock: 0,
|
monthlyInboundTotal: 0,
|
monthlyOutboundTotal: 0
|
};
|
},
|
mounted() {
|
this.initCharts();
|
this.loadData();
|
window.addEventListener("resize", this.handleResize);
|
},
|
beforeUnmount() {
|
window.removeEventListener("resize", this.handleResize);
|
Object.values(this.charts).forEach(chart => chart && chart.dispose());
|
},
|
methods: {
|
handleResize() {
|
Object.values(this.charts).forEach(chart => chart && chart.resize());
|
},
|
|
initCharts() {
|
// 初始化所有仓库图表
|
const allWarehouses = [...this.topWarehouses, ...this.bottomWarehouses];
|
allWarehouses.forEach(warehouse => {
|
const chartId = `chart-${warehouse.code}`;
|
const el = document.getElementById(chartId);
|
if (el) {
|
this.charts[warehouse.code] = echarts.init(el);
|
}
|
});
|
// 初始化每日图表和仓库分布图表
|
this.charts.daily = echarts.init(document.getElementById("chart-daily"));
|
this.charts.warehouse = echarts.init(document.getElementById("chart-warehouse"));
|
},
|
|
async loadData() {
|
// 并行加载所有仓库的月度数据（分别传入不同的Roadway参数）
|
const allWarehouses = [...this.topWarehouses, ...this.bottomWarehouses];
|
const monthlyPromises = allWarehouses.map(warehouse =>
|
this.loadMonthlyStatsForWarehouse(warehouse.code)
|
);
|
await Promise.all(monthlyPromises);
|
// 更新所有仓库的月度图表
|
this.updateAllMonthlyTrendCharts();
|
|
await this.loadDailyStats();
|
await this.loadStockByWarehouse();
|
await this.loadWarehouseStocks();
|
this.calculateKPIs();
|
},
|
|
async loadMonthlyStatsForWarehouse(roadway) {
|
console.log(`正在加载${roadway}的每月统计数据...`);
|
try {
|
// 关键修复：分别传入不同的Roadway参数
|
const res = await this.http.get("/api/Dashboard/MonthlyStats?monthly=12&roadway=" + roadway);
|
if (res.status && res.data) {
|
console.log(`${roadway} 每月统计数据:`, res.data);
|
this.monthlyData[roadway] = res.data;
|
} else {
|
this.monthlyData[roadway] = [];
|
}
|
} catch (e) {
|
console.error(`加载${roadway}每月统计失败`, e);
|
this.monthlyData[roadway] = [];
|
}
|
},
|
|
async loadDailyStats() {
|
try {
|
const res = await this.http.get("/api/Dashboard/DailyStats", { days: 30 });
|
if (res.status && res.data) {
|
console.log("每日统计数据:", res.data);
|
this.dailyData = res.data;
|
this.updateDailyChart();
|
}
|
} catch (e) {
|
console.error("加载每日统计失败", e);
|
}
|
},
|
|
async loadStockByWarehouse() {
|
try {
|
const res = await this.http.get("/api/Dashboard/StockByWarehouse");
|
if (res.status && res.data) {
|
console.log("仓库分布数据:", res.data);
|
this.warehouseData = res.data.data || res.data;
|
this.updateWarehouseChart();
|
}
|
} catch (e) {
|
console.error("加载仓库分布失败", e);
|
}
|
},
|
|
async loadWarehouseStocks() {
|
// 模拟加载每个仓库的当前库存量
|
// 如果后端有接口，可以替换为真实API调用
|
try {
|
// 尝试加载库存数据，如果接口不存在则使用模拟数据
|
const allWarehouses = [...this.topWarehouses, ...this.bottomWarehouses];
|
for (const warehouse of allWarehouses) {
|
try {
|
const res = await this.http.get(`/api/Dashboard/WarehouseStock?warehouse=${warehouse.code}`);
|
if (res.status && res.data) {
|
this.warehouseStocks[warehouse.code] = res.data.stock || 0;
|
} else {
|
// 从月度数据中计算模拟库存（最近月份累计入库-出库）
|
const monthlyData = this.monthlyData[warehouse.code] || [];
|
let totalInbound = 0;
|
let totalOutbound = 0;
|
monthlyData.forEach(m => {
|
totalInbound += (m.inbound ?? m.Inbound) || 0;
|
totalOutbound += (m.outbound ?? m.Outbound) || 0;
|
});
|
this.warehouseStocks[warehouse.code] = Math.max(0, totalInbound - totalOutbound);
|
}
|
} catch (e) {
|
// 使用模拟数据
|
const mockStocks = {
|
GWSC1: 12580,
|
CWSC1: 8920,
|
HCSC1: 15600,
|
FJSC1: 4300,
|
ZJSC1: 7200
|
};
|
this.warehouseStocks[warehouse.code] = mockStocks[warehouse.code] || 0;
|
}
|
}
|
} catch (e) {
|
console.error("加载仓库库存失败", e);
|
}
|
},
|
|
getMonthlyInbound(warehouseCode) {
|
const data = this.monthlyData[warehouseCode] || [];
|
if (data.length === 0) return 0;
|
// 获取最近一个月（最后一条）的入库数
|
const latest = data[data.length - 1];
|
return (latest.inbound ?? latest.Inbound) || 0;
|
},
|
|
getMonthlyOutbound(warehouseCode) {
|
const data = this.monthlyData[warehouseCode] || [];
|
if (data.length === 0) return 0;
|
// 获取最近一个月（最后一条）的出库数
|
const latest = data[data.length - 1];
|
return (latest.outbound ?? latest.Outbound) || 0;
|
},
|
|
getWarehouseStock(warehouseCode) {
|
return this.warehouseStocks[warehouseCode] || 0;
|
},
|
|
calculateKPIs() {
|
// 计算总库存
|
let totalStock = 0;
|
for (const code in this.warehouseStocks) {
|
totalStock += this.warehouseStocks[code];
|
}
|
this.totalStock = totalStock;
|
|
// 计算本月总入库和总出库（所有仓库最近一个月的合计）
|
let totalInbound = 0;
|
let totalOutbound = 0;
|
const allWarehouses = [...this.topWarehouses, ...this.bottomWarehouses];
|
allWarehouses.forEach(warehouse => {
|
totalInbound += this.getMonthlyInbound(warehouse.code);
|
totalOutbound += this.getMonthlyOutbound(warehouse.code);
|
});
|
this.monthlyInboundTotal = totalInbound;
|
this.monthlyOutboundTotal = totalOutbound;
|
},
|
|
// 更新所有仓库的月度趋势图表
|
updateAllMonthlyTrendCharts() {
|
const allWarehouses = [...this.topWarehouses, ...this.bottomWarehouses];
|
allWarehouses.forEach(warehouse => {
|
this.updateMonthlyTrendChartForWarehouse(warehouse.code);
|
});
|
},
|
|
updateMonthlyTrendChartForWarehouse(roadway) {
|
const chart = this.charts[roadway];
|
if (!chart) return;
|
|
const data = this.monthlyData[roadway] || [];
|
// 兼容大小写字段名
|
const monthLabels = data.map(m => m.month || m.Month || "");
|
const inboundData = data.map(m => {
|
const val = m.inbound ?? m.Inbound;
|
return val !== undefined && val !== null ? Number(val) : 0;
|
});
|
const outboundData = data.map(m => {
|
const val = m.outbound ?? m.Outbound;
|
return val !== undefined && val !== null ? Number(val) : 0;
|
});
|
|
const option = {
|
tooltip: {
|
trigger: "axis",
|
formatter: function(params) {
|
let result = params[0].axisValue + "<br/>";
|
params.forEach(p => {
|
result += `${p.marker}${p.seriesName}: ${p.value}<br/>`;
|
});
|
return result;
|
}
|
},
|
legend: {
|
data: ["入库", "出库"],
|
textStyle: { color: "#fff" },
|
top: 0,
|
right: 10,
|
itemWidth: 20,
|
itemHeight: 12
|
},
|
grid: {
|
left: "8%",
|
right: "8%",
|
top: "18%",
|
bottom: "12%",
|
containLabel: true
|
},
|
xAxis: {
|
type: "category",
|
data: monthLabels,
|
axisLabel: {
|
color: "#ccc",
|
rotate: 45,
|
fontSize: 10,
|
interval: 0,
|
margin: 8
|
},
|
axisLine: { lineStyle: { color: "#4a5b6e" } }
|
},
|
yAxis: {
|
type: "value",
|
name: "任务数量",
|
nameTextStyle: { color: "#ccc", fontSize: 11 },
|
axisLabel: { color: "#ccc" },
|
splitLine: { lineStyle: { color: "#2a3a4a", type: "dashed" } }
|
},
|
series: [
|
{
|
name: "入库",
|
type: "bar",
|
data: inboundData,
|
itemStyle: {
|
color: "#5470c6",
|
borderRadius: [4, 4, 0, 0]
|
},
|
barWidth: "35%",
|
label: {
|
show: inboundData.length <= 8,
|
position: "top",
|
color: "#5470c6",
|
fontSize: 10
|
}
|
},
|
{
|
name: "出库",
|
type: "line",
|
data: outboundData,
|
symbol: "circle",
|
symbolSize: 6,
|
itemStyle: { color: "#91cc75" },
|
lineStyle: { width: 2, type: "solid" },
|
smooth: false,
|
label: {
|
show: outboundData.length <= 8,
|
position: "top",
|
color: "#91cc75",
|
fontSize: 10
|
}
|
}
|
]
|
};
|
chart.setOption(option, true);
|
},
|
|
updateDailyChart() {
|
if (!this.charts.daily) return;
|
const option = {
|
tooltip: { trigger: "axis" },
|
legend: { data: ["入库", "出库"], textStyle: { color: "#fff" } },
|
xAxis: {
|
type: "category",
|
data: this.dailyData.map(d => d.date),
|
axisLabel: {
|
color: "#fff",
|
interval: 0,
|
rotate: 45,
|
fontSize: 12,
|
margin: 10
|
},
|
axisTick: {
|
alignWithLabel: true
|
}
|
},
|
yAxis: {
|
type: "value",
|
axisLabel: { color: "#fff" }
|
},
|
grid: {
|
left: "3%",
|
right: "4%",
|
bottom: "15%",
|
top: "10%",
|
containLabel: true
|
},
|
series: [
|
{
|
name: "入库",
|
type: "bar",
|
data: this.dailyData.map(d => d.inbound),
|
itemStyle: { color: "#5470c6" }
|
},
|
{
|
name: "出库",
|
type: "bar",
|
data: this.dailyData.map(d => d.outbound),
|
itemStyle: { color: "#91cc75" }
|
}
|
]
|
};
|
this.charts.daily.setOption(option, true);
|
},
|
|
updateWarehouseChart() {
|
if (!this.charts.warehouse) return;
|
const warehouseNames = this.warehouseData.map(w => w.warehouse);
|
const hasStocks = this.warehouseData.map(w => w.hasStock);
|
const noStocks = this.warehouseData.map(w => w.noStock);
|
const hasStockPercentages = this.warehouseData.map(w => w.hasStockPercentage);
|
const noStockPercentages = this.warehouseData.map(w => w.noStockPercentage);
|
|
const option = {
|
tooltip: {
|
trigger: "axis",
|
axisPointer: {
|
type: "shadow"
|
},
|
formatter: function(params) {
|
let tip = params[0].name + "<br/>";
|
params.forEach(param => {
|
const dataIndex = param.dataIndex;
|
const warehouse = window.homeComponent?.warehouseData[dataIndex];
|
if (warehouse) {
|
if (param.seriesName === "已用容量") {
|
tip += `${param.marker}${param.seriesName}: ${param.value} (${warehouse.hasStockPercentage})<br/>`;
|
tip += `有库存: ${warehouse.hasStock}<br/>`;
|
tip += `无库存: ${warehouse.noStock}<br/>`;
|
tip += `总容量: ${warehouse.total}`;
|
} else if (param.seriesName === "剩余容量") {
|
tip += `${param.marker}${param.seriesName}: ${param.value} (${warehouse.noStockPercentage})<br/>`;
|
}
|
} else {
|
tip += `${param.marker}${param.seriesName}: ${param.value}<br/>`;
|
}
|
});
|
return tip;
|
}
|
},
|
legend: {
|
data: ["已用容量", "剩余容量"],
|
textStyle: { color: "#fff" }
|
},
|
xAxis: {
|
type: "category",
|
data: warehouseNames,
|
axisLabel: { color: "#fff", rotate: 30, interval: 0 }
|
},
|
yAxis: {
|
type: "value",
|
name: "容量",
|
axisLabel: { color: "#fff" }
|
},
|
series: [
|
{
|
name: "已用容量",
|
type: "bar",
|
data: hasStocks.map((value, index) => ({
|
value: value,
|
label: {
|
show: true,
|
position: "top",
|
formatter: (params) => {
|
const pct = hasStockPercentages[params.dataIndex];
|
return `${params.value} (${pct})`;
|
},
|
color: "#91cc75",
|
fontSize: 11
|
}
|
})),
|
itemStyle: { color: "#91cc75" }
|
},
|
{
|
name: "剩余容量",
|
type: "bar",
|
data: noStocks.map((value, index) => ({
|
value: value,
|
label: {
|
show: true,
|
position: "top",
|
formatter: (params) => {
|
const pct = noStockPercentages[params.dataIndex];
|
return `${params.value} (${pct})`;
|
},
|
color: "#fac858",
|
fontSize: 11
|
}
|
})),
|
itemStyle: { color: "#fac858" }
|
}
|
]
|
};
|
|
window.homeComponent = this;
|
this.charts.warehouse.setOption(option, true);
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.dashboard-container {
|
padding: 20px;
|
color: #e0e0e0;
|
min-height: calc(100vh - 60px);
|
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
|
background-attachment: fixed;
|
}
|
|
/* KPI 卡片样式 */
|
.kpi-cards {
|
display: grid;
|
grid-template-columns: repeat(4, 1fr);
|
gap: 20px;
|
margin-bottom: 24px;
|
}
|
|
.kpi-card {
|
background: rgba(10, 16, 35, 0.7);
|
backdrop-filter: blur(10px);
|
border: 1px solid rgba(64, 224, 208, 0.3);
|
border-radius: 16px;
|
padding: 16px 20px;
|
display: flex;
|
align-items: center;
|
gap: 16px;
|
transition: all 0.3s ease;
|
box-shadow: 0 0 15px rgba(0, 255, 255, 0.1);
|
}
|
|
.kpi-card:hover {
|
transform: translateY(-3px);
|
border-color: rgba(64, 224, 208, 0.6);
|
box-shadow: 0 0 25px rgba(0, 255, 255, 0.2);
|
}
|
|
.kpi-icon {
|
font-size: 32px;
|
opacity: 0.9;
|
}
|
|
.kpi-info {
|
flex: 1;
|
}
|
|
.kpi-label {
|
font-size: 13px;
|
color: #8ba0b5;
|
margin-bottom: 6px;
|
letter-spacing: 1px;
|
}
|
|
.kpi-value {
|
font-size: 28px;
|
font-weight: 700;
|
color: #00ffff;
|
text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
|
line-height: 1.2;
|
}
|
|
/* 上3个图表布局 */
|
.chart-row.top-three {
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
gap: 20px;
|
margin-bottom: 20px;
|
}
|
|
/* 下2个图表布局 */
|
.chart-row.bottom-two {
|
display: grid;
|
grid-template-columns: repeat(2, 1fr);
|
gap: 20px;
|
margin-bottom: 20px;
|
}
|
|
.chart-row.full-width {
|
width: 100%;
|
margin-bottom: 20px;
|
}
|
|
.chart-card {
|
background: rgba(10, 16, 35, 0.6);
|
backdrop-filter: blur(10px);
|
border: 1px solid rgba(64, 224, 208, 0.3);
|
border-radius: 12px;
|
padding: 15px;
|
position: relative;
|
box-shadow: 0 0 15px rgba(0, 255, 255, 0.1), inset 0 0 10px rgba(64, 224, 208, 0.1);
|
transition: all 0.3s ease;
|
overflow: hidden;
|
}
|
|
.chart-card:hover {
|
transform: translateY(-5px);
|
box-shadow: 0 0 25px rgba(0, 255, 255, 0.3), inset 0 0 15px rgba(64, 224, 208, 0.2);
|
border: 1px solid rgba(64, 224, 208, 0.6);
|
}
|
|
.chart-card::before {
|
content: "";
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 10px;
|
height: 10px;
|
border-top: 2px solid #00ffff;
|
border-left: 2px solid #00ffff;
|
box-shadow: -2px -2px 10px #00ffff, 0 0 10px rgba(0, 255, 255, 0.7);
|
}
|
|
.chart-card::after {
|
content: "";
|
position: absolute;
|
top: 0;
|
right: 0;
|
width: 10px;
|
height: 10px;
|
border-top: 2px solid #00ffff;
|
border-right: 2px solid #00ffff;
|
box-shadow: 2px -2px 10px #00ffff, 0 0 10px rgba(0, 255, 255, 0.7);
|
}
|
|
.chart-card::before,
|
.chart-card::after {
|
animation: neon-flicker 2s infinite alternate;
|
}
|
|
@keyframes neon-flicker {
|
0%,
|
100% {
|
opacity: 1;
|
box-shadow: -2px -2px 10px #00ffff, 0 0 10px rgba(0, 255, 255, 0.7);
|
}
|
50% {
|
opacity: 0.8;
|
box-shadow: -2px -2px 5px #00ffff, 0 0 5px rgba(0, 255, 255, 0.5);
|
}
|
}
|
|
.card-title {
|
color: #00ffff;
|
font-size: 15px;
|
text-align: center;
|
margin-bottom: 12px;
|
text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
|
font-weight: 500;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
/* 仓库数字显示区域 */
|
.warehouse-numbers {
|
display: flex;
|
justify-content: space-around;
|
margin-bottom: 12px;
|
padding: 8px 0;
|
background: rgba(0, 0, 0, 0.3);
|
border-radius: 8px;
|
}
|
|
.number-item {
|
text-align: center;
|
flex: 1;
|
}
|
|
.number-label {
|
display: block;
|
font-size: 11px;
|
color: #8ba0b5;
|
margin-bottom: 4px;
|
}
|
|
.number-value {
|
display: block;
|
font-size: 20px;
|
font-weight: 700;
|
letter-spacing: 1px;
|
}
|
|
.number-item.inbound .number-value {
|
color: #5470c6;
|
}
|
|
.number-item.outbound .number-value {
|
color: #91cc75;
|
}
|
|
.number-item.stock .number-value {
|
color: #fac858;
|
}
|
|
.chart-content {
|
height: 240px;
|
width: 100%;
|
}
|
|
/* 全宽图表 */
|
.full-width .chart-card {
|
width: 100%;
|
}
|
|
.full-width .chart-content {
|
height: 350px;
|
}
|
|
/* 响应式调整 */
|
@media (max-width: 1024px) {
|
.kpi-cards {
|
grid-template-columns: repeat(2, 1fr);
|
}
|
.chart-row.top-three {
|
grid-template-columns: repeat(2, 1fr);
|
}
|
.chart-row.bottom-two {
|
grid-template-columns: repeat(2, 1fr);
|
}
|
}
|
|
@media (max-width: 768px) {
|
.kpi-cards {
|
grid-template-columns: 1fr;
|
}
|
.chart-row.top-three {
|
grid-template-columns: 1fr;
|
}
|
.chart-row.bottom-two {
|
grid-template-columns: 1fr;
|
}
|
.chart-content {
|
height: 220px;
|
}
|
.full-width .chart-content {
|
height: 280px;
|
}
|
.card-title {
|
font-size: 13px;
|
white-space: normal;
|
}
|
.number-value {
|
font-size: 16px;
|
}
|
}
|
|
/* 添加网格线效果 */
|
.dashboard-container::before {
|
content: "";
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background-image: linear-gradient(rgba(64, 224, 208, 0.05) 1px, transparent 1px),
|
linear-gradient(90deg, rgba(64, 224, 208, 0.05) 1px, transparent 1px);
|
background-size: 30px 30px;
|
pointer-events: none;
|
z-index: -1;
|
}
|
</style>
|
