更新

src/App.vue

@@ -1,4 +1,5 @@
 <script setup>
+
 </script>
 
 <template>

src/api/index.js

@@ -1,5 +1,10 @@
 import axios from "@/utils/axios.js";
 
+// 获取街道
+export const login = (data) => {
+    return axios.post('dataview/login', data);
+}
+
 // 获取街道
 export const getStreet = (data) => {
     return axios.get('city/get_street', { params: data });

src/store/user.js

@@ -0,0 +1,26 @@
+import { defineStore } from "pinia"
+import { ref } from "vue"
+
+export const useUserStore = defineStore('user', () => {
+
+    const userInfo = ref(JSON.parse(localStorage.getItem('userInfo') || '{}'));
+
+    const setUserInfo = (data) => {
+        userInfo.value = data;
+        localStorage.setItem('userInfo', JSON.stringify(data));
+    }
+
+    const token = ref(localStorage.getItem('token') || '');
+
+    const setToken = (data) => {
+        token.value = data;
+        localStorage.setItem('token', data);
+    }
+
+    return {
+        userInfo,
+        token,
+        setUserInfo,
+        setToken
+    }
+})

src/view/delivery/components/AMap.vue

@@ -193,9 +193,13 @@ onUnmounted(() => {
   width: 100%;
   height: 100%;
   position: relative;
+  overflow: hidden;
   #container {
+    position: absolute;
+    top: -10%;
+    left: 0;
     width: 100%;
-    height: 100%;
+    height: 130%;
   }
   .loading {
     width: 100%;

src/view/delivery/components/AMapLeft.vue

@@ -119,9 +119,13 @@ onUnmounted(() => {
   width: 100%;
   height: 100%;
   position: relative;
+  overflow: hidden;
   #container-left {
+    position: absolute;
+    top: -10%;
+    left: 0;
     width: 100%;
-    height: 100%;
+    height: 130%;
   }
   .loading {
     width: 100%;

src/view/delivery/components/bottom.vue

@@ -145,7 +145,7 @@ const initEcahrts = (yData1 = [], yData2 = [], yData3 = [], yData4 = []) => {
               y2: 1,
               colorStops: [{
                 offset: 0,
-                color: colorArr[index].start + "0.3)"
+                color: colorArr[index].start + "0.2)"
               },
               {
                 offset: 0.5,
@@ -157,7 +157,9 @@ const initEcahrts = (yData1 = [], yData2 = [], yData3 = [], yData4 = []) => {
               }
               ],
               globalCoord: false
-            }
+            },
+            borderWidth: 1,
+            borderColor: colorArr[index].end,
           }
         }
       };

src/view/index/components/centerMap.vue

@@ -40,7 +40,8 @@ let dataValue = []
 
 const customFormatter = (params) => {
   // console.log(params.data);
-  return `{img|${params.data.street_name}}\n{t|店铺${params.data.mer_count}个, 团队${params.data.service_group_count}个}`
+  // return `{img|${params.data.street_name}}\n{t|店铺${params.data.mer_count}个, 团队${params.data.service_group_count}个}`
+  return ''
 }
 
 const initDataValue = () => {
@@ -84,9 +85,6 @@ const initMap = () => {
     chart = echarts.init(echartsRef.value);
   }
   echarts.registerMap(mapType.name, mapType.json);
-  let piePatternImg = new Image();
-  piePatternImg.src = 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/35e6b202312021115251405.png';
-
 
   let option = {
     animation: false,
@@ -97,23 +95,7 @@ const initMap = () => {
         zoom: 1.0,
         label: {
           show: false,
-          disabled: true,
-          color: '#fff',
-          fontSize: 25,
-          // 高亮状态下的多边形和标签样式。
-
         },
-        //   选中状态下的多边形和标签样式
-        // emphasis: {
-        //   itemStyle: {
-        //     // color: '#546686', //地图背景色
-        //     borderColor: '#fff', //省市边界线00fcff 516a89
-        //     borderWidth: 1,
-        //   },
-        //   label: {
-        //     color: '#fff'
-        //   }
-        // },
         emphasis: {
           disabled: true
         },
@@ -143,6 +125,12 @@ const initMap = () => {
         zoom: 1.01, //当前视角的缩放比例
         roam: false, //是否开启平游或缩放
         show: true,
+        tooltip: {
+          show: false  // 取消鼠标移上去时的文字提示
+        },
+        label: {
+          show: false
+        },
         emphasis: {
           disabled: true
         },
@@ -166,6 +154,39 @@ const initMap = () => {
         },
       },
     ],
+    tooltip: {
+      trigger: 'item',
+      formatter: function (params) {
+        let obj = dataValue.find(item => item.street_name == params.name);
+        if (!obj) {
+          obj = params.data
+        }
+        if (obj) {
+          return `<div 
+                    style="background-image: url(\'/src/assets/img/item-box.png\');
+                    background-size: 100% 100%;
+                    display: flex;
+                    justify-content: space-evenly;
+                    align-items: center;
+                    width: 180px;
+                    height: 80px;">
+                      <div style="font-size: 15px;font-family: 'ifonts';">${obj?.street_name || ''}</div>
+                      <div style="font-size: 12px;">
+                        <p style="padding: 0;margin: 0">店铺:${obj?.mer_count || '0'}个</p>  
+                        <p style="padding: 0;margin: 0">团队:${obj?.service_group_count || '0'}个</p>  
+                      </div>
+                    </div>`;
+        } else return '';
+      },
+      position: 'top',
+      // extraCssText: 'background-color: transparent; border: none;pdding: 0;', // 设置额外的 CSS 样式
+      backgroundColor: 'rgba(0, 156, 255, 0)', //设置背景颜色
+      borderColor: "rgba(0, 156, 255, 0)",
+      padding: 0,
+      textStyle: {
+        color: '#fff'
+      }
+    },
     series: [
       {
         type: "map",
@@ -173,42 +194,25 @@ const initMap = () => {
         label: {
           emphasis: {
             show: false
-          }
+          },
+          color: 'rgba(0,0,0,0)'
         },
         emphasis: {
           disabled: false,
         },
         select: {
-          disabled: true
+          disabled: false
         },
         itemStyle: {
           normal: {
             areaColor: "#3f5171",
-            borderColor: "#fff",
+            borderColor: "#5bdbf6",
             borderWidth: 1,
-            // shadowColor: "#5bdbf6",
-            // shadowOffsetX: 5,
-            // shadowOffsetY: 10,
-            // shadowBlur: 30,
-            // areaColor: {
-            //   image: domImg,
-            //   repeat: 'no-repeat',
-            // },
+          },
+          emphasis: {
+            areaColor: '#0680ca',  // 鼠标经过时的背景色
           }
         },
-
-        // itemStyle: {
-        //   color: {
-        //     image: piePatternImg,
-        //     repeat: 'no-repeat',
-        //   },
-        //   areaColor: {
-        //     image: piePatternImg,
-        //     repeat: 'no-repeat',
-        //   },
-        //   borderColor: '#bddee6',
-        //   borderWidth: 1,
-        // },
       },
       {
         name: "",
@@ -246,20 +250,6 @@ const initMap = () => {
   }
   // 使用配置项显示图表
   chart.setOption(option);
-
-  // 添加自定义图形，实现地图倾斜效果
-  chart.dispatchAction({
-    type: 'updateLayout',
-    rotation: Math.PI / 4,  // 设置旋转角度
-  });
-
-  // 设置3D效果，实现地图立体效果
-  chart.setOption({
-    grid3D: {},
-    xAxis3D: {},
-    yAxis3D: {},
-    zAxis3D: {}
-  });
 }
 
 onMounted(() => {

src/view/login/index.vue

@@ -1,14 +1,17 @@
 <script setup>
 import { ref, reactive } from "vue"
 import { useRouter } from "vue-router";
-import { loginAPI } from "@/api/api.js"
+import { login } from "@/api/index.js";
+import { useUserStore } from "@/store/user.js";
 const router = useRouter()
 const show = ref(false)
-const account = ref('')
-const password = ref('')
+const account = ref('叙永镇')
+const password = ref('xuyongzhen')
 const isAccount = ref(false)
 const isPassword = ref(false)
 
+const userStore = useUserStore();
+
 const submit = () => {
 
   if (!account.value) {
@@ -24,17 +27,16 @@ const submit = () => {
   else isPassword.value = false;
 
 
-  loginAPI({
+  login({
     account: account.value,
     password: password.value
-  }).then(res => {
-    console.log(res);
-    // localStorage.setItem("TOKEN", 15455465465465)
-    // router.replace('/')
+  }).then((res) => {
+    userStore.setUserInfo(res.data.user);
+    userStore.setToken(res.data.token);
+    router.push('/');
+  }).catch(e => {
+    console.log(e);
   })
-  return
-
-
 }
 
 </script>