realty/virgo.wzfrontend/console/src/views/work/iot/security/infrared.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="infrared box-background">
				<div class="infrared-box">
					<div class="infrared-center">
						<test-alarm ref="testAlarm" :type="1"></test-alarm>
						<div class="bim-box">
							<model type="infrared" fileId="10000754876737"></model>
						</div>
					</div>
					<div class="infrared-right">
						<div class="infrared-chart hui-flex">
							<div class="hui-chart-title">
								统计分析
							</div>
							<div ref="chart1" class="hui-flex-box"></div>
						</div>
						<div class="infrared-list">
							<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-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-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>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import projectItemTree from '@/components/common/projectItemTree'
	import testAlarm from '@/components/work/common/testAlarm'
	import model from '@/components/work/common/model'
	import {
		getDeviceAlarmList
	} from '@/httpApi/test'
	export default {
		data() {
			return {
				list: [],
				type: 2
			}
		},
		created() {
			this.init();
		},
		components: {
			testAlarm,
			projectItemTree,
			model
		},
		methods: {
			init(option) {
				let postData = {
					type: this.type, //1-周界报警
					projectId: this.$store.getters.project.id
				}
				if (option) postData = Object.assign(postData, option);
				getDeviceAlarmList(postData).then(res => {
					if (res.state) {
						this.list = res.data;
						let obj = {},
							list = [];
						for (let i = 0; i < this.list.length; i++) {
							if (!obj[this.list[i].deviceId]) {
								obj[this.list[i].deviceId] = 1;
								list.push({
									id: this.list[i].deviceId,
									name: this.list[i].deviceName,
									value: 0,
								})
							}
							list.find(node => node.id == this.list[i].deviceId).value++;
						}
						this.$nextTick(() => {
							this.chart(this.$refs.chart1, list.map(node => node.value), list.map(node =>
								node.name))
						})
					}
				})
			},
			treeclick(item) {
				let obj = item.id ? {
					projectItemTargetId: item.id
				} : {}
				if (this.$refs.testAlarm) this.$refs.testAlarm.init(obj);
				this.init(option);
			},
			chart(elem, data, x) {
				let chart = echarts.init(elem);
				let option = {
					tooltip: {
						show: true,
						trigger: 'axis',
						formatter: function() {
							return ''
						},
						backgroundColor: 'rgba(255,255,255,0)',
						borderWidth: 0,
						padding: 0,
						axisPointer: {
							lineStyle: {
								type: 'solid',
								color: '#4E5561',
							}
						}
					},
					grid: {
						left: '15',
						top: '25',
						right: '15',
						bottom: '5',
						containLabel: true
					},
					color: ['#1978E5'],
					xAxis: {
						type: 'category',
						data: x,
						axisLabel: {
							margin: 4,
							color: '#D0DEEE',
							fontSize: 10
						},
						boundaryGap: false,
						axisLine: {
							lineStyle: {
								color: '#6C8097'
							}
						},
						axisTick: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							margin: 10,
							color: '#D0DEEE',
							fontSize: 10
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: 'rgba(108,128,151,0.3)',
								type: 'dashed'
							}
						}
					},
					series: [{
						data: data,
						type: 'line',
						symbolSize: 6,
						areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(0,150,255,0.15)'
								},
								{
									offset: 1,
									color: 'rgba(0,150,255,0)'
								}
							])
						},
						z: 99
					}, {
						data: data,
						type: 'line',
						showSymbol: false,
						label: {
							show: true,
							color: '#D0DEEE'
						},
						areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(0,150,255,0.15)'
								},
								{
									offset: 1,
									color: 'rgba(0,150,255,0)'
								}
							])
						},
						z: 99
					}]
				};
				chart.setOption(option);
			},
		},
	}
</script>

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

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

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

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

		.infrared-chart {
			height: 306px;
			background: rgba(0, 4, 10, 0.3);
			padding: 20px;
		}

		.infrared-list {
			margin-top: 12px;
			background: rgba(0, 4, 10, 0.3);
			flex: 1;
			height: 0;
		}
	}
</style>