data

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-	<div id="app" :class="{appNoWidth:$route.path == '/data' || $route.path == '/note'}">
+	<div id="app" :class="{appNoWidth:$route.path == '/data' || $route.path == '/note' || $route.path == '/works'}">
 		<!-- <div class="app_head" :class="{stuWidth:$route.path == '/student'}"> -->
 		<!-- <div class="logo" @click="goTo('/course')"></div>
       <span style="margin-left: 10px; color: #fff; font-weight: 600" @click="goTo('/course')"

src/components/pages/components/data/problelmData.vue

@@ -3,9 +3,13 @@
     <div class="title">
       <span>问答数量</span>
     </div>
-    <div style="width:100%">
+    <div style="width: 100%">
       <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
-      <div id="charts_canvas" class="echart" style="width: 100%; height: 100%;margin:0 0 0 1rem"></div>
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%; margin: 0 0 0 1rem"
+      ></div>
     </div>
   </div>
 </template>
@@ -21,7 +25,7 @@ export default {
         sdata: [],
       },
       option: {
-          tooltip: {
+        tooltip: {
           trigger: "item",
         },
         grid: {
@@ -43,8 +47,10 @@ export default {
           type: "category",
           data: [],
           inverse: true,
+          offset: -10,
           axisLabel: {
             inside: true,
+            left: 10,
             textStyle: {
               color: "#000",
             },
@@ -103,7 +109,7 @@ export default {
     },
   },
   watch: {
-    chapters(val) {
+    problemJson(val) {
       this.ooption = {
         xdata: [],
         sdata: [],
@@ -133,6 +139,12 @@ export default {
       this.ooption.sdata[item.stage]++;
     });
     this.setChart(this.ooption);
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
   },
 };
 </script>
@@ -143,15 +155,16 @@ export default {
   display: flex;
   position: relative;
   border-radius: 5px;
-  border: 1px solid #eee;
+  /* border: 1px solid #eee; */
   margin: 10px auto;
   box-sizing: border-box;
   padding: 10px;
   width: 95%;
+  background: #fff;
 }
 .data_body .title {
   position: absolute;
-  top: 10px;
-  left: 10px;
+  top: 20px;
+  left: 20px;
 }
 </style>

src/components/pages/components/data/scoreData.vue

@@ -3,9 +3,13 @@
     <div class="title">
       <span>量规评分</span>
     </div>
-    <div style="width:100%">
+    <div style="width: 100%">
       <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
-      <div id="charts_canvas" class="echart" style="width: 100%; height: 100%;margin:0 0 0 1rem"></div>
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%; margin: 0 0 0 1rem"
+      ></div>
     </div>
   </div>
 </template>
@@ -119,6 +123,12 @@ export default {
       }
     });
     this.setChart(this.ooption);
+    var _this = this;
+     window.addEventListener('resize', () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    })
   },
 };
 </script>
@@ -129,15 +139,16 @@ export default {
   display: flex;
   position: relative;
   border-radius: 5px;
-  border: 1px solid #eee;
+  /* border: 1px solid #eee; */
   margin: 10px auto;
   box-sizing: border-box;
   padding: 10px;
   width: 95%;
+  background: #fff;
 }
 .data_body .title {
   position: absolute;
-  top: 10px;
-  left: 10px;
+  top: 20px;
+  left: 20px;
 }
 </style>

src/components/pages/components/data/toolsData.vue

@@ -136,6 +136,12 @@ export default {
     });
     console.log(this.ooption);
     this.setChart(this.ooption);
+    var _this = this;
+     window.addEventListener('resize', () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    })
   },
 };
 </script>
@@ -146,15 +152,16 @@ export default {
   display: flex;
   position: relative;
   border-radius: 5px;
-  border: 1px solid #eee;
+  /* border: 1px solid #eee; */
   margin: 10px auto;
   box-sizing: border-box;
   padding: 10px;
   width: 95%;
+  background: #fff;
 }
 .data_body .title {
   position: absolute;
-  top: 10px;
-  left: 10px;
+  top: 20px;
+  left: 20px;
 }
 </style>

src/components/pages/components/data/workData.vue

@@ -3,9 +3,13 @@
     <div class="title">
       <span>作业数量</span>
     </div>
-    <div style="width:100%">
+    <div style="width: 100%">
       <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
-      <div id="charts_canvas" class="echart" style="width: 100%; height: 100%;margin:0 0 0 1rem"></div>
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%; margin: 0 0 0 1rem"
+      ></div>
     </div>
   </div>
 </template>
@@ -21,7 +25,7 @@ export default {
         sdata: [],
       },
       option: {
-          tooltip: {
+        tooltip: {
           trigger: "item",
         },
         grid: {
@@ -113,7 +117,7 @@ export default {
     },
   },
   watch: {
-    chapters(val) {
+    workJson(val) {
       this.ooption = {
         xdata: [],
         sdata: [],
@@ -125,6 +129,7 @@ export default {
       this.workJson.forEach((item, index) => {
         this.ooption.sdata[item.stage]++;
       });
+      console.log(this.ooption);
       if (!this.chartObj) {
         this.setChart(this.ooption);
       } else {
@@ -142,7 +147,14 @@ export default {
     this.workJson.forEach((item, index) => {
       this.ooption.sdata[item.stage]++;
     });
+    console.log(this.ooption);
     this.setChart(this.ooption);
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
   },
 };
 </script>
@@ -153,15 +165,16 @@ export default {
   display: flex;
   position: relative;
   border-radius: 5px;
-  border: 1px solid #eee;
+  /* border: 1px solid #eee; */
   margin: 10px auto;
   box-sizing: border-box;
   padding: 10px;
   width: 95%;
+  background: #fff;
 }
 .data_body .title {
   position: absolute;
-  top: 10px;
-  left: 10px;
+  top: 20px;
+  left: 20px;
 }
 </style>

src/components/pages/components/workData.vue

@@ -1,19 +1,24 @@
 <template>
   <div>
     <div class="cp_title">
-      <span>{{this.dataJson.title}}</span>
+      <span>{{ this.dataJson.title }}</span>
     </div>
-    <div>
-      <WorkData :workJson="workJson" :chapters="chapters"></WorkData>
-    </div>
-    <div>
-      <ProblelmData :problemJson="problemJson" :chapters="chapters"></ProblelmData>
-    </div>
-    <div>
-      <ToolsData :toolsJson="toolsJson" :tools="tools"></ToolsData>
-    </div>
-    <div>
-      <ScoreData :scoreJson="scoreJson"></ScoreData>
+    <div class="data_body">
+      <div class="data_c">
+        <WorkData :workJson="workJson" :chapters="chapters"></WorkData>
+      </div>
+      <div class="data_c">
+        <ProblelmData
+          :problemJson="problemJson"
+          :chapters="chapters"
+        ></ProblelmData>
+      </div>
+      <div class="data_c">
+        <ToolsData :toolsJson="toolsJson" :tools="tools"></ToolsData>
+      </div>
+      <div class="data_c">
+        <ScoreData :scoreJson="scoreJson"></ScoreData>
+      </div>
     </div>
   </div>
 </template>
@@ -128,4 +133,11 @@ export default {
   margin: 0 auto;
   width: 95%;
 }
+.data_body {
+  display: flex;
+  flex-wrap: wrap;
+}
+.data_body .data_c {
+  width: 50%;
+}
 </style>

src/components/pages/works.vue

@@ -1,48 +1,87 @@
 <template>
-  <div class="pb_content" style="background: unset">
+  <div
+    class="pb_content"
+    style="
+      background: unset;
+      overflow: auto;
+      padding: 20px;
+      margin: 0;
+      box-sizing: border-box;
+    "
+  >
     <div
-      class="pb_content_body"
       style="
-        background: #fff;
-        padding: 0px 25px;
-        box-sizing: border-box;
-        border-radius: 5px;
+        position: absolute;
+        width: 95%;
+        top: 0;
+        height: 100%;
+        overflow: auto;
+        left: 50%;
+        transform: translateX(-50%);
       "
     >
-      <div class="pb_head">
-        <span>评价管理</span>
-        <!-- <span>备注：教师可以根据课程、班级条件筛选学生并查看该学生信息</span> -->
-      </div>
-      <div class="student_head">
-        <div class="student_search">
-          <div>项目筛选</div>
-          <el-select v-model="groupA" @change="search">
-            <el-option value="0" label="我的课程"></el-option>
-            <el-option value="1" label="他人课程"></el-option>
-          </el-select>
-          <el-input v-model="cn" placeholder="筛选项目名称" @input="search"></el-input>
+      <div
+        class="pb_content_body"
+        style="
+          background: #fff;
+          padding: 0px 25px;
+          box-sizing: border-box;
+          border-radius: 5px;
+        "
+      >
+        <div class="pb_head">
+          <span>评价管理</span>
+          <!-- <span>备注：教师可以根据课程、班级条件筛选学生并查看该学生信息</span> -->
+        </div>
+        <div class="student_head">
+          <div class="student_search">
+            <div>项目筛选</div>
+            <el-select v-model="groupA" @change="search">
+              <el-option value="0" label="我的课程"></el-option>
+              <el-option value="1" label="他人课程"></el-option>
+            </el-select>
+            <el-input
+              v-model="cn"
+              placeholder="筛选项目名称"
+              @input="search"
+            ></el-input>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="pb_content_body">
-      <div class="student_table">
-        <el-table
-          ref="table"
-          :data="tableData1"
-          border
-          :height="tableHeight"
-          :fit="true"
-          v-loading="isLoading"
-          style="width: 100%"
-          :header-cell-style="{ background: '#f1f1f1', fontSize: '17px' }"
-          :row-class-name="tableRowClassName"
-        >
-          <el-table-column prop="title" label="项目" min-width="30" align="center"></el-table-column>
-          <el-table-column prop="uname" label="创建人" min-width="30" align="center"></el-table-column>
-          <el-table-column prop="time" label="时间" min-width="20" align="center"></el-table-column>
-          <el-table-column label="操作" min-width="30">
-            <template slot-scope="scope">
-              <el-button
+      <div class="pb_content_body">
+        <div class="student_table">
+          <el-table
+            ref="table"
+            :data="tableData1"
+            border
+            :height="tableHeight"
+            :fit="true"
+            v-loading="isLoading"
+            style="width: 100%"
+            :header-cell-style="{ background: '#f1f1f1', fontSize: '17px' }"
+            :row-class-name="tableRowClassName"
+          >
+            <el-table-column
+              prop="title"
+              label="项目"
+              min-width="30"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="uname"
+              label="创建人"
+              min-width="30"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="time"
+              label="时间"
+              min-width="20"
+              align="center"
+            ></el-table-column>
+            <el-table-column label="操作" min-width="30">
+              <template slot-scope="scope">
+                <!-- <el-button
                 type="primary"
                 size="small"
                 @click="
@@ -55,24 +94,31 @@
                       oid
                   )
                 "
-              >查看学生</el-button>
-              <el-button type="primary" size="small" @click="getWorkData(scope.row)">生成报告</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-      <div class="student_page">
-        <el-pagination
-          background
-          layout="prev, pager, next"
-          :page-size="10"
-          :total="total"
-          v-if="page"
-          @current-change="handleCurrentChange"
-        ></el-pagination>
+              >查看学生</el-button> -->
+                <!-- <el-button type="primary" size="small" @click="getWorkData(scope.row)">生成报告</el-button> -->
+                <el-button
+                  type="primary"
+                  size="small"
+                  @click="getWorkData(scope.row)"
+                  >查看课程</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="student_page">
+          <el-pagination
+            background
+            layout="prev, pager, next"
+            :page-size="10"
+            :total="total"
+            v-if="page"
+            @current-change="handleCurrentChange"
+          ></el-pagination>
+        </div>
       </div>
     </div>
-    <el-dialog
+    <!-- <el-dialog
       title="查看报告"
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -88,7 +134,30 @@
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">关 闭</el-button>
       </span>
-    </el-dialog>
+    </el-dialog> -->
+    <WorkDate
+      :dataJson="dataJson"
+      v-if="dialogVisible"
+      class="workdates"
+    ></WorkDate>
+    <div class="cancelbox" v-if="dialogVisible">
+      <el-button @click="cancel" type="primary" size="small">返回</el-button>
+      <el-button
+        type="primary"
+        size="small"
+        @click="
+          goTo(
+            '/worksDetail?cid=' +
+              dataJson.courseId +
+              '&userid=' +
+              userid +
+              '&oid=' +
+              oid
+          )
+        "
+        >查看作业</el-button
+      >
+    </div>
   </div>
 </template>
 
@@ -204,6 +273,10 @@ export default {
       this.dataJson = res;
       this.dialogVisible = true;
     },
+    cancel() {
+      this.dataJson = "";
+      this.dialogVisible = false;
+    },
   },
   created() {
     this.page = 1;
@@ -282,4 +355,29 @@ export default {
   height: 570px;
   overflow: auto;
 }
+
+.workdates {
+  height: 100%;
+  position: absolute;
+  top: 0;
+  background: #f8f8f8;
+  overflow: auto;
+  z-index: 1;
+  width: 95%;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 20px;
+  box-sizing: border-box;
+}
+.cancelbox {
+  position: absolute;
+  z-index: 2;
+  left: 50%;
+  width: 95%;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 90px 0px 0px;
+  box-sizing: border-box;
+}
 </style>