From deaf4ddeccc554ce782213ebda24923158c23c5a Mon Sep 17 00:00:00 2001
From: WX <1377869194@qq.com>
Date: 星期五, 08 九月 2023 09:29:37 +0800
Subject: [PATCH] 标会查询页面
---
src/views/plotting/plottingInquire.vue | 403 ++++++++++++++++++++++++++++++++++++++++++++
src/views/plotting/plotting.vue | 74 +++++---
src/views/Index.vue | 14 -
src/store/index.ts | 11 +
4 files changed, 464 insertions(+), 38 deletions(-)
diff --git a/src/store/index.ts b/src/store/index.ts
index 6734c3c..934293f 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -35,8 +35,17 @@
olLon: "0.00",
olLat: "0.00",
olZoom: 0,
+ plottingInquireData: {
+ isshow: false,
+ entitiesData: {},
+ getData: {},
+ },
},
mutations: {
+ // SET_plotting(state, obj) {
+ // console.log(obj);
+ // state.plottingInquireData = obj;
+ // },
//鑾峰彇鐧诲綍Code
setLoginCode(state, num) {
state.loginCode = num;
@@ -49,7 +58,7 @@
},
SET_TOKEN(state, token) {
state.token = token;
- var obj = {
+ const obj = {
token: token,
uname: state.uname,
};
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 79a3ce4..694d895 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -1,6 +1,5 @@
<template>
<div class="body_box">
-
<export-map
v-if="layerExportshow"
@SETexportMap="SETexportMap"
@@ -13,21 +12,16 @@
v-if="layerSpatialshow"
@SETspatialClose="SETspatialClose"
></spatial-box>
- <coord-location
- v-if="layerLocationshow"
- @SETcoordClose="setCoordLocation"
- >
+ <coord-location v-if="layerLocationshow" @SETcoordClose="setCoordLocation">
</coord-location>
- <details-query v-if="store.state.details.showDetails">
-
- </details-query>
+ <details-query v-if="store.state.details.showDetails"> </details-query>
<div v-if="store.state.isShowMap">
<map-view></map-view>
</div>
<div v-if="!store.state.isShowMap">
<ol-map></ol-map>
</div>
-
+ <plotting-inquire></plotting-inquire>
</div>
</template>
@@ -60,6 +54,8 @@
import detailsQuery from "@/views/query/detailsQuery.vue";
//鍑哄浘鍒楄〃
import exportList from "./export/exportList.vue";
+//鏍囩粯鏌ヨ
+import plottingInquire from "./plotting/plottingInquire.vue";
import router from "@/router";
import { useStore } from "vuex"; // 寮曞叆useStore 鏂规硶
diff --git a/src/views/plotting/plotting.vue b/src/views/plotting/plotting.vue
index 4827279..c8fd464 100644
--- a/src/views/plotting/plotting.vue
+++ b/src/views/plotting/plotting.vue
@@ -1,14 +1,8 @@
<template>
- <div
- v-drag
- class="plottingBox"
- >
+ <div v-drag class="plottingBox">
<div class="plottingTitle">
<div class="tileLeft">
- <div
- class="titleImg"
- @click="setCloseplotting"
- >
+ <div class="titleImg" @click="setCloseplotting">
<ArrowLeft />
</div>
<div class="titleLable">鏍囩粯鏌ヨ</div>
@@ -18,18 +12,9 @@
<div class="plotting_content_btn">
<span class="plotting_content_title">鏍囩粯宸ュ叿</span>
<div class="plotting_btn">
- <div
- class="btn_box_d btn_box"
- @click="setMenuDraw('point')"
- ></div>
- <div
- class="btn_box_x btn_box"
- @click="setMenuDraw('polyline')"
- ></div>
- <div
- class="btn_box_m btn_box"
- @click="setMenuDraw('polygon')"
- ></div>
+ <div class="btn_box_d btn_box" @click="setMenuDraw('point')"></div>
+ <div class="btn_box_x btn_box" @click="setMenuDraw('polyline')"></div>
+ <div class="btn_box_m btn_box" @click="setMenuDraw('polygon')"></div>
</div>
</div>
<div class="plotting_list">
@@ -37,6 +22,7 @@
class="plotting_list_tr"
v-for="(item, i) in list"
:key="i"
+ @click.stop="resultShow(item)"
>
<div class="plotting_list_tr_name">
<img
@@ -46,14 +32,8 @@
/><span>{{ item.name }}</span>
</div>
<div class="plotting_list_tr_btn">
- <div
- class="tr_btn dw"
- @click="setLayerLocation(item)"
- ></div>
- <div
- class="tr_btn sc"
- @click="setLayerRemove(item)"
- ></div>
+ <div class="tr_btn dw" @click.stop="setLayerLocation(item)"></div>
+ <div class="tr_btn sc" @click.stop="setLayerRemove(item)"></div>
</div>
</div>
</div>
@@ -70,8 +50,11 @@
reactive,
defineProps,
defineEmits,
+ watch,
} from "vue";
+import { useStore } from "vuex"; // 寮曞叆useStore 鏂规硶
const emits = defineEmits(["setCloseplotting"]);
+const store = useStore(); // 璇ユ柟娉曠敤浜庤繑鍥瀞tore 瀹炰緥
let list = ref([]);
const drawFlag = ref(null);
const plotNum = ref({
@@ -98,6 +81,12 @@
if (entities[i].name == res.name) {
Viewer.entities.remove(entities[i]);
list.value.splice(i, 1);
+ let obj = {
+ isshow: false,
+ entitiesData: {},
+ getData: {},
+ };
+ store.state.plottingInquireData = obj;
break;
}
}
@@ -217,6 +206,34 @@
const setCloseplotting = () => {
emits("setCloseplotting", false);
};
+const resultShow = (res) => {
+ console.log(res);
+ let obj = {
+ isshow: true,
+ entitiesData: res,
+ getData: {},
+ };
+ // store.commit("SET_plotting", obj);
+ store.state.plottingInquireData = obj;
+};
+watch(
+ () => store.state.plottingInquireData,
+ (nVal, oVal) => {
+ if (nVal.isshow == false) {
+ //鍒楄〃鍒犻櫎鑱斿姩
+ if (nVal.entitiesData != {} && nVal.entitiesData.name) {
+ for (var i in list.value) {
+ if (list.value[i].name == nVal.entitiesData.name) {
+ console.log(list.value[i].name);
+ list.value.splice(i, 1);
+ break;
+ }
+ }
+ }
+ }
+ },
+ { deep: true }
+);
</script>
<style lang="less" scoped>
@@ -322,6 +339,7 @@
align-items: center;
justify-content: space-between;
padding: 0 25px;
+ cursor: pointer;
.plotting_list_tr_name {
display: flex;
align-items: center;
diff --git a/src/views/plotting/plottingInquire.vue b/src/views/plotting/plottingInquire.vue
new file mode 100644
index 0000000..ad1d9ad
--- /dev/null
+++ b/src/views/plotting/plottingInquire.vue
@@ -0,0 +1,403 @@
+<template>
+ <div class="plottingInquire" v-if="isShow">
+ <div class="InquireHeader">鏍囩粯鏌ヨ</div>
+ <div class="inquireContent">
+ <div class="inquireContent_title">鐢ㄦ埛鏂板缓瑕佺礌</div>
+ <div class="inquireContent_name">
+ <div class="plotting_list_tr_name">
+ <img
+ :src="require(`../../assets/img/${inquireData.icon}`)"
+ class="ico"
+ alt=""
+ /><span>{{ inquireData.name }}</span>
+ </div>
+ <div class="plotting_list_tr_btn">
+ <div class="tr_btn dw" @click="setLayerLocation()"></div>
+ <div class="tr_btn sc" @click="setLayerRemove()"></div>
+ </div>
+ </div>
+ <div class="tab_box">
+ <el-tabs
+ v-model="activeName"
+ class="demo-tabs"
+ @tab-click="handleClick"
+ >
+ <!-- <el-tab-pane label="鍥惧眰灞炴��" name="first">User</el-tab-pane> -->
+ <el-tab-pane label="鏌ヨ缁撴灉" name="second">
+ <div class="inquireContent_input">
+ <div class="inquireContent_input_left">
+ <div class="label">鑼冨洿妗�</div>
+ <el-input
+ v-model="ScopeBox.Scop"
+ size="small"
+ placeholder="鑼冨洿妗�"
+ >
+ <template #append>km</template>
+ </el-input>
+ </div>
+ <div class="inquireContent_input_right">
+ <div class="label">鑼冨洿妗嗗唴鏈�澶у儚绱犲��</div>
+ <el-select
+ v-model="ScopeBox.pixel"
+ class="m-2"
+ placeholder="鍍忕礌鍊�"
+ size="small"
+ >
+ <el-option
+ v-for="item in options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </div>
+ </div>
+ <div class="inquireContent_msg">
+ <div class="inquireContent_msg_k">
+ <span>鎻愬彇鐨勮竟鐣屾</span>
+ <span>{{ ScopeBox.pixel }}</span>
+ </div>
+ <div class="inquireContent_msg_k">
+ <span>浣跨敤</span>
+ <span
+ >{{ ScopeBox.Scop * 1000 }}.00,{{ ScopeBox.Scop * 1000 }}.00
+ m/px</span
+ >
+ </div>
+ </div>
+ <div class="inquireContent_table">
+ <div class="table">
+ <div class="table_head">
+ <div class="table_head_td">搴忓彿</div>
+ <div class="table_head_td">
+ <span> 鍥惧眰鍚� </span>
+ <span> 鍒嗘瀽缁撴灉 </span>
+ </div>
+ </div>
+ <div class="table_content">
+ <div class="table_tr">
+ <div class="table_td">1</div>
+ <div class="table_td">
+ <span> 骞冲潎鍦扮悆鑳借搴�120m [1]: </span>
+ <span> 112.993 </span>
+ </div>
+ </div>
+ <div class="table_tr">
+ <div class="table_td">2</div>
+ <div class="table_td">
+ <span> 骞冲潎鍦扮悆鑳借搴�120m [1]: </span>
+ <span> 112.993 </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </el-tab-pane>
+ </el-tabs>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script lang="ts" setup>
+import menuTool from "@/assets/js/Map/menuTool";
+import {
+ ref,
+ onMounted,
+ onBeforeUnmount,
+ reactive,
+ defineProps,
+ defineEmits,
+ watch,
+} from "vue";
+import { useStore } from "vuex"; // 寮曞叆useStore 鏂规硶
+const store = useStore(); // 璇ユ柟娉曠敤浜庤繑鍥瀞tore 瀹炰緥
+const emits = defineEmits(["setCloseplotting"]);
+let isShow = ref(false);
+let inquireData = ref({
+ name: "path #9",
+ icon: "d.png",
+});
+const activeName = ref("second");
+const ScopeBox = ref({
+ Scop: "",
+ pixel: "",
+});
+const options = [
+ {
+ value: "1脳1",
+ label: "1脳1",
+ },
+ {
+ value: "2脳2",
+ label: "2脳2",
+ },
+ {
+ value: "4脳4",
+ label: "4脳4",
+ },
+ {
+ value: "8脳8",
+ label: "8脳8",
+ },
+ {
+ value: "16脳16",
+ label: "16脳16",
+ },
+ {
+ value: "32脳32",
+ label: "32脳32",
+ },
+ {
+ value: "64脳64",
+ label: "64脳64",
+ },
+ {
+ value: "Option3",
+ label: "Option3",
+ },
+ {
+ value: "128脳128",
+ label: "128脳128",
+ },
+ {
+ value: "256脳256",
+ label: "256脳256",
+ },
+];
+const setLayerLocation = () => {
+ var entities = Viewer.entities._entities._array;
+ for (var i in entities) {
+ if (entities[i].name == inquireData.value.name) {
+ Viewer.zoomTo(entities[i]);
+ break;
+ }
+ }
+};
+const setLayerRemove = () => {
+ var entities = Viewer.entities._entities._array;
+ for (var i in entities) {
+ if (entities[i].name == inquireData.value.name) {
+ Viewer.entities.remove(entities[i]);
+ // inquireData.value = {};
+ let obj = {
+ isshow: false,
+ entitiesData: { name: inquireData.value.name },
+ getData: {},
+ };
+ // store.commit("SET_plotting", obj);
+ store.state.plottingInquireData = obj;
+ isShow.value = false;
+ break;
+ }
+ }
+};
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+ console.log(tab, event);
+};
+// const setCloseplotting = () => {
+// emits("setCloseplotting", false);
+// };
+watch(
+ () => store.state.plottingInquireData,
+ (nVal, oVal) => {
+ isShow.value = nVal.isshow;
+ inquireData.value = nVal.entitiesData;
+ },
+ { deep: true }
+);
+</script>
+
+<style lang="less" scoped>
+.plottingInquire {
+ position: absolute;
+ right: 26px;
+ top: 80px;
+ width: 320px;
+ background: rgba(7, 8, 14, 0.8);
+ z-index: 100;
+ .InquireHeader {
+ width: 100%;
+ height: 35px;
+ background: #0e151f;
+ box-shadow: 0px 0px 6px 0px #080c13,
+ 0px 14px 16px 0px rgba(38, 47, 71, 0.68);
+ font-size: 16px;
+ font-weight: 400;
+ color: #d6e4ff;
+ padding: 10px;
+ box-sizing: border-box;
+ }
+ .inquireContent {
+ .inquireContent_title {
+ font-size: 14px;
+ font-weight: 400;
+ color: #d6e4ff;
+ margin-bottom: 15px;
+ margin-top: 10px;
+ padding-left: 10px;
+ }
+ .inquireContent_name {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 10px;
+ padding-bottom: 16px;
+ .plotting_list_tr_name {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ .ico {
+ width: 18px;
+ height: 18px;
+ }
+ span {
+ font-size: 16px;
+ font-weight: 300;
+ color: #ffffff;
+ margin-left: 10px;
+ }
+ }
+ .plotting_list_tr_btn {
+ display: flex;
+ align-items: center;
+ .tr_btn {
+ width: 16px;
+ height: 15px;
+ cursor: pointer;
+ }
+ .dw {
+ background: url("../../assets/img/dw.png") no-repeat center;
+ background-size: 100% 100%;
+ margin-right: 18px;
+ }
+ .sc {
+ background: url("../../assets/img/sc.png") no-repeat center;
+ background-size: 100% 100%;
+ }
+ }
+ }
+ /deep/ .el-tabs__nav {
+ justify-content: center;
+ float: none;
+ }
+ /deep/ .el-tabs__item,
+ /deep/ .el-tabs__item.is-active {
+ color: #d6e4ff;
+ font-size: 16px;
+ }
+ .inquireContent_input {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-bottom: 14px;
+ border-bottom: 1px solid rgba(214, 228, 255, 0.4);
+ .inquireContent_input_left {
+ width: 45%;
+ }
+ .inquireContent_input_right {
+ width: 45%;
+ }
+ .label {
+ font-size: 14px;
+ font-weight: 400;
+ color: #d6e4ff;
+ padding-bottom: 10px;
+ }
+ }
+ .inquireContent_msg {
+ padding: 12px 18px;
+ .inquireContent_msg_k {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ span {
+ font-size: 12px;
+ font-weight: 400;
+ color: rgba(214, 228, 255, 0.8);
+ }
+ }
+ }
+ .inquireContent_table {
+ padding-right: 15px;
+ padding-left: 15px;
+ padding-bottom: 14px;
+ .table {
+ background: rgba(0, 0, 0, 0, 4);
+ border: 1px solid rgba(214, 228, 255, 0.4);
+ border-radius: 4px;
+ .table_head {
+ height: 27px;
+ background: #0e151f;
+ // box-shadow: 0px 0px 6px 0px #080c13,
+ // 0px 14px 16px 0px rgba(38, 47, 71, 0.68);
+ // border-radius: 4px 4px 0px 0px;
+ display: flex;
+ .table_head_td {
+ width: 50px;
+ font-size: 14px;
+ font-weight: 400;
+ color: #d6e4ff;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-right: 1px solid rgba(214, 228, 255, 0.4);
+ }
+ .table_head_td:nth-child(2) {
+ width: 237px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 10px;
+ border-right: 0;
+ }
+ }
+ .table_content {
+ height: 440px;
+ overflow: auto;
+ .table_tr {
+ height: 27px;
+ display: flex;
+ background: #000000;
+ .table_td {
+ width: 50px;
+ font-size: 14px;
+ font-weight: 400;
+ color: #d6e4ff;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-right: 1px solid rgba(214, 228, 255, 0.4);
+ white-space: nowrap;
+ }
+ .table_td:nth-child(2) {
+ width: 237px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 10px;
+ border-right: 0;
+ }
+ }
+ .table_tr:nth-child(2n) {
+ background: #0e151f;
+ }
+ }
+ .table_content::-webkit-scrollbar {
+ width: 8px;
+ }
+ .table_content::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ background: rgba(0, 0, 0, 0.2);
+ }
+ .table_content::-webkit-scrollbar-track {
+ border-radius: 0;
+ background: rgba(0, 0, 0, 0);
+ }
+ }
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3