Skip to content

E
enterprise-opt-kit
Commit 9ddba6de authored by 乐宝呗666's avatar 乐宝呗666
Browse files
Options

修改客户页面

parent 4055900c
Show whitespace changes
Inline Side-by-side
Showing with 615 additions and 815 deletions
src/assets/style/business.scss
View file @ 9ddba6de
......@@ -4,6 +4,7 @@
.businessStatistics{
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
height: 2.58rem;
padding:.14rem .24rem;
......@@ -11,12 +12,15 @@
.flex-1 {
font-size: .12rem;
}
.mt-0 {
margin-bottom: 0 !important;
}
.circle{
width: 1.25rem;
height: 1.25rem;
line-height: 1.25rem;
background: #30DDF4;
border: 1px solid #30DDF4;
border: 0.01rem solid #30DDF4;
border-radius: 50%;
position: absolute;
top: 50%;
......@@ -38,12 +42,12 @@
.box{
display: inline-block;
width: 2rem;
height: .6rem;
height: .613rem;
text-align: center;
background:rgba(144,224,255,0.15);
color: #fff;
border:1px solid #77E2FF;
margin-bottom: .2rem;
border: 0.01rem solid #77E2FF;
// margin-bottom: .2rem;
&:nth-of-type(2n){
margin-left: .2rem;
}
......@@ -53,6 +57,7 @@
font-weight:500;
color:#fff;
line-height: 2;
white-space: nowrap;
span{
font-size:.12rem;
}
......@@ -67,19 +72,21 @@
.horizontal{
width: 1.7rem;
height: .2rem;
}
.horizontal1 {
background: #000E42;
position: absolute;
top:.76rem;
top:.773rem;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.horizontal1 {
top:1.58rem;
.horizontal2 {
top:1.6066rem;
}
.vertical{
width: .2rem;
height: 1.62rem;
height: 1.9rem;
background: #000E42;
position: absolute;
top: 50%;
......
src/assets/style/client.scss
View file @ 9ddba6de
.client{
.centerBlock{
.content{
.searchMsg{
font-size:.14rem;
font-family:PingFang-SC-Medium,PingFang-SC;
box-sizing: border-box;
width: 100%;
height: 100%;
.businessStatistics{
width: 90%;
height: 58%;
margin: calc(21% - 70px) auto 0;
position: relative;
.circle{
width: 30%;
padding-bottom: 30%;
height: 0;
background: #30DDF4;
border: 1px solid #30DDF4;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -15%;
margin-left: -15%;
z-index: 2;
.circleTitle{
font-size:16px;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
color:#000E42;
margin-top: 20%;
text-align: center;
}
.circleValue{
font-size:32px;
font-family:ZhenyanGB-Regular,ZhenyanGB;
font-weight:400;
color:#000E42;
text-align: center;
padding: .24rem;
margin: 0 auto;
>.row-item {
line-height: 2;
}
}
.circle1{
width: 34%;
padding-bottom: 34%;
height: 0;
background: #000E42;
border-radius: 50%;
position: absolute;
border:1px solid #77E2FF;
top: 50%;
left: 50%;
margin-top: -17%;
margin-left: -17%;
z-index: 1;
}
.box1,.box2,.box3,.box4{
display: inline-block;
width: calc(50% - 50px);
padding: 0 20px;
text-align: center;
height: calc(50% - 8px);
line-height: 50px;
background:rgba(144,224,255,0.15);
color: #fff;
position: absolute;
border:1px solid #77E2FF;
.boxTitle{
font-size:16px;
font-family:PingFang-SC-Medium,PingFang-SC;
.c-title {
color:rgba(48,221,244,1);
font-weight:500;
color:#fff;
height: 40px;
span{
font-size:12px;
}
padding: .08rem 0;
}
.boxValue{
font-size:32px;
font-family:ZhenyanGB-Regular,ZhenyanGB;
font-weight:400;
color:#30DDF4;
}
}
.box2{
position: absolute;
top:0;
left: calc(50% + 10px);
}
.box3{
position: absolute;
top:calc(50% + 8px);
left: 0;
}
.box4{
position: absolute;
top:calc(50% + 8px);
left: calc(50% + 10px);
}
.horizontal{
.c-list {
box-sizing: border-box;
color: #fff;
width: 100%;
height: 14px;
background: #000E42;
position: absolute;
top:calc(50% - 6px);
left: 0;
z-index: 1;
}
.vertical{
width: 18px;
height: 100%;
background: #000E42;
position: absolute;
top:0;
left: calc(50% - 8px);
z-index: 1;
}
}
.centerBlock{
.content{
height: calc(73.5% - 20px);
.search{
width: 50%;
height: 30px;
margin: 10px auto;
border-radius: 2px;
.el-input{
width: 70%;
float: left;
.el-input__inner{
background:rgba(144,224,255,0.15);
border-radius:2px;
color: #FFFFFF;
font-size:12px;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
border: 0 !important;
}
}
.searchBtn{
width: 30%;
height: 28px;
line-height: 28px;
background:linear-gradient(180deg,rgba(48,221,244,1) 0%,rgba(48,221,244,1) 100%);
box-shadow:0px 4px 10px 0px rgba(0,0,0,0.5);
text-align: center;
height: 1.3rem;
overflow-y: auto;
padding: .12rem .24rem;
border-radius: .05rem;
border: 1px solid rgba(48,221,244,1);
background: #09154e;
>span{
float: left;
width: 50%;
}
}
.searchMsg{
width: 80%;
height: 40%;
padding: 5%;
margin: 0 auto 20px;
background:rgba(0,14,66,0.5);
box-shadow:0px 0px 8px 4px rgba(10,18,35,0.5);
border-radius:2px;
border:1px solid rgba(48,221,244,1);
>div{
width: 100%;
height: 30px;
line-height: 30px;
font-size:12px;
font-family:PingFang-SC-Medium,PingFang-SC;
.babel{
font-weight:500;
color:rgba(48,221,244,1);
}
.babelMsg{
font-weight:bold;
color:rgba(255,255,255,1);
float: right;
}
}
}
.architecture{
width: 90%;
height: calc(50% - 60px);
margin: 0 auto 20px;
background:rgba(0,14,66,0.5);
box-shadow:0px 0px 8px 4px rgba(10,18,35,0.5);
border-radius:2px;
position: relative;
.subtitle{
position: absolute;
top:0;
left: 0;
i{
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #30DDF4;
margin-right: 10px;
}
font-size:16px;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
color:rgba(255,255,255,1);
}
.architectureBlock{
width: 170px;
height: 150px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -85px;
margin-top: -75px;
background: url("~@/assets/img/ring.png");
background-size: 100% 100%;
.name{
width: 170px;
height: 150px;
font-size:20px;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
color:rgba(0,14,66,1);
line-height:174px;
text-align: center;
}
.top{
width: 80px;
text-align: center;
padding: 6px 10px;
background:rgba(48,221,244,1);
border-radius:2px;
border:1px solid rgba(119,226,255,1);
position: absolute;
top:-30%;
left: 50%;
margin-left: -50px;
}
.left,.right{
width:100%;
position: absolute;
top:-20%;
left: -105%;
padding: 0;
li{
text-align: center;
padding: 6px 10px;
background:rgba(48,221,244,1);
border-radius:2px;
border:1px solid rgba(119,226,255,1);
margin-bottom: 24%;
}
.pr-24 {
padding-right: .24rem;
}
.right{
position: absolute;
top:-20%;
left: 105%;
}
}
}
}
.bottomBox{
width: 100%;
height: 26.5%;
background: url("~@/assets/img/674266.png");
background-color: rgba(0, 14, 66, 0.5);
background-size: 100% 100%;
margin-top: 20px;
position: absolute;
left: 0;
bottom: 0;
}
}
.rightBlock{
.moreTxt {
font-size: .14rem;
color: #fff;
padding: .04rem .08rem;
text-decoration: underline;
cursor: pointer;
}
.iconBlock{
width: 90%;
height:60%;
background:rgba(13,30,91,1);
box-shadow:0px 4px 8px 0px rgba(10,18,35,0.5);
border:1px solid rgba(48,221,244,0.5);
margin: 4% auto 0;
padding: .24rem;
height:calc(100% - 1.12rem);
margin: 0 auto;
}
i{
display: inline-block;
position: relative;
top: 50%;
top: 20%;
margin-top: -10%;
margin-left: 5%;
float: left;
......
src/components/echarts/barChart.vue
View file @ 9ddba6de
......@@ -100,12 +100,15 @@ export default {
}
},
watch: {
message: function () {
message: {
handler () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 1000)
// console.log(this.message)
}, 0)
console.log(this.message)
},
deep: true
}
}
}
......
src/components/echarts/doubleYBarChart.vue
View file @ 9ddba6de
......@@ -157,12 +157,15 @@ export default {
}
},
watch: {
message: function () {
message: {
handler () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 1000)
// console.log(this.message)
}, 0)
console.log(this.message)
},
deep: true
}
}
}
......
src/components/echarts/funnel.vue
View file @ 9ddba6de
......@@ -91,12 +91,15 @@ export default {
}
},
watch: {
message: function () {
message: {
handler () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 1000)
// console.log(this.message)
}, 0)
console.log(this.message)
},
deep: true
}
}
}
......
src/components/echarts/lineChart.vue
View file @ 9ddba6de
......@@ -91,12 +91,15 @@ export default {
}
},
watch: {
message: function () {
message: {
handler () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 1000)
// console.log(this.message)
}, 0)
console.log(this.message)
},
deep: true
}
}
}
......
src/views/content/client/components/scatterPlot.vue → src/components/echarts/mulBarChart.vue
View file @ 9ddba6de
......@@ -25,74 +25,64 @@ export default {
methods: {
drawLine () {
const vm = this
const bars = []
this.message.title.forEach(e => {
bars.push({ type: 'bar' })
})
const source = []
const x = Object.keys(this.message.data)
for (let i = 0; i < x.length; i++) {
const da = this.message.data[x[i]]
const arr = []
for (let j = 0; j < this.message.title.length; j++) {
let flag = true
da.forEach(arg => {
if (arg.type === this.message.title[j]) {
arr.push(arg.num)
flag = false
}
})
if (flag) {
arr.push(0)
}
}
arr.unshift(x[i])
source.push(arr)
}
const title = this.message.title
title.unshift('product')
source.unshift(title)
// 基于准备好的dom，初始化echarts实例
vm.chart = echarts.init(document.getElementById(vm.idstr))
// 清空图表
vm.chart.clear()
vm.option = {
color: ['#30DDF4', '#E23AA2', '#F5A623', '#D6FFBA'],
grid: {
height: 135,
top: 50
},
color: ['#30DDF4', '#D6FFBA', '#E23AA2', '#F5A623'],
legend: {
show: true,
data: vm.message.legend, // ['新签预算', '新签实际', '完成比'],
textStyle: {
color: '#ffffff' // 图例文字颜色
color: '#ffffff'
}
},
tooltip: {},
dataset: {
source: source
tooltip: {
transitionDuration: 0,
trigger: 'item',
formatter: '{a}:<br/>{b}: {c} ({d}%)'
},
grid: {
top: '20%',
left: '10%',
right: '10%',
bottom: '15%'
},
xAxis: {
xAxis: [
{
type: 'category',
data: vm.message.xAxis, // ['4中心', '5中心', '6中心', '7中心', '8中心'],
axisPointer: {
type: 'shadow'
},
axisLine: {
show: true,
lineStyle: {
color: '#675bba'
color: '#FFF'
}
}
}
],
yAxis: [
{
type: 'value',
name: vm.message.yAxis, // '单位：万元',
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: 'rgba(255,255,255,.3)'
}
},
yAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#675bba'
color: '#FFF'
}
}
},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: bars
}
],
series: vm.message.data
}
vm.drawBar()
// window.addEventListener("resize",()=>{
// chart.resize();
......@@ -111,12 +101,15 @@ export default {
}
},
watch: {
message: function () {
message: {
handler () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 1000)
// console.log(this.message)
}, 0)
console.log(this.message)
},
deep: true
}
}
}
......
src/components/echarts/negativeBarChart.vue
View file @ 9ddba6de
......@@ -118,12 +118,15 @@ export default {
}
},
watch: {
message: function () {
message: {
handler () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 1000)
// console.log(this.message)
}, 0)
console.log(this.message)
},
deep: true
}
}
}
......
src/components/echarts/pieChart.vue
View file @ 9ddba6de
......@@ -82,12 +82,15 @@ export default {
}
},
watch: {
message: function () {
message: {
handler () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 1000)
// console.log(this.message)
}, 0)
console.log(this.message)
},
deep: true
}
}
}
......
src/components/echarts/waterBallChart.vue
View file @ 9ddba6de
......@@ -114,11 +114,15 @@ export default {
}
},
watch: {
message: function () {
message: {
handler () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 1000)
}, 0)
console.log(this.message)
},
deep: true
}
}
}
......
src/views/content/business/page.vue
View file @ 9ddba6de
<template>
<d2-container class="business">
<dv-loading v-show="loading">Loading...</dv-loading>
<div v-show="!loading">
<headerLayout></headerLayout>
<div class="section">
<div class="leftBlock">
......@@ -18,6 +20,7 @@
<div class="boxValue pl-2">{{totalObj.total['商机整体总预算'] | numFilter}}</div>
</div>
</div>
<div class="horizontal"></div>
<div class="flex-1">
<div class="box">
<div class="boxTitle pr-7">本月新增<span>（个）</span></div>
......@@ -28,6 +31,7 @@
<div class="boxValue pl-8">{{totalObj.total['公司预计毛利'] | numFilter }}</div>
</div>
</div>
<div class="horizontal"></div>
<div class="flex-1">
<div class="box">
<div class="boxTitle pr-2">售前参与<span>（个）</span></div>
......@@ -38,8 +42,8 @@
<div class="boxValue pl-2">{{totalObj.total['公司预计成本'] | numFilter }}</div>
</div>
</div>
<div class="horizontal"></div>
<div class="horizontal horizontal1"></div>
<div class="horizontal horizontal1 "></div>
<div class="horizontal horizontal1 horizontal2"></div>
<div class="vertical"></div>
</div>
</div>
......@@ -88,6 +92,7 @@
</div>
</div>
</div>
</div>
</d2-container>
</template>
......@@ -102,6 +107,7 @@ export default {
components: { headerLayout, pieChart, barChart, doubleYBarChart, funnel },
data () {
return {
loading: true,
// 行业分布
typeDistribute: {
legend: ['政府', '制造业', '能源', '金融', '军工'],
......@@ -276,6 +282,7 @@ export default {
methods: {
GetBusinessList () {
API_BUSSINESS.GetBusinessList().then(res => {
this.loading = false
this.totalData = res
this.totalObj = this.totalData.data
// 商机税率
......
src/views/content/client/components/distributed.vue deleted 100644 → 0
View file @ 4055900c
<template>
<div :id="idstr"></div>
</template>
<script>
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
data () {
return {
dataObj: {},
option: {},
chart: null,
lengendColor: ['#00E8FF', '#746ef8', '#F8E71C', '#7ED321', '#FF663B'],
clickNum: [1, 1, 1, 1, 1]
}
},
props: ['message', 'idstr'],
mounted () {
this.drawLine()
},
methods: {
drawLine () {
const vm = this
// 基于准备好的dom，初始化echarts实例
vm.chart = echarts.init(document.getElementById(vm.idstr))
// 清空图表
vm.chart.clear()
vm.option = {
tooltip: {
transitionDuration: 0, // 提示框浮层的移动动画过渡时间，单位是s，设置0的时候会紧跟鼠标移动
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'category',
data: this.message[0].title,
axisLine: {
lineStyle: {
color: '#FFF'
}
},
axisLabel: {
rotate: 50,
interval: 0
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#FFF'
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
}
},
grid: {
top: '10px',
left: '40px',
bottom: '30px',
width: '90%', // 图例宽度
height: '80%' // 图例高度
},
series: [{
data: this.message[0].num,
type: 'bar',
showBackground: true,
barWidth: 14,
itemStyle: {
normal: {
label: {
show: true, // 开启显示
position: 'top', // 在上方显示
textStyle: { // 数值样式
color: 'white',
fontSize: 16
}
},
barBorderRadius: 7,
color: new echarts.graphic.LinearGradient(
0, 1, 0, 0,
[
{ offset: 1, color: '#30DDF4' },
{ offset: 0, color: '#E23AA2' }
]
)
}
}
}]
}
vm.drawBar()
// window.addEventListener("resize",()=>{
// chart.resize();
// });
},
drawBar () {
// 绘制图表
const vm = this
vm.chart.setOption(vm.option)
vm.eventList()
},
eventList () {
const vm = this
vm.chart.on('click', function (params) {
})
}
},
watch: {
message: function () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 1000)
// console.log(this.message)
}
}
}
</script>
<style lang="less">
</style>
src/views/content/client/components/pie.vue deleted 100644 → 0
View file @ 4055900c
<template>
<div :id="idstr"></div>
</template>
<script>
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
data () {
return {
dataObj: {},
option: {},
chart: null,
clickNum: [1, 1, 1, 1, 1]
}
},
props: ['message', 'idstr'],
mounted () {
this.drawLine()
},
methods: {
drawLine () {
const vm = this
// 基于准备好的dom，初始化echarts实例
vm.chart = echarts.init(document.getElementById(vm.idstr))
// 清空图表
vm.chart.clear()
vm.option = {
tooltip: {
transitionDuration: 0,
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
color: ['#30DDF4', '#E23AA2', '#F5A623', '#D6FFBA', '#9FFED7'],
legend: {
orient: 'vertical',
data: this.message[0].title,
right: 10,
bottom: 10,
textStyle: {
color: '#ffffff'
},
icon: 'circle', // 这个字段控制形状类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
itemWidth: 10, // 设置宽度
itemHeight: 4, // 设置高度
itemGap: 10 // 设置间距
},
series: [
{
name: '访问来源',
right: 60,
type: 'pie',
radius: ['50%', '70%'],
center: ['30%', '50%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'left'
},
emphasis: { // hover效果，已经关闭
label: {
show: false,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: this.message[0].data
}
]
}
vm.drawBar()
// window.addEventListener("resize",()=>{
// chart.resize();
// });
},
drawBar () {
// 绘制图表
const vm = this
vm.chart.setOption(vm.option)
// // 设置默认选中高亮部分
// vm.chart.dispatchAction({
// type: 'highlight',
// seriesIndex: 0,
// dataIndex: 0
// })
// vm.chart.on('mouseover', function (e) {
// // 当检测到鼠标悬停事件，取消默认选中高亮
// vm.chart.dispatchAction({
// type: 'downplay',
// seriesIndex: 1,
// dataIndex: 0
// })
// // 高亮显示悬停的那块
// vm.chart.dispatchAction({
// type: 'highlight',
// seriesIndex: 1,
// dataIndex: e.dataIndex
// })
// })
// // 检测鼠标移出后显示之前默认高亮的那块
// vm.chart.on('mouseout', function (e) {
// vm.chart.dispatchAction({
// type: 'highlight',
// seriesIndex: 0,
// dataIndex: 0
// })
// })
vm.eventList()
},
eventList () {
const vm = this
vm.chart.on('click', function (params) {
})
}
},
watch: {
message: function () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 1000)
// console.log(this.message)
}
}
}
</script>
<style lang="less">
</style>
src/views/content/client/components/serviceAnalysis.vue 0 → 100644
View file @ 9ddba6de
<template>
<div>
<div class="d-flex search-box jc-end">
<el-select v-model="selectYear" size="mini">
<el-option
v-for="item in yearList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</div>
<pieChart :message="dataList" idstr="serviceAnalysis" class="heightCut68"></pieChart>
</div>
</template>
<script>
import pieChart from '@/components/echarts/pieChart' // 饼图
export default {
components: { pieChart },
data () {
return {
selectYear: '2020',
yearList: ['2021', '2020', '2019', '2018', '2017'],
dataList: { // 服务分析
legend: ['软件解决方案', '云产品及服务', '系统集成及IT服务'],
data: [
{ value: 335, name: '软件解决方案' },
{ value: 310, name: '云产品及服务' },
{ value: 234, name: '系统集成及IT服务' }
]
}
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
</style>
src/views/content/client/page.vue
View file @ 9ddba6de
<template>
<d2-container class="client">
<d2-container class="business client">
<dv-loading v-show="loading">Loading...</dv-loading>
<div v-show="!loading">
<headerLayout></headerLayout>
<div class="section">
<div class="leftBlock">
<div class="topBox">
<div class="boxHeight-3">
<div class="title">客户统计</div>
<div class="line"></div>
<div class="businessStatistics">
<div class="circle">
<div class="circleTitle">客户总数</div>
<div class="circleValue">{{clientObj.total['客户总数']}}<span>个</span></div>
<div class="businessStatistics d-flex">
<div class="circle">客户统计</div>
<div class="circle circleOut"></div>
<div class="flex-1">
<div class="box">
<div class="boxTitle pr-2">客户总数<span>（个）</span></div>
<div class="boxValue pr-2">{{clientObj.total['客户总数']}}</div>
</div>
<div class="circle1"></div>
<div class="box1">
<div class="boxTitle tl">最终用户<span>（个）</span></div>
<div class="boxValue tl">{{clientObj.total['最终用户']}}</div>
<div class="box">
<div class="boxTitle pl-2">商机客户<span>（个）</span></div>
<div class="boxValue pl-2">{{clientObj.total['最终用户']}}</div>
</div>
<div class="box2">
<div class="boxTitle tr">集成商<span>（个）</span></div>
<div class="boxValue tr">{{clientObj.total['集成商']}}</div>
</div>
<div class="box3">
<div class="boxTitle tl">优秀客户案例<span>（个）</span></div>
<div class="boxValue tl">500</div>
<div class="horizontal"></div>
<div class="flex-1">
<div class="box">
<div class="boxTitle pr-7">集成商<span>（个）</span></div>
<div class="boxValue pr-7">{{clientObj.total['集成商']}}</div>
</div>
<div class="box">
<div class="boxTitle pl-8">本年新增<span>（个）</span></div>
<div class="boxValue pl-8">{{clientObj.total['本年新增客户']}}</div>
</div>
<div class="box4">
<div class="boxTitle tr">本年新增客户<span>（个）</span></div>
<div class="boxValue tr">{{clientObj.total['本年新增客户']}}</div>
</div>
<div class="horizontal"></div>
<div class="flex-1">
<div class="box">
<div class="boxTitle pr-2">优秀案例<span>（个）</span></div>
<div class="boxValue pr-2">500</div>
</div>
<div class="box">
<div class="boxTitle pl-2">本年活跃<span>（个）</span></div>
<div class="boxValue pl-2">29</div>
</div>
</div>
<div class="horizontal horizontal1 "></div>
<div class="horizontal horizontal1 horizontal2"></div>
<div class="vertical"></div>
</div>
</div>
<div class="bottomBox">
<div class="title">客户属性</div>
<div class="line"></div>
<pie :message="businessType" :idstr="'buType'" class="businessType heightCut42"></pie>
<div class="boxHeight-3 mt-2">
<div class="title">行业分布</div>
<pieChart :message="typeDistribute" idstr="customTypeDistribute" class="heightCut44"></pieChart>
</div>
<div class="bottomBox">
<div class="title">客户分布</div>
<div class="line"></div>
<distributed :message="distributed" :idstr="'distribute'" class="distributed heightCut42"></distributed>
<div class="boxHeight-3 mt-2">
<div class="title">地区分布</div>
<barChart :message="customDistribute" idstr="customDistribute" class="heightCut44 mt-2"></barChart>
</div>
</div>
<div class="centerBlock">
<div class="content">
<div class="centerBoxHeight-32 content">
<div class="d-flex search-box jc-center">
<div class="search">
<!-- <el-input placeholder="请输入公司名称" v-model="input" clearable size="mini"></el-input> -->
<el-autocomplete
style="float: left;"
class="inline-input"
v-model="state"
size="mini"
......@@ -58,85 +70,148 @@
:trigger-on-focus="false"
@select="handleSelect"
></el-autocomplete>
<div class="searchBtn">
<el-button type="text" style="color: #606266; position: relative; bottom: 6px">搜索</el-button>
<el-button class="searchBtn" type="text">搜索</el-button>
</div>
</div>
<div class="searchMsg">
<div><span class="babel">客户名称</span><span class="babelMsg">
<div class="searchMsg d-flex flex-column">
<div class="row-item d-flex jc-between">
<div class="flex-1">
<span class="babel">客户名称</span>
<span class="babelMsg pr-24">
<template>
<span v-if="customername.name == ''">无</span>
<span v-else>{{ customername.name }}</span>
</template></span></div>
<div><span class="babel">联系人</span><span class="babelMsg">
</template>
</span>
</div>
<div class="flex-1">
<span class="babel">客户规模</span>
<span class="babelMsg">3000人以上</span>
</div>
</div>
<div class="row-item d-flex jc-between">
<div class="flex-1"><span class="babel">客户属性</span><span class="babelMsg pr-24">IT服务</span></div>
<div class="flex-1"><span class="babel">所在省份</span><span class="babelMsg">河北省</span></div>
</div>
<div class="row-item d-flex jc-between">
<div class="flex-1">
<span class="babel">联系人</span>
<span class="babelMsg pr-24">
<template>
<span v-if="customername.person == ''">无</span>
<span v-else>{{ customername.person }}</span>
</template></span></div>
<div><span class="babel">联系方式</span><span class="babelMsg">
</template>
</span>
</div>
<div class="flex-1">
<span class="babel">联系方式</span>
<span class="babelMsg">
<template>
<span v-if="customername.phone == ''">无</span>
<span v-else>{{ customername.phone }}</span>
</template></span></div>
<div><span class="babel">最终用户</span><span class="babelMsg">
<template>
<span v-if="customername.final == ''">无</span>
<span v-else>{{ customername.final }}</span>
</template></span></div>
<div><span class="babel">商机数</span><span class="babelMsg">{{customername.nicheNum}}</span></div>
<div><span class="babel">项目数</span><span class="babelMsg">{{customername.projectNum}}</span></div>
<div><span class="babel">主要竞争对手</span><span class="babelMsg">
<template>
<span v-if="customername.compete == ''">无</span>
<span v-else>{{ customername.compete }}</span>
</template></span></div>
<div><span class="babel">备注说明</span><span class="babelMsg">
<template>
<span v-if="customername.remark == ''">无</span>
<span v-else>{{ customername.remark }}</span>
</template></span></div>
</div>
<div class="architecture">
<div class="subtitle"><i></i>组织架构</div>
<div class="architectureBlock">
<div class="name">群智合</div>
<div class="top">总裁办</div>
<ul class="left">
<li>新业务拓展中心</li>
<li>IT服务业务中心</li>
<li>解决方案业务中心</li>
</ul>
<ul class="right">
<li>系统集成业务中心</li>
<li>运营管理中心</li>
<li>计划财务中心</li>
</ul>
</div>
</div>
</div>
<div class="bottomBox">
<div class="title">客户分析</div>
<div class="line"></div>
<scatterPlot :message="clientAnalysis" :idstr="'projectAn'" class="projectAnalysis heightCut42"></scatterPlot>
</template>
</span>
</div>
</div>
<div class="row-item d-flex jc-between">
<div class="flex-1"><span class="babel">主责任人</span><span class="babelMsg pr-24">李裙裙</span></div>
<div class="flex-1"><span class="babel">协同销售</span><span class="babelMsg">张苗苗</span></div>
</div>
<div class="row-item d-flex jc-between">
<div class="flex-1"><span class="babel">商机数</span><span class="babelMsg pr-24">{{customername.nicheNum}}</span></div>
<div class="flex-1"><span class="babel">项目数</span><span class="babelMsg">{{customername.projectNum}}</span></div>
</div>
<div class="row-item d-flex jc-between">
<div class="flex-1">
<span class="babel">备注说明</span>
<span class="babelMsg">{{customername.remark || '无'}}</span>
</div>
</div>
<div class="row-product">
<div class="c-title">项目</div>
<div class="c-list">
<span>XXXXXX项目</span>
<span>XXXXXX项目</span>
<span>XXXXXX项目</span>
<span>XXXXXX项目</span>
<span>XXXXXX项目</span>
<span>XXXXXX项目</span>
<span>XXXXXX项目</span>
<span>XXXXXX项目</span>
<span>XXXXXX项目</span>
<span>XXXXXX项目</span>
<span>XXXXXX项目</span>
<span>XXXXXX项目</span>
<span>XXXXXX项目</span>
<span>XXXXXX项目</span>
<span>XXXXXX项目</span>
<span>XXXXXX项目</span>
<span>XXXXXX项目</span>
<span>XXXXXX项目</span>
<span>XXXXXX项目</span>
<span>XXXXXX项目</span>
</div>
</div>
<div class="row-business">
<div class="c-title">商机</div>
<div class="c-list">
<span>XXXXXX商机</span>
<span>XXXXXX商机</span>
<span>XXXXXX商机</span>
<span>XXXXXX商机</span>
<span>XXXXXX商机</span>
<span>XXXXXX商机</span>
<span>XXXXXX商机</span>
<span>XXXXXX商机</span>
<span>XXXXXX商机</span>
<span>XXXXXX商机</span>
<span>XXXXXX商机</span>
<span>XXXXXX商机</span>
<span>XXXXXX商机</span>
<span>XXXXXX商机</span>
<span>XXXXXX商机</span>
</div>
</div>
</div>
</div>
<div class="centerBoxHeight-3 mt-2">
<div class="title">客户合同分析</div>
<mulBarChart :message="clientAnalysis" idstr="clientAnalysis" class="heightCut44 mt-1"></mulBarChart>
</div>
</div>
<div class="rightBlock">
<div class="topBox">
<knowledgeGraph class="knowledgeGraph height100"></knowledgeGraph>
<div class="boxHeight-3">
<div class="title">服务分析</div>
<serviceAnalysis class="heightCut44" />
</div>
<div class="boxHeight-3 mt-2">
<div class="title">重要客户</div>
<div class="d-flex search-box jc-end">
<el-select v-model="selectYear" size="mini">
<el-option
v-for="item in yearList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
<span class="moreTxt">更多</span>
</div>
<div class="bottomBox">
<div class="title">合作伙伴</div>
<div class="line"></div>
<div class="iconBlock">
<i class="icon20 icon-datangjituan"></i>
<i class="icon20 icon-zhongguoshiyou"></i>
<i class="icon20 icon-changjiangdianli"></i>
<i class="icon20 icon-datangjituan"></i>
<i class="icon20 icon-zhongguoshiyou"></i>
<i class="icon20 icon-changjiangdianli"></i>
<i class="icon5 icon-guojiadianwang"></i>
</div>
</div>
<div class="bottomBox">
<div class="title">重要客户</div>
<div class="line"></div>
<div class="boxHeight-3 mt-2">
<div class="title">合作伙伴</div>
<div class="d-flex search-box jc-end">
<span class="moreTxt">更多</span>
</div>
<div class="iconBlock">
<i class="icon20 icon-datangjituan"></i>
<i class="icon20 icon-zhongguoshiyou"></i>
......@@ -146,36 +221,38 @@
</div>
</div>
</div>
</div>
</d2-container>
</template>
<script>
import headerLayout from '@/components/headerLayout/index' // 公共头部
import pie from './components/pie' // 商机业务类型
import distributed from './components/distributed' // 客户分布
import scatterPlot from './components/scatterPlot' // 客户分析
import knowledgeGraph from '../../system/index/components/knowledgeGraph'// 知识图谱
import pieChart from '@/components/echarts/pieChart' // 行业分布-饼图
import barChart from '@/components/echarts/barChart' // 柱图
import mulBarChart from '@/components/echarts/mulBarChart'
import serviceAnalysis from './components/serviceAnalysis'
import * as API_CLIENT from '@/api/con.client.js'
export default {
components: { headerLayout, pie, distributed, scatterPlot, knowledgeGraph },
components: { headerLayout, pieChart, barChart, mulBarChart, serviceAnalysis },
data () {
return {
loading: true,
clientData: {}, // 客户数据
clientObj: {}, // 客户数据
clientArr: [],
businessType: [], // 商机业务类型
distributed: [], // 客户分布
typeDistribute: {}, // 业务分布
customDistribute: {}, // 客户分布
clientAnalysis: {}, // 客户分析
input: '',
state: '',
restaurants: [],
customerData: [],
params: {
name: ''
},
customername: {},
customerid: '',
clientAnalysis: [] // 客户分析
selectYear: '综合',
yearList: ['综合', '按资金', '按项目']
}
},
mounted () {
......@@ -192,42 +269,26 @@ export default {
// 输入公司名称触发
querySearch (queryString, cb) {
API_CLIENT.GetCustomerName(queryString).then(res => {
this.customerData = res.data
// console.log(this.customerData)
for (var i = 0; i < this.customerData.length; i++) {
this.customerData[i].value = this.customerData[i].name
const customerData = res.data
for (var i = 0; i < customerData.length; i++) {
customerData[i].value = customerData[i].name
}
// console.log(this.customerData)
cb(this.customerData)
cb(customerData)
})
},
// 点击下拉列表出发
handleSelect (item) {
API_CLIENT.GetCustomerId(item.id).then(res => {
this.customername = res.data
// console.log(this.customername)
})
},
// 客户图表数据
getClientList () {
API_CLIENT.GetClientList().then(res => {
this.loading = false
this.clientData = res
this.clientObj = this.clientData.data
// 客户分析
this.clientAnalysis = this.clientObj.analysis
// 客户分布
const argdis = this.clientObj.area
const titdis = []
const dadis = []
const numdis = []
argdis.forEach(e => {
titdis.push(e.area)
numdis.push(e.num)
var dis = { name: e.area, value: e.num }
dadis.push(dis)
})
this.distributed.push({ title: titdis, num: numdis, data: dadis })
// 对客户属性遍历
// 行业分布
const arg = this.clientObj.status
const title = []
const da = []
......@@ -236,7 +297,41 @@ export default {
var jso = { name: element.status, value: element.num }
da.push(jso)
})
this.businessType.push({ title: title, data: da })
this.typeDistribute = { legend: title, data: da }
// 客户地区分布
const argdis = this.clientObj.area
const titdis = []
const dadis = []
argdis.forEach(e => {
titdis.push(e.area)
var dis = { name: e.area, value: e.num }
dadis.push(dis)
})
this.customDistribute = { xAxis: titdis, data: dadis }
// 客户合同分析
const legend = this.clientObj.analysis.title
const seriesData = this.clientObj.analysis.data
const xAxis = Object.keys(this.clientObj.analysis.data)
const _data = []
for (let i = 0; i < legend.length; i++) {
var _obj = {
name: legend[i],
type: 'bar',
data: []
}
for (const key in seriesData) {
_obj.data.push(seriesData[key][i].num)
}
_data.push(_obj)
}
console.log(_data)
this.clientAnalysis = {
legend: legend,
xAxis: xAxis,
yAxis: '单位：个',
data: _data
}
})
}
}
......@@ -244,18 +339,8 @@ export default {
</script>
<style lang="scss" scoped>
@import '~@/assets/style/business.scss';
@import '~@/assets/style/client.scss';
</style>
<style lang="scss">
.client{
.el-input__inner{
background:rgba(144,224,255,0.15);
border-radius:2px;
border:1px solid rgba(119,226,255,1);
color: #FFFFFF;
font-size:12px;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
}
}
</style>
src/views/content/organization/page.vue
View file @ 9ddba6de
......@@ -192,8 +192,3 @@ export default {
<style lang="scss" scoped>
@import '~@/assets/style/organization.scss';
</style>
<style lang="scss">
.organization{
}
</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