From df7876b99d8e8d359909756d42e909dcc215fa38 Mon Sep 17 00:00:00 2001 From: guonan <guonan201020@163.com> Date: 星期一, 21 四月 2025 17:22:49 +0800 Subject: [PATCH] 修改图层显示 --- src/components/tools/LayerTree.vue | 131 +++++++++---- src/components/monifangzhen/ResultAssess.vue | 366 +++++++++++++++++++++------------------- src/views/mnfz.vue | 29 ++- 3 files changed, 299 insertions(+), 227 deletions(-) diff --git a/src/components/monifangzhen/ResultAssess.vue b/src/components/monifangzhen/ResultAssess.vue index 3ac2eb6..5166186 100644 --- a/src/components/monifangzhen/ResultAssess.vue +++ b/src/components/monifangzhen/ResultAssess.vue @@ -1,20 +1,20 @@ <template> - <div class="left"> - <div class="left-top"> - <span>娉ョ煶娴佹ā鎷熷嵄闄╂�ц瘎浼�</span> - </div> - <div class="left-content"> - <div class="list-info"> - <span class="listInfo-title">妯℃嫙鏂规</span> + <div class="left"> + <div class="left-top"> + <span>娉ョ煶娴佹ā鎷熷嵄闄╂�ц瘎浼�</span> + </div> + <div class="left-content"> + <div class="list-info"> + <span class="listInfo-title">妯℃嫙鏂规</span> - <el-form :model="form" label-width="70px"> - <el-form-item label="妯℃嫙鏂规"> - <el-input placeholder="璇疯緭鍏ュ唴瀹�" v-model="form.name" ></el-input> - </el-form-item> - <el-form-item label="璇勪及鍖哄煙"> - <el-input placeholder="璇疯緭鍏ュ唴瀹�" v-model="form.qy" ></el-input> - </el-form-item> - <!-- <el-form-item label="鏁版嵁绫诲瀷"> + <el-form :model="form" label-width="70px"> + <el-form-item label="妯℃嫙鏂规"> + <el-input placeholder="璇疯緭鍏ュ唴瀹�" v-model="form.name"></el-input> + </el-form-item> + <el-form-item label="璇勪及鍖哄煙"> + <el-input placeholder="璇疯緭鍏ュ唴瀹�" v-model="form.qy"></el-input> + </el-form-item> + <!-- <el-form-item label="鏁版嵁绫诲瀷"> <el-select style="width: 100%" @@ -25,266 +25,282 @@ </el-select> </el-form-item> --> - <el-form-item label="鍒涘缓鏃堕棿" style="width: 270px"> - <el-date-picker - size="small" - v-model="form.date" - type="daterange" - range-separator="-" - start-placeholder="寮�濮嬫棩鏈�" - end-placeholder="缁撴潫鏃ユ湡" - > - </el-date-picker> - </el-form-item> - </el-form> - <div class="listinfo-btns"> - <div class="listinfo-btn" @click="openfilie">寮�濮嬭瘎浼�</div> - <div class="listinfo-btn" @click="savefilie">淇濆瓨鏂规</div> - </div> - </div> - <div class="listInfo-title" style="margin-top: 15px">鍘嗗彶璇勪及</div> - <div class="level-list"> - <div - v-for="item in levelList" - :key="item.name" - @click="handleClick(item)" - class="level-item" - > - <img style="width: 100%" src="@/assets/img/mapview/example.png" alt="" srcset="" /> - <div class="title"> - <div>鍒涘缓鏃堕棿锛�</div> - <div>2024骞�04鏈�03鏃�12:00:00</div> - </div> - <div class="title"> - <div>璇勪及妯″瀷锛�</div> - <div>XXX鍗遍櫓鎬ц瘎浼版ā鍨�</div> - </div> - </div> - </div> - </div> - </div> + <el-form-item label="鍒涘缓鏃堕棿" style="width: 270px"> + <el-date-picker + size="small" + v-model="form.date" + type="daterange" + range-separator="-" + start-placeholder="寮�濮嬫棩鏈�" + end-placeholder="缁撴潫鏃ユ湡" + > + </el-date-picker> + </el-form-item> + </el-form> + <div class="listinfo-btns"> + <div class="listinfo-btn" @click="openfilie">寮�濮嬭瘎浼�</div> + <div class="listinfo-btn" @click="savefilie">淇濆瓨鏂规</div> + </div> + </div> + <div class="listInfo-title" style="margin-top: 15px">鍘嗗彶璇勪及</div> + <div class="level-list"> + <div + v-for="item in levelList" + :key="item.name" + @click="handleClick(item)" + class="level-item" + > + <img + style="width: 100%" + src="@/assets/img/mapview/example.png" + alt="" + srcset="" + /> + <div class="title"> + <div>鍒涘缓鏃堕棿锛�</div> + <div>2024骞�04鏈�03鏃�12:00:00</div> + </div> + <div class="title"> + <div>璇勪及妯″瀷锛�</div> + <div>XXX鍗遍櫓鎬ц瘎浼版ā鍨�</div> + </div> + </div> + </div> + </div> + </div> </template> <script setup> -import { ref, reactive, onMounted, onBeforeUnmount, onUnmounted, defineEmits } from "vue" -import { loadAreaPolygon } from '@/utils/area.js' -const emits = defineEmits(['row-click']) -const currentLevel = ref("10骞翠竴閬�") +import { + ref, + reactive, + onMounted, + onBeforeUnmount, + onUnmounted, + defineEmits, +} from "vue"; +import { loadAreaPolygon } from "@/utils/area.js"; +import { useSimStore } from "@/store/simulation"; +import { storeToRefs } from "pinia"; +const emits = defineEmits(["row-click"]); +const currentLevel = ref("10骞翠竴閬�"); const form = ref({ - name: `瀛欒儭娌�${currentLevel.value}闄嶉洦妯℃嫙`, - interval: 15, - qy: "瀛欒儭娌�", - region: "", - jy: "", - jg: "", - date: "", -}) + name: `瀛欒儭娌�${currentLevel.value}闄嶉洦妯℃嫙`, + interval: 15, + qy: "瀛欒儭娌�", + region: "", + jy: "", + jg: "", + date: "", +}); const levelList = ref([ - { - name: "10骞翠竴閬�", - }, - { - name: "20骞翠竴閬�", - }, - { - name: "50骞翠竴閬�", - }, - // { - // name: "100骞翠竴閬�", - // }, -]) + { + name: "10骞翠竴閬�", + }, + { + name: "20骞翠竴閬�", + }, + { + name: "50骞翠竴閬�", + }, + // { + // name: "100骞翠竴閬�", + // }, +]); -let dataSource = null +let dataSource = null; +const simStore = useSimStore(); + +const { showDangerAssess } = storeToRefs(simStore); function handleClick(item) { - currentLevel.value = item.name - showDetail.value = !showDetail.value - emits('row-click', showDetail.value) - - addFxArea(showDetail.value) + currentLevel.value = item.name; + showDangerAssess.value = !showDangerAssess.value; + // showDangerAssess.value = true; + emits("row-click", showDangerAssess.value); + addFxArea(showDangerAssess.value); } -const showDetail = ref(false) +// const showDangerAssess = ref(false); function addFxArea(visible) { - if (dataSource != null) { - dataSource.show = visible + if (dataSource != null) { + dataSource.show = visible; - return - } - // const dataSourcePromise = Cesium.GeoJsonDataSource.load('/json/fxArea.json', { - // stroke: Cesium.Color.YELLOW, - // fill: Cesium.Color.YELLOW.withAlpha(0.5), - // }) - dataSourcePromise.then(data => { - dataSource = data - viewer.dataSources.add(data) - }) - + return; + } + const dataSourcePromise = Cesium.GeoJsonDataSource.load("/json/fxArea.json", { + stroke: Cesium.Color.YELLOW, + fill: Cesium.Color.YELLOW.withAlpha(0.5), + }); + dataSourcePromise.then((data) => { + dataSource = data; + viewer.dataSources.add(data); + }); } function removeFxArea() { - dataSource && viewer.dataSources.remove(dataSource) + dataSource && viewer.dataSources.remove(dataSource); } onUnmounted(() => { - removeFxArea() -}) + removeFxArea(); +}); </script> <style lang="less" scoped> @import url("../../assets/css/infobox.css"); .level-list { - overflow-y: auto; - height: calc(100% - 270px); + overflow-y: auto; + height: calc(100% - 270px); - .level-item { - margin-top: 10px; - width: 90%; - height: 200px; - text-align: center; - /* background: rgba(8, 75, 66, 1); */ - color: white; - margin-right: 10px; - margin-bottom: 10px; - cursor: pointer; - border-radius: 5px; + .level-item { + margin-top: 10px; + width: 90%; + height: 200px; + text-align: center; + /* background: rgba(8, 75, 66, 1); */ + color: white; + margin-right: 10px; + margin-bottom: 10px; + cursor: pointer; + border-radius: 5px; - img { - width: 100%; - height: 130px; - border-radius: 5px; - } + img { + width: 100%; + height: 130px; + border-radius: 5px; + } - .title { - display: flex; - justify-content: space-between; - padding: 0 15px; - } + .title { + display: flex; + justify-content: space-between; + padding: 0 15px; + } - /* &.active { + /* &.active { background: #11b6a6; } */ - } + } } .listinfo { - padding: 10px; + padding: 10px; } .listInfo-title { - color: #fff; - font-size: 16px; - font-weight: 700; - margin-top: 20px; + color: #fff; + font-size: 16px; + font-weight: 700; + margin-top: 20px; } .listInfo { - font-size: 12px; - display: flex; - flex-direction: column; + font-size: 12px; + display: flex; + flex-direction: column; - :last-child { - flex: 1; - color: white !important; - } + :last-child { + flex: 1; + color: white !important; + } - /deep/.el-select__selected-item .el-select__placeholder { - span { - color: white !important; - } - } + /deep/.el-select__selected-item .el-select__placeholder { + span { + color: white !important; + } + } } /deep/.el-form-item__label { - color: #78cda4; - font-size: 14px; - // width: 84px; + color: #78cda4; + font-size: 14px; + // width: 84px; } /deep/.el-form-item { - margin: 10px 0px; + margin: 10px 0px; } /deep/.el-input { - width: calc(100% - 80px); + width: calc(100% - 80px); } /deep/.el-input__inner { - background: rgba(8, 75, 66, 1); - color: white; + background: rgba(8, 75, 66, 1); + color: white; } /deep/.el-form-item__content { - width: 100%; + width: 100%; } /deep/.el-input-group__append, .el-input-group__prepend { - padding: 0 6px; - background: rgba(8, 75, 66, 1) !important; - color: #ffffff; + padding: 0 6px; + background: rgba(8, 75, 66, 1) !important; + color: #ffffff; } /deep/.el-form-item__content .el-input-group { - vertical-align: middle; + vertical-align: middle; } /deep/.el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner { - width: calc(100% - 80px) !important; - background: rgba(8, 75, 66, 1) !important; + width: calc(100% - 80px) !important; + background: rgba(8, 75, 66, 1) !important; } /deep/.el-date-editor .el-range-separator { - color: white; + color: white; } /deep/.el-range-input { - background: transparent !important; - color: white !important; + background: transparent !important; + color: white !important; } </style> <style> .el-select-dropdown { - background: rgba(8, 75, 66, 1) !important; - color: white !important; + background: rgba(8, 75, 66, 1) !important; + color: white !important; } .el-picker-panel__body { - color: white !important; + color: white !important; } .el-picker-panel__body div { - background: transparent !important; + background: transparent !important; } .el-picker-panel { - background: rgba(8, 75, 66, 1) !important; + background: rgba(8, 75, 66, 1) !important; } .el-select-dropdown__item { - color: white !important; - font-size: 12px !important; + color: white !important; + font-size: 12px !important; } .el-date-table th { - color: white !important; + color: white !important; } .el-select-dropdown__item.hover, .el-select-dropdown__item:hover { - color: #409eff !important; + color: #409eff !important; } .el-input__wrapper { - background: rgba(8, 75, 66, 1) !important; - border: 2px solid #437a74 !important; - box-shadow: none !important; + background: rgba(8, 75, 66, 1) !important; + border: 2px solid #437a74 !important; + box-shadow: none !important; } .el-select__wrapper { - background: rgba(8, 75, 66, 1) !important; - border: 2px solid #437a74 !important; - box-shadow: none !important; + background: rgba(8, 75, 66, 1) !important; + border: 2px solid #437a74 !important; + box-shadow: none !important; } </style> diff --git a/src/components/tools/LayerTree.vue b/src/components/tools/LayerTree.vue index fa787b1..e898e6d 100644 --- a/src/components/tools/LayerTree.vue +++ b/src/components/tools/LayerTree.vue @@ -13,13 +13,18 @@ </template> <script setup> -import { ref, onMounted, watch, nextTick,onUnmounted } from "vue"; +import { ref, onMounted, watch, nextTick, onUnmounted } from "vue"; import { createPoint, removeEntities, addTileset } from "@/utils/map"; import { deviceDictList, getDictName } from "@/constant/dict.js"; import { useRoute } from "vue-router"; import { loadAreaPolygon, clearAreaPolygon } from "@/utils/area"; import { checkedKeys } from "@/store/index"; -import { getDuanMainData, getDevicetListData, getDistrictListData } from "@/api/index.js"; +import { + getDuanMainData, + getDevicetListData, + getDistrictListData, +} from "@/api/index.js"; +import { init } from "echarts"; const route = useRoute(); @@ -57,42 +62,85 @@ /** * 鍒濆鍖栧湴鍥� */ -function initMap() { - // 鍒濆鍖栧湴褰㈡暟鎹� - let TerrainLayer = earthCtrl.factory.createTerrainLayer({ - sourceType: "ctb", - url: "http://106.120.22.26:9103/gisserver/ctsserver/sungugoudem", - }); - treeMap.set("鍦板舰鏁版嵁", TerrainLayer); - // 鍒濆鍖栨ā鍨嬫暟鎹� - // let modelPromise = addTileset( - // "http://106.120.22.26:9103/gisserver/c3dserver/sunhugou3d/tileset.json" - // ); - // modelPromise.then((model) => { - // treeMap.set("妯″瀷鏁版嵁", model); - // }); +// function initMap() { +// // 鍒濆鍖栧湴褰㈡暟鎹� +// let TerrainLayer = earthCtrl.factory.createTerrainLayer({ +// sourceType: "ctb", +// url: "http://106.120.22.26:9103/gisserver/ctsserver/sungugoudem", +// }); +// treeMap.set("鍦板舰鏁版嵁", TerrainLayer); +// console.log(TerrainLayer,'aaaa') +// // 鍒濆鍖栨ā鍨嬫暟鎹� +// // let modelPromise = addTileset( +// // "http://106.120.22.26:9103/gisserver/c3dserver/sunhugou3d/tileset.json" +// // ); +// // modelPromise.then((model) => { +// // treeMap.set("妯″瀷鏁版嵁", model); +// // }); - // 鍒濆鍖栧奖鍍忔暟鎹� - // let ImageryLayer = earthCtrl.factory.createImageryLayer({ - // sourceType: "tms", - // url: "http://106.120.22.26:9103/gisserver/tmsserver/sunhugoudom", - // }); - // treeMap.set("褰卞儚鏁版嵁", ImageryLayer); +// // 鍒濆鍖栧奖鍍忔暟鎹� +// // let ImageryLayer = earthCtrl.factory.createImageryLayer({ +// // sourceType: "tms", +// // url: "http://106.120.22.26:9103/gisserver/tmsserver/sunhugoudom", +// // }); +// // treeMap.set("褰卞儚鏁版嵁", ImageryLayer); +// } + + +// 鍦板舰鏁版嵁 +let TerrainLayer = null; +async function initMap() { + try { + // 鍒濆鍖栧湴褰㈡暟鎹紙浣跨敤await绛夊緟Promise瑙f瀽锛� + TerrainLayer = await earthCtrl.factory.createTerrainLayer({ + sourceType: "ctb", + url: "http://106.120.22.26:9103/gisserver/ctsserver/sungugoudem", + }); + + treeMap.set("鍦板舰鏁版嵁", TerrainLayer); + } catch (error) { + console.error("鍒濆鍖栧け璐�:", error); + } } /** * 澶勭悊澶嶉�夋鐘舵�佸彉鍖� */ +// 搴旂敤鍒濆鍖栨椂棰勫厛鍔犺浇 +// 褰卞儚鏁版嵁鍒濆 +let ImageryLayer = null; +async function initImageryLayer() { + ImageryLayer = await earthCtrl.factory.createImageryLayer({ + sourceType: "tms", + url: "http://106.120.22.26:9103/gisserver/tmsserver/sunhugoudom", + }); +} + function handleCheckChange(data, checked, indeterminate) { const label = data.label; + if (label === "鍦板舰鏁版嵁") { + if (checked) { + initMap(); + treeMap.set("鍦板舰鏁版嵁", TerrainLayer); + toggleLayerVisible("鍦板舰鏁版嵁", true); // 鏄剧ず褰卞儚鏁版嵁 + } else { + const layer = treeMap.get("鍦板舰鏁版嵁"); + if (layer) { + toggleLayerVisible("鍦板舰鏁版嵁", false); // 闅愯棌褰卞儚鏁版嵁 + TerrainLayer.removeFromMap(); // 浠� Map 涓Щ闄� + console.log("褰卞儚鏁版嵁宸茬Щ闄�"); + } + } + } if (label === "褰卞儚鏁版嵁") { if (checked) { - // 鍔犺浇褰卞儚鏁版嵁 - console.log("寮�濮嬪姞杞藉奖鍍忔暟鎹�..."); - let ImageryLayer = earthCtrl.factory.createImageryLayer({ - sourceType: "tms", - url: "http://106.120.22.26:9103/gisserver/tmsserver/sunhugoudom", - }); + initImageryLayer(); + // // 鍔犺浇褰卞儚鏁版嵁 + // console.log("寮�濮嬪姞杞藉奖鍍忔暟鎹�..."); + // ImageryLayer = earthCtrl.factory.createImageryLayer({ + // sourceType: "tms", + // url: "http://106.120.22.26:9103/gisserver/tmsserver/sunhugoudom", + // }); treeMap.set("褰卞儚鏁版嵁", ImageryLayer); toggleLayerVisible("褰卞儚鏁版嵁", true); // 鏄剧ず褰卞儚鏁版嵁 } else { @@ -114,13 +162,15 @@ "http://106.120.22.26:9103/gisserver/c3dserver/sunhugou3d/tileset.json" ); - modelPromise.then((model) => { - console.log("妯″瀷鏁版嵁鍔犺浇瀹屾垚"); - treeMap.set("妯″瀷鏁版嵁", model); // 灏嗘ā鍨嬫暟鎹瓨鍌ㄥ埌 treeMap - toggleLayerVisible("妯″瀷鏁版嵁", true); // 鏄剧ず妯″瀷鏁版嵁 - }).catch((error) => { - console.error("妯″瀷鏁版嵁鍔犺浇澶辫触:", error); - }); + modelPromise + .then((model) => { + console.log("妯″瀷鏁版嵁鍔犺浇瀹屾垚"); + treeMap.set("妯″瀷鏁版嵁", model); // 灏嗘ā鍨嬫暟鎹瓨鍌ㄥ埌 treeMap + toggleLayerVisible("妯″瀷鏁版嵁", true); // 鏄剧ず妯″瀷鏁版嵁 + }) + .catch((error) => { + console.error("妯″瀷鏁版嵁鍔犺浇澶辫触:", error); + }); } else { // 闅愯棌妯″瀷鏁版嵁 toggleLayerVisible("妯″瀷鏁版嵁", false); @@ -162,7 +212,7 @@ console.log(`Setting entity show to:`, checked); entity.show = checked; }); - } else if (entityList && typeof entityList.show !== 'undefined') { + } else if (entityList && typeof entityList.show !== "undefined") { console.log(`Setting layer show to:`, checked); entityList.show = checked; } else { @@ -178,7 +228,7 @@ */ const getDevicetList = async () => { await getDevicetListData().then((res) => { - console.log(res.data, 'devicetList.value2'); + console.log(res.data, "devicetList.value2"); devicetList.value = res.data; }); }; @@ -312,10 +362,7 @@ toggleLayerVisible("瀛欒儭娌熼殣鎮g偣", false); toggleLayerVisible("瀛欒儭娌熸柇闈�", false); } else if (path == "/mnfz") { - treeRef.value.setCheckedKeys( - defaultKeys.concat("瀛欒儭娌熸柇闈�"), - false - ); + treeRef.value.setCheckedKeys(defaultKeys.concat("瀛欒儭娌熸柇闈�"), false); toggleLayerVisible("瀛欒儭娌熸柇闈�", false); toggleLayerVisible("瀛欒儭娌熼殣鎮g偣", false); toggleLayerVisible("缁煎悎鐩戞祴璁惧淇℃伅", false); @@ -348,4 +395,4 @@ height: 200px; z-index: 99; } -</style> \ No newline at end of file +</style> diff --git a/src/views/mnfz.vue b/src/views/mnfz.vue index 7d8d533..93111d1 100644 --- a/src/views/mnfz.vue +++ b/src/views/mnfz.vue @@ -1,9 +1,23 @@ <template> <Left @start="startSimulate" @end="endSimulate" /> - <echartInfo :isDynamicMode="isDynamicMode" :isFinish="isFinish" v-if="rightRiverShow" /> - <TimeLine v-if="showWaterSimulate" @time-update="timeUpdate" @is-playing="isPlaying" - :waterSimulateParams="waterSimulateParams" @playbackFinished="playbackFinished" @end="endSimulate" /> - <DebuffDetail v-if="showDebuffDetail" @open="openDetail" @close="showDebuffDetail = false" /> + <echartInfo + :isDynamicMode="isDynamicMode" + :isFinish="isFinish" + v-if="rightRiverShow" + /> + <TimeLine + v-if="showWaterSimulate" + @time-update="timeUpdate" + @is-playing="isPlaying" + :waterSimulateParams="waterSimulateParams" + @playbackFinished="playbackFinished" + @end="endSimulate" + /> + <DebuffDetail + v-if="showDebuffDetail" + @open="openDetail" + @close="showDebuffDetail = false" + /> <DebuffTable v-if="showDebuffTable" @close="closeDebuffTable" /> </template> @@ -22,12 +36,10 @@ import danger from "@/assets/img/left/danger.png"; import { checkedKeys } from "@/store/index"; - import { useSimStore } from "@/store/simulation"; import { storeToRefs } from "pinia"; const simStore = useSimStore(); const { rightRiverShow } = storeToRefs(simStore); - const waterSimulateParams = ref({}); const showWaterSimulate = ref(false); @@ -37,9 +49,6 @@ const isFinish = ref(true); const treeMap = new Map(); - - - // 鎻愪緵鏂规硶缁欐墍鏈夊瓙缁勪欢 provide("simulateActions", { @@ -107,7 +116,7 @@ }); await Promise.all(loadPromises); setupRowClickListener(dataSources); - } catch (error) { } + } catch (error) {} } // 娓呴櫎闅愭偅鐐� function removeDataSources() { -- Gitblit v1.9.3