data

src/components/pages/components/studentData.vue

@@ -167,68 +167,7 @@ export default {
           },
         ],
       },
-      data: [
-        {
-          name: "信息意识",
-          value: 15,
-          children: [
-            {
-              name: "信息应用意识",
-              value: 5,
-            },
-            {
-              name: "信息安全意识",
-              value: 3,
-            },
-            {
-              name: "信息感知意识",
-              value: 4,
-            },
-          ],
-        },
-        {
-          name: "信息社会责任",
-          value: 15,
-          children: [
-            {
-              name: "信息伦理道德",
-              value: 5,
-            },
-            {
-              name: "信息法律法规",
-              value: 8,
-            },
-          ],
-        },
-        {
-          name: "信息知识与技能",
-          value: 15,
-          children: [
-            {
-              name: "信息应用技能",
-              value: 5,
-            },
-            {
-              name: "信息科学知识",
-              value: 10,
-            },
-          ],
-        },
-        {
-          name: "信息思维与行为",
-          value: 15,
-          children: [
-            {
-              name: "信息思维",
-              value: 10,
-            },
-            {
-              name: "信息行为",
-              value: 3,
-            },
-          ],
-        },
-      ],
+      data: [],
       //const colors = ['red', 'blue', 'green', 'purple'];
       option2: {
         //color:colors,
@@ -405,11 +344,13 @@ export default {
           this.$el.querySelector("#person_canvas2")
         );
         let data = [];
-        for (var i = 0; i < 100; i++) {
-          var x = this.randomNum(1, 9);
-          var y = this.randomNum(0, 8);
-          var z = this.randomNum(1, 10);
-          data.push([x, y, z]);
+        for (var i = 1; i < 10; i++) {
+          for (var j = 0; j < 9; j++) {
+            var x = i;
+            var y = j;
+            var z = this.randomNum(0, 10);
+            data.push([x, y, z]);
+          }
         }
         this.option3.series[0].data = data;
         // console.log(this.option.series[0].data);
@@ -502,11 +443,13 @@ export default {
       ];
       this.chartObj2.setOption(this.option2);
       let data = [];
-      for (var i = 0; i < 100; i++) {
-        var x = this.randomNum(1, 9);
-        var y = this.randomNum(0, 8);
-        var z = this.randomNum(1, 10);
-        data.push([x, y, z]);
+      for (var i = 1; i < 10; i++) {
+        for (var j = 0; j < 9; j++) {
+          var x = i;
+          var y = j;
+          var z = this.randomNum(0, 10);
+          data.push([x, y, z]);
+        }
       }
       this.option3.series[0].data = data;
       this.chartObj3.setOption(this.option3);

src/components/pages/components/workData.vue

@@ -22,23 +22,114 @@
     </div>
     <div class="sd_class">
       <div class="sd_tTitle">课堂表现</div>
-      <img src="../../../assets/data/tu1.png" alt style="width:100%" />
+      <div class="wd_class_body">
+        <div class="wd_module">
+          <div class="sd_module_content">
+            <div
+              class="sd_module_children"
+              style="background:#fff;color:#000;font-size:25px;padding:0 25px;box-sizing:border-box;text-align:center"
+            >
+              <span>课程人数:共100人,已完成人数{{randomNum(50,100)}}人</span>
+            </div>
+            <div class="sd_module_children">
+              <span class="s">课堂时长</span>
+              <span class="s2">
+                <span>{{randomNum(5,15)}}</span>次
+                <span>{{randomNum(1,60)}}</span>分
+                <span>{{randomNum(1,59)}}</span>秒
+              </span>
+              <span>已经击败99%教师</span>
+            </div>
+            <div class="sd_module_children">
+              <span class="s">课堂节数</span>
+              <span class="s2">
+                <span>{{randomNum(5,20)}}</span>节
+              </span>
+              <span>已经击败99%教师</span>
+            </div>
+          </div>
+          <div style="width:45%">
+            <div id="gauge_canvas" class="echart" style="width: 100%; height: 100%;"></div>
+          </div>
+          <div class="sd_module_content">
+            <div class="sd_module_children">
+              <span class="s">课堂互动</span>
+              <span class="s2">
+                <span>{{randomNum(10,20)}}</span>次
+              </span>
+              <span>已经击败99%教师</span>
+            </div>
+            <div class="sd_module_children">
+              <span class="s">课堂生成</span>
+              <span class="s2">
+                <span>{{randomNum(7,15)}}</span>节
+              </span>
+              <span>已经击败99%教师</span>
+            </div>
+            <div class="sd_module_children">
+              <span class="s">自主活动</span>
+              <span class="s2">
+                <span>{{randomNum(10,20)}}</span>分
+                <span>{{randomNum(10,59)}}</span>秒
+              </span>
+              <span>已经击败99%教师</span>
+            </div>
+          </div>
+        </div>
+        <div class="wd_bottom">
+          <div class="bdiv">
+            <div id="line_canvas" class="echart" style="width: 100%; height: 100%;"></div>
+          </div>
+          <div class="bdiv">
+            <div id="bar_canvas" class="echart" style="width: 100%; height: 100%;"></div>
+          </div>
+        </div>
+      </div>
+      <!-- <img src="../../../assets/data/tu1.png" alt style="width:100%" /> -->
     </div>
     <div class="sd_class">
       <div class="sd_tTitle">班级学生能力分析</div>
       <div style="background:#fff;padding:10px 0">
         <div class="sd_person_button">
-          <span @click="type = 1" :class="{'active':type == 1}">语文</span>
-          <span @click="type = 2" :class="{'active':type == 2}">数学</span>
-          <span @click="type = 3" :class="{'active':type == 3}">英语</span>
-          <span @click="type = 4" :class="{'active':type == 4}">信息科技</span>
-          <span @click="type = 5" :class="{'active':type == 5}">艺术</span>
-          <span @click="type = 6" :class="{'active':type == 6}">跨学科素养</span>
+          <span @click="setType(1)" :class="{'active':type == 1}">语文</span>
+          <span @click="setType(2)" :class="{'active':type == 2}">数学</span>
+          <span @click="setType(3)" :class="{'active':type == 3}">英语</span>
+          <span @click="setType(4)" :class="{'active':type == 4}">信息科技</span>
+          <span @click="setType(5)" :class="{'active':type == 5}">艺术</span>
+          <span @click="setType(6)" :class="{'active':type == 6}">跨学科素养</span>
         </div>
         <div style="display:flex;flex-wrap:wrap">
-          <img src="../../../assets/data/tu3.png" alt style="width:50%" />
-          <img src="../../../assets/data/tu2.png" alt style="width:50%" />
-          <img src="../../../assets/data/tu4.png" alt style="width:100%" />
+          <div style="width:50%;height:500px">
+            <div id="sunburst_canvas" class="echart" style="width: 100%; height: 100%;"></div>
+          </div>
+          <div style="width:50%;height:500px">
+            <div id="scatter_canvas" class="echart" style="width: 100%; height: 100%;"></div>
+          </div>
+          <div style="width:100%">
+            <el-table
+              ref="table"
+              :data="tableData"
+              border
+              :height="500"
+              :fit="true"
+              style="width: 100%; height: 60%"
+              :header-cell-style="{ background: '#f1f1f1' }"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="name" label="姓名" min-width="20%" align="center"></el-table-column>
+              <el-table-column prop="number" label="学号" min-width="20%" align="center"></el-table-column>
+              <el-table-column prop="class" label="班级" min-width="20%" align="center"></el-table-column>
+              <el-table-column prop="score" label="分数" min-width="20%" align="center"></el-table-column>
+              <el-table-column label="操作" min-width="20%">
+                <template>
+                  <el-button type="primary" size="small">查看</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <!-- <img src="../../../assets/data/tu3.png" alt style="width:50%" />
+          <img src="../../../assets/data/tu2.png" alt style="width:50%" />-->
+          <!-- <img src="../../../assets/data/tu4.png" alt style="width:100%" /> -->
         </div>
       </div>
     </div>
@@ -61,6 +152,63 @@ export default {
   },
   data() {
     return {
+      tableData: [
+        {
+          name: "卓曾向",
+          number: "202205311",
+          class: "三年级七班",
+          score: "100",
+        },
+        {
+          name: "王志成",
+          number: "202205411",
+          class: "四年级一班",
+          score: "99",
+        },
+        {
+          name: "李沛郡",
+          number: "202205361",
+          class: "三年级六班",
+          score: "89",
+        },
+        {
+          name: "李世昌",
+          number: "202205321",
+          class: "三年级二班",
+          score: "88",
+        },
+        {
+          name: "李佳薇",
+          number: "202205471",
+          class: "四年级七班",
+          score: "69",
+        },
+        {
+          name: "叶玉卿",
+          number: "202205671",
+          class: "六年级七班",
+          score: "78",
+        },
+        {
+          name: "冯翊泽",
+          number: "202205571",
+          class: "五年级七班",
+          score: "68",
+        },
+        { name: "乐舞", number: "202205372", class: "三年级七班", score: "77" },
+        {
+          name: "关晓辉",
+          number: "202205475",
+          class: "四年级七班",
+          score: "68",
+        },
+        {
+          name: "谭晶陈",
+          number: "202205271",
+          class: "二年级七班",
+          score: "79",
+        },
+      ],
       Course: this.dataJson,
       courseId: "",
       tools: [],
@@ -70,9 +218,270 @@ export default {
       problemJson: [], //问答数据
       toolsJson: [], //工具数据
       type: 6,
+      chartObj: null,
+      chartObj2: null,
+      chartObj3: null,
+      chartObj4: null,
+      chartObj5: null,
+      gaugeOption: {
+        series: [
+          {
+            type: "gauge",
+            radius: "100%",
+            axisLine: {
+              lineStyle: {
+                width: 10,
+                color: [
+                  [
+                    100,
+                    {
+                      type: "linear",
+                      x: 0,
+                      y: 0,
+                      x2: 0,
+                      y2: 1,
+                      colorStops: [
+                        {
+                          offset: 1,
+                          color: "rgb(240,50,243)", // 0% 处的颜色
+                        },
+
+                        {
+                          offset: 0,
+                          color: "rgb(37,61,249)", // 100% 处的颜色
+                        },
+                      ],
+                      global: false, // 缺省为 false
+                    },
+                  ],
+                ],
+              },
+            },
+            pointer: {
+              width: 8,
+              length: "65%",
+              itemStyle: {
+                color: "auto",
+              },
+            },
+
+            axisLabel: {
+              color: "auto",
+              distance: 20,
+              fontSize: 20,
+            },
+            detail: {
+              valueAnimation: true,
+              formatter: "{value}",
+            },
+            data: [
+              {
+                value: 60,
+                name: "课堂类型",
+                title: {
+                  offsetCenter: [0, "80%"],
+                  fontSize: 30,
+                },
+              },
+            ],
+          },
+        ],
+      },
+      lineOption: {
+        title: {
+          text: "课堂时间",
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: ["课堂时长", "麻吉星时长"],
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        toolbox: {
+          // feature: {
+          //   saveAsImage: {},
+          // },
+        },
+        xAxis: {
+          type: "category",
+          data: ["05-25", "05-26", "05-27", "05-28", "05-29", "05-30", "05-31"],
+        },
+        yAxis: {
+          type: "value",
+          axisLabel: {
+            formatter: "{value}M",
+          },
+        },
+        series: [
+          {
+            name: "课堂时长",
+            type: "line",
+            data: [10, 20, 30, 11, 15, 16, 18],
+          },
+          {
+            name: "麻吉星时长",
+            type: "line",
+            data: [22, 16, 18, 15, 19, 28, 17],
+          },
+        ],
+      },
+      barOption: {
+        title: {
+          text: "任教班级",
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {},
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: ["中山五年5班", "中山五年5班"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            name: "图片",
+            type: "bar",
+            data: [220, 150],
+          },
+          {
+            name: "视频",
+            type: "bar",
+            data: [120, 132],
+          },
+          {
+            name: "互动",
+            type: "bar",
+            data: [110, 132],
+          },
+          {
+            name: "投票",
+            type: "bar",
+
+            data: [120, 132],
+          },
+          {
+            name: "挑战",
+            type: "bar",
+            data: [221, 110],
+          },
+          {
+            name: "评价",
+            type: "bar",
+            data: [120, 133],
+          },
+          {
+            name: "弃权",
+            type: "bar",
+            data: [105, 132],
+          },
+        ],
+      },
+      sunburstOption: {
+        //color:colors,
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          left: "50",
+          top: "center",
+        },
+        series: {
+          type: "sunburst",
+          data: [],
+          radius: [20, "90%"],
+          itemStyle: {
+            borderRadius: 7,
+            borderWidth: 2,
+          },
+          label: {
+            show: true,
+            color: "#fff",
+          },
+        },
+      },
+      scatterOption: {
+        xAxis: {
+          type: "category",
+          data: ["问题意识", "科学探究", "实践创新", "工程思维", "学习反思"],
+          splitLine: {
+            show: true,
+          },
+          axisLine: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "value",
+          minInterval: 1,
+          max: 5,
+          axisLine: {
+            show: false,
+          },
+        },
+        grid: {
+          left: 100,
+          bottom: 50,
+          right: 30,
+          top: 70,
+        },
+        legend: {
+          color: "rgb(222,126,62)",
+          left:'right',
+          top:'0%'
+        },
+        series: [
+          {
+            name: "学生百分数(单位：%)",
+            type: "scatter",
+            symbolSize: function (val) {
+              return val[2] * 1;
+            },
+            color: "rgb(222,126,62,.5)",
+            data: [[1, 2, 50]],
+            label: {
+              color: "rgb(222,126,62)",
+              show: true,
+              position: "inside",
+              fontSize: 16,
+              formatter: function (a, b, c) {
+                return a.data[2];
+              },
+            },
+            animationDelay: function (idx) {
+              return idx * 5;
+            },
+          },
+        ],
+      },
     };
   },
   methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row";
+      } else {
+        return "";
+      }
+    },
     getData() {
       let params = {
         cid: this.courseId,
@@ -107,6 +516,239 @@ export default {
           console.error(err);
         });
     },
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#gauge_canvas")
+        );
+        this.gaugeOption.series[0].data[0].value = this.randomNum(10, 100);
+        const chartObj2 = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#line_canvas")
+        );
+        var _array1 = [];
+        var _array2 = [];
+        for (let index = 0; index < 7; index++) {
+          _array1.push(this.randomNum(40, 50));
+          _array2.push(this.randomNum(40, 50));
+        }
+        this.lineOption.series[0].data = _array1;
+        this.lineOption.series[1].data = _array2;
+        const chartObj3 = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#bar_canvas")
+        );
+        var _arraybar1 = [];
+        var _arraybar2 = [];
+        var _arraybar3 = [];
+        var _arraybar4 = [];
+        var _arraybar5 = [];
+        var _arraybar6 = [];
+        var _arraybar7 = [];
+        for (let index = 0; index < 7; index++) {
+          _arraybar1.push(this.randomNum(20, 70));
+          _arraybar2.push(this.randomNum(20, 70));
+          _arraybar3.push(this.randomNum(20, 70));
+          _arraybar4.push(this.randomNum(20, 70));
+          _arraybar5.push(this.randomNum(20, 70));
+          _arraybar6.push(this.randomNum(20, 70));
+          _arraybar7.push(this.randomNum(20, 70));
+        }
+        this.barOption.series[0].data = _arraybar1;
+        this.barOption.series[1].data = _arraybar2;
+        this.barOption.series[2].data = _arraybar3;
+        this.barOption.series[3].data = _arraybar4;
+        this.barOption.series[4].data = _arraybar5;
+        this.barOption.series[5].data = _arraybar6;
+        this.barOption.series[6].data = _arraybar7;
+        const chartObj4 = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#sunburst_canvas")
+        );
+        this.sunburstOption.series.data = [
+          {
+            name: "学习反思能力",
+            value: 15,
+            children: [
+              {
+                name: "终生学习",
+                value: this.randomNum(1, 5),
+              },
+              {
+                name: "自我进步",
+                value: this.randomNum(1, 5),
+              },
+              {
+                name: "自我反思",
+                value: this.randomNum(1, 5),
+              },
+            ],
+          },
+          {
+            name: "工程思维能力",
+            value: 15,
+            children: [
+              {
+                name: "工程思维能力",
+                value: this.randomNum(1, 15),
+              },
+            ],
+          },
+          {
+            name: "实践创新能力",
+            value: 15,
+            children: [
+              {
+                name: "实践创新能力",
+                value: this.randomNum(5, 15),
+              },
+            ],
+          },
+          {
+            name: "科学探究能力",
+            value: 15,
+            children: [
+              {
+                name: "科学探究能力",
+                value: this.randomNum(5, 15),
+              },
+            ],
+          },
+          {
+            name: "问题意识",
+            value: 15,
+            children: [
+              {
+                name: "问题意识",
+                value: this.randomNum(5, 15),
+              },
+            ],
+          },
+        ];
+        const chartObj5 = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#scatter_canvas")
+        );
+        var _arrayScatter = [];
+        for (var i = 0; i < 5; i++) {
+          for (var j = 1; j < 6; j++) {
+            var x = i;
+            var y = j;
+            var z = this.randomNum(0, 100);
+            _arrayScatter.push([x, y, z]);
+          }
+        }
+        this.scatterOption.series[0].data = _arrayScatter;
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj2 = chartObj2;
+        this.chartObj3 = chartObj3;
+        this.chartObj4 = chartObj4;
+        this.chartObj5 = chartObj5;
+        this.chartObj.setOption(this.gaugeOption);
+        this.chartObj2.setOption(this.lineOption);
+        this.chartObj3.setOption(this.barOption);
+        this.chartObj4.setOption(this.sunburstOption);
+        this.chartObj5.setOption(this.scatterOption);
+        this.tableData = this.tableData.sort(function () {
+          return Math.random() - 0.5;
+        });
+      });
+    },
+    randomNum(minNum, maxNum) {
+      switch (arguments.length) {
+        case 1:
+          return parseInt(Math.random() * minNum + 1, 10);
+          break;
+        case 2:
+          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
+          break;
+        default:
+          return 0;
+          break;
+      }
+    },
+    setType(type) {
+      this.type = type;
+      this.sunburstOption.series.data = [
+        {
+          name: "学习反思能力",
+          value: 15,
+          children: [
+            {
+              name: "终生学习",
+              value: this.randomNum(1, 5),
+            },
+            {
+              name: "自我进步",
+              value: this.randomNum(1, 5),
+            },
+            {
+              name: "自我反思",
+              value: this.randomNum(1, 5),
+            },
+          ],
+        },
+        {
+          name: "工程思维能力",
+          value: 15,
+          children: [
+            {
+              name: "工程思维能力",
+              value: this.randomNum(5, 15),
+            },
+          ],
+        },
+        {
+          name: "实践创新能力",
+          value: 15,
+          children: [
+            {
+              name: "实践创新能力",
+              value: this.randomNum(5, 15),
+            },
+          ],
+        },
+        {
+          name: "科学探究能力",
+          value: 15,
+          children: [
+            {
+              name: "科学探究能力",
+              value: this.randomNum(5, 15),
+            },
+          ],
+        },
+        {
+          name: "问题意识",
+          value: 15,
+          children: [
+            {
+              name: "问题意识",
+              value: this.randomNum(5, 15),
+            },
+          ],
+        },
+      ];
+      var _arrayScatter = [];
+      for (var i = 0; i < 5; i++) {
+        for (var j = 1; j < 6; j++) {
+          var x = i;
+          var y = j;
+          var z = this.randomNum(1, 100);
+          _arrayScatter.push([x, y, z]);
+        }
+      }
+      this.scatterOption.series[0].data = _arrayScatter;
+      this.chartObj4.setOption(this.sunburstOption);
+      this.chartObj5.setOption(this.scatterOption);
+    },
   },
   watch: {
     // 使用监听的方式，监听数据的变化
@@ -146,6 +788,7 @@ export default {
     });
     this.tools = Array.from(new Set(this.tools)).sort();
     this.getData();
+    this.setChart();
   },
 };
 </script>
@@ -196,4 +839,78 @@ export default {
   border-bottom: 2px solid rgb(30, 146, 255);
   color: rgb(30, 146, 255);
 }
+
+.sd_module_content {
+  width: calc(50% / 2);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.sd_module_content:nth-child(1) .sd_module_children:nth-child(2) {
+  background: rgb(244, 132, 101);
+}
+.sd_module_content:nth-child(1) .sd_module_children:nth-child(3) {
+  background: rgb(99, 205, 156);
+}
+.sd_module_content:nth-child(3) .sd_module_children:nth-child(1) {
+  background: rgb(253, 183, 184);
+}
+.sd_module_content:nth-child(3) .sd_module_children:nth-child(2) {
+  background: rgb(60, 174, 254);
+}
+.sd_module_content:nth-child(3) .sd_module_children:nth-child(3) {
+  background: rgb(61, 223, 234);
+}
+.sd_module_children {
+  width: 100%;
+  height: 130px;
+  position: relative;
+  border-radius: 5px;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.sd_module_children + .sd_module_children {
+  margin-top: 20px;
+}
+.sd_module_children .s {
+  position: absolute;
+  font-size: 16px;
+  top: 10px;
+  left: 10px;
+}
+.sd_module_children .s2 span {
+  font-size: 45px;
+  margin-right: 3px;
+}
+
+.wd_class_body {
+  background: rgb(242, 242, 242);
+  padding: 20px 0;
+  border-radius: 5px;
+}
+.wd_module {
+  display: flex;
+  justify-content: space-between;
+  width: 95%;
+  margin: 0 auto;
+}
+
+.wd_bottom {
+  display: flex;
+  justify-content: space-between;
+  height: 500px;
+  margin: 20px 0 0 0;
+  width: 95%;
+  margin: 20px auto 0;
+}
+
+.wd_bottom .bdiv {
+  width: 48%;
+}
+.el-table >>> .even_row {
+  background-color: #f1f1f1;
+}
 </style>