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/monifangzhen/ResultAssess.vue | 366 +++++++++++++++++++++++++++-------------------------
1 files changed, 191 insertions(+), 175 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>
--
Gitblit v1.9.3