realty/virgo.wzfrontend/yui_wx/pages/deviceList/deviceList.vue

<template>
	<view class="device-list-index">
		<project-drop-down @change="change"></project-drop-down>
		<view class="device-list">
			<view class="device-item-box" v-for="(item,index) in deviceList" :key="index" @click="clickDevice(item)">
				<view class="item-box">
					<view class="item-icon">
						<uni-icons :type="item.iconName" custom-prefix="iconfont" :size="item.iconSize" color="#c3c3c3">
						</uni-icons>
					</view>
					<view class="operation-icon" @tap="clickOpen(item)"
						v-if="item.state === 1 && (item.type === 'aircondition' || item.type === 'lighting')">
						<uni-icons type="icon-caozuo-kaiguan" custom-prefix="iconfont" size="30"
							:color="!item.isOpen?'#c3c3c3':'#08979c'">
						</uni-icons>
					</view>
					<view class="item-label">{{item.name}}</view>
					<view class="item-sub-label">
						<view class="label">{{item.positionName}}</view>
						<view class="line"></view>
						<view class="label" v-if="item.state === 1">{{item.isOpen ? item.describe : '在线'}}</view>
						<view class="label" v-else>离线</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import projectDropDown from '@/components/common/projectDropDown.vue'
	import deviceList from '@/uitls/deviceList';
	export default {
		data() {
			return {
				deviceList: []
			}
		},
		onShow() {
			this.deviceList = deviceList;
		},
		methods: {
			clickOpen(item) {
				item.isOpen = !item.isOpen;
			},
			change(e) {
				if (e.name === 'room') {
					if (e.value === 'all') return this.deviceList = deviceList;
					this.deviceList = deviceList.filter(node => node.positionName === e.label);
				}
				console.log(e);
			},
			clickDevice(item) {
				this.$navigateTo(
					`/pages/deviceDetail/deviceDetail?id=${item.id}&name=${item.name}&type=${item.type}&space=${item.positionName}`
				);
			}
		},
		components: {
			projectDropDown
		},
	}
</script>

<style lang="scss"></style>