command-detail.vue 3.37 KB
<template>
	<view class="command-detail">
		<view class="detail-top">{{ commandDetail.deviceName }}</view>
		<view class="detail">
			<view class="detail-item">
				<view class="detail-label">设备类型</view>
				<view class="detail-value">{{ deviceType }}</view>
			</view>
			<u-line length="90%" margin="0 auto"></u-line>
			<view class="detail-item">
				<view class="detail-label">设备编号</view>
				<view class="detail-value">{{ commandDetail.deviceSn }}</view>
			</view>
			<u-line length="90%" margin="0 auto"></u-line>
			<view class="detail-item">
				<view class="detail-label">所属组织</view>
				<view class="detail-value">{{ commandDetail.organizationName }}</view>
			</view>
			<u-line length="90%" margin="0 auto"></u-line>
			<view class="detail-item">
				<view class="detail-label">命令下发时间</view>
				<view class="detail-value">{{ format(commandDetail.createTime) }}</view>
			</view>
			<u-line length="90%" margin="0 auto"></u-line>
			<view class="detail-item">
				<view class="detail-label">命令类型</view>
				<view class="detail-value">{{ commandDetail.additionalInfo.cmdType===1?'服务':'自定义' }}</view>
			</view>
			<u-line length="90%" margin="0 auto" v-if="commandDetail.additionalInfo.cmdType"></u-line>
			<view class="detail-item">
				<view class="detail-label">响应类型</view>
				<view class="detail-value">{{ commandDetail.request.oneway ? '单向' : '双向' }}</view>
			</view>
			<u-line length="90%" margin="0 auto"></u-line>
			<view class="detail-item">
				<view class="detail-label">命令状态</view>
				<view class="detail-value">{{ commandDetail.statusName }}</view>
			</view>
			<u-line length="90%" margin="0 auto"></u-line>
			<view class="detail-item" v-if="!commandDetail.request.oneway">
				<view class="detail-label">响应结果</view>
				<view class="detail-value">{{ commandDetail.response?JSON.stringify(commandDetail.response):'无' }}
				</view>
			</view>
		</view>
		<view class="command">命令内容</view>
		<u-textarea :value="formatValue(commandDetail.request.body)" disabled></u-textarea>
		<view style="height: 50rpx;"></view>
	</view>
</template>

<script>
	import {
		formatToDate
	} from '@/plugins/utils.js';
	export default {
		data() {
			return {
				commandDetail: {},
				failContent: ""
			};
		},
		computed: {
			deviceType() {
				return this.commandDetail.deviceType === 'DIRECT_CONNECTION' ?
					'直连设备' :
					this.commandDetail.deviceType === 'GATEWAY' ?
					'网关设备' :
					this.commandDetail.deviceType === 'SENSOR' ?
					'网关子设备' :
					'';
			}
		},
		methods: {
			format(date) {
				return formatToDate(date, 'YYYY-MM-DD HH:mm:ss');
			},
			formatValue(value) {
				try {
					const val = JSON.parse(value['params']);
					//微信小程序端object无法显示,格式化为字符串
					const stringifyVal = JSON.stringify(val['params'])
					const formatVal = stringifyVal
						.replace(/\\"/g, '"')
						.replace(/]"/g, ']')
						.replace(/"\[/g, '[');
					return formatVal
				} catch (e) {
					return value['params']
				}
			}
		},
		onLoad(options) {
			const { data } = options;
			this.commandDetail = JSON.parse(decodeURIComponent(data));
			if (this.commandDetail.response.status === 'SUCCESS') return
			this.failContent = JSON.stringify(this.commandDetail.response.error)
		}
	};
</script>

<style lang="scss" scoped>
	@import "../static/command-detail.scss";
</style>