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

<template>
	<div class="knowledge-2">
		<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="wpId" clearable placeholder="请选择" popper-class="select">
							<el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
						</el-select>
					</div>
				</div>
				<div class="query-item">
					<div class="lable">预警分类：</div>
					<div class="search-input">
						<el-select v-model="wtId" clearable collapse-tags multiple placeholder="请选择"
							popper-class="select">
							<el-row>
								<div class="query-actions" style="margin-left: 15px;">
									<button class="btn" :class="active?'green':''" @click="checkAll">全选</button>
								</div>
							</el-row>
							<el-option v-for="(item ,index) in wtIdArr" :key="index" :value="item" :label="item" />
						</el-select>
					</div>
				</div>
				<div class="query-item">
					<div class="query-item">
						<div class="lable">日期：</div>
						<div class="search-input">
							<el-date-picker v-model="value1" type="month" placeholder="选择日期"></el-date-picker>
						</div>
					</div>
				</div>
				<div class="query-actions">
					<button class="btn" @click="query">查询</button>
					<button class="btn green" @click="">导入</button>
					<button class="btn" @click="export">导出</button>
				</div>
			</div>
		</div>
		<el-row :type="'flex'" class="content">
			<el-col :span="24">
				<ComTable :data="tableData" height="85vh"></ComTable>
			</el-col>
		</el-row>

		<el-dialog :title="yssjTitle" 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-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" :showLegend="true" />
			</el-row>
		</el-dialog>
	</div>
</template>

<script>
	import ComTable from "@com/coms/table/table.vue";
	import MultipleYLineChartNormal from "../../NewPages/multiple-y-line-chart-normal.vue";
	import BASE from "@tools/basicTool.js";
	export default {
		components: {
			ComTable,
			MultipleYLineChartNormal
		},
		data() {
			let that = this;
			return {
				active: true,
				selectAll: true,
				Powertrend: [],
				selectValue: "60",
				timeoptions: [{
						value: "60",
						label: "一分钟",
					},
					{
						value: "300",
						label: "五分钟",
					},
					{
						value: "600",
						label: "十分钟",
					},
					{
						value: "1800",
						label: "三十分钟",
					},
					{
						value: "3600",
						label: "一小时",
					},
					{
						value: "86400",
						label: "一天",
					},
				],
				yssjDialog: false,
				yssjData:{},
				value1: '',
				month: [],
				wpId: "MHS_FDC",
				wpArray: [],
				wpName: "",
				wtId: [],
				wtIdArr: [],
				wtidData: [],
				wtIdNum: false,
				tableDataArr: {},
				tableData: {
					column: [{
							name: "序号",
							field: "index",
							is_num: false,
							is_light: false,
							width: "60px"
						},
						{
							name: "风机编号",
							field: "fjbh",
							is_num: false,
							is_light: false,
							width: "150px"
						},
						{
							name: "预警描述",
							field: "yjms",
							is_num: false,
							is_light: false,
						},
						{
							name: "预警次数（次）",
							field: "yjcs",
							is_num: false,
							is_light: false,
							sortable: true,
							width: "150px"
						}, {
							name: "预警时长（分钟）",
							field: "yjsc",
							is_num: false,
							is_light: false,
							sortable: true,
							width: "150px"
						}, {
							name: "操作",
							field: "cz",
							is_num: false,
							is_light: false,
							width: "150px",
							template: function() {
								return "<a class='action'>原始数据</a>";
							},
							click: function(event, data) {
								that.yssjTitle = data.yjms;
								that.requestDetailData(that.wpId, data.fjbh, data.yjms, that.month);
							},
						},
					],
					data: [],
				},
			};
		},
		created() {
			this.getWp();
			this.value1 = new Date();
			this.month = [new Date((new Date() - 3600 * 1000 * 24 * 30)), new Date()];
			this.requestSafeList();
		},
		methods: {
			requestDetailData(wpId, fjbh, yjms, time) {
				let that = this;
				that.yssjData = {
					wpId:wpId, 
					fjbh:fjbh, 
					yjms:yjms, 
					time:time
				};
				BASE.showLoading();
				that.API.requestData({
					method: "GET",
					subUrl: "/analysis/detail",
					data: {
						station: wpId,
						startTs: new Date(new Date(time[0]).formatDate("yyyy/MM/dd")).getTime(),
						endTs: new Date(new Date(time[1]).formatDate("yyyy/MM/dd")).getTime(),
						interval: that.selectValue,
						wtId: fjbh,
						name: yjms
					},
					success(res) {
						if (res.data.length != 0) {
							let Powertrend = [];
							res.data.forEach((cEle, index) => {
								Powertrend.push({
									title: cEle.name,
									smooth: true,
									value: [],
								})
								cEle.data.forEach((rEle) => {
									Powertrend[index].value.push({
										text: new Date(rEle.ts).formatDate("hh:mm"),
										value: rEle.doubleValue
									});
								});
							});
							if (Powertrend.length != 0) {
								that.Powertrend = Powertrend;
								BASE.closeLoading();
								that.yssjDialog = true;
							}
						} else {
							BASE.closeLoading();
							that.BASE.showMsg({
								msg: "暂无数据"
							});
						}
					},
				});
			},
			queryYssj() {
				let data = this.yssjData;
				this.requestDetailData(data.wpId, data.fjbh, data.yjms, data.time)
			},
			switchChange(interval, status) {
				if (status === 'interval') {
					this.chooseStatus = false
					this.selectValue = '60'
				} else if (status === 'original') {
					this.chooseStatus = true
				}
			},
			formatDate(date) {
				var date = new Date(date);
				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());
				return YY + MM + DD;
			},
			// 获取风场
			getWp() {
				let that = this;
				that.API.requestData({
					baseURL: "http://10.155.32.4:8082/",
					subUrl: "powercompare/windfarmAjax",
					success(res) {
						that.wpArray = res.data;
						that.wpId = res.data[0].id;
						that.wpName = res.data[0].wpName;
					}
				});
			},
			// 获取停机事件
			requestSafeList(wpId, wtIdData) {
				let that = this;
				if (wtIdData) {
					that.tableData.data = wtIdData;
					that.wtIdData = [];
					return;
				}
				if (wpId) {
					that.wpId = wpId;
				}
				that.month[0] = that.formatDate(that.month[0].valueOf())
				that.month[1] = that.formatDate(that.month[1].valueOf())
				let data = {
					stationid: that.wpId,
					startdate: that.month[0].valueOf(),
					enddate: that.month[1].valueOf(),
				};
				that.API.requestData({
					showLoading: true,
					baseURL: "http://192.168.1.18:8075/",
					subUrl: "alarm/count/query/new",
					data,
					success(res) {
						if (res.code == 200) {
							that.tableData.data = [];
							if (res.data.length) {
								let data = res.data;
								let tabData = [];
								let index = 1;
								let wtIdArr = [];
								data.forEach((ele, idx) => {
									let key = Object.keys(ele);
									ele[key].forEach((ele2, idx2) => {
										if (ele2.time != 0 && ele2.count >= 10) { //过滤条件

											wtIdArr.push(ele2.alertText);

											let obj = {
												index: index++,
												fjbh: ele2.windturbineId,
												yjms: ele2.alertText,
												yjcs: ele2.count,
												yjsc: ele2.time,
											};
											tabData.push(obj);
										}
									})
								})
								let set = new Set();
								wtIdArr.forEach(item => set.add(item));
								that.wtIdArr = Array.from(set);
								that.wtId = that.wtIdArr;
								that.tableData.data = tabData;
								that.tableDataArr = {
									column: that.tableData.column,
									data: tabData
								};
							}
						}
					},
				});
			},
			query() {
				this.requestSafeList(this.wpId, this.wtidData);
			},
			checkAll() {
				this.selectAll = !this.selectAll
				if (this.selectAll) {
					this.wtId = this.wtIdArr;
					this.active = true;
				} else {
					this.active = false;
					this.wtId = [];
				}
			},
			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, '预警分析'); // 最后一个是表名字
			},
		},
		watch: {
			wpId() {
				this.wtidData = undefined;
				this.wtIdNum = false;
			},
			wtId(e) {
				if (this.wtIdNum) {
					let data = [];
					let index = 1;
					let tableDataArr = this.tableDataArr;
					tableDataArr.data.forEach(ele => {
						e.forEach(ele2 => {
							if (ele.yjms == ele2) {
								let obj = {
									index: index++,
									fjbh: ele.fjbh,
									yjms: ele.yjms,
									yjcs: ele.yjcs,
									yjsc: ele.yjsc,
								};
								data.push(obj)
							}
						})
					})
					if (data) {
						this.wtidData = data;
					}
				}
				this.wtIdNum = true;
			},
			value1(e) {
				this.month = [new Date((e - 3600 * 1000 * 24 * 30)), e];
			}
		}
	};
</script>

<style lang="less" scope>
	@titleGray: #9ca5a8;
	@rowGray: #606769;
	@darkBack: #536268;

	.knowledge-2 {
		.el-select {
			width: 200px;
		}

		.action {
			text-decoration: underline;
			color: @green;
			cursor: pointer;
		}

		.el-input {
			width: 200px;
		}
	}
</style>
<style type="text/css">
	.el-month-table td.today .cell {
		color: #05bb4c;
	}

	.el-month-table td.end-date .cell,
	.el-month-table td.start-date .cell {
		background-color: #05bb4c;
	}

	.el-month-table td.in-range div,
	.el-month-table td.in-range div:hover {
		background: rgba(96, 103, 105, 0.4);
	}

	.el-date-editor.el-date-editor--monthrange {
		border: 1px solid rgba(96, 103, 105, 0.2);
		height: 33px;
		padding: 0 8px;
		width: 369px;
	}

	.el-date-editor.el-date-editor--monthrange .el-range-separator {
		color: #B3BDC0;
		line-height: 33px;
	}

	.el-date-editor.el-date-editor--monthrange .el-range-input {
		flex-basis: 145px;
		line-height: 33px;
		background: transparent;
		color: #B3BDC0;
	}

	.el-picker-panel.el-date-picker {
		background: transparent;
		color: #B3BDC0;
	}

	.el-picker-panel.el-date-picker td.current .cell {
		background-color: #05bb4c;
		color: white;
	}

	.el-picker-panel.el-date-picker td .cell:hover {
		color: #05bb4c;
	}

	.el-picker-panel.el-date-picker td.current div,
	.el-picker-panel.el-date-picker td.current div:hover {
		background: rgba(96, 103, 105, 0.4);
		border-radius: 50px;
	}
</style>