yzCctvHelm/assets/wireRope.js

var snData = { 412373470: "ZJ217027175898243052,ZJ217027176114406053", 413871376: "ZJ216801593395575538,ZJ217008114043323047" }
var _this;
var myChart;
var nowYsy = null;
var toDay = null;
var data1 = [], xdata = [];
var timeOutOnline = null, timeOutReal = null, timeOutLine = null;
new Vue({
	el: '#app',
	data: function() {
		return {
			activeName: "0",
			wireImeiLi: [],
			wireItem: {},
			wireInfo: {
				maxSS: 0,
				avgSS: 0,
				data: []
			},
			queryParams: {
				imei: null,
				startime: null,
				endtime: null,
				orderSql: "time desc",
				page: 1,
				rows: 12,
				accessToken: getCookie("wireToken")
			},
			orderSqlLi: [{
				value: 'time desc',
				label: '时间降序'
			},{
				value: 'time asc',
				label: '时间升序'
			}],
			wireHis: [],
			allTotal: 0,
			loading: false
		}
	},
	created() {
		_this = this;
		nowYsy = JSON.parse(localStorage.getItem("nowShip"));
		toDay = parseTime(new Date(), '{y}-{m}-{d}');
		_this.queryParams.startime = toDay+" 00:00:00";
		_this.queryParams.endtime = toDay+" 23:59:59";
	},  
	mounted:function(){
		myChart = echarts.init(document.getElementById('myChart'));
		_this.getStatus(0);
		window.addEventListener('message',(data)=>{
			nowYsy = JSON.parse(localStorage.getItem("nowShip"));
			clearTimeout(timeOutOnline);
			clearTimeout(timeOutReal);
			clearTimeout(timeOutLine);
			_this.getStatus(0);
		})
	},
	methods: {
		getStatus(num){
			if(snData[nowYsy.mmsi].length){
				if(num == 0){
					_this.loading = true;
					_this.wireItem = {};
				}
				getWireStatus(snData[nowYsy.mmsi], function(result){
					let _sta = false;
					var _obj = [], _data = result.data;
					let imeiArr = snData[nowYsy.mmsi].split(",");
					imeiArr.forEach((item,index) => {
						let _def = [];
						if(_data.length){
							_def = _data.filter(fitem => { return fitem.clientId == item; })
						};
						_obj.push({
							imei: item,
							name: nowYsy.dev_name + " - 钢丝绳"+(index+1),
							online: _def.length?_def[0].online:0,
							time: _def.length?_def[0].time:"----/--/-- --:--:--",
						});
						if(_def.length&&_def[0].online == 1){
							_sta = true;
						}
					});
					_this.wireImeiLi = _obj;
					if(_this.wireItem.imei == undefined){
						_this.wireItem = _obj[0];
					}else{
						_this.wireItem = _obj.filter(fitem => { return fitem.imei == _this.wireItem.imei })[0];
					}
					_this.queryParams.imei = _this.wireItem.imei;
					timeOutOnline = setTimeout(()=>{
						_this.getStatus(1);
					},(_sta?15*1000:30*1000))
					if(num == 0){
						_this.loading = false;
						if(_this.wireItem.online != 1){
							_this.$message({
								showClose: true,
								message: "设备离线中",
								type: 'warning'
							});
							_this.unlineReset();
						}else{
							_this.getWireReal(0);
							_this.getWireLine(0);
						}
					} 
				});
			}else{
				_this.wireImeiLi = [];
				_this.unlineReset();
			}
		},
		getWireReal(num){
			if(_this.queryParams.imei != null){
				getWireTeal(_this.queryParams.imei,function(res){
					let data1 = [], data2 = [], xdata = [];
					_this.wireInfo = {
						maxSS: 0,
						avgSS: 0,
						data: []
					};
					if(res.data != undefined){
						let _obj = res.data;
						_this.wireInfo = _obj;
					}
					timeOutReal = setTimeout(()=>{
						_this.getWireReal(1);
					},(_this.wireItem.online == 1?5*1000:30*1000))
				});
			}
		},
		getWireLine(num){
			if(_this.queryParams.imei != null){
				if(num == 0){ data1 = [], xdata = [];} 
				getWireTealLine(_this.queryParams.imei,function(res){
					if(res.data != undefined){
						data1.push({ value: res.data.val });
						xdata.push(getDTime(new Date(parseInt(res.data.ts)*1000))[1])
					}
					timeOutLine = setTimeout(()=>{
						_this.getWireLine(1);
					},(_this.wireItem.online == 1?5*1000:30*1000))
					if(num == 0){
						myChart.setOption(_this.getOption(data1, xdata));
					}else{
						myChart.setOption({
							xAxis: {
								data: xdata
							},
							series: [{
								data: data1
							}]
						});
					}
				});
			}
		},
		getOption(_data1, _xdata){
			let option = {
				title: {
					text: '检测时间',
					top: 'bottom',
					left: 'center',
					textStyle: {
						fontSize: 14,
						color: "#cecece",
					}
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						animation: false
					}
				},
				grid: {
				    left: '3%',
					right: '1%',
					bottom: '10%',
					top: '4%',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					data: _xdata,
					splitLine: {
						show: true,
						lineStyle: {
						  color: '#7E85AB',
						  type: 'dashed',
						},
					},
					axisLine: {
					    lineStyle: {
					        color: '#fff',
							width: 2
					    }
					},
					axisLabel:{
						textStyle:{
						 	color: "#cecece"
						}
					}
				},
				yAxis: {
					type: 'value',
					min: 0,
					max: 1200,
					splitNumber: 6,
					splitLine: {
						show: true,
						lineStyle: {
						  color: '#7E85AB',
						  type: 'dashed',
						},
					},
					axisLabel:{
						show: IsPC(),
						textStyle:{
						 	color: "#cecece"
						}
					}
				},
				series: [{
					name: '模数值',
					type: 'line',
					data: _data1
				}]
			};
			return option;
		},
		handleQuery(){
			_this.queryParams.page = 1;
			_this.getWireHis();
		},
		resetQuery(){
			_this.queryParams =  {
				imei: _this.wireItem.imei,
				startime: toDay+" 00:00:00",
				endtime: toDay+" 23:59:59",
				orderSql: "time desc",
				page: 1,
				rows: 12,
				accessToken: getCookie("wireToken")
			};
			_this.wireHis = [];
			_this.allTotal = 0;
		},
		unlineReset(){
			_this.wireInfo = {
				maxSS: 0,
				avgSS: 0,
				data: []
			};
			myChart.setOption(_this.getOption([], []));
			_this.resetQuery();
		},
		handleCurrentChange(val) {
			if(val != _this.queryParams.page){
				_this.queryParams.page = val;
				_this.getWireHis();
			}
		},
		handleChange(row){
			_this.wireItem = row;
			_this.queryParams.imei = row.imei;
			if(_this.wireItem.online != 1){
				_this.$message({
					showClose: true,
					message: "设备离线中",
					type: 'warning'
				});
				_this.unlineReset();
			}else{
				clearTimeout(timeOutReal);
				clearTimeout(timeOutLine);
				_this.getWireReal(0);
				_this.getWireLine(0);
				_this.queryParams.page = 1;
				_this.getWireHis();
			}
		},
		getWireHis(){
			// if(_this.queryParams.startime == null){
			// 	_this.$message({
			// 		showClose: true,
			// 		message: "请选择开始时间",
			// 		type: 'error'
			// 	});
			// 	return;
			// }
			// if(_this.queryParams.endtime == null){
			// 	_this.$message({
			// 		showClose: true,
			// 		message: "请选择结束间",
			// 		type: 'error'
			// 	});
			// 	return;
			// }
			if(_this.queryParams.imei != null){
				_this.loading = true;
				_this.queryParams.gt = new Date(_this.queryParams.startime).getTime()/1000;
				_this.queryParams.lt = new Date(_this.queryParams.endtime).getTime()/1000;
				getWireHistory(_this.queryParams,function(res){
					_this.wireHis = res.data;
					_this.allTotal = res.total;
					_this.loading = false;
				});
			}
		},
		goBack(){
			top.location.href = "../mainPh.html?sn=4";
		}
	}
})