sis_zhfx/src/views/warn/xdgl.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="query-item">
						<div class="lable">开始日期：</div>
						<div class="search-input">
							<el-date-picker v-model="value1" @change="BeginChange(value1)" type="date"
								value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
							</el-date-picker>
						</div>
					</div>
					<div class="query-item">
						<div class="lable">结束日期：</div>
						<div class="search-input">
							<el-date-picker v-model="value2" @change="EndChange(value2)" type="date"
								value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
							</el-date-picker>
							<div class="unit svg-icon svg-icon-gray">
								<svg-icon :svgid="''" />
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="query-actions" style="margin-right: 1500px">
				<button class="btn green" @click="onClickSearch">查询</button>
				<button class="btn green" @click="exportCsv">导出</button>
			</div>
		</div>
		<div>
			<ComTable :data="tableData" height="85vh"></ComTable>
		</div>
		<el-dialog title="限电事件" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal"
			:close-on-click-modal="false">
			<table class="com-table tabLog">
				<tr>
					<td class="light"> 限电原因：</td>
					<td>{{main.description}}</td>
					<td class="light"> 限电类型：</td>
					<td>{{main.stopTypeId}}</td>
				</tr>
				<tr>
					<td class="light"> 限电指令：</td>
					<td>{{main.brownoutsdirective}}</td>
					<td class="light"> 当时风速(m/s)：</td>
					<td>{{main.windspeed}}</td>
				</tr>
				<tr>
					<td class="light"> 限电负荷(MW)：</td>
					<td>{{main.limitload}}</td>
					<td class="light"> 当时负荷(MW)：</td>
					<td>{{main.thisload}}</td>
				</tr>
				<tr>
					<td class="light"> 限电时刻：</td>
					<td>{{new Date(main.stoptime).formatDate("yyyy-MM-dd hh:mm:ss")}}</td>
					<td class="light"> 恢复时刻：</td>
					<td>{{new Date(main.starttime).formatDate("yyyy-MM-dd hh:mm:ss")}}</td>
				</tr>
				<tr>
					<td class="light"> 限电损失电量(KWh)：</td>
					<td colspan="3">{{main.losspower}}</td>
				</tr>
			</table>
			<div class="header">
				<span class="herder-info">
					限电事件记录
				</span>
			</div>
			<ComTable :data="tableList" height="40vh"></ComTable>
		</el-dialog>
	</div>
</template>

<script>
	import ComTable from "@com/coms/table/table.vue";
	import Papa from 'papaparse';
	export default {
		components: {
			ComTable,Papa
		},
		data() {
			const that = this;
			return {
				value1: "",
				value2: "",
				wpId: "",
				wpArray: [],
				dialogVisible: false,
				main:[],
				tableList:{
					column: [{
							name: "编号",
							field: "index",
							width: "50px",
							is_num: true,
							is_light: false,
						},
						{
							name: "风机",
							field: "windturbineid",
							is_num: false,
							is_light: false,
						},
						{
							name: "限电时刻",
							field: "stopTime",
							is_num: false,
							is_light: false,
						},
						{
							name: "恢复时刻",
							field: "startTime",
							width: "150px",
							is_num: false,
							is_light: false,
						},
						{
							name: "停机小时数",
							field: "stophours",
							width: "150px",
							is_num: false,
							is_light: false,
						},
						{
							name: "损失电量(KWh)",
							field: "losspower",
							width: "150px",
							is_num: false,
							is_light: false,
						},
					],
					data: [],
				},
				tableData: {
					column: [{
							name: "编号",
							field: "index",
							width: "50px",
							is_num: true,
							is_light: false,
						},
						{
							name: "限电时刻",
							field: "stopTime",
							width: "150px",
							is_num: false,
							is_light: false,
						},
						{
							name: "恢复时刻",
							field: "startTime",
							width: "150px",
							is_num: false,
							is_light: false,
						},
						{
							name: "停机类型",
							field: "stopTypeId",
							width: "150px",
							is_num: false,
							is_light: false,
						},
						{
							name: "限电时间",
							field: "stopHours",
							width: "150px",
							is_num: false,
							is_light: false,
						},
						{
							name: "损失电量(kWh)",
							field: "lossPower",
							width: "150px",
							is_num: false,
							is_light: false,
						},
						{
							name: "限电原因",
							field: "description",
							width: "200px",
							is_num: false,
							is_light: false,
						},
						{
							name: "关联风机",
							field: "wts",
							is_num: false,
							is_light: false,
						},
						{
							name: "操作",
							field: "cz",
							width: "50px",
							is_num: false,
							is_light: false,
							template: function() {
								return "<a class='action'>详情</a>";
							},
							click: function(event, data) {
								that.API.requestData({
									method: "POST",
									subUrl: "/brownouts/getBrownouts",
									data: {
										mainId: data.id
									},
									success(res) {
										if (res.code == 200) {
											that.main = res.data.main;
											
											that.tableList.data = [];
											if (res.data.list.length) {
												let data = res.data.list;
												for (var i = 0; i < data.length; i++) {
													let obj = {
														index: i + 1,
														windturbineid:data[i].windturbineid,
														stopTime: new Date(data[i].stoptime).formatDate("yyyy-MM-dd hh:mm:ss"),
														startTime: new Date(data[i].starttime).formatDate("yyyy-MM-dd hh:mm:ss"),
														stophours: data[i].stophours,
														losspower: data[i].losspower
													};
													that.tableList.data.push(obj);
													that.dialogVisible = true;
												}
											}
										}
									},
								});
							}
						}
					],
					data: [],
				},
			};
		},
		created() {
			// this.requestSafeList();
			this.value1 = new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd");
			this.value2 = this.getTime(2);
			this.getWp();
			this.requestSafeList();
		},
		methods: {
			exportCsv() {
				var csv = Papa.unparse(this.tableData);
				//定义文件内容，类型必须为Blob 否则createObjectURL会报错
				let content = new Blob([csv]);
				//生成url对象
				let urlObject = window.URL || window.webkitURL || window;
				let url = urlObject.createObjectURL(content);
				//生成<a></a>DOM元素
				let el = document.createElement("a");
				//链接赋值
				el.href = url;
				el.download = "限电事件.cvs";
				//必须点击否则不会下载
				el.click();
				//移除链接释放资源
				urlObject.revokeObjectURL(url);
			},
			getTime(val) { //时间戳处理，val=1是默认开始时间（当前月第一天），val=2是默认结束时间（今天）
				var date = new Date();
				var year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate();
				month >= 1 && month <= 9 ? (month = '0' + month) : '';
				day >= 0 && day <= 9 ? (day = '0' + day) : '';
				var begin = year + '-' + month + '-01';
				var end = year + '-' + month + '-' + day;
				if (val == 1) {
					return begin;
				} else if (val == 2) {
					return end;
				}
			},
			// 获取风场
			getWp(reGetWp) {
				let that = this;
				that.API.requestData({
					baseURL: "http://10.155.32.4:9001",
					subUrl: "benchmarking/wplist",
					success(res) {
						that.wpArray = res.data;
						that.wpId = res.data[0].id;
						that.wpName = res.data[0].wpId;
						// that.getWt(that.wpId, reGetWp);
					}
				});
			},


			BeginChange(vl) {
				this.value1 = vl;
			},
			EndChange(vl) {
				this.value2 = vl;
			},
			typeChange(vl) {
				this.type = vl;
			},
			// 搜索按钮
			onClickSearch() {
				this.requestSafeList();
			},
			// 获取限电事间
			requestSafeList() {
				let that = this;

				let data = {
					tablepar: {
						pageNum: 1,
						pageSize: 1000,
					},
					beginDate: that.value1,
					endDate: that.value2,
					wpId: that.wpId,
				};

				this.API.requestData({
					method: "POST",
					subUrl: "/brownouts/getBrownoutsList",
					data,
					success(res) {
						if (res.code == 200) {
							that.tableData.data = [];
							if (res.data.list.length) {
								let data = res.data.list;
								for (var i = 0; i < data.length; i++) {
									let obj = {
										index: i + 1,
										id: data[i].id,
										stopTime: new Date(data[i].stopTime).formatDate("yyyy-MM-dd hh:mm:ss"),
										startTime: new Date(data[i].startTime).formatDate("yyyy-MM-dd hh:mm:ss"),
										stopTypeId: data[i].stopTypeId,
										stopHours: data[i].stopHours,
										lossPower: data[i].lossPower,
										description: data[i].description,
										wts: data[i].wts,
									};
									that.tableData.data.push(obj);
								}
							}
						}
					},
				});
			},
		},
	};
</script>

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

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

		.el-input {
			width: 200px;
		}

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

		.com-table.tabLog {
			tr {
				height: 40px;
			}

			.light {
				width: 10.5rem;
				color: #05bb4c;
			}
		}
		.header {
			display: flex;
			width: 100%;
			height: 40px;
			line-height: 40px;
			background: fade(@gray, 60);
			color: @white;
		
			.herder-info {
				flex: 1 0 25%;
				font-size: @fontsize-s;
				padding-left: 1rem;
				&:last-child {
					flex: 1 0 50%;
				}
			}
		}
	}
</style>