jp-xpgj-GA-file/src/projects/business/views/Common/Device/List.vue

<template>
	<div>

		<common @asynCallBack="asynCallBack"></common>
		<top-header :pageTitle="pageTitle"></top-header>

		<div class="mui-content">
			<div class="mui-content-padded">
				<h5>
					设备列表
					<span class='mui-pull-right'>
						<span class="color55f868">在线</span> {{onNum}} 台 / <span class="colorfe616c">离线</span> {{offNum}} 台
					</span>
				</h5>

			</div>

			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" v-for="(device,index) in devices">
					<a>
						<div class="mui-media-body flew-sp">
							{{index+1}}.{{device.aliasName}}
							<h4 class='flew-items'>
								<span class="vongi-sbzt-yuan " :class="device.isOnline?'yuan-green':'yuan-red'"></span>
								{{device.isOnline?'在线':'离线'}}
							</h4>
						</div>
					</a>
				</li>

			</ul>

		</div>
		<loading :visible="isLoading"></loading>

	</div>
</template>


<script>
	import * as API_Device from '@/apis/Common/device'

	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'

	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		name: 'CommonDeviceList',
		components: {
			Common,
			Loading,
			TopHeader
		},
		data() {
			return {
				pageTitle: '设备列表',
				devices: [],
				isLoading: false,
				onNum: 0,
				offNum: 0,
			}
		},
		created() {
			this.pageTitle = this.person_data.companyName;
		},
		methods: {
			//获取列表
			getList() {
				API_Device.listOfDevice({
					pageIndex: 1,
					pageSize: 500,
					schoolId: this.person_data.companyId
				}).then(data => {
					this.devices = data.data;
					for (var i in data.data) {
						if (data.data[i].isOnline) {
							this.onNum++;
						} else {
							this.offNum++;
						}
					}
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			asynCallBack() {

			},
		},
		mounted() {
			//获取列表
			this.getList();
		},
		destroyed() {},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
			})
		}
	}
</script>

<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style>
</style>