project-neic/src/components/WindturbineDetailPages.vue

<template>
	<el-dialog width="75%" @opened="opened()" @closed="closed()" :show-close="false" class="my-info-dialog">
		<template #title>
			<div v-if="!showSvg" style="margin-top:-10px;color: #FFFFFF;">风机详情</div>
			<div v-else style="margin-top:-10px;color: #FFFFFF;">{{stationName}}</div>
		</template>
		<div v-if="!showSvg" class="body">
			<table style="border-bottom: 1px solid #242424;" width="99.8%">
				<tr>
					<td>
						<div class="chunkdiv">
							<!-- <img
                src="../../../assets/img/WindturbineDetailPages/pic_01.png"
              /> -->
							<div class="title">风机号：&emsp;</div>
							<div>{{ windturbine.windturbineId }}</div>
						</div>
					</td>
					<td>
						<div class="chunkdiv">
							<div class="title">状态：&emsp;</div>
							<div>{{baseDate.type}}</div>
						</div>
					</td>
					<td>
						<div class="chunkdiv">
							<div class="title">{{baseDate.windSpeed.name}}：&emsp;</div>
							<div>{{baseDate.windSpeed.value}}{{baseDate.windSpeed.unit}}</div>
						</div>
					</td>
					<td>
						<div class="chunkdiv">
							<div class="title">{{baseDate.power.name}}：&emsp;</div>
							<div>{{baseDate.power.value}}{{baseDate.power.unit}}</div>
						</div>
					</td>
					<td>
						<div class="chunkdiv">
							<div class="title">{{baseDate.generatorSpeed.name}}：&emsp;</div>
							<div>{{baseDate.generatorSpeed.value}}{{baseDate.generatorSpeed.unit}}</div>
						</div>
					</td>
				</tr>
			</table>

			<!-- <BasicInformationDetail ref="BasicInfo"></BasicInformationDetail> -->
			<!--<div class="worning1">
        <Worning></Worning>
      </div>
      <div class="worning2">
        <Worning></Worning>
      </div> -->
			<BasicInformationDetail ref="BasicInfo" :types="types" :windturbine="windturbine"></BasicInformationDetail>
			<!-- <el-tabs type="border-card" tab-position="bottom" stretch="true">
        <el-tab-pane label="基本信息">
          
        </el-tab-pane>
        <el-tab-pane label="机舱信息" disabled>
        </el-tab-pane>
        <el-tab-pane label="故障信息" disabled>
        </el-tab-pane>
        <el-tab-pane label="齿轮箱" disabled>
        </el-tab-pane>
        <el-tab-pane label="变桨" disabled>
        </el-tab-pane>
        <el-tab-pane label="偏航" disabled>
        </el-tab-pane>
        <el-tab-pane label="液压" disabled>
        </el-tab-pane>
        <el-tab-pane label="发电机" disabled>
        </el-tab-pane>
      </el-tabs> -->
		</div>
		<div v-else>
			<nss ref="svgRef" v-if="svgWeb=='NSS_FDC'||svgWeb=='NSS_SYZ'" />
			<mhs ref="svgRef" v-if="svgWeb=='MHS_FDC'||svgWeb=='MHS_SYZ'" />
			<qs ref="svgRef" v-if="svgWeb=='QS_FDC'||svgWeb=='QS_SYZ'" />
			<sbq ref="svgRef" v-if="svgWeb=='SBQ_FDC'||svgWeb=='SBQ_SYZ'" />
			<xs ref="svgRef" v-if="svgWeb=='XS_FDC'||svgWeb=='XS_SYZ'" />
			<pl1 ref="svgRef" v-if="svgWeb=='PL1_GDC'||svgWeb=='PL_SYZ'" />
			<pl2 ref="svgRef" v-if="svgWeb=='PL2_GDC'||svgWeb=='PL2_SYZ'" />
			<dwk ref="svgRef" v-if="svgWeb=='DWK_GDC'||svgWeb=='DWK_SYZ'" />
			<mch ref="svgRef" v-if="svgWeb=='MCH_GDC'||svgWeb=='MCH_SYZ'" />
			<xh ref="svgRef" v-if="svgWeb=='XH_GDC'||svgWeb=='XH_SYZ'" />
			<sbdl ref="svgRef" v-if="svgWeb=='QS3_FDC'||svgWeb=='QS3_SYZ'" />
		</div>
	</el-dialog>
</template>

<script>
	// import YawDetail from "./YawDetail.vue";
	import BasicInformationDetail from "./BasicInformationDetail.vue";
	import UniformCodes from "utils/UniformCodes";
	import Dwk from "./BoosterStation/dwk.vue";
	import Sbdl from "./BoosterStation/sbdl.vue";
	import Nss from "./BoosterStation/nss.vue";
	import Mhs from "./BoosterStation/mhs.vue";
	import Qs from "./BoosterStation/qs.vue";
	import Pl1 from "./BoosterStation/pl1.vue";
	import Pl2 from "./BoosterStation/pl2.vue";
	import Mch from "./BoosterStation/mch.vue";
	import Xs from "./BoosterStation/xs.vue";
	import Xh from "./BoosterStation/xh.vue";
	import Sbq from "./BoosterStation/sbq.vue";
	import BackgroundData from 'utils/BackgroundData'
	// import Worning from "./warning.vue"
	export default {
		components: {
			// YawDetail, 
			BasicInformationDetail,
			// StandAloneImg,
			// Worning,
			Dwk,
			Sbdl,
			Nss,
			Mhs,
			Qs,
			Pl1,
			Pl2,
			Mch,
			Xs,
			Xh,
			Sbq
		},
		props: {
			windturbine: Object,
			showSvg: {
				type: Boolean,
				default: false,
			},
			svgWeb: {
				type: String,
				default: '',
			},
			stationName: {
				type: String,
				default: '',
			},
		},
		data() {
			return {
				BasicInfo: {},
				line: "",
				alarmTime: "",
				alarmContent: "",
				alarms: [],
				count: false,
				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)
				// clearInterval(this.refreshTimer);
			},
			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() {
				var 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 => {
						var 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);
					});
			},
		},
		watch:{
			'windturbine': {
                handler: function (json) {
                    if (json) {
                        this.initData()
                    }
                }
            }
		}
	};
</script>
<style scoped>
	/*   .titeldiv{
    display: flex;
    justify-content: space-around;
  } */
	.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;
		/* justify-content: center; */
		background-color: #363636;
		margin: 1px;
		padding: 4px 2px;
		font-size: 12px;
		color: #FFFFFF;
		overflow: hidden;
		white-space: nowrap;
		padding-left: 32px;
	}

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

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

	td {
		width: 20%;
	}

	el-tabs {
		background-color: black;
	}

	.svg {
		height: 67vh;
	}
</style>