jugou/js/main.js

  $(function() {
      //   _init_area();

      //   function showArea() {
      // $('#show').html("<h3>省" + $('#s_province').val() + " - 市" +
      //     $('#s_city').val() + " - 县/区" +
      //     $('#s_county').val() + "</h3>")
      //   }
      //   $('#s_county').change(function() {
      //       showArea()
      //   })

      //   地区和频道、类型、节目都是默认为第一个，选择地区之后加载频道
    //   ajax.loadLocation(); //加载地区 之后赋值给ajax.areaId默认第一个
    //   ajax.channelLoad(); //加载频道 这边取默认第一个的ajax.areaId
    //   ajax.typeLoad(); //加载类型 
    //   ajax.loadProgram(); //加载节目
    //   ajax.loaddata(); //加载echars数据
      var myVid = document.getElementsByClassName("video")[0];
      setInterval(function() {
          curr(myVid.currentTime)
      }, 1000)

      var time = 0

      var i = 1;
      //   var now = new Date();

      // 头部操作
      //   header.location();
      header.calendarbtn()
  })

  var page;


  function curr(curr) {
      $('.time').text(Math.floor(curr))
    //   var datainit = canvas.dealdata(ajax.Icdata, ajax.Irdata, ajax.audienceRating);
      var old_page = page;
      page = Math.floor(curr / 180) + 1;
      if (curr > 0 && curr % 180 == 0) {
          page -= 1;
      }
    //   var start_time = ajax.fisttime + 180000 * (page - 1);
      if (old_page != page) {
          //todo 更新X轴
        //   canvas.draw(datainit[0][page], datainit[1][page], datainit[2][page], start_time);
      }
      if ((Math.floor(curr / 180)) != 0) {
          var p = curr - (Math.floor(curr / 180)) * 180
      } else {
          var p = curr
      }
      canvas.linemove(p);
    //   $('#ys').text(ajax.alldata[Math.floor(curr)].programGroup.CCTV)
    //   $('#ws').text(ajax.alldata[Math.floor(curr)].programGroup.satellite)
    //   $('#sj').text(ajax.alldata[Math.floor(curr)].programGroup.provincial)
    //   $('#dm').text(ajax.alldata[Math.floor(curr)].programGroup.ground)
    //   $('#qt').text(ajax.alldata[Math.floor(curr)].programGroup.other)
    //   $('#no1').text(ajax.alldata[Math.floor(curr)].top.No1)
    //   $('#no2').text(ajax.alldata[Math.floor(curr)].top.No2)
    //   $('#no3').text(ajax.alldata[Math.floor(curr)].top.No3)
    //   $('#no4').text(ajax.alldata[Math.floor(curr)].top.No4)
    //   $('#no5').text(ajax.alldata[Math.floor(curr)].top.No5)
  }


  var ajax = {
      Irdata: [], //流入数据
      Icdata: [], //流出数据
      audienceRating: [], //收视率
      timeAll: [],
      fisttime: null, //开始时间
      alldata: [], //所有数据
      domain: "http://220.180.229.163:8087",
      areaId: '',
      loadProgram: function() {
          var nowdate = new Date();
          var year = nowdate.getFullYear();
          var month = (nowdate.getMonth() + 1) < 10 ? '0' + (nowdate.getMonth() + 1) : (nowdate.getMonth() + 1);
          var date = nowdate.getDate() < 10 ? '0' + nowdate.getDate() : nowdate.getDate();
          var hour = '00';
          var min = '00';
          var second = '00';
          var mydate = year + '-' + month + '-' + date + ' ' + hour + ':' + min + ':' + second;
          var that = this;
          var channelId = $('#channelName').attr('channelId') || 11;
          var channelTypeCode = $('#typeName').attr('programtypecode') || 'anime';
          var startTime = $('#startTime').attr('timedata') || mydate;
        //   $.ajax({
        //       type: "POST",
        //       async: false,
        //       url: that.domain + '/starv-channel/program/getProgramIndex',
        //       data: {
        //           channelId: channelId,
        //           channelTypeCode: channelTypeCode,
        //           //   startTime: startTime
        //       },
        //       cache: false,
        //       dataType: "json",
        //       success: function(json) {
        //           //   console.log(json)
        //           $('#programUl').empty()
        //           if (json.success) {
        //               for (var i in json.data) {
        //                   $('#programUl').append('<li><a href="#" programId=' + json.data[i].programId + '>' + json.data[i].content + '</a></li>')
        //               }
        //               that.programClick();
        //               $('#programName').text(json.data[0].content)
        //               $('#programName').attr('programId', json.data[0].programId)
        //           }
        //       },
        //   });
      },
      programClick: function() {
          var that = this;
          $('#programUl li a').on('click', function() {
              $('#programName').text($(this).text())
              $('#programName').attr('programId', $(this).attr('programId'))
          })
      },
      loadLocation: function() {
          var that = this;
        //   $.ajax({
        //       type: "get",
        //       async: false,
        //       url: that.domain + '/starv-channel/area/getAllArea',
        //       cache: false,
        //       dataType: "json",
        //       success: function(json) {
        //           if (json.success) {
        //               for (var key in json.data) {
        //                   $('#LocationUl').append('<li><a href="#" areaId=' + json.data[key].areaId + '>' + json.data[key].areaName + '</a></li>')
        //               }
        //               that.locationClick()
        //               $('#locationName').text(json.data[0].areaName);
        //               $('#locationName').attr('areaid', json.data[0].areaId);
        //               that.areaId = json.data[0].areaId
        //           }
        //       },
        //   });
      },
      locationClick: function() {
          var that = this;
          $('#LocationUl li a').on('click', function() {
              $('#locationName').text($(this).text())
              $('#locationName').attr('areaId', $(this).attr('areaId'))
              that.channelLoad($(this).attr('areaId'));
          })
      },
      channelLoad: function(id) {
          var that = this;
        //   $.ajax({
        //       type: "POST",
        //       async: false,
        //       data: {
        //           areaId: id || that.areaId
        //       },
        //       url: that.domain + '/starv-channel/channel/getChannelByAreaId',
        //       cache: false,
        //       dataType: "json",
        //       success: function(json) {
        //           if (json.success) {
        //               $('#channelUl').empty();
        //               for (var key in json.data) {
        //                   $('#channelUl').append('<li><a href="#" channelId=' + json.data[key].channelId + '>' + json.data[key].channelName + '</a></li>')
        //               }
        //               that.channelClick();
        //               $('#channelName').text(json.data[0].channelName);
        //               $('#channelName').attr('channelId', json.data[0].channelId);
        //           }
        //       },
        //   });
      },
      channelClick: function() {
          var that = this;
          $('#channelUl li a').on('click', function() {
              $('#channelName').text($(this).text())
              $('#channelName').attr('channelId', $(this).attr('channelId'));

              that.loadProgram();
          })

      },
      typeLoad: function() {
          var that = this;
        //   $.ajax({
        //       type: "get",
        //       async: false,
        //       url: that.domain + '/starv-channel/program/getAllProgramType',
        //       cache: false,
        //       dataType: "json",
        //       success: function(json) {
        //           if (json.success) {
        //               for (var key in json.data) {
        //                   $('#typeUl').append('<li><a href="#" programTypeCode=' + json.data[key].programTypeCode + '>' + json.data[key].programTypeName + '</a></li>')
        //               }
        //               that.typeClick();
        //               $('#typeName').text(json.data[0].programTypeName)
        //               $('#typeName').attr('programtypecode', json.data[0].programTypeCode);
        //           }
        //       },
        //   });
      },
      typeClick: function() {
          var that = this;
          $('#typeUl li a').on('click', function() {
              $('#typeName').text($(this).text())
              $('#typeName').attr('programTypeCode', $(this).attr('programTypeCode'))
          })
          that.loadProgram();
      },
      loaddata: function() {
          var count = 0;
          var that = this;
          var channelId = $('#channelName').attr('channelId')
          var channelTypeCode = $('#typeName').attr('programtypecode')
          var startTime = $('#timeName').attr('timedata')
          var programId = $('#programName').attr('programid')
              //   console.log(channelId)
        //   $.ajax({
        //       type: "post",
        //       async: false,
        //       data: {
        //           channelId: channelId,
        //           channelTypeCode: channelTypeCode,
        //           startTime: startTime,
        //           programId: programId
        //       },
        //       url:  that.domain + '/starv-channel/channel/getChannelDetail',
        //       cache: false,
        //       dataType: "json",
        //       success: function(json) {
        //           console.log(json)
        //           that.Irdata = [];
        //           that.Icdata = [];
        //           that.audienceRating = [];
        //           that.timeAll = [];
        //           for (var i in json.data) {
        //               that.timeAll.push(canvas.timeformate(i))
        //               that.Irdata.push(json.data[i].lr)
        //               that.Icdata.push(json.data[i].lc)
        //               that.audienceRating.push(json.data[i].audienceRating)
        //           }
        //           var data = [];
        //           for (var i in json.data) {
        //               that.alldata.push(json.data[i])
        //               if (count == 0) { //取出第一个时间
        //                   that.fisttime = new Date(i).getTime()
        //               }
        //               data.push(json.data[i])
        //               count++
        //           }
        //           //   for (var i = 0; i < data.length; i++) { //每隔15s取一次数据
        //           //       if (i % 15 == 0) {
        //           //           that.Irdata.push(data[i].lr)
        //           //           that.Icdata.push(data[i].lc)
        //           //           that.audienceRating.push(data[i].audienceRating)
        //           //       }
        //           //   }

        //           var datainit = canvas.dealdata(that.Icdata, that.Irdata, that.audienceRating) //第一页的流入流出和收视率
        //           canvas.draw(datainit[0][1], datainit[1][1], datainit[2][1], that.fisttime); //第一次画；

        //       },
        //   });
      }

  }







  var header = {
      calendarbtn: function() {
          $('body').on('click', function(e) {
              $('#calendarboxes').hide();
          })
          $('#calendarbtn').on('click', function(e) {
              $('#calendarboxes').toggle();
              e.stopPropagation();
          })
      }
  }



  var canvas = {
      startpercen: 0,
      endpercen: 5,
      startTime: null,
      endTime: null,
      interval: 13,
      //转换成秒 00：00:00-> 0s
      tosecond: function(time) {
          var arr = time.split(':');
          var time = parseInt(arr[0] * 60 * 60) + parseInt(arr[1] * 60) + parseInt(arr[2]);
          return time
      },
      // 横线移动
      linemove: function(nowdate) { //传入的当前播放时间 秒（s）
          if (1.308 * (nowdate / 3) >= 43) {
              $('#Popup').animate({
                  'margin-left': '-100px'
              })
              $('#Popup2').animate({
                  'margin-left': '-215px'
              })
          } else {
              $('#Popup').animate({
                  'margin-left': '3px'
              })
              $('#Popup2').animate({
                  'margin-left': '98px'
              })
          }

          $("#line").css({
              "left": "" + 1.308 * (nowdate / 3) + "%" //比例乘以步长
          });
      },
      //处理数据
      dealdata: function(line1, line2, line3) {

          var times = Math.ceil(line1.length / this.interval); //次数
          var line1obj = {}
          var line2obj = {}
          var line3obj = {}
          var start = 0;
          for (var i = 1; i <= times; i++) {
              line1obj[i] = (line1.slice(start, this.interval * i))
              line2obj[i] = (line2.slice(start, this.interval * i))
              line3obj[i] = (line3.slice(start, this.interval * i))
              start = this.interval * i
          }
          return obj = [line1obj, line2obj, line3obj] //返回数组对象

      },
      // X轴的值
      Xdata: function(time) {
          var arr = [];
          for (var i = 0; i < this.interval; i++) {
              var endtime = this.timeformate(time + 15000 * i)
              arr.push(endtime)
          }
          return arr
      },
      //小时以下转换成时间戳
      hoursformate: function(s) { //传入时间格式为'9:51:43'
          var arr = (s.split(':'))
          var timechou = arr[0] * 60 * 60 * 1000 + arr[1] * 60 * 1000 + arr[2] * 1000;
          return timechou
      },
      //传入时间戳格式化(包含年月日的)
      timeformate: function(times) {
          var time = new Date(times)
          hours = (time.getHours() < 10) ? '0' + time.getHours() : time.getHours();
          minutes = (time.getMinutes() < 10) ? '0' + time.getMinutes() : time.getMinutes();
          seconds = (time.getSeconds() < 10) ? '0' + time.getSeconds() : time.getSeconds();
          date = hours + ':' + minutes + ':' + seconds;
          //   console.log(date)
          return date;
      },
      //画图
      draw: function(line1, line2, line3, time) { //流出/流入/收视率
          var myChart = echarts.init(document.getElementById('main'));
          var itemStyle = {
              normal: {},
              emphasis: {
                  barBorderWidth: 0.1,
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  shadowColor: 'rgba(0,0,0,0.5)'
              }
          };
          option = {
              dataZoom: [{
                  show: true,
                  realtime: true,
                  start: canvas.startpercen,
                  end: canvas.endpercen,
                  zoomOnMouseWheel: false,
              }],
              legend: {
                  data: ['流入', '流出', '收视率%'],
                  left: 'center',
                  textStyle: {
                      color: '#000000',
                      fontSize: 12,
                  },
              },
              xAxis: {
                  data: [],
                //   data: ajax.timeAll,
                  position: "top",
                  silent: false,
                  axisLine: {
                      onZero: true
                  },
                  splitLine: {
                      show: false
                  },
                  splitArea: {
                      show: false
                  },
                  axisTick: {
                      show: false
                  }
              },
              yAxis: [{
                  inverse: true,
                  name: '流入流出',
                  splitArea: {
                      show: false
                  },
                  splitLine: {
                      show: false
                  }
              }, {
                  type: 'value',
                  name: '收视率%',
                  splitLine: {
                      show: false
                  }
              }],
              grid: {
                  left: 100
              },

              series: [{
                  name: '流入',
                  type: 'bar',
                  stack: 'one',
                  data: [],
                //   data: ajax.Irdata,
              }, {
                  name: '流出',
                  type: 'bar',
                  stack: 'one',
                  data: [],
                //   data: ajax.Icdata,
              }, {
                  name: '收视率%',
                  type: 'line',
                  yAxisIndex: 1,
                  hoverAnimation: false,
                  data: [],
                //   data: ajax.audienceRating
              }]
          };
          myChart.setOption(option);
          window.onresize = myChart.resize;
          var xAxis = myChart.getModel().option.xAxis[0];
          var startTime = xAxis.data[xAxis.rangeStart];
          var endTime = xAxis.data[xAxis.rangeEnd];
          var a = canvas.tosecond(startTime)
          var b = canvas.tosecond(endTime)
          setInterval(function() {
              a++
              console.log(a)
                  //   xAxis.data[xAxis.rangeStart] =
          }, 1000)

          canvas.startTime = startTime;
          canvas.endTime = endTime;
          console.log(canvas.tosecond(canvas.endTime) - canvas.tosecond(canvas.endTime))
          myChart.on('datazoom', function(params) {
              canvas.startpercen = params.start;
              canvas.endpercen = params.end;

              var arr = startTime.split(':');
              var time = parseInt(arr[0] * 60 * 60) + parseInt(arr[1] * 60) + parseInt(arr[2]);
              //   curr(time)
          });
      }

  }