From c1512c5a34aab0619a68d06e4b6e7460d51a9e3d Mon Sep 17 00:00:00 2001 From: tcy <1193318383@qq.com> Date: Fri, 22 Aug 2025 11:11:19 +0800 Subject: [PATCH 01/16] =?UTF-8?q?feat(ctr):=20=E4=BC=98=E5=8C=96=E5=90=88?= =?UTF-8?q?=E5=90=8C=E4=BB=98=E6=AC=BE=E6=AF=94=E4=BE=8B=E8=BE=93=E5=85=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在收入合同列表中添加预付款比例、尾款比例、质保金比例和付款比例列 - 在合同表单中将预付款比例、尾款比例和质保金比例的输入框改为专用的数字输入框 - 新增付款比例计算逻辑，确保四项比例之和为 100% - 优化表单验证逻辑，确保付款比例之和必须等于 100% - 修复了一些与输入格式相关的潜在问题 --- src/views/ctr/incomeContract/index.vue | 4 +++ src/views/ctr/index.vue | 37 +++++++++++++++++--------- 2 files changed, 29 insertions(+), 12 deletions(-) diff --git a/src/views/ctr/incomeContract/index.vue b/src/views/ctr/incomeContract/index.vue index c9a4ad9..b222822 100644 --- a/src/views/ctr/incomeContract/index.vue +++ b/src/views/ctr/incomeContract/index.vue @@ -64,6 +64,10 @@ + + + + @@ -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); From 678f10c96b9ad0b5fc3ba1eb1499b6aff057c388 Mon Sep 17 00:00:00 2001 From: tcy <1193318383@qq.com> Date: Fri, 22 Aug 2025 17:18:05 +0800 Subject: [PATCH 03/16] =?UTF-8?q?feat(largeScreen):=20=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E7=8E=B0=E9=87=91=E6=B5=81=E6=80=BB=E5=92=8C=E6=8E=A5=E5=8F=A3?= =?UTF-8?q?=E5=B9=B6=E6=9B=B4=E6=96=B0=E5=8F=B3=E4=BE=A7=E9=9D=A2=E6=9D=BF?= =?UTF-8?q?=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在 api/largeScreen/index.js 中添加 cashTotal 接口 - 在 rightPage.vue 中引入 cashTotal 接口并获取数据 - 更新 rightPage.vue 中的现金流数据显示，使用从接口获取的数据 --- src/api/largeScreen/index.js | 8 ++++++++ src/views/largeScreen/components/rightPage.vue | 18 +++++++++++------- src/views/largeScreen/index.vue | 2 ++ 3 files changed, 21 insertions(+), 7 deletions(-) diff --git a/src/api/largeScreen/index.js b/src/api/largeScreen/index.js index a108295..69bd7e8 100644 --- a/src/api/largeScreen/index.js +++ b/src/api/largeScreen/index.js @@ -20,3 +20,11 @@ export const monthCash = () => { method: 'get', }); }; +// 现金流总和 + +export const cashTotal = () => { + return request({ + url: '/money/big/screen/cashTotal', + method: 'get', + }); +}; \ No newline at end of file diff --git a/src/views/largeScreen/components/rightPage.vue b/src/views/largeScreen/components/rightPage.vue index 8081940..71725c9 100644 --- a/src/views/largeScreen/components/rightPage.vue +++ b/src/views/largeScreen/components/rightPage.vue @@ -11,17 +11,17 @@
现金流入
-
1000000
+
{{ bigDataObj.incomeCash }}
万元
现金流出
-
1000000
+
{{ bigDataObj.expensesCash }}
万元
净现金流
-
1000000
+
{{ bigDataObj.profitCash }}
万元
@@ -45,10 +45,11 @@ 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'; +import { monthMoney, monthCash, cashTotal } from '@/api/largeScreen'; const lineOption = ref(); const barOption = ref(); +const bigDataObj = ref({}); const getCapitalData = async () => { const { data } = await monthMoney() @@ -56,8 +57,7 @@ const getCapitalData = async () => { 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: month, line1: [ @@ -81,7 +81,6 @@ const getTurnoverList = async () => { 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: month, value: [ @@ -91,9 +90,14 @@ const getTurnoverList = async () => { }; barOption.value = getBarOptions(barData); }; +const getTotalAmonunt = async () => { + const { data } = await cashTotal() + bigDataObj.value = data +}; onMounted(() => { getCapitalData(); getTurnoverList(); + getTotalAmonunt(); }); //资金KPI diff --git a/src/views/largeScreen/index.vue b/src/views/largeScreen/index.vue index 8ce47fd..8c47968 100644 --- a/src/views/largeScreen/index.vue +++ b/src/views/largeScreen/index.vue @@ -21,6 +21,7 @@ import leftPage from './components/leftPage.vue'; import centerPage from './components/centerPage.vue'; import rightPage from './components/rightPage.vue'; // import '@/assets/styles/element.scss'; + \ No newline at end of file + diff --git a/src/views/largeScreen/components/RevenueContractCard.vue b/src/views/largeScreen/components/RevenueContractCard.vue index 14154dc..5f194d7 100644 --- a/src/views/largeScreen/components/RevenueContractCard.vue +++ b/src/views/largeScreen/components/RevenueContractCard.vue @@ -2,29 +2,12 @@
{{ title }}
- +
- {{ formattedValue }} + {{ props.value }} {{ unit }}
- - -
-
- - {{ trendText }} -
- 徽章图标 -
@@ -107,18 +90,18 @@ const trendText = computed(() => { box-sizing: border-box; border: 1px solid rgba(29, 214, 255, 0.1); border-radius: 4px; // 增加轻微圆角，提升视觉效果 - + &__title { font-size: 14px; - color: #8FABBF; + color: #8fabbf; line-height: 20px; } - + &__value-container { display: flex; align-items: baseline; } - + &__value { font-size: 24px; color: #fff; @@ -126,34 +109,34 @@ const trendText = computed(() => { margin-right: 5px; font-weight: bold; } - + &__unit { - color: #8FABBF; + 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; + 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..661c26c 100644 --- a/src/views/largeScreen/components/bottomboxconpoent.vue +++ b/src/views/largeScreen/components/bottomboxconpoent.vue @@ -1,45 +1,158 @@ \ No newline at end of file +.bottom_box_text { + color: rgba(143, 171, 191, 1); + font-size: 14px; + line-height: 20px; + margin-bottom: 5px; +} + +.bottom_box_bottom { + width: 100%; + height: 8px; + margin: 5px 0; +} + +.cost-item { + color: #fff; + font-size: 14px; + line-height: 26px; + display: flex; + justify-content: space-between; +} + +.cost-label { + color: rgba(143, 171, 191, 1); +} + +.cost-value { + font-weight: 500; + color: #fff; +} + diff --git a/src/views/largeScreen/components/centerPage.vue b/src/views/largeScreen/components/centerPage.vue index aee49f0..c0ba314 100644 --- a/src/views/largeScreen/components/centerPage.vue +++ b/src/views/largeScreen/components/centerPage.vue @@ -1,146 +1,160 @@ diff --git a/src/views/largeScreen/components/leftPage.vue b/src/views/largeScreen/components/leftPage.vue index 683c9a3..325df42 100644 --- a/src/views/largeScreen/components/leftPage.vue +++ b/src/views/largeScreen/components/leftPage.vue @@ -1,56 +1,307 @@ @@ -58,13 +309,20 @@ onMounted(() => { .leftPage { width: 100%; height: 100%; - .kpi_box{ + .kpi_box { margin-bottom: 10px; } - .contract_box{ + .contract_box { height: 35vh; + display: flex; + flex-direction: column; // 按钮区和图表区垂直排列 } - .kpi_box,.contract_box { + .chart-container { + flex: 1; // 占满剩余高度，确保图表容器足够大 + min-height: 200px; // 最小高度，避免容器过矮 + } + .kpi_box, + .contract_box { padding: 10px; box-sizing: border-box; border: 1px solid rgba(29, 214, 255, 0.3); diff --git a/src/views/largeScreen/index.vue b/src/views/largeScreen/index.vue index 8ce47fd..13d939e 100644 --- a/src/views/largeScreen/index.vue +++ b/src/views/largeScreen/index.vue @@ -1,4 +1,4 @@ -