From 75784e6ec3f6546650ee92ad69fdd270d1ebd0a7 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期一, 26 五月 2025 13:48:59 +0800
Subject: [PATCH] 1.首页开发联调
---
src/views/index.vue | 298 ++++++++++++++++++++++++++++++++++++++----
src/components/Echarts/echarts.vue | 61 ++++----
src/api/viewIndex.js | 45 ++++++
3 files changed, 348 insertions(+), 56 deletions(-)
diff --git a/src/api/viewIndex.js b/src/api/viewIndex.js
new file mode 100644
index 0000000..8ac39e4
--- /dev/null
+++ b/src/api/viewIndex.js
@@ -0,0 +1,45 @@
+// 棣栭〉鎺ュ彛
+import request from '@/utils/request'
+
+// 鏈湀鍚堝悓閲戦
+export const getContractAmount = () => {
+ return request({
+ url: '/sales/ledger/getContractAmount',
+ method: 'get'
+ })
+}
+// 鏈湀寮�绁ㄩ噾棰�
+export const getInvoiceAmount = () => {
+ return request({
+ url: '/invoiceLedger/getInvoiceAmount',
+ method: 'get'
+ })
+}
+// 鏈湀鍥炴閲戦
+export const getReceiptAmount = () => {
+ return request({
+ url: '/receiptPayment/getReceiptAmount',
+ method: 'get'
+ })
+}
+// 瀹㈡埛鍚堝悓閲戦TOP5缁熻
+export const getTopFiveList = () => {
+ return request({
+ url: 'sales/ledger/getTopFiveList',
+ method: 'get'
+ })
+}
+// 鍥炴楗肩姸鍥�
+export const getAmountMouth = () => {
+ return request({
+ url: 'receiptPayment/getAmountMouth',
+ method: 'get'
+ })
+}
+// 鍥炴楗肩姸鍥�
+export const paymentMonthList = () => {
+ return request({
+ url: '/purchase/paymentRegistration/paymentMonthList',
+ method: 'get'
+ })
+}
\ No newline at end of file
diff --git a/src/components/Echarts/echarts.vue b/src/components/Echarts/echarts.vue
index 15e74d8..4601e41 100644
--- a/src/components/Echarts/echarts.vue
+++ b/src/components/Echarts/echarts.vue
@@ -51,15 +51,15 @@
},
lineColors: {
type: Array,
- default: () => ['#A4EEDA', '#86C1F4', '#91A0FC', '#F6C18B', '#F09595']
+ default: () => []
},
barColors: {
type: Array,
- default: () => ['#A4EEDA', '#86C1F4', '#91A0FC', '#F6C18B', '#F09595']
+ default: () => []
},
pieColors: {
type: Array,
- default: () => ['#A4EEDA', '#86C1F4', '#91A0FC', '#F6C18B', '#F09595']
+ default: () => []
},
loadingOption: {
type: Object,
@@ -73,30 +73,34 @@
}
})
+import { watch } from 'vue'
+
// Refs
const chartRef = ref(null)
let chartInstance = null
// Methods
function generateChart(option) {
- if (option.series && option.series.length > 0) {
- option.series.forEach((s, index) => {
- if (s.type === 'line') {
- s.itemStyle = {
- color: props.lineColors[index] || props.lineColors[0]
- }
- s.lineStyle = {
- color: props.lineColors[index] || props.lineColors[0]
- }
- } else if (s.type === 'bar') {
- s.itemStyle = {
- color: props.barColors[index] || props.barColors[0]
- }
- }
- })
- }
+ const copiedOption = JSON.parse(JSON.stringify(option)) // 鉁� 娣辨嫹璐�
- chartInstance.setOption(option)
+ // if (copiedOption.series && copiedOption.series.length > 0) {
+ // copiedOption.series.forEach((s, index) => {
+ // if (s.type === 'line') {
+ // s.itemStyle = {
+ // color: props.lineColors[index] || props.lineColors[0]
+ // }
+ // s.lineStyle = {
+ // color: props.lineColors[index] || props.lineColors[0]
+ // }
+ // } else if (s.type === 'bar') {
+ // s.itemStyle = {
+ // color: props.barColors[index] || props.barColors[0]
+ // }
+ // }
+ // })
+ // }
+
+ chartInstance.setOption(copiedOption)
}
function renderChart() {
@@ -136,12 +140,13 @@
})
// Watch all reactive props that affect the chart
-watchEffect(() => {
- // 閬垮厤鍦� mounted 鍓嶈Е鍙�
- if (chartInstance) {
- renderChart()
- }
-}, {
- flush: 'post'
-})
+watch(
+ () => [props.xAxis, props.series],
+ () => {
+ if (chartInstance) {
+ renderChart()
+ }
+ },
+ { deep: true, immediate: true }
+)
</script>
\ No newline at end of file
diff --git a/src/views/index.vue b/src/views/index.vue
index 4e8a971..4f5b35c 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,6 +1,6 @@
<template>
<div class="app-container home">
- <div>
+ <div style="display: flex;">
<div>
<div class="card-top-left">
<div class="title">
@@ -9,21 +9,21 @@
<div class="card-group">
<div class="info-card">
<div class="info-message">
- <div class="info-number">6789,000</div>
+ <div class="info-number">{{contractAmount}}</div>
<div class="info-title">鍚堝悓閲戦(鍏�)</div>
</div>
<img src="@/assets/images/icon1.png" alt="" style="width: 63px;height: 63px">
</div>
<div class="info-card1">
<div class="info-message">
- <div class="info-number">6789,000</div>
+ <div class="info-number">{{invoiceAmount}}</div>
<div class="info-title">寮�绁ㄩ噾棰�(鍏�)</div>
</div>
<img src="@/assets/images/icon2.png" alt="" style="width: 63px;height: 63px">
</div>
<div class="info-card2">
<div class="info-message">
- <div class="info-number">6789,000</div>
+ <div class="info-number">{{receiptAmount}}</div>
<div class="info-title">鍥炴閲戦(鍏�)</div>
</div>
<img src="@/assets/images/icon%203.png" alt="" style="width: 63px;height: 63px">
@@ -46,12 +46,12 @@
</div>
<div class="info-message2">
<div class="info-message1">
- <div class="pie-title">鏈湀鍥炴鏁伴噺</div>
- <div class="pie-info"><span class="pie-number">8,000</span>鍏� <span class="pie-number">15.0</span>%</div>
+ <div class="pie-title">鏈湀鍥炴閲戦</div>
+ <div class="pie-info"><span class="pie-number">{{receiveAmount}}</span>鍏� <span class="pie-number">{{receiveAmountPercentage}}</span>%</div>
</div>
<div class="info-message1">
<div class="pie-title">搴旀敹娆鹃噾棰�</div>
- <div class="pie-info"><span class="pie-number">8,000</span>鍏� <span class="pie-number">15.0</span>%</div>
+ <div class="pie-info"><span class="pie-number">{{contractAmountMonth}}</span>鍏�</div>
</div>
</div>
</div>
@@ -63,17 +63,17 @@
:options="options"
:legend="pieLegend"
:chartStyle="chartStyle"
- :series="materialPieSeries"
- :tooltip="pieTooltip"></Echarts>
+ :series="materialPieSeries1"
+ :tooltip="pieTooltip1"></Echarts>
</div>
<div class="info-message2">
<div class="info-message1">
- <div class="pie-title">鏈湀鍥炴鏁伴噺</div>
- <div class="pie-info"><span class="pie-number">8,000</span>鍏� <span class="pie-number">15.0</span>%</div>
+ <div class="pie-title1">鏈湀浠樻閲戦</div>
+ <div class="pie-info"><span class="pie-number1">{{paymentAmount}}</span>鍏� <span class="pie-number1">{{payableAmountPercentage}}</span>%</div>
</div>
<div class="info-message1">
- <div class="pie-title">搴旀敹娆鹃噾棰�</div>
- <div class="pie-info"><span class="pie-number">8,000</span>鍏� <span class="pie-number">15.0</span>%</div>
+ <div class="pie-title1">搴斾粯娆鹃噾棰�</div>
+ <div class="pie-info"><span class="pie-number1">{{payableAmount}}</span>鍏�</div>
</div>
</div>
</div>
@@ -81,20 +81,72 @@
</div>
</div>
</div>
- <div></div>
+ <div>
+ <div class="card-top-right">
+ <div class="title">
+ <span style="font-weight: bold">瀹㈡埛鍚堝悓閲戦TOP5缁熻</span>
+ </div>
+ <div>
+ <Echarts ref="chart"
+ :chartStyle="chartStyle1"
+ :grid="grid"
+ :legend="barLegend"
+ :series="barSeries"
+ :tooltip="tooltip"
+ :xAxis="xAxis1"
+ :yAxis="yAxis1"
+ style="height: 42vh;"></Echarts>
+ </div>
+ </div>
+ </div>
</div>
<div>
-
+ <div>
+ <div class="card-bottom">
+ <div class="title">
+ <span style="font-weight: bold">鍥炴銆佸紑绁ㄨ繎鍗婂勾璧板娍鍥�</span>
+ </div>
+ <div>
+ <Echarts ref="chart"
+ :chartStyle="chartStyle1"
+ :grid="grid"
+ :legend="barLegend"
+ :series="lineSeries"
+ :tooltip="tooltip"
+ :xAxis="xAxis2"
+ :yAxis="yAxis2"
+ style="height: 27vh;"></Echarts>
+ </div>
+ </div>
+ </div>
</div>
</div>
</template>
<script setup name="Index">
+const { proxy } = getCurrentInstance()
+import * as echarts from 'echarts';
import Echarts from "@/components/Echarts/echarts.vue";
+import {
+ getAmountMouth,
+ getContractAmount,
+ getInvoiceAmount,
+ getReceiptAmount,
+ getTopFiveList, paymentMonthList
+} from "@/api/viewIndex.js";
const pieLegend = reactive({
show: false,
})
+const contractAmount = ref(0)
+const invoiceAmount = ref(0)
+const receiptAmount = ref(0)
+const receiveAmount = ref(0)
+const contractAmountMonth = ref(0)
+const receiveAmountPercentage = ref(0)
+const paymentAmount = ref(0)
+const payableAmount = ref(0)
+const payableAmountPercentage = ref(0)
const options = reactive({
graphic: {
type: 'circle',
@@ -103,19 +155,22 @@
shape: {
r: '70%' // 鍦嗗舰鍗婂緞涓庨ゼ鍥惧鍦堢浉鍚�
},
- style: {
- fill: 'none',
- stroke: '#ccc', // 鐏拌壊杈规
- lineWidth: 2
- },
- z: -10 // 纭繚杈规鍦ㄩゼ鍥句笅闈�
}
})
const pieTooltip = reactive({
trigger: 'item',
formatter: function (params) {
// 鍔ㄦ�佺敓鎴愭彁绀轰俊鎭紝鍩轰簬鏁版嵁椤圭殑 name 灞炴��
- const description = params.name === '鏈湀鍥炴鏁伴噺' ? '鏈湀鍥炴鏁伴噺' : '搴旀敹娆鹃噾棰�';
+ const description = params.name === '鏈湀鍥炴閲戦' ? '鏈湀鍥炴閲戦' : '搴旀敹娆鹃噾棰�';
+ return `${description} ${formatNumber(params.value)}鍏� ${params.percent}%`;
+ },
+ position: 'right'
+})
+const pieTooltip1 = reactive({
+ trigger: 'item',
+ formatter: function (params) {
+ // 鍔ㄦ�佺敓鎴愭彁绀轰俊鎭紝鍩轰簬鏁版嵁椤圭殑 name 灞炴��
+ const description = params.name === '鏈湀浠樻閲戦' ? '鏈湀浠樻閲戦' : '搴斾粯娆鹃噾棰�';
return `${description} ${formatNumber(params.value)}鍏� ${params.percent}%`;
},
position: 'right'
@@ -137,8 +192,26 @@
show:false
},
data: [
- { value: 0, name: '鏈湀鍥炴鏁伴噺', itemStyle: { color: '#2D99FF' } },
+ { value: 0, name: '鏈湀鍥炴閲戦', itemStyle: { color: '#2D99FF' } },
{ value: 0, name: '搴旀敹娆鹃噾棰�', itemStyle: { color: '#D4DDFF' } },
+ ]
+ }
+])
+const materialPieSeries1 = ref([
+ {
+ type: 'pie',
+ radius: '92%',
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderColor: '#fff',
+ borderWidth: 2
+ },
+ label: {
+ show:false
+ },
+ data: [
+ { value: 0, name: '鏈湀浠樻閲戦', itemStyle: { color: '#1EBFAC' } },
+ { value: 0, name: '搴斾粯娆鹃噾棰�', itemStyle: { color: '#D0EFE1' } },
]
}
])
@@ -146,6 +219,146 @@
width: '150%',
height: '120%' // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
}
+const chartStyle1 = {
+ width: '100%',
+ height: '100%' // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
+}
+const grid = {
+ show: false
+}
+const tooltip = {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+}
+const yAxis1 = ref([
+ {
+ type: 'value',
+ }
+])
+const xAxis1 = ref([
+ {
+ type: 'category',
+ data: []
+ }
+])
+const yAxis2 = ref([
+ {
+ type: 'value',
+ }
+])
+const xAxis2 = ref([
+ {
+ type: 'category',
+ data: []
+ }
+])
+const barLegend = reactive({})
+const barSeries = ref([
+ {
+ type: 'bar',
+ data: [],
+ label: {
+ show: true
+ },
+ },
+])
+const lineSeries = ref([
+ {
+ type: 'line',
+ data: [],
+ label: {
+ show: true
+ },
+ },
+])
+// 鍚堝悓閲戦
+const getContractAmountNum = () => {
+ getContractAmount().then((res) => {
+ contractAmount.value = res.data
+ })
+}
+// 寮�绁ㄩ噾棰�
+const getInvoiceAmountNum = () => {
+ getInvoiceAmount().then((res) => {
+ invoiceAmount.value = res.data
+ })
+}
+// 鍥炴閲戦
+const getReceiptAmountNum = () => {
+ getReceiptAmount().then((res) => {
+ receiptAmount.value = res.data
+ })
+}
+// 鏈堝洖娆鹃噾棰濋ゼ鍥�
+const getAmountMouthNum = () => {
+ getAmountMouth().then((res) => {
+ receiveAmount.value = res.data.receiveAmount
+ contractAmountMonth.value = res.data.contractAmount
+ const percentage = (receiveAmount.value / contractAmountMonth.value) * 100;
+ receiveAmountPercentage.value = percentage.toFixed(2)
+ materialPieSeries.value[0].data[0].value = receiveAmount.value
+ materialPieSeries.value[0].data[1].value = contractAmountMonth.value
+ })
+}
+// 鏈堜粯娆鹃噾棰濋ゼ鍥�
+const paymentMonthListNum = () => {
+ paymentMonthList().then((res) => {
+ paymentAmount.value = res.data.paymentAmount
+ payableAmount.value = res.data.payableAmount
+ const percentage = (paymentAmount.value / payableAmount.value) * 100;
+ payableAmountPercentage.value = percentage.toFixed(2)
+ materialPieSeries1.value[0].data[0].value = paymentAmount.value
+ materialPieSeries1.value[0].data[1].value = payableAmount.value
+ })
+}
+// 瀹㈡埛
+const getTopFiveListNum = async () => {
+ const res = await getTopFiveList()
+
+ const customerName = []
+ const totalAmount = []
+
+ res.data.forEach(item => {
+ customerName.push(item.customerName)
+ totalAmount.push(item.totalAmount)
+ })
+
+// 鉁� 姝ｇ‘鍝嶅簲寮忚祴鍊硷細鍒涘缓鏂扮殑 xAxis 鍜� series 瀵硅薄
+ xAxis1.value = [
+ {
+ type: 'category',
+ data: customerName
+ }
+ ]
+
+ barSeries.value = [
+ {
+ type: 'bar',
+ data: totalAmount,
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#F7D2FF' },
+ { offset: 1, color: '#826AF9' }
+ ])
+ },
+ emphasis: {
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 1, color: '#826AF9' }
+ ])
+ }
+ },
+ }
+ ]
+}
+getContractAmountNum()
+getInvoiceAmountNum()
+getReceiptAmountNum()
+getTopFiveListNum()
+getAmountMouthNum()
+paymentMonthListNum()
</script>
<style scoped>
@@ -154,6 +367,21 @@
background: #fff;
height: 24vh;
width: 56vw;
+ margin-bottom: 20px;
+}
+.card-top-right {
+ padding: 16px;
+ background: #fff;
+ height: 50.6vh;
+ width: 28vw;
+ margin-bottom: 20px;
+ margin-left: 20px;
+}
+.card-bottom {
+ padding: 16px;
+ background: #fff;
+ height: 34vh;
+ width: 85.2vw;
margin-bottom: 20px;
}
.title {
@@ -261,6 +489,23 @@
left: 0; /* 瀹氫綅鍒板乏杈� */
top: 9px; /* 鍨傜洿灞呬腑瀵归綈锛屾牴鎹楂樿皟鏁� */
}
+.pie-title1 {
+ font-size: 14px;
+ line-height: 24px;
+ color: #1EBFAC;
+ padding-left: 16px;
+ position: relative;
+}
+.pie-title1::before {
+ content: '';
+ width: 6px; /* 钃濈偣鐨勫搴� */
+ height: 6px; /* 钃濈偣鐨勯珮搴� */
+ background-color: #1EBFAC; /* 钃濈偣鐨勯鑹� */
+ border-radius: 50%; /* 灏嗘鏂瑰舰鍙樹负鍦嗗舰 */
+ position: absolute;
+ left: 0; /* 瀹氫綅鍒板乏杈� */
+ top: 9px; /* 鍨傜洿灞呬腑瀵归綈锛屾牴鎹楂樿皟鏁� */
+}
.pie-info {
padding-left: 16px;
font-size: 14px;
@@ -269,11 +514,8 @@
.pie-number {
color: #2853FD;
}
-.info-group {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
+.pie-number1 {
+ color: #1EBFAC;
}
</style>
--
Gitblit v1.9.3