<template>
  <div class="video111 videoKuang">
    <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;">
          <el-tree
            :data="videoData"
            :props="defaultProps"
            @node-click="handleNodeClick"
            accordion
          >
            <div slot-scope="{ node }" class="roadClass">{{ node.label }}</div>
          </el-tree>
        </el-aside>

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

        <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="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'

export default {
  components:{
    DPcomputer17,
  },
  data() {
    return {
      videoAlarmAllTimer:null,
      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,
      },
      //所有车的信息
      searchCarText:'',
      //视频数据
      videoSrc:'',
			videoSrcShow:false,
      //图片数据
      elimageSrc:'',
			elimageSrcShow:false,
    };
  },
  mounted() {
    this.getCode();
    this.aiTabPositionFn();
    this.videoAlarmAllTimer = setInterval(()=>{
      this.aiTabPositionFn(this.aiTabPosition);
    },10000)
  },
  methods: {
    getCode() {
      //分区数据
      HttpReq.truckDispatching.mineMonitoringPartitionQuery({size: 999}).then((res) => {
        let data1 = [];
        res.content.forEach((item) => {
          item.label = item.name;
          data1.push(item);
        });
        if (res != "") {
          //总摄像头数据
          HttpReq.truckDispatching.mineMonitoringCameraQuery({size: 999}).then((res) => {
            let fenquName = [];
            res.content.forEach((item,index) => {
              item.ref = "video" + index;
              item.label = item.cameraName;
              fenquName.push(item);
            });
            data1.forEach((item) => {
              item.children = [];
              fenquName.forEach((itemSon,index)=>{
                if(item.id == itemSon.cameraId){
                  item.children.push(itemSon);
                }
              })
            });
            this.videoData = data1;
          })
        }
			})
    },
    handleNodeClick(data) {
      if (data.children) {
        return
      } else {
        this.iframeSrc = this.defaultIframeSrc + data.cameraName;
        this.noPtz = true;
      }
    },
    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.iframeSrc = '';
    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 {
  background-color: rgba(32,42,67,0.95);
  color: #333;
  text-align: center;
  padding: 0;
  margin-bottom: 0px;
  z-index: 3;
  overflow: hidden;
}
.videoKuang .el-tree{
  height: 57vh;
  background-color: rgba(32,42,67,0.95);
  overflow-y: scroll;
}
.videoKuang .el-tree::-webkit-scrollbar {
  display: none;
}
.videoKuang .el-tree{
  scrollbar-width: none;
}
.videoKuang .el-tree-node__content {
  height: 50px;
  background-color: rgba(32,42,67,0.95);
  width: 20vw;
}
.videoKuang .el-tree-node {
  background-color: rgba(32,42,67,0.95);
}
.videoKuang .el-tree-node__content:hover {
  background-color: rgba(32,42,67,0.95);
}
.videoKuang .el-tree-node:focus>.el-tree-node__content{
  background-color: rgba(32,42,67,0.95);
}
.videoKuang .el-tree-node__content>.el-tree-node__expand-icon{
  display: none;
}
.videoKuang .roadClass{
  height: 45px;
  width: 90%;
  line-height: 45px;
  text-align: center;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 2px;
  color: white;
  border-radius: 5px;
  background: linear-gradient(to bottom, #30CFBE, #007EFF);
  margin: 0px auto;
}
.videoKuang .el-tree-node__children{
  width: 90%;
  border: 1.5px solid #A6F6F9;
  margin: 0 auto;
  border-radius: 10px;
}
.videoKuang .el-tree-node__children .el-tree-node__content {
  height: 30px;
  background-color: rgba(32,42,67,0.95);
  width: 100%;
  margin-left: -10px;
}
.videoKuang .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.95), rgba(32,42,67,0.95));
  margin: 0px auto;
}
.videoKuang .noPtzCloseStyle{
  position: absolute;
  top:0.5vh;
  right: 0.5vh;
  font-size: 20px;
  cursor: pointer;
}
.videoKuang .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 .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>
