快手直播数据

app.json

@@ -2,7 +2,8 @@
   "pages": [
     "pages/home/home",
     "pages/sonTopic/sonTopic",
-    "pages/liveData/liveData"
+    "pages/liveData/liveData",
+    "pages/liveData_kuaishou/index"
   ],
   "window": {
     "backgroundTextStyle": "light",

components/Chart/Chart.js

@@ -13,6 +13,10 @@ Component({
       type: String,
       value: "mychart-bar"
     },
+    yCompany:{
+      type: String,
+      value: ""
+    },
     type: {
       type: String,
       value: "bar"
@@ -34,6 +38,7 @@ Component({
         if (!n || !n.length) return
         let xData = [], yData = [];
         let type = this.data.select || this.data.yType;
+        let _this = this;
         n.map((v, i) => {
           yData[i] = {
             type: this.data.type,
@@ -45,6 +50,9 @@ Component({
               color: "#fff",
               formatter: function (d) {
                 let v = d.value;
+                if(_this.data.yCompany == "%"){
+                  return (v).toFixed(1)+'%';
+                }
                 if (isNaN(v)) {
                   return 0
                 } else if (v >= 10000 && v < 100000) {
@@ -131,6 +139,7 @@ Component({
   methods: {
     initChart: function (canvas, width, height, dpr) {
       this.chart && this.chart.dispose && this.chart.dispose();
+      let _this = this;
       this.chart = echarts.init(canvas, null, {
         width: width,
         height: height,
@@ -199,6 +208,9 @@ Component({
           },
           axisLabel: {
             formatter: function (val, index) {
+              if(_this.data.yCompany == "%"){
+                return (val).toFixed(1)+'%';
+              }
               let out = val;
               if (val >= 1000 && val < 10000) {
                 out = (val / 1000).toFixed(2) - 0 + "千"

pages/home/components/topic/topic.js

@@ -126,7 +126,6 @@ Component({
         url: app.baseUrl + '/overview',
         success: function (res) {
           if (res.statusCode === 200) {
-            console.log(res.data )
             _this.setData({
               headData: res.data || {}
             })
@@ -335,13 +334,15 @@ Component({
         }
       })
     },
-    toLive: function () {
+    toLive: function (e) {
       if (!toUrl) return;
       toUrl = false;
       let title = encodeURIComponent(this.data.title);
-      
+      let platform = e.currentTarget.dataset.platform || '';
+      let url = "/pages/liveData/liveData?title=" +title + "&platform=" + platform;
+      if(platform === "kuaishou") url = "/pages/liveData_kuaishou/index?title=" +title + "&platform=" + platform;
       wx.navigateTo({
-        url: "/pages/liveData/liveData?title=" +title,
+        url,
         complete: function (res) {
           toUrl = true;
         }
@@ -350,7 +351,6 @@ Component({
     showDetail: function (e) {
       let introduce = e.currentTarget.dataset.introduce || "";
       let detail = app.introduce[this.data.title + "_" + introduce] || {}
-      console.log(introduce,this)
       this.setData({
         detail: (detail.value || ""),
         diglogTitle:  (detail.content_desc || "")

pages/home/components/topic/topic.wxml

@@ -54,8 +54,11 @@
   </view>
 
   <view class="pKvm">
-    <view class="kvm" bindtap="toLive" wx:if="{{headData.has_live_data}}">
-      <view class="kvmText">直播数据</view>
+    <view class="kvm" bindtap="toLive" data-platform="kuaishou" wx:if="{{headData.has_live_kuaishou_data}}">
+      <view class="kvmText">快手直播</view>
+    </view>
+    <view class="kvm" bindtap="toLive" data-platform="douyin" wx:if="{{headData.has_live_douyin_data}}">
+      <view class="kvmText">抖音直播</view>
     </view>
     <view class="kvm" bindtap="toSecond" wx:if="{{sonList && sonList.length}}">
       <view class="kvmText">二次传播</view>

pages/home/components/topic/topic.wxss

@@ -38,7 +38,7 @@
   border-radius: 50%;
   text-align: center;
   box-shadow: 0 0 7px #1989fa;
-  margin-left: 5rpx;
+  margin-left: 10rpx;
 }
 
 .topic .kvmText {

pages/liveData/liveData.js

@@ -30,7 +30,8 @@ Page({
    */
   onLoad: function (options) {
     this.setData({
-      title: decodeURIComponent(options.title)
+      title: decodeURIComponent(options.title),
+      platform: options.platform
     }, () => {
       this.getData()
     })
@@ -60,7 +61,6 @@ Page({
    * 生命周期函数--监听页面卸载
    */
   onUnload: function () {
-    this.isUp && clearInterval(this.isUp);
   },
 
   /**
@@ -83,7 +83,7 @@ Page({
   onShareAppMessage: function () {
 
   },
-  formatNumber:function (val) {
+  formatNumber: function (val) {
     let out = val;
     if (val >= 1000 && val < 10000) {
       out = (val / 1000).toFixed(2) - 0 + "千"
@@ -100,7 +100,8 @@ Page({
     wx.request({
       url: app.baseUrl + '/live-result',
       data: {
-        topic: this.data.title
+        topic: this.data.title,
+        platform: this.data.platform
       },
       success: function (res) {
         wx.hideLoading()
@@ -182,9 +183,7 @@ Page({
           });
         }
         console.log(oriData);
-        // 基础数据
-        let last = (trend.webcastTrendList || []);
-        
+        // 基础数据  
         let base = {
           msg_count: (oriData.webcastMessageList ? oriData.webcastMessageList.count || 0 : 0),
           like_count: (trend.like || {}).add_like_count || 0,
@@ -211,12 +210,15 @@ Page({
             value: v.count
           })
         }
-
-
-        _this.setData({
+        let p = {
           headData: base,
-          region: [region],
-          series: [
+          region: [],
+          series: [],
+          lineList: []
+        }
+        region.length && p.region.push(region);
+        if (gender.length)
+          p.series = [
             {
               type: 'pie',
               label: {
@@ -232,14 +234,12 @@ Page({
                 }
               }
             }
-          ],
-          lineList:[
-            RealTimeTraffic,
-            RealTimePersonTime,
-            AddUpFans,
-            LikeTheTrend
-          ]
-        })
+          ];
+        AddUpFans && p.lineList.push(AddUpFans);
+        LikeTheTrend && p.lineList.push(LikeTheTrend);
+        RealTimeTraffic && p.lineList.push(RealTimeTraffic);
+        RealTimePersonTime && p.lineList.push(RealTimePersonTime);
+        _this.setData(p)
 
       },
       fail: function (err) {

pages/liveData/liveData.wxml

@@ -11,7 +11,7 @@
         <!-- <text class="show">?</text> ： -->
       </view>
       <view data-introduce="like_count" bindtap="showDetail" class="liveDataItem">
-        点赞数
+        直播点赞数
         <!-- <text class="show">?</text> ： -->
       </view>
     </view>
@@ -22,12 +22,12 @@
     <view class="liveDataTable title">
       <view wx:if="{{ headData.msg_count != -1  }}" data-introduce="msg_count" bindtap="showDetail"
         class="liveDataItem liveDataItemRigh">
-        评论数
+        直播评论数
         <!-- <text class="show">?</text> ： -->
       </view>
       <view wx:if="{{ headData.peopel_time != -1  }}" data-introduce="peopel_time" bindtap="showDetail"
         class="liveDataItem liveDataItemRigh">
-        观看人数
+        直播观看人数
         <!-- <text class="show">?</text> ： -->
       </view>
     </view>

pages/liveData_kuaishou/index.js

@@ -0,0 +1,250 @@
+// pages/liveData/liveData.js
+const app = getApp();
+let peopleList = [{ "time": "13:00", "value": 9944 }, { "time": "14:00", "value": 8920 }, { "time": "15:00", "value": 14656 }, { "time": "16:00", "value": 13084 }];
+Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    error: "",
+    detail: "",
+    diglogTitle: "",
+    title: "",
+    headData: {},
+    lineList: [],
+    region: [],
+    series: [],
+    oriList: []
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    this.setData({
+      title: decodeURIComponent(options.title),
+      platform: options.platform
+    }, () => {
+      this.getData()
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+  formatNumber: function (val) {
+    let out = val;
+    if (val >= 1000 && val < 10000) {
+      out = (val / 1000).toFixed(2) - 0 + "千"
+    } else if (val >= 10000 && val < 100000000) {
+      out = (val / 10000).toFixed(0) - 0 + "万"
+    } else if (val >= 100000000) {
+      out = (val / 100000000).toFixed(2) - 0 + "亿"
+    }
+    return out
+  },
+  getData: function () {
+    let _this = this;
+    wx.showLoading();
+    wx.request({
+      url: app.baseUrl + '/live-result',
+      data: {
+        topic: this.data.title,
+        platform: this.data.platform
+      },
+      success: function (res) {
+        wx.hideLoading()
+        if (res.statusCode !== 200) return wx.showToast({
+          title: '请重启小程序',
+          icon: "error"
+        })
+        let oriData = res.data || {};
+        console.log(oriData)
+        let region = [];
+        let trend = oriData.detail || {};
+        let RealTimeWatch = {
+          title: "实时流量",
+          subTitle: "",
+          id: 'id' + 10,
+          canvasId: 'canvasId' + 10,
+          type: "line",
+          yType: "value",
+          xType: "time",
+          peopleList: []
+        };
+        let AddUpBsc = {
+          title: "弹幕数",
+          subTitle: "",
+          id: 'id' + 12,
+          canvasId: 'canvasId' + 12,
+          type: "line",
+          yType: "value",
+          xType: "time",
+          peopleList: []
+        };
+        let LikeTheBsuc = {
+          title: "发弹幕人数",
+          subTitle: "",
+          id: 'id' + 13,
+          canvasId: 'canvasId' + 13,
+          type: "line",
+          yType: "value",
+          xType: "time",
+          peopleList: []
+        };
+        // 趋势图数据
+        for (let i = 0; i < (trend.watch || []).length; i++) {
+          const v = (trend.watch || [])[i];
+          let time = new Date(v.x || 0);
+          let formatTime = ""
+          time.getHours() > 9 ? formatTime += time.getHours() + ":": formatTime += '0' + time.getHours() + ":";
+          time.getMinutes() + 1 > 9 ? formatTime += (time.getMinutes() + 1) + ":": formatTime += '0' + (time.getMinutes() + 1) + ":";
+          time.getSeconds() > 9 ? formatTime += time.getSeconds(): formatTime += '0' + time.getSeconds();
+          RealTimeWatch.peopleList.push({
+            value: v.watch || 0,
+            time:formatTime
+          });
+          AddUpBsc.peopleList.push({
+            value: v.bsc || 0,
+            time:formatTime
+          });
+          LikeTheBsuc.peopleList.push({
+            value: v.bsuc || 0,
+            time:formatTime
+          });
+        }
+        // 基础数据  
+        let base = {
+          live_time: (oriData.detail ? oriData.detail.time || "" : ""),
+          msg_count: (oriData.webcastMessageList ? oriData.webcastMessageList.count || 0 : 0),
+          like_count: (trend.like || {}).add_like_count || 0,
+          total_fans_count: (trend.fans || {}).club_info_total_fans_count || 0,
+          peopel_time: (trend.user || {}).stats_total_user || 0
+        }
+        // 来源城市
+        let city = oriData.fans ? oriData.fans.area ? oriData.fans.area['全部'] || [] : [] : [];
+        for (let i = 0; i < city.length; i++) {
+          const element = city[i] || {};
+          region.push({
+            name: element.Name || "",
+            value: element.Ratio
+          })
+        }
+        // 性别比
+        let gender = [];
+        let oriGender = oriData.fans ? oriData.fans.gender || [] : [];
+        for (let i = 0; i < oriGender.length; i++) {
+          const v = oriGender[i];
+          let value = v.rate.split("%")[0] * 100;
+          gender.push({
+            name: v.gender,
+            value
+          })
+        }
+        // 年龄
+        let age = [];
+        let oriAge = oriData.fans ? oriData.fans.age || [] : [];
+        for (let i = 0; i < oriAge.length; i++) {
+          const v = oriAge[i];
+          let value = v.count;
+          age.push({
+            name: v.item + "岁",
+            value
+          })
+        }
+
+        let p = {
+          headData: base,
+          region: [],
+          series: [],
+          lineList: [],
+          oriList: []
+        }
+        region.length && p.region.push(region);
+        if (age.length)
+          p.oriList = [
+            {
+              type: 'pie',
+              label: {
+                show: false
+              },
+              data: age
+            }
+          ]
+        if (gender.length)
+          p.series = [
+            {
+              type: 'pie',
+              label: {
+                position: 'inner',
+                fontSize: 14,
+              },
+              data: gender,
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+              }
+            }
+          ];
+        AddUpBsc.peopleList.length && p.lineList.push(AddUpBsc);
+        LikeTheBsuc.peopleList.length && p.lineList.push(LikeTheBsuc);
+        RealTimeWatch.peopleList.length && p.lineList.push(RealTimeWatch);
+        _this.setData(p)
+
+      },
+      fail: function (err) {
+        wx.hideLoading()
+        wx.showToast({
+          title: '请重启小程序',
+          icon: "error"
+        })
+      },
+    })
+  }
+})

pages/liveData_kuaishou/index.json

@@ -0,0 +1,9 @@
+{
+  "usingComponents": {
+    "mp-dialog": "weui-miniprogram/dialog/dialog",
+    "mp-toptips": "weui-miniprogram/toptips/toptips",
+    "lineChart": "/components/lineChart/lineChart",
+    "chart" : "/components/Chart/Chart",
+    "pie": "/components/pie/pie"
+  }
+}

pages/liveData_kuaishou/index.wxml

@@ -0,0 +1,85 @@
+<!--pages/home/components/liveData/liveData.wxml-->
+<wxs module="filter" src="/components/table/filter.wxs" />
+<!-- 错误提示 -->
+<mp-toptips msg="{{error}}" ext-class="toptips" type="error" show="{{error}}"></mp-toptips>
+
+<view class="liveData">
+  <view class="topTable">
+    <view class="liveDataTable title">
+      <view data-introduce="total_fans_count" bindtap="showDetail" class="liveDataItem">
+        粉丝数
+        <!-- <text class="show">?</text> ： -->
+      </view>
+      <view data-introduce="like_count" bindtap="showDetail" class="liveDataItem">
+        直播点赞数
+        <!-- <text class="show">?</text> ： -->
+      </view>
+    </view>
+    <view class="liveDataTable">
+      <view class="liveDataItem">{{filter.valueFormat(headData.total_fans_count)}}</view>
+      <view class="liveDataItem">{{filter.valueFormat(headData.like_count)}}</view>
+    </view>
+    <view class="liveDataTable title">
+      <view wx:if="{{ headData.msg_count != -1  }}" data-introduce="msg_count" bindtap="showDetail"
+        class="liveDataItem liveDataItemRigh">
+        直播评论数
+        <!-- <text class="show">?</text> ： -->
+      </view>
+      <view wx:if="{{ headData.peopel_time != -1  }}" data-introduce="peopel_time" bindtap="showDetail"
+        class="liveDataItem liveDataItemRigh">
+        直播观看人数
+        <!-- <text class="show">?</text> ： -->
+      </view>
+    </view>
+    <view class="liveDataTable">
+      <view wx:if="{{ headData.msg_count != -1  }}" class="liveDataItem">{{filter.valueFormat(headData.msg_count)}}
+      </view>
+      <view wx:if="{{ headData.peopel_time != -1  }}" class="liveDataItem">{{filter.valueFormat(headData.peopel_time)}}
+      </view>
+    </view>
+  </view>
+
+  <view class="itemView">
+    <view class="subTitle">直播时间：{{headData.live_time}}</view>
+  </view>
+  <view class="itemView">
+    <view class="localCells">观众来源</view>
+  </view>
+  <view class="information">
+    <view class="itemView">
+      <pie id="pie001" wx:if="{{series.length}}" canvasId="pie002" list="{{series}}" />
+    </view>
+    <view class="itemView">
+      <pie id="pie001" canvasId="pie002" list="{{oriList}}" />
+    </view>
+  </view>
+  <chart wx:if="{{region.length && region[0].length}}" yCompany="%" list="{{region}}" id="{{'id' + 1}}" canvasId="{{'canvasId' + 1}}"
+    yType="value" xType="name" />
+
+  <view class="itemView" wx:for="{{lineList}}" wx:key="id">
+    <view wx:if="item.peopleList.length" class="localCells">{{item.title}}</view>
+    <view wx:if="item.peopleList.length" class="subTitle">{{item.subTitle}}</view>
+    <lineChart id="{{item.id}}" wx:if="item.peopleList.length" canvasId="{{item.canvasId}}" type="{{item.type}}"
+      list="{{item.peopleList || []}}" yType="{{item.yType}}" xType="{{item.xType}}" color="{{item.color}}" />
+  </view>
+
+</view>
+<cover-view wx:if="{{detail !== ''}}" class="modolBg">
+  <cover-view class="local_dialog">
+    <cover-view class="local_dialog_title">
+      <cover-view class="local_dialog_close" bindtap="showDetail">
+        <cover-view class="local_dialog_close_left"></cover-view>
+        <cover-view class="local_dialog_close_right"></cover-view>
+      </cover-view>
+      <cover-view class="title">
+        {{diglogTitle}}
+      </cover-view>
+    </cover-view>
+    <cover-view class="local_dialog_body">
+      <cover-view style="padding-right:5px;white-space:pre-wrap;line-height: 1.5em;width:490rpx;margin: 0 auto;">
+        {{detail}}
+      </cover-view>
+    </cover-view>
+  </cover-view>
+</cover-view>
+<!-- <mp-toptips msg="{{detail}}" type="info" show="{{detail !== ''}}"></mp-toptips> -->

pages/liveData_kuaishou/index.wxss

@@ -0,0 +1,153 @@
+/* pages/home/components/liveData/liveData.wxss */
+.liveData {
+  width: 750rpx;
+  color: #bfcbd9;
+}
+
+.topTable {
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.topTable .liveDataTable {
+  flex: 1;
+  white-space: nowrap;
+}
+
+.topTable .liveDataTable .liveDataItem {
+  padding: 5px 0 5px 5px;
+}
+
+.liveData .itemView {
+  padding: 5px 10px
+}
+
+.liveData .pKvm {
+  text-align: right;
+  margin-right: 10px;
+  margin-top: -20px;
+}
+
+.liveData .kvm {
+  display: inline-block;
+  width: 3.5em;
+  color: #fff;
+  background-color: #1989fa;
+  height: 3.5em;
+  border-radius: 50%;
+  text-align: center;
+  box-shadow: 0 0 7px #1989fa;
+  margin-left: 5rpx;
+}
+
+.liveData .kvmText {
+  padding-top: 0.7em;
+  width: 2em;
+  margin: 0 auto;
+  line-height: 1.1em;
+  color: #bfcbd9;
+  font-weight: 400;
+}
+
+.show {
+  display: inline-block;
+  /* border: 1rpx solid #e2dd52;
+  color: #e2dd52; */
+  border: 1rpx solid #1989fa;
+  color: #1989fa;
+  width: var(--tips-btn);
+  height: var(--tips-btn);
+  line-height: var(--tips-btn);
+  font-size: 12px;
+  text-align: center;
+  border-radius: 50%;
+}
+
+.self_toptips {
+  background-color: rgba(0, 0, 0, .3);
+}
+
+.modolBg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  background-color: rgba(0, 0, 0, .5);
+}
+
+.local_dialog {
+  top: 50%;
+  left: 50%;
+  width: 600rpx;
+  position: absolute;
+  border-radius: 1em;
+  background-color: #eee;
+  transform: translate(-50%, -50%);
+}
+
+.local_dialog_title {
+  position: relative;
+  text-align: right;
+  padding: 8px 15px;
+  margin-bottom: 1rpx;
+  line-height: 1.5em;
+}
+
+.local_dialog_close {
+  float: right;
+  position: relative;
+  width: 1.5em;
+  height: 1.5em;
+}
+.local_dialog_title .title {
+  font-size: 16px;
+  height: 25px;
+  white-space: pre-wrap;
+  text-align: center;
+  line-height: 25px;
+  color: #121212;
+  text-align: center;
+}
+
+.local_dialog_close_left,
+.local_dialog_close_right {
+  position: absolute;
+  width: 100%;
+  height: 1rpx;
+  background-color: #121212;
+  top: 50%;
+  transform: rotate(45deg);
+}
+
+.local_dialog_close_right {
+  transform: rotate(135deg);
+}
+
+.local_dialog_body {
+  max-height: 60vh;
+  overflow-y: scroll;
+  padding: 8px 15px 15px 15px;
+  white-space: normal;
+  line-height: 2em;
+  font-size: 14px;
+  color: #222;
+}
+
+.information .itemView{
+  box-sizing: border-box;
+  display: inline-block;
+  width: 375rpx;
+  vertical-align: top;
+}
+
+.userImage{
+  width: 34px;
+  height: 34px;
+  display: inline-block;
+  vertical-align: middle;
+}
+.bulletChat{
+  text-align: center;
+}