fix: 算法列表编辑，在线体验案例图片/视频优化修复，视频预览，实时预警对接 (9bc5f65a) · Commits · AI云守 / ai-yunshou-vue · GitLab

src/api/algorithmList/index.js

+10 −0

Original line number	Original line	Diff line number	Diff line
	@@ -30,6 +30,16 @@ export function listAlg(query) {
	})		})
	}		}


			// 查询算法文件列表
			export function listAlgFile(query) {
			return request({
			url: '/yunshou/aiAlgorithmFile/list',
			method: 'get',
			params: query
			})
			}

	// 查询算法列表x详情		// 查询算法列表x详情
	export function detailAlg(id) {		export function detailAlg(id) {
	return request({		return request({

src/components/ImgVideoUpload/index.vue

+63 −51

Original line number	Original line	Diff line number	Diff line
	<template>		<template>
	<div class="component-upload-image">		<div class="component-upload-image">
			<div v-if="isImgLayout">
	<div class="media-list" v-for="(item, index) in fileList" :key="index">		<div class="media-list" v-for="(item, index) in fileList" :key="index">
	<el-image		<el-image
	class="media-file image-file"		class="media-file image-file"
	v-if="getFileType(item.name)=='img'"		v-if="getFileType(item.name)=='img'"
	:src="baseUrl+item.url"		:src="item.url"
	></el-image>		></el-image>
	<video		<video
	class="media-file video-file"		class="media-file video-file"
	v-if="getFileType(item.name)=='video'"		v-if="getFileType(item.name)=='video'"
	:src="baseUrl+item.url"		:src="item.url"
	controls		controls
	></video>		></video>
	<i		<div class="upload_operate">
	class="el-icon-zoom-in zoom-in-file"		<el-icon style="cursor: pointer;" @click="handlePictureCardPreview(item)"><ZoomIn /></el-icon>
	v-if="getFileType(item.name)=='img'"		<el-icon @click="handleDelete(item)" style="margin-left: 1rem; cursor: pointer;"><DeleteFilled /></el-icon>
	@click="handlePreview(item)"		</div>
	></i>		</div>
	<i
	class="el-icon-delete-solid delete-file"
	@click="handleDelete(item)"
	></i>
	</div>		</div>

	<el-upload		<el-upload
	multiple		multiple
	:action="uploadImgUrl"		:action="uploadImgUrl"
	list-type="picture-card"		:list-type="isImgLayout?'picture-card':''"
	:on-success="handleUploadSuccess"		:on-success="handleUploadSuccess"
	:before-upload="handleBeforeUpload"		:before-upload="handleBeforeUpload"
	:limit="limit"		:limit="limit"
	@@ -38,7 +36,10 @@
	:on-preview="handlePictureCardPreview"		:on-preview="handlePictureCardPreview"
	:class="{ hide: fileList.length >= limit }"		:class="{ hide: fileList.length >= limit }"
	>		>
	<el-icon class="avatar-uploader-icon"><plus /></el-icon>		<el-icon v-if="isImgLayout" class="avatar-uploader-icon"><plus /></el-icon>
			<el-button type="primary" v-else>
			上传本地文件<el-icon class="el-icon--left"><Upload /></el-icon>
			</el-button>
	</el-upload>		</el-upload>
	<!-- 上传提示 -->		<!-- 上传提示 -->
	<div class="el-upload__tip" v-if="showTip">		<div class="el-upload__tip" v-if="showTip">
	@@ -56,9 +57,16 @@
	v-model="dialogVisible"		v-model="dialogVisible"
	title="预览"		title="预览"
	width="800px"		width="800px"
			style="text-align: center;"
	append-to-body		append-to-body
	>		>
			<video
			v-if="getFileType(dialogImageUrl)=='video'"
			:src="dialogImageUrl"
			controls
			></video>
	<img		<img
			v-else
	:src="dialogImageUrl"		:src="dialogImageUrl"
	style="display: block; max-width: 100%; margin: 0 auto"		style="display: block; max-width: 100%; margin: 0 auto"
	/>		/>
	@@ -90,6 +98,11 @@ const props = defineProps({
	isShowTip: {		isShowTip: {
	type: Boolean,		type: Boolean,
	default: true		default: true
			},
			// 是否按照照片墙布局
			isImgLayout: {
			type: Boolean,
			default: true
	},		},
	// 是否显示提示		// 是否显示提示
	defaultUrl: {		defaultUrl: {
	@@ -124,7 +137,6 @@ watch(() => props.modelValue, val => {
	if (typeof item === "string") {		if (typeof item === "string") {
	if (item.indexOf(baseUrl) === -1) {		if (item.indexOf(baseUrl) === -1) {
	item = { name: baseUrl + item, url: baseUrl + item };		item = { name: baseUrl + item, url: baseUrl + item };
	console.log("🚀 ~ watch ~ item:", item)
	} else {		} else {
	item = { name: item, url: item };		item = { name: item, url: item };
	}		}
	@@ -207,7 +219,6 @@ function uploadedSuccessfully() {
	uploadList.value = [];		uploadList.value = [];
	number.value = 0;		number.value = 0;
	emit("update:modelValue", listToString(fileList.value));		emit("update:modelValue", listToString(fileList.value));
	console.log("🚀 ~ handleDelete ~ listToString(fileList.value):", listToString(fileList.value))
	proxy.$modal.closeLoading();		proxy.$modal.closeLoading();
	}		}
	}		}
	@@ -237,10 +248,9 @@ function listToString(list, separator) {
	}		}
	// 判断当前文件类型		// 判断当前文件类型
	function getFileType(fileName) {		function getFileType(fileName) {
	console.log("🚀 ~ getFileType ~ fileName:", fileName)
	const videoType =['mp4','avi','mov','wmv','flv','mkv','rmvb','3gp','mpg','mpeg','webm']		const videoType =['mp4','avi','mov','wmv','flv','mkv','rmvb','3gp','mpg','mpeg','webm']
	const ImgType = ['jpg','jpeg','png','gif','bmp','tiff','webp',]		const ImgType = ['jpg','jpeg','png','gif','bmp','tiff','webp',]
	let fileType = fileName.split(".")[1];		let fileType = fileName.split(".").pop();
	if (videoType.includes(fileType)) {		if (videoType.includes(fileType)) {
	return "video";		return "video";

	@@ -260,10 +270,10 @@ function getFileType(fileName) {
	.media-list {		.media-list {
	position: relative;		position: relative;
	}		}
	.media-list:hover .delete-file,		// .media-list:hover .delete-file,
	.media-list:hover .zoom-in-file {		// .media-list:hover .zoom-in-file {
	display: inline-block;		// display: inline-block;
	}		// }
	.media-file {		.media-file {
	width: 148px;		width: 148px;
	height: 148px;		height: 148px;
	@@ -277,28 +287,30 @@ function getFileType(fileName) {
	}		}
	// .audio-file {}		// .audio-file {}
	.delete-file {		.delete-file {
	cursor: pointer;
	width: 20px;
	height: 20px;
	display: none;
	font-size: 24px;
	color: #f56c6c;
	position: absolute;
	top: 5%;
	right: 15%;
	z-index: 100;
	}		}
	.zoom-in-file {		.zoom-in-file {
	cursor: pointer;
	width: 20px;		}
	height: 20px;
	display: none;		.upload_operate{
	font-size: 24px;		align-items: center;
	color: #009ad6;		background-color: var(--el-overlay-color-lighter);
			color: #fff;
			cursor: default;
			display: inline-flex;
			font-size: 20px;
			height: 148px;
			width: 148px;
			justify-content: center;
			left: 0;
			opacity: 0;
	position: absolute;		position: absolute;
	top: 5%;		top: 0;
	right: 38%;		transition: opacity var(--el-transition-duration);
	z-index: 100;		}
			.upload_operate:hover{
			opacity: 1;
	}		}
	// .el-upload--picture-card 控制加号部分		// .el-upload--picture-card 控制加号部分
	:deep(.hide .el-upload--picture-card) {		:deep(.hide .el-upload--picture-card) {

src/views/algorithmControl/components/form.vue

+41 −17

Original line number	Original line	Diff line number	Diff line
	@@ -92,7 +92,7 @@
	</el-col>		</el-col>
	</el-row>		</el-row>
	<el-card class="left-list">		<el-card class="left-list">
	<el-table :data="postList" >		<el-table :data="wrapList" >
	<el-table-column label="文件名称" align="center" prop="postId" />		<el-table-column label="文件名称" align="center" prop="postId" />
	<el-table-column label="状态" align="center" prop="postCode" />		<el-table-column label="状态" align="center" prop="postCode" />
	<el-table-column label="MD5核对结果" align="center" prop="postName" />		<el-table-column label="MD5核对结果" align="center" prop="postName" />
	@@ -162,14 +162,14 @@
	</el-form-item>		</el-form-item>
	</el-col>		</el-col>
	</el-row>		</el-row>
	<!-- <el-row :gutter="10" class="mb8" style="justify-content: space-between;">		<el-row :gutter="10" class="mb8" style="justify-content: space-between;">
	<el-col :span="1.5">		<el-col :span="1.5">
	<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">		<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
	<span>算法维护</span>		<span>算法维护</span>
	</div>		</div>
	</el-col>		</el-col>
	<el-col :span="6.8" style="display: flex;">		<el-col :span="6.8" style="display: flex;">
	<el-button		<!-- <el-button
	type="primary"		type="primary"
	plain		plain
	icon="Search"		icon="Search"
	@@ -180,7 +180,7 @@
	plain		plain
	icon="Refresh"		icon="Refresh"
	@click="handleUpdate"		@click="handleUpdate"
	>版本更新</el-button>		>版本更新</el-button> -->
	<el-button		<el-button
	type="success"		type="success"
	plain		plain
	@@ -190,11 +190,22 @@
	</el-col>		</el-col>
	</el-row>		</el-row>
	<el-card class="left-list">		<el-card class="left-list">
	<el-table :data="postList" >		<el-table :data="wrapList" >
	<el-table-column label="文件名称" align="center" prop="postId" />		<el-table-column type="expand">
	<el-table-column label="状态" align="center" prop="postCode" />		<template #default="props">
	<el-table-column label="MD5核对结果" align="center" prop="postName" />		<div m="4">
	<el-table-column label="文件大小" align="center" prop="postSort" />		<p m="t-0 b-2">State: {{props + 'props.row.state' }}</p>
			<p m="t-0 b-2">City: {{ 'props.row.city' }}</p>
			<p m="t-0 b-2">Address: {{ 'props.row.address' }}</p>
			<p m="t-0 b-2">Zip: {{ 'props.row.zip' }}</p>
			<h3>Family</h3>
			</div>
			</template>
			</el-table-column>
			<el-table-column label="文件名称" align="center" prop="algorithmName" />
			<el-table-column label="状态" align="center" prop="algorithmStatus" />
			<el-table-column label="MD5核对结果" align="center" prop="md5Result" />
			<el-table-column label="文件大小" align="center" prop="fileSize" />
	<el-table-column label="进度" align="center" prop="postSort" />		<el-table-column label="进度" align="center" prop="postSort" />
	<el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">		<el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
	<template #default="scope">		<template #default="scope">
	@@ -203,7 +214,7 @@
	</template>		</template>
	</el-table-column>		</el-table-column>
	</el-table>		</el-table>
	</el-card> -->		</el-card>
	</el-tab-pane>		</el-tab-pane>
	<el-tab-pane label="算法详情" name="算法详情">		<el-tab-pane label="算法详情" name="算法详情">
	<el-row :gutter="10" class="mb8">		<el-row :gutter="10" class="mb8">
	@@ -214,7 +225,7 @@
	<el-row :gutter="10" class="mb8">		<el-row :gutter="10" class="mb8">
	<el-col :span="12">		<el-col :span="12">
	<el-form-item label-width="130px" label="算法Banner" prop="algorithmBanner">		<el-form-item label-width="130px" label="算法Banner" prop="algorithmBanner">
	<ImageUpload :modelValue="form.algorithmBanner" :limit='1' :fileSize="5" @update:modelValue="getImageUrl"/>		<ImageUpload :modelValue="form.algorithmBanner" :limit='1' :fileSize="5" @update:modelValue="getAlgorithmBanner"/>
	</el-form-item>		</el-form-item>
	</el-col>		</el-col>
	</el-row>		</el-row>
	@@ -252,7 +263,7 @@
	<el-row :gutter="10" class="mb8">		<el-row :gutter="10" class="mb8">
	<el-col :span="12">		<el-col :span="12">
	<el-form-item label-width="130px" label="banner上算法视频" prop="algorithmBannerVideo">		<el-form-item label-width="130px" label="banner上算法视频" prop="algorithmBannerVideo">
	<ImageUpload :modelValue="form.algorithmBannerVideo" :limit='1' :fileSize="30" @update:modelValue="getImageUrl"/>		<ImgVideoUpload :modelValue="form.algorithmBannerVideo" :fileType="['rmvb', 'avi', 'mp4']" :limit='1' :fileSize="100" :isShowTip="true" @update:modelValue="getAlgorithmBannerVideo"/>
	</el-form-item>		</el-form-item>
	</el-col>		</el-col>
	</el-row>		</el-row>
	@@ -264,7 +275,7 @@
	<el-row :gutter="10" class="mb8">		<el-row :gutter="10" class="mb8">
	<el-col :span="24">		<el-col :span="24">
	<el-form-item label-width="130px" label="在线体验案例图片/视频" prop="algorithmBannerVideo">		<el-form-item label-width="130px" label="在线体验案例图片/视频" prop="algorithmBannerVideo">
	<ImgVideoUpload :fileType="['png', 'jpg', 'mp4']" :limit='5' :fileSize="20" :isShowTip="true"/>		<ImgVideoUpload :modelValue="form.algorithmBannerVideo" :fileType="['png', 'jpg', 'mp4']" :limit='5' :fileSize="20" :isShowTip="true"/>
	<!-- <ImageUpload :modelValue="form.algorithmBannerVideo" :limit='1' :fileSize="30" @update:modelValue="getImageUrl"/> -->		<!-- <ImageUpload :modelValue="form.algorithmBannerVideo" :limit='1' :fileSize="30" @update:modelValue="getImageUrl"/> -->
	</el-form-item>		</el-form-item>
	</el-col>		</el-col>
	@@ -443,12 +454,11 @@
	</template>		</template>

	<script setup>		<script setup>
	import { addAlg, updateAlg , detailAlg} from "@/api/algorithmList/index.js";		import { addAlg, updateAlg , detailAlg , listAlgFile} from "@/api/algorithmList/index.js";
	import { listScene, detailScene , addScene, updateScene, deleteScene} from "@/api/algorithmList/scene.js";		import { listScene, detailScene , addScene, updateScene, deleteScene} from "@/api/algorithmList/scene.js";
	import { listBoundary, detailBoundary , addBoundary, updateBoundary, deleteBoundary} from "@/api/algorithmList/boundary.js";		import { listBoundary, detailBoundary , addBoundary, updateBoundary, deleteBoundary} from "@/api/algorithmList/boundary.js";
	const { proxy } = getCurrentInstance();		const { proxy } = getCurrentInstance();
	const { algorithm_scen, algorithm_case } = proxy.useDict("algorithm_scen", "algorithm_case");		const { algorithm_scen, algorithm_case } = proxy.useDict("algorithm_scen", "algorithm_case");
	console.log("🚀 ~ algorithm_case:", algorithm_case)
	const emit = defineEmits();		const emit = defineEmits();
	const open = ref(false);		const open = ref(false);
	const openScene = ref(false);		const openScene = ref(false);
	@@ -458,7 +468,15 @@ const title = ref("");
	const titleScene = ref("");		const titleScene = ref("");
	const titleBoundary = ref("");		const titleBoundary = ref("");
	const activeName = ref("基础信息");		const activeName = ref("基础信息");
	const postList = ref([]);		const wrapList = ref([
			{
			algorithmId:'1',
			algorithmStatus:'1',
			fileSize:'500M',
			md5Result:'一致',
			algorithmName:'火焰算法',
			}
			]);
	const sceneList = ref([]);		const sceneList = ref([]);
	const boundaryList = ref([]);		const boundaryList = ref([]);
	const ids = ref([]);		const ids = ref([]);
	@@ -486,6 +504,12 @@ const { queryParams, form, formScene,formBoundary, rules } = toRefs(data);
	function getImageUrl(url){		function getImageUrl(url){
	form.value.cardImg=url		form.value.cardImg=url
	}		}
			function getAlgorithmBannerVideo(url){
			form.value.algorithmBannerVideo=url
			}
			function getAlgorithmBanner(url){
			form.value.algorithmBanner=url
			}
	function getBoundaryImageUrl(url){		function getBoundaryImageUrl(url){
	formBoundary.value.caseFile=url		formBoundary.value.caseFile=url
	}		}

src/views/algorithmControl/index.vue

+4 −4

Original line number	Original line	Diff line number	Diff line
	@@ -80,11 +80,11 @@
	</el-row>		</el-row>

	<el-table v-loading="loading" :data="algList" @selection-change="handleSelectionChange">		<el-table v-loading="loading" :data="algList" @selection-change="handleSelectionChange">
	<el-table-column label="算法名称" width="100" align="center" prop="algorithmName" />		<el-table-column label="算法名称" width="150" align="center" prop="algorithmName" :show-overflow-tooltip="true" />
	<el-table-column label="算法英文" align="center" prop="algorithmEnglish" :show-overflow-tooltip="true" />		<el-table-column label="算法英文" align="center" prop="algorithmEnglish" :show-overflow-tooltip="true" />
	<el-table-column label="硬件平台" align="center" prop="algorithmPlat">		<el-table-column label="硬件平台" align="center" width="100" prop="algorithmPlat">
	</el-table-column>		</el-table-column>
	<el-table-column label="算法场景" align="center" prop="applicationScenarios" :show-overflow-tooltip="true" />		<el-table-column label="算法场景" align="center" width="100" prop="applicationScenarios" :show-overflow-tooltip="true" />
	<el-table-column label="卡片文案" align="center" prop="cardCopywriting" :show-overflow-tooltip="true" />		<el-table-column label="卡片文案" align="center" prop="cardCopywriting" :show-overflow-tooltip="true" />
	<el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">		<el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
	<template #default="scope">		<template #default="scope">
	@@ -155,7 +155,7 @@

	const { queryParams, form, rules } = toRefs(data);		const { queryParams, form, rules } = toRefs(data);

	/** 查询定时任务列表 */		/** 任务列表 */
	function getList() {		function getList() {
	loading.value = true;		loading.value = true;
	listAlg(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {		listAlg(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {

src/views/algorithmList/components/details.vue

+76 −19

Original line number	Original line	Diff line number	Diff line
	@@ -13,14 +13,19 @@
	<el-row :gutter="10">		<el-row :gutter="10">
	<el-col :xs="24" :sm="24" :md="24" :lg="24">		<el-col :xs="24" :sm="24" :md="24" :lg="24">
	<el-card class="right-list">		<el-card class="right-list">
	<div class="backcolor" style="height: 350px;width: 100%; padding: 10px;">		<div class="backcolor" v-if="videoLoading" :style="backImg" >
	<div style="width: 500px;">		<div style="width: 500px;">
	<h2 style="font-weight: 700;font-style: normal;font-size: 28px;color: #FFFFFF;">{{form.algorithmName}}</h2>		<h2 style="font-weight: 700;font-style: normal;font-size: 28px;color: #FFFFFF;">{{form.algorithmName}}</h2>
	<p style="font-weight: 700;font-style: normal;font-size: 17px;color: rgba(255, 255, 255, 0.6);line-height: 21px;">		<p style="font-weight: 700;font-style: normal;font-size: 17px;color: rgba(255, 255, 255, 0.6);line-height: 21px;">
	{{form.cardCopywriting}}		{{form.cardCopywriting}}
	</p>		</p>
	</div>		</div>
	<ImagePreview style="width: 400px;height: 225px;" :src="form.cardImg"/>		<div style="width: 400px;height: 225px;" >
			<video v-if="videoLoading" controls ref="videoEle" class="drawImg">
			<source :src="backVideo" type="video/mp4" />
			</video>
			</div>
			<!-- <ImagePreview :src="form.cardImg"/> -->
	</div>		</div>


	@@ -45,34 +50,50 @@
	<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">		<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
	<span>算法试用</span>		<span>算法试用</span>
	</div>		</div>
	<div style="background-color: #E6F3FF;display: grid;grid-template-columns: 1fr 2fr 2fr; gap: 16px;padding: 16px;">		<div style="background-color: #E6F3FF;display: grid;grid-template-columns: 1fr 2fr 2fr; gap: 16px;padding: 16px;min-height: 650px;">
	<el-card >		<el-card style="position: relative;">
	<div class="upload-box">		<div class="upload-box">
	<div style="height: 100px;" v-for="item in invalidList" :key="item.id">		<div style="height: 130px;width: 100%; margin: 5px; overflow: hidden;cursor: pointer;"
	<img height="100%" :src="'http://192.168.4.206'+item.caseFile" alt="">		v-for="item in invalidList" :key="item.id"
			@click="handBuiltImg(item.caseFile)"
			>
			<img width="100%" :src="'http://192.168.4.206'+item.caseFile" alt="">
	</div>		</div>
	ww		<ImgVideoUpload
			style="position: absolute;bottom: 5px;left: 26%;"
			:modelValue="uploadUrl"
			:fileType="['png', 'jpg', 'mp4']"
			:isImgLayout="false"
			:limit='5' :fileSize="20"
			:isShowTip="false"
			@update:modelObj="getImgObj"
			/>
	<!-- <ImageUpload :limit='1' :fileSize="5" :isShowTip="false" @update:modelObj="getImgObj"/> -->		<!-- <ImageUpload :limit='1' :fileSize="5" :isShowTip="false" @update:modelObj="getImgObj"/> -->
	</div>		</div>
	</el-card>		</el-card>
	<el-card >		<el-card >
	原始数据		原始数据
	<div class="img-box" v-if="nowImg.length==0">		<div class="img-box" v-if="nowImg.length==0">
	<img src="@/assets/images/default.png" height="100%"/>		<img src="@/assets/images/default.png" height="350px"/>
	</div>		</div>
	<div class="img-box" v-else>		<div class="img-box" v-else>
	<img :src="nowImg" height="100%"/>		<ImagePreview :src="nowImg" height="100%"/>
	</div>		</div>
			<el-button type="primary" plain>开始识别</el-button>
	</el-card>		</el-card>
	<el-card >		<el-card >
	算法识别结果		算法识别结果
	<div class="img-box" v-if="outFilePath.length==0">		<div class="img-box" v-if="outFilePath.length==0">
	<div>{{ resultStr }}</div>		<div>{{ resultStr }}</div>
	<img src="@/assets/images/default.png" height="100%"/>		<img src="@/assets/images/default.png" height="350px"/>
	</div>		</div>
	<div class="img-box" v-else>		<div class="img-box" v-else>
	<ImagePreview :src="outFilePath" height="100%"/>		<ImagePreview :src="outFilePath" height="100%"/>
	</div>		</div>
			<div style="display: flex;justify-content: space-between;">
			<el-button type="primary" plain>重置区域</el-button>
			<el-button type="primary" plain>下载识别视频</el-button>
			</div>
	</el-card>		</el-card>
	</div>		</div>
	<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">		<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
	@@ -88,8 +109,8 @@
	<img src="@/assets/images/default.png" height="100%"/>		<img src="@/assets/images/default.png" height="100%"/>
	</div>		</div>
	<div class="img-box gird-layout" v-else>		<div class="img-box gird-layout" v-else>
	<div v-for="item in effectiveList" :key="item.id">		<div class="img-item" v-for="item in effectiveList" :key="item.id">
	<ImagePreview style="width: 400px;height: 225px;" :src="item.caseFile"/>		<ImagePreview style="height: 100%;" :src="item.caseFile"/>
	</div>		</div>
	</div>		</div>
	</el-card>		</el-card>
	@@ -102,8 +123,8 @@
	<img src="@/assets/images/default.png" height="100%"/>		<img src="@/assets/images/default.png" height="100%"/>
	</div>		</div>
	<div class="img-box gird-layout" v-else >		<div class="img-box gird-layout" v-else >
	<div v-for="item in invalidList" :key="item.id">		<div class="img-item" v-for="item in invalidList" :key="item.id">
	<ImagePreview style="width: 400px;height: 225px;" :src="item.caseFile"/>		<ImagePreview style="height: 100%;" :src="item.caseFile"/>
	</div>		</div>
	</div>		</div>
	</el-card>		</el-card>
	@@ -128,10 +149,15 @@ const nowImg=ref('')
	const { roleId } =route.params		const { roleId } =route.params
	const { proxy } = getCurrentInstance();		const { proxy } = getCurrentInstance();
	const algFormRef = ref(null)		const algFormRef = ref(null)
			const uploadUrl = ref('')
			const videoLoading = ref(false)
			const backImg = ref({})
			const backVideo = ref({})
	const applicationList = ref([])		const applicationList = ref([])
	const effectiveList = ref([])		const effectiveList = ref([])
	const invalidList = ref([])		const invalidList = ref([])
	const nowText=ref('算法详情')		const nowText=ref('算法详情')
			const baseUrl = 'http://192.168.4.206'
	const data = reactive({		const data = reactive({
	form: {},		form: {},
	queryParams: {		queryParams: {
	@@ -148,9 +174,16 @@ const data = reactive({
	const { queryParams, form, rules } = toRefs(data);		const { queryParams, form, rules } = toRefs(data);

	function getDetials(){		function getDetials(){
			videoLoading.value=false
	detailAlg(roleId).then(res=>{		detailAlg(roleId).then(res=>{
	console.log(res)		console.log(res)
	form.value=res.data		form.value=res.data
			const banner= new URL(judgeImgUrl(res.data.algorithmBanner))
			backImg.value = {
			backgroundImage: `url(${banner})`,
			}
			backVideo.value = judgeImgUrl(res.data.algorithmBannerVideo)
			videoLoading.value=true
	})		})
	listScene({ algorithmId: roleId}).then(res => {		listScene({ algorithmId: roleId}).then(res => {
	applicationList.value = res.rows		applicationList.value = res.rows
	@@ -164,7 +197,21 @@ function getImgObj(obj){
	nowImg.value = obj.url		nowImg.value = obj.url
	handeUpload(obj)		handeUpload(obj)
	}		}
			function judgeImgUrl(item){
			if(item&&item!=null){
			if (item.indexOf(baseUrl) === -1) {
			return baseUrl + item
			} else {
			return item
			}
			}else{
			return 'http://192.168.4.206/profile/upload/2024/08/28/banner%20background_20240828095250A003.png'
			}

			}
			function handBuiltImg(item){
			nowImg.value = item
			}
	getDetials()		getDetials()

	</script>		</script>
	@@ -173,13 +220,14 @@ getDetials()

	.upload-box{		.upload-box{
	// width: 500px;		// width: 500px;
	height: 365px;
	border-radius: 5px;		border-radius: 5px;
	text-align: center;		display: flex;
			flex-direction: column;
			align-items: center;
	}		}
	.img-box{		.img-box{
	// width: 500px;		// width: 500px;
	height: 365px;		min-height: 365px;
	// border: 1px solid #d8dce5;		// border: 1px solid #d8dce5;
	border-radius: 5px;		border-radius: 5px;
	text-align: center;		text-align: center;
	@@ -248,8 +296,12 @@ getDetials()
	justify-content: space-between;		justify-content: space-between;
	}		}
	.backcolor{		.backcolor{
			height: 350px;
			width: 100%;
			padding: 10px;
	border-radius: 10px;		border-radius: 10px;
	background-image: linear-gradient(to right, #6f86d6 0%, #48c6ef 100%);		background-image: linear-gradient(to right, #6f86d6 0%, #48c6ef 100%);
			background-size:100% 350px ;
	display: flex;		display: flex;
	align-items: center;		align-items: center;
	justify-content: space-around;		justify-content: space-around;
	@@ -292,9 +344,14 @@ getDetials()
	}		}
	.gird-layout{		.gird-layout{
	display: grid;		display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;		gap: 16px;
	padding: 16px;		padding: 16px;
	}		}
			.img-item{
			border: 1px solid #279bda;
			width: 150px;
			height: 150px;
			}
	</style>		</style>