Skip to content

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

fix: 算法列表编辑，在线体验案例图片/视频优化修复，视频预览，实时预警对接

parent 96f0dca9
Hide whitespace changes
Inline Side-by-side
Showing with 231 additions and 115 deletions
src/api/algorithmList/index.js
View file @ 9bc5f65a
......@@ -30,6 +30,16 @@ export function listAlg(query) {
})
}
// 查询算法文件列表
export function listAlgFile(query) {
return request({
url: '/yunshou/aiAlgorithmFile/list',
method: 'get',
params: query
})
}
// 查询算法列表x详情
export function detailAlg(id) {
return request({
......
src/components/ImgVideoUpload/index.vue
View file @ 9bc5f65a
<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 v-if="isImgLayout">
<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="item.url"
></el-image>
<video
class="media-file video-file"
v-if="getFileType(item.name)=='video'"
:src="item.url"
controls
></video>
<div class="upload_operate">
<el-icon style="cursor: pointer;" @click="handlePictureCardPreview(item)"><ZoomIn /></el-icon>
<el-icon @click="handleDelete(item)" style="margin-left: 1rem; cursor: pointer;"><DeleteFilled /></el-icon>
</div>
</div>
</div>
<el-upload
multiple
:action="uploadImgUrl"
list-type="picture-card"
:list-type="isImgLayout?'picture-card':''"
:on-success="handleUploadSuccess"
:before-upload="handleBeforeUpload"
:limit="limit"
......@@ -38,7 +36,10 @@
:on-preview="handlePictureCardPreview"
:class="{ hide: fileList.length >= limit }"
>
<el-icon 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-icon class="el-icon--left"><Upload /></el-icon>
</el-button>
</el-upload>
<!-- 上传提示 -->
<div class="el-upload__tip" v-if="showTip">
......@@ -56,9 +57,16 @@
v-model="dialogVisible"
title="预览"
width="800px"
style="text-align: center;"
append-to-body
>
<video
v-if="getFileType(dialogImageUrl)=='video'"
:src="dialogImageUrl"
controls
></video>
<img
v-else
:src="dialogImageUrl"
style="display: block; max-width: 100%; margin: 0 auto"
/>
......@@ -90,6 +98,11 @@ const props = defineProps({
isShowTip: {
type: Boolean,
default: true
},
// 是否按照 照片墙布局
isImgLayout: {
type: Boolean,
default: true
},
// 是否显示提示
defaultUrl: {
......@@ -124,7 +137,6 @@ watch(() => props.modelValue, val => {
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 };
}
......@@ -207,7 +219,6 @@ function uploadedSuccessfully() {
uploadList.value = [];
number.value = 0;
emit("update:modelValue", listToString(fileList.value));
console.log("🚀 ~ handleDelete ~ listToString(fileList.value):", listToString(fileList.value))
proxy.$modal.closeLoading();
}
}
......@@ -237,10 +248,9 @@ function listToString(list, separator) {
}
// 判断当前文件类型
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];
let fileType = fileName.split(".").pop();
if (videoType.includes(fileType)) {
return "video";
......@@ -260,10 +270,10 @@ function getFileType(fileName) {
.media-list {
position: relative;
}
.media-list:hover .delete-file,
.media-list:hover .zoom-in-file {
display: inline-block;
}
// .media-list:hover .delete-file,
// .media-list:hover .zoom-in-file {
// display: inline-block;
// }
.media-file {
width: 148px;
height: 148px;
......@@ -277,28 +287,30 @@ function getFileType(fileName) {
}
// .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;
}
.upload_operate{
align-items: center;
background-color: var(--el-overlay-color-lighter);
color: #fff;
cursor: default;
display: inline-flex;
font-size: 20px;
height: 148px;
width: 148px;
justify-content: center;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: opacity var(--el-transition-duration);
}
.upload_operate:hover{
opacity: 1;
}
// .el-upload--picture-card 控制加号部分
:deep(.hide .el-upload--picture-card) {
......
src/views/algorithmControl/components/form.vue
View file @ 9bc5f65a
......@@ -92,7 +92,7 @@
</el-col>
</el-row>
<el-card class="left-list">
<el-table :data="postList" >
<el-table :data="wrapList" >
<el-table-column label="文件名称" align="center" prop="postId" />
<el-table-column label="状态" align="center" prop="postCode" />
<el-table-column label="MD5核对结果" align="center" prop="postName" />
......@@ -162,14 +162,14 @@
</el-form-item>
</el-col>
</el-row>
<!-- <el-row :gutter="10" class="mb8" style="justify-content: space-between;">
<el-row :gutter="10" class="mb8" style="justify-content: space-between;">
<el-col :span="1.5">
<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
<span>算法维护</span>
</div>
</el-col>
<el-col :span="6.8" style="display: flex;">
<el-button
<!-- <el-button
type="primary"
plain
icon="Search"
......@@ -180,7 +180,7 @@
plain
icon="Refresh"
@click="handleUpdate"
>版本更新</el-button>
>版本更新</el-button> -->
<el-button
type="success"
plain
......@@ -190,11 +190,22 @@
</el-col>
</el-row>
<el-card class="left-list">
<el-table :data="postList" >
<el-table-column label="文件名称" align="center" prop="postId" />
<el-table-column label="状态" align="center" prop="postCode" />
<el-table-column label="MD5核对结果" align="center" prop="postName" />
<el-table-column label="文件大小" align="center" prop="postSort" />
<el-table :data="wrapList" >
<el-table-column type="expand">
<template #default="props">
<div m="4">
<p m="t-0 b-2">State: {{props + 'props.row.state' }}</p>
<p m="t-0 b-2">City: {{ 'props.row.city' }}</p>
<p m="t-0 b-2">Address: {{ 'props.row.address' }}</p>
<p m="t-0 b-2">Zip: {{ 'props.row.zip' }}</p>
<h3>Family</h3>
</div>
</template>
</el-table-column>
<el-table-column label="文件名称" align="center" prop="algorithmName" />
<el-table-column label="状态" align="center" prop="algorithmStatus" />
<el-table-column label="MD5核对结果" align="center" prop="md5Result" />
<el-table-column label="文件大小" align="center" prop="fileSize" />
<el-table-column label="进度" align="center" prop="postSort" />
<el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
<template #default="scope">
......@@ -203,7 +214,7 @@
</template>
</el-table-column>
</el-table>
</el-card> -->
</el-card>
</el-tab-pane>
<el-tab-pane label="算法详情" name="算法详情">
<el-row :gutter="10" class="mb8">
......@@ -214,7 +225,7 @@
<el-row :gutter="10" class="mb8">
<el-col :span="12">
<el-form-item label-width="130px" label="算法Banner" prop="algorithmBanner">
<ImageUpload :modelValue="form.algorithmBanner" :limit='1' :fileSize="5" @update:modelValue="getImageUrl"/>
<ImageUpload :modelValue="form.algorithmBanner" :limit='1' :fileSize="5" @update:modelValue="getAlgorithmBanner"/>
</el-form-item>
</el-col>
</el-row>
......@@ -252,7 +263,7 @@
<el-row :gutter="10" class="mb8">
<el-col :span="12">
<el-form-item label-width="130px" label="banner上算法视频" prop="algorithmBannerVideo">
<ImageUpload :modelValue="form.algorithmBannerVideo" :limit='1' :fileSize="30" @update:modelValue="getImageUrl"/>
<ImgVideoUpload :modelValue="form.algorithmBannerVideo" :fileType="['rmvb', 'avi', 'mp4']" :limit='1' :fileSize="100" :isShowTip="true" @update:modelValue="getAlgorithmBannerVideo"/>
</el-form-item>
</el-col>
</el-row>
......@@ -264,7 +275,7 @@
<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"/>
<ImgVideoUpload :modelValue="form.algorithmBannerVideo" :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>
......@@ -443,12 +454,11 @@
</template>
<script setup>
import { addAlg, updateAlg , detailAlg} from "@/api/algorithmList/index.js";
import { addAlg, updateAlg , detailAlg , listAlgFile} from "@/api/algorithmList/index.js";
import { listScene, detailScene , addScene, updateScene, deleteScene} from "@/api/algorithmList/scene.js";
import { listBoundary, detailBoundary , addBoundary, updateBoundary, deleteBoundary} from "@/api/algorithmList/boundary.js";
const { proxy } = getCurrentInstance();
const { algorithm_scen, algorithm_case } = proxy.useDict("algorithm_scen", "algorithm_case");
console.log("🚀 ~ algorithm_case:", algorithm_case)
const emit = defineEmits();
const open = ref(false);
const openScene = ref(false);
......@@ -458,7 +468,15 @@ const title = ref("");
const titleScene = ref("");
const titleBoundary = ref("");
const activeName = ref("基础信息");
const postList = ref([]);
const wrapList = ref([
{
algorithmId:'1',
algorithmStatus:'1',
fileSize:'500M',
md5Result:'一致',
algorithmName:'火焰算法',
}
]);
const sceneList = ref([]);
const boundaryList = ref([]);
const ids = ref([]);
......@@ -486,6 +504,12 @@ const { queryParams, form, formScene,formBoundary, rules } = toRefs(data);
function getImageUrl(url){
form.value.cardImg=url
}
function getAlgorithmBannerVideo(url){
form.value.algorithmBannerVideo=url
}
function getAlgorithmBanner(url){
form.value.algorithmBanner=url
}
function getBoundaryImageUrl(url){
formBoundary.value.caseFile=url
}
......@@ -693,7 +717,7 @@ function submitBoundaryRefForm() {
proxy.$modal.msgSuccess("新增成功");
openBoundary.value = false;
getBoundaryList()
});
});
}
}
});
......
src/views/algorithmControl/index.vue
View file @ 9bc5f65a
......@@ -80,11 +80,11 @@
</el-row>
<el-table v-loading="loading" :data="algList" @selection-change="handleSelectionChange">
<el-table-column label="算法名称" width="100" align="center" prop="algorithmName" />
<el-table-column label="算法名称" width="150" align="center" prop="algorithmName" :show-overflow-tooltip="true" />
<el-table-column label="算法英文" align="center" prop="algorithmEnglish" :show-overflow-tooltip="true" />
<el-table-column label="硬件平台" align="center" prop="algorithmPlat">
<el-table-column label="硬件平台" align="center" width="100" prop="algorithmPlat">
</el-table-column>
<el-table-column label="算法场景" align="center" prop="applicationScenarios" :show-overflow-tooltip="true" />
<el-table-column label="算法场景" align="center" width="100" prop="applicationScenarios" :show-overflow-tooltip="true" />
<el-table-column label="卡片文案" align="center" prop="cardCopywriting" :show-overflow-tooltip="true" />
<el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
<template #default="scope">
......@@ -155,7 +155,7 @@
const { queryParams, form, rules } = toRefs(data);
/** 查询定时任务列表 */
/** 任务列表 */
function getList() {
loading.value = true;
listAlg(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
......
src/views/algorithmList/components/details.vue
View file @ 9bc5f65a
......@@ -13,14 +13,19 @@
<el-row :gutter="10">
<el-col :xs="24" :sm="24" :md="24" :lg="24">
<el-card class="right-list">
<div class="backcolor" style="height: 350px;width: 100%; padding: 10px;">
<div class="backcolor" v-if="videoLoading" :style="backImg" >
<div style="width: 500px;">
<h2 style="font-weight: 700;font-style: normal;font-size: 28px;color: #FFFFFF;">{{form.algorithmName}}</h2>
<p style="font-weight: 700;font-style: normal;font-size: 17px;color: rgba(255, 255, 255, 0.6);line-height: 21px;">
{{form.cardCopywriting}}
</p>
</div>
<ImagePreview style="width: 400px;height: 225px;" :src="form.cardImg"/>
</div>
<div style="width: 400px;height: 225px;" >
<video v-if="videoLoading" controls ref="videoEle" class="drawImg">
<source :src="backVideo" type="video/mp4" />
</video>
</div>
<!-- <ImagePreview :src="form.cardImg"/> -->
</div>
......@@ -45,34 +50,50 @@
<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
<span>算法试用</span>
</div>
<div style="background-color: #E6F3FF;display: grid;grid-template-columns: 1fr 2fr 2fr; gap: 16px;padding: 16px;">
<el-card >
<div style="background-color: #E6F3FF;display: grid;grid-template-columns: 1fr 2fr 2fr; gap: 16px;padding: 16px;min-height: 650px;">
<el-card style="position: relative;">
<div class="upload-box">
<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 style="height: 130px;width: 100%; margin: 5px; overflow: hidden;cursor: pointer;"
v-for="item in invalidList" :key="item.id"
@click="handBuiltImg(item.caseFile)"
>
<img width="100%" :src="'http://192.168.4.206'+item.caseFile" alt="">
</div>
ww
<ImgVideoUpload
style="position: absolute;bottom: 5px;left: 26%;"
:modelValue="uploadUrl"
:fileType="['png', 'jpg', 'mp4']"
:isImgLayout="false"
:limit='5' :fileSize="20"
:isShowTip="false"
@update:modelObj="getImgObj"
/>
<!-- <ImageUpload :limit='1' :fileSize="5" :isShowTip="false" @update:modelObj="getImgObj"/> -->
</div>
</el-card>
<el-card >
原始数据
<div class="img-box" v-if="nowImg.length==0">
<img src="@/assets/images/default.png" height="100%"/>
<img src="@/assets/images/default.png" height="350px"/>
</div>
<div class="img-box" v-else>
<img :src="nowImg" height="100%"/>
<ImagePreview :src="nowImg" height="100%"/>
</div>
<el-button type="primary" plain>开始识别</el-button>
</el-card>
<el-card >
算法识别结果
<div class="img-box" v-if="outFilePath.length==0">
<div>{{ resultStr }}</div>
<img src="@/assets/images/default.png" height="100%"/>
<img src="@/assets/images/default.png" height="350px"/>
</div>
<div class="img-box" v-else>
<ImagePreview :src="outFilePath" height="100%"/>
</div>
<div style="display: flex;justify-content: space-between;">
<el-button type="primary" plain>重置区域</el-button>
<el-button type="primary" plain>下载识别视频</el-button>
</div>
</el-card>
</div>
<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
......@@ -88,8 +109,8 @@
<img src="@/assets/images/default.png" height="100%"/>
</div>
<div class="img-box gird-layout" v-else>
<div v-for="item in effectiveList" :key="item.id">
<ImagePreview style="width: 400px;height: 225px;" :src="item.caseFile"/>
<div class="img-item" v-for="item in effectiveList" :key="item.id">
<ImagePreview style="height: 100%;" :src="item.caseFile"/>
</div>
</div>
</el-card>
......@@ -102,8 +123,8 @@
<img src="@/assets/images/default.png" height="100%"/>
</div>
<div class="img-box gird-layout" v-else >
<div v-for="item in invalidList" :key="item.id">
<ImagePreview style="width: 400px;height: 225px;" :src="item.caseFile"/>
<div class="img-item" v-for="item in invalidList" :key="item.id">
<ImagePreview style="height: 100%;" :src="item.caseFile"/>
</div>
</div>
</el-card>
......@@ -128,10 +149,15 @@ const nowImg=ref('')
const { roleId } =route.params
const { proxy } = getCurrentInstance();
const algFormRef = ref(null)
const uploadUrl = ref('')
const videoLoading = ref(false)
const backImg = ref({})
const backVideo = ref({})
const applicationList = ref([])
const effectiveList = ref([])
const invalidList = ref([])
const nowText=ref('算法详情')
const baseUrl = 'http://192.168.4.206'
const data = reactive({
form: {},
queryParams: {
......@@ -148,9 +174,16 @@ const data = reactive({
const { queryParams, form, rules } = toRefs(data);
function getDetials(){
videoLoading.value=false
detailAlg(roleId).then(res=>{
console.log(res)
form.value=res.data
const banner= new URL(judgeImgUrl(res.data.algorithmBanner))
backImg.value = {
backgroundImage: `url(${banner})`,
}
backVideo.value = judgeImgUrl(res.data.algorithmBannerVideo)
videoLoading.value=true
})
listScene({ algorithmId: roleId}).then(res => {
applicationList.value = res.rows
......@@ -164,7 +197,21 @@ function getImgObj(obj){
nowImg.value = obj.url
handeUpload(obj)
}
function judgeImgUrl(item){
if(item&&item!=null){
if (item.indexOf(baseUrl) === -1) {
return baseUrl + item
} else {
return item
}
}else{
return 'http://192.168.4.206/profile/upload/2024/08/28/banner%20background_20240828095250A003.png'
}
}
function handBuiltImg(item){
nowImg.value = item
}
getDetials()
</script>
......@@ -173,13 +220,14 @@ getDetials()
.upload-box{
// width: 500px;
height: 365px;
border-radius: 5px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.img-box{
// width: 500px;
height: 365px;
min-height: 365px;
// border: 1px solid #d8dce5;
border-radius: 5px;
text-align: center;
......@@ -248,8 +296,12 @@ getDetials()
justify-content: space-between;
}
.backcolor{
height: 350px;
width: 100%;
padding: 10px;
border-radius: 10px;
background-image: linear-gradient(to right, #6f86d6 0%, #48c6ef 100%);
background-size:100% 350px ;
display: flex;
align-items: center;
justify-content: space-around;
......@@ -292,9 +344,14 @@ getDetials()
}
.gird-layout{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 16px;
padding: 16px;
}
.img-item{
border: 1px solid #279bda;
width: 150px;
height: 150px;
}
</style>
src/views/deviceControl/index.vue
View file @ 9bc5f65a
......@@ -111,8 +111,8 @@
</el-table-column>
<el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="禁用" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['monitor:job:edit']"></el-button>
<el-tooltip :content="scope.row.isOpen === '0'? '禁用' : '启用'" placement="top">
<el-button link type="primary" :icon="scope.row.isOpen === '0'? 'Close' : 'Check'" @click="handleStatusChange(scope.row)" v-hasPermi="['monitor:job:edit']"></el-button>
</el-tooltip>
<el-tooltip content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['monitor:job:edit']"></el-button>
......@@ -179,7 +179,7 @@
</template>
<script setup name="Job">
import { listDevice, deleteDevice, addDevice, updateDevice, detailDevice } from "@/api/yunshou/device";
import { listDevice, deleteDevice, addDevice, updateDevice, detailDevice,updateStatusDevice } from "@/api/yunshou/device";
const router = useRouter();
const { proxy } = getCurrentInstance();
const { sys_job_group, sys_job_status } = proxy.useDict("sys_job_group", "sys_job_status");
......@@ -269,20 +269,15 @@
// 任务状态修改
function handleStatusChange(row) {
let text = row.status === "0" ? "启用" : "停用";
proxy.$modal.confirm('确认要"' + text + '""' + row.jobName + '"任务吗?').then(function () {
return changeJobStatus(row.id, row.status);
let text = row.isOpen === "0" ? "禁用" : "启用";
proxy.$modal.confirm('确认要"' + text + '""' + row.deviceName + '"设备吗?').then(function () {
return updateStatusDevice({id:row.id,status:row.status});
}).then(() => {
proxy.$modal.msgSuccess(text + "成功");
}).catch(function () {
row.status = row.status === "0" ? "1" : "0";
});
}
/** 新增按钮操作 */
function handleAdd() {
......
src/views/videoControl/pointControl/components/drawPoint.vue
View file @ 9bc5f65a
......@@ -176,15 +176,15 @@
</el-col>
</el-row>
</el-dialog>
<el-dialog title="算法配置" v-model="aiAlgorithm.visible.value" width="30%">
<el-dialog :title="unref(aiAlgorithm.form).algorithmName" v-model="aiAlgorithm.visible.value" width="50%">
<el-form
ref="algorithmManage.formRef"
:model="aiAlgorithm.form"
label-width="80px"
label-width="160px"
>
<el-form-item label="算法名称" prop="algorithmName">
<!-- <el-form-item label="算法名称" prop="algorithmName">
<el-input v-model="unref(aiAlgorithm.form).algorithmName" readonly />
</el-form-item>
</el-form-item> -->
<el-form-item label="告警间隔" prop="alarmInterval">
<el-input
placeholder="单位/秒"
......@@ -203,6 +203,18 @@
<el-form-item label="标签阈值" prop="labelThreshold">
<el-input v-model="unref(aiAlgorithm.form).labelThreshold" />
</el-form-item>
<el-table :data="wrapList" >
<el-table-column label="识别标签" align="center" prop="md5Result" />
<el-table-column label="标签阈值" align="center" prop="fileSize" />
<el-table-column label="状态" align="center" prop="postSort" />
<el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']">修改</el-button>
<!-- <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:post:remove']">删除</el-button> -->
</template>
</el-table-column>
</el-table>
<div class="right">
<el-button type="primary" @click="sureConfig">确认</el-button>
<el-button type="primary" plain @click="aiAlgorithm.toClose"
......
src/views/videoControl/videoPreview/index.vue
View file @ 9bc5f65a
......@@ -79,14 +79,14 @@
shadow="hover"
>
<template v-slot:default>
<img src="@/assets/images/default.png" style="width: 100%" />
<ImagePreview :src="item.alarmImg" style="width: 100%" />
<el-form :model="form" label-width="100px">
<el-form-item label="预警设备：">{{ form.title }} </el-form-item>
<!-- <el-form-item label="预警设备：">{{ form.title }} </el-form-item>
<el-form-item label="登录信息：">{{ form.title }}</el-form-item>
<el-form-item label="预警区域：">{{ form.title }}</el-form-item>
<el-form-item label="预警类型：">{{ form.title }}</el-form-item>
<el-form-item label="预警时间：">{{ form.title }}</el-form-item>
<el-form-item label="预警等级："><el-tag :type="'danger'" effect="dark">{{ '一级预警'}} </el-tag></el-form-item>
<el-form-item label="预警区域：">{{ form.title }}</el-form-item> -->
<el-form-item label="预警类型：">{{ item.alarmType }}</el-form-item>
<el-form-item label="预警时间：">{{ parseTime(item.alarmTime) }}</el-form-item>
<el-form-item label="预警等级："><el-tag :type="'danger'" effect="dark">{{ item.alarmLevelId+'级预警'}} </el-tag></el-form-item>
</el-form>
</template>
</el-card>
......@@ -103,13 +103,14 @@ import { ArrowDown } from "@element-plus/icons-vue";
import { Search } from "@element-plus/icons-vue";
import '@/utils/jsmpeg.min'
import { listAiRegionManage } from "@/api/videoControl/videoPreview";
import { listAlarm } from "@/api/alarmControl/index.js";
import { onMounted, reactive, ref, } from "vue";
const { proxy } = getCurrentInstance();
const algFormRef = ref(null);
const nowText = ref("视频预览");
const deptName = ref("");
const deptOptions = ref(undefined);
const algorithmList = reactive([
const algorithmList = ref([
{
name: "我的算法",
value: 1,
......@@ -183,8 +184,13 @@ function getTreeData() {
deptOptions.value=res.data
})
}
function getWaringData() {
listAlarm().then((res) => {
algorithmList.value=res.rows
})
}
getTreeData()
getWaringData()
function getVideos(){
let canvas = document.getElementById('video')
let url = 'rtsp://192.168.20.211:554/av0_0'
......@@ -275,7 +281,7 @@ function handleDelete(row) {
min-height: 700px;
.alg-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
grid-template-columns: repeat(minmax(180px, 1fr));
gap: 16px;
.el-card {
border: 1px soild #ff6700;
......
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