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-01-01 21:45:17 +08:00
parent f9b0869f38
commit 623bcb248c
8 changed files with 96 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web-vue/packages/biz/views/biz/dataReport/erp/components/ChartBarAccount.vue
View File

@@ -1,5 +1,5 @@
<template>
<Card title="账户汇总" style="width: 100%; height: 400px; margin: 4px 0;">
<Card title="账户分析" style="width: 100%; height: 400px; margin: 4px 0;">
<div ref="chartDom" style="width: 100%; height: 300px;"></div>
</Card>
</template>

2
web-vue/packages/biz/views/biz/dataReport/erp/components/ChartBarCycle.vue
View File

@@ -1,5 +1,5 @@
<template>
<Card title="周期汇总" style="width: 100%; height: 400px; margin: 4px 0;">
<Card title="周期分析" style="width: 100%; height: 400px; margin: 4px 0;">
<div ref="chartDom" style="width: 100%; height: 300px;"></div>
</Card>
</template>

2
web-vue/packages/biz/views/biz/dataReport/erp/components/ChartLineExp.vue
View File

@@ -1,5 +1,5 @@
<template>
<Card title="支出汇总" style="width: 100%; height: 400px; margin: 4px 0;">
<Card title="支出分析" style="width: 100%; height: 400px; margin: 4px 0;">
<div ref="chartDom" style="width: 100%; height: 300px;"></div>
</Card>
</template>

2
web-vue/packages/biz/views/biz/dataReport/erp/components/ChartLineInc.vue
View File

@@ -1,5 +1,5 @@
<template>
<Card title="收入汇总" style="width: 100%; height: 400px; margin: 4px 0;">
<Card title="收入分析" style="width: 100%; height: 400px; margin: 4px 0;">
<div ref="chartDom" style="width: 100%; height: 300px;"></div>
</Card>
</template>

2
web-vue/packages/biz/views/biz/dataReport/erp/components/ChartLineRatio.vue
View File

@@ -1,5 +1,5 @@
<template>
<Card title="收支汇总" style="width: 100%; height: 400px; margin: 4px 0;">
<Card title="收支分析" style="width: 100%; height: 400px; margin: 4px 0;">
<div ref="chartDom" style="width: 100%; height: 300px;"></div>
</Card>
</template>

2
web-vue/packages/biz/views/biz/dataReport/erp/components/ChartLineType.vue
View File

@@ -1,5 +1,5 @@
<template>
<Card title="用途汇总" style="width: 100%; height: 400px; margin: 4px 0;">
<Card title="用途分析" style="width: 100%; height: 400px; margin: 4px 0;">
<div ref="chartDom" style="width: 100%; height: 300px;"></div>
</Card>
</template>

2
web-vue/packages/biz/views/biz/dataReport/erp/components/ChartPie.vue
View File

@@ -1,5 +1,5 @@
<template>
<Card title="账户占比" style="width: 100%; height: 400px; margin: 4px 0;">
<Card title="占比分析" style="width: 100%; height: 400px; margin: 4px 0;">
<template #extra>
<div class="total-amount">
总金额：<span class="amount-value">{{ totalAmountText }}</span> 元

156
web-vue/packages/biz/views/biz/dataReport/erp/index.vue
View File

@@ -3,6 +3,7 @@
<div class="top-header-section">
<div class="header-icon-wrapper">
<img :src="headerImg" class="header-img" />
<span class="icon-text">财务可视化指标统计</span>
</div>
<BasicForm
:labelWidth="100"
@@ -10,28 +11,32 @@
class="search-form"
/>
</div>
<div class="two-column-layout">
<ChartPie />
<ChartLineRatio :formParams="FormValues" />
<div class="chart-layout">
<div class="two-column-item">
<ChartPie />
<ChartLineRatio :formParams="FormValues" />
</div>
<div class="two-column-item">
<ChartBarAccount :formParams="FormValues" />
<ChartBarCycle :formParams="FormValues" />
</div>
<div class="two-column-item">
<ChartLineInc :formParams="FormValues" />
<ChartLineExp :formParams="FormValues" />
</div>
</div>
<div class="two-column-layout">
<ChartBarCycle :formParams="FormValues" />
<ChartBarAccount :formParams="FormValues" />
</div>
<ChartLineType :formParams="FormValues" />
<div class="two-column-layout">
<ChartLineExp :formParams="FormValues" />
<ChartLineInc :formParams="FormValues" />
<div class="single-chart-item">
<ChartLineType :formParams="FormValues" />
</div>
</PageWrapper>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { Card } from 'ant-design-vue';
import { Icon } from '@jeesite/core/components/Icon';
import { BasicForm, FormSchema, FormProps } from '@jeesite/core/components/Form';
import { ref } from 'vue';
import { BasicForm, FormProps } from '@jeesite/core/components/Form';
import { PageWrapper } from '@jeesite/core/components/Page';
// 图表组件导入
import ChartPie from './components/ChartPie.vue';
import ChartLineExp from './components/ChartLineExp.vue';
import ChartLineInc from './components/ChartLineInc.vue';
@@ -40,12 +45,15 @@ import ChartBarAccount from './components/ChartBarAccount.vue';
import ChartLineType from './components/ChartLineType.vue';
import ChartLineRatio from './components/ChartLineRatio.vue';
// 静态资源
import headerImg from '@jeesite/assets/images/bigview.png';
// 表单数据
const FormValues = ref<Record<string, any>>({
cycleType: 'M'
});
// 表单配置
const schemaForm: FormProps = {
baseColProps: { md: 8, lg: 6 },
labelWidth: 90,
@@ -72,114 +80,128 @@ const schemaForm: FormProps = {
.dashboard-container {
padding: 0 8px;
min-height: 100vh;
box-sizing: border-box;
}
/* 顶部头部样式 */
.top-header-section {
display: flex;
justify-content: space-between;
align-items: center;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
width: 100%;
background-color: #e6f7ff;
border-radius: 8px;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
border-radius: 8px;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
border: 1px solid #bde5ff;
box-sizing: border-box;
}
/* 优化：图标容器样式 */
/* 图标容器样式 */
.header-icon-wrapper {
display: flex;
align-items: center;
gap: 8px; /* 图标与文本间距 */
gap: 8px;
font-size: 16px;
font-weight: 500;
transition: all 0.2s ease;
}
/* 核心优化：限制图片尺寸 */
/* 头部图片样式 */
.header-img {
width: 60px; /* 固定宽度 */
height: 30px; /* 固定高度 */
object-fit: contain; /* 保持图片比例，不拉伸 */
flex-shrink: 0; /* 防止被压缩 */
border-radius: 4px; /* 轻微圆角，更美观 */
}
/* 优化：图标核心样式 */
.dashboard-icon {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
transition: transform 0.2s ease, filter 0.2s ease;
background: transparent;
}
/* hover效果 */
.header-icon-wrapper:hover .header-img {
transform: scale(1.05);
filter: brightness(1.1);
width: 60px;
height: 30px;
object-fit: contain;
flex-shrink: 0;
border-radius: 4px;
transition: all 0.2s ease;
}
/* 图标文本样式 */
.icon-text {
color: #1890ff;
margin-left: 4px;
white-space: nowrap; /* 防止文本换行 */
white-space: nowrap;
}
/* 右侧表单样式 */
/* 表单样式 */
.search-form {
width: 245px;
}
.two-column-layout {
/* 图表布局容器 */
.chart-layout {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 12px;
}
/* 双列图表项 */
.two-column-item {
display: flex;
gap: 12px;
width: 100%;
padding: 0;
margin-bottom: 12px; /* 增加图表区域间距 */
}
.chart-line-wrapper {
/* 单列图表项 */
.single-chart-item {
width: 100%;
margin-top: 0;
padding: 0;
margin-bottom: 12px;
}
/* 响应式适配优化 */
/* 通用图表容器样式 - 强制子组件占满容器 */
.two-column-item > *,
.single-chart-item > * {
flex: 1;
min-width: 0; /* 解决flex子元素宽度溢出问题 */
}
/* 响应式适配 */
@media (max-width: 768px) {
.two-column-layout {
flex-direction: column;
gap: 8px;
margin-bottom: 8px;
}
.top-header-section {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 12px 16px;
}
.search-form {
width: 100%;
}
/* 移动端图片适配 */
.header-img {
width: 32px;
width: 42px;
height: 32px;
}
.header-icon-wrapper {
font-size: 14px;
}
.two-column-item {
flex-direction: column;
gap: 8px;
}
.chart-layout {
gap: 8px;
margin-bottom: 8px;
}
.single-chart-item {
margin-bottom: 8px;
}
}
/* 额外优化：防止图片溢出 */
:deep(.header-img) {
/* Hover效果 */
.header-icon-wrapper:hover .header-img {
transform: scale(1.05);
filter: brightness(1.1);
}
/* 防止图片溢出 */
.header-img {
max-width: 100%;
height: auto;
}