From 6cd4984f83e7c9fabac3daa23cc9946d9d68314b Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 17:10:00 +0800
Subject: [PATCH] 1.采购管理-分页bug
---
src/views/index.vue | 249 +++++++++++++++++++++++++++++++++++--------------
1 files changed, 176 insertions(+), 73 deletions(-)
diff --git a/src/views/index.vue b/src/views/index.vue
index 4f5b35c..f6ae965 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -9,21 +9,21 @@
<div class="card-group">
<div class="info-card">
<div class="info-message">
- <div class="info-number">{{contractAmount}}</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">{{invoiceAmount}}</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">{{receiptAmount}}</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">
@@ -38,20 +38,18 @@
<div class="card-group">
<div class="pie-group">
<div style="margin-right: 80px">
- <Echarts ref="chart"
- :legend="pieLegend"
- :chartStyle="chartStyle"
- :series="materialPieSeries"
- :tooltip="pieTooltip"></Echarts>
+ <Echarts ref="chart" :legend="pieLegend" :chartStyle="chartStyle" :series="materialPieSeries"
+ :tooltip="pieTooltip"></Echarts>
</div>
<div class="info-message2">
<div class="info-message1">
<div class="pie-title">鏈湀鍥炴閲戦</div>
- <div class="pie-info"><span class="pie-number">{{receiveAmount}}</span>鍏� <span class="pie-number">{{receiveAmountPercentage}}</span>%</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">{{contractAmountMonth}}</span>鍏�</div>
+ <div class="pie-info"><span class="pie-number">{{ contractAmountMonth }}</span>鍏�</div>
</div>
</div>
</div>
@@ -59,21 +57,18 @@
<div class="card-group">
<div class="pie-group">
<div style="margin-right: 80px">
- <Echarts ref="chart"
- :options="options"
- :legend="pieLegend"
- :chartStyle="chartStyle"
- :series="materialPieSeries1"
- :tooltip="pieTooltip1"></Echarts>
+ <Echarts ref="chart" :options="options" :legend="pieLegend" :chartStyle="chartStyle"
+ :series="materialPieSeries1" :tooltip="pieTooltip1"></Echarts>
</div>
<div class="info-message2">
<div class="info-message1">
<div class="pie-title1">鏈湀浠樻閲戦</div>
- <div class="pie-info"><span class="pie-number1">{{paymentAmount}}</span>鍏� <span class="pie-number1">{{payableAmountPercentage}}</span>%</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-title1">搴斾粯娆鹃噾棰�</div>
- <div class="pie-info"><span class="pie-number1">{{payableAmount}}</span>鍏�</div>
+ <div class="pie-info"><span class="pie-number1">{{ payableAmount }}</span>鍏�</div>
</div>
</div>
</div>
@@ -87,15 +82,8 @@
<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>
+ <Echarts ref="chart" :chartStyle="chartStyle1" :grid="grid" :legend="barLegend" :series="barSeries"
+ :tooltip="tooltip" :xAxis="xAxis1" :yAxis="yAxis1" style="height: 42vh;"></Echarts>
</div>
</div>
</div>
@@ -107,15 +95,8 @@
<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>
+ <Echarts ref="chart" :chartStyle="chartStyle1" :grid="grid" :legend="barLegend" :series="lineSeries"
+ :tooltip="tooltipLine" :xAxis="xAxis2" :yAxis="yAxis2" style="height: 27vh;"></Echarts>
</div>
</div>
</div>
@@ -128,6 +109,7 @@
import * as echarts from 'echarts';
import Echarts from "@/components/Echarts/echarts.vue";
import {
+ getAmountHalfYear,
getAmountMouth,
getContractAmount,
getInvoiceAmount,
@@ -189,10 +171,10 @@
borderWidth: 2
},
label: {
- show:false
+ show: false
},
data: [
- { value: 0, name: '鏈湀鍥炴閲戦', itemStyle: { color: '#2D99FF' } },
+ { value: 0, name: '鏈湀鍥炴閲戦', itemStyle: { color: '#2D99FF' } },
{ value: 0, name: '搴旀敹娆鹃噾棰�', itemStyle: { color: '#D4DDFF' } },
]
}
@@ -207,10 +189,10 @@
borderWidth: 2
},
label: {
- show:false
+ show: false
},
data: [
- { value: 0, name: '鏈湀浠樻閲戦', itemStyle: { color: '#1EBFAC' } },
+ { value: 0, name: '鏈湀浠樻閲戦', itemStyle: { color: '#1EBFAC' } },
{ value: 0, name: '搴斾粯娆鹃噾棰�', itemStyle: { color: '#D0EFE1' } },
]
}
@@ -224,13 +206,20 @@
height: '100%' // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
}
const grid = {
- show: false
+ left: '2%', // 澧炲ぇ宸︿晶鐣欑櫧
+ right: '10%',
+ bottom: '15%',
+ top: '10%',
+ containLabel: true // 纭繚鍖呭惈鏍囩
}
const tooltip = {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
+}
+const tooltipLine = {
+ trigger: 'axis',
}
const yAxis1 = ref([
{
@@ -256,22 +245,22 @@
])
const barLegend = reactive({})
const barSeries = ref([
- {
- type: 'bar',
- data: [],
- label: {
- show: true
- },
+ {
+ type: 'bar',
+ data: [],
+ label: {
+ show: true
},
+ },
])
const lineSeries = ref([
- {
- type: 'line',
- data: [],
- label: {
- show: true
- },
+ {
+ type: 'line',
+ data: [],
+ label: {
+ show: true
},
+ },
])
// 鍚堝悓閲戦
const getContractAmountNum = () => {
@@ -313,26 +302,22 @@
materialPieSeries1.value[0].data[1].value = payableAmount.value
})
}
-// 瀹㈡埛
+// 瀹㈡埛top5
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 瀵硅薄
+ // 姝ｇ‘鍝嶅簲寮忚祴鍊硷細鍒涘缓鏂扮殑 xAxis 鍜� series 瀵硅薄
xAxis1.value = [
{
type: 'category',
data: customerName
}
]
-
barSeries.value = [
{
type: 'bar',
@@ -353,12 +338,97 @@
}
]
}
+// 绾垮舰鍥�
+const getAmountHalfYearNum = async () => {
+ const res = await getAmountHalfYear()
+ console.log(res)
+ const monthName = []
+ const receiptAmount = []
+ const invoiceAmount = []
+ res.data.forEach(item => {
+ monthName.push(item.month)
+ receiptAmount.push(item.receiptAmount)
+ invoiceAmount.push(item.invoiceAmount)
+ })
+ // 姝ｇ‘鍝嶅簲寮忚祴鍊硷細鍒涘缓鏂扮殑 xAxis 鍜� series 瀵硅薄
+ xAxis2.value = [
+ {
+ type: 'category',
+ data: monthName
+ }
+ ]
+ lineSeries.value = [
+ {
+ name: '寮�绁�',
+ type: 'line',
+ data: receiptAmount,
+ smooth: true,
+ stack: 'Total',
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgba(131, 207, 255, 1)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(186, 228, 255, 1)'
+ }
+ ])
+ },
+ // 璁剧疆灏忓渾鐐圭殑棰滆壊
+ itemStyle: {
+ color: '#2D99FF', // 灏忓渾鐐归鑹茶缃负#2D99FF
+ borderColor: '#2D99FF' // 濡傛灉闇�瑕佺殑璇濓紝鍙互璁剧疆杈规棰滆壊
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ lineStyle: {
+ width: 0
+ },
+ showSymbol: false,
+ },
+ {
+ name: '鍥炴',
+ type: 'line',
+ data: invoiceAmount,
+ smooth: true,
+ stack: 'Total',
+ lineStyle: {
+ width: 0
+ },
+ // 璁剧疆灏忓渾鐐圭殑棰滆壊
+ itemStyle: {
+ color: '#83CFFF', // 灏忓渾鐐归鑹茶缃负#83CFFF
+ borderColor: '#83CFFF' // 濡傛灉闇�瑕佺殑璇濓紝鍙互璁剧疆杈规棰滆壊
+ },
+ showSymbol: false,
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgba(54, 153, 255, 1)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(89, 169, 254, 1)'
+ }
+ ])
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ }
+ ]
+}
getContractAmountNum()
getInvoiceAmountNum()
getReceiptAmountNum()
getTopFiveListNum()
getAmountMouthNum()
paymentMonthListNum()
+getAmountHalfYearNum()
</script>
<style scoped>
@@ -369,6 +439,7 @@
width: 56vw;
margin-bottom: 20px;
}
+
.card-top-right {
padding: 16px;
background: #fff;
@@ -377,6 +448,7 @@
margin-bottom: 20px;
margin-left: 20px;
}
+
.card-bottom {
padding: 16px;
background: #fff;
@@ -384,6 +456,7 @@
width: 85.2vw;
margin-bottom: 20px;
}
+
.title {
position: relative;
font-size: 18px;
@@ -392,6 +465,7 @@
padding-left: 10px;
margin-bottom: 26px;
}
+
.title::before {
position: absolute;
left: 0;
@@ -399,12 +473,14 @@
content: '';
width: 4px;
height: 18px;
- background-color: #3A7BFA;
+ background-color: #002FA7;
border-radius: 2px;
}
+
.card-group {
display: flex;
}
+
.info-card {
width: 300px;
height: 126px;
@@ -414,6 +490,7 @@
justify-content: space-around;
align-items: center;
}
+
.info-card1 {
width: 300px;
height: 126px;
@@ -424,6 +501,7 @@
justify-content: space-around;
align-items: center;
}
+
.info-card2 {
width: 300px;
height: 126px;
@@ -433,12 +511,14 @@
justify-content: space-around;
align-items: center;
}
+
.info-message {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
+
.info-message1 {
font-weight: bold;
display: flex;
@@ -446,6 +526,7 @@
justify-content: center;
align-items: flex-start;
}
+
.info-message2 {
font-weight: bold;
display: flex;
@@ -453,25 +534,30 @@
align-items: center;
justify-content: space-around;
}
+
.info-number {
font-weight: bold;
font-size: 32px;
color: #FFFFFF;
margin-bottom: 10px;
}
+
.info-title {
font-weight: bold;
font-size: 18px;
color: #FFFFFF;
}
+
.pie {
display: flex;
flex-direction: row;
justify-content: space-around;
}
+
.pie-group {
display: flex;
}
+
.pie-title {
font-size: 14px;
line-height: 24px;
@@ -479,16 +565,24 @@
padding-left: 16px;
position: relative;
}
+
.pie-title::before {
content: '';
- width: 6px; /* 钃濈偣鐨勫搴� */
- height: 6px; /* 钃濈偣鐨勯珮搴� */
- background-color: #2853FD; /* 钃濈偣鐨勯鑹� */
- border-radius: 50%; /* 灏嗘鏂瑰舰鍙樹负鍦嗗舰 */
+ width: 6px;
+ /* 钃濈偣鐨勫搴� */
+ height: 6px;
+ /* 钃濈偣鐨勯珮搴� */
+ background-color: #2853FD;
+ /* 钃濈偣鐨勯鑹� */
+ border-radius: 50%;
+ /* 灏嗘鏂瑰舰鍙樹负鍦嗗舰 */
position: absolute;
- left: 0; /* 瀹氫綅鍒板乏杈� */
- top: 9px; /* 鍨傜洿灞呬腑瀵归綈锛屾牴鎹楂樿皟鏁� */
+ left: 0;
+ /* 瀹氫綅鍒板乏杈� */
+ top: 9px;
+ /* 鍨傜洿灞呬腑瀵归綈锛屾牴鎹楂樿皟鏁� */
}
+
.pie-title1 {
font-size: 14px;
line-height: 24px;
@@ -496,26 +590,35 @@
padding-left: 16px;
position: relative;
}
+
.pie-title1::before {
content: '';
- width: 6px; /* 钃濈偣鐨勫搴� */
- height: 6px; /* 钃濈偣鐨勯珮搴� */
- background-color: #1EBFAC; /* 钃濈偣鐨勯鑹� */
- border-radius: 50%; /* 灏嗘鏂瑰舰鍙樹负鍦嗗舰 */
+ width: 6px;
+ /* 钃濈偣鐨勫搴� */
+ height: 6px;
+ /* 钃濈偣鐨勯珮搴� */
+ background-color: #1EBFAC;
+ /* 钃濈偣鐨勯鑹� */
+ border-radius: 50%;
+ /* 灏嗘鏂瑰舰鍙樹负鍦嗗舰 */
position: absolute;
- left: 0; /* 瀹氫綅鍒板乏杈� */
- top: 9px; /* 鍨傜洿灞呬腑瀵归綈锛屾牴鎹楂樿皟鏁� */
+ left: 0;
+ /* 瀹氫綅鍒板乏杈� */
+ top: 9px;
+ /* 鍨傜洿灞呬腑瀵归綈锛屾牴鎹楂樿皟鏁� */
}
+
.pie-info {
padding-left: 16px;
font-size: 14px;
line-height: 24px;
}
+
.pie-number {
color: #2853FD;
}
+
.pie-number1 {
color: #1EBFAC;
}
</style>
-
--
Gitblit v1.9.3