1

src/api/index.js

@@ -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) {

src/assets/css/main.css

@@ -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;
 }
 

src/assets/css/main.scss

@@ -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;
 }

src/views/page/videoMonitoring.vue

@@ -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 divW = this.$refs.videoPlayer.clientWidth
-            let divH = this.$refs.monitor.clientHeight
+            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 lang="scss"></style>
-  
-  </style>