aiJia_game/pages/result/result.js

// pages/result/result.js
const { throttle } = require('../../utils/util.js')
const wxCharts = require("../../utils/wxcharts-min.js");
const app = getApp();
var numCount = 6;
var numSlot = 10;
var sys = wx.getSystemInfoSync();
var windowWidth = sys.windowWidth;
var mW = windowWidth;
var mH = 520;
var mCenter = mW/ 2.33; //中心点
var mAngle = Math.PI * 2 / numCount; //角度
var mRadius = mCenter - 60; //半径(减去的值用于给绘制的文本留空间)
//获取Canvas
var radCtx = wx.createCanvasContext("result")
Page({

  /**
   * 页面的初始数据
   */
  data: {
    number:0,
    isRefer:0,
    isTest:1,
    statusBar: app.globalData.statusBar,
    isHistory:0,
    list:[
      {
        text: '图形推理',
        value:36,
        appraisal: '图形推理这么强，你上辈⼦⼀定是裁缝!'
      },
      {
        text: '心理旋转',
        value: 48,
        appraisal: '你对物体旋转的观察⼒都超过我了！'
      },
      {
        text: '空间想象',
        value: 64,
        appraisal: '你这空间想象⼒，不当建筑师⽩瞎了!'
      },
      {
        text: '视觉搜索',
        value: 85,
        appraisal: '搜索能⼒这么强，你的脑袋上⼀定装了雷达!'
      },
      {
        text: '工作记忆',
        value:60,
        appraisal: '好强的观察能⼒，⼀点点的变化都逃不过你的法眼！'
      },
      {
        text: '执行功能',
        value: 100,
        appraisal: '反应能⼒这么快，你⼀定练过武！'
      }
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options)
    this.setData(options);
    app.getWxloginCode(code => {
      this.setData({ code })
    })
    const { isRefer,list}=this.data
    const userInfo = wx.getStorageSync('userInfo')
    if (userInfo) {
      this.setData({ userInfo})
    } 
    if (isRefer == 1) {
      const { graphicReasoning,spaceImagination,executionFunctionality,visualSearch,workingMemory,mentalRotation,list } = this.data
      var score = Number(spaceImagination) + Number(executionFunctionality) + Number(visualSearch) + Number(workingMemory) + Number(mentalRotation) + Number(graphicReasoning);
      list[0].value=graphicReasoning
      list[1].value=mentalRotation
      list[2].value=spaceImagination
      list[3].value=visualSearch
      list[4].value=workingMemory
      list[5].value=executionFunctionality
      this.setData({ score:score,list,isTest:0})
      const arr=[]
      for(var i in list){
        if(list[i].value>90||list[i].value==90){
          arr.push(list[i].appraisal)
        }
      }
      // if(arr.length>0){
      //   this.setData({ appraisal: arr[Math.floor(Math.random()*(arr.length))] })
      //   if(arr.length>5){
      //     this.setData({ appraisal: '我的天，你的⼤脑⼀定被爱因斯坦摸过!' })
      //   }
      // }else if(score<361){
        this.setData({ appraisal: '原来你和我⼀样都是普通⼈！' })
      // }
        this.drawRadar();
        this.addScore();
    }else{  
      this.findResult()
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
   
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    if (app.sharePageDefaultCtl) {
      return app.sharePageDefaultCtl()
    }
  },
  /**
   * 路由跳转
   */
  navigateCtl: app.navigateCtl,
  /**
    * 底部导航跳转
    */
  redirectCtl: app.redirectCtl,
  /**
    * 返回上一级页面
    */
  blockCtl: function () {
    const {isHistory}=this.data
    if(isHistory==1){
      this.redirectCtl({ url: 'history', method: {} }, true)
    }else{
      this.redirectCtl({ url: 'me', method: {} }, true)
    }
    
  },
  /**
   * 微信授权 
   */
  bindGetUserInfo: function (e) {
    const { code } = this.data;
    if (e.detail.userInfo) {
      app.saveUserInfo(e.detail, code)
    } else {
      wx.showToast({
        title: '微信授权失败',
        icon: 'none'
      })
    }

  },
  // 知识报告雷达
  knowledgeCanvas: function () {
    var sys = wx.getSystemInfoSync();
    var windowWidth = sys.windowWidth;
    const { graphicReasoning,spaceImagination,executionFunctionality,visualSearch,workingMemory,mentalRotation } = this.data;
    // console.log(graphicReasoning,spaceImagination,executionFunctionality,visualSearch,workingMemory,mentalRotation);
    new wxCharts({
      animation: true,
      canvasId: 'result',
      type: 'radar',
      categories: ['空间想象', '执行功能', '视觉搜索', '工作记忆','心理旋转','图形推理'],

      series: [{
        name: '',
        data: [spaceImagination, executionFunctionality, visualSearch, workingMemory, mentalRotation, graphicReasoning],
      }],
      width: windowWidth,
      height: 250,
      dataPointShape: true,
      legend: false,
      extra: {
        radar: {
          max: 100,//雷达数值的最大值
          gridColor: '#000',
          labelColor: '#000'
        }
      }
    });
  },
  /**
  * 保存游戏结果
  */
  addScore: function () {
    const postData = { fn: this.addScore, param: { ...arguments } }
    var that=this;
    const { gameRespondentId,appraisal, score,level,graphicReasoning,spaceImagination,executionFunctionality,visualSearch,workingMemory,mentalRotation} = that.data;
    app.post('/api/game/v2/saveV2', { gameRespondentId,appraisal, score, level,graphicReasoning,spaceImagination,executionFunctionality,visualSearch,workingMemory,mentalRotation}, 0, postData).then(res => {
      // wx.showToast({
      //   title: '保存成功',
      //   icon: 'none'
      // })
    })
  },
  /**
  * 查询测试结果
  */
  findResult:function(){
    const postData = { fn: this.findResult, param: { ...arguments } }
    var that = this;
    const {list,gameRecordId=''}=this.data;
    app.post('/api/game/v2/findResult', {gameRecordId}, 0, postData).then(res => {
      const { appraisal, score, level,totalScore,graphicReasoning,spaceImagination,executionFunctionality,visualSearch,workingMemory,mentalRotation}=res.data;
      list[0].value=graphicReasoning
      list[1].value=mentalRotation
      list[2].value=spaceImagination
      list[3].value=visualSearch
      list[4].value=workingMemory
      list[5].value=executionFunctionality
      that.setData({ appraisal, score, level,totalScore,graphicReasoning,spaceImagination,executionFunctionality,visualSearch,workingMemory,mentalRotation,list,isTest:0});
      that.drawRadar();
    })
  },
  /**
  * 去测试
  */
  getTest:function(){
    const { level, ageGroup} = this.data;
    this.redirectCtl({ url: 'set_info', method: {} }, true)
    // if (ageGroup < 0) {
    //   this.redirectCtl({ url: 'set_info', method: { level: 0, ageGroup } }, true)
    // } else {
    //   this.redirectCtl({ url: 'tu_xing_tui_li', method: { level: 0, ageGroup } }, true)
    // }
  },
  /**
  * 挑战下一关
  */
  nextCard:function(){
    const { level, ageGroup } = this.data;
    console.log(level, ageGroup)
    this.redirectCtl({ url: 'tu_xing_tui_li', method: { level: level+1, ageGroup } }, true)
  },
  // 雷达图
  drawRadar:function(){
    // var sourceData1 = this.data.chanelArray1
    const { graphicReasoning,spaceImagination,executionFunctionality,visualSearch,workingMemory,mentalRotation } = this.data;
    var sourceData1 = [['空间想象',spaceImagination], ['执行功能',executionFunctionality], ['视觉搜索',visualSearch], ['工作记忆',workingMemory],['心理旋转',mentalRotation],['图形推理',graphicReasoning]]
    //调用
    this.drawEdge() //画六边形
    //this.drawArcEdge() //画圆
    this.drawLinePoint()
    //设置数据
    this.drawRegion(sourceData1,'rgba(118,205,255,0.7)') //第一个人的
    //设置文本数据
    this.drawTextCans(sourceData1)
    //设置节点
    this.drawCircle(sourceData1,'#76CDFF')
    // this.drawCircle(sourceData2,'yellow')
    //开始绘制
    radCtx.draw()
  },
  // 绘制6条边
  drawEdge: function(){
    radCtx.setStrokeStyle("#000000")
    radCtx.setLineWidth(1)  //设置线宽
    for (var i = 0; i < numSlot; i++) {
      //计算半径
      radCtx.beginPath()
      var rdius = mRadius / numSlot * (i + 1)
      //画6条线段
      for (var j = 0; j < numCount; j++) {
        //坐标
        var x = mCenter + rdius * Math.cos(mAngle * j);
        var y = mCenter + rdius * Math.sin(mAngle * j);
        radCtx.lineTo(x, y);
      }
      radCtx.closePath()
      radCtx.stroke()
    } 
  },
  // 绘制连接点
  drawLinePoint:function(){
    radCtx.beginPath();
    for (var k = 0; k < numCount; k++) {
      var x = mCenter + mRadius * Math.cos(mAngle * k);
      var y = mCenter + mRadius * Math.sin(mAngle * k);

      radCtx.moveTo(mCenter, mCenter);
      radCtx.lineTo(x, y);
    }
    radCtx.stroke();
  },
  //绘制数据区域(数据和填充颜色)
  drawRegion: function (mData,color){
      
      radCtx.beginPath();
      for (var m = 0; m < numCount; m++){
      var x = mCenter + mRadius * Math.cos(mAngle * m) * mData[m][1] / 100;
      var y = mCenter + mRadius * Math.sin(mAngle * m) * mData[m][1] / 100;

      radCtx.lineTo(x, y);
      }
      radCtx.closePath();
      radCtx.setFillStyle(color)
      radCtx.fill();
    },

    //绘制文字
    drawTextCans: function (mData){

      radCtx.setFillStyle("#000000")
      radCtx.font = 'bold 13px cursive'  //设置字体
      for (var n = 0; n < numCount; n++) {
        var x = mCenter + mRadius * Math.cos(mAngle * n);
        var y = mCenter + mRadius * Math.sin(mAngle * n);
        // radCtx.fillText(mData[n][0], x, y);
        //通过不同的位置，调整文本的显示位置
        if (mAngle * n >= 0 && mAngle * n <= Math.PI / 2) {
          radCtx.fillText(mData[n][0], x+5, y+5);
        } else if (mAngle * n > Math.PI / 2 && mAngle * n <= Math.PI) {
          radCtx.fillText(mData[n][0], x - radCtx.measureText(mData[n][0]).width-7, y+5);
        } else if (mAngle * n > Math.PI && mAngle * n <= Math.PI * 3 / 2) {
          radCtx.fillText(mData[n][0], x - radCtx.measureText(mData[n][0]).width-5, y);
        } else {
          radCtx.fillText(mData[n][0], x+7, y+2);
        }

      }
    },
    //画点
    drawCircle: function(mData,color){
       var r = 3; //设置节点小圆点的半径
       for(var i = 0; i<numCount; i ++){
          var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
          var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;

          radCtx.beginPath();
          radCtx.arc(x, y, r, 0, Math.PI * 2);
          radCtx.fillStyle = color;
          radCtx.fill();
        }

      }
})