update

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

@@ -0,0 +1,159 @@
+<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/dataCom/radarZong.vue

@@ -0,0 +1,159 @@
+<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/dataCom/radarZong2.vue

@@ -0,0 +1,159 @@
+<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

@@ -0,0 +1,289 @@
+<template>
+    <div class="pb_content" style="height: auto; width: calc(100% - 40px); margin: 0 auto;background: unset;">
+        <div style="width:100%;padding:0;box-sizing: border-box;">
+            <div class="pb_head top">
+                <div style="display: flex;align-items: center;">
+                    <span class="subClick" @click="
+                        goTo(
+                            '/test?userid=' +
+                            userid +
+                            '&oid=' +
+                            oid +
+                            '&org=' +
+                            org +
+                            '&role=' +
+                            role
+                        )
+                        ">表单管理</span>
+                    <!-- v-show="oid == '4c686762-1d0a-11ed-8c78-005056b86db5'" -->
+                    <span class="subClick" @click="
+                        goTo(
+                            '/trainCourse?userid=' +
+                            userid +
+                            '&oid=' +
+                            oid +
+                            '&org=' +
+                            org +
+                            '&role=' +
+                            role
+                        )
+                        ">培训管理</span>
+                    <span class="sub_head">数据看板</span>
+                </div>
+            </div>
+        </div>
+        <div class="bbox_serch"></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>
+                    <div
+                        class="teal"
+                        @click="cutPage(1)"
+                        :class="[pType == 1 ? 'Tbor' : '']"
+                    >
+                        班主任
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+var OpenCC = require("opencc-js");
+let converter = OpenCC.Converter({
+		from:'hk',
+		to:'cn'
+})
+
+export default {
+    name: 'testDataBoard',
+    components: {},
+    data() {
+        return {
+            userid: this.$route.query.userid, //用户id
+            oid: this.$route.query.oid, //学校id
+            org: this.$route.query.org, //组织id
+            pType: 2,
+            teacherName: '',
+            tabLoading: false,
+            tableData: [],
+            zongJson: {}
+        };
+    },
+    computed: {
+    },
+    methods: {
+        goTo(path) {
+            this.$router.push(path);
+        },
+        cutPage(type){
+            this.pType = type
+            this.getData()
+        },
+        scoreChildren(children) {
+            let score = 0;
+            children.forEach(item => {
+            if (item.sco2 && parseFloat(item.sco2) > 0) {
+                score += parseFloat(item.sco2);
+            }
+            });
+            return score;
+        },
+        getData() {
+            this.tabLoading = true;
+            let params = [{
+                oid: this.oid,
+                org: this.org,
+                type: this.pType,
+                tname: this.teacherName
+            }];
+            // console.log(params);
+            this.ajax
+                .post(this.$store.state.api + "selectTestExaminePersonData2", params)
+                .then(res => {
+                    let data = res.data[0];
+
+                    data.forEach(e => {
+                        e.json = JSON.parse(e.json);
+                    });
+
+                    data.forEach(e => {
+                        e.evaSca = 0;
+                        e.cogSco = 0;
+                        e.step = 0;
+                        e.allStep = 0;
+
+                        e.json.forEach(i => {
+                            i.evaScore = 0 // 自评
+                            i.cogScore = 0 //考核
+                            i.score = 0 //考核
+                            i.children.forEach(k => {
+                                e.evaSca = e.evaSca + k.sco1 * 1;
+                                e.cogSco = e.cogSco + k.sco2 * 1;
+                                i.evaScore = i.evaScore + k.sco1 * 1;
+                                i.cogScore = i.cogScore + k.sco2 * 1;
+                                i.score = i.score + k.score * 1;
+                                e.allStep++;
+                                if (!!k.sco2 * 1) {
+                                    e.step++;
+                                }
+                            });
+                        });
+                    });
+
+                    data.forEach(e => {
+                        if (e.step == e.allStep) {
+                            e.state = "已完成";
+                        } else {
+                            e.state = "未完成";
+                        }
+                        if (!e.tea) {
+                            e.tea = "";
+                        }
+                        e.evaSca = e.evaSca.toFixed(0);
+                        e.cogSco = e.cogSco.toFixed(0);
+                    });
+                    let _data = []
+                    let zongJson = {}
+                    // zongJson.count = data.length
+                    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("行政巡查")){
+                                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)
+                            _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.zongJson = zongJson
+                    console.log(zongJson);
+                    
+                    this.tabLoading = false;
+                })
+                .catch(error => {
+                    this.tabLoading = false;
+                    console.log(error);
+                });
+        },
+    },
+    mounted() {
+        this.getData()
+    },
+};
+</script>
+
+<style scoped>
+.top {
+    display: flex;
+    justify-content: space-between;
+    width: 100% !important;
+    box-sizing: border-box;
+    margin: 0px auto;
+    padding: 10px 0;
+    height: 54px;
+}
+
+
+.subClick {
+    font-size: 16px;
+    cursor: pointer;
+    margin-left: 10px;
+    /* color: #ab582f; */
+    color: #409eff;
+}
+
+.sub_head {
+    position: relative;
+    font-size: 20px;
+    font-weight: bold;
+    padding: 0 15px;
+}
+
+.sub_head::after {
+    content: "";
+    width: 100%;
+    background: #3681FC;
+    height: 2px;
+    position: absolute;
+    left: 0;
+    bottom: -8px;
+}
+
+.subClick {
+    /* font-size: 16px; */
+    font-size: 20px;
+    cursor: pointer;
+    /* margin-left: 17.5px; */
+    /* color: #ab582f; */
+    /* color: #409eff; */
+    color: #999;
+    padding: 0 15px;
+}
+
+.subClick:hover {
+    color: #000;
+}
+
+.sub_head+.subClick,
+.subClick+.subClick,
+.subClick+.sub_head {
+    margin-left: 17.5px;
+}
+
+.bbox {
+    background: #fff;
+    border-radius: 0 5px 5px 5px;
+    padding: 15px 0;
+    box-sizing: border-box;
+    min-height: 900px;
+}
+
+.bbox_nav{
+    display: flex;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 20px;
+    align-items: center;
+}
+
+.teaLis {
+  display: flex;
+}
+.teal {
+  padding: 10px 20px;
+  cursor: pointer;
+}
+.Tbor {
+  border-bottom: 2px rgba(54, 129, 252, 1) solid;
+  font-weight: 600;
+}
+</style>

src/components/pages/test/index.vue

@@ -17,6 +17,18 @@
                             role
                         )
                         ">培训管理</span>
+                    <span class="subClick" v-if="examineData.length" @click="
+                        goTo(
+                            '/testDataBoard?userid=' +
+                            userid +
+                            '&oid=' +
+                            oid +
+                            '&org=' +
+                            org +
+                            '&role=' +
+                            role
+                        )
+                        ">数据看板</span>
                 </div>
             </div>
         </div>

src/components/pages/trainCourse/course.vue

@@ -19,6 +19,18 @@
             )
             ">表单管理</span>
           <span class="sub_head">培训管理</span>
+          <span class="subClick" v-if="examineData.length" @click="
+            goTo(
+                '/testDataBoard?userid=' +
+                userid +
+                '&oid=' +
+                oid +
+                '&org=' +
+                org +
+                '&role=' +
+                role
+            )
+            ">数据看板</span>
         </div>
         <div class="student_button">
           <!-- <el-button type="primary" class="bgColor" @click="openCourse">协同编辑</el-button> -->
@@ -390,10 +402,29 @@ export default {
       typed: "",
       pTypeCheck: [],
       pTypeCheckName: [],
-      btnDisplay: false
+      btnDisplay: false,
+      examineData:[]
     };
   },
   methods: {
+    // 获取基础页面数据
+    getPageBase() {
+      let params = {
+          typ: 2,
+          org: this.org,
+          oid: this.oid
+      };
+      // console.log(params);
+      this.ajax
+          .get(this.$store.state.api + "selectTestExamineBase", params)
+          .then(res => {
+              console.log('selectTestExamineBase',res.data[0]);
+              this.examineData=res.data[0]
+          })
+          .catch(error => {
+          console.log(error);
+          });
+    },
     change(val) {
       console.log(val);
     },
@@ -1152,6 +1183,7 @@ export default {
     if (this.role == "1") {
       this.groupA = "4";
     }
+    this.getPageBase()
     this.page = 1;
     // this.selectType();
     this.selectAllType();

src/router/index.js

@@ -113,6 +113,7 @@ import dataBoardArea from '@/components/pages/sz/dataBoardArea'
 import addSynergyCourse from '@/components/pages/synergyCourse/addCourse'
 import synergyCourse from '@/components/pages/synergyCourse/course'
 import test from '@/components/pages/test/index'
+import testDataBoard from '@/components/pages/test/databoard'
 import addTest from '@/components/pages/test/add/addTest'
 import testStudent from '@/components/pages/testStudent/index'
 import testPerson from '@/components/pages/testPerson/index'
@@ -932,6 +933,15 @@ export default new Router({
                 requireAuth: '' // 是否需要判断是否登录,这里是需要判断
             }
         },
+        {
+            path: '/testDataBoard',
+            name: 'testDataBoard',
+            component: testDataBoard,
+            meta: {
+                keepAlive: false,
+                requireAuth: '' // 是否需要判断是否登录,这里是需要判断
+            }
+        },
         {
             path: '/testStudent',
             component: testStudent,