提交

src/views/ranking/components/GBList.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="tv-list">
+    <div class="itemHead">
+      <van-row>
+        <van-col span="3" class="td"> 排名 </van-col>
+        <van-col span="15" class="td"> 频率 </van-col>
+        <van-col span="6" class="td"> 收听率 </van-col>
+      </van-row>
+    </div>
+    <van-row
+      class="item"
+      v-for="(v, o) in platfromData || []"
+      :key="v.name"
+    >
+      <van-col
+        span="3"
+        :class="{ td: true }"
+        :style="{ color: color[o] || '#000', fontWeight: 600 }"
+      >
+        {{ o + 1 }}
+      </van-col>
+      <van-col span="15" :class="{ td: true }">
+        {{ v.schedulename }}
+      </van-col>
+      <van-col span="6" :class="{ td: true }" style="color: #e1a74f">
+        {{ formatNum(v.watchrate) }}%
+      </van-col>
+    </van-row>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import {
+  Col as vanCol,
+  Row as vanRow,
+} from "vant";
+import "vant/lib/col/style/index";
+import "vant/lib/row/style/index";
+// import {} from "../utils/tool";
+import { jsonDataRanking } from "../../../api/index";
+
+import echarts from "../../../utils/echarts";
+
+export default {
+  name: "tv-list",
+  data() {
+    return {
+      setact: false,
+      show: false,
+      charts: undefined,
+      ratios: [],
+      platfromData: [],
+      color: ["#ff0036", "#ff9b00", "#ffcc00"],
+    };
+  },
+  props: {
+    valDay: String,
+  },
+  watch: {
+    valDay() {
+      this.init();
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  computed: {},
+  methods: {
+    init() {
+      //   初始
+      if (!this.valDay) return;
+      this.setact = true;
+      this.getData();
+    },
+    formatNum(num) {
+      if (isNaN(num)) return 0;
+      return Number(num).toFixed(4) - 0;
+    },
+    showPopup(i) {
+      this.show = true;
+      this.ratios = this.platfromData[i] || [];
+      console.log(this.ratios);
+      this.$nextTick(() => {
+        this.upEcharts();
+      });
+    },
+    upEcharts() {
+      if (!this.ratios.ratios || !this.ratios.ratios.length) {
+        this.echarts && this.echarts.dispose && this.echarts.dispose();
+        return;
+      }
+      if (!this.echarts) {
+        const doc = document.body;
+        const width = doc.offsetWidth - 32;
+        this.echarts = echarts.init(
+          this.$refs.pie,
+          {},
+          {
+            width,
+            height: width,
+          }
+        );
+      }
+      const key = [],
+        value = [];
+      let max = 0;
+      this.ratios.ratios.map(v => {
+        let val = (v.value * 100).toFixed(2) - 0;
+        key.push(v.name);
+        value.push(val);
+        max < val && (max = val);
+      });
+      max += max * 0.2;
+      max > 100 && (max = 100);
+      this.echarts.setOption({
+        title: {
+          text: "观看时长用户分布",
+          textStyle: {
+            fontSize: 14,
+          },
+        },
+        radar: {
+          shape: "circle",
+          center: ["50%", "50%"],
+          radius: 100,
+          indicator: key.map((v, i) => {
+            let m = value[i] / max,
+              val = max;
+            m <= 0.5 ? (val = 0.5 * max) : "";
+            return {
+              name: v,
+              max: val,
+            };
+          }),
+        },
+        series: [
+          {
+            type: "radar",
+            data: [
+              {
+                value,
+                label: {
+                  show: true,
+                  formatter: function (params) {
+                    return params.value + "%";
+                  },
+                },
+                itemStyle: {
+                  color: "#F9713C",
+                },
+                areaStyle: {
+                  opacity: 0.1,
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+    getData() {
+      jsonDataRanking({
+        url: ["tv", this.valDay].join("-"),
+      })
+        .then(res => {
+          this.platfromData = res || [];
+          this.$emit("start", {
+            status: 200,
+          });
+        })
+        .catch(err => {
+          this.$emit("start", {
+            status: err,
+          });
+        });
+    },
+  },
+  beforeUnmount() {},
+  components: {
+    vanCol,
+    vanRow,
+  },
+};
+</script>
+
+<style scoped>
+.tv-list {
+  font-size: 15px;
+  padding: 5px 5px 60px 5px;
+}
+.td {
+  text-align: center;
+  line-height: 2.5em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.item {
+  overflow: hidden;
+  border-radius: 3px;
+  margin-top: 11px;
+  background-color: #f5f6f8;
+}
+.itemHead {
+  margin-top: 0;
+  background-color: #f5f6f8;
+}
+.main {
+  padding: 0.5em;
+}
+</style>
+<style>
+.tv-list .van-tab {
+  font-size: 16px;
+}
+</style>

src/views/ranking/components/moveClient.vue

@@ -10,7 +10,8 @@
           <div class="item">
             <van-row>
               <van-col span="3" class="td"> 排名 </van-col>
-              <van-col span="13" class="td"> 账号 </van-col>
+              <van-col span="5" class="td"> 单位名称 </van-col>
+              <van-col span="8" class="td"> 账号 </van-col>
               <van-col span="8" class="td"> 传播量 </van-col>
             </van-row>
           </div>
@@ -26,7 +27,10 @@
             >
               {{ o + 1 }}
             </van-col>
-            <van-col span="13" :class="{ td: true }">
+            <van-col span="5" :class="{ td: true }">
+              {{ v.name }}
+            </van-col>
+            <van-col span="8" :class="{ td: true }">
               {{ v.nick_name }}
             </van-col>
             <van-col span="8" :class="{ td: true }" style="color: #e1a74f">

src/views/ranking/components/tvList.vue

@@ -3,7 +3,8 @@
     <div class="itemHead">
       <van-row>
         <van-col span="3" class="td"> 排名 </van-col>
-        <van-col span="13" class="td"> 栏目 </van-col>
+        <van-col span="5" class="td"> 单位名称 </van-col>
+        <van-col span="8" class="td"> 栏目 </van-col>
         <van-col span="6" class="td"> 收视率 </van-col>
         <van-col span="2" class="td"></van-col>
       </van-row>
@@ -21,7 +22,10 @@
       >
         {{ o + 1 }}
       </van-col>
-      <van-col span="13" :class="{ td: true }">
+      <van-col span="5" :class="{ td: true }">
+        {{ v.channelname }}
+      </van-col>
+      <van-col span="8" :class="{ td: true }">
         {{ v.schedulename }}
       </van-col>
       <van-col span="6" :class="{ td: true }" style="color: #e1a74f">

src/views/ranking/index.vue

@@ -3,10 +3,14 @@
     <van-sticky offset-top="0">
       <van-nav-bar>
         <div slot="title" @click="showCalendar = true">
-          <span class="body" v-if="day">
+          <div class="titleMain">
+            各频率频道日推数据
+            <div class="tip" style="display: block;font-size: 16px;">数据来源于集团大数据平台</div>
+            </div>
+          <div class="body" v-if="day">
             {{ day }}
             <van-icon name="arrow-down" color="#333" />
-          </span>
+          </div>
           <div class="tip">数据来源于集团大数据平台</div>
         </div>
       </van-nav-bar>
@@ -68,6 +72,7 @@ import { infoDate } from "../../api/index";
 
 import tvList from "./components/tvList.vue";
 import moveClient from "./components/moveClient.vue";
+import GBList from "./components/GBList.vue";
 
 // import {} from "../utils/tool";
 // import {} from "../api/index";
@@ -90,6 +95,11 @@ export default {
           icon: "tv-o",
           com: "tvList",
         },
+        {
+          name: "广播排行",
+          icon: "volume-o",
+          com: "GBList",
+        },
         {
           name: "新媒体排行",
           icon: "bar-chart-o",
@@ -145,6 +155,7 @@ export default {
     vanSticky,
     vanCalendar,
     vanIcon,
+    GBList,
     tvList,
     moveClient,
   },
@@ -155,6 +166,7 @@ export default {
 .ranking {
   width: 100vw;
   height: 100vh;
+  overflow-y: auto;
   padding-bottom: 50px;
   box-sizing: border-box;
   background-color: #fff;
@@ -167,4 +179,37 @@ export default {
   color: #999;
   padding-top: 5px;
 }
+.titleMain {
+  display: none;
+}
+</style>
+<style>
+@media screen and (min-width: 900px) {
+  .ranking {
+    padding: 0 10%;
+    margin: 0 auto;
+  }
+  .titleMain {
+    display: block !important;
+    font-size: 24px;
+    font-weight: 500;
+  }
+  .van-sticky .van-nav-bar__content {
+    height: 80px;
+  }
+  .body{
+    font-size: 18px;
+    float: right;
+    margin-right: 5em;
+    margin-top: -1.5em;
+  }
+  .tip {
+    display: none;
+  }
+  .van-nav-bar__title,
+  .van-nav-bar__title>div{
+    width: 100%;
+    max-width: 100%;
+  }
+}
 </style>