yichael_zhongchuang_front_2/components/home/simulationCore.vue

<template>
	<view class="s_container">
		<image src="../../assets/home/homeBG.png" class="s_logo" mode=""></image>
		<view class="s_content_container">
			<view class="s_title" v-text="'虚拟仿真1号摄影棚'">

			</view>
			<view class="s_content">
				<view class="">
					影视现场实时特效是虚拟制片的一种影视创作流程与创作技术，处于虚 拟制片前、中、后期中的中期现场创作环节，与虚拟制片的前期艺术设 计、虚拟制作联系尤为密切。影视现场实时特效的核心
					是通过实时渲染、数据跟踪、CG制作等核心技术，在影视拍摄现场实现虚拟创作与现 实创作的实时同步与实时协作，并在现场呈现影像最终效果。除现场摄 制以外，影视现场实时特效还包括
					前期虚拟艺术(数字制景、数字道具、数字角色)的再创作和后期处理(合成、调色)的现场创作。
				</view>
			</view>
		</view>

		<view class="s_footer" style="text-align: center;padding: 80rpx;">
			<view class="s_title" v-text="'推荐项目'">

			</view>
			<view class="s_table_padding">
				<table style="width: 100%;border: 1px solid #DDDDDD;border-collapse: collapse">
					<thead class="m-table-hander">
						<tr>
							<th>项目</th>
							<th>名称</th>
							<th>类型</th>
							<th>介绍</th>
							<th>项目文件</th>
							<th>项目成员</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item,index) in projectData" :key="index">
							<th>{{item.Id}}</th>
							<th>{{item.ProjectName}}</th>
							<th>{{item.Type}}</th>
							<th>{{item.Intro}}</th>
							<th class="m_yl"><button type="default" size="mini" class="m_edit" @click="preview(item)">预览</button></th>
							<th style="position: relative;"><button type="default" @click="deleteMember(item)" size="mini" class="m_delete">删除</button></th>
						</tr>
					</tbody>
				</table>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "simulationCore", //虚拟影视开发中心
		data() {
			return {
				projectData: []
			}
		},
		
		methods: {
			init(){
				console.log('simulationCore init');
				// uni.chooseFile({
				//     success: (chooseImageRes) => {
				//         const tempFilePaths = chooseImageRes.tempFilePaths;
				//         uni.uploadFile({
				//             url: this.$Api + "/project/uploadprojectfile", //仅为示例，非真实的接口地址
				//             filePath: tempFilePaths[0],
				//             name: 'file',
				//             formData: {
				// 				'UserID':'1e9c969f-8990-40f2-8a8c-ecbafc5720b2',                // 创建用户 id
				// 				'Name':'11',           // 项目名称
				// 				'Type':'11',              // 项目描述
				// 				'ProjectID':'2',                 // 科幻 现实 历史 主旋律 纪录片
				//             },
				//             success: (uploadFileRes) => {
				//                 console.log('upload ok=',uploadFileRes.data);
				//             }
				//         });
				//     }
				// });
				this.getProjectsID();
			},
			getProjectsID() {
				// console.log('userID=',this.$UserId)
				uni.request({
					url: this.$Api + "/project/getprojects",
					data: {
						"UserID": this.$UserId
					},
					method: "POST",
					dataType: "json",
					success: res => {
						// console.log('res=',res)
						console.log('Projects=',res.data.Projects)
						let Projects = res.data.Projects;
						for(let i=0;i<Projects.length;i++)
						{
							let data = {};
							data.Id = Projects[i].Id;
							data.ProjectName = Projects[i].ProjectName;
							data.Type = Projects[i].Type;
							data.Intro = '';
							data.File = [];
							data.Member = [];
							this.projectData.push(data);
						}
						
						for(let i=0;i<this.projectData.length;i++)
						{
							this.getProjectsCtcontent(i);
						}
					}
				})
			},
			getProjectsCtcontent(index) {
				// console.log('UserID=',this.$UserId)
				// console.log('ProjectID=',this.projectData[index].Id)
			
				uni.request({
					url: this.$Api + "/project/getprojectcontent",
					data: {
						"UserID": this.$UserId,
						"ProjectID": this.projectData[index].Id
					},
					method: "POST",
					dataType: "json",
					success: res => {
						console.log('res=',res)
						if(res.data.ProjectItem.length!=0)
						{
							this.projectData[index].Intro = res.data.ProjectItem[0].Type;
							this.projectData[index].File = res.data.ProjectItem[0].URL;
						}
						
						this.getMember(index);
					}
				})
			},
			getMember(index) {
				uni.request({
					url: this.$Api + "/project/getmember",
					data: {
						"ProjectID": this.projectData[index].Id
					},
					method: "POST",
					dataType: "json",
					success: res => {
						// console.log('res=',res)
						// console.log('Projects=',res.data.Users[0].User.Id)
						for(let i=0;i<res.data.Users.length;i++)
						{
							console.log('Projects=',res.data.Users[i].User.Id)
							this.projectData[index].Member.push(res.data.Users[i].User.Id);
						}
					}
				})
			},
			preview(item){
				uni.downloadFile({
					url: item.File,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.openDocument({
								filePath: res.tempFilePath, 
								// 如果文件名包含中文，建议使用escape(res.tempFilePath)转码，防止ios和安卓客户端导致的差异
								success: function(res) {
									console.log('打开文档成功');
								}
							});
						}
					},
				});
			},
			deleteMember(item){
				uni.request({
					url: this.$Api + "/project/deletemember",
					data: {
						"userID" : this.$UserId,
						"DeleteUserID":item.Id
					},
					method: "POST",
					dataType: "json",
					success: res => {
						console.log('res=',res)
						// this.projectData.splice(index,index);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.s_container {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	.s_logo {
		width: 100%;
		height: 1000rpx;
	}


	.s_content_container {
		padding: 0 206rpx;

		.s_title {
			font-weight: bold;
			text-align: center;
			line-height: 200rpx;
			font-size: 45rpx;
		}

		.s_content {
			font-weight: 500;
			font-size: 40rpx;
			line-height: 70rpx;
		}
	}

	.m_btn_download {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 70rpx;
		background: #EA252C;
		color: #fff;
		font-family: MicrosoftYaHei;
	}

	tbody tr {
		border-top: 2rpx solid #DDDDDD !important;

	}

	tbody tr th:first-child {
		position: relative;
	}

	tbody tr th {
		font-weight: 400 !important;
		height: 140rpx;
		line-height: 140rpx;
	}

	tbody tr:hover {
		// color: #fff;
		background: #FDEBEC;
		// opacity: 0.08;
	}

	.m-table-hander {
		background-color: #FFF8F7;
		height: 140rpx;
		line-height: 140rpx;
		font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
		font-weight: bold;
	}

	.m_edit {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: rgb(67, 127, 250);
		color: rgb(255, 255, 255);
		min-width: 130rpx;
	}

	.m_delete {
		position: absolute;
		top: 50%;
		left: 50%;
		min-width: 130rpx;
		transform: translate(-50%, -50%);
		background: rgb(234, 37, 44);
		color: rgb(255, 255, 255);
	}

	.m_yl {
		position: relative;
	}

	.s_table_padding {
		padding: 20rpx 400rpx;
	}

	.s_title {
		line-height: 120rpx;
		font-size: 40rpx;
	}
</style>