pingpu_H5/pages/camera/details.vue

<template>
	<!-- 可视监控详情 -->
	<view class="page-panel">
		<!-- 监控区域 -->
		<view class="monitor-area">
			<image src="@/static/demo/demo1.png" mode="widthFix"></image>
		</view>
		<!-- 监控工具 -->
		<view class="monitor-tools">
			<view class="row-center tools-btn" @click="controlDirection(8)">
				<text>+</text>
			</view>
			<view class="tools-control">
				<view class="slice up" @click="controlDirection(0)"></view>
				<view class="slice down" @click="controlDirection(1)"></view>
				<view class="slice left" @click="controlDirection(2)"></view>
				<view class="slice right" @click="controlDirection(3)"></view>
				<view class="tools-btn"></view>
			</view>
			<view class="row-center tools-btn" @click="controlDirection(9)">
				<text>━</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCameraAddress,
		controlCamera
	} from '@/api/camera.js'
	export default {
		data() {
			return {
				deviceId: '', // 设备号
				// 播放地址
				cameraAddress: '',
				// 控制参数
				controlParams: {
					device_id: '', //设备号
					ctrl: 'move', //move 控制球机转动   stop 停止球机转动， 转动后需调用停止接口，不然会造成球机一直转
					movenum: 0, //	0-上,1-下,2-左,3-右,8-放大,9-缩小
				}
			};
		},
		onLoad(options) {
			this.deviceId = options.id;
		},
		methods: {
			// 获取监控播放地址
			async getCameraAddress() {
				device_id
				getCameraAddress({
					device_id: this.deviceId
				})
			},
			// 控制摄像机
			async controlDirection(movenum) {
				this.controlParams.movenum = movenum;
				this.controlParams.ctrl = 'move'
				let res = await controlCamera(this.controlParams);
				if (!res.data) {
					return;
				}
				this.controlParams.ctrl = 'stop'
				await controlCamera(this.controlParams);
			}
		}
	}
</script>

<style lang="scss">
	// 监控区域
	.monitor-area {
		overflow: hidden;
		height: 510rpx;
		border-radius: 5rpx;
		margin-bottom: 24rpx;
	}

	.monitor-tools {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx;
	}

	.tools-control {
		position: relative;
		width: 305rpx;
		height: 305rpx;
		margin: 0 60rpx;
		background-image: linear-gradient(to right, #323e4d, #444d5e);
		border-radius: 100%;

		.tools-btn {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
		}

		.slice {
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 97rpx;
			height: 97rpx;
			margin: auto;

			&:before {
				content: '';
				display: block;
				width: 0;
				margin-right: -24rpx;
				border-color: transparent transparent transparent $color-primary;
				border-width: 24rpx;
				border-style: solid;
				transform: scaleY(0.6);
			}

			&:active {
				opacity: .3;
			}
		}

		.up {
			top: 0;
			left: 0;
			right: 0;
			transform: rotateZ(-90deg);
		}

		.down {
			bottom: 0;
			left: 0;
			right: 0;
			transform: rotateZ(90deg);
		}

		.left {
			top: 0;
			bottom: 0;
			left: 0;
			transform: rotateZ(180deg);
		}

		.right {
			top: 0;
			bottom: 0;
			right: 0;

		}
	}

	.tools-btn {
		width: 110rpx;
		height: 110rpx;

		font-size: 40rpx;
		font-weight: bold;
		color: $color-primary;
		line-height: 1;

		background: #434C5D;
		border-radius: 100%;

		&:active {
			text {
				opacity: .3;
			}

		}
	}
</style>