提交

miniprogram/pages/channelRanking/index.json

@@ -1,8 +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"
+    "van-icon": "@vant/weapp/icon/index",
+    "van-calendar": "@vant/weapp/calendar/index"
   }
 }

miniprogram/pages/channelRanking/index.ts

@@ -29,33 +29,54 @@ Page({
         type: 3,
       }
     ],
+
     list: [],
     array_act: 0,
+    showCalendar: false,
     start: "",
     end: '',
-    onInitChart: undefined,
-    height: 0
+    startDate: new Date(2022, 0, 1).getTime(),
+    endDate: 0,
   },
-
-  startTimeChange(e: any) {
+  formmater(date: any): string[] {
+    const d = new Date(date);
+    let month: string | number = d.getMonth() + 1;
+    let day: string | number = d.getDate();
+    month > 9 ? "" : month = '0' + month;
+    day > 9 ? "" : day = '0' + day;
+    return [
+      d.getFullYear().toString(),
+      month.toString(),
+      day.toString()
+    ]
+  },
+  confirm(e: any) {
+    const start: string = this.formmater(e.detail[0]).join('-');
+    const end: string = this.formmater(e.detail[1]).join('-');
     this.setData({
-      start: e.detail.value
-    },()=> this.getselect())
+      start,
+      end,
+      showCalendar: false
+    }, () => this.getselect())
   },
-  endTimeChange(e: any) {
+  onClose() {
     this.setData({
-      end: e.detail.value
-    },()=> this.getselect())
+      showCalendar: false
+    })
+  },
+  timeSelect() {
+    this.setData({
+      showCalendar: true
+    })
   },
-
   bindPickerChange(e: any) {
     this.setData({
       array_act: e.detail.value
-    },()=> this.getselect())
+    }, () => 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({
+  getselect() {
+    let s = new Date(this.data.start + ' 00:00:00'), e = new Date(this.data.end + ' 23:59:59');
+    if (e.getTime() - s.getTime() < 0) return wx.showToast({
       title: "时间选择错误",
       icon: "none"
     })
@@ -65,54 +86,8 @@ Page({
       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;
+      p.height = (res || []).length < 2 ? 20 : (res || []).length * 5;
       this.setData(p)
     })
     return
@@ -123,75 +98,29 @@ Page({
    */
   onLoad() {
     const nowDate = new Date();
-    const date = new Date(nowDate.getTime() - 86400000);
+    const nTime = nowDate.getTime();
+    const date = new Date(nTime - 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)
+    let start = [date.getFullYear(), month, day].join("-");
+    let end = [date.getFullYear(), month, day].join("-");
+    let dataType = this.data.array[this.data.array_act].type;
+    getChannelRank({
+      start,
+      end,
+      dataType
+    }).then((res: any) => {
+      this.setData({
+        endDate: nTime,
+        list: res || [],
+        start,
+        end,
+        dataType
+      })
     })
   },
-
-  upLine() {
-    if (chartCatch.toufangfenxiChart === undefined) return
-    chartCatch.toufangfenxiChart.clear()
-
-  },
-
   /**
    * 生命周期函数--监听页面初次渲染完成
    */

miniprogram/pages/channelRanking/index.wxml

@@ -10,26 +10,14 @@
         </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 span="20">
+      <view class="select" bindtap="timeSelect">
+        {{start && end? start + "到" + end : ""}}
+        <van-icon name="arrow-down" />
+      </view>
     </van-col>
   </van-row>
-  <!-- <view style="height: {{height}}vw;">
-    <f2 wx:if="{{onInitChart !== undefined}}" onInit="{{onInitChart}}" />
-  </view> -->
+  <van-calendar wx:if="{{endDate >= startDate}}" default-date="{{[startDate,startDate]}}" min-date="{{ startDate }}" max-date="{{ endDate }}" allow-same-day="{{true}}" type="range" bind:confirm="confirm" color="#1989fa" bind:close="onClose" show="{{ showCalendar }}"></van-calendar>
   <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">

miniprogram/utils/util.wxs

@@ -4,7 +4,6 @@ var formmater = function(num, digit){
   if(n > 10000) return Number((n/10000).toFixed(digit)) + '万'
   return Number(n.toFixed(digit))
 }
-
 module.exports = {
-  formmater:formmater
+  formmater:formmater,
 }

project.config.json

@@ -55,5 +55,6 @@
   "simulatorType": "wechat",
   "simulatorPluginLibVersion": {},
   "appid": "wxfda9e5e09b656d34",
+  "libVersion": "2.23.1",
   "condition": {}
 }