master分支恢复

src/appMinxin/getList.js

@@ -25,6 +25,7 @@ export default {
       }).then(x => {
         x = x || {};
         this.allList = {
+          live_add_fans: x.live_add_fans || 0,
           read: x.total_pv || 0,
           talk: x.total_comment || 0,
           keyWord: title,

src/appMinxin/getListSecond.js

@@ -20,6 +20,7 @@ export default {
             this.pageDate.season = season;
             getBase(this.pageDate).then((x) => {
                 this.allList = {
+                    live_add_fans: x.live_add_fans || 0,
                     read: x.total_pv || 0,
                     talk: x.total_comment || 0,
                     keyWord: title,

src/components/headTabs.vue

@@ -19,9 +19,9 @@
         <van-col v-if="data.live_uv && data.live_uv != -1" span="7">直播观看人数：</van-col>
         <van-col v-if="data.live_uv && data.live_uv != -1" span="5">{{ data.live_uv | formatNumber }}</van-col>
       </van-row>
-      <van-row class="headTabs" v-if="(data.live_uv && data.live_digg != -1) || (data.live_uv && data.live_comment != -1)">
-        <van-col v-if="data.live_uv && data.live_digg != -1" span="7">直播点赞数：</van-col>
-        <van-col v-if="data.live_uv && data.live_digg != -1" span="5">{{ data.live_digg | formatNumber }}</van-col>
+      <van-row class="headTabs" v-if="(data.live_uv && data.live_add_fans != -1) || (data.live_uv && data.live_comment != -1)">
+        <van-col v-if="data.live_uv && data.live_add_fans != -1" span="7">直播点赞数：</van-col>
+        <van-col v-if="data.live_uv && data.live_add_fans != -1" span="5">{{ data.live_add_fans | formatNumber }}</van-col>
         <van-col v-if="data.live_uv && data.live_comment != -1" span="7">直播评论数：</van-col>
         <van-col v-if="data.live_uv && data.live_comment != -1" span="5">{{ data.live_comment | formatNumber }}</van-col>
       </van-row>

src/components/liveHead.vue

@@ -2,16 +2,22 @@
     <div>
       <van-sticky :offset-top="0">
         <van-row class="headTabs">
-          <van-col span="6">粉丝数：</van-col>
-          <van-col span="6">{{ data.total_fans_count | formatNumber }}</van-col>
+          <van-col span="7">直播观看人次：</van-col>
+          <van-col span="5  ">{{ data.stats_total_user | formatNumber }}</van-col>
           <van-col span="6">直播评论数：</van-col>
           <van-col span="6">{{ data.msg_count | formatNumber }}</van-col>
         </van-row>
         <van-row class="headTabs">
-          <van-col span="6">直播点赞数：</van-col>
-          <van-col span="6">{{ data.like_count | formatNumber }}</van-col>
-          <van-col span="7">直播观看人数：</van-col>
-          <van-col span="5  ">{{ data.peopel_time | formatNumber }}</van-col>
+          <van-col span="7">平均在线人数：</van-col>
+          <van-col span="5">{{ data.avg_user_count | formatNumber }}</van-col>
+          <van-col span="6">新增粉丝数</van-col>
+          <van-col span="6">{{ data.add_fans_count | formatNumber }}</van-col>
+        </van-row>
+        <van-row class="headTabs">
+          <van-col span="6">转粉率：</van-col>
+          <van-col span="6">{{ data.turn_rate * 100 | formatNumber }}%</van-col>
+          <van-col span="7">最大在线人数：</van-col>
+          <van-col span="5">{{ data.max_user_count | formatNumber }}</van-col>
         </van-row>
       </van-sticky>
     </div>

src/router/index.js

@@ -58,6 +58,11 @@ const routes = [
     path:"/secondTopic/:select",
     name: "secondTopic",
     component: resolve => require(["@/view/secondTopic/index.vue"], resolve)
+  },
+  {
+    path: "/live",
+    name: "live",
+    component:  resolve => require(["@/view/liveDouyin/index.vue"], resolve)
   }
 ];
 

src/view/liveDouyin/index.vue

@@ -0,0 +1,303 @@
+<template>
+  <div class="yukang">
+    <head-tabs :data="allList"></head-tabs>
+    <div class="mainBody" style="padding-bottom: 50px">
+      <div class="title">观众来源</div>
+      <div>
+        <canvas
+          ref="chart"
+          :width="canvasRegion.width"
+          :height="canvasRegion.height"
+        ></canvas>
+        <b-canvas
+          keyName="value"
+          :legend="true"
+          :list="platformSort"
+        ></b-canvas>
+      </div>
+      <!-- 实时走势 -->
+      <!-- <div v-if="AddUpFans.peopleList.length" class="title">累计粉丝量</div>
+        <c-canvas
+            v-if="AddUpFans.peopleList.length"
+            :showListBtn="true"
+            :list="AddUpFans.peopleList"
+          ></c-canvas> -->
+      <div v-if="LikeTheTrend.peopleList.length" class="title">点赞走势</div>
+      <c-canvas
+        v-if="LikeTheTrend.peopleList.length"
+        :list="LikeTheTrend.peopleList"
+        :showListBtn="true"
+      ></c-canvas>
+      <div v-if="RealTimeTraffic.peopleList.length" class="title">实时流量</div>
+      <c-canvas
+        v-if="RealTimeTraffic.peopleList.length"
+        :showListBtn="true"
+        :list="RealTimeTraffic.peopleList"
+      ></c-canvas>
+      <div v-if="RealTimePersonTime.peopleList.length" class="title">
+        观看人次
+      </div>
+      <c-canvas
+        v-if="RealTimePersonTime.peopleList.length"
+        :showListBtn="true"
+        :list="RealTimePersonTime.peopleList"
+      ></c-canvas>
+    </div>
+  </div>
+</template>
+
+<script>
+import headTabs from "@/components/liveHead.vue";
+import cCanvas from "@/components/chart";
+import bCanvas from "@/components/bChart";
+import { getlive } from "@/api/getList.js";
+import F2 from "@antv/f2";
+
+export default {
+  name: "App",
+  components: {
+    headTabs,
+    cCanvas,
+    bCanvas,
+  },
+  data() {
+    return {
+      canvasRegion: {
+        width: 0,
+        height: 0,
+      },
+      allList: {},
+      platformSort: [],
+      // AddUpFans: {peopleList: []},
+      RealTimeTraffic: { peopleList: [] },
+      RealTimePersonTime: { peopleList: [] },
+      LikeTheTrend: { peopleList: [] },
+    };
+  },
+  mounted() {
+    let w = document.body.clientWidth || 0;
+    let h = document.body.clientHeight / 3;
+    this.canvasRegion = {
+      width: w > 1200 ? 1200 : w,
+      height: h,
+    };
+  },
+  created() {
+    let q = this.$route.query;
+    console.log("-")
+    getlive({
+      topic: q.title,
+      platform: "douyin",
+    }).then(res => {
+      let oriData = res || {};
+      let trend = oriData.trend || {};
+      this.allList = oriData.core_data || {};
+      this.allList.msg_count = oriData.webcastMessageList
+        ? oriData.webcastMessageList.count || 0
+        : 0;
+      let gender = [];
+      let oriGender = oriData.gender || [];
+      for (let i = 0; i < oriGender.length; i++) {
+        const v = oriGender[i];
+        gender.push({
+          name: v.key == "1" ? "男" : "女",
+          percent: v.rate * 1,
+          a: "1",
+        });
+      }
+      this.pie(gender);
+      let cityList = [];
+      let oriCity = oriData.city || [];
+      oriCity.map(v => {
+        cityList.push({
+          nickname: v.key == "Phuket Province" ? "普吉" : v.key,
+          value: v.count,
+        });
+      });
+
+      this.platformSort = cityList;
+
+      let RealTimeTraffic = {
+        title: "实时流量",
+        subTitle: "",
+        id: "id" + 10,
+        canvasId: "canvasId" + 10,
+        type: "line",
+        yType: "value",
+        xType: "time",
+        peopleList: [],
+      };
+      let RealTimePersonTime = {
+        title: "观看人次",
+        subTitle: "",
+        id: "id" + 11,
+        canvasId: "canvasId" + 11,
+        type: "line",
+        yType: "value",
+        xType: "time",
+        peopleList: [],
+      };
+      // let AddUpFans = {
+      //   title: "累计粉丝量",
+      //   subTitle: "",
+      //   id: 'id' + 12,
+      //   canvasId: 'canvasId' + 12,
+      //   type: "line",
+      //   yType: "value",
+      //   xType: "time",
+      //   peopleList: []
+      // };
+      let LikeTheTrend = {
+        title: "点赞走势",
+        subTitle: "",
+        id: "id" + 13,
+        canvasId: "canvasId" + 13,
+        type: "line",
+        yType: "value",
+        xType: "time",
+        peopleList: [],
+      };
+      // 趋势图数据
+      for (let i = 0; i < (trend.webcastTrendList || []).length; i++) {
+        const v = (trend.webcastTrendList || [])[i];
+        let time = v.crawl_date.split(" ")[1] || "";
+
+        /**
+             *   date: v.time,
+            type: "微博-阅读量趋势",
+            value: v.value,
+             * 
+             */
+        v.user_count != undefined &&
+          RealTimeTraffic.peopleList.push({
+            value: v.user_count || 0,
+            type: "实时流量",
+            date: time,
+          });
+        v.stats_total_user != undefined &&
+          RealTimePersonTime.peopleList.push({
+            value: v.stats_total_user || 0,
+            type: "观看人次",
+            date: time,
+          });
+        // v.club_info_total_fans_count != undefined && AddUpFans.peopleList.push({
+        //   value: v.club_info_total_fans_count || 0,
+        //   type: "累计粉丝量",
+        //   date: time
+        // });
+        v.like_count != undefined &&
+          LikeTheTrend.peopleList.push({
+            value: v.like_count || 0,
+            type: "点赞走势",
+            date: time,
+          });
+      }
+      // this.AddUpFans = AddUpFans;
+      this.RealTimeTraffic = RealTimeTraffic;
+      this.RealTimePersonTime = RealTimePersonTime;
+      this.LikeTheTrend = LikeTheTrend;
+    });
+  },
+  computed: {},
+  methods: {
+    pie(gender) {
+      const chart = new F2.Chart({
+        el: this.$refs.chart,
+        pixelRatio: window.devicePixelRatio,
+      });
+      chart.source(gender, {
+        percent: {
+          formatter: function formatter(val) {
+            return val * 100 + "%";
+          },
+        },
+      });
+      chart.legend({
+        position: "right",
+        itemFormatter: function itemFormatter(val) {
+          return val;
+        },
+      });
+      chart.tooltip(false);
+      chart.coord("polar", {
+        transposed: true,
+        radius: 0.85,
+      });
+      chart.axis(false);
+      chart
+        .interval()
+        .position("a*percent")
+        .color("name", [
+          "#1890FF",
+          "#13C2C2",
+          "#2FC25B",
+          "#FACC14",
+          "#F04864",
+          "#8543E0",
+        ])
+        .adjust("stack")
+        .style({
+          lineWidth: 1,
+          stroke: "#fff",
+          lineJoin: "round",
+          lineCap: "round",
+        })
+        .animate({
+          appear: {
+            duration: 1200,
+            easing: "bounceOut",
+          },
+        });
+
+      chart.render();
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.yukang {
+  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
+    Helvetica, Segoe UI, Arial, Roboto, "PingFang SC", "miui",
+    "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
+  color: #2c3e50;
+  font-weight: 400;
+  .title {
+    width: 100%;
+    padding: 10px 16px;
+    box-sizing: border-box;
+    overflow: hidden;
+    color: #323233;
+    font-size: 14px;
+    line-height: 24px;
+    background-color: #fff;
+  }
+  .userType {
+    position: relative;
+    .textGroup {
+      z-index: 1;
+      position: absolute;
+      overflow: hidden;
+      top: 15px;
+      right: 10px;
+      font-size: 0;
+      color: #1989fa;
+      &::after {
+        border-radius: 3px;
+        border-color: #1989fa;
+      }
+      .text {
+        padding: 0 3px;
+        display: inline-block;
+        text-align: center;
+        cursor: pointer;
+        font-size: 14px;
+      }
+      .act {
+        background-color: #1989fa;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>

vue.config.js

@@ -1,3 +1,6 @@
 module.exports = {
   publicPath: "/static",
+  css :{
+    extract:false
+  }
 };