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