squi-mobile/src/components/MarkerMap/dialog.ts

import { IncidentItem } from '@/api/incident';
import { ResourceItemDetail } from '@/api/resource';
import { useCommonStore } from '@/store';

export const GET_INCIDENT_DIALOG_HTML = (
  item: IncidentItem,
  callback = () => {},
) => {
  const commonStore = useCommonStore();
  const el = document.createElement('div');

  el.innerHTML = `
<div>
  <div class="title">事件信息</div>
  <div class="content">
        <div><span>标题：</span><span>${item?.name ?? '-'}</span></div>
        <div><span>来源：</span><span>${
          commonStore.globalDict['zhdd_incident_type']?.find(
            (i) => i.dictValue.toString() === `${item?.source}`,
          )?.dictLabel ?? '-'
        }</span></div>
        <div><span>类型：</span><span>${
          commonStore.globalDict['zhdd_incident_type']?.find(
            (i) => i.dictValue.toString() === `${item?.type}`,
          )?.dictLabel ?? '-'
        }</span></div>
        <div><span>时间：</span><span>${item?.createTime ?? '-'}</span></div>
        <div><span>地点：</span><span>${item?.addr ?? '-'}</span></div>
        <div><span>描述：</span><span>${item?.des ?? '-'}</span></div>
  </div>
</div>
`;

  const action = document.createElement('div');
  action.className = 'action';
  const button = document.createElement('button');
  button.className = 'el-button el-button--primary el-button--small';
  button.innerHTML = '详情';
  action.appendChild(button);
  button.addEventListener('click', callback);

  el.appendChild(action);
  return el;
};

// •	视频打开后显示数据：
// a.视频点位编号
// b.视频点位地点
// c.按钮可以打开一个窗口，然后窗口中显示摄像头拍摄内容 （目前还无该项目数据，暂定为该内容）

export const GET_VIDEO_DIALOG_HTML = ({
  name,
  addr,
  link,
}: {
  name?: string;
  addr?: string;
  link?: string;
}) => {
  const el = document.createElement('div');

  el.innerHTML = `
  <div>
    <div class="title">视频监控信息</div>
    <div class="content">
        <div><span>编号：</span><span>${name ?? '-'}</span></div>
        <div><span>地点：</span><span>${addr ?? '-'}</span></div>
    </div>
    <div class="action">
        <button class="el-button el-button--primary el-button--small" type="button">
            <span>查看</span>
        </button>
    </div>
  </div>
  `;
  return el;
};

// •	应急仓库
// a.应急仓库名称
// b.应急仓库地点
// c.应急仓库管理单位
// d.联系人
// e.联系电话
// f.按钮（方式一：跳转应急仓库详情查看物资情况，方式二：在按钮旁边打开一个列表，该列表显示应急仓库的物资情况：物资名称、型号、数量）

export const GET_WAREHOUSE_DIALOG_HTML = (
  item: ResourceItemDetail,
  callback = () => {},
) => {
  const el = document.createElement('div');

  el.innerHTML = `
<div>
  <div class="title">应急仓库信息</div>
  <div class="content">
    <div><span>名称：</span><span>${item.name ?? '-'}</span></div>
    <div><span>地点：</span><span>${item.address ?? '-'}</span></div>
    <div><span>管理单位：</span><span>${item.manageUnit ?? '-'}</span></div>
    <div><span>联系人：</span><span>${item.contactName ?? '-'}</span></div>
    <div><span>联系方式：</span><span>${item.contactPhone ?? '-'}</span></div>
  </div>
</div>
  `;

  const action = document.createElement('div');
  action.className = 'action';
  const button = document.createElement('button');
  button.className = 'el-button el-button--primary el-button--small';
  button.innerHTML = '查看物资情况';
  action.appendChild(button);
  button.addEventListener('click', callback);

  el.appendChild(action);
  return el;
};

// •	应急车辆
// a.车牌号
// b.归属单位
// c.车辆类型 （应急车辆为实时位置，目前暂无具体数据）

export const GET_VEHICLES_DIALOG_HTML = (item: {
  name?: string;
  manageUnit?: string;
  carType?: string;
}) => {
  const commonStore = useCommonStore();
  const el = document.createElement('div');

  el.innerHTML = `
  <div>
    <div class="title">应急车辆信息</div>
    <div class="content">
      <div><span>车牌号：</span><span>${item.name ?? '-'}</span></div>
      <div><span>管理单位：</span><span>${item.manageUnit ?? '-'}</span></div>
      <div><span>车辆类型：</span><span>${
        commonStore.globalDict['zhdd_car_type']?.find(
          (i) => i.dictValue.toString() === `${item?.carType}`,
        )?.dictLabel ?? '-'
      }</span></div>
    </div>
  </div>
`;
  return el;
};

// •	应急队伍
// a.队伍名称
// b.管理单位
// c.携带物资
// d.人数
// e. 联系人
// f.联系电话

export const GET_TEAM_DIALOG_HTML = (item: ResourceItemDetail) => {
  const el = document.createElement('div');
  el.innerHTML = `
<div>
<div class="title">应急队伍信息</div>
<div class="content">
    <div><span>队伍名称：</span><span>${item.name ?? '-'}</span></div>
    <div><span>管理单位：</span><span>${item.manageUnit ?? '-'}</span></div>
    <div><span>携带物资：</span><span>${item.carryGoods ?? '-'}</span></div>
    <div><span>人数：</span><span>${item.num ?? '-'}</span></div>
    <div><span>联系人：</span><span>${item.contactName ?? '-'}</span></div>
    <div><span>联系方式：</span><span>${item.contactPhone ?? '-'}</span></div>
</div>
</div>
  `;
  return el;
};

export const renderElement = (image: any) => {
  var el = document.createElement('div');
  el.id = 'marker';
  el.style.backgroundImage = `url(${image})`;
  el.style.backgroundSize = 'cover';
  el.style.width = '24px';
  el.style.height = '25px';
  // el.innerHTML = '<div>123</div>';
  // el.style.borderRadius = '50%';
  return el;
};