From 6556e86017ebb52da0f3e2b544568933bba891ee Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Thu, 3 Jul 2025 15:47:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E8=B0=83=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/http/api/screen/index.ts                  |   5 +
 .../model-components/left-two-model-new.vue   |  15 +-
 .../right-three-model-new.vue                 | 165 ++++++++++--------
 3 files changed, 110 insertions(+), 75 deletions(-)

diff --git a/src/http/api/screen/index.ts b/src/http/api/screen/index.ts
index a45b514..6a1930c 100644
--- a/src/http/api/screen/index.ts
+++ b/src/http/api/screen/index.ts
@@ -17,6 +17,11 @@ export const getLeaseCouplesApi = (data: any = {}) => {
     return get('/material-mall/largeScreen/getCompanyNum', data)
 }
 
+// 出租租赁数
+export const getLeaseAndRentCountApi = (data: any = {}) => {
+    return get('/material-mall/largeScreen/devLeaseAndRentCount', data)
+}
+
 // 装备上架统计
 export const getDevCountApi = (data: any = {}) => {
     return get('/material-mall/largeScreen/devCount', data)
diff --git a/src/views/big-screen/model-components/left-two-model-new.vue b/src/views/big-screen/model-components/left-two-model-new.vue
index 55fdb63..cd450e4 100644
--- a/src/views/big-screen/model-components/left-two-model-new.vue
+++ b/src/views/big-screen/model-components/left-two-model-new.vue
@@ -14,10 +14,10 @@
                     <div class="title">输电线路类</div>
                     <div style="display: flex">
                         <div class="value">
-                            {{ leftData_3[0].deviceCount || 0 }}
+                            {{ leftData_3[0]?.deviceCount || 0 }}
                             <span class="unit">个</span>
                         </div>
-                        <div class="percentage">{{ leftData_3[0].ratio }}%</div>
+                        <div class="percentage">{{ leftData_3[0]?.ratio }}%</div>
                     </div>
                 </div>
             </div>
@@ -31,10 +31,10 @@
                     <div class="title">变电安装类</div>
                     <div style="display: flex">
                         <div class="value">
-                            {{ leftData_3[1].deviceCount || 0 }}
+                            {{ leftData_3[1]?.deviceCount || 0 }}
                             <span class="unit">个</span>
                         </div>
-                        <div class="percentage">{{ leftData_3[1].ratio }}%</div>
+                        <div class="percentage">{{ leftData_3[1]?.ratio }}%</div>
                     </div>
                 </div>
             </div>
@@ -48,10 +48,10 @@
                     <div class="title">检修调试类</div>
                     <div style="display: flex">
                         <div class="value">
-                            {{ leftData_3[2].deviceCount || 0 }}
+                            {{ leftData_3[2]?.deviceCount || 0 }}
                             <span class="unit">个</span>
                         </div>
-                        <div class="percentage">{{ leftData_3[2].ratio }}%</div>
+                        <div class="percentage">{{ leftData_3[2]?.ratio }}%</div>
                     </div>
                 </div>
             </div>
@@ -74,10 +74,11 @@ const getLeaseCountByTypeNameData = async () => {
 }
 
 const leftData_3 = ref<LeaseCount[]>([])
-getLeaseCountByTypeNameData()
+// getLeaseCountByTypeNameData()
 
 const getLeaseCountData = async () => {
     const { data: res }: any = await getLeaseCountApi()
+    console.log(res, '---')
     leftData_3.value = res
 }
 getLeaseCountData()
diff --git a/src/views/big-screen/model-components/right-three-model-new.vue b/src/views/big-screen/model-components/right-three-model-new.vue
index 0d6b2b8..5f21397 100644
--- a/src/views/big-screen/model-components/right-three-model-new.vue
+++ b/src/views/big-screen/model-components/right-three-model-new.vue
@@ -2,9 +2,13 @@
     <!-- 出租租赁数 -->
     <div class="container">
         <ScreenTitle :title="`出租租赁数`" />
-        <div class="tab-buttons" style="position: absolute; top: 15%; left: 30%; z-index: 9999;">
-            <button @click="toggleTab('lease')" :class="{ active: currentTab === 'lease' }">租赁排名</button>
-            <button @click="toggleTab('rent')" :class="{ active: currentTab === 'rent' }">出租排名</button>
+        <div class="tab-buttons" style="position: absolute; top: 15%; left: 30%; z-index: 9999">
+            <button @click="toggleTab('lease')" :class="{ active: currentTab === 'lease' }">
+                租赁排名
+            </button>
+            <button @click="toggleTab('rent')" :class="{ active: currentTab === 'rent' }">
+                出租排名
+            </button>
         </div>
         <div class="content" ref="echartsRef"></div>
     </div>
@@ -12,7 +16,7 @@
 
 <script lang="ts" setup>
 import ScreenTitle from 'components/ScreenTitle/index.vue'
-import { getLeaseCountByPublishCompanyApi } from 'http/api/screen/index'
+import { getLeaseCountByPublishCompanyApi, getLeaseAndRentCountApi } from 'http/api/screen/index'
 import * as echarts from 'echarts'
 const echartsRef = ref(null)
 const pieData = ref([])
@@ -28,69 +32,92 @@ const getLeaseCountByPublishCompanyData = async () => {
         return {
             value: e.leaseCount,
             name: e.publishCompany,
-                // e.publishCompany.length > 6
-                //     ? e.publishCompany.slice(0, 6) + '..'
-                //     : e.publishCompany,
+            // e.publishCompany.length > 6
+            //     ? e.publishCompany.slice(0, 6) + '..'
+            //     : e.publishCompany,
         }
     })
 }
 
-function formatXAxisLabel(value) {
-    let formatted = '';
-    const len = value.length;
+const leaseInfos = ref<any>([]) // 租赁排名
+const rentInfos = ref<any>([]) // 出租排名
+
+const getLeaseAndRentCountData = async () => {
+    const { data: res }: any = await getLeaseAndRentCountApi()
+    leaseInfos.value = res?.leaseInfos
+    rentInfos.value = res?.rentInfos
+}
+
+getLeaseAndRentCountData()
+
+function formatXAxisLabel(value: any) {
+    let formatted = ''
+    const len = value.length
 
     // 每 4 个字符插入一个换行符 \n
     for (let i = 0; i < len; i++) {
-        formatted += value[i];
+        formatted += value[i]
         if ((i + 1) % 4 === 0 && i !== len - 1) {
-            formatted += '\n';
+            formatted += '\n'
         }
     }
 
     // 如果总长度超过 10 字符，则截断并加 ...
     if (value.length > 10) {
-        const lines = formatted.split('\n');
-        let result = '';
-        let count = 0;
+        const lines = formatted.split('\n')
+        let result = ''
+        let count = 0
         for (const line of lines) {
             if (count + line.length <= 10) {
-                result += line + '\n';
-                count += line.length;
+                result += line + '\n'
+                count += line.length
             } else {
-                result += line.slice(0, 10 - count) + '...';
-                break;
+                result += line.slice(0, 10 - count) + '...'
+                break
             }
         }
-        return result.trim();
+        return result.trim()
     }
 
-    return formatted;
+    return formatted
 }
 
 const initCharts = () => {
     const myChart = echarts.init(echartsRef.value)
 
     // 数据源：第一行为维度名，后续为数据
-    const dataset = {
-        source: [
-            ['公司', '租赁', '出租'],
-            ['安徽新力电业科技咨询有限公司', 85, 30],
-            ['安徽三环电力工程集团有限公司', 64, 45],
-            ['安徽明都能源建设集团有限公司', 46, 56],
-            ['安徽莱特实业集团有限公司', 32, 78],
-            ['安徽宏源电力建设投资有限公司', 18, 10]
-        ]
-    };
+    //  const dataset = {
+    //     source: [
+    //         ['公司', '租赁', '出租'],
+    //         ['安徽新力电业科技咨询有限公司', 85, 30],
+    //         ['安徽三环电力工程集团有限公司', 64, 45],
+    //         ['安徽明都能源建设集团有限公司', 46, 56],
+    //         ['安徽莱特实业集团有限公司', 32, 78],
+    //         ['安徽宏源电力建设投资有限公司', 18, 10],
+    //     ],
+    // }
+
+    let xData = []
+    let yData = []
+
+    if (currentTab.value === 'lease') {
+        xData = leaseInfos.value.map((item: any) => formatXAxisLabel(item.leaseCompanyName))
+        yData = leaseInfos.value.map((item: any) => item.leaseNum)
+    } else {
+        xData = rentInfos.value.map((item: any) => formatXAxisLabel(item.rentCompanyName))
+        yData = rentInfos.value.map((item: any) => item.rentNum)
+    }
+
     // 处理 x 轴文本
-    const xAxisData = dataset.source.slice(1).map(item => formatXAxisLabel(item[0]));
+    // const xAxisData = dataset.source.slice(1).map((item) => formatXAxisLabel(item[0]))
 
     const option = {
         tooltip: {
             trigger: 'axis',
-            axisPointer: { type: 'shadow' }
+            axisPointer: { type: 'shadow' },
         },
         legend: {
-            show: false // 隐藏图例
+            show: false, // 隐藏图例
         },
         grid: {
             left: '3%',
@@ -101,35 +128,34 @@ const initCharts = () => {
         },
         xAxis: {
             type: 'category',
-            data: xAxisData,
+            data: xData,
             axisLabel: {
                 color: '#e4e6e8',
                 fontSize: 10,
                 formatter: function (value) {
-                    return value.split('@').join('\n'); // 将 @ 替换为换行符 \n
+                    return value.split('@').join('\n') // 将 @ 替换为换行符 \n
                 },
             },
             axisTick: {
-                show: false
+                show: false,
             },
             axisLine: {
                 show: true,
                 lineStyle: {
-                    color: '#ffffff',  // 白色实线
+                    color: '#ffffff', // 白色实线
                     width: 1,
-                    type: 'solid'
-                }
+                    type: 'solid',
+                },
             },
-
         },
         yAxis: {
             type: 'value',
             name: '台',
             nameTextStyle: {
-                color: '#e4e6e8'
+                color: '#e4e6e8',
             },
             axisLabel: {
-                color: '#e4e6e8'
+                color: '#e4e6e8',
             },
             splitLine: {
                 show: true,
@@ -148,7 +174,7 @@ const initCharts = () => {
                 label: {
                     show: true,
                     position: 'top',
-                    color: '#fff'
+                    color: '#fff',
                 },
                 itemStyle: {
                     color: function (params) {
@@ -161,9 +187,9 @@ const initCharts = () => {
                                 x2: 0,
                                 y2: 1,
                                 colorStops: [
-                                    { offset: 0, color: 'rgba(58,159,174, 0.5)' },   // 带透明度
-                                    { offset: 1, color: 'rgba(27,131,144, 0.3)' }
-                                ]
+                                    { offset: 0, color: 'rgba(58,159,174, 0.5)' }, // 带透明度
+                                    { offset: 1, color: 'rgba(27,131,144, 0.3)' },
+                                ],
                             },
                             // 第二个柱子
                             {
@@ -174,8 +200,8 @@ const initCharts = () => {
                                 y2: 1,
                                 colorStops: [
                                     { offset: 0, color: 'rgba(58, 170, 169, 0.5)' },
-                                    { offset: 1, color: 'rgba(24, 133, 141, 0.3)' }
-                                ]
+                                    { offset: 1, color: 'rgba(24, 133, 141, 0.3)' },
+                                ],
                             },
                             // 第三个柱子
                             {
@@ -186,8 +212,8 @@ const initCharts = () => {
                                 y2: 1,
                                 colorStops: [
                                     { offset: 0, color: 'rgba(229,239,145, 0.9)' },
-                                    { offset: 1, color: 'rgba(61,139,119, 0.3)' }
-                                ]
+                                    { offset: 1, color: 'rgba(61,139,119, 0.3)' },
+                                ],
                             },
                             // 第四个柱子（默认）
                             {
@@ -198,11 +224,11 @@ const initCharts = () => {
                                 y2: 1,
                                 colorStops: [
                                     { offset: 0, color: 'rgba(120, 171, 177, 0.5)' },
-                                    { offset: 1, color: 'rgba(55, 134, 145, 0.3)' }
-                                ]
-                            }
-                        ];
-                        return colorArray[params.dataIndex < 3 ? params.dataIndex : 3];
+                                    { offset: 1, color: 'rgba(55, 134, 145, 0.3)' },
+                                ],
+                            },
+                        ]
+                        return colorArray[params.dataIndex < 3 ? params.dataIndex : 3]
                     },
                     borderWidth: 2,
                     shadowBlur: 1,
@@ -210,25 +236,28 @@ const initCharts = () => {
                     shadowOffsetX: 0,
                     shadowOffsetY: 0,
                     opacity: 1,
-                    borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                        offset: 0,
-                        color: '#64BDCB'
-                    }, {
-                        offset: 1,
-                        color: '#48A1AF'
-                    }]),
+                    borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                            offset: 0,
+                            color: '#64BDCB',
+                        },
+                        {
+                            offset: 1,
+                            color: '#48A1AF',
+                        },
+                    ]),
                 },
                 barWidth: '40%',
-                data: dataset.source.slice(1).map(item => item[currentTab.value === 'lease' ? 1 : 2])
-            }
-        ]
+                data: yData,
+            },
+        ],
     }
     myChart.setOption(option)
     // 图例点击事件：切换租赁/出租
 }
 
 onMounted(() => {
-    Promise.all([getLeaseCountByPublishCompanyData()]).then(() => {
+    Promise.all([getLeaseAndRentCountData()]).then(() => {
         initCharts()
     })
 })
@@ -255,7 +284,7 @@ onMounted(() => {
         button {
             padding: 5px 10px;
             margin-right: 5px;
-            background-color: #09403F;
+            background-color: #09403f;
             color: #fff;
             border: none;
             cursor: pointer;