修改

guonan

2025-06-18 1188387a47e55590a87c161cb43b2db0729b0146

修改

 src/components/menu/Device.vue

@@ -58,13 +58,46 @@
        >
          <template #default="{ node, data }">
            <span v-if="!data.children" class="device-tree-item">
              <span class="device-item-text">{{ node.label }}</span>
              <span class="device-item-text" :title="node.label">{{
                node.label
              }}</span>
            </span>
            <span v-else class="device-tree-category">
              {{ node.label }} ({{ data.children.length }})
            </span>
          </template>
        </el-tree>

        <!-- <el-tree
          v-show="!isLoading"
          :data="deviceTree"
          default-expand-all
          node-key="deviceId"
          :props="treeProps"
          @node-click="handleTreeNodeClick"
          class="device-tree"
        >
          <template #default="{ node, data }">
            <span v-if="!data.children" class="device-tree-item">
              <el-tooltip :content="node.label" placement="top" effect="dark">
                <span class="device-item-text" :title="node.label">{{
                  node.label
                }}</span>
              </el-tooltip>
            </span>
            <span v-else class="device-tree-category">
              <el-tooltip
                :content="`${node.label} (${data.children.length})`"
                placement="top"
                effect="dark"
              >
                <span :title="`${node.label} (${data.children.length})`"
                  >{{ node.label }} ({{ data.children.length }})</span
                >
              </el-tooltip>
            </span>
          </template>
        </el-tree> -->
      </div>
    </div>
  </div>
@@ -147,7 +180,7 @@
const DevicePoints = async (item) => {
  // 根据需求可增删
  item.type = getDictName(deviceDictList, item.dictDeviceType);
  item.name = item.deviceName
  item.name = item.deviceName;
  // item.name = item.deviceName.split(selectValue.value)[1] || item.deviceName;
  item.id = item.deviceId;
  item.className = "device";
@@ -271,7 +304,10 @@
  }));
});

function handleTreeNodeClick(data) {
function handleTreeNodeClick(data, node) {
  if (data.children) {
    return; // 一级节点，不执行点击逻辑
  }
  if (selectValue.value) {
    // 此处调用是因为GisView页面会在点击下一乡镇之前把上一个选择的区域的隐患点清除掉（如果刚好选择了孙胡沟，那么下一个点击将会清空孙胡沟的隐患点）
    initializeDevicePoints();
@@ -404,6 +440,7 @@
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

:deep(.el-select__placeholder) {

 src/components/menu/Location.vue

@@ -57,7 +57,7 @@
          @click="handleClick(item)"
        >
          <div class="district-item-icon"></div>
          <div class="district-item-text">{{ item.hdName }}</div>
          <div class="district-item-text" :title="item.hdName">{{ item.hdName }}</div>
        </div>
      </div>
    </div>

 src/components/menu/TimeLine.vue

@@ -2,20 +2,30 @@
  <div class="timeline-container">
    <div class="controls">
      <div class="control-btn" @click="skipBackward">
        <img src="@/assets/img/timeline/left.png" class="fas fa-step-backward" />
        <img
          src="@/assets/img/timeline/left.png"
          class="fas fa-step-backward"
        />
      </div>
      <div class="control-btn play-btn" @click="togglePlay">
        <img v-show="isPlaying" src="@/assets/img/timeline/stop.png" />
        <img v-show="!isPlaying" src="@/assets/img/timeline/start.png" />
      </div>
      <div class="control-btn" @click="skipForward">
        <img src="@/assets/img/timeline/right.png" class="fas fa-step-forward" />
        <img
          src="@/assets/img/timeline/right.png"
          class="fas fa-step-forward"
        />
      </div>
      <div class="speed-control">
        <div @click="toggleSpeedMenu">{{ playbackRate }}X</div>
        <div class="speed-menu" v-show="showSpeedMenu">
          <div v-for="rate in playbackRates" :key="rate" @click.capture="setPlaybackRate(rate)"
            :class="{ active: playbackRate === rate }">
          <div
            v-for="rate in playbackRates"
            :key="rate"
            @click.capture="setPlaybackRate(rate)"
            :class="{ active: playbackRate === rate }"
          >
            {{ rate }}X
          </div>
        </div>
@@ -25,18 +35,33 @@
    <div class="timeline">
      <div class="dates">
        <div class="current-date">当前播放时间：{{ currentPlayingTime }}</div>
        <div v-for="(date, index) in visibleDates" :key="index" class="date-label">
        <div
          v-for="(date, index) in visibleDates"
          :key="index"
          class="date-label"
        >
          <!-- {{ formatDate(date) }} -->
        </div>
        <div>专题渲染:
          <el-switch v-model="isColorRenderEnabled" @change="handleColorRenderChange" style="margin-top:-3px"
            :disabled="!isPlaying || !isWaterPrimitiveCreated" />
        <div>
          专题渲染:
          <el-switch
            v-model="isColorRenderEnabled"
            @change="handleColorRenderChange"
            style="margin-top: -3px"
            :disabled="!isPlaying || !isWaterPrimitiveCreated"
          />
          <!-- active-text="开" inactive-text="关" -->
        </div>
      </div>
      <div class="timeline-track" ref="timelineTrack" @click="seekToPosition">
        <div class="timeline-progress" :style="{ width: progressPercentage + '%' }"></div>
        <div class="timeline-cursor" :style="{ left: progressPercentage + '%' }"></div>
        <div
          class="timeline-progress"
          :style="{ width: progressPercentage + '%' }"
        ></div>
        <div
          class="timeline-cursor"
          :style="{ left: progressPercentage + '%' }"
        ></div>
        <div class="scale-markers">
          <div class="scale-marker" style="left: 0%"></div>
          <div class="scale-marker" style="left: 25%"></div>
@@ -45,27 +70,53 @@
          <div class="scale-marker" style="left: 100%"></div>
        </div>
        <div class="time-markers">
          <div v-for="(time, index) in timeMarkers" :key="index" class="time-marker"
            :style="{ left: `${index * 25}%`, transform: 'translateX(-50%)' }">
            <div class="date-part">{{ time.split(' ')[0] }}</div>
            <div class="time-part">{{ time.split(' ')[1] }}</div>
          <div
            v-for="(time, index) in timeMarkers"
            :key="index"
            class="time-marker"
            :style="{ left: `${index * 25}%`, transform: 'translateX(-50%)' }"
          >
            <div class="date-part">{{ time.split(" ")[0] }}</div>
            <div class="time-part">{{ time.split(" ")[1] }}</div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div style="display: flex;">
        <ratelevel ref="ratelevelRef" :playing-time="sendCurrentPlayingTime"
      <div style="display: flex">
        <ratelevel
          ref="ratelevelRef"
          :playing-time="sendCurrentPlayingTime"
          @finish-calculation="handleFinishCalculation"
          style="margin-top: 12px; margin-left: 28px; margin-right: 10px;justify-content: flex-end;" />
        <crossanalysis ref="crossRef"
          style="margin-top: 12px; margin-left: 16px; margin-right: 20px;justify-content: flex-end;" />

          style="
            margin-top: 12px;
            margin-left: 28px;
            margin-right: 10px;
            justify-content: flex-end;
          "
        />
        <crossanalysis
          ref="crossRef"
          style="
            margin-top: 12px;
            margin-left: 16px;
            margin-right: 20px;
            justify-content: flex-end;
          "
        />
      </div>
      <el-button @click="handleBack"
        style="margin-top: 3px; margin-left: 28px; margin-right: 10px;width: 75%;height: 30%;">结束模拟</el-button>
      <el-button
        @click="handleBack"
        style="
          margin-top: 3px;
          margin-left: 28px;
          margin-right: 10px;
          width: 75%;
          height: 30%;
        "
        >结束模拟</el-button
      >
    </div>

  </div>
</template>

@@ -78,7 +129,7 @@
  defineProps,
  onBeforeUnmount,
  inject,
  reactive
  reactive,
} from "vue";
import ratelevel from "@/components/menu/flowRate_waterLevel.vue";
import crossanalysis from "@/components/menu/CrossSectionalAnalysis.vue";
@@ -100,9 +151,14 @@
import { useSimStore } from "@/store/simulation";
import { storeToRefs } from "pinia";
const simStore = useSimStore();
const { selectedScheme } = storeToRefs(simStore);
const { selectedScheme, frameNum } = storeToRefs(simStore);

const emit = defineEmits(["timeUpdate", "isPlaying", "playbackFinished", "isColorRender"]);
const emit = defineEmits([
  "timeUpdate",
  "isPlaying",
  "playbackFinished",
  "isColorRender",
]);
// 定义props
const props = defineProps({
  waterSimulateParams: {
@@ -136,10 +192,10 @@
  rainSize: 0.5,
  rainSpeed: 50,
  rainColor: "#99B3CC",
  rainDensity: 30 // 雨的密度
  rainDensity: 30, // 雨的密度
});
let minFlowRate = ref()
let maxFlowRate = ref()
let minFlowRate = ref();
let maxFlowRate = ref();
// 计算属性
const progressPercentage = computed(
  () => (currentTime.value / duration.value) * 100
@@ -204,8 +260,8 @@
    return; // 阻止后续逻辑执行
  }
  if (isWaterPrimitiveCreated.value) {
    console.log('当前是否开启专题渲染：', enabled);
    emit("isColorRender", enabled)
    console.log("当前是否开启专题渲染：", enabled);
    emit("isColorRender", enabled);
    toggleWaterColorRender(enabled);
  }
};
@@ -259,93 +315,100 @@
  // 注意：有时 data 可能是一个字符串（例如 JSON 字符串）
  let data = selectedScheme.value.data;
  // 如果是字符串，则尝试解析成对象
  if (typeof data === 'string') {
  if (typeof data === "string") {
    try {
      data = JSON.parse(data);
      console.log('解析后的降雨数据：', data);
      console.log("解析后的降雨数据：", data);
    } catch (e) {
      console.error("data 不是有效的 JSON 字符串");
      return;
    }
  }
  // 打印降雨强度的单位
  console.log('降雨强度的单位是：', data.intensityUnit);
  console.log("降雨强度的单位是：", data.intensityUnit);
  // 根据 intensityUnit 调整 rainfalls 中的 intensity 值
  if (data.intensityUnit === 'mm/min') {
    data.rainfalls.forEach(r => r.intensity *= 60);
    console.log('将 mm/min 转换为 mm/h 后的 rainfalls:', data.rainfalls);
  } else if (data.intensityUnit === 'mm/5min') {
    data.rainfalls.forEach(r => r.intensity *= 12);
    console.log('将 mm/5min 转换为 mm/h 后的 rainfalls:', data.rainfalls);
  } else if (data.intensityUnit !== 'mm/h') {
    console.warn('未知的 intensity 单位，无法进行转换');
  if (data.intensityUnit === "mm/min") {
    data.rainfalls.forEach((r) => (r.intensity *= 60));
    console.log("将 mm/min 转换为 mm/h 后的 rainfalls:", data.rainfalls);
  } else if (data.intensityUnit === "mm/5min") {
    data.rainfalls.forEach((r) => (r.intensity *= 12));
    console.log("将 mm/5min 转换为 mm/h 后的 rainfalls:", data.rainfalls);
  } else if (data.intensityUnit !== "mm/h") {
    console.warn("未知的 intensity 单位，无法进行转换");
  }

  const rainfallList = data.rainfalls;
  console.log('最终的 rainfallList:', rainfallList);
  console.log("最终的 rainfallList:", rainfallList);

  // 提取 intensity 值
  rainFallValues.value = rainfallList.map(r => r.intensity);
  rainFallValues.value = rainfallList.map((r) => r.intensity);
  minRainValue.value = Math.min(...rainFallValues.value);
  maxRainValue.value = Math.max(...rainFallValues.value);
  console.log('当前方案下最小雨量和最大雨量：', minRainValue.value, maxRainValue.value);
  console.log(
    "当前方案下最小雨量和最大雨量：",
    minRainValue.value,
    maxRainValue.value
  );
}
// 定义降雨等级及其对应的视觉参数
const rainLevels = [
  {
    name: '小雨',
    name: "小雨",
    min: 0.1,
    max: 9.9,
    size: 0.5,     // 雨滴大小：更小
    speed: 20,     // 下落速度：更慢
    density: 15,   // 雨滴密度：更稀疏
    color: '#ADD8E6' // 浅蓝色，象征轻柔的小雨
    size: 0.5, // 雨滴大小：更小
    speed: 20, // 下落速度：更慢
    density: 15, // 雨滴密度：更稀疏
    color: "#ADD8E6", // 浅蓝色，象征轻柔的小雨
  },
  {
    name: '中雨',
    name: "中雨",
    min: 10,
    max: 24.9,
    size: 0.7,
    speed: 28,
    density: 23,
    color: '#ADD8E6'
    color: "#ADD8E6",
  },
  {
    name: '大雨',
    name: "大雨",
    min: 25,
    max: 49.9,
    size: 1.0,
    speed: 36,
    density: 31,
    color: '#ADD8E6'
    color: "#ADD8E6",
  },
  {
    name: '暴雨',
    name: "暴雨",
    min: 50,
    max: 99.9,
    size: 1.3,
    speed: 42,
    density: 39,
    color: '#ADD8E6'
    color: "#ADD8E6",
  },
  {
    name: '大暴雨',
    name: "大暴雨",
    min: 100,
    size: 1.6,
    speed: 50,
    density: 47,
    color: '#ADD8E6'
  }
    color: "#ADD8E6",
  },
];
// 根据降雨量返回对应的雨形配置
function getRainLevel(rainValue) {
  for (let level of rainLevels) {
    if (level.min <= rainValue && (level.max === undefined || rainValue <= level.max)) {
    if (
      level.min <= rainValue &&
      (level.max === undefined || rainValue <= level.max)
    ) {
      return level;
    }
  }
  // 默认无雨状态
  return { name: '无雨', size: 0.3, speed: 10, density: 10, color: '#F0F8FF' };
  return { name: "无雨", size: 0.3, speed: 10, density: 10, color: "#F0F8FF" };
}
// 根据播放进度更新天气效果（已优化）
let lastUsedIndex = -1; // 缓存上一次使用的索引，防止重复更新
@@ -355,14 +418,14 @@
  // console.log(`时间轴总时长: ${duration.value}, 当前时间: ${currentTime.value}`); // 打印时间轴信息
  const progress = currentTime.value / duration.value;
  const floatIndex = progress * (rainFallValues.value.length - 1);
  const index = Math.floor(floatIndex);            // 当前索引
  const index = Math.floor(floatIndex); // 当前索引
  const nextIndex = Math.min(index + 1, rainFallValues.value.length - 1); // 下一索引
  const currentRain = rainFallValues.value[index];
  const nextRain = rainFallValues.value[nextIndex];
  // 启用插值（alpha 平滑过渡）
  const alpha = floatIndex - index;
  // const rainValue = currentRain + (nextRain - currentRain) * alpha;
  const rainValue = currentRain + (nextRain - currentRain)
  const rainValue = currentRain + (nextRain - currentRain);
  // 打印当前处理的雨量数据
  // console.log(`正在处理的雨量数据点: 当前=${currentRain}, 下一个=${nextRain}, 插值后=${rainValue.toFixed(2)}, 索引=${index}`);
  // 如果当前索引未变化且插值差异不大，跳过重复更新
@@ -389,9 +452,9 @@
    rainSize: rainLevel.size,
    rainSpeed: rainLevel.speed,
    rainDensity: rainLevel.density,
    rainColor: rainLevel.color
    rainColor: rainLevel.color,
  };
  console.log('当前雨量数据：', rainValue, '当前雨形：', rainLevel);
  console.log("当前雨量数据：", rainValue, "当前雨形：", rainLevel);
  // 调用工具方法更新雨效
  mapUtils.toggleRain(rainParams, true);
}
@@ -428,7 +491,7 @@

// 设置播放速率
const setPlaybackRate = (rate) => {
  isColorRenderEnabled.value = false
  isColorRenderEnabled.value = false;
  playbackRate.value = rate;
  showSpeedMenu.value = false;
  // 停止当前播放
@@ -468,7 +531,8 @@
  // 直接找到最近的 timestamp 索引
  const closestIndex = findClosestTimestampIndex(targetTime);
  const baseTimestamp = waterTimestamps.value[0];
  currentTime.value = (waterTimestamps.value[closestIndex] - baseTimestamp) / 1000;
  currentTime.value =
    (waterTimestamps.value[closestIndex] - baseTimestamp) / 1000;

  // 更新水体模拟时间
  setTimeForWaterSimulation(closestIndex);
@@ -500,7 +564,7 @@
  () => selectedScheme.value,
  (newVal) => {
    if (newVal) {
      console.log('选中方案已改变:', newVal)
      console.log("选中方案已改变:", newVal);
    }
  }
);
@@ -513,7 +577,9 @@
        .valueOf(); // 使用 valueOf() 获取原始时间戳

      // 更新 currentPlayingTime 格式化后的时间字符串
      currentPlayingTime.value = dayjs(sendCurrentPlayingTime.value).format("YYYY-MM-DD HH:mm:ss");
      currentPlayingTime.value = dayjs(sendCurrentPlayingTime.value).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      EventBus.emit("time-update", currentPlayingTime.value);
    }
  }
@@ -546,26 +612,30 @@
  try {
    // 当前方案的所有信息
    const schemeInfo = selectedScheme.value;
    // console.log(selectedScheme.value,'selectselect')
    // type为2的话为实时模拟
    // const type = schemeInfo.value.type
    serviceInfo = schemeInfo.serviceName;

    // minFlowRate = schemeInfo.最小水深
    // maxFlowRate = schemeInfo.最大水深
    // console.log('获取到的 serviceName:', serviceInfo);
    getRainfallData()
    getRainfallData();
    // 根据layer.json去获取时间轴信息
    const { waterTimestamps: timestamps, watersMaxHeight, watersMinHeight } = await fetchWaterSimulationData(serviceInfo);
    console.log('当前方案下的最大水位深度和最小水位深度',watersMaxHeight,watersMinHeight);
    
    const { waterTimestamps: timestamps } = await fetchWaterSimulationData(
      serviceInfo
    );
    // 现在是按照总共有多少个点来渲染时间轴
    if (timestamps) {
      frameNum.value = timestamps.length;
      console.log(frameNum.value, "frameNum.valueframeNum.value");
      waterTimestamps.value = timestamps;
      updateTimelineRange();
      timeMarkers.value = generateTimeMarkers(timestamps);
      sendCurrentPlayingTime.value = timestamps[0]
      sendCurrentPlayingTime.value = timestamps[0];
      currentPlayingTime.value = dayjs(timestamps[0]).format(
        "YYYY-MM-DD HH:mm:ss"
      );
    }
    minFlowRate = watersMinHeight
    maxFlowRate = watersMaxHeight
  } catch (error) {
    console.error("Error loading water simulation data:", error);
    ElMessage({
@@ -600,8 +670,7 @@
  }
  if (crossRef.value) {
    crossRef.value.clearPoints();
    console.log('执行删除点功能');

    console.log("执行删除点功能");
  }
  emit("isColorRender", false);
  setTimeout(() => {

 src/components/monifangzhen/echartInfo.vue

@@ -455,7 +455,7 @@
  const startUpdating = () => {
    if (updateInterval || dataIndex.value >= rainfallData.value.length) return;

    const totalDuration = 90000; // 90秒
    const totalDuration = simStore.frameNum * 1000; // 90秒
    const totalPoints = rainfallData.value.length;
    const startTime = Date.now();


 src/components/tools/Detail.vue

@@ -40,7 +40,7 @@
    },
    {
      name: "设备类型",
      value: deviceDetail.value.type || "",
      value: deviceDetail.value.type || deviceDetail.value.deviceTypeName,
    },
    {
      name: "关联隐患点",
@@ -95,11 +95,11 @@
      value: deviceDetail.value.isGovern || "否",
    },
    {
      name: "群测群防",
      name: "群测群防员",
      value: deviceDetail.value.groupTestGroupDefenseUserName,
    },
    {
      name: "群测群防",
      name: "群测群防员电话",
      value: deviceDetail.value.groupTestGroupDefenseMobile,
    },
    {

 src/constant/dict.js

@@ -12,7 +12,7 @@
        value: "1933049314953330689",
    },
    {
        label: "雨量计1",
        label: "雨量计",
        value: "1437295810",
    },
    {

 src/store/simulation.js

@@ -2,7 +2,8 @@
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useSimStore = defineStore('simulation', () => {

    // 帧数
    const frameNum = ref(0)
    // 隐患点列表
    const DangerPoint = ref([])
    const DeviceShowSwitch = ref(false)
@@ -29,8 +30,6 @@
    const schemCard = ref([])
    const backToHome = ref(false)
    const selectedScheme = ref(null)
    // 当前模拟经纬度
    const currentInfo = ref({})
    // 图例
    const waterLegendData = ref([])
    // 模拟仿真图例
@@ -186,9 +185,9 @@
        DeviceShowSwitch,
        DangerShowSwitch,
        waterLegendData,
        currentInfo,
        isShowEarth,
        devices,
        frameNum,

        // 方案相关方法
        setSchemCard,

 src/utils/map.js

@@ -61,12 +61,30 @@
const pointEntityMap = new Map(); // key: id, value: entity

export function createPoint(option) {
  const { id, type = "", name = "默认名称", view, latitude, longitude, height, callback, imgWidth = 56, imgHeight = 67, showBillboard = true, showLabel = true, className = "device" } = option;
  const {
    id,
    type = "",
    deviceTypeName = "",
    name = "默认名称",
    view,
    latitude,
    longitude,
    height,
    callback,
    imgWidth = 56,
    imgHeight = 67,
    showBillboard = true,
    showLabel = true,
    className = "device"
  } = option;


  const realType = type || deviceTypeName;

  // 如果已经存在该 id 的 entity，则跳过创建
  if (pointEntityMap.has(id)) {
    clearAllPoints()
    console.log(`点 ${id} 已存在，跳过创建`);
    // return;
  }

  let position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height || 50);
@@ -75,14 +93,17 @@
    id,
    name: name,
    position: position,
    type: type,
    type: realType,
    view: view,
    attrs: option,
    className: className,
    label: {
      text: name || "默认标签",
      font: "14pt Source Han Sans CN",
      fillColor: type.includes("active") ? Cesium.Color.AQUA : Cesium.Color.WHITE,
      fillColor: (typeof realType === 'string' && realType.includes("active"))
        ? Cesium.Color.AQUA
        : Cesium.Color.WHITE,
      // fillColor: Cesium.Color.WHITE,
      backgroundColor: showBillboard ? Cesium.Color.BLACK.withAlpha(0.5) : Cesium.Color.SKYBLUE,
      showBackground: true,
      outline: false,
@@ -94,9 +115,10 @@
      verticalOrigin: Cesium.VerticalOrigin.CENTER,
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      pixelOffset: new Cesium.Cartesian2(0, -40),
      distanceDisplayCondition: type.includes("河流")
      distanceDisplayCondition: (typeof realType === 'string' && realType.includes("河流"))
        ? new Cesium.DistanceDisplayCondition(0, 5000000)
        : new Cesium.DistanceDisplayCondition(0, 50000),
      // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000),
      heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
      show: showLabel,
    },
@@ -112,9 +134,11 @@
    pixelOffset: new Cesium.Cartesian2(0, 3),
    scale: 0.8,
    scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.5),
    distanceDisplayCondition: type.includes("河流")
    distanceDisplayCondition: (typeof realType === 'string' && realType.includes("河流"))
      ? new Cesium.DistanceDisplayCondition(0, 5000000)
      : new Cesium.DistanceDisplayCondition(0, 50000),
    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000),

    show: showBillboard,
    heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
    backgroundColor: showBillboard ? Cesium.Color.BLACK.withAlpha(0.8) : Cesium.Color.SKYBLUE,

 src/views/GisView.vue

@@ -579,7 +579,7 @@
    } catch (error) {
      console.error("区域点击处理失败:", error);
      ElMessage.error("数据加载失败，请稍后再试");
      loadingInstance.close(); // 确保在发生错误时也关闭 loading 提示
      // loadingInstance.close(); // 确保在发生错误时也关闭 loading 提示
    }
  });
}

 src/views/Home.vue

@@ -60,7 +60,7 @@
import { showDeviceDetail } from "@/store";
import { setupTokenRefresh, getDangerPoint } from "@/api/hpApi.js";
import { convertToWKT } from "@/utils/wktUtils";
import { getDeviceInfo } from "@/api/hpApi";
import { getDeviceInfo, getSafePoint } from "@/api/hpApi";

const route = useRoute();
const simStore = useSimStore();
@@ -100,6 +100,7 @@
// 计算属性
const showDetail = computed(() => showDeviceDetail.value);


onMounted(async () => {
  setupTokenRefresh(); // 获取宏图token
  // getSimData(); //测试tr后端
@@ -108,7 +109,7 @@
    simStore.DangerPoint = res.data.pageData;
  });

  getDeviceInfo(null,"110116110000").then((res) => {
  getDeviceInfo(null, "110116110000").then((res) => {
    simStore.devices = res.data.pageData;
  });
  try {