Skip to content

S
SuperMan
Commit 54012cdc authored by 黄媛媛's avatar 黄媛媛
Browse files
Options

人员管理

parent d5a17619
Show whitespace changes
Inline Side-by-side
Showing with 803 additions and 1 deletion
src/components/activity/PersonnelManagement.vue 0 → 100644
View file @ 54012cdc
<template>
<div class="mycareer personTable" style="padding-top:25px;">
<div style="width:1532px;margin:0 auto;">
<div class="uer-box">
<el-row style="width:100%">
<el-col :span="5">
<div class="photo">
<img src="http://imgfile.oytour.com/Upload/User/tangping.png" />
<div class="zezhao"></div>
<div class="bottom">周晓小</div>
</div>
</el-col>
<el-col :span="6" class="second">
<div class="zhouguan">周冠</div>
<div class="total">
<p style="padding-top:23px">总计</p>
<p style="color:#1B1B1B;font-size:62px;font-family: 'pingfangR';position:relative;top:-5px">15</p>
</div>
</el-col>
<el-col :span="7">
<div class="commonbg baseinfo">基本信息</div>
<el-row style="margin-top:30px">
<el-col class="triggerDiv" :span="8">
<span class="titlebg">年龄</span>
<p class="info">24</p>
</el-col>
<el-col class="triggerDiv" :span="8">
<span class="titlebg">入职时间</span>
<p class="info">2019-02-20</p>
</el-col>
<el-col class="triggerDiv" :span="8">
<span class="titlebg">部门</span>
<p class="info">销售部门</p>
</el-col>
<el-col class="triggerDiv" :span="8">
<span class="titlebg">总收客数</span>
<p class="info">256</p>
</el-col>
<el-col class="triggerDiv" :span="8">
<span class="titlebg">总订单数</span>
<p class="info">256</p>
</el-col>
<el-col class="triggerDiv" :span="8">
<span class="titlebg">累计销售</span>
<p class="info">￥1256154</p>
</el-col>
</el-row>
</el-col>
<el-col class="second" :span="6">
<div class="commonbg baseinfo">综合得分</div>
<div class='score'>86</div>
</el-col>
</el-row>
</div>
<div class="split"></div>
<div class="listDiv">
<div style="padding-bottom:20px" class="change-box">
<div class="choose">
<span @click="ClickChoose1(-1)" class="clickbtn" style="border-right:1px solid #494949">
<img v-if="index1==0" src="../../assets/img/champion/left.png" alt="">
<img v-else src="../../assets/img/champion/left1.png" alt="">
</span>
<span class="text">{{choose1[index1]}}</span>
<span @click="ClickChoose1(1)" class="clickbtn" style="border-left:1px solid #494949">
<img v-if="index1==choose1.length-1" src="../../assets/img/champion/right.png" alt="">
<img v-else src="../../assets/img/champion/right1.png" alt="">
</span>
</div>
<div class="choose" style="float:right">
<span @click="ClickChoose2(-1)" class="clickbtn" style="border-right:1px solid #494949">
<img v-if="index2==0" src="../../assets/img/champion/left.png" alt="">
<img v-else src="../../assets/img/champion/left1.png" alt="">
</span>
<span class="text">{{choose2[index2]}}</span>
<span @click="ClickChoose2(1)" class="clickbtn" style="border-left:1px solid #494949">
<img v-if="index2==choose2.length-1" src="../../assets/img/champion/right.png" alt="">
<img v-else src="../../assets/img/champion/right1.png" alt="">
</span>
</div>
</div>
<div class="data-box-before"></div>
<div class="data-box">
<div class="tab-head" ref="mycareerHead">
<table>
<thead>
<tr>
<th style="min-width:100px;max-width:100px;background:#fff">&nbsp;</th>
<th>新同行增加数份1</th>
<th>Im系统同行互动2</th>
<th>广告系统发送数3</th>
<th>IM系统同行互动4</th>
<th>同行浏览数5</th>
<th>今日外出时间6</th>
<th>完成计划7</th>
<th>拜访计划8</th>
<th>拜访同行9</th>
<th>拜访同行10</th>
<th>拜访同行11</th>
<th>拜访同行12</th>
<th>拜访同行13</th>
<th>拜访同行14</th>
<th>拜访同行15</th>
<th>拜访同行16</th>
</tr>
</thead>
</table>
</div>
<div class="lft-head">
<table>
<thead>
<tr>
<th style="background: #fff;color:#333333">时间</th>
</tr>
</thead>
</table>
</div>
<div class="lft-body" ref="mycareerLeft">
<table>
<tbody>
<tr @mouseover="LeftmouseOver(index)" @mouseleave="LeftmouseLeave(index)" :class="leftActiveIndex==index?'leftActive':''" v-for="(item,index) in dateList" :key="index">
<td class="odd">{{item}}</td>
</tr>
</tbody>
</table>
</div>
<div class="content-body" ref="mycareerContent">
<table>
<tbody>
<tr :class="dataActiveIndex==index?'dataActive':''" @mouseover="DatamouseOver(index)" @mouseleave="DatamouseLeave(index)" v-for="(item,index) in data" :key="index+5000">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- <el-table
:data="tableData"
style="width: 100%;"
height="200">
<el-table-column
fixed
prop="date"
label="月份"
width="150">
</el-table-column>
<el-table-column
prop="name"
label="新同行增加数份"
width="150">
</el-table-column>
<el-table-column
prop="province"
label="系统同行互动次数"
width="150">
</el-table-column>
<el-table-column
prop="city"
label="广告系统发送数"
width="150">
</el-table-column>
<el-table-column
prop="address"
label="系统同行互动时数"
width="150">
</el-table-column>
<el-table-column
prop="zip"
label="老同行的网站浏览数"
width="150">
</el-table-column>
<el-table-column
prop="zip"
label="今日外出时间"
width="150">
</el-table-column>
<el-table-column
prop="address"
label="系统同行互动时数"
width="150">
</el-table-column>
<el-table-column
prop="zip"
label="老同行的网站浏览数"
width="150">
</el-table-column>
<el-table-column
prop="address"
label="系统同行互动时数"
width="150">
</el-table-column>
<el-table-column
prop="zip"
label="老同行的网站浏览数"
width="150">
</el-table-column>
</el-table> -->
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
choose1:["本周","本月","当年"],
choose2:["小组","团队","公司"],
index1:0,
index2:0,
leftActiveIndex:-1,
dataActiveIndex:-1,
listHeight:0,
dateList:["7月1日","7月2日","7月3日","7月4日","7月5日","7月6日","7月7日","7月8日"],
data:[1,1,1,1,1,1,1,1],
tableData: [{
date: '2016-05-03',
name: '王小虎1',
province: '上海1',
city: '普陀区1',
address: '上海市普1',
zip: 2003331
}, {
date: '2016-05-02',
name: '王小虎2',
province: '上海2',
city: '普陀区2',
address: '上海2',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海',
zip: 200333
}, {
date: '2016-05-08',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普',
zip: 200333
}, {
date: '2016-05-06',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市',
zip: 200333
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市',
zip: 200333
}]
}
},
created(){
let Height = document.body.clientHeight;
this.listHeight=Height-470;
// console.log("listHeight",this.listHeight)
},
mounted() {
this.$refs.mycareerContent.addEventListener(
"scroll",
this.handleScroll,
true
);
},
methods: {
ClickChoose1(num){
if(this.index1==0){
if(num>0){
this.index1=this.index1+num;
}
}
else if(this.index1==this.choose1.length-1){
if(num<0){
this.index1=this.index1+num;
}
}
else{
this.index1=this.index1+num;
}
},
ClickChoose2(num){
if(this.index2==0){
if(num>0){
this.index2=this.index2+num;
}
}
else if(this.index2==this.choose2.length-1){
if(num<0){
this.index2=this.index2+num;
}
}
else{
this.index2=this.index2+num;
}
},
LeftmouseOver(index){
this.dataActiveIndex=index;
this.leftActiveIndex=index;
},
LeftmouseLeave(index){
this.dataActiveIndex=-1;
this.leftActiveIndex=-1;
},
DatamouseOver(index){
this.leftActiveIndex=index;
},
DatamouseLeave(index){
this.leftActiveIndex=-1;
},
handleScroll() {
this.$refs.mycareerLeft.scrollTop = this.$refs.mycareerContent.scrollTop;
this.$refs.mycareerHead.scrollLeft = this.$refs.mycareerContent.scrollLeft;
}
}
};
</script>
<style>
.personTable .el-table--border::after, .personTable .el-table--group::after, .personTable .el-table::before{
background-color: transparent;
}
.personTable .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
/*滚动条整体样式*/
width: 5px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 5px;
border:1px solid #fff;
border-radius:5px;
background: #fff;
padding: 2px
}
.personTable .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
height:4px;
width: 4px;
background:#6A0404;
border-radius:5px;
}
.personTable .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 2px #6A0404;
border-radius:5px;
background: transparent;
}
.personTable .el-table--striped .el-table__body tr.el-table__row--striped.current-row td,
.personTable .el-table__body tr.current-row>td,
.personTable .el-table__body tr.hover-row.current-row>td,
.personTable .el-table__body tr.hover-row.el-table__row--striped.current-row>td,
.personTable .el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td{
background:rgba(193,39,45,1)!important;
color:#fff!important;
}
.personTable .el-table .el-table__fixed .el-table__body .hover-row{
background:rgba(193,39,45,1)!important;
}
.personTable .el-table tbody tr:hover td{
background:rgba(193,39,45,1)!important;
color:#fff!important;
}
.personTable .el-table tbody tr:hover td:first-child{
color:#fff!important;
background:rgba(193,39,45,0.5)
}
.personTable .el-table tbody td:first-child{
background:rgba(255,255,255,0.5);
}
.personTable .el-table thead th:first-child{
background: #fff;
color:#333333;
}
.personTable .el-table thead th{
background: #333333;
color:#B7B7B7;
padding:5px 0;
}
.personTable .el-table, .personTable .el-table__expanded-cell{
background: transparent;
}
.personTable .el-table th, .personTable .el-table tr{
background: transparent;
}
.personTable .el-table td, .personTable .el-table th{
background: transparent;
padding:6px 0;
}
.personTable .el-table td,.personTable .el-table th.is-leaf{
border: none;
}
.personTable .leftActive td{
background:#D78884!important;
color: #fff!important;
}
.personTable .dataActive td{
background:#C1272D!important;
color: #fff!important;
}
.personTable .text{
text-align: center;
width: 120px;
color:#fff;
height:33px;
display: inline-block;
position: relative;
top: -8px;
font-family: "PingFangSC-Fine";
}
.personTable .clickbtn{
display: inline-block;
width:50px;
height:33px;
text-align: center;
background: #333333;
}
.personTable .clickbtn img{
margin-top:4px;
}
.personTable .change-box .choose{
height: 31px;
background: #333333;
display: inline-block;
}
.personTable .content-body table tr:hover td{
background: #C1272D!important;
color:#fff!important;
}
.personTable .listDiv{
background: rgba(255,255,255,0.2);
width: 1532px;
/* position: relative; */
}
.personTable .score{
background: url("../../assets/img/champion/circle.png") no-repeat;
width: 150px;
height: 150px;
line-height: 150px;
color: #1B1B1B;
text-align: center;
font-size: 60px;
font-family: "pingfangR"
}
.personTable .triggerDiv{
position: relative;
margin-bottom: 30px;
}
.personTable .uer-box .info{
font-size:20px;
margin-top:10px;
font-family: "pingfangR"
}
.personTable .uer-box .titlebg{
background: url("../../assets/img/champion/titlebg.png") no-repeat;
height: 25px;
line-height: 25px;
background-size: 100% 100%;
padding:0 5px 4px 10px;
color:#656565;
font-family: "PingFangSC-Fine";
}
.personTable .commonbg{
width: 113px;
background: url("../../assets/img/champion/commonbg.png");
height: 42px;
line-height: 42px;
color:#fff;
text-align: center;
font-family: "PingFangSC-Fine";
}
.personTable .uer-box .second{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center
}
.uer-box .second .total{
width: 136px;
background: url("../../assets/img/champion/total.png");
height: 149px;
color:#fff;
text-align: center;
margin-top:34px;
}
.personTable .uer-box .second .zhouguan{
width: 77px;
background: url("../../assets/img/champion/zg.png");
height: 42px;
line-height: 42px;
color:#fff;
font-size: 20px;
text-align: center;
font-family: "pingfangR"
}
.personTable {
min-height: 100%;
width:calc(100% + 40px);
background: url("../../assets/img/champion/listbg.png");
position: relative;
user-select: none;
cursor: default;
margin:0 -20px;
}
.personTable .title {
width: 554px;
height: 69px;
background: url("../../assets/img/champion/title.png");
position: relative;
z-index: 2;
margin: 0 auto;
display: flex;
}
.personTable .title .uerf .dept-name {
height: 12px;
font-size: 12px;
color: #ffffff;
text-align: center;
margin-bottom: 4px;
}
.personTable .title .uerf .uer-name {
background: linear-gradient(
0deg,
rgba(246, 134, 15, 1) 0%,
rgba(253, 207, 52, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 24px;
font-family: pingfangR;
color: rgba(255, 255, 255, 1);
text-align: center;
font-family: "pingfangR"
}
.personTable .title .post-name {
width: 156px;
text-align: center;
margin-top: 17px;
font-family: pingfangR;
font-size: 18px;
color: rgba(255, 255, 255, 1);
background: linear-gradient(
0deg,
rgba(163, 169, 164, 1) 0%,
rgba(255, 255, 255, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.personTable .uer-box {
padding:17px 30px;
box-sizing: border-box;
display: flex;
width:1532px;
height:277px;
background:rgba(255,255,255,0.2);
margin: 0 auto;
}
.personTable .uer-box .photo {
margin-left: 50px;
width: 240px;
height: 240px;
border-radius: 50%;
position: relative;
}
.personTable .uer-box .photo img {
width: 230px;
height: 230px;
border-radius: 50%;
position: absolute;
/* top: 5px;
left: 5px; */
z-index: 2;
}
.personTable .uer-box .photo .zezhao {
background: url("../../assets/img/champion/userbg.png");
width: 230px;
height: 230px;
z-index: 1;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
z-index: 3;
background-size:100% 100%;
}
.personTable .uer-box .photo .bottom {
width: 195px;
height: 54px;
line-height: 54px;
left: 18px;
bottom: -2px;
position: absolute;
background: url("../../assets/img/champion/userbottom.png");
z-index: 4;
color:#000000;
font-size: 22px;
text-align: center;
font-family: "pingfangR"
}
.personTable .uer-box .dashboards {
margin-right: 50px;
flex: 1;
display: flex;
margin-left: 60px;
flex-wrap: wrap;
}
.personTable .uer-box .dashboards .item {
width: 120px;
height: 120px;
margin-right: 40px;
margin-top: 25px;
}
.personTable .split {
margin: 20px 0 0 0;
height: 3px;
background: url("../../assets/img/champion/fg.png");
}
.personTable .data-box {
overflow: hidden;
position: absolute;
bottom: 39px;
top: 377px;
left: 167px;
right: 165px;
z-index: 2;
background: rgba(255,255,255,0.2);
}
.personTable .data-box .tab-head {
height: 43px;
overflow: hidden;
background: #333;
}
.personTable .data-box .lft-head {
left: -1px;
top: 0;
width: 100px;
overflow: hidden;
right: unset;
height: 43px;
position: absolute;
/* background: url("../../assets/img/champion/head.png") no-repeat; */
background: #333333;
}
.personTable .data-box .lft-body {
left: -1px;
top: 43px;
width: 100px;
bottom: 6px;
right: unset;
position: absolute;
overflow: hidden;
z-index: 3;
background: rgba(255,255,255,0.2);
/* height:100%; */
}
.personTable .data-box .content-body {
left: 97px;
top: 43px;
right: 0;
bottom: 0px;
position: absolute;
overflow: auto;
z-index: 2;
margin: 0 2px;
}
.personTable .data-box-before {
display: block;
position: absolute;
z-index: 1;
/* background: url("../../assets/img/champion/head.png") no-repeat; */
background: #333;
height: 43px;
content: " ";
top: 377px;
left: 167px;
right: 165px;
}
.personTable .data-box table {
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
}
.personTable .data-box table thead th {
height: 43px;
padding-top: 10px;
box-sizing: border-box;
text-align: left;
padding-left: 10px;
font-size: 14px;
font-family: pingfangR;
color: #B7B7B7;
min-width: 100px;
}
.personTable .data-box table thead th {
min-width: 120px;
max-width: 120px;
}
.personTable .data-box table tbody td {
height: 30px;
line-height: 30px;
font-size: 12px;
color: #333333;
text-align: left;
padding-left: 10px;
min-width: 120px;
max-width: 120px;
}
.personTable .data-box table tbody td.odd {
color: #333333;
-webkit-background-clip: unset;
-webkit-text-fill-color: unset;
font-family: "PingFangR"
}
.personTable .data-box .content-body::-webkit-scrollbar {
/*滚动条整体样式*/
width: 5px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 5px;
border:1px solid rgba(161,154,147,1);
border-radius:5px;
background: transparent;
padding: 2px
}
.personTable .data-box .content-body::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
height:4px;
width: 4px;
background:#6A0404;
border-radius:5px;
}
.personTable .data-box .content-body::-webkit-scrollbar-track {
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
border-radius:5px;
background: transparent;
}
.personTable .data-box .content-body::-webkit-scrollbar-corner{
color: transparent;
}
</style>
src/router/config.js
View file @ 54012cdc
......@@ -3525,6 +3525,14 @@ export default {
title: '轮播图管理'
}
},
{
path: '/PersonnelManagement',
name: 'PersonnelManagement',
component: resolve => require(['@/components/activity/PersonnelManagement'], resolve),
meta: {
title: '人员管理'
}
},
{
path: '/BmenuManagement',
name: 'BmenuManagement',
......@@ -3653,7 +3661,8 @@ export default {
meta: {
title: '票务规则配置'
}
}
},
]
},
{
......@@ -3697,6 +3706,7 @@ export default {
title: '领队报账'
}
},
{
path: '/supplierLogin', //供应商登录
name: 'supplierLogin',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment