506 lines
11 KiB
Vue
506 lines
11 KiB
Vue
<template>
|
|
<div>
|
|
<div class="flexs">
|
|
<sidebarUserInfo style="flex: 0 0 300px; height: fit-content" />
|
|
<div style="flex: 1">
|
|
<top-banner class="banners" />
|
|
<div class="top-lists">
|
|
<div
|
|
class="nav-view"
|
|
@click="$router.push(item.url)"
|
|
:class="index == 1 ? 'styles' : ''"
|
|
v-for="(item, index) in navList"
|
|
>
|
|
{{ item.name }}
|
|
</div>
|
|
</div>
|
|
<div style="position: relative">
|
|
<div class="content">
|
|
<div class="title">
|
|
<div class="line"></div>
|
|
<div class="name">目标业绩进度</div>
|
|
</div>
|
|
<div class="box">
|
|
<div class="titles">{{ startDate }} 至 {{endDate}}</div>
|
|
<div class="echarts">
|
|
<div class="title_s">{{'目标业绩'}}(PV)</div>
|
|
<div class="e-chat">
|
|
<div class="list" v-for="item in list ">
|
|
<div class="tops">
|
|
|
|
</div>
|
|
<div class="process" :style="{height:item.percentage}" >
|
|
<div class="money">{{item.percentage}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="e-chat-s" >
|
|
<div class="moneys" v-for="item in list ">
|
|
{{item.targetPerformanceLeaveOut}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="titles" style="margin-top: 40px">{{ startDate1 }} 至 {{endDate1}}</div>
|
|
<div class="echarts">
|
|
<div class="title_s" style="margin-top: 250px" >{{'目标业绩'}}(金额)</div>
|
|
<div class="e-chat" style="margin-top: 40px">
|
|
<div class="list" v-for="item in list1 ">
|
|
<div class="tops">
|
|
|
|
</div>
|
|
<div class="process" :style="{height:item.percentage}" >
|
|
<div class="money">{{item.percentage}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="e-chat-s" style="margin-left: 145px">
|
|
<div class="moneys" v-for="item in list1 ">
|
|
{{item.targetPerformanceLeaveOut}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from "echarts";
|
|
import * as apis from "@/api/index.js";
|
|
import sidebarUserInfo from "@/views/index/components/sidebarUserInfo";
|
|
import topBanner from "@/components/topBanner";
|
|
import * as api from "@/api/register";
|
|
import { getToken } from "@/util/auth";
|
|
import {getPerFormance,getPerFormanceAmount} from "@/api/register";
|
|
export default {
|
|
data() {
|
|
return {
|
|
// list:[{"name":"20万","percent":15,num:20},{"name":"40万","percent":25,num:40},
|
|
// {"name":"60万","percent":22,num:60},{"name":"80万","percent":20,num:80},
|
|
// {"name":"100万","percent":10,num:100}
|
|
// ],
|
|
list:[],
|
|
list1:[],
|
|
xData: [20, 40, 60, 80, 100], //横坐标
|
|
yData: [20, 24, 18, 25, 27], //数据
|
|
myChartStyle: { float: "left", width: "100%", height: "400px" },
|
|
tableData: [],
|
|
total: 0,
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 50,
|
|
startCreationTime: "",
|
|
endCreationTime: "",
|
|
memberCode: "",
|
|
memberName: "",
|
|
},
|
|
startDate:'',
|
|
endDate:'',
|
|
startDate1:'',
|
|
endDate1:'',
|
|
navList: [
|
|
{ name: "认证资质", url: "/superStudio" },
|
|
{ name: '注册业绩', url: "/performance" },
|
|
{ name: '专属礼包', url: "/giftBag" },
|
|
],
|
|
};
|
|
},
|
|
components: { sidebarUserInfo, topBanner },
|
|
watch: {},
|
|
mounted() {
|
|
this.getPerFormance();
|
|
this.getPerFormanceAmount();
|
|
},
|
|
methods: {
|
|
getPerFormance(){
|
|
getPerFormance().then((res)=>{
|
|
this.startDate = res.data.startDate
|
|
this.endDate = res.data.endDate
|
|
this.list = res.data.targetPerformanceList
|
|
})
|
|
},
|
|
getPerFormanceAmount(){
|
|
getPerFormanceAmount().then((res)=>{
|
|
this.startDate1 = res.data.startDate
|
|
this.endDate1 = res.data.endDate
|
|
this.list1 = res.data.targetPerformanceList
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
.tops{
|
|
/*width: 128px;*/
|
|
/*height: 17px;*/
|
|
/*background: #F3F3F3;*/
|
|
/*box-shadow: 0px -2px 6px 0px rgba(0,0,0,0.1);*/
|
|
/*position: absolute;*/
|
|
/*top: 0;*/
|
|
/*margin-top: -17px;*/
|
|
}
|
|
.process{
|
|
background: #005BAC;
|
|
/*height: 50%;*/
|
|
width: 100%;
|
|
position: absolute;
|
|
justify-content: center;
|
|
align-items:center;
|
|
display: flex;
|
|
bottom: 0;
|
|
}
|
|
.moneys{
|
|
width: 130px;
|
|
margin-right: 40px;
|
|
text-align: center;
|
|
}
|
|
.e-chat-s{
|
|
width: 840px;
|
|
position: absolute;
|
|
display: flex;
|
|
bottom: 0;
|
|
justify-content: center;
|
|
margin-left: 135px;
|
|
|
|
}
|
|
.money{
|
|
position: absolute;
|
|
bottom: 5px;
|
|
margin-top: -100px;
|
|
color: #fff;
|
|
}
|
|
.list{
|
|
position: relative;
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
|
|
}
|
|
.e-chat{
|
|
display: flex;
|
|
margin-top: 40px;
|
|
}
|
|
.list{
|
|
width: 128px;
|
|
height: 184px;
|
|
background: #F3F3F3;
|
|
margin-right: 40px;
|
|
border-radius: 7px 7px 0 0 ;
|
|
}
|
|
.title_s{
|
|
margin: 260px 20px 0 20px;
|
|
}
|
|
.echarts{
|
|
margin-left: 100px;
|
|
display: flex;
|
|
position: relative;
|
|
}
|
|
.hide .el-upload--picture-card {
|
|
display: none !important;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
#mychart{
|
|
width: 800px!important;
|
|
}
|
|
.titles{
|
|
color: #333;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
}
|
|
.box{
|
|
width: 1191px;
|
|
//height: 475px;
|
|
border-radius: 10px 10px 10px 10px;
|
|
opacity: 1;
|
|
border: 1px solid #CCCCCC;
|
|
margin: 40px 0 40px 40px;
|
|
padding: 30px;
|
|
}
|
|
::v-deep .el-table .el-table__cell.is-center{
|
|
color: #333;
|
|
padding: 30px 0;
|
|
font-weight: 600;
|
|
}
|
|
.btn1 {
|
|
background: #d61820;
|
|
border-radius: 8px 8px 8px 8px;
|
|
color: #fff;
|
|
height: 46px;
|
|
padding: 0 24px;
|
|
}
|
|
.btn2 {
|
|
background: #fff;
|
|
border: 1px solid #cccccc;
|
|
border-radius: 8px 8px 8px 8px;
|
|
color: #666;
|
|
height: 46px;
|
|
padding: 0 24px;
|
|
}
|
|
.styles {
|
|
border: none !important;
|
|
color: #fff !important;
|
|
background: #d61820;
|
|
}
|
|
.top-lists {
|
|
display: flex;
|
|
padding: 20px 0 0 0;
|
|
.nav-view {
|
|
cursor: pointer;
|
|
padding: 0 26px;
|
|
height: 44px;
|
|
border-radius: 10px;
|
|
border: 1px solid #999999;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
line-height: 44px;
|
|
margin-right: 20px;
|
|
color: #999;
|
|
}
|
|
}
|
|
.width {
|
|
position: relative;
|
|
width: 128px;
|
|
height: 128px;
|
|
}
|
|
.close-icon {
|
|
position: absolute;
|
|
right: -10px;
|
|
top: -10px;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.idCardWidth {
|
|
width: 362px !important;
|
|
height: 211px !important;
|
|
position: relative;
|
|
top: 0;
|
|
}
|
|
.card {
|
|
width: 362px !important;
|
|
height: 211px !important;
|
|
position: relative;
|
|
}
|
|
.card img {
|
|
width: 362px !important;
|
|
height: 211px !important;
|
|
}
|
|
.centers {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.upload-list {
|
|
//margin-left: -20px;
|
|
}
|
|
::v-deep .el-upload {
|
|
display: flex;
|
|
}
|
|
.upload-demo {
|
|
display: flex;
|
|
}
|
|
.text_s {
|
|
position: absolute;
|
|
top: 70px;
|
|
right: 20px;
|
|
width: 360px;
|
|
line-height: 20px;
|
|
color: #666;
|
|
font-size: 12px;
|
|
}
|
|
.bolds {
|
|
font-weight: bold;
|
|
}
|
|
.status-size {
|
|
margin-top: 10px;
|
|
font-size: 20px;
|
|
color: #000;
|
|
}
|
|
.img_cen {
|
|
padding: 200px 0;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
.status-img img {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
.button-s {
|
|
width: 290px;
|
|
height: 66px;
|
|
background: #d61820;
|
|
border-radius: 10px 10px 10px 10px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
line-height: 66px;
|
|
font-size: 22px;
|
|
color: #fff;
|
|
margin: 60px auto;
|
|
}
|
|
::v-deep .el-form-item {
|
|
margin-bottom: 20px;
|
|
}
|
|
.titleSize {
|
|
margin-top: 5px !important;
|
|
color: #000 !important;
|
|
}
|
|
.idCard img {
|
|
width: 362px;
|
|
height: 211px;
|
|
}
|
|
.line-s {
|
|
//padding: 0 20px;
|
|
margin: 40px 0;
|
|
background: rgba(0, 0, 0, 0.1);
|
|
border-radius: 0px 0px 0px 0px;
|
|
height: 4px;
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 1820px;
|
|
}
|
|
.size-s {
|
|
color: #005BAC;
|
|
font-size: 12px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.texts {
|
|
color: #999;
|
|
font-size: 12px;
|
|
margin-top: 20px;
|
|
}
|
|
.imgWidth {
|
|
position: relative;
|
|
width: 128px;
|
|
height: 128px;
|
|
}
|
|
video {
|
|
position: absolute;
|
|
width: 128px !important;
|
|
height: 128px !important;
|
|
margin-top: 0 !important;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
.imgWidth img {
|
|
position: absolute;
|
|
width: 128px !important;
|
|
height: 128px !important;
|
|
margin-top: 0 !important;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
.box-colors {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 6px 6px 6px 6px;
|
|
width: 128px;
|
|
height: 128px;
|
|
position: absolute;
|
|
}
|
|
.img-ss {
|
|
margin-right: 20px;
|
|
}
|
|
.img-s img {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-top: 25px;
|
|
}
|
|
.upload {
|
|
width: 128px;
|
|
height: 128px;
|
|
background: rgba(204, 204, 204, 0.3);
|
|
border-radius: 6px 6px 6px 6px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
margin-bottom: 20px;
|
|
margin-right: 20px;
|
|
}
|
|
::v-deep .area .el-input__inner {
|
|
width: 820px;
|
|
height: 65px;
|
|
font-size: 18px;
|
|
}
|
|
.form {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 50px;
|
|
}
|
|
::v-deep .el-form--label-top .el-form-item__label {
|
|
padding-bottom: 0;
|
|
}
|
|
::v-deep .el-form-item__label {
|
|
font-size: 16px;
|
|
color: #000;
|
|
}
|
|
::v-deep .centers .el-input__inner {
|
|
text-align: center;
|
|
}
|
|
::v-deep .inputs .el-input__inner {
|
|
width: 378px;
|
|
height: 65px;
|
|
font-size: 18px;
|
|
}
|
|
.flexs {
|
|
display: flex;
|
|
padding-right: 60px;
|
|
background-color: #f9f9f9;
|
|
}
|
|
.banners {
|
|
flex: 1;
|
|
margin-top: 20px;
|
|
}
|
|
.content {
|
|
width: 100%;
|
|
padding: 30px 0 10px 0;
|
|
background-color: #fff;
|
|
margin-top: 20px;
|
|
box-shadow: 0px 2px 20px 0px rgba(135, 135, 135, 0.3);
|
|
border-radius: 10px 10px 10px 10px;
|
|
.systemTitle {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
//margin-top: 25px;
|
|
position: relative;
|
|
.button {
|
|
background-color: #ffad41;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
height: 48px;
|
|
border-radius: 10px 10px 10px 10px;
|
|
line-height: 20px;
|
|
position: absolute;
|
|
right: 80px;
|
|
top: 10px;
|
|
}
|
|
.titles {
|
|
margin: 25px auto auto auto;
|
|
color: #333;
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
.title {
|
|
//height: 49px;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
display: flex;
|
|
padding-bottom: 10px;
|
|
.name {
|
|
margin-left: 10px;
|
|
font-weight: 600;
|
|
}
|
|
.line {
|
|
width: 5px;
|
|
height: 19px;
|
|
background: #005BAC;
|
|
}
|
|
}
|
|
}
|
|
.search-sel {
|
|
padding: 20px;
|
|
line-height: 40px;
|
|
}
|
|
</style>
|