大屏页面初始化
This commit is contained in:
375
screen-vue/src/views/screen/Erp/components/ChartV10.vue
Normal file
375
screen-vue/src/views/screen/Erp/components/ChartV10.vue
Normal 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
375
screen-vue/src/views/screen/Erp/components/ChartV11.vue
Normal 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>
|
||||||
@@ -2,7 +2,6 @@ package com.mini.mybigscreen.biz.controller;
|
|||||||
|
|
||||||
import cn.hutool.core.util.StrUtil;
|
import cn.hutool.core.util.StrUtil;
|
||||||
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
|
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
|
||||||
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
|
|
||||||
import com.mini.mybigscreen.Model.Message;
|
import com.mini.mybigscreen.Model.Message;
|
||||||
import com.mini.mybigscreen.Model.PageResult;
|
import com.mini.mybigscreen.Model.PageResult;
|
||||||
import com.mini.mybigscreen.Model.Result;
|
import com.mini.mybigscreen.Model.Result;
|
||||||
@@ -47,7 +46,6 @@ public class ErpTransactionFlowController {
|
|||||||
return Result.success(result);
|
return Result.success(result);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
public Result<Message> save() {
|
public Result<Message> save() {
|
||||||
return Result.success(new Message("数据新增成功", 200));
|
return Result.success(new Message("数据新增成功", 200));
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user