CQ_JD
/
read_opc


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290
							<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			html {
				height: 100%
			}

			body {
				height: 100%;
				margin: 0
			}
		</style>
	</head>

	<body>
		<div id="main" style="width:100%;height:85%;margin:auto"></div>

		<script src="./echarts.min.js"></script>
		<script type="text/javascript" src="../luckysheet/dist/plugins/js/uni-webview-js0.0.3_index.js"></script>
		<script src="../jquery.min.js"></script>

		<script>
			function GetQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
				var context = "";
				if (r != null)
					context = decodeURIComponent(r[2]);
				reg = null;
				r = null;
				return context == null || context == "" || context == "undefined" ? "" : context;
			}

			function nowDate() {
				var date = new Date();
				var sign2 = ":";
				var year = date.getFullYear() // 年
				var month = date.getMonth() + 1; // 月
				var day = date.getDate(); // 日
				var hour = date.getHours(); // 时
				var minutes = date.getMinutes(); // 分
				var seconds = date.getSeconds() //秒
				var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
				var week = weekArr[date.getDay()];
				// 给一位数的数据前面加 “0”
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (day >= 0 && day <= 9) {
					day = "0" + day;
				}
				if (hour >= 0 && hour <= 9) {
					hour = "0" + hour;
				}
				if (minutes >= 0 && minutes <= 9) {
					minutes = "0" + minutes;
				}
				if (seconds >= 0 && seconds <= 9) {
					seconds = "0" + seconds;
				}
				return year + "-" + month + "-" + day + " " + hour + sign2 + minutes + sign2 + seconds;
			}
		</script>

		<script>
			var option = {
				title: {
					text: '',
					textStyle: {
						color: '#666666',
						fontWeight: 'normal',
						fontSize: '14'
					}
				},
				xAxis: {
					type: 'category',
					data: [],
					axisLabel: {
						formatter: function(value) {
							return value.substring(11, 19) + "\n" + value.substring(0, 10).split('-').join('')
						}
					}
				},
				yAxis: {
					type: 'value'
				},
				legend: {
					type: 'scroll',
					top: 30
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						lineStyle: {
							type: 'dashed'
						},
						label: {
							show: false
						},
					},
					textStyle:{
						color:'#ffffff'
					},
					confine: true,
					extraCssText: 'white-space: normal; word-break: break-all;',
					backgroundColor: 'rgba(108,106,120,0.9)', //通过设置rgba调节背景颜色与透明度
					position: 'inside',
					formatter: function(params) {
						let result = ''
						for (let i in params) {
							let value = '--'
							if (params[i].data !== null) {
								value = params[i].data
							}
							result += '<br>' + params[i].seriesName + '：' +
								value
						}
						return result
					}
				},
				dataZoom: [{
						type: 'inside',
						start: 90,
						end: 100
					},
					{
						type: 'slider',
						show: true,
						start: 90,
						end: 100,
						bottom: 10
					}
				],
				series: []
			};
		</script>

		<script>
			document.addEventListener('UniAppJSBridgeReady', function() {
				uni.getEnv(function(res) {
					const id = GetQueryString('id')
					const startTime = GetQueryString('startTime')
					const endTime = nowDate()
					const token = window.localStorage.getItem('C_TOKEN')
					var echartsData
					let chartParams = {
						id: id
					}
					$.ajax({
						url: "",
						type: 'GET',
						beforeSend: function(xhr) {
							// this.url =
							// 	`http://192.168.0.41:8081/chart/getChartById?id=${id}&startTime=${startTime}&endTime=${endTime}`
							this.url = window.location.origin +
								`/chart/getChartById?id=${id}&startTime=${startTime}&endTime=${endTime}` 
							xhr.setRequestHeader("Authorization", "Bearer " +
								token);
							xhr.setRequestHeader("token", token);
						},
						success: function(res) {
							if (res.code === 200) {
								option.title.text = res.data.chartName

								echartsData = res.data.chartItemList

								getServerData(echartsData)

								getEmit(res)
							}
						}
					})

					function initEcharts() {
						var chart = echarts.init(document.getElementById('main'));
						chart.setOption(option)
					}

					function getServerData(echartsData) {
						const chartData = echartsData
						const timeData = chartData[0].valueTimeList

						const series = chartData.map(item => {
							return {
								// name: item.describe ? item.describe : item.itemName,
								name: item.describe ? item.describe : item.itemReadName,
								data: item.valueList,
								type: 'line'
							}
						})
						var chart = echarts.init(document.getElementById('main'));
						var lastOption = chart.getOption();
						if (lastOption != undefined) {
							option.dataZoom[0].start = lastOption.dataZoom[0].start
							option.dataZoom[0].end = lastOption.dataZoom[0].end
							option.dataZoom[1].start = lastOption.dataZoom[1].start
							option.dataZoom[1].end = lastOption.dataZoom[1].end
						}

						option.xAxis.data = timeData
						option.series = series
						initEcharts()
					}

					function getEmit(res) {
						const {
							bucketType,
							bucketValue
						} = res.data
						var time = null
						switch (bucketType) {
							case 0:
								time = 86400000 * bucketValue

								break;
							case 1:
								time = 3600000 * bucketValue

								break;
							case 2:
								time = 60000 * bucketValue

								break;
							case 3:
								time = 1000 * bucketValue

								break;
						}
						var lineTime = setInterval(() => {
							const currentTime = nowDate();
							var lastTime = localStorage.getItem(id + 'sTime');
							localStorage.setItem(id + 'sTime', currentTime)
							$.ajax({
								url: "",
								type: 'GET',
								beforeSend: function(xhr) {
									// this.url =
									// 	`http://192.168.0.41:8081/chart/getChartById?id=${id}&startTime=${lastTime}&endTime=${currentTime}`
									this.url=window.location.origin+"/chart/getChartById?id="+id+"&startTime="+lastTime+"&endTime="+currentTime
									xhr.setRequestHeader("Authorization", "Bearer " +
										token);
									xhr.setRequestHeader("token", token);
								},
								success: function(res) {
									if (res.code === 200) {
										let chartItemList = res.data.chartItemList;
										chartItemList.forEach((item, index) => {
											if (item.itemId === echartsData[
													index].itemId) {
												if (item.valueList.length !== 0) {
													//执行将新数据添加进去，旧数据去除一个
													echartsData[index].valueList =
														echartsData[index].valueList
														.concat(item.valueList)
													echartsData[
															index]
														.valueList.splice(0, item
															.valueList.length)
													echartsData[index]
														.valueTimeList = echartsData[
															index]
														.valueTimeList.concat(item
															.valueTimeList)
													echartsData[
															index]
														.valueTimeList.splice(0,
															item
															.valueTimeList.length)
												}
											}
										})
										getServerData(echartsData)
									}
								}
							})
						}, time)
					}
				})
			})
		</script>
	</body>

</html>