4pc/src/view/map/map-right-poly.vue

<template>
  <div class="right-layout">
    <div class="right-content">
      <div class="tree-layout">
        <p class="sub-title">全部数据</p>
        <div class="poly-list">
          <template v-if="data.polygons.length > 0" v-for="item in data.polygons">
            <div class="poly-list-item">
              <div class="left">
                <span>{{ item.name ? item.name : "本体边界" + item.id }}</span>
              </div>
              <div class="right">
                <el-icon class="icon">
                  <Delete @click="del(item.id)" />
                </el-icon>
                <el-icon class="icon">
                  <Edit @click="handleShowEditModel(item)" />
                </el-icon>
                <el-icon class="icon">
                  <Download @click="handleDownload(item)" />
                </el-icon>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="empty">暂没数据</div>
          </template>
        </div>
      </div>
    </div>
    <SingleInput :visible="isShowPolyEditName" @update:visible="isShowPolyEditName = false" :value="currentPoly.name"
      :update-value="updatePolyName" title="修改边界名称" />
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import type { PolyDataType, DrawingDataType } from "@/request/drawing.ts";
import { Delete, Download, Edit } from "@element-plus/icons-vue";
import SingleInput from "@/components/single-input.vue";
import { downloadPointsXLSL2 } from "@/util/pc4xlsl";
import { scenePoints } from "@/store/scene";

import { relics } from "@/store/relics";
import { ElMessageBox } from "element-plus";
import { getWholeLinePolygonPoints } from "drawing-board";

const props = defineProps<{
  data: DrawingDataType | null;
}>();

const emit = defineEmits<{
  (e: "del", id: string): void;
  (e: "edit", data: PolyDataType): void;
  // (e: "edit", id: string): void;
}>();

const relicsName = ref("");

const currentPoly = ref<PolyDataType>({
  id: "",
  name: "",
  lineIds: [],
});
const isShowPolyEditName = ref(false);
watchEffect(() => {
  relicsName.value = relics.value?.name || "";
  console.log("props", props.data);
});
const updatePolyName = (name: string) => {
  currentPoly.value.name = name;
  emit("edit", currentPoly.value);
};
const handleShowEditModel = (item: PolyDataType) => {
  isShowPolyEditName.value = true;
  currentPoly.value = item;
};

const del = async (id: string) => {
  const ok = await ElMessageBox.confirm("确定要删除吗", {
    type: "warning",
  });
  if (ok) {
    emit("del", id);
  }
};
const handleDownload = async (item: any) => {
  const polygonPoints: any[] = getWholeLinePolygonPoints(props.data as any, item.id);

  const points = polygonPoints.map((p) => {
    const pos = [p.x, p.y, 0];
    if (p.rtk) {
      const sPoint = scenePoints.value.find(({ id }) => id.toString() === p.title);
      if (sPoint) {
        pos[2] = sPoint.pos[2];
      }
    }
    return pos;
  });
  const dists = polygonPoints.map((p) => ({
    title: p.id,
    desc: p.title || p.id,
  }));
  await downloadPointsXLSL2(
    points,
    dists,
    `${item.name ? item.name : "本体边界" + item.id}`
  );
};
</script>

<style lang="scss" scoped>
.tree-item {
  display: flex;
  width: calc(100% - 50px);
  align-items: center;
  justify-content: space-between;

  .title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis; //文本溢出显示省略号
    white-space: nowrap; //文本不会换行
  }

  .oper {
    flex: none;
  }
}

.disable {
  pointer-events: all;
}

.tree-layout {
  p {
    color: #303133;
    font-size: 14px;
  }

  .sub-title {
    font-size: 14px;
    font-weight: bolder;
    margin-bottom: 30px;
  }
}

.right-layout {
  display: flex;
  height: 100%;
  flex-direction: column;
  font-size: 16px;

  .right-content {
    flex: 1;
    overflow-y: auto;
  }
}

.tree-layout .tree-scene-name {
  font-size: 10px;
  margin: 0;
  color: #999;
}

.poly-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  user-select: none;

  .poly-list-item {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    .icon {
      margin-left: 8px;
      font-size: 16px;
      color: #409eff;
      cursor: pointer;

    }
  }

  .empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: gray;
    padding-top: 40px;
  }
}
</style>