大屏事故类型排序

src/views/map/components/map-table.vue

@@ -32,7 +32,7 @@ export default {
         this.mapTableContainerHeight = mapTableContainer.offsetHeight - 50;
       }
       let mapTableList = this.$refs.mapTableList;
-      this.mapTableListHeight = mapTableList.offsetHeight;
+      this.mapTableListHeight = mapTableList?.offsetHeight;
     },
     // 比较map-table-list高度
     compareH() {

src/views/map/map-index.vue

@@ -505,7 +505,7 @@ export default {
           const num = res.data.find(val => val.levelName == x.name)
           return {
             ...x,
-            y: num?.levelNum - '',
+            y: num?.levelNum - '' || 0,
           }
         })
         setTimeout(() => {
@@ -539,14 +539,29 @@ export default {
 
     accidentType() {
       rightAccidentType({ areaName: this.areaName, type: '', level: this.level - 1 }).then(res => {
-        d3.select("#circleEchart svg").remove()
+        d3.select("#circleEchart svg").remove();
         if (!res.data.length) return;
+        const data = res.data, count = res.data.length - 1, centerCount = Math.ceil(count / 2), start = centerCount - 1, end = centerCount + 1;
+        let mapData = res.data.slice(start, end);  //取中间值作为圆心
+        let countI = 0;
+        while (countI < count / 2) { //将数据按照大小交替排序
+          const inverCountI = end + countI;
+          inverCountI <= count && mapData.push(data[inverCountI]);
+          countI < start && mapData.push(data[countI]);
+          countI++;
+        }
+        // 
+        if (mapData.length >= 6) {
+          mapData.length == 6 && mapData.push({ typeName: '' });
+          [mapData[5], mapData[6]] = [mapData[6], mapData[5]];
+        }
+
         const maxNum = res.data[0].typeNum;
-        const max = 30, min = 12;
+        const max = 40, min = 15;
         // 使用D3.js库中的circlePack布局
         const ele = document.querySelector('#accident')
         const containerWidth = ele.offsetWidth, containerHeight = ele.offsetHeight;
-        const circles = res.data.map((x, index) => {
+        const circles = mapData.map((x, index) => {
           return {
             radius: Math.max(max * x.typeNum / maxNum, min),
             name: x.typeName,
@@ -560,25 +575,12 @@ export default {
           .padding(10); // 可选项，设置圆之间的间距
         let i = 0
         const root = d3.hierarchy({ children: circles })
-          .sum(d => d.radius * 2)
-          .sort((a, b) => { //圆从中间开始排序，所有要把中间的球放在最开始
-            i++
-            if (i < (res.data.length / 2)) {
-              return a.data.radius - b.data.radius
-            }
-            return b.data.radius - a.data.radius
-          });
+          .sum(d => d.radius * 2);
         /**
          * 重排圆
          * 1.获取大圆&&小圆中有y比它小的
         */
         pack(root);
-        // root.children.forEach((val, index) => {
-        //   if (index > 1 && index < (res.data.length / 2) && index % 2 == 0) {
-        //     [root.children[index], root.children[res.data.length - 1 - index]] = [root.children[res.data.length - 1 - index], root.children[index]]
-        //   }
-        // })
-
 
         // 将root.children按照从小到大排序
         // const rootChildren = root.children;
@@ -600,7 +602,6 @@ export default {
         //   }
         // }
 
-        console.log(root.children.map(x => x.data.name))
         pack(root);
         // 渲染结果
         const svg = d3.select("#circleEchart")
@@ -784,6 +785,7 @@ export default {
                 scatters.push(...val.projectList.map(x => {
                   return {
                     value: [x.lng - '', x.lat - '', 0],
+                    // symbol: "image://" + require('@/assets/login/user.png'),
                     itemStyle: {
                       color: x.riskColor,
                     },
@@ -811,6 +813,8 @@ export default {
               }
             })
           }
+          // 自定义scatter3D系列的symbol
+
           this.myMap.setOption(
             {
               geo3D: {
@@ -870,7 +874,8 @@ export default {
                 {
                   type: "scatter3D",
                   symbol: 'circle',
-                  symbolSize: 6,
+                  // symbol: 'image://' + require('@/assets/map/circle.jpg'),
+                  symbolSize: 8,
                   coordinateSystem: "geo3D",
                   data: scatters,
                   zlevel: 1,

vue.config.js

@@ -37,10 +37,10 @@ module.exports = {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
         // target: "http://192.168.10.137:8080/",
-        // target: `http://192.168.4.232:8080`, //服务器地址
+        target: `http://192.168.4.232:8080`, //服务器地址
         // target: `http://192.168.15.230:8081`, //晓晋本地地址
         // target: `http://192.168.15.152:8081`, //鲍德本地地址
-        target: `http://127.0.0.1:8080`, //本地地址
+        // target: `http://127.0.0.1:8080`, //本地地址
         changeOrigin: true,
         pathRewrite: {
           ["^" + process.env.VUE_APP_BASE_API]: "",
@@ -48,10 +48,10 @@ module.exports = {
       },
       "/app-api": {
         // target: "http://192.168.10.137:8080/",
-        // target: `http://192.168.4.232:8080/`, //服务器地址
+        target: `http://192.168.4.232:8080/`, //服务器地址
         // target: `http://192.168.15.230:8081`, //晓晋本地地址
         // target: `http://192.168.15.152:8081`, //鲍德本地地址
-        target: `http://127.0.0.1:8080`, //本地地址
+        // target: `http://127.0.0.1:8080`, //本地地址
         changeOrigin: true,
       },
     },