Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
A
ai-yunshou-vue
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
AI云守
ai-yunshou-vue
Commits
7e697812
Commit
7e697812
authored
Jul 31, 2024
by
胡占生
🇨🇳
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat:视频预览模块初始新增,页面初始布局。
parent
b1b5d7b2
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
262 additions
and
0 deletions
+262
-0
src/views/videoControl/videoPreview/index.vue
src/views/videoControl/videoPreview/index.vue
+262
-0
No files found.
src/views/videoControl/videoPreview/index.vue
0 → 100644
View file @
7e697812
<
template
>
<div
class=
"app-container home"
>
<TabTitle
:text=
"nowText"
/>
<el-row
:gutter=
"10"
>
<el-col
:xs=
"0"
:sm=
"2"
:md=
"3"
:lg=
"4"
>
<el-card
class=
"left-list"
>
<div
class=
"head-container"
>
<el-input
v-model=
"deptName"
placeholder=
"请输入部门名称"
clearable
prefix-icon=
"Search"
style=
"margin-bottom: 20px"
/>
</div>
<div
class=
"head-container"
>
<el-tree
:data=
"deptOptions"
:props=
"
{ label: 'label', children: 'children' }"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="deptTreeRef"
node-key="id"
highlight-current
default-expand-all
@node-click="handleNodeClick"
/>
</div>
</el-card>
</el-col>
<el-col
:xs=
"24"
:sm=
"16"
:md=
"16"
:lg=
"16"
>
<el-scrollbar
height=
"700px"
>
<el-card
class=
"right-list"
>
<template
v-slot:header
>
<div
class=
"cleartitle"
style=
"justify-content: flex-start"
>
<img
src=
"@/assets/images/logo_video.png"
width=
"25px"
alt=
""
>
<span>
视频预览
</span>
</div>
</
template
>
<el-row
:gutter=
"10"
class=
"mb8"
>
<el-col
:span=
"1.5"
>
<el-button
type=
"primary"
plain
@
click=
"handleUpdate"
>
一分屏
</el-button>
</el-col>
<el-col
:span=
"1.5"
>
<el-button
type=
"primary"
plain
@
click=
"handleUpdate"
>
四分屏
</el-button>
</el-col>
<el-col
:span=
"1.5"
>
<el-button
type=
"primary"
plain
@
click=
"handleDelete"
>
六分屏
</el-button>
</el-col>
</el-row>
<div
class=
"alg-list"
>
<el-card
v-for=
"item in algorithmList"
:key=
"item.name"
class=
"alg-item"
shadow=
"hover"
>
<
template
v-slot:header
>
<div
class=
"cleartitle"
>
<span>
{{
item
.
name
}}
</span>
<el-tag
:type=
"'success'"
effect=
"dark"
>
{{
'
success
'
}}
</el-tag>
</div>
</
template
>
<
template
v-slot:default
>
<img
src=
"@/assets/images/picStream.png"
style=
"width: 100%"
/>
<p
style=
"color: #999999;font-size: 12px;"
>
通过摄像头识别吸烟行为的智能算法
</p>
<div
style=
"display: flex;justify-content: flex-end;position: absolute;right: 15px;bottom: 10px;"
>
<el-button
link
type=
"primary"
icon=
"Edit"
@
click=
"handleUpdate(item)"
>
修改
</el-button>
<el-button
link
type=
"primary"
icon=
"Delete"
@
click=
"handleDelete(item)"
>
删除
</el-button>
<el-dropdown
trigger=
"click"
@
command=
"handleSetSize"
>
<el-button
link
type=
"primary"
>
<el-icon
class=
"el-icon--right"
>
<arrow-down
/>
</el-icon>
更多
</el-button>
<template
#dropdown
>
<el-dropdown-menu>
<el-dropdown-item
:command=
"'卸载'"
>
{{
'
卸载
'
}}
</el-dropdown-item>
<el-dropdown-item
:command=
"'导入'"
>
{{
'
导入
'
}}
</el-dropdown-item>
<el-dropdown-item
:command=
"'下载'"
>
{{
'
下载
'
}}
</el-dropdown-item>
</el-dropdown-menu>
</
template
>
</el-dropdown>
</div>
</template>
</el-card>
</div>
</el-card>
</el-scrollbar>
</el-col>
<el-col
:xs=
"0"
:sm=
"2"
:md=
"3"
:lg=
"4"
>
<el-card
class=
"left-list"
>
<
template
v-slot:header
>
<div
class=
"cleartitle"
style=
"justify-content: flex-start"
>
<img
src=
"@/assets/images/logo_video.png"
width=
"25px"
alt=
""
>
<span>
实时预警
</span>
</div>
</
template
>
</el-card>
</el-col>
</el-row>
</div>
</template>
<
script
setup
name=
"Index"
>
import
{
ArrowDown
}
from
'
@element-plus/icons-vue
'
import
{
Search
}
from
'
@element-plus/icons-vue
'
const
{
proxy
}
=
getCurrentInstance
();
const
algFormRef
=
ref
(
null
)
const
nowText
=
ref
(
'
视频预览
'
)
const
deptName
=
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
data
=
reactive
({
form
:
{},
queryParams
:
{
postCode
:
undefined
,
searchValue
:
''
,
status
:
undefined
},
rules
:
{
postName
:
[{
required
:
true
,
message
:
"
岗位名称不能为空
"
,
trigger
:
"
blur
"
}],
postCode
:
[{
required
:
true
,
message
:
"
岗位编码不能为空
"
,
trigger
:
"
blur
"
}],
postSort
:
[{
required
:
true
,
message
:
"
岗位顺序不能为空
"
,
trigger
:
"
blur
"
}],
}
});
const
{
queryParams
,
form
,
rules
}
=
toRefs
(
data
);
// function closeNow(){
// const routerArr=useTagsViewStore().visitedViews
// const nowPath=location.pathname
// return routerArr.filter(item=>{return item.path==nowPath })[0]
// }
// setTimeout(() => {
// nowText=closeNow()
// }, 500);
// function goTarget(url) {
// window.open(url, '__blank')
// }
function
handAdd
(
row
){
algFormRef
.
value
.
handleAdd
()
}
function
handleSetSize
(
row
)
{
console
.
log
(
'
%c [ row ]-170
'
,
'
font-size:13px; background:pink; color:#bf2c9f;
'
,
row
)
// reset();
// const postId = row.postId || ids.value;
// getPost(postId).then(response => {
// form.value = response.data;
// open.value = true;
// title.value = "修改岗位";
// });
}
function
handleUpdate
(
row
)
{
// reset();
// const postId = row.postId || ids.value;
// getPost(postId).then(response => {
// form.value = response.data;
// open.value = true;
// title.value = "修改岗位";
// });
}
/** 删除按钮操作 */
function
handleDelete
(
row
)
{
// const postIds = row.postId || ids.value;
// proxy.$modal.confirm('是否确认删除岗位编号为"' + postIds + '"的数据项?').then(function() {
// return delPost(postIds);
// }).then(() => {
// getList();
// proxy.$modal.msgSuccess("删除成功");
// }).catch(() => {});
}
</
script
>
<
style
scoped
lang=
"scss"
>
.left-list
{
min-height
:
700px
;
}
.right-list
{
min-height
:
700px
;
.alg-list
{
display
:
grid
;
grid-template-columns
:
repeat
(
auto-fill
,
minmax
(
280px
,
1fr
));
gap
:
16px
;
.alg-item
{
width
:
100%
;
min-height
:
350px
;
cursor
:
pointer
;
position
:
relative
;
}
}
}
.cleartitle
{
font-size
:
16px
;
font-weight
:
600
;
display
:
flex
;
justify-content
:
space-between
;
align-items
:
center
}
</
style
>
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment