update

src/page/index/components/AnalysisOfMember/AnalysisOfMember.less

@@ -0,0 +1,29 @@
+.VehicleModelStayBox {
+    // width: 100%;
+    width: calc((100vw - 90px) / 4 - 35px);
+
+
+    .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;
+        }
+
+        .AnalysisOfMember {
+            width: 100%;
+            height: 230px;
+        }
+    }
+}

src/page/index/components/AnalysisOfMember/AnalysisOfMember.vue

@@ -0,0 +1,223 @@
+<script setup lang="ts">
+import SmallTitle from '../smallTitle/smallTitle.vue'
+import './AnalysisOfMember.less'
+import { onMounted, onBeforeUnmount, watch, ref } from 'vue';
+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 moment from 'moment';
+import { handleGetBayonetSTAnalysis, handleGetRevenueTrend, handleGetTransactionConvert, handleGetTransactionTimeAnalysis } from '../../service';
+
+// 注册组件
+echarts.use([
+    BarChart,
+    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('AnalysisOfMember');
+    if (!chartDom) return;
+
+    myChart = echarts.init(chartDom);
+
+    const option = {
+        xAxis: {
+            type: 'category',
+            data: res.category,
+            axisLabel: {
+                interval: 0,  // 改为0表示显示所有刻度
+                showMinLabel: true,
+                showMaxLabel: true,
+                color: '#fff', // x轴标签颜色
+                fontSize: 12   // 可调整字体大小防止重叠
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#fff' // x轴线颜色
+                }
+            },
+            axisTick: {
+                alignWithLabel: true // 保证刻度线和标签对齐
+            }
+        },
+        yAxis: [
+            {
+                type: 'value',
+                name: '%',
+                splitLine: {
+                    show: false
+                },
+                nameTextStyle: {
+                    color: '#fff',
+                    padding: [0, 30, 0, 0]  // 调整单位位置
+                },
+                axisLine: {
+                    show: true,
+                    lineStyle: {
+                        color: '#fff' // y轴线颜色
+                    }
+                },
+                axisLabel: {
+                    width: 60,
+                    color: '#fff', // y轴标签颜色
+                    formatter: '{value}' // 添加单位
+                }
+            }
+        ],
+        grid: {
+            left: '0',    // 增加左侧空间
+            right: '0',   // 增加右侧空间
+            bottom: '0',
+            top: '50',
+            containLabel: true
+        },
+        series: [
+            {
+                name: `每周优品爆款`,
+                data: res?.data || [],
+                type: 'bar',
+                barWidth: 10,
+                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     // 文字大小
+                }
+            },
+            {
+                name: `其他类型`,
+                data: res?.otherData || [],
+                type: 'bar',
+                barWidth: 10,
+                itemStyle: {
+                    borderRadius: [3, 3, 0, 0],
+                    color: '#69BCFF' // 直接指定颜色
+                }
+            }
+        ],
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow' // 阴影指示器（适合柱状图）
+            },
+            formatter: function (params: any) {
+                console.log('params', params);
+                let str: string = `<div>${params[0].name}</div>`
+                params.forEach((item: any) => {
+                    str += `<div>${item.seriesName}：${item.value}%</div>`
+                })
+                return str
+
+                // let result = params[0].axisValue + '<br/>';
+                // params.forEach((item: any, index: number) => {
+                //     result += `${item.marker} ${item.seriesName}: ${index === 0 ? res?.realData[item.dataIndex].toLocaleString() : res?.realDataLastYear[item.dataIndex].toLocaleString()}元<br/>`;
+                // });
+                // return result;
+            }
+        },
+        legend: {
+
+            data: [`每周优品爆款`, `其他类型`], // 使用动态名称
+            textStyle: {
+                color: '#fff', // 图例文字颜色
+                fontSize: 12
+            },
+            right: '0',      // 距离右侧10px
+            top: '0',       // 距离顶部10px
+        },
+        color: ['#008CFF', '#69BCFF'] // 只需要两个颜色对应两个系列
+    };
+
+    myChart.setOption(option);
+    myChart.resize();
+    window.addEventListener('resize', resizeChart);
+
+}
+
+// 拿到数据的方法
+const handleGetData = async () => {
+    let category: number[] = []
+    let seriesData: number[] = []
+    let realData: number[] = []
+    let seriesDataLastYear: number[] = []
+    let realDataLastYear: number[] = []
+
+
+    let res: any = {
+        category: ["购买数量", "交易金额", "订单笔数", "购买人数"],
+        data: [50.99, 48.89, 82.95, 85.05],
+        otherData: [49.01, 51.11, 17.05, 14.95]
+    }
+
+    return res
+}
+
+
+const resizeChart = () => {
+    myChart?.resize();
+};
+
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', resizeChart);
+    myChart?.dispose();
+});
+
+
+</script>
+
+<template>
+    <div class="VehicleModelStayBox">
+        <!-- <SmallTitle :title="`车型停留分析/日均${searchTime ? `(${searchTime}月)` : ''}`"></SmallTitle> -->
+        <!-- <SmallTitle :title="`经营效益`"></SmallTitle> -->
+
+        <div class="VehicleModelStayCharts" style="margin-top:15px">
+            <div class="AnalysisOfMember" id="AnalysisOfMember"></div>
+        </div>
+    </div>
+</template>

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

@@ -2,8 +2,8 @@
     width: 100%;
 
     .BusinessCaseTabBox {
-        width: 100%;
+        // width: 100%;
-        display: flex;
+        display: inline-flex;
         align-items: center;
         background: linear-gradient(90deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
         padding: 3px 20px;
@@ -259,16 +259,15 @@
 
     .featureAnalysis {
         width: 100%;
-        margin-top: 32px;
 
         .featureAnalysisBox {
             width: 100%;
-            height: 300px;
+            height: 390px;
         }
 
         .featureAnalysisBottom {
             width: 100%;
-            height: 300px;
+            height: 390px;
             margin-top: 18px;
         }
     }

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

@@ -55,6 +55,7 @@ let getAllData = ref<any>()
 // 传入的数据
 const props = defineProps<{
     currentService?: any;
+    selectTab?: any
 }>();
 
 // 监听传入的选中服务区
@@ -67,6 +68,15 @@ watch(
     { deep: true }
 );
 
+// 监听传入的选中服务区
+watch(
+    () => props.selectTab,
+    (newVal, oldVal) => {
+        handleShowData(newVal)
+    },
+    { deep: true }
+);
+
 onMounted(async () => {
     // 用tab可以修改的方法
     await handleGetData()
@@ -237,7 +247,7 @@ const handleShowData = async (value: number) => {
 
     const option = {
         legend: {
-            top: 10,
+            top: 15,
             right: 10,
             textStyle: {
                 color: '#ffffff' // 设置图例文字为白色
@@ -248,6 +258,7 @@ const handleShowData = async (value: number) => {
         xAxis: {
             type: 'category',
             axisLabel: {
+                width: '80',
                 interval: 0,
                 color: '#fff',
                 formatter: '{value}'  // 刻度值保持纯数字
@@ -274,7 +285,7 @@ const handleShowData = async (value: number) => {
                 show: false             // 隐藏刻度线（短横线）
             },
             axisLabel: {
-                width: '60',
+                width: '80',
                 color: '#fff'
             },
             nameTextStyle: {
@@ -443,20 +454,17 @@ onBeforeUnmount(() => {
 
 <template>
     <div class="BusinessCaseBox">
-        <SmallTitle title="营收特征分析" />
+        <SmallTitle title="营收特征">
-
+            <!-- <template #extra>
-        <SmallTitle style="padding-left: 0;margin-top: 38px;">
-            <template #extra>
                 <div class="BusinessCaseTabBox">
                     <div :class="selectTab === item.value ? 'BusinessCaseItem selectBusinessCaseItem' : 'BusinessCaseItem'"
                         v-for="(item, index) in tabList" :key="index" @click="handleChangeTab(item.value)">
                         {{ item.label }}
                     </div>
                 </div>
-            </template>
+            </template> -->
         </SmallTitle>
 
-
         <!-- 营收同比 -->
         <div class="BusinessCaseRevenueYOY" v-if="false">
             <div class="BusinessCaseLeftItem">

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

@@ -160,8 +160,8 @@ const handleGetData = async () => {
 
     const req: any = {
         ProvinceCode: '530000',
-        // StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
+        StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
-        StatisticsDate: '2025-04-30',
+        // StatisticsDate: '2025-04-30',
         BusinessTradeIds: -1,
         ServerpartId: props.currentService?.SERVERPART_ID || ""
     }

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

@@ -61,7 +61,7 @@ onMounted(async () => {
         yAxis: [
             {
                 type: 'value',
-                name: '车流量(辆)',
+                name: res.carResList && res.carResList.length > 0 ? '车流量(辆)' : "",
                 nameTextStyle: {
                     color: '#ffffff', // Y轴名称颜色
                     padding: [0, 0, 0, 20]

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

@@ -11,7 +11,7 @@ import {
 } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 import { onBeforeUnmount, onMounted, watch } from 'vue';
-import { handleGetCustomerSaleRatio } from '../../service';
+import { handleGetBusinessTradeRevenue, handleGetCustomerSaleRatio } from '../../service';
 import moment from 'moment';
 
 // 注册组件
@@ -160,21 +160,31 @@ const handleGoMounted = async () => {
 }
 
 const handleGetData = async () => {
+    // const req: any = {
+    //     statisticsType: 1,
+    //     startMonth: moment().subtract(1, 'd').startOf('y').format('YYYYMM'),
+    //     endMonth: moment().subtract(1, 'm').format('YYYYMM'),
+    //     provinceCode: '530000',
+    //     serverpartId: props.currentService?.SERVERPART_ID || "",
+    //     sortStr: 'TOTAL_COUNT desc'
+    // } 
+
     const req: any = {
-        statisticsType: 1,
+        ProvinceCode: '530000',
-        startMonth: moment().subtract(1, 'd').startOf('y').format('YYYYMM'),
+        StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
-        endMonth: moment().subtract(1, 'm').format('YYYYMM'),
+        // StatisticsDate: '2025-04-30',
-        provinceCode: '530000',
+        // BusinessTradeIds: -1,
-        serverpartId: props.currentService?.SERVERPART_ID || "",
+        ServerpartId: props.currentService?.SERVERPART_ID || ""
-        sortStr: 'TOTAL_COUNT desc'
     }
 
+
     let CustomerConsumptionPreferences = sessionStorage.getItem('CustomerConsumptionPreferences')
     let data: any = []
     if (CustomerConsumptionPreferences) {
         data = JSON.parse(CustomerConsumptionPreferences)
     } else {
-        data = await handleGetCustomerSaleRatio(req)
+        // data = await handleGetCustomerSaleRatio(req)
+        data = await handleGetBusinessTradeRevenue(req)
         sessionStorage.setItem("CustomerConsumptionPreferences", JSON.stringify(data))
     }
 
@@ -187,14 +197,14 @@ const handleGetData = async () => {
 
     let aiObj: any = {}
 
-
+// CustomerSaleList
-    if (data.CustomerSaleList && data.CustomerSaleList.length > 0) {
+    if (data.BusinessTradeRank && data.BusinessTradeRank.length > 0) {
-        let list = data.CustomerSaleList.slice(0, 15)
+        let list = data.BusinessTradeRank.slice(0, 10)
         list.forEach((item: any) => {
-            category.push(item.BusinessTradeName)
+            category.push(item.name)
-            seriesData.push(item.TotalRatio)
+            seriesData.push(item.value)
-            realData.push(item.TotalRatio)
+            realData.push(item.value)
-            aiObj[item.BusinessTradeName] = `占比${item.TotalRatio}%`
+            aiObj[item.name] = `占比${item.value}%`
         })
     }
 

src/page/index/components/MemberMall/index.less

@@ -0,0 +1,256 @@
+.MemberMallBox {
+    width: 100%;
+
+    .MemberSumBox {
+        width: 100%;
+        height: 38px;
+        background-image: url('../../../../assets/image/memberSumBg.png');
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .MemberSumBoxLeft {
+            width: 30%;
+            font-family: Bahnschrift, Bahnschrift;
+            font-weight: 600;
+            font-size: 14px;
+            color: #FFFFFF;
+            line-height: 10px;
+            text-shadow: 0px 0px 5px #63D7FB;
+            text-align: left;
+            font-style: normal;
+            padding-left: 18px;
+            box-sizing: border-box;
+            padding-top: 5px;
+        }
+
+        .memberSumTotal {
+            width: calc(40% - 16px);
+            font-family: Bahnschrift, Bahnschrift;
+            font-weight: bold;
+            font-size: 25px;
+            color: #FFFFFF;
+            line-height: 30px;
+            text-align: center;
+            font-style: normal;
+            background-image: url('../../../../assets/image/memberTotalBg.png');
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            letter-spacing: 5px;
+            padding-top: 5px;
+        }
+
+        .MemberSumBoxRight {
+            width: 30%;
+            font-family: Bahnschrift, Bahnschrift;
+            font-weight: 600;
+            font-size: 13px;
+            color: #6FF3FB;
+            line-height: 17px;
+            text-align: right;
+            font-style: normal;
+            padding-right: 20px;
+            box-sizing: border-box;
+            padding-top: 5px;
+        }
+    }
+
+
+    .recentData {
+        width: 100%;
+        height: 165px;
+
+        .recentDataTop {
+            width: 100%;
+            height: 68px;
+            position: relative;
+
+            .recentDataTopItem {
+                position: absolute;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .recentDataTopValue {
+                    width: 44px;
+                    height: 44px;
+                    font-family: Bahnschrift, Bahnschrift;
+                    font-weight: 400;
+                    font-size: 21px;
+                    color: #FFFFFF;
+                    line-height: 44px;
+                    text-align: center;
+                    font-style: normal;
+                    background-image: url('../../../../assets/image/recentDataTopValueBg.png');
+                    background-repeat: no-repeat;
+                    background-size: 100% 100%;
+                }
+
+                .recentDataTopLabel {
+                    font-family: Bahnschrift, Bahnschrift;
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: #D3E7ED;
+                    line-height: 18px;
+                    text-align: left;
+                    font-style: normal;
+                    margin-top: 5px;
+                }
+            }
+        }
+
+        .recentDataBottom {
+            width: 100%;
+            height: 89px;
+            background-image: url('../../../../assets/image/nearDataBg.png');
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+
+    .MemberConsumption {
+        width: 100%;
+        margin-top: 20px;
+
+        .MemberConsumptionItem {
+            display: flex;
+            align-items: center;
+
+            .MemberConsumptionLabel {
+                font-family: Bahnschrift, Bahnschrift;
+                font-weight: 400;
+                font-size: 14px;
+                color: #FFFFFF;
+                line-height: 20px;
+                text-align: left;
+                font-style: normal;
+                display: inline-block;
+                width: 95px;
+                text-align: left;
+            }
+
+            .MemberConsumptionProgress {
+                width: calc(100% - 190px);
+                height: 22px;
+                background-image: url('../../../../assets/image/label1Data.png');
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+            }
+
+            .MemberConsumptionProgress2 {
+                width: calc(100% - 190px);
+                height: 22px;
+                background-image: url('../../../../assets/image/label2Data.png');
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+            }
+
+            .MemberConsumptionValue {
+                font-family: Bahnschrift, Bahnschrift;
+                font-weight: 400;
+                font-size: 21px;
+                color: #FFFFFF;
+                line-height: 30px;
+                font-style: normal;
+                display: inline-block;
+                width: 95px;
+                text-align: left;
+            }
+        }
+    }
+
+    .MemberContentBox {
+        width: 100%;
+        margin-top: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .MemberContentBoxItem {
+            width: calc((100% - 28px) / 2);
+            box-sizing: border-box;
+            padding: 15px 21px;
+            background-image: url('../../../../assets/image/smallModalBg.png');
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+
+            .MemberContentBoxItemBox {
+                display: flex;
+                align-items: center;
+
+                .MemberContentBoxItemLabel {
+                    width: 50%;
+                    font-family: Bahnschrift, Bahnschrift;
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: #FFFFFF;
+                    line-height: 20px;
+                    text-align: left;
+                    font-style: normal;
+                    box-sizing: border-box;
+                    padding-right: 5px;
+                }
+
+                .MemberContentBoxItemValue {
+                    width: 50%;
+                    display: inline-block;
+                    box-sizing: border-box;
+                    padding-left: 10px;
+                    font-family: Bahnschrift, Bahnschrift;
+                    font-weight: bold;
+                    font-size: 20px;
+                    color: #6FEFFA;
+                    line-height: 21px;
+                    text-align: left;
+                    font-style: normal;
+                }
+            }
+        }
+    }
+
+    .MemberOverview {
+        width: 100%;
+        margin-top: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .MemberOverviewItem {
+            width: calc((100% - 82px) / 3);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+
+            .MemberOverviewItemTop {
+                width: 80px;
+                height: 80px;
+                font-family: Bahnschrift, Bahnschrift;
+                font-weight: 500;
+                font-size: 18px;
+                color: #FFFFFF;
+                line-height: 80px;
+                text-align: center;
+                font-style: normal;
+                background-image: url('../../../../assets/image/MemberOverviewItemTop.png');
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+            }
+
+            .MemberOverviewItemBottom {
+                font-family: Bahnschrift, Bahnschrift;
+                font-weight: 400;
+                font-size: 16px;
+                color: #FFFFFF;
+                line-height: 21px;
+                text-align: left;
+                font-style: normal;
+                margin-top: 17px;
+            }
+        }
+    }
+
+}

src/page/index/components/MemberMall/index.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import './index.less'
+import SmallTitle from '../smallTitle/smallTitle.vue'
+
+
+
+</script>
+
+<template>
+    <div class="MemberMallBox">
+        <!-- 会员总数 -->
+        <div class="MemberSumBox">
+            <div class="MemberSumBoxLeft">会员总数</div>
+            <div class="memberSumTotal">12733</div>
+            <div class="MemberSumBoxRight">本月新增 56 个</div>
+        </div>
+
+        <!-- 近30天数据 -->
+        <SmallTitle title="近30天数据" style="margin-top: 22px;" />
+
+        <div class="recentData">
+            <div class="recentDataTop">
+                <div class="recentDataTopItem" style="left: 22px;top: 31px;">
+                    <div class="recentDataTopValue">94</div>
+                    <div class="recentDataTopLabel">新增会员数</div>
+                </div>
+
+                <div class="recentDataTopItem" style="left: 30%;top: 0;">
+                    <div class="recentDataTopValue">2716</div>
+                    <div class="recentDataTopLabel">打开次数</div>
+                </div>
+
+                <div class="recentDataTopItem" style="right: 30%;top: 0;">
+                    <div class="recentDataTopValue">624</div>
+                    <div class="recentDataTopLabel">新增人数</div>
+                </div>
+
+                <div class="recentDataTopItem" style="right: 8px;top: 31px;">
+                    <div class="recentDataTopValue">884</div>
+                    <div class="recentDataTopLabel">访问人数</div>
+                </div>
+
+            </div>
+            <div class="recentDataBottom"></div>
+        </div>
+
+        <!-- 会员消费情况 -->
+        <SmallTitle title="会员消费情况" />
+
+        <div class="MemberConsumption">
+            <div class="MemberConsumptionItem">
+                <div class="MemberConsumptionLabel">会员消费笔数</div>
+                <div class="MemberConsumptionProgress"></div>
+                <div class="MemberConsumptionValue">133</div>
+            </div>
+
+            <div class="MemberConsumptionItem" style="margin-top: 18px;">
+                <div class="MemberConsumptionLabel">会员总销售额</div>
+                <div class="MemberConsumptionProgress2"></div>
+                <div class="MemberConsumptionValue">27,734.10</div>
+            </div>
+        </div>
+
+        <div class="MemberContentBox">
+            <div class="MemberContentBoxItem">
+                <div class="MemberContentBoxItemBox">
+                    <div class="MemberContentBoxItemLabel">工会会员</div>
+                    <div class="MemberContentBoxItemValue">512</div>
+                </div>
+                <div class="MemberContentBoxItemBox" style="margin-top: 18px;">
+                    <div class="MemberContentBoxItemLabel">会员占比</div>
+                    <div class="MemberContentBoxItemValue">4.02%</div>
+                </div>
+            </div>
+
+            <div class="MemberContentBoxItem">
+                <div class="MemberContentBoxItemBox">
+                    <div class="MemberContentBoxItemLabel">会员转化率</div>
+                    <div class="MemberContentBoxItemValue">15.06%</div>
+                </div>
+                <div class="MemberContentBoxItemBox" style="margin-top: 18px;">
+                    <div class="MemberContentBoxItemLabel">会员增长率</div>
+                    <div class="MemberContentBoxItemValue">0.74%</div>
+                </div>
+            </div>
+        </div>
+
+
+        <!-- 会员消费情况 -->
+        <SmallTitle title="会员消费数据概览" style="margin-top: 25px;" />
+
+        <div class="MemberOverview">
+            <div class="MemberOverviewItem">
+                <div class="MemberOverviewItemTop">23</div>
+                <div class="MemberOverviewItemBottom">购买人数</div>
+            </div>
+
+            <div class="MemberOverviewItem">
+                <div class="MemberOverviewItemTop">23</div>
+                <div class="MemberOverviewItemBottom">1,205.83</div>
+            </div>
+
+            <div class="MemberOverviewItem">
+                <div class="MemberOverviewItemTop">208.53</div>
+                <div class="MemberOverviewItemBottom">客单价</div>
+            </div>
+
+            <div class="MemberOverviewItem">
+                <div class="MemberOverviewItemTop">29.17%</div>
+                <div class="MemberOverviewItemBottom">会员复购率</div>
+            </div>
+        </div>
+    </div>
+</template>

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

@@ -12,7 +12,7 @@ import {
 } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 import moment from 'moment';
-import { handleGetBusinessTradeRevenue, handleGetSPBayonetList } from '../../service';
+import { handleGetBusinessTradeRevenue, handleGetCustomerSaleRatio, handleGetSPBayonetList } from '../../service';
 
 // 注册组件
 echarts.use([
@@ -37,21 +37,25 @@ onMounted(async () => {
     myChart = echarts.init(chartDom);
 
     const option = {
-        // tooltip: { // 新增 tooltip 配置
+        tooltip: { // 新增 tooltip 配置
-        //     trigger: 'item',
+            trigger: 'item',
-        //     formatter: function (params: any) {
+            formatter: function (params: any) {
-        //         console.log('params', params);
+                console.log('params', params);
-
+                let str: string = `<div>${params?.seriesName}：</div>`
-        //         return `<div>${params.name} ${params.value}</div>
+                for (let i = 0; i < res.category.length; i++) {
-        //     `;
+                    str += `<div>${res.category[i].name}：${params.value[i]}%</div>`
-        //     }
+                    // list.push({ label: res.category[i], value: params.value + '%' })
-        // },
+                }
+                return `<div>${str}</div>
+            `;
+            }
+        },
         radar: {
             indicator: res.category,
             shape: 'circle',
             splitNumber: 5,
-            radius: '60%', // 调整雷达图大小，留出空间给文字
+            radius: '40%', // 调整雷达图大小，留出空间给文字
-            center: ['50%', '60%'], // 2. 确保居中
+            center: ['50%', '45%'], // 2. 确保居中
             axisName: {
                 color: 'rgb(255, 255, 255)',
                 padding: 10
@@ -79,6 +83,7 @@ onMounted(async () => {
         },
         series: [
             {
+                name: "男性",
                 type: 'radar',
                 lineStyle: {
                     width: 1,
@@ -87,13 +92,37 @@ onMounted(async () => {
                 data: res.seriesData,
                 symbol: 'none',
                 itemStyle: {
-                    color: '#0289ED'
+                    color: '#0094FF'
+                },
+                areaStyle: {
+                    opacity: 0.1
+                }
+            },
+            {
+                name: "女性",
+                type: 'radar',
+                lineStyle: {
+                    width: 1,
+                    opacity: 0.5
+                },
+                data: res.seriesDataMan,
+                symbol: 'none',
+                itemStyle: {
+                    color: '#FF5E5E'
                 },
                 areaStyle: {
                     opacity: 0.1
                 }
             }
-        ]
+        ],
+        legend: {
+            data: ['男性', '女性'],
+            textStyle: {
+                color: '#fff'
+            },
+            bottom: -5,
+            left: 'center',
+        },
     };
 
     myChart.setOption(option);
@@ -105,9 +134,16 @@ onMounted(async () => {
 const handleGetSectionFlowCount = async () => {
 
     const req: any = {
-        ProvinceCode: '530000',
+        // ProvinceCode: '530000',
-        StatisticsDate: moment(moment().subtract(1, 'M')).format('YYYY-MM-DD'),
+        // StatisticsDate: moment(moment().subtract(1, 'M')).format('YYYY-MM-DD'),
-        BusinessTradeIds: -1
+        // BusinessTradeIds: -1
+        statisticsType: 1,
+        startMonth: moment().startOf('y').format('YYYYMM'),
+        endMonth: moment().format('YYYYMM'),
+        provinceCode: '530000',
+        showTradeLevel: 1,
+        fromRedis: true
+
     }
 
     let PreferenceType = sessionStorage.getItem('PreferenceType')
@@ -115,33 +151,70 @@ const handleGetSectionFlowCount = async () => {
     if (PreferenceType) {
         data = JSON.parse(PreferenceType)
     } else {
-        data = await handleGetBusinessTradeRevenue(req)
+        data = await handleGetCustomerSaleRatio(req)
         sessionStorage.setItem("PreferenceType", JSON.stringify(data))
     }
 
     // const data = await handleGetBusinessTradeRevenue(req)
 
     let category: any = []
+    // 男
     let seriesData: any = []
     let realData: any = []
+    // 女
+    let seriesDataMan: any = []
+    let realDataMan: any = []
     let aiObj: any = {}
 
-    let list: any = data.BusinessTradeRank
+    let max: number = 0
+    // let list: any = data.BusinessTradeRank
+    let list: any = data.CustomerSaleList
     if (list && list.length > 0) {
         list.forEach((item: any) => {
-            category.push({ name: `${item.name}：${item.value}%`, max: 100 })
+
-            seriesData.push(Number(item.value))
+            if (item.FemaleRatio > max) {
-            realData.push(item.data)
+                max = item.FemaleRatio
-            aiObj[item.name] = item.value + '%'
+            }
+            if (item.MaleRatio > max) {
+                max = item.MaleRatio
+            }
+
+            category.push({ name: `${item.BusinessTradeName}`, max: 100 })
+            seriesData.push(Number(item.FemaleRatio))
+            realData.push(item.FemaleRatio)
+
+            seriesDataMan.push(Number(item.MaleRatio))
+            realDataMan.push(item.MaleRatio)
+
+
+            aiObj[item.BusinessTradeName + '男性'] = item.FemaleRatio + '%'
+            aiObj[item.BusinessTradeName + '女性'] = item.MaleRatio + '%'
+
+            // category.push({ name: `${item.name}：${item.value}%`, max: 100 })
+            // seriesData.push(Number(item.value))
+            // realData.push(item.data)
+            // aiObj[item.name] = item.value + '%'
+        })
+    }
+
+    if (category && category.length > 0) {
+        category.forEach((item: any) => {
+            item.max = max
         })
     }
 
     let res: any = {
         category: category,// x轴的内容
         seriesData: [seriesData],// y轴的数据
-        realData: realData// 真实数据
+        realData: realData,// 真实数据
+        seriesDataMan: [seriesDataMan],
+        realDataMan: realDataMan,
     }
 
+
+    console.log('resresresres', res);
+
+
     let PreferenceTypeAI = sessionStorage.getItem('PreferenceTypeAI')
     if (PreferenceTypeAI) { } else {
         sessionStorage.setItem("PreferenceTypeAI", JSON.stringify(aiObj))

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

@@ -4,75 +4,127 @@
     // padding: 0 20px;
     // margin-top: 20px;
 
-    .TradingAlertBox {
+    .TradingAlertNewBox {
         width: 100%;
+        margin-top: 21px;
+        box-sizing: border-box;
+        padding: 20px;
         display: flex;
         align-items: center;
         justify-content: space-between;
+        background-image: url('../../../../assets/image/tradingBg.png');
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
 
-        .TradingAlertItem {
+        .TradingAlertNewBoxItem {
-            width: calc((100% - 10px)/2);
+            width: calc(100% / 3);
-            box-sizing: border-box;
-            padding: 10px 15px;
             display: flex;
             align-items: center;
-            background: linear-gradient(0, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
+            justify-content: flex-start;
 
+            .TradingAlertNewBoxItemTemplate {
+                width: 100%;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
 
-            .TradingAlertItemLeft {
+                .TradingAlertNewBoxItemValue {
-                width: 46px;
+                    font-family: DINAlternate, DINAlternate;
-                height: 46px;
+                    font-weight: bold;
-                margin-right: 10px;
+                    font-size: 25px;
-
+                    color: #FEC003;
-                .TradingAlertItemLeftIcon {
+                    line-height: 25px;
-                    width: 46px;
+                    letter-spacing: 1px;
-                    height: 46px;
+                    text-align: right;
-                }
+                    font-style: normal;
                 }
 
-            .TradingAlertItemRight {
+                .TradingAlertNewBoxItemLabel {
-                flex: 1;
+                    font-family: SourceHanSansSC, SourceHanSansSC;
-
-                .TradingAlertItemRightLabel {
-                    font-family: Microsoft YaHei, Microsoft YaHei;
                     font-weight: 400;
                     font-size: 14px;
-                    color: #FFFFFF;
+                    color: #D9E7FF;
-                    text-align: left;
+                    line-height: 14px;
-                    font-style: normal;
+                    letter-spacing: 1px;
-                }
-
-                .TradingAlertItemRightValueBox {
-                    display: flex;
-                    align-items: flex-end;
-                    justify-content: flex-end;
-
-                    .TradingAlertItemRightValue {
-                        font-family: Impact, Impact;
-                        font-weight: 400;
-                        font-size: 25px;
-                        color: #FFFFFF;
-                        letter-spacing: 2px;
                     text-align: right;
                     font-style: normal;
-
+                    margin-top: 9px;
-                    }
-
-                    .OverviewOfServiceAreaBusyContentItemRightUnit {
-                        font-family: Inter, Inter;
-                        font-weight: 400;
-                        font-size: 12px;
-                        color: #808A96;
-                        text-align: right;
-                        font-style: normal;
-                        text-transform: none;
-                        margin-left: 10px;
                 }
             }
 
+
         }
     }
-    }
+
+    // .TradingAlertBox {
+    //     width: 100%;
+    //     display: flex;
+    //     align-items: center;
+    //     justify-content: space-between;
+
+    //     .TradingAlertItem {
+    //         width: calc((100% - 10px)/2);
+    //         box-sizing: border-box;
+    //         padding: 10px 15px;
+    //         display: flex;
+    //         align-items: center;
+    //         background: linear-gradient(0, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
+
+
+    //         .TradingAlertItemLeft {
+    //             width: 46px;
+    //             height: 46px;
+    //             margin-right: 10px;
+
+    //             .TradingAlertItemLeftIcon {
+    //                 width: 46px;
+    //                 height: 46px;
+    //             }
+    //         }
+
+    //         .TradingAlertItemRight {
+    //             flex: 1;
+
+    //             .TradingAlertItemRightLabel {
+    //                 font-family: Microsoft YaHei, Microsoft YaHei;
+    //                 font-weight: 400;
+    //                 font-size: 14px;
+    //                 color: #FFFFFF;
+    //                 text-align: left;
+    //                 font-style: normal;
+    //             }
+
+    //             .TradingAlertItemRightValueBox {
+    //                 display: flex;
+    //                 align-items: flex-end;
+    //                 justify-content: flex-end;
+
+    //                 .TradingAlertItemRightValue {
+    //                     font-family: Impact, Impact;
+    //                     font-weight: 400;
+    //                     font-size: 25px;
+    //                     color: #FFFFFF;
+    //                     letter-spacing: 2px;
+    //                     text-align: right;
+    //                     font-style: normal;
+
+    //                 }
+
+    //                 .OverviewOfServiceAreaBusyContentItemRightUnit {
+    //                     font-family: Inter, Inter;
+    //                     font-weight: 400;
+    //                     font-size: 12px;
+    //                     color: #808A96;
+    //                     text-align: right;
+    //                     font-style: normal;
+    //                     text-transform: none;
+    //                     margin-left: 10px;
+    //                 }
+    //             }
+
+    //         }
+    //     }
+    // }
 
 
     .TradingAlertListBox {
@@ -80,33 +132,70 @@
         height: 120px;
         margin-top: 12px;
 
+        .TradingAlertItemHeaderBox {
+            width: 100%;
+            background: linear-gradient(90deg, rgba(69, 97, 130, 0.33) 0%, rgba(69, 97, 130, 0.33) 100%);
+            box-sizing: border-box;
+            padding: 7px 0 9px 32px;
+            display: flex;
+            align-items: center;
+
+            .leftItemLabel,
+            .leftItemLabel2,
+            .leftItemValue {
+                width: calc((100% - 32px) / 3);
+                font-family: OPPOSans, OPPOSans;
+                font-weight: normal;
+                font-size: 15px;
+                color: #94DCEF;
+                line-height: 17px;
+                text-align: left;
+                font-style: normal;
+            }
+        }
+
         .TradingAlertItem {
             width: 100%;
             box-sizing: border-box;
-            padding: 4px 20px;
+            padding: 7px 0 9px 32px;
             display: flex;
             align-items: center;
-            justify-content: space-between;
+            background-color: rgba(168, 172, 171, 0.08);
+            margin: 2px 0;
 
-            .leftItemLabel {
+            .leftItemLabel,
-                width: 60%;
+            .leftItemLabel2,
-                font-family: Microsoft YaHei, Microsoft YaHei;
+            .leftItemValue {
-                font-weight: 400;
+                width: calc((100% - 32px) / 3);
-                font-size: 12px;
+                font-family: OPPOSans, OPPOSans;
-                color: #FFFFFF;
+                font-weight: normal;
+                font-size: 13px;
+                color: #E4F3FF;
+                line-height: 17px;
                 text-align: left;
                 font-style: normal;
             }
 
-            .rightItemLabel {
+
-                font-family: Microsoft YaHei, Microsoft YaHei;
+            // .leftItemLabel {
-                font-weight: 400;
+            //     width: 60%;
-                font-size: 12px;
+            //     font-family: Microsoft YaHei, Microsoft YaHei;
-                color: #FF0000;
+            //     font-weight: 400;
-                text-align: right;
+            //     font-size: 12px;
-                font-style: normal;
+            //     color: #FFFFFF;
-                text-transform: none;
+            //     text-align: left;
-            }
+            //     font-style: normal;
+            // }
+
+            // .rightItemLabel {
+            //     font-family: Microsoft YaHei, Microsoft YaHei;
+            //     font-weight: 400;
+            //     font-size: 12px;
+            //     color: #FF0000;
+            //     text-align: right;
+            //     font-style: normal;
+            //     text-transform: none;
+            // }
         }
 
     }

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

@@ -44,12 +44,15 @@ const handleGetData = async () => {
 
     console.log('skodpijasidjaslfddfas', data);
 
-    TradingOtherData.value = data.OtherData
+    TradingOtherData.value = {
+        ...data.OtherData,
+        sum: Number(data.OtherData.value) + Number(data.OtherData.data)
+    }
 
     // ai需要的数据
     let AIData: any = []
     if (data.List && data.List.length > 0) {
-        let list = data.List.slice(0, 10)
+        let list = data.List.slice(0, 6)
         TradingAlertList.length = 0;
         list && list.forEach((item: any) => {
             TradingAlertList.push(item)
@@ -77,10 +80,36 @@ const handleGetData = async () => {
 
 <template>
     <div class="TradingAlertBox">
-        <SmallTitle :title="'交易预警'"></SmallTitle>
 
-        <div class="TradingAlertBox">
+        <div class="TradingAlertNewBox">
-            <div class="TradingAlertItem">
+            <div class="TradingAlertNewBoxItem">
+                <div class="TradingAlertNewBoxItemTemplate">
+                    <div class="TradingAlertNewBoxItemValue">{{ (TradingOtherData?.sum || 0) }}</div>
+                    <div class="TradingAlertNewBoxItemLabel">交易预警总数</div>
+                </div>
+            </div>
+
+            <div class="TradingAlertNewBoxItem">
+                <div class="TradingAlertNewBoxItemTemplate">
+                    <div class="TradingAlertNewBoxItemValue" style="color: #F87D75;">{{ (TradingOtherData?.value || 0)
+                        }}</div>
+                    <div class="TradingAlertNewBoxItemLabel">必查项</div>
+                </div>
+            </div>
+
+            <div class="TradingAlertNewBoxItem">
+                <div class="TradingAlertNewBoxItemTemplate">
+                    <div class="TradingAlertNewBoxItemValue" style="color: #75F8EE;">{{ (TradingOtherData?.data || 0) }}
+                    </div>
+                    <div class="TradingAlertNewBoxItemLabel">抽查项</div>
+                </div>
+            </div>
+        </div>
+
+        <!-- <SmallTitle :title="'交易预警'"></SmallTitle> -->
+
+        <!-- <div class="TradingAlertBox"> -->
+        <!-- <div class="TradingAlertItem">
                 <div class="TradingAlertItemLeft">
                     <img class="TradingAlertItemLeftIcon" src="../../../../assets/image/busyIcon.png" />
                 </div>
@@ -100,24 +129,32 @@ const handleGetData = async () => {
                 <div class="TradingAlertItemRight">
                     <div class="TradingAlertItemRightLabel">抽查项</div>
                     <div class="TradingAlertItemRightValueBox">
-                        <div class="TradingAlertItemRightValue">{{ TradingOtherData?.value || '' }}</div>
+                        <div class="TradingAlertItemRightValue">{{ TradingOtherData?.data || '' }}</div>
                         <div class="OverviewOfServiceAreaBusyContentItemRightUnit">项</div>
                     </div>
 
                 </div>
-            </div>
+            </div> -->
-
+        <!-- </div> -->
-        </div>
 
         <div class="TradingAlertListBox">
-            <div class="TradingAlertItem" v-for="(item, index) in TradingAlertList" :key="index"
+            <div class="TradingAlertItemHeaderBox">
-                :style="{ backgroundColor: index % 2 === 0 ? 'rgba(22, 28, 47, 1)' : 'rgba(0, 0, 0, 0.2)' }">
+                <div class="leftItemLabel">服务区名称</div>
-                <div class="leftItemLabel">
+                <div class="leftItemLabel2">门店</div>
-                    <span>{{ item.serverpartName }}</span>
+                <div class="leftItemValue">状态</div>
-                    <span style="margin-left: 8px;">{{ item.serverpartShopName }}</span>
             </div>
 
-                <div class="rightItemLabel">
+
+
+            <div class="TradingAlertItem" v-for="(item, index) in TradingAlertList" :key="index">
+                <div class="leftItemLabel">
+                    <span>{{ item.serverpartName }}</span>
+                </div>
+                <div class="leftItemLabel2">
+                    {{ item.serverpartShopName }}
+                </div>
+
+                <div class="leftItemValue" style="color: #EABC08;">
                     {{ item.exceptionTypeName }}
                 </div>
             </div>

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

@@ -104,7 +104,11 @@ const handleGoMounted = async () => {
                 barWidth: 5,
                 smooth: true,
                 itemStyle: {
-                    borderRadius: [3, 3, 0, 0]
+                    borderRadius: [3, 3, 0, 0],
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        { offset: 0, color: '#46B8F3' },   // 顶部颜色
+                        { offset: 1, color: '#1A4AF6' }    // 底部颜色
+                    ])
                 },
                 label: {
                     show: true,
@@ -125,7 +129,9 @@ const handleGoMounted = async () => {
                 barWidth: 5,
                 smooth: true,
                 itemStyle: {
-                    borderRadius: [3, 3, 0, 0]
+                    borderRadius: [3, 3, 0, 0],
+                    color: "#3CD495"
+                    // 蓝湖这个没渐变 不知道为啥
                 }
             },
         ],

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

@@ -117,7 +117,10 @@ const handleGoMounted = async () => {
                 barWidth: 5,
                 itemStyle: {
                     borderRadius: [3, 3, 0, 0],
-                    color: '#008CFF' // 直接指定颜色
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        { offset: 0, color: '#46B8F3' },   // 顶部颜色
+                        { offset: 1, color: '#1A4AF6' }    // 底部颜色
+                    ])
                 },
                 label: {
                     show: true,
@@ -137,7 +140,7 @@ const handleGoMounted = async () => {
                 barWidth: 5,
                 itemStyle: {
                     borderRadius: [3, 3, 0, 0],
-                    color: '#69BCFF' // 直接指定颜色
+                    color: '#3CD495' // 直接指定颜色
                 }
             }
         ],

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

@@ -150,7 +150,11 @@ const handleGoMounted = async () => {
                 data: res.seriesDataCar,
                 yAxisIndex: 0,
                 itemStyle: {
-                    borderRadius: [3, 3, 0, 0]
+                    borderRadius: [3, 3, 0, 0],
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        { offset: 0, color: '#46B8F3' },   // 顶部颜色
+                        { offset: 1, color: '#1A4AF6' }    // 底部颜色
+                    ])
                 },
                 label: {
                     show: true,
@@ -171,7 +175,8 @@ const handleGoMounted = async () => {
                 yAxisIndex: 0,
                 barWidth: 5,
                 itemStyle: {
-                    borderRadius: [3, 3, 0, 0]
+                    borderRadius: [3, 3, 0, 0],
+                    color: "#3CD495"
                 }
             },
             // {
@@ -280,7 +285,11 @@ const handleGoMounted = async () => {
                 symbol: 'circle',
                 symbolSize: 6,
                 lineStyle: {
-                    width: 2
+                    width: 2,
+                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                        { offset: 0, color: '#46B8F3' },   // 左端颜色
+                        { offset: 1, color: '#1A4AF6' }    // 右端颜色
+                    ])
                 },
                 label: {
                     show: true,
@@ -300,11 +309,14 @@ const handleGoMounted = async () => {
                 symbol: 'circle',
                 symbolSize: 6,
                 lineStyle: {
-                    width: 2
+                    width: 2,
+                    color: "#FFB006"
+                },
+                itemStyle: {
+                    color: '#FFB006' // 确保标记点与线条同色
                 }
             }
         ],
-        color: ['#FF5E5E', '#FF9500']
     }
 
     myChart.setOption(option);
@@ -358,6 +370,8 @@ const handleGetSectionFlowCount = async () => {
         yesData = JSON.parse(VehiclesEntering2)
     } else {
         yesData = await handleGetMonthAnalysis(yesReq)
+        console.log('yesDatayesDatayesDatayesDatayesDatayesDatayesData', yesData);
+
         sessionStorage.setItem("VehiclesEntering2", JSON.stringify(yesData))
     }
 
@@ -452,18 +466,20 @@ const handleGetSectionFlowCount = async () => {
 
     let VehiclesEnteringAI = sessionStorage.getItem('VehiclesEnteringAI')
     if (VehiclesEnteringAI) { } else {
-        let res: any = {}
+        let result: any = {}
-        res[`${res.currentYear}年入区车流`] = aiObj
+        result[`${res.currentYear}年入区车流`] = aiObj
-        res[`${res.yesYear}年入区车流`] = yesAiObj
+        result[`${res.yesYear}年入区车流`] = yesAiObj
-        sessionStorage.setItem("VehiclesEntering2", JSON.stringify(res))
+
+
+        sessionStorage.setItem("VehiclesEnteringAI", JSON.stringify(result))
     }
 
     let VehiclesEnteringAI2 = sessionStorage.getItem('VehiclesEnteringAI2')
     if (VehiclesEnteringAI2) { } else {
-        let res: any = {}
+        let result: any = {}
-        res[`${res.currentYear}年对客营收`] = aiRevenueObj
+        result[`${res.currentYear}年对客营收`] = aiRevenueObj
-        res[`${res.yesYear}年对客营收`] = yesAiRevenueObj
+        result[`${res.yesYear}年对客营收`] = yesAiRevenueObj
-        sessionStorage.setItem("VehiclesEntering2", JSON.stringify(res))
+        sessionStorage.setItem("VehiclesEnteringAI2", JSON.stringify(result))
     }
 
     return res

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

@@ -4,6 +4,14 @@
     background-image: url(../../../../assets/image/newBigTitleBg.png);
     background-repeat: no-repeat;
     background-size: 100% 100%;
+    box-sizing: border-box;
+    padding-left: 38px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+
+    .titleBox {
         font-family: YouSheBiaoTiHei;
         font-weight: 400;
         font-size: 20px;
@@ -11,11 +19,15 @@
         color: #4CA9EF;
         text-align: left;
         font-style: normal;
-    box-sizing: border-box;
+        
-    padding-left: 38px;
+        background: linear-gradient(0deg, #9AFFFB 0%, #FFFFFF 100%);
-    display: flex;
+        -webkit-background-clip: text;
-    align-items: center;
+        background-clip: text;
-    justify-content: space-between;
+        -webkit-text-fill-color: transparent;
+        color: transparent;
+    }
+
+
 }
 
 .newBigTitleBoxLong {

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

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

src/page/index/index.vue

@@ -60,6 +60,8 @@ import AssessmentScoringRanking from './components/AssessmentScoringRanking/Asse
 import SmallTitle from './components/smallTitle/smallTitle.vue';
 import FestivalRevenueSumInfo from './components/FestivalRevenueSumInfo/FestivalRevenueSumInfo.vue'
 import AIIcon from '../../assets/image/AIIcon.png'
+import MemberMall from './components/MemberMall/index.vue'
+import AnalysisOfMember from './components/AnalysisOfMember/AnalysisOfMember.vue'
 
 // 页面样式
 let pageType = ref<string>("center")
@@ -73,8 +75,15 @@ let FestivalOptions = [
     { label: '暑期', value: 6 },
     { label: '中秋', value: 7 },
     { label: '国庆', value: 8 },
-
 ]
+
+const tabList: any = [
+    { label: "营收金额", value: 1 },
+    { label: "客单量", value: 2 },
+    { label: "客单均价", value: 3 },
+]
+let selectTab = ref<number>(1)
+
 const iframeLoaded = ref<boolean>(false);
 // 选中的节日
 let FestivalValue = ref<number>(5)
@@ -141,6 +150,11 @@ const sendCacheToIframe = () => {
     }
 };
 
+// 切换tab的内容
+const handleChangeTab = async (value: number) => {
+    selectTab.value = value
+}
+
 // 提问问题
 const handleSubmit = () => {
 
@@ -315,27 +329,26 @@ const handleStopPrint = () => {
 
                 <div class="leftBottomContent">
                     <!-- 年龄 -->
-                    <CustomerAgeGroup style="margin-top: 20px;width: calc(100% / 3);" />
+                    <CustomerAgeGroup style="margin-top: 20px;width: calc((100% - 57px) / 3);" />
 
                     <!-- 性别 -->
-                    <GenderCustomerGroup style="margin-left: 20px;margin-top: 20px;width: calc(100% / 3);" />
+                    <GenderCustomerGroup style="margin-left: 23px;margin-top: 20px;width: calc((100% - 57px) / 3);" />
 
                     <!-- 停留时长 -->
                     <!-- <CustomerGroupStay style="margin-left: 20px;margin-top: 20px;" /> -->
 
                     <!-- 偏好类型 -->
-                    <PreferenceType style="margin-left: 20px;margin-top: 20px;width: calc(100% / 3);" />
+                    <PreferenceType style="margin-left: 34px;margin-top: 20px;width: calc((100% - 57px) / 3);" />
                 </div>
 
-                <div class="left3stBottom"
+                <div class="left3stBottom" style="margin-top: 0;display: flex;flex-wrap: wrap;">
-                    style="margin-top: 0;display: flex;justify-content: space-between;flex-wrap: wrap;">
 
-                    <div class="left3stBottomItem" style="width: calc(100% / 3);">
+                    <div class="left3stBottomItem" style="width: calc((100% - 57px) / 3);">
                         <!-- 客群特征分析 -->
                         <CustomerGroup style="margin-top: 15px;" />
                     </div>
 
-                    <div class="left3stBottomItem" style="width: calc(100%  / 3 * 2);">
+                    <div class="left3stBottomItem" style="width: calc((100% - 57px) / 3 * 2);margin-left: 23px;">
                         <!-- 客群消费偏好 -->
                         <CustomerConsumptionPreferences style="margin-top: 15px;" />
                     </div>
@@ -346,7 +359,16 @@ const handleStopPrint = () => {
 
 
                 <!-- 交易画像分析 -->
-                <NewBigTitleBox title="交易画像分析" :type="3" style="margin-top: 15px;" />
+                <NewBigTitleBox title="交易画像分析" :type="3" style="margin-top: 15px;">
+                    <template #extra>
+                        <div class="BusinessCaseTabBox">
+                            <div :class="selectTab === item.value ? 'BusinessCaseItem selectBusinessCaseItem' : 'BusinessCaseItem'"
+                                v-for="(item, index) in tabList" :key="index" @click="handleChangeTab(item.value)">
+                                {{ item.label }}
+                            </div>
+                        </div>
+                    </template>
+                </NewBigTitleBox>
 
                 <div class="left3stBottom" style="margin-top: 0;">
                     <div class="left3stBottomItemLeft">
@@ -372,7 +394,7 @@ const handleStopPrint = () => {
                     </div>
 
                     <div class="left3stBottomItemRight">
-                        <BusinessCase :currentService="currentService" />
+                        <BusinessCase :currentService="currentService" :selectTab="selectTab" />
                     </div>
 
                 </div>
@@ -401,7 +423,7 @@ const handleStopPrint = () => {
                 <!-- 时间天气等内容 -->
                 <BasicMessageBox :currentService="currentService" style="margin-top: 20px;" />
 
-                <NewBigTitleBox :title="'经营业态月度情况'" style="margin-top: 20px;" />
+                <NewBigTitleBox :title="'经营业态'" style="margin-top: 20px;" />
                 <div class="rightContentBox">
                     <!-- 区域营收占比 -->
                     <RegionalRevenue :currentService="currentService" style="margin-top: 10px;" />
@@ -413,7 +435,7 @@ const handleStopPrint = () => {
                     <BusinessStructure :currentService="currentService" style="margin-top: 22px;" />
                 </div>
 
-                <NewBigTitleBox :title="'节假日营收分析'" style="margin-top: 44px;">
+                <NewBigTitleBox :title="'节假日营收'" style="margin-top: 44px;">
                     <!-- <template #extra>
                         <div class="FestivalBox">
                             <el-select class="festivalSelect" v-model="FestivalValue" placeholder="Select"
@@ -424,7 +446,7 @@ const handleStopPrint = () => {
                         </div>
                     </template> -->
                 </NewBigTitleBox>
-                <!-- 节假日营收分析 -->
+                <!-- 节假日营收 -->
                 <!-- <FestivalRevenue :currentService="currentService" :FestivalValue="FestivalValue" /> -->
                 <FestivalRevenueSumInfo :currentService="currentService" :FestivalValue="FestivalValue" />
 
@@ -534,14 +556,17 @@ const handleStopPrint = () => {
                 <!-- 消息轮播框 -->
                 <NoticeListBox :selectPageTab="selectPageTab" />
 
-                <NewBigTitleBox :title="'管理运营监控'" style="margin-top: 29px;" />
+                <NewBigTitleBox :title="'会员商城'" style="margin-top: 29px;" />
 
                 <div style="width: 100%;box-sizing: border-box;padding: 20px 11px 0;">
+                    <!-- 会员商城 -->
+                    <MemberMall />
+
                     <!-- 日常巡检(蓝湖的设备完好率) -->
-                    <DailyInspection />
+                    <!-- <DailyInspection /> -->
 
                     <!-- 考核打分排行榜 -->
-                    <AssessmentScoringRanking style="margin-top: 19px;" />
+                    <!-- <AssessmentScoringRanking style="margin-top: 19px;" /> -->
 
                     <!-- 热门商品榜单 -->
                     <HotProductList style="margin-top: 20px;" :pageType="'left'" />
@@ -594,10 +619,12 @@ const handleStopPrint = () => {
                 <!-- 核心品类占比 -->
                 <!-- <CoreCategory style="margin-top: 10px;" /> -->
 
-                <NewBigTitleBox :title="'商户生态结构图谱'" style="margin-top: 28px;" />
+                <NewBigTitleBox :title="'会员消费数据分析'" style="margin-top: 28px;" />
+                <AnalysisOfMember />
 
                 <!-- 商户评分排行榜 -->
-                <MerchantRatingRanking style="margin-top: 16px;" />
+                <!-- <MerchantRatingRanking style="margin-top: 16px;" /> -->
+
             </div>
         </div>
 

src/page/index/style.less

@@ -459,13 +459,13 @@
                 padding: 0 26px;
 
                 .left3stBottomItemLeft {
-                    width: calc(100% / 3 * 2);
+                    width: calc((100% - ((100% - 57px) / 3 + 34px)));
                     display: inline-flex;
                     justify-content: space-between;
                     flex-wrap: wrap;
 
                     .left3stBottomItem {
-                        width: 50%;
+                        width: calc(50% - 10px);
                         // width: calc((100% - 30px) / 2);
                         // width: calc((100% - 56px) / 2);
                         height: 214px;
@@ -473,8 +473,50 @@
                 }
 
                 .left3stBottomItemRight {
-                    width: calc(100% / 3);
+                    width: calc((100% - 57px) / 3);
                     display: inline-flex;
+                    margin-left: 34px;
+                }
+            }
+
+            .BusinessCaseTabBox {
+                // width: 100%;
+                display: inline-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;
+                    font-weight: 400;
+                    font-size: 15px;
+                    color: #87919C;
+                    text-align: left;
+                    font-style: normal;
+                    margin: 0 10px;
+                    cursor: pointer;
+                }
+
+                .selectBusinessCaseItem {
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 15px;
+                    color: #FFFFFF;
+                    text-align: left;
+                    font-style: normal;
+                    position: relative;
+                }
+
+
+                .selectBusinessCaseItem::after {
+                    content: "";
+                    width: 100%;
+                    height: 1px;
+                    background: linear-gradient(180deg, #00F6FF 0%, #008CFF 100%);
+                    position: absolute;
+                    left: 0;
+                    bottom: -4px;
                 }
             }
         }

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/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"}
+{"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/analysisofmember/analysisofmember.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/membermall/index.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"}