hb_sis_zhfx/src/views/HealthControl/HealthDay.vue

<template>
	<div class="decision-page-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="value2" @change="MoKuaiChange(value2)" multiple placeholder="请选择"
							popper-class="select">
							<el-option v-for="item in MoKuai" :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="value1" @change="ChangZhanChange(value1)" multiple 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-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>
			<div class="query-actions">
				<button class="btn" @click="dbfx">对比</button>
			</div>
		</div>

		<div class="mg-b-16">
			<div class="project-table">
				<Table :data="tableData" :canScroll="false" ref="curRef"></Table>
			</div>
		</div>
		<el-dialog title="对标排名分析" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal"
			:close-on-click-modal="false">
			<dayinfo :radarValue="radarValue" :windNum="windNum" :windNum2="windNum2" :tabs="tabs"
				:analyisDialog="analyisDialog" />
		</el-dialog>
	</div>
</template>

<script>
	import SvgIcon from "../../components/coms/icon/svg-icon.vue";
	import Panel from "../../components/coms/panel/panel.vue";
	import Table from "../../components/coms/table/table.vue";
	import Dayinfo from "./dayinfo.vue";
	export default {
		components: {
			Panel,
			Table,
			SvgIcon,
			Dayinfo
		},
		data() {
			let that = this;
			return {
				tableIdArr: [], //放checkbox的id数组
				tableId: [],
				checkLength: 0, //对标分析只能选择2个
				tableData: {
					column: [{
							name: "",
							field: "index",
							is_num: false,
							is_light: false,
						},
						{
							name: "",
							field: "check",
							is_num: false,
							is_light: false,
							template:() => {
								return "<input class='check curCheckBox' type='CheckBox' />";
							},
							click: function(event, data) {
								var dataId = that.tableIdArr[data.index - 1];
								if (event.target.checked == false && that.checkLength <= 2) {
									that.tableId.forEach((item, i) => {
										if (item == dataId) {
											that.tableId.splice(i, 1)
										}
									})
									that.checkLength--;
								} else if (event.target.checked && that.checkLength < 2) {
									that.tableId.push(dataId)
									that.checkLength++;
								} else if (that.checkLength == 2) {
									event.target.checked = false;
								}
							},
						},
						{
							name: "名称",
							field: "name",
							is_num: false,
							is_light: false,
						},
						{
							name: "综合排名",
							field: "zhpm",
							is_num: false,
							is_light: false,
							sortable: true,
						},
						{
							name: "发电量排名",
							field: "fdlpm",
							is_num: false,
							is_light: false,
							sortable: true,
						},
						{
							name: "发电量",
							field: "fdl",
							is_num: false,
							is_light: false,
							sortable: true,
						},
						{
							name: "故障损失电量排名",
							field: "gzssdlpm",
							is_num: false,
							is_light: false,
							sortable: true,
						},
						{
							name: "故障损失电量",
							field: "gzssdl",
							is_num: false,
							is_light: false,
							sortable: true,
						},
						{
							name: "检修损失电量排名",
							field: "jxssdlpm",
							is_num: false,
							is_light: false,
							sortable: true,
						},
						{
							name: "检修损失电量",
							field: "jxssdl",
							is_num: false,
							is_light: false,
							sortable: true,
						},
						{
							name: "性能损失电量排名",
							field: "xnssdlpm",
							is_num: false,
							is_light: true,
							sortable: true,
						},
						{
							name: "性能损失电量",
							field: "xnssdl",
							is_num: false,
							is_light: false,
							sortable: true,
						},
						{
							name: "限电损失电量排名",
							field: "xdssdlpm",
							is_num: false,
							is_light: false,
							sortable: true,
						},
						{
							name: "限电损失电量",
							field: "xdssdl",
							is_num: false,
							is_light: false,
							sortable: true,
						}, {
							name: "受累损失电量排名",
							field: "slssdlpm",
							is_num: false,
							is_light: false,
							sortable: true,
						}, {
							name: "受累损失电量",
							field: "slssdl",
							is_num: false,
							is_light: false,
							sortable: true,
						}, {
							name: "风能利用率排名",
							field: "fnlylpm",
							is_num: false,
							is_light: false,
							sortable: true,
						}, {
							name: "风能利用率(%)",
							field: "fnlyl",
							is_num: false,
							is_light: false,
							sortable: true,
						},{
							name: "故障损失率排名",
							field: "gzsslpm",
							is_num: false,
							is_light: false,
							sortable: true,
						}, {
							name: "故障损失率(%)",
							field: "gzssl",
							is_num: false,
							is_light: false,
							sortable: true,
						}, {
							name: "检修损失率排名",
							field: "jxsslpm",
							is_num: false,
							is_light: false,
							sortable: true,
						}, {
							name: "检修损失率(%)",
							field: "jxssl",
							is_num: false,
							is_light: false,
							sortable: true,
						}, {
							name: "弃风率排名",
							field: "qflpm",
							is_num: false,
							is_light: false,
							sortable: true,
						}, {
							name: "弃风率(%)",
							field: "qfl",
							is_num: false,
							is_light: false,
							sortable: true,
						}, {
							name: "性能损失率排名",
							field: "xnsslpm",
							is_num: false,
							is_light: false,
							sortable: true,
						}, {
							name: "性能损失率(%)",
							field: "xnssl",
							is_num: false,
							is_light: false,
							sortable: true,
						}, {
							name: "受累损失率排名",
							field: "slsslpm",
							is_num: false,
							is_light: false,
							sortable: true,
						}, {
							name: "受累损失率(%)",
							field: "slssl",
							is_num: false,
							is_light: false,
							sortable: true,
						}, {
							name: "操作",
							field: "cz",
							is_num: false,
							is_light: false,
							template: function() {
								return "<a class='action'>详情</a>";
							},
							click: function(event, data) {
								var dataId = that.tableIdArr[data.index - 1];
								// var that = this;
								that.API.requestData({
									method: "GET",
									baseURL : "10.155.32.4:8034",
									subUrl: "evaluation/details",
									data: {
										id: dataId,
										beginDate: that.value4,
										endDate: that.value5,
										target: '',
										sort: ''
									},
									success(res) {
										var dataTab = [];
										res.data.forEach((item, index) => {
											that.tableIdArr.push(item.id);

											dataTab.push({ //表格
												index: index + 1,
												name: item.name,
												zhpm: item.zhpm,
												gzssdl: item.gzssdl,
												jxssdlpm: item.jxssdlpm,
												jxssdl: item.jxssdl,
												xnssdlpm: item.xnssdlpm,
												xnssdl: item.xnssdl,
												xdssdlpm: item.xdssdlpm,
												xdssdl: item.xdssdl,
												slssdlpm: item.slssdlpm,
												slssdl: item.slssdl,
												fnlylpm: item.fnlylpm,
												fnlyl: item.fnlyl,
												gzsslpm: item.gzsslpm,
												gzssl: item.gzssl,
												jxsslpm: item.jxsslpm,
												jxssl: item.jxssl,
												qflpm: item.qflpm,
												qfl: item.qfl,
												xnsslpm: item.xnsslpm,
												xnssl: item.xnssl,
												slsslpm: item.slsslpm,
												slssl: item.slssl,
												is_light: false
											})
										})
										that.tableDataDetail.data = dataTab;
									}
								});
							}
						}
					],
					data: [],
				},
				ChangZhan: [], //场站
				MoKuai: [], //项目
				value1: [],
				value2: [],
				value3: "",
				dialogVisible: false,
				radarValue: [],
				windNum: 'dd',
				windNum2: 'dd',
				tabs: [],
				analyisDialog: [],
				ajaxData:[],
			};
		},
		created() {
			this.ChangZhanVal();
			this.value3 = this.getTime(1);
			this.AjaxCommon();
			this.MoKuaiVal();
		},
		methods: {
			MoKuaiVal(val) {
				var that = this;
				that.API.requestData({
					method: "GET",
					baseURL : "10.155.32.4:8034",
					subUrl: "evaluation/sourceList",
					data: {
						wpids: val
					},
					success(res) {
						console.log(JSON.stringify(res))
						that.MoKuai = res.data;
					}
				});
			},
			MoKuaiChange(val) {
				this.value2 = val;
				this.value3 = [];
				this.AjaxCommon();
				this.XianLuVal(val);
				this.clearDb();
			},
			ChangZhanVal() {
				var that = this;
				that.API.requestData({
					method: "GET",
					baseURL : "10.155.32.4:8034",
					subUrl: "evaluation/wplist",
					success(res) {
						that.ChangZhan = res.data;
					}
				});
			},
			ChangZhanChange(val) {
				this.value1 = val;
				this.value2 = [];
				this.value3 = [];
				this.AjaxCommon();
				this.MoKuaiVal(val);
				this.clearDb();
			},
			BeginChange(val) {
				this.value4 = val;
				this.AjaxCommon();
				this.clearDb();
			},
			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 : "10.155.32.4:8034",
					subUrl: "evaluation/wxssl",
					data: {
						wpids: that.value1,
						projectids: that.value2,
						lineids: that.value3,
						beginDate: that.value4,
						endDate: that.value5,
						target: '',
						sort: ''
					},
					success(res) {
						that.ajaxData = res.data;
						var dataTab = []; //表格
						res.data.forEach((item, index) => {
							that.tableIdArr.push(item.id);
							dataTab.push({ //表格
								index: index + 1,
								name: item.name,
								zhpm: item.zhpm,
								fdlpm: item.fdlpm,
								fdl: item.fdl,
								gzssdlpm: item.gzssdlpm,
								gzssdl: item.gzssdl,
								jxssdlpm: item.jxssdlpm,
								jxssdl: item.jxssdl,
								xnssdlpm: item.xnssdlpm,
								xnssdl: item.xnssdl,
								xdssdlpm: item.xdssdlpm,
								xdssdl: item.xdssdl,
								slssdlpm: item.slssdlpm,
								slssdl: item.slssdl,
								fnlylpm: item.fnlylpm,
								fnlyl: item.fnlyl,
								gzsslpm: item.gzsslpm,
								gzssl: item.gzssl,
								jxsslpm: item.jxsslpm,
								jxssl: item.jxssl,
								qflpm: item.qflpm,
								qfl: item.qfl,
								xnsslpm: item.xnsslpm,
								xnssl: item.xnssl,
								slsslpm: item.slsslpm,
								slssl: item.slssl,
								is_light: false
							})

						})
						that.tableData.data = dataTab;
					}
				});
			},
			AjaxDbfx() {
				var that = this;
				var data = that.ajaxData;
				that.windNum = data[0].name;
				that.windNum2 = data[1].name;
				that.tabs = [{
					name: "发电量",
					windData1: data[0].fdl,
					windData2: data[1].fdl
				}, {
					name: "故障损失电量",
					windData1: data[0].gzssdl,
					windData2: data[1].gzssdl
				}, {
					name: "检修损失电量",
					windData1: data[0].jxssdl,
					windData2: data[1].jxssdl
				}, {
					name: "性能未达标损失电量",
					windData1: data[0].xnssdl,
					windData2: data[1].xnssdl
				}, {
					name: "受累损失电量",
					windData1: data[0].slssdl,
					windData2: data[1].slssdl
				}, {
					name: "风能利用率",
					windData1: data[0].fnlyl,
					windData2: data[1].fnlyl
				}, {
					name: "故障损失率",
					windData1: data[0].gzssl,
					windData2: data[1].gzssl
				}, {
					name: "检修损失率",
					windData1: data[0].jxssl,
					windData2: data[1].jxssl
				}, {
					name: "弃风率",
					windData1: data[0].qfl,
					windData2: data[1].qfl
				}, {
					name: "性能损失率",
					windData1: data[0].xnssl,
					windData2: data[1].xnssl
				}, {
					name: "受累损失率",
					windData1: data[0].slssl,
					windData2: data[1].slssl
				}];
				
				that.radarValue = [{
					indicator: ["风能利用率", "故障损失率", "检修损失率", "弃风率", "性能损失率", "受累损失率"],
					data: [{
						value: [data[0].fnlylpm, data[0].gzsslpm, data[0].jxsslpm, data[0].qflpm,
							data[0].xnsslpm, data[0].slsslpm
						]
					}, {
						value: [data[1].fnlylpm, data[1].gzsslpm, data[1].jxsslpm, data[1].qflpm,
							data[1].xnsslpm, data[1].slsslpm
						]
					}]
				}];
				
				var analyis = [],
					gzssdl = [],
					jxssdl = [],
					xnssdl = [],
					xdssdl = [],
					slssdl = [];
				data.forEach((item, index) => {
					gzssdl.push({
						text: item.name,
						value: item.gzssdl
					});
					jxssdl.push({
						text: item.name,
						value: item.jxssdl
					});
					xnssdl.push({
						text: item.name,
						value: item.xnssdl
					});
					xdssdl.push({
						text: item.name,
						value: item.xdssdl
					});
					slssdl.push({
						text: item.name,
						value: item.slssdl
					});
				})
				analyis.push({
					title: "故障损失电量",
					yAxisIndex: 0,
					value: gzssdl
				}, {
					title: "检修损失电量",
					yAxisIndex: 0,
					value: jxssdl
				}, {
					title: "性能损失电量",
					yAxisIndex: 0,
					value: xnssdl
				}, {
					title: "限电损失电量",
					yAxisIndex: 0,
					value: xdssdl
				}, {
					title: "受累损失电量",
					yAxisIndex: 0,
					value: slssdl
				})
				that.analyisDialog = analyis;
				
			},
			tooltip(param, callback) {
				var color = ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"];

				var result = param[0].axisValue;
				param.forEach((value, index) => {
					result += "<br />" +
						`<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color[index]};"></span>` +
						value.seriesName + "：" + value.value;
				});
				callback(result);
				return true;
			},
			dbfx() {
				var that = this;
				if (that.tableId.length == 2) {
					that.dialogVisible = true;
					this.AjaxDbfx();
					this.clearDb();
				}
			},
			clearDb(){//清空对标状态
				this.$refs.curRef.clearCheckBox();
				this.tableId = [];
				this.checkLength = 0;
			}
		}
	};
</script>

<style lang="less">
	.decision-page-2 {
		.content .project-table {
			tbody {
				height: calc(100vh - 24.5vh);
			}
		}

		.project-table {
			overflow: auto;

			tbody {
				height: 279px;
			}

			th,
			td {
				color: #b2bdc0;

				&:nth-child(1) {
					width: 50px;
				}

				&:nth-child(2) {
					width: 50px;
				}
			}
		}

		.action {
			text-decoration: underline;
			color: @green;
			cursor: pointer;
		}
	}
</style>