Commit 7ac8f091 authored by 胡占生's avatar 胡占生 🇨🇳

fix: 整体页面布局样式调衡,logo替换,bug修复

parent dd911c9b
public/favicon.ico

5.53 KB | W: | H:

public/favicon.ico

150 KB | W: | H:

public/favicon.ico
public/favicon.ico
public/favicon.ico
public/favicon.ico
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/side.png

133 KB | W: | H:

src/assets/images/side.png

125 KB | W: | H:

src/assets/images/side.png
src/assets/images/side.png
src/assets/images/side.png
src/assets/images/side.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/top.png

95.3 KB | W: | H:

src/assets/images/top.png

99.4 KB | W: | H:

src/assets/images/top.png
src/assets/images/top.png
src/assets/images/top.png
src/assets/images/top.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/logo/logo.png

5.53 KB | W: | H:

src/assets/logo/logo.png

150 KB | W: | H:

src/assets/logo/logo.png
src/assets/logo/logo.png
src/assets/logo/logo.png
src/assets/logo/logo.png
  • 2-up
  • Swipe
  • Onion skin
<template> <template>
<div class="sidebar-logo-container" :class="{ 'collapse': collapse }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"> <div class="sidebar-logo-container" :class="{ 'collapse': collapse }" :style="{ backgroundColor: '#198FFF'}">
<transition name="sidebarLogoFade"> <transition name="sidebarLogoFade">
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"> <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo" /> <img v-if="logo" :src="logo" class="sidebar-logo" :style="{ height:'16px' }" />
<h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1> <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1>
</router-link> </router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/"> <router-link v-else key="expand" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo" /> <img v-if="logo" :src="logo" class="sidebar-logo" :style="{ height:'25px' }" />
<h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1> <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1>
</router-link> </router-link>
</transition> </transition>
...@@ -54,10 +54,9 @@ const sideTheme = computed(() => settingsStore.sideTheme); ...@@ -54,10 +54,9 @@ const sideTheme = computed(() => settingsStore.sideTheme);
width: 100%; width: 100%;
& .sidebar-logo { & .sidebar-logo {
width: 32px; height: 25px;
height: 32px;
vertical-align: middle; vertical-align: middle;
margin-right: 12px; margin-right: 3px;
} }
& .sidebar-title { & .sidebar-title {
......
...@@ -769,7 +769,6 @@ function addCaseFile(){ ...@@ -769,7 +769,6 @@ function addCaseFile(){
}) })
}); });
console.log("🚀 ~ addCaseFile ~ params:", params)
addListAlgorithmCase(params).then(res=>{ addListAlgorithmCase(params).then(res=>{
console.log(res) console.log(res)
}) })
......
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
<el-card style="position: relative;"> <el-card style="position: relative;">
<div class="upload-box"> <div class="upload-box">
<div style="height: 130px;width: 100%; margin: 5px; overflow: hidden;cursor: pointer;" <div style="height: 130px;width: 100%; margin: 5px; overflow: hidden;cursor: pointer;"
v-for="item in invalidList" :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="">
...@@ -80,7 +80,10 @@ ...@@ -80,7 +80,10 @@
<img src="@/assets/images/default.png" height="350px"/> <img src="@/assets/images/default.png" height="350px"/>
</div> </div>
<div class="img-box" v-else> <div class="img-box" v-else>
<ImagePreview :src="nowImg" height="100%"/> <ImagePreview v-if="getFileType(nowImg)=='0'" :src="nowImg" height="100%"/>
<video width="100%" v-else controls class="drawImg">
<source :src="'http://192.168.3.82'+nowImg" type="video/mp4" />
</video>
</div> </div>
<el-button type="primary" plain>开始识别</el-button> <el-button type="primary" plain>开始识别</el-button>
</el-card> </el-card>
...@@ -91,7 +94,10 @@ ...@@ -91,7 +94,10 @@
<img src="@/assets/images/default.png" height="350px"/> <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 v-if="getFileType(outFilePath)=='0'" :src="outFilePath" height="100%"/>
<video width="100%" v-else controls class="drawImg">
<source :src="'http://192.168.3.82'+outFilePath" type="video/mp4" />
</video>
</div> </div>
<div style="display: flex;justify-content: space-between;"> <div style="display: flex;justify-content: space-between;">
<el-button type="primary" plain>重置区域</el-button> <el-button type="primary" plain>重置区域</el-button>
...@@ -103,7 +109,7 @@ ...@@ -103,7 +109,7 @@
<span>算法边界</span> <span>算法边界</span>
</div> </div>
<div style="background-color: #E6F3FF;display: grid;grid-template-columns: 1fr 1fr; gap: 16px;padding: 16px;"> <div style="background-color: #E6F3FF;display: grid;grid-template-columns: 1fr 1fr; gap: 16px;padding: 16px;">
<el-card> <el-card style="position: relative;">
<div class="text-boundary"> <div class="text-boundary">
有效的拍摄方式: 有效的拍摄方式:
<div v-for="(item,index) in effectiveList" :key="item.id" style="text-indent: 10px;">{{index+1}}、{{item.remark}}</div> <div v-for="(item,index) in effectiveList" :key="item.id" style="text-indent: 10px;">{{index+1}}、{{item.remark}}</div>
...@@ -116,8 +122,9 @@ ...@@ -116,8 +122,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/success.png" alt="">
</el-card> </el-card>
<el-card > <el-card style="position: relative;">
<div class="text-boundary"> <div class="text-boundary">
无效的拍摄方式: 无效的拍摄方式:
<div v-for="(item,index) in invalidList" :key="item.id" style="text-indent: 10px;">{{index+1}}、{{item.remark}}</div> <div v-for="(item,index) in invalidList" :key="item.id" style="text-indent: 10px;">{{index+1}}、{{item.remark}}</div>
...@@ -130,6 +137,7 @@ ...@@ -130,6 +137,7 @@
<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="">
</el-card> </el-card>
</div> </div>
</el-card> </el-card>
...@@ -141,7 +149,7 @@ ...@@ -141,7 +149,7 @@
<script setup name="Index"> <script setup name="Index">
import { ArrowDown } from '@element-plus/icons-vue' import { ArrowDown } from '@element-plus/icons-vue'
import { Search } from '@element-plus/icons-vue' import { Search } from '@element-plus/icons-vue'
import { detailAlg} from "@/api/algorithmList/index.js"; import { detailAlg ,listCase} from "@/api/algorithmList/index.js";
import { listScene,detailScene } from "@/api/algorithmList/scene.js"; import { listScene,detailScene } from "@/api/algorithmList/scene.js";
import { listBoundary, detailBoundary } from "@/api/algorithmList/boundary.js"; import { listBoundary, detailBoundary } from "@/api/algorithmList/boundary.js";
import { useWebSockets} from './websockt.js'; // 注意文件路径可能需要调整 import { useWebSockets} from './websockt.js'; // 注意文件路径可能需要调整
...@@ -159,6 +167,7 @@ const backVideo = ref({}) ...@@ -159,6 +167,7 @@ const backVideo = ref({})
const applicationList = ref([]) const applicationList = ref([])
const effectiveList = ref([]) const effectiveList = ref([])
const invalidList = ref([]) const invalidList = ref([])
const imgVideoData = ref([])
const nowText=ref('算法详情') const nowText=ref('算法详情')
const baseUrl = 'http://192.168.3.82' const baseUrl = 'http://192.168.3.82'
const data = reactive({ const data = reactive({
...@@ -188,6 +197,7 @@ function getDetials(){ ...@@ -188,6 +197,7 @@ function getDetials(){
backVideo.value = judgeImgUrl(res.data.algorithmBannerVideo) backVideo.value = judgeImgUrl(res.data.algorithmBannerVideo)
videoLoading.value=true videoLoading.value=true
}) })
getListCase()
listScene({ algorithmId: roleId}).then(res => { listScene({ algorithmId: roleId}).then(res => {
applicationList.value = res.rows applicationList.value = res.rows
}) })
...@@ -196,8 +206,16 @@ function getDetials(){ ...@@ -196,8 +206,16 @@ function getDetials(){
invalidList.value = res.rows.filter(item => item.caseType === '1') invalidList.value = res.rows.filter(item => item.caseType === '1')
}) })
} }
/** 查询案例文件列表 */
function getListCase() {
listCase({ algorithmId: roleId,caseType:2}).then(response => {
imgVideoData.value = response.rows
});
}
function getImgObj(obj){ function getImgObj(obj){
nowImg.value = obj.url nowImg.value = obj.fileName
handeUpload(obj) handeUpload(obj)
} }
function judgeImgUrl(item){ function judgeImgUrl(item){
...@@ -370,5 +388,12 @@ getDetials() ...@@ -370,5 +388,12 @@ getDetials()
width: 150px; width: 150px;
height: 150px; height: 150px;
} }
.top-tip{
position: absolute;
width: 35px;
top: 5px;
right: 5px;
}
</style> </style>
...@@ -21,6 +21,7 @@ export function useWebSockets() { ...@@ -21,6 +21,7 @@ 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
client.value.sendMessage({ client.value.sendMessage({
sessionId: e, sessionId: e,
...@@ -33,11 +34,11 @@ export function useWebSockets() { ...@@ -33,11 +34,11 @@ export function useWebSockets() {
}) })
} 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);
console.log("🚀 ~ websocketMessage ~ queue:", queue) outFilePath.value = result.data.outFilePath;
if (!queue.length) { if (!queue.length) {
proxy.$modal.msgWarning("未检测到预警"); proxy.$modal.msgWarning("未检测到预警");
resultStr.value = '未检测到预警'; resultStr.value = '未检测到预警';
outFilePath.value='' // outFilePath.value=''
}else { }else {
outFilePath.value = result.data.outFilePath; outFilePath.value = result.data.outFilePath;
proxy.$modal.msgSuccess("算法处理成功"); proxy.$modal.msgSuccess("算法处理成功");
......
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