realty/virgo.wzfrontend/console/src/components/work/common/testAlarm.vue

<template>
	<div class="hui-test-alarm">
		<div class="test-box">
			<div class="test-item">
				<div class="test-icon">
					<i class="iconfont huifont-yunhang"></i>
				</div>
				<div class="test-label">
					<div class="test-name">设备总数</div>
					<div class="test-value alibaba">{{testCount.totalNumber}}</div>
				</div>
			</div>
			<div class="test-item">
				<div class="test-icon green">
					<i class="iconfont huifont-shebei"></i>
				</div>
				<div class="test-label">
					<div class="test-name">运行设备</div>
					<div class="test-value alibaba">{{testCount.online}}</div>
				</div>
			</div>
			<div class="test-item">
				<div class="test-icon gray">
					<i class="iconfont huifont-lixian"></i>
				</div>
				<div class="test-label">
					<div class="test-name">离线设备</div>
					<div class="test-value alibaba">{{testCount.offline}}</div>
				</div>
			</div>
		</div>
		<div class="alarm-table-box hui-flex">
			<div class="alarm-title">
				<div class="hui-chart-title">
					设备报警
				</div>
				<div class="alarm-tr">
					<span class="tr-100">设备名称</span>
					<span class="tr-flex">报警信息</span>
					<span class="tr-130">报警时间</span>
					<span class="tr-50">状态</span>
				</div>
			</div>
			<div class="hui-flex-box hui-no-tips" v-if="list.length === 0">
				<empty width="100" description="暂无报警记录"></empty>
			</div>
			<div class="alarm-table hui-flex-box" v-else>
				<div class="alarm-tr" v-for="(item,index) in list" :key="index">
					<span class="tr-100 hui-ellipsis">{{item.deviceName}}</span>
					<span class="tr-flex hui-ellipsis">{{item.info}}</span>
					<span class="tr-130">{{item.date}}</span>
					<span class="tr-50 tr-center">
						<span class="color-red" v-if="!item.state">报警中</span>
						<span class="color-blue" v-else-if="item.state === 1">处理中</span>
						<span class="color-green" v-else-if="item.state === 2">已处理</span>
					</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getDeviceCountList,
		getDeviceAlarmList
	} from '@/httpApi/test'
	export default {
		props: ['type'],
		data() {
			return {
				testCount: {
					totalNumber: 0,
					online: 0,
					offline: 0
				},
				list: []
			}
		},
		created() {
			this.init();
		},
		methods: {
			init(option) {
				let postData = {
					type: this.type, //1-周界报警设备 2-周界报警 3.电子巡查设备
					projectId: this.$store.getters.project.id
				}
				if (option) postData = Object.assign(postData, option);
				getDeviceCountList(postData).then(res => {
					if (res.state) {
						this.testCount = res.data[0] ? res.data[0] : {
							totalNumber: 0,
							online: 0,
							offline: 0
						}
					}
				})
				getDeviceAlarmList(postData).then(res => {
					if (res.state) {
						this.list = res.data;
					}
				})
			}
		}
	}
</script>

<style lang="scss">

</style>