Skip to content

A
ai-yunshou-vue
Commit 96f0dca9 authored by 胡占生's avatar 胡占生 🇨🇳
Browse files
Options

fix: 算法详情界面重新布局，根据美工设计图，编写页面样式

parent ceeba9a6
Hide whitespace changes
Inline Side-by-side
Showing with 457 additions and 52 deletions
src/api/algorithmList/index.js
View file @ 96f0dca9
......@@ -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/components/ImgVideoUpload/index.vue 0 → 100644
View file @ 96f0dca9
<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
View file @ 96f0dca9
......@@ -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)
......
src/views/algorithmControl/components/form.vue
View file @ 96f0dca9
......@@ -256,6 +256,19 @@
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10" class="mb8">
<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
<span>在线体验案例图片/视频（内置）</span>
</div>
</el-row>
<el-row :gutter="10" class="mb8">
<el-col :span="24">
<el-form-item label-width="130px" label="在线体验案例图片/视频" prop="algorithmBannerVideo">
<ImgVideoUpload :fileType="['png', 'jpg', 'mp4']" :limit='5' :fileSize="20" :isShowTip="true"/>
<!-- <ImageUpload :modelValue="form.algorithmBannerVideo" :limit='1' :fileSize="30" @update:modelValue="getImageUrl"/> -->
</el-form-item>
</el-col>
</el-row>
<!-- <el-row :gutter="10" class="mb8">
<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
<span>在线体验案例图片/视频（内置）</span>
......
src/views/algorithmList/components/details.vue
View file @ 96f0dca9
<template>
<div class="app-container home">
<TabTitle :text="nowText" />
<!-- <TabTitle :text="nowText" /> -->
<el-card class="tab-title">
<div class="cleartitle" style="justify-content: flex-start">
<img src="@/assets/images/logo_video.png" width="25px" alt=""> <span>{{nowText}}</span>
</div>
</el-card>
<div class="add-but">
<el-button plain @click="router.go('-1')">返回</el-button>
</div>
......@@ -18,10 +22,12 @@
</div>
<ImagePreview style="width: 400px;height: 225px;" :src="form.cardImg"/>
</div>
<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
<span>应用场景</span>
</div>
<div class="alg-list" >
<div class="alg-list" style="background-color: #E6F3FF;">
<div v-if="applicationList.length==0">
暂无数据
</div>
......@@ -34,18 +40,22 @@
</template>
</el-card>
</div>
<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
<span>算法试用</span>
</div>
<div>
<el-row :gutter="10">
<el-col :xs="4" :sm="4" :md="4" :lg="4">
图片上传
<div style="background-color: #E6F3FF;display: grid;grid-template-columns: 1fr 2fr 2fr; gap: 16px;padding: 16px;">
<el-card >
<div class="upload-box">
<ImageUpload :defaultUrl="'/upload-api'" :defaultBaseUrl="'http://192.168.3.71:9081'+ '/prod-api'" :limit='1' :fileSize="5" :isShowTip="false" @update:modelObj="getImgObj"/>
<div style="height: 100px;" v-for="item in invalidList" :key="item.id">
<img height="100%" :src="'http://192.168.4.206'+item.caseFile" alt="">
</div>
ww
<!-- <ImageUpload :limit='1' :fileSize="5" :isShowTip="false" @update:modelObj="getImgObj"/> -->
</div>
</el-col>
<el-col :xs="10" :sm="10" :md="10" :lg="10">
</el-card>
<el-card >
原始数据
<div class="img-box" v-if="nowImg.length==0">
<img src="@/assets/images/default.png" height="100%"/>
......@@ -53,53 +63,50 @@
<div class="img-box" v-else>
<img :src="nowImg" height="100%"/>
</div>
</el-col>
<el-col :xs="10" :sm="10" :md="10" :lg="10">
</el-card>
<el-card >
算法识别结果
<div class="img-box" v-if="outFilePath.length==0">
<div>{{ resultStr }}</div>
<img src="@/assets/images/default.png" height="100%"/>
</div>
<div class="img-box" v-else>
<img :src="outFilePath" height="100%"/>
<ImagePreview :src="outFilePath" height="100%"/>
</div>
</el-col>
</el-row>
</el-card>
</div>
<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
<span>算法边界</span>
</div>
<div>
<el-row :gutter="10">
<el-col :xs="12" :sm="12" :md="12" :lg="12">
<div style="background-color: #E6F3FF;display: grid;grid-template-columns: 1fr 1fr; gap: 16px;padding: 16px;">
<el-card>
<div class="text-boundary">
有效的拍摄方式：
<div v-for="(item,index) in effectiveList" :key="item.id" style="text-indent: 10px;">{{index+1}}、{{item.remark}}</div>
</div>
<div class="img-box" v-if="effectiveList.length==0">
<img src="@/assets/images/default.png" height="100%"/>
</div>
<div class="img-box" v-else>
<div class="img-box gird-layout" v-else>
<div v-for="item in effectiveList" :key="item.id">
<p>
{{item.remark}}
</p>
<ImagePreview style="width: 400px;height: 225px;" :src="item.caseFile"/>
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12">
</el-card>
<el-card >
<div class="text-boundary">
无效的拍摄方式：
<div v-for="(item,index) in invalidList" :key="item.id" style="text-indent: 10px;">{{index+1}}、{{item.remark}}</div>
</div>
<div class="img-box" v-if="invalidList.length==0">
<img src="@/assets/images/default.png" height="100%"/>
</div>
<div class="img-box" v-else>
<div class="img-box gird-layout" v-else >
<div v-for="item in invalidList" :key="item.id">
<p>
{{item.remark}}
</p>
<ImagePreview style="width: 400px;height: 225px;" :src="item.caseFile"/>
</div>
</div>
</el-col>
</el-row>
</el-card>
</div>
</el-card>
</el-col>
......@@ -163,38 +170,44 @@ getDetials()
</script>
<style scoped lang="scss">
.upload-box{
// width: 500px;
height: 365px;
border: 1px solid #d8dce5;
border-radius: 5px;
text-align: center;
}
.img-box{
// width: 500px;
height: 365px;
border: 1px solid #d8dce5;
// border: 1px solid #d8dce5;
border-radius: 5px;
text-align: center;
}
.form-title{
display: flex;
align-items:center;/*for vertical align*/
background-image: url('../../../assets/images/details_top.png');
background-size: 100% 40px; /* 设置背景图的高度为200px，宽度自动 */
height: 40px;
font-family: PingFang SC, PingFang SC;
font-size: 16px;
font-weight: 600;
font-style: normal;
text-transform: none;
border-radius: 5px;
padding: 0;
margin: 10px 0;
}
.form-title::before{
content:"";
display: inline-block;
width: 10px; /* 矩形的宽度 */
height: 30px; /* 矩形的高度 */
background-color: #1890FF; /* 矩形的背景颜色 */
margin-right: 10px;
border-radius: 8px;
padding-left: 15px;
margin-top: 10px;
}
// .form-title::before{
// content:"";
// display: inline-block;
// width: 10px; /* 矩形的宽度 */
// height: 30px; /* 矩形的高度 */
// background-color: #1890FF; /* 矩形的背景颜色 */
// margin-right: 10px;
// border-radius: 8px;
// }
.search-input{
display: flex;
width: 400px;
......@@ -213,13 +226,18 @@ getDetials()
min-height: 700px;
.alg-list{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
padding: 16px;
gap: 16px;
.alg-item{
width: 100%;
min-height: 300px;
background-image: url('../../../assets/images/alg_item.png') !important;
background-size: 100% 235px; /* 设置背景图的高度为200px，宽度自动 */
min-height: 235px;
cursor: pointer;
position: relative;
background-color: #ffffff00;
border: 0;
}
}
}
......@@ -236,5 +254,47 @@ getDetials()
align-items: center;
justify-content: space-around;
}
.tab-title {
display: flex;
align-items: center;
/*for vertical align*/
font-size: 20px;
height: 50px;
color: #1890FF;
background-color: #fff;
margin-bottom: 10px;
border-radius: 5px;
padding: 0;
.el-card__body {
padding: 0 !important;
}
}
.tab-title::before {
content: "";
display: none;
width: 0px;
height: 28px;
background-color: #1890FF;
margin-right: 8px;
border-radius: 8px;
margin-left: 8px;
}
.text-boundary{
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: 14px;
color: #292D32;
// line-height: 34px;
text-align: left;
font-style: normal;
text-transform: none;
}
.gird-layout{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 16px;
padding: 16px;
}
</style>
src/views/algorithmList/components/websockt.js
View file @ 96f0dca9
......@@ -16,8 +16,7 @@ export function useWebSockets() {
// 定义点击事件 myFn
function handeUpload(e){
uploadData.value = e
console.log("🚀 ~ handeUpload ~ uploadData.value:", uploadData.value)
client.value = new WebSocketManager('ws://192.168.3.71:8080/sf',websocketMessage)
client.value = new WebSocketManager('ws://192.168.4.206:8111/ai/sf',websocketMessage)
client.value.connect();
}
function websocketMessage(e) {
......@@ -26,6 +25,7 @@ export function useWebSockets() {
client.value.sendMessage({
sessionId: e,
algorithmType: roleId,
algorithmId: roleId,
fileType:uploadData.value.fileType,
type: 0, //0 图片 1视频
filePath:uploadData.value.url,
......@@ -39,7 +39,7 @@ export function useWebSockets() {
resultStr.value = '未检测到预警';
outFilePath.value=''
}else {
outFilePath.value = 'http://192.168.3.71:9081'+ '/prod-api' + '/profile/endfile' + result.data.outFilePath;
outFilePath.value = result.data.outFilePath;
proxy.$modal.msgSuccess("算法处理成功");
}
......
src/views/algorithmList/index.vue
View file @ 96f0dca9
......@@ -104,7 +104,7 @@
{{item.cardCopywriting}}
</p>
<div style="display: flex;justify-content: flex-end;position: absolute;right: 15px;bottom: 10px;" >
<el-button link type="primary" icon="Edit" @click.stop="handleUpdate(item)" >启用</el-button>
<el-button link type="primary" icon="Edit" @click.stop="handleEnable(item)" >{{item.algorithmStatus=='0'?'停用':'启用' }}</el-button>
<el-button link type="primary" icon="Edit" @click.stop="handleUpdate(item)" >修改</el-button>
<el-button link type="primary" icon="Delete" @click.stop="handleDelete(item)">删除</el-button>
<!-- <el-dropdown trigger="click" @command.stop="handleSetSize">
......@@ -139,7 +139,7 @@
</template>
<script setup name="Index">
import { listAlg, detailAlg, addAlg, updateAlg, deleteAlg, } from "@/api/algorithmList/index.js";
import { listAlg, detailAlg, addAlg, updateAlg, deleteAlg,updateAlgState } from "@/api/algorithmList/index.js";
import algorithmDown from './components/algorithmDown.vue'
// import algForm from './components/algorithmDown.vue'
const { proxy } = getCurrentInstance();
......@@ -227,7 +227,6 @@
router.push("/algorithmList/details/info/" + row.id);
}
function handleSetSize(row) {
console.log('%c [ row ]-170', 'font-size:13px; background:pink; color:#bf2c9f;', row)
// reset();
// const postId = row.postId || ids.value;
// getPost(postId).then(response => {
......@@ -244,9 +243,20 @@
queryParams.value.applicationScenarios=row.index
nowTopTitle.value=row.index
getList()
console.log("🚀 ~ handMenuClick ~ row:", row)
}
function handleEnable(row){
const params={
algorithmStatus: row.algorithmStatus=='1'?"0":"1",
id:row.id
}
updateAlgState(params).then((res) => {
console.log("🚀 ~ updateAlgState ~ res:", res)
getList()
})
}
/** 删除按钮操作 */
function handleDelete(row) {
const id = row.id || ids.value;
......
src/views/login.vue
View file @ 96f0dca9
......@@ -178,6 +178,8 @@ getCookie();
}
.login-form {
position: absolute;
right: 10%;
border-radius: 6px;
background: #ffffff;
width: 400px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment