From ad04cff9170ea04de6484f8a58a47b575fbdd97f Mon Sep 17 00:00:00 2001 From: tcy <1193318383@qq.com> Date: Fri, 22 Aug 2025 16:37:14 +0800 Subject: [PATCH] =?UTF-8?q?feat(largeScreen):=20=E5=A4=A7=E5=B1=8F?= =?UTF-8?q?=E5=B1=95=E7=A4=BA=E5=8A=9F=E8=83=BD=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增 RevenueContractCard 组件，用于展示收入、支出等合同数据 - 实现 bottomboxconpoent 组件的通用化，支持自定义标题、数值等 - 在 centerPage 中集成 RevenueContractCard 组件，展示大屏数据 - 更新 rightPage 组件，添加实际数据请求和展示 - 优化 optionList 中的图表配置，提高图表可读性 --- src/api/largeScreen/index.js | 22 +++++ .../components/RevenueContractCard.vue | 51 +++++------ .../components/bottomboxconpoent.vue | 86 ++++++++++++------- .../largeScreen/components/centerPage.vue | 25 ++++-- .../largeScreen/components/optionList.ts | 6 +- .../largeScreen/components/rightPage.vue | 30 ++++--- 6 files changed, 144 insertions(+), 76 deletions(-) create mode 100644 src/api/largeScreen/index.js diff --git a/src/api/largeScreen/index.js b/src/api/largeScreen/index.js new file mode 100644 index 0000000..a108295 --- /dev/null +++ b/src/api/largeScreen/index.js @@ -0,0 +1,22 @@ +import request from '@/utils/request'; +// 合同金额 +export const totalAmount = () => { + return request({ + url: '/money/big/screen/totalAmount', + method: 'get', + }); +}; +// 资金KPI +export const monthMoney = () => { + return request({ + url: '/money/big/screen/monthMoney', + method: 'get', + }); +}; +// 现金流 +export const monthCash = () => { + return request({ + url: '/money/big/screen/monthCash', + method: 'get', + }); +}; diff --git a/src/views/largeScreen/components/RevenueContractCard.vue b/src/views/largeScreen/components/RevenueContractCard.vue index 14154dc..2d52c2a 100644 --- a/src/views/largeScreen/components/RevenueContractCard.vue +++ b/src/views/largeScreen/components/RevenueContractCard.vue @@ -2,28 +2,21 @@
{{ title }}
- +
- {{ formattedValue }} + {{ props.value }} {{ unit }}
- + -
+
- + {{ trendText }}
- 徽章图标 + 徽章图标
@@ -78,6 +71,10 @@ const props = defineProps({ customStyles: { type: Object, default: () => ({}) + }, + showIcon: { + type: Boolean, + default: false } }); @@ -103,22 +100,26 @@ const trendText = computed(() => { display: flex; flex-direction: column; justify-content: space-between; - padding: 20px; + padding: 35px 10px; box-sizing: border-box; border: 1px solid rgba(29, 214, 255, 0.1); border-radius: 4px; // 增加轻微圆角，提升视觉效果 - + text-align: center; + + &__title { font-size: 14px; color: #8FABBF; line-height: 20px; } - + &__value-container { - display: flex; + // display: flex; align-items: baseline; + // align-items: center; + // flex-direction: column; } - + &__value { font-size: 24px; color: #fff; @@ -126,34 +127,34 @@ const trendText = computed(() => { margin-right: 5px; font-weight: bold; } - + &__unit { color: #8FABBF; font-size: 14px; } - + &__footer { display: flex; justify-content: space-between; align-items: center; } - + &__trend { display: flex; align-items: center; } - + &__trend-icon { width: 12px; height: 12px; margin-right: 4px; } - + &__trend-text { font-size: 14px; color: #8FABBF; } - + &__badge { width: 40px; height: 40px; diff --git a/src/views/largeScreen/components/bottomboxconpoent.vue b/src/views/largeScreen/components/bottomboxconpoent.vue index 6735331..7c2b9e7 100644 --- a/src/views/largeScreen/components/bottomboxconpoent.vue +++ b/src/views/largeScreen/components/bottomboxconpoent.vue @@ -1,45 +1,65 @@ \ No newline at end of file diff --git a/src/views/largeScreen/components/centerPage.vue b/src/views/largeScreen/components/centerPage.vue index aee49f0..c70df28 100644 --- a/src/views/largeScreen/components/centerPage.vue +++ b/src/views/largeScreen/components/centerPage.vue @@ -16,14 +16,19 @@
--> - + badgeIcon="top4" period="较上月" /> --> + + + + +
@@ -44,7 +49,7 @@ 成本率
--> - + @@ -59,7 +64,16 @@ import * as echarts from 'echarts'; import china from '@/assets/china.json'; import RevenueContractCard from './RevenueContractCard.vue'; import bottomboxconpoent from './bottomboxconpoent.vue'; -const data = ref({}); +import { totalAmount } from "@/api/largeScreen/index.js" +const bigDataObj = ref({}); + +const getTotalAmount = async () => { + const { data: { incomeTotalAmount, expensesTotalAmount, profitAmount, changeAmount } } = await totalAmount() + bigDataObj.value.incomeTotalAmount = incomeTotalAmount || 0; + bigDataObj.value.expensesTotalAmount = expensesTotalAmount || 0; + bigDataObj.value.profitAmount = profitAmount || 0; + bigDataObj.value.changeAmount = changeAmount || 0; +} // 地图容器引用 const mapRef = ref(null); @@ -181,6 +195,7 @@ const initEcharts = () => { // 组件挂载时初始化 onMounted(() => { + getTotalAmount() // 确保DOM渲染完成 nextTick(() => { initEcharts(); @@ -223,6 +238,6 @@ onUnmounted(() => { height: 60%; } - + } diff --git a/src/views/largeScreen/components/optionList.ts b/src/views/largeScreen/components/optionList.ts index 822fd94..e4b9b01 100644 --- a/src/views/largeScreen/components/optionList.ts +++ b/src/views/largeScreen/components/optionList.ts @@ -862,7 +862,7 @@ export const getBarOptions = (data: any) => { // 收支合同分析 export const getBarOptions2 = (data: any) => { const option = { - color:['#FF932A', '#678FE6', '#1DD6FF', '#00E396'], + color: ['#FF932A', '#678FE6', '#1DD6FF', '#00E396'], title: { text: '数量（个）', subtext: '16', @@ -872,7 +872,7 @@ export const getBarOptions2 = (data: any) => { color: '#9DADB7', fontSize: 16 }, - subtextStyle:{ + subtextStyle: { color: '#707070', fontSize: 32, fontWeight: 'bold' @@ -907,7 +907,7 @@ export const getBarOptions2 = (data: any) => { show: false }, data: [ - { value: 3, name: '100万一下' }, + { value: 3, name: '100万以下' }, { value: 4, name: '100-500万' }, { value: 5, name: '500-1000万' }, { value: 4, name: '1000万以上' }, diff --git a/src/views/largeScreen/components/rightPage.vue b/src/views/largeScreen/components/rightPage.vue index bcde746..8081940 100644 --- a/src/views/largeScreen/components/rightPage.vue +++ b/src/views/largeScreen/components/rightPage.vue @@ -45,38 +45,48 @@ import TitleComponent from './TitleComponent.vue'; import EchartBox from '@/components/EchartBox/index.vue'; import { getLineOption, getBarOptions } from './optionList'; import ProgressComponent from './ProgressComponent.vue'; +import { monthMoney, monthCash } from '@/api/largeScreen'; const lineOption = ref(); const barOption = ref(); -const getCapitalData = (data?: any) => { +const getCapitalData = async () => { + const { data } = await monthMoney() + const month = data.map((item: any) => item.month); + const income = data.map((item: any) => item.incomeAmount); + const expenses = data.map((item: any) => item.expensesAmount); + const profit = data.map((item: any) => item.profitAmount); // const xData = data.map((item) => item.time); // const yData = data.map((item) => item.content); const lineData = { - xLabel: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], + xLabel: month, line1: [ - [100, 200, 150, 300, 250, 350, 400, 350, 450, 500, 400, 550], - [220, 250, 230, 280, 270, 300, 350, 320, 380, 400, 450, 500], - [300, 350, 320, 380, 400, 450, 500, 480, 520, 550, 600, 650] + income, + expenses, + profit ] // line2: ['20', '50', '12', '65', '30', '60'] }; lineOption.value = getLineOption(lineData); }; -const getTurnoverList = (data?: any) => { +const getTurnoverList = async () => { // const xData = data.map((item) => item.time); // const yData = data.map((item) => { // // 先将content转换为数字，再调用toFixed // const num = Number(item.content); // return isNaN(num) ? 0 : Number(num.toFixed(2)); // }); - + const { data } = await monthCash() + const month = data.map((item: any) => item.month); + const income = data.map((item: any) => item.incomeAmount); + const expenses = data.map((item: any) => item.expensesAmount); + // const profit = data.map((item: any) => item.profitAmount); const barData = { - name: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], + name: month, value: [ - [2, 5, 15, 30, 25, 35, 40, 35, 45, 50, 40, 55], - [4, 3, 6, 11, 15, 22, 30, 14, 48, 22, 25, 60] + income, + expenses ] }; barOption.value = getBarOptions(barData);