yjhtgl-web/src/views/globalMap/RightMenu/OnlinePlotting/index.vue

<template>
  <div class="menu-content">
    <div class="gradient-text common-dialog-title2">实时标绘</div>
    <div v-show="collaboration" style="display: flex; align-items: center; justify-content: flex-end">
      <div class="btn2" style="margin-left: 10px" @click="handleCloseCollaboration">关闭协同</div>
      <div class="btn2" style="margin-left: 10px">保存</div>
    </div>
    <div class="line">
      <div class="tabs1">
        <div v-for="(item, index) in menu" :key="index" :class="menuActive1 === index ? 'tab tab_active' : 'tab'" @click="clickTab(index)">
          {{ item.name }}
        </div>
      </div>
      <div class="btn-box">
        <div class="btn1" @click="handleScreenshot">
          <div class="icon1" />
          当前地图截图导出
        </div>
        <div v-show="!collaboration" class="btn2" @click="handleShare('1')">协同标绘</div>
        <div v-show="collaboration" class="btn2" @click="handleShowLayer">查看图层</div>
      </div>
    </div>
    <div v-if="menuActive1 === 0" class="content">
      <div class="box1">
        <div v-show="!showSetting" class="box-item">
          <div class="btn" @click="handleUndo">
            <div class="revoke-icon"></div>
            撤回
          </div>
          <div class="line2"></div>
          <div class="btn">
            <div class="delete-icon"></div>
            删除
          </div>
          <div class="line2"></div>
          <div class="btn" @click="handleShowDialog">
            <div class="save-icon"></div>
            保存
          </div>
        </div>
        <div v-show="showSetting" class="box-item">
          <div class="btn" @click="handleQuitSetting">
            <div class="revoke-icon"></div>
            退出设置
          </div>
        </div>
        <div class="box-item">
          <div class="btn">
            <i class="template-icon" />
            模板导入
          </div>
          <div class="line2"></div>
          <div class="btn">
            <i class="categoryImport-icon" />
            分类导入
          </div>
          <div class="line2"></div>
          <div class="btn" @click="handleOpenSetting">
            <i class="setting-icon" />
            设置
          </div>
        </div>
      </div>
      <div class="tab-content">
        <div class="tabs2">
          <div
            v-for="(item, index) in menu[menuActive1].children"
            :key="index"
            :class="menuActive2 === index ? 'tab tab_active' : 'tab'"
            @click="clickTab2(index)"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="tab-content2">
          <div v-show="menuActive2 === 0" class="line3">
            <LineWidthSelect v-model="mouseToolState.lineWidth" :options="lineWidthOptions" />
            <div class="color-container">
              <el-color-picker v-model="mouseToolState.color" size="small" popper-class="custom-color-picker" show-alpha />
            </div>
          </div>
          <div v-if="menu[menuActive1] && menu[menuActive1].children && menu[menuActive1].children[menuActive2]" class="tab-list">
            <div
              v-for="(item, index) in menu[menuActive1].children[menuActive2].children"
              :key="index"
              :class="menuActive3 === index ? 'tab tab_active' : 'tab'"
              @click="clickTab3(item, index)"
            >
              <div v-show="!showSetting" :class="menuActive3 === index ? 'checked2' : 'checked1'"></div>
              <img :src="getImageUrl(item.image)" class="icon" />
              {{ item.name }}
              <div v-if="!!showSetting" class="setting-btn" @click="handleShowSetting(item)" />
              <div v-if="item.showSetting" class="setting-menu">
                <div class="menu-item" @click="handleShowSwitch(item)">
                  <i class="icon-switch" />
                  <span>更换</span>
                </div>
                <div class="menu-item" @click="handleMenuItemHide(item)">
                  <i class="icon-eye" />
                  <span>{{ item.visible === '0' ? '隐藏' : '显示' }}</span>
                </div>
                <div class="menu-item" @click="handleMenuItemDelete(item)">
                  <i class="icon-delete" />
                  <span>删除</span>
                </div>
              </div>
            </div>
            <div v-if="showSetting" class="tab" @click="handleShowAddClass">
              <el-icon color="#7495b4" :size="35"><Plus /></el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else-if="menuActive1 === 1" class="tab-content3">
      <!--      <div class="box1">-->
      <!--        <div class="box-item">-->
      <!--          <div class="btn">-->
      <!--            <div class="merge-icon"></div>-->
      <!--            合并-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
      <div class="params-box">
        <el-input v-model="queryParams.pattern_name" class="custom-input" placeholder="请输入" @input="handleQuery">
          <template #prefix>
            <el-icon class="el-input__icon"><search /></el-icon>
          </template>
        </el-input>
      </div>
      <div class="custom-table">
        <div class="table-header">
          <div class="th">预案名称</div>
          <div class="th">操作</div>
        </div>
        <div v-for="(item, index) in patternList" :key="index" class="tr">
          <div class="td">
            <div>{{ item.pattern_name }}</div>
          </div>
          <div class="td td2">
            <div class="btn" @click="handleDelete(item.id)">
              <div class="delete-icon"></div>
              删除
            </div>
            <div class="line2"></div>
            <div class="btn" @click="handleEdit(item.id)">
              <div class="edit-icon"></div>
              编辑
            </div>
            <div class="line2"></div>
            <div class="btn" @click="handleShare('2', item.id)">
              <div class="share-icon"></div>
              分享
            </div>
          </div>
        </div>
        <div class="footer">
          <el-pagination
            v-model:current-page="queryParams.page"
            v-model:page-size="queryParams.pageSize"
            background
            :hide-on-single-page="true"
            layout="total, prev, pager, next"
            :total="total"
            @current-change="getList"
          />
        </div>
      </div>
    </div>
  </div>
  <!--添加修改分类弹窗-->
  <EditClassDialog v-if="showAddDialog" v-model="showAddDialog" :id="selectEditId" :templateId="selectTemplateId" @updateData="getTemplateTreeData" />
  <!--添加文字-->
  <TextEdit v-if="showTextEdit" v-model="showTextEdit" @add-text="addText" />
  <!--绘制提示信息-->
  <div v-show="tipTitle !== ''" class="tipTitle">{{ tipTitle }}</div>
  <!--保存修改弹窗-->
  <EditDialog v-if="showEdit" v-model="showEdit" :edit-data="editData" @submit="handleSubmit" />
  <Contact v-if="shareState.showShare" v-model="shareState.showShare" @close="handleCloseShare" @confirm="handleShareConfirm" />
  <Dialog v-if="showForm" v-model="showForm" customShow title="协同标绘" type="xs" @close="showForm = false" @confirm="handleSendForm">
    <div style="display: flex; align-items: center">
      <div style="font-size: 16px">预案名称：</div>
      <el-input v-model="form.pattern_name" class="custom-input" placeholder="请输入" style="flex: 1" />
    </div>
  </Dialog>
  <LayerDetail v-if="showLayer" v-model="showLayer" :patternId="patternId" />
</template>

<script lang="ts" setup name="OnlinePlotting">
import { nanoid } from 'nanoid';
import { deepClone } from '@/utils';
import { useHistory } from '@/hooks/useHistory';
import {
  changeVisibleClassification,
  closeCollaboration,
  createCollaboration,
  deleteClassificationCreate,
  deletePatternById,
  getPatternInfo,
  getPatternList,
  getTemplateTree
} from '@/api/globalMap/onlinePlotting';
import EditClassDialog from './EditClassDialog.vue';
import TextEdit from './TextEdit.vue';
import EditDialog from './EditDialog.vue';
import { Search } from '@element-plus/icons-vue';
import html2canvas from 'html2canvas';
import LayerDetail from './LayerDetail.vue';
import { createWebSocket } from '@/utils/websocket';
import * as turf from '@turf/turf';
import Style from 'ol/style/Style';
import Icon from 'ol/style/Icon';
import { Fill, Stroke } from 'ol/style';
import Text from 'ol/style/Text';

const props = defineProps({
  activeMap: String
});
const AMapType = ['vectorgraph', 'satellite'];

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const getDrawTool = inject('getDrawTool');
const getMap = inject('getMap');
const getMapUtils = inject('getMapUtils');
const containerScale = inject('containerScale');
const { currentState, commit, undo, history, future } = useHistory();
const emits = defineEmits(['getCollaborationData']);
const getImageUrl = (name: string) => {
  return import.meta.env.VITE_APP_BASE_API + import.meta.env.VITE_APP_BASE_DOWNLOAD_API + name;
};
let drawing = ref(false);
const mouseToolState = ref({
  color: 'rgba(248, 1, 2, 1)',
  lineWidth: '1',
  graphicsType: ''
});
const menuActive1 = ref<string | number>(0);
const menuActive2 = ref<string | number>(0);
const menuActive3 = ref<string | number>('');
const menu = ref([
  {
    name: '标绘工具',
    children: []
  },
  {
    name: '历史预案',
    children: []
  }
]);
const lineWidthOptions = reactive([
  { name: '1像素', value: '1' },
  { name: '2像素', value: '2' },
  { name: '3像素', value: '3' }
]);
let showTextEdit = ref(false);
let lnglat = ref([]);
// 协同
let collaboration = ref(false);
let webSock;
// 分享
let shareState = reactive({
  type: '',
  showShare: false,
  id: ''
});
let patternId = ref('');
let shareId = ref('');
let overlays = [];
let overlaysData = [];
watch(
  () => drawing,
  () => {
    if (!drawing.value) {
      menuActive3.value = '';
    }
  }
);
const tipTitle = computed(() => {
  let res = '';
  if (
    menu.value[menuActive1.value] &&
    menu.value[menuActive1.value].children &&
    menu.value[menuActive1.value].children[menuActive2.value] &&
    menu.value[menuActive1.value].children[menuActive2.value].children &&
    menu.value[menuActive1.value].children[menuActive2.value].children[menuActive3.value]
  ) {
    const data = menu.value[menuActive1.value].children[menuActive2.value].children[menuActive3.value];
    if (data.value === 'straightArrow') {
      res = '单击开始、单击结束';
    } else if (['rectangle', 'polygon', 'anyLine', 'circle'].includes(data.value)) {
      res = '鼠标按住拖曳，松开鼠标结束标绘';
    } else if (['straightLine', 'measureArea'].includes(data.value)) {
      res = '单击开始，移动，单击改变方向，双击结束';
    }
  }
  return res;
});

// 获取模板分类树
const getTemplateTreeData = () => {
  getTemplateTree({ visible: showSetting.value ? '' : '1'}).then((res) => {
    menu.value[0].children = res.data;
  });
};
let showAddDialog = ref(false);
let selectTemplateId = ref('');
let selectEditId = ref('');
// 显示现在分类弹窗
const handleShowAddClass = () => {
  selectTemplateId.value = menu.value[menuActive1.value].children[menuActive2.value].template_id;
  selectEditId.value = '';
  showAddDialog.value = true;
};
const handleShowSwitch = (item) => {
  selectTemplateId.value = menu.value[menuActive1.value].children[menuActive2.value].template_id;
  item.showSetting = false;
  selectEditId.value = item.classification_id;
  showAddDialog.value = true;
};
const handleMenuItemHide = (item) => {
  item.showSetting = false;
  const newVisible = item.visible === '0' ? '1' : '0';
  changeVisibleClassification({ classification_id: item.classification_id, visible: newVisible }).then(() => {
    proxy.$modal.msgSuccess(newVisible === '0' ? '隐藏成功' : '显示成功');
    getTemplateTreeData();
  });
};
const handleMenuItemDelete = (item) => {
  item.showSetting = false;
  deleteClassificationCreate(item.classification_id).then(() => {
    proxy.$modal.msgSuccess('删除成功');
    getTemplateTreeData();
  });
};

// 点击一级菜单
const clickTab = (value: number) => {
  menuActive1.value = value;
};
// 点击二级菜单
const clickTab2 = (value: number) => {
  handleExitMenuActive();
  menuActive2.value = value;
};
// 点击三级菜单
const clickTab3 = (item, index) => {
  if (showSetting.value) return;
  handleExitMenuActive(true);
  const type = item.value;
  if (mouseToolState.value.graphicsType !== type || (mouseToolState.value.graphicsType === 'marker' && mouseToolState.value.title !== item.name)) {
    if (type === 'text') {
      mouseToolState.value.graphicsType = type;
      mouseToolState.value.title = item.name;
      handleTextEdit();
    } else if (type === 'marker') {
      const data = {
        graphicsType: type,
        lineWidth: mouseToolState.value.lineWidth,
        color: mouseToolState.value.color,
        icon: getImageUrl(item.image),
        iconName: item.image,
        size: item.size,
        title: item.name
      };
      drawing.value = true;
      mouseToolState.value = data;
    } else {
      showTextEdit.value = false;
      drawing.value = true;
      mouseToolState.value.graphicsType = type;
      mouseToolState.value.title = item.name;
    }
    const drawTool = getDrawTool();
    if (mouseToolState.value.graphicsType === 'anyLine') {
      drawTool.setDrawEndMethod(handleEndDraw);
    } else if (mouseToolState.value.graphicsType !== 'text') {
      const newOptions = drawTool.drawGraphics(mouseToolState.value);
      // 绘制完成事件
      initDrawMethod(newOptions);
    }
    menuActive3.value = index;
  } else {
    handleExitMenuActive();
  }
};
// 切换菜单、设置后退出菜单选中
const handleExitMenuActive = (noClearActive?: boolean) => {
  if (!noClearActive) {
    menuActive3.value = '';
  }
  showTextEdit.value = false;
  drawing.value = false;
  mouseToolState.value.graphicsType = '';
  const drawTool = getDrawTool();
  drawTool.closeDraw();
};
const handleTextEdit = () => {
  const drawTool = getDrawTool();
  const map = drawTool.getMap();
  drawTool.closeDraw();
  // 监听地图点击事件
  map.on('click', handleClickMap);
};
const handleClickMap = (e) => {
  // 获取点击位置的经纬度
  if (AMapType.includes(props.activeMap)) {
    lnglat.value = [e.lnglat.lng, e.lnglat.lat];
  } else {
    lnglat.value = e.coordinate;
  }
  showTextEdit.value = true;
};
const addText = (textEditState) => {
  const data = {
    graphicsType: 'text',
    type: 'text',
    lineWidth: mouseToolState.value.lineWidth,
    color: mouseToolState.value.color,
    title: '文本',
    text: textEditState.text,
    fontColor: textEditState.fontColor,
    fontSize: textEditState.fontSize,
    lnglat: lnglat.value
  };
  showTextEdit.value = false;
  drawing.value = true;
  mouseToolState.value = data;
  // 绘制完成事件
  const drawTool = getDrawTool();
  const res = drawTool.drawGraphics(mouseToolState.value);
  overlays.push(res.text);
  overlaysData.push(res.data);
  commit(deepClone(overlaysData));
  res.text.on('rightclick', handleRightClick);
  const map = drawTool.getMap();
  // 监听地图点击事件
  if (AMapType.includes(props.activeMap)) {
    map.off('click', handleClickMap);
  } else {
    map.un('click', handleClickMap);
  }
  sendWebSocket(data);
  close();
};
const close = () => {
  const drawTool = getDrawTool();
  drawTool.closeDraw();
  drawing.value = false;
  menuActive3.value = '';
  mouseToolState.value.graphicsType = '';
};
watch(
  mouseToolState,
  () => {
    if (mouseToolState.value.graphicsType !== 'text') {
      const map = getMap();
      if (AMapType.includes(props.activeMap)) {
        map.off('click', handleClickMap);
      } else {
        map.un('click', handleClickMap);
      }
    }
  },
  {
    deep: true
  }
);
// 初始化绘制完成回调
const initDrawMethod = (options) => {
  const drawTool = getDrawTool();
  const mouseTool = drawTool.getMouseTool();
  let onDraw;
  if (AMapType.includes(props.activeMap)) {
    onDraw = (event) => {
      mouseTool.off('draw', onDraw);
      close();
      const obj = event.obj;
      const id = nanoid();
      obj._opts.extData = {
        id: id
      };
      const data: any = deepClone(options);
      data.id = id;
      if (options.type == 'marker') {
        const position = obj.getPosition();
        data.lnglat = [position.lng, position.lat];
        data.latitude = position.lat;
        data.longitude = position.lng;
        data.icon = data.iconName;
        data.image = data.iconName;
        data.imageHover = data.iconName;
        data.visible = true;
        obj.setLabel({
          content: '<div>' + data.title + '</div>',
          direction: 'top'
        });
      } else {
        if (options.type == 'circle') {
          data.center = [obj.getCenter().lng, obj.getCenter().lat];
          data.radius = obj.getRadius();
        } else {
          const path = obj.getPath();
          // 将AMap.LngLat对象数组转换为经纬度数组
          const pathArr = path.map((lngLat) => {
            // 返回经度和纬度的数组
            return [lngLat.lng, lngLat.lat];
          });
          if (options.type !== 'straightLine') {
            pathArr.push(pathArr[0]);
          }
          data.path = pathArr;
        }
      }
      if (options.type == 'measureArea') {
        const AMap = getDrawTool().getAMap();
        const map = getMap();
        // 计算区域面积
        const area = Math.round(AMap.GeometryUtil.ringArea(data.path));
        const text = new AMap.Text({
          position: data.path[data.path.length - 1],
          text: '区域面积' + area + '平方米',
          offset: new AMap.Pixel(-20, -20)
        });
        data.area = area;
        map.add(text);
        overlays.push([obj, text]);
        overlaysData.push(data);
        commit(deepClone(overlaysData));
      } else {
        overlays.push(obj);
        overlaysData.push(data);
        commit(deepClone(overlaysData));
        console.log(overlaysData);
      }
      // 右击进入编辑
      obj.on('rightclick', handleRightClick);
      // 发送
      sendWebSocket(data);
    };
    mouseTool.on('draw', onDraw);
  } else {
    onDraw = (event) => {
      mouseTool.un('draw', onDraw);
      close();
      const feature = event.feature;
      const geometry = feature.getGeometry();
      const id = nanoid();
      feature.set('id', id);
      const data: any = deepClone(options);
      data.id = id;
      if (options.type == 'marker') {
        const img = new Image();
        img.onload = () => {
          // 图片加载完成后，可以访问其 width 和 height 属性
          const width = img.width;
          const height = img.height;
          const style = new Style({
            image: new Icon({
              src: options.icon,
              anchor: [0.5, 0.5], // 图标锚点，通常是图标的中心点
              anchorXUnits: 'fraction',
              anchorYUnits: 'fraction',
              size: [width, height],
              scale: !!options.size[0] ? options.size[0] / width : 1
            }),
            // text: new Text({
            //   text: data.title, // 使用属性中的值作为文本
            //   font: '14px sans-serif',
            //   fill: new Fill({
            //     color: '#ffff'
            //   })
            // })
          });
          feature.setStyle(style);
          const position = geometry.getCoordinates();
          data.lnglat = position;
          data.latitude = position[0];
          data.longitude = position[1];
          data.icon = data.iconName;
          data.image = data.iconName;
          data.imageHover = data.iconName;
          data.visible = true;
        };
        img.src = options.icon; // 设置图片的 URL，触发加载
      } else {
        if (options.type == 'circle') {
          data.center = [geometry.getCenter().lng, geometry.getCenter().lat];
          data.radius = geometry.getRadius();
        } else {
          const coordinates = geometry.getCoordinates();
          const pathArr = coordinates[0];
          data.path = pathArr;
        }
      }
      if (options.type == 'measureArea') {
        // 计算区域面积
        const area = turf.area(turf.polygon([data.path]));


        // const text = new AMap.Text({
        //   position: data.path[data.path.length - 1],
        //   text: '区域面积' + area + '平方米',
        //   offset: new AMap.Pixel(-20, -20)
        // });
        data.area = area;
        // map.add(text);
        // overlays.push([feature, text]);
        overlays.push(feature);
        overlaysData.push(data);
        commit(deepClone(overlaysData));
      } else {
        overlays.push(feature);
        overlaysData.push(data);
        commit(deepClone(overlaysData));
        console.log(overlaysData);
      }
      // 右击进入编辑
      feature.on('rightclick', handleRightClick);
      // 发送
      sendWebSocket(data);
    };
    mouseTool.on('drawend', onDraw);
  }
};
const handleEndDraw = (options, obj) => {
  const drawTool = getDrawTool();
  drawing.value = false;
  menuActive3.value = '';
  mouseToolState.value.graphicsType = '';
  drawTool.setDrawEndMethod();
  const id = nanoid();
  obj._opts.extData = {
    id: id
  };
  const data: any = deepClone(options);
  data.id = id;
  if (data.type === 'anyLine') {
    const path = obj.getPath();
    // 将AMap.LngLat对象数组转换为经纬度数组
    const pathArr = path.map((lngLat) => {
      // 返回经度和纬度的数组
      return [lngLat.lng, lngLat.lat];
    });
    pathArr.push(pathArr[0]);
    data.path = pathArr;
  }
  overlays.push(obj);
  overlaysData.push(data);
  commit(deepClone(overlaysData));
  sendWebSocket(data);
};
// 协同标绘发送新增
const sendWebSocket = (data) => {
  if (!collaboration.value || !webSock) return;
  webSock.send(
    JSON.stringify({
      operation: 'add', // 必填
      id: data.id,
      name: data.title, // 必填
      content: JSON.stringify(data), // 必填
      visible: '1'
    })
  );
};
// 图形右击事件
let rightClickObj;
let initContextMenu = false;
const handleRightClick = (event) => {
  rightClickObj = event.target;
  const contextMenu = getDrawTool().getContextMenu();
  if (!initContextMenu) {
    // 右键删除按钮
    contextMenu.addItem(
      '删除',
      function () {
        contextMenu.close();
        deleteGraphics();
      },
      0
    );
    initContextMenu = true;
  }
  contextMenu.open(getMap(), event.lnglat);
};
// 删除图形
const deleteGraphics = () => {
  const id = rightClickObj.getExtData()?.id;
  if (id) {
    for (let i = 0; i < overlays.length; i++) {
      const overlay = Array.isArray(overlays[i]) ? overlays[i][0] : overlays[i];
      if (overlay?.getExtData().id === id) {
        removeOverlayByIndex(i);
        commit(deepClone(overlaysData));
        rightClickObj = null;
      }
    }
  }
};
// 撤销绘制
const handleUndo = () => {
  // drawing.value = false;
  const previous = history.value[history.value.length - 2];
  if (history.value.length > 1) {
    if (currentState.value.length > previous.length) {
      // 撤销新增
      removeOverlayByIndex(currentState.value.length - 1);
    } else {
      let restoreData;
      for (let i = 0; i < previous.length; i++) {
        let index = 0;
        for (let k = 0; k < currentState.value.length; k++) {
          if (previous[i].id !== currentState.value[k].id) {
            index++;
          } else {
            break;
          }
        }
        if (index === previous.length - 1) {
          restoreData = previous[i];
          break;
        }
      }
      if (restoreData) {
        const obj = getDrawTool().createGraphics(restoreData);
        overlays.push(obj);
      }
    }
    undo();

    console.log(history.value, future.value, currentState.value);
  }
};
// 移除所有覆盖物
const removeAllOverlay = () => {
  const map = getMap();
  overlays.forEach((item, index) => {
    if (Array.isArray(item)) {
      item.forEach((overlay) => {
        // 移除地图上覆盖物
        map.remove(overlay);
      });
    } else {
      // 移除地图上覆盖物
      map.remove(item);
    }
  });
  overlays = [];
  overlaysData = [];
};
// 根据索引移除覆盖物
const removeOverlayByIndex = (index: number) => {
  const map = getMap();
  if (Array.isArray(overlays[index])) {
    overlays[index].forEach((overlay) => {
      // 移除地图上覆盖物
      map.remove(overlay);
    });
  } else {
    // 移除地图上覆盖物
    map.remove(overlays[index]);
    if (collaboration.value) {
      webSock.send(
        JSON.stringify({
          operation: 'delete',
          id: overlays[index].getExtData()?.id
        })
      );
    }
  }
  overlays.splice(index, 1);
  overlaysData.splice(index, 1);
};

// 历史预案
const queryParams = reactive({
  page: 1,
  pageSize: 9,
  pattern_name: ''
});

const patternList = ref([]);
let total = ref(0);
let editData = ref({
  id: '',
  pattern_name: '',
  content: {}
});
let showEdit = ref(false);
const handleSubmit = () => {
  showEdit.value = false;
  editData.value = {
    id: '',
    pattern_name: '',
    content: {}
  };
  getList();
};
const handleQuery = () => {
  queryParams.page = 1;
  getList();
};
const getList = () => {
  // if (menuActive1.value === 1 && menu.value[menuActive1.value].name == '历史预案') {
  getPatternList(queryParams).then((res) => {
    patternList.value = res.data;
    total.value = res.total;
  });
  // }
};
const handleDelete = (id: number) => {
  proxy?.$modal.confirm('是否确认删除选择的数据项？').then(() => {
    deletePatternById(id).then(() => {
      getList();
    });
  });
};
const handleEdit = (id) => {
  getPatternInfo(id).then((res) => {
    editData.value = res.data;
    editData.value.id = id;
  });
  showEdit.value = true;
};
const handleShare = (type, id?: string) => {
  shareState.type = type;
  shareState.id = id;
  shareState.showShare = true;
};
const handleCloseShare = () => {
  shareState.type = '';
  shareState.id = '';
};
const handleCloseCollaboration = () => {
  closeCollaboration({ pattern_id: patternId.value }).then(() => {
    collaboration.value = false;
  });
};
let showForm = ref(false);
let form = ref({
  pattern_id: '',
  user_id_list: [],
  name: '',
  pattern_name: '',
  visible: 'false',
  content: ''
});
const handleShareConfirm = (data) => {
  if (shareState.type === '1') {
    // 协同标绘
    const userIdList = [];
    data.forEach((item) => {
      userIdList.push(item.userId);
    });
    let list = [];
    currentState.value.forEach((item) => {
      list.push({
        name: item.title,
        visible: 'true',
        content: JSON.stringify(item)
      });
    });
    form.value = {
      pattern_id: nanoid(),
      user_id_list: userIdList,
      pattern_name: '',
      bz_list: list
    };
    showForm.value = true;
  } else {
    // 分享
  }
  shareState.type = '';
  shareState.id = '';
};
const getWebSocketData = (data) => {
  if (data && data.length > 0) {
    const data2 = [];
    const data3 = deepClone(data);
    data.forEach((item) => {
      if (!!item.content) {
        const parseContent = JSON.parse(item.content);
        if (parseContent.type === 'marker' && !!parseContent.icon) {
          parseContent.icon = getImageUrl(parseContent.icon);
        }
        data2.push(parseContent);
      }
    });
    const res = getMapUtils().drawData(data2);
    removeAllOverlay();
    res.forEach((item, index) => {
      overlays.push(item);
      overlaysData.push(data3[index]);
    });
    commit(deepClone(overlaysData));
    currentState.value = data;
  }
  console.log('接收数据', data);
};
const handleSendForm = () => {
  if (!form.value.pattern_name) {
    return proxy?.$modal.msgWarning('请填写预案名称');
  }
  // webSock = createWebSocket('X_cBqh0q1GUVhTOmS5c8w', getWebSocketData);
  // patternId.value = 'X_cBqh0q1GUVhTOmS5c8w';
  createCollaboration(form.value).then(() => {
    patternId.value = form.value.pattern_id;
    webSock = createWebSocket(form.value.pattern_id, getWebSocketData);
    showForm.value = false;
    collaboration.value = true;
    proxy?.$modal.msgSuccess('开启协同标绘成功');
  });
};
const handleShowDialog = () => {
  editData.value = {
    id: '',
    pattern_name: '',
    content: currentState.value
  };
  showEdit.value = true;
};
let showSetting = ref(false);
const handleOpenSetting = () => {
  showSetting.value = true;
  handleExitMenuActive();
  getTemplateTreeData();
};
const handleQuitSetting = () => {
  showSetting.value = false;
  getTemplateTreeData();
};
const handleShowSetting = (item, index) => {
  menu.value[0].children.forEach((menu2) => {
    menu2.children.forEach((item2) => {
      item2.showSetting = item.name === item2.name;
    });
  });
};
let dataURL = ref('');
// 页面元素转图片
const handleScreenshot = () => {
  const canvasBox = getMap().Iv;
  // 手动创建一个 canvas 标签
  const canvas = document.createElement('canvas');
  if (canvasBox) {
    // 获取父级的宽高
    const width = parseInt(window.getComputedStyle(canvasBox).width) / containerScale().scaleX;
    const height = parseInt(window.getComputedStyle(canvasBox).height) / containerScale().scaleX;
    canvas.style.width = width + 'px';
    canvas.style.height = height + 'px';
    const options = {
      backgroundColor: null, // 设置背景色为透明
      useCORS: true, //是否尝试使用CORS从服务器加载图像，解决跨域问题
      tainttest: true, // 是否在渲染前测试图片
      logging: false // 不启动日志调试
    };
    // canvasBox是要截图的元素，options是一些相关配置
    html2canvas(canvasBox, options).then((canvas) => {
      // toDataURL 图片格式转成 base64
      dataURL.value = canvas.toDataURL('image/png');
      // 新建一个a标签
      var oA = document.createElement('a');
      oA.download = '截图'; // 设置下载的文件名
      oA.href = dataURL.value;
      document.body.appendChild(oA);
      oA.click(); // 模拟点击a标签
      oA.remove(); // 下载之后把创建的元素删除
    });
  }
};
let showLayer = ref(false);
let handleShowLayer = () => {
  showLayer.value = true;
};
const handleSendData = (data) => {
  const { type, content } = data;
  if (type === 'update') {
    webSock.send(
      JSON.stringify({
        operation: 'update',
        id: content.id,
        name: content.name,
        content: content.content,
        visible: content.visible
      })
    );
  }
};
onMounted(() => {
  getTemplateTreeData();
  getList();
});
</script>

<style lang="scss" scoped>
.menu-content {
  width: 612px;
  height: 685px;
  background: url('@/assets/images/map/rightMenu/onlinePlotting/dialog.png') no-repeat;
  padding: 60px 10px 10px 15px;
  font-size: 14px;
  position: relative;
  color: #ffffff;
}

:deep(.el-color-dropdown__link-btn) {
  display: none;
}
.line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tabs1 {
  display: flex;
  .tab {
    width: 123px;
    height: 30px;
    line-height: 30px;
    background: url('@/assets/images/map/rightMenu/onlinePlotting/tab.png') no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    font-size: 16px;
    color: #b7c1d5;
    font-family: YouSheBiaoTiHei;
    padding-left: 28px;
    &:hover {
      width: 123px;
      height: 30px;
      color: #ffffff;
      background: url('@/assets/images/map/rightMenu/onlinePlotting/tabActive.png') no-repeat;
      background-size: 100% 100%;
    }
  }
  .tab_active {
    width: 123px;
    height: 30px;
    color: #ffffff;
    background: url('@/assets/images/map/rightMenu/onlinePlotting/tabActive.png') no-repeat;
    background-size: 100% 100%;
  }
}
.btn1 {
  width: 200px;
  height: 60px;
  background: url('@/assets/images/map/rightMenu/onlinePlotting/btn1.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  color: #edfaff;
  .icon1 {
    width: 22px;
    height: 22px;
    background: url('@/assets/images/map/rightMenu/onlinePlotting/screenshot.png') no-repeat;
    background-size: 100% 100%;
    margin-right: 6px;
  }
}
.btn2 {
  width: 104px;
  height: 29px;
  background: url('@/assets/images/map/rightMenu/btn.png') no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  color: #edfaff;
  .icon1 {
    width: 42px;
    height: 42px;
    background: url('@/assets/images/map/rightMenu/onlinePlotting/screenshot.png') no-repeat;
    margin-right: 12px;
  }
}
.box1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 36px;
  background: url('@/assets/images/map/rightMenu/onlinePlotting/box1.png') no-repeat;
  background-size: 100% 100%;
  padding: 10px 12px;
  .box-item {
    display: flex;
    align-items: center;
  }
}
.btn {
  display: flex;
  align-items: center;
  cursor: pointer;
  .revoke-icon {
    width: 24px;
    height: 25px;
    margin-right: 3px;
    background: url('@/assets/images/map/rightMenu/onlinePlotting/revoke.png') no-repeat;
    background-size: 100% 100%;
  }
  .delete-icon {
    width: 25px;
    height: 25px;
    margin-right: 3px;
    background: url('@/assets/images/map/rightMenu/onlinePlotting/delete.png') no-repeat;
    background-size: 100% 100%;
  }
  .edit-icon {
    width: 23px;
    height: 23px;
    margin-right: 3px;
    background: url('@/assets/images/map/rightMenu/onlinePlotting/edit.png') no-repeat;
    background-size: 100% 100%;
  }
  .cancel-icon {
    width: 25px;
    height: 25px;
    margin-right: 3px;
    background: url('@/assets/images/map/rightMenu/onlinePlotting/cancel.png') no-repeat;
    background-size: 100% 100%;
  }
  .save-icon {
    width: 23px;
    height: 23px;
    margin-right: 3px;
    background: url('@/assets/images/map/rightMenu/onlinePlotting/save.png') no-repeat;
    background-size: 100% 100%;
  }
  .share-icon {
    width: 23px;
    height: 24px;
    margin-right: 3px;
    background: url('@/assets/images/map/rightMenu/onlinePlotting/share.png') no-repeat;
    background-size: 100% 100%;
  }
  .setting-icon {
    width: 24px;
    height: 25px;
    margin-right: 3px;
    background: url('@/assets/images/map/rightMenu/onlinePlotting/setting.png') no-repeat;
    background-size: 100% 100%;
  }
  .template-icon {
    width: 24px;
    height: 26px;
    margin-right: 3px;
    background: url('@/assets/images/map/rightMenu/onlinePlotting/template.png') no-repeat;
    background-size: 100% 100%;
  }
  .categoryImport-icon {
    width: 24px;
    height: 26px;
    margin-right: 3px;
    background: url('@/assets/images/map/rightMenu/onlinePlotting/categoryImport.png') no-repeat;
    background-size: 100% 100%;
  }
  .merge-icon {
    width: 26px;
    height: 26px;
    margin-right: 3px;
    background: url('@/assets/images/map/rightMenu/onlinePlotting/merge.png') no-repeat;
    background-size: 100% 100%;
  }
}
.line2 {
  width: 1px;
  height: 10px;
  background-color: #a7ccdf;
  margin: 0 10px;
}
.tabs2 {
  width: 115px;
  min-width: 115px;
  height: 460px;
  background: url('@/assets/images/map/rightMenu/onlinePlotting/tabBg.png') no-repeat;
  background-size: 100% 100%;
  overflow-y: auto;
  padding: 10px 0;
  .tab {
    width: 100%;
    height: 35px;
    cursor: pointer;
    color: #eaf3fc;
    font-size: 14px;
    padding: 0 25px;
    display: flex;
    align-items: center;
    &:hover {
      background: url('@/assets/images/map/rightMenu/onlinePlotting/tabActive2.png') no-repeat;
      background-size: 100% 100%;
    }
  }
  .tab_active {
    background: url('@/assets/images/map/rightMenu/onlinePlotting/tabActive2.png') no-repeat;
    background-size: 100% 100%;
  }
}
.tab-content {
  display: flex;
  margin-top: 6px;
  .tab-content2 {
    padding: 18px 15px;
    display: flex;
    flex-direction: column;
    .line {
      height: 100px;
    }
    .line3 {
      display: flex;
    }
    .tab-list {
      width: 100%;
      flex: 1;
      overflow-x: hidden;
      overflow-y: auto;
      display: flex;
      flex-wrap: wrap;
      align-content: baseline;
      .icon {
        width: 45px;
        height: 25px;
        margin-bottom: 8px;
      }
      .tab {
        &:nth-child(3n-1) {
          margin: 18px 23px 0;
        }
      }
      .setting-btn {
        position: absolute;
        bottom: 7px;
        right: 5px;
        width: 25px;
        height: 24px;
        background: url('@/assets/images/map/rightMenu/onlinePlotting/setting2.png') no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
      }
      .setting-menu {
        position: absolute;
        bottom: -103px;
        right: 0;
        z-index: 99;
        width: 66px;
        height: 94px;
        border: 1px solid #2c81ff;
        background-color: #091432;
        //box-shadow: inset 0 0 60px #596891;
        padding: 6px 0;
        &::after {
          content: '';
          width: 14px;
          height: 14px;
          border-top: 1px solid #2c81ff;
          border-left: 1px solid #2c81ff;
          border-bottom: 1px solid transparent;
          border-right: 1px solid transparent;
          position: absolute;
          top: -7px;
          right: 10px;
          transform: rotate(45deg);
          background-color: #091432;
        }
        .menu-item {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #a7b3c5;
          font-size: 14px;
          height: 26px;
          cursor: pointer;
          .icon-switch {
            display: inline-block;
            width: 12px;
            height: 12px;
            background: url('@/assets/images/map/rightMenu/onlinePlotting/switch1.png') no-repeat;
            background-size: 100% 100%;
            margin-right: 6px;
          }
          .icon-eye {
            display: inline-block;
            width: 12px;
            height: 10px;
            background: url('@/assets/images/map/rightMenu/onlinePlotting/show1.png') no-repeat;
            background-size: 100% 100%;
            margin-right: 6px;
          }
          .icon-eye2 {
            display: inline-block;
            width: 12px;
            height: 11px;
            background: url('@/assets/images/map/rightMenu/onlinePlotting/hide1.png') no-repeat;
            background-size: 100% 100%;
            margin-right: 6px;
          }
          .icon-delete {
            display: inline-block;
            width: 11px;
            height: 12px;
            background: url('@/assets/images/map/rightMenu/onlinePlotting/delete1.png') no-repeat;
            background-size: 100% 100%;
            margin-right: 6px;
          }
          &:hover {
            color: #00fde7;
            background: #1e3b77;
            .icon-switch {
              background: url('@/assets/images/map/rightMenu/onlinePlotting/switch2.png') no-repeat;
              background-size: 100% 100%;
            }
            .icon-eye {
              background: url('@/assets/images/map/rightMenu/onlinePlotting/show2.png') no-repeat;
              background-size: 100% 100%;
            }
            .icon-eye2 {
              background: url('@/assets/images/map/rightMenu/onlinePlotting/hide2.png') no-repeat;
              background-size: 100% 100%;
            }
            .icon-delete {
              background: url('@/assets/images/map/rightMenu/onlinePlotting/delete2.png') no-repeat;
              background-size: 100% 100%;
            }
          }
        }
      }
    }
    .tab {
      width: 129px;
      height: 91px;
      background: url('@/assets/images/map/rightMenu/onlinePlotting/box2.png') no-repeat;
      background-size: 100% 100%;
      padding: 7px;
      cursor: pointer;
      position: relative;
      font-size: 14px;
      color: #eaf3fc;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 18px;
      &:hover {
        background: url('@/assets/images/map/rightMenu/onlinePlotting/boxHover2.png') no-repeat;
        background-size: 100% 100%;
      }
      .checked1 {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 13px;
        height: 13px;
        background: url('@/assets/images/map/rightMenu/onlinePlotting/checked1.png') no-repeat;
        background-size: 100% 100%;
      }
      .checked2 {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 13px;
        height: 13px;
        background: url('@/assets/images/map/rightMenu/onlinePlotting/checked2.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    .tab_active {
      background: url('@/assets/images/map/rightMenu/onlinePlotting/boxActive2.png') no-repeat;
      background-size: 100% 100%;
    }
  }
}

.tipTitle {
  position: fixed;
  top: 123px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 10px 30px;
  font-size: 18px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}
.tab-content3 {
  .custom-table {
    width: 100%;
    color: #000;
    .table-header {
      display: flex;
      font-size: 14px;
      width: 100%;
      background-color: #194ba0;
      .th {
        padding: 11px;
        flex: 1;
        color: #edfaff;
        &:last-child {
          flex: unset;
          width: 180px;
        }
      }
    }
    .tr {
      display: flex;
      font-size: 14px;
      height: 32px;
      background: url('@/assets/images/map/rightMenu/onlinePlotting/tr.png') no-repeat;
      background-size: 100% 100%;
      margin-top: 10px;
      &:hover {
        background: url('@/assets/images/map/rightMenu/onlinePlotting/trActive.png') no-repeat;
      }
      .td {
        padding: 11px;
        color: #edfaff;
        flex: 1;
        .icon {
          margin: 0 10px;
          cursor: pointer;
        }
      }
      .td2 {
        flex: unset;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}

.color-container {
  width: 31px;
  height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: #0d3980;
  border: 1px solid #0b5fbb;
  margin-left: 8px;
  :deep(.el-color-picker) {
    height: 14px !important;
    .el-color-picker__trigger {
      width: 14px;
      height: 14px;
      padding: 0;
      border: none;
    }
  }
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    background: url('@/assets/images/inputIcon1.png') no-repeat;
  }
  &::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 6px;
    height: 6px;
    background: url('@/assets/images/inputIcon2.png') no-repeat;
  }
}
.params-box {
  margin: 10px 0;
}
.footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
  padding-right: 40px;
  :deep(.el-pagination__total) {
    color: #a7ccdf !important;
  }
  :deep(.el-pagination) {
    .btn-next,
    .btn-prev {
      background-color: transparent !important;
      border: none !important;
      .el-icon {
        color: #a7ccdf !important;
      }
    }
    .btn-prev:disabled,
    .btn-next:disabled {
      background-color: transparent !important;
      border: none !important;
    }
    .el-pager li {
      text-align: center;
      color: #a7ccdf !important;
      background-color: #0e3064 !important;
      border: 1px solid #0c57a7 !important;
      &:hover {
        background-color: #038dff !important;
        border: 1px solid #038dff !important;
      }
    }
    .el-pager li.is-active {
      background-color: #038dff !important;
      border: 1px solid #038dff !important;
    }
  }
}
.btn-box {
  display: flex;
  align-items: center;
}
.btn-text {
  color: #5983df;
  cursor: pointer;
}
</style>