WholeProcessPlatform/frontend/src/components/iconDiv/index.vue

<template>
  <div v-if="renderContent" v-html="renderContent"></div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import moment from "moment";
// TODO: 请根据实际项目路径替换以下导入
// import { getThemee } from '@/utils/JdColor';
// import { transUnitRender, transUnit, getUnitConfigByCode } from '@/utils/unit.config';
// import { Session } from '@/utils/session'; // 假设的路径

// --- 占位工具函数 (请替换为真实实现) ---
const getThemee = (key: string) => {
  // 模拟返回颜色配置
  return { name: key, color: "#333", unit: "" };
};

const transUnitRender = (val: any, type: string, code: string) => {
  if (val == null) return "-";
  return val; // 简单返回，实际应进行单位转换
};

const transUnit = (val: any, type: string, code: string) => {
  if (val == null) return "-";
  return val;
};

const getUnitConfigByCode = (type: string, code: string) => {
  // 模拟返回单位配置
  const units: Record<string, string> = {
    ZJRL: "MW",
    FDLYKW: "亿kW·h",
    QI: "m³/s",
    QO: "m³/s",
    QECLIMIT: "m³/s",
    INTEMP: "℃",
    OUTTEMP: "℃",
    WTMP: "℃",
    WEI: "尾",
  };
  return { unit: units[code] || "" };
};

const Session = {
  getToken: () => ({ accessToken: "your-token-here" }), // 模拟 Token
  getAppCode: () => "hbb", // 模拟 App Code
};

// --- 常量定义 ---
const eqtpList: Record<string, string> = {
  "1": "生态放流孔",
  "2": "生态放流闸",
  "3": "生态放流洞",
  "4": "生态放流管",
  "5": "基荷发电",
  "6": "生态机组",
};

const dwtpList: Record<string, string> = {
  DW_1: "多层式进水口",
  DW_2: "叠梁门式进水口",
  DW_3: "翻板门式进水口",
  DW_4: "套筒式进水口",
  DW_5: "前置挡墙",
  DW_6: "隔水幕墙",
  DW_9: "其他设施",
};

const fptpList: Record<string, string> = {
  FP_1: "鱼道",
  FP_2: "仿自然通道",
  FP_3: "集运鱼系统",
  FP_4: "升鱼机",
  FP_5: "其它过鱼方式",
};

const locationList: Record<string, string> = {
  "1": "库尾",
  "2": "库中",
  "3": "坝前",
  "4": "坝下",
};

const allYs = [
  "CHLA",
  "CL",
  "CLARITY",
  "CODCR",
  "CODMN",
  "COND",
  "CYANO",
  "DOX",
  "FCG",
  "FID",
  "LAS",
  "NH3N",
  "NO3",
  "PH",
  "S2",
  "SE",
  "TN",
  "TP",
  "TU",
  "WTMP",
  "ZN",
];

const app = Session.getAppCode();
const timegj = [moment().subtract(7, "days").format("MM-DD"), moment().format("MM-DD")];
const env = (window as any).__env__;

// --- Props 定义 ---
interface IconDivProps {
  ennm?: string;
  stnm?: string;
  ttpwr?: string | number;
  yrge?: string | number;
  anchoPointState?: string;
  sttpMap?: string;
  tm?: string;
  wwqtg?: string;
  wqGrd?: string;
  sfdb?: string;
  stlc?: string;
  position?: string;
  eqtp?: string;
  limit?: string;
  qo?: string;
  qi?: string;
  normz?: string;
  rz?: string;
  ddz?: string;
  dz?: string;
  status?: string;
  inTemp?: string;
  outTemp?: string;
  temperature?: string;
  fishList?: any[];
  list?: any[];
  bldstt?: string;
  development?: string;
  targetNum?: string;
  actualNum?: string;
  rvnm?: string;
  typeNum?: string;
  rescueNum?: string;
  ph?: string;
  tp?: string;
  tn?: string;
  lgtd?: number;
  lttd?: number;
  targetCount?: string;
  buildCount?: string;
  location?: string;
  dtin?: number | string;
  stdSstate?: number | string;
  stdSstateName?: string;
  dtinName?: string;
  lcjStatus?: number | string;
  lcjStatusName?: string;
  bldsttCcode?: string;
  lastTmEngEqDataVo?: any;
  wtvtInfo?: any;
  deviceType?: string;
  enfc?: number;
  rvcdName?: string;
  wqGrdName?: string;
  wwqtgName?: string;
  year?: string;
  targetFtp?: string;
  actualFtp?: string;
  qecLimit?: any;
  vlsr?: string;
  fhstnm?: string;
  warnDataList?: any[];
  warnStateName?: string;
  dtmel?: string;
  logo?: string;
  name?: string;
  ftp?: string;
  z?: string;
  q?: string;
  v?: string;
  sttpName?: string;
  aiSttpName?: string;
  reachname?: string;
  wt?: string;
  yyyy?: string;
  stqCount?: number;
  wqCount?: number;
  zcount?: number;
  wtCount?: number;
  popName?: string;
  isHover?: boolean;
}

// const props = defineProps<IconDivProps>();
const props = {
  sttp: "ENG",
  stcd: "008660211200000001",
  lgtd: 98.958315,
  lttd: 30.754818,
  dtmel: 3793.292,
  anchoPointState: "large_eng_built",
  //   anchoPointState: "mid_eng_built",

  sttpMap: "ENG",
  titleName: "叶巴滩",
  distance: 50000000,
  rvcd: "SJLY46",
  addvcd: "542123",
  baseId: "01",
  rstcds: null,
  sttpCode: "ENG",
  ennm: "叶巴滩",
  rvnm: null,
  ttpwr: 2240,
  ddz: null,
  normz: 2889,
  qecLimit: null,
  yrge: 91.6,
  ifEngSpecial: false,
  avq: 839,
  endInstalledType: 1,
  lastTmEngEqDataVo: {
    stcd: "008660211200000001",
    stnm: "叶巴滩",
    tm: "2090-01-01 08:00:00",
    ttpwr: 2240,
    qecLimit: null,
    mwrLimit: null,
    avqLimit: null,
    qecC: null,
    mwrC: null,
    avqC: null,
    normz: 2889,
    ddz: null,
    qi: null,
    qo: null,
    rz: 2889,
    dz: null,
    vlsr: null,
    vlsrTm: null,
    mwrVlsr: null,
    mwrVlsrTm: null,
  },
  logo: null,
  addvcdName: "贡觉县",
  jcdt: null,
  siteStepSort: 0,
  prsc: 1,
  iconRotate: null,
  bldsttCcode: 2,
  rvcdStepSort: 1,
  rscdStepSort: null,
  stnm: "叶巴滩",
  iconCode: "map-dxsdzYijian",
  code: "pointLayer",
  popName: "叶巴滩",
  _id: "ENG_008660211200000001",
};
// --- 辅助函数 ---

const isNil = (val: any) => val == null;

const getStatusHtml = () => {
  const { dtin, stdSstate, stdSstateName, dtinName, lcjStatus, lcjStatusName } = props;
  const _dtin = `${dtin}`;
  const baseId = (window as any).__lyConfigs?.baseId;
  const _stdSstate = baseId === "07" || baseId === "02" ? `${lcjStatus}` : `${stdSstate}`;
  const _stdSstateName =
    baseId === "07" || baseId === "02" ? lcjStatusName : stdSstateName;

  //   if (_dtin === "0") {
  //     return `<span>${dtinName || "未接入"}</span>`;
  //   } else if (_dtin === "1" && _stdSstate === "1") {
  return `<span style="color: #76C500">${_stdSstateName || "正常运行"}</span>`;
  //   } else if (_dtin === "1" && _stdSstate === "3") {
  //     return `<span style="color: #FF6B6B">${_stdSstateName || "未正常运行"}</span>`;
  //   }
  return `<span>${_stdSstateName || "最近1年无数据"}</span>`;
};

const getLimitSpanHtml = (minVal: any, maxVal: any) => {
  if (!isNil(maxVal) && !isNil(minVal)) {
    return `<span style="color: rgba(255,255,255,0.45)">(${minVal}~${maxVal})</span>`;
  } else if (!isNil(maxVal)) {
    return `<span style="color: rgba(255,255,255,0.45)">(≤${maxVal})</span>`;
  } else if (!isNil(minVal)) {
    return `<span style="color: rgba(255,255,255,0.45)">(≥${minVal})</span>`;
  }
  return "";
};

const needNotShow = (minVal: any, maxVal: any, val: any) => {
  const _min = isNil(minVal) ? null : Number(minVal);
  const _max = isNil(maxVal) ? null : Number(maxVal);
  const _val = isNil(val) ? null : Number(val);
  if (isNil(_val)) return true;
  if (!isNil(_max) && !isNil(_min)) return _val >= _min && _val <= _max;
  if (!isNil(_max)) return _val <= _max;
  if (!isNil(_min)) return _val >= _min;
  return true;
};

const getYsListHtml = () => {
  let html = "";
  allYs.forEach((ys: any) => {
    const _ys = ys.toLowerCase();
    const val = (props as any)[_ys];
    const ystheme = getThemee(ys);
    const ysUpper = ys.toUpperCase();

    let minVal, maxVal;
    const ysLimit = props; // 假设 props 上直接挂了 min/max 字段，或者需要从特定字段解析

    // 模拟解析 min/max，实际需根据数据结构调整
    if ((ysLimit as any).min) {
      // 简化处理，实际可能需要 JSON.parse
      minVal = (ysLimit as any).min;
    }
    if ((ysLimit as any).max) {
      maxVal = (ysLimit as any).max;
    }

    if (!needNotShow(minVal, maxVal, val)) {
      const unit =
        ysUpper === "PH"
          ? ""
          : getUnitConfigByCode("WQ_R", ysUpper)?.unit || ystheme?.unit || "";
      html += `
        <li>
          <div class="__label">${ystheme?.name}：</div>
          <span style="color: #E55555">
            ${val} ${unit}
            ${getLimitSpanHtml(minVal, maxVal)}
          </span>
        </li>
      `;
    }
  });
  return html;
};

const getStateClass = () => {
  let setclass = "";
  if (props?.anchoPointState) {
    if (
      props.anchoPointState.includes("large_eng") ||
      props.anchoPointState.includes("eef_1")
    ) {
      setclass = "large_eng";
    } else if (
      props.anchoPointState.includes("mid_eng") ||
      props.anchoPointState.includes("eef_2")
    ) {
      setclass = "mid_eng";
    } else {
      setclass = "large_eng";
    }
  } else {
    setclass = "large_eng";
  }
  if (props?.ennm && props.ennm.length > 3) {
    setclass += " smallfont";
  }
  if (props?.ttpwr && `${transUnitRender(props.ttpwr, "Other", "ZJRL")}`.length > 4) {
    setclass += " leftsmallfont";
  }
  if (
    (props?.yrge && `${transUnitRender(props.yrge, "Other", "FDLYKW")}`.length > 4) ||
    (props?.limit && `${props.limit}`.length > 4)
  ) {
    setclass += " rightsmallfont";
  }
  return setclass;
};

const getImageUrl = (logo: string) => {
  if (!logo) return "";
  const token = Session.getToken()?.accessToken;
  const fsAddress = (window as any).__fsAddress || "";
  return `${fsAddress}?${logo}&view=jpg&token=${token}`;
};

// --- 核心渲染逻辑 ---

const renderContent = computed(() => {
  const p = props;
  const dzFdl = getUnitConfigByCode("Other", "FDLYKW")?.unit;
  const dzZjrl = getUnitConfigByCode("Other", "ZJRL")?.unit;

  // 模拟 Utility.parseQueryString
  const urlParams = new URLSearchParams(window.location.search);
  const page = urlParams.get("page") || "";

  let newsttpMap = p.sttpMap;
  //   if (newsttpMap == "ENG") {
  //     if (
  //       (p?.anchoPointState?.indexOf("_eng_") !== -1 && !p?.isHover) ||
  //       p?.anchoPointState?.indexOf("eef_") !== -1
  //     ) {
  //       newsttpMap = "eng2";
  //     } else if (page == "shuiWenFenXi") {
  //       newsttpMap = "eng3";
  //     } else if (page == "renGongFangLiu") {
  //       newsttpMap = "eng4";
  //     }
  //   }
  console.log(newsttpMap);

  let html = "";

  switch (newsttpMap) {
    case "ENG":
      html = `
          <div class=" ${"iconEngDiv_" + props.anchoPointState} ${
        "iconEngDiv-" + props.anchoPointState + "-" + props?.bldsttCcode
      }">
            <div class="iconDivTitle">${p?.ennm || p?.stnm}</div>
            <div class="iconDivContent">
              <div class="iconDivLeft">
                <div>${transUnitRender(p?.ttpwr, "Other", "ZJRL")}</div>
                <div style="font-size: 12px">${dzZjrl || "万kW"}</div>
              </div>
              <div class="iconDivRight">
                <div>${transUnitRender(p?.yrge, "Other", "FDLYKW")}</div>
                <div style="font-size: 12px">${dzFdl || "亿kW·h"}</div>
              </div>
            </div>
          </div>
        `;
      break;

    case "eng1":
      if (p?.anchoPointState == "eef_1_none" || p?.anchoPointState == "eef_2_none") {
        html = `
          <div class="iconDiv ${getStateClass()} ${p?.anchoPointState || ""}">
            <div class="iconDivTitle">${p?.ennm || p?.stnm}</div>
            <div class="iconDivContent">暂无数据</div>
          </div>
        `;
      } else {
        html = `
          <div class="iconDiv ${getStateClass()} ${p?.anchoPointState || ""}">
            <div class="iconDivTitle">${p?.ennm || p?.stnm}</div>
            <div class="iconDivContent">
              <div class="iconDivLeft">${transUnitRender(p?.ttpwr, "Other", "ZJRL")}</div>
              <div class="iconDivRight">${p?.limit}</div>
            </div>
          </div>
        `;
      }
      break;

    case "eng2": {
      let lastTmEngEqDataVo: any = {};
      if (typeof p?.lastTmEngEqDataVo == "string") {
        lastTmEngEqDataVo = JSON.parse(p.lastTmEngEqDataVo);
      } else {
        lastTmEngEqDataVo = p.lastTmEngEqDataVo;
      }
      if (!lastTmEngEqDataVo?.qo && !lastTmEngEqDataVo?.qi) return "";

      const baseId = (window as any).__lyConfigs?.baseId;
      const qiHtml =
        baseId !== "02" && lastTmEngEqDataVo?.qi != null && lastTmEngEqDataVo?.qi !== ""
          ? `
        <li>
          <div class="__label">入库流量：</div>
          <div class="__info">
            ${transUnitRender(lastTmEngEqDataVo?.qi, "HYDROPW_R", "QI")} ${
              getUnitConfigByCode("HYDROPW_R", "QI")?.unit
            }
          </div>
        </li>
      `
          : "";

      const qecLimitVal = lastTmEngEqDataVo?.qecLimit;
      let qecLimitDisplay = "-";
      if (qecLimitVal == 0 || qecLimitVal == null) {
        qecLimitDisplay = app == "hbb" ? "-" : "无生态流量要求";
      } else {
        qecLimitDisplay = `${transUnitRender(qecLimitVal, "HYDROPW_R", "QECLIMIT")} ${
          getUnitConfigByCode("HYDROPW_R", "QECLIMIT")?.unit
        }`;
      }

      const vlsrHtml = lastTmEngEqDataVo?.vlsr
        ? `<li><div>限值来源：${lastTmEngEqDataVo?.vlsr}</div></li>`
        : "";

      html = `
        <div class="map-tooltip map-tooltip-middle">
          <div class="map-tooltip-box">
            <div class="map-tooltip-title">${p?.ennm || p?.stnm}</div>
            <div class="map-tooltip-sub">${lastTmEngEqDataVo?.tm ?? ""}</div>
            <ul class="map-tooltip-content map-tooltip-list">
              ${qiHtml}
              <li>
                <div class="__label">${baseId == "02" ? "生态流量：" : "出库流量："}</div>
                <div class="__info">
                  ${transUnitRender(lastTmEngEqDataVo?.qo, "HYDROPW_R", "QO")} ${
        getUnitConfigByCode("HYDROPW_R", "QO")?.unit
      }
                </div>
              </li>
              <li>
                <div class="__label">生态流量限值：</div>
                <div class="__info">${qecLimitDisplay}</div>
              </li>
              ${vlsrHtml}
            </ul>
          </div>
        </div>
      `;
      break;
    }

    case "eng3":
      html = `
        <div class="map-tooltip map-tooltip-small">
          <div class="map-tooltip-box">
            <div class="map-tooltip-title">${p?.ennm || p?.stnm}</div>
            <div class="map-tooltip-sub">${p?.tm ?? ""}</div>
            <ul class="map-tooltip-content map-tooltip-list">
              <li>
                <div class="__label">入库水温：</div>
                <div class="__info">
                  ${transUnitRender(p?.inTemp, "WTRV_R", "INTEMP") ?? "-"} ${
        getUnitConfigByCode("WTRV_R", "INTEMP")?.unit
      }
                </div>
              </li>
              <li>
                <div class="__label">出库水温：</div>
                <div class="__info">
                  ${transUnitRender(p?.outTemp, "WTRV_R", "OUTTEMP") ?? "-"} ${
        getUnitConfigByCode("WTRV_R", "OUTTEMP")?.unit
      }
                </div>
              </li>
            </ul>
          </div>
        </div>
      `;
      break;

    case "eng4": {
      let devStatusHtml = "<span>数据未接入</span>";
      if (p?.development == "未完成")
        devStatusHtml = '<span style="color: #FF6B6B">未完成</span>';
      else if (p?.development == "未填报")
        devStatusHtml = '<span style="color: #F0CC1D">未填报</span>';
      else if (p?.development == "已完成")
        devStatusHtml = '<span style="color: #76C500">已完成</span>';

      const targetInfo = p.targetNum
        ? `${p?.targetFtp || "-"}种/${p?.targetNum || "-"}万尾`
        : "--";
      const actualInfo = p.actualNum
        ? `${p?.actualFtp || "-"}种/${p?.actualNum || "-"}万尾`
        : "--";

      html = `
        <div class="map-tooltip">
          <div class="map-tooltip-box">
            <div class="map-tooltip-title">${p?.ennm || p?.stnm || p?.popName}</div>
            <ul class="map-tooltip-content map-tooltip-list">
              <li>
                <div class="__label">年份：</div>
                <div class="__info">${p?.year || "-"}</div>
              </li>
              <li>
                <div class="__label">目标放流种类/数量：</div>
                <div class="__info">${targetInfo}</div>
              </li>
              <li>
                <div class="__label">实际放流种类数量：</div>
                <div class="__info">${actualInfo}</div>
              </li>
              <li>
                <div class="__label">工作开展情况：</div>
                <div class="__info">${devStatusHtml}</div>
              </li>
            </ul>
          </div>
        </div>
      `;
      break;
    }

    case "VA": {
      const hbbLi =
        app == "hbb"
          ? `
        <li>
          <div class="__label">接入状态：</div>
          <div class="__info">${
            p?.dtin === 0 ? "未接入" : p?.dtin === 1 ? "已接入" : "-"
          }</div>
        </li>
      `
          : "";

      html = `
        <div class="map-tooltip map-tooltip-small">
          <div class="map-tooltip-box">
            <div class="map-tooltip-title">${p?.stnm}</div>
            <ul class="map-tooltip-content map-tooltip-list">
              <li>
                <div class="__label">建设状态：</div>
                <div class="__info">
                  ${
                    p?.bldsttCcode == "0"
                      ? "未建"
                      : p?.bldsttCcode == "1"
                      ? "在建"
                      : p?.bldsttCcode == "2"
                      ? "已建"
                      : "-"
                  }
                </div>
              </li>
              <li>
                <div class="__label">关联电站：</div>
                <div class="__info">${p?.ennm}</div>
              </li>
              ${hbbLi}
            </ul>
          </div>
        </div>
      `;
      break;
    }

    case "DW":
    case "DW_1":
    case "DW_2":
    case "DW_3":
    case "DW_4":
    case "DW_5":
    case "DW_6":
    case "DW_9":
      html = `
        <div class="map-tooltip map-tooltip-small">
          <div class="map-tooltip-box">
            <div class="map-tooltip-title">${p?.stnm}</div>
            <ul class="map-tooltip-content map-tooltip-list">
              <li>
                <div class="__label">设施类型：</div>
                <div class="__info">${p?.sttpMap ? dwtpList[p.sttpMap] || "-" : "-"}</div>
              </li>
              <li>
                <div class="__label">关联电站：</div>
                <div class="__info">${p?.ennm}</div>
              </li>
              <li>
                <div class="__label">运行状态：</div>
                <div class="__info">${getStatusHtml()}</div>
              </li>
            </ul>
          </div>
        </div>
      `;
      break;

    case "FP":
    case "FP_1":
    case "FP_2":
    case "FP_3":
    case "FP_4":
    case "FP_5":
      html = `
        <div class="map-tooltip map-tooltip-small">
          <div class="map-tooltip-box">
            <div class="map-tooltip-title">${p?.stnm}</div>
            <ul class="map-tooltip-content map-tooltip-list">
              <li>
                <div class="__label">设施类型：</div>
                <div class="__info">${p?.dwtp ? fptpList[p.dwtp] : "-"}</div>
              </li>
              <li>
                <div class="__label">建设状态：</div>
                <div class="__info">${
                  p?.bldstt == "0"
                    ? "未建"
                    : p?.bldstt == "1"
                    ? "在建"
                    : p?.bldstt == "2"
                    ? "已建"
                    : "-"
                }</div>
              </li>
              <li>
                <div class="__label">运行状态：</div>
                <div class="__info">${getStatusHtml()}</div>
              </li>
              <li>
                <div class="__label">关联电站：</div>
                <div class="__info">${p?.ennm}</div>
              </li>
            </ul>
          </div>
        </div>
      `;
      break;

    case "FB":
      html = `
        <div class="map-tooltip map-tooltip-small">
          <div class="map-tooltip-box">
            <div class="map-tooltip-title">${p?.stnm}</div>
            <ul class="map-tooltip-content map-tooltip-list">
              <li>
                <div class="__label">建设状态：</div>
                <div class="__info">${
                  p?.bldstt == "0"
                    ? "未建"
                    : p?.bldstt == "1"
                    ? "在建"
                    : p?.bldstt == "2"
                    ? "已建"
                    : "-"
                }</div>
              </li>
              <li>
                <div class="__label">运行状态：</div>
                <div class="__info">${getStatusHtml()}</div>
              </li>
              <li>
                <div class="__label">服务电站：</div>
                <div class="__info">${p?.ennm}</div>
              </li>
            </ul>
          </div>
        </div>
      `;
      break;

    case "EQ":
      html = `
        <div class="map-tooltip map-tooltip-small">
          <div class="map-tooltip-box">
            <div class="map-tooltip-title">${p?.ennm || p?.stnm}</div>
            <ul class="map-tooltip-content map-tooltip-list">
              <li>
                <div class="__label">设施类型：</div>
                <div class="__info">${p?.eqtp ? eqtpList[p.eqtp] : "-"}</div>
              </li>
              <li>
                <div class="__label" style="flex: 0 0 110px; width: 110px">生态流量限值：</div>
                <div class="__info">${p?.qecLimit}</div>
              </li>
            </ul>
          </div>
        </div>
      `;
      break;

    case "WT": {
      let wtvtInfo: any = {};
      if (typeof p?.wtvtInfo == "string") {
        wtvtInfo = JSON.parse(p.wtvtInfo);
      } else {
        wtvtInfo = p.wtvtInfo;
      }
      const tt = p?.deviceType == "1" ? "水深" : "高程";
      const sizeClass = p.enfc === 0 ? "small" : "middle";

      if (p.enfc === 0) {
        html = `
          <div class="map-tooltip map-tooltip-${sizeClass}">
            <div class="map-tooltip-box">
              <div class="map-tooltip-title">${p?.stnm ?? "-"}</div>
              <div class="map-tooltip-sub">${p?.tm ?? ""}</div>
              <ul class="map-tooltip-content map-tooltip-list">
                <li>
                  <div class="__label">水温：</div>
                  <div class="__info">
                    ${transUnit(p?.temperature, "WQ_R", "WTMP") ?? "-"}
                    ${getUnitConfigByCode("WQ_R", "WTMP")?.unit}
                  </div>
                </li>
              </ul>
            </div>
          </div>
        `;
      } else {
        html = `
          <div class="map-tooltip map-tooltip-${sizeClass}">
            <div class="map-tooltip-box">
              <div class="map-tooltip-title">${p?.stnm}</div>
              <div class="map-tooltip-sub">${wtvtInfo?.tm ?? ""}</div>
              <ul class="map-tooltip-content map-tooltip-list">
                <li>
                  <div class="__label">
                    ${tt} ${transUnit(wtvtInfo?.minWthg, "WQ_R", "WTMP") || "-"}m：
                  </div>
                  <div class="__info">
                    ${transUnit(wtvtInfo?.minWthgWt, "WQ_R", "WTMP")}
                    ${getUnitConfigByCode("WQ_R", "WTMP")?.unit}
                  </div>
                </li>
                <li>
                  <div class="__label">平均水温：</div>
                  <div class="__info">
                    ${transUnit(wtvtInfo?.avgWt, "WQ_R", "WTMP")}
                    ${getUnitConfigByCode("WQ_R", "WTMP")?.unit}
                  </div>
                </li>
                <li>
                  <div class="__label">
                    ${tt} ${transUnit(wtvtInfo?.maxWthg, "WQ_R", "WTMP") || "-"}m：
                  </div>
                  <div class="__info">
                    ${transUnit(wtvtInfo?.maxWthgWt, "WQ_R", "WTMP")}
                    ${getUnitConfigByCode("WQ_R", "WTMP")?.unit}
                  </div>
                </li>
              </ul>
            </div>
          </div>
        `;
      }
      break;
    }

    case "FH": {
      const baseId = (window as any).__lyConfigs?.baseId;
      const ennmLi =
        baseId === "all"
          ? ""
          : `
        <li>
          <div class="__label">关联电站：</div>
          <div class="__info">${p?.ennm || "-"}</div>
        </li>
      `;
      html = `
        <div class="map-tooltip map-tooltip-small">
          <div class="map-tooltip-box">
            <div class="map-tooltip-title">${p?.stnm}</div>
            <ul class="map-tooltip-content map-tooltip-list">
              <li>
                <div class="__label">所在河流：</div>
                <div class="__info">${p?.rvcdName || "-"}</div>
              </li>
              ${ennmLi}
            </ul>
          </div>
        </div>
      `;
      break;
    }

    case "WQFB":
    case "WQ": {
      const wqGrdTheme = getThemee(p.wqGrdName);
      const wwqtgTheme = getThemee(p.wwqtgName);

      html = `
        <div class="map-tooltip">
          <div class="map-tooltip-box">
            <div class="map-tooltip-title">${p.stnm}</div>
            <ul class="map-tooltip-sub map-tooltip-list">
              <li>
                <div class="__label">监测时间：</div>
                <div class="__info">${p?.tm ?? "-"}</div>
              </li>
              <li>
                <div class="__label">水质等级：</div>
                <div class="__info">
                  <span style="color: ${wqGrdTheme?.color}">${
        wqGrdTheme?.name ?? "-"
      }类</span>
                  (目标等级 <span style="color: ${wwqtgTheme?.color}">${
        wwqtgTheme?.name ?? "-"
      }类</span>)
                </div>
              </li>
            </ul>
            <ul class="map-tooltip-content map-tooltip-list">
              ${getYsListHtml()}
            </ul>
          </div>
        </div>
      `;
      break;
    }

    case "WE": {
      const mergedFishList: any[] = [];
      const fishList =
        typeof p.fishList === "string" ? JSON.parse(p.fishList) : p.fishList;
      fishList?.forEach((item: any) => {
        const existingItem = mergedFishList.find(
          (mergedItem: any) => mergedItem.fishName === item.fishName
        );
        if (existingItem) {
          existingItem.count += item.count;
        } else {
          mergedFishList.push({ ...item });
        }
      });

      let fishItemsHtml = "";
      if (mergedFishList.length > 0) {
        mergedFishList.slice(0, 3).forEach((item: any) => {
          fishItemsHtml += `
            <li>
              <div class="__label">${item.fishName}：</div>
              <div class="__info">
                ${transUnitRender(item.count, "Other", "WEI")}
                ${getUnitConfigByCode("Other", "WEI")?.unit}
              </div>
            </li>
          `;
        });
      } else {
        fishItemsHtml = "<li>暂无数据</li>";
      }

      if (mergedFishList.length > 3) {
        fishItemsHtml += `<li><div style="text-align: center; flex: 0 0 100%; width: 100%">...</div></li>`;
      }

      html = `
        <div class="map-tooltip map-tooltip-middle">
          <div class="map-tooltip-box">
            <div class="map-tooltip-title">${p.stnm}</div>
            <ul class="map-tooltip-sub map-tooltip-list __list2">
              <li>
                <div class="__label">调查时间：</div>
                <div class="__info">${p?.tm ?? "-"}</div>
              </li>
              <li>
                <div class="__label">关联电站：</div>
                <div class="__info">${p?.ennm ?? "-"} </div>
              </li>
            </ul>
            <div class="map-tooltip-sub1">
              <span class="__content">调查鱼类</span>
            </div>
            <ul class="map-tooltip-content map-tooltip-list __noborder __small __list2">
              ${fishItemsHtml}
            </ul>
          </div>
        </div>
      `;
      break;
    }

    case "WE_FISH": {
      const fishData =
        typeof p.fishList === "string" ? JSON.parse(p.fishList) : p.fishList;
      const imgUrl = getImageUrl(p.logo);
      const imgHtml = p.logo
        ? `<img style="width: 100px; object-fit: cover; margin-right: 10px" src="${imgUrl}" alt="" />`
        : `<div style="width: 100px; object-fit: cover; margin-right: 10px">暂无图片</div>`;

      let yearsHtml = "";
      fishData?.forEach((item: any) => {
        yearsHtml += `
          <div class="__label">
            ${item.year}：${transUnitRender(item.count, "Other", "WEI")}
            ${getUnitConfigByCode("Other", "WEI")?.unit}
          </div>
        `;
      });

      html = `
        <div class="map-tooltip map-tooltip-middle">
          <div class="map-tooltip-box">
            <div style="display: flex; justify-content: center">
              ${imgHtml}
              <div style="text-align: left">
                <div>${fishData?.[0]?.fishName}</div>
                <div>${yearsHtml}</div>
              </div>
            </div>
          </div>
        </div>
      `;
      break;
    }

    case "TE": {
      let listItemsHtml = "";
      if (p.list?.length > 0) {
        p.list.slice(0, 3).forEach((item: any) => {
          listItemsHtml += `
            <li>
              <div class="__label">${item.name}：</div>
              <div class="__info">${item.amount}k㎡</div>
            </li>
          `;
        });
      } else {
        listItemsHtml = "<li>暂无数据</li>";
      }

      html = `
        <div class="map-tooltip map-tooltip-middle">
          <div class="map-tooltip-box">
            <div class="map-tooltip-title">${p.stnm}</div>
            <ul class="map-tooltip-sub map-tooltip-list __list2">
              <li>
                <div class="__label">调查时间：</div>
                <div class="__info">${p?.tm ?? "-"}</div>
              </li>
              <li>
                <div class="__label">关联电站：</div>
                <div class="__info">${p?.ennm ?? "-"} </div>
              </li>
            </ul>
            <div class="map-tooltip-sub1">
              <span class="__content">调查结果</span>
            </div>
            <ul class="map-tooltip-content map-tooltip-list __noborder __small">
              ${listItemsHtml}
            </ul>
          </div>
        </div>
      `;
      break;
    }

    case "VP":
      html = `
        <div class="map-tooltip map-tooltip-small">
          <div class="map-tooltip-box">
            <div class="map-tooltip-title">${p.stnm}</div>
            <ul class="map-tooltip-content map-tooltip-list">
              <li>
                <div class="__label">建设状态：</div>
                <div class="__info">${
                  p.bldsttCcode == "0"
                    ? "未建"
                    : p.bldsttCcode == "1"
                    ? "在建"
                    : p.bldsttCcode == "2"
                    ? "已建"
                    : "-"
                }</div>
              </li>
              <li>
                <div class="__label">关联电站：</div>
                <div class="__info">${p.ennm}</div>
              </li>
            </ul>
          </div>
        </div>
      `;
      break;

    case "ENG_ALARM": {
      const sizeClass = app === "hbb" ? "small" : "middle";
      const timeRange =
        app == "hbb" ? `${p?.yyyy ?? "-"}年` : `${timegj[0]}~${timegj[1]}`;

      let extraLi = "";
      if (
        env !== "ddh" &&
        env !== "ddhpro" &&
        app !== "hbb" &&
        env !== "ylj" &&
        env !== "yljpro"
      ) {
        extraLi += `
          <li>
            <div class="__label" style="flex: 0 0 100px; width: 100px">水位告警：</div>
            <div class="__info${p?.zcount > 0 ? " __warn" : ""}">${
          p?.zcount ?? "-"
        } 次</div>
          </li>
        `;
      }
      if (app !== "hbb" && env !== "ylj" && env !== "yljpro") {
        extraLi += `
          <li>
            <div class="__label" style="flex: 0 0 100px; width: 100px">水温告警：</div>
            <div class="__info${p?.wtCount > 0 ? " __warn" : ""}">${
          p?.wtCount ?? "-"
        } 次</div>
          </li>
        `;
      }

      html = `
        <div class="map-tooltip map-tooltip-${sizeClass}">
          <div class="map-tooltip-box">
            <div class="map-tooltip-title">${p.ennm}</div>
            <div class="map-tooltip-sub1">
              <span class="__content">电站告警统计</span>
            </div>
            <ul class="map-tooltip-content map-tooltip-list __noborder">
              <li>
                <div class="__label" style="flex: 0 0 100px; width: 100px">
                  ${app == "hbb" ? "统计年份" : "统计时间范围"}：
                </div>
                <div class="__info">${timeRange}</div>
              </li>
              <li>
                <div class="__label" style="flex: 0 0 100px; width: 100px">生态流量告警：</div>
                <div class="__info${p?.stqCount > 0 ? " __warn" : ""}">${
        p?.stqCount ?? "-"
      } 次</div>
              </li>
              <li>
                <div class="__label" style="flex: 0 0 100px; width: 100px">水质告警：</div>
                <div class="__info${p?.wqCount > 0 ? " __warn" : ""}">${
        p?.wqCount ?? "-"
      } 次</div>
              </li>
              ${extraLi}
            </ul>
          </div>
        </div>
      `;
      break;
    }

    case "ylfb":
      html = `
        <div class="map-tooltip">
          <div class="map-tooltip-box">${p?.ftp ?? "-"}</div>
        </div>
      `;
      break;

    case "ZQ":
      html = `
        <div class="map-tooltip map-tooltip-small">
          <div class="map-tooltip-box">
            <div class="map-tooltip-title">${p?.stnm + "流量站"}</div>
            <div class="map-tooltip-sub">${p?.tm ?? ""}</div>
            <ul class="map-tooltip-content map-tooltip-list">
              <li>
                <div class="__label">水位(m)：</div>
                <div class="__info">${p?.z ?? "-"}</div>
              </li>
              <li>
                <div class="__label">流量(m³/s)：</div>
                <div class="__info">${p?.q ?? "-"}</div>
              </li>
              <li>
                <div class="__label">流速(m/s)：</div>
                <div class="__info">${p?.v ?? "-"}</div>
              </li>
            </ul>
          </div>
        </div>
      `;
      break;

    case "VD":
    case "AIVD": {
      const baseId = (window as any).__lyConfigs?.baseId;
      const habitatLi =
        p?.ennm === null && p?.fhstnm === null
          ? ""
          : p?.ennm === null
          ? `<li><div class="__label">所属栖息地：</div><div class="__info">${p?.fhstnm}</div></li>`
          : baseId === "all"
          ? ""
          : `<li><div class="__label">关联电站：</div><div class="__info">${p?.ennm}</div></li>`;

      html = `
        <div class="map-tooltip">
          <div class="map-tooltip-box">
            <div class="map-tooltip-title">${
              p?.stnm?.endsWith("视频站") ? p?.stnm : p?.stnm + "视频站"
            }</div>
            <ul class="map-tooltip-content map-tooltip-list">
              <li>
                <div class="__label">监控内容类型：</div>
                <div class="__info">${
                  newsttpMap == "VD" ? p?.sttpName : p?.aiSttpName
                }</div>
              </li>
              ${habitatLi}
            </ul>
          </div>
        </div>
      `;
      break;
    }

    case "REACH": {
      const wwqtgTheme = getThemee(p?.wwqtgName);
      const wqGrdTheme = getThemee(p?.wqGrdName);
      html = `
        <div class="map-tooltip map-tooltip-small">
          <div class="map-tooltip-box">
            <div class="map-tooltip-title">${p?.reachname}</div>
            <div class="map-waterQuality-subtitle">
              <div class="map-waterQuality-leftType">
                水质要求<br/>
                <span style="color: ${wwqtgTheme?.color}">${
        wwqtgTheme?.name || "-"
      }</span> 类
              </div>
              <div class="map-waterQuality-rightType">
                监测结果<br/>
                <span style="color: ${wqGrdTheme?.color}">${
        wqGrdTheme?.name || "-"
      }</span> 类
              </div>
            </div>
          </div>
        </div>
      `;
      break;
    }

    case "WT_ALARM":
      html = `
        <div class="map-tooltip map-tooltip-small">
          <div class="map-tooltip-box">
            <div class="map-tooltip-title">${p?.stnm || p?.ennm}</div>
            <div class="map-tooltip-sub">${p?.tm ?? ""}</div>
            <ul class="map-tooltip-content map-tooltip-list">
              <li>
                <div class="__label">水温：</div>
                <div class="__info">${p?.wt ?? "-"} ℃</div>
              </li>
            </ul>
          </div>
        </div>
      `;
      break;

    case "WQ_ALARM": {
      let warnItems = "";
      p.warnDataList?.forEach((item: any) => {
        const theme = getThemee(item.ys);
        warnItems += `
          <li>
            <div class="__label">${theme.name}：</div>
            <div class="__info">
              ${item.ssz} ${getUnitConfigByCode("WQ_R", item.ys)?.unit}
            </div>
          </li>
        `;
      });
      html = `
        <div class="map-tooltip map-tooltip-small">
          <div class="map-tooltip-box">
            <div class="map-tooltip-title">${p?.stnm || p?.ennm}</div>
            <div class="map-tooltip-sub">${p?.warnDataList?.[0]?.tm ?? ""}</div>
            <ul class="map-tooltip-content map-tooltip-list">
              ${warnItems}
            </ul>
          </div>
        </div>
      `;
      break;
    }

    case "RZ_ALARM":
      html = `
        <div class="map-tooltip map-tooltip-small">
          <div class="map-tooltip-box">
            <div class="map-tooltip-title">${p?.ennm || p?.stnm}</div>
            <div class="map-tooltip-sub">${p?.tm ?? ""}</div>
            <ul class="map-tooltip-content map-tooltip-list">
              <li>
                <div class="__label">水位：</div>
                <div class="__info">${p?.rz ?? "-"} m</div>
              </li>
            </ul>
          </div>
        </div>
      `;
      break;

    case "OPERAT_ALARM":
      html = `
        <div class="map-tooltip map-tooltip-small">
          <div class="map-tooltip-box">
            <div class="map-tooltip-title">${p?.ennm || p?.stnm}</div>
            <div class="map-tooltip-sub">${p?.dtmel ?? ""}</div>
            <ul class="map-tooltip-content map-tooltip-list">
              <li>
                <div class="__label">运行情况：</div>
                <div class="__info">${p?.warnStateName ?? "-"}</div>
              </li>
            </ul>
          </div>
        </div>
      `;
      break;

    case "WVA":
    case "FD":
      html = `
        <div class="map-tooltip map-tooltip-small">
          <div class="map-tooltip-box">${p.stnm}</div>
        </div>
      `;
      break;

    case "TE_ANIMALS": {
      let _pic: string[] = [];
      if (p.logo) {
        _pic = [p]
          .filter((item: any) => item.logo !== null)
          .map((item: any) => item.logo?.split(","))
          .flat();
      }
      const imgUrl = _pic?.[0] ? getImageUrl(_pic[0]) : "";
      const imgHtml = _pic?.[0]
        ? `<img style="width: 100px; object-fit: cover; margin-right: 10px" src="${imgUrl}" alt="" />`
        : `<div style="width: 100px; object-fit: cover; margin-right: 10px">暂无图片</div>`;

      html = `
        <div class="map-tooltip map-tooltip-middle">
          <div class="map-tooltip-box">
            <div style="display: flex; justify-content: center">
              ${imgHtml}
            </div>
            <div style="text-align: center">
              <div>${p?.name}</div>
            </div>
          </div>
        </div>
      `;
      break;
    }

    default:
      html = `
        <div class="map-tooltip map-tooltip-small">
          <div class="map-tooltip-box">${p.ennm || p.stnm}</div>
        </div>
      `;
  }

  return html ? `<div>${html}</div>` : "";
});
</script>

<style lang="scss">
.map-tooltip {
  height: auto;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  position: relative;
  padding: 24px 0 25px;
  // width: 279px;
  width: 260px;

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 24px;
    background: url(@/assets/images/mapTip/top@260.png) center no-repeat;
    filter: opacity(75%);
  }

  &::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 25px;
    background: url(@/assets/images/mapTip/bottom@260.png) center no-repeat;
    filter: opacity(75%);
  }

  &-box {
    padding: 0 12px;
    &::before {
      content: "";
      position: absolute;
      top: 24px;
      bottom: 25px;
      left: 0;
      right: 0;
      z-index: -1;
      background: url(@/assets/images/mapTip/center@260.png) repeat-y;
      filter: opacity(75%);
    }
  }

  &-title {
    font-size: 16px;
    font-weight: 500;
  }

  &-list {
    font-size: 14px;
    line-height: 1.5;

    > li {
      display: flex;
      text-align: left;

      .__label {
        flex: 0 0 100px;
        width: 100px;
        text-align: right;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .__warn {
        color: #ff4d4f;
      }
    }
  }

  &-content {
    margin-top: 10px;
    border-top: 1px dashed #12aaeb;
    padding: 10px 0;
    margin: 10px 0 0;
    &.__noborder {
      border: none;
      margin-top: 6px;
    }
    &.__small {
      font-size: 12px;
    }
  }

  &-sub {
    margin: 0;
    padding: 10px 0 0;
    text-align: center;
  }
  &-sub1 {
    text-align: center;
    position: relative;
    height: 1px;
    border-bottom: 1px dashed #12aaeb;
    margin-top: 16px;
    .__content {
      position: absolute;
      top: -9px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgb(88 110 134);
      padding: 0 6px;
      font-size: 12px;
      border-radius: 3px;
      white-space: nowrap;
    }
  }
  &.map-tooltip-small {
    width: 175px;
    padding: 18px 0 18px;
    &::after {
      background-image: url(@/assets/images/mapTip/top@175.png);
      height: 18px;
      filter: opacity(75%);
    }
    &::before {
      background-image: url(@/assets/images/mapTip/bottom@175.png);
      height: 18px;
      filter: opacity(75%);
    }
    .map-tooltip-box {
      padding: 0 10px;
      &::before {
        content: "";
        position: absolute;
        top: 18px;
        bottom: 18px;
        left: 0;
        right: 0;
        z-index: -1;
        background-image: url(@/assets/images/mapTip/center@175.png);
        filter: opacity(75%);
      }
    }
    .map-tooltip-list {
      > li {
        .__label {
          flex: 0 0 80px;
          width: 80px;
        }
      }
    }
  }

  &.map-tooltip-middle {
    width: 215px;
    padding: 18px 0 18px;
    &::after {
      background-image: url(@/assets/images/mapTip/top@215.png);
      height: 18px;
      filter: opacity(75%);
    }
    &::before {
      background-image: url(@/assets/images/mapTip/bottom@215.png);
      height: 18px;
      filter: opacity(75%);
    }
    .map-tooltip-box {
      padding: 0 10px;
      &::before {
        content: "";
        position: absolute;
        top: 18px;
        bottom: 18px;
        left: 0;
        right: 0;
        z-index: -1;
        background-image: url(@/assets/images/mapTip/center@215.png);
        filter: opacity(75%);
      }
    }
    .map-tooltip-list {
      > li {
        .__label {
          flex: 0 0 110px;
          width: 110px;
        }
      }
      &.__list2 {
        > li {
          .__label {
            flex: 0 0 90px;
            width: 90px;
          }
        }
      }
    }
  }

  .map-waterQuality-subtitle {
    margin-top: 10px;
    border: 1px solid rgba(77, 129, 167);
    border-bottom: none;

    .map-waterQuality-leftType,
    .map-waterQuality-rightType {
      width: 50%;
    }
  }
}

/* 
  注意：这里需要引入或复制原 style.less 的内容 
  以下仅为示例基础样式，确保结构不崩坏 
*/
.iconDiv {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 4px;
  padding: 5px;
  font-size: 12px;
  &.smallfont {
    font-size: 10px;
  }
}
.iconDivContent {
  display: flex;
  justify-content: space-between;
}
.map-tooltip {
  font-size: 12px;
  color: #fff;
  &-box {
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 8px;
    min-width: 150px;
  }
  &-title {
    margin-bottom: 4px;
    padding-bottom: 4px;
  }
  &-sub {
    font-size: 10px;
    color: #999;
    margin-bottom: 4px;
  }
  ul {
    list-style: none;
    padding: 10px 0;
    margin: 0;
    li {
      display: flex;
      margin-bottom: 2px;
      .__label {
        flex-shrink: 0;
        color: #fff;
      }
      .__info {
        word-break: break-all;
      }
    }
  }
}
// 电站 - 大型
.iconEngDiv_large_eng_built {
  width: 150px;
  height: 164px;
  background-repeat: no-repeat;
  background-size: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0 !important;
  .iconDivTitle {
    width: 100%;
    height: 48%;
    line-height: 100px;
    text-align: center;
    align-items: center;
    font-size: 16px;
    text-align: center;
    font-weight: normal;
    position: relative;
    &::after {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2px;
      width: 80%;
      left: 50%;
      transform: translateX(-50%);
      content: " ";
    }
  }
  .iconDivContent {
    width: 100%;
    height: 52%;
    font-size: 11px;
    position: relative;
    &::after {
      position: absolute;
      top: 0;
      left: 50%;
      right: 0;
      width: 2px;
      height: 62%;
      transform: translateX(-50%);
      content: " ";
    }
    .iconDivLeft {
      width: 50%;
      padding-left: 34px;
      box-sizing: border-box;
    }
    .iconDivRight {
      width: 50%;
      padding-left: 10px;
      box-sizing: border-box;
      padding-right: 30px;
      div:nth-child(1) {
        text-align: right;
      }
    }
  }
}

// 电站 - 中型
.iconEngDiv_mid_eng_built {
  width: 150px;
  height: 112px;
  background-repeat: no-repeat;
  background-size: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 0 !important;
  .iconDivTitle {
    width: 100%;
    height: 50px;
    line-height: 52px;
    text-align: center;
    align-items: center;
    font-size: 16px;
    text-align: center;
    font-weight: normal;
  }
  .iconDivContent {
    width: 100%;
    height: 36;
    padding: 0 10px;
    font-size: 11px;
    position: relative;
    &::after {
      position: absolute;
      top: 0;
      left: 50%;
      right: 0;
      width: 2px;
      height: 100%;
      content: " ";
    }
    .iconDivLeft {
      width: 50%;
      text-align: center;
    }
    .iconDivRight {
      width: 50%;
      text-align: center;
    }
  }
}

.iconEngDiv-large_eng_built-0 {
  background-image: url("@/assets/images/mapTip/map-dxsdzGuihuaNetMonitor.svg");
  color: #859ea3;
  .iconDivTitle,
  .iconDivContent {
    &::after {
      background-color: #859ea3;
    }
  }
}
.iconEngDiv-large_eng_built-1 {
  background-image: url("@/assets/images/mapTip/map-dxsdzZaijianNetMonitor.svg");
  color: #5389b9;
  .iconDivTitle,
  .iconDivContent {
    &::after {
      background-color: #5389b9;
    }
  }
}
.iconEngDiv-large_eng_built-2 {
  background-image: url("@/assets/images/mapTip/map-dxsdzYijianNetMonitor.svg");
  color: #7dbc18;
  .iconDivTitle,
  .iconDivContent {
    &::after {
      background-color: #95c842;
    }
  }
}
.iconEngDiv-mid_eng_built-0 {
  background-image: url("@/assets/images/mapTip/map-zxsdzGuihuaNetMonitor.svg");
  color: #859ea3;
  .iconDivContent {
    &::after {
      background-color: #859ea3;
    }
  }
}

.iconEngDiv-mid_eng_built-1 {
  background-image: url("@/assets/images/mapTip/map-zxsdzZaijianNetMonitor.svg");
  color: #5389b9;
  .iconDivContent {
    &::after {
      background-color: #5389b9;
    }
  }
}
.iconEngDiv-mid_eng_built-2 {
  background-image: url("@/assets/images/mapTip/map-zxsdzYijianNetMonitor.svg");
  color: #7dbc18;
  .iconDivContent {
    &::after {
      background-color: #95c842;
    }
  }
}
</style>