data

src/components/pages/components/workData.vue

@@ -1,17 +1,20 @@
 <template>
   <div>
     <div class="cp_title">
-      <span>{{ this.dataJson.title}}</span>
+      <span>{{ this.dataJson.title }}</span>
     </div>
     <div class="cp_title">
-      <span>{{ '教师姓名:'+this.dataJson.uname }}</span>
+      <span>{{ "教师姓名:" + this.dataJson.uname }}</span>
     </div>
     <div class="data_body" v-if="false">
       <div class="data_c">
         <WorkData :workJson="workJson" :chapters="chapters"></WorkData>
       </div>
       <div class="data_c">
-        <ProblelmData :problemJson="problemJson" :chapters="chapters"></ProblelmData>
+        <ProblelmData
+          :problemJson="problemJson"
+          :chapters="chapters"
+        ></ProblelmData>
       </div>
       <div class="data_c">
         <ToolsData :toolsJson="toolsJson" :tools="tools"></ToolsData>
@@ -27,50 +30,79 @@
           <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"
+              style="
+                font-size: 25px;
+                padding: 0 25px;
+                box-sizing: border-box;
+                text-align: center;
+              "
             >
-              <span>课程人数:共100人,已完成人数{{randomNum(50,100)}}人</span>
+              <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>{{ 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>{{ 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 style="width: 45%; position: relative">
+            <div
+              id="gauge_canvas"
+              class="echart"
+              style="width: 100%; height: 100%"
+            ></div>
+            <div
+              style="
+                position: absolute;
+                bottom: 25px;
+                display: flex;
+                justify-content: space-between;
+                font-size: 20px;
+                width: 100%;
+                padding: 0 100px;
+                box-sizing: border-box;
+              "
+            >
+              <span>教师为中心</span>
+              <span>学生为中心</span>
+            </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>{{ 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>{{ 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>{{ randomNum(10, 20) }}</span
+                >分 <span>{{ randomNum(10, 59) }}</span
+                >秒
               </span>
               <span>已经击败99%教师</span>
             </div>
@@ -78,10 +110,18 @@
         </div>
         <div class="wd_bottom">
           <div class="bdiv">
-            <div id="line_canvas" class="echart" style="width: 100%; height: 100%;"></div>
+            <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
+              id="bar_canvas"
+              class="echart"
+              style="width: 100%; height: 100%"
+            ></div>
           </div>
         </div>
       </div>
@@ -89,23 +129,35 @@
     </div>
     <div class="sd_class">
       <div class="sd_tTitle">班级学生能力分析</div>
-      <div style="background:#fff;padding:10px 0">
+      <div style="background: #fff; padding: 10px 0">
         <div class="sd_person_button">
-          <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>
+          <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">
-          <div style="width:50%;height:500px">
-            <div id="sunburst_canvas" class="echart" style="width: 100%; height: 100%;"></div>
+        <div style="display: flex; flex-wrap: wrap">
+          <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 style="width: 50%; height: 500px">
+            <div
+              id="scatter_canvas"
+              class="echart"
+              style="width: 100%; height: 100%"
+            ></div>
           </div>
-          <div style="width:100%">
+          <div style="width: 100%">
             <WorksDetail2 :cid="cid" :uid="uid" :ooid="ooid"></WorksDetail2>
             <!-- <el-table
               ref="table"
@@ -145,7 +197,7 @@ import ScoreData from "./data/scoreData";
 import WorksDetail2 from "./worksDetail2";
 
 export default {
-  props: ["dataJson",'cid','uid','ooid'],
+  props: ["dataJson", "cid", "uid", "ooid"],
   components: {
     WorkData,
     ProblelmData,
@@ -431,9 +483,11 @@ export default {
           axisLine: {
             show: false,
           },
+          name: "能力指标",
         },
         yAxis: {
           type: "value",
+          name: "分值",
           minInterval: 1,
           max: 5,
           axisLine: {
@@ -443,7 +497,7 @@ export default {
         grid: {
           left: 100,
           bottom: 50,
-          right: 30,
+          right: 100,
           top: 70,
         },
         legend: {
@@ -456,7 +510,7 @@ export default {
             name: "学生百分数(单位：%)",
             type: "scatter",
             symbolSize: function (val) {
-              return val[2] * 1;
+              return val[2] * 1.5;
             },
             color: "rgb(222,126,62,.5)",
             data: [[1, 2, 50]],
@@ -638,12 +692,31 @@ export default {
           //劳动课程
           this.$el.querySelector("#scatter_canvas")
         );
+        var scatterArray = [];
+        for (var i = 0; i < 5; i++) {
+          scatterArray[i] = [];
+          var a = 0;
+          for (var j = 0; j < 5; j++) {
+            var b = this.randomNum(0, 20);
+            a += b;
+            if (j == 4) {
+              scatterArray[i].push(100 - a);
+              scatterArray[i].sort(function () {
+                return Math.random() - 0.5;
+              });
+            } else {
+              scatterArray[i].push(b);
+            }
+          }
+        }
+
         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);
+            // var z = this.randomNum(0, 100);
+            var z = scatterArray[i][j - 1];
             _arrayScatter.push([x, y, z]);
           }
         }
@@ -739,12 +812,31 @@ export default {
           ],
         },
       ];
+      var scatterArray = [];
+      for (var i = 0; i < 5; i++) {
+        scatterArray[i] = [];
+        var a = 0;
+        for (var j = 0; j < 5; j++) {
+          var b = this.randomNum(0, 20);
+          a += b;
+          if (j == 4) {
+            scatterArray[i].push(100 - a);
+            scatterArray[i].sort(function () {
+              return Math.random() - 0.5;
+            });
+          } else {
+            scatterArray[i].push(b);
+          }
+        }
+      }
+
       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);
+          // var z = this.randomNum(0, 100);
+          var z = scatterArray[i][j - 1];
           _arrayScatter.push([x, y, z]);
         }
       }
@@ -849,6 +941,9 @@ export default {
   flex-direction: column;
   align-items: center;
 }
+.sd_module_content:nth-child(1) .sd_module_children:nth-child(1) {
+  background: rgb(68, 228, 116);
+}
 .sd_module_content:nth-child(1) .sd_module_children:nth-child(2) {
   background: rgb(244, 132, 101);
 }