1

src/components/easy2/studyStudent.vue

@@ -13,6 +13,11 @@
     >
       <div class="btnAllNT">
         <!-- <img src="../../assets/icon/learn/screen.png" @click="allScrell" /> -->
+        <img
+          src="../../assets/icon/learn/addTool.png"
+          @click="openToolAll"
+          style="position: relative"
+        />
         <img
           src="../../assets/icon/learn/last.png"
           @click="nextOrpreSteps(0)"
@@ -8918,6 +8923,362 @@
         </div>
       </div>
     </div>
+    <div v-if="toolDialogVisible == true" class="toolMask" @click="toolDialogVisible = false"></div>
+    <div v-if="toolDialogVisible == true" class="addToolCss">
+      <div class="toolTop">
+        <div style="font-weight: bold">新增工具</div>
+        <div @click="toolDialogVisible = false">
+          <img src="../../assets/icon/close.png" class="toolClose" alt="" />
+        </div>
+      </div>
+      <div class="tool_box">
+        <div class="tool_type_box">
+          <div class="chooseWho">
+            <div
+              :class="toolType == 0 ? 'isChooseActive' : ''"
+              @click="(toolType = 0), $forceUpdate()"
+            >
+              互动类
+            </div>
+            <div
+              :class="toolType == 1 ? 'isChooseActive' : ''"
+              @click="(toolType = 1), $forceUpdate()"
+            >
+              思维类
+            </div>
+            <div
+              :class="toolType == 2 ? 'isChooseActive' : ''"
+              @click="(toolType = 2), $forceUpdate()"
+            >
+              测评类
+            </div>
+            <div
+              :class="toolType == 3 ? 'isChooseActive' : ''"
+              @click="(toolType = 3), $forceUpdate()"
+            >
+              编程类
+            </div>
+            <div
+              :class="toolType == 5 ? 'isChooseActive' : ''"
+              @click="(toolType = 5), $forceUpdate()"
+            >
+              学科类
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="toolSort" v-if="toolType == 0">
+            <div class="tool" :class="{ isToolChoose : checktoolArray.indexOf(10) != -1 }">
+              <div class="whiteBIcon" @click="addTools2(10)">
+                <img src="../../assets/icon/thirdToolList/time.png" alt />
+                <div style="margin: 5px 0">倒计时</div>
+              </div>
+              <div class="check" @click="addTools2(10)">
+                <div v-if="checktoolArray.indexOf(10) == -1" class="noChoose"></div>
+                <div v-else class="isChoose"></div>
+              </div>
+            </div>
+            <div class="tool" :class="{ isToolChoose : checktoolArray.indexOf(65) != -1 }">
+              <div class="whiteBIcon" @click="addTools2(65)">
+                <img src="../../assets/icon/firstToolList/pickPeople.png" alt />
+                <div style="margin: 5px 0">挑人</div>
+              </div>
+              <div class="check" @click="addTools2(65)">
+                <div v-if="checktoolArray.indexOf(65) == -1" class="noChoose"></div>
+                <div v-else class="isChoose"></div>
+              </div>
+            </div>
+          </div>
+          <div class="toolSort" v-if="toolType == 1">
+            <div class="tool" :class="{ isToolChoose : checktoolArray.indexOf(7) != -1 }">
+              <div class="whiteBIcon" @click="addTools2(7)">
+                <img
+                  src="../../assets/icon/secondToolList/mindNetwork.png"
+                  alt
+                />
+                <div style="margin: 5px 0">思维网格</div>
+              </div>
+              <div class="check" @click="addTools2(7)">
+                <div v-if="checktoolArray.indexOf(7) == -1" class="noChoose"></div>
+                <div v-else class="isChoose"></div>
+              </div>
+            </div>
+            <div class="tool" :class="{ isToolChoose : checktoolArray.indexOf(1) != -1 }">
+              <div class="whiteBIcon" @click="addTools2(1)">
+                <img
+                  src="../../assets/icon/secondToolList/whiteBoard.png"
+                  alt
+                />
+                <div style="margin: 5px 0">电子白板</div>
+              </div>
+              <div class="check" @click="addTools2(1)">
+                <div v-if="checktoolArray.indexOf(1) == -1" class="noChoose"></div>
+                <div v-else class="isChoose"></div>
+              </div>
+            </div>
+            <div class="tool" :class="{ isToolChoose : checktoolArray.indexOf(52) != -1 }">
+              <div class="whiteBIcon" @click="addTools2(52)">
+                <img src="../../assets/icon/fourthToolList/text.png" alt />
+                <div style="margin: 5px 0">文档</div>
+              </div>
+              <div class="check" @click="addTools2(52)">
+                <div v-if="checktoolArray.indexOf(52) == -1" class="noChoose"></div>
+                <div v-else class="isChoose"></div>
+              </div>
+            </div>
+            <div class="tool" :class="{ isToolChoose : checktoolArray.indexOf(3) != -1 }">
+              <div class="whiteBIcon" @click="addTools2(3)">
+                <img
+                  src="../../assets/icon/secondToolList/mindMapping.png"
+                  alt
+                />
+                <div style="margin: 5px 0">思维导图</div>
+              </div>
+              <div class="check" @click="addTools2(3)">
+                <div v-if="checktoolArray.indexOf(3) == -1" class="noChoose"></div>
+                <div v-else class="isChoose"></div>
+              </div>
+            </div>
+            <div class="tool" :class="{ isToolChoose : checktoolArray.indexOf(48) != -1 }">
+              <div class="whiteBIcon" @click="addTools2(48)">
+                <img src="../../assets/icon/fourthToolList/table.png" alt />
+                <div style="margin: 5px 0">表格</div>
+              </div>
+              <div class="check" @click="addTools2(48)">
+                <div v-if="checktoolArray.indexOf(48) == -1" class="noChoose"></div>
+                <div v-else class="isChoose"></div>
+              </div>
+            </div>
+          </div>
+          <div class="toolSort" v-if="toolType == 6">
+            <div v-show="tooC == 49">
+              <img
+                @click="addTools(tooC, toolIndex, taskCount)"
+                src="../../assets/icon/fourthToolList/group.png"
+                alt
+              />
+              <div style="margin: 5px 0">学生分组</div>
+            </div>
+          </div>
+          <div class="toolSort" v-if="toolType == 2">
+            <div class="tool" :class="{ isToolChoose : checktoolArray.indexOf(16) != -1 }">
+              <div class="whiteBIcon" @click="addTools2(16)">
+                <img src="../../assets/icon/thirdToolList/work.png" alt />
+                <div style="margin: 5px 0">作业提交</div>
+              </div>
+              <div class="check" @click="addTools2(16)">
+                <div v-if="checktoolArray.indexOf(16) == -1" class="noChoose"></div>
+                <div v-else class="isChoose"></div>
+              </div>
+            </div>
+            <div class="tool" :class="{ isToolChoose : checktoolArray.indexOf(50) != -1 }">
+              <div class="whiteBIcon" @click="addTools2(50)">
+                <img src="../../assets/icon/thirdToolList/plwork.png" alt />
+                <div style="margin: 5px 0">批量上传</div>
+              </div>
+              <div class="check" @click="addTools2(50)">
+                <div v-if="checktoolArray.indexOf(50) == -1" class="noChoose"></div>
+                <div v-else class="isChoose"></div>
+              </div>
+            </div>
+          </div>
+          <div class="toolSort" v-if="toolType == 3">
+            <div class="tool" :class="{ isToolChoose : checktoolArray.indexOf(18) != -1 }">
+              <div class="whiteBIcon" @click="addTools2(18)">
+                <img
+                  src="../../assets/icon/thirdToolList/trainPlatform.png"
+                  alt
+                />
+                <div style="margin: 5px 0">训练平台</div>
+              </div>
+              <div class="check" @click="addTools2(18)">
+                <div v-if="checktoolArray.indexOf(18) == -1" class="noChoose"></div>
+                <div v-else class="isChoose"></div>
+              </div>
+            </div>
+            <div class="tool" :class="{ isToolChoose : checktoolArray.indexOf(21) != -1 }">
+              <div class="whiteBIcon" @click="addTools2(21)">
+                <img src="../../assets/icon/fourthToolList/program.png" alt />
+                <div style="margin: 5px 0">AIoT Blockly</div>
+              </div>
+              <div class="check" @click="addTools2(21)">
+                <div v-if="checktoolArray.indexOf(21) == -1" class="noChoose"></div>
+                <div v-else class="isChoose"></div>
+              </div>
+            </div>
+            <div class="tool" :class="{ isToolChoose : checktoolArray.indexOf(23) != -1 }">
+              <div class="whiteBIcon" @click="addTools2(23)">
+                <img
+                  src="../../assets/icon/fourthToolList/Pythonprogram.png"
+                  alt
+                />
+                <div style="margin: 5px 0">AI Python</div>
+              </div>
+              <div class="check" @click="addTools2(23)">
+                <div v-if="checktoolArray.indexOf(23) == -1" class="noChoose"></div>
+                <div v-else class="isChoose"></div>
+              </div>
+            </div>
+            <div class="tool" :class="{ isToolChoose : checktoolArray.indexOf(24) != -1 }">
+              <div class="whiteBIcon" @click="addTools2(24)">
+                <img src="../../assets/icon/fourthToolList/AIprogram.png" alt />
+                <div style="margin: 5px 0">AI Blockly</div>
+              </div>
+              <div class="check" @click="addTools2(24)">
+                <div v-if="checktoolArray.indexOf(24) == -1" class="noChoose"></div>
+                <div v-else class="isChoose"></div>
+              </div>
+            </div>
+            <div class="tool" :class="{ isToolChoose : checktoolArray.indexOf(32) != -1 }">
+              <div class="whiteBIcon" @click="addTools2(32)">
+                <img src="../../assets/icon/thirdToolList/code.png" alt />
+                <div style="margin: 5px 0">源码编辑</div>
+              </div>
+              <div class="check" @click="addTools2(32)">
+                <div v-if="checktoolArray.indexOf(32) == -1" class="noChoose"></div>
+                <div v-else class="isChoose"></div>
+              </div>
+            </div>
+            <div class="tool" :class="{ isToolChoose : checktoolArray.indexOf(57) != -1 }">
+              <div class="whiteBIcon" @click="addTools2(57)">
+                <img src="../../assets/icon/fourthToolList/cocopi.png" alt />
+                <div style="margin: 5px 0">CocoPi</div>
+              </div>
+              <div class="check" @click="addTools2(57)">
+                <div v-if="checktoolArray.indexOf(57) == -1" class="noChoose"></div>
+                <div v-else class="isChoose"></div>
+              </div>
+            </div>
+            <div class="tool" :class="{ isToolChoose : checktoolArray.indexOf(63) != -1 }">
+              <div class="whiteBIcon" @click="addTools2(63)">
+                <img src="../../assets/icon/fourthToolList/Wood.png" alt />
+                <div style="margin: 5px 0">海龟编程</div>
+              </div>
+              <div class="check" @click="addTools2(63)">
+                <div v-if="checktoolArray.indexOf(63) == -1" class="noChoose"></div>
+                <div v-else class="isChoose"></div>
+              </div>
+            </div>
+          </div>
+          <div class="toolSort" v-if="toolType == 7">
+            <div class="tool" :class="{ isToolChoose : checktoolArray.indexOf(40) != -1 }">
+              <div class="whiteBIcon" @click="addTools2(40)">
+                <img src="../../assets/icon/secondToolList/eval.png" alt />
+                <div style="margin: 5px 0">个人评价</div>
+              </div>
+              <div class="check" @click="addTools2(40)">
+                <div v-if="checktoolArray.indexOf(40) == -1" class="noChoose"></div>
+                <div v-else class="isChoose"></div>
+              </div>
+            </div>
+          </div>
+          <div class="toolSort" v-if="toolType == 5">
+            <div class="tool" :class="{ isToolChoose : checktoolArray.indexOf(28) != -1 }">
+              <div class="whiteBIcon" @click="addTools2(28)">
+                <img
+                  src="../../assets/icon/secondToolList/translation.png"
+                  alt
+                />
+                <div style="margin: 5px 0">翻译</div>
+              </div>
+              <div class="check" @click="addTools2(28)">
+                <div v-if="checktoolArray.indexOf(28) == -1" class="noChoose"></div>
+                <div v-else class="isChoose"></div>
+              </div>
+            </div>
+            <div class="tool" :class="{ isToolChoose : checktoolArray.indexOf(31) != -1 }">
+              <div class="whiteBIcon" @click="addTools2(31)">
+                <img
+                  src="../../assets/icon/secondToolList/networkPanel.png"
+                  alt
+                />
+                <div style="margin: 5px 0">数字画板</div>
+              </div>
+              <div class="check" @click="addTools2(31)">
+                <div v-if="checktoolArray.indexOf(31) == -1" class="noChoose"></div>
+                <div v-else class="isChoose"></div>
+              </div>
+            </div>
+            <div class="tool" :class="{ isToolChoose : checktoolArray.indexOf(39) != -1 }">
+              <div class="whiteBIcon" @click="addTools2(39)">
+                <img src="../../assets/icon/secondToolList/GeoGebra.png" alt />
+                <div style="margin: 5px 0">GeoGebra</div>
+              </div>
+              <div class="check" @click="addTools2(39)">
+                <div v-if="checktoolArray.indexOf(39) == -1" class="noChoose"></div>
+                <div v-else class="isChoose"></div>
+              </div>
+            </div>
+            <div class="tool" :class="{ isToolChoose : checktoolArray.indexOf(66) != -1 }">
+              <div class="whiteBIcon" @click="addTools2(66)">
+                <img
+                  src="../../assets/icon/secondToolList/formulaEdi.png"
+                  alt
+                />
+                <div style="margin: 5px 0">公式编辑</div>
+              </div>
+              <div class="check" @click="addTools2(66)">
+                <div v-if="checktoolArray.indexOf(66) == -1" class="noChoose"></div>
+                <div v-else class="isChoose"></div>
+              </div>
+            </div>
+            <div class="tool" :class="{ isToolChoose : checktoolArray.indexOf(67) != -1 }">
+              <div class="whiteBIcon" @click="addTools2(67)">
+                <img src="../../assets/icon/secondToolList/molStr.png" alt />
+                <div style="margin: 5px 0">分子结构</div>
+              </div>
+              <div class="check" @click="addTools2(67)">
+                <div v-if="checktoolArray.indexOf(67) == -1" class="noChoose"></div>
+                <div v-else class="isChoose"></div>
+              </div>
+            </div>
+            <div class="tool" :class="{ isToolChoose : checktoolArray.indexOf(68) != -1 }">
+              <div class="whiteBIcon" @click="addTools2(68)">
+                <img src="../../assets/icon/secondToolList/timeAxis.png" alt />
+                <div style="margin: 5px 0">时间轴</div>
+              </div>
+              <div class="check" @click="addTools2(68)">
+                <div v-if="checktoolArray.indexOf(68) == -1" class="noChoose"></div>
+                <div v-else class="isChoose"></div>
+              </div>
+            </div>
+          </div>
+          <div class="toolSort" v-if="toolType == 4">
+            <div class="tool" :class="{ isToolChoose : checktoolArray.indexOf(26) != -1 }">
+              <div class="whiteBIcon" @click="addTools2(26)">
+                <img
+                  src="../../assets/icon/thirdToolList/courseDesign.png"
+                  alt
+                />
+                <div style="margin: 5px 0">课程设计</div>
+              </div>
+              <div class="check" @click="addTools2(26)">
+                <div v-if="checktoolArray.indexOf(26) == -1" class="noChoose"></div>
+                <div v-else class="isChoose"></div>
+              </div>
+            </div>
+            <div class="tool" :class="{ isToolChoose : checktoolArray.indexOf(25) != -1 }">
+              <div class="whiteBIcon" @click="addTools2(25)">
+                <img src="../../assets/icon/thirdToolList/evalua.png" alt />
+                <div style="margin: 5px 0">目标管理</div>
+              </div>
+              <div class="check" @click="addTools2(25)">
+                <div v-if="checktoolArray.indexOf(25) == -1" class="noChoose"></div>
+                <div v-else class="isChoose"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer" style="display: block;text-align: center;padding:0 0 10px 0;">
+        <el-button @click="toolDialogVisible = false"
+          >取 消</el-button
+        >
+        <el-button type="primary" @click.stop="addToolChoose"
+          >确 定</el-button
+        >
+      </span>
+    </div>
     <div v-if="replyDialogVisible == true" class="addDialogCss" v-el-drag-dialog>
       <div class="pzTop">
         <div class="teacherPz">
@@ -12065,6 +12426,7 @@ export default {
       juriVisible: false,
       timeDialogVisible: false,
       replyDialogVisible: false,
+      toolDialogVisible: false,
       replyIndex: 0,
       replyPid: "",
       radio: [],
@@ -14860,6 +15222,9 @@ export default {
       this.getCourseDetail(2);
       this.$forceUpdate();
     },
+    openToolAll() {
+      this.toolDialogVisible = true;
+    },
     nextOrpreSteps(t) {
       if (this.IsFollow && this.courseDetail.userid != this.userid) {
         this.$message.error("已经开启跟随模式，请认真跟堂听讲");
@@ -18221,8 +18586,8 @@ export default {
               this.taskCount
             ].toolChoose.length - 1
           );
-          this.$forceUpdate();
-          this.navList[this.courseType].task[this.taskCount].isOpen = true;
+          this.toolDialogVisible = false;
+          this.refreshCourse();
           this.$forceUpdate();
         })
         .catch((err) => {
@@ -19081,6 +19446,8 @@ export default {
   width: 13%;
   margin: 0 30px;
   align-items: center;
+  position: relative;
+  padding: 10px 25px;
 }
 
 .whiteBIcon {
@@ -19433,7 +19800,7 @@ export default {
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: flex-start;
-  padding-bottom: 10px;
+  padding: 0 0 10px 0;
 }
 
 .chooseWho > div {
@@ -22193,6 +22560,7 @@ ol {
 
 .tool_box {
   width: 100%;
+  padding: 0 0 0 20px;
 }
 
 .tool_type_box {
@@ -22210,11 +22578,15 @@ ol {
   flex-wrap: wrap;
   justify-content: flex-start;
   align-items: flex-start;
+  max-width: 600px;
+  padding: 0 0 15px 0;
 }
 
 .toolSort > div {
-  margin: 0 45px 0 0;
-  width: auto;
+  margin: 0 10px 0 0;
+  width: 110px;
+  box-sizing: border-box;
+  border: 2px solid transparent;
 }
 
 .tools {
@@ -22226,7 +22598,7 @@ ol {
 }
 
 .whiteBIcon {
-  width: 80px;
+  width: fit-content;
   cursor: pointer;
   display: flex;
   flex-direction: column;
@@ -22260,6 +22632,9 @@ ol {
   height: 20px; */
   cursor: pointer;
   margin: 10px 0;
+  position: absolute;
+  right: 2px;
+  top: -5px;
 }
 
 .checkDiv {
@@ -22594,4 +22969,63 @@ ol {
   color: #bfbfbf;
   font-size: 14px;
 }
+.toolMask{
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background: #3f3c3c;
+  opacity: 0.5;
+  top: 0;
+  left: 0;
+  z-index: 999;
+}
+.addToolCss {
+  position: fixed;
+  z-index: 999;
+  background: #fff;
+  right: 15%;
+  bottom: 20%;
+  min-width: 600px;
+  min-height: 300px;
+  border-radius: 10px;
+  box-shadow: 0 0 8px 1px #b2b2b2;
+}
+.toolTop {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+}
+
+.toolTop > div:nth-child(2) {
+  width: 15px;
+  height: 15px;
+  padding-right: 10px;
+  cursor: pointer;
+}
+
+.toolTop > div:nth-child(2) > img {
+  width: 100%;
+  height: 100%;
+}
+.noChoose,.isChoose{
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  border: 1px solid #dfe2e7;
+}
+
+.isChoose{
+  border: 4px solid #0363ff !important;
+  width: 10px;
+  height: 10px
+}
+
+.isToolChoose{
+  border: 2px solid #5394ff !important;
+  border-radius: 5px;
+  box-shadow: 0 0 6px 0px #5394ff;
+}
 </style>

src/components/easy3/studyStudent.vue

@@ -9246,7 +9246,7 @@
           </div>
         </div>
       </div>
-      <span slot="footer" class="dialog-footer" style="display: block;text-align: center;">
+      <span slot="footer" class="dialog-footer" style="display: block;text-align: center;padding:0 0 10px 0;">
         <el-button @click="toolDialogVisible = false"
           >取 消</el-button
         >
@@ -18437,8 +18437,6 @@ export default {
           this.toolDialogVisible = false;
           this.refreshCourse();
           this.$forceUpdate();
-          this.navList[this.courseType].task[this.taskCount].isOpen = true;
-          this.$forceUpdate();
         })
         .catch((err) => {
           console.error(err);
@@ -22367,8 +22365,10 @@ export default {
 }
 
 .toolSort > div {
-  margin: 0 45px 0 0;
-  width: auto;
+  margin: 0 10px 0 0;
+  width: 110px;
+  box-sizing: border-box;
+  border: 2px solid transparent;
 }
 
 .tools {
@@ -22380,7 +22380,7 @@ export default {
 }
 
 .whiteBIcon {
-  width: 80px;
+  width: fit-content;
   cursor: pointer;
   display: flex;
   flex-direction: column;
@@ -22433,7 +22433,7 @@ export default {
 }
 
 .isToolChoose{
-  border: 2px solid #5394ff;
+  border: 2px solid #5394ff !important;
   border-radius: 5px;
   box-shadow: 0 0 6px 0px #5394ff;
 }

src/components/studyStudent.vue

@@ -10984,8 +10984,6 @@ export default {
           );
           this.refreshCourse();
           this.$forceUpdate();
-          this.navList[this.courseType].task[this.taskCount].isOpen = true;
-          this.$forceUpdate();
         })
         .catch((err) => {
           console.error(err);