U 苏州地铁首页

he wei

2025-05-08 84ff051d5c6bbf10e71f6f8d1d57740c26619d9e

 src/components/myCharts/MapChart.vue

@@ -1,46 +1,121 @@
<script>
import echarts from "echarts";
import BaseChart from "./BaseChart";
import common from '@/components/diagram/js/common';
import {getAllMapOutlineAction} from "@/views/home/js/api";
import common from "@/components/diagram/js/common";
import { getAllMapOutlineAction } from "@/views/home/js/api";
const { throttle } = common;
import HomeNormal from "@/assets/images/home.png";
let mapHomeImage = new Image();
mapHomeImage.src = HomeNormal;
// let mapHomeImage = new Image();
// mapHomeImage.src = HomeNormal;
// 正常的图标
import HomeNormalImage from "@/assets/images/home-normal.png";
let homeNormalImage = new Image();
homeNormalImage.src = HomeNormalImage;
// let homeNormalImage = new Image();
// homeNormalImage.src = HomeNormalImage;
// 充电的图标
import HomeChargeImage from "@/assets/images/home-charge.png";
let homeChargeImage = new Image();
homeChargeImage.src = HomeChargeImage;
// let homeChargeImage = new Image();
// homeChargeImage.src = HomeChargeImage;
// 告警图标
import HomeWarnImage from "@/assets/images/home-warn.png";
let homeWarnImage = new Image();
homeWarnImage.src = HomeWarnImage;
// let homeWarnImage = new Image();
// homeWarnImage.src = HomeWarnImage;
// 放电图标
import HomeDischargeImage from "@/assets/images/home-discharge.png";
let homeDischargeImage = new Image();
homeDischargeImage.src = HomeDischargeImage;
// let homeDischargeImage = new Image();
// homeDischargeImage.src = HomeDischargeImage;
// 停电放电图标
import HomeTingDianImage from "@/assets/images/home-tingdian.png";
let homeTingDianImage = new Image();
homeTingDianImage.src = HomeTingDianImage;
// let homeTingDianImage = new Image();
// homeTingDianImage.src = HomeTingDianImage;

// 透明背景图标
import HomeTransImage from "@/assets/images/home-trans.png";
// let homeTransImage = new Image();
// homeTransImage.src = HomeTransImage;

const subwayLines = [
    {
        name: '地铁 1 号线',
        coords: [
            [114.287177, 30.598208],
            [114.293133, 30.594368],
            // 更多站点经纬度...
        ]
    },
];

const colorList = ['#f00', '#00ff6c', '#ff00f0', '#f5f500', '#f1bb4c', '#ff5a06', '#9b00ff', '#00faaf', '#e5741c'];

// 生成随机颜色的函数
function getRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

// [1,2,3,4] => [1,2] [2,3], [3,4]
function transformArray(arr, label) {
    const result = [];
    for (let i = 0, j = arr.length -1; i < j; i++) {
        result.push({coords: [arr[i], arr[i + 1]], label});
    }
    return result;
}

export default {
  name: "MapChart",
  extends: BaseChart,
  props: {},
  data() {
    return {
      name: "zhongguo"
  props: {
    roam: {
      type: [String, Boolean],
      validator: (v) => [true, false, "scale", "move"].includes(v),
      default: true,
    },
    subway: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      name: "zhongguo",
      subWaySeries: [],
    };
  },
  methods: {
    async getSubWayData() {
      let subwayData = await require(`../../../public/mapJson/subway/${this.subway}.json`);
      // console.log('sub', subwayData, '=============');
      // format 数据
      try {
        this.subWaySeries = subwayData.l.map((item, index) => {
          let points = item.st.map(v => v.sl.split(',').map(vv => vv*1));
          return {
            type: 'lines',
            coordinateSystem: 'geo',
            name: item.ln,
            data: transformArray(points, item.ln),
            lineStyle: {
              color: colorList[index % colorList.length],
              width: 2
            },
            z: 3
          }
        })
      } catch (error) {
        this.subWaySeries = [];
        console.log('error', error, '=============');
      }
      // console.log('subwayseries', JSON.stringify(this.subWaySeries), '=============');
      
    },
    setMapName() {
      //查询激活轮廓图
      getAllMapOutlineAction()
        .then(res => {
        .then((res) => {
          let rs = res.data;
          if (rs.code == 1) {
            let data = rs.data;
@@ -52,7 +127,7 @@
          }
          this.setData([]);
        })
        .catch(err => {
        .catch((err) => {
          this.setData([]);
          console.log(err);
        });
@@ -69,50 +144,50 @@
          label: "测试机房1",
          value: 8,
          color: "#7668F9",
          points: [118.8062, 31.9208]
          points: [120.548762, 31.293819],
        },
        {
          name: "",
          label: "测试机房2",
          value: 100,
          color: "#0081FF",
          points: [127.9688, 45.368],
          points: [120.614052, 31.30514],
        },
        {
          name: "",
          label: "测试机房3",
          value: 100,
          color: "#0081FF",
          points: [110.3467, 41.4899],
        },
        {
          name: "节",
          label: "测试机房4",
          value: 50,
          color: "#FF6B6C",
          points: [125.8154, 44.2584]
        },
        {
          name: "",
          value: 8,
          label: "测试机房6",
          color: "#7668F9",
          points: [116.4551, 40.2539]
        },
        {
          name: "节",
          label: "测试机房7",
          value: 8,
          color: "#66F842",
          points: [123.1238, 42.1216]
        },
        {
          name: "节",
          label: "测试机房8",
          value: 100,
          color: "#0081FF",
          points: [114.4995, 38.1006],
        },
        // {
        //   name: "",
        //   label: "测试机房3",
        //   value: 100,
        //   color: "#0081FF",
        //   points: [110.3467, 41.4899],
        // },
        // {
        //   name: "节",
        //   label: "测试机房4",
        //   value: 50,
        //   color: "#FF6B6C",
        //   points: [125.8154, 44.2584],
        // },
        // {
        //   name: "",
        //   value: 8,
        //   label: "测试机房6",
        //   color: "#7668F9",
        //   points: [116.4551, 40.2539],
        // },
        // {
        //   name: "节",
        //   label: "测试机房7",
        //   value: 8,
        //   color: "#66F842",
        //   points: [123.1238, 42.1216],
        // },
        // {
        //   name: "节",
        //   label: "测试机房8",
        //   value: 100,
        //   color: "#0081FF",
        //   points: [114.4995, 38.1006],
        // },
      ];
      data = list;
      let geoJson = require(`../../../public/mapJson/${mapName}.json`);
@@ -123,7 +198,7 @@
      areaList.forEach((v) => {
        data0.push({
          name: v.properties.name,
          value: Math.floor(Math.random() * 2) * 100
          value: Math.floor(Math.random() * 2) * 100,
        });
      });

@@ -137,7 +212,7 @@
            fontColor: item.fontColor,
            value: item.points.concat(data[i].value),
            label: item.label ? item.label : "",
            data: item
            data: item,
          });
        }
        return res;
@@ -148,9 +223,10 @@
          formatter(params) {
            // console.log(params);
            return params.data.label;
          }
          },
        },
        visualMap: {
        visualMap: 
        {
          show: false,
          type: "continuous",
          text: ["", ""],
@@ -159,22 +235,23 @@
          min: 0,
          max: 100,
          inRange: {
            color: ['#025483', '#116493']
            color: ["#025483", "#116493"],
          },
          seriesIndex: [1]
          // seriesIndex: [1],
          seriesIndex: 1,
        },
        geo: {
          show: true,
          map: mapName,
          label: {
            normal: {
              show: false
              show: false,
            },
            emphasis: {
              show: false,
            }
            },
          },
          roam: true,
          roam: this.roam,
          itemStyle: {
            normal: {
              borderColor: "rgba(147, 235, 248, 1)",
@@ -208,80 +285,106 @@
                show: false,
              },
            },
          }
          },
        },
        series: [
          // 图片底色
          // {
          //   name: "",
          //   type: "scatter",
          //   coordinateSystem: "geo",
          //   symbol: "circle",
          //   symbolSize: [24, 24],
          //   label: {
          //     formatter: "{b}",
          //     position: "inside",
          //     show: true,
          //     color: "#FFFFFF",
          //     fontWeight: "bold",
          //   },
          //   itemStyle: {
          //     color(params) {
          //       return params.data.color;
          //     },
          //   },
          //   data: convertData(data),
          //   z: 3,
          // },
          // {
          //   //图片
          //   name: "图片",
          //   type: "scatter",
          //   coordinateSystem: "geo",
          //   symbol: function (value, params) {
          //     let img;
          //     let color = params.data.color;
          //     // let color = "#ff6b6c";
          //     switch (color) {
          //       case "#0081ff": // 浮充
          //         img = HomeChargeImage;
          //         break;
          //       case "#ff6b6c": // 放电
          //         img = HomeDischargeImage;
          //         break;
          //       case "#66f842": // 充电
          //         img = HomeNormalImage;
          //         break;
          //       case "#7668f9": // 停电
          //         img = HomeTingDianImage;
          //         break;
          //       default:
          //         // img = HomeChargeImage;
          //         img = HomeTransImage;
          //         break;
          //     }
          //     return params.data.name ? "circle" : "image://" + img;
          //   },
          //   symbolSize: [24, 24],
          //   label: {
          //     formatter: "{b}",
          //     position: "inside",
          //     show: true,
          //     color: "#FFFFFF",
          //     fontWeight: "bold",
          //   },
          //   itemStyle: {
          //     color(params) {
          //       return params.data.color;
          //     },
          //   },
          //   data: convertData(data),
          //   showEffectOn: "render",
          //   rippleEffect: {
          //     brushType: "stroke",
          //   },
          //   hoverAnimation: true,
          //   // zlevel: 3
          //   z: 4,
          // },
          // {
          //   name: "波纹",
          //   type: "effectScatter",
          //   coordinateSystem: "geo",
          //   rippleEffect: {
          //     scale: 3,
          //   },
          //   symbolSize: [18, 18],
          //   data: convertData(data),
          //   itemStyle: {
          //     color(params) {
          //       return params.data.color;
          //     },
          //   },
          //   tooltip: {
          //     show: true,
          //   },
          //   // zlevel: 2
          //   z: 2,
          // },
          {
            //图片
            name: "图片",
            type: "scatter",
            coordinateSystem: "geo",
            symbol: function(value, params) {
              let img;
              let color = params.data.color;
              //let color = "#ff6b6c";
              switch (color) {
                case "#0081ff":     // 浮充
                  img = HomeChargeImage;
                  break;
                case "#ff6b6c":   // 放电
                  img = HomeDischargeImage;
                  break;
                case "#66f842":  // 充电
                  img  = HomeNormalImage;
                  break;
                case "#7668f9":  // 停电
                  img = HomeTingDianImage;
                  break;
                default:
                  img = HomeChargeImage;
                  break;
              }
              return params.data.name?"circle":"image://" + img;
            },
            symbolSize: [24, 24],
            label: {
              formatter: '{b}',
              position: 'inside',
              show: true,
              color: "#FFFFFF",
              fontWeight: "bold"
            },
            itemStyle: {
              color(params) {
                return params.data.color;
              }
            },
            data: convertData(data),
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            hoverAnimation: true,
            zlevel: 3
          },
          {
            name: '波纹',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            rippleEffect: {
              scale: 3,
            },
            symbolSize: [18, 18],
            data: convertData(data),
            itemStyle: {
              color(params) {
                return params.data.color;
              }
            },
            tooltip: {
              show: true,
            },
            zlevel: 2
          },
          {
            type: 'map',
            type: "map",
            map: mapName,
            show: false,
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
@@ -292,43 +395,50 @@
              emphasis: {
                show: false,
                textStyle: {
                  color: '#FF0000'
                }
              }
                  color: "#FF0000",
                },
              },
            },
            itemStyle: {
              areaColor: "#FF0000"
              areaColor: "#FF0000",
            },
            roam: true,
            animation: false,
            data: data0,
            tooltip: {
              show: false
            }
              show: false,
            },
          },
        ]
          ...this.subWaySeries
        ],
      };
    },
    handleClick(params) {
      if (params.seriesIndex == 0) {
        let data = params.data;
        this.$emit('handleClick', data.data);
        this.$emit("handleClick", data.data);
      }

    }
    },
  },
  mounted() {
  async mounted() {
    let chart = this.$options.chart;
    if (this.subway) {
      // 如果需要显示地铁 则先加载地铁数据
      await this.getSubWayData();
    }
    this.setMapName();
    chart.off("click"); //防止chart点击触发多次
    chart.on('click', params => {
    chart.on("click", (params) => {
      this.handleClick(params);
    });
    chart.off('georoam');
    chart.on('georoam', throttle(() => {
      let option = chart.getOption();
      chart.setOption(option);
    }, 100));
  }
}
    chart.off("georoam");
    chart.on(
      "georoam",
      throttle(() => {
        let option = chart.getOption();
        chart.setOption(option);
      }, 100)
    );
  },
};
</script>