1

wangjuncheng

2025-06-06 fd855df19dfadabf14c34ba91e8dfc2421227bf1

 src/views/left/KGSim.vue

@@ -3,29 +3,21 @@
    <!-- 模拟区域 -->
    <div class="simulation-area">
      <p>模拟区域</p>
      <el-select
        v-model="selectedArea"
        placeholder="请选择"
        style="max-width: 600px"
        popper-class="mySelectStyle"
        filterable
        :filter-method="filterOptions"
        @change="handleSelectChange"
      >
        <el-option
          v-for="item in filteredOptions"
          :key="item.value"
          :label="item.label"
          :value="item"
        />
      <el-select v-model="selectedArea" placeholder="请选择" style="max-width: 600px" popper-class="mySelectStyle"
        filterable :filter-method="filterOptions" @change="handleSelectChange">
        <el-option v-for="item in filteredOptions" :key="item.value" :label="item.label" :value="item" />
      </el-select>
    </div>

    <!-- 治理工程标绘 -->
    <div class="engineering-buttons">
      <p>治理工程标绘</p>
      <el-button type="primary" @click="handleStart">开沟</el-button>
      <el-button type="success" @click="handleAdd">加坝</el-button>
      <el-button type="primary" @click="toggleDitch">
        {{ ditchingActive ? "关闭开沟" : "开启开沟" }}
      </el-button>
      <el-button type="primary" @click="toggleDam">
        {{ damActive ? "关闭加坝" : "开启加坝" }}
        </el-button>
    </div>

    <!-- 历史模拟 -->
@@ -36,7 +28,6 @@
        <el-radio label="预测模拟">预测模拟</el-radio>
      </el-radio-group>
      <div v-if="selectedSimulation === '历史模拟'">
        <!-- <HistorySimulation :selectedArea="selectedArea" /> -->
        <CitySim :selectedArea="selectedArea" />
      </div>
      <div v-if="selectedSimulation === '实时模拟'">
@@ -46,6 +37,8 @@
        <PredictiveSimulation :selectedArea="selectedArea" />
      </div>
    </div>
    <Ditching v-show="ditchingShow" class="ditchingPosition" @update-excavation-data="handleUpdateExcavationData"></Ditching>
    <Dam v-show="damShow" class="ditchingPosition"></Dam>
  </div>
</template>

@@ -53,6 +46,8 @@
import { ref, computed, onMounted, reactive } from "vue";
import HistorySimulation from "./KGSimOption/HistorySimulation.vue";
import CitySim from './CitySim.vue'
import Ditching from "@/components/tools/Ditching.vue";
import Dam from "@/components/tools/Dam.vue";
import PredictiveSimulation from "./KGSimOption/PredictiveSimulation.vue";
import RealTimeSimulation from "./KGSimOption/RealTimeSimulation.vue";
import { getRegionData } from "@/api/trApi";
@@ -62,6 +57,10 @@
const selectedArea = ref(); // 选中的区域
// 重点沟数据
const importGOptions = reactive([]);
let ditchingShow = ref(false);
let damShow = ref(false);
let ditchingActive = ref(false);
let damActive = ref(false);

onMounted(() => {
  // 获取重点沟数据
@@ -86,6 +85,10 @@
  );
});

const handleUpdateExcavationData = (data) => {
  console.log('接收到子组件的数据:', data);
  // 此处可进行后续操作，如保存、绘图等
};
// 自定义过滤方法
const filterOptions = (query) => {
  searchQuery.value = query;
@@ -101,8 +104,35 @@
  ); // 打印完整的选中数据
};

const handleStart = () => {
  console.log("开始按钮被点击");
// 切换开沟状态
const toggleDitch = () => {
  ditchingActive.value = !ditchingActive.value;
  ditchingShow.value = ditchingActive.value;

  if (ditchingActive.value) {
    console.log("开启按钮被点击");
  } else {
    console.log("关闭按钮被点击");
    cloesDitch();
  }
};
// 切换加坝状态
const toggleDam = () => {
  damActive.value = !damActive.value;
  damShow.value = damActive.value;

  if (damActive.value) {
    console.log("开启按钮被点击");
  } else {
    console.log("关闭按钮被点击");
    cloesDam();
  }
};
const cloesDitch = () => {
  ditchingShow.value = false;
};
const cloesDam = () => {
  damShow.value = false;
};

const handleAdd = () => {
@@ -111,6 +141,12 @@
</script>

<style scoped>
.ditchingPosition {
  position: fixed;
  left: 18%;
  top: 20%;
}

.simulation-module {
  color: #61f7d4;
  font-size: 14px;
@@ -130,25 +166,36 @@

.history-simulation-wrapper {
  margin-bottom: 20px;
  height: 100%; /* 固定高度 */
  height: 100%;
  /* 固定高度 */
  overflow: auto;
}

/* 自定义单选框样式 */
:deep(.el-radio__input.is-checked .el-radio__inner) {
  background-color: #009688; /* 选中时的背景颜色 */
  border-color: #009688; /* 选中时的边框颜色 */
  background-color: #009688;
  /* 选中时的背景颜色 */
  border-color: #009688;
  /* 选中时的边框颜色 */
}

:deep(.el-radio__input.is-checked + .el-radio__label) {
  color: inherit; /* 让文字颜色跟随父级 */
  color: inherit;
  /* 让文字颜色跟随父级 */
}

:deep(.el-select__placeholder) {
  color: #fff; /* 让文字颜色跟随父级 */
  color: #fff;
  /* 让文字颜色跟随父级 */
}

:deep(.el-radio) {
  color: #fff; /* 让文字颜色跟随父级 */
  color: #fff;
  /* 让文字颜色跟随父级 */
}

:deep(.el-input__inner) {
  color: #fff; /* 让文字颜色跟随父级 */
  color: #fff;
  /* 让文字颜色跟随父级 */
}
</style>
</style>