liyongli 3 anni fa
parent
commit
76bb2aa9d7
5 ha cambiato i file con 820 aggiunte e 91 eliminazioni
  1. 15 0
      css/style.css
  2. 19 16
      index.html
  3. 129 0
      index_21_9_8.html
  4. 86 75
      js/main.1.js
  5. 571 0
      js/main.1_21_9_8.js

+ 15 - 0
css/style.css

@@ -482,4 +482,19 @@
         left: -6px;
         bottom: 3px;
         background-color: #df5a5a;
+    }
+    #channelUl{
+        border-top: 1px solid #eee;
+        border-right: 1px solid #eee;
+        border-left: 1px solid #eee;
+        border-radius: 4px;
+    }
+    #channelUl .li{
+        border-bottom: 1px solid #eee;
+        line-height: 58px;
+        text-align: center;
+        cursor: pointer;
+    }
+    #channelUl .actSelect{
+        background-color: rgba(0, 0, 0, .3);
     }

+ 19 - 16
index.html

@@ -4,6 +4,12 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <meta
+      http-equiv="Cache-Control"
+      content="no-cache, no-store, must-revalidate"
+    />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
     <title>电视栏目收视分析</title>
     <link rel="stylesheet" href="./css/style.css" />
     <link rel="stylesheet" href="./css/calendar.css" />
@@ -22,10 +28,7 @@
             <div class="select_text" id="locationName">陕西</div>
             <ul class="select_ul" id="LocationUl" style="display: none"></ul>
           </div>
-          <div class="select">
-            <div class="select_text" id="channelName">陕西卫视</div>
-            <ul class="select_ul" id="channelUl" style="display: none"></ul>
-          </div>
+          <div id="channelUl"></div>
           <!-- <div class="select">
             <div class="select_text" id="typeName">动漫</div>
             <ul class="select_ul" id="typeUl" style="display: none"></ul>
@@ -41,15 +44,9 @@
             <ul class="select_ul" id="programUl" style="display: none"></ul>
           </div> -->
         </div>
-            <!-- src="https://djweb.smcic.net/media/huashan-2021-08-01.mp4" -->
+        <!-- src="https://djweb.smcic.net/media/huashan-2021-08-01.mp4" -->
         <div class="center">
-          <video
-            class="video"
-            id="video"
-            autoplay
-            controls
-            src=""
-          >
+          <video class="video" id="video" autoplay controls src="" loop>
             您的浏览器暂不支持!请下载谷歌浏览器或者更新的版本!
           </video>
           <div class="echarsbox">
@@ -81,14 +78,12 @@
                     <div id="now">当前时间:12:22:00</div>
                     <div class="lineinfobotom">
                       <div class="lineinfobotom-left">
-                        <p class="lineinfobotom-p">流入/流出</p>
+                        <!--<p class="lineinfobotom-p">流入/流出</p>
                         <div>央视频道:<span id="ys"></span></div>
                         <div>卫视频道:<span id="ws"></span></div>
                         <div>省级频道:<span id="sj"></span></div>
                         <div>地面频道:<span id="dm"></span></div>
-                        <!--<div>其他频道:<span id="qt"></span></div>-->
-                      </div>
-                      <div class="lineinfobotom-right">
+                        <div>其他频道:<span id="qt"></span></div>-->
                         <p class="lineinfobotom-p">流入排行</p>
                         <div>No1: <span id="no1"></span></div>
                         <div>No2: <span id="no2"></span></div>
@@ -96,6 +91,14 @@
                         <div>No4: <span id="no4"></span></div>
                         <div>No5: <span id="no5"></span></div>
                       </div>
+                      <div class="lineinfobotom-right">
+                        <p class="lineinfobotom-p">流出排行</p>
+                        <div>No1: <span id="lcno1"></span></div>
+                        <div>No2: <span id="lcno2"></span></div>
+                        <div>No3: <span id="lcno3"></span></div>
+                        <div>No4: <span id="lcno4"></span></div>
+                        <div>No5: <span id="lcno5"></span></div>
+                      </div>
                     </div>
                   </div>
                 </div>

+ 129 - 0
index_21_9_8.html

@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <meta
+      http-equiv="Cache-Control"
+      content="no-cache, no-store, must-revalidate"
+    />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>电视栏目收视分析</title>
+    <link rel="stylesheet" href="./css/style.css" />
+    <link rel="stylesheet" href="./css/calendar.css" />
+  </head>
+
+  <body>
+    <div class="head head-background">
+      <div class="body">
+        <p>电视栏目收视分析</p>
+      </div>
+    </div>
+    <div class="body">
+      <div class="midle">
+        <div class="left">
+          <div class="select">
+            <div class="select_text" id="locationName">陕西</div>
+            <ul class="select_ul" id="LocationUl" style="display: none"></ul>
+          </div>
+          <div id="channelUl"></div>
+          <!-- <div class="select">
+            <div class="select_text" id="typeName">动漫</div>
+            <ul class="select_ul" id="typeUl" style="display: none"></ul>
+          </div> -->
+          <!-- <div class="select">
+            <div class="select_text" id="timeName">日期</div>
+            <ul class="select_ul" id="noborder" style="display: none">
+              <div id="calendar" class="calendar"></div>
+            </ul>
+          </div> -->
+          <!-- <div class="select">
+            <div class="select_text" id="programName">暂无节目</div>
+            <ul class="select_ul" id="programUl" style="display: none"></ul>
+          </div> -->
+        </div>
+        <!-- src="https://djweb.smcic.net/media/huashan-2021-08-01.mp4" -->
+        <div class="center">
+          <video class="video" id="video" autoplay controls src="" loop>
+            您的浏览器暂不支持!请下载谷歌浏览器或者更新的版本!
+          </video>
+          <div class="echarsbox">
+            <div class="echarsbox">
+              <div id="main"></div>
+              <div id="linebox">
+                <div id="line">
+                  <div class="lineinfo">
+                    <div class="lineinfobackground"></div>
+                    <div class="lineinfotop">
+                      <div class="greenBox">
+                        <span class="red"></span>
+                        <span>流入</span>
+                      </div>
+                      <div class="redBox">
+                        <span class="green"></span>
+                        <span>流出</span>
+                      </div>
+                      <div class="lineBox">
+                        <span class="signline">
+                          <!-- <div></div> -->
+                          <span></span>
+                        </span>
+                        <span class="ssl">收视率%</span>
+                      </div>
+
+                      <div id="sslnum"></div>
+                    </div>
+                    <div id="now">当前时间:12:22:00</div>
+                    <div class="lineinfobotom">
+                      <div class="lineinfobotom-left">
+                        <p class="lineinfobotom-p">流入/流出</p>
+                        <div>央视频道:<span id="ys"></span></div>
+                        <div>卫视频道:<span id="ws"></span></div>
+                        <div>省级频道:<span id="sj"></span></div>
+                        <div>地面频道:<span id="dm"></span></div>
+                        <!--<div>其他频道:<span id="qt"></span></div>-->
+                      </div>
+                      <div class="lineinfobotom-right">
+                        <p class="lineinfobotom-p">流入排行</p>
+                        <div>No1: <span id="no1"></span></div>
+                        <div>No2: <span id="no2"></span></div>
+                        <div>No3: <span id="no3"></span></div>
+                        <div>No4: <span id="no4"></span></div>
+                        <div>No5: <span id="no5"></span></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="right">
+          <div class="right-box">
+            <div class="right-box-top">
+              <p>节目收视情况一览表</p>
+              <div class="right-box-top-times">
+                <span id="channelNameshow"></span>
+              </div>
+            </div>
+            <div class="right-box-bottom">
+              <div class="right-box-bottom-header">
+                <span class="header-left header-text">时间</span>
+                <span class="header-middle header-text">节目</span>
+                <span class="header-right header-text">收视率</span>
+              </div>
+              <div id="addHere"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script src="./js/jquery-2.1.0.js"></script>
+    <script src="./js/echarts.min.js"></script>
+    <script src="./js/main.1.js"></script>
+    <script src="./js/index.js"></script>
+    <script src="./js/calendar.js"></script>
+  </body>
+</html>

+ 86 - 75
js/main.1.js

@@ -1,10 +1,15 @@
 $(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");
@@ -15,14 +20,13 @@ $(function () {
     ajax.loaddata(item.dataUrl);
   });
 
-  $("#channelUl li").on("click", function () {
+  $("#channelUl .li").on("click", function () {
     if (ajax.channelName === $(this).text()) return;
-    $("#channelName").text($(this).text());
     $("#channelNameshow").text($(this).text());
-    $("#channelName").attr("channelId", $(this).attr("channelId"));
     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];
@@ -37,6 +41,7 @@ $(function () {
 });
 var ssss;
 var myChart;
+var load;
 var ajax = {
   domain: "https://djweb.smcic.net",
   Irdata: [],
@@ -52,18 +57,14 @@ var ajax = {
   AllDate: [],
   loaddata: function (api) {
     var that = this;
+    load = true;
     var programId = $("#programName").attr("programid");
     $.ajax({
       type: "get",
       async: true,
       data: {
         programId: programId,
-        // startTime: new Date($('#programName').attr('startTime')).getTime() / 1000,
-        // endTime: new Date($('#programName').attr('endTime')).getTime() / 1000
-        // programId: 129192,
-        // endTime: 10
       },
-      // url: that.domain + '/starv-channel/program/getProgramDetail',
       url: api,
       cache: false,
       dataType: "json",
@@ -84,11 +85,10 @@ var ajax = {
           );
         }
         ssss = that.timeAll[0];
+        canvas.startpercen = 0;
+        canvas.endpercen = 6.8;
         canvas.draw();
-        var myVid = document.getElementsByClassName("video")[0];
-        setInterval(function () {
-          canvas.linemove(myVid.currentTime);
-        }, 1000);
+        load = false;
       },
     });
   },
@@ -109,20 +109,12 @@ var ajax = {
   },
   loadProgram: function () {
     var that = this;
-    // var startTime = $("#timeName").text() + " 00:00:00";
-    // var endTime = $("#timeName").text() + " 24:00:00";
     $.ajax({
       type: "get",
       // type: "POST",
       async: false,
       url: that.domain + "/data/program.json",
-      // url: that.domain + "/starv-channel/program/getProgramIndex",
-      data: {
-        // programTypeCode: "",
-        // startTime: startTime,
-        // endTime: endTime,
-        // canPlay: true,
-      },
+      data: {},
       cache: false,
       dataType: "json",
       success: function (json) {
@@ -147,15 +139,6 @@ var ajax = {
 
         $("#video").attr("src", ajax.column[0].url);
         ajax.loaddata(ajax.column[0].dataUrl);
-        // that.programClick();
-        // $("#programName").text(json.data[0].content);
-        // $("#programName").attr("programId", json.data[0].programId);
-        // $("#programName").attr("endTime", json.data[0].endTime);
-        // $("#programName").attr("startTime", json.data[0].startTime);
-        // $("#programName").attr("url", json.data[0].playPath);
-        // $("#video").attr("src", json.data[0].playPath);
-
-        // ajax.loaddata();
       },
     });
   },
@@ -169,7 +152,6 @@ var ajax = {
       $("#programName").attr("startTime", $(this).attr("startTime"));
       $("#programName").attr("url", $(this).attr("playPath"));
       $("#video").attr("src", $(this).attr("url"));
-      // ajax.loaddata();
     });
   },
 };
@@ -180,7 +162,11 @@ var views = {
     // $("#channelUl").append('<li class="li">' + list[0] + "</li>");
     for (var i = 0; i < list.length; i++) {
       var v = list[i];
-      $("#channelUl").append('<li class="li">' + v + "</li>");
+      if (i === 0) {
+        $("#channelUl").append('<div class="li actSelect">' + v + "</div>");
+      } else {
+        $("#channelUl").append('<div class="li">' + v + "</div>");
+      }
     }
   },
   createColumn: function (list) {
@@ -230,6 +216,7 @@ var canvas = {
   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
@@ -243,53 +230,66 @@ var canvas = {
       Math.floor(nowsecend % 60) < 10
         ? "0" + Math.floor(nowsecend % 60)
         : Math.floor(nowsecend % 60);
-    var programGroup = ajax.AllDate[Math.floor(nowdate)].programGroup || {};
-    var lrTop = ajax.AllDate[Math.floor(nowdate)].lrTop || {};
+	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) || "";
-    if (lrTop.No1) $("#no1").text(lrTop.No1);
-    if (lrTop.No2) $("#no2").text(lrTop.No2);
-    if (lrTop.No3) $("#no3").text(lrTop.No3);
-    if (lrTop.No4) $("#no4").text(lrTop.No4);
-    if (lrTop.No5) $("#no5").text(lrTop.No5);
+    $("#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(ajax.AllDate[Math.floor(nowdate)].audienceRating, 100);
+    let p = Tool.accMul(allDate.audienceRating, 100);
     $("#sslnum").text(p.toFixed(2) + "%");
     var start = Tool.tosecond(this.startTime);
-    var cha = Tool.tosecond(this.endTime) - start;
-    if (nowdate > 0 && nowdate % cha == 0) {
-      this.pagenum = Math.floor(nowdate / cha);
-    } else {
-      this.pagenum = Math.floor(nowdate / cha) + 1;
-    }
-
-    if (
-      Tool.tosecond(this.endTime) - Tool.tosecond(ssss) < nowdate ||
-      start - Tool.tosecond(ssss) > nowdate
-    ) {
-      this.endpercen = this.fixendpercen * this.pagenum;
-      this.startpercen = this.fixendpercen * (this.pagenum - 1);
+    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));
+    // 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: step, //比例乘以步长
+      left: ((nowsecend - start) / cha) * 100 + "%", //比例乘以步长
     });
   },
-  draw: function (Refresh) {
+  draw: function () {
     //流出/流入/收视率
-    // var main =
     if(myChart) myChart.dispose();
     myChart = echarts.init(document.getElementById("main"));
 
@@ -297,7 +297,7 @@ var canvas = {
       dataZoom: [
         {
           maxSpan: 10,
-          minSpan: 1,
+          minSpan: 10,
           type: "slider",
           show: true,
           realtime: true,
@@ -348,7 +348,7 @@ var canvas = {
           show: false,
         },
         axisLabel: {
-          interval: 10,
+          interval: "auto",
           textStyle: {
             color: "#c5c6cc",
           },
@@ -460,19 +460,30 @@ var canvas = {
     var xAxis = myChart.getModel().option.xAxis
       ? myChart.getModel().option.xAxis[0]
       : { data: [] };
-    canvas.startTime =
-      xAxis.data[Math.floor((canvas.startpercen / 100) * xAxis.data.length)];
-    canvas.endTime =
-      xAxis.data[Math.floor((canvas.endpercen / 100) * xAxis.data.length)];
+    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: [] };
-      canvas.startTime =
-        xAxis.data[Math.floor((params.start / 100) * xAxis.data.length)];
-      canvas.endTime =
-        xAxis.data[Math.floor((params.end / 100) * xAxis.data.length)];
+      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) {
         //移动
 

+ 571 - 0
js/main.1_21_9_8.js

@@ -0,0 +1,571 @@
+$(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
+  // }
+};