From 439e2aeade4d616c205b530af816f55b24e02b3b Mon Sep 17 00:00:00 2001
From: mkm <727897186@qq.com>
Date: Mon, 15 Jul 2024 11:25:57 +0800
Subject: [PATCH] (Update townDetail components with optimized API parameters
 and added sotre_id for improved accuracy)

---
 src/api.js                            |  14 +-
 src/components/index/bottomCenter.vue | 240 +++++++++-----------------
 src/components/index/bottomLeft.vue   |   2 +-
 src/components/index/bottomRight.vue  |   8 +-
 src/components/index/topCenter.vue    | 177 +++++++++++--------
 src/components/index/topLeft.vue      |  46 +++--
 src/components/index/topRight.vue     |  14 +-
 src/view/index.vue                    |  40 ++---
 8 files changed, 257 insertions(+), 284 deletions(-)

diff --git a/src/api.js b/src/api.js
index 2b1c18f..076f320 100644
--- a/src/api.js
+++ b/src/api.js
@@ -8,8 +8,8 @@ let expire = localStorage.getItem("TRADE_USER") ? JSON.parse(localStorage.getIte
 
 // 创建axios 实例
 const instacne = axios.create({
-    // baseURL: "http://192.168.1.22:8545",
-    baseURL: "https://multi-store.lihaink.cn",
+    baseURL: "http://192.168.1.22:8545",
+    // baseURL: "https://multi-store.lihaink.cn",
     // baseURL: "https://shop.lihaink.cn/",
     timeout: 30000,
 });
@@ -70,15 +70,21 @@ export function getUserNumApi(params) {
 
 
 export function getOrderNumApi(params) {
-    return instacne.get('/api/dataview/order_statistics', { params })
+    return instacne.get('/statistics/store_order_day', { params })
 }
 export function getSalesRankApi(params) {
     return instacne.get('/statistics/sales_ranking', { params })
 }
+export function getSotreCountApi(params) {
+    return instacne.get('/statistics/sotre_count', { params })
+}
+export function getProductCountSotreCountApi(params) {
+    return instacne.get('/statistics/product_count_sotre_count', { params })
+}
 
 
 export function getTodayOrderAmountApi(params) {
-    return instacne.get('/api/dataview/curr_day_order_amount', { params })
+    return instacne.get('/statistics/store_order_day_two', { params })
 }
 
 
diff --git a/src/components/index/bottomCenter.vue b/src/components/index/bottomCenter.vue
index de6536c..165aa49 100644
--- a/src/components/index/bottomCenter.vue
+++ b/src/components/index/bottomCenter.vue
@@ -1,117 +1,63 @@
 <template>
-    <img src="/static/index/CJYHTJ.png" style="position: absolute;width: 100%;height: 100%; " alt="">
-
-    <div style="height:5vh;"></div>
-    <div class="towns">
-        <div class="town-li act">{{ area.area_name }} </div>
-
-        <div class="town-li" :class="{ act: item.street_code == props.areaCodes.streetCode }"
-            v-for="(item, index) in streetList" @click="hdClick(item.street_code)">{{ item.street_name }}
-        </div>
-
-
-        <div id="transactionUsers" v-if="showChart" style="width: 100%;height: 30vh;">
-
-
-        </div>
-    </div>
+    <img class="img-cls" src="/static/town/CJYH.png" alt="">
+    <div id="transactionUsers" class="transactionUsers"></div>
 </template>
 <script setup>
-import { ref, reactive, onMounted, defineProps } from "vue"
 import * as echarts from 'echarts';
 import { getUserTradeCountApi } from "@/api.js"
-
-const props = defineProps({
-    areaCodes: Object,
+import { areaObj } from '../../store';
+import { useRoute } from 'vue-router';
+let areaStore = areaObj()
+const route=useRoute() 
+getUserTradeCountApi(
+    { ...areaStore.area, date: areaStore.date,sotre_id:route.query.sotre_id }
+).then(res => {
+    // res.data.forEach(item => {
+    // transactionUsersTown.xAxis[0]
+    // transactionUsersTown.xAxis[0].data.push(item.date.slice(5, item.date.length))
+    // transactionUsersTown.series[0].data.push(item.visitUser)
+    // transactionUsersTown.series[1].data.push(item.orderUser)
+    // transactionUsersTown.series[2].data.push(item.payOrderUser)
+    // })
+    transactionUsersTown.xAxis[0].data = res.data.x;
+    res.data.series.reverse();
+    res.data.series.forEach((item, index) => {
+        transactionUsersTown.series[index].data = item.value;
+    });
+    initCharts('transactionUsers', transactionUsersTown)
 })
 
 
-const hdClick = (code) => {
-    props.areaCodes.streetCode = code
-    init()
-}
-
-const streetList = reactive([])
-const area = reactive({
-    "area_code": "",
-    "area_name": ""
-})
-
-
-const init = () => {
-
-    getUserTradeCountApi(props.areaCodes).then(res => {
-
-        showChart.value = false
-        option.xAxis[0].data.splice(0, option.xAxis[0].data.length)
-        option.series[0].data.splice(0, option.series[0].data.length)
-        option.series[1].data.splice(0, option.series[1].data.length)
-        option.series[2].data.splice(0, option.series[2].data.length)
-
-        if (!streetList.length) {
-
-            res.data.streetList.forEach(item => {
-                streetList.push(item)
-            })
-        }
-        area.area_name = res.data.area.area_name
-        res.data.userTradeCountList.forEach(item => {
-
-            option.xAxis[0].data.push(item.date.slice(5, item.date.length))
-            option.series[0].data.push(item.visitUser)
-
-            option.series[1].data.push(item.orderUser)
-            option.series[2].data.push(item.payOrderUser)
-
-        })
-        showChart.value = true
-        setTimeout(() => {
-
-            initCharts('transactionUsers', option)
-
-
-
-        }, 10)
-
-
-    })
-}
-
-
-
 const initCharts = (tag, option) => {
     var chartDom = document.getElementById(tag);
     var myChart = echarts.init(chartDom);
     myChart.setOption(option);
+
 }
-
-const showChart = ref(false)
-
-const option = reactive({
-    color: ['#015989', '#583936', '#416979'],
+const transactionUsersTown = {
+    color: ['#4B5FDB', '#10C1CE', '#583936'],
     title: {
         text: ''
     },
     tooltip: {
         trigger: 'axis',
-        backgroundColor: "#1F3948",
-        borderColor: "#1F3948",
-        textStyle: {
-            color: '#fff',
-            fontSize: 14,
-        },
         axisPointer: {
             type: 'cross',
             label: {
                 backgroundColor: '#6a7985'
-            },
+            }
         }
     },
     legend: {
-        data: ['访客人数', '下单人数', '支付人数',],
+        data: ['昨日', '今日'],
         textStyle: {
             color: "white"
-        }
+        },
+        icon: 'cricle',
+        itemWidth: 10,
+        itemHeight: 10,
+        itemGap: 10,
+        top: '2%'
     },
 
     grid: {
@@ -124,14 +70,12 @@ const option = reactive({
         {
             type: 'category',
             boundaryGap: false,
+            data: [],
             axisLabel: {
                 fontSize: 12,
                 color: '#d1f9fb',
                 rotate: 40, // 文本旋转角度
             },
-
-
-            data: []
         }
     ],
     yAxis: [
@@ -148,9 +92,8 @@ const option = reactive({
     ],
     series: [
         {
-            name: '访客人数',
+            name: '昨日',
             type: 'line',
-            stack: 'Total',
             smooth: true,
             lineStyle: {
                 width: 0
@@ -161,11 +104,11 @@ const option = reactive({
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                     {
                         offset: 0,
-                        color: '#18394A'
+                        color: '#4B5FDB'
                     },
                     {
                         offset: 1,
-                        color: '#2885A4'
+                        color: '#5A649D'
                     }
                 ])
             },
@@ -175,9 +118,8 @@ const option = reactive({
             data: []
         },
         {
-            name: '下单人数',
+            name: '今日',
             type: 'line',
-            stack: 'Total',
             smooth: true,
             lineStyle: {
                 width: 0
@@ -188,38 +130,11 @@ const option = reactive({
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                     {
                         offset: 0,
-                        color: '#2752A6'
+                        color: '#10C1CE'
                     },
                     {
                         offset: 1,
-                        color: '#005886'
-                    }
-                ])
-            },
-            emphasis: {
-                focus: 'series'
-            },
-            data: []
-        },
-        {
-            name: '支付人数',
-            type: 'line',
-            stack: 'Total',
-            smooth: true,
-            lineStyle: {
-                width: 0
-            },
-            showSymbol: false,
-            areaStyle: {
-                opacity: 0.8,
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    {
-                        offset: 0,
-                        color: '#005685'
-                    },
-                    {
-                        offset: 1,
-                        color: '#355969'
+                        color: '#0294E0'
                     }
                 ])
             },
@@ -228,41 +143,58 @@ const option = reactive({
             },
             data: []
         },
+        // {
+        //     name: '支付人数',
+        //     type: 'line',
+        //     smooth: true,
+        //     lineStyle: {
+        //         width: 0
+        //     },
+        //     showSymbol: false,
+        //     areaStyle: {
+        //         opacity: 0.8,
+        //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //             {
+        //                 offset: 0,
+        //                 color: '#583936'
+        //             },
+        //             {
+        //                 offset: 1,
+        //                 color: '#8b7042'
+        //             }
+        //         ])
+        //     },
+        //     emphasis: {
+        //         focus: 'series'
+        //     },
+        //     data: []
+        // },
 
 
     ]
-})
-
-onMounted(() => {
-    init()
-})
+}
 
+let a = 0
 </script>
+
+
+
+
+
 <style lang="scss">
-.towns {
-    width: 50vw;
-    display: flex;
-    box-sizing: border-box;
-    padding: 1vh 1vw;
-    flex-wrap: wrap;
-    position: relative;
+.transactionUsers {
+    position: absolute;
+    width: 100%;
+    height: 40vh;
+    top: 5vh;
+}
 
-    .town-li {
-        margin-top: 10px;
-        color: #A0C7D5;
-        padding: 5px 10px;
-        border-radius: 7px 10px;
-        font-size: 12px;
-        border: 1px solid #3A91A5;
-        // margin-left: 2vw;
-        justify-content: fl;
-        margin-left: 2vw;
-        cursor: pointer;
-    }
-
-    .act {
-        background-color: #072C3E;
-
-    }
+.img-cls {
+    width: 98%;
+    height: 45vh;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 </style>
\ No newline at end of file
diff --git a/src/components/index/bottomLeft.vue b/src/components/index/bottomLeft.vue
index 4e1bbcc..099310c 100644
--- a/src/components/index/bottomLeft.vue
+++ b/src/components/index/bottomLeft.vue
@@ -32,7 +32,7 @@ const configs = reactive(
 )
 
 getOrderNumApi(props.areaCodes).then(res => {
-    res.data.list.forEach(item => {
+    res.data.forEach(item => {
         configs.data.push(
             [item.street_name, item.dayOrderCount, item.dayOrderAmount, item.monthOrderCount, item.monthOrderAmount]
         )
diff --git a/src/components/index/bottomRight.vue b/src/components/index/bottomRight.vue
index 25ecfe8..1b95b8d 100644
--- a/src/components/index/bottomRight.vue
+++ b/src/components/index/bottomRight.vue
@@ -14,19 +14,13 @@ const props = defineProps({
 })
 
 getTodayOrderAmountApi(props.areaCodes).then(res => {
-
-
-    let list = res.data.geoStreetList
-    list.forEach(item => {
+    res.data.forEach(item => {
         configs2.data.push([
             item.street_name,
             item.today_order_amount,
             item.yesterday_order_amount
         ])
     })
-
-
-
 })
 
 const configs2 = reactive(
diff --git a/src/components/index/topCenter.vue b/src/components/index/topCenter.vue
index b8baf70..a5a6aeb 100644
--- a/src/components/index/topCenter.vue
+++ b/src/components/index/topCenter.vue
@@ -13,27 +13,26 @@
                 <div style="font-size: 10px;">NUMBER OF COMMODITIES</div>
                 <img src="/static/index/JR.png" style="width: 75%;position: relative;margin-top: 3.7vh;" alt="">
                 <div style="margin-top: 2vh;position: relative;"> <span style="color: #9DD2E0;font-size: 16px;">{{
-                    data?.totalProductCounInfo.todayProductCount }}</span>
+                    data.totalProductCounInfo.todayProductCount }}</span>
                     件</div>
-                <div style="margin-top: 1.5vh;display: flex;justify-content: space-around;padding: 0 1vw;">
-                    <div style="font-size: 12px;position: relative;display: flex;align-items: center;">
+                <div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
+                    <div style="font-size: 9px;position: relative;display: flex;align-items: center;">
                         <img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
                         &nbsp;
-                        昨日数据： {{ data?.totalProductCounInfo.yestertodayProductCount }}
+                        总数据： {{ data.totalProductCounInfo.yestertodayProductCount }}
                     </div>
-                    <div style="font-size: 12px;position: relative;display: flex;align-items: center;">
+                    <div style="font-size: 9px;position: relative;display: flex;align-items: center;">
                         <img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
                         &nbsp;
-                        周环比: {{ percent(data?.totalProductCounInfo.weeklyProductTotalGrowthRate) }}
+                        周环比: {{ data.totalProductCounInfo.weeklyProductTotalGrowthRate }}%
                     </div>
                 </div>
             </div>
         </div>
-
         <div class="product" style="">
             <div class="bg">
                 <img src="/static/index/SYBG.png" style="width: 90%;height: 100%;" alt="">
-                <img src="/static/index/SDTB.png" class="product-icon" alt="">
+                <img src="/static/index/SPTB.png" class="product-icon" alt="">
                 <div class="bubble"></div>
                 <div class="bubble1"></div>
                 <div class="bubble2"></div>
@@ -44,18 +43,18 @@
                 <img src="/static/index/JRC.png" style="width: 75%;position: relative;margin-top: 3.7vh;" alt="">
 
                 <div style="margin-top: 2vh;position: relative;"> <span style="color: #9DD2E0;font-size: 16px;">{{
-                    data?.newProductCountInfo?.todayNewProductCount }}</span>
+                    data.newProductCountInfo.todayNewProductCount }}</span>
                     件</div>
-                <div style="margin-top: 1.5vh;display: flex;justify-content: space-around;padding: 0 1vw;">
-                    <div style="font-size: 12px;position: relative;display: flex;align-items: center;">
+                <div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
+                    <div style="font-size: 9px;position: relative;display: flex;align-items: center;">
                         <img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
                         &nbsp;
-                        昨日数据： {{ data?.newProductCountInfo?.yestertodayNewProductCount }}
+                        昨日数据： {{ data.newProductCountInfo.yestertodayNewProductCount }}
                     </div>
-                    <div style="font-size: 12px;position: relative;display: flex;align-items: center;">
+                    <div style="font-size: 9px;position: relative;display: flex;align-items: center;">
                         <img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
                         &nbsp;
-                        周环比: {{ percent(data?.newProductCountInfo?.weeklyNewProductTotalGrowthRate) }}
+                        周环比: {{ data.newProductCountInfo.weeklyNewProductTotalGrowthRate }}%
                     </div>
                 </div>
             </div>
@@ -63,7 +62,7 @@
         <div class="product" style="">
             <div class="bg">
                 <img src="/static/index/SYBG.png" style="width: 90%;height: 100%;" alt="">
-                <img src="/static/index/SDTB.png" class="product-icon" alt="">
+                <img src="/static/index/SPTB.png" class="product-icon" alt="">
                 <div class="bubble"></div>
                 <div class="bubble1"></div>
                 <div class="bubble2"></div>
@@ -72,19 +71,24 @@
                 <div style="margin-top: 14vh;position: relative;">累 计 店 铺 总 数</div>
                 <div style="font-size: 10px;">ACCUMULATED NUMBERS OF SHOPS</div>
                 <img src="/static/index/JR.png" style="width: 75%;position: relative;margin-top: 3.7vh;" alt="">
-                <div style="margin-top: 2vh;position: relative;"> <span style="color: #9DD2E0;font-size: 16px;">{{
-                    data?.merchantCountInfo?.todayMerchantCount }}</span>
-                    个</div>
-                <div style="margin-top: 1.5vh;display: flex;justify-content: space-around;padding: 0 1vw;">
-                    <div style="font-size: 12px;position: relative;display: flex;align-items: center;">
+                <div style="margin-top: 2vh;position: relative;"> <span style="color: #9DD2E0;font-size: 16px;">
+
+                        {{ data.merchantCountInfo.todayMerchantCount }}
+
+
+                    </span>
+                    间</div>
+                <div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
+                    <div style="font-size: 9px;position: relative;display: flex;align-items: center;">
                         <img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
                         &nbsp;
-                        昨日数据： {{ data?.merchantCountInfo?.yestertodayMerchantCount }}
+                        总数据：
+                        {{ data.merchantCountInfo.yestertodayMerchantCount }}
                     </div>
-                    <div style="font-size: 12px;position: relative;display: flex;align-items: center;">
+                    <div style="font-size: 9px;position: relative;display: flex;align-items: center;">
                         <img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
                         &nbsp;
-                        周环比: {{ percent(data?.merchantCountInfo?.weeklyMerchantGrowthRate) }}
+                        周环比: {{ data.merchantCountInfo.weeklyMerchantGrowthRate }}%
                     </div>
                 </div>
             </div>
@@ -92,13 +96,14 @@
     </div>
 
     <div class="Views">
-        <img src="/static/index/SSLLL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
+        <img src="/static/index/SSLL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
         <div class="view-content">
-            <div>昨日数据：{{ viewData.yesterday }}</div>
-            <div style="display: flex;align-items: center;">当前浏览量：
-                <Remake :num="viewData.today" /> 人正在浏览
+            <!-- <div>昨日数据：{{ viewData.yesterday }}</div> -->
+            <div style="display: flex;align-items: center;">
+                <span style="font-size: 18px;">实时收款金额：</span>
+                <Remake :num="viewData.dayPayPrice" />
             </div>
-            <div>周环比：{{ percent(viewData.lastWeekRate) }}</div>
+            <!-- <div>周环比：{{ viewData.lastWeekRate }}%</div> -->
         </div>
     </div>
 </template>
@@ -106,69 +111,80 @@
 
 
 <script setup>
-import { ref, reactive, defineProps, onMounted } from "vue"
-import Remake from "@/components/Remake.vue"
 import { getProductCountApi, getViewCountApi } from "@/api.js"
+import mitt from '@/view/utils/mitt.js'
+import { ref, reactive, defineProps, onUnmounted } from "vue"
+import Remake from "@/components/Remake.vue"
+import { areaObj } from "../../store";
+import { useRoute } from 'vue-router';
+
+const areaStore = areaObj()
+const route=useRoute() 
+
 
 const props = defineProps({
-    areaCodes: Object,
+    code: Object,
 })
-
-
-
-let data = reactive({
-
-    "totalProductCounInfo": {
-        "todayProductCount": 20,
-        "yestertodayProductCount": 292,
-        "weeklyProductTotalGrowthRate": "9.42"
-    },
-    "newProductCountInfo": {
-        "todayNewProductCount": 0,
-        "yestertodayNewProductCount": 0,
-        "weeklyNewProductTotalGrowthRate": "-1.00"
-    },
-    "merchantCountInfo": {
-        "todayMerchantCount": 22,
-        "yestertodayMerchantCount": 22,
-        "weeklyMerchantGrowthRate": "-0.04"
-    }
-
-
-})
-
-let viewData = reactive(
+const data = reactive(
     {
-        "today": 0,
-        "yesterday": 0,
-        "lastWeekRate": 0
+        "totalProductCounInfo": {
+            "todayProductCount": 0,
+            "yestertodayProductCount": 0,
+            "weeklyProductTotalGrowthRate": 6.6842
+        },
+        "newProductCountInfo": {
+            "todayNewProductCount": 0,
+            "yestertodayNewProductCount": 0,
+            "weeklyNewProductTotalGrowthRate": -270
+        },
+        "merchantCountInfo": {
+            "todayMerchantCount": 22,
+            "yestertodayMerchantCount": 22,
+            "weeklyMerchantGrowthRate": 0.0476
+        }
     }
 
+
 )
+const viewData = reactive({
+    lastWeekRate: -0,
+    today: 0,
+    yesterday: 7,
+    dayPayPrice: 0
+})
 
-const clone = (data1, data2) => {
-    for (let key in data1) {
-        data2[key] = data1[key]
+getProductCountApi({
+    ...areaStore.area, date: areaStore.date,sotre_id:route.query.sotre_id
+}).then(res => {
+
+    for (let key in res.data) {
+        data[key] = res.data[key]
     }
 
-}
 
-getProductCountApi(props.areaCodes).then(res => {
-    data = reactive(res.data)
-    clone(res.data, data)
 })
 
-getViewCountApi(props.areaCodes).then(res => {
-    clone(res.data, viewData)
+const initViewCount = ()=>{
+    getViewCountApi({
+        ...areaStore.area, date: areaStore.date,sotre_id:route.query.sotre_id
+    }).then(res => {
+        for (let key in res.data) {
+            viewData[key] = res.data[key]
+        }
+        mitt.emit("header-title", res.data.title)
+    })
+}
+initViewCount()
+let timer1 = setInterval(()=>{
+    initViewCount();
+}, 5000)
+
+onUnmounted(()=>{
+    clearInterval(timer1)
 })
 
-const percent = (num) => {
 
 
-
-    return (num) + "%"
-}
-
 </script>
 <style lang="scss">
 .product-list {
@@ -263,6 +279,7 @@ const percent = (num) => {
     animation-iteration-count: infinite;
 }
 
+
 @keyframes bubbleAnimation {
     0% {
         top: 7vh;
@@ -370,4 +387,18 @@ const percent = (num) => {
         opacity: 0;
     }
 }
+
+@keyframes jump {
+    0% {
+        transform: translateY(0);
+    }
+
+    50% {
+        transform: translateY(-10px);
+    }
+
+    100% {
+        transform: translateY(0);
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/index/topLeft.vue b/src/components/index/topLeft.vue
index 2f1a5ba..0a5b7df 100644
--- a/src/components/index/topLeft.vue
+++ b/src/components/index/topLeft.vue
@@ -12,8 +12,7 @@
                 </div>
             </div>
         </div>
-        <div style="color: white;display: flex; justify-content: center;
-                    ">
+        <div style="color: white;display: flex; justify-content: center;">
             <div class="page-num" v-for="(item, index) in pageNum" @click="pageFN(index + 1)"> {{ index + 1 }}</div>
 
         </div>
@@ -22,7 +21,9 @@
 <script setup>
 import * as echarts from 'echarts';
 import { ref, reactive, defineProps } from "vue"
-import { getUserNumApi } from "@/api.js"
+import { getUserNumApi, getSotreCountApi } from "@/api.js"
+import { areaObj } from '@/store/index.js'
+const areaStore = areaObj()
 
 
 
@@ -54,7 +55,8 @@ const initCharts = (tag, option) => {
     myChart.setOption(option);
 }
 // 平台用户总量统计option
-let Option = {
+
+const userChartOption = {
     color: [
         new echarts.graphic.LinearGradient(0, 1, 0, 0, [
             { offset: 1, color: 'transparent' },
@@ -111,7 +113,7 @@ let Option = {
     ],
     series: [
         {
-            name: '新增用户数量',
+            name: '新增会员数量',
             type: 'bar',
             emphasis: {
                 focus: 'series'
@@ -122,7 +124,9 @@ let Option = {
                 borderColor: "#384FB4",
             },
 
-
+            backgroundStyle: {
+                color: ['red']
+            }
         },
         {
             name: '访问用户数量',
@@ -137,7 +141,7 @@ let Option = {
             },
         },
         {
-            name: '累计用户数量',
+            name: '累计会员数量',
             type: 'bar',
             emphasis: {
                 focus: 'series'
@@ -283,22 +287,28 @@ let merchatCountList = []
 let merchantTotalCount = []
 
 getUserNumApi(
-    props.areaCodes
-
+    {
+        ...areaStore.area,
+        streetCode: props.code, date: areaStore.date
+    }
 ).then(res => {
+    // merchatCountList = res.data.merchatCountList
+    // merchantTotalCount = res.data.merchantTotalCount
+    // let { userCountlist } = res.data
+    res.data.forEach(item => {
+        userChartOption.series[0].data.push(item.newUserCount)
+        userChartOption.series[1].data.push(item.viewUserCount)
+        userChartOption.series[2].data.push(item.totalUserCount)
+    });
+    initCharts('user', userChartOption)
+})
+getSotreCountApi().then(res => {
     merchatCountList = res.data.merchatCountList
     merchantTotalCount = res.data.merchantTotalCount
-    let { userCountlist } = res.data
-    userCountlist.forEach(item => {
-        Option.series[0].data.push(item.newUserCount)
-        Option.series[1].data.push(item.viewUserCount)
-        Option.series[2].data.push(item.totalUserCount)
-    });
-    pageNum.value = Math.ceil(merchatCountList.length / 8)
-    initCharts('user', Option)
+    pageNum.value = Math.ceil(merchantTotalCount / 8)
     initStoreOption(merchatCountList.slice(0, 8), merchantTotalCount)
-})
 
+})
 
 const pageFN = (Num) => {
 
diff --git a/src/components/index/topRight.vue b/src/components/index/topRight.vue
index 52768f0..f2b5013 100644
--- a/src/components/index/topRight.vue
+++ b/src/components/index/topRight.vue
@@ -29,7 +29,7 @@
 </template>
 <script setup>
 import { ref, reactive, defineProps } from "vue"
-import { getSalesRankApi } from "@/api.js"
+import { getProductCountSotreCountApi } from "@/api.js"
 import * as echarts from 'echarts';
 
 
@@ -56,7 +56,7 @@ const addFn = (data) => {
                 `<div style='background:red;position:relative'><img src="${item.image || item.mini_banner}" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
                 `<div style='height:40px;line-height:40px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>${item.store_name || item.mer_name}</div>`,
                 `<div style='  transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width:  ${item.store_name ? (item.total_sales / productRankingTotal.value).toFixed(2) * 100 : (item.total_sales / townProductCount.value).toFixed(2) * 100}%;height: 100%; background: linear-gradient(to right, #4459CC, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`,
-                `<div style=' position: relative;line-height:30px;text-align:center' >${item.total_sales} <span style='font-size:10px'>单</span>
+                `<div style=' position: relative;line-height:30px;text-align:center' >数量:${item.total_sales} 
                      <img src="/static/index/PHBBG.png" style="position: absolute;width: 100%;height: 30px; top:0px;left:0px" alt="">
                  </div>`,
 
@@ -223,15 +223,15 @@ const initStoreOption = (pageData, total) => {
 let pageNum = ref(0)
 
 
-getSalesRankApi(props.areaCodes).then(res => {
+getProductCountSotreCountApi(props.areaCodes).then(res => {
     productRankingList = res.data.productRankingList
-    merchantRankingList = res.data.merchantRankingList
+    // merchantRankingList = res.data.merchantRankingList
     townProductCountList = res.data.townProductCountList
     productRankingTotal.value = res.data.productRankingTotal
-    townProductCount.value = res.data.townProductCount
-    merchantRankingTotal.value = res.data.merchantRankingTotal
+     townProductCount.value = res.data.townProductCount
+    // merchantRankingTotal.value = res.data.merchantRankingTotal
     config3.data = addFn(productRankingList)
-    config.data = addFn(merchantRankingList)
+    // config.data = addFn(merchantRankingList)
     pageNum.value = Math.ceil(townProductCountList.length / 8)
     initStoreOption(townProductCountList.slice(0, 8), townProductCount.value)
 })
diff --git a/src/view/index.vue b/src/view/index.vue
index 3c003aa..e203597 100644
--- a/src/view/index.vue
+++ b/src/view/index.vue
@@ -4,7 +4,7 @@
     </div>
 
     <div class="box" :style="{ opacity: showLoading ? 0 : 1 }">
-        <!-- <div class="body">
+        <div class="body">
             <div class="l">
                 <topLeft :areaCodes="areaCodes" />
             </div>
@@ -25,34 +25,34 @@
             <div class="r">
                 <bottomRight :areaCodes="areaCodes"></bottomRight>
             </div>
-        </div> -->
+        </div>
     </div>
 </template> 
 <script setup>
 
-// import { ref, reactive } from "vue"
-// import topLeft from "@/components/index/topLeft.vue"
-// import topCenter from "@/components/index/topCenter.vue"
-// import topRight from "@/components/index/topRight.vue"
-// import bottomLeft from "@/components/index/bottomLeft.vue"
-// import bottomCenter from "@/components/index/bottomCenter.vue"
-// import bottomRight from "@/components/index/bottomRight.vue"
-// import { areaObj } from '@/store/index.js'
-// import { useRouter } from "vue-router"
-// const router = useRouter()
+import { ref, reactive } from "vue"
+import topLeft from "@/components/index/topLeft.vue"
+import topCenter from "@/components/index/topCenter.vue"
+import topRight from "@/components/index/topRight.vue"
+import bottomLeft from "@/components/index/bottomLeft.vue"
+import bottomCenter from "@/components/index/bottomCenter.vue"
+import bottomRight from "@/components/index/bottomRight.vue"
+import { areaObj } from '@/store/index.js'
+import { useRouter } from "vue-router"
+const router = useRouter()
 
 
 
-// const showLoading = ref(true)
-// const areaStore = areaObj()
-// const areaCodes = reactive({
-//     ...areaStore.area
-// })
+const showLoading = ref(true)
+const areaStore = areaObj()
+const areaCodes = reactive({
+    ...areaStore.area
+})
 
 
-// setTimeout(() => {
-//     showLoading.value = false
-// }, 1000);
+setTimeout(() => {
+    showLoading.value = false
+}, 1000);
 </script>
 <style lang="scss">
 @keyframes jump {