zhny-dsjdp.git - Gitblit

			@@ -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;