APP/pages/6170/deviceControl/index.vue

<template>
	<view>
		<!-- 使用自定义导航栏 -->
		<custom-navbar :title="navTitle" :showBack="true" color="#FFFFFF" rightIcon="/static/images/path.png"
			@right-click="uploadStartup"></custom-navbar>
		<view class="device-detail-container" :style="{ paddingTop: navBarHeight + 'px' }">
			<!-- 设备电量信息 -->
			<view class="battery-section">
				<view class="battery-sectionLeft">
					<image :src="itemInfo.devicePic" class="bipImg"></image>
				</view>
				<view>
					<view class="battery-v1">
						<image src="/static/images/dl.png" class="dlIMG"></image>
						<view>
							<view class="battery-v2">90%</view>
							<view class="battery-v3">电量</view>
						</view>
					</view>
					<view class="battery-v1">
						<image src="/static/images/nz.png" class="dlIMG"></image>
						<view>
							<view class="battery-v2">1小时</view>
							<view class="battery-v3">续航时间</view>
						</view>
					</view>
				</view>
				<view>

				</view>
			</view>

			<!-- 设备基本信息 -->
			<view class="info-card">
				<view class="info-row">
					<text class="info-label">IMEI号</text>
					<text class="info-value">123456</text>
				</view>
				<view class="info-row">
					<text class="info-label">设备状态</text>
					<text class="info-value status-running">运行中</text>
				</view>
				<view class="info-row">
					<text class="info-label">定位信息</text>
					<view class="info-value status-running">
						<view class="info-value status-running">114.72 30.28</view>
						<view class="info-value status-running">深圳市龙华区富源晟</view>
					</view>

				</view>

			</view>
			<view class="info-row">
				<text class="info-label">灯光亮度</text>
				<text class="info-value status-running">{{ sliderValue }}%</text>
			</view>

			<!-- 灯光亮度控制 -->
			<view class="control-card">
				<slider :value="sliderValue" min="0" max="100" activeColor="rgb(187, 230, 0)"
					backgroundColor="rgb(26, 26, 26)" :show-value="false" @changing="onSliderChanging"
					@change="onSliderChanging" />
			</view>

			<!-- 灯光模式选择 -->
			<view class="mode-section">
				<view class="mode-buttons">
					<view class="mode-v1">
						<view class="mode-v2" @click="selectMode('main')">
							<image src="/static/images/set.png" class="setIMG"></image>
							<view>
								<view class="battery-v2">灯光模式</view>
								<view class="mode-v3">{{ currentMainMode }}</view>
							</view>
						</view>
					</view>
					<view class="mode-v1">
						<view class="mode-v2" @click="lasermode">
							<image src="/static/images/jg.png" class="setIMG"></image>
							<view>
								<view class="battery-v2">激光模式</view>
								<!--<view class="mode-v3">{{currentSecondaryMode}}</view> -->
							</view>
						</view>
					</view>
					<view class="mode-v1">
						<view class="mode-v2" @click="uploadStartup">
							<image src="/static/images/path7.png" class="setIMG"></image>
							<view>
								<view class="battery-v2">开机画面</view>
								<view class="mode-v3">上传</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 人员信息登记 -->
			<view class="form-section">
				<view class="mode-buttons">
					<view class="section-title">人员信息登记</view>
					<!-- <button class="send-btn">发送</button> -->
					<view class="right-icons">
						<uni-icons @click="toggleForm" :type="isFormExpanded ? 'arrowup' : 'down'" size="20"
							color="rgba(255, 255, 255, 0.87" class="toggle-icon" />
					</view>
				</view>
				<view class="form-content" v-if="isFormExpanded">
					<button class="send-btn1" @click="sendPersonnelInfo">发送</button>
					<view class="form-row">
						<text class="form-label">单位：</text>
						<input class="form-input" placeholder="请输入单位" v-model="personnelInfo.unit" />
					</view>
					<view class="form-row">
						<text class="form-label">姓名：</text>
						<input class="form-input" placeholder="请输入姓名" v-model="personnelInfo.name" />
					</view>
					<view class="form-row">
						<text class="form-label">职位：</text>
						<input class="form-input" placeholder="请输入职位" v-model="personnelInfo.position" />
					</view>
					<view class="form-row">
						<text class="form-label">ID：</text>
						<input class="form-input" placeholder="请输入ID号" v-model="personnelInfo.id" />
					</view>
				</view>
			</view>
			<!-- 人员信息登记 -->
			<view class="form-section">
				<view class="mode-buttons">
					<view class="section-title">发送信息</view>
					<button class="send-btn" @click="sendTextMessage">发送</button>
				</view>

				<view class="form-row">
					<input class="form-input" placeholder="请输入文字" v-model="messageToSend" />
				</view>
			</view>
			<!-- 产品信息 -->
			<view class="section-title">产品信息</view>
			<view class="mode-buttons">
				<view class="mode_1" @click="productparams">
					<image src="/static/images/cp.png" mode="" class="cpIMG"></image>
					<view class="">产品参数</view>
				</view>
				<view class="mode_1" @click="operatingInst">
					<image src="/static/images/sm.png" mode="" class="cpIMG"></image>
					<view class="">操作说明</view>
				</view>
				<view class="mode_1" @click="operatingVideo">
					<image src="/static/images/sp.png" mode="" class="cpIMG"></image>
					<view class="">操作视频</view>
				</view>
			</view>
		</view>
		<!-- 弹框 -->
		<view class="agreement-mask" v-if="lightModeA">
			<!-- 协议弹窗 -->
			<view class="agreement-popup" @click.stop>
				<!-- 标题 -->
				<view class="popup-title"> {{ popupTitle }}</view>
				<view class="popup-content">
					<view v-for="(item, index) in items" :key="index">
						<view class="item" :class="{'selected': item.selected}" @click="onItemClick(index)">
							<image :src="item.image" class="setIMG"></image>
							{{item.text}}
						</view>
					</view>
				</view>
				<!-- 按钮组 -->
				<view class="popup-buttons">
					<button class="agree" @click="handleSumbit">确定</button>
				</view>
			</view>
		</view>
		<!-- 上传开机画面弹框 -->
		<view class="agreement-mask" v-if="lightModeB">
			<!-- 上传画面弹窗 -->
			<view class="agreement-popup">
				<!-- 标题 -->
				<view class="popup-title">上传开机画面</view>
				<view class="popup-content">
					<view class="example-body">
						<uni-file-picker limit="1"></uni-file-picker>
						<view class="example_title">点击上传图片</view>
					</view>
				</view>
				<!-- 按钮组 -->
				<view class="popup-buttons">
					<button class="agree" @click="handleupload">确定</button>
				</view>
			</view>
		</view>
		<!--===================== 激光提示框================== -->
		<view class="agreement-mask" v-if="lightModeC">
			<!-- 上传画面弹窗 -->
			<view class="agreement-popupC">
				<!-- 标题 -->
				<view class="popup-title">确认开启激光模式？</view>
				<view class="popup-content">
					<view class="popup-Title">
						<view>注意事项</view>
						<view>1.禁止直视光源或反射面！</view>
						<view>2.避免直射人或易燃物！</view>
						<view>3.需佩戴相应专业防护眼镜！</view>
					</view>
				</view>
				<!-- 按钮组 -->
				<view class="popup-buttons">
					<button class="btn disagree" @click="handleDisagree">取消</button>
					<button class="btn agreeBtn" @click="handleBtn">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MqttClient from '@/utils/mqtt.js';

	export default {
		data() {
			return {
				mainMode: 'string',
				secondaryMode: 'string',
				navBarHeight: 70 + uni.getSystemInfoSync().statusBarHeight,
				navTitle: "",
				sliderValue: 50,
				lightModeA: false,
				currentMainMode: '强光模式',
				currentSecondaryMode: '泛光模式',
				lightModeB: false,
				lightModeC: false, //激光提示框
				items: [],
				isFormExpanded: true, // 默认展开
				deviceID: '',
				itemInfo: {},
				mqttClient: null,
				messageToSend: '',
				personnelInfo: {
					unit: '',
					name: '',
					position: '',
					id: ''
				}
			}
		},
		computed: {
			popupTitle() {
				return this.modeType === 'main' ? '灯光模式' : '激光模式';
			}
		},
		methods: {
			onSliderChanging(e) {
				this.sliderValue = e.detail.value;
			},
			selectMode(type) {
				this.modeType = type;
				this.lightModeA = true;
				if (type === 'main') {
					this.items = [{
							text: '强光',
							selected: this.currentMainMode === '强光模式',
							image: '/static/images/sett.png'
						},
						{
							text: '弱光',
							selected: this.currentMainMode === '弱光模式',
							image: '/static/images/sett.png'
						},
						{
							text: '爆闪',
							selected: this.currentMainMode === '爆闪模式',
							image: '/static/images/bs.png'
						},
						{
							text: '泛光',
							selected: this.currentMainMode === '泛光模式',
							image: '/static/images/settt.png'
						},

					];
				}
			},
			// 激光模式
			lasermode() {
				this.lightModeC = true
			},
			toggleForm() {
				this.isFormExpanded = !this.isFormExpanded;
			},

			onItemClick(index) {
				const selectedItem = this.items[index];
				console.log(selectedItem.text, 'selectedItem.text');
				if (selectedItem.text === '激光') {
					this.lightModeC = true
					this.selectedItemIndex = index; // 记录当前选择的索引
				} else {
					this.updateSelectedItem(index);
				}
			},
			updateSelectedItem(index) {
				this.items = this.items.map((item, i) => ({
					...item,
					selected: i === index
				}));
				if (this.modeType === 'main') {
					this.currentMainMode = this.items[index].text + '模式';
				} else {
					this.currentSecondaryMode = this.items[index].text + '模式';
				}
				this.showPopup = false; // 关闭弹窗
			},
			// 确认
			handleSumbit() {
				this.lightModeA = false
			},
			// 上传开机画面
			uploadStartup() {
				this.lightModeB = true
			},
			// 上传开机画面确认按键
			handleupload() {
				this.lightModeB = false
			},

			// 操作说明
			operatingInst() {
				uni.navigateTo({
					url: `/pages/common/operatingInstruct/index?id=${this.deviceID}`
				})
			},
			// 产品参数
			productparams() {
				uni.navigateTo({
					url: `/pages/common/productDes/index?id=${this.deviceID}`
				})
			},
			// 操作视频
			operatingVideo() {
				uni.navigateTo({
					url: `/pages/common/operationVideo/index?id=${this.deviceID}`
				})

			},
			// 同意
			handleBtn() {
				this.lightModeC = false
				this.updateSelectedItem(this.selectedItemIndex); // 使用记录的索引来更新选择项
				this.lightModeA = false //关闭大弹框
			},
			// 不同意
			handleDisagree() {
				this.lightModeC = false
			},
			// 发送人员信息
			sendPersonnelInfo() {
				if (!this.mqttClient || !this.mqttClient.client.isConnected()) {
					uni.showToast({ title: 'MQTT未连接', icon: 'none' });
					return;
				}
				const topic = `device/command/${this.deviceID}/personnel`;
				const message = JSON.stringify(this.personnelInfo);
				this.mqttClient.publish(topic, message);
				uni.showToast({ title: '人员信息已发送', icon: 'success' });
			},
			// 发送文本消息
			sendTextMessage() {
				if (!this.mqttClient || !this.mqttClient.client.isConnected()) {
					uni.showToast({ title: 'MQTT未连接', icon: 'none' });
					return;
				}
				if (!this.messageToSend) {
					uni.showToast({ title: '请输入要发送的文字', icon: 'none' });
					return;
				}
				const topic = `device/command/${this.deviceID}/message`;
				this.mqttClient.publish(topic, this.messageToSend);
				uni.showToast({ title: '消息已发送', icon: 'success' });
			}
		},
		onLoad(options) {
			const eventChannel = this.getOpenerEventChannel();
			// 监听 'detailData' 事件，获取传过来的数据
			eventChannel.on('deviceControl', (data) => {
				this.itemInfo = data.data;
				this.deviceID = data.data.id;
				this.navTitle = data.data.deviceName;
				console.log('Received detail data:', this.navTitle);

				// 初始化并连接MQTT
				this.mqttClient = new MqttClient();
				this.mqttClient.connect(() => {
					console.log('MQTT 连接成功，开始订阅主题');
					// 订阅来自设备的状态更新
					const statusTopic = `device/status/${this.deviceID}`;
					this.mqttClient.subscribe(statusTopic, (payload) => {
						console.log(`收到来自 ${statusTopic} 的消息:`, payload);
						uni.showModal({
							title: '收到设备消息',
							content: payload,
							showCancel: false
						});
					});
				});
			});
			// 如果需要向调用页面返回数据，可以触发 'ack' 事件
			eventChannel.emit('ack', {})
		},
		onUnload() {
			// 页面卸载时断开MQTT连接
			if (this.mqttClient) {
				this.mqttClient.disconnect();
			}
		},

	}
</script>

<style>
	.device-detail-container {
		padding: 30rpx;
		background: #121212;
		min-height: 100vh;
	}

	.status-bar {
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;
	}

	.time {
		font-size: 36rpx;
		font-weight: bold;
	}

	.battery {
		font-size: 36rpx;
	}

	.battery-section {
		background-color: rgb(26, 26, 26);
		border-radius: 16rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		align-items: center;
	}

	.battery-info,
	.duration {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.bipImg {
		width: 204rpx;
		height: 144rpx;
		margin-top: 30rpx;
	}

	.dlIMG {
		width: 52rpx;
		height: 52rpx;
	}

	.cpIMG {
		width: 66rpx;
		height: 66rpx;
	}

	.battery-sectionLeft {
		width: 308rpx;
		height: 220rpx;
		background: rgba(42, 42, 42, 0.5);
		border-radius: 16rpx;
		text-align: center;
		align-items: center;
		line-height: 220rpx;
	}

	.percentage {
		font-size: 48rpx;
		font-weight: bold;
		color: #007AFF;
	}

	.label {
		font-size: 28rpx;
		color: #666;
		margin-top: 10rpx;
	}

	.battery-v1 {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}


	.battery-v2 {
		color: rgba(255, 255, 255, 0.87);
		margin-left: 18rpx;
		font-size: 32rpx;
	}

	.battery-v3 {
		color: rgba(255, 255, 255, 0.6);
		margin-left: 25rpx;
		font-size: 26rpx;
	}







	.mode-v3 {
		color: rgba(255, 255, 255, 0.6);
		font-size: 26rpx;
		padding-top: 10rpx;
	}

	.info-card {
		background-color: rgb(26, 26, 26);
		border-radius: 16rpx;
		padding: 10rpx 30rpx 5rpx 30rpx;
		margin-bottom: 20rpx;

	}

	.info-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.info-label {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.87);
	}

	.info-value {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.87);
	}

	.status-running {
		color: rgba(255, 255, 255, 0.6);
		text-align: end;
	}

	.control-card {
		background-color: rgb(26, 26, 26);
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		position: relative;
	}

	.light {
		position: absolute;
		/* top:10rpx; */
		color: rgba(74, 74, 74, 0.87);
		top: 58rpx;
		left: 108rpx
	}

	.section-title {
		font-size: 32rpx;
		margin-bottom: 20rpx;
		display: block;
		color: rgba(255, 255, 255, 0.87);
	}

	.slider-container {
		display: flex;
		align-items: center;
	}

	.slider {
		flex: 1;
		margin: 0 20rpx;
	}

	.mode-buttons {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.mode_1 {
		width: 180rpx;
		height: 180rpx;
		border-radius: 16rpx;
		background: rgb(26, 26, 26);
		align-items: center;
		text-align: center;
		color: rgba(255, 255, 255, 0.6);
		padding-top: 37rpx;
	}

	.mode-v1 {
		background: #1A1A1A;
		border-radius: 18rpx;
		height: 150rpx;
		margin-bottom: 20rpx;
		width: 47%;
		display: flex;
		text-align: center;
	}

	.mode-v2 {
		display: flex;
		align-items: center;
		text-align: center;
		margin-left: 40rpx;

	}

	.example-body {
		position: absolute;
		left: 50%;
		top: 70%;
		width: 100%;
		transform: translate(-17%, -100%);

	}

	.uni-file-picker__container {
		width: 200rpx !important;
		border: 1px solid rgb(58, 58, 58);
	}

	:deep .file-picker__box {
		width: 40% !important;
	}

	.example_title {
		padding-top: 20rpx;
		color: rgba(255, 255, 255, 0.87);
	}

	.mode-btn {
		width: 48%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #f5f5f5;
		color: #333;
		border-radius: 8rpx;
		font-size: 28rpx;
		border: none;
	}

	.mode-btn.active {
		background-color: #007AFF;
		color: #fff;
	}

	.form-section {
		background-color: rgb(26, 26, 26);
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;

	}

	.form-row {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		background: rgba(42, 42, 42, 1);
		border-radius: 16rpx;
		padding-left: 20rpx;
	}

	.form-label {
		font-size: 32rpx;
		color: rgba(255, 255, 255, 0.87);
	}

	.form-input {
		height: 80rpx;
		border: 1rpx solid transparent;
		font-size: 32rpx;
		color: rgba(255, 255, 255, 0.87);
	}

	.product-section {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.product-tabs {
		display: flex;
		margin-top: 20rpx;
	}

	.tab {
		padding: 15rpx 30rpx;
		font-size: 28rpx;
		color: #666;
		border-bottom: 4rpx solid transparent;
	}

	.tab.active {
		color: #007AFF;
		border-bottom-color: #007AFF;
	}

	.action-buttons {
		padding: 30rpx 0;
	}

	.send-btn {
		background-color: rgb(187, 230, 0);
		color: rgba(35, 35, 35, 0.87);
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 16rpx;
		font-size: 26rpx;
		width: 112rpx;
		white-space: nowrap;
		text-align: center;
		position: absolute;
		right: 70rpx;

	}

	.send-btn1 {
		background-color: rgb(187, 230, 0);
		color: rgba(35, 35, 35, 0.87);
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 16rpx;
		font-size: 26rpx;
		width: 112rpx;
		white-space: nowrap;
		text-align: center;
		position: absolute;
		right: 0rpx;
		top: -70rpx
	}


	/* 遮罩层 */
	.agreement-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}

	/* 弹窗主体 */
	.agreement-popup {
		width: 100%;
		height: 50%;
		background-color: rgb(42, 42, 42);
		border-radius: 60rpx 60rpx 0rpx 0rpx;
		padding: 40rpx;
		box-sizing: border-box;
		position: absolute;
		bottom: 0rpx;
	}

	.agreement-popupC {
		width: 80%;
		background-color: rgb(42, 42, 42);
		border-radius: 40rpx;
		padding: 40rpx;
		box-sizing: border-box;
		border: 1px solid rgba(255, 200, 78, 1);
	}

	.popup-Title {
		color: rgba(255, 200, 78, 1);
	}

	/* 标题 */
	.popup-title {
		font-size: 36rpx;
		text-align: center;
		margin-bottom: 30rpx;
		color: rgba(255, 255, 255, 0.87);
	}

	/* 内容文本 */
	.popup-content {
		font-size: 30rpx;
		line-height: 1.6;
		color: rgba(255, 255, 255, 0.87);
		margin-bottom: 50rpx;
	}

	.item {
		padding: 10px;
		margin: 5px 0;
		display: flex;
		align-items: center;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.setIMG {
		width: 24px;
		height: 24px;
		margin-right: 10px;
	}

	.item.selected {
		background-color: rgb(58, 58, 58);
		color: rgba(255, 255, 255, 0.87);
		border-radius: 8rpx;
	}

	/* 按钮容器 */
	.popup-buttons {
		display: flex;
		justify-content: space-between;
	}

	/*确定按钮 */
	.agree {
		background-color: rgb(187, 230, 0);
		color: #232323;
		border: none;
		font-size: 24rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		width: 100%;
		position: absolute;
		bottom: 0rpx;
		left: 0rpx
	}

	/* 通用按钮样式 */
	.btn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		font-size: 32rpx;
		margin: 0 20rpx;
	}

	/* 不同意按钮 */
	.disagree {
		background-color: transparent;
		color: rgba(255, 255, 255, 0.87);
		border: 1px solid rgba(255, 200, 78, 0.7);
		font-size: 24rpx;
		color: rgba(255, 200, 78, 1);
	}

	/* 同意按钮 */
	.agreeBtn {
		background-color: rgba(255, 200, 78, 1);
		color: #232323;
		border: none;
		font-size: 24rpx;
	}

	.right-icons {
		/* display: flex; */
		align-items: center;
	}

	.toggle-icon {
		cursor: pointer;
		font-size: 16px;
		margin-top: -40rpx;
	}

	.icon {
		font-size: 14px;
		color: #fff;
	}

	.form-content {
		transition: all 0.3s ease;
		margin-top: 60rpx;
		position: relative;
	}
</style>