Skip to content

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

fix: 算法详情UI重新修改

parent 596786b9
Hide whitespace changes
Inline Side-by-side
Showing with 73 additions and 83 deletions
src/components/ImgVideoUpload/index.vue
View file @ 3e37f9b6
...@@ -37,8 +37,8 @@ ...@@ -37,8 +37,8 @@
:class="{ hide: fileList.length >= limit }" :class="{ hide: fileList.length >= limit }"
> >
<el-icon v-if="isImgLayout" 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-button type="primary" plain v-else>
上传本地文件<el-icon class="el-icon--left"><Upload /></el-icon> <el-icon class="el-icon--left"><Upload /></el-icon>上传本地文件
</el-button> </el-button>
</el-upload> </el-upload>
<!-- 上传提示 --> <!-- 上传提示 -->
......
src/views/alarmControl/index.vue
View file @ 3e37f9b6
...@@ -118,50 +118,8 @@ ...@@ -118,50 +118,8 @@
const nowText=ref('告警管理') const nowText=ref('告警管理')
const ids = ref([]); const ids = ref([]);
const total = ref(0); const total = ref(0);
const division = ref(12); const division = ref(6);
const deviceList = ref([]); const deviceList = ref([]);
const algorithmList=reactive([
{
name:"我的算法",
value:1
},
{
name:"最新算法",
value:2
},
{
name:"基础算法",
value:3
},
{
name:"智慧煤矿",
value:4
},
{
name:"智慧能源",
value:5
},
{
name:"智慧校园",
value:6
},
{
name:"智慧港口",
value:7
},
{
name:"智慧煤矿",
value:8
},
{
name:"智慧能源",
value:9
},
{
name:"智慧校园",
value:10
},
])
const algList = ref([]); const algList = ref([]);
const data = reactive({ const data = reactive({
form: {}, form: {},
...@@ -169,7 +127,7 @@ ...@@ -169,7 +127,7 @@
postCode: undefined, postCode: undefined,
searchValue: '', searchValue: '',
status: undefined, status: undefined,
pageSize: 4, pageSize: 12,
pageNum: 1, pageNum: 1,
}, },
rules: { rules: {
......
src/views/algorithmList/components/details.vue
View file @ 3e37f9b6
...@@ -32,18 +32,21 @@ ...@@ -32,18 +32,21 @@
<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 class="alg-list" style="background-color: #E6F3FF;"> <div style="background-color: #E6F3FF; min-height: 500px;">
<div v-if="applicationList.length==0"> <div v-if="applicationList.length==0" class="text-style" style="text-align: center;line-height: 500px;font-size: 26px;">
暂无数据 暂无数据
</div> </div>
<el-card v-for="item in applicationList" :key="item.name" class="alg-item" shadow="hover" > <div class="alg-list">
<template v-slot:default > <el-card v-for="item in applicationList" :key="item.name" class="alg-item" shadow="hover" >
<h2>{{ item.sceneName }}</h2> <template v-slot:default >
<p style="color: #999999;font-size: 12px;"> <h2>{{ item.sceneName }}</h2>
{{ item.sceneDetail }} <p style="color: #999999;font-size: 12px;">
</p> {{ item.sceneDetail }}
</template> </p>
</el-card> </template>
</el-card>
</div>
</div> </div>
...@@ -56,12 +59,12 @@ ...@@ -56,12 +59,12 @@
<div class="img-box" v-if="imgVideoData.length==0"> <div class="img-box" v-if="imgVideoData.length==0">
<img src="@/assets/images/default/Image.png" width="100%" height="550px"/> <img src="@/assets/images/default/Image.png" width="100%" height="550px"/>
</div> </div>
<div v-else style="height: 130px;width: 100%; margin: 5px; overflow: hidden;cursor: pointer;" <div v-else style="height: 130px;width: 100%; margin: 5px; overflow: hidden;cursor: pointer;border-radius: 10px;"
v-for="item in imgVideoData" :key="item.id" v-for="item in imgVideoData" :key="item.id"
@click="handBuiltImg(item.caseFile)" @click="handBuiltImg(item.caseFile)"
> >
<img width="100%" v-if="getFileType(item.caseFile)=='0'" :src="'http://192.168.3.82'+item.caseFile" alt=""> <img width="100%" v-if="getFileType(item.caseFile)=='0'" :src="'http://192.168.3.82'+item.caseFile" alt="" style="border-radius: 10px;">
<video width="100%" v-else controls class="drawImg"> <video width="100%" v-else controls class="drawImg" style="border-radius: 10px;">
<source :src="'http://192.168.3.82'+item.caseFile" type="video/mp4" /> <source :src="'http://192.168.3.82'+item.caseFile" type="video/mp4" />
</video> </video>
</div> </div>
...@@ -78,31 +81,35 @@ ...@@ -78,31 +81,35 @@
</div> </div>
</el-card> </el-card>
<el-card > <el-card >
原始数据 <div class="text-style" style="margin: 10px 0;">
原始数据：支持自定义上传
</div>
<div class="img-box" v-if="nowImg.length==0"> <div class="img-box" v-if="nowImg.length==0">
<img src="@/assets/images/default/Image-1.png" height="350px"/> <img src="@/assets/images/default/Image-1.png" width="100%"/>
</div> </div>
<div class="img-box" v-else> <div class="img-box" v-else style="max-height: 366px;overflow: hidden;">
<ImagePreview v-if="getFileType(nowImg)=='0'" :src="nowImg" height="100%"/> <ImagePreview v-if="getFileType(nowImg)=='0'" :src="nowImg" width="100%"/>
<video width="100%" v-else controls class="drawImg"> <video width="100%" v-else controls class="drawImg">
<source :src="'http://192.168.3.82'+nowImg" type="video/mp4" /> <source :src="'http://192.168.3.82'+nowImg" type="video/mp4" />
</video> </video>
</div> </div>
<el-button type="primary" plain>开始识别</el-button> <el-button type="primary" plain @click="openIdentify" style="margin: 10px 0;">开始识别</el-button>
</el-card> </el-card>
<el-card > <el-card >
算法识别结果 <div class="text-style" style="margin: 10px 0;">
算法识别结果：
</div>
<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/Image-1.png" height="350px"/> <img src="@/assets/images/default/Image-1.png" width="100%"/>
</div> </div>
<div class="img-box" v-else> <div class="img-box" v-else style="max-height: 366px;overflow: hidden;">
<ImagePreview v-if="getFileType(outFilePath)=='0'" :src="outFilePath" height="100%"/> <ImagePreview v-if="getFileType(outFilePath)=='0'" :src="outFilePath" width="100%"/>
<video width="100%" v-else controls class="drawImg"> <video width="100%" v-else controls class="drawImg">
<source :src="'http://192.168.3.82'+outFilePath" type="video/mp4" /> <source :src="'http://192.168.3.82'+outFilePath" type="video/mp4" />
</video> </video>
</div> </div>
<div style="display: flex;justify-content: space-between;"> <div style="display: flex;justify-content: space-between;margin: 10px 0;">
<el-button type="primary" plain>重置区域</el-button> <el-button type="primary" plain>重置区域</el-button>
<el-button type="primary" plain>下载识别视频</el-button> <el-button type="primary" plain>下载识别视频</el-button>
</div> </div>
...@@ -127,8 +134,8 @@ ...@@ -127,8 +134,8 @@
<ImagePreview style="height: 100%;" :src="item.caseFile"/> <ImagePreview style="height: 100%;" :src="item.caseFile"/>
</div> </div>
</div> </div>
<img class="top-tip" src="@/assets/images/success.png" alt="">
</div> </div>
<img class="top-tip" src="@/assets/images/success.png" alt="">
</el-card> </el-card>
<el-card style="position: relative;padding: 20px;"> <el-card style="position: relative;padding: 20px;">
...@@ -146,9 +153,9 @@ ...@@ -146,9 +153,9 @@
<ImagePreview style="height: 100%;" :src="item.caseFile"/> <ImagePreview style="height: 100%;" :src="item.caseFile"/>
</div> </div>
</div> </div>
<img class="top-tip" src="@/assets/images/close.png" alt="">
</div> </div>
<img class="top-tip" src="@/assets/images/close.png" alt="">
</el-card> </el-card>
</div> </div>
</el-card> </el-card>
...@@ -242,6 +249,13 @@ function judgeImgUrl(item){ ...@@ -242,6 +249,13 @@ function judgeImgUrl(item){
function handBuiltImg(item){ function handBuiltImg(item){
nowImg.value = item nowImg.value = item
} }
function openIdentify(){
if(proxy.isNotEmpty(nowImg.value)){
handeUpload({fileName:nowImg.value})
}else{
proxy.$modal.msgWarning(`请上传图片!`);
}
}
// 判断当前文件类型 // 判断当前文件类型
function getFileType(fileName) { function getFileType(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']
...@@ -386,6 +400,16 @@ getDetials() ...@@ -386,6 +400,16 @@ getDetials()
text-transform: none; text-transform: none;
min-height: 180px; min-height: 180px;
} }
.text-style{
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{ .gird-layout{
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
......
src/views/algorithmList/components/websockt.js
View file @ 3e37f9b6
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
import { ref } from 'vue'; import { ref } from 'vue';
import {WebSocketManager} from '@/utils/webscoket' import {WebSocketManager} from '@/utils/webscoket'
import { getFileType } from '@/utils/ruoyi' import { getFileType } from '@/utils/ruoyi'
import { el } from 'element-plus/es/locales.mjs';
export function useWebSockets() { export function useWebSockets() {
//定义初始值为0的变量，要使用ref方法赋值，直接赋值的话变量改变不会更新 UI //定义初始值为0的变量，要使用ref方法赋值，直接赋值的话变量改变不会更新 UI
...@@ -22,31 +23,38 @@ export function useWebSockets() { ...@@ -22,31 +23,38 @@ export function useWebSockets() {
} }
function websocketMessage(e) { function websocketMessage(e) {
const result = e && JSON.parse(e) const result = e && JSON.parse(e)
console.log("🚀 ~ websocketMessage ~ result:", result)
if (result.type == 0) { //获取sessionId if (result.type == 0) { //获取sessionId
// setTimeout(() => {
// proxy.$modal.msgWarning("算法处理有误");
// proxy.$modal.closeLoading();
// }, 5000);
proxy.$modal.loading("正在检测中请稍后"); proxy.$modal.loading("正在检测中请稍后");
client.value.sendMessage({ client.value.sendMessage({
sessionId: e, sessionId: e,
algorithmType: roleId, algorithmType: roleId,
algorithmId: roleId, algorithmId: roleId,
fileType:uploadData.value.fileType, fileType:uploadData.value.fileType?uploadData.value.fileType:'',
type: getFileType(uploadData.value.fileName), //0 图片 1视频 type: getFileType(uploadData.value.fileName), //0 图片 1视频
filePath:uploadData.value.url, filePath:uploadData.value.url?uploadData.value.url:'',
fileName:uploadData.value.fileName fileName:uploadData.value.fileName
}) })
} else if (result.type == 2) { } else if (result.type == 2) {
const queue = result.data.queue.indexOf('[') == -1 ? result.data.queue : JSON.parse(result.data.queue); const queue = result.data.queue.indexOf('[') == -1 ? result.data.queue : JSON.parse(result.data.queue);
outFilePath.value = result.data.outFilePath;
proxy.$modal.closeLoading(); proxy.$modal.closeLoading();
if (!queue.length) { if(getFileType(result.data.outFilePath)=='1'){
proxy.$modal.msgWarning("未检测到预警");
resultStr.value = '未检测到预警';
// outFilePath.value=''
}else {
outFilePath.value = result.data.outFilePath; outFilePath.value = result.data.outFilePath;
proxy.$modal.msgSuccess("算法处理成功"); proxy.$modal.msgSuccess("算法处理成功");
}else{
if (!queue.length) {
proxy.$modal.msgWarning("未检测到预警");
resultStr.value = '未检测到预警';
outFilePath.value=''
}else {
outFilePath.value = result.data.outFilePath;
proxy.$modal.msgSuccess("算法处理成功");
}
} }
client.value.disconnect(); client.value.disconnect();
} }
} }
......
src/views/algorithmList/index.vue
View file @ 3e37f9b6
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
</el-card> </el-card>
</el-col> </el-col>
<el-col :xs="24" :sm="20" :md="20" :lg="20"> <el-col :xs="24" :sm="20" :md="20" :lg="20">
<el-scrollbar height="700px"> <el-scrollbar height="710px">
<el-card class="right-list"> <el-card class="right-list">
<template v-slot:header> <template v-slot:header>
<div class="cleartitle" style="justify-content: flex-start"> <div class="cleartitle" style="justify-content: flex-start">
...@@ -104,8 +104,8 @@ ...@@ -104,8 +104,8 @@
{{item.cardCopywriting}} {{item.cardCopywriting}}
</p> </p>
<div style="display: flex;justify-content: flex-end;position: absolute;right: 15px;bottom: 10px;" > <div style="display: flex;justify-content: flex-end;position: absolute;right: 15px;bottom: 10px;" >
<el-button link type="primary" icon="Bottom" @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="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-button link type="primary" icon="Delete" @click.stop="handleDelete(item)">删除</el-button>
<!-- <el-dropdown trigger="click" @command.stop="handleSetSize"> <!-- <el-dropdown trigger="click" @command.stop="handleSetSize">
<el-button link type="primary"> <el-button link type="primary">
......
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