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

<template>
	<div class="leftTop">
		<div class="header">
			<div class="hLeft">
				人员履职情况分析
			</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>{{ item.name }}</div>
						<div>{{ item.count }}</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>
	</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 } from 'element-plus'

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

const handleClick = (tab: TabsPaneContext, event: Event) => {
//   console.log(tab, event)
//   console.log('tab',tab.index)
//   console.log('activeName',activeName.value)
//   if(activeName.value === 'first') console.log('1')
//   if(activeName.value === 'second') console.log('2')
//   if(activeName.value === 'third') console.log('3')
	activeIndex.value = tab.index
	console.log('activeIndex',activeIndex.value)
}
const tabList = [
  { sortLine: '1', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
  { sortLine: '2', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
  { sortLine: '3', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
  { sortLine: '4', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
  { sortLine: '5', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'},
]
onMounted( async () => {
	
})
// watch(
// 	() => props.projectData,
// 	newVal => {
// 		// console.log(newVal, "newVal");
// 		if (newVal) {
// 			// props.xData = newVal;
// 			projectData.value = newVal;
// 			projectLocal.value =
// 				projectData.value.provinceName +
// 				projectData.value.cityName +
// 				projectData.value.areaName +
// 				projectData.value.projectAddress;
// 		}
// 	}
// );
</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: 100%;
	.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;
}
</style>