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 18:07:50 +08:00
parent 1478673678
commit 7da3176fcb
3 changed files with 750 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

375
screen-vue/src/views/screen/Erp/components/ChartV10.vue Normal file
View File

@@ -0,0 +1,375 @@
<template>
<div class="chart-card">
<el-carousel
height="100%"
arrow="hover"
trigger="click"
>
<el-carousel-item>
<div class="carousel-item-inner">
<div class="chart-card-header">
<span class="chart-card-title">分类收入分析</span>
</div>
<div class="content-box">
<el-table
:data="categoryIncomeData"
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)'
}"
>
<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>
</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="content-box">
<el-table
:data="expenseIncomeData"
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)'
}"
>
<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>
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script setup>
import { ElCarousel, ElCarouselItem, ElTable, ElTableColumn, ElButton } from 'element-plus'
import { ref } from 'vue'
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 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'
}
])
</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;
background-size: 100% 100%;
}
.carousel-item-inner {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.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;
}
.content-box {
flex: 1;
width: 100%;
height: calc(100% - 40px);
padding: 10px;
overflow: auto;
background-size: 100% 100%;
}
:deep(.el-carousel) {
height: 100% !important;
}
:deep(.el-carousel__container) {
height: 100% !important;
}
: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;
background: transparent !important;
}
:deep(.el-table__header th) {
border: none !important;
border-bottom: 1px solid rgba(26, 80, 139, 0.3) !important;
color: #b4c7e7 !important;
font-weight: 600;
}
: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;
background-color: transparent !important;
}
.content-box::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.content-box::-webkit-scrollbar-thumb {
background: rgba(26, 80, 139, 0.5);
border-radius: 3px;
}
.content-box::-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>

375
screen-vue/src/views/screen/Erp/components/ChartV11.vue Normal file
View File

@@ -0,0 +1,375 @@
<template>
<div class="chart-card">
<el-carousel
height="100%"
arrow="hover"
trigger="click"
>
<el-carousel-item>
<div class="carousel-item-inner">
<div class="chart-card-header">
<span class="chart-card-title">分类收入分析</span>
</div>
<div class="content-box">
<el-table
:data="categoryIncomeData"
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)'
}"
>
<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>
</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="content-box">
<el-table
:data="expenseIncomeData"
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)'
}"
>
<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>
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script setup>
import { ElCarousel, ElCarouselItem, ElTable, ElTableColumn, ElButton } from 'element-plus'
import { ref } from 'vue'
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 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'
}
])
</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;
background-size: 100% 100%;
}
.carousel-item-inner {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.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;
}
.content-box {
flex: 1;
width: 100%;
height: calc(100% - 40px);
padding: 10px;
overflow: auto;
background-size: 100% 100%;
}
:deep(.el-carousel) {
height: 100% !important;
}
:deep(.el-carousel__container) {
height: 100% !important;
}
: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;
background: transparent !important;
}
:deep(.el-table__header th) {
border: none !important;
border-bottom: 1px solid rgba(26, 80, 139, 0.3) !important;
color: #b4c7e7 !important;
font-weight: 600;
}
: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;
background-color: transparent !important;
}
.content-box::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.content-box::-webkit-scrollbar-thumb {
background: rgba(26, 80, 139, 0.5);
border-radius: 3px;
}
.content-box::-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>