From fef12378282c0a8cf44411b079ac20ad4f397817 Mon Sep 17 00:00:00 2001 From: guonan <guonan201020@163.com> Date: 星期五, 23 五月 2025 16:56:48 +0800 Subject: [PATCH] 修改比较多 --- src/views/GisView.vue | 26 +- /dev/null | 132 ------------ src/components/menu/Device.vue | 71 ++++-- src/store/simulation.js | 5 src/store/simAPI.js | 10 src/components/monifangzhen/echartInfo.vue | 145 +++++-------- src/api/trApi.js | 1 src/components/menu/TimeLine.vue | 197 +++++++++++------ src/utils/tools.js | 9 src/components/menu/Location.vue | 2 src/views/left/CitySim.vue | 6 src/components/monifangzhen/schemeCard.vue | 16 + 12 files changed, 281 insertions(+), 339 deletions(-) diff --git a/src/api/trApi.js b/src/api/trApi.js index 1b9a699..ab396ff 100644 --- a/src/api/trApi.js +++ b/src/api/trApi.js @@ -122,6 +122,7 @@ throw new Error(`HTTP error! status: ${response.status}`); } const jsonData = await response.json(); // 瑙f瀽 JSON 鏁版嵁 + console.log(jsonData,'jsonjsonjsonjson') return parseWaterSimulationData(jsonData); // 璋冪敤瑙f瀽鍑芥暟 } catch (error) { console.error("璇锋眰鎴栬В鏋愭暟鎹椂鍑洪敊:", error); diff --git a/src/components/menu/Device.vue b/src/components/menu/Device.vue index bd23511..01b1b31 100644 --- a/src/components/menu/Device.vue +++ b/src/components/menu/Device.vue @@ -6,12 +6,28 @@ <div class="left-content device-content"> <div style="margin-left: 5px"> <span style="color: white">閲嶇偣娌燂細</span> - <el-select @change="handleChange" v-model="selectValue" placeholder="Select" size="large" style="width: 240px"> - <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> + <el-select + @change="handleChange" + v-model="selectValue" + placeholder="Select" + size="large" + style="width: 240px" + > + <el-option + v-for="item in options" + :key="item.value" + :label="item.label" + :value="item.value" + /> </el-select> </div> - <el-tree :data="deviceTree" node-key="deviceId" :props="treeProps" @node-click="handleTreeNodeClick" - class="device-tree"> + <el-tree + :data="deviceTree" + node-key="deviceId" + :props="treeProps" + @node-click="handleTreeNodeClick" + class="device-tree" + > <template #default="{ node, data }"> <span v-if="!data.children" class="device-tree-item"> <!-- <div class="device-item-icon"></div> --> @@ -27,21 +43,23 @@ </template> <script setup> -import { ref, computed, onMounted, watch, onBeforeUnmount, } from "vue"; -import { useRoute, onBeforeRouteUpdate } from 'vue-router'; +import { ref, computed, onMounted, watch, onBeforeUnmount } from "vue"; +import { useRoute, onBeforeRouteUpdate } from "vue-router"; import { createPoint, removeEntities } from "@/utils/map"; import { deviceDictList, getDictName } from "@/constant/dict.js"; import { getDeviceInfo } from "@/api/hpApi"; import { initeWaterPrimitiveView } from "@/utils/water"; //鐩告満flyTo鍑芥暟锛屽悗缁璷ptions鍒楄〃涓湁瀵瑰簲缁忕含搴﹀悗寮冪敤 import { useSimStore } from "@/store/simulation"; const simStore = useSimStore(); -onMounted(() => { +onMounted(async () => { + // 鍔犺浇鎵�鏈夌殑闅愭偅鐐逛俊鎭� + await getData(); loadDeviceList("瀛欒儭娌�"); - initeWaterPrimitiveView() + initeWaterPrimitiveView(); }); onBeforeRouteUpdate((to, from, next) => { - if (to.path !== '/zhjc') { + if (to.path !== "/zhjc") { handleCleanup(); } next(); @@ -49,24 +67,27 @@ const route = useRoute(); onBeforeUnmount(() => { - if (route.path !== '/zhjc') { + if (route.path !== "/zhjc") { handleCleanup(); } }); -watch(() => simStore.DeviceShowSwitch, (newValue, oldValue) => { - if (newValue) { - initializeDevicePoints(); - } else { - handleCleanup() +watch( + () => simStore.DeviceShowSwitch, + (newValue, oldValue) => { + if (newValue) { + initializeDevicePoints(); + } else { + handleCleanup(); + } } -}); +); const deviceListAll = ref([]); const deviceEntities = ref([]); const handleCleanup = () => { - deviceListAll.value.forEach(item => { + deviceListAll.value.forEach((item) => { removeEntities(item.deviceId); }); -} +}; const initializeDevicePoints = () => { const list = []; deviceListAll.value.forEach((item, index) => { @@ -82,13 +103,18 @@ }); deviceEntities.value = list; }; +const allDevices = ref([]); +const getData = async () => { + const res = await getDeviceInfo(); + allDevices.value = res.data.pageData; +}; // 鏍规嵁鍖哄煙鍚嶇О鍔犺浇璁惧鍒楄〃 const loadDeviceList = async (areaName) => { try { - handleCleanup() - const res = await getDeviceInfo(); - const allDevices = res.data.pageData; - const devicesInArea = allDevices.filter((item) => + handleCleanup(); + // const res = await getDeviceInfo(); + // const allDevices = res.data.pageData; + const devicesInArea = allDevices.value.filter((item) => item.deviceName?.includes(areaName) ); deviceListAll.value = devicesInArea; @@ -98,6 +124,7 @@ console.error("鍔犺浇璁惧淇℃伅澶辫触", error); } }; + // 澶勭悊鍖哄煙鍙樺寲浜嬩欢 const handleChange = (item) => { if (!item) { diff --git a/src/components/menu/Location.vue b/src/components/menu/Location.vue index a783d04..ce8911a 100644 --- a/src/components/menu/Location.vue +++ b/src/components/menu/Location.vue @@ -205,7 +205,7 @@ left: 0px; right: 0px; bottom: 10px; - background-color: rgba(236, 233, 233, 0.5); + background-color: rgba(47, 44, 44, 0.5); /* 鍗婇�忔槑閬僵 */ display: flex; align-items: center; diff --git a/src/components/menu/TimeLine.vue b/src/components/menu/TimeLine.vue index 0ac6d4e..51a7293 100644 --- a/src/components/menu/TimeLine.vue +++ b/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,20 +70,36 @@ <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> - <ratelevel ref="ratelevelRef" :playing-time="sendCurrentPlayingTime" @finish-calculation="handleFinishCalculation" - style="margin-top: 12px; margin-left: 28px; margin-right: 10px;justify-content: flex-end;"></ratelevel> - <el-button @click="handleBack" style="margin-top: 3px; margin-left: 30px; margin-right: 10px">缁撴潫妯℃嫙</el-button> + <ratelevel + ref="ratelevelRef" + :playing-time="sendCurrentPlayingTime" + @finish-calculation="handleFinishCalculation" + style=" + margin-top: 12px; + margin-left: 28px; + margin-right: 10px; + justify-content: flex-end; + " + ></ratelevel> + <el-button + @click="handleBack" + style="margin-top: 3px; margin-left: 30px; margin-right: 10px" + >缁撴潫妯℃嫙</el-button + > </div> - </div> </template> @@ -71,7 +112,7 @@ defineProps, onBeforeUnmount, inject, - reactive + reactive, } from "vue"; import ratelevel from "@/components/menu/flowRate_waterLevel.vue"; @@ -94,7 +135,12 @@ const simStore = useSimStore(); const { selectedScheme } = storeToRefs(simStore); -const emit = defineEmits(["timeUpdate", "isPlaying", "playbackFinished", "isColorRender"]); +const emit = defineEmits([ + "timeUpdate", + "isPlaying", + "playbackFinished", + "isColorRender", +]); // 瀹氫箟props const props = defineProps({ waterSimulateParams: { @@ -127,7 +173,7 @@ rainSize: 0.5, rainSpeed: 50, rainColor: "#99B3CC", - rainDensity: 30 // 闆ㄧ殑瀵嗗害 + rainDensity: 30, // 闆ㄧ殑瀵嗗害 }); // 璁$畻灞炴�� const progressPercentage = computed( @@ -157,7 +203,7 @@ baseUrl: `/simu/${serviceInfo}`, // baseUrl: `/simu/c2h1dc`, interval: intervalMap[playbackRate.value], - colorRender: isColorRenderEnabled.value + colorRender: isColorRenderEnabled.value, }); isWaterPrimitiveCreated.value = true; } else { @@ -191,8 +237,8 @@ return; // 闃绘鍚庣画閫昏緫鎵ц } if (isWaterPrimitiveCreated.value) { - console.log('褰撳墠鏄惁寮�鍚笓棰樻覆鏌擄細', enabled); - emit("isColorRender", enabled) + console.log("褰撳墠鏄惁寮�鍚笓棰樻覆鏌擄細", enabled); + emit("isColorRender", enabled); toggleWaterColorRender(enabled); } }; @@ -246,103 +292,112 @@ // 娉ㄦ剰锛氭湁鏃� data 鍙兘鏄竴涓瓧绗︿覆锛堜緥濡� JSON 瀛楃涓诧級 let data = selectedScheme.value.data; // 濡傛灉鏄瓧绗︿覆锛屽垯灏濊瘯瑙f瀽鎴愬璞� - if (typeof data === 'string') { + if (typeof data === "string") { try { data = JSON.parse(data); - console.log('瑙f瀽鍚庣殑闄嶉洦鏁版嵁锛�', data); + console.log("瑙f瀽鍚庣殑闄嶉洦鏁版嵁锛�", 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: 40, density: 35, - color: '#ADD8E6' + color: "#ADD8E6", }, { - name: '澶ч洦', + name: "澶ч洦", min: 25, max: 49.9, size: 1.0, speed: 70, density: 60, - color: '#ADD8E6' + color: "#ADD8E6", }, { - name: '鏆撮洦', + name: "鏆撮洦", min: 50, max: 99.9, size: 1.3, speed: 90, density: 80, - color: '#ADD8E6' + color: "#ADD8E6", }, { - name: '澶ф毚闆�', + name: "澶ф毚闆�", min: 100, size: 1.6, speed: 110, density: 100, - 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.5, speed: 30, density: 20, color: '#F0F8FF' }; + return { name: "鏃犻洦", size: 0.5, speed: 30, density: 20, color: "#F0F8FF" }; } // 鏍规嵁鎾斁杩涘害鏇存柊澶╂皵鏁堟灉锛堝凡浼樺寲锛� let lastUsedIndex = -1; // 缂撳瓨涓婁竴娆′娇鐢ㄧ殑绱㈠紩锛岄槻姝㈤噸澶嶆洿鏂� let lastRainValue = null; function updateWeatherByProgress() { if (rainFallValues.value.length === 0) return; - console.log(`鏃堕棿杞存�绘椂闀�: ${duration.value}, 褰撳墠鏃堕棿: ${currentTime.value}`); // 鎵撳嵃鏃堕棿杞翠俊鎭� + 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]; @@ -353,7 +408,7 @@ // console.log(`姝e湪澶勭悊鐨勯洦閲忔暟鎹偣: 褰撳墠=${currentRain}, 涓嬩竴涓�=${nextRain}, 鎻掑�煎悗=${rainValue.toFixed(2)}, 绱㈠紩=${index}`); // 濡傛灉褰撳墠绱㈠紩鏈彉鍖栦笖鎻掑�煎樊寮備笉澶э紝璺宠繃閲嶅鏇存柊 if (index === lastUsedIndex && Math.abs(rainValue - lastRainValue) < 0.1) { - console.log('鐢变簬鏁版嵁鏃犳樉钁楀彉鍖栵紝璺宠繃鏈鏇存柊'); + console.log("鐢变簬鏁版嵁鏃犳樉钁楀彉鍖栵紝璺宠繃鏈鏇存柊"); return; } @@ -363,10 +418,10 @@ // 鑾峰彇瀵瑰簲鐨勯洦褰㈤厤缃� const rainLevel = getRainLevel(rainValue); - if (rainLevel.name === '鏃犻洦') { + if (rainLevel.name === "鏃犻洦") { // 鏃犻洦鐘舵�侊細娓呴櫎闆ㄦ晥 mapUtils.delRain(); - console.log('鎵ц浜嗘棤闆ㄧ姸鎬侊紝娓呴櫎浜嗛洦鏁�'); + console.log("鎵ц浜嗘棤闆ㄧ姸鎬侊紝娓呴櫎浜嗛洦鏁�"); return; } @@ -375,9 +430,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); } @@ -414,7 +469,7 @@ // 璁剧疆鎾斁閫熺巼 const setPlaybackRate = (rate) => { - isColorRenderEnabled.value = false + isColorRenderEnabled.value = false; playbackRate.value = rate; showSpeedMenu.value = false; // 鍋滄褰撳墠鎾斁 @@ -454,7 +509,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); @@ -486,7 +542,7 @@ () => selectedScheme.value, (newVal) => { if (newVal) { - console.log('閫変腑鏂规宸叉敼鍙�:', newVal) + console.log("閫変腑鏂规宸叉敼鍙�:", newVal); } } ); @@ -499,7 +555,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); } } @@ -534,15 +592,17 @@ const schemeInfo = selectedScheme.value; serviceInfo = schemeInfo.serviceName; // console.log('鑾峰彇鍒扮殑 serviceName:', serviceInfo); - getRainfallData() + getRainfallData(); // 鏍规嵁layer.json鍘昏幏鍙栨椂闂磋酱淇℃伅 - const { waterTimestamps: timestamps } = await fetchWaterSimulationData(serviceInfo); + const { waterTimestamps: timestamps } = await fetchWaterSimulationData( + serviceInfo + ); // 鐜板湪鏄寜鐓ф�诲叡鏈夊灏戜釜鐐规潵娓叉煋鏃堕棿杞� if (timestamps) { 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" ); @@ -574,6 +634,7 @@ const { endSimulate } = inject("simulateActions"); function handleBack() { endSimulate(); + EventBus.emit("close-selectArea"); isWaterPrimitiveCreated.value = false; if (ratelevelRef.value) { ratelevelRef.value.endCalculation(); diff --git a/src/components/monifangzhen/echartInfo.vue b/src/components/monifangzhen/echartInfo.vue index 8ac5c1d..4f55c8c 100644 --- a/src/components/monifangzhen/echartInfo.vue +++ b/src/components/monifangzhen/echartInfo.vue @@ -107,7 +107,7 @@ import dayjs from "dayjs"; import { useSimStore } from "@/store/simulation"; const simStore = useSimStore(); -const { rainFalls } = simStore; +const { rainFalls, intensityUnit } = simStore; let dataIntervalId = null; // 琛ㄦ牸瀹氭椂鍣� ID const jsonData = ref([]); // JSON 鏁版嵁 @@ -226,11 +226,7 @@ // 瑙﹀彂浜嬩欢锛屽皢褰撳墠琛岀殑 ID 鍙戦�佸埌鍦板浘缁勪欢 EventBus.emit("row-clicked", row.id); } -// const listData = cityData.listData; -// const data = ref([ -// 8.16, 15.38, 13.94, 9.46, 86.42, 71.32, 28.52, 25.9, 13.74, 14.54, 15.53, -// 9.17, 0, 0.09, 0.86, 8.15, 44.8, 21.86, 6.2, 4.98, 2.82, 2.36, 3.1, 1.06, -// ]); + const rainChangeShow = ref(false); const tableContainer = ref(null); @@ -298,8 +294,6 @@ }; const debuffClick = () => { - // Assuming you have access to parent components in a different way in Vue 3 - // You might need to use provide/inject or props/emits instead console.log("Debuff click"); }; @@ -312,61 +306,14 @@ // 鏃堕棿杞存椂闂存埅鍙栧鐞� const syncTimeWithTimeline = () => { - // 2025-05-24 00:25 - // // 灏嗘椂闂村瓧绗︿覆杞崲涓哄垎閽熸暟 (鏍煎紡: "YYYY-MM-DD mm:ss") - const timeParts = nowTime.value.split(" "); - const timeOnly = timeParts[1]; // 鑾峰彇 "mm:ss" 閮ㄥ垎 - return timeOnly; + if (nowTime.value) { + const timeParts = nowTime.value.split(" "); + const timeOnly = timeParts[1]; // 鑾峰彇 "mm:ss" 閮ㄥ垎 + console.log(nowTime.value, "nowTime.valuenowTime.value"); + return timeOnly; + } }; -// 鏆傛椂鍏堜笉鐢紝涓昏鍔熻兘涓轰竴鍒嗛挓鎻掑�煎叚鍗佷釜鏁版嵁 -// function processData(originalData) { -// const processedData = []; -// let currentTotal = 0; // 鍔ㄦ�佺疮鍔犵殑 total - -// for (let i = 0; i < originalData.length; i++) { -// const current = originalData[i]; -// const targetIntensity = current.intensity; -// let remainingIntensity = targetIntensity; // 鍓╀綑闇�瑕佸垎閰嶇殑 intensity - -// // 鐢熸垚60涓偣锛堝姩鎬侀殢鏈哄~鍏咃紝鍏佽鍑虹幇浣庡�煎拰楂樺�硷級 -// for (let j = 0; j < 60; j++) { -// // 1. 鍔ㄦ�佺敓鎴� intensity锛堥殢鏈猴紝浣嗘渶鍚庝竴鐐硅ˉ瓒冲墿浣欏�硷級 -// let intensity; -// if (j === 59) { -// intensity = remainingIntensity; // 鏈�鍚庝竴鐐瑰己鍒剁敤瀹屽墿浣欏�� -// } else { -// // 闅忔満鐢熸垚涓�涓瘮渚嬶紙0.1~0.5涔嬮棿鐨勪綆姒傜巼 + 鍋跺皵楂樺�硷級 -// const isLowValue = Math.random() < 0.7; // 70%姒傜巼鐢熸垚浣庡�� -// const maxAllowed = remainingIntensity / (60 - j); // 纭繚涓嶈秴鍓╀綑鍊� -// intensity = isLowValue -// ? Math.random() * maxAllowed * 0.3 // 浣庡�艰寖鍥� -// : Math.random() * maxAllowed * 1.5; // 鍋跺皵楂樺�� -// } -// remainingIntensity -= intensity; - -// // 2. 瀹炴椂绱姞 total -// currentTotal += intensity; - -// processedData.push({ -// time: current.time, -// intensity: intensity, -// total: currentTotal, -// }); -// } - -// // 楠岃瘉褰撳墠娈电殑鎬� intensity 鏄惁鍖归厤鍘熷鏁版嵁 -// console.log( -// `Segment ${i}: Generated intensity sum = ${( -// targetIntensity - remainingIntensity -// ).toFixed(2)}, Original = ${targetIntensity}` -// ); -// } - -// return processedData; -// } - -// 璁剧疆闄嶉洦鍥捐〃 const setEcharts1 = () => { const chartDom = document.getElementById("echarts1"); const myChart1 = echarts.init(chartDom); @@ -392,17 +339,27 @@ // 鍔犺浇JSON鏁版嵁 const loadJsonData = async () => { try { - // 杩欎釜result鏄敤鐨勪笂杩扮殑鎻掑�硷紙鏆傛椂鍏堜笉鐢級 - // const result = processData(simStore.rainFalls); const result = simStore.rainFalls; if (result?.length) { rainfallData.value = result; + + // 鍒ゆ柇 intensityUnit 鏄惁涓� mm/15min if (rainfallData.value.length > 0) { - // data1.value = [rainfallData.value[0].intensity]; - // data2.value = [rainfallData.value[0].total]; - // 榛樿鍒濆浠�0寮�濮嬬殑 + // 濡傛灉鏄� mm/15min锛屽垯灏嗘墍鏈� intensity * 60 + if (intensityUnit === "mm/15min") { + rainfallData.value = rainfallData.value.map((item) => ({ + ...item, + intensity: item.intensity * 60, + })); + } + + // 鍒濆鍖� data1 鍜� data2锛堜粠 0 寮�濮嬶級 data1.value = [0]; data2.value = [0]; + + // 浣跨敤绗竴涓暟鎹」鐨� time 浣滀负鍒濆鍊� + xAxisData.value = [rainfallData.value[0]?.time || "00:00"]; + updateChart(); } } @@ -416,10 +373,7 @@ const option = { animation: false, tooltip: { trigger: "axis" }, - // // 璋冩暣grid甯冨眬瑙e喅Y杞存爣绛炬樉绀洪棶棰� grid: { - // left: "1%", // 宸︿晶鐣欐洿澶氱┖闂� - // right: "1%", // 鍙充晶鐣欐洿澶氱┖闂� bottom: "1%", containLabel: false, }, @@ -427,7 +381,6 @@ data: ["闄嶉洦鏁版嵁", "绱闆ㄩ噺"], textStyle: { color: "#fff" }, right: "10px", - // 娣诲姞legend鐐瑰嚮浜嬩欢澶勭悊 selected: { 闄嶉洦鏁版嵁: true, 绱闆ㄩ噺: true, @@ -448,7 +401,6 @@ ...getDynamicYAxis(data1.value), axisLabel: { color: "#fff" }, splitLine: { show: false }, - // 纭繚鍚嶇О鏄剧ず瀹屾暣 nameTextStyle: { color: "#fff", }, @@ -468,13 +420,13 @@ series: [ { name: "闄嶉洦鏁版嵁", - type: "bar", // 鏄庣‘鎸囧畾绫诲瀷 + type: "bar", data: data1.value, itemStyle: { color: "#3268fe" }, }, { name: "绱闆ㄩ噺", - type: "line", // 鏄庣‘鎸囧畾绫诲瀷 + type: "line", yAxisIndex: 1, data: data2.value, lineStyle: { color: "#ffb637" }, @@ -484,13 +436,13 @@ myChart1.setOption(option, true); }; - // 鏁版嵁鏇存柊 + // 鏁版嵁鏇存柊 - 姣忔娣诲姞涓�鏉℃暟鎹� const updateData = () => { if (dataIndex.value < rainfallData.value.length) { const item = rainfallData.value[dataIndex.value]; data1.value.push(item.intensity); data2.value.push(item.total); - xAxisData.value.push(syncTimeWithTimeline()); + xAxisData.value.push(item.time); // 鉁� 鏀圭敤 item.time dataIndex.value++; updateChart(); } else { @@ -498,28 +450,45 @@ } }; - // 鎺у埗鏂规硶 - const startUpdating = (interval = 60000) => { - if (!updateInterval) { - updateInterval = setInterval(updateData, interval); - } + // 鎺у埗鏂规硶锛氱簿纭帶鍒跺姩鐢绘椂闂达紝鏈�鍚庝竴甯у湪绗� 90 绉� + const startUpdating = () => { + if (updateInterval || dataIndex.value >= rainfallData.value.length) return; + + const totalDuration = 90000; // 90绉� + const totalPoints = rainfallData.value.length; + const startTime = Date.now(); + + const animate = (index = 0) => { + if (index >= totalPoints) { + stopUpdating(); + return; + } + + const now = Date.now(); + const expectedTime = (index / (totalPoints - 1)) * totalDuration; + const delay = Math.max(0, startTime + expectedTime - now); + + updateInterval = setTimeout(() => { + dataIndex.value = index + 1; // 鍥犱负鏄粠 0 寮�濮� push 鐨� + updateData(); + animate(index + 1); + }, delay); + }; + + animate(dataIndex.value); }; const stopUpdating = () => { - clearInterval(updateInterval); + clearTimeout(updateInterval); updateInterval = null; }; const resetLoading = () => { stopUpdating(); dataIndex.value = 0; - data1.value = []; - data2.value = []; - xAxisData.value = ["00:00"]; - if (rainfallData.value.length) { - data1.value = [rainfallData.value[0].intensity]; - data2.value = [rainfallData.value[0].total]; - } + data1.value = [0]; + data2.value = [0]; + xAxisData.value = [rainfallData.value[0]?.time || "00:00"]; updateChart(); }; diff --git a/src/components/monifangzhen/schemeCard.vue b/src/components/monifangzhen/schemeCard.vue index 4c2d825..8a0b811 100644 --- a/src/components/monifangzhen/schemeCard.vue +++ b/src/components/monifangzhen/schemeCard.vue @@ -113,10 +113,22 @@ simStore.setSelectedScheme(item); console.log("鏈夋湇鍔″悕绉�"); } - + const flyHeight = ref(100000); + const shouldShowFill = false; // 姹傝В鍣ㄦ眰瑙e畬鎴愪箣鍚庢墠鍙互鏄剧ず鏃堕棿杞� if (item.status == 10) { - initeWaterPrimitiveView(); + // 鍙湁琛屾斂鍖哄垝鎵ц + if (item.areaType == 1) { + flyHeight.value = 100000; + EventBus.emit("select-geom", { + geom: item.geom, + flyHeight: flyHeight.value, + shouldShowFill: shouldShowFill, + }); + } else { + // 瀛欒儭娌熷尯鍩熻烦杞瑙� + initeWaterPrimitiveView(); + } currentScheme.value = item; schemeInfoShow.value = true; emit("closeBtn", false); diff --git a/src/components/tools/Message copy.vue b/src/components/tools/Message copy.vue deleted file mode 100644 index e82d339..0000000 --- a/src/components/tools/Message copy.vue +++ /dev/null @@ -1,132 +0,0 @@ -<template> - <div class="message"> - <div class="message-top">妯℃嫙鏂规璇︽儏</div> - <div class="message-close" @click="closeMsg"></div> - <div class="message-context"> - <div v-for="(item, key) in messageList" :key="key" class="message-item"> - <div class="message-name">{{ item.name }}</div> - <div class="message-value">{{ item.value }}</div> - </div> - </div> - <div class="message-btn" @click="startPlay">寮�濮嬫ā鎷�</div> - </div> -</template> - -<script> - export default { - name: "Message", - components: {}, - data() { - return { - messageList: [ - { - name: "鏂规鍚嶇О锛�", - value: "闄嶉洦30mm鏁版嵁", - }, - { - name: "妯℃嫙鍖哄煙锛�", - value: cityData.listData[0] || "瀛欒儭娌�", - }, - { - name: "闄嶉洦鏁版嵁锛�", - value: "闄嶉洦寮哄害30MM", - }, - { - name: "棰勬紨寮�濮嬫椂闂达細", - value: "2025-01-15 12:55:18", - }, - { - name: "棰勬紨缁撴潫鏃堕棿锛�", - value: "2025-01-15 18:35:00", - }, - { - name: "鍒涘缓鏃堕棿锛�", - value: "2025-01-15 8:15:28", - }, - ], - } - }, - methods: { - closeMsg() { - this.$parent.messageShow = false - }, - startPlay() { - this.$parent.rightShow = true - this.$parent.flowShow = true - this.$parent.messageShow = false - }, - }, - } -</script> -<style lang="less" scoped> - .message { - background: url("@/assets/img/tools/messagebg.png"); - width: 391px; - height: 392px; - } - - .message-top { - position: absolute; - top: 5px; - left: 20px; - font-weight: 700; - font-size: 18px; - font-weight: 700; - color: #fff; - line-height: 40px; - width: 270px; - cursor: pointer; - } - - .message-close { - position: absolute; - right: 3px; - top: 27px; - width: 20px; - height: 20px; - text-align: center; - line-height: 20px; - text-align: center; - - font-weight: 700; - font-size: 18px; - font-weight: 700; - color: #fff; - cursor: pointer; - } - - .message-context { - position: absolute; - top: 60px; - left: 20px; - width: 350px; - } - - .message-item { - height: 23px; - margin-top: 15px; - margin-left: 10px; - } - .message-name { - float: left; - font-weight: 700; - color: #94e0c4; - } - - .message-value { - float: left; - color: #e1eee9; - } - - .message-btn { - background: url("@/assets/img/tools/messagebtn.png") no-repeat; - position: absolute; - bottom: 60px; - right: 60px; - width: 105px; - height: 26px; - text-align: center; - color: #fff; - cursor: pointer; - } -</style> diff --git a/src/store/simAPI.js b/src/store/simAPI.js index ad7952c..ce8cee2 100644 --- a/src/store/simAPI.js +++ b/src/store/simAPI.js @@ -76,10 +76,11 @@ mode: forms.mode, gauges: forms.gauges, rainfalls: forms.rainFallList, - intensityUnit: forms.intensityUnit + // intensityUnit: forms.intensityUnit + intensityUnit: forms.intensityUnit || 'mm/15min' }) } - console.log(params) + console.log(params, '淇濆瓨鏂规鍙傛暟') const res = await createSimData(params) ElMessage.success('鏂规淇濆瓨鎴愬姛') return res @@ -104,8 +105,9 @@ confirmButtonText: '纭畾', cancelButtonText: '鍙栨秷', }) - // 鐢ㄦ埛纭鍚庢墽琛屼繚瀛� - await saveScheme(forms) + // 鐢ㄦ埛纭鍚庢墽琛屼繚瀛橈紝骞惰繑鍥炵粨鏋� + const res = await saveScheme(forms); // 鎵ц淇濆瓨骞舵帴鏀剁粨鏋� + return res; // 杩斿洖淇濆瓨鐨勭粨鏋� } catch (error) { if (error !== 'cancel') { console.error('淇濆瓨鍑洪敊:', error) diff --git a/src/store/simulation.js b/src/store/simulation.js index ccd3df7..3911a2c 100644 --- a/src/store/simulation.js +++ b/src/store/simulation.js @@ -31,10 +31,12 @@ const backToHome = ref(false) const selectedScheme = ref(null) const rainFalls = ref() + const intensityUnit = ref() const setSelectedScheme = (scheme) => { selectedScheme.value = scheme rainFalls.value = JSON.parse(scheme.data).rainfalls - console.log(rainFalls.value, 'shceme') + intensityUnit.value = JSON.parse(scheme.data).intensityUnit + console.log(intensityUnit.value, 'shceme') } const clearSelectedScheme = () => { selectedScheme.value = null @@ -148,6 +150,7 @@ schemCard, backToHome, rainFalls, + intensityUnit, DangerPoint, DeviceShowSwitch, DangerShowSwitch, diff --git a/src/utils/tools.js b/src/utils/tools.js index 488ee6c..e94c5db 100644 --- a/src/utils/tools.js +++ b/src/utils/tools.js @@ -170,7 +170,6 @@ CreateLabel(pic, show) { if (show) { earthCtrl.factory.createSimpleGraphic(pic, {}, function (entity) { - console.log(entity.polyline.positions.getValue(), "entity"); window.Viewer = earthCtrl.viewer; //寮�鍚紪杈戝苟鍚敤灞炴�у脊绐� earthCtrl.factory.SimpleGraphic.edit(true, { @@ -300,7 +299,7 @@ polyline: Cesium.Color.fromCssColorString("#ffff0050"), polygon: Cesium.Color.fromCssColorString("#ffff0050"), }, - (e) => {} + (e) => { } ); }, qxcl() { @@ -310,7 +309,7 @@ polyline: Cesium.Color.fromCssColorString("#ffff0050"), polygon: Cesium.Color.fromCssColorString("#ffff0050"), }, - (e) => {} + (e) => { } ); }, fwjcl() { @@ -320,7 +319,7 @@ polyline: Cesium.Color.fromCssColorString("#ffff0050"), polygon: Cesium.Color.fromCssColorString("#ffff0050"), }, - (e) => {} + (e) => { } ); }, // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>鍦烘櫙鎴浘<<<<<<<<<<<<<<<<<<<<<<<<<<<<< @@ -930,7 +929,7 @@ }; this.analysisFlood = earthCtrl.analysis.createSubmergence( method, - (value) => {} + (value) => { } ); }, clearFlood() { diff --git a/src/views/GisView.vue b/src/views/GisView.vue index 322259a..5c8a762 100644 --- a/src/views/GisView.vue +++ b/src/views/GisView.vue @@ -27,7 +27,7 @@ // 1. 璁剧疆鍒濆鏃堕棿 const date = new Date(2025, 3, 11, 12, 0, 0, 0); - const julianDate = SmartEarth.Cesium.JulianDate.fromDate(date); + const julianDate = SmartEarth.Cesium.JulianDate.fromDate(date); // earthCtrl.viewer.clock.currentTime = julianDate; // 2. 閰嶇疆鏃堕挓閫夐」锛岀姝㈣嚜鍔ㄦ帹杩涙椂闂� @@ -58,10 +58,13 @@ const MULTIPOLYGON_COORDS = ref([]); let previousEntities = []; // 鐢ㄤ簬瀛樺偍涔嬪墠鍒涘缓鐨勫疄浣� const flyToHeight = ref(null); +const ShowFill = ref(true); // 鐩戝惉鏂板缓鏂规閫夋嫨鐨勫尯鍩熻寖鍥� -EventBus.on("select-geom", ({ geom, flyHeight }) => { +EventBus.on("select-geom", ({ geom, flyHeight, shouldShowFill }) => { flyToHeight.value = flyHeight; + ShowFill.value = shouldShowFill; + console.log(ShowFill.value, "ShowFill.valueShowFill.value"); const coordsStr = geom .replace("MULTIPOLYGON(((", "") // 鍘绘帀寮�澶� .replace(")))", ""); // 鍘绘帀缁撳熬 @@ -87,7 +90,7 @@ // 娓呴櫎涔嬪墠鐨勬墍鏈夊疄浣� clearPreviousEntities(); // 閫変腑鍖哄煙鏍囪壊 - addCustomPolygon(); + addCustomPolygon(ShowFill.value); }); // 娓呴櫎涔嬪墠鐨勬墍鏈夊疄浣� @@ -127,25 +130,27 @@ }; } -function addCustomPolygon() { +function addCustomPolygon(ShowFill = true) { // 灏� MULTIPOLYGON_COORDS.value 杞崲涓� GeoJSON 鏍煎紡 const geoJson = convertToGeoJson(MULTIPOLYGON_COORDS.value); const center = geoJson.properties.center; - // 鍒涘缓澶氳竟褰㈠疄浣� + // 鍒涘缓澶氳竟褰㈠疄浣擄紝骞舵牴鎹� ShowFill 鍙傛暟鍐冲畾鏄惁鏄剧ず濉厖棰滆壊 const polygonEntity = viewer.entities.add({ - // name: "鑷畾涔夊尯鍩�", polygon: { hierarchy: Cesium.Cartesian3.fromDegreesArray( geoJson.geometry.coordinates[0][0].flat() ), - material: Cesium.Color.RED.withAlpha(0.3), // 鍗婇�忔槑绾㈣壊濉厖 + material: ShowFill + ? Cesium.Color.RED.withAlpha(0.3) // 鍗婇�忔槑绾㈣壊濉厖 + : new Cesium.ColorMaterialProperty(Cesium.Color.TRANSPARENT), // 濡傛灉涓嶉渶瑕佸~鍏咃紝鍒欎娇鐢ㄩ�忔槑鏉愯川 outline: true, outlineColor: Cesium.Color.RED, // 绾㈣壊杈规 outlineWidth: 5, clampToGround: true, // 璐村湴鏄剧ず }, }); + previousEntities.push(polygonEntity); // 椋炲悜涓績鐐� @@ -154,14 +159,13 @@ center.lon, center.lat, flyToHeight.value - ), // 鎻愰珮鍒� 100000绫抽珮搴� + ), // 鎻愰珮鍒版寚瀹氶珮搴� orientation: { heading: Cesium.Math.toRadians(0), // 姝e寳鏂瑰悜 pitch: Cesium.Math.toRadians(-90), // 鍚戜笅鍊炬枩90搴︼紙鍨傜洿淇锛� roll: 0.0, }, }); - } EventBus.on("close-selectArea", () => { @@ -469,7 +473,7 @@ } // // 淇敼鎸囧崡閽堜綅缃� /deep/ .compass { - right: 128px !important; - top: 112px; + right: 128px !important; + top: 112px; } </style> diff --git a/src/views/left/CitySim.vue b/src/views/left/CitySim.vue index dd8bf81..8e68f7c 100644 --- a/src/views/left/CitySim.vue +++ b/src/views/left/CitySim.vue @@ -378,10 +378,6 @@ console.log(intensityColumn, "intensityColumnintensityColumnintensityColumn"); // 3. 鎻愬彇绗簩鍒楃殑鍗曚綅锛堝 "(mm/h)" 鈫� "mm/h"锛� const intensityUnit = extractUnitFromHeader(intensityColumn); - console.log( - intensityUnit, - "intensityUnitintensityUnitintensityUnitintensityUnit" - ); forms.intensityUnit = intensityUnit; // 瀛樺偍鍗曚綅锛堝彲閫夛級 // 4. 濡傛灉鏍¢獙閫氳繃锛岀户缁鐞嗘暟鎹� @@ -499,7 +495,7 @@ }); } catch (error) { console.error("鍚姩妯℃嫙杩囩▼涓彂鐢熼敊璇細", error); - ElMessage.error("鍚姩妯℃嫙澶辫触锛岃绋嶅悗鍐嶈瘯"); + // ElMessage.error("鍚姩妯℃嫙澶辫触锛岃绋嶅悗鍐嶈瘯"); } } </script> -- Gitblit v1.9.3