提交

src/api/index.js

@@ -120,6 +120,7 @@ export function listcsv(data) {
 export function channel(data) {
   return ajax({
     url: '/api/protvlb',
+    resType: 't200',
     method: 'get',
     data,
   });
@@ -131,6 +132,7 @@ export function channel(data) {
 export function channelcsv(data) {
   return ajax({
     url: '/api/protvlb/csv',
+    resType: 't200',
     method: 'get',
     downCsv: true,
     data,

src/views/Channel.vue

@@ -103,7 +103,17 @@
     <el-card class="box-card">
       <bilateral-bar-chart
         v-if="tableData.length"
-        keyName="tv_name"
+        keyName="type"
+        :tabs="[
+          {
+            name: '收视率',
+            key: 'r',
+          },
+          {
+            name: '占有率',
+            key: 'mr',
+          },
+        ]"
         :list="tableData"
       ></bilateral-bar-chart>
       <el-table
@@ -112,16 +122,16 @@
         style="width: 100%"
       >
         <el-table-column type="index" />
-        <el-table-column align="center" prop="tv_name" label="节目" />
+        <el-table-column align="center" prop="type" label="频道" />
         <el-table-column
           align="center"
-          prop="tv_ratings"
+          prop="r"
           :formatter="matrer"
           label="收视率"
         />
         <el-table-column
           align="center"
-          prop="market_ratings"
+          prop="mr"
           :formatter="matrer"
           label="市占率"
         />
@@ -132,13 +142,13 @@
 
 <script>
 // @ is an alias to /src
-import { channel, channelcsv } from "@/api/index";
+import { channel } from '@/api/index';
 
-import bilateralBarChart from "@/components/bilateralBarChart";
+import bilateralBarChart from '@/components/bilateralBarChart';
 
-import config from "@/config/index";
+import config from '@/config/index';
 export default {
-  name: "Channel",
+  name: 'Channel',
   data() {
     return {
       form: {
@@ -171,36 +181,37 @@ export default {
     timeSelect(a) {
       let end = (a || [])[(a || []).length - 1];
       if (this.form.rangeTimeRange.length === config.cycle.length - 1) {
-        this.form.rangeTimeRange = ["0000_2400"];
+        this.form.rangeTimeRange = ['0000_2400'];
       } else {
         let n = (this.form.rangeTimeRange || []).sort((a, b) => {
-          let aNum = a.split("_")[0];
-          let bNum = b.split("_")[0];
+          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];
+          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(",");
+          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("_");
+      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'
+      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),
@@ -208,7 +219,26 @@ export default {
     },
 
     onExport() {
-      channelcsv(this.formatListData());
+      const p = this.formatListData();
+      let strcsv =
+        'data:text/csv;charset=utf-8,\uFEFF序号,频道,收视率(%),市占率(%)\r\n';
+      this.tableData.map((v, i) => {
+        strcsv += [
+          i + 1,
+          v.tvn,
+          ((v.r || 0) * 100).toFixed(4),
+          ((v.mr || 0) * 100).toFixed(4),
+          '\r\n',
+        ].join(',');
+      });
+      // 导出
+      let link = document.createElement('a');
+      link.id = 'download-csv';
+      link.setAttribute('href', encodeURI(strcsv));
+      link.setAttribute('download', `收视率收听率分析${p.start}/${p.end}.csv`);
+      // document.body.appendChild(link);
+      link.click();
+      link = undefined;
     },
     disabledDate(time) {
       return time.getTime() > Date.now() - 86400000;
@@ -216,15 +246,15 @@ export default {
     onSubmit() {
       channel(this.formatListData())
         .then(r => {
-          this.tableData = r.list;
+          this.tableData = r;
         })
         .catch(err => {
           this.tableData = [];
-          console.log("===", err);
+          console.log('===', err);
         });
     },
     matrer(row, column, cellValue) {
-      return (cellValue * 100).toFixed(4) + "%";
+      return (cellValue * 100).toFixed(4) + '%';
     },
     dateFormat(date) {
       let D = new Date(date);
@@ -233,11 +263,11 @@ export default {
       let h = D.getHours();
       let M = D.getMinutes();
       let s = D.getSeconds();
-      m > 9 ? m : (m = "0" + m);
-      d > 9 ? d : (d = "0" + d);
-      h > 9 ? h : (h = "0" + h);
-      M > 9 ? M : (M = "0" + M);
-      s > 9 ? s : (s = "0" + s);
+      m > 9 ? m : (m = '0' + m);
+      d > 9 ? d : (d = '0' + d);
+      h > 9 ? h : (h = '0' + h);
+      M > 9 ? M : (M = '0' + M);
+      s > 9 ? s : (s = '0' + s);
       return {
         year: D.getFullYear(),
         month: m,
@@ -251,7 +281,7 @@ 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 = "";
+      let time = '';
       if (this.form.rangeTime.length) {
         let start = new Date(this.form.rangeTime[0]);
         let end = new Date(this.form.rangeTime[1]);
@@ -259,41 +289,41 @@ export default {
         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') {
+        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'
+          end_min = '00';
         }
-        time = start_hour + start_min + "_" + end_hour + end_min;
+        time = start_hour + start_min + '_' + end_hour + end_min;
       } else {
-        time = "0000_2400";
+        time = '0000_2400';
       }
       return {
         tv_type: this.form.channelGroup || this.channelList[0].value,
         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("-"),
+        start: [d1.year, d1.month, d1.day].join('-'),
+        end: [d2.year, d2.month, d2.day].join('-'),
       };
     },
     channelSelect(a) {
-      this.selectAll(a, "channelGroup", 0);
+      this.selectAll(a, 'channelGroup', 0);
     },
     regionSelect(a) {
-      this.selectAll(a, "region", -1);
+      this.selectAll(a, 'region', -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(",");
+        this.form[key] = (a.join(',') + ',')
+          .replace(val + ',', '')
+          .replace(/,$/, '')
+          .split(',');
     },
   },
   components: { bilateralBarChart },