提交

src/api/kuyun.js

@@ -8,41 +8,41 @@ import fileDownload from "@/utils/download.js";
  * @param {*} data
  * @returns {AxjxPromise}
  */
- export function selectDate(data) {
-    return ajax({
-      urlType: "kuyunApi",
-      url: "/api/evaluation/eye/performance/absepg_filter",
-      method: "POST",
-      data,
-    });
-  }
-  /**
-   *
-   * @param {*} data
-   * @returns {AxjxPromise}
-   */
-  export function epgselectDate(data) {
-    return ajax({
-      urlType: "kuyunApi",
-      url: "/api/evaluation/eye/performance/epg_filter",
-      method: "POST",
-      data,
-    });
-  }
+export function selectDate(data) {
+  return ajax({
+    urlType: "kuyunApi",
+    url: "/api/evaluation/eye/performance/absepg_filter",
+    method: "POST",
+    data,
+  });
+}
+/**
+ *
+ * @param {*} data
+ * @returns {AxjxPromise}
+ */
+export function epgselectDate(data) {
+  return ajax({
+    urlType: "kuyunApi",
+    url: "/api/evaluation/eye/performance/epg_filter",
+    method: "POST",
+    data,
+  });
+}
 
-  /**
-   *
-   * @param {*} data
-   * @returns {AxjxPromise}
-   */
-   export function tvselectDate(data) {
-    return ajax({
-      urlType: "kuyunApi",
-      url: "/api/evaluation/eye/performance/tv_filter",
-      method: "POST",
-      data,
-    });
-  }
+/**
+ *
+ * @param {*} data
+ * @returns {AxjxPromise}
+ */
+export function tvselectDate(data) {
+  return ajax({
+    urlType: "kuyunApi",
+    url: "/api/evaluation/eye/performance/tv_filter",
+    method: "POST",
+    data,
+  });
+}
 
 /**
  * 频道全天节目
@@ -219,14 +219,13 @@ export function epgcountry(data) {
  * @props epg_ids=&area_id=
  * @return {AxjxPromise}
  */
- export function singleProgram(data) {
-    return ajax({
-      urlType: "kuyunApi",
-      url: "/api/evaluation/eye/EpgInputOutputAction?kpi=tv_ratings&" + data,
-      method: "GET",
-    });
-  }
-
+export function singleProgram(data) {
+  return ajax({
+    urlType: "kuyunApi",
+    url: "/api/evaluation/eye/EpgInputOutputAction?kpi=tv_ratings&" + data,
+    method: "GET",
+  });
+}
 
 /**
  * 实时节目流入流出
@@ -234,24 +233,59 @@ export function epgcountry(data) {
  * @return {AxjxPromise}
  */
 export function realflow(data) {
-    return ajax({
-      urlType: "kuyunApi",
-      url: "/api/evaluation/eye/TimelyTvInputOutputAction?" + data,
-      method: "GET",
-    });
-  }
-
+  return ajax({
+    urlType: "kuyunApi",
+    url: "/api/evaluation/eye/TimelyTvInputOutputAction?" + data,
+    method: "GET",
+  });
+}
 
 /**
  * 频道分地区
- * @props 
+ * @props
  * @return {AxjxPromise}
  */
 export function tvcountry(data) {
-    return ajax({
-      urlType: "kuyunApi",
-      url: "/api/evaluation/eye/performance/tvkpi",
-      method: "POST",
-      data,
-    });
-  }
+  return ajax({
+    urlType: "kuyunApi",
+    url: "/api/evaluation/eye/performance/tvkpi",
+    method: "POST",
+    data,
+  });
+}
+/**
+ * 频道分地区
+ * @props
+ * @return {AxjxPromise}
+ */
+export function tvvscountry(data) {
+  return ajax({
+    urlType: "kuyunApi",
+    url: "/api/evaluation/eye/TvDailyAVGKPITrendAction?" + data,
+    method: "get",
+  });
+}
+/**
+ * tvList
+ * @props
+ * @return {AxjxPromise}
+ */
+export function tvlist(){
+  return ajax({
+    urlType: "kuyunApi",
+    url: "/api/evaluation/eye/ProChannelListAction",
+    method: "get",
+  });
+}
+/**
+ * tvList
+ * @props
+ * @return {AxjxPromise}
+ */
+export function tvlistexport(data,fileName,  call){
+  return fileDownload({
+    urlType: "kuyunApi",
+    url: "/api/evaluation/eye/download/api/eye/TvDailyAVGKPITrendAction?" + data,
+    method: "get",
+  },fileName, call);
+}

src/views/Average/Average.vue

@@ -13,6 +13,14 @@
         label-width="120px"
         class="demo-form-inline"
       >
+        <el-form-item label="主频道">
+          <el-autocomplete
+            v-model="form.program"
+            :fetch-suggestions="querySearchAsync"
+            placeholder="请输入频道"
+            @select="handleSelect"
+          />
+        </el-form-item>
         <el-form-item label="日期">
           <el-date-picker
             v-model="form.date"
@@ -25,38 +33,21 @@
           >
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="主频道">
-          <el-select
-            v-model="form.channel"
-            placeholder="请选择频道"
-            multiple
-            collapse-tags
-            @change="channelSelect"
-          >
-            <el-option
-              v-for="item in channelList"
-              :key="item.label"
-              :label="item.label"
-              :value="item.label"
-              :disabled="item.disabled"
-            >
-            </el-option>
-          </el-select>
-        </el-form-item>
         <el-form-item label="对比频道">
           <el-select
-            v-model="form.contrastChannel"
-            placeholder="请选择频道"
+            v-model="form.vs"
+            placeholder="请选择时段"
             multiple
             collapse-tags
-            @change="channelSelect"
+            filterable
+            clearable
+            :multiple-limit="4"
           >
             <el-option
-              v-for="item in channelList"
-              :key="item.label"
-              :label="item.label"
-              :value="item.label"
-              :disabled="item.disabled"
+              v-for="item in tvList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
             >
             </el-option>
           </el-select>
@@ -69,8 +60,8 @@
           ></el-cascader>
         </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>
@@ -78,7 +69,8 @@
     <el-card class="box-card">
       <line-charts
         :list="tableDate"
-        xName="day"
+        v-if="tableDate.length"
+        xName="timestamp"
         :keys="chartKeys"
       ></line-charts>
     </el-card>
@@ -87,9 +79,9 @@
 
 <script>
 // @ is an alias to /src
-// import {  } from "@/api/index";
+import { overlapSearchTitle, tvvscountry, tvlist,tvlistexport } from "@/api/kuyun";
 
-import lineCharts from "@/views/Country/components/lineCharts";
+import lineCharts from "@/views/Country/components/lineCharts1";
 
 import config from "@/config/index";
 export default {
@@ -98,127 +90,45 @@ export default {
     return {
       form: {
         channel: 0,
-        contrastChannel:0,
-        date: [
-          new Date(new Date() - 86400000),
-          new Date(new Date() - 86400000),
-        ],
+        date: [],
+        vs: [],
         region: -1,
       },
-      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,
-        },
-      ],
+      tvList: [],
+      tableDate: [],
+      loading: false,
+      loading1: false,
     };
   },
-  mounted() {},
+  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 - 1, M, D].join("-"), [Y, M, D].join("-")];
+    tvlist().then(r => {
+      this.tvList = r || [];
+    });
+  },
   computed: {
-    channelList() {
-      return config.channelNameList;
-    },
-    tableDate() {
-      const obj = {};
-
-      const b = [
-        {
-          key: "indicators_tv_ratings",
-          name: "直播关注度",
-        },
-        {
-          key: "indicators_market_ratings",
-          name: "市占率",
-        },
-        {
-          key: "indicators_arrive",
-          name: "到达率",
-        },
-      ];
-      for (let i = 0; i < this.tableData.length; i++) {
-        const v = this.tableData[i];
-        if (typeof obj[v.channel_2] !== "object") obj[v.channel_2] = {};
-        obj[v.channel_2][v.day] = v;
-      }
-      let li = [],
-        keys = Object.keys(obj),
-        dataLen = Object.keys(obj[keys[0]]);
-      for (let i = 0; i < dataLen.length; i++) {
-        let p = {};
-        for (let o = 0; o < keys.length; o++) {
-          const v = obj[keys[o]][dataLen[i]];
-          b.map(k => {
-            p[keys[o] + "_" + k.key] = v[k.key];
-          });
-        }
-        li.push({
-          date: dataLen[i],
-          ...p,
-        });
-      }
-      return li;
-    },
     chartKeys() {
       const obj = {},
         li = [];
-      for (let i = 0; i < this.tableData.length; i++) {
+      for (let i = 0; i < this.tableDate.length; i++) {
         const b = [
           {
-            key: "indicators_tv_ratings",
+            key: "tv_ratings",
             name: "直播关注度",
           },
-          {
-            key: "indicators_market_ratings",
-            name: "市占率",
-          },
-          {
-            key: "indicators_arrive",
-            name: "到达率",
-          },
         ];
-        const v = this.tableData[i];
-        if (obj[v.channel_2] === true) continue;
-        obj[v.channel_2] = true;
+        const v = this.tableDate[i][0];
+        if (obj[v.channel] === true) continue;
+        obj[v.channel] = true;
         li.push(
           ...b.map(k => {
-            k.key = v.channel_2 + "_" + k.key;
-            k.name = v.channel_2 + "_" + k.name;
+            k.name = v.channel + "_" + k.name;
             return k;
           })
         );
@@ -226,25 +136,89 @@ export default {
       console.log(li);
       return li;
     },
-    cycle() {
-      return config.cycle;
-    },
     region() {
       return config.region;
     },
   },
   methods: {
-    onExport() {},
+    handleSelect(item) {
+      this.form.tv_id = item.id || "";
+    },
+    querySearchAsync(queryString, cb) {
+      if (!queryString) {
+        cb([]);
+        return;
+      }
+      overlapSearchTitle("kw=" + queryString).then(r => {
+        let li = (r || []).map(v => {
+          return {
+            value: v.name,
+            id: v.id,
+          };
+        });
+        cb(li);
+      });
+    },
+    onExport() {
+      if (!this.form.date.length || !this.form.vs.length) return;
+      let vs = (this.form.vs || []).join(",");
+      this.loading1=  true;
+        tvlistexport('start=' +
+          this.form.date[0] +'+00:00:00&end=' +
+          this.form.date[1] +'+00:00:00&tv_id=48&area_id=' +
+          this.form.tv_id +'&vs=' +
+          vs +'&domain=pro.eye.kuyun.com&download=csv', '平均频道点分钟.csv', ()=>{
+              this.loading1 = false
+          })
+    },
     disabledDate(time) {
       return time.getTime() > Date.now() - 86400000;
     },
-    onSubmit() {},
+    onSubmit() {
+      console.log(this.form);
+      if (!this.form.date.length || !this.form.vs.length) return;
+      let vs = (this.form.vs || []).join(",");
+      let vsname = [];
+      for (let i = 0; i < (this.form.vs || []).length; i++) {
+        const v = (this.form.vs || [])[i];
+        const item = this.tvList.filter(o => o.id === v);
+        vsname.push(...item);
+      }
+
+      tvvscountry(
+        "start=" +
+          this.form.date[0] +
+          "+00:00:00&end=" +
+          this.form.date[1] +
+          "+00:00:00&tv_id=" +
+          this.form.tv_id +
+          "&area_id=9&vs=" +
+          vs
+      ).then(r => {
+        const li = r || { list: [], vs: [] },
+          l = [];
+        l.push(
+          li.list.map(v => {
+            v.channel = this.form.program;
+            return v;
+          })
+        );
+        vsname.map((v, i) => {
+          let list = li.vs[i] || [];
+          l.push(
+            list.map(item => {
+              item.channel = v.name;
+              return item;
+            })
+          );
+        });
+        console.log(l);
+        this.tableDate = l;
+      });
+    },
     matrer(row, column, cellValue) {
       return (cellValue * 100).toFixed(4) - 0 + "%";
     },
-    channelSelect(a) {
-      this.selectAll(a, "channel", 0);
-    },
     selectAll(a, key, val) {
       if (!a.length) return;
       let select = a[a.length - 1];
@@ -255,7 +229,6 @@ export default {
           .replace(/,$/, "")
           .split(",");
     },
-    
   },
   components: { lineCharts },
 };

src/views/Country/components/lineCharts1.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="countryLineChart" ref="countryLineChart"></div>
+</template>
+
+<script>
+// import * as ethis.charts from "ethis.charts";
+import config from "@/config/index";
+import * as echarts from "echarts/core";
+import { LineChart } from "echarts/charts";
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  DataZoomComponent,
+  GridComponent,
+} from "echarts/components";
+import { CanvasRenderer } from "echarts/renderers";
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LineChart,
+  CanvasRenderer,
+  LegendComponent,
+  DataZoomComponent,
+]);
+
+export default {
+  name: "countryLineChart",
+  props: ["list", "keys", "xName"],
+  data: function() {
+    return {
+      leftList: [],
+      rightList: [],
+      chart: undefined,
+    };
+  },
+  filters: {},
+  methods: {
+    format(v) {
+      if (isNaN(v)) return 0;
+      let o = v.toFixed(4);
+      if (v > 10000) {
+        o = (v / 10000).toFixed(4) + "万";
+      }
+
+      return o;
+    },
+    formatte(list) {
+      let values = [],
+        k0 = this.keys[0],
+        keys = (list[0] || []).map(v=> v[this.xName]);
+        
+      for (let o = 0; o < list.length; o++) {
+        const v = list[o];
+        values.push(v.map(item => item[k0.key]))
+      }
+      return {
+        keys,
+        values,
+      };
+    },
+    getTvName(tvId) {
+      let li = config.channelNameList || [];
+      let t = "";
+      for (let i = 0; i < li.length; i++) {
+        const v = li[i];
+        if (v.value !== tvId) continue;
+        t = v.label;
+        break;
+      }
+      return t;
+    },
+    createChart() {
+      if (!this.$refs.countryLineChart) return;
+      this.chart = echarts.init(this.$refs.countryLineChart);
+      let chartData = this.formatte(this.list);
+      this.chart.resize({
+        height: (this.$refs.countryLineChart.offsetWidth * 6) / 16,
+      });
+      var option = {
+        tooltip: {
+          trigger: "axis",
+          triggerOn: "mousemove",
+          axisPointer: {
+            type: "line",
+            axis: "x",
+          },
+          formatter: params => {
+            let out = "";
+            let t = "";
+            for (let i = 0; i < params.length; i++) {
+              const par = params[i];
+              if (t === "") {
+                t = par.axisValueLabel;
+                t += "<br />";
+              }
+              out +=
+                par.seriesName + ": " + this.format(par.value) + "% <br />";
+            }
+            return t + out;
+          },
+        },
+        legend: {
+          data: this.keys.map(v => v.name),
+        },
+        grid: { left: 150, top: "10%", buttom: 0, right: 100 },
+        xAxis: {
+          type: "category",
+          boundaryGap: true,
+          data: chartData.keys,
+        },
+        yAxis: {
+          type: "value",
+          scale: true,
+        },
+        dataZoom: [
+          {
+            show: true,
+            realtime: true,
+            start: 30,
+            end: 70,
+            xAxisIndex: [0, 1],
+          },
+          {
+            type: "inside",
+            realtime: true,
+            start: 30,
+            end: 70,
+            xAxisIndex: [0, 1],
+          },
+        ],
+        series: chartData.values.map((v, i) => {
+          return {
+            type: "line",
+            name: this.keys[i].name,
+            data: v,
+            showAllSymbol: false,
+            smooth: true,
+          };
+        }),
+      };
+
+      option && this.chart.setOption(option);
+    },
+  },
+  mounted() {
+    this.createChart();
+  },
+  beforeUnmount: function() {
+    this.chart.dispose();
+  },
+  components: {},
+};
+</script>
+<style></style>