diff --git a/src/assets/iot/fxj.png b/src/assets/iot/fxj.png new file mode 100644 index 0000000..8477112 Binary files /dev/null and b/src/assets/iot/fxj.png differ diff --git a/src/assets/iot/fxj_blue.png b/src/assets/iot/fxj_blue.png new file mode 100644 index 0000000..a54c95d Binary files /dev/null and b/src/assets/iot/fxj_blue.png differ diff --git a/src/assets/iot/monitor_1.png b/src/assets/iot/monitor_1.png new file mode 100644 index 0000000..d5b19f8 Binary files /dev/null and b/src/assets/iot/monitor_1.png differ diff --git a/src/assets/iot/monitor_1_1.png b/src/assets/iot/monitor_1_1.png new file mode 100644 index 0000000..b979ab4 Binary files /dev/null and b/src/assets/iot/monitor_1_1.png differ diff --git a/src/assets/iot/monitor_2.png b/src/assets/iot/monitor_2.png new file mode 100644 index 0000000..b5a4460 Binary files /dev/null and b/src/assets/iot/monitor_2.png differ diff --git a/src/assets/iot/monitor_2_1.png b/src/assets/iot/monitor_2_1.png new file mode 100644 index 0000000..5df0c21 Binary files /dev/null and b/src/assets/iot/monitor_2_1.png differ diff --git a/src/assets/iot/monitor_3.png b/src/assets/iot/monitor_3.png new file mode 100644 index 0000000..c40f7be Binary files /dev/null and b/src/assets/iot/monitor_3.png differ diff --git a/src/assets/iot/monitor_3_1.png b/src/assets/iot/monitor_3_1.png new file mode 100644 index 0000000..9e54755 Binary files /dev/null and b/src/assets/iot/monitor_3_1.png differ diff --git a/src/assets/iot/monitor_4.png b/src/assets/iot/monitor_4.png new file mode 100644 index 0000000..178118b Binary files /dev/null and b/src/assets/iot/monitor_4.png differ diff --git a/src/assets/iot/monitor_4_1.png b/src/assets/iot/monitor_4_1.png new file mode 100644 index 0000000..6115819 Binary files /dev/null and b/src/assets/iot/monitor_4_1.png differ diff --git a/src/assets/iot/monitor_5.png b/src/assets/iot/monitor_5.png new file mode 100644 index 0000000..75e4d41 Binary files /dev/null and b/src/assets/iot/monitor_5.png differ diff --git a/src/assets/iot/monitor_5_1.png b/src/assets/iot/monitor_5_1.png new file mode 100644 index 0000000..3a58cbc Binary files /dev/null and b/src/assets/iot/monitor_5_1.png differ diff --git a/src/assets/iot/monitor_6.png b/src/assets/iot/monitor_6.png new file mode 100644 index 0000000..baf16e8 Binary files /dev/null and b/src/assets/iot/monitor_6.png differ diff --git a/src/assets/iot/monitor_6_1.png b/src/assets/iot/monitor_6_1.png new file mode 100644 index 0000000..b0877a6 Binary files /dev/null and b/src/assets/iot/monitor_6_1.png differ diff --git a/src/assets/iot/monitor_7.png b/src/assets/iot/monitor_7.png new file mode 100644 index 0000000..ffaf3f2 Binary files /dev/null and b/src/assets/iot/monitor_7.png differ diff --git a/src/assets/iot/monitor_7_1.png b/src/assets/iot/monitor_7_1.png new file mode 100644 index 0000000..8658934 Binary files /dev/null and b/src/assets/iot/monitor_7_1.png differ diff --git a/src/assets/iot/monitor_8.png b/src/assets/iot/monitor_8.png new file mode 100644 index 0000000..5163279 Binary files /dev/null and b/src/assets/iot/monitor_8.png differ diff --git a/src/assets/iot/monitor_8_1.png b/src/assets/iot/monitor_8_1.png new file mode 100644 index 0000000..67fe103 Binary files /dev/null and b/src/assets/iot/monitor_8_1.png differ diff --git a/src/assets/iot/monitor_9.png b/src/assets/iot/monitor_9.png new file mode 100644 index 0000000..93c9651 Binary files /dev/null and b/src/assets/iot/monitor_9.png differ diff --git a/src/assets/iot/monitor_9_1.png b/src/assets/iot/monitor_9_1.png new file mode 100644 index 0000000..2ef61e1 Binary files /dev/null and b/src/assets/iot/monitor_9_1.png differ diff --git a/src/views/iot/tplink/camera/components/CameraPreviewForm.vue b/src/views/iot/tplink/camera/components/CameraPreviewForm.vue index 47aab13..700bc92 100644 --- a/src/views/iot/tplink/camera/components/CameraPreviewForm.vue +++ b/src/views/iot/tplink/camera/components/CameraPreviewForm.vue @@ -2,10 +2,96 @@ -
+
- - + + + + + + + + + + + + + + + +
+
+
+
+ 		+
+ 		+
+
+ + + + + 对讲 + 结束 + + {{ resolution }} + + 录制 + 结束 + + 截图 + 报警 + + + + 分屏 + + + + 画面旋转 + + + + + + 电话 @@ -29,6 +112,7 @@ ref="select" v-model:value="fishEyeDisplayMode" style="width: 120px" + @focus="focus" @change="setFishEyeDisplayMode" > 原图 @@ -38,8 +122,6 @@ 全景拉伸 - - 截图 @@ -50,7 +132,7 @@ 录制 画面翻转 - + 关闭 左右 上下 @@ -60,56 +142,22 @@ 报警 - - - - - 变焦 - - - - 缩小 - - - - 放大 - - - 对近焦 - - - 对远焦 - - - - - - - - - - - - - - - - - - - - - - - - -
- + + 变焦 + + + 缩小 + + + 放大 + + + 对近焦 + + + 对远焦 + + --> @@ -284,8 +332,8 @@ /** * 鱼眼画面显示模式 */ - function setFishEyeDisplayMode(){ - player.value.setFishEyeDisplayMode(fishEyeDisplayMode.value); + function setFishEyeDisplayMode(value){ + player.value.setFishEyeDisplayMode(value); } /** @@ -381,7 +429,6 @@ izPhone.value = false; } - /** * 缩放 */ @@ -416,24 +463,6 @@ } } - /** - * 变焦 - */ - function changeZoom(value){ - if(formData.sliderValue <= value){ - moveCtrl(10,1,1); - let delayTime = value - formData.sliderValue; - formData.sliderValue = value; - delayExecute(moveCtrl,[10,0,1],delayTime*4500); - }else{ - moveCtrl(9,1,1); - let delayTime = formData.sliderValue - value; - formData.sliderValue = value; - delayExecute(moveCtrl,[9,0,1],delayTime*4500); - } - - } - /** * 控制球机 */ @@ -480,37 +509,110 @@ height: 500px; background: #1a1a1a; } - - .ant-input-number { - width: 50px; + .buttonSpan{ + display: inline-flex; align-items: flex-end; + margin-left: 20px; + border: 1px solid #f6faff; + padding: 5px 10px; } - - tbody { - padding: 0; - margin: 0; + .buttonSpan:hover{ + border: 1px solid #1ea0fa; + color: #1ea0fa; + border-radius: 10px; + cursor: pointer; } - - tr { - padding: 0; - margin: 0; + .buttonImg{ + width:20px;margin-right:10px;vertical-align: bottom; } - - td { - padding: 0; - margin: 0; + .fxjImgUp{ + width:50px;height: 50px; + margin-right:10px;vertical-align: bottom; + cursor: pointer; + border-radius: 5px;transform: rotate(270deg); + background: url('../../../../../assets/iot/fxj.png') center/contain no-repeat; } - - td button{ - padding: 0; - margin: 0; - width: 30px !important; - height: 30px; - border-color:white; + .fxjImgUp:hover{ + background: url('../../../../../assets/iot/fxj_blue.png') center/contain no-repeat; } - - td button:hover{ - padding: 0; - margin: 0; - border-color:white !important; + .fxjImgLeft{ + width:50px;height: 50px;margin-right:10px;vertical-align: bottom;transform: rotate(180deg); + cursor: pointer; + background: url('../../../../../assets/iot/fxj.png') center/contain no-repeat; + } + .fxjImgLeft:hover{ + background: url('../../../../../assets/iot/fxj_blue.png') center/contain no-repeat; + } + .fxjImgDown{ + width:50px;height: 50px;margin-right:10px;vertical-align: bottom;transform: rotate(90deg); + cursor: pointer; + background: url('../../../../../assets/iot/fxj.png') center/contain no-repeat; + } + .fxjImgDown:hover{ + background: url('../../../../../assets/iot/fxj_blue.png') center/contain no-repeat; + } + .fxjImgRight{ + width:50px;height: 50px;margin-right:10px;vertical-align: bottom; + cursor: pointer; + background: url('../../../../../assets/iot/fxj.png') center/contain no-repeat; + } + .fxjImgRight:hover{ + background: url('../../../../../assets/iot/fxj_blue.png') center/contain no-repeat; + } + + .selectDiv{ + text-align: center; + border: 1px solid #f6faff; + padding: 3px 10px; + width: 100px; + margin-top:5px; + } + .selectDiv:hover{ + border: 1px solid #a2a3a3; + background: #a2a3a3; + color:white; + border-radius: 10px; + cursor: pointer; + } + .djImg{ + background: url('../../../../../assets/iot/monitor_1.png') left/contain no-repeat; + } + .djImg:hover{ + background: url('../../../../../assets/iot/monitor_1_1.png') left/contain no-repeat; + } + .qxdImg{ + background: url('../../../../../assets/iot/monitor_5.png') left/contain no-repeat; + } + .qxdImg:hover{ + background: url('../../../../../assets/iot/monitor_5_1.png') left/contain no-repeat; + } + .lzImg{ + background: url('../../../../../assets/iot/monitor_4.png') left/contain no-repeat; + } + .lzImg:hover{ + background: url('../../../../../assets/iot/monitor_4_1.png') left/contain no-repeat; + } + .jtImg{ + background: url('../../../../../assets/iot/monitor_3.png') left/contain no-repeat; + } + .jtImg:hover{ + background: url('../../../../../assets/iot/monitor_3_1.png') left/contain no-repeat; + } + .bjImg{ + background: url('../../../../../assets/iot/monitor_8.png') left/contain no-repeat; + } + .bjImg:hover{ + background: url('../../../../../assets/iot/monitor_8_1.png') left/contain no-repeat; + } + .fpImg{ + background: url('../../../../../assets/iot/monitor_6.png') left/contain no-repeat; + } + .fpImg:hover{ + background: url('../../../../../assets/iot/monitor_6_1.png') left/contain no-repeat; + } + .hmxzImg{ + background: url('../../../../../assets/iot/monitor_7.png') left/contain no-repeat; + } + .hmxzImg:hover{ + background: url('../../../../../assets/iot/monitor_7_1.png') left/contain no-repeat; } diff --git a/src/views/iot/tplink/camera/components/CameraPreviewModal.vue b/src/views/iot/tplink/camera/components/CameraPreviewModal.vue index c7ff39a..fb392a3 100644 --- a/src/views/iot/tplink/camera/components/CameraPreviewModal.vue +++ b/src/views/iot/tplink/camera/components/CameraPreviewModal.vue @@ -1,9 +1,16 @@