123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395 |
- 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;
- }
- }
- })
|