<template>
|
<el-container style="height: 100%;">
|
<el-aside heigth="100%" width="200px ">
|
<div style="line-height: 40px;text-align: left;padding: 0 20px 0 10px;">
|
<span style="color:rgb(75, 155, 183);font-weight: 500; width: 196px;">组织机构</span>
|
<el-input placeholder="请输入机构"></el-input>
|
</div>
|
<el-tree :data="treedata" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
|
|
|
</el-aside>
|
|
<el-container>
|
<el-header style="display:flex;flex-direction: column;height: 120px;">
|
<div style="display:flex;justify-content: space-between;height: 80px;">
|
<span style="color:rgb(75, 155, 183);font-weight: 500;text-align: left; font-size: 16px;">整体趋势</span>
|
<el-date-picker v-model="value" type="date" placeholder="选择日期">
|
</el-date-picker>
|
</div>
|
<div style="height:60px;display: flex;justify-content: flex-start;">
|
<el-button class="button-one">
|
视频预览
|
</el-button>
|
<el-button class="button-two">
|
视频巡查
|
</el-button>
|
<el-button class="button-third">
|
图片巡查
|
</el-button>
|
</div>
|
</el-header>
|
|
<el-main style="display:flex;flex-wrap: wrap;overflow-y: scroll;">
|
<div v-for="item in videoDate " style="height: 240px ;width: 210px; position: relative;margin-left:20px ;">
|
<div
|
style="color:rgb(75, 155, 183); font-size: 11px;line-height: 18px; position: absolute; z-index: 1;left: 50px;">
|
{{ item.steert }}{{ item.community }}</div>
|
<video id="my-video" class="video-js" controls preload="auto" width="210px" height="150px"
|
:poster="item.imageUrl" data-setup="{}">
|
<source :src="item.videoUrl" type="video/mp4" />
|
</video>
|
<div class="bottonOne" @click="">查看视频</div>
|
<div class="bottonTwo">视频上报</div>
|
<div class="bottonThird">对讲</div>
|
</div>
|
</el-main>
|
<el-footer>
|
<div style="margin-bottom:0;">
|
<el-pagination background :current-page="currentPage" layout="prev, pager, next" :total="totalNum"
|
:page-size="pageSize" @current-change="changeCurrentPage" @prev-click="handlePrev" @next-click="handleNext">
|
</el-pagination>
|
</div>
|
</el-footer>
|
</el-container>
|
</el-container>
|
</template>
|
<style lang="scss" scoped>
|
.button-one {
|
height: 40px;
|
width: 80px;
|
margin-left: 20px;
|
padding: 0;
|
background-color: #09152f;
|
color: rgb(75, 155, 183);
|
border: 1px solid rgb(75, 155, 183);
|
}
|
|
.button-two {
|
height: 40px;
|
width: 80px;
|
padding: 0;
|
background-color: #09152f;
|
color: rgb(75, 155, 183);
|
border: 1px solid rgb(75, 155, 183);
|
}
|
.el-button+.el-button{
|
margin: 0;
|
}
|
.button-third {
|
height: 40px;
|
width: 80px;
|
padding: 0;
|
background-color: #09152f;
|
color: rgb(75, 155, 183);
|
border: 1px solid rgb(75, 155, 183);
|
}
|
|
.video-js {
|
border: 1px solid rgb(75, 155, 183);
|
margin-left: 20px;
|
}
|
|
.bottonOne {
|
color: rgb(75, 155, 183);
|
font-size: 11px;
|
position: absolute;
|
height: 30px;
|
line-height: 30px;
|
margin-left: 20px;
|
width: 70px;
|
border: 1px solid rgb(75, 155, 183);
|
cursor: pointer;
|
}
|
|
.bottonTwo {
|
color: rgb(75, 155, 183);
|
font-size: 11px;
|
position: absolute;
|
height: 30px;
|
line-height: 30px;
|
width: 70px;
|
border: 1px solid rgb(75, 155, 183);
|
margin-left: 90px;
|
cursor: pointer;
|
}
|
.el-pagination{
|
line-height: 40px;
|
}
|
.bottonThird {
|
color: rgb(75, 155, 183);
|
font-size: 11px;
|
position: absolute;
|
height: 30px;
|
line-height: 30px;
|
width: 70px;
|
border: 1px solid rgb(75, 155, 183);
|
margin-left: 160px;
|
cursor: pointer;
|
}
|
|
::v-deep .el-header {
|
background-color: #09152f;
|
color: #000;
|
line-height: 60px;
|
}
|
|
::v-deep .el-aside {
|
background-color: #09152f;
|
}
|
|
::v-deep .el-menu {
|
background-color: #09152f;
|
}
|
|
::v-deep .el-main,
|
::v-deep .el-footer {
|
background-color: #09152f;
|
}
|
|
::v-deep .el-tree-node__label {
|
line-height: 30px;
|
font-size: 14px;
|
color: rgb(75, 155, 183);
|
}
|
</style>
|
<script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
|
<script>
|
export default {
|
data() {
|
return {
|
totalNum:7,
|
pageSize:10,
|
videoDate:[
|
{
|
id:12,
|
steert:"xx街道",
|
community:"xxx社区",
|
imageUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-f596f7046869736314107eed4003ce88_r.jpg&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669953324&t=319eaeb3617f2bd98a0d5b845b35a537",
|
videoUrl:"http://vali-g1.cp31.ott.cibntv.net/youku/65730720cb94e7220271a3c96/0300080100632D30A3E43019FD116537F5162F-1035-48AC-BE1B-602DF0E92893.mp4?sid=166729534400010004780_00_Bda935cf9a33346c593fc27da8e694df3&sign=db39289573d143cf6e1ad8d8dff36682&ctype=50&si=183&psid=c732c4364319e7ef4685d8f1a568015941346"
|
},
|
{
|
id:12,
|
steert:"xx街道",
|
community:"xxx社区",
|
imageUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-f596f7046869736314107eed4003ce88_r.jpg&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669953324&t=319eaeb3617f2bd98a0d5b845b35a537",
|
videoUrl:"http://vali-g1.cp31.ott.cibntv.net/youku/65730720cb94e7220271a3c96/0300080100632D30A3E43019FD116537F5162F-1035-48AC-BE1B-602DF0E92893.mp4?sid=166729534400010004780_00_Bda935cf9a33346c593fc27da8e694df3&sign=db39289573d143cf6e1ad8d8dff36682&ctype=50&si=183&psid=c732c4364319e7ef4685d8f1a568015941346"
|
},
|
{
|
id:12,
|
steert:"xx街道",
|
community:"xxx社区",
|
imageUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-f596f7046869736314107eed4003ce88_r.jpg&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669953324&t=319eaeb3617f2bd98a0d5b845b35a537",
|
videoUrl:"http://vali-g1.cp31.ott.cibntv.net/youku/65730720cb94e7220271a3c96/0300080100632D30A3E43019FD116537F5162F-1035-48AC-BE1B-602DF0E92893.mp4?sid=166729534400010004780_00_Bda935cf9a33346c593fc27da8e694df3&sign=db39289573d143cf6e1ad8d8dff36682&ctype=50&si=183&psid=c732c4364319e7ef4685d8f1a568015941346"
|
}
|
,
|
{
|
id:12,
|
steert:"xx街道",
|
community:"xxx社区",
|
imageUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-f596f7046869736314107eed4003ce88_r.jpg&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669953324&t=319eaeb3617f2bd98a0d5b845b35a537",
|
videoUrl:"http://vali-g1.cp31.ott.cibntv.net/youku/65730720cb94e7220271a3c96/0300080100632D30A3E43019FD116537F5162F-1035-48AC-BE1B-602DF0E92893.mp4?sid=166729534400010004780_00_Bda935cf9a33346c593fc27da8e694df3&sign=db39289573d143cf6e1ad8d8dff36682&ctype=50&si=183&psid=c732c4364319e7ef4685d8f1a568015941346"
|
},
|
{
|
id:12,
|
steert:"xx街道",
|
community:"xxx社区",
|
imageUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-f596f7046869736314107eed4003ce88_r.jpg&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669953324&t=319eaeb3617f2bd98a0d5b845b35a537",
|
videoUrl:"http://vali-g1.cp31.ott.cibntv.net/youku/65730720cb94e7220271a3c96/0300080100632D30A3E43019FD116537F5162F-1035-48AC-BE1B-602DF0E92893.mp4?sid=166729534400010004780_00_Bda935cf9a33346c593fc27da8e694df3&sign=db39289573d143cf6e1ad8d8dff36682&ctype=50&si=183&psid=c732c4364319e7ef4685d8f1a568015941346"
|
}
|
,
|
{
|
id:12,
|
steert:"xx街道",
|
community:"xxx社区",
|
imageUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-f596f7046869736314107eed4003ce88_r.jpg&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669953324&t=319eaeb3617f2bd98a0d5b845b35a537",
|
videoUrl:"http://vali-g1.cp31.ott.cibntv.net/youku/65730720cb94e7220271a3c96/0300080100632D30A3E43019FD116537F5162F-1035-48AC-BE1B-602DF0E92893.mp4?sid=166729534400010004780_00_Bda935cf9a33346c593fc27da8e694df3&sign=db39289573d143cf6e1ad8d8dff36682&ctype=50&si=183&psid=c732c4364319e7ef4685d8f1a568015941346"
|
}
|
],
|
treedata: [{
|
label: '妙高街道',
|
children: [{
|
label: '东街',
|
children: [{
|
label: '螺蛳垵'
|
}]
|
}]
|
}, {
|
label: '云峰街道',
|
children: [{
|
label: '东亭',
|
children: [{
|
label: '隔溪'
|
}]
|
}, {
|
label: '马头',
|
children: [{
|
label: '龙口'
|
}]
|
}]
|
}, {
|
label: '新路湾镇',
|
children: [{
|
label: '新路湾镇',
|
children: [{
|
label: '新路湾镇'
|
}]
|
}, {
|
label: '新路湾镇',
|
children: [{
|
label: '新路湾镇'
|
}]
|
}]
|
}],
|
defaultProps: {
|
children: 'children',
|
label: 'label'
|
},
|
value:''
|
};
|
},
|
methods: {
|
handleNodeClick(data) {
|
}
|
}
|
};
|
</script>
|
