<template>
  <div class="app-container">
    <el-card>
      <div style="margin-top:10px">
      <el-date-picker
        v-model="dataValue"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        value-format="yyyy-MM-dd HH:mm:ss"
        :default-time="['00:00:00', '23:59:59']">
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <div style="margin-top:10px"></div>
    </div>
    </el-card>
    <el-card style="margin-top:10px">
      <div id="main" style="width:1000px;height:600px;margin-top: 50px;"></div>
      <div id="userMain" style="width:1000px;height:600px;margin-top: 50px;"></div>
      <div id="orgMain" style="width:1000px;height:600px;margin-top: 50px;"></div>
    </el-card>
    
  </div>
</template>
<script>
import * as echarts from 'echarts'
import FileSaver from "file-saver";
import XLSX from "xlsx";
import { groupByCategoryView,groupByUserView,groupByOrgView } from '@/api/video'
  export default{
    data () {
      return {
        cateChart:null,
        userChart:null,
        orgChart:null,
        dataValue:'',
        dataQuery:{
          start_time:'',
          end_time:'',
          limit:500
        },
         pickerOptions: {
            shortcuts: [{
              text: '最近一天',
              onClick(picker) {
                let end = new Date();
                let start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一周',
              onClick(picker) {
                let end = new Date();
                let start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                let end = new Date();
                let start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近三个月',
              onClick(picker) {
                let end = new Date();
                let start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            }]
          },
      };
    },
    mounted(){
      let dateNow = new Date();
      let yeear = dateNow.getFullYear();
      let month = dateNow.getMonth()+1;
      let day = dateNow.getDate();
      this.dataQuery.start_time=yeear+'-'+month+'-'+'01 00:00:00';
      this.dataQuery.end_time=yeear+'-'+month+'-'+day+' 23:59:59';
      this.dataValue = [this.dataQuery.start_time,this.dataQuery.end_time];
      this.getCategoryView();
      this.getUserView();
      this.getGroupView();
    },
    methods: {
      getCategoryView(){
        groupByCategoryView(this.dataQuery).then(res=>{
          let data = res.data;
          let xAxisOptions = [],data1 = [],data2 = [],data3 = [];
          data.forEach(item=>{
            xAxisOptions.push(item.视频大类);
            data1.push(item.视频数量);
            data2.push(item.观看总次数);
            data3.push(item.观看总人数);
          })
          let chartDom = document.getElementById('main');
          this.cateChart = echarts.init(chartDom);
          let labelOption = {
            show: true,
            position: 'insideBottom',
            distance: 5,
            align: 'left',
            verticalAlign: 'middle',
            rotate: 90,
            formatter: '{c}',
            fontSize: 12,
            rich: {
              name: {}
            }
          };
          let option = {
            title: { text: '视频大类观看统计' },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              data: ['视频数量', '观看总次数', '观看总人数']
            },
            toolbox: {
              show: true,
              orient: 'vertical',
              left: 'right',
              top: 'center',
              feature: {
                mark: { show: true },
                dataView: {
                  show: true,
                  title: '数据视图',
                  lang: ['视频大类观看统计', '关闭', '导出Excel'], // 按钮
                  contentToOption: function (opts) {
                    $('#tableExcel').table2excel({
                      exclude: '.noExl', //过滤位置的 css 类名， 有class = “noExl” 的行不被导出
                      filename: '最大需量', // 文件名称
                      name: 'Excel Document Name.xls',
                      exclude_img: true,
                      exclude_links: true,
                      exclude_inputs: true
                    })
                  },
                  optionToContent: function (opt) {
                    var axisData = opt.xAxis[0].data //坐标轴
                    var series = opt.series //折线图的数据
                    console.log(series);
                    var tdHeads =
                      '<td  style="margin-top:10px; padding: 0 15px">视频大类</td>' //表头
                    var tdBodys = ''
                    series.forEach(function (item) {
                      tdHeads += `<td style="padding:5px 15px">${item.name}</td>`
                    })
                    var table = `<table id='table-content' border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center;"><tbody><tr>${tdHeads} </tr>`
                    for (var i = 0, l = axisData.length; i < l; i++) {
                      for (var j = 0; j < series.length; j++) {
                        if (series[j].data[i] == undefined) {
                          tdBodys += `<td>${'-'}</td>`
                        } else {
                          tdBodys += `<td>${series[j].data[i]}</td>`
                        }
                      }
                      table += `<tr><td style="padding: 0 15px">${axisData[i]}</td>${tdBodys}</tr>`
                      tdBodys = ''
                    }
                    table += '</tbody></table>'
                    return table
                  },
                    contentToOption: function (HTMLDomElement, opt) {
                    let et = XLSX.utils.table_to_book(
                      document.getElementById("table-content")
                    ); //此处传入table的DOM节点
                    let etout = XLSX.write(et, {
                      bookType: "xlsx",
                      bookSST: true,
                      type: "array",
                    });
                    try {
                      FileSaver.saveAs(
                        new Blob([etout], {
                          type: "application/octet-stream",
                        }),
                        "统计数据.xlsx"
                      ); //trade-publish.xlsx 为导出的文件名
                    } catch (e) {
                    }
                    return etout;
                  },
                },
                magicType: { show: true, type: ['line', 'stack'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            xAxis: [
              {
                type: 'category',
                axisTick: { show: false },
                data: xAxisOptions,
                axisLabel: {
                  interval:0,
                  rotate:60//角度顺时针计算的
                }
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '视频数量',
                type: 'bar',
                barGap: 0,
                label: labelOption,
                emphasis: {
                  focus: 'series'
                },
                data: data1
              },
              {
                name: '观看总次数',
                type: 'bar',
                label: labelOption,
                emphasis: {
                  focus: 'series'
                },
                data: data2
              },
              {
                name: '观看总人数',
                type: 'bar',
                label: labelOption,
                emphasis: {
                  focus: 'series'
                },
                data: data3
              }
            ]
          };
          this.cateChart.setOption(option);

        })
      },
      getGroupView(){
        groupByOrgView(this.dataQuery).then(res=>{
          debugger;console.log(res.data)
          let data = res.data;
          let xAxisOptions = [],data1 = [],data2 = [],data3 = [],data4=[];
          data.forEach(item=>{
            xAxisOptions.push(item.单位名称);
            data1.push(item.观看完成视频总数);
            data2.push(item.观看视频总数);
            data3.push(item.观看总次数);
            data4.push(item.观看总时间);
          })
          let chartDom = document.getElementById('orgMain');
          this.orgChart = echarts.init(chartDom);
          let labelOption = {
            show: true,
            position: 'insideBottom',
            distance: 5,
            align: 'left',
            verticalAlign: 'middle',
            rotate: 90,
            formatter: '{c}',
            fontSize: 12,
            rich: {
              name: {}
            }
          };
          let option = {
            title: { text: '单位观看量统计' },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              data: ['观看完成视频总数','观看视频总数', '观看总次数', '观看总时间']
            },
            toolbox: {
              show: true,
              orient: 'vertical',
              left: 'right',
              top: 'center',
              feature: {
                mark: { show: true },
                dataView: {
                  show: true,
                  title: '数据视图',
                  lang: ['单位观看量统计', '关闭', '导出Excel'], // 按钮
                  contentToOption: function (opts) {
                    $('#tableExcel').table2excel({
                      exclude: '.noExl', //过滤位置的 css 类名， 有class = “noExl” 的行不被导出
                      filename: '最大需量', // 文件名称
                      name: 'Excel Document Name.xls',
                      exclude_img: true,
                      exclude_links: true,
                      exclude_inputs: true
                    })
                  },
                  optionToContent: function (opt) {
                    var axisData = opt.yAxis[0].data //坐标轴
                    var series = opt.series //折线图的数据
                    console.log(series);
                    var tdHeads =
                      '<td  style="margin-top:10px; padding: 0 15px">视频大类</td>' //表头
                    var tdBodys = ''
                    series.forEach(function (item) {
                      tdHeads += `<td style="padding:5px 15px">${item.name}</td>`
                    })
                    var table = `<table id='table-content' border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center;"><tbody><tr>${tdHeads} </tr>`
                    for (var i = 0, l = axisData.length; i < l; i++) {
                      for (var j = 0; j < series.length; j++) {
                        if (series[j].data[i] == undefined) {
                          tdBodys += `<td>${'-'}</td>`
                        } else {
                          tdBodys += `<td>${series[j].data[i]}</td>`
                        }
                      }
                      table += `<tr><td style="padding: 0 15px">${axisData[i]}</td>${tdBodys}</tr>`
                      tdBodys = ''
                    }
                    table += '</tbody></table>'
                    return table
                  },
                    contentToOption: function (HTMLDomElement, opt) {
                    let et = XLSX.utils.table_to_book(
                      document.getElementById("table-content")
                    ); //此处传入table的DOM节点
                    let etout = XLSX.write(et, {
                      bookType: "xlsx",
                      bookSST: true,
                      type: "array",
                    });
                    try {
                      FileSaver.saveAs(
                        new Blob([etout], {
                          type: "application/octet-stream",
                        }),
                        "统计数据.xlsx"
                      ); //trade-publish.xlsx 为导出的文件名
                    } catch (e) {
                    }
                    return etout;
                  },
                },
                magicType: { show: true, type: [ 'stack'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            yAxis: [
              {
                type: 'category',
                axisTick: { show: false },
                data: xAxisOptions,
                // axisLabel: {
                //   interval:0,
                //   rotate:60//角度顺时针计算的
                // }
              }
            ],
            xAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '观看完成视频总数',
                type: 'bar',
                barGap: 0,
                label: labelOption,
                emphasis: {
                  focus: 'series'
                },
                data: data1
              },
              {
                name: '观看视频总数',
                type: 'bar',
                label: labelOption,
                emphasis: {
                  focus: 'series'
                },
                data: data2
              },
              {
                name: '观看总次数',
                type: 'bar',
                label: labelOption,
                emphasis: {
                  focus: 'series'
                },
                data: data3
              }
              ,
              {
                name: '观看总时间',
                type: 'bar',
                label: labelOption,
                emphasis: {
                  focus: 'series'
                },
                data: data4
              }
            ]
          };
          this.orgChart.setOption(option);

        })
      },
      getUserView(){
        groupByUserView(this.dataQuery).then(res=>{
          debugger;
          console.log(res.data);
          let data = res.data;
          let xAxisOptions = [],data1 = [],data2 = [],data3 = [],data4=[];
          data.forEach(item=>{
            xAxisOptions.push(item.姓名);
            data1.push(item.观看完成视频总数);
            data2.push(item.观看视频总数);
            data3.push(item.观看总次数);
            data4.push(item.观看总时间);
          })
          let chartDom = document.getElementById('userMain');
          this.userChart = echarts.init(chartDom);
          let labelOption = {
            show: true,
            position: 'insideBottom',
            distance: 5,
            align: 'left',
            verticalAlign: 'middle',
            rotate: 90,
            formatter: '{c}',
            fontSize: 12,
            rich: {
              name: {}
            }
          };
          let option = {
            title: { text: '个人观看量统计' },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              data: ['观看完成视频总数','观看视频总数', '观看总次数', '观看总时间']
            },
            toolbox: {
              show: true,
              orient: 'vertical',
              left: 'right',
              top: 'center',
              feature: {
                mark: { show: true },
                dataView: {
                  show: true,
                  title: '数据视图',
                  lang: ['个人观看量统计', '关闭', '导出Excel'], // 按钮
                  contentToOption: function (opts) {
                    $('#tableExcel').table2excel({
                      exclude: '.noExl', //过滤位置的 css 类名， 有class = “noExl” 的行不被导出
                      filename: '最大需量', // 文件名称
                      name: 'Excel Document Name.xls',
                      exclude_img: true,
                      exclude_links: true,
                      exclude_inputs: true
                    })
                  },
                  optionToContent: function (opt) {
                    var axisData = opt.yAxis[0].data //坐标轴
                    var series = opt.series //折线图的数据
                    console.log(series);
                    var tdHeads =
                      '<td  style="margin-top:10px; padding: 0 15px">视频大类</td>' //表头
                    var tdBodys = ''
                    series.forEach(function (item) {
                      tdHeads += `<td style="padding:5px 15px">${item.name}</td>`
                    })
                    var table = `<table id='table-content' border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center;"><tbody><tr>${tdHeads} </tr>`
                    for (var i = 0, l = axisData.length; i < l; i++) {
                      for (var j = 0; j < series.length; j++) {
                        if (series[j].data[i] == undefined) {
                          tdBodys += `<td>${'-'}</td>`
                        } else {
                          tdBodys += `<td>${series[j].data[i]}</td>`
                        }
                      }
                      table += `<tr><td style="padding: 0 15px">${axisData[i]}</td>${tdBodys}</tr>`
                      tdBodys = ''
                    }
                    table += '</tbody></table>'
                    return table
                  },
                    contentToOption: function (HTMLDomElement, opt) {
                    let et = XLSX.utils.table_to_book(
                      document.getElementById("table-content")
                    ); //此处传入table的DOM节点
                    let etout = XLSX.write(et, {
                      bookType: "xlsx",
                      bookSST: true,
                      type: "array",
                    });
                    try {
                      FileSaver.saveAs(
                        new Blob([etout], {
                          type: "application/octet-stream",
                        }),
                        "统计数据.xlsx"
                      ); //trade-publish.xlsx 为导出的文件名
                    } catch (e) {
                    }
                    return etout;
                  },
                },
                magicType: { show: true, type: [ 'stack'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            yAxis: [
              {
                type: 'category',
                axisTick: { show: false },
                data: xAxisOptions,
                // axisLabel: {
                //   interval:0,
                //   rotate:60//角度顺时针计算的
                // }
              }
            ],
            xAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '观看完成视频总数',
                type: 'bar',
                barGap: 0,
                label: labelOption,
                emphasis: {
                  focus: 'series'
                },
                data: data1
              },
              {
                name: '观看视频总数',
                type: 'bar',
                label: labelOption,
                emphasis: {
                  focus: 'series'
                },
                data: data2
              },
              {
                name: '观看总次数',
                type: 'bar',
                label: labelOption,
                emphasis: {
                  focus: 'series'
                },
                data: data3
              }
              ,
              {
                name: '观看总时间',
                type: 'bar',
                label: labelOption,
                emphasis: {
                  focus: 'series'
                },
                data: data4
              }
            ]
          };
          this.userChart.setOption(option);
        })
       
      },
      handleFilter(){
        this.cateChart.resize();
        this.userChart.resize();
        this.orgChart.resize();
        this.dataQuery.start_time = this.dataValue[0];
        this.dataQuery.end_time = this.dataValue[1];
        this.getCategoryView();
        this.getGroupView();
        this.getUserView();
      },
    },
  }
</script>
