运行评价【已完成】，检修评价【未完成】

src/router/index.js

@@ -395,6 +395,16 @@ const routes = [{
 	component: () => import("../views/HealthControl/assess/assessconfig.vue")
 },
 {
+	path: "/health/zhpj/yxpj",//运行评价
+	name: "yxpj",
+	component: () => import("../views/HealthControl/zhpj/yxpj.vue")
+},
+{
+	path: "/health/zhpj/jxpj",//检修评价
+	name: "jxpj",
+	component: () => import("../views/HealthControl/zhpj/jxpj.vue")
+},
+{
 	path: "/health/gzzd/malfunctionDiagnose", // 故障诊断
 	name: "malfunctionDiagnose",
 	component: () => import("../views/malfunctionDiagnose/index.vue")

src/views/HealthControl/zhpj/dayinfo.vue

@@ -0,0 +1,136 @@
+<template>
+	<div class="health-day-info">
+		<div class="header">
+			<span class="herder-info" :width="800" v-for="item of gridDatas" :key="item">场站：{{ item.wpid }}</span>
+			<span class="herder-info">基础指标</span>
+		</div>
+		<div class="body">
+			<div class="left">
+				<table class="table-form">
+					<tr>
+						<td class="white" v-for="item of gridDatas" :key="item">
+							等级：{{ item.grade }}
+						</td>
+					</tr>
+					<tr>
+						<td class="white" v-for="item of gridDatas" :key="item">
+							综合排名：{{ item.zpm }}
+						</td>
+					</tr>
+				</table>
+
+				<div class="chart-body">
+					<normal-radar-chart :height="'500px'" :value="chartDatas" />
+				</div>
+			</div>
+			<div class="left">
+				<table class="table-form">
+					<tr>
+						<td class="white">指标</td>
+						<td class="white" v-for="item of gridDatas" :key="item">
+							{{ item.wpid }}
+						</td>
+						<td class="white" :colspan="gridDatas.length">排名</td>
+						<td class="white" colspan="2">评分</td>
+					</tr>
+					<tr v-for="item of column" :key="item">
+						<td class="white">{{ item.name }}</td>
+						<td class="white" v-for="row of gridDatas" :key="row">
+							{{ row[item.field] }}
+						</td>
+						<td class="white" v-for="row of gridDatas" :key="row">
+							{{ row[item.rank] }}
+						</td>
+						<td class="white" v-for="row of gridDatas" :key="row">
+							{{ row[item.score] ? row[item.score] : 0 }}
+						</td>
+					</tr>
+				</table>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import NormalRadarChart from "../../../components/chart/radar/normal-radar-chart.vue";
+	export default {
+		components: {
+			NormalRadarChart
+		},
+		props: {
+			gridDatas: {},
+			chartDatas: {},
+			column: []
+		},
+		data() {
+			return {
+				value: "",
+				radarValue: [{
+					indicator: [
+						"复位及时率(%)", "mttf", "缺陷下单及时率(%)", "缺陷验收及时率(%)", "设备利用小时", "限电损失率(%)", "性能损失率(%)",
+						"综合场用电量", "状态转换及时率(%)"
+					],
+					data: [{
+							value: [
+								44200, 14200, 20000, 35000, 50000, 38000, 44200, 14200, 20000,
+								35000,
+							],
+							name: "NAME1",
+						},
+						{
+							value: [
+								35000, 44200, 14200, 20000, 35000, 50000, 38000, 44200, 14200,
+								20000,
+							],
+							name: "NAME2",
+						},
+					],
+				}, ],
+			};
+		},
+	};
+</script>
+
+<style lang="less">
+	.health-day-info {
+		.header {
+			display: flex;
+			width: 100%;
+			height: 40px;
+			line-height: 40px;
+			background: fade(@gray, 60);
+			color: @white;
+
+			.herder-info {
+				flex: 1 0 25%;
+				text-align: center;
+				font-size: @fontsize-s;
+
+				&:last-child {
+					flex: 1 0 50%;
+				}
+			}
+		}
+
+		.body {
+			display: flex;
+
+			.left {
+				flex: 0 0 50%;
+
+				display: flex;
+				flex-direction: column;
+
+				.chart-body {
+					flex-grow: 1;
+					display: flex;
+					align-items: center;
+				}
+			}
+
+			.right {
+				flex: 0 0 50%;
+			}
+		}
+	}
+</style>

src/views/HealthControl/zhpj/jxpj.vue

@@ -0,0 +1,441 @@
+<template>
+	<div>
+		<div class="query mg-b-8">
+			<div class="query-items">
+				<div class="query-item">
+					<div class="lable">年月：</div>
+					<div class="search-input">
+						<el-date-picker v-model="date" type="month" placeholder="选择年月" popper-class="date-select"
+							value-format="YYYY-MM"></el-date-picker>
+					</div>
+				</div>
+				<div class="query-actions">
+					<button class="btn green" @click="handleSubmit">查询</button>
+					<button class="btn green" @click="contrast">对比</button>
+				</div>
+			</div>
+		</div>
+		<div class="table-box">
+			<div class="title">运行评价</div>
+			<ComTable ref="curRef" :data="tableData" :pageSize="20" :pageable="false" height="73vh"
+				v-loading="tableLoading" element-loading-text="拼命加载中.." element-loading-background="rgba(0, 0, 0, 0.8)">
+			</ComTable>
+		</div>
+		<el-dialog title="运行评价对比" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal">
+			<dayinfo :gridDatas="dialogData1" :chartDatas="dialogData2" :column='column' />
+		</el-dialog>
+	</div>
+</template>
+<script>
+	import ComTable from "@/components/coms/table/table-unpage.vue";
+	import Dayinfo from "./dayinfo.vue";
+
+	export default {
+		name: "gradeassessment",
+		components: {
+			ComTable,
+			Dayinfo
+		},
+		data() {
+			let that = this;
+			return {
+				dialogVisible: false,
+				date: "",
+				tableLoading: true,
+				dataIds: new Set(),
+				dialogData1: [],
+				dialogData2: [],
+				column: [],
+				indicator: ["复位及时率(%)", "mttf", "缺陷下单及时率(%)", "缺陷验收及时率(%)", "设备利用小时", "限电损失率(%)","性能损失率(%)", "综合场用电量", "状态转换及时率(%)"],
+				tableData: {
+					column: [{
+							name: "",
+							field: "fj",
+							is_num: false,
+							is_light: false,
+							sortable: false,
+							width: '70px',
+							template: () => {
+								return "<input class='check curCheckBox checkItem' type='CheckBox'/>";
+							},
+							click: function(event, data) {
+								if (event.target.checked == false) {
+									that.dataIds.delete(data.id);
+								}
+								if (event.target.checked) {
+									if (that.dataIds.size < 2) {
+										that.dataIds.add(data.id);
+									} else {
+										event.target.checked = false;
+									}
+								}
+							},
+						},
+						{
+							name: "场站",
+						 field: "wpid",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "综合排名",
+							field: "zpm",
+							is_num: false,
+							is_light: false,
+							width: '100px',
+						},
+						{
+							name: "等级",
+							field: "grade",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+							width: '70px',
+						},
+						{
+						 name: "风能利用率(%)",
+							field: "fnlyl",
+						 is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+							name: "复位及时率(%)",
+							field: "fwjsl",
+							is_num: false,
+							is_light: false,
+						 sortable: true,
+						},
+						{
+							name: "mttf",
+							field: "mttf",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+							name: "平均小风切入风速",
+							field: "pjxfqrfs",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+
+						{
+							name: "缺陷下单及时率(%)",
+						 field: "qxxdjsl",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+							name: "缺陷验收及时率(%)",
+							field: "qxysjsl",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+							name: "设备利用小时",
+							field: "sblyxs",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+							name: "限电损失率(%)",
+							field: "xdssl",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+							name: "性能损失率(%)",
+							field: "xnssl",
+							is_num: false,
+							is_light: false,
+						 sortable: true,
+						},
+						{
+							name: "综合场用电量",
+							field: "zhcydl",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+							name: "状态转换及时率(%)",
+							field: "ztzhjsl",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+						  name: "操作",
+						  field: "sjbz",
+						  is_num: false,
+						  is_light: false,
+						  sortable: true,
+						  id: "id",
+						  template: () => {
+						    return "<el-button type='text' style='cursor: pointer;'>详情</el-button>";
+						  },
+						  click: function (event, data) {
+							  that.contrast(that.dataIds.add(data.id))
+						  },
+						},
+					],
+					data: [],
+				},
+			};
+		},
+		created() {
+			this.date = this.getDate();
+			this.getTable(this.date);
+		},
+		methods: {
+			clearCheckBox() {
+				this.$refs.curRef.clearCheckBox();
+				this.dataIds = new Set();
+			},
+			// 获取表格数据
+			getTable() {
+				let that = this;
+				that.tableLoading = true;
+				that.API.requestData({
+					timeout: 60000,
+					method: "GET",
+					baseURL: "http://10.155.32.4:8034",
+					subUrl: '/evaluation/maintenance',
+					data: {
+						month: that.date
+					},
+					success(res) {
+						that.tableLoading = false;
+						if (res.code === 200) {
+							var data = [];
+							res.data.forEach((item, index) => {
+								item["index"] = index;
+								data[index] = item;
+							});
+							that.tableData.data = data;
+						}
+					},
+					Error(res) {
+						console.log("tag", res);
+					},
+				});
+			},
+			// 查询
+			handleSubmit() {
+				this.clearCheckBox();
+				this.getTable(this.date);
+			},
+			// 日信息对比
+			contrast(one) {
+				var that = this;
+				if (that.dataIds.size == 2 || one) {
+					that.dialogVisible = true;
+					const tmpArr = Array.from(that.dataIds);
+					if(one){
+						const data = {
+							gaid1: tmpArr[0]
+						};
+					}else{
+						const data = {
+							gaid1: tmpArr[0],
+							gaid2: tmpArr[1],
+						};
+					}
+					const dialogData1 = [];
+					that.tableData.data.forEach(ele => {
+						tmpArr.forEach(ele2 => {
+							if (ele.id == ele2) {
+								dialogData1.push(ele)
+							}
+						})
+					})
+					that.dialogData1 = dialogData1;
+					const chartData = [{
+						indicator: that.indicator,
+						data: [],
+					}];
+					const data1 = [],
+						data2 = [];
+					let column = [];
+					chartData[0].indicator.forEach(ele => {
+						that.tableData.column.forEach(ele2 => {
+							if (ele2.name == ele) {
+								column.push({
+									name: ele,
+									field: ele2.field,
+									rank: ele2.field + 'pm',
+									score: ele2.field + 'pf'
+								})
+								let data1Name = '',data2Name = '';
+								dialogData1.forEach((ele3, index3) => {
+									if (index3 == 0) {
+										data1.push({
+											name: ele,
+											data1: ele3[ele2.field]
+										})
+										data1Name = ele3.wpid
+									}
+									
+									if(that.dataIds.size == 2){
+										if (index3 == 1) {
+											data2.push({
+												name: ele,
+												data1: ele3[ele2.field]
+											})
+											data2Name = ele3.wpid
+										}
+									}
+								})
+								data1.push({name: data1Name});
+								if(that.dataIds.size == 2){
+									data2.push({name: data2Name});
+								}
+							}
+						})
+					})
+					that.column = column;
+					if (data1) {
+						chartData[0].data.push(that.getChartData(data1,chartData[0].indicator));
+					}
+					if(that.dataIds.size == 2){
+						if (data2) {
+							chartData[0].data.push(that.getChartData(data2,chartData[0].indicator));
+						}
+					}
+					that.dialogData2 = chartData;
+				}
+				this.clearCheckBox();
+			},
+			getChartData(resData,indicator) {
+				const chartData = {};
+				const rowMap = {};
+				resData.forEach(function(rowData, index) {
+					rowMap[rowData["name"]] = rowData["data1"];
+				});
+				chartData["name"] = resData[resData.length - 1]["name"];
+				chartData["value"] = [];
+				indicator.forEach(ele=>{
+					chartData["value"].push(rowMap[ele]);
+				})
+				return chartData;
+			},
+			// 获取日期
+			getDate() {
+				var date = new Date();
+				var year = date.getFullYear(),
+					month = date.getMonth() + 1,
+					day = date.getDate() - 1;
+				month >= 1 && month <= 9 ? (month = "0" + month) : "";
+				day >= 0 && day <= 9 ? (day = "0" + day) : "";
+				return year + "-" + month;
+			},
+		},
+	};
+</script>
+<style scoped>
+	.newsDiv {
+		color: rgba(255, 255, 255, 0.75);
+		background-color: rgba(255, 255, 255, 0.1);
+		margin-bottom: 8px;
+		line-height: 3.4259vh;
+		padding: 0 15px;
+	}
+
+	.newspan {
+		line-height: 30px;
+		cursor: pointer;
+		padding: 0 1vw;
+		margin: 0 2px;
+		color: #9ca5a8;
+		transition: color 0.2s ease-in-out;
+		position: relative;
+	}
+
+	.newspan:hover {
+		background: linear-gradient(to top,
+				rgba(5, 187, 76, 0.5),
+				rgba(5, 187, 76, 0));
+		color: white;
+		position: relative;
+	}
+
+	.newspan:hover::after {
+		content: "";
+		position: absolute;
+		width: 100%;
+		height: 0.463vh;
+		border: 0.093vh solid #05bb4c;
+		border-top: 0;
+		left: 0;
+		bottom: 0;
+		box-sizing: border-box;
+	}
+
+	.active {
+		background: linear-gradient(to top,
+				rgba(5, 187, 76, 0.5),
+				rgba(5, 187, 76, 0));
+		color: white;
+		position: relative;
+	}
+
+	.active::after {
+		content: "";
+		position: absolute;
+		width: 100%;
+		height: 0.463vh;
+		border: 0.093vh solid #05bb4c;
+		border-top: 0;
+		left: 0;
+		bottom: 0;
+		box-sizing: border-box;
+	}
+
+	.title {
+		background: rgba(255, 255, 255, 0.1);
+		margin-bottom: 8px;
+		padding: 1vh;
+	}
+</style>
+<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>

src/views/HealthControl/zhpj/yxpj.vue

@@ -0,0 +1,441 @@
+<template>
+	<div>
+		<div class="query mg-b-8">
+			<div class="query-items">
+				<div class="query-item">
+					<div class="lable">年月：</div>
+					<div class="search-input">
+						<el-date-picker v-model="date" type="month" placeholder="选择年月" popper-class="date-select"
+							value-format="YYYY-MM"></el-date-picker>
+					</div>
+				</div>
+				<div class="query-actions">
+					<button class="btn green" @click="handleSubmit">查询</button>
+					<button class="btn green" @click="contrast">对比</button>
+				</div>
+			</div>
+		</div>
+		<div class="table-box">
+			<div class="title">运行评价</div>
+			<ComTable ref="curRef" :data="tableData" :pageSize="20" :pageable="false" height="73vh"
+				v-loading="tableLoading" element-loading-text="拼命加载中.." element-loading-background="rgba(0, 0, 0, 0.8)">
+			</ComTable>
+		</div>
+		<el-dialog title="运行评价对比" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal">
+			<dayinfo :gridDatas="dialogData1" :chartDatas="dialogData2" :column='column' />
+		</el-dialog>
+	</div>
+</template>
+<script>
+	import ComTable from "@/components/coms/table/table-unpage.vue";
+	import Dayinfo from "./dayinfo.vue";
+
+	export default {
+		name: "gradeassessment",
+		components: {
+			ComTable,
+			Dayinfo
+		},
+		data() {
+			let that = this;
+			return {
+				dialogVisible: false,
+				date: "",
+				tableLoading: true,
+				dataIds: new Set(),
+				dialogData1: [],
+				dialogData2: [],
+				column: [],
+				indicator: ["复位及时率(%)", "mttf", "缺陷下单及时率(%)", "缺陷验收及时率(%)", "设备利用小时", "限电损失率(%)","性能损失率(%)", "综合场用电量", "状态转换及时率(%)"],
+				tableData: {
+					column: [{
+							name: "",
+							field: "fj",
+							is_num: false,
+							is_light: false,
+							sortable: false,
+							width: '70px',
+							template: () => {
+								return "<input class='check curCheckBox checkItem' type='CheckBox'/>";
+							},
+							click: function(event, data) {
+								if (event.target.checked == false) {
+									that.dataIds.delete(data.id);
+								}
+								if (event.target.checked) {
+									if (that.dataIds.size < 2) {
+										that.dataIds.add(data.id);
+									} else {
+										event.target.checked = false;
+									}
+								}
+							},
+						},
+						{
+							name: "场站",
+						 field: "wpid",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "综合排名",
+							field: "zpm",
+							is_num: false,
+							is_light: false,
+							width: '100px',
+						},
+						{
+							name: "等级",
+							field: "grade",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+							width: '70px',
+						},
+						{
+						 name: "风能利用率(%)",
+							field: "fnlyl",
+						 is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+							name: "复位及时率(%)",
+							field: "fwjsl",
+							is_num: false,
+							is_light: false,
+						 sortable: true,
+						},
+						{
+							name: "mttf",
+							field: "mttf",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+							name: "平均小风切入风速",
+							field: "pjxfqrfs",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+
+						{
+							name: "缺陷下单及时率(%)",
+						 field: "qxxdjsl",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+							name: "缺陷验收及时率(%)",
+							field: "qxysjsl",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+							name: "设备利用小时",
+							field: "sblyxs",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+							name: "限电损失率(%)",
+							field: "xdssl",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+							name: "性能损失率(%)",
+							field: "xnssl",
+							is_num: false,
+							is_light: false,
+						 sortable: true,
+						},
+						{
+							name: "综合场用电量",
+							field: "zhcydl",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+							name: "状态转换及时率(%)",
+							field: "ztzhjsl",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+						},
+						{
+						  name: "操作",
+						  field: "sjbz",
+						  is_num: false,
+						  is_light: false,
+						  sortable: true,
+						  id: "id",
+						  template: () => {
+						    return "<el-button type='text' style='cursor: pointer;'>详情</el-button>";
+						  },
+						  click: function (event, data) {
+							  that.contrast(that.dataIds.add(data.id))
+						  },
+						},
+					],
+					data: [],
+				},
+			};
+		},
+		created() {
+			this.date = this.getDate();
+			this.getTable(this.date);
+		},
+		methods: {
+			clearCheckBox() {
+				this.$refs.curRef.clearCheckBox();
+				this.dataIds = new Set();
+			},
+			// 获取表格数据
+			getTable() {
+				let that = this;
+				that.tableLoading = true;
+				that.API.requestData({
+					timeout: 60000,
+					method: "GET",
+					baseURL: "http://10.155.32.4:8034",
+					subUrl: '/evaluation/operation',
+					data: {
+						month: that.date
+					},
+					success(res) {
+						that.tableLoading = false;
+						if (res.code === 200) {
+							var data = [];
+							res.data.forEach((item, index) => {
+								item["index"] = index;
+								data[index] = item;
+							});
+							that.tableData.data = data;
+						}
+					},
+					Error(res) {
+						console.log("tag", res);
+					},
+				});
+			},
+			// 查询
+			handleSubmit() {
+				this.clearCheckBox();
+				this.getTable(this.date);
+			},
+			// 日信息对比
+			contrast(one) {
+				var that = this;
+				if (that.dataIds.size == 2 || one) {
+					that.dialogVisible = true;
+					const tmpArr = Array.from(that.dataIds);
+					if(one){
+						const data = {
+							gaid1: tmpArr[0]
+						};
+					}else{
+						const data = {
+							gaid1: tmpArr[0],
+							gaid2: tmpArr[1],
+						};
+					}
+					const dialogData1 = [];
+					that.tableData.data.forEach(ele => {
+						tmpArr.forEach(ele2 => {
+							if (ele.id == ele2) {
+								dialogData1.push(ele)
+							}
+						})
+					})
+					that.dialogData1 = dialogData1;
+					const chartData = [{
+						indicator: that.indicator,
+						data: [],
+					}];
+					const data1 = [],
+						data2 = [];
+					let column = [];
+					chartData[0].indicator.forEach(ele => {
+						that.tableData.column.forEach(ele2 => {
+							if (ele2.name == ele) {
+								column.push({
+									name: ele,
+									field: ele2.field,
+									rank: ele2.field + 'pm',
+									score: ele2.field + 'pf'
+								})
+								let data1Name = '',data2Name = '';
+								dialogData1.forEach((ele3, index3) => {
+									if (index3 == 0) {
+										data1.push({
+											name: ele,
+											data1: ele3[ele2.field]
+										})
+										data1Name = ele3.wpid
+									}
+									
+									if(that.dataIds.size == 2){
+										if (index3 == 1) {
+											data2.push({
+												name: ele,
+												data1: ele3[ele2.field]
+											})
+											data2Name = ele3.wpid
+										}
+									}
+								})
+								data1.push({name: data1Name});
+								if(that.dataIds.size == 2){
+									data2.push({name: data2Name});
+								}
+							}
+						})
+					})
+					that.column = column;
+					if (data1) {
+						chartData[0].data.push(that.getChartData(data1,chartData[0].indicator));
+					}
+					if(that.dataIds.size == 2){
+						if (data2) {
+							chartData[0].data.push(that.getChartData(data2,chartData[0].indicator));
+						}
+					}
+					that.dialogData2 = chartData;
+				}
+				this.clearCheckBox();
+			},
+			getChartData(resData,indicator) {
+				const chartData = {};
+				const rowMap = {};
+				resData.forEach(function(rowData, index) {
+					rowMap[rowData["name"]] = rowData["data1"];
+				});
+				chartData["name"] = resData[resData.length - 1]["name"];
+				chartData["value"] = [];
+				indicator.forEach(ele=>{
+					chartData["value"].push(rowMap[ele]);
+				})
+				return chartData;
+			},
+			// 获取日期
+			getDate() {
+				var date = new Date();
+				var year = date.getFullYear(),
+					month = date.getMonth() + 1,
+					day = date.getDate() - 1;
+				month >= 1 && month <= 9 ? (month = "0" + month) : "";
+				day >= 0 && day <= 9 ? (day = "0" + day) : "";
+				return year + "-" + month;
+			},
+		},
+	};
+</script>
+<style scoped>
+	.newsDiv {
+		color: rgba(255, 255, 255, 0.75);
+		background-color: rgba(255, 255, 255, 0.1);
+		margin-bottom: 8px;
+		line-height: 3.4259vh;
+		padding: 0 15px;
+	}
+
+	.newspan {
+		line-height: 30px;
+		cursor: pointer;
+		padding: 0 1vw;
+		margin: 0 2px;
+		color: #9ca5a8;
+		transition: color 0.2s ease-in-out;
+		position: relative;
+	}
+
+	.newspan:hover {
+		background: linear-gradient(to top,
+				rgba(5, 187, 76, 0.5),
+				rgba(5, 187, 76, 0));
+		color: white;
+		position: relative;
+	}
+
+	.newspan:hover::after {
+		content: "";
+		position: absolute;
+		width: 100%;
+		height: 0.463vh;
+		border: 0.093vh solid #05bb4c;
+		border-top: 0;
+		left: 0;
+		bottom: 0;
+		box-sizing: border-box;
+	}
+
+	.active {
+		background: linear-gradient(to top,
+				rgba(5, 187, 76, 0.5),
+				rgba(5, 187, 76, 0));
+		color: white;
+		position: relative;
+	}
+
+	.active::after {
+		content: "";
+		position: absolute;
+		width: 100%;
+		height: 0.463vh;
+		border: 0.093vh solid #05bb4c;
+		border-top: 0;
+		left: 0;
+		bottom: 0;
+		box-sizing: border-box;
+	}
+
+	.title {
+		background: rgba(255, 255, 255, 0.1);
+		margin-bottom: 8px;
+		padding: 1vh;
+	}
+</style>
+<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>