update

src/components/easy2/studyStudent.vue

@@ -1421,9 +1421,17 @@
                     <div>步骤{{ toolIndex + 1 }}</div>
                     <div
                       style="margin: 0 72px 0 auto"
-                      v-if="courseDetail.userid == userid"
+                      v-if="courseDetail.userid == userid || tool.tool[0] == 15"
                     >
                       <el-button
+                        type="primary"
+                        size="mini"
+                        @click="openWordCloud(toolIndex)"
+                        v-if="tool.tool[0] == 15"
+                        >生成词云</el-button
+                      >
+                      <el-button
+                        v-if="courseDetail.userid == userid"
                         type="primary"
                         size="mini"
                         @click="updateToolDetail"
@@ -11545,6 +11553,7 @@
       :searchTN="worksSName2"
       @setPlname="setPlname"
     ></UpdateMore>
+    <wordCloud :dialogVisibleWordCloud.sync="dialogVisibleWordCloud" :data="wordCloudData"></wordCloud>
   </div>
 </template>
 
@@ -11569,6 +11578,7 @@ import { Empty } from "element-ui";
 import RecordRTC from "recordrtc";
 import interVideo from "../interVideo/index.vue";
 import UpdateMore from "../updateMore/updateMore.vue";
+import wordCloud from "../wordCloud/index.vue";
 
 export default {
   components: {
@@ -11587,6 +11597,7 @@ export default {
     Table,
     interVideo,
     UpdateMore,
+    wordCloud,
   },
   data() {
     return {
@@ -11890,6 +11901,8 @@ export default {
       plIndex: "",
       worksSName2: "",
       worksSid: "",
+      dialogVisibleWordCloud: false,
+      wordCloudData:[],
     };
   },
   methods: {
@@ -17746,6 +17759,24 @@ export default {
           });
       }
     },
+    openWordCloud(toolindex){
+      let array = []
+      for(var i = 0;i<this.worksStudent[toolindex].length;i++){
+        let works = JSON.parse(this.worksStudent[toolindex][i].works)[0].answer
+        array.push({name:works})
+      }
+      if(this.isGroup){
+        for(var i = 0;i<this.courseGroup.group.length;i++){
+          let works = this.courseGroup.group[i].works[toolindex]
+          for(var j = 0;j<works.length;j++){
+            let answer = JSON.parse(works[j].works)[0].answer
+            array.push({name:answer})
+          }
+        }
+      }
+      this.wordCloudData = array
+      this.dialogVisibleWordCloud = true
+    },
   },
   directives: {
     // 使用局部注册指令的方式

src/components/easy3/studyStudent.vue

@@ -1409,9 +1409,17 @@
                     <div>步骤{{ toolIndex + 1 }}</div>
                     <div
                       style="margin: 0 72px 0 auto"
-                      v-if="courseDetail.userid == userid"
+                      v-if="courseDetail.userid == userid || tool.tool[0] == 15"
                     >
                       <el-button
+                          type="primary"
+                          size="mini"
+                          v-if="tool.tool[0] == 15"
+                          @click="openWordCloud(toolIndex)"
+                          >生成词云</el-button
+                        >
+                      <el-button
+                        v-if="courseDetail.userid == userid"
                         type="primary"
                         size="mini"
                         @click="updateToolDetail"
@@ -11530,6 +11538,7 @@
       :searchTN="worksSName2"
       @setPlname="setPlname"
     ></UpdateMore>
+    <wordCloud :dialogVisibleWordCloud.sync="dialogVisibleWordCloud" :data="wordCloudData"></wordCloud>
   </div>
 </template>
 
@@ -11554,6 +11563,7 @@ import { Empty } from "element-ui";
 import RecordRTC from "recordrtc";
 import interVideo from "../interVideo/index.vue";
 import UpdateMore from "../updateMore/updateMore.vue";
+import wordCloud from "../wordCloud/index.vue";
 
 export default {
   components: {
@@ -11572,6 +11582,7 @@ export default {
     Table,
     interVideo,
     UpdateMore,
+    wordCloud,
   },
   data() {
     return {
@@ -11875,6 +11886,8 @@ export default {
       plIndex: "",
       worksSName2: "",
       worksSid: "",
+      dialogVisibleWordCloud: false,
+      wordCloudData:[],
     };
   },
   methods: {
@@ -17607,6 +17620,24 @@ export default {
           });
       }
     },
+    openWordCloud(toolindex){
+      let array = []
+      for(var i = 0;i<this.worksStudent[toolindex].length;i++){
+        let works = JSON.parse(this.worksStudent[toolindex][i].works)[0].answer
+        array.push({name:works})
+      }
+      if(this.isGroup){
+        for(var i = 0;i<this.courseGroup.group.length;i++){
+          let works = this.courseGroup.group[i].works[toolindex]
+          for(var j = 0;j<works.length;j++){
+            let answer = JSON.parse(works[j].works)[0].answer
+            array.push({name:answer})
+          }
+        }
+      }
+      this.wordCloudData = array
+      this.dialogVisibleWordCloud = true
+    },
   },
   directives: {
     // 使用局部注册指令的方式

src/components/studyStudent.vue

@@ -1778,7 +1778,7 @@
                       style="
                         position: absolute;
                         right: 30px;
-                        transform: translateY(-130%);
+                        top:30px;
                       "
                       @click="addImg($event)"
                       >上传作业<input
@@ -1787,6 +1787,11 @@
                         style="display: none"
                         @change="beforeUpload1($event, 7, toolIndex)"
                     /></el-button>
+                    <el-button type="primary" v-if="tool.tool[0] == 15" style="
+                        position: absolute;
+                        right: 30px;
+                        top:30px;
+                      " @click="openWordCloud(toolIndex)">生成词云</el-button>
                     <!-- <el-button type="primary" v-if="tool.tool[0] == 57" style="
                         position: absolute;
                         right: 30px;
@@ -10165,6 +10170,7 @@
       :searchTN="worksSName2"
       @setPlname="setPlname"
     ></UpdateMore>
+    <wordCloud :dialogVisibleWordCloud.sync="dialogVisibleWordCloud" :data="wordCloudData"></wordCloud>
   </div>
 </template>
 
@@ -10189,6 +10195,7 @@ import { Empty } from "element-ui";
 import RecordRTC from "recordrtc";
 import interVideo from "./interVideo/index.vue";
 import UpdateMore from "./updateMore/updateMore.vue";
+import wordCloud from "./wordCloud/index.vue";
 
 export default {
   components: {
@@ -10207,6 +10214,7 @@ export default {
     Table,
     interVideo,
     UpdateMore,
+    wordCloud
   },
   data() {
     return {
@@ -10216,6 +10224,7 @@ export default {
       dialogVisiblePl: false,
       commentDialogVisible: false,
       dialogVisibleMember: false,
+      dialogVisibleWordCloud:false,
       videoVisible: false,
       isStar: false,
       studentEvalDialogVisible: false,
@@ -10512,6 +10521,7 @@ export default {
       plIndex: "",
       worksSName2: "",
       worksSid: "",
+      wordCloudData:[],
     };
   },
   methods: {
@@ -16732,6 +16742,24 @@ export default {
       }
       this.$forceUpdate();
     },
+    openWordCloud(toolindex){
+      let array = []
+      for(var i = 0;i<this.worksStudent[toolindex].length;i++){
+        let works = JSON.parse(this.worksStudent[toolindex][i].works)[0].answer
+        array.push({name:works})
+      }
+      if(this.isGroup){
+        for(var i = 0;i<this.courseGroup.group.length;i++){
+          let works = this.courseGroup.group[i].works[toolindex]
+          for(var j = 0;j<works.length;j++){
+            let answer = JSON.parse(works[j].works)[0].answer
+            array.push({name:answer})
+          }
+        }
+      }
+      this.wordCloudData = array
+      this.dialogVisibleWordCloud = true
+    },
   },
   directives: {
     // 使用局部注册指令的方式
@@ -18279,6 +18307,7 @@ export default {
 .toolBox {
   padding: 30px 0 0 25px;
   display: flex;
+  position: relative;
 }
 
 .btnAll {

src/components/wordCloud/index.vue

@@ -0,0 +1,302 @@
+<template>
+    <div>
+        <el-dialog title="词云" :visible.sync="dialogVisibleWordCloud" :append-to-body="true" width="650px"
+            :before-close="handleClose" class="dialog_diy dialog_diy3">
+            <div class="wordCloud__tagBall" :style="{ width: `500px`, height: `500px` }" @mouseenter="stop"
+                @mouseleave="start">
+                <span class="wordCloud__tag" v-for="(item, index) of data" :key="index"
+                    :style="{ color: color[index % color.length], ...contentEle[index].style }"
+                    :title="item.name ">{{ item.name }}</span>
+                    <!-- + item.value -->
+            </div>
+        </el-dialog>
+    </div>
+</template>
+   
+   
+<script>
+export default {
+    name: 'cloudWork',
+    props: {
+        dialogVisibleWordCloud: {
+            type: Boolean,
+        },
+        // 测试数据
+        data: {
+            type: Array,
+            default: () => [
+                // {
+                //     name: '安氏一类',
+                //     value: 100
+                // },
+                // {
+                //     name: '安氏二类',
+                //     value: 30
+                // },
+                // {
+                //     name: '安氏三类',
+                //     value: 30
+                // },
+                // {
+                //     name: '安氏四类',
+                //     value: 30
+                // },
+                // {
+                //     name: '安氏五类',
+                //     value: 30
+                // },
+                // {
+                //     name: '安氏一类',
+                //     value: 30
+                // },
+                // {
+                //     name: '安氏二类',
+                //     value: 30
+                // },
+                // {
+                //     name: '安氏三类',
+                //     value: 30
+                // },
+                // {
+                //     name: '安氏四类',
+                //     value: 30
+                // },
+                // {
+                //     name: '安氏五类',
+                //     value: 30
+                // },
+                // {
+                //     name: '安氏一类',
+                //     value: 30
+                // },
+                // {
+                //     name: '安氏二类',
+                //     value: 30
+                // },
+                // {
+                //     name: '安氏三类',
+                //     value: 30
+                // },
+                // {
+                //     name: '安氏四类',
+                //     value: 30
+                // },
+                // {
+                //     name: '安氏五类',
+                //     value: 30
+                // }
+            ]
+        }
+    },
+    data: () => ({
+        color: ['#2D4DB6', '#04B67C', '#D1AF07', '#E27914', '#CB4A4D', '#B02690'],
+        contentEle: [],
+        direction: '-1',
+        speed: 400,
+        animateID: null,
+        width:500,
+        height:500,
+    }),
+    watch: {
+        dialogVisibleWordCloud(newValue, oldValue) {
+            if(newValue){
+                this.contentEle = this.data.map(() => ({
+                    x: 0,
+                    y: 0,
+                    z: 0,
+                    style: {}
+                }));
+                this.innit();
+            }
+        }
+    },
+    created() {
+        // this.contentEle = this.data.map(() => ({
+        //     x: 0,
+        //     y: 0,
+        //     z: 0,
+        //     style: {}
+        // }));
+    },
+    mounted() {
+        this.innit();
+    },
+    methods: {
+        handleClose(done) {
+            this.close();
+            // done()
+        },
+        close() {
+            this.$emit("update:dialogVisibleWordCloud", false)
+        },
+        innit() {
+            const RADIUSX = (this.width - 50) / 2;
+            const RADIUSY = (this.height - 50) / 2;
+            this.contentEle = [];
+            for (let i = 0; i < this.data.length; i += 1) {
+                const k = -1 + (2 * (i + 1) - 1) / this.data.length;
+                const a = Math.acos(k);
+                const b = a * Math.sqrt(this.data.length * Math.PI);
+                const x = RADIUSX * Math.sin(a) * Math.cos(b);
+                const y = RADIUSY * Math.sin(a) * Math.sin(b);
+                const z = RADIUSX * Math.cos(a);
+                const singleEle = {
+                    x,
+                    y,
+                    z,
+                    style: {}
+                };
+                this.contentEle.push(singleEle);
+            }
+            this.animate();
+        },
+        animate() {
+            this.rotateX();
+            this.rotateY();
+            this.move();
+            this.animateID = window.requestAnimationFrame(this.animate);
+        },
+        rotateX() {
+            const angleX = ['-1', '1'].includes(this.direction)
+                ? Math.PI / Infinity
+                : Math.PI / ((Number(this.direction) / 2) * Number(this.speed));
+            const cos = Math.cos(angleX);
+            const sin = Math.sin(angleX);
+
+            this.contentEle = this.contentEle.map((t) => {
+                const y1 = t.y * cos - t.z * sin;
+                const z1 = t.z * cos + t.y * sin;
+                return {
+                    ...t,
+                    y: y1,
+                    z: z1
+                };
+            });
+        },
+        rotateY() {
+            const angleY = ['-2', '2'].includes(this.direction)
+                ? Math.PI / Infinity
+                : Math.PI / (Number(this.direction) * Number(this.speed));
+            const cos = Math.cos(angleY);
+            const sin = Math.sin(angleY);
+            this.contentEle = this.contentEle.map((t) => {
+                const x1 = t.x * cos - t.z * sin;
+                const z1 = t.z * cos + t.x * sin;
+                return {
+                    ...t,
+                    x: x1,
+                    z: z1
+                };
+            });
+        },
+        move() {
+            const CX = this.width / 2;
+            const CY = this.height / 2;
+            this.contentEle = this.contentEle.map((singleEle) => {
+                const { x, y, z } = singleEle;
+                const fallLength = 500;
+                const RADIUS = (this.width - 50) / 2;
+                const scale = fallLength / (fallLength - z);
+                const alpha = (z + RADIUS) / (2 * RADIUS);
+                const left = `${x + CX - 15}px`;
+                const top = `${y + CY - 15}px`;
+                const transform = `translate(${left}, ${top}) scale(${scale})`;
+                const style = {
+                    ...singleEle.style,
+                    opacity: alpha + 0.5,
+                    zIndex: parseInt(scale * 100, 10),
+                    transform
+                };
+                return {
+                    x,
+                    y,
+                    z,
+                    style
+                };
+            });
+        },
+        // 鼠标移入暂停
+        stop() {
+            window.cancelAnimationFrame(this.animateID);
+        },
+        // 鼠标离开恢复
+        start() {
+            this.animate();
+        }
+    }
+};
+</script>
+   
+   
+<style  scoped>
+@media screen and (max-width: 1280px) {
+    .dialog_diy3>>>.el-dialog {
+        width: 100% !important;
+    }
+}
+
+.dialog_diy>>>.el-dialog {
+    margin-top: 10vh !important;
+}
+
+.dialog_diy>>>.el-dialog__header {
+    background: #454545 !important;
+    padding: 15px 20px;
+}
+
+.dialog_diy>>>.el-dialog__title,
+.dialog_diy1>>>.el-dialog__title {
+    color: #fff;
+}
+
+.dialog_diy>>>.el-dialog__headerbtn {
+    top: 19px;
+}
+
+.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
+    color: #fff;
+}
+
+.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
+    color: #fff;
+}
+
+.dialog_diy1>>>.el-dialog__body {
+    padding: 0;
+}
+
+.dialog_diy>>>.el-dialog__body,
+.dialog_diy>>>.el-dialog__footer {
+    background: #fafafa;
+}
+
+button {
+    margin: 20px;
+}
+
+.wordCloud__tagBall {
+    margin: 0px auto;
+    position: relative;
+}
+
+.wordCloud__tag {
+    display: block;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    color: green;
+    text-decoration: none;
+    font-size: 15px;
+    font-family: '微软雅黑';
+    font-weight: bold;
+}
+
+.wordCloud__tag :hover {
+    color: red;
+}
+
+.wordCloud__home {
+    display: flex;
+    justify-content: center;
+}
+</style>