pbl-teacher-table/src/components/pages/classroomObservation/components/analysisItem.vue

<template>
	<div class="analysisItem">
		<div class="ai-header" v-show="data.jsonData.name != '词频词汇分析'">
			<div class="ai-h-left" @click="changeOpenItem(!openItem)">
				<span
					:class="['ai-h-l-icon', openItem ? 'ai-h-l-iconActive' : '']"
				></span>
				<span class="ai-h-l-text" v-if="!editTitle">{{ data.jsonData.anotherName?data.jsonData.anotherName:data.jsonData.name }}</span>
				<div class="a_h_l_t_input" v-if="editTitle" @click.stop="() => {}">
          <el-form ref="form" :model="form" :rules="rules" label-position="top" @submit.native.prevent>
            <el-form-item prop="name">
              <el-input
                v-model="form.name"
               	@blur="editNameCheckFn()"
								 @keyup.enter.native="editNameCheckFn()"
                ref="editNameInputRef"
                placeholder="请输入新的名称"
              ></el-input>
            </el-form-item>
						<!--   @blur="editNameCheckFn()" -->
          </el-form>
        </div>
				<el-tooltip v-if="!editTitle" class="item" effect="light" content="修改名称" placement="top">
    		  <span class="a_h_l_edit" @click.stop="editTitleFn()">
						<img src="../../../../assets/icon/classroomObservation/editIcon2.svg">
					</span>
    		</el-tooltip>
			</div>
			<div class="ai-h-right">
				<span style="width: 100px;" class="generateError" v-if="loadNum == 2"
					>优化失败
				</span>
				<span
					style="width: 100px"
					v-if="loadNum == 1"
					>
					<span v-if="loading" class="generate">
						<img :src="require('../../../../assets/icon/classroomObservation/generate.svg')">
						生成中...
					</span>
					<span v-else class="generateSuccess">           
						<img :src="require('../../../../assets/icon/classroomObservation/success.svg')">
						生成完成
					</span>
				</span>
				<span
					v-if="loadNum == 0 && !openItem && tid"
					class="ai-h-r-icon4"
					@click="delBtn()"
				>
					<el-tooltip
						class="item"
						effect="light"
						content="删除"
						placement="top"
					>
						<img
							:src="
								require('../../../../assets/icon/classroomObservation/del.svg')
							"
						/>
					</el-tooltip>
				</span>

				<span
					v-if="loadNum == 0 && openItem"
					:class="['ai-h-r-icon1', showIndex <= 0 ? 'ai_h_r_iconOpacity' : '']"
					@click="changeShowIndex(-1)"
				>
					<el-tooltip
						class="item"
						effect="light"
						content="上一个"
						placement="top"
					>
						<img
							:src="
								require('../../../../assets/icon/classroomObservation/back.svg')
							"
						/>
					</el-tooltip>
				</span>

				<span
					v-if="loadNum != 1 && openItem"
					:class="[
						showIndex >= historyResult.length - 1 ? 'ai_h_r_iconOpacity' : '',
					]"
					@click="changeShowIndex(1)"
				>
					<el-tooltip
						class="item"
						effect="light"
						content="下一个"
						placement="top"
					>
						<img
							:src="
								require('../../../../assets/icon/classroomObservation/back.svg')
							"
						/>
					</el-tooltip>
				</span>

				<span v-if="loadNum != 1 && openItem && tid" @click="editBtn()">
					<el-tooltip
						class="item"
						effect="light"
						content="优化"
						placement="top"
					>
						<img
							:src="
								require('../../../../assets/icon/classroomObservation/edit.svg')
							"
						/>
					</el-tooltip>
				</span>

				<span v-if="loadNum != 1 && openItem && tid && ['1', '2', '3'].includes(data.jsonData.echartsType)" @click="editEcharts()">
					<el-tooltip
						class="item"
						effect="light"
						content="生成图表"
						placement="top"
					>
						<img
							:src="
								require('../../../../assets/icon/classroomObservation/echartIcon.svg')
							"
						/>
					</el-tooltip>
				</span>

				<!-- <span class="ai-h-r-icon4" @click.stop="delBtn()"></span> -->
			</div>
		</div>
		<div class="ai-main" v-if="openItem">
			<div class="a-m-brief" v-if="showBrief">
				{{ data.jsonData.result }}
				<!-- <mdView :text="data.jsonData.result" /> -->
				<!-- {{ data.jsonData.result }} -->
			</div>

			<eChartTemplate style="width: 100%;height: 400px;" :data="data.jsonData.eChartData" v-if="data.jsonData.eChartData"/>
			<mdView :text="data.jsonData.content"/>
			<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>
		<!-- <editNameDialog ref="editNameDialogRef" @success="changeNameSuccess"/> -->
	</div>
</template>

<script>
import mdView from "./mdView.vue";
import pieChart from "./pieChart.vue";
import { v4 as uuidv4 } from "uuid";
import eChartTemplate from "./eChartTemplate";
// import editNameDialog from './editNameDialog.vue'
export default {
	emits: ["delItem", "editItem", "saveItem"],
	components: {
		mdView,
		pieChart,
		eChartTemplate
		// editNameDialog
	},
	props: {
		data: {
			type: Object,
			default: () => {
				return {};
			},
		},
		dialogTagDataList: {
			type: Array,
			default: () => {
				return [];
			},
		},
		index: {
			type: Number,
			default: 0,
		},
		tid: {
			type: String,
			require: true,
		},
		fileId: {
			type: String,
			require: true,
		},
		showBrief:{
			type:Boolean,
			default:true,
		},
		bmData: {
			type: Object,
			default: () => {
				return {};
			},
		},
	},
	data() {
		return {
			openItem: false,
			loading: false,
			loadNum: 0,
			userId:this.$route.query['userid'],
			showIndex: 0,
			historyResult: [],
			imgTypeList: [
				"png",
				"jpg",
				"jpeg",
				"bmp",
				"gif",
				"webp",
				"psd",
				"svg",
				"tiff",
			],
			oldData: {},
			form: {
        name: ""
      },
      editTitle: false,
      rules: {
        name: [
          { required: true, trigger: "change", message: "请输入新的名称" },
          {
            min: 1,
            max: 20,
            trigger: "change",
            message: "长度需在1-20个字符之间"
          }
        ]
      }
		};
	},
	computed: {
		checkFileType() {
			return (url) => {
				return url.split(".").pop();
			};
		},
	},
	watch: {
		// showIndex(){
		// 	let _copyData = JSON.parse(JSON.stringify(this.data));
		// 	_copyData.jsonData = this.historyResult[this.showIndex];
		// 	_copyData.json_data = JSON.stringify(_copyData.jsonData);
		// 	this.$emit("editItem", this.data.id, _copyData);
		// }
	},
	methods: {
		changeOpenItem(newValue) {
			if (this.loading == true && this.loadNum != 0)
				return this.$message("请稍后...");
			this.loadNum = 0;
			this.openItem = newValue;
		},
		editBtn() {
			this.$nextTick(() => {
				this.loading = true;
				this.openItem = false;
				this.loadNum = 1;
				let type = 0;//0 用agentId  1:用提示词 3:啥都没有
				let assistant = this.dialogTagDataList.find(
					(i) => i.id == this.data.jsonData.mId
				) || this.dialogTagDataList.find(
					(i) => i.name == this.data.jsonData.name
				);

				let _msg = `使用文件检索的方式完整的去分析文件内容，并请完全按照要求输出。`

				if(!assistant){
					this.loading = false;
					this.loadNum = 2;
					type = 3;
					return this.$message.error("未找到对应的AI助手");
				}

				if (assistant.tips) {
					type = 1
				}else if(assistant.agentid){
					type = 0
				}else{
					this.loading = false;
					this.loadNum = 2;
					type = 3;
					return this.$message.error("未找到对应的AI助手");
				}

				if(assistant.agentid=='6b4a9650-48be-11ef-936b-12e77c4cb76b'){
					_msg  = `使用文件检索的方式完整的去分析文件内容，并基于以下的课堂基本内容，使用cpote课程设计模型改编一堂同主题的课程。
课堂名称：${this.bmData.courseName}  搜课年级：${this.bmData.grade}  授课科目：${this.bmData.subject}`
					
				}

				// console.log('👇')
				// return console.log(_msg)
				let parm = {
					assistant_id: type==0?assistant.agentid:"f8e1ebb2-2e0d-11ef-8bf4-12e77c4cb76b",
					message:type==0?_msg:assistant.tips,
					session_name: uuidv4(),
					userId: this.userId,
					file_ids: this.fileId?[this.fileId]:'',
					model: "gpt-4o-2024-08-06",
				};

				// 👇
				// const _uid = uuidv4();
				// let parm = {
				// 	assistant_id: assistant ? assistant.value : null,
				// 	userId: this.userId, //602def61-005d-11ee-91d8-005056b86db5
				// 	message:
				// 		"请使用代码解析器获取文件，帮我根据要求完整的分析，输出请按照要求。",
				// 	session_name: new Date().getTime(),
				// 	uid: _uid,
				// 	file_ids: this.fileId ? [this.fileId] : [],
				// };
				if (!parm.assistant_id) {
					this.loading = false;
					this.loadNum = 2;
					return this.$message.error("未找到对应的AI助手");
				}
				// this.ajax
				// 	.post("https://gpt4.cocorobo.cn/ai_agent_park_chat_new", parm)
				// 	.then((res) => {
				// 		if (res.data.FunctionResponse.result == "发送成功") {
				// 		} else {
				// 			this.$message.warning(res.data.FunctionResponse.result);
				// 		}
				// 	})
				// 	.catch((err) => {
				// 		console.log(err);
				// 	});
				// this.getAtAuContent(_uid);
				// 👆

				this.ajax
					.post("https://gpt4.cocorobo.cn/ai_agent_park_chat", parm)
					.then((res) => {
						let _data = res.data.FunctionResponse;
						// if (
						// 	!_data.message ||
						// 	_data.message.indexOf("由于我无法直接访问您上传的文件内容") > -1
						// ) {
						// 	this.loading = false;
						// 	this.loadNum = 2;
						// 	// this.$message.error("AI无法识别优化");
						// 	return 
						// }
						let _copyData = JSON.parse(JSON.stringify(this.data));
						// _copyData.jsonData.result = "";
						_copyData.jsonData.content = _data.message;
						_copyData.jsonData.dataFileList = [];
						_copyData.jsonData.fileList = [];
						_copyData.json_data = JSON.stringify(_copyData.jsonData);
						if (this.historyResult.length == 0) {
							this.historyResult.push(_copyData.jsonData);
						} else {
							this.historyResult.splice(
								this.showIndex + 1,
								0,
								_copyData.jsonData
							);
						}
						this.changeShowIndex(1);
						this.loading = false;
					})
					.catch((err) => {
						this.loadNum = 2;
						// this.$message.error("AI无法识别优化");
						this.loading = false;
					});
			});
		},
		getAtAuContent(_uid, _text, _headUrl, _assistantName) {
			let _source = new EventSource(
				`https://gpt4.cocorobo.cn/question/${_uid}`
			); //http://gpt4.cocorobo.cn:8011/question/   https://gpt4.cocorobo.cn/question/
			let _allText = "";
			let _mdText = "";
			let _copyData = JSON.parse(JSON.stringify(this.data));
			// _copyData.jsonData.result = "";
			_copyData.jsonData.content = "";
			_copyData.jsonData.dataFileList = [];
			_copyData.jsonData.fileList = [];
			if (this.historyResult.length == 0) {
				this.historyResult.push(_copyData.jsonData);
			} else {
				this.historyResult.splice(this.showIndex + 1, 0, _copyData.jsonData);
			}
			this.showIndex++;
			this.$emit("editItem", this.data.id, _copyData);
			// const md = new MarkdownIt();
			_source.onmessage = (_e) => {
				let _eData = JSON.parse(_e.data);
				if (_eData.content.replace("'", "").replace("'", "") == "[DONE]") {
					let _result = [];
					if ("result" in _eData) {
						_result = _eData.result;
						for (let i = 0; i < _result.length; i++) {
							_mdText = _mdText.replace(_result[i].text, _result[i].fileName);
						}
					}
					_mdText = _mdText.replace("_", "");
					_copyData.jsonData.content = _mdText;
					this.loading = false;
					this.loadNum = 0;
					this.$emit("editItem", this.data.id, _copyData);
					this.$emit("saveItem", this.data.id, _copyData);
					_source.close();
				} else {
					let _text = _eData.content.replace("'", "").replace("'", "");
					if (_allText == "") {
						_allText = _text.replace(/^\n+/, ""); //去掉回复消息中偶尔开头就存在的连续换行符
					} else {
						_allText += _text;
					}
					_mdText = _allText + "_";
					_mdText = _mdText.replace(/\\n/g, "\n");
					_mdText = _mdText.replace(/\\/g, "");
					if (_allText.split("```").length % 2 == 0) _mdText += "\n```\n";
					//转化返回的回复流数据
					// _mdText = md.render(_mdText);
					_copyData.jsonData.content = _mdText;
					this.$emit("editItem", this.data.id, _copyData);
					// 处理流数据
				}
			};
		},
		delBtn() {
			this.$confirm("确定删除？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "error",
			}).then(() => {
				this.$emit("delItem", this.data.id);
			}).catch(_=>{
				console.log("取消")
			});
		},
		changeShowIndex(value) {
			if (this.historyResult.length == 0) return;
			if (value == -1) {
				if (this.showIndex > 0) this.showIndex--;
			} else if (value == 1) {
				if (this.showIndex < this.historyResult.length - 1) this.showIndex++;
			}
			let _copyData = JSON.parse(JSON.stringify(this.data));
			let _oldCopyDate = JSON.parse(JSON.stringify(this.data));
			_copyData.jsonData = this.historyResult[this.showIndex];
			_copyData.json_data = JSON.stringify(_copyData.jsonData);
			_oldCopyDate.json_data = JSON.stringify(_oldCopyDate.jsonData);
			// 一样就不用更新了
			if (JSON.stringify(_copyData) == JSON.stringify(_oldCopyDate)) return;
			// this.data = _copyData;
			this.$emit("editItem", this.data.id, _copyData);
			this.$emit("saveItem", this.data.id, _copyData);
		},
		// editTitle(){
		// 	this.$refs.editNameDialogRef.open(this.data.jsonData.anotherName?this.data.jsonData.anotherName:this.data.jsonData.name)
		// },
		changeNameSuccess(newName){
			let _copyData = JSON.parse(JSON.stringify(this.data));
			_copyData.jsonData.anotherName = newName;
			_copyData.json_data = JSON.stringify(_copyData.jsonData);
			this.$emit("editItem", this.data.id, _copyData);
			this.$emit("saveItem", this.data.id, _copyData);
			// this.$refs.editNameDialogRef.close();
		},
		editTitleFn() {
      if (!this.tid) return this.$message.info("请新建课堂，或选择历史课堂");
      this.form.name = this.data.jsonData.anotherName?this.data.jsonData.anotherName:this.data.jsonData.name;
      this.editTitle = true;
      this.$nextTick(() => {
        this.$refs.editNameInputRef.focus();
      });
      // this.$refs.editNameDialogRef.open(this.title)
    },
    editNameCheckFn() {
			if(!this.editTitle)return;
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.editTitle = false;
          this.changeNameSuccess(this.form.name);
        } else {
          this.$nextTick(() => {
            this.$refs.editNameInputRef.focus();
						this.$message.error("该名称不符合规则")
          });
        }
      });
    },
		editEcharts(){
			console.log("生成图标")
			if(this.data.jsonData.echartsType == "1"){
				this.$message.info("词云图")
			}else if(this.data.jsonData.echartsType == "2"){
				this.$message.info("雷达图")
			}else if(this.data.jsonData.echartsType == "3"){
				this.$message.info("柱状图")
			}else{
				return this.$message.error("该模板不是图表模板")
			}
		}
	},
	mounted() {
		if (this.data.jsonData.content) {
			this.historyResult.push(this.data.jsonData);
		}
	},
};
</script>

<style scoped>
.analysisItem {
	width: 100%;
	height: auto;

	/* margin: 11.7px 0px; */

	padding-right: 10px;
	box-sizing: border-box;
	margin-bottom:10px ;
	border: 1px solid #E7E7E7;
	border-radius: 4px;
	transition: .3s;
}

.analysisItem:hover{
	border: 1px solid #3681FC;
}
.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;
	/* opacity: 1; */
}

.ai-h-r-icon4 {
	background: url("../../../../assets/icon/classroomObservation/del2.svg");
	/* position: absolute; */
	/* right: -40px; */
	display: none;
	/* opacity: 0; */
	/* transition: .3s; */
}

.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;
}

.a_h_l_edit{
	width: 16px;
	height: 16px;
	margin-left: 10px;
	display: none;
	align-items: center;
	justify-content: center;
}

.a_h_l_edit>img{
	width: 100%;
	height: 100%;
}

.ai-h-left:hover .a_h_l_edit{
	display: flex;
}

.a_h_l_t_input {
	width: 25%;
	min-width: 220px;
  height: 100%;
  display: flex;
  align-items: center;
}

.a_h_l_t_input>>>.el-form{
	width: 100%;
	min-width: 220px;
}

.a_h_l_t_input>>>.el-form-item{
	margin-bottom: 0;
}
</style>