update

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

@@ -264,7 +264,6 @@
         .featureAnalysisBox {
             width: 100%;
             height: 300px;
-            margin-top: 18px;
         }
 
         .featureAnalysisBottom {

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

@@ -70,7 +70,7 @@ watch(
 onMounted(async () => {
     // 用tab可以修改的方法
     await handleGetData()
-    await handleGetBottomData()
+    // await handleGetBottomData()
 })
 
 
@@ -249,11 +249,12 @@ const handleShowData = async (value: number) => {
                 show: false             // 隐藏刻度线（短横线）
             },
             axisLabel: {
+                width: '60',
                 color: '#fff'
             },
             nameTextStyle: {
                 color: '#fff',          // 名称颜色
-                padding: [0, 0, 0, 20]  // 名称位置调整
+                padding: [0, 0, 0, 30]  // 名称位置调整
             }
         },
         series: [{
@@ -417,7 +418,9 @@ onBeforeUnmount(() => {
 
 <template>
     <div class="BusinessCaseBox">
-        <SmallTitle style="padding-left: 0;">
+        <SmallTitle title="营收特征分析" />
+
+        <SmallTitle style="padding-left: 0;margin-top: 38px;">
             <template #extra>
                 <div class="BusinessCaseTabBox">
                     <div :class="selectTab === item.value ? 'BusinessCaseItem selectBusinessCaseItem' : 'BusinessCaseItem'"
@@ -430,7 +433,7 @@ onBeforeUnmount(() => {
 
 
         <!-- 营收同比 -->
-        <div class="BusinessCaseRevenueYOY">
+        <div class="BusinessCaseRevenueYOY" v-if="false">
             <div class="BusinessCaseLeftItem">
                 <img class="BusinessIcon" :src="RevenueYOYIcon" />
             </div>
@@ -496,13 +499,13 @@ onBeforeUnmount(() => {
 
         <!-- 营收特征分析 -->
         <div class="featureAnalysis">
-            <SmallTitle title="营收特征分析" />
+            <!-- <SmallTitle title="营收特征分析" /> -->
 
             <div class="featureAnalysisBox" id="featureAnalysis"></div>
 
-            <SmallTitle title="营收同比分析" style="margin-top: 31px;" />
+            <!-- <SmallTitle title="营收同比分析" style="margin-top: 31px;" />
 
-            <div class="featureAnalysisBottom" id="featureAnalysisBottom"></div>
+            <div class="featureAnalysisBottom" id="featureAnalysisBottom"></div> -->
         </div>
 
     </div>

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

@@ -153,12 +153,17 @@ onMounted(async () => {
                 type: 'line' // 改为线条指示器
             },
             formatter: function (params: any) {
-
+                console.log('paramsparams', params);
-                return `<div>
+                let str: string = ''
+                if (params && params.length > 0) {
+                    params.forEach((item: any) => {
+                        str += item.seriesName + item.value + '%'
+                    })
+                }
+                return `
                     <div>${params[0].name}时：</div>
-                    <div>车流量：${params[0]?.value}辆</div>
+                    ${str}
-                    <div>客单量：${params[1]?.value}笔</div>
+                `
-                </div>`
 
                 // let toolStr: string[] = []
                 // if (params && params.length > 0) {

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

@@ -32,7 +32,7 @@
         }
 
         .CustomerAgeGroup {
-            width: 190px;
+            width: 100%;
             height: 154px;
         }
 

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

@@ -42,15 +42,15 @@ onMounted(async () => {
 
     const option = {
         tooltip: {  // 新增 tooltip 配置
-            trigger: 'item',  // 触发类型：坐标轴触发
+            trigger: 'axis',  // 触发类型：坐标轴触发
             confine: true,  // 将 tooltip 限制在图表区域内
             // axisPointer: {    // 坐标轴指示器配置
             //     type: 'shadow' // 阴影指示器（适合柱状图）
             // },
             formatter: function (params: any) {  // 自定义提示框内容
                 return `<div>
-                    <div>男性：${res.seriesDataMan[params.dataIndex]}%</div>
+                    <div>男性：${res.seriesDataMan[params[0].dataIndex]}%</div>
-                    <div>女性：${res.seriesDataWoman[params.dataIndex]}%</div>
+                    <div>女性：${res.seriesDataWoman[params[1].dataIndex]}%</div>
                 </div>`
                 // return `
                 //     <div style="font-weight:bold">${params.data.name} ${params?.percent}%  ${res.realData[params.dataIndex].toLocaleString()}元</div>
@@ -93,7 +93,7 @@ onMounted(async () => {
         grid: {
             left: '10',    // 增加左侧空间
             right: '10',   // 增加右侧空间
-            bottom: '30',
+            bottom: '20',
             top: '30',
             containLabel: true
         },
@@ -105,7 +105,7 @@ onMounted(async () => {
                 // realData: res.realData,
                 type: 'bar',
                 barWidth: '6',
-                showBackground: true,
+                // showBackground: true,
                 backgroundStyle: {
                     borderRadius: [4, 4, 0, 0],
                     // color: 'rgba(23, 42, 70, 1)'
@@ -133,7 +133,7 @@ onMounted(async () => {
                 // realData: res.realData,
                 type: 'bar',
                 barWidth: '6',
-                showBackground: true,
+                // showBackground: true,
                 backgroundStyle: {
                     borderRadius: [4, 4, 0, 0],
                     // color: 'rgba(23, 42, 70, 1)'
@@ -211,7 +211,8 @@ const handleGetData = async () => {
 
 
     let res: any = {
-        category: ["25以下", "25-35", "35-45", "45以上"],// x轴的内容
+        // category: ["25以下", "25-35", "35-45", "45以上"],// x轴的内容
+        category: ["20岁", "30岁", "40岁", "50以上"],// x轴的内容
         seriesDataMan: seriesDataMan,// 男生
         seriesDataWoman: seriesDataWoman// 女生
     }

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

@@ -59,7 +59,7 @@ const handleGoMounted = async () => {
             type: 'category',
             data: res.category,
             axisLabel: {
-                width: 40,          // 限制标签宽度为60px
+                width: 80,          // 限制标签宽度为60px
                 overflow: 'truncate', // 超出部分显示为省略号
                 ellipsis: '...',     // 自定义省略符号（可选）
                 interval: 0          // 强制显示所有标签
@@ -75,7 +75,7 @@ const handleGoMounted = async () => {
         },
         yAxis: {
             type: 'value',
-            name: "客单占比(%)",
+            name: "%",
             axisLine: {
                 show: true,
                 lineStyle: {
@@ -83,7 +83,7 @@ const handleGoMounted = async () => {
                 }
             },
             nameTextStyle: {
-                padding: [0, 0, 0, 30]
+                padding: [0, 20, 0, 0]
             },
             splitLine: { show: false }  // 隐藏刻度线
         },
@@ -178,7 +178,7 @@ const handleGetData = async () => {
 
 
     if (data.CustomerSaleList && data.CustomerSaleList.length > 0) {
-        let list = data.CustomerSaleList.slice(0, 10)
+        let list = data.CustomerSaleList.slice(0, 15)
         list.forEach((item: any) => {
             category.push(item.BusinessTradeName)
             seriesData.push(item.TotalRatio)

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

@@ -90,11 +90,14 @@ const handleShowCharts = async () => {
         },
         yAxis: {
             type: 'value',
-            name: '交易额(元)',
+            name: '元',
             axisLabel: {
                 color: '#fff',
                 formatter: '{value}'
             },
+            nameTextStyle: {
+                padding: [0, 20, 0, 0]
+            },
             axisTick: {
                 show: false // 隐藏刻度线
             },

src/page/index/components/FestivalRevenueSumInfo/FestivalRevenueSumInfo.less

@@ -0,0 +1,19 @@
+.FestivalRevenueSumInfoBox {
+    width: 100%;
+    // height: 250px;
+    box-sizing: border-box;
+    padding: 20px 11px 0;
+    // padding: 35px 20px 40px; // 老的
+    // padding: 20px 10px 30px;
+    // 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);
+    /* Safari 兼容 */
+
+    .FestivalRevenueSumInfo {
+        width: 100%;
+        height: 260px;
+        // margin-top: 20px;
+    }
+}

src/page/index/components/FestivalRevenueSumInfo/FestivalRevenueSumInfo.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, watch } from 'vue';
+import './FestivalRevenueSumInfo.less'
+
+import * as echarts from 'echarts/core';
+import { LineChart } from 'echarts/charts';
+import {
+    GridComponent,
+    TitleComponent,
+    TooltipComponent,
+    LegendComponent
+} from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+
+
+// 注册组件
+echarts.use([
+    LineChart,
+    GridComponent,
+    TitleComponent,
+    TooltipComponent,
+    LegendComponent,
+    CanvasRenderer
+]);
+
+let myChart: echarts.ECharts;
+
+
+onMounted(async () => {
+    await handleGoMounted()
+})
+
+// 传入的数据
+const props = defineProps<{
+    currentService?: any;
+    FestivalValue?: number
+}>();
+
+
+// 监听传入的选中服务区
+watch(
+    () => props.currentService,
+    (newVal, oldVal) => {
+        handleGoMounted()
+    },
+    { deep: true }
+);
+// 监听传入的节日
+watch(
+    () => props.FestivalValue,
+    (newVal, oldVal) => {
+        handleGoMounted()
+    },
+    { deep: true }
+);
+
+// 初始运行的方法
+const handleGoMounted = async () => {
+    const res = await handleGetRealData()
+
+    const chartDom = document.getElementById('FestivalRevenueSumInfo');
+    if (!chartDom) return;
+
+    myChart = echarts.init(chartDom);
+
+    const option = {
+        tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
+        legend: [  // 使用两个legend对象分别控制
+            // 第一行：外圈圆环图例
+            {
+                data: ['A类', 'B类', 'C类', 'D类'].map(name => ({
+                    name,
+                    icon: 'circle'
+                })),
+                orient: 'horizontal',
+                top: 'bottom',
+                left: 'center',
+                padding: [0, 0, 30, 0],  // 下边距为内圈图例留空间
+                textStyle: { color: '#fff' }
+            },
+            // 第二行：内圈饼图图例
+            {
+                data: ['子类1', '子类2', '子类3'].map(name => ({
+                    name,
+                    icon: 'rect'
+                })),
+                orient: 'horizontal',
+                top: 'bottom',
+                left: 'center',
+                textStyle: { color: '#fff' }
+            }
+        ],
+        series: [
+            // 外圈环形图
+            {
+                name: '外圈数据',
+                type: 'pie',
+                radius: ['50%', '70%'],
+                center: ['50%', '45%'],  // 稍微上移给图例留空间
+                data: [
+                    { value: 335, name: 'A类' },
+                    { value: 310, name: 'B类' },
+                    { value: 234, name: 'C类' },
+                    { value: 135, name: 'D类' }
+                ],
+                label: { show: false }
+            },
+            // 内圈饼图
+            {
+                name: '内圈数据',
+                type: 'pie',
+                radius: ['0%', '30%'],
+                center: ['50%', '45%'],  // 与外圈同中心
+                data: [
+                    { value: 100, name: '子类1' },
+                    { value: 200, name: '子类2' },
+                    { value: 300, name: '子类3' }
+                ],
+                label: { show: false }
+            }
+        ]
+    };
+
+
+    myChart.setOption(option);
+    myChart.resize();
+    window.addEventListener('resize', resizeChart);
+
+}
+
+// 拿到数据
+const handleGetRealData = async () => {
+
+}
+
+const resizeChart = () => {
+    myChart?.resize();
+};
+
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', resizeChart);
+    myChart?.dispose();
+});
+</script>
+
+
+
+<template>
+    <div class="FestivalRevenueSumInfoBox">
+        <div class="FestivalRevenueSumInfo" id="FestivalRevenueSumInfo"></div>
+    </div>
+</template>

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

@@ -29,7 +29,7 @@
             height: 145px;
 
             .GenderCustomerGroup {
-                width: 106px;
+               width: 100%;
                 height: 145px;
             }
 

src/page/index/components/GenderCustomerGroup/GenderCustomerGroup.vue

@@ -37,6 +37,15 @@ onMounted(async () => {
 
     myChart = echarts.init(chartDom);
 
+    const rect = chartDom.getBoundingClientRect();
+    const width = rect.width;
+    const height = rect.height;
+
+    // 计算center位置（20%，50%）对应的实际像素
+    const centerX = width * 0.5;
+    const centerY = height * 0.4;
+
+
     const option = {
         tooltip: {
             trigger: 'item',
@@ -48,8 +57,9 @@ onMounted(async () => {
             },
             formatter: function (params: any) {
                 return `
-                <div style="font-weight:bold">${params.name}  ${params.value}%</div>
+                <div style="font-weight:bold">${params.name}</div>
             `;
+            //   ${params.value}%
             }
         },
         graphic: {  // 关键配置：在图表中心添加图片
@@ -61,8 +71,8 @@ onMounted(async () => {
                         width: 43,
                         height: 43
                     },
-                    left: 'center',
+                    left: centerX - 21.5,
-                    top: '21',
+                    top: centerY - 21.5,
                     z: 10
                 }
             ]
@@ -71,8 +81,8 @@ onMounted(async () => {
             {
                 name: 'Access From',
                 type: 'pie',
-                radius: ['60%', '80%'],
+                radius: ['55%', '70%'],
-                center: ['50%', '30%'],  // 关键修改：强制居中 [水平位置, 垂直位置]
+                center: ['50%', '40%'],  // 关键修改：强制居中 [水平位置, 垂直位置]
                 avoidLabelOverlap: false,
                 itemStyle: {
                     color: function (params: any) {
@@ -92,17 +102,14 @@ onMounted(async () => {
             }
         ],
         legend: {
-            data: ['男性', '女性'],
+            data: res.legendData,
             bottom: 0,
-            left: 0,
+            left: 'center',
             orient: 'horizontal', // 水平排列（默认值，可省略）
-            itemWidth: 12,
-            itemHeight: 12,
-            itemGap: 10,        // 调整图例项之间的间距
             textStyle: {
                 color: '#fff'
             },
-        },
+        }
     };
 
 
@@ -123,18 +130,23 @@ const handleGetSectionFlowCount = async () => {
 
     let seriesData: any = []
     let realData: any = []
+    let legendData: any = []
 
     if (data && data.length > 0) {
         data.forEach((item: any) => {
             if (item.name === '男性' || item.name === '女性') {
-                seriesData.push({ name: item.name, value: item.data[0] })
+                seriesData.push({ name: `${item.name} ${item.data[0]}%`, value: item.data[0] })
+                legendData.push({ name: `${item.name} ${item.data[0]}%` })
             }
         })
     }
 
+    console.log('legendData', legendData)
+
     let res: any = {
         seriesData: seriesData,// y轴的数据
-        realData: realData// 真实数据
+        realData: realData,// 真实数据
+        legendData: legendData
     }
     return res
 }

src/page/index/components/PageMap/PageMap.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue';
+import { onMounted, reactive, ref, watch } from 'vue';
 import './PageMap.less'
 import { GaodeMap, LineLayer, PointLayer, Scene } from '@antv/l7';
 import { handleGetServerpartList, handleGetServerPartListJava } from '../../service';
@@ -27,8 +27,26 @@ let SPREGIONTYPECOLORList = reactive<any>([]);
 let SPREGIONTYPECOLOR = ref<any>();
 // 悬浮框实例
 const hoverPoint = ref<any>();
+// 当前的服务区
+let currentService = ref<any>()
 
 
+const props = defineProps<{
+    selectPointServicePart?: any
+}>();
+
+
+watch(
+    () => props.selectPointServicePart,
+    (newVal, oldVal) => {
+        if (newVal && newVal.length > 0) {
+            // 获取播报数据
+            handleHighLightServerpartIds(newVal)
+        }
+    },
+    { deep: true }
+);
+
 onMounted(async () => {
     scene.value = new Scene({
         id: "map",
@@ -162,8 +180,9 @@ const handleAllServiceMarkedPoint = async () => {
 
     // 鼠标取消点击
     pointLayer.on("unclick", () => {
-        handleDeleteLayer("lightPointLayer");
+
-        emit("handleGetCurrentService", null)
+        handleLayerToDefault();
+
     });
 
 
@@ -202,15 +221,63 @@ const handlePointHover = () => {
     return el;
 };
 
+// 点击服务区圆点触发的事件
+const handleHighLightServerpartIds = (idList: number[]) => {
+    handleDeleteLayer("lightPointLayer");
+    handleAllPonitToGray()
+
+    let selectServerpartDetailList: any = []
+    if (defaultServerPartList && defaultServerPartList.length > 0) {
+        defaultServerPartList.forEach((item: any) => {
+            if (idList.indexOf(item.SERVERPART_ID) !== -1) {
+                selectServerpartDetailList.push(item)
+            }
+        })
+    }
+
+    handleAddSelect(selectServerpartDetailList)
+}
+
+// 全部服务区点位变为灰色的点
+const handleAllPonitToGray = () => {
+    let current: any = handleGetThisLayer("pointLayer");
+    current.color("#dededd");
+    current.render();
+}
+
+// 查找当前全部图层中是否有传入的图层名称 有的话 输出图层数据
+const handleGetThisLayer = (name: string) => {
+    let res: any;
+    let allLayers: any = scene.value.getLayers();
+    if (allLayers && allLayers.length > 0) {
+        allLayers.forEach((item: any) => {
+            if (item.name === name) {
+                res = item;
+            }
+        });
+    }
+    if (res) {
+        return res;
+    }
+};
+
 // 点击服务区圆点触发的事件
 const handleClickPointLayer = async (detail: any) => {
+    if (detail.SERVERPART_ID === currentService.value?.SERVERPART_ID) {
+
+    } else {
+        handleDeleteLayer("lightPointLayer");
         handleAddSelect(detail)
     }
+}
 
 // 服务区的选中效果
 const handleAddSelect = (detail: any) => {
-    let allLayers: any = scene.value.getLayers();
+    if (Array.isArray(detail)) {
+    } else {
+        currentService.value = detail
         emit("handleGetCurrentService", detail)
+    }
 
     const lightPointLayer = new PointLayer({});
     lightPointLayer.name = "lightPointLayer";
@@ -220,7 +287,7 @@ const handleAddSelect = (detail: any) => {
     lightPointLayer.style({
         opacity: 0.6,
     });
-    lightPointLayer.source([detail], {
+    lightPointLayer.source(Array.isArray(detail) ? detail : [detail], {
         parser: {
             type: "json",
             x: "SERVERPART_X",
@@ -228,22 +295,61 @@ const handleAddSelect = (detail: any) => {
         },
     });
     scene.value.addLayer(lightPointLayer);
+
+
+
+    let allLayers: any = scene.value.getLayers();
+
 }
 
 // 传入名字清除图层
 const handleDeleteLayer = (name: string) => {
     let allLayers: any = scene.value.getLayers();
     if (allLayers && allLayers.length > 0) {
-        allLayers.forEach((item: any) => {
+        // 找到要删除的图层
-            if (item.name === name) {
+        const layerToRemove = allLayers.find((layer: any) => layer.name === name);
-                scene.value.removeLayer(item);
+
+
+        if (layerToRemove) {
+            // 使用 scene 的 removeLayer 方法删除图层
+            scene.value.removeLayer(layerToRemove);
+            // 确保更新渲染
+            scene.value.render();
         }
-        });
     }
 };
 
+// 图层变回原先
+const handleLayerToDefault = () => {
+    emit("handleGetCurrentService", null)
+    emit("handleMapToChangeNotice")
+
+    handleDeleteLayer("lightPointLayer");
+
+
+    let allLayers: any = scene.value.getLayers();
+
+
+    let current: any = handleGetThisLayer("pointLayer");
+    if (current) {
+        // 重置颜色映射
+        current.color("SPREGIONTYPETYPE", (value: any) => {
+            return colorList1[value];
+        });
+        // 更新样式并立即重绘
+        current.style({
+            opacity: 0.6,
+        });
+        // 强制更新
+        current.render();
+        // 确保场景也更新
+        scene.value.render();
+    }
+}
+
 const emit = defineEmits<{
     (e: "handleGetCurrentService", obj: any): void;
+    (e: "handleMapToChangeNotice"): void;
 }>();
 
 

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

@@ -81,42 +81,51 @@ const handleGoMounted = async () => {
                 padding: [0, 30, 0, 0]  // 调整单位位置
             },
             axisLabel: {
+                width: 60,
                 color: '#fff',
                 formatter: '{value}'  // 刻度值保持纯数字
             },
             axisLine: {
+                show: true, // 显示 y 轴线
                 lineStyle: {
                     color: '#fff' // 设置 y 轴线颜色为白色（可选）
                 }
             },
-            splitLine: { show: false }
+            splitLine: { show: false },
+            splitNumber: 5
         },
         series: [
             {
+                name: `${res.currentYear}年断面流量`,
                 // data: [120, 200, 150, 80, 70, 110, 130],
                 data: res.seriesData,
                 realData: res.realData,
                 type: 'bar',
-                barWidth: '6',
+                barWidth: 5,
-                showBackground: true,
                 smooth: 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],
+                    borderRadius: [3, 3, 0, 0]
-                    // 动态返回渐变颜色
+                },
-                    color: function (params: any) {
+                label: {
-                        return new echarts.graphic.LinearGradient(
+                    show: true,
-                            0, 0, 0, 1,
+                    position: 'top',
-                            [
+                    formatter: function (params: any) {
-                                { offset: 0, color: '#018FFF' }, // 渐变起始色
+                        // 自定义显示内容
-                                { offset: 1, color: '#00F4FF' }  // 渐变结束色
+                        return res.addRateList && res.addRateList[params.dataIndex] ? `${res.addRateList[params.dataIndex]}%` : '';
-                            ]
+                    },
-                        );
+                    color: '#fff',  // 文字颜色
+                    fontSize: 10     // 文字大小
                 }
+            },
+            {
+                name: `${res.yesYear}年断面流量`,
+                data: res.yesSeriesData,
+                realData: res.yesRealData,
+                type: 'bar',
+                barWidth: 5,
+                smooth: true,
+                itemStyle: {
+                    borderRadius: [3, 3, 0, 0]
                 }
             },
         ],
@@ -124,7 +133,7 @@ const handleGoMounted = async () => {
             left: '0',    // 左侧间距
             right: '0',   // 右侧间距
             bottom: '0',    // 底部间距
-            top: '30',       // 顶部间距
+            top: '40',       // 顶部间距
             containLabel: true // 确保坐标轴标签在grid内
         },
         tooltip: {  // 新增 tooltip 配置
@@ -134,15 +143,24 @@ const handleGoMounted = async () => {
             },
             formatter: function (params: any) {  // 自定义提示框内容
                 // params 是数组，包含当前 hover 的所有系列数据
-                const data = params[0];
+                return `<div>
-                let realData = res.realData[params[0].dataIndex]
+                        <div>${params[0].seriesName}：${res?.realData[params[0]?.dataIndex].toLocaleString()}辆</div>
-
+                        <div>${params[1].seriesName}：${res?.yesRealData[params[1]?.dataIndex].toLocaleString()}辆</div>
-                return `
+                    </div>`
-                <div style="font-weight:bold">${data.name}</div>
-                <div>车流量：${realData ? realData + '辆' : data.value + '万辆'} </div>
-            `;
             }
         },
+        color: ['#008CFF', '#69BCFF', '#FF5E5E', '#FF9500'],
+        legend: {
+            data: [`${res.currentYear}年断面流量`, `${res.yesYear}年断面流量`],
+            textStyle: {
+                color: '#fff',
+                fontSize: 12  // 设置图例文字大小为12px
+            },
+            right: '4%',
+            top: '0%',
+            orient: 'horizontal',
+            type: 'scroll'     // 如果图例过长，启用滚动
+        },
     };
 
 
@@ -171,18 +189,51 @@ const handleGetSectionFlowCount = async () => {
     console.log('fdjisfhhusahfdskf', data);
 
 
+    const yesReq: any = {
+        ProvinceCode: '530000',
+        StatisticsDate: moment().subtract(1, 'y').endOf('M').format('YYYY-MM-DD'),
+        StartDate: moment().subtract(1, 'y').startOf('y').format('YYYY-MM-DD'),
+        EndDate: moment().subtract(1, 'y').endOf('M').format('YYYY-MM-DD'),
+    }
+    let yesData = await handleGetMonthAnalysis(yesReq)
+    console.log('yesDatayesDatayesDatayesData', yesData);
+
     // let list = data.slice(0, 5)
     let category: string[] = []
     let seriesData: number[] = []
-    let realData: string[] = []
+    let realData: number[] = []
 
     if (data && data.length > 0) {
         data.forEach((item: any) => {
             category.push(`${item.Statistics_Month}月`)
             seriesData.push(Number((item.SectionFlow_Count / 10000).toFixed(2)))
+            realData.push(item.SectionFlow_Count)
         })
     }
 
+    let yesSeriesData: number[] = []
+    let yesRealData: number[] = []
+
+    if (yesData && yesData.length > 0) {
+        yesData.forEach((item: any) => {
+            yesSeriesData.push(Number((item.SectionFlow_Count / 10000).toFixed(2)))
+            yesRealData.push(item.SectionFlow_Count)
+        })
+    }
+
+    // 算出增长率
+    let addRateList: string[] = []
+    for (let i = 0; i < category.length; i++) {
+        let currentValue: number = realData[i]
+        let yesValue: number = yesRealData[i]
+        let add = ""
+        if (yesValue > 0 && currentValue > 0) {
+            add = (((currentValue - yesValue) / yesValue) * 100).toFixed(2)
+        }
+        addRateList.push(add)
+    }
+
+
 
     // list.forEach((item: any) => {
     //     category.push(item.Serverpart_Name.split('服务区')[0])
@@ -193,7 +244,12 @@ const handleGetSectionFlowCount = async () => {
     let res = {
         category: category,// x轴的内容
         seriesData: seriesData,// y轴的数据
-        realData: realData
+        realData: realData,
+        yesSeriesData: yesSeriesData,
+        yesRealData: yesRealData,
+        currentYear: moment().format('YYYY'),
+        yesYear: moment().subtract(1, 'y').format('YYYY'),
+        addRateList: addRateList
     }
 
     return res
@@ -211,7 +267,7 @@ onBeforeUnmount(() => {
 
 <template>
     <div class="TrendOfTrafficFlowBox">
-        <SmallTitle :title="`断面流量趋势`" />
+        <SmallTitle :title="`断面流量`" />
 
         <div class="TrendOfTrafficFlowCharts">
             <div class="TrendOfTrafficFlow" id="TrendOfTrafficFlow"></div>

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

@@ -81,7 +81,7 @@ const handleGoMounted = async () => {
         yAxis: [
             {
                 type: 'value',
-                name: '营收金额(万元)',
+                name: '万元',
                 splitLine: {
                     show: false
                 },
@@ -96,15 +96,16 @@ const handleGoMounted = async () => {
                     }
                 },
                 axisLabel: {
+                    width: 60,
                     color: '#fff', // y轴标签颜色
                     formatter: '{value}' // 添加单位
                 }
             }
         ],
         grid: {
-            left: '10',    // 增加左侧空间
+            left: '0',    // 增加左侧空间
-            right: '10',   // 增加右侧空间
+            right: '0',   // 增加右侧空间
-            bottom: '10',
+            bottom: '0',
             top: '50',
             containLabel: true
         },
@@ -117,6 +118,16 @@ const handleGoMounted = async () => {
                 itemStyle: {
                     borderRadius: [3, 3, 0, 0],
                     color: '#008CFF' // 直接指定颜色
+                },
+                label: {
+                    show: true,
+                    position: 'top',
+                    formatter: function (params: any) {
+                        // 自定义显示内容
+                        return res.addList && res.addList[params.dataIndex] ? `${res.addList[params.dataIndex]}%` : '';
+                    },
+                    color: '#fff',  // 文字颜色
+                    fontSize: 10     // 文字大小
                 }
             },
             {
@@ -138,7 +149,7 @@ const handleGoMounted = async () => {
             formatter: function (params: any) {
                 let result = params[0].axisValue + '<br/>';
                 params.forEach((item: any, index: number) => {
-                    result += `${item.marker} ${item.seriesName}: ${index === 0 ? res?.realData[item.dataIndex] : res?.realDataLastYear[item.dataIndex]}元<br/>`;
+                    result += `${item.marker} ${item.seriesName}: ${index === 0 ? res?.realData[item.dataIndex].toLocaleString() : res?.realDataLastYear[item.dataIndex].toLocaleString()}元<br/>`;
                 });
                 return result;
             }
@@ -166,9 +177,9 @@ const handleGoMounted = async () => {
 const handleGetData = async () => {
     let category: number[] = []
     let seriesData: number[] = []
-    let realData: string[] = []
+    let realData: number[] = []
     let seriesDataLastYear: number[] = []
-    let realDataLastYear: string[] = []
+    let realDataLastYear: number[] = []
 
 
     const req: any = {
@@ -183,7 +194,7 @@ const handleGetData = async () => {
         data.forEach((item: any) => {
             category.push(item.name)
             seriesData.push(Number((Number(item.value) / 10000).toFixed(2)))
-            realData.push(Number(item.value).toLocaleString())
+            realData.push(Number(item.value))
         })
     }
 
@@ -198,7 +209,7 @@ const handleGetData = async () => {
     if (lastYearData && lastYearData.length > 0) {
         lastYearData.forEach((item: any) => {
             seriesDataLastYear.push(Number((Number(item.value) / 10000).toFixed(2)))
-            realDataLastYear.push(Number(item.value).toLocaleString())
+            realDataLastYear.push(Number(item.value))
         })
     }
 
@@ -206,6 +217,19 @@ const handleGetData = async () => {
     console.log('lastYearDatalastYearDatalastYearDatalastYearDatalastYearData', lastYearData);
 
 
+    let addList: string[] = []
+    if (category && category.length > 0) {
+        for (let i = 0; i < category.length; i++) {
+            let current: number = realData[i]
+            let yes: number = realDataLastYear[i]
+            let add: string = ""
+            if (current > 0 && yes > 0) {
+                add = (((current - yes) / yes) * 100).toFixed(2)
+            }
+            addList.push(add)
+        }
+    }
+
     let res: any = {
         category: category,// x轴的内容
         seriesData: seriesData,// 今年的数据
@@ -213,7 +237,8 @@ const handleGetData = async () => {
         seriesDataLastYear: seriesDataLastYear,// 去年的数据
         realDataLastYear: realDataLastYear,// 去年的实际数据
         currentYear: moment().format('YYYY'),
-        lastYear: moment().subtract(1, 'y').format('YYYY')
+        lastYear: moment().subtract(1, 'y').format('YYYY'),
+        addList: addList
     }
     return res
 }
@@ -234,7 +259,7 @@ onBeforeUnmount(() => {
 <template>
     <div class="VehicleModelStayBox">
         <!-- <SmallTitle :title="`车型停留分析/日均${searchTime ? `(${searchTime}月)` : ''}`"></SmallTitle> -->
-        <SmallTitle :title="`经营效益趋势`"></SmallTitle>
+        <SmallTitle :title="`经营效益`"></SmallTitle>
 
         <div class="VehicleModelStayCharts" style="margin-top:15px">
             <div class="VehicleModelStay" id="VehicleModelStay"></div>

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

@@ -86,10 +86,10 @@ const handleGoMounted = async () => {
             type: 'scroll'     // 如果图例过长，启用滚动
         },
         grid: {
-            left: '3%',
+            left: '0',
-            right: '4%',
+            right: '0',
-            bottom: '3%',
+            bottom: '0',
-            top: '40%',
+            top: '40',
             containLabel: true
         },
         xAxis: {
@@ -118,15 +118,18 @@ const handleGoMounted = async () => {
                     padding: [0, 30, 0, 0]  // 调整单位位置
                 },
                 axisLabel: {
+                    width: 60,
                     color: '#fff',
                     formatter: '{value}'  // 刻度值保持纯数字
                 },
                 axisLine: {
+                    show: true, // 显示 y 轴线
                     lineStyle: {
                         color: '#fff' // 设置 y 轴线颜色为白色（可选）
                     }
                 },
-                splitLine: { show: false }
+                splitLine: { show: false },
+                splitNumber: 5,
             },
             // {
             //     type: 'value',
@@ -148,6 +151,16 @@ const handleGoMounted = async () => {
                 yAxisIndex: 0,
                 itemStyle: {
                     borderRadius: [3, 3, 0, 0]
+                },
+                label: {
+                    show: true,
+                    position: 'top',
+                    formatter: function (params: any) {
+                        // 自定义显示内容
+                        return res.carAdd && res.carAdd[params.dataIndex] ? `${res.carAdd[params.dataIndex]}%` : '';
+                    },
+                    color: '#fff',  // 文字颜色
+                    fontSize: 10     // 文字大小
                 }
             },
             {
@@ -239,18 +252,20 @@ const handleGoMounted = async () => {
         yAxis: [
             {
                 type: 'value',
-                name: '交易金额(万元)',
+                name: '万元',
                 splitLine: { show: false },
                 splitNumber: 4,
                 nameTextStyle: {
                     color: '#fff',
-                    padding: [0, 0, 0, 10]  // 调整单位位置
+                    padding: [0, 0, 0, 0]  // 调整单位位置
                 },
                 axisLabel: {
+                    width: 60,
                     color: '#fff',
                     formatter: '{value}'  // 刻度值保持纯数字
                 },
                 axisLine: {
+                    show: true, // 显示 y 轴线
                     lineStyle: {
                         color: '#fff' // 设置 y 轴线颜色为白色（可选）
                     }
@@ -266,6 +281,16 @@ const handleGoMounted = async () => {
                 symbolSize: 6,
                 lineStyle: {
                     width: 2
+                },
+                label: {
+                    show: true,
+                    position: 'top',
+                    formatter: function (params: any) {
+                        // 自定义显示内容
+                        return res.revenueAdd && res.revenueAdd[params.dataIndex] ? `${res.revenueAdd[params.dataIndex]}%` : '';
+                    },
+                    color: '#fff',  // 文字颜色
+                    fontSize: 10     // 文字大小
                 }
             },
             {
@@ -305,14 +330,16 @@ const handleGetSectionFlowCount = async () => {
     const req: any = {
         StartDate: moment().startOf('y').format('YYYY-MM-DD'),
         EndDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
-        Serverpart_ID: props.currentService?.SERVERPART_ID || "1143,1144,1186,1188,1189,1190,1191,1192,1193,979,999,1023,1029,1030,1031,1033,1037,1041,1078,1087,1095,1137,1141,1147,1157,1159,1164,1165,1170,1174,981,985,987,994,1007,1009,1010,1012,1016,971,996,1002,1017,1018,1022,1027,1032,1073,1076,1099,1118,1122,1140,1142,1150,1171,970,969,978,1001,1005,1015,1050,1051,1052,1053,1064,1066,1096,1097,1101,1103,1104,1105,1106,1109,1112,1114,1115,1116,1117,991,995,1039,1080,1094,1100,1107,1123,1127,1133,1154,1155,1161,1163,1179,1180,1019,1021,1048,1049,1056,1059,1062,1063,1069,1093,1067,1228,1008,1070,1072,1166,1113,1148,1153,986,1086,1075,1182,1068,1226,1218,1088,1090,1058,1044,1084,1077,1089,1081,1091,1083,1162,1036,1092,988,993,1111,1158,1194,1202,1230,1198,1207,1216,1221,1203,1206,1209,1215,1227,1201,1205,1208,1214,1217,1229,1212,1065,1085,1055,1071,982,1168,1185,1110,977,1169,973,974,1011,1151,1121,1046,1045,1172,1146,976,1187,1156,1181,1136,1138,1211,983,1195,1131,1176,1167,1223,997,1252,1225,1043,1129,992,1149,975,1382,989,1047,1197,1025,1199,1183,1222,1178,1003,1013,1224,1139,1125,1173,1135,1038,1177,1060,1175,1184,1035,1026,1028,1079,1119,1120,1489"
+        ProvinceCode: 530000
+        // Serverpart_ID: props.currentService?.SERVERPART_ID || "1143,1144,1186,1188,1189,1190,1191,1192,1193,979,999,1023,1029,1030,1031,1033,1037,1041,1078,1087,1095,1137,1141,1147,1157,1159,1164,1165,1170,1174,981,985,987,994,1007,1009,1010,1012,1016,971,996,1002,1017,1018,1022,1027,1032,1073,1076,1099,1118,1122,1140,1142,1150,1171,970,969,978,1001,1005,1015,1050,1051,1052,1053,1064,1066,1096,1097,1101,1103,1104,1105,1106,1109,1112,1114,1115,1116,1117,991,995,1039,1080,1094,1100,1107,1123,1127,1133,1154,1155,1161,1163,1179,1180,1019,1021,1048,1049,1056,1059,1062,1063,1069,1093,1067,1228,1008,1070,1072,1166,1113,1148,1153,986,1086,1075,1182,1068,1226,1218,1088,1090,1058,1044,1084,1077,1089,1081,1091,1083,1162,1036,1092,988,993,1111,1158,1194,1202,1230,1198,1207,1216,1221,1203,1206,1209,1215,1227,1201,1205,1208,1214,1217,1229,1212,1065,1085,1055,1071,982,1168,1185,1110,977,1169,973,974,1011,1151,1121,1046,1045,1172,1146,976,1187,1156,1181,1136,1138,1211,983,1195,1131,1176,1167,1223,997,1252,1225,1043,1129,992,1149,975,1382,989,1047,1197,1025,1199,1183,1222,1178,1003,1013,1224,1139,1125,1173,1135,1038,1177,1060,1175,1184,1035,1026,1028,1079,1119,1120,1489"
     }
     const data = await handleGetMonthAnalysis(req)
 
     const yesReq: any = {
         StartDate: moment().subtract(1, 'y').startOf('y').format('YYYY-MM-DD'),
         EndDate: moment().subtract(1, 'y').endOf('y').format('YYYY-MM-DD'),
-        Serverpart_ID: props.currentService?.SERVERPART_ID || "1143,1144,1186,1188,1189,1190,1191,1192,1193,979,999,1023,1029,1030,1031,1033,1037,1041,1078,1087,1095,1137,1141,1147,1157,1159,1164,1165,1170,1174,981,985,987,994,1007,1009,1010,1012,1016,971,996,1002,1017,1018,1022,1027,1032,1073,1076,1099,1118,1122,1140,1142,1150,1171,970,969,978,1001,1005,1015,1050,1051,1052,1053,1064,1066,1096,1097,1101,1103,1104,1105,1106,1109,1112,1114,1115,1116,1117,991,995,1039,1080,1094,1100,1107,1123,1127,1133,1154,1155,1161,1163,1179,1180,1019,1021,1048,1049,1056,1059,1062,1063,1069,1093,1067,1228,1008,1070,1072,1166,1113,1148,1153,986,1086,1075,1182,1068,1226,1218,1088,1090,1058,1044,1084,1077,1089,1081,1091,1083,1162,1036,1092,988,993,1111,1158,1194,1202,1230,1198,1207,1216,1221,1203,1206,1209,1215,1227,1201,1205,1208,1214,1217,1229,1212,1065,1085,1055,1071,982,1168,1185,1110,977,1169,973,974,1011,1151,1121,1046,1045,1172,1146,976,1187,1156,1181,1136,1138,1211,983,1195,1131,1176,1167,1223,997,1252,1225,1043,1129,992,1149,975,1382,989,1047,1197,1025,1199,1183,1222,1178,1003,1013,1224,1139,1125,1173,1135,1038,1177,1060,1175,1184,1035,1026,1028,1079,1119,1120,1489"
+        ProvinceCode: 530000
+        // Serverpart_ID: props.currentService?.SERVERPART_ID || "1143,1144,1186,1188,1189,1190,1191,1192,1193,979,999,1023,1029,1030,1031,1033,1037,1041,1078,1087,1095,1137,1141,1147,1157,1159,1164,1165,1170,1174,981,985,987,994,1007,1009,1010,1012,1016,971,996,1002,1017,1018,1022,1027,1032,1073,1076,1099,1118,1122,1140,1142,1150,1171,970,969,978,1001,1005,1015,1050,1051,1052,1053,1064,1066,1096,1097,1101,1103,1104,1105,1106,1109,1112,1114,1115,1116,1117,991,995,1039,1080,1094,1100,1107,1123,1127,1133,1154,1155,1161,1163,1179,1180,1019,1021,1048,1049,1056,1059,1062,1063,1069,1093,1067,1228,1008,1070,1072,1166,1113,1148,1153,986,1086,1075,1182,1068,1226,1218,1088,1090,1058,1044,1084,1077,1089,1081,1091,1083,1162,1036,1092,988,993,1111,1158,1194,1202,1230,1198,1207,1216,1221,1203,1206,1209,1215,1227,1201,1205,1208,1214,1217,1229,1212,1065,1085,1055,1071,982,1168,1185,1110,977,1169,973,974,1011,1151,1121,1046,1045,1172,1146,976,1187,1156,1181,1136,1138,1211,983,1195,1131,1176,1167,1223,997,1252,1225,1043,1129,992,1149,975,1382,989,1047,1197,1025,1199,1183,1222,1178,1003,1013,1224,1139,1125,1173,1135,1038,1177,1060,1175,1184,1035,1026,1028,1079,1119,1120,1489"
     }
 
     const yesData = await handleGetMonthAnalysis(yesReq)
@@ -349,6 +376,29 @@ const handleGetSectionFlowCount = async () => {
     }
 
 
+    let carAdd: string[] = []
+    let revenueAdd: string[] = []
+    if (category && category.length > 0) {
+        for (let i = 0; i < category.length; i++) {
+            let currentCar: number = realDataCar[i]
+            let yesCar: number = yesRealDataCar[i]
+            let add: string = ''
+            if (currentCar > 0 && yesCar > 0) {
+                add = (((currentCar - yesCar) / yesCar) * 100).toFixed(2)
+            }
+            carAdd.push(add)
+
+            let addRenvenue: string = ""
+            let currentRevenue: number = realDataRevenue[i]
+            let yesRevenue: number = yesRealDataRevenue[i]
+            if (currentRevenue > 0 && yesRevenue > 0) {
+                addRenvenue = (((currentRevenue - yesRevenue) / yesRevenue) * 100).toFixed(2)
+            }
+            revenueAdd.push(addRenvenue)
+        }
+    }
+
+
 
     let res: any = {
         category: category,// x轴的内容
@@ -361,7 +411,9 @@ const handleGetSectionFlowCount = async () => {
         yesRealDataCar: yesRealDataCar,// 入区车流量 实际 去年
         yesRealDataRevenue: yesRealDataRevenue,// 营收 实际  去年
         currentYear: moment().format('YYYY'), // 当前年份
-        yesYear: moment().subtract(1, 'y').format('YYYY')// 去年年份
+        yesYear: moment().subtract(1, 'y').format('YYYY'),// 去年年份
+        carAdd: carAdd,// 入区车流的增长
+        revenueAdd: revenueAdd,// 对客营收的增长
     }
 
     console.log('fdshufahsudifhasdjkfh', res);
@@ -391,7 +443,7 @@ onBeforeUnmount(() => {
 
 <template>
     <div class="VehiclesEnteringBox">
-        <SmallTitle :title="'入区车流趋势'">
+        <SmallTitle :title="'入区车流'">
             <!-- <template #extra>
                 <div class="legendBox" style="display: flex;align-items: center;">
                     <div class="legendItem" style="display: flex;align-items: center;margin-right: 20px;">
@@ -422,7 +474,7 @@ onBeforeUnmount(() => {
         </div>
 
 
-        <SmallTitle :title="'对客营收趋势'" style="margin-top: 23px;" />
+        <SmallTitle :title="'对客营收'" style="margin-top: 23px;" />
 
         <div class="TrendCustomerRevenueCharts">
             <div class="TrendCustomerRevenue" id="TrendCustomerRevenue"></div>

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

@@ -20,5 +20,8 @@
 
 .newBigTitleBoxLong {
     background-image: url(../../../../assets/image/newTitleLongBg.png);
-
+}
+
+.newThreeBigTitleBoxLong {
+    background-image: url(../../../../assets/image/titleThreeBg.png);
 }

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

@@ -13,7 +13,8 @@ const props = defineProps<{
 
 
 <template>
-    <div :class="type === 2 ? 'newBigTitleBox newBigTitleBoxLong' : 'newBigTitleBox'">
+    <div
+        :class="type === 2 ? 'newBigTitleBox newBigTitleBoxLong' : type === 3 ? 'newBigTitleBox newThreeBigTitleBoxLong' : 'newBigTitleBox'">
         {{ props?.title || "" }}
         <slot name="extra"></slot>
     </div>

src/page/index/components/noticeListBox/noticeListBox.less

@@ -8,6 +8,7 @@
     align-items: center;
     padding: 0 10px;
     box-sizing: border-box;
+    cursor: pointer;
 
     .noticeIcon {
         width: 18px;

src/page/index/components/noticeListBox/noticeListBox.vue

@@ -13,6 +13,8 @@ let currentIndex = ref<number>(0)
 let scrollInterval = ref<any>(null)
 let isScrolling = ref<boolean>(false);
 let scrollDuration = ref('10s'); // 动态动画时长
+// 当前全部服务区的id
+let serverpartId = ref<number[]>([])
 
 onMounted(async () => {
     // 获取播报数据
@@ -26,6 +28,11 @@ const props = defineProps<{
     selectPageTab?: number
 }>();
 
+// 改变页面显示状态
+const emit = defineEmits<{
+    (e: "handelGetNoticeListAllId", idList: number[]): void; // 切换页面分区
+}>();
+
 // 监听传入的选中服务区
 watch(
     () => props.currentService,
@@ -61,10 +68,62 @@ const handleGetNoticeList = async () => {
         appId: "wxee018fb96955552a"
     }
     const data = await handleGetGDNearServiceList(req)
-    let list: any = data
+    // let list: any = data
+
+    console.log('listlistlistlist', data);
+
+    let list: any = [
+        {
+            NOTICEINFO_TITLE: "云南省蒙新高速蒙自服务区（下行）招商信息公告",
+            SERVERPART_ID: 1187
+        },
+        {
+            NOTICEINFO_TITLE: "云南省景海高速景洪服务区（双侧）招商信息公告",
+            SERVERPART_ID: 1176
+        },
+        {
+            NOTICEINFO_TITLE: "云南省景海高速勐海服务区（双侧）招商信息公告",
+            SERVERPART_ID: 1177
+        },
+        {
+            NOTICEINFO_TITLE: "云南省大南高速大仓服务区（双侧）招商信息公告",
+            SERVERPART_ID: 971
+        },
+        {
+            NOTICEINFO_TITLE: "云南省大南高速巍山服务区（双侧）招商信息公告",
+            SERVERPART_ID: 973
+        },
+        {
+            NOTICEINFO_TITLE: "云南省南景高速拥翠服务区（双侧）招商信息公告",
+            SERVERPART_ID: 970
+        },
+        {
+            NOTICEINFO_TITLE: "云南省南景高速三岔河服务区（双侧）招商信息公告",
+            SERVERPART_ID: 1109
+        },
+        {
+            NOTICEINFO_TITLE: "云南省南景高速景东北停车区（双侧）招商信息公告",
+            SERVERPART_ID: 1110
+        },
+        {
+            NOTICEINFO_TITLE: "云南省思澜高速龙潭服务区（双侧）招商信息公告",
+            SERVERPART_ID: 1161
+        },
+        {
+            NOTICEINFO_TITLE: "云南省思澜高速糯扎渡服务区（双侧）招商信息公告",
+            SERVERPART_ID: 1163
+        }
+    ]
+
+
+    let allServerpartId: number[] = []
 
     noticeList.length = 0;
-    list && list.forEach((item: any) => noticeList.push(item));
+    list && list.forEach((item: any) => {
+        noticeList.push(item)
+        allServerpartId.push(item.SERVERPART_ID)
+    });
+    serverpartId.value = allServerpartId
     console.log('noticeList:', noticeList); // 添加这行
     nextTick(() => {
         // 数据加载完成后启动滚动
@@ -132,6 +191,12 @@ const stopScrolling = () => {
     // }
 }
 
+// 点击了这个
+const handleClickBigBox = () => {
+    console.log('serverpartId.valueserverpartId.valueserverpartId.value', serverpartId.value);
+    emit('handelGetNoticeListAllId', serverpartId.value)
+}
+
 onUnmounted(() => {
     // // 清理定时器等资源
     // if (scrollTimer) {
@@ -151,7 +216,7 @@ onUnmounted(() => {
 
 <template>
     <!-- 横向滚动 -->
-    <div class="noticeListBigBox">
+    <div class="noticeListBigBox" @click="handleClickBigBox">
         <img class="noticeIcon" :src="noticeIcon" />
         <div class="noticeListBox">
             <div :class="['noticeList', `noticeList${props.selectPageTab}`, { 'scrolling': isScrolling }]"

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

@@ -127,7 +127,6 @@ const handleGetNowWeather = async () => {
 const emit = defineEmits<{
     (e: "handleChangePageType"): void; // 切换页面样式
     (e: "handleChangePageTab", value: number): void; // 切换页面分区
-
 }>();
 
 const handleChangePageType = () => {

src/page/index/index.vue

@@ -58,7 +58,8 @@ import DetailedPayment from './components/DetailedPayment/DetailedPayment.vue';
 import DailyInspection from './components/DailyInspection/DailyInspection.vue';
 import AssessmentScoringRanking from './components/AssessmentScoringRanking/AssessmentScoringRanking.vue';
 import SmallTitle from './components/smallTitle/smallTitle.vue';
-
+import FestivalRevenueSumInfo from './components/FestivalRevenueSumInfo/FestivalRevenueSumInfo.vue'
+import AIIcon from '../../assets/image/AIIcon.png'
 
 // 页面样式
 let pageType = ref<string>("center")
@@ -80,6 +81,14 @@ let FestivalValue = ref<number>(5)
 let currentService = ref<any>({})
 // 新样式顶部的tab选择
 let selectPageTab = ref<number>(1)
+// 当前消息滚动框里面的全部服务区id
+let noticeAllServicePartId = ref<number[]>([])
+// 显示对话框
+let showDialogBox = ref<boolean>(false)
+// 搜索内容
+let searchText = ref<string>('')
+// 判断是否在打印
+let isPrinting = ref<boolean>(false)
 
 
 // 改变页面样式
@@ -93,7 +102,7 @@ const handleChangePageType = () => {
 
 // 拿到选择的服务区数据
 const handleGetCurrentService = (obj: any) => {
-    currentService.value = obj
+    // currentService.value = obj
 }
 
 // 改变选择的页面tab
@@ -102,6 +111,30 @@ const handleChangePageTab = (value: number) => {
     currentService.value = null
 }
 
+// 拿到消息滚动框里面的全部id
+const handelGetNoticeListAllId = (idList: number[]) => {
+    noticeAllServicePartId.value = idList
+}
+
+// 地图通过首页 去改变 消息传出的 数据
+const handleMapToChangeNotice = () => {
+    noticeAllServicePartId.value = []
+}
+
+// 点击 AI  触发的事件
+const handleClickAIBox = () => {
+    showDialogBox.value = !showDialogBox.value
+}
+
+// 提问问题
+const handleSubmit = () => {
+
+}
+// 终止回答
+const handleStopPrint = () => {
+
+}
+
 </script>
 
 <template>
@@ -114,11 +147,11 @@ const handleChangePageTab = (value: number) => {
         </div>
 
         <!-- 分区一 -->
-        <div class="content169" v-show="selectPageTab === 1 || selectPageTab === 3">
+        <div class="content169" v-show="selectPageTab === 1">
             <div class="content169Left">
                 <!-- 消息轮播框 -->
                 <NoticeListBox v-if="selectPageTab === 1" :currentService="currentService"
-                    :selectPageTab="selectPageTab" />
+                    :selectPageTab="selectPageTab" @handelGetNoticeListAllId="handelGetNoticeListAllId" />
 
                 <!-- <modalTitle :title="'流量趋势'" style="margin-top: 20px;" /> -->
 
@@ -140,7 +173,7 @@ const handleChangePageTab = (value: number) => {
                     </div>
                 </div>
 
-                <div v-if="selectPageTab === 3">
+                <div v-if="false">
                     <NewBigTitleBox title="应收账款" style="margin-top: 20px;" />
                     <div style="width: 100%;box-sizing: border-box;padding: 20px 11px;">
                         <!-- 合同信息 -->
@@ -162,19 +195,39 @@ const handleChangePageTab = (value: number) => {
                 <!-- 核心经营数据 -->
                 <CoreBusinessData :currentService="currentService" style="position: relative;z-index: 9;" />
 
-
+                <div v-show="selectPageTab === 1 && !showDialogBox">
                     <!-- 地图 -->
-                <PageMap @handleGetCurrentService="handleGetCurrentService" />
+                    <PageMap @handleGetCurrentService="handleGetCurrentService"
+                        :selectPointServicePart="noticeAllServicePartId"
+                        @handleMapToChangeNotice="handleMapToChangeNotice" />
+                </div>
+                <div class="AIDialogBox" v-show="selectPageTab === 1 && showDialogBox">
+                    <div class="dialogBox"></div>
+                    <div class="inputBox">
+                        <el-input class="searchText" placeholder="Hi,您好！请输入您想了解的内容..." v-model="searchText"
+                            @keyup.enter="handleSubmit()" />
+                        <img v-if="isPrinting" class="searchIcon" src="../../assets/image/stopIcon.png"
+                            @click="handleStopPrint()" />
+                        <img v-if="!isPrinting" class="searchIcon" src="../../assets/image/searchIconBlue.png"
+                            @click="handleSubmit()" />
+                    </div>
+                </div>
+
 
                 <!-- 公告主题 -->
                 <!-- <AnnouncementTopic style="position: relative;z-index: 9;" /> -->
+
+                <!-- AI图标对话 -->
+                <div class="AIBox" @click="handleClickAIBox">
+                    <img class="AIIcon" :src="AIIcon" />
+                </div>
             </div>
 
             <div class="content169Right">
                 <!-- 时间天气等内容 -->
                 <BasicMessageBox :currentService="currentService" />
 
-                <div v-show="selectPageTab === 1">
+                <div v-if="selectPageTab === 1">
                     <NewBigTitleBox title="流量趋势" style="margin-top: 24px;" />
 
                     <div class="content169LeftContent" style="margin-top: 21px;">
@@ -201,7 +254,7 @@ const handleChangePageTab = (value: number) => {
                     </div>
                 </div>
 
-                <div v-if="selectPageTab === 3">
+                <div v-if="false">
                     <NewBigTitleBox :title="'应收账款'" style="margin-top: 20px;" />
                     <div style="width: 100%;box-sizing: border-box;padding: 16px 11px 0;">
                         <!-- 签约客户 -->
@@ -230,46 +283,51 @@ const handleChangePageTab = (value: number) => {
         <div class="content1692st" v-if="selectPageTab === 2">
             <div class="content1692stLeft">
                 <!-- 消息轮播框 -->
-                <NoticeListBox style="margin-top: 20px;width: 50%;" :selectPageTab="selectPageTab" />
+                <NoticeListBox style="margin-top: 20px;width: calc(100% / 3);" :selectPageTab="selectPageTab" />
                 <!-- 核心经营数据 -->
                 <!-- <modalTitle :title="'核心经营数据'" style="margin-top: 20px;" /> -->
                 <!-- <CoreBusinessData style="position: relative;z-index: 9;" :noTitle="true" /> -->
 
                 <!-- 客群画像分析 -->
-                <NewBigTitleBox :title="'客群画像分析'" :type="2" style="margin-top: 20px" />
+                <NewBigTitleBox :title="'客群画像分析'" :type="3" style="margin-top: 20px" />
 
                 <div class="leftBottomContent">
                     <!-- 年龄 -->
-                    <CustomerAgeGroup style="margin-top: 20px;" />
+                    <CustomerAgeGroup style="margin-top: 20px;width: calc(100% / 3);" />
 
                     <!-- 性别 -->
-                    <GenderCustomerGroup style="margin-left: 20px;margin-top: 20px;" />
+                    <GenderCustomerGroup style="margin-left: 20px;margin-top: 20px;width: calc(100% / 3);" />
 
                     <!-- 停留时长 -->
                     <!-- <CustomerGroupStay style="margin-left: 20px;margin-top: 20px;" /> -->
 
                     <!-- 偏好类型 -->
-                    <PreferenceType style="margin-left: 20px;margin-top: 20px;" />
+                    <PreferenceType style="margin-left: 20px;margin-top: 20px;width: calc(100% / 3);" />
                 </div>
 
-                <div class="left3stBottom" style="margin-top: 0;">
+                <div class="left3stBottom"
+                    style="margin-top: 0;display: flex;justify-content: space-between;flex-wrap: wrap;">
 
-                    <div class="left3stBottomItem">
+                    <div class="left3stBottomItem" style="width: calc(100% / 3);">
                         <!-- 客群特征分析 -->
                         <CustomerGroup style="margin-top: 15px;" />
                     </div>
 
-                    <div class="left3stBottomItem">
+                    <div class="left3stBottomItem" style="width: calc(100%  / 3 * 2);">
                         <!-- 客群消费偏好 -->
                         <CustomerConsumptionPreferences style="margin-top: 15px;" />
                     </div>
+                    <!-- <div class="left3stBottomItem">
+
+                    </div> -->
                 </div>
 
 
                 <!-- 交易画像分析 -->
-                <NewBigTitleBox title="交易画像分析" :type="2" style="margin-top: 15px;" />
+                <NewBigTitleBox title="交易画像分析" :type="3" style="margin-top: 15px;" />
 
                 <div class="left3stBottom" style="margin-top: 0;">
+                    <div class="left3stBottomItemLeft">
                         <div class="left3stBottomItem">
                             <!-- 消费转化率对比图 -->
                             <ConsumptionConversion style="margin-top: 15px;" />
@@ -291,8 +349,14 @@ const handleChangePageTab = (value: number) => {
                         </div>
                     </div>
 
+                    <div class="left3stBottomItemRight">
+                        <BusinessCase :currentService="currentService" />
                     </div>
-            <div class="content1692stCenter">
+
+                </div>
+
+            </div>
+            <div class="content1692stCenter" v-if="false">
                 <NewBigTitleBox :title="'月度经营情况'" />
 
                 <div style="width: 100%;box-sizing: border-box;padding: 20px 11px 0;">
@@ -339,8 +403,8 @@ const handleChangePageTab = (value: number) => {
                     </template>
                 </NewBigTitleBox>
                 <!-- 节假日营收分析 -->
-                <FestivalRevenue :currentService="currentService" :FestivalValue="FestivalValue" />
+                <!-- <FestivalRevenue :currentService="currentService" :FestivalValue="FestivalValue" /> -->
-
+                <FestivalRevenueSumInfo :currentService="currentService" :FestivalValue="FestivalValue" />
 
 
 
@@ -366,7 +430,7 @@ const handleChangePageTab = (value: number) => {
 
 
         <!-- 分区三 -->
-        <div class="content1693st" v-if="selectPageTab === 99999">
+        <div class="content1693st" v-if="selectPageTab === 3">
             <div class="content1693stItem">
                 <!-- 消息轮播框 -->
                 <NoticeListBox :currentService="currentService" :selectPageTab="selectPageTab" />

src/page/index/style.less

@@ -319,6 +319,60 @@
             padding-top: 66px;
             display: flex;
             flex-direction: column;
+
+            .AIBox {
+                position: absolute;
+                bottom: 100px;
+                right: calc((100% - 90px) / 4 + 30px);
+                z-index: 10;
+                cursor: pointer;
+
+                .AIIcon {
+                    width: 40px;
+                    height: 40px;
+                }
+            }
+
+            .AIDialogBox {
+                width: 100%;
+                height: calc(100% - 108px);
+                box-sizing: border-box;
+                padding: 32px 32px 32px 8px;
+
+                .dialogBox {
+                    width: 100%;
+                    height: calc(100% - 80px);
+                    margin-bottom: 20px;
+                }
+
+
+                .inputBox {
+                    width: 100%;
+                    box-sizing: border-box;
+                    padding: 12px;
+                    display: flex;
+                    align-items: center;
+
+                    .searchText {
+                        width: calc(100% - 50px);
+
+                        .el-input__wrapper {
+                            background-color: transparent !important;
+
+                            .el-input__inner {
+                                color: #fff !important;
+                            }
+                        }
+                    }
+
+                    .searchIcon {
+                        width: 24px;
+                        height: 24px;
+                        margin-left: 6px;
+                        cursor: pointer;
+                    }
+                }
+            }
         }
 
         .content169Right {
@@ -385,7 +439,8 @@
 
         .content1692stLeft {
             // width: 47%;
-            width: calc((100% - 90px) / 4 * 2 + 30px);
+            // width: calc((100% - 90px) / 4 * 2 + 30px);
+            width: calc((100% - 30px) / 4 * 3);
             height: 100%;
 
             .leftBottomContent {
@@ -402,16 +457,26 @@
                 margin-top: 20px;
                 box-sizing: border-box;
                 padding: 0 26px;
-                display: flex;
+
+                .left3stBottomItemLeft {
+                    width: calc(100% / 3 * 2);
+                    display: inline-flex;
                     justify-content: space-between;
                     flex-wrap: wrap;
 
                     .left3stBottomItem {
-                    width: calc((100% - 30px) / 2);
+                        width: 50%;
+                        // width: calc((100% - 30px) / 2);
                         // width: calc((100% - 56px) / 2);
                         height: 214px;
                     }
                 }
+
+                .left3stBottomItemRight {
+                    width: calc(100% / 3);
+                    display: inline-flex;
+                }
+            }
         }
 
         .content1692stCenter {
@@ -428,7 +493,8 @@
         }
 
         .content1692stRight {
-            width: 22%;
+            // width: 22%;
+            width: calc((100% - 30px) / 4);
             height: 100%;
 
             .left5stContent {

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/annualaccountsreceivable/annualaccountsreceivable.vue","./src/page/index/components/assessmentscoring/assessmentscoring.vue","./src/page/index/components/assessmentscoringranking/assessmentscoringranking.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/contractinformation/contractinformation.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/dailyinspection/dailyinspection.vue","./src/page/index/components/deductiontype/deductiontype.vue","./src/page/index/components/detailedpayment/detailedpayment.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/signedclients/signedclients.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/vehiclemodelstay/vehiclemodelstay.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"}
+{"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/annualaccountsreceivable/annualaccountsreceivable.vue","./src/page/index/components/assessmentscoring/assessmentscoring.vue","./src/page/index/components/assessmentscoringranking/assessmentscoringranking.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/contractinformation/contractinformation.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/dailyinspection/dailyinspection.vue","./src/page/index/components/deductiontype/deductiontype.vue","./src/page/index/components/detailedpayment/detailedpayment.vue","./src/page/index/components/festivalrevenue/festivalrevenue.vue","./src/page/index/components/festivalrevenuesuminfo/festivalrevenuesuminfo.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/signedclients/signedclients.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/vehiclemodelstay/vehiclemodelstay.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"}