thing_web/src/views/dashboard/common/style.ts

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);
};