deepdragon/src/ldmap/components/comRight/right.vue

<template>
  <div class="left-main" :class="[cardShow ? 'leavhide' : 'leavshow']">
    <div class="leftIcon" @click="setCard">
      <img :src="cardShow ? rightIcon : leftIcon" />
    </div>
    <div class="left-tabs">
      <div class="left-item" @click="lineFirst = !lineFirst">
        <img
          alt="算法识别"
          :class="[lineFirst ? 'activeImg' : '']"
          :src="upIcon"
        />
        特征物识别
      </div>
      <transition>
        <div class="item-data" v-if="lineFirst">
          <el-button type="primary" @click="emitFind">开始识别</el-button>

          <!-- <el-button
              type="info"
              color="rgb(8, 240, 36, 0.6)"
              @click="verificationChange()"
              ><span style="color: #fff">数据核验</span></el-button> -->

          <el-button
            type="info"
            color="rgb(18, 180, 106, 0.6)"
            @click="setPolygonData"
            ><span style="color: #fff">特征物保存</span></el-button
          >
          <div class="loadStyle">
            <el-button
              type="success"
              color="rgb(255,0,0, 0.6)"
              @click="addPolygon('House')"
              ><span style="color: #fff">新增房屋</span></el-button
            >
            <el-button
              type="warning"
              color="rgb(94,208,81, 0.6)"
              @click="addPolygon('River')"
              ><span style="color: #fff">新增河流</span></el-button
            >
            <el-button
              type="info"
              color="rgb(118,116,218, 0.6)"
              @click="addPolygon('Road')"
              ><span style="color: #fff">新增道路</span></el-button
            >
            <el-button
              type="info"
              color="rgb(8, 240, 36, 0.6)"
              @click="addPointDevice()"
              ><span style="color: #fff">新增站点</span></el-button
            >
          </div>

          <div style="margin-top: 10px"></div>
          <el-button
            type="info"
            color="rgb(180, 100, 166, 0.6)"
            @click="exportPng()"
            ><span style="color: #fff">导 出</span></el-button
          >
        </div>
      </transition>
    </div>
    <div class="left-tabs">
      <div class="left-item" @click="lineSecond = !lineSecond">
        <img alt="官网布线" :src="lineSecond ? upIcon : downIcon" />

        管网布线
      </div>

      <div v-if="lineSecond" class="item-data">
        <el-button type="primary" @click="emitLine">开始布线</el-button>
        <el-button
        type="info"
        color="rgb(18, 180, 106, 0.6)"
        @click="setPolineData"
        ><span style="color: #fff">管线数据保存</span></el-button
      >
        <div style="margin-top: 10px"></div>
        <el-button
          type="primary"
          color="rgb(7, 253, 253, 0.6)"
          @click="addPointBy"
          ><span style="color: #fff">新增检修井</span></el-button
        >
        <el-button color="rgb(152, 51, 147, 0.6)" @click="addLine">
          <span style="color: #fff">新增管线</span></el-button
        >
        <div style="margin-top: 10px"></div>
        <div v-if="showCheck">
          <el-checkbox-group
            v-model="checkedpoint"
            @change="handleCheckedPointChange"
          >
            <el-checkbox
              v-for="item in legendPointeData"
              :key="item.styleId"
              :label="item.styleId"
              border
              style="width: 30%; margin-right: 3%"
              >{{ item.label }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
      </div>
    </div>
    <div class="left-tabs">
      <div class="left-item" @click="lineThird = !lineThird">
        <img alt="工程报价" :src="lineThird ? upIcon : downIcon" />
        工程报价
      </div>

      <div v-if="lineThird" class="item-data">
        <el-button type="primary" @click="setPrice">报价清单</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import leftIcon from "@map/assets/tool/left.png";
import rightIcon from "@map/assets/tool/right.png";
import upIcon from "@map/assets/tool/up.png";
import downIcon from "@map/assets/tool/down.png";
import useMapDataStore from "@map/store/modules/mapData";
import { ElMessageBox } from "element-plus";
let mapdata = useMapDataStore();
import { storeToRefs } from "pinia";
const $ldMap = inject("$ldMap"); // 调用全局变量
const value = ref(null);

const { proxy } = getCurrentInstance();
const { showCheck, pointArray, checkedLegend, checkedpoint,layerId } =
  storeToRefs(mapdata);
onMounted(() => {
  getlegend();

  document.addEventListener("keyup", (e) => {
    if (e.key == "Delete") {
      let layerVal = $ldMap.delSketch();
      mapdata.delData(layerVal);
    }
  });
});

const legendlineData = ref([]);
const legendPointeData = ref([]);
const checkAll = ref(true);

const isIndeterminate = ref(true);
const handleCheckAllChange = (val) => {
  checkedLegend.value = val
    ? legendlineData.value.map((res) => {
        return res.styleId;
      })
    : [];
};
const handleCheckedLegendChange = (value) => {
  const checkedCount = value.length;
  checkAll.value = checkedCount === legendlineData.value.length;
  isIndeterminate.value =
    checkedCount > 0 && checkedCount < legendlineData.value.length;
};

const pointLayerData = ref([]);
const handleCheckedPointChange = (value) => {
  let data = new Set(value);
  let arr = pointLayerData.value.filter((res) => {
    if (data.has(res.styleId)) {
      return res;
    }
  });
  addPointMap(arr);
};

watch(pointArray, (val) => {
  pointLayerData.value = val;
  addPointMap(val);
});
const getlegend = () => {
  mapdata.getSetlineStyle().then((e) => {
    let point = e.point,
      line = e.line;
    for (let i in line) {
      legendlineData.value.push(line[i]);
    }
    for (let i in point) {
      if(point[i].visible)
      legendPointeData.value.push(point[i]);
    }
  });
};

const cardShow = ref(true);
const setCard = function () {
  cardShow.value = !cardShow.value;
};
const lineFirst = ref(true);
const lineSecond = ref(false);
const lineThird = ref(false);
const emit = defineEmits();
const a = ref("");
function emitFind() {
  emit("update:findValue", true);
  //叠加图层

  // 高层文件 航拍文件
}
function exportPng() {
  $ldMap.arcgisPrint();
}
function mergeOpt() {
  $ldMap.MergeOptimization();
}
function addPointBy() {
  $ldMap.addOpionPoint()
}
function addLine() {
  $ldMap.startDrawLine();
}
function addPointMap(val) {
  $ldMap.removePoint();
  val.forEach((data) => {
    $ldMap.addDefaultByPoint(data);
  });
}
function getAllMapData() {
  $ldMap.getAllData();
}

function addPolygon(type) {
  // console.log(mapdata.house)
  $ldMap.DrawSketch("polygon", type);
}
function addPointDevice() {
  if ($ldMap.sketchLayer.pointLayer.graphics.items.length) {
    ElMessageBox.confirm("当前已添加设备点，是否删除当前设备点重新添加设备点", {
      confirmButtonText: "删除点位",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        $ldMap.sketchLayer.pointLayer.removeAll();
        $ldMap.DrawSketch("point");
      })
      .catch(() => {});
  } else {
    $ldMap.DrawSketch("point");
  }

  console.log();
}
function verificationChange() {
  emit("changeVerification");
}
function setPolineData(){
 let data =   $ldMap.getpointByStart()

 console.log(JSON.stringify(data))
}
//保存特征物
function setPolygonData() {
  let polygonList = [];
  let polygondata = $ldMap.getSketchDataByType("polygon");
  let pointdata = $ldMap.getSketchDataByType("point");

  let arrParam = [];

  polygondata.forEach((res) => {
    let attributesData = res.attributes.data;
    if (attributesData.action != undefined) {
      if (attributesData.action) {
        let { id, layersId, geometryId, type, action } = attributesData;
        let rings = res.geometry.rings;
        let innerings = [],
          path = rings[0],
          extend = null;
        if (rings.length > 1) {
          innerings = rings.splice(1, rings.length);
          console.log(innerings);
        }
        if (type == "House" && attributesData.isExit) {
          let {
            area,
            houseFloors,
            houseMaterial,
            households,
            inWater,
            outWater,
            peopleNum,
          } = attributesData;
          extend = {
            area,
            houseFloors,
            houseMaterial,
            households,
            inWater,
            outWater,
            peopleNum,
          };
        }
        arrParam.push({
          id,
          layersId,
          action,
          geometryId,
          type,
          extend,
          path: JSON.stringify(path),
          innerings: JSON.stringify(innerings),
        });
      }
    }
  });
  let deviceObj = {}
  if(pointdata.length){
    pointdata.forEach((res) => {
      deviceObj={
        action:1,
        type: "Station",
        path: JSON.stringify([[res.geometry.x, res.geometry.y]]),
        layersId:layerId.value,
        geometryId: Date.now()
      };
  });

  }else{
    deviceObj={
        action:0,
    };

  }

  console.log(arrParam,deviceObj);
  mapdata.updateRecon(arrParam,deviceObj).then((res) => {
        $ldMap.removeAllLayer();
        $ldMap.addDefaultData(mapdata.road, "Road");
        $ldMap.addDefaultData(mapdata.house, "House");
        $ldMap.addDefaultData(mapdata.river, "River");
        $ldMap.addDeviceData(mapdata.station, "Station");
  });
}

function setPrice() {
  mapdata.createcsvFile().then((res) => {
    emit("update:priceFlag", true);
  });
}
function set() {

}

function emitLine() {
  emit("update:lineValue", true);
}

//添加div marker
function addMarker(icon, lng, lat) {
  var latlng = new L.LatLng(lat, lng);
  var marker = new L.Marker(latlng, { icon: icon, pane: drawPane });
  vectorsLayer.addLayer(marker);
  return marker;
}
</script>

<style scoped lang="scss">
:deep(.el-checkbox__label) {
  color: #fff;
}
:deep(.el-checkbox__inner) {
  background-color: rgba(0, 26, 61, 0.5);
}
:deep(.el-table) {
  width: 90%;
  margin: 0 auto;
  background: transparent;
}
:deep(.el-table tr):hover {
  background: transparent;
}
:deep(.el-table__body tr.current-row > td.el-table__cell) {
  background-color: rgb(184, 224, 250) !important;
}
:deep(.el-table th.el-table__cell) {
  background: transparent;
}

:deep(.el-table__row) {
  &:hover {
    background: rgb(184, 224, 250);
    border: 1px solid #313463;
  }
}
.leftIcon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 48px;
  box-shadow: 0 0 20px 10px rgba(22, 143, 181, 0.5) inset;
  position: absolute;
  top: 0px;
  left: -50px;
  img {
    height: 30px;
  }
}
.item {
  width: 31px;

  height: 13px;
  border-radius: 3px;

  margin-left: 23px;
  margin-top: 3px;
}
.left-tabs {
  color: #fff;
  .left-item {
    color: #fff;
    cursor: pointer;
    box-shadow: 0 0 20px 10px rgba(22, 143, 181, 0.5) inset;
    align-items: center;
    padding: 10px;
    display: flex;
    .activeImg {
      transform: rotate(180deg);
    }
    img {
      height: 15px;
      margin-right: 5px;
    }
  }
  .item-data {
    padding: 10px;
    min-height: 100px;
    .loadStyle {
      margin-top: 10px;
      display: flex;
      justify-content: s;
      align-items: center;
    }
  }
}
.left-select {
  color: #fff;
  display: flex;
  padding: 10px;
  line-height: 35px;
  .select {
    flex: 1;
  }
  :deep(.el-input--large) {
    height: 35px;
  }
  :deep(.el-select .el-input__wrapper) {
    background: rgb(0, 26, 61, 0.5);
    color: #fff;
  }

  :deep(.el-select .el-input__inner) {
    color: #fff;
  }
}

.leavhide {
  animation: fadeshow 1s ease forwards;
}
.leavshow {
  animation: fadenum 1s ease forwards;
}
@keyframes fadenum {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes fadeshow {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}
</style>