neic-hefeng/src/components/focus/focusCard.vue

/* 推荐区 */
<template>
	<div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
		<!-- <table v-for="(vl , index) in values" :key="vl" @dblclick="sendMsg(vl,index)">
				<tr>{{vl.stationName}}</tr>
				<tr>{{vl.content}}</tr>
				<tr>{{vl.createTime}}</tr>
			</table> -->
		<div class="area" v-for="(vl , index) in values" :key="vl" @dblclick="sendMsg(vl,index)">
			<img class="imgs" src="../../assets/img/RecommendedArea/background.png" alt="">
			<div class="content">{{vl.content}}</div>
			<div class="">{{vl.stationName}}</div>
			<div class="">{{vl.createTime}}</div>
		</div>
	</div>
	<PhotoelectricDetailPages ref="photo" @closed="closed()" :data="dialogData.data"
		:stationName="dialogData.stationName" v-model="dialogVisible">
	</PhotoelectricDetailPages>
</template>

<script>
	import BackgroundData from "utils/BackgroundData"
	import { Photoelectric } from "utils/PhotoelectricDetailPages";
	import PhotoelectricDetailPages from "./PhotoelectricDetailPages.vue"
	import MessageBridge from 'utils/MessageBridge'
	import axios from 'axios';
	import dayjs from 'dayjs'
	export default {
		name: "RecommendedArea",
		props: ["datas"],
		data() {
			return {
				values: new Array(),
				dialogVisible: false,
				dialogData: {
					data: {
						PowerSet: '',
						AgcUp: '',
						AgcLower: '',
						ActualPower: '',
						TheoryPower: '',
						ForecastPower: '',
						AgcIn: '',
						AgcFar: '',
						SumLock: '',
						SubLock: '',
					}
				},
				dataMsg: [],
				interval: '',
				arrKey: [],
				timeIndex: 0
			};
		},
		components: {
			PhotoelectricDetailPages,
		},
		created() {
			this.datacontrol();
			this.initData();
		},
		methods: {
			datacontrol() {
				var mb = MessageBridge.getInstance();
				var vss = [{ key: "/topic/voice-control", action: this.windturbineMessage }];
				mb.register(vss);
			},
			windturbineMessage(msg) {
				var bd = BackgroundData.getInstance();
				let arr = []
				if (msg === 'CLOSE') {
					arr.push(msg)
				} else {
					arr = msg.split('-')
				}
				this.dialogVisible = false
				this.showSvg = false
				this.svgWeb = ''
				if (arr[0] === 'OPEN_AGC' && arr[1] !== 'GS') {
					let data = bd.Recommends
					for (let v in data) {
						if (arr[1] === data[v].stationID) {
							this.sendMsg(data[v])
						}
					}
				} else if (arr[0] === 'CLOSE') {
					this.dialogVisible = false
				}
			},
			closed() {
				clearInterval(this.interval);
			},
			initData() {
				setInterval(this.refreshData, 2000);
			},
			refreshData() {
				var bd = BackgroundData.getInstance();
				var list = new Array();
				var arr = [],
					thisKey = ''
				for (var v in bd.Recommends) {
					thisKey += v + ',';
				}
				axios.get(process.env.VUE_APP_ADAPTERURL + `/ts/latest?keys=` + thisKey)
					.then(msg => {
						for (let v in msg.data) {
							if (msg.data[v].doubleValue ? (msg.data[v].doubleValue > 0) : (msg.data[v].booleanValue)) {
								bd.Recommends[v].isActive = true
							}
						}
						for (let rec in bd.Recommends) {
							if (bd.Recommends[rec].isActive) {
								list.push(bd.Recommends[rec])
							}
						}
						list.forEach(item => {
							item.createTime = dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss')
						})
						this.values = list
					})
			},
			sendMsg: function (vl, index) {
				var that = this;
				that.timeIndex = 0;
				that.ajaxDetail(vl, index);
				that.interval = window.setInterval(function () {
					that.ajaxDetail(vl, index);
				}, 3000);
				that.dialogVisible = true;
				that.dialogData.stationName = vl.stationName;
			},
			ajaxDetail(data, index) {
				let thisKey = Photoelectric[data.values];
				console.log(thisKey)
				let array = []
				thisKey.forEach(item => { item.value ? array.push(item.value) : '' })
				let params = array.join(',')
				axios.get(process.env.VUE_APP_ADAPTERURL + `/ts/latest?keys=` + params)
					.then(res => {
						if (res) {
							console.log(res, this.dialogData.data, thisKey);
							for (let v in res.data) {
								thisKey.forEach(item => {
									let calc = item.calc ? item.calc : 1;
									if (item.value === v) {
										this.dialogData.data[item.tag] = {
											name: item.name,
											value: res.data[v].doubleValue ? res.data[v].doubleValue === 0 ? '0' : (res.data[v].doubleValue * calc).toFixed(2) : (res.data[v].booleanValue ? 1 : 0)
										}
										console.log(this.dialogData.data);
									}
								})
							}
						}
					})
				if (this.timeIndex == 0) {//一分钟执行一次
					var date = new Date()
					var endTs = date.getTime();
					var starTs = endTs - 28800000;
					const PowerSet = thisKey.find(ele => {
						return ele.tag == 'PowerSet'
					});
					const ActualPower = thisKey.find(ele => {
						return ele.tag == 'ActualPower'
					});
					var PowerSetData = [],
						ActualPowerData = [];
					axios.get(process.env.VUE_APP_ADAPTERURL + `/ts/history/snap?tagName=` + PowerSet.value + '&startTs=' +
						starTs +
						'&endTs=' + endTs).then(res1 => {
							axios.get(process.env.VUE_APP_ADAPTERURL + `/ts/history/snap?tagName=` + ActualPower.value +
								'&startTs=' + starTs + '&endTs=' + endTs).then(res2 => {
									res1.data.forEach(item => {
										PowerSetData.push({
											ts: item.ts,
											doubleValue: item.doubleValue * PowerSet.calc
										})
									})
									res2.data.forEach(item => {
										ActualPowerData.push({
											ts: item.ts,
											doubleValue: item.doubleValue * ActualPower.calc
										})
									})
									this.$refs.photo.initData(PowerSetData, ActualPowerData);
								});
						});
				} else if (this.timeIndex == 20) {
					this.timeIndex = -1;
				}
				this.timeIndex++;
			},
		},
	};
</script>
<style scoped>
	/* table {
		background-image: url("../../assets/img/RecommendedArea/background.png");
		text-align: center;
		font-size: 12px;
		background-size: 110px;
		margin-left: 10px;
		margin-top: 10px;
		padding-top: 10px;
		background-repeat: no-repeat;
		color: #ffffff;
	} */
	.imgs {
		/* width: 70px;
		height: 66px; */
	}

	.area {
		display: flex;
		flex-direction: column;
		font-size: 12px;
		color: #ffffff;
		width: 130px;
		align-items: center;
		margin-bottom: 10px;
	}

	.content {
		margin-top: -70px;
		width: 25px;
		height: 34px;
		margin-bottom: 20px;
		display: flex;
		align-items: center;
	}
</style>