时间选择

src/App.vue

@@ -48,7 +48,7 @@ body .el-range-editor.is-active,body .el-select .el-input.is-focus .el-input__in
 body .el-date-table td.today span, body .el-select-dropdown__item.selected,body .el-select-dropdown.is-multiple .el-select-dropdown__item.selected{
   color: #313759 
 }
-body .el-date-editor--daterange.el-input__inner{
+body .el-date-editor--daterange.el-input__inner,body .el-date-editor--timerange.el-input__inner{
   width:220px
 }
 </style>

src/views/Channel.vue

@@ -25,9 +25,21 @@
           >
           </el-date-picker>
         </el-form-item>
+        <el-form-item label="时间">
+          <el-time-picker
+            v-model="form.rangeTime"
+            is-range
+            format="HH:mm"
+            @change="() => (form.rangeTimeRange = [])"
+            range-separator="-"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+          >
+          </el-time-picker>
+        </el-form-item>
         <el-form-item label="时段">
           <el-select
-            v-model="form.rangeTime"
+            v-model="form.rangeTimeRange"
             placeholder="请选择时段"
             multiple
             collapse-tags
@@ -94,7 +106,11 @@
         keyName="tv_name"
         :list="tableData"
       ></bilateral-bar-chart>
-      <el-table :data="tableData" :header-cell-style="{ backgroundColor: '#f4f5f7',color: '#606266' }" style="width: 100%">
+      <el-table
+        :data="tableData"
+        :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }"
+        style="width: 100%"
+      >
         <el-table-column align="center" prop="tv_name" label="节目" />
         <el-table-column
           align="center"
@@ -153,27 +169,43 @@ export default {
   methods: {
     timeSelect(a) {
       let end = (a || [])[(a || []).length - 1];
-      this.selectAll(a, "rangeTime", "0000_2400")
-      if(this.form.rangeTime.length === config.cycle.length - 1) return this.form.rangeTime = ["0000_2400"]
-      let n = (this.form.rangeTime || []).sort((a, b) => {
-        let aNum = a.split("_")[0];
-        let bNum = b.split("_")[0];
-        return aNum - bNum;
-      });
-      let isSelect = true;
-      for (let i = 0; i < n.length - 1; i++) {
-        let aNum = n[i].split("_")[1];
-        let bNum = n[i + 1].split("_")[0];
-        if (aNum !== bNum) {
-          isSelect = false;
-          break;
+      if (this.form.rangeTimeRange.length === config.cycle.length - 1) {
+        this.form.rangeTimeRange = ["0000_2400"];
+      } else {
+        let n = (this.form.rangeTimeRange || []).sort((a, b) => {
+          let aNum = a.split("_")[0];
+          let bNum = b.split("_")[0];
+          return aNum - bNum;
+        });
+        let isSelect = true;
+        for (let i = 0; i < n.length - 1; i++) {
+          let aNum = n[i].split("_")[1];
+          let bNum = n[i + 1].split("_")[0];
+          if (aNum !== bNum) {
+            isSelect = false;
+            break;
+          }
+        }
+        if (!isSelect) {
+          let arr = (n.join(",") + ",")
+            .replace(end + ",", "")
+            .replace(/,$/, "");
+          this.form.rangeTimeRange = arr.split(",");
         }
       }
-      if (!isSelect) {
-        let arr = (n.join(",") + ",").replace(end + ",", "").replace(/,$/, "");
-        this.form.rangeTime = arr.split(",");
-      }
+      if (!this.form.rangeTimeRange.length) return;
+      let s = this.form.rangeTimeRange[0].split("_")[0];
+      let e = this.form.rangeTimeRange[
+        this.form.rangeTimeRange.length - 1
+      ].split("_");
+      e = e[e.length - 1];
+      if(e == '2400') e = '2359'
+      this.form.rangeTime = [
+        new Date(1970, 1, 1, s[0] + s[1] - 0, s[2] + s[3] - 0),
+        new Date(1970, 1, 1, e[0] + e[1] - 0, e[2] + e[3] - 0),
+      ];
     },
+
     onExport() {
       channelcsv(this.formatListData());
     },
@@ -218,14 +250,29 @@ export default {
       let e = new Date(this.form.date[1]);
       let d1 = this.dateFormat(this.form.date[0]);
       let d2 = this.dateFormat(e.getTime() + 86400000);
-      let time = this.form.rangeTime.length
-        ? this.form.rangeTime
-        : ["0000_2400"];
-      let forTime =
-        time[0].split("_")[0] + "_" + time[time.length - 1].split("_")[1];
+      let time = "";
+      if (this.form.rangeTime.length) {
+        let start = new Date(this.form.rangeTime[0]);
+        let end = new Date(this.form.rangeTime[1]);
+        let start_hour = start.getHours();
+        let start_min = start.getMinutes();
+        let end_hour = end.getHours();
+        let end_min = end.getMinutes();
+        start_hour = start_hour > 9 ? start_hour + "" : "0" + start_hour;
+        start_min = start_min > 9 ? start_min + "" : "0" + start_min;
+        end_hour = end_hour > 9 ? end_hour + "" : "0" + end_hour;
+        end_min = end_min > 9 ? end_min + "" : "0" + end_min;
+        if(end_hour + end_min === '2359') {
+          end_hour = '24';
+          end_min = '00'
+        }
+        time = start_hour + start_min + "_" + end_hour + end_min;
+      } else {
+        time = "0000_2400";
+      }
       return {
         tv_type: this.form.channelGroup || this.channelList[0].value,
-        time_range: forTime,
+        time_range: time,
         area_id: this.form.region || this.region[0].value,
         start: [d1.year, d1.month, d1.day].join("-"),
         end: [d2.year, d2.month, d2.day].join("-"),
@@ -242,8 +289,7 @@ export default {
       let select = a[a.length - 1];
       if (select === val) this.form[key] = [val];
       else
-        this.form[key] = (a
-          .join(",")+',')
+        this.form[key] = (a.join(",") + ",")
           .replace(val + ",", "")
           .replace(/,$/, "")
           .split(",");
@@ -263,4 +309,7 @@ export default {
 .program .el-breadcrumb__item .el-breadcrumb__inner {
   font-weight: 700;
 }
+.program .has-seconds .el-time-spinner__wrapper:last-child {
+  display: none;
+}
 </style>

src/views/LiveChannel.vue

@@ -85,7 +85,7 @@
           <el-table-column prop="pv" label="播出时间" :formatter="liveTime" />
           <el-table-column
             prop="tv_ratings"
-            :formatter="matrer"
+            :formatter="matrerLive"
             label="收视率"
             width="180"
           />
@@ -198,6 +198,9 @@ export default {
     matrer(row, column, cellValue) {
       return cellValue.toFixed(4) + "%";
     },
+    matrerLive(row, column, cellValue) {
+      return (cellValue *100).toFixed(4) + "%";
+    },
     dateFormat(date) {
       let D = date ? new Date(date) : new Date();
       let m = D.getMonth() + 1;

src/views/Program.vue

@@ -23,9 +23,21 @@
           >
           </el-date-picker>
         </el-form-item>
+        <el-form-item label="时间">
+          <el-time-picker
+            v-model="form.rangeTime"
+            is-range
+            format="HH:mm"
+            @change="() => (form.rangeTimeRange = [])"
+            range-separator="-"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+          >
+          </el-time-picker>
+        </el-form-item>
         <el-form-item label="时段">
           <el-select
-            v-model="form.rangeTime"
+            v-model="form.rangeTimeRange"
             placeholder="请选择时段"
             multiple
             collapse-tags
@@ -119,7 +131,7 @@
       ></bilateral-bar-chart>
       <el-table
         :data="tableData"
-        :header-cell-style="{ backgroundColor: '#f4f5f7',color: '#606266' }"
+        :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }"
         style="width: 100%"
         @row-click="clickRow"
       >
@@ -201,6 +213,7 @@ export default {
   data() {
     return {
       form: {
+        rangeTimeRange: [],
         rangeTime: [],
         channelGroup: 0,
         classification: [],
@@ -241,27 +254,41 @@ export default {
   methods: {
     timeSelect(a) {
       let end = (a || [])[(a || []).length - 1];
-      this.selectAll(a, "rangeTime", "0000_2400");
-      if (this.form.rangeTime.length === config.cycle.length - 1)
-        return (this.form.rangeTime = ["0000_2400"]);
-      let n = (this.form.rangeTime || []).sort((a, b) => {
-        let aNum = a.split("_")[0];
-        let bNum = b.split("_")[0];
-        return aNum - bNum;
-      });
-      let isSelect = true;
-      for (let i = 0; i < n.length - 1; i++) {
-        let aNum = n[i].split("_")[1];
-        let bNum = n[i + 1].split("_")[0];
-        if (aNum !== bNum) {
-          isSelect = false;
-          break;
+      if (this.form.rangeTimeRange.length === config.cycle.length - 1) {
+        this.form.rangeTimeRange = ["0000_2400"];
+      } else {
+        let n = (this.form.rangeTimeRange || []).sort((a, b) => {
+          let aNum = a.split("_")[0];
+          let bNum = b.split("_")[0];
+          return aNum - bNum;
+        });
+        let isSelect = true;
+        for (let i = 0; i < n.length - 1; i++) {
+          let aNum = n[i].split("_")[1];
+          let bNum = n[i + 1].split("_")[0];
+          if (aNum !== bNum) {
+            isSelect = false;
+            break;
+          }
+        }
+        if (!isSelect) {
+          let arr = (n.join(",") + ",")
+            .replace(end + ",", "")
+            .replace(/,$/, "");
+          this.form.rangeTimeRange = arr.split(",");
         }
       }
-      if (!isSelect) {
-        let arr = (n.join(",") + ",").replace(end + ",", "").replace(/,$/, "");
-        this.form.rangeTime = arr.split(",");
-      }
+      if (!this.form.rangeTimeRange.length) return;
+      let s = this.form.rangeTimeRange[0].split("_")[0];
+      let e = this.form.rangeTimeRange[
+        this.form.rangeTimeRange.length - 1
+      ].split("_");
+      e = e[e.length - 1];
+      if(e == '2400') e = '2359'
+      this.form.rangeTime = [
+        new Date(1970, 1, 1, s[0] + s[1] - 0, s[2] + s[3] - 0),
+        new Date(1970, 1, 1, e[0] + e[1] - 0, e[2] + e[3] - 0),
+      ];
     },
     playTime(row) {
       return row.start_time.split(" ")[1] + "~" + row.end_time.split(" ")[1];
@@ -326,14 +353,29 @@ export default {
     },
     formatListData() {
       let d = this.dateFormat(this.form.date);
-      let time = this.form.rangeTime.length
-        ? this.form.rangeTime
-        : ["0000_2400"];
-      let forTime =
-        time[0].split("_")[0] + "_" + time[time.length - 1].split("_")[1];
+      let time = "";
+      if (this.form.rangeTime.length) {
+        let start = new Date(this.form.rangeTime[0]);
+        let end = new Date(this.form.rangeTime[1]);
+        let start_hour = start.getHours();
+        let start_min = start.getMinutes();
+        let end_hour = end.getHours();
+        let end_min = end.getMinutes();
+        start_hour = start_hour > 9 ? start_hour + "" : "0" + start_hour;
+        start_min = start_min > 9 ? start_min + "" : "0" + start_min;
+        end_hour = end_hour > 9 ? end_hour + "" : "0" + end_hour;
+        end_min = end_min > 9 ? end_min + "" : "0" + end_min;
+        if(end_hour + end_min === '2359') {
+          end_hour = '24';
+          end_min = '00'
+        }
+        time = start_hour + start_min + "_" + end_hour + end_min;
+      } else {
+        time = "0000_2400";
+      }
       return {
         tv_type: this.form.channelGroup || this.channelList[0].value,
-        time_range: forTime,
+        time_range: time,
         date: [d.year, d.month, d.day].join("-"),
         ca_type: this.form.classification.join(",") || [
           this.classification[0].value,
@@ -342,8 +384,8 @@ export default {
       };
     },
     classSelect(a) {
-      console.log(a,config.classification)
-      this.selectAll(a, "classification", '0');
+      console.log(a, config.classification);
+      this.selectAll(a, "classification", "0");
     },
     channelSelect(a) {
       this.selectAll(a, "channelGroup", 0);