yzCctvHelm/assets/compreAlarm.js

var _this;
var shipList = [];
var nowTime;
var vipUrl = "https://www.enstation.com:8083/ruico/rueigao-admin";
new Vue({
	el: '#app',
	data: function() {
		return {
			userForm: {},
			queryParams: {
				searhDate: [],
				searhType: 0
			},
			wramList: [{ name: "驾驶员离岗", icon: "icon-ligangshenqing", key: "lgjc"},
					   { name: "疲劳驾驶", icon: "icon-fatigue-early-warning_line", key: "pljc"},
					   { name: "玩手机", icon: "icon-shouji", key: "sjjc"},
					   { name: "抽烟", icon: "icon-chouyan", key: "xyjc"},
					   { name: "定期巡检", icon: "icon-dingdianxuncha", key: "xjjc"},
					   { name: "遮挡摄像头", icon: "icon-shexiangtou1", key: "zdjc"},
					   { name: "安全穿戴", icon: "icon-paigong", key: "aqjc"},
					   { name: "未瞭望", icon: "icon-yanjing", key: "lwjc"}],
			wramCount: {
				lgjc: 0,
				sjjc: 0,
				xyjc: 0,
				sjjc: 0,
				lwjc: 0,
				xjjc: 0,
				zdjc: 0,
				aqjc: 0
			},
			warmData: []
		}
	},
	created() {
		_this = this;
		nowTime = _this.getDateStr();
		_this.queryParams.searhDate = [nowTime[0], nowTime[6]];
		_this.userForm = JSON.parse(getCookie("Admin-User"));
		console.log(getCookie("Admin-User"),1111)
	},
	mounted:function(){
		warmTypeChart = echarts.init(document.getElementById('warmType'));
		wramTypeRankChart = echarts.init(document.getElementById('wramTypeRank'));
		warmByShipChart = echarts.init(document.getElementById('warmByShip'));
		fuelTrendsChart = echarts.init(document.getElementById('fuelTrends'));
		_this.getShip();
	},
	methods: {
		getShip(){
			let _opts = {
				url: baseUrl + "/SelCctvListByUserId",
				type:"GET"
			};
			let _data = {
				"user_id": _this.userForm.userId
			};
			let _hea = {
				"Authorization": "Bearer " + getCookie("Admin-Token")
			};
			getAxios(_opts,_data,_hea).then((res) => {
				shipList = [];
				if(res.code == 200&&res.data.length){
					shipList = res.data;
					_this.getNumber();
					_this.getLineData();
				}
			})
		},
		getLineData(_name){
			let _opts = {
				url: vipUrl + "/algorithm/snapshotPush/statisticsNumDate",
				type:"POST"
			};
			let _data = JSON.stringify({
				users: (_name?[_name]:shipList.map(item => item.en_name)),
				enddate: _this.queryParams.searhDate[1],
				startdate: _this.queryParams.searhDate[0]
			});
			let _hea  = {
				'Content-Type': 'application/json;charset=utf-8',
			};
			postAxios(_opts, _data, _hea).then((res) => {
				let _objs = (_name?res.data.filter(istem => istem.user == _name):res.data);
				let _data = [];
				_objs.forEach((item,index) => {
					let _obj = item.rows;
					for(let i=0;i<nowTime.length;i++){
						if(_data[i] == undefined){
							_data[i] = 0
						}
						_data[i] += parseFloat((_obj[nowTime[i]] == undefined)?0:_obj[nowTime[i]]);
					}
				})
				let fuelTrendsData = {
					data: _data,
					xAxis: nowTime
				};
				fuelTrendsChart.setOption(_this.lineOption(fuelTrendsData));
			})
		},
		getNumber(_name){
			const loading = this.$loading({
				background: 'rgba(0, 0, 0, 0.4)'
			})
			setTimeout(()=>{
				let _opts = {
					url: vipUrl + "/algorithm/snapshotPush/statisticsTypeNum",
					type:"POST"
				};
				let _data = JSON.stringify({
					users: (_name?[_name]:shipList.map(item => item.en_name)),
					enddate: _this.queryParams.searhDate[1],
					startdate: _this.queryParams.searhDate[0]
				});
				let _hea  = {
					'Content-Type': 'application/json;charset=utf-8',
				};
				postAxios(_opts, _data, _hea).then((res) => {
					let warmByShipTable = [];
					let _behavior = 0, _article = 0;
					let _wramCount = {
						lgjc: 0,
						sjjc: 0,
						xyjc: 0,
						pljc: 0,
						lwjc: 0,
						xjjc: 0,
						zdjc: 0,
						aqjc: 0
					};
					let _objs = (_name?res.data.filter(istem => istem.user == _name):res.data);
					_objs.forEach((item,index) => {
						let _obj = item.rows;
						let _count = 0;
						let _names = shipList.filter(istem => istem.en_name == item.user)[0];
						for(let key in _obj){
							_count += parseFloat(_obj[key]);
							if(key == "tkjc" || key == "gzfjc"){
								_article += parseFloat(_obj[key]);
								_wramCount["aqjc"] += parseFloat(_obj[key]);
							}else{
								_behavior += parseFloat(_obj[key]);
								if(key == "ddhjc" || key == "wsjjc"){
									_wramCount["sjjc"] += parseFloat(_obj[key]);
								}else if(key == "lgjc"){
									_wramCount["lgjc"] += parseFloat(_obj[key]);
								}else if(key == "xyjc"){
									_wramCount["xyjc"] += parseFloat(_obj[key]);
								}else if(key == "sjjc" || key == "dksjc"){
									_wramCount["pljc"] += parseFloat(_obj[key]);
								}else if(key == "lwjc"){
									_wramCount["lwjc"] += parseFloat(_obj[key]);
								}else if(key == "xjjc"){
									_wramCount["lxjj"] += parseFloat(_obj[key]);
								}else if(key == "zdjc"){
									_wramCount["zdjc"] += parseFloat(_obj[key]);
								}
							}
						}
						warmByShipTable.push({
							total: _count,
							enName: item.user,
							shipName: _names["dev_name"]
						});
					});
					let warmTypeData = {
						sign: 'ring',
						data: [{ value: _behavior, name: '行为检测' },
							   { value: _article, name: '物品检测' }]
					};
					_this.wramCount = _wramCount;
					if(_name == undefined){
						let sortObj = warmByShipTable.sort(function(a,b){ return a.total - b.total });
						let fifObj = sortObj.slice(0,5);
						let warmByShipData = {
							xAxis: fifObj.map(item => item.shipName),
							data: fifObj.map(item => item.total),
						};
						warmByShipChart.setOption(_this.periodOption(warmByShipData));
						_this.warmData = warmByShipTable.sort(function(a,b){ return b.total - a.total });
					}
					var _wramTxt = [{
						count: _wramCount["lgjc"],
						name: "离岗"},{
						count: _wramCount["sjjc"],
						name: "手机"},{
						count: _wramCount["xyjc"],
						name: "抽烟"},{
						count: _wramCount["pljc"],
						name: "疲劳"},{
						count: _wramCount["lwjc"],
						name: "未瞭望"},{
						count: _wramCount["xyjc"],
						name: "巡检"},{
						count: _wramCount["zdjc"],
						name: "遮挡"},{
						count: _wramCount["aqjc"],
						name: "安全穿戴"
					}];
					let typeObj = _wramTxt.sort(function(a,b){ return a.count - b.count });
					let wramTypeRankData = {
						xAxis: typeObj.map(item => item.name),
						data: typeObj.map(item => item.count)
					};
					warmTypeChart.setOption(_this.typeOption(warmTypeData));
					wramTypeRankChart.setOption(_this.periodOption(wramTypeRankData));
					loading.close();
				})
			},200)
		},
		periodOption(_data){
			let option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow' 
					}
				},
				grid: {
					top: '0%',
					left: '0%',
					right: '5%',
					bottom: '-7%',
					containLabel: true
				},
				xAxis: {
				    type: 'value',
					boundaryGap: [0, 0.01],
					show:false
				},
				yAxis: {
				    type: 'category',
				    data: _data.xAxis,
					axisLine: {
						show: false,
					},
					axisLabel: {
						rotate : 0,
						color: "#cfcfcf",
					},
					splitLine: {
						show: false,
						
					}
				},
				series: [{
					data: _data.data,
					name:  '实时数据',
					type: 'bar',
					barWidth: '14',
					itemStyle: {
						color:{
							type: 'linear',
							x: 0,
							y: 0,
							x2: 1,
							y2: 1,
							colorStops: [{
								offset: 0, color: '#C2BF55'
							}, {
								offset: 1, color: '#C26F55'
							}],
							global: false 
						},
						barBorderRadius:[7, 7, 7, 7]
					},
					label: {
						show: true,
						position: 'right',
						color:"#00aaff"
					}
				}]
			};
			return option;
		},
		typeOption(_data){
			let option = {
				tooltip: {
					trigger: "item",
					formatter: "{a} <br/>{b} : {c} 个({d}%)"
				},
				legend: {
					top: "bottom",
					textStyle: {
						color: "#ddd"
					}
				},
				series: [{
					name: "告警类型占比",
					type: "pie",
					radius: '50%',
					center: ["50%", "40%"],
					itemStyle: {
						label: {
							formatter: '{d}%'
						}
					},
					data: _data.data,
					animationEasing: "cubicInOut",
					animationDuration: 1000
				}]
			}
			return option;
		},
		lineOption(_data){
			let option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						crossStyle: {
							color: '#999'
						}
					}
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					axisLabel: {
						fontSize: 12,
						color: "#cfcfcf"
					},
					data: _data.xAxis
				},
				grid: {
					top: '6%',
					left: '1%',
					right: '4%',
					bottom: '1%',
					containLabel: true
				},
				yAxis: {
					type: 'value',
					splitNumber: 3,
					axisLabel: {
						fontSize: 12,
						color: "#cfcfcf",
						showMaxLabel: true
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: '#616161',
						}
					}
				},
				series: [{
					type: 'line',
					smooth: 0.4,
					symbol: 'circle',
					areaStyle: {
						color: "#C2BF55",
						opacity:1
					},
					itemStyle: {
						normal: {
							color: '#218066', 
							lineStyle: {
								color: '#218066' 
							}
						}
					},
					data: _data.data
				}]
			}
			return option;
		},
		
		handleCurrentChange(val){
			_this.getNumber(val.enName);
			_this.getLineData(val.enName);
		},
		resetQuery(){
			_this.getNumber();
			_this.getLineData();
		},
		// 获取近七天的时间
		getDateStr() {
		   var base = new Date().getTime();
		   var oneDay = 24 * 3600 * 1000;
		   var date = [];
		   var data = [Math.random() * 300];
		   var time = new Date(base);
		   date.push(parseTime(time, `{y}-{m}-{d}`));
		   for (var i = 1; i <7; i++) {
			   var now = new Date(base -= oneDay);
			   date.push(parseTime(now, `{y}-{m}-{d}`));
			   data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
		   }
		   var newdate = date.reverse()
		   return newdate;
		}
	}
})