图标提示

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

@@ -1,367 +1,431 @@
 <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">
-				<span style="width: 100px; color: red" v-if="loadNum == 2"
-					>优化失败
-				</span>
-				<span
-					:class="loading ? 'text1' : 'text2'"
-					style="width: 100px"
-					v-if="loadNum == 1"
-					>{{ loading ? "优化中..." : "优化完成" }}
-				</span>
-				<span
+  <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">
+        <span style="width: 100px; color: red" v-if="loadNum == 2"
+          >优化失败
+        </span>
+        <span
+          :class="loading ? 'text1' : 'text2'"
+          style="width: 100px"
+          v-if="loadNum == 1"
+          >{{ loading ? "优化中..." : "优化完成" }}
+        </span>
+        <span
 					v-if="loadNum == 0 && !openItem"
 					class="ai-h-r-icon4"
 					@click.stop="delBtn()"
-				></span>
+				>
+					<el-tooltip
+						class="item"
+						effect="light"
+						content="删除"
+						placement="top"
+					>
+						<img
+							:src="
+								require('../../../../assets/icon/classroomObservation/del.png')
+							"
+						/>
+					</el-tooltip>
+				</span>
+
 				<span
 					v-if="loadNum == 0 && openItem"
-					:class="['ai-h-r-icon1',showIndex<=0?'ai_h_r_iconOpacity':'']"
+					:class="['ai-h-r-icon1', showIndex <= 0 ? 'ai_h_r_iconOpacity' : '']"
 					@click.stop="changeShowIndex(-1)"
-				></span>
+				>
+					<el-tooltip
+						class="item"
+						effect="light"
+						content="上一个"
+						placement="top"
+					>
+						<img
+							:src="
+								require('../../../../assets/icon/classroomObservation/back.png')
+							"
+						/>
+					</el-tooltip>
+				</span>
+
 				<span
 					v-if="loadNum != 1 && openItem"
-					:class="['ai-h-r-icon2',showIndex>=historyResult.length-1?'ai_h_r_iconOpacity':'']"
+					:class="[
+						showIndex >= historyResult.length - 1 ? 'ai_h_r_iconOpacity' : '',
+					]"
 					@click.stop="changeShowIndex(1)"
-				></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">
+				>
+					<el-tooltip
+						class="item"
+						effect="light"
+						content="下一个"
+						placement="top"
+					>
+						<img
+							:src="
+								require('../../../../assets/icon/classroomObservation/back.png')
+							"
+						/>
+					</el-tooltip>
+				</span>
+
+				<span v-if="loadNum != 1 && openItem" @click.stop="editBtn()">
+					<el-tooltip
+						class="item"
+						effect="light"
+						content="优化"
+						placement="top"
+					>
+						<img
+							:src="
+								require('../../../../assets/icon/classroomObservation/edit.png')
+							"
+						/>
+					</el-tooltip>
+				</span>
 
 
-			<div class="a-m-brief">
-				{{ data.jsonData.result }}
-				<!-- <mdView :text="data.jsonData.result" /> -->
-				<!-- {{ data.jsonData.result }} -->
-			</div>
-			<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>
+        <!-- <span class="ai-h-r-icon4" @click.stop="delBtn()"></span> -->
+      </div>
+    </div>
+    <div class="ai-main" v-if="openItem">
+      <div class="a-m-brief">
+        {{ data.jsonData.result }}
+        <!-- <mdView :text="data.jsonData.result" /> -->
+        <!-- {{ data.jsonData.result }} -->
+      </div>
+      <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>
-	</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";
 export default {
-	emits: ["delItem", "editItem"],
-	components: {
-		mdView,
-		pieChart,
-	},
-	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,
-		},
-	},
-	data() {
-		return {
-			openItem: false,
-			loading: false,
-			loadNum: 0,
-			showIndex:0,
-			historyResult:[],
-			imgTypeList: [
-				"png",
-				"jpg",
-				"jpeg",
-				"bmp",
-				"gif",
-				"webp",
-				"psd",
-				"svg",
-				"tiff",
-			],
-		};
-	},
-	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 assistant = this.dialogTagDataList.find(i=>i.title==this.data.jsonData.name);
-				let parm = {
-					assistant_id: assistant?assistant.value:null,
-					message:
-						"请使用代码解析器获取文件，帮我根据要求完整的分析，输出请按照要求。",
-					session_name: new Date().getTime(),
-					userId: "1cf9dc4b-d95f-11ea-af4c-52540005ab01",
-					file_ids: this.fileId?[this.fileId]:'',
-				};
+  emits: ["delItem", "editItem"],
+  components: {
+    mdView,
+    pieChart
+  },
+  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
+    }
+  },
+  data() {
+    return {
+      openItem: false,
+      loading: false,
+      loadNum: 0,
+      showIndex: 0,
+      historyResult: [],
+      imgTypeList: [
+        "png",
+        "jpg",
+        "jpeg",
+        "bmp",
+        "gif",
+        "webp",
+        "psd",
+        "svg",
+        "tiff"
+      ]
+    };
+  },
+  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 assistant = this.dialogTagDataList.find(
+          i => i.title == this.data.jsonData.name
+        );
+        let parm = {
+          assistant_id: assistant ? assistant.value : null,
+          message:
+            "请使用代码解析器获取文件，帮我根据要求完整的分析，输出请按照要求。",
+          session_name: new Date().getTime(),
+          userId: "1cf9dc4b-d95f-11ea-af4c-52540005ab01",
+          file_ids: this.fileId ? [this.fileId] : ""
+        };
 
-				if (!parm.assistant_id) {
-					this.loading = false;
-					this.loadNum = 2;
-					return this.$message.error("未找到对应的AI助手");
-				}
+        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", parm)
-					.then((res) => {
-						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 = "";
-						_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.$message.error("AI无法识别优化");
-						this.loading = false;
-					});
-			});
-		},
-		delBtn() {
-			this.$confirm("确定删除？", "提示", {
-				confirmButtonText: "确定",
-				cancelButtonText: "取消",
-				type: "error",
-			}).then(() => {
-				this.$emit("delItem", this.data.id);
-			});
-		},
-		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.$emit("editItem", this.data.id, _copyData);
-		}
-	},
-	mounted(){
-		if(this.data.jsonData.content){
-			this.historyResult.push(this.data.jsonData)
-		}
-	},
+        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;
+              return this.$message.error("AI无法识别优化");
+            }
+            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.$message.error("AI无法识别优化");
+            this.loading = false;
+          });
+      });
+    },
+    delBtn() {
+      this.$confirm("确定删除？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "error"
+      }).then(() => {
+        this.$emit("delItem", this.data.id);
+      });
+    },
+    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.$emit("editItem", this.data.id, _copyData);
+    }
+  },
+  mounted() {
+    if (this.data.jsonData.content) {
+      this.historyResult.push(this.data.jsonData);
+    }
+  }
 };
 </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);
+  color: rgba(54, 129, 252, 1);
 }
 .text2 {
-	color: rgba(23, 196, 105, 1);
+  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;
+}
+
+.ai-h-right > span > img {
 	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_iconOpacity{
-	opacity: 0.5;
-	cursor: not-allowed !important;
+.ai_h_r_iconOpacity {
+  opacity: 0.5;
+  cursor: not-allowed !important;
 }
 
 .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;
-	color: #6b798e;
+  font-size: 16px;
+  /* 斜体 */
+  font-style: italic;
+  margin-bottom: 10px;
+  color: #6b798e;
 }
 
 td,
 th {
-	padding: 10px;
+  padding: 10px;
 }
 </style>