大屏项目初始化
This commit is contained in:
@@ -1,80 +1,53 @@
|
||||
<template>
|
||||
<div class="chart-card">
|
||||
<el-carousel
|
||||
height="100%"
|
||||
arrow="hover"
|
||||
trigger="click"
|
||||
>
|
||||
<el-carousel height="100%" arrow="hover" trigger="click" :autoplay="false">
|
||||
<el-carousel-item>
|
||||
<div class="carousel-item-inner">
|
||||
<div class="chart-card-header">
|
||||
<span class="chart-card-title">分类收入分析</span>
|
||||
<span class="chart-card-title">账户收入分析</span>
|
||||
</div>
|
||||
<div class="content-box">
|
||||
<div class="table-container">
|
||||
<div class="custom-loading" v-if="dataLoading">
|
||||
<el-icon class="loading-icon"><Loading /></el-icon>
|
||||
<span class="loading-text">加载中...</span>
|
||||
</div>
|
||||
<el-table
|
||||
:data="categoryIncomeData"
|
||||
:data="incomeData"
|
||||
stripe
|
||||
style="width: 100%; height: 100%"
|
||||
empty-text="暂无分类收入数据"
|
||||
:row-style="{
|
||||
background: 'transparent',
|
||||
border: 'none'
|
||||
}"
|
||||
:cell-style="{
|
||||
border: 'none',
|
||||
borderBottom: '1px solid rgba(26, 80, 139, 0.3)'
|
||||
}"
|
||||
empty-text="暂无账户收入数据"
|
||||
:row-style="{ background: 'transparent' }"
|
||||
:cell-style="{ borderBottom: '1px solid rgba(26, 80, 139, 0.3)' }"
|
||||
:header-row-style="{ background: 'transparent' }"
|
||||
:header-cell-style="{ borderBottom: '1px solid rgba(26, 80, 139, 0.3)' }"
|
||||
>
|
||||
<el-table-column prop="categoryName" label="分类名称" width="120" />
|
||||
<el-table-column prop="index01" label="1月" width="65" />
|
||||
<el-table-column prop="index01" label="2月" width="65" />
|
||||
<el-table-column prop="index01" label="3月" width="65" />
|
||||
<el-table-column prop="index01" label="4月" width="65" />
|
||||
<el-table-column prop="index01" label="5月" width="65" />
|
||||
<el-table-column prop="index01" label="6月" width="65" />
|
||||
<el-table-column prop="index01" label="7月" width="65" />
|
||||
<el-table-column prop="index01" label="8月" width="65" />
|
||||
<el-table-column prop="index01" label="9月" width="65" />
|
||||
<el-table-column prop="index01" label="10月" width="65" />
|
||||
<el-table-column prop="index01" label="11月" width="65" />
|
||||
<el-table-column prop="index01" label="12月" width="65" />
|
||||
<el-table-column prop="xaxis" label="账户名称" width="120" show-overflow-tooltip />
|
||||
<el-table-column v-for="m in 12" :key="`in-${m}`" :prop="`index${String(m).padStart(2, '0')}`" :label="`${m}月`" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
|
||||
<el-carousel-item>
|
||||
<div class="carousel-item-inner">
|
||||
<div class="chart-card-header">
|
||||
<span class="chart-card-title">支出收入分析</span>
|
||||
<span class="chart-card-title">账户支出分析</span>
|
||||
</div>
|
||||
<div class="content-box">
|
||||
<div class="table-container">
|
||||
<div class="custom-loading" v-if="dataLoading">
|
||||
<el-icon class="loading-icon"><Loading /></el-icon>
|
||||
<span class="loading-text">加载中...</span>
|
||||
</div>
|
||||
<el-table
|
||||
:data="expenseIncomeData"
|
||||
:data="expenseData"
|
||||
stripe
|
||||
style="width: 100%; height: 100%"
|
||||
empty-text="暂无收支分析数据"
|
||||
:row-style="{
|
||||
background: 'transparent',
|
||||
border: 'none'
|
||||
}"
|
||||
:cell-style="{
|
||||
border: 'none',
|
||||
borderBottom: '1px solid rgba(26, 80, 139, 0.3)'
|
||||
}"
|
||||
empty-text="暂无账户支出数据"
|
||||
:row-style="{ background: 'transparent' }"
|
||||
:cell-style="{ borderBottom: '1px solid rgba(26, 80, 139, 0.3)' }"
|
||||
:header-row-style="{ background: 'transparent' }"
|
||||
:header-cell-style="{ borderBottom: '1px solid rgba(26, 80, 139, 0.3)' }"
|
||||
>
|
||||
<el-table-column prop="categoryName" label="分类名称" width="120" />
|
||||
<el-table-column prop="index01" label="1月" width="65" />
|
||||
<el-table-column prop="index01" label="2月" width="65" />
|
||||
<el-table-column prop="index01" label="3月" width="65" />
|
||||
<el-table-column prop="index01" label="4月" width="65" />
|
||||
<el-table-column prop="index01" label="5月" width="65" />
|
||||
<el-table-column prop="index01" label="6月" width="65" />
|
||||
<el-table-column prop="index01" label="7月" width="65" />
|
||||
<el-table-column prop="index01" label="8月" width="65" />
|
||||
<el-table-column prop="index01" label="9月" width="65" />
|
||||
<el-table-column prop="index01" label="10月" width="65" />
|
||||
<el-table-column prop="index01" label="11月" width="65" />
|
||||
<el-table-column prop="index01" label="12月" width="65" />
|
||||
<el-table-column prop="xaxis" label="账户名称" width="120" show-overflow-tooltip />
|
||||
<el-table-column v-for="m in 12" :key="`ex-${m}`" :prop="`index${String(m).padStart(2, '0')}`" :label="`${m}月`" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -84,180 +57,47 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElCarousel, ElCarouselItem, ElTable, ElTableColumn, ElButton } from 'element-plus'
|
||||
import { ref } from 'vue'
|
||||
import { ref, watch } from 'vue'
|
||||
import { getItemInfoList } from '@/api/bizApi'
|
||||
|
||||
const categoryIncomeData = ref([
|
||||
{
|
||||
categoryName: '产品销售',
|
||||
amount: '285.60',
|
||||
proportion: '68.5',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '268.40',
|
||||
growthRate: '+6.4'
|
||||
},
|
||||
{
|
||||
categoryName: '服务收入',
|
||||
amount: '85.20',
|
||||
proportion: '20.4',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '78.90',
|
||||
growthRate: '+7.9'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
const props = defineProps({
|
||||
formParams: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
])
|
||||
})
|
||||
|
||||
// 模拟支出收入分析数据
|
||||
const expenseIncomeData = ref([
|
||||
{
|
||||
month: '2026-01',
|
||||
totalIncome: '428.50',
|
||||
totalExpense: '298.60',
|
||||
netProfit: '129.90',
|
||||
profitMargin: '30.3'
|
||||
},
|
||||
{
|
||||
month: '2026-02',
|
||||
totalIncome: '456.80',
|
||||
totalExpense: '312.40',
|
||||
netProfit: '144.40',
|
||||
profitMargin: '31.6'
|
||||
},
|
||||
{
|
||||
month: '2026-03',
|
||||
totalIncome: '417.60',
|
||||
totalExpense: '289.50',
|
||||
netProfit: '128.10',
|
||||
profitMargin: '30.7'
|
||||
const incomeData = ref([])
|
||||
const expenseData = ref([])
|
||||
const dataLoading = ref(false)
|
||||
|
||||
async function getIncomeList() {
|
||||
try {
|
||||
const res = await getItemInfoList({ ...props.formParams, itemCode: 'ERP_YEAR_ACCOUNT_Y001' })
|
||||
incomeData.value = res || []
|
||||
} catch (e) {
|
||||
incomeData.value = []
|
||||
console.error('数据加载失败:', e)
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
async function getExpenseList() {
|
||||
try {
|
||||
const res = await getItemInfoList({ ...props.formParams, itemCode: 'ERP_YEAR_ACCOUNT_Y002' })
|
||||
expenseData.value = res || []
|
||||
} catch (e) {
|
||||
expenseData.value = []
|
||||
console.error('数据加载失败:', e)
|
||||
}
|
||||
}
|
||||
|
||||
async function getList() {
|
||||
dataLoading.value = true
|
||||
await Promise.all([getIncomeList(), getExpenseList()])
|
||||
dataLoading.value = false
|
||||
}
|
||||
|
||||
watch(() => props.formParams, () => getList(), { deep: true, immediate: true })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -265,8 +105,8 @@ const expenseIncomeData = ref([
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/images/k2style.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/images/k2style.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
|
||||
.carousel-item-inner {
|
||||
@@ -274,6 +114,7 @@ const expenseIncomeData = ref([
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.chart-card-header {
|
||||
@@ -293,83 +134,109 @@ const expenseIncomeData = ref([
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.content-box {
|
||||
.table-container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
padding: 10px;
|
||||
overflow: auto;
|
||||
background-size: 100% 100%;
|
||||
background: transparent !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
:deep(.el-carousel) {
|
||||
height: 100% !important;
|
||||
.custom-loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.1) !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 999;
|
||||
}
|
||||
:deep(.el-carousel__container) {
|
||||
height: 100% !important;
|
||||
|
||||
.loading-icon {
|
||||
font-size: 24px;
|
||||
color: #409EFF;
|
||||
animation: loading-rotate 2s linear infinite;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 14px;
|
||||
color: #b4c7e7;
|
||||
}
|
||||
|
||||
@keyframes loading-rotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-carousel),
|
||||
:deep(.el-carousel__container),
|
||||
:deep(.el-carousel__item) {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
--el-table-text-color: #b4c7e7;
|
||||
--el-table-header-text-color: #b4c7e7;
|
||||
--el-table-row-hover-bg-color: rgba(26, 80, 139, 0.2);
|
||||
--el-table-border-color: transparent !important;
|
||||
--el-table-stripe-row-bg-color: rgba(0, 0, 0, 0.1);
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
:deep(.el-table__header-wrapper),
|
||||
:deep(.el-table__header),
|
||||
:deep(.el-table__header tr),
|
||||
:deep(.el-table__header th) {
|
||||
background-color: transparent !important;
|
||||
height: 100% !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
:deep(.el-table__header th) {
|
||||
:deep(.el-table) {
|
||||
--el-table-bg-color: transparent !important;
|
||||
--el-table-text-color: #b4c7e7 !important;
|
||||
--el-table-header-text-color: #b4c7e7 !important;
|
||||
--el-table-row-hover-bg-color: rgba(26, 80, 139, 0.2) !important;
|
||||
--el-table-border-color: transparent !important;
|
||||
--el-table-stripe-row-bg-color: rgba(0, 0, 0, 0.1) !important;
|
||||
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
border-bottom: 1px solid rgba(26, 80, 139, 0.3) !important;
|
||||
color: #b4c7e7 !important;
|
||||
font-weight: 600;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
:deep(.el-table td) {
|
||||
border: none !important;
|
||||
border-bottom: 1px solid rgba(26, 80, 139, 0.3) !important;
|
||||
background-color: transparent !important;
|
||||
color: #b4c7e7 !important;
|
||||
}
|
||||
|
||||
:deep(.el-table__row:hover > td) {
|
||||
background-color: rgba(26, 80, 139, 0.2) !important;
|
||||
color: #b4c7e7 !important;
|
||||
}
|
||||
|
||||
:deep(.el-table-empty-text) {
|
||||
color: #b4c7e7 !important;
|
||||
:deep(.el-table *),
|
||||
:deep(.el-table__inner-wrapper),
|
||||
:deep(.el-table__body-wrapper),
|
||||
:deep(.el-table__header-wrapper),
|
||||
:deep(.el-table__body),
|
||||
:deep(.el-table__header),
|
||||
:deep(.el-table__body tr),
|
||||
:deep(.el-table__header tr) {
|
||||
background: transparent !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.content-box::-webkit-scrollbar {
|
||||
:deep(.el-table__header th),
|
||||
:deep(.el-table__body td) {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
border-bottom: 1px solid rgba(26, 80, 139, 0.3) !important;
|
||||
color: #b4c7e7 !important;
|
||||
}
|
||||
|
||||
:deep(.el-table__empty-block),
|
||||
:deep(.el-table__empty-text) {
|
||||
background: transparent !important;
|
||||
color: #b4c7e7 !important;
|
||||
}
|
||||
|
||||
.table-container::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
.content-box::-webkit-scrollbar-thumb {
|
||||
.table-container::-webkit-scrollbar-thumb {
|
||||
background: rgba(26, 80, 139, 0.5);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.content-box::-webkit-scrollbar-track {
|
||||
.table-container::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
:deep(.el-button--text) {
|
||||
color: #409EFF !important;
|
||||
}
|
||||
:deep(.el-button--text:hover) {
|
||||
color: #66b1ff !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,80 +1,53 @@
|
||||
<template>
|
||||
<div class="chart-card">
|
||||
<el-carousel
|
||||
height="100%"
|
||||
arrow="hover"
|
||||
trigger="click"
|
||||
>
|
||||
<el-carousel height="100%" arrow="hover" trigger="click" :autoplay="false">
|
||||
<el-carousel-item>
|
||||
<div class="carousel-item-inner">
|
||||
<div class="chart-card-header">
|
||||
<span class="chart-card-title">分类收入分析</span>
|
||||
</div>
|
||||
<div class="content-box">
|
||||
<div class="table-container">
|
||||
<div class="custom-loading" v-if="dataLoading">
|
||||
<el-icon class="loading-icon"><Loading /></el-icon>
|
||||
<span class="loading-text">加载中...</span>
|
||||
</div>
|
||||
<el-table
|
||||
:data="categoryIncomeData"
|
||||
:data="incomeData"
|
||||
stripe
|
||||
style="width: 100%; height: 100%"
|
||||
empty-text="暂无分类收入数据"
|
||||
:row-style="{
|
||||
background: 'transparent',
|
||||
border: 'none'
|
||||
}"
|
||||
:cell-style="{
|
||||
border: 'none',
|
||||
borderBottom: '1px solid rgba(26, 80, 139, 0.3)'
|
||||
}"
|
||||
:row-style="{ background: 'transparent' }"
|
||||
:cell-style="{ borderBottom: '1px solid rgba(26, 80, 139, 0.3)' }"
|
||||
:header-row-style="{ background: 'transparent' }"
|
||||
:header-cell-style="{ borderBottom: '1px solid rgba(26, 80, 139, 0.3)' }"
|
||||
>
|
||||
<el-table-column prop="categoryName" label="分类名称" width="120" />
|
||||
<el-table-column prop="index01" label="1月" width="65" />
|
||||
<el-table-column prop="index01" label="2月" width="65" />
|
||||
<el-table-column prop="index01" label="3月" width="65" />
|
||||
<el-table-column prop="index01" label="4月" width="65" />
|
||||
<el-table-column prop="index01" label="5月" width="65" />
|
||||
<el-table-column prop="index01" label="6月" width="65" />
|
||||
<el-table-column prop="index01" label="7月" width="65" />
|
||||
<el-table-column prop="index01" label="8月" width="65" />
|
||||
<el-table-column prop="index01" label="9月" width="65" />
|
||||
<el-table-column prop="index01" label="10月" width="65" />
|
||||
<el-table-column prop="index01" label="11月" width="65" />
|
||||
<el-table-column prop="index01" label="12月" width="65" />
|
||||
<el-table-column prop="xaxis" label="分类名称" width="120" show-overflow-tooltip />
|
||||
<el-table-column v-for="m in 12" :key="`in-${m}`" :prop="`index${String(m).padStart(2, '0')}`" :label="`${m}月`" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
|
||||
<el-carousel-item>
|
||||
<div class="carousel-item-inner">
|
||||
<div class="chart-card-header">
|
||||
<span class="chart-card-title">支出收入分析</span>
|
||||
<span class="chart-card-title">分类支出分析</span>
|
||||
</div>
|
||||
<div class="content-box">
|
||||
<div class="table-container">
|
||||
<div class="custom-loading" v-if="dataLoading">
|
||||
<el-icon class="loading-icon"><Loading /></el-icon>
|
||||
<span class="loading-text">加载中...</span>
|
||||
</div>
|
||||
<el-table
|
||||
:data="expenseIncomeData"
|
||||
:data="expenseData"
|
||||
stripe
|
||||
style="width: 100%; height: 100%"
|
||||
empty-text="暂无收支分析数据"
|
||||
:row-style="{
|
||||
background: 'transparent',
|
||||
border: 'none'
|
||||
}"
|
||||
:cell-style="{
|
||||
border: 'none',
|
||||
borderBottom: '1px solid rgba(26, 80, 139, 0.3)'
|
||||
}"
|
||||
empty-text="暂无分类支出数据"
|
||||
:row-style="{ background: 'transparent' }"
|
||||
:cell-style="{ borderBottom: '1px solid rgba(26, 80, 139, 0.3)' }"
|
||||
:header-row-style="{ background: 'transparent' }"
|
||||
:header-cell-style="{ borderBottom: '1px solid rgba(26, 80, 139, 0.3)' }"
|
||||
>
|
||||
<el-table-column prop="categoryName" label="分类名称" width="120" />
|
||||
<el-table-column prop="index01" label="1月" width="65" />
|
||||
<el-table-column prop="index01" label="2月" width="65" />
|
||||
<el-table-column prop="index01" label="3月" width="65" />
|
||||
<el-table-column prop="index01" label="4月" width="65" />
|
||||
<el-table-column prop="index01" label="5月" width="65" />
|
||||
<el-table-column prop="index01" label="6月" width="65" />
|
||||
<el-table-column prop="index01" label="7月" width="65" />
|
||||
<el-table-column prop="index01" label="8月" width="65" />
|
||||
<el-table-column prop="index01" label="9月" width="65" />
|
||||
<el-table-column prop="index01" label="10月" width="65" />
|
||||
<el-table-column prop="index01" label="11月" width="65" />
|
||||
<el-table-column prop="index01" label="12月" width="65" />
|
||||
<el-table-column prop="xaxis" label="分类名称" width="120" show-overflow-tooltip />
|
||||
<el-table-column v-for="m in 12" :key="`ex-${m}`" :prop="`index${String(m).padStart(2, '0')}`" :label="`${m}月`" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -84,180 +57,47 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElCarousel, ElCarouselItem, ElTable, ElTableColumn, ElButton } from 'element-plus'
|
||||
import { ref } from 'vue'
|
||||
import { ref, watch } from 'vue'
|
||||
import { getItemInfoList } from '@/api/bizApi'
|
||||
|
||||
const categoryIncomeData = ref([
|
||||
{
|
||||
categoryName: '产品销售',
|
||||
amount: '285.60',
|
||||
proportion: '68.5',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '268.40',
|
||||
growthRate: '+6.4'
|
||||
},
|
||||
{
|
||||
categoryName: '服务收入',
|
||||
amount: '85.20',
|
||||
proportion: '20.4',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '78.90',
|
||||
growthRate: '+7.9'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
},
|
||||
{
|
||||
categoryName: '其他收入',
|
||||
amount: '46.80',
|
||||
proportion: '11.1',
|
||||
month: '2026-03',
|
||||
lastMonthAmount: '42.50',
|
||||
growthRate: '+10.1'
|
||||
const props = defineProps({
|
||||
formParams: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
])
|
||||
})
|
||||
|
||||
// 模拟支出收入分析数据
|
||||
const expenseIncomeData = ref([
|
||||
{
|
||||
month: '2026-01',
|
||||
totalIncome: '428.50',
|
||||
totalExpense: '298.60',
|
||||
netProfit: '129.90',
|
||||
profitMargin: '30.3'
|
||||
},
|
||||
{
|
||||
month: '2026-02',
|
||||
totalIncome: '456.80',
|
||||
totalExpense: '312.40',
|
||||
netProfit: '144.40',
|
||||
profitMargin: '31.6'
|
||||
},
|
||||
{
|
||||
month: '2026-03',
|
||||
totalIncome: '417.60',
|
||||
totalExpense: '289.50',
|
||||
netProfit: '128.10',
|
||||
profitMargin: '30.7'
|
||||
const incomeData = ref([])
|
||||
const expenseData = ref([])
|
||||
const dataLoading = ref(false)
|
||||
|
||||
async function getIncomeList() {
|
||||
try {
|
||||
const res = await getItemInfoList({ ...props.formParams, itemCode: 'ERP_YEAR_CATE_Y001' })
|
||||
incomeData.value = res || []
|
||||
} catch (e) {
|
||||
incomeData.value = []
|
||||
console.error('数据加载失败:', e)
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
async function getExpenseList() {
|
||||
try {
|
||||
const res = await getItemInfoList({ ...props.formParams, itemCode: 'ERP_YEAR_CATE_Y002' })
|
||||
expenseData.value = res || []
|
||||
} catch (e) {
|
||||
expenseData.value = []
|
||||
console.error('数据加载失败:', e)
|
||||
}
|
||||
}
|
||||
|
||||
async function getList() {
|
||||
dataLoading.value = true
|
||||
await Promise.all([getIncomeList(), getExpenseList()])
|
||||
dataLoading.value = false
|
||||
}
|
||||
|
||||
watch(() => props.formParams, () => getList(), { deep: true, immediate: true })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -265,8 +105,8 @@ const expenseIncomeData = ref([
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/images/k2style.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/images/k2style.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
|
||||
.carousel-item-inner {
|
||||
@@ -274,6 +114,7 @@ const expenseIncomeData = ref([
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.chart-card-header {
|
||||
@@ -293,83 +134,109 @@ const expenseIncomeData = ref([
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.content-box {
|
||||
.table-container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
padding: 10px;
|
||||
overflow: auto;
|
||||
background-size: 100% 100%;
|
||||
background: transparent !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
:deep(.el-carousel) {
|
||||
height: 100% !important;
|
||||
.custom-loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.1) !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 999;
|
||||
}
|
||||
:deep(.el-carousel__container) {
|
||||
height: 100% !important;
|
||||
|
||||
.loading-icon {
|
||||
font-size: 24px;
|
||||
color: #409EFF;
|
||||
animation: loading-rotate 2s linear infinite;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 14px;
|
||||
color: #b4c7e7;
|
||||
}
|
||||
|
||||
@keyframes loading-rotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-carousel),
|
||||
:deep(.el-carousel__container),
|
||||
:deep(.el-carousel__item) {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
--el-table-text-color: #b4c7e7;
|
||||
--el-table-header-text-color: #b4c7e7;
|
||||
--el-table-row-hover-bg-color: rgba(26, 80, 139, 0.2);
|
||||
--el-table-border-color: transparent !important;
|
||||
--el-table-stripe-row-bg-color: rgba(0, 0, 0, 0.1);
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
:deep(.el-table__header-wrapper),
|
||||
:deep(.el-table__header),
|
||||
:deep(.el-table__header tr),
|
||||
:deep(.el-table__header th) {
|
||||
background-color: transparent !important;
|
||||
height: 100% !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
:deep(.el-table__header th) {
|
||||
:deep(.el-table) {
|
||||
--el-table-bg-color: transparent !important;
|
||||
--el-table-text-color: #b4c7e7 !important;
|
||||
--el-table-header-text-color: #b4c7e7 !important;
|
||||
--el-table-row-hover-bg-color: rgba(26, 80, 139, 0.2) !important;
|
||||
--el-table-border-color: transparent !important;
|
||||
--el-table-stripe-row-bg-color: rgba(0, 0, 0, 0.1) !important;
|
||||
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
border-bottom: 1px solid rgba(26, 80, 139, 0.3) !important;
|
||||
color: #b4c7e7 !important;
|
||||
font-weight: 600;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
:deep(.el-table td) {
|
||||
border: none !important;
|
||||
border-bottom: 1px solid rgba(26, 80, 139, 0.3) !important;
|
||||
background-color: transparent !important;
|
||||
color: #b4c7e7 !important;
|
||||
}
|
||||
|
||||
:deep(.el-table__row:hover > td) {
|
||||
background-color: rgba(26, 80, 139, 0.2) !important;
|
||||
color: #b4c7e7 !important;
|
||||
}
|
||||
|
||||
:deep(.el-table-empty-text) {
|
||||
color: #b4c7e7 !important;
|
||||
:deep(.el-table *),
|
||||
:deep(.el-table__inner-wrapper),
|
||||
:deep(.el-table__body-wrapper),
|
||||
:deep(.el-table__header-wrapper),
|
||||
:deep(.el-table__body),
|
||||
:deep(.el-table__header),
|
||||
:deep(.el-table__body tr),
|
||||
:deep(.el-table__header tr) {
|
||||
background: transparent !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.content-box::-webkit-scrollbar {
|
||||
:deep(.el-table__header th),
|
||||
:deep(.el-table__body td) {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
border-bottom: 1px solid rgba(26, 80, 139, 0.3) !important;
|
||||
color: #b4c7e7 !important;
|
||||
}
|
||||
|
||||
:deep(.el-table__empty-block),
|
||||
:deep(.el-table__empty-text) {
|
||||
background: transparent !important;
|
||||
color: #b4c7e7 !important;
|
||||
}
|
||||
|
||||
.table-container::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
.content-box::-webkit-scrollbar-thumb {
|
||||
.table-container::-webkit-scrollbar-thumb {
|
||||
background: rgba(26, 80, 139, 0.5);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.content-box::-webkit-scrollbar-track {
|
||||
.table-container::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
:deep(.el-button--text) {
|
||||
color: #409EFF !important;
|
||||
}
|
||||
:deep(.el-button--text:hover) {
|
||||
color: #66b1ff !important;
|
||||
}
|
||||
</style>
|
||||
@@ -54,43 +54,47 @@
|
||||
<el-button type="default" @click="handleReset" class="reset-btn">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table
|
||||
:data="tableData"
|
||||
stripe
|
||||
style="width: 100%"
|
||||
empty-text="暂无相关交易数据"
|
||||
class="data-table"
|
||||
v-loading="loading"
|
||||
:header-cell-style="{
|
||||
background: 'rgba(10, 30, 60, 0.8)',
|
||||
color: '#a0cfff',
|
||||
border: 'none',
|
||||
borderBottom: '1px solid rgba(64, 158, 255, 0.3)'
|
||||
}"
|
||||
:row-style="{
|
||||
background: 'transparent',
|
||||
color: '#a0cfff',
|
||||
border: 'none'
|
||||
}"
|
||||
:cell-style="{
|
||||
border: 'none',
|
||||
borderBottom: '1px solid rgba(64, 158, 255, 0.2)'
|
||||
}"
|
||||
>
|
||||
<el-table-column prop="flowId" label="交易编号" />
|
||||
<el-table-column prop="flowName" label="交易名称" />
|
||||
<el-table-column prop="categoryName" label="交易分类" />
|
||||
<el-table-column prop="tranType" label="交易类型" />
|
||||
<el-table-column prop="amount" label="交易金额">
|
||||
<template #default="scope">
|
||||
¥{{ scope.row.amount }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="交易备注" />
|
||||
<el-table-column prop="transactionTime" label="交易时间" />
|
||||
</el-table>
|
||||
|
||||
<div class="table-container">
|
||||
<div class="custom-loading" v-if="loading">
|
||||
<el-icon class="loading-icon"><Loading /></el-icon>
|
||||
<span class="loading-text">加载中...</span>
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
stripe
|
||||
style="width: 100%"
|
||||
empty-text="暂无相关交易数据"
|
||||
class="data-table"
|
||||
:header-row-style="{ background: 'transparent' }"
|
||||
:header-cell-style="{
|
||||
background: 'transparent',
|
||||
color: '#a0cfff',
|
||||
border: 'none',
|
||||
borderBottom: '1px solid rgba(64, 158, 255, 0.3)'
|
||||
}"
|
||||
:row-style="{
|
||||
background: 'transparent',
|
||||
color: '#a0cfff',
|
||||
border: 'none'
|
||||
}"
|
||||
:cell-style="{
|
||||
border: 'none',
|
||||
borderBottom: '1px solid rgba(64, 158, 255, 0.2)'
|
||||
}"
|
||||
>
|
||||
<el-table-column prop="flowId" label="交易编号" />
|
||||
<el-table-column prop="flowName" label="交易名称" />
|
||||
<el-table-column prop="categoryName" label="交易分类" />
|
||||
<el-table-column prop="tranType" label="交易类型" />
|
||||
<el-table-column prop="amount" label="交易金额">
|
||||
<template #default="scope">
|
||||
¥{{ scope.row.amount }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="交易备注" />
|
||||
<el-table-column prop="transactionTime" label="交易时间" />
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="pagination-wrapper">
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage"
|
||||
@@ -164,11 +168,11 @@ const handleCurrentChange = (val) => {
|
||||
|
||||
async function getTranTypes(){
|
||||
try {
|
||||
const params = {
|
||||
categoryType: searchForm.transactionType,
|
||||
}
|
||||
const res = await getErpCategoryList(params);
|
||||
tranTypes.value = res || [];
|
||||
const params = {
|
||||
categoryType: searchForm.transactionType,
|
||||
}
|
||||
const res = await getErpCategoryList(params);
|
||||
tranTypes.value = res || [];
|
||||
} catch (error) {
|
||||
console.error('获取数据失败:', error);
|
||||
tranTypes.value = [];
|
||||
@@ -176,11 +180,12 @@ async function getTranTypes(){
|
||||
}
|
||||
|
||||
async function getList() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const reqParmas = {
|
||||
... searchForm,
|
||||
pageNum: currentPage.value, // 当前页
|
||||
pageSize: pageSize.value, // 每页条数
|
||||
pageNum: currentPage.value,
|
||||
pageSize: pageSize.value,
|
||||
accountId: props.accountData.rawData?.accountId || '',
|
||||
}
|
||||
const res = await getErpTransactionFlowList(reqParmas);
|
||||
@@ -189,6 +194,8 @@ async function getList() {
|
||||
} catch (error) {
|
||||
console.error('获取数据失败:', error);
|
||||
tableData.value = [];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -299,13 +306,56 @@ onMounted(async () => {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
.table-container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
z-index: 10001;
|
||||
}
|
||||
|
||||
.custom-loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.1) !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.loading-icon {
|
||||
font-size: 24px;
|
||||
color: #409EFF;
|
||||
animation: loading-rotate 2s linear infinite;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 14px;
|
||||
color: #b4c7e7;
|
||||
}
|
||||
|
||||
@keyframes loading-rotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.pagination-wrapper {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
@@ -378,7 +428,7 @@ onMounted(async () => {
|
||||
:deep(.el-table th) {
|
||||
border: none !important;
|
||||
border-bottom: 1px solid rgba(64, 158, 255, 0.3) !important;
|
||||
background-color: rgba(10, 30, 60, 0.8) !important;
|
||||
background-color: transparent !important;
|
||||
color: #a0cfff !important;
|
||||
}
|
||||
:deep(.el-table td) {
|
||||
@@ -430,36 +480,28 @@ onMounted(async () => {
|
||||
}
|
||||
|
||||
:deep(.el-loading-mask) {
|
||||
background-color: rgba(10, 30, 60, 0.8) !important;
|
||||
z-index: 10002;
|
||||
}
|
||||
:deep(.el-table__loading-wrapper) {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
:deep(.el-loading-spinner .path) {
|
||||
stroke: #409EFF !important;
|
||||
}
|
||||
:deep(.el-loading-text) {
|
||||
color: #a0cfff !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.detail-body::-webkit-scrollbar,
|
||||
:deep(.el-table__body-wrapper)::-webkit-scrollbar {
|
||||
:deep(.el-table__body-wrapper)::-webkit-scrollbar,
|
||||
.table-container::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
.detail-body::-webkit-scrollbar-track {
|
||||
.detail-body::-webkit-scrollbar-track,
|
||||
.table-container::-webkit-scrollbar-track {
|
||||
background: rgba(10, 30, 60, 0.1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.detail-body::-webkit-scrollbar-thumb {
|
||||
.detail-body::-webkit-scrollbar-thumb,
|
||||
.table-container::-webkit-scrollbar-thumb {
|
||||
background: rgba(64, 158, 255, 0.5);
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
|
||||
.theme-select-popper {
|
||||
background-color: rgba(10, 30, 60, 0.95) !important;
|
||||
border: 1px solid #409EFF !important;
|
||||
|
||||
Reference in New Issue
Block a user