update

src/assets/icon/classroomObservation/collect1.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.00001 1.5C8.1894 1.5 8.36253 1.61128 8.44723 1.78745L10.3276 5.69853L14.062 6.18401C14.2515 6.20865 14.411 6.34338 14.4729 6.53124C14.5349 6.71909 14.4886 6.92726 14.3536 7.06769L11.5537 9.9795L12.4851 13.8539C12.5302 14.0413 12.4715 14.2393 12.3329 14.368C12.1942 14.4967 11.9984 14.5347 11.8245 14.4669L8.00001 12.9754L4.17558 14.4669C4.0016 14.5347 3.80578 14.4967 3.66714 14.368C3.52849 14.2393 3.46988 14.0413 3.51494 13.8539L4.44628 9.9795L1.64646 7.06769C1.51143 6.92726 1.4651 6.71909 1.52708 6.53124C1.58905 6.34338 1.7485 6.20865 1.938 6.18401L5.67247 5.69853L7.5528 1.78745C7.6375 1.61128 7.81063 1.5 8.00001 1.5ZM8.00001 3.18275L6.44723 6.41255C6.37246 6.56806 6.22792 6.67442 6.06203 6.69598L3.07646 7.08411L5.35357 9.4523C5.47776 9.58146 5.52768 9.76891 5.48509 9.94611L4.71603 13.1454L7.82445 11.9331C7.93764 11.889 8.06238 11.889 8.17558 11.9331L11.284 13.1454L10.5149 9.94611C10.4723 9.76891 10.5223 9.58146 10.6465 9.4523L12.9236 7.08411L9.938 6.69598C9.77211 6.67442 9.62756 6.56806 9.5528 6.41255L8.00001 3.18275Z" fill="black" fill-opacity="0.4"/>
+</svg>

src/assets/icon/classroomObservation/collect2.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 2L10.3041 5.82865L14.6574 6.83688L11.7281 10.2113L12.1145 14.6631L8 12.92L3.8855 14.6631L4.27186 10.2113L1.3426 6.83688L5.69588 5.82865L8 2Z" fill="#F6C826" stroke="#F6C826" stroke-linejoin="round"/>
+</svg>

src/components/pages/classroomObservation/components/addNewAnalysisDialog.vue

@@ -0,0 +1,442 @@
+<template>
+	<div>
+		<el-dialog :center="true" :visible.sync="dialogVisible" width="1200px" class="addTemplateDialog">
+			<!-- <div v-if="showDialog == true" class="a-dialog" v-el-drag-dialog> -->
+			<div class="a-d-top">
+				<div class="a-d-topTit"><div style="width: 136px">添加模块</div></div>
+				<div>
+					<el-input
+						placeholder="请输入内容"
+						prefix-icon="el-icon-search"
+						v-model="input2"
+						clearable
+					>
+					</el-input>
+				</div>
+				<div class="a-d-t-right">
+					<span @click.stop="close()">×</span>
+				</div>
+			</div>
+			<div style="display: flex; height: 100%">
+				<div class="a-d-t-left">
+					<!-- <div class="itemTit">我的模块</div> -->
+					<div
+						:style="
+							tagIndex == index
+								? 'background: rgba(226, 238, 255, 1);color: rgba(54, 129, 252, 1)'
+								: ''
+						"
+						class="a-d-t-l-item"
+						v-for="(item, index) in dialogTagList"
+						:key="item.id"
+						@click.stop="tagIndex = index"
+					>
+						{{ item.name }}
+					</div>
+				</div>
+				<div class="a-d-box">
+					
+					<div
+						style="
+							font-family: PingFang SC;
+							font-size: 16px;
+							font-weight: 600;
+							line-height: 22px;
+							text-align: left;
+							margin: 20px 0;
+							margin-bottom: 10px;
+						"
+					>
+						推荐
+					</div>
+					<div class="a-d-b-subject">
+						<span v-for="(item,index) in tagSubjectList" :class="['a_d_b_s_btn',tagSubject==item?'a_d_b_s_ActiveBtn':'']"  :key="index+'-'+tagIndex" @click.stop="tagSubject==item?tagSubject='':tagSubject=item">{{ item }}</span>
+					</div>
+					<div style="display: flex; flex-wrap: wrap">
+						<div
+							class="a-d-b-item"
+							v-for="(item, index) in searchDataList"
+							:key="index"
+						>
+							<div class="a-d-b-i-top">
+								<img
+									style="height: 22px; width: 22px"
+									:src="
+										require('../../../../assets/icon/classroomObservation/digImg.svg')
+									"
+								/>
+								<div class="a-d-b-i-t-title">{{ item.title }}</div>
+							</div>
+							<div class="a-d-b-i-bottom">{{ item.brief }}</div>
+							<div class="a-d-b-i-bottomPer" style="display: block">
+								{{item.sum}}人已使用
+							</div>
+							<div class="a-d-b-i-bottomBtn" style="display: none">
+								<div
+									style="
+										display: flex;
+										width: 100%;
+										justify-content: space-around;
+									"
+								>
+									<!-- <div class="a-d-b-i-t-btn">详情</div> -->
+									<div
+										class="a-d-b-i-t-btn1"
+										@click="addAnalysisItem(item.title)"
+									>
+										添加
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<!-- </div> -->
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+	export default {
+		props:{
+			dialogTagDataList:{
+				type:Array,
+				default:()=>{
+					return []
+				}
+			}
+		},
+		data(){
+			return{
+				dialogVisible:false,
+				input2:"",
+				tagIndex: 0,
+			tagSubject:'',
+				dialogTagList: [
+				{ id: 0, name: "通用课堂分析", },
+				{ id: 1, name: "学科课堂分析" },
+				{ id: 2, name: "扩展分析" },
+				//{ id: 3, name: "增值性分析" },
+			],
+			}
+		},
+		computed:{
+			searchDataList() {
+			let _result = this.dialogTagDataList.filter((i) => i.type == this.tagIndex);
+			if (this.input2) {
+				_result = _result.filter((i) => i.title.indexOf(this.input2) > -1);
+			}
+			if(this.tagSubject){
+				_result = _result.filter((i) => i.subject == this.tagSubject);
+			}
+
+			return _result
+		},
+		tagSubjectList(){
+			let _result = [];
+			this.dialogTagDataList.filter((i) => i.type == this.tagIndex).forEach(i=>{
+				if(i.subject && !_result.includes(i.subject)){
+					_result.push(i.subject)
+				}
+			})
+			return _result;
+		}
+		},
+		methods:{
+			open(type){
+				this.tagIndex = type;
+				this.input2 = "";
+				this.tagSubject = "";
+				this.dialogVisible = true;
+			},
+			close(){
+				this.dialogVisible = false;
+				this.tagIndex = 0;
+				this.input2 = "";
+				this.tagSubject = "";
+			},
+			addAnalysisItem(title){
+				this.$emit("success",title)
+			}
+		}
+	}
+</script>
+
+<style scoped>
+.a-d-top {
+	/* background: #adadad; */
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	align-items: center;
+	justify-content: space-between;
+	height: 54px;
+	border-radius: 8px 8px 0 0;
+	user-select: none;
+	border-bottom: 1px #ccc solid;
+}
+.a-d-top >>> .el-input__inner {
+	width: 320px;
+	height: 32px;
+}
+.a-d-top >>> .el-input__icon {
+	line-height: 32px;
+}
+.a-d-topTit {
+	width: 171px;
+	height: 32px;
+	display: flex;
+	align-items: center;
+	font-family: PingFang SC;
+	box-sizing: border-box;
+	padding: 5px;
+	line-height: 22px;
+	justify-content: center;
+	/* text-align: left; */
+}
+.a-d-t-left {
+	width: 200px;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	justify-content: flex-start;
+	box-sizing: border-box;
+	padding-left: 5px;
+}
+
+.a-d-t-l-item {
+	/* width: auto;
+	height: 90%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 0 10px;
+	border-radius: 10px;
+	background-color: #d4d9da;
+	margin-right: 3px;
+	cursor: pointer; */
+	cursor: pointer;
+	width: 136px;
+	height: 32px;
+	display: flex;
+	align-items: center;
+	border-radius: 5px;
+	font-family: PingFang SC;
+	box-sizing: border-box;
+	padding: 5px;
+	font-size: 14px;
+	font-weight: 600;
+	line-height: 22px;
+	text-align: left;
+	margin-top: 20px;
+	/* margin-bottom: 20px; */
+}
+
+.a-d-t-l-item:hover {
+	background-color: white;
+}
+
+.a-d-t-right {
+	width: 40px;
+	height: 40px;
+	margin-right: 10px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: black !important;
+}
+
+.a-d-t-right > span {
+	width: 25px;
+	height: 25px;
+	border-radius: 25px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	/* align-items: center; */
+	font-size: 22px;
+	color: #fff;
+	/* background-color: #adadad; */
+	cursor: pointer;
+	/* background-color: #e6e6e6; */
+	color: #adadad;
+}
+
+.a-d-box {
+	width: 100%;
+	height: 100%;
+	background-color: #f0f2f5;
+	overflow: scroll;
+	overflow-x: hidden;
+	box-sizing: border-box;
+	padding: 15px;
+	padding-bottom: 50px;
+}
+
+.a-d-b-item {
+	width: 22%;
+	height: 200px;
+	display: flex;
+	flex-direction: column;
+	background-color: #fff;
+	border-radius: 10px;
+	padding: 15px;
+	float: left;
+	box-sizing: border-box;
+	margin-bottom: 10px;
+	margin-right: 20px;
+	transform: .3s;
+	box-shadow: 0 16px 24px 2px #f0f2f5;
+	/* position: relative; */
+}
+
+.a-d-b-item:hover{
+	box-shadow: 0 16px 24px 2px #0000001c;
+}
+
+.a-d-b-item:hover .a-d-b-i-bottomBtn {
+	display: block !important;
+}
+.a-d-b-item:hover .a-d-b-i-bottomPer {
+	display: none !important;
+}
+.a-d-b-i-top {
+	width: 100%;
+	/* height: 50%; */
+	height: 20px;
+	margin-bottom: 15px;
+	display: flex;
+	align-items: center;
+	/* justify-content: space-between; */
+}
+.a-d-b-i-top > img {
+	width: 35px;
+	height: 35px;
+}
+/* .a-d-b-i-top>div{ */
+/* width: auto;
+	height: 35px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-left: 10px; */
+/* } */
+
+.a-d-b-i-t-title {
+	width: 100%;
+	height: 35px;
+	display: block;
+	align-items: center;
+	box-sizing: border-box;
+	padding: 0 10px;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	word-break: break-all;
+	white-space: nowrap;
+	line-height: 35px;
+	/* display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 1;
+	overflow: hidden; */
+}
+
+.a-d-b-i-bottom {
+	width: 100%;
+	flex: 1;
+	overflow: hidden;
+	/* max-height: 186px; */
+	font-size: 14px;
+	-webkit-line-clamp: 5;
+	line-height: 20px;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.a-d-b-i-t-btn {
+	font-size: 14px;
+	box-sizing: border-box;
+	padding: 8px 25px;
+	border: 1px solid rgba(54, 129, 252, 1);
+	border-radius: 5px;
+	color: rgba(54, 129, 252, 1);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	cursor: pointer;
+}
+.a-d-b-i-t-btn1 {
+	font-size: 14px;
+	width: 98%;
+	box-sizing: border-box;
+	padding: 8px 25px;
+	border: 1px solid rgba(54, 129, 252, 1);
+	border-radius: 5px;
+	background-color: rgba(54, 129, 252, 1);
+	display: flex;
+	color: #fff;
+	justify-content: center;
+	align-items: center;
+	cursor: pointer;
+}
+.addTemplateDialog >>> .el-dialog {
+	min-width: 1200px;
+
+	height: 700px;
+	box-shadow: 0px 0 8px 0px #555555;
+	border-radius: 8px;
+	background-color: #fff;
+	/* top: 0px; */
+	/* margin: 0 auto; */
+	overflow: hidden;
+}
+.addTemplateDialog >>> .el-dialog__body {
+	height: 100%;
+	min-width: 1200px;
+	flex-shrink: 0;
+	box-sizing: border-box;
+	padding-bottom: 50px;
+	padding-top: 10px;
+}
+.addTemplateDialog >>> .el-dialog__header {
+	display: none;
+}
+.itemTit {
+	width: 136px;
+	height: 32px;
+	padding: 5px 8px 5px 8px;
+	gap: 8px;
+	opacity: 0px;
+	margin: 20px 0;
+	margin-bottom: 10px;
+	border-bottom: 1px #ccc solid;
+}
+
+.a-d-b-subject{
+	margin: 20px 0 20px 0;
+}
+
+.a_d_b_s_btn{
+	padding: 5px 10px;
+	border-radius: 4px;
+	border: solid 1px #3681FC;
+	color: #3681FC;
+	background-color: white;
+	margin-right: 10px;
+	cursor: pointer;
+	transition: .3s;
+}
+
+.a_d_b_s_ActiveBtn{
+	background-color: #3681FC;
+	color: white;
+}
+
+.a-d-b-i-t-btn:hover {
+	background-color: rgba(54, 129, 252, 1);
+	color: #fff;
+}
+</style>

src/components/pages/classroomObservation/components/analysis2.vue

@@ -0,0 +1,401 @@
+<template>
+	<div class="analysis">
+		<div class="a-header">
+			<div class="a-h-left" @click.stop="changeShowItem(!showItem)">
+				<span :class="['a-h-l-icon', showItem ? 'a-h-l-showIcon' : '']"></span>
+				<span class="a-h-l-title">{{ title }}</span>
+			</div>
+			<div class="a-h-right" v-if="showAdd">
+				<div class="a-h-r-btn" @click.stop="addTemplate">
+					<img src="@/assets/icon/classroomObservation/newcon.svg" alt="" />
+					添加模块
+				</div>
+			</div>
+		</div>
+		<div class="a-main" v-show="showItem">
+			<analysisItem
+				ref="analysisItemRef"
+				v-if="item.jsonData.name!='词频词汇分析'"
+				v-for="(item, index) in analysisItemList"
+				:key="index"
+				:data="item"
+				
+				:index="index"
+				:showAdd="showAdd"
+				@delItem="delItem"
+			/>
+			<div class="a_m_empty" v-if="analysisItemList.length == 0">
+				暂无模块...
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import analysisItem from "./analysisItem2";
+export default {
+	emits: ["delItem","addAnalysisItem"],
+	props: {
+		title: {
+			type: String,
+			default: "分析",
+		},
+		analysisItemList: {
+			type: Array,
+			default: () => {
+				return [];
+			},
+		},
+		type: {
+			type: Number,
+			default: 0,
+		},
+		showAdd:{
+			type:Boolean,
+			default:false
+		}
+	},
+	components: {
+		analysisItem,
+	},
+	data() {
+		return {
+			showDialog: false,
+			showItem: true,
+		};
+	},
+	methods: {
+		addTemplate() {
+			this.$emit('addAnalysisItem',this.type)
+		},
+		changeShowItem(newValue) {
+			this.showItem = newValue;
+		},
+		delItem(index) {
+			this.$emit("delItem",this.type,index);
+		},
+	},
+};
+</script>
+
+<style scoped>
+.itemTit {
+	width: 136px;
+	height: 32px;
+	padding: 5px 8px 5px 8px;
+	gap: 8px;
+	opacity: 0px;
+	margin: 20px 0;
+	margin-bottom: 10px;
+	border-bottom: 1px #ccc solid;
+}
+.analysis {
+	width: 100%;
+	height: auto;
+}
+
+.a-header {
+	width: 100%;
+	height: 50px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	box-sizing: border-box;
+	padding-right: 10px;
+}
+
+.a-h-left {
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+}
+
+.a-h-l-icon {
+	width: 16px;
+	height: 16px;
+	background: url("../../../../assets/icon/classroomObservation/right.svg")
+		no-repeat;
+	background-size: 100% 100%;
+	margin-right: 5px;
+	transition: 0.3s;
+}
+
+.a-h-l-showIcon {
+	transform: rotate(90deg);
+}
+
+.a-h-l-title {
+	font-size: 18px;
+}
+
+.a-h-r-btn {
+	font-size: 16px;
+	height: 35px;
+	width: auto;
+	box-sizing: border-box;
+	/* padding: 0 20px; */
+	/* border: solid 1px #C5C5C5; */
+	/* border-radius: 18px; */
+	cursor: pointer;
+	/* background-color: white; */
+	display: flex;
+	color: rgba(54, 129, 252, 1);
+	justify-content: center;
+	align-items: center;
+}
+
+.a-h-r-btn > img {
+	width: 16px;
+	height: 16px;
+	margin-right: 5px;
+}
+
+.a-main {
+	width: calc(100%);
+	height: auto;
+}
+
+.a-dialog {
+	position: fixed;
+	width: 1200px;
+	height: 500px;
+	min-height: 600px;
+	box-shadow: 0px 0 8px 0px #555555;
+	border-radius: 8px;
+	z-index: 999;
+	background-color: #fff;
+	left: 0;
+	right: 0;
+	top: 100px;
+	margin: 0 auto;
+	/* margin: 0 auto; */
+	/* top: 50%; */
+	/* margin: -18% 0 0 -300px; */
+	overflow: hidden;
+}
+
+.a-d-top {
+	/* background: #adadad; */
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	align-items: center;
+	justify-content: space-between;
+	height: 54px;
+	border-radius: 8px 8px 0 0;
+	user-select: none;
+	border-bottom: 1px #ccc solid;
+}
+.a-d-top >>> .el-input__inner {
+	width: 320px;
+	height: 32px;
+}
+.a-d-top >>> .el-input__icon {
+	line-height: 32px;
+}
+.a-d-topTit {
+	width: 171px;
+	height: 32px;
+	display: flex;
+	align-items: center;
+	font-family: PingFang SC;
+	box-sizing: border-box;
+	padding: 5px;
+	line-height: 22px;
+	justify-content: center;
+	/* text-align: left; */
+}
+.a-d-t-left {
+	width: 200px;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	justify-content: flex-start;
+	box-sizing: border-box;
+	padding-left: 5px;
+}
+
+.a-d-t-l-item {
+	/* width: auto;
+	height: 90%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 0 10px;
+	border-radius: 10px;
+	background-color: #d4d9da;
+	margin-right: 3px;
+	cursor: pointer; */
+	cursor: pointer;
+	width: 136px;
+	height: 32px;
+	display: flex;
+	align-items: center;
+	border-radius: 5px;
+	font-family: PingFang SC;
+	box-sizing: border-box;
+	padding: 5px;
+	font-size: 14px;
+	font-weight: 600;
+	line-height: 22px;
+	text-align: left;
+	margin-bottom: 20px;
+}
+
+.a-d-t-l-item:hover {
+	background-color: white;
+}
+
+.a-d-t-right {
+	width: 40px;
+	height: 40px;
+	margin-right: 10px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: black !important;
+}
+
+.a-d-t-right > span {
+	width: 25px;
+	height: 25px;
+	border-radius: 25px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	/* align-items: center; */
+	font-size: 22px;
+	color: #fff;
+	/* background-color: #adadad; */
+	cursor: pointer;
+	/* background-color: #e6e6e6; */
+	color: #adadad;
+}
+
+.a-d-box {
+	width: 100%;
+	height: 100%;
+	/* height: calc(100% - 40px); */
+	background-color: #f0f2f5;
+	overflow: auto;
+
+	box-sizing: border-box;
+	padding: 15px;
+	padding-bottom: 50px;
+}
+
+.a-d-b-item {
+	width: 22%;
+	height: 200px;
+	display: flex;
+	flex-direction: column;
+	background-color: #fff;
+	border-radius: 10px;
+	padding: 15px;
+	float: left;
+	box-sizing: border-box;
+	margin-bottom: 10px;
+	/* position: relative; */
+}
+.a-d-b-item:hover .a-d-b-i-bottomBtn {
+	display: block !important;
+}
+.a-d-b-item:hover .a-d-b-i-bottomPer {
+	display: none !important;
+}
+.a-d-b-i-top {
+	width: 100%;
+	/* height: 50%; */
+	height: 20px;
+	margin-bottom: 15px;
+	display: flex;
+	align-items: center;
+	/* justify-content: space-between; */
+}
+.a-d-b-i-top > img {
+	width: 35px;
+	height: 35px;
+}
+/* .a-d-b-i-top>div{ */
+/* width: auto;
+	height: 35px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-left: 10px; */
+/* } */
+
+.a-d-b-i-t-title {
+	width: 100%;
+	height: 35px;
+	display: block;
+	align-items: center;
+	box-sizing: border-box;
+	padding: 0 10px;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	word-break: break-all;
+	white-space: nowrap;
+	line-height: 35px;
+	/* display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 1;
+	overflow: hidden; */
+}
+
+.a-d-b-i-bottom {
+	width: 100%;
+	flex: 1;
+	overflow: hidden;
+	/* max-height: 186px; */
+	font-size: 14px;
+	-webkit-line-clamp: 5;
+	line-height: 20px;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.a-d-b-i-t-btn {
+	font-size: 14px;
+	/* height: 30px; */
+	/* position: relative; */
+	/* top: 5px; */
+	box-sizing: border-box;
+	padding: 8px 25px;
+	/* background-color: #f3f3f3; */
+	border: 1px solid rgba(54, 129, 252, 1);
+	border-radius: 5px;
+	color: rgba(54, 129, 252, 1);
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	cursor: pointer;
+	/* position: absolute; */
+	/* right: 10px; */
+	/* top: 10px; */
+}
+.a-d-b-i-t-btn1 {
+	font-size: 14px;
+	box-sizing: border-box;
+	padding: 8px 25px;
+	border: 1px solid rgba(54, 129, 252, 1);
+	border-radius: 5px;
+	background-color: rgba(54, 129, 252, 1);
+	display: flex;
+	color: #fff;
+	justify-content: center;
+	align-items: center;
+	cursor: pointer;
+}
+.a_m_empty {
+	display: flex;
+	width: 100%;
+	justify-content: center;
+	font-size: 14px;
+	color: #555555;
+}
+</style>

src/components/pages/classroomObservation/components/analysisItem2.vue

@@ -0,0 +1,258 @@
+<template>
+	<div class="analysisItem">
+		<div class="ai-header" v-show="data.jsonData.name != '词频词汇分析'">
+			<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" v-if="showAdd">
+				<span
+					class="ai-h-r-icon4"
+					@click.stop="delBtn()"
+				>
+					<el-tooltip
+						class="item"
+						effect="light"
+						content="删除"
+						placement="top"
+					>
+						<img
+							:src="
+								require('../../../../assets/icon/classroomObservation/del.svg')
+							"
+						/>
+					</el-tooltip>
+				</span>
+			</div>
+		</div>
+		<div class="ai-main" v-if="openItem">
+			<div class="a-m-brief">
+				{{ data.jsonData.result }}
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	emits: ["delItem"],
+	props: {
+		data: {
+			type: Object,
+			default: () => {
+				return {};
+			},
+		},
+		index: {
+			type: Number,
+			default: 0,
+		},
+		showAdd:{
+			type:Boolean,
+			default:false
+		},
+	},
+	data() {
+		return {
+			openItem: false,
+			loading: false,
+			loadNum: 0,
+			userId:this.$route.query['userid'],
+			showIndex: 0,
+		};
+	},
+	computed: {
+
+	},
+	watch: {
+
+	},
+	methods: {
+		changeOpenItem(newValue) {
+			this.openItem = newValue;
+		},
+
+		delBtn() {
+			this.$confirm("确定删除？", "提示", {
+				confirmButtonText: "确定",
+				cancelButtonText: "取消",
+				type: "error",
+			}).then(() => {
+				this.$emit("delItem", this.index);
+			}).catch(_=>{
+				console.log("取消")
+			});
+		},
+
+	},
+	mounted() {
+	
+	},
+};
+</script>
+
+<style scoped>
+.analysisItem {
+	width: 100%;
+	height: auto;
+	margin: 11.7px 0px;
+	padding-right: 10px;
+	box-sizing: border-box;
+	border: solid 1px #F0F0F0;
+	border-radius: 3px;
+}
+.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;
+}
+.ai-h-left {
+	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.svg")
+		no-repeat;
+	background-size: 100% 100%;
+	margin-right: 10px;
+	transition: 0.3s;
+}
+
+.ai-h-l-iconActive {
+	transform: rotate(90deg);
+}
+.ai-h-l-text {
+	font-size: 18px;
+}
+
+.ai-h-right {
+	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;
+}
+
+.ai-h-right > span > img {
+	width: 18px;
+	height: 18px;
+}
+
+.ai-h-r-icon1 {
+	background: url("../../../../assets/icon/classroomObservation/back.svg");
+	/* 镜像 */
+	transform: scaleX(-1);
+}
+
+.ai-h-r-icon2 {
+	background: url("../../../../assets/icon/classroomObservation/back.svg");
+}
+
+.ai_h_r_iconOpacity {
+	opacity: 0.5;
+	cursor: not-allowed !important;
+}
+
+.ai-h-r-icon3 {
+	background: url("../../../../assets/icon/classroomObservation/edit.svg");
+	/* display: none; */
+}
+
+.ai-header:hover .ai-h-r-icon4 {
+	display: block;
+}
+
+.ai-h-r-icon4 {
+	background: url("../../../../assets/icon/classroomObservation/del.svg");
+	/* position: absolute; */
+	/* right: -40px; */
+	display: none;
+}
+
+.analysisItem:hover .ai-h-r-icon4 {
+	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;
+}
+
+.a-m-brief {
+	font-size: 16px;
+	/* 斜体 */
+	font-style: italic;
+	margin-bottom: 10px;
+	color: #6b798e;
+}
+
+td,
+th {
+	padding: 10px;
+}
+
+.generate{
+	color: #00000099;
+	font-size: 16px;
+	display: flex;
+	align-items: center;
+}
+
+.generate>img{
+	margin-right: 5px;
+	width: 20px;
+	height: 20px;
+}
+
+.generateSuccess{ 
+	color: #17C469;
+	font-size: 16px;
+	display: flex;
+	align-items: center;
+}
+
+.generateSuccess>img{
+	margin-right: 5px;
+	width: 20px;
+	height: 20px;
+}
+
+.generateError{
+	color: #e60012;
+	font-size: 16px;
+	display: flex;
+	align-items: center;
+}
+</style>

src/components/pages/classroomObservation/components/baseMessage.vue

@@ -229,25 +229,25 @@
 					</div>
 				</div>
 			</div>
-			<!-- <div class="nephogramArea">
+			<div class="nephogramArea">
 				<div class="fl_nephogram">
 					<div class="imgTit">
 						<span>词云图</span>
 						<span></span>
 					</div>
-					<div class="m-m-formImage" v-loading="uploadNephogramLoading">
+					<div class="m-m-formImage">
 								<div
 									class="m-m-fi-nephogramItem"
 									style="width:100%;"
-									v-if="!imageList.videoList.length==0"
-									v-for="(item, index) in imageList.NephogramList?imageList.NephogramList:[]"
-									:key="index"
+									 v-loading="uploadNephogramLoading"
+									v-if="(imageList.NephogramList&&imageList.NephogramList.length>0)"
 								>
-								
+									<wordcloudEChart :data="imageList.NephogramList[0]"/>
 									<span @click.stop="delNephogram('NephogramList')"></span>
 								</div>
 							<div
 								class="m-m-fi-nephogramItem"
+								 v-loading="uploadNephogramLoading"
 								@click.stop="addNephogram()"
 								style="width:23.5%;max-height: 100px;"
 								v-if="((imageList.NephogramList&&imageList.NephogramList.length<=0) || !imageList.NephogramList)"
@@ -270,7 +270,7 @@
 							</div>
 					</div>
 				</div>
-			</div> -->
+			</div>
 		</div>
 		<previewVideoDialog ref="previewVideoDialogRef"/>
 	</div>
@@ -278,10 +278,13 @@
 
 <script>
 import previewVideoDialog from './previewVideoDialog.vue';
+import wordcloudEChart from './wordcloudEChart.vue'
+import { v4 as uuidv4 } from "uuid";
 export default {
-	emits: ["saveData", "saveImage", "saveVideo","delImage"],
+	emits: ["saveData", "saveImage", "saveVideo","delImage","saveNephogram"],
 	components:{
-		previewVideoDialog
+		previewVideoDialog,
+		wordcloudEChart
 	},
 	props: {
 		data: {
@@ -306,10 +309,15 @@ export default {
 				};
 			},
 		},
+		dataList:{
+			type:Array,
+			default:()=>[]
+		}
 	},
 	data() {
 		return {
 			title: "基本信息",
+			chartObj:null,
 			showMain: true,
 			uploadImageLoading: false,
 			uploadVideoLoading:false,
@@ -495,8 +503,120 @@ export default {
 		},
 		//添加云图
 		addNephogram(){
-			this.$message.info("生成词云图")
+			if(!this.tid)return this.$message.error("请选择课堂")
+			if(this.uploadNephogramLoading)return this.$message.info("请稍等");
+			this.uploadNephogramLoading = true;
+			let _workText = ``;
+			this.dataList.forEach((i) => {
+						let _jsonObj = i.jsonData;
+							_workText += `名称：${_jsonObj.name}\n分析内容：${_jsonObj.content?_jsonObj.content:''}\n\n`;
+				});
+			const _msg = `NOTICE
+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.
+ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
+Instruction: Based on the context, follow "Format example", write content.
+
+## 参靠内容
+${_workText}
+
+## 要求
+根据#参考内容 生成词云图数据,2-4个字的短语,选取与课程比较相关的词汇，禁止有重复的词汇,去掉【这里】【哪里】【谁知】之类无指示含义的词汇；格式参考## format example
+输入完整的JSON数据,禁止有重复的词汇;
+## format example
+[
+	{"value":1,"name":"词汇","textStyle":{"color":"随机颜色"}},
+	{"value":2,"name":"词汇","textStyle":{"color":"随机颜色"}},
+	{"value":1,"name":"词汇","textStyle":{"color":"随机颜色"}},
+	{"value":3,"name":"词汇","textStyle":{"color":"随机颜色"}},
+	{"value":1,"name":"词汇","textStyle":{"color":"随机颜色"}},
+	{"value":2,"name":"词汇","textStyle":{"color":"随机颜色"}},
+	{"value":1,"name":"词汇","textStyle":{"color":"随机颜色"}},
+	{"value":4,"name":"词汇","textStyle":{"color":"随机颜色"}}
+]
+`;
+				const _uuid = uuidv4();
+				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 _jsonData = _data.message.content;
+						_jsonData = _jsonData.replaceAll("```json", "").replaceAll("```", "");
+						let _result = JSON.parse(_jsonData);
+						console.log(_jsonData)
+						this.$emit('saveNephogram',{
+    tooltip: {
+      show: false,
+    },
+    series: [
+      {
+        type: 'wordCloud',
+        sizeRange: [14, 38],
+        rotationRange: [0, 0],
+				keepAspect:false,
+				shape: 'circle',
+        left: 'center',
+        top: 'center',
+        right: null,
+        bottom: null,
+        width: '90%',
+        height: '90%',
+        // maskImage: maskImage,
+				// sizeRange: [12, 60],
+				rotationRange: [-90, 90],
+        rotationStep: 45,
+        gridSize: 12,
+        autoSize: {
+          enable: true,
+          minSize: 12,
+        },
+        // textStyle: {
+        //   color: function () {
+        //     var colors = [
+        //       '#F6A878',
+        //       '#FDCA71',
+        //       '#D9E4E4',
+        //       '#CAE1E6',
+        //       '#8B9ECD',
+        //       '#6CB9FB',
+        //       '#5596F7',
+        //       '#4778FE',
+        //     ];
+        //     return colors[parseInt(Math.random() * 8)];
+        //   },
+        // },
+        data: _result,
+        // [{name: "行政处罚"num: 1324}]
+      },
+    ],
+  })
+					})
+					.catch((e) => {
+						console.log(e);
+						this.$message.error("生成词云图失败");
+					})
+					.finally((_) => {
+						this.uploadNephogramLoading = false;
+					});
+			// this.$emit('saveNephogram',{
+			// 		name: "测试",
+			// 		status: "success",
+			// 		uid: "1",
+			// 		url: "测试",
+			// })
 		},
+
 		// 删除图片
 		delImage(key) {
 			this.$confirm("确定删除该图片吗？", "提示", {
@@ -546,7 +666,9 @@ export default {
 			this.$emit("saveData");
 		},
 	},
-	mounted() {},
+	mounted() {
+		// this.showNephogram();
+	},
 };
 </script>
 
@@ -721,6 +843,7 @@ export default {
 	background-repeat: no-repeat;
 	background-size: 100% 100%;
 	display: none;
+	z-index: 9999;
 	/* display: flex;
 	justify-content: flex-end;
 	align-items: flex-start;
@@ -852,7 +975,7 @@ export default {
 	height: 100%;
 }
 
-.m-m-fi-imageItem > span {
+.m-m-fi-nephogramItem > span {
 	width: 20px;
 	height: 20px;
 	position: absolute;
@@ -862,6 +985,7 @@ export default {
 	background-repeat: no-repeat;
 	background-size: 100% 100%;
 	display: none;
+	z-index: 99999;
 	/* display: flex;
 	justify-content: flex-end;
 	align-items: flex-start;

src/components/pages/classroomObservation/components/chatArea.vue

@@ -541,8 +541,6 @@ export default {
 				content: "",
 				url: "",
 			},
-			fileUrl:
-				"https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E8%BD%AC%E5%BD%95%E6%96%87%E7%A8%BF1713172600896.xlsx",
 			// 设置list
 			languageList: [
 				{ label: 2, lang: "普通话" },
@@ -1735,6 +1733,13 @@ export default {
 		getData() {
 			if (!this.tid) return;
 			this.loading = true;
+			this.transcriptionData.content = "";
+			this.editorBarData = {
+				type: "0", //0---文字   1-文件
+				content: "",
+				url: "",
+			},
+			this.audioUrl = "";
 			this.getRoleList();
 			this.getPublicRoleList();
 			this.getChatList().then((_) => {
@@ -1778,7 +1783,6 @@ export default {
 			}
 		},
 		changeEditorBar({ transcriptionData, editorBarData }) {
-			if(!transcriptionData || editorBarData)return;
 			this.transcriptionData.content = transcriptionData;
 			try {
 				let _result = JSON.parse(editorBarData);

src/components/pages/classroomObservation/components/messageArea.vue

@@ -12,18 +12,20 @@
 				>
 				</el-switch>
 			</div>
-			<!-- <div class="m-o-btn" @click.stop="useAnalysisTemplate()">使用分析模板</div> -->
-			<!-- <div class="m-o-btn" @click.stop="saveAsTemplate()">另存为模板</div> -->
+			<div class="m-o-btn" @click.stop="useAnalysisTemplate()">使用分析模板</div>
+			<div class="m-o-btn" @click.stop="saveAsTemplate()">另存为模板</div>
 			<div class="m-o-btn" :disabled="bmData.jsonData?false:true" @click="openBindForm(bmData)">绑定表单</div>
 		</div>
 		<div class="ma-main">
 			<baseMessage
 				:data="bmData.jsonData"
 				:imageList="imageList.jsonData"
+				:dataList="dataList"
 				:tid="tid"
 				@saveData="saveBaseData"
 				@saveImage="saveBaseImage"
 				@saveVideo="saveBaseVideo"
+				@saveNephogram="saveBaseNephogram"
 				@delImage="delBaseImageList"
 				v-loading="baseMessageLoading"
 			/>
@@ -217,6 +219,8 @@
 		<bindingFormDialog ref="bindingFormDialogRef" :tid="tid" @success="bindingForm"/>
 		<!-- 保存模板 -->
 		<saveTemplateDialog ref="saveTemplateDialogRef" :dataList="dataList"/>
+		<!-- 分析模板 -->
+		 <analysisTemplateDialog ref="analysisTemplateDialogRef" :dataList="dialogTagDataList"/>
 	</div>
 </template>
 
@@ -227,7 +231,9 @@ import baseMessage from "./baseMessage.vue"; //基本信息
 // import extendAnalysis from "./extendAnalysis.vue"; //扩展分析
 import analysis from "./analysis.vue";
 import bindingFormDialog from './bindingFormDialog.vue'
-import saveTemplateDialog from './saveTemplateDialog'
+import saveTemplateDialog from './saveTemplateDialog.vue'
+// 分析模板
+import analysisTemplateDialog from './analysisTemplateDialog.vue'
 
 export default {
 	emits:["changeChatAreaAudioUrl","changeTranscription","changeOptionData","updateTime"],
@@ -239,7 +245,7 @@ export default {
 		analysis,
 		bindingFormDialog,
 		saveTemplateDialog,
-
+		analysisTemplateDialog
 
 	},
 	props: {
@@ -267,7 +273,7 @@ export default {
 			input2: "",
 			userId:this.$route.query['userid'],
 			dialogTagList: [
-				{ id: 0, name: "通用课堂分析" },
+				{ id: 0, name: "通用课堂分析", },
 				{ id: 1, name: "学科课堂分析" },
 				{ id: 2, name: "扩展分析" },
 				//{ id: 3, name: "增值性分析" },
@@ -568,11 +574,13 @@ export default {
 		},
 		// 使用分析模板
 		useAnalysisTemplate() {
+			return;
 			if(!this.tid)return this.$message.error("请先选择课堂")
-			this.$message.info("使用分析模板");
+			this.$refs.analysisTemplateDialogRef.open();
 		},
 		//另存为模板
 		saveAsTemplate() {
+			return;
 			if(!this.tid)return this.$message.error("请先选择课堂")
 			this.$refs.saveTemplateDialogRef.open();
 			// this.$message.info("另存为模板");
@@ -909,6 +917,16 @@ export default {
 			this.imageList.json_data = JSON.stringify(this.imageList.jsonData);
 			this.saveData(this.imageList);
 		},
+		saveBaseNephogram(newValue){
+			if((this.imageList.jsonData.NephogramList && this.imageList.jsonData.NephogramList.length==0) || !this.imageList.jsonData.NephogramList){
+				this.imageList.jsonData.NephogramList = [];
+				this.imageList.jsonData.NephogramList.push(newValue)
+			}else{
+				return;
+			}
+			this.imageList.json_data = JSON.stringify(this.imageList.jsonData);
+			this.saveData(this.imageList);
+		},
 		delBaseImageList(key){
 			this.imageList.jsonData[key] = [];
 			this.$forceUpdate();

src/components/pages/classroomObservation/components/saveTemplateDialog.vue

@@ -11,24 +11,6 @@
 				<div class="a-d-topTit">
 					<div>另存为模板</div>
 				</div>
-				<!-- <div class="a_d_t_input">
-					<el-input
-						placeholder="请输入标题"
-						prefix-icon="el-icon-search"
-						v-model="text"
-						@submit.native.prevent="search()"
-						clearable
-					>
-					</el-input>
-					<el-button
-						size="mini"
-						:disabled="loading"
-						style="margin-left: 10px"
-						@click="search()"
-						type="primary"
-						>搜索</el-button
-					>
-				</div> -->
 				<div class="a-d-t-right">
 					<span @click.stop="close()">×</span>
 				</div>
@@ -59,7 +41,7 @@
 					</el-form-item>
 				</el-form>
 			</div>
-			<div class="bfd_bottom">
+			<div class="bfd_bottom" v-loading="loading">
 				<el-button @click="close()">取消</el-button>
 				<el-button type="primary" @click="submitBtn('ruleForm')">保存</el-button>
 			</div>
@@ -135,15 +117,41 @@ export default {
 		submitBtn(ref) {
 			this.$refs[ref].validate((valid) => {
           if (valid) {
-						let params = {
+						this.loading = true;
+						let _data = JSON.parse(JSON.stringify(this.dataList));
+						let _result = [];
+						
+						_data.forEach(i=>{
+							i.jsonData.content = "";
+							i.jsonData.dataFileList = [];
+							i.jsonData.fileList = [];
+							i.createtime = "";
+							i.id = "",
+							i.tId = "",
+							i.userid = "";
+							_result.push(i)
+						})
+						let params = [{
 							title:this.form.name,
 							subject:this.form.subject,
 							uid:this.userId,
 							brief:this.form.brief,
-							per:this.form.permissions?0:1,
-							jsonData:JSON.stringify(this.dataList),
-						}
-						return console.log(params)
+							per:this.form.permissions?1:0,
+							jsonData:JSON.stringify(_result),
+						}]
+						// this.loading = false;
+						// return console.log(params);
+						this.ajax.post(this.$store.state.api+"insertClassroomTemplate",params).then(res=>{
+							console.log(res)
+							this.$message.success("另存模板成功");
+							this.loading = false;
+							this.close();
+						}).catch(e=>{
+							console.log(e);
+							this.$message.error("另存失败");
+							this.loading = false;
+						})
+						// return console.log(params)
           }
         });
 		},

src/components/pages/classroomObservation/components/wordcloudEChart.vue

@@ -0,0 +1,48 @@
+<template>
+	<div class="chart" id="charts_canvas" ref="chartRef"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import "echarts-wordcloud";
+export default {
+	props: {
+		data: {
+			type: Object,
+			default: () => {},
+		},
+	},
+	data() {
+		return {
+			chartObj: null,
+			chartData: null,
+		};
+	},
+	watch: {
+		data() {
+			this.getChartData();
+		},
+	},
+	methods: {
+		getChartData() {
+			this.chartObj = echarts.init(this.$refs.chartRef);
+			this.chartObj.setOption(this.data);
+			window.addEventListener("resize", () => {
+					this.chartObj.resize();
+      });
+		},
+	},
+	mounted() {
+		this.getChartData();
+	},
+};
+</script>
+
+<style scoped>
+.chart {
+	max-width: 100%;
+	width: 100%;
+	height: 100%;
+	background-color: #fff;
+}
+</style>

src/components/pages/contrastObservation/index.vue

@@ -1449,4 +1449,11 @@ ${_aiWorkText}
 	height: 20px;
 	position: relative;
 } */
+/* 手机 */
+@media screen and (max-width:600px){
+	.refresh{
+		display: none;
+	}
+}
+
 </style>