From fe774d1b86848f213e766fa40f96e753802a642d Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期五, 25 八月 2023 17:49:13 +0800
Subject: [PATCH] 资源查询前端页面修改
---
src/views/resourceQuery/resourceQuery.vue | 305 ++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 279 insertions(+), 26 deletions(-)
diff --git a/src/views/resourceQuery/resourceQuery.vue b/src/views/resourceQuery/resourceQuery.vue
index 45cb622..79ba022 100644
--- a/src/views/resourceQuery/resourceQuery.vue
+++ b/src/views/resourceQuery/resourceQuery.vue
@@ -1,7 +1,16 @@
<template>
<div class="resourceQuery">
<moon-map></moon-map>
- <div class="left_box">
+ <div
+ class="left_menu"
+ @click="leftDialog =true"
+ v-show="!leftDialog"
+ >
+ </div>
+ <div
+ class="left_box"
+ v-show="leftDialog"
+ >
<div class="top_box">
<div class="input_box">
<el-form
@@ -67,31 +76,62 @@
<div class="KJCX">
<div class="KJCX_title">绌洪棿鏌ヨ</div>
<div class="KJCX_btn_list">
- <div class="KJCX_btn">
+ <div
+ class="KJCX_btn"
+ @click="setDrawMenu(1)"
+ >
+ <span>鐐�</span>
+ <div class="btn_bg d"></div>
+ </div>
+ <div
+ class="KJCX_btn"
+ @click="setDrawMenu(2)"
+ >
<span>绾�</span>
<div class="btn_bg x"></div>
</div>
- <div class="KJCX_btn">
+ <div
+ class="KJCX_btn"
+ @click="setDrawMenu(3)"
+ >
<span>鐭╁舰</span>
<div class="btn_bg jx"></div>
</div>
- <div class="KJCX_btn">
+ <div
+ class="KJCX_btn"
+ @click="setDrawMenu(4)"
+ >
<span>澶氳竟褰�</span>
<div class="btn_bg db"></div>
</div>
</div>
</div>
</div>
+ <div
+ class="btn_close"
+ @click="leftDialog = false"
+ >
+
+ </div>
<div class="btn_box">
<div class="btn">
- <el-button type="primary" class="btnbox">妫�绱�</el-button>
+ <el-button
+ type="primary"
+ class="btnbox"
+ >妫�绱�</el-button>
</div>
<div>
- <el-button type="primary" class="btnbox delbtn">閲嶇疆</el-button>
+ <el-button
+ type="primary"
+ class="btnbox delbtn"
+ >閲嶇疆</el-button>
</div>
</div>
</div>
- <div class="pagination">
+ <div v-show="listDialog">
+
+ </div>
+ <!-- <div class="pagination">
<el-pagination
small
@size-change="handleSizeChange"
@@ -103,8 +143,8 @@
:total="400"
>
</el-pagination>
- </div>
- <div class="list_box">
+ </div> -->
+ <!-- <div class="list_box">
<div
class="list"
v-for="(e, i) in list"
@@ -125,49 +165,102 @@
<span class="attribute_title">鐢熶骇鏃堕棿锛�</span>
<span class="attribute_content">{{ e.data }}</span>
</div>
- <div class="attribute" style="margin: 0">
+ <div
+ class="attribute"
+ style="margin: 0"
+ >
<span class="attribute_title">鏁版嵁澶у皬锛�</span>
<span class="attribute_content">dsadas</span>
</div>
</div>
- <div class="all_btn" v-on:click.stop="details(e)">
+ <div
+ class="all_btn"
+ v-on:click.stop="details(e)"
+ >
<i class="el-icon-more"></i>
</div>
</div>
- </div>
- <div class="bottom_box">
- <span class="msg_box"
- >鏄剧ず绗瑊{ paginationData.pageNo }}鍒皗{
+ </div> -->
+ <!-- <div class="bottom_box">
+ <span class="msg_box">鏄剧ず绗瑊{ paginationData.pageNo }}鍒皗{
paginationData.pageSize
}}鏉★紝鍏眥{ list.length }}鏉¤褰曪紝宸查�夋嫨{{
listChecked.length
- }}鏉�</span
- >
+ }}鏉�</span>
<div class="bottom_btn">
- <el-button type="primary" class="btnbox">鍏ㄩ��</el-button>
- <el-button type="primary" class="btnbox delbtn">鍙栨秷</el-button>
+ <el-button
+ type="primary"
+ class="btnbox"
+ >鍏ㄩ��</el-button>
+ <el-button
+ type="primary"
+ class="btnbox delbtn"
+ >鍙栨秷</el-button>
</div>
- </div>
+ </div> -->
</div>
- <div class="details_box" v-show="detailsBox">
+ <div
+ class="details_box"
+ v-show="detailsBox"
+ >
<div class="details_t">
- <i class="el-icon-close" @click="detailsBox = false"></i>
+ <i
+ class="el-icon-close"
+ @click="detailsBox = false"
+ ></i>
</div>
<div class="details_table">
<div class="table_header">
<div class="table_td">灞炴��</div>
<div class="table_td">灞炴�у��</div>
</div>
- <div class="table_tr" v-for="(e, i) in tableList" :key="i">
+ <div
+ class="table_tr"
+ v-for="(e, i) in tableList"
+ :key="i"
+ >
<div class="table_td">{{ e.name }}</div>
<div class="table_td">{{ e.value }}</div>
</div>
</div>
</div>
+ <el-dialog
+ title="鎻愮ず"
+ :visible.sync="dialogVisible"
+ width="20%"
+ :before-close="handleClose"
+ >
+ <div class="dialogContent">
+ <el-form ref="form">
+ <el-form-item label="缂撳啿璺濈锛圡锛�">
+ <el-input-number
+ v-model="bufferNumber"
+ :step="10"
+ ></el-input-number>
+ </el-form-item>
+ </el-form>
+ </div>
+
+ <span
+ slot="footer"
+ class="dialog-footer"
+ >
+ <el-button
+ size="small"
+ @click="dialogVisible = false"
+ >鍙� 娑�</el-button>
+ <el-button
+ type="primary"
+ size="small"
+ @click="setCloseDialog"
+ >纭� 瀹�</el-button>
+ </span>
+ </el-dialog>
</div>
</template>
<script>
+import * as turf from "@turf/turf"
import moonMap from "../../components/MapView/moonMap.vue"; //鍦板浘
export default {
components: {
@@ -248,6 +341,11 @@
},
],
detailsBox: false,
+ listDialog: false,
+ leftDialog: true,
+ drawType: null,
+ dialogVisible: false,
+ bufferNumber: 100,
};
},
methods: {
@@ -276,8 +374,138 @@
}
}
},
+ setDrawMenu(res) {
+ this.bufferNumber = 100;
+ switch (res) {
+ case 1:
+ this.drawType = 'point';
+ this.dialogVisible = true;
+ break;
+ case 2:
+ this.drawType = 'polyline';
+ this.dialogVisible = true;
+ break;
+ case 3:
+ this.drawType = 'rectangle';
+ this.setDrawEntity();
+ break;
+ case 4:
+ this.drawType = 'polygon';
+ this.setDrawEntity();
+ break
+ }
+ },
+ handleClose() {
+ this.$confirm('纭鍏抽棴锛�')
+ .then(_ => {
+ this.dialogVisible = false;
+ })
+ .catch(_ => { });
+ },
+ setCloseDialog() {
+ this.dialogVisible = false;
+ this.setDrawEntity();
+ },
+ setDrawEntity() {
+ var config = {}
+ if (this.drawType != 'point') {
+ config = { showSize: false }
+ }
+ var that = this;
+ sgworld.Creator.createSimpleGraphic(this.drawType, config, (entity) => {
+ sgworld.Creator.SimpleGraphic.clear()
+ that.querySatialQuery(entity);
+ });
+ },
+ querySatialQuery(res) {
+ var res_val;
+ switch (this.drawType) {
+ case 'point':
+ res_val = res.position.getValue();
+ break;
+ case 'polyline':
+ res_val = res.polyline.positions.getValue();
+ break;
+ case 'rectangle':
+ res_val = res.rectangle.coordinates.getValue();
+ break;
+ case 'polygon':
+ res_val = res.polygon.hierarchy.getValue().positions;
+ break;
+ }
+ var val = this.getEntityGeometry(res_val, this.drawType)
+ debugger
+ },
+ getEntityGeometry(res, type) {
+ var res_val;
+ var std = [];
+ if (type == 'point') {
+ var geom = this.setCartesianToEightFour(res);
+ var point = turf.point([geom.lng, geom.lat]);
+ res_val = this.setTurfBuffer(point, this.bufferNumber, 'circle')
+ } else if (type == 'polyline') {
+ for (var i in res) {
+ var geom = this.setCartesianToEightFour(res[i]);
+ std.push([geom.lng, geom.lat])
+ }
+
+ var line = turf.lineString(std, { name: "polyline" })
+ res_val = this.setTurfBuffer(line, this.bufferNumber, 'buffer')
+ } else if (type == 'rectangle') {
+ var geom = new Cesium.Rectangle.subsample(
+ res,
+ Cesium.Ellipsoid.WGS84,
+ res.height
+ )
+ for (var i in geom) {
+ var rectangle = this.setCartesianToEightFour(geom[i]);
+ std.push([rectangle.lng, rectangle.lat])
+ }
+ std.push(std[0])
+ res_val = turf.polygon([std], { name: "polygon" })
+ } else if (type == 'polygon') {
+ for (var i in res) {
+ var polygon = this.setCartesianToEightFour(res[i]);
+ std.push([polygon.lng, polygon.lat])
+ }
+ std.push(std[0])
+ res_val = turf.polygon([std], { name: "polygon" })
+ }
+ return this.setJonToWKT(res_val)
+ },
+ setJonToWKT(res) {
+ let fixedVal = this.fixToPositon(res)
+ var jsonToWkt = this.$wkt.convert(fixedVal.geometry)
+ return jsonToWkt;
+ },
+ setTurfBuffer(geom, distance, type) {
+
+ return turf.buffer(geom, distance, { units: 'miles' });
+ },
+ fixToPositon(restVal, digits = 6) {
+ restVal.geometry.coordinates.forEach(coord => {
+ if (Array.isArray(coord)) {
+ coord.forEach(item => {
+ if (item.length >= 2) {
+ item[0] = Number(item[0].toFixed(digits))
+ item[1] = Number(item[1].toFixed(digits))
+ }
+ })
+ }
+ })
+ return restVal
+ },
+ setCartesianToEightFour(res) {
+ var std = {}
+ let ellipsoid = Viewer.scene.globe.ellipsoid
+ let cartographic = ellipsoid.cartesianToCartographic(res)
+ std.lat = Cesium.Math.toDegrees(cartographic.latitude)
+ std.lng = Cesium.Math.toDegrees(cartographic.longitude)
+ std.alt = cartographic.height
+ return std
+ }
},
- created() {},
+ created() { },
};
</script>
@@ -286,10 +514,19 @@
width: 100%;
height: 100%;
position: relative;
+ .left_menu {
+ top: 10px;
+ left: 10px;
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ background: url("../../assets/img/灞曞紑鑿滃崟.png") no-repeat;
+ background-size: 100% 100%;
+ }
.left_box {
width: 427px;
- height: 780px;
- left: 20px;
+ height: auto;
+ left: 10px;
top: 10px;
background: rgba(7, 8, 14, 0.8);
border: 1px solid #d6e4ff;
@@ -302,6 +539,15 @@
display: flex;
justify-content: space-between;
align-items: center;
+ .btn_close {
+ top: 20px;
+ right: 20px;
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ background: url("../../assets/img/鏀惰捣鑿滃崟.png") no-repeat;
+ background-size: 100% 100%;
+ }
.btn_box {
.btn {
margin-bottom: 37px;
@@ -348,6 +594,10 @@
height: 26px;
cursor: pointer;
margin-left: 7px;
+ }
+ .d {
+ background: url("../../assets/img/d.png") no-repeat center;
+ background-size: 100% 100%;
}
.x {
background: url("../../assets/img/x.png") no-repeat center;
@@ -532,4 +782,7 @@
}
}
}
+.dialogContent /deep/.el-icon-plus {
+ color: #606266 !important;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3