sis_zhfx/src/views/malfunctionRecall/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" @change=" (wpId) => { getWt(wpId, true); } ">
							<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 placeholder="请选择" popper-class="select">
							<el-option v-for="item in wtArray" :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="type"
              clearable
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in typeArray"
                :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>
			</div>
		</div>
		<div>
			<ComTable :data="tableData" height="85vh"></ComTable>
		</div>
		<div>
			<el-dialog title="故障诊断" v-model="dialogVisible" width="1400px" top="5vh" custom-class="modal hide-header"
				:close-on-click-modal="false" :before-close="onClickDialogClose">
				<fault-diagnosis :data="rowitem" />
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import ComTable from "@com/coms/table/table.vue";
	import FaultDiagnosis from "./components/fault-diagnosis.vue";

	export default {
		components: {
			ComTable,
			FaultDiagnosis
		},
		data() {
			const that = this;
			return {
				value1: "",
				value2: "",
				wpId: "",
				wpArray: [],
				rowitem: "",
				wpName: "",
				wtId: "",
				type: "2",
				dialogVisible: false,
				tableData: {
					column: [{
							name: "场站",
							field: "wpName",
							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",
							is_num: false,
							is_light: false,
						},
						{
							name: "停机小时数(h)",
							field: "stopHours",
							is_num: false,
							is_light: false,
						},
						{
							name: "停机类型",
							field: "warnDesc",
							is_num: false,
							is_light: false,
						},
						{
							name: "损失电量(kWh)",
							field: "lossPower",
							is_num: false,
							is_light: false,
						},
						{
							name: "操作",
							field: "",
							is_num: false,
							is_light: false,
							template() {
								return "<el-button type='text' style='cursor: pointer;'>回溯</el-button>";
							},
							click(e, row) {
								that.onClickOption(row);
							},
						},
					],
					data: [],
				},
			};
		},
		created() {
			this.value1 = new Date(new Date().getTime() - 3600 * 1000 * 24).formatDate(
				"yyyy-MM-dd"
			);
			this.value2 = this.getTime(2);
			this.getWp();
		},
		methods: {
			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].wpName;
						that.getWt(that.wpId, reGetWp);
						that.requestSafeList();
					},
				});
			},

			// 获取风机
			getWt(wpid, reGetWp) {
				let that = this;
				if (that.wpId) {
					that.API.requestData({
						method: "GET",
						baseURL: "http://10.155.32.4:9001",
						subUrl: "benchmarking/wtList",
						data: {
							wpid,
						},
						success(res) {
							that.wtArray = res.data;
							// that.wtId = res.data[0].id;
						},
					});
				}
			},
			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,
				};

				if (that.wtId != "") data.wtId = that.wtId;
				if (that.type != "") data.type = that.type;

				this.API.requestData({
					method: "POST",
					subUrl: "/event/getShutdownevent",
					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 = {
										wpName: data[i].wpName,
										windTurbineId: data[i].windTurbineId,
										stopTime: new Date(data[i].stopTime).formatDate(
											"yyyy-MM-dd hh:mm:ss"
										),

										stopHours: data[i].stopHours,
										statusName: data[i].statusName,
										warnDesc: data[i].warnDesc,
										lossPower: data[i].lossPower,
										handleWay: data[i].handleWay,
									};
									if (data[i].startTime)
										obj.startTime = new Date(data[i].startTime).formatDate(
											"yyyy-MM-dd hh:mm:ss"
										);
									that.tableData.data.push(obj);
								}
							}
						}
					},
				});
			},
			// 回放按钮
			onClickOption(row) {
				this.rowitem = row
				this.dialogVisible = true;
			},
			// 关闭弹窗
			onClickDialogClose() {
				this.dialogVisible = false;
			},
		},
	};
</script>

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

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

		.el-input {
			width: 200px;
		}
	}
</style>