<template>
<div class = container ref="container">
<div class="header-container">
<!-- 左侧
控件：日期和部门 -->
<div class="left-controls">
<!-- 日期选择器 -->
<div class="time-box">
<el-date-picker
popper-class="date-popper"
:teleported="true"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
style="width: 1
8rem; margin: 0
7px;"
size = "small"
class= "date-picker"
v-model="
selectedDate"
placeholder="选择日期"
type="date"
></el-date-picker>
</div>
<!-- 部门多选框 -->
<div class="department-box">
<el-
select
v-model="
selectedDepartment"
multiple
placeholder="选择部门"
style="width: 20rem;"
size = "small"
>
<el-option label="生产部" value="production" />
<el-option label="技术部" value="tech" />
<el-option label="质检部" value="quality" />
</el-
select>
</div>
</div>
<div class="header-title">制造部人力管理</div>
</div>
<div class="page-grid-container">
<div class="grid-left-1">
<AlertInfoPage ref="alertInfoPageRef"></AlertInfoPage>
</div>
<div class="grid-left-2 ">
<div class="card-container">
<div class="card-header">
<span class="title">招聘补充</span>
<span class="more">更多> </span>
</div>
<div class="card-content">
<div class="progress-flex">
<div class="progress-row">
<div class="progress-item">
<div class="label-left">社招<br>补充</div>
<div class = "progress-chart">
<ProgressChart1 :option = "progressChartOption1" ref="progressChart1"></ProgressChart1>
</div>
<div class="target">目标 {{ progressData1.target }}</div>
</div>
<div class="progress-item">
<div class="label-left">校招<br>补充</div>
<div class="progress-chart">
<ProgressChart2 :option = "progressChartOption2" ref="progressChart2"></ProgressChart2>
</div>
<div class="target">目标 {{ progressData2.target }}</div>
</div>
</div>
<div class="progress-row">
<div class="progress-item">
<div class="label-left">劳务<br>补充</div>
<div class = "progress-chart">
<ProgressChart3 :option = "progressChartOption3" ref="progressChart3"></ProgressChart3>
</div>
<div class="target">目标 {{ progressData3.target }}</div>
</div>
<div class="progress-item">
<div class="label-left">共享<br>进度</div>
<div class="progress-chart">
<ProgressChart4 :option = "progressChartOption4" ref="progressChart4"></ProgressChart4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid-left-3 ">
<div class="card-container">
<div class="card-header">
<span class="title">离职监控</span>
</div>
<div class="card-content">
<!-- 这里放你的图表 -->
<div class="chart-container">
<TurnoverChart :option = "turnoverOption" ref="turnoverChart"></TurnoverChart>"
</div>
</div>
</div>
</div>
<div class="grid-middle-1 ">
<Sta
ffStatisticsPage></Sta
ffStatisticsPage>
</div>
<div class="grid-middle-2 ">
<div class="map-container">
<ChinaMapChart :option = "mapOption" ref="mapChart"></ChinaMapChart>
</div>
</div>
<div class="grid-middle-3 ">
<div class="card-container-noBackground">
<div class="card-header">
<span class="title">人效监控</span>
</div>
<div class="card-content">
<!-- 这里放你的图表 -->
<div class="chart-container">
<E
ffic
iencyChart :option = "e
ffic
iencyOption" ref="e
ffic
iencyChart"></E
ffic
iencyChart>
</div>
</div>
</div>
</div>
<div class="grid-right-1 ">
<div class="card-container">
<div class="card-header">
<span class="title">人员结构</span>
</div>
<div class="card-content">
<!-- 这里放你的图表 -->
<div class="chart-container">
<Sta
ffStructureChart :option = "sta
ffStructureOption" ref="sta
ffStructureChart"></Sta
ffStructureChart>
</div>
</div>
</div>
</div>
<div class="grid-right-2 ">
<div class="card-container">
<div class="card-header">
<span class="title">正式工</span>
</div>
<div class="card-content">
<!-- 这里放你的图表 -->
<div class="chart-container">
<RegularSta
ffChart :option = "regularOption" ref="regularChart"></RegularSta
ffChart>
</div>
</div>
</div>
</div>
<div class="grid-right-3 ">
<AttendanceTrackingPage></AttendanceTrackingPage>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
@use '@/styles/variable.scss';
.container {
position: relative;
width: 100vw;
height: 100vh; /* 或根据需要调整高度 */
margin: 0;
padding: 0;
background-image: url('@/assets/img/bg/containerBg.png'); /* 替换为您的背景图片路径 */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
overflow: hidden;
}
.page-grid-container {
display: grid;
grid-template-columns:
73rem
73rem
73rem;
grid-template-rows: 30.5rem 30.5rem 30.5rem;
gap: 2rem;
justify-content: center; /* ← 水平
居中 */
// 左
& > .grid-left-1 {
grid-column: 1;
grid-row: 1;
}
& > .grid-left-2 {
grid-column: 1;
grid-row: 2;
}
& > .grid-left-3 {
grid-column: 1;
grid-row: 3;
}
// 中列
& > .grid-middle-1 {
grid-column: 2;
grid-row: 1;
}
& > .grid-middle-2 {
grid-column: 2;
grid-row: 2;
}
& > .grid-middle-3 {
grid-column: 2;
grid-row: 3;
}
// 右列
& > .grid-right-1 {
grid-column: 3;
grid-row: 1;
}
& > .grid-right-2 {
grid-column: 3;
grid-row: 2;
}
& > .grid-right-3 {
grid-column: 3;
grid-row: 3;
}
.border {
border: 1px solid #000000;
}
}
.header-container {
height:
8rem;
background-repeat: no-repeat;
position: relative;
background-size: contain;
background-position: center;
// background-size: 100% 100%; //使图背景图片填充整个容器
background-image: url("@/assets/img/bg/titleBg.png");
display: flex; /* 关键：启用 flex 布局 */
align-items: center; /*
垂直居中 */
justify-content: center; /* ← 关键：水平
居中 */
padding: 0 1rem;
margin-top: 0;
margin-right: auto;
margin-bottom: 2.0rem;
margin-left: auto;
width: 100%;
}
.left-controls {
position: absolute;
left: 2rem;
top: 50%;
transform: translateY(-50%);
display: flex;
gap: 0.1rem;
align-items: center;
}
.header-title {
font-size: 3rem;
font-weight: bold;
text-align: center;
color: #1fb0d
8;
z-index: 10;
}
.card-container {
width: 100%; /* 减去边框宽度 */
max-width: 100%; /* 确保不撑开 */
height: 100%; /* 新增：占满父容器高度 */
background-color: rgba(0, 31, 5
7, 0.65); /* 深蓝半透明背景 */
border-image: linear-grad
ient(90deg, #40
845e, #40
845e, #40
845e) 1;
box-shadow: 0 4px 12px rgba(0, 1
70, 255, 0.3);
overflow: hidden; /* 防止
内容溢出 */
margin: 0 auto; /*
居中对齐 */
box-shadow:
// 0 0
8px rgba(0, 1
70, 255, 0.6), /* 外发光 */
inset 0 0 10px rgba(0, 1
70, 255, 0.2); /* 内发光，增加立体感 */
overflow: hidden;
}
.card-container-noBackground {
width: 100%; /* 减去边框宽度 */
max-width: 100%; /* 确保不撑开 */
height: 100%; /* 新增：占满父容器高度 */
overflow: hidden; /* 防止
内容溢出 */
margin: 0 auto; /*
居中对齐 */
overflow: hidden;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.
8rem 1.
8rem;
background: linear-grad
ient(to bottom,#4c
81
80, #2e5155,0.3);
background-color: rgba(12,
72,
73, 0.5); /* 半透明深蓝底 */
height:
7%;
font-size: 1.
7rem;
border-top: 0.25rem solid #419
89
7;
}
.card-content {
height:
87%;
}
.title {
display: flex;
align-items: center;
gap: 1rem;
color:#2cb
8a0;
font-weight: bold; /* ← 加粗
文字 */
}
/* 左侧短横线图标 */
.title::before {
content: '';
width: 1.
7rem;
height: 0.55rem;
background: linear-grad
ient(to right, #00aa
ff, #00c
8ff);
border-radius: 2rem;
}
.more {
color: #00aa
ff;
cursor: pointer;
font-size: 12px;
}
.chart-container {
width: 100%;
height: 100%;
z-index: 1;
}
/* 添加以下 CSS 样式 */
.progress-row {
display: flex;
justify-content: space-between;
height: 12.5rem;
width: 100%;
/* 确保父容器宽度是100% */
box-sizing: border-box;
}
.progress-item {
display: flex;
position: relative;
align-items: center;
width: 50%; /* 关键：设置宽度为50% */
box-sizing: border-box; /* 关键：确保内部元素不会撑大容器 */
padding: 0 5rem; /* 添加内边距避免
内容紧贴边界 */
z-index: 1;
}
.label-left{
width: 5rem;
font-size: 1.
85rem;
font-weight: bold;
color: #bfe9f2;
white-space: pre-line;
}
.target{
position: absolute;
font-size: 1.5rem;
font-weight: bold;
color: #bfe9f2;
top:
85%;
left: 39%;
transform: translateX(-39);
}
/* 确保父容器宽度是100% */
.progress-flex {
width: 100%;
box-sizing: border-box;
}
.progress-chart {
height: 13rem;
width: 15rem;
}
.map-container{
width: 100%;
height: 100%;
}
/* 日期弹窗样式 */
:deep(.el-picker__popper.el-popper) {
background-color: #0
72330 !important; /* 青绿色背景 */
border: 0.2rem solid rgba(99, 199, 169, 0.
7);
}
.date-popper {
background: transparent !important;
}
:deep(.el-date-picker) {
background: transparent !important;
--el-datepicker-o
ff-text-color: rgba(1
75, 1
75, 1
75, 0.6);
--el-datepicker-header-text-color: #e0f
7fa;
--el-datepicker-active-color: rgba(99, 199, 169, 0.
8);
--el-datepicker-hover-text-color: rgba(99, 199, 169, 0.95);
--el-datepicker-icon-color: rgba(255, 255, 255, 0.
7);
--el-date-picker-input-text-color: #e0f
7fa;
}
:deep(.el-picker-panel__body-wrapper) {
background: transparent !important;
}
:deep(.el-picker-panel__body) {
background: transparent !important;
}
/* 当天颜色 */
:deep(.el-date-table td.today .el-date-table-cell__text) {
color: #45936
7 !important;
font-weight: bold;
}
/* 标题颜色 */
:deep(.el-date-picker__header-label) {
color: #e0f
7fa !important;
}
/* 当月日期颜色 */
:deep(.el-date-table__row .available) {
color: rgba(255, 255, 255, 0.95) !important;
}
/* 小菱形颜色 */
:deep(.el-picker__popper.el-popper[data-popper-placement^=top] .el-popper__arrow:before) {
background-color: rgba(99, 199, 169, 0.95) !important;
}
/* 日期选择器的input框样式 */
.time-box :deep(.el-input__wrapper) {
background-color: rgba(99, 199, 169, 0.3) !important;
border: 0.2rem solid rgba(99, 199, 169, 0.5);
border-radius: 2px;
transition: all 0.3s ease;
}
.time-box :deep(.el-input__inner) {
color: #e0f
7fa !important;
background: transparent !important;
font-weight: 500;
}
.time-box :deep(.el-input__wrapper.is-focus) {
box-shadow: 0 0 0 0.12rem rgba(99, 199, 169, 0.6) inset;
border-color: rgba(99, 199, 169, 0.
8) !important;
}
.time-box :deep(.el-input__prefix) {
color: #e0f
7fa !important;
}
// 修改部门选框的背景色
.department-box :deep(.el-
select__wrapper) {
background-color: rgba(99, 199, 169, 0.3) !important;// 替换为你想要的颜色代码
border-radius: 2px;
}
.department-box :deep(.el-
select) {
box-shadow: 0 0 0 0.12rem rgba(99, 199, 169, 0.6) inset;
}
// 下箭头样式
.department-box :deep(.el-
select__caret){
color: #
fffffffe !important;
}
.department-box :deep(.el-input__inner) {
--el-input-placeholder-color: #3366
ff !important;
}
.department-box :deep(.el-
select__dropdown_item.is-
selected){
color: #2cb
8a0 !important;
}
</style>
这个部门多选框在选中回显时超出宽度显示会自动换行，而我不想要这种效果，帮我修改，在超出宽度限制时直接溢出或用省略号表示就好
本文详细介绍了 CSS 中 padding 属性的使用方法及实例，展示了如何通过 padding 控制元素内边距，实现网页布局的精确调整。
扫一扫
575
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
