From 405df5bd528ad59bcebd14f8fb9505acf9bb41ec Mon Sep 17 00:00:00 2001
From: TreeWish <1131093754@qq.com>
Date: 星期一, 20 二月 2023 18:11:12 +0800
Subject: [PATCH] 工程较多时添加列表滚动和搜索框
---
src/components/Screen/bottom.vue | 161 +++++++++++++++++++++++++++++++++++++++-
src/assets/img/Screen/centerTooltipBg.png | 0
src/components/Screen/mapsdk.vue | 69 ++--------------
3 files changed, 166 insertions(+), 64 deletions(-)
diff --git a/src/assets/img/Screen/centerTooltipBg.png b/src/assets/img/Screen/centerTooltipBg.png
new file mode 100644
index 0000000..0e85223
--- /dev/null
+++ b/src/assets/img/Screen/centerTooltipBg.png
Binary files differ
diff --git a/src/components/Screen/bottom.vue b/src/components/Screen/bottom.vue
index 0f9308c..91ee1b4 100644
--- a/src/components/Screen/bottom.vue
+++ b/src/components/Screen/bottom.vue
@@ -21,6 +21,14 @@
<div class="popover-content">
<div class="popover-content__header">椤圭洰淇℃伅</div>
<div class="popover-content__list">
+ <el-input
+ v-if="item.children.length > 4"
+ size="mini"
+ placeholder="璇疯緭鍏ュ唴瀹�"
+ v-model="searchName"
+ >
+ <el-button slot="append" icon="el-icon-search"></el-button>
+ </el-input>
<div
class="popover-content__list__item"
v-for="child in item.children"
@@ -46,6 +54,7 @@
</div>
</template>
<script>
+import PipeLine from "@/assets/json/pipeline.json"
export default {
data() {
return {
@@ -53,6 +62,7 @@
yxImg: require("../../assets/img/Screen/yximg.png"),
currMenu: "椤圭洰灞曠ず",
currProject: "鍏ㄧ悆绠＄綉鍥�",
+ searchName: "",
menuList: [
{
menuName: "椤圭洰灞曠ず",
@@ -115,6 +125,22 @@
name: "灞变笢瀹樼綉鏂板共绾�",
id: "sdxgx",
},
+ {
+ name: "涓縿涓滅嚎绠￠亾宸ョ▼",
+ id: "zedx",
+ },
+ {
+ name: "瑗挎皵涓滆緭涓夌嚎涓柇绠￠亾宸ョ▼",
+ id: "xqds",
+ },
+ {
+ name: "涓紖澶╃劧姘旂閬撳伐绋�",
+ id: "zmtrq",
+ },
+ {
+ name: "灞变笢瀹樼綉鏂板共绾�",
+ id: "sdxgx",
+ },
],
},
],
@@ -141,6 +167,79 @@
},
handlePopoverClick(child) {
this.currProject = child.name
+ const currMenu = this.currMenu
+ switch (currMenu) {
+ case "宸ョ▼宸¤":
+ this.showPathLine()
+ break
+
+ default:
+ break
+ }
+ },
+ showPathLine(res) {
+ // 瑗挎皵涓滆緭浜岀嚎瑗挎骞茬嚎
+ // console.log("PipeLine", PipeLine)
+ const features = PipeLine.features
+ // features.forEach(item => {
+ // const name = item.properties.pipename
+ // const rawArr = item.geometry.coordinates
+ // })
+ const pipeline = features.find(
+ item => item.properties.pipename == "瑗挎皵涓滆緭涓�绾�"
+ )
+ const name = pipeline.properties.pipename
+ const rawArr = pipeline.geometry.coordinates[0]
+ const result = []
+ rawArr.forEach(pos => {
+ pos.push(50)
+ result.push(...pos)
+ })
+ // console.log("result", result);
+ // sgworld.Command.execute(2, 3, "", data => {
+ // data.showPoint = false
+ // data.showLine = true
+ // data.mode = 1
+ // // 寮圭獥鏁版嵁
+ // window.PathAnimationData = {
+ // flyData: data,
+ // }
+ // window.PathAnimationData.winIndex = layer.open({
+ // type: 2,
+ // title: "璺緞鍔ㄧ敾",
+ // shade: false,
+ // area: ["352px", "690px"],
+ // offset: "r",
+ // skin: "other-class",
+ // content: SmartEarthRootUrl + "Workers/path/Path.html",
+ // end: function () {
+ // PathAnimationData.fly && PathAnimationData.fly.exit()
+ // },
+ // })
+ // })
+ window.sgworld.Creator.getFlyData(result, data => {
+ data.showPoint = false
+ data.showLine = true
+ data.mode = 1
+ data.height = 2000
+
+ // 寮圭獥鏁版嵁
+ window.PathAnimationData = {
+ flyData: data,
+ }
+ window.PathAnimationData.winIndex = layer.open({
+ type: 2,
+ title: "璺緞鍔ㄧ敾",
+ shade: false,
+ area: ["352px", "690px"],
+ offset: "r",
+ skin: "other-class",
+ content: SmartEarthRootUrl + "Workers/path/Path.html",
+ end: function () {
+ PathAnimationData.fly && PathAnimationData.fly.exit()
+ },
+ })
+ })
},
//椤圭洰灞曠ず
@@ -157,6 +256,10 @@
//鎵撳紑鎴栬�呭姞杞藉浘灞�
//寮�濮嬮琛�
+ },
+ filterNode(value, data) {
+ if (!value) return true
+ return children.name.indexOf(value) !== -1
},
},
}
@@ -240,8 +343,8 @@
display: flex;
justify-content: center;
width: 163px;
- height: 239px;
- background: url(~@/assets/img/Screen/centerTooltip.png);
+ height: 218px;
+ background: url(~@/assets/img/Screen/centerTooltipBg.png);
background-size: 100% 100%;
border: none;
.popper__arrow {
@@ -253,7 +356,7 @@
justify-content: center;
align-items: center;
text-align: center;
- width: 130px;
+ width: 100%;
height: 30px;
font-size: 18px;
color: #fff;
@@ -268,13 +371,39 @@
height: 8px;
}
}
+ .el-input {
+ width: 119px;
+ height: 21.5px;
+ background: rgba(0, 48, 111, 0.2);
+ border: 0.25px solid #2a80a9;
+ &__inner {
+ background: rgba(0, 48, 111, 0.2);
+ border-radius: inherit;
+ border: 0.25px solid #2a80a9;
+ }
+ .el-input-group__append {
+ width: 32px;
+ border: none;
+ border-radius: inherit;
+ height: 20px;
+ padding: 0;
+ text-align: center;
+ background: #3a93c7;
+ color: #fff;
+ }
+ }
&__list {
+ margin-top: 10px;
display: flex;
flex-direction: column;
- justify-content: space-evenly;
- height: 190px;
+ // justify-content: space-evenly;
+ align-items: center;
+ width: 145px;
+ height: 180px;
+ overflow-x: hidden;
&__item {
+ margin-top: 10px;
color: #fff;
width: 130px;
height: 30px;
@@ -293,5 +422,27 @@
}
}
}
+ ::-webkit-scrollbar {
+ width: 2px;
+ height: 2px;
+ background: rgba(81, 205, 255, 0.9) 0%;
+ }
+
+ ::-webkit-scrollbar-track {
+ background: rgba(76, 104, 135, 0.8);
+ }
+
+ ::-webkit-scrollbar-thumb {
+ background: #409eff;
+ border-radius: 5px;
+ }
+
+ ::-webkit-scrollbar-thumb:hover {
+ background: #409eff;
+ }
+
+ ::-webkit-scrollbar-corner {
+ background: #409eff;
+ }
}
</style>
diff --git a/src/components/Screen/mapsdk.vue b/src/components/Screen/mapsdk.vue
index 18c9190..553eb8b 100644
--- a/src/components/Screen/mapsdk.vue
+++ b/src/components/Screen/mapsdk.vue
@@ -17,38 +17,19 @@
methods: {
init3DMap() {
//鍦板浘鍒濆鍖�
- window.sgworld = new SmartEarth.SGWorld("Centermapdiv", {
- licenseServer: window.sceneConfig.licenseServer,
- })
+ // window.sgworld = new SmartEarth.SGWorld("Centermapdiv", {
+ // licenseServer: window.sceneConfig.licenseServer,
+ // })
+ window.sgworld = new SmartEarth.SGWorld(
+ "Centermapdiv",
+ SmartEarthRootUrl + "Workers/image/earth.jpg",
+ function () {}
+ )
window.viewer = window.Viewer = window.sgworld._Viewer
- Viewer.imageryLayers._layers[0].show = false
- //瀹氫綅
- // Viewer.camera.flyTo({
- // destination: Cesium.Cartesian3.fromDegrees(110, 33, 25000000),
- // })
- // Viewer.camera.flyTo({
- // destination: {
- // x: -10834926.182758586,
- // y: 50483318.61217012,
- // z: 38375099.7193183,
- // },
- // orientation: {
- // heading: 6.283185307179578,
- // roll: 0,
- // pitch: -1.56436861046299,
- // },
- // })
- //寮�鍚� tick61.2
+ // Viewer.imageryLayers._layers[0].show = false
- // Cesium.Camera.DEFAULT_VIEW_RECTANGLE = {
- // west: -3.141592653589793,
- // south: -1.5707963267948966,
- // east: 3.141592653589793,
- // north: 1.5707963267948966,
- // }
-
- viewer.clock.shouldAnimate = true
+ // viewer.clock.shouldAnimate = true
//姣忔鏃嬭浆鐨勫姬搴� 瓒婂皬瓒婃參
var angle = Cesium.Math.toRadians(Math.PI * 1)
// 鏃嬭浆娆℃暟 鐢ㄦ潵鎺у埗鍋滄
@@ -106,36 +87,6 @@
}
// 鍒╃敤鏃堕挓杩涜鐩戝惉
viewer.clock.onTick.addEventListener(onTickCallback)
- // setTimeout(() => {
- // Viewer.camera.flyTo({
- // destination: {
- // x: -4022999.313498903,
- // y: 19214082.70976515,
- // z: 13043510.373621361,
- // },
- // orientation: {
- // heading: 6.283185307179577,
- // roll: 0,
- // pitch: -1.5643686104630592,
- // },
- // })
- // }, 1000)
-
- // setTimeout(() => {
- // Viewer.camera.flyTo({
- // destination: {
- // x: -3919623.6069864673,
- // y: 13752070.475126158,
- // z: 8307291.863719194,
- // },
- // orientation: {
- // heading: 6.283185307179582,
- // roll: 0,
- // pitch: -1.5707039123519846,
- // },
- // })
- // }, 1000)
-
Viewer.imageryLayers.addImageryProvider(
new Cesium.UrlTemplateImageryProvider({
url: gaoDeBaseUrl[0].url,
--
Gitblit v1.9.3