sis_zhfx/src/views/WindSite/components/boosterstation/directScreen.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: '直流屏 一组交流1路缺相'
				},
				{
					name: '直流屏 一组交流1路失电'
				},
				{
					name: '直流屏 一组交流2路缺相'
				},
				{
					name: '直流屏 一组交流2路失电'
				},
				{
					name: '直流屏 一组交流2路投入'
				},
				{
					name: '直流屏 控母1过压'
				},
				{
					name: '直流屏 控母1欠压'
				},
				{
					name: '直流屏 合母1过压'
				},
				{
					name: '直流屏 合母1欠压'
				},
				{
					name: '直流屏 电池1过压'
				},
				{
					name: '直流屏 电池1欠压'
				},
				{
					name: '直流屏 电池组1过流'
				},
				{
					name: '直流屏 一组综合故障'
				},
				{
					name: '直流屏 一组整流模块异常'
				}
			],
			dotArr: [
				{
					name: '一组交流1路Uab电压:',
					num: 0,
					unit: 'V'
				},
				{
					name: '一组交流1路Uac电压:',
					num: 0,
					unit: 'V'
				},
				{
					name: '一组交流1路Ubc电压:',
					num: 0,
					unit: 'V'
				},
				{
					name: '一组交流2路Uab电压:',
					num: 0,
					unit: 'V'
				},
				{
					name: '一组交流2路Uac电压:',
					num: 0,
					unit: 'V'
				},
				{
					name: '一组交流2路Ubc电压:',
					num: 0,
					unit: 'V'
				},
				{
					name: '一组合母1电压:',
					num: 0,
					unit: 'V'
				},
				{
					name: '一组控母1电压:',
					num: 0,
					unit: 'V'
				},
				{
					name: '一组控母1电流:',
					num: 0,
					unit: 'A'
				},
				{
					name: '一组电池1电压:',
					num: 0,
					unit: 'V'
				},
				{
					name: '一组电池1电流:',
					num: 0,
					unit: 'A'
				},
				{
					name: '一组电池温度:',
					num: 0,
					unit: '度'
				}
			]
		}
	},
	props:{
		datas: {
			type: Object,
			default: () => {}
		}
	},
	watch: {
		datas(val){
			this.funSetDot(val)
		}
	},
	methods: {
		funSetDot(obj){
			this.dotArr[0].num = obj.akai083
			this.dotArr[1].num = obj.akai084
			this.dotArr[2].num = obj.akai085
			this.dotArr[3].num = obj.akai086
			this.dotArr[4].num = obj.akai087
			this.dotArr[5].num = obj.akai088
			this.dotArr[6].num = obj.akai089
			this.dotArr[7].num = obj.akai090
			this.dotArr[8].num = obj.akai091
			this.dotArr[9].num = obj.akai092
			this.dotArr[10].num = obj.akai093
			this.dotArr[11].num = obj.akai094

			this.dataArr[0].status = obj.akdi222
			this.dataArr[1].status = obj.akdi223
			this.dataArr[2].status = obj.akdi229
			this.dataArr[3].status = obj.akdi230
			this.dataArr[4].status = obj.akdi231
			this.dataArr[5].status = obj.akdi232
			this.dataArr[6].status = obj.akdi233
			this.dataArr[7].status = obj.akdi234
			this.dataArr[8].status = obj.akdi235
			this.dataArr[9].status = obj.akdi236
			this.dataArr[10].status = obj.akdi239
			this.dataArr[11].status = obj.akdi244
		}
	},
	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;
	border: 2px solid rgba(255,255,255,0.6);
	height: 467px;
	.d-pn-tb{
		width: 70%;
		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: 100%;
		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>