|
|
@@ -131,31 +131,91 @@
|
|
|
</dd>
|
|
|
</dl>
|
|
|
</div>
|
|
|
- <div>
|
|
|
+ </div>
|
|
|
+ <div class="back-line-message">
|
|
|
+ <div style="width: 100%">
|
|
|
<dl>
|
|
|
- <dt><img src="@/assets/img/users.png" alt="" /></dt>
|
|
|
+ <dt><img src="@/assets/img/inline.png" alt="" /></dt>
|
|
|
<dd>
|
|
|
<p class="other-module">
|
|
|
在职分布
|
|
|
<span class="other">
|
|
|
<span>
|
|
|
- <i :style="{ background: '#3ECBC4' }"></i>
|
|
|
+ <i :style="{ background: '#78D3F8' }"></i>
|
|
|
+ <a>修改待审核</a>
|
|
|
+ </span>
|
|
|
+ <span>
|
|
|
+ <i :style="{ background: '#65789B' }"></i>
|
|
|
+ <a>修改审核驳回</a>
|
|
|
+ </span>
|
|
|
+ <span>
|
|
|
+ <i :style="{ background: '#5B8FF9' }"></i>
|
|
|
<a>在职</a>
|
|
|
</span>
|
|
|
<span>
|
|
|
- <i :style="{ background: '#F2657D' }"></i>
|
|
|
+ <i :style="{ background: '#CDDDFD' }"></i>
|
|
|
<a>离司</a>
|
|
|
</span>
|
|
|
+ <span>
|
|
|
+ <i :style="{ background: '#F6BD16' }"></i>
|
|
|
+ <a>入司待审核</a>
|
|
|
+ </span>
|
|
|
+ <span>
|
|
|
+ <i :style="{ background: '#7262FD' }"></i>
|
|
|
+ <a>入司审核驳回</a>
|
|
|
+ </span>
|
|
|
+ <span>
|
|
|
+ <i :style="{ background: '#61DDAA' }"></i>
|
|
|
+ <a>离司待审核</a>
|
|
|
+ </span>
|
|
|
+ <span>
|
|
|
+ <i :style="{ background: '#0BB3B3' }"></i>
|
|
|
+ <a>离司审核驳回</a>
|
|
|
+ </span>
|
|
|
</span>
|
|
|
</p>
|
|
|
<div>
|
|
|
+ <!-- 修改 -->
|
|
|
+ <div
|
|
|
+ v-if="backLinePersonnel.pendingApprovalProportion > 0"
|
|
|
+ :style="{
|
|
|
+ width:
|
|
|
+ (backLinePersonnel.pendingApprovalProportion * 100).toFixed(
|
|
|
+ 0
|
|
|
+ ) + '%',
|
|
|
+ background: '#78D3F8',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ (backLinePersonnel.pendingApprovalProportion * 100).toFixed(
|
|
|
+ 0
|
|
|
+ ) + "%"
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-if="backLinePersonnel.reviewRejectedProportion > 0"
|
|
|
+ :style="{
|
|
|
+ width:
|
|
|
+ (backLinePersonnel.reviewRejectedProportion * 100).toFixed(
|
|
|
+ 0
|
|
|
+ ) + '%',
|
|
|
+ background: '#65789B',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ (backLinePersonnel.reviewRejectedProportion * 100).toFixed(
|
|
|
+ 0
|
|
|
+ ) + "%"
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ <!-- 在职/离司 -->
|
|
|
<div
|
|
|
v-if="backLinePersonnel.onJobUserProportion > 0"
|
|
|
:style="{
|
|
|
width:
|
|
|
(backLinePersonnel.onJobUserProportion * 100).toFixed(0) +
|
|
|
'%',
|
|
|
- background: '#3ECBC4',
|
|
|
+ background: '#5B8FF9',
|
|
|
}"
|
|
|
>
|
|
|
{{
|
|
|
@@ -168,7 +228,7 @@
|
|
|
width:
|
|
|
(backLinePersonnel.departUserProportion * 100).toFixed(0) +
|
|
|
'%',
|
|
|
- background: '#F2657D',
|
|
|
+ background: '#CDDDFD',
|
|
|
}"
|
|
|
>
|
|
|
{{
|
|
|
@@ -176,10 +236,90 @@
|
|
|
"%"
|
|
|
}}
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- 入司 -->
|
|
|
+ <div
|
|
|
+ v-if="backLinePersonnel.companyReviewProportion > 0"
|
|
|
+ :style="{
|
|
|
+ width:
|
|
|
+ (backLinePersonnel.companyReviewProportion * 100).toFixed(
|
|
|
+ 0
|
|
|
+ ) + '%',
|
|
|
+ background: '#F6BD16',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ (backLinePersonnel.companyReviewProportion * 100).toFixed(0) +
|
|
|
+ "%"
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-if="backLinePersonnel.entryReviewProportion > 0"
|
|
|
+ :style="{
|
|
|
+ width:
|
|
|
+ (backLinePersonnel.entryReviewProportion * 100).toFixed(0) +
|
|
|
+ '%',
|
|
|
+ background: '#7262FD',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ (backLinePersonnel.entryReviewProportion * 100).toFixed(0) +
|
|
|
+ "%"
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--离司 -->
|
|
|
+ <div
|
|
|
+ v-if="backLinePersonnel.leavingCompanyReviewProportion > 0"
|
|
|
+ :style="{
|
|
|
+ width:
|
|
|
+ (
|
|
|
+ backLinePersonnel.leavingCompanyReviewProportion * 100
|
|
|
+ ).toFixed(0) + '%',
|
|
|
+ background: '#61DDAA',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ (
|
|
|
+ backLinePersonnel.leavingCompanyReviewProportion * 100
|
|
|
+ ).toFixed(0) + "%"
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-if="backLinePersonnel.departureReviewRejectedProportion > 0"
|
|
|
+ :style="{
|
|
|
+ width:
|
|
|
+ (
|
|
|
+ backLinePersonnel.departureReviewRejectedProportion * 100
|
|
|
+ ).toFixed(0) + '%',
|
|
|
+ background: '#0BB3B3',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ (
|
|
|
+ backLinePersonnel.departureReviewRejectedProportion * 100
|
|
|
+ ).toFixed(0) + "%"
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<h2 class="other-people">
|
|
|
- <span>在职:{{ backLinePersonnel.onJobUser }}人</span>
|
|
|
- <span>离司:{{ backLinePersonnel.departUser }}人</span>
|
|
|
+ <span>修改待审核:{{ backLinePersonnel.pendingApproval }}人</span>
|
|
|
+ <span
|
|
|
+ >修改审核驳回:{{ backLinePersonnel.reviewRejected }}人</span
|
|
|
+ >
|
|
|
+
|
|
|
+ <span> 在职: {{ backLinePersonnel.onJobUser }}人</span>
|
|
|
+ <span> 离司: {{ backLinePersonnel.departUser }}人</span>
|
|
|
+ <span> 入司待审核: {{ backLinePersonnel.companyReview }}人</span>
|
|
|
+ <span> 入司审核驳回: {{ backLinePersonnel.entryReview }}人</span>
|
|
|
+ <span>
|
|
|
+ 离司待审核:
|
|
|
+ {{ backLinePersonnel.leavingCompanyReview }}人</span
|
|
|
+ >
|
|
|
+ <span>
|
|
|
+ 离司审核驳回:
|
|
|
+ {{ backLinePersonnel.departureReviewRejected }}人</span
|
|
|
+ >
|
|
|
</h2>
|
|
|
</dd>
|
|
|
</dl>
|
|
|
@@ -236,6 +376,8 @@ export default {
|
|
|
.back-line-hearder {
|
|
|
padding: 15px;
|
|
|
box-sizing: border-box;
|
|
|
+ box-shadow: 0px 2px 8px 0px rgba(42, 85, 229, 0.15);
|
|
|
+ border: 2px solid rgba(255, 255, 255, 0.2);
|
|
|
h1 {
|
|
|
margin: 0;
|
|
|
}
|
|
|
@@ -261,7 +403,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- > div:last-child {
|
|
|
+ > div.back-line-message {
|
|
|
margin-top: 24px;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
@@ -269,10 +411,12 @@ export default {
|
|
|
justify-content: space-between;
|
|
|
> div {
|
|
|
// flex: ;
|
|
|
- width: 24%;
|
|
|
+ width: 32%;
|
|
|
height: 100%;
|
|
|
background: #fff;
|
|
|
border-radius: 8px;
|
|
|
+ box-shadow: 0px 2px 8px 0px rgba(42, 85, 229, 0.15);
|
|
|
+ border: 2px solid rgba(255, 255, 255, 0.2);
|
|
|
> dl {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -316,14 +460,19 @@ export default {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
border-radius: 8px;
|
|
|
+ overflow: hidden;
|
|
|
// padding: 0 15px;
|
|
|
// box-sizing: border-box;
|
|
|
> div {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ justify-content: center;
|
|
|
flex: none;
|
|
|
height: 35px;
|
|
|
color: #fff;
|
|
|
+ // min-width: 50px;
|
|
|
+ // max-width: 800px;
|
|
|
+ // text-align: center;
|
|
|
// border-radius: 8px;
|
|
|
}
|
|
|
> div.on {
|
|
|
@@ -340,8 +489,8 @@ export default {
|
|
|
background: #ffc43f;
|
|
|
border-radius: 0 8px 8px 0;
|
|
|
// text-align: right;
|
|
|
- justify-content: flex-end;
|
|
|
- padding-right: 15px;
|
|
|
+ // justify-content: flex-end;
|
|
|
+ // padding-right: 15px;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
}
|
|
|
@@ -353,7 +502,7 @@ export default {
|
|
|
display: flex;
|
|
|
> div {
|
|
|
flex: none;
|
|
|
- width: 20%;
|
|
|
+ width: 33%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -390,6 +539,6 @@ export default {
|
|
|
justify-content: space-between;
|
|
|
padding-top: 5px;
|
|
|
box-sizing: border-box;
|
|
|
- color: #aaa;
|
|
|
+ color: #333333;
|
|
|
}
|
|
|
</style>
|