From c466b7f253a93d3a9b58c658adf6ec75574f5bd8 Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期二, 17 六月 2025 09:06:38 +0800
Subject: [PATCH] 公司logo动态切换，整体样式修改

---
 src/views/index.vue |  437 ++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 files changed, 391 insertions(+), 46 deletions(-)

diff --git a/src/views/index.vue b/src/views/index.vue
index 4e8a971..f6ae965 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">
@@ -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">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>
@@ -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="materialPieSeries"
-                           :tooltip="pieTooltip"></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-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 +76,59 @@
           </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="tooltipLine" :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 {
+  getAmountHalfYear,
+  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 +137,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'
@@ -134,11 +171,29 @@
       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' } },
+    ]
+  }
+])
+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 +201,234 @@
   width: '150%',
   height: '120%' // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
 }
+const chartStyle1 = {
+  width: '100%',
+  height: '100%' // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
+}
+const grid = {
+  left: '2%', // 澧炲ぇ宸︿晶鐣欑櫧
+  right: '10%',
+  bottom: '15%',
+  top: '10%',
+  containLabel: true // 纭繚鍖呭惈鏍囩
+}
+const tooltip = {
+  trigger: 'axis',
+  axisPointer: {
+    type: 'shadow'
+  }
+}
+const tooltipLine = {
+  trigger: 'axis',
+}
+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
+  })
+}
+// 瀹㈡埛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 瀵硅薄
+  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' }
+          ])
+        }
+      },
+    }
+  ]
+}
+// 绾垮舰鍥�
+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>
@@ -156,6 +439,24 @@
   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 {
   position: relative;
   font-size: 18px;
@@ -164,6 +465,7 @@
   padding-left: 10px;
   margin-bottom: 26px;
 }
+
 .title::before {
   position: absolute;
   left: 0;
@@ -171,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;
@@ -186,6 +490,7 @@
   justify-content: space-around;
   align-items: center;
 }
+
 .info-card1 {
   width: 300px;
   height: 126px;
@@ -196,6 +501,7 @@
   justify-content: space-around;
   align-items: center;
 }
+
 .info-card2 {
   width: 300px;
   height: 126px;
@@ -205,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;
@@ -218,6 +526,7 @@
   justify-content: center;
   align-items: flex-start;
 }
+
 .info-message2 {
   font-weight: bold;
   display: flex;
@@ -225,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;
@@ -251,29 +565,60 @@
   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;
+  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;
   line-height: 24px;
 }
+
 .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