From f6769a1af13e187541eed4326e69916f9a7dee01 Mon Sep 17 00:00:00 2001
From: wulitaotao <547306458@qq.com>
Date: 星期一, 27 二月 2023 15:49:20 +0800
Subject: [PATCH] 修改左下角滚动，进入视角不旋转
---
package.json | 1
src/components/chart/DataStorage.vue | 345 +++++++++++++++++++++++++++++++++---------
src/components/Screen/mapsdk.vue | 78 ++-------
3 files changed, 289 insertions(+), 135 deletions(-)
diff --git a/package.json b/package.json
index 593b600..f220afa 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
"vue": "^2.6.11",
"vue-i18n": "^8.27.2",
"vue-router": "^3.2.0",
+ "vue-seamless-scroll": "^1.1.23",
"vuex": "^3.4.0",
"xlsx": "^0.18.5"
},
diff --git a/src/components/Screen/mapsdk.vue b/src/components/Screen/mapsdk.vue
index c61a0c5..d912802 100644
--- a/src/components/Screen/mapsdk.vue
+++ b/src/components/Screen/mapsdk.vue
@@ -50,67 +50,25 @@
function () {}
)
- window.viewer = window.Viewer = window.sgworld._Viewer
- // Viewer.imageryLayers._layers[0].show = false
+ window.viewer = window.Viewer = window.sgworld._Viewer;
- // viewer.clock.shouldAnimate = true
- //姣忔鏃嬭浆鐨勫姬搴� 瓒婂皬瓒婃參
- var angle = Cesium.Math.toRadians(Math.PI * 1)
- // 鏃嬭浆娆℃暟 鐢ㄦ潵鎺у埗鍋滄
- var rotate_num = 0
- function onTickCallback() {
- viewer.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, angle)
- //浠ヤ笅鐢ㄦ潵鎺у埗 鍋滄
- rotate_num++
- // 110 娆℃棆杞竴鍛�
- if (rotate_num == 1) {
- Viewer.camera.flyTo({
- destination: {
- x: -2395735.480669514,
- y: 35646557.30966785,
- z: 33320031.01620178,
- },
- orientation: {
- heading: 6.283185307179578,
- roll: 0,
- pitch: -1.5687480368906144,
- },
- })
- }
- if (rotate_num == 220) {
- Viewer.camera.flyTo({
- destination: {
- x: -4022999.313498903,
- y: 19214082.70976515,
- z: 13043510.373621361,
- },
- orientation: {
- heading: 6.283185307179577,
- roll: 0,
- pitch: -1.5643686104630592,
- },
- })
- }
- if (rotate_num === 330) {
- //缁撴潫鏃嬭浆
- viewer.clock.onTick.removeEventListener(onTickCallback)
- //鍙互鍐嶆帴瀹氫綅鍔ㄧ敾
- Viewer.camera.flyTo({
- destination: {
- x: -3919623.6069864673,
- y: 13752070.475126158,
- z: 8307291.863719194,
- },
- orientation: {
- heading: 6.283185307179582,
- roll: 0,
- pitch: -1.5707039123519846,
- },
- })
- }
- }
- // 鍒╃敤鏃堕挓杩涜鐩戝惉
- viewer.clock.onTick.addEventListener(onTickCallback)
+
+
+ Viewer.imageryLayers._layers[0].show = false
+
+ sgworld.Navigate.jumpTo({ //璺宠浆瑙嗚
+ destination: new Cesium.Cartesian3.fromDegrees(110, 32, 50000000)
+ });
+ setTimeout(() => {
+ window.viewer.camera.flyTo({
+ destination:new Cesium.Cartesian3.fromDegrees(110, 32, 20000000),
+ orientation:{
+ heading:Cesium.Math.toRadians(0),
+ pitch: Cesium.Math.toRadians(-90),
+ }
+ })
+ }, 1000);
+
Viewer.imageryLayers.addImageryProvider(
new Cesium.UrlTemplateImageryProvider({
url: gaoDeBaseUrl[0].url,
diff --git a/src/components/chart/DataStorage.vue b/src/components/chart/DataStorage.vue
index c97ec7c..f42e913 100644
--- a/src/components/chart/DataStorage.vue
+++ b/src/components/chart/DataStorage.vue
@@ -2,12 +2,7 @@
<div class="data-storage">
<div class="data-storage__header">
<div class="text">
- <img
- class="img"
- src="@/assets/img/Screen/cunchu.png"
- alt=""
- srcset=""
- />
+ <img class="img" src="@/assets/img/Screen/cunchu.png" alt="" srcset="" />
<div class="title">鍏卞瓨鍌ㄦ枃浠舵暟閲�</div>
</div>
<div class="num">
@@ -16,8 +11,30 @@
</div>
</div>
<div class="data-storage__content">
- <!-- <dv-scroll-board :config="config" style="width: 330px; height: 220px" /> -->
- <el-scrollbar class="scrollbar">
+ <ul class="contentTitle">
+ <li class="title">缂栧彿</li>
+ <li class="name">鍚嶇О</li>
+ <li class="num">鏂囦欢鏁�</li>
+ </ul>
+ <div class="scroolData">
+ <vue-seamless-scroll :data="tableData" class="ClassScroll" :class-option="defaultOption">
+
+<ul class="item">
+ <li v-for="(item, index) in tableData" :key="index">
+ <span class="title">
+ <div>{{ item.index }}</div></span>
+ <span class="name" :title="item.name">{{ item.name.substring(0, 15) }}</span>
+ <span class="num">{{ item.num }}</span>
+ </li>
+</ul>
+</vue-seamless-scroll>
+ </div>
+
+ </div>
+ </div>
+
+ <!-- <dv-scroll-board :config="config" style="width: 330px; height: 220px" /> -->
+ <!-- <el-scrollbar class="scrollbar">
<el-table
:data="tableData"
:row-style="{ background: 'rgba(135,180,248,0.10)' }"
@@ -60,14 +77,16 @@
<el-table-column prop="num" label="鏂囦欢鏁�" width="70">
</el-table-column>
</el-table>
- </el-scrollbar>
- </div>
- </div>
+ </el-scrollbar> -->
</template>
<script>
+import vueSeamlessScroll from 'vue-seamless-scroll'
import { countDataStorage } from "@/api/screen.js"
export default {
+ components: {
+ vueSeamlessScroll
+ },
data() {
return {
tableData: [
@@ -120,6 +139,22 @@
},
}
},
+ computed: {
+ defaultOption() {
+ return {
+ step: 0.2, // 鏁板�艰秺澶ч�熷害婊氬姩瓒婂揩
+ limitMoveNum: this.tableData.length, // 寮�濮嬫棤缂濇粴鍔ㄧ殑鏁版嵁閲� this.dataList.length
+ hoverStop: true, // 鏄惁寮�鍚紶鏍囨偓鍋渟top
+ direction: 1, // 0鍚戜笅 1鍚戜笂 2鍚戝乏 3鍚戝彸
+ openWatch: true, // 寮�鍚暟鎹疄鏃剁洃鎺у埛鏂癲om
+ singleHeight: 0, // 鍗曟杩愬姩鍋滄鐨勯珮搴�(榛樿鍊�0鏄棤缂濅笉鍋滄鐨勬粴鍔�) direction => 0/1
+ singleWidth: 0, // 鍗曟杩愬姩鍋滄鐨勫搴�(榛樿鍊�0鏄棤缂濅笉鍋滄鐨勬粴鍔�) direction => 2/3
+ waitTime: 1000, // 鍗曟杩愬姩鍋滄鐨勬椂闂�(榛樿鍊�1000ms)
+ };
+ },
+ },
+
+
created() {
this.initTable()
},
@@ -148,79 +183,239 @@
<style lang="scss" scoped>
.data-storage {
- margin: 10px;
- width: 377px;
- &__header {
- margin-bottom: 10px;
+
+ height: calc(100% - 30px);
+ width: 100%;
+}
+
+.data-storage__header {
+ height: 40px;
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+
+ .text {
display: flex;
align-items: center;
- justify-content: space-between;
- height: 20px;
- width: 340px;
- box-sizing: border-box;
- .text {
+ }
+
+ .title {
+ font-family: Source Han Sans CN, Source Han Sans CN-Regular;
+ color: #ffffff;
+ }
+
+ .img {
+ margin-right: 4px;
+ width: 16px;
+ height: 16px;
+ }
+
+ .num {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+}
+
+.data-storage__content {
+ height: calc(100% - 40px);
+ width: 100%;
+
+ .contentTitle {
+ height: 40px;
+ width: 100%;
+ display: flex;
+ background-color: rgba(52,78,147,.5);
+ flex-direction: row;
+
+
+ li {
+
+ align-items: center;
+ justify-content: space-around;
+ color: #FFFFFF;
+ }
+
+ .title {
+ width: 15%;
+ height: 100%;
display: flex;
align-items: center;
+ justify-content: center;
}
- .title {
- font-family: Source Han Sans CN, Source Han Sans CN-Regular;
- color: #ffffff;
- }
- .img {
- margin-right: 4px;
- width: 16px;
- height: 16px;
+ .name {
+ width: 60%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
- .value {
- text-align: center;
- color: #ffffff;
- width: 16px;
- height: 20px;
- background: url("~@/assets/img/Screen/numBg.png");
- background-size: 100% 100%;
+
+ .num {
+ width: 25%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
+
+
}
- &__content {
- width: 95%;
- height: 220px;
- }
+
+
}
-</style>
+
+.scroolData{
+ height: calc(100% - 40px);
+ width: 100%;
+ overflow: hidden;
+}
+.ClassScroll {
+ height:100%;
+ width: 100%;
+
+
+
+ .item {
+ width: 100%;
+ height: 100%;
+ color: #ffffff;
+
+ li {
+ height: 40px;
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-around;
+
+ .title {
+ width: 15%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ div {
+ height: 20px;
+ width: 20px;
+ background-color: #495477;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+
+ .name {
+ width: 60%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .num {
+ width: 25%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ }
+
+ }
+
+}
+
+// .data-storage {
+// margin: 10px;
+// width: 377px;
+
+// &__header {
+// margin-bottom: 10px;
+// display: flex;
+// align-items: center;
+// justify-content: space-between;
+// height: 20px;
+// width: 340px;
+// box-sizing: border-box;
+
+// .text {
+// display: flex;
+// align-items: center;
+// }
+
+// .title {
+// font-family: Source Han Sans CN, Source Han Sans CN-Regular;
+// color: #ffffff;
+// }
+
+// .img {
+// margin-right: 4px;
+
+// width: 16px;
+// height: 16px;
+// }
+
+// .value {
+// text-align: center;
+// color: #ffffff;
+// width: 16px;
+// height: 20px;
+// background: url("~@/assets/img/Screen/numBg.png");
+// background-size: 100% 100%;
+// }
+// }
+
+// &__content {
+// width: 95%;
+// height: 220px;
+// }
+// }
+// </style>
<style lang="scss">
-.data-storage {
- .index-wrap {
- margin: 0 auto;
- width: 14px;
- height: 14px;
- background: rgba(180, 188, 235, 0.25);
- }
- .scrollbar {
- width: 100%;
- overflow-x: hidden;
- height: 200px;
- .el-scrollbar__wrap {
- overflow-x: hidden;
- }
- .el-table {
- height: 100%;
- width: 100%;
- background-color: transparent;
- color: #fff;
- }
- .el-table th.el-table__cell.is-leaf,
- .el-table td.el-table__cell {
- border: none;
- }
- .el-table--group::after,
- .el-table--border::after,
- .el-table::before {
- border: none;
- }
- .el-table::before {
- height: 0;
- }
- }
-}
-</style>
+// .data-storage {
+// .index-wrap {
+// margin: 0 auto;
+// width: 14px;
+// height: 14px;
+// background: rgba(180, 188, 235, 0.25);
+// }
+
+// .scrollbar {
+// width: 100%;
+// overflow-x: hidden;
+// height: 200px;
+
+// .el-scrollbar__wrap {
+// overflow-x: hidden;
+// }
+
+// .el-table {
+// height: 100%;
+// width: 100%;
+// background-color: transparent;
+// color: #fff;
+// }
+
+// .el-table th.el-table__cell.is-leaf,
+// .el-table td.el-table__cell {
+// border: none;
+// }
+
+// .el-table--group::after,
+// .el-table--border::after,
+// .el-table::before {
+// border: none;
+// }
+
+// .el-table::before {
+// height: 0;
+// }
+// }
+// }</style>
--
Gitblit v1.9.3