饼状图和图片和md

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

@@ -18,7 +18,7 @@
 				<!-- <span class="ai-h-r-icon4" @click.stop="delBtn()"></span> -->
 			</div>
 		</div>
-		<div class="ai-main" v-if="openItem">
+		<div class="ai-main" v-show="openItem">
 			<!-- <div class="a-m-title">
 				<span></span>
 				<div>{{ data.title }}分析</div>
@@ -27,112 +27,42 @@
 			<div class="a-m-brief">
 				{{ data.jsonData.result }}
 			</div>
-			<!-- <p style="margin: 10px 0">
-				该课程设计紧密遵循了{{
-					data.title
-				}}理论，特别是在引起注意、提供学习指导、促进表现、提供反馈和增强保持和迁移方面做得较为突出。课程通过引人入胜的新闻引入、分组讨论、实地调查和数据计算等多种方式，有效地吸引了学生的注意力，激发了学生的学习兴趣，促进了学生的主动学习和深入思考。
-			</p>
-			<table border="1" style="text-align: center; border-spacing: 0">
-				<thead>
-					<tr>
-						<th>序号</th>
-						<th>事件类型</th>
-						<th>事件含义</th>
-						<th>次数</th>
-						<th>课堂实例</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr>
-						<td>1</td>
-						<td>引起注意</td>
-						<td>通过提出问题和展示视频吸引学生注意力</td>
-						<td>2</td>
-						<td>
-							' '前几天白老师关注到一则新闻''、''我们来看看他们发现了什么''
-						</td>
-					</tr>
-					<tr>
-						<td>2</td>
-						<td>告知目标</td>
-						<td>明确告知学习目标，即解决垃圾问题的重要性</td>
-						<td>1</td>
-						<td>' '要将2024年作为旅游高质量发展年''</td>
-					</tr>
-					<tr>
-						<td>3</td>
-						<td>刺激回忆先前学习</td>
-						<td>通过回顾之前的知识或经验</td>
-						<td>1</td>
-						<td>' '上周咱们班的两位环境调查员就去到葵冲进行了实地调查''</td>
-					</tr>
-					<tr>
-						<td>4</td>
-						<td>呈现教学内容</td>
-						<td>直接呈现新的学习材料</td>
-						<td>3</td>
-						<td>
-							'
-							'我们是人大附中深圳学校五1班的张龙溪''、''准备实地调查一下葵冲的环境情况''、''我们调查到的情况有什么样这样的''
-						</td>
-					</tr>
-					<tr>
-						<td>5</td>
-						<td>提供学习指导</td>
-						<td>给学生提供学习策略、提示、例子或解释</td>
-						<td>2</td>
-						<td>' '保护大棚环境人人有责''、''我校小学部一共有1556人''</td>
-					</tr>
-					<tr>
-						<td>6</td>
-						<td>促进表现</td>
-						<td>鼓励学生实践或表达他们所学的知识或技能</td>
-						<td>3</td>
-						<td>
-							'
-							'大家同意他的想法吗''、''现在请小组长从材料框当中拿出实验记录单''、''好可以开始计算''
-						</td>
-					</tr>
-					<tr>
-						<td>7</td>
-						<td>提供反馈</td>
-						<td>对学生的表现给予及时和具体的反馈</td>
-						<td>2</td>
-						<td>' '你观察得很认真''、''你说的是一个非常实用的方法''</td>
-					</tr>
-					<tr>
-						<td>8</td>
-						<td>评估表现</td>
-						<td>通过测试或其他形式的评估来确定学习成果</td>
-						<td>1</td>
-						<td>' '好这是第四小组的数据我们来看跟大家的一样吗''</td>
-					</tr>
-					<tr>
-						<td>9</td>
-						<td>增强保持和迁移</td>
-						<td>帮助学生记住所学内容，并将知识应用到新情境</td>
-						<td>2</td>
-						<td>
-							'
-							'整个深圳市一天产生的垃圾高达3800头非洲大象这么重''、''如果我们一直都以填埋的方式去处理垃圾的话，可能全球的土地都用于填埋垃圾了''
-						</td>
-					</tr>
-				</tbody>
-			</table>
-			<p style="margin-top: 10px">
-				建议未来的课程设计可以进一步强化对学习目标的明确告知和评估表现的环节，以确保学生对学习成果有清晰的认识，同时通过更多样化的评估方式来检验学习效果。
-			</p> -->
-			<!-- <img src="https://s3-alpha-sig.figma.com/img/719a/101b/0eb2f1ec890d08098f77e24a3b439a5f?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=k~x0ZFu7OCJ7260cD8vH-PKLIg9hKpdCRUphSqBc5xJC2nxO5vcOZulwOsINPimQVlLpmxUtXGv-k8BYl8Qz0dMOD-HS3sfdZmLviC1PhvQ-vJvXg9IC4crPanqi31dfoWN6lEACN8MWJZVIc3bp013dQ2MjK2jQD7LROaoaceuuThlVvjggQR1mbAtK03KwgAqCxjVz9hT730xon-Dsvym4EX4iEl7L9pdXVTiFN0rNnpD6WqcjSHnI12h3MF42STF8BrzjDFjXHpB-cx-xIbI-SGFM5DlnJGUC2GX~cOrz~wk5hTmx~uJm9jnnj2~SXKY6WbvB6QrxddzXX06Puw__" style="max-width:100%"> -->
-			<!-- <div class="a-m-content">该课程设计紧密遵循了{{data.title}}理论，特别是在引起注意、提供学习指导、促进表现、提供反馈和增强保持和迁移方面做得较为突出。课程通过引人入胜的新闻引入、分组讨论、实地调查和数据计算等多种方式，有效地吸引了学生的注意力，激发了学生的学习兴趣，促进了学生的主动学习和深入思考。</div> -->
+			<div v-for="(item,index) in data.jsonData.dataFileList" :key="index">
+				<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="ai-m-html" v-html="data.content" v-for="i in 4" :key="i"></div> -->
+			<div v-for="(item,index) in data.jsonData.fileList" :key="index">
+				<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"],
+	components:{
+		mdView,
+		pieChart
+	},
 	props: {
 		data: {
 			type: Object,
@@ -148,8 +78,26 @@ export default {
 	data() {
 		return {
 			openItem: 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;

src/components/pages/classroomObservation/components/mdView.vue

@@ -1,30 +1,89 @@
 <template>
 	<div class="mdView">
-	  <div v-html="renderedMarkdown"></div>
+		<div v-html="renderedMarkdown"></div>
 	</div>
-  </template>
-  
-  <script>
-  import MarkdownIt from 'markdown-it';
-  
-  export default {
+</template>
+
+<script>
+import MarkdownIt from "markdown-it";
+import '../../../../common/aws-sdk-2.235.1.min.js'
+
+const getFile = (url) => {
+	return new Promise((resolve, reject) => {
+		var credentials = {
+			accessKeyId: "AKIATLPEDU37QV5CHLMH",
+			secretAccessKey: "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",
+		}; //秘钥形式的登录上传
+		window.AWS.config.update(credentials);
+		window.AWS.config.region = "cn-northwest-1"; //设置区域
+		let url2 = url;
+		let _url2 = "";
+		if (
+			url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
+		) {
+			_url2 = url2.split(
+				"https://view.officeapps.live.com/op/view.aspx?src="
+			)[1];
+		} else {
+			_url2 = url2;
+		}
+		var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
+		let name = decodeURIComponent(
+			_url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1]
+		);
+		var params = {
+			Bucket: "ccrb",
+			Key: name,
+		};
+		s3.getObject(params, function (err, data) {
+			if (err) {
+				console.log(err, err.stack);
+				resolve({ data: 1 });
+			} else {
+				const fileContent = data.Body.toString('utf-8');
+				resolve({ data: fileContent });
+				console.log(fileContent);
+			} // sxuccessful response
+		});
+		// axios({
+	});
+};
+export default {
+	props: {
+		url: {
+			type: String,
+			default: "",
+		},
+	},
 	data() {
-	  return {
-		markdownContent: '# Hello, Markdown!',
-		md: new MarkdownIt()
-	  };
+		return {
+			markdownContent: "# Hello, Markdown!",
+			md: new MarkdownIt(),
+		};
 	},
 	computed: {
-	  renderedMarkdown() {
-		return this.md.render(this.markdownContent);
-	  }
+		renderedMarkdown() {
+			return this.md.render(this.markdownContent);
+		},
+	},
+	methods: {
+		getMarkdown() {
+			if(!this.url)return;
+			console.log('👇👇👇')
+			console.log(this.url)
+			getFile(this.url).then(res=>{
+				this.markdownContent = res.data;
+			})
+		},
+	},
+	mounted(){
+		this.getMarkdown();
 	}
-  };
-  </script>
-  <style scoped>
-  .mdView{
-	  width: 100%;
-	  height: 100%;
-  }
-  </style>
-  
+};
+</script>
+<style scoped>
+.mdView {
+	max-width: 100%;
+	height: 100%;
+}
+</style>

src/components/pages/classroomObservation/components/pieChart.vue

@@ -1,18 +1,78 @@
 <template>
-	<div class='chart'>
-		<h1>饼状图</h1>
+	<div class="chart">
+		<div>{{chartData}}</div>
 	</div>
 </template>
 
 <script>
-	export default {
-		
-	}
+const getFile = (url) => {
+	return new Promise((resolve, reject) => {
+		var credentials = {
+			accessKeyId: "AKIATLPEDU37QV5CHLMH",
+			secretAccessKey: "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",
+		}; //秘钥形式的登录上传
+		window.AWS.config.update(credentials);
+		window.AWS.config.region = "cn-northwest-1"; //设置区域
+		let url2 = url;
+		let _url2 = "";
+		if (
+			url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
+		) {
+			_url2 = url2.split(
+				"https://view.officeapps.live.com/op/view.aspx?src="
+			)[1];
+		} else {
+			_url2 = url2;
+		}
+		var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
+		let name = decodeURIComponent(
+			_url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1]
+		);
+		var params = {
+			Bucket: "ccrb",
+			Key: name,
+		};
+		s3.getObject(params, function (err, data) {
+			if (err) {
+				console.log(err, err.stack);
+				resolve({ data: 1 });
+			} else {
+				const fileContent = data.Body.toString("utf-8");
+				resolve({ data: fileContent });
+			} // sxuccessful response
+		});
+		// axios({
+	});
+};
+export default {
+	props: {
+		url: {
+			type: String,
+			default: "",
+		},
+	},
+	data() {
+		return {
+			chartData:{},
+		};
+	},
+	methods: {
+		getChartData() {
+			if (!this.url) return;
+			getFile(this.url).then(res=>{
+				this.chartData = res.data;
+			})
+		},
+	},
+	mounted() {
+		this.getChartData();
+	},
+};
 </script>
 
 <style scoped>
-.chart{
-	width: 100%;
+.chart {
+	max-width: 100%;
 	height: 100%;
 }
-</style>
+</style>