hotline-bs/src/views/home/center.map.ts

import { getImageUrl } from "@/utils/tools";
import { useThemeConfig } from "@/stores/themeConfig";
import { storeToRefs } from "pinia";
import { computed } from "vue";

const arrow = new Image();
arrow.src = getImageUrl("home/map_select.png");
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const layoutSize = computed(() => {
  switch (themeConfig.value.appScope) {
    case "YiBin":
      return "118%";
    case "ZiGong":
      return "140%";
    case "LuZhou":
      return "120%";
  }
});
export const optionHandle = (regionCode: string, list: object[]) => {
  return {
    backgroundColor: "rgba(0,0,0,0)",
    tooltip: {
      trigger: "item",
      position: function (
        point: any[],
        params: any,
        dom: any,
        rect: any,
        size: any
      ) {
        let x = 0; // x坐标位置
        let y = 0; // y坐标位置
        // 当前鼠标位置
        const pointX = point[0];
        const pointY = point[1];
        // 提示框大小
        const boxWidth = size.contentSize[0];
        const boxHeight = size.contentSize[1];

        // boxWidth > pointX 说明鼠标左边放不下提示框
        if (boxWidth > pointX) {
          x = pointX + 10;
        } else {
          // 左边放的下
          x = pointX - boxWidth - 10;
        }

        // boxHeight > pointY 说明鼠标上边放不下提示框
        if (boxHeight > pointY) {
          y = 5;
        } else {
          // 上边放得下
          y = pointY - boxHeight;
        }
        return [x, y];
      },
      show: true,
      textStyle: {
        fontSize: 14,
        color: "#fff",
      },
      className: "custom-tooltip-box",
      rich: {
        arrow: {
          backgroundColor: {
            image: getImageUrl("home/tool_tip_arrow.png"),
          },
        },
      },
      formatter: function (params: any) {
        let tipHtml = "";
        tipHtml = `
                    <div class="custom-tooltip-style">
                        <div class='custom-tooltip-name'> <span class="custom-tooltip-arrow"></span> ${
                          params.name
                        }</div>
                        <div class='custom-tooltip-style-box'>
                            <div class="ball">
                                <div class="ball-value">${
                                  params.data.satisfiedRate
                                }<span>%</span></div>
                                <div class="ball-text">满意率</div>
                            </div>
                            <div class="custom-tooltip-style-box-text">
                                <div class="custom-tooltip-style-box-text-item">在办工单：<span>${
                                  params.data.handlingCount
                                }</span> <b> 件</b></div>
                                <div class="custom-tooltip-style-box-text-item">已办工单：<span>${
                                  params.data.filedCount
                                }</span> <b> 件</b></div>
                                <div class="custom-tooltip-style-box-text-item">超期工单：<span>${
                                  params.data.overTimeCount
                                }</span> <b> 件</b></div>
                                <div class="custom-tooltip-style-box-text-item">高频热点：<span class="last">${
                                  params.data.hotspotName
                                    ? params.data.hotspotName
                                    : "-"
                                }</span></div>
                            </div>
                        </div>
                    </div>
                `;
        return tipHtml;
      },
    },
    geo: [
      {
        layoutCenter: ["50%", "50%"], //位置
        layoutSize: layoutSize, //大小
        show: true,
        map: regionCode,
        roam: false,
        zoom: 1,
        aspectScale: 1,
        label: {
          show: false,
        },
        itemStyle: {
          areaColor: {
            type: "linear",
            x: 1200,
            y: 0,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "rgba(38,134,132,0.35)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(38,134,132,0.75)", // 50% 处的颜色
              },
            ],
            global: true, // 缺省为 false
          },
          borderColor: "#c0f3fb",
          borderWidth: 1,
          shadowColor: "#8cd3ef",
          shadowOffsetY: 10,
          shadowBlur: 120,
        },
      },
      {
        type: "map",
        map: regionCode,
        aspectScale: 1,
        zoom: 1,
        layoutCenter: ["50%", "54%"],
        layoutSize: layoutSize,
        roam: false,
        silent: true,
        itemStyle: {
          borderWidth: 2,
          borderColor: "rgba( 38,134,132,0.8)",
          shadowColor: "rgba(29, 111, 165,0.8)",
          shadowOffsetY: 10,
          shadowBlur: 2,
          areaColor: "rgba(5,21,35,0.2)",
          borderType: "dashed",
        },
      },
    ],
    geo3D: [
      {
        show: false,
        map: regionCode,
        aspectScale: 1,
      },
    ],
    series: [
      {
        type: "map",
        map: regionCode, // 自定义扩展图表类型
        aspectScale: 1,
        zoom: 1,
        showLegendSymbol: true,
        boxDepth: 120, //地图倾斜度
        regionHeight: 3, //地图厚度
        label: {
          show: false,
        },
        itemStyle: {
          color: "rgba( 73,122,105,.3)",
          borderColor: "#3CFFFD",
          borderWidth: 1,
          areaColor: {
            color: "rgba( 73,122,105,.3)",
          },
        },
        emphasis: {
          // 选中的样式
          label: {
            formatter: ["{b|}"].join("\n"),

            rich: {
              b: {
                backgroundColor: {
                  image: arrow,
                },
                height: 60,
              },
            },
          },
          itemStyle: {
            borderColor: "rgba( 62, 254, 254,.3)",
            borderWidth: 2,
            areaColor: "rgba( 62, 254, 254,.3)",
          },
        },
        layoutCenter: ["50%", "50%"],
        layoutSize: layoutSize,
        data: list,
        select: {
          disabled: true,
        },
      },
    ],
  };
};