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

大屏项目初始化

Browse Source
This commit is contained in:
gaoxq
2026-03-12 20:53:15 +08:00
parent 7da3176fcb
commit a930c3e17c
3 changed files with 397 additions and 621 deletions
Download Patch File Download Diff File Expand all files Collapse all files

425
screen-vue/src/views/screen/Erp/components/ChartV11.vue
View File

@@ -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>