realty/virgo.wzfrontend/console/src/views/work/iot/security/electronicPatrol.vue

<template>
	<div class="yui-tree-box">
		<project-item-tree @treeclick="treeclick" iconfontClass="el-icon-place"></project-item-tree>
		<div class="hui-tree-content">
			<div class="electronic-patrol box-background">
				<div class="electronic-patrol-box">
					<div class="electronic-patrol-center">
						<test-alarm ref="testAlarm" :type="3"></test-alarm>
						<div class="bim-box">
							<model type="electronicPatrol" fileId="10000892771892"></model>
						</div>
					</div>
					<div class="electronic-patrol-right">
						<div class="electronic-patrol-record alarm-table-box hui-flex">
							<div class="alarm-title">
								<div class="hui-chart-title">
									打卡事件
								</div>
								<div class="alarm-tr">
									<span class="tr-flex">路径名称</span>
									<span class="tr-flex tr-center">点位数量</span>
									<span class="tr-flex tr-center">今日打卡</span>
									<span class="tr-flex tr-center">累计打卡</span>
								</div>
							</div>
							<div class="hui-flex-box hui-no-tips" v-if="routeEventList.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 routeEventList" :key="index"
									@click="look(item)">
									<span class="tr-flex">{{item.routeName}}</span>
									<span class="tr-flex tr-center color-purple alibaba">{{item.pointNumber}}</span>
									<span class="tr-flex tr-center color-green alibaba">{{item.checkTodayNumber}}</span>
									<span class="tr-flex tr-center color-blue alibaba">{{item.accumulateNumber}}</span>
								</div>
							</div>
						</div>
						<div class="electronic-patrol-record 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-50 tr-center">巡更人</span>
								</div>
							</div>
							<div class="hui-flex-box hui-no-tips" v-if="electronicPatrolList.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 electronicPatrolList" :key="index">
									<span class="tr-100">{{item.name}}</span>
									<span class="tr-flex">{{item.date}}</span>
									<span class="tr-50 tr-center">{{item.userName}}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<el-drawer title="打卡详情" :visible.sync="drawer" :size="400" :append-to-body="true">
			<electronic-patrol-detail v-if="drawer" :detail="detail"></electronic-patrol-detail>
		</el-drawer>
	</div>
</template>

<script>
	import projectItemTree from '@/components/common/projectItemTree'
	import electronicPatrolDetail from '@/components/work/iot/security/electronicPatrolDetail'
	import model from '@/components/work/common/model'
	import testAlarm from '@/components/work/common/testAlarm'
	import {
		getElectronicPatrolList,
		getElectronicPatrolRoutesList,
		getElectronicPatrolEventList,
		getElectronicPatrolEventTest
	} from '@/httpApi/test'
	export default {
		data() {
			return {
				drawer: false,
				electronicPatrolList: [],
				routeEventProjectList: [],
				routeEventList: [],
				detail: {}
			}
		},
		created() {
			getElectronicPatrolEventTest(this.$store.getters.project.id).then(res => {
				if (res.state) {
					this.routeEventProjectList = res.data;
					this.init();
				}
			})
		},
		methods: {
			init(option) {
				let postData = {
					projectId: this.$store.getters.project.id
				}
				if (option) postData = Object.assign(postData, option);
				getElectronicPatrolList(postData).then(res => {
					if (res.state) {
						this.electronicPatrolList = res.data;
					}
				})
				getElectronicPatrolEventList(postData).then(res => {
					if (res.state) {
						this.routeEventList = this.routeEventProjectList.filter(node => res.data.filter(item =>
							item.routeName === node.name).length > 0).map(node => {
							let data = res.data.filter(item => item.routeName === node.name)[0];
							return Object.assign(node, data);
						});
					}
				})
			},
			treeclick(item) {
				let obj = item.id ? {
					projectItemTargetId: item.id
				} : {}
				if (this.$refs.testAlarm) this.$refs.testAlarm.init(obj);
				this.init(obj);
			},
			look(item) {
				this.detail = item;
				this.drawer = true;
			}
		},
		components: {
			electronicPatrolDetail,
			projectItemTree,
			model,
			testAlarm
		}
	}
</script>

<style lang="scss">
	.electronic-patrol {
		width: 100%;
		height: 100%;
		padding: 20px;
		overflow: auto;

		.electronic-patrol-box {
			width: 100%;
			height: 100%;
			min-width: 1100px;
			min-height: 699px;
			display: flex;
		}

		.electronic-patrol-center {
			flex: 1;
			width: 0;
			height: 100%;
			display: flex;
			flex-direction: column;
		}

		.electronic-patrol-right {
			height: 100%;
			width: 350px;
			margin-left: 12px;
			display: flex;
			flex-direction: column;

			.electronic-patrol-record {
				flex: 1;
				height: 0;
				background: rgba(0, 4, 10, 0.3);
				width: 100%;
				margin-bottom: 12px;
			}

			.electronic-patrol-record:last-child {
				margin-bottom: 0;
			}
		}
	}
</style>