学生pbl

src/components/pages/pblCourse/component/bars.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="barCss">
+    <div class="progress">
+      <div ref="bar" class="bar shadow hui"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    doIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    getup() {
+      //   const bars = document.querySelectorAll(".bar");
+      const randomWidth = this.doIndex * 20;
+
+      const bars = this.$refs.bar;
+      const progress = document.querySelectorAll(".progress");
+      bars.style.width = `${randomWidth}%`;
+
+      //   bars.forEach((bar, index) => {
+      //     const randomWidth = this.doIndex * 20;
+
+      //     bar.style.width = `${randomWidth}%`;
+
+      //     // progress[index].addEventListener("mouseover", () => {
+      //     //   const randomTiming = Math.floor(Math.random() * 2 + 2);
+      //     //   console.log(randomTiming);
+      //     //   bar.style.transitionDuration = `${randomTiming}s`;
+      //     //   bar.style.width = "100%";
+      //     // });
+      //   });
+    }
+  },
+  mounted() {
+    this.getup();
+  }
+};
+</script>
+
+<style scoped>
+/* @import url("https://fonts.googleapis.com/css?family=Bitter"); */
+
+/* * {
+    border: 1px solid red;
+} */
+:root {
+  --font: "Bitter", serif;
+  --title-size: 36px;
+  --sub-size: 18px;
+}
+
+body {
+  background: #e5e5e5;
+}
+
+.barCss {
+  display: flex;
+  align-items: center;
+}
+.title h1 {
+  margin: 4px;
+  font-family: var(--font);
+  font-size: var(--title-size);
+  color: #333;
+}
+
+.title p {
+  margin: 4px;
+  padding-bottom: 25px;
+  font-family: var(--font);
+  font-size: var(--sub-size);
+  color: #888;
+}
+
+.container {
+  text-align: center;
+}
+
+.progress {
+  display: inline-block;
+  width: 100%;
+  height: 13px;
+  border-radius: 20px;
+  background: #f9f9f9;
+  border: 1px #000 solid;
+}
+
+.bar {
+  border-radius: 20px;
+  width: 0%;
+  height: 100%;
+  transition: width;
+  transition-duration: 1s;
+  transition-timing-function: cubic-bezier(0.36, 0.55, 0.63, 0.48);
+}
+
+.mobile {
+  display: none;
+}
+
+.shadow {
+  /* 25 50 */
+  box-shadow: 0px 45px 50px rgba(0, 0, 0, 0.25);
+}
+
+.hui {
+  background-color: #ccc;
+  background-image: url("../../../../assets/icon/pblCourse/DiagonalLine.png");
+}
+
+.stripes {
+  background-color: #ffffff;
+  background-image: url("data:image/svg+xml,%3Csvg width='25' height='1' viewBox='0 0 40 1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v1H0z' fill='%23d09af3' fill-opacity='0.54' fill-rule='evenodd'/%3E%3C/svg%3E");
+}
+</style>

src/components/pages/pblCourse/component/doWorkArea.vue

@@ -11,7 +11,7 @@
 			</div>
 		</div>
 		<div class="dw_work">
-			<work v-if="task" :task="task" @submitTask="down" @choiceAnswer="choiceAnswer" @getTaskList="getTaskList" :phase="phase" @deleteFile="deleteFile" @addFile="addFile"/>
+			<work v-if="task" :task="task" @submitTask="down" @choiceAnswer="choiceAnswer" @getTaskList="getTaskList" :phase="phase" @lookFile="lookFile" @deleteFile="deleteFile" @addFile="addFile"/>
 			<div v-else>
 				<h3>等待生成数据...</h3>
 			</div>
@@ -28,7 +28,7 @@
 <script>
 import work from './work'
 	export default {
-		emits:["changePhase","choiceAnswer","submitTask","getTaskList","deleteFile","addFile"],
+		emits:["changePhase","choiceAnswer","submitTask","getTaskList","deleteFile","addFile","lookFile"],
 		props:{
 			phase:{
 				type:Object,
@@ -74,6 +74,9 @@ import work from './work'
 			deleteFile(index){
 				this.$emit("deleteFile",index)
 			},
+			lookFile(index){
+				this.$emit("lookFile",index)
+			},
 			addFile(obj){
 				this.$emit("addFile",obj)
 			},

src/components/pages/pblCourse/component/procedureArea.vue

@@ -125,7 +125,7 @@
 }
 
 .content .procedure_content.active > .name{
-	border: none;
+	/* border: none;  */
     background: linear-gradient(90deg, #3673E8 0%, #AD88FD 100%);
 }
 

src/components/pages/pblCourse/component/vpdf.vue

@@ -0,0 +1,252 @@
+<template>
+  <!--使用 pdfvuer 实现 滑动浏览 单印章-->
+  <div class="pdf">
+    <div class="loading" v-show="isloading">
+      <span>pdf可能会加载时间有点长，请耐心等待...</span>
+    </div>
+    <!-- <div id="contentArea" class="show" v-if="!loading">
+      <pdf :scale.sync="scale" :resize="true" ref="wrapper" class="p-pdf" :src="pdfData" v-for="i in numPages" :key="i"
+        :id="i" :page="i" style="width: 100%">
+      </pdf>
+    </div> -->
+    <iframe ref="viframe" style="width: 100%; height: 99%; border: none"
+      :src="'https://cloud.cocorobo.cn/pdf.js/web/viewer.html?file=' + pdfUrl"></iframe>
+    <!-- <div class="rightArea">
+      <div class="toolGroup">
+        <div class="page">第 {{ page }} / {{ numPages }} 页</div>
+        <el-button type="primary" @click.stop="prePage">上一页</el-button>
+        <el-button type="primary" @click.stop="nextPage">下一页</el-button>
+      </div>
+    </div> -->
+  </div>
+</template>
+
+<script>
+// import pdfvuer from "pdfvuer"; // pdfvuer 版本为@1.6.1
+// import "pdfjs-dist/build/pdf.worker.entry";
+// const PDF = require("pdfjs-dist");
+// PDF.GlobalWorkerOptions.workerSrc = "../../common/pdf.worker.js";
+
+export default {
+  name: "Pdfvuer",
+  components: {
+    // pdf: pdfvuer,
+  },
+  props: {
+    // 当前pdf路径
+    pdfUrl: {
+      type: String,
+      default:
+        "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/0629%E5%AE%9E%E6%97%B6%E8%AF%BE%E5%A0%82%E6%A8%A1%E6%8B%9F%E6%BC%94%E7%A4%BA%E8%AF%BE%E4%BB%B61656920880446.pdf",
+    },
+    ppage: {
+      type: Number,
+      default: 1,
+    },
+  },
+  data() {
+    return {
+      page: 1, // 当前页
+      numPages: 0, // 总页数
+      pdfData: undefined,
+      inputPage: 1, // 输入的页码
+      isloading: false,
+      scale: "page-width",
+    };
+  },
+  mounted() {
+    // this.isloading = this.$loading.service({
+    //   background: "rgba(255, 255, 255, 0.7)",
+    //   target: document.querySelector(".loading"),
+    //   text: "加载中...",
+    //   spinner: "",
+    // });
+    this.isloading = false;
+    this.$refs.viframe.onload = function () {
+      this.isloading = false
+    }
+    console.log(this.isloading);
+    // this.getPdf();
+  },
+  beforeDestroy() { },
+  watch: {
+    pdfUrl: function (s) {
+      // this.isloading = this.$loading.service({
+      //   background: "rgba(255, 255, 255, 0.7)",
+      //   target: document.querySelector(".loading"),
+      //   text: "加载中...",
+      //   spinner: "",
+      // });
+      this.isloading = false;
+      this.$refs.viframe.onload = function () {
+        this.isloading = false
+      }
+      // this.getPdf();
+    },
+  },
+  methods: {
+    // 获取 pdf 信息
+    getPdf() {
+      this.pdfData = pdfvuer.createLoadingTask({
+        url: this.pdfUrl,
+        cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.16.105/cmaps/",
+        cMapPacked: true,
+      });
+      this.pdfData
+        .then((pdf) => {
+          // this.isloading.close();
+          this.isloading = false
+          this.numPages = pdf.numPages;
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    // 上一页
+    prePage() {
+      let page = this.page;
+      page = page > 1 ? page - 1 : 1;
+      this.page = page;
+    },
+    // 下一页
+    nextPage() {
+      let page = this.page;
+      page = page < this.numPages ? page + 1 : this.numPages;
+      this.page = page;
+    },
+  },
+};
+</script>
+<style scoped>
+.loading {
+  height: 100%;
+  width: 100%;
+  /* background: #000; */
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* background-color: rgba(255, 255, 255, 0.7); */
+  background-color: rgba(255, 255, 255, 1);
+  z-index: 9;
+  font-size: 20px;
+  color: #007fff;
+}
+
+.pdf {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.pdf .show {
+  margin: auto;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.pdf .show .p-pdf {
+  overflow: hidden;
+}
+
+.pdf .show .p-pdf .line {
+  position: absolute;
+  width: 50px;
+  right: -50px;
+  background: rgb(255, 186, 96);
+  height: 2px;
+}
+
+.pdf .show .p-pdf span {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+}
+
+.pdf .show .p-pdf span+span {
+  margin-top: 10px;
+}
+
+.pdfbox {
+  /* border: 3px solid #000; */
+  /* box-sizing: border-box; */
+  /* border-radius: 4px; */
+  /* overflow: hidden; */
+}
+
+.pdf .pdf_footer {
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 10px 0;
+  width: 100%;
+  height: 75px;
+  background-color: rgba(255, 255, 255, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.pdf .pdf_footer .info {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  justify-content: center;
+}
+
+.pdf .p-pdf .viewerContainer {
+  width: 100%;
+}
+
+/* .pdf .pdf_footer .info div {
+  width: 30%;
+} */
+.pdf .pdf_footer .operate {
+  margin: 10px 0 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+}
+
+.pdf .pdf_footer .operate div {
+  text-align: center;
+  font-size: 15px;
+}
+
+.pdf .pdf_footer .operate .btn {
+  cursor: pointer;
+  margin: 5px 10px;
+  width: 100px;
+  border-radius: 10px;
+  padding: 5px;
+  color: #fff;
+  background-color: #066ebe;
+}
+
+.pdf::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 6px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 6px;
+}
+
+/*定义滚动条轨道 内阴影+圆角*/
+.pdf::-webkit-scrollbar {
+  border-radius: 10px;
+  background-color: #b8bdc9;
+}
+
+/*定义滑块 内阴影+圆角*/
+.pdf::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgb(96, 125, 184);
+  background-color: #2c5ab3;
+}
+</style>

src/components/pages/pblCourse/component/work.vue

@@ -1,624 +1,697 @@
 <template>
-	<div class="work" ref="workRef" v-loading="loading">
-		<div class="w_nowWork">
-			<div class="w_nw_header">
-				<div class="w_nw_h_title">
-					<img :src="require('../../../../assets/icon/pblCourse/taskIcon.png')">  
-					<span>当前任务</span>
-				</div>
-				<div class="w_nw_h_btn" @click.stop="changeTask" v-if="!(phase.doPhase>phase.atPhase)">
-					<img :src="require('../../../../assets/icon/pblCourse/changeIcon.png')">
-					<span>更换任务</span>
-				</div>
-			</div>
-			<div class="w_nw_introduce">
-				<div v-html="htmlText(task.target)" style="font-weight: bold;"></div>
-				<div v-html="htmlText(task.detail)"></div>
-				<div v-html="htmlText(task.steps)"></div>
-				<div v-html="htmlText(task.tips)"></div>
-			</div>
-		</div>
-		<div class="w_doWork">
-			<div class="w_dw_header">
-				<div class="w_dw_h_title">
-					<img :src="require('../../../../assets/icon/pblCourse/doWorkIcon.png')">  
-					<span>通关挑战（{{taskIndex+1}}/{{task.answerArray?task.answerArray.length:5}}）</span>
-				</div>
-				<div class="w_dw_h_controls">
-					<span @click.stop="back()" :class="[taskIndex==0?'w_dw_h_c_disabled':'']">上一题</span>
-					<span @click.stop="down()" v-show="taskIndex!=4">下一题</span>
-					<span @click.stop="submitTask()" class="w_dw_h_c_submit" v-show="taskIndex==4">提交</span>
-				</div>
-			</div>
-			<div class="w_dw_work">
-					<span class="w_dw_w_title">{{ taskIndex+1 }}.{{ task.answerArray?task.answerArray[taskIndex].title:"" }}</span>
-					<div class="w_dw_w_radio">
-						<el-radio-group class="w_dw_w_r_group" v-model="task.answerArray[taskIndex].userAnswer" size="medium" @input="choiceAnswer">
-  					  <el-radio class="w_dw_w_r_g_item" v-for="(item,index) in task.answerArray?task.answerArray[taskIndex].option:[]" :key="index+''+taskIndex" size="medium " :label="index" @input="choiceAnswer">{{ item }}</el-radio>
-  					</el-radio-group>
-					</div>
-				</div>
-		</div>
-		<div class="w_submitWork">
-			<div class="w_sw_header">
-				<div class="w_sw_h_title">
-					<img :src="require('../../../../assets/icon/pblCourse/bookIcon.png')">
-					<span>提交作业</span>
-					<div class="w_sw_h_t_brief">(支持txt、doc、xlsx、png、jpg、jpeg、wav格式的文件上传)</div>
-				</div>
-				<div class="w_sw_h_controls">
-					<span @click="uploadFile">上传</span>
-					<span class="w_sw_h_t_submit" @click.stop="submitTask2()">提交</span>
-				</div>
-			</div>
-			<div class="w_sw_fileBox" v-if="task.fileList.length>0">
-				<div :class="['w_sw_fb_item',index%2!==0?'w_sw_fb_item2':'']" v-for="(item,index) in task.fileList" :key="index">
-					<div class="w_sw_fb_i_left" @click="previewFile(item)">
-						<img :src="require('../../../../assets/icon/pblCourse/file1.png')">
-						<span>{{ item.fileName }}</span>
-					</div>
-					<div class="w_sw_fb_i_right">
-						<el-tooltip class="item" effect="light" content="删除" placement="top">
-							<span class="w_sw_fb_i_r_delete" @click.stop="delFile(item,index)">
-							<img :src="require('../../../../assets/icon/pblCourse/del.png')">
-						</span>
-    			</el-tooltip>
-						
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+  <div class="work" ref="workRef" v-loading="loading">
+    <div class="w_nowWork">
+      <div class="w_nw_header">
+        <div class="w_nw_h_title">
+          <img
+            :src="require('../../../../assets/icon/pblCourse/taskIcon.png')"
+          />
+          <span>当前任务</span>
+        </div>
+        <div
+          class="w_nw_h_btn"
+          @click.stop="changeTask"
+          v-if="!(phase.doPhase > phase.atPhase)"
+        >
+          <img
+            :src="require('../../../../assets/icon/pblCourse/changeIcon.png')"
+          />
+          <span>更换任务</span>
+        </div>
+      </div>
+      <div class="w_nw_introduce">
+        <div v-html="htmlText(task.target)" style="font-weight: bold;"></div>
+        <div v-html="htmlText(task.detail)"></div>
+        <div v-html="htmlText(task.steps)"></div>
+        <div v-html="htmlText(task.tips)"></div>
+      </div>
+    </div>
+    <div class="w_doWork">
+      <div class="w_dw_header">
+        <div class="w_dw_h_title">
+          <img
+            :src="require('../../../../assets/icon/pblCourse/doWorkIcon.png')"
+          />
+          <span
+            >通关挑战（{{ taskIndex + 1 }}/{{
+              task.answerArray ? task.answerArray.length : 5
+            }}）</span
+          >
+        </div>
+        <div class="w_dw_h_controls">
+          <span
+            @click.stop="back()"
+            :class="[taskIndex == 0 ? 'w_dw_h_c_disabled' : '']"
+            >上一题</span
+          >
+          <span @click.stop="down()" v-show="taskIndex != 4">下一题</span>
+          <span
+            @click.stop="submitTask()"
+            class="w_dw_h_c_submit"
+            v-show="taskIndex == 4"
+            >提交</span
+          >
+        </div>
+      </div>
+      <div class="w_dw_work">
+        <span class="w_dw_w_title"
+          >{{ taskIndex + 1 }}.{{
+            task.answerArray ? task.answerArray[taskIndex].title : ""
+          }}</span
+        >
+        <div class="w_dw_w_radio">
+          <el-radio-group
+            class="w_dw_w_r_group"
+            v-model="task.answerArray[taskIndex].userAnswer"
+            size="medium"
+            @input="choiceAnswer"
+          >
+            <el-radio
+              class="w_dw_w_r_g_item"
+              v-for="(item, index) in task.answerArray
+                ? task.answerArray[taskIndex].option
+                : []"
+              :key="index + '' + taskIndex"
+              size="medium "
+              :label="index"
+              @input="choiceAnswer"
+              >{{ item }}</el-radio
+            >
+          </el-radio-group>
+        </div>
+      </div>
+    </div>
+    <div class="w_submitWork">
+      <div class="w_sw_header">
+        <div class="w_sw_h_title">
+          <img
+            :src="require('../../../../assets/icon/pblCourse/bookIcon.png')"
+          />
+          <span>提交作业</span>
+          <div class="w_sw_h_t_brief">
+            (支持txt、doc、xlsx、png、jpg、jpeg、wav格式的文件上传)
+          </div>
+        </div>
+        <div class="w_sw_h_controls">
+          <span @click="uploadFile">上传</span>
+          <span class="w_sw_h_t_submit" @click.stop="submitTask()">提交</span>
+        </div>
+      </div>
+      <div class="w_sw_fileBox" v-if="task.fileList.length > 0">
+        <div
+          :class="['w_sw_fb_item', index % 2 !== 0 ? 'w_sw_fb_item2' : '']"
+          v-for="(item, index) in task.fileList"
+          :key="index"
+        >
+          <div class="w_sw_fb_i_left" @click="previewFile(item)">
+            <img
+              :src="require('../../../../assets/icon/pblCourse/priFileImg.png')"
+            />
+            <span>{{ item.fileName }}</span>
+          </div>
+          <div class="w_sw_fb_i_right">
+            <el-tooltip
+              class="item"
+              effect="light"
+              content="删除"
+              placement="top"
+            >
+              <span
+                class="w_sw_fb_i_r_delete"
+                @click.stop="delFile(item, index)"
+              >
+                <img
+                  :src="require('../../../../assets/icon/pblCourse/del.png')"
+                />
+              </span>
+            </el-tooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	import MarkdownIt from "markdown-it";
-	import '@/common/aws-sdk-2.235.1.min.js'
-	export default {
-		emits:['choiceAnswer','submitTask',"getTaskList","deleteFile","addFile"],
-		props:{
-			task:{
-				type:Object,
-				default:()=>{
-					return{
-						answerArray:[
-							{}
-						]
-					}
-				},
-				
-			},
-			phase:{
-				type:Object,
-				default:()=>{
-					return {
-						doPhase:0,
-						atPhase:0,
-					}
-				}
-			},
-
-		},
-		data(){
-			return{
-				taskIndex:0,
-				detail:"",
-				steps:"",
-				target:"",
-				tips:"",
-				loading:false,
-			}
-		},
-		computed:{
-			htmlText(){
-				return (mdText)=>{
-					const md = new MarkdownIt();
-					return md.render(mdText)
-				}
-			}
-		},
-		watch:{
-			task(){
-				this.taskIndex = 0;
-				this.$refs.workRef?this.$refs.workRef.scrollTop = 0:'';
-				// this.$refs.workRef.scrollTop = 0;
-			}
-		},
-		methods:{
-			changeTask(){
-				this.$emit("getTaskList",this.phase.atPhase)
-			},
-			back(){
-				if(this.taskIndex==0)return;
-				this.taskIndex-=1;
-			},
-			down(){
-				if(this.taskIndex>=(this.task?this.task.answerArray.length-1:5))return;
-				this.taskIndex+=1;
-			},
-			choiceAnswer(_index){
-				this.$emit("choiceAnswer",[this.taskIndex,_index])
-				this.$forceUpdate();
-			},
-			submitTask(){
-				if((this.phase.doPhase>this.phase.atPhase) || this.phase.doPhase>=5)return this.$message.error("该阶段已提交过了")
-				this.$emit("submitTask")
-			},
-			submitTask2(){
-				return console.log('第二个提交')
-			},
-			uploadFile(){
-			let input = document.createElement("input");
-			input.type = "file";
-			input.accept = "*";
-			input.click();
-			input.onchange = () => {
-				this.uploadFileLoading = true;
-				let file = input.files[0];
-				// if(!/\.(wav|txt|pdf|xlsx|doc|docx)$/i.test(file.name)){
-				// 	this.uploadFileLoading = false;
-				// 	return this.$message.info("请上传.wav,.txt,.pdf,.xlsx,.doc,.docx格式的文件")
-				// }
-				var credentials = {
-				accessKeyId: "AKIATLPEDU37QV5CHLMH",
-				secretAccessKey: "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",
-			}; //秘钥形式的登录上传
-			window.AWS.config.update(credentials);
-			window.AWS.config.region = "cn-northwest-1"; //设置区域
-
-			var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
-			var _this = this;
-
-			if (file) {
-				this.loading = true;
-				var params = {
-					Key:
-						file.name.split(".")[0] +
-						new Date().getTime() +
-						"." +
-						file.name.split(".")[file.name.split(".").length - 1],
-					ContentType: file.type,
-					Body: file,
-					"Access-Control-Allow-Credentials": "*",
-					ACL: "public-read",
-				}; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
-				var options = {
-					partSize: 2048 * 1024 * 1024,
-					queueSize: 2,
-					leavePartsOnError: true,
-				};
-				bucket
-					.upload(params, options)
-					.on("httpUploadProgress", function (evt) {
-						//这里可以写进度条
-						// console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
-					})
-					.send(function (err, data) {
-						if (err) {
-							_this.$message.error("上传失败");
-							_this.loading = false;
-						} else {
-							_this.loading = false;
-							_this.$emit("addFile",{
-									fileName:data.key,
-									url:data.Location,
-							})
-							// _this.fileList.push({
-							// 	fileName:data.key,
-							// 	url:data.Location,
-							// })
-							console.log(data);
-						}
-					});
-				}
-			}
-			},
-			delFile(_item,_index){
-				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
-					confirmButtonText: '确定',
-					cancelButtonText: '取消',
-					type: 'warning'
-				}).then(() => {
-					this.$emit("deleteFile",_index)
-					// this.fileList.splice(_index,1);
-				}).catch(_=>{
-					console.log("取消删除")
-				});
-				
-			},
-			previewFile(_item){
-				this.$message.info(`预览文件:${_item.filename}`)
-			}
-		}
-	}
+import MarkdownIt from "markdown-it";
+import "@/common/aws-sdk-2.235.1.min.js";
+export default {
+  emits: [
+    "choiceAnswer",
+    "submitTask",
+    "getTaskList",
+    "deleteFile",
+    "addFile",
+    "lookFile"
+  ],
+  props: {
+    task: {
+      type: Object,
+      default: () => {
+        return {
+          answerArray: [{}]
+        };
+      }
+    },
+    phase: {
+      type: Object,
+      default: () => {
+        return {
+          doPhase: 0,
+          atPhase: 0
+        };
+      }
+    }
+  },
+  data() {
+    return {
+      taskIndex: 0,
+      detail: "",
+      steps: "",
+      target: "",
+      tips: "",
+      loading: false
+    };
+  },
+  computed: {
+    htmlText() {
+      return mdText => {
+        const md = new MarkdownIt();
+        return md.render(mdText);
+      };
+    }
+  },
+  watch: {
+    task() {
+      this.taskIndex = 0;
+      this.$refs.workRef ? (this.$refs.workRef.scrollTop = 0) : "";
+      // this.$refs.workRef.scrollTop = 0;
+    }
+  },
+  methods: {
+    changeTask() {
+      this.$emit("getTaskList", this.phase.atPhase);
+    },
+    back() {
+      if (this.taskIndex == 0) return;
+      this.taskIndex -= 1;
+    },
+    down() {
+      if (this.taskIndex >= (this.task ? this.task.answerArray.length - 1 : 5))
+        return;
+      this.taskIndex += 1;
+    },
+    choiceAnswer(_index) {
+      this.$emit("choiceAnswer", [this.taskIndex, _index]);
+      this.$forceUpdate();
+    },
+    submitTask() {
+    //   console.log(this.phase.doPhase, this.phase.atPhase);
+      if (this.phase.doPhase == 5) {
+		return this.$message("所有阶段已经完成");
+      }
+      if (this.phase.doPhase > this.phase.atPhase || this.phase.doPhase >= 5)
+        return this.$message.error("该阶段已提交过了");
+      this.$emit("submitTask");
+    },
+    submitTask2() {
+      return console.log("第二个提交");
+    },
+    uploadFile() {
+      let input = document.createElement("input");
+      input.type = "file";
+      input.accept = "*";
+      input.click();
+      input.onchange = () => {
+        this.uploadFileLoading = true;
+        let file = input.files[0];
+        // if(!/\.(wav|txt|pdf|xlsx|doc|docx)$/i.test(file.name)){
+        // 	this.uploadFileLoading = false;
+        // 	return this.$message.info("请上传.wav,.txt,.pdf,.xlsx,.doc,.docx格式的文件")
+        // }
+        var credentials = {
+          accessKeyId: "AKIATLPEDU37QV5CHLMH",
+          secretAccessKey: "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"
+        }; //秘钥形式的登录上传
+        window.AWS.config.update(credentials);
+        window.AWS.config.region = "cn-northwest-1"; //设置区域
+
+        var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
+        var _this = this;
+
+        if (file) {
+          this.loading = true;
+          var params = {
+            Key:
+              file.name.split(".")[0] +
+              new Date().getTime() +
+              "." +
+              file.name.split(".")[file.name.split(".").length - 1],
+            ContentType: file.type,
+            Body: file,
+            "Access-Control-Allow-Credentials": "*",
+            ACL: "public-read"
+          }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
+          var options = {
+            partSize: 2048 * 1024 * 1024,
+            queueSize: 2,
+            leavePartsOnError: true
+          };
+          bucket
+            .upload(params, options)
+            .on("httpUploadProgress", function(evt) {
+              //这里可以写进度条
+              // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
+            })
+            .send(function(err, data) {
+              if (err) {
+                _this.$message.error("上传失败");
+                _this.loading = false;
+              } else {
+                _this.loading = false;
+                _this.$emit("addFile", {
+                  fileName: data.key,
+                  url: data.Location
+                });
+                // _this.fileList.push({
+                // 	fileName:data.key,
+                // 	url:data.Location,
+                // })
+                console.log(data);
+              }
+            });
+        }
+      };
+    },
+    delFile(_item, _index) {
+      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          this.$emit("deleteFile", _index);
+          // this.fileList.splice(_index,1);
+        })
+        .catch(_ => {
+          console.log("取消删除");
+        });
+    },
+    previewFile(_item) {
+      console.log(_item);
+      if (/\.(jpeg|jpg|png|img)$/i.test(_item.url)) {
+        this.$hevueImgPreview(_item.url);
+      } else {
+        this.$emit("lookFile", _item.url);
+      }
+      // this.$message.info(`预览文件:${_item.filename}`)
+    }
+  }
+};
 </script>
 
 <style scoped>
-.work{
-	width: 100%;
-	height: auto;
-	box-sizing: border-box;
-	/* padding: 25px; */
-	/* background-color: aqua; */
+.work {
+  width: 100%;
+  height: auto;
+  box-sizing: border-box;
+  /* padding: 25px; */
+  /* background-color: aqua; */
 }
 
-.w_nowWork{
-	width: 100%;
-	height: auto;
-	margin-bottom: 20px;
-	background-color: #F3F7FD;
-	box-sizing: border-box;
-	padding: 20px;
-	border-radius: 8px;
+.w_nowWork {
+  width: 100%;
+  height: auto;
+  margin-bottom: 20px;
+  background-color: #f3f7fd;
+  box-sizing: border-box;
+  padding: 20px;
+  border-radius: 8px;
 }
 
-.w_nw_header{
-	width: 100%;
-	display: flex;
-	justify-content: space-between;
-	height: 35px;
-	margin-bottom: 20px;
+.w_nw_header {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  height: 35px;
+  margin-bottom: 20px;
 }
 
-.w_nw_h_title{
-	display: flex;
-	align-items: center;
+.w_nw_h_title {
+  display: flex;
+  align-items: center;
 }
 
-.w_nw_h_title>img{
-	width: 50px;
-	height: 50px;
-	margin-right: 10px;
+.w_nw_h_title > img {
+  width: 50px;
+  height: 50px;
+  margin-right: 10px;
 }
 
-.w_nw_h_title>span{
-	font-size: 24px;
-	font-weight: bold;
-	background: linear-gradient(to right, #3673E8, #AD88FD);
-	-webkit-background-clip: text;
-	color: transparent;
+.w_nw_h_title > span {
+  font-size: 24px;
+  font-weight: bold;
+  background: linear-gradient(to right, #3673e8, #ad88fd);
+  -webkit-background-clip: text;
+  color: transparent;
 }
 
-.w_nw_h_btn{
-	width: auto;
-	height: 100%;
-	border-radius: 100px;
-	box-sizing: border-box;
-	border: solid 1px #AD88FD;
-	background-color: white;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	padding: 0px 20px 0 10px;
-	cursor: pointer;
-	transition: .3s;
+.w_nw_h_btn {
+  width: auto;
+  height: 100%;
+  border-radius: 100px;
+  box-sizing: border-box;
+  border: solid 1px #ad88fd;
+  background-color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0px 20px 0 10px;
+  cursor: pointer;
+  transition: 0.3s;
 }
 
-.w_nw_h_btn:hover{
-	background-color: rgb(248, 246, 246);
+.w_nw_h_btn:hover {
+  background-color: rgb(248, 246, 246);
 }
 
-.w_nw_h_btn>img{
-	width: 20px;
-	height: 20px;
-	margin-right: 10px;
+.w_nw_h_btn > img {
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
 }
 
-.w_nw_h_btn>span{
-	font-size: 16px;
+.w_nw_h_btn > span {
+  font-size: 16px;
 }
 
-.w_nw_introduce>div{
-	margin: 20px 0px;
+.w_nw_introduce > div {
+  margin: 20px 0px;
 }
 
-.w_nw_introduce >>> ol{
-	margin-left: 25px;
+.w_nw_introduce >>> ol {
+  margin-left: 25px;
 }
 
 .w_nw_introduce >>> ul {
-	margin-left: 25px;
+  margin-left: 25px;
 }
 
-.w_nw_introduce >>> h2{
-	margin-top: 10px;
+.w_nw_introduce >>> h2 {
+  margin-top: 10px;
 }
-.w_nw_introduce >>> h3{
-	margin-top: 10px;
+.w_nw_introduce >>> h3 {
+  margin-top: 10px;
 }
-.w_nw_introduce >>> h4{
-	margin-top: 10px;
+.w_nw_introduce >>> h4 {
+  margin-top: 10px;
 }
-.w_nw_introduce >>> h5{
-	margin-top: 10px;
+.w_nw_introduce >>> h5 {
+  margin-top: 10px;
 }
-.w_nw_introduce >>> h6{
-	margin-top: 10px;
+.w_nw_introduce >>> h6 {
+  margin-top: 10px;
 }
 
-
-
-.w_doWork{
-	width: 100%;
-	height: auto;
-	box-sizing: border-box;
-	padding: 20px;
-	background-color: #F3F7FD;
-	margin-bottom: 20px;
-	border-radius: 8px;
-
+.w_doWork {
+  width: 100%;
+  height: auto;
+  box-sizing: border-box;
+  padding: 20px;
+  background-color: #f3f7fd;
+  margin-bottom: 20px;
+  border-radius: 8px;
 }
 
-.w_dw_header{
-	width: 100%;
-	display: flex;
-	justify-content: space-between;
-	height: 35px;
-	margin-bottom: 20px;
+.w_dw_header {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  height: 35px;
+  margin-bottom: 20px;
 }
 
-.w_dw_h_title{
-	display: flex;
-	align-items: center;
+.w_dw_h_title {
+  display: flex;
+  align-items: center;
 }
 
-.w_dw_h_title>img{
-	width: 50px;
-	height: 50px;
-	margin-right: 10px;
+.w_dw_h_title > img {
+  width: 50px;
+  height: 50px;
+  margin-right: 10px;
 }
 
-.w_dw_h_title>span{
-	font-size: 24px;
-	font-weight: bold;
-	background: linear-gradient(to right, #3673E8, #AD88FD);
-	-webkit-background-clip: text;
-	color: transparent;
+.w_dw_h_title > span {
+  font-size: 24px;
+  font-weight: bold;
+  background: linear-gradient(to right, #3673e8, #ad88fd);
+  -webkit-background-clip: text;
+  color: transparent;
 }
 
-.w_dw_h_controls{
-	display: flex;
-	align-items: center;
+.w_dw_h_controls {
+  display: flex;
+  align-items: center;
 }
 
-.w_dw_h_c_disabled{
-	opacity: .5;
-	cursor: not-allowed !important;
+.w_dw_h_c_disabled {
+  opacity: 0.5;
+  cursor: not-allowed !important;
 }
 
-.w_dw_h_c_submit{
-	background:linear-gradient(to right,#6082E5,#A293F3);
-	color: white;
-	padding: 0 23px !important;
-	/* 不可选中 */
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
+.w_dw_h_c_submit {
+  background: linear-gradient(to right, #6082e5, #a293f3);
+  color: white;
+  padding: 0 23px !important;
+  /* 不可选中 */
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
-
-.w_dw_h_controls>span{
-	font-size: 16px;
-	margin-left: 20px;
-	cursor: pointer;
-	transition: .3s;
-	box-sizing: border-box;
-	padding: 0 15px;
-	background-color: white;
-	height: 100%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	border-radius: 100px;
-	border: solid 1px #AD88FD;
-	/* 不可选中 */
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
+.w_dw_h_controls > span {
+  font-size: 16px;
+  margin-left: 20px;
+  cursor: pointer;
+  transition: 0.3s;
+  box-sizing: border-box;
+  padding: 0 15px;
+  background-color: white;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100px;
+  border: solid 1px #ad88fd;
+  /* 不可选中 */
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
-.w_dw_h_controls>span:hover{
-	background-color: rgb(248, 246, 246);
+.w_dw_h_controls > span:hover {
+  background-color: rgb(248, 246, 246);
 }
 
-.w_dw_work{
-	width: 100%;
-	height: auto;
-
+.w_dw_work {
+  width: 100%;
+  height: auto;
 }
 
-.w_dw_w_title{
-	font-size: 20px;
-	font-weight: bold;
+.w_dw_w_title {
+  font-size: 20px;
+  font-weight: bold;
 }
 
-.w_dw_w_radio{
-	margin-top: 10px;
+.w_dw_w_radio {
+  margin-top: 10px;
 }
 
-.w_dw_w_r_group{
-	display: flex;
-	flex-direction: column;
-	margin-top: 10px;
+.w_dw_w_r_group {
+  display: flex;
+  flex-direction: column;
+  margin-top: 10px;
 }
 
-.w_dw_w_r_g_item{
-	margin-top: 15px;
+.w_dw_w_r_g_item {
+  margin-top: 15px;
 }
 
-.w_dw_w_r_g_item>>>.el-radio__label{
-	font-size: 16px;
+.w_dw_w_r_g_item >>> .el-radio__label {
+  font-size: 16px;
 }
 
-.w_dw_w_r_g_item>>>.el-radio__inner{
-	width: 20px;
-	height: 20px;
-	margin-right: 5px;
+.w_dw_w_r_g_item >>> .el-radio__inner {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
 }
 
-.w_submitWork{
-	width: 100%;
-	height: auto;
-	background-color: #F3F7FD;
-	margin-bottom: 20px;
-	box-sizing: border-box;
-	padding: 20px;
-	border-radius: 8px;
+.w_submitWork {
+  width: 100%;
+  height: auto;
+  background-color: #f3f7fd;
+  margin-bottom: 20px;
+  box-sizing: border-box;
+  padding: 20px;
+  border-radius: 8px;
 }
 
-.w_sw_header{
-	width: 100%;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	height: 35px;
+.w_sw_header {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 35px;
 }
 
-.w_sw_h_title{
-	display: flex;
-	align-items: center;
+.w_sw_h_title {
+  display: flex;
+  align-items: center;
 }
 
-.w_sw_h_title>img{
-	width: 50px;
-	height: 50px;
-	margin-right: 10px;
+.w_sw_h_title > img {
+  width: 50px;
+  height: 50px;
+  margin-right: 10px;
 }
 
-.w_sw_h_title>span{
-	font-size: 24px;
-	font-weight: bold;
-	background: linear-gradient(to right, #3673E8, #AD88FD);
-	-webkit-background-clip: text;
-	color: transparent;
+.w_sw_h_title > span {
+  font-size: 24px;
+  font-weight: bold;
+  flex-shrink: 0;
+  background: linear-gradient(to right, #3673e8, #ad88fd);
+  -webkit-background-clip: text;
+  color: transparent;
 }
 
-.w_sw_h_t_brief{
-	font-size: 20px !important;
-	color:#00000066 !important;
-	font-weight: 400 !important;
-	margin-left: 20px;
+.w_sw_h_t_brief {
+  font-size: 20px !important;
+  color: #00000066 !important;
+  font-weight: 400 !important;
+  margin-left: 20px;
 }
 
-.w_sw_h_controls{
-	display: flex;
-	align-items: center;
+.w_sw_h_controls {
+  display: flex;
+  align-items: center;
 }
 
-.w_sw_h_controls>span{
-	font-size: 16px;
-	margin-left: 20px;
-	cursor: pointer;
-	transition: .3s;
-	box-sizing: border-box;
-	/* padding: 0 15px; */
-	padding: 0 23px;
-	background-color: white;
-	height: 35px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	border-radius: 100px;
-	border: solid 1px #AD88FD;
-	/* 不可选中 */
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
+.w_sw_h_controls > span {
+  font-size: 16px;
+  margin-left: 20px;
+  flex-shrink: 0;
+  cursor: pointer;
+  transition: 0.3s;
+  box-sizing: border-box;
+  /* padding: 0 15px; */
+  padding: 0 23px;
+  background-color: white;
+  height: 35px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100px;
+  border: solid 1px #ad88fd;
+  /* 不可选中 */
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
-.w_sw_h_controls>span:hover{
-	background-color: rgb(248, 246, 246);
+.w_sw_h_controls > span:hover {
+  background-color: rgb(248, 246, 246);
 }
 
-.w_sw_h_t_submit{
-	background:linear-gradient(to right,#6082E5,#A293F3);
-	color: white;
+.w_sw_h_t_submit {
+  background: linear-gradient(to right, #6082e5, #a293f3);
+  color: white;
 }
 
-.w_sw_fileBox{
-	width: 100%;
-	height: auto;
-	margin-top: 20px;
-	display: flex;
-	flex-wrap: wrap;
+.w_sw_fileBox {
+  width: 100%;
+  height: auto;
+  margin-top: 20px;
+  display: flex;
+  flex-wrap: wrap;
 }
 
-.w_sw_fb_item{
-	width: 49.5%;
-	height: 45px;
-	margin-bottom: 10px;
-	margin-right: 1%;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	box-sizing: border-box;
-	padding: 0 10px;
-	background-color: #FFFFFF;
-	border: solid 1px #E7E7E7;
-	border-radius: 4px;
-	position: relative;
+.w_sw_fb_item {
+  width: 49.5%;
+  height: 45px;
+  margin-bottom: 10px;
+  margin-right: 1%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 0 10px;
+  background-color: #ffffff;
+  border: solid 1px #e7e7e7;
+  border-radius: 4px;
+  position: relative;
 }
 
-.w_sw_fb_item:hover{
-	border: solid 1px #3681FC;
+.w_sw_fb_item:hover {
+  border: solid 1px #3681fc;
 }
 
-.w_sw_fb_item2{
-	margin-right: 0 !important;
+.w_sw_fb_item2 {
+  margin-right: 0 !important;
 }
 
-.w_sw_fb_i_left{
-	width: calc(100% - 80px);
-	cursor: pointer;
-	display: flex;
-	align-items: center;
-	position: relative;
+.w_sw_fb_i_left {
+  width: calc(100% - 80px);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  position: relative;
 }
 
-.w_sw_fb_i_left>span{
-	/* 字体溢出隐藏 */                   
-	width: 80%;
-	display: block;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	
-}
+.w_sw_fb_i_left > span {
+  /* 字体溢出隐藏 */
+  width: 80%;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
-.w_sw_fb_i_left>img{
-	width: 30px;
-	height: 30px;
-	margin-right: 10px;
+.w_sw_fb_i_left > img {
+  width: 15px;
+  height: 15px;
+  margin-right: 10px;
 }
 
-.w_sw_fb_i_right{
-	width: 80px;
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	height: auto;
+.w_sw_fb_i_right {
+  width: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  height: auto;
 }
 
-.w_sw_fb_item:hover .w_sw_fb_i_r_delete{
-	display: flex;
+.w_sw_fb_item:hover .w_sw_fb_i_r_delete {
+  display: flex;
 }
 
-.w_sw_fb_i_right>span{
-	width: 30px;
-	height: 30px;
-	background-color: #F3F7FD;
-	display: none;
-	border-radius: 4px;
-	justify-content: center;
-	align-items: center;
-	cursor: pointer;
+.w_sw_fb_i_right > span {
+  width: 30px;
+  height: 30px;
+  background-color: #f3f7fd;
+  display: none;
+  border-radius: 4px;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
 }
 
-.w_sw_fb_i_right>span>img{
-	width: 25px;
-	height: 25px;
+.w_sw_fb_i_right > span > img {
+  width: 25px;
+  height: 25px;
 }
-</style>
+</style>

src/components/pages/pblCourse/guide.vue

@@ -0,0 +1,674 @@
+<template>
+  <div class="guide">
+    <div style="padding-top: 60px;" v-if="show == 0">
+      <div class="guideIndex">
+        <img
+          style="width: 200px;height: 200px;"
+          src="../../../assets/icon/pblCourse/helloworldQs.gif"
+          alt=""
+        />
+        <div class="guideIndexCon">
+          Hi~ 同学！😆 <br />
+          我是什么都知道的小可老师！😎 <br />
+          接下来，我会陪你一起学习这节课程！🧐 <br />
+          你，准备好了吗？😝
+        </div>
+        <div class="guideBtn" @click="dialogVisible = true">
+          <img
+            style="cursor: pointer"
+            src="../../../assets/icon/pblCourse/guidebtn.png"
+            alt=""
+          />
+        </div>
+      </div>
+
+      <div class="guideList">
+        <div class="guideListTop">
+          <div style="display: flex; align-items: center">
+            <img
+              style="margin-right: 10px"
+              src="../../../assets/icon/pblCourse/cardimg.png"
+              alt=""
+            />
+            <div class="guideListTopL">项目列表</div>
+          </div>
+          <div class="guideListTopR">
+            <div
+              style="display: flex; align-items: center; cursor: pointer"
+              @click="cutMoreProject"
+            >
+              <div class="guideListTopL">查看全部</div>
+              <img
+                style="margin-right: 10px"
+                src="../../../assets/icon/pblCourse/chevronRight.png"
+                alt=""
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="guideListListCon">
+          <div class="guideListLeft">
+            <img
+              v-if="Homepage == 1"
+              @click="Pre"
+              src="../../../assets/icon/pblCourse/FrameLeft.png"
+              alt=""
+            />
+            <img
+              v-else
+              @click="Pre"
+              style="transform: rotate(180deg);"
+              src="../../../assets/icon/pblCourse/FrameRig.png"
+              alt=""
+            />
+          </div>
+          <div class="guideListRig">
+            <img
+              @click="Nxt"
+              v-if="nowNxt"
+              src="../../../assets/icon/pblCourse/FrameRig.png"
+              alt=""
+            />
+            <img
+              v-else
+              @click="Nxt"
+              style="transform: rotate(180deg);"
+              src="../../../assets/icon/pblCourse/FrameLeft.png"
+              alt=""
+            />
+          </div>
+          <div
+            v-for="(i, index) in homeProList"
+            :key="i.courseId"
+            class="guideListListConCard"
+            @click="gotoProDetail(i.courseId)"
+          >
+            <img
+              height="102px"
+              src="../../../assets/icon/pblCourse/guidebook.png"
+              alt=""
+            />
+            <div class="CardCon">
+              <div class="conTit">{{ i.title }}</div>
+              <div class="conTxt">
+                <div style="margin-right: 5px;">{{ i.time }}</div>
+                <div style="flex: 1;">
+                  <bars :doIndex="i.doIndex" :key="i.doIndex.toString()"></bars>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="show == 1">
+      <div class="moreProTop">
+        <div class="moreProSelect">
+          <el-select v-model="CheckboxCon" placeholder="请选择">
+            <el-option label="全部项目" :value="1"> </el-option>
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+          <el-input
+            v-model="selectInp"
+            suffix-icon="el-icon-search"
+            placeholder="搜索"
+          >
+          </el-input>
+          <div class="ResetBtn" @click="ResetSelect">重置</div>
+        </div>
+        <div class="addPro" @click="dialogVisible = true">
+          <img
+            style="margin-right: 5px"
+            src="../../../assets/icon/pblCourse/addPro.png"
+            alt=""
+          />
+          <span>新建项目</span>
+        </div>
+      </div>
+      <div class="moreProCon">
+        <div class="guideListListConCard moreProConIndCss">
+          <img
+            style="margin-bottom: 10px"
+            src="../../../assets/icon/pblCourse/addTitImg.png"
+            alt=""
+          />
+          <div class="addPro" @click="dialogVisible = true">
+            <img
+              style="margin-right: 5px"
+              src="../../../assets/icon/pblCourse/addPro.png"
+              alt=""
+            />
+            <span>新建项目</span>
+          </div>
+        </div>
+        <div
+          v-for="(i, index) in ProList"
+          :key="i.courseId"
+          class="guideListListConCard"
+          @click="gotoProDetail(i.courseId)"
+        >
+          <img
+            height="102px"
+            src="../../../assets/icon/pblCourse/guidebook.png"
+            alt=""
+          />
+          <div class="CardCon">
+            <div class="conTit">{{ i.title }}</div>
+            <div class="conTxt">
+              <div style="margin-right: 5px;">{{ i.time }}</div>
+              <div style="flex: 1;">
+                <bars :doIndex="i.doIndex" :key="i.doIndex.toString()"></bars>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div style="min-width: 928px;max-width: 1100px;margin: 15px auto;">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :page-size="14"
+          @current-change="handleCurrentChange"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+    <el-dialog :visible.sync="dialogVisible" width="414px">
+      <img src="../../../assets/icon/pblCourse/huishou.png" alt="" />
+      <div class="digTit">选题设置</div>
+
+      <div class="digInp">
+        <div style="text-wrap: nowrap;">项目标题:</div>
+        <el-input v-model.trim="proTit" placeholder="请输入标题"></el-input>
+      </div>
+      <div class="digInp">
+        <div style="text-wrap: nowrap;">项目选题:</div>
+        <el-input v-model.trim="proType" placeholder="请输入选题"></el-input>
+      </div>
+      <div class="digBtn" @click="addProject">确认</div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import bars from "./component/bars";
+export default {
+  components: {
+    bars
+  },
+  data() {
+    return {
+      show: 0, //主页0与更多详情页1
+      page: 1, //全部页面数据页数
+      Homepage: 1, //主页数据页数
+      homeTotal: 0,
+      CheckboxCon: 1, //下拉框数据
+      dialogVisible: false, //添加课程弹窗
+      proType: "", //项目选题
+      proTit: "", //项目标题
+      selectInp: "",
+      userid: this.$route.query.userid,
+      org: this.$route.query.org,
+      oid: this.$route.query.oid,
+      int: 14,
+      total: 0,
+      input: "",
+      ProList: [],
+      homeProList: [],
+      options: []
+    };
+  },
+  watch: {
+    selectInp(newVal, oldVal) {
+      this.getData();
+    },
+    CheckboxCon(newVal, oldVal) {
+      this.getData();
+    }
+  },
+  computed: {
+    nowNxt: function() {
+      return this.homeTotal - this.Homepage * 5 > 0;
+    }
+  },
+  mounted() {
+    // console.log("state", this.$store);
+    this.getHomeData();
+  },
+  methods: {
+    // 去答题页面
+    gotoProDetail(courseId) {
+      this.$router.push(
+        "/pblCourse?cid=" +
+          courseId +
+          "&userid=" +
+          this.userid +
+          "&oid=" +
+          this.oid +
+          "&org=" +
+          this.org
+      );
+    },
+    // 重置搜索
+    ResetSelect() {
+      this.CheckboxCon = 1;
+      this.selectInp = "";
+      this.getData();
+    },
+    //删除项目
+    delPro(val) {
+      let params = [
+        {
+          cid: val
+        }
+      ];
+      this.ajax
+        .post(this.$store.state.api + "deletePblStudent", params)
+        .then(res => {
+          console.log(res);
+          this.$message({
+            type: "success",
+            message: "删除成功"
+          });
+          if (this.show == 0) {
+            this.getHomeData();
+          } else {
+            this.getData();
+          }
+        });
+    },
+    addProject() {
+      if (this.proTit == "") {
+        this.$message({
+          type: "error",
+          message: "请输入项目标题"
+        });
+        return;
+      }
+      if (this.proType == "") {
+        this.$message({
+          type: "error",
+          message: "请选择项目选题"
+        });
+        return;
+      }
+      let params = [
+        {
+          uid: this.$route.query.userid,
+          t: this.proTit,
+          n: this.proType
+        }
+      ];
+      console.log(params);
+      this.ajax
+        .post(this.$store.state.api + "addPblStudent", params)
+        .then(res => {
+          console.log(res);
+          this.dialogVisible = false;
+          this.$message({
+            type: "success",
+            message: "创建成功"
+          });
+          this.proTit = "";
+          this.proType = "";
+          if (this.show == 0) {
+            this.getHomeData();
+          } else {
+            this.getData();
+          }
+          // this.isLoading = false;
+        })
+        .catch(err => {
+          // this.isLoading = false;
+          console.error(err);
+        });
+    },
+    Pre() {
+      if (this.Homepage == 1) {
+        this.$message("已经是第一页了");
+      } else {
+        this.Homepage -= 1;
+        this.getHomeData();
+      }
+    },
+    Nxt() {
+      console.log(this.homeTotal - this.Homepage * 5);
+
+      if (this.homeTotal - this.Homepage * 5 > 0) {
+        this.Homepage += 1;
+        this.getHomeData();
+      } else {
+        this.$message("已经是最后一页了");
+      }
+    },
+    getHomeData() {
+      let params = {
+        uid: this.userid,
+        org: this.org,
+        oid: this.oid,
+        type: 1,
+        n: "",
+        page: this.Homepage,
+        int: 5
+      };
+      // console.log(params);
+      this.ajax
+        .get(this.$store.state.api + "selectPblStudent", params)
+        .then(res => {
+          console.log(res);
+          // this.isLoading = false;
+          let data = res.data[0];
+          this.homeProList = data;
+          this.homeTotal = data.length > 0 ? data[0].num : 0;
+        })
+        .catch(err => {
+          // this.isLoading = false;
+          console.error(err);
+        });
+    },
+    getData() {
+      let params = {
+        uid: this.userid,
+        org: this.org,
+        oid: this.oid,
+        type: this.CheckboxCon,
+        n: this.selectInp,
+        page: this.page,
+        int: this.int
+      };
+      // console.log(params);
+      this.ajax
+        .get(this.$store.state.api + "selectPblStudent", params)
+        .then(res => {
+          console.log(res);
+          // this.isLoading = false;
+          let data = res.data[0];
+          this.ProList = data;
+
+          // console.log("this.tableData", this.tableData);
+          this.total = data.length > 0 ? data[0].num : 0;
+          // console.log(" 获取筛选数据", res.data[0]);
+        })
+        .catch(err => {
+          // this.isLoading = false;
+          console.error(err);
+        });
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+      this.page = val;
+    },
+    cutMoreProject() {
+      this.show = 1;
+      this.getData();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.digTit {
+  font-family: PingFang SC;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
+  text-align: center;
+  color: rgba(0, 0, 0, 0.9);
+  margin: 10px 0;
+}
+.digInp {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: 10px;
+  font-size: 16px;
+}
+.digInp >>> .el-select {
+  width: 206px !important;
+}
+.digBtn {
+  width: 128px;
+  height: 40px;
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  border-radius: 30px;
+  color: rgba(255, 255, 255, 0.9);
+  background: linear-gradient(90deg, #3673e8 0%, #ad88fd 100%);
+}
+.moreProConIndCss {
+  background: linear-gradient(180deg, #fafcff 0%, #e7eefe 100%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.moreProCon {
+  min-width: 928px;
+  max-width: 1100px;
+  margin: auto;
+  min-height: 660px;
+  max-height: 670px;
+  overflow: auto;
+  margin-top: 30px;
+}
+.moreProCon > .guideListListConCard {
+  margin-right: calc((100% - 880px) / 4) !important;
+  margin-bottom: calc((100% - 880px) / 5) !important;
+  float: left;
+}
+.moreProCon :nth-child(5n) {
+  margin-right: 0 !important;
+  float: right;
+}
+.moreProTop {
+  padding-top: 60px;
+  min-width: 928px;
+  max-width: 1100px;
+  margin: auto;
+  display: flex;
+  justify-content: space-between;
+}
+.moreProSelect {
+  display: flex;
+  width: 560px;
+  justify-content: space-between;
+  align-items: center;
+}
+.moreProSelect >>> .el-input__inner {
+  width: 220px;
+  background: none !important;
+  border: 1px #fff solid;
+}
+.moreProSelect >>> .el-input {
+  width: 220px;
+}
+.ResetBtn {
+  width: 80px;
+  height: 100%;
+  border-radius: 30px;
+  display: flex;
+  font-size: 16px;
+  color: rgba(54, 115, 232, 1);
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+.addPro {
+  width: 112px;
+  height: 32px;
+  border-radius: 30px;
+  background: linear-gradient(90deg, #3673e8 0%, #ad88fd 100%);
+  color: rgba(255, 255, 255, 0.9);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  cursor: pointer;
+}
+.guide {
+  width: 100%;
+  min-height: 100%;
+  box-sizing: border-box;
+  overflow: auto;
+  overflow-y: hidden;
+  background-image: radial-gradient(#c6d6ff, #d0d1fe, #f3f7ff);
+}
+.guide >>> .el-dialog {
+  border-radius: 10px;
+}
+.guide >>> .el-dialog__body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.guideIndex {
+  margin: auto;
+  width: 480px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.guideIndex > img {
+  transform: translate(0, 50px);
+  z-index: 0;
+}
+.guideIndex > .guideIndexCon {
+  background: rgba(255, 255, 255, 1);
+  border: 2px solid rgba(0, 42, 42, 1);
+  border-radius: 16px;
+  box-sizing: border-box;
+  padding: 15px;
+  z-index: 2;
+  margin-bottom: 30px;
+  width: 100%;
+  font-size: 18px;
+  font-family: PingFang SC;
+  font-weight: 400;
+  color: #3773e8;
+  line-height: 28px;
+  text-align: left;
+}
+.guideIndex > .guideBtn {
+  width: 248px;
+  height: 56px;
+  border-radius: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(99, 62, 18, 1);
+  background-color: #f1cc63;
+  font-family: PingFang SC;
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 28px;
+  text-align: center;
+}
+.guideList {
+  width: 928px;
+  height: 216px;
+  margin: auto;
+  margin-top: 120px;
+}
+.guideList > .guideListTop {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  align-items: center;
+}
+.guideListTop > .guideListTopL {
+  font-family: PingFang SC;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  text-align: left;
+  color: rgba(67, 78, 105, 1);
+}
+.guideListTop > .guideListTopR {
+  font-family: PingFang SC;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  text-align: left;
+  color: rgba(54, 129, 252, 1);
+}
+.guideList > .guideListListCon {
+  width: 100%;
+  position: relative;
+  display: flex;
+  min-height: 176px;
+  /* justify-content: space-between; */
+}
+.guideListListCon > .guideListListConCard {
+  margin-right: calc((100% - 880px) / 4) !important;
+}
+.guideListListCon :nth-child(5n + 2) {
+  margin-right: 0 !important;
+}
+.guideListLeft {
+  position: absolute;
+  left: -80px;
+  top: 50%;
+  transform: translate(0, -50%);
+}
+.guideListLeft > img {
+  cursor: pointer;
+}
+.guideListRig {
+  position: absolute;
+  right: -80px;
+  top: 50%;
+  transform: translate(0, -50%);
+}
+.guideListRig > img {
+  cursor: pointer;
+}
+.guideListListConCard {
+  background-color: #fff;
+  width: 176px;
+  height: 176px;
+  border-radius: 12px;
+  overflow: hidden;
+  cursor: pointer;
+}
+.guideListListConCard > .CardCon {
+  box-sizing: border-box;
+  padding: 10px;
+}
+.CardCon > .conTit {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-family: PingFang SC;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  color: rgba(0, 0, 0, 1);
+}
+.CardCon > .conTxt {
+  font-size: 12px;
+  font-family: PingFang SC;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  text-align: left;
+  color: rgba(0, 0, 0, 0.4);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>

src/components/pages/pblCourse/index.vue

@@ -1,58 +1,151 @@
 <template>
-	<div class="pblCourse" v-loading="loading">
-		<div class="pc_left">
-			<div class="pc_l_top">
-				<procedureArea :phase="phase" />
-			</div>
-			<div class="pc_l_bottom">
-				<doWorkArea :phase="phase" @changePhase="changePhase" @choiceAnswer="choiceAnswer" @submitTask="submitTask" :task="taskList[phase.atPhase]" @getTaskList="getTaskList" @addFile="addFile" @deleteFile="deleteFile"/>
-			</div>
-		</div>
-		<div class="pc_right">
-			<chatArea />
-		</div>
-		<selectTopicDialog ref="selectTopicDialogRef" @success="selectTopicSuccess"/>
-	</div>
+  <div class="pblCourse" v-loading="loading">
+    <div class="pc_left">
+      <div class="pc_l_top">
+        <procedureArea :phase="phase" />
+      </div>
+      <div class="pc_l_bottom">
+        <doWorkArea
+          :phase="phase"
+          @changePhase="changePhase"
+          @choiceAnswer="choiceAnswer"
+          @submitTask="submitTask"
+          :task="taskList[phase.atPhase]"
+          @getTaskList="getTaskList"
+          @lookFile="lookFile"
+          @addFile="addFile"
+          @deleteFile="deleteFile"
+        />
+      </div>
+    </div>
+    <div class="pc_right">
+      <chatArea />
+    </div>
+    <selectTopicDialog
+      ref="selectTopicDialogRef"
+      @success="selectTopicSuccess"
+    />
+    <div class="BackBtn" @click="backPage">返回</div>
+    <el-dialog
+      title="查看"
+      :visible.sync="priDiaVisible"
+      :before-close="handleClose"
+    >
+      <iframe
+        ref="viframe"
+        v-if="/\.(xlsx|doc|docx)$/i.test(priFile)"
+        style="width: 100%; height: 100%; border: none"
+        :src="`https://view.officeapps.live.com/op/view.aspx?src=${priFile}`"
+      ></iframe>
+      <vpdf
+        style="width: 100%; height: 100%; border: none"
+        :pdfUrl="priFile"
+        v-if="/\.(pdf)$/i.test(priFile)"
+      />
+      <img
+        v-if="/\.(jpeg|jpg|png|img)$/i.test(priFile)"
+        :src="priFile"
+        @click="previewImg(priFile)"
+        style="max-width: 100%;max-height: 100%;"
+        alt=""
+      />
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="priDiaVisible = false">关闭</el-button>
+      </span>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
-import chatArea from './component/chatArea'
-import doWorkArea from './component/doWorkArea'
-import procedureArea from './component/procedureArea'
+import chatArea from "./component/chatArea";
+import doWorkArea from "./component/doWorkArea";
+import procedureArea from "./component/procedureArea";
 import { v4 as uuidv4 } from "uuid";
-import selectTopicDialog from './component/selectTopicDialog'
+import vpdf from "./component/vpdf";
+
+import selectTopicDialog from "./component/selectTopicDialog";
 export default {
-	components: {
-		chatArea,
-		doWorkArea,
-		procedureArea,
-		selectTopicDialog,
-	},
-	data() {
-		return {
-			loading: false,
-			phase:{
-				doPhase:0,
-				atPhase:0,
-			},
-			selectTopic:"",
-			taskList:[]
-		};
-	},
-	methods: {
-		changePhase(type,newValue){
-			this.phase[type] = newValue;
-		},
-		getTaskList(phase = 0){
-			return new Promise((resolve,reject)=>{
-				if(this.loading)return this.$message.info("请稍等")
-			this.loading = true;
-		const _uuid = uuidv4()
-		let _copyTask = JSON.parse(JSON.stringify(this.taskList))
-		if(this.phase.doPhase!=0){
-			delete _copyTask[this.phase.doPhase-1].fileList;
-		}
-		const _msg = `
+  components: {
+    chatArea,
+    doWorkArea,
+    procedureArea,
+    selectTopicDialog,
+    vpdf
+  },
+  data() {
+    return {
+      loading: false,
+      phase: {
+        doPhase: 0,
+        atPhase: 0
+      },
+      showIndexPage: 0,
+      Completion: 0,
+      cid: this.$route.query.cid,
+      userid: this.$route.query.userid,
+      org: this.$route.query.org,
+      oid: this.$route.query.oid,
+      selectTopic: "",
+      taskList: [],
+      priFile: "",
+      priDiaVisible: false
+    };
+  },
+  methods: {
+    backPage(){
+      this.$router.push(
+        "/guide?" +
+          "&userid=" +
+          this.userid +
+          "&oid=" +
+          this.oid +
+          "&org=" +
+          this.org
+      );
+    },
+    getData() {
+      let params = {
+        cid: this.cid
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectPblStudentDetail", params)
+        .then(res => {
+          console.log(res);
+          let data = res.data[0][0];
+          if (!!data.chapters) {
+            this.taskList = JSON.parse(data.chapters);
+            console.log('this.taskList',this.taskList);
+
+            this.phase.doPhase = data.doIndex;
+            // if (this.taskList < 5) {
+            //   this.getTaskList(this.taskList);
+            // } else {
+            //   this.Completion = 1;
+            // }
+          } else {
+            console.log("这里这里这里这里这里这里这里这里这里这里");
+            this.selectTopic = data.name;
+            this.getTaskList();
+          }
+        })
+        .catch(err => {
+          // this.isLoading = false;
+          console.error(err);
+        });
+    },
+    changePhase(type, newValue) {
+      this.phase[type] = newValue;
+    },
+    getTaskList(phase = 0) {
+      return new Promise((resolve, reject) => {
+        if (this.loading) return this.$message.info("请稍等");
+        this.loading = true;
+        const _uuid = uuidv4();
+        let _copyTask = JSON.parse(JSON.stringify(this.taskList));
+        if (this.phase.doPhase != 0) {
+          delete _copyTask[this.phase.doPhase - 1].fileList;
+        }
+        const _msg = `
 NOTICE
 Role: 作为学生的学习指导Agent，你熟悉熟悉PBL（基于问题的学习）和5EX教学模型，能够根据学生的学情数据（当前的学习任务设计、学习表现数据、作业数据等）生成自适应的学习任务和对应的5道考核题目。
 Language: Please use the same language as the user requirement, if the user speaks Chinese, the specific text of your answer should also be in Chinese.
@@ -89,7 +182,13 @@ Evaluate（评估）：教师和学生共同评估学习效果，反思学习过
 
 ## 学情数据
 选题：${this.selectTopic}
-${this.phase.doPhase==0?'':`这是你生成适应性学习任务时，需要参考的前置学情数据${JSON.stringify(_copyTask[this.phase.doPhase-1])}（当前的学习任务设计、学习表现数据、作业数据等）。`}
+${
+  this.phase.doPhase == 0
+    ? ""
+    : `这是你生成适应性学习任务时，需要参考的前置学情数据${JSON.stringify(
+        _copyTask[this.phase.doPhase - 1]
+      )}（当前的学习任务设计、学习表现数据、作业数据等）。`
+}
 
 # Format example
 {
@@ -115,151 +214,231 @@ ${this.phase.doPhase==0?'':`这是你生成适应性学习任务时，需要参
 }
 
 Instruction: Based on the context, follow "Format example", write content.
-`
-			console.log(_msg)
-			// ${
-			// 	this.phase.doPhase==0?'':`
-			// 	## 学情数据
-			// 	这是你生成适应性学习任务时，需要参考的前置学情数据${JSON.stringify(this.taskList[this.phase.doPhase])}（当前的学习任务设计、学习表现数据、作业数据等）。`
-			// }
+`;
+        // console.log(_msg);
+        // ${
+        // 	this.phase.doPhase==0?'':`
+        // 	## 学情数据
+        // 	这是你生成适应性学习任务时，需要参考的前置学情数据${JSON.stringify(this.taskList[this.phase.doPhase])}（当前的学习任务设计、学习表现数据、作业数据等）。`
+        // }
+
+        let params = {
+          model: "gpt-3.5-turbo",
+          temperature: 0,
+          max_tokens: 4096,
+          top_p: 1,
+          frequency_penalty: 0,
+          presence_penalty: 0,
+          messages: [{ role: "user", content: _msg }],
+          uid: _uuid,
+          mind_map_question: "",
+          stream: false
+        };
+        this.ajax
+          .post("https://gpt4.cocorobo.cn/chat", params)
+          .then(res => {
+            let _data = res.data.FunctionResponse.choices[0];
+            let content = _data.message.content;
+            // console.log(content);
+            content = content.replaceAll("```json", "").replaceAll("```", "");
+            // console.log(content)
+            const _result = JSON.parse(content);
+
+            (_result.detail = _result.detail ? _result.detail : ""),
+              (_result.steps = _result.steps ? _result.steps : ""),
+              (_result.target = _result.target ? _result.target : ""),
+              (_result.tips = _result.tips ? _result.tips : "");
+            _result.fileList = [];
+            this.taskList[phase] = _result;
+            // this.phase.doPhase = phase;
+            this.phase.atPhase = phase;
+            console.log(this.taskList);
+            this.saveTopic();
+            this.savaDoIndex();
+            this.loading = false;
+            resolve();
+          })
+          .catch(e => {
+            this.loading = false;
+            this.$message.error("获取任务失败");
+            if (this.phase.doPhase != 0) {
+              this.phase.doPhase--;
+            }
+            resolve();
+            console.log(e);
+          });
+      });
+    },
+    choiceAnswer(_data) {
+      this.taskList[this.phase.atPhase].answerArray[_data[0]].userAnswer =
+        _data[1];
+      this.$forceUpdate();
+    },
+    savaDoIndex() {
+      let params = [
+        {
+          cid: this.cid,
+          doi: this.phase.doPhase
+        }
+      ];
+      this.ajax
+        .post(this.$store.state.api + "updatePblStudentDoIndex", params)
+        .then(res => {
+          console.log(res);
+        });
+    },
+    saveTopic() {
+      let params = [
+        {
+          cid: this.cid,
+          chapters: JSON.stringify(this.taskList)
+        }
+      ];
+      this.ajax
+        .post(this.$store.state.api + "updatePblStudentChapters", params)
+        .then(res => {
+          console.log(res);
+        });
+    },
+
+    submitTask() {
+      this.loading = true;
+      let sum = 0;
+      this.taskList[this.phase.atPhase].answerArray.forEach(i => {
+        if ("userAnswer" in i) {
+          sum++;
+        }
+      });
+      if (sum < this.taskList[this.phase.atPhase].answerArray.length) {
+        this.loading = false;
+        return this.$message.error("当前阶段还未完成");
+      } else if (this.phase.doPhase > this.phase.atPhase) {
+        this.loading = false;
+        return this.$message.error("该阶段已经提交过了");
+      } else {
+        this.loading = false;
+        this.phase.doPhase++;
+        if (this.Completion == 0) {
+          this.saveTopic();
+          this.savaDoIndex();
+        }
+        if (this.phase.doPhase == 5) {
+          this.Completion = 1;
+          return this.$message("所有阶段已经完成");
+        }
+        this.getTaskList(this.phase.doPhase);
+      }
+    },
+    selectTopicSuccess(_form) {
+      if (_form.title) {
+        this.phase = {
+          doPhase: 0,
+          atPhase: 0
+        };
+        this.selectTopic = _form.title;
+        this.getTaskList();
+        this.$refs.selectTopicDialogRef.close();
+      }
+    },
+    handleClose(done) {
+      this.priFile = "";
+
+      done();
+      this.$forceUpdate()
 
-			let params = {
-				model: "gpt-3.5-turbo",
-				temperature: 0,
-				max_tokens: 4096,
-				top_p: 1,
-				frequency_penalty: 0,
-				presence_penalty: 0,
-				messages: [{role:"user",content:_msg}],
-				uid: _uuid,
-				mind_map_question: "",
-				stream:false
-			}
-			this.ajax
-			.post("https://gpt4.cocorobo.cn/chat", params)
-			.then((res) => {
-				let _data = res.data.FunctionResponse.choices[0];
-				let content = _data.message.content;
-				console.log(content)
-				content = content.replaceAll('```json','').replaceAll('```','')
-				// console.log(content)
-				const _result = JSON.parse(content);
-				
-				_result.detail = _result.detail?_result.detail:"",
-				_result.steps = _result.steps?_result.steps:"",
-				_result.target = _result.target?_result.target:"",
-				_result.tips =_result.tips?_result.tips:""
-				_result.fileList = [];
-				this.taskList[phase] = _result;
-				// this.phase.doPhase = phase;
-				this.phase.atPhase = phase;
-				console.log(this.taskList)
-				this.loading = false;
-				resolve();
-			})
-			.catch((e) => {
-				this.loading = false;
-				this.$message.error("获取任务失败")
-				if(this.phase.doPhase!=0){
-					this.phase.doPhase--;
-				}
-				resolve();
-				console.log(e);
-			});
-			})
-			
-		},
-		choiceAnswer(_data){
-			this.taskList[this.phase.atPhase].answerArray[_data[0]].userAnswer = _data[1];
-			this.$forceUpdate()
-		},
-		submitTask(){
-			
-			this.loading = true;
-			let sum = 0;
-			this.taskList[this.phase.atPhase].answerArray.forEach(i=>{
-				if('userAnswer' in i){
-					sum++;
-				}
-			})
-			if(sum<this.taskList[this.phase.atPhase].answerArray.length){
-				this.loading = false;
-				return this.$message.error("当前阶段还未完成")
-			}else if((this.phase.doPhase>this.phase.atPhase)){
-				this.loading = false;
-				return this.$message.error("该阶段已经提交过了")
-			}else{
-				this.loading = false;
-				this.phase.doPhase++;
-				if(this.phase.doPhase==5){
-					return this.$message.error('所有阶段已经完成');
-				}
-				this.getTaskList(this.phase.doPhase)
-			}
-		},
-		selectTopicSuccess(_form){
-			if(_form.title){
-					this.phase = {
-					doPhase:0,
-					atPhase:0,
-				}
-				this.selectTopic = _form.title;
-				this.getTaskList()
-				this.$refs.selectTopicDialogRef.close();
-			}
-		},
-		addFile(obj){
-			this.taskList[this.phase.atPhase].fileList.push(obj)
-			this.$forceUpdate()
-		},
-		deleteFile(index){
-			this.taskList[this.phase.atPhase].fileList.splice(index,1)
-			this.$forceUpdate()
-		},
-	},
-	mounted() {
-		this.selectTopic = "";
-		this.$refs.selectTopicDialogRef.open();
-		// this.getTaskList()
-	},
+      // this.$confirm('确认关闭？')
+      //   .then(_ => {
+      //     done();
+      //   })
+      //   .catch(_ => {});
+    },
+    previewImg(url) {
+      this.$hevueImgPreview(url)
+    },
+    lookFile(url) {
+
+      this.priFile = "";
+      this.$forceUpdate()
+
+      this.priFile = url;
+
+      this.priDiaVisible = true;
+      // console.log(/\.(jpeg|jpg|png|img)$/i.test(url));
+      // console.log(/\.(xlsx|doc|docx)$/i.test(url));
+      // const path = require('path');
+      // return path.extname(url).toLowerCase().slice(1); // 获取后缀并去掉点(.)
+    },
+    addFile(obj) {
+      this.taskList[this.phase.atPhase].fileList.push(obj);
+      this.$forceUpdate();
+    },
+    deleteFile(index) {
+      this.taskList[this.phase.atPhase].fileList.splice(index, 1);
+      this.$forceUpdate();
+    }
+  },
+  mounted() {
+    this.getData();
+    // this.selectTopic = "";
+    // this.$refs.selectTopicDialogRef.open();
+    // this.getTaskList()
+  }
 };
 </script>
 
 <style scoped>
 .pblCourse {
-	min-width: 1500px;
-	/* min-height: 800px; */
-	width: 100%;
-	height: 100vh;
-	display: flex;
-	background-color: #f0f2f5;
-	box-sizing: border-box;
-	padding: 20px;
-	background-image: radial-gradient( #C6D6FF,#D0D1FE, #F3F7FF);
+  min-width: 1500px;
+  /* min-height: 800px; */
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  background-color: #f0f2f5;
+  box-sizing: border-box;
+  padding: 20px;
+  background-image: radial-gradient(#c6d6ff, #d0d1fe, #f3f7ff);
+}
+.pblCourse >>> .el-dialog{
+  height: 900px;margin-top: 5vh !important;
+  width: 1100px;
+}
+.pblCourse >>> .el-dialog__body{
+  height: 700px !important;
+  display: flex;
+  justify-content: center;
+}
+.BackBtn{
+  position: absolute;
+  top: 20px;
+  right: 10px;
+  border-radius: 30px;
+  padding: 5px 15px;
+  background-color: #fff;
+	border: 2px solid #c8aeff;
+  cursor: pointer;
 }
-
 .pc_left {
-	width: calc(100% - 500px - 20px);
-	margin-right: 20px;
-	box-sizing: border-box;
+  width: calc(100% - 500px - 20px);
+  margin-right: 20px;
+  box-sizing: border-box;
 }
 
 .pc_l_top {
-	width: 100%;
-	height: 150px;
-	box-sizing: border-box;
+  width: 100%;
+  height: 150px;
+  box-sizing: border-box;
 }
 
 .pc_l_bottom {
-	width: 100%;
-	height: calc(100% - 150px - 15px);
-	box-sizing: border-box;
-	margin-top: 15px;
+  width: 100%;
+  height: calc(100% - 150px - 15px);
+  box-sizing: border-box;
+  margin-top: 15px;
 }
 
 .pc_right {
-	width: 500px;
-	height: 100%;
-	box-sizing: border-box;
+  width: 500px;
+  height: 100%;
+  box-sizing: border-box;
 }
 </style>

src/router/index.js

@@ -127,6 +127,7 @@ import record from '@/components/pages/record/class'
 import classroomObservation from '@/components/pages/classroomObservation/index'//课堂观察
 import contrastObservation from '@/components/pages/contrastObservation/index'//对比分析
 import pblCourse from '@/components/pages/pblCourse/index'
+import guide from '@/components/pages/pblCourse/guide'
 
 // 全局修改默认配置，点击空白处不能关闭弹窗
 ElementUI.Dialog.props.closeOnClickModal.default = false
@@ -1091,6 +1092,14 @@ export default new Router({
 					meta:{
 						requireAuth:''//不需要鉴权
 					}
+				},
+                 {//pblCourse
+					path:"/guide",
+					name:"guide",
+					component:guide,
+					meta:{
+						requireAuth:''//不需要鉴权
+					}
 				}
     ]
 })