src/api/index.js

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

src/assets/css/main.css

@@ -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--primary.el-button span, .el-button--success.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-prev .el-icon, .el-pagination .btn-next .el-icon {
-.el-pagination .btn-next .el-icon {
   color: #333;
 }
 
@@ -3681,8 +3574,7 @@
   font-weight: 700;
 }
 
-.el-pagination__total,
+.el-pagination__total, .el-pagination__jump {
-.el-pagination__jump {
   color: #fff;
 }
 

src/assets/css/main.scss

@@ -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;
+                                    width: 20px;height: 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--primary,.el-button--success {
-.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;
 }

src/views/page/videoMonitoring.vue

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