manager/my-worker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

财务门户设计

Browse Source
This commit is contained in:
gaoxq
2026-02-19 21:11:03 +08:00
parent a0244c9afc
commit df7cdb9716
1 changed files with 88 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
web-vue/packages/erp/views/erp/green/index.vue
View File

@@ -4,8 +4,8 @@
<div class="header-left"> <div class="header-left">
<div class="card-item"> <div class="card-item">
<div class="card-icon"> <div class="card-icon">
<Icon icon="icons/erp-shouru.svg" size="48" /> <Icon icon="icons/erp-shouru.svg" size="48" />
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="card-value">{{ indexData?.[0]?.index01 || 0 }}</div> <div class="card-value">{{ indexData?.[0]?.index01 || 0 }}</div>
<div class="card-desc">总收入(元)</div> <div class="card-desc">总收入(元)</div>
@@ -13,8 +13,8 @@
</div> </div>
<div class="card-item"> <div class="card-item">
<div class="card-icon"> <div class="card-icon">
<Icon icon="icons/erp-zhichu.svg" size="48" /> <Icon icon="icons/erp-zhichu.svg" size="48" />
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="card-value">{{ indexData?.[0]?.index02 || 0 }}</div> <div class="card-value">{{ indexData?.[0]?.index02 || 0 }}</div>
<div class="card-desc">总支出(元)</div> <div class="card-desc">总支出(元)</div>
@@ -22,8 +22,8 @@
</div> </div>
<div class="card-item"> <div class="card-item">
<div class="card-icon"> <div class="card-icon">
<Icon icon="icons/erp-fencheng.svg" size="48" /> <Icon icon="icons/erp-fencheng.svg" size="48" />
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="card-value">{{ indexData?.[0]?.index03 || 0 }}</div> <div class="card-value">{{ indexData?.[0]?.index03 || 0 }}</div>
<div class="card-desc">储蓄率(%)</div> <div class="card-desc">储蓄率(%)</div>
@@ -31,8 +31,8 @@
</div> </div>
<div class="card-item"> <div class="card-item">
<div class="card-icon"> <div class="card-icon">
<Icon icon="icons/erp-zongshouru.svg" size="48" /> <Icon icon="icons/erp-zongshouru.svg" size="48" />
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="card-value">{{ indexData?.[0]?.index04 || 0 }}</div> <div class="card-value">{{ indexData?.[0]?.index04 || 0 }}</div>
<div class="card-desc">净利润(元)</div> <div class="card-desc">净利润(元)</div>
@@ -40,8 +40,8 @@
</div> </div>
<div class="card-item"> <div class="card-item">
<div class="card-icon"> <div class="card-icon">
<Icon icon="icons/erp-jinglirun.svg" size="48" /> <Icon icon="icons/erp-jinglirun.svg" size="48" />
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="card-value">{{ indexData?.[0]?.index05 || 0 }}</div> <div class="card-value">{{ indexData?.[0]?.index05 || 0 }}</div>
<div class="card-desc">月均收入(元)</div> <div class="card-desc">月均收入(元)</div>
@@ -49,8 +49,8 @@
</div> </div>
<div class="card-item"> <div class="card-item">
<div class="card-icon"> <div class="card-icon">
<Icon icon="icons/erp-jiaoyizhichu.svg" size="48" /> <Icon icon="icons/erp-jiaoyizhichu.svg" size="48" />
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="card-value">{{ indexData?.[0]?.index06 || 0 }}</div> <div class="card-value">{{ indexData?.[0]?.index06 || 0 }}</div>
<div class="card-desc">月均支出(元)</div> <div class="card-desc">月均支出(元)</div>
@@ -59,8 +59,8 @@
</div> </div>
<div class="header-right"> <div class="header-right">
<div class="header-right-top"> <div class="header-right-top">
<h2>财务数据可视化大屏</h2> <h2>财务数据可视化大屏</h2>
</div> </div>
<div class="header-right-bottom"> <div class="header-right-bottom">
<BasicForm <BasicForm
:labelWidth="100" :labelWidth="100"
@@ -70,6 +70,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="top-section"> <div class="top-section">
<div class="top-left"> <div class="top-left">
<ChartPie :formParams="FormValues" /> <ChartPie :formParams="FormValues" />
@@ -143,7 +144,7 @@ const schemaForm: FormProps = {
labelWidth: 90, labelWidth: 90,
schemas: [ schemas: [
{ {
label: '年份', label: '年份',
field: 'reqParam', field: 'reqParam',
defaultValue: new Date().getFullYear().toString(), defaultValue: new Date().getFullYear().toString(),
component: 'Select', component: 'Select',
@@ -163,7 +164,7 @@ const schemaForm: FormProps = {
}; };
const fetchDataList = async () => { const fetchDataList = async () => {
try { try {
const reqParams = { const reqParams = {
xAxis: getCurrentMonth(), xAxis: getCurrentMonth(),
reqParam: String(currentSystemYear), reqParam: String(currentSystemYear),
@@ -190,24 +191,26 @@ onMounted(() => {
.erp-green-page-container { .erp-green-page-container {
height: calc(100vh - 100px); height: calc(100vh - 100px);
margin: 0; margin: 0;
padding: 0; padding: 0 4px 4px 4px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
background-color: #e6f7ff; background: #051937;
gap: 4px;
} }
/* 头部区域不变 */
.header-section { .header-section {
height: 10%; height: 10%;
display: flex; display: flex;
gap: 4px; gap: 4px;
padding: 1px; padding: 1px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #e5e7eb; background: rgba(12, 44, 85, 0.6);
border: 1px solid rgba(32, 160, 255, 0.3);
border-radius: 4px; border-radius: 4px;
background-color: #f9fafb;
margin: 0 2px 4px 2px;
overflow: hidden; overflow: hidden;
box-shadow: inset 0 0 8px rgba(32, 160, 255, 0.2);
} }
.header-left { .header-left {
@@ -217,10 +220,10 @@ onMounted(() => {
justify-content: space-between; justify-content: space-between;
padding: 0 8px; padding: 0 8px;
box-sizing: border-box; box-sizing: border-box;
background-color: #f0f8fb; background: rgba(9, 30, 58, 0.8);
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
border: 1px solid #b3d9f2; border: 1px solid rgba(32, 160, 255, 0.2);
} }
.card-item { .card-item {
@@ -231,27 +234,37 @@ onMounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
background-color: #fff; background: rgba(18, 60, 110, 0.7);
border: 1px solid rgba(32, 160, 255, 0.3);
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease; transition: all 0.3s ease;
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
min-width: 0; min-width: 0;
box-shadow: 0 0 10px rgba(32, 160, 255, 0.1);
} }
.card-item:hover { .card-item:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
transform: translateY(-2px); transform: translateY(-2px);
border: 1px solid #1890ff; border: 1px solid #20a0ff;
box-shadow: 0 0 15px rgba(32, 160, 255, 0.3);
} }
.card-icon { .card-icon {
flex-shrink: 0; flex-shrink: 0;
width: 60px; width: 50px;
height: 100%; height: 50px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: rgba(32, 160, 255, 0.15);
border-radius: 8px;
border: 1px solid rgba(32, 160, 255, 0.4);
}
:deep(.card-icon svg) {
color: #40c4ff !important;
fill: #40c4ff !important;
} }
.card-content { .card-content {
@@ -266,15 +279,17 @@ onMounted(() => {
.card-value { .card-value {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: #1890ff; color: #40c4ff;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
line-height: 1.2; line-height: 1.2;
text-shadow: 0 0 5px rgba(64, 196, 255, 0.5);
} }
.card-desc { .card-desc {
font-size: 11px; font-size: 11px;
color: #666; color: #a0cfff;
margin-top: 2px; margin-top: 2px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@@ -288,11 +303,11 @@ onMounted(() => {
flex-direction: column; flex-direction: column;
gap: 6px; gap: 6px;
overflow: hidden; overflow: hidden;
border: 1px solid #b3d9f2; border: 1px solid rgba(32, 160, 255, 0.3);
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
padding: 6px; padding: 6px;
background-color: #f8fcff; background: rgba(9, 30, 58, 0.8);
} }
.header-right-top { .header-right-top {
@@ -301,22 +316,20 @@ onMounted(() => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 6px; border-radius: 6px;
background-color: #e6f7ff; background: rgba(18, 60, 110, 0.7);
border: 1px solid rgba(32, 160, 255, 0.3);
overflow: hidden; overflow: hidden;
padding: 0 10px; padding: 0 10px;
border: 1px solid #91d5ff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
} }
.header-right-top h2 { .header-right-top h2 {
font-size: clamp(14px, 1.8vw, 18px); font-size: clamp(14px, 1.8vw, 18px);
font-weight: 700; font-weight: 700;
color: #0958d9; color: #20a0ff;
letter-spacing: 0.5px; letter-spacing: 0.5px;
margin: 0; margin: 0;
-webkit-font-smoothing: antialiased; text-shadow: 0 0 8px rgba(32, 160, 255, 0.4);
-moz-osx-font-smoothing: grayscale;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@@ -329,12 +342,12 @@ onMounted(() => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 6px; border-radius: 6px;
background-color: #f0f8fb; background: rgba(18, 60, 110, 0.7);
overflow: hidden; overflow: hidden;
padding: 8px 12px; padding: 8px 12px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #b3d9f2; border: 1px solid rgba(32, 160, 255, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
} }
:deep(.header-right-bottom .search-form) { :deep(.header-right-bottom .search-form) {
@@ -352,47 +365,58 @@ onMounted(() => {
:deep(.header-right-bottom .ant-select) { :deep(.header-right-bottom .ant-select) {
width: 100% !important; width: 100% !important;
} }
:deep(.ant-select-selector) {
background: rgba(9, 30, 58, 0.9) !important;
border: 1px solid rgba(32, 160, 255, 0.5) !important;
color: #a0cfff !important;
}
:deep(.ant-select-selection-item) {
color: #a0cfff !important;
}
:deep(.ant-select-arrow) {
color: #20a0ff !important;
}
/* 以下高度 100% 还原你最初的布局 */
.top-section { .top-section {
height: 30%; height: 30%;
display: flex; display: flex;
gap: 4px; gap: 4px;
padding: 2px;
box-sizing: border-box;
} }
.top-left, .top-middle, .top-right { .top-left, .top-middle, .top-right {
flex: 1; flex: 1;
border: 1px solid #e5e7eb; border: 1px solid rgba(32, 160, 255, 0.3);
border-radius: 4px; border-radius: 4px;
background-color: #f9fafb; background: #062044;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
box-shadow: inset 0 0 8px rgba(32, 160, 255, 0.1);
} }
.middle-section { .middle-section {
height: 30%; height: 30%;
display: flex; display: flex;
gap: 4px; gap: 4px;
padding: 2px;
box-sizing: border-box;
} }
.middle-left { .middle-left {
flex: 1; flex: 1;
border: 1px solid #e5e7eb; border: 1px solid rgba(32, 160, 255, 0.3);
border-radius: 4px; border-radius: 4px;
background-color: #f9fafb; background: #062044;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: inset 0 0 8px rgba(32, 160, 255, 0.1);
} }
.middle-right { .middle-right {
flex: 1; flex: 1;
border: 1px solid #e5e7eb; border: 1px solid rgba(32, 160, 255, 0.3);
border-radius: 4px; border-radius: 4px;
background-color: #f9fafb; background: #062044;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
gap: 4px; gap: 4px;
@@ -402,35 +426,36 @@ onMounted(() => {
.middle-right-1, .middle-right-2 { .middle-right-1, .middle-right-2 {
flex: 1; flex: 1;
border-radius: 4px; border-radius: 4px;
background-color: #f0f8fb; background: #072955;
border: 1px solid rgba(32, 160, 255, 0.2);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
} }
.bottom-section { .bottom-section {
height: 30%; height: 30%;
display: flex; display: flex;
gap: 4px; gap: 4px;
padding: 2px;
box-sizing: border-box;
} }
.bottom-left { .bottom-left {
flex: 1; flex: 1;
border: 1px solid #e5e7eb; border: 1px solid rgba(32, 160, 255, 0.3);
border-radius: 4px; border-radius: 4px;
background-color: #f9fafb; background: #062044;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: inset 0 0 8px rgba(32, 160, 255, 0.1);
} }
.bottom-right { .bottom-right {
flex: 1; flex: 1;
border: 1px solid #e5e7eb; border: 1px solid rgba(32, 160, 255, 0.3);
border-radius: 4px; border-radius: 4px;
background-color: #f9fafb; background: #062044;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
gap: 4px; gap: 4px;
@@ -440,12 +465,14 @@ onMounted(() => {
.bottom-right-1, .bottom-right-2 { .bottom-right-1, .bottom-right-2 {
flex: 1; flex: 1;
border-radius: 4px; border-radius: 4px;
background-color: #f0f8fb; background: #072955;
border: 1px solid rgba(32, 160, 255, 0.2);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
} }
:deep(.top-middle) { :deep(.top-middle) {
height: 100%; height: 100%;
width: 100%; width: 100%;