From 6f5331c9ba8b6ba44b45b6a89d7c7c813ab8052d Mon Sep 17 00:00:00 2001
From: zengh <123456>
Date: Fri, 08 Jul 2022 20:28:29 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/components/timeLine/index.vue | 371 +++++++++++++++++++++++++++++++++-------------------
1 files changed, 232 insertions(+), 139 deletions(-)
diff --git a/src/components/timeLine/index.vue b/src/components/timeLine/index.vue
index 9c21240..3245627 100644
--- a/src/components/timeLine/index.vue
+++ b/src/components/timeLine/index.vue
@@ -31,117 +31,97 @@
</template>
<script>
+let currentYxOne = null
+let currentYxTwo = null
+
export default {
name: 'timeLine',
data () {
return {
timeIndex: 2,
- timeLineList: [{
- timestamp: '2012',
- color: '#999',
- fontsize: 18,
- size: '28',
- bgcolor: '#e4e7ed',
- icon: 'el-iconprev',
- year: '2012',
- info: '2012第一季度'
- }, {
- timestamp: '2013年',
- color: '#999',
- fontsize: 18,
- size: '28',
- bgcolor: '#e4e7ed',
- year: '2013',
- info: '2012第二季度'
- }, {
- timestamp: '2014年',
- color: '#999',
- fontsize: 18,
- size: '28',
- bgcolor: '#e4e7ed',
- year: '2014',
- info: '2012第三季度'
- }, {
- timestamp: '2015年',
- color: '#999',
- fontsize: 18,
- year: '2015',
- size: '28',
- bgcolor: '#e4e7ed',
- info: '2012第四季度'
- }, {
- timestamp: '2016年',
- color: '#999',
- fontsize: 18,
- size: '28',
- year: '2016',
- bgcolor: '#e4e7ed',
- info: '2013第一季度'
- }, {
- timestamp: '2017年',
- color: '#999',
- fontsize: 18,
- size: '28',
- bgcolor: '#e4e7ed',
- year: '2017',
- info: '2013第二季度'
- }, {
- timestamp: '2018年',
- color: '#999',
- fontsize: 18,
- size: '28',
- bgcolor: '#e4e7ed',
- year: '2018',
- info: '2013第三季度'
- }, {
- timestamp: '2019年',
- color: '#999',
- fontsize: 18,
- year: '2019',
- bgcolor: '#e4e7ed',
- size: '28',
- info: '2013第四季度'
- }, {
- timestamp: '2019年',
- color: '#999',
- fontsize: 18,
- year: '2019',
- bgcolor: '#e4e7ed',
- size: '28',
- info: '2014第一季度'
- }, {
- timestamp: '2019年',
- color: '#999',
- fontsize: 18,
- year: '2019',
- bgcolor: '#e4e7ed',
- size: '28',
- info: '2014第二季度'
- }, {
- timestamp: '2019年',
- color: '#999',
- fontsize: 18,
- year: '2019',
- bgcolor: '#e4e7ed',
- size: '28',
- info: '2014第三季度'
- }, {
- timestamp: '2019年',
- color: '#999',
- fontsize: 18,
- year: '2019',
- bgcolor: '#e4e7ed',
- size: '28',
- info: '2014第四季度'
- }, {
- timestamp: '2019',
- color: '#999',
- fontsize: 18,
- year: '2019',
- bgcolor: '#e4e7ed',
- size: '28',
- info: '2015第一季度'
- }],
+ timeLineList: [
+ {
+ timestamp: '2012',
+ color: '#999',
+ fontsize: 18,
+ size: '28',
+ bgcolor: '#e4e7ed',
+ icon: 'el-iconprev',
+ year: '2012',
+ info: '2012第一季度'
+ }, {
+ timestamp: '2013年',
+ color: '#999',
+ fontsize: 18,
+ size: '28',
+ bgcolor: '#e4e7ed',
+ year: '2013',
+ info: '2012第二季度'
+ }, {
+ timestamp: '2014年',
+ color: '#999',
+ fontsize: 18,
+ size: '28',
+ bgcolor: '#e4e7ed',
+ year: '2014',
+ info: '2012第三季度'
+ }, {
+ timestamp: '2015年',
+ color: '#999',
+ fontsize: 18,
+ year: '2015',
+ size: '28',
+ bgcolor: '#e4e7ed',
+ info: '2012第四季度'
+ }, {
+ timestamp: '2016年',
+ color: '#999',
+ fontsize: 18,
+ size: '28',
+ year: '2016',
+ bgcolor: '#e4e7ed',
+ info: '2013第一季度'
+ }, {
+ timestamp: '2017年',
+ color: '#999',
+ fontsize: 18,
+ size: '28',
+ bgcolor: '#e4e7ed',
+ year: '2017',
+ info: '2013第二季度'
+ }, {
+ timestamp: '2018年',
+ color: '#999',
+ fontsize: 18,
+ size: '28',
+ bgcolor: '#e4e7ed',
+ year: '2018',
+ info: '2013第三季度'
+ }, {
+ timestamp: '2019年',
+ color: '#999',
+ fontsize: 18,
+ year: '2019',
+ bgcolor: '#e4e7ed',
+ size: '28',
+ info: '2013第四季度'
+ }, {
+ timestamp: '2019年',
+ color: '#999',
+ fontsize: 18,
+ year: '2019',
+ bgcolor: '#e4e7ed',
+ size: '28',
+ info: '2014第一季度'
+ }, {
+ timestamp: '2019年',
+ color: '#999',
+ fontsize: 18,
+ year: '2019',
+ bgcolor: '#e4e7ed',
+ size: '28',
+ info: '2014第二季度'
+ }],
currentObj: {
timestamp: '2012',
color: '#999',
@@ -157,8 +137,100 @@
rightStart: true
}
},
+ mounted () {
+ this.$nextTick(() => {
+ this.addBaseLayer()
+ })
+ },
+
methods: {
+ addBaseLayer () {
+ currentYxOne = global.viewer.imageryLayers.addImageryProvider(
+ new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
+ url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengyjjddom/MapServer/WMTS',
+ // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
+ layer: 'nanchengyjjddom',
+ style: 'default',
+ tileMatrixSetID: 'default028mm',
+ format: 'image/png',
+ tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
+ maximumLevel: 19,
+ tileMatrixLabels: [
+ '0',
+ '1',
+ '2',
+ '3',
+ '4',
+ '5',
+ '6',
+ '7',
+ '8',
+ '9',
+ '10',
+ '11',
+ '12',
+ '13',
+ '14',
+ '15',
+ '16',
+ '17',
+ '18',
+ '19'
+ ]
+ })
+ )
+
+ currentYxTwo = global.viewer.imageryLayers.addImageryProvider(
+ new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
+ url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
+ // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
+ layer: 'nanchengdom',
+ style: 'default',
+ tileMatrixSetID: 'default028mm',
+ format: 'image/png',
+ tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
+ maximumLevel: 19,
+ tileMatrixLabels: [
+ '0',
+ '1',
+ '2',
+ '3',
+ '4',
+ '5',
+ '6',
+ '7',
+ '8',
+ '9',
+ '10',
+ '11',
+ '12',
+ '13',
+ '14',
+ '15',
+ '16',
+ '17',
+ '18',
+ '19'
+ ]
+ })
+ )
+ },
+ removeBaseLayer () {
+ if (currentYxOne != null) {
+ global.viewer.imageryLayers.remove(currentYxOne)
+ currentYxOne = null
+ }
+
+ if (currentYxTwo != null) {
+ global.viewer.imageryLayers.remove(currentYxTwo)
+ currentYxTwo = null
+ }
+ },
selectTime (e, item, index) {
+ if (this.currentInd == index) return
+
+ this.removeBaseLayer()
+
this.currentObj = item
this.currentInd = index
@@ -166,66 +238,86 @@
this.$refs.TimePointer.style.left = e.target.offsetLeft + parseInt(this.$refs.mytimeline.style.left) + 14 + 'px'
this.$refs.TextPopup.style.left = e.target.offsetLeft + parseInt(this.$refs.mytimeline.style.left) - 38 + 'px'
} else {
- if (e.target.offsetLeft <= 528) {
+ if (e.target.offsetLeft <= 480) {
this.$refs.TimePointer.style.left = e.target.offsetLeft + 14 + 'px'
this.$refs.TextPopup.style.left = e.target.offsetLeft - 38 + 'px'
}
}
+
+ this.addBaseLayer()
// offsetX
},
changeActive (index) {
this.timeIndex = index
},
moveLeft () {
- const leftWidth = parseInt(this.$refs.mytimeline.style.left)
- const boxWidth = parseInt(this.$refs.mytimeline.clientWidth)
+ // const leftWidth = parseInt(this.$refs.mytimeline.style.left)
+ // const boxWidth = parseInt(this.$refs.mytimeline.clientWidth)
- if (this.leftStart == false) {
- return
- } else {
- this.rightStart = true
- }
+ // if (this.leftStart == false) {
+ // return
+ // } else {
+ // this.rightStart = true
+ // }
if (this.currentInd <= 0) return
+
+ this.removeBaseLayer()
this.currentInd = this.currentInd - 1
this.currentObj = this.timeLineList[this.currentInd]
- if (leftWidth <= 0 && Math.abs(leftWidth) <= boxWidth - 528) {
- if (leftWidth + 48 < 0) {
- this.$refs.mytimeline.style.left = leftWidth + 48 + 'px'
- } else {
- this.$refs.mytimeline.style.left = 0 + 'px'
+ this.$refs.TimePointer.style.left = parseInt(this.$refs.TimePointer.style.left) - 48 + 'px'
+ this.$refs.TextPopup.style.left = parseInt(this.$refs.TextPopup.style.left) - 48 + 'px'
- this.leftStart = false
- }
- }
+ this.addBaseLayer()
+
+ // if (leftWidth <= 0 && Math.abs(leftWidth) <= boxWidth - 480) {
+ // if (leftWidth + 48 < 0) {
+ // this.$refs.mytimeline.style.left = leftWidth + 48 + 'px'
+ // } else {
+ // this.$refs.mytimeline.style.left = 0 + 'px'
+
+ // this.leftStart = false
+ // }
+ // }
},
moveRight () {
- const leftWidth = parseInt(this.$refs.mytimeline.style.left)
- const boxWidth = parseInt(this.$refs.mytimeline.clientWidth)
+ // const leftWidth = parseInt(this.$refs.mytimeline.style.left)
+ // const boxWidth = parseInt(this.$refs.mytimeline.clientWidth)
- if (this.rightStart == false) {
- return
- } else {
- this.leftStart = true
- }
+ // if (this.rightStart == false) {
+ // return
+ // } else {
+ // this.leftStart = true
+ // }
if (this.currentInd >= this.timeLineList.length - 1) return
+
+ this.removeBaseLayer()
this.currentInd = this.currentInd + 1
this.currentObj = this.timeLineList[this.currentInd]
- if (leftWidth <= 0 && Math.abs(leftWidth) <= boxWidth - 528) {
- if (Math.abs(leftWidth - 48) < boxWidth - 528) {
- this.$refs.mytimeline.style.left = leftWidth - 48 + 'px'
- } else {
- this.$refs.mytimeline.style.left = -(boxWidth - 528) + 'px'
+ this.$refs.TimePointer.style.left = parseInt(this.$refs.TimePointer.style.left) + 48 + 'px'
+ this.$refs.TextPopup.style.left = parseInt(this.$refs.TextPopup.style.left) + 48 + 'px'
- this.rightStart = false
- }
- }
+ this.addBaseLayer()
+
+ // if (leftWidth <= 0 && Math.abs(leftWidth) <= boxWidth - 480) {
+ // if (Math.abs(leftWidth - 48) < boxWidth - 480) {
+ // this.$refs.mytimeline.style.left = leftWidth - 48 + 'px'
+ // } else {
+ // this.$refs.mytimeline.style.left = -(boxWidth - 480) + 'px'
+
+ // this.rightStart = false
+ // }
+ // }
}
+ },
+
+ destroyed () {
+ this.removeBaseLayer()
}
}
</script>
@@ -252,6 +344,7 @@
img {
width: 20px;
+ cursor: pointer;
}
.year-box {
@@ -265,11 +358,11 @@
.time-line-box {
position: relative;
- width: 528px;
+ width: 480px;
height: 16px;
.ul_box {
position: relative;
- width: 528px;
+ width: 480px;
height: 16px;
overflow-x: hidden;
display: flex;
--
Gitblit v1.9.3