xiaomeng/wszhyWx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: xiaomeng:b5a6a2c4caa2e966d8910abec60cd931a8c5af70
Branches Tags
xiaomeng:main
xiaomeng:pc-master
xiaomeng:portal
xiaomeng:wx-program
xiaomeng:mini-program
xiaomeng:fix
xiaomeng:master
xiaomeng:wxmaster
xiaomeng:0.0.1
..
compare: xiaomeng:34bc890b55e590ca05a8dd1a2a676221f3dd6470
Branches Tags
xiaomeng:pc-master
xiaomeng:portal
xiaomeng:wx-program
xiaomeng:mini-program
xiaomeng:fix
xiaomeng:master
xiaomeng:wxmaster
xiaomeng:main
xiaomeng:0.0.1

No commits in common. "b5a6a2c4caa2e966d8910abec60cd931a8c5af70" and "34bc890b55e590ca05a8dd1a2a676221f3dd6470" have entirely different histories.
b5a6a2c4ca ... 34bc890b55

16 changed files with 148 additions and 541 deletions
Show Stats Expand all files Collapse all files

9
src/api/index.js
View File

@ -379,14 +379,7 @@ selFsTime(data) {
loadHistorydata(data) {
return sendPostRequest(`/load/historydata`, data)
},
//摄像头操作开始
cameraStart(cameraSerialNumber,cameraChannelNumber,num) {
return sendPostRequest(`/camera/start?cameraid=${cameraSerialNumber}&channelid=${cameraChannelNumber}&direction=${num}`)
},
//摄像头操作结束
cameraStop(cameraSerialNumber,cameraChannelNumber,num) {
return sendPostRequest(`/camera/stop?cameraid=${cameraSerialNumber}&channelid=${cameraChannelNumber}&direction=${num}`)
},
//二维码溯源
//查看农事作物信息
getAgriculturalInformation(data) {

116
src/assets/css/main.css
View File

@ -1978,118 +1978,13 @@
.realTime .page-content .realTime-bottom .left-view > div {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.realTime .page-content .realTime-bottom .left-view > div .video-js {
width: calc(100% - 400px);
width: 100%;
height: 100%;
}
.realTime .page-content .realTime-bottom .left-view > div .video-control {
width: 400px;
display: flex;
height: 100%;
padding: 60px 0;
flex-direction: column;
align-items: center;
}
.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn-big {
width: 230px;
height: 230px;
background: url(../img/video-control.png) no-repeat center;
background-size: 100% 100%;
position: relative;
overflow: hidden;
}
.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn-big > div {
width: 230px;
height: 230px;
position: relative;
}
.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn-big > div:active .arrow {
background: url(../img/control-arrow-active.png) no-repeat center;
background-size: 100% 100%;
}
.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn-big > div .arrow {
width: 43px;
height: 26px;
transform: rotate(135deg);
background: url(../img/control-arrow.png) no-repeat center;
background-size: 100% 100%;
position: absolute;
top: 16px;
left: 7px;
}
.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn-big .top {
transform: rotate(-135deg);
position: absolute;
bottom: 70.5%;
}
.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn-big .bottom {
transform: rotate(45deg);
position: absolute;
top: 71%;
}
.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn-big .left {
transform: rotate(135deg);
position: absolute;
right: 70.5%;
}
.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn-big .right {
transform: rotate(-45deg);
position: absolute;
left: 70.5%;
}
.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-row-gap: 30px;
grid-column-gap: 30px;
margin-top: 41px;
width: 310px;
}
.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn > div {
width: 140px;
height: 40px;
background: #0294E2;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 16px;
color: #FFFFFF;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn > div:active {
background: #22B2FF;
}
.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn > div > img {
margin-right: 12px;
width: 22px;
height: auto;
}
.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn > div > div {
white-space: nowrap;
width: 40px;
}
.realTime .page-content .realTime-bottom .right {
width: calc(100% - 35%);
min-width: 230px;
@ -3637,8 +3532,7 @@
color: #606266;
}
.el-button--primary.el-button span,
.el-button--success.el-button span {
.el-button--primary.el-button span, .el-button--success.el-button span {
color: #fff;
}
@ -3663,8 +3557,7 @@
margin-top: 20px;
}
.el-pagination .btn-prev .el-icon,
.el-pagination .btn-next .el-icon {
.el-pagination .btn-prev .el-icon, .el-pagination .btn-next .el-icon {
color: #333;
}
@ -3681,8 +3574,7 @@
font-weight: 700;
}
.el-pagination__total,
.el-pagination__jump {
.el-pagination__total, .el-pagination__jump {
color: #fff;
}

2
src/assets/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

190
src/assets/css/main.scss
View File

@ -256,7 +256,6 @@
.warning-btn {
justify-content: flex-end;
margin-top: -70px;
.btn.green {
opacity: 1;
}
@ -330,7 +329,6 @@
margin-left: 15px;
display: flex;
align-items: center;
img{
margin-right: 5px;
}
@ -447,7 +445,6 @@
}
}
.header-warning{
width: 75px;
height: 100%;
@ -455,7 +452,6 @@
align-items: center;
justify-content: center;
}
.header-right {
width: 260px;
display: flex;
@ -571,17 +567,14 @@
>span{
padding: 0 10px;
}
>.title {
margin-bottom: 11px;
}
&.input-sel-w180{
.el-dropdown-link{
width: 180px;
}
}
.el-dropdown-link {
width: 300px;
height: 44px;
@ -663,13 +656,11 @@
color: #859BB6;
}
}
&.input-main-w120{
input{
width: 120px;
}
}
&.input-disabled{
input{
background: transparent;
@ -677,19 +668,16 @@
padding-left: 0;
}
}
&.input-main-w260{
input{
width: 260px;
}
}
&.input-main-w80{
input{
width: 80px;
}
}
&.input-main-w100{
input{
width: 100px;
@ -759,22 +747,18 @@
}
}
}
.outline{
color: red;
font-weight: bold;
font-size: 24px;
}
.el-dropdown-menu {
width: 300px;
border: none;
background-color: #014781;
&.input-menu-180{
width:180px;
}
.popper__arrow::after {
border-bottom-color: rgba(0, 186, 255, 0.25) !important;
}
@ -985,7 +969,6 @@
display: flex;
align-items: center;
}
.text-tips{
font-size: 16px;
font-family: Microsoft YaHei;
@ -993,7 +976,6 @@
color: #fff;
margin-top: 20px;
}
.title-tips-bold {
font-size: 18px;
font-family: Microsoft YaHei;
@ -1028,7 +1010,6 @@
.input-sel-time{
display: flex;
align-items: center;
.el-range-separator{
font-size: 16px;
font-family: Microsoft YaHei;
@ -1037,7 +1018,6 @@
padding:0 8px;
width: 40px;
}
span{
font-size: 16px;
font-family: Microsoft YaHei;
@ -1045,20 +1025,17 @@
color: #FFFFFF;
padding:0 8px;
}
.el-input__inner{
background: rgba(0, 186, 255, 0.15);
border: 2px solid rgba(0, 186, 255, 0.40);
cursor: pointer;
position: relative;
.el-range-input{
background: transparent;
color: #fff;
}
}
}
.input-btn {
display: flex;
align-items: center;
@ -1072,16 +1049,13 @@
}
}
.m-b-20{
margin:10px 8px!important;
}
.flex-warp{
width: 100%;
flex-wrap: wrap;
}
.btn {
margin: 0 8px;
padding: 0 20px;
@ -1097,27 +1071,22 @@
cursor: pointer;
white-space: nowrap;
min-width: 120px;
&.btn-w80{
min-width: 80px;
}
&.btn-tips{
min-width:70px;
width:70px;
height: 35px;
}
&.btn-w74{
width: 74px;
min-width: unset;
}
&.btn-w66{
width: 66px;
min-width: unset;
}
>img {
margin-right: 10px;
width: 14px;
@ -1273,7 +1242,6 @@
font-weight: 400;
color: #A8B6C8;
}
.upload {
.upload-view {
width: 520px;
@ -1393,11 +1361,9 @@
.input-sel {
margin: 15px 0 30px;
>span{
padding: 0 10px;
}
>.title {
margin-bottom: 11px;
@ -1822,7 +1788,6 @@
align-items: center;
flex-wrap: wrap;
padding: 50px 30px 0;
.list-view{
flex-shrink: 0;
display: flex;
@ -1830,7 +1795,6 @@
align-items: center;
margin-right: 20px;
margin-bottom: 20px;
img {
width: 60px;
height: 60px;
@ -1855,7 +1819,6 @@
display: flex;
align-items: center;
justify-content: center;
&.red{
color: rgba(252, 125, 106, 1);
}
@ -1863,7 +1826,6 @@
}
}
}
.realTime {
width: 100%;
height: 100%;
@ -2008,7 +1970,6 @@
display: flex;
align-items: center;
justify-content: center;
&.red{
color: rgba(252, 125, 106, 1);
}
@ -2030,23 +1991,18 @@
.realTime-bottom {
height: 350px;
margin-top: 30px;
&.videoMonitoring-monitor{
justify-content: space-between;
height: calc(100% - 90px);
.left-view{
width: 100%;
}
}
>div {
flex-shrink: 0;
}
&.weather{
height: 400px;
.left-view-new{
width: 50%;
height: 100%;
@ -2057,7 +2013,6 @@
padding: 10px;
flex-wrap: wrap;
align-content: flex-start;
>div{
height: 60px;
min-width: 105px;
@ -2066,18 +2021,15 @@
display: flex;
align-items: center;
margin-bottom: 20px;
>img{
width: 60px;
height: 60px;
}
.text{
text-align: center;
margin: 5px 0;
font-size: 14px;
}
.number{
width: 80px;
height: 30px;
@ -2093,12 +2045,10 @@
}
}
}
.right{
width: 50%;
}
}
.left-view {
width: 35%;
height: 100%;
@ -2108,120 +2058,15 @@
align-items: center;
justify-content: center;
padding: 10px;
// overflow: hidden;
>div {
width: 100%;
height: 100%;
display: flex;
align-items: center;
.video-js {
width: calc(100% - 400px);
width: 100%;
height: 100%;
}
.video-control {
width: 400px;
display: flex;
height: 100%;
padding: 60px 0;
flex-direction: column;
align-items: center;
.video-btn-big {
width: 230px;
height: 230px;
background: url(../img/video-control.png) no-repeat center;
background-size: 100% 100%;
position: relative;
overflow: hidden;
>div {
width: 230px;
height: 230px;
position: relative;
&:active {
.arrow {
background: url(../img/control-arrow-active.png)no-repeat center;
background-size: 100% 100%;
}
}
.arrow {
width: 43px;
height: 26px;
transform: rotate(135deg);
background: url(../img/control-arrow.png)no-repeat center;
background-size: 100% 100%;
position: absolute;
top: 16px;
left: 7px;
}
}
.top {
transform: rotate(-135deg);
position: absolute;
bottom: 70.5%;
}
.bottom {
transform: rotate(45deg);
position: absolute;
top: 71%;
}
.left {
transform: rotate(135deg);
position: absolute;
right: 70.5%;
}
.right {
transform: rotate(-45deg);
position: absolute;
left: 70.5%;
}
}
.video-btn {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-row-gap: 30px; //纵向间隔
grid-column-gap: 30px; //横向间隔
margin-top: 41px;
width: 310px;
>div {
width: 140px;
height: 40px;
background: #0294E2;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 16px;
color: #FFFFFF;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
&:active{
background: #22B2FF;
}
>img {
margin-right: 12px;
width: 22px;
height: auto;
}
>div{
white-space: nowrap;
width: 40px;
}
}
}
}
}
}
@ -2279,19 +2124,15 @@
align-items: center;
justify-content: center;
flex-wrap: wrap;
&.status-btn{
>div{
width: 150px;
height: 40px;
>img{
width: 20px;
height: 20px;
width: 20px;height: 20px;
}
}
}
>div {
min-width: unset;
flex-shrink: 0;
@ -2532,7 +2373,6 @@
}
.no-sel {
width: 35px;
height: 35px;
@ -2551,7 +2391,6 @@
background-size: 100% 100%;
cursor: pointer;
}
.dataAnalysis {
.page-content {
.search-flex {
@ -3194,7 +3033,6 @@
top: 30px;
z-index: 999;
}
.vrcode-model-title {
width: 100%;
height: 43px;
@ -3377,17 +3215,14 @@
transform: translateY(-50%);
}
}
&.confirm-psw{
.el-dialog__body{
min-height: unset;
}
.el-dialog{
min-height: unset;
}
}
.el-dialog__body {
width: 100%;
min-height: calc(30vh - 70px);
@ -3865,21 +3700,19 @@
}
}
.systemSet-con{
width: 100%;
height: 100%;
.page-content{
.page-content {}
}
}
.el-button span {
color: #606266;
}
.el-button--primary,
.el-button--success {
.el-button--primary,.el-button--success {
&.el-button span {
color: #fff;
}
@ -3903,37 +3736,28 @@
cursor: pointer;
background: #00BB88;
}
.el-pagination{
margin-top: 20px;
.btn-prev,
.btn-next {
.btn-prev,.btn-next{
.el-icon{
color: #333;
}
}
}
.el-pager li{
color: #333;
}
.el-pager li.active{
color: #409EFF;
}
.el-select-dropdown__item.selected span{
color: #409EFF;
font-weight: 700;
}
.el-pagination__total,
.el-pagination__jump {
.el-pagination__total,.el-pagination__jump{
color: #fff;
}
.el-select-dropdown__item span{
color: #606266;
}

BIN
src/assets/img/control-arrow-active.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/assets/img/control-arrow.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/assets/img/video-control.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 60 KiB

BIN
src/assets/img/video-icon0.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 240 B

BIN
src/assets/img/video-icon1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 237 B

BIN
src/assets/img/video-icon2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 233 B

BIN
src/assets/img/video-icon3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 240 B

BIN
src/assets/img/video-icon4.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 677 B

BIN
src/assets/img/video-icon5.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 603 B

BIN
src/assets/img/video-icon6.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 214 B

BIN
src/assets/img/video-icon7.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 228 B

114
src/views/page/videoMonitoring.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="formula realTime videoMonitoring" @mouseup="upEnd()">
<div class="formula realTime videoMonitoring">
<div class="page-content new-data">
<div class="table-title">
<img src="../../assets/image/real-time.png" alt="" />
@ -10,48 +10,6 @@
<div ref="monitor" class="monitor" id="monitor">
<!-- <video ref="videoPlayer" class="video-js" id="video-js"></video> -->
<div ref="videoPlayer" class="video-js" id="video-js"></div>
<div class="video-control">
<div class="video-btn-big">
<div class="top" @mousedown="downStart(0)">
<div class="arrow"></div>
</div>
<div class="bottom" @mousedown="downStart(1)">
<div class="arrow"></div>
</div>
<div class="left" @mousedown="downStart(2)">
<div class="arrow"></div>
</div>
<div class="right" @mousedown="downStart(3)">
<div class="arrow"></div>
</div>
</div>
<div class="video-btn">
<div @mousedown="downStart(4)"><img src="../../assets/img/video-icon0.png" alt="">
<div>左上 </div>
</div>
<div @mousedown="downStart(6)"><img src="../../assets/img/video-icon1.png" alt="">
<div>右上 </div>
</div>
<div @mousedown="downStart(5)"><img src="../../assets/img/video-icon2.png" alt="">
<div>左下 </div>
</div>
<div @mousedown="downStart(7)"><img src="../../assets/img/video-icon3.png" alt="">
<div>右下 </div>
</div>
<div @mousedown="downStart(8)"><img src="../../assets/img/video-icon4.png" alt="">
<div>放大+</div>
</div>
<div @mousedown="downStart(9)"><img src="../../assets/img/video-icon5.png" alt="">
<div>缩小-</div>
</div>
<div @mousedown="downStart(10)"><img src="../../assets/img/video-icon6.png" alt="">
<div>近焦距</div>
</div>
<div @mousedown="downStart(11)"><img src="../../assets/img/video-icon7.png" alt="">
<div>远焦距</div>
</div>
</div>
</div>
</div>
</div>
@ -64,7 +22,6 @@
import EZUIKit from 'ezuikit-js';
import videojs from 'video.js';
import video_zhCN from 'video.js/dist/lang/zh-CN.json'
import axios from 'axios';
export default {
data(){
return {
@ -74,7 +31,6 @@ export default {
statusInterval: null,//status状态的Interval
player: null,
url: '',
nowNum: -1,
}
},
watch: {
@ -122,69 +78,10 @@ export default {
}, 0);
},
methods:{
downStart(num) {
const store = this.$store.state
const that = this
console.log('start');
this.nowNum = num
var nowDevice = store.equipmentList[this.indexs - 1]
// var data = {
// accessToken: this.accesstoken,
// deviceSerial: nowDevice.cameraSerialNumber,
// channelNo: nowDevice.cameraChannelNumber,
// direction: num,
// speed: 1,
// }
// var header={
// 'Content-Type': 'application/x-www-form-urlencoded',
// }
// axios.post('https://open.ys7.com/api/lapp/device/ptz/start',data,header)
// .then(response => {
// console.log(response.data);
// })
// .catch(error => {
// console.error(error);
// });
this.api.cameraStart(nowDevice.cameraSerialNumber,nowDevice.cameraChannelNumber,num).then(res => {
setTimeout(() => {
that.upEnd()
}, 10000);
})
},
upEnd() {
const store = this.$store.state
const that = this
var num = this.nowNum
var nowDevice = store.equipmentList[this.indexs - 1]
console.log('end');
// var data = {
// accessToken: this.accesstoken,
// deviceSerial: nowDevice.cameraSerialNumber,
// channelNo: nowDevice.cameraChannelNumber,
// direction: num,
// speed: 1,
// }
// var header={
// 'Content-Type': 'application/x-www-form-urlencoded',
// }
// axios.post('https://open.ys7.com/api/lapp/device/ptz/stop',data,header)
// .then(response => {
// console.log(response.data);
// })
// .catch(error => {
// console.error(error);
// });
if (num != -1) {
this.api.cameraStop(nowDevice.cameraSerialNumber, nowDevice.cameraChannelNumber, num).then(res => {
this.nowNum=-1
})
}
},
createVideoNew(accessToken) {
// divW和divH是获取了父级宽高 使播放容器能铺满div
let divW = this.$refs.videoPlayer.clientWidth
let divH = this.$refs.videoPlayer.clientHeight
let divW = this.$refs.monitor.clientWidth
let divH = this.$refs.monitor.clientHeight
this.player = new EZUIKit.EZUIKitPlayer({
id: 'video-js', // 视频容器ID
accessToken: accessToken,
@ -210,7 +107,6 @@ export default {
// console.log(res.data, 11);
if (res.data.code == 200) {
this.url = res.data.data.ezopen
this.accesstoken = res.data.data.accesstoken
this.createVideoNew(res.data.data.accesstoken)
}
})
@ -220,6 +116,8 @@ export default {
}
</script>
<style lang="scss"></style>
<style lang="scss">
</style>