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

<template>
	<el-scrollbar height="92vh" v-if="gzCgd == 1">
		<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">
							<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">
					<div class="lable">样本类型：</div>
					<div class="search-input">
						<el-select v-model="tableTag" placeholder="请选择样本" popper-class="select">
							<el-option v-for="item in tableTagArr" :key="item.value" :value="item.value" :label="item.label">
							</el-option>
						</el-select>
					</div>
				</div>
				<div class="query-item">
					<div class="lable">故障分类：</div>
					<div class="search-input">
						<el-select v-model="widget" multiple collapse-tags clearable placeholder="请选择"
							popper-class="select">
							<el-option v-for="item in BuJian" :key="item.value" :value="item.value" :label="item.label">
							</el-option>
						</el-select>
					</div>
				</div>
				<div class="query-item">
					<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">
					<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="query()">查询</button>
					<button class="btn" @click="addEdit()">新增</button>
				</div>
			</div>
		</div>
		<el-row :type="'flex'" class="content">
			<el-col :span="24">
				<ComTable :data="tableData" :pageSize="pageSize" @onPagging="onChangePage" height="84vh"
					v-loading="tableLoading" 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="tableTag" placeholder="请选择样本" popper-class="select" class="w">
						<el-option v-for="item in tableTagArr" :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="tableFaulttype" 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="tableWindturbineid" :value="tableWindturbineid">
					</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>
	</el-scrollbar>
	<el-scrollbar height="92vh" v-if="gzCgd == 2">
		<Point :data="gzCgdData" :st='st' @gzCgdClick="gzCgdClick" />
	</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 {
				tableTagArr: [{
						label: '正样本',
						value: 0
					},
					{
						label: '负样本',
						value: 1
					}
				],
				queryType: false, //没有改变select时，点击查询无效
				pageIndex: 1,
				pageSize: 20,
				gzCgd: 1, //传感点组件隐藏或显示
				gzCgdData: [], //传感点参数
				st:'',
				BuJian: [],
				ChangZhan: [],
				fjxh: [],
				fjxhArr: [],
				widget: [],
				model: [],
				time: [],
				station: '',
				tableFaulttype: "",
				tableTag: "",
				tableModel: "",
				tableTime: "",
				tableSymptom: "",
				tableManufacturer: "",
				tableWindturbineid: "",
				tableCategory: "", //隐藏保存部分
				tableRemark: "",
				tableFaultcode: "",
				tableId: "",
				tableSymptomcode: "",
				tableStationen: "",
				isvisiable: false,
				isvisiableType: 1, //新增为1，编辑为2
				tableData: {
					column: [{
							name: "序号",
							field: "index",
							is_light: false,
							width: '50px',
						},
						{
							name: "样本类型",
							field: "tableTag",
							is_light: false,
							width: '100px',
						},
						{
							name: "风机编号",
							field: "tableWindturbineid",
							is_light: false,
							width: '150px',
						},
						{
							name: "故障分类",
							field: "tableFaulttype",
							is_light: false,
							width: '150px',
						},
						{
							name: "故障原因",
							field: "tableSymptom",
							is_light: false,
							width: '350px',
						},
						{
							name: "时间",
							field: "tableTime",
							is_light: false,
							width: '350px',
						},
						{
							name: "风机厂商",
							field: "tableManufacturer",
							is_light: false,
							width: '150px',
						},
						{
							name: "风机型号",
							field: "tableModel",
							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: [],
				}
			};
		},
		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.tableFaulttype = '';
				this.tableModel = '';
				this.tableTime = '';
				this.tableSymptom = '';
				this.tableManufacturer = '';
				this.tableWindturbineid = '';

				// 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.tableTag = row.tableTag;
						that.BuJian.forEach(ele => {
							if (ele.value == row.tableFaultcode) {
								that.tableFaulttype = 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.tableWindturbineid = row.tableWindturbineid;

						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.API.requestData({
						method: "GET",
						baseURL: "http://192.168.1.18:9002/",
						subUrl: "point/all",
						data: {
							wtId: row.tableWindturbineid,
							widget: row.tableFaultcode
						},
						success(res) {
							console.log(res)
							if (res.code == 200) {
								that.gzCgdData = res.data;
								that.st = Date.parse(new Date(row.tableTime.split(" - ")[0]));
								that.gzCgd = 2;
							}
						},
					});
				}
			},
			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.tableFaulttype,
						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.tableTag == "正样本" ? 0 : 1,
						windturbineid: that.tableWindturbineid
					},
					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() {
				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.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,
										tableTag: data[i].tag == 0 ? '正样本' : '负样本',
										tableFaulttype: data[i].faulttype,
										tableModel: data[i].model,
										tableTime: data[i].starttime + ' - ' + data[i].endtime,
										tableSymptom: data[i].symptom,
										tableManufacturer: data[i].manufacturer,
										tableWindturbineid: 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);
								}
							}
						}
					},
				});
			},
		},
		created() {
			let that = this;
			that.startAjax();
			setTimeout(function() {
				that.list()
			}, 500)
		},
		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%;
	}

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