neic-hefeng/src/components/WindturbineDetailPages.vue

<template>
	<el-dialog width="75%" @opened="opened()" @closed="closed()" :show-close="false" class="my-info-dialog">
		<template #title>
			<div style="margin-top:-10px;color: #FFFFFF;">风机详情</div>
		</template>
		<div class="body">
			<div class="titleList">
				<div class="chunkdiv">
					<div class="title">风机号：&emsp;</div>
					<div>{{ windturbine.windturbineId }}</div>
				</div>
				<div class="chunkdiv" @dblclick="dbClicks(baseDate.windSpeed)">
					<div class="title">{{baseDate.windSpeed.name}}：&emsp;</div>
					<div>{{baseDate.windSpeed.value}}{{baseDate.windSpeed.unit}}</div>
				</div>
				<div class="chunkdiv" @dblclick="dbClicks({code: 'YDPJFS5M',name: '五分钟平均风速'})">
					<div class="title">五分钟平均风速：&emsp;</div>
					<div>{{healthInfo?.averageWindSpeed5?.toFixed(2)}}m/s</div>
				</div>
				<div class="chunkdiv" @dblclick="dbClicks(theoreticalPower)">
					<div class="title">理论功率：&emsp;</div>
					<div>{{healthInfo?.theoreticalPower?.toFixed(2)}}Kw</div>
				</div>
				<div class="chunkdiv" @dblclick="dbClicks(baseDate.power)">
					<div class="title">{{baseDate.power.name}}：&emsp;</div>
					<div>{{baseDate.power.value}}{{baseDate.power.unit}}</div>
				</div>
				<div class="chunkdiv" @dblclick="dbClicks(baseDate.generatorSpeed)">
					<div class="title">{{baseDate.generatorSpeed.name}}：&emsp;</div>
					<div>{{baseDate.generatorSpeed.value}}{{baseDate.generatorSpeed.unit}}</div>
				</div>
			</div>
			<BasicInformationDetail ref="BasicInfo" :types="types" @health-click="handleHealth" :windturbine="windturbine"></BasicInformationDetail>
		</div>
	</el-dialog>
</template>

<script>
	// import YawDetail from "./YawDetail.vue";
	import api from "api/index";
	import BasicInformationDetail from "./BasicInformationDetail.vue";
	import UniformCodes from "utils/UniformCodes";
	import BackgroundData from 'utils/BackgroundData'
	// import Worning from "./warning.vue"
	export default {
		components: {
			BasicInformationDetail,
		},
		props: {
			windturbine: Object,
		},
		data() {
			return {
				BasicInfo: {},
				healthInfo: {},
				line: "",
				alarmTime: "",
				alarmContent: "",
				alarms: [],
				count: false,
				theoreticalPower:{
					code: "LLGL",
					name: "理论功率"
				},
				typeList: [{
					type: 0,
					name: '已经停机',
				},
				{
					type: 1,
					name: '上电',
				},
				{
					type: 2,
					name: '待机',
				},
				{
					type: 3,
					name: '启动',
				},
				{
					type: 4,
					name: '并网',
				},
				{
					type: 5,
					name: '故障',
				},
				{
					type: 6,
					name: '维护',
				},
				{
					type: 7,
					name: '离线',
				},
				],
				baseDate: {
					windSpeed: {
						name: '',
						num: '',
						unit: ''
					},
					power: {
						name: '',
						num: '',
						unit: ''
					},
					generatorSpeed: {
						name: '',
						num: '',
						unit: ''
					},
				},
				types: null,
			};
		},
		created() {
			this.UniformCodes = new UniformCodes();
		},

		methods: {
			opened() {
				this.line = "";
				this.alarmTime = "";
				this.alarmContent = "";
				this.BasicInfo = this.UniformCodes.getStationInfos(this.windturbine);
				this.BasicInfo.windturbineId = this.windturbine.windturbineId;
				// this.dateDeal(this.BasicInfo)
				this.$refs.BasicInfo.start(this.BasicInfo);
				this.initData();
				this.refreshData();
				this.refreshTimer = setInterval(this.refreshData, 100)
			},
			closed() {
				// todo 切换页面的时候应该让上一个页面停止刷新数据（调用end方法）
				// this.$refs.svgRef.closed();
				// this.$refs.BasicInfo.end();
				// this.$refs.BasicInfo.labelChange();
				this.$emit('close');
				//clearInterval(this.refreshTimer);
			},
			dateDeal(BasicInfo) {
				let showInf = {}
				showInf = BasicInfo.BasicInfo.filter(item => item.tag === "基本信息")[0]
				this.baseDate.windSpeed = showInf.param.filter(item => item.name === "风速")[0]
				this.baseDate.power = showInf.param.filter(item => item.name === "有功功率")[0]
				this.baseDate.generatorSpeed = showInf.param.filter(item => item.name === "发电机转速")[0]
				this.baseDate.type = showInf.param.filter(item => item.name === "状态")[0].value ? this.typeList.filter(
					status => status.type === Number(showInf.param.filter(item => item.name === "状态")[0].value))[0]
					.name : ''
				console.log(this.baseDate.generatorSpeed.name);
				this.types = Number(showInf.param.filter(item => item.name === "状态")[0].value)
				console.log(this.types)
			},
			refreshData() {
				let bg = BackgroundData.getInstance();
				bg.initWinturbineBaseData(this.BasicInfo, this.onMessage);
				this.dateDeal(this.BasicInfo)
				clearInterval(this.refreshTimer);
				this.refreshTimer = setInterval(this.refreshData, 5000)
			},
			initData() {
				// axiios.get(`http://${config.calcUrl}/windturbine/line/${this.windturbine.windturbineId}`)
				//   .then(msg => this.line = msg.data);
				api.getWindWarning(this.windturbine.windturbineId, '1', '50').then(msg => {
					let vs = msg.data;
					if (vs.length <= 0) return;
					this.alarmTime = BackgroundData.getInstance().formatDate(vs[0].lastUpdateTime);
					this.alarmContent = vs[0].alertText;
					this.alarms = msg.data;
					this.$refs.BasicInfo.alarmd(this.alarms);
					console.log(this.alarms)
				})
					.catch(err => {
						console.log(err);
					});
			},
			dbClicks(value) {
				this.$refs.BasicInfo.dbClicks(value, this.windturbine.windturbineId)
			},
			handleHealth(value){
				this.healthInfo = value
			}
		},
		watch: {
			'windturbine': {
				handler: function (json) {
					if (json) {
						this.initData()
					}
				}
			}
		}
	};
</script>
<style scoped>
	.my-info-dialog {
		box-shadow: 0px 0px 10px #05bb4c;
	}

	.body {
		background-color: black;
		margin-top: -30px;
		margin-left: -10px;
		margin-right: -10px;
		margin-bottom: -30px;
		border-bottom: 20px solid rgb(36, 36, 36);
	}

	.chunkdiv {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 17%;
		background-color: #363636;
		margin: 1px;
		padding: 4px 0px;
		font-size: 12px;
		color: #FFFFFF;
		overflow: hidden;
		white-space: nowrap;
	}

	.title {
		font-size: 12px;
		color: #B3B3B3;
	}

	table {
		margin-left: 2px;
		margin-right: 2px;
	}

	/* td {
		width: 20%;
	} */

	el-tabs {
		background-color: black;
	}

	.svg {
		height: 67vh;
	}
	.titleList{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
</style>