<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="carNo" label="车牌号" align="center"></el-table-column>
            <el-table-column prop="type" label="报警类型" align="center"></el-table-column>
            <el-table-column prop="createTime" label="报警时间" align="center"></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';

export default {
  data() {
    return {
      imgSrcStart:process.env.VUE_APP_LOCAL_API2,
      iframeSrc:'http://oa.gemho.cn:8088/808gps/open/player/video.html?lang=zh&devIdno=202208221701&account=admin&password=admin&channel=4',
      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,
      },
    };
  },
  mounted() {
    this.getCode();
    this.echarts1Fn();
    this.echarts2Fn();
  },
  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.hls = null;
              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;
            console.log(this.videoData);
          })
        }
			})
    },
    handleNodeClick(data) {
      console.log(data);
      if (data.children) {
        return
      } else {
        this.noPtz = true;
      }
    },
    aiTabPositionFn(){
      console.log(this.aiTabPosition);
    },
    //饼图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;
    },
  },
  //销毁
  beforeDestroy() {

  }
  
};
</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;
}
.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>
