Skip to content

S
SuperMan
Commit 11a3556a authored by 罗超's avatar 罗超
Browse files
Options

no message

parent be7a4d41
Hide whitespace changes
Inline Side-by-side
Showing with 516 additions and 172 deletions
src/App.vue
View file @ 11a3556a
......@@ -113,7 +113,7 @@ export default {
}
</script>
<style>
@import "//at.alicdn.com/t/font_635492_ztxwijjubn.css";
@import "//at.alicdn.com/t/font_635492_wocd5xem6qe.css";
@import "./assets/css/Semibold.css";
@import "./assets/css/global/config.css";
@import "./assets/css/fileIcon.css";
......
src/components/personalCenter.vue
View file @ 11a3556a
<template>
<div class="personal">
<div class="u-box ">
<div class="left-point"></div>
<div class="right-point"></div>
<div class="h-info-box">
<div class="h-info">
<div class="k">姓名</div>
<div class="v">{{u.emName}}</div>
<div class="k">职务</div>
<div class="v">{{u.PostName}}</div>
</div>
<div class="h-img">
<div class="left-point-samll"></div>
<div class="right-point-samll"></div>
<img :src="u.Icon" :onerror='defaultHeadImg'/>
</div>
</div>
<div class="u-info">
</div>
<div class="personal" :style="{zoom:zoom}">
<div class="u-box">
<div class="left-point"></div>
<div class="right-point"></div>
<div class="h-info-box">
<div class="h-info">
<div class="k">姓名</div>
<div class="v">{{u.emName}}</div>
<div class="k">职务</div>
<div class="v">{{u.PostName}}</div>
</div>
<div class="h-img">
<div class="left-point-samll"></div>
<div class="right-point-samll"></div>
<img :src="u.Icon" :onerror="defaultHeadImg">
</div>
</div>
<div class="u-info">
<div class="item">
<span class="k">所属公司</span>
<span class="v">{{u.BranchName}}</span>
</div>
<div class="item">
<span class="k">所属部门</span>
<span class="v">{{u.DepartName}}</span>
</div>
<div class="item">
<span class="k">工作年限</span>
<span class="v">
<span style="font-size:22px">2年</span> (900天)
</span>
</div>
</div>
<div class="n-info">
<div class="item">
<i class="iconfont icon-dingdanguanli-"></i>
<span class="n-name">我的订单</span>
<span class="fang">
<i class="iconfont icon-right1"></i>
</span>
</div>
<div class="item">
<i class="iconfont icon-pingjiabaogao"></i>
<span class="n-name">我的业绩</span>
<span class="fang">
<i class="iconfont icon-right1"></i>
</span>
</div>
<div class="item">
<i class="iconfont icon-guanjun"></i>
<span class="n-name">冠军之路</span>
<span class="fang">
<i class="iconfont icon-right1"></i>
</span>
</div>
<div class="item">
<i class="iconfont icon-kaohedefen"></i>
<span class="n-name">我的考核</span>
<span class="fang">
<i class="iconfont icon-right1"></i>
</span>
</div>
<div class="item" @click="goUrlNav('FinancialDocuments',3,'财务单据')">
<i class="iconfont icon-danju1"></i>
<span class="n-name">财务审批</span>
<span class="fang">
<span class="tips" v-if="NotDealCount>0">{{NotDealCount}}</span>
<i class="iconfont icon-right1"></i>
</span>
</div>
<div class="item" @click="goUrlNav('myApproval',-1,'考勤')">
<i class="iconfont icon-kaoqinshenpi"></i>
<span class="n-name">考勤审批</span>
<span class="fang">
<span class="tips" v-if="MyAuditCount>0">{{MyAuditCount}}</span>
<i class="iconfont icon-right1"></i>
</span>
</div>
<div class="item" @click="goUrlNav('myDocuments',-1,'企业云盘')">
<i class="iconfont icon-cloud-disk-services"></i>
<span class="n-name">我的云盘</span>
<span class="fang">
<i class="iconfont icon-right1"></i>
</span>
</div>
<div class="item">
<i class="iconfont icon-fukuan2"></i>
<span class="n-name">常用付款对象</span>
<span class="fang">
<i class="iconfont icon-right1"></i>
</span>
</div>
</div>
</div>
<div class="c-box">
<div class="fince">
<fince></fince>
</div>
</div>
</div>
</template>
<script>
import fince from './personalCenter/fince'
export default {
data() {
return {
u:{},
defaultHeadImg: `this.src="${require("../assets/img/default_head_img.jpg")}"`,
}
data() {
return {
u: {},
defaultHeadImg: `this.src="${require("../assets/img/default_head_img.jpg")}"`,
zoom: 1,
NotDealCount: 0,
MyAuditCount: 0
};
},
components:{
fince
},
mounted() {
this.u = this.getLocalStorage();
this.zoom = (document.documentElement.clientHeight / 969).toFixed(2);
this.getNotDealCount();
this.myAuditCount();
},
methods: {
getNotDealCount() {
this.apipost(
"Financial_post_GetNotDealCount",
{},
r => {
if (r.data.resultCode == 1) {
this.NotDealCount = r.data.data;
}
},
null
);
},
mounted() {
this.u = this.getLocalStorage();
myAuditCount() {
this.apipost(
"app_user_workflow_MyAuditCount",
{},
r => {
if (r.data.resultCode == 1) {
this.MyAuditCount = r.data.data;
}
},
null
);
},
}
goUrlNav(url, index, name) {
let query = {
Conditon: index
};
query.tab = name;
query.blank = "y";
this.$router.push({ path: url, query });
}
}
};
</script>
<style>
.personal{
width: 100%;
height: 100%;
overflow: hidden;
/* background: #000; */
background: #0a0919 url('../assets/img/persion/bg.png') 100% 100%;
position: relative;
}
.personal .u-box{
width:300px;
position: absolute;
background: #19133e6e;
left: 30px;
top: 30px;
bottom: 30px;
border:1px solid #2c2739;
}
.personal .u-box .h-info-box{
margin: 15px;
display: flex;
}
.personal .u-box .h-info-box .h-info{
flex:1;
}
.personal .u-box .h-info-box .h-info .k{
color: #8a8894;
height: 20px;
line-height: 20px;
font-size: 16px;
font-family: "pingfangR";
text-align: right;
display: block;
margin-top: 10px;
}
.personal .u-box .h-info-box .h-info .v{
color: #DDD;
height: 20;
line-height: 20px;
font-size: 20px;
font-family: "pingfangR";
text-align: right;
display: block;
margin-top: 10px;
<style scoped>
.personal {
width: 100%;
height: 100%;
overflow: hidden;
/* background: #000; */
background: #0a0919 url("../assets/img/persion/bg.png") 100% 100%;
position: relative;
}
.personal .u-box {
width: 300px;
position: absolute;
background: #19133e6e;
left: 30px;
top: 30px;
bottom: 30px;
border: 1px solid #2c2739;
}
.personal .c-box {
position: absolute;
left: 360px;
top: 30px;
bottom: 30px;
right: 30px;
display: flex;
}
.personal .c-box .fince{
width: 400px;
height: 245px;
border-radius: 4px;
}
.personal .u-box .h-info-box {
margin: 15px;
display: flex;
}
.personal .u-box .h-info-box .h-info {
flex: 1;
}
.personal .u-box .h-info-box .h-info .k {
color: #8a8894;
height: 20px;
line-height: 20px;
font-size: 16px;
font-family: "pingfangR";
text-align: right;
display: block;
margin-top: 10px;
}
.personal .u-box .h-info-box .h-info .v {
color: #ddd;
height: 20;
line-height: 20px;
font-size: 20px;
font-family: "pingfangR";
text-align: right;
display: block;
margin-top: 10px;
}
.personal .u-box .h-info-box .h-img{
width: 120px;
height: 120px;
border: 1px solid #2c2739;
position: relative;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-left: 20px;
display: flex;
}
.personal .u-box .h-info-box .h-img img{
width: 82px;
height: 82px;
}
.personal .u-box .u-info{
}
.personal .left-point::after{
position: absolute;
width: 9px;
height: 9px;
left: -2px;
top: -2px;
content: ' ';
border-left: 3px solid #8a8894;
border-top: 3px solid #8a8894;
}
.personal .left-point::before{
position: absolute;
width: 9px;
height: 9px;
left: -2px;
bottom: -2px;
content: ' ';
border-left: 3px solid #8a8894;
border-bottom: 3px solid #8a8894;
}
.personal .right-point::after{
position: absolute;
width: 9px;
height: 9px;
right: -2px;
top: -2px;
content: ' ';
border-right: 3px solid #8a8894;
border-top: 3px solid #8a8894;
}
.personal .right-point::before{
position: absolute;
width: 9px;
height: 9px;
right: -2px;
bottom: -2px;
content: ' ';
border-right: 3px solid #8a8894;
border-bottom: 3px solid #8a8894;
.personal .u-box .h-info-box .h-img {
width: 120px;
height: 120px;
border: 1px solid #2c2739;
position: relative;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-left: 20px;
display: flex;
}
.personal .u-box .h-info-box .h-img img {
width: 82px;
height: 82px;
}
.personal .u-box .u-info {
margin: 50px 0 0 0;
padding: 15px;
background: rgba(25, 19, 62, 0.56);
}
.personal .u-box .u-info .item {
display: flex;
margin-bottom: 15px;
align-items: baseline;
}
.personal .u-box .u-info .item:last-child {
margin: 0px;
}
.personal .u-box .u-info .item .k {
color: #8a8894;
font-size: 14px;
font-family: "pingfangR";
text-align: right;
display: block;
width: 100px;
}
.personal .u-box .u-info .item .v {
color: #bbb;
font-size: 16px;
font-family: "pingfangR";
text-align: left;
display: block;
margin-left: 10px;
}
.personal .u-box .n-info {
margin: 20px 0;
background: rgba(25, 19, 62, 0.56);
}
.personal .u-box .n-info .item {
align-items: center;
display: flex;
padding: 10px 20px;
/* border-bottom: 1px solid #2c2739; */
cursor: pointer;
}
.personal .u-box .n-info .item:last-child {
border: none;
}
.personal .u-box .n-info .item:hover {
background: rgba(25, 19, 62, 0.8);
}
.personal .u-box .n-info .item:hover *:not(.tips) {
color: #1e90ff !important;
}
.personal .u-box .n-info .item i {
color: #bbb;
font-size: 18px;
width: 30px;
}
.personal .u-box .n-info .item .n-name {
flex: 1;
color: #ddd;
font-size: 14px;
font-family: pingfangR;
}
.personal .u-box .n-info .item .fang {
width: 80px;
text-align: right;
}
.personal .u-box .n-info .item .fang i {
font-size: 12px;
}
.personal .u-box .n-info .item .fang .tips {
min-width: 22px;
height: 22px;
padding: 5px;
background: crimson;
border-radius: 22px;
display: inline-block;
vertical-align: sub;
font-size: 12px;
text-align: center;
line-height: 12px;
overflow: hidden;
color: #ddd;
word-break: keep-all;
font-family: pingfangR;
}
.personal .left-point::after {
position: absolute;
width: 9px;
height: 9px;
left: -2px;
top: -2px;
content: " ";
border-left: 3px solid #8a8894;
border-top: 3px solid #8a8894;
}
.personal .left-point::before {
position: absolute;
width: 9px;
height: 9px;
left: -2px;
bottom: -2px;
content: " ";
border-left: 3px solid #8a8894;
border-bottom: 3px solid #8a8894;
}
.personal .right-point::after {
position: absolute;
width: 9px;
height: 9px;
right: -2px;
top: -2px;
content: " ";
border-right: 3px solid #8a8894;
border-top: 3px solid #8a8894;
}
.personal .right-point::before {
position: absolute;
width: 9px;
height: 9px;
right: -2px;
bottom: -2px;
content: " ";
border-right: 3px solid #8a8894;
border-bottom: 3px solid #8a8894;
}
.personal .left-point-samll::after{
position: absolute;
width: 5px;
height: 5px;
left: -1px;
top: -1px;
content: ' ';
border-left: 2px solid #8a8894;
border-top: 2px solid #8a8894;
}
.personal .left-point-samll::before{
position: absolute;
width: 5px;
height: 5px;
left: -1px;
bottom: -1px;
content: ' ';
border-left: 2px solid #8a8894;
border-bottom: 2px solid #8a8894;
}
.personal .right-point-samll::after{
position: absolute;
width: 5px;
height: 5px;
right: -1px;
top: -1px;
content: ' ';
border-right: 2px solid #8a8894;
border-top: 2px solid #8a8894;
}
.personal .right-point-samll::before{
position: absolute;
width: 5px;
height: 5px;
right: -1px;
bottom: -1px;
content: ' ';
border-right: 2px solid #8a8894;
border-bottom: 2px solid #8a8894;
.personal .left-point-samll::after {
position: absolute;
width: 5px;
height: 5px;
left: -1px;
top: -1px;
content: " ";
border-left: 2px solid #8a8894;
border-top: 2px solid #8a8894;
}
.personal .left-point-samll::before {
position: absolute;
width: 5px;
height: 5px;
left: -1px;
bottom: -1px;
content: " ";
border-left: 2px solid #8a8894;
border-bottom: 2px solid #8a8894;
}
.personal .right-point-samll::after {
position: absolute;
width: 5px;
height: 5px;
right: -1px;
top: -1px;
content: " ";
border-right: 2px solid #8a8894;
border-top: 2px solid #8a8894;
}
.personal .right-point-samll::before {
position: absolute;
width: 5px;
height: 5px;
right: -1px;
bottom: -1px;
content: " ";
border-right: 2px solid #8a8894;
border-bottom: 2px solid #8a8894;
}
</style>
src/components/personalCenter/fince.vue 0 → 100644
View file @ 11a3556a
<template>
<div class="inerank-container">
<div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
</div>
</template>
<script>
export default {
data() {
return {};
},
mounted() {
this.init();
},
methods: {
init() {
let myChart = this.$echarts.init(this.$refs.myLineRank);
var dataAxis = [
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19"
];
var data = [220, 182, 191, 234, 290, 330, 310, 100, 30, 60, 650];
var data2 = [130, 202, 101, 500, 10, 220, 310, 98, 17, 52, 360];
var yMax = 500;
var dataShadow = [];
for (var i = 0; i < data.length; i++) {
dataShadow.push(yMax);
}
let option = {
backgroundColor: "#fd397a", //"#19133e6e",
title: {
show: false
},
xAxis: {
data: dataAxis,
axisLabel: {
textStyle: {
color: "#79778a",
fontFamily: "DIN"
},
margin: 10,
interval: 0,
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
}
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: "#272938",
fontFamily: "DIN"
},
show: false
},
splitLine: {
show: false
},
interval: 1000,
max: 1000,
min: 0,
splitNumber: 5
},
grid: {
left: -30,
right: -30,
top: 0,
bottom: 0
},
tooltip: {
trigger: "item",
axisPointer: {
type: "none",
snap: true,
label: {
backgroundColor: "#6a7985"
}
}
},
series: [
{
name: "同行浏览与分享",
type: "line",
smooth: false,
symbol: "none",
itemStyle: {
normal: {
lineStyle: {
color: "#e63a5e"
},
areaStyle: {
color: "#e14c86"
}
}
},
data: data2
}
]
};
myChart.setOption(option);
}
}
};
</script>
<style>
.inerank-container {
height: 100%;
width: 100%;
}
</style>
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