update

src/page/index/components/AccountsReceivableWarning/AccountsReceivableWarning.less

@@ -44,7 +44,8 @@
     .AccountsReceivableWarningContent {
         width: 100%;
         box-sizing: border-box;
-        padding: 40px 28px 0;
+        // padding: 40px 28px 0;
+        padding: 0 28px 0;
 
         .AccountsReceivableWarningPie {
             width: 100%;

src/page/index/components/AccountsReceivableWarning/AccountsReceivableWarning.vue

@@ -25,6 +25,7 @@ echarts.use([
 ]);
 
 let myChart: echarts.ECharts;
+let myChart2: echarts.ECharts;
 // 自定义颜色列表
 const colorList = ['#FF307C', '#FF9500', '#00FFB7'];
 const colorListSecond = ['#FF307C', '#FF9500', '#00FFB7'];
@@ -43,6 +44,7 @@ let legendList = ref<any>([])
 
 onMounted(async () => {
     await handleHaveFirstPie()
+    await handleHaveSecond()
 })
 
 // 获取数据
@@ -81,19 +83,19 @@ const handleGetData = async () => {
 }
 
 // 修改选择的tab
-const handleChangeSelectTab = async (value: number) => {
+// const handleChangeSelectTab = async (value: number) => {
-    selectTab.value = value
+//     selectTab.value = value
-    if (value === 1) {
+//     if (value === 1) {
-        await handleHaveFirstPie()
+//         await handleHaveFirstPie()
-    } else {
+//     } else {
-        await handleHaveSecond()
+//         await handleHaveSecond()
-    }
+//     }
-}
+// }
 
 // 拿到第一个
 const handleHaveFirstPie = async () => {
     const res: any = await handleGetData()
-    const chartDom = document.getElementById('AccountsReceivableWarningPieBox');
+    const chartDom = document.getElementById('AccountsReceivableWarningPieBox1');
     if (!chartDom) return;
 
     myChart = echarts.init(chartDom);
@@ -195,10 +197,10 @@ const handleGetDataSecond = async () => {
 // 拿到第二个
 const handleHaveSecond = async () => {
     const res: any = await handleGetDataSecond()
-    const chartDom = document.getElementById('AccountsReceivableWarningPieBox');
+    const chartDom = document.getElementById('AccountsReceivableWarningPieBox2');
     if (!chartDom) return;
 
-    myChart = echarts.init(chartDom);
+    myChart2 = echarts.init(chartDom);
 
     const option = {
         tooltip: {
@@ -255,18 +257,20 @@ const handleHaveSecond = async () => {
         ]
     };
 
-    myChart.setOption(option);
+    myChart2.setOption(option);
-    myChart.resize();
+    myChart2.resize();
     window.addEventListener('resize', resizeChart);
 }
 
 const resizeChart = () => {
     myChart?.resize();
+    myChart2?.resize();
 };
 
 onBeforeUnmount(() => {
     window.removeEventListener('resize', resizeChart);
     myChart?.dispose();
+    myChart2?.dispose();
 });
 
 
@@ -275,15 +279,18 @@ onBeforeUnmount(() => {
 <template>
     <div class="AccountsReceivableWarningBox">
 
-        <div class="selectTabBox">
+        <!-- <div class="selectTabBox">
             <div :class="selectTab === item.value ? 'tabItem selectTabItem' : 'tabItem'"
                 v-for="(item, index) in tabList" :key="index" @click="handleChangeSelectTab(item.value)">{{ item.label
                 }}</div>
-        </div>
+        </div> -->
 
         <div class="AccountsReceivableWarningContent">
-            <div class="AccountsReceivableWarningPie" v-if="selectTab === 1">
+
-                <div class="progressPieLeft" id="AccountsReceivableWarningPieBox"></div>
+            <SmallTitle :title="'应收账款预警'" />
+
+            <div class="AccountsReceivableWarningPie" style="margin-top: 25px;">
+                <div class="progressPieLeft" id="AccountsReceivableWarningPieBox1"></div>
 
                 <div class="progressPieRight">
                     <div class="progressPieTop">
@@ -343,8 +350,10 @@ onBeforeUnmount(() => {
                 </div>
             </div>
 
-            <div class="AccountsReceivableWarningPie" v-if="selectTab === 2">
+            <SmallTitle :title="'合同到期预警'" style="margin-top: 21px;" />
-                <div class="progressPieLeft" id="AccountsReceivableWarningPieBox"></div>
+
+            <div class="AccountsReceivableWarningPie" style="margin-top: 25px;">
+                <div class="progressPieLeft" id="AccountsReceivableWarningPieBox2"></div>
 
                 <div class="progressPieRight">
                     <div class="progressPieTop" style="border-bottom: none;">
@@ -360,9 +369,11 @@ onBeforeUnmount(() => {
 
                     <div class="progressPieBottomSecond">
                         <div class="progressPieBottomItem"
-                            v-for="(item, index) in AccountsReceivableWarning.ContractHalfYearListExpired" :key="index">
+                            v-for="(item, index) in AccountsReceivableWarning?.ContractHalfYearListExpired"
+                            :key="index">
                             <div class="progressPieBottomItemTop">
-                                <div class="progressPieBottomItemTopLegend" :style="{ background: colorListSecond[index] }">
+                                <div class="progressPieBottomItemTopLegend"
+                                    :style="{ background: colorListSecond[index] }">
                                 </div>
                                 <div class="progressPieBottomItemTopLabel">{{ item.Expired_Situation || "" }}</div>
                             </div>

src/page/index/components/AnnualAccountsReceivable/AnnualAccountsReceivable.less

@@ -0,0 +1,15 @@
+.AnnualAccountsReceivableBox {
+    width: 100%;
+
+    .AnnualAccountsReceivableContent {
+        width: 100%;
+        margin-top: 18px;
+        height: 162px;
+
+        .AnnualAccountsReceivableCharts {
+            width: 100%;
+            height: 162px;
+        }
+    }
+
+}

src/page/index/components/AnnualAccountsReceivable/AnnualAccountsReceivable.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import SmallTitle from '../smallTitle/smallTitle.vue';
+import './AnnualAccountsReceivable.less'
+import * as echarts from 'echarts/core';
+import { BarChart } from 'echarts/charts';
+import {
+    GridComponent,
+    TitleComponent,
+    TooltipComponent,
+    LegendComponent
+} from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+import { onBeforeUnmount, onMounted } from 'vue';
+import { handleGetProjectYearlyArrearageList } from '../../service';
+
+
+// 注册组件
+echarts.use([
+    BarChart,
+    GridComponent,
+    TitleComponent,
+    TooltipComponent,
+    LegendComponent,
+    CanvasRenderer
+]);
+
+let myChart: echarts.ECharts;
+
+
+onMounted(async () => {
+
+    const res = await handleGetData()
+
+    const chartDom = document.getElementById('AnnualAccountsReceivableCharts');
+    if (!chartDom) return;
+
+    myChart = echarts.init(chartDom);
+
+    const option = {
+        yAxis: {  // 改为 yAxis 显示分类数据
+            type: 'category',
+            data: res.category,
+            axisLabel: {
+                width: 80,
+                overflow: 'truncate',
+                ellipsis: '...',
+                interval: 0
+            }
+        },
+        xAxis: {  // 改为 xAxis 显示数值
+            type: 'value',
+            name: "万元",
+            splitLine: { show: false }
+        },
+        series: [
+            {
+                data: res.seriesData,
+                realData: res.seriesData,
+                type: 'bar',
+                barWidth: '6',  // 现在是柱子的高度
+                showBackground: true,
+                backgroundStyle: {
+                    borderRadius: [0, 4, 4, 0],  // 调整圆角方向
+                    color: 'rgba(23, 42, 70, 1)'
+                },
+                itemStyle: {
+                    borderRadius: [0, 4, 4, 0],  // 调整圆角方向
+                    color: function (params: any) {
+                        const index = params.dataIndex;
+                        if (index > 6) {
+                            return new echarts.graphic.LinearGradient(
+                                0, 0, 1, 0,  // 渐变方向改为水平
+                                [
+                                    { offset: 0, color: '#FF4F00' },
+                                    { offset: 1, color: '#D3B70E' }
+                                ]
+                            );
+                        }
+                        else {
+
+                            return new echarts.graphic.LinearGradient(
+                                0, 0, 1, 0,  // 渐变方向改为水平
+                                [
+                                    { offset: 0, color: '#018FFF' },
+                                    { offset: 1, color: '#00F4FF' }
+                                ]
+                            );
+                        }
+                    }
+                }
+            },
+        ],
+        grid: {
+            left: '0',  // 左侧留更多空间给y轴标签
+            right: '10%',
+            bottom: '5%',
+            top: '0',
+            containLabel: true
+        },
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: { type: 'shadow' },
+            formatter: function (params: any) {
+                const data: any = params[0]
+                return `
+                <div style="font-weight:bold">${data?.name || '-'}年</div>
+                <div>已付金额${data?.value || '-'}万元 </div>
+            `;
+            }
+            //  + '笔'
+        }
+    };
+
+    myChart.setOption(option);
+    window.addEventListener('resize', resizeChart);
+})
+
+// 获取数据的方法
+const handleGetData = async () => {
+    let category: any = []
+    let seriesData: any = []
+
+    const req: any = {
+
+    }
+    const data = await handleGetProjectYearlyArrearageList(req)
+    console.log('handleGetProjectYearlyArrearageListhandleGetProjectYearlyArrearageListhandleGetProjectYearlyArrearageList', data);
+
+    let list: any = data.ProjectMonthlyCompleteList.slice(0, 5)
+    list.reverse()
+    if (list && list.length > 0) {
+        list.forEach((item: any) => {
+            category.push(item.Business_Year)
+            seriesData.push(item.Payment_Amount)
+        })
+    }
+
+    return {
+        category: category,
+        seriesData: seriesData,
+    }
+}
+
+const resizeChart = () => {
+    myChart?.resize();
+};
+
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', resizeChart);
+    myChart?.dispose();
+});
+</script>
+
+
+<template>
+    <div class="AnnualAccountsReceivableBox">
+        <SmallTitle title="年度应收总额完成度" />
+
+        <div class="AnnualAccountsReceivableContent">
+            <div class="AnnualAccountsReceivableCharts" id="AnnualAccountsReceivableCharts"></div>
+        </div>
+    </div>
+</template>

src/page/index/components/AssessmentScoringRanking/AssessmentScoringRanking.less

@@ -0,0 +1,106 @@
+.AssessmentScoringRankingBox {
+    width: 100%;
+
+    .AssessmentScoringRankingListBox {
+
+
+        .AssessmentScoringRankingItem {
+            width: 100%;
+            box-sizing: border-box;
+            padding: 11px 10px;
+            background: linear-gradient(0deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0.05) 100%);
+            margin-bottom: 10px;
+
+            .AssessmentScoringRankingItemTop {
+                display: flex;
+                align-items: center;
+
+                .AssessmentScoringRankingItemIndex {
+                    font-family: Impact, Impact;
+                    font-weight: 400;
+                    font-size: 15px;
+                    color: #171B2D;
+                    letter-spacing: 1px;
+                    text-align: center;
+                    font-style: normal;
+                    box-sizing: border-box;
+                    padding: 1px 8px 2px 4px;
+                    margin-right: 5px;
+                    background-image: url('../../../../assets/image/threeStBg.png');
+                    background-repeat: no-repeat;
+                    background-size: 100% 100%;
+                }
+
+                .AssessmentScoringRankingItemIndexAfter {
+                    background-image: url('../../../../assets/image/otherStBg.png');
+                }
+
+                .AssessmentScoringRankingItemName {
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 12px;
+                    color: #FFFFFF;
+                    text-align: left;
+                    font-style: normal;
+                }
+            }
+
+            .AssessmentScoringRankingItemBottom {
+                width: 100%;
+                display: flex;
+                margin-top: 10px;
+                align-items: center;
+                justify-content: space-between;
+
+                .AssessmentScoringRankingItemBottomItem {
+                    width: calc(50% - 5px);
+                    display: flex;
+                    align-items: flex-end;
+
+                    .AssessmentScoringRankingItemBottomItemPosition {
+                        font-family: Microsoft YaHei, Microsoft YaHei;
+                        font-weight: 400;
+                        font-size: 12px;
+                        color: #0094FF;
+                        text-align: left;
+                        font-style: normal;
+                        padding: 5px 7px;
+                        background: rgba(0, 148, 255, 0.3);
+                        border-radius: 5px 5px 5px 5px;
+                        margin-right: 5px;
+                    }
+
+                    .AssessmentScoringRankingItemBottomItemRight {
+                        flex: 1;
+
+                        .AssessmentScoringRankingItemBottomItemMark {
+                            font-family: Microsoft YaHei, Microsoft YaHei;
+                            font-weight: 400;
+                            font-size: 12px;
+                            color: #FFFFFF;
+                            text-align: right;
+                            font-style: normal;
+                        }
+
+                        .AssessmentScoringRankingItemBottomItemProgress {
+                            width: 100%;
+                            height: 3px;
+                            margin-top: 4px;
+                            background: rgba(47, 52, 107, 1);
+                            border-radius: 4px;
+                            position: relative;
+
+                            .AssessmentScoringRankingItemBottomItemHaveProgress {
+                                height: 100%;
+                                background-color: #7D4CD2;
+                                position: absolute;
+                                left: 0;
+                                top: 0;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/page/index/components/AssessmentScoringRanking/AssessmentScoringRanking.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import SmallTitle from '../smallTitle/smallTitle.vue';
+import './AssessmentScoringRanking.less'
+import { handleGetExamineResultList } from '../../service';
+
+
+// 考核数据
+let rankList: any = ref<any>([])
+
+onMounted(async () => {
+    await handleGetData()
+})
+
+
+// 拿到数据的方法
+const handleGetData = async () => {
+    const req: any = {
+        DataType: 1,
+        StartMonth: "202501",
+        EndMonth: "202501",
+        provinceCode: "340000",
+    }
+
+    const data = await handleGetExamineResultList(req)
+    console.log('fjdisfjoasidfj', data);
+    let list: any = data.slice(0, 5)
+    rankList.value = list
+}
+
+</script>
+
+<template>
+    <div class="AssessmentScoringRankingBox">
+        <SmallTitle title="考核打分排行榜" />
+
+
+        <div class="AssessmentScoringRankingListBox">
+            <div class="AssessmentScoringRankingItem" v-for="(item, index) in rankList" :key="index">
+                <div class="AssessmentScoringRankingItemTop">
+                    <div
+                        :class="index + 1 > 3 ? 'AssessmentScoringRankingItemIndex AssessmentScoringRankingItemIndexAfter' : 'AssessmentScoringRankingItemIndex '">
+                        {{ index + 1 }}</div>
+                    <div class="AssessmentScoringRankingItemName">{{ item.SERVERPART_NAME }}</div>
+                </div>
+
+                <div class="AssessmentScoringRankingItemBottom">
+                    <div class="AssessmentScoringRankingItemBottomItem" v-for="(subItem, subIndex) in item.list"
+                        :key="subIndex">
+                        <div class="AssessmentScoringRankingItemBottomItemPosition">{{ subItem.REGION_NAME }}</div>
+                        <div class="AssessmentScoringRankingItemBottomItemRight">
+                            <div class="AssessmentScoringRankingItemBottomItemMark">{{ subItem.EXAMINE_SCORE }}分</div>
+                            <div class="AssessmentScoringRankingItemBottomItemProgress">
+                                <div class="AssessmentScoringRankingItemBottomItemHaveProgress"
+                                    :style="{ width: `${subItem.EXAMINE_SCORE}%` }"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+
+            </div>
+        </div>
+    </div>
+</template>

src/page/index/components/BrandConsumptionLevel/BrandConsumptionLevel.less

@@ -4,7 +4,7 @@
 
     .BrandConsumptionLevel {
         width: 100%;
-        height: 174px;
+        height: 167px;
-        margin-top: 13px;
+        margin-top: 14px;
     }
 }

src/page/index/components/BrandConsumptionLevel/BrandConsumptionLevel.vue

@@ -52,16 +52,32 @@ onMounted(async () => {
             containLabel: true
         },
         yAxis: {
+            name: '%',
             type: 'value',
-            splitLine: { show: false }  // 隐藏刻度线
+            splitLine: { show: false },  // 隐藏刻度线
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: '#fff'
+                }
+            },
+            axisLabel: {
+                color: '#fff',
+            }
         },
         xAxis: {
             type: 'category',
             data: res.category,
             axisLabel: {
                 interval: 0  // 强制显示所有标签
+            },
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: '#fff'
                 }
             },
+        },
         series: res.seriesData,
         tooltip: {
             trigger: 'item',

src/page/index/components/BusinessCase/BusinessCase.less

@@ -5,6 +5,9 @@
         width: 100%;
         display: flex;
         align-items: center;
+        background: linear-gradient(90deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
+        padding: 3px 20px;
+        box-sizing: border-box;
 
         .BusinessCaseItem {
             font-family: Microsoft YaHei, Microsoft YaHei;
@@ -42,12 +45,13 @@
 
     .BusinessCaseRevenueYOY {
         width: 100%;
-        margin-top: 26px;
+        margin-top: 29px;
-        background: linear-gradient(30deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
+        background: linear-gradient(0deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
         box-sizing: border-box;
         padding: 20px 15px;
         display: flex;
         align-items: center;
+        border-bottom: 1px solid rgba(0, 148, 255, 0.50);
 
 
         .BusinessCaseLeftItem {
@@ -144,16 +148,18 @@
     .featureAnalysis {
         width: 100%;
         height: 283px;
+        margin-top: 32px;
 
         .featureAnalysisBox {
             width: 100%;
             height: 283px;
+            margin-top: 18px;
         }
 
         .featureAnalysisBottom {
             width: 100%;
             height: 283px;
-            margin-top: 23px;
+            margin-top: 18px;
         }
     }
 }

src/page/index/components/BusinessCase/BusinessCase.vue

@@ -306,7 +306,7 @@ const handleShowBottomData = async (res: any) => {
         grid: {
             left: '10',    // 增加左侧空间
             right: '10',   // 增加右侧空间
-            bottom: '10',
+            bottom: '0',
             top: '10',
             containLabel: true
         },
@@ -379,7 +379,7 @@ onBeforeUnmount(() => {
 
 <template>
     <div class="BusinessCaseBox">
-        <SmallTitle>
+        <SmallTitle style="padding-left: 0;">
             <template #extra>
                 <div class="BusinessCaseTabBox">
                     <div :class="selectTab === item.value ? 'BusinessCaseItem selectBusinessCaseItem' : 'BusinessCaseItem'"
@@ -419,11 +419,11 @@ onBeforeUnmount(() => {
 
         <!-- 营收特征分析 -->
         <div class="featureAnalysis">
-            <SmallTitle title="营收特征分析" style="margin-top: 20px;" />
+            <SmallTitle title="营收特征分析" />
 
             <div class="featureAnalysisBox" id="featureAnalysis"></div>
 
-            <SmallTitle title="营收同比分析" style="margin-top: 20px;" />
+            <SmallTitle title="营收同比分析" style="margin-top: 31px;" />
 
             <div class="featureAnalysisBottom" id="featureAnalysisBottom"></div>
         </div>

src/page/index/components/BusinessStructure/BusinessStructure.less

@@ -1,12 +1,12 @@
 .BusinessStructureBox {
     width: 100%;
+    box-sizing: border-box;
+    padding: 3px 0 0 10px;
 
     .BusinessStructureCharts {
         width: 100%;
-        // margin-top: 10px;
         box-sizing: border-box;
-        padding: 0 20px 30px;
+        padding: 22px 0 0 31px;
-
 
         .BusinessStructureUnit {
             font-family: "Microsoft YaHei";
@@ -19,21 +19,24 @@
         }
 
         .BusinessStructure {
-            width: 112px;
+            width: 132px;
-            height: 172px;
+            height: 132px;
+            display: inline-block;
         }
 
         .BusinessStructureDataList {
-            flex: 1;
+            display: inline-block;
+            width: calc(100% - 162px);
+            height: 132px;
             margin-left: 30px;
 
             .BusinessStructureDataBox {
                 // margin-left: 30px;
                 display: flex;
+                padding: 6px 0;
 
                 .BusinessStructureDataLeftBox {
                     box-sizing: border-box;
-                    padding-top: 20px;
 
                     .BusinessStructureItem {
                         display: flex;
@@ -93,7 +96,7 @@
                 }
             }
         }
+    }
 
 
 }
-}

src/page/index/components/BusinessStructure/BusinessStructure.vue

@@ -182,7 +182,6 @@ onBeforeUnmount(() => {
 
         <div class="BusinessStructureCharts">
             <!-- <div class="BusinessStructureUnit">万元</div> -->
-            <div style="display: flex;margin-top: 30px;align-items: center;">
             <div class="BusinessStructure" id="BusinessStructure"></div>
 
             <div class="BusinessStructureDataList">
@@ -202,5 +201,4 @@ onBeforeUnmount(() => {
 
         </div>
     </div>
-    </div>
 </template>

src/page/index/components/BusyTradingRanking/BusyTradingRanking.less

@@ -1,6 +1,5 @@
 .BusyTradingRankingBox {
     width: 100%;
-    height: 150px;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -10,9 +9,12 @@
 
         .BusyTradingRankingDataList {
             width: 100%;
+            height: 120px;
+
 
             .BusyTradingRankingItem {
                 width: 100%;
+                height: 24px;
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
@@ -65,6 +67,7 @@
                 .tradingRankingItemRight {
                     display: flex;
                     justify-content: flex-end;
+
                     .tradingRankingItemTOTALPRICE {
                         font-family: Microsoft YaHei, Microsoft YaHei;
                         font-weight: 400;

src/page/index/components/ConsumptionConversion/ConsumptionConversion.less

@@ -5,7 +5,7 @@
     .ConsumptionConversion {
         width: 100%;
         // height: 100%;
-        height: 174px;
+        height: 163px;
-        margin-top: 13px;
+        margin-top: 18px;
     }
 }

src/page/index/components/ConsumptionConversion/ConsumptionConversion.vue

@@ -36,32 +36,40 @@ onMounted(async () => {
 
     const option = {
         legend: {
-            data: ['客单', '车流'],  // 对应 series 中的 name
             top: 0,              // 距离容器底部距离
             right: 0,
-            itemWidth: 20,          // 图例标记的图形宽度
+            itemWidth: 30,          // 图例标记的图形宽度
             itemHeight: 10,         // 图例标记的图形高度
             textStyle: {
-                color: '#333'       // 图例文字颜色
+                color: '#fff'       // 图例文字颜色
             }
         },
         xAxis: {
             type: 'category',
             data: res.category,
             boundaryGap: true,
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: '#ffffff'
+                }
+            },
+            axisTick: {
+                alignWithLabel: true // 保证刻度线与标签对齐
+            }
         },
         yAxis: [
             {
                 type: 'value',
                 name: '车流量',
                 nameTextStyle: {
-                    color: '#00F6FF' // Y轴名称颜色
+                    color: '#ffffff' // Y轴名称颜色
                 },
                 splitLine: { show: false },
                 axisLine: {
                     show: true,
                     lineStyle: {
-                        color: '#00F6FF'
+                        color: '#ffffff'
                     }
                 },
                 axisLabel: {
@@ -73,28 +81,27 @@ onMounted(async () => {
                 type: 'value',
                 name: '客单量',
                 nameTextStyle: {
-                    color: '#008CFF' // Y轴名称颜色
+                    color: '#ffffff' // Y轴名称颜色
                 },
                 splitLine: { show: false },
                 position: 'right',
                 axisLine: {
                     show: true,
                     lineStyle: {
-                        color: '#008CFF'
+                        color: '#ffffff'
                     }
                 },
                 axisLabel: {
-                    color: '#008CFF',
+                    color: '#ffffff',
-                    formatter: '{value}' // 添加单位
                 },
                 offset: 0 // 确保Y轴紧贴图表
             }
         ],
         grid: {
-            left: '10',    // 增加左侧空间
+            left: '20',    // 增加左侧空间
             right: '10',   // 增加右侧空间
-            bottom: '10',
+            bottom: '0',
-            top: '10',
+            top: '50',
             containLabel: true
         },
         series: [
@@ -102,7 +109,7 @@ onMounted(async () => {
                 name: '车流量',
                 data: res.carResList.map((value: any, index: any) => ({
                     value: value,
-                    symbol: index % 3 === 0 ? 'circle' : 'none',
+                    symbol: index % 2 === 0 ? 'circle' : 'none',
                     symbolSize: 6
                 })),
                 type: 'line',
@@ -120,7 +127,7 @@ onMounted(async () => {
                 name: '客单量',
                 data: res.orderResList.map((value: any, index: any) => ({
                     value: value,
-                    symbol: index % 3 === 0 ? 'circle' : 'none',
+                    symbol: index % 2 === 0 ? 'circle' : 'none',
                     symbolSize: 6
                 })),
                 type: 'line',

src/page/index/components/ConsumptionLevel/ConsumptionLevel.less

@@ -4,8 +4,8 @@
 
     .ConsumptionLevel {
         width: 100%;
-        height: 174px;
+        height: 163px;
-        margin-top: 13px;
+        margin-top: 19px;
     }
 
     .ConsumptionLevelDesc {

src/page/index/components/ConsumptionPeriod/ConsumptionPeriod.less

@@ -4,7 +4,7 @@
 
     .ConsumptionPeriod {
         width: 100%;
-        height: 174px;
+        height: 167px;
-        margin-top: 13px;
+        margin-top: 14px;
     }
 }

src/page/index/components/ConsumptionPeriod/ConsumptionPeriod.vue

@@ -43,23 +43,32 @@ onMounted(async () => {
                 interval: 3,
                 showMinLabel: true,
                 showMaxLabel: true
+            },
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: '#fff'
+                }
+            },
+            axisTick: {
+                alignWithLabel: true // 保证刻度线与标签对齐
             }
         },
         yAxis: {
             type: 'value',
-            name: '车流量',
+            name: '客单占比',
             nameTextStyle: {
-                color: '#00F6FF' // Y轴名称颜色
+                color: '#fff' // Y轴名称颜色
             },
             splitLine: { show: false },
             axisLine: {
                 show: true,
                 lineStyle: {
-                    color: '#00F6FF'
+                    color: '#fff'
                 }
             },
             axisLabel: {
-                color: '#00F6FF',
+                color: '#fff',
                 formatter: '{value}' // 添加单位
             }
         },
@@ -67,12 +76,20 @@ onMounted(async () => {
             left: '10',    // 增加左侧空间
             right: '10',   // 增加右侧空间
             bottom: '10',
-            top: '10',
+            top: '30',
             containLabel: true
         },
         series: [
             {
-                data: res.seriesData,
+                // data: res.seriesData,
+                data: res.seriesData.map((value: any, index: any) => {
+                    return {
+                        value: value,
+                        // 只在显示标签的位置显示symbol
+                        symbol: index % 4 === 0 ? 'circle' : 'none',
+                        symbolSize: 6
+                    }
+                }),
                 type: 'line',
                 smooth: true,
                 lineStyle: {

src/page/index/components/ContractInformation/ContractInformation.less

@@ -0,0 +1,175 @@
+.ContractInformationBox {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px 15px;
+    background: linear-gradient(0deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
+    border-bottom: 1px solid rgba(0, 148, 255, 0.50);
+
+    .ContractInformationBigItem {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0 5px 10px;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+
+        .ContractInformationBigLeft {
+            width: 46px;
+            height: 46px;
+            margin-right: 10px;
+
+            .ContractInformationBigLeftImg {
+                width: 46px;
+                height: 46px;
+            }
+        }
+
+        .ContractInformationBigRight {
+            width: calc(100% - 56px);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .ContractInformationBigRightLeft {
+                .ContractInformationBigRightLabel {
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: #FFFFFF;
+                    text-align: left;
+                    font-style: normal;
+                }
+
+                .ContractInformationBigRightText {
+                    .ContractInformationBigRightSmallLabel {
+                        font-family: Inter, Inter;
+                        font-weight: 400;
+                        font-size: 12px;
+                        color: #7E858A;
+                        text-align: left;
+                        font-style: normal;
+                    }
+
+                    .ContractInformationBigRightValue {
+                        font-family: Inter, Inter;
+                        font-weight: 400;
+                        font-size: 12px;
+                        color: #00F6FF;
+                        text-align: left;
+                        font-style: normal;
+                        margin-left: 5px;
+                    }
+                }
+            }
+
+
+            .ContractInformationBigRightRight {
+                display: flex;
+                align-items: center;
+
+                .ContractInformationBigRightRightValue {
+                    font-family: Impact, Impact;
+                    font-weight: 400;
+                    font-size: 25px;
+                    color: #FFFFFF;
+                    letter-spacing: 2px;
+                    text-align: right;
+                    font-style: normal;
+                    margin-right: 10px;
+                }
+
+                .ContractInformationBigRightRightUnit {
+                    font-family: Inter, Inter;
+                    font-weight: 400;
+                    font-size: 12px;
+                    color: #828689;
+                    text-align: right;
+                    font-style: normal;
+                }
+            }
+        }
+    }
+
+
+    .ContractInformationSmallItem {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0 5px 10px;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+
+        .ContractInformationSmallLeft {
+            width: 33px;
+            height: 33px;
+            margin-right: 17px;
+        }
+
+        .ContractInformationSmallRight {
+            width: calc(100% - 50px);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .ContractInformationSmallRightLeft {
+                .ContractInformationSmallRightLeftTop {
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: #FFFFFF;
+                    text-align: left;
+                    font-style: normal;
+                }
+
+                .ContractInformationSmallRightLeftBottom {
+                    .ContractInformationSmallRightLeftBottomNormalText {
+                        font-family: Inter, Inter;
+                        font-weight: 400;
+                        font-size: 12px;
+                        color: #7B858D;
+                        text-align: left;
+                        font-style: normal;
+                    }
+
+                    .ContractInformationSmallRightLeftBottomValue {
+                        font-family: Inter, Inter;
+                        font-weight: 400;
+                        font-size: 12px;
+                        color: #7B858D;
+                        text-align: left;
+                        font-style: normal;
+                        margin-left: 5px;
+                    }
+                }
+
+
+            }
+
+            .ContractInformationSmallRightRight {
+                display: flex;
+                align-items: flex-end;
+
+                .ContractInformationSmallRightRightValue {
+                    font-family: Impact, Impact;
+                    font-weight: 400;
+                    font-size: 25px;
+                    color: #FFFFFF;
+                    letter-spacing: 2px;
+                    text-align: right;
+                    font-style: normal;
+                }
+
+                .ContractInformationSmallRightRightUnit {
+                    font-family: Inter, Inter;
+                    font-weight: 400;
+                    font-size: 12px;
+                    color: #7B858D;
+                    text-align: right;
+                    font-style: normal;
+                    margin-left: 10px;
+                }
+            }
+
+        }
+    }
+}

src/page/index/components/ContractInformation/ContractInformation.vue

@@ -0,0 +1,225 @@
+<script setup lang="ts">
+import './ContractInformation.less'
+import ContractInformationIcon from '../../../../assets/image/ContractInformationIcon.png'
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+import { handleGetProjectSummaryInfo } from '../../service';
+
+import * as echarts from 'echarts/core';
+import { PieChart } from 'echarts/charts';
+import {
+    GridComponent,
+    TitleComponent,
+    TooltipComponent,
+    LegendComponent
+} from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+
+
+// 注册组件
+echarts.use([
+    PieChart,
+    GridComponent,
+    TitleComponent,
+    TooltipComponent,
+    LegendComponent,
+    CanvasRenderer
+]);
+
+let myChart: echarts.ECharts;
+let myChart2: echarts.ECharts;
+
+// 当前的数据
+let realDataObj = ref<any>()
+// 合作分成
+let shareRevenue = ref<any>()
+// 固定租金
+let FixedRent = ref<any>()
+
+onMounted(async () => {
+    await handleGetData()
+})
+
+// 拿到数据
+const handleGetData = async () => {
+    const req: any = {
+        ProvinceCode: '340000'
+    }
+    const data = await handleGetProjectSummaryInfo(req)
+
+
+    console.log('handleGetDatahandleGetDatahandleGetDatahandleGetData', data);
+    realDataObj.value = data
+
+    shareRevenue.value = data.BusinessTypeSummaryList[0]
+    FixedRent.value = data.BusinessTypeSummaryList[1]
+
+
+
+    const chartDom = document.getElementById('ContractInformation1');
+    if (!chartDom) return;
+    myChart = echarts.init(chartDom);
+
+
+    const chartDom2 = document.getElementById('ContractInformation2');
+    if (!chartDom) return;
+    myChart2 = echarts.init(chartDom2);
+
+
+    const option1 = {
+        series: [
+            {
+                name: 'Access From',
+                type: 'pie',
+                radius: ['80%', '100%'],
+                center: ['50%', '50%'],  // 关键修改：强制居中 [水平位置, 垂直位置]
+                avoidLabelOverlap: false,
+                label: {
+                    show: false
+                },
+                emphasis: false,
+                labelLine: {
+                    show: false
+                },
+                itemStyle: {
+                    color: function (params: any) {
+                        // 自定义颜色逻辑
+                        return params.dataIndex === 0 ? '#00F6FF' : '#0C6370';
+                    }
+                },
+                data: [((shareRevenue?.value.Contract_SignCount / realDataObj?.value.Contract_SignCount) * 100), 100 - ((shareRevenue?.value.Contract_SignCount / realDataObj?.value.Contract_SignCount) * 100)]
+            }
+        ]
+    };
+
+    const option2 = {
+        series: [
+            {
+                name: 'Access From',
+                type: 'pie',
+                radius: ['80%', '100%'],
+                center: ['50%', '50%'],  // 关键修改：强制居中 [水平位置, 垂直位置]
+                avoidLabelOverlap: false,
+                label: {
+                    show: false
+                },
+                emphasis: false,
+                labelLine: {
+                    show: false
+                },
+                itemStyle: {
+                    color: function (params: any) {
+                        // 自定义颜色逻辑
+                        return params.dataIndex === 0 ? '#00F6FF' : '#0C6370';
+                    }
+                },
+                data: [((FixedRent?.value.Contract_SignCount / realDataObj?.value.Contract_SignCount) * 100), 100 - ((FixedRent?.value.Contract_SignCount / realDataObj?.value.Contract_SignCount) * 100)]
+            }
+        ]
+    };
+
+
+
+    myChart.setOption(option1);
+    myChart.resize();
+
+    myChart2.setOption(option2);
+    myChart2.resize();
+    window.addEventListener('resize', resizeChart);
+
+}
+
+
+const resizeChart = () => {
+    myChart?.resize();
+    myChart2?.resize();
+};
+
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', resizeChart);
+    myChart?.dispose();
+    myChart2?.dispose();
+});
+
+</script>
+
+
+<template>
+    <div class="ContractInformationBox">
+        <div class="ContractInformationBigItem">
+            <div class="ContractInformationBigLeft">
+                <img :src="ContractInformationIcon" class="ContractInformationBigLeftImg" />
+            </div>
+
+            <div class="ContractInformationBigRight">
+                <div class="ContractInformationBigRightLeft">
+                    <div class="ContractInformationBigRightLabel">合同信息</div>
+                    <div class="ContractInformationBigRightText">
+                        <span class="ContractInformationBigRightSmallLabel">签约合同</span>
+                        <span class="ContractInformationBigRightValue">{{ realDataObj?.Contract_SignCount || ''
+                        }}</span>
+                    </div>
+                </div>
+
+                <div class="ContractInformationBigRightRight">
+                    <div class="ContractInformationBigRightRightValue">{{ realDataObj?.Contract_Amount || '' }}
+                    </div>
+                    <div class="ContractInformationBigRightRightUnit">万元</div>
+                </div>
+
+            </div>
+        </div>
+
+
+        <div class="ContractInformationSmallItem">
+            <div class="ContractInformationSmallLeft" id="ContractInformation1"></div>
+            <div class="ContractInformationSmallRight">
+                <div class="ContractInformationSmallRightLeft">
+                    <div class="ContractInformationSmallRightLeftTop">合作分成</div>
+                    <div class="ContractInformationSmallRightLeftBottom">
+                        <span class="ContractInformationSmallRightLeftBottomNormalText">合同</span>
+                        <span class="ContractInformationSmallRightLeftBottomValue">{{ shareRevenue?.Contract_SignCount
+                            || "" }}</span>
+                        <span class="ContractInformationSmallRightLeftBottomNormalText"
+                            style="margin-left: 10px;">占比</span>
+                        <span class="ContractInformationSmallRightLeftBottomValue">
+                            {{ realDataObj?.Contract_SignCount ? ((shareRevenue?.Contract_SignCount /
+                                realDataObj?.Contract_SignCount) * 100).toFixed(2) + '%' : '-' }}
+                        </span>
+                    </div>
+                </div>
+
+                <div class="ContractInformationSmallRightRight">
+                    <div class="ContractInformationSmallRightRightValue">{{ shareRevenue?.Contract_Amount || '' }}
+                    </div>
+                    <div class="ContractInformationSmallRightRightUnit">万元</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="ContractInformationSmallItem" style="border-bottom: none;padding-bottom: 0;">
+            <div class="ContractInformationSmallLeft" id="ContractInformation2"></div>
+            <div class="ContractInformationSmallRight">
+                <div class="ContractInformationSmallRightLeft">
+                    <div class="ContractInformationSmallRightLeftTop">固定租金</div>
+                    <div class="ContractInformationSmallRightLeftBottom">
+                        <span class="ContractInformationSmallRightLeftBottomNormalText">合同</span>
+                        <span class="ContractInformationSmallRightLeftBottomValue">{{ FixedRent?.Contract_SignCount
+                            || "" }}</span>
+                        <span class="ContractInformationSmallRightLeftBottomNormalText"
+                            style="margin-left: 10px;">占比</span>
+                        <span class="ContractInformationSmallRightLeftBottomValue">
+                            {{ realDataObj?.Contract_SignCount ? ((FixedRent?.Contract_SignCount /
+                                realDataObj?.Contract_SignCount) * 100).toFixed(2) + '%' : '-' }}
+                        </span>
+                    </div>
+                </div>
+
+                <div class="ContractInformationSmallRightRight">
+                    <div class="ContractInformationSmallRightRightValue">{{ FixedRent?.Contract_Amount || '' }}
+                    </div>
+                    <div class="ContractInformationSmallRightRightUnit">万元</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

src/page/index/components/CoreBusinessData/CoreBusinessData.less

@@ -118,6 +118,9 @@
     .newCoreBusinessBox {
         display: flex;
         align-items: center;
+        justify-content: center;
+        background: rgba(3, 22, 38, 0.2);
+
 
         .newCoreBusinessItem {
             box-sizing: border-box;

src/page/index/components/CustomerAgeGroup/CustomerAgeGroup.less

@@ -1,17 +1,23 @@
 .CustomerAgeGroupBox {
-    width: 25%;
+    width: calc((100% - 28px) / 3);
     display: inline-block;
     height: 210px;
 
     .CustomerAgeGroupCharts {
         width: 100%;
         height: 182px;
-        background: linear-gradient(0deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
+        // background: linear-gradient(0deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
-        box-sizing: border-box;
+        // box-sizing: border-box;
-        padding: 20px 20px 18px;
+        // padding: 20px 20px 18px;
         display: flex;
         flex-direction: column;
         align-items: center;
+        // margin-top: 5px;
+        box-sizing: border-box;
+        padding: 10px 10px 18px;
+        background-image: url('../../../../assets/image/smallModalBg.png');
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
 
         .CustomerAgeGroupUnit {
             font-family: "Microsoft YaHei";
@@ -26,8 +32,8 @@
         }
 
         .CustomerAgeGroup {
-            width: 86px;
+            width: 190px;
-            height: 86px;
+            height: 154px;
         }
 
         .legendBox {

src/page/index/components/CustomerAgeGroup/CustomerAgeGroup.vue

@@ -49,34 +49,65 @@ onMounted(async () => {
             // },
             formatter: function (params: any) {  // 自定义提示框内容
                 return `
-                    <div>${res.category[params?.dataIndex]}：${params?.data || ""}万人, 占比：${params?.percent || ''}%</div>
+                    <div>${res.category[params?.dataIndex]}：${params?.data || ""}万人, 占比：${res?.percentData[params?.dataIndex] || ''}%</div>
                 `
                 // return `
                 //     <div style="font-weight:bold">${params.data.name} ${params?.percent}%  ${res.realData[params.dataIndex].toLocaleString()}元</div>
                 // `;
             }
         },
-        series: [
+        xAxis: {
-            {
+            type: 'category',
-                name: 'Access From',
+            data: res.category,
-                type: 'pie',
+            axisLabel: {
-                radius: ['0%', '100%'],
+                interval: 0, // 强制显示所有标签
-                avoidLabelOverlap: false,
+                hideOverlap: false, // 禁止自动隐藏重叠标签
+            },
+            axisTick: {
+                alignWithLabel: true // 保证刻度线与标签对齐
+            }
+        },
+        yAxis: {
+            type: 'value',
+            name: '%',
+            splitLine: { show: false },
+            axisLine: {
+                show: true,
+            }
+        },
+        grid: {
+            left: '10',    // 增加左侧空间
+            right: '10',   // 增加右侧空间
+            bottom: '10',
+            top: '30',
+            containLabel: true
+        },
+        series: {
+            // data: [120, 200, 150, 80, 70, 110, 130],
+            data: res.seriesData,
+            realData: res.realData,
+            type: 'bar',
+            barWidth: '6',
+            showBackground: true,
+            backgroundStyle: {
+                borderRadius: [4, 4, 0, 0],
+                // color: 'rgba(23, 42, 70, 1)'
+                color: 'rgba(0, 148, 255, 0.1)'
+            },
             itemStyle: {
+                borderRadius: [4, 4, 0, 0],
+                // 动态返回渐变颜色
                 color: function (params: any) {
-                        return colorList[params.dataIndex];
+                    return new echarts.graphic.LinearGradient(
-                    }
+                        0, 0, 0, 1, // 渐变方向（垂直）
-                },
+                        [
-                label: {
+                            { offset: 0, color: '#008CFF' }, // 渐变起始色
-                    show: false
+                            { offset: 1, color: '#00F6FF' }  // 渐变结束色
-                },
-                emphasis: false,
-                labelLine: {
-                    show: false
-                },
-                data: res.pieData
-            }
                         ]
+                    );
+                }
+            }
+        },
     };
 
 
@@ -89,7 +120,7 @@ onMounted(async () => {
 const handleGetData = async () => {
     let category: any = []
     let seriesData: any = []
-    let realData: any = []
+    let percentData: any = []
 
     const req: any = {
         provinceCode: '530000',
@@ -97,17 +128,22 @@ const handleGetData = async () => {
     }
     const data = await handleGetCustomerAgeRatio(req)
 
+
     for (let i = 0; i < 4; i++) {
-        let sum: number = (data[0].data[i] + data[1].data[i]).toFixed(2)
+        let sum: number = (data[0].data[i] + data[1].data[i])
-        seriesData.push(sum)
+        seriesData.push(sum.toFixed(2))
+        percentData.push((sum / 200 * 100).toFixed(2))
     }
 
 
+
+
     let res: any = {
         category: ["25以下", "25-35", "35-45", "45以上"],// x轴的内容
-        pieData: seriesData,// y轴的数据
+        seriesData: seriesData,// y轴的数据
-        realData: realData// 真实数据
+        percentData: percentData// 真实数据
     }
+    console.log('hfuhdsuafsdjfh', res);
     return res
 }
 
@@ -131,13 +167,13 @@ onBeforeUnmount(() => {
             <!-- <div class="CustomerAgeGroupUnit">万人</div> -->
             <div class="CustomerAgeGroup" id="CustomerAgeGroup"></div>
 
-            <div class="legendBox">
+            <!-- <div class="legendBox">
                 <div class="legendItem" v-for="(item, index) in categoryList" :key="index"
                     :style="{ marginBottom: index <= 1 ? '6px' : '' }">
                     <div class="legendIcon" :style="{ background: colorList[index] }"></div>
                     <div class="legendLabel">{{ item }}</div>
                 </div>
-            </div>
+            </div> -->
         </div>
     </div>
 </template>

src/page/index/components/CustomerConsumptionPreferences/CustomerConsumptionPreferences.less

@@ -2,13 +2,13 @@
     width: 100%;
 
     .CustomerConsumptionPreferencesContent {
-        margin-top: 25px;
+        margin-top: 14px;
         width: 100%;
-        height: 212px;
+        height: 167px;
 
         .CustomerConsumptionPreferencesCharts {
             width: 100%;
-            height: 212px;
+            height: 167px;
         }
     }
 }

src/page/index/components/CustomerConsumptionPreferences/CustomerConsumptionPreferences.vue

@@ -65,11 +65,23 @@ const handleGoMounted = async () => {
                 interval: 0          // 强制显示所有标签
                 // rotate: 30,  // 标签旋转30度（防止重叠）
             },
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: '#fff'
+                }
+            },
             // data: res.category
         },
         yAxis: {
             type: 'value',
             name: "万辆",
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: '#fff'
+                }
+            },
             splitLine: { show: false }  // 隐藏刻度线
         },
         series: [

src/page/index/components/CustomerGroup/CustomerGroup.less

@@ -3,7 +3,7 @@
 
     .CustomerGroupBoxContent{
         width: 100%;
-        height: 173px;
+        height: 163px;
-        margin-top: 20px;
+        margin-top: 18px;
     }
 }

src/page/index/components/CustomerGroup/CustomerGroup.vue

@@ -77,7 +77,10 @@ const handleShowCharts = async () => {
                 show: false // 隐藏刻度线
             },
             axisLine: {
-                show: false // 隐藏轴线
+                show: true, // 隐藏轴线
+                lineStyle: {
+                    color: '#fff'
+                }
             },
             splitLine: {
                 show: false // 确保网格线隐藏
@@ -85,29 +88,32 @@ const handleShowCharts = async () => {
         },
         yAxis: {
             type: 'value',
-            name: '交易金额',
             axisLabel: {
+                color: '#fff',
                 formatter: '{value}'
             },
             axisTick: {
                 show: false // 隐藏刻度线
             },
             axisLine: {
-                show: false // 隐藏轴线
+                show: true,// 隐藏轴线
+                lineStyle: {
+                    color: '#fff'
+                }
             },
             splitLine: {
                 show: false // 确保网格线隐藏
-            }
+            },
         },
         series: [{
             name: '用户交易',
             type: 'scatter',
-            symbolSize: function (data) {
+            symbolSize: function (data: any) {
                 return Math.sqrt(data[2]) * 5; // 气泡大小与占比相关
             },
             data: res,
             itemStyle: {
-                color: function (params) {
+                color: function (params: any) {
                     // 按性别区分颜色
                     const gender = params.data[3]; // 第四项是性别
                     return gender === '男性' ? '#0094FF' : '#FF307C'; // 男性蓝色，女性红色
@@ -134,7 +140,7 @@ const handleShowCharts = async () => {
         // 提示框格式化
         tooltip: {
             trigger: 'item',
-            formatter: function (params) {
+            formatter: function (params: any) {
                 const data = params.data;
                 return `
                 年龄: ${data[0]}岁<br>

src/page/index/components/DailyInspection/DailyInspection.less

@@ -0,0 +1,62 @@
+.DailyInspectionBox {
+    width: 100%;
+
+    .DailyInspectionContent {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 20px 28px 0;
+        display: flex;
+        align-items: center;
+
+        .DailyInspectionCharts {
+            width: 118px;
+            height: 118px;
+            margin-right: 38px;
+        }
+
+        .DailyInspectionRightBox {
+            width: calc(100% - 156px);
+            height: 100%;
+
+            .DailyInspectionRightBoxTop {
+                font-family: Microsoft YaHei, Microsoft YaHei;
+                font-weight: 400;
+                font-size: 12px;
+                color: #E0E3E4;
+                text-align: left;
+                font-style: normal;
+            }
+
+            .DailyInspectionRightBoxBottom {
+                margin-top: 10px;
+                width: 100%;
+                display: flex;
+                align-items: center;
+
+                .DailyInspectionRightBoxBottomItem {
+                    width: 50%;
+
+                    .DailyInspectionRightBoxBottomItemValue {
+                        font-family: Impact, Impact;
+                        font-weight: 400;
+                        font-size: 15px;
+                        color: #FFFFFF;
+                        letter-spacing: 1px;
+                        text-align: left;
+                        font-style: normal
+                    }
+
+                    .DailyInspectionRightBoxBottomItemLabel {
+                        font-family: Microsoft YaHei, Microsoft YaHei;
+                        font-weight: 400;
+                        font-size: 12px;
+                        color: #3D4A54;
+                        text-align: left;
+                        font-style: normal;
+                        margin-top: 10px;
+                    }
+                }
+            }
+        }
+    }
+}

src/page/index/components/DailyInspection/DailyInspection.vue

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import * as echarts from 'echarts/core';
+import { PieChart } from 'echarts/charts';
+import {
+    GridComponent,
+    TitleComponent,
+    TooltipComponent,
+    LegendComponent,
+    GraphicComponent
+} from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import returnRateBg from '../../../../assets/image/returnRateBg.png'
+import { handleGetPatrolAnalysis } from '../../service';
+import moment from 'moment';
+import SmallTitle from '../smallTitle/smallTitle.vue';
+import './DailyInspection.less'
+
+
+// 注册组件
+echarts.use([
+    PieChart,
+    GridComponent,
+    TitleComponent,
+    TooltipComponent,
+    LegendComponent,
+    GraphicComponent,
+    CanvasRenderer
+]);
+
+let myChart: echarts.ECharts;
+// 自定义颜色列表
+const colorList = ['#7D4CD2', '#2E2C5D'];
+// 日常巡检数据
+let dailyDetailObj = ref<any>()
+
+onMounted(async () => {
+    await handleGoMounted()
+})
+
+const handleGoMounted = async () => {
+    const res: any = await handleGetData()
+
+    const chartDom = document.getElementById('DailyInspectionCharts');
+    if (!chartDom) return;
+
+    myChart = echarts.init(chartDom);
+
+    const option = {
+        tooltip: {  // 新增 tooltip 配置
+            trigger: 'item',  // 触发类型：坐标轴触发
+            axisPointer: {    // 坐标轴指示器配置
+                type: 'shadow' // 阴影指示器（适合柱状图）
+            },
+            formatter: function (params: any) {  // 自定义提示框内容
+                return `
+                    <div style="font-weight:bold">${params.data.name} ${params?.percent}%  ${res.realData[params.dataIndex]}</div>
+                `;
+            }
+        },
+        graphic: {  // 关键配置：在图表中心添加图片
+            elements: [
+                {
+                    type: 'image',
+                    style: {
+                        image: returnRateBg,
+                        width: 83,
+                        height: 83
+                    },
+                    left: 'center',
+                    top: 'center',
+                    z: 10
+                },
+                {
+                    // 中心文字（叠加在图片上）
+                    type: 'text',
+                    style: {
+                        text: `${dailyDetailObj.value.CompleteRate || '-'}`, // 要显示的文字内容
+                        font: 'bold 20px Arial', // 字体样式
+                        fill: '#FFFFFF', // 文字颜色
+                        textAlign: 'center',
+                        textVerticalAlign: 'middle'
+                    },
+                    left: 'center',
+                    top: 'center',
+                    z: 20 // 层级高于图片
+                }
+            ]
+        },
+        series: [
+            {
+                name: 'Access From',
+                type: 'pie',
+                radius: ['85%', '100%'],
+                center: ['50%', '50%'],  // 关键修改：强制居中 [水平位置, 垂直位置]
+                avoidLabelOverlap: false,
+
+                itemStyle: {
+                    color: function (params: any) {
+                        return colorList[params.dataIndex];
+                    }
+                },
+                label: {
+                    show: false
+                },
+                emphasis: false,
+                labelLine: {
+                    show: false
+                },
+                data: res.seriesData
+            }
+        ]
+    };
+
+    myChart.setOption(option);
+    myChart.resize();
+    window.addEventListener('resize', resizeChart);
+}
+
+// 拿到传入的数据
+const props = defineProps<{
+    currentService?: any;
+}>();
+
+// 监听传入的选中服务区
+watch(
+    () => props.currentService,
+    (newVal, oldVal) => {
+        handleGoMounted()
+    },
+    { deep: true }
+);
+
+// 业态结构占比
+const handleGetData = async () => {
+
+    const req: any = {
+        StartDate: '2025-01-01',
+        EndDate: '2025-01-01',
+        provinceCode: "340000"
+    }
+
+    const data = await handleGetPatrolAnalysis(req)
+
+    console.log('业态结构占比', data)
+
+
+    dailyDetailObj.value = data
+
+
+    let res: any = {
+        // category: category,// x轴的内容
+        seriesData: [data.CompleteRate, 100 - data.CompleteRate],// y轴的数据
+        // realData: realData// 真实数据
+    }
+    return res
+}
+
+
+const resizeChart = () => {
+    myChart?.resize();
+};
+
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', resizeChart);
+    myChart?.dispose();
+});
+</script>
+
+
+
+
+<template>
+    <div class="DailyInspectionBox">
+        <SmallTitle title="日常巡检" />
+
+        <div class="DailyInspectionContent">
+            <div class="DailyInspectionCharts" id="DailyInspectionCharts"></div>
+
+            <div class="DailyInspectionRightBox">
+                <div class="DailyInspectionRightBoxTop">达标率/全省(%)</div>
+                <div class="DailyInspectionRightBoxBottom">
+                    <div class="DailyInspectionRightBoxBottomItem">
+                        <div class="DailyInspectionRightBoxBottomItemValue">{{ dailyDetailObj?.RectifyCount || '-' }}
+                        </div>
+                        <div class="DailyInspectionRightBoxBottomItemLabel">已整改（个）</div>
+                    </div>
+
+                    <div class="DailyInspectionRightBoxBottomItem">
+                        <div class="DailyInspectionRightBoxBottomItemValue">{{ dailyDetailObj?.UnRectifyCount || '-' }}
+                        </div>
+                        <div class="DailyInspectionRightBoxBottomItemLabel">未整改(个)</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

src/page/index/components/DetailedPayment/DetailedPayment.less

@@ -0,0 +1,13 @@
+.DetailedPaymentBox {
+    width: 100%;
+
+    .DetailedPaymentCharts {
+        width: 100%;
+        margin-top: 15px;
+
+        .DetailedPayment {
+            width: 100%;
+            height: 145px;
+        }
+    }
+}

src/page/index/components/DetailedPayment/DetailedPayment.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import SmallTitle from '../smallTitle/smallTitle.vue'
+import './DetailedPayment.less'
+import { onMounted, onBeforeUnmount } from 'vue';
+import * as echarts from 'echarts/core';
+import { RadarChart } from 'echarts/charts';
+import {
+    GridComponent,
+    TitleComponent,
+    TooltipComponent,
+    LegendComponent
+} from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+import moment from 'moment';
+import { handleGetBusinessTradeRevenue, handleGetProjectYearlyArrearageList, handleGetSPBayonetList } from '../../service';
+
+// 注册组件
+echarts.use([
+    RadarChart,
+    GridComponent,
+    TitleComponent,
+    TooltipComponent,
+    LegendComponent,
+    CanvasRenderer
+]);
+
+let myChart: echarts.ECharts;
+
+onMounted(async () => {
+
+    const res: any = await handleGetSectionFlowCount()
+
+    const chartDom = document.getElementById('DetailedPayment');
+    if (!chartDom) return;
+
+
+    myChart = echarts.init(chartDom);
+
+    const option = {
+        // tooltip: { // 新增 tooltip 配置
+        //     trigger: 'item',
+        //     formatter: function (params: any) {
+        //         return `
+        //         <div style="font-weight:bold">${params.name}</div>
+        //     `;
+        //     }
+        // },
+        radar: {
+            indicator: res.category,
+            shape: 'circle',
+            splitNumber: 5,
+            radius: '60%', // 调整雷达图大小，留出空间给文字
+            center: ['50%', '60%'], // 2. 确保居中
+            axisName: {
+                color: 'rgb(255, 255, 255)',
+                padding: 10
+            },
+            splitLine: {
+                lineStyle: {
+                    color: [
+                        'rgba(25, 46, 76, 1)',
+                        'rgba(25, 46, 76, 1)',
+                        'rgba(25, 46, 76, 1)',
+                        'rgba(25, 46, 76, 1)',
+                        'rgba(25, 46, 76, 1)',
+                        'rgba(25, 46, 76, 1)',
+                    ]
+                }
+            },
+            splitArea: {
+                show: false
+            },
+            axisLine: {
+                lineStyle: {
+                    color: 'rgba(25, 46, 76, 1)',
+                }
+            }
+        },
+        series: [
+            {
+                type: 'radar',
+                lineStyle: {
+                    width: 1,
+                    opacity: 0.5
+                },
+                data: res.seriesData,
+                symbol: 'none',
+                itemStyle: {
+                    color: '#0289ED'
+                },
+                areaStyle: {
+                    opacity: 0.1
+                }
+            }
+        ]
+    };
+
+    myChart.setOption(option);
+    myChart.resize();
+    window.addEventListener('resize', resizeChart);
+})
+
+// 拿到业态偏好数据
+const handleGetSectionFlowCount = async () => {
+
+    const req: any = {
+
+    }
+    const data = await handleGetProjectYearlyArrearageList(req)
+    console.log('datadatadatadatadatadata', data);
+
+    let category: any = []
+    let seriesData: any = []
+    let realData: any = []
+
+    let list: any = data.ProjectCompleteDetailList
+
+    let max: number = 0
+
+    if (list && list.length > 0) {
+        list.forEach((item: any) => {
+            let prent: number = Number(((item.Account_Amount > 0 ? item.Payment_Amount / item.Account_Amount : 0) * 100).toFixed(2))
+            if (prent > max) {
+                max = prent
+            }
+            category.push({ name: item.Account_Name, max: max })
+            seriesData.push(prent)
+            // realData.push(item.data)
+        })
+    }
+
+    let res: any = {
+        category: category,// x轴的内容
+        seriesData: seriesData,// y轴的数据
+        realData: realData// 真实数据
+    }
+    return res
+}
+
+
+const resizeChart = () => {
+    myChart?.resize();
+};
+
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', resizeChart);
+    myChart?.dispose();
+});
+
+</script>
+
+
+
+
+<template>
+    <div class="DetailedPaymentBox">
+        <SmallTitle :title="`年详细款项完成进度`"></SmallTitle>
+
+        <div class="DetailedPaymentCharts">
+            <!-- <div class="DetailedPaymentUnit">万元</div> -->
+            <div class="DetailedPaymentChartsContent">
+                <div class="DetailedPayment" id="DetailedPayment"></div>
+            </div>
+        </div>
+    </div>
+</template>

src/page/index/components/FestivalRevenue/FestivalRevenue.less

@@ -1,10 +1,11 @@
 .FestivalRevenueBox {
     width: 100%;
-    height: 250px;
+    // height: 250px;
     box-sizing: border-box;
+    padding: 20px 11px 0;
     // padding: 35px 20px 40px; // 老的
-    padding: 20px 10px 30px;
+    // padding: 20px 10px 30px;
-    background: linear-gradient(0deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
+    // background: linear-gradient(0deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
     // backdrop-filter: blur(10px);
     /* 高斯模糊效果 */
     // -webkit-backdrop-filter: blur(10px);
@@ -12,6 +13,6 @@
 
     .FestivalRevenue {
         width: 100%;
-        height: 100%;
+        height: 190px;
     }
 }

src/page/index/components/FestivalRevenue/FestivalRevenue.vue

@@ -10,7 +10,7 @@ import {
 } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 import { onBeforeUnmount, onMounted, watch } from 'vue';
-import { handleGetHolidayAnalysis } from '../../service';
+import { handleGetHolidayAnalysis, handleGetHolidayDailyAnalysis } from '../../service';
 import moment from 'moment';
 
 // 注册组件
@@ -70,8 +70,7 @@ const handleGoMounted = async () => {
         },
         yAxis: {
             type: 'value',
-            name: '营收',
+            name: '万元',
-
             splitLine: { show: false },
             axisLine: {
                 show: true,
@@ -81,7 +80,7 @@ const handleGoMounted = async () => {
             left: '10',    // 增加左侧空间
             right: '10',   // 增加右侧空间
             bottom: '10',
-            top: '10',
+            top: '30',
             containLabel: true
         },
         series: [
@@ -119,8 +118,8 @@ const handleGoMounted = async () => {
             },
             formatter: function (params: any) {
                 console.log('djidasjd', params);
-                let str1: string = `${params[0].seriesName}(${res.category[params[0].dataIndex]})：${params[0].value}万元`
+                let str1: string = `${params[0].seriesName}(${res.currentDateList[params[0].dataIndex]})：${res.currentYearReal[params[0].dataIndex].toLocaleString()}元`
-                let str2: string = `${params[1].seriesName}(${res.category[params[0].dataIndex]})：${params[1].value}万元`
+                let str2: string = `${params[1].seriesName}(${res.lastYearDateList[params[0].dataIndex]})：${res.lastYearReal[params[1].dataIndex].toLocaleString()}元`
 
                 return `<div>
                     <div>${str1}</div>
@@ -139,11 +138,16 @@ const handleGoMounted = async () => {
 // 拿到数据
 const handleGetData = async () => {
 
-    let category: any = ["4.29", "4.30", "5.01", "5.2", "5.3", "5.4"]
+    let category: any = []
-    let currentYear: any = [50, 40, 36, 85, 46, 77]
+    // "4.29", "4.30", "5.01", "5.2", "5.3", "5.4"
-    let lastYear: any = [33, 23, 56, 12, 45, 44]
+    // let currentYear: any = [50, 40, 36, 85, 46, 77]
-    // let currentYear: any = []
+    // let lastYear: any = [33, 23, 56, 12, 45, 44]
-    // let lastYear: any = []
+    let currentYear: any = []
+    let currentYearReal: any = []
+    let currentDateList: any = []
+    let lastYear: any = []
+    let lastYearReal: any = []
+    let lastYearDateList: any = []
 
     const req: any = {
         // pushProvinceCode: 530000,
@@ -154,17 +158,30 @@ const handleGetData = async () => {
         StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
         ServerpartId: props.currentService?.SERVERPART_ID || "",
     }
-    const data = await handleGetHolidayAnalysis(req)
+    const data = await handleGetHolidayDailyAnalysis(req)
     console.log('dsijdasijdaiosd', data)
-    if (data.curYearSelfRevenue) {
+    if (data && data.length > 0) {
-
+        data.forEach((item: any) => {
+            if (item.name !== '累计') {
+                category.push(`第${item.name}天`)
+                currentYear.push(Number(item.value) / 10000)
+                currentYearReal.push(Number(item.value))
+                lastYear.push(Number(item.data) / 10000)
+                lastYearReal.push(Number(item.data))
+                currentDateList.push(item.date.split(',')[0])
+                lastYearDateList.push(item.date.split(',')[1])
+            }
+        })
     }
-
 
     let res: any = {
         category: category,// x轴的内容
         currentYear: currentYear,// y轴的数据
-        lastYear: lastYear
+        lastYear: lastYear,
+        currentYearReal: currentYearReal,
+        lastYearReal: lastYearReal,
+        currentDateList: currentDateList,
+        lastYearDateList: lastYearDateList,
     }
     return res
 }

src/page/index/components/GenderCustomerGroup/GenderCustomerGroup.less

@@ -1,12 +1,15 @@
 .GenderCustomerGroupBox {
-    width: 25%;
+    width: calc((100% - 28px) / 3);
     display: inline-block;
     height: 210px;
 
     .GenderCustomerGroupCharts {
         width: 100%;
         height: 182px;
-        background: linear-gradient(0deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
+        // background: linear-gradient(0deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
+        background-image: url('../../../../assets/image/smallModalBg.png');
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
         box-sizing: border-box;
         padding: 20px 64px 18px;
 
@@ -47,6 +50,7 @@
                         flex-direction: column;
                         align-items: center;
                         justify-content: center;
+
                         .legendIcon {
                             width: 14px;
                             height: 14px;

src/page/index/components/HotProductList/HotProductList.less

@@ -4,7 +4,7 @@
 
     .HotProductListCharts {
         width: 100%;
-        height: 366px;
+        height: 196px;
         box-sizing: border-box;
         padding: 10px 10px 0;
 

src/page/index/components/MultiIndustryIncome/MultiIndustryIncome.less

@@ -1,5 +1,7 @@
 .MultiIndustryIncomeBox {
     width: 100%;
+    box-sizing: border-box;
+    padding: 3px 0 0 10px;
 
     .MultiIndustryIncomeCharts {
         width: 100%;
@@ -17,7 +19,7 @@
 
         .MultiIndustryIncome {
             width: 100%;
-            height: 194px;
+            height: 134px;
         }
 
         .YOYBox,

src/page/index/components/MultiIndustryIncome/MultiIndustryIncome.vue

@@ -48,13 +48,14 @@ const handleGoMounted = async () => {
         },
         yAxis: {
             type: 'value',
+            name: "万元",
             splitLine: { show: false }  // 隐藏刻度线
         },
         grid: {
             left: '0',    // 左侧间距
             right: '0',   // 右侧间距
             bottom: '0',    // 底部间距
-            top: '10',       // 顶部间距
+            top: '30',       // 顶部间距
             containLabel: true // 确保坐标轴标签在grid内
         },
         series: [
@@ -63,23 +64,17 @@ const handleGoMounted = async () => {
                 realData: res.realData,
                 type: 'bar',
                 smooth: true,
+                showBackground: true,
                 barWidth: '6',
                 backgroundStyle: {
                     borderRadius: [4, 4, 0, 0],
-                    color: 'rgba(23, 42, 70, 1)'
+                    // color: 'rgba(23, 42, 70, 1)'
+                    color: 'rgba(0, 148, 255, 0.1)'
                 },
                 itemStyle: {
                     borderRadius: [4, 4, 0, 0],
                     // 动态返回渐变颜色
-                    color: function (params: any) {
+                    color: '#69BCFF'
-                        return new echarts.graphic.LinearGradient(
-                            0, 0, 0, 1,
-                            [
-                                { offset: 0, color: '#018FFF' }, // 渐变起始色
-                                { offset: 1, color: '#00F4FF' }  // 渐变结束色
-                            ]
-                        );
-                    }
                 }
             }
         ],
@@ -144,7 +139,7 @@ const handleGetSectionFlowCount = async () => {
     if (list && list.length > 0) {
         list.forEach((item: any) => {
             category.push(item.name)
-            seriesData.push(Number(item.value))
+            seriesData.push(Number(item.value) / 10000)
             realData.push(item.data)
         })
     }

src/page/index/components/PassengerFlowChanges/PassengerFlowChanges.less

@@ -21,7 +21,7 @@
 
         .PassengerFlowChanges {
             width: 100%;
-            height: 134px;
+            height: 140px;
         }
     }
 }

src/page/index/components/PassengerFlowChanges/PassengerFlowChanges.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import SmallTitle from '../smallTitle/smallTitle.vue'
 import './PassengerFlowChanges.less'
-import { onMounted, onBeforeUnmount, watch } from 'vue';
+import { onMounted, onBeforeUnmount, watch, ref } from 'vue';
 import * as echarts from 'echarts/core';
 import { LineChart } from 'echarts/charts';
 import {
@@ -25,6 +25,8 @@ echarts.use([
 ]);
 
 let myChart: echarts.ECharts;
+// 当前查询的时间
+let searchTime = ref<string>()
 
 onMounted(async () => {
   await handleGoMounted()
@@ -57,7 +59,7 @@ const handleGoMounted = async () => {
     xAxis: {
       type: 'category',
       data: res.category,
-      boundaryGap: true,
+      // boundaryGap: true,
       axisLabel: {
         interval: 3,
         showMinLabel: true,
@@ -68,39 +70,39 @@ const handleGoMounted = async () => {
       {
         type: 'value',
         name: '车流量',
-        nameTextStyle: {
-          color: '#00FFFF' // Y轴名称颜色
-        },
         splitLine: { show: false },
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#00FFFF'
+            color: '#FFFFFF'
           }
         },
         axisLabel: {
-          color: '#00FFFF',
           formatter: '{value}' // 添加单位
+        },
+        nameTextStyle: {
+          color: '#666',
+          padding: [0, 0, 0, 30]  // 调整单位位置
         }
       },
       {
         type: 'value',
         name: '客单量',
-        nameTextStyle: {
-          color: '#FFA500' // Y轴名称颜色
-        },
         splitLine: { show: false },
         position: 'right',
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#FFA500'
+            color: '#FFFFFF'
           }
         },
         axisLabel: {
-          color: '#FFA500',
           formatter: '{value}' // 添加单位
         },
+        nameTextStyle: {
+          color: '#666',
+          padding: [0, 0, 0, 30]  // 调整单位位置
+        },
         offset: 0 // 确保Y轴紧贴图表
       }
     ],
@@ -108,7 +110,7 @@ const handleGoMounted = async () => {
       left: '10',    // 增加左侧空间
       right: '10',   // 增加右侧空间
       bottom: '10',
-      top: '10',
+      top: '30',
       containLabel: true
     },
     series: [
@@ -120,7 +122,7 @@ const handleGoMounted = async () => {
           symbolSize: 6
         })),
         type: 'line',
-        smooth: true,
+        // smooth: true,
         lineStyle: {
           width: 2,
           color: '#00FFFF'
@@ -138,7 +140,7 @@ const handleGoMounted = async () => {
           symbolSize: 6
         })),
         type: 'line',
-        smooth: true,
+        // smooth: true,
         lineStyle: {
           width: 2,
           color: '#FFA500' // 改为橙色
@@ -182,8 +184,11 @@ const handleGetData = async () => {
     TimeSpan: 1
   }
 
+  searchTime.value = moment(req.Statistics_Date).format('MM')
+
   const data = await handleGetTransactionConvert(req)
 
+  console.log('fhdusyfusahfjsdh', data);
 
   // 客单数据
   let customerOrder = data.TransactionList
@@ -222,6 +227,10 @@ const handleGetData = async () => {
     customerOrderRealList: customerOrderRealList
     // realData: realData// 真实数据
   }
+
+  console.log('fjioadhgasdhnfjks', res);
+
+
   return res
 
 
@@ -262,13 +271,14 @@ onBeforeUnmount(() => {
 
 <template>
   <div class="PassengerFlowChangesBox">
-    <SmallTitle :title="'客流变化'"></SmallTitle>
+    <SmallTitle :title="`客流变化${searchTime ? `(${searchTime}月)` : ''}`"></SmallTitle>
 
-    <div class="PassengerFlowChangesCharts">
+    <div class="PassengerFlowChangesCharts" style="margin-top:15px">
-      <div class="PassengerFlowChangesUnit" style="display: flex;align-items: center;justify-content: space-between;">
+      <!-- <div class="PassengerFlowChangesUnit"
-        <span>单</span>
+        style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
         <span>辆</span>
-      </div>
+        <span>单</span>
+      </div> -->
       <div class="PassengerFlowChanges" id="PassengerFlowChanges"></div>
     </div>
   </div>

src/page/index/components/PaymentProgress/PaymentProgress.less

@@ -98,7 +98,7 @@
             width: 100%;
             margin-top: 30px;
             box-sizing: border-box;
-            padding: 0 30px;
+            padding: 0 0 0 30px;
             display: flex;
             align-items: center;
 
@@ -109,7 +109,7 @@
             }
 
             .progressPieRight {
-                flex: 1;
+                width: calc(100% - 172px);
 
                 .progressPieItem {
                     width: 100%;
@@ -135,6 +135,7 @@
                             color: #FFFFFF;
                             text-align: left;
                             font-style: normal;
+                            white-space: nowrap;
                         }
                     }
 

src/page/index/components/PreferenceType/PreferenceType.less

@@ -1,12 +1,17 @@
 .PreferenceTypeBox {
-    width: 25%;
+    // width: 50%;
+    width: calc((100% - 28px) / 3 * 2);
     display: inline-block;
     height: 210px;
 
+
     .PreferenceTypeCharts {
         width: 100%;
         height: 182px;
-        background: linear-gradient(0deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
+        // background: linear-gradient(0deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
+        background-image: url('../../../../assets/image/smallModalBg.png');
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
         box-sizing: border-box;
         padding: 11px 20px 16px;
 

src/page/index/components/PreferenceType/PreferenceType.vue

@@ -49,7 +49,8 @@ onMounted(async () => {
             indicator: res.category,
             shape: 'circle',
             splitNumber: 5,
-            radius: '70%', // 调整雷达图大小，留出空间给文字
+            radius: '60%', // 调整雷达图大小，留出空间给文字
+            center: ['50%', '60%'], // 2. 确保居中
             axisName: {
                 color: 'rgb(255, 255, 255)',
                 padding: 10

src/page/index/components/RegionalRevenue/RegionalRevenue.less

@@ -1,15 +1,61 @@
 .RegionalRevenueBox {
     width: 100%;
+    box-sizing: border-box;
+    padding: 3px 0 0 10px;
+
+
+    .RegionalRevenueSelect {
+        display: flex;
+        align-items: center;
+
+        .RegionalRevenueItem {
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 13px;
+            color: rgba(255, 255, 255, 0.5);
+            text-align: center;
+            font-style: normal;
+            padding: 2px 5px 4px 6px;
+            border: 1px solid rgba(255, 255, 255, 0.5);
+            cursor: pointer;
+        }
+
+        .RegionalRevenueItemLeft {
+            border-radius: 4px 0px 0px 4px;
+        }
+
+        .RegionalRevenueItemRight {
+            border-radius: 0px 4px 4px 0px;
+        }
+
+        .selectRegionalRevenueItem {
+            border-color: #2366D8;
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 13px;
+            color: #2366D8;
+            text-align: center;
+            font-style: normal;
+            padding: 2px 5px 4px 6px;
+        }
+
+
+
+
+    }
+
 
     .RegionalRevenueCharts {
         width: 100%;
         box-sizing: border-box;
-        padding: 30px;
+        // padding: 30px;
+        padding: 25px 26px 20px 31px;
         display: flex;
         align-items: center;
 
         .RegionalRevenueChartsContent {
             width: 100%;
+            height: 132px;
             display: flex;
             align-items: center;
 
@@ -19,7 +65,8 @@
             }
 
             .RegionalRevenueDataBoxList {
-                flex: 1;
+                display: inline-block;
+                width: calc(100% - 162px);
                 margin-left: 30px;
 
                 .RegionalRevenueDataBox {

src/page/index/components/RegionalRevenue/RegionalRevenue.vue

@@ -31,6 +31,10 @@ let allServiceId: string = '1143,1144,1186,1188,1189,1190,1191,1192,1193,979,999
 
 // 图例数据
 let lengedList = ref<any>([])
+// 选择的是日 还是 月 1 为 日 2为月
+let selectDataType = ref<number>(1)
+// 是否显示图表
+let showCharts = ref<boolean>(true)
 
 onMounted(async () => {
 
@@ -102,12 +106,14 @@ const handleGoMounted = async () => {
 // 拿到数据
 const handleGetData = async () => {
     const req: any = {
-        DataType: 1,
+        DataType: selectDataType.value,
         ServerpartIds: props.currentService?.SERVERPART_ID || allServiceId,
         DataSourceType: 1,
     }
     const data = await handleGetRevenueReport(req)
 
+    showCharts.value = true
+
     let category: string[] = []
     let seriesData: number[] = []
     let realData: number[] = []
@@ -141,6 +147,13 @@ const handleGetData = async () => {
     return res
 }
 
+// 改变类型
+const handleChangeDataType = async (value: number) => {
+    showCharts.value = false
+    selectDataType.value = value
+    await handleGoMounted()
+}
+
 
 const resizeChart = () => {
     myChart?.resize();
@@ -158,19 +171,32 @@ onBeforeUnmount(() => {
 
 <template>
     <div class="RegionalRevenueBox">
-        <SmallTitle :title="'区域营收占比'"></SmallTitle>
+        <SmallTitle :title="'区域营收占比'">
+            <template #extra>
+                <div class="RegionalRevenueSelect">
+                    <div :class="selectDataType === 1 ? 'RegionalRevenueItem RegionalRevenueItemLeft selectRegionalRevenueItem' : 'RegionalRevenueItem RegionalRevenueItemLeft'"
+                        @click="handleChangeDataType(1)">
+                        日</div>
+                    <div :class="selectDataType === 2 ? 'RegionalRevenueItem RegionalRevenueItemRight selectRegionalRevenueItem' : 'RegionalRevenueItem RegionalRevenueItemRight'"
+                        @click="handleChangeDataType(2)">
+                        月</div>
+
+                </div>
+            </template>
+        </SmallTitle>
 
         <div class="RegionalRevenueCharts">
             <!-- <div class="RegionalRevenueUnit">万元</div> -->
             <div class="RegionalRevenueChartsContent">
-                <div class="RegionalRevenue" id="RegionalRevenue"></div>
+                <div class="RegionalRevenue" id="RegionalRevenue" v-if="showCharts"></div>
-
 
+                <template v-if="showCharts">
                     <div class="RegionalRevenueDataBoxList" v-if="lengedList && lengedList.length > 0">
                         <div class="RegionalRevenueDataBox" v-for="(item, index) in lengedList" :key="index">
                             <div class="RegionalRevenueDataLeftBox">
                                 <div class="RegionalRevenueItem">
-                                <div class="RegionalRevenueItemLeged" :style="{ background: colorList[index] }"></div>
+                                    <div class="RegionalRevenueItemLeged" :style="{ background: colorList[index] }">
+                                    </div>
                                     <div class="RegionalRevenueItemLabel">{{ item.name }}</div>
                                     <div class="RegionalRevenueItemValue">{{ item.value }}</div>
                                     <div class="RegionalRevenueItemUnit">元</div>
@@ -187,6 +213,8 @@ onBeforeUnmount(() => {
                         </div> -->
                         </div>
                     </div>
+                </template>
+
             </div>
         </div>
     </div>

src/page/index/components/SignedClients/SignedClients.less

@@ -0,0 +1,175 @@
+.SignedClientsBox {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px 15px;
+    background: linear-gradient(0deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
+    border-bottom: 1px solid rgba(0, 148, 255, 0.50);
+
+    .SignedClientsBigItem {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0 5px 10px;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+
+        .SignedClientsBigLeft {
+            width: 46px;
+            height: 46px;
+            margin-right: 10px;
+
+            .SignedClientsBigLeftImg {
+                width: 46px;
+                height: 46px;
+            }
+        }
+
+        .SignedClientsBigRight {
+            width: calc(100% - 56px);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .SignedClientsBigRightLeft {
+                .SignedClientsBigRightLabel {
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: #FFFFFF;
+                    text-align: left;
+                    font-style: normal;
+                }
+
+                .SignedClientsBigRightText {
+                    .SignedClientsBigRightSmallLabel {
+                        font-family: Inter, Inter;
+                        font-weight: 400;
+                        font-size: 12px;
+                        color: #7E858A;
+                        text-align: left;
+                        font-style: normal;
+                    }
+
+                    .SignedClientsBigRightValue {
+                        font-family: Inter, Inter;
+                        font-weight: 400;
+                        font-size: 12px;
+                        color: #00F6FF;
+                        text-align: left;
+                        font-style: normal;
+                        margin-left: 5px;
+                    }
+                }
+            }
+
+
+            .SignedClientsBigRightRight {
+                display: flex;
+                align-items: center;
+
+                .SignedClientsBigRightRightValue {
+                    font-family: Impact, Impact;
+                    font-weight: 400;
+                    font-size: 25px;
+                    color: #FFFFFF;
+                    letter-spacing: 2px;
+                    text-align: right;
+                    font-style: normal;
+                    margin-right: 10px;
+                }
+
+                .SignedClientsBigRightRightUnit {
+                    font-family: Inter, Inter;
+                    font-weight: 400;
+                    font-size: 12px;
+                    color: #828689;
+                    text-align: right;
+                    font-style: normal;
+                }
+            }
+        }
+    }
+
+
+    .SignedClientsSmallItem {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0 5px 10px;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+
+        .SignedClientsSmallLeft {
+            width: 33px;
+            height: 33px;
+            margin-right: 17px;
+        }
+
+        .SignedClientsSmallRight {
+            width: calc(100% - 50px);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .SignedClientsSmallRightLeft {
+                .SignedClientsSmallRightLeftTop {
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: #FFFFFF;
+                    text-align: left;
+                    font-style: normal;
+                }
+
+                .SignedClientsSmallRightLeftBottom {
+                    .SignedClientsSmallRightLeftBottomNormalText {
+                        font-family: Inter, Inter;
+                        font-weight: 400;
+                        font-size: 12px;
+                        color: #7B858D;
+                        text-align: left;
+                        font-style: normal;
+                    }
+
+                    .SignedClientsSmallRightLeftBottomValue {
+                        font-family: Inter, Inter;
+                        font-weight: 400;
+                        font-size: 12px;
+                        color: #7B858D;
+                        text-align: left;
+                        font-style: normal;
+                        margin-left: 5px;
+                    }
+                }
+
+
+            }
+
+            .SignedClientsSmallRightRight {
+                display: flex;
+                align-items: flex-end;
+
+                .SignedClientsSmallRightRightValue {
+                    font-family: Impact, Impact;
+                    font-weight: 400;
+                    font-size: 25px;
+                    color: #FFFFFF;
+                    letter-spacing: 2px;
+                    text-align: right;
+                    font-style: normal;
+                }
+
+                .SignedClientsSmallRightRightUnit {
+                    font-family: Inter, Inter;
+                    font-weight: 400;
+                    font-size: 12px;
+                    color: #7B858D;
+                    text-align: right;
+                    font-style: normal;
+                    margin-left: 10px;
+                }
+            }
+
+        }
+    }
+}

src/page/index/components/SignedClients/SignedClients.vue

@@ -0,0 +1,225 @@
+<script setup lang="ts">
+import './SignedClients.less'
+import SignedClientsIcon from '../../../../assets/image/SignedClientsIcon.png'
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+import { handleGetProjectSummaryInfo } from '../../service';
+
+import * as echarts from 'echarts/core';
+import { PieChart } from 'echarts/charts';
+import {
+    GridComponent,
+    TitleComponent,
+    TooltipComponent,
+    LegendComponent
+} from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+
+
+// 注册组件
+echarts.use([
+    PieChart,
+    GridComponent,
+    TitleComponent,
+    TooltipComponent,
+    LegendComponent,
+    CanvasRenderer
+]);
+
+let myChart: echarts.ECharts;
+let myChart2: echarts.ECharts;
+
+// 当前的数据
+let realDataObj = ref<any>()
+// 合作分成
+let shareRevenue = ref<any>()
+// 固定租金
+let FixedRent = ref<any>()
+
+onMounted(async () => {
+    await handleGetData()
+})
+
+// 拿到数据
+const handleGetData = async () => {
+    const req: any = {
+        ProvinceCode: '340000'
+    }
+    const data = await handleGetProjectSummaryInfo(req)
+
+
+    console.log('handleGetDatahandleGetDatahandleGetDatahandleGetData', data);
+    realDataObj.value = data
+
+    shareRevenue.value = data.BusinessTypeSummaryList[0]
+    FixedRent.value = data.BusinessTypeSummaryList[1]
+
+
+
+    const chartDom = document.getElementById('SignedClients1');
+    if (!chartDom) return;
+    myChart = echarts.init(chartDom);
+
+
+    const chartDom2 = document.getElementById('SignedClients2');
+    if (!chartDom) return;
+    myChart2 = echarts.init(chartDom2);
+
+
+    const option1 = {
+        series: [
+            {
+                name: 'Access From',
+                type: 'pie',
+                radius: ['80%', '100%'],
+                center: ['50%', '50%'],  // 关键修改：强制居中 [水平位置, 垂直位置]
+                avoidLabelOverlap: false,
+                label: {
+                    show: false
+                },
+                emphasis: false,
+                labelLine: {
+                    show: false
+                },
+                itemStyle: {
+                    color: function (params: any) {
+                        // 自定义颜色逻辑
+                        return params.dataIndex === 0 ? '#FF9500' : '#634B24';
+                    }
+                },
+                data: [((shareRevenue?.value.ArrearageMerchant_Count / realDataObj?.value.Contract_SignCount) * 100), 100 - ((shareRevenue?.value.ArrearageMerchant_Count / realDataObj?.value.Contract_SignCount) * 100)]
+            }
+        ]
+    };
+
+    const option2 = {
+        series: [
+            {
+                name: 'Access From',
+                type: 'pie',
+                radius: ['80%', '100%'],
+                center: ['50%', '50%'],  // 关键修改：强制居中 [水平位置, 垂直位置]
+                avoidLabelOverlap: false,
+                label: {
+                    show: false
+                },
+                emphasis: false,
+                labelLine: {
+                    show: false
+                },
+                itemStyle: {
+                    color: function (params: any) {
+                        // 自定义颜色逻辑
+                        return params.dataIndex === 0 ? '#FF9500' : '#634B24';
+                    }
+                },
+                data: [((FixedRent?.value.ArrearageMerchant_Count / realDataObj?.value.Contract_SignCount) * 100), 100 - ((FixedRent?.value.ArrearageMerchant_Count / realDataObj?.value.Contract_SignCount) * 100)]
+            }
+        ]
+    };
+
+
+
+    myChart.setOption(option1);
+    myChart.resize();
+
+    myChart2.setOption(option2);
+    myChart2.resize();
+    window.addEventListener('resize', resizeChart);
+
+}
+
+
+const resizeChart = () => {
+    myChart?.resize();
+    myChart2?.resize();
+};
+
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', resizeChart);
+    myChart?.dispose();
+    myChart2?.dispose();
+});
+
+</script>
+
+
+<template>
+    <div class="SignedClientsBox">
+        <div class="SignedClientsBigItem">
+            <div class="SignedClientsBigLeft">
+                <img :src="SignedClientsIcon" class="SignedClientsBigLeftImg" />
+            </div>
+
+            <div class="SignedClientsBigRight">
+                <div class="SignedClientsBigRightLeft">
+                    <div class="SignedClientsBigRightLabel">签约客户</div>
+                    <div class="SignedClientsBigRightText">
+                        <span class="SignedClientsBigRightSmallLabel">欠款商户</span>
+                        <span class="SignedClientsBigRightValue" style="color: #FF9500;">{{
+                            realDataObj?.ArrearageMerchant_Count || ''
+                        }}</span>
+                    </div>
+                </div>
+
+                <div class="SignedClientsBigRightRight">
+                    <div class="SignedClientsBigRightRightValue">{{ realDataObj?.ArrearageMerchant_Count || '' }}
+                    </div>
+                    <div class="SignedClientsBigRightRightUnit">个</div>
+                </div>
+
+            </div>
+        </div>
+
+
+        <div class="SignedClientsSmallItem">
+            <div class="SignedClientsSmallLeft" id="SignedClients1"></div>
+            <div class="SignedClientsSmallRight">
+                <div class="SignedClientsSmallRightLeft">
+                    <div class="SignedClientsSmallRightLeftTop">合作分成</div>
+                    <div class="SignedClientsSmallRightLeftBottom">
+                        <span class="SignedClientsSmallRightLeftBottomNormalText">欠款商户</span>
+                        <span class="SignedClientsSmallRightLeftBottomValue">{{
+                            shareRevenue?.ArrearageMerchant_Count
+                            || "" }}</span>
+                        <span class="SignedClientsSmallRightLeftBottomNormalText" style="margin-left: 10px;">欠款占比</span>
+                        <span class="SignedClientsSmallRightLeftBottomValue">
+                            {{ realDataObj?.ArrearageMerchant_Count ? ((shareRevenue?.ArrearageMerchant_Count /
+                                realDataObj?.ArrearageMerchant_Count) * 100).toFixed(2) + '%' : '-' }}
+                        </span>
+                    </div>
+                </div>
+
+                <div class="SignedClientsSmallRightRight">
+                    <div class="SignedClientsSmallRightRightValue">{{ shareRevenue?.ArrearageMerchant_Count || '' }}
+                    </div>
+                    <div class="SignedClientsSmallRightRightUnit">个</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="SignedClientsSmallItem" style="border-bottom: none;padding-bottom: 0;">
+            <div class="SignedClientsSmallLeft" id="SignedClients2"></div>
+            <div class="SignedClientsSmallRight">
+                <div class="SignedClientsSmallRightLeft">
+                    <div class="SignedClientsSmallRightLeftTop">固定租金</div>
+                    <div class="SignedClientsSmallRightLeftBottom">
+                        <span class="SignedClientsSmallRightLeftBottomNormalText">欠款商户</span>
+                        <span class="SignedClientsSmallRightLeftBottomValue">{{ FixedRent?.ArrearageMerchant_Count
+                            || "" }}</span>
+                        <span class="SignedClientsSmallRightLeftBottomNormalText" style="margin-left: 10px;">欠款占比</span>
+                        <span class="SignedClientsSmallRightLeftBottomValue">
+                            {{ realDataObj?.ArrearageMerchant_Count ? ((FixedRent?.ArrearageMerchant_Count /
+                                realDataObj?.ArrearageMerchant_Count) * 100).toFixed(2) + '%' : '-' }}
+                        </span>
+                    </div>
+                </div>
+
+                <div class="SignedClientsSmallRightRight">
+                    <div class="SignedClientsSmallRightRightValue">{{ FixedRent?.ArrearageMerchant_Count || '' }}
+                    </div>
+                    <div class="SignedClientsSmallRightRightUnit">个</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

src/page/index/components/TodayTrend/TodayTrend.less

@@ -1,7 +1,7 @@
 .TodayTrendBox {
     width: 100%;
     box-sizing: border-box;
-    padding: 20px 20px 0;
+    // padding: 20px 20px 0;
 
     .TodayTrendUnit {
         width: 100%;
@@ -21,6 +21,7 @@
 
     .TodayTrendContent {
         width: 100%;
+        margin-top: 15px;
 
         .TodayTrend {
             width: 100%;

src/page/index/components/TodayTrend/TodayTrend.vue

@@ -45,161 +45,162 @@ let myChart: echarts.ECharts;
 
 onMounted(async () => {
 
-    handleGetOnlineData()
+    // handleGetOnlineData()
 
-    // const res: any = await handleGetData()
+    const res: any = await handleGetData()
 
-    // const chartDom = document.getElementById('TodayTrend');
+    const chartDom = document.getElementById('TodayTrend');
-    // if (!chartDom) return;
+    if (!chartDom) return;
 
-    // myChart = echarts.init(chartDom);
+    myChart = echarts.init(chartDom);
 
-    // const option = {
+    const option = {
-    //     xAxis: {
+        xAxis: {
-    //         type: 'category',
+            type: 'category',
-    //         data: res.category,
+            data: res.category,
-    //         // boundaryGap: true,
+            // boundaryGap: true,
-    //         axisLabel: {
+            axisLabel: {
-    //             interval: 3,
+                interval: 3,
-    //             showMinLabel: true,
+                showMinLabel: true,
-    //             showMaxLabel: true
+                showMaxLabel: true
-    //         }
+            },
-    //     },
+            axisLine: {
-    //     yAxis: [
+                show: true,
-    //         {
+                lineStyle: {
-    //             type: 'value',
+                    color: '#fff'
-    //             name: '营收',
+                }
-    //             nameTextStyle: {
+            },
-    //                 color: '#00FFFF'
+            axisTick: {
-    //             },
+                alignWithLabel: true // 保证刻度线与标签对齐
-    //             splitLine: { show: false },
+            }
-    //             axisLine: {
+        },
-    //                 show: true,
+        yAxis: [
-    //                 lineStyle: {
+            {
-    //                     color: '#00FFFF'
+                type: 'value',
-    //                 }
+                name: '营收',
-    //             },
+                nameTextStyle: {
-    //             axisLabel: {
+                    color: '#fff'
-    //                 color: '#00FFFF',
+                },
-    //                 formatter: '{value}'
+                splitLine: { show: false },
-    //             }
+                axisLine: {
-    //         },
+                    show: true,
-    //         {
+                    lineStyle: {
-    //             type: 'value',
+                        color: '#fff'
-    //             name: '客单',
+                    }
-    //             nameTextStyle: {
+                }
-    //                 color: '#FFA500'
+            },
-    //             },
+            {
-    //             splitLine: { show: false },
+                type: 'value',
-    //             position: 'right',
+                name: '客单',
-    //             axisLine: {
+                nameTextStyle: {
-    //                 show: true,
+                    color: '#fff'
-    //                 lineStyle: {
+                },
-    //                     color: '#FFA500'
+                splitLine: { show: false },
-    //                 }
+                position: 'right',
-    //             },
+                axisLine: {
-    //             axisLabel: {
+                    show: true,
-    //                 color: '#FFA500',
+                    lineStyle: {
-    //                 formatter: '{value}'
+                        color: '#fff'
-    //             },
+                    }
-    //             offset: 0
+                },
-    //         }
+                offset: 0
-    //     ],
+            }
-    //     grid: {
+        ],
-    //         left: '10',
+        grid: {
-    //         right: '10',
+            left: '10',
-    //         bottom: '10',
+            right: '10',
-    //         top: '10',
+            bottom: '10',
-    //         containLabel: true
+            top: '10',
-    //     },
+            containLabel: true
-    //     series: [
+        },
-    //         {
+        series: [
-    //             name: '营收',
+            {
-    //             data: res.seriesData.map((value: any, index: any) => ({
+                name: '营收',
-    //                 value: value,
+                data: res.seriesData.map((value: any, index: any) => ({
-    //                 symbol: index % 3 === 0 ? 'circle' : 'none',
+                    value: value,
-    //                 symbolSize: 6
+                    symbol: index % 3 === 0 ? 'circle' : 'none',
-    //             })),
+                    symbolSize: 6
-    //             type: 'line',
+                })),
-    //             smooth: true,
+                type: 'line',
-    //             lineStyle: {
+                smooth: true,
-    //                 width: 2,
+                lineStyle: {
-    //                 color: '#00FFFF'
+                    width: 2,
-    //             },
+                    color: '#00FFFF'
-    //             itemStyle: {
+                },
-    //                 color: '#00FFFF'
+                itemStyle: {
-    //             },
+                    color: '#00FFFF'
-    //             areaStyle: {
+                },
-    //                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                areaStyle: {
-    //                     {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-    //                         offset: 0,
+                        {
-    //                         color: 'rgba(0, 255, 255, 0.3)'
+                            offset: 0,
-    //                     },
+                            color: 'rgba(0, 255, 255, 0.3)'
-    //                     {
+                        },
-    //                         offset: 1,
+                        {
-    //                         color: 'rgba(0, 255, 255, 0.1)'
+                            offset: 1,
-    //                     }
+                            color: 'rgba(0, 255, 255, 0.1)'
-    //                 ])
+                        }
-    //             },
+                    ])
-    //             yAxisIndex: 0
+                },
-    //         },
+                yAxisIndex: 0
-    //         {
+            },
-    //             name: '客单',
+            {
-    //             data: res.seriesDataSecond.map((value: any, index: any) => ({
+                name: '客单',
-    //                 value: value,
+                data: res.seriesDataSecond.map((value: any, index: any) => ({
-    //                 symbol: index % 3 === 0 ? 'circle' : 'none',
+                    value: value,
-    //                 symbolSize: 6
+                    symbol: index % 3 === 0 ? 'circle' : 'none',
-    //             })),
+                    symbolSize: 6
-    //             type: 'line',
+                })),
-    //             smooth: true,
+                type: 'line',
-    //             lineStyle: {
+                smooth: true,
-    //                 width: 2,
+                lineStyle: {
-    //                 color: '#FFA500'
+                    width: 2,
-    //             },
+                    color: '#FFA500'
-    //             itemStyle: {
+                },
-    //                 color: '#FFA500'
+                itemStyle: {
-    //             },
+                    color: '#FFA500'
-    //             areaStyle: {
+                },
-    //                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                areaStyle: {
-    //                     {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-    //                         offset: 0,
+                        {
-    //                         color: 'rgba(255, 165, 0, 0.3)'
+                            offset: 0,
-    //                     },
+                            color: 'rgba(255, 165, 0, 0.3)'
-    //                     {
+                        },
-    //                         offset: 1,
+                        {
-    //                         color: 'rgba(255, 165, 0, 0.1)'
+                            offset: 1,
-    //                     }
+                            color: 'rgba(255, 165, 0, 0.1)'
-    //                 ])
+                        }
-    //             },
+                    ])
-    //             yAxisIndex: 1
+                },
-    //         }
+                yAxisIndex: 1
-    //     ],
+            }
-    //     tooltip: {
+        ],
-    //         trigger: 'axis',
+        tooltip: {
-    //         axisPointer: {
+            trigger: 'axis',
-    //             type: 'line',
+            axisPointer: {
-    //             snap: true, // 关键点：启用吸附
+                type: 'line',
-    //             lineStyle: {
+                snap: true, // 关键点：启用吸附
-    //                 color: '#FFF', // 可选：调整竖线颜色
+                lineStyle: {
-    //                 width: 1
+                    color: '#FFF', // 可选：调整竖线颜色
-    //             }
+                    width: 1
-    //         },
+                }
-    //         formatter: function (params: any) {
+            },
-    //             let tip = `<div style="font-weight:bold">${params[0].name}</div>`;
+            formatter: function (params: any) {
-    //             params.forEach((param: any) => {
+                let tip = `<div style="font-weight:bold">${params[0].name}</div>`;
-    //                 const unit = param.seriesName === '营收' ? '元' : '单';
+                params.forEach((param: any) => {
-    //                 let value = param.seriesName === '营收' ? res.seriesData[param.dataIndex] : res.seriesDataSecond[param.dataIndex]
+                    const unit = param.seriesName === '营收' ? '元' : '单';
-    //                 tip += `<div>${param.seriesName}: ${value ? value.toLocaleString() : ''}${unit}</div>`;
+                    let value = param.seriesName === '营收' ? res.seriesData[param.dataIndex] : res.seriesDataSecond[param.dataIndex]
-    //             });
+                    tip += `<div>${param.seriesName}: ${value ? value.toLocaleString() : ''}${unit}</div>`;
+                });
 
-    //             return tip
+                return tip
-    //         }
+            }
-    //     }
+        }
-    // };
+    };
 
-    // myChart.setOption(option);
+    myChart.setOption(option);
-    // myChart.resize();
+    myChart.resize();
-    // window.addEventListener('resize', resizeChart);
+    window.addEventListener('resize', resizeChart);
 })
 
 // 修改选择的季月年
@@ -276,31 +277,31 @@ const handleGetOnlineData = async () => {
     onlineCashRegisterValue.value = handleGetFiveNumber(res.MACHINECOUNT)
 }
 
-// const resizeChart = () => {
+const resizeChart = () => {
-//     myChart?.resize();
+    myChart?.resize();
-// };
+};
 
-// onBeforeUnmount(() => {
+onBeforeUnmount(() => {
-//     window.removeEventListener('resize', resizeChart);
+    window.removeEventListener('resize', resizeChart);
-//     myChart?.dispose();
+    myChart?.dispose();
-// });
+});
 
 </script>
 
 
 <template>
     <div class="TodayTrendBox">
-        <!-- <SmallTitle :title="'今日走势图'"></SmallTitle> -->
+        <SmallTitle :title="'今日走势图'" style="margin-top: 13px;"></SmallTitle>
 
         <!-- <div class="TodayTrendUnit">
             <span>元</span>
             <span>单</span>
         </div> -->
-        <!-- <div class="TodayTrendContent">
+        <div class="TodayTrendContent">
             <div class="TodayTrend" id="TodayTrend"></div>
-        </div> -->
+        </div>
 
-        <div class="onlineServiceBox">
+        <!-- <div class="onlineServiceBox">
             <div class="onlineServiceItem">
                 <div class="onlineServiceItemLeft">
                     <img class="onlineServiceItemImg" :src="onlineService" />
@@ -334,8 +335,6 @@ const handleGetOnlineData = async () => {
                     </div>
                 </div>
             </div>
+        </div> -->
     </div>
-
-    </div>
-
 </template>

src/page/index/components/TotalAccountsReceivable/TotalAccountsReceivable.less

@@ -17,7 +17,7 @@
 
         .TotalAccountsReceivable {
             width: 100%;
-            height: 243px;
+            height: 162px;
         }
     }
 }

src/page/index/components/TotalAccountsReceivable/TotalAccountsReceivable.vue

@@ -45,6 +45,13 @@ onMounted(async () => {
                 }
             }
         },
+        grid: {
+            left: '0',    // 增加左侧空间
+            right: '0',   // 增加右侧空间
+            bottom: '0',
+            top: '30',
+            containLabel: true
+        },
         toolbox: {
             feature: {
                 dataView: { show: true, readOnly: false },

src/page/index/components/TradingAlert/TradingAlert.less

@@ -1,14 +1,14 @@
 .TradingAlertBox {
     width: 100%;
     box-sizing: border-box;
-    padding: 0 20px;
+    // padding: 0 20px;
-    margin-top: 20px;
+    // margin-top: 20px;
 
 
     .TradingAlertListBox {
         width: 100%;
-        height: 240px;
+        height: 120px;
-        margin-top: 8px;
+        margin-top: 12px;
 
         .TradingAlertItem {
             width: 100%;

src/page/index/components/TradingAlert/TradingAlert.vue

@@ -30,7 +30,7 @@ const handleGetData = async () => {
 
 
     if (data && data.length > 0) {
-        let list = data.slice(0, 10)
+        let list = data.slice(0, 5)
 
         TradingAlertList.length = 0;
         list && list.forEach((item: any) => TradingAlertList.push(item));

src/page/index/components/TrendOfTrafficFlow/TrendOfTrafficFlow.less

@@ -21,7 +21,7 @@
 
         .TrendOfTrafficFlow {
             width: 100%;
-            height: 133px;
+            height: 150px;
         }
     }
 }

src/page/index/components/TrendOfTrafficFlow/TrendOfTrafficFlow.vue

@@ -70,8 +70,15 @@ const handleGoMounted = async () => {
         },
         yAxis: {
             type: 'value',
-            name: "万辆",
+            name: '万辆',  // 仅在此处显示单位
-            splitLine: { show: false }  // 隐藏刻度线
+            nameTextStyle: {
+                color: '#666',
+                padding: [0, 30, 0, 0]  // 调整单位位置
+            },
+            axisLabel: {
+                formatter: '{value}'  // 刻度值保持纯数字
+            },
+            splitLine: { show: false }
         },
         series: [
             {
@@ -120,7 +127,7 @@ const handleGoMounted = async () => {
             left: '0',    // 左侧间距
             right: '0',   // 右侧间距
             bottom: '0',    // 底部间距
-            top: '10',       // 顶部间距
+            top: '30',       // 顶部间距
             containLabel: true // 确保坐标轴标签在grid内
         },
         tooltip: {  // 新增 tooltip 配置
@@ -193,7 +200,6 @@ onBeforeUnmount(() => {
         <SmallTitle :title="`车流断面趋势(04月)`" />
 
         <div class="TrendOfTrafficFlowCharts">
-            <div class="trafficFlowCarUnit">辆</div>
             <div class="TrendOfTrafficFlow" id="TrendOfTrafficFlow"></div>
         </div>
     </div>

src/page/index/components/VehicleModelStay/VehicleModelStay.less

@@ -0,0 +1,27 @@
+.VehicleModelStayBox {
+    width: 100%;
+
+    .VehicleModelStayCharts {
+        width: 100%;
+        margin-top: 10px;
+        position: relative;
+
+        .VehicleModelStayUnit {
+            font-family: "Microsoft YaHei";
+            font-weight: 400;
+            font-size: 10px;
+            color: #7F808B;
+            text-align: left;
+            font-style: normal;
+            padding-left: 8px;
+            position: absolute;
+            top: -10px;
+            left: 0;
+        }
+
+        .VehicleModelStay {
+            width: 100%;
+            height: 150px;
+        }
+    }
+}

src/page/index/components/VehicleModelStay/VehicleModelStay.vue

@@ -0,0 +1,247 @@
+<script setup lang="ts">
+import SmallTitle from '../smallTitle/smallTitle.vue'
+import './VehicleModelStay.less'
+import { onMounted, onBeforeUnmount, watch, ref } from 'vue';
+import * as echarts from 'echarts/core';
+import { LineChart } from 'echarts/charts';
+import {
+    GridComponent,
+    TitleComponent,
+    TooltipComponent,
+    LegendComponent
+} from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+import moment from 'moment';
+import { handleGetBayonetSTAnalysis, handleGetTransactionConvert, handleGetTransactionTimeAnalysis } from '../../service';
+
+// 注册组件
+echarts.use([
+    LineChart,
+    GridComponent,
+    TitleComponent,
+    TooltipComponent,
+    LegendComponent,
+    CanvasRenderer
+]);
+
+let myChart: echarts.ECharts;
+// 当前查询的时间
+let searchTime = ref<string>()
+
+onMounted(async () => {
+    await handleGoMounted()
+})
+
+// 传入的数据
+const props = defineProps<{
+    currentService?: any;
+}>();
+
+// 监听传入的选中服务区
+watch(
+    () => props.currentService,
+    (newVal, oldVal) => {
+        handleGoMounted()
+    },
+    { deep: true }
+);
+
+// 初始运行的方法
+const handleGoMounted = async () => {
+    const res: any = await handleGetData()
+
+    console.log('fhdsuFHDSJFAHKD', res);
+
+
+    const chartDom = document.getElementById('VehicleModelStay');
+    if (!chartDom) return;
+
+    myChart = echarts.init(chartDom);
+
+    const option = {
+        xAxis: {
+            type: 'category',
+            data: res.category,
+            axisLabel: {
+                interval: 1,  // 改为隔1个显示1个（原为3）
+                showMinLabel: true,
+                showMaxLabel: true
+            }
+        },
+        yAxis: [
+            {
+                type: 'value',
+                name: '停留时长',
+                splitLine: { show: false },
+                axisLine: {
+                    show: true
+                },
+                axisLabel: {
+                    formatter: '{value}' // 添加单位
+                }
+            }
+        ],
+        grid: {
+            left: '10',    // 增加左侧空间
+            right: '10',   // 增加右侧空间
+            bottom: '10',
+            top: '50',
+            containLabel: true
+        },
+        series: [
+            {
+                name: '小型车',
+                data: res?.smallCarData && res?.smallCarData.map((value, index) => ({
+                    value: value,
+                    symbol: index % 2 === 0 ? 'circle' : 'none', // 关键修改：隔一个显示一个点
+                    symbolSize: 6,
+                    itemStyle: {
+                        color: '#0094FF', // 纯色填充
+                        borderWidth: 0    // 无边框
+                    }
+                })),
+                type: 'line',
+                // smooth: true,
+                lineStyle: {
+                    width: 2,
+                    color: '#0094FF'
+                },
+            },
+            {
+                name: '中型车',
+                data: res?.middleCarData && res?.middleCarData.map((value, index) => ({
+                    value: value,
+                    symbol: index % 2 === 0 ? 'circle' : 'none', // 关键修改：隔一个显示一个点
+                    symbolSize: 6,
+                    itemStyle: {
+                        color: '#7D4CD2', // 纯色填充
+                        borderWidth: 0    // 无边框
+                    }
+                })),
+                type: 'line',
+                // smooth: true,
+                lineStyle: {
+                    width: 2,
+                    color: '#7D4CD2'
+                },
+            },
+            {
+                name: '大型车',
+                data: res?.bigCarData && res?.bigCarData.map((value, index) => ({
+                    value: value,
+                    symbol: index % 2 === 0 ? 'circle' : 'none', // 关键修改：隔一个显示一个点
+                    symbolSize: 6,
+                    itemStyle: {
+                        color: '#00FFB7', // 纯色填充
+                        borderWidth: 0    // 无边框
+                    }
+                })),
+                type: 'line',
+                // smooth: true,
+                lineStyle: {
+                    width: 2,
+                    color: '#00FFB7'
+                },
+            }
+        ],
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'line' // 改为线条指示器
+            },
+            formatter: function (params: any) {
+            }
+        },
+        legend: {
+            data: ['小型车', '中型车', '大型车'], // 确保图例显示
+            textStyle: { color: '#fff' }, // 图例文字颜色
+            right: '0',      // 距离右侧4%的位置
+            top: '0',
+        }
+    };
+
+    myChart.setOption(option);
+    myChart.resize();
+    window.addEventListener('resize', resizeChart);
+
+}
+
+// 拿到数据的方法
+const handleGetData = async () => {
+    let category: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]
+    // let seriesData: number[] = []
+    // let realData: string[] = []
+    let smallCarData: number[] = []
+    let middleCarData: number[] = []
+    let bigCarData: number[] = []
+
+    const req: any = {
+        StartMonth: moment().subtract(1, 'd').format('YYYYMM'),
+        EndMonth: moment().subtract(1, 'd').format('YYYYMM'),
+        Province_Code: '340000',
+        TimeSpan: 1,
+    }
+    console.log('reqreqreqreqreq', req);
+
+    searchTime.value = moment(req.StartMonth).format('MM')
+    const data = await handleGetBayonetSTAnalysis(req)
+
+    console.log('fdsjifjasifjdsnafsdvbhcav', data);
+
+    if (data && data.length > 0) {
+        data.forEach((item: any) => {
+            if (item.name === '小型车') {
+                if (item.data && item.data.length > 0) {
+                    item.data.forEach((subItem: any) => {
+                        smallCarData.push(subItem[1])
+                    })
+                }
+            } else if (item.name === '中型车') {
+                if (item.data && item.data.length > 0) {
+                    item.data.forEach((subItem: any) => {
+                        middleCarData.push(subItem[1])
+                    })
+                }
+            } else if (item.name === '大型车') {
+                if (item.data && item.data.length > 0) {
+                    item.data.forEach((subItem: any) => {
+                        bigCarData.push(subItem[1])
+                    })
+                }
+            }
+        })
+    }
+
+    let res: any = {
+        category: category,// x轴的内容
+        // seriesData: seriesData,// y轴的数据
+        // realData: realData// 真实数据
+        smallCarData: smallCarData,
+        middleCarData: middleCarData,
+        bigCarData: bigCarData,
+    }
+    return res
+}
+
+
+const resizeChart = () => {
+    myChart?.resize();
+};
+
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', resizeChart);
+    myChart?.dispose();
+});
+
+
+</script>
+
+<template>
+    <div class="VehicleModelStayBox">
+        <SmallTitle :title="`车型停留分析/日均${searchTime ? `(${searchTime}月)` : ''}`"></SmallTitle>
+
+        <div class="VehicleModelStayCharts" style="margin-top:15px">
+            <div class="VehicleModelStay" id="VehicleModelStay"></div>
+        </div>
+    </div>
+</template>

src/page/index/components/VehiclesEntering/VehiclesEntering.less

@@ -21,7 +21,7 @@
         .VehiclesEntering {
             width: 100%;
             // height: 134px;
-            height: 167px;
+            height: 190px;
         }
     }
 }

src/page/index/components/VehiclesEntering/VehiclesEntering.vue

@@ -79,7 +79,7 @@ const handleGoMounted = async () => {
             left: '3%',
             right: '4%',
             bottom: '3%',
-            top: '30%',
+            top: '40%',
             containLabel: true
         },
         xAxis: {
@@ -95,28 +95,33 @@ const handleGoMounted = async () => {
                 type: 'value',
                 name: '车流量(万辆)',
                 splitLine: { show: false },
-                axisLabel: {
+                nameTextStyle: {
-                    formatter: '{value}'
+                    color: '#666',
+                    padding: [0, 30, 0, 0]  // 调整单位位置
                 },
-                splitNumber: 4
+                splitNumber: 4,
             },
             {
                 type: 'value',
                 name: '交易金额(万元)',
                 splitLine: { show: false },
-                axisLabel: {
+                nameTextStyle: {
-                    formatter: '{value}'
+                    color: '#666',
+                    padding: [0, 0, 0, 30]  // 调整单位位置
                 },
-                splitNumber: 4
+                splitNumber: 4,
             }
         ],
         series: [
             {
                 name: `${res.currentYear}年车流量`,
                 type: 'bar',
-                barWidth: '6',
+                barWidth: 5,
                 data: res.seriesDataCar,
-                yAxisIndex: 0
+                yAxisIndex: 0,
+                itemStyle: {
+                    borderRadius: [3, 3, 0, 0]
+                }
             },
             {
                 name: `${res.yesYear}年车流量`,
@@ -124,9 +129,9 @@ const handleGoMounted = async () => {
                 smooth: true,
                 data: res.yesSeriesDataCar,
                 yAxisIndex: 0,
-                barWidth: '6',
+                barWidth: 5,
-                lineStyle: {
+                itemStyle: {
-                    width: 3
+                    borderRadius: [3, 3, 0, 0]
                 }
             },
             {
@@ -135,7 +140,10 @@ const handleGoMounted = async () => {
                 data: res.seriesDataRevenue,
                 yAxisIndex: 1,
                 symbol: 'circle',
-                symbolSize: 8,
+                symbolSize: 6,
+                lineStyle: {
+                    width: 2
+                }
             },
             {
                 name: `${res.yesYear}年交易额`,
@@ -143,7 +151,10 @@ const handleGoMounted = async () => {
                 data: res.yesSeriesDataRevenue,
                 yAxisIndex: 1,
                 symbol: 'circle',
-                symbolSize: 8
+                symbolSize: 6,
+                lineStyle: {
+                    width: 2
+                }
             }
         ],
         color: ['#008CFF', '#69BCFF', '#FF5E5E', '#FF9500'] // Custom colors for each series
@@ -224,6 +235,11 @@ const handleGetSectionFlowCount = async () => {
         currentYear: moment().format('YYYY'), // 当前年份
         yesYear: moment().subtract(1, 'y').format('YYYY')// 去年年份
     }
+
+    console.log('fdshufahsudifhasdjkfh', res);
+
+
+
     return res
 }
 

src/page/index/components/newBigTitleBox/newBigTitleBox.less

@@ -14,3 +14,8 @@
     box-sizing: border-box;
     padding-left: 38px;
 }
+
+.newBigTitleBoxLong {
+    background-image: url(../../../../assets/image/newTitleLongBg.png);
+
+}

src/page/index/components/newBigTitleBox/newBigTitleBox.vue

@@ -6,13 +6,14 @@ import './newBigTitleBox.less'
 // 拿到传入的数据
 const props = defineProps<{
     title?: string;
+    type?: number;// 1 为默认长度 2为两倍长度
 }>();
 
 </script>
 
 
 <template>
-    <div class="newBigTitleBox">
+    <div :class="type === 2 ? 'newBigTitleBox newBigTitleBoxLong' : 'newBigTitleBox'">
         {{ props?.title || "" }}
 
     </div>

src/page/index/components/pageTop/pageTop.less

@@ -162,6 +162,10 @@
 //     }
 // }
 
+.bigPageTop {
+    width: 100vw;
+    height: 86px;
+    background: linear-gradient(180deg, rgba(3, 22, 38, 0.7) 0%, rgba(3, 22, 38, 0) 100%);
 
     .pageTop169 {
         width: 100vw;
@@ -245,3 +249,4 @@
             }
         }
     }
+}

src/page/index/components/pageTop/pageTop.vue

@@ -148,14 +148,15 @@ onBeforeUnmount(() => {
 
 <template>
     <!-- <div class="pageTop"> -->
+    <div class="bigPageTop">
         <div class="pageTop169">
 
             <!-- 新版的顶部分区的方法 -->
             <div class="leftTabBox">
                 <div :class="selectPageTab === 1 ? 'pageTopTabItem selectPageTopTabItem' : 'pageTopTabItem'"
-                @click="handleChangePageTab(1)">分区一</div>
+                    @click="handleChangePageTab(1)">综合运维</div>
                 <div :class="selectPageTab === 2 ? 'pageTopTabItem selectPageTopTabItem' : 'pageTopTabItem'"
-                @click="handleChangePageTab(2)">分区二</div>
+                    @click="handleChangePageTab(2)">流量洞察</div>
             </div>
 
             <!-- 最初版的内容 -->
@@ -204,10 +205,11 @@ onBeforeUnmount(() => {
 
             <div class="leftTabBox">
                 <div :class="selectPageTab === 3 ? 'pageTopTabItem selectPageTopTabItem' : 'pageTopTabItem'"
-                @click="handleChangePageTab(3)">分区三</div>
+                    @click="handleChangePageTab(3)">财约枢纽</div>
                 <div :class="selectPageTab === 4 ? 'pageTopTabItem selectPageTopTabItem' : 'pageTopTabItem'"
-                @click="handleChangePageTab(4)">分区四</div>
+                    @click="handleChangePageTab(4)">彩云驿出行</div>
             </div>
 
         </div>
+    </div>
 </template>

src/page/index/components/smallTitle/smallTitle.less

@@ -47,14 +47,23 @@
     height: 28px;
     box-sizing: border-box;
     padding: 4px 10px;
-    font-family: "Microsoft YaHei";
+    // font-family: "Microsoft YaHei";
-    font-weight: 400;
+    // font-weight: 400;
-    font-size: 16px;
+    // font-size: 16px;
+    // color: #FFFFFF;
+    // text-align: center;
+    // font-style: normal;
+
+    // background-image: url('../../../../assets//image/smallTitleBg.png');
+    // background-repeat: no-repeat;
+    // background-size: 100% 100%;
+    // background: linear-gradient(90deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
+    .title {
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: bold;
+        font-size: 15px;
         color: #FFFFFF;
         text-align: center;
         font-style: normal;
-    background-image: url('../../../../assets//image/smallTitleBg.png');
+    }
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    // background: linear-gradient(90deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
 }

src/page/index/index.vue

@@ -50,6 +50,14 @@ import BrandDetail from './components/BrandDetail/BrandDetail.vue'
 import AssessmentScoring from './components/AssessmentScoring/AssessmentScoring.vue';
 import OverviewOfServiceArea from './components/OverviewOfServiceArea/OverviewOfServiceArea.vue'
 import NewBigTitleBox from './components/newBigTitleBox/newBigTitleBox.vue'
+import VehicleModelStay from './components/VehicleModelStay/VehicleModelStay.vue';
+import ContractInformation from './components/ContractInformation/ContractInformation.vue'
+import SignedClients from './components/SignedClients/SignedClients.vue'
+import AnnualAccountsReceivable from './components/AnnualAccountsReceivable/AnnualAccountsReceivable.vue';
+import DetailedPayment from './components/DetailedPayment/DetailedPayment.vue';
+import DailyInspection from './components/DailyInspection/DailyInspection.vue';
+import AssessmentScoringRanking from './components/AssessmentScoringRanking/AssessmentScoringRanking.vue';
+
 
 // 页面样式
 let pageType = ref<string>("center")
@@ -95,34 +103,54 @@ const handleChangePageTab = (value: number) => {
         </div>
 
         <!-- 分区一 -->
-        <div class="content169" v-if="selectPageTab === 1">
+        <div class="content169" v-if="selectPageTab === 1 || selectPageTab === 3">
             <div class="content169Left">
                 <!-- 消息轮播框 -->
                 <NoticeListBox :currentService="currentService" />
 
+                <template v-if="selectPageTab === 1">
                     <!-- <modalTitle :title="'流量趋势'" style="margin-top: 20px;" /> -->
-                <NewBigTitleBox title="流量趋势" style="margin-top: 37px;" />
-
                     <div class="content169LeftContent">
-                    <div class="leftContentBoxItem">
+                        <!-- 服务区概况 -->
-                        <!-- 车流断面趋势 -->
+                        <OverviewOfServiceArea />
-                        <TrendOfTrafficFlow :currentService="currentService" />
+
+                        <NewBigTitleBox :title="'管理运营监控'" style="margin-top: 13px;" />
+
+                        <!-- 今日走势图 -->
+                        <TodayTrend />
+
+                        <!-- 服务区繁忙排行  交易排行 -->
+                        <BusyTradingRanking style="margin-top: 11px;" />
+
+                        <!-- 交易预警 -->
+                        <TradingAlert style="margin-top: 11px;" />
                     </div>
 
-                    <div class="leftContentBoxItem" style="margin-top: 30px;">
+                </template>
-                        <!-- 入区车辆趋势 -->
-                        <VehiclesEntering :currentService="currentService" />
-                    </div>
 
-                    <div class="leftContentBoxItem" style="margin-top: 20px;">
+                <template v-if="selectPageTab === 3">
-                        <!-- 客流变化 -->
+                    <NewBigTitleBox title="应收账款" style="margin-top: 20px;" />
-                        <PassengerFlowChanges :currentService="currentService" />
+
-                    </div>
+                    <div style="width: 100%;box-sizing: border-box;padding: 20px 11px;">
+
+                        <!-- 合同信息 -->
+                        <ContractInformation />
+
+                        <!-- 收款完成进度 -->
+                        <PaymentProgress style="margin-top: 24px;" />
+
+                        <!-- 收款预警 -->
+                        <AccountsReceivableWarning style="margin-top: 24px;" />
                     </div>
 
 
+                </template>
 
-                <modalTitle :title="'节假日营收分析'" style="margin-top: 20px;">
+
+
+
+
+                <!-- <modalTitle :title="'节假日营收分析'" style="margin-top: 20px;">
                     <template #extra>
                         <div class="FestivalBox">
                             <el-select class="festivalSelect" v-model="FestivalValue" placeholder="Select"
@@ -132,9 +160,9 @@ const handleChangePageTab = (value: number) => {
                             </el-select>
                         </div>
                     </template>
-                </modalTitle>
+</modalTitle> -->
                 <!-- 节假日营收分析 -->
-                <FestivalRevenue :currentService="currentService" />
+                <!-- <FestivalRevenue :currentService="currentService" /> -->
             </div>
 
             <div class="content169Center">
@@ -152,31 +180,61 @@ const handleChangePageTab = (value: number) => {
             <div class="content169Right">
                 <!-- 时间天气等内容 -->
                 <BasicMessageBox :currentService="currentService" />
-                <modalTitle :title="'经营业态月度情况'" style="margin-top: 20px;" />
-                <div class="rightContentBox">
-                    <!-- 多业态收入 -->
-                    <MultiIndustryIncome style="margin-top: 20px;" :currentService="currentService" />
 
+                <template v-if="selectPageTab === 1">
+                    <NewBigTitleBox :title="'经营业态月度情况'" style="margin-top: 20px;" />
+                    <div class="rightContentBox">
                         <!-- 区域营收占比 -->
-                    <RegionalRevenue :currentService="currentService" style="margin-top: 90px;" />
+                        <RegionalRevenue :currentService="currentService" style="margin-top: 20px;" />
+
+                        <!-- 多业态收入 -->
+                        <MultiIndustryIncome style="margin-top: 34px;" :currentService="currentService" />
 
                         <!-- 业态结构占比 -->
-                    <BusinessStructure :currentService="currentService" style="margin-top: 30px;" />
+                        <BusinessStructure :currentService="currentService" style="margin-top: 22px;" />
+                    </div>
+
+                    <NewBigTitleBox :title="'节假日营收分析'" style="margin-top: 22px;" />
+                    <!-- 节假日营收分析 -->
+                    <FestivalRevenue :currentService="currentService" />
+                </template>
+
+
+                <template v-if="selectPageTab === 3">
+                    <NewBigTitleBox :title="'应收账款'" style="margin-top: 20px;" />
+                    <div style="width: 100%;box-sizing: border-box;padding: 16px 11px 0;">
+                        <!-- 签约客户 -->
+                        <SignedClients />
+
+                        <!-- 应收总额完成度 -->
+                        <TotalAccountsReceivable style="margin-top: 35px;" />
+
+                        <!-- 年度应收总额完成度 -->
+                        <AnnualAccountsReceivable style="margin-top: 35px;" />
+
+                        <!-- 详细款项完成进度 -->
+                        <DetailedPayment style="margin-top: 35px;" />
+                    </div>
+                </template>
+
             </div>
         </div>
+
+        <div class="pageBottom" v-if="selectPageTab === 1 || selectPageTab === 3">
+
         </div>
 
         <!-- 分区二 -->
         <div class="content1692st" v-if="selectPageTab === 2">
             <div class="content1692stLeft">
                 <!-- 消息轮播框 -->
-                <NoticeListBox style="margin-top: 20px;" />
+                <NoticeListBox style="margin-top: 20px;width: 50%;" />
                 <!-- 核心经营数据 -->
-                <modalTitle :title="'核心经营数据'" style="margin-top: 20px;" />
+                <!-- <modalTitle :title="'核心经营数据'" style="margin-top: 20px;" /> -->
-                <CoreBusinessData style="position: relative;z-index: 9;" :noTitle="true" />
+                <!-- <CoreBusinessData style="position: relative;z-index: 9;" :noTitle="true" /> -->
 
                 <!-- 客群画像分析 -->
-                <modalTitle :title="'客群画像分析'" style="margin-top: 20px;" />
+                <NewBigTitleBox :title="'客群画像分析'" :type="2" style="margin-top: 20px" />
 
                 <div class="leftBottomContent">
                     <!-- 年龄 -->
@@ -186,7 +244,7 @@ const handleChangePageTab = (value: number) => {
                     <GenderCustomerGroup style="margin-left: 20px;margin-top: 20px;" />
 
                     <!-- 停留时长 -->
-                    <CustomerGroupStay style="margin-left: 20px;margin-top: 20px;" />
+                    <!-- <CustomerGroupStay style="margin-left: 20px;margin-top: 20px;" /> -->
 
                     <!-- 偏好类型 -->
                     <PreferenceType style="margin-left: 20px;margin-top: 20px;" />
@@ -204,60 +262,105 @@ const handleChangePageTab = (value: number) => {
                     </div>
 
                     <div class="left3stBottomItem">
-                        <!-- 品牌消费水平 -->
+                        <!-- 消费时段分析 -->
-                        <BrandConsumptionLevel style="margin-top: 20px;" />
+                        <ConsumptionPeriod style="margin-top: 11px;" />
                     </div>
 
                     <div class="left3stBottomItem">
-                        <!-- 消费时段分析 -->
+                        <!-- 品牌消费水平 -->
-                        <ConsumptionPeriod style="margin-top: 20px;" />
+                        <BrandConsumptionLevel style="margin-top: 11px;" />
+                    </div>
+
+                    <div class="left3stBottomItem">
+                        <!-- 客群特征分析 -->
+                        <CustomerGroup style="margin-top: 15px;" />
+                    </div>
+
+                    <div class="left3stBottomItem">
+                        <!-- 客群消费偏好 -->
+                        <CustomerConsumptionPreferences style="margin-top: 15px;" />
                     </div>
 
                 </div>
             </div>
             <div class="content1692stCenter">
-                <modalTitle :title="'应收账款'" />
+                <NewBigTitleBox :title="'月度经营情况'" />
-                <div class="left4stContent">
+
+                <div style="width: 100%;box-sizing: border-box;padding: 20px 11px 0;">
+                    <!-- 经营数据同比分析  -->
+                    <BusinessCase :currentService="currentService" />
+                </div>
+                <!-- <modalTitle :title="'应收账款'" /> -->
+                <!-- <div class="left4stContent"> -->
                 <!-- 收款完成进度 -->
-                    <PaymentProgress />
+                <!-- <PaymentProgress /> -->
 
                 <!-- 应收总额完成度 -->
-                    <TotalAccountsReceivable style="margin-top: 33px;" />
+                <!-- <TotalAccountsReceivable style="margin-top: 33px;" /> -->
 
                 <!-- 收款预警 -->
-                    <AccountsReceivableWarning style="margin-top: 44px;" />
+                <!-- <AccountsReceivableWarning style="margin-top: 44px;" /> -->
-                </div>
+                <!-- </div> -->
             </div>
             <div class="content1692stRight">
                 <!-- 时间天气等内容 -->
                 <BasicMessageBox style="margin-top: 19px;" />
-                <!-- 电商模块 -->
-                <modalTitle :title="'电商模块'" style="margin-top: 20px;" />
 
-                <div class="left5stContent">
+                <NewBigTitleBox title="流量趋势" style="margin-top: 24px;" />
-                    <div class="left5stCenter">
+
-                        <!-- 线上线下销售额对比 -->
+                <div class="content169LeftContent" style="margin-top: 21px;">
-                        <SalesComparison />
+                    <div class="leftContentBoxItem">
-                        <!-- 退货率 -->
+                        <!-- 车流断面趋势 -->
-                        <ReturnRate />
+                        <TrendOfTrafficFlow :currentService="currentService" />
                     </div>
 
+                    <div class="leftContentBoxItem" style="margin-top: 23px;">
+                        <!-- 入区车辆趋势 -->
+                        <VehiclesEntering :currentService="currentService" />
+                    </div>
+
+                    <div class="leftContentBoxItem" style="margin-top: 30px;">
+                        <!-- 客流变化 -->
+                        <PassengerFlowChanges :currentService="currentService" />
+                    </div>
+
+
+                    <div class="leftContentBoxItem" style="margin-top: 33px;">
+                        <!-- 车型停留分析 / 日均 -->
+                        <VehicleModelStay />
+                    </div>
+                </div>
+
+
+
+
+
+
+                <!-- 电商模块 -->
+                <!-- <modalTitle :title="'电商模块'" style="margin-top: 20px;" /> -->
+
+                <!-- <div class="left5stContent"> -->
+                <!-- <div class="left5stCenter"> -->
+                <!-- 线上线下销售额对比 -->
+                <!-- <SalesComparison /> -->
+                <!-- 退货率 -->
+                <!-- <ReturnRate /> -->
+                <!-- </div> -->
                 <!-- 热门商品榜单 -->
-                    <HotProductList style="margin-top: 30px;" :pageType="pageType" />
+                <!-- <HotProductList style="margin-top: 30px;" :pageType="pageType" /> -->
 
                 <!-- 服务区繁忙排行  交易排行 -->
-                    <BusyTradingRanking style="margin-top: 24px;" />
+                <!-- <BusyTradingRanking style="margin-top: 24px;" /> -->
-                </div>
+                <!-- </div> -->
             </div>
         </div>
 
         <!-- 分区三 -->
-        <div class="content1693st" v-if="selectPageTab === 3">
+        <div class="content1693st" v-if="selectPageTab === 99">
             <div class="content1693stItem">
                 <!-- 消息轮播框 -->
                 <NoticeListBox />
                 <modalTitle :title="'供应商'" style="margin-top: 20px;" />
-
                 <SupplierListBox />
 
                 <!-- 品牌 -->
@@ -301,44 +404,86 @@ const handleChangePageTab = (value: number) => {
             </div>
 
             <div class="content1693stItem">
-                <!-- 经营数据同比分析  -->
+
-                <BusinessCase :currentService="currentService" />
             </div>
         </div>
 
         <!-- 分区四 -->
         <div class="content1694st" v-if="selectPageTab === 4">
             <div class="content1694stItem">
+                <!-- 消息轮播框 -->
+                <NoticeListBox style="margin-top: 20px;" />
+
+                <NewBigTitleBox :title="'管理运营监控'" style="margin-top: 29px;" />
+
+                <div style="width: 100%;box-sizing: border-box;padding: 20px 11px 0;">
+                    <!-- 日常巡检(蓝湖的设备完好率) -->
+                    <DailyInspection />
+
+                    <!-- 考核打分排行榜 -->
+                    <AssessmentScoringRanking style="margin-top: 19px;" />
+
+                    <!-- 热门商品榜单 -->
+                    <HotProductList style="margin-top: 20px;" :pageType="'left'" />
+                </div>
+
+
+
+
+
+
+
                 <!-- 客群特征分析 -->
-                <CustomerGroup />
+                <!-- <CustomerGroup /> -->
 
                 <!-- 客群消费偏好 -->
-                <CustomerConsumptionPreferences style="margin-top: 140px;" />
+                <!-- <CustomerConsumptionPreferences style="margin-top: 140px;" /> -->
 
                 <!-- 车型停留分析/日均 -->
-                <VehicleStayAnalysis style="margin-top: 130px;" />
+                <!-- <VehicleStayAnalysis style="margin-top: 130px;" /> -->
             </div>
 
 
             <div class="content1694stItem">
+                <NewBigTitleBox :title="'品牌'" style="margin-top: 74px;" />
+
                 <!-- 商户类别比例图 和 下面的列表  -->
                 <BrandDetail />
             </div>
 
             <div class="content1694stItem">
+                <NewBigTitleBox :title="'供应商'" style="margin-top: 74px;" />
+                <SupplierListBox />
                 <!-- 在线服务区和在线收银机 -->
-                <TodayTrend />
+                <!-- <TodayTrend /> -->
 
                 <!-- 交易预警 -->
-                <TradingAlert />
+                <!-- <TradingAlert /> -->
 
                 <!-- 考核打分排行榜 -->
-                <AssessmentScoring style="margin-top: 130px;" />
+                <!-- <AssessmentScoring style="margin-top: 130px;" /> -->
             </div>
             <div class="content1694stItem">
+                <!-- 时间天气等内容 -->
+                <BasicMessageBox style="margin-top: 19px;" />
 
-                <!-- 服务区概况 -->
+                <NewBigTitleBox :title="'电商模块'" style="margin-top: 28px;" />
-                <OverviewOfServiceArea />
+
+                <!-- 商城订单统计 -->
+                <MallOrderStatistics style="margin-top: 20px;" />
+
+                <NewBigTitleBox :title="'商户生态结构图谱'" style="margin-top: 28px;" />
+
+                <!-- 本月福利金发送额度 -->
+                <ThisMonthBenefits style="margin-top: 10px;" />
+
+                <!-- 核心品类占比 -->
+                <CoreCategory style="margin-top: 10px;" />
+
+                <NewBigTitleBox :title="'商户生态结构图谱'" style="margin-top: 28px;" />
+
+                <!-- 商户评分排行榜 -->
+                <MerchantRatingRanking style="margin-top: 16px;" />
             </div>
         </div>
 

src/page/index/service.ts

@@ -377,3 +377,51 @@ export async function handleGetMonthAnalysis(params: any) {
     }
     return data.Result_Data.List
 }
+
+// 车流停留分析/日均
+export async function handleGetBayonetSTAnalysis(params: any) {
+    const data: any = await requestCode.get('/Revenue/GetBayonetSTAnalysis', params)
+    if (data.Result_Code !== 100) {
+        return data
+    }
+    return data.Result_Data.List
+}
+
+
+
+// 获取节假日各类项目所有天数对客分析/日均
+export async function handleGetHolidayDailyAnalysis(params: any) {
+    const data: any = await requestCode.get('/Revenue/GetHolidayDailyAnalysis', params)
+    if (data.Result_Code !== 100) {
+        return data
+    }
+    return data.Result_Data.List
+}
+
+
+// 获取年度应收总额完成度
+export async function handleGetProjectYearlyArrearageList(params: any) {
+    const data: any = await request.get('/Contract/GetProjectYearlyArrearageList', params)
+    if (data.Result_Code !== 100) {
+        return data
+    }
+    return data.Result_Data
+}
+
+// 获取日常巡检的数据
+export async function handleGetPatrolAnalysis(params: any) {
+    const data: any = await requestCode.get('/Examine/GetPatrolAnalysis', params)
+    if (data.Result_Code !== 100) {
+        return data
+    }
+    return data.Result_Data
+}
+
+// 考核考评的数据
+export async function handleGetExamineResultList(params: any) {
+    const data: any = await requestCode.get('/Examine/GetExamineResultList', params)
+    if (data.Result_Code !== 100) {
+        return data
+    }
+    return data.Result_Data.List
+}

src/page/index/style.less

@@ -255,23 +255,27 @@
     }
 
     .content169 {
-        width: 100%;
+        // width: 100%;
-        // height: calc(100% - 48px);
+        // height: calc(100% - 86px);
-        height: calc(100% - 86px);
+        width: 100vw;
+        height: calc(100vh - 48px);
+
         box-sizing: border-box;
         // padding: 0 20px 35px;
-        padding: 0 35px;
+        // padding: 0 35px;
         display: flex;
         align-items: center;
         justify-content: space-between;
 
         .content169Left {
-            width: calc((100% - 105px) / 4);
+            width: calc((100% - 90px) / 4);
             height: 100%;
             position: relative;
             z-index: 9;
             box-sizing: border-box;
             padding-top: 21px;
+            padding-left: 35px;
+            background: linear-gradient(90deg, rgba(3, 22, 38, 0.7) 0%, rgba(3, 22, 38, 0) 100%);
             // padding-top: 20px;
 
             .content169LeftContent {
@@ -309,7 +313,7 @@
         }
 
         .content169Center {
-            width: calc((100% - 105px) / 4 * 2 + 35px);
+            width: calc((100% - 90px) / 4 * 2 + 30px);
             height: 100%;
             box-sizing: border-box;
             padding-top: 66px;
@@ -318,18 +322,20 @@
         }
 
         .content169Right {
-            width: calc((100% - 105px) / 4);
+            width: calc((100% - 90px) / 4);
             height: 100%;
             position: relative;
             z-index: 9;
             box-sizing: border-box;
             padding-top: 21px;
+            padding-right: 35px;
+            background: linear-gradient(270deg, rgba(3, 22, 38, 0.7) 0%, rgba(3, 22, 38, 0) 100%);
 
             .rightContentBox {
                 width: 100%;
                 box-sizing: border-box;
-                padding: 20px 11px 0;
+                padding: 0 11px 0;
-                background: linear-gradient(0deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
+                // background: linear-gradient(0deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
                 // backdrop-filter: blur(10px);
                 /* 高斯模糊效果 */
                 // -webkit-backdrop-filter: blur(10px);
@@ -340,6 +346,18 @@
 
     }
 
+    .pageBottom {
+        width: 100vw;
+        height: 72px;
+        // background: linear-gradient(0deg, rgba(3, 22, 38, 0.7) 0%, rgba(3, 22, 38, 0) 100%);
+        background-image: url('../../assets/image/pageBottomBg.png');
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        z-index: 9;
+        transform: translateY(-72px);
+    }
+
     .content1692st {
         width: 100%;
         height: calc(100% - 48px);
@@ -350,7 +368,8 @@
         justify-content: space-between;
 
         .content1692stLeft {
-            width: 47%;
+            // width: 47%;
+            width: calc((100% - 90px) / 4 * 2 + 30px);
             height: 100%;
 
             .leftBottomContent {
@@ -447,9 +466,9 @@
         justify-content: space-between;
 
         .content1694stItem {
-            width: 22%;
+            width: calc((100% - 90px) / 4);
             height: 100%;
-            box-sizing: border-box;
+
 
         }
     }

tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/main.ts","./src/shims-vue.d.ts","./src/vite-env.d.ts","./src/options/serveice.ts","./src/page/index/service.ts","./src/request/newrequest.ts","./src/request/request.ts","./src/request/requestcode.ts","./src/request/requestconfig.ts","./src/request/requestlocal.ts","./src/request/requestpos.ts","./src/request/requesttest.ts","./src/router/index.ts","./src/stores/counter.ts","./src/app.vue","./src/page/index/index.vue","./src/page/index/components/accountsreceivablewarning/accountsreceivablewarning.vue","./src/page/index/components/announcementtopic/announcementtopic.vue","./src/page/index/components/basicmessagebox/basicmessagebox.vue","./src/page/index/components/brandconsumptionlevel/brandconsumptionlevel.vue","./src/page/index/components/brandlisttbox/brandlisttbox.vue","./src/page/index/components/businessstructure/businessstructure.vue","./src/page/index/components/busytradingranking/busytradingranking.vue","./src/page/index/components/centertitle/centertitle.vue","./src/page/index/components/consumptionconversion/consumptionconversion.vue","./src/page/index/components/consumptionlevel/consumptionlevel.vue","./src/page/index/components/consumptionperiod/consumptionperiod.vue","./src/page/index/components/corebusinessdata/corebusinessdata.vue","./src/page/index/components/corecategory/corecategory.vue","./src/page/index/components/customeragegroup/customeragegroup.vue","./src/page/index/components/customergroupstay/customergroupstay.vue","./src/page/index/components/deductiontype/deductiontype.vue","./src/page/index/components/festivalrevenue/festivalrevenue.vue","./src/page/index/components/gendercustomergroup/gendercustomergroup.vue","./src/page/index/components/highqualitymerchants/highqualitymerchants.vue","./src/page/index/components/hotproductlist/hotproductlist.vue","./src/page/index/components/mallorderstatistics/mallorderstatistics.vue","./src/page/index/components/merchantcategory/merchantcategory.vue","./src/page/index/components/merchantratingranking/merchantratingranking.vue","./src/page/index/components/multiindustryincome/multiindustryincome.vue","./src/page/index/components/pagemap/pagemap.vue","./src/page/index/components/passengerflowchanges/passengerflowchanges.vue","./src/page/index/components/paymentprogress/paymentprogress.vue","./src/page/index/components/preferencetype/preferencetype.vue","./src/page/index/components/privaterideservice/privaterideservice.vue","./src/page/index/components/regionalrevenue/regionalrevenue.vue","./src/page/index/components/returnrate/returnrate.vue","./src/page/index/components/salescomparison/salescomparison.vue","./src/page/index/components/thismonthbenefits/thismonthbenefits.vue","./src/page/index/components/todaytrend/todaytrend.vue","./src/page/index/components/totalaccountsreceivable/totalaccountsreceivable.vue","./src/page/index/components/tradingalert/tradingalert.vue","./src/page/index/components/trendoftrafficflow/trendoftrafficflow.vue","./src/page/index/components/vehiclesentering/vehiclesentering.vue","./src/page/index/components/modaltitle/modaltitle.vue","./src/page/index/components/noticelistbox/noticelistbox.vue","./src/page/index/components/pagetop/pagetop.vue","./src/page/index/components/smalltitle/smalltitle.vue","./src/page/index/components/supplierlistbox/supplierlistbox.vue"],"version":"5.6.3"}
+{"root":["./src/main.ts","./src/shims-vue.d.ts","./src/vite-env.d.ts","./src/options/serveice.ts","./src/page/index/service.ts","./src/request/newrequest.ts","./src/request/request.ts","./src/request/requestcode.ts","./src/request/requestconfig.ts","./src/request/requestlocal.ts","./src/request/requestpos.ts","./src/request/requesttest.ts","./src/router/index.ts","./src/stores/counter.ts","./src/app.vue","./src/page/index/index.vue","./src/page/index/components/accountsreceivablewarning/accountsreceivablewarning.vue","./src/page/index/components/announcementtopic/announcementtopic.vue","./src/page/index/components/assessmentscoring/assessmentscoring.vue","./src/page/index/components/basicmessagebox/basicmessagebox.vue","./src/page/index/components/brandconsumptionlevel/brandconsumptionlevel.vue","./src/page/index/components/branddetail/branddetail.vue","./src/page/index/components/brandlisttbox/brandlisttbox.vue","./src/page/index/components/businesscase/businesscase.vue","./src/page/index/components/businessstructure/businessstructure.vue","./src/page/index/components/busytradingranking/busytradingranking.vue","./src/page/index/components/centertitle/centertitle.vue","./src/page/index/components/consumptionconversion/consumptionconversion.vue","./src/page/index/components/consumptionlevel/consumptionlevel.vue","./src/page/index/components/consumptionperiod/consumptionperiod.vue","./src/page/index/components/corebusinessdata/corebusinessdata.vue","./src/page/index/components/corecategory/corecategory.vue","./src/page/index/components/customeragegroup/customeragegroup.vue","./src/page/index/components/customerconsumptionpreferences/customerconsumptionpreferences.vue","./src/page/index/components/customergroup/customergroup.vue","./src/page/index/components/customergroupstay/customergroupstay.vue","./src/page/index/components/deductiontype/deductiontype.vue","./src/page/index/components/festivalrevenue/festivalrevenue.vue","./src/page/index/components/gendercustomergroup/gendercustomergroup.vue","./src/page/index/components/highqualitymerchants/highqualitymerchants.vue","./src/page/index/components/hotproductlist/hotproductlist.vue","./src/page/index/components/mallorderstatistics/mallorderstatistics.vue","./src/page/index/components/merchantcategory/merchantcategory.vue","./src/page/index/components/merchantratingranking/merchantratingranking.vue","./src/page/index/components/multiindustryincome/multiindustryincome.vue","./src/page/index/components/overviewofservicearea/overviewofservicearea.vue","./src/page/index/components/pagemap/pagemap.vue","./src/page/index/components/passengerflowchanges/passengerflowchanges.vue","./src/page/index/components/paymentprogress/paymentprogress.vue","./src/page/index/components/preferencetype/preferencetype.vue","./src/page/index/components/privaterideservice/privaterideservice.vue","./src/page/index/components/regionalrevenue/regionalrevenue.vue","./src/page/index/components/returnrate/returnrate.vue","./src/page/index/components/salescomparison/salescomparison.vue","./src/page/index/components/thismonthbenefits/thismonthbenefits.vue","./src/page/index/components/todaytrend/todaytrend.vue","./src/page/index/components/totalaccountsreceivable/totalaccountsreceivable.vue","./src/page/index/components/tradingalert/tradingalert.vue","./src/page/index/components/trendoftrafficflow/trendoftrafficflow.vue","./src/page/index/components/vehiclestayanalysis/vehiclestayanalysis.vue","./src/page/index/components/vehiclesentering/vehiclesentering.vue","./src/page/index/components/modaltitle/modaltitle.vue","./src/page/index/components/newbigtitlebox/newbigtitlebox.vue","./src/page/index/components/noticelistbox/noticelistbox.vue","./src/page/index/components/pagetop/pagetop.vue","./src/page/index/components/smalltitle/smalltitle.vue","./src/page/index/components/supplierlistbox/supplierlistbox.vue"],"version":"5.6.3"}