pbl-student-table/src/components/studio/courseProgress.vue

<template>
    <div v-loading="loading" class="box">
        <!-- <el-button type="primary" size="small" class="returnBtn" @click="retrunA()">返回</el-button> -->
        <!-- <div v-if="cPan == 2" class="noneClass">项目数据不完善,无法显示数据,请前去完善</div> -->
        <div class="proMan" v-if="cPan == 1">
            <div class="title"><img src="../../assets/icon/task.png" alt />任务进展甘特图</div>
            <ganChart :Json="unitJson"></ganChart>
        </div>
        <div class="proMan">
            <div class="title"><img src="../../assets/icon/tupu.png" alt />图谱</div>
            <graph :Json="graphJson"></graph>
        </div>
        <div class="proMan" v-if="cPan == 1">
            <div class="title"><img src="../../assets/icon/proMan.png" alt />负责人看板</div>
            <proMan :Json="unitJson" :ManAarray="ManAarray"></proMan>
        </div>
    </div>
</template>

<script>
import proMan from "../components/proMan.vue"
import ganChart from "../components/ganChart.vue"
import graph from "../components/graph.vue"
export default {
    components: { proMan, ganChart, graph },
    props:['cid','userid','oid','org'],
    data() {
        return {
            loading: false,
            unitJson: {},
            cPan: 1,
            teacherJuri2: [],
            ManAarray: [],
            checkboxList3: [],
            courseUserid: "",
            graphJson: {}
        }
    },
    methods: {
        retrunA() {
            this.$router.go(-1)
        },
        getCourse() {
            let params = {
                cid: this.cid,
            };
            this.ajax
                .get(this.$store.state.api + "select_studio_course_detail", params)
                .then((res) => {
                    this.unitJson = JSON.parse(res.data[0][0].chapters);
                    this.courseUserid = res.data[0][0].userid;
                    this.checkboxList3 = res.data[0][0].course_teacher
                        ? res.data[0][0].course_teacher.split(",")
                        : [];
                    this.cPan = 1;
                    for (var i = 0; i < this.unitJson.length; i++) {
                        for (
                            var j = 0;
                            j < this.unitJson[i].chapterInfo[0].taskJson.length;
                            j++
                        ) {
                            // if (
                            //     !this.unitJson[i].chapterInfo[0].taskJson[j].task
                            // ) {
                            //     // this.$message.error("请填写任务名称");
                            //     this.cPan = 2
                            //     break;
                            // }
                            // if (
                            //     !this.unitJson[i].chapterInfo[0].taskJson[j].people
                            // ) {
                            //     // this.$message.error("请填写负责人");
                            //     this.cPan = 2
                            //     break;
                            // }
                            // if (
                            //     !this.unitJson[i].chapterInfo[0].taskJson[j].time
                            // ) {
                            //     // this.$message.error("请填写任务完成时间");
                            //     this.cPan = 2
                            //     break;
                            // }
                            if (this.unitJson[i].chapterInfo[0].taskJson[j].eList) {
                                this.unitJson[i].chapterInfo[0].taskJson[j].eList = this.unitJson[
                                    i
                                ].chapterInfo[0].taskJson[j].eList.filter((ele) => {
                                    return ele.value != "";
                                });
                            }
                        }
                    }
                    this.getTeacher(res.data[0][0]);
                })
                .catch((err) => {
                    console.error(err);
                });
        },
        setGraphJson(json) {
            let chapters = JSON.parse(json.chapters)
            let gjson = {
                rootId: 'pid',
                nodes: [
                    { id: 'pid', text: '', borderWidth: -1, color: '#128cff' },
                ],
                lines: [
                ]
            }
            gjson.nodes[0].text = json.title
            for (var i = 0; i < chapters.length; i++) {
                let _chapter = chapters[i]
                gjson.nodes.push({ id: 'chap' + i, text: '阶段' + (i + 1) + '-' + _chapter.dyName, borderWidth: -1, color: '#0672e1' })
                gjson.lines.push({ from: 'pid', to: 'chap' + i })
                let tasks = _chapter.chapterInfo[0].taskJson
                for (var j = 0; j < tasks.length; j++) {
                    let _task = tasks[j]
                    gjson.nodes.push({ id: 'task' + i + '-' + j, text: '任务' + (j + 1) + '-' + _task.task, borderWidth: -1, color: '#3c59da' })
                    gjson.lines.push({ from: 'chap' + i, to: 'task' + i + '-' + j })
                    if (_task.people) {
                        let _people = '负责人-' + this.getGMan(_task.people)
                        gjson.nodes.push({ id: 'people' + i + '-' + j, text: _people, borderWidth: -1, color: '#004d9b' })
                        gjson.lines.push({ from: 'task' + i + '-' + j, to: 'people' + i + '-' + j })
                        if (_task.tcMember && _task.tcMember.length) {
                            for (var tc = 0; tc < _task.tcMember.length; tc++) {
                                let _tc = this.getGMan(_task.tcMember[tc])
                                if (_tc) {
                                    gjson.nodes.push({ id: 'tc' + i + '-' + j + '-' + tc, text: _tc, borderWidth: -1, color: '#53c5fb' })
                                    gjson.lines.push({ from: 'people' + i + '-' + j, to: 'tc' + i + '-' + j + '-' + tc })
                                }
                            }
                        }
                    }
                }
            }
            this.graphJson = gjson
        },
        getGMan(people) {
            let _people = ''
            if (this.ManAarray.length) {
                for (var i = 0; i < this.ManAarray.length; i++) {
                    if (this.ManAarray[i].userid == people) {
                        _people = this.ManAarray[i].name;
                        break;
                    }
                }
            }
            return _people ? _people : '无'
        },
        getTeacher(sss) {
            this.ManAarray = []
            if (this.checkboxList3.indexOf(this.courseUserid) == -1) {
                this.checkboxList3.push(this.courseUserid)
            }
            let params = {
                uid: this.checkboxList3.join(","),
            };
            this.ajax
                .get(
                    this.$store.state.api + "getAllUserById",
                    params
                )
                .then((res) => {
                    let teacherJuri = res.data[0];
                    this.ManAarray = teacherJuri;
                    this.setGraphJson(sss)
                    this.setMan();
                })
                .catch((err) => {
                    console.error(err);
                });
        },
        setMan() {
            // let teacherJuri = this.teacherJuri2;
            // debugger
            // this.ManAarray = []
            // for (var i = 0; i < teacherJuri.length; i++) {
            //     if (teacherJuri[i].userid == this.userid) {
            //         this.ManAarray.push(teacherJuri[i])
            //     } else if (this.checkboxList3.indexOf(teacherJuri[i].userid) != -1) {
            //         this.ManAarray.push(teacherJuri[i])
            //     }
            // }
            this.loading = false;

        },
    },
    mounted() {
        this.loading = true;
        this.getCourse();

    },
}
</script>

<style scoped>
.returnBtn {
    position: fixed;
    right: 20px;
    top: 15px;
    z-index: 99999;
}

.noneClass {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
}

.box {
    background: #fff;
    height: 100%;
    width: 100%;
    overflow: auto;
}

.proMan {
    width: 95%;
    margin: 0 auto;
    padding: 20px 0 20px;
    /* margin-top: 20px; */
}

.proMan .title {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.proMan .title img {
    margin-right: 5px;
    height: 17px;
    width: 17px;
}
</style>