sis_zhfx/src/views/MalfunctionWarning/diagnose.vue

<template>
	<div>
		<div class="query mg-b-8">
			<div class="query-items">
				<div class="query-item">
					<div class="lable">场站：</div>
					<div class="search-input">
						<el-select v-model="station" placeholder="请选择" popper-class="select" @change="stationChange">
							<el-option v-for="item in stations" :key="item.id" :value="item.id" :label="item.name">
							</el-option>
						</el-select>
					</div>
				</div>
				<div class="query-item">
					<div class="lable">日期：</div>
					<div class="search-input">
						<el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期"
							end-placeholder="结束日期">
						</el-date-picker>
					</div>
				</div>
				<div class="query-item">
					<div class="lable">风机：</div>
					<div class="search-input">
						<el-select v-model="fj" collapse-tags placeholder="请选择" popper-class="select">
							<el-option v-for="item in fjArr" :key="item.id" :value="item.id" :label="item.name">
							</el-option>
						</el-select>
					</div>
				</div>
				<div class="query-item">
					<div class="lable">风机型号：</div>
					<div class="lable">
						{{modelid}}
					</div>
				</div>
				<div class="query-actions">
					<button class="btn green" @click="query(false)">查询</button>
					<button class="btn green" @click="reset">实时更新</button>
				</div>
			</div>
		</div>
		<el-row type="flex">
			<el-col :span="12">
				<el-row type="flex">
					<el-col :span="12">
						<panel title="残差 【模型记录】" :showLine="false">
							<div class="timeLine">
								<div class="body" v-for="(item, index) in ccS" :key="index">
									<div class="left">
										<div class="round_on"></div>
										<div class="line"></div>
									</div>
									<div class="right">
										<div>{{ item.time }}</div>
										<div class="content">
											<div class="names">
												{{ item.faultIds }}
											</div>
											<button class="btn" @click="deleteDate(item.name)">
												删除
											</button>
										</div>
									</div>
								</div>
							</div>
						</panel>
					</el-col>
					<el-col :span="12">
						<panel title="油温 【模型记录】" :showLine="false">
							<div class="timeLine">
								<div class="body" v-for="(item, index) in ywS" :key="index">
									<div class="left">
										<div class="round_on"></div>
										<div class="line"></div>
									</div>
									<div class="right">
										<div>{{ item.time }}</div>
										<div class="content">
											<div class="names">
												{{ item.faultIds }}
											</div>
											<button class="btn" @click="deleteDate(item.name)">
												删除
											</button>
										</div>
									</div>
								</div>
							</div>
						</panel>
					</el-col>
				</el-row>
			</el-col>
			<el-col :span="12">
				<panel title="残差 【预测记录】" :showLine="false">
					<double-line-chart height="25vh" :list='ccChart' />
					<double-line-chart height="20vh" :list='ccLineChart' />
					<div class="green text">
						依据当前的模型，{{forekonw?'油温误差大于0.1,预计在'+forekonw+'，齿轮箱会发生油温异常':'没有油温误差大于0.1的齿轮箱油温异常'}}。
					</div>
				</panel>
				<panel title="油温 【预测记录】" :showLine="false">
					<double-line-chart height="25vh" :list='ywChart' />
					<div class="green text">
						预计未来10分钟的油温走势，当前时间为{{new Date(endTs).formatDate("yyyy-MM-dd hh:mm")}},当前油温: {{ywChartHtml[0]}}
						℃,未来10分钟油温：{{ywChartHtml[1]}} ℃ 。
					</div>
				</panel>
			</el-col>
		</el-row>
	</div>
</template>
<script>
	import Panel from "@/components/coms/panel/panel.vue";
	import DoubleLineChart from "@/components/chart/line/double-line-chart.vue";
	import axios from "axios";
	export default {
		components: {
			Panel,
			DoubleLineChart
		},
		data() {
			return {
				stations: [],
				station: '',
				model: [],
				fjArr: [], //风机
				fj: '',
				ywChart: [{
					title: "实时油温",
					smooth: true,
					value: []
				}, {
					title: "未来10分钟油温",
					smooth: true,
					value: []
				}],
				ywChartHtml: [],
				ccChart: [{
					title: "实时油温",
					smooth: true,
					value: []
				}, {
					title: "理论油温",
					smooth: true,
					value: []
				}],
				ccLineChart:[{
					title: "油温残差",
					smooth: true,
					value: []
				}],
				startTs: '',
				endTs: '',
				date: [],
				uniformCodes: ['CI0671', 'AI041','YWCH','LLYW'],
				interval: null,
				flag: 1,
				ccS: [],
				ywS: [],
				modelid:'',
				forekonw:0
			};
		},
		created() {
			this.resetDate();
			this.startAjax();
		},
		methods: {
			resetDate(){//重置时间
				let end = new Date().valueOf();
				this.startTs = new Date(new Date().getTime() - (3600 * 1000 * 2)).valueOf();
				this.endTs = end;
				this.date = [this.startTs, this.endTs];
			},
			async history(thingId, uniformCode) { //油温chart历史
				let that = this;
				let items = [];
				const {
					data
				} = await axios.get(
					`http://192.168.10.18:8011/ts/history/snap?thingType=windturbine&uniformCode=${uniformCode}&thingId=${thingId}&startTs=${that.startTs}&endTs=${that.endTs}&interval=60`
					);
				data.forEach(ele => {
					items.push({
						text: new Date(ele.ts).formatDate("yyyy-MM-dd hh:mm"),
						value: ele.value.toFixed(2)
					})
				})
				if (uniformCode === 'AI041') {
					that.ywChart[0].value = items;
					that.ccChart[0].value = items;
				}
				if (uniformCode === 'CI0671') {
					that.ywChart[1].value = items;
				}
				if (uniformCode === 'YWCH') {
					that.ccLineChart[0].value = items;
					if(items.pop().value >= 0.1){
						that.forekonw = item.value;
					}
				}
				if (uniformCode === 'LLYW') {
					that.ccChart[1].value = items;
				}
			},
			async list(thingId) { //一分钟一次
				let that = this;
				const {
					data
				} = await axios.get(
					`http://192.168.10.18:8011/ts/latest?thingType=windturbine&uniformCodes=YWCH,CI0671,LLYW,AI041&thingId=${thingId}`
					);
				let AI041 = {
					text: new Date(data.AI041.ts).formatDate("yyyy-MM-dd hh:mm"),
					value: data.AI041.value.toFixed(2)
				}
				that.ywChart[0].value.push(AI041)
				that.ywChart[1].value.push({
					text: new Date(data.CI0671.ts).formatDate("yyyy-MM-dd hh:mm"),
					value: data.CI0671.value.toFixed(2)
				})
				that.ywChartHtml = [data.AI041.value.toFixed(2), data.CI0671.value.toFixed(2)];
				that.ccChart[0].value.push(AI041);
			},
			async startAjax() { //场站
				var that = this;
				await that.API.requestData({
					method: "GET",
					baseURL: "http://192.168.1.18:9002/",
					subUrl: "basic/station/all",
					success(res) {
						that.stations = res.data;
						that.station = res.data[1].id;
					},
				});
			},
			query(a) {
				this.ywYc(a);
				this.mxjl();
			},
			reset(){
				this.resetDate();
				this.query(true);//传个true，重置，开启每秒执行，else停
			},
			ywYc(a) { //油温预测记录
				this.ccChart[0].value = [];
				this.ccChart[1].value = [];
				this.ccLineChart[0].value = [];
				
				this.ywChart[0].value = [];
				this.ywChart[1].value = [];
				this.stopInterval();
				this.uniformCodes.forEach(ele => {
					this.history(this.fj, ele);
				})
				this.list(this.fj);
				if(a){//实时更新
					this.interval = setInterval(() => {
						this.uniformCodes.forEach(ele => {
							this.history(this.fj, ele);
						})
						this.list(this.fj)
					}, 60000);
				}
			},
			mxjl() { //模型记录
				let that = this;
				that.API.requestData({ //风机
					method: "GET",
					baseURL: "http://10.155.32.14:9002/",
					subUrl: "api/gearbox-diagnosis/history",
					success(res) {
						let cc = [],
							yw = [];
						res.forEach(ele => {
							let data = {
								name: ele.name,
								time: ele.name.split('_')[1],
								faultIds: ele.faultIds ? ele.faultIds : '暂无数据'
							};
							ele.name.split('_')[0] === '残差' ? cc.push(data) : yw.push(data);
						})
						that.ccS = cc;
						that.ywS = yw;
					},
				});
			},
			deleteDate(val) {
				let that = this;
				that.API.requestData({
					method: "GET",
					baseURL: "http://10.155.32.14:9002/",
					subUrl: "api/gearbox-diagnosis/history/remove",
					data: {
						names: val,
					},
					success(res) {
						if (res == 'success') {
							that.mxjl();
							that.BASE.showMsg({
								type: "success",
								msg: '已删除'
							});
						}
					},
				});
			},
			stopInterval(){
				clearInterval(this.interval);
				this.interval = null;
			}
		},
		unmounted() {
			this.stopInterval();
		},
		watch: {
			// YWCH 油温残差
			// LLYW 理论油温
			// CI0671 未来10分钟油温
			// AI041 实时油温
			station(e) {
				let that = this;
				that.API.requestData({ //风机
					method: "GET",
					baseURL: "http://10.155.32.4:9001/",
					subUrl: "benchmarking/wtList",
					data: {
						wpid: e,
					},
					success(res) {
						that.fjArr = res.data;
						that.fj = res.data[0].id;
						if (that.flag === 1) {
							that.query(true);
						}
						that.flag = 2;
					},
				});
			},
			date(e) {
				this.startTs = e[0].valueOf();
				this.endTs = e[1].valueOf();
			},
			fj(e){
				let that = this;
				that.API.requestData({ //风机型号
					method: "GET",
					subUrl: "windturbine/getWindturbine",
					data: {
						windturbineid: e,
					},
					success(res) {
						that.modelid = res.data.modelid;
					}
				});
			}
		}
	};
</script>
<style lang="less" scoped>
	.body {
		display: flex;
		flex-direction: row;
		height: 75px;
		width: 100%;

		.left {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 30px;
			margin-left: 30px;

			.round_on {
				width: 20px;
				height: 27px;
				border-radius: 50%;
				background-color: rgb(30, 209, 45);
			}

			.round {
				width: 20px;
				height: 27px;
				border-radius: 50%;
				background-color: crimson;
			}

			.line {
				width: 2px;
				height: 100%;
				background-color: #ffffff;
			}
		}

		.right {
			width: 100%;
			margin-left: 20px;

			.content {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin-top: 10px;

				.btn {
					margin-right: 20px;
				}
			}
		}
	}

	.timeLine {
		height: 80vh;
		overflow-y: auto;
		margin-top: 30px;
	}

	.text {
		font-size: 2vh;
		margin: 1vh 0;
	}
</style>
<style lang="less">
	.el-date-editor--daterange {
		border: 1px solid rgba(96, 103, 105, 0.2);
		height: 33px;
		width: 100% !important;

		input {
			background-color: transparent;
			color: white;
		}

		.el-range-separator {
			color: white;
		}
	}
</style>