From b46d3fcc37e5eb76e77e5b7f1c0e7383af237d30 Mon Sep 17 00:00:00 2001
From: huminmin <mac@MacBook-Pro.local>
Date: 星期五, 30 一月 2026 14:09:01 +0800
Subject: [PATCH] Merge branch 'dev_New' of http://114.132.189.42:9002/r/product-inventory-management into dev_New
---
src/views/financialManagement/accounting/index.vue | 511 +++++++----
src/assets/icons/png/blue@2x.png | 0
src/views/reportAnalysis/productionAnalysis/components/DateTypeSwitch.vue | 94 ++
src/views/reportAnalysis/productionAnalysis/index.vue | 292 ++++++
src/views/reportAnalysis/productionAnalysis/components/left-top.vue | 205 ++++
src/views/reportAnalysis/productionAnalysis/components/center-center.vue | 193 ++++
src/views/reportAnalysis/productionAnalysis/components/center-top.vue | 137 ++
src/views/reportAnalysis/productionAnalysis/components/right-top.vue | 168 +++
src/views/reportAnalysis/productionAnalysis/components/left-bottom.vue | 170 +++
src/assets/icons/png/pink@2x.png | 0
src/views/reportAnalysis/productionAnalysis/components/ProductTypeSwitch.vue | 85 +
src/assets/icons/png/yellow@2x.png | 0
src/views/reportAnalysis/productionAnalysis/components/PanelHeader.vue | 33
src/views/reportAnalysis/productionAnalysis/components/center-bottom.vue | 351 +++++++
src/assets/icons/png/green@2x.png | 0
src/assets/icons/png/circlePink@2x.png | 0
src/views/reportAnalysis/productionAnalysis/components/CarouselCards.vue | 306 ++++++
src/views/reportAnalysis/productionAnalysis/components/right-bottom.vue | 192 ++++
18 files changed, 2,548 insertions(+), 189 deletions(-)
diff --git a/src/assets/icons/png/blue@2x.png b/src/assets/icons/png/blue@2x.png
new file mode 100644
index 0000000..6a33bfd
--- /dev/null
+++ b/src/assets/icons/png/blue@2x.png
Binary files differ
diff --git a/src/assets/icons/png/circlePink@2x.png b/src/assets/icons/png/circlePink@2x.png
new file mode 100644
index 0000000..6958062
--- /dev/null
+++ b/src/assets/icons/png/circlePink@2x.png
Binary files differ
diff --git a/src/assets/icons/png/green@2x.png b/src/assets/icons/png/green@2x.png
new file mode 100644
index 0000000..4e9debb
--- /dev/null
+++ b/src/assets/icons/png/green@2x.png
Binary files differ
diff --git a/src/assets/icons/png/pink@2x.png b/src/assets/icons/png/pink@2x.png
new file mode 100644
index 0000000..a6de60f
--- /dev/null
+++ b/src/assets/icons/png/pink@2x.png
Binary files differ
diff --git a/src/assets/icons/png/yellow@2x.png b/src/assets/icons/png/yellow@2x.png
new file mode 100644
index 0000000..3c458c8
--- /dev/null
+++ b/src/assets/icons/png/yellow@2x.png
Binary files differ
diff --git a/src/views/financialManagement/accounting/index.vue b/src/views/financialManagement/accounting/index.vue
index 40bf1ae..830fe1a 100644
--- a/src/views/financialManagement/accounting/index.vue
+++ b/src/views/financialManagement/accounting/index.vue
@@ -1,7 +1,7 @@
<template>
<div style="padding: 20px;">
<!-- 椤甸潰鏍囬鍜岀瓫閫夋潯浠� -->
- <div class="w-full md:w-auto flex items-center gap-3" style="margin-bottom: 20px;">
+ <div class="w-full md:w-auto flex items-center gap-3">
<el-form :inline="true">
<el-form-item label="骞翠唤">
<el-date-picker
@@ -31,94 +31,133 @@
<main class="container mx-auto px-4 pb-10">
<!-- 鍥哄畾璧勪骇鎸囨爣鍗＄墖 -->
- <div class="grid-container">
+ <div class="kpi-grid">
<!-- 璁惧鎬绘暟 -->
- <el-card class="bg2">
- <p>璁惧鎬绘暟</p>
- <h3>
- {{ assetInfo.totalEquipment }}
- </h3>
- </el-card>
+ <div class="kpi-card">
+ <div class="kpi-left">
+ <span class="kpi-dot kpi-dot-blue"></span>
+ <span class="kpi-title">璁惧鎬绘暟</span>
+ <div class="kpi-value">{{ assetInfo.totalEquipment }}涓�</div>
+ </div>
+ <div class="kpi-icon-wrap kpi-icon-blue">
+ <img :src="iconBlue" alt="" class="kpi-icon" />
+ </div>
+ </div>
<!-- 璧勪骇鍘熷�� -->
- <el-card class="bg3">
- <p>璧勪骇鍘熷��</p>
- <h3>
- 楼{{ formatCurrency(assetInfo.totalOriginalValue) }}
- </h3>
- </el-card>
+ <div class="kpi-card">
+ <div class="kpi-left">
+ <span class="kpi-dot kpi-dot-orange"></span>
+ <span class="kpi-title">璧勪骇鍘熷��</span>
+ <div class="kpi-value">楼{{ formatCurrency(assetInfo.totalOriginalValue) }}</div>
+ </div>
+ <div class="kpi-icon-wrap kpi-icon-orange">
+ <img :src="iconWalletOrange" alt="" class="kpi-icon" />
+ </div>
+ </div>
<!-- 绱鎶樻棫 -->
- <el-card class="bg4">
- <p>绱鎶樻棫</p>
- <h3>
- 楼{{ formatCurrency(assetInfo.totalDepreciation) }}
- </h3>
- </el-card>
+ <div class="kpi-card">
+ <div class="kpi-left">
+ <span class="kpi-dot kpi-dot-green"></span>
+ <span class="kpi-title">绱鎶樻棫</span>
+ <div class="kpi-value">楼{{ formatCurrency(assetInfo.totalDepreciation) }}</div>
+ </div>
+ <div class="kpi-icon-wrap kpi-icon-green">
+ <img :src="iconGreen" alt="" class="kpi-icon" />
+ </div>
+ </div>
+
+ <!-- 搴撳瓨璧勪骇 -->
+ <div class="kpi-card">
+ <div class="kpi-left">
+ <span class="kpi-dot kpi-dot-pink"></span>
+ <span class="kpi-title">搴撳瓨璧勪骇</span>
+ <div class="kpi-value">楼{{ formatCurrency(assetInfo.inventoryValue) }}</div>
+ </div>
+ <div class="kpi-icon-wrap kpi-icon-pink">
+ <img :src="iconPink" alt="" class="kpi-icon" />
+ </div>
+ </div>
<!-- 鍑�鍊� -->
- <el-card class="bg5">
- <p>鍑�鍊�</p>
- <h3>
- 楼{{ formatCurrency(assetInfo.totalNetValue) }}
- </h3>
- </el-card>
+ <div class="kpi-card">
+ <div class="kpi-left">
+ <span class="kpi-dot kpi-dot-yellow"></span>
+ <span class="kpi-title">鍑�鍊�</span>
+ <div class="kpi-value">楼{{ formatCurrency(assetInfo.totalNetValue) }}</div>
+ </div>
+ <div class="kpi-icon-wrap kpi-icon-yellow">
+ <img :src="iconYellow" alt="" class="kpi-icon" />
+ </div>
+ </div>
+
<!-- 璐熷�� -->
- <el-card class="bg2">
- <p>璐熷��</p>
- <h3>
- 楼{{ formatCurrency(assetInfo.debt) }}
- </h3>
- </el-card>
- <!-- 搴撳瓨璧勪骇 -->
- <el-card class="bg3">
- <p>搴撳瓨璧勪骇</p>
- <h3>
- 楼{{ formatCurrency(assetInfo.inventoryValue) }}
- </h3>
- </el-card>
+ <div class="kpi-card">
+ <div class="kpi-left">
+ <span class="kpi-dot kpi-dot-red"></span>
+ <span class="kpi-title">璐熷��</span>
+ <div class="kpi-value">楼{{ formatCurrency(assetInfo.debt) }}</div>
+ </div>
+ <div class="kpi-icon-wrap kpi-icon-red">
+ <img :src="iconWalletRed" alt="" class="kpi-icon" />
+ </div>
+ </div>
</div>
<!-- 鍥哄畾璧勪骇缁熻鍥捐〃 -->
- <div class="grid-layout">
- <!-- 鎸夎澶囩被鍨嬬粺璁� -->
- <el-card style="margin-bottom: 20px;">
+ <div class="chart-row">
+ <!-- 璁惧绫诲瀷鍒嗗竷 -->
+ <el-card class="chart-card">
<h2 class="section-title">璁惧绫诲瀷鍒嗗竷</h2>
- <div class="echarts">
- <Echarts
+ <div class="chart-content">
+ <div class="pie-wrap">
+ <Echarts
:legend="typeDistributionLegend"
:chartStyle="chartStylePie"
:series="typeDistributionSeries"
:tooltip="pieTooltip"
- style="height: 260px; width: 35%;">
- <div class="chart-num">
- <span style="font-size: 22px;">璁惧绫诲瀷</span>
- <span style="font-size: 36px; font-weight: 500; font-family: 'MyCustomFont', sans-serif;">{{ deviceTypeTotalCount }}</span>
+ style="height: 260px; width: 100%;"
+ />
+ </div>
+ <div class="type-cards">
+ <div class="type-card" v-for="(item, index) in typeDistributionData" :key="index">
+ <span class="type-name">{{ item.name }}</span>
+ <span class="type-count">{{ item.count }}</span>
</div>
- </Echarts>
+ </div>
+ </div>
+ </el-card>
+ <!-- 璁惧閲戦鍒嗘瀽 -->
+ <el-card class="chart-card">
+ <h2 class="section-title">璁惧閲戦鍒嗘瀽</h2>
+ <div class="bar-chart-wrap">
<Echarts
- ref="chart"
- :chartStyle="chartStyle"
- :grid="grid"
- :legend="lineLegend"
- :series="typeDistributionLineSeries"
- :tooltip="tooltip"
- :xAxis="xAxis"
- :yAxis="yAxis"
- style="height: 260px; width: 64%;"></Echarts>
+ ref="barChart"
+ :chartStyle="chartStyle"
+ :grid="grid"
+ :legend="lineLegend"
+ :series="typeDistributionBarSeries"
+ :tooltip="tooltip"
+ :xAxis="xAxis"
+ :yAxis="yAxisBar"
+ style="height: 260px; width: 100%;"
+ />
</div>
</el-card>
</div>
- <!-- 璁惧鍙拌处琛ㄦ牸 -->
- <el-card style="margin-bottom: 20px;">
+ <!-- 璁惧鏁版嵁琛� -->
+ <el-card class="table-card">
+ <h2 class="section-title">璁惧鏁版嵁琛�</h2>
<el-table
:data="equipmentList"
stripe
style="width: 100%"
:header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
>
+ <el-table-column type="index" label="搴忓彿" width="60" :index="(index) => (pagination.currentPage - 1) * pagination.pageSize + index + 1" />
<el-table-column prop="deviceName" label="璁惧鍚嶇О" width="250" />
- <el-table-column prop="deviceModel" label="鍨嬪彿瑙勬牸" min-width="150" />
+ <el-table-column prop="deviceModel" label="瑙勬牸鍨嬪彿" min-width="150" />
<el-table-column prop="supplierName" label="渚涘簲鍟�" min-width="120" />
<el-table-column prop="unit" label="鍗曚綅" width="120" />
<el-table-column prop="number" label="鏁伴噺" width="120" />
@@ -161,9 +200,14 @@
import { ref, computed, onMounted, reactive } from 'vue';
import 'element-plus/dist/index.css';
import Echarts from "@/components/Echarts/echarts.vue";
-import { getLedgerPage } from "@/api/equipmentManagement/ledger";
import { getAccountingTotal, getDeviceTypeDistribution, getCalculateDepreciation } from "@/api/financialManagement/accounting";
import dayjs from "dayjs";
+import iconBlue from '@/assets/icons/png/blue@2x.png';
+import iconWalletOrange from '@/assets/icons/png/walletOrange@2x.png';
+import iconGreen from '@/assets/icons/png/green@2x.png';
+import iconPink from '@/assets/icons/png/pink@2x.png';
+import iconYellow from '@/assets/icons/png/yellow@2x.png';
+import iconWalletRed from '@/assets/icons/png/walletRed@2x.png';
// 绛涢�夋潯浠�
const dateRange = ref(null);
@@ -258,30 +302,16 @@
height: '100%' // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
};
-const pieColors = ['#F04864', '#FACC14', '#8543E0', '#1890FF', '#13C2C2', '#2FC25B']; // 鍙牴鎹疄闄呰皟鏁�
+const pieColors = ['#165DFF', '#14C9C9', '#8543E0', '#1890FF', '#13C2C2', '#2FC25B']; // 鍙牴鎹疄闄呰皟鏁�
// 楗煎浘鏁版嵁
const typeDistributionData = ref([]);
const departmentDistributionData = ref([]);
-// 楗煎浘鍥句緥
+// 楗煎浘鍥句緥锛堟偓鍋滄樉绀哄悕绉�+鍗犳瘮锛屽浘渚嬫斁涓嬫柟鍗＄墖灞曠ず锛�
const typeDistributionLegend = computed(() => ({
- show: true,
- top: 'center',
- left: '60%',
- orient: 'vertical',
- icon: 'circle',
- data: typeDistributionData.value.map(item => item.name),
- formatter: function(name) {
- const item = typeDistributionData.value.find(i => i.name === name);
- if (!item) return name;
- return `${name} | ${item.count} 鍙� | ${item.amount}`;
- },
- textStyle: {
- color: '#333',
- fontSize: 14,
- lineHeight: 26,
- }
+ show: false,
+ data: typeDistributionData.value.map(item => item.name)
}));
@@ -289,16 +319,14 @@
const typeDistributionSeries = computed(() => [
{
type: 'pie',
- radius: ['50%', '65%'],
- center: ['25%', '50%'],
+ radius: ['0%', '65%'],
+ center: ['50%', '45%'],
avoidLabelOverlap: false,
itemStyle: {
borderColor: '#fff',
borderWidth: 2
},
- label: {
- show: false
- },
+ label: { show: false },
data: typeDistributionData.value,
color: pieColors
}
@@ -306,23 +334,35 @@
// 鎶樼嚎鍥炬暟鎹�
const typeDistributionLineSeries = ref([]);
+// 鏌辩姸鍥炬暟鎹紙璁惧閲戦鍒嗘瀽锛�
+const typeDistributionBarSeries = computed(() => [
+ {
+ name: '閿�鍞',
+ type: 'bar',
+ data: typeDistributionData.value.map(item => (item.amountNum != null ? item.amountNum : 0)),
+ itemStyle: { color: '#13C2C2' }
+ }
+]);
+// 鏌辩姸鍥� Y 杞�
+const yAxisBar = [
+ {
+ type: 'value',
+ name: '閿�鍞(涓囧厓)',
+ position: 'left',
+ min: 0,
+ nameTextStyle: { color: '#000', fontSize: 14 },
+ splitLine: { lineStyle: { color: '#f0f0f0' } }
+ }
+];
-// 楗煎浘鎻愮ず妗�
+// 楗煎浘鎻愮ず妗嗭紙鍥惧唴鏍峰紡锛氬悕绉� + 鍗犳瘮锛�
const pieTooltip = reactive({
trigger: 'item',
formatter: function(params) {
- // 妫�鏌ユ暟鎹槸鍚﹀瓨鍦�
if (!params.data) return params.name;
- // 鎷兼帴瀹屾暣鍐呭
- return `
- <div>
- <div style="color:${params.color};font-size:16px;">鈼�</div>
- <div>${params.name}</div>
- <div>鏁伴噺锛�${params.data.count} 鍙�</div>
- <div>閲戦锛�${params.data.amount}</div>
- </div>
- `;
+ const pct = params.percent != null ? params.percent.toFixed(0) : 0;
+ return `${params.name} ${pct}%`;
}
});
@@ -373,7 +413,8 @@
name: item.type || '',
value: Number(item.count || 0),
count: Number(item.count || 0),
- amount: `楼${formatCurrency(item.amount || 0)}`
+ amount: `楼${formatCurrency(item.amount || 0)}`,
+ amountNum: Number(item.amount || 0)
}));
} else if (data.categories && data.categories.length > 0) {
// 濡傛灉娌℃湁 details锛屼娇鐢� categories銆乧ountData 鍜� amountData 鏋勫缓
@@ -381,7 +422,8 @@
name: category,
value: Number(data.countData[index] || 0),
count: Number(data.countData[index] || 0),
- amount: `楼${formatCurrency(data.amountData[index] || 0)}`
+ amount: `楼${formatCurrency(data.amountData[index] || 0)}`,
+ amountNum: Number(data.amountData[index] || 0)
}));
} else {
typeDistributionData.value = [];
@@ -478,131 +520,222 @@
</script>
<style scoped lang="scss">
-/* 鍩虹鏍峰紡琛ュ厖 */
:root {
- --el-color-primary: #4f46e5;
+ --el-color-primary: #1890ff;
}
-.el-card {
- position: relative;
- border-radius: 12px;
- padding: 14px 10px 10px 10px;
- box-shadow: 0 2px 8px #eee;
+/* 椤甸潰鑳屾櫙 */
+main {
+ background: #f5f5f5;
+ padding: 0;
+ margin: 0 -20px;
+ padding: 0 20px 20px;
+}
+
+/* KPI 鍗＄墖缃戞牸 */
+.kpi-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 16px;
+ margin-bottom: 20px;
+}
+
+@media (max-width: 1024px) {
+ .kpi-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@media (max-width: 640px) {
+ .kpi-grid {
+ grid-template-columns: 1fr;
+ }
+}
+
+/* KPI 鍗＄墖 - 鐧藉簳銆佸渾瑙掋�侀槾褰� */
+.kpi-card {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ background: #fff;
+ border-radius: 8px;
+ padding: 16px 20px;
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+ min-height: 100px;
+}
+
+.kpi-left {
+ flex: 1;
+ min-width: 0;
+}
+
+.kpi-dot {
+ display: inline-block;
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ margin-right: 6px;
+ vertical-align: middle;
+}
+
+.kpi-dot-blue { background: #1890ff; }
+.kpi-dot-orange { background: #fa8c16; }
+.kpi-dot-green { background: #52c41a; }
+.kpi-dot-pink { background: #eb2f96; }
+.kpi-dot-yellow { background: #facc14; }
+.kpi-dot-red { background: #f5222d; }
+
+.kpi-title {
+ font-size: 14px;
+ color: #333;
+ vertical-align: middle;
+}
+
+.kpi-value {
+ font-size: 24px;
+ font-weight: 600;
+ color: #333;
+ margin-top: 8px;
+ line-height: 1.2;
+}
+
+/* 鍙充晶鍥炬爣鏂瑰潡 */
+.kpi-icon-wrap {
+ width: 48px;
+ height: 48px;
+ border-radius: 8px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+}
+
+.kpi-icon-blue { background: #e6f7ff; }
+.kpi-icon-orange { background: #fff7e6; }
+.kpi-icon-green { background: #f6ffed; }
+.kpi-icon-pink { background: #fff0f6; }
+.kpi-icon-yellow { background: #fffbe6; }
+.kpi-icon-red { background: #fff1f0; }
+
+.kpi-icon {
+ width: 28px;
+ height: 28px;
+ object-fit: contain;
+}
+
+/* 鍥捐〃鍖哄煙涓ゅ垪 */
+.chart-row {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 20px;
+ margin-bottom: 20px;
+}
+
+@media (max-width: 1024px) {
+ .chart-row {
+ grid-template-columns: 1fr;
+ }
+}
+
+.chart-card {
+ border-radius: 8px;
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
:deep(.el-card__body) {
- padding: 10px 20px !important;
- }
-
- &.bg1 {
- background: url(@/assets/icons/png/1.png) no-repeat 100% 100% !important;
- }
-
- &.bg2 {
- background: url(@/assets/icons/png/2.png) no-repeat 100% 100% !important;
- }
-
- &.bg3 {
- background: url(@/assets/icons/png/3.png) no-repeat 100% 100% !important;
- }
-
- &.bg4 {
- background: url(@/assets/icons/png/4.png) no-repeat 100% 100% !important;
- }
-
- &.bg5 {
- background: url(@/assets/icons/png/5.png) no-repeat 100% 100% !important;
+ padding: 16px 20px;
}
}
-.grid-container {
- /* grid 瀹瑰櫒鍩虹鏍峰紡 */
- display: grid;
- gap: 1rem; /* gap-4 瀵瑰簲 1rem (16px) */
- margin-bottom: 2rem; /* mb-8 瀵瑰簲 2rem (32px) */
-
- p {
- font-size: 22px;
- margin-top: 0px;
- color: #fff;
- }
-
- h3 {
- font-size: 36px;
- font-weight: 500;
- font-family: 'MyCustomFont', sans-serif;
- margin: 10px 0;
- color: #fff;
- }
-}
-
-/* 绉诲姩绔粯璁ゆ牱寮� (grid-cols-1) */
-.grid-container {
- grid-template-columns: repeat(1, minmax(0, 1fr));
-}
-
-/* 灏忓睆骞曞強浠ヤ笂 (sm:grid-cols-2) */
-@media (min-width: 640px) {
- .grid-container {
- grid-template-columns: repeat(2, minmax(0, 1fr));
- }
-}
-
-/* 澶у睆骞曞強浠ヤ笂 (lg:grid-cols-6) */
-@media (min-width: 1024px) {
- .grid-container {
- grid-template-columns: repeat(6, minmax(0, 1fr));
- }
-}
-
-/* 鍗＄墖鎮仠鏁堟灉澧炲己 */
-.el-card:hover {
- transform: translateY(-2px);
-}
-
-.echarts {
+.chart-content {
display: flex;
- justify-content: space-between;
+ flex-direction: column;
+ align-items: center;
}
-/* 鍥捐〃瀹瑰櫒鏍峰紡 */
-.el-chart {
+.pie-wrap {
+ position: relative;
width: 100%;
- height: 100%;
+ height: 260px;
}
+.type-cards {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+ justify-content: center;
+ margin-top: 12px;
+}
+
+.type-card {
+ background: #fafafa;
+ border-radius: 6px;
+ padding: 8px 16px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-width: 80px;
+}
+
+.type-name {
+ font-size: 12px;
+ color: #666;
+}
+
+.type-count {
+ font-size: 16px;
+ font-weight: 600;
+ color: #333;
+ margin-top: 4px;
+}
+
+.bar-chart-wrap {
+ width: 100%;
+ height: 260px;
+}
+
+/* 鍖哄潡鏍囬 - 宸︿晶钃濊壊绔栫嚎 */
.section-title {
position: relative;
font-size: 18px;
color: #333;
- padding-left: 10px;
- margin-bottom: 10px;
+ padding-left: 12px;
+ margin-bottom: 16px;
font-weight: 700;
}
.section-title::before {
position: absolute;
left: 0;
- top: 0px;
+ top: 2px;
content: '';
width: 4px;
height: 18px;
- background-color: #002FA7;
+ background: #1890ff;
border-radius: 2px;
}
-.chart-num {
- position: absolute;
- z-index: 3;
- top: 92px;
- left: 92px;
- display: flex;
- flex-direction: column;
- justify-content: center;
+/* 琛ㄦ牸鍗＄墖 */
+.table-card {
+ border-radius: 8px;
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+
+ :deep(.el-card__body) {
+ padding: 16px 20px;
+ }
}
.pagination-container {
margin-top: 20px;
display: flex;
- justify-content: center;
+ justify-content: flex-end;
+ align-items: center;
+}
+
+:deep(.el-pagination) {
+ --el-pagination-button-bg-color: #fff;
+}
+
+:deep(.el-pager li.is-active) {
+ background: #1890ff;
}
</style>
diff --git a/src/views/reportAnalysis/productionAnalysis/components/CarouselCards.vue b/src/views/reportAnalysis/productionAnalysis/components/CarouselCards.vue
new file mode 100644
index 0000000..0498824
--- /dev/null
+++ b/src/views/reportAnalysis/productionAnalysis/components/CarouselCards.vue
@@ -0,0 +1,306 @@
+<template>
+ <div class="carousel-cards">
+ <button
+ v-if="canScrollLeft"
+ class="nav-button nav-button-left"
+ @click="scrollLeftFn"
+ >
+ <img src="@/assets/BI/jiantou.png" alt="宸︾澶�" />
+ </button>
+ <div
+ class="cards-container"
+ :style="{ '--visible-count': visibleCount }"
+ ref="cardsContainerRef"
+ >
+ <div
+ v-for="(item, index) in items"
+ :key="index"
+ class="card-item"
+ >
+ <div v-if="item.icon" class="card-icon" :style="{ backgroundImage: `url(${item.icon})` }"></div>
+ <div class="card-title">
+ <div class="card-label">{{ item.label }}</div>
+ <div class="card-value">
+ <span class="value-number">{{ item.value }}</span>
+ <span class="value-unit">{{ item.unit }}</span>
+ </div>
+ <div v-if="item.rate ?? item.ratio ?? item.percent" class="card-rate">
+ <span class="rate-value">{{ item.rate ?? item.ratio ?? item.percent }}%</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <button
+ v-if="canScrollRight"
+ class="nav-button nav-button-right"
+ @click="scrollRightFn"
+ >
+ <img src="@/assets/BI/jiantou.png" alt="鍙崇澶�" />
+ </button>
+ </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, nextTick, watch, computed } from 'vue'
+
+const props = defineProps({
+ items: {
+ type: Array,
+ default: () => [],
+ validator: (value) => {
+ return value.every(item =>
+ item && typeof item.label !== 'undefined' &&
+ typeof item.value !== 'undefined' &&
+ typeof item.unit !== 'undefined'
+ )
+ }
+ },
+ visibleCount: {
+ type: Number,
+ default: 3
+ }
+})
+
+const cardsContainerRef = ref(null)
+const currentScrollLeft = ref(0)
+const maxScrollLeft = ref(0)
+
+// 妫�鏌ユ槸鍚﹀彲浠ュ悜宸︽粴鍔�
+const canScrollLeft = computed(() => {
+ return currentScrollLeft.value > 0
+})
+
+// 妫�鏌ユ槸鍚﹀彲浠ュ悜鍙虫粴鍔�
+const canScrollRight = computed(() => {
+ return currentScrollLeft.value < maxScrollLeft.value
+})
+
+// 鏇存柊婊氬姩鐘舵��
+const updateScrollState = () => {
+ const container = cardsContainerRef.value
+ if (!container) return
+
+ currentScrollLeft.value = container.scrollLeft
+ maxScrollLeft.value = container.scrollWidth - container.clientWidth
+}
+
+// 鍚戝乏婊氬姩
+const scrollLeftFn = () => {
+ const container = cardsContainerRef.value
+ if (!container) return
+
+ const scrollItems = Array.from(container.querySelectorAll('.card-item'))
+ if (scrollItems.length === 0) return
+
+ const itemWidth = scrollItems[0]?.offsetWidth || 0
+ const gap = 12
+ const scrollDistance = itemWidth + gap
+
+ container.scrollBy({
+ left: -scrollDistance,
+ behavior: 'smooth'
+ })
+
+ // 寤惰繜鏇存柊鐘舵�侊紝绛夊緟婊氬姩鍔ㄧ敾瀹屾垚
+ setTimeout(() => {
+ updateScrollState()
+ }, 300)
+}
+
+// 鍚戝彸婊氬姩
+const scrollRightFn = () => {
+ const container = cardsContainerRef.value
+ if (!container) return
+
+ const scrollItems = Array.from(container.querySelectorAll('.card-item'))
+ if (scrollItems.length === 0) return
+
+ const itemWidth = scrollItems[0]?.offsetWidth || 0
+ const gap = 12
+ const scrollDistance = itemWidth + gap
+
+ container.scrollBy({
+ left: scrollDistance,
+ behavior: 'smooth'
+ })
+
+ // 寤惰繜鏇存柊鐘舵�侊紝绛夊緟婊氬姩鍔ㄧ敾瀹屾垚
+ setTimeout(() => {
+ updateScrollState()
+ }, 300)
+}
+
+// 鐩戝惉 items 鍙樺寲锛屾洿鏂版粴鍔ㄧ姸鎬�
+watch(() => props.items, () => {
+ nextTick(() => {
+ updateScrollState()
+ })
+}, { deep: true })
+
+onMounted(() => {
+ nextTick(() => {
+ updateScrollState()
+ // 鐩戝惉婊氬姩浜嬩欢
+ const container = cardsContainerRef.value
+ if (container) {
+ container.addEventListener('scroll', updateScrollState)
+ }
+ })
+})
+
+onBeforeUnmount(() => {
+ // 娓呯悊婊氬姩浜嬩欢鐩戝惉鍣�
+ const container = cardsContainerRef.value
+ if (container) {
+ container.removeEventListener('scroll', updateScrollState)
+ }
+})
+</script>
+
+<style scoped>
+.carousel-cards {
+ width: 100%;
+ overflow: hidden;
+ position: relative;
+ display: flex;
+ align-items: center;
+}
+
+.cards-container {
+ display: flex;
+ gap: 12px;
+ width: 100%;
+ overflow-x: auto;
+ overflow-y: hidden;
+ scrollbar-width: none; /* Firefox */
+ -ms-overflow-style: none; /* IE and Edge */
+ padding-bottom: 4px;
+ scroll-behavior: smooth;
+}
+
+.cards-container::-webkit-scrollbar {
+ display: none; /* Chrome, Safari, Opera */
+}
+
+.nav-button {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 32px;
+ height: 32px;
+ background: rgba(26, 88, 176, 0.6);
+ border: 1px solid rgba(26, 88, 176, 0.8);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ z-index: 10;
+ transition: all 0.3s ease;
+ padding: 0;
+}
+
+.nav-button:hover {
+ background: rgba(26, 88, 176, 0.8);
+ transform: translateY(-50%) scale(1.1);
+}
+
+.nav-button-left {
+ left: -16px;
+}
+
+.nav-button-left img {
+ width: 16px;
+ height: 16px;
+ transform: rotate(180deg);
+}
+
+.nav-button-right {
+ right: -16px;
+}
+
+.nav-button-right img {
+ width: 16px;
+ height: 16px;
+}
+
+.card-item {
+ flex: 0 0 calc((100% - (var(--visible-count) - 1) * 12px) / var(--visible-count));
+ min-width: calc((100% - (var(--visible-count) - 1) * 12px) / var(--visible-count));
+ display: flex;
+ align-items: center;
+ background: linear-gradient(269deg, rgba(27,57,126,0.13) 0%, rgba(33,137,206,0.33) 98.13%, #24AFF4 100%);
+ border-radius: 8px 8px 8px 8px;
+ padding: 12px 16px;
+ transition: all 0.3s ease;
+}
+
+.card-item:hover {
+ transform: translateY(-2px);
+}
+
+.card-icon {
+ width: 80px;
+ height: 60px;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ flex-shrink: 0;
+ margin-right: 12px;
+}
+
+.card-title {
+ display: flex;
+ align-items: flex-start;
+ flex-direction: column;
+ flex: 1;
+}
+
+.card-label {
+ font-weight: 400;
+ font-size: 14px;
+ color: #FFFFFF;
+ margin-bottom: 4px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ width: 100%;
+}
+
+.card-value {
+ display: flex;
+ align-items: baseline;
+ gap: 4px;
+}
+
+.card-rate {
+ margin-top: 4px;
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-weight: 400;
+ font-size: 12px;
+ color: rgba(255, 255, 255, 0.85);
+}
+
+.rate-label {
+ opacity: 0.85;
+}
+
+.rate-value {
+ font-weight: 500;
+}
+
+.value-number {
+ font-weight: 400;
+ font-size: 14px;
+ color: #FFFFFF;
+ line-height: 1;
+}
+
+.value-unit {
+ font-size: 14px;
+ color: #FFFFFF;
+ font-weight: 400;
+}
+</style>
diff --git a/src/views/reportAnalysis/productionAnalysis/components/DateTypeSwitch.vue b/src/views/reportAnalysis/productionAnalysis/components/DateTypeSwitch.vue
new file mode 100644
index 0000000..0c57b25
--- /dev/null
+++ b/src/views/reportAnalysis/productionAnalysis/components/DateTypeSwitch.vue
@@ -0,0 +1,94 @@
+<template>
+ <el-radio-group
+ v-model="currentValue"
+ class="date-type-switch"
+ @change="handleChange"
+ >
+ <el-radio-button :label="1">鍛�</el-radio-button>
+ <el-radio-button :label="2">鏈�</el-radio-button>
+ <el-radio-button :label="3">瀛ｅ害</el-radio-button>
+ </el-radio-group>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+ modelValue: {
+ type: Number,
+ default: 1, // 榛樿閫変腑"鍛�"
+ },
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const currentValue = ref(props.modelValue)
+
+// 鐩戝惉澶栭儴鍊煎彉鍖�
+watch(
+ () => props.modelValue,
+ (newVal) => {
+ currentValue.value = newVal
+ }
+)
+
+// 澶勭悊鍊煎彉鍖�
+const handleChange = (value) => {
+ emit('update:modelValue', value)
+ emit('change', value)
+}
+</script>
+
+<style scoped>
+.date-type-switch {
+ display: inline-flex;
+}
+
+/* 鏈�変腑鐘舵�佺殑鏍峰紡 */
+.date-type-switch :deep(.el-radio-button__inner) {
+ background-color: rgba(26, 88, 176, 0.3);
+ color: rgba(184, 200, 224, 0.8);
+ border-color: rgba(255, 255, 255, 0.2);
+ border-radius: 0;
+ padding: 6px 20px;
+ font-size: 14px;
+ transition: all 0.3s;
+}
+
+/* 绗竴涓寜閽乏渚у渾瑙� */
+.date-type-switch :deep(.el-radio-button:first-child .el-radio-button__inner) {
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+}
+
+/* 鏈�鍚庝竴涓寜閽彸渚у渾瑙� */
+.date-type-switch :deep(.el-radio-button:last-child .el-radio-button__inner) {
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+}
+
+/* 鎸夐挳涔嬮棿鐨勫垎闅旂嚎 */
+.date-type-switch :deep(.el-radio-button:not(:last-child) .el-radio-button__inner) {
+ border-right: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* 閫変腑鐘舵�佺殑鏍峰紡 */
+.date-type-switch :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
+ background: linear-gradient(180deg, #3378ff 0%, #00a4ed 100%);
+ color: #ffffff;
+ border-color: rgba(51, 120, 255, 0.8);
+ box-shadow: none;
+}
+
+/* 鎮仠鏁堟灉 */
+.date-type-switch :deep(.el-radio-button__inner:hover) {
+ color: rgba(184, 200, 224, 1);
+ border-color: rgba(255, 255, 255, 0.3);
+}
+
+/* 閫変腑鐘舵�佹偓鍋� */
+.date-type-switch :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner:hover) {
+ background: linear-gradient(180deg, #4e8aff 0%, #4ee4ff 100%);
+ color: #ffffff;
+}
+</style>
diff --git a/src/views/reportAnalysis/productionAnalysis/components/PanelHeader.vue b/src/views/reportAnalysis/productionAnalysis/components/PanelHeader.vue
new file mode 100644
index 0000000..313f1df
--- /dev/null
+++ b/src/views/reportAnalysis/productionAnalysis/components/PanelHeader.vue
@@ -0,0 +1,33 @@
+<template>
+ <div class="panel-header">
+ <span class="panel-title">{{ title }}</span>
+ </div>
+</template>
+
+<script setup>
+defineProps({
+ title: {
+ type: String,
+ required: true,
+ default: ''
+ }
+})
+</script>
+
+<style scoped>
+.panel-header {
+ background-image: url("@/assets/BI/kehuhetongback@2x.png");
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+.panel-title {
+ width: 100%;
+ font-weight: 500;
+ font-size: 16px;
+ color: #D9ECFF;
+ padding-left: 46px;
+ line-height: 36px;
+}
+</style>
diff --git a/src/views/reportAnalysis/productionAnalysis/components/ProductTypeSwitch.vue b/src/views/reportAnalysis/productionAnalysis/components/ProductTypeSwitch.vue
new file mode 100644
index 0000000..87cde44
--- /dev/null
+++ b/src/views/reportAnalysis/productionAnalysis/components/ProductTypeSwitch.vue
@@ -0,0 +1,85 @@
+<template>
+ <el-radio-group
+ v-model="currentValue"
+ class="product-type-switch"
+ @change="handleChange"
+ >
+ <el-radio-button :label="1">鍘熸潗鏂�</el-radio-button>
+ <el-radio-button :label="3">鍗婃垚鍝�</el-radio-button>
+ <el-radio-button :label="2">鎴愬搧</el-radio-button>
+ </el-radio-group>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+ modelValue: {
+ type: Number,
+ default: 1, // 榛樿閫変腑"鍘熸潗鏂�"
+ },
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const currentValue = ref(props.modelValue)
+
+watch(
+ () => props.modelValue,
+ (newVal) => {
+ currentValue.value = newVal
+ }
+)
+
+const handleChange = (value) => {
+ emit('update:modelValue', value)
+ emit('change', value)
+}
+</script>
+
+<style scoped>
+.product-type-switch {
+ display: inline-flex;
+}
+
+.product-type-switch :deep(.el-radio-button__inner) {
+ background-color: rgba(26, 88, 176, 0.3);
+ color: rgba(184, 200, 224, 0.8);
+ border-color: rgba(255, 255, 255, 0.2);
+ border-radius: 0;
+ padding: 6px 20px;
+ font-size: 14px;
+ transition: all 0.3s;
+}
+
+.product-type-switch :deep(.el-radio-button:first-child .el-radio-button__inner) {
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+}
+
+.product-type-switch :deep(.el-radio-button:last-child .el-radio-button__inner) {
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+}
+
+.product-type-switch :deep(.el-radio-button:not(:last-child) .el-radio-button__inner) {
+ border-right: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.product-type-switch :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
+ background: linear-gradient(180deg, #3378ff 0%, #00a4ed 100%);
+ color: #ffffff;
+ border-color: rgba(51, 120, 255, 0.8);
+ box-shadow: none;
+}
+
+.product-type-switch :deep(.el-radio-button__inner:hover) {
+ color: rgba(184, 200, 224, 1);
+ border-color: rgba(255, 255, 255, 0.3);
+}
+
+.product-type-switch :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner:hover) {
+ background: linear-gradient(180deg, #4e8aff 0%, #4ee4ff 100%);
+ color: #ffffff;
+}
+</style>
diff --git a/src/views/reportAnalysis/productionAnalysis/components/center-bottom.vue b/src/views/reportAnalysis/productionAnalysis/components/center-bottom.vue
new file mode 100644
index 0000000..43eb7d8
--- /dev/null
+++ b/src/views/reportAnalysis/productionAnalysis/components/center-bottom.vue
@@ -0,0 +1,351 @@
+<template>
+ <div>
+ <PanelHeader title="鐢熶骇璁㈠崟瀹屾垚杩涘害" />
+ <div class="main-panel">
+ <div class="panel-item-customers">
+ <CarouselCards :items="cardItems" :visible-count="4" />
+ <div
+ class="progress-table-container"
+ ref="progressTableRef"
+ style="margin-top: 0px;"
+ @scroll="handleTableScroll"
+ >
+ <table class="progress-table">
+ <thead>
+ <tr>
+ <th>鐢熶骇璁㈠崟鍙�</th>
+ <th>浜у搧鍚嶇О</th>
+ <th>瑙勬牸</th>
+ <th>闇�姹傛暟閲�</th>
+ <th>瀹屾垚鏁伴噺</th>
+ <th>瀹屾垚杩涘害</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr
+ v-for="(item, index) in progressTableData"
+ :key="index"
+ :ref="(el) => setRowRef(el, index)"
+ :class="{ 'row-under-header': isRowUnderHeader(index) }"
+ >
+ <td>{{ item.npsNo || '-' }}</td>
+ <td>{{ item.productCategory || '-' }}</td>
+ <td>{{ item.specificationModel || '-' }}</td>
+ <td>{{ item.quantity || 0 }}</td>
+ <td>{{ item.completeQuantity || 0 }}</td>
+ <td>
+ <el-progress
+ :percentage="calculateProgress(item)"
+ :color="progressColor(calculateProgress(item))"
+ :status="calculateProgress(item) >= 100 ? 'success' : ''"
+ :stroke-width="8"
+ />
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { getProgressStatistics } from '@/api/viewIndex.js'
+import PanelHeader from './PanelHeader.vue'
+import CarouselCards from './CarouselCards.vue'
+
+const progressTableRef = ref(null)
+const progressTableScrollTimer = ref(null)
+const tableScrollTimeout = ref(null)
+const tableRowRefs = ref([])
+const rowsUnderHeader = ref(new Set())
+
+// 璁㈠崟缁熻瀵硅薄
+const orderStatisticsObject = ref({
+ totalOrderCount: 0,
+ uncompletedOrderCount: 0,
+ partialCompletedOrderCount: 0,
+ completedOrderCount: 0,
+})
+
+// 杞挱鍗＄墖鏁版嵁锛堢敱 orderStatisticsObject 鍚屾锛�
+const cardItems = ref([])
+
+// 鐢熶骇璁㈠崟瀹屾垚杩涘害琛ㄦ牸鏁版嵁
+const progressTableData = ref([])
+
+// 璁＄畻瀹屾垚杩涘害鐧惧垎姣�
+const calculateProgress = (item) => {
+ if (!item) return 0
+ if (item.completionStatus !== undefined && item.completionStatus !== null) {
+ const percentage = Number(item.completionStatus)
+ if (isNaN(percentage)) return 0
+ return Math.min(Math.max(Math.round(percentage), 0), 100)
+ }
+ if (!item.quantity || item.quantity === 0) return 0
+ const percentage = ((item.completeQuantity || 0) / item.quantity) * 100
+ return Math.min(Math.max(Math.round(percentage), 0), 100)
+}
+
+// 鏍规嵁杩涘害鐧惧垎姣旇繑鍥為鑹�
+const progressColor = (percentage) => {
+ const p = percentage || 0
+ if (p < 30) return '#f56c6c'
+ if (p < 50) return '#e6a23c'
+ if (p < 80) return '#409eff'
+ return '#67c23a'
+}
+
+const setRowRef = (el, index) => {
+ if (el) {
+ tableRowRefs.value[index] = el
+ }
+}
+
+const isRowUnderHeader = (index) => rowsUnderHeader.value.has(index)
+
+const handleTableScroll = () => {
+ const tableContainer = progressTableRef.value
+ if (!tableContainer) return
+ const thead = tableContainer.querySelector('thead')
+ if (!thead) return
+ const theadHeight = thead.offsetHeight
+ const containerRect = tableContainer.getBoundingClientRect()
+ const containerTop = containerRect.top
+ const theadBottom = containerTop + theadHeight
+ rowsUnderHeader.value.clear()
+ tableRowRefs.value.forEach((row, index) => {
+ if (row) {
+ const rowRect = row.getBoundingClientRect()
+ const rowTop = rowRect.top
+ const rowBottom = rowRect.bottom
+ if (rowTop < theadBottom && rowBottom > containerTop) {
+ rowsUnderHeader.value.add(index)
+ }
+ }
+ })
+ if (tableScrollTimeout.value) clearTimeout(tableScrollTimeout.value)
+ tableScrollTimeout.value = setTimeout(() => {
+ rowsUnderHeader.value.clear()
+ }, 150)
+}
+
+const initProgressTableScroll = () => {
+ const tableContainer = progressTableRef.value
+ if (!tableContainer) return
+ if (progressTableScrollTimer.value) {
+ cancelAnimationFrame(progressTableScrollTimer.value)
+ progressTableScrollTimer.value = null
+ }
+ if (tableContainer._pauseTimer) {
+ clearInterval(tableContainer._pauseTimer)
+ tableContainer._pauseTimer = null
+ }
+ const tbody = tableContainer.querySelector('tbody')
+ if (!tbody) return
+ const originalCount = progressTableData.value.length
+ const allRows = Array.from(tbody.querySelectorAll('tr'))
+ if (allRows.length > originalCount) {
+ for (let i = originalCount; i < allRows.length; i++) {
+ allRows[i].remove()
+ }
+ }
+ const scrollItems = Array.from(tbody.querySelectorAll('tr'))
+ if (scrollItems.length === 0) return
+ const originalItemCount = scrollItems.length
+ const thead = tableContainer.querySelector('thead')
+ const theadHeight = thead ? thead.offsetHeight : 40
+ const containerHeight = tableContainer.clientHeight
+ const visibleHeight = containerHeight - theadHeight
+ const itemHeight = scrollItems[0]?.offsetHeight || 40
+ const totalContentHeight = itemHeight * originalItemCount
+ if (totalContentHeight <= visibleHeight) return
+ const cloneCount = Math.ceil(visibleHeight / itemHeight) + 2
+ for (let i = 0; i < cloneCount; i++) {
+ const clone = scrollItems[i % originalItemCount].cloneNode(true)
+ tbody.appendChild(clone)
+ }
+ let scrollPosition = 0
+ const scrollSpeed = 1.5
+ const pauseTime = 3000
+ let isPaused = false
+ let lastTimestamp = 0
+ function scrollAnimation(timestamp) {
+ if (!lastTimestamp) lastTimestamp = timestamp
+ const deltaTime = timestamp - lastTimestamp
+ lastTimestamp = timestamp
+ if (!isPaused) {
+ scrollPosition += scrollSpeed * (deltaTime / 16)
+ const maxScroll = itemHeight * originalItemCount
+ if (scrollPosition >= maxScroll) {
+ scrollPosition = 0
+ tableContainer.scrollTop = 0
+ } else {
+ tableContainer.scrollTop = scrollPosition
+ }
+ }
+ progressTableScrollTimer.value = requestAnimationFrame(scrollAnimation)
+ }
+ progressTableScrollTimer.value = requestAnimationFrame(scrollAnimation)
+ const pauseTimer = setInterval(() => {
+ isPaused = !isPaused
+ }, pauseTime)
+ tableContainer._pauseTimer = pauseTimer
+}
+
+const progressStatisticsInfo = () => {
+ getProgressStatistics()
+ .then((res) => {
+ if (!res || !res.data) return
+ const obj = {
+ totalOrderCount: res.data.totalOrderCount || 0,
+ uncompletedOrderCount: res.data.uncompletedOrderCount || 0,
+ partialCompletedOrderCount: res.data.partialCompletedOrderCount || 0,
+ completedOrderCount: res.data.completedOrderCount || 0,
+ }
+ orderStatisticsObject.value = obj
+ cardItems.value = [
+ { label: '鎬昏鍗曟暟', value: obj.totalOrderCount, unit: '浠�' },
+ { label: '鏈畬鎴愯鍗曟暟', value: obj.uncompletedOrderCount, unit: '浠�' },
+ { label: '閮ㄥ垎瀹屾垚璁㈠崟鏁�', value: obj.partialCompletedOrderCount, unit: '浠�' },
+ { label: '宸插畬鎴愯鍗曟暟', value: obj.completedOrderCount, unit: '浠�' },
+ ]
+ progressTableData.value = res.data.completedOrderDetails || []
+ tableRowRefs.value = []
+ rowsUnderHeader.value.clear()
+ nextTick(() => {
+ initProgressTableScroll()
+ })
+ })
+ .catch((err) => {
+ console.error('鑾峰彇鐢熶骇璁㈠崟瀹屾垚杩涘害缁熻澶辫触:', err)
+ })
+}
+
+onMounted(() => {
+ progressStatisticsInfo()
+})
+
+onBeforeUnmount(() => {
+ if (progressTableScrollTimer.value) {
+ cancelAnimationFrame(progressTableScrollTimer.value)
+ }
+ if (tableScrollTimeout.value) clearTimeout(tableScrollTimeout.value)
+ const tableContainer = progressTableRef.value
+ if (tableContainer?._pauseTimer) {
+ clearInterval(tableContainer._pauseTimer)
+ }
+})
+</script>
+
+<style scoped>
+.main-panel {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.panel-item-customers {
+ border: 1px solid #1a58b0;
+ padding: 18px;
+ width: 100%;
+ height: 428px;
+}
+
+.progress-table-container {
+ height: 280px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ margin-top: 10px;
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+}
+
+.progress-table-container::-webkit-scrollbar {
+ display: none;
+}
+
+.progress-table {
+ width: 100%;
+ border-collapse: collapse;
+ color: #b8c8e0;
+ font-size: 12px;
+ table-layout: fixed;
+}
+
+.progress-table thead {
+ position: sticky;
+ top: 0;
+ background-color: rgba(26, 88, 176, 0.9);
+ z-index: 10;
+}
+
+.progress-table th {
+ padding: 8px 6px;
+ text-align: left;
+ font-weight: 500;
+ border-bottom: 1px solid rgba(184, 200, 224, 0.3);
+ color: #b8c8e0;
+ font-size: 12px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.progress-table th:nth-child(1) {
+ width: 15%;
+}
+
+.progress-table th:nth-child(2) {
+ width: 15%;
+}
+
+.progress-table th:nth-child(3) {
+ width: 15%;
+}
+
+.progress-table th:nth-child(4) {
+ width: 12%;
+}
+
+.progress-table th:nth-child(5) {
+ width: 12%;
+}
+
+.progress-table th:nth-child(6) {
+ width: 31%;
+}
+
+.progress-table td {
+ padding: 8px 6px;
+ border-bottom: 1px solid rgba(184, 200, 224, 0.1);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-size: 12px;
+ transition: opacity 0.3s ease;
+}
+
+.progress-table tbody tr:hover {
+ background-color: rgba(184, 200, 224, 0.1);
+}
+
+.progress-table tbody tr.row-under-header {
+ opacity: 0.5;
+}
+
+.progress-table :deep(.el-progress) {
+ width: 100%;
+}
+
+.progress-table :deep(.el-progress-bar__outer) {
+ background-color: rgba(184, 200, 224, 0.2);
+}
+
+.progress-table :deep(.el-progress__text) {
+ color: #b8c8e0;
+ font-size: 11px;
+}
+</style>
diff --git a/src/views/reportAnalysis/productionAnalysis/components/center-center.vue b/src/views/reportAnalysis/productionAnalysis/components/center-center.vue
new file mode 100644
index 0000000..cd6a6b5
--- /dev/null
+++ b/src/views/reportAnalysis/productionAnalysis/components/center-center.vue
@@ -0,0 +1,193 @@
+<template>
+ <div>
+ <!-- 璁惧缁熻 -->
+ <div class="equipment-stats">
+ <div class="equipment-header">
+ <img
+ src="@/assets/BI/shujutongjiicon@2x.png"
+ alt="鍥炬爣"
+ class="equipment-icon"
+ />
+ <span class="equipment-title">鎶曞叆浜у嚭鍒嗘瀽</span>
+ </div>
+ <Echarts
+ ref="chart"
+ :chartStyle="chartStyle"
+ :grid="grid"
+ :legend="lineLegend"
+ :series="lineSeries"
+ :tooltip="tooltip"
+ :xAxis="xAxis1"
+ :yAxis="yAxis1"
+ :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
+ style="height: 260px"
+ />
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import * as echarts from 'echarts'
+import Echarts from '@/components/Echarts/echarts.vue'
+import { productInOutAnalysis } from '@/api/viewIndex.js'
+
+const chartStyle = { width: '100%', height: '100%' }
+const grid = {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ top: '16%',
+ containLabel: true,
+}
+
+const lineLegend = {
+ show: true,
+ top: '2%',
+ left: 'center',
+ itemGap: 24,
+ itemWidth: 12,
+ itemHeight: 12,
+ textStyle: { color: '#B8C8E0', fontSize: 14 },
+ data: [
+ { name: '鍑哄簱', itemStyle: { color: 'rgba(11, 137, 254, 1)' } },
+ { name: '鍏ュ簱', itemStyle: { color: 'rgba(11, 249, 254, 1)' } },
+ ],
+}
+
+const xAxis1 = ref([
+ {
+ type: 'category',
+ data: [],
+ axisTick: { show: false },
+ axisLine: { show: false, lineStyle: { color: 'rgba(184, 200, 224, 0.3)' } },
+ axisLabel: { color: '#B8C8E0', fontSize: 12 },
+ splitLine: { show: false, lineStyle: { type: 'dashed', color: 'rgba(184, 200, 224, 0.2)' } },
+ },
+])
+
+const yAxis1 = [
+ {
+ type: 'value',
+ name: '鍗曚綅: 浠�',
+ nameTextStyle: { color: '#B8C8E0', fontSize: 12, padding: [0, 0, 0, 0] },
+ axisLine: { show: false },
+ axisTick: { show: false },
+ axisLabel: { color: '#B8C8E0', fontSize: 12 },
+ splitLine: { lineStyle: { color: '#B8C8E0' } },
+ },
+]
+
+const lineSeries = ref([
+ {
+ name: '鍑哄簱',
+ type: 'line',
+ smooth: false,
+ showSymbol: true,
+ symbol: 'circle',
+ symbolSize: 8,
+ lineStyle: { color: 'rgba(11, 137, 254, 1)', width: 2 },
+ itemStyle: { color: 'rgba(11, 137, 254, 1)', borderWidth: 0 },
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: 'rgba(11, 137, 254, 0.40)' },
+ { offset: 1, color: 'rgba(11, 137, 254, 0.05)' },
+ ]),
+ },
+ data: [],
+ emphasis: { focus: 'series' },
+ },
+ {
+ name: '鍏ュ簱',
+ type: 'line',
+ smooth: false,
+ showSymbol: true,
+ symbol: 'circle',
+ symbolSize: 8,
+ lineStyle: { color: 'rgba(11, 249, 254, 1)', width: 2 },
+ itemStyle: { color: 'rgba(11, 249, 254, 1)', borderWidth: 0 },
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: 'rgba(11, 249, 254, 0.5)' },
+ { offset: 1, color: 'rgba(11, 249, 254, 0.05)' },
+ ]),
+ },
+ data: [],
+ emphasis: { focus: 'series' },
+ },
+])
+
+const tooltip = {
+ trigger: 'axis',
+ axisPointer: { type: 'line' },
+ borderWidth: 1,
+ textStyle: { fontSize: 12 },
+ formatter(params) {
+ let result = params[0].axisValue + '<br/>'
+ params.forEach((item) => {
+ result += `${item.marker} ${item.seriesName}: ${item.value} 浠�<br/>`
+ })
+ return result
+ },
+}
+
+const fetchData = () => {
+ productInOutAnalysis({ type: 1 })
+ .then((res) => {
+ if (res.code === 200 && Array.isArray(res.data)) {
+ const list = res.data
+ xAxis1.value[0].data = list.map((d) => d.date)
+ lineSeries.value[0].data = list.map((d) => Number(d.outCount) || 0)
+ lineSeries.value[1].data = list.map((d) => Number(d.inCount) || 0)
+ }
+ })
+ .catch((err) => {
+ console.error('鑾峰彇鎶曞叆浜у嚭鍒嗘瀽澶辫触:', err)
+ })
+}
+
+onMounted(() => {
+ fetchData()
+})
+</script>
+
+<style scoped>
+.equipment-stats {
+ border: 1px solid #1a58b0;
+ padding: 0 18px 18px;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.equipment-header {
+ font-weight: 500;
+ font-size: 21px;
+ display: flex;
+ border-bottom: 1px solid;
+ border-image: linear-gradient(
+ 270deg,
+ rgba(0, 126, 255, 0) 0%,
+ rgba(0, 126, 255, 0.4549) 35%,
+ #007eff 78%,
+ #007eff 100%
+ )
+ 1;
+ padding-bottom: 2px;
+}
+
+.equipment-title {
+ font-weight: 500;
+ font-size: 18px;
+ background: linear-gradient(360deg, #056dff 0%, #43e8fc 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ line-height: 50px;
+}
+
+.equipment-icon {
+ width: 50px;
+ height: 50px;
+}
+</style>
diff --git a/src/views/reportAnalysis/productionAnalysis/components/center-top.vue b/src/views/reportAnalysis/productionAnalysis/components/center-top.vue
new file mode 100644
index 0000000..0937b32
--- /dev/null
+++ b/src/views/reportAnalysis/productionAnalysis/components/center-top.vue
@@ -0,0 +1,137 @@
+<template>
+ <div>
+ <!-- 椤堕儴缁熻鍗＄墖 -->
+ <div class="stats-cards">
+ <div
+ v-for="item in statItems"
+ :key="item.name"
+ class="stat-card"
+ >
+ <img src="@/assets/BI/icon@2x.png" alt="鍥炬爣" class="card-icon" />
+ <div class="card-content">
+ <span class="card-label">{{ item.name }}</span>
+ <span class="card-value">{{ item.value }}</span>
+ <div class="card-compare" :class="compareClass(Number(item.rate))">
+ <span>鍚屾瘮</span>
+ <span class="compare-value">{{ formatPercent(item.rate) }}</span>
+ <span class="compare-icon">{{ Number(item.rate) >= 0 ? '鈫�' : '鈫�' }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { salesPurchaseStorageProductCount } from '@/api/viewIndex.js'
+
+const statItems = ref([])
+
+const formatPercent = (val) => {
+ const num = Number(val) || 0
+ return `${num.toFixed(2)}%`
+}
+
+const compareClass = (val) => (val >= 0 ? 'compare-up' : 'compare-down')
+
+const fetchData = () => {
+ salesPurchaseStorageProductCount()
+ .then((res) => {
+ if (res.code === 200 && Array.isArray(res.data)) {
+ statItems.value = res.data.map((item) => ({
+ name: item.name,
+ value: item.value,
+ rate: item.rate,
+ }))
+ }
+ })
+ .catch((err) => {
+ console.error('鑾峰彇閿�鍞�/閲囪喘/鍌ㄥ瓨浜у搧鏁板け璐�:', err)
+ })
+}
+
+onMounted(() => {
+ fetchData()
+})
+</script>
+
+<style scoped>
+.stats-cards {
+ display: flex;
+ gap: 30px;
+}
+
+.stat-card {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ background-image: url('@/assets/BI/border@2x.png');
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+ height: 142px;
+}
+
+.card-icon {
+ width: 100px;
+ height: 100px;
+ margin: 20px 20px 0 10px;
+}
+
+.card-content {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.card-value {
+ font-weight: 500;
+ font-size: 40px;
+ background: linear-gradient(360deg, #008bfd 0%, #ffffff 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.card-label {
+ font-weight: 400;
+ font-size: 19px;
+ color: rgba(208, 231, 255, 0.7);
+}
+
+.card-compare {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 15px;
+ color: #d0e7ff;
+}
+
+.card-compare > span:first-child {
+ font-size: 13px;
+ opacity: 0.8;
+}
+
+.compare-value {
+ font-weight: 600;
+}
+
+.compare-icon {
+ font-size: 14px;
+ position: relative;
+ top: -1px; /* 杞诲井涓婄Щ锛岃绠ご涓庢枃瀛楀瀭鐩村眳涓榻� */
+}
+
+.compare-up .compare-value,
+.compare-up .compare-icon {
+ color: #00c853;
+}
+
+.compare-down .compare-value,
+.compare-down .compare-icon {
+ color: #ff5252;
+}
+
+</style>
diff --git a/src/views/reportAnalysis/productionAnalysis/components/left-bottom.vue b/src/views/reportAnalysis/productionAnalysis/components/left-bottom.vue
new file mode 100644
index 0000000..33f431d
--- /dev/null
+++ b/src/views/reportAnalysis/productionAnalysis/components/left-bottom.vue
@@ -0,0 +1,170 @@
+<template>
+ <div>
+ <PanelHeader title="鍦ㄥ埗鍝佺粺璁″垎鏋�" />
+ <div class="main-panel panel-item-customers">
+ <CarouselCards :items="cardItems" :visible-count="3" />
+ <div class="chart-wrapper">
+ <Echarts
+ ref="chart"
+ :chartStyle="chartStyle"
+ :grid="grid"
+ :legend="workInProcessBarLegend"
+ :series="workInProcessBarSeries"
+ :tooltip="tooltip"
+ :xAxis="workInProcessXAxis"
+ :yAxis="workInProcessYAxis"
+ :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
+ style="height: 100%"
+ />
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import Echarts from '@/components/Echarts/echarts.vue'
+import PanelHeader from './PanelHeader.vue'
+import CarouselCards from './CarouselCards.vue'
+import { getWorkInProcessTurnover } from '@/api/viewIndex.js'
+
+// 鍦ㄥ埗鍝佸懆杞粺璁″璞�
+const workInProcessStatistics = ref({
+ totalQuantity: 0,
+ avgTurnoverDays: 0,
+ turnoverEfficiency: 0,
+})
+
+// 杞挱鍗＄墖鏁版嵁锛堢敱 workInProcessStatistics 鍚屾锛�
+const cardItems = ref([])
+
+const chartStyle = {
+ width: '100%',
+ height: '100%',
+}
+
+const grid = {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true,
+}
+
+const tooltip = {
+ trigger: 'axis',
+ axisPointer: { type: 'shadow' },
+ formatter: function (params) {
+ let result = params[0].axisValueLabel + '<br/>'
+ params.forEach((item) => {
+ result += `<div style="color: #B8C8E0">${item.marker} ${item.seriesName}: ${item.value}</div>`
+ })
+ return result
+ },
+}
+
+// 鍦ㄥ埗鍝佸伐搴忔煴鐘跺浘閰嶇疆
+const workInProcessXAxis = ref([
+ {
+ type: 'category',
+ axisTick: { show: false },
+ axisLabel: { color: '#B8C8E0' },
+ data: [],
+ },
+])
+const workInProcessYAxis = [
+ {
+ type: 'value',
+ axisLabel: { color: '#B8C8E0' },
+ name: '',
+ },
+]
+const workInProcessBarLegend = {
+ show: false,
+ textStyle: { color: '#B8C8E0' },
+ data: [],
+}
+const workInProcessBarSeries = ref([
+ {
+ name: '鍦ㄥ埗鍝佹暟閲�',
+ type: 'bar',
+ barWidth: 25,
+ barGap: 0,
+ emphasis: { focus: 'series' },
+ itemStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 1, color: 'rgba(0,164,237,0)' },
+ { offset: 0, color: '#4EE4FF' },
+ ],
+ },
+ },
+ label: {
+ show: true,
+ position: 'top',
+ color: '#B8C8E0',
+ },
+ data: [],
+ },
+])
+
+const workInProcessTurnoverInfo = () => {
+ getWorkInProcessTurnover()
+ .then((res) => {
+ if (!res || !res.data) return
+ const stats = {
+ totalQuantity: res.data.totalOrderCount || 0,
+ avgTurnoverDays: res.data.averageTurnoverDays || 0,
+ turnoverEfficiency: res.data.turnoverEfficiency || 0,
+ }
+ workInProcessStatistics.value = stats
+ cardItems.value = [
+ { label: '鎬诲湪鍒舵暟閲�', value: stats.totalQuantity, unit: '浠�' },
+ { label: '骞冲潎鍛ㄨ浆澶╂暟', value: stats.avgTurnoverDays, unit: '澶�' },
+ { label: '鍛ㄨ浆鏁堢巼', value: stats.turnoverEfficiency, unit: '%' },
+ ]
+ if (res.data.processDetails && Array.isArray(res.data.processDetails)) {
+ workInProcessXAxis.value[0].data = res.data.processDetails
+ } else {
+ workInProcessXAxis.value[0].data = []
+ }
+ if (res.data.processQuantityDetails && Array.isArray(res.data.processQuantityDetails)) {
+ workInProcessBarSeries.value[0].data = res.data.processQuantityDetails
+ } else {
+ workInProcessBarSeries.value[0].data = []
+ }
+ })
+ .catch((err) => {
+ console.error('鑾峰彇鍦ㄥ埗鍝佸懆杞粺璁″け璐�:', err)
+ })
+}
+
+onMounted(() => {
+ workInProcessTurnoverInfo()
+})
+</script>
+
+<style scoped>
+.main-panel {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.panel-item-customers {
+ border: 1px solid #1a58b0;
+ padding: 18px;
+ width: 100%;
+ height: 449px;
+}
+
+.chart-wrapper {
+ height: 70%;
+ flex: 1;
+ min-height: 200px;
+}
+</style>
diff --git a/src/views/reportAnalysis/productionAnalysis/components/left-top.vue b/src/views/reportAnalysis/productionAnalysis/components/left-top.vue
new file mode 100644
index 0000000..07dfb54
--- /dev/null
+++ b/src/views/reportAnalysis/productionAnalysis/components/left-top.vue
@@ -0,0 +1,205 @@
+<template>
+ <div>
+ <PanelHeader title="宸ュ簭浜у嚭鍒嗘瀽" />
+ <div class="main-panel panel-item-customers">
+ <div class="filters-row">
+ <DateTypeSwitch v-model="dateType" @change="handleDateTypeChange" />
+ </div>
+ <div class="pie-chart-wrapper">
+ <div class="pie-background"></div>
+ <Echarts
+ ref="echartsRef"
+ :chartStyle="chartStyle"
+ :legend="pieLegend"
+ :series="pieSeries"
+ :tooltip="pieTooltip"
+ :color="pieColors"
+ :options="pieOptions"
+ style="height: 320px"
+ />
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { productSalesAnalysis } from '@/api/viewIndex.js'
+import PanelHeader from './PanelHeader.vue'
+import Echarts from '@/components/Echarts/echarts.vue'
+import DateTypeSwitch from '@/views/reportAnalysis/financialAnalysis/components/DateTypeSwitch.vue'
+
+const dateType = ref(1) // 1=鍛� 2=鏈� 3=瀛ｅ害
+
+function array2obj(array, key) {
+ const resObj = {}
+ for (let i = 0; i < array.length; i++) {
+ resObj[array[i][key]] = array[i]
+ }
+ return resObj
+}
+
+const chartStyle = {
+ width: '100%',
+ height: '100%',
+}
+
+const echartsRef = ref(null)
+const pieDatas = ref([])
+const pieColors = ['#D1E4F5', '#5782F7', '#2F67EF', '#82BAFF', '#43e8fc', '#27EBE7']
+
+const pieObjData = computed(() => array2obj(pieDatas.value, 'name'))
+
+const pieLegend = computed(() => {
+ const data = pieDatas.value.map((d, idx) => ({
+ name: d.name,
+ icon: 'circle',
+ textStyle: {
+ fontSize: 18,
+ color: pieColors[idx % pieColors.length],
+ },
+ }))
+
+ return {
+ orient: 'vertical',
+ top: 'center',
+ left: '52%',
+ itemGap: 30,
+ data: data,
+ formatter: function (name) {
+ const item = pieObjData.value[name]
+ if (!item) return name
+ return `{title|${name}}{value|${item.value}}{unit|鍏儅{percent|${item.rate}}{unit|%}`
+ },
+ textStyle: {
+ rich: {
+ value: {
+ color: '#43e8fc',
+ fontSize: 14,
+ fontWeight: 600,
+ padding: [0, 0, 0, 10],
+ },
+ unit: {
+ color: '#82baff',
+ fontSize: 12,
+ fontWeight: 600,
+ padding: [0, 10, 0, 0],
+ },
+ percent: {
+ color: '#43e8fc',
+ fontSize: 14,
+ fontWeight: 600,
+ padding: [0, 0, 0, 0],
+ },
+ title: {
+ fontSize: 12,
+ padding: [0, 0, 0, 0],
+ },
+ },
+ },
+ }
+})
+
+const pieTooltip = {
+ trigger: 'item',
+ formatter: '{a} <br/>{b} : {c}鍏� ({d}%)',
+}
+
+const pieSeries = computed(() => [
+ {
+ name: '浜у搧閿�鍞噾棰濆垎鏋�',
+ type: 'pie',
+ radius: '60%',
+ center: ['25%', '50%'],
+ itemStyle: {
+ borderColor: '#0a1c3a',
+ borderWidth: 2,
+ },
+ label: {
+ show: false
+ },
+ minAngle: 15,
+ data: pieDatas.value,
+ animationType: 'scale',
+ animationEasing: 'elasticOut',
+ animationDelay: function () {
+ return Math.random() * 200
+ },
+ },
+])
+
+const pieOptions = {
+ backgroundColor: 'transparent',
+ textStyle: { color: '#B8C8E0' },
+}
+
+const fetchData = () => {
+ productSalesAnalysis()
+ .then((res) => {
+ if (res.code === 200 && Array.isArray(res.data)) {
+ const items = res.data
+ pieDatas.value = items.map((item) => ({
+ name: item.name,
+ value: parseFloat(item.value) || 0,
+ rate: item.rate,
+ }))
+ }
+ })
+ .catch((err) => {
+ console.error('鑾峰彇浜у搧閿�鍞噾棰濆垎鏋愬け璐�:', err)
+ })
+}
+
+const handleDateTypeChange = () => {
+ fetchData()
+}
+
+onMounted(() => {
+ fetchData()
+})
+</script>
+
+<style scoped>
+.main-panel {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.panel-item-customers {
+ border: 1px solid #1a58b0;
+ padding: 18px;
+ width: 100%;
+ height: 449px;
+}
+
+.filters-row {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ gap: 12px;
+ margin-bottom: 10px;
+}
+
+.pie-chart-wrapper {
+ position: relative;
+ width: 100%;
+ height: 320px;
+ background: transparent;
+}
+
+.pie-background {
+ position: absolute;
+ left: 25%;
+ top: 50%;
+ transform: translate(-51.5%, -50%);
+ width: 310px;
+ height: 310px;
+ background-image: url('@/assets/BI/鐜懓鍥捐竟妗�.png');
+ background-size: contain;
+ background-position: center;
+ background-repeat: no-repeat;
+ z-index: 1;
+ pointer-events: none;
+}
+</style>
diff --git a/src/views/reportAnalysis/productionAnalysis/components/right-bottom.vue b/src/views/reportAnalysis/productionAnalysis/components/right-bottom.vue
new file mode 100644
index 0000000..981b7e0
--- /dev/null
+++ b/src/views/reportAnalysis/productionAnalysis/components/right-bottom.vue
@@ -0,0 +1,192 @@
+<template>
+ <div>
+ <PanelHeader title="鐢熶骇鏍哥畻鍒嗘瀽" />
+ <div class="main-panel panel-item-customers">
+ <div class="filters-row">
+ <DateTypeSwitch v-model="dateType" @change="handleDateTypeChange" />
+ </div>
+ <Echarts
+ ref="chart"
+ :chartStyle="chartStyle"
+ :grid="grid"
+ :legend="barLegend"
+ :series="chartSeries"
+ :tooltip="tooltip"
+ :xAxis="xAxis1"
+ :yAxis="yAxis1"
+ :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
+ style="height: 260px"
+ />
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { qualityStatistics } from '@/api/viewIndex.js'
+import PanelHeader from './PanelHeader.vue'
+import DateTypeSwitch from './DateTypeSwitch.vue'
+import Echarts from '@/components/Echarts/echarts.vue'
+
+const dateType = ref(1) // 1=鍛� 2=鏈� 3=瀛ｅ害
+
+const chartStyle = {
+ width: '100%',
+ height: '140%',
+}
+
+const grid = { left: '10%', right: '4%', bottom: '3%', top: '10%', containLabel: true }
+
+const barLegend = {
+ show: true,
+ textStyle: { color: '#B8C8E0' },
+ data: ['浜ч噺', '宸ヨ祫', '鍚堟牸鐜�'],
+}
+
+// 鏌辩姸鍥撅細浜ч噺銆佸伐璧勶紱鎶樼嚎鍥撅細鍚堟牸鐜囷紙缁胯壊锛�
+const chartSeries = ref([
+ {
+ name: '浜ч噺',
+ type: 'bar',
+ barWidth: 20,
+ barGap: '40%',
+ yAxisIndex: 0,
+ emphasis: { focus: 'series' },
+ itemStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 1, color: 'rgba(0, 164, 237, 0)' },
+ { offset: 0, color: 'rgba(78, 228, 255, 1)' },
+ ],
+ },
+ },
+ data: [],
+ },
+ {
+ name: '宸ヨ祫',
+ type: 'bar',
+ barGap: '40%',
+ barWidth: 20,
+ yAxisIndex: 1,
+ emphasis: { focus: 'series' },
+ itemStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 1, color: 'rgba(83, 126, 245, 0.19)' },
+ { offset: 0, color: 'rgba(144, 97, 248, 1)' },
+ ],
+ },
+ },
+ data: [],
+ },
+ {
+ name: '鍚堟牸鐜�',
+ type: 'line',
+ yAxisIndex: 2,
+ showSymbol: true,
+ symbol: 'circle',
+ symbolSize: 8,
+ lineStyle: { color: 'rgba(90, 216, 166, 1)', width: 2 },
+ itemStyle: { color: 'rgba(90, 216, 166, 1)' },
+ data: [],
+ emphasis: { focus: 'series' },
+ },
+])
+
+const tooltip = {
+ trigger: 'axis',
+ axisPointer: { type: 'cross' },
+ formatter(params) {
+ let result = params[0].axisValueLabel + '<br/>'
+ params.forEach((item) => {
+ let unit = '浠�'
+ if (item.seriesName === '鍚堟牸鐜�') unit = '%'
+ else if (item.seriesName === '宸ヨ祫') unit = '鍏�'
+ result += `<div>${item.marker} ${item.seriesName}: ${item.value}${unit}</div>`
+ })
+ return result
+ },
+}
+
+const xAxis1 = ref([
+ { type: 'category', axisTick: { show: false }, axisLabel: { color: '#B8C8E0' }, data: [] },
+])
+const yAxis1 = [
+ { type: 'value', name: '浜ч噺(浠�)', position: 'left', axisLabel: { color: '#B8C8E0' }, nameTextStyle: { color: '#B8C8E0' } },
+ { type: 'value', name: '宸ヨ祫(鍏�)', position: 'left', offset: 50, axisLabel: { color: '#B8C8E0' }, nameTextStyle: { color: '#B8C8E0' } },
+ {
+ type: 'value',
+ name: '鍚堟牸鐜�(%)',
+ position: 'right',
+ min: 0,
+ max: 100,
+ axisLabel: { color: '#B8C8E0', formatter: '{value}%' },
+ nameTextStyle: { color: '#B8C8E0' },
+ splitLine: { lineStyle: { color: 'rgba(184, 200, 224, 0.2)' } },
+ },
+]
+
+const handleDateTypeChange = () => {
+ fetchData()
+}
+
+const fetchData = () => {
+ qualityStatistics()
+ .then((res) => {
+ if (!res?.data?.item || !Array.isArray(res.data.item)) return
+ const items = res.data.item
+ xAxis1.value[0].data = items.map((d) => d.date)
+ // 浜ч噺锛氬嚭鍘傛暟
+ chartSeries.value[0].data = items.map((d) => Number(d.factoryNum) || 0)
+ // 宸ヨ祫锛氭殏鏃犲崟鐙帴鍙ｏ紝鐢� 0 鍗犱綅锛屽悗缁彲鎺ュ伐璧勬帴鍙�
+ chartSeries.value[1].data = items.map(() => 0)
+ // 鍚堟牸鐜囷細鍑哄巶鏁�/杩囩▼鏁�*100锛堟棤鍗曠嫭鎺ュ彛鏃剁敤姝ゅ崰浣嶏級
+ chartSeries.value[2].data = items.map((d) => {
+ const processNum = Number(d.processNum) || 0
+ const factoryNum = Number(d.factoryNum) || 0
+ if (processNum <= 0) return 0
+ return Math.min(100, Math.round((factoryNum / processNum) * 100))
+ })
+ })
+ .catch((err) => {
+ console.error('鑾峰彇浜ч噺銆佸伐璧勪笌鍚堟牸鐜囨暟鎹け璐�:', err)
+ })
+}
+
+onMounted(() => {
+ fetchData()
+})
+</script>
+
+<style scoped>
+.main-panel {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.filters-row {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ gap: 12px;
+ margin-bottom: 10px;
+}
+
+.panel-item-customers {
+ border: 1px solid #1a58b0;
+ padding: 18px;
+ width: 100%;
+ height: 449px;
+}
+</style>
diff --git a/src/views/reportAnalysis/productionAnalysis/components/right-top.vue b/src/views/reportAnalysis/productionAnalysis/components/right-top.vue
new file mode 100644
index 0000000..9004362
--- /dev/null
+++ b/src/views/reportAnalysis/productionAnalysis/components/right-top.vue
@@ -0,0 +1,168 @@
+<template>
+ <div>
+ <PanelHeader title="宸ュ崟鎵ц鏁堢巼鍒嗘瀽" />
+ <div class="main-panel panel-item-customers">
+ <Echarts
+ ref="chart"
+ :chartStyle="chartStyle"
+ :grid="grid"
+ :legend="barLegend"
+ :series="chartSeries"
+ :tooltip="tooltip"
+ :xAxis="xAxis1"
+ :yAxis="yAxis1"
+ :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
+ style="height: 260px"
+ />
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { qualityStatistics } from '@/api/viewIndex.js'
+import PanelHeader from './PanelHeader.vue'
+import Echarts from '@/components/Echarts/echarts.vue'
+
+const chartStyle = {
+ width: '100%',
+ height: '160%',
+}
+
+const grid = { left: '3%', right: '4%', bottom: '3%', top: '10%', containLabel: true }
+
+const barLegend = {
+ show: true,
+ textStyle: { color: '#B8C8E0' },
+ data: ['寮�宸�', '瀹屾垚', '鑹搧鐜�'],
+}
+
+// 鏌辩姸鍥撅細寮�宸ャ�佸畬鎴愶紱鎶樼嚎鍥撅細鑹搧鐜囷紙棰滆壊 rgba(90, 216, 166, 1)锛�
+const chartSeries = ref([
+ {
+ name: '寮�宸�',
+ type: 'bar',
+ barWidth: 20,
+ barGap: '40%',
+ emphasis: { focus: 'series' },
+ itemStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 1, color: 'rgba(0, 164, 237, 0)' },
+ { offset: 0, color: 'rgba(78, 228, 255, 1)' },
+ ],
+ },
+ },
+ data: [],
+ },
+ {
+ name: '瀹屾垚',
+ type: 'bar',
+ barGap: '40%',
+ barWidth: 20,
+ emphasis: { focus: 'series' },
+ itemStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 1, color: 'rgba(83, 126, 245, 0.19)' },
+ { offset: 0, color: 'rgba(144, 97, 248, 1)' },
+ ],
+ },
+ },
+ data: [],
+ },
+ {
+ name: '鑹搧鐜�',
+ type: 'line',
+ yAxisIndex: 1,
+ showSymbol: true,
+ symbol: 'circle',
+ symbolSize: 8,
+ lineStyle: { color: 'rgba(90, 216, 166, 1)', width: 2 },
+ itemStyle: { color: 'rgba(90, 216, 166, 1)' },
+ data: [],
+ emphasis: { focus: 'series' },
+ },
+])
+
+const tooltip = {
+ trigger: 'axis',
+ axisPointer: { type: 'cross' },
+ formatter(params) {
+ let result = params[0].axisValueLabel + '<br/>'
+ params.forEach((item) => {
+ const unit = item.seriesName === '鑹搧鐜�' ? '%' : '浠�'
+ result += `<div>${item.marker} ${item.seriesName}: ${item.value}${unit}</div>`
+ })
+ return result
+ },
+}
+
+const xAxis1 = ref([
+ { type: 'category', axisTick: { show: false }, axisLabel: { color: '#B8C8E0' }, data: [] },
+])
+const yAxis1 = [
+ { type: 'value', name: '浠�', axisLabel: { color: '#B8C8E0' }, nameTextStyle: { color: '#B8C8E0' } },
+ {
+ type: 'value',
+ name: '鑹搧鐜�(%)',
+ min: 0,
+ max: 100,
+ axisLabel: { color: '#B8C8E0', formatter: '{value}%' },
+ nameTextStyle: { color: '#B8C8E0' },
+ splitLine: { lineStyle: { color: 'rgba(184, 200, 224, 0.2)' } },
+ },
+]
+
+const fetchData = () => {
+ qualityStatistics()
+ .then((res) => {
+ if (!res?.data?.item || !Array.isArray(res.data.item)) return
+ const items = res.data.item
+ xAxis1.value[0].data = items.map((d) => d.date)
+ // 寮�宸ワ細杩囩▼妫�楠屾暟
+ chartSeries.value[0].data = items.map((d) => Number(d.processNum) || 0)
+ // 瀹屾垚锛氬嚭鍘傛暟
+ chartSeries.value[1].data = items.map((d) => Number(d.factoryNum) || 0)
+ // 鑹搧鐜囷細鍑哄巶鏁�/杩囩▼鏁�*100锛堟棤鍗曠嫭鎺ュ彛鏃剁敤姝ゅ崰浣嶏級
+ chartSeries.value[2].data = items.map((d) => {
+ const processNum = Number(d.processNum) || 0
+ const factoryNum = Number(d.factoryNum) || 0
+ if (processNum <= 0) return 0
+ return Math.min(100, Math.round((factoryNum / processNum) * 100))
+ })
+ })
+ .catch((err) => {
+ console.error('鑾峰彇寮�宸ヤ笌鑹搧鐜囨暟鎹け璐�:', err)
+ })
+}
+
+onMounted(() => {
+ fetchData()
+})
+</script>
+
+<style scoped>
+.main-panel {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.panel-item-customers {
+ border: 1px solid #1a58b0;
+ padding: 18px;
+ width: 100%;
+ height: 449px;
+}
+</style>
diff --git a/src/views/reportAnalysis/productionAnalysis/index.vue b/src/views/reportAnalysis/productionAnalysis/index.vue
new file mode 100644
index 0000000..e179150
--- /dev/null
+++ b/src/views/reportAnalysis/productionAnalysis/index.vue
@@ -0,0 +1,292 @@
+<template>
+ <div class="scale-container">
+ <div class="data-dashboard" :style="{ transform: `scale(${scaleRatio})` }">
+ <!-- 鍏ㄥ睆鎸夐挳 - 绉诲姩鍒板乏涓婅 -->
+ <button class="fullscreen-btn" @click="toggleFullscreen" :title="isFullscreen ? '閫�鍑哄叏灞�' : '鍏ㄥ睆鏄剧ず'">
+ <svg v-if="!isFullscreen" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+ <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/>
+ </svg>
+ <svg v-else width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+ <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
+ </svg>
+ </button>
+
+ <!-- 椤堕儴鏍囬鏍� -->
+ <div class="dashboard-header">
+ <div class="factory-name">鐢熶骇鏁版嵁鍒嗘瀽</div>
+ </div>
+
+ <!-- 涓昏鍐呭鍖哄煙 -->
+ <div class="dashboard-content">
+ <!-- 宸︿晶鍖哄煙 -->
+ <div class="left-panel">
+ <LeftTop />
+
+ <LeftBottom />
+ </div>
+
+ <!-- 涓棿鍖哄煙 -->
+ <div class="center-panel">
+ <CenterTop />
+ <CenterCenter/>
+ <CenterBottom />
+ </div>
+
+ <!-- 鍙充晶鍖哄煙 -->
+ <div class="right-panel">
+
+ <RightTop />
+ <RightBottom />
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import autofit from 'autofit.js'
+import LeftBottom from './components/left-bottom.vue'
+import CenterCenter from './components/center-center.vue'
+import RightTop from './components/right-top.vue'
+import RightBottom from './components/right-bottom.vue'
+import useUserStore from '@/store/modules/user'
+import LeftTop from './components/left-top.vue'
+import CenterTop from './components/center-top.vue'
+import CenterBottom from './components/center-bottom.vue'
+
+// 鍏ㄥ睆鐩稿叧鐘舵��
+const isFullscreen = ref(false);
+
+// 缂╂斁姣斾緥
+const scaleRatio = ref(1)
+// 璁捐灏哄锛堝熀鍑嗗昂瀵革級- 鏍规嵁瀹為檯璁捐绋胯皟鏁�
+const designWidth = 1920
+const designHeight = 1080
+
+// 鐢ㄦ埛store
+const userStore = useUserStore()
+
+// 璁＄畻缂╂斁姣斾緥
+const calculateScale = () => {
+ const container = document.querySelector('.scale-container')
+ if (!container) return
+
+ // 鑾峰彇瀹瑰櫒鐨勫疄闄呭昂瀵�
+ const rect = container.getBoundingClientRect?.()
+ const containerWidth = container.clientWidth || rect?.width || window.innerWidth
+ const containerHeight = container.clientHeight || rect?.height || window.innerHeight
+
+ // 璁＄畻瀹介珮缂╂斁姣斾緥锛屽彇杈冨皬鍊间互淇濊瘉鍐呭瀹屾暣鏄剧ず锛堢瓑姣旂缉鏀撅級
+ const scaleX = containerWidth / designWidth
+ const scaleY = containerHeight / designHeight
+ scaleRatio.value = Math.min(scaleX, scaleY)
+}
+
+// 绐楀彛澶у皬鍙樺寲澶勭悊
+const handleResize = () => {
+ // 寤惰繜鎵ц锛岀‘淇滵OM鏇存柊瀹屾垚
+ setTimeout(() => {
+ calculateScale()
+ }, 100)
+}
+
+// 鍏ㄥ睆鍔熻兘瀹炵幇 - 閽堝scale-container鍏冪礌
+const toggleFullscreen = () => {
+ const element = document.querySelector('.scale-container')
+
+ if (!element) return
+
+ if (!isFullscreen.value) {
+ if (element.requestFullscreen) {
+ element.requestFullscreen()
+ } else if (element.webkitRequestFullscreen) {
+ element.webkitRequestFullscreen()
+ } else if (element.msRequestFullscreen) {
+ element.msRequestFullscreen()
+ }
+ } else {
+ if (document.exitFullscreen) {
+ document.exitFullscreen()
+ } else if (document.webkitExitFullscreen) {
+ document.webkitExitFullscreen()
+ } else if (document.msExitFullscreen) {
+ document.msExitFullscreen()
+ }
+ }
+}
+
+// 鐩戝惉鍏ㄥ睆鍙樺寲浜嬩欢
+const handleFullscreenChange = () => {
+ const fullscreenElement = document.fullscreenElement ||
+ document.webkitFullscreenElement ||
+ document.msFullscreenElement
+ isFullscreen.value = fullscreenElement && fullscreenElement.classList.contains('scale-container')
+
+ // 鍏ㄥ睆鐘舵�佸彉鍖栨椂锛屽欢杩熼噸鏂拌绠楃缉鏀炬瘮渚嬶紙纭繚DOM鏇存柊瀹屾垚锛�
+ setTimeout(() => {
+ calculateScale()
+ }, 200)
+}
+
+// 鐢熷懡鍛ㄦ湡閽╁瓙
+onMounted(() => {
+ // 浣跨敤nextTick纭繚DOM瀹屽叏娓叉煋鍚庡啀鍒濆鍖�
+ nextTick(() => {
+ // 璁＄畻鍒濆缂╂斁姣斾緥
+ calculateScale()
+ })
+
+ window.addEventListener('resize', handleResize)
+ window.addEventListener('fullscreenchange', handleFullscreenChange)
+ window.addEventListener('webkitfullscreenchange', handleFullscreenChange)
+ window.addEventListener('MSFullscreenChange', handleFullscreenChange)
+})
+
+onBeforeUnmount(() => {
+ window.removeEventListener('resize', handleResize)
+ window.removeEventListener('fullscreenchange', handleFullscreenChange)
+ window.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
+ window.removeEventListener('MSFullscreenChange', handleFullscreenChange)
+ // 绉婚櫎鎴戜滑娣诲姞鐨刟utofit鍔ㄦ�佽皟鏁寸洃鍚櫒
+ if (window._autofitUpdateHandler) {
+ window.removeEventListener('resize', window._autofitUpdateHandler)
+ delete window._autofitUpdateHandler
+ }
+ // 鍏抽棴autofit
+ autofit.off()
+})
+</script>
+
+<style scoped>
+/* 澶栭儴缂╂斁瀹瑰櫒 - 鍗犳嵁鏁翠釜瑙嗗彛 */
+.scale-container {
+position: relative;
+width: 100%;
+/* 椤甸潰鍦ㄥ父瑙勫竷灞�涓嬶紙鏈夐《鏍忥級榛樿鍑忓幓 84px锛岄伩鍏嶅唴瀹硅瑁佸垏 */
+height: calc(100vh - 84px);
+display: flex;
+align-items: center;
+justify-content: center;
+background-color: #000;
+overflow: hidden;
+}
+
+/* 鍐呴儴鍐呭鍖哄煙 - 鍥哄畾璁捐灏哄 */
+.data-dashboard {
+position: relative;
+width: 1920px;
+height: 1080px;
+background-image: url("@/assets/BI/backImage@2x.png");
+background-size: cover;
+background-position: center;
+background-repeat: no-repeat;
+transform-origin: center center;
+}
+
+/* 鍏ㄥ睆鐘舵�佺殑鏍峰紡 - 浣滅敤浜巗cale-container */
+.scale-container:fullscreen {
+width: 100vw;
+height: 100vh;
+margin: 0;
+padding: 0;
+background-color: #000;
+z-index: 9999;
+}
+
+/* Webkit娴忚鍣ㄥ墠缂� */
+.scale-container:-webkit-full-screen {
+width: 100vw;
+height: 100vh;
+margin: 0;
+padding: 0;
+background-color: #000;
+z-index: 9999;
+}
+
+/* MS娴忚鍣ㄥ墠缂� */
+.scale-container:-ms-fullscreen {
+width: 100vw;
+height: 100vh;
+margin: 0;
+padding: 0;
+background-color: #000;
+z-index: 9999;
+}
+
+
+.dashboard-header {
+position: relative;
+z-index: 1;
+height: 86px;
+background-image: url("@/assets/BI/biaoti.png");
+background-size: cover;
+background-repeat: no-repeat;
+display: flex;
+align-items: center;
+justify-content: center;
+}
+
+.factory-name {
+font-weight: 600;
+font-size: 52px;
+color: #FFFFFF;
+top: 16px;
+position: absolute;
+}
+
+.fullscreen-btn {
+position: absolute;
+top: 10px;
+left: 20px;
+width: 40px;
+height: 40px;
+background: rgba(0, 20, 60, 0.8);
+border: 1px solid rgba(0, 212, 255, 0.3);
+border-radius: 6px;
+color: #00d4ff;
+cursor: pointer;
+display: flex;
+align-items: center;
+justify-content: center;
+transition: all 0.3s;
+z-index: 10000;
+}
+
+.fullscreen-btn:hover {
+background: rgba(0, 30, 90, 0.9);
+border-color: rgba(0, 212, 255, 0.5);
+}
+
+.dashboard-content {
+position: relative;
+z-index: 1;
+display: flex;
+gap: 30px;
+padding: 0 30px;
+height: calc(100% - 86px);
+overflow: hidden;
+}
+
+/* 纭繚鍚勯潰鏉胯兘澶熸纭樉绀� */
+.left-panel, .center-panel, .right-panel {
+overflow: hidden;
+}
+
+.left-panel,
+.right-panel {
+flex: 1;
+display: flex;
+flex-direction: column;
+gap: 24px;
+width: 520px;
+}
+
+.center-panel {
+flex: 1.5;
+display: flex;
+flex-direction: column;
+gap: 20px;
+}
+
+</style>
\ No newline at end of file
--
Gitblit v1.9.3