Commit 358b490b authored by kaitly205422@163.com's avatar kaitly205422@163.com
Browse files

大屏事故类型排序

parent 82a447f4

src/assets/map/circle.jpg

0 → 100644
+603 B
Loading image diff...

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

+1 −1
Original line number Diff line number Diff line
@@ -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

+25 −20
Original line number Diff line number Diff line
@@ -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

+4 −4
Original line number Diff line number Diff line
@@ -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,

      },

    },