NslWeb.git - Gitblit

<template>
  <div class="left" v-show="!showAddIns">
    <div class="left-top">
      <span>仿真推演方案</span>
    </div>
    <div class="left-content">
      <div style="
          display: flex;
          justify-content: space-evenly;
          padding: 8px 8px 8px 0px;
        " v-if="btnShow">
        <el-button style="width: 45%" @click="handleClick">新建仿真方案</el-button>
        <el-button style="width: 45%" @click="deleteSelectedScheme">删除仿真方案</el-button>
      </div>
      <!-- <schemeCard ref="schemeCardRef" @start="start" @end="end" @reset="reset" @closeBtn="handleBackFromParent" /> -->
      <schemeCard ref="schemeCardRef" @start="start" @end="end" @reset="reset" :deleteSim="deleteSim"
        :showAddIns="showAddIns" @closeBtn="handleBackFromParent" />
    </div>
  </div>
  <div class="left" v-show="showAddIns">
    <simulation @start="start" @end="end" @back="handleBack" />
  </div>
</template>
 
<script setup>
import { ElMessageBox, ElMessage } from "element-plus";
import { ref, onMounted, onBeforeUnmount, defineEmits } from "vue";
import Simulation from "./Simulation.vue";
import schemeCard from "@/components/monifangzhen/schemeCard.vue";
import { useSimStore } from "@/store/simulation.js";
// import listInfo from "@/components/monifangzhen/listInfo.vue";
// import RiverLevel from "@/components/monifangzhen/RiverLevel.vue";
import { createPoint, removeEntities } from "@/utils/map";
// import { deviceDictList, getDictName } from "@/constant/dict.js";
 
const emits = defineEmits(["start", "end"]);
 
const list = [
  {
    alias: "孙胡沟主沟断面1",
    id: "1",
    name: "dm1",
    x: 466045.260861,
    y: 4491220.49214,
  },
  {
    alias: "大窑沟断面上",
    id: "5",
    name: "dm5",
    x: 466537.985744,
    y: 4489370.15379,
  },
  {
    alias: "大窑沟断面中",
    id: "6",
    name: "dm6",
    x: 466404.576611,
    y: 4490310.08178,
  },
  {
    alias: "大窑沟断面下",
    id: "7",
    name: "dm7",
    x: 466072.064452,
    y: 4490948.82854,
  },
  {
    alias: "南梁小东沟断面上",
    id: "8",
    name: "dm8",
    x: 466792.675909,
    y: 4490337.37001,
  },
  {
    alias: "南梁小东沟断面中",
    id: "9",
    name: "dm9",
    x: 466473.302528,
    y: 4490836.64359,
  },
  {
    alias: "南梁小东沟断面下",
    id: "10",
    name: "dm10",
    x: 466135.231655,
    y: 4491095.88179,
  },
  {
    alias: "段树底下东沟断面上",
    id: "11",
    name: "dm11",
    x: 466738.604782,
    y: 4491124.1807,
  },
  {
    alias: "段树底下东沟断面中",
    id: "12",
    name: "dm12",
    x: 466341.409407,
    y: 4491137.31948,
  },
  {
    alias: "段树底下东沟断面下",
    id: "13",
    name: "dm13",
    x: 466094.804645,
    y: 4491224.23755,
  },
  {
    alias: "大东沟断面上",
    id: "14",
    name: "dm14",
    x: 466747.70086,
    y: 4491537.54688,
  },
  {
    alias: "大东沟断面中",
    id: "15",
    name: "dm15",
    x: 466333.324005,
    y: 4491586.05929,
  },
  {
    alias: "大东沟断面下",
    id: "16",
    name: "dm16",
    x: 465951.288759,
    y: 4491705.31897,
  },
  {
    alias: "河东南泥沟断面下",
    id: "17",
    name: "dm17",
    x: 466121.082202,
    y: 4491998.41479,
  },
  {
    alias: "河东南泥沟断面下中",
    id: "18",
    name: "dm18",
    x: 466474.818541,
    y: 4491931.71023,
  },
  {
    alias: "河东南泥沟断面上",
    id: "19",
    name: "dm19",
    x: 466697.167097,
    y: 4491715.42572,
  },
  {
    alias: "于家西沟断面上",
    id: "20",
    name: "dm20",
    x: 464902.207844,
    y: 4491646.6998,
  },
  {
    alias: "于家西沟断面中",
    id: "21",
    name: "dm21",
    x: 465455.047209,
    y: 4491935.75293,
  },
  {
    alias: "于家西沟断面下",
    id: "22",
    name: "dm22",
    x: 465704.683997,
    y: 4492153.04811,
  },
  {
    alias: "尹家西沟断面上",
    id: "23",
    name: "dm23",
    x: 464103.774393,
    y: 4492603.80927,
  },
  {
    alias: "尹家西沟断面中",
    id: "24",
    name: "dm24",
    x: 464294.792016,
    y: 4492584.60644,
  },
  {
    alias: "尹家西沟断面下",
    id: "25",
    name: "dm25",
    x: 464455.489382,
    y: 4492505.77377,
  },
  {
    alias: "北大地西洼子沟断面上",
    id: "26",
    name: "dm26",
    x: 464908.271896,
    y: 4493197.07565,
  },
  {
    alias: "北大地西洼子沟断面中",
    id: "27",
    name: "dm27",
    x: 465080.086689,
    y: 4493383.03989,
  },
  {
    alias: "北大地西洼子沟断面下",
    id: "28",
    name: "dm28",
    x: 465330.734152,
    y: 4493494.21417,
  },
  {
    alias: "支沟1断面上",
    id: "30",
    name: "dm30",
    x: 464976.997813,
    y: 4490156.96448,
  },
  {
    alias: "孙胡沟主沟断面2",
    id: "2",
    name: "dm2",
    x: 465942.192682,
    y: 4492244.00888,
  },
  {
    alias: "孙胡沟主沟断面3",
    id: "3",
    name: "dm3",
    x: 465374.193188,
    y: 4493018.18613,
  },
  {
    alias: "孙胡沟主沟断面4",
    id: "4",
    name: "dm4",
    x: 465198.335694,
    y: 4494063.22434,
  },
  {
    alias: "支沟1断面中",
    id: "31",
    name: "dm31",
    x: 465486.378142,
    y: 4490872.52256,
  },
  {
    alias: "支沟1断面下",
    id: "32",
    name: "dm32",
    x: 465729.950878,
    y: 4491526.42945,
  },
  {
    alias: "支沟2断面上",
    id: "33",
    name: "dm33",
    x: 464177.553687,
    y: 4492084.32219,
  },
  {
    alias: "支沟2断面中",
    id: "34",
    name: "dm34",
    x: 464723.318324,
    y: 4492553.27551,
  },
  {
    alias: "支沟2断面下",
    id: "35",
    name: "dm35",
    x: 465163.972735,
    y: 4492925.204,
  },
];
const simStore = useSimStore();
const showAddIns = ref(false);
const btnShow = ref(true);
let divPointList = [];
 
function handleClick() {
  showAddIns.value = true;
}
 
function handleBack(value) {
  showAddIns.value = false; // 隐藏子组件
}
function handleBackFromParent(value) {
  if (value === false) {
    btnShow.value = false;
  } else btnShow.value = true;
}
function initDevicePoint() {
  list.forEach((item) => {
    item.id = item.id + item.alias;
    item.name = item.alias;
 
    // 定义 UTM Zone 50N 投影
    proj4.defs(
      "EPSG:32650",
      "+proj=utm +zone=50 +datum=WGS84 +units=m +no_defs"
    );
 
    // 转换函数
    function utmToWgs84(x, y) {
      return proj4("EPSG:32650", "EPSG:4326", [x, y]);
    }
 
    // 转换坐标
    const [longitude, latitude] = utmToWgs84(item.x, item.y);
 
    item.longitude = longitude;
    item.latitude = latitude;
    const divPoint = earthCtrl.factory.createDivPoint(
      item.alias,
      { lon: longitude, lat: latitude },
      {
        type: "custom",
        offset: ["c", 60],
        description: `
            <div class="divPoint-custom">
                <p>${item.alias}</p>
            </div>
          `,
        near: 0,
        far: 500000,
      }
    );
 
    divPointList.push(divPoint);
    // item.longitude = turf.toWgs84([item.x, item.y])[0]
    // item.latitude = turf.toWgs84([item.x, item.y])[1]
    // createPoint(item)
  });
}
 
function createLabel(item) {
  const { name, x, y, showBillboard = false } = item;
  let position = Cesium.Cartesian3.for(x, y);
  let model = {
    position: position,
    label: {
      // 文本。支持显式换行符“ \ n”
      text: name || "默认标签",
      // 字体样式，以CSS语法指定字体
      font: "14pt Source Han Sans CN",
      // 字体颜色
 
      fillColor: Cesium.Color.AQUA,
      // 背景颜色
      backgroundColor: showBillboard
        ? Cesium.Color.BLACK.withAlpha(0.8)
        : Cesium.Color.SKYBLUE,
      // 是否显示背景颜色
      showBackground: true,
      // 字体边框
      outline: false,
      // 字体边框颜色
      outlineColor: Cesium.Color.WHITE,
      // 字体边框尺寸
      outlineWidth: 0,
      // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
      scale: 1.0,
      scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.5),
      // 设置样式：FILL：填写标签的文本，但不要勾勒轮廓；OUTLINE：概述标签的文本，但不要填写；FILL_AND_OUTLINE：填写并概述标签文本。
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      // 相对于坐标的水平位置
      verticalOrigin: Cesium.VerticalOrigin.CENTER,
      // 相对于坐标的水平位置
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
      pixelOffset: new Cesium.Cartesian2(0, -40),
      // pixelOffset: new Cesium.Cartesian2(0, 0),
      // 显示在距相机的距离处的属性，多少区间内是可以显示的
      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000000),
      heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
      disableDepthTestDistance: Number.POSITIVE_INFINITY,
      // 是否显示
      show: true,
    },
 
    show: true,
  };
  const entity = viewer.entities.add(model);
  // entities.push(entity)
}
const schemeCardRef = ref(null);
 
function start(form) {
  emits("start", form);
}
function end(form) {
  emits("end");
}
onMounted(() => {
  // initDevicePoint()
});
 
onBeforeUnmount(() => {
  removeEntities();
  divPointList.forEach((item) => {
    item.deleteObject(item);
  });
  divPointList = [];
});
 
///////////////////////////删除仿真方案///////////////////////////
const deleteSim = ref(false);
 
function reset() {
  deleteSim.value = false; // 重置标志位
}
function deleteSelectedScheme() {
  deleteSim.value = true;
}
///////////////////////////删除仿真方案///////////////////////////
</script>
<style lang="less" scoped>
.mock {
  padding-top: 10px;
  padding-right: 10px;
  display: flex;
  width: 100%;
  justify-content: flex-end;
  box-sizing: border-box;
 
  &-item {
    width: 105px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    margin-left: 10px;
    cursor: pointer;
    background: url("@/assets/img/left/cardbtn.png") no-repeat;
 
    color: white;
 
    &.active {
      background: url("@/assets/img/left/cardbtnac.png") no-repeat;
    }
  }
}
</style>