zhgdlarge/src/views/commandScreen/commandCenter/leftTop.vue

<template>
	<div class="leftTop">
		<div class="header">
			<div class="hLeft" @click="dialogVisible = true">人员履职情况分析</div>
			<div class="hRight">
				<el-date-picker
					style="width: 85%"
					v-model="dateRange"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					:size="size"
				/>
			</div>
		</div>
		<div class="content">
			<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
				<el-tab-pane :label="'整改人'" name="first"></el-tab-pane>
				<el-tab-pane :label="'检查人'" name="second"></el-tab-pane>
				<el-tab-pane :label="'按分包单位分析'" name="third"></el-tab-pane>
			</el-tabs>
			<div class="tabList">
				<div>排名</div>
				<div v-if="activeIndex === '0' || activeIndex === '1'">姓名</div>
				<div v-if="activeIndex === '2'">分包单位</div>
				<div v-if="activeIndex === '0' || activeIndex === '2'">整改数量</div>
				<div v-if="activeIndex === '1'">发起隐患处</div>
				<div>整改率</div>
				<div>及时整改率</div>
			</div>
			<div class="listBox">
				<el-scrollbar height="150">
					<div v-for="(item, index) in tabList" :key="index" class="listStyle">
						<div>{{ item.sortLine }}</div>
						<div v-if="activeIndex === '0' || activeIndex === '1'">{{ item.name }}</div>
						<div v-if="activeIndex === '2'">{{item.company}}</div>
						<div v-if="activeIndex === '0' || activeIndex === '2'">{{item.count}}</div>
						<div v-if="activeIndex === '1'">{{item.count}}</div>
						<div>{{item.immediateRate}}</div>
						<div>{{item.immediateRate}}</div>
					</div>
				</el-scrollbar>
				<div class="notoDta" v-if="tabList.length == 0">
					<img src="@/assets/images/noData.png" alt="" />
					<p>暂无数据</p>
				</div>
			</div>
		</div>
	<el-dialog v-model="dialogVisible" title="人员履职情况分析(整改人)" width="1200" >
		<div class="dialogContainer">
			<div class="tabList">
				<div>姓名</div>
				<div>整改总数</div>
				<div>超期整改数</div>
				<div>超期未整改数</div>
				<div>整改率</div>
				<div>及时整改率</div>
			</div>
			<div class="listBox">
				<el-scrollbar height="350">
					<div v-for="(item, index) in tabList" :key="index" class="listStyle">
						<div>{{ item.name }}</div>
						<div>{{ item.count }}</div>
						<div>{{ item.count }}</div>
						<div>{{ 0 }}</div>
						<div>{{ item.rate }}</div>
						<div>{{ item.immediateRate }}</div>
					</div>
				</el-scrollbar>
				<div class="notoDta" v-if="tabList.length == 0">
					<img src="@/assets/images/noData.png" alt="" />
					<p>暂无数据</p>
				</div>
			</div>
		</div>
	</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { GlobalStore } from "@/stores";
import { ref, onMounted, watch } from "vue";
import { getStageOption } from "@/api/modules/projectOverview";
import type { TabsPaneContext, ElMessageBox } from "element-plus";

const dialogVisible = ref(false);

const activeName = ref("first");
const activeIndex = ref("1" as any);
let dateRange = ref([] as any);

const handleClick = (tab: TabsPaneContext, event: Event) => {
	activeIndex.value = tab.index;
	console.log("activeIndex", activeIndex.value);
};
const tabList = [
	{ sortLine: "1", name: "谢明泉", count: "2", rate: "100%", immediateRate: "100%",company:'分包单位' },
	{ sortLine: "2", name: "王福明", count: "2", rate: "100%", immediateRate: "100%",company:'分包单位' },
	{ sortLine: "3", name: "张启程", count: "2", rate: "100%", immediateRate: "100%",company:'分包单位' },
	{ sortLine: "4", name: "李渊海", count: "2", rate: "100%", immediateRate: "100%",company:'分包单位' },
	{ sortLine: "5", name: "黄明昌", count: "1", rate: "100%", immediateRate: "100%",company:'分包单位' },
	{ sortLine: "6", name: "叶文远", count: "2", rate: "100%", immediateRate: "100%",company:'分包单位' },
	{ sortLine: "7", name: "丁明昌", count: "1", rate: "100%", immediateRate: "100%",company:'分包单位' },
	{ sortLine: "8", name: "黄石明", count: "1", rate: "100%", immediateRate: "100%",company:'分包单位' },
	{ sortLine: "9", name: "肖明远", count: "1", rate: "100%", immediateRate: "100%",company:'分包单位' },
	{ sortLine: "10", name: "张冠名", count: "1", rate: "100%", immediateRate: "100%",company:'分包单位' },
	{ sortLine: "11", name: "石慧生", count: "1", rate: "100%", immediateRate: "100%",company:'分包单位' },
];
onMounted(async () => {});
</script>
<style lang="scss" scoped>
.leftTop {
	background: url("@/assets/images/commandScreen/card-left-top.png") no-repeat;
	// background-color: #fff;
	background-size: 100% 100%;
	width: 100%;
	height: 35%;
	.header {
		// width: 100%;
		// height: 100%;
		display: flex;
		// align-items: center;
		justify-content: space-between;
		padding: 20px 20px;
		border-bottom: 1px solid #0059ff;
		.hLeft {
			width: 50%;
			color: white;
		}
		.hRight {
			width: 50%;
		}
	}
	.content {
		padding: 0 20px;
		::v-deep .el-tabs__item {
			color: #fff;
		}
		::v-deep .el-tabs__nav-wrap::after {
			background-color: rgba(255, 0, 0, 0);
		}
		.tabList {
			display: flex;
			width: 100%;
			height: 14%;
			// background: url("@/assets/images/dustNoise/rightBottom.png") no-repeat;
			background-color: #00224f;
			background-size: 100% 100%;
			left: 75.5%;
			top: 75%;
			color: #fff;
			font-size: 14px;
			line-height: 30px;
			justify-content: space-around;
			text-align: center;

			div {
				width: 100px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		.listBox {
			// height: 10%;
			.listStyle {
				display: flex;
				justify-content: space-around;
				color: #fff;
				height: 12%;
				line-height: 25px;
				font-size: 12px;
				text-align: center;
				div {
					width: 100px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
			.listStyle:hover {
				background: #003c84;
			}
		}
		.notoDta {
			top: 40%;
			width: 30%;
			left: 35%;
			text-align: center;
			position: absolute;
			img {
				width: 40%;
				margin: 5% 30%;
			}
			p {
				color: #fff;
				font-size: 14px;
				margin: -6% 37%;
			}
		}
	}
}
::v-deep .el-input__inner {
	color: #fff;
}
::v-deep .el-select .el-input .el-select__caret {
	color: #fff;
}
::v-deep .el-input__wrapper {
	width: 85%;
	height: 0%;
	background: #0d2956;
}
::v-deep .el-range-separator {
	color: #ccc;
	font-size: 10px;
}
::v-deep .el-range-input {
	color: #ccc;
	font-size: 10px;
}
.dialogContainer {
	padding: 0 50px;
	// height: 600px;
	::v-deep .el-tabs__item {
		color: #fff;
	}
	::v-deep .el-tabs__nav-wrap::after {
		background-color: rgba(255, 0, 0, 0);
	}
	.tabList {
		display: flex;
		width: 100%;
		height: 14%;
		background: url("@/assets/images/dustNoise/rightBottom.png") no-repeat;
		// background-color: #00224f;
		background-size: 100% 100%;
		left: 75.5%;
		top: 75%;
		color: #fff;
		font-size: 14px;
		line-height: 30px;
		justify-content: space-around;
		text-align: center;

		div {
			width: 100px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	.listBox {
		// height: 10%;
		.listStyle {
			display: flex;
			justify-content: space-around;
			color: #fff;
			height: 12%;
			line-height: 25px;
			font-size: 12px;
			text-align: center;
			div {
				width: 100px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		.listStyle:hover {
			background: #003c84;
		}
	}
	.notoDta {
		top: 40%;
		width: 30%;
		left: 35%;
		text-align: center;
		position: absolute;
		img {
			width: 40%;
			margin: 5% 30%;
		}
		p {
			color: #fff;
			font-size: 14px;
			margin: -6% 37%;
		}
	}
}
::v-deep .el-dialog{
	background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
	// background-color: #fff;
	background-size: 100% 100%;
	margin-top: 12%;
}
::v-deep .el-dialog__headerbtn{
	right: 35px;
	top: 25px;
}
::v-deep .el-dialog .el-dialog__header .el-dialog__title{
	margin-left: 30px;
	margin-top: 10px;
	font-size: 18px;
	color: #fff;
	position: absolute;
}
::v-deep el-dialog__header{
	margin-top: 20px;
}
</style>