添加组件等

miniprogram/pages/base/workload/workload.ts

@@ -1,6 +1,10 @@
 import { onPageLoadInitAuth, post } from '@/utils/https';
 import { toArray, toNumber } from '@/utils/util';
 
+// import uCharts from '@/uCharts/u-charts.min.js';
+// const uChartsInstance: any = {};
+// console.log(uCharts);
+
 Page({
   /**
    * 页面的初始数据
@@ -9,6 +13,9 @@ Page({
     process_count: [] as any[],
     seven_process_count: [] as any[],
     isLogin: false,
+    // cWidth: 750,
+    // cHeight: 500,
+    // pixelRatio: 2,
   },
   handleLogin(e: any) {
     this.setData({ isLogin: e.detail });
@@ -18,8 +25,75 @@ Page({
     }
   },
   init() {},
-
+  // drawCharts(id: string, data: any) {
+  //   const query = wx.createSelectorQuery().in(this);
+  //   query
+  //     .select('#' + id)
+  //     .fields({ node: true, size: true })
+  //     .exec((res) => {
+  //       if (res[0]) {
+  //         const canvas = res[0].node;
+  //         const ctx = canvas.getContext('2d');
+  //         canvas.width = res[0].width * this.data.pixelRatio;
+  //         canvas.height = res[0].height * this.data.pixelRatio;
+  //         uChartsInstance[id] = new uCharts({
+  //           animation: true,
+  //           background: '#FFFFFF',
+  //           canvas2d: true,
+  //           categories: data.categories,
+  //           color: [
+  //             '#1890FF',
+  //             '#91CB74',
+  //             '#FAC858',
+  //             '#EE6666',
+  //             '#73C0DE',
+  //             '#3CA272',
+  //             '#FC8452',
+  //             '#9A60B4',
+  //             '#ea7ccc',
+  //           ],
+  //           context: ctx,
+  //           extra: {
+  //             column: { type: 'group', width: 30, activeBgColor: '#000000', activeBgOpacity: 0.08 },
+  //           },
+  //           height: this.data.cHeight * this.data.pixelRatio,
+  //           legend: {},
+  //           padding: [15, 15, 0, 5],
+  //           pixelRatio: this.data.pixelRatio,
+  //           series: data.series,
+  //           type: 'column',
+  //           width: this.data.cWidth * this.data.pixelRatio,
+  //           xAxis: { disableGrid: true },
+  //           yAxis: {
+  //             data: [{ min: 0 }],
+  //           },
+  //         });
+  //       } else {
+  //         console.error('[uCharts]: 未获取到 context');
+  //       }
+  //     });
+  // },
+  // tap(e: any) {
+  //   uChartsInstance[e.target.id].touchLegend(e);
+  //   uChartsInstance[e.target.id].showToolTip(e);
+  // },
   getList() {
+    // let res = {
+    //   categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
+    //   series: [
+    //     {
+    //       name: '目标值',
+    //       data: [35, 36, 31, 33, 13, 34],
+    //     },
+    //     {
+    //       name: '完成量',
+    //       data: [18, 27, 21, 24, 6, 28],
+    //     },
+    //   ],
+    // };
+
+    // this.drawCharts('afMCYQMEmXXVAjNQFJvvfxbLSHuxNEOL', res);
+
     return new Promise<void>((resolve, reject) => {
       post('Index/index')
         .then((res: any) => {
@@ -65,7 +139,14 @@ Page({
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
-  onReady() {},
+  onReady() {
+    // //这里的第一个 750 对应 css .charts 的 width
+    // const cWidth = wx.getWindowInfo().windowWidth - 24;
+    // //这里的 500 对应 css .charts 的 height
+    // const cHeight = wx.getWindowInfo().windowWidth * 0.68;
+    // const pixelRatio = wx.getWindowInfo().pixelRatio;
+    // this.setData({ cWidth, cHeight, pixelRatio });
+  },
 
   /**
    * 生命周期函数--监听页面显示

miniprogram/pages/base/workload/workload.wxml

@@ -2,6 +2,8 @@
   bind:handleLogin="handleLogin">
   <t-cell title="今日完成工作量" left-icon="chart-bar"
     custom-style="position: sticky;top: 0;z-index:1;margin-bottom: 24rpx;padding-left: 0" />
+  <!-- <canvas canvas-id="afMCYQMEmXXVAjNQFJvvfxbLSHuxNEOL" id="afMCYQMEmXXVAjNQFJvvfxbLSHuxNEOL"
+    type="2d" class="charts" bindtouchend="tap" /> -->
 
   <empty-plugin wx:if="{{process_count.length == 0}}" />
   <block wx:else>

miniprogram/pages/base/workload/workload.wxss

@@ -45,3 +45,8 @@
 .seven_process_count_td2 {
   flex-shrink: 0;
 }
+
+/* .charts {
+  width: calc(100vw - 24px);
+  height: 68vw;
+} */