sis_zhfx/src/views/HealthControl/zhpj/yxpj.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: ["复位及时率(%)", "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>