sis_zhfx/src/views/sampleDatabase/fault/point - 副本.vue

<template>
	<el-row type="flex">
		<div class="query-actions">
			<button class="btn" @click="addEdit">新增</button>
			<button class="btn" @click="dbfx">原始数据对标</button>
			<button class="btn" @click="back">返回</button>
		</div>
	</el-row>
	<el-row :type="'flex'" class="content">
		<el-col :span="24">
			<ComTable :data="tableData" :pageSize="pageSize" @onPagging="onChangePage" height="84vh"
				v-loading="tableLoading" ref="curRef" element-loading-text="拼命加载中"
				element-loading-background="rgba(0, 0, 0, 0.8)"></ComTable>
		</el-col>
	</el-row>
		
		
	<el-dialog :title="isvisiableType == 1 ? '新增' : '编辑'" v-model="isvisiable" width="45%" top="15vh"
		custom-class="modal" :close-on-click-modal="false" :before-close="onClickDialogClose" class="isvisiable">
		<!-- 这里是新增或编辑 -->
		<el-row type="flex" class="mb10">
			<el-col :span="12">
				<div>样本类型：</div>
				<el-select v-model="widget" placeholder="请选择样本" popper-class="select" class="w">
					<el-option v-for="item in widgetArr" :key="item.value" :value="item.value"
						:label="item.label">
					</el-option>
				</el-select>
			</el-col>
			<el-col :span="12">
				<div>风机型号：</div>
				<el-select v-model="tableModel" placeholder="请选择风机型号" popper-class="select" class="w">
					<el-option v-for="item in fjxh" :key="item.value" :value="item.value" :label="item.label">
					</el-option>
				</el-select>
			</el-col>
		</el-row>
		<el-row type="flex" class="mb10">
			<el-col :span="12">
				<div>故障分类：</div>
				<el-select v-model="windturbinename" placeholder="请选择故障" popper-class="select" class="w">
					<el-option v-for="item in BuJian" :key="item.value" :value="item.value" :label="item.label">
					</el-option>
				</el-select>
			</el-col>
			<el-col :span="12">
				<div>时间：</div>
				<el-date-picker v-model="tableTime" type="datetimerange" range-separator="至"
					start-placeholder="开始日期" end-placeholder="结束日期" class="w">
				</el-date-picker>
			</el-col>
		</el-row>
		<el-row type="flex" class="mb10">
			<el-col :span="12">
				<div>故障原因：</div>
				<el-input placeholder="请输入故障原因" v-model="tableSymptom" :value="tableSymptom">
				</el-input>
			</el-col>
			<el-col :span="12">
				<div>风机厂商：</div>
				<el-input placeholder="请输入风机厂商" v-model="tableManufacturer" :value="tableManufacturer">
				</el-input>
			</el-col>
		</el-row>
		<el-row type="flex" class="mb10">
			<el-col :span="12">
				<div>风机编号：</div>
				<el-input placeholder="请输入风机编号" v-model="stationcn" :value="stationcn">
				</el-input>
			</el-col>
		</el-row>
		<el-row type="flex" justify="end">
			<div class="query-actions" style="margin-top: 15px">
				<button class="btn" @click="onClickDialogClose">取消</button>
				<button class="btn" @click="dialogSave">保存</button>
			</div>
		</el-row>
	</el-dialog>
	<!-- 原始数据start -->
	<el-dialog title="原始数据" v-model="yssjDialog" width="70%" top="15vh" custom-class="modal"
		:close-on-click-modal="false" :before-close="yssjDialogClose">
		<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="queryYssj">查询</button>
				</div>
			</div>
		</div>
		
		<el-row type="flex">
			<multiple-y-line-chart-normal
			  height="500px"
			  :list="Powertrend"
			  :yAxises="PowertrendYAxises"
			  :showLegend="true"
			/>
		</el-row>
	</el-dialog>
			<!-- 原始数据end -->
</template>

<script>
	import ComTable from "@/components/coms/table/table.vue";
		import MultipleYLineChartNormal from "../../NewPages/multiple-y-line-chart-normal.vue";
		import Tab from "@/components/coms/tabs/tab.vue";
	export default {
		components: {
			ComTable,MultipleYLineChartNormal,Tab
		},
		data() {
			const that = this;
			return {
				Powertrend: [
				  {
				    title: "",
				    yAxisIndex: 0, // 使用单位
				    value: [],
				  },
				],
				PowertrendYAxises: [
				  {
				    name: "功率",
				    min: 0,
				    max: null,
				    unit: "(万kWh)",
				    position: "left",
				  },
				  {
				    name: "风速",
				    min: 0,
				    max: 25,
				    unit: "(m/s)",
				    position: "right",
				  },
				],
				selectValue: "60",
				timeoptions: [
				  {
				    value: "60",
				    label: "一分钟",
				  },
				  {
				    value: "300",
				    label: "五分钟",
				  },
				  {
				    value: "600",
				    label: "十分钟",
				  },
				  {
				    value: "1800",
				    label: "三十分钟",
				  },
				  {
				    value: "3600",
				    label: "一小时",
				  },
				  {
				    value: "86400",
				    label: "一天",
				  },
				],
				time: [],
				yssjDialog:false,
				point:[],
				pointdes:[],
				
				widgetArr: [{label: '正样本',value: 0},{label: '负样本',value: 1}],
				queryType: false, //没有改变select时，点击查询无效
				pageIndex: 1,
				pageSize: 20,
				BuJian: [{
					label: '部件1',
					value: '1'
				}, {
					label: '部件2',
					value: '2'
				}],
				ChangZhan: [{
					label: '麻黄山风电场',
					value: 'MHS_FDC'
				}],
				fjxh: [{
					label: '类型1',
					value: '1'
				}],
				fjxhArr: [{
					id: "MHS_FDC",
					value: ['UP77', 'UP82', 'UP105']
				}],
				widget: [],
				model: [],
				station: '',
				windturbinename: "",
				widget: "",
				tableModel: "",
				tableTime: "",
				tableSymptom: "",
				tableManufacturer: "",
				stationcn: "",
				tableCategory: "", //隐藏保存部分
				tableRemark: "",
				tableFaultcode: "",
				tableId: "",
				tableSymptomcode: "",
				tableStationen: "",
				isvisiable: false,
				isvisiableType: 1, //新增为1，编辑为2
				checkLength: 0, //对标分析只能选择5个
				tableData: {
					column: [{
							name: "序号",
							field: "index",
							is_light: false,
							width: '50px',
						},
						{
						  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: "windturbineid",
							is_light: false,
							width: '100px',
						},
						{
							name: "部件",
							field: "widget",
							is_light: false,
							width: '100px',
						},
						{
							name: "测点",
							field: "point",
							is_light: false,
							width: '250px',
						},
						{
							name: "测点描述",
							field: "pointdes",
							is_light: false,
							width: '150px',
						},
						{
							name: "风机型号",
							field: "model",
							is_light: false,
							width: '150px',
						},
						{
							name: "场站",
							field: "stationcn",
							is_light: false,
							width: '150px',
						},
						{
							name: "操作",
							is_light: false,
							width: '200px',
							template: () => {
								return (
									"<el-button type='text' style='cursor: pointer;' value='edit'>编辑</el-button>&nbsp" +
									"<el-button type='text' style='cursor: pointer;' value='delete'>删除</el-button>&nbsp" +
									"<el-button type='text' style='cursor: pointer;' value='config'>原始数据</el-button>&nbsp"
								);
							},
							click(e, row) {
								that.onClickOption(e, row);
							},
						},
					],
					data: [{
						index: 1,
						windturbineid: 0,
						widget: "MG01-01",
						point: "0.1000",
						pointdes: "0.1000",
						model: "0.1000",
						stationcn: "0.1000",
						is_light: false,
					}],
				}
			};
		},
		props: {
			data: {
				type: Array
			},
			st:{
				type: String
			}
		},
		methods: {
			getTable() {
				let that = this;
				this.tableLoading = true;
				that.API.requestData({
					method: "GET",
					baseURL: "http://192.168.10.4:9002/",
					subUrl: "benchmarking/wplist",
					data: {
						wpId: that.stationId,
						startTs: that.startDate,
						endTs: that.endDate,
						pageNum: that.pageIndex,
						pageSize: that.pageSize,
					},
					success(res) {
						var dataTab = [];
						if (res.data) {
							res.data.list.forEach(item => {
								dataTab.push({ //表格
									recodedata: that.formatTime(item.recodedata),
									region: item.region,
								})
							})
							that.tableData.data = dataTab;
							that.tableData.total = res.data.total;
						} else {
							that.tableData.data = [];
							that.tableData.total = 0;
						}
						that.tableLoading = false;
					},
				});
			},
			onChangePage(params) {
				this.pageIndex = params.pageIndex;
				this.pageSize = params.pageSize;
				this.getTable();
			},
			startAjax() {
				var that = this;
				// that.time = [new Date((new Date() - 3600 * 1000 * 24 * 30)).formatDate("yyyy-MM-dd"), new Date().formatDate("yyyy-MM-dd")];
				that.time = [new Date((new Date() - 3600 * 1000 * 24 * 360)).formatDate("yyyy-MM-dd"), new Date()
					.formatDate("yyyy-MM-dd")
				];
				that.API.requestData({
					method: "GET",
					baseURL: "http://10.155.32.4:9001/",
					subUrl: "benchmarking/wplist",
					success(res) {
						that.ChangZhan = res.data;
						// that.station = res.data[0].name
						that.station = res.data[1].name
					},
				});

				that.API.requestData({
					method: "GET",
					baseURL: "http://192.168.1.18:9002/",
					subUrl: "basic/widget/condition",
					success(res) {
						let keys = Object.keys(res.data[0]);
						let bujian = [],
							widget = [];
						keys.forEach((ele, index) => {
							bujian.push({
								label: res.data[0].ele,
								value: ele
							})
							widget.push(ele)
						})

						that.widget = widget;
						that.BuJian = bujian;
					},
				});

				that.API.requestData({
					method: "GET",
					baseURL: "http://192.168.1.18:9002/",
					subUrl: "basic/station/all",
					success(res) {
						let fjxhArr = [];
						let model = [],
							fjxh = [];
						res.data.forEach(ele => {
							fjxhArr.push({
								id: ele.id,
								value: ele.model.split("/")
							})
							if (ele.id == "MHS_FDC") {
								model = ele.model.split("/");
								model.forEach(ele => {
									fjxh.push({
										label: ele,
										value: ele
									})
								})
							}
						})
						that.fjxhArr = fjxhArr;
						that.model = model;
						that.fjxh = fjxh;
					},
				});
			},
			query() {
				if (this.queryType) {
					this.list();
				}
			},
			addEdit() {
				this.isvisiableType = 1;
				this.windturbinename = '';
				this.tableModel = '';
				this.tableTime = '';
				this.tableSymptom = '';
				this.tableManufacturer = '';
				this.stationcn = '';

				// this.tableCategory: data[i].category,
				// this.tableRemark: data[i].remark,
				// this.tableFaultcode: data[i].faultcode,
				// this.tableId: data[i].id,
				// this.tableSymptomcode:data[i].Symptomcode,
				// this.tableStationen:data[i].stationen

				this.isvisiable = true;
			},
			onClickOption(e, row) { // 操作按钮
				let that = this;
				if ("delete" == e.target.getAttribute("value")) {
					that
						.$confirm("确认删除此条样本数据？", "提示", {
							confirmButtonText: "删除",
							cancelButtonText: "取消"
						})
						.then((_) => {
							console.log('ok')
							// that.requestDelete(row);
						})
						.catch((_) => {});
				}
				if ("edit" == e.target.getAttribute("value")) {
					that.isvisiableType = 2;
					that.$nextTick(() => {
						let tableTime = row.tableTime.split(" - ");
						that.widget = row.widget;
						that.BuJian.forEach(ele => {
							if (ele.value == row.tableFaultcode) {
								that.windturbinename = ele.label
							}
						})
						that.tableModel = row.tableModel;
						that.tableTime = [Date.parse(new Date(tableTime[0])), Date.parse(new Date(tableTime[1]))];
						that.tableSymptom = row.tableSymptom;
						that.tableManufacturer = row.tableManufacturer;
						that.stationcn = row.stationcn;

						that.tableCategory = row.tableCategory;
						that.tableRemark = row.tableRemark;
						that.tableFaultcode = row.tableFaultcode;
						that.tableId = row.tableId;
						that.tableSymptomcode = row.tableSymptomcode;
						that.tableStationen = row.tableStationen;
					});
					that.isvisiable = true;
				}
				if ("config" == e.target.getAttribute("value")) { //传感点
					that.time = [that.st - (3600 * 1000), that.st];
					that.point =[row.point];
					that.pointdes = [row.pointdes];
					that.requestDetailData(that.point,that.pointdes,that.time,that.selectValue);
					that.yssjDialog=true;
				}
			},
			onClickDialogClose() { // 弹窗右上角关闭按钮
				this.isvisiable = false;
				this.isvisiableType = 1;
			},
			dialogSave() {
				let that = this;
				that.tableTime[0] = that.formatDate(that.tableTime[0].valueOf());
				that.tableTime[1] = that.formatDate(that.tableTime[1].valueOf());
				console.log(that.tableTime)
				that.API.requestData({
					method: "POST",
					baseURL: "http://192.168.1.18:9002/",
					headers: {
						'Content-Type': 'application/json;charset=utf-8',
					},
					subUrl: "case/item/edit",
					body: {
						category: that.tableCategory,
						endtime: that.tableTime[1],
						faultcode: that.tableFaultcode,
						faulttype: that.windturbinename,
						id: that.tableId,
						manufacturer: that.tableManufacturer,
						model: that.tableModel,
						remark: that.tableRemark,
						starttime: that.tableTime[0],
						stationen: that.tableStationen,
						symptom: that.tableSymptom,
						symptomcode: that.tableSymptomcode,
						tag: that.widget == "正样本" ? 0 : 1,
						windturbineid: that.stationcn
					},
					success(res) {
						if (res.code == 200) {
							that.BASE.showMsg({
								type: "success",
								msg: "保存成功",
							});
							that.onClickDialogClose();
							that.list();
						}
					},
				});
			},
			gzCgdClick(data) {
				this.gzCgd = data;
			},
			formatDate(dates) {
				var date = new Date(dates);
				var YY = date.getFullYear() + '-';
				var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
				var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				return YY + MM + DD + " " + hh + mm + ss;
			},
			list(data) {
				console.log(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);
					}
				}
				
				
				// let station = '',
				// 	widget = ''
				// if (typeof that.time[0].valueOf() != 'string') {
				// 	that.time[0] = that.formatDate(that.time[0].valueOf())
				// }
				// if (typeof that.time[1].valueOf() != 'string') {
				// 	that.time[1] = that.formatDate(that.time[1].valueOf())
				// }
				// if (typeof that.station.valueOf() == 'string') {
				// 	that.ChangZhan.forEach(ele => {
				// 		if (ele.name == that.station) {
				// 			station = ele.id
				// 		}
				// 	})
				// }
				// if (typeof that.widget.valueOf() == 'string') {
				// 	that.BuJian.forEach(ele => {
				// 		if (ele.label == that.widget) {
				// 			widget = ele.value
				// 		}
				// 	})
				// }
				// if (that.model.length == 0) {
				// 	that.BASE.showMsg({
				// 		type: "warning",
				// 		msg: "请选择风机型号",
				// 	});
				// 	return
				// }
				// if (that.widget.length == 0) {
				// 	that.BASE.showMsg({
				// 		type: "warning",
				// 		msg: "请选择部件",
				// 	});
				// 	return
				// }
				// that.API.requestData({
				// 	showLoading: true,
				// 	method: "GET",
				// 	baseURL: "http://192.168.1.18:9002/",
				// 	subUrl: "case/fault/all",
				// 	data: {
				// 		widget: widget ? widget : that.widget,
				// 		station: station ? station : that.station,
				// 		model: that.model,
				// 		st: that.time[0].valueOf(),
				// 		et: that.time[1].valueOf()
				// 	},
				// 	success(res) {
				// 		if (res.code == 200) {
				// 			console.log(res)
				// 			that.tableData.data = [];
				// 			if (res.data.length) {
				// 				let data = res.data;
				// 				for (var i = 0; i < data.length; i++) {
				// 					let obj = {
				// 						index: i + 1,
				// 						widget: data[i].tag == 0 ? '正样本' : '负样本',
				// 						windturbinename: data[i].faulttype,
				// 						tableModel: data[i].model,
				// 						tableTime: data[i].starttime + ' - ' + data[i].endtime,
				// 						tableSymptom: data[i].symptom,
				// 						tableManufacturer: data[i].manufacturer,
				// 						stationcn: data[i].windturbineid,

				// 						tableCategory: data[i].category,
				// 						tableRemark: data[i].remark,
				// 						tableFaultcode: data[i].faultcode,
				// 						tableId: data[i].id,
				// 						tableSymptomcode: data[i].symptomcode,
				// 						tableStationen: data[i].stationen
				// 					};
				// 					that.tableData.data.push(obj);
				// 				}
				// 			}
				// 		}
				// 	},
				// });
			},
			back() {
				this.clearDb();
				this.$emit('gzCgdClick', 1);
			},
			switchChange(interval,status) {
			  if(status === 'interval') {
			    this.chooseStatus = false
			    this.selectValue = '60'
			  }else if(status === 'original'){
			    this.chooseStatus = true
			  }
			  // this.requestDetailData(
			  //     this.wpvalue,
			  //     this.startdate,
			  //     this.enddate,
			  //     interval,
			  //     this.wtId,
			  //     this.descName
			  //   );
			},
			requestDetailData(point, pointdes, time,interval) {
			    let that = this;
				let Powertrend = [];
				pointdes.forEach((ele,index)=>{
					Powertrend.push({
						title:ele,
						smooth: true,
						value: [],
					})
				})
				point.forEach((ele,index)=>{
					that.API.requestData({
						method: "GET",
						baseURL: "http://192.168.1.18:9002/",
						subUrl: "point/item",
						data:{
							point:ele,
							startTs:time[0],
							endTs:time[1],
							interval:interval
						},
						success(res) {
							if(res.data){
							  res.data.forEach((cEle) => {
								Powertrend[index].value.push({
								  text: new Date(cEle.ts).formatDate("hh:mm"),
								  value: cEle.doubleValue,
								});
							  });
							  if((point.length - 1) == index){
								that.Powertrend = Powertrend;
							  }
							}
						},
					});
				})
				
			},
			queryYssj(){
				this.requestDetailData(this.point,this.pointdes,[Date.parse(new Date(this.time[0])), Date.parse(new Date(this.time[1]))],this.selectValue);
			},
			dbfx() {
			  var that = this;
			  if (that.point.length <=5) {
				  that.Powertrend = [];
				  that.time = [that.st - (3600 * 1000), that.st];
				  that.requestDetailData(that.point,that.pointdes,[Date.parse(new Date(that.time[0])), Date.parse(new Date(that.time[1]))],that.selectValue);
			    that.yssjDialog = true;
			    that.clearDb();
			  }
			},
			clearDb() {
			  //清空对标状态
			  this.$refs.curRef.clearCheckBox();
			  this.point = [];
			  this.pointdes = [];
			  this.checkLength = 0;
			},
		},
		created() {
			this.list(this.data)
		},
		watch: {
			station(res) {
				let fjxh = [];
				this.fjxhArr.forEach(ele => {
					if (ele.id == res) {
						ele.value.forEach(ele2 => {
							fjxh.push({
								label: ele2,
								value: ele2
							})
						})
						this.model = ele.value;
					}
				})
				this.fjxh = fjxh;
				this.queryType = true;
			},
			widget() {
				this.queryType = true;
			},
			model() {
				this.queryType = true;
			},
			time() {
				this.queryType = true;
			},
		},
	};
</script>

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

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