hb_sis_zhfx/src/views/Decision/Decision1Mx.vue

<template>
	<div class="decision-page-1">
		<!-- 查询样式统一处理 样式在 assets/styles/form.less 文件中 -->
		<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="value1" @change="ChangZhanChange(value1)" clearable 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="value2" @change="XiangMuChange(value2)" multiple placeholder="请选择"
							popper-class="select">
							<el-option v-for="item in XiangMu" :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="value3" @change="XianLuChange(value3)" multiple placeholder="请选择"
							popper-class="select">
							<el-option v-for="item in XianLu" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</div>
				</div>
				<div class="query-item">
					<div class="lable">开始日期：</div>
					<div class="search-input">
						<el-date-picker v-model="value4" @change="BeginChange(value4)" 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="value5" @change="EndChange(value5)" 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 class="query-actions">
				<button class="btn" @click="mxClick()">搜索</button>
				<button class="btn green" >明细信息</button>
				<button class="btn" @click="exportExcel()">导出</button>
			</div>
		</div>
		<div class="actions mg-b-8">
			<button class="btn" :class="TypeClass==1?'green':''" @click="TypeClick(1)">风场</button>
			<button class="btn" :class="TypeClass==2?'green':''" @click="TypeClick(2)">项目</button>
			<button class="btn" :class="TypeClass==3?'green':''" @click="TypeClick(3)">集电线路</button>
		</div>
		<div class="contentMx">
			<div class="activeMx">
				<el-row :type="'flex'" class="content">
					<el-col :span="10" class="pd-r-8">
						<toolbar-panel title="风机绩效榜明细" :showLine="false">
							<bar-line-chart :height="'calc(100vh - 250px)'" :bardata="bardata" :lineData="lineData"
								:color="barColor" lineName="理论发电量" />
						</toolbar-panel>
					</el-col>
					<el-col :span="14" class="pd-l-8">
						<panel :title="'项目列表'" :showLine="false">
							<div class="project-table">
								<Table :data="tableData">
									<template v-slot:tr v-if="tableData.data.length > 0">
										<tr>
											<td>
												{{tableDataEnd.index}}
											</td>
											<td style="width:150px">
												{{tableDataEnd.name}}
											</td>
											<td>
												{{tableDataEnd.llfdl}}
											</td>
											<td>
												{{tableDataEnd.sjfdl}}
											</td>
											<td>
												{{tableDataEnd.speed}}
											</td>
											<td>
												{{tableDataEnd.fjhjx1}}
											</td>
											<td>
												{{tableDataEnd.fjhjx2}}
											</td>
											<td>
												{{tableDataEnd.jhjx1}}
											</td>
											<td>
												{{tableDataEnd.jhjx2}}
											</td>
											<td>
												{{tableDataEnd.sl1}}
											</td>
											<td>
												{{tableDataEnd.sl2}}
											</td>
											<td>
												{{tableDataEnd.xd1}}
											</td>
											<td>
												{{tableDataEnd.xd2}}
											</td>
											<td>
												{{tableDataEnd.xn1}}
											</td>
											<td>
												{{tableDataEnd.xn2}}
											</td>
											<td>
												{{tableDataEnd.xn3}}
											</td>
											<td>
												{{tableDataEnd.xn4}}
											</td>
											<td>
												{{tableDataEnd.fnlly}}
											</td>
										</tr>
									</template>
								</Table>
							</div>
						</panel>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
	import BarLineChart from "../../components/chart/combination/bar-line-chart.vue";
	import SvgIcon from "../../components/coms/icon/svg-icon.vue";
	import Panel from "../../components/coms/panel/panel.vue";
	import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
	import Table from "./table.vue";
	import partten from "@/helper/partten.js";
	export default {
		components: {
			ToolbarPanel,
			BarLineChart,
			Panel,
			Table,
			partten,
			SvgIcon
		},
		data() {
			return {
				tableData: {
					column: [{
							name: "",
							field: "index",
							is_num: false,
							is_light: false,
						},
						{
							name: "名称",
							field: "name",
							width: '150px',
							is_num: false,
							is_light: false,
						},
						{
							name: "理论发电量",
							field: "llfdl",
							is_num: false,
							is_light: false,
							sortable: true
						},
						{
							name: "SCADA发电量",
							field: "sjfdl",
							is_num: false,
							is_light: false,
							sortable: true
						},
						{
							name: "风速",
							field: "speed",
							is_num: false,
							is_light: false,
							sortable: true
						},
						{
							name: "故障损失",
							field: "fjhjx1",
							is_num: false,
							is_light: false,
							sortable: true
						},
						{
							name: "故障受累",
							field: "fjhjx2",
							is_num: false,
							is_light: false,
							sortable: true
						},
						{
							name: "检修损失",
							field: "jhjx1",
							is_num: false,
							is_light: false,
							sortable: true
						},
						{
							name: "检修受累",
							field: "jhjx2",
							is_num: false,
							is_light: false,
							sortable: true
						},
						{
							name: "电网受累",
							field: "sl1",
							is_num: false,
							is_light: false,
							sortable: true
						},
						{
							name: "天气受累",
							field: "sl2",
							is_num: false,
							is_light: false,
							sortable: true
						},
						{
							name: "限电降出",
							field: "xd1",
							is_num: false,
							is_light: false,
							sortable: true
						},
						{
							name: "限电停机",
							field: "xd2",
							is_num: false,
							is_light: false,
							sortable: true
						},
						{
							name: "待风损失",
							field: "xn1",
							is_num: false,
							is_light: false,
							sortable: true
						},
						{
							name: "手动停机",
							field: "xn2",
							is_num: false,
							is_light: false,
							sortable: true
						},
						{
							name: "正常发电",
							field: "xn3",
							is_num: false,
							is_light: false,
							sortable: true
						},
						{
							name: "缺陷降出",
							field: "xn4",
							is_num: false,
							is_light: false,
							sortable: true
						},
						{
							name: "风能利用率%",
							field: "fnlly",
							is_num: false,
							is_light: false,
							sortable: true
						}
					],
					data: [],
				},
				tableDataEnd: [], //合计
				ChangZhan: [], //场站
				XiangMu: [], //项目
				XianLu: [], //线路
				value1: [],
				value2: [],
				value3: [],
				value4: "",
				value5: "",
				barColor: [partten.getColor("purple"), partten.getColor("green"), partten.getColor("pink"), partten
					.getColor("red"), partten.getColor("orange"), partten.getColor("grayl"), partten.getColor(
						"yellow"), partten.getColor("gray"), partten.getColor("blue"), partten.getColor("cyan"),
					partten
					.getColor("brown"), partten.getColor("mauve")
				],
				TypeClass: 1, //风场，项目，集电线路 的按钮颜色，默认第一个
				bardata: [],
				lineData: [],
			};
		},
		created() {
			this.ChangZhanVal();
			this.value4 = this.getTime(1);
			this.value5 = this.getTime(2);
			this.AjaxCommon();
		},
		methods: {
			ChangZhanVal() {
				var that = this;
				that.API.requestData({
					method: "GET",
					baseURL: "http://10.155.32.4:9001/",
					subUrl: "benchmarking/wplist",
					success(res) {
						that.ChangZhan = res.data;
					}
				});
			},
			ChangZhanChange(val) {
				this.TypeClass = "";
				this.value1 = val;
				this.value2 = [];
				this.value3 = [];
				this.AjaxCommon();
				this.XiangMuVal(val);
			},
			XiangMuVal(val) {
				var that = this;
				that.API.requestData({
					method: "GET",
					baseURL: "http://10.155.32.4:9001/",
					subUrl: "benchmarking/projectList",
					data: {
						wpids: val
					},
					success(res) {
						that.XiangMu = res.data;
					}
				});
			},
			XiangMuChange(val) {
				this.TypeClass = "";
				this.value2 = val;
				this.value3 = [];
				this.AjaxCommon();
				this.XianLuVal(val);
			},
			XianLuVal(val) {
				var that = this;
				that.API.requestData({
					method: "GET",
					baseURL: "http://10.155.32.4:9001/",
					subUrl: "benchmarking/lineList",
					data: {
						projects: val
					},
					success(res) {
						that.XianLu = res.data;
					}
				});
			},
			XianLuChange(val) {
				this.TypeClass = "";
				this.value3 = val;
				this.AjaxCommon();
			},
			BeginChange(val) {
				this.value4 = val;
				this.AjaxCommon();
			},
			EndChange(val) {
				this.value5 = val;
				this.AjaxCommon();
			},
			TypeClick(val) {
				this.TypeClass = val;
				// 重置状态start
				this.value1 = [];
				this.value2 = [];
				this.value3 = [];
				this.value4 = this.getTime(1);
				this.value5 = this.getTime(2);
				this.AjaxCommon();
				// 重置状态end
			},
			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;
				}
			},
			AjaxCommon() {
				var that = this;
				that.API.requestData({
					method: "GET",
					baseURL: "http://10.155.32.4:9001/",
					subUrl: "benchmarking/fjjxbmx",
					data: {
						wpids: that.value1,
						projectids: that.value2,
						lineids: that.value3,
						beginDate: that.value4,
						endDate: that.value5,
						type: that.TypeClass,
						target: '',
						sort: ''
					},
					success(res) {
						console.log(res)
						var name = [],
							data = [],
							llfdl = [],
							legend = ["实际电量", "故障损失", "故障受累", "检修受累", "电网受累", "天气受累", "限电降出", "限电停机", "待风损失",
								"手动停机", "正常发电", "缺陷降出"
							],
							data2 = []; //项目列表
						res.data.forEach((item, index) => {
							name.push(item.name);
							llfdl.push(item.llfdl);
							data.push([item.sjfdl, item.fjhjx1, item.fjhjx2, item.jhjx1, item.jhjx2, item
								.sl1, item.sl2, item.xd1, item.xd2, item.xn1, item.xn2, item.xn3,
								item.xn4
							])
							data2.push({
								index: index + 1,
								name: item.name,
								llfdl: item.llfdl,
								sjfdl: item.sjfdl,
								speed: item.speed,
								fjhjx1: item.fjhjx1,
								fjhjx2: item.fjhjx2,
								jhjx1: item.jhjx1,
								jhjx2: item.jhjx2,
								sl1: item.sl1,
								sl2: item.sl2,
								xd1: item.xd1,
								xd2: item.xd2,
								xn1: item.xn1,
								xn2: item.xn2,
								xn3: item.xn3,
								xn4: item.xn4,
								fnlly: item.fnlly,
								is_light: false
							})
						})
						name.pop();
						data.pop();
						llfdl.pop();
						if (data.length > 0) {
							let arr1 = [];
							const length = data[0].length;
							for (var i = 0; i < length; i++) {
								let arr2 = [];
								data.forEach(ele => {
									arr2.push(ele[i])
								});
								arr1.push(arr2);
							}
							that.lineData = llfdl;
							that.bardata = {
								area: name,
								legend: legend,
								data: arr1
							};
						}
						that.tableDataEnd = data2[data2.length - 1];
						data2.pop();
						that.tableData.data = data2;
					}
				});
			},
			mxClick() {
				this.$router.push("/decision/decision1")
			},
			formatJson(filterVal, jsonData) {
				return jsonData.map(v => filterVal.map(j => v[j]));
			},
			exportExcel() {
				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 => {
					tHeader.push(ele.name);
					filterVal.push(ele.field);
				});

				var list = [];
				that.tableData.data.forEach((i, index) => {
					list.push(i);
				})
				list.push(that.tableDataEnd)
				const data = that.formatJson(filterVal, list);
				export_json_to_excel(tHeader, data, '导出的Excel'); // 最后一个是表名字
			},
		}
	};
</script>

<style lang="less">
	.contentMx::-webkit-scrollbar {
		width: 200px;
		height: 20px;
	}

	.contentMx::-webkit-scrollbar-track-piece {
		background-color: rgba(255, 255, 255, 0.05);
		-webkit-border-radius: 4px;
	}

	.contentMx::-webkit-scrollbar-thumb {
		background-color: fade(@gray, 75);
		-webkit-border-radius: 4px;
		outline: none;
		outline-offset: 0px;
		border: none;
	}


	.decision-page-1 {
		.com-panel .panel-title {
			line-height: 3.4259vh;
		}

		.tools {
			display: flex;
			line-height: 3.4259vh;

			.tool-block {
				display: flex;
				align-items: center;
				margin-left: 0.741vh;

				.legend {
					flex: auto;
					width: 0.741vh;
					height: 0.741vh;
					margin-right: 0.741vh;

					&.long {
						width: 2.963vh;
						height: 0.37vh;
					}
				}

				.legend-text {
					color: @gray-l;
					font-size: @fontsize-s;
				}
			}
		}

		.project-table {
			overflow: auto;

			tbody {
				height: calc(100vh - 31.5vh);
			}

			td {
				color: #b2bdc0;
			}
		}

		.contentMx {
			width: 100%;
			overflow-x: auto;
		}

		.activeMx {
			width: 130%;
		}
	}

	.main {
		overflow: auto;
	}

	// .main .main-body{height: calc(100vh - 6.63vh);}
	.bg-olive {
		background-color: #8dc63f;
		color: #ffffff;
	}

	.bg-cyan {
		background-color: #1cbbb4;
	}

	.bg-mauve {
		background-color: #9c26b0;
	}

	.bg-pink {
		background-color: #e03997;
	}

	.bg-brown {
		background-color: #a5673f;
	}

	.bg-pink2 {
		background-color: #FF0099;
	}

	.bg-blue2 {
		background-color: #07ABF5;
	}

	.bg-green2 {
		background-color: #1D3638;
	}
</style>