JuHua-app/pagesA/home/device/status/modbus.vue

<template>
	<view>
		<u-swipe-action>
			<u-swipe-action-item :options="swipeOptions" v-for="(item, i) in deviceInfo.subDeviceList" :key="i"
				@click="handleEditClick(item)">
				<view class="modbus-wrap u-border-top u-border-bottom"
					@click="gotoDeviceDetail(deviceInfo.deviceId, item.slaveId, item.deviceId)">
					<view class="modbus-content">
						<u-cell>
							<view slot="title" class="u-slot-title">
								<text class="cell-title">{{item.deviceName}}</text>
								<view class="cell-ver">
									<u-tag borderColor="transparent" :text="`ver ${item.firmwareVersion}`" plain
										size="mini" type="warning">
									</u-tag>
								</view>
							</view>
							<view class="cell-val" slot="value">
								<u--text :type="item.statusInfo.type" :text="item.statusInfo.name"></u--text>
							</view>
							<view class="cell-label" slot="label">{{item.serialNumber}}</view>
						</u-cell>
					</view>
				</view>
			</u-swipe-action-item>
		</u-swipe-action>

		<!-- 设备通道 -->
		<view class="card"v-if="isShowChannel==true">
			<view style="padding:10px;" >
				<u--text prefixIcon="grid-fill" iconStyle="font-size: 16px; color: #606266; margin-right: 5px;"
					text="视频监控" bold color="#606266"></u--text>
			</view>
			<view class="channel_wrap">
				<view class="item_body" v-for="(item, i) in channelList" :key="i"
					@click="gotoDevicePlayer(item.deviceSipId, item.channelId, item.status)">
					<view class="img">
						<u-icon name="play-circle" color="#2979ff" size="28"></u-icon>
					</view>
					<view>
						<u--text lines="2" lineHeight="24" size="16" :text="item.channelName"></u--text>
						<view style="display:flex;margin-top:6px;">
							<view style="margin-right:20px;">
								<u--text prefixIcon="info-circle"
									iconStyle="color:#606266;font-size:14px;margin-right:3px;" size="12" color="#606266"
									mode="name" :text="item.model"></u--text>
							</view>
						</view>
						<view class="status">
							<u-tag v-if="item.statusInfo" :type="item.statusInfo.type" :plain="true" size="mini"
								:text="item.statusInfo.name"></u-tag>
						</view>
					</view>
				</view>
			</view>
			<!-- <view style="padding:10px;">
				<u-empty mode="list" :show="isShowChannel==false" marginTop="30"></u-empty>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		getDeviceStatusInfo
	} from '@/helpers/common.js'
	import {
		listChannel,
	} from '@/apis/modules/sip';
	import {
		getSipStatusInfo,
		getLocationWayInfo
	} from '@/helpers/common.js'
	import {
		relateChannelList
	} from '@/apis/modules/device.js';
	export default {
		name: 'modbus-status',
		props: {
			device: {
				type: Object,
				default: null,
				required: true
			}
		},
		watch: {
			// 兼容小程序
			device: function(newVal, oldVal) {
				this.deviceInfo = newVal;
				this.deviceInfo.subDeviceList = this.formatSubDeviceList(newVal.subDeviceList);
				if (this.deviceInfo.sipRelationList && this.deviceInfo.sipRelationList.length > 0) {
					this.getRelateChannelList();
					this.isShowChannel = true;
				}
			}
		},
		data() {
			return {
				// swipe选项配置
				swipeOptions: [{
					text: this.$tt('common.edit'),
					style: {
						backgroundColor: '#3c9cff'
					}
				}],
				//通道列表
				channelList: [],
				// 设备通道
				channelLoadStatus: 'nomore',
				queryParams: {
					deviceSipId: '', //设备sipid
				},
				isShowChannel: false,
				// 设备数据
				deviceInfo: {
					subDeviceList: [],
				}
			};
		},
		created() {
			// 获取设备状态(兼容H5和APP)
			if (this.device.subDeviceList) {
				this.deviceInfo = this.device;
				this.deviceInfo.subDeviceList = this.formatSubDeviceList(this.device.subDeviceList);
			}
		},
		methods: {
			// 获取子设备状态信息
			formatSubDeviceList(data) {
				if (data && data.length !== 0) {
					return data.map(item => {
						item.statusInfo = getDeviceStatusInfo(item.status);
						return item;
					})
				}
			},
			// 跳转详情
			gotoDeviceDetail(deviceId, slaveId, subDeviceId) {
				uni.navigateTo({
					url: `/pagesB/home/device/status/modbus/index?deviceId=${deviceId}&slaveId=${slaveId}&subDeviceId=${subDeviceId}`
				});
			},
			// 设备通道
			getRelateChannelList() {
				return new Promise((resolve, reject) => {
					relateChannelList(this.deviceInfo.deviceId).then(response => {
						this.channelList = response.data;
						response.data.map(item => {
							item.statusInfo = getSipStatusInfo(item.status);
							return item;
						})
						resolve(response.data);
					}).catch(error => {
						reject(error);
					});
				});
			},
			gotoDevicePlayer(deviceSipId, channelSipId, status) {
				let statusInfo = getSipStatusInfo(status)
				if (status !== 3) {
					uni.showToast({
						icon: 'none',
						title: `无法查看${getSipStatusInfo(status).name}数据`
					});
					return;
				}
				// #ifdef H5
				uni.$u.route('/pages_player/list/devicePlayer', {
					deviceId: deviceSipId,
					channelSipId: channelSipId,
				});
				//#endif
				// #ifdef APP-PLUS
				uni.$u.route('/pages_player/list/devicePlayerApp', {
					deviceId: deviceSipId,
					channelSipId: channelSipId,
				});
				//#endif
				// #ifdef MP-WEIXIN
				uni.showToast({
					icon: 'none',
					title: this.$tt('timing.nosupported')
				});
				//#endif
			},
			// 编辑子设备
			handleEditClick(item) {
				uni.navigateTo({
					url: `/pagesB/home/device/status/modbus/edit?item=${encodeURIComponent(JSON.stringify(item))}`
				});
			}
		}
	}
</script>

<style lang="scss">
	.modbus-wrap {
		.modbus-content {

			.cell-title {
				font-size: 16px;
			}

			.cell-ver {
				display: inline-block;
				margin-left: 5px;
			}

			.cell-label {
				margin-top: 5px;
				font-size: 12px;
				color: #909193;
				line-height: 18px;
			}

			.cell-val {
				text-align: right;
				font-size: 14px;
				line-height: 24px;
				color: #606266;
			}
		}
	}

	.channel_wrap {
		padding: 6px 0;

		.item_body {
			position: relative;
			display: flex;
			align-items: center;
			margin-bottom: 6px;
			background: #fff;

			.img {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-radius: 5px;
				width: 90px;
				height: 60px;
				background: #e5e5e5;
				margin: 10px;
			}

			.status {
				position: absolute;
				right: 13px;
				top: 13px;
			}
		}
	}
</style>