update

src/components/pages/test/dataCom/cascader.vue

@@ -0,0 +1,323 @@
+<template>
+    <div class="cascader">
+        <div class="title" @click="showBox">{{ checkArray.length ? setCheckName(checkArray) : '点击选择教研室范围' }}</div>
+        <div class="box" v-if="show" v-loading="loading">
+            <div class="inputBox">
+                <input v-model="searchTerm" placeholder="输入教师名字搜索" />
+                <i class="search" @click="searchTeacher"></i>
+            </div>
+            <div class="options">
+                <div v-if="filteredOptions.length" class="ul">
+                    <div @click="selectOption(option)" v-for="(option, index) in filteredOptions" :key="index"
+                        class="li" :class="{ active: checkF === option.id }">
+                        <span>{{ option.name }}</span>
+                    </div>
+                </div>
+                <div v-if="children.length" class="ul">
+                    <div v-for="(option, index) in children" :key="index" class="li" @click="selectOption2(option)"
+                        :class="{ active: checkF2 === option.id }">
+                        <span>{{ option.name }}</span>
+                    </div>
+                </div>
+                <div v-else-if="checkF" class="ul">
+                    <div class="liNone">无子分类</div>
+                </div>
+                <div v-if="teacher.length" class="ul">
+                    <div class="li" @click="checkAll()"
+                    :class="{ active: panCheckAll === 1 }"><span>全部</span> </div>
+                    <div v-for="(teacher, index) in teacher" :key="index" class="li" @click="selectOption3(teacher)"
+                    :class="{ active: checkTeacher(teacher) === 2 }">
+                        <span>{{ teacher.name }}</span>
+                    </div>
+                </div>
+                <div v-else-if="checkF2" class="ul">
+                    <div class="liNone">暂无教师</div>
+                </div>
+            </div>
+            <div class="button">
+                <el-button size="small" @click="reset">重置</el-button>
+                <el-button type="primary" size="small" @click="confirm">确认</el-button>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Cascader',
+    props: {
+        options: {
+            type: Array,
+            required: true
+        }
+    },
+    data() {
+        return {
+            searchTerm: '',
+            filteredOptions: this.options,
+            checkF: "",
+            checkF2: "",
+            children: [],
+            teacher: [],
+            loading: false,
+            show: false,
+            checkArray: [],
+            checkArray2: []
+        };
+    },
+    computed: {
+        setCheckName() {
+            return function (arr) {
+                let content = ''
+                if(arr.length < 3){
+                    content = arr.map((item) => item.name).join(" 、 ");
+                }else {
+                    content = arr.slice(0, 2).map((item) => item.name).join(" 、 ") + "...共"+arr.length+"位老师";
+                }
+                return content;
+            };
+        },
+        checkTeacher() {
+            return function (teacher) {
+                let a = 1
+                this.checkArray2.forEach(element => {
+                   if (element.userid == teacher.userid) {
+                       a = 2
+                   }
+                   
+                });
+                return a
+            };
+        },
+        panCheckAll(){
+            if(this.teacher.length && this.checkArray2.length){
+                let userid = this.checkArray2.map((item) => item.userid)
+                let userid2 = this.teacher.map((item) => item.userid)
+                let userid3 = this.arrayToArray(userid, userid2)
+                if(userid2.length == userid3.length){
+                    return 1
+                }else{
+                    return 2
+                }
+            }else{
+                return 2
+            }
+        }
+    },
+    methods: {
+        showBox(){
+            if(this.show){
+                this.reset()
+            }else{
+                this.checkArray2 = JSON.parse(JSON.stringify(this.checkArray));
+            }
+            this.show = !this.show
+        },
+        arrayToArray(arrayo, arrayt) {
+            let array1 = arrayo;
+            let array2 = arrayt;
+
+            let commonElements = [];
+
+            for (let i = 0; i < array1.length; i++) {
+                for (let j = 0; j < array2.length; j++) {
+                if (array1[i] === array2[j]) {
+                    commonElements.push(array1[i]);
+                }
+                }
+            }
+            return commonElements;
+        },
+        reset() {
+            this.checkArray2 = []
+            this.checkF = ''
+            this.checkF2 = ''
+            this.teacher = [],
+            this.children = []
+        },
+        confirm() {
+            this.checkArray = JSON.parse(JSON.stringify(this.checkArray2));
+            let array = this.checkArray.map(item => item.userid)
+            this.$emit('setTeacher', array)
+            this.show = false
+        },
+        selectOption(option) {
+            console.log(option);
+            this.checkF2 = '';
+            this.teacher = []
+            this.checkF = option.id;
+            this.children = option.child;
+            this.$forceUpdate();
+        },
+        selectOption2(option) {
+            this.checkF2 = option.id;
+            this.teacher = []
+            this.loading = true
+            let params = {
+                cid: option.id,
+                name: this.searchTerm,
+                userid: this.$route.query.userid
+            };
+            this.ajax
+                .get(this.$store.state.api + "getTypeTeacher", params)
+                .then((res) => {
+                    this.teacher = res.data[0];
+                    this.loading = false
+
+                })
+                .catch((err) => {
+                    this.loading = false;
+                    console.error(err);
+                });
+        },
+        searchTeacher() {
+            if(!this.checkF2){
+                this.$message.error('请先选择子分类');
+            }
+            this.teacher = []
+            this.loading = true
+            let params = {
+                cid: this.checkF2,
+                name: this.searchTerm,
+                userid: this.$route.query.userid
+            };
+            this.ajax
+                .get(this.$store.state.api + "getTypeTeacher", params)
+                .then((res) => {
+                    this.teacher = res.data[0];
+                    this.loading = false
+
+                })
+                .catch((err) => {
+                    this.loading = false;
+                    console.error(err);
+                });
+        },
+        selectOption3(teacher){
+            if(this.checkTeacher(teacher) == 1){
+                this.checkArray2.push(teacher)
+            }else {
+                this.checkArray2 = this.checkArray2.filter(item => item.userid != teacher.userid)
+            }
+        },
+        checkAll(){
+            let userid = this.checkArray2.map((item) => item.userid)
+            let userid2 = this.teacher.map((item) => item.userid)
+            if(this.panCheckAll == 1){
+                this.checkArray2 = this.checkArray2.filter(item => !userid2.includes(item.userid))
+            }else{
+                let userAarray = this.arrayToArray(userid, userid2)
+                let teacher = this.teacher.filter(item => !userAarray.includes(item.userid))
+                teacher.forEach(item => {
+                    this.checkArray2.push(item)
+                })
+            }
+        },
+    }
+};
+</script>
+
+<style scoped>
+.cascader {
+    position: relative;
+}
+
+.cascader>.title {
+    min-width: 300px;
+    background: #fff;
+    border-radius: 5px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    box-sizing: border-box;
+    cursor: pointer;
+    color: #00000066;
+}
+
+.box {
+    position: absolute;
+    z-index: 999;
+    border-radius: 5px;
+    overflow: hidden;
+    background: #fff;
+    box-shadow: 0 0 3px 2px #0000002b;
+}
+
+.inputBox {
+    padding: 5px 8px;
+    border-bottom: 1px solid #c4c4c4;
+    display: flex;
+    box-sizing: border-box;
+    width: 100%;
+    align-items: center;
+    position: relative
+}
+
+.inputBox>input {
+    width: 100%;
+    background: #fff;
+    border-radius: 5px;
+    height: 30px;
+    padding: 0 10px;
+    border: 1px solid #c4c4c4;
+    outline: none;
+}
+
+.inputBox>.search {
+    position: absolute;
+    right: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 13px;
+    height: 13px;
+    background: url("../../../../assets/icon/test/test_search.png") no-repeat;
+    background-size: 100% 100%;
+    cursor: pointer;
+}
+
+.options {
+    height: 200px;
+    display: flex;
+}
+
+.options>.ul {
+    height: 100%;
+    overflow-y: auto;
+    list-style: none;
+    padding: 0;
+    width: 135px;
+    border-right: 1px solid #c4c4c4;
+    /* width: 100%; */
+    text-align: center;
+}
+
+.options>.ul:nth-child(3) {
+    border-right: none;
+}
+
+.options>.ul>.li.active,
+.options>.ul>.li:hover {
+    color: #3681FC;
+}
+
+.options>.ul>.li,
+.options>.ul>.liNone {
+    cursor: pointer;
+    padding: 10px 8px;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.button {
+    padding: 5px 8px;
+    border-top: 1px solid #c4c4c4;
+    display: flex;
+    justify-content: flex-end;
+    box-sizing: border-box;
+    width: 100%;
+}
+</style>

src/components/pages/test/dataCom/radarTeacher.vue

@@ -7,24 +7,27 @@
             v-show="!this.ooption.xdata.length">暂无数据</div>
     </div>
 </template>
-  
+
 <script>
 export default {
     props: {
         evCourseArray: {
+            type: Object,
+            default: function () {
+                return {}
+            }
+        },
+        evCourseArray2: {
             type: Array,
             default: []
         },
-        eva: {
-            type: String,
-            default: ''
-        }
     },
     data() {
         return {
             chartObj: null,
             ooption: {
                 xdata: [],
+                xdata2: [],
                 sdata: [],
             },
             option: {
@@ -44,24 +47,23 @@ export default {
                 },
                 series: [
                     {
-                        name: '学生综合评价',
+                        name: '教师考核',
                         type: 'radar',
                         data: [
-                            {
-                                areaStyle: {
-                                    opacity: 0.2,
-                                    color: '#0061FF'
-                                },
-                                itemStyle: {
-                                    color: '#0061FF',
-                                    lineStyle: {
-                                    color: '#0061FF'
-                                    }
-                                },
-                                // 5, 4, 3, 5, 5, 2
-                                value: [],
-                                name: ''
-                            }
+                            // {
+                            //     areaStyle: {
+                            //         opacity: 0.2,
+                            //         color: '#0061FF'
+                            //     },
+                            //     itemStyle: {
+                            //         color: '#0061FF',
+                            //         lineStyle: {
+                            //         color: '#0061FF'
+                            //         }
+                            //     },
+                            //     value: [],
+                            //     name: ''
+                            // }
                         ]
                     }
                 ]
@@ -80,34 +82,113 @@ export default {
                     //劳动课程
                     this.$el.querySelector("#charts_canvas")
                 );
-                this.option.radar.indicator = option.xdata;
-                this.option.series[0].data[0].value = option.sdata;
+                this.option.radar.indicator = option.sdata;
+                if (option.xdata.length > 0) {
+                    this.option.series[0].data[0] = {
+                        // areaStyle: {
+                        //     opacity: 0.2,
+                        //     color: '#0061FF'
+                        // },
+                        itemStyle: {
+                            color: '#0061FF',
+                            lineStyle: {
+                                color: '#0061FF'
+                            }
+                        },
+                        value: option.xdata,
+                        name: '全体教师平均得分率'
+                    }
+                }
+                if (option.xdata2.length > 0) {
+                    this.option.series[0].data[1] = {
+                        // areaStyle: {
+                        //     opacity: 0.2,
+                        //     color: '#68bbc4'
+                        // },
+                        itemStyle: {
+                            color: '#68bbc4',
+                            lineStyle: {
+                                color: '#68bbc4'
+                            }
+                        },
+                        value: option.xdata2,
+                        name: '平均得分率'
+                    }
+                }
+                // this.option.series[0].data[0].value = option.xdata;
                 // 初始化雷达图
                 this.chartObj = chartObj;
                 this.chartObj.setOption(this.option);
             });
         },
-        setArray(array) {
-            this.ooption = {
-                xdata: [],
-                sdata: [],
+        setArray(array, type) {
+            this.ooption.sdata = Object.keys(this.evCourseArray).map((item) => {
+                return {
+                    name: item,
+                    max: 100,
+                };
+            });
+            if (type == 1) {
+                this.ooption.xdata = Object.keys(array).map((item) => {
+                    return array[item].cogScore;
+                })
             }
-            for (var i = 0; i < array.length; i++) {
-                if (array[i].evid == this.eva) {
-                    this.ooption.xdata = array[i].indicator
-                    this.ooption.sdata = array[i].value
-                    break;
+            if (this.evCourseArray2.length) {
+                let xdata2 = []
+                for(var i = 0; i < this.ooption.sdata.length; i++) {
+                    let name = this.ooption.sdata[i]
+                    for(var j = 0; j < this.evCourseArray2.length; j++) {
+                        if(this.evCourseArray2[j].name == name.name) {
+                            xdata2.push(this.evCourseArray2[j].cogScore)
+                            break
+                        }
+                    }
                 }
+                this.ooption.xdata2 = xdata2
             }
-            setTimeout(() => {
-                // if (!this.chartObj) {
+            if (!this.chartObj) {
                 this.setChart(this.ooption);
-                // } else {
-                //     this.option.radar.indicator = this.ooption.xdata;
-                //     this.option.series[0].data[0].value = this.ooption.sdata;
-                //     this.chartObj.setOption(this.option);
-                // }
-            }, 100);
+            } else {
+                this.option.radar.indicator = this.ooption.sdata;
+                if (this.ooption.xdata.length > 0) {
+                    this.option.series[0].data[0] = {
+                        // areaStyle: {
+                        //     opacity: 0.2,
+                        //     color: '#0061FF'
+                        // },
+                        itemStyle: {
+                            color: '#0061FF',
+                            lineStyle: {
+                                color: '#0061FF'
+                            }
+                        },
+                        value: this.ooption.xdata,
+                        name: '全体教师平均得分率'
+                    }
+                }
+                if (this.ooption.xdata2.length > 0) {
+                    this.option.series[0].data[1] = {
+                        // areaStyle: {
+                        //     opacity: 0.2,
+                        //     color: '#68bbc4'
+                        // },
+                        itemStyle: {
+                            color: '#68bbc4',
+                            lineStyle: {
+                                color: '#68bbc4'
+                            }
+                        },
+                        value: this.ooption.xdata2,
+                        name: '平均得分率'
+                    }
+                }
+                this.chartObj.setOption(this.option);
+            }
+            setTimeout(() => {
+                if (this.chartObj) {
+                    this.chartObj.resize();
+                }
+            }, 200);
             this.$forceUpdate();
         },
     },
@@ -116,21 +197,28 @@ export default {
             immediate: true,
             deep: true,
             handler(newValue, oldValue) {
-                this.setArray(newValue)
+                this.ooption.xdata = [];
+                this.setArray(newValue, 1)
                 this.$forceUpdate();
             },
         },
-        eva: {
+        evCourseArray2: {
             immediate: true,
             deep: true,
             handler(newValue, oldValue) {
-                this.setArray(this.evCourseArray)
+                this.ooption.xdata2 = [];
+                this.setArray(newValue, 2)
                 this.$forceUpdate();
             },
         },
     },
     mounted() {
-        this.setArray(this.evCourseArray)
+        this.ooption = {
+            xdata: [],
+            xdata2: [],
+            sdata: [],
+        }
+        this.setArray(this.evCourseArray, 1)
         // this.setChart(this.ooption);
         var _this = this;
         window.addEventListener("resize", () => {
@@ -141,7 +229,7 @@ export default {
     },
 };
 </script>
-  
+
 <style scoped>
 .data_body {
     height: 100%;
@@ -152,8 +240,7 @@ export default {
     margin: 0 auto;
     box-sizing: border-box;
     padding: 0;
-    width: 95%;
+    width: 90%;
     background: #fff;
 }
-</style>
-  
+</style>

src/components/pages/test/dataCom/radarZong.vue

@@ -7,27 +7,33 @@
             v-show="!this.ooption.xdata.length">暂无数据</div>
     </div>
 </template>
-  
+
 <script>
 export default {
     props: {
         evCourseArray: {
-            type: Array,
-            default: []
+            type: Object,
+            default: function () {
+                return {}
+            }
+        },
+        evCourseArray2: {
+            type: Object,
+            default: function () {
+                return {}
+            }
         },
-        eva: {
-            type: String,
-            default: ''
-        }
     },
     data() {
         return {
             chartObj: null,
             ooption: {
                 xdata: [],
+                xdata2: [],
                 sdata: [],
             },
             option: {
+                legend: {},
                 tooltip: {},
                 radar: {
                     axisName: {
@@ -44,24 +50,23 @@ export default {
                 },
                 series: [
                     {
-                        name: '学生综合评价',
+                        name: '教师考核',
                         type: 'radar',
                         data: [
-                            {
-                                areaStyle: {
-                                    opacity: 0.2,
-                                    color: '#0061FF'
-                                },
-                                itemStyle: {
-                                    color: '#0061FF',
-                                    lineStyle: {
-                                    color: '#0061FF'
-                                    }
-                                },
-                                // 5, 4, 3, 5, 5, 2
-                                value: [],
-                                name: ''
-                            }
+                            // {
+                            //     areaStyle: {
+                            //         opacity: 0.2,
+                            //         color: '#0061FF'
+                            //     },
+                            //     itemStyle: {
+                            //         color: '#0061FF',
+                            //         lineStyle: {
+                            //         color: '#0061FF'
+                            //         }
+                            //     },
+                            //     value: [],
+                            //     name: ''
+                            // }
                         ]
                     }
                 ]
@@ -80,34 +85,105 @@ export default {
                     //劳动课程
                     this.$el.querySelector("#charts_canvas")
                 );
-                this.option.radar.indicator = option.xdata;
-                this.option.series[0].data[0].value = option.sdata;
+                this.option.radar.indicator = option.sdata;
+                if (option.xdata.length > 0) {
+                    this.option.series[0].data[0] = {
+                        // areaStyle: {
+                        //     opacity: 0.2,
+                        //     color: '#0061FF'
+                        // },
+                        itemStyle: {
+                            color: '#0061FF',
+                            lineStyle: {
+                                color: '#0061FF'
+                            }
+                        },
+                        value: option.xdata,
+                        name: '全体教师平均得分率'
+                    }
+                }
+                if (option.xdata2.length > 0) {
+                    this.option.series[0].data[1] = {
+                        // areaStyle: {
+                        //     opacity: 0.2,
+                        //     color: '#68bbc4'
+                        // },
+                        itemStyle: {
+                            color: '#68bbc4',
+                            lineStyle: {
+                                color: '#68bbc4'
+                            }
+                        },
+                        value: option.xdata2,
+                        name: '平均得分率'
+                    }
+                }
+                // this.option.series[0].data[0].value = option.xdata;
                 // 初始化雷达图
                 this.chartObj = chartObj;
                 this.chartObj.setOption(this.option);
             });
         },
-        setArray(array) {
-            this.ooption = {
-                xdata: [],
-                sdata: [],
+        setArray(array, type) {
+            this.ooption.sdata = Object.keys(array).map((item) => {
+                return {
+                    name: item,
+                    max: 100,
+                };
+            });
+            if (type == 1) {
+                this.ooption.xdata = Object.keys(array).map((item) => {
+                    return array[item].cogScore;
+                })
+            }
+            if (type == 2) {
+                this.ooption.xdata2 = Object.keys(array).map((item) => {
+                    return array[item].cogScore;
+                })
             }
-            for (var i = 0; i < array.length; i++) {
-                if (array[i].evid == this.eva) {
-                    this.ooption.xdata = array[i].indicator
-                    this.ooption.sdata = array[i].value
-                    break;
+            if (!this.chartObj) {
+                this.setChart(this.ooption);
+            } else {
+                this.option.radar.indicator = this.ooption.sdata;
+                if (this.ooption.xdata.length > 0) {
+                    this.option.series[0].data[0] = {
+                        // areaStyle: {
+                        //     opacity: 0.2,
+                        //     color: '#0061FF'
+                        // },
+                        itemStyle: {
+                            color: '#0061FF',
+                            lineStyle: {
+                                color: '#0061FF'
+                            }
+                        },
+                        value: this.ooption.xdata,
+                        name: '全体教师平均得分率'
+                    }
+                }
+                if (this.ooption.xdata2.length > 0) {
+                    this.option.series[0].data[1] = {
+                        // areaStyle: {
+                        //     opacity: 0.2,
+                        //     color: '#68bbc4'
+                        // },
+                        itemStyle: {
+                            color: '#68bbc4',
+                            lineStyle: {
+                                color: '#68bbc4'
+                            }
+                        },
+                        value: this.ooption.xdata2,
+                        name: '平均得分率'
+                    }
                 }
+                this.chartObj.setOption(this.option);
             }
             setTimeout(() => {
-                // if (!this.chartObj) {
-                this.setChart(this.ooption);
-                // } else {
-                //     this.option.radar.indicator = this.ooption.xdata;
-                //     this.option.series[0].data[0].value = this.ooption.sdata;
-                //     this.chartObj.setOption(this.option);
-                // }
-            }, 100);
+                if (this.chartObj) {
+                    this.chartObj.resize();
+                }
+            }, 200);
             this.$forceUpdate();
         },
     },
@@ -116,21 +192,28 @@ export default {
             immediate: true,
             deep: true,
             handler(newValue, oldValue) {
-                this.setArray(newValue)
+                this.ooption.xdata = [];
+                this.setArray(newValue, 1)
                 this.$forceUpdate();
             },
         },
-        eva: {
+        evCourseArray2: {
             immediate: true,
             deep: true,
             handler(newValue, oldValue) {
-                this.setArray(this.evCourseArray)
+                this.ooption.xdata2 = [];
+                this.setArray(newValue, 2)
                 this.$forceUpdate();
             },
         },
     },
     mounted() {
-        this.setArray(this.evCourseArray)
+        this.ooption = {
+            xdata: [],
+            xdata2: [],
+            sdata: [],
+        }
+        this.setArray(this.evCourseArray, 1)
         // this.setChart(this.ooption);
         var _this = this;
         window.addEventListener("resize", () => {
@@ -141,7 +224,7 @@ export default {
     },
 };
 </script>
-  
+
 <style scoped>
 .data_body {
     height: 100%;
@@ -155,5 +238,4 @@ export default {
     width: 95%;
     background: #fff;
 }
-</style>
-  
+</style>

src/components/pages/test/dataCom/radarZong2.vue

@@ -1,159 +0,0 @@
-<template>
-    <div class="data_body">
-        <div style="width: 100%; height: 100%" v-if="this.ooption.xdata.length">
-            <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
-        </div>
-        <div style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: center;"
-            v-show="!this.ooption.xdata.length">暂无数据</div>
-    </div>
-</template>
-  
-<script>
-export default {
-    props: {
-        evCourseArray: {
-            type: Array,
-            default: []
-        },
-        eva: {
-            type: String,
-            default: ''
-        }
-    },
-    data() {
-        return {
-            chartObj: null,
-            ooption: {
-                xdata: [],
-                sdata: [],
-            },
-            option: {
-                tooltip: {},
-                radar: {
-                    axisName: {
-                        color: "#000"
-                    },
-                    // shape: 'circle',
-                    indicator: [
-                        // { name: '目标一', max: 5 },
-                        // { name: '目标二', max: 5 },
-                        // { name: '目标三', max: 5 },
-                        // { name: '目标四', max: 5 },
-                        // { name: '目标五', max: 5 }
-                    ]
-                },
-                series: [
-                    {
-                        name: '学生综合评价',
-                        type: 'radar',
-                        data: [
-                            {
-                                areaStyle: {
-                                    opacity: 0.2,
-                                    color: '#0061FF'
-                                },
-                                itemStyle: {
-                                    color: '#0061FF',
-                                    lineStyle: {
-                                    color: '#0061FF'
-                                    }
-                                },
-                                // 5, 4, 3, 5, 5, 2
-                                value: [],
-                                name: ''
-                            }
-                        ]
-                    }
-                ]
-            },
-        };
-    },
-    methods: {
-        setChart(option) {
-            // 雷达图显示的标签
-            let newPromise = new Promise((resolve) => {
-                resolve();
-            });
-            //然后异步执行echarts的初始化函数
-            newPromise.then(() => {
-                const chartObj = this.$echarts.init(
-                    //劳动课程
-                    this.$el.querySelector("#charts_canvas")
-                );
-                this.option.radar.indicator = option.xdata;
-                this.option.series[0].data[0].value = option.sdata;
-                // 初始化雷达图
-                this.chartObj = chartObj;
-                this.chartObj.setOption(this.option);
-            });
-        },
-        setArray(array) {
-            this.ooption = {
-                xdata: [],
-                sdata: [],
-            }
-            for (var i = 0; i < array.length; i++) {
-                if (array[i].evid == this.eva) {
-                    this.ooption.xdata = array[i].indicator
-                    this.ooption.sdata = array[i].value
-                    break;
-                }
-            }
-            setTimeout(() => {
-                // if (!this.chartObj) {
-                this.setChart(this.ooption);
-                // } else {
-                //     this.option.radar.indicator = this.ooption.xdata;
-                //     this.option.series[0].data[0].value = this.ooption.sdata;
-                //     this.chartObj.setOption(this.option);
-                // }
-            }, 100);
-            this.$forceUpdate();
-        },
-    },
-    watch: {
-        evCourseArray: {
-            immediate: true,
-            deep: true,
-            handler(newValue, oldValue) {
-                this.setArray(newValue)
-                this.$forceUpdate();
-            },
-        },
-        eva: {
-            immediate: true,
-            deep: true,
-            handler(newValue, oldValue) {
-                this.setArray(this.evCourseArray)
-                this.$forceUpdate();
-            },
-        },
-    },
-    mounted() {
-        this.setArray(this.evCourseArray)
-        // this.setChart(this.ooption);
-        var _this = this;
-        window.addEventListener("resize", () => {
-            if (_this.chartObj) {
-                _this.chartObj.resize();
-            }
-        });
-    },
-};
-</script>
-  
-<style scoped>
-.data_body {
-    height: 100%;
-    /* display: flex; */
-    position: relative;
-    border-radius: 5px;
-    /* border: 1px solid #eee; */
-    margin: 0 auto;
-    box-sizing: border-box;
-    padding: 0;
-    width: 95%;
-    background: #fff;
-}
-</style>
-  

src/components/pages/test/databoard.vue

@@ -32,25 +32,41 @@
                 </div>
             </div>
         </div>
-        <div class="bbox_serch"></div>
+        <div class="bbox_serch">
+            <Cascader :options="typeInfo" v-if="typeInfo.length" @setTeacher="setTeacher"></Cascader>
+        </div>
         <div class="bbox" v-loading="tabLoading">
             <div class="bbox_nav">
                 <div class="teaLis">
-                    <div
-                        class="teal"
-                        @click="cutPage(2)"
-                        :class="[pType == 2 ? 'Tbor' : '']"
-                    >
+                    <div class="teal" @click="cutPage(2)" :class="[pType == 2 ? 'Tbor' : '']">
                         专任教师
                     </div>
-                    <div
-                        class="teal"
-                        @click="cutPage(1)"
-                        :class="[pType == 1 ? 'Tbor' : '']"
-                    >
+                    <div class="teal" @click="cutPage(1)" :class="[pType == 1 ? 'Tbor' : '']">
                         班主任
                     </div>
                 </div>
+                <el-select v-model="checkSet" @change="setArray" style="margin-left: auto">
+                    <el-option label="综合排序" value=""> </el-option>
+                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                    </el-option>
+                </el-select>
+
+            </div>
+            <div class="randarZong">
+                <radarZong :evCourseArray="zongJson" :evCourseArray2="zongJson2" v-if="teacherArray.length"></radarZong>
+                <radarZong :evCourseArray="zongJson" v-else></radarZong>
+            </div>
+            <div class="randarBox">
+                <div class="title">教师详情</div>
+                <div class="randarTeacher" v-for="(item, index) in tableData" :key="index">
+                    <div class="randarTitle">
+                        <span>{{ item.username }}</span>
+                        <span>{{ getScore(item.json) }}</span>
+                    </div>
+                    <div class="randar">
+                        <radarTeacher :evCourseArray="zongJson2" :evCourseArray2="item.json"></radarTeacher>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -59,13 +75,19 @@
 <script>
 var OpenCC = require("opencc-js");
 let converter = OpenCC.Converter({
-		from:'hk',
-		to:'cn'
+    from: 'hk',
+    to: 'cn'
 })
 
+import radarZong from "./dataCom/radarZong.vue";
+import radarTeacher from "./dataCom/radarTeacher.vue";
+
+import Cascader from "./dataCom/cascader.vue";
+
+
 export default {
     name: 'testDataBoard',
-    components: {},
+    components: { radarZong, radarTeacher, Cascader },
     data() {
         return {
             userid: this.$route.query.userid, //用户id
@@ -75,25 +97,42 @@ export default {
             teacherName: '',
             tabLoading: false,
             tableData: [],
-            zongJson: {}
+            zongJson: {},
+            zongJson2: {},
+            checkSet: "",
+            options: [],
+            data: [],
+            typeInfo: [],
+            teacherArray: [],
         };
     },
     computed: {
+        getScore() {
+            return (item) => {
+                let score = 0;
+                for (var i = 0; i < item.length; i++) {
+                    score += item[i].cogScore
+                }
+                score = (score / item.length).toFixed(0);
+                return score;
+            }
+        }
     },
     methods: {
         goTo(path) {
             this.$router.push(path);
         },
-        cutPage(type){
+        cutPage(type) {
+            this.checkSet = ""
             this.pType = type
             this.getData()
         },
         scoreChildren(children) {
             let score = 0;
             children.forEach(item => {
-            if (item.sco2 && parseFloat(item.sco2) > 0) {
-                score += parseFloat(item.sco2);
-            }
+                if (item.sco2 && parseFloat(item.sco2) > 0) {
+                    score += parseFloat(item.sco2);
+                }
             });
             return score;
         },
@@ -154,21 +193,21 @@ export default {
                     let _data = []
                     let zongJson = {}
                     // zongJson.count = data.length
-                    data.forEach((e,index) => {
+                    data.forEach((e, index) => {
                         _data[index] = {}
                         _data[index].username = e.username
                         _data[index].evaSca = e.evaSca
                         _data[index].cogSco = e.cogSco
                         _data[index].json = []
-                        
-                        e.json.forEach((i,iindex) => {
-                            if(converter(i.name) == converter("科组评价") || converter(i.name) == converter("行政巡查")){
+
+                        e.json.forEach((i, iindex) => {
+                            if (converter(i.name) == converter("科组评价") || converter(i.name) == converter("行政巡查")) {
                                 return;
                             }
                             _data[index].json[iindex] = {}
                             _data[index].json[iindex].name = i.name
-                            let _evaScore = i.evaScore * (100 / i.score)
-                            let _cogScore = i.cogScore * (100 / i.score)
+                            let _evaScore = parseInt((i.evaScore * (100 / i.score)).toFixed(0))
+                            let _cogScore = parseInt((i.cogScore * (100 / i.score)).toFixed(0))
                             _data[index].json[iindex].evaScore = _evaScore  // 自评
                             _data[index].json[iindex].cogScore = _cogScore // 考核
                             zongJson[i.name] ? "" : zongJson[i.name] = {}
@@ -177,7 +216,7 @@ export default {
                         });
                     });
                     let zongArray = Object.keys(zongJson)
-                    for(var i = 0; i < zongArray.length; i++) {
+                    for (var i = 0; i < zongArray.length; i++) {
                         zongJson[zongArray[i]].evaScore = (zongJson[zongArray[i]].evaScore / data.length).toFixed(0)
                         zongJson[zongArray[i]].cogScore = (zongJson[zongArray[i]].cogScore / data.length).toFixed(0)
                     }
@@ -185,8 +224,14 @@ export default {
                     this.tableData = _data;
                     console.log(this.tableData);
                     this.zongJson = zongJson
+                    this.zongJson2 = zongJson
                     console.log(zongJson);
-                    
+                    this.options = Object.keys(zongJson).map(item => {
+                        return { label: item, value: item }
+                    })
+                    this.data = data
+                    console.log(data);
+
                     this.tabLoading = false;
                 })
                 .catch(error => {
@@ -194,14 +239,115 @@ export default {
                     console.log(error);
                 });
         },
+        setTeacher(array){
+            this.teacherArray = array
+            this.setArray()
+        },
+        setArray() {
+            let checkSet = this.checkSet
+            let _data = []
+            let zongJson = {}
+            let data = this.data
+            if(this.teacherArray.length){
+                data = data.filter((e) => {
+                    return this.teacherArray.includes(e.userid)
+                })
+            }
+            data.forEach((e, index) => {
+                _data[index] = {}
+                _data[index].username = e.username
+                if (checkSet == "") {
+                    _data[index].evaSca = e.evaSca
+                    _data[index].cogSco = e.cogSco
+                    _data[index].json = []
+                }
+
+
+                e.json.forEach((i, iindex) => {
+                    if (converter(i.name) == converter("科组评价") || converter(i.name) == converter("行政巡查")) {
+                        return;
+                    }
+                    if (checkSet == i.name) {
+                        _data[index].evaSca = i.evaScore
+                        _data[index].cogSco = i.cogScore
+                        _data[index].json = []
+                        i.children.forEach((ic, icindex) => {
+                            _data[index].json[icindex] = {}
+                            _data[index].json[icindex].name = ic.name
+                            let _evaScore = parseInt((ic.sco1 * 1 * (100 / ic.score)).toFixed(0))
+                            let _cogScore = parseInt((ic.sco2 * 1 * (100 / ic.score)).toFixed(0))
+                            _data[index].json[icindex].evaScore = _evaScore  // 自评
+                            _data[index].json[icindex].cogScore = _cogScore // 考核
+                            zongJson[ic.name] ? "" : zongJson[ic.name] = {}
+                            zongJson[ic.name].evaScore ? zongJson[ic.name].evaScore += _evaScore : zongJson[ic.name].evaScore = _evaScore
+                            zongJson[ic.name].cogScore ? zongJson[ic.name].cogScore += _cogScore : zongJson[ic.name].cogScore = _cogScore
+                        })
+                    } else if (checkSet == "") {
+                        _data[index].json[iindex] = {}
+                        _data[index].json[iindex].name = i.name
+                        let _evaScore = parseInt((i.evaScore * (100 / i.score)).toFixed(0))
+                        let _cogScore = parseInt((i.cogScore * (100 / i.score)).toFixed(0))
+                        _data[index].json[iindex].evaScore = _evaScore  // 自评
+                        _data[index].json[iindex].cogScore = _cogScore // 考核
+                        zongJson[i.name] ? "" : zongJson[i.name] = {}
+                        zongJson[i.name].evaScore ? zongJson[i.name].evaScore += _evaScore : zongJson[i.name].evaScore = _evaScore
+                        zongJson[i.name].cogScore ? zongJson[i.name].cogScore += _cogScore : zongJson[i.name].cogScore = _cogScore
+                    }
+
+                });
+            });
+            let zongArray = Object.keys(zongJson)
+            for (var i = 0; i < zongArray.length; i++) {
+                zongJson[zongArray[i]].evaScore = (zongJson[zongArray[i]].evaScore / data.length).toFixed(0)
+                zongJson[zongArray[i]].cogScore = (zongJson[zongArray[i]].cogScore / data.length).toFixed(0)
+            }
+            this.tableData = _data;
+            console.log(this.tableData);
+            this.zongJson2 = zongJson
+            console.log(zongJson);
+        },
+        //获取分类类名
+        getTypeInfo() {
+            this.tabLoading = true;
+            let params = {
+                oid: this.oid
+            };
+            this.ajax
+                .get(this.$store.state.api + "selectPerInfoAllTea", params)
+                .then((res) => {
+                    this.typeInfo = res.data[0];
+                    let typeInfo = res.data[1];
+                    this.typeInfo.forEach((e) => {
+                        e.child = [];
+                        e.value = '';
+                        typeInfo.forEach((i) => {
+                            if (e.id == i.parentid) {
+                                e.child.push({ id: i.id, name: i.name })
+                            }
+                        })
+                    })
+                    this.getData()
+                })
+                .catch((err) => {
+                    this.tabLoading = false;
+                    console.error(err);
+                });
+        },
     },
     mounted() {
-        this.getData()
+        this.getTypeInfo()
     },
 };
 </script>
 
 <style scoped>
+.bbox_serch{
+    width: 100%;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+}
+
 .top {
     display: flex;
     justify-content: space-between;
@@ -267,7 +413,7 @@ export default {
     min-height: 900px;
 }
 
-.bbox_nav{
+.bbox_nav {
     display: flex;
     width: 100%;
     box-sizing: border-box;
@@ -276,14 +422,77 @@ export default {
 }
 
 .teaLis {
-  display: flex;
+    display: flex;
 }
+
 .teal {
-  padding: 10px 20px;
-  cursor: pointer;
+    padding: 10px 20px;
+    cursor: pointer;
 }
+
 .Tbor {
-  border-bottom: 2px rgba(54, 129, 252, 1) solid;
-  font-weight: 600;
+    border-bottom: 2px rgba(54, 129, 252, 1) solid;
+    font-weight: 600;
+}
+
+
+.randarZong {
+    max-width: 100%;
+    width: 500px;
+    height: 500px;
+    margin: 0 auto;
+}
+
+.randarBox {
+    padding: 20px;
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.randarBox .title {
+    width: 100%;
+    font-size: 18px;
+    font-weight: 700;
+    margin-bottom: 20px;
+}
+
+.randarTeacher {
+    width: calc(100% / 4 - 20px);
+    margin-right: 20px;
+    margin-bottom: 20px;
+}
+
+
+.randarTitle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+}
+
+.randarTitle>span:nth-child(1) {}
+
+.randarTitle>span:nth-child(2) {}
+
+.randar {
+    width: calc(100%);
+    height: 350px;
+    border: 1px solid #e4e4e4;
+    border-radius: 5px;
+}
+
+@media screen and (max-width: 1280px) {
+    .randarTeacher {
+        width: calc(100% / 2 - 20px);
+    }
+}
+
+@media screen and (max-width: 800px) {
+    .randarTeacher {
+        width: calc(100%);
+        margin-right: 0;
+    }
 }
 </style>