<template>
  <div class="video111 videoCars">
    <el-container>
      <el-container style="display:flex;justify-content: space-between;">
        <el-aside width="20vw" style="height: 89vh;margin-top: 5.5vh;z-index: 3;">
          <div class="videoCarsInput">
            <div style="color: #A6F6F9;">选择车牌号：</div>
            <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
          </div>
          <el-tree :data="carListTree" :props="defaultProps" accordion highlight-current
                   :filter-node-method="filterNode" @current-change="handleNodeClick" ref="tree">
            <div slot-scope="{ node }" class="roadClass">{{ node.label }}</div>
          </el-tree>
        </el-aside>

        <DPcomputer17 class="DPcomputer17Class"></DPcomputer17>

        <div v-show="noPtz" class="noPtzVideo1">
          <video id="videoRealtime" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup="{}" style="width: 100%;height: 100%;">
            您的浏览器不支持：HTML5 video.
          </video>
          <el-select v-model="cameraSrc" class="noPtzCameraList" @change="videoPlay()">
            <el-option v-for="item in cameraList" :key="item.id" :label="item.monitorName" :value="item.monitorUrl" style="font-size:16px;font-weight:400"></el-option>
          </el-select>
          <el-button class="noPtzCloseStyle" type="danger" icon="el-icon-close" @click="noPtzCloseFn()" size="mini">关闭</el-button>
        </div>

        <div class="aiAnalysisRightViews">
          <div class="aiAnalysisRightViews_1">
            <!-- 智能AI分析 -->
            <div class="aiAnalysisRightViews_1_title">智能AI分析</div>
            <div class="aiAnalysisRightViews_1_content">
              <div class="aiAnalysisRightViews_1_content_top">
                <div :class="aiTabPosition == '今天' ? 'aiAnalysisRightViews_1_content_topH' : 'aiAnalysisRightViews_1_content_topL'" @click="aiTabPositionFn('今天')">今天</div>
                <div :class="aiTabPosition == '近7天' ? 'aiAnalysisRightViews_1_content_topH' : 'aiAnalysisRightViews_1_content_topL'" @click="aiTabPositionFn('近7天')">近7天</div>
                <div :class="aiTabPosition == '近30天' ? 'aiAnalysisRightViews_1_content_topH' : 'aiAnalysisRightViews_1_content_topL'" @click="aiTabPositionFn('近30天')">近30天</div>
              </div>
              <div class="alarmViewsStyle1">
                <div class="alarmViewsStyle1_left1">
                  <img src="../../assets/images/cutGraph/zhengzaijinxing1.png">
                  <div>
                      <div style="text-align: center;font-size:14px;">AI报警总数</div>
                      <div style="text-align: center;font-size:18px;">{{alarmData.total}}</div>
                  </div>
                </div>
                <div class="alarmViewsStyle1_right1">
                  <img src="../../assets/images/cutGraph/wanchengle1.png">
                  <div>
                      <div style="text-align: center;font-size:14px;">处理数</div>
                      <div style="text-align: center;font-size:18px;">{{alarmData.handle}}</div>
                  </div>
                  <div>
                      <div style="text-align: center;font-size:14px;">处理率</div>
                      <div style="text-align: center;font-size:18px;">{{alarmData.handle == 0 ? 0 : parseFloat(alarmData.handle / alarmData.total * 100).toFixed(2)}}%</div>
                  </div>
                </div>
              </div>
              <div class="echarts1" id="echarts1"></div>
              <div class="echarts1_neiquan">
                <div style="color:white;">总数</div>
                <div style="color:#FDBF46;font-size:24px;">{{alarmData.total}}</div>
              </div>
            </div>
          </div>
          <div class="aiAnalysisRightViews_1">
            <!-- 报警车辆排行榜 -->
            <div class="aiAnalysisRightViews_1_title">报警车辆排行榜</div>
            <div class="aiAnalysisRightViews_1_content">
              <div id="echarts2" class="echarts2" style="margin-top:1vh"></div>
            </div>
          </div>
          <div class="aiAnalysisRightViews_2">
            <!-- 报警车辆信息 -->
            <div class="aiAnalysisRightViews_2_title">报警车辆信息</div>
            <div class="aiAnalysisRightViews_2_content">
              <div class="aiAnalysisRightViews_2_content_rolling">
                <dl>
                    <dt>
                        <div>车牌号</div>
                        <div>报警类型</div>
                        <div>报警时间</div>
                        <div>查看</div>
                    </dt>
                    <dd v-for="(item,index) in aiAnalysisTableData" :key="index">
                        <div>{{item.vehiIdno}}</div>
                        <div>{{item.name}}</div>
                        <div>{{item.fileTime}}</div>
                        <div style="text-decoration:underline;cursor: pointer;" @click="dianjichakan(item)">点击查看</div>
                    </dd>
                </dl>
              </div>
            </div>
          </div>
        </div>

      </el-container>
    </el-container>

    <div class="videoMengCeng" v-if="videoSrcShow">
      <div class="closeVideoDiv" @click="closeVideo"><i class="el-icon-close"></i></div>
      <video :src="videoSrc" autoplay controls height="800px" width="1450px"></video>
    </div>

    <div class="elimageMengCeng" v-if="elimageSrcShow">
      <div class="closeElimageDiv" @click="closeElimage"><i class="el-icon-close"></i></div>
      <el-image style="width: 80vw; height: 85vh" :src="elimageSrc"></el-image>
    </div>

  </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';
import DPcomputer17 from '../../views/MLargeScreen/components/smallComponents/DPcomputer17.vue'
import 'video.js/dist/video-js.css'
import videojs from 'video.js'
import 'videojs-contrib-hls'

export default {
  components:{
    DPcomputer17,
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {
      videoPlayer: null,
      filterText: '',
      carListTree: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      cameraList:[],
      cameraSrc:'',
      videoAlarmAllTimer:null,
      imgSrcStart:process.env.VUE_APP_LOCAL_API2,
      aiAnalysisTableData:[],
      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,
      },
      //视频数据
      videoSrc:'',
			videoSrcShow:false,
      //图片数据
      elimageSrc:'',
			elimageSrcShow:false,

    };
  },
  mounted() {
    this.getCode();
    this.aiTabPositionFn();
    this.videoAlarmAllTimer = setInterval(()=>{
      this.aiTabPositionFn(this.aiTabPosition);
    },10000)
    this.videoPlayer = videojs('videoRealtime', {
      bigPlayButton: false,
      textTrackDisplay: false,
      posterImage: true,
      errorDisplay: false,
      controlBar: true
    }, function () {
      console.log('video ready!')
    })
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    getCode() {
      HttpReq.truckDispatching.jkCarTree().then((res) => {
        if (res.code == 200) {
          this.carListTree = res.data;
        }
      })
    },
    videoPlay(){
      this.videoPlayer.src({src:this.cameraSrc,type:'application/x-mpegURL'});
      this.videoPlayer.play();
    },
    handleNodeClick(data) {
      if (data.children) {
        return
      } else {
        HttpReq.truckDispatching.jkcarMonitorFind({carNumber: data.label}).then((res) => {
          if (res.code == 200) {
            if(res.data && res.data.length){
              this.noPtz = true;
              this.cameraList = res.data;
              this.cameraSrc = this.cameraList[0].monitorUrl;
              this.videoPlay();
            }else{
              this.noPtzCloseFn();
              this.$notify({
                title: '该车无视频监控！',
                type: 'warning',
                duration: 2500
              });
            }
          }
        })
      }
    },
    aiTabPositionFn(text){
      if(text){
        this.aiTabPosition = text;
      }else{
        this.aiTabPosition = '今天';
      }
      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));
        //获取报警信息列表
        HttpReq.truckDispatching.apiCameraUrllistQuery({page:0,size:99999,startTime:start,endTime:end}).then((res1) => {
					if(res1.code == 200){
            this.aiAnalysisTableData = res1.data;
            this.alarmData.total = res1.data.length;
            let handleNum = 0;
            res1.data.forEach((item1,index1)=>{
              if(item1.status == 1){
                handleNum++;
              }
            })
            this.alarmData.handle = handleNum;
            //圆角环形图
            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;
            res1.data.forEach((item3,index3)=>{
              if(item3.name == '接打电话'){
                num1++;
              }else if(item3.name == '分神驾驶'){
                num2++;
              }else if(item3.name == '前向碰撞'){
                num3++;
              }else if(item3.name == '疲劳驾驶'){
                num4++;
              }else if(item3.name == '接近报警'){
                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 echartsName1 = [];
            res1.data.forEach((item2,index2)=>{
              echartsName1.push(item2.vehiIdno);
            })
            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);
            })
            res1.data.forEach((item4,index4)=>{
              a1.forEach((item5,index5)=>{
                if(item4.vehiIdno == item5 && item4.name == '接打电话'){
                  aa1[index5] = aa1[index5] + 1;
                }else if(item4.vehiIdno == item5 && item4.name == '分神驾驶'){
                  aa2[index5] = aa2[index5] + 1;
                }else if(item4.vehiIdno == item5 && item4.name == '前向碰撞'){
                  aa3[index5] = aa3[index5] + 1;
                }else if(item4.vehiIdno == item5 && item4.name == '疲劳驾驶'){
                  aa4[index5] = aa4[index5] + 1;
                }else if(item4.vehiIdno == item5 && item4.name == '接近报警'){
                  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));
        //获取报警信息列表
        HttpReq.truckDispatching.apiCameraUrllistQuery({page:0,size:99999,startTime:start,endTime:end}).then((res1) => {
					if(res1.code == 200){
            this.aiAnalysisTableData = res1.data;
            this.alarmData.total = res1.data.length;
            let handleNum = 0;
            res1.data.forEach((item1,index1)=>{
              if(item1.status == 1){
                handleNum++;
              }
            })
            this.alarmData.handle = handleNum;
            //圆角环形图
            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;
            res1.data.forEach((item3,index3)=>{
              if(item3.name == '接打电话'){
                num1++;
              }else if(item3.name == '分神驾驶'){
                num2++;
              }else if(item3.name == '前向碰撞'){
                num3++;
              }else if(item3.name == '疲劳驾驶'){
                num4++;
              }else if(item3.name == '接近报警'){
                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 echartsName1 = [];
            res1.data.forEach((item2,index2)=>{
              echartsName1.push(item2.vehiIdno);
            })
            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);
            })
            res1.data.forEach((item4,index4)=>{
              a1.forEach((item5,index5)=>{
                if(item4.vehiIdno == item5 && item4.name == '接打电话'){
                  aa1[index5] = aa1[index5] + 1;
                }else if(item4.vehiIdno == item5 && item4.name == '分神驾驶'){
                  aa2[index5] = aa2[index5] + 1;
                }else if(item4.vehiIdno == item5 && item4.name == '前向碰撞'){
                  aa3[index5] = aa3[index5] + 1;
                }else if(item4.vehiIdno == item5 && item4.name == '疲劳驾驶'){
                  aa4[index5] = aa4[index5] + 1;
                }else if(item4.vehiIdno == item5 && item4.name == '接近报警'){
                  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));
        //获取报警信息列表
        HttpReq.truckDispatching.apiCameraUrllistQuery({page:0,size:99999,startTime:start,endTime:end}).then((res1) => {
					if(res1.code == 200){
            this.aiAnalysisTableData = res1.data;
            this.alarmData.total = res1.data.length;
            let handleNum = 0;
            res1.data.forEach((item1,index1)=>{
              if(item1.status == 1){
                handleNum++;
              }
            })
            this.alarmData.handle = handleNum;
            //圆角环形图
            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;
            res1.data.forEach((item3,index3)=>{
              if(item3.name == '接打电话'){
                num1++;
              }else if(item3.name == '分神驾驶'){
                num2++;
              }else if(item3.name == '前向碰撞'){
                num3++;
              }else if(item3.name == '疲劳驾驶'){
                num4++;
              }else if(item3.name == '接近报警'){
                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 echartsName1 = [];
            res1.data.forEach((item2,index2)=>{
              echartsName1.push(item2.vehiIdno);
            })
            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);
            })
            res1.data.forEach((item4,index4)=>{
              a1.forEach((item5,index5)=>{
                if(item4.vehiIdno == item5 && item4.name == '接打电话'){
                  aa1[index5] = aa1[index5] + 1;
                }else if(item4.vehiIdno == item5 && item4.name == '分神驾驶'){
                  aa2[index5] = aa2[index5] + 1;
                }else if(item4.vehiIdno == item5 && item4.name == '前向碰撞'){
                  aa3[index5] = aa3[index5] + 1;
                }else if(item4.vehiIdno == item5 && item4.name == '疲劳驾驶'){
                  aa4[index5] = aa4[index5] + 1;
                }else if(item4.vehiIdno == item5 && item4.name == '接近报警'){
                  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'
        },
        color:['rgb(225,226,58)', 'rgb(44,195,253)','rgb(249,82,43)','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: ['65%', '75%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius:20,
              borderColor: 'rgba(32,42,67,0.95)',
              borderWidth: 2,
            },
            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: 'white',
                  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: 'white',
                      fontSize:14,
                  }
              },
              axisLine: {
                  lineStyle: {
                      color: 'white',
                      width: 1
                  }
              },
          },
          xAxis: {
              type: 'value',
              axisLabel: {
                  show: true,
                  textStyle: {
                      color: 'white',
                      fontSize:14,
                  }
              },
              axisLine: {
                  lineStyle: {
                      color: 'white',
                      width: 0
                  }
              },
          },
          series: [
              {
                  name: '接打电话',
                  type: 'bar',
                  stack: 'total',
                  label: {
                      show: true
                  },
                  data: this.echarts2Data.dianhua,
                  barWidth: 20,
                  itemStyle: {
                    color: '#19D9BE'
                  },
              },
              {
                  name: '分神驾驶',
                  type: 'bar',
                  stack: 'total',
                  label: {
                      show: true
                  },
                  data: this.echarts2Data.jiashi,
                  barWidth: 20,
                  itemStyle: {
                    color: '#E5AB49'
                  },
              },
              {
                  name: '前向碰撞',
                  type: 'bar',
                  stack: 'total',
                  label: {
                      show: true
                  },
                  data: this.echarts2Data.pengzhuang,
                  barWidth: 20,
                  itemStyle: {
                    color: '#2597FD'
                  },
              },
              {
                  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;
    },
    //点击查看
    dianjichakan(item){
      if(item.type == 1){
        this.videoSrcShow = true;
			  this.videoSrc = item.downloadUrl;
      }else{
        this.elimageSrcShow = true;
			  this.elimageSrc = item.downloadUrl;
      }
    },
    //转换时间格式(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);
    },

    //关闭视频
		closeVideo(){
			this.videoSrcShow = false;
			this.videoSrc = '';
		},
    //关闭图片
		closeElimage(){
			this.elimageSrcShow = false;
			this.elimageSrc = '';
		},
  },
  //销毁
  beforeDestroy() {
    if(this.videoAlarmAllTimer){
      clearInterval(this.videoAlarmAllTimer);
      this.videoAlarmAllTimer = null;
    }
    this.videoPlayer.dispose();
    this.videoPlayer = null;
    this.noPtz = false;
    this.videoSrcShow = false;
		this.videoSrc = '';
    this.elimageSrcShow = false;
		this.elimageSrc = '';
  }

};
</script>

<style>
.video111 .DPcomputer17Class{
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 4;
}
.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: rgba(32,42,67,0.95);
  color: #333;
  text-align: center;
  padding: 0;
  margin-bottom: 0px;
  z-index: 3;
  overflow: hidden;
}
.videoCars .el-tree{
  height: 53vh;
  background-color: rgba(32,42,67,0.95);
  overflow-y: scroll;
}
.videoCars .el-tree::-webkit-scrollbar {
  display: none;
}
.videoCars .el-tree{
  scrollbar-width: none;
}
.videoCars .el-tree-node__content {
  height: 40px;
  background-color: rgba(32,42,67,0.95);
  width: 20vw;
}
.videoCars .el-tree-node {
  background-color: rgba(32,42,67,0.95);
}
.videoCars .el-tree-node__content:hover {
  background-color: rgba(32,42,67,0.95);
}
.videoCars .el-tree-node:focus>.el-tree-node__content{
  background-color: rgba(32,42,67,0.95);
}
.videoCars .el-tree-node__content>.el-tree-node__expand-icon{
  display: none;
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
  background-color:rgba(200,200,200,0.25);
}
.videoCars .roadClass{
  height: 35px;
  width: 90%;
  line-height: 35px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2px;
  color: white;
  border-radius: 5px;
  background: linear-gradient(to bottom, #30CFBE, #007EFF);
  margin: 0 auto;
}
.videoCars .el-tree-node__children{
  width: 90%;
  border: 1.5px solid #A6F6F9;
  margin: 0 auto;
  border-radius: 10px;
}
.videoCars .el-tree-node__children .el-tree-node__content {
  height: 30px;
  background-color: rgba(32,42,67,0.95);
  width: 100%;
  margin-left: -10px;
}
.videoCars .el-tree-node__children .roadClass{
  height: 30px;
  width: 90%;
  line-height: 30px;
  text-align: center;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 2px;
  color: #A6F6F9;
  border-radius: 5px;
  background: linear-gradient(to bottom, rgba(32,42,67,0), rgba(32,42,67,0));
  margin: 0px auto;
}
.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:2vh;
  right: 1vh;
  font-size: 20px;
  cursor: pointer;
}
.noPtzCameraList{
  position: absolute;
  top:2vh;
  left: 1vh;
  font-size: 18px;
  cursor: pointer;
}
.noPtzVideo1{
  width: 60vw;
  height: 94.5vh;
  overflow: hidden;
  background-color: white;
  position: relative;
  z-index: 3;
  border-left: 1px solid gainsboro;
}
.video111 .iframeSingle {
  width: 60vw;
  height: 94.5vh;
}
.video111 .echarts1{
  width: 99%;
  height: 22vh;
  overflow: hidden;
}
.video111 .echarts2{
  width: 99%;
  height: 30vh;
  overflow: hidden;
}

.video111 .videoCarsInput{
  height: 4vh;
  width: 90%;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.video111 .aiAnalysisRightViews{
  width: 20vw;
  height: 94.5vh;
  overflow: hidden;
  z-index: 3;
}
.video111 .aiAnalysisRightViews_1{
  width: 20vw;
  height: 35vh;
  background-color: rgba(32,42,67,0.95);
  padding: 5px 7px;
  box-sizing: border-box;
  overflow: hidden;
}
.video111 .aiAnalysisRightViews_1_title{
  margin-bottom: 5px;
  width: 100%;
  height: 3.5vh;
  background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
	background-size:100% 100%;
  padding-left: 10px;
  box-sizing: border-box;
  font-size: 18px;
  line-height: 3.5vh;
  color: #FAFAFB;
  letter-spacing: 1px;
  text-shadow: 1px 1px 1px #92CBFF;
}
.video111 .aiAnalysisRightViews_1_content{
  width: 100%;
  height: 31.5vh;
  position: relative;
}
.video111 .aiAnalysisRightViews_1_content_top{
  display: flex;
  justify-content: space-evenly;
}
.video111 .aiAnalysisRightViews_1_content_topL{
  width: 30%;
  height: 2.5vh;
  line-height: 2.5vh;
  color: #01EDF7;
  font-size: 15px;
  text-align: center;
  border:1px solid #01A6FC;
  border-radius: 5px;
  opacity: 0.5;
  cursor: pointer;
  font-weight: 600;
}
.video111 .aiAnalysisRightViews_1_content_topH{
  width: 30%;
  height: 2.5vh;
  line-height: 2.5vh;
  color: #01EDF7;
  font-size: 15px;
  border-radius: 5px;
  text-align: center;
  border:1px solid #01A6FC;
  opacity: 1;
  cursor: pointer;
  font-weight: 600;
}
.video111 .alarmViewsStyle1{
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  margin-top: 0.5vh;

}
.video111 .alarmViewsStyle1_left1{
  padding-top: 0.5vh;
  box-sizing: border-box;
  width: 40%;
  height: 4.5vh;
  background:no-repeat center center url('~@/assets/images/cutGraph/sijirenshu1.png');
	background-size:100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  color: #F8D909;
}
.video111 .alarmViewsStyle1_right1{
  padding-top: 0.5vh;
  box-sizing: border-box;
  width: 55%;
  height: 4.5vh;
  background:no-repeat center center url('~@/assets/images/cutGraph/dangqianrenshu1.png');
	background-size:100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  color: #01EDF7;
}
.video111 .aiAnalysisRightViews_2{
  width: 20vw;
  height: 24.5vh;
  background-color: rgba(32,42,67,0.95);
  padding: 5px 7px;
  box-sizing: border-box;
  overflow: hidden;
}
.video111 .aiAnalysisRightViews_2_title{
  margin-bottom: 5px;
  width: 100%;
  height: 3.5vh;
  background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
	background-size:100% 100%;
  padding-left: 10px;
  box-sizing: border-box;
  font-size: 18px;
  line-height: 3.5vh;
  color: #FAFAFB;
  letter-spacing: 1px;
  text-shadow: 1px 1px 1px #92CBFF;
}
.video111 .aiAnalysisRightViews_2_content{
  width: 100%;
  height: 20vh;
}
.video111 .aiAnalysisRightViews_2_content_rolling{
  width: 100%;
  height: 20vh;
  text-align: center;
  overflow-y:auto;
  scrollbar-width: none;
}
.video111 .aiAnalysisRightViews_2_content_rolling::-webkit-scrollbar {
  display: none;
}
.video111 dl{
	display:table;
	width:100%;
}
.video111 dt{
	margin-top: 20px;
	display:table-row;
	background-color: #274088;
}
.video111 dt>div{
	display:table-cell;
	padding:5px 3px;
	font-size: 16px;
	font-weight: 500;
	color: rgb(24,228,240);
}
.video111 dd{
	display:table-row;
}
.video111 dd>div{
	display:table-cell;
	padding:7px 1px;
	font-size: 14px;
	color: #A6F6F9;
}
.video111 .echarts1_neiquan{
	position: absolute;
  height: 12.5vh;
  width: 6vw;
  top: 12.3vh;
  right: 6.7vw;
  border: 5px solid rgb(43,178,203);
  border-radius: 50%;
  background-color: rgb(23,52,90);
  padding-top: 3vh;
  box-sizing: border-box;
  text-align: center;
  font-size: 20px;
}
.video111 .videoMengCeng{
	width: 100%;
	height: 100%;
	padding: 2vh 0px 0px 12vw;
	box-sizing: border-box;
	background-color: rgba(0,0,0,0.8);
	z-index: 50;
	position: absolute;
	top: 0px;
	left: 0px;
}
.video111 .closeVideoDiv{
	position: absolute;
	right: 2vw;
	top: 2vh;
	color: white;
	z-index: 51;
	font-size: 50px;
	font-weight: 600;
	cursor: pointer;
}
.video111 .elimageMengCeng{
	width: 100%;
	height: 100%;
	padding: 4vh 0px 0px 10vw;
	box-sizing: border-box;
	background-color: rgba(0,0,0,0.8);
	z-index: 50;
	position: absolute;
	top: 0px;
	left: 0px;
}
.video111 .closeElimageDiv{
	position: absolute;
	right: 2vw;
	top: 2vh;
	color: white;
	z-index: 51;
	font-size: 50px;
	font-weight: 600;
	cursor: pointer;
}
</style>
