From 77f9937b32f67f5b7d5476b0a1db19956702c0c8 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期二, 10 十月 2023 09:45:34 +0800
Subject: [PATCH] 代码更新
---
src/views/plotting/plottingInquire.vue | 130 +++++++++++++++++++++++++++++++++++++------
1 files changed, 111 insertions(+), 19 deletions(-)
diff --git a/src/views/plotting/plottingInquire.vue b/src/views/plotting/plottingInquire.vue
index a402468..4772ca7 100644
--- a/src/views/plotting/plottingInquire.vue
+++ b/src/views/plotting/plottingInquire.vue
@@ -1,8 +1,28 @@
<template>
- <div class="plottingInquire" v-if="isShow">
- <div class="InquireHeader">鏍囩粯鏌ヨ</div>
+ <div
+ class="plottingInquire"
+ v-if="isShow"
+ v-drag="true"
+ >
+ <div class="InquireHeader">
+ <div>鏍囩粯鏌ヨ</div>
+
+ <div>
+ <el-icon
+ @click="isShow = false"
+ :size="20"
+ style="cursor: pointer"
+ >
+ <Close />
+ </el-icon>
+
+ </div>
+ </div>
<div class="inquireContent">
- <div class="inquireContent_title">鐢ㄦ埛鏂板缓瑕佺礌</div>
+ <div class="inquireContent_title">
+ <div>鐢ㄦ埛鏂板缓瑕佺礌</div>
+
+ </div>
<div class="inquireContent_name">
<div class="plotting_list_tr_name">
<img
@@ -11,9 +31,19 @@
alt=""
/><span>{{ inquireData.name }}</span>
</div>
+ <div
+ class="plotting_list_tr_wkt"
+ v-show="geoWktFlag"
+ >{{ geoWkt }}</div>
<div class="plotting_list_tr_btn">
- <div class="tr_btn dw" @click="setLayerLocation()"></div>
- <div class="tr_btn sc" @click="setLayerRemove()"></div>
+ <div
+ class="tr_btn dw"
+ @click="setLayerLocation()"
+ ></div>
+ <div
+ class="tr_btn sc"
+ @click="setLayerRemove()"
+ ></div>
</div>
</div>
<div class="tab_box">
@@ -23,8 +53,14 @@
@tab-click="handleClick"
>
<!-- <el-tab-pane label="鍥惧眰灞炴��" name="first">User</el-tab-pane> -->
- <el-tab-pane label="鏌ヨ缁撴灉" name="second">
- <div class="inquireContent_input" v-show="pixelIsShow">
+ <el-tab-pane
+ label="鏌ヨ缁撴灉"
+ name="second"
+ >
+ <div
+ class="inquireContent_input"
+ v-show="pixelIsShow"
+ >
<!-- <div class="inquireContent_input_left">
<div class="label">鑼冨洿妗�</div>
<el-input
@@ -35,7 +71,10 @@
<template #append>km</template>
</el-input>
</div> -->
- <div class="inquireContent_input_right" v-show="!chartIsshow">
+ <div
+ class="inquireContent_input_right"
+ v-show="!chartIsshow"
+ >
<div class="label">鑼冨洿妗嗗唴鏈�澶у儚绱犲��</div>
<el-select
v-model="ScopeBox.pixel"
@@ -52,7 +91,10 @@
/>
</el-select>
</div>
- <div class="inquireContent_input_right" v-show="chartIsshow">
+ <div
+ class="inquireContent_input_right"
+ v-show="chartIsshow"
+ >
<div class="label">鑺傜偣鏁�</div>
<el-select
v-model="ScopeBox.nodes"
@@ -70,7 +112,10 @@
</el-select>
</div>
</div>
- <div class="chart" v-if="chartIsshow">
+ <div
+ class="chart"
+ v-if="chartIsshow"
+ >
<div class="chart_box">
<div class="chart_btn">
<el-button
@@ -143,7 +188,10 @@
>
</div>
</div> -->
- <div class="inquireContent_table" v-if="!chartIsshow">
+ <div
+ class="inquireContent_table"
+ v-if="!chartIsshow"
+ >
<div class="table">
<div class="table_head">
<div class="table_head_td">搴忓彿</div>
@@ -153,7 +201,11 @@
</div>
</div>
<div class="table_content">
- <div class="table_tr" v-for="(e, i) in resultList" :key="i">
+ <div
+ class="table_tr"
+ v-for="(e, i) in resultList"
+ :key="i"
+ >
<div class="table_td">{{ i + 1 }}</div>
<div class="table_td">
<span> {{ e.layerName }}</span>
@@ -163,19 +215,29 @@
</div>
</div>
</div>
- <div class="download" v-if="!chartIsshow">
- <el-button link @click="download">涓嬭浇鍒嗘瀽缁撴灉</el-button>
+ <div
+ class="download"
+ v-if="!chartIsshow"
+ >
+ <el-button
+ link
+ @click="download"
+ >涓嬭浇鍒嗘瀽缁撴灉</el-button>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
- <div class="dialog" v-if="dialogShow" @click.self="dialogShow = false">
+ <div
+ class="dialog"
+ v-if="dialogShow"
+ @click.self="dialogShow = false"
+ >
<div class="chart">
- <i @click.capture="closeDialog"
- ><el-icon><Close /></el-icon
- ></i>
+ <i @click.capture="closeDialog"><el-icon>
+ <Close />
+ </el-icon></i>
<BarGraphAxisLine
:width="'856px'"
:height="'636px'"
@@ -206,7 +268,9 @@
} from "@/utils/downloadCSV.js";
import { selectByPoint, selectByPolygon, selectByPolyline } from "@/api/api";
import { ElMessage } from "element-plus";
-import { Search, Delete, Download } from "@element-plus/icons-vue";
+import { Search, Delete, Download, Close } from "@element-plus/icons-vue";
+import WKT from "terraformer-wkt-parser";
+import * as turf from "@turf/turf";
const store = useStore(); // 璇ユ柟娉曠敤浜庤繑鍥瀞tore 瀹炰緥
const emits = defineEmits(["setCloseplotting"]);
let isShow = ref(false);
@@ -312,6 +376,8 @@
let layerArr = ref([]);
let dialogShow = ref(false);
let layerNameNum = 0;
+let geoWkt = ref(null);
+let geoWktFlag = ref(false);
//鏂板鍥捐〃
const addCharts = () => {
layerArr.value.push({ layerName: `null${layerNameNum}`, points: [] });
@@ -513,6 +579,23 @@
(nVal, oVal) => {
isShow.value = nVal.isshow;
inquireData.value = nVal.entitiesData;
+ geoWktFlag.value = false;
+ if (inquireData.value.wkt) {
+ var wkt = WKT.parse(inquireData.value.wkt);
+
+ if (wkt.type == "Point") {
+ geoWkt.value = wkt.coordinates[0] + " " + wkt.coordinates[1];
+ geoWktFlag.value = true;
+ }
+ if (wkt.type == "Polygon") {
+ var Polygon = turf.multiPolygon([wkt.coordinates]);
+ var center = turf.center(Polygon);
+ geoWkt.value =
+ center.geometry.coordinates[0] + " " + center.geometry.coordinates[1];
+ geoWktFlag.value = true;
+ }
+ }
+
if (nVal.entitiesData.icon == "x.png") {
pixelIsShow.value = true;
selectPolyline({
@@ -560,6 +643,8 @@
color: #d6e4ff;
padding: 10px;
box-sizing: border-box;
+ display: flex;
+ justify-content: space-between;
}
.inquireContent {
.inquireContent_title {
@@ -591,6 +676,13 @@
margin-left: 10px;
}
}
+ .plotting_list_tr_wkt {
+ font-size: 12px;
+ font-weight: 300;
+ color: #ffffff;
+ margin-left: 10px;
+ flex: 1;
+ }
.plotting_list_tr_btn {
display: flex;
align-items: center;
--
Gitblit v1.9.3