244 lines
6.5 KiB
Vue
244 lines
6.5 KiB
Vue
<template>
|
|
<div class="chart-card">
|
|
<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="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="incomeData"
|
|
stripe
|
|
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="xaxis" label="分类名称" width="120" fixed="left" 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-column prop="indexSum" label="合计" width="120" fixed="right" />
|
|
</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>
|
|
</div>
|
|
<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="expenseData"
|
|
stripe
|
|
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="xaxis" label="分类名称" width="120" fixed="left" 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-column prop="indexSum" label="合计" width="120" fixed="right" />
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch } from 'vue'
|
|
import { getItemInfoList } from '@/api/bizApi'
|
|
|
|
const props = defineProps({
|
|
formParams: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
})
|
|
|
|
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>
|
|
.chart-card {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background: rgba(0, 0, 0, 0.1) url("@/assets/images/k2style.png") no-repeat !important;
|
|
background-size: 100% 100% !important;
|
|
}
|
|
|
|
.carousel-item-inner {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.chart-card-header {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
padding: 0 16px;
|
|
background-color: rgba(26, 80, 139, 0.5);
|
|
border-bottom: 1px solid #1a508b;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.chart-card-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #409EFF;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.table-container {
|
|
flex: 1;
|
|
width: 100%;
|
|
height: calc(100% - 40px);
|
|
padding: 10px;
|
|
overflow: auto;
|
|
background: transparent !important;
|
|
position: relative;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|
|
|
|
:deep(.el-carousel),
|
|
:deep(.el-carousel__container),
|
|
:deep(.el-carousel__item) {
|
|
height: 100% !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
: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;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
: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;
|
|
}
|
|
|
|
: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;
|
|
}
|
|
.table-container::-webkit-scrollbar-thumb {
|
|
background: rgba(26, 80, 139, 0.5);
|
|
border-radius: 3px;
|
|
}
|
|
.table-container::-webkit-scrollbar-track {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
}
|
|
</style> |