From fd855df19dfadabf14c34ba91e8dfc2421227bf1 Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期五, 06 六月 2025 09:34:12 +0800
Subject: [PATCH] 1
---
src/views/GisView.vue | 6
src/components/tools/Ditching.vue | 137 +++++++++++++++++
src/views/left/KGSim.vue | 103 +++++++++---
src/components/tools/Dam.vue | 53 ++++++
src/assets/img/tools/tools_second/大气散射.png | 0
src/utils/tools.js | 14 +
src/components/tools/Tools.vue | 49 ++++-
src/components/tools/SunAnalysis.vue | 71 ++++++++
8 files changed, 387 insertions(+), 46 deletions(-)
diff --git "a/src/assets/img/tools/tools_second/\345\244\247\346\260\224\346\225\243\345\260\204.png" "b/src/assets/img/tools/tools_second/\345\244\247\346\260\224\346\225\243\345\260\204.png"
new file mode 100644
index 0000000..5a2c783
--- /dev/null
+++ "b/src/assets/img/tools/tools_second/\345\244\247\346\260\224\346\225\243\345\260\204.png"
Binary files differ
diff --git a/src/components/tools/Dam.vue b/src/components/tools/Dam.vue
new file mode 100644
index 0000000..e131e21
--- /dev/null
+++ b/src/components/tools/Dam.vue
@@ -0,0 +1,53 @@
+<template>
+ <div class="custom-panel">
+ <div class="panel-content">
+ <el-switch
+ v-model="isDamEnabled"
+ active-text="寮�鎸栧紑鍚�"
+ inactive-text="寮�鎸栧叧闂�"
+ @change="handleSwitchChange"
+ />
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { ElSwitch } from 'element-plus';
+const isDamEnabled = ref(false);
+function handleDamOn() {
+ console.log('寮�鎸栧姛鑳藉凡寮�鍚�');
+ earthCtrl.factory.createModelLibrary()
+
+}
+
+// 寮�鍏冲叧闂椂鎵ц鐨勫嚱鏁�
+function handleDamOff() {
+ console.log('寮�鎸栧姛鑳藉凡鍏抽棴');
+}
+
+// 鐩戝惉 switch 鍙樺寲
+function handleSwitchChange(value) {
+ if (value) {
+ handleDamOn();
+ } else {
+ handleDamOff();
+ }
+}
+</script>
+
+<style scoped>
+.custom-panel {
+ padding: 20px;
+ width: 290px;
+ background: url("@/assets/img/tools/plotting_new.png") no-repeat;
+ filter: opacity(83%);
+ background-size: 100% 100%;
+ box-sizing: border-box;
+}
+
+.panel-content {
+ display: flex;
+ flex-direction: column;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tools/Ditching.vue b/src/components/tools/Ditching.vue
new file mode 100644
index 0000000..e2de9af
--- /dev/null
+++ b/src/components/tools/Ditching.vue
@@ -0,0 +1,137 @@
+<template>
+ <div class="custom-panel">
+ <div class="panel-content">
+ <!-- 寮�鎸栨繁搴﹁缃� -->
+ <el-form :model="form" label-width="80px">
+ <el-form-item label="寮�鎸栨繁搴�">
+ <el-input v-model="form.digDepth" placeholder="璇疯緭鍏ュ紑鎸栨繁搴�(m)" />
+ </el-form-item>
+ </el-form>
+ <!-- 鎸夐挳鍖哄煙 -->
+ <div class="button-group">
+ <el-button type="primary" @click="handleDraw">缁樺埗</el-button>
+ <el-button type="success" @click="handleConfirm">纭</el-button>
+ <el-button type="danger" @click="handleClear">娓呴櫎</el-button>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { ref, reactive, watch, defineEmits } from 'vue';
+import { ElForm, ElFormItem, ElInput, ElButton, ElMessage } from 'element-plus';
+const emit = defineEmits(['update-excavation-data']);
+const form = reactive({
+ digDepth: '100'
+});
+let excavationInstance = null;
+const currentPoints = reactive([]);
+const isDrawing = ref(false);
+let clickHandler = null;
+const handleDraw = () => {
+ if (!window.viewer) {
+ console.error('Cesium Viewer 灏氭湭鍒濆鍖�');
+ return;
+ }
+
+ const viewer = window.viewer;
+
+ // 娓呯┖涔嬪墠鐨勬暟鎹�
+ currentPoints.splice(0, currentPoints.length);
+ isDrawing.value = true;
+
+ // 閿�姣佹棫鐨勭洃鍚櫒
+ if (clickHandler) {
+ clickHandler.destroy();
+ }
+
+ // 绔嬪嵆鍒涘缓寮�鎸栧璞★紙涓嶄緷璧栧垵濮嬬偣锛�
+ createExcavation();
+
+ // 寮�濮嬬洃鍚偣鍑讳簨浠�
+ clickHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+ clickHandler.setInputAction((movement) => {
+ const cartesian = viewer.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
+ if (cartesian) {
+ currentPoints.push(cartesian.clone());
+ }
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+};
+
+const createExcavation = () => {
+ const depth = parseFloat(form.digDepth);
+ if (!isNaN(depth)) {
+ excavationInstance = window.earthCtrl.analysis.createTerrainExcavation({
+ height: depth,
+ callback: function (a) {
+ },
+ });
+ }else{
+ ElMessage.warning('璇疯緭鍏ユ湁鏁堢殑寮�鎸栨繁搴︼紒');
+ }
+};
+watch(
+ () => form.digDepth,
+ (newVal) => {
+ const num = parseFloat(newVal);
+ if (!isNaN(num) && excavationInstance) {
+ excavationInstance.setDeepth?.(num);
+ }
+ }
+);
+// 鐐瑰嚮纭鎸夐挳锛堟墦鍗板綋鍓嶅潗鏍囩偣闆嗗悎鍜屾繁搴︼級
+const handleConfirm = () => {
+ if (currentPoints.length === 0) {
+ ElMessage.warning('璇烽�夊彇寮�娌熸湁鏁堢殑鍧愭爣鐐癸紒');
+ return;
+ }
+ const depth = parseFloat(form.digDepth);
+ // 杞崲涓烘櫘閫氬璞℃暟缁�
+ const plainPoints = currentPoints.map(point => ({
+ x: point.x,
+ y: point.y,
+ z: point.z
+ }));
+ const result = {
+ points: plainPoints,
+ depth: depth
+ };
+ emit('update-excavation-data', result);
+};
+const handleClear = () => {
+ isDrawing.value = false;
+ // 閿�姣佺偣鍑讳簨浠剁洃鍚櫒
+ if (clickHandler) {
+ clickHandler.destroy();
+ clickHandler = null;
+ }
+ // 娓呯┖涓存椂鐐�
+ currentPoints.splice(0, currentPoints.length);
+ // 绉婚櫎寮�鎸栧璞�
+ if (excavationInstance) {
+ excavationInstance.removeFromMap?.();
+ excavationInstance = null;
+ }
+};
+</script>
+
+<style scoped>
+.custom-panel {
+ padding: 20px;
+ width: 290px;
+ background: url("@/assets/img/tools/plotting_new.png") no-repeat;
+ filter: opacity(83%);
+ background-size: 100% 100%;
+ box-sizing: border-box;
+}
+
+.panel-content {
+ display: flex;
+ flex-direction: column;
+}
+
+.button-group {
+ display: flex;
+ justify-content: space-around;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tools/SunAnalysis.vue b/src/components/tools/SunAnalysis.vue
new file mode 100644
index 0000000..b6adf2d
--- /dev/null
+++ b/src/components/tools/SunAnalysis.vue
@@ -0,0 +1,71 @@
+<template>
+ <div class="settings-panel">
+ <el-form :model="form" label-width="80px" class="terrain-settings">
+ <el-form-item label="娓叉煋澶у皬">
+ <el-select v-model="form.renderSize" placeholder="璇烽�夋嫨">
+ <el-option v-for="item in sizeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="閰嶇疆閫夐」">
+ <el-switch v-model="form.lightShadow" active-text="鍏夋簮闃村奖"></el-switch>
+ <el-switch v-model="form.softShadow" active-text="杞槾褰�"></el-switch>
+ </el-form-item>
+ <el-button type="primary" @click="analyzeShadows">闃村奖鍒嗘瀽</el-button>
+ </el-form>
+ </div>
+</template>
+<script setup>
+import { reactive, watch } from "vue";
+import mapUtils from "@/utils/tools.js";
+
+// 瀹氫箟琛ㄥ崟鏁版嵁
+const form = reactive({
+ renderSize: '1024px X 1024px', // 榛樿娓叉煋澶у皬
+ lightShadow: true, // 榛樿寮�鍚厜婧愰槾褰�
+ softShadow: true, // 榛樿鍏抽棴杞槾褰�
+});
+
+// 娓叉煋澶у皬閫夐」
+const sizeOptions = [
+ { value: '2048px X 2048px', label: '2048px X 2048px' },
+ { value: '1024px X 1024px', label: '1024px X 1024px' },
+ { value: '512px X 512px', label: '512px X 512px' },
+ { value: '256px X 256px', label: '256px X 256px' },
+];
+
+// 闃村奖鍒嗘瀽鎸夐挳鐐瑰嚮浜嬩欢
+const analyzeShadows = () => {
+ let currentTime = earthCtrl.viewer.clock.currentTime.clone();
+ let startTime = earthCtrl.viewer.clock.startTime.clone();
+ let stopTime = earthCtrl.viewer.clock.stopTime.clone();
+ let multiplier = earthCtrl.viewer.clock.multiplier;
+ console.log('闃村奖鍒嗘瀽');
+ mapUtils.AnalysisSunshine()
+};
+</script>
+<style lang="less" scoped>
+.settings-panel {
+ padding: 20px;
+ width: 350px;
+ background: url("@/assets/img/tools/plotting_new.png") no-repeat;
+ filter: opacity(83%);
+ background-size: 100% 100%;
+ box-sizing: border-box;
+}
+
+.terrain-settings {
+ .el-form-item {
+ margin-bottom: 10px;
+ }
+
+ .el-select,
+ .el-switch {
+ margin-right: 10px;
+ }
+
+ .el-button {
+ width: 100%;
+ margin-top: 10px;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tools/Tools.vue b/src/components/tools/Tools.vue
index c9866b7..6ef1546 100644
--- a/src/components/tools/Tools.vue
+++ b/src/components/tools/Tools.vue
@@ -4,16 +4,17 @@
<div class="tools-title" @click="toggleCollapse">
宸ュ叿鏍�
<div class="popup-menu" v-if="isPopupVisible">
- <div class="popup-item" v-for="(option, idx) in currentToolOptions" :key="idx" @click="handleOptionClick(option)">
- <img class="popup-icon" :src="
- require(`../../assets/img/tools/tools_second/${option.icon}.png`)
+ <div class="popup-item" v-for="(option, idx) in currentToolOptions" :key="idx"
+ @click="handleOptionClick(option)">
+ <img class="popup-icon" :src="require(`../../assets/img/tools/tools_second/${option.icon}.png`)
" :alt="option.name" />
{{ option.name }}
</div>
</div>
<LayerTree class="popup-menu" v-show="showLayerTree" />
<!-- 鍙鍩熷垎鏋� -->
- <seeAnalyze :option="option" v-show="seeAnalyzeShow" @update:showConeLine="handleUpdateShowConeLine" @update-option="onUpdateOption" @draw="onDraw" @clear="onClear" class="popup-menu-see" />
+ <seeAnalyze :option="option" v-show="seeAnalyzeShow" @update:showConeLine="handleUpdateShowConeLine"
+ @update-option="onUpdateOption" @draw="onDraw" @clear="onClear" class="popup-menu-see" />
<!-- 鍓栭潰鎻愬彇 -->
<TopographyDia @draw="handleDraw" @clear="handleClear" class="popup-menu-see" v-show="topographyShow" />
<!-- 鍓栭潰鎻愬彇鐨別charts -->
@@ -21,11 +22,14 @@
<div id="echartsView1" style="width: 100%; height: 100%"></div>
</div>
<!-- 鍧″害鍧″悜鍒嗘瀽 -->
- <Aspect v-show="showAspect" @draw="SlopeArrow" @clear="SlopeArrowClose" @handleaspect="handleaspect" @handleSlope="handleSlope" class="popup-menu-see" />
- <SlopeAnalysis @draw="SlopeAnalysiss" v-show="isContourLabel" class="popup-menu-see" @update-slope="onUpdateSlope" />
+ <Aspect v-show="showAspect" @draw="SlopeArrow" @clear="SlopeArrowClose" @handleaspect="handleaspect"
+ @handleSlope="handleSlope" class="popup-menu-see" />
+ <SlopeAnalysis @draw="SlopeAnalysiss" v-show="isContourLabel" class="popup-menu-see"
+ @update-slope="onUpdateSlope" />
<!-- 闆� -->
<Rain v-show="showRain" class="popup-menu-see" @update-rain="onUpdateRain" />
<Snow v-show="showSnow" class="popup-menu-see" @update-snow="onUpdateSnow" />
+ <SunAnalysis v-show="showSunAnalysis" class="popup-menu-see"></SunAnalysis>
</div>
<!-- 宸ュ叿鏍忓唴瀹� -->
@@ -49,9 +53,10 @@
import mapUtils from "@/utils/tools.js";
import Rain from "@/components/tools/Rain.vue";
import Snow from "@/components/tools/Snow.vue";
+import SunAnalysis from "@/components/tools/SunAnalysis.vue";
// 鍒囨崲灞曞紑/鏀剁缉鐘舵��
-function toggleCollapse () {
+function toggleCollapse() {
// isCollapsed.value = !isCollapsed.value;
}
@@ -66,6 +71,8 @@
const isContourLabel = ref(false);
const showRain = ref(false);
const showSnow = ref(false);
+const showAtmosphere = ref(false);
+const showSunAnalysis = ref(false);
// 鍓栭潰鍒嗘瀽寮圭獥
const topographyShow = ref(false);
@@ -141,12 +148,14 @@
{ name: "闆ㄥぉ妯″紡", icon: "闆ㄥぉ妯″紡" },
{ name: "闆ぉ妯″紡", icon: "闆ぉ妯″紡" },
{ name: "娓呴櫎澶╂皵", icon: "娓呴櫎鍒嗘瀽" },
+ { name: "澶ф皵鏁ｅ皠", icon: "澶ф皵鏁ｅ皠" },
+ { name: "鏃ョ収鍒嗘瀽", icon: "澶ф皵鏁ｅ皠" },
],
},
]);
// 澶勭悊宸ュ叿鐐瑰嚮浜嬩欢
-function handleClick (tool, event) {
+function handleClick(tool, event) {
// 閬嶅巻宸ュ叿鍒楄〃锛屾洿鏂版縺娲荤姸鎬�
toolList.value.forEach((item) => {
item.active = item.name === tool.name && currentToolOptions.value !== tool.options;
@@ -188,7 +197,7 @@
const currentOption = ref(null);
// 澶勭悊寮圭獥閫夐」鐐瑰嚮浜嬩欢
-function handleOptionClick (option) {
+function handleOptionClick(option) {
isPopupVisible.value = false;
currentOption.value = option.name;
console.log("Selected option:", currentOption.value);
@@ -212,6 +221,22 @@
console.log("澶╂皵鏁堟灉宸叉竻闄�");
} else {
console.log("娌℃湁鎵撳紑鐨勫ぉ姘旀晥鏋�");
+ }
+ },
+ 澶ф皵鏁ｅ皠: () => {
+ showAtmosphere.value = !showAtmosphere.value
+ if (showAtmosphere.value) {
+ mapUtils.enableAtmosphere()
+ } else {
+ mapUtils.disableAtmosphere()
+ }
+ },
+ 鏃ョ収鍒嗘瀽: () => {
+ showSunAnalysis.value = !showSunAnalysis.value
+ if (showSunAnalysis.value) {
+ // mapUtils.AnalysisSunshine()
+ } else {
+ // mapUtils.disableAtmosphere()
}
},
@@ -292,13 +317,13 @@
};
// 澶勭悊瀛愮粍浠朵紶鏉ョ殑鍙鍩熸樉绀洪敟绾跨殑鍊�
-function handleUpdateShowConeLine (value) {
+function handleUpdateShowConeLine(value) {
showConeLine.value = value;
mapUtils.showSyfxViewCone(showConeLine.value);
}
// 榧犳爣缁樺埗鍙鍩�
-function onDraw () {
+function onDraw() {
// 瀹氫箟鍥炶皟鍑芥暟锛岀敤浜庢帴鏀� res 骞舵洿鏂� option
const callback = (res) => {
option.heading = res.heading;
@@ -309,7 +334,7 @@
}
// 娓呴櫎鍙鍩�
-function onClear () {
+function onClear() {
mapUtils.syfxqc(option);
}
diff --git a/src/utils/tools.js b/src/utils/tools.js
index e94c5db..96e6986 100644
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -299,7 +299,7 @@
polyline: Cesium.Color.fromCssColorString("#ffff0050"),
polygon: Cesium.Color.fromCssColorString("#ffff0050"),
},
- (e) => { }
+ (e) => {}
);
},
qxcl() {
@@ -309,7 +309,7 @@
polyline: Cesium.Color.fromCssColorString("#ffff0050"),
polygon: Cesium.Color.fromCssColorString("#ffff0050"),
},
- (e) => { }
+ (e) => {}
);
},
fwjcl() {
@@ -319,7 +319,7 @@
polyline: Cesium.Color.fromCssColorString("#ffff0050"),
polygon: Cesium.Color.fromCssColorString("#ffff0050"),
},
- (e) => { }
+ (e) => {}
);
},
// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>鍦烘櫙鎴浘<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
@@ -929,7 +929,7 @@
};
this.analysisFlood = earthCtrl.analysis.createSubmergence(
method,
- (value) => { }
+ (value) => {}
);
},
clearFlood() {
@@ -962,6 +962,12 @@
this.contourLabel.showContourLabel(false);
}
},
+ enableAtmosphere() {
+ earthCtrl.atmosphere.enable();
+ },
+ disableAtmosphere() {
+ earthCtrl.atmosphere.disable();
+ },
};
export default mapUtils;
diff --git a/src/views/GisView.vue b/src/views/GisView.vue
index afd104f..70bcd45 100644
--- a/src/views/GisView.vue
+++ b/src/views/GisView.vue
@@ -27,15 +27,17 @@
// 1. 璁剧疆鍒濆鏃堕棿
const date = new Date(2025, 3, 11, 12, 0, 0, 0);
+ // const date = new Date(2024, 6, 13, 5, 5, 50);
const julianDate = SmartEarth.Cesium.JulianDate.fromDate(date);
// earthCtrl.viewer.clock.currentTime = julianDate;
- // 2. 閰嶇疆鏃堕挓閫夐」锛岀姝㈣嚜鍔ㄦ帹杩涙椂闂�
+ // // 2. 閰嶇疆鏃堕挓閫夐」锛岀姝㈣嚜鍔ㄦ帹杩涙椂闂�
earthCtrl.viewer.clockViewModel.shouldAnimate = false; // 绂佺敤鍔ㄧ敾
earthCtrl.viewer.clockViewModel.clockRange =
SmartEarth.Cesium.ClockRange.CLAMPED; // 闄愬埗鏃堕棿鑼冨洿
earthCtrl.viewer.clockViewModel.multiplier = 0; // 璁剧疆鏃堕棿鎺ㄨ繘閫熷害涓�0
-
+ // 寮�鍚ぇ姘旀暎灏勬晥鏋�
+ // earthCtrl.atmosphere.enable();
// 3. 璁剧疆褰撳墠鏃堕棿骞堕攣瀹�
earthCtrl.viewer.clock.currentTime = julianDate;
diff --git a/src/views/left/KGSim.vue b/src/views/left/KGSim.vue
index 40380d5..31302c0 100644
--- a/src/views/left/KGSim.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.9.3