pref: app、mp端 优化代码

@@ -193,7 +193,7 @@
 								.identifier === e[curr].key)
 							acc.push(
 								`${findAttribute.name}:${e[curr].realValue}${findAttribute.detail?.dataType?.specs?.unit?.key}`
-								)
+							)
 						}
 					}))
 					return acc
@@ -214,11 +214,14 @@
 					const findOperation = operation.find(findItem => findItem.value === item.login)?.symbol
 					return findOperation + item.logicValue
 				})
-				this.formatAlarmConditionText = format
+				this.formatAlarmConditionText = format.filter(Boolean).join(',')
+				console.log(this.formatAlarmConditionText);
 			},
 			async formatAlarmDevice(e) {
 				const keys = Object.keys(e)
 				const dataFormat = await this.handleAlarmDetailFormat(keys);
+				if (!dataFormat) this.formatDeviceText = ''
+				if (Array.isArray(dataFormat) && dataFormat.length === 0) this.formatDeviceText = ''
 				this.formatDeviceText = dataFormat.map(item => item.name).join(',')
 			},
 			async handleAlarmDetailFormat(keys) {

@@ -32,13 +32,12 @@
 	export default {
 		props: {
 			total: Number,
-			totalText:[Number,String]
+			totalText: [Number, String]
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-
 	/deep/ .u-button--primary {
 		background-color: #377dff !important;
 		border-color: #377dff !important;

-<template>
-	<view class="w-100 modal-content">
-		<view class="header-title">命令下发</view>
-		<view class="u-flex">
-			<text class="type-text">下发类型:</text>
-			<u-radio-group v-model="commandType" placement="row">
-				<u-radio activeColor="#3388FF" label="单向" name="OneWay"></u-radio>
-				<view style="margin: 0 20rpx;"></view>
-				<u-radio activeColor="#3388FF" label="双向" name="TwoWay"></u-radio>
-			</u-radio-group>
-		</view>
-		<view class="content-body">
-			<div class="u-flex u-row-between">
-				<u--textarea :placeholder="`请输入下发内容${isShowTCP?'(字符串格式)':'(json格式)'}`"
-					v-model="inputCommandVal" />
-				<u-icon v-if="!isShowTCP" @click="handleCopy(copyTextValue)" name="question-circle"
-					color="#2979ff" size="28" class="ml-10">
-				</u-icon>
-	
-			</div>
-		</view>
-		<view class="button-group">
-			<view>
-				<u-button :customStyle="{ color: '#333' }" color="#e3e3e5" shape="circle" text="取消"
-					@click="cancelCommand"></u-button>
-			</view>
-			<view>
-				<u-button color="#3388ff" shape="circle" text="确认" @click="confirmCommand"></u-button>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	import {
-		useShowModal
-	} from '@/plugins/utils.js'
-
-	export default {
-		props: {
-			isShowTCP: Boolean
-		},
-		data() {
-			return {
-				current: 0,
-				commandType: 'OneWay',
-				inputCommandVal: '',
-				copyTextValue: {
-					"method": "methodThingskit",
-					"params": {
-						"pin": 7,
-						"value": 1
-					}
-				}
-			}
-		},
-		methods: {
-			cancelCommand() {
-				this.$emit('cancelCommand')
-			},
-			confirmCommand() {
-				this.$emit('confirmCommand', this.commandType, this.inputCommandVal)
-			},
-			handleCopy(value) {
-				useShowModal(JSON.stringify(value), '命令下发', '复制内容').then(res => {
-					uni.setClipboardData({
-						data: JSON.stringify(value),
-						success: () => {
-							uni.showToast({
-								title: '复制成功'
-							})
-						}
-					});
-				})
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.modal-content {
-		width: 720rpx;
-		padding: 0 30rpx;
-		background-color: white;
-
-		.header-title {
-			text-align: center;
-			font-weight: 700;
-			margin-bottom: 40rpx;
-		}
-
-		.type-text {
-			color: #333;
-			font-size: 14px;
-			font-weight: 700;
-			margin-right: 30rpx;
-		}
-
-		.content-body {
-			margin-top: 28rpx;
-			width: 100%;
-		}
-
-		.button-group {
-			display: flex;
-			margin-top: 40rpx;
-			justify-content: space-between;
-
-			view {
-				width: 300rpx;
-			}
-		}
-	}
-</style>
\ No newline at end of file

@@ -6,7 +6,8 @@
 		<view class="basic-header">
 			<view class="u-flex">
 				<view class="pl-3">
-					<u-icon v-if="deviceDetail.deviceInfo.longitude !== ''" @click="handleClick" name="map-fill"></u-icon>
+					<u-icon v-if="deviceDetail.deviceInfo.longitude !== ''" @click="handleClick"
+						name="map-fill"></u-icon>
 				</view>
 				<view class="basic-text text-clip ml-2">
 					{{ deviceDetail.alias ? deviceDetail.alias : deviceDetail.name }}
@@ -16,13 +17,12 @@
 				</view>
 			</view>
 			<!-- 命令下发 设备在线并且不是网关子设备 -->
-			<!-- v-if="deviceDetail.deviceState === 'ONLINE' && deviceDetail.deviceType !== 'SENSOR'" -->
-			<view class="mr-2">
+			<view class="mr-2" v-if="deviceDetail.deviceState === 'ONLINE' && deviceDetail.deviceType !== 'SENSOR'">
 				<!-- #ifdef MP -->
 				<u-button type="primary" shape="circle" size="mini" text="下发命令" @click="handleMpShowModal" />
 				<!-- #endif -->
 				<!-- #ifdef APP-PLUS -->
-				<view @tap="handleAppShowModal" data-target="Modal">
+				<view class="cu-item" @tap="handleAppShowModal" data-target="Modal">
 					<text>下发命令</text>
 				</view>
 				<!-- #endif -->
@@ -62,108 +62,196 @@
 		</view>
 		<!-- 命令下发 -->
 		<!-- #ifdef APP-PLUS -->
-		<!-- 原生弹窗 -->
+		<!-- 原生弹窗 封装成子组件无效 -->
 		<view class="cu-modal" :class="modalName == 'Modal' ? 'show' : ''">
-			<view class="cu-dialog" style="padding: 300rpx 0 70rpx">
-				<app-command-issuance :isShowTCP="isShowTCP" @hideModal="hideMpModal" @cancelCommand="cancelCommand" @confirmCommand="confirmCommand"></app-command-issuance>
+			<view class="cu-dialog">
+				<view class="app-command-content">
+					<view class="app-command-text">
+						<text>命令下发</text>
+					</view>
+					<view class="app-command-type">
+						<text>下发类型</text>
+						<view class="mr-2">
+							<radio-group @change="radioChange" class="flex mr-1">
+								<label v-for="(item, index) in commandTypeList" :key="item.value">
+									<view class="flex">
+										<view class="ml-1">
+											<radio :value="item.value" :checked="index === current" />
+										</view>
+										<view style="width:10rpx"></view>
+										<view class="ml-1">{{item.name}}</view>
+									</view>
+								</label>
+							</radio-group>
+						</view>
+					</view>
+					<view class="app-command-body">
+						<textarea class="app-command-textarea" v-model="inputCommandContent"
+							:placeholder="`请输入下发内容${isShowTCP?'(字符串格式)':'(json格式)'}`" />
+						<u-icon @click="handleCopy(copyTextValue)" v-if="!isShowTCP" name="question-circle"
+							color="#2979ff" size="28" class="ml-10">
+						</u-icon>
+					</view>
+					<view class="app-command-buttons">
+						<view class="cancel-button" @click="cancelCommand"><text class="cancel-text">取消</text></view>
+						<view @click="handleAppCommand" class="confrim-button"><text class="confrim-text">确认</text>
+						</view>
+					</view>
+				</view>
 			</view>
 		</view>
 		<!-- #endif -->
 		<!-- #ifdef MP -->
-		<!-- u-modal在app端弹窗层级无法覆盖 -->
-		<mp-command-issuance
-			:isShowTCP="isShowTCP"
-			:showModal="mpShowModal"
-			@hideModal="hideMpModal"
-			@cancelCommand="cancelCommand"
-			@confirmCommand="confirmCommand"
-		></mp-command-issuance>
+		<!-- u-modal在app端弹窗层级无法覆盖背景色 -->
+		<mp-command-issuance ref="mpCommandIssuanceRef" :isShowTCP="isShowTCP" :showModal="mpShowModal"
+			@hideModal="hideMpModal" @cancelCommand="cancelCommand"
+			@confirmCommand="confirmCommand"></mp-command-issuance>
 		<!-- #endif -->
 	</view>
 </template>
 
 <script>
-import { formatToDate } from '@/plugins/utils.js';
-import { issueCommand } from '../api/index.js';
-import api from '@/api/index.js';
-import mpCommandIssuance from './mp-command-issuance.vue';
-import appCommandIssuance from './app-command-issuance.vue';
+	import {
+		formatToDate
+	} from '@/plugins/utils.js';
+	import {
+		issueCommand
+	} from '../api/index.js';
+	import api from '@/api/index.js';
+	import mpCommandIssuance from './mp-command-issuance.vue';
+	import {
+		commandTypeList
+	} from '../config/data.js'
+	import {
+		useShowModal
+	} from '@/plugins/utils.js'
 
-export default {
-	components: {
-		mpCommandIssuance,
-		appCommandIssuance
-	},
-	props: {
-		deviceDetail: {
-			type: Object,
-			default: () => ({})
-		}
-	},
-	data() {
-		return {
-			mpShowModal: false,
-			commandValue: {},
-			isShowTCP: false, //用于下发命令时判断是否是TCP/UDP
-			modalName: null
-		};
-	},
-	computed: {
-		deviceStatus() {
-			return this.deviceDetail.deviceState === 'INACTIVE' ? '待激活' : this.deviceDetail.deviceState === 'ONLINE' ? '在线' : '离线';
-		},
-		deviceType() {
-			return this.deviceDetail.deviceType === 'DIRECT_CONNECTION'
-				? '直连设备'
-				: this.deviceDetail.deviceType === 'GATEWAY'
-				? '网关设备'
-				: this.deviceDetail.deviceType === 'SENSOR'
-				? '网关子设备'
-				: '';
-		},
-		alarmStatus() {
-			return this.deviceDetail.alarmStatus === '0' ? '否' : '是';
+	export default {
+		components: {
+			mpCommandIssuance,
 		},
-		formatLastOnlineTime() {
-			return formatToDate(Number(this.deviceDetail.lastOnlineTime), 'YYYY-MM-DD HH:mm:ss');
-		}
-	},
-	onLoad() {
-		// 隐藏原生的tabbar
-		uni.hideTabBar();
-	},
-	methods: {
-		formatTextStatus(deviceState) {
-			return deviceState === 'INACTIVE' ? '#666' : deviceState === 'ONLINE' ? '#377DFF' : '#DE4437';
+		props: {
+			deviceDetail: {
+				type: Object,
+				default: () => ({})
+			}
 		},
-		handleClick() {
-			const data = {
-				longitude: this.deviceDetail.deviceInfo.longitude || 0,
-				latitude: this.deviceDetail.deviceInfo.latitude || 0
+		data() {
+			return {
+				current: 0,
+				commandTypeList,
+				commandTypeStr: 'OneWay',
+				inputCommandContent: '',
+				mpShowModal: false,
+				commandValue: {},
+				isShowTCP: false, //用于下发命令时判断是否是TCP/UDP
+				modalName: null,
+				copyTextValue: {
+					"method": "methodThingskit",
+					"params": {
+						"pin": 7,
+						"value": 1
+					}
+				}
 			};
-			uni.navigateTo({
-				url: '/device-subpackage/device-detail/device-position?data=' + JSON.stringify(data)
-			});
-		},
-		disabledScroll() {
-			return;
 		},
-		handleAppShowModal(e) {
-			this.modalName = e.currentTarget.dataset.target;
-		},
-		handleMpShowModal() {
-			const { transportType } = this.deviceDetail.deviceProfile;
-			this.isShowTCP = transportType == 'TCP' ? true : false;
-			this.mpShowModal = true;
+		computed: {
+			deviceStatus() {
+				return this.deviceDetail.deviceState === 'INACTIVE' ? '待激活' : this.deviceDetail.deviceState === 'ONLINE' ?
+					'在线' : '离线';
+			},
+			deviceType() {
+				return this.deviceDetail.deviceType === 'DIRECT_CONNECTION' ?
+					'直连设备' :
+					this.deviceDetail.deviceType === 'GATEWAY' ?
+					'网关设备' :
+					this.deviceDetail.deviceType === 'SENSOR' ?
+					'网关子设备' :
+					'';
+			},
+			alarmStatus() {
+				return this.deviceDetail.alarmStatus === '0' ? '否' : '是';
+			},
+			formatLastOnlineTime() {
+				return formatToDate(Number(this.deviceDetail.lastOnlineTime), 'YYYY-MM-DD HH:mm:ss');
+			}
 		},
-		hideMpModal() {
-			this.mpShowModal = false;
+		beforeCreate() {
+			this.modalName = null
 		},
-		hideAppModal() {
-			this.modalName = null;
+		onLoad() {
+			// 隐藏原生的tabbar
+			uni.hideTabBar();
 		},
-		async confirmCommand(commandType, inputCommandVal) {
-			try {
+		methods: {
+			handleCopy(value) {
+				useShowModal(JSON.stringify(value), '命令下发', '复制内容').then(res => {
+					uni.setClipboardData({
+						data: JSON.stringify(value),
+						success: () => {
+							uni.showToast({
+								title: '复制成功'
+							})
+						}
+					});
+				})
+			},
+			radioChange: function(evt) {
+				for (let i = 0; i < this.commandTypeList.length; i++) {
+					if (this.items[i].value === evt.detail.value) {
+						this.current = i;
+						break;
+					}
+				}
+				this.commandTypeStr = evt.detail.value
+			},
+			formatTextStatus(deviceState) {
+				return deviceState === 'INACTIVE' ? '#666' : deviceState === 'ONLINE' ? '#377DFF' : '#DE4437';
+			},
+			handleClick() {
+				const data = {
+					longitude: this.deviceDetail.deviceInfo.longitude || 0,
+					latitude: this.deviceDetail.deviceInfo.latitude || 0
+				};
+				uni.navigateTo({
+					url: '/device-subpackage/device-detail/device-position?data=' + JSON.stringify(data)
+				});
+			},
+			disabledScroll() {
+				return;
+			},
+			handleAppShowModal(e) {
+				this.modalName = e.currentTarget.dataset.target;
+			},
+			handleMpShowModal() {
+				const {
+					transportType
+				} = this.deviceDetail.deviceProfile;
+				this.isShowTCP = transportType == 'TCP' ? true : false;
+				this.mpShowModal = true;
+			},
+			hideMpModal() {
+				this.mpShowModal = false;
+			},
+			hideAppModal() {
+				this.modalName = null;
+			},
+			confirmCommand(commandType, inputCommandVal) {
+				this.handleCommand(commandType, inputCommandVal)
+			},
+			cancelCommand() {
+				this.hideMpModal();
+				this.hideAppModal();
+				this.commandTypeStr = 'OneWay'
+				this.inputCommandContent = ''
+				this.$nextTick(() => {
+					this.$refs.mpCommandIssuanceRef.reset()
+				})
+			},
+			handleAppCommand() {
+				this.handleCommand(this.commandTypeStr, this.inputCommandContent)
+			},
+			async handleCommand(commandType, inputCommandVal) {
 				if (this.isShowTCP) {
 					//TCP的格式只能是字符串
 					const zg = /^[0-9a-zA-Z]*$/;
@@ -175,92 +263,159 @@ export default {
 				} else {
 					this.commandValue.params = JSON.parse(inputCommandVal);
 				}
-				if (!commandJsonValue) return uni.$u.toast('请输入下发内容~');
+				if (!inputCommandVal) return uni.$u.toast('请输入下发内容~');
 				this.commandValue.persistent = true;
 				this.commandValue.additionalInfo = {
 					cmdType: 'API'
 				};
 				this.commandValue.method = 'methodThingskit';
-				this.commandValue.params = commandJsonValue;
+				this.commandValue.params = inputCommandVal;
 				await api.deviceApi.issueCommand(commandType, this.deviceDetail.tbDeviceId, this.commandValue);
 				this.cancelCommand();
 				uni.$u.toast('下发成功~');
-			} catch (e) {
-				uni.$u.toast('下发失败~');
-			}
-		},
-		cancelCommand() {
-			this.hideMpModal();
-			this.hideAppModal();
+
+			},
+
 		}
-	}
-};
+	};
 </script>
 
 <style lang="scss" scoped>
-@import url('../static/modal.css');
-.basic-page {
-	padding: 0 30rpx;
+	@import url('../static/modal.css');
 
-	.basic-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		height: 140rpx;
-		background-color: #fff;
-		border-radius: 20rpx;
+	.app-command-content {
+		.app-command-text {
+			display: flex;
+			justify-content: center;
+			align-items: center;
 
-		.basic-text {
-			width: 370rpx;
+			text {
+				font-weight: 700;
+			}
 		}
 
-		.cu-item {
-			background: #3388ff;
-			border-radius: 12px;
-			width: 120rpx;
-			height: 48rpx;
-			text-align: center;
-			line-height: 40rpx;
+		.app-command-type {
+			display: flex;
+			margin-top: 20rpx;
+			margin-left: 20rpx;
 
 			text {
-				font-size: 12px;
-				font-family: PingFangSC-Regular, PingFang SC;
-				font-weight: 400;
-				color: #ffffff;
+				font-weight: 700;
 			}
 		}
 
-		.basic-text-status {
-			font-size: 14px;
+		.app-command-body {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin-top: 20rpx;
+			margin-left: 20rpx;
+
+			.app-command-textarea {
+				width: 625rpx;
+				height: 400rpx;
+				background: #FFFFFF;
+				box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.03);
+				border-radius: 10px;
+			}
+		}
+
+		.app-command-buttons {
+			display: flex;
+			align-items: center;
+			justify-content: space-evenly;
+			height: 85rpx;
+			margin-top: 20rpx;
+			margin-bottom: 20rpx;
+
+			.cancel-button {
+				width: 300rpx;
+				background: #e3e3e5;
+				height: 85rpx;
+				border-radius: 38rpx;
+				line-height: 85rpx;
+
+				.cancel-text {
+					color: #333333
+				}
+			}
+
+			.confrim-button {
+				width: 300rpx;
+				background: #3388ff;
+				border-radius: 38rpx;
+				height: 85rpx;
+				line-height: 85rpx;
+
+				.confrim-text {
+					color: white
+				}
+			}
 		}
 	}
 
-	.detail {
-		background-color: #fff;
-		margin-top: 30rpx;
-		border-radius: 20rpx;
-		width: 690rpx;
+	.basic-page {
+		padding: 0 30rpx;
 
-		.detail-item {
-			padding: 30rpx;
+		.basic-header {
 			display: flex;
+			justify-content: space-between;
 			align-items: center;
+			height: 140rpx;
+			background-color: #fff;
+			border-radius: 20rpx;
 
-			.detail-label {
-				color: #333;
-				font-size: 15px;
+			.basic-text {
+				width: 370rpx;
 			}
 
-			.detail-value {
-				color: #666;
+			.cu-item {
+				background: #3388ff;
+				border-radius: 12px;
+				width: 120rpx;
+				height: 48rpx;
+				text-align: center;
+				line-height: 40rpx;
+
+				text {
+					font-size: 12px;
+					font-family: PingFangSC-Regular, PingFang SC;
+					font-weight: 400;
+					color: #ffffff;
+				}
+			}
+
+			.basic-text-status {
 				font-size: 14px;
-				margin-left: 30rpx;
+			}
+		}
+
+		.detail {
+			background-color: #fff;
+			margin-top: 30rpx;
+			border-radius: 20rpx;
+			width: 690rpx;
+
+			.detail-item {
+				padding: 30rpx;
+				display: flex;
+				align-items: center;
+
+				.detail-label {
+					color: #333;
+					font-size: 15px;
+				}
+
+				.detail-value {
+					color: #666;
+					font-size: 14px;
+					margin-left: 30rpx;
+				}
 			}
 		}
 	}
-}
 
-/deep/ .u-modal__content {
-	padding: 30rpx 0 !important;
-}
-</style>
+	/deep/ .u-modal__content {
+		padding: 30rpx 0 !important;
+	}
+</style>
\ No newline at end of file

@@ -78,6 +78,10 @@
 						}
 					});
 				})
+			},
+			reset() {
+				this.commandType = 'OneWay'
+				this.inputCommandVal = ''
 			}
 		}
 	}

@@ -59,7 +59,19 @@ const issueStatus = [{
 	}
 ]
 
+const commandTypeList = [{
+		value: 'OneWay',
+		name: '单向',
+	},
+	{
+		value: 'TwoWay',
+		name: '双向'
+	},
+]
+
+
 export {
 	list,
-	issueStatus
+	issueStatus,
+	commandTypeList
 }
\ No newline at end of file

@@ -82,6 +82,7 @@
 	} from 'vuex';
 	import {
 		useNavigateTo,
+		useReLaunch,
 		useShowModal
 	} from '@/plugins/utils.js'
 
@@ -164,7 +165,8 @@
 					if (res.confirm) {
 						that.emptyUserInfo();
 						that.showLogout = false;
-						useNavigateTo('/login-subpackage/public/login')
+						//不能使用navigatorTo，会显示返回按钮
+						useReLaunch('/login-subpackage/public/login')
 					}
 				})
 			},

@@ -51,6 +51,14 @@ button {
 	display: flex;
 	flex-direction: column;
 }
+.flex{
+	display: flex;
+}
+.justify-center{
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
 .mt-3{
 	margin-top: 30rpx;
 }
@@ -60,6 +68,9 @@ button {
 .mt-15{
 	margin-top: 15rpx;
 }
+.mr-1{
+	margin-right: 10rpx;
+}
 .mr-2{
 	margin-right: 20rpx;
 }