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

<template>
	<div>
		<div class="d-tt">{{Number(nbqIndex)}}#逆变器分画面</div>
		<div class="d-subtt">主画面</div>
		<div class="d-pn">
			<div class="d-pn-tb">
				<table style="border-collapse: collapse;width: 100%;">
					<tr v-for="item in dotArr" :key="item.name">
						<td width="75%">{{Number(nbqIndex)}}{{ item.name }}</td>
						<td width="25%">{{ item.num }}</td>
					</tr>
				</table>
			</div>
			<div class="d-pn-ul">
				<div class="d-pn-ul-li" :data-active="item.status===true" v-for="(item,index) in dataArr" :key="item.name">{{Number(nbqIndex)}}{{ item.name }}</div>
			</div>
		</div>
	</div>
	</template>
	<script>
	export default {
		data(){
			return {
				dataArr: [
					{
						name: '#逆变器_待机'
					},
					{
						name: '#逆变器_并网'
					},
					{
						name: '#逆变器_正常并网'
					},
					{
						name: '#逆变器_限电降额并网'
					},
					{
						name: '#逆变器_自降额并网'
					},
					{
						name: '#逆变器_正常运行'
					},
					{
						name: '#逆变器_故障停运'
					},
					{
						name: '#逆变器_限电停运'
					},
					{
						name: '#逆变器_关机'
					},
					{
						name: '#逆变器_电网相线对PE短路'
					},
					{
						name: '#逆变器_电网调电'
					},
					{
						name: '#逆变器_电网欠压'
					},
					{
						name: '#逆变器_电网过压'
					},
					{
						name: '#逆变器_电网电压不平衡'
					},
					{
						name: '#逆变器_电网过频'
					},
					{
						name: '#逆变器_电网欠频'
					},
					{
						name: '#逆变器_电网频率不稳定'
					},
					{
						name: '#逆变器_输出过流'
					}
				],
				dotArr: [
				'#逆变器_机型ID',
				'#逆变器_组串个数',
				'#逆变器_MPPT个数',
				'#逆变器_额定功率(Pn)',
				'#逆变器_最大有功（Pmax）',
				'#逆变器_最大视在（Smax）',
				'#逆变器_最大无功（Qmax,向电网馈）',
				'#逆变器_最大无功（Qmax,从电网吸）',
				'#逆变器_PV1电流',
				'#逆变器_PV2电压',
				'#逆变器_PV2电流',
				'#逆变器_PV3电压',
				'#逆变器_PV3电流',
				'#逆变器_PV4电压',
				'#逆变器_PV4电流',
				'#逆变器_PV5电压',
				'#逆变器_PV5电流',
				'#逆变器_PV6电压',
				'#逆变器_PV6电流',
				'#逆变器_PV7电压',
				'#逆变器_PV7电流',
				'#逆变器_PV8电压',
				'#逆变器_PV8电流',
				'#逆变器_PV9电压',
				'#逆变器_PV9电流',
				'#逆变器_PV10电压',
				'#逆变器_PV10电流',
				'#逆变器_PV11电压',
				'#逆变器_PV11电流',
				'#逆变器_PV12电压',
				'#逆变器_PV12电流',
				'#逆变器_PV13电压',
				'#逆变器_PV13电流',
				'#逆变器_PV14电压',
				'#逆变器_PV14电流',
				'#逆变器_PV15电压',
				'#逆变器_PV15电流',
				'#逆变器_PV16电压',
				'#逆变器_PV16电流',
				'#逆变器_PV17电压',
				'#逆变器_PV17电流',
				'#逆变器_PV18电压',
				'#逆变器_PV18电流',
				'#逆变器_有功功率',
				'#逆变器_(有功)调节值',
				'#逆变器_无功功率',
				'#逆变器_(无功)调节值',
				].map(o => {
					return {
						name: o,
						num: 0
					}
				})
			}
		},
		props:{
			datas: {
				type: Object,
				default: () => {}
			},
			nbqIndex: {
				type: String,
				default: '01'
			}
		},
		watch: {
			datas(val){
				this.funSetDot(val)
			},
			nbqIndex(val){
				this.funSetDot(this.datas)
			}
		},
		methods: {
			funSetDot(obj){
				this.dotArr.forEach((o, index) => {
					if(index+1<10){
						o.num = obj[`aknbq0${this.nbqIndex}ai00${index+1}`]
					}else{
						o.num = obj[`aknbq0${this.nbqIndex}ai0${index+1}`]
					}
				})
				this.dataArr.forEach((o, index) => {
					if(index+1<10){
						o.status = obj[`aknbq0${this.nbqIndex}di00${index+1}`]
					}else{
						o.status = obj[`aknbq0${this.nbqIndex}di0${index+1}`]
					}
				})
			}
		},
		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: 580px;
		.d-pn-tb{
			width: 70%;
			// height: 100%;
			overflow-x: hidden;
			overflow-y: auto;
			margin-top: 10px;
			margin-bottom: 20px;
			margin-right: 20px;
			margin-left: 20px;
			border: 1px solid rgba(255,255,255,0.6);
			border-collapse: collapse;
			tr{
				height: 36px;
			}
			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>