<template>
  <div class="wrap">
    <!-- 全屏 -->
    <img class="full" src="@/assets/img/screen/full.png" alt="" @click="fullScreen">
    <!--header-->
    <div class="header">
        <div class="bg_header">
            <div class="header_nav fl t_title">平台大数据可视化看板</div> 
        </div>
    </div>

    <!--main-->
    <div class="content">
      <div class="left">
          <div class="item">
              <!--左上边框-->
              <div class="t_line_box">
                  <i class="t_l_line"></i> 
                  <i class="l_t_line"></i> 
              </div> 
              <!--右上边框-->
              <div class="t_line_box">
                  <i class="t_r_line"></i> 
                  <i class="r_t_line"></i> 
              </div> 
              <!--左下边框-->
              <div class="t_line_box">
                  <i class="l_b_line"></i> 
                  <i class="b_l_line"></i> 
              </div> 
                  <!--右下边框-->
                  <div class="t_line_box">
                  <i class="r_b_line"></i> 
                  <i class="b_r_line"></i> 
              </div> 
              <div class="main_title">
                  <img src="@/assets/img/screen/t_1.png" alt="">
                平台考试数据统计
              </div>
              <ul class="time-switch">
                <li v-for="(item, i) in times" :key="i" :class="{active: item.id === time}" @click="switchTime(item.id)">{{ item.name }}</li>
              </ul>
              <div id="chart1" class="chart"></div>
          </div>
          <div class="item">
              <div class="t_line_box">
                  <i class="t_l_line"></i> 
                  <i class="l_t_line"></i> 
              </div> 
              <div class="t_line_box">
                  <i class="t_r_line"></i> 
                  <i class="r_t_line"></i> 
              </div> 
              <div class="t_line_box">
                  <i class="l_b_line"></i> 
                  <i class="b_l_line"></i> 
              </div> 
                  <div class="t_line_box">
                  <i class="r_b_line"></i> 
                  <i class="b_r_line"></i> 
              </div> 
              <div class="main_title">
                  <img src="@/assets/img/screen/t_2.png" alt="">
                  学生成绩分布分析
              </div>
              <div id="chart2" class="chart t_btn9"></div>
          </div>
          <div class="item">
              <div class="t_line_box">
                  <i class="t_l_line"></i> 
                  <i class="l_t_line"></i> 
              </div> 
              <div class="t_line_box">
                  <i class="t_r_line"></i> 
                  <i class="r_t_line"></i> 
              </div> 
              <div class="t_line_box">
                  <i class="l_b_line"></i> 
                  <i class="b_l_line"></i> 
              </div> 
                  <div class="t_line_box">
                  <i class="r_b_line"></i> 
                  <i class="b_r_line"></i> 
              </div> 
              <div class="main_title">
                  <img src="@/assets/img/screen/t_7.png" alt="">
                  月人均在线学习时长情况
              </div>
              <div id="chart3" class="chart t_btn9"></div>
          </div>
          <div class="item">
            <div class="t_line_box">
                <i class="t_l_line"></i> 
                <i class="l_t_line"></i> 
            </div> 
            <div class="t_line_box">
                <i class="t_r_line"></i> 
                <i class="r_t_line"></i> 
            </div> 
            <div class="t_line_box">
                <i class="l_b_line"></i> 
                <i class="b_l_line"></i> 
            </div> 
                <div class="t_line_box">
                <i class="r_b_line"></i> 
                <i class="b_r_line"></i> 
            </div>
            <div class="main_title">
                <img src="@/assets/img/screen/t_7.png" alt="">
                平台登录人数
            </div>
            <div id="chart4" class="chart t_btn9"></div>
          </div>
      </div>
      <div class="middle">
          <div class="item" style="height: 620px">
              <!--左上边框-->
              <div class="t_line_box">
                  <i class="t_l_line"></i> 
                  <i class="l_t_line"></i> 
              </div> 
              <!--右上边框-->
              <div class="t_line_box">
                  <i class="t_r_line"></i> 
                  <i class="r_t_line"></i> 
              </div> 
              <!--左下边框-->
              <div class="t_line_box">
                  <i class="l_b_line"></i> 
                  <i class="b_l_line"></i> 
              </div> 
              <!--右下边框-->
              <div class="t_line_box">
                  <i class="r_b_line"></i> 
                  <i class="b_r_line"></i> 
              </div> 
              <video class="video" ref="video" width="100%" height="100%" autoplay muted loop>
                <source src="@/assets/videos/screen.mp4" type="video/mp4">
                您的浏览器不支持 video 标签。
              </video>
              <div class="stat-mask"></div>
              <div class="stat-wrap">
                <p class="num num1">{{ overview.numberOfPeopleStudy }}</p>
                <p class="num num2">{{ overview.courseStudyFrequency }}</p>
                <p class="num num3">{{ overview.courseStudyTime }}</p>
                <p class="num num4">{{ overview.numberOfExperiments }}</p>
                <p class="num num5">{{ overview.cumulativeExperimentTime }}</p>
              </div>
              <div class="active-number">
                <p class="val">{{ overview.currentActivePeople }}</p>
                <p class="name">当前活跃人数</p>
              </div>
          </div>
          <div class="item" style="height: 440px;">
              <!--左上边框-->
              <div class="t_line_box">
                  <i class="t_l_line"></i> 
                  <i class="l_t_line"></i> 
              </div> 
              <!--右上边框-->
              <div class="t_line_box">
                  <i class="t_r_line"></i> 
                  <i class="r_t_line"></i> 
              </div> 
              <!--左下边框-->
              <div class="t_line_box">
                  <i class="l_b_line"></i> 
                  <i class="b_l_line"></i> 
              </div> 
              <!--右下边框-->
              <div class="t_line_box">
                  <i class="r_b_line"></i> 
                  <i class="b_r_line"></i> 
              </div> 
              <div class="main_title">
                  <img src="@/assets/img/screen/t_3.png" alt="">
                  学生实验课程考核成绩趋势图
              </div>
              <div class="chart" id="chart5" style="height: 420px"></div>
          </div>
      </div>
      <div class="right">
          <div class="item" style="height: 160px">
              <!--左上边框-->
              <div class="t_line_box">
                  <i class="t_l_line"></i> 
                  <i class="l_t_line"></i> 
              </div> 
              <!--右上边框-->
              <div class="t_line_box">
                  <i class="t_r_line"></i> 
                  <i class="r_t_line"></i> 
              </div> 
              <!--左下边框-->
              <div class="t_line_box">
                  <i class="l_b_line"></i> 
                  <i class="b_l_line"></i> 
              </div> 
                  <!--右下边框-->
                  <div class="t_line_box">
                  <i class="r_b_line"></i> 
                  <i class="b_r_line"></i> 
              </div> 
              <div class="main_title">
                  <img src="@/assets/img/screen/t_4.png" alt="">
                  本月综合学习积极性最高的实验课程
              </div>
              <ul class="list">
                <li v-for="(item, i) in courses" :key="i">
                  <span class="index">{{ i + 1 }}</span>
                  <p class="text">{{ item.curriculumName }}</p>
                  <img class="icon" src="@/assets/img/screen/medal.png" alt="">
                </li>
              </ul>
          </div>
          <div class="item" style="height: 240px">
              <!--左上边框-->
              <div class="t_line_box">
                  <i class="t_l_line"></i> 
                  <i class="l_t_line"></i> 
              </div> 
              <!--右上边框-->
              <div class="t_line_box">
                  <i class="t_r_line"></i> 
                  <i class="r_t_line"></i> 
              </div> 
              <!--左下边框-->
              <div class="t_line_box">
                  <i class="l_b_line"></i> 
                  <i class="b_l_line"></i> 
              </div> 
                  <!--右下边框-->
                  <div class="t_line_box">
                  <i class="r_b_line"></i> 
                  <i class="b_r_line"></i> 
              </div> 
              <div class="main_title">
                  <img src="@/assets/img/screen/t_5.png" alt="">
                  热门理论课程排行榜
              </div>
              <div class="popular-wrap" ref="popularCourses">
                <ul class="list popular">
                  <li v-for="(item, i) in popularCourses" :key="i">
                    <span class="index">{{ i + 1 }}</span>
                    <p class="text">{{ item }}</p>
                  </li>
                </ul>
              </div>
          </div>
          <div class="item" style="height: 300px">
            <div class="t_line_box">
                <i class="t_l_line"></i> 
                <i class="l_t_line"></i> 
            </div> 
            <div class="t_line_box">
                <i class="t_r_line"></i> 
                <i class="r_t_line"></i> 
            </div> 
            <div class="t_line_box">
                <i class="l_b_line"></i> 
                <i class="b_l_line"></i> 
            </div> 
                <div class="t_line_box">
                <i class="r_b_line"></i> 
                <i class="b_r_line"></i> 
            </div>
            <div class="main_title">
                <img src="@/assets/img/screen/t_7.png" alt="">
                学霸排行榜
            </div>
            <div class="main_table">
              <table>
                <thead>
                  <tr>
                    <th width="20%">名次</th>
                    <th width="20%">姓名</th>
                    <th width="20%">{{ token ? '班级' : '学校' }}</th>
                    <th width="20%">练习次数</th>
                    <th width="20%">平均分</th>
                  </tr>
                </thead>
              </table>
            </div>
            <div class="main_table" ref="ach" style="max-height: 220px;margin-top: 0;overflow: hidden">
              <table>
                <tbody>
                  <tr v-for="(item, i) in achs" :key="i">
                    <td width="20%">{{ i + 1 }}</td>
                    <td width="20%">{{ item.userName }}</td>
                    <td width="20%">{{ token ? item.className : item.schoolName }}</td>
                    <td width="20%">{{ item.practiceNumber }}</td>
                    <td width="20%">{{ item.avgScore }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="item" style="height: 300px">
            <div class="t_line_box">
                <i class="t_l_line"></i> 
                <i class="l_t_line"></i> 
            </div> 
            <div class="t_line_box">
                <i class="t_r_line"></i> 
                <i class="r_t_line"></i> 
            </div> 
            <div class="t_line_box">
                <i class="l_b_line"></i> 
                <i class="b_l_line"></i> 
            </div> 
                <div class="t_line_box">
                <i class="r_b_line"></i> 
                <i class="b_r_line"></i> 
            </div>
            <div class="main_title">
                <img src="@/assets/img/screen/t_7.png" alt="">
                活跃度排行榜
            </div>
            <div class="main_table">
              <table>
                <thead>
                  <tr>
                    <th width="20%">名次</th>
                    <th width="20%">{{ token ? '班级' : '学校' }}</th>
                    <th width="20%">活跃指数</th>
                  </tr>
                </thead>
              </table>
            </div>
            <div class="main_table" ref="active" style="max-height: 230px;margin-top: 0;overflow: hidden">
              <table>
                <tbody>
                  <tr v-for="(item, i) in actives" :key="i">
                    <td width="20%">{{ i + 1 }}</td>
                    <td width="20%">{{ token ? item.className : item.schoolName }}</td>
                    <td width="20%">{{ item.activityIndex }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import Util from '@/libs/util'
import * as echarts from 'echarts'
import Setting from '@/setting'
export default {
    data() {
        return {
          token: Util.local.get(Setting.tokenKey),
          time: 0,
          times: [
            {
              id: 0,
              name: '月'
            },
            {
              id: 1,
              name: '日'
            }
          ],
          overview: {},
          goodsSell: [],
          cryptoList: [],
          courses: [],
          popularCourses: [],
          achs: [],
          actives: [],
          examChart: null
        }
    },
    mounted() {
      this.renderExam()
      this.getList()
      this.renderChart()
    },
    methods: {
      // 全屏
      fullScreen() {
        // 检测是否全屏
        if (document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.msFullScreenElement ||
        document.webkitFullscreenElement) {
          const fn = document.exitFullScreen ||
          document.mozCancelFullScreen ||
          document.webkitExitFullscreen ||
          document.msExitFullscreen
          fn.call(document)
        } else {
          const el = document.body
          const fn = el.requestFullscreen ||
          el.mozRequestFullScreen ||
          el.webkitRequestFullscreen ||
          el.msRequestFullscreen
          fn.call(el)
        }
      },
      // 获取文本表格数据
      getList() {
        // 本院数据概览
        this.$post(this.api.overviewOfOurSchoolData).then(({ data }) => {
          this.overview = data
        }).catch(res => {})

        // 本月综合学习积极性最高的实验课程
        this.$post(this.api.getTheMostUsedCoursesInOurSchool).then(({ data }) => {
          this.courses = data
        }).catch(res => {})
        
        // 热门理论课程排行榜
        this.$post(this.api.courseRankings).then(({ data }) => {
          this.popularCourses = data
        }).catch(res => {})

        // 学霸排行榜
        this.$post(`${this.api.academicLeadersRanking}?pageNum=1&pageSize=20`).then(({ data }) => {
          const list = data.records
          // 优先排序平均分，然后再排序练习次数
          list.sort((a, b) => {
            if (a.avgScore == b.avgScore) return b.practiceNumber - a.practiceNumber
            return b.avgScore - a.avgScore
          })
          this.achs = list
        }).catch(res => {})
        
        // 活跃度排行榜
        this.$post(this.api.activityRanking).then(({ list }) => {
          this.actives = list
        }).catch(res => {})
        this.scrollTable()
      },
      // 切换时间单位
      switchTime(id) {
        this.time = id
        this.renderExam()
      },
      // 平台考试数据考试统计
      renderExam() {
        this.$post(`${this.api.examStatistics}?choose=${this.time}`).then(({ data }) => {
          const option = {
						title : {
							text: '考试通过率',
							subtext: data.examPassRate,
              textStyle: {
                fontSize: 16,
                color: '#3adce9',
              },
              subtextStyle: {
                fontSize: 26,
                color: '#00d5ff',
              },
							x: 'center',
              y: '41%',
						},
						tooltip : {
							trigger: 'item',
							formatter: "{b} : {c} ({d}%)"
              // formatter: '{total|' + 100 +'}'+ '\n\r' + '{active|共发布活动}'
						},
						legend: {
							show:false,
							x : 'center',
							y : 'bottom',
							data:['考试总场次', '考试人数']
						},
						toolbox: {
						},
						label:{
							normal:{
								show: true, 
								formatter: "{b} \n{d}%"
							} 
						},
						calculable : true,
						color:['#44cfff', '#4388ff'],
						series : [
							{
								name:'',
								type:'pie',
								radius : [60, 80],
								center : ['50%', '50%'],
                label: {
                  normal: {
                    show: true,
                    alignTo: 'none',
                    lineHeight: 18,
                    formatter: '{b} {c}'
                  }
                },
								data:[
									{value: data.totalNumberOfExams, name:'考试\n总场次'},
									{value: data.referenceNumber, name:'考试\n人数'},
								]
							}
						]
					}
          this.examChart = echarts.init(document.querySelector(`#chart1`))
          this.examChart.setOption(option)
        }).catch(res => {})
      },
      // 获取图标数据并渲染
      async renderChart() {
        const animateChart = (chart, option, data, num = 6) => {
          // 每次向后滚动一个，最后一个从头开始。
          if (option.dataZoom[0].endValue == data.length ) {
            option.dataZoom[0].endValue = num
            option.dataZoom[0].startValue = 0
          }
          else {
            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
          }
          chart.setOption(option)
        }
        let chart = {}
        
        // 学生成绩分布分析
        const year = new Date().getFullYear()
        const times = []
        // 获取过去五年的上下半年日期
        for (let i = 0; i < 6; i++) {
          times.push({
            startTime: (year - i) + '-02-01',
            endTime: (year - i) + '-08-31'
          })
          times.push({
            startTime: (year - i) + '-09-01',
            endTime: (year - i + 1) + '-01-31'
          })
        }
        this.$post(this.api.studentGradeDistribution, times).then(({ data }) => {
          const times = []
          const data1 = []
          const data2 = []
          const data3 = []
          const data4 = []
          data.map(e => {
            times.push(e.time)
            data1.push(e.yellow.replace('%', ''))
            data2.push(e.green.replace('%', ''))
            data3.push(e.blue.replace('%', ''))
            data4.push(e.pink.replace('%', ''))
          })
          const option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              top: '10%',
              textStyle:{
                color: '#fff'
              },
            },
            grid: {
              left: '3%',
              right: '4%',
              top: '30%',
              bottom: '3%',
              containLabel: true
            },
            dataZoom: [//滑动条
              {
                xAxisIndex: 0,//这里是从X轴的0刻度开始
                show: false,//是否显示滑动条，不影响使用
                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                startValue: 0, // 从头开始。
                endValue: 5  // 一次性展示6个。
              }
            ],
						color:['#4388ff', '#44cfff', '#8c2bff', '#2defe2'],
            xAxis: [
              {
                type: 'category',
                data: times,
                axisLine: {
                  lineStyle: {
                    color: '#fff'
                  }
                },
                axisLabel: {
                  interval: 0,
                  textStyle: {
                    color: '#fff',
                  },
                  rotate: 60
                },
              }
            ],
            yAxis: [
              {
                type: 'value',
                axisLine: {
                  lineStyle: {
                    color: '#fff'
                  }
                },
                axisLabel: {
                  margin: 10,
                  textStyle: {
                    fontSize: 12,
                    color: '#fff'
                  },
                  formatter: '{value}%'
                },
              }
            ],
            series: [
              {
                name: '60以下',
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                },
                data: data1
              },
              {
                name: '60-69',
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                },
                data: data2
              },
              {
                name: '70-89',
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                },
                data: data3
              },
              {
                name: '90-100',
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                },
                data: data4
              },
            ]
          }
          chart[0] = echarts.init(document.querySelector(`#chart2`))
          chart[0].setOption(option)
          setInterval(function () {
            animateChart(chart[0], option, data, 5)
          }, 3000)
        }).catch(res => {})

        // 学生实验课程考核成绩趋势图
        const colors = [
          {
            color1: '#0184d5',
            color2: 'rgba(1, 132, 213, 0.4)'
          },
          {
            color1: '#00d887',
            color2: 'rgba(0, 216, 135, 0.4)'
          },
          {
            color1: '#e71872',
            color2: 'rgba(243, 147, 189, 0.4)'
          },
          {
            color1: '#f9d437',
            color2: 'rgba(255, 234, 144, 0.4)'
          },
          {
            color1: '#912892',
            color2: 'rgba(31, 24, 153, 0.4)'
          },
          {
            color1: '#f21259',
            color2: 'rgba(213, 22, 11, 0.4)'
          },
          {
            color1: '#7343fe',
            color2: 'rgba(243, 123, 2, 0.4)'
          },
          {
            color1: '#ea7321',
            color2: 'rgba(65, 94, 123, 0.4)'
          },
          {
            color1: '#934ea2',
            color2: 'rgba(32, 123, 223, 0.4)'
          },
          {
            color1: '#672313',
            color2: 'rgba(156, 163, 2, 0.4)'
          }
        ]
        // 登录前登录后调的课程接口不一样
        const cousrseRes = this.token ?
          await this.$get(this.api.schoolCourse) :
          await this.$post(this.api.curriculumListForBeforeLogin, {
            pageNum: 1,
            pageSize: 100,
            supplierId: '1,2,3,4',
            curriculumName: '',
            categoryId: '',
            curriculumType: '',
            professionalCategoryId: '',
            professionalId: '',
          })
        if (cousrseRes) {
          const courseList = this.token ?
            cousrseRes.data :
            cousrseRes.page.records
          const ids = courseList.map(e => e.cid)
          times.map(e => {
            e.cid = ids
          })
          const courseData = {}
          courseList.map(e => {
            // e.curriculumName = e.curriculumName.substring(0, 10)
            courseData[e.curriculumName] = []
          })
          this.$post(this.api.studentAssessSchievement, times).then(({ data }) => {
            const times = []
            const series = []
            data.map((e, i) => {
              times.push(e.time)
              e.assesScoreRespList.map(n => {
                const item = courseList.find(j => j.cid == n.curriculumId)
                if (item) {
                  const name = item.curriculumName
                  if (courseData[name]) {
                    courseData[name][i] = +n.avgScore
                  }
                }
              })
            })
            let index = 0
            // 生成series
            for (const i in courseData) {
              series.push({
                name: i,
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                lineStyle: {
                  normal: {
                    color: colors[index].color1,
                    width: 2
                  }
                },
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: colors[index].color2
                    }, {
                      offset: 0.8,
                      color: colors[index].color2
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                  }
                },
                itemStyle: {
                  normal: {
                    color: colors[index].color1,
                    borderColor: 'rgba(221, 220, 107, .1)',
                    borderWidth: 12
                  }
                },
                data: courseData[i]
              })
              ++index
              if (index > 9) index = 0
            }
            const option = {
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  lineStyle: {
                      color: '#dddc6b'
                  }
                }
              },
              legend: {
                top:'8%',
                data: courseList.map(e => e.curriculumName),
                textStyle: {
                  color: 'rgba(255,255,255,.5)',
                  fontSize:'12',
                }
              },
              dataZoom: [//滑动条
                {
                  xAxisIndex: 0,//这里是从X轴的0刻度开始
                  show: false,//是否显示滑动条，不影响使用
                  type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                  startValue: 0, // 从头开始。
                  endValue: 6  // 一次性展示6个。
                }
              ],
              grid: {
                left: '30',
                top: '45%',
                right: '10',
                bottom: '5%',
                containLabel: true
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLabel:  {
                  interval: 0,
                  textStyle: {
                    color: "rgba(255,255,255,.9)",
                    fontSize:12,
                  },
                },
                axisLine: {
                  lineStyle: { 
                    color: 'rgba(255,255,255,.2)'
                  }
                },
                data: times
              },
              yAxis: [{
                type: 'value',
                name: '平均分',
                min: 0,
                max: 100,
                interval: 10,
                splitNumber: 10,
                nameTextStyle: {
                  color: '#fff'
                },
                axisTick: {show: false},
                axisLine: {
                  lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                  }
                },
                axisLabel:  {
                  textStyle: {
                    color: "rgba(255,255,255,.9)",
                    fontSize:12,
                  },
                },
                splitLine: {
                  lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                  }
                }
              }],
              series
            }
            chart[1] = echarts.init(document.querySelector(`#chart5`))
            chart[1].setOption(option)
            // setInterval(function () {
            //   animateChart(chart[1], option, times)
            // }, 5000)
          }).catch(res => {})
        }

        // 月人均在线学习时长情况
        const date = new Date()
        date.setMonth(date.getMonth() + 1)
        const months = []
        // 获取近12个月的日期
        for (let i = 0; i < 12; i++) {
          date.setMonth(date.getMonth() - 1)
          const pre = date.getFullYear() + '-' + Util.formateTime(date.getMonth() + 1) + '-'
          months.push({
            startTime: pre + '01',
            endTime: pre + new Date(new Date(date.getFullYear(), date.getMonth() + 1, 1).getTime() - 1000*60*60*24).getDate()
          })
        }
        this.$post(this.api.monthlyAverageOnlineTime, months).then(({ data }) => {
          const option = {
            title: {
              text: ''
            },
            tooltip: {
              trigger: 'axis'
            },
            xAxis: {
              type: 'category',
              axisLine: {
                lineStyle: {
                  color: '#fff'
                }
              },
              axisLabel: {
                interval: 0,
                textStyle: {
                  color: '#fff',
                },
                rotate: 60
              },
              data: data.map(e => e.time)
            },
            dataZoom: [//滑动条
              {
                xAxisIndex: 0,//这里是从X轴的0刻度开始
                show: false,//是否显示滑动条，不影响使用
                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                startValue: 0, // 从头开始。
                endValue: 7  // 一次性展示6个。
              }
            ],
            yAxis: {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#fff'
                }
              },
              axisLabel: {
                margin: 10,
                textStyle: {
                  fontSize: 12,
                  color: '#fff'
                },
                formatter: '{value}'
              },
            },
            color: ['#4BF0FF','#44AFF0','#4E82FF','#584BFF','#BE4DFF','#F845F1'],
            legend: {
              data: ['月人均在线学习时长情况'],
              textStyle:{
                color: '#fff'
              },
              top: '8%'
            },
            grid: {
              top: '20%',
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            series: [
              {
                data: data.map(e => e.averageDuration),
                type: 'bar',
                barWidth: 11,
                itemStyle: {
                  normal: {
                    barBorderRadius: [10, 10, 0, 0],
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: "#4033F9"
                    }, {
                      offset: 0.8,
                      color: "#516fff"
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                  }
                },
                showBackground: true,
                backgroundStyle: {
                  color: 'rgba(180, 180, 180, 0.2)'
                }
              }
            ]
          }
          chart[2] = echarts.init(document.querySelector(`#chart3`))
          chart[2].setOption(option)
          setInterval(function () {
            animateChart(chart[2], option, data)
          }, 1500)
        }).catch(res => {})

        // 平台登录人数
        this.$get(this.api.platformLoginStatistics, {
          platform: Setting.platformId
        }).then(({ data }) => {
          const option = {
            tooltip: {
              trigger: 'axis',
            },
            grid: {
              left: '12%',
              right: '5%',
              top: '15%',
              bottom: '30%'
            },
            dataZoom: [//滑动条
              {
                xAxisIndex: 0,//这里是从X轴的0刻度开始
                show: false,//是否显示滑动条，不影响使用
                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                startValue: 0, // 从头开始。
                endValue: 3  // 一次性展示6个。
              }
            ],
            xAxis: [{
              type: 'category',
              axisLine: {
                lineStyle: {
                  color: '#57617B'
                }
              },
              axisLabel: {
                interval: 0,
                textStyle: {
                  color: '#fff',
                },
                rotate: 60
              },
              data: data.map(e => e.today)
            }],
            yAxis: [{
              type: 'value',
              axisTick: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: '#57617B'
                }
              },
              axisLabel: {
                margin: 10,
                textStyle: {
                  fontSize: 12,
                  color: '#fff'
                },
                formatter: '{value}'
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'dashed',
                  color: ['#25CEF3']
                }
              }

            }],
            series: [{
                name: '平台登录人数',
                type: 'bar',
                barWidth: 8,
                itemStyle: {
                  normal: {
                    barBorderRadius: [10, 10, 0, 0],
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: "#009AFD"
                    }, {
                      offset: 0.8,
                      color: "#33DAFF"
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                  }
                },
                data: data.map(e => e.quantity)
              }
            ]
          }
          chart[3] = echarts.init(document.querySelector(`#chart4`))
          chart[3].setOption(option)
          setInterval(function () {
            animateChart(chart[3], option, data, 3)
          }, 1500)
        }).catch(res => {})

        // 监听resize事件，动态改变chart大小
        window.addEventListener('resize', () => {
          this.examChart && this.examChart.resize()
          for (let i = 0; i < 4; i++) {
            chart[i] && chart[i].resize()
          }
        })
      },
      // 表格滚动效果
      scrollTable() {
        const dom = this.$refs.popularCourses
        const dom1 = this.$refs.ach
        const dom2 = this.$refs.active
        setInterval(() => {
          dom.scrollTop += 1
          if (dom.clientHeight + dom.scrollTop === dom.scrollHeight) dom.scrollTop = 0

          dom1.scrollTop += 1
          if (dom1.clientHeight + dom1.scrollTop === dom1.scrollHeight) dom1.scrollTop = 0

          dom2.scrollTop += 1
          if (dom2.clientHeight + dom2.scrollTop === dom2.scrollHeight) dom2.scrollTop = 0
        }, 30)
      }
    }
};
</script>

<style lang="scss" scoped>
@import "../../styles/page/screen.scss";
</style>