更新

2023-12-18 17:56:09 +08:00 · 2023-12-18 17:56:09 +08:00 · 4b2a661487
parent 021d1d8376
commit 4b2a661487
11 changed files with 348 additions and 95 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -15,6 +15,7 @@
        "echarts-gl": "^2.0.9",
        "mitt": "^3.0.1",
        "pinia": "^2.1.7",
+        "v-click-outside": "^3.2.0",
        "vue": "^3.3.8",
        "vue-router": "^4.2.5"
      },
@ -1229,6 +1230,14 @@
      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
    },
+    "node_modules/v-click-outside": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/v-click-outside/-/v-click-outside-3.2.0.tgz",
+      "integrity": "sha512-QD0bDy38SHJXQBjgnllmkI/rbdiwmq9RC+/+pvrFjYJKTn8dtp7Penf9q1lLBta280fYG2q53mgLhQ+3l3z74w==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/vite": {
      "version": "5.0.2",
      "resolved": "https://registry.npmmirror.com/vite/-/vite-5.0.2.tgz",
--- a/package.json
+++ b/package.json
@ -16,6 +16,7 @@
    "echarts-gl": "^2.0.9",
    "mitt": "^3.0.1",
    "pinia": "^2.1.7",
+    "v-click-outside": "^3.2.0",
    "vue": "^3.3.8",
    "vue-router": "^4.2.5"
  },
--- a/src/components/areaList.vue
+++ b/src/components/areaList.vue
@ -1,5 +1,5 @@
 <script setup>
-import { defineProps, defineEmits, ref, nextTick, onMounted, } from "vue"
+import { defineProps, defineEmits, ref, nextTick, onMounted, onUnmounted, } from "vue"
 import { useRouter } from 'vue-router'
 import { useAppStore } from "@/store/app.js";

@ -80,19 +80,28 @@ defineExpose({
  open, close, show
 })

+const addressRef = ref(null);
+
+const onClickOutside = (event) => {
+  const componentElement = addressRef.value;
+  if (!componentElement?.contains(event.target)) {
+    choseArea.value = false;
+  }
+}
+
 onMounted(() => {
-  // list.value.forEach(item => {
-  //   if (item.pinyin == appStore.map_info) {
-  //     choseTownFn(item)
-  //   }
-  // })
+  document.addEventListener('click', onClickOutside);
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', onClickOutside);
 })

 </script>

 <template>
-  <transition name="fade">
-    <div class="address" v-show="choseArea == true">
+  <transition name="fade" mode="out-in">
+    <div ref="addressRef" class="address" v-if="choseArea == true">
      <div
        class="address-li"
        @click="choseTownFn(item)"
@ -110,8 +119,8 @@ onMounted(() => {
  left: 1vw;
  top: 18px;
  position: absolute;
-  width: 10vw;
-  height: 18vh;
+  width: 8rem;
+  height: 15rem;
  background-color: #001e32;
  color: #c7dbe3;
  z-index: 9999;
--- a/src/components/headView.vue
+++ b/src/components/headView.vue
@ -142,7 +142,7 @@ onMounted(() => {
    </div>
    <div class="head-title">吟龙物流信息监控溯源可视化大屏</div>
    <div class="right">
-      <div class="item" @click="open" style="position: relative">
+      <div class="item" @click.stop="open" style="position: relative">
        <img src="/src/assets/head_img/location.png" alt="" />
        {{ info.address }}  
        <areaList
--- a/src/main.js
+++ b/src/main.js
@ -4,7 +4,7 @@ import App from './App.vue'
 import dataV from '@jiaminghi/data-view'
 import './assets/font/fonts.css';
 import router from "./router";
-import { createPinia } from 'pinia'
+import { createPinia } from 'pinia';

 const pinia = createPinia();

--- a/src/view/delivery/components/bottom.vue
+++ b/src/view/delivery/components/bottom.vue
@ -366,6 +366,7 @@ const initInfo = () => {
  dateCangeCrderCount({
    areaCode: appStore.delivery_address.areaCode,
    streetCode: appStore.delivery_address.streetCode,
+    courier_id: appStore.delivery_address.courier_id
  }).then(({ data }) => {
    let y1 = [], y2 = [], y3 = [], y4 = [];
    data.forEach((item) => {
@ -383,6 +384,7 @@ const initInfo = () => {
 const pages = ref({
  areaCode: appStore.delivery_address.areaCode,
  streetCode: appStore.delivery_address.streetCode,
+  courier_id: appStore.delivery_address.courier_id,
  page: 1,
  limit: 30
 })
--- a/src/view/delivery/components/left.vue
+++ b/src/view/delivery/components/left.vue
@ -145,12 +145,14 @@ const loadInfo = () => {
  latestLogistics({
    areaCode: appStore.delivery_address.areaCode,
    streetCode: appStore.delivery_address.streetCode,
+    courier_id: appStore.delivery_address.courier_id
  }).then(res => {
    info.value = res.data;
  })
  logisticsCount({
    areaCode: appStore.delivery_address.areaCode,
-    streetCode: appStore.delivery_address.streetCode
+    streetCode: appStore.delivery_address.streetCode,
+    courier_id: appStore.delivery_address.courier_id
  }).then(res => {
    delivery.value = res.data;
    datas.dataArr[0].value = res.data.pending_order_count;
@ -434,6 +436,7 @@ onMounted(() => {
      height: 100%;
      box-shadow: inset 1px 1px 40px rgba(91, 219, 246, 0.5);
      pointer-events: none;
+      overflow: hidden;
    }
  }
  .delivery {
--- a/src/view/delivery/components/right.vue
+++ b/src/view/delivery/components/right.vue
@ -28,8 +28,9 @@ const max = ref(0)

 const loadList = () => {
  deliveredProductRanking({
-    areaCode: appStore.address.areaCode,
-    streetCode: appStore.address.streetCode,
+    areaCode: appStore.delivery_address.areaCode,
+    streetCode: appStore.delivery_address.streetCode,
+    courier_id: appStore.delivery_address.courier_id
  }).then((res) => {
    items.value = res.data;
    res.data.forEach(e => {
--- a/src/view/index/components/centerItem1.vue
+++ b/src/view/index/components/centerItem1.vue
@ -33,9 +33,9 @@ onMounted(() => {

 <template>
  <div class="box">
-    <div class="ball">
+    <!-- <div class="ball">
      <ball class="ball1"></ball>
-    </div>
+    </div> -->
    <centerMap v-if="list.length > 0" class="c-map" :list="list"></centerMap>
  </div>
 </template>
--- a/src/view/index/components/centerMap.vue
+++ b/src/view/index/components/centerMap.vue
@ -1,6 +1,6 @@
 <script setup>
 import { onMounted, reactive, ref, inject, nextTick } from "vue";
-import * as echarts from 'echarts';
+import * as echarts from "echarts";
 import mitt from "@/utils/mitt";
 import luxian from "@/assets/json/luxian.json";
 import hejiang from "@/assets/json/hejiang.json";
@ -21,65 +21,66 @@ const userStore = useUserStore();
 const props = defineProps({
  list: {
    type: Object,
-    default: () => []
-  }
-})
+    default: () => [],
+  },
+});

 const mapType = reactive({
-  name: '',
-  json: ''
-})
+  name: "",
+  json: "",
+});

-const changeType = (name = 'luxian') => {
+const changeType = (name = "luxian") => {
  mapType.name = name;
-  if (name == 'luxian') mapType.json = luxian;
-  if (name == 'hejiang') mapType.json = hejiang;
-  if (name == 'xuyong') mapType.json = xuyong;
-  if (name == 'gulin') mapType.json = gulin;
-  if (name == 'jiangyang') mapType.json = jiangyang;
-  if (name == 'longma') mapType.json = longma;
-  if (name == 'naxi') mapType.json = naxi;
-}
+  if (name == "luxian") mapType.json = luxian;
+  if (name == "hejiang") mapType.json = hejiang;
+  if (name == "xuyong") mapType.json = xuyong;
+  if (name == "gulin") mapType.json = gulin;
+  if (name == "jiangyang") mapType.json = jiangyang;
+  if (name == "longma") mapType.json = longma;
+  if (name == "naxi") mapType.json = naxi;
+};

-let dataValue = []
+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 ''
-}
+  return "";
+};

 const initDataValue = () => {
-  dataValue.forEach(item => {
+  dataValue.forEach((item) => {
    item.label = {
      show: true, // 显示标签
      formatter: customFormatter, // 标签内容，这里使用{name}表示数据项的name属性
      fontSize: 12, // 字体大小
-      fontWeight: 'bold', // 字体粗细
-      color: '#fff', // 字体颜色
+      fontWeight: "bold", // 字体粗细
+      color: "#fff", // 字体颜色
      offset: [-50, -40], // 标签偏移量，可根据需要调整
      rich: {
        img: {
          backgroundColor: {
-            image: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/205f0202311291015185408.png'
+            image:
+              "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/205f0202311291015185408.png",
          },
          height: 40,
          width: 140,
-          color: '#fff',
+          color: "#fff",
          fontSize: 14,
          lineHeight: 14,
-          fontFamily: 'ifonts',
-          align: 'center',
-          padding: [0, 0, 20, 0]
+          fontFamily: "ifonts",
+          align: "center",
+          padding: [0, 0, 20, 0],
        },
        t: {
          fontSize: 10,
-          align: 'center'
-        }
-      }
+          align: "center",
+        },
+      },
    };
-  })
-}
+  });
+};

 const echartsRef = ref(null);
 let chart = null;
@ -96,11 +97,11 @@ const initMap = () => {
    title: {
      text: mapType.name,
      textStyle: {
-        color: '#fff',
-        fontSize: 20
+        color: "#fff",
+        fontSize: 20,
      },
-      top: '10%',
-      left: '10%'
+      top: "10%",
+      left: "10%",
    },
    //geo方式地理坐标系组件。
    geo: [
@ -111,17 +112,17 @@ const initMap = () => {
          show: false,
        },
        emphasis: {
-          disabled: true
+          disabled: true,
        },
        select: {
-          disabled: true
+          disabled: true,
        },
        // aspectScale:0.75, //长宽比
        //   roam: true, //是否允许缩放
        itemStyle: {
          normal: {
-            // color: '#546686', //地图背景色    
-            borderColor: '#fff', //省市边界线00fcff 516a89
+            // color: '#546686', //地图背景色
+            borderColor: "#fff", //省市边界线00fcff 516a89
            borderWidth: 1,
            areaColor: "#3f5171",
            shadowColor: "#5bdbf6",
@ -140,16 +141,16 @@ const initMap = () => {
        roam: false, //是否开启平游或缩放
        show: true,
        tooltip: {
-          show: false  // 取消鼠标移上去时的文字提示
+          show: false, // 取消鼠标移上去时的文字提示
        },
        label: {
-          show: false
+          show: false,
        },
        emphasis: {
-          disabled: true
+          disabled: true,
        },
        select: {
-          disabled: true
+          disabled: true,
        },
        itemStyle: {
          normal: {
@ -169,11 +170,11 @@ const initMap = () => {
      },
    ],
    tooltip: {
-      trigger: 'item',
+      trigger: "item",
      formatter: function (params) {
-        let obj = dataValue.find(item => item.street_name == params.name);
+        let obj = dataValue.find((item) => item.street_name == params.name);
        if (!obj) {
-          obj = params.data
+          obj = params.data;
        }
        if (obj) {
          return `<div 
@ -184,22 +185,28 @@ const initMap = () => {
                    align-items: center;
                    width: 180px;
                    height: 80px;">
-                      <div style="font-size: 15px;font-family: 'ifonts';">${obj?.street_name || ''}</div>
+                      <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>  
+                        <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 '';
+        } else return "";
      },
-      position: 'top',
+      position: "top",
      // extraCssText: 'background-color: transparent; border: none;pdding: 0;', // 设置额外的 CSS 样式
-      backgroundColor: 'rgba(0, 156, 255, 0)', //设置背景颜色
+      backgroundColor: "rgba(0, 156, 255, 0)", //设置背景颜色
      borderColor: "rgba(0, 156, 255, 0)",
      padding: 0,
      textStyle: {
-        color: '#fff'
-      }
+        color: "#fff",
+      },
    },
    series: [
      {
@ -207,15 +214,15 @@ const initMap = () => {
        map: mapType.name,
        label: {
          emphasis: {
-            show: false
+            show: false,
          },
-          color: 'rgba(0,0,0,0)'
+          color: "rgba(0,0,0,0)",
        },
        emphasis: {
          disabled: false,
        },
        select: {
-          disabled: true
+          disabled: true,
        },
        itemStyle: {
          normal: {
@ -224,8 +231,8 @@ const initMap = () => {
            borderWidth: 1,
          },
          emphasis: {
-            areaColor: '#0680ca',  // 鼠标经过时的背景色
-          }
+            areaColor: "#0680ca", // 鼠标经过时的背景色
+          },
        },
      },
      {
@ -233,58 +240,279 @@ const initMap = () => {
        type: "scatter",
        coordinateSystem: "geo",
        data: dataValue,
-        symbol: "image://https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6eb37202311281655342626.png",
+        symbol:
+          "image://https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6eb37202311281655342626.png",
        symbolSize: [40, 30],
        hoverSymbolSize: [60, 45],
        label: {
          formatter: "",
          position: "center",
-          show: false
+          show: false,
        },
        emphasis: {
          label: {
-            show: false
-          }
-        }
+            show: false,
+          },
+        },
      },
    ],
-  }
+  };
+  option = {
+    geo: [
+      {
+        type: "map",
+        map: mapType.name,
+        aspectScale: 1,
+        zoom: 1,
+        layoutCenter: ["50%", "51%"],
+        layoutSize: "110%",
+        roam: false,
+        label: {
+          emphasis: {
+            show: false,
+          },
+        },
+        show: true,
+        map: mapType.name,
+        zoom: 1,
+        aspectScale: 1,
+        roam: false,
+        itemStyle: {
+          normal: {
+            areaColor: "transparent",
+          },
+          emphasis: {
+            areaColor: {
+              type: "radial", // linear 线性渐变  radial径向渐变
+              x: 0.5, // 0.5为正中心，如果小于渐变中心靠左
+              y: 0.5, // 0.5为正中心，如果小于渐变中心靠上
+              r: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: "#A46759", // 0% 处的颜色
+                },
+                {
+                  offset: 0.1,
+                  color: "#A46759", // 0% 处的颜色
+                },
+
+                {
+                  offset: 1,
+                  color: "#FFB821", // 100% 处的颜色
+                },
+              ],
+            },
+
+            // borderWidth: 0
+          },
+        },
+        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",
+          },
+        },
+      },
+
+      {
+        type: "map",
+        map: mapType.name,
+        zlevel: -1,
+        aspectScale: 1,
+        zoom: 1,
+        layoutCenter: ["50%", "51%"],
+        layoutSize: "110%",
+        roam: false,
+        silent: true,
+
+        itemStyle: {
+          normal: {
+            borderWidth: 1,
+            borderColor: "rgba(17, 149, 216,0.6)",
+            borderColor: "#5AD0E0",
+            shadowColor: "rgba(172, 122, 255,0.5)",
+            shadowOffsetY: 5,
+            shadowBlur: 15,
+            areaColor: "rgba(5,21,35,0.1)",
+          },
+        },
+      },
+
+      {
+        type: "map",
+        map: mapType.name,
+        zlevel: -1,
+        aspectScale: 1,
+        zoom: 1,
+        layoutCenter: ["50%", "52%"],
+        layoutSize: "110%",
+        roam: false,
+        silent: true,
+
+        itemStyle: {
+          normal: {
+            borderWidth: 1,
+            borderColor: "rgba(17, 149, 216,0.6)",
+            borderColor: "#5AD0E0",
+            shadowColor: "rgba(172, 122, 255,0.5)",
+            shadowOffsetY: 5,
+            shadowBlur: 15,
+            areaColor: "rgba(5,21,35,0.1)",
+          },
+        },
+      },
+
+      {
+        type: "map",
+        map: mapType.name,
+        zlevel: -2,
+        aspectScale: 1,
+        zoom: 1,
+        layoutCenter: ["50%", "53%"],
+        layoutSize: "110%",
+        roam: false,
+        silent: true,
+
+        itemStyle: {
+          normal: {
+            borderWidth: 1,
+            borderColor: "rgba(17, 149, 216,0.4)",
+            borderColor: "#5AD0E0",
+            shadowColor: "rgba(172, 122, 255,0.5)",
+            shadowOffsetY: 5,
+            shadowBlur: 15,
+            areaColor: "rgba(5,21,35,0.1)",
+          },
+        },
+      },
+
+      {
+        type: "map",
+        map: mapType.name,
+        zlevel: -4,
+        aspectScale: 1,
+        zoom: 1,
+        layoutCenter: ["50%", "54%"],
+        layoutSize: "110%",
+        roam: false,
+        silent: true,
+
+        itemStyle: {
+          normal: {
+            borderWidth: 5,
+            // borderColor: "rgba(11, 43, 97,0.8)",
+            borderColor: "rgba(5,9,57,0.8)",
+            shadowColor: "rgba(29, 111, 165,0.8)",
+            shadowOffsetY: 15,
+            shadowBlur: 10,
+            areaColor: "rgba(5,21,35,0.1)",
+          },
+        },
+      },
+    ],
+    tooltip: {
+      show: true
+    },
+    color: '#1f7df5',
+    series: [
+      {
+        name: "地点名称",
+        type: "effectScatter",
+        coordinateSystem: "geo",
+        colorBy: 'series',
+        rippleEffect: {
+          period: 4, //动画时间，值越小速度越快
+          brushType: "fill", //波纹绘制方式 stroke, fill
+          scale: 12, //波纹圆环最大限制，值越大波纹越大
+          number: 2,
+        },
+        // 发散点的大小
+        symbolSize: function (val) {
+          return 4;
+          // return val[2] / 10;
+        },
+        data: dataValue,
+      },
+    ],
+  };
  // 使用配置项显示图表
  chart.setOption(option);
-}
+};

 const mapInfo = () => {
-  let area = appStore.area.find(item => item.code == appStore.address.areaCode);
+  let area = appStore.area.find(
+    (item) => item.code == appStore.address.areaCode
+  );
  let map;
  if (area.name == "泸县") map = luxian_geo;
  if (area.name == "江阳区") map = jiangyang_geo;
  if (area.name == "叙永县") map = xuyong_geo;
  map = JSON.parse(JSON.stringify(map));
  if (appStore.address.streetCode) {
-    let street = appStore.street.find(item => item.code == appStore.address.streetCode);
+    let street = appStore.street.find(
+      (item) => item.code == appStore.address.streetCode
+    );
    initStreetMap(street, map);
+    dataValue = dataValue.filter(
+      (item) => item.street_code == appStore.address.streetCode
+    );
  } else {
    mapType.name = area.name;
    mapType.json = map;
  }
-}
+};

 const initStreetMap = (street, map) => {
-  map.features = map.features.filter(item => item.properties.name == street.name);
+  map.features = map.features.filter(
+    (item) => item.properties.name == street.name
+  );
  mapType.name = street.name;
  mapType.json = map;
-}
+};

 onMounted(() => {
  dataValue = props.list;
-  changeType('xuyong');
+  changeType("xuyong");
  mapInfo();
-  initDataValue();
+  // initDataValue();
  setTimeout(() => {
    initMap();
-  })
-})
-
+  });
+});
 </script>

 <template>
--- a/src/view/login/index.vue
+++ b/src/view/login/index.vue
@ -123,7 +123,7 @@ const submit = () => {
 .login-box {
  width: 100%;
  height: 100%;
-  background-image: url(../../assets/login_img/bg.png);
+  background-image: url(https://lihai001.oss-cn-chengdu.aliyuncs.com/def/a0732202312131402421186.png);
  background-size: 100% 100%;
  overflow: hidden;
  position: relative;