提交

src/config/index.js

@@ -164,22 +164,808 @@ export default {
         {
           label: "34城",
           value: 9,
+          options:[
+            {
+                label:"北京",
+                value: 100,
+            },
+            {
+                label:"上海",
+                value: 101,
+            },
+            {
+                label:"天津",
+                value: 103,
+            },
+            {
+                label:"石家庄",
+                value: 104,
+            },
+            {
+                label:"太原",
+                value: 105,
+            },
+            {
+                label:"呼和浩特",
+                value: 106,
+            },
+            {
+                label:"济南",
+                value: 107,
+            },
+            {
+                label:"哈尔滨",
+                value: 108,
+            },
+            {
+                label:"长春",
+                value: 100,
+            },
+            {
+                label:"沈阳",
+                value: 100,
+            },
+            {
+                label:"西安",
+                value: 100,
+            },
+            {
+                label:"兰州",
+                value: 100,
+            },
+            {
+                label:"银川",
+                value: 100,
+            },
+            {
+                label:"乌鲁木齐",
+                value: 100,
+            },
+            {
+                label:"郑州",
+                value: 100,
+            },
+            {
+                label:"长沙",
+                value: 100,
+            },
+            {
+                label:"武汉",
+                value: 100,
+            },
+            {
+                label:"南昌",
+                value: 100,
+            },
+            {
+                label:"南京",
+                value: 100,
+            },
+            {
+                label:"杭州",
+                value: 100,
+            },
+            {
+                label:"合肥",
+                value: 100,
+            },
+            {
+                label:"广州",
+                value: 100,
+            },
+            {
+                label:"南宁",
+                value: 100,
+            },
+            {
+                label:"福州",
+                value: 100,
+            },
+            {
+                label:"海口",
+                value: 100,
+            },
+            {
+                label:"昆明",
+                value: 100,
+            },
+            {
+                label:"贵阳",
+                value: 100,
+            },
+            {
+                label:"成都",
+                value: 100,
+            },
+            {
+                label:"深圳",
+                value: 100,
+            },
+            {
+                label:"大连",
+                value: 100,
+            },
+            {
+                label:"青岛",
+                value: 100,
+            },
+            {
+                label:"厦门",
+                value: 100,
+            },
+            {
+                label:"重庆",
+                value: 100,
+            },
+            {
+                label:"西宁",
+                value: 100,
+            },
+          ]
         },
         {
           label: "52城",
           value: 10,
+          options:[
+            {
+                label:"北京",
+                value: 100,
+            },
+            {
+                label:"上海",
+                value: 101,
+            },
+            {
+                label:"天津",
+                value: 103,
+            },
+            {
+                label:"石家庄",
+                value: 104,
+            },
+            {
+                label:"太原",
+                value: 105,
+            },
+            {
+                label:"呼和浩特",
+                value: 106,
+            },
+            {
+                label:"济南",
+                value: 107,
+            },
+            {
+                label:"哈尔滨",
+                value: 108,
+            },
+            {
+                label:"长春",
+                value: 100,
+            },
+            {
+                label:"沈阳",
+                value: 100,
+            },
+            {
+                label:"西安",
+                value: 100,
+            },
+            {
+                label:"兰州",
+                value: 100,
+            },
+            {
+                label:"银川",
+                value: 100,
+            },
+            {
+                label:"乌鲁木齐",
+                value: 100,
+            },
+            {
+                label:"郑州",
+                value: 100,
+            },
+            {
+                label:"长沙",
+                value: 100,
+            },
+            {
+                label:"武汉",
+                value: 100,
+            },
+            {
+                label:"南昌",
+                value: 100,
+            },
+            {
+                label:"南京",
+                value: 100,
+            },
+            {
+                label:"杭州",
+                value: 100,
+            },
+            {
+                label:"合肥",
+                value: 100,
+            },
+            {
+                label:"广州",
+                value: 100,
+            },
+            {
+                label:"南宁",
+                value: 100,
+            },
+            {
+                label:"福州",
+                value: 100,
+            },
+            {
+                label:"海口",
+                value: 100,
+            },
+            {
+                label:"昆明",
+                value: 100,
+            },
+            {
+                label:"贵阳",
+                value: 100,
+            },
+            {
+                label:"成都",
+                value: 100,
+            },
+            {
+                label:"深圳",
+                value: 100,
+            },
+            {
+                label:"大连",
+                value: 100,
+            },
+            {
+                label:"青岛",
+                value: 100,
+            },
+            {
+                label:"厦门",
+                value: 100,
+            },
+            {
+                label:"重庆",
+                value: 100,
+            },
+            {
+                label:"西宁",
+                value: 100,
+            },
+            {
+                label:"惠州",
+                value: 100,
+            },
+            {
+                label:"锦州",
+                value: 100,
+            },
+            {
+                label:"宁波",
+                value: 100,
+            },
+            {
+                label:"韶关",
+                value: 100,
+            },
+            {
+                label:"温州",
+                value: 100,
+            },
+            {
+                label:"无锡",
+                value: 100,
+            },
+            {
+                label:"湛江",
+                value: 100,
+            },
+            {
+                label:"唐山",
+                value: 100,
+            },
+            {
+                label:"三亚",
+                value: 100,
+            },
+            {
+                label:"扬州",
+                value: 100,
+            },
+            {
+                label:"烟台",
+                value: 100,
+            },
+            {
+                label:"赣州",
+                value: 100,
+            },
+            {
+                label:"济宁",
+                value: 100,
+            },
+            {
+                label:"徐州",
+                value: 100,
+            },
+            {
+                label:"宜昌",
+                value: 100,
+            },
+            {
+                label:"九江",
+                value: 100,
+            },
+            {
+                label:"拉萨",
+                value: 100,
+            },
+          ]
         },
         {
           label: "55城",
           value: 17,
+          options:[
+            {
+                label:"北京",
+                value: 100,
+            },
+            {
+                label:"上海",
+                value: 101,
+            },
+            {
+                label:"天津",
+                value: 103,
+            },
+            {
+                label:"石家庄",
+                value: 104,
+            },
+            {
+                label:"太原",
+                value: 105,
+            },
+            {
+                label:"呼和浩特",
+                value: 106,
+            },
+            {
+                label:"济南",
+                value: 107,
+            },
+            {
+                label:"哈尔滨",
+                value: 108,
+            },
+            {
+                label:"长春",
+                value: 100,
+            },
+            {
+                label:"沈阳",
+                value: 100,
+            },
+            {
+                label:"西安",
+                value: 100,
+            },
+            {
+                label:"兰州",
+                value: 100,
+            },
+            {
+                label:"银川",
+                value: 100,
+            },
+            {
+                label:"乌鲁木齐",
+                value: 100,
+            },
+            {
+                label:"郑州",
+                value: 100,
+            },
+            {
+                label:"长沙",
+                value: 100,
+            },
+            {
+                label:"武汉",
+                value: 100,
+            },
+            {
+                label:"南昌",
+                value: 100,
+            },
+            {
+                label:"南京",
+                value: 100,
+            },
+            {
+                label:"杭州",
+                value: 100,
+            },
+            {
+                label:"合肥",
+                value: 100,
+            },
+            {
+                label:"广州",
+                value: 100,
+            },
+            {
+                label:"南宁",
+                value: 100,
+            },
+            {
+                label:"福州",
+                value: 100,
+            },
+            {
+                label:"海口",
+                value: 100,
+            },
+            {
+                label:"昆明",
+                value: 100,
+            },
+            {
+                label:"贵阳",
+                value: 100,
+            },
+            {
+                label:"成都",
+                value: 100,
+            },
+            {
+                label:"深圳",
+                value: 100,
+            },
+            {
+                label:"大连",
+                value: 100,
+            },
+            {
+                label:"青岛",
+                value: 100,
+            },
+            {
+                label:"厦门",
+                value: 100,
+            },
+            {
+                label:"重庆",
+                value: 100,
+            },
+            {
+                label:"西宁",
+                value: 100,
+            },
+            {
+                label:"惠州",
+                value: 100,
+            },
+            {
+                label:"锦州",
+                value: 100,
+            },
+            {
+                label:"宁波",
+                value: 100,
+            },
+            {
+                label:"韶关",
+                value: 100,
+            },
+            {
+                label:"温州",
+                value: 100,
+            },
+            {
+                label:"无锡",
+                value: 100,
+            },
+            {
+                label:"湛江",
+                value: 100,
+            },
+            {
+                label:"唐山",
+                value: 100,
+            },
+            {
+                label:"三亚",
+                value: 100,
+            },
+            {
+                label:"扬州",
+                value: 100,
+            },
+            {
+                label:"烟台",
+                value: 100,
+            },
+            {
+                label:"赣州",
+                value: 100,
+            },
+            {
+                label:"济宁",
+                value: 100,
+            },
+            {
+                label:"徐州",
+                value: 100,
+            },
+            {
+                label:"宜昌",
+                value: 100,
+            },
+            {
+                label:"九江",
+                value: 100,
+            },
+            {
+                label:"拉萨",
+                value: 100,
+            },
+          ]
         },
         {
           label: "71城",
           value: 11,
+          options:[
+            {
+                label:"北京",
+                value: 100,
+            },
+            {
+                label:"上海",
+                value: 101,
+            },
+            {
+                label:"天津",
+                value: 103,
+            },
+            {
+                label:"石家庄",
+                value: 104,
+            },
+            {
+                label:"太原",
+                value: 105,
+            },
+            {
+                label:"呼和浩特",
+                value: 106,
+            },
+            {
+                label:"济南",
+                value: 107,
+            },
+            {
+                label:"哈尔滨",
+                value: 108,
+            },
+            {
+                label:"长春",
+                value: 100,
+            },
+            {
+                label:"沈阳",
+                value: 100,
+            },
+            {
+                label:"西安",
+                value: 100,
+            },
+            {
+                label:"兰州",
+                value: 100,
+            },
+            {
+                label:"银川",
+                value: 100,
+            },
+            {
+                label:"乌鲁木齐",
+                value: 100,
+            },
+            {
+                label:"郑州",
+                value: 100,
+            },
+            {
+                label:"长沙",
+                value: 100,
+            },
+            {
+                label:"武汉",
+                value: 100,
+            },
+            {
+                label:"南昌",
+                value: 100,
+            },
+            {
+                label:"南京",
+                value: 100,
+            },
+            {
+                label:"杭州",
+                value: 100,
+            },
+            {
+                label:"合肥",
+                value: 100,
+            },
+            {
+                label:"广州",
+                value: 100,
+            },
+            {
+                label:"南宁",
+                value: 100,
+            },
+            {
+                label:"福州",
+                value: 100,
+            },
+            {
+                label:"海口",
+                value: 100,
+            },
+            {
+                label:"昆明",
+                value: 100,
+            },
+            {
+                label:"贵阳",
+                value: 100,
+            },
+            {
+                label:"成都",
+                value: 100,
+            },
+            {
+                label:"深圳",
+                value: 100,
+            },
+            {
+                label:"大连",
+                value: 100,
+            },
+            {
+                label:"青岛",
+                value: 100,
+            },
+            {
+                label:"厦门",
+                value: 100,
+            },
+            {
+                label:"重庆",
+                value: 100,
+            },
+            {
+                label:"西宁",
+                value: 100,
+            },
+            {
+                label:"惠州",
+                value: 100,
+            },
+            {
+                label:"锦州",
+                value: 100,
+            },
+            {
+                label:"宁波",
+                value: 100,
+            },
+            {
+                label:"韶关",
+                value: 100,
+            },
+            {
+                label:"温州",
+                value: 100,
+            },
+            {
+                label:"无锡",
+                value: 100,
+            },
+            {
+                label:"湛江",
+                value: 100,
+            },
+            {
+                label:"唐山",
+                value: 100,
+            },
+            {
+                label:"三亚",
+                value: 100,
+            },
+            {
+                label:"扬州",
+                value: 100,
+            },
+            {
+                label:"烟台",
+                value: 100,
+            },
+            {
+                label:"赣州",
+                value: 100,
+            },
+            {
+                label:"济宁",
+                value: 100,
+            },
+            {
+                label:"徐州",
+                value: 100,
+            },
+            {
+                label:"宜昌",
+                value: 100,
+            },
+            {
+                label:"九江",
+                value: 100,
+            },
+            {
+                label:"拉萨",
+                value: 100,
+            },
+          ]
         },
         {
           label: "29省",
           value: 1,
+          options:[
+            {
+                label:"北京",
+                value: 100,
+            },
+            {
+                label:"上海",
+                value: 100,
+            },
+            {
+                label:"重庆",
+                value: 100,
+            },
+            {
+                label:"天津",
+                value: 100,
+            },
+            {
+                label:"河北",
+                value: 100,
+            },
+            {
+                label:"陕西",
+                value: 100,
+            },
+            {
+                label:"黑龙江",
+                value: 100,
+            },
+          ]
         },
       ],
     },

src/router/index.js

@@ -46,9 +46,17 @@ const routes = [
     component: () => import("../views/Country/Index.vue"),
     children: [
         {
-            path: "",
+            path: "", // 频道全天节目
             component: ()=> import("../views/ChannelEPG/Channel.vue")
-        }
+        },
+        {
+            path: "/country/custom", // 自定义时间段排行
+            component: ()=> import("../views/customRanking/customRanking.vue")
+        },
+        {
+            path: "/country/channelList", // 多维度筛选 频道时段排名
+            component: ()=> import("../views/ChannelList/ChannelList.vue")
+        },
     ],
   },
 ];

src/views/ChannelEPG/Channel.vue

@@ -99,7 +99,11 @@
     </el-card>
     <br />
     <el-card class="box-card">
-      <line-charts :list="tableData" :keys="chartKeys"></line-charts>
+      <line-charts
+        :list="tableData"
+        xName="epg"
+        :keys="chartKeys"
+      ></line-charts>
       <el-table
         :data="tableData"
         :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }"
@@ -220,8 +224,7 @@ export default {
       ],
     };
   },
-  mounted() {
-  },
+  mounted() {},
   computed: {
     cycle() {
       return config.cycle;
@@ -279,7 +282,7 @@ export default {
     },
     onSubmit() {},
     matrer(row, column, cellValue) {
-      return (cellValue * 100).toFixed(4) + "%";
+      return (cellValue * 100).toFixed(4) - 0 + "%";
     },
     channelSelect(a) {
       this.selectAll(a, "channelGroup", 0);

src/views/ChannelList/ChannelList.vue

@@ -0,0 +1,285 @@
+<template>
+  <div class="channelEPG">
+    <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-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="请选择时段"
+            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 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"
+            >
+            </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-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
+          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 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_tv_ratings",
+          name: "直播关注度",
+        },
+        {
+          key: "indicators_market_ratings",
+          name: "市占率",
+        },
+        {
+          key: "indicators_arrive",
+          name: "到达率",
+        },
+        {
+          key: "indicators_loyal",
+          name: "忠诚度",
+        },
+      ],
+      form: {
+        rangeTime: [],
+        channelGroup: 0,
+        date: [
+          new Date(new Date() - 86400000),
+          new Date(new Date() - 86400000),
+        ],
+        region: -1,
+      },
+      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,
+        },
+      ],
+    };
+  },
+  mounted() {},
+  computed: {
+    cycle() {
+      return config.cycle;
+    },
+    channelList() {
+      return config.channelList;
+    },
+    region() {
+      return config.region;
+    },
+  },
+  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, "channelGroup", 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>
+.channelEPG {
+  margin: 10px 15px;
+}
+.channelEPG .nowrap .cell {
+  white-space: nowrap;
+}
+</style>

src/views/Country/components/lineCharts.vue

@@ -28,7 +28,7 @@ echarts.use([
 let chart = undefined;
 export default {
   name: "countryLineChart",
-  props: ["list", "tab", "channelId", "keys"],
+  props: ["list", "keys", "xName"],
   data: function() {
     return {
       leftList: [],
@@ -52,7 +52,7 @@ export default {
         keys = [];
       for (let o = 0; o < list.length; o++) {
         const v = list[o];
-        keys.push(v.epg);
+        keys.push(v[this.xName]);
         for (let i = 0; i < this.keys.length; i++) {
           const p = this.keys[i];
           if (!values[i]) values[i] = [];

src/views/customRanking/customRanking.vue

@@ -0,0 +1,266 @@
+<template>
+  <div class="customRanking">
+    <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-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="请选择时段"
+            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 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"
+            >
+            </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">
+      <el-table
+        :data="tableData"
+        :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }"
+        style="width: 100%"
+      >
+        <el-table-column type="index"></el-table-column>
+        <el-table-column
+          align="center"
+          show-overflow-tooltip
+          prop="tv_name"
+          label="频道"
+          class-name=""
+        />
+        <el-table-column
+          align="center"
+          show-overflow-tooltip
+          label="直播关注度"
+          class-name=""
+        >
+          <template #default="scope">
+            <el-progress
+              :percentage="
+                (scope.row.tv_ratings / (total.tv_ratings || 1)) * 100
+              "
+              color="#00bed0"
+              :format="() => rogressText(scope.row, 'tv_ratings')"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column
+          align="center"
+          show-overflow-tooltip
+          prop="tv_name"
+          label="市占率"
+          class-name=""
+        >
+          <template #default="scope">
+            <el-progress
+              :percentage="
+                (scope.row.market_ratings / (total.market_ratings || 1)) * 100
+              "
+              color="#fcc543"
+              :format="() => rogressText(scope.row, 'market_ratings')"
+            />
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+// import {  } from "@/api/index";
+import config from "@/config/index";
+
+export default {
+  name: "CustomRanking",
+  data() {
+    return {
+      form: {
+        rangeTime: [],
+        channelGroup: 0,
+        date: [
+          new Date(new Date() - 86400000),
+          new Date(new Date() - 86400000),
+        ],
+        region: -1,
+      },
+      total: {},
+      tableData: [
+        {
+          market_ratings: 0.037223,
+          tv_name: "湖南卫视",
+          rank: 1,
+          tv_ratings: 0.007224,
+          id: 24,
+          type: "卫视",
+        },
+        {
+          market_ratings: 0.035458,
+          tv_name: "东方卫视",
+          rank: 2,
+          tv_ratings: 0.006882,
+          id: 23,
+          type: "卫视",
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.total = this.tableData[0] || {};
+  },
+  computed: {
+    cycle() {
+      return config.cycle;
+    },
+    channelList() {
+      return config.channelList;
+    },
+    region() {
+      return config.region;
+    },
+  },
+  methods: {
+    rogressText(v, key) {
+      return (v[key] * 100).toFixed(4) + "%";
+    },
+    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) + "%";
+    },
+    channelSelect(a) {
+      this.selectAll(a, "channelGroup", 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: {},
+};
+</script>
+
+<style>
+.customRanking {
+  margin: 10px 15px;
+}
+</style>