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': `
`,
};
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);
};