<template>
  <div class="video111">
    <el-container>
      <el-container style="display:flex;justify-content: space-between;">
        <el-aside width="12vw" style="height: 89vh;margin-top: 5.5vh;z-index: 3;">
          <el-input placeholder="请输入车牌号" prefix-icon="el-icon-search" v-model="searchCarText" @keyup.enter.native="searchCarFn"></el-input>
          <el-tree
            :data="videoData"
            :props="defaultProps"
            @node-click="handleNodeClick"
            accordion
          >
            <div slot-scope="{ node }">
              <span>
                <i class="el-icon-video-camera-solid"> {{ node.label }}</i>
              </span>
            </div>
          </el-tree>
        </el-aside>

        <div v-if="noPtz" class="noPtzVideo1">
          <el-button class="noPtzCloseStyle" type="danger" icon="el-icon-close" @click="noPtzCloseFn()" size="mini">关闭</el-button>
          <iframe :src="iframeSrc" class="iframeSingle"></iframe>
        </div>

        <div class="aiAnalysisViews">
          <div class="aiAnalysisViews_Title">智能AI分析</div>
          <div style="margin:1vh 0px 0px 0vw;">
            <el-radio-group v-model="aiTabPosition" @change="aiTabPositionFn">
              <el-radio-button label="今天">今天</el-radio-button>
              <el-radio-button label="近7天">近7天</el-radio-button>
              <el-radio-button label="近30天">近30天</el-radio-button>
            </el-radio-group>
          </div>
          <div class="aiAnalysisViews_1">
            <span>AI报警总数：{{alarmData.total}}</span><span style="margin-left:30px;">处理数：{{alarmData.handle}}</span>
          </div>
          <div class="aiAnalysisViews_1">处理率：{{alarmData.handle == 0 ? 0 : parseFloat(alarmData.handle / alarmData.total * 100).toFixed(2)}}%</div>
          <div id="echarts1" class="echarts1"></div>
          <div class="aiAnalysisViews_1">报警车辆排行榜</div>
          <div id="echarts2" class="echarts2" style="margin-top:1vh"></div>
          <div class="aiAnalysisViews_1">报警车辆信息</div>
          <div @mouseout='mouseoutTable' @mouseover='mouseoverTable'>
            <el-table :data="aiAnalysisTableData" border style="width: 98%" height="24.5vh">
              <el-table-column prop="vehiIdno" label="车牌号" align="center"></el-table-column>
              <el-table-column prop="alarmTypeText" label="报警类型" align="center"></el-table-column>
              <el-table-column prop="fileTimeStr" label="报警时间" align="center"></el-table-column>
              <el-table-column label="查看" align="center">
                <template slot-scope="scope">
                  <el-image style="width: 70px; height: 50px" :src="scope.row.downloadUrl" :preview-src-list="[scope.row.downloadUrl]"></el-image>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

      </el-container>
    </el-container>
  </div>
</template>

<script>
import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
import * as echarts from 'echarts';
import axios from 'axios'
import moment from 'moment';

export default {
  data() {
    return {
      imgSrcStart:process.env.VUE_APP_LOCAL_API2,
      iframeSrc:'',
      defaultIframeSrc:'http://oa.gemho.cn:8088/808gps/open/player/video.html?lang=zh&channel=9&account=admin&password=admin&vehiIdno=',
      aiAnalysisTableData:[],
      videoData: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      noPtz:false,
      aiTabPosition:'今天',
      echarts1Data:[{ value: 0, name: '接打电话' }, { value: 0, name: '分神驾驶' }, { value: 0, name: '前向碰撞' }, { value: 0, name: '疲劳驾驶' }, { value: 0, name: '接近报警' }],
      echarts2Data:{
        name:[],
        dianhua:[],
        jiashi:[],
        pengzhuang:[],
        pilao:[],
        jiejin:[],
      },
      alarmData:{
        total:0,
        handle:0,
      },
      //所有车的信息
      allCarData:[],
      allCarDataText:'',
      searchCarText:'',
      //会话号
      jsession:'',
      tableTimer:null,
    };
  },
  mounted() {
    let that = this;
    this.getCode();
    HttpReq.truckDispatching.carMonitoringCarsQuery({size: 9999}).then((res) => {
      let arr1 = [];
      let text1 = '';
      res.content.forEach((item,index)=>{
        text1 = text1 + item.carnumber + ',';
        arr1.push(item.carnumber);
      })
      text1 = text1.substring(0, text1.length - 1);  
      this.allCarData = arr1;
      this.allCarDataText = text1;
      //获取会话号
      axios.get('/jiankong/StandardApiAction_login.action', {
        params: {
          account:'admin',
          password:'admin'
        }
      }).then(function (response) {
        that.jsession = response.data.jsession;
        that.aiTabPositionFn();
      })
    })
    this.mouseoutTable();
  },
  methods: {
    getCode() {
      //分区数据
      HttpReq.truckDispatching.carMonitoringFleetQuery({size: 999}).then((res) => {
        let data1 = [];
        res.content.forEach((item) => {
          item.label = item.name;
          data1.push(item);
        });
        if (res != "") {
          //总摄像头数据
          HttpReq.truckDispatching.carMonitoringCarsQuery({size: 999}).then((res) => {
            let fenquName = [];
            res.content.forEach((item,index) => {
              item.ref = "video" + index;
              item.label = item.carnumber;
              fenquName.push(item);
            });
            data1.forEach((item) => {
              item.children = [];
              fenquName.forEach((itemSon,index)=>{
                if(item.id == itemSon.motorcadeId){
                  item.children.push(itemSon);
                }
              })
            });
            this.videoData = data1;
          })
        }
			})
    },
    handleNodeClick(data) {
      if (data.children) {
        return
      } else {
        this.iframeSrc = this.defaultIframeSrc + data.carnumber;
        this.noPtz = true;
      }
    },
    aiTabPositionFn(){
      let that = this;
      that.alarmData.total = 0;
      that.alarmData.handle = 0;
      that.echarts1Data = [{ value: 0, name: '接打电话' }, { value: 0, name: '分神驾驶' }, { value: 0, name: '前向碰撞' }, { value: 0, name: '疲劳驾驶' }, { value: 0, name: '接近报警' }];
      that.echarts2Data.name = [];
      that.echarts2Data.dianhua = [];
      that.echarts2Data.jiashi = [];
      that.echarts2Data.pengzhuang = [];
      that.echarts2Data.pilao = [];
      that.echarts2Data.jiejin = [];
      that.aiAnalysisTableData = [];
      if(this.aiTabPosition == '今天'){
        let start = this.currentTime1(new Date(new Date(new Date().toLocaleDateString()).getTime()));
        let end = this.currentTime1(new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1));
        //报警列表
        let allAlarmData1 = [];
        this.allCarData.forEach((item1,index1)=>{
          //获取每辆车的设备号
          axios.get('/jiankong/StandardApiAction_getDeviceByVehicle.action', {
            params: {
              jsession:that.jsession,
              vehiIdno:item1
            }
          }).then(function (response1) {
            if(response1.data.devices.length != 0){
              //有设备号的车获取报警列表
              axios.get('/jiankong/StandardApiAction_queryPhoto.action', {
                params: {
                  jsession:that.jsession,
                  devIdno:response1.data.devices[0].did,
                  alarmType:'620,621,624,625,400,172,190,430,431,432,433',
                  begintime:start,
                  endtime:end,
                  currentPage:0,
                  pageRecords:9999,
                }
              }).then(function (response2) {
                if(response2.data.infos){
                  response2.data.infos.forEach((item2,index2)=>{
                    if(item2.alarmType == 620){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '接打电话';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 621){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '接打电话';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 624){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '分神驾驶';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 625){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '分神驾驶';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 400){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '前向碰撞';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 172){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '疲劳驾驶';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 190){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '疲劳驾驶';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 430){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '接近报警';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 431){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '接近报警';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 432){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '接近报警';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 433){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '接近报警';
                      allAlarmData1.push(obj1);
                    }
                  })
                  that.aiAnalysisTableData = allAlarmData1;
                }
              })
            }
          })
        })

        //报警echarts
        axios.get('/jiankong/StandardApiAction_queryAlarmDetail.action', {
          params: {
            jsession:that.jsession,
            vehiIdno:that.allCarDataText,
            begintime:start,
            endtime:end,
            armType:'620,621,624,625,400,172,190,430,431,432,433',
            currentPage:0,
            pageRecords:9999,
          }
        }).then(function (response1) {
          if(response1.data.alarms){
            let arr1 = [];
            let echartsName1 = [];
            //报警数量
            let alarmHandleNum = 0;
            response1.data.alarms.forEach((item1,index1)=>{
              if(item1.atp == 620){
                let obj1 = {...item1};
                obj1.alarmTypeText = '接打电话';
                arr1.push(obj1);
              }else if(item1.atp == 621){
                let obj1 = {...item1};
                obj1.alarmTypeText = '接打电话';
                arr1.push(obj1);
              }else if(item1.atp == 624){
                let obj1 = {...item1};
                obj1.alarmTypeText = '分神驾驶';
                arr1.push(obj1);
              }else if(item1.atp == 625){
                let obj1 = {...item1};
                obj1.alarmTypeText = '分神驾驶';
                arr1.push(obj1);
              }else if(item1.atp == 400){
                let obj1 = {...item1};
                obj1.alarmTypeText = '前向碰撞';
                arr1.push(obj1);
              }else if(item1.atp == 172){
                let obj1 = {...item1};
                obj1.alarmTypeText = '疲劳驾驶';
                arr1.push(obj1);
              }else if(item1.atp == 190){
                let obj1 = {...item1};
                obj1.alarmTypeText = '疲劳驾驶';
                arr1.push(obj1);
              }else if(item1.atp == 430){
                let obj1 = {...item1};
                obj1.alarmTypeText = '接近报警';
                arr1.push(obj1);
              }else if(item1.atp == 430){
                let obj1 = {...item1};
                obj1.alarmTypeText = '接近报警';
                arr1.push(obj1);
              }else if(item1.atp == 430){
                let obj1 = {...item1};
                obj1.alarmTypeText = '接近报警';
                arr1.push(obj1);
              }else if(item1.atp == 430){
                let obj1 = {...item1};
                obj1.alarmTypeText = '接近报警';
                arr1.push(obj1);
              }
            })
            that.alarmData.total = arr1.length;
            arr1.forEach((item2,index2)=>{
              echartsName1.push(item2.vid);
              if(item2.hd != 0){
                alarmHandleNum++;
              }
            })
            that.alarmData.handle = alarmHandleNum;
            //圆角环形图
            let echarts1Data1 = [{ value: 0, name: '接打电话' }, { value: 0, name: '分神驾驶' }, { value: 0, name: '前向碰撞' }, { value: 0, name: '疲劳驾驶' }, { value: 0, name: '接近报警' }];
            let num1 = 0;
            let num2 = 0;
            let num3 = 0;
            let num4 = 0;
            let num5 = 0;
            arr1.forEach((item3,index3)=>{
              if(item3.alarmTypeText == '接打电话'){
                num1++;
              }else if(item3.alarmTypeText == '分神驾驶'){
                num2++;
              }else if(item3.alarmTypeText == '前向碰撞'){
                num3++;
              }else if(item3.alarmTypeText == '疲劳驾驶'){
                num4++;
              }else if(item3.alarmTypeText == '接近报警'){
                num5++;
              }
            })
            echarts1Data1[0].value = num1;
            echarts1Data1[1].value = num2;
            echarts1Data1[2].value = num3;
            echarts1Data1[3].value = num4;
            echarts1Data1[4].value = num5;
            that.echarts1Data = echarts1Data1;
            that.echarts1Fn();
            //报警车辆排行榜
            let set1 = new Set();
            echartsName1.forEach((item)=>set1.add(item))
            let a1 = Array.from(set1);
            that.echarts2Data.name = a1;
            let aa1 = [];
            let aa2 = [];
            let aa3 = [];
            let aa4 = [];
            let aa5 = [];
            a1.forEach((itema,indexa)=>{
              aa1.push(0);
              aa2.push(0);
              aa3.push(0);
              aa4.push(0);
              aa5.push(0);
            })
            arr1.forEach((item4,index4)=>{
              a1.forEach((item5,index5)=>{
                if(item4.vid == item5 && item4.alarmTypeText == '接打电话'){
                  aa1[index5] = aa1[index5] + 1;
                }else if(item4.vid == item5 && item4.alarmTypeText == '分神驾驶'){
                  aa2[index5] = aa2[index5] + 1;
                }else if(item4.vid == item5 && item4.alarmTypeText == '前向碰撞'){
                  aa3[index5] = aa3[index5] + 1;
                }else if(item4.vid == item5 && item4.alarmTypeText == '疲劳驾驶'){
                  aa4[index5] = aa4[index5] + 1;
                }else if(item4.vid == item5 && item4.alarmTypeText == '接近报警'){
                  aa5[index5] = aa5[index5] + 1;
                }
              })
            })
            that.echarts2Data.dianhua = aa1;
            that.echarts2Data.jiashi = aa2;
            that.echarts2Data.pengzhuang = aa3;
            that.echarts2Data.pilao = aa4;
            that.echarts2Data.jiejin = aa5;
            that.echarts2Fn();
          }else{
            that.echarts1Fn();
            that.echarts2Fn();
          }
        })

      }else if(this.aiTabPosition == '近7天'){
        let fmt = moment().subtract(7, 'days').format('YYYY-MM-DD');
        let start = this.currentTime1(new Date(new Date(new Date(fmt).toLocaleDateString()).getTime()));
        let end = this.currentTime1(new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1));
        //报警列表
        let allAlarmData1 = [];
        this.allCarData.forEach((item1,index1)=>{
          //获取每辆车的设备号
          axios.get('/jiankong/StandardApiAction_getDeviceByVehicle.action', {
            params: {
              jsession:that.jsession,
              vehiIdno:item1
            }
          }).then(function (response1) {
            if(response1.data.devices.length != 0){
              //有设备号的车获取报警列表
              axios.get('/jiankong/StandardApiAction_queryPhoto.action', {
                params: {
                  jsession:that.jsession,
                  devIdno:response1.data.devices[0].did,
                  alarmType:'620,621,624,625,400,172,190,430,431,432,433',
                  begintime:start,
                  endtime:end,
                  currentPage:0,
                  pageRecords:9999,
                }
              }).then(function (response2) {
                if(response2.data.infos){
                  response2.data.infos.forEach((item2,index2)=>{
                    if(item2.alarmType == 620){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '接打电话';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 621){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '接打电话';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 624){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '分神驾驶';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 625){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '分神驾驶';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 400){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '前向碰撞';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 172){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '疲劳驾驶';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 190){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '疲劳驾驶';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 430){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '接近报警';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 431){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '接近报警';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 432){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '接近报警';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 433){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '接近报警';
                      allAlarmData1.push(obj1);
                    }
                  })
                  that.aiAnalysisTableData = allAlarmData1;
                }
              })
            }
          })
        })

        //报警echarts
        axios.get('/jiankong/StandardApiAction_queryAlarmDetail.action', {
          params: {
            jsession:that.jsession,
            vehiIdno:that.allCarDataText,
            begintime:start,
            endtime:end,
            armType:'620,621,624,625,400,172,190,430,431,432,433',
            currentPage:0,
            pageRecords:9999,
          }
        }).then(function (response1) {
          if(response1.data.alarms){
            let arr1 = [];
            let echartsName1 = [];
            //报警数量
            let alarmHandleNum = 0;
            response1.data.alarms.forEach((item1,index1)=>{
              if(item1.atp == 620){
                let obj1 = {...item1};
                obj1.alarmTypeText = '接打电话';
                arr1.push(obj1);
              }else if(item1.atp == 621){
                let obj1 = {...item1};
                obj1.alarmTypeText = '接打电话';
                arr1.push(obj1);
              }else if(item1.atp == 624){
                let obj1 = {...item1};
                obj1.alarmTypeText = '分神驾驶';
                arr1.push(obj1);
              }else if(item1.atp == 625){
                let obj1 = {...item1};
                obj1.alarmTypeText = '分神驾驶';
                arr1.push(obj1);
              }else if(item1.atp == 400){
                let obj1 = {...item1};
                obj1.alarmTypeText = '前向碰撞';
                arr1.push(obj1);
              }else if(item1.atp == 172){
                let obj1 = {...item1};
                obj1.alarmTypeText = '疲劳驾驶';
                arr1.push(obj1);
              }else if(item1.atp == 190){
                let obj1 = {...item1};
                obj1.alarmTypeText = '疲劳驾驶';
                arr1.push(obj1);
              }else if(item1.atp == 430){
                let obj1 = {...item1};
                obj1.alarmTypeText = '接近报警';
                arr1.push(obj1);
              }else if(item1.atp == 430){
                let obj1 = {...item1};
                obj1.alarmTypeText = '接近报警';
                arr1.push(obj1);
              }else if(item1.atp == 430){
                let obj1 = {...item1};
                obj1.alarmTypeText = '接近报警';
                arr1.push(obj1);
              }else if(item1.atp == 430){
                let obj1 = {...item1};
                obj1.alarmTypeText = '接近报警';
                arr1.push(obj1);
              }
            })
            that.alarmData.total = arr1.length;
            arr1.forEach((item2,index2)=>{
              echartsName1.push(item2.vid);
              if(item2.hd != 0){
                alarmHandleNum++;
              }
            })
            that.alarmData.handle = alarmHandleNum;
            //圆角环形图
            let echarts1Data1 = [{ value: 0, name: '接打电话' }, { value: 0, name: '分神驾驶' }, { value: 0, name: '前向碰撞' }, { value: 0, name: '疲劳驾驶' }, { value: 0, name: '接近报警' }];
            let num1 = 0;
            let num2 = 0;
            let num3 = 0;
            let num4 = 0;
            let num5 = 0;
            arr1.forEach((item3,index3)=>{
              if(item3.alarmTypeText == '接打电话'){
                num1++;
              }else if(item3.alarmTypeText == '分神驾驶'){
                num2++;
              }else if(item3.alarmTypeText == '前向碰撞'){
                num3++;
              }else if(item3.alarmTypeText == '疲劳驾驶'){
                num4++;
              }else if(item3.alarmTypeText == '接近报警'){
                num5++;
              }
            })
            echarts1Data1[0].value = num1;
            echarts1Data1[1].value = num2;
            echarts1Data1[2].value = num3;
            echarts1Data1[3].value = num4;
            echarts1Data1[4].value = num5;
            that.echarts1Data = echarts1Data1;
            that.echarts1Fn();
            //报警车辆排行榜
            let set1 = new Set();
            echartsName1.forEach((item)=>set1.add(item))
            let a1 = Array.from(set1);
            that.echarts2Data.name = a1;
            let aa1 = [];
            let aa2 = [];
            let aa3 = [];
            let aa4 = [];
            let aa5 = [];
            a1.forEach((itema,indexa)=>{
              aa1.push(0);
              aa2.push(0);
              aa3.push(0);
              aa4.push(0);
              aa5.push(0);
            })
            arr1.forEach((item4,index4)=>{
              a1.forEach((item5,index5)=>{
                if(item4.vid == item5 && item4.alarmTypeText == '接打电话'){
                  aa1[index5] = aa1[index5] + 1;
                }else if(item4.vid == item5 && item4.alarmTypeText == '分神驾驶'){
                  aa2[index5] = aa2[index5] + 1;
                }else if(item4.vid == item5 && item4.alarmTypeText == '前向碰撞'){
                  aa3[index5] = aa3[index5] + 1;
                }else if(item4.vid == item5 && item4.alarmTypeText == '疲劳驾驶'){
                  aa4[index5] = aa4[index5] + 1;
                }else if(item4.vid == item5 && item4.alarmTypeText == '接近报警'){
                  aa5[index5] = aa5[index5] + 1;
                }
              })
            })
            that.echarts2Data.dianhua = aa1;
            that.echarts2Data.jiashi = aa2;
            that.echarts2Data.pengzhuang = aa3;
            that.echarts2Data.pilao = aa4;
            that.echarts2Data.jiejin = aa5;
            that.echarts2Fn();
          }else{
            that.echarts1Fn();
            that.echarts2Fn();
          }
        })

      }else if(this.aiTabPosition == '近30天'){
        let fmt = moment().subtract(30, 'days').format('YYYY-MM-DD');
        let start = this.currentTime1(new Date(new Date(new Date(fmt).toLocaleDateString()).getTime()));
        let end = this.currentTime1(new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1));
        //报警列表
        let allAlarmData1 = [];
        this.allCarData.forEach((item1,index1)=>{
          //获取每辆车的设备号
          axios.get('/jiankong/StandardApiAction_getDeviceByVehicle.action', {
            params: {
              jsession:that.jsession,
              vehiIdno:item1
            }
          }).then(function (response1) {
            if(response1.data.devices.length != 0){
              //有设备号的车获取报警列表
              axios.get('/jiankong/StandardApiAction_queryPhoto.action', {
                params: {
                  jsession:that.jsession,
                  devIdno:response1.data.devices[0].did,
                  alarmType:'620,621,624,625,400,172,190,430,431,432,433',
                  begintime:start,
                  endtime:end,
                  currentPage:0,
                  pageRecords:9999,
                }
              }).then(function (response2) {
                if(response2.data.infos){
                  response2.data.infos.forEach((item2,index2)=>{
                    if(item2.alarmType == 620){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '接打电话';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 621){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '接打电话';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 624){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '分神驾驶';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 625){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '分神驾驶';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 400){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '前向碰撞';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 172){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '疲劳驾驶';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 190){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '疲劳驾驶';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 430){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '接近报警';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 431){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '接近报警';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 432){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '接近报警';
                      allAlarmData1.push(obj1);
                    }else if(item2.alarmType == 433){
                      let obj1 = {...item2};
                      obj1.alarmTypeText = '接近报警';
                      allAlarmData1.push(obj1);
                    }
                  })
                  that.aiAnalysisTableData = allAlarmData1;
                }
              })
            }
          })
        })

        //报警echarts
        axios.get('/jiankong/StandardApiAction_queryAlarmDetail.action', {
          params: {
            jsession:that.jsession,
            vehiIdno:that.allCarDataText,
            begintime:start,
            endtime:end,
            armType:'620,621,624,625,400,172,190,430,431,432,433',
            currentPage:0,
            pageRecords:9999,
          }
        }).then(function (response1) {
          if(response1.data.alarms){
            let arr1 = [];
            let echartsName1 = [];
            //报警数量
            let alarmHandleNum = 0;
            response1.data.alarms.forEach((item1,index1)=>{
              if(item1.atp == 620){
                let obj1 = {...item1};
                obj1.alarmTypeText = '接打电话';
                arr1.push(obj1);
              }else if(item1.atp == 621){
                let obj1 = {...item1};
                obj1.alarmTypeText = '接打电话';
                arr1.push(obj1);
              }else if(item1.atp == 624){
                let obj1 = {...item1};
                obj1.alarmTypeText = '分神驾驶';
                arr1.push(obj1);
              }else if(item1.atp == 625){
                let obj1 = {...item1};
                obj1.alarmTypeText = '分神驾驶';
                arr1.push(obj1);
              }else if(item1.atp == 400){
                let obj1 = {...item1};
                obj1.alarmTypeText = '前向碰撞';
                arr1.push(obj1);
              }else if(item1.atp == 172){
                let obj1 = {...item1};
                obj1.alarmTypeText = '疲劳驾驶';
                arr1.push(obj1);
              }else if(item1.atp == 190){
                let obj1 = {...item1};
                obj1.alarmTypeText = '疲劳驾驶';
                arr1.push(obj1);
              }else if(item1.atp == 430){
                let obj1 = {...item1};
                obj1.alarmTypeText = '接近报警';
                arr1.push(obj1);
              }else if(item1.atp == 430){
                let obj1 = {...item1};
                obj1.alarmTypeText = '接近报警';
                arr1.push(obj1);
              }else if(item1.atp == 430){
                let obj1 = {...item1};
                obj1.alarmTypeText = '接近报警';
                arr1.push(obj1);
              }else if(item1.atp == 430){
                let obj1 = {...item1};
                obj1.alarmTypeText = '接近报警';
                arr1.push(obj1);
              }
            })
            that.alarmData.total = arr1.length;
            arr1.forEach((item2,index2)=>{
              echartsName1.push(item2.vid);
              if(item2.hd != 0){
                alarmHandleNum++;
              }
            })
            that.alarmData.handle = alarmHandleNum;
            //圆角环形图
            let echarts1Data1 = [{ value: 0, name: '接打电话' }, { value: 0, name: '分神驾驶' }, { value: 0, name: '前向碰撞' }, { value: 0, name: '疲劳驾驶' }, { value: 0, name: '接近报警' }];
            let num1 = 0;
            let num2 = 0;
            let num3 = 0;
            let num4 = 0;
            let num5 = 0;
            arr1.forEach((item3,index3)=>{
              if(item3.alarmTypeText == '接打电话'){
                num1++;
              }else if(item3.alarmTypeText == '分神驾驶'){
                num2++;
              }else if(item3.alarmTypeText == '前向碰撞'){
                num3++;
              }else if(item3.alarmTypeText == '疲劳驾驶'){
                num4++;
              }else if(item3.alarmTypeText == '接近报警'){
                num5++;
              }
            })
            echarts1Data1[0].value = num1;
            echarts1Data1[1].value = num2;
            echarts1Data1[2].value = num3;
            echarts1Data1[3].value = num4;
            echarts1Data1[4].value = num5;
            that.echarts1Data = echarts1Data1;
            that.echarts1Fn();
            //报警车辆排行榜
            let set1 = new Set();
            echartsName1.forEach((item)=>set1.add(item))
            let a1 = Array.from(set1);
            that.echarts2Data.name = a1;
            let aa1 = [];
            let aa2 = [];
            let aa3 = [];
            let aa4 = [];
            let aa5 = [];
            a1.forEach((itema,indexa)=>{
              aa1.push(0);
              aa2.push(0);
              aa3.push(0);
              aa4.push(0);
              aa5.push(0);
            })
            arr1.forEach((item4,index4)=>{
              a1.forEach((item5,index5)=>{
                if(item4.vid == item5 && item4.alarmTypeText == '接打电话'){
                  aa1[index5] = aa1[index5] + 1;
                }else if(item4.vid == item5 && item4.alarmTypeText == '分神驾驶'){
                  aa2[index5] = aa2[index5] + 1;
                }else if(item4.vid == item5 && item4.alarmTypeText == '前向碰撞'){
                  aa3[index5] = aa3[index5] + 1;
                }else if(item4.vid == item5 && item4.alarmTypeText == '疲劳驾驶'){
                  aa4[index5] = aa4[index5] + 1;
                }else if(item4.vid == item5 && item4.alarmTypeText == '接近报警'){
                  aa5[index5] = aa5[index5] + 1;
                }
              })
            })
            that.echarts2Data.dianhua = aa1;
            that.echarts2Data.jiashi = aa2;
            that.echarts2Data.pengzhuang = aa3;
            that.echarts2Data.pilao = aa4;
            that.echarts2Data.jiejin = aa5;
            that.echarts2Fn();
          }else{
            that.echarts1Fn();
            that.echarts2Fn();
          }
        })

      }
    },
    //饼图1
    echarts1Fn(){
      echarts.init(document.getElementById('echarts1')).dispose();
      var myChart = echarts.init(document.getElementById('echarts1'));
      var option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '1%',
          left: 'center'
        },
        color:['rgb(84,112,198)', 'rgb(145,204,117)','rgb(250,200,88)','rgb(255,150,195)', 'rgb(146,119,255)','rgb(250,200,88)','rgb(84,112,198)', 'rgb(145,204,117)','rgb(250,200,88)','rgb(84,112,198)', 'rgb(145,204,117)','rgb(250,200,88)','rgb(84,112,198)', 'rgb(145,204,117)','rgb(250,200,88)',],
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius:20,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '35',
                fontWeight: 'bold',
                color:'black',
              }
            },
            labelLine: {
              show: false
            },
            data: this.echarts1Data,
          }
        ]
      };
      option && myChart.setOption(option);
    },
    //柱状图2
    echarts2Fn(){
      echarts.init(document.getElementById('echarts2')).dispose();
      var myChart = echarts.init(document.getElementById('echarts2'));
      var option = {
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'shadow' 
              }
          },
          legend: {
              textStyle:{
                  color: 'black',
                  fontSize:12,
              },
          },
          grid: {
              top: '18%',
              left: '1%',
              right: '5%',
              bottom: '3%',
              containLabel: true
          },
          yAxis: {
              type: 'category',
              data: this.echarts2Data.name,
              axisLabel: {
                  show: true,
                  textStyle: {
                      color: 'black',
                      fontSize:14,
                  }
              },
              axisLine: {
                  lineStyle: {
                      color: 'black',
                      width: 1
                  }
              },
          },
          xAxis: {
              type: 'value',
              axisLabel: {
                  show: true,
                  textStyle: {
                      color: 'black',
                      fontSize:14,
                  }
              },
              axisLine: {
                  lineStyle: {
                      color: 'black',
                      width: 0
                  }
              },
          },
          series: [
              {
                  name: '接打电话',
                  type: 'bar',
                  stack: 'total',
                  label: {
                      show: true
                  },
                  data: this.echarts2Data.dianhua,
                  barWidth: 20,
                  itemStyle: {
                    color: 'rgb(84,112,198)'
                  },
              },
              {
                  name: '分神驾驶',
                  type: 'bar',
                  stack: 'total',
                  label: {
                      show: true
                  },
                  data: this.echarts2Data.jiashi,
                  barWidth: 20,
                  itemStyle: {
                    color: 'rgb(145,204,117)'
                  },
              },
              {
                  name: '前向碰撞',
                  type: 'bar',
                  stack: 'total',
                  label: {
                      show: true
                  },
                  data: this.echarts2Data.pengzhuang,
                  barWidth: 20,
                  itemStyle: {
                    color: 'rgb(250,200,88)'
                  },
              },
              {
                  name: '疲劳驾驶',
                  type: 'bar',
                  stack: 'total',
                  label: {
                      show: true
                  },
                  data: this.echarts2Data.pilao,
                  barWidth: 20,
                  itemStyle: {
                    color: 'rgb(255,150,195)'
                  },
              },
              {
                  name: '接近报警',
                  type: 'bar',
                  stack: 'total',
                  label: {
                      show: true
                  },
                  data: this.echarts2Data.jiejin,
                  barWidth: 20,
                  itemStyle: {
                    color: 'rgb(146,119,255)'
                  },
              },
          ]
      };
      option && myChart.setOption(option);
    },
    noPtzCloseFn(){
      this.noPtz = false;
    },
    //转换时间格式(yyyy-mm-dd hh:mm:ss)
    currentTime1(time){
      var date = new Date(time);
      var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
      var month = date.getMonth() + 1;      //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
      var day = date.getDate();             //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
      var hours = date.getHours();          //小时 ,返回 Date 对象的小时 (0 ~ 23)
      var minutes = date.getMinutes();      //分钟 ,返回 Date 对象的分钟 (0 ~ 59)
      var seconds = date.getSeconds();      //秒 ,返回 Date 对象的秒数 (0 ~ 59)   
      //修改月份格式
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      //修改日期格式
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }
      //修改小时格式
      if (hours >= 0 && hours <= 9) {
        hours = "0" + hours;
      }
      //修改分钟格式
      if (minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
      }
      //修改秒格式
      if (seconds >= 0 && seconds <= 9) {
        seconds = "0" + seconds;
      }
      let currentFormatDate = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
      return currentFormatDate;
    },
    changeTime1(row){
      return this.currentTime1(row.stm);
    },
    searchCarFn(){
      HttpReq.truckDispatching.carMonitoringCarsQuery({carnumber:this.searchCarText}).then((res) => {
        if(res.totalElements == 0){
          this.$notify({
						title: '该车无视频监控！',
            type: 'warning',
            duration: 2500
          });
        }else{
          this.noPtz = true;
          this.iframeSrc = this.defaultIframeSrc + res.content[0].carnumber;
        }
      })
    },
    //表格自滚动
    mouseoverTable() {
      clearInterval(this.tableTimer)
    },
    mouseoutTable() {
      this.autoScrollTable(false)
    },
    autoScrollTable(init) {
      this.$nextTick(() => {
        const t = 50
        const box = this.$el.querySelector('.el-table__body-wrapper')
        const content = this.$el.querySelector('.el-table__body')
        if (init) box.scrollTop = 0
        this.tableTimer = setInterval(() => {
          this.rollStartTable(box, content)
        }, t)
      })
    },
    rollStartTable(box, content) {
      if (box.scrollTop >= (content.scrollHeight - box.offsetHeight)) {
        box.scrollTop = 0
      } else {
        box.scrollTop++
      }
    }
  },
  //销毁
  beforeDestroy() {
    this.iframeSrc = '';
    this.noPtz = false;
    clearInterval(this.tableTimer);
    this.tableTimer = null;
  }
  
};
</script>
<style>
.el-header,
.el-footer {
  background-color: #7bbfea;
  color: white;
  text-align: center;
  letter-spacing: 10px;
  font-size: 25px !important;
  line-height: 60px;
}
.el-aside::-webkit-scrollbar {
  display: none;
}
.el-aside {
  scrollbar-width: none;
}
.el-aside {
  background-color: #fffef9;
  color: #333;
  text-align: center;
  padding: 0;
  margin-bottom: 0px;
  z-index: 3;
  overflow-y: scroll;
}
.el-tree-node__content {
  height: 55px;
  background-color: #e9eef3;
  width: 228px;
}
.el-tree-node {
  background-color: #e9eef3;
  border: 1px solid #d3d7d4;
}
.el-tree-node__content:hover {
  background-color: white;
}
.video111 .el-input--small .el-input__inner{
  background-color: #021445;
  color: #01f5fe;
  border: 2px solid #01f5fe;
  font-size: 15px;
}
.video111 .el-input--small .el-input__inner::placeholder {
  color:  #01f5fe;
}
.video111 .el-input--small .el-input__icon {
  color:  #01f5fe;
}
.noPtzCloseStyle{
  position: absolute;
  top:0.5vh;
  right: 0.5vh;
  font-size: 20px;
  cursor: pointer;
}
.noPtzVideo1{
  width: 68vw;
  height: 94.5vh;
  overflow: hidden;
  background-color: white;
  position: relative;
  z-index: 3;
  border-left: 1px solid gainsboro;
}
.video111 .iframeSingle {
  width: 68vw;
  height: 94.5vh;
}
.aiAnalysisViews{
  width: 20vw;
  height: 94.5vh;
  background-color: white;
  padding: 1vh 0px 0px 1vh;
  box-sizing: border-box;
  border-left: 1px solid gainsboro;
  z-index: 3;
}
.aiAnalysisViews_Title{
  font-size: 24px;
  font-weight: 600;
}
.aiAnalysisViews_1{
  margin-top: 1vh;
  font-size: 18px;
  font-weight: 600;
}
.echarts1{
  width: 99%;
  height: 20vh;
  overflow: hidden;
}
.echarts2{
  width: 99%;
  height: 27vh;
  overflow: hidden;
}
</style>
