Merge branch 'beta' of https://git.cocorobo.cn/CocoRoboLabs/pbl-teacher-table into beta

src/components/pages/dataBoard/course/chartList/cateRank.vue

@@ -6,10 +6,10 @@
       :header-cell-style="{ background: '#E0EAFB' }"
       :row-class-name="tableRowClassName"
     >
-      <el-table-column prop="rank" label="排行" width="100" align="center"> </el-table-column>
-      <el-table-column prop="name" label="类别名称" width="170" align="center">
+      <el-table-column prop="rank" label="排行" min-width="50" align="center"> </el-table-column>
+      <el-table-column prop="name" label="类别名称" min-width="80" align="center">
       </el-table-column>
-      <el-table-column prop="sum" label="类别平均" width="170" align="center">
+      <el-table-column prop="sum" label="类别平均" min-width="80" align="center">
       </el-table-column>
     </el-table>
   </div>

src/components/pages/dataBoard/student/index.vue

@@ -6,7 +6,27 @@
         <div class="titleBox">
           <div class="title">基础概况</div>
         </div>
-        <div class="dataBox"></div>
+        <div class="dataBox">
+          <div class="info_box">
+            <div class="info blueBG">
+              <span>学生总数</span>
+              <span>15620</span>
+            </div>
+            <div class="info greenBG">
+              <span>周使用频次</span>
+              <span>15620</span>
+            </div>
+            <div class="info blueBG">
+              <span>登录频次</span>
+              <span>15620</span>
+            </div>
+            <div class="info greenBG">
+              <span>人均使用频次</span>
+              <span>15620</span>
+            </div>
+          </div>
+          <loginCount style="height: calc(100% - 140px);"></loginCount>
+        </div>
       </div>
       <div class="bottom">
         <div class="titleBox">
@@ -20,13 +40,52 @@
         <div class="titleBox">
           <div class="title">学生综合评价</div>
         </div>
-        <div class="dataBox"></div>
+        <div class="dataBox">
+          <div class="info_box" style="width:95%;justify-content: flex-start;">
+              <div class="info2 blueBG">
+                <span>学生总数</span>
+                <span>15620</span>
+              </div>
+              <div class="info2 greenBG">
+                <span>班级总数</span>
+                <span>15620</span>
+              </div>
+              <div class="info2 blueBG">
+                <span>平均得分</span>
+                <span>15620</span>
+            </div>
+          </div>
+          <studentInfo style="height: calc(100% - 70px);"></studentInfo>
+        </div>
       </div>
       <div class="bottom">
         <div class="titleBox">
           <div class="title">平台使用深度</div>
         </div>
-        <div class="dataBox"></div>
+        <div class="dataBox">
+          <div class="depth_box">
+            <div class="depth">
+              <span>参与课程</span>
+              <div><el-progress :width="90" type="circle" :percentage="36" :stroke-width="15" :format="format"></el-progress></div>
+            </div>
+            <div class="depth">
+              <span>参与项目</span>
+              <div><el-progress :width="90" type="circle" :percentage="76" :stroke-width="15" :format="format"></el-progress></div>
+            </div>
+            <div class="depth">
+              <span>使用工具</span>
+              <div><el-progress :width="90" type="circle" :percentage="76" :stroke-width="15" :format="format"></el-progress></div>
+            </div>
+            <div class="depth">
+              <span>协同合作</span>
+              <div><el-progress :width="90" type="circle" :percentage="76" :stroke-width="15" :format="format"></el-progress></div>
+            </div>
+            <div class="depth">
+              <span>互动交流</span>
+              <div><el-progress :width="90" type="circle" :percentage="76" :stroke-width="15" :format="format"></el-progress></div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
     <div class="right">
@@ -34,21 +93,46 @@
         <div class="titleBox">
           <div class="title">学生综合评价分布</div>
         </div>
-        <div class="dataBox"></div>
+        <div class="dataBox">
+          <studentInfo2></studentInfo2>
+        </div>
       </div>
       <div class="bottom">
         <div class="titleBox">
           <div class="title">在线时长</div>
         </div>
-        <div class="dataBox"></div>
+        <div class="dataBox">
+          <div class="info_box">
+            <div class="info blueBG">
+              <span>累计在线时长</span>
+              <span>15620</span>
+            </div>
+            <div class="info greenBG">
+              <span>学生在线平均时长</span>
+              <span>15620</span>
+            </div>
+          </div>
+          <loginTime style="height:calc(100% - 70px)"></loginTime>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-export default {
+import loginCount from './loginCount'
+import studentInfo from './studentInfo'
+import studentInfo2 from './studentInfo2'
+import loginTime from './loginTime'
 
+export default {
+  components: {
+    loginCount,studentInfo,studentInfo2,loginTime
+  },
+  data() {
+    return {
+    }
+  },
 }
 </script>
 
@@ -136,4 +220,108 @@ export default {
   height: calc(100% - 40px);
   width: 100%;
 }
+
+.titleBox {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  padding: 0 15px;
+  width: 100%;
+}
+
+.titleBox>.title {
+  font-weight: 700;
+}
+
+.dataBox {
+  height: calc(100% - 40px);
+  width: 100%;
+}
+
+
+.info_box {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  width: 90%;
+  margin: 0 auto;
+}
+
+.info_box>.info2,
+.info_box>.info3,
+.info_box>.info {
+  width: calc(50% - 10px);
+  display: flex;
+  flex-direction: column;
+  height: 60px;
+  justify-content: center;
+  padding: 0 10px;
+  box-sizing: border-box;
+  margin-bottom: 10px;
+  border-radius: 5px;
+}
+
+.info_box>.info2 {
+  width: calc(100%/4 - 10px);
+  align-items: flex-end;
+  margin-right: 10px;
+}
+
+.info_box>.info3 {
+  width: 100%;
+  margin-bottom: 5px;
+}
+
+
+.info_box>.info2>span:nth-child(1),
+.info_box>.info3>span:nth-child(1),
+.info_box>.info>span:nth-child(1) {
+  font-size: 12px;
+  margin: 0 0 5px 0;
+}
+
+.info_box>.info2>span:nth-child(2),
+.info_box>.info3>span:nth-child(2),
+.info_box>.info>span:nth-child(2) {
+  font-size: 22px;
+  font-weight: 700;
+}
+
+.blueBG {
+  background: linear-gradient(180deg,
+      rgba(224, 234, 251, 0.2) 0%,
+      rgba(54, 130, 252, 0.3) 100%);
+}
+
+.greenBG {
+  background: linear-gradient(180deg,
+      rgb(211, 246, 228, 0.2) 0%,
+      rgb(23, 196, 105, 0.3) 100%);
+}
+
+.depth_box {
+  display: flex;
+  flex-wrap: wrap;
+  height: 100%;
+  width: 95%;
+  margin: 0 auto;
+  overflow: hidden;
+  justify-content: space-between;
+}
+
+.depth {
+  width: calc(100% / 5 - 10px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.depth > span:nth-child(1) {
+  font-size: 14px;
+  font-weight: 700;
+  margin: 0 0 10px;
+}
+.depth > div:nth-child(1) {}
 </style>

src/components/pages/dataBoard/student/loginCount/index.vue

@@ -0,0 +1,97 @@
+<template>
+    <div class="data_body">
+        <div style="width: 100%; height: 100%">
+            <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
+        </div>
+    </div>
+</template>
+  
+<script>
+export default {
+    data() {
+        return {
+            chartObj: null,
+            ooption: {
+                xdata: [],
+                sdata: [],
+            },
+            option: {
+                tooltip: {
+                    trigger: 'axis'
+                },
+                grid: {
+                    top:'5%',
+                    left: '5%',
+                    right: '5%',
+                    bottom: '5%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: true,
+                    data: ['1月', '2月', '3月', '4月', '5月', '6月']
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                series: [
+                    {
+                        name: '学生',
+                        type: 'line',
+                        data: [220, 182, 191, 234, 290, 330]
+                    },
+                ]
+            },
+        };
+    },
+    methods: {
+        setChart(option) {
+            // 雷达图显示的标签
+            let newPromise = new Promise((resolve) => {
+                resolve();
+            });
+            //然后异步执行echarts的初始化函数
+            newPromise.then(() => {
+                const chartObj = this.$echarts.init(
+                    //劳动课程
+                    this.$el.querySelector("#charts_canvas")
+                );
+                //   this.option.xAxis.data = option.xdata;
+                //   this.option.series[0].data = option.sdata;
+                // 初始化雷达图
+                this.chartObj = chartObj;
+                this.chartObj.setOption(this.option);
+            });
+        },
+    },
+    watch: {
+
+    },
+    mounted() {
+
+        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/dataBoard/student/loginTime/index.vue

@@ -0,0 +1,92 @@
+<template>
+    <div class="data_body">
+        <div style="width: 100%; height: 100%">
+            <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
+        </div>
+    </div>
+</template>
+  
+<script>
+export default {
+    data() {
+        return {
+            chartObj: null,
+            ooption: {
+                xdata: [],
+                sdata: [],
+            },
+            option: {
+                tooltip: {},
+                grid: {
+                    top: '5%',
+                    left: '5%',
+                    right: '5%',
+                    bottom: '5%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'value',
+                    boundaryGap: [0, 0.01]
+                },
+                yAxis: {
+                    type: 'category',
+                    data: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
+                },
+                series: [
+                    {
+                        type: 'bar',
+                        data: [180, 50, 70, 90, 100, 130]
+                    }
+                ]
+            },
+        };
+    },
+    methods: {
+        setChart(option) {
+            // 雷达图显示的标签
+            let newPromise = new Promise((resolve) => {
+                resolve();
+            });
+            //然后异步执行echarts的初始化函数
+            newPromise.then(() => {
+                const chartObj = this.$echarts.init(
+                    //劳动课程
+                    this.$el.querySelector("#charts_canvas")
+                );
+                //   this.option.xAxis.data = option.xdata;
+                //   this.option.series[0].data = data;
+                // 初始化雷达图
+                this.chartObj = chartObj;
+                this.chartObj.setOption(this.option);
+            });
+        },
+    },
+    watch: {
+
+    },
+    mounted() {
+
+        this.setChart(this.ooption);
+        var _this = this;
+        window.addEventListener("resize", () => {
+            if (_this.chartObj) {
+                _this.chartObj.resize();
+            }
+        });
+    },
+};
+</script>
+  
+<style scoped>
+.data_body {
+    height: 100%;
+    position: relative;
+    border-radius: 5px;
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 0;
+    width: 95%;
+    background: #fff;
+}
+</style>
+  

src/components/pages/dataBoard/student/studentInfo/index.vue

@@ -0,0 +1,107 @@
+<template>
+    <div class="data_body">
+        <div style="width: 100%; height: 100%">
+            <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
+        </div>
+    </div>
+</template>
+  
+<script>
+export default {
+    data() {
+        return {
+            chartObj: null,
+            ooption: {
+                xdata: [],
+                sdata: [],
+            },
+            option: {
+                xAxis: {
+                    data: ['一年级一班', '一年级二班', '一年级三班', '一年级四班', '一年级五班', '一年级六班', '一年级七班']
+                },
+                tooltip: {
+                    formatter: function (params, ticket, callback) {
+                        return `最高分：${params.value[2]}</br>最低分：${params.value[1]}`;
+                    }
+                },
+                yAxis: {},
+                grid: {
+                    top:'5%',
+                    left: '0%',
+                    right: '0%',
+                    bottom: '5%',
+                    containLabel: true
+                },
+                series: [
+                    {
+                        type: 'candlestick',
+                        data: [
+                            [70, 80, 70, 80],
+                            [60, 90, 60, 90],
+                            [50, 80, 50, 80],
+                            [78, 88, 78, 88],
+                            [85, 98, 85, 98],
+                            [75, 95, 75, 95],
+                            [65, 100, 65, 100],
+                            [55, 99, 55, 99]
+                        ],
+                        itemStyle: {
+                            color: "#0DDE70",
+                            borderColor: null
+                        }
+                    }
+                ]
+            },
+        };
+    },
+    methods: {
+        setChart(option) {
+            // 雷达图显示的标签
+            let newPromise = new Promise((resolve) => {
+                resolve();
+            });
+            //然后异步执行echarts的初始化函数
+            newPromise.then(() => {
+                const chartObj = this.$echarts.init(
+                    //劳动课程
+                    this.$el.querySelector("#charts_canvas")
+                );
+                //   this.option.xAxis.data = option.xdata;
+                //   this.option.series[0].data = option.sdata;
+                // 初始化雷达图
+                this.chartObj = chartObj;
+                this.chartObj.setOption(this.option);
+            });
+        },
+    },
+    watch: {
+
+    },
+    mounted() {
+
+        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/dataBoard/student/studentInfo2/index.vue

@@ -0,0 +1,96 @@
+<template>
+    <div class="data_body">
+        <div style="width: 100%; height: 100%">
+            <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
+        </div>
+    </div>
+</template>
+  
+<script>
+export default {
+    data() {
+        return {
+            chartObj: null,
+            ooption: {
+                xdata: [],
+                sdata: [],
+            },
+            option: {
+                tooltip: {},
+                radar: {
+                    // shape: 'circle',
+                    indicator: [
+                        { name: '目标一', max: 10 },
+                        { name: '目标二', max: 10 },
+                        { name: '目标三', max: 10 },
+                        { name: '目标四', max: 10 },
+                        { name: '目标五', max: 10 }
+                    ]
+                },
+                series: [
+                    {
+                        areaStyle: {},
+                        name: '学生综合评价',
+                        type: 'radar',
+                        data: [
+                            {
+                                value: [5, 7, 7, 8, 5, 6],
+                                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.xAxis.data = option.xdata;
+                //   this.option.series[0].data = option.sdata;
+                // 初始化雷达图
+                this.chartObj = chartObj;
+                this.chartObj.setOption(this.option);
+            });
+        },
+    },
+    watch: {
+
+    },
+    mounted() {
+
+        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>
+