提交

css/style.css

@@ -221,7 +221,7 @@
     }
 
     #linebox {
-        width: 90.5%;
+        width: 81.5%;
         height: 200px;
         /*background: red;*/
         position: absolute;
@@ -305,15 +305,19 @@
     }
 
     .header-left {
-        width: 23%;
+        width: 40%;
         display: inline-block;
         vertical-align: middle;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
     .header-middle {
         display: inline-block;
         vertical-align: middle;
-        width: 54%;
+        width: 40%;
+        padding-left: 3px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -322,11 +326,11 @@
     .header-right {
         vertical-align: middle;
         display: inline-block;
-        width: 20%
+        width: 15%
     }
 
     .progress {
-        width: 70%;
+        width: 100%;
         height: 5px;
         border-radius: 8px;
         background: #94959b;
@@ -474,8 +478,8 @@
     .act .selectAct {
         position: absolute;
         width: 3px;
-        height: 14px;
-        top: 10px;
+        top: 3px;
         left: -6px;
+        bottom: 3px;
         background-color: #df5a5a;
     }

index.html

@@ -108,9 +108,7 @@
             <div class="right-box-top">
               <p>节目收视情况一览表</p>
               <div class="right-box-top-times">
-                <span id="timeshow">2021年8月1日</span>
-                <span id="channelNameshow">陕西卫视</span>
-                <span>00:00-00:24</span>
+                <span id="channelNameshow"></span>
               </div>
             </div>
             <div class="right-box-bottom">

js/main.1.js

@@ -1,9 +1,5 @@
 $(function () {
-  // ajax.loadLocation();
-  // ajax.channelLoad();
-  // ajax.typeLoad();
   ajax.loadProgram();
-  // ajax.loadAllProgram();
 
   $(".right-box-bottom").scroll(function (e) {
     e.preventDefault();
@@ -18,16 +14,37 @@ $(function () {
     $("#video").attr("src", item.url);
     ajax.loaddata(item.dataUrl);
   });
+
+  $("#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);
+
+    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 ajax = {
   domain: "https://djweb.smcic.net",
   Irdata: [],
   Icdata: [],
   column: [],
+  channelList: [],
   // 存放code
   areaId: null,
-  channelCode: null,
   programTypeCode: null,
   // 存放code结束
   audienceRating: [],
@@ -75,117 +92,11 @@ var ajax = {
       },
     });
   },
-  loadLocation: function () {
-    // 解决
-    var that = this;
-    $.ajax({
-      type: "get",
-      async: false,
-      url: that.domain,
-      // 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  class="li" areaid=' +
-                json.data[key].areaCode +
-                ">" +
-                json.data[key].areaName +
-                "</li>"
-            );
-          }
-          that.locationClick();
-          $("#locationName").text(json.data[0].areaName);
-          $("#locationName").attr("areaid", json.data[0].areaCode);
-          that.areaId = json.data[0].areaCode;
-        }
-      },
-    });
-  },
   locationClick: function () {
     var that = this;
     $("#LocationUl li ").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",
-      type: "GET",
-      async: false,
-      data: {
-        areaCode: id || that.areaId,
-      },
-      url: that.domain,
-      // url: that.domain + '/starv-channel/channel/getChannelByAreaCode',
-      cache: false,
-      dataType: "json",
-      success: function (json) {
-        if (json.success) {
-          $("#channelUl").empty();
-          for (var key in json.data) {
-            $("#channelUl").append(
-              '<li class="li" channelId=' +
-                json.data[key].channelCode +
-                ">" +
-                json.data[key].channelName +
-                "</li>"
-            );
-          }
-
-          that.channelClick();
-          that.channelCode = json.data[3].channelCode;
-          $("#timeName").text(Tool.toTime().split(" ")[0]);
-          $("#timeshow").text(Tool.toCH($("#timeName").text()));
-          $("#channelNameshow").text(json.data[3].channelName);
-          $("#channelName").text(json.data[3].channelName);
-          $("#channelName").attr("channelId", json.data[3].channelCode);
-        }
-      },
-    });
-  },
-  channelClick: function () {
-    var that = this;
-    $("#channelUl li").on("click", function () {
-      $("#channelName").text($(this).text());
-      $("#channelNameshow").text($(this).text());
-      $("#channelName").attr("channelId", $(this).attr("channelId"));
-      that.loadProgram();
-      that.loadAllProgram();
-    });
-  },
-  typeLoad: function () {
-    var that = this;
-    $.ajax({
-      type: "get",
-      async: false,
-      url: that.domain,
-      // 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 class="li" programTypeCode=' +
-                json.data[key].programTypeCode +
-                ">" +
-                json.data[key].programTypeName +
-                "</li>"
-            );
-          }
-          that.typeClick();
-          that.programTypeCode = json.data[2].programTypeCode;
-          $("#typeName").text(json.data[2].programTypeName);
-          $("#typeName").attr("programtypecode", json.data[2].programTypeCode);
-        }
-      },
     });
   },
   typeClick: function () {
@@ -194,7 +105,6 @@ var ajax = {
       $("#typeName").text($(this).text());
       $("#typeName").attr("programTypeCode", $(this).attr("programTypeCode"));
       that.loadProgram();
-      that.loadAllProgram();
     });
   },
   loadProgram: function () {
@@ -208,7 +118,6 @@ var ajax = {
       url: that.domain + "/data/program.json",
       // url: that.domain + "/starv-channel/program/getProgramIndex",
       data: {
-        // channelCode: $("#channelName").attr("channelid"),
         // programTypeCode: "",
         // startTime: startTime,
         // endTime: endTime,
@@ -219,54 +128,25 @@ var ajax = {
       success: function (json) {
         // $("#programUl").empty();
         // if (!json.data.length) return $("#programName").text("暂无数据");
-        $("#addHere").empty();
         ajax.column = json.data || [];
-        if(!ajax.column.length) return;
-        ajax.loaddata(ajax.column[0]["dataUrl"]);
-        $("#video").attr("src",ajax.column[0]["url"]);
+        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];
-          // $("#programUl").append(
-          //   '<li class="li" url=' +
-          //     json.data[i].playPath +
-          //     " endTime =" +
-          //     json.data[i].endTime.replace(" ", "$") +
-          //     "   startTime =" +
-          //     json.data[i].startTime.replace(" ", "$") +
-          //     "  programId=" +
-          //     json.data[i].programId +
-          //     ">" +
-          //     json.data[i].content +
-          //     "</a></li>"
-          // );
-          var className = "right-box-bottom-header column";
-          i === 0 && (className += " act");
-          var div =
-            '<div index="' +
-            i +
-            '" class="' +
-            className +
-            '">' +
-            '<span class="header-left"><div class="selectAct"></div>' +
-            v.startTime.split(" ")[1] +
-            "</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 * 100 +
-            '%;" class="progressline"></div>' +
-            "</div>" +
-            "</div>" +
-            "</div>";
-          $("#addHere").append(div);
+          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);
         // that.programClick();
         // $("#programName").text(json.data[0].content);
         // $("#programName").attr("programId", json.data[0].programId);
@@ -279,55 +159,6 @@ var ajax = {
       },
     });
   },
-  loadAllProgram: 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 + '/starv-channel/program/getProgramIndex',
-      url: that.domain,
-      data: {
-        channelCode: $("#channelName").attr("channelid"),
-        programTypeCode: "",
-        startTime: startTime,
-        endTime: endTime,
-      },
-      cache: false,
-      dataType: "json",
-      success: function (json) {
-        if (json.success) {
-          if (json.data.length != 0) {
-            $("#addHere").empty();
-            for (var i in json.data) {
-              var div =
-                '<div class="right-box-bottom-header">' +
-                '<span class="header-left">' +
-                json.data[i].startTime.split(" ")[1] +
-                "</span>" +
-                '<span class="header-middle">' +
-                json.data[i].content +
-                "</span>" +
-                '<div class="header-right progressbox">' +
-                "<p>" +
-                Tool.accMul(json.data[i].audienceRating, 100) +
-                "%</p>" +
-                '<div class="progress">' +
-                '<div style="width: ' +
-                Tool.accMul(json.data[i].audienceRating, 100) * 100 +
-                '%;" class="progressline"></div>' +
-                "</div>" +
-                "</div>" +
-                "</div>";
-              $("#addHere").append(div);
-            }
-          }
-        }
-      },
-    });
-  },
 
   programClick: function () {
     var that = this;
@@ -342,6 +173,53 @@ var ajax = {
     });
   },
 };
+
+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];
+      $("#channelUl").append('<li class="li">' + v + "</li>");
+    }
+  },
+  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,
@@ -412,7 +290,8 @@ var canvas = {
   draw: function (Refresh) {
     //流出/流入/收视率
     // var main =
-    var myChart = echarts.init(document.getElementById("main"));
+    if(myChart) myChart.dispose();
+    myChart = echarts.init(document.getElementById("main"));
 
     option = {
       dataZoom: [
@@ -425,8 +304,8 @@ var canvas = {
           start: canvas.startpercen,
           end: canvas.endpercen,
           zoomOnMouseWheel: false,
-          bottom: 0,
-          top: "90%",
+          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,