<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;">
          <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">处理率：{{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>
          <el-table :data="aiAnalysisTableData" border style="width: 98%" height="24.5vh">
            <el-table-column prop="vid" label="车牌号" align="center"></el-table-column>
            <el-table-column prop="atpStr" label="报警类型" align="center"></el-table-column>
            <el-table-column prop="stm" label="报警时间" align="center" :formatter="changeTime1"></el-table-column>
            <el-table-column label="查看" align="center">
              <template slot-scope="scope">
								<el-image style="width: 70px; height: 50px" :src="imgSrcStart + 'avatar/' + scope.row.photo" :preview-src-list="[imgSrcStart + 'avatar/' + scope.row.photo]"></el-image>
							</template>
            </el-table-column>
          </el-table>
        </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'

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: 1048, name: '接打电话' }, { value: 735, name: '分神驾驶' }, { value: 580, name: '前向碰撞' },],
      echarts2Data:{
        name:['鲁A11111','鲁A11111','鲁A11111','鲁A11111','鲁A11111','鲁A11111',],
        kache1:[20,20,20,20,20,20,],
        kache2:[20,20,20,20,20,20,],
        kache3:[20,20,20,20,20,20,],
      },
      alarmData:{
        total:30,
        handle:10,
      },
      //所有车的信息
      allCarData:'',
    };
  },
  mounted() {
    this.getCode();
    this.echarts1Fn();
    this.echarts2Fn();
    HttpReq.truckDispatching.carMonitoringCarsQuery({size: 9999}).then((res) => {
      let arr1 = '';
      res.content.forEach((item,index)=>{
        arr1 = arr1 + item.carnumber + ',';
      })
      arr1 = arr1.substring(0, arr1.length - 1);  
      this.allCarData = arr1;
      this.aiTabPositionFn();
    })
  },
  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(){
      let that = this;
      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));
        //可配置参数的方式
        axios.get('/jiankong', {
          params: {
            jsession:'1bf84ae637b843f2af24cf8c1502e9cf',
            vehiIdno:that.allCarData,
            begintime:start,
            endtime:end,
            armType:'670,671,620,621,624,625,400',
            currentPage:0,
            pageRecords:9999,
          }
        }).then(function (response) {
          console.log(response.data.alarms);
          that.aiAnalysisTableData = response.data.alarms;
        })

      }
    },
    //饼图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(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)','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:14,
              },
          },
          grid: {
              top: '15%',
              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.kache1,
                  barWidth: 20,
                  itemStyle: {
                    color: 'rgb(84,112,198)'
                  },
              },
              {
                  name: '分神驾驶',
                  type: 'bar',
                  stack: 'total',
                  label: {
                      show: true
                  },
                  data: this.echarts2Data.kache2,
                  barWidth: 20,
                  itemStyle: {
                    color: 'rgb(145,204,117)'
                  },
              },
              {
                  name: '前向碰撞',
                  type: 'bar',
                  stack: 'total',
                  label: {
                      show: true
                  },
                  data: this.echarts2Data.kache3,
                  barWidth: 20,
                  itemStyle: {
                    color: 'rgb(250,200,88)'
                  },
              }
          ]
      };
      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);
    }
  },
  //销毁
  beforeDestroy() {
    this.iframeSrc = '';
    this.noPtz = false;
  }
  
};
</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;
}
.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;
}
.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>
