jugou/js/main.1.js

$(function () {
  ajax.loadProgram();
  var time = 0;
  $(".right-box-bottom").scroll(function (e) {
    e.preventDefault();
  });

  $("#video").on("timeupdate", function (e) {
    if(time === 0) return time++
    canvas.linemove(this.currentTime);
  });

  $("#addHere").on("click", ".column", function () {
    if ($(this).hasClass("act")) return;
    var index = $(this).attr("index");
    var item = ajax.column && ajax.column.length ? ajax.column[index] : {};
    $(".act").removeClass("act");
    $(this).addClass("act");
    $("#video").attr("src", item.url);
    ajax.loaddata(item.dataUrl);
  });

  $("#channelUl .li").on("click", function () {
    if (ajax.channelName === $(this).text()) return;
    $("#channelNameshow").text($(this).text());
    ajax.channelName = $(this).text();
    views.createColumn(ajax.column);
    $(".actSelect").removeClass("actSelect");
    $(this).addClass("actSelect");
    var item = {};
    for (var i = 0; i < ajax.column.length; i++) {
      var v = ajax.column[i];
      if (ajax.channelName === v.channelName) {
        item = v;
        break;
      }
    }
    $("#video").attr("src", item.url);
    ajax.loaddata(item.dataUrl);
  });
});
var ssss;
var myChart;
var load;
var ajax = {
  domain: "https://djweb.smcic.net",
  Irdata: [],
  Icdata: [],
  column: [],
  channelList: [],
  // 存放code
  areaId: null,
  programTypeCode: null,
  // 存放code结束
  audienceRating: [],
  timeAll: [],
  AllDate: [],
  loaddata: function (api) {
    var that = this;
    load = true;
    var programId = $("#programName").attr("programid");
    $.ajax({
      type: "get",
      async: true,
      data: {
        programId: programId,
      },
      url: api,
      cache: false,
      dataType: "json",
      success: function (json) {
        that.Irdata = [];
        that.Icdata = [];
        that.audienceRating = [];
        that.timeAll = [];
        that.AllDate = [];

        for (var i in json.data) {
          that.AllDate.push(json.data[i]);
          that.timeAll.push(Tool.timeformate(i));
          that.Irdata.push(json.data[i].lr);
          that.Icdata.push(-1 * json.data[i].lc);
          that.audienceRating.push(
            Tool.accMul(json.data[i].audienceRating, 100)
          );
        }
        ssss = that.timeAll[0];
        canvas.startpercen = 0;
        canvas.endpercen = 6.8;
        canvas.draw();
        load = false;
      },
    });
  },
  locationClick: function () {
    var that = this;
    $("#LocationUl li ").on("click", function () {
      $("#locationName").text($(this).text());
      $("#locationName").attr("areaId", $(this).attr("areaId"));
    });
  },
  typeClick: function () {
    var that = this;
    $("#typeUl li").on("click", function () {
      $("#typeName").text($(this).text());
      $("#typeName").attr("programTypeCode", $(this).attr("programTypeCode"));
      that.loadProgram();
    });
  },
  loadProgram: function () {
    var that = this;
    $.ajax({
      type: "get",
      // type: "POST",
      async: false,
      url: that.domain + "/data/program.json",
      data: {},
      cache: false,
      dataType: "json",
      success: function (json) {
        // $("#programUl").empty();
        // if (!json.data.length) return $("#programName").text("暂无数据");
        ajax.column = json.data || [];
        if (!ajax.column.length) return;
        $("#channelNameshow").text(ajax.column[0].channelName);
        $("#channelName").text(ajax.column[0].channelName);
        var channel = {};
        that.channelName = ajax.column[0].channelName;
        for (var i = 0; i < ajax.column.length; i++) {
          var v = json.data[i];
          if (!channel[v.channelName]) {
            ajax.channelList.push(v.channelName);
            channel[v.channelName] = true;
          }
          continue;
        }
        views.createChannel(ajax.channelList);
        views.createColumn(ajax.column);

        $("#video").attr("src", ajax.column[0].url);
        ajax.loaddata(ajax.column[0].dataUrl);
      },
    });
  },

  programClick: function () {
    var that = this;
    $("#programUl li").on("click", function () {
      $("#programName").text($(this).text());
      $("#programName").attr("programId", $(this).attr("programId"));
      $("#programName").attr("endTime", $(this).attr("endTime"));
      $("#programName").attr("startTime", $(this).attr("startTime"));
      $("#programName").attr("url", $(this).attr("playPath"));
      $("#video").attr("src", $(this).attr("url"));
    });
  },
};

var views = {
  createChannel: function (list) {
    $("#channelUl").empty();
    // $("#channelUl").append('<li class="li">' + list[0] + "</li>");
    for (var i = 0; i < list.length; i++) {
      var v = list[i];
      if (i === 0) {
        $("#channelUl").append('<div class="li actSelect">' + v + "</div>");
      } else {
        $("#channelUl").append('<div class="li">' + v + "</div>");
      }
    }
  },
  createColumn: function (list) {
    var select = -1;
    $("#addHere").empty();
    for (var i = 0; i < list.length; i++) {
      var v = list[i];
      if (ajax.channelName !== v.channelName) continue;
      select++;
      var className = "right-box-bottom-header column";
      select === 0 && (className += " act");
      var div =
        '<div index="' +
        i +
        '" class="' +
        className +
        '">' +
        '<span class="header-left"><div class="selectAct"></div>' +
        v.startTime +
        "</span>" +
        '<span class="header-middle">' +
        v.content +
        "</span>" +
        '<div class="header-right progressbox">' +
        "<p>" +
        v.audienceRating +
        "%</p>" +
        '<div class="progress">' +
        '<div style="width: ' +
        v.audienceRating +
        '%;" class="progressline"></div>' +
        "</div>" +
        "</div>" +
        "</div>";
      $("#addHere").append(div);
    }
  },
};

var canvas = {
  startpercen: 0,
  endpercen: 6.8,
  fixendpercen: 6.8,
  startTime: null,
  endTime: null,
  pagenum: 1,
  innernowdata: null,
  linemove: function (nowdate) {
    // return;
    if (!ajax.AllDate || !ajax.AllDate.length || load) return;
    var nowsecend = Math.floor(nowdate + Tool.tosecond(ssss));
    var h =
      Math.floor((nowsecend / 60 / 60) % 24) < 10
        ? "0" + Math.floor((nowsecend / 60 / 60) % 24)
        : Math.floor((nowsecend / 60 / 60) % 24);
    var m =
      Math.floor((nowsecend / 60) % 60) < 10
        ? "0" + Math.floor((nowsecend / 60) % 60)
        : Math.floor((nowsecend / 60) % 60);
    var s =
      Math.floor(nowsecend % 60) < 10
        ? "0" + Math.floor(nowsecend % 60)
        : Math.floor(nowsecend % 60);
	var allDate = ajax.AllDate[Math.floor(nowdate)] || {};
    var programGroup = allDate.programGroup || {};
    var lrTop = allDate.lrTop || {};
    var lcTop = allDate.lcTop || {};
    $("#ys").text(programGroup.CCTV) || "";
    $("#ws").text(programGroup.satellite) || "";
    $("#sj").text(programGroup.provincial) || "";
    $("#dm").text(programGroup.ground) || "";
    $("#qt").text(programGroup.other) || "";
    $("#no1").text(lrTop.No1 || "");
    $("#no2").text(lrTop.No2 || "");
    $("#no3").text(lrTop.No3 || "");
    $("#no4").text(lrTop.No4 || "");
    $("#no5").text(lrTop.No5 || "");
	
    $("#lcno1").text(lcTop.No1 || "");
    $("#lcno2").text(lcTop.No2 || "");
    $("#lcno3").text(lcTop.No3 || "");
    $("#lcno4").text(lcTop.No4 || "");
    $("#lcno5").text(lcTop.No5 || "");
    $("#now").text("当前时间:" + h + ":" + m + ":" + s);
    let p = Tool.accMul(allDate.audienceRating, 100);
    $("#sslnum").text(p.toFixed(2) + "%");
    var start = Tool.tosecond(this.startTime);
    var end = Tool.tosecond(this.endTime);
    var cha = end - start;
    // if (nowdate > 0 && nowdate % cha == 0) {
    //   this.pagenum = Math.floor(nowdate / cha);
    // } else {
    //   this.pagenum = Math.floor(nowdate / cha) + 1;
    // }
    // Tool.tosecond(this.endTime) - Tool.tosecond(ssss) < nowdate ||
    // start - Tool.tosecond(ssss) > nowdate
    if (nowsecend < start || end <= nowsecend) {
      var video = $("#video")[0];
      this.startpercen = (video.currentTime / video.duration) * 100;
      this.endpercen = this.startpercen + this.fixendpercen;
      this.draw();
      $("#line").css({
        // "left": 500 * ((nowdate % cha) / cha) //比例乘以步长
        //  "left": Tool.accMul((Math.round(nowdate) % cha) / cha, 500) //比例乘以步长
        left: "0%", //比例乘以步长
      });
      return;
    }
    // var step =
    //   ($("#linebox").innerWidth() * (Tool.tosecond(ssss) + nowdate - start)) /
    //   cha;
    // var t =
    //   nowdate -
    //   (new Date("2021-01-01 " + this.startTime) -
    //     new Date("2021-01-01 " + ssss));
    $("#line").css({
      // "left": 500 * ((nowdate % cha) / cha) //比例乘以步长
      //  "left": Tool.accMul((Math.round(nowdate) % cha) / cha, 500) //比例乘以步长
      left: ((nowsecend - start) / cha) * 100 + "%", //比例乘以步长
    });
  },
  draw: function () {
    //流出/流入/收视率
    if(myChart) myChart.dispose();
    myChart = echarts.init(document.getElementById("main"));

    option = {
      dataZoom: [
        {
          maxSpan: 10,
          minSpan: 10,
          type: "slider",
          show: true,
          realtime: true,
          start: canvas.startpercen,
          end: canvas.endpercen,
          zoomOnMouseWheel: false,
          height: "30",
          top: "85%",
          handleIcon:
            "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
          handleSize: 15,
          textStyle: {
            color: "#c5c6cc",
          },
          dataBackground: {
            lineStyle: {
              color: "#fff",
            },
            areaStyle: {
              color: "#8b51a8",
            },
          },
        },
      ],
      legend: {
        show: false,
        data: ["流入", "流出", "收视率%"],
        left: "center",
        textStyle: {
          color: "#000000",
          fontSize: 12,
        },
      },
      xAxis: {
        data: ajax.timeAll,
        position: "top",
        silent: false,
        axisLine: {
          onZero: true,
        },
        splitLine: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: "auto",
          textStyle: {
            color: "#c5c6cc",
          },
          rotate: "-90",
        },
      },
      yAxis: [
        {
          scale: false,
          nameGap: 6,
          inverse: false,
          name: "流入流出",
          nameLocation: "start",
          splitArea: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#c5c6cc",
            },
            formatter: function (value, index) {
              let v = value;
              if (v < 0) v *= -1;
              return v;
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          nameTextStyle: {
            color: "#c5c6cc",
          },
        },
        {
          scale: true,
          nameGap: 6,
          type: "value",
          name: "收视率%",
          nameLocation: "start",
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#c5c6cc",
            },
          },
          nameTextStyle: {
            color: "#c5c6cc",
          },
        },
      ],
      grid: {},

      series: [
        {
          name: "流入",
          type: "bar",
          yAxisIndex: 0,
          stack: "one",
          data: ajax.Irdata,
          itemStyle: {
            normal: {
              color: "#df5a5a",
            },
          },
        },
        {
          name: "流出",
          type: "bar",
          yAxisIndex: 0,
          stack: "one",
          data: ajax.Icdata,
          itemStyle: {
            normal: {
              color: "#6ab581",
            },
          },
        },
        {
          name: "收视率%",
          type: "line",
          yAxisIndex: 1,
          smooth: true,
          showSymbol: false,
          data: ajax.audienceRating,
          lineStyle: {
            width: 1,
            color: "#50abfd",
          },
        },
      ],
    };
    myChart.setOption(option);

    window.onresize = myChart.resize;
    var xAxis = myChart.getModel().option.xAxis
      ? myChart.getModel().option.xAxis[0]
      : { data: [] };
    var len = xAxis.data.length;
    var video = $("#video")[0];
    // if(load) video.currentTime = 0;
    var e =
      canvas.endpercen > 100
        ? len - 1
        : Math.floor((canvas.endpercen / 100) * (len - 1));
    canvas.startTime = xAxis.data[Math.floor(video.currentTime)];
    canvas.endTime = xAxis.data[e];
    if (e >= len - 1) {
      canvas.startTime =
        xAxis.data[e - Math.ceil((len * canvas.fixendpercen) / 100)];
    }
    if (Math.floor(video.currentTime) === 0) {
      canvas.endTime = xAxis.data[Math.ceil((len * canvas.fixendpercen) / 100)];
    }
    myChart.on("datazoom", function (params) {
      this.setOption({ animation: false });
      var xAxis = myChart.getModel().option.xAxis
        ? myChart.getModel().option.xAxis[0]
        : { data: [] };
      var len = (xAxis.data || []).length - 1;
      canvas.startTime = xAxis.data[Math.floor((params.start / 100) * len)];
      canvas.endTime = xAxis.data[Math.floor((params.end / 100) * len)];
      if (Math.round(params.end - params.start) == canvas.fixendpercen) {
        //移动

        $("#line").css({
          left: 0, //比例乘以步长
        });
      } else {
        //拉伸
        canvas.fixendpercen = Math.round(params.end - params.start);
      }

      //改变
      var myVid = document.getElementsByClassName("video")[0];
      myVid.currentTime = Tool.tosecond(canvas.startTime) - Tool.tosecond(ssss);
      canvas.linemove(myVid.currentTime);
    });
  },
};
// 工具类
var Tool = {
  timeformate: function (times) {
    //传时间戳 2017-02-02 00:00:00 返回 00:00:00
    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;
    return date;
  },
  toTime: function () {
    //转换成 2017-09-09
    var date = new Date("2017-06-05");
    var year = date.getFullYear();
    var month =
      date.getMonth() + 1 < 10
        ? "0" + (date.getMonth() + 1)
        : date.getMonth() + 1;
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var min =
      date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var second =
      date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    return (
      year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + second
    );
  },
  tosecond: function (time) {
    //传入00:00:00 导出 多少秒
    if (!time) return "";
    var arr = time.split(":");
    var time =
      parseInt(arr[0] * 60 * 60) + parseInt(arr[1] * 60) + parseInt(arr[2]);
    return time;
  },
  toCH: function (time) {
    //输入2014-01-01 转换成2014年01月01日
    return (
      time.split("-")[0] + "年" + time.split("-")[1] + "月" + time.split("-")[2]
    );
  },
  accMul: function (arg1, arg2) {
    var m = 0,
      s1 = arg1.toString(),
      s2 = arg2.toString();
    try {
      m += s1.split(".")[1].length;
    } catch (e) {}
    try {
      m += s2.split(".")[1].length;
    } catch (e) {}
    return (
      (Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) /
      Math.pow(10, m)
    );
  },
  // secToTime: function(nowsecend) {
  //     var h = (Math.floor(nowsecend / 60 / 60 % 24)) < 10 ? '0' + Math.floor(nowsecend / 60 / 60 % 24) : Math.floor(nowsecend / 60 / 60 % 24);
  //     var m = Math.floor(nowsecend / 60 % 60) < 10 ? '0' + Math.floor(nowsecend / 60 % 60) : Math.floor(nowsecend / 60 % 60);
  //     var s = Math.floor(nowsecend % 60) < 10 ? '0' + Math.floor(nowsecend % 60) : Math.floor(nowsecend % 60);
  //     return h + ':' + m + ':' + s
  // }
};