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