fix: 算法详情界面重新布局，根据美工设计图，编写页面样式 (96f0dca9) · Commits · AI云守 / ai-yunshou-vue · GitLab

src/api/algorithmList/index.js

+10 −0

Original line number	Diff line number	Diff line
		@@ -65,3 +65,13 @@ export function deleteAlg(ids) {
		method: 'delete'
		})
		}


		// 启用禁用算法
		export function updateAlgState(data) {
		return request({
		url: '/yunshou/aiAlgorithmConfig/updateRunningState',
		method: 'post',
		data: data
		})
		}
		No newline at end of file

src/assets/images/alg_item.png

0 → 100644

+5.34 KiB

Loading image diff...

src/assets/images/details_top.png

0 → 100644

+393 KiB

Loading image diff...

src/components/ImgVideoUpload/index.vue

0 → 100644

+307 −0

Original line number	Diff line number	Diff line
		<template>
		<div class="component-upload-image">
		<div class="media-list" v-for="(item, index) in fileList" :key="index">
		<el-image
		class="media-file image-file"
		v-if="getFileType(item.name)=='img'"
		:src="baseUrl+item.url"
		></el-image>
		<video
		class="media-file video-file"
		v-if="getFileType(item.name)=='video'"
		:src="baseUrl+item.url"
		controls
		></video>
		<i
		class="el-icon-zoom-in zoom-in-file"
		v-if="getFileType(item.name)=='img'"
		@click="handlePreview(item)"
		></i>
		<i
		class="el-icon-delete-solid delete-file"
		@click="handleDelete(item)"
		></i>
		</div>
		<el-upload
		multiple
		:action="uploadImgUrl"
		list-type="picture-card"
		:on-success="handleUploadSuccess"
		:before-upload="handleBeforeUpload"
		:limit="limit"
		:on-error="handleUploadError"
		:on-exceed="handleExceed"
		ref="imageUpload"
		:before-remove="handleDelete"
		:show-file-list="false"
		:headers="headers"
		:on-preview="handlePictureCardPreview"
		:class="{ hide: fileList.length >= limit }"
		>
		<el-icon class="avatar-uploader-icon"><plus /></el-icon>
		</el-upload>
		<!-- 上传提示 -->
		<div class="el-upload__tip" v-if="showTip">
		请上传
		<template v-if="fileSize">
		大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
		</template>
		<template v-if="fileType">
		格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
		</template>
		的文件
		</div>

		<el-dialog
		v-model="dialogVisible"
		title="预览"
		width="800px"
		append-to-body
		>
		<img
		:src="dialogImageUrl"
		style="display: block; max-width: 100%; margin: 0 auto"
		/>
		</el-dialog>
		</div>
		</template>

		<script setup>
		import { getToken } from "@/utils/auth";

		const props = defineProps({
		modelValue: [String, Object, Array],
		// 图片数量限制
		limit: {
		type: Number,
		default: 5,
		},
		// 大小限制(MB)
		fileSize: {
		type: Number,
		default: 5,
		},
		// 文件类型, 例如['png', 'jpg', 'jpeg']
		fileType: {
		type: Array,
		default: () => ["png", "jpg", "jpeg"],
		},
		// 是否显示提示
		isShowTip: {
		type: Boolean,
		default: true
		},
		// 是否显示提示
		defaultUrl: {
		type: String,
		default: import.meta.env.VITE_APP_BASE_API
		},
		});

		const { proxy } = getCurrentInstance();
		const emit = defineEmits();
		const number = ref(0);
		const uploadList = ref([]);
		const dialogImageUrl = ref("");
		const dialogVisible = ref(false);
		const baseUrl = 'http://192.168.4.206'
		const uploadImgUrl = computed(
		() => props.defaultUrl + "/common/upload"
		);
		// const uploadImgUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传的图片服务器地址
		const headers = ref({ Authorization: "Bearer " + getToken() });
		const fileList = ref([]);
		const showTip = computed(
		() => props.isShowTip && (props.fileType \|\| props.fileSize)
		);

		watch(() => props.modelValue, val => {
		if (val) {
		// 首先将值转为数组
		const list = Array.isArray(val) ? val : props.modelValue.split(",");
		// 然后将数组转为对象数组
		fileList.value = list.map(item => {
		if (typeof item === "string") {
		if (item.indexOf(baseUrl) === -1) {
		item = { name: baseUrl + item, url: baseUrl + item };
		console.log("🚀 ~ watch ~ item:", item)
		} else {
		item = { name: item, url: item };
		}
		}
		return item;
		});
		} else {
		fileList.value = [];
		return [];
		}
		},{ deep: true, immediate: true });

		// 上传前loading加载
		function handleBeforeUpload(file) {
		let isImg = false;
		if (props.fileType.length) {
		let fileExtension = "";
		if (file.name.lastIndexOf(".") > -1) {
		fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
		}
		isImg = props.fileType.some(type => {
		if (file.type.indexOf(type) > -1) return true;
		if (fileExtension && fileExtension.indexOf(type) > -1) return true;
		return false;
		});
		} else {
		isImg = file.type.indexOf("image") > -1;
		}
		if (!isImg) {
		proxy.$modal.msgError(
		`文件格式不正确, 请上传${props.fileType.join("/")}图片格式文件!`
		);
		return false;
		}
		if (props.fileSize) {
		const isLt = file.size / 1024 / 1024 < props.fileSize;
		if (!isLt) {
		proxy.$modal.msgError(`上传头像图片大小不能超过 ${props.fileSize} MB!`);
		return false;
		}
		}
		proxy.$modal.loading("正在上传图片，请稍候...");
		number.value++;
		}

		// 文件个数超出
		function handleExceed() {
		proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
		}

		// 上传成功回调
		function handleUploadSuccess(res, file) {
		if (res.code === 200) {
		uploadList.value.push({ name: res.fileName, url: res.fileName });
		uploadedSuccessfully();
		emit("update:modelObj", res);
		} else {
		number.value--;
		proxy.$modal.closeLoading();
		proxy.$modal.msgError(res.msg);
		proxy.$refs.imageUpload.handleRemove(file);
		uploadedSuccessfully();
		}
		}

		// 删除图片
		function handleDelete(file) {
		const findex = fileList.value.map(f => f.name).indexOf(file.name);
		if (findex > -1 && uploadList.value.length === number.value) {
		fileList.value.splice(findex, 1);
		emit("update:modelValue", listToString(fileList.value));
		return false;
		}
		}

		// 上传结束处理
		function uploadedSuccessfully() {
		if (number.value > 0 && uploadList.value.length === number.value) {
		fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);
		uploadList.value = [];
		number.value = 0;
		emit("update:modelValue", listToString(fileList.value));
		console.log("🚀 ~ handleDelete ~ listToString(fileList.value):", listToString(fileList.value))
		proxy.$modal.closeLoading();
		}
		}

		// 上传失败
		function handleUploadError() {
		proxy.$modal.msgError("上传图片失败");
		proxy.$modal.closeLoading();
		}

		// 预览
		function handlePictureCardPreview(file) {
		dialogImageUrl.value = file.url;
		dialogVisible.value = true;
		}

		// 对象转成指定字符串分隔
		function listToString(list, separator) {
		let strs = "";
		separator = separator \|\| ",";
		for (let i in list) {
		if (undefined !== list[i].url && list[i].url.indexOf("blob:") !== 0) {
		strs += list[i].url.replace(baseUrl, "") + separator;
		}
		}
		return strs != "" ? strs.substr(0, strs.length - 1) : "";
		}
		// 判断当前文件类型
		function getFileType(fileName) {
		console.log("🚀 ~ getFileType ~ fileName:", fileName)
		const videoType =['mp4','avi','mov','wmv','flv','mkv','rmvb','3gp','mpg','mpeg','webm']
		const ImgType = ['jpg','jpeg','png','gif','bmp','tiff','webp',]
		let fileType = fileName.split(".")[1];
		if (videoType.includes(fileType)) {
		return "video";

		}
		if (ImgType.includes(fileType)) {
		return "img";
		}
		}
		</script>

		<style scoped lang="scss">
		.component-upload-image{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		}
		.media-list {
		position: relative;
		}
		.media-list:hover .delete-file,
		.media-list:hover .zoom-in-file {
		display: inline-block;
		}
		.media-file {
		width: 148px;
		height: 148px;
		border: 1px dashed #c0ccda;
		border-radius: 5px;
		margin-right: 10px;
		}
		// .image-file {}
		.video-file {
		object-fit: fill;
		}
		// .audio-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 {
		cursor: pointer;
		width: 20px;
		height: 20px;
		display: none;
		font-size: 24px;
		color: #009ad6;
		position: absolute;
		top: 5%;
		right: 38%;
		z-index: 100;
		}
		// .el-upload--picture-card 控制加号部分
		:deep(.hide .el-upload--picture-card) {
		display: none;
		}
		</style>
		No newline at end of file

src/main.js

+3 −0

Original line number	Diff line number	Diff line
		@@ -37,6 +37,8 @@ import Editor from "@/components/Editor"
		import FileUpload from "@/components/FileUpload"
		// 图片上传组件
		import ImageUpload from "@/components/ImageUpload"
		// 图片视频上传组件
		import ImgVideoUpload from "@/components/ImgVideoUpload"
		// 图片预览组件
		import ImagePreview from "@/components/ImagePreview"
		// 自定义树选择组件
		@@ -64,6 +66,7 @@ app.component('Pagination', Pagination)
		app.component('TreeSelect', TreeSelect)
		app.component('FileUpload', FileUpload)
		app.component('ImageUpload', ImageUpload)
		app.component('ImgVideoUpload', ImgVideoUpload)
		app.component('ImagePreview', ImagePreview)
		app.component('RightToolbar', RightToolbar)
		app.component('Editor', Editor)