提交

src/views/ChannelList/ChannelList.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="channelList">
+  <div class="AbstractProgram">
     <el-breadcrumb separator-class="el-icon-arrow-right">
       <el-breadcrumb-item>传统媒体</el-breadcrumb-item>
-      <el-breadcrumb-item>频道全天节目</el-breadcrumb-item>
+      <el-breadcrumb-item>多维度筛选 频道时段排名</el-breadcrumb-item>
     </el-breadcrumb>
     <el-card class="box-card">
       <el-form
@@ -25,76 +25,33 @@
           >
           </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-form-item :label="v.name" v-for="(v, i) in searchDate" :key="i">
           <el-select
-            v-model="form.rangeTimeRange"
-            placeholder="请选择时段"
+            v-model="form.filter[v.key]"
+            :placeholder="'请选择' + v.name"
+            multiple
             collapse-tags
-            clearable
-            @change="timeSelect"
+            @change="se => select(v, se)"
           >
-            <el-option
-              v-for="item in cycle"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-              :disabled="item.disabled"
-            >
+            <el-option key="-1" v-if="v.id !== 'time'" label="全选" value="-1">
             </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="频道组">
-          <el-select
-            v-model="form.channelGroup"
-            placeholder="请选择频道组"
-            @change="channelSelect"
-          >
             <el-option
-              v-for="item in channelList"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-              :disabled="item.disabled"
+              v-for="item in v.list || []"
+              :key="item.id + ''"
+              :label="item.name"
+              :value="item.key + ''"
             >
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="区域">
-          <el-select
-            v-model="form.region"
-            placeholder="请选择区域"
-            @change="regionSelect"
-          >
-            <el-option-group
-              v-for="group in region"
-              :key="group.value"
-              :label="group.label"
-            >
-              <el-option
-                v-for="item in group.options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
-              </el-option>
-            </el-option-group>
-          </el-select>
-        </el-form-item>
         <el-form-item style="float: right">
-          <el-button type="primary" @click="onSubmit">查询</el-button>
-          <el-button type="primary" @click="onExport">导出</el-button>
+          <el-button type="primary" :loading="loading" @click="onSubmit"
+            >查询</el-button
+          >
+          <el-button type="primary" :loading="loading1" @click="onExport"
+            >导出</el-button
+          >
         </el-form-item>
       </el-form>
     </el-card>
@@ -102,7 +59,8 @@
     <el-card class="box-card">
       <line-charts
         :list="tableData"
-        xName="channel_2"
+        v-if="tableData.length"
+        xName="day"
         :keys="chartKeys"
       ></line-charts>
       <el-table
@@ -113,7 +71,7 @@
         <el-table-column
           align="center"
           show-overflow-tooltip
-          prop="channel_2"
+          prop="channel_0"
           label="省级卫视"
           class-name="nowrap"
         />
@@ -132,7 +90,7 @@
 
 <script>
 // @ is an alias to /src
-// import {  } from "@/api/index";
+import { tvselectDate, tvcountry } from "@/api/kuyun";
 
 import lineCharts from "@/views/Country/components/lineCharts";
 
@@ -141,6 +99,7 @@ export default {
   name: "Channel",
   data() {
     return {
+      searchDate: [],
       chartKeys: [
         {
           key: "indicators_tv_ratings",
@@ -164,111 +123,134 @@ export default {
         },
       ],
       form: {
-        rangeTime: [],
-        channelGroup: 0,
-        date: [
-          new Date(new Date() - 86400000),
-          new Date(new Date() - 86400000),
+        filter: {},
+        date: [],
+        field: [
+          "channel_0",
+          "day",
+          "minute",
+          "indicators_arrive_rank",
+          "indicators_loyal_rank",
+          "indicators_market_ratings_rank",
+          "indicators_loyal",
+          "indicators_arrive",
+          "indicators_market_ratings",
+          "indicators_tv_ratings",
+          "indicators_tv_ratings_rank",
         ],
-        region: -1,
+        info: 1,
+        org_id: 20,
       },
-      tableData: [
-        {
-          channel_2: "广东卫视",
-          indicators_arrive: "",
-          indicators_loyal: "",
-          indicators_market_ratings: 0.022008,
-          indicators_market_ratings_rank: 1,
-          indicators_tv_ratings: 0.003919,
-          indicators_tv_ratings_rank: 1,
-        },
-        {
-          channel_2: "湖南卫视",
-          indicators_arrive: "",
-          indicators_loyal: "",
-          indicators_market_ratings: 0.019602,
-          indicators_market_ratings_rank: 2,
-          indicators_tv_ratings: 0.00349,
-          indicators_tv_ratings_rank: 2,
-        },
-      ],
+      tableData: [],
+      loading: false,
+      loading1: false,
     };
   },
-  mounted() {},
-  computed: {
-    cycle() {
-      return config.cycle;
-    },
-    channelList() {
-      return config.channelList;
-    },
-    region() {
-      return config.region;
-    },
+  mounted() {
+    const d = new Date(Date.now() - 86400000);
+    let Y = d.getFullYear(),
+      M = d.getMonth() + 1,
+      D = d.getDate();
+    M > 9 ? "" : (M = "0" + M);
+    D > 9 ? "" : (D = "0" + D);
+    this.form.date = [[Y, M, D].join("-"), [Y, M, D].join("-")];
+    tvselectDate({
+      date: this.form.date,
+      key: 'channel_0,area_t_1,area_c_8,area_t_2,area_c_12,area_c_13,area_t_3',
+      org_id: 20,
+    }).then(r => {
+      let area = false;
+      this.searchDate = r || [];
+      for (let i = 0; i < this.searchDate.length; i++) {
+        const v = this.searchDate[i];
+        if (/area/.test(v.id)) {
+          if (area) continue;
+          area = true;
+          this.form.filter[v.id] = [v.list[0].key + ""];
+          continue;
+        }
+        this.form.filter[v.id] = [v.list[0].key + ""];
+      }
+      tvcountry(this.form)
+        .then(r => {
+          this.tableData = r || [];
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    });
   },
+  computed: {},
   methods: {
-    timeSelect(a) {
-      let end = (a || [])[(a || []).length - 1];
-      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;
+    onExport() {
+      this.loading1 = true;
+      let form = JSON.parse(JSON.stringify(this.form));
+      fetch(
+        config.base.kuyunApi +
+          "/api/evaluation/eye/download/performance/tvkpi/download",
+        {
+          method: "post",
+          responseType: "blob",
+          body: JSON.stringify(form),
+        }
+      )
+        .then(res => {
+          return res.blob();
+        })
+        .then(blob => {
+          new Blob([blob]);
+          let fileName = "多维度筛选 频道时段排名.csv";
+          var link = document.createElement("a");
+          link.href = window.URL.createObjectURL(blob);
+          link.download = fileName;
+          link.click();
+          window.URL.revokeObjectURL(link.href);
+          this.loading1 = false;
         });
-        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;
+    },
+    disabledDate(time) {
+      return time.getTime() > Date.now() - 86400000;
+    },
+    onSubmit() {
+      this.loading = true;
+      let form = JSON.parse(JSON.stringify(this.form));
+      let keys = Object.keys(this.form.filter);
+      for (let i = 0; i < keys.length; i++) {
+        const v = keys[i];
+        if (form.filter[v] != -1) continue;
+        for (let o = 0; o < this.searchDate.length; o++) {
+          const item = this.searchDate[o];
+          if (v === item.key) {
+            form.filter[v] = item.list.map(v => v.key);
             break;
           }
         }
-        if (!isSelect) {
-          let arr = (n.join(",") + ",")
-            .replace(end + ",", "")
-            .replace(/,$/, "");
-          this.form.rangeTimeRange = 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() {},
-    disabledDate(time) {
-      return time.getTime() > Date.now() - 86400000;
+      tvcountry(form)
+        .then(r => {
+          this.tableData = r || [];
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
     },
-    onSubmit() {},
     matrer(row, column, cellValue) {
+      if (typeof cellValue !== "number") return cellValue;
       return (cellValue * 100).toFixed(4) - 0 + "%";
     },
-    channelSelect(a) {
-      this.selectAll(a, "channelGroup", 0);
-    },
-    regionSelect(a) {
-      this.selectAll(a, "region", -1);
+    select(v, se) {
+      if (v.id === "time") {
+        this.timeSelect(se, v.id, "0000_2400");
+      } else this.timeSelect(se, v.id, "-1");
     },
-    selectAll(a, key, val) {
-      if (!a.length) return;
-      let select = a[a.length - 1];
-      if (select === val) this.form[key] = [val];
-      else
-        this.form[key] = (a.join(",") + ",")
-          .replace(val + ",", "")
-          .replace(/,$/, "")
-          .split(",");
+    timeSelect(a, key, all) {
+      let ngx = new RegExp(all + ",?", "g");
+      let end = (a || [])[(a || []).length - 1],
+        s = (a || []).join(",").replace(ngx, "");
+      if (end !== all) this.form.filter[key] = s ? s.split(",") : [];
+      else this.form.filter[key] = [all];
     },
   },
   components: { lineCharts },
@@ -276,10 +258,10 @@ export default {
 </script>
 
 <style>
-.channelList {
+.AbstractProgram {
   margin: 10px 15px;
 }
-.channelList .nowrap .cell {
+.AbstractProgram .nowrap .cell {
   white-space: nowrap;
 }
 </style>

src/views/SingleDay/SingleDay.vue

@@ -25,42 +25,33 @@
           >
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="频道">
+
+        <el-form-item :label="v.name" v-for="(v, i) in searchDate" :key="i">
           <el-select
-            v-model="form.channel"
-            placeholder="请选择频道"
+            v-model="form.filter[v.key]"
+            :placeholder="'请选择' + v.name"
             multiple
             collapse-tags
-            @change="channelSelect"
+            @change="se => select(v, se)"
           >
-            <el-option
-              v-for="item in channelList"
-              :key="item.label"
-              :label="item.label"
-              :value="item.label"
-              :disabled="item.disabled"
-            >
+            <el-option key="-1" v-if="v.id !== 'time'" label="全选" value="-1">
             </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="区域">
-          <el-select
-            v-model="form.region"
-            placeholder="请选择区域"
-            @change="regionSelect"
-          >
             <el-option
-              v-for="item in region"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
+              v-for="item in v.list || []"
+              :key="item.id + ''"
+              :label="item.name"
+              :value="item.key + ''"
             >
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item style="float: right">
-          <el-button type="primary" @click="onSubmit">查询</el-button>
-          <el-button type="primary" @click="onExport">导出</el-button>
+          <el-button type="primary" :loading="loading" @click="onSubmit"
+            >查询</el-button
+          >
+          <el-button type="primary" :loading="loading1" @click="onExport"
+            >导出</el-button
+          >
         </el-form-item>
       </el-form>
     </el-card>
@@ -68,7 +59,8 @@
     <el-card class="box-card">
       <line-charts
         :list="tableDate"
-        xName="day"
+        v-if="tableData.length"
+        xName="date"
         :keys="chartKeys"
       ></line-charts>
       <el-table
@@ -106,7 +98,7 @@
 
 <script>
 // @ is an alias to /src
-// import {  } from "@/api/index";
+import { tvselectDate, tvcountry } from "@/api/kuyun";
 
 import lineCharts from "@/views/Country/components/lineCharts";
 
@@ -116,75 +108,64 @@ export default {
   data() {
     return {
       form: {
-        channel: 0,
-        date: [
-          new Date(new Date() - 86400000),
-          new Date(new Date() - 86400000),
+        filter: {},
+        date: [],
+        field: [
+          "day",
+          "channel_2",
+          "indicators_arrive",
+          "indicators_market_ratings",
+          "indicators_tv_ratings",
         ],
-        region: 9,
+        info: 1,
+        org_id: 20,
       },
-      tableData: [
-        {
-          channel_2: "陕西卫视",
-          day: "2021-10-13",
-          indicators_arrive: 0.007999,
-          indicators_arrive_rank: 2,
-          indicators_market_ratings: 0.003225,
-          indicators_market_ratings_rank: 2,
-          indicators_tv_ratings: 0.000193,
-          indicators_tv_ratings_rank: 2,
-        },
-        {
-          channel_2: "陕西卫视",
-          day: "2021-10-14",
-          indicators_arrive: 0.009549,
-          indicators_arrive_rank: 2,
-          indicators_market_ratings: 0.003733,
-          indicators_market_ratings_rank: 2,
-          indicators_tv_ratings: 0.000228,
-          indicators_tv_ratings_rank: 2,
-        },
-        {
-          channel_2: "安徽卫视",
-          day: "2021-10-13",
-          indicators_arrive: 0.017338,
-          indicators_arrive_rank: 1,
-          indicators_market_ratings: 0.009368,
-          indicators_market_ratings_rank: 1,
-          indicators_tv_ratings: 0.000561,
-          indicators_tv_ratings_rank: 1,
-        },
-        {
-          channel_2: "安徽卫视",
-          day: "2021-10-14",
-          indicators_arrive: 0.019002,
-          indicators_arrive_rank: 1,
-          indicators_market_ratings: 0.009943,
-          indicators_market_ratings_rank: 1,
-          indicators_tv_ratings: 0.000608,
-          indicators_tv_ratings_rank: 1,
-        },
-      ],
+      searchDate: [],
+      loading: false,
+      loading1: false,
+      tableData: [],
     };
   },
-  mounted() {},
-  computed: {
-    channelList() {
-      return config.channelNameList;
-    },
-    region() {
-      let reg = config.region || [],
-        li = [];
-      for (let i = 0; i < reg.length; i++) {
-        const v = reg[i];
-        if (v.label === "行业分城") {
-          li = v.options || [];
-          break;
+  mounted() {
+    const d = new Date(Date.now() - 86400000);
+    let Y = d.getFullYear(),
+      M = d.getMonth() + 1,
+      D = d.getDate();
+    M > 9 ? "" : (M = "0" + M);
+    D > 9 ? "" : (D = "0" + D);
+    this.form.date = [[Y, M, D].join("-"), [Y, M, D].join("-")];
+    this.loading = true;
+    tvselectDate({
+      date: this.form.date,
+      key: "channel_2,area_t_1",
+      org_id: 20,
+    }).then(r => {
+      let area = false;
+      this.searchDate = r || [];
+      for (let i = 0; i < this.searchDate.length; i++) {
+        const v = this.searchDate[i];
+        if (/area/.test(v.id)) {
+          if (area) continue;
+          area = true;
+          this.form.filter[v.id] = [v.list[0].key + ""];
+          continue;
         }
+        this.form.filter[v.id] = [v.list[0].key + ""];
       }
-      return li;
-    },
+      tvcountry(this.form)
+        .then(res => {
+          console.log(res);
+          this.loading = false;
+          this.tableData = res || [];
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    });
+  },
+  computed: {
     tableDate() {
+      if (!this.tableData.length) return [];
       const obj = {};
 
       const b = [
@@ -289,29 +270,73 @@ export default {
     },
   },
   methods: {
-    onExport() {},
+    onExport() {
+      this.loading1 = true;
+      let form = JSON.parse(JSON.stringify(this.form));
+      fetch(
+        config.base.kuyunApi +
+          "/api/evaluation/eye/download/performance/tvkpi/download",
+        {
+          method: "post",
+          responseType: "blob",
+          body: JSON.stringify(form),
+        }
+      )
+        .then(res => {
+          return res.blob();
+        })
+        .then(blob => {
+          new Blob([blob]);
+          let fileName = "频道分地区收视.csv";
+          var link = document.createElement("a");
+          link.href = window.URL.createObjectURL(blob);
+          link.download = fileName;
+          link.click();
+          window.URL.revokeObjectURL(link.href);
+          this.loading1 = false;
+        });
+    },
     disabledDate(time) {
       return time.getTime() > Date.now() - 86400000;
     },
-    onSubmit() {},
+    onSubmit() {
+      this.loading = true;
+      let form = JSON.parse(JSON.stringify(this.form));
+      let keys = Object.keys(this.form.filter);
+      for (let i = 0; i < keys.length; i++) {
+        const v = keys[i];
+        if (form.filter[v] != -1) continue;
+        for (let o = 0; o < this.searchDate.length; o++) {
+          const item = this.searchDate[o];
+          if (v === item.key) {
+            form.filter[v] = item.list.map(v => v.key);
+            break;
+          }
+        }
+      }
+      tvcountry(form)
+        .then(r => {
+          this.tableData = r || [];
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
     matrer(row, column, cellValue) {
       return (cellValue * 100).toFixed(4) - 0 + "%";
     },
-    channelSelect(a) {
-      this.selectAll(a, "channel", 0);
-    },
-    regionSelect(a) {
-      this.selectAll(a, "region", -1);
+    select(v, se) {
+      if (v.id === "time") {
+        this.timeSelect(se, v.id, "0000_2400");
+      } else this.timeSelect(se, v.id, "-1");
     },
-    selectAll(a, key, val) {
-      if (!a.length) return;
-      let select = a[a.length - 1];
-      if (select === val) this.form[key] = [val];
-      else
-        this.form[key] = (a.join(",") + ",")
-          .replace(val + ",", "")
-          .replace(/,$/, "")
-          .split(",");
+    timeSelect(a, key, all) {
+      let ngx = new RegExp(all + ",?", "g");
+      let end = (a || [])[(a || []).length - 1],
+        s = (a || []).join(",").replace(ngx, "");
+      if (end !== all) this.form.filter[key] = s ? s.split(",") : [];
+      else this.form.filter[key] = [all];
     },
   },
   components: { lineCharts },