提交

miniprogram/app.json

@@ -1,5 +1,6 @@
 {
   "pages": [
+    "pages/channelRanking/index",
     "pages/channelAdvertising/index",
     "pages/industryAdvertising/index"
   ],
@@ -13,6 +14,9 @@
     "custom": true,
     "position": "top",
     "list": [
+      {
+        "pagePath": "pages/channelRanking/index"
+      },
       {
         "pagePath": "pages/channelAdvertising/index"
       },

miniprogram/app.ts

@@ -3,7 +3,7 @@ const baseConfig = require("./config_base")
 App<IAppOption>({
   globalData: {
     base: baseConfig,
-    tabActive: '/pages/channelAdvertising/index'
+    tabActive: '/pages/channelRanking/index'
   },
   onLaunch() {
     // 登录

miniprogram/custom-tab-bar/index.ts

@@ -24,13 +24,9 @@ Component({
   methods: {
     changepage(e: any) {
       const url = e.target.dataset.index;
-      this.setData({
-        pageName: url
-      }, () => {
-        console.log(this.data.pageName)
-        app.globalData.tabActive = url;
-        wx.switchTab({ url })
-      })
+      if(app.globalData.tabActive === url) return      
+      app.globalData.tabActive = url;
+      wx.switchTab({ url })
     }
   }
 })

miniprogram/custom-tab-bar/index.wxml

@@ -1,15 +1,21 @@
 <!--custom-tab-bar/index.wxml-->
 <cover-view class="head">
+  <cover-view data-index="/pages/channelRanking/index" bindtap="changepage" class="item">
+    <cover-view data-index="/pages/channelRanking/index" class="{{'text ' + (pageName === '/pages/channelRanking/index'? 'act': '')}}">
+      频道排行
+    </cover-view>
+    <cover-view wx:if="{{pageName === '/pages/channelRanking/index'}}" class="line"></cover-view>
+  </cover-view>
   <cover-view data-index="/pages/channelAdvertising/index" bindtap="changepage" class="item">
     <cover-view data-index="/pages/channelAdvertising/index" class="{{'text ' + (pageName === '/pages/channelAdvertising/index'? 'act': '')}}">
       频道广告
     </cover-view>
-    <cover-view wx:if="{{pageName === '/pages/channelAdvertising/index'}}" class="line">1</cover-view>
+    <cover-view wx:if="{{pageName === '/pages/channelAdvertising/index'}}" class="line"></cover-view>
   </cover-view>
   <cover-view data-index="/pages/industryAdvertising/index" bindtap="changepage" class="item">
     <cover-view data-index="/pages/industryAdvertising/index" class="{{'text ' + (pageName === '/pages/industryAdvertising/index'? 'act': '')}}">
       行业广告
     </cover-view>
-    <cover-view wx:if="{{pageName === '/pages/industryAdvertising/index'}}" class="line">1</cover-view>
+    <cover-view wx:if="{{pageName === '/pages/industryAdvertising/index'}}" class="line"></cover-view>
   </cover-view>
 </cover-view>

miniprogram/pages/channelAdvertising/index.less

@@ -1,12 +1,9 @@
 .select{
   text-align: center;
   padding: 15px 10px;
+  font-size: 15px;
 }
 
 .rowText:nth-child(odd) .col {
   background-color: #eee;
 }
-
-.select{
-  font-size: 15px;
-}

miniprogram/pages/channelRanking/index.json

@@ -0,0 +1,8 @@
+{
+  "usingComponents": {
+    "f2": "@antv/wx-f2",
+    "van-row": "@vant/weapp/row/index",
+    "van-col": "@vant/weapp/col/index",
+    "van-icon": "@vant/weapp/icon/index"
+  }
+}

miniprogram/pages/channelRanking/index.ts

@@ -0,0 +1,240 @@
+// pages/channelRanking/index.ts
+const chartCatch: antvChart = {
+  toufangfenxiChart: undefined
+}
+let { getChannelRank } = require('../../utils/api')
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    array: [
+      {
+        key: "fee",
+        name: "费用",
+        unit: "元",
+        type: 1,
+      },
+      {
+        key: "timeSize",
+        name: "时长",
+        unit: "分",
+        type: 2,
+      },
+      {
+        key: "pinci",
+        name: "频次",
+        unit: "次",
+        type: 3,
+      }
+    ],
+    list: [],
+    array_act: 0,
+    start: "",
+    end: '',
+    onInitChart: undefined,
+    height: 0
+  },
+
+  startTimeChange(e: any) {
+    this.setData({
+      start: e.detail.value
+    },()=> this.getselect())
+  },
+  endTimeChange(e: any) {
+    this.setData({
+      end: e.detail.value
+    },()=> this.getselect())
+  },
+
+  bindPickerChange(e: any) {
+    this.setData({
+      array_act: e.detail.value
+    },()=> this.getselect())
+  },
+  getselect(){
+    let s = new Date(this.data.start), e= new Date(this.data.end);
+    if(e.getTime() - s.getTime() < 0) return wx.showToast({
+      title: "时间选择错误",
+      icon: "none"
+    })
+    const p: any = {
+      start: this.data.start,
+      end: this.data.end,
+      dataType: this.data.array[this.data.array_act].type
+    }
+    getChannelRank(p).then((res: any) => {
+      p.onInitChart = (F2: any, config: any) => {
+        if (chartCatch.toufangfenxiChart !== undefined) chartCatch.toufangfenxiChart.destroy(), chartCatch.toufangfenxiChart = undefined;
+        chartCatch.toufangfenxiChart = new F2.Chart(config);
+        const data = res|| [];
+        if (!chartCatch.toufangfenxiChart) return
+        chartCatch.toufangfenxiChart.legend(false)
+        const key = this.data.array[this.data.array_act].key;
+        let dataP:any = {};
+        dataP[key] = {
+          tickCount: 5
+        }
+        chartCatch.toufangfenxiChart.source(data.sort((a:any, b:any)=>a[key] - b[key]), dataP);
+        chartCatch.toufangfenxiChart.coord({
+          transposed: true
+        });
+        chartCatch.toufangfenxiChart.tooltip({
+          triggerOn: ['touchstart', 'touchmove'],
+          onShow: (ev: tooltipOnShow) => {
+            let num:string = ev.items[0].value;
+            if(Number(num) > 100000000) num =  (Number(num) / 100000000).toFixed(2) + '亿';
+            else if(Number(num) > 10000) num = (Number(num) / 10000).toFixed(2) + '万';
+            ev.items[0].name = ev.items[0].title
+            ev.items[0].value = num + this.data.array[this.data.array_act].unit
+          }
+        });
+        chartCatch.toufangfenxiChart.axis(key, {
+          label: (text: string, index: number, total: number) => {
+            let align = 'center';
+            if (index === 0) align = 'left';
+            if (index === total - 1) align = 'right';
+            let num:string|number = Number(text);
+            if(num > 100000000) num = num / 100000000 + '亿';
+            else if(num > 10000) num = num / 10000 + '万';
+            return {
+              textAlign: align,
+              text: num
+            }
+          }
+        });
+        chartCatch.toufangfenxiChart.interval()
+          .position('channelName*' + key)
+          .color('#409eff')
+          .adjust('stack');
+        chartCatch.toufangfenxiChart.render();
+        return chartCatch.toufangfenxiChart;
+      }
+      p.list = (res || [])
+      p.height = (res || []).length < 2 ? 20 :(res || []).length * 5;
+      this.setData(p)
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad() {
+    const nowDate = new Date();
+    const date = new Date(nowDate.getTime() - 86400000);
+    let month: string | number = date.getMonth() + 1;
+    let day: string | number = date.getDate();
+    month > 9 ? "" : month = '0' + month;
+    day > 9 ? "" : day = '0' + day;
+    const p: any = {
+      start: [date.getFullYear(), month, day].join("-"),
+      end: [date.getFullYear(), month, day].join("-"),
+      dataType: this.data.array[this.data.array_act].type
+    }
+    getChannelRank(p).then((res: any) => {
+      p.onInitChart = (F2: any, config: any) => {
+        if (chartCatch.toufangfenxiChart !== undefined) chartCatch.toufangfenxiChart.destroy(), chartCatch.toufangfenxiChart = undefined;
+        chartCatch.toufangfenxiChart = new F2.Chart(config);
+        const data = res|| [];
+        if (!chartCatch.toufangfenxiChart) return
+        chartCatch.toufangfenxiChart.legend(false)
+        const key = this.data.array[this.data.array_act].key;
+        let dataP:any = {};
+        dataP[key] = {
+          tickCount: 5
+        }
+        chartCatch.toufangfenxiChart.source(data.sort((a:any, b:any)=>a[key] - b[key]), dataP);
+        chartCatch.toufangfenxiChart.coord({
+          transposed: true
+        });
+        chartCatch.toufangfenxiChart.tooltip({
+          triggerOn: ['touchstart', 'touchmove'],
+          onShow: (ev: tooltipOnShow) => {
+            let num:string = ev.items[0].value;
+            if(Number(num) > 100000000) num =  (Number(num) / 100000000).toFixed(2) + '亿';
+            else if(Number(num) > 10000) num = (Number(num) / 10000).toFixed(2) + '万';
+            ev.items[0].name = ev.items[0].title
+            ev.items[0].value = num + this.data.array[this.data.array_act].unit
+          }
+        });
+        chartCatch.toufangfenxiChart.axis(key, {
+          label: (text: string, index: number, total: number) => {
+            let align = 'center';
+            if (index === 0) align = 'left';
+            if (index === total - 1) align = 'right';
+            let num:string|number = Number(text);
+            if(num > 100000000) num = num / 100000000 + '亿';
+            else if(num > 10000) num = num / 10000 + '万';
+            return {
+              textAlign: align,
+              text: num
+            }
+          }
+        });
+        chartCatch.toufangfenxiChart.interval()
+          .position('channelName*' + key)
+          .color('#409eff')
+          .adjust('stack');
+        chartCatch.toufangfenxiChart.render();
+        return chartCatch.toufangfenxiChart;
+      }
+      p.list = (res || [])
+      p.height = (res || []).length < 2 ? 20 :(res || []).length * 5;
+      this.setData(p)
+    })
+  },
+
+  upLine() {
+    if (chartCatch.toufangfenxiChart === undefined) return
+    chartCatch.toufangfenxiChart.clear()
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+  },
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

miniprogram/pages/channelRanking/index.wxml

@@ -0,0 +1,63 @@
+<!--index.wxml-->
+<view class="channel page">
+  <wxs src="../../utils/util.wxs" module="tool"></wxs>
+  <van-row>
+    <van-col span="4">
+      <picker mode="selector" bindchange="bindPickerChange" range-key="name" value="{{array_act}}" range="{{array}}">
+        <view class="select" style="padding: 15px 0;">
+          {{array[array_act].name || "请选择"}}
+          <van-icon name="arrow-down" />
+        </view>
+      </picker>
+    </van-col>
+    <van-col span="10">
+      <picker mode="date" bindchange="startTimeChange" end="{{start}}" value="{{start}}">
+        <view class="select">
+          {{!start ? "" : "开始"}}:{{start || "开始时间"}}
+          <van-icon name="arrow-down" />
+        </view>
+      </picker>
+    </van-col>
+    <van-col span="10">
+      <picker mode="date" bindchange="endTimeChange" start="{{start}}" value="{{end}}">
+        <view class="select">
+          {{!end ? "" : "结束"}}:{{end || "结束时间"}}
+          <van-icon name="arrow-down" />
+        </view>
+      </picker>
+    </van-col>
+  </van-row>
+  <!-- <view style="height: {{height}}vw;">
+    <f2 wx:if="{{onInitChart !== undefined}}" onInit="{{onInitChart}}" />
+  </view> -->
+  <view class="youshikehubody">
+    <van-row class="rowText" wx:if="{{list.length}}" style="margin-top: 5px;text-align: center;font-size: 14px;">
+      <van-col span="3">
+        <view class="col">序号</view>
+      </van-col>
+      <van-col span="15">
+        <view class="col">频道名称</view>
+      </van-col>
+      <van-col span="6">
+        <view class="col">{{array[array_act].name}}/{{array[array_act].unit === '元' ? '万元': array[array_act].unit}}</view>
+      </van-col>
+    </van-row>
+    <van-row class="rowText" wx:if="{{list.length}}" style="margin-top: 5px;text-align: center;font-size: 14px;" wx:for="{{list}}" wx:key="index">
+      <van-col span="3">
+        <view class="col col1">{{index+1}}</view>
+      </van-col>
+      <van-col span="15">
+        <view class="col col1">{{item.channelName}}</view>
+      </van-col>
+      <van-col span="6" wx:if="{{array_act == 0}}">
+        <view class="col col1">{{tool.formmater((item.fee/10000), 2)}}</view>
+      </van-col>
+      <van-col span="6" wx:if="{{array_act == 1}}">
+        <view class="col col1">{{tool.formmater((item.timeSize/60000), 2)}}</view>
+      </van-col>
+      <van-col span="6" wx:if="{{array_act == 2}}">
+        <view class="col col1">{{tool.formmater(item.pinci, 2)}}</view>
+      </van-col>
+    </van-row>
+  </view>
+</view>

miniprogram/pages/channelRanking/index.wxss

@@ -0,0 +1,22 @@
+/* pages/channelRanking/index.wxss */
+.select{
+  text-align: center;
+  padding: 15px 10px;
+}
+.f2-canvas{
+  height: 56.25vw;
+}
+
+.youshikehubody{
+  margin: 0 5px;
+  box-shadow: 0 0 5px #eee;
+}
+.rowText:nth-child(odd) .col {
+  background-color: #eee;
+}
+.col{
+  padding: .5em 0;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap
+}

miniprogram/utils/api.ts

@@ -73,6 +73,9 @@ const api = {
   getLastWeekTrend(data: requireFuncDate) {
     return requireFunc("/ad/industry/LastWeekTrend", data)
   },
+  getChannelRank(data: requireFuncDate) {
+    return requireFunc("/ad/channel/rank", data)
+  },
 }
 
 module.exports = api;

typings/types/business/lib.business.chart.event.d.ts

@@ -69,5 +69,5 @@ interface tooltipOnShow {
 }
 
 interface antvChart {
-  toufangfenxiChart: chartType | undefined
+  toufangfenxiChart: chartType | undefined,
 }