1771 lines
48 KiB
Vue
1771 lines
48 KiB
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>
|