Skip to content

C
CRM
Commit 3b5b3f50 authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

1

parent 2d5c2f92
Show whitespace changes
Inline Side-by-side
Showing with 561 additions and 34 deletions
public/index.html
View file @ 3b5b3f50
......@@ -6,13 +6,6 @@
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="renderer" content="webkit">
<!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=z58ZwNa8oYvzEYI6dD8hAS0GFbfKpttP"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script> -->
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script type="text/javascript"
src="http://ditu.google.cn/maps/api/js?key=AIzaSyAZ5MIfzicStzKbIkbI3RcBBeZBjQFKsp0&language=zh-CN"></script>
<!-- <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> -->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=86f2f611126f36b93cf2ef280300524f&plugin=AMap.CitySearch"></script>
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>CRM</title>
</head>
......
src/App.vue
View file @ 3b5b3f50
......@@ -22,7 +22,7 @@ export default {
<style>
@import './assets/global/font.css';
@import '//at.alicdn.com/t/font_1627123_95ez472hgyg.css';
@import '//at.alicdn.com/t/font_1627123_zhwytyp2i4.css';
/* @import './assets/css/common.css'; */
@import './assets/css/init.css';
body,html{
......
src/assets/css/init.css
View file @ 3b5b3f50
......@@ -19,3 +19,6 @@ table { border-collapse:collapse; border-spacing:0; }
.height100{
height: 100%;
}
.perfectFont{
font-family: 'perfectFont';
}
\ No newline at end of file
src/components/Home.vue
View file @ 3b5b3f50
......@@ -12,14 +12,17 @@
box-sizing: border-box;
}
.home-page .home-page-box .tit{
font-size:14px;
font-size:16px;
font-weight:bold;
color:rgba(17,17,17,1);
}
.khjb{
.home-page .home-page-box .tit2{
color: white;
}
.home-page .khjb{
margin-top: 30px;
}
.khjb li{
.home-page .khjb li{
padding: 14px 93px 14px 30px;
display: flex;
align-items: center;
......@@ -30,38 +33,205 @@
font-weight:400;
color:rgba(17,17,17,1);
}
.khjb li:first-child{
.home-page .khjb li:first-child{
border-radius:30px 30px 0 0;
}
.khjb li:last-child {
.home-page .khjb li:last-child {
border-radius:0 0 30px 30px;
}
.home-page .khjb li img{
margin-right: 30px;
}
.home-page .khjb li div{
display: flex;
align-items: center;
}
.home-page .myecharts-sale{
height: 80%;
}
.home-page .myecharts-sale2{
height: 70%;
}
.home-page .shoukuan{
height: 20%;
display: flex;
justify-content: space-between;
}
.home-page .shoukuan-d{
display: flex;
align-items: center;
height: 14px;
font-weight:400;
}
.home-page .shoukuan-d>div{
display: flex;
align-items: center;
}
.home-page .shoukuan-d>div:nth-child(2){
margin-left: 40px;
}
.home-page .shoukuan-d>div span.rad{
width:14px;
height:14px;
background:rgba(13,36,129,1);
border-radius:50%;
margin-right: 10px;
display: block;
}
.home-page .shoukuan-d>div span.rad2{
background:rgba(255,164,117,1);
}
.home-page .yejizhibiao{
display: flex;
align-items: center;
justify-content: space-between
}
.home-page .yejizhibiao .el-input__inner{
border-radius: 17px;
background-color: #0D2481;
color: white;
}
.myCanvas-box{
text-align: center;
padding-top: 50px;
}
.yejizhibiao-item{
padding-top: 30px;
display: flex;
justify-content: space-between;
text-align: center;
font-size: 12px;
color: #111111;
}
.yejizhibiao-item div p span{
display: inline-block;
width:12px;
height:12px;
background:rgba(13,36,129,1);
border-radius:50%;
}
.yejizhibiao-item div:nth-child(1) p span{
background:#FFA97C;
}
.yejizhibiao-item div:nth-child(2) p span{
background:#E6ECF8;
}
.shuying{
display: flex;
padding: 20px 0 0 0;
justify-content: space-between;
font-size:12px;
color:rgba(255,255,255,1);
}
.meiju{
font-size: 12px;
color: #FFFFFF;
}
.meiju div p{
display: flex;
align-items: center;
}
.meiju div p span{
width:12px;
height:12px;
background:rgba(255,164,117,1);
border-radius:50%;
display: inline-block;
margin-right: 5px;
}
.meiju div{
display: flex;
align-items: center;
justify-content: space-between;
}
.meiju div:nth-child(1){
margin-bottom: 5px;
}
.kehuloudou{
display: flex;
align-items: center;
justify-content: space-between;
}
.kehuloudou .el-input__inner{
border-radius: 17px;
background-color: white;
color: #0D2481;
}
</style>
<template>
<div class="home-page">
<div class="home-page-box">
<el-row :gutter="20" class="height100">
<el-row :gutter="30" class="height100">
<el-col :span="18" class="height100">
<div class="ht-left">
<div class="shoukuan">
<p class="tit perfectFont">收款趋势</p>
<div class="shoukuan-d">
<div>
<span class="rad"></span>
<span>待收金额 0.00元</span>
</div>
<div>
<span class="rad rad2"></span>
<span>已收金额 0.00元</span>
</div>
</div>
</div>
<div class="myecharts-sale" ref="myecharts" ></div>
</div>
</el-col>
<el-col :span="6" class="height100">
<div class="ht-right">
<div class="ht-right" style="padding-top: 20px;">
<div class="yejizhibiao">
<p class="tit perfectFont">业绩指标</p>
<el-select v-model="value" size="mini" class="w110" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="myCanvas-box">
<canvas id="myCanvas" width="180" height="180">
当前浏览器版本过低，请使用其他浏览器尝试
</canvas>
<div class="yejizhibiao-item">
<div>
<p><span></span></p>
<p>目标金额</p>
<p>0.00元</p>
</div>
<div>
<p><span></span></p>
<p>合同金额</p>
<p>0.00元</p>
</div>
<div>
<p><span></span></p>
<p>汇款金额</p>
<p>0.00元</p>
</div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
<div class="home-page-box">
<el-row :gutter="20" class="height100">
<el-row :gutter="30" class="height100">
<el-col :span="18" class="height100">
<div class="ht-left">
<p class="tit">客户简报</p>
<p class="tit perfectFont">客户简报</p>
<ul class="khjb">
<li v-for="(item, index) in newCast" :key="index">
<div>
<img :src="`../../assets/img/home/img${index}.png`" alt="">
<img v-if="index === 0" src="../assets/img/home/img0.png" alt="">
<img v-if="index === 1" src="../assets/img/home/img1.png" alt="">
<img v-if="index === 2" src="../assets/img/home/img2.png" alt="">
<img v-if="index === 3" src="../assets/img/home/img3.png" alt="">
<img v-if="index === 4" src="../assets/img/home/img4.png" alt="">
<span>{{item.name}}</span>
</div>
<p>{{item.num}}</p>
......@@ -70,8 +240,33 @@
</div>
</el-col>
<el-col :span="6" class="height100">
<div class="ht-right">
<div class="ht-right" style="background:rgba(13,36,129,1);">
<div class="kehuloudou">
<p class="tit tit2 perfectFont">客户漏斗</p>
<el-select v-model="value" size="mini" class="w110" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="shuying">
<p>赢单: 0.00元</p>
<p>输单: 0.00元</p>
</div>
<div class="myecharts-sale2" ref="myecharts2" ></div>
<div class="meiju">
<div>
<p><span></span>验证客户(1000)</p>
<p><span></span>需求分析(1000)</p>
</div>
<div>
<p><span></span>方案/报价(1000)</p>
<p><span></span>谈判审核(1000)</p>
</div>
</div>
</div>
</el-col>
</el-row>
......@@ -79,6 +274,7 @@
</div>
</template>
<script>
import DonutChart from '../../node_modules/donut-chart'
export default {
data () {
return {
......@@ -99,14 +295,349 @@ export default {
name: '新增合同',
num: 39
}
]
],
options: [
{
value: 0,
label: '目标金额'
},{
value: 1,
label: '合同金额'
},{
value: 2,
label: '回款金额'
}
],
value: 0,
}
},
mounted () {
this.shoukuan()
this.yeji()
this.loudou()
},
methods: {
// 收款趋势图表
shoukuan(){
let myChart = this.$echarts.init(this.$refs.myecharts);
let dataAxis = [];
let _this = this;
let option = {
grid: {
left: '8%',
right: '4%',
top: '2%',
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: true,
type: 'cross',
label: {
backgroundColor: '#0D2481',
},
lineStyle: {
width: 4,
color: 'rgba(255,255,255,.1)'
}
},
backgroundColor: '#0D2481',
confine: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
axisTick: {
show:false
},
axisLine:{
show:false
},
axisLabel: {
color: '#333333',
padding: [10, 0, 0, 0]
},
data: ['2019-06', '2019-07', '2019-08', '2019-09', '2019-10', '2019-11', '2019-12']
},
yAxis: {
type: 'value',
inverse: false,
axisTick: {
show:false
},
axisLine:{
show:false
},
splitLine: {
lineStyle: {
color: '#EEEEEE',
type: 'solid'
}
},
nameTextStyle: {
color: '#ffffff',
fontSize: 18
},
axisLabel: {
color: '#969696',
}
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
symbolSize: 10,
hoverAnimation: true,
smooth: true,
showSymbol: false,
itemStyle: {
borderWidth: 5,
color: '#0D2481',
shadowColor: 'rgba(13, 36, 129, 1)'
},
lineStyle: {
color: "#0D2481",
width: 2,
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(13, 36, 129, .5)" },
{ offset: .8, color: "rgba(13, 36, 129, 0)" }
])
}
},
},{
data: [60, 80, 888, 250, 455, 365, 454],
type: 'line',
symbolSize: 10,
hoverAnimation: true,
smooth: true,
showSymbol: false,
itemStyle: {
borderWidth: 5,
color: '#FFA475',
shadowColor: 'rgba(255, 164, 117, 1)'
},
lineStyle: {
color: "#FFA475",
width: 2,
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(255, 164, 117, .5)" },
{ offset: .8, color: "rgba(255, 164, 117, 0)" }
])
}
},
}]
};
myChart.setOption(option);
},
// 业绩指标图表
yeji(){
var option = {
type: 'pie', // pie 环形图|| gauge 计量图
title: {
show: true,
text: '总资产(元)',
textStyle: {
fontSize: "14px",
lineHeight: "30px",
color: '#9f9f9f'
},
subtext: '360',
subtextStyle: {
fontSize: "14px",
lineHeight: "35px",
color: '#e53344'
},
x: '50%', // title 位置
y: "50%",
},
tooltip: {
show: false,
fontStyle: "normal", // 规定字体样式 normal || italic || oblique
fontVariant: "normal", // 规定字体变体 normal || small-caps
fontWeight: 'normal', // 规定字体的粗细 normal || bold || bolder || lighter || 100 || 200 || 300 || 400 || 500 || 600 || 700 || 800 || 900
fontSize: "14px", // 规定字号，以像素计
lineHeight: "30px", // 规定行高，以像素计
fontFamily: 'Arial',// 规定字体系列
color: 'white', // 字体颜色
backgroundColor: '#00000099', // tip 背景
formatter: function (param) { // 类似echarts 富文本编辑
var str = "{a|" + param.name + "}" + "{c|" + param.percent + "}" + '\n' + "{b|" + param.value +
"元}"
return str
},
rich: {
a: {
fontStyle: "normal",
fontVariant: "normal",
fontWeight: 'bold',
fontSize: "20px",
lineHeight: "30px",
fontFamily: 'Arial',
color: 'white',
},
c: {
fontStyle: "normal",
fontVariant: "normal",
fontWeight: 'normal',
fontSize: "20px",
lineHeight: "30px",
fontFamily: 'Arial',
color: 'white',
},
b: {
fontStyle: "normal",
fontVariant: "normal",
fontWeight: 'bold',
fontSize: "30px",
lineHeight: "35px",
fontFamily: 'Arial',
color: '#e53344',
}
}
},
x: "50%", // 图标位置
y: "50%",
radius: "30%", // 半径
lineWidth: "15%", // 圆环宽度
data: [{
name: "目标金额",
value: 110,
}, {
name: "合同金额",
value: 120,
}, {
name: "汇款金额",
value: 130,
}],
// {{/if}}
label: {
show: true,
fontStyle: "normal",
fontVariant: "normal",
fontWeight: 'bold',
fontSize: "14px",
lineHeight: "30px",
fontFamily: 'Arial',
color: '#9f9f9f',
formatter: function (param) {
var str = "{a|" + param.name + "}" + "{c|" + param.percent + "}" + '\n' + "{b|" + param.value +
"元}"
return str
},
rich: {
a: {
fontStyle: "normal",
fontVariant: "normal",
fontWeight: 'bold',
fontSize: "14px",
lineHeight: "30px",
fontFamily: 'Arial',
},
b: {
fontStyle: "normal",
fontVariant: "normal",
fontWeight: 'bold',
fontSize: "14px",
lineHeight: "35px",
fontFamily: 'Arial',
color: '#e53344',
},
c: {
fontStyle: "normal",
fontVariant: "normal",
fontWeight: 'bold',
fontSize: "14px",
lineHeight: "30px",
fontFamily: 'Arial',
}
}
},
capType: "round", // 圆角 || butt 平角
selectedStyle: { // 选中时的样式
color: "white", // 包边颜色
borderWidth: 10 // 包边宽度
},
color: ["#E8EAF7", "#596EC4", "#FFB690"],
labelCoverTitle: true, // label 是否覆盖标题
backgroundArc: '#999' // 空圆环的颜色
}
var cir = new DonutChart('myCanvas', option)
cir.init(function (result) {
// result 选中的选区的相关信息
})
},
// 漏斗
loudou(){
let myChart = this.$echarts.init(this.$refs.myecharts2);
let dataAxis = [];
let _this = this;
let option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
show: false,
},
legend: {
show: false,
data: ['点击','访问','咨询','订单']
},
series: [
{
name:'漏斗图',
type:'funnel',
left: '10%',
top: 60,
//x2: 80,
bottom: 60,
width: '80%',
// height: {totalHeight} - y - y2,
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
show: true,
position: 'inside'
},
labelLine: {
length: 10,
lineStyle: {
width: 1,
type: 'solid'
}
},
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
emphasis: {
label: {
fontSize: 20
}
},
data: [
{value: 60, name: '访问'},
{value: 40, name: '咨询'},
{value: 20, name: '订单'},
{value: 80, name: '点击'}
]
}
]
};
myChart.setOption(option);
}
}
}
......
src/components/HomeNav/HomeNavLeft.vue
View file @ 3b5b3f50
......@@ -88,35 +88,35 @@ export default {
activeIndex: 0,
navList: [
{
class: 'iconfont icondongwu',
class: 'iconfont iconyibiaopan',
name: '仪表盘'
},
{
class: 'iconfont icondongwu',
class: 'iconfont icondaiban',
name: '待办事项'
},
{
class: 'iconfont icondongwu',
class: 'iconfont iconxiansuo',
name: '线索'
},
{
class: 'iconfont icondongwu',
class: 'iconfont iconkehu',
name: '客户'
},
{
class: 'iconfont icondongwu',
class: 'iconfont iconkehu1',
name: '联系人'
},
{
class: 'iconfont icondongwu',
class: 'iconfont icongonghaiguanli',
name: '公海'
},
{
class: 'iconfont icondongwu',
class: 'iconfont iconshangji',
name: '商机'
},
{
class: 'iconfont icondongwu',
class: 'iconfont iconhetong',
name: '合同'
}
]
......
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