他提交

src/config/index.js

@@ -23,6 +23,36 @@ export default {
     ascending: "ASC",
     descending: "DESC",
   },
+  weeks: [
+    {
+      label: "星期一",
+      value: 1,
+    },
+    {
+      label: "星期二",
+      value: 2,
+    },
+    {
+      label: "星期三",
+      value: 3,
+    },
+    {
+      label: "星期四",
+      value: 4,
+    },
+    {
+      label: "星期五",
+      value: 5,
+    },
+    {
+      label: "星期六",
+      value: 6,
+    },
+    {
+      label: "星期日",
+      value: 7,
+    },
+],
   cycle: [
     {
       label: "全天时段(00:00~24:00)",

src/router/index.js

@@ -62,8 +62,20 @@ const routes = [
             component: ()=> import("../views/SingleDay/SingleDay.vue")
         },
         {
-            path: "/country/singleDay", // 平均频道点分钟
-            component: ()=> import("../views/SingleDay/SingleDay.vue")
+            path: "/country/average", // 平均频道点分钟
+            component: ()=> import("../views/Average/Average.vue")
+        },
+        {
+            path: "/country/subRegion", // 频道分地收视（全国）
+            component: ()=> import("../views/SubRegion/SubRegion.vue")
+        },
+        {
+            path: "/country/channelRegion", // 频道分地区收视
+            component: ()=> import("../views/ChannelRegion/ChannelRegion.vue")
+        },
+        {
+            path: "/country/flow", // 频道实时流入流出
+            component: ()=> import("../views/Flow/Flow.vue")
         },
         {
             path: "/country/scheduling", // 电视剧排播信息及表现（全国）

src/views/Average/Average.vue

@@ -0,0 +1,270 @@
+<template>
+  <div class="SingleDay">
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item>传统媒体</el-breadcrumb-item>
+      <el-breadcrumb-item>平均频道点分钟</el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-card class="box-card">
+      <el-form
+        ref="form"
+        :model="form"
+        size="small"
+        :inline="true"
+        label-width="120px"
+        class="demo-form-inline"
+      >
+        <el-form-item label="日期">
+          <el-date-picker
+            v-model="form.date"
+            type="daterange"
+            :disabled-date="time => disabledDate(time)"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          >
+          </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="请选择频道"
+            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-cascader
+            v-model="form.region"
+            :options="region"
+            :props="{ children: 'options' }"
+          ></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-form-item>
+      </el-form>
+    </el-card>
+    <br />
+    <el-card class="box-card">
+      <line-charts
+        :list="tableDate"
+        xName="day"
+        :keys="chartKeys"
+      ></line-charts>
+    </el-card>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+// import {  } from "@/api/index";
+
+import lineCharts from "@/views/Country/components/lineCharts";
+
+import config from "@/config/index";
+export default {
+  name: "Channel",
+  data() {
+    return {
+      form: {
+        channel: 0,
+        contrastChannel:0,
+        date: [
+          new Date(new Date() - 86400000),
+          new Date(new Date() - 86400000),
+        ],
+        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,
+        },
+      ],
+    };
+  },
+  mounted() {},
+  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++) {
+        const b = [
+          {
+            key: "indicators_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;
+        li.push(
+          ...b.map(k => {
+            k.key = v.channel_2 + "_" + k.key;
+            k.name = v.channel_2 + "_" + k.name;
+            return k;
+          })
+        );
+      }
+      console.log(li);
+      return li;
+    },
+    cycle() {
+      return config.cycle;
+    },
+    region() {
+      return config.region;
+    },
+  },
+  methods: {
+    onExport() {},
+    disabledDate(time) {
+      return time.getTime() > Date.now() - 86400000;
+    },
+    onSubmit() {},
+    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];
+      if (select === val) this.form[key] = [val];
+      else
+        this.form[key] = (a.join(",") + ",")
+          .replace(val + ",", "")
+          .replace(/,$/, "")
+          .split(",");
+    },
+    
+  },
+  components: { lineCharts },
+};
+</script>
+
+<style>
+.SingleDay {
+  margin: 10px 15px;
+}
+.SingleDay .nowrap .cell {
+  white-space: nowrap;
+}
+</style>

src/views/ChannelRegion/ChannelRegion.vue

@@ -0,0 +1,370 @@
+<template>
+  <div class="SingleDay">
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item>传统媒体</el-breadcrumb-item>
+      <el-breadcrumb-item>频道分地区收视</el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-card class="box-card">
+      <el-form
+        ref="form"
+        :model="form"
+        size="small"
+        :inline="true"
+        label-width="120px"
+        class="demo-form-inline"
+      >
+        <el-form-item label="日期">
+          <el-date-picker
+            v-model="form.date"
+            type="daterange"
+            :disabled-date="time => disabledDate(time)"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          >
+          </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-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.rangeTimeRange"
+            placeholder="请选择时段"
+            multiple
+            collapse-tags
+            clearable
+            @change="timeSelect"
+          >
+            <el-option
+              v-for="item in cycle"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+              :disabled="item.disabled"
+            >
+            </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-form-item>
+      </el-form>
+    </el-card>
+    <br />
+    <el-card class="box-card">
+      <line-charts
+        :list="tableDate"
+        xName="day"
+        :keys="chartKeys"
+      ></line-charts>
+      <el-table
+        :data="tableDate"
+        :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }"
+        style="width: 100%"
+      >
+        <el-table-column
+          align="center"
+          show-overflow-tooltip
+          width="400px"
+          prop="date"
+          label="日期"
+          class-name="nowrap"
+        />
+        <el-table-column
+          v-for="(item, i) in tableKeys"
+          :key="'table' + i"
+          align="center"
+          :prop="item.key"
+          :formatter="matrer"
+          :label="item.name"
+        >
+          <el-table-column
+            v-for="(li, o) in item.children"
+            :key="i + '-' + o"
+            :prop="li.key"
+            :label="li.name"
+            :formatter="matrer"
+          />
+        </el-table-column>
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+// import {  } from "@/api/index";
+
+import lineCharts from "@/views/Country/components/lineCharts";
+
+import config from "@/config/index";
+export default {
+  name: "Channel",
+  data() {
+    return {
+      form: {
+        channel: 0,
+        date: [
+          new Date(new Date() - 86400000),
+          new Date(new Date() - 86400000),
+        ],
+        rangeTime: [],
+      },
+      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,
+        },
+      ],
+    };
+  },
+  mounted() {},
+  computed: {
+    cycle() {
+      return config.cycle;
+    },
+    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++) {
+        const b = [
+          {
+            key: "indicators_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;
+        li.push(
+          ...b.map(k => {
+            k.key = v.channel_2 + "_" + k.key;
+            k.name = v.channel_2 + "_" + k.name;
+            return k;
+          })
+        );
+      }
+      console.log(li);
+      return li;
+    },
+    tableKeys() {
+      const obj = {},
+        li = [];
+      for (let i = 0; i < this.tableData.length; i++) {
+        const b = [
+          {
+            key: "indicators_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;
+        li.push({
+          name: v.channel_2,
+          children: b.map(k => {
+            k.key = v.channel_2 + "_" + k.key;
+            return k;
+          }),
+        });
+      }
+      return li;
+    },
+  },
+  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;
+        });
+        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 (!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;
+    },
+    onSubmit() {},
+    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];
+      if (select === val) this.form[key] = [val];
+      else
+        this.form[key] = (a.join(",") + ",")
+          .replace(val + ",", "")
+          .replace(/,$/, "")
+          .split(",");
+    },
+  },
+  components: { lineCharts },
+};
+</script>
+
+<style>
+.SingleDay {
+  margin: 10px 15px;
+}
+.SingleDay .nowrap .cell {
+  white-space: nowrap;
+}
+</style>

src/views/Country/components/flowCharts.vue

@@ -0,0 +1,297 @@
+<template>
+  <div class="countryLineChart" ref="countryLineChart"></div>
+</template>
+
+<script>
+// import * as echarts from "echarts";
+import config from "@/config/index";
+import * as echarts from "echarts/core";
+import { LineChart } from "echarts/charts";
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  DataZoomComponent,
+  VisualMapComponent,
+  GridComponent,
+} from "echarts/components";
+import { CanvasRenderer } from "echarts/renderers";
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LineChart,
+  CanvasRenderer,
+  LegendComponent,
+  DataZoomComponent,
+  VisualMapComponent,
+]);
+
+let chart = undefined;
+export default {
+  name: "countryLineChart",
+  props: ["list", "keys", "xName", "subsection"],
+  data: function() {
+    return {
+      leftList: [],
+      rightList: [],
+      chart: undefined,
+      xText: {},
+    };
+  },
+  filters: {},
+  methods: {
+    format(v) {
+      if (isNaN(v)) return 0;
+      let o = v.toFixed(4);
+      if (v > 10000) {
+        o = (v / 10000).toFixed(4) + "万";
+      }
+
+      return o;
+    },
+    formatDate(t) {
+      const originT = t.split("");
+      return [originT[8] + originT[9], originT[10] + originT[11]].join(":");
+    },
+    formatTitloop() {
+      let pieces = [];
+      for (let i = 0; i < this.list.length; i++) {
+        const v = this.list[i];
+        this.xText[v.time_stamp] = i;
+      }
+      for (let i = 0; i < this.subsection.length; i++) {
+        const v = this.subsection[i];
+        pieces.push({
+          gte: this.xText[v.start_x],
+          lt: this.xText[v.end_x],
+          color: v.end_y - v.start_y > 0 ? "#fcc543" : "#00bed0",
+        });
+      }
+      return pieces;
+    },
+    formatte(list) {
+      let values = [],
+        keys = [];
+      for (let o = 0; o < list.length; o++) {
+        const v = list[o], key = v[this.xName];
+        keys.push(key);
+        let k = 0, b = 0;
+        for (let i = 0; i < this.subsection.length; i++) {
+            const put = this.subsection[i];
+            if(put.start_x - 0 <= key && put.end_x - 0 >= key){
+                k = put.k;
+                b = put.b;
+                break
+            }
+        }
+        for (let i = 0; i < this.keys.length; i++) {
+          if (!values[i]) values[i] = [];
+          values[i][o] = (k * key + b)*100;
+        }
+      }
+      return {
+        keys,
+        values,
+      };
+    },
+    updata() {
+      if (!chart) return;
+      //   let chartData = this.formatte(data);
+      chart.setOption(
+        {
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              type: "cross",
+              label: {
+                backgroundColor: "#6a7985",
+              },
+            },
+          },
+          legend: {
+            data: ["Line 1"],
+          },
+          toolbox: {
+            feature: {
+              saveAsImage: {},
+            },
+          },
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+          },
+          xAxis: [
+            {
+              type: "category",
+              boundaryGap: false,
+              data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+            },
+          ],
+          yAxis: [
+            {
+              type: "value",
+            },
+          ],
+          series: [
+            {
+              name: "Line 1",
+              type: "line",
+              stack: "Total",
+              smooth: true,
+              lineStyle: {
+                width: 0,
+              },
+              showSymbol: false,
+              areaStyle: {
+                opacity: 0.8,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgb(128, 255, 165)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgb(1, 191, 236)",
+                  },
+                ]),
+              },
+              emphasis: {
+                focus: "series",
+              },
+              data: [140, 232, 101, 264, 90, 340, 250],
+            },
+          ],
+        },
+        true
+      );
+    },
+    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;
+      chart = echarts.init(this.$refs.countryLineChart);
+      let chartData = this.formatte(this.list);
+      chart.resize({
+        height: (this.$refs.countryLineChart.offsetWidth * 6) / 16,
+      });
+      var option = {
+        tooltip: {
+          trigger: "axis",
+          triggerOn: "mousemove",
+          confine: true,
+          axisPointer: {
+            type: "line",
+            axis: "x",
+          },
+          formatter: params => {
+            const index = params[0].dataIndex,
+              key = this.list[index].time_stamp - 0,
+              li = this.subsection || [];
+            let o = {};
+            for (let i = 0; i < li.length; i++) {
+              const v = li[i];
+              if (v.start_x - 0 <= key && v.end_x - 0 >= key) {
+                o = v;
+                break;
+              }
+            }
+            if (!o.start_x) return "";
+            let t = "<table class='tool'>",
+              inli = o.input || [],
+              outli = o.output || [];
+            t += "<tr><td>流入</td><td></td><td>" + (o.in * 100).toFixed(2) + "% </td></tr>";
+            for (let i = 0; i < inli.length; i++) {
+              const v = inli[i];
+              t += `<tr><td>${v.channel}</td><td>${v.epg_name || ""}</td><td>${(
+                v.value * 100
+              ).toFixed(2)}%</td> </tr>`;
+            }
+            t += "<tr><td>流出</td><td></td><td>" + (o.out * 100).toFixed(2) + "% </td></tr>";
+            for (let i = 0; i < outli.length; i++) {
+              const v = outli[i];
+              t += `<tr><td>${v.channel}</td>  <td>${v.epg_name ||
+                ""}</td><td>${(v.value * 100).toFixed(2)}%</td></tr>`;
+            }
+            t += "</table>";
+            return t;
+          },
+        },
+        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,
+          axisLabel: {
+            formatter: v => {
+              return this.formatDate(v);
+            },
+          },
+        },
+        yAxis: {
+          type: "value",
+          scale: true,
+        },
+        visualMap: {
+          show: false,
+          dimension: 0,
+          pieces: this.formatTitloop(chartData.values),
+        },
+        series: chartData.values.map((v, i) => {
+          return {
+            type: "line",
+            name: this.keys[i].name,
+            data: v,
+            showAllSymbol: false,
+          };
+        }),
+      };
+
+      option && chart.setOption(option);
+    },
+
+    formatsubsection() {
+        let bei = 100;
+      for (let i = 0; i < this.subsection.length; i++) {
+        const v = this.subsection[i];
+        let sx = v.start_x,
+          sy = v.start_y,
+          ex = v.end_x,
+          ey = v.end_y;
+        let k = ((ey*bei - sy*bei) / bei / (ex - sx)).toFixed(8) - 0;
+        let b = sy - k * sx;
+        if(k === 0) k = 0;
+        v.k = k;
+        v.b = b;
+      }
+    },
+  },
+  mounted() {
+    this.formatsubsection();
+    this.createChart();
+  },
+  beforeUnmount: function() {
+    chart.dispose();
+  },
+  components: {},
+};
+</script>
+<style>
+.removeHeader {
+  display: none;
+}
+</style>

src/views/Flow/Flow.vue

@@ -0,0 +1,933 @@
+<template>
+  <div class="SingleDay">
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item>传统媒体</el-breadcrumb-item>
+      <el-breadcrumb-item>平均频道点分钟</el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-card class="box-card">
+      <el-form
+        ref="form"
+        :model="form"
+        size="small"
+        :inline="true"
+        label-width="120px"
+        class="demo-form-inline"
+      >
+        <el-form-item label="日期">
+          <el-date-picker
+            v-model="form.date"
+            type="daterange"
+            :disabled-date="time => disabledDate(time)"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          >
+          </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-cascader
+            v-model="form.region"
+            :options="region"
+            :props="{ children: 'options' }"
+          ></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-form-item>
+      </el-form>
+    </el-card>
+    <br />
+    <el-card class="box-card">
+      <flow-charts
+        :list="tableData"
+        xName="time_stamp"
+        :subsection="subsection"
+        :keys="chartKeys"
+      ></flow-charts>
+    </el-card>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+// import {  } from "@/api/index";
+
+import flowCharts from "@/views/Country/components/flowCharts";
+
+import config from "@/config/index";
+export default {
+  name: "Channel",
+  data() {
+    return {
+      form: {
+        channel: 0,
+        date: [
+          new Date(new Date() - 86400000),
+          new Date(new Date() - 86400000),
+        ],
+        region: -1,
+      },
+      tableData: [
+        {
+          time_stamp: "20220112154600",
+          tv_ratings: 0.000166,
+        },
+        {
+          time_stamp: "20220112154700",
+          tv_ratings: 0.000164,
+        },
+        {
+          time_stamp: "20220112154800",
+          tv_ratings: 0.000164,
+        },
+        {
+          time_stamp: "20220112154900",
+          tv_ratings: 0.000163,
+        },
+        {
+          time_stamp: "20220112155000",
+          tv_ratings: 0.000161,
+        },
+        {
+          time_stamp: "20220112155100",
+          tv_ratings: 0.000161,
+        },
+        {
+          time_stamp: "20220112155200",
+          tv_ratings: 0.000156,
+        },
+        {
+          time_stamp: "20220112155300",
+          tv_ratings: 0.000151,
+        },
+        {
+          time_stamp: "20220112155400",
+          tv_ratings: 0.000144,
+        },
+        {
+          time_stamp: "20220112155500",
+          tv_ratings: 0.00014,
+        },
+        {
+          time_stamp: "20220112155600",
+          tv_ratings: 0.000134,
+        },
+        {
+          time_stamp: "20220112155700",
+          tv_ratings: 0.000124,
+        },
+        {
+          time_stamp: "20220112155800",
+          tv_ratings: 0.000122,
+        },
+        {
+          time_stamp: "20220112155900",
+          tv_ratings: 0.00012,
+        },
+        {
+          time_stamp: "20220112160000",
+          tv_ratings: 0.00012,
+        },
+        {
+          time_stamp: "20220112160100",
+          tv_ratings: 0.000118,
+        },
+        {
+          time_stamp: "20220112160200",
+          tv_ratings: 0.000113,
+        },
+        {
+          time_stamp: "20220112160300",
+          tv_ratings: 0.000108,
+        },
+        {
+          time_stamp: "20220112160400",
+          tv_ratings: 0.000111,
+        },
+        {
+          time_stamp: "20220112160500",
+          tv_ratings: 0.000111,
+        },
+        {
+          time_stamp: "20220112160600",
+          tv_ratings: 0.000111,
+        },
+        {
+          time_stamp: "20220112160700",
+          tv_ratings: 0.000111,
+        },
+        {
+          time_stamp: "20220112160800",
+          tv_ratings: 0.000107,
+        },
+        {
+          time_stamp: "20220112160900",
+          tv_ratings: 0.000104,
+        },
+        {
+          time_stamp: "20220112161000",
+          tv_ratings: 0.000107,
+        },
+        {
+          time_stamp: "20220112161100",
+          tv_ratings: 0.000116,
+        },
+        {
+          time_stamp: "20220112161200",
+          tv_ratings: 0.000118,
+        },
+        {
+          time_stamp: "20220112161300",
+          tv_ratings: 0.000117,
+        },
+        {
+          time_stamp: "20220112161400",
+          tv_ratings: 0.000131,
+        },
+        {
+          time_stamp: "20220112161500",
+          tv_ratings: 0.000136,
+        },
+        {
+          time_stamp: "20220112161600",
+          tv_ratings: 0.000137,
+        },
+        {
+          time_stamp: "20220112161700",
+          tv_ratings: 0.000135,
+        },
+        {
+          time_stamp: "20220112161800",
+          tv_ratings: 0.00014,
+        },
+        {
+          time_stamp: "20220112161900",
+          tv_ratings: 0.000139,
+        },
+        {
+          time_stamp: "20220112162000",
+          tv_ratings: 0.000135,
+        },
+        {
+          time_stamp: "20220112162100",
+          tv_ratings: 0.000133,
+        },
+        {
+          time_stamp: "20220112162200",
+          tv_ratings: 0.000139,
+        },
+        {
+          time_stamp: "20220112162300",
+          tv_ratings: 0.000137,
+        },
+        {
+          time_stamp: "20220112162400",
+          tv_ratings: 0.00014,
+        },
+        {
+          time_stamp: "20220112162500",
+          tv_ratings: 0.000147,
+        },
+        {
+          time_stamp: "20220112162600",
+          tv_ratings: 0.000144,
+        },
+        {
+          time_stamp: "20220112162700",
+          tv_ratings: 0.00014,
+        },
+        {
+          time_stamp: "20220112162800",
+          tv_ratings: 0.000145,
+        },
+        {
+          time_stamp: "20220112162900",
+          tv_ratings: 0.00014,
+        },
+        {
+          time_stamp: "20220112163000",
+          tv_ratings: 0.000143,
+        },
+        {
+          time_stamp: "20220112163100",
+          tv_ratings: 0.000148,
+        },
+      ],
+      subsection: [
+        {
+          start_x: "20220112154600",
+          output: [
+            {
+              channel: "退出直播",
+              value: 0.3333333333333333,
+            },
+            {
+              channel: "云南卫视",
+              value: 0.05263157894736842,
+              epg_name: "雪豹 26 27 28 29 30",
+            },
+            {
+              channel: "甘肃卫视",
+              value: 0.017543859649122806,
+              epg_name: "烈火刀影 62 63 64 65 66",
+            },
+            {
+              channel: "CCTV-3",
+              value: 0.017543859649122806,
+              epg_name: "我爱满堂彩",
+            },
+            {
+              channel: "CCTV-4",
+              value: 0.017543859649122806,
+              epg_name: "大决战 38 39 40 41 42",
+            },
+          ],
+          input: [
+            {
+              channel: "东南卫视",
+              value: 0.07017543859649122,
+              epg_name: "西游记 ",
+            },
+            {
+              channel: "天津卫视",
+              value: 0.03508771929824561,
+              epg_name: "娘道 52 53 54 55 56 57",
+            },
+            {
+              channel: "湖南金鹰卡通频道",
+              value: 0.03508771929824561,
+              epg_name: "熊出没之丛林总动员",
+            },
+            {
+              channel: "内蒙古卫视",
+              value: 0.03508771929824561,
+              epg_name: "正阳门下 11 12 13 14 15 16 17",
+            },
+            {
+              channel: "河南卫视",
+              value: 0.03508771929824561,
+              epg_name: "济公游记 ",
+            },
+          ],
+          in: 0.43859649122807015,
+          end_x: "20220112155100",
+          start_y: 0.000166,
+          end_y: 0.000161,
+          out: 0.5614035087719298,
+        },
+        {
+          start_x: "20220112155100",
+          output: [
+            {
+              channel: "退出直播",
+              value: 0.32727272727272727,
+            },
+            {
+              channel: "湖南金鹰卡通频道",
+              value: 0.06363636363636363,
+              epg_name: "熊出没之丛林总动员",
+            },
+            {
+              channel: "北京卫视",
+              value: 0.01818181818181818,
+              epg_name: "父母爱情 36 37 38 39 40",
+            },
+            {
+              channel: "卡酷少儿",
+              value: 0.01818181818181818,
+              epg_name: "熊出没之丛林总动员",
+            },
+            {
+              channel: "海南卫视",
+              value: 0.01818181818181818,
+              epg_name: "隋唐英雄 24 25 26 27 28 29",
+            },
+          ],
+          input: [
+            {
+              channel: "开启直播",
+              value: 0.1,
+            },
+            {
+              channel: "CCTV-新闻",
+              value: 0.02727272727272727,
+              epg_name: "新闻直播间",
+            },
+            {
+              channel: "云南卫视",
+              value: 0.02727272727272727,
+              epg_name: "雪豹 26 27 28 29 30",
+            },
+            {
+              channel: "CCTV-6",
+              value: 0.01818181818181818,
+              epg_name: "新兵正传3",
+            },
+            {
+              channel: "山东卫视",
+              value: 0.01818181818181818,
+              epg_name: "伪装者 ",
+            },
+          ],
+          in: 0.2818181818181818,
+          end_x: "20220112160300",
+          start_y: 0.000161,
+          end_y: 0.000108,
+          out: 0.7181818181818181,
+        },
+        {
+          start_x: "20220112160300",
+          output: [
+            {
+              channel: "退出直播",
+              value: 0.20689655172413793,
+            },
+            {
+              channel: "广东卫视",
+              value: 0.034482758620689655,
+              epg_name: "东北剿匪记 7 8 9 10 11 12",
+            },
+            {
+              channel: "湖南金鹰卡通频道",
+              value: 0.017241379310344827,
+              epg_name: "熊出没之丛林总动员",
+            },
+            {
+              channel: "海南卫视",
+              value: 0.017241379310344827,
+              epg_name: "隋唐英雄 24 25 26 27 28 29",
+            },
+            {
+              channel: "嘉佳卡通频道",
+              value: 0.017241379310344827,
+              epg_name: "熊熊乐园",
+            },
+          ],
+          input: [
+            {
+              channel: "开启直播",
+              value: 0.10344827586206896,
+            },
+            {
+              channel: "CCTV-新闻",
+              value: 0.05172413793103448,
+              epg_name: "新闻直播间",
+            },
+            {
+              channel: "辽宁卫视",
+              value: 0.034482758620689655,
+              epg_name: "守婚如玉 37 38 39 40",
+            },
+            {
+              channel: "四川卫视",
+              value: 0.034482758620689655,
+              epg_name: "飞虎队 23 24 25 26 27 28 29 30 31 32 33",
+            },
+            {
+              channel: "江苏卫视",
+              value: 0.034482758620689655,
+              epg_name: "新相亲大会第四季",
+            },
+          ],
+          in: 0.46551724137931033,
+          end_x: "20220112160900",
+          start_y: 0.000108,
+          end_y: 0.000104,
+          out: 0.5344827586206896,
+        },
+        {
+          start_x: "20220112160900",
+          output: [
+            {
+              channel: "退出直播",
+              value: 0.13978494623655913,
+            },
+            {
+              channel: "四川卫视",
+              value: 0.03225806451612903,
+              epg_name: "飞虎队 23 24 25 26 27 28 29 30 31 32 33",
+            },
+            {
+              channel: "湖北卫视",
+              value: 0.021505376344086023,
+              epg_name: "黑狐 9 10 11 12 13",
+            },
+            {
+              channel: "卡酷少儿",
+              value: 0.010752688172043012,
+              epg_name: "熊出没之丛林总动员",
+            },
+            {
+              channel: "CCTV-4",
+              value: 0.010752688172043012,
+              epg_name: "大决战 38 39 40 41 42",
+            },
+          ],
+          input: [
+            {
+              channel: "开启直播",
+              value: 0.10752688172043011,
+            },
+            {
+              channel: "山西卫视",
+              value: 0.10752688172043011,
+              epg_name: "铁道游击队 33 34 35 36",
+            },
+            {
+              channel: "新疆卫视",
+              value: 0.07526881720430108,
+              epg_name: "神探狄仁杰2 32 33 34",
+            },
+            {
+              channel: "北京卫视",
+              value: 0.053763440860215055,
+              epg_name: "父母爱情 36 37 38 39 40",
+            },
+            {
+              channel: "CCTV-新闻",
+              value: 0.03225806451612903,
+              epg_name: "新闻直播间",
+            },
+          ],
+          in: 0.6881720430107527,
+          end_x: "20220112161800",
+          start_y: 0.000104,
+          end_y: 0.00014,
+          out: 0.3118279569892473,
+        },
+        {
+          start_x: "20220112161800",
+          output: [
+            {
+              channel: "退出直播",
+              value: 0.09433962264150944,
+            },
+            {
+              channel: "四川卫视",
+              value: 0.05660377358490566,
+              epg_name: "飞虎队 23 24 25 26 27 28 29 30 31 32 33",
+            },
+            {
+              channel: "广西卫视",
+              value: 0.03773584905660377,
+              epg_name: "铁道风云 16 17 18 19 20",
+            },
+            {
+              channel: "CCTV-2",
+              value: 0.03773584905660377,
+              epg_name: "正点财经",
+            },
+            {
+              channel: "CCTV-8",
+              value: 0.03773584905660377,
+              epg_name: "星推荐",
+            },
+          ],
+          input: [
+            {
+              channel: "开启直播",
+              value: 0.07547169811320754,
+            },
+            {
+              channel: "浙江卫视",
+              value: 0.03773584905660377,
+              epg_name: "输赢 33 34 35",
+            },
+            {
+              channel: "CCTV-3",
+              value: 0.018867924528301886,
+              epg_name: "我爱满堂彩",
+            },
+            {
+              channel: "江西卫视",
+              value: 0.018867924528301886,
+              epg_name: "狙击手 11 12 13 14 15",
+            },
+            {
+              channel: "CCTV-4",
+              value: 0.018867924528301886,
+              epg_name: "大决战 38 39 40 41 42",
+            },
+          ],
+          in: 0.3584905660377358,
+          end_x: "20220112162100",
+          start_y: 0.00014,
+          end_y: 0.000133,
+          out: 0.6415094339622641,
+        },
+        {
+          start_x: "20220112162100",
+          output: [
+            {
+              channel: "退出直播",
+              value: 0.038461538461538464,
+            },
+            {
+              channel: "天津卫视",
+              value: 0.038461538461538464,
+              epg_name: "娘道 52 53 54 55 56 57",
+            },
+            {
+              channel: "CCTV-1",
+              value: 0.02564102564102564,
+              epg_name: "夺金 23 24 25 26",
+            },
+            {
+              channel: "CCTV-4",
+              value: 0.02564102564102564,
+              epg_name: "大决战 38 39 40 41 42",
+            },
+            {
+              channel: "山东卫视",
+              value: 0.02564102564102564,
+              epg_name: "伪装者 ",
+            },
+          ],
+          input: [
+            {
+              channel: "开启直播",
+              value: 0.20512820512820512,
+            },
+            {
+              channel: "山西卫视",
+              value: 0.05128205128205128,
+              epg_name: "铁道游击队 33 34 35 36",
+            },
+            {
+              channel: "CCTV-17",
+              value: 0.038461538461538464,
+              epg_name: "最美的青春 10 11 12 13",
+            },
+            {
+              channel: "江苏卫视",
+              value: 0.038461538461538464,
+              epg_name: "新相亲大会第四季",
+            },
+            {
+              channel: "CCTV-新闻",
+              value: 0.02564102564102564,
+              epg_name: "新闻直播间",
+            },
+          ],
+          in: 0.6410256410256411,
+          end_x: "20220112162500",
+          start_y: 0.000133,
+          end_y: 0.000147,
+          out: 0.358974358974359,
+        },
+        {
+          start_x: "20220112162500",
+          output: [
+            {
+              channel: "退出直播",
+              value: 0.12280701754385964,
+            },
+            {
+              channel: "青海卫视",
+              value: 0.05263157894736842,
+              epg_name: "康熙微服私访记4 27 28 29 30 31",
+            },
+            {
+              channel: "内蒙古卫视",
+              value: 0.03508771929824561,
+              epg_name: "正阳门下 11 12 13 14 15 16 17",
+            },
+            {
+              channel: "四川卫视",
+              value: 0.03508771929824561,
+              epg_name: "飞虎队 23 24 25 26 27 28 29 30 31 32 33",
+            },
+            {
+              channel: "CCTV-新闻",
+              value: 0.03508771929824561,
+              epg_name: "新闻直播间",
+            },
+          ],
+          input: [
+            {
+              channel: "开启直播",
+              value: 0.14035087719298245,
+            },
+            {
+              channel: "CCTV-4",
+              value: 0.07017543859649122,
+              epg_name: "大决战 38 39 40 41 42",
+            },
+            {
+              channel: "青海卫视",
+              value: 0.03508771929824561,
+              epg_name: "康熙微服私访记4 27 28 29 30 31",
+            },
+            {
+              channel: "天津卫视",
+              value: 0.017543859649122806,
+              epg_name: "娘道 52 53 54 55 56 57",
+            },
+            {
+              channel: "广西卫视",
+              value: 0.017543859649122806,
+              epg_name: "铁道风云 16 17 18 19 20",
+            },
+          ],
+          in: 0.42105263157894735,
+          end_x: "20220112162700",
+          start_y: 0.000147,
+          end_y: 0.00014,
+          out: 0.5789473684210527,
+        },
+        {
+          start_x: "20220112162700",
+          output: [
+            {
+              channel: "退出直播",
+              value: 0.07407407407407407,
+            },
+            {
+              channel: "甘肃卫视",
+              value: 0.037037037037037035,
+              epg_name: "烈火刀影 62 63 64 65 66",
+            },
+            {
+              channel: "CCTV-3",
+              value: 0.037037037037037035,
+              epg_name: "我爱满堂彩",
+            },
+            {
+              channel: "内蒙古卫视",
+              value: 0.037037037037037035,
+              epg_name: "正阳门下 11 12 13 14 15 16 17",
+            },
+            {
+              channel: "山西卫视",
+              value: 0.037037037037037035,
+              epg_name: "铁道游击队 33 34 35 36",
+            },
+          ],
+          input: [
+            {
+              channel: "开启直播",
+              value: 0.1111111111111111,
+            },
+            {
+              channel: "吉林卫视",
+              value: 0.1111111111111111,
+              epg_name: "飞哥大英雄 44 45 46 47",
+            },
+            {
+              channel: "广西卫视",
+              value: 0.037037037037037035,
+              epg_name: "铁道风云 16 17 18 19 20",
+            },
+            {
+              channel: "青海卫视",
+              value: 0.037037037037037035,
+              epg_name: "康熙微服私访记4 27 28 29 30 31",
+            },
+            {
+              channel: "东方卫视",
+              value: 0.037037037037037035,
+              epg_name: "三生有幸遇上你 ",
+            },
+          ],
+          in: 0.48148148148148145,
+          end_x: "20220112162800",
+          start_y: 0.00014,
+          end_y: 0.000145,
+          out: 0.5185185185185185,
+        },
+        {
+          start_x: "20220112162800",
+          output: [
+            {
+              channel: "退出直播",
+              value: 0.05405405405405406,
+            },
+            {
+              channel: "深圳卫视",
+              value: 0.05405405405405406,
+              epg_name: "新世界 49 50 51 52 53",
+            },
+            {
+              channel: "湖北卫视",
+              value: 0.05405405405405406,
+              epg_name: "黑狐 9 10 11 12 13",
+            },
+            {
+              channel: "内蒙古卫视",
+              value: 0.05405405405405406,
+              epg_name: "正阳门下 11 12 13 14 15 16 17",
+            },
+            {
+              channel: "安徽卫视",
+              value: 0.02702702702702703,
+              epg_name: "黑狐 ",
+            },
+          ],
+          input: [
+            {
+              channel: "开启直播",
+              value: 0.24324324324324326,
+            },
+            {
+              channel: "江苏卫视",
+              value: 0.08108108108108109,
+              epg_name: "我的前半生 ",
+            },
+            {
+              channel: "青海卫视",
+              value: 0.05405405405405406,
+              epg_name: "康熙微服私访记4 27 28 29 30 31",
+            },
+            {
+              channel: "CCTV-新闻",
+              value: 0.02702702702702703,
+              epg_name: "新闻直播间",
+            },
+            {
+              channel: "海南卫视",
+              value: 0.02702702702702703,
+              epg_name: "隋唐英雄 24 25 26 27 28 29",
+            },
+          ],
+          in: 0.5405405405405406,
+          end_x: "20220112162900",
+          start_y: 0.000145,
+          end_y: 0.00014,
+          out: 0.4594594594594595,
+        },
+        {
+          start_x: "20220112162900",
+          output: [
+            {
+              channel: "退出直播",
+              value: 0.05,
+            },
+            {
+              channel: "青海卫视",
+              value: 0.05,
+              epg_name: "康熙微服私访记4 27 28 29 30 31",
+            },
+            {
+              channel: "深圳卫视",
+              value: 0.025,
+              epg_name: "新世界 49 50 51 52 53",
+            },
+            {
+              channel: "卡酷少儿",
+              value: 0.025,
+              epg_name: "熊出没之丛林总动员",
+            },
+            {
+              channel: "CCTV-4",
+              value: 0.025,
+              epg_name: "大决战 38 39 40 41 42",
+            },
+          ],
+          input: [
+            {
+              channel: "海南卫视",
+              value: 0.1,
+              epg_name: "隋唐英雄 24 25 26 27 28 29",
+            },
+            {
+              channel: "开启直播",
+              value: 0.075,
+            },
+            {
+              channel: "青海卫视",
+              value: 0.075,
+              epg_name: "康熙微服私访记4 27 28 29 30 31",
+            },
+            {
+              channel: "CCTV-3",
+              value: 0.05,
+              epg_name: "我爱满堂彩",
+            },
+            {
+              channel: "四川卫视",
+              value: 0.05,
+              epg_name: "飞虎队 23 24 25 26 27 28 29 30 31 32 33",
+            },
+          ],
+          in: 0.6,
+          end_x: "20220112163100",
+          start_y: 0.00014,
+          end_y: 0.000148,
+          out: 0.4,
+        },
+      ],
+    };
+  },
+  mounted() {},
+  computed: {
+    channelList() {
+      return config.channelNameList;
+    },
+    chartKeys() {
+      return [
+        {
+          key: "tv_ratings",
+        },
+      ];
+    },
+    cycle() {
+      return config.cycle;
+    },
+    region() {
+      return config.region;
+    },
+  },
+  methods: {
+    onExport() {},
+    disabledDate(time) {
+      return time.getTime() > Date.now() - 86400000;
+    },
+    onSubmit() {},
+    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];
+      if (select === val) this.form[key] = [val];
+      else
+        this.form[key] = (a.join(",") + ",")
+          .replace(val + ",", "")
+          .replace(/,$/, "")
+          .split(",");
+    },
+  },
+  components: { flowCharts },
+};
+</script>
+
+<style>
+.SingleDay {
+  margin: 10px 15px;
+}
+.SingleDay .nowrap .cell {
+  white-space: nowrap;
+}
+</style>

src/views/SubRegion/SubRegion.vue

@@ -0,0 +1,347 @@
+<template>
+  <div class="SingleDay">
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item>传统媒体</el-breadcrumb-item>
+      <el-breadcrumb-item>频道收视（34城）</el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-card class="box-card">
+      <el-form
+        ref="form"
+        :model="form"
+        size="small"
+        :inline="true"
+        label-width="120px"
+        class="demo-form-inline"
+      >
+        <el-form-item label="日期">
+          <el-date-picker
+            v-model="form.date"
+            type="daterange"
+            :disabled-date="time => disabledDate(time)"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="时间">
+          <el-time-picker
+            v-model="form.rangeTime"
+            is-range
+            format="HH:mm"
+            range-separator="-"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+          >
+          </el-time-picker>
+        </el-form-item>
+        <el-form-item label="时段">
+          <el-select
+            v-model="form.rangeTimeRange"
+            placeholder="请选择时段"
+            @change="timeSelect"
+          >
+            <el-option
+              v-for="item in cycle"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+              :disabled="item.disabled"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="频道组">
+          <el-select
+            v-model="form.channel"
+            placeholder="请选择频道组"
+            @change="channelSelect"
+          >
+            <el-option
+              v-for="item in channelNameList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+              :disabled="item.disabled"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="星期">
+          <el-select
+            v-model="form.week"
+            placeholder="请选择星期"
+            @change="weekSelect"
+          >
+            <el-option
+              v-for="item in weeks"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+              :disabled="item.disabled"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="区域">
+          <el-cascader
+            v-model="form.region"
+            :options="region"
+            :props="{ children: 'options' }"
+          ></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-form-item>
+      </el-form>
+    </el-card>
+    <br />
+    <el-card class="box-card">
+      <line-charts
+        :list="tableData"
+        xName="channel_2"
+        :keys="chartKeys"
+      ></line-charts>
+      <el-table
+        :data="tableData"
+        :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }"
+        style="width: 100%"
+      >
+        <el-table-column
+          align="center"
+          show-overflow-tooltip
+          width="400px"
+          prop="channel_2"
+          label="省级卫视"
+          class-name="nowrap"
+        />
+        <el-table-column
+          align="center"
+          show-overflow-tooltip
+          prop="area_c_9"
+          label="34城"
+          class-name="nowrap"
+        />
+        <el-table-column
+          v-for="(item, i) in chartKeys"
+          :key="'table' + i"
+          align="center"
+          :prop="item.key"
+          :formatter="matrer"
+          :label="item.name"
+        />
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+// import {  } from "@/api/index";
+import { channelcsv } from "@/api/index";
+
+import lineCharts from "@/views/Country/components/lineCharts";
+
+import config from "@/config/index";
+export default {
+  name: "Channel",
+  data() {
+    return {
+      chartKeys: [
+        {
+          key: "indicators_tv_ratings",
+          name: "直播关注度",
+        },
+        {
+          key: "indicators_market_ratings",
+          name: "市占率",
+        },
+        {
+          key: "indicators_arrive",
+          name: "到达率",
+        },
+      ],
+      form: {
+        rangeTime: [],
+        channel: 5,
+        date: [
+          new Date(new Date() - 86400000),
+          new Date(new Date() - 86400000),
+        ],
+        region: -1,
+        week: 1
+      },
+      tableData: [
+        {
+          area_c_9: "天津",
+          channel_2: "陕西卫视",
+          indicators_arrive: "",
+          indicators_market_ratings: 0.002948,
+          indicators_market_ratings_rank: 1,
+          indicators_tv_ratings: 0.00063,
+          indicators_tv_ratings_rank: 1,
+        },
+        {
+          area_c_9: "武汉",
+          channel_2: "陕西卫视",
+          indicators_arrive: "",
+          indicators_market_ratings: 0.000852,
+          indicators_market_ratings_rank: 1,
+          indicators_tv_ratings: 0.000157,
+          indicators_tv_ratings_rank: 1,
+        },
+      ],
+    };
+  },
+  mounted() {},
+  computed: {
+    channelNameList() {
+      return config.channelNameList;
+    },
+    region() {
+      return config.region;
+    },
+    cycle(){
+        return config.cycle
+    },
+    weeks(){
+        console.log(config.weeks)
+        return config.weeks
+    }
+  },
+  methods: {
+    onExport() {
+      channelcsv(this.formatListData());
+    },
+    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;
+        });
+        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 (!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),
+      ];
+    },
+
+    disabledDate(time) {
+      return time.getTime() > Date.now() - 86400000;
+    },
+    onSubmit() {
+    },
+    matrer(row, column, cellValue) {
+      return (cellValue * 100).toFixed(4) - 0 + "%";
+    },
+    dateFormat(date) {
+      let D = new Date(date);
+      let m = D.getMonth() + 1;
+      let d = D.getDate();
+      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);
+      return {
+        year: D.getFullYear(),
+        month: m,
+        day: d,
+        hour: h,
+        minutes: M,
+        seconds: s,
+      };
+    },
+    formatListData() {
+      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 = "";
+      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 {
+        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("-"),
+      };
+    },
+    channelSelect(a) {
+      this.selectAll(a, "channel", 0);
+    },
+    weekSelect(a){
+      this.selectAll(a, "week", 0);
+    },
+    regionSelect(a) {
+      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(",");
+    },
+  },
+  components: { lineCharts },
+};
+</script>
+
+<style>
+.SingleDay {
+  margin: 10px 15px;
+}
+.SingleDay .nowrap .cell {
+  white-space: nowrap;
+}
+</style>