Merge branch 'main_dev'

# Conflicts:
#	pages/alarm/alarm.vue

 <script>
 <script>
 	import store from '@/store';
 	import store from '@/store';
-	// import {
-	// 	scene
-	// } from '@/config/common';
 
 
 	export default {
 	export default {
 		//设置全局变量，解绑时从这里取
 		//设置全局变量，解绑时从这里取
@@ -10,27 +7,12 @@
 			openId: ''
 			openId: ''
 		},
 		},
 		onLaunch(e) {
 		onLaunch(e) {
-			//取出缓存数据
-			// store.commit('setCacheData');
-			//获取二维码信息
-			// scene(e);
 			// #ifdef APP-PLUS
 			// #ifdef APP-PLUS
 			uni.reLaunch({
 			uni.reLaunch({
 				url: '/pages/index/splash'
 				url: '/pages/index/splash'
 			})
 			})
 			// #endif
 			// #endif
 		},
 		},
-		onShow(e) {
-			// #ifdef MP
-			// mpUpData(); //检测小程序更新
-			// #endif
-			// #ifdef APP-PLUS
-			// uni.reLaunch({
-			// 	url: '/pages/index/splash'
-			// })
-			// #endif
-		},
-		onHide() {},
 		onUnload(){
 		onUnload(){
 			uni.setStorageSync('getConfiguration', {
 			uni.setStorageSync('getConfiguration', {
 				isConfiguration: false
 				isConfiguration: false

+<template>
+	<view class="alarm-detail-page">
+		<!-- 公共组件-每个页面必须引入 -->
+		<public-module></public-module>
+		<view class="alarm-detail-column">
+			<view class="u-flex detail-column">
+				<view class="column-line" v-for="(item,index) in alarmDetail" :key="index">
+					<view class="column">
+						<text class="text-org-bold">{{item.label}}</text>
+						<text class="text-device-muted text-clip  alarm-text"
+							:style="{color:hasColor.includes(item.label)?'#DE4437':''}">
+							{{item.label===hasColor[0]? setAlarmStatus(item.value):item.label===hasColor[1]?setAlarmSeverity(item.value):
+							item.label==='触发值：'?formatAlarmValueText:item.label==='触发条件：'?formatAlarmConditionText
+							:item.label==='触发属性：'?formatAttrText:item.label==='告警设备：'?formatDeviceText:item.value}}
+						</text>
+					</view>
+					<view class="bottom-line"></view>
+				</view>
+			</view>
+		</view>
+		<!-- #ifdef MP -->
+		<view class="handle-result text-org-bold" style="">处理结果</view>
+		<view class="hanle-main">
+			<u--form :label-style="{ 'font-size': '0rpx' }" style="padding-left: 26rpx;" labelPosition="left"
+				:model="formModel" ref="form1">
+				<u-form-item label="." prop="result" ref="item3">
+					<view style="position: relative;left: -60rpx;">
+						<u--textarea border="none" height="96" placeholder="请输入处理结果" v-model="formModel.result" count>
+						</u--textarea>
+					</view>
+				</u-form-item>
+			</u--form>
+		</view>
+		<!-- #endif -->
+		<!-- #ifdef APP-PLUS -->
+		<view class="handle-result text-org-bold">处理结果</view>
+		<view class="hanle-main">
+			<view>
+				<u--textarea border="none" height="96" placeholder="请输入处理结果" v-model="formModel.result" count>
+				</u--textarea>
+			</view>
+		</view>
+		<!-- #endif -->
+		<view class="bottom-button">
+			<view v-if="handleText.includes(alarmDetail[8].value)" class="u-flex button-item">
+				<u-button @click="handleSubmit" type="primary" shape="circle" text="处理"></u-button>
+			</view>
+			<view v-if="clearText.includes(alarmDetail[8].value)" class="u-flex button-item">
+				<u-button @click="handleRemove" type="error" shape="circle" text="清除"></u-button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		mapActions
+	} from 'vuex'
+	import api from '@/api/index.js'
+	import {
+		alarmSeverity,
+		alarmStatus,
+		operationNumberOrDate,
+		operationString,
+		operationBoolean
+	} from '@/pages/alarm/config/data.js';
+	import {
+		useShowToast,
+		useNavigateBack
+	} from '@/plugins/utils.js'
+
+	export default {
+		data() {
+			return {
+				handleText: ['ACTIVE_UNACK', 'CLEARED_UNACK'],
+				clearText: [ 'ACTIVE_ACK'],
+				hasColor: ['告警级别：', '告警状态：'],
+				alarmSeverity,
+				alarmStatus,
+				operationNumberOrDate,
+				operationString,
+				operationBoolean,
+				formModel: {
+					result: ''
+				},
+				detailId: '',
+				alarmDetail: [],
+				formatDeviceText: '',
+				formatAlarmValueText: '',
+				formatAlarmConditionText: '',
+				formatAttrText:'',
+			};
+		},
+		async onLoad(e) {
+			if (e.data !== null) {
+				let params = JSON.parse(decodeURIComponent(e.data));
+				const {deviceName,severity,organizationName,details,type,createdTime,status,id} = params
+				
+				this.detailId = id
+				this.alarmDetail = [{label: '告警场景：',value: type},{label: '告警级别：',value: severity},{label: '所属组织：',value: organizationName},{label: '告警设备：',value: ''},{label:'触发属性：',value:''},{label: '触发条件：',value: ''},{label: '触发值：',value: ''},{label: '告警时间：',value: createdTime},{label: '告警状态：',value: status},]
+				
+				const keys = Object.keys(details)
+				const dataFormat = await this.handleAlarmDetailFormat(keys);
+				this.formatAlarmDevice(details,dataFormat)
+				this.formatAlarmValue(details,dataFormat)
+				this.formatAlarmCondition(details,dataFormat)
+				this.formatAttr(details,dataFormat)
+			}
+			// 隐藏原生的tabbar
+			uni.hideTabBar();
+		},
+		methods: {
+			...mapActions(['updateBadgeTotal']),
+			setAlarmStatus(value) {
+				return this.alarmSeverity.find(item => item.value === value).label
+			},
+			setAlarmSeverity(value) {
+				return this.alarmStatus.find(item => item.value === value).label
+			},
+			returnPrevPage(title) {
+				useShowToast(title)
+				let pages = getCurrentPages(); //获取所有页面栈实例列表
+				let nowPage = pages[pages.length - 1]; //当前页页面实例
+				let prevPage = pages[pages.length - 2]; //上一页页面实例
+				prevPage.$vm.detailStatus = true;
+			},
+			async handleSubmit() {
+				if (this.formModel.result == '') return uni.$u.toast('请输入处理结果');
+				const res = await api.alarmApi.postAlarmAckApi(this.detailId)
+				if (res == '') {
+					this.returnPrevPage('处理成功~')
+					setTimeout(() => {
+						useNavigateBack(1)
+					}, 500);
+				}
+			},
+			async handleRemove() {
+				const res = await api.alarmApi.postAlarmClearApi(this.detailId)
+				if (res == '') {
+					this.returnPrevPage('清除成功~')
+					setTimeout(async () => {
+						useNavigateBack(1)
+						const res = await uni.$u.http.get('/yt/homepage/app?login=true');
+						if (res) {
+							//异步实时更新告警徽标数
+							await this.updateBadgeTotal(res.totalAlarm?.activedAlarm);
+						}
+					}, 500);
+				}
+			},
+			//触发值处理
+			 formatAlarmValue(e,dataFormat) {
+				const keys = Object.keys(e)
+				const values = keys.reduce((acc, curr) => {
+					const items = e[curr]?.triggerData
+					dataFormat.forEach((dataItem => {
+						if (dataItem.tbDeviceId === curr) {
+							if(!items?.realValue) return
+							acc.push(
+								`${items.realValue}`
+							)
+						}
+					}))
+					return acc
+				}, [])
+				this.formatAlarmValueText = values.join(',')
+			},
+			//触发条件处理
+			formatAlarmCondition(e) {
+				const keys = Object.keys(e)
+				const values = keys.reduce((acc, curr) => {
+					acc.push({
+						login: e[curr]?.triggerData?.logic,
+						logicValue: e[curr]?.triggerData?.logicValue
+					})
+					return acc
+				}, [])
+				const operation = [...operationNumberOrDate, ...operationString, ...operationBoolean]
+				const format = values.map(item => {
+					const findOperation = operation.find(findItem => findItem.value === item.login)?.symbol
+					return findOperation + item.logicValue
+				})
+				this.formatAlarmConditionText = format.filter(Boolean).join(',')
+			},
+			// 触发属性
+			formatAttr(e,dataFormat){
+				const keys = Object.keys(e)
+				const values = keys.reduce((acc, curr) => {
+					const items = e[curr]?.triggerData
+					dataFormat.forEach((dataItem => {
+						if (dataItem.tbDeviceId === curr) {
+							const findAttribute = dataItem.attribute.find(findItem => findItem.identifier === items?.key)
+							if(!findAttribute?.name && !items?.key) return
+							acc.push(`${findAttribute?.name || items?.key || ' '}`)
+						}
+					}))
+					return acc
+				}, [])
+				this.formatAttrText = values.join(',')
+			},
+			//告警设备处理
+			async formatAlarmDevice(e,dataFormat) {
+				if (!dataFormat) this.formatDeviceText = ''
+				if (Array.isArray(dataFormat) && dataFormat.length === 0) this.formatDeviceText = ''
+				this.formatDeviceText = dataFormat.map(item => item.name).join(',')
+			},
+			async handleAlarmDetailFormat(keys) {
+				const temp = [];
+				for (let item of keys) {
+					if (item === 'key' || item === 'data') return; //旧数据则终止
+					const deviceDetailRes = await api.deviceApi.getDeviceDetail(item);
+					const { deviceProfileId } = deviceDetailRes;
+					if (!deviceProfileId) return;
+					const attributeRes = await api.deviceApi.getAttribute(deviceProfileId);
+					const dataFormat = this.handleDataFormat(deviceDetailRes, attributeRes);
+					temp.push(dataFormat);
+				}
+				return temp;
+			},
+			handleDataFormat(deviceDetail, attributes) {
+				const { name,tbDeviceId } = deviceDetail;
+				const attribute = attributes.map((item) => ({
+					identifier: item.identifier,
+					name: item.name,
+					detail: item.detail
+				}));
+				return {
+					name,
+					tbDeviceId,
+					attribute,
+				};
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import './static/alarmDetail.scss';
+
+	/deep/ .u-button--primary {
+		background-color: #377dff !important;
+		border-color: #377dff !important;
+	}
+</style>

@@ -6,57 +6,67 @@
 .alarm-detail-column {
 .alarm-detail-column {
 	border-radius: 10px;
 	border-radius: 10px;
 	width: 688rpx;
 	width: 688rpx;
-	height: 573rpx;
+	height: 780rpx;
 	background-color: #ffffff;
 	background-color: #ffffff;
 	.detail-column {
 	.detail-column {
-		height: 573rpx;
-		justify-content: space-between;
+		width:750rpx;
 		flex-direction: column;
 		flex-direction: column;
 		align-items: center;
 		align-items: center;
-		.column {
-			flex-direction: row;
+		.column-line{
 			display:flex;
 			display:flex;
-			// justify-content: space-between;
-			margin-top: 10rpx;
-			line-height: 68rpx;
-			width: 614rpx;
-			height: 90rpx;
-			text-align: left;
-			border-bottom: 0.1rpx solid #f0f0f0;
-			.device-name{
-				width:222rpx;
-			}
-			.text {
-				color: #333333;
-				font-size: 15px;
-			}
-			.image {
-				width: 30rpx;
-				height: 30rpx;
-			}
-			.text-alarm-level {
-				color: #333333;
-				font-size: 14px;
-			}
-			.text-alarm-level-lg {
-				color: #333333;
-				font-size: 15px;
-			}
-			.text-alarm-lg {
-				color: #666666;
-				font-size: 14px;
-			}
-			.text-alarm-status {
-				color: #de4437;
-				font-size: 14px;
+			flex-direction: column;
+			.column {
+				display:flex;
+				margin-top: 10rpx;
+				line-height: 68rpx;
+				width:700rpx;
+				height: 74rpx;
+				align-items: center;
+				.device-name{
+					width:222rpx;
+				}
+				.alarm-text{
+					width:460rpx;
+					overflow-x: scroll;
+				}
+				
+				.text {
+					color: #333333;
+					font-size: 15px;
+				}
+				.image {
+					width: 30rpx;
+					height: 30rpx;
+				}
+				.text-alarm-level {
+					color: #333333;
+					font-size: 14px;
+				}
+				.text-alarm-level-lg {
+					color: #333333;
+					font-size: 15px;
+				}
+				.text-alarm-lg {
+					color: #666666;
+					font-size: 14px;
+				}
+				.text-alarm-status {
+					color: #de4437;
+					font-size: 14px;
+				}
 			}
 			}
+			.bottom-line{
+					border-bottom: 0.1rpx solid #f0f0f0;
+					width:650rpx;
+				}
 		}
 		}
+		
 	}
 	}
 }
 }
 .handle-result {
 .handle-result {
 	color: #333333;
 	color: #333333;
 	font-size: 15px;
 	font-size: 15px;
-	margin-top: 20rpx;
+	margin-top: 32rpx;
 }
 }
 .hanle-main {
 .hanle-main {
 	margin-top: 30rpx;
 	margin-top: 30rpx;
@@ -65,3 +75,13 @@
 	height: 273rpx;
 	height: 273rpx;
 	background-color: #ffffff;
 	background-color: #ffffff;
 }
 }
+.bottom-button{
+	margin-top: 44rpx;
+	display: flex;
+	align-items: center;
+	gap:40rpx;
+	justify-content: center;
+	.button-item{
+		width: 260rpx;
+	}
+}

-<template>
-	<view class="alarm-detail-page">
-		<!-- 公共组件-每个页面必须引入 -->
-		<public-module></public-module>
-		<view class="alarm-detail-column">
-			<view class="u-flex detail-column">
-				<view class="u-flex column">
-					<text
-						class="text-clip device-name text-org-bold">{{ list.deviceName == null ? '暂无数据' : list.deviceName }}</text>
-					<image class="image" src="/static/alarm-device.png"></image>
-				</view>
-				<view class="column">
-					<text class="text-org-bold ">告警级别：</text>
-					<text class="text-device-muted" style="color:#DE4437">
-						{{
-							list.severity == 'CRITICAL'
-								? '危险'
-								: list.severity == 'MAJOR'
-								? '重要'
-								: list.severity == 'MINOR'
-								? '次要'
-								: list.severity == 'WARNING'
-								? '警告'
-								: '不确定'
-						}}
-					</text>
-				</view>
-				<view class="column">
-					<text class="text-org-bold">所属组织：</text>
-					<text
-						class="text-device-muted">{{ list.organizationName == null ? '暂无数据' : list.organizationName }}</text>
-				</view>
-				<view class="column">
-					<text class="text-org-bold">告警值：</text>
-					<text
-						class="text-device-muted text-clip">{{ list.details == null ? '暂无数据' : formatDetailText(list.details.data) }}</text>
-				</view>
-				<view class="column">
-					<text class="text-org-bold">告警场景：</text>
-					<text
-						class="text-device-muted text-clip">{{ list.type == null ? '暂无数据' : list.type }}</text>
-				</view>
-				<view class="column">
-					<text class="text-org-bold">告警时间：</text>
-					<text class="text-device-muted">{{ list.createdTime }}</text>
-				</view>
-				<view class="column">
-					<text class="text-org-bold">告警状态：</text>
-					<text class="text-device-muted" style="color: #DE4437;">
-						{{
-							list.status == 'CLEARED_UNACK'
-								? '清除未确认'
-								: list.status == 'ACTIVE_UNACK'
-								? '激活未确认'
-								: list.status == 'CLEARED_ACK'
-								? '清除已确认'
-								: '激活已确认'
-						}}
-					</text>
-				</view>
-			</view>
-		</view>
-		<!-- #ifdef MP -->
-		<view class="handle-result text-org-bold" style="">处理结果</view>
-		<view class="hanle-main">
-			<u--form :label-style="{ 'font-size': '0rpx' }" style="padding-left: 26rpx;" labelPosition="left"
-				:model="formModel" ref="form1">
-				<u-form-item label="." prop="result" ref="item3">
-					<view style="position: relative;left: -60rpx;">
-						<u--textarea border="none" height="96" placeholder="请输入处理结果" v-model="formModel.result" count>
-						</u--textarea>
-					</view>
-				</u-form-item>
-			</u--form>
-		</view>
-		<!-- #endif -->
-		<!-- #ifdef APP-PLUS -->
-		<view class="handle-result text-org-bold">处理结果</view>
-		<view class="hanle-main">
-			<view>
-				<u--textarea border="none" height="96" placeholder="请输入处理结果" v-model="formModel.result" count>
-				</u--textarea>
-			</view>
-		</view>
-		<!-- #endif -->
-		<view style="margin-top: 44rpx;display: flex;align-items: center;justify-content: space-between;">
-			<view :style="[
-					{ position: list.status !== 'CLEARED_ACK' && list.status !== 'ACTIVE_ACK' ? 'relative' : '' },
-					{ right: list.status !== 'CLEARED_ACK' && list.status !== 'ACTIVE_ACK' ? '-210rpx' : '' }
-				]" v-if="list.status !== 'CLEARED_ACK' && list.status !== 'ACTIVE_ACK'" class="u-flex" style="width: 260rpx">
-				<u-button @click="handleSubmit" type="primary" shape="circle" text="处理"></u-button>
-			</view>
-			<view style="width: 30rpx;"></view>
-			<view
-				:style="[{ position: list.status == 'ACTIVE_ACK' ? 'relative' : '' }, { right: list.status == 'ACTIVE_ACK' ? '207rpx' : '' }]"
-				v-if="list.status == 'ACTIVE_ACK'" class="u-flex" style="width: 260rpx">
-				<u-button @click="handleRemove" type="error" shape="circle" text="清除"></u-button>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	import {
-		mapActions
-	} from 'vuex'
-	import api from '@/api/index.js'
-
-	export default {
-		data() {
-			return {
-				formModel: {
-					result: ''
-				},
-				list: {}
-			};
-		},
-		onLoad(e) {
-			if (e.data !== null) {
-				let params = JSON.parse(e.data);
-				this.list = params;
-			}
-			// 隐藏原生的tabbar
-			uni.hideTabBar();
-		},
-		methods: {
-			//处理
-			async handleSubmit() {
-				if (this.formModel.result == '') return uni.$u.toast('请输入处理结果');
-				const res = await api.alarmApi.postAlarmAckApi(this.list.id)
-				if (res == '') {
-					uni.showToast({
-						title: '处理成功~',
-						icon: 'none'
-					});
-					let pages = getCurrentPages(); //获取所有页面栈实例列表
-					let nowPage = pages[pages.length - 1]; //当前页页面实例
-					let prevPage = pages[pages.length - 2]; //上一页页面实例
-					prevPage.$vm.detailStatus = true;
-					setTimeout(() => {
-						uni.navigateBack({
-							delta: 1
-						});
-					}, 500);
-				}
-			},
-			// 清除
-			async handleRemove() {
-				const res = await api.alarmApi.postAlarmClearApi(this.list.id)
-				if (res == '') {
-					uni.showToast({
-						title: '清除成功~',
-						icon: 'none'
-					});
-					let pages = getCurrentPages(); //获取所有页面栈实例列表
-					let nowPage = pages[pages.length - 1]; //当前页页面实例
-					let prevPage = pages[pages.length - 2]; //上一页页面实例
-					prevPage.$vm.detailStatus = true;
-					setTimeout(async () => {
-						uni.navigateBack({
-							delta: 1
-						});
-						const res = await uni.$u.http.get('/yt/homepage/app?login=true');
-						if (res) {
-							//异步实时更新告警徽标数
-							await this.updateBadgeTotal(res.totalAlarm?.activedAlarm);
-						}
-					}, 500);
-				}
-			},
-			...mapActions(['updateBadgeTotal']),
-			formatDetailText(e) {
-				//去除字符串双引号
-				const jsonStr = JSON.stringify(e);
-				const str = jsonStr.substring(1, jsonStr.length - 1);
-				const newStr = str.replace(/\"/g, '');
-				return newStr.slice(0,26);
-			}
-		}
-	};
-</script>
-
-<style lang="scss" scoped>
-	@import './static/alarmDetail.scss';
-
-	/deep/ .u-button--primary {
-		background-color: #377dff !important;
-		border-color: #377dff !important;
-	}
-</style>

@@ -11,6 +11,30 @@ const getDeviceApi = (urlParams, data) => {
 	return uni.$u.http.post(`/yt/device?page=${page}&pageSize=${pageSize}`, data);
 	return uni.$u.http.post(`/yt/device?page=${page}&pageSize=${pageSize}`, data);
 };
 };
 
 
-export default {
-	getDeviceApi
+// 设备详情
+const getDeviceDetail = (id) => {
+	return uni.$u.http.get(`/yt/device/${id}`);
+};
+
+//设备属性
+const getAttribute = (deviceProfileId) => {
+	return uni.$u.http.get(`/yt/device/attributes/${deviceProfileId}`);
+};
+
+//命令下发
+const issueCommand = (type, tbDeviceId, data) => {
+	return uni.$u.http.post(`/rpc/${type==='OneWay'?'oneway':'twoway'}/${tbDeviceId}`, data)
 }
 }
+
+//获取命令下发记录
+const getRpcRecord = (params) => {
+	return uni.$u.http.get('/yt/rpc', params);
+};
+
+export default {
+	getDeviceApi,
+	getDeviceDetail,
+	getAttribute,
+	issueCommand,
+	getRpcRecord
+}

@@ -20,9 +20,22 @@ const getConfigurationApi = (params = {}) => {
 		.get('/yt/configuration/center', params)
 		.get('/yt/configuration/center', params)
 }
 }
 
 
+// 获取看板分页API
+const getVisualBoardApi = (params) => {
+	return uni.$u.http.get('yt/data_board',params)
+}
+
+//获取组织列表
+const getMeOrgListApi = () => {
+	return uni.$u.http
+		.get('/yt/organization/me/list')
+}
+
 export default {
 export default {
 	getHomeStatisticsApi,
 	getHomeStatisticsApi,
 	getCameraApi,
 	getCameraApi,
 	byCameraIdGetDetailApi,
 	byCameraIdGetDetailApi,
-	getConfigurationApi
+	getConfigurationApi,
+	getMeOrgListApi,
+	getVisualBoardApi
 }
 }

@@ -3,12 +3,18 @@ const getPlateCustomApi = () => {
 	return uni.$u.http.get("/yt/app_design/get")
 	return uni.$u.http.get("/yt/app_design/get")
 };
 };
 
 
-//第三方账号绑定API
+//第三方账号登录API
 const getThirdLoginApi = (code) => {
 const getThirdLoginApi = (code) => {
 	return uni.$u.http.get(`/yt/third/login/${code}`)
 	return uni.$u.http.get(`/yt/third/login/${code}`)
 };
 };
 
 
-//获取个人信息API
+//第三方账号绑定API
+const postThirdLoginApi = (data = {}) => {
+	return uni.$u.http
+		.post("/yt/third/bind", data)
+};
+
+//设置个人信息API
 const setUserInfoApi = () => {
 const setUserInfoApi = () => {
 	return uni.$u.http.get("/yt/user/me/info")
 	return uni.$u.http.get("/yt/user/me/info")
 };
 };
@@ -52,6 +58,18 @@ const deleteBindApi = (data = {}) => {
 	return uni.$u.http.delete('/yt/third', data)
 	return uni.$u.http.delete('/yt/third', data)
 }
 }
 
 
+//获取手机验证码API
+const postPhoneCodeApi = (phone, data = {}) => {
+	return uni.$u.http
+		.post(`/yt/noauth/send_login_code/${phone}`, data)
+}
+
+//手机登录API
+const postPhoneLoginApi = (data = {}) => {
+	return uni.$u.http
+		.post('/yt/auth/code/login', data)
+}
+
 export default {
 export default {
 	getPlateCustomApi,
 	getPlateCustomApi,
 	getThirdLoginApi,
 	getThirdLoginApi,
@@ -62,5 +80,8 @@ export default {
 	postCodeApi,
 	postCodeApi,
 	postResetCodeApi,
 	postResetCodeApi,
 	postPersonalInfoApi,
 	postPersonalInfoApi,
-	deleteBindApi
+	deleteBindApi,
+	postPhoneCodeApi,
+	postPhoneLoginApi,
+	postThirdLoginApi
 }
 }

+<template>
+	<view class="header-org"  @click="$emit('openOrg')">
+		<view class="org-item">
+			<view class="u-flex org-contact"><text class="text">组织关系</text></view>
+			<view class="u-flex org-device">
+				<image class="device-image" :src="imageSrc"></image>
+				<text class="device-text">{{title}}  {{ total }}</text>
+			</view>
+		</view>
+		<view class="org-item">
+			<image class="image" src="/static/arrow-right.png"></image>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			total: Number,
+			imageSrc: String,
+			title:String
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.header-org {
+		width: 750rpx;
+		height: 150rpx;
+		margin-top: 1rpx;
+		background-color: #fff;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		position: fixed;
+		// z-index: 999999;
+		// top: 75rpx;
+
+		.org-item {
+			width: 350rpx;
+			height: 200rpx;
+
+			.org-contact {
+				flex-direction: row;
+				margin-top: 26rpx;
+				margin-left: 15rpx;
+
+				.text {
+					color: #333333;
+					font-size: 15px;
+					margin-left: 14rpx;
+				}
+			}
+
+			.org-device {
+				margin-top: 23rpx;
+				margin-left: 15rpx;
+				flex-direction: row;
+
+				.device-image {
+					margin-left: 14rpx;
+					width: 30rpx;
+					height: 30rpx;
+				}
+
+				.device-text {
+					margin-left: 10rpx;
+					color: #666666;
+					font-size: 12px;
+				}
+			}
+
+			.image {
+				width: 6px;
+				height: 10px;
+				float: right;
+				margin-right: 34rpx;
+				margin-top: 37rpx;
+			}
+		}
+	}
+</style>

+<template>
+	<u-sticky>
+		<view class="device-top">
+			<view class="search">
+				<view>
+					<view class="search-left">
+						<slot></slot>
+					</view>
+				</view>
+				<view @click="$emit('openSearchDialog')" class="search-right">
+					<text>筛选</text>
+					<image src="../../static/shaixuan.png" />
+				</view>
+			</view>
+			<u-line />
+			<view class="org">
+				<u-cell @click="$emit('openOrg')" isLink title="组织关系" :border="false">
+					<view slot="label" class="label" style="display: flex; align-items: center;margin-top: 20rpx;">
+						<image src="../../static/org.png" style="width: 24rpx;height: 28rpx;"></image>
+						<view style="margin-left: 10rpx; color: #666;">
+							{{totalText}}
+							<text style="margin-left: 20rpx;">{{ total }}</text>
+						</view>
+					</view>
+				</u-cell>
+			</view>
+		</view>
+	</u-sticky>
+</template>
+
+<script>
+	export default {
+		props: {
+			total: Number,
+			totalText: [Number, String]
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	/deep/ .u-button--primary {
+		background-color: #377dff !important;
+		border-color: #377dff !important;
+	}
+
+	/deep/ .u-button--info {
+		background-color: #e3e3e5 !important;
+		border-color: #e3e3e5 !important;
+	}
+
+	/deep/ .u-cell__right-icon-wrap {
+		margin-top: -55rpx !important;
+	}
+
+	/deep/ .uni-calendar--fixed {
+		bottom: 172rpx !important;
+	}
+
+	.pop-no-scroll {
+		overflow: hidden;
+		position: fixed;
+		height: 100%;
+		width: 100%;
+	}
+
+	.device-top {
+		padding: 10rpx 30rpx;
+		background-color: #fff;
+
+		.search {
+			display: flex;
+			justify-content: space-between;
+			padding-bottom: 10rpx;
+
+			.search-left {
+				width: 580rpx;
+				background-color: #f8f9fa;
+				border-radius: 200rpx;
+			}
+
+			.search-right {
+				display: flex;
+				align-items: center;
+
+				text {
+					color: #333;
+					font-size: 14px;
+				}
+
+				image {
+					width: 40rpx;
+					height: 40rpx;
+				}
+			}
+		}
+	}
+</style>

@@ -228,7 +228,6 @@ export default {
 		if (pageLen == 1 && !mainPagePath.includes(currentPages[0].route)) {
 		if (pageLen == 1 && !mainPagePath.includes(currentPages[0].route)) {
 			this.firstPage = true;
 			this.firstPage = true;
 			this.iconLeft = 'home';
 			this.iconLeft = 'home';
-			console.log(this.firstPage, 'this.firstPage');
 		}
 		}
 	},
 	},
 	methods: {
 	methods: {
@@ -273,7 +272,6 @@ export default {
 		//设置手机状态栏颜色
 		//设置手机状态栏颜色
 		settingColor() {
 		settingColor() {
 			let navColor = this.navFontColor;
 			let navColor = this.navFontColor;
-			console.log(navColor, 'settingColor');
 			let frontColor = '#000000';
 			let frontColor = '#000000';
 			if (whiteList.includes(navColor)) {
 			if (whiteList.includes(navColor)) {
 				frontColor = '#ffffff';
 				frontColor = '#ffffff';

@@ -5,14 +5,16 @@ import {
  * 服务端配置项
  * 服务端配置项
  * baseUrl 服务端 api地址
  * baseUrl 服务端 api地址
  * baseDrawioUrl 组态地址 注意端口
  * baseDrawioUrl 组态地址 注意端口
+ * baseVisualUrl 看板地址
  * baseWebSocketUrl 服务端 websocket地址
  * baseWebSocketUrl 服务端 websocket地址
  * socketPrefix websocket前缀 ((https, wss),( http, ws))
  * socketPrefix websocket前缀 ((https, wss),( http, ws))
  */
  */
-
-const baseUrl = "https://demo.thingskit.com/api";
-const baseDrawioUrl = "https://demo.thingskit.com/thingskit-scada";
-const baseWebSocketUrl = "demo.thingskit.com";
-const socketPrefix = "wss";
+const baseUrl = "http://222.180.200.114:48080/api";
+const baseVisualUrl = "http://222.180.200.114:9527"
+// const baseVisualUrl = "http://192.168.1.4:8083"
+const baseDrawioUrl = "http://222.180.200.114:9527/thingskit-scada";
+const baseWebSocketUrl = "222.180.200.114:48080";
+const socketPrefix = "ws";
 
 
 let systemInfo = {
 let systemInfo = {
 	...getTabbarHeight(),
 	...getTabbarHeight(),
@@ -42,6 +44,7 @@ systemInfo.platform = "plus";
 const courtConfig = {
 const courtConfig = {
 	publicAppId: "", //公众号appId
 	publicAppId: "", //公众号appId
 	baseUrl, //服务端地址
 	baseUrl, //服务端地址
+	baseVisualUrl,//服务端看板地址
 	baseDrawioUrl, //服务端组态地址
 	baseDrawioUrl, //服务端组态地址
 	baseWebSocketUrl, //服务端websocket地址
 	baseWebSocketUrl, //服务端websocket地址
 	socketPrefix, //websocket前缀
 	socketPrefix, //websocket前缀
@@ -51,4 +54,4 @@ const courtConfig = {
 		sk: "",
 		sk: "",
 	},
 	},
 };
 };
-export default Object.assign({}, courtConfig);
+export default Object.assign({}, courtConfig);

@@ -103,11 +103,11 @@ uni.$u.http.interceptors.response.use(
 				const routers = getCurrentPages();
 				const routers = getCurrentPages();
 				const currentRoute = routers[routers.length - 1].route;
 				const currentRoute = routers[routers.length - 1].route;
 				const isLoginPage = currentRoute.includes(
 				const isLoginPage = currentRoute.includes(
-					"publicLoginSubPage/public/login"
+					"login-subpackage/public/login"
 				);
 				);
 				!isLoginPage &&
 				!isLoginPage &&
 					uni.reLaunch({
 					uni.reLaunch({
-						url: "/publicLoginSubPage/public/login",
+						url: "/login-subpackage/public/login",
 					});
 					});
 				// 清空登录信息
 				// 清空登录信息
 				store.commit("emptyUserInfo");
 				store.commit("emptyUserInfo");

+//上传图片大小
+const UPLOAD_FILE_SIZE = 5242880
+
+export {
+	UPLOAD_FILE_SIZE
+}

-// 获取某个Key的历史数据
-const getUrlParams = (params) => {
-	return Object.keys(params).reduce((prev, next, currentIndex) => {
-		if (params[next]) {
-			return prev += `${!currentIndex ? '?' : '&'}${next}=${params[next]}`
-		}
-		return prev
-	}, '')
-}
-
-export function getHistoryData(params) {
-	let {
-		entityId
-	} = params
-	params = getUrlParams(params)
-	return uni.$u.http.get(
-		`/plugins/telemetry/DEVICE/${entityId}/values/timeseries${params}`
-	);
-}
-
-
-
-// 获取当前设备的key
-export function getDeviceKeys(id) {
-	return uni.$u.http.get(`/plugins/telemetry/DEVICE/${id}/keys/timeseries`);
-};
-
-export function issueCommand(type, tbDeviceId, data) {
-	return uni.$u.http.post(`/rpc/${type==='OneWay'?'oneway':'twoway'}/${tbDeviceId}`, data)
+// 获取某个Key的历史数据
+const getUrlParams = (params) => {
+	return Object.keys(params).reduce((prev, next, currentIndex) => {
+		if (params[next]) {
+			return prev += `${!currentIndex ? '?' : '&'}${next}=${params[next]}`
+		}
+		return prev
+	}, '')
 }
 }
+
+export function getHistoryData(params) {
+	let {
+		entityId
+	} = params
+	params = getUrlParams(params)
+	return uni.$u.http.get(
+		`/plugins/telemetry/DEVICE/${entityId}/values/timeseries${params}`
+	);
+}
+
+
+
+// 获取当前设备的key
+export function getDeviceKeys(id) {
+	return uni.$u.http.get(`/plugins/telemetry/DEVICE/${id}/keys/timeseries`);
+};

+<template>
+	<view class="alert-page">
+		<!-- 告警头部 -->
+		<view class="filter-button" @click="openSearchDialog">
+			<text>筛选</text>
+			<image src="/static/shaixuan.png" />
+		</view>
+		<!-- 告警分页 -->
+		<mescroll-uni height="700rpx;" ref="mescrollRef" @init="mescrollInit" :up="upOption" :down="downOption"
+			@down="downCallback" @up="upCallback">
+			<alarm-item :list="list" @openAlertDetail="openAlertDetail"></alarm-item>
+			<mescroll-empty v-if="!list.length" />
+		</mescroll-uni>
+		<view style="height: 20rpx"></view>
+		<!-- 告警筛选 -->
+		<alarm-popup ref="alarmPopupRef" :show="show" @close="close" @queryCondition="getQueryCondition"></alarm-popup>
+	</view>
+</template>
+<script>
+	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
+	import api from '@/api/index.js'
+	import alarmItem from '@/pages/alarm/components/alarm-item.vue'
+	import alarmPopup from '@/pages/alarm/components/alarm-popup.vue'
+	import {
+		useNavigateTo
+	} from '@/plugins/utils.js'
+
+	export default {
+		mixins: [MescrollMixin],
+		components: {
+			alarmItem,
+			alarmPopup
+		},
+		props: {
+			deviceId: {
+				type: String,
+				default: ''
+			}
+		},
+		data() {
+			return {
+				show: false,
+				list: [],
+				total: 0,
+				downOption: {
+					auto: true //是否在初始化后,自动执行downCallback; 默认true
+				},
+				upOption: {
+					auto: false // 不自动加载
+				},
+				page: {
+					num: 0,
+					size: 10
+				},
+				conditions: {},
+			};
+		},
+		methods: {
+			disabledScroll() {
+				return;
+			},
+			getQueryCondition(value) {
+				this.conditions = value
+				this.conditions.deviceId = this.deviceId
+				this.loadData(1, this.conditions);
+				this.close()
+			},
+			resetQuery() {
+				this.page.num = 1;
+				this.$nextTick(() => {
+					this.$refs.alarmPopupRef.resetQuery()
+				})
+				this.conditions = {}
+			},
+			downCallback() {
+				this.list = [];
+				this.page.num = 1;
+				this.resetQuery();
+				this.loadData(this.page.num, {
+					deviceId: this.deviceId
+				});
+			},
+			upCallback() {
+				const deviceId = {
+					deviceId: this.deviceId
+				}
+				const condition = Object.values(this.conditions)
+				if (condition.length === 0) {
+					this.page.num += 1;
+					this.loadData(this.page.num, {
+						...deviceId
+					});
+				} else if (condition.filter(Boolean).length > 0) {
+					this.page.num += 1;
+					this.loadData(this.page.num, {
+						...this.conditions,
+						...deviceId
+					});
+				} else {
+					this.page.num += 1;
+					this.loadData(this.page.num, {
+						...deviceId
+					});
+				}
+			},
+			async loadData(page, param) {
+				let that = this;
+				let params = {
+					page,
+					pageSize: 10,
+					...param
+				};
+				const res = await api.alarmApi.getAlarmApi({
+					params,
+					custom: {
+						load: false
+					}
+				})
+				if (!res) return
+				uni.stopPullDownRefresh();
+				that.mescroll.endByPage(res.items.length, res.total); //必传参数(当前页的数据个数, 总页数)
+				that.alarmTotal = res.total;
+				if (page == 1) {
+					that.list = res.items;
+				} else {
+					that.list = that.list.concat(res.items);
+				}
+			},
+			openSearchDialog() {
+				this.show = true;
+				this.resetQuery();
+			},
+			close() {
+				this.show = false;
+			},
+			openAlertDetail(e) {
+				useNavigateTo('/alarm-subpackage/alarm-detail/alarm-detail?data=', e)
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.filter-button {
+		margin: 0 20rpx;
+		font-size: 12px;
+		width: 160rpx;
+		height: 64rpx;
+		border-radius: 32rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background: #f0f1f2;
+		color: #666;
+
+		image {
+			width: 28rpx;
+			height: 28rpx;
+			margin-left: 4rpx;
+		}
+	}
+</style>

-<template>
-	<view class="basic-page">
-		<!-- 公共组件-每个页面必须引入 -->
-		<public-module />
-		<view class="basic-title">
-			<view class="u-flex">
-				<view style="padding-left: 32rpx;">
-					<u-icon v-if="deviceDetail.deviceInfo.longitude !== ''" @click="handleClick" name="map-fill">
-					</u-icon>
-				</view>
-				<view class="text-clip" style="margin-left: 20rpx;width:370rpx">
-					{{ deviceDetail.alias? deviceDetail.alias: deviceDetail.name }}
-				</view>
-				<view style="margin-left: 20rpx; font-size: 14px;"
-					:style="{ color: deviceDetail.deviceState === 'INACTIVE' ? '#666' :  deviceDetail.deviceState === 'ONLINE' ? '#377DFF' : '#DE4437' }">
-					{{ deviceStatus }}
-				</view>
-			</view>
-			<view style="margin-right: 20rpx;"
-				v-if="deviceDetail.deviceState === 'ONLINE' && deviceDetail.deviceType !== 'SENSOR'">
-				<!-- #ifdef MP -->
-				<u-button type="primary" shape="circle" size="mini" text="下发命令" @click="showModalBtn" />
-				<!-- #endif -->
-				<!-- #ifdef APP-PLUS -->
-				<view class="cu-item" @tap="showModal" data-target="Modal">
-					<text>下发命令</text>
-				</view>
-				<!-- #endif -->
-			</view>
-		</view>
-		<view class="detail">
-			<view class="detail-item">
-				<view class="detail-label">设备编号</view>
-				<view class="detail-value">{{ deviceDetail.sn }}</view>
-			</view>
-			<u-line length="90%" margin="0 auto"></u-line>
-			<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">{{ deviceDetail.organizationDTO.name }}</view>
-			</view>
-			<u-line length="90%" margin="0 auto"></u-line>
-			<view class="detail-item">
-				<view class="detail-label">最后连接时间</view>
-				<view class="detail-value">{{ formatLastOnlineTime }}</view>
-			</view>
-			<u-line length="90%" margin="0 auto"></u-line>
-			<view class="detail-item">
-				<view class="detail-label">是否告警</view>
-				<view class="detail-value">{{ alarmStatus }}</view>
-			</view>
-			<u-line length="90%" margin="0 auto"></u-line>
-			<view class="detail-item">
-				<view class="detail-label">设备描述</view>
-				<view class="detail-value">{{ deviceDetail.description }}</view>
-			</view>
-		</view>
-		<!-- 下发命令 -->
-		<!-- #ifdef APP-PLUS -->
-		<view v-show="showNodal" class="cu-modal" :class="modalName=='Modal'?'show':''">
-			<view class="cu-dialog" style="">
-				<view class="modal_main">
-					<view class='nav-list margin-top'>
-						<view style="width: 100%; padding: 0 30rpx;">
-							<view style="text-align: center; font-weight:700;margin-top: 40rpx;">命令下发</view>
-							<view style="height: 20rpx;"></view>
-							<view class="u-flex">
-								<text
-									style="color: #333; font-size: 14px;font-weight:700;margin-right: 30rpx;">下发类型:</text>
-								<view>
-									<radio-group style="display: flex;" @change="radioChange">
-										<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items"
-											:key="item.value">
-											<view style="display: flex">
-												<view style="margin-left: 10rpx;">
-													<radio :value="item.value" :checked="index === current" />
-												</view>
-												<view style="width:10rpx"></view>
-												<view style="margin-left: 10rpx;">{{item.name}}</view>
-											</view>
-										</label>
-									</radio-group>
-								</view>
-							</view>
-							<view style="margin-top: 15rpx">
-								<view class="cusAppplusContent">
-									<textarea v-model="inputCommandVal" placeholder="请输入下发内容(json格式)" />
-								</view>
-							</view>
-							<view class="button-group">
-								<view>
-									<view class="cusAppplusCancelBtn" @click="cancelCommand"><text
-											style="color: #333333">取消</text>
-									</view>
-								</view>
-								<view>
-									<view class="cusAppplusConfrimBtn" @click="confirmCommand">
-										<text style="color:white">确认</text>
-									</view>
-								</view>
-							</view>
-							<view style="height:30rpx"></view>
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<!-- #endif -->
-		<!-- #ifdef MP -->
-		<u-modal :show="showModel" closeOnClickOverlay :showConfirmButton="false" width="720rpx" @close="hiddenModal"
-			@touchmove.stop.prevent="disabledScroll">
-			<view style="width: 100%; padding: 0 30rpx;">
-				<view style="text-align: center; font-weight:700;margin-bottom: 40rpx;">命令下发</view>
-				<view class="u-flex">
-					<text style="color: #333; font-size: 14px;font-weight:700;margin-right: 30rpx;">下发类型:</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 style="margin-top: 28rpx;width: 100%;">
-					<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>
-		</u-modal>
-		<!-- #endif -->
-	</view>
-</template>
-
-<script>
-	import {
-		formatToDate
-	} from '@/plugins/utils.js';
-	import {
-		issueCommand
-	} from '../api/index.js';
-	export default {
-		props: {
-			deviceDetail: {
-				type: Object,
-				default: () => ({})
-			}
-		},
-		data() {
-			return {
-				copyTextValue: {
-					"method": "methodThingskit",
-					"params": {
-						"pin": 7,
-						"value": 1
-					}
-				},
-				showNodal: false,
-				items: [{
-						value: 'OneWay',
-						name: '单向',
-						checked: 'true'
-					},
-					{
-						value: 'TwoWay',
-						name: '双向'
-					},
-				],
-				current: 0,
-				modalName: null,
-				showModel: false,
-				commandType: 'OneWay',
-				commandValue: {},
-				inputCommandVal: '',
-				isShowTCP:false,//用于下发命令时判断是否是TCP/UDP
-			};
-		},
-		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');
-			}
-		},
-		onLoad(e) {
-			// 隐藏原生的tabbar
-			uni.hideTabBar();
-		},
-		mounted() {},
-		beforeCreate() {
-			this.modalName = null
-		},
-		methods: {
-			handleCopy(value) {
-				uni.showModal({
-					content: JSON.stringify(value), 
-					confirmText: '复制内容',
-					showCancel:false,
-					success: () => { 
-						uni.setClipboardData({
-							data: JSON.stringify(value),
-							success: () => { 
-								uni.showToast({
-									title: '复制成功'
-								})
-							}
-						});
-					},
-					
-				});
-			},
-			radioChange: function(evt) {
-				for (let i = 0; i < this.items.length; i++) {
-					if (this.items[i].value === evt.detail.value) {
-						this.current = i;
-						break;
-					}
-				}
-				this.commandType = evt.detail.value
-			},
-			handleClick() {
-				const data = {
-					longitude: this.deviceDetail.deviceInfo.longitude || 0,
-					latitude: this.deviceDetail.deviceInfo.latitude || 0
-				};
-				uni.navigateTo({
-					url: '/deviceSubPage/deviceDetailPage/devicePosition?data=' + JSON.stringify(data)
-				});
-			},
-			showModal(e) {
-				this.modalName = e.currentTarget.dataset.target
-				const {transportType} = this.deviceDetail.deviceProfile
-				this.isShowTCP = transportType=='TCP'?true:false
-				this.showNodal = true
-			},
-			showModalBtn() {
-				this.showModel = true;
-				this.inputCommandVal = '';
-				const {transportType} = this.deviceDetail.deviceProfile
-				this.isShowTCP = transportType=='TCP'?true:false
-			},
-			disabledScroll() {
-				return;
-			},
-			hiddenModal() {
-				this.showModel = false;
-				this.inputCommandVal = '';
-				// #ifdef APP-PLUS
-				this.modalName = null
-				this.showNodal = false
-				// #endif
-			},
-			async confirmCommand() {
-				try {
-					this.commandValue.method = 'methodThingskit';
-					this.commandValue.persistent = true;
-					this.commandValue.additionalInfo = {
-						cmdType: 'API'
-					};
-					if(this.isShowTCP){//TCP的格式只能是字符串
-						const zg = /^[0-9a-zA-Z]*$/
-						if(!zg.test(this.inputCommandVal)) {
-							uni.$u.toast('输入的内容只能是字母和数字的组合')
-							return 
-						}
-						this.commandValue.params = this.inputCommandVal
-					}else{
-						const commandJsonValue = JSON.parse(this.inputCommandVal);
-						this.commandValue.params = commandJsonValue
-					}
-					await issueCommand(this.commandType, this.deviceDetail.tbDeviceId, this.commandValue);
-					this.hiddenModal();
-					uni.$u.toast('下发成功~');
-				} catch (e) {
-					uni.$u.toast('下发失败~');
-				}
-			},
-			cancelCommand() {
-				this.hiddenModal();
-				// #ifdef APP-PLUS
-				this.modalName = null
-				this.showNodal = false
-				// #endif
-			}
-		}
-	};
-</script>
-
-<style lang="scss" scoped>
-	@import url('../styles/modal.css');
-
-	.cusAppplusContent {
-		width: 625rpx;
-		height: 400rpx;
-		background: #FFFFFF;
-		box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.03);
-		border-radius: 10px;
-
-	}
-
-	.cusAppplusCancelBtn {
-		background: #e3e3e5;
-		border-radius: 38rpx;
-		height: 85rpx;
-		line-height: 85rpx
-	}
-
-	.cusAppplusConfrimBtn {
-		background: #3388ff;
-		border-radius: 38rpx;
-		height: 85rpx;
-		line-height: 85rpx
-	}
-
-	.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-page {
-		padding: 0 30rpx;
-
-		.basic-title {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			height: 140rpx;
-			background-color: #fff;
-			border-radius: 20rpx;
-		}
-
-		.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;
-	}
-
-	.button-group {
-		display: flex;
-		margin-top: 40rpx;
-		justify-content: space-between;
-
-		view {
-			width: 300rpx;
-		}
-	}
-</style>
+<template>
+	<view class="basic-page">
+		<!-- 公共组件-每个页面必须引入 -->
+		<public-module></public-module>
+		<!-- 基础信息头部 -->
+		<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>
+				</view>
+				<view class="basic-text text-clip ml-2">
+					{{ deviceDetail.alias ? deviceDetail.alias : deviceDetail.name }}
+				</view>
+				<view class="basic-text-status ml-2" :style="{ color: formatTextStatus(deviceDetail.deviceState) }">
+					{{ deviceStatus }}
+				</view>
+			</view>
+			<!-- 命令下发 设备在线并且不是网关子设备 -->
+			<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 class="cu-item" @tap="handleAppShowModal" data-target="Modal">
+					<text>下发命令</text>
+				</view>
+				<!-- #endif -->
+			</view>
+		</view>
+		<!-- 设备详情 -->
+		<view class="detail">
+			<view class="detail-item">
+				<view class="detail-label">设备编号</view>
+				<view class="detail-value">{{ deviceDetail.sn }}</view>
+			</view>
+			<u-line length="90%" margin="0 auto"></u-line>
+			<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">{{ deviceDetail.organizationDTO.name }}</view>
+			</view>
+			<u-line length="90%" margin="0 auto"></u-line>
+			<view class="detail-item">
+				<view class="detail-label">最后连接时间</view>
+				<view class="detail-value">{{ formatLastOnlineTime }}</view>
+			</view>
+			<u-line length="90%" margin="0 auto"></u-line>
+			<view class="detail-item">
+				<view class="detail-label">是否告警</view>
+				<view class="detail-value">{{ alarmStatus }}</view>
+			</view>
+			<u-line length="90%" margin="0 auto"></u-line>
+			<view class="detail-item">
+				<view class="detail-label">设备描述</view>
+				<view class="detail-value">{{ deviceDetail.description }}</view>
+			</view>
+		</view>
+		<!-- 命令下发 -->
+		<!-- #ifdef APP-PLUS -->
+		<!-- 原生弹窗 封装成子组件无效 -->
+		<view v-show="showNativeModal" class="cu-modal" :class="modalName == 'Modal' ? 'show' : ''">
+			<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 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 {commandTypeList} from '../config/data.js'
+	import {useShowModal} from '@/plugins/utils.js'
+	
+	export default {
+		components: {
+			mpCommandIssuance,
+		},
+		props: {
+			deviceDetail: {
+				type: Object,
+				default: () => ({})
+			}
+		},
+		data() {
+			return {
+				showNativeModal: false,
+				current: 0,
+				commandTypeList,
+				commandTypeStr: 'OneWay',
+				inputCommandContent: '',
+				mpShowModal: false,
+				commandValue: {},
+				isShowTCP: false, //用于下发命令时判断是否是TCP/UDP
+				modalName: null,
+				copyTextValue: {
+					"method": "methodThingskit",
+					"params": {
+						"pin": 7,
+						"value": 1
+					}
+				}
+			};
+		},
+		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');
+			}
+		},
+		beforeCreate() {
+			this.modalName = null
+		},
+		onLoad() {
+			// 隐藏原生的tabbar
+			uni.hideTabBar();
+			this.modalName = null
+		},
+		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;
+				this.showNativeModal = true
+			},
+			handleMpShowModal() {
+				const {
+					transportType
+				} = this.deviceDetail.deviceProfile;
+				this.isShowTCP = transportType == 'TCP' ? true : false;
+				this.mpShowModal = true;
+			},
+			hideMpModal() {
+				this.mpShowModal = false;
+			},
+			hideAppModal() {
+				this.modalName = null;
+				this.showNativeModal = false
+			},
+			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 (!inputCommandVal) return uni.$u.toast('请输入下发内容~');
+				if (this.isShowTCP) {
+					//TCP的格式只能是字符串
+					const zg = /^[0-9a-zA-Z]*$/;
+					if (!zg.test(inputCommandVal)) {
+						uni.$u.toast('输入的内容只能是字母和数字的组合');
+						return;
+					}
+					this.commandValue.params = inputCommandVal;
+				} else {
+					this.commandValue.params = JSON.parse(inputCommandVal);
+				}
+				this.commandValue.persistent = true;
+				this.commandValue.additionalInfo = {
+					cmdType: 'API'
+				};
+				this.commandValue.method = 'methodThingskit';
+				this.commandValue.params = inputCommandVal;
+				await api.deviceApi.issueCommand(commandType, this.deviceDetail.tbDeviceId, this.commandValue);
+				this.cancelCommand();
+				uni.$u.toast('下发成功~');
+
+			},
+
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import url('../static/modal.css');
+
+	.app-command-content {
+		.app-command-text {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			text {
+				font-weight: 700;
+			}
+		}
+
+		.app-command-type {
+			display: flex;
+			margin-top: 20rpx;
+			margin-left: 20rpx;
+
+			text {
+				font-weight: 700;
+			}
+		}
+
+		.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
+				}
+			}
+		}
+	}
+
+	.basic-page {
+		padding: 0 30rpx;
+
+		.basic-header {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			height: 140rpx;
+			background-color: #fff;
+			border-radius: 20rpx;
+
+			.basic-text {
+				width: 370rpx;
+			}
+
+			.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;
+			}
+		}
+
+		.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>

-<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 class="detail-item" v-if="!commandDetail.request.oneway">
-				<view class="detail-label">响应失败内容</view>
-				<view class="detail-value" style="width: 400rpx;" v-if="commandDetail.response.status!=='SUCCESS'">
-					<u--textarea placeholder="响应失败内容" v-model="failContent" />
-				</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) {
-					console.error("命令记录页面格式化无返回值", e);
-					return value['params']
-				}
-			}
-		},
-		onLoad(options) {
-			const {
-				data
-			} = options;
-			this.commandDetail = JSON.parse(data);
-			if (this.commandDetail.response.status === 'SUCCESS') return
-			this.failContent = JSON.stringify(this.commandDetail.response.error)
-		}
-	};
-</script>
-
-<style lang="scss" scoped>
-	.command-detail {
-		padding: 0 30rpx;
-		height: 100vh;
-		background-color: #f8f9fa;
-
-		.detail-top {
-			height: 118rpx;
-			width: 690rpx;
-			display: flex;
-			align-items: center;
-			background-color: #fff;
-			color: #333;
-			border-radius: 20rpx;
-			font-size: 15px;
-			margin-top: 30rpx;
-			padding: 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;
-				}
-			}
-		}
-
-		.command {
-			margin: 30rpx 0;
-		}
-	}
-</style>
+<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>

+<template>
+	<view class="command-record">
+		<!-- 命令记录筛选-->
+		<view class="filter-button" @click="openSearchDialog">
+			<text>筛选</text>
+			<image src="/static/shaixuan.png" />
+		</view>
+		<!-- 命令记录分页 -->
+		<mescroll-uni ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback"
+			height="700px">
+			<view @click="openCommandDetail(item)" class="list-item" v-for="(item, index) in list" :key="index">
+				<view class="item">
+					<view class="item-first">
+						<text>{{ item.deviceName }}</text>
+						<!-- 业务 单向是没有响应状态 -->
+						<view v-if="!item.request.oneway">
+							<view class="item-right item-success" v-if="item.response">响应成功</view>
+							<view class="item-right item-fail" v-else>响应失败</view>
+						</view>
+					</view>
+					<view>
+						命令类型:
+						<text class="ml-16">{{ item.additionalInfo.cmdType===1?'服务':'自定义' }}</text>
+					</view>
+					<view v-if="item.statusName">
+						命令状态:
+						<text :style="{color:formatCommandStatus(item.status)}" class="ml-16">
+							{{ item.statusName }}
+						</text>
+					</view>
+					<view class="item-first">
+						<view>
+							响应类型:
+							<text class="ml-16">{{ !item.request.oneway?'双向':'单向' }}</text>
+						</view>
+						<view class="time">{{ format(item.createTime) }}</view>
+					</view>
+				</view>
+			</view>
+		</mescroll-uni>
+		<!-- 命令记录弹窗筛选 -->
+		<u-popup  @close="close" closeable bgColor="#fff" :show="show" mode="bottom" :round="20">
+			<view class="filter" @touchmove.stop.prevent="disabledScroll">
+				<view class="filter-title"><text>筛选条件</text></view>
+				<query-item :filterList="issueStatus" title="下发状态"
+					@clickTag="currentIndex => handleClickTag(currentIndex, issueStatus)"></query-item>
+				<view class="flex-column">
+					<view class="mt-3 command-time-text">命令下发时间</view>
+					<view class="mt-3">
+						<uni-datetime-picker return-type="timestamp" v-model="range" type="datetimerange"
+							rangeSeparator="至" />
+					</view>
+				</view>
+				<view class="h-30"></view>
+				<view class="button-group">
+					<view>
+						<u-button :customStyle="{ color: '#333' }" color="#e3e3e5" shape="circle" text="重置"
+							@click="resetFilter"></u-button>
+					</view>
+					<view>
+						<u-button color="#3388ff" shape="circle" text="确认" @click="confirmFilter"></u-button>
+					</view>
+				</view>
+			</view>
+		</u-popup>
+	</view>
+</template>
+<script>
+	import queryItem from '@/pages/device/components/query-item.vue';
+	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
+	import {
+		formatToDate
+	} from '@/plugins/utils.js';
+	import {
+		debounce
+	} from '@/plugins/throttle.js';
+	import {
+		issueStatus
+	} from '../config/data.js'
+	import api from '@/api/index.js'
+	import {
+		useNavigateTo
+	} from '@/plugins/utils.js'
+
+	export default {
+		mixins: [MescrollMixin],
+		components: {
+			queryItem
+		},
+		props: {
+			tbDeviceId: {
+				type: String,
+				default: ''
+			}
+		},
+		data() {
+			return {
+				show: false,
+				list: [],
+				total: 0,
+				range: [],
+				formTime: {
+					status: '',
+					startTime: '',
+					endTime: ''
+				},
+				status: '',
+				issueStatus,
+				downOption: {
+					auto: false //是否在初始化后,自动执行downCallback; 默认true
+				},
+				page: {
+					num: 0,
+					size: 10
+				}
+			};
+		},
+		methods: {
+			formatCommandStatus(status) {
+				return status == 'EXPIRED' ?
+					'red' :
+					status == 'DELIVERED' ?
+					'blue' :
+					status == 'QUEUED' ?
+					'#00C9A7' :
+					status == 'TIMEOUT' ?
+					'red' :
+					status == 'SENT' ?
+					'#00C9A7' : ''
+			},
+			downCallback() {
+				for (let i in this.formTime) Reflect.set(this.formTime, i, '')
+				this.list = [];
+				this.page.num = 1;
+				this.loadData(this.page.num, {
+					tbDeviceId: this.tbDeviceId
+				});
+			},
+			format(date) {
+				return formatToDate(date, 'YYYY-MM-DD HH:mm:ss');
+			},
+			disabledScroll() {
+				return;
+			},
+			upCallback() {
+				const tbDeviceId = {
+					tbDeviceId: this.tbDeviceId
+				}
+				const condition = Object.values(this.formTime)
+				if (condition.length === 0) {
+					this.page.num += 1;
+					this.loadData(this.page.num, {
+						...tbDeviceId
+					});
+				} else if (condition.filter(Boolean).length > 0) {
+					this.page.num += 1;
+					this.loadData(this.page.num, {
+						...this.formTime,
+						...tbDeviceId
+					});
+				} else {
+					this.page.num += 1;
+					this.loadData(this.page.num, {
+						...tbDeviceId
+					});
+				}
+			},
+			async loadData(pageNo, params = {}) {
+				let httpData = {
+					...params,
+					page: pageNo,
+					pageSize: 10
+				};
+				const res = await api.deviceApi.getRpcRecord({
+					params: httpData,
+					custom: {
+						load: false
+					}
+				})
+				if (!res) return
+				this.total = res.total;
+				uni.stopPullDownRefresh();
+				this.mescroll.endByPage(res.items.length, res.total);
+				if (pageNo == 1) {
+					this.list = res.items;
+				} else {
+					this.list = this.list.concat(res.items);
+				}
+			},
+			handleClickTag(currentIndex, list) {
+				list.map((item, index) => {
+					item.checked = index === currentIndex;
+				});
+			},
+			resetFilter() {
+				const {
+					issueStatus
+				} = this;
+				issueStatus.forEach(item => item.checked = false)
+				issueStatus[0].checked = true
+			},
+			close() {
+				this.show = false;
+			},
+			openSearchDialog() {
+				this.show = true;
+				this.resetFilter()
+				this.range = []
+				for (let i in this.formTime) Reflect.set(this.formTime, i, '')
+			},
+			hideKeyboard() {
+				uni.hideKeyboard();
+			},
+			confirmFilter() {
+				this.formTime.startTime = this.range[0]
+				this.formTime.endTime = this.range[1]
+				const issueStatus = this.issueStatus.find(item => item.checked);
+				this.formTime.status = issueStatus.type ? issueStatus.type : undefined,
+					this.loadData(1, {
+						tbDeviceId: this.tbDeviceId,
+						...this.formTime
+					});
+				this.show = false;
+			},
+			openCommandDetail(item) {
+				useNavigateTo('/device-subpackage/device-detail/components/command-detail?data=', item)
+			}
+		}
+	};
+</script>
+
+
+<style lang="scss" scoped>
+	@import "../static/command-record.scss";
+</style>

-<template>
-	<view class="historyData">
-		<!-- 公共组件-每个页面必须引入 -->
-		<public-module></public-module>
-		<view class="historyData-top">
-			<u-form :label-style="{ 'font-size': '0rpx' }">
-				<u-form-item @click="openCalendar">
-					<u-input v-model="timeData.selectTime" disabled disabledColor="#fff" placeholder="请选择日期"
-						border="none" suffixIcon="arrow-down">
-						<template slot="prefix">
-							<image class="icon" src="../../../static/can-der.png"></image>
-						</template>
-					</u-input>
-				</u-form-item>
-				<u-form-item @click="openTimeGap">
-					<u-input v-model="timeData.getTimeGap" disabled disabledColor="#fff" placeholder="请选择时间区间"
-						border="none" suffixIcon="arrow-down">
-						<template slot="prefix">
-							<image class="icon" src="../../../static/time.png"></image>
-						</template>
-					</u-input>
-				</u-form-item>
-				<u-form-item @click="openAvg">
-					<u-input shape="circle" v-model="aggText" placeholder="请选择数据聚合功能" disabled disabledColor="#377DFF0D"
-						suffixIcon="arrow-down" />
-				</u-form-item>
-				<u-form-item @click="openTimeGap" v-if="limitFlag">
-					<view class="u-flex">
-						<text>最大条数</text>
-						<u-number-box style="margin-left:30rpx" class="ml-10" v-model="timeData.limit" :min="7"
-							:max="50000"></u-number-box>
-					</view>
-				</u-form-item>
-				<u-form-item @click="openType">
-					<u-input shape="circle" v-model="timeData.getType" placeholder="请选择属性" disabled
-						disabledColor="#377DFF0D" suffixIcon="arrow-down" />
-				</u-form-item>
-			</u-form>
-
-			<view class="charts-box" v-show="historyData.length">
-				<qiun-data-charts type="area" canvas2d canvasId="daskujdhasljkdcnzjkdfhuoqwlqwjhkdsamjczxnmdasd123321"
-					:chartData="chartData" :ontouch="true"
-					:opts="{ xAxis: { disabled: true, itemCount: 6, scrollShow: true }, legend: { show: false }, enableScroll: true }" />
-			</view>
-			<mescroll-empty v-if="!historyData.length" />
-		</view>
-		<view class="historyData-bottom" v-show="historyData.length">
-			<view class="table">
-				<view class="tr bg-w" v-if="historyData.length">
-					<view class="th">变量值</view>
-					<view class="th">更新时间</view>
-				</view>
-				<view class="tr bg-g" :class="{ odd: index % 2 === 0 }" v-for="(item, index) in historyData"
-					:key="index">
-					<view class="td">{{ item.value }}</view>
-					<view class="td">{{ item.ts }}</view>
-				</view>
-			</view>
-		</view>
-		<u-calendar :show="showCalendar" :defaultDate="defaultDate" closeOnClickOverlay mode="range" startText="开始时间"
-			endText="结束时间" confirmDisabledText="请选择日期" :minDate="minDate" :maxDate="maxDate" @confirm="calendarConfirm"
-			@close="calendarClose"></u-calendar>
-		<u-picker :show="showTimeGap" :columns="columns" keyName="label" closeOnClickOverlay @confirm="confirmTimeGap"
-			@cancel="cancelTimeGap" @close="cancelTimeGap" :defaultIndex="[3]"></u-picker>
-		<u-picker :show="showSelectType" :columns="keys" closeOnClickOverlay @confirm="confirmTypeGap"
-			@cancel="cancelTypeGap" @close="cancelTypeGap"></u-picker>
-		<u-picker :show="showSelectAvg" :columns="avgColumns" keyName="label" closeOnClickOverlay
-			@confirm="confirmAvgGap" @cancel="showSelectAvg=false" @close="showSelectAvg=false"></u-picker>
-	</view>
-</template>
-
-<script>
-	import fTabbar from '@/components/module/f-tabbar/f-tabbar';
-	import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
-	import {
-		getHistoryData
-	} from '../api/index.js';
-	import {
-		formatToDate
-	} from '@/plugins/utils.js';
-	const d = new Date();
-	const year = d.getFullYear();
-	let month = d.getMonth() + 1;
-	month = month < 10 ? `0${month}` : month;
-	const date = d.getDate();
-	export default {
-		components: {
-			fTabbar,
-			qiunDataCharts
-		},
-		props: {
-			keys: {
-				type: Array,
-				default: () => []
-			},
-			yesterday: {
-				type: String,
-				default: ''
-			},
-			today: {
-				type: String,
-				default: ''
-			},
-			timeDiff: {
-				type: String,
-				default: ''
-			},
-			historyData: {
-				type: Array,
-				default: () => []
-			},
-			entityId: {
-				type: String,
-				required: true
-			},
-			start: {
-				type: String,
-				required: true
-			},
-			end: {
-				type: String,
-				required: true
-			}
-		},
-		data() {
-			return {
-				limitFlag: true,
-				avgColumns: [
-					[{
-							label: '最小值',
-							value: 'MIN'
-						}, {
-							label: '最大值',
-							value: 'MAX'
-						},
-						{
-							label: '平均值',
-							value: 'AVG'
-						},
-						{
-							label: '求和',
-							value: 'SUM'
-						},
-						{
-							label: '计数',
-							value: 'COUNT'
-						},
-						{
-							label: '空',
-							value: 'NONE'
-						},
-					]
-				],
-				startTs: this.start,
-				endTs: this.end,
-				showCalendar: false,
-				showTimeGap: false,
-				showSelectType: false,
-				showSelectAvg: false,
-				minDate: `${year}-${month - 1}-${date}`,
-				maxDate: `${year}-${month}-${date + 1}`,
-				defaultDate: [this.yesterday, this.today],
-				chartData: {
-					categories: this.historyData.length && this.historyData.map(item => item.ts),
-					series: [{
-						name: this.keys[0][0],
-						data: this.historyData.length && this.historyData.map(item => Number(item.value))
-					}]
-				},
-				columns: [
-					[{
-							label: '5分钟',
-							value: 300000
-						},
-						{
-							label: '10分钟',
-							value: 600000
-						},
-						{
-							label: '15分钟',
-							value: 900000
-						},
-						{
-							label: '30分钟',
-							value: 1800000
-						},
-						{
-							label: '1小时',
-							value: 3600000
-						},
-						{
-							label: '2小时',
-							value: 7200000
-						}
-					]
-				],
-				timeData: {
-					selectTime: this.yesterday + ' 至 ' + this.today,
-					getTimeGap: this.timeDiff,
-					getType: this.keys[0][0],
-					limit: 7,
-					agg: 'NONE'
-				},
-				aggText: '空'
-			};
-		},
-		watch: {
-			historyData(newValue) {
-				if (!newValue.length) {
-					this.chartData.categories = [];
-					this.chartData.series = [];
-				} else {
-					this.chartData.categories = newValue.map(item => item.ts);
-					this.chartData.series = [{
-						name: this.keys[0][0],
-						data: newValue.map(item => Number(item.value))
-					}];
-				}
-			}
-		},
-		methods: {
-			// 动态生成Columns
-			generateColumns(value) {
-				if (value < 604800000) {
-					// 小于7天
-					return [
-						[{
-								label: '5分钟',
-								value: 300000
-							},
-							{
-								label: '10分钟',
-								value: 600000
-							},
-							{
-								label: '15分钟',
-								value: 900000
-							},
-							{
-								label: '30分钟',
-								value: 1800000
-							},
-							{
-								label: '1小时',
-								value: 3600000
-							},
-							{
-								label: '2小时',
-								value: 7200000
-							}
-						]
-					];
-				} else if (value < 2592000000) {
-					// 小于30天
-					return [
-						[{
-								label: '30分钟',
-								value: 1800000
-							},
-							{
-								label: '1小时',
-								value: 3600000
-							},
-							{
-								label: '2小时',
-								value: 7200000
-							},
-							{
-								label: '5小时',
-								value: 18000000
-							},
-							{
-								label: '10小时',
-								value: 36000000
-							},
-							{
-								label: '12小时',
-								value: 43200000
-							},
-							{
-								label: '1天',
-								value: 86400000
-							}
-						]
-					];
-				} else if (value >= 2592000000) {
-					// 大于30天
-					return [
-						[{
-								label: '2小时',
-								value: 7200000
-							},
-							{
-								label: '5小时',
-								value: 18000000
-							},
-							{
-								label: '10小时',
-								value: 36000000
-							},
-							{
-								label: '12小时',
-								value: 43200000
-							},
-							{
-								label: '1天',
-								value: 86400000
-							}
-						]
-					];
-				}
-			},
-			openCalendar() {
-				this.showCalendar = true;
-			},
-			openTimeGap() {
-				this.showTimeGap = true;
-			},
-			openType() {
-				this.showSelectType = true;
-			},
-			openAvg() {
-				this.showSelectAvg = true
-			},
-			calendarConfirm(date) {
-				this.showCalendar = false;
-				this.timeData.selectTime = `${date[0]} 至 ${date[date.length - 1]}`;
-				// 选择的日期时间差(时间戳)
-				const timeDiff = formatToDate(date[date.length - 1], 'x') - formatToDate(date[0], 'x');
-				const genColumns = this.generateColumns(timeDiff);
-				this.columns = genColumns;
-				this.timeData.getTimeGap = '';
-				this.timeData.getType = '';
-				this.startTs = formatToDate(date[0], 'x');
-				// 最后时间的最后一秒
-				this.endTs = formatToDate(`${date[date.length - 1]} 23:59:59`, 'x');
-			},
-			calendarClose() {
-				this.showCalendar = false;
-			},
-			confirmTimeGap(time) {
-				this.showTimeGap = false;
-				this.timeData.getTimeGap = time.value[0].label;
-				this.timeData.getType = '';
-			},
-
-			cancelTimeGap() {
-				this.showTimeGap = false;
-			},
-			confirmAvgGap(e) {
-				this.timeData.agg = e.value[0].value
-				this.aggText = e.value[0].label
-				if (e.value[0].value === 'NONE') {
-					this.limitFlag = true
-					this.timeData.limit = 7
-				} else {
-					this.timeData.limit = null
-					this.limitFlag = false
-				}
-				this.showSelectAvg = false
-			},
-			async confirmTypeGap(time) {
-				this.showSelectType = false;
-				this.timeData.getType = time.value[0];
-				const interval = this.columns[0].find(item => item.label === this.timeData.getTimeGap);
-				const data = await getHistoryData({
-					startTs: this.startTs,
-					endTs: this.endTs,
-					keys: this.timeData.getType,
-					interval: this.limitFlag ? null : interval.value,
-					entityId: this.entityId,
-					limit: this.timeData.limit,
-					agg: this.timeData.agg
-				});
-				this.$emit('update', data[this.timeData.getType]);
-			},
-			cancelTypeGap() {
-				this.showSelectType = false;
-			}
-		}
-	};
-</script>
-
-<style lang="scss" scoped>
-	.charts-box {
-		width: 100%;
-		height: 550rpx;
-	}
-
-	.historyData {
-		margin: 30rpx;
-
-		.historyData-top {
-			padding: 30rpx;
-			background-color: #fff;
-			// height: 870rpx;
-			border-radius: 20rpx;
-
-			.icon {
-				width: 28rpx;
-				height: 28rpx;
-				margin-right: 15rpx;
-			}
-		}
-
-		.historyData-bottom {
-			margin-top: 30rpx;
-			background-color: #fff;
-			border-radius: 20rpx;
-
-			.table {
-				border: 0px solid darkgray;
-
-				.tr {
-					display: flex;
-					width: 100%;
-					justify-content: center;
-					height: 3rem;
-					align-items: center;
-
-					.th {
-						display: flex;
-						justify-content: center;
-						align-items: center;
-						width: 50%;
-						color: #333;
-						font-weight: 500;
-					}
-
-					.td {
-						color: #999;
-						width: 50%;
-						display: flex;
-						justify-content: center;
-						text-align: center;
-					}
-				}
-			}
-		}
-	}
-
-	.odd {
-		background-color: #f9fcff;
-	}
+<template>
+	<view class="historyData">
+		<!-- 公共组件-每个页面必须引入 -->
+		<public-module></public-module>
+		<view class="historyData-top">
+			<u-form :label-style="{ 'font-size': '0rpx' }">
+				<u-form-item @click="openCalendar">
+					<u-input v-model="timeData.selectTime" disabled disabledColor="#fff" placeholder="请选择日期"
+						border="none" suffixIcon="arrow-down">
+						<template slot="prefix">
+							<image class="icon" src="../../../static/can-der.png"></image>
+						</template>
+					</u-input>
+				</u-form-item>
+				<u-form-item @click="openTimeGap">
+					<u-input v-model="timeData.getTimeGap" disabled disabledColor="#fff" placeholder="请选择时间区间"
+						border="none" suffixIcon="arrow-down">
+						<template slot="prefix">
+							<image class="icon" src="../../../static/time.png"></image>
+						</template>
+					</u-input>
+				</u-form-item>
+				<u-form-item @click="openAvg">
+					<u-input shape="circle" v-model="aggText" placeholder="请选择数据聚合功能" disabled disabledColor="#377DFF0D"
+						suffixIcon="arrow-down" />
+				</u-form-item>
+				<u-form-item @click="openTimeGap" v-if="limitFlag">
+					<view class="u-flex">
+						<text>最大条数</text>
+						<u-number-box style="margin-left:30rpx" class="ml-10" v-model="timeData.limit" :min="7"
+							:max="50000"></u-number-box>
+					</view>
+				</u-form-item>
+				<u-form-item @click="openType">
+					<u-input shape="circle" v-model="timeData.getType" placeholder="请选择属性" disabled
+						disabledColor="#377DFF0D" suffixIcon="arrow-down" />
+				</u-form-item>
+			</u-form>
+
+			<view class="charts-box" v-show="historyData.length">
+				<qiun-data-charts type="area" canvas2d canvasId="daskujdhasljkdcnzjkdfhuoqwlqwjhkdsamjczxnmdasd123321"
+					:chartData="chartData" :ontouch="true"
+					:opts="{ xAxis: { disabled: true, itemCount: 6, scrollShow: true }, legend: { show: false }, enableScroll: true }" />
+			</view>
+			<mescroll-empty v-if="!historyData.length" />
+		</view>
+		<view class="historyData-bottom" v-show="historyData.length">
+			<view class="table">
+				<view class="tr bg-w" v-if="historyData.length">
+					<view class="th">变量值</view>
+					<view class="th">更新时间</view>
+				</view>
+				<view class="tr bg-g" :class="{ odd: index % 2 === 0 }" v-for="(item, index) in historyData"
+					:key="index">
+					<view class="td">{{ item.value }}</view>
+					<view class="td">{{ item.ts }}</view>
+				</view>
+			</view>
+		</view>
+		<u-calendar :show="showCalendar" :defaultDate="defaultDate" closeOnClickOverlay mode="range" startText="开始时间"
+			endText="结束时间" confirmDisabledText="请选择日期" :minDate="minDate" :maxDate="maxDate" @confirm="calendarConfirm"
+			@close="calendarClose"></u-calendar>
+		<u-picker :show="showTimeGap" :columns="columns" keyName="label" closeOnClickOverlay @confirm="confirmTimeGap"
+			@cancel="cancelTimeGap" @close="cancelTimeGap" :defaultIndex="[3]"></u-picker>
+		<u-picker :show="showSelectType" :columns="keys" closeOnClickOverlay @confirm="confirmTypeGap"
+			@cancel="cancelTypeGap" @close="cancelTypeGap"></u-picker>
+		<u-picker :show="showSelectAvg" :columns="avgColumns" keyName="label" closeOnClickOverlay
+			@confirm="confirmAvgGap" @cancel="showSelectAvg=false" @close="showSelectAvg=false"></u-picker>
+	</view>
+</template>
+
+<script>
+	import fTabbar from '@/components/module/f-tabbar/f-tabbar';
+	import qiunDataCharts from './uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
+	import {
+		getHistoryData
+	} from '../api/index.js';
+	import {
+		formatToDate
+	} from '@/plugins/utils.js';
+	const d = new Date();
+	const year = d.getFullYear();
+	let month = d.getMonth() + 1;
+	month = month < 10 ? `0${month}` : month;
+	const date = d.getDate();
+	export default {
+		components: {
+			fTabbar,
+			qiunDataCharts
+		},
+		props: {
+			keys: {
+				type: Array,
+				default: () => []
+			},
+			yesterday: {
+				type: String,
+				default: ''
+			},
+			today: {
+				type: String,
+				default: ''
+			},
+			timeDiff: {
+				type: String,
+				default: ''
+			},
+			historyData: {
+				type: Array,
+				default: () => []
+			},
+			entityId: {
+				type: String,
+				required: true
+			},
+			start: {
+				type: String,
+				required: true
+			},
+			end: {
+				type: String,
+				required: true
+			}
+		},
+		data() {
+			return {
+				limitFlag: true,
+				avgColumns: [
+					[{
+							label: '最小值',
+							value: 'MIN'
+						}, {
+							label: '最大值',
+							value: 'MAX'
+						},
+						{
+							label: '平均值',
+							value: 'AVG'
+						},
+						{
+							label: '求和',
+							value: 'SUM'
+						},
+						{
+							label: '计数',
+							value: 'COUNT'
+						},
+						{
+							label: '空',
+							value: 'NONE'
+						},
+					]
+				],
+				startTs: this.start,
+				endTs: this.end,
+				showCalendar: false,
+				showTimeGap: false,
+				showSelectType: false,
+				showSelectAvg: false,
+				minDate: `${year}-${month - 1}-${date}`,
+				maxDate: `${year}-${month}-${date + 1}`,
+				defaultDate: [this.yesterday, this.today],
+				chartData: {
+					categories: this.historyData.length && this.historyData.map(item => item.ts),
+					series: [{
+						name: this.keys[0][0],
+						data: this.historyData.length && this.historyData.map(item => Number(item.value))
+					}]
+				},
+				columns: [
+					[{
+							label: '5分钟',
+							value: 300000
+						},
+						{
+							label: '10分钟',
+							value: 600000
+						},
+						{
+							label: '15分钟',
+							value: 900000
+						},
+						{
+							label: '30分钟',
+							value: 1800000
+						},
+						{
+							label: '1小时',
+							value: 3600000
+						},
+						{
+							label: '2小时',
+							value: 7200000
+						}
+					]
+				],
+				timeData: {
+					selectTime: this.yesterday + ' 至 ' + this.today,
+					getTimeGap: this.timeDiff,
+					getType: this.keys[0][0],
+					limit: 7,
+					agg: 'NONE'
+				},
+				aggText: '空'
+			};
+		},
+		watch: {
+			historyData(newValue) {
+				if (!newValue.length) {
+					this.chartData.categories = [];
+					this.chartData.series = [];
+				} else {
+					this.chartData.categories = newValue.map(item => item.ts);
+					this.chartData.series = [{
+						name: this.keys[0][0],
+						data: newValue.map(item => Number(item.value))
+					}];
+				}
+			}
+		},
+		methods: {
+			// 动态生成Columns
+			generateColumns(value) {
+				if (value < 604800000) {
+					// 小于7天
+					return [
+						[{
+								label: '5分钟',
+								value: 300000
+							},
+							{
+								label: '10分钟',
+								value: 600000
+							},
+							{
+								label: '15分钟',
+								value: 900000
+							},
+							{
+								label: '30分钟',
+								value: 1800000
+							},
+							{
+								label: '1小时',
+								value: 3600000
+							},
+							{
+								label: '2小时',
+								value: 7200000
+							}
+						]
+					];
+				} else if (value < 2592000000) {
+					// 小于30天
+					return [
+						[{
+								label: '30分钟',
+								value: 1800000
+							},
+							{
+								label: '1小时',
+								value: 3600000
+							},
+							{
+								label: '2小时',
+								value: 7200000
+							},
+							{
+								label: '5小时',
+								value: 18000000
+							},
+							{
+								label: '10小时',
+								value: 36000000
+							},
+							{
+								label: '12小时',
+								value: 43200000
+							},
+							{
+								label: '1天',
+								value: 86400000
+							}
+						]
+					];
+				} else if (value >= 2592000000) {
+					// 大于30天
+					return [
+						[{
+								label: '2小时',
+								value: 7200000
+							},
+							{
+								label: '5小时',
+								value: 18000000
+							},
+							{
+								label: '10小时',
+								value: 36000000
+							},
+							{
+								label: '12小时',
+								value: 43200000
+							},
+							{
+								label: '1天',
+								value: 86400000
+							}
+						]
+					];
+				}
+			},
+			openCalendar() {
+				this.showCalendar = true;
+			},
+			openTimeGap() {
+				this.showTimeGap = true;
+			},
+			openType() {
+				this.showSelectType = true;
+			},
+			openAvg() {
+				this.showSelectAvg = true
+			},
+			calendarConfirm(date) {
+				this.showCalendar = false;
+				this.timeData.selectTime = `${date[0]} 至 ${date[date.length - 1]}`;
+				// 选择的日期时间差(时间戳)
+				const timeDiff = formatToDate(date[date.length - 1], 'x') - formatToDate(date[0], 'x');
+				const genColumns = this.generateColumns(timeDiff);
+				this.columns = genColumns;
+				this.timeData.getTimeGap = '';
+				this.timeData.getType = '';
+				this.startTs = formatToDate(date[0], 'x');
+				// 最后时间的最后一秒
+				this.endTs = formatToDate(`${date[date.length - 1]} 23:59:59`, 'x');
+			},
+			calendarClose() {
+				this.showCalendar = false;
+			},
+			confirmTimeGap(time) {
+				this.showTimeGap = false;
+				this.timeData.getTimeGap = time.value[0].label;
+				this.timeData.getType = '';
+			},
+
+			cancelTimeGap() {
+				this.showTimeGap = false;
+			},
+			confirmAvgGap(e) {
+				this.timeData.agg = e.value[0].value
+				this.aggText = e.value[0].label
+				if (e.value[0].value === 'NONE') {
+					this.limitFlag = true
+					this.timeData.limit = 7
+				} else {
+					this.timeData.limit = null
+					this.limitFlag = false
+				}
+				this.showSelectAvg = false
+			},
+			async confirmTypeGap(time) {
+				this.showSelectType = false;
+				this.timeData.getType = time.value[0];
+				const interval = this.columns[0].find(item => item.label === this.timeData.getTimeGap);
+				const data = await getHistoryData({
+					startTs: this.startTs,
+					endTs: this.endTs,
+					keys: this.timeData.getType,
+					interval: this.limitFlag ? null : interval.value,
+					entityId: this.entityId,
+					limit: this.timeData.limit,
+					agg: this.timeData.agg
+				});
+				this.$emit('update', data[this.timeData.getType]);
+			},
+			cancelTypeGap() {
+				this.showSelectType = false;
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.charts-box {
+		width: 100%;
+		height: 550rpx;
+	}
+
+	.historyData {
+		margin: 30rpx;
+
+		.historyData-top {
+			padding: 30rpx;
+			background-color: #fff;
+			// height: 870rpx;
+			border-radius: 20rpx;
+
+			.icon {
+				width: 28rpx;
+				height: 28rpx;
+				margin-right: 15rpx;
+			}
+		}
+
+		.historyData-bottom {
+			margin-top: 30rpx;
+			background-color: #fff;
+			border-radius: 20rpx;
+
+			.table {
+				border: 0px solid darkgray;
+
+				.tr {
+					display: flex;
+					width: 100%;
+					justify-content: center;
+					height: 3rem;
+					align-items: center;
+
+					.th {
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						width: 50%;
+						color: #333;
+						font-weight: 500;
+					}
+
+					.td {
+						color: #999;
+						width: 50%;
+						display: flex;
+						justify-content: center;
+						text-align: center;
+					}
+				}
+			}
+		}
+	}
+
+	.odd {
+		background-color: #f9fcff;
+	}
 </style>
 </style>

+<template>
+	<view class="mp-u-modal">
+		<u-modal :mask-close-able="true" :show="showModal" closeOnClickOverlay :showConfirmButton="false"
+			@close="$emit('hideModal')" @touchmove.stop.prevent="disabledScroll" z-index="99999">
+			<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>
+		</u-modal>
+	</view>
+</template>
+
+<script>
+	import {
+		useShowModal
+	} from '@/plugins/utils.js'
+
+	export default {
+		props: {
+			showModal: Boolean,
+			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: '复制成功'
+							})
+						}
+					});
+				})
+			},
+			reset() {
+				this.commandType = 'OneWay'
+				this.inputCommandVal = ''
+			}
+		}
+	}
+</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>

+<template>
+	<view class="realtime-page">
+		<view class="item" v-for="(item, index) in recordList" :key="index">
+			<view class="item-top">
+				<view>{{ item.key }}</view>
+				<view class="item-value">{{ item.value }}</view>
+			</view>
+			<view class="item-time">{{ item.time }}</view>
+		</view>
+		<mescroll-empty v-if="!recordList.length" />
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			recordList: {
+				type: Array,
+				default: () => []
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../static/realtime-data.scss";
+</style>

+const list = [{
+		name: "基础信息",
+	},
+	{
+		name: "实时数据",
+	},
+	{
+		name: "历史数据",
+	},
+	{
+		name: "告警记录",
+	},
+]
+
+const issueStatus = [{
+		checked: true,
+		name: '全部',
+		type: ''
+	},
+	{
+		checked: false,
+		name: '队列中',
+		type: 'QUEUED'
+	},
+	{
+		checked: false,
+		name: '已发送',
+		type: 'SENT'
+	},
+	{
+		checked: false,
+		name: '发送成功',
+		type: 'DELIVERED'
+	},
+	{
+		checked: false,
+		name: '响应成功',
+		type: 'SUCCESSFUL'
+	},
+	{
+		checked: false,
+		name: '超时',
+		type: 'TIMEOUT'
+	},
+	{
+		checked: false,
+		name: '已过期',
+		type: 'EXPIRED'
+	},
+	{
+		checked: false,
+		name: '响应失败',
+		type: 'FAILED'
+	},
+	{
+		checked: false,
+		name: '已删除',
+		type: 'DELETED'
+	}
+]
+
+const commandTypeList = [{
+		value: 'OneWay',
+		name: '单向',
+	},
+	{
+		value: 'TwoWay',
+		name: '双向'
+	},
+]
+
+
+export {
+	list,
+	issueStatus,
+	commandTypeList
+}

-<template>
-	<view class="device-detail-page">
-		<!-- 公共组件-每个页面必须引入 -->
-		<public-module></public-module>
-		<u-sticky bgColor="#fff">
-			<u-tabs :list="list" :current="currentTab" @click="handleTabClick" :activeStyle="{
-          fontWeight: 'bold',
-          color: '#333',
-        }" :inactiveStyle="{
-          color: '#999',
-        }" :scrollable="isScrollable" />
-		</u-sticky>
-		<view style="margin-top: 30rpx">
-			<basicInfo v-show="currentTab == 0" :deviceDetail="deviceDetail" />
-			<realTimeData v-show="currentTab === 1" :recordList="recordList" />
-			<historyData v-if="currentTab === 2" :keys="keys" :yesterday="yesterday" :today="today" :timeDiff="timeDiff"
-				:historyData="historyData" :entityId="entityId" :start="startTs" :end="endTs" @update="handleUpdate" />
-			<alarmHistory v-show="currentTab === 3" :deviceId="deviceId" />
-			<commondRecord v-if="currentTab === 4" :tbDeviceId="entityId" />
-		</view>
-	</view>
-</template>
-
-<script>
-	import fTabbar from "@/components/module/f-tabbar/f-tabbar";
-	import basicInfo from "./tabDetail/basicInfo.vue";
-	import realTimeData from "./tabDetail/realtimeData.vue";
-	import alarmHistory from "./tabDetail/alarmHistory.vue";
-	import historyData from "./tabDetail/historyData.vue";
-	import commondRecord from "./tabDetail/CommandRecord.vue";
-	import {
-		getDeviceKeys,
-		getHistoryData
-	} from "./api/index.js";
-	import {
-		formatToDate
-	} from "@/plugins/utils.js";
-	import MescrollCompMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-comp.js";
-	import moment from "moment";
-	import base from "@/config/baseUrl.js";
-
-	export default {
-		mixins: [MescrollCompMixin],
-		components: {
-			fTabbar,
-			basicInfo,
-			realTimeData,
-			alarmHistory,
-			historyData,
-			commondRecord,
-		},
-		data() {
-			return {
-				list: [{
-						name: "基础信息",
-					},
-					{
-						name: "实时数据",
-					},
-					{
-						name: "历史数据",
-					},
-					{
-						name: "告警记录",
-					},
-				],
-				currentTab: 0,
-				deviceId: "",
-				deviceDetail: {},
-				keys: [],
-				yesterday: "",
-				today: "",
-				timeDiff: "",
-				historyData: [],
-				entityId: "",
-				startTs: "",
-				endTs: "",
-				recordList: [],
-				isScrollable: false,
-				attrList: []
-			};
-		},
-		onUnload() {
-			// 页面关闭时,销毁webSocket连接,否则第二次会存在连接不到的情况
-			uni.closeSocket();
-		},
-		async onLoad(options) {
-			const {
-				id,
-				alarmStatus,
-				lastOnlineTime,
-				tbDeviceId,
-				deviceProfileId
-			} =
-			options;
-			this.deviceId = id;
-			const res = await uni.$u.http.get(`/yt/device/${id}`);
-			this.deviceDetail = {
-				...res,
-				alarmStatus,
-				lastOnlineTime,
-			};
-
-			// 设备类型不是网关子设备的添加一个命令记录的选项卡
-			if (this.deviceDetail.deviceType !== "SENSOR") {
-				this.list.push({
-					name: "命令记录",
-				});
-			}
-			this.isScrollable = this.list.length > 4;
-			if (res.deviceProfileId) {
-				const getAttrList = await uni.$u.http.get(
-					`/yt/device/attributes/${res.deviceProfileId}`
-				);
-				if (Array.isArray(getAttrList)) {
-					this.attrList = getAttrList.map(m => {
-						return m.identifier
-					})
-				}
-			}
-			// 连接webSockte
-			const socketTask = uni.connectSocket({
-				url: `${base.socketPrefix}://${base.baseWebSocketUrl}/api/ws/plugins/telemetry?token=` +
-					uni.getStorageSync("userInfo").isToken, //仅为示例，并非真实接口地址。
-				complete: () => {},
-			});
-			uni.onSocketOpen((header) => {
-				socketTask.send({
-					data: JSON.stringify({
-						attrSubCmds: [],
-						tsSubCmds: [{
-							entityType: "DEVICE",
-							entityId: tbDeviceId,
-							scope: "LATEST_TELEMETRY",
-							cmdId: 1,
-							keys: this.attrList.join(','),
-						}, ],
-						historyCmds: [],
-						entityDataCmds: [],
-						entityDataUnsubscribeCmds: [],
-						alarmDataCmds: [],
-						alarmDataUnsubscribeCmds: [],
-						entityCountCmds: [],
-						entityCountUnsubscribeCmds: [],
-					}),
-					success() {},
-				});
-			});
-			socketTask.onMessage((msg) => {
-				const {
-					data
-				} = JSON.parse(msg.data);
-				const newArray = [];
-				for (const key in data) {
-					const [time, value] = data[key].flat(1);
-					let obj = {
-						key,
-						time,
-						value,
-					};
-					if (this.recordList.length === 0) {
-						this.recordList.unshift(obj);
-					} else {
-						newArray.push(obj);
-					}
-				}
-				newArray.forEach((item) => {
-					let flag = false;
-					this.recordList.forEach((item1) => {
-						if (item1.key === item.key) {
-							item1.value = item.value;
-							item1.time = item.time;
-							flag = true;
-						}
-					});
-					if (!flag) {
-						this.recordList.unshift(item);
-					}
-				});
-				this.recordList = this.recordList.map((item) => {
-					return {
-						...item,
-						time: formatToDate(item.time, "YYYY-MM-DD HH:mm:ss"),
-					};
-				});
-			});
-
-			const keys = await getDeviceKeys(tbDeviceId);
-			this.keys = [keys];
-			// 昨天
-			this.yesterday = moment().subtract(1, "days").format("YYYY-MM-DD");
-			// 今天
-			this.today = moment().format("YYYY-MM-DD");
-			// 开始时间
-			this.startTs = moment().subtract(1, "days").format("x");
-			// 结束时间
-			this.endTs = moment().format("x");
-			this.entityId = tbDeviceId;
-
-			const data = await getHistoryData({
-				entityId: tbDeviceId,
-				startTs: this.startTs,
-				endTs: this.endTs,
-				keys: keys[0],
-				// interval: 1800000,
-				limit: 7,
-				agg: 'NONE'
-			});
-			this.timeDiff = "30分钟";
-			if (!Object.keys(data).length) return;
-
-			this.historyData = data[keys[0]].map((item) => {
-				return {
-					value: item.value,
-					ts: formatToDate(item.ts, "YYYY-MM-DD HH:mm:ss"),
-				};
-			});
-		},
-		methods: {
-			handleTabClick({
-				index
-			}) {
-				this.currentTab = index;
-			},
-			handleUpdate(data, e) {
-				if (!Array.isArray(data)) {
-					this.historyData = [];
-					return;
-				}
-				this.historyData = data.map((item) => {
-					return {
-						value: item.value,
-						ts: formatToDate(item.ts, "YYYY-MM-DD HH:mm:ss"),
-					};
-				});
-			},
-		},
-	};
-</script>
-
-<style lang="scss" scoped>
-	.device-detail-page {
-		height: 100vh;
-		background-color: #f8f9fa;
-	}
-</style>
+<template>
+	<view class="device-detail-page">
+		<!-- 公共组件-每个页面必须引入 -->
+		<public-module></public-module>
+		<u-sticky :bgColor="bgColor">
+			<u-tabs :list="list" :current="currentTab" @click="handleTabClick" :activeStyle="activeColor"
+				:inactiveStyle="inActiveColor" :scrollable="isScrollable" />
+		</u-sticky>
+		<view class="mt-3">
+			<basic-info v-show="currentTab == 0" :deviceDetail="deviceDetail" />
+			<realtime-data v-show="currentTab === 1" :recordList="recordList" />
+			<history-data v-if="currentTab === 2" :keys="keys" :yesterday="yesterday" :today="today"
+				:timeDiff="timeDiff" :historyData="historyData" :entityId="entityId" :start="startTs" :end="endTs"
+				@update="handleUpdate" />
+			<alarm-history v-show="currentTab === 3" :deviceId="deviceId" />
+			<commond-record v-if="currentTab === 4" :tbDeviceId="entityId" />
+		</view>
+	</view>
+</template>
+
+<script>
+	import fTabbar from "@/components/module/f-tabbar/f-tabbar";
+	import basicInfo from "./components/basic-info.vue";
+	import realtimeData from "./components/realtime-data.vue";
+	import alarmHistory from "./components/alarm-history.vue";
+	import historyData from "./components/history-data.vue";
+	import commondRecord from "./components/command-record.vue";
+	import { getDeviceKeys,getHistoryData } from "./api/index.js";
+	import {formatToDate} from "@/plugins/utils.js";
+	import MescrollCompMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-comp.js";
+	import moment from "moment";
+	import base from "@/config/baseUrl.js";
+	import { list } from './config/data.js'
+	import api from '@/api'
+
+	export default {
+		mixins: [MescrollCompMixin],
+		components: {
+			fTabbar,
+			basicInfo,
+			realtimeData,
+			alarmHistory,
+			historyData,
+			commondRecord,
+		},
+		data() {
+			return {
+				bgColor: '#fff',
+				activeColor: {
+					fontWeight: 'bold',
+					color: '#333',
+				},
+				inActiveColor: {
+					color: '#999',
+				},
+				list,
+				currentTab: 0,
+				deviceId: "",
+				deviceDetail: {},
+				keys: [],
+				yesterday: "",
+				today: "",
+				timeDiff: "",
+				historyData: [],
+				entityId: "",
+				startTs: "",
+				endTs: "",
+				recordList: [], //实时数据
+				isScrollable: false,
+				attrList: []
+			};
+		},
+		onUnload() {
+			// 页面关闭时,销毁webSocket连接,否则第二次会存在连接不到的情况
+			uni.closeSocket();
+		},
+		async onLoad(options) {
+			const {id,alarmStatus,lastOnlineTime,tbDeviceId,deviceProfileId} = options;
+			this.deviceId = id;
+			const res = await api.deviceApi.getDeviceDetail(this.deviceId)
+			if(!res) return
+			this.deviceDetail = {
+				...res,
+				alarmStatus,
+				lastOnlineTime,
+			};
+			// 设备类型不是网关子设备的添加一个命令记录的选项卡
+			if (this.deviceDetail.deviceType !== "SENSOR") {
+				this.list.push({
+					name: "命令记录",
+				});
+				const res = new Map()
+				this.list = this.list.filter((item) => !res.has(item.name) && res.set(item.name, 1))
+			} else {
+				this.list = this.list.filter(item => item.name !=='命令记录')
+			}
+			this.isScrollable = this.list.length > 4;
+			if (res.deviceProfileId) {
+				const getAttrList = await api.deviceApi.getAttribute(res.deviceProfileId)
+				if (Array.isArray(getAttrList)) {
+					this.attrList = getAttrList.map(m => {
+						return m.identifier
+					})
+				}
+			}
+			// 连接webSockte
+			const socketTask = uni.connectSocket({
+				url: `${base.socketPrefix}://${base.baseWebSocketUrl}/api/ws/plugins/telemetry?token=` + uni.getStorageSync("userInfo").isToken, //仅为示例，并非真实接口地址。
+				complete: () => {},
+			});
+			uni.onSocketOpen((header) => {
+				socketTask.send({
+					data: JSON.stringify({
+						attrSubCmds: [],
+						tsSubCmds: [{
+							entityType: "DEVICE",
+							entityId: tbDeviceId,
+							scope: "LATEST_TELEMETRY",
+							cmdId: 1,
+							keys: this.attrList.join(','),
+						}, ],
+						historyCmds: [],
+						entityDataCmds: [],
+						entityDataUnsubscribeCmds: [],
+						alarmDataCmds: [],
+						alarmDataUnsubscribeCmds: [],
+						entityCountCmds: [],
+						entityCountUnsubscribeCmds: [],
+					}),
+					success() {},
+				});
+			});
+			socketTask.onMessage((msg) => {
+				const { data } = JSON.parse(msg.data);
+				const newArray = [];
+				for (const key in data) {
+					const [time, value] = data[key].flat(1);
+					let obj = { key,time,value, };
+					if (this.recordList.length === 0) {
+						this.recordList.unshift(obj);
+					} else {
+						newArray.push(obj);
+					}
+				}
+				newArray.forEach((item) => {
+					let flag = false;
+					this.recordList.forEach((item1) => {
+						if (item1.key === item.key) {
+							item1.value = item.value;
+							item1.time = item.time;
+							flag = true;
+						}
+					});
+					if (!flag) {
+						this.recordList.unshift(item);
+					}
+				});
+				this.recordList = this.recordList.map((item) => {
+					return {
+						...item,
+						time: formatToDate(item.time, "YYYY-MM-DD HH:mm:ss"),
+					};
+				});
+			});
+			const keys = await getDeviceKeys(tbDeviceId);
+			this.keys = [keys];
+			// 昨天
+			this.yesterday = moment().subtract(1, "days").format("YYYY-MM-DD");
+			// 今天
+			this.today = moment().format("YYYY-MM-DD");
+			// 开始时间
+			this.startTs = moment().subtract(1, "days").format("x");
+			// 结束时间
+			this.endTs = moment().format("x");
+			this.entityId = tbDeviceId;
+			const data = await getHistoryData({
+				entityId: tbDeviceId,
+				startTs: this.startTs,
+				endTs: this.endTs,
+				keys: keys[0],
+				// interval: 1800000,
+				limit: 7,
+				agg: 'NONE'
+			});
+			this.timeDiff = "30分钟";
+			if (!Object.keys(data).length) return;
+			this.historyData = data[keys[0]].map((item) => {
+				return {
+					value: item.value,
+					ts: formatToDate(item.ts, "YYYY-MM-DD HH:mm:ss"),
+				};
+			});
+		},
+		methods: {
+			handleTabClick({
+				index
+			}) {
+				this.currentTab = index;
+			},
+			handleUpdate(data, e) {
+				if (!Array.isArray(data)) {
+					this.historyData = [];
+					return;
+				}
+				this.historyData = data.map((item) => {
+					return {
+						value: item.value,
+						ts: formatToDate(item.ts, "YYYY-MM-DD HH:mm:ss"),
+					};
+				});
+			},
+		},
+	};
+</script>
+
+<style lang="scss" scoped>
+	.device-detail-page {
+		height: 100vh;
+		background-color: #f8f9fa;
+	}
+</style>

+.command-detail {
+		padding: 5rpx 30rpx;
+		height: 100vh;
+		background-color: #f8f9fa;
+
+		.detail-top {
+			height: 118rpx;
+			width: 690rpx;
+			display: flex;
+			align-items: center;
+			background-color: #fff;
+			color: #333;
+			border-radius: 20rpx;
+			font-size: 15px;
+			margin-top: 30rpx;
+			padding: 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;
+				}
+			}
+		}
+
+		.command {
+			margin: 30rpx 0;
+		}
+	}

+.command-record {
+		padding: 0 30rpx;
+		background: #f8f9fa;
+
+		.filter-button {
+			font-size: 12px;
+			width: 160rpx;
+			height: 64rpx;
+			border-radius: 32rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			background: #f0f1f2;
+			color: #666;
+
+			image {
+				width: 28rpx;
+				height: 28rpx;
+				margin-left: 4rpx;
+			}
+		}
+	}
+
+	.list-item {
+		width: 690rpx;
+		background-color: #fff;
+		border-radius: 20rpx;
+		margin: 20rpx auto;
+		color: #333;
+
+		.item {
+			.delivered-color {
+				color: blue;
+			}
+
+			padding: 30rpx;
+
+			view {
+				font-size: 14px;
+				margin-bottom: 10rpx;
+			}
+
+			.time {
+				margin-top: 20rpx;
+				color: #999;
+			}
+
+			.item-first {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				font-size: 15px;
+				font-weight: 500;
+				align-items: center;
+
+				.item-right {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					width: 104rpx;
+					height: 36rpx;
+					font-size: 10px;
+					border-radius: 20rpx;
+				}
+
+				.item-fail {
+					color: #848383;
+					background-color: #84838325;
+				}
+
+				.item.success {
+					color: #00c9a7;
+					background-color: #00c9a725;
+				}
+			}
+		}
+	}
+
+	.filter {
+		padding: 0 30rpx;
+
+		.filter-title {
+			text-align: center;
+			margin-top: 14px;
+			font-size: 16px;
+			font-weight: 700;
+		}
+
+		.button-group {
+			display: flex;
+			margin-top: 40rpx;
+			justify-content: space-between;
+
+			view {
+				width: 330rpx;
+			}
+		}
+
+		.command-time-text {
+			color: #333;
+			font-size: 14px;
+			font-weight: 700;
+		}
+	}

+/* ==================
+模态窗口 采用colorsui的部分样式
+==================== */
+
 .cu-modal {
 .cu-modal {
 	position: fixed;
 	position: fixed;
 	top: 0;
 	top: 0;
@@ -18,7 +22,7 @@
 }
 }
 
 
 .cu-modal::before {
 .cu-modal::before {
-	content: "\200B";
+	content: '\200B';
 	display: inline-block;
 	display: inline-block;
 	height: 100%;
 	height: 100%;
 	vertical-align: middle;
 	vertical-align: middle;
@@ -89,8 +93,8 @@
 	transform: translateX(0%);
 	transform: translateX(0%);
 }
 }
 
 
-.cu-modal .cu-dialog>.cu-bar:first-child .action {
+.cu-modal .cu-dialog > .cu-bar:first-child .action {
 	min-width: 100rpx;
 	min-width: 100rpx;
 	margin-right: 0;
 	margin-right: 0;
 	min-height: 100rpx;
 	min-height: 100rpx;
-}
+}

-<template>
-	<view class="realtime-page">
-		<view class="item" v-for="(item, index) in recordList" :key="index">
-			<view class="item-top">
-				<view>{{ item.key }}</view>
-				<view class="item-value">{{ item.value }}</view>
-			</view>
-			<view class="item-time">{{ item.time }}</view>
-		</view>
-		<mescroll-empty v-if="!recordList.length" />
-	</view>
-</template>
-
-<script>
-export default {
-	props: {
-		recordList: {
-			type: Array,
-			default: () => []
-		}
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-.realtime-page {
-	.item {
-		margin: 30rpx;
-		padding: 30rpx;
-		border-radius: 20rpx;
-		background-color: #fff;
-		height: 160rpx;
-		width: 690rpx;
-		.item-top {
-			display: flex;
-			justify-content: space-between;
-			color: #333;
-			font-size: 16px;
-			font-family: PingFangSC-Medium, PingFang SC;
-			font-weight: bold;
-			.item-value {
-				font-weight: bold;
-			}
-		}
-		.item-time {
-			margin-top: 4rpx;
-			font-size: 13px;
-			color: #999;
-		}
-	}
-}
-</style>
+.realtime-page {
+	.item {
+		margin: 30rpx;
+		padding: 30rpx;
+		border-radius: 20rpx;
+		background-color: #fff;
+		height: 160rpx;
+		width: 690rpx;
+		.item-top {
+			display: flex;
+			justify-content: space-between;
+			color: #333;
+			font-size: 16px;
+			font-family: PingFangSC-Medium, PingFang SC;
+			font-weight: bold;
+			.item-value {
+				font-weight: bold;
+			}
+		}
+		.item-time {
+			margin-top: 4rpx;
+			font-size: 13px;
+			color: #999;
+		}
+	}
+}

-<template>
-	<!-- 单向没有响应失败状态 -->
-	<!-- 响应类型 -->
-	<view class="command-record">
-		<view class="filter-button" @click="openSearchDialog">
-			<text>筛选</text>
-			<image src="../../../static/shaixuan.png" />
-		</view>
-
-		<mescroll-uni ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback"
-			height="700px">
-			<view @click="openCommandDetail(item)" class="list-item" v-for="(item, index) in list" :key="index">
-				<view class="item">
-					<view class="item-first">
-						<text>{{ item.deviceName }}</text>
-						<view v-if="!item.request.oneway">
-							<view class="item-right item-success" v-if="item.response">响应成功</view>
-							<view class="item-right item-fail" v-else>响应失败</view>
-						</view>
-					</view>
-					<view>
-						命令类型:
-						<text style="margin-left: 16rpx;">{{ item.additionalInfo.cmdType===1?'服务':'自定义' }}</text>
-					</view>
-					<view v-if="item.statusName">
-						命令状态:
-						<text :style="{
-								color:
-									item.status == 'EXPIRED'
-										? 'red'
-										: item.status == 'DELIVERED'
-										? 'blue'
-										: item.status == 'QUEUED'
-										? '#00C9A7'
-										: item.status == 'TIMEOUT'
-										? 'red'
-										: item.status == 'SENT'
-										? '#00C9A7'
-										: ''
-							}" style="margin-left: 16rpx;">
-							{{ item.statusName }}
-						</text>
-					</view>
-					<view class="item-first">
-						<view>
-							响应类型:
-							<text style="margin-left: 16rpx;">{{ !item.request.oneway?'双向':'单向' }}</text>
-						</view>
-						<view class="time">{{ format(item.createTime) }}</view>
-					</view>
-				</view>
-			</view>
-		</mescroll-uni>
-		<!-- 告警筛选 -->
-		<u-popup @close="close" closeable bgColor="#fff" :show="show" mode="bottom" :round="20"
-			@touchmove.stop.prevent="disabledScroll">
-			<view class="filter" @touchmove.stop.prevent="disabledScroll">
-				<view class="filter-title"><text>筛选条件</text></view>
-				<FilterItem :filterList="issueStatus" title="下发状态"
-					@clickTag="currentIndex => handleClickTag(currentIndex, issueStatus)"></FilterItem>
-				<view class="button-group">
-					<view>
-						<u-button :customStyle="{ color: '#333' }" color="#e3e3e5" shape="circle" text="重置"
-							@click="resetFilter"></u-button>
-					</view>
-					<view>
-						<u-button color="#3388ff" shape="circle" text="确认" @click="confirmFilter"></u-button>
-					</view>
-				</view>
-			</view>
-		</u-popup>
-		<u-calendar :show="showCalendar" mode="range" @confirm="calendarConfirm" @close="calendarClose" startText="开始时间"
-			endText="结束时间" confirmDisabledText="请选择日期" :formatter="formatter"></u-calendar>
-	</view>
-</template>
-<script>
-	import FilterItem from '@/pages/device/FilterItem.vue';
-	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
-	import {
-		formatToDate
-	} from '@/plugins/utils.js';
-	import {
-		debounce
-	} from '@/plugins/throttle.js';
-	export default {
-		mixins: [MescrollMixin],
-		components: {
-			FilterItem
-		},
-		props: {
-			tbDeviceId: {
-				type: String,
-				default: ''
-			}
-		},
-		data() {
-			return {
-				show: false,
-				list: [],
-				total: '',
-				timeData: {
-					selectTime: '',
-					getTimeGap: ''
-				},
-				showCalendar: false,
-				issueStatus: [{
-						checked: true,
-						name: '全部',
-						type: ''
-					},
-					{
-						checked: false,
-						name: '响应成功',
-						type: 'SUCCESSFUL'
-					},
-					{
-						checked: false,
-						name: '发送成功',
-						type: 'DELIVERED'
-					},
-					{
-						checked: false,
-						name: '已过期',
-						type: 'EXPIRED'
-					},
-					{
-						checked: false,
-						name: '响应失败',
-						type: 'FAILED'
-					}
-				],
-				downOption: {
-					auto: false //是否在初始化后,自动执行downCallback; 默认true
-				},
-				page: {
-					num: 0,
-					size: 10
-				}
-			};
-		},
-		methods: {
-			/*下拉刷新的回调 */
-			downCallback() {
-				//联网加载数据
-				this.list = [];
-				this.page.num = 1;
-				this.loadData(this.page.num, {
-					tbDeviceId: this.tbDeviceId
-				});
-			},
-			format(date) {
-				return formatToDate(date, 'YYYY-MM-DD HH:mm:ss');
-			},
-			disabledScroll() {
-				return;
-			},
-			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
-			upCallback() {
-				//联网加载数据
-				this.page.num += 1;
-				this.loadData(this.page.num, {
-					tbDeviceId: this.tbDeviceId
-				});
-			},
-			//获取告警数据
-			loadData(pageNo, params = {}) {
-				let httpData = {
-					...params,
-					page: pageNo,
-					pageSize: 10
-				};
-				uni.$u.http
-					.get('/yt/rpc', {
-						params: httpData,
-						custom: {
-							load: false
-						}
-					})
-					.then(res => {
-						this.total = res.total;
-						uni.stopPullDownRefresh();
-						//方法一(推荐): 后台接口有返回列表的总页数 totalPage
-						this.mescroll.endByPage(res.items.length, res.total); //必传参数(当前页的数据个数, 总页数)
-						if (pageNo == 1) {
-							this.list = res.items;
-						} else {
-							this.list = this.list.concat(res.items);
-						}
-					})
-					.catch(() => {
-						//联网失败, 结束加载
-						this.mescroll.endErr();
-					});
-			},
-			handleClickTag(currentIndex, list) {
-				list.map((item, index) => {
-					item.checked = index === currentIndex;
-				});
-			},
-			resetFilter() {
-				const {
-					issueStatus
-				} = this;
-				issueStatus.forEach(item => item.map((item, index) => (item.checked = index === 0)));
-			},
-			close() {
-				this.show = false;
-			},
-			openSearchDialog() {
-				this.show = true;
-			},
-			hideKeyboard() {
-				uni.hideKeyboard();
-			},
-			calendarConfirm(e) {
-				this.showCalendar = false;
-				this.timeData.selectTime = `${e[0]} / ${e[e.length - 1]}`;
-			},
-			confirmFilter() {
-				const issueStatus = this.issueStatus.find(item => item.checked);
-				this.loadData(1, {
-					status: issueStatus.type ? issueStatus.type : undefined,
-					tbDeviceId: this.tbDeviceId
-				});
-				this.show = false;
-			},
-			calendarClose() {
-				this.showCalendar = false;
-			},
-			openCommandDetail(item) {
-				uni.navigateTo({
-					url: '/deviceSubPage/deviceDetailPage/tabDetail/CommandDetail?data=' + JSON.stringify(item)
-				});
-			}
-		}
-	};
-</script>
-
-<style lang="scss" scoped>
-	.command-record {
-		padding: 0 30rpx;
-		background: #f8f9fa;
-
-		.filter-button {
-			font-size: 12px;
-			width: 160rpx;
-			height: 64rpx;
-			border-radius: 32rpx;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			background: #f0f1f2;
-			color: #666;
-
-			image {
-				width: 28rpx;
-				height: 28rpx;
-				margin-left: 4rpx;
-			}
-		}
-	}
-
-	.list-item {
-		width: 690rpx;
-		background-color: #fff;
-		border-radius: 20rpx;
-		margin: 20rpx auto;
-		color: #333;
-
-		.item {
-			.delivered-color {
-				color: blue;
-			}
-
-			padding: 30rpx;
-
-			view {
-				font-size: 14px;
-				margin-bottom: 10rpx;
-			}
-
-			.time {
-				margin-top: 20rpx;
-				color: #999;
-			}
-
-			.item-first {
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-				font-size: 15px;
-				font-weight: 500;
-				align-items: center;
-
-				.item-right {
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					width: 104rpx;
-					height: 36rpx;
-					font-size: 10px;
-					border-radius: 20rpx;
-				}
-
-				.item-fail {
-					color: #848383;
-					background-color: #84838325;
-				}
-
-				.item.success {
-					color: #00c9a7;
-					background-color: #00c9a725;
-				}
-			}
-		}
-	}
-
-	.filter {
-		padding: 0 30rpx;
-
-		.filter-title {
-			text-align: center;
-			margin-top: 14px;
-			font-size: 16px;
-			font-weight: 700;
-		}
-
-		.button-group {
-			display: flex;
-			margin-top: 40rpx;
-			justify-content: space-between;
-
-			view {
-				width: 330rpx;
-			}
-		}
-	}
-</style>