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

<template>
	<el-scrollbar height="92vh">
		<div class="query mg-b-8">
			<div class="query-items">
				<div class="query-item" style="width: 200px;">
					<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 ChangZhan" :key="item.id" :value="item.id" :label="item.name"> </el-option>
						</el-select>
					</div>
				</div>
				<div class="query-item" style="width: 230px;">
					<div class="lable">故障类型：</div>
					<div class="search-input">
						<el-select v-model="widget" multiple collapse-tags clearable placeholder="请选择" popper-class="select">
							<el-option @click="checkAll" :class="active?'green':''">
								全选
							</el-option>
							<el-option v-for="item in widgetArr" :key="item.value" :value="item.value" :label="item.label">
							</el-option>
						</el-select>
					</div>
				</div>
				<div class="query-item" style="width: 230px;">
					<div class="lable">风机型号：</div>
					<div class="search-input">
						<el-select v-model="model" multiple collapse-tags clearable placeholder="请选择" popper-class="select">
							<el-option v-for="item in fjxh" :key="item.value" :value="item.value" :label="item.label">
							</el-option>
						</el-select>
					</div>
				</div>
				<div class="query-item" style="width: 180px;">
					<div class="lable">模型：</div>
					<div class="search-input">
						<el-select v-model="mx" collapse-tags clearable placeholder="请选择" popper-class="select">
							<el-option key="1" value="list" label="原数据"></el-option>
							<el-option key="2" value="alg" label="DB-SCAN"></el-option>
						</el-select>
					</div>
				</div>
				<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-actions">
					<button class="btn" @click="list">查询</button>
					<button class="btn" @click="query()">导入</button>
					<button class="btn" @click="export">导出</button>
				</div>
			</div>
		</div>
		<el-row :type="'flex'" class="content">
			<ComTable :data="tableData" :pageSize="pageSize" @onPagging="onChangePage" height="84vh"
				v-loading="tableLoading" element-loading-text="拼命加载中"
				element-loading-background="rgba(0, 0, 0, 0.8)" v-if="mx=='list'"></ComTable>
			<ComTable :data="tableData2" :pageSize="pageSize" @onPagging="onChangePage" height="84vh"
				v-loading="tableLoading" element-loading-text="拼命加载中"
				element-loading-background="rgba(0, 0, 0, 0.8)" v-else></ComTable>	
		</el-row>
		<el-dialog title="原始数据对比" v-model="gzCgd" width="80%" top="5vh" custom-class="modal" :close-on-click-modal="false" :before-close="onClickDialogClose" class="isvisiable">
			<Point :data="gzCgdData" :st='st' v-if='gzCgd'/>
		</el-dialog>
	</el-scrollbar>
</template>

<script>
	import ComTable from "@/components/coms/table/table.vue";
	import Point from "./point.vue";
	export default {
		components: {
			ComTable,
			Point,
		},
		data() {
			const that = this;
			return {
				active: true,
				selectAll: true,
				
				pageIndex: 1,
				pageSize: 20,
				gzCgd: false, //传感点组件隐藏或显示
				gzCgdData: [], //传感点参数
				st:'',
				widgetArr: [],
				ChangZhan: [],
				fjxh: [],
				fjxhArr: [],
				widget: [],
				model: [],
				mx:'list',
				time: [],
				station: '',
				tableData: {
					column: [{
							name: "序号",
							field: "index",
							is_light: false,
							width: '50px',
						},
						{
							name: "风机编号",
							field: "wtId",
							is_light: false,
							width: '150px',
						},
						{
							name: "故障类型",
							field: "tableTag",
							is_light: false,
							width: '150px',
						},
						{
							name: "故障现象",
							field: "symptom",
							is_light: false,
							width: '300px',
						},
						{
							name: "时间",
							field: "tableTime",
							is_light: false,
							width: '350px',
						},
						{
							name: "风机型号",
							field: "tableModel",
							is_light: false,
							width: '150px',
						},
						{
							name: "厂商",
							field: "tableManufacturer",
							is_light: false,
							width: '150px',
						},
						{
							name: "操作",
							field: "cz",
							is_light: false,
							width: '200px',
							template: () => {
								return (
									"<el-button type='text' style='cursor: pointer;' value='config'>传感点</el-button>&nbsp"
								);
							},
							click(e, row) {
								that.onClickOption(e, row);
							},
						},
					],
					data: [],
				},
				tableData2: {
					column: [{
							name: "序号",
							field: "index",
							is_light: false,
							width: '50px',
						},
						{
							name: "风机编号",
							field: "wtId",
							is_light: false,
							width: '200px',
						},
						{
							name: "故障类型",
							field: "faulttype",
							is_light: false,
							width: '200px',
						},
						{
							name: "故障时间",
							field: "faultTime",
							is_light: false,
							width: '200px',
						},
						{
							name: "风机型号",
							field: "modelId",
							is_light: false,
							width: '200px',
						},
						{
							name: "操作",
							field: "cz",
							is_light: false,
							width: '200px',
							template: () => {
								return (
									"<el-button type='text' style='cursor: pointer;' value='config'>传感点</el-button>&nbsp"
								);
							},
							click(e, row) {
								that.onClickOption(e, row);
							},
						},
					],
					data: [],
				},
			};
		},
		methods: {
			stationChange(){
				let fjxh = [];
				this.fjxhArr.forEach(ele => {
					if (ele.id == this.station) {
						ele.value.forEach(ele2 => {
							fjxh.push({
								label: ele2,
								value: ele2
							})
						})
						this.model = ele.value;
					}
				})
				this.fjxh = fjxh;
			},
			checkAll() {
				this.selectAll = !this.selectAll
				if (this.selectAll) {
					let widget = [];
					this.widgetArr.forEach(ele=>{
						widget.push(ele.value)
					})
					this.widget = widget;
					this.active = true;
				} else {
					this.active = false;
					this.widget = [];
				}
			},
			onChangePage(params) {
				this.pageIndex = params.pageIndex;
				this.pageSize = params.pageSize;
				this.list();
			},
			async startAjax() {
				var that = this;
				that.time = [new Date((new Date() - 3600 * 1000 * 24 * 360)).formatDate("yyyy-MM-dd hh:mm:ss"), new Date()
					.formatDate("yyyy-MM-dd hh:mm:ss")
				];

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

				await that.API.requestData({
					method: "GET",
					baseURL: "http://192.168.1.18:9002/",
					subUrl: "basic/station/all",
					success(res) {
						that.ChangZhan = res.data;
						that.station = res.data[1].name
						let fjxhArr = [];
						let model = [],
							fjxh = [];
						res.data.forEach(ele => {
							fjxhArr.push({
								id: ele.id,
								value: ele.model.split("/")
							})
							if (ele.id == "NSS_FDC") {
								model = ["UP82"];
								fjxh.push({
									label: "UP82",
									value: "UP82"
								})
							}
						})
						that.fjxhArr = fjxhArr;
						that.model = model;
						that.fjxh = fjxh;
					},
				});
				that.list()
			},
			onClickOption(e, row) { // 操作按钮
				let that = this;
				if ("config" == e.target.getAttribute("value")) { //传感点
					that.API.requestData({
						method: "GET",
						baseURL: "http://192.168.1.18:9002/",
						subUrl: "point/list",
						data: {
							wtId: row.wtId,
							widget: row.widget
						},
						success(res) {
							if (res.code == 200) {
								if(res.data.length){
									that.gzCgdData = res.data;
									if(that.mx == 'list'){
										that.st = Date.parse(new Date(row.tableTime.split(" - ")[0]));
									}else{
										that.st = Date.parse(new Date(row.faultTime));
									}
									that.gzCgd = true;
								}else{
									that.BASE.showMsg({
										msg: "暂无数据"
									});
								}
							}
						},
					});
				}
			},
			onClickDialogClose() { // 弹窗右上角关闭按钮
				this.gzCgd = false;
			},
			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() {
				var that = this;
				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.widgetArr.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.tableData.data = [];
				that.tableData2.data = [];
				that.API.requestData({
					showLoading: true,
					method: "GET",
					baseURL: "http://192.168.10.4:9002/",
					subUrl: "case/fault/list",
					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) {
							if (res.data.length) {
								let data = res.data;
								if(that.mx == 'list'){
									let k = 0;
									for (var i = 0; i < data.length; i++) {
											if(data[i].endtime != undefined){
												k ++;
												let obj = {
													index: k,
													tableTag: data[i].faulttype,
													symptom: data[i].symptom,
													tableModel: data[i].model,
													tableTime: data[i].starttime + ' - ' + data[i].endtime,
													tableManufacturer: data[i].manufacturer,
													wtId: data[i].windturbineid,
													widget:data[i].faultcode
												};
												that.tableData.data.push(obj);
											}
										}
								}else{
									that.tableData2.data = [];
									let k = 0;
									for (var i = 0; i < data.length; i++) {
										if(data[i].endtime == undefined){
											k ++;
											let obj = {
												index: k,
												wtId: data[i].windturbineid,
												faulttype: data[i].faulttype,
												modelId: data[i].model,
												faultTime: data[i].starttime,
												widget:data[i].faultcode
											};
											that.tableData2.data.push(obj);
										}
									}
								}
							}
						}
					},
				});
			},
			formatJson(filterVal, jsonData) {
				return jsonData.map(v => filterVal.map(j => v[j]));
			},
			export() {
				let that = this;
				const {export_json_to_excel} = require('@tools/excel/Export2Excel.js'); // 注意这个Export2Excel路径      
				let tHeader = []; // 上面设置Excel的表格第一行的标题       
				let filterVal = []; // 上面的index、nickName、name是tableData里对象的属性key值
			
				that.tableData.column.forEach(ele => {
					if(ele.field != 'cz'){
						tHeader.push(ele.name);
						filterVal.push(ele.field);
					}
				});
				const data = that.formatJson(filterVal, that.tableData.data);
				export_json_to_excel(tHeader, data, '故障样本库'); // 最后一个是表名字
			},
		},
		created() {
			this.startAjax();
		},
		watch: {
			mx(){
				this.list();
			}
		},
	};
</script>

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

	.el-select.w {
		width: 100%;
	}

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