更新

package-lock.json

@@ -14,7 +14,7 @@
         "amfe-flexible": "^2.2.1",
         "axios": "^1.6.2",
         "echarts": "^5.4.3",
-        "element-plus": "^2.4.3",
+        "element-plus": "^2.4.4",
         "pinia": "^2.1.7",
         "postcss-pxtorem": "^5.1.1",
         "vue": "^3.3.8",
@@ -1980,9 +1980,9 @@
       "dev": true
     },
     "node_modules/element-plus": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.4.3.tgz",
-      "integrity": "sha512-b3q26j+lM4SBqiyzw8HybybGnP2pk4MWgrnzzzYW5qKQUgV6EG1Zg7nMCfgCVccI8tNvZoTiUHb2mFaiB9qT8w==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.4.4.tgz",
+      "integrity": "sha512-TlKubXJgxwhER0dw+8ULn9hr9kZjraV4R6Q/eidwWUwCKxwXYPBGmMKsZ/85tlxlhMYbcLZd/YZh6G3QkHX4fg==",
       "dependencies": {
         "@ctrl/tinycolor": "^3.4.1",
         "@element-plus/icons-vue": "^2.3.1",
@@ -4507,9 +4507,9 @@
       "dev": true
     },
     "element-plus": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.4.3.tgz",
-      "integrity": "sha512-b3q26j+lM4SBqiyzw8HybybGnP2pk4MWgrnzzzYW5qKQUgV6EG1Zg7nMCfgCVccI8tNvZoTiUHb2mFaiB9qT8w==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.4.4.tgz",
+      "integrity": "sha512-TlKubXJgxwhER0dw+8ULn9hr9kZjraV4R6Q/eidwWUwCKxwXYPBGmMKsZ/85tlxlhMYbcLZd/YZh6G3QkHX4fg==",
       "requires": {
         "@ctrl/tinycolor": "^3.4.1",
         "@element-plus/icons-vue": "^2.3.1",

package.json

@@ -15,7 +15,7 @@
     "amfe-flexible": "^2.2.1",
     "axios": "^1.6.2",
     "echarts": "^5.4.3",
-    "element-plus": "^3.2.5",
+    "element-plus": "^2.4.4",
     "pinia": "^2.1.7",
     "postcss-pxtorem": "^5.1.1",
     "vue": "^3.3.8",

src/App.vue

@@ -6,13 +6,31 @@ const areaStroe = areaObj()
 
 
 if (localStorage.getItem("TRADE_USER")) {
-  let userInfo = JSON.parse(localStorage.getItem('TRADE_USER'))
-  areaStroe.changeUserInfo(userInfo)
-  let { area_code, street_code } = userInfo.user
-  console.log(area_code,45454)
-  areaStroe.changeArea({ areaCode: area_code, streetCode: street_code })
+    let userInfo = JSON.parse(localStorage.getItem('TRADE_USER'))
+    areaStroe.changeUserInfo(userInfo)
+    let { area_code, street_code } = userInfo.user
+    areaStroe.changeArea({ areaCode: area_code, streetCode: street_code })
 
 }
+else {
+    localStorage.setItem('TRADE_USER', JSON.stringify({
+        "user": {
+            "id": 8,
+            "account_type": 2,
+            "area_code": "510524",
+            "street_code": "510524100",
+            "account": "叙永镇",
+            "password": "3f4087bd6bdff7b6a3719ecc165c1a0d"
+        },
+        "token": "345d45fcd348ff02a69137999df2bbd8",
+        "expire": 1718782774,
+        "role": 3
+    }))
+    let userInfo = JSON.parse(localStorage.getItem('TRADE_USER'))
+    areaStroe.changeUserInfo(userInfo)
+    let { area_code, street_code } = userInfo.user
+    areaStroe.changeArea({ areaCode: area_code, streetCode: street_code })
+}
 
 
 
@@ -30,9 +48,9 @@ if (localStorage.getItem("TRADE_USER")) {
 
 </script>
 <template>
-  <div class="main-box">
-    <router-view></router-view>
-  </div>
+    <div class="main-box">
+        <router-view></router-view>
+    </div>
 </template>
 
 
@@ -41,14 +59,14 @@ if (localStorage.getItem("TRADE_USER")) {
 @import '/static/font/font.css';
 
 * {
-  margin: 0;
-  padding: 0;
+    margin: 0;
+    padding: 0;
 }
 
 .main-box {
-  width: 100vw;
-  height: 100vh;
-  background-color: #000C14;
-  overflow: hidden;
+    width: 100vw;
+    height: 100vh;
+    background-color: #000C14;
+    overflow: hidden;
 }
 </style>

src/api.js

@@ -8,7 +8,8 @@ let expire = localStorage.getItem("TRADE_USER") ? JSON.parse(localStorage.getIte
 
 // 创建axios 实例
 const instacne = axios.create({
-    baseURL: "https://crmeb-test.shop.lihaink.cn/",
+    baseURL: "http://192.168.1.22:8545",
+    // baseURL: "https://shop.lihaink.cn/",
     timeout: 30000,
 });
 
@@ -44,7 +45,7 @@ instacne.interceptors.request.use(
 instacne.interceptors.response.use(
     (res) => {
 
-        if (res.data.status != 200) {
+        if (res.data.code != 1) {
             ElMessage({
                 message: res.data.message,
                 type: 'warning',
@@ -64,7 +65,7 @@ instacne.interceptors.response.use(
 
 
 export function getUserNumApi(params) {
-    return instacne.get('/api/dataview/user_merchat_count', { params })
+    return instacne.get('/statistics/user', { params })
 }
 
 
@@ -72,7 +73,7 @@ export function getOrderNumApi(params) {
     return instacne.get('/api/dataview/order_statistics', { params })
 }
 export function getSalesRankApi(params) {
-    return instacne.get('/api/dataview/sales_ranking', { params })
+    return instacne.get('/statistics/sales_ranking', { params })
 }
 
 
@@ -82,15 +83,15 @@ export function getTodayOrderAmountApi(params) {
 
 
 export function getProductCountApi(params) {
-    return instacne.get('/api/dataview/product_count', { params })
+    return instacne.get('/statistics/product_count', { params })
 }
 
 export function getViewCountApi(params) {
-    return instacne.get('/api/dataview/view_count', { params })
+    return instacne.get('/statistics/index', { params })
 }
 
 export function getUserTradeCountApi(params) {
-    return instacne.get('/api/dataview/user_trade_count', { params })
+    return instacne.get('/statistics/user_trade_count', { params })
 }
 
 export function getProductCategoryListApi(params) {
@@ -158,7 +159,7 @@ export function withdraw_listApi(params) {
 }
 
 export function street_currday_order_countApi(params) {
-    return instacne.get('/api/dataview/street_currday_order_count', { params })
+    return instacne.get('/statistics/street_currday_order_count', { params })
 }
 export function loginApi(params) {
     return instacne.post('/api/dataview/login', params)
@@ -173,7 +174,7 @@ export function merchant_count_mainApi(params) {
     return instacne.get('/api/dataview/merchant_count_main', { params })
 }
 export function order_user_num_countApi(params) {
-    return instacne.get('/api/dataview/order_user_num_count', { params })
+    return instacne.get('/statistics/order_user_num_count', { params })
 }
 
 export function merchant_product_rankingApi(params) {

src/components/Remake.vue

@@ -22,11 +22,16 @@ export default {
         }
     },
     mounted() {
-        setTimeout(() => {
-            this.toOrderNum(this.num) // 这里输入数字即可调用
-        }, 500);
+        // setTimeout(() => {
+        //     this.toOrderNum(this.num) // 这里输入数字即可调用
+        // }, 500);
 
     },
+    watch:{
+        num(n,o){
+            this.toOrderNum(this.num) // 这里输入数字即可调用
+        }
+    },
     methods: {
         // 设置文字滚动
         setNumberTransform() {

src/components/areaList.vue

@@ -2,7 +2,7 @@
     <Transition>
         <div class="address" v-if="props.choseArea">
 
-            <div class="address-li" @click="choseAreaFn">龙马谭区 </div>
+            <div class="address-li" @click="choseAreaFn">泸县 </div>
 
             <div class="address-li" @click="choseTownFn(item.code, item.name)" v-for="( item, index ) in areaList ">{{
                 item.name }}
@@ -12,18 +12,14 @@
 </template>
 
 <script setup>
-import { defineProps, defineEmits, onMounted, reactive } from "vue"
-import { useRouter } from 'vue-router'
+import { defineProps, defineEmits, onMounted, reactive, watch } from "vue"
+import { useRouter, useRoute } from 'vue-router'
 import { areaObj } from '@/store/index.js'
 import axios from "axios"
+const route = useRoute
 
 let areaStore = areaObj()
 
-
-
-
-
-
 const router = useRouter()
 const emit = defineEmits(['offAreaList'])
 const props = defineProps({
@@ -56,7 +52,7 @@ const choseAreaFn = () => {
     })
     props.choseArea = false
 
-    emit('offAreaList', "龙马潭区")
+    emit('offAreaList', "泸县")
     router.replace('/')
 
 

src/components/datePicker.vue

@@ -12,9 +12,25 @@
 import { ref, reactive } from 'vue'
 import localeZH from 'element-plus/es/locale/lang/zh-cn'
 
-const date = ref(["2023-12-13T16:00:00.000Z",
-    "2024-01-16T16:00:00.000Z"])
-const changeDate = () => {
+import { areaObj } from "@/store/index.js"
+const areaStore = areaObj()
+
+
+// 将时间对象转化为年月日
+const getTime = (time) => {
+    var date =time
+    var year = date.getFullYear();
+    var month = (date.getMonth() + 1).toString().padStart(2, '0');
+    var day = date.getDate().toString().padStart(2, '0');
+
+    var formattedDate = year + '-' + month + '-' + day;
+
+    return formattedDate
+}
+
+const date = ref([areaStore.time[0], areaStore.time[1]])
+const changeDate = (e) => {
+    areaStore.changeTime([getTime(e[0]),getTime(e[1])])
 
 }
 

src/components/header.vue

@@ -2,43 +2,43 @@
     <div class="headers">
         <div class="logo">
         </div>
-        <div class="tab" v-if="role != 1">
+        <!-- <div class="tab" v-if="role != 1">
             <div class="tab-li">
-                <img @click="showFn(0, '/')" class="tab-img" v-if="show[0]" style="width: 6vw;height:2vh;" :src="u('SY')"
+                <img @click="showFn(0, '/')" class="tab-img" v-if="show[0]" style="width: 6vw;height:2vh;" src="/static/index/SY.png"  
                     alt="">
-                <img @click="showFn(0, '/')" class="tab-img" v-else style="width: 7vw; height: 3vh;" :src="u('SYXZ')"
+                <img @click="showFn(0, '/')" class="tab-img" v-else style="width: 7vw; height: 3vh;" src="/static/index/SYXZ.png"  
                     alt="">
             </div>
             <div class="tab-li">
                 <img @click="showFn(1, '/commodity')" class="tab-img" v-if="show[1]" style="width: 6vw;height:2vh;"
-                    :src="u('SP')" alt="">
-                <img @click="showFn(1, '/commodity')" class="tab-img" v-else style="width: 7vw;height:3vh;" :src="u('SPXZ')"
+                src="/static/index/SP.png"       alt="">
+                <img @click="showFn(1, '/commodity')" class="tab-img" v-else style="width: 7vw;height:3vh;"   src="/static/index/SPXZ.png"  
                     alt="">
             </div>
 
             <div class="tab-li">
                 <img @click="showFn(2, '/Businesses')" class="tab-img" v-if="show[2]" style="width: 6vw;height:2vh;"
-                    :src="u('SH')" alt="">
+                src="/static/index/SH.png"       alt="">
                 <img @click="showFn(2, '/Businesses')" class="tab-img" v-else style="width: 7vw;height:3vh;"
-                    :src="u('SHXZ')" alt="">
+                src="/static/index/SHXZ.png"       alt="">
             </div>
             <div class="tab-li">
                 <img @click="showFn(3, '/order')" class="tab-img" v-if="show[3]" style="width: 6vw;height:2vh;"
-                    :src="u('DD')" alt="">
-                <img @click="showFn(3, '/order')" class="tab-img" v-else style="width: 7vw;height:3vh;" :src="u('DDXZ')"
-                    alt="">
+                src="/static/index/DD.png"        alt="">
+                <img @click="showFn(3, '/order')" class="tab-img" v-else style="width: 7vw;height:3vh;" 
+                src="/static/index/DDXZ.png"          alt="">
 
             </div>
             <div class="tab-li">
                 <img @click="showFn(4, '/finance')" class="tab-img" v-if="show[4]" style="width: 6vw;height:2vh;"
-                    :src="u('CW')" alt="">
-                <img @click="showFn(4, '/finance')" class="tab-img" v-else style="width: 7vw;height:3vh;" :src="u('CWXZ')"
-                    alt="">
+                src="/static/index/CW.png"          alt="">
+                <img @click="showFn(4, '/finance')" class="tab-img" v-else style="width: 7vw;height:3vh;" 
+                src="/static/index/CWXZ.png"       alt="">
 
             </div>
             <div class="tab-li" v-if="route.path == '/storeLogin'" @click="router.replace('/Businesses')">
                 <img @click="showFn(4, '/finance')" class="tab-img" v-if="show[4]" style="width: 6vw;height:2vh;"
-                    :src="u('FH')" alt="">
+                src="/static/index/FH.png"      alt="">
 
             </div>
         </div>
@@ -46,15 +46,15 @@
 
             <div class="tab-li">
                 <img @click="showFn(2, '/storeLogin')" class="tab-img" v-if="show[2]" style="width: 6vw;height:2vh;"
-                    :src="u('SH')" alt="">
+                src="/static/index/SH.png"      alt="">
                 <img @click="showFn(2, '/storeLogin')" class="tab-img" v-else style="width: 7vw;height:3vh;"
-                    :src="u('SHXZ')" alt="">
+                src="/static/index/SHXZ.png"      alt="">
             </div>
-        </div>
+        </div> -->
         <div class="right">
             <datePicker></datePicker>
             <div class="rigth-li" @click="choseAreaFn"> <img style="width: 1VW;height:1VW;margin-right: 0.5vw;"
-                    :src="u('DW')" alt=""> {{ area }}
+                src="/static/index/DW.png"        alt=""> {{ area }}
             </div>
             <areaList :choseArea="choseArea" @offAreaList="offAreaList" style="left: 12vw;"></areaList>
             <div class="right-line">
@@ -70,7 +70,7 @@
                 <span></span>
                 <span></span>
             </div>
-            <div class="rigth-li" @click="out"><img style="width: 1VW;height:1VW;margin-right: 0.5vw;" :src="u('GJ')"
+            <div class="rigth-li" @click="out"><img style="width: 1VW;height:1VW;margin-right: 0.5vw;"  src="/static/index/GJ.png"  
                     alt=""></div>
             <div class="right-line">
                 <span></span>
@@ -217,9 +217,9 @@ const updateTime = () => {
 }
 onMounted(() => {
     setInterval(updateTime, 1000)
-    MapLoader().then(res => {
-        area.value = res.addressComponent.district
-    })
+    // MapLoader().then(res => {
+    //     area.value = res.addressComponent.district
+    // })
 
 
 })

src/components/index/topCenter.vue

@@ -74,7 +74,7 @@
                 <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>
                 <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;">
                         <img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">

src/components/index/topRight.vue

@@ -201,19 +201,18 @@ const initCharts = (tag, option) => {
     var chartDom = document.getElementById(tag);
     var myChart = echarts.init(chartDom);
     myChart.setOption(option);
-
-
 }
 const storeData = reactive([])
 const initStoreOption = (pageData, total) => {
     storeData.splice(0, storeData.length);
     pageData.forEach(item => {
-        let range = ((item.product_count / total).toFixed(2) * 100)
+        let range = (parseInt((item.product_count / total)*100))
         storeData.push({
             name: item.street_name,
             num: item.product_count,
             option: getRange(range)
         })
+
     })
     storeData.forEach((item, index) => {
         initCharts(`stores${index}`, item.option)

src/components/townDetail/bottomCenter.vue

@@ -12,11 +12,11 @@ let areaStore = areaObj()
 getUserTradeCountApi(
     { ...areaStore.area }
 ).then(res => {
-    res.data.userTradeCountList.forEach(item => {
+    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[1].data.push(item.orderUser        )
         transactionUsersTown.series[2].data.push(item.payOrderUser)
     })
     initCharts('transactionUsers', transactionUsersTown)
@@ -28,7 +28,7 @@ const initCharts = (tag, option) => {
 
 }
 const transactionUsersTown = {
-    color: ['#015989', '#583936', '#416979'],
+    color: ['#4B5FDB', '#583936', '#10C1CE'],
     title: {
         text: ''
     },
@@ -45,8 +45,12 @@ const transactionUsersTown = {
         data: ['访客人数', '下单人数', '支付人数',],
         textStyle: {
             color: "white"
-        }
-
+        },
+        icon: 'cricle',
+        itemWidth: 10,
+        itemHeight: 10,
+        itemGap: 10,
+        top: '2%'
     },
 
     grid: {
@@ -83,7 +87,6 @@ const transactionUsersTown = {
         {
             name: '访客人数',
             type: 'line',
-            stack: 'Total',
             smooth: true,
             lineStyle: {
                 width: 0
@@ -94,11 +97,11 @@ const transactionUsersTown = {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                     {
                         offset: 0,
-                        color: '#18394A'
+                        color: '#4B5FDB'
                     },
                     {
                         offset: 1,
-                        color: '#2885A4'
+                        color: '#5A649D'
                     }
                 ])
             },
@@ -110,7 +113,6 @@ const transactionUsersTown = {
         {
             name: '下单人数',
             type: 'line',
-            stack: 'Total',
             smooth: true,
             lineStyle: {
                 width: 0
@@ -121,11 +123,11 @@ const transactionUsersTown = {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                     {
                         offset: 0,
-                        color: '#2752A6'
+                        color: '#583936'
                     },
                     {
                         offset: 1,
-                        color: '#005886'
+                        color: '#8b7042'
                     }
                 ])
             },
@@ -137,7 +139,6 @@ const transactionUsersTown = {
         {
             name: '支付人数',
             type: 'line',
-            stack: 'Total',
             smooth: true,
             lineStyle: {
                 width: 0
@@ -148,11 +149,11 @@ const transactionUsersTown = {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                     {
                         offset: 0,
-                        color: '#005685'
+                        color: '#10C1CE'
                     },
                     {
                         offset: 1,
-                        color: '#355969'
+                        color: '#0294E0'
                     }
                 ])
             },

src/components/townDetail/bottomRight.vue

@@ -1,10 +1,10 @@
 <template>
     <img class="img-cls" src="/static/town/PHBSJ.png" alt="">
     <div class="user-rank" style="width: 98%; " v-if="config3.data.length">
-        <div class="btns">
+        <!-- <div class="btns">
             <span class="btn" :class="{ actbtn: showGoods }" @click="showGoods = true">商品销售排行</span>
             <span class="btn" :class="{ actbtn: !showGoods }" @click="showGoods = false">店铺销量排行</span>
-        </div>
+        </div> -->
         <dv-scroll-board v-show="showGoods" :config="config3" style="height: 35vh;margin-left: 1%;" />
         <dv-scroll-board v-show="!showGoods" :config="config" style="height: 35vh;margin-left: 1%;" />
     </div>
@@ -16,9 +16,11 @@ import { areaObj } from "@/store/index.js"
 const showGoods = ref(true)
 const areaStore = areaObj()
 getSalesRankApi({ ...areaStore.area }).then(res => {
-    townProductCount = res.data.townProductCount
-    productRankingTotal = res.data.productRankingTotal
-    aa(config3, res.data.productRankingList)
+    
+    console.log("===", res);
+    // townProductCount = res.data.townProductCount
+    // productRankingTotal = res.data.productRankingTotal
+    aa(config3, res.data)
     aa(config, res.data.merchantRankingList
     )
 
@@ -34,14 +36,16 @@ let townProductCount = ''
 let productRankingTotal = ''
 const aa = (cig, data) => {
     let list = []
-    data.forEach((item, i) => {
+    productRankingTotal = 0
+    data?.forEach((item, i) => {
+        productRankingTotal += item.sales
         cig.data.push([
 
             `<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) <= 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
             `<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='  transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width:  ${item.store_name ? (item.sales / productRankingTotal).toFixed(2) * 100 : (item.total_sales / townProductCount).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.sales} <span style='font-size:10px'>单</span>
                     <img src="/static/index/PHBBG.png" style="position: absolute;width: 100%;height: 30px; top:0px;left:0px" alt="">
                 </div>`,
 
@@ -53,7 +57,6 @@ const aa = (cig, data) => {
 
 
 
-
     return list
 
 }

src/components/townDetail/topCenter.vue

@@ -77,7 +77,7 @@
 
 
                     </span>
-                    件</div>
+                    间</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="">
@@ -96,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>周环比：{{ viewData.lastWeekRate }}%</div>
+            <!-- <div>周环比：{{ viewData.lastWeekRate }}%</div> -->
         </div>
     </div>
 </template>
@@ -145,7 +146,8 @@ const data = reactive(
 const viewData = reactive({
     lastWeekRate: -0,
     today: 0,
-    yesterday: 7
+    yesterday: 7,
+    dayPayPrice: 0
 })
 
 getProductCountApi({

src/components/townDetail/topLeft.vue

@@ -39,7 +39,7 @@ getUserNumApi({
 }).then(res => {
 
 
-    res.data.userCountlist.forEach(item => {
+    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)
@@ -122,7 +122,7 @@ const userChartOption = {
     ],
     series: [
         {
-            name: '新增用户数量',
+            name: '新增会员数量',
             type: 'bar',
             emphasis: {
                 focus: 'series'
@@ -150,7 +150,7 @@ const userChartOption = {
             },
         },
         {
-            name: '累计用户数量',
+            name: '累计会员数量',
             type: 'bar',
             emphasis: {
                 focus: 'series'

src/router/index.js

@@ -58,23 +58,24 @@ const routes = [
 ]
 
 const router = createRouter({
+    mode: 'hash',
     history: createWebHistory(),
     routes
 })
 
 router.beforeEach(async (to, from, next) => {
+    // 全部放行
+    // let token = localStorage.getItem("TRADE_USER")
 
-    let token = localStorage.getItem("TRADE_USER")
+    // if (to.name == "login" && token) {
+    //     next("/")
+    //     return
+    // }
 
-    if (to.name == "login" && token) {
-        next("/")
-        return
-    }
-
-    if (to.name != "login" && !token) {
-        next("/login")  //跳转
-        return
-    }
+    // if (to.name != "login" && !token) {
+    //     next("/login")  //跳转
+    //     return
+    // }
 
     next()  //放行
 })

src/store/index.js

@@ -2,6 +2,38 @@ import {
     defineStore
 } from 'pinia'
 
+const lastMouth = () => {
+    var thirtyDaysAgo = new Date();
+    thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30); // 设置为30天前的日期
+
+    var year = thirtyDaysAgo.getFullYear();
+    var month = thirtyDaysAgo.getMonth() + 1; // 月份从0开始，需要加1
+    var day = thirtyDaysAgo.getDate();
+
+    // 格式化为字符串，如果需要补0可以使用padStart函数
+    var formattedDate = year + '-' + month.toString().padStart(2, '0') + '-' + day.toString().padStart(2, '0');
+
+
+    return formattedDate
+
+}
+const now = () => {
+    // 创建一个新的Date对象，表示当前日期和时间
+    var today = new Date();
+
+    // 获取年、月、日
+    var year = today.getFullYear();
+    var month = today.getMonth() + 1; // 月份从0开始，需要加1
+    var day = today.getDate();
+
+    // 格式化为字符串
+    var formattedDate = year + "-" + month + "-" + day;
+    return formattedDate
+
+
+
+}
+
 export const areaObj = defineStore('counter', {
     state: () => ({
         userInfo: {},
@@ -11,6 +43,7 @@ export const areaObj = defineStore('counter', {
             // streetCode: 51052410
 
         },
+        time: [lastMouth(), now()],
         // 商户请求的参数
         store: {
             areaCode: "",
@@ -36,6 +69,9 @@ export const areaObj = defineStore('counter', {
             }
 
         },
+        changeTime(times) {
+            this.time = times
+        },
         storeLogin(obj) {
             this.userInfo.user = obj
         }

src/view/home.vue

@@ -1,12 +1,13 @@
 <template>
     <Header></Header>
-    <router-view></router-view>
+    <router-view :key="route.path"></router-view>
 </template>
 
 
 <script setup>
 import Header from "@/components/Header.vue"
-
+import { useRoute } from "vue-router";
+const route =useRoute()
 
 
 </script>

src/view/login.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="login-box">
         <div class="form">
+            <div style="text-align: center;transform: translateY(-1vh);"><img src="/static/login/tit.png" style="width: 29vw;"></div>
             <div class="content">
 
                 <div style="position: relative;margin-bottom: 3VH;">
@@ -177,9 +178,9 @@ const test = () => {
         left: 10vw;
 
         .ipt {
-            border: 1px solid #194FA3;
+            border: 1px solid #2CCCF7;
             padding: 1vh 2vw;
-            background-color: #123266;
+            background-color: #125A7D;
             width: 13VW;
             outline: none;
             -webkit-user-select: auto;
@@ -238,21 +239,20 @@ const test = () => {
     :deep .el-input__wrapper {
         height: 35px;
         width: 15.9vw;
-        background-color: #123266 !important;
-        box-shadow: 0 0 0 1px #194FA3 inset !important;
-        --el-select-focus-border-color: red !important;
-        --el-select-hover-border-color: red !important;
+        background-color: #125A7D !important;
+        box-shadow: 0 0 0 1px #2CCCF7 inset !important;
+       
     }
 
     // 修改下拉框样式-点击框focus
     :deep .is-focus .el-input__wrapper {
-        box-shadow: #194FA3 inset !important;
-        --el-select-focus-border-color: #194FA3 !important;
-        --el-select-hover-border-color: #194FA3 !important;
+        box-shadow: #2CCCF7 inset !important;
+        --el-select-focus-border-color: #2CCCF7 !important;
+        --el-select-hover-border-color: #2CCCF7 !important;
     }
 
     :deep .el-select__caret {
-        color: #194FA3 !important; // 清除按钮
+        color: #2CCCF7 !important; // 清除按钮
     }
 
     :deep .el-input__inner {
@@ -266,7 +266,7 @@ const test = () => {
 }
 
 .el-select-dropdown__item.hover {
-    background-color: #194FA3 !important; // hover
+    background-color: #59C5D8 !important; // hover
 }
 
 :deep .el-dropdown-menu__item:not(.is-disabled) {
@@ -278,8 +278,8 @@ const test = () => {
 }
 
 :deep .el-popper {
-    background-color: #123266 !important; // 展开下拉背景
-    border: 1px solid #409EFE !important; // 展开下拉边框
+    background-color: #125A7D !important; // 展开下拉背景
+    border: 1px solid #125A7D !important; // 展开下拉边框
 }
 
 :deep .el-popper .el-popper__arrow::before {

src/view/order.vue

@@ -290,13 +290,17 @@ const addConfigData = (data) => {
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchant.is_trader ? '自营' : '非自营'} </div>`,
 
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px'>
-                            <img src='${item.orderProduct[0].cart_info.product.image}'  style='width:30px;height:30px' />
-                        <span>${item.orderProduct[0].cart_info.product.store_name}    </span>
+                       
+                       <div style='display:flex'>  
+                        <img src='${item.orderProduct[0].cart_info.product.image}'  style='width:30px;height:30px' />
+                        <span style='margin-left:10px'>${item.orderProduct[0].cart_info.product.store_name}    </span>
+                        </div>
+                       
                         <span>${item.orderProduct[0].product_num}${item.orderProduct[0].cart_info.product.unit_name}    </span>
                         </div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.cost}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.total_price}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${orderStatus(item.status)}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.user_address}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.user_address_code.substring(item.user_address_code.length - 1)}队</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${payType(item.pay_type)}</div>`,
                 ]
             )
@@ -362,20 +366,23 @@ const addConfigData = (data) => {
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant.mer_name}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant.is_trader ? '自营' : '非自营'}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px'>
-                            <img src='${item.orderProduct[0].cart_info.product.image}'  style='width:30px;height:30px' />
-                        <span>${item.orderProduct[0].cart_info.product.store_name}    </span>
-
-
+                          
+                        
+                        
+                       
+                        <div style='display:flex'>  
+                        <img src='${item.orderProduct[0].cart_info.product.image}'  style='width:30px;height:30px' />
+                        <span style='margin-left:10px'>${item.orderProduct[0].cart_info.product.store_name}    </span>
+                        </div>
                        
                         <span>${item.orderProduct[0].product_num}${item.orderProduct[0].cart_info.product.unit_name}    </span>
                         
                         
                         
-                        
                         </div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.cost}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${orderStatus(item.status)}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.user_address}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.user_address_code.substring(item.user_address_code.length - 1)}队</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${payType(item.pay_type)}</div>`,
                 ]
 
@@ -453,13 +460,23 @@ const addConfigData2 = (data) => {
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.user.nickname}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchant.mer_name}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchant.is_trader ? '自营' : '非自营'}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.mer_delivery_address || '--'}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.order.user_address_code.substring(item.order.user_address_code.length - 1) || '--'} 队</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.refund_price}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px'     '>
+                      
+                      
+                      
+                      
+                      
+                      
+                        <div style='display:flex'>  
                         <img src=${item.refundProduct[0].product.cart_info.product.image} style='width:30px;height:30px'>
-                        <span>
-                            ${item.refundProduct[0].product.cart_info.product.store_name}
-                            </span>
+                        <span style='margin-left:10px'> ${item.refundProduct[0].product.cart_info.product.store_name}    </span>
+                       </div>
+
+
+
+
                             <span>
                                 ${item.refundProduct[0].product.product_num}    ${item.refundProduct[0].product.cart_info.product.unit_name}
                             </span>
@@ -536,16 +553,19 @@ const addConfigData2 = (data) => {
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.user.nickname}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant.mer_name}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant.is_trader ? '自营' : '非自营'}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mer_delivery_address || '--'}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.order.user_address_code.substring(item.order.user_address_code.length - 1) || '--'} 队</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.refund_price}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px'     '>
+                        <div style='display:flex'>  
                         <img src=${item.refundProduct[0].product.cart_info.product.image} style='width:30px;height:30px'>
-                        <span>
-                            ${item.refundProduct[0].product.cart_info.product.store_name}
-                            </span>
+                        <span style='margin-left:10px'> ${item.refundProduct[0].product.cart_info.product.store_name}    </span>
+                       </div>
+
+
+
+
                             <span>
                                 ${item.refundProduct[0].product.product_num}    ${item.refundProduct[0].product.cart_info.product.unit_name}
-
                             </span>
                         </div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>   
@@ -631,21 +651,20 @@ const addConfigData3 = (data) => {
                 
                         </div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >核销订单</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'> ${item.user_address}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'> ${item.user_address_code.substring(item.user_address_code.length - 1)}队</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.real_name}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchant.mer_name}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchant.is_trader ? '自营' : '非自营'}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px'>
-                            <img src='${item.orderProduct[0].cart_info.product.image}'  style='width:30px;height:30px' />
-                        <span>${item.orderProduct[0].cart_info.product.store_name}    </span>
+                           
+                        <div style='display:flex'>  
+                        
+                        
+                        <img src='${item.orderProduct[0].cart_info.product.image}'  style='width:30px;height:30px' />
+                        <span style='margin-left:10px'>${item.orderProduct[0].cart_info.product.store_name}    </span>
+                       </div>
 
-
-                       
                         <span>${item.orderProduct[0].product_num}${item.orderProduct[0].cart_info.product.unit_name}    </span>
-                        
-                        
-                        
-                        
                         </div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>
                     ${item.pay_price}
@@ -708,19 +727,20 @@ const addConfigData3 = (data) => {
                     
                     </div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>核销订单</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.user_address}</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.user_address_code.substring(item.user_address_code.length - 1)}队</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.real_name}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant.mer_name}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant.is_trader ? '自营' : '非自营'}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px'>
-                            <img src='${item.orderProduct[0].cart_info.product.image}'  style='width:30px;height:30px' />
-                        <span>${item.orderProduct[0].cart_info.product.store_name}    </span>
-
-
-                       
-                        <span>${item.orderProduct[0].product_num}${item.orderProduct[0].cart_info.product.unit_name}    </span>
+                        <div style='display:flex'>  
                         
                         
+                        <img src='${item.orderProduct[0].cart_info.product.image}'  style='width:30px;height:30px' />
+                        <span style='margin-left:10px'>${item.orderProduct[0].cart_info.product.store_name}    </span>
+                       </div>
+
+                        <span>${item.orderProduct[0].product_num}${item.orderProduct[0].cart_info.product.unit_name}    </span>
+                        
                         
                         
                         </div>`,

src/view/storeLogin.vue

@@ -148,7 +148,7 @@
 
 
 <script setup>
-import { ref, reactive, onMounted } from "vue"
+import { ref, reactive, onMounted, watch } from "vue"
 import { merchant_count_mainApi, merchant_product_rankingApi, merchant_product_visitApi, merchant_product_cartApi, } from "@/api.js"
 import { areaObj } from "../store";
 
@@ -174,7 +174,6 @@ if (areaStore.userInfo.user?.merchant) {
 
 if (userInfo.user?.merchant) {
     let { area_id, mer_id, street_id } = userInfo.user.merchant
-    console.log(area_id, 5645545)
     query = {
         areaCode: area_id,
         streetCode: street_id,
@@ -249,30 +248,39 @@ const data = reactive(
 let total1 = ''
 let total2 = ''
 let total3 = ''
-merchant_product_rankingApi(
-    { ...query, start_date: '2020-12-18', end_date: '2023-12-18' }
-).then(res => {
-    total1 = res.data.totalCount
-    addData1(res.data.list)
-})
 
-merchant_product_visitApi(
-    { ...query, start_date: '2020-12-18', end_date: '2023-12-18' }
 
-).then(res => {
-    total2 = res.data.totalCount
-    addData2(res.data.list)
 
-})
-merchant_product_cartApi(
-    { ...query, start_date: '2020-01-01', end_date: '2023-12-18' }
-).then(res => {
-    total3 = res.data.totalCount
-    addData3(res.data.list)
-})
 
+const init = () => {
+    merchant_product_rankingApi(
+        { ...query, start_date: areaStore.time[0], end_date: areaStore.time[1] }
+    ).then(res => {
+        total1 = res.data.totalCount
+        addData1(res.data.list)
+    })
+
+    merchant_product_visitApi(
+        { ...query, start_date: areaStore.time[0], end_date: areaStore.time[1] }
+
+    ).then(res => {
+        total2 = res.data.totalCount
+        addData2(res.data.list)
+
+    })
+    merchant_product_cartApi(
+        { ...query, start_date: areaStore.time[0], end_date: areaStore.time[1] }
+    ).then(res => {
+        total3 = res.data.totalCount
+        addData3(res.data.list)
+    })
+}
+
+
+init()
 
 const addData1 = (data) => {
+    config1.data.splice(0,99999999)
     data.forEach((item, i) => {
         config1.data.push(
             [
@@ -291,6 +299,8 @@ const addData1 = (data) => {
 
 }
 const addData2 = (data) => {
+    config2.data.splice(0,99999999)
+
     data.forEach((item, i) => {
         config2.data.push(
             [
@@ -298,7 +308,7 @@ const addData2 = (data) => {
                 `<div style='background:red;position:relative'><img src="${item.image}" 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}</div>`,
                 `<div style='  transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width:${(item.total / total2) * 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} <span style='font-size:10px'>单</span>
+                `<div style=' position: relative;line-height:30px;text-align:center;' >${item.total} <span style='font-size:10px'>人</span>
                      <img src="/static/index/PHBBG.png" style="position: absolute;width: 90px;height: 30px; top:0px;left:0px" alt="">
                  </div>`,
             ]
@@ -309,6 +319,8 @@ const addData2 = (data) => {
 
 }
 const addData3 = (data) => {
+    
+    config3.data.splice(0,99999999)
     data.forEach((item, i) => {
         config3.data.push(
             [
@@ -329,7 +341,6 @@ const addData3 = (data) => {
 
 
 merchant_count_mainApi(
-
     { ...query }
 ).then((res) => {
     for (let key in res.data) {
@@ -337,63 +348,19 @@ merchant_count_mainApi(
     }
 })
 
+watch(
+    () => areaStore.time,
+    (value, oldValue) => {
+      init()
 
+    }, {
+    deep: true,
+    immediate: true
+}
 
-onMounted(() => {
+)
 
 
-    // for (let i = 0; i < 20; i++) {
-    //     config3.data.push(
-    //         [
-    //             `<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) <= 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
-    //             `<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
-    //             `<div style='height:40px;line-height:40px;  white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>商asdasdasdssadasdasdasd品名称</div>`,
-    //             `<div style='  transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;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;' >5495 <span style='font-size:10px'>单</span>
-    //                  <img src="/static/index/PHBBG.png" style="position: absolute;width: 90px;height: 30px; top:0px;left:0px" alt="">
-    //              </div>`,
-
-    //         ],
-
-
-    //     )
-    // }
-    // for (let i = 0; i < 20; i++) {
-    //     config1.data.push(
-    //         [
-    //             `<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) <= 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
-    //             `<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
-    //             `<div style='height:40px;line-height:40px'>商品名称</div>`,
-    //             `<div style='  transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #0292EB, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`,
-    //             `<div style=' position: relative;line-height:30px;text-align:center' >5495 <span style='font-size:10px'>单</span>
-    //                  <img src="/static/index/PHBBG.png" style="position: absolute;width: 90px;height: 30px; top:0px;left:0px" alt="">
-    //              </div>`,
-
-    //         ],
-
-
-    //     )
-    // } for (let i = 0; i < 20; i++) {
-    //     config2.data.push(
-    //         [
-    //             `<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) <= 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
-    //             `<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
-    //             `<div style='height:40px;line-height:40px'>商品名称</div>`,
-    //             `<div style='  transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #B15641, #52C8E1);transition: width 0.5s ease-in-out;'></div> </div>`,
-    //             `<div style=' position: relative;line-height:30px;text-align:center' >5495 <span style='font-size:10px'>单</span>
-    //                  <img src="/static/index/PHBBG.png" style="position: absolute;width: 90px;height: 30px; top:0px;left:0px" alt="">
-    //              </div>`,
-
-    //         ],
-
-
-    //     )
-    // }
-
-
-
-})
-
 </script>
 
 

src/view/townDetail.vue

@@ -8,13 +8,13 @@
 
         <div class="top box">
             <div class="l">
-                <topLeft :code="route.query.code"></topLeft>
+                <topLeft :code="route.query.code" :key="route.query.code"></topLeft>
             </div>
             <div class="c" id="">
-                <topCenter :code="route.query.code"></topCenter>
+                <topCenter :code="route.query.code" :key="route.query.code"></topCenter>
             </div>
             <div class="r">
-                <topRight :code="route.query.code"></topRight>
+                <topRight :code="route.query.code" :key="route.query.code"></topRight>
             </div>
 
 
@@ -22,13 +22,13 @@
         <div class="bottom box">
             <div class="l">
 
-                <bottomleft :code="route.query.code"></bottomleft>
+                <bottomleft :code="route.query.code" :key="route.query.code"></bottomleft>
             </div>
             <div class="c">
-                <bottomCenter></bottomCenter>
+                <bottomCenter :key="route.query.code"></bottomCenter>
             </div>
             <div class="r">
-                <bottomRight :code="route.query.code"></bottomRight>
+                <bottomRight :code="route.query.code" :key="route.query.code"></bottomRight>
 
             </div>
         </div>