sis_zhfx/src/views/WindSite/components/boosterstation/publictest.vue

<template>
<div>
	<div class="d-tt">公用测控分画面</div>
	<div class="d-subtt">主画面</div>
	<div class="d-pn">
		<table class="d-pn-tb">
			<tr v-for="item in dotArr" :key="item.id">
				<td width="50%">{{ item.name }}</td>
				<td width="25%">{{ item.num }}</td>
				<td width="25%">{{ item.unit }}</td>
			</tr>
		</table>
		<div class="d-pn-ul">
			<div class="d-pn-ul-li" :data-active="item.status===true" v-for="(item,index) in dataArr" :key="index">{{ item.name }}</div>
		</div>
	</div>
</div>
</template>
<script>
export default {
	data(){
		return {
			dataArr: [
				{
					name: '公用测控 站控制交换机失电'
				},
				{
					name: '公用测控 直流屏充电模块异常'
				},
				{
					name: '公用测控 直流屏绝缘异常'
				},
				{
					name: '公用测控 直流屏交直流串入异常'
				},
				{
					name: '公用测控 upsL3交流输出'
				},
				{
					name: '公用测控 upsL4直流故障'
				},
				{
					name: '公用测控 upsL5输出过载'
				},
				{
					name: '公用测控 1U保护装置保护跳闸'
				},
				{
					name: '公用测控 1U保护装置保护合闸'
				},
				{
					name: '公用测控 7U保护装置保护动作'
				},
				{
					name: '公用测控 7U保护装置异常告警'
				},
				{
					name: '公用测控 防孤岛装置故障'
				},
				{
					name: '公用测控 母差装置故障告警（闭锁）'
				},
				{
					name: '公用测控 母差装置运行异常（告警）'
				},
				{
					name: '公用测控 母差装置CT/PT断线告警'
				},
				{
					name: '公用测控 电能质量失电报警'
				},
				{
					name: '公用测控 小电流接地选线装置动作'
				},
				{
					name: '公用测控 AGC/AVC控制系统装置异常'
				}
			],
			dotArr: [
				{
					name: 'Ua:',
					num: 0,
					unit: 'V'
				},
				{
					name: 'Ub:',
					num: 0,
					unit: 'V'
				},
				{
					name: 'Uc:',
					num: 0,
					unit: 'V'
				},
				{
					name: 'Uab:',
					num: 0,
					unit: 'V'
				},
				{
					name: 'Ubc:',
					num: 0,
					unit: 'V'
				},
				{
					name: 'Uca:',
					num: 0,
					unit: 'V'
				},
				{
					name: 'Fri:',
					num: 0,
					unit: 'Hz'
				},
				{
					name: 'COS:',
					num: 0,
					unit: ''
				},
			]
		}
	},
	props:{
		datas: {
			type: Object,
			default: () => {}
		}
	},
	watch: {
		datas(val){
			this.funSetDot(val)
		}
	},
	methods: {
		funSetDot(obj){
			this.dotArr[0].num = obj.akua1
			this.dotArr[1].num = obj.akub1
			this.dotArr[2].num = obj.akuc1
			this.dotArr[3].num = obj.aku1ab
			this.dotArr[4].num = obj.aku1bc
			this.dotArr[5].num = obj.aku1ca
			this.dotArr[6].num = obj.akfr1
			this.dotArr[7].num = obj.akcos1

			this.dataArr[0].status = obj.akdi007
			this.dataArr[1].status = obj.akdi008
			this.dataArr[2].status = obj.akdi009
			this.dataArr[3].status = obj.akdi013
			this.dataArr[4].status = obj.akdi016
			this.dataArr[5].status = obj.akdi017
			this.dataArr[6].status = obj.akdi018
			this.dataArr[7].status = obj.akdi023
			this.dataArr[8].status = obj.akdi024
			this.dataArr[9].status = obj.akdi026
			this.dataArr[10].status = obj.akdi027
			this.dataArr[11].status = obj.akdi030
			this.dataArr[12].status = obj.akdi039
			this.dataArr[13].status = obj.akdi040
			this.dataArr[14].status = obj.akdi042
			this.dataArr[15].status = obj.akdi047
			this.dataArr[16].status = obj.akdi048
			this.dataArr[17].status = obj.akdi049
		}
	},
	created(){
		this.funSetDot(this.datas)
	}
}
</script>
<style lang="less" scoped>
.d-tt{
	font-size: 24px;
	color: white;
	height: 30px;
	line-height: 30px;
	text-align: center;
}
.d-subtt{
	font-size: 20px;
	color: white;
	height: 24px;
	line-height: 24px;
	padding-left: 10px;
}
.d-pn{
	width: 100%;
	margin-top: 10px;
	display: flex;
	justify-content: space-between;
	border: 2px solid rgba(255,255,255,0.6);
	height: 600px;
	.d-pn-tb{
		width: 40%;
		margin-top: 10px;
		margin-bottom: 20px;
		margin-right: 20px;
		margin-left: 20px;
		border: 1px solid rgba(255,255,255,0.6);
		border-collapse: collapse;
		td{
			border: 1px solid rgba(255,255,255,0.6);
			text-align: right;
			padding-right: 10px;
			height: 36px;
			color: rgba(255,255,255,0.75);
			font-size: 16px;
			font-weight: bold;
			&:last-child{
				text-align: center;
			}
			&:nth-child(2){
				color: rgb(41, 238, 14);
			}
		}
	}
	.d-pn-ul{
		width: 70%;
		padding: 20px 30px 0 20px;
		border-left: 2px solid rgba(255,255,255,0.6);
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		align-content: flex-start;
		overflow-y: auto;
		overflow-x: hidden;
		.d-pn-ul-li{
			width: 44%;
			height: 40px;
			// line-height: 40px;
			margin-bottom: 20px;
			background-image: linear-gradient(to bottom, rgb(145, 145, 240),rgb(245, 245, 245),rgb(145, 145, 233));
			color: rgb(0, 0, 179);
			font-size: 16px;
			text-align: center;
			border-radius: 6px;
			margin-right: 10px;
			display: flex;
			font-size: 14px;
			align-items: center;
			justify-content: center;
			&[data-active='true']{
				background-image: linear-gradient(to bottom, red,rgb(243, 136, 128),red);
				color: rgb(255, 196, 0);
			}
		}
	}
}
</style>