sis_zhfx/src/views/totalPowerRank/index.vue

<template>
	<div class="draught-fan-list">
		<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="wpIps" clearable placeholder="请选择" popper-class="select"
							@change="renderWprray">
							<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="lable">场站：</div>
					<div class="search-input">
						<el-select v-model="wpId" clearable multiple collapse-tags 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-date-picker v-model="beginDate" 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="endDate" type="date" value-format="YYYY-MM-DD" placeholder="选择日期"
							popper-class="date-select">
						</el-date-picker>
					</div>
				</div>
			</div>
			<div class="query-actions">
				<button class="btn green" @click="search()">搜索</button>
			</div>
		</div>
		<div class="df-table">
			<ComTable height="100vh" :data="tableData"></ComTable>
		</div>
	</div>
</template>

<script>
	import ComTable from "@com/coms/table/table.vue";
	export default {
		// 名称
		name: "cutAnalyse",

		// 使用组件
		components: {
			ComTable,
		},

		// 数据
		data() {
			return {
				isAsc: "asc",
				typeArray: [],
				wpIps: "",
				wpArray: [],
				wpId: [],
				beginDate: new Date(new Date().getTime() - 3600 * 1000 * 24).formatDate("yyyy-MM-dd"),
				endDate: new Date().formatDate("yyyy-MM-dd"),
				dialogShow: false,
				tableData: {
					column: [{
							name: "场站",
							field: "windfarm",
							is_num: false,
							is_light: false,
							sortable: true,
						},
						{
							name: "设备",
							field: "windturbine",
							is_num: false,
							is_light: false,
							sortable: true,
						},
						{
							name: "开始日期",
							field: "beginDate",
							is_num: false,
							is_light: false,
							sortable: true,
						},
						{
							name: "截止日期",
							field: "endDate",
							is_num: false,
							is_light: false,
							sortable: true,
						},
						{
							name: "平均风速/日照强度",
							field: "speed",
							is_num: false,
							is_light: false,
							sortable: true,
						},
						{
							name: "发电量(万kwh)",
							field: "generatingCapacity",
							is_num: false,
							is_light: false,
							sortable: true,
						},
					],
					data: [],
				},
			};
		},

		// 函数
		methods: {
			// 请求服务
			requestData() {
				let that = this;
				that.API.requestData({
					method: "GET",
					subUrl: "powercompare/windfarmAllAjax",
					data: {
						type: that.typeId,
					},
					success(res) {
						that.allWpArray = res.data;
						let fdc = [];
						let gf = [];

						res.data.forEach((ele) => {
							if (ele.id.indexOf("FDC") !== -1) {
								fdc.push(ele.id);
							} else {
								gf.push(ele.id);
							}
						});
						that.typeArray = [{
								id: [].concat(fdc, gf).toString(),
								name: "全部",
							},
							{
								id: fdc.toString(),
								name: "风场",
							},
							{
								id: gf.toString(),
								name: "光伏电站",
							},
						];
						that.wpIps = [].concat(fdc, gf).toString();
						that.renderWprray();
					},
				});
			},

			renderWprray() {
				let wpArray = [];
				if (!this.wpIps) {
					this.wpIps = []
						.concat(
							this.typeArray[1].id.split(","),
							this.typeArray[2].id.split(",")
						)
						.toString();
				}
				this.allWpArray.forEach((ele) => {
					if (this.wpIps.indexOf("FDC") !== -1) {
						if (ele.id.indexOf("FDC") !== -1) {
							wpArray.push(ele);
						}
					} else if (this.wpIps.indexOf("GDC")) {
						if (ele.id.indexOf("GDC") !== -1) {
							wpArray.push(ele);
						}
					} else {
						wpArray.push(ele);
					}
				});
				this.wpId = this.wpIps ? this.wpIps.split(",") : [];
				this.wpArray = wpArray;
				this.getOutputSpeedList();
			},

			getOutputSpeedList() {
				let that = this;
				if (!that.beginDate || !that.endDate) {
					that.BASE.showMsg({
						msg: "日期不可为空",
					});
				} else {
					that.API.requestData({
						method: "GET",
						subUrl: "leaderboard/totalPowerCapacityTopList",
						showLoading: true,
						data: {
							wpIps: that.wpId.length ? that.wpId.toString() : that.wpIps,
							isAsc: that.isAsc,
							beginDate: that.beginDate,
							endDate: that.endDate,
							orderByColumn: "",
						},
						success(res) {
							res.data.forEach((ele) => {
								ele.beginDate = new Date(ele.beginDate).formatDate("yyyy-MM-dd");
								ele.endDate = new Date(ele.beginDate).formatDate("yyyy-MM-dd");
								ele.speed = ele.speed.toFixed(2);
							});
							res.data.sort((a, b) => {
								return b.power - a.power;
							});
							that.tableData.data = res.data;
						},
					});
				}
			},

			search() {
				this.getOutputSpeedList();
			},
		},

		created() {
			this.requestData();
		},

		mounted() {},

		unmounted() {},
	};
</script>

<style lang="less" scoped>
	.draught-fan-list {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;

		.btn-group-tabs {
			display: flex;
			flex-direction: row;

			.photovoltaic {
				margin-left: 1.481vh;
			}
		}

		.df-table {
			border: 0.093vh solid fade(@darkgray, 50%);
			position: relative;
			overflow: hidden;
			flex-grow: 1;
			margin-top: 1.481vh;
			height: 80vh;

			&:before {
				content: "";
				width: 0.37vh;
				height: 0.37vh;
				background: @write;
				position: absolute;
				left: 0.278vh;
				top: 0.278vh;
			}

			tbody {
				height: calc(100vh - 166px);
			}
		}
	}
</style>