vue数据转树状图最终进阶(三级柱状图)

let data = [
    {
      "uuid": "055E4E4ED00C08F7E065000000000001",
      "planId": "f3fc22fda5c64bdd98dbf35c9aa4eaa1",
      "project": "TEST0909_1531",
      "trainId": "0909_1531",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "61ee5c10ff8f4d69b4c43faf991ba794",
      "teacherId": null,
      "studentName": "测试0821-22",
      "examTime": "2023-09-15 11:30:48",
      "score": 90,
      "courseId": null,
      "courseName": "雷达管制",
      "scoreType": "2",
      "saveTime": "2023-09-15 11:22:44",
      "practicalScoreList": null
    },
    {
      "uuid": "055E4E4ED00B08F7E065000000000001",
      "planId": "f3fc22fda5c64bdd98dbf35c9aa4eaa1",
      "project": "1",
      "trainId": "0909_1531",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "06dbe55e530449adb8babea12048af79",
      "teacherId": null,
      "studentName": "鹿邑",
      "examTime": "2023-09-15 11:30:48",
      "score": 89,
      "courseId": null,
      "courseName": "雷达管制",
      "scoreType": "2",
      "saveTime": "2023-09-15 11:22:44",
      "practicalScoreList": null
    },
    {
      "uuid": "055E4E4ED00A08F7E065000000000001",
      "planId": "f3fc22fda5c64bdd98dbf35c9aa4eaa1",
      "project": "2",
      "trainId": "0909_1531",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "d0a8c90d5e1746f6a6aa279136a3ee0d",
      "teacherId": null,
      "studentName": "TEST",
      "examTime": "2023-09-15 11:30:48",
      "score": 86,
      "courseId": null,
      "courseName": "雷达管制",
      "scoreType": "2",
      "saveTime": "2023-09-15 11:22:44",
      "practicalScoreList": null
    },
    {
      "uuid": "055E4E4ED00108F7E065000000000001",
      "planId": "f3fc22fda5c64bdd98dbf35c9aa4eaa1",
      "project": "2",
      "trainId": "0909_1531",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "002E0518DD4E74F2E065000000000001",
      "teacherId": null,
      "studentName": "李松",
      "examTime": "2023-09-15 11:30:48",
      "score": 100,
      "courseId": null,
      "courseName": "雷达管制",
      "scoreType": "2",
      "saveTime": "2023-09-15 11:22:44",
      "practicalScoreList": null
    },
    {
      "uuid": "055E4E4ED00208F7E065000000000001",
      "planId": "f3fc22fda5c64bdd98dbf35c9aa4eaa1",
      "project": "TEST0909_1531",
      "trainId": "0909_1531",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "002E0518DD4F74F2E065000000000001",
      "teacherId": null,
      "studentName": "王珂",
      "examTime": "2023-09-15 11:30:48",
      "score": 80,
      "courseId": null,
      "courseName": "雷达管制",
      "scoreType": "2",
      "saveTime": "2023-09-15 11:22:44",
      "practicalScoreList": null
    },
    {
      "uuid": "055E4E4ED00908F7E065000000000001",
      "planId": "f3fc22fda5c64bdd98dbf35c9aa4eaa1",
      "project": "TEST0909_1531",
      "trainId": "0909_1531",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "23b7e94695ef49cc860ca32fd60d795d",
      "teacherId": null,
      "studentName": "阮琳",
      "examTime": "2023-09-15 11:30:48",
      "score": 75,
      "courseId": null,
      "courseName": "雷达管制",
      "scoreType": "2",
      "saveTime": "2023-09-15 11:22:44",
      "practicalScoreList": null
    },
    {
      "uuid": "055E4E4ED00708F7E065000000000001",
      "planId": "f3fc22fda5c64bdd98dbf35c9aa4eaa1",
      "project": "TEST0909_1531",
      "trainId": "0909_1531",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "4a23ca64dff74580b149fa5dbb402bb1",
      "teacherId": null,
      "studentName": "蔡虎虎",
      "examTime": "2023-09-15 11:30:48",
      "score": 80,
      "courseId": null,
      "courseName": "雷达管制",
      "scoreType": "2",
      "saveTime": "2023-09-15 11:22:44",
      "practicalScoreList": null
    },
    {
      "uuid": "055E4E4ED00408F7E065000000000001",
      "planId": "f3fc22fda5c64bdd98dbf35c9aa4eaa1",
      "project": "TEST0909_1531",
      "trainId": "0909_1531",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "be083f6f10bc4168b6d04106f14b5b68",
      "teacherId": null,
      "studentName": "金葵花",
      "examTime": "2023-09-15 11:30:48",
      "score": 100,
      "courseId": null,
      "courseName": "雷达管制",
      "scoreType": "2",
      "saveTime": "2023-09-15 11:22:44",
      "practicalScoreList": null
    },
    {
      "uuid": "055E4E4ED00508F7E065000000000001",
      "planId": "f3fc22fda5c64bdd98dbf35c9aa4eaa1",
      "project": "TEST0909_1531",
      "trainId": "0909_1531",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "403ab08d05f44c9d84e479fe0f1f0d8a",
      "teacherId": null,
      "studentName": "汪雪",
      "examTime": "2023-09-15 11:30:48",
      "score": 75,
      "courseId": null,
      "courseName": "雷达管制",
      "scoreType": "2",
      "saveTime": "2023-09-15 11:22:44",
      "practicalScoreList": null
    },
    {
      "uuid": "055E4E4ED00608F7E065000000000001",
      "planId": "f3fc22fda5c64bdd98dbf35c9aa4eaa1",
      "project": "TEST0909_1531",
      "trainId": "0909_1531",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "F6D8BE2B9FCD6B8AE055000000000001",
      "teacherId": null,
      "studentName": "赵六",
      "examTime": "2023-09-15 11:30:48",
      "score": 87,
      "courseId": null,
      "courseName": "雷达管制",
      "scoreType": "2",
      "saveTime": "2023-09-15 11:22:44",
      "practicalScoreList": null
    },
    {
      "uuid": "055E4E4ED00308F7E065000000000001",
      "planId": "f3fc22fda5c64bdd98dbf35c9aa4eaa1",
      "project": "TEST0909_1531",
      "trainId": "0909_1531",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "002E0518DD5074F2E065000000000001",
      "teacherId": null,
      "studentName": "万虎",
      "examTime": "2023-09-15 11:30:48",
      "score": 90,
      "courseId": null,
      "courseName": "雷达管制",
      "scoreType": "2",
      "saveTime": "2023-09-15 11:22:44",
      "practicalScoreList": null
    },
    {
      "uuid": "055E4E4ED00808F7E065000000000001",
      "planId": "f3fc22fda5c64bdd98dbf35c9aa4eaa1",
      "project": "TEST0909_1531",
      "trainId": "0909_1531",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "81686d4bf5684f57a2a55b275527b02b",
      "teacherId": null,
      "studentName": "孙三",
      "examTime": "2023-09-15 11:30:48",
      "score": 85,
      "courseId": null,
      "courseName": "雷达管制",
      "scoreType": "2",
      "saveTime": "2023-09-15 11:22:44",
      "practicalScoreList": null
    },
    {
      "uuid": "ed57f4693f934d4e831c0c36b9333eb4",
      "planId": "dcf44c6f3cde454fa50116aebff08b6e",
      "project": "测试0821",
      "trainId": "px-2023-0821",
      "theoryScoreList": null,
      "content": null,
      "template": "1",
      "studentId": "F6D8BE2B9FCD6B8AE055000000000001",
      "teacherId": null,
      "studentName": "赵六",
      "examTime": "2023-08-21 13:55:09",
      "score": 86,
      "courseId": null,
      "courseName": "数学课",
      "scoreType": "1",
      "saveTime": "2023-08-21 13:48:43",
      "practicalScoreList": null
    },
    {
      "uuid": "3abc30e068ad402d9aa6e0cac95c92d0",
      "planId": "dcf44c6f3cde454fa50116aebff08b6e",
      "project": "测试0821",
      "trainId": "px-2023-0821",
      "theoryScoreList": null,
      "content": null,
      "template": "7",
      "studentId": "F6D8BE2B9FCD6B8AE055000000000001",
      "teacherId": null,
      "studentName": "赵六",
      "examTime": "2023-08-21 13:52:53",
      "score": 85,
      "courseId": null,
      "courseName": "气象课",
      "scoreType": "1",
      "saveTime": "2023-08-21 13:47:22",
      "practicalScoreList": null
    },
    {
      "uuid": "0367A734EA662AE2E065000000000001",
      "planId": "dcf44c6f3cde454fa50116aebff08b6e",
      "project": "测试0821",
      "trainId": "px-2023-0821",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "F6D8BE2B9FCD6B8AE055000000000001",
      "teacherId": null,
      "studentName": "赵六",
      "examTime": "2023-08-21 13:51:52",
      "score": 81,
      "courseId": null,
      "courseName": "气象课",
      "scoreType": "2",
      "saveTime": "2023-08-21 13:45:09",
      "practicalScoreList": null
    },
    {
      "uuid": "0367A734EA6A2AE2E065000000000001",
      "planId": "dcf44c6f3cde454fa50116aebff08b6e",
      "project": "测试0821",
      "trainId": "px-2023-0821",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "236690bf31504e9f85b3c442a843fa7d",
      "teacherId": null,
      "studentName": "测试0821-333",
      "examTime": "2023-08-21 13:51:52",
      "score": 70,
      "courseId": null,
      "courseName": "气象课",
      "scoreType": "2",
      "saveTime": "2023-08-21 13:45:09",
      "practicalScoreList": null
    },
    {
      "uuid": "0367A734EA692AE2E065000000000001",
      "planId": "dcf44c6f3cde454fa50116aebff08b6e",
      "project": "测试0821",
      "trainId": "px-2023-0821",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "adb8d5b000164402b853d6f2f40b7b95",
      "teacherId": null,
      "studentName": "测试0821-222",
      "examTime": "2023-08-21 13:51:52",
      "score": 90,
      "courseId": null,
      "courseName": "气象课",
      "scoreType": "2",
      "saveTime": "2023-08-21 13:45:09",
      "practicalScoreList": null
    },
    {
      "uuid": "0367A734EA682AE2E065000000000001",
      "planId": "dcf44c6f3cde454fa50116aebff08b6e",
      "project": "测试0821",
      "trainId": "px-2023-0821",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "d54d97c1550c422ca0e163c132389ee5",
      "teacherId": null,
      "studentName": "测试0821-111",
      "examTime": "2023-08-21 13:51:52",
      "score": 80,
      "courseId": null,
      "courseName": "气象课",
      "scoreType": "2",
      "saveTime": "2023-08-21 13:45:09",
      "practicalScoreList": null
    },
    {
      "uuid": "0367A734EA672AE2E065000000000001",
      "planId": "dcf44c6f3cde454fa50116aebff08b6e",
      "project": "测试0821",
      "trainId": "px-2023-0821",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "fec1d3cb91cc4dc89a38d4b2935a6e93",
      "teacherId": null,
      "studentName": "测试0821-11",
      "examTime": "2023-08-21 13:51:52",
      "score": 75,
      "courseId": null,
      "courseName": "气象课",
      "scoreType": "2",
      "saveTime": "2023-08-21 13:45:09",
      "practicalScoreList": null
    },
    {
      "uuid": "6b6f4c2d69f64c019ee6baae5bc2cb1d",
      "planId": "e90a05335e584824947cb8cd4ad461e0",
      "project": "测试0809",
      "trainId": "0809",
      "theoryScoreList": null,
      "content": null,
      "template": "3",
      "studentId": "002E0518DD5074F2E065000000000001",
      "teacherId": null,
      "studentName": "万虎",
      "examTime": "2023-08-16 09:33:26",
      "score": 75,
      "courseId": null,
      "courseName": "雷达课三",
      "scoreType": "1",
      "saveTime": "2023-08-16 09:26:32",
      "practicalScoreList": null
    },
    {
      "uuid": "d8daa8186d7b418fa065ff8849855565",
      "planId": "e388d9d8963841679e9b3c9333b51a2e",
      "project": "hhh",
      "trainId": "yyy",
      "theoryScoreList": null,
      "content": null,
      "template": "1",
      "studentId": "6beaf14ef31c41fda8d3ca6d21547b76",
      "teacherId": null,
      "studentName": "测试08114-4",
      "examTime": "2023-08-16 08:00:00",
      "score": 89,
      "courseId": null,
      "courseName": "气象课",
      "scoreType": "1",
      "saveTime": "2023-08-16 09:25:43",
      "practicalScoreList": null
    },
    {
      "uuid": "0f794209fb154ee4b561a9c03452b343",
      "planId": "19894240b47b4afd82ff18955f53333c",
      "project": "CESHI",
      "trainId": "ceshi",
      "theoryScoreList": null,
      "content": null,
      "template": "7",
      "studentId": "002E0518DD4E74F2E065000000000001",
      "teacherId": null,
      "studentName": "李松",
      "examTime": "2023-08-16 08:00:00",
      "score": 100,
      "courseId": null,
      "courseName": "气象课",
      "scoreType": "1",
      "saveTime": "2023-08-16 09:24:29",
      "practicalScoreList": null
    },
    {
      "uuid": "0300ACD0D2867BE0E065000000000001",
      "planId": "19894240b47b4afd82ff18955f53333c",
      "project": "CESHI",
      "trainId": "ceshi",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "002E0518DD4E74F2E065000000000001",
      "teacherId": null,
      "studentName": "李松",
      "examTime": "2023-08-16 09:28:49",
      "score": 88,
      "courseId": null,
      "courseName": "英语课",
      "scoreType": "2",
      "saveTime": "2023-08-16 09:21:57",
      "practicalScoreList": null
    },
    {
      "uuid": "0300A60532757C6BE065000000000001",
      "planId": "f590b85ba0a944e381514386298c4038",
      "project": "2023第4期气象培训",
      "trainId": "PX-2023-04",
      "theoryScoreList": null,
      "content": null,
      "template": "5",
      "studentId": "002E0518DD4E74F2E065000000000001",
      "teacherId": null,
      "studentName": "李松",
      "examTime": "2023-08-16 08:00:00",
      "score": 0,
      "courseId": null,
      "courseName": "程序管制理论",
      "scoreType": "1",
      "saveTime": "2023-08-16 08:48:05",
      "practicalScoreList": null
    },
    {
      "uuid": "0300A60532747C6BE065000000000001",
      "planId": "b6fbfe48ffa041d8ba534ed57fe5a5cb",
      "project": "TEST20230810",
      "trainId": "20230810",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "FF943A3340374CA2E055000000000001",
      "teacherId": null,
      "studentName": "李四",
      "examTime": "2023-08-11 00:00:00",
      "score": 92,
      "courseId": null,
      "courseName": "气象课",
      "scoreType": "2",
      "saveTime": "2023-08-16 08:48:05",
      "practicalScoreList": null
    },
    {
      "uuid": "0300A60532737C6BE065000000000001",
      "planId": "e0d53949dd1346cfa0f2ae4995b96ef1",
      "project": "TEST0814_02",
      "trainId": "0814_02",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "FF943A3340364CA2E055000000000001",
      "teacherId": null,
      "studentName": "张三",
      "examTime": "2023-08-12 00:00:00",
      "score": 90,
      "courseId": null,
      "courseName": "气象课",
      "scoreType": "2",
      "saveTime": "2023-08-16 08:48:05",
      "practicalScoreList": null
    }]
// 深拷贝
function deepClone(data) {
  let dataType = getDataType(data);
  let container;
  if (dataType === 'Object') {
    container = {};
  }
  if (dataType === 'Array') {
    container = [];
  }
  for (const key in data) {
    let type = getDataType(data[key]);
    if (key === 'Array' || type === 'Object') {
      container[key] = deepClone(data[key]);
    } else {
      container[key] = data[key];
    }
  }
  return container;
}
// 判断数据类型
function getDataType(data) {
  return Object.prototype.toString.call(data).slice(8, -1);
}

function generateRandomString(length) {
  let result = '';
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  const charactersLength = characters.length;
  for (let i = 0; i < length; i++) {
    const randomIndex = Math.floor(Math.random() * charactersLength);
    result += characters.charAt(randomIndex);
  }
  return result;
}

function addCourseId(data){
  const courseMap = {}; // 创建一个映射对象,将 courseName 映射到唯一的 courseId

// 遍历 data 数组
  for (const item of data) {
    const courseName = item.courseName;
    // 如果 courseName 不在映射中,则为其分配一个新的 courseId(字符串形式)
    if (!courseMap[courseName]) {
      courseMap[courseName] = generateRandomString(30);
    }
    // 将映射中的 courseId 赋值给对象的 courseId 属性
    item.courseId = courseMap[courseName];
  }
  return data
}

function addProCourseScoreType(data){
  // 添加courseId
  data = addCourseId(data);
  // 添加一级父节点(project)
  var afterDeptList = []; // 找项目名
  var afterTeaData = []; // 将父节点添加进去
  for (let item of data) {
    if (!afterDeptList.includes(item.planId)) { // 如果这个项目id没有出现过,就把项目id第一个放进去
      afterDeptList.push(item.planId);
      let project = item.project + '(' + item.trainId + ')';
      // 添加一个该项目第一次出现的父节点
      afterTeaData.push({ uuid: item.planId, pid: '0', project: project, trainId: item.trainId, isParent: '1' });
      item.pid = item.planId;
    } else {
      item.pid = item.planId; //父节点出现了,给子节点添加一个索引
    }
  }
  data = [...afterTeaData, ...data];
  // 添加二级父节点(teacher)
  let result2 = [],
      courseList = [];
  for (let item of data) {
    if (item.pid != '0') { // 如果pid不是0 那么说明有父节点
      let courseId = item.courseId;
      let planId = item.planId;
      let pid = planId + courseId; // 项目名+teacher名
      if (courseList.includes(pid)) { // 发现这个项目了
        item.pid = pid;
        item.project = item.courseName;
        result2.push(item);
      } else {
        courseList.push(pid);
        result2.push({ uuid: pid, pid: item.planId, project: item.courseName, isParent: '1' });
        //构造日期下的第一个节点
        let temp = deepClone(item);
        temp.pid = pid;
        temp.project = temp.courseName;
        result2.push(temp);
      }
    } else {
      result2.push(item);
    }
  }
  // 添加三级父节点
  let result3 = [],
      scoreTypeList = [];
  for(let item of result2){
    if (item.isParent != '1') {
      let ScoreTypeId = item.scoreType;
      let planId = item.planId;
      let courseId = item.courseId;
      let pid = planId + courseId + ScoreTypeId;
      let pid2 =  planId + courseId;
      if (scoreTypeList.includes(pid)) {
        item.pid = pid;
        item.project = item.studentName;
        result3.push(item);
      } else {
        scoreTypeList.push(pid);
        result3.push({ uuid: pid, pid: pid2, project: item.scoreType, isParent: '1' });
        //构造日期下的第一个节点
        let temp = deepClone(item);
        temp.pid = pid;
        temp.project = temp.studentName;
        result3.push(temp);
      }
    } else {
      result3.push(item);
    }
  }
  return result3
}


function getDeptTreeCustom(data, pid, idField, pidField) {
  if (typeof idField == 'undefined') {
    idField = 'id';
  }
  if (typeof pidField == 'undefined') {
    pidField == 'pid';
  }
  const result = [];
  let temp;
  for (let i = 0; i < data.length; i++) {
    if (data[i][pidField] === pid) { // 如果元素的pid==0
      temp = getDeptTreeCustom(data, data[i][idField], idField, pidField);
      if (temp.length > 0) {
        data[i].children = temp;
      }
      result.push(data[i]);
    }
  }
  return result;
}

let y = addProCourseScoreType(data)
let all = getDeptTreeCustom(y,'0', 'uuid', 'pid')
console.log(all)

vue数据转树状图最终进阶(三级柱状图)_第1张图片

你可能感兴趣的:(vue.js,前端,javascript)