hb_sis_zhfx/src/views/sampleDatabase/fault/point.vue

<template>
	<el-row type="flex">
		<div class="query mg-b-8">
			<div class="query-items">
				<div class="query-item">
					<div class="lable">时间：</div>
					<div class="search-input">
						<el-date-picker v-model="time" 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-if="!chooseStatus" @change="switchChange(selectValue)" class="inputs"
							v-model="selectValue" placeholder="请选择">
							<el-option v-for="item in timeoptions" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
				</div>
				<div class="query-actions">
					<!-- <button class="btn" @click="clearDb">重置对标选项</button> -->
					<button class="btn" @click="dbfx">原数据对标</button>
				</div>
			</div>
		</div>
	</el-row>
	<el-row :type="'flex'" class="content mg-b-8">
		<ComTable :data="tableData" :height="'30vh'" v-loading="tableLoading" ref="curRef" element-loading-text="拼命加载中"
			element-loading-background="rgba(0, 0, 0, 0.8)"></ComTable>
	</el-row>
	<el-row :type="'flex'" class="content" :style="{height:'44vh'}">
		 <el-col :span="24">
		 	<multiple-y-line-chart-normal height="45vh" :list="Powertrend" :yAxises="PowertrendYAxises"
		 		:showLegend="true" />	 
		 </el-col>
	</el-row>
</template>

<script>
	import ComTable from "@/components/coms/table/table.vue";
	import MultipleYLineChartNormal from "../../NewPages/multiple-y-line-chart-normal.vue";
	export default {
		components: {
			ComTable,
			MultipleYLineChartNormal
		},
		data() {
			const that = this;
			return {
				Powertrend: [{
					title: "",
					yAxisIndex: 0, // 使用单位
					value: [],
				}, ],
				PowertrendYAxises: [{
						name: "",
						min: 0,
						max: null,
						unit: "",
						position: "left",
					},
					{
						name: "",
						min: 0,
						max: 25,
						unit: "",
						position: "right",
					},
				],
				selectValue: "60",
				timeoptions: [
					{
						value: "60",
						label: "一分钟",
					},
					{
						value: "300",
						label: "五分钟",
					},
					{
						value: "600",
						label: "十分钟",
					},
					{
						value: "1800",
						label: "三十分钟",
					},
					{
						value: "3600",
						label: "一小时",
					},
					{
						value: "86400",
						label: "一天",
					},
				],
				time: [that.st - (3600 * 1000*24), that.st + (1000*10*60)],
				point: [],
				pointdes: [],

				pageSize: 20,
				model: [],
				station: '',
				windturbinename: "",
				isvisiable: false,
				checkLength: 0, //对标分析只能选择5个
				tableData: {
					column: [
						{
							name: "",
							field: "check",
							is_light: false,
							width: '50px',
							template: function() {
								return "<input class='check curCheckBox' type='CheckBox'/>";
							},
							click: function(event, data) {
								let point = data.point,
									pointdes = data.pointdes;
								if (event.target.checked == false && that.checkLength <= 5) {
									that.point.forEach((item, i) => {
										if (item == point) {
											that.point.splice(i, 1);
											that.pointdes.splice(i, 1);
										}
									});
									that.checkLength--;
								} else if (event.target.checked && that.checkLength < 5) {
									that.point.push(point);
									that.pointdes.push(pointdes);
									that.checkLength++;
								} else if (that.checkLength == 5) {
									event.target.checked = false;
								}
							},
						},
						{
							name: "序号",
							field: "index",
							is_light: false,
							width: '30px',
						},
						{
							name: "测点名称",
							field: "point",
							is_light: false,
							width: '400px',
						},
						{
							name: "测点描述",
							field: "pointdes",
							is_light: false,
							width: '350px',
						},
						{
							name: "操作",
							is_light: false,
							width: '250px',
							template: () => {
								return (
									"<el-button type='text' style='cursor: pointer;' value='config'>查看原数据</el-button>&nbsp"
								);
							},
							click(e, row) {
								that.onClickOption(e, row);
							},
						},
					],
					data: [],
				}
			};
		},
		props: {
			data: {
				type: Array
			},
			st: {
				type: String
			},
		},
		methods: {
			onClickOption(e, row) { // 操作按钮
				let that = this;
				if ("config" == e.target.getAttribute("value")) { //原始数据
					that.requestDetailData([row.point], [row.pointdes], [Date.parse(new Date(that.time[0])), Date.parse(
						new Date(that.time[1]))], that.selectValue);
					that.clearDb();
				}
			},
			list(data) {
				var that = this;
				that.tableData.data = [];
				if (data.length) {
					for (var i = 0; i < data.length; i++) {
						let obj = {
							index: i + 1,
							windturbineid: data[i].windturbineid,
							widget: data[i].widget,
							point: data[i].point,
							pointdes: data[i].pointdes,
							model: data[i].model,
							stationcn: data[i].stationcn,
						};
						that.tableData.data.push(obj);
					}
					that.requestDetailData([data[0].point], [data[0].pointdes], [Date.parse(new Date(that.time[0])), Date.parse(
						new Date(that.time[1]))], that.selectValue);
				}
			},
			switchChange(interval, status) {
				if (status === 'interval') {
					this.chooseStatus = false
					this.selectValue = '60'
				} else if (status === 'original') {
					this.chooseStatus = true
				}
			},
			requestDetailData(point, pointdes, time, interval) {
				let that = this;
				let Powertrend = [];
				let dataPoint = '';
				pointdes.forEach((ele, index) => {
					Powertrend.push({
						title: ele,
						smooth: true,
						value: [],
					})
				})
				point.forEach((ele, index) => {
					dataPoint += ele + ','
				})
				dataPoint = dataPoint.slice(0, dataPoint.length - 1)
				that.API.requestData({
					showLoading: true,
					method: "GET",
					baseURL: "http://192.168.1.18:9002/",
					subUrl: "point/item",
					data: {
						point: dataPoint,
						startTs: time[0],
						endTs: time[1],
						interval: interval
					},
					success(res) {
						if (res.data) {
							res.data.forEach((ele, index) => {
								ele.list.forEach(cEle => {
									Powertrend[index].value.push({
										text: new Date(cEle.ts).formatDate("hh:mm"),
										value: cEle.doubleValue,
									});
								})
							});
							that.Powertrend = Powertrend;
						}
					},
				});
			},
			dbfx() {
				var that = this;
				if (that.point.length <= 5 && that.point.length != 0) {
					that.Powertrend = [];
					that.requestDetailData(that.point, that.pointdes, [Date.parse(new Date(that.time[0])), Date.parse(
						new Date(that.time[1]))], that.selectValue);
				}else{
					this.BASE.showMsg({
						type: "warning",
						msg: "请选择测点后再对标",
					});
					return
				}
			},
			clearDb() { //清空对标状态
				this.$refs.curRef.clearCheckBox();
				this.point = [];
				this.pointdes = [];
				this.checkLength = 0;
			},
		},
		created() {
			this.list(this.data);
		},
		watch: {
			selectValue() {
				this.requestDetailData(this.point, this.pointdes, [Date.parse(new Date(this.time[0])), Date.parse(new Date(
					this.time[1]))], this.selectValue);
			},
			time(e) {
				let st = Date.parse(new Date(e[0])),
					et = Date.parse(new Date(e[1]));
				if((et - st) > (86400000 * 7)){//判断选择日期区间大于一周则重新选择
					this.BASE.showMsg({
						type: "warning",
						msg: "请选择小于7天的日期区间",
					});
					return
				}
				this.requestDetailData(this.point, this.pointdes, [Date.parse(new Date(this.time[0])), Date.parse(new Date(
					this.time[1]))], this.selectValue);
			},
		},
	};
</script>

<style lang="less" scoped>
	.mb10 {
		margin-bottom: 10px;
	}

	.el-select.w {
		width: 100%;
	}
</style>