数据展示动态（跑分）显示

1.页面显示（强烈推荐）

      <template #header>
        <avue-data-tabs :option="dataOptions" :data="tabData" style="width: 75%;"></avue-data-tabs> 
      </template>

2.具体代码阿和方法实现

2.1 官方推荐代码

<template>
  <avue-data-tabs :option="option"></avue-data-tabs>
</template>
<script>
export default {
  data () {
    return {
      option: {
        data: [
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            title: '分类统计',
            subtitle: '实时',
            count: 7993,
            allcount: 10222,
            text: '当前分类总记录数',
            color: 'rgb(27, 201, 142)',
            key: '类'
          },
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            title: '附件统计',
            subtitle: '实时',
            count: 3112,
            allcount: 10222,
            text: '当前上传的附件数',
            color: 'rgb(230, 71, 88)',
            key: '附'
          },
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            title: '文章统计',
            subtitle: '实时',
            count: 908,
            allcount: 10222,
            text: '评论次数',
            color: 'rgb(178, 159, 255)',
            key: '评'
          }
        ]
      }
    }
  }
}
</script>

2.2 dataOption数据源

 dataOptions: {
        size: "small",

        data: [
          {
            click: (item) => {
               console.log(item);
               this.caseQill ='6'
               this.getfindPageList('caseType')
              //  if (item.title === '未入组病例') {
              //  this.caseType = 6;
              // this.getfindPageList(this.caseType);
                // }
             },
            title: "在院病例",
            // subtitle: '实时',
            count: "1",
            allcount: "-",
            text: "当前日期前一天的所有未出院病例",
            color: "rgb(27, 201, 142)",
            key: "例",
          },
          {
            click: (item) => {
              // alert(JSON.stringify(item.count))
              console.log(item);
              this.caseQill ='3'
               this.getfindPageList('caseType')
            },
            title: "未入组病例",
            // subtitle: '实时',
            count: "2",
            allcount: "-",
            text: '未分入任一DIP病组，即DIP分组编码为"0000"',
            color: "rgb(64, 158, 255)",
            key: "例",
          },
          {
            click: (item) => {
              // alert(JSON.stringify(item.count))
              console.log(item);
              this.caseQill ='2'
               this.getfindPageList('caseType')
            },
            title: "高病病例",
            // subtitle: '实时',
            count: "3",
            allcount: "-",
            text: "已入组病例中，医疗总费用高于DIP病组支付标准规定倍数的病例",
            color: "rgb(178, 159, 255)",
            key: "例",
          },
          {
            click: (item) => {
              // alert(JSON.stringify(item.count))
              console.log(item);
              this.caseQill ='7'
               this.getfindPageList('caseType')
            },
            title: "超支预警病例",
            // subtitle: '实时',
            count: "4",
            allcount: "-",
            text: "盈亏金额 < 0的病例, 盈亏金额 = DIP总费用-医疗总费用",
            color: "rgb(230, 71, 88)",
            key: "例",
          },
        ],
      },

2.3 数据渲染

    // 数据展示
    doctorDownListData(paramsList) {
      let params = {
        alarmLevelCode: paramsList.alarmLevelCode || '',
        bah: paramsList.bah || '',
        departmentCodeYd: paramsList.departmentName || '',
        doctorId: paramsList.doctorName || '',
        lengthOfStay: paramsList.lengthOfStay || null,
        xm: paramsList.xm || '',
      }
      caseTypeCount(params).then((res) => {
        if (res.data.code == 200) {
          console.log("res数据展示", res)

          // const data = res.data.data
          // data.forEach((item, index) => {
          //  this.dataOptions.data[index].count = item.count
          // })
          // 每一次接口返回的数据循序会变的  找到对应的键对关系来进行赋值
          const dataA = this.dataOptions.data
          const dataB = res.data.data

          // function matchAndCopyCount(dataA, dataB) {
          dataA.forEach(itemA => {
            dataB.forEach(itemB => {
              if (itemA.title === getTitleFromCaseType(itemB.caseType)) {
                itemA.count = itemB.count.toString();
              }
            });
          });
        // }

function getTitleFromCaseType(caseType) {
  switch (caseType) {
    case "6":
      return "在院病例";
    case "3":
      return "未入组病例";
    case "2":
      return "高病病例";
    case "7":
      return "超支预警病例";
    default:
      return "";
  }
}

2.4 关键点

后台返回的是有数下type的数组源，所以返回的循序汇编的，所以只能通过接口和本地的唯一的属性来识别 找到对应的值来一一渲染

const dataA = this.dataOptions.data //本地标题的合集
   const dataB = res.data.data   //接口数据

     // function matchAndCopyCount(dataA, dataB) {
       dataA.forEach(itemA => {
          dataB.forEach(itemB => {
            //本地标题来识别找到对应的接口属性的值
            if (itemA.title === getTitleFromCaseType(itemB.caseType)) {
                itemA.count = itemB.count.toString();
              }
            });
          });
 //接口：case   本地标题 return
function getTitleFromCaseType(caseType) {
  switch (caseType) {
    case "6":
      return "在院病例";
    case "3":
      return "未入组病例";
    case "2":
      return "高病病例";
    case "7":
      return "超支预警病例";
    default:
      return "";
  }
}