From 9f51306b10520a2be30bedfe1b34c288cf770f43 Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期四, 19 十月 2023 17:51:30 +0800
Subject: [PATCH] 坡度坡向功能新增，临时图层添加定位。空间查询功能优化；
---
src/assets/js/Map/index.js | 43 +++-
src/views/plotting/plottingInquire.vue | 231 ++++++++++---------------
src/components/mouseMove.vue | 58 +++---
src/views/Map/mapView.vue | 1
src/views/query/slopeQuery.vue | 72 ++++++++
src/assets/js/Map/menuTool.js | 13 +
src/views/menus.vue | 2
src/assets/js/Map/temporaryTools.js | 22 +
src/views/layer/layerManage.vue | 45 +++-
src/views/Index.vue | 25 --
src/store/index.ts | 3
11 files changed, 302 insertions(+), 213 deletions(-)
diff --git a/src/assets/js/Map/index.js b/src/assets/js/Map/index.js
index 7fb0fd1..c8a7867 100644
--- a/src/assets/js/Map/index.js
+++ b/src/assets/js/Map/index.js
@@ -31,11 +31,11 @@
timeline: true,
});
-
+
this.earthCtrl.Viewer.scene.debugShowFramesPerSecond = true
this.earthCtrl.coreMap.scene.screenSpaceCameraController.enableCollisionDetection = true;
this.earthCtrl.Viewer.scene.globe.terrainExaggeration = 1.00001
-
+
window.earthCtrl = this.earthCtrl;
@@ -65,26 +65,51 @@
sgworld.Navigate.Stop(); //鍙栨秷椋炶鐘舵��
sgworld.Navigate.setPosition(-1093596.38, 5729026.12, 4136590.41);
this.addMouseLeftClickEvents();
+ this.addMouseLeftDownEvents();
},
-
- //榧犳爣宸﹂敭鐐瑰嚮浜嬩欢娣诲姞
- addMouseLeftClickEvents() {
+ addMouseLeftDownEvents() {
if (window.handleLeftClick) {
window.handleLeftClick.removeInputAction(
Cesium.ScreenSpaceEventType.LEFT_CLICK
); //绉婚櫎浜嬩欢
window.handleLeftClick = null;
}
+ const pickGlobeSlope = new SmartEarth.Cesium.PickGlobeSlope(earthCtrl.Viewer)
window.handleLeftClick = new Cesium.ScreenSpaceEventHandler(
window.Viewer.scene.canvas
);
var that = this;
window.handleLeftClick.setInputAction(function (event) {
+ const angle = pickGlobeSlope.pickSlope(event.position)
+ if (store.state.slopeQueyFlag) {
+ if (!store.state.showSlopeQuey) {
+ store.state.showSlopeQuey = true;
+ }
+ store.state.slopeQueyValue = angle.toFixed(6);
+
+ }
+
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+ },
+
+ //榧犳爣宸﹂敭鐐瑰嚮浜嬩欢娣诲姞
+ addMouseLeftClickEvents() {
+ if (window.handleLeftDown) {
+ window.handleLeftDown.removeInputAction(
+ Cesium.ScreenSpaceEventType.LEFT_DOWN
+ ); //绉婚櫎浜嬩欢
+ window.handleLeftDown = null;
+ }
+ window.handleLeftDown = new Cesium.ScreenSpaceEventHandler(
+ window.Viewer.scene.canvas
+ );
+ var that = this;
+ window.handleLeftDown.setInputAction(function (event) {
let cartesian = window.Viewer.scene.pick(event.position);
if (Cesium.defined(cartesian)) {
if (cartesian.id.shpType && cartesian.id.shpType == 'temporaryLayer') {
-
+
that.setEditTemporaryLayer(cartesian.id._id)
}
@@ -94,9 +119,9 @@
setEditTemporaryLayer(res) {
// store.state.editTemporaryId = res;
// console.log(store.state.editTemporaryId)
-
- if (store.state.editTemporaryId && store.state.editTemporaryId == res) {
-
+
+ if (store.state.editTemporaryId && store.state.editTemporaryId == res) {
+
store.state.setEditTemporaryShow = true;
}
},
diff --git a/src/assets/js/Map/menuTool.js b/src/assets/js/Map/menuTool.js
index 77671cd..65c3031 100644
--- a/src/assets/js/Map/menuTool.js
+++ b/src/assets/js/Map/menuTool.js
@@ -136,8 +136,11 @@
window.material = null;
globe.material = null;
Viewer.scene.globe.enableLighting = false;
+ store.state.slopeQueyFlag = false;
+ store.state.showSlopeQuey = false;
return;
}
+ store.state.slopeQueyFlag = true;
window.material = new Cesium.Material({
fabric: {
type: "ElevationRamp",
@@ -159,6 +162,9 @@
if (window.material) {
window.material = null;
globe.material = null;
+ store.state.slopeQueyFla = false
+ store.state.slopeQueyFlag = false;
+ store.state.showSlopeQuey = false;
return;
}
@@ -625,7 +631,8 @@
window.material = null;
globe.material = null;
Viewer.scene.globe.enableLighting = false;
- return;
+ store.state.slopeQueyFlag = false;
+ store.state.showSlopeQuey = false;
}
if (window.DoubleScreen) {
window.DoubleScreen && window.DoubleScreen.destroy();
@@ -695,7 +702,7 @@
offset: {
heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-90),
- range: 0
+ range: 40
}
}
);
@@ -753,7 +760,7 @@
},
})
- window.Viewer.flyTo(locationPolygonEntity, {
+ window.Viewer.flyTo(polyline, {
offset: {
heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-90),
diff --git a/src/assets/js/Map/temporaryTools.js b/src/assets/js/Map/temporaryTools.js
index f8be7c8..fdafaf3 100644
--- a/src/assets/js/Map/temporaryTools.js
+++ b/src/assets/js/Map/temporaryTools.js
@@ -10,6 +10,20 @@
}
}
},
+ locationTemporaryLayer(res){
+ var entities = window.Viewer.entities._entities._array;
+ for (var i in entities) {
+ if (entities[i].id == res.id && entities[i]._shpType == res.shpType) {
+ window.Viewer.flyTo(entities[i], {
+ offset: {
+ heading: Cesium.Math.toRadians(0.0),
+ pitch: Cesium.Math.toRadians(-90),
+ range: 400
+ }
+ });
+ }
+ }
+ },
addTemporaryTool(res) {
switch (res.type) {
case "point":
@@ -142,7 +156,7 @@
if (res.outline) {
outlinewidth = res.width
}
-
+
window.Viewer.entities.add({
name: res.cnName,
id: res.id,
@@ -156,7 +170,7 @@
res.near,
res.far
),
-
+
material: new Cesium.PolylineOutlineMaterialProperty({
color: Cesium.Color.fromCssColorString(res.material).withAlpha(
res.materialAlpha
@@ -339,7 +353,7 @@
layerType: '绾�',
geometry: geom,
heightReference: res.polyline.clampToGround._value,
- outline: res.outline != null ? res.outline : false,
+ outline: res.outline != null ? res.outline : false,
width: res.polyline.width._value,
material: this.colorRgbToHex('rgb(' + (mataColor.red * 255) + ',' + (mataColor.green * 255) + ',' + (mataColor.blue * 255) + ')'),
outlineColor: this.colorRgbToHex('rgb(' + (outlineColor.red * 255) + ',' + (outlineColor.green * 255) + ',' + (outlineColor.blue * 255) + ')'),
@@ -361,7 +375,6 @@
if (res.label.outlineWidth && res.label.outlineWidth._value) {
width = res.label.outlineWidth._value
}
-
return {
id: this.isedit ? res.id : (new Date()).getTime(),
cnName: res.name,
@@ -386,7 +399,6 @@
layerType: '鏂囨湰鐐�',
}
},
-
getPointEntityObj(res) {
var mataColor = res.point.color._value;
var outlineColor = res.point.outlineColor._value;
diff --git a/src/components/mouseMove.vue b/src/components/mouseMove.vue
index 63e1296..771bf4d 100644
--- a/src/components/mouseMove.vue
+++ b/src/components/mouseMove.vue
@@ -1,13 +1,6 @@
<template>
- <div
- class="mouseBox"
- @setMouseMove="setMouseMove"
- >
- <div
- class="earthImage"
- :class="{ active: gridIsshow }"
- @click="gridSwitch"
- ></div>
+ <div class="mouseBox" @setMouseMove="setMouseMove">
+ <div class="earthImage" :class="{ active: gridIsshow }" @click="gridSwitch"></div>
<div class="earthLable">缁忓害 :</div>
<div class="earthLable">{{ longitude }}</div>
<div class="earthLable">绾害 :</div>
@@ -56,13 +49,15 @@
let handlerPoint = new SmartEarth.Cesium.ScreenSpaceEventHandler(
window.Viewer.scene.canvas
);
+ const pickGlobeSlope = new SmartEarth.Cesium.PickGlobeSlope(earthCtrl.Viewer)
var ellipsoid = window.Viewer.scene.globe.ellipsoid;
- handlerPoint.setInputAction(function (movement) {
+ handlerPoint.setInputAction((movement) => {
//鎹曡幏妞悆浣擄紝灏嗙瑳鍗″皵浜岀淮骞抽潰鍧愭爣杞负妞悆浣撶殑绗涘崱灏斾笁缁村潗鏍囷紝杩斿洖鐞冧綋琛ㄩ潰鐨勭偣
var cartesian = window.Viewer.camera.pickEllipsoid(
movement.endPosition,
ellipsoid
);
+
if (cartesian) {
//灏嗙瑳鍗″皵涓夌淮鍧愭爣杞负鍦板浘鍧愭爣锛堝姬搴︼級
var cartographic =
@@ -119,27 +114,27 @@
});
- Viewer.scene.postRender.addEventListener(() => {
- // // 鑾峰彇鐢诲竷鐨勫ぇ灏�
- let scene = earthCtrl.Viewer.scene;
- var width = scene.canvas.clientWidth;
- var height = scene.canvas.clientHeight;
- //鑾峰彇鐢诲竷涓績涓や釜鍍忕礌鐨勫潗鏍囷紙榛樿鍦板浘娓叉煋鍦ㄧ敾甯冧腑蹇冧綅缃級
- var left = scene.camera.getPickRay(new SmartEarth.Cesium.Cartesian2((width / 2) | 0, (height - 1) / 2));
- var right = scene.camera.getPickRay(new SmartEarth.Cesium.Cartesian2(1 + (width / 2) | 0, (height - 1) / 2));
+ Viewer.scene.postRender.addEventListener(() => {
+ // // 鑾峰彇鐢诲竷鐨勫ぇ灏�
+ let scene = earthCtrl.Viewer.scene;
+ var width = scene.canvas.clientWidth;
+ var height = scene.canvas.clientHeight;
+ //鑾峰彇鐢诲竷涓績涓や釜鍍忕礌鐨勫潗鏍囷紙榛樿鍦板浘娓叉煋鍦ㄧ敾甯冧腑蹇冧綅缃級
+ var left = scene.camera.getPickRay(new SmartEarth.Cesium.Cartesian2((width / 2) | 0, (height - 1) / 2));
+ var right = scene.camera.getPickRay(new SmartEarth.Cesium.Cartesian2(1 + (width / 2) | 0, (height - 1) / 2));
- var leftPosition = scene.globe.pick(left, scene);
- var rightPosition = scene.globe.pick(right, scene);
- if (!SmartEarth.Cesium.defined(leftPosition) || !SmartEarth.Cesium.defined(rightPosition)) {
- return;
- }
- const ellipsoid = SmartEarth.Cesium.Ellipsoid.MOON2000
- var leftCartographic = ellipsoid.cartesianToCartographic(leftPosition);
- var rightCartographic = ellipsoid.cartesianToCartographic(rightPosition);
- var geodesic = new SmartEarth.Cesium.EllipsoidGeodesic(leftCartographic, rightCartographic, ellipsoid);
- var distance = geodesic.surfaceDistance;// 鍒嗚鲸鐜�
- rate.value =distance.toFixed(2); //鍒嗚鲸鐜�
- })
+ var leftPosition = scene.globe.pick(left, scene);
+ var rightPosition = scene.globe.pick(right, scene);
+ if (!SmartEarth.Cesium.defined(leftPosition) || !SmartEarth.Cesium.defined(rightPosition)) {
+ return;
+ }
+ const ellipsoid = SmartEarth.Cesium.Ellipsoid.MOON2000
+ var leftCartographic = ellipsoid.cartesianToCartographic(leftPosition);
+ var rightCartographic = ellipsoid.cartesianToCartographic(rightPosition);
+ var geodesic = new SmartEarth.Cesium.EllipsoidGeodesic(leftCartographic, rightCartographic, ellipsoid);
+ var distance = geodesic.surfaceDistance;// 鍒嗚鲸鐜�
+ rate.value = distance.toFixed(2); //鍒嗚鲸鐜�
+ })
};
const gridSwitch = () => {
server.showlonlatLine();
@@ -303,6 +298,7 @@
padding-right: 20px;
display: flex;
align-items: center;
+
.earthImage {
width: 20px;
height: 20px;
@@ -311,6 +307,7 @@
margin-left: 10px;
cursor: pointer;
}
+
.earthLable {
font-size: 16px;
font-family: Source Han Sans CN;
@@ -319,6 +316,7 @@
line-height: 5px;
margin-left: 10px;
}
+
.active {
background-color: #171e2e;
border: 1px solid;
diff --git a/src/store/index.ts b/src/store/index.ts
index 532ea9b..d4f25e6 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -47,6 +47,9 @@
editTemporarName: null,
editTemporaryback: null,
layerGroups:null,
+ slopeQueyFlag:false,
+ slopeQueyValue:null,
+ showSlopeQuey:false,
},
mutations: {
// SET_plotting(state, obj) {
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 7f2ab5c..64e8258 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -1,25 +1,12 @@
<template>
- <div
- class="body_box"
- v-loading="store.state.loading"
- element-loading-background="rgba(0, 0, 0, 0.8)"
- >
- <export-map
- v-if="layerExportshow"
- @SETexportMap="SETexportMap"
- ></export-map>
+ <div class="body_box" v-loading="store.state.loading" element-loading-background="rgba(0, 0, 0, 0.8)">
+ <export-map v-if="layerExportshow" @SETexportMap="SETexportMap"></export-map>
<export-list v-if="store.state.setExportList"></export-list>
<menus></menus>
<bottom-btn v-if="store.state.isShowMap"></bottom-btn>
<mouse-move v-if="store.state.isShowMap"></mouse-move>
- <spatial-box
- v-if="layerSpatialshow"
- @SETspatialClose="SETspatialClose"
- ></spatial-box>
- <coord-location
- v-if="layerLocationshow"
- @SETcoordClose="setCoordLocation"
- >
+ <spatial-box v-if="layerSpatialshow" @SETspatialClose="SETspatialClose"></spatial-box>
+ <coord-location v-if="layerLocationshow" @SETcoordClose="setCoordLocation">
</coord-location>
<details-query v-if="store.state.details.showDetails"> </details-query>
<div v-if="store.state.isShowMap">
@@ -30,6 +17,7 @@
</div>
<plotting-inquire></plotting-inquire>
<attribute-info v-if="store.state.setEditTemporaryShow"></attribute-info>
+ <slopeQuery v-if="store.state.showSlopeQuey"></slopeQuery>
</div>
</template>
@@ -66,7 +54,8 @@
import plottingInquire from "./plotting/plottingInquire.vue";
//灞炴�х紪杈�
import attributeInfo from "./plotting/attributeInfo.vue";
-
+// 鍧″害鍊�
+import slopeQuery from "./query/slopeQuery.vue";
import router from "@/router";
import { useStore } from "vuex"; // 寮曞叆useStore 鏂规硶
diff --git a/src/views/Map/mapView.vue b/src/views/Map/mapView.vue
index 122a5ce..700643b 100644
--- a/src/views/Map/mapView.vue
+++ b/src/views/Map/mapView.vue
@@ -1,6 +1,7 @@
<template>
<div class="MapViewBox">
<div id="cesiumContainer">
+
</div>
</div>
</template>
diff --git a/src/views/layer/layerManage.vue b/src/views/layer/layerManage.vue
index c405184..9383194 100644
--- a/src/views/layer/layerManage.vue
+++ b/src/views/layer/layerManage.vue
@@ -44,6 +44,8 @@
@click.native="clickdTemporary(1, data)">缂栬緫</el-dropdown-item>
<el-dropdown-item v-if="data.shpType == 'temporaryLayer'"
@click.native="clickdTemporary(2, data)">鍒犻櫎</el-dropdown-item>
+ <el-dropdown-item v-if="data.shpType == 'temporaryLayer'"
+ @click.native="clickdTemporary(3, data)">瀹氫綅</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
@@ -117,6 +119,10 @@
const temporary = ref(new Date().getTime());
const clickdTemporary = async (res, data) => {
if (res == 1) {
+ let son = estreeRef.value.getCheckedKeys()
+ if(son.indexOf(data.id)<0){
+ return ElMessage(data.cnName+"鍥惧眰娌℃湁鍕鹃��,鏃犳硶杩涜缂栬緫");
+ }
if (store.state.editTemporaryId) {
var id = store.state.editTemporaryId;
var edit_id = sgworld.Creator.SimpleGraphic.SimpleGraphicObj.indexOf(id);
@@ -130,7 +136,7 @@
sgworld.Creator.SimpleGraphic.edit(true, {
editProp: false, tipText: {
ActiveText: '鐐瑰嚮婵�娲荤紪杈�'
- }
+ }, enableDelete: false
});
} else if (res == 2) {
var layerId = []
@@ -167,6 +173,12 @@
}
estreeRef.value.setCheckedKeys(layerIds, true);
})
+ } else if(res == 3){
+ let son = estreeRef.value.getCheckedKeys()
+ if(son.indexOf(data.id)<0){
+ return ElMessage(data.cnName+"鍥惧眰娌℃湁鍕鹃��,鏃犳硶杩涜瀹氫綅");
+ }
+ temporaryTool.locationTemporaryLayer(data);
}
};
//閫夋嫨鍥惧眰
@@ -174,6 +186,10 @@
layerAttributeIsshow.value = false;
layerDetailIsshow.value = false;
let isCheck = checked.checkedKeys.indexOf(data.id) > -1;
+ nextTick(() => {
+ let son = estreeRef.value.getCheckedNodes();
+ store.commit("SET_CHECKLAYER", son);
+ });
if (isCheck) {
if (data.isLayer == 0) {
let son = estreeRef.value.getCheckedNodes().reverse();
@@ -202,9 +218,7 @@
}
}
}
-
} else {
-
if (data.isLayer == 0) {
var layers = data.children;
for (var i in layers) {
@@ -224,6 +238,7 @@
}
}
+
};
const setVisiable = (treeNode, checked) => {
if (checked !== undefined) {
@@ -288,17 +303,27 @@
const getCheckedLayerPID = (res, result) => {
var temp = [];
var ids = result
+
let forFn = (data) => {
- data.children.forEach(item => {
- if (item.children) {
- temp.push(item.id)
- } else {
- if (ids.indexOf(item.id) > -1) {
- temp.push(item.id)
+ if (data.children) {
+ data.children.forEach(item => {
+ if (item.children) {
+ forFn(item)
+ } else {
+ if (ids.indexOf(item.id) > -1) {
+ temp.push(item.id)
+ }
}
+ })
+ } else {
+
+ if (ids.indexOf(data.id) > -1) {
+ temp.push(data.id)
}
- })
+ }
+
}
+
forFn(res);
return temp;
};
diff --git a/src/views/menus.vue b/src/views/menus.vue
index 063254d..811fae6 100644
--- a/src/views/menus.vue
+++ b/src/views/menus.vue
@@ -80,6 +80,7 @@
>
<thematic-map v-show="!thematicMapBtnState"></thematic-map>
<top-btn v-show="fullScreen" v-if="thematicMapBtnState"></top-btn>
+
<div>
<div class="setUserLogo" @click="setLogMeu = !setLogMeu">
<div class="setUserImage"></div>
@@ -123,6 +124,7 @@
import store from "@/store";
//Router
import router from "@/router";
+
const menuOptions = ref([]);
const checkMenuFlag = ref("");
let fullScreen = ref(true);
diff --git a/src/views/plotting/plottingInquire.vue b/src/views/plotting/plottingInquire.vue
index 3c8089d..293d7d0 100644
--- a/src/views/plotting/plottingInquire.vue
+++ b/src/views/plotting/plottingInquire.vue
@@ -1,18 +1,10 @@
<template>
- <div
- class="plottingInquire"
- v-if="isShow"
- v-drag="true"
- >
+ <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"
- >
+ <el-icon @click="isShow = false" :size="20" style="cursor: pointer">
<Close />
</el-icon>
@@ -25,42 +17,20 @@
</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>
+ <img :src="require(`../../assets/img/${inquireData.icon}`)" class="ico" alt="" /><span>{{ inquireData.name
+ }}</span>
</div>
- <div
- class="plotting_list_tr_wkt"
- v-show="geoWktFlag"
- >{{ geoWkt }}</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">
- <el-tabs
- v-model="activeName"
- class="demo-tabs"
- @tab-click="handleClick"
- >
+ <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"
- 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
@@ -71,66 +41,25 @@
<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"
- class="m-2"
- placeholder="鍍忕礌鍊�"
- size="small"
- @change="pixelChange"
- >
- <el-option
- v-for="item in pixeloptions"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
+ <el-select v-model="ScopeBox.pixel" class="m-2" placeholder="鍍忕礌鍊�" size="small" @change="pixelChange">
+ <el-option v-for="item in pixeloptions" :key="item.value" :label="item.label" :value="item.value" />
</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"
- class="m-2"
- placeholder="鍍忕礌鍊�"
- size="small"
- @change="nodesChange"
- >
- <el-option
- v-for="item in nodesoptions"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
+ <el-select v-model="ScopeBox.nodes" class="m-2" placeholder="鍍忕礌鍊�" size="small" @change="nodesChange">
+ <el-option v-for="item in nodesoptions" :key="item.value" :label="item.label" :value="item.value" />
</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
- :icon="Search"
- link
- class="linkBtn"
- @click="openDialog(e)"
- ></el-button>
+ <el-button :icon="Search" link class="linkBtn" @click="openDialog(e)"></el-button>
- <el-button
- :icon="Download"
- link
- class="linkBtn"
- @click="downloadChart(layerData)"
- ></el-button>
+ <el-button :icon="Download" link class="linkBtn" @click="downloadChart(layerData)"></el-button>
<!-- 鏆傛椂涓嶇敤鍒犻櫎 -->
<!-- <el-button
:icon="Delete"
@@ -139,25 +68,11 @@
@click="deleteChart(e)"
></el-button> -->
</div>
- <Bar-graph
- :width="'100%'"
- :height="'260px'"
- :layerData="layerData"
- ></Bar-graph>
+ <Bar-graph :width="'100%'" :height="'260px'" :layerData="layerData"></Bar-graph>
<div class="select">
- <el-select
- v-model="layerValue"
- class="m-2"
- placeholder="閫夋嫨鍥惧眰"
- size="small"
- @change="layerChange"
- >
- <el-option
- v-for="(item, i) in layeroptions"
- :key="i"
- :label="item.layerName"
- :value="item.layerName"
- />
+ <el-select v-model="layerValue" class="m-2" placeholder="閫夋嫨鍥惧眰" size="small" @change="layerChange">
+ <el-option v-for="(item, i) in layeroptions" :key="i" :label="item.layerName"
+ :value="item.layerName" />
</el-select>
</div>
</div>
@@ -188,10 +103,7 @@
>
</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>
@@ -201,11 +113,7 @@
</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>
@@ -215,34 +123,20 @@
</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>
- <BarGraphAxisLine
- :width="'856px'"
- :height="'636px'"
- :layerData="layerData"
- ></BarGraphAxisLine>
+ <BarGraphAxisLine :width="'856px'" :height="'636px'" :layerData="layerData"></BarGraphAxisLine>
</div>
</div>
</template>
@@ -569,7 +463,7 @@
}
}
};
-const handleClick = (tab: TabsPaneContext, event: Event) => {};
+const handleClick = (tab: TabsPaneContext, event: Event) => { };
// const setCloseplotting = () => {
// emits("setCloseplotting", false);
// };
@@ -635,6 +529,7 @@
width: 320px;
background: rgba(7, 8, 14, 0.8);
z-index: 100;
+
.InquireHeader {
width: 100%;
height: 35px;
@@ -649,6 +544,7 @@
display: flex;
justify-content: space-between;
}
+
.inquireContent {
.inquireContent_title {
font-size: 14px;
@@ -658,20 +554,24 @@
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;
@@ -679,6 +579,7 @@
margin-left: 10px;
}
}
+
.plotting_list_tr_wkt {
font-size: 12px;
font-weight: 300;
@@ -686,34 +587,41 @@
margin-left: 10px;
flex: 1;
}
+
.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;
@@ -722,12 +630,15 @@
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;
@@ -735,12 +646,15 @@
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;
@@ -748,14 +662,17 @@
}
}
}
+
.inquireContent_table {
padding-right: 15px;
padding-left: 15px;
padding-bottom: 10px;
+
.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;
@@ -763,6 +680,7 @@
// 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;
@@ -773,7 +691,9 @@
align-items: center;
border-right: 1px solid rgba(214, 228, 255, 0.4);
box-sizing: border-box;
+
}
+
.table_head_td:nth-child(2) {
width: 237px;
display: flex;
@@ -781,15 +701,19 @@
align-items: center;
padding: 0 10px;
border-right: 0;
+
}
}
+
.table_content {
height: 440px;
overflow: auto;
+
.table_tr {
// height: 27px;
display: flex;
background: #000000;
+
// padding: 5px 0;
.table_td {
width: 50px;
@@ -802,6 +726,7 @@
align-items: center;
border-right: 1px solid rgba(214, 228, 255, 0.4);
box-sizing: border-box;
+
// padding: 5px;
// white-space: nowrap;
span {
@@ -809,12 +734,19 @@
width: 50%;
word-wrap: break-word;
// white-space: pre;
+ text-align: left;
}
+
span:nth-child(2) {
- display: flex;
- justify-content: flex-end;
+ // display: flex;
+ // justify-content: flex-end;
+ // margin-left: 5%;
+ // float: right;
+ width: 40%;
+ text-align: right;
}
}
+
.table_td:nth-child(2) {
width: 237px;
display: flex;
@@ -828,74 +760,91 @@
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);
}
}
}
+
.download {
padding-right: 15px;
padding-left: 15px;
padding-bottom: 14px;
display: flex;
justify-content: flex-end;
+
.el-button {
font-size: 12px;
color: #d6e4ff;
}
}
+
.chart {
width: 100%;
height: 540px;
overflow: auto;
}
+
.chart::-webkit-scrollbar {
width: 8px;
}
+
.chart::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(0, 0, 0, 0.2);
}
+
.chart::-webkit-scrollbar-track {
border-radius: 0;
background: rgba(0, 0, 0, 0);
}
+
.chart_box {
width: 100%;
+
.chart_btn {
display: flex;
justify-content: flex-end;
margin: 0 10px;
padding-top: 5px;
padding-bottom: 5px;
+
// border-bottom: 1px solid rgba(214, 228, 255, 0.4);
.linkBtn {
color: #d6e4ff;
}
+
.del {
color: red;
}
}
}
+
.select_box {
padding-bottom: 20px;
+
.add_btn {
display: flex;
justify-content: center;
}
}
+
.select {
display: flex;
justify-content: center;
@@ -903,6 +852,7 @@
}
}
}
+
.dialog {
position: absolute;
top: 0;
@@ -911,6 +861,7 @@
height: 100vh;
background-color: rgba(255, 255, 255, 0.4);
z-index: 110;
+
.chart {
position: absolute;
top: 50%;
@@ -918,6 +869,7 @@
transform: translate(-50%, -50%);
background-color: rgb(33, 37, 44);
padding: 20px;
+
i {
position: absolute;
right: 2px;
@@ -928,6 +880,7 @@
}
}
}
+
.btnstyle {
.el-button {
background: rgba(104, 156, 255, 0.2);
@@ -937,9 +890,11 @@
font-weight: 400;
color: #ffffff;
}
+
.el-button:hover {
border: 1px solid #689cff;
}
+
.delbtn {
background: rgba(245, 108, 108, 0.2);
border: 1px solid #5a0914;
diff --git a/src/views/query/slopeQuery.vue b/src/views/query/slopeQuery.vue
new file mode 100644
index 0000000..ca84052
--- /dev/null
+++ b/src/views/query/slopeQuery.vue
@@ -0,0 +1,72 @@
+<template>
+ <div v-drag="true" class="searchBox">
+ <div @click="setCloseSlopeQuerty" style="float: right;">
+ <el-icon :size="20">
+ <Close />
+ </el-icon>
+ </div>
+ <div>
+ 鍧″害鍊硷細{{ queryVal }}
+ </div>
+ </div>
+</template>
+
+<script lang="ts" setup>
+
+import {
+ ref,
+ onMounted,
+ onBeforeUnmount,
+ reactive,
+ defineProps,
+ defineEmits,
+ nextTick,
+ watch,
+} from "vue";
+import store from "@/store";
+const queryVal = ref(null)
+const setCloseSlopeQuerty = () => {
+ store.state.showSlopeQuey = false;
+ store.state.slopeQueyValue = null;
+}
+const changeSlopQueryValue = (res) => {
+ queryVal.value = res
+}
+
+
+onMounted(() => {
+ changeSlopQueryValue(store.state.slopeQueyValue)
+})
+watch(
+ () => store.state.slopeQueyValue,
+ (nVal, oVal) => {
+ if (nVal) {
+ changeSlopQueryValue(nVal);
+ }
+ },
+ { deep: true }
+);
+
+
+
+
+
+</script>
+<style lang="less" scoped>
+.searchBox {
+ position: absolute;
+ z-index: 30;
+ width: 200px;
+ top: 8vh;
+ right: 24vh;
+ padding: 10px;
+ background: rgba(7, 8, 14, 0.8);
+ border: 1px solid #d6e4ff;
+ box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
+ border-radius: 5px;
+ font-family: Source Han Sans SC;
+ font-size: 12px;
+ color: white;
+}
+</style>
+
--
Gitblit v1.9.3