Skip to content

A
ai-yunshou-vue
Commit 4c844266 authored by wp song's avatar wp song
Browse files
Options

点位管理

parents 343451af 026bd786
Hide whitespace changes
Inline Side-by-side
Showing with 139 additions and 146 deletions
src/App.vue
View file @ 4c844266
......@@ -5,11 +5,16 @@
<script setup>
import useSettingsStore from '@/store/modules/settings'
import { handleThemeStyle } from '@/utils/theme'
const screenHeight = ref(window.innerHeight-145);
onMounted(() => {
nextTick(() => {
// 初始化主题样式
handleThemeStyle(useSettingsStore().theme)
window.addEventListener('resize', handleResize);
})
})
function handleResize() {
screenHeight.value = window.innerHeight-145;
}
provide('globalScreenHeight', screenHeight);
</script>
src/api/videoControl/videoPreview.js
View file @ 4c844266
......@@ -9,6 +9,23 @@ export function listAiRegionManage(query) {
})
}
// 获取左侧树
export function videoTreeListManage(query) {
return request({
url: '/yunshou/aiRegionManage/videoTreeList',
method: 'get',
params: query
})
}
// 获取根据点位ID获取设备
export function idDevice(id) {
return request({
url: `/yunshou/aiRegionManage/getVideoInfoById/${id}`,
method: 'get',
})
}
// 查询设备列表x详情
export function detailDevice(id) {
return request({
......@@ -62,3 +79,4 @@ export function exportDevice(data) {
data: data
})
}
src/components/Breadcrumb/index.vue
View file @ 4c844266
......@@ -2,8 +2,8 @@
<el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
<span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
<span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect" >{{ item.meta.title }}</span>
<a v-else @click.prevent="handleLink(item)" style="color: #fff;">{{ item.meta.title }}</a>
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
......@@ -52,14 +52,17 @@ getBreadcrumb();
</script>
<style lang='scss' scoped>
.el-breadcrumb__separator{
color: #fff;
}
.app-breadcrumb.el-breadcrumb {
display: inline-block;
font-size: 14px;
line-height: 50px;
margin-left: 8px;
color: #fff;
.no-redirect {
color: #97a8be;
color: #fff;
cursor: text;
}
}
......
src/components/Hamburger/index.vue
View file @ 4c844266
......@@ -3,12 +3,13 @@
<svg
:class="{'is-active':isActive}"
class="hamburger"
style="color: #fff;"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
>
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
<path id="mySvg" d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
</svg>
</div>
</template>
......@@ -25,6 +26,13 @@ const emit = defineEmits()
const toggleClick = () => {
emit('toggleClick');
}
onMounted(() => {
const element = document.getElementById('mySvg');
element.style.fill = '#fff';
})
</script>
<style scoped>
......
src/components/ImageUpload/index.vue
View file @ 4c844266
......@@ -103,7 +103,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 };
}
......
src/components/ImgVideoUpload/index.vue
View file @ 4c844266
......@@ -33,6 +33,7 @@
:before-remove="handleDelete"
:show-file-list="false"
:headers="headers"
:file-list="fileList"
:on-preview="handlePictureCardPreview"
:class="{ hide: fileList.length >= limit }"
>
......@@ -61,6 +62,7 @@
append-to-body
>
<video
width="100%"
v-if="getFileType(dialogImageUrl)=='video'"
:src="dialogImageUrl"
controls
......@@ -151,6 +153,7 @@ watch(() => props.modelValue, val => {
// 上传前loading加载
function handleBeforeUpload(file) {
console.log("🚀 ~ handleBeforeUpload ~ file:", file)
let isImg = false;
if (props.fileType.length) {
let fileExtension = "";
......
src/layout/components/Navbar.vue
View file @ 4c844266
......@@ -12,15 +12,15 @@
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
</el-tooltip> -->
<el-tooltip content="文档地址" effect="dark" placement="bottom">
<!-- <el-tooltip content="文档地址" effect="dark" placement="bottom">
<ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
</el-tooltip>
</el-tooltip> -->
<screenfull id="screenfull" class="right-menu-item hover-effect" />
<el-tooltip content="布局大小" effect="dark" placement="bottom">
<!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip>
</el-tooltip> -->
</template>
<div class="avatar-container">
<el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
......
src/router/index.js
View file @ 4c844266
......@@ -57,19 +57,19 @@ export const constantRoutes = [
component: () => import('@/views/error/401'),
hidden: true
},
{
path: '',
component: Layout,
redirect: '/index',
children: [
{
path: '/index',
component: () => import('@/views/index'),
name: 'Index',
meta: { title: '工作台', icon: 'dashboard', affix: true }
}
]
},
// {
// path: '',
// component: Layout,
// redirect: '/index',
// children: [
// {
// path: '/index',
// component: () => import('@/views/index'),
// name: 'Index',
// meta: { title: '工作台', icon: 'dashboard', affix: true }
// }
// ]
// },
{
path: '/user',
component: Layout,
......
src/views/alarmControl/index.vue
View file @ 4c844266
......@@ -3,7 +3,7 @@
<TabTitle :text="nowText" />
<el-row :gutter="10">
<el-col :xs="24" :sm="24" :md="24" :lg="24">
<el-scrollbar height="730px">
<el-scrollbar :height="globalScreenHeight+'px'">
<el-card class="right-list">
<template v-slot:header>
<el-form :model="queryParams" ref="queryRef" :inline="true" >
......@@ -113,6 +113,7 @@
import alarmDetial from './components/form.vue'
import { ArrowDown } from '@element-plus/icons-vue'
import { Search } from '@element-plus/icons-vue'
const globalScreenHeight = inject('globalScreenHeight');
const router = useRouter();
const alarmDetialRef = ref(null)
const nowText=ref('告警管理')
......
src/views/algorithmControl/components/form.vue
View file @ 4c844266
<template>
<div>
<el-dialog
v-model="open"
:title="title"
......@@ -274,7 +275,7 @@
</el-row>
<el-row :gutter="10" class="mb8">
<el-col :span="24">
<el-form-item label-width="130px" label="在线体验案例图片/视频" prop="algorithmBannerVideo">
<el-form-item label-width="130px" label="在线体验案例图片/视频" prop="imgVideoData">
<ImgVideoUpload
:modelValue="imgVideoData"
:fileType="['png', 'jpg', 'mp4']"
......@@ -457,6 +458,8 @@
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
......@@ -512,6 +515,7 @@ function getImageUrl(url){
form.value.cardImg=url
}
function getAlgorithmBannerVideo(url){
console.log("🚀 ~ getAlgorithmBanner ~ url:", url)
form.value.algorithmBannerVideo=url
}
function getAlgorithmBanner(url){
......
src/views/algorithmControl/index.vue
View file @ 4c844266
......@@ -2,7 +2,7 @@
<div class="app-container">
<TabTitle :text="nowText" />
<el-card class="left-list">
<el-card class="left-list" :style="{height:globalScreenHeight+'px'}">
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
<el-form-item label="算法名称" prop="algorithmName">
<el-input
......@@ -110,7 +110,7 @@
@pagination="getList"
/>
</el-card>
<algForm ref="algFormRef" @getList="getList"/>
<algForm ref="algFormRef" @getList1="getList"/>
</div>
</template>
......@@ -120,7 +120,7 @@
const router = useRouter();
const { proxy } = getCurrentInstance();
const { algorithm_scen, sys_job_status } = proxy.useDict("algorithm_scen", "sys_job_status");
const globalScreenHeight = inject('globalScreenHeight');
const algFormRef = ref(null)
const nowText = ref("算法管理");
const algList = ref([]);
......
src/views/algorithmList/components/details.vue
View file @ 4c844266
......@@ -20,8 +20,8 @@
{{form.cardCopywriting}}
</p>
</div>
<div style="width: 400px;height: 225px;" >
<video v-if="videoLoading" controls ref="videoEle" class="drawImg">
<div style="width: 400px;height: 225px;overflow: hidden;" >
<video v-if="videoLoading" controls ref="videoEle" class="drawImg" width="100%" style="border-radius: 10px;">
<source :src="backVideo" type="video/mp4" />
</video>
</div>
......@@ -69,6 +69,7 @@
</video>
</div>
<ImgVideoUpload
v-if="form.algorithmStatus=='0'"
style="position: absolute;bottom: 5px;left: 26%;"
:modelValue="uploadUrl"
:fileType="['png', 'jpg', 'mp4']"
......@@ -77,6 +78,9 @@
:isShowTip="false"
@update:modelObj="getImgObj"
/>
<div v-else style="position: absolute;bottom: 5px;left: 26%;" class="text-style">
请开启算法
</div>
<!-- <ImageUpload :limit='1' :fileSize="5" :isShowTip="false" @update:modelObj="getImgObj"/> -->
</div>
</el-card>
......@@ -93,7 +97,7 @@
<source :src="'http://192.168.3.82'+nowImg" type="video/mp4" />
</video>
</div>
<el-button type="primary" plain @click="openIdentify" style="margin: 10px 0;">开始识别</el-button>
<el-button v-if="form.algorithmStatus=='0'" type="primary" plain @click="openIdentify" style="margin: 10px 0;">开始识别</el-button>
</el-card>
<el-card >
<div class="text-style" style="margin: 10px 0;">
......@@ -110,8 +114,10 @@
</video>
</div>
<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> -->
<div></div>
<el-button type="primary" plain @click="downVideo">下载识别视频</el-button>
<!-- <el-button v-if="getFileType(outFilePath)=='1'" type="primary" plain @click="downVideo">下载识别视频</el-button> -->
</div>
</el-card>
</div>
......@@ -269,6 +275,12 @@ function getFileType(fileName) {
return "0";
}
}
function downVideo(){
window.open(baseUrl+'/algorithm/images/ResDir/2024/9/2/1830503463524630529/Safety helmet wearing detection/1725261009531_1.mp4')
}
getDetials()
</script>
......
src/views/algorithmList/index.vue
View file @ 4c844266
......@@ -22,7 +22,7 @@
</div>
<el-row :gutter="10">
<el-col :xs="0" :sm="2" :md="3" :lg="4">
<el-card class="left-list">
<el-card class="left-list" style="height: 100%;">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
......@@ -41,7 +41,7 @@
</el-card>
</el-col>
<el-col :xs="24" :sm="20" :md="20" :lg="20">
<el-scrollbar height="710px">
<el-scrollbar :height="globalScreenHeight+'px'">
<el-card class="right-list">
<template v-slot:header>
<div class="cleartitle" style="justify-content: flex-start">
......@@ -53,30 +53,35 @@
<el-button
type="primary"
plain
@click="handState('')"
>全部</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
plain
@click="handState('0')"
>运行中</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
plain
@click="handState('1')"
>已禁用</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
plain
@click="handState('2')"
>已下载</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
plain
@click="handState('3')"
>已删除</el-button>
</el-col>
</el-row>
......@@ -146,53 +151,13 @@
const { algorithm_scen, sys_job_status } = proxy.useDict("algorithm_scen", "sys_job_status");
import { ArrowDown } from '@element-plus/icons-vue'
import { Search } from '@element-plus/icons-vue'
const globalScreenHeight = inject('globalScreenHeight');
const router = useRouter();
const algorithmDownRef = ref(null)
const nowText=ref('算法管理')
const nowTopTitle=ref('算法管理')
const ids = 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 algorithmList=reactive([])
const algList = ref([]);
const data = reactive({
form: {},
......@@ -211,7 +176,6 @@
});
const { queryParams, form, rules } = toRefs(data);
/** 查询算法列表 */
function getList() {
// loading.value = true;
......@@ -228,14 +192,9 @@
// console.log("🚀 ~ handDetails ~ row:", row)
router.push("/algorithmList/details/info/" + row.id);
}
function handleSetSize(row) {
// reset();
// const postId = row.postId || ids.value;
// getPost(postId).then(response => {
// form.value = response.data;
// open.value = true;
// title.value = "修改岗位";
// });
function handState(state) {
queryParams.value.algorithmStatus=state
getList()
}
function handleUpdate(row) {
algorithmDownRef.value.handleUpdate(row)
......
src/views/deviceControl/index.vue
View file @ 4c844266
......@@ -2,7 +2,7 @@
<div class="app-container">
<TabTitle :text="nowText" />
<el-card class="left-list">
<el-card class="left-list" :style="{height:globalScreenHeight+'px'}">
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
<el-form-item label="设备名称" prop="deviceName">
<el-input
......@@ -183,7 +183,7 @@
const router = useRouter();
const { proxy } = getCurrentInstance();
const { sys_job_group, sys_job_status } = proxy.useDict("sys_job_group", "sys_job_status");
const globalScreenHeight = inject('globalScreenHeight');
const nowText = ref("设备管理");
const deviceList = ref([]);
const open = ref(false);
......
src/views/login.vue
View file @ 4c844266
......@@ -125,7 +125,7 @@ function handleLogin() {
}
return acc;
}, {});
router.push({ path: redirect.value || "/", query: otherQueryParams });
router.push({ path: redirect.value || "/deviceControl", query: otherQueryParams });
}).catch(() => {
loading.value = false;
// 重新获取验证码
......
src/views/videoControl/pointControl/index.vue
View file @ 4c844266
......@@ -65,7 +65,7 @@
</el-card>
</el-col>
<el-col :xs="24" :sm="16" :md="16" :lg="20">
<el-scrollbar height="700px">
<el-scrollbar :height="globalScreenHeight+'px'">
<el-card class="right-list">
<template v-slot:header>
<div class="cleartitle" style="justify-content: flex-start">
......@@ -305,6 +305,7 @@ import { onMounted, reactive, ref, unref, watch, watchEffect } from "vue";
import request from "@/utils/request";
import { useIndex } from "./hooks";
const { proxy } = getCurrentInstance();
const globalScreenHeight = inject('globalScreenHeight');
const drawPointRef = ref(null);
const nowText = ref("点位管理");
const deptName = ref("");
......
src/views/videoControl/videoPreview/index.vue
View file @ 4c844266
......@@ -3,7 +3,7 @@
<TabTitle :text="nowText" />
<el-row :gutter="10">
<el-col :xs="0" :sm="2" :md="3" :lg="4">
<el-card class="left-list">
<el-card class="left-list" :style="{height:globalScreenHeight+'px'}">
<div class="head-container">
<el-input
v-model="deptName"
......@@ -29,8 +29,7 @@
</el-card>
</el-col>
<el-col :xs="24" :sm="16" :md="16" :lg="14">
<el-scrollbar height="700px">
<el-card class="right-list">
<el-card class="right-list" :style="{height:globalScreenHeight+'px'}">
<template v-slot:header>
<div class="cleartitle" style="justify-content: flex-start">
<img src="@/assets/images/logo_video.png" width="25px" alt />
......@@ -60,10 +59,9 @@
</el-card>
</div>
</el-card>
</el-scrollbar>
</el-col>
<el-col :xs="0" :sm="2" :md="3" :lg="6">
<el-scrollbar height="700px">
<el-scrollbar :height="globalScreenHeight+'px'">
<el-card class="danger-list">
<template v-slot:header>
<div class="cleartitle" style="justify-content: flex-start">
......@@ -102,57 +100,18 @@
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 { listAiRegionManage,videoTreeListManage,idDevice } from "@/api/videoControl/videoPreview";
import { listAlarm } from "@/api/alarmControl/index.js";
import { onMounted, reactive, ref, } from "vue";
const { proxy } = getCurrentInstance();
const globalScreenHeight = inject('globalScreenHeight');
const algFormRef = ref(null);
const nowText = ref("视频预览");
const deptTreeRef = ref(null);
const deptName = ref("");
const deptOptions = ref(undefined);
const algorithmList = ref([
{
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 algorithmList = ref([]);
const player=ref(null);
const data = reactive({
form: {
title:'测试测试测试'
......@@ -181,7 +140,8 @@ const filterNode = (value, data) => {
return data.label.indexOf(value) !== -1;
};
function getTreeData() {
listAiRegionManage().then((res) => {
videoTreeListManage().then((res) => {
console.log("🚀 ~ videoTreeListManage ~ res:", res)
deptOptions.value=res.data
})
}
......@@ -192,12 +152,26 @@ function getWaringData() {
}
getTreeData()
getWaringData()
function getVideos(){
function getVideos(str){
let canvas = document.getElementById('video')
let url = 'rtsp://192.168.20.211:554/av0_0'
let player = new JSMpeg.Player("ws://192.168.4.232:9999/rtsp?url="+btoa(url), {canvas: canvas})
let url = str?str:'rtsp://192.168.20.211:554/av0_0'
player.value = new JSMpeg.Player("ws://192.168.4.232:9999/rtsp?url="+btoa(url), {canvas: canvas})
player.value.play()
}
// // 当需要重新加载视频流时，可以调用以下函数
// function reloadVideoStream(str) {
// let canvas = document.getElementById('video')
// var ctx = canvas.getContext('2d');
// ctx.clearRect(0, 0, canvas.width, canvas.height);
// // 更新视频流URL
// player.value = new JSMpeg.Player("ws://192.168.4.232:9999/rtsp?url="+btoa(str), {canvas: canvas})
// // 开始解码新的视频流
// player.value.play();
// }
onMounted(() => {
// player.value.play()//播放
getVideos()
})
......@@ -206,6 +180,11 @@ watch(deptName, (val) => {
})
function handleNodeClick(row) {
const treeType = row.id.split("-")[0];
const treeID = row.id.split("-")[1];
if(treeType=='点位'){
handlvideoPath(treeID)
}
}
function handAdd(row) {
......@@ -217,9 +196,10 @@ function handleSetSize(row) {
function handleUpdate(row) {
}
/** 删除按钮操作 */
function handleDelete(row) {
function handlvideoPath(id) {
idDevice(id).then((res) => {
getVideos(res.data.videoUrl)
})
}
</script>
......
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