Skip to content

C
CRM
Commit ea3c1cc5 authored by 罗超's avatar 罗超
Browse files
Options

首页完工

parent f67cdb97
Hide whitespace changes
Inline Side-by-side
Showing with 1045 additions and 242 deletions
src/components/Home.vue
View file @ ea3c1cc5
......@@ -2,148 +2,387 @@
<div class="home">
<el-row :gutter="25">
<el-col :span="16">
<el-card class="box-card" shadow="never">
<el-card class="box-card" shadow="never">
<div slot="header" class="clearfix">
<span>客户简报</span>
</div>
<div class="shang-list" >
<div class="shang-list-item">
<div class="icon">
<i class="iconfont iconVerifiedcustomername"></i>
</div>
<div class="title">
新增客户
</div>
<div class="result">10</div>
<div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red"></i>
<span class="val red">30%</span>
</div>
<div class="shang-list">
<div class="shang-list-item">
<div class="icon">
<i class="iconfont iconVerifiedcustomername"></i>
</div>
<div class="shang-list-item">
<div class="icon orange">
<i class="iconfont iconlianxiren"></i>
</div>
<div class="title">
新增联系人
</div>
<div class="result">30</div>
<div class="eq">
较上月
<i class="iconfont iconic_trending_down_px green"></i>
<span class="val green">5%</span>
</div>
<div class="title">新增客户</div>
<div class="result">10</div>
<div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red"></i>
<span class="val red">30%</span>
</div>
<div class="shang-list-item">
<div class="icon green">
<i class="iconfont iconshangji-"></i>
</div>
<div class="title">
新增商机
</div>
<div class="result">5</div>
<div class="eq">
较上月
<i class="iconfont iconchiping"></i>
<span class="val red">持平</span>
</div>
</div>
<div class="shang-list-item">
<div class="icon orange">
<i class="iconfont iconlianxiren"></i>
</div>
<div class="shang-list-item">
<div class="icon blue">
<i class="iconfont icondingdan"></i>
</div>
<div class="title">
新增订单
</div>
<div class="result">9</div>
<div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red"></i>
<span class="val red">80%</span>
</div>
<div class="title">新增联系人</div>
<div class="result">30</div>
<div class="eq">
较上月
<i class="iconfont iconic_trending_down_px green"></i>
<span class="val green">5%</span>
</div>
<div class="shang-list-item">
<div class="icon red">
<i class="iconfont iconjine"></i>
</div>
<div class="title">
订单金额
</div>
<div class="result">3,000,000</div>
<div class="eq">
较上月
<i class="iconfont iconic_trending_down_px green"></i>
<span class="val green">1%</span>
</div>
</div>
<div class="shang-list-item">
<div class="icon green">
<i class="iconfont iconshangji-"></i>
</div>
<div class="shang-list-item">
<div class="icon zi">
<i class="iconfont iconmoney"></i>
</div>
<div class="title">
新增收款
</div>
<div class="result">200,000</div>
<div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red"></i>
<span class="val red">10%</span>
</div>
<div class="title">新增商机</div>
<div class="result">5</div>
<div class="eq">
较上月
<i class="iconfont iconchiping"></i>
<span class="val red">持平</span>
</div>
<div class="shang-list-item">
<div class="icon yellow">
<i class="iconfont iconbaifang"></i>
</div>
<div class="title">
新增拜访
</div>
<div class="result">9</div>
<div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red"></i>
<span class="val red">100%</span>
</div>
</div>
<div class="shang-list-item">
<div class="icon blue">
<i class="iconfont icondingdan"></i>
</div>
<div class="shang-list-item">
<div class="icon grey">
<i class="iconfont icongenjin"></i>
</div>
<div class="title">
新增跟进
</div>
<div class="result">30</div>
<div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red"></i>
<span class="val red">40%</span>
</div>
<div class="title">新增订单</div>
<div class="result">9</div>
<div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red"></i>
<span class="val red">80%</span>
</div>
</div>
<div class="shang-list-item">
<div class="icon red">
<i class="iconfont iconjine"></i>
</div>
<div class="title">订单金额</div>
<div class="result">3,000,000</div>
<div class="eq">
较上月
<i class="iconfont iconic_trending_down_px green"></i>
<span class="val green">1%</span>
</div>
</div>
<div class="shang-list-item">
<div class="icon zi">
<i class="iconfont iconmoney"></i>
</div>
<div class="title">新增收款</div>
<div class="result">200,000</div>
<div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red"></i>
<span class="val red">10%</span>
</div>
</div>
<div class="shang-list-item">
<div class="icon yellow">
<i class="iconfont iconbaifang"></i>
</div>
<div class="title">新增拜访</div>
<div class="result">9</div>
<div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red"></i>
<span class="val red">100%</span>
</div>
</div>
<div class="shang-list-item">
<div class="icon grey">
<i class="iconfont icongenjin"></i>
</div>
<div class="title">新增跟进</div>
<div class="result">30</div>
<div class="eq">
较上月
<i class="iconfont iconzujiantubiaokupx_- red"></i>
<span class="val red">40%</span>
</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="tic-card" shadow="never">
<div class="tic-content">
<el-row :gutter="10">
<el-col span="8">
<img src="../assets/img/home/money.png" style="margin:20px 0 0 20px;">
</el-col>
<el-col span="16">
<div class="money-box">
<small>￥</small>
16000.00
</div>
<div class="tips">本月提成</div>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col span="8">
<img src="../assets/img/home/money.png" style="margin:20px 0 0 20px;" />
</el-col>
<el-col span="16">
<div class="money-box">
<small>￥</small>
16000.00
</div>
<div class="tips">本月提成</div>
</el-col>
</el-row>
</div>
<div class="tic-chart">
<ticheng/>
<ticheng />
</div>
</el-card>
<el-card class="zhou-card" shadow="never">
<el-row :gutter="10">
<el-col span="10" class="title">本周销冠</el-col>
<el-col span="14" class="money-box">
<small>￥</small>
560000.00
</el-col>
</el-row>
<el-row>
<el-col span="24">
<span class="zhou-head">
<img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580985297255&di=d10539f3a69a8507564aaa3ac4fc131b&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_mini%2Cc_zoom%2Cw_640%2Fimages%2F20170728%2F5843abd8cdb74745a2fe2349879cb055.jpeg"
alt
/>
</span>
</el-col>
</el-row>
<div class="zhou-name">吴彦祖（香港）</div>
<div class="zhou-depart">
香港印象
<b>·</b>销售一组
</div>
</el-card>
</el-col>
</el-row>
<el-row :gutter="25" style="margin-top:25px;">
<el-col span="10">
<el-card class="sum-card" shadow="never">
<div slot="header" class="clearfix">
<span>数据汇总</span>
</div>
<div class="sum-list">
<div class="sum-list-item">
<div class="icon"></div>
<div class="item-name">客户汇总</div>
<div class="item-hui">
新增客户
<b>0</b>个
</div>
<div class="item-hui">
转成交客户
<b>0</b>个
</div>
</div>
<div class="sum-list-item">
<div class="icon green"></div>
<div class="item-name">跟进汇总</div>
<div class="item-hui">
跟进客户
<b>0</b>个
</div>
<div class="item-hui">
新增客户中未跟进
<b>0</b>个
</div>
</div>
<div class="sum-list-item">
<div class="icon blue"></div>
<div class="item-name">商机汇总</div>
<div class="item-hui">
新增商机
<b>0</b>个
</div>
<div class="item-hui">
赢单商机
<b>0</b>个
</div>
</div>
<div class="sum-list-item">
<div class="icon zi"></div>
<div class="item-name">订单汇总</div>
<div class="item-hui">
新增订单
<b>0</b>个
</div>
<div class="item-hui">
订单金额
<b>0</b>万
</div>
</div>
<!-- <div class="sum-list-item">
<div class="icon qing"></div>
<div class="item-name">待收款金额汇总</div>
<div class="item-hui">未收金额<b>0</b>万</div>
<div class="item-hui">已收金额<b>0</b>万</div>
</div>-->
</div>
</el-card>
</el-col>
<el-col span="6">
<el-card class="notinmoney-card" shadow="never">
<div class="title">待收款汇总</div>
<div class="money">
<small>￥</small>3,600,000.00
</div>
<div class="charts-box">
<notincome />
</div>
</el-card>
</el-col>
<el-col span="8">
<el-card class="sum-card ding" shadow="never">
<div slot="header" class="clearfix">
<span>遗忘提醒</span>
</div>
<div class="sum-list">
<div class="sum-list-item">
<div class="icon"></div>
<div class="item-name">超过7天未联系的客户</div>
<div class="item-hui">
<b>0</b>个
</div>
</div>
<div class="sum-list-item">
<div class="icon green"></div>
<div class="item-name">超过15天未联系的客户</div>
<div class="item-hui">
<b>0</b>个
</div>
</div>
<div class="sum-list-item">
<div class="icon blue"></div>
<div class="item-name">超过30天未联系的客户</div>
<div class="item-hui">
<b>0</b>个
</div>
</div>
<div class="sum-list-item">
<div class="icon zi"></div>
<div class="item-name">超过3个月未联系的客户</div>
<div class="item-hui">
<b>0</b>个
</div>
</div>
<div class="sum-list-item">
<div class="icon qing"></div>
<div class="item-name">超过6个月未联系的客户</div>
<div class="item-hui">
<b>0</b>个
</div>
</div>
<div class="sum-list-item">
<div class="icon block"></div>
<div class="item-name">逾期未联系的客户</div>
<div class="item-hui">
<b>0</b>个
</div>
</div>
</div>
</el-card>
</el-col>
</el-row>
<el-row :gutter="25" style="margin-top:25px;">
<el-col span="16">
<el-card class="rank-card" shadow="never">
<div slot="header" class="clearfix">
<el-row>
<el-col :span="12">
<span>排行榜</span>
</el-col>
<el-col :span="12" class="option-item" style="">
<el-select v-model="rankType" size="mini" style="width:120px;" placeholder="请选择">
<el-option label="销售额排名" value="1"></el-option>
<el-option label="新增客户排名" value="2"></el-option>
<el-option label="新增商机排名" value="3"></el-option>
</el-select>
</el-col>
</el-row>
</div>
<div class="rank-list">
<div class="rank-list-item">
<div class="rank red">NO.1</div>
<div class="head">
<el-avatar :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
</div>
<div class="rank-name">
<div class="rn">尼尔小姐姐</div>
<div>机械印象 销售一组</div>
</div>
<div class="score">33,000,000</div>
</div>
<div class="rank-list-item">
<div class="rank zi">NO.2</div>
<div class="head">
<el-avatar :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
</div>
<div class="rank-name">
<div class="rn">尼尔小姐姐</div>
<div>机械印象 销售一组</div>
</div>
<div class="score">33,000,000</div>
</div>
<div class="rank-list-item">
<div class="rank blue">NO.3</div>
<div class="head">
<el-avatar :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
</div>
<div class="rank-name">
<div class="rn">尼尔小姐姐</div>
<div>机械印象 销售一组</div>
</div>
<div class="score">33,000,000</div>
</div>
<div class="rank-list-item">
<div class="rank">NO.4</div>
<div class="head">
<el-avatar :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
</div>
<div class="rank-name">
<div class="rn">尼尔小姐姐</div>
<div>机械印象 销售一组</div>
</div>
<div class="score">33,000,000</div>
</div>
<div class="rank-list-item">
<div class="rank">NO.5</div>
<div class="head">
<el-avatar :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
</div>
<div class="rank-name">
<div class="rn">尼尔小姐姐</div>
<div>机械印象 销售一组</div>
</div>
<div class="score">33,000,000</div>
</div>
<div class="rank-list-item">
<div class="rank">NO.6</div>
<div class="head">
<el-avatar :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
</div>
<div class="rank-name">
<div class="rn">尼尔小姐姐</div>
<div>机械印象 销售一组</div>
</div>
<div class="score">33,000,000</div>
</div>
</div>
</el-card>
</el-col>
<el-col span="8">
<el-card class="loudou-card" shadow="never">
<div slot="header" class="clearfix">
<el-row>
<el-col :span="12">
<span>销售漏斗</span>
</el-col>
<el-col :span="12" class="option-item" style="">
<el-select v-model="rankType" size="mini" style="width:120px;" placeholder="请选择">
<el-option label="商机漏斗图" value="1"></el-option>
</el-select>
</el-col>
</el-row>
</div>
<div style="width:100%;height:100%;">
<sjld/>
</div>
</el-card>
</el-col>
</el-row>
......@@ -151,154 +390,398 @@
</template>
<script>
import ticheng from './chart/ticheng'
import ticheng from "./chart/ticheng";
import notincome from "./chart/noincome";
import sjld from './chart/shangjiloudou'
export default {
components:{
ticheng
}
components: {
ticheng,
notincome,
sjld
},
data() {
return {
rankType: "1"
};
}
};
</script>
<style>
.home {
width: 100%;
margin-bottom: 25px;
}
.el-card__header{
font-family: perfectFont;
font-weight: bold;
.el-card__header {
font-family: perfectFont;
font-weight: bold;
}
.el-card,
.el-message {
border-radius: 0 !important;
}
.box-card .shang-list {
}
.box-card,
.sum-card,
.rank-card {
padding-bottom: 20px;
}
.el-card, .el-message{
border-radius: 0 !important;
}
.box-card .shang-list{
height: 358px;
overflow-y:auto;
}
.box-card .shang-list .shang-list-item{
margin-bottom: 5px;
height: 54px;
background: rgba(242,242,242,1);
display: flex;
align-items: center;
}
.box-card .shang-list .shang-list-item .icon{
width: 26px;
height: 26px;
line-height: 26px;
text-align: center;
background: rgba(13,36,129,1);
color: #FFF;
margin:0 25px;
}
.box-card .shang-list .shang-list-item .title{
font-size: 14px;
color: #333333;
width: 80px;
/* font-weight: bold;
.box-card .el-card__body,
.sum-card .el-card__body,
.rank-card .el-card__body {
height: 358px;
overflow-y: hidden;
padding: 0px 20px !important;
margin-top: 20px;
}
.box-card .el-card__body:hover,
.sum-card .el-card__body:hover,
.rank-card .el-card__body:hover{
overflow-y: auto;
padding-right: 16px !important;
}
.box-card .shang-list .shang-list-item {
margin-bottom: 5px;
height: 54px;
background: rgba(242, 242, 242, 1);
display: flex;
align-items: center;
}
.box-card .icon {
width: 26px;
height: 26px;
line-height: 26px;
text-align: center;
background: rgba(13, 36, 129, 1);
color: #fff;
margin: 0 25px;
}
.box-card .shang-list .shang-list-item .title {
font-size: 14px;
color: #333333;
width: 80px;
/* font-weight: bold;
font-family: perfectFont; */
}
.box-card .shang-list .shang-list-item .result{
flex:1;
padding-left: 130px;
font-size: 20px;
font-family: perfectFont;
color:#000;
font-weight: bold;
.box-card .shang-list .shang-list-item .result {
flex: 1;
padding-left: 130px;
font-size: 20px;
font-family: perfectFont;
color: #000;
font-weight: bold;
}
.box-card .shang-list .shang-list-item .eq{
width: 180px;
font-size: 12px;
color:gray;
.box-card .shang-list .shang-list-item .eq {
width: 180px;
font-size: 12px;
color: gray;
}
.box-card .shang-list .shang-list-item .eq i{
font-size: 26px;
margin-left: 30px;
margin-right: 15px;
color: #333;
vertical-align: sub;
.box-card .shang-list .shang-list-item .eq i {
font-size: 26px;
margin-left: 30px;
margin-right: 15px;
color: #333;
vertical-align: sub;
}
.box-card .shang-list .shang-list-item .eq .val{
font-size: 20px;
font-family: perfectFont;
.box-card .shang-list .shang-list-item .eq .val {
font-size: 20px;
font-family: perfectFont;
}
.box-card .shang-list .shang-list-item .eq .green{
color: rgb(16,124,16);
.box-card .shang-list .shang-list-item .eq .green {
color: rgb(16, 124, 16);
}
.box-card .shang-list .shang-list-item .eq .red{
color: rgb(195,0,82);
.box-card .shang-list .shang-list-item .eq .red {
color: rgb(195, 0, 82);
}
.box-card .shang-list .shang-list-item .icon i{
font-size: 14px;
.box-card .icon i {
font-size: 14px;
}
.box-card .shang-list .shang-list-item .icon.green{
background: rgb(16,124,16);
.box-card .icon.green {
background: rgb(16, 124, 16);
}
.box-card .shang-list .shang-list-item .icon.blue{
background: rgb(0,99,177);
.box-card .icon.blue {
background: rgb(0, 99, 177);
}
.box-card .shang-list .shang-list-item .icon.orange{
background: rgb(202,80,16);
.box-card .icon.orange {
background: rgb(202, 80, 16);
}
.box-card .shang-list .shang-list-item .icon.grey{
background: rgb(118,118,118);
.box-card .icon.grey {
background: rgb(118, 118, 118);
}
.box-card .shang-list .shang-list-item .icon.red{
background: rgb(195,0,82);
.box-card .icon.red {
background: rgb(195, 0, 82);
}
.box-card .shang-list .shang-list-item .icon.zi{
background: rgb(136,23,152);
.box-card .icon.zi {
background: rgb(136, 23, 152);
}
.box-card .shang-list .shang-list-item .icon.yellow{
background: rgb(255,185,0);
.box-card .icon.yellow {
background: rgb(255, 185, 0);
}
.tic-card{
padding:0px;
height:190px;
border:none;
.tic-card {
padding: 0px;
height: 196px;
border: none;
}
.tic-card .el-card__body,
.zhou-card .el-card__body{
padding:0px;
}
.tic-card .tic-content{
height: 83px;
width:100%;
}
.tic-card .tic-content .money-box{
margin-top:20px;
margin-right:30px;
color:#00C5C8;
font-family: perfectFont;
text-align: right;
font-size: 26px;
.zhou-card .el-card__body,
.notinmoney-card .el-card__body {
padding: 0px;
}
.tic-card .tic-content {
height: 83px;
width: 100%;
}
.tic-card .tic-content .money-box {
margin-top: 20px;
margin-right: 30px;
color: #00c5c8;
font-family: perfectFont;
text-align: right;
font-size: 26px;
font-weight: bold;
}
.tic-card .tic-content .money-box small {
font-size: 12px;
font-weight: 500;
}
.tic-card .tic-content .tips {
font-size: 14px;
color: #666;
margin-right: 30px;
text-align: right;
}
.tic-card .tic-chart {
height: 111px;
width: 100%;
}
.zhou-card {
padding: 0px;
border: none;
background: rgba(13, 36, 129, 1);
margin-top: 25px;
height: 236px;
}
.zhou-card .el-card__body {
padding: 0px;
background: url("../assets/img/home/zhouguan.png") rgba(13, 36, 129, 1);
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}
.zhou-card .title {
font-size: 20px;
font-family: perfectFont;
color: #fff;
padding: 10px 0 0 0px;
text-indent: 20px;
}
.zhou-card .money-box {
margin-top: 10px;
padding-right: 20px !important;
color: #fff;
font-family: perfectFont;
text-align: right;
font-size: 26px;
font-weight: bold;
}
.zhou-card .money-box small {
font-size: 12px;
font-weight: 500;
}
.zhou-card .zhou-head {
margin: 10px auto;
display: block;
width: 70px;
height: 70px;
background: rgba(85, 189, 233, 0.2);
padding: 4px;
border-radius: 100%;
}
.zhou-card .zhou-head img {
width: 100%;
height: 100%;
border-radius: 100%;
}
.zhou-card .zhou-name {
font-size: 14px;
color: #fff;
font-family: perfectFont;
font-weight: bold;
text-align: center;
}
.zhou-card .zhou-depart {
font-size: 14px;
color: #fff;
font-family: perfectFont;
text-align: center;
margin-top: 15px;
}
.sum-card .el-card__body {
height: 165px;
overflow-y: hidden;
padding-right: 20px;
}
.sum-card .sum-list {
}
.sum-card .sum-list .sum-list-item {
height: 45px;
border-bottom: 1px solid #e2e4ef;
display: flex;
align-items: center;
}
.sum-card .sum-list .sum-list-item .icon {
width: 4px;
height: 12px;
margin-right: 10px;
background: #ffa475;
}
.sum-card .sum-list .sum-list-item .icon.green {
background: #94b877;
}
.sum-card .sum-list .sum-list-item .icon.blue {
background: #0d2481;
}
.sum-card .sum-list .sum-list-item .icon.zi {
background: rgb(210, 197, 240);
}
.sum-card .sum-list .sum-list-item .icon.qing {
background: #55bde9;
}
.sum-card .sum-list .sum-list-item .icon.black {
background: #333;
}
.sum-card .sum-list .sum-list-item .item-name {
width: 90px;
font-size: 12px;
}
.ding .sum-list .sum-list-item .item-name {
width: 150px;
}
.sum-card .sum-list .sum-list-item .item-hui {
flex: 1;
font-size: 12px;
text-align: right;
}
.sum-card .sum-list .sum-list-item .item-hui b {
font-weight: bold;
font-size: 22px;
font-family: perfectFont;
margin: 0 5px;
}
.notinmoney-card {
height: 268px;
}
.notinmoney-card .title {
font-size: 17px;
font-family: perfectFont;
color: #000;
padding: 10px 0 0 0px;
text-indent: 20px;
font-weight: bold;
}
.notinmoney-card .money {
font-size: 30px;
font-family: perfectFont;
color: #000;
padding: 10px 0 0 0px;
text-indent: 20px;
font-weight: bold;
color: #ffa475;
}
.notinmoney-card .charts-box {
height: 178px;
}
.notinmoney-card .money small {
font-size: 12px;
font-weight: 400;
}
.rank-card .el-card__body,
.loudou-card .el-card__body {
height: 358px;
overflow-y: hidden;
padding-right: 20px;
}
.rank-list {
}
.rank-list .rank-list-item {
height: 85px;
display: flex;
align-items: center;
cursor: default;
user-select: none;
}
.rank-list .rank-list-item:hover{
background: #F4F5F9;
}
.rank-list .rank-list-item .rank{
width: 200px;
font-size: 18px;
color:#999;
font-family: perfectFont !important;
font-weight: bold;
}
.tic-card .tic-content .money-box small{
font-size: 12px;
font-weight: 500;
.rank-list .rank-list-item .rank.blue{
color:#0D2481;
}
.rank-list .rank-list-item .rank.red{
color:rgb(195, 0, 82);
}
.rank-list .rank-list-item .rank.zi{
color:rgb(136, 23, 152);
}
.rank-list .rank-list-item .head{
width: 70px;
}
.tic-card .tic-content .tips{
font-size: 14px;
.rank-list .rank-list-item .rank-name{
width: 200px;
font-size: 12px;
color: #666;
margin-right:30px;
}
.rank-list .rank-list-item .rank-name .rn{
font-family: perfectFont !important;
font-weight: bold;
color: #333;
font-size: 16px;
}
.rank-list .rank-list-item .score{
font-size: 22px;
font-family: perfectFont !important;
font-weight: bold;
color: #333;
text-align: right;
flex: 1;
}
.option-item{
text-align:right;
}
.option-item .el-select>.el-input {
display: block;
background: #0d2481;
border-radius: 0;
}
.option-item .el-input--mini .el-input__inner {
height: 28px;
line-height: 28px;
background: #0d2481;
border-radius: 0;
color: #F1f1f1;
}
.option-item .el-select .el-input.is-focus .el-input__inner {
border-color: #0d2481;
}
.el-select-dropdown{
border-radius: 0px !important;
}
.el-select-dropdown__item.selected{
font-family: perfectFont !important;
color: #0d2481 !important;
}
.el-select-dropdown__item{
/* font-family: perfectFont !important; */
font-size: 12px !important;
}
.tic-card .tic-chart{
height: 107px;
width:100%;
}
.zhou-card{
padding:0px;
height:150px;
border:none;
background: rgba(13,36,129,1);
margin-top: 30px;
height: 236px;
}
.zhou-card .el-card__body{
padding:0px;
background: rgba(13,36,129,1);
height: 100%;
.loudou-card .el-card__header{
border: none;
}
</style>
\ No newline at end of file
src/components/chart/noincome.vue 0 → 100644
View file @ ea3c1cc5
<template>
<div class="inerank-container">
<div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
</div>
</template>
<script>
export default {
props:{
data:{
type:Array,
default:[]
}
},
data() {
return {
datatwo:[]
};
},
mounted() {
this.data=[
{
dataStr:'8月',
preferPrice:12000
},
{
dataStr:'9月',
preferPrice:120000
},
{
dataStr:'10月',
preferPrice:80000
},
{
dataStr:'11月',
preferPrice:85000
},
{
dataStr:'12月',
preferPrice:7000
},
{
dataStr:'1月',
preferPrice:160000
},
{
dataStr:'2月',
preferPrice:300000
},
]
this.datatwo=[
{
dataStr:'9月',
preferPrice:480000
},
{
dataStr:'10月',
preferPrice:120000
},
{
dataStr:'11月',
preferPrice:850000
},
{
dataStr:'12月',
preferPrice:70000
},
{
dataStr:'1月',
preferPrice:320000
},
{
dataStr:'2月',
preferPrice:700000
},
]
this.init();
},
methods: {
init() {
let myChart = this.$echarts.init(this.$refs.myLineRank);
var dataAxis = [];
var data2 = [];
this.data.forEach(x=>{
dataAxis.push(x.dataStr)
data2.push(x.preferPrice)
})
let option = {
// backgroundColor: "#0abb87", //"#19133e6e",
title: {
show: false
},
xAxis: {
data: dataAxis,
axisLabel: {
textStyle: {
color: "#79778a",
fontFamily: "DIN"
},
margin: 10,
interval: 0,
show: false
},
type : 'category',
axisTick: {
show: false
},
axisLine: {
show: false
}
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: "#272938",
fontFamily: "DIN"
},
show: false
},
splitLine: {
show: false
}
},
grid: {
left: 0,
right: 0,
top: 0,
bottom: 0
},
tooltip: {
trigger: "item",
axisPointer: {
type: "none",
snap: true,
label: {
backgroundColor: '#FAB6B6'
}
}
},
series: [
{
name: "未收款",
type: "bar",
smooth: false,
symbol: "circle",
barBorderRadius:[10, 10, 10, 10],
barWidth:14,
itemStyle: {
normal: {
lineStyle: {
color: "##0D2481"
},
areaStyle: {
color: "#00C5C8"
},
color:"#0D2481"
}
},
data: data2
}
]
};
myChart.setOption(option);
}
}
};
</script>
<style>
.inerank-container {
height: 100%;
width: 100%;
}
</style>
src/components/chart/shangjiloudou.vue 0 → 100644
View file @ ea3c1cc5
<template>
<div class="inerank-container">
<div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Array,
default: []
}
},
data() {
return {};
},
mounted() {
this.data = [
{
dataStr: "9月",
preferPrice: 12000
},
{
dataStr: "10月",
preferPrice: 8000
},
{
dataStr: "11月",
preferPrice: 8500
},
{
dataStr: "12月",
preferPrice: 7000
},
{
dataStr: "1月",
preferPrice: 16000
},
{
dataStr: "2月",
preferPrice: 0
}
];
this.init();
},
methods: {
init() {
let myChart = this.$echarts.init(this.$refs.myLineRank);
var dataAxis = [];
var data2 = [];
this.data.forEach(x => {
dataAxis.push(x.dataStr);
data2.push(x.preferPrice);
});
let option = (option = {
title: {
text: "漏斗图",
subtext: "纯属虚构",
show:false
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c}%"
},
legend: {
data: ["展现", "点击", "访问", "咨询", "订单"]
},
color:['#FF9459','#FFB18A','#FCBC9F','#F7C6B6','#EED8D4'],
series: [
{
name: "预期",
type: "funnel",
left: "10%",
width: "80%",
label: {
formatter: "{b}预期"
},
labelLine: {
show: false
},
itemStyle: {
opacity: 0.7
},
emphasis: {
label: {
position: "inside",
formatter: "{b}预期: {c}%"
}
},
data: [
{ value: 60, name: "访问" },
{ value: 40, name: "咨询" },
{ value: 20, name: "订单" },
{ value: 80, name: "点击" },
{ value: 100, name: "展现" }
]
},
{
name: "实际",
type: "funnel",
left: "10%",
width: "80%",
maxSize: "80%",
label: {
position: "inside",
formatter: "{c}%",
color: "#fff"
},
itemStyle: {
opacity: 0.5,
borderColor: "#fff",
borderWidth: 2
},
emphasis: {
label: {
position: "inside",
formatter: "{b}实际: {c}%"
}
},
data: [
{ value: 30, name: "访问" },
{ value: 10, name: "咨询" },
{ value: 5, name: "订单" },
{ value: 50, name: "点击" },
{ value: 80, name: "展现" }
]
}
]
});
myChart.setOption(option);
}
}
};
</script>
<style>
.inerank-container {
height: 100%;
width: 100%;
}
</style>
src/views/index.vue
View file @ ea3c1cc5
......@@ -36,24 +36,25 @@
.template-div{
position: absolute;
top: 90px;
left: 30px;
right: 30px;
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
padding: 0 30px;
}
*::-webkit-scrollbar{
width: 4px;
height: 8px;
}
*::-webkit-scrollbar-thumb {
border-radius: 4px;
/* border-radius: 4px; */
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
background: #c9c9c9;
background: #555;
}
*::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
border-radius: 4px;
background: #EDEDED;
/* border-radius: 4px; */
background: #555;
}
</style>
<template>
......
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