You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
289 lines
10 KiB
289 lines
10 KiB
import { useFetch } from '@/hooks/fetch';
|
|
import { IObject } from '@/types/interface';
|
|
import moment from 'moment';
|
|
import dragStretchService from '@/service/dragStretchService';
|
|
|
|
export const pathStyle = {
|
|
show: 'cursor:pointer;fill:#2a9bdd;stroke:#2a9bdd;stroke-width:0.26458333;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-dasharray:none;fill-opacity:0.38039216',
|
|
hide: 'cursor:pointer;opacity: 0;',
|
|
};
|
|
|
|
const reset = (state: IObject) => {
|
|
if (state.dragStretch) {
|
|
state.dragStretch.reset();
|
|
}
|
|
};
|
|
|
|
const pathMap: IObject = {
|
|
path4830: {
|
|
data: [
|
|
{ code: 'G06', key: 'A29' },
|
|
{ code: 'B_V0000151_27', key: 'B2' },
|
|
],
|
|
},
|
|
path4770: {
|
|
data: [
|
|
{ code: 'A_016', key: 'A29' },
|
|
{ code: 'B_V0000151_21', key: 'B2' },
|
|
{ code: 'E_V0000151_5', key: 'E3' },
|
|
{ code: 'D_V0000151_2', key: 'D2' },
|
|
],
|
|
},
|
|
path4766: {},
|
|
path7032: {
|
|
data: [{ code: 'B_V0000151_11', key: 'B2' }],
|
|
},
|
|
path4666: {},
|
|
path3938: {},
|
|
path3936: {
|
|
data: [{ code: 'B_V0000151_15', key: 'B2' }],
|
|
},
|
|
path3102: {
|
|
data: [
|
|
{ code: 'A_009', key: 'A29' },
|
|
{ code: 'B_V0000151_16', key: 'B2' },
|
|
{ code: 'E_V0000151_6', key: 'E3' },
|
|
{ code: 'D_V0000151_4', key: 'D2' },
|
|
],
|
|
},
|
|
path3934: {
|
|
data: [
|
|
{ code: 'G04', key: 'A29' },
|
|
{ code: 'B_V0000151_23', key: 'B2' },
|
|
],
|
|
},
|
|
path3932: {
|
|
data: [
|
|
{ code: 'A_019', key: 'A29' },
|
|
{ code: 'E_11004151_1', key: 'E3' },
|
|
],
|
|
},
|
|
path3100: {
|
|
data: [
|
|
{ code: 'A_010', key: 'A29' },
|
|
{ code: 'B_V0000151_26', key: 'B2' },
|
|
{ code: 'E_V0000151_7', key: 'E3' },
|
|
{ code: 'D_V0000151_3', key: 'D2' },
|
|
],
|
|
},
|
|
path7030: {
|
|
data: [{ code: 'B_V0000151_12', key: 'B2' }],
|
|
},
|
|
path4768: {
|
|
data: [
|
|
{ code: 'A_005', key: 'A29' },
|
|
{ code: 'B_V0000151_25', key: 'B2' },
|
|
],
|
|
},
|
|
path7028: {
|
|
data: [{ code: 'B_V0000151_17', key: 'B2' }],
|
|
},
|
|
path6300: {
|
|
data: [
|
|
{ code: 'A_021', key: 'A29' },
|
|
{ code: 'E_11004154_1', key: 'E3' },
|
|
],
|
|
codes: ['A_021', 'E_11004154_1'],
|
|
},
|
|
path6298: {
|
|
data: [
|
|
{ code: 'G05', key: 'A29' },
|
|
{ code: 'B_V0000151_19', key: 'B2' },
|
|
],
|
|
},
|
|
|
|
path6296: {},
|
|
path6294: {
|
|
data: [{ code: 'A_007', key: 'A29' }],
|
|
},
|
|
path6292: {
|
|
data: [
|
|
{ code: 'B_V0000151_13', key: 'B2' },
|
|
{ code: 'E_11004154_2', key: 'E3' },
|
|
],
|
|
},
|
|
path5564: {
|
|
data: [{ code: 'A_020', key: 'A29' }],
|
|
},
|
|
path5558: {},
|
|
path5562: {},
|
|
};
|
|
|
|
const animateMap: IObject = {
|
|
'layer-d-animate': `<animate href="#path7592" attributeName="stroke-dashoffset" dur="15s" to="0" fill="freeze"></animate>
|
|
<animate href="#path7592-3" attributeName="stroke-dashoffset" dur="15s" to="0" fill="freeze"></animate> <animate href="#path9046" attributeName="stroke-dashoffset" begin="0.6s" dur="15s" to="0" fill="freeze"></animate>
|
|
<animate href="#path9046-1" attributeName="stroke-dashoffset" begin="0.6s" dur="15s" to="0" fill="freeze"></animate><animate href="#path18869" attributeName="stroke-dashoffset" begin="0.5s" dur="15s" to="0" fill="freeze"></animate>
|
|
<animate href="#path18869-1" attributeName="stroke-dashoffset" begin="0.5s" dur="15s" to="0" fill="freeze"></animate>
|
|
<animate href="#path9046-5" attributeName="stroke-dashoffset" begin="2s" dur="15s" to="0" fill="freeze"></animate>
|
|
<animate href="#path9046-1-0" attributeName="stroke-dashoffset" begin="2s" dur="15s" to="0" fill="freeze"></animate><animate href="#path23350-62" attributeName="stroke-dashoffset" begin="1.22s" dur="15s" to="0" fill="freeze"></animate>
|
|
<animate href="#path23350-6-2" attributeName="stroke-dashoffset" begin="1.22s" dur="15s" to="0" fill="freeze"></animate>
|
|
<animate href="#path23326" attributeName="stroke-dashoffset" dur="3.8s" to="0" fill="freeze"></animate>
|
|
<animate href="#path23326-1" attributeName="stroke-dashoffset" dur="3.8s" to="0" fill="freeze"></animate>
|
|
<animate href="#path23350" attributeName="stroke-dashoffset" begin="1.42s" dur="25s" to="0" fill="freeze"></animate>
|
|
<animate href="#path23350-6" attributeName="stroke-dashoffset" begin="1.42s" dur="25s" to="0" fill="freeze"></animate>
|
|
<animate href="#path23374" attributeName="stroke-dashoffset" begin="2.8s" dur="15s" to="0" fill="freeze"></animate>
|
|
<animate href="#path23374-0" attributeName="stroke-dashoffset" begin="2.8s" dur="15s" to="0" fill="freeze"></animate>
|
|
<animate href="#path26736" attributeName="stroke-dashoffset" dur="2s" to="0" fill="freeze"></animate>
|
|
<animate href="#path26736-9" attributeName="stroke-dashoffset" dur="2s" to="0" fill="freeze"></animate>
|
|
<animate href="#path28441-0" attributeName="stroke-dashoffset" dur="2s" to="0" fill="freeze"></animate>
|
|
<animate href="#path28441-8-9" attributeName="stroke-dashoffset" dur="2s" to="0" fill="freeze"></animate>
|
|
<animate href="#path30063" attributeName="stroke-dashoffset" begin="0.5s" dur="2s" to="0" fill="freeze"></animate>
|
|
<animate href="#path30063-0" attributeName="stroke-dashoffset" begin="0.5s" dur="2s" to="0" fill="freeze"></animate>
|
|
<animate href="#path28441" attributeName="stroke-dashoffset" begin="0.5s" dur="2s" to="0" fill="freeze"></animate>
|
|
<animate href="#path28441-8-9-2" attributeName="stroke-dashoffset" begin="0.5s" dur="2s" to="0" fill="freeze"></animate>
|
|
|
|
<animate href="#path23264" attributeName="stroke-dashoffset" dur="15s" to="0" fill="freeze"></animate><animate href="#path23264-3" attributeName="stroke-dashoffset" dur="15s" to="0" fill="freeze"></animate>
|
|
<animate href="#image31036-69" attributeName="display" dur="3.2s" from="none" to="block" fill="freeze"></animate>
|
|
<animate href="#image31036-6" attributeName="display" dur="7.8s" from="none" to="block" fill="freeze"></animate>
|
|
<animate href="#image31036-8" attributeName="display" dur="5s" from="none" to="block" fill="freeze"></animate>
|
|
<animate href="#image31036-3" attributeName="display" dur="5s" from="none" to="block" fill="freeze"></animate>
|
|
<animate href="#image31036-69-9" attributeName="display" dur="2.3s" from="none" to="block" fill="freeze"></animate>
|
|
<animate href="#image31036-69-5" attributeName="display" dur="2.8s" from="none" to="block" fill="freeze"></animate>
|
|
<animate href="#image31036-1" attributeName="display" dur="2s" from="none" to="block" fill="freeze"></animate>
|
|
<animate href="#image31036-5112" attributeName="display" dur="3.4s" from="none" to="block" fill="freeze"></animate>
|
|
<animate href="#image31036-5" attributeName="display" dur="2.4s" from="none" to="block" fill="freeze"></animate>
|
|
`,
|
|
};
|
|
|
|
const pointerElec = { lineId: 'njhl-svg-elec' };
|
|
const pointerWater = { lineId: 'njhl-svg-water' };
|
|
const pointerGas = { lineId: 'njhl-svg-gas' };
|
|
const pointerSteam = { lineId: 'njhl-svg-steam' };
|
|
|
|
const pointerMap: IObject = {
|
|
'image31024-4': pointerElec,
|
|
image31024: pointerElec, //电
|
|
image4433: pointerWater,
|
|
'image4433-8': pointerWater,
|
|
image8135: pointerSteam,
|
|
'image8135-9': pointerSteam,
|
|
image12904: pointerGas,
|
|
};
|
|
|
|
const initToolTip = (state: IObject): any => {
|
|
for (const key in pathMap) {
|
|
const val = pathMap[key];
|
|
if (!val.data) {
|
|
continue;
|
|
}
|
|
|
|
const path = document.getElementById(key);
|
|
if (path) {
|
|
path.onmouseenter = () => {
|
|
path.setAttribute('style', pathStyle.show);
|
|
};
|
|
path.onmouseleave = () => {
|
|
path.setAttribute('style', pathStyle.hide);
|
|
};
|
|
path.onclick = (event: IObject) => {
|
|
setToolTipStatus('flex');
|
|
|
|
const { screenX, screenY } = event;
|
|
const target = document.querySelector('.njhl-tool-tip');
|
|
|
|
if (target) {
|
|
useFetch('/board/build/data', {
|
|
method: 'post',
|
|
data: {
|
|
datas: val.data,
|
|
month: moment().format('YYYY-MM'),
|
|
},
|
|
cb: (res: any) => {
|
|
state.toolTipData = res;
|
|
},
|
|
});
|
|
|
|
target.style.left = screenX - 100 + 'px';
|
|
target.style.top = screenY - 100 + 'px';
|
|
}
|
|
};
|
|
}
|
|
}
|
|
};
|
|
|
|
const pointerLineMap: IObject = { 'layer-d-animate': ['image31024-4', 'image31024'] };
|
|
|
|
const setPointerLineStatus = (target: HTMLElement, status: string): void => {
|
|
if (target) {
|
|
target.style.display = status;
|
|
}
|
|
};
|
|
|
|
export const setPointerLineStatusAll = (status: string): void => {
|
|
for (const key in pointerMap) {
|
|
const item = pointerMap[key];
|
|
|
|
const target = document.getElementById(item.lineId) as HTMLElement;
|
|
setPointerLineStatus(target, status);
|
|
}
|
|
};
|
|
|
|
const initLine = (): any => {
|
|
// for (const key in pointerLineMap) {
|
|
// const ids = pointerLineMap[key];
|
|
// for (const item of ids) {
|
|
// const pointer = document.getElementById(item);
|
|
// if (pointer) {
|
|
// pointer.onclick = () => {
|
|
// const v = animateMap[key];
|
|
// const target = document.getElementById(key);
|
|
// if (target) {
|
|
// target.innerHTML = v;
|
|
// const center = document.getElementById(".center");
|
|
// if (center) {
|
|
// const content = center.innerHTML;
|
|
// center.innerHTML = "";
|
|
// center.innerHTML = content;
|
|
// }
|
|
// }
|
|
// };
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
setPointerLineStatusAll('none');
|
|
|
|
for (const key in pointerMap) {
|
|
const target = document.getElementById(key);
|
|
const item = pointerMap[key];
|
|
if (target) {
|
|
target.onclick = () => {
|
|
setPointerLineStatusAll('none');
|
|
const t = document.getElementById(item.lineId) as HTMLElement;
|
|
setPointerLineStatus(t, 'block');
|
|
};
|
|
}
|
|
}
|
|
};
|
|
|
|
const getToolTipCloseElement = (): HTMLElement => {
|
|
return document.querySelector('.njhl-tool-tip .title .close');
|
|
};
|
|
|
|
const getToolTipElement = (): HTMLElement => {
|
|
return document.querySelector('.njhl-tool-tip');
|
|
};
|
|
|
|
const setToolTipStatus = (status: string): void => {
|
|
const target = getToolTipElement();
|
|
if (target) {
|
|
target.style.display = status;
|
|
}
|
|
};
|
|
|
|
const initCloseToolTip = (): void => {
|
|
const target = getToolTipCloseElement();
|
|
if (target) {
|
|
target.onclick = () => {
|
|
setToolTipStatus('none');
|
|
};
|
|
}
|
|
};
|
|
|
|
export const init = (state: IObject, target: HTMLElement): void => {
|
|
initToolTip(state);
|
|
initLine();
|
|
initCloseToolTip();
|
|
|
|
state.dragStretch = new dragStretchService(target, state.opt);
|
|
};
|