2

wangjuncheng

2025-07-01 9aed93946a567c874c847b4d3e356058b0455ae7

 src/components/monifangzhen/schemeInfo.vue

@@ -1,32 +1,69 @@
<template>
  <div class="listCard">
    <div class="top"><span>方案详情</span>
      <div @click="togglePick" :class="['pick-button', { active: isPickingActive }]">
        {{ isPickingActive ? '进行计算' : '开始拾取' }}
      </div>
    </div>
    <div class="top"><span>方案详情</span></div>
    <div class="details">
      <div v-if="formattedData.length" class="input-group">
        <div v-for="(item, index) in formattedData" :key="index" class="input-item">
        <div
          v-for="(item, index) in formattedData"
          :key="index"
          class="input-item"
        >
          <label>{{ item.name }}</label>
          <span>{{ item.value }}</span>
          <span
            :class="{ clickable: item.isClickable }"
            @click="item.isClickable ? openGaugeDialog(item.gauges) : null"
          >
            {{ item.value }}
          </span>
        </div>
      </div>
      <div v-else>
        <p style="text-align: center">暂无方案信息</p>
      </div>
    </div>
    <div>

    </div>
    <div></div>
  </div>
  <Message @close="close" class="mess" v-show="messageShow" :mesData="mesData" />
  <Message
    @close="close"
    class="mess"
    v-show="messageShow"
    :mesData="mesData"
  />
  <!-- 添加雨量计弹窗 -->
  <div class="dialoog">
    <el-dialog
      v-model="dialogVisible"
      title="雨量计详情"
      width="50%"
      :before-close="handleClose"
    >
      <div class="table-container">
        <el-table :data="gaugesData" border stripe height="100%">
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="x" label="经度(X)"></el-table-column>
          <el-table-column prop="y" label="纬度(Y)"></el-table-column>
          <el-table-column prop="r" label="半径(r)"></el-table-column>
        </el-table>
      </div>
      <!-- <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </template> -->
    </el-dialog>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, inject, ref, watch } from "vue";
import {
  ElDialog,
  ElTable,
  ElTableColumn,
  ElButton,
  ElMessage,
} from "element-plus";
import dayjs from "dayjs";

// 公共依赖
const props = defineProps({ selectedScheme: { type: Object, default: null } });
const emit = defineEmits(["back"]);
@@ -34,16 +71,13 @@

// 状态管理
const formattedData = ref([]);
const pickedPoints = ref([]);
const handler = ref(null);
const isPickingActive = ref(false);

// 映射表
const areaTypeMap = {
  0: "自定义区域仿真",
  1: "行政区划仿真",
  2: "重点区域仿真",
  3: "重点沟仿真"
  3: "重点沟仿真",
};

const statusMap = {
@@ -51,17 +85,25 @@
  1: "预处理",
  2: "分析中",
  10: "完成",
  20: "出错"
  20: "出错",
};

const typeMap = {
  1: "预测模拟",
  2: "实时模拟",
  3: "历史模拟"
  3: "历史模拟",
};

// 跳过字段列表
const skipKeys = ["geom", "id", "serviceName", "updateTime", "updateUser", "createUser", "bak"];
const skipKeys = [
  "geom",
  "id",
  "serviceName",
  "updateTime",
  "updateUser",
  "createUser",
  "bak",
];

// 处理 data 字段解析
function parseDataField(dataStr) {
@@ -71,20 +113,32 @@
    const parsed = JSON.parse(dataStr);
    const fields = {
      total: "降雨总量（mm）：",
      duration: "降雨时长（分钟）：",
      duration: "降雨时长（小时）：",
      intensity: "降雨强度（mm/小时）：",
      prediction: "降雨场次：",
      model: "降雨模式：",
      history: "历史降雨：",
      gauges: "雨量计列表："
    };

    return Object.entries(parsed)
    const result = Object.entries(parsed)
      .filter(([k]) => fields[k])
      .map(([k, v]) => ({
        name: fields[k],
        value: Array.isArray(v) ? v.join(", ") : v || "无"
        value: v || "无",
      }));

    // 处理雨量计数据
    if (parsed.type == 2 && parsed.gauges && Array.isArray(parsed.gauges)) {
      const gaugeNames = parsed.gauges.map((g) => g.name).join(", ") || "无";
      result.push({
        name: "雨量计列表：",
        value: "查看雨量计列表",
        isClickable: true,
        gauges: parsed.gauges,
      });
    }

    return result;
  } catch (e) {
    return [{ name: "数据：", value: dataStr || "无" }];
  }
@@ -106,6 +160,8 @@

    const entries = Object.entries(newScheme);
    const areaType = newScheme.areaType;

    // console.log(newScheme, "news");

    const result = entries.reduce((acc, [key, value]) => {
      if (skipKeys.includes(key)) return acc;
@@ -148,87 +204,30 @@
  },
  { immediate: true }
);
const dialogVisible = ref(false);
const gaugesData = ref([]);

// 拾取相关逻辑
const viewer = window.viewer;

function getPickPosition(windowPosition) {
  if (!viewer) return null;
  viewer.scene.globe.depthTestAgainstTerrain = true;
  const cartesian = viewer.scene.pickPosition(windowPosition);
  if (!cartesian) return null;

  const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
  
  // 在原有高度上增加300米
  cartographic.height += 80.0;

  return {
    cartesian: Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height),
    longitude: Cesium.Math.toDegrees(cartographic.longitude),
    latitude: Cesium.Math.toDegrees(cartographic.latitude),
    height: cartographic.height
  };
}

function addPointToViewer(point, index) {
  const entity = viewer.entities.add({
    position: point.cartesian,
    billboard: {
      // image: '../path/to/your/icon.png', // 替换为你的图标路径
      width: 32, // 图标宽度
      height: 32, // 图标高度
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM
    },
    label: {
      text: `Point ${index + 1}\n经度: ${point.longitude.toFixed(6)}\n纬度: ${point.latitude.toFixed(6)}`,
      font: '14pt monospace',
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      outlineWidth: 2,
      verticalOrigin: Cesium.VerticalOrigin.TOP,
      pixelOffset: new Cesium.Cartesian2(0, -40), // 调整标签相对于图标的偏移量
      fillColor: Cesium.Color.WHITE,
      outlineColor: Cesium.Color.BLACK
    }
  });

  // 可选：存储实体引用以便后续操作
  pickedPoints.value.push(entity);
}

function initPickHandler() {
  if (!viewer?.scene?.canvas) return;
  handler.value = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

  handler.value.setInputAction((movement) => {
    const position = getPickPosition(movement.position);
    if (position) {
      const index = pickedPoints.value.length;
      pickedPoints.value.push(position);
      addPointToViewer(position, index);
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}

function togglePick() {
  isPickingActive.value ? stopPicking() : startPicking();
}

function startPicking() {
  pickedPoints.value = [];
  viewer.entities.removeAll();
  !handler.value && initPickHandler();
  isPickingActive.value = true;
}

function stopPicking() {
  if (handler.value) {
    handler.value.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
    handler.value.destroy();
    handler.value = null;
// 打开雨量计弹窗
function openGaugeDialog(gauges) {
  if (Array.isArray(gauges) && gauges.length > 0) {
    gaugesData.value = gauges.map((g) => ({
      name: g.name || "未知",
      x: g.x != null ? g.x.toFixed(2) : "-",
      y: g.y != null ? g.y.toFixed(2) : "-",
      r: g.r || "-",
    }));
    dialogVisible.value = true;
  } else {
    ElMessage({
      message: "雨量计数据出错，请重新新建模拟方案！",
      type: "warning",
    });
  }
}

  isPickingActive.value = false;
// 关闭弹窗
function handleClose(done) {
  done();
}
</script>

@@ -237,7 +236,6 @@
  margin-bottom: 20px;
  border-radius: 8px;
  color: white;

  .left-top {
    display: flex;
    justify-content: space-between;
@@ -265,7 +263,7 @@
  }

  .details {
    padding: 8px;
    padding-left: 8px;

    .input-group {
      display: flex;
@@ -312,4 +310,31 @@
  letter-spacing: 2px;
  font-weight: bolder;
}

.clickable {
  color: #5bc0de;
  cursor: pointer;
  text-decoration: underline;
}

.dialoog {
  ::v-deep .el-dialog__title {
    color: #fff !important;
  }

  ::v-deep .el-dialog {
    background-color: rgb(5, 75, 69) !important;
  }

  .el-dialog__body {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .table-container .el-table {
    font-size: 14px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
</style>