课堂观察分享与优化模块状态

src/components/pages/classroomObservation/components/analysisItem.vue

@@ -1,368 +1,412 @@
 <template>
-	<div class="analysisItem" v-loading="loading">
-		<div class="ai-header">
-			<div class="ai-h-left" @click.stop="changeOpenItem(!openItem)">
-				<span
-					:class="['ai-h-l-icon', openItem ? 'ai-h-l-iconActive' : '']"
-				></span>
-				<span class="ai-h-l-text">{{ data.jsonData.name }}</span>
-			</div>
-			<div class="ai-h-right">
-				<!-- <span class="ai-h-r-icon1" @click.stop="backLeft()"></span> -->
-				<!-- <span class="ai-h-r-icon2" @click.stop="backRight()"></span> -->
-				<!-- <span class="ai-h-r-icon3" @click.stop="editBtn()"></span> -->
-				<span v-if="!openItem" class="ai-h-r-icon4" @click.stop="delBtn()"></span>
-				<span v-if="openItem" class="ai-h-r-icon1" @click.stop="backLeft()"></span>
-				<span v-if="openItem" class="ai-h-r-icon2" @click.stop="backRight()"></span>
-				<span v-if="openItem" class="ai-h-r-icon3" @click.stop="editBtn()"></span>
-				<!-- <span class="ai-h-r-icon4" @click.stop="delBtn()"></span> -->
-			</div>
-		</div>
-		<div class="ai-main" v-if="openItem" >
-			<!-- <div class="a-m-title">
+  <div class="analysisItem">
+    <div class="ai-header">
+      <div class="ai-h-left" @click.stop="changeOpenItem(!openItem)">
+        <span
+          :class="['ai-h-l-icon', openItem ? 'ai-h-l-iconActive' : '']"
+        ></span>
+        <span class="ai-h-l-text">{{ data.jsonData.name }}</span>
+      </div>
+      <div class="ai-h-right">
+        <!-- <span class="ai-h-r-icon1" @click.stop="backLeft()"></span> -->
+        <!-- <span class="ai-h-r-icon2" @click.stop="backRight()"></span> -->
+        <span
+          :class="loading ? 'text1' : 'text2'"
+          style="width: 100px"
+          v-if="loadNum == 1"
+          >{{ loading ? "优化中..." : "优化完成" }}
+        </span>
+        <span
+          v-if="loadNum != 1 && !openItem"
+          class="ai-h-r-icon4"
+          @click.stop="delBtn()"
+        ></span>
+        <span
+          v-if="loadNum != 1 && openItem"
+          class="ai-h-r-icon1"
+          @click.stop="backLeft()"
+        ></span>
+        <span
+          v-if="loadNum != 1 && openItem"
+          class="ai-h-r-icon2"
+          @click.stop="backRight()"
+        ></span>
+        <span
+          v-if="loadNum != 1 && openItem"
+          class="ai-h-r-icon3"
+          @click.stop="editBtn()"
+        ></span>
+        <!-- <span class="ai-h-r-icon4" @click.stop="delBtn()"></span> -->
+      </div>
+    </div>
+    <div class="ai-main" v-if="openItem">
+      <!-- <div class="a-m-title">
 				<span></span>
 				<div>{{ data.title }}分析</div>
 			</div> -->
 
-			<div class="a-m-brief">
-				<mdView :text="data.jsonData.result"/>
-				<!-- {{ data.jsonData.result }} -->
-			</div>
-			<div v-for="(item,index) in data.jsonData.dataFileList" :key="item.uid">
-				<div v-if="imgTypeList.includes(checkFileType(item.url))">
-					<img style="max-width: 100%;" :src="item.url" alt="" />
-				</div>
-				<div v-else-if="checkFileType(item.url)=='md'">
-					<mdView :url="item.url"/>
-				</div>
-				<div v-else-if="checkFileType(item.url)=='json'">
-					<pieChart :url="item.url"/>
-				</div>
-			</div>
+      <div class="a-m-brief">
+        <mdView :text="data.jsonData.result" />
+        <!-- {{ data.jsonData.result }} -->
+      </div>
+      <div v-for="(item, index) in data.jsonData.dataFileList" :key="item.uid">
+        <div v-if="imgTypeList.includes(checkFileType(item.url))">
+          <img style="max-width: 100%;" :src="item.url" alt="" />
+        </div>
+        <div v-else-if="checkFileType(item.url) == 'md'">
+          <mdView :url="item.url" />
+        </div>
+        <div v-else-if="checkFileType(item.url) == 'json'">
+          <pieChart :url="item.url" />
+        </div>
+      </div>
 
-			<div v-for="(item,index) in data.jsonData.fileList" :key="item.uid">
-				<div v-if="imgTypeList.includes(checkFileType(item.url))">
-					<img style="max-width: 100%;" :src="item.url" alt="" />
-				</div>
-				<div v-else-if="checkFileType(item.url)=='md'">
-					<mdView :url="item.url"/>
-				</div>
-				<div v-else-if="checkFileType(item.url)=='json'">
-					<pieChart :url="item.url"/>
-				</div>
-			</div>
-		</div>
-	</div>
+      <div v-for="(item, index) in data.jsonData.fileList" :key="item.uid">
+        <div v-if="imgTypeList.includes(checkFileType(item.url))">
+          <img style="max-width: 100%;" :src="item.url" alt="" />
+        </div>
+        <div v-else-if="checkFileType(item.url) == 'md'">
+          <mdView :url="item.url" />
+        </div>
+        <div v-else-if="checkFileType(item.url) == 'json'">
+          <pieChart :url="item.url" />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import mdView from './mdView.vue';
-import pieChart from './pieChart.vue';
+import mdView from "./mdView.vue";
+import pieChart from "./pieChart.vue";
 export default {
-	emits:["delItem","editItem"],
-	components:{
-		mdView,
-		pieChart
-	},
-	props: {
-		data: {
-			type: Object,
-			default: () => {
-				return {};
-			},
-		},
-		index:{
-			type:Number,
-			default:0
-		},
-		tid:{
-			type:String,
-			require:true,
-		},
-		fileId:{
-			type:String,
-			require:true,
-		}
-	},
-	data() {
-		return {
-			openItem: false,
-			loading:false,
-			imgTypeList:[
-				"png",
-    		"jpg",
-    		"jpeg",
-    		"bmp",
-    		"gif",
-    		"webp",
-    		"psd",
-    		"svg",
-    		"tiff",
-			]
-		};
-	},
-	computed:{
-		checkFileType(){
-			return (url)=>{
-				return url.split('.').pop();
-			}
-		}
-	},
-	methods: {
-		changeOpenItem(newValue) {
-			this.openItem = newValue;
-		},
-		backLeft() {
-			this.$message.info("回退左");
-		},
-		backRight() {
-			this.$message.info("回退右");
-		},
-		editBtn() {
-			console.log("👇")
-			this.loading = true;
-			let assistant_id = {
-					"课堂观察": { value: "8ab07d41-e143-11ee-aaca-12e77c4cb76b", type: 0 },
-					"教学阶段九事件分析": {
-						value: "5e0466b3-0075-11ef-aaca-12e77c4cb76b",
-						type: 0,
-					},
-					"OMO智慧课堂分析": {
-						value: "4cc367c1-0076-11ef-aaca-12e77c4cb76b",
-						type: 0,
-					},
-					"布鲁姆问题分类": {
-						value: "eac63117-00a7-11ef-aaca-12e77c4cb76b",
-						type: 0,
-					},
-					"麦卡锡问题分类": {
-						value: "18545cf7-0125-11ef-aaca-12e77c4cb76b",
-						type: 0,
-					},
-					"学生回答统计": {
-						value: "2c6ede88-0125-11ef-aaca-12e77c4cb76b",
-						type: 0,
-					},
-					"课堂活动类型": {
-						value: "41d2d2d4-0125-11ef-aaca-12e77c4cb76b",
-						type: 1,
-					},
-					"素养目标分析": {
-						value: "b13a98de-0125-11ef-aaca-12e77c4cb76b",
-						type: 1,
-					},
-					"科学教育目标分析": {
-						value: "d6cd48ab-0125-11ef-aaca-12e77c4cb76b",
-						type: 1,
-					},
-					"5E课程改编": {
-						value: "f757826e-0125-11ef-aaca-12e77c4cb76b",
-						type: 2,
-					},
-					"5EX课程改编": {
-						value: "0b6b08b7-0126-11ef-aaca-12e77c4cb76b",
-						type: 2,
-					},
-					"UTOP课程观察":{
-						value: "8e3a389b-014f-11ef-aaca-12e77c4cb76b",
-						type: 3,
-					},
-					"RST模型":{
-						value:"e649112e-0150-11ef-aaca-12e77c4cb76b",
-						type:3,
-					},
-					"RTOP模型":{
-						value:"68265b18-0151-11ef-aaca-12e77c4cb76b",
-						type:3,
-					},
-					"课堂质量评价":{
-						value:"25e53379-0152-11ef-aaca-12e77c4cb76b",
-						type:3,
-					},
-					"SCOP课堂观察":{
-						value:"d0c76d35-0152-11ef-aaca-12e77c4cb76b",
-						type:3,
-					},
-					"RTOP课堂观察":{
-						value:"2ace7ff6-0154-11ef-aaca-12e77c4cb76b",
-						type:3
-					}
-				};
-			let file_ids = {
-				'03':["file-E8SvjCHbmhmjKczRWr11OuHx"],
-				'04':["file-r5phg4I2oFqly4WpW7oOOTnA"],
-			}
-			let parm = {
-				assistant_id:assistant_id[this.data.jsonData.name]?assistant_id[this.data.jsonData.name].value:null,
-				message: "请使用代码解析器获取文件，帮我根据要求完整的分析，输出请按照要求。",
-				session_name: new Date().getTime(),
-				userId:"1cf9dc4b-d95f-11ea-af4c-52540005ab01",
-				file_ids:this.fileId?[this.fileId]:file_ids[this.tid],
-			}
+  emits: ["delItem", "editItem"],
+  components: {
+    mdView,
+    pieChart
+  },
+  props: {
+    data: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    index: {
+      type: Number,
+      default: 0
+    },
+    tid: {
+      type: String,
+      require: true
+    },
+    fileId: {
+      type: String,
+      require: true
+    }
+  },
+  data() {
+    return {
+      openItem: false,
+      loading: false,
+      loadNum: 0,
+      text1: "text1",
+      text2: "text2",
+      imgTypeList: [
+        "png",
+        "jpg",
+        "jpeg",
+        "bmp",
+        "gif",
+        "webp",
+        "psd",
+        "svg",
+        "tiff"
+      ]
+    };
+  },
+  computed: {
+    checkFileType() {
+      return url => {
+        return url.split(".").pop();
+      };
+    }
+  },
+  methods: {
+    changeOpenItem(newValue) {
+      if (this.loading == true && this.loadNum != 0)
+        return this.$message("请稍后...");
+      this.loadNum = 0;
+      this.openItem = newValue;
+    },
+    backLeft() {
+      this.$message.info("回退左");
+    },
+    backRight() {
+      this.$message.info("回退右");
+    },
+    editBtn() {
+      console.log("👇");
+      this.loading = true;
+      this.openItem = false;
+      this.loadNum = 1;
+      let assistant_id = {
+        课堂观察: { value: "8ab07d41-e143-11ee-aaca-12e77c4cb76b", type: 0 },
+        教学阶段九事件分析: {
+          value: "5e0466b3-0075-11ef-aaca-12e77c4cb76b",
+          type: 0
+        },
+        OMO智慧课堂分析: {
+          value: "4cc367c1-0076-11ef-aaca-12e77c4cb76b",
+          type: 0
+        },
+        布鲁姆问题分类: {
+          value: "eac63117-00a7-11ef-aaca-12e77c4cb76b",
+          type: 0
+        },
+        麦卡锡问题分类: {
+          value: "18545cf7-0125-11ef-aaca-12e77c4cb76b",
+          type: 0
+        },
+        学生回答统计: {
+          value: "2c6ede88-0125-11ef-aaca-12e77c4cb76b",
+          type: 0
+        },
+        课堂活动类型: {
+          value: "41d2d2d4-0125-11ef-aaca-12e77c4cb76b",
+          type: 1
+        },
+        素养目标分析: {
+          value: "b13a98de-0125-11ef-aaca-12e77c4cb76b",
+          type: 1
+        },
+        科学教育目标分析: {
+          value: "d6cd48ab-0125-11ef-aaca-12e77c4cb76b",
+          type: 1
+        },
+        "5E课程改编": {
+          value: "f757826e-0125-11ef-aaca-12e77c4cb76b",
+          type: 2
+        },
+        "5EX课程改编": {
+          value: "0b6b08b7-0126-11ef-aaca-12e77c4cb76b",
+          type: 2
+        },
+        UTOP课程观察: {
+          value: "8e3a389b-014f-11ef-aaca-12e77c4cb76b",
+          type: 3
+        },
+        RST模型: {
+          value: "e649112e-0150-11ef-aaca-12e77c4cb76b",
+          type: 3
+        },
+        RTOP模型: {
+          value: "68265b18-0151-11ef-aaca-12e77c4cb76b",
+          type: 3
+        },
+        课堂质量评价: {
+          value: "25e53379-0152-11ef-aaca-12e77c4cb76b",
+          type: 3
+        },
+        SCOP课堂观察: {
+          value: "d0c76d35-0152-11ef-aaca-12e77c4cb76b",
+          type: 3
+        },
+        RTOP课堂观察: {
+          value: "2ace7ff6-0154-11ef-aaca-12e77c4cb76b",
+          type: 3
+        }
+      };
+      let file_ids = {
+        "03": ["file-E8SvjCHbmhmjKczRWr11OuHx"],
+        "04": ["file-r5phg4I2oFqly4WpW7oOOTnA"]
+      };
+      let parm = {
+        assistant_id: assistant_id[this.data.jsonData.name]
+          ? assistant_id[this.data.jsonData.name].value
+          : null,
+        message:
+          "请使用代码解析器获取文件，帮我根据要求完整的分析，输出请按照要求。",
+        session_name: new Date().getTime(),
+        userId: "1cf9dc4b-d95f-11ea-af4c-52540005ab01",
+        file_ids: this.fileId ? [this.fileId] : file_ids[this.tid]
+      };
 
-			if(!parm.assistant_id){
-				this.loading = false;
-				return this.$message.error("未找到对应的AI助手")
-			}
+      if (!parm.assistant_id) {
+        this.loading = false;
+        return this.$message.error("未找到对应的AI助手");
+      }
 
-			this.ajax.post("https://gpt4.cocorobo.cn/ai_agent_park_chat",parm).then(res=>{
-				console.log("👇👇")
-				let _data = res.data.FunctionResponse;
-				if(!_data.message || _data.message.indexOf('由于我无法直接访问您上传的文件内容')>-1){
-					this.loading = false;
-					return this.$message.error("AI无法识别优化")
-				}
-				let _copyData = JSON.parse(JSON.stringify(this.data))
-				_copyData.jsonData.result = _data.message;
-				_copyData.jsonData.dataFileList = [];
-				_copyData.jsonData.fileList = [];
-				_copyData.json_data = JSON.stringify(_copyData.jsonData)
-				this.$emit("editItem",this.data.id,_copyData);
-				let pram2 = {
-					id: _copyData.id,
-					json_data: _copyData.json_data,
-				};
-				this.ajax
-				.post(
-					"https://gpt4.cocorobo.cn/update_classroom_observation",
-					pram2
-				)
-				this.loading = false;
-			}).catch(err=>{
-				this.$message.error("AI无法识别优化")
-				this.loading = false;
-			})
-			// this.$emit
-			// setTimeout(()=>{
-			// 	this.loading = false;
-			// 	this.$emit("editItem", this.data);
-			// },1000)
-		},
-		delBtn() {
-			this.$confirm("确定删除？", "提示", {
-				confirmButtonText: "确定",
-				cancelButtonText: "取消",
-				type: "error",
-			})
-			.then(() => {
-				this.$emit("delItem", this.data.id)
-			})
-		},
-	},
+      this.ajax
+        .post("https://gpt4.cocorobo.cn/ai_agent_park_chat", parm)
+        .then(res => {
+          console.log("👇👇");
+          let _data = res.data.FunctionResponse;
+          if (
+            !_data.message ||
+            _data.message.indexOf("由于我无法直接访问您上传的文件内容") > -1
+          ) {
+            this.loading = false;
+            return this.$message.error("AI无法识别优化");
+          }
+          let _copyData = JSON.parse(JSON.stringify(this.data));
+          _copyData.jsonData.result = _data.message;
+          _copyData.jsonData.dataFileList = [];
+          _copyData.jsonData.fileList = [];
+          _copyData.json_data = JSON.stringify(_copyData.jsonData);
+          this.$emit("editItem", this.data.id, _copyData);
+          let pram2 = {
+          	id: _copyData.id,
+          	json_data: _copyData.json_data,
+          };
+          this.ajax
+          .post(
+          	"https://gpt4.cocorobo.cn/update_classroom_observation",
+          	pram2
+          )
+          this.loading = false;
+          this.loadNum = 0;
+        })
+        .catch(err => {
+          this.$message.error("AI无法识别优化");
+          this.loading = false;
+        });
+      // this.$emit
+      // setTimeout(()=>{
+      // 	this.loading = false;
+      // 	this.$emit("editItem", this.data);
+      // },1000)
+    },
+    delBtn() {
+      this.$confirm("确定删除？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "error"
+      }).then(() => {
+        this.$emit("delItem", this.data.id);
+      });
+    }
+  }
 };
 </script>
 
 <style scoped>
 .analysisItem {
-	width: 100%;
-	height: auto;
+  width: 100%;
+  height: auto;
 
-	margin: 11.7px 0px;
+  margin: 11.7px 0px;
 
-	padding-right: 10px;
-	box-sizing: border-box;
+  padding-right: 10px;
+  box-sizing: border-box;
+}
+.text1 {
+  color: rgba(54, 129, 252, 1);
+}
+.text2 {
+  color: rgba(23, 196, 105, 1);
 }
 .ai-header {
-	width: 100%;
-	height: 50px;
-	display: flex;
-	background-color: white;
-	border-radius: 5px;
+  width: 100%;
+  height: 50px;
+  display: flex;
+  background-color: white;
+  border-radius: 5px;
 }
 .ai-h-left {
-	flex: 1;
-	height: 100%;
-	display: flex;
-	align-items: center;
-	box-sizing: border-box;
-	padding: 0 10px;
-	cursor: pointer;
+  flex: 1;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 10px;
+  cursor: pointer;
 }
 
 .ai-h-l-icon {
-	width: 16px;
-	height: 16px;
-	background: url("../../../../assets/icon/classroomObservation/right.png")
-		no-repeat;
-	background-size: 100% 100%;
-	margin-right: 10px;
-	transition: 0.3s;
+  width: 16px;
+  height: 16px;
+  background: url("../../../../assets/icon/classroomObservation/right.png")
+    no-repeat;
+  background-size: 100% 100%;
+  margin-right: 10px;
+  transition: 0.3s;
 }
 
 .ai-h-l-iconActive {
-	transform: rotate(90deg);
+  transform: rotate(90deg);
 }
 .ai-h-l-text {
-	font-size: 18px;
+  font-size: 18px;
 }
 
 .ai-h-right {
-	width: auto;
-	height: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: space-around;
-	position: relative;
+  width: auto;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  position: relative;
 }
 
 .ai-h-right > span {
-	width: 18px;
-	height: 18px;
-	background-size: 100% 100%;
-	margin: 0 10px;
-	cursor: pointer;
+  width: 18px;
+  height: 18px;
+  background-size: 100% 100%;
+  margin: 0 10px;
+  cursor: pointer;
 }
 
 .ai-h-r-icon1 {
-	background: url("../../../../assets/icon/classroomObservation/back.png");
-	/* 镜像 */
-	transform: scaleX(-1);
+  background: url("../../../../assets/icon/classroomObservation/back.png");
+  /* 镜像 */
+  transform: scaleX(-1);
 }
 
 .ai-h-r-icon2 {
-	background: url("../../../../assets/icon/classroomObservation/back.png");
+  background: url("../../../../assets/icon/classroomObservation/back.png");
 }
 
 .ai-h-r-icon3 {
-	background: url("../../../../assets/icon/classroomObservation/edit.png");
-	/* background: url("../../../../assets/icon/classroomObservation/del.png"); */
-	/* display: none; */
+  background: url("../../../../assets/icon/classroomObservation/edit.png");
+  /* background: url("../../../../assets/icon/classroomObservation/del.png"); */
+  /* display: none; */
 }
 
 .ai-header:hover .ai-h-r-icon4 {
-	display: block;
+  display: block;
 }
 
 .ai-h-r-icon4 {
-	background: url("../../../../assets/icon/classroomObservation/del.png");
-	/* position: absolute; */
-	/* right: -40px; */
-	display: none;
+  background: url("../../../../assets/icon/classroomObservation/del.png");
+  /* position: absolute; */
+  /* right: -40px; */
+  display: none;
 }
 
 .analysisItem:hover .ai-h-r-icon4 {
-	display: block;
+  display: block;
 }
 
 .ai-main {
-	width: 100%;
-	height: auto;
-	background-color: white;
-	border-radius: 0 0 5px 5px;
-	overflow: auto;
-	box-sizing: border-box;
-	padding: 10px 20px;
+  width: 100%;
+  height: auto;
+  background-color: white;
+  border-radius: 0 0 5px 5px;
+  overflow: auto;
+  box-sizing: border-box;
+  padding: 10px 20px;
 }
 
 .a-m-brief {
-	font-size: 16px;
-	/* 斜体 */
-	/* font-style: italic; */
-	margin-bottom: 10px;
+  font-size: 16px;
+  /* 斜体 */
+  /* font-style: italic; */
+  margin-bottom: 10px;
 }
 
 td,
 th {
-	padding: 10px;
+  padding: 10px;
 }
 </style>

src/components/pages/classroomObservation/components/sharePdf.vue

@@ -0,0 +1,325 @@
+<template>
+  <el-dialog
+    :visible.sync="localDialogVisibleShare"
+    :append-to-body="true"
+    width="560px"
+    :before-close="handleClose"
+    class="dialog_diy"
+  >
+    <div class="share_box">
+     
+   
+      <div class="url_box">
+        <div class="title">
+          分享链接
+        </div>
+        <div class="url">
+          <el-tooltip :content="origin" placement="top" effect="dark">
+            <!-- content to trigger tooltip here -->
+            <span>{{ origin }}</span>
+          </el-tooltip>
+          <span @click="copy" :data-clipboard-text="copyText" class="tag-read"
+            >复制链接</span
+          >
+        </div>
+      </div>
+      <div class="qrcode_box">
+        <div class="title">
+          分享二维码
+        </div>
+        <div class="qrcode">
+          <span class="qrcodeUrl" ref="qrCodeUrl"></span>
+          <span @click="downQr">下载二维码</span>
+        </div>
+      </div>
+      <div class="btn_box">
+        <button
+          class="c_pub_button_confirm tag-read2"
+          @click="copy2"
+          :data-clipboard-text="copyText2"
+        >
+          复制信息
+        </button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import Clipboard from "clipboard";
+import QRCode from "qrcodejs2";
+export default {
+  props: {
+    dialogVisibleShare: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      origin: "",
+      copyText: "",
+      copyText2: "",
+      noCount: 0,
+      pname: [],
+      localDialogVisibleShare: this.dialogVisibleShare
+    };
+  },
+  methods: {
+    handleClose(done) {
+      this.close();
+      done();
+    },
+    close() {
+    //   this.$emit("update:dialogVisibleShare", false);
+      this.$emit('shareBtn');
+
+    },
+    setQr() {
+      setTimeout(() => {
+        let url = 'http://localhost:8080/#/classroomObservation';
+        this.origin = url;
+        this.$refs.qrCodeUrl.innerHTML = "";
+        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
+          text: url, // 需要转换为二维码的内容
+          width: 100,
+          height: 100,
+          colorDark: "#000000",
+          colorLight: "#ffffff",
+          correctLevel: QRCode.CorrectLevel.H
+        });
+      }, 500);
+    },
+    downQr() {
+      // 创建一个虚拟链接，并将 canvas 转换为图片文件
+      const link = document.createElement("a");
+      link.href = this.$refs.qrCodeUrl.querySelector("img").src;
+      link.download = "qrcode.png";
+
+      // 模拟点击链接进行下载
+      link.click();
+    },
+    copy() {
+      this.copyText = 'http://localhost:8080/#/classroomObservation';
+      var clipboard = new Clipboard(".tag-read");
+      clipboard.on("success", e => {
+        this.$message.success("复制成功");
+        console.log("复制成功");
+        clipboard.destroy(); // 释放内存
+      });
+      clipboard.on("error", e => {
+        console.log("不支持复制,该浏览器不支持自动复制");
+        clipboard.destroy(); // 释放内存
+      });
+    },
+    copy2() {
+      let url = 'http://localhost:8080/#/classroomObservation';
+      this.copyText2 = `链接提醒：${url}`;
+      var clipboard = new Clipboard(".tag-read2");
+      clipboard.on("success", e => {
+        this.$message.success("复制成功");
+        console.log("复制成功");
+        clipboard.destroy(); // 释放内存
+      });
+      clipboard.on("error", e => {
+        console.log("不支持复制,该浏览器不支持自动复制");
+        clipboard.destroy(); // 释放内存
+      });
+    }
+    // getData() {
+    //   // if(!this.testJson.juriP){
+    //   //     return;
+    //   // }
+    //   let params = {
+    //     id: this.testJson.courseId
+    //   };
+    //   this.ajax
+    //     .get(this.$store.state.api + "getTestWorkShare", params)
+    //     .then(res => {
+    //       let parray = res.data[0];
+    //       let is = res.data[1];
+    //       this.noCount = parray.length - is.length;
+    //       let isA = [];
+    //       for (var i = 0; i < is.length; i++) {
+    //         isA.push(is[i].userid);
+    //       }
+    //       let pname = [];
+    //       for (var i = 0; i < parray.length; i++) {
+    //         if (isA.indexOf(parray[i].userid) == -1) {
+    //           pname.push(parray[i].username);
+    //         }
+    //       }
+    //       this.pname = pname;
+    //     })
+    //     .catch(err => {
+    //       console.error(err);
+    //     });
+    // }
+  },
+  watch: {
+    dialogVisibleShare(newValue, oldValue) {
+      console.log("newValue", newValue);
+      if (newValue) {
+        this.localDialogVisibleShare=newValue
+        this.setQr();
+        // this.getData();
+        // console.log(top.origin);
+        // this.origin = top.origin
+      }
+    }
+  },
+  mounted() {
+    // console.log("this.info", this.info);
+
+    // console.log(top.origin);
+    // this.origin = top.origin
+  }
+};
+</script>
+
+<style scoped>
+.dialog_diy >>> .el-dialog {
+  /* height: 100%; */
+  /* margin: 0 auto !important; */
+}
+
+.dialog_diy >>> .el-dialog__header {
+  background: #fff !important;
+  padding: 15px 20px;
+}
+
+.dialog_diy >>> .el-dialog__body {
+  height: calc(100% - 124px);
+  box-sizing: border-box;
+  padding: 0px;
+}
+
+.dialog_diy >>> .el-dialog__title {
+  color: #000;
+}
+
+.dialog_diy >>> .el-dialog__headerbtn {
+  top: 19px;
+}
+
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
+  color: #000;
+}
+
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
+  color: #000;
+}
+
+.dialog_diy >>> .el-dialog__body,
+.dialog_diy >>> .el-dialog__footer {
+  background: #fff;
+}
+
+.share_box {
+  width: 100%;
+  height: 100%;
+  padding: 0 20px 15px;
+  box-sizing: border-box;
+}
+
+.info_box {
+  margin: 0 0 20px;
+}
+
+.info_box > .info {
+  line-height: 18px;
+}
+
+.info_box > .info > span:nth-child(1) {
+  color: #00000099;
+}
+
+.info_box > .info > span:nth-child(2) {
+  color: #000000;
+}
+
+.info_box > .info + .info {
+  margin-top: 10px;
+}
+
+.url_box {
+  margin-bottom: 20px;
+}
+
+.qrcode_box {
+  margin-bottom: 20px;
+}
+
+.url_box > .url {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border: 1px solid #e7e7e7;
+  border-radius: 4px;
+  height: 35px;
+  padding: 0 7px;
+  box-sizing: border-box;
+}
+
+.url_box > .url > span {
+  font-size: 16px;
+  color: #000000;
+}
+
+.url_box > .url > span:nth-child(1) {
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.url_box > .url > span:nth-child(2) {
+  margin-left: auto;
+  border-left: 1px solid #e7e7e7;
+  padding-left: 7px;
+  cursor: pointer;
+  min-width: fit-content;
+}
+
+.url_box > .title,
+.qrcode_box > .title {
+  font-size: 16px;
+  font-weight: 700;
+  margin-bottom: 10px;
+}
+
+.qrcode_box > .qrcode {
+  padding: 7px;
+  border: 1px solid #e7e7e7;
+  width: fit-content;
+  border-radius: 4px;
+  display: flex;
+  align-items: flex-end;
+}
+
+.qrcode_box > .qrcode > span:nth-child(1) {
+  width: 100px;
+  display: block;
+  height: 100px;
+}
+
+.qrcode_box > .qrcode > span:nth-child(2) {
+  background: #f0f2f5;
+  padding: 7px 15px;
+  font-size: 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  color: #000;
+  margin-left: 7px;
+}
+
+.btn_box {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.more {
+  cursor: pointer;
+  color: #0061ff;
+}
+</style>

src/components/pages/classroomObservation/index.vue

@@ -1,6 +1,6 @@
 <template>
-	<div class="classroomObservation" v-loading="loading">
-		<!-- <div class="co-header1">
+  <div class="classroomObservation" v-loading="loading">
+    <!-- <div class="co-header1">
 			<div class="co-h1-left">
 				<span class="co-h1-l-icon el-icon-s-home"></span>
 				<div class="co-h1-l-router">
@@ -10,57 +10,79 @@
 				 </div>
 			</div>
 		</div> -->
-		<div class="co-header2">
-			<div class="co-h2-left">
-				<span class="co-h2-l-icon"></span>
-				<span class="co-h2-l-hr"></span>
-				<span class="co-h2-l-text">
-					<el-select class="co_h2_l_t_select" v-model="tid" placeholder="请选择" @change="changeTid">
-  				  <el-option
-  				    v-for="item in optionData"
-  				    :key="item.value"
-  				    :label="item.label"
-  				    :value="item.value">
-  				  </el-option>
-  				</el-select>
-				</span>
-			</div>
-			<div class="co-h2-right">
-				<div
-					class="co-h2-r-btn co-h2-r-blueBtn"
-					style="background: rgba(54, 129, 252, 1)"
-					@click.stop="getReport()"
-				>
-					<span class="co-h2-r-b-icon1"></span>
-					<div>生成报告</div>
-				</div>
-				<div class="co-h2-r-btn2" @click.stop="preview()">
-					<!-- <span class="co-h2-r-b-icon2"></span> -->
-					<img
-						src="../../../assets/icon/classroomObservation/Syan.png"
-						alt=""
-					/>
-					<!-- <div>预览</div> -->
-				</div>
-				<div class="co-h2-r-btn2" @click.stop="share()">
-					<!-- <span class="co-h2-r-b-icon3"></span> -->
-					<img
-						src="../../../assets/icon/classroomObservation/daoChu.png"
-						alt=""
-					/>
-					<!-- <div>分享</div> -->
-				</div>
-			</div>
-		</div>
-		<div class="co-main">
-			<div class="co-m-left">
-				<chatArea :tid="tid" @updateFileId="updateFileId" :fileIdid="fileIdid"/>
-			</div>
-			<div class="co-m-right">
-				<messageArea :tid="tid" :fileId="fileId" ref="messageAreaRef" @updateFileId="updateFileId"  @updateFileIdid="updateFileIdid"/>
-			</div>
-		</div>
-	</div>
+    <div class="co-header2">
+      <div class="co-h2-left">
+        <span class="co-h2-l-icon"></span>
+        <span class="co-h2-l-hr"></span>
+        <span class="co-h2-l-text">
+          <el-select
+            class="co_h2_l_t_select"
+            v-model="tid"
+            placeholder="请选择"
+            @change="changeTid"
+          >
+            <el-option
+              v-for="item in optionData"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </span>
+      </div>
+      <div class="co-h2-right">
+        <div
+          class="co-h2-r-btn co-h2-r-blueBtn"
+          style="background: rgba(54, 129, 252, 1)"
+          @click.stop="getReport()"
+        >
+          <span class="co-h2-r-b-icon1"></span>
+          <div>生成报告</div>
+        </div>
+        <div class="co-h2-r-btn2" @click.stop="preview()">
+          <!-- <span class="co-h2-r-b-icon2"></span> -->
+          <img
+            src="../../../assets/icon/classroomObservation/Syan.png"
+            alt=""
+          />
+          <!-- <div>预览</div> -->
+        </div>
+        <div class="co-h2-r-btn2" @click.stop="shareBtn">
+          <!-- <span class="co-h2-r-b-icon3"></span> -->
+          <img
+            src="../../../assets/icon/classroomObservation/daoChu.png"
+            alt=""
+          />
+          <!-- <div>分享</div> -->
+        </div>
+      </div>
+    </div>
+    <div class="co-main">
+      <div class="co-m-left">
+        <chatArea
+          :tid="tid"
+          @updateFileId="updateFileId"
+          :fileIdid="fileIdid"
+        />
+      </div>
+      <div class="co-m-right">
+        <messageArea
+          :tid="tid"
+          :fileId="fileId"
+          ref="messageAreaRef"
+          @updateFileId="updateFileId"
+          @updateFileIdid="updateFileIdid"
+        />
+      </div>
+    </div>
+    <sharePdf
+      :dialogVisibleShare="dialogVisibleShare"
+      @shareBtn="shareBtn"
+    ></sharePdf>
+      
+
+  </div>
 </template>
 
 <script>
@@ -68,249 +90,254 @@
 import chatArea from "./components/chatArea.vue";
 // 信息区域
 import messageArea from "./components/messageArea.vue";
+
+import sharePdf from './components/sharePdf.vue'
 export default {
-	components: {
-		chatArea,
-		messageArea,
-	},
-	data() {
-		return {
-			title: "12月19日会议录音",
-			loading: false,
-			tid:'03',
-			fileId:"",
-			fileIdid:"",
-			optionData:[
-				{label:"03课程",value:'03'},
-				{label:"04课程",value:'04'},
-			],
-		};
-	},
-	methods: {
-		//切换了课堂
-		changeTid(newValue){
-			// console.log(this.tid)
-			// console.log(newValue)
-			this.$nextTick(()=>{
-				this.$refs.messageAreaRef.getData();
-			})
-		},
-		updateFileId(newValue){
-			this.fileId = newValue;
-		},
-		updateFileIdid(newValue){
-			this.fileIdid = newValue;
-		},
-		// 跳转
-		goTo(path) {
-			this.$message.info(`去到：${path}`);
-		},
-		// 生成报告
-		getReport() {
-			this.$refs.messageAreaRef.getReport()
-			// let assistant_title = [
-			// 	"课堂观察",
-			// 	"教学阶段九事件分析",
-			// 	"OMO智慧课堂分析",
-			// 	"布鲁姆问题分类",
-			// 	"麦克锡问题分类",
-			// 	"学生回答统计",
-			// 	"课堂活动类型",
-			// 	"素养目标分析",
-			// 	"科学教育目标分析",
-			// 	"5E课程改编",
-			// 	"5EX课程改编",
-			// 	"UTOP课程观察",
-			// 	"RST模型",
-			// 	"RTOP模型",
-			// 	"课堂质量评价",
-			// 	"scop课堂观察",
-			// 	"rtop课堂观察",
-			// ]
-			// let _index = 0;
-			// let _this = this;
-			// function addValue(){
-			// 	_this.$refs.messageAreaRef.addAnalysisItem({title:assistant_title[_index]}).then(_=>{
-			// 		_index+=1;
-			// 		if(_index<assistant_title.length){
-			// 				addValue()
-			// 		}
-			// 	}).catch(_=>{
-			// 		_index+=1;
-			// 		if(_index<assistant_title.length){
-			// 			addValue()
-			// 		}
-			// 	})
-			// }
-			// addValue()
-		},
-		//预览
-		preview() {
-			window.parent.postMessage(
-				{
-					tools: "classroom_observation_board",
-					type:this.tid,
-				},
-				"*"
-			);
-		},
-		// 分享
-		share() {
-			this.$message.info("分享");
-		},
-	},
+  components: {
+    chatArea,
+    messageArea,
+    sharePdf
+  },
+  data() {
+    return {
+      title: "12月19日会议录音",
+      loading: false,
+      dialogVisibleShare: false,
+      tid: "03",
+      fileId: "",
+      fileIdid: "",
+      optionData: [
+        { label: "03课程", value: "03" },
+        { label: "04课程", value: "04" }
+      ]
+    };
+  },
+  methods: {
+    //切换了课堂
+    changeTid(newValue) {
+      // console.log(this.tid)
+      // console.log(newValue)
+      this.$nextTick(() => {
+        this.$refs.messageAreaRef.getData();
+      });
+    },
+    updateFileId(newValue) {
+      this.fileId = newValue;
+    },
+    updateFileIdid(newValue) {
+      this.fileIdid = newValue;
+    },
+    // 跳转
+    goTo(path) {
+      this.$message.info(`去到：${path}`);
+    },
+    // 生成报告
+    getReport() {
+      this.$refs.messageAreaRef.getReport();
+      // let assistant_title = [
+      // 	"课堂观察",
+      // 	"教学阶段九事件分析",
+      // 	"OMO智慧课堂分析",
+      // 	"布鲁姆问题分类",
+      // 	"麦克锡问题分类",
+      // 	"学生回答统计",
+      // 	"课堂活动类型",
+      // 	"素养目标分析",
+      // 	"科学教育目标分析",
+      // 	"5E课程改编",
+      // 	"5EX课程改编",
+      // 	"UTOP课程观察",
+      // 	"RST模型",
+      // 	"RTOP模型",
+      // 	"课堂质量评价",
+      // 	"scop课堂观察",
+      // 	"rtop课堂观察",
+      // ]
+      // let _index = 0;
+      // let _this = this;
+      // function addValue(){
+      // 	_this.$refs.messageAreaRef.addAnalysisItem({title:assistant_title[_index]}).then(_=>{
+      // 		_index+=1;
+      // 		if(_index<assistant_title.length){
+      // 				addValue()
+      // 		}
+      // 	}).catch(_=>{
+      // 		_index+=1;
+      // 		if(_index<assistant_title.length){
+      // 			addValue()
+      // 		}
+      // 	})
+      // }
+      // addValue()
+    },
+    //预览
+    preview() {
+      window.parent.postMessage(
+        {
+          tools: "classroom_observation_board",
+          type: this.tid
+        },
+        "*"
+      );
+    },
+    // 分享
+    shareBtn() {
+      
+      this.dialogVisibleShare = !this.dialogVisibleShare;
+    }
+  }
 };
 </script>
 
 <style scoped>
 .classroomObservation {
-	width: 100%;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	background-color: #f0f2f5;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #f0f2f5;
 }
 
 .co-header1 {
-	width: 100%;
-	height: 46px;
-	background-color: #060e17;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	box-sizing: border-box;
-	padding: 0 20px;
+  width: 100%;
+  height: 46px;
+  background-color: #060e17;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 0 20px;
 }
 
 .co-h1-left {
-	width: auto;
-	height: 22px;
-	display: flex;
-	align-items: center;
-	box-sizing: border-box;
-	padding: 0 20px;
+  width: auto;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 20px;
 }
 
 .co-h1-l-icon {
-	color: #5d6268;
-	width: 16px;
-	height: 16px;
-	margin-right: 10px;
+  color: #5d6268;
+  width: 16px;
+  height: 16px;
+  margin-right: 10px;
 }
 
 .co-h1-l-router {
-	display: flex;
-	align-items: center;
-	color: white;
-	font-size: 14px;
+  display: flex;
+  align-items: center;
+  color: white;
+  font-size: 14px;
 }
 
 .co-h1-l-router > span {
-	margin: 0 5px;
+  margin: 0 5px;
 }
 
 .co-h1-l-r-up {
-	color: #5d6268;
-	cursor: pointer;
+  color: #5d6268;
+  cursor: pointer;
 }
 
 .co-h1-l-r-up:hover {
-	color: white;
+  color: white;
 }
 
 .co-j1-l-r-down {
-	cursor: pointer;
+  cursor: pointer;
 }
 
 .co-h1-l-r-rightIcon {
-	font-size: 16px;
-	color: #5d6268;
+  font-size: 16px;
+  color: #5d6268;
 }
 
 .co-header2 {
-	width: 100%;
-	height: 42px;
-	min-height: 42px;
-	max-height: 42px;
-	background-color: white;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	box-sizing: border-box;
-	padding: 0 20px;
+  width: 100%;
+  height: 42px;
+  min-height: 42px;
+  max-height: 42px;
+  background-color: white;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 0 20px;
 }
 
 .co-h2-left {
-	width: auto;
-	height: 22px;
-	display: flex;
-	align-items: center;
-	font-size: 14px;
+  width: auto;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
 }
 
 .co-h2-l-icon {
-	width: 20px;
-	height: 20px;
-	position: relative;
-	background: url("../../../assets/icon/classroomObservation/Zkicon.png")
-		no-repeat;
-	background-size: 100% 100%;
+  width: 20px;
+  height: 20px;
+  position: relative;
+  background: url("../../../assets/icon/classroomObservation/Zkicon.png")
+    no-repeat;
+  background-size: 100% 100%;
 }
 .co-h2-l-hr {
-	width: 2px;
-	height: 20px;
-	background-color: #e7e7e7;
-	border-radius: 10px;
-	margin: 0 10px;
+  width: 2px;
+  height: 20px;
+  background-color: #e7e7e7;
+  border-radius: 10px;
+  margin: 0 10px;
 }
 
 .co-h2-right {
-	width: auto;
-	height: 100%;
-	display: flex;
-	align-items: center;
+  width: auto;
+  height: 100%;
+  display: flex;
+  align-items: center;
 }
 
 .co-h2-r-btn {
-	width: auto;
-	box-sizing: border-box;
-	padding: 0 10px;
-	height: 30px;
-	display: flex;
-	align-items: center;
-	cursor: pointer;
-	font-size: 14px;
-	margin: 0 10px;
-	box-sizing: border-box;
-	border: 1px solid rgba(134, 179, 253, 1);
-	/* border: solid 1px #3681FC; */
-	border-radius: 5px;
+  width: auto;
+  box-sizing: border-box;
+  padding: 0 10px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: 14px;
+  margin: 0 10px;
+  box-sizing: border-box;
+  border: 1px solid rgba(134, 179, 253, 1);
+  /* border: solid 1px #3681FC; */
+  border-radius: 5px;
 }
 .co-h2-r-btn2 {
-	width: auto;
-	box-sizing: border-box;
-	padding: 10px;
-	height: 30px;
-	display: flex;
-	align-items: center;
-	cursor: pointer;
-	margin: 0 10px;
-	box-sizing: border-box;
-	border-radius: 5px;
-	box-shadow: 0px 4px 10px 0px rgba(29, 57, 131, 0.08);
+  width: auto;
+  box-sizing: border-box;
+  padding: 10px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  margin: 0 10px;
+  box-sizing: border-box;
+  border-radius: 5px;
+  box-shadow: 0px 4px 10px 0px rgba(29, 57, 131, 0.08);
 
-	/* box-shadow: 1px 1px 20px 4px rgba(29, 57, 131, 0.05); */
+  /* box-shadow: 1px 1px 20px 4px rgba(29, 57, 131, 0.05); */
 }
 
 .co-h2-r-btn > span:nth-child(1) {
-	width: 20px;
-	height: 20px;
-	margin-right: 8px;
+  width: 20px;
+  height: 20px;
+  margin-right: 8px;
 }
 
 .co-h2-r-b-icon1 {
-	background: url("../../../assets/icon/classroomObservation/six.png") no-repeat;
-	background-size: 100% 100%;
+  background: url("../../../assets/icon/classroomObservation/six.png") no-repeat;
+  background-size: 100% 100%;
 }
 
 /* .co-h2-r-b-icon2 {
@@ -325,39 +352,39 @@ export default {
 } */
 
 .co-h2-r-blueBtn {
-	background: rgba(134, 179, 253, 1);
+  background: rgba(134, 179, 253, 1);
 
-	color: white;
+  color: white;
 }
 
 .co-main {
-	width: 100%;
-	flex: 1;
-	display: flex;
+  width: 100%;
+  flex: 1;
+  display: flex;
 
-	/* align-items: center; */
-	/* justify-content: center; */
+  /* align-items: center; */
+  /* justify-content: center; */
 }
 
 .co-m-left {
-	box-sizing: border-box;
-	flex: 1;
-	min-width: 650px;
+  box-sizing: border-box;
+  flex: 1;
+  min-width: 650px;
 }
 
 .co-m-right {
-	height: 100%;
-	flex: 1;
-	box-sizing: border-box;
-	min-width: 450px;
+  height: 100%;
+  flex: 1;
+  box-sizing: border-box;
+  min-width: 450px;
 
-	overflow: auto;
+  overflow: auto;
 }
 
-.co_h2_l_t_select>>>.el-input__inner{
-	border: none;
+.co_h2_l_t_select >>> .el-input__inner {
+  border: none;
 }
-.co_h2_l_t_select>>>.el-input__suffix{
-	display: none;
+.co_h2_l_t_select >>> .el-input__suffix {
+  display: none;
 }
 </style>