CQ_JD
/
read_opc


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
							<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
		<div id="main" style="width:100%;height:400px;margin:auto"></div>

		<script src="./echarts.min.js"></script>
		<script src="./cqcyCode.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 src="../date.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;
			}
		</script>

		<script>
			var option = {
				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: 0
				},
				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)',
					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: 1,
						end: 100
					},
					{
						type: 'slider',
						show: true,
						start: 1,
						end: 100,
						bottom: 10
					}
				],
				series: []
			};
		</script>

		<script>
			var chart = null
			var chartTimeList=[],chartSeriesData=[]
			document.addEventListener('UniAppJSBridgeReady', function() {
				uni.getEnv(function(res) {
					const ids = GetQueryString('idList')
					const startTime = GetQueryString('startTime')
					const endTime = GetQueryString('endTime')
					const valueType = GetQueryString('valueType')
					const itemReadName = GetQueryString('itemReadName')
					
					var serviceTime
					let idList = JSON.parse(ids);
					//idList = idList.map(temp=>temp).join(',');
					var queryParams={
						idList: idList,
						startTime: startTime,
						endTime: endTime,
					}
					var serviceUrl = baseUrl + '/itemGroup/getItemListValue'
					getData(true,serviceUrl,queryParams)
					var timer = setInterval(() => {
						queryParams.startTime = queryParams.endTime
						queryParams.endTime = nowDate();
						getData(false,serviceUrl,queryParams)
					},5000);
				});
				function getData(first,serviceUrl,queryParams){
					const token = window.localStorage.getItem('C_TOKEN')
					$.ajax({
						url: serviceUrl,
						type: 'GET',
						data: queryParams,
						beforeSend: function(xhr) {
							// this.url =
							// 	`http://192.168.0.12:8081/itemGroup/getItemListValue`
							// this.url = window.location.origin +
							// 	`/itemGroup/getItemListValue?id=${id}&startTime=${startTime}&endTime=${endTime}` 
							xhr.setRequestHeader("Authorization", "Bearer " +
								token);
							xhr.setRequestHeader("token", token);
						},
						success: (res) => {
							if (res.code === 200) {
								let	valueList=[],valueTimeList=[];
								if(res.data.length>0){
									valueTimeList = res.data[0].dataTimeList;
									valueTimeList = valueTimeList.map(v=>v.substring(0,19))
									let service=[]
									for(let dataList of res.data){
										dataList.dataValueList = dataList.dataValueList.map(v=>v.substring(0,v.indexOf(".") + 3))
										let seriesData = {
											type:'line',
											name:dataList.describe!=null ? dataList.describe:dataList.itemReadName,
											data:dataList.dataValueList
										}
										service.push(seriesData)
									}
									if(first){
										chartTimeList = valueTimeList
										chartSeriesData = service
										
										option.xAxis.data = valueTimeList
										option.series = chartSeriesData
										chart = echarts.init(document.getElementById('main'));
									}else{
										chartTimeList = chartTimeList.concat(valueTimeList)
										chartTimeList.splice(0,valueTimeList.length)
									
										chartSeriesData[0].data = chartSeriesData[0].data.concat(service[0].data)
										chartSeriesData[0].data.splice(0,service[0].data.length)
										
										option.xAxis.data = chartTimeList
										option.series = chartSeriesData
										
									}
									
									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
									}
									
									chart.setOption(option)
								}
								
							}
						}
					})
				}
			})
		</script>
	</body>
</html>