sis_zhfx/src/views/Decision/Decision3.vue

<template>
	<div class="decision-page-3">
		<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)" clearable placeholder="请选择"
							popper-class="select">
							<el-option v-for="(item,index) in XiangMu" :key="item.id" :value="index" :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" v-show="detailShow==2" @click="back">返回</button>
			</div>
		</div>
		<!-- 列表 -->
		<div class="info" v-show="detailShow==1">
			<div class="mg-b-16">
				<div class="project-table">
					<Table :data="tableData" ref="curRef"></Table>
				</div>
			</div>
			<!-- 风资源列表 -->
			<!-- <div class="direction-info mg-b-16">
				<table class="com-table">
					<tbody>
						<tr>
							<td v-for="(col, i) of tableData.column" :key="i">
								<div v-if="i == 0">22</div>
								<div v-if="i == 1">风资源</div>
								<div v-if="i != 0 && i != 1">
									<div class="direction-title">3.123</div>
									<div class="direction-chart">
										<DirectionRadarChart :width="'70%'" :height="'232px'" :value="90" />
										<div class="legend mg-t-16">
											<span class="dot"></span>
											<span>静风频率为2</span>
										</div>
									</div>
								</div>
							</td>
						</tr>
					</tbody>
				</table>
			</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="XiangMu[value2].name.substr(0,XiangMu[value2].name.length - 1) + '占比'">
						<dual-pie-chart height="21.296vh" :innerData="innerCz" :outerData="outerCz" />
					</panel>
				</el-col>
			</el-row>
			<panel title="损失电量分析">
				<multiple-bar-chart height="300px" :list="analyis" :customerTooltip="true" @tooltip="tooltip"
					:units='["(万KWh)"]' />
			</panel>
		</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"></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 "./table.vue";
	import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
	import Dayinfo from "./dayinfo.vue";
	
	export default {
		components: {
			Panel,
			Table,
			SvgIcon,
			DualPieChart,
			MultipleBarChart,
			Dayinfo,
			ToolbarPanel
		},
		data() {
			let that = this;
			return {
				tableIdArr: [], //放checkbox的id数组
				tableId: [],
				checkLength: 0, //对标分析只能选择2个
				tableData: {
					column: that.column1,
					data: [],
				},
				tableDataDetail: {
					column: [{
							name: "",
							field: "index",
							is_num: false,
							is_light: false,
						},
						{
							name: "",
							field: "fdl",
							is_num: false,
							is_light: false,
							display:"none",
						},
						{
							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: [],
				},
				ChangZhan: [], //场站
				XiangMu: [{ //项目
					name: '弃风率',
					id: 1
				}, {
					name: '故障损失率',
					id: 2
				}, {
					name: '检修损失率',
					id: 3
				}, {
					name: '性能损失率',
					id: 4
				}, {
					name: '受累损失率',
					id: 5
				}],
				value1: [],
				value2: 0,
				value3: [],
				value4: "",
				value5: "",
				innerFdl: [], //发电量占比
				outerFdl: [],
				innerCz: [], //各场站损失电量占比
				outerCz: [],
				analyis: [], //损失电量分析
				dialogVisible: false,
				radarValue: [],
				windNum: 'dd',
				windNum2: 'dd',
				tabs: [],
				analyisDialog: [],
				detailShow: 1,
				ajaxData: [],
				column1: [{ //弃风率
						name: "",
						field: "index",
						is_num: false,
						is_light: false,
					},
					{
						name: "",
						field: "check",
						is_num: false,
						is_light: false,
						template: () => {
							return "<input class='check curCheckBox checkItem' type='CheckBox' />";
						},
						click: function(event, data) {
							that.checkClick(event, data);
						},
					},
					{
						name: "名称",
						field: "name",
						is_num: false,
						is_light: false,
					}, {
						name: "限电损失排名",
						field: "xdssdlpm",
						is_num: false,
						is_light: false,
						sortable: true,
					},
					{
						name: "限电损失",
						field: "xdssdl",
						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: "cz",
						is_num: false,
						is_light: false,
						template: function() {
							return "<a class='action'>详情</a>";
						},
						click: function(event, data) {
							that.detailClick(data);
						}
					}
				],
				column2: [{ //故障损失率
						name: "",
						field: "index",
						is_num: false,
						is_light: false,
					},
					{
						name: "",
						field: "check",
						is_num: false,
						is_light: false,
						template: () => {
							return "<input class='check curCheckBox checkItem' type='CheckBox' />";
						},
						click: function(event, data) {
							that.checkClick(event, data);
						},
					},
					{
						name: "名称",
						field: "name",
						is_num: false,
						is_light: false,
					},
					{
						name: "故障损失排名",
						field: "gzssdlpm",
						is_num: false,
						is_light: false,
						sortable: true,
					},
					{
						name: "故障损失",
						field: "gzssdl",
						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: "cz",
						is_num: false,
						is_light: false,
						template: function() {
							return "<a class='action'>详情</a>";
						},
						click: function(event, data) {
							that.detailClick(data);
						}
					}
				],
				column3: [{ //检修损失率
						name: "",
						field: "index",
						is_num: false,
						is_light: false,
					},
					{
						name: "",
						field: "check",
						is_num: false,
						is_light: false,
						template: () => {
							return "<input class='check curCheckBox checkItem' type='CheckBox' />";
						},
						click: function(event, data) {
							that.checkClick(event, data);
						},
					},
					{
						name: "名称",
						field: "name",
						is_num: false,
						is_light: false,
					},

					{
						name: "检修损失排名",
						field: "jxssdlpm",
						is_num: false,
						is_light: false,
						sortable: true,
					},
					{
						name: "检修损失",
						field: "jxssdl",
						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: "cz",
						is_num: false,
						is_light: false,
						template: function() {
							return "<a class='action'>详情</a>";
						},
						click: function(event, data) {
							that.detailClick(data);
						}
					}
				],
				column4: [{ //性能损失率
						name: "",
						field: "index",
						is_num: false,
						is_light: false,
					},
					{
						name: "",
						field: "check",
						is_num: false,
						is_light: false,
						template: () => {
							return "<input class='check curCheckBox checkItem' type='CheckBox' />";
						},
						click: function(event, data) {
							that.checkClick(event, data);
						},
					},
					{
						name: "名称",
						field: "name",
						is_num: false,
						is_light: false,
					},
					{
						name: "性能损失排名",
						field: "xnssdlpm",
						is_num: false,
						is_light: false,
						sortable: true,
					},
					{
						name: "性能损失",
						field: "xnssdl",
						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: "cz",
						is_num: false,
						is_light: false,
						template: function() {
							return "<a class='action'>详情</a>";
						},
						click: function(event, data) {
							that.detailClick(data);
						}
					}
				],
				column5: [{ //受累损失率
						name: "",
						field: "index",
						is_num: false,
						is_light: false,
					},
					{
						name: "",
						field: "check",
						is_num: false,
						is_light: false,
						template: () => {
							return "<input class='check curCheckBox checkItem' type='CheckBox' />";
						},
						click: function(event, data) {
							that.checkClick(event, data);
						},
					},
					{
						name: "名称",
						field: "name",
						is_num: false,
						is_light: false,
					},
					{
						name: "受累损失排名",
						field: "slssdlpm",
						is_num: false,
						is_light: false,
						sortable: true,
					}, {
						name: "受累损失",
						field: "slssdl",
						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) {
							that.detailClick(data);
						}
					}
				],
			};
		},
		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.AjaxCommon();
				this.clearDb();
			},
			XiangMuChange(val) {
				this.tableType(this.value2)
				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/wxssl",
					data: {
						wpids: that.value1,
						projectids: [],
						lineids: [],
						beginDate: that.value4,
						endDate: that.value5,
						target: '',
						sort: ''
					},
					success(res) {
						that.ajaxData = res.data;
						var analyis = [],
							gzssdl = [],
							jxssdl = [],
							xnssdl = [],
							xdssdl = [],
							slssdl = [];

						that.ajaxData.forEach((item, index) => {
							that.tableIdArr.push(item.id);
							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.tableType(that.value2);
						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();
			},
			detailClick(data) {
				var that = this;
				var dataId = that.tableIdArr[data.index - 1];
				that.clearDb();
				that.detailShow = 2;
				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,
								fdl:item.fdl,
								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;
					}
				});
			},
			checkClick(event, data) {
				var that = this;
				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;
				}
			},
			tableType(a) {
				var that = this;
				var dataTab = [],
					fdl = [],
					cz = [];
				that.ajaxData.forEach((item, index) => {
					fdl.push({
						value: item.fdl,
						name: item.name
					})

					if (a == 0) {
						dataTab.push({ //弃风率
							index: index + 1,
							name: item.name,
							xdssdlpm: item.xdssdlpm,
							xdssdl: item.xdssdl,
							qflpm: item.qflpm,
							qfl: item.qfl,
							is_light: false
						})
						cz.push({
							value: item.xdssdl,
							name: item.name
						})
					}
					if (a == 1) {
						dataTab.push({ //故障损失率
							index: index + 1,
							name: item.name,
							gzssdlpm: item.gzssdlpm,
							gzssdl: item.gzssdl,
							gzsslpm: item.gzsslpm,
							gzssl: item.gzssl,
							is_light: false
						})
						cz.push({
							value: item.gzssdl,
							name: item.name
						})
					}
					if (a == 2) {
						dataTab.push({ //检修损失率
							index: index + 1,
							name: item.name,
							jxssdlpm: item.jxssdlpm,
							jxssdl: item.jxssdl,
							jxsslpm: item.jxsslpm,
							jxssl: item.jxssl,
							is_light: false
						})
						cz.push({
							value: item.jxssdl,
							name: item.name
						})
					}
					if (a == 3) {
						dataTab.push({ //性能损失率
							index: index + 1,
							name: item.name,
							xnssdlpm: item.xnssdlpm,
							xnssdl: item.xnssdl,
							xnsslpm: item.xnsslpm,
							xnssl: item.xnssl,
							is_light: false
						})
						cz.push({
							value: item.xnssdl,
							name: item.name
						})
					}
					if (a == 4) {
						dataTab.push({ //受累损失率
							index: index + 1,
							name: item.name,
							slssdlpm: item.slssdlpm,
							slssdl: item.slssdl,
							slsslpm: item.slsslpm,
							slssl: item.slssl,
							is_light: false
						})
						cz.push({
							value: item.slssdl,
							name: item.name
						})
					}
				})

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

				that.innerCz = cz;
				that.outerCz = cz;
				that.tableData.data = dataTab;
				if (a == 0) {
					that.tableData.column = that.column1;
				}
				if (a == 1) {
					that.tableData.column = that.column2;
				}
				if (a == 2) {
					that.tableData.column = that.column3;
				}
				if (a == 3) {
					that.tableData.column = that.column4;
				}
				if (a == 4) {
					that.tableData.column = that.column5;
				}

			}
		}
	};
</script>

<style lang="less">
	.decision-page-3 {
		.content .project-table {
			tbody {
				height: calc(100vh - 24.5vh);
			}
		}
		.com-panel {
			.panel-title {
				color: @gray-l;
			}

			.tools {
				display: flex;

				.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;
					}
				}
			}
		}

		.info {
			overflow: auto;
			height: calc(100vh - 150px);
		}

		.project-table {
			overflow: auto;

			.com-table {
				tbody {
					padding-right: 0px;
				}

				th,
				td {
					color: #b2bdc0;

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

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

		.direction-info {
			.com-table {
				tbody {
					padding-right: 0px;
				}

				th,
				td {
					color: #b2bdc0;
					padding: 0;

					&:nth-child(1) {
						width: 32px;
						background-color: fade(#536268, 20);
					}

					&:nth-child(2) {
						width: 183px;
						background-color: fade(#536268, 40);
					}

					.direction-title {
						background-color: fade(#536268, 20);
						font-size: @fontsize-s;
						line-height: 2.963vh;
					}

					.direction-chart {
						padding-top: 48px;

						.legend {
							display: flex;
							align-items: center;
							justify-content: center;
							margin-top: 32px;
							margin-bottom: 16px;

							.dot {
								width: 7px;
								height: 7px;
								background: @green;
								display: inline-block;
								margin-right: 8px;
							}
						}
					}
				}
			}
		}
		.action {
			text-decoration: underline;
			color: @green;
			cursor: pointer;
		}
	}
</style>