update

src/assets/icon/course/gongzuoliu.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1736911915903" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2833" data-spm-anchor-id="a313x.search_index.0.i11.41143a81rmVKEY" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M514.072 924.731c-86.4 0-169.4-31.9-233.7-89.7l60.1-66.8c95.6 86 251.8 86 347.2 0l60.2 66.8c-64.3 57.8-147.4 89.7-233.8 89.7zM859.472 627.431l-88.9-13c1.9-12.8 2.9-25.8 2.9-39 0-109.8-69.5-208.1-173-244.8l30-84.7c139.4 49.3 233 181.7 233 329.5 0 17.8-1.4 35-4 52zM168.672 627.631c-2.5-17.1-3.9-34.4-3.9-52.2 0-147.7 93.6-280.1 232.8-329.4l30 84.7c-103.5 36.7-173 135-173 244.8 0 13.3 1 26.2 2.9 38.9l-88.8 13.2z" fill="#3681fc" p-id="2834" data-spm-anchor-id="a313x.search_index.0.i12.41143a81rmVKEY" class=""></path><path d="M514.072 407.631c-83.4 0-151.3-67.9-151.3-151.3s67.9-151.3 151.3-151.3 151.3 67.9 151.3 151.3c0 83.5-67.9 151.3-151.3 151.3z m0-212.6c-33.8 0-61.4 27.5-61.4 61.4 0 33.8 27.5 61.4 61.4 61.4s61.4-27.5 61.4-61.4-27.5-61.4-61.4-61.4zM237.672 875.531c-83.4 0-151.3-67.9-151.3-151.3s67.9-151.2 151.3-151.2 151.3 67.9 151.3 151.3-68 151.2-151.3 151.2z m0-212.7c-33.9 0-61.4 27.6-61.4 61.4s27.5 61.4 61.4 61.4c33.8 0 61.4-27.6 61.4-61.4s-27.6-61.4-61.4-61.4zM790.572 875.531c-83.4 0-151.3-67.9-151.3-151.3s67.9-151.3 151.3-151.3 151.2 67.9 151.2 151.3-67.8 151.3-151.2 151.3z m0-212.7c-33.8 0-61.4 27.6-61.4 61.4s27.6 61.4 61.4 61.4 61.4-27.6 61.4-61.4-27.5-61.4-61.4-61.4z" fill="#1a1a1a" p-id="2835" data-spm-anchor-id="a313x.search_index.0.i13.41143a81rmVKEY" class=""></path></svg>

src/assets/icon/course/gongzuoliu2.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1736911915903" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2833" data-spm-anchor-id="a313x.search_index.0.i11.41143a81rmVKEY" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M514.072 924.731c-86.4 0-169.4-31.9-233.7-89.7l60.1-66.8c95.6 86 251.8 86 347.2 0l60.2 66.8c-64.3 57.8-147.4 89.7-233.8 89.7zM859.472 627.431l-88.9-13c1.9-12.8 2.9-25.8 2.9-39 0-109.8-69.5-208.1-173-244.8l30-84.7c139.4 49.3 233 181.7 233 329.5 0 17.8-1.4 35-4 52zM168.672 627.631c-2.5-17.1-3.9-34.4-3.9-52.2 0-147.7 93.6-280.1 232.8-329.4l30 84.7c-103.5 36.7-173 135-173 244.8 0 13.3 1 26.2 2.9 38.9l-88.8 13.2z" fill="#a8edc9" p-id="2834" data-spm-anchor-id="a313x.search_index.0.i12.41143a81rmVKEY" class=""></path><path d="M514.072 407.631c-83.4 0-151.3-67.9-151.3-151.3s67.9-151.3 151.3-151.3 151.3 67.9 151.3 151.3c0 83.5-67.9 151.3-151.3 151.3z m0-212.6c-33.8 0-61.4 27.5-61.4 61.4 0 33.8 27.5 61.4 61.4 61.4s61.4-27.5 61.4-61.4-27.5-61.4-61.4-61.4zM237.672 875.531c-83.4 0-151.3-67.9-151.3-151.3s67.9-151.2 151.3-151.2 151.3 67.9 151.3 151.3-68 151.2-151.3 151.2z m0-212.7c-33.9 0-61.4 27.6-61.4 61.4s27.5 61.4 61.4 61.4c33.8 0 61.4-27.6 61.4-61.4s-27.6-61.4-61.4-61.4zM790.572 875.531c-83.4 0-151.3-67.9-151.3-151.3s67.9-151.3 151.3-151.3 151.2 67.9 151.2 151.3-67.8 151.3-151.2 151.3z m0-212.7c-33.8 0-61.4 27.6-61.4 61.4s27.6 61.4 61.4 61.4 61.4-27.6 61.4-61.4-27.5-61.4-61.4-61.4z" fill="#ffffff" p-id="2835" data-spm-anchor-id="a313x.search_index.0.i13.41143a81rmVKEY" class=""></path></svg>

src/components/classRoomHelper/component/workFlowIframe.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="ibox">
+    <iframe :src="src" frameborder="0" style="width: 100%; height: calc(100% - 30px)"></iframe>
+    <div v-if='iframeSrc.length > 1' class="ibox-tools">
+        <span class="tool" v-for="(item, index) in iframeSrc" :key="index" @click="setSrc(index)" :class="{active: index == checkIndex}">
+            {{ item.name }}
+        </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    props: {
+        iframeSrc: {
+            type: Array,
+            default: []
+        },
+    },
+    watch: {
+        iframeSrc: {
+        handler: function(newVal, oldVal) {
+            if (newVal) {
+                this.checkIndex = 0
+                this.src = newVal[this.checkIndex].src
+            }
+        },
+        deep: true
+        }
+    },
+    data() {
+        return {
+            checkIndex: 0,
+            src: ""
+        }
+    },
+    methods: {
+        setSrc(index) {
+            this.checkIndex = index
+            this.src = this.iframeSrc[index].src
+        }
+    },
+    mounted(){
+        this.setSrc(0);
+    },
+}
+</script>
+
+<style scoped>
+.ibox {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.ibox-tools{
+  width: 100%;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 10px;
+  overflow: auto;
+  position: absolute;
+  bottom: 0px;
+}
+
+.ibox-tools > .tool{
+  width: auto;
+  box-sizing: border-box;
+  padding: 0 10px;
+  height: 25px;
+  background-color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* 阴影 */
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.363);
+  border-radius: 15px;
+  font-size: 14px;
+  cursor: pointer;
+  margin-right: 10px;
+  white-space: nowrap;
+}
+
+.ibox-tools > .tool.active {
+  background-color: #3781fc;
+  color: #fff;
+}
+</style>

src/components/classRoomHelper/index.vue

@@ -41,6 +41,8 @@
         :courseType="courseType"
         :taskCount="taskCount"
       />
+
+      <workFlowIframe v-if="itemType == 6 && iframeSrc.length" :iframeSrc="iframeSrc"></workFlowIframe>
       <!-- <dialogArea
         :courseDetail="courseDetail"
 				:openMegaphone="openMegaphone"
@@ -270,7 +272,24 @@
           <!-- <span :style="`background:url(${itemType==1?require('../../assets/icon/course/up_active.png'):require('../../assets/icon/course/up.png')});`"></span> -->
           <div>对话</div>
         </div>
-
+        <div
+          v-if="iframeSrc.length  && canUseCourseId.includes(courseId)"
+          :class="[
+            'ch_nav_box_middle_item',
+            itemType == 6 ? 'ch_nav_box_middle_item_active' : ''
+          ]"
+          @click.stop="changeItemType(6)"
+        >
+          <img
+            v-if="itemType == 6"
+            :src="require('../../assets/icon/course/gongzuoliu2.svg')"
+          />
+          <img
+            v-if="itemType != 6"
+            :src="require('../../assets/icon/course/gongzuoliu.svg')"
+          />
+          <div>工作流</div>
+        </div>
         <div
           :class="[
             'ch_nav_box_middle_item',
@@ -422,6 +441,7 @@ import countdown from "./component/countdown.vue";
 import AnnotationCanvas from "./component/AnnotationCanvas.vue";
 import languageAssistant from "./component/languageAssistant.vue";
 import reviewArea from "./component/reviewArea.vue";
+import workFlowIframe from "./component/workFlowIframe.vue";
 import uploadFile from "./component/uploadFile.vue";
 import { v4 as uuidv4 } from "uuid";
 // 自定义指令，用于处理点击外部区域的事件
@@ -466,7 +486,8 @@ export default {
     AnnotationCanvas,
     languageAssistant,
     reviewArea,
-    uploadFile
+    uploadFile,
+    workFlowIframe
   },
   props: {
     courseDetail: {
@@ -560,7 +581,9 @@ export default {
         key: "",
         uploadid: "",
         loading: false
-      }
+      },
+      iframeSrc: [],
+      canUseCourseId: ['bfbe1913-2f87-11ef-bf55-005056b86db5','3a64b199-d2eb-11ef-a2d1-005056b86db5', 'bb0b1995-0207-11ef-b534-005056b86db5']
     };
   },
 	computed:{
@@ -576,6 +599,11 @@ export default {
 			}
 		}
 	},
+  watch: {
+    courseType(newValue, oldValue) {
+      this.setIframeSrc();
+    }
+  },
   mounted() {
     let setting = this.courseDetail.setting;
     if (setting) {
@@ -600,6 +628,7 @@ export default {
       this.canGetTips = true;
       this.getTipsList();
     }, 3000);
+    this.setIframeSrc();
   },
   methods: {
     getTipsListTime(time = 5000) {
@@ -791,6 +820,30 @@ ${_textData}
         }
       });
     },
+    setIframeSrc() {
+      const array = [
+        { index: 0, src: [{src:'https://beta.knowledge.cocorobo.cn/zh-CN/story-telling/6c5e785f-d1b0-11ef-b730-12e77c4cb76b', name:'赛规者'}] },
+        { index: 1, src: 
+          [
+            {src:'https://beta.knowledge.cocorobo.cn/zh-CN/story-telling/6c5e785f-d1b0-11ef-b730-12e77c4cb76b', name:'共情者'},
+            {src:'https://beta.knowledge.cocorobo.cn/zh-CN/story-telling/45ab8600-d1b3-11ef-b730-12e77c4cb76b', name:'解析者'},
+            {src:'https://beta.knowledge.cocorobo.cn/zh-CN/story-telling/1f8ee1b8-d258-11ef-8b75-12e77c4cb76b', name:'构想者'},
+          ] 
+        },
+        { index: 2, src: [{src:'https://beta.knowledge.cocorobo.cn/zh-CN/story-telling/2bf156bc-d1ae-11ef-b730-12e77c4cb76b', name:'建模者'}] },
+        { index: 3, src: [{src:'https://beta.knowledge.cocorobo.cn/zh-CN/story-telling/2bf156bc-d1ae-11ef-b730-12e77c4cb76b', name:'建模者'}] },
+        { index: 4, src: [{src:'https://beta.knowledge.cocorobo.cn/zh-CN/story-telling/73371371-d1a8-11ef-b730-12e77c4cb76b', name:'编码者'}] },
+        { index: 5, src: [{src:'https://beta.knowledge.cocorobo.cn/zh-CN/story-telling/73371371-d1a8-11ef-b730-12e77c4cb76b', name:'编码者'}] },
+        { index: 6, src: [{src:'https://beta.knowledge.cocorobo.cn/zh-CN/story-telling/73371371-d1a8-11ef-b730-12e77c4cb76b', name:'编码者'}] },
+        { index: 7, src: [
+          {src:'https://beta.knowledge.cocorobo.cn/zh-CN/story-telling/cd01ace0-d259-11ef-8b75-12e77c4cb76b', name:'项目书编者'},
+          {src:'https://beta.knowledge.cocorobo.cn/zh-CN/story-telling/a2f4c70a-d1b0-11ef-b730-12e77c4cb76b', name:'答辩者'},
+          ] 
+        },
+      ];
+      const matched = array.find(el => el.index === this.courseType);
+      this.iframeSrc = matched ? matched.src : [];
+    },
     //计时
     startTime(time) {
       this.$refs.timepieceRef.startTime(time);
@@ -1126,6 +1179,8 @@ Instruction: Based on the context, follow "Format example", write content
   overflow-y: auto !important; /* 上下溢出显示滚动条 */
   overflow-x: hidden !important; /* 左右溢出正常溢出 */
   position: relative;
+  padding-top: 65px;
+  box-sizing: border-box;
 }
 
 .ch_content_box {