1 #117
|
|
@ -379,7 +379,14 @@ 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) {
|
||||
|
|
|
|||
|
|
@ -1978,13 +1978,118 @@
|
|||
.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: 100%;
|
||||
width: calc(100% - 400px);
|
||||
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;
|
||||
|
|
@ -3532,7 +3637,8 @@
|
|||
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;
|
||||
}
|
||||
|
||||
|
|
@ -3557,7 +3663,8 @@
|
|||
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;
|
||||
}
|
||||
|
||||
|
|
@ -3574,7 +3681,8 @@
|
|||
font-weight: 700;
|
||||
}
|
||||
|
||||
.el-pagination__total, .el-pagination__jump {
|
||||
.el-pagination__total,
|
||||
.el-pagination__jump {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -256,6 +256,7 @@
|
|||
.warning-btn {
|
||||
justify-content: flex-end;
|
||||
margin-top: -70px;
|
||||
|
||||
.btn.green {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -329,6 +330,7 @@
|
|||
margin-left: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
|
@ -445,6 +447,7 @@
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
.header-warning {
|
||||
width: 75px;
|
||||
height: 100%;
|
||||
|
|
@ -452,6 +455,7 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
width: 260px;
|
||||
display: flex;
|
||||
|
|
@ -567,14 +571,17 @@
|
|||
>span {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
>.title {
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
&.input-sel-w180 {
|
||||
.el-dropdown-link {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dropdown-link {
|
||||
width: 300px;
|
||||
height: 44px;
|
||||
|
|
@ -656,11 +663,13 @@
|
|||
color: #859BB6;
|
||||
}
|
||||
}
|
||||
|
||||
&.input-main-w120 {
|
||||
input {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
&.input-disabled {
|
||||
input {
|
||||
background: transparent;
|
||||
|
|
@ -668,16 +677,19 @@
|
|||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.input-main-w260 {
|
||||
input {
|
||||
width: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
&.input-main-w80 {
|
||||
input {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
&.input-main-w100 {
|
||||
input {
|
||||
width: 100px;
|
||||
|
|
@ -747,18 +759,22 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
@ -969,6 +985,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text-tips {
|
||||
font-size: 16px;
|
||||
font-family: Microsoft YaHei;
|
||||
|
|
@ -976,6 +993,7 @@
|
|||
color: #fff;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.title-tips-bold {
|
||||
font-size: 18px;
|
||||
font-family: Microsoft YaHei;
|
||||
|
|
@ -1010,6 +1028,7 @@
|
|||
.input-sel-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.el-range-separator {
|
||||
font-size: 16px;
|
||||
font-family: Microsoft YaHei;
|
||||
|
|
@ -1018,6 +1037,7 @@
|
|||
padding: 0 8px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
font-family: Microsoft YaHei;
|
||||
|
|
@ -1025,17 +1045,20 @@
|
|||
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;
|
||||
|
|
@ -1049,13 +1072,16 @@
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
.m-b-20 {
|
||||
margin: 10px 8px !important;
|
||||
}
|
||||
|
||||
.flex-warp {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 0 8px;
|
||||
padding: 0 20px;
|
||||
|
|
@ -1071,22 +1097,27 @@
|
|||
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;
|
||||
|
|
@ -1242,6 +1273,7 @@
|
|||
font-weight: 400;
|
||||
color: #A8B6C8;
|
||||
}
|
||||
|
||||
.upload {
|
||||
.upload-view {
|
||||
width: 520px;
|
||||
|
|
@ -1361,9 +1393,11 @@
|
|||
|
||||
.input-sel {
|
||||
margin: 15px 0 30px;
|
||||
|
||||
>span {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
>.title {
|
||||
|
||||
margin-bottom: 11px;
|
||||
|
|
@ -1788,6 +1822,7 @@
|
|||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 50px 30px 0;
|
||||
|
||||
.list-view {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
|
|
@ -1795,6 +1830,7 @@
|
|||
align-items: center;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
|
@ -1819,6 +1855,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.red {
|
||||
color: rgba(252, 125, 106, 1);
|
||||
}
|
||||
|
|
@ -1826,6 +1863,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.realTime {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -1970,6 +2008,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.red {
|
||||
color: rgba(252, 125, 106, 1);
|
||||
}
|
||||
|
|
@ -1991,18 +2030,23 @@
|
|||
.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%;
|
||||
|
|
@ -2013,6 +2057,7 @@
|
|||
padding: 10px;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
|
||||
>div {
|
||||
height: 60px;
|
||||
min-width: 105px;
|
||||
|
|
@ -2021,15 +2066,18 @@
|
|||
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;
|
||||
|
|
@ -2045,10 +2093,12 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.left-view {
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
|
|
@ -2058,15 +2108,120 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
|
||||
// overflow: hidden;
|
||||
>div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.video-js {
|
||||
width: 100%;
|
||||
width: calc(100% - 400px);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -2124,15 +2279,19 @@
|
|||
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;
|
||||
|
|
@ -2373,6 +2532,7 @@
|
|||
|
||||
|
||||
}
|
||||
|
||||
.no-sel {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
|
|
@ -2391,6 +2551,7 @@
|
|||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dataAnalysis {
|
||||
.page-content {
|
||||
.search-flex {
|
||||
|
|
@ -3033,6 +3194,7 @@
|
|||
top: 30px;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.vrcode-model-title {
|
||||
width: 100%;
|
||||
height: 43px;
|
||||
|
|
@ -3215,14 +3377,17 @@
|
|||
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);
|
||||
|
|
@ -3700,19 +3865,21 @@
|
|||
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
@ -3736,28 +3903,37 @@
|
|||
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;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 240 B |
Binary file not shown.
|
After Width: | Height: | Size: 237 B |
Binary file not shown.
|
After Width: | Height: | Size: 233 B |
Binary file not shown.
|
After Width: | Height: | Size: 240 B |
Binary file not shown.
|
After Width: | Height: | Size: 677 B |
Binary file not shown.
|
After Width: | Height: | Size: 603 B |
Binary file not shown.
|
After Width: | Height: | Size: 214 B |
Binary file not shown.
|
After Width: | Height: | Size: 228 B |
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="formula realTime videoMonitoring">
|
||||
<div class="formula realTime videoMonitoring" @mouseup="upEnd()">
|
||||
<div class="page-content new-data">
|
||||
<div class="table-title">
|
||||
<img src="../../assets/image/real-time.png" alt="" />
|
||||
|
|
@ -10,6 +10,48 @@
|
|||
<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>
|
||||
|
|
@ -22,6 +64,7 @@
|
|||
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 {
|
||||
|
|
@ -31,6 +74,7 @@ import video_zhCN from 'video.js/dist/lang/zh-CN.json'
|
|||
statusInterval: null,//status状态的Interval
|
||||
player: null,
|
||||
url: '',
|
||||
nowNum: -1,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -78,10 +122,69 @@ import video_zhCN from 'video.js/dist/lang/zh-CN.json'
|
|||
}, 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.monitor.clientWidth
|
||||
let divH = this.$refs.monitor.clientHeight
|
||||
let divW = this.$refs.videoPlayer.clientWidth
|
||||
let divH = this.$refs.videoPlayer.clientHeight
|
||||
this.player = new EZUIKit.EZUIKitPlayer({
|
||||
id: 'video-js', // 视频容器ID
|
||||
accessToken: accessToken,
|
||||
|
|
@ -107,6 +210,7 @@ import video_zhCN from 'video.js/dist/lang/zh-CN.json'
|
|||
// 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)
|
||||
}
|
||||
})
|
||||
|
|
@ -116,8 +220,6 @@ import video_zhCN from 'video.js/dist/lang/zh-CN.json'
|
|||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
<style lang="scss"></style>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue