update

src/components/GM/studyStudentGM.vue

@@ -6148,6 +6148,7 @@ export default {
       const _function = (screenStream) => {
         this.addStreamStopListener(screenStream, () => {
           console.log("流停止监听");
+          this.stopRecording();
           this.$emit("streamStop", {})
           // this.stopRecording();
         });

src/components/cameraDemo.vue

@@ -58,8 +58,8 @@ export default {
 			let _function = (screenStream) => {
 				this.addStreamStopListener(screenStream, () => {
 					console.log("流停止监听");
+					this.stopRecording();
 					this.$emit("streamStop", {})
-					// this.stopRecording();
 				});
 				var options = {
 					type: 'video',
@@ -69,7 +69,6 @@ export default {
 					ignoreMutedMedia: false
 				};
 				// this.video.srcObject = screenStream;
-				debugger
 				this.recorder = RecordRTC(screenStream, options);
 				this.recorder.startRecording();
 				this.recorder.screen = screenStream;
@@ -81,12 +80,12 @@ export default {
 				this.captureScreen(_function, true);
 				console.log('已点击允许,开启成功');
 			}).catch(err => {
-				if (err.code && err.code == 404) {
+				// if (err.code && err.code == 404) {
 				// 	console.log('浏览器不支持，请更换浏览器')
 				// } else {
 					this.captureScreen(_function, false);
 					console.log('请检查是否存在麦克风')
-				}
+				// }
 			})
 		},
 		/**

src/components/courseDetail.vue

@@ -90,7 +90,316 @@
               <div :title="item.dyName">{{ item.dyName }}</div>
               <div>{{ item.chapterInfo[0].taskJson.length }}个任务</div>
             </div>
-            <div v-if="tType == 1 || tType == 4">
+            <div v-if="(tType == 1 || tType == 4) && Object.keys(chaptersJson).length" class="detail">
+              <div class="statebox">
+                <div><span>全部阶段</span><span>{{ chaptersJson.state.stage }}</span></div>
+                <div><span>已进行</span><span>{{ chaptersJson.state.finish }}</span></div>
+                <div><span>未进行</span><span>{{ chaptersJson.state.learing }}</span></div>
+              </div>
+              <div class="progress">
+                <div v-for="(item, index) in chaptersJson.tool" :key="index">
+                  <div>第{{ index + 1 }}阶段 {{ chaptersJson.chapterState[index].isFinsh ? '已完成' : '进行中' }}</div>
+                  <div v-for="(item2, index2) in item" :key="index + '-' + index2">
+                    <div>任务{{ index2 + 1 }}</div>
+                    <div class="p_tool_box">
+                      <span v-for="(item3, index3) in item2" :key="index + '-' + index2 + '-' + index3" class="p_tool">
+
+                        <div v-if="item3.tool == 1">
+                          <img src="../assets/icon/secondToolList/whiteBoard.png" alt />
+                          <div>电子白板</div>
+                        </div>
+                        <div v-if="item3.tool == 3">
+                          <img src="../assets/icon/secondToolList/mindMapping.png" alt />
+                          <div>思维导图</div>
+                        </div>
+                        <div v-if="item3.tool == 6">
+                          <img src="../assets/icon/secondToolList/doc.png" alt />
+                          <div>协同文档</div>
+                        </div>
+                        <div v-if="item3.tool == 7">
+                          <img src="../assets/icon/secondToolList/mindNetwork.png" alt />
+                          <div>思维网格</div>
+                        </div>
+                        <div v-if="item3.tool == 8">
+                          <img src="../assets/icon/secondToolList/library.png" alt />
+                          <div>素材库</div>
+                        </div>
+                        <div v-if="item3.tool == 17">
+                          <img src="../assets/icon/secondToolList/library.png" alt />
+                          <div>学习资料</div>
+                        </div>
+                        <div v-if="item3.tool == 2">
+                          <img src="../assets/icon/secondToolList/note.png" alt />
+                          <div>便签</div>
+                        </div>
+                        <div v-if="item3.tool == 4">
+                          <img src="../assets/icon/thirdToolList/ask.png" alt />
+                          <div>问卷调查</div>
+                        </div>
+                        <div v-if="item3.tool == 45">
+                          <img src="../assets/icon/thirdToolList/choose.png" alt />
+                          <div>选择题</div>
+                        </div>
+                        <!-- <div v-if="item3.tool == 5">
+                            <img
+                              
+                              src="../assets/icon/thirdToolList/score.png"
+                              alt
+                            />
+                            <div >量规评分</div>
+                          </div> -->
+                        <div v-if="item3.tool == 10">
+                          <img src="../assets/icon/thirdToolList/time.png" alt />
+                          <div>倒计时</div>
+                        </div>
+                        <div v-if="item3.tool == 15">
+                          <img src="../assets/icon/thirdToolList/answer.png" alt />
+                          <div>问答工具</div>
+                        </div>
+                        <div v-if="item3.tool == 26">
+                          <img src="../assets/icon/thirdToolList/courseDesign.png" alt />
+                          <div>课程设计</div>
+                        </div>
+                        <div v-if="item3.tool == 18">
+                          <img src="../assets/icon/thirdToolList/trainPlatform.png" alt />
+                          <div>训练服务器</div>
+                        </div>
+                        <div v-if="item3.tool == 16">
+                          <img src="../assets/icon/thirdToolList/work.png" alt />
+                          <div>作业提交</div>
+                        </div>
+                        <div v-if="item3.tool == 21">
+                          <img src="../assets/icon/fourthToolList/program.png" alt />
+                          <div>编程平台</div>
+                        </div>
+                        <div v-if="item3.tool == 22">
+                          <img src="../assets/icon/fourthToolList/program.png" alt />
+                          <div>AI体验</div>
+                        </div>
+                        <div v-if="item3.tool == 23">
+                          <img src="../assets/icon/fourthToolList/program.png" alt />
+                          <div>Python</div>
+                        </div>
+                        <div v-if="item3.tool == 24">
+                          <img src="../assets/icon/fourthToolList/AIprogram.png" alt />
+                          <div>AI平台</div>
+                        </div>
+                        <div v-if="item3.tool == 25">
+                          <img src="../assets/icon/thirdToolList/evalua.png" alt />
+                          <div>目标管理</div>
+                        </div>
+                        <div v-if="item3.tool == 31">
+                          <img src="../assets/icon/secondToolList/networkPanel.png" alt />
+                          <div>数学画板</div>
+                        </div>
+                        <div v-if="item3.tool == 28">
+                          <img src="../assets/icon/secondToolList/translation.png" alt />
+                          <div>翻译</div>
+                        </div>
+                        <div v-if="item3.tool == 37">
+                          <img src="../assets/icon/secondToolList/mohe.png" alt />
+                          <div>魔盒识字</div>
+                        </div>
+                        <div v-if="item3.tool == 38">
+                          <img src="../assets/icon/secondToolList/24game.png" alt />
+                          <div>24点</div>
+                        </div>
+                        <div v-if="item3.tool == 39">
+                          <img src="../assets/icon/secondToolList/GeoGebra.png" alt />
+                          <div>GeoGebra</div>
+                        </div>
+                        <div v-if="item3.tool == 32">
+                          <img src="../assets/icon/thirdToolList/code.png" alt />
+                          <div>源码编辑</div>
+                        </div>
+                        <div v-if="item3.tool == 40">
+                          <img src="../assets/icon/secondToolList/eval.png" alt />
+                          <div>学生评价</div>
+                        </div>
+                        <div v-if="item3.tool == 41">
+                          <img src="../assets/icon/thirdToolList/select.png" alt />
+                          <div>选择填空</div>
+                        </div>
+                        <div v-if="item3.tool == 44">
+                          <img src="../assets/icon/thirdToolList/hanClass.png" alt />
+                          <div>汉字宫</div>
+                        </div>
+                        <div v-if="item3.tool == 47">
+                          <img src="../assets/icon/fourthToolList/conSentences.png" alt />
+                          <div>连词成句</div>
+                        </div>
+                        <div v-if="(item3.tool == 48)">
+                          <img src="../assets/icon/fourthToolList/conSentences.png" alt />
+                          <div>表格</div>
+                        </div>
+                        <div v-if="(item3.tool == 49)">
+                          <img src="../assets/icon/fourthToolList/group.png" alt />
+                          <div>学生分组</div>
+                        </div>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <!-- <div v-for="(item, index) in Object.keys(chaptersJson.time)" :key="index">
+                {{ '时间:' + item + '次数:' + chaptersJson.time[item] }}</div> -->
+              <div v-if="Object.keys(chaptersJson.time).length">
+                <Heatmap :Josn="chaptersJson.time" :num="chaptersJson.studentCount"></Heatmap>
+              </div>
+              <div>实施时间：{{ chaptersJson.startTime }}</div>
+              <div class="progress">
+                <div v-for="(item, index) in chaptersJson.work" :key="index">
+                  <h2>第{{ index + 1 }}阶段 {{ item.name }}</h2>
+                  <div v-for="(item2, index2) in item.chapter" :key="index + '-' + index2">
+                    <h3>任务{{ index2 + 1 }} {{ item2.name }}</h3>
+                    <div class="p_tool_box2">
+                      <span v-for="(item3, index3) in item2.task" :key="index + '-' + index2 + '-' + index3"
+                        class="p_tool2">
+                        <div>步骤{{ index3 + 1 }}</div>
+                        <div class="toolBigBox">
+                          <div class="toolbox">
+                            <div v-if="item3.tool == 1">
+                              <img src="../assets/icon/secondToolList/whiteBoard.png" alt />
+                              <div>电子白板</div>
+                            </div>
+                            <div v-if="item3.tool == 3">
+                              <img src="../assets/icon/secondToolList/mindMapping.png" alt />
+                              <div>思维导图</div>
+                            </div>
+                            <div v-if="item3.tool == 6">
+                              <img src="../assets/icon/secondToolList/doc.png" alt />
+                              <div>协同文档</div>
+                            </div>
+                            <div v-if="item3.tool == 7">
+                              <img src="../assets/icon/secondToolList/mindNetwork.png" alt />
+                              <div>思维网格</div>
+                            </div>
+                            <div v-if="item3.tool == 8">
+                              <img src="../assets/icon/secondToolList/library.png" alt />
+                              <div>素材库</div>
+                            </div>
+                            <div v-if="item3.tool == 17">
+                              <img src="../assets/icon/secondToolList/library.png" alt />
+                              <div>学习资料</div>
+                            </div>
+                            <div v-if="item3.tool == 2">
+                              <img src="../assets/icon/secondToolList/note.png" alt />
+                              <div>便签</div>
+                            </div>
+                            <div v-if="item3.tool == 4">
+                              <img src="../assets/icon/thirdToolList/ask.png" alt />
+                              <div>问卷调查</div>
+                            </div>
+                            <div v-if="item3.tool == 45">
+                              <img src="../assets/icon/thirdToolList/choose.png" alt />
+                              <div>选择题</div>
+                            </div>
+                            <div v-if="item3.tool == 10">
+                              <img src="../assets/icon/thirdToolList/time.png" alt />
+                              <div>倒计时</div>
+                            </div>
+                            <div v-if="item3.tool == 15">
+                              <img src="../assets/icon/thirdToolList/answer.png" alt />
+                              <div>问答工具</div>
+                            </div>
+                            <div v-if="item3.tool == 26">
+                              <img src="../assets/icon/thirdToolList/courseDesign.png" alt />
+                              <div>课程设计</div>
+                            </div>
+                            <div v-if="item3.tool == 18">
+                              <img src="../assets/icon/thirdToolList/trainPlatform.png" alt />
+                              <div>训练服务器</div>
+                            </div>
+                            <div v-if="item3.tool == 16">
+                              <img src="../assets/icon/thirdToolList/work.png" alt />
+                              <div>作业提交</div>
+                            </div>
+                            <div v-if="item3.tool == 21">
+                              <img src="../assets/icon/fourthToolList/program.png" alt />
+                              <div>编程平台</div>
+                            </div>
+                            <div v-if="item3.tool == 22">
+                              <img src="../assets/icon/fourthToolList/program.png" alt />
+                              <div>AI体验</div>
+                            </div>
+                            <div v-if="item3.tool == 23">
+                              <img src="../assets/icon/fourthToolList/program.png" alt />
+                              <div>Python</div>
+                            </div>
+                            <div v-if="item3.tool == 24">
+                              <img src="../assets/icon/fourthToolList/AIprogram.png" alt />
+                              <div>AI平台</div>
+                            </div>
+                            <div v-if="item3.tool == 25">
+                              <img src="../assets/icon/thirdToolList/evalua.png" alt />
+                              <div>目标管理</div>
+                            </div>
+                            <div v-if="item3.tool == 31">
+                              <img src="../assets/icon/secondToolList/networkPanel.png" alt />
+                              <div>数学画板</div>
+                            </div>
+                            <div v-if="item3.tool == 28">
+                              <img src="../assets/icon/secondToolList/translation.png" alt />
+                              <div>翻译</div>
+                            </div>
+                            <div v-if="item3.tool == 37">
+                              <img src="../assets/icon/secondToolList/mohe.png" alt />
+                              <div>魔盒识字</div>
+                            </div>
+                            <div v-if="item3.tool == 38">
+                              <img src="../assets/icon/secondToolList/24game.png" alt />
+                              <div>24点</div>
+                            </div>
+                            <div v-if="item3.tool == 39">
+                              <img src="../assets/icon/secondToolList/GeoGebra.png" alt />
+                              <div>GeoGebra</div>
+                            </div>
+                            <div v-if="item3.tool == 32">
+                              <img src="../assets/icon/thirdToolList/code.png" alt />
+                              <div>源码编辑</div>
+                            </div>
+                            <div v-if="item3.tool == 40">
+                              <img src="../assets/icon/secondToolList/eval.png" alt />
+                              <div>学生评价</div>
+                            </div>
+                            <div v-if="item3.tool == 41">
+                              <img src="../assets/icon/thirdToolList/select.png" alt />
+                              <div>选择填空</div>
+                            </div>
+                            <div v-if="item3.tool == 44">
+                              <img src="../assets/icon/thirdToolList/hanClass.png" alt />
+                              <div>汉字宫</div>
+                            </div>
+                            <div v-if="item3.tool == 47">
+                              <img src="../assets/icon/fourthToolList/conSentences.png" alt />
+                              <div>连词成句</div>
+                            </div>
+                            <div v-if="(item3.tool == 48)">
+                              <img src="../assets/icon/fourthToolList/conSentences.png" alt />
+                              <div>表格</div>
+                            </div>
+                            <div v-if="(item3.tool == 49)">
+                              <img src="../assets/icon/fourthToolList/group.png" alt />
+                              <div>学生分组</div>
+                            </div>
+                          </div>
+                          <div class="toolSta" v-if="item3.works.length">
+                            <!-- works:[],likeCount: 0, commentCount: 0, score: 0, isScore: 0  -->
+                            <span>作业数量:{{ item3.works.length }}</span>
+                            <span v-if="chaptersJson.studentCount">完成率:{{ ((item3.works.length /
+                                chaptersJson.studentCount) * 100).toFixed(2) + '%'
+                            }}</span>
+                            <span>点赞数量:{{ item3.likeCount }}</span>
+                            <span>评论数量:{{ item3.commentCount }}</span>
+                            <span v-if="item3.isScore">作业评价量:{{ item3.isScore }}</span>
+                            <span v-if="item3.isScore">评价平均分:{{ (item3.score / item3.isScore).toFixed(2) }}</span>
+                          </div>
+                        </div>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -126,7 +435,11 @@
 </template>
 
 <script>
+import Heatmap from './tools/heatmap.vue'
 export default {
+  components: {
+    Heatmap,
+  },
   data() {
     return {
       choose: 0,
@@ -293,8 +606,10 @@ export default {
           }
 
 
-          // let _chapters = JSON.parse(a[0].chapters)
-          // let _works = res.data[3];
+          let _chapters = JSON.parse(a[0].chapters)
+          let _works = res.data[3];
+          let _sCont = res.data[4];
+          let _comment = res.data[5];
 
           // let _chaptersJson = {
           //   chapterState: _chapters,
@@ -305,12 +620,24 @@ export default {
           //   },
           //   date: _works[0].time,
           //   tool: [],
-          //   chapter: []
+          //   chapter: [],
+          //   time: {},
+          //   startTime: _works.length ? _works[0].time : '',
+          //   work: [],
+          //   studentCount: _sCont[0].usercount
           // }
+          // let timeAarry = []
+          // for (var j = 0; j < _works.length; j++) {
+          //   timeAarry.push(_works[j].vtime)
+          // }
+          // timeAarry.forEach(item => {
+          //   _chaptersJson.time[item] = (_chaptersJson.time[item] + 1) || 1
+          // })
           // for (var i = 0; i < _chapters.length; i++) {
           //   _chaptersJson.chapterState[i].isFinsh = false;
           //   _chaptersJson.tool[i] = []
           //   _chaptersJson.chapter[i] = []
+          //   _chaptersJson.work[i] = { name: _chapters[i].dyName, chapter: [] }
           //   for (var j = 0; j < _works.length; j++) {
           //     if (i == _works[j].stage) {
           //       _chaptersJson.chapterState[i].isFinsh = true;
@@ -322,8 +649,30 @@ export default {
           //   for (var z = 0; z < el.length; z++) {
           //     _chaptersJson.tool[i][z] = []
           //     _chaptersJson.chapter[i][z] = []
+          //     _chaptersJson.work[i].chapter[z] = { name: el[z].task, task: [] }
           //     let tools = el[z].toolChoose
           //     for (var k = 0; k < tools.length; k++) {
+          //       _chaptersJson.work[i].chapter[z].task[k] = { tool: tools[k].tool[0], works: [], likeCount: 0, commentCount: 0, score: 0, isScore: 0 }
+          //       for (var j = 0; j < _works.length; j++) {
+          //         if (i == _works[j].stage && z == _works[j].task && k == _works[j].tool) {
+          //           _chaptersJson.work[i].chapter[z].task[k].works.push(_works[j])
+          //           if (_works[j].score) {
+          //             _chaptersJson.work[i].chapter[z].task[k].score += JSON.parse(_works[j].score).wScore
+          //             _chaptersJson.work[i].chapter[z].task[k].isScore++
+          //           }
+          //         }
+          //       }
+          //       for (var j = 0; j < _comment.length; j++) {
+          //         if (i == _comment[j].stage && z == _comment[j].task && k == _comment[j].tool) {
+          //           if (_comment[j].cType == 1) {
+          //             _chaptersJson.work[i].chapter[z].task[k].likeCount++
+          //           }
+
+          //           if (_comment[j].cType == 2) {
+          //             _chaptersJson.work[i].chapter[z].task[k].commentCount++
+          //           }
+          //         }
+          //       }
           //       // if (_chaptersJson.chapter[i][z].indexOf(tools[k].tool[0]) == -1) {
           //       //   _chaptersJson.tool[i][z].push(tools[k].tool[0])
           //       // }
@@ -758,4 +1107,105 @@ export default {
   margin-left: 40px;
   word-break: break-all;
 }
+
+.detail {
+  width: 100%;
+  padding: 15px;
+}
+
+.statebox {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.statebox div {
+  border: 1px solid #205cc6;
+  padding: 15px 20px;
+}
+
+.statebox div+div {
+  margin-left: 20px;
+}
+
+.statebox div span {
+  font-size: 18px;
+}
+
+.statebox div span+span {
+  margin-left: 10px;
+}
+
+
+.p_tool_box {
+  display: flex;
+  flex-wrap: wrap;
+  background: #205cc6;
+  color: #fff;
+  padding: 10px 15px;
+}
+
+.p_tool {
+  display: flex;
+  margin-right: 20px;
+}
+
+.p_tool>div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.p_tool>div img {
+  width: 30px;
+  height: 30px;
+}
+
+.p_tool>div>div {
+  margin-top: 5px;
+}
+
+.p_tool_box2 {
+  background: #205cc6;
+  color: #fff;
+  padding: 10px 15px;
+}
+
+
+.p_tool2 {
+  margin-right: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-bottom: 10px;
+}
+
+.p_tool2>div:nth-child(1) {
+  margin-bottom: 10px;
+}
+
+.toolBigBox {
+  display: flex;
+}
+
+.toolSta {
+  display: flex;
+  flex-direction: column;
+}
+
+.p_tool2 .toolbox>div:nth-child(1) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100px;
+}
+
+.p_tool2 .toolbox>div:nth-child(1) img {
+  width: 30px;
+  height: 30px;
+}
+
+.p_tool2 .toolbox>div:nth-child(1)>div {
+  margin-top: 5px;
+}
 </style>

src/components/studyStudent.vue

@@ -2109,7 +2109,9 @@
                   <div v-if="
                     tool.tool.indexOf(49) != -1
                   " class="xuan_right_box">
-                    <div v-if="courseDetail.userid == userid" style="display: flex;justify-content: flex-end;"><el-button type="primary" size="small" @click="addTools(49, toolIndex, taskCount)">分组设置</el-button></div>
+                    <div v-if="courseDetail.userid == userid" style="display: flex;justify-content: flex-end;">
+                      <el-button type="primary" size="small"
+                        @click="addTools(49, toolIndex, taskCount)">分组设置</el-button></div>
                     <div v-if="groupStudentUid[toolIndex]" class="group_staic_box">
                       <div v-for="(gp, gd) in tool.groupJson.group" :key="gd" class="group_staic">
                         <span> {{ gp.name }}</span>
@@ -7421,6 +7423,7 @@ export default {
       let _function = (screenStream) => {
         this.addStreamStopListener(screenStream, () => {
           console.log("流停止监听");
+          this.stopRecording();
           this.$emit("streamStop", {})
           // this.stopRecording();
         });
@@ -10686,6 +10689,8 @@ ol {
   width: 100%;
   padding: 0 10px;
   box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 

src/components/tools/heatmap.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="data_body">
+    <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
+    <div id="charts_canvas" class="echart" style="width: 100%; height: 100%"></div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: ["Josn",'num'],
+  data() {
+    return {
+      mindV: true,
+      chartObj: null,
+      timer: null,
+      range: "",
+      ooption: [],
+      option: {
+        title: {
+          top: 30,
+          left: 'center',
+          text: '作业提交热力图'
+        },
+        tooltip: {},
+        visualMap: {
+          min: 0,
+          max:0,
+          type: 'piecewise',
+          orient: 'horizontal',
+          left: 'center',
+          top: 65,
+          inRange: {
+            color: ['#65b9fc', '#477cd7']
+          },
+          precision: 0
+        },
+        calendar: {
+          top: 120,
+          left: 30,
+          right: 30,
+          cellSize: ['auto', 15],
+          range: '',
+          itemStyle: {
+            borderWidth: 0.5
+          },
+          yearLabel: { show: false },
+          dayLabel: {
+            show: false
+          }
+        },
+        series: {
+          type: 'heatmap',
+          coordinateSystem: 'calendar',
+          data: ''
+        }
+      },
+    };
+  },
+  methods: {
+    setChart(option, year) {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#charts_canvas")
+        );
+        this.option.series.data = option;
+        this.option.calendar.range = year;
+        this.option.visualMap.max = Object.keys(this.Josn).length + (10 - (Object.keys(this.Josn).length % 10));
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+    getVirtualData(year) {
+      const date = +this.$echarts.time.parse(year + '-01-01');
+      const end = +this.$echarts.time.parse(year + '-12-31');
+      const dayTime = 3600 * 24 * 1000;
+      const data = [];
+      for (let time = date; time < end; time += dayTime) {
+        let a = this.$echarts.time.format(time, '{yyyy}-{MM}-{dd}', false)
+        if (this.Josn[a]) {
+          data.push([a, this.Josn[a]]);
+        } else {
+          data.push([a, null]);
+        }
+      }
+      return data;
+    },
+    setData() {
+      let year = Object.keys(this.Josn)[0].split('-')[0];
+      this.ooption = this.getVirtualData(year)
+      if (!this.chartObj) {
+        this.setChart(this.ooption, year);
+      } else {
+        this.option.series.data = this.ooption;
+        this.option.calendar.range = year;
+        this.option.visualMap.max = Object.keys(this.Josn).length + (10 - (Object.keys(this.Josn).length % 10));
+        this.chartObj.setOption(this.option, year);
+      }
+    },
+  },
+  watch: {
+    num: {
+      handler: function (newVal, oldVal) {
+        this.setData();
+      },
+      deep: true,
+    },
+    Josn: {
+      handler: function (newVal, oldVal) { },
+      deep: true,
+    },
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+  mounted() {
+    this.setData();
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+  beforeDestroy() {
+    // clearInterval(this.timer);
+    // this.timer = null
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  /* display: flex; */
+  /* flex-direction: column; */
+  width: 100%;
+  height: 250px;
+  /* height: 500px; */
+  /* margin: 15px 5px 0 0; */
+  background: #fff;
+  overflow: hidden;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.noMind {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  background: #fff;
+}
+</style>