sis_zhfx/src/views/Decision/Decision2.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-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="myDate" type="daterange" value-format="YYYY-MM-DD" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" popper-class="date-select"> </el-date-picker>
					</div>
				</div>
			</div>
			<div class="query-actions" style="margin-left:0px">
				<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="8">
					<panel title="发电量占比">
						<dual-pie-chart height="21.296vh" :innerData="innerFdl" :outerData="outerFdl" />
					</panel>
				</el-col>
				<el-col :span="8">
					<panel title="各场站损失电量占比">
						<dual-pie-chart height="21.296vh" :innerData="innerCz" :outerData="outerCz" />
					</panel>
				</el-col>
				<el-col :span="8">
					<panel title="理论发电量占比">
						<dual-pie-chart height="21.296vh" :innerData="innerLl" :outerData="outerLl" />
					</panel>
				</el-col>
			</el-row>
			<div>
				<panel title="损失电量分析">
					<multiple-bar-chart :height="'calc(100vh - 21.5vh - 500px)'" :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" :title="[windNum,windNum2]" :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: [{
							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.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.startDate,
										endDate: that.endDate,
										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;
									},
								});
							},
						},
					],
					data: [],
				},
				tableDataDetail: {
					column: [{
							name: "",
							field: "index",
							is_num: false,
							is_light: false,
						},
						{
							// name: "",
							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: [],
				},
				options: [],
				ChangZhan: [], //场站
				XiangMu: [], //项目
				XianLu: [], //线路
				value1: [],
				value2: [],
				value3: [],
				myDate:[],
				startDate: "",
				endDate: "",
				innerFdl: [], //发电量占比
				outerFdl: [],
				innerCz: [], //各场站损失电量占比
				outerCz: [],
				innerLl: [], //理论发电量占比
				outerLl: [],
				analyis: [], //损失电量分析
				dialogVisible: false,
				radarValue: [],
				windNum: "dd",
				windNum2: "dd",
				tabs: [],
				analyisDialog: [],
				detailShow: 1,
				ajaxData: [],
				dbData: [],
			};
		},
		created() {
			this.ChangZhanVal();
			// this.XiangMuVal()
			this.startDate = this.getTime(1);
			this.endDate = 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.value2.push(res.data[0].id);
						that.ChangZhan = res.data;
						//  that.AjaxCommon();
						that.XiangMuVal(that.value2);
					},
				});
			},
			ChangZhanChange(val) {
				this.value1 = val;
				this.value2 = [];
				//   this.value2 = val;
				this.value3 = [];
				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.value3 = [];
				this.AjaxCommon();
				//   this.XiangMuVal(val);
				this.XianLuVal(val);
				this.clearDb();
			},
			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.value3 = 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: that.value2,
						lineids: that.value3,
						beginDate: that.startDate,
						endDate: that.endDate,
						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();
			},
		},
		watch:{
			myDate(e){
				this.startDate = e[0];
				this.endDate = e[1];
				this.AjaxCommon();
				this.clearDb();
			}
		}
	};
</script>

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

		.project-table {
			overflow: auto;

			tbody {
				height: 145px;
			}

			th,
			td {
				color: #b2bdc0;

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

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

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