记录一下Vue 的数据渲染格式

 记录文章，之前写的数据渲染格式很乱。

总结：后台返回的数据一定要是变动的，不变的数据在前端做渲染就行。然后再考虑怎么渲染上去。吃了经验少的亏。

          多沟通，即使会被喷。

// 渲染数据
    getWorkSafetyInfo() {
      getWorkSafetyInfo().then(res => {
       // 这里后台用JsonResult<> 封装了一下，所以多了一层级
        const { data, success } = res.data
        if (success) {
          if (!data) return
          this.workerSafeChart.value = [data.carOverspeedCount || 0, data.personSosCount 
          || 0, data.driverAlarmCount || 0]
        }
      })
    },
    // 渲染数据
    getEventInfo() {
      getEventInfo().then(res => {
        const { data, success } = res.data
        if (success) {
          if (!data) return
          for (const item of this.qualityRegulationChart) {
            item.value = data[item.key] || 0
          }
          this.zljgEventCount = data.zljgEventCount || 0
          for (const item of this.publicChart) {
            item.value = data[item.key] || 0
          }
          this.gzcyEventCount = data.gzcyEventCount || 0
        }
      })
    },
    // 渲染数据
    // 数据结构大概是这个样子，对象数组，对象中还有其他对象。只有value值才需要变化
    // examineList =[ {
    //      title: 'xxxx',num: 0, key: 'toiletCleanLv',
    //        chartData: {
    //        color: ['#14A0FF', '#123146'],
    //        value: 0
    //       }}, {} , {}
    //    ]
    getEvaluationInfo() {
      getEvaluationInfo().then(res => {
        const { data, success } = res.data
        if (success) {
          if (!data) return
          // 数据长度是固定的，所以可以直接循环data定义好的数据，然后插入
          for (const item of this.examineList) {
            // data数据为一条，通过key形式获取对应的key
            item.num = data[item.key] || 0
            item.chartData.value = data[item.key] || 0
          }
          this.examineListDayTime = `${data.month}`
        }
      })
    },
    // 渲染数据
    getIndexReportInfo() {
      // 渲染数据
      getSanitationInfo().then(res => {
        const { data, success } = res.data
        if (success) {
          if (!data) return
          const newArr = data.records || []
          if (Array.isArray(newArr) && newArr.length) {
            newArr.sort((a, b) => { return a.month - b.month })
            newArr.forEach(item => {
              this.sanitationIndexChart.xAxis.push(item.month)
              this.sanitationIndexChart.series.push(item.indexScore)
            })
          }
        }
      })
      // 渲染数据
      getEventToiletInfo().then(res => {
        const { data, success } = res.data
        if (success) {
          if (!data) return
          const newArr = data.records || [] 
          // 数组类型有循环操作一定要判断非空
          if (Array.isArray(newArr) && newArr.length) {
           // 对象数组，根据某个字段进行排序
            newArr.sort((a, b) => { return a.month - b.month })
            newArr.forEach(item => {
              this.toiletChart.xAxis.push(item.month)
              this.toiletChart.series.push(item.indexScore)
            })
          }
        }
      })
    }