hb_sis_zhfx/src/views/Decision/Decision2Xmdb.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="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-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-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 green">搜索</button>
				<button class="btn" @click="dbfx">对标分析</button>
				<button class="btn">导出</button>
				<button class="btn" v-show="detailShow==2" @click="back">返回</button>
			</div>
		</div>
		<div v-show="detailShow==1">
			<toolbar-panel title="项目对标" :showLine="false"></toolbar-panel>
			<div class="mg-b-16">
				<div class="project-table">
					<Table :data="tableData" :canScroll="false" ref="curRef" @onSort="onSort"></Table>
				</div>
			</div>
			<el-row class="mg-b-16">
				<el-col :span="12">
					<panel title="发电量占比">
						<dual-pie-chart height="21.296vh" :innerData="innerFdl" :outerData="outerFdl" />
					</panel>
				</el-col>
				<el-col :span="12">
					<panel title="各场站损失电量占比">
						<dual-pie-chart height="21.296vh" :innerData="innerCz" :outerData="outerCz" />
					</panel>
				</el-col>
			</el-row>
			<div>
				<panel title="损失电量分析">
					<multiple-bar-chart height="300px" :list="analyis" :customerTooltip="true" @tooltip="tooltip"
						:units='["(万KWh)"]' />
				</panel>
			</div>
		</div>
		<el-row :type="'flex'" class="content" v-show="detailShow==2">
			<el-col :span="24" class="pd-l-8">
				<panel :title="'风机对标列表明细'" :showLine="false">
					<div class="project-table">
						<Table :data="tableDataDetail" ref="curRef" @onSort="onSort"></Table>
					</div>
				</panel>
			</el-col>
		</el-row>

		<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 MultipleBarChart from "../../components/chart/bar/multiple-bar-chart.vue";
	import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
	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 ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
	import Dayinfo from "./dayinfo.vue";
	export default {
		components: {
			Panel,
			Table,
			SvgIcon,
			DualPieChart,
			MultipleBarChart,
			ToolbarPanel,
			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: function() {
								return "<input class='check curCheckBox' type='CheckBox'/>";
							},
							click: function(event, data) {
								// checkbox 事件
								// event.target checkbox or td 需进行判断
								// event.target.checked 判断 checkbox 是否选中
								// data  当前数据
								// console.log(that);
								// console.log(event.target);
								// console.log(event.target.checked);
								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.dbData.splice(i, 1);
										}
									})
									that.checkLength--;
								} else if (event.target.checked && that.checkLength < 2) {
									that.tableId.push(dataId);
									that.dbData.push(data);
									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: false,
							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];
								that.clearDb();
								that.detailShow = 2;
								// var that = this;
								that.API.requestData({
									method: "GET",
									baseURL: "http://10.155.32.4:9001/",
									subUrl: "benchmarking/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: [],
				},
				tableDataDetail: {
					column: [{
							name: "",
							field: "index",
							is_num: false,
							is_light: false,
						},
						{
							name: "",
							field: "check",
							is_num: false,
							is_light: false,
							template: function() {
								return "<input class='check curCheckBox checkItem' 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.dbData.splice(i, 1);
										}
									})
									that.checkLength--;
								} else if (event.target.checked && that.checkLength < 2) {
									that.tableId.push(dataId);
									that.dbData.push(data);
									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: "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: false,
							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: "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,
						}
					],
					data: [],
				},
				options: [],
				ChangZhan: [], //场站
				XiangMu: [], //项目
				value1: [],
				value2: [],
				value4: "",
				value5: "",
				innerFdl: [], //发电量占比
				outerFdl: [],
				innerCz: [], //各场站损失电量占比
				outerCz: [],
				innerLl: [], //理论发电量占比
				outerLl: [],
				analyis: [], //损失电量分析
				dialogVisible: false,
				radarValue: [],
				windNum: 'dd',
				windNum2: 'dd',
				tabs: [],
				analyisDialog: [],
				detailShow: 1,
				ajaxData: [],
				dbData:[]
			};
		},
		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.value1 = val;
				this.value2 = [];
				this.AjaxCommon();
				this.XiangMuVal(val);
				this.clearDb();
			},
			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.value2 = val;
				this.AjaxCommon();
				this.clearDb();
			},
			BeginChange(val) {
				this.value4 = val;
				this.AjaxCommon();
				this.clearDb();
			},
			EndChange(val) {
				this.value5 = 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: "http://10.155.32.4:9001/",
					subUrl: "benchmarking/xmdb",
					data: {
						wpids: that.value1,
						projectids: that.value2,
						beginDate: that.value4,
						endDate: that.value5,
						target: '',
						sort: ''
					},
					success(res) {
						that.ajaxData = res.data;
						var dataTab = [], //表格
							fdl = [],
							cz = [],
							ll = [],
							analyis = [],
							gzssdl = [],
							jxssdl = [],
							xnssdl = [],
							xdssdl = [],
							slssdl = [];
						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
							})

							fdl.push({
								value: item.fdl,
								name: item.name
							})

							cz.push({
								value: (item.gzssdl + item.jxssdl + item.xnssdl + item.xdssdl +
									item.slssdl).toFixed(2),
								name: item.name
							})

							ll.push({
								value: item.llfdl,
								name: item.name
							})

							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.tableData.data = dataTab;

						that.innerFdl = fdl;
						that.outerFdl = fdl;

						that.innerCz = cz;
						that.outerCz = cz;

						that.innerLl = ll;
						that.outerLl = ll;

						that.analyis = analyis;
					}
				});
			},
			AjaxDbfx() {
				var that = this;
				var data = that.dbData;
				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.dbData = [];
				this.checkLength = 0;
			},
			back() {
				this.detailShow = 1;
				this.clearDb();
			},
			onSort(){
				this.clearDb();
			}
		}
	};
</script>

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

		.project-table {
			overflow: auto;

			tbody {
				height: 239px;
			}

			th,
			td {
				color: #b2bdc0;

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

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

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