更新

src/App.vue

@@ -30,7 +30,7 @@ import { Push } from '@/common/push'
 
 
 var connection = new Push({
-  url: 'ws://192.168.1.10:3131', // websocket地址
+  url: 'ws://192.168.1.24:3131', // websocket地址
   app_key: 'aaea61749929eb53a4bd75a1474c1d27',
 });
 // 假设用户uid为1

src/components/Bill.vue

@@ -2,7 +2,7 @@
     <div style="position: relative;margin-right: 21px; margin-top: 20px">
         <img src="/static/a/bg.png" style="width: ;position: absolute;height: 50px;width: 100%;" alt="">
         <img src="/static/a/Y.png" style="position: absolute;" alt="">
-        <img :src="`/static/a/${data.icon}.png`" style="position: absolute;top: 50%;transform: translate(15px,-30%);"
+        <img :src="`/index/${data.icon}.png`" style="position: absolute;top: 50%;transform: translate(15px,-30%);"
             alt="">
         <div style="position: relative;padding: 0 10px;top: 5px;margin-left: 45px;">
             <div style="font-size: 16px;font-family: FZCYJ;color: #A9EDFC;">{{ data.num }}

src/components/header.vue

@@ -1,6 +1,9 @@
 <template>
     <div class="headers">
         <div class="logo" >
+
+
+
         </div>
         <div class="tab" v-if="role != 1">
             <div class="tab-li">

src/components/index/bottomCenter.vue

@@ -3,9 +3,9 @@
 
     <div style="height:5vh;"></div>
     <div class="towns">
-        <div class="town-li act">{{ area.area_name }} </div>
+        <div class="town-li act" @click="hdClick1">{{ area.area_name }} </div>
 
-        <div class="town-li" :class="{ act: item.street_code == props.areaCodes.streetCode }"
+        <div class="town-li" :class="{ act: item.street_code == params.streetCode }"
             v-for="(item, index) in streetList" @click="hdClick(item.street_code)">{{ item.street_name }}
         </div>
 
@@ -27,11 +27,37 @@ const props = defineProps({
 })
 
 
-const hdClick = (code) => {
+const deepCopy=(obj)=> {
-    props.areaCodes.streetCode = code
+  // 如果是基本数据类型或者 null，则直接返回
-    init()
+  if (typeof obj !== 'object' || obj === null) {
+    return obj;
   }
 
+  // 根据对象的类型进行分别处理
+  let result;
+  if (obj instanceof Array) {
+    result = [];
+    for (let i = 0; i < obj.length; i++) {
+      result[i] = deepCopy(obj[i]);
+    }
+  } else {
+    result = {};
+    for (let key in obj) {
+      result[key] = deepCopy(obj[key]);
+    }
+  }
+
+  return result;
+}
+let params=deepCopy( props.areaCodes)
+const hdClick = (code) => {
+    params.streetCode = code
+    init()
+}
+const hdClick1 = () => {
+    params.streetCode = ''
+    init()
+}
 const streetList = reactive([])
 const area = reactive({
     "area_code": "",
@@ -41,7 +67,7 @@ const area = reactive({
 
 const init = () => {
 
-    getUserTradeCountApi(props.areaCodes).then(res => {
+    getUserTradeCountApi(params).then(res => {
 
         showChart.value = false
         option.xAxis[0].data.splice(0, option.xAxis[0].data.length)

src/components/index/topLeft.vue

@@ -156,7 +156,7 @@ let Option = {
 // 地方店铺数量统计option
 let angle = 0;//角度，用来做简单的动画效果的
 
-let getRange = (Num) => {
+let getRange = (Num,colors) => {
     return {
         backgroundColor: "#061740",
         title: {
@@ -228,15 +228,15 @@ let getRange = (Num) => {
                                 //外环发光
                                 borderWidth: 0.5,
                                 shadowBlur: 20,
-                                borderColor: '#4bf3f9',
+                                borderColor: colors,
                                 shadowColor: '#9bfeff',
                                 color: { // 圆环的颜色
                                     colorStops: [{
                                         offset: 0,
-                                        color: '#4bf3f9', // 0% 处的颜色
+                                        color: colors, // 0% 处的颜色
                                     }, {
                                         offset: 1,
-                                        color: '#4bf3f9', // 100% 处的颜色
+                                        color: colors, // 100% 处的颜色
                                     }]
                                 },
                             }
@@ -266,12 +266,12 @@ let getRange = (Num) => {
 const storeData = reactive([])
 const initStoreOption = (pageData, total) => {
     storeData.splice(0, storeData.length);
-    pageData.forEach(item => {
+    pageData.forEach((item,index) => {
         let range = ((item.merchant_count / total).toFixed(2) * 100)
         storeData.push({
             name: item.street_name,
             num: item.merchant_count,
-            option: getRange(range)
+            option: getRange(range, index%2?"#4B5FDB":"#4bf3f9")
         })
     })
     storeData.forEach((item, index) => {

src/components/index/topRight.vue

@@ -55,12 +55,14 @@ const addFn = (data) => {
     data.forEach((item, i) => {
         list.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="line-height:30px; text-align: center;background-image: url('/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>
-                     <img src="/static/index/PHBBG.png" style="position: absolute;width: 100%;height: 30px; top:0px;left:0px" alt="">
+                
+            <img src="/index/PHBBG.png" style="position: absolute;width: 100%;height: 30px; top:0px;left:0px" alt="">
+                
                     </div>`,
 
             ],
@@ -94,7 +96,7 @@ const config = reactive({
 // 地方商品数量统计
 let angle = 0;//角度，用来做简单的动画效果的
 
-let getRange = (Num) => {
+let getRange = (Num, colors) => {
     return {
         backgroundColor: "#061740",
         title: {
@@ -166,15 +168,15 @@ let getRange = (Num) => {
                                 //外环发光
                                 borderWidth: 0.5,
                                 shadowBlur: 20,
-                                borderColor: '#4bf3f9',
+                                borderColor: colors,
                                 shadowColor: '#9bfeff',
                                 color: { // 圆环的颜色
                                     colorStops: [{
                                         offset: 0,
-                                        color: '#4bf3f9', // 0% 处的颜色
+                                        color: colors, // 0% 处的颜色
                                     }, {
                                         offset: 1,
-                                        color: '#4bf3f9', // 100% 处的颜色
+                                        color: colors, // 100% 处的颜色
                                     }]
                                 },
                             }
@@ -208,12 +210,12 @@ const initCharts = (tag, option) => {
 const storeData = reactive([])
 const initStoreOption = (pageData, total) => {
     storeData.splice(0, storeData.length);
-    pageData.forEach(item => {
+    pageData.forEach((item, index) => {
         let range = (parseInt((item.product_count / total) * 100))
         storeData.push({
             name: item.street_name,
             num: item.product_count,
-            option: getRange(range)
+            option: getRange(range, index % 2 ? "#4B5FDB" : "#4bf3f9")
         })
 
     })

src/view/finance.vue

@@ -605,7 +605,7 @@ globalEventBus.on('header5-3-4', data => {
         .btn {
             color: white;
             // border: 1px solid #BF6D5D;
-            background-image: url('static/index/btn.png');
+            background-image: url('/static/index/btn.png');
             background-size: 100% 100%;
             padding: 1vh 1vw;
             border-radius: 20px;

src/view/order.vue

@@ -897,7 +897,7 @@ globalEventBus.on('header4-1-1', data => {
         .btn {
             color: white;
             // border: 1px solid #BF6D5D;
-            background-image: url('static/index/btn.png');
+            background-image: url('/static/index/btn.png');
             background-size: 100% 100%;
             padding: 1vh 1vw;
             border-radius: 20px;
@@ -907,7 +907,6 @@ globalEventBus.on('header4-1-1', data => {
         }
 
         .act-btn {
-
             background-image: url('/static/index/actbg.png');
             background-size: 100% 100%;
             border: none;

vite.config.js

@@ -6,7 +6,7 @@ export default defineConfig({
   plugins: [vue()],
   server: {				// ← ← ← ← ← ←
     host: '0.0.0.0'	,// ← 新增内容 ←
-    port:"8888"
+    port:"8891"
   },
   resolve: {
     //别名配置，引用src路径下的东西可以通过@如：import Layout from '@/layout/index.vue'