Skip to content

D
dsk-cr20g
Commit ed9816ef authored by MyName's avatar MyName
Browse files
Options

客户管理

parent 2aae72c5
Hide whitespace changes
Inline Side-by-side
Showing with 572 additions and 27 deletions
dsk-operate-ui/package.json
View file @ ed9816ef
......@@ -40,7 +40,7 @@
"axios": "0.24.0",
"clipboard": "2.0.8",
"core-js": "3.25.3",
"echarts": "5.4.0",
"echarts": "^5.4.0",
"element-resize-detector": "^1.2.4",
"element-ui": "2.15.12",
"file-saver": "2.0.5",
......
dsk-operate-ui/src/assets/styles/project.scss
View file @ ed9816ef
.app-container{
padding: 0;
}
//小导航
.miantitle{
color: #232323;
......@@ -791,3 +795,23 @@
.p10{
padding: 0 10px;
}
.tips{
display: inline-block;
padding: 4px 8px;
border-radius: 2px;
font-size: 12px;
margin-right: 8px;
&.tip1{
background-color: #E4F3FD;
color: #41A1FD;
}
&.tip2{
background-color: #F3F3FF;
color: #8491E8;
}
&.tip3{
background-color: #DEF6F0;
color: #0BAE8D;
}
}
dsk-operate-ui/src/views/custom/customList/index.vue
View file @ ed9816ef
......@@ -228,7 +228,6 @@ export default {
<style lang="scss" scoped>
.app-container{
padding: 0;
height: calc(100vh - 134px)
}
.box-card{
......
dsk-operate-ui/src/views/custom/overview/index.vue
View file @ ed9816ef
<template>
<div class="app-container">
客户概览
<div>
<div class="miantitle">
<span>客户管理</span>
<span> / 客户概览</span>
</div>
<div class="app-container">
<div class="topions">
<div class="icons">
<div class="name">客户总数</div>
<div class="count">120</div>
<img class="icon_img" src="@/assets/images/project/icon_1.png">
</div>
<div class="icons">
<div class="name">已合作客户</div>
<div class="count">56</div>
<img class="icon_img" src="@/assets/images/project/icon_2.png">
</div>
<div class="icons">
<div class="name">局级大客户</div>
<div class="count">50</div>
<img class="icon_img" src="@/assets/images/project/icon_3.png">
</div>
<div class="icons">
<div class="name">今日紧进客户</div>
<div class="count">30</div>
<img class="icon_img" src="@/assets/images/project/icon_4.png">
</div>
<div class="icons">
<div class="name">储备项目数</div>
<div class="count">33</div>
<img class="icon_img" src="@/assets/images/project/icon_5.png">
</div>
</div>
<div class="flex">
<el-card class="box-card noborder left" style="position: relative">
<div class="cardtitles">客户级别</div>
<div class="chartsum">
<div class="sum">23家</div>
<div>11%</div>
<div>有息债务/总负债</div>
</div>
<div class="flex">
<div id="khjb" class="chart1"></div>
<div class="tables">
<el-table
:data="tableData"
stripe border
style="width: 100%"
:default-sort = "{prop: 'date', order: 'descending'}"
>
<el-table-column
prop="name"
label="名称">
</el-table-column>
<el-table-column
prop="name"
label="数量（家）">
</el-table-column>
<el-table-column
prop="point"
label="占比">
</el-table-column>
</el-table>
</div>
</div>
</el-card>
<el-card class="box-card noborder right">
<div class="cardtitles">客户跟进动态
<div class="labels">
<div :class="{'on':datatype==1}" @click="getDT(1)">周</div>
<div :class="{'on':datatype==2}" @click="getDT(2)">月</div>
<div :class="{'on':datatype==3}" @click="getDT(3)">年</div>
</div>
</div>
<div id="khgjdt" class="chart2"></div>
</el-card>
</div>
<div class="flex">
<el-card class="box-card noborder left">
<div class="cardtitles">客户性质分析</div>
<div class="chart2" id="khxz"></div>
</el-card>
<el-card class="box-card noborder right">
<div class="cardtitles">客户资信评级</div>
<div class="chart2" id="khzxpj"></div>
</el-card>
</div>
<el-card class="box-card noborder">
<div class="cardtitles">客户动态</div>
<div class="trendslist">
<div class="trends" v-for="item in datalist">
<div class="names">{{item.name}}</div>
<div class="trendtips"><div class="tips tip3">{{item.tip1}}</div><div class="tips tip2">{{item.tip2}}</div></div>
<div class="trendcon">{{item.text}}</div>
<div class="time">{{item.time}}</div>
</div>
<div class="tables" style="width: 100%">
<div class="bottems">
<el-pagination
background
:page-size="10"
:current-page="1"
@current-change="handleCurrentChange"
layout="prev, pager, next"
:total="datalist.length">
</el-pagination>
</div>
</div>
</div>
</el-card>
</div>
</div>
</template>
<script>
import "@/assets/styles/project.scss"
import * as echarts from 'echarts'
export default {
name: 'Overview',
data() {
return {
//客户级别
chartDom: '',
myChart: '',
option: '',
//客户跟进
chartDom1: '',
myChart1: '',
option1: '',
//客户性质
chartDom2: '',
myChart2: '',
option2: '',
// 客户资信
chartDom3: '',
myChart3: '',
option3: '',
//表格数据
tableData:[
{name:'集团总部',sum:'23',point:'11%'},
{name:'一级单位',sum:'61',point:'29%'},
{name:'二级单位',sum:'60',point:'29%'},
{name:'三级单位',sum:'21',point:'10%'},
{name:'其他单位',sum:'44',point:'21%'},
],
datatype:'1',//切换类型
dtdata:[],//数据
dttime:[],//坐标
datalist:[
{name:'重庆市江北区国有资本投资运营管理集团有限公司',time:'2023-05-30',text:'新增招标公告：【江北房地产综合开发公司名下不动产鲤鱼池片区资产评估项目】 公开选取【资产评估】机构的公告',tip1:'正向',tip2:'招标公告'},
{name:'上海城投（集团）有限公司',time:'2023-05-29',text:'新增招标公告：北横通道新建工程——机电、装饰工程Ⅱ标段',tip1:'正向',tip2:'招标公告'},
{name:'上海申迪（集团）有限公司',time:'2023-5-27',text:'新增招标公告：上海国际旅游度假区核心区3.1平方公里绿地公园配套停车场项目',tip1:'正向',tip2:'招标公告'},
{name:'上海浦东建设股份有限公司',time:'2023-5-25',text:'新增招标公告：张村地块基础设施建设及上汽地块配套道路桥梁项目道路照明工程二标段',tip1:'正向',tip2:'招标公告'},
{name:'上海浦东建设股份有限公司',time:'2023-5-24',text:'新增供应商：江苏安神交通工程有限公司',tip1:'提示',tip2:'新增供应商'},
],
}
},
created() {
},
mounted(){
this.$nextTick(()=>{
this.chartDom = document.getElementById("khjb")
this.myChart = echarts.init(this.chartDom)
this.chartDom2 = document.getElementById("khxz")
this.myChart2 = echarts.init(this.chartDom2)
this.chartDom3 = document.getElementById("khzxpj")
this.myChart3 = echarts.init(this.chartDom3)
this.initChart()
this.getDT(1)
})
},
methods: {
initChart(){
//客户级别
this.option = {
tooltip: {
trigger: 'item'
},
color:['#8A82F3','#5B9CF7','#8DCF96','#FFDC6B','#FE9C77'],//修改配色
series: [
{
name: '',
type: 'pie',
radius: ['50%','70%'],
data: [
{ value: 23, name: '集团总部：11%' },
{ value: 61, name: '一级单位：29%' },
{ value: 60, name: '二级单位：29%' },
{ value: 21, name: '三级单位：10%' },
{ value: 44, name: '其他单位: 21%' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
this.option && this.myChart.setOption(this.option)
//客户性质分析
this.option2 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['地方单位', '事业单位', '政府机关', '中央企业', '上市公司', '军队', '民营企业','其他'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '',
type: 'bar',
barWidth: '20%',
data: [100, 152, 200, 334, 390, 330, 220,256,178],
itemStyle:{
normal: {
barBorderRadius: [4, 4, 0, 0],
color: '#165DFF'
}
}
}
]
}
this.option2 && this.myChart2.setOption(this.option2)
//客户资质分析
this.option3 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['AA', 'AA+', 'AA-', 'A', 'A+', 'A', 'A-','其他'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '',
type: 'bar',
barWidth: '20%',
data: [110, 112, 190, 234, 310, 350, 220,276,198],
itemStyle:{
normal:{
barBorderRadius:[4,4,0,0],
color:'#14C9C9'
},
}
}
]
}
this.option3 && this.myChart3.setOption(this.option3)
},
initDT(datas,labels){
this.chartDom1 = document.getElementById("khgjdt")
this.myChart1 = echarts.init(this.chartDom1)
//客户跟进动态
this.option1 = {
xAxis: {
type: 'category',
data: labels
},
yAxis: {
type: 'value'
},
grid:{
left:'8%',
top:'8%',
right:'5%',
bottom:'10%',
},
tooltip:{
axisPointer:{ //悬浮于圆点展示标签
type:'axis'
},
// trigger: 'axis'
},
series: [
{
name: '总跟进',
data: datas,
type: 'line',
smooth: true,
itemStyle: {
normal:{
color:'#0081FF'
}
},
label:{
normal:{
show:false
}
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(0, 129, 255, 0.5)'
}, {
offset: 1, color: 'rgba(0, 129, 255, 0)'
} ],
global: false
}
},
}
]
}
this.option1 && this.myChart1.setOption(this.option1)
},
getDT(type){
this.datatype = type
let time = new Date()
let week = ['周一','周二','周三','周四','周五','周六','周日']
let weekdata = [200,150,300,240,400,380,460]
let monthdata = [400,200,350,170,190,280,260,308,406,387,458,695,125,360,512,546,298,365,458,536,345,200,150,300,240,400,380,460,472,365,547]
let yeardata = [1908,1500,2300,1456,2354,2564,1254,1236,4561,4521,1236,4561,3521]
let datas = []
let labels = []
switch (type) {
case 1:
time = time.getDay()
// week.length = time
weekdata.length = time
for(var i=0;i<7;i++){
if(i > time){
weekdata.push('')
}
}
labels = week
datas = weekdata
break;
case 2:
let days = new Date(time.getFullYear(),time.getMonth()+1,0).getDate()//获取到本月天数
time = time.getDate()
monthdata.length = time
for(var i=1;i<days;i++){
labels.push(i+'日')
if(i > time){
monthdata.push("")
}
}
datas = monthdata
break;
case 3:
time = time.getMonth()+1
yeardata.length = time
for(var i=1;i<12;i++){
labels.push(i+'月')
if(i>time){
yeardata.push('')
}
}
datas = yeardata
break;
default:
break;
}
this.dtdata = datas
this.dttime = labels
this.initDT(datas,labels)
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
},
}
}
</script>
<style lang="scss" scoped>
.box-card{
margin: 12px 0 0;
padding-bottom: 24px;
&.left{
width: calc(62% - 16px);
margin-right: 14px;
}
&.right{
width: 40%;
}
}
.topions{
width: 100%;
display: flex;
.icons{
width: calc(20%);
margin-right: 16px;
height: 96px;
background: url("../../../assets/images/project/beijing.png") top center no-repeat;
background-size: 100% 100%;
position: relative;
padding: 24px;
&:last-child{
margin-right: 0;
}
.name{
font-size: 14px;
color: #3D3D3D;
line-height: 14px;
}
.count{
font-size: 26px;
font-weight: 700;
color: #0081FF;
padding-top: 14px;
line-height: 26px;
}
.icon_img{
width: 70px;
position: absolute;
right: 0;
bottom: 0;
}
}
}
.chart1{
width: 428px;
height: 240px;
}
.tables{
width: calc(100% - 428px);
}
.chartsum{
position: absolute;
color: #3D3D3D;
text-align: center;
top: 155px;
left: 168px;
>div{
font-size: 10px;
line-height: 18px;
padding: 0 2px;
&.sum{
font-size: 18px;
padding-bottom: 4px;
}
}
}
.chart2{
width: 100%;
height: 265px;
}
.cardtitles{
position: relative;
.labels{
width: 120px;
height: 22px;
position: absolute;
border-radius: 2px;
right: 24px;
top: 24px;
>div{
width: 40px;
height: 100%;
text-align: center;
line-height: 22px;
float: left;
opacity: 1;
border: 1px solid #EFEFEF;
margin-left: -1px;
font-weight: 400;
font-size: 12px;
color: rgba(35, 35, 35, 0.80);
cursor: pointer;
&.on{
background: #0081FF;
color: #FFFFFF;
}
&:first-child{
border-radius: 2px 0px 0px 2px;
}
&:last-child{
border-radius: 0px 2px 2px 0px;
}
}
}
}
.trendslist{
border-top: 1px solid #EFEFEF;
.trends{
position: relative;
padding: 16px 16px 0;
&:hover{
background: #F6F9FC;
}
.names{
width: calc(100% - 92px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 23px;
font-size: 16px;
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
font-weight: 700;
color: #3D3D3D;
line-height: 23px;
}
.trendtips{
padding: 8px 0 12px;
}
.trendcon{
border-bottom: 1px solid #EFEFEF;
font-size: 14px;
font-family: MicrosoftYaHei-Regular, MicrosoftYaHei;
font-weight: 400;
color: rgba(35,35,35,0.8);
line-height: 18px;
padding-bottom: 16px;
}
.time{
position: absolute;
right: 16px;
top: 26px;
font-size: 14px;
opacity: 0.4;
}
}
}
</style>
dsk-operate-ui/src/views/project/projectList/detail.vue
View file @ ed9816ef
......@@ -132,9 +132,6 @@
</script>
<style lang="scss" scoped>
.app-container{
padding: 0;
}
.head{
.titles{
line-height: 31px;
......
dsk-operate-ui/src/views/project/projectList/index.vue
View file @ ed9816ef
......@@ -331,10 +331,6 @@ export default {
}
</script>
<style lang="scss" scoped>
.app-container{
padding: 0;
}
.noborder{
position: relative;
}
......@@ -484,21 +480,6 @@ export default {
}
.det-tips{
padding: 8px 0 ;
.tips{
display: inline-block;
padding: 4px 8px;
border-radius: 2px;
font-size: 12px;
margin-right: 8px;
&.tip1{
background-color: #E4F3FD;
color: #41A1FD;
}
&.tip2{
background-color: #F3F3FF;
color: #8491E8;
}
}
}
.det-contets{
padding: 4px 0 16px;
......
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