sis_zhfx/src/views/HealthControl/zhpj/jxpj.vue

<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: ["风能利用率(%)","计划检修损失率(%)","非计划检修损失率(%)","缺陷下单及时率(%)","到达消缺地点及时率(%)","真实消缺及时率(%)","MTBF(小时)","MTTR(小时)"],
				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: "jhjxssl",
							is_num: false,
							is_light: false,
							sortable: true,
						},
						{
							name: "非计划检修损失率(%)",
							field: "fjhjxssl",
							is_num: false,
							is_light: false,
							sortable: true,
						},
						{
							name: "缺陷单接单及时率(%)",
							field: "qxdjdjsl",
							is_num: false,
							is_light: false,
							sortable: true,
						},
						{
							name: "到达消缺地点及时率(%)",
							field: "ddxqddjsl",
							is_num: false,
							is_light: false,
							sortable: true,
						},
						{
							name: "真实消缺及时率(%)",
							field: "zsxqjsl",
							is_num: false,
							is_light: false,
							sortable: true,
						},
						{
							name: "MTBF(小时)",
							field: "mtbf",
							is_num: false,
							is_light: false,
							sortable: true,
						},
						{
							name: "MTTR(小时)",
							field: "mttr",
							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>