Skip to content

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

写运营和商机页面

parent 09f1cabc
Show whitespace changes
Inline Side-by-side
Showing with 1480 additions and 1029 deletions
src/assets/style/business.scss
View file @ 4055900c
.business{ .business{
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #000E42;
.topBox{
height: calc(43% - 2vw);
background: url("~@/assets/img/566378.png");
background-color:rgba(0,14,66,0.5);
background-size: 100% 100%;
.businessStatistics{ .businessStatistics{
width: 90%; flex-direction: column;
height: 58%; align-items: center;
margin: calc(21% - 70px) auto 0; box-sizing: border-box;
height: 2.58rem;
padding:.14rem .24rem;
position: relative; position: relative;
.flex-1 {
font-size: .12rem;
}
.circle{ .circle{
width: 30%; width: 1.25rem;
padding-bottom: 30%; height: 1.25rem;
height: 0; line-height: 1.25rem;
background: #30DDF4; background: #30DDF4;
border: 1px solid #30DDF4; border: 1px solid #30DDF4;
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
margin-top: -15%; transform: translate(-50%,-50%);
margin-left: -15%;
z-index: 2; z-index: 2;
.circleTitle{ font-size:.18rem;
font-size:16px;
font-family:PingFang-SC-Bold,PingFang-SC; font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold; font-weight:bold;
color:#000E42; 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; text-align: center;
} }
} .circleOut{
.circle1{ width: 1.6rem;
width: 34%; height: 1.6rem;
padding-bottom: 34%;
height: 0;
background: #000E42; background: #000E42;
border-radius: 50%;
position: absolute;
border:1px solid #77E2FF;
top: 50%;
left: 50%;
margin-top: -17%;
margin-left: -17%;
z-index: 1; z-index: 1;
} }
.box1,.box2,.box3,.box4{ .box{
display: inline-block; display: inline-block;
width: calc(50% - 50px); width: 2rem;
padding: 0 20px; height: .6rem;
text-align: center; text-align: center;
height: calc(50% - 8px);
line-height: 50px;
background:rgba(144,224,255,0.15); background:rgba(144,224,255,0.15);
color: #fff; color: #fff;
position: absolute;
border:1px solid #77E2FF; border:1px solid #77E2FF;
margin-bottom: .2rem;
&:nth-of-type(2n){
margin-left: .2rem;
}
.boxTitle{ .boxTitle{
font-size:16px; font-size:.16rem;
font-family:PingFang-SC-Medium,PingFang-SC; font-family:PingFang-SC-Medium,PingFang-SC;
font-weight:500; font-weight:500;
color:#fff; color:#fff;
height: 40px; line-height: 2;
span{ span{
font-size:12px; font-size:.12rem;
} }
} }
.boxValue{ .boxValue{
font-size:32px; font-size:.24rem;
font-family:ZhenyanGB-Regular,ZhenyanGB; font-family:ZhenyanGB-Regular,ZhenyanGB;
font-weight:400; font-weight:400;
color:#30DDF4; 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{ .horizontal{
width: 100%; width: 1.7rem;
height: 14px; height: .2rem;
background: #000E42; background: #000E42;
position: absolute; position: absolute;
top:calc(50% - 6px); top:.76rem;
left: 0; left: 50%;
transform: translateX(-50%);
z-index: 1; z-index: 1;
} }
.horizontal1 {
top:1.58rem;
}
.vertical{ .vertical{
width: 18px; width: .2rem;
height: 100%; height: 1.62rem;
background: #000E42; background: #000E42;
position: absolute; position: absolute;
top:0; top: 50%;
left: calc(50% - 8px); transform: translateY(-50%);
z-index: 1; z-index: 1;
} }
.pl-8 {
padding-left: .8rem;
} }
.pr-7 {
padding-right: .7rem;
} }
.bottomBox{ .pl-2 {
height: 26.5%; padding-left: .2rem;
background: url("~@/assets/img/566266.png");
background-color:rgba(0,14,66,0.5);
background-size: 100% 100%;
margin-top: 20px;
}
.bottomBoxLong{
height: calc(53% + 20px);
background: url("~@/assets/img/566378.png");
background-color:rgba(0,14,66,0.5);
background-size: 100% 100%;
margin-top: 20px;
}
.centerBlock{
.topBoxEmpty{
height: calc(47% - 40px);
.halfLeft,.halfRight{
width: calc(50% - 10px);
height: 100%;
background: url("~@/assets/img/326378.png");
background-color:rgba(0,14,66,0.5);
background-size: 100% 100%;
float: left;
} }
.halfRight{margin-left: 20px} .pr-2 {
padding-right: .2rem;
} }
} }
} }
src/assets/style/client.scss
View file @ 4055900c
.client{ .client{
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #000E42;
.businessStatistics{ .businessStatistics{
width: 90%; width: 90%;
height: 58%; height: 58%;
......
src/assets/style/mainPage.scss
View file @ 4055900c
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
.mainPage{ .mainPage{
width: 100%; width: 100%;
height: 100vh; height: 100vh;
background: #000E42;
position: relative; position: relative;
.mapChina{ .mapChina{
width: 8rem; width: 8rem;
......
src/assets/style/operation.scss
View file @ 4055900c
.operation{ .operation{
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #000E42; ::v-deep .el-select {
width: 1.2rem;
&:not(:first-child){
margin-left: .24rem;
}
}
.receiptStatistics {
height: 1.9rem;
}
.ball {
p {
margin: 0.08rem;
font-size: 0.12rem;
font-family: PingFang-SC-Medium, PingFang-SC;
color: #30DDF4;
text-align: center;
}
}
.block{ .block{
width: 90%; width: 100%;
height:calc(100% - 20px); height:100%;
margin: 20px auto; font-family:PingFang-SC-Bold,PingFang-SC;
background:rgba(13,30,91,1); font-weight:bold;
box-shadow:0px 4px 8px 0px rgba(10,18,35,0.5); font-size: .12rem;
border:1px solid rgba(48,221,244,0.5); text-align: center;
padding: 0 .24rem;
box-sizing: border-box;
.listTitleBox{ .listTitleBox{
width: 100%; width: 100%;
height: 20px; height: .32rem;
display: inline-flex; display: inline-flex;
.listTitle { .listTitle {
height: 20px; height: .32rem;
line-height: 20px; line-height: .32rem;
font-size:12px;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
color:rgba(48,221,244,1); color:rgba(48,221,244,1);
flex-grow:1; flex-grow:1;
text-align: center;
} }
} }
ul{ ul{
...@@ -29,18 +44,15 @@ ...@@ -29,18 +44,15 @@
padding: 0; padding: 0;
li{ li{
width: 100%; width: 100%;
height: 20px; height: .2rem;
display: inline-flex; display: inline-flex;
margin: 10px 0; margin: .04rem 0;
background:rgba(13,30,91,1);
div{ div{
height:20px; height:.2rem;
line-height:20px; line-height:.2rem;
font-size:12px;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
color:rgba(255,255,255,1); color:rgba(255,255,255,1);
flex-grow:1; flex-grow:1;
text-align: center;
} }
} }
} }
......
src/assets/style/organization.scss
View file @ 4055900c
.organization{ .organization{
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #000E42;
.leftBox{
height: 3.02rem;
background: url("~@/assets/img/l-border-1.png");
background-size: 100% 100%;
margin-bottom: .2rem;
// 组织架构 // 组织架构
.architecture{ .architecture{
width: calc(100% - .48rem); width: calc(100% - .48rem);
...@@ -97,6 +90,7 @@ ...@@ -97,6 +90,7 @@
} }
} }
} }
// 人才招聘
.ballBox{ .ballBox{
.ball { .ball {
width: 100%; width: 100%;
...@@ -118,27 +112,21 @@ ...@@ -118,27 +112,21 @@
align-self: baseline; align-self: baseline;
} }
} }
}
.centerBlock{ .centerBlock{
.content{ .content{
height: 6.24rem; height: 6.24rem;
} }
.search-box { .search-box {
margin: .2rem auto; margin: 0 auto;
width: 60%; width: 60%;
.search { .search {
width: 100%; width: 100%;
margin-left: .2rem; margin-left: .2rem;
} }
} }
.bottomBox{
height: 3.02rem;
background: url("~@/assets/img/c-border-b.png");
background-size: 100% 100%;
}
} }
.rightBlock { // 人数统计
.rightBox,.peopleCounting { .peopleCounting {
height: 4.62rem; height: 4.62rem;
background: url("~@/assets/img/r-border-1.png"); background: url("~@/assets/img/r-border-1.png");
background-size: 100% 100%; background-size: 100% 100%;
...@@ -149,6 +137,4 @@ ...@@ -149,6 +137,4 @@
} }
} }
}
} }
src/assets/style/public.scss
View file @ 4055900c
...@@ -47,9 +47,9 @@ $prefix: d2; ...@@ -47,9 +47,9 @@ $prefix: d2;
.bg { .bg {
// background-color: #000E42; background-color: $color-bg;
// background-size: cover; background-size: cover;
// background-position: center center; background-position: center center;
} }
.dv-loading { .dv-loading {
color: #fff; color: #fff;
...@@ -84,20 +84,20 @@ ul{list-style: none; padding: 0} ...@@ -84,20 +84,20 @@ ul{list-style: none; padding: 0}
margin: 0 auto; margin: 0 auto;
} }
.subtitle{ .subtitle{
height:16px; height:.16rem;
font-size:16px; font-size:.16rem;
font-family:PingFang-SC-Bold,PingFang-SC; font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold; font-weight:bold;
color:rgba(255,255,255,1); color:rgba(255,255,255,1);
line-height:16px; line-height:.16rem;
.diamond{ .diamond{
display: inline-block; display: inline-block;
width:6px; width:.06rem;
height:6px; height:.06rem;
background: $color-primary; background: $color-primary;
transform:rotate(45deg); transform:rotate(45deg);
margin-right: 8px; margin-right: .08rem;
vertical-align: 3px; vertical-align: .03rem;
} }
} }
.px-24 { .px-24 {
...@@ -105,14 +105,41 @@ ul{list-style: none; padding: 0} ...@@ -105,14 +105,41 @@ ul{list-style: none; padding: 0}
} }
.height100{height: 100%} .height100{height: 100%}
.height21{height: 2.1rem} .height21{height: 2.1rem}
.heightCut42 {height: calc(100% - 42px);} .heightCut44 {height: calc(100% - .44rem);}
.heightCut62 {height: calc(100% - 62px);} .heightCut68 {height: calc(100% - 0.68rem);}
.section{ .section{
height: calc(100% - 1.4rem); height: calc(100% - 1.4rem);
padding:.08rem .48rem .4rem; padding:.08rem .48rem .4rem;
display: flex; display: flex;
.boxHeight-3 {
height: 3.02rem;
background: url("~@/assets/img/l-border-1.png");
background-size: 100% 100%;
}
.boxHeight-2 {
height: 4.62rem;
background: url("~@/assets/img/r-border-1.png");
background-size: 100% 100%;
}
.centerBoxHeight-3 {
height: 3.02rem;
background: url("~@/assets/img/c-border-b.png");
background-size: 100% 100%;
}
.centerBoxHeight-32 {
width: 8rem;
height: 6.24rem;
background: url("~@/assets/img/border-no-head.png");
background-size: 100% 100%;
}
.mt-2 {
margin-top: .2rem;
}
.mt-1 {
margin-top: .1rem;
}
.leftBlock{ .leftBlock{
width: 5.02rem; width: 5.02rem;
} }
...@@ -148,7 +175,7 @@ ul{list-style: none; padding: 0} ...@@ -148,7 +175,7 @@ ul{list-style: none; padding: 0}
} }
.search-box { .search-box {
margin: .2rem; padding: .2rem;
} }
// 选择框 搜索框样式 // 选择框 搜索框样式
.el-input__inner{ .el-input__inner{
......
src/assets/style/unit/color.scss
View file @ 4055900c
...@@ -20,4 +20,4 @@ $color-border-3: #EBEEF5; ...@@ -20,4 +20,4 @@ $color-border-3: #EBEEF5;
$color-border-4: #F2F6FC; $color-border-4: #F2F6FC;
// 背景 // 背景
$color-bg: #f8f8f9; $color-bg: #000E42;;
src/components/HeaderLayout/index.vue
View file @ 4055900c
...@@ -45,7 +45,7 @@ export default { ...@@ -45,7 +45,7 @@ export default {
yData: [70, 90, 110, 108, 100, 110, 130, 140, 150, 120, 110, 98], yData: [70, 90, 110, 108, 100, 110, 130, 140, 150, 120, 110, 98],
colors: ['RGBA(27, 157, 247, 1)', 'RGBA(30, 201, 251, 1)'] colors: ['RGBA(27, 157, 247, 1)', 'RGBA(30, 201, 251, 1)']
}, },
buttenList: ['概况', '运营', '商机', '客户', '组织人才', '管理端'] buttenList: ['概况', '运营', '商机', '客户', '组织人才']
} }
}, },
filters: { filters: {
......
src/views/content/organization/components/lastMonthPerformance.vue → src/components/echarts/barChart.vue
View file @ 4055900c
...@@ -15,14 +15,11 @@ export default { ...@@ -15,14 +15,11 @@ export default {
dataObj: {}, dataObj: {},
option: {}, option: {},
chart: null, chart: null,
lengendColor: ['#00E8FF', '#746ef8', '#F8E71C', '#7ED321', '#FF663B'],
clickNum: [1, 1, 1, 1, 1] clickNum: [1, 1, 1, 1, 1]
} }
}, },
props: ['message', 'idstr', 'performActive'], props: ['message', 'idstr'],
mounted () { mounted () {
console.log(this.performActive)
this.drawLine() this.drawLine()
}, },
methods: { methods: {
...@@ -33,13 +30,22 @@ export default { ...@@ -33,13 +30,22 @@ export default {
// 清空图表 // 清空图表
vm.chart.clear() vm.chart.clear()
vm.option = { vm.option = {
grid: {
top: '15%',
left: '10%',
right: '10%',
bottom: '30%'
},
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
data: ['客户营销', '解决方案', '智能制造', '生态合作', 'IT服务'], data: vm.message.xAxis,
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow'
}, },
axisLabel: {
rotate: 30
},
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#FFF' color: '#FFF'
...@@ -47,43 +53,39 @@ export default { ...@@ -47,43 +53,39 @@ export default {
} }
} }
], ],
yAxis: [ yAxis: {
{
type: 'value', type: 'value',
name: vm.performActive === 1 ? '分数' : '部门', name: '金额 ：万元',
min: 0, splitLine: {
max: 250, show: true,
interval: 50, lineStyle: {
type: 'dashed',
color: 'rgba(255,255,255,.3)'
}
},
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#FFF' color: '#FFF'
} }
} }
}
],
grid: {
top: '20%',
left: '10%',
right: '10%',
bottom: '5%',
width: '80%', // 图例宽度
height: '70%' // 图例高度
}, },
series: [ series: [
{ {
type: 'bar', type: 'bar',
barWidth: '50%', barWidth: '30%',
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ color: '#30DDF4',
{ offset: 0, color: '#30DDF4' }, barBorderRadius: [20, 20, 20, 20]
{ offset: 1, color: '#001873' }
])
}, },
data: [23.2, 76.7, 135.6, 162.2, 32.6] data: vm.message.data
} }
] ]
} }
vm.drawBar() vm.drawBar()
// window.addEventListener("resize",()=>{
// chart.resize();
// });
}, },
drawBar () { drawBar () {
// 绘制图表 // 绘制图表
...@@ -98,12 +100,12 @@ export default { ...@@ -98,12 +100,12 @@ export default {
} }
}, },
watch: { watch: {
performActive: function (val) { message: function () {
console.log(val)
const vm = this const vm = this
setTimeout(function () { setTimeout(function () {
vm.drawLine() vm.drawLine()
}, 10) }, 1000)
// console.log(this.message)
} }
} }
} }
......
src/views/content/operation/components/pie.vue → src/components/echarts/doubleYBarChart.vue
View file @ 4055900c
...@@ -30,56 +30,115 @@ export default { ...@@ -30,56 +30,115 @@ export default {
// 清空图表 // 清空图表
vm.chart.clear() vm.chart.clear()
vm.option = { vm.option = {
color: ['#30DDF4', '#D6FFBA', '#E23AA2', '#F5A623'],
legend: {
data: vm.message.legend, // ['新签预算', '新签实际', '完成比'],
textStyle: {
color: '#ffffff'
}
},
tooltip: { tooltip: {
transitionDuration: 0, transitionDuration: 0,
trigger: 'item', trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)' formatter: '{a}:<br/>{b}: {c} ({d}%)'
}, },
color: ['#30DDF4', '#E23AA2', '#F5A623', '#D6FFBA', '#9FFED7'], grid: {
legend: { top: '20%',
orient: 'vertical', left: '10%',
data: ['技术岗', '销售岗', '管理岗', '职能岗', '其他岗'], right: '10%',
right: 20, bottom: '15%'
bottom: 10,
textStyle: {
color: '#ffffff'
}, },
icon: 'circle', // 这个字段控制形状类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none xAxis: [
itemWidth: 10, // 设置宽度 {
itemHeight: 4, // 设置高度 type: 'category',
itemGap: 10 // 设置间距 data: vm.message.xAxis, // ['4中心', '5中心', '6中心', '7中心', '8中心'],
axisPointer: {
type: 'shadow'
}, },
series: [ axisLine: {
lineStyle: {
color: '#FFF'
}
}
}
],
yAxis: [
{ {
name: '访问来源', type: 'value',
type: 'pie', name: vm.message.yAxis[0], // '单位：万元',
radius: ['40%', '60%'], splitLine: {
center: ['50%', '50%'], show: true,
avoidLabelOverlap: false, lineStyle: {
label: { type: 'dashed',
show: false, color: 'rgba(255,255,255,.3)'
position: 'left' }
}, },
emphasis: { // hover效果，已经关闭 axisLine: {
label: { lineStyle: {
show: false, color: '#FFF'
fontSize: '30', }
fontWeight: 'bold'
} }
}, },
labelLine: { {
show: false type: 'value',
name: vm.message.yAxis[1], // '完成比：%',
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: 'rgba(255,255,255,.3)'
}
}, },
data: [ axisLine: {
{ value: 335, name: '技术岗' }, lineStyle: {
{ value: 310, name: '销售岗' }, color: '#FFF'
{ value: 234, name: '管理岗' }, }
{ value: 135, name: '职能岗' },
{ value: 1548, name: '其他岗' }
]
} }
]
} }
],
series: vm.message.data
// [
// {
// name: '新签预算',
// type: 'bar',
// itemStyle: {
// color: '#30DDF4'
// },
// data: [23.2, 25.6, 76.7, 135.6, 162.2]
// },
// {
// name: '新签实际',
// type: 'bar',
// itemStyle: {
// color: '#D6FFBA'
// },
// data: [13.2, 45.6, 76.7, 55.6, 62.2]
// },
// {
// name: '完成比',
// type: 'line',
// yAxisIndex: 1,
// itemStyle: { // 线条样式
// normal: {
// color: '#30DDF4',
// lineStyle: { // 系列级个性化折线样式
// width: 2,
// type: 'solid',
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: '#30DDF4'
// }, {
// offset: 1,
// color: '#E23AA2'
// }])// 线条渐变色
// }
// }
// },
// data: [4.5, 6.3, 10.2, 20.3, 23.4]
// }
// ]
}
vm.drawBar() vm.drawBar()
// window.addEventListener("resize",()=>{ // window.addEventListener("resize",()=>{
// chart.resize(); // chart.resize();
......
src/views/content/business/components/funnel.vue → src/components/echarts/funnel.vue
View file @ 4055900c
...@@ -30,39 +30,32 @@ export default { ...@@ -30,39 +30,32 @@ export default {
// 清空图表 // 清空图表
vm.chart.clear() vm.chart.clear()
vm.option = { vm.option = {
color: ['#30DDF4', '#E23AA2', '#F5A623', '#D6FFBA'],
tooltip: { tooltip: {
transitionDuration: 0, transitionDuration: 0,
trigger: 'item', trigger: 'item',
formatter: '{a} <br/>{b} : {c}' // a对应系列名称,b对应数据项名称,c对应数据项值 formatter: '{b} : {c}' // a对应系列名称,b对应数据项名称,c对应数据项值
}, },
// toolbox: {
// feature: {
// dataView: { readOnly: false },
// restore: {},
// saveAsImage: {}
// }
// },
legend: { legend: {
textStyle: { textStyle: {
color: '#ffffff' // 图例文字颜色 color: '#fff' // 图例文字颜色
}, },
data: this.message[0].success orient: 'vertical',
left: 20,
bottom: 10,
data: vm.message.legend
}, },
series: [ series: [
{ {
name: '漏斗图', name: '漏斗图',
type: 'funnel', type: 'funnel',
left: '10%', left: '30%',
top: 60, top: 40,
// x2: 80, bottom: 20,
bottom: 60,
width: '80%', width: '80%',
// height: {totalHeight} - y - y2, minSize: '10%',
min: 0, maxSize: '70%',
max: 100,
minSize: '30%',
maxSize: '80%',
sort: 'descending', sort: 'descending',
gap: 2, gap: 2,
label: { label: {
...@@ -82,12 +75,7 @@ export default { ...@@ -82,12 +75,7 @@ export default {
borderColor: '#fff', borderColor: '#fff',
borderWidth: 1 borderWidth: 1
}, },
// emphasis: { data: vm.message.data
// label: {
// fontSize: 20
// }
// },
data: this.message[0].num
} }
] ]
} }
......
src/views/content/operation/components/polyline.vue → src/components/echarts/lineChart.vue
View file @ 4055900c
...@@ -30,27 +30,48 @@ export default { ...@@ -30,27 +30,48 @@ export default {
// 清空图表 // 清空图表
vm.chart.clear() vm.chart.clear()
vm.option = { vm.option = {
legend: {}, color: ['#30DDF4', '#E23AA2', '#F5A623', '#D6FFBA'],
tooltip: { legend: {
transitionDuration: 0, data: vm.message.legend,
trigger: 'axis', right: 20,
showContent: false top: 10,
textStyle: {
color: '#ffffff'
}, },
dataset: { icon: 'circle' // 这个字段控制形状类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
source: [
['product', '2012', '2013', '2014', '2015', '2016', '2017'],
['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5]
]
}, },
xAxis: { type: 'category' }, grid: {
yAxis: { gridIndex: 0 }, top: '20%',
series: [ left: '10%',
{ type: 'line', smooth: true, seriesLayoutBy: 'row' }, bottom: '10%'
{ type: 'line', smooth: true, seriesLayoutBy: 'row' }, },
{ type: 'line', smooth: true, seriesLayoutBy: 'row' } xAxis: {
] type: 'category',
data: vm.message.xAxis,
axisLine: {
lineStyle: {
color: '#FFF'
}
},
axisLabel: {
interval: 0
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#FFF'
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
}
},
series: vm.message.data
} }
vm.drawBar() vm.drawBar()
// window.addEventListener("resize",()=>{ // window.addEventListener("resize",()=>{
......
src/views/content/business/components/barPolyline.vue → src/components/echarts/negativeBarChart.vue
View file @ 4055900c
...@@ -29,85 +29,77 @@ export default { ...@@ -29,85 +29,77 @@ export default {
vm.chart = echarts.init(document.getElementById(vm.idstr)) vm.chart = echarts.init(document.getElementById(vm.idstr))
// 清空图表 // 清空图表
vm.chart.clear() vm.chart.clear()
this.message.data.forEach(function (item) {
if (item.name === '税率' || item.name === '占比') {
item.yAxisIndex = 1 // 当name为税率或者占比（折线图）时，设置yAxisIndex为1（右侧的Y轴），
}
})
// console.info(this.message.data)
vm.option = { vm.option = {
color: ['#9FFED7'],
tooltip: {
transitionDuration: 0, // 提示框浮层的移动动画过渡时间，单位是s，设置0的时候会紧跟鼠标移动
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
right: '20%',
height: 135,
top: 40
},
legend: { legend: {
padding: 18, data: vm.message.legend,
textStyle: { textStyle: {
color: '#ffffff' // 图例文字颜色 color: '#ffffff'
}
}, },
orient: 'vertical', // 垂直显示 grid: {
y: 'center', // 延Y轴居中 top: '15%',
x: 'right', // 居右显示 left: '10%',
data: this.message.title right: '10%',
bottom: '15%'
}, },
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
data: vm.message.xAxis,
axisPointer: {
type: 'shadow'
},
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#675bba' color: '#FFF'
}
} }
},
axisTick: {
alignWithLabel: true
},
data: this.message.column
} }
], ],
yAxis: [{ yAxis: {
type: 'value', type: 'value',
// min: 0, name: '金额 ：万元',
// max: this.message.max + 500, splitLine: {
position: 'left', show: true,
axisLine: {
lineStyle: { lineStyle: {
color: '#675bba' type: 'dashed',
color: 'rgba(255,255,255,.3)'
} }
}, },
axisLabel: {
// formatter: '{value} '
}
},
{
type: 'value',
// min: 0,
// max: 100,
// splitNumber: 6,
// interval: (100 - 0) / 6,
min: 0,
max: 120,
// position: 'right',
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#5793f3' color: '#FFF'
} }
},
axisLabel: {
formatter: '{value} %'
} }
},
series: [
{
type: 'bar',
barWidth: '25%',
itemStyle: {
color: '#30DDF4'
},
data: vm.message.data.inCome
},
{
type: 'bar',
barWidth: '25%',
itemStyle: {
color: '#D6FFBA'
},
data: vm.message.data.flowOut
},
{
type: 'bar',
barWidth: '25%',
itemStyle: {
color: '#E23AA2'
},
data: vm.message.data.inFlow
} }
], ]
series: this.message.data
} }
vm.drawBar() vm.drawBar()
// window.addEventListener("resize",()=>{ // window.addEventListener("resize",()=>{
// chart.resize(); // chart.resize();
......
src/views/content/organization/components/pie.vue → src/components/echarts/pieChart.vue
View file @ 4055900c
...@@ -38,7 +38,7 @@ export default { ...@@ -38,7 +38,7 @@ export default {
color: ['#30DDF4', '#E23AA2', '#F5A623', '#D6FFBA', '#9FFED7'], color: ['#30DDF4', '#E23AA2', '#F5A623', '#D6FFBA', '#9FFED7'],
legend: { legend: {
orient: 'vertical', orient: 'vertical',
data: ['技术岗', '销售岗', '管理岗', '职能岗', '其他岗'], data: vm.message.legend,
right: 20, right: 20,
bottom: 10, bottom: 10,
textStyle: { textStyle: {
...@@ -52,20 +52,15 @@ export default { ...@@ -52,20 +52,15 @@ export default {
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: ['30%', '70%'], radius: ['40%', '70%'],
center: ['50%', '50%'], center: ['50%', '50%'],
// roseType: 'area', // radius
label: { label: {
show: false show: false
}, },
data: [ labelLine: {
{ value: 335, name: '技术岗' }, show: false
{ value: 310, name: '销售岗' }, },
{ value: 234, name: '管理岗' }, data: vm.message.data
{ value: 135, name: '职能岗' },
{ value: 548, name: '其他岗' }
]
} }
] ]
} }
......
src/views/content/business/components/scatterPlot.vue → src/components/echarts/waterBallChart.vue
View file @ 4055900c
...@@ -3,12 +3,13 @@ ...@@ -3,12 +3,13 @@
</template> </template>
<script> <script>
import 'echarts-liquidfill/src/liquidFill.js'
// 引入基本模板 // 引入基本模板
const echarts = require('echarts/lib/echarts') const echarts = require('echarts/lib/echarts')
// 引入提示框和title组件 // 引入提示框和title组件
require('echarts/lib/component/tooltip') require('echarts/lib/component/tooltip')
require('echarts/lib/component/title') require('echarts/lib/component/title')
export default { export default {
data () { data () {
return { return {
...@@ -25,78 +26,75 @@ export default { ...@@ -25,78 +26,75 @@ export default {
methods: { methods: {
drawLine () { drawLine () {
const vm = this const vm = this
const bars = []
this.message.title.forEach(e => {
bars.push({ type: 'bar' })
})
const source = []
const x = Object.keys(this.message.data)
// console.log(x)
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 => {
// console.log(arg["type"], this.message.title[j])
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实例 // 基于准备好的dom，初始化echarts实例
vm.chart = echarts.init(document.getElementById(vm.idstr)) vm.chart = echarts.init(document.getElementById(vm.idstr))
// 清空图表 // 清空图表
vm.chart.clear() vm.chart.clear()
vm.option = { vm.option = {
color: ['#30DDF4', '#E23AA2', '#F5A623', '#D6FFBA'], // 图表主标题
grid: { // 提示框组件
height: 135, tooltip: {
top: 40 trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
},
legend: {
show: true,
textStyle: { textStyle: {
color: '#ffffff' // 图例文字颜色 color: '#fff' // 文字颜色
}
// data: this.message.title
// left: 'right'
}, },
tooltip: {}, // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
dataset: { // 水球图: {a}（系列名称），{b}（无），{c}（数值）
source: source // 使用函数模板 传入的数据值 -> value: number|Array,
formatter: function (value) {
return value.seriesName + ': ' + value.data * 100 + '%'
}
}, },
xAxis: { series: [{
type: 'category', type: 'liquidFill',
axisLine: { name: vm.message.name, // 系列名称，用于tooltip的显示，legend 的图例筛选
radius: '80%', // 水球图的半径
center: ['50%', '50%'], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
shape: 'circle',
phase: 0, // 波的相位弧度 不设置 默认自动
direction: 'right', // 波浪移动的速度 两个参数 left 从右往左 right 从左往右
outline: {
show: true, show: true,
lineStyle: { borderDistance: 0, // 边框线与图表的距离 数字
color: '#675bba' itemStyle: {
} opacity: 1, // 边框的透明度 默认为 1
borderWidth: 2, // 边框的宽度
shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
shadowColor: '#fff', // 边框的阴影颜色,
borderColor: '#30DDF4' // 边框颜色
} }
}, },
yAxis: { // 图形样式
// data: ['10', '20', '30', '40', '50', '60', '70'], itemStyle: {
axisLine: { color: new echarts.graphic.LinearGradient(
show: true, 0, 0, 0, 1,
lineStyle: { [{ offset: 0, color: '#90E0FF' },
color: '#675bba' { offset: 1, color: '#E23AA2' }]
), // 水球显示的背景颜色
opacity: 1, // 波浪的透明度
shadowBlur: 10 // 波浪的阴影范围
},
backgroundStyle: {
color: '#000E42', // 水球未到的背景颜色
borderWidth: 0,
borderColor: 'rgb(255,0,255,0.9)'
},
// 图形上的文本标签
label: {
color: '#ffffff', // 在波浪上方时的文字颜色
insideColor: '#ffffff', // 在波浪下方时的文字颜色
textStyle: {
fontSize: 24
} }
},
// 图形的高亮样式
emphasis: {
itemStyle: {
opacity: 0.8 // 鼠标经过波浪颜色的透明度
} }
}, },
// Declare several bar series, each will be mapped data: vm.message.data// 系列中的数据内容数组
// to a column of dataset.source by default. }]
series: bars
} }
vm.drawBar() vm.drawBar()
// window.addEventListener("resize",()=>{ // window.addEventListener("resize",()=>{
...@@ -121,7 +119,6 @@ export default { ...@@ -121,7 +119,6 @@ export default {
setTimeout(function () { setTimeout(function () {
vm.drawLine() vm.drawLine()
}, 1000) }, 1000)
// console.log(this.message)
} }
} }
} }
......
src/views/content/business/components/pie.vue deleted 100644 → 0
View file @ 09f1cabc
<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],
type: [] // 后台给我的数据是type
}
},
props: ['message', 'idstr'],
// props: {
// message: {
// type: Array,
// default: () => {
// return []
// }
// },
// idstr: {
// type: String,
// default: ''
// }
// },
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: 'horizontal',
data: this.message[0].title,
right: 20,
bottom: 10,
textStyle: {
color: '#ffffff' // 图例文字颜色
},
icon: 'circle', // 这个字段控制形状类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
itemWidth: 10, // 设置宽度
itemHeight: 4, // 设置高度
itemGap: 10 // 设置间距
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['40%', '60%'],
center: ['50%', '50%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: { // hover效果，已经关闭
label: {
show: false,
fontSize: '25',
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.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/business/page.vue
View file @ 4055900c
...@@ -3,78 +3,88 @@ ...@@ -3,78 +3,88 @@
<headerLayout></headerLayout> <headerLayout></headerLayout>
<div class="section"> <div class="section">
<div class="leftBlock"> <div class="leftBlock">
<div class="topBox"> <div class="boxHeight-3">
<div class="title">商机统计</div> <div class="title">商机统计</div>
<div class="line"></div> <div class="businessStatistics d-flex">
<div class="businessStatistics"> <div class="circle">商机统计</div>
<div class="circle"> <div class="circle circleOut"></div>
<div class="circleTitle">商机整体预算</div> <div class="flex-1">
<div class="circleValue">{{totalObj.total['商机整体总预算'] | numFilter }}<span> 百万</span></div> <div class="box">
<div class="boxTitle pr-2">商机总数<span>（个）</span></div>
<div class="boxValue pr-2">{{totalObj.total['商机总数']}}</div>
</div> </div>
<div class="circle1"></div> <div class="box">
<div class="box1"> <div class="boxTitle pl-2">整体预算<span>（百万）</span></div>
<div class="boxTitle tl">商机总数<span>（个）</span></div> <div class="boxValue pl-2">{{totalObj.total['商机整体总预算'] | numFilter}}</div>
<div class="boxValue tl">{{totalObj.total['商机总数']}}</div>
</div> </div>
<div class="box2">
<div class="boxTitle tr">预计成本<span>（百万）</span></div>
<div class="boxValue tr">{{totalObj.total['公司预计成本'] | numFilter }}</div>
</div> </div>
<div class="box3"> <div class="flex-1">
<div class="boxTitle tl">预计毛利<span>（百万）</span></div> <div class="box">
<div class="boxValue tl">{{totalObj.total['公司预计毛利'] | numFilter }}</div> <div class="boxTitle pr-7">本月新增<span>（个）</span></div>
<div class="boxValue pr-7">{{(totalObj.total['本月新增']|| 0) | numFilter }}</div>
</div>
<div class="box">
<div class="boxTitle pl-8">预计毛利<span>（百万）</span></div>
<div class="boxValue pl-8">{{totalObj.total['公司预计毛利'] | numFilter }}</div>
</div>
</div>
<div class="flex-1">
<div class="box">
<div class="boxTitle pr-2">售前参与<span>（个）</span></div>
<div class="boxValue pr-2">{{totalObj.total['售前参与']}}</div>
</div>
<div class="box">
<div class="boxTitle pl-2">预计成本<span>（百万）</span></div>
<div class="boxValue pl-2">{{totalObj.total['公司预计成本'] | numFilter }}</div>
</div> </div>
<div class="box4">
<div class="boxTitle tr">售前参与<span>（个）</span></div>
<div class="boxValue tr">{{totalObj.total['售前参与']}}</div>
</div> </div>
<div class="horizontal"></div> <div class="horizontal"></div>
<div class="horizontal horizontal1"></div>
<div class="vertical"></div> <div class="vertical"></div>
</div> </div>
</div> </div>
<div class="bottomBox"> <div class="boxHeight-3 mt-2">
<div class="title">商机业务类型</div> <div class="title">行业分布</div>
<div class="line"></div> <pieChart :message="typeDistribute" idstr="typeDistribute" class="heightCut44"></pieChart>
<pie :message="businessType" :idstr="'1'" class="businessType heightCut42"></pie>
</div> </div>
<div class="bottomBox"> <div class="boxHeight-3 mt-2">
<div class="title">商机报价及占比</div> <div class="title">商机分布</div>
<div class="line"></div> <barChart :message="bussionDistribute" idstr="bussionDistribute" class="heightCut44 mt-2"></barChart>
<quoteProportion :message="quoteProportion" :idstr="'quote'" class="quoteProportion heightCut42"></quoteProportion>
</div> </div>
</div> </div>
<div class="centerBlock"> <div class="centerBlock">
<div class="topBoxEmpty"> <div class="centerBoxHeight-32 d-flex flex-column">
<div class="halfLeft"> <div class="flex-1 d-flex">
<div class="title">商机来源</div> <div class="flex-1">
<div class="line"></div> <div class="title">商机阶段分析</div>
<pies :message="source" :idstr="'source'" class="source heightCut42"></pies> <funnel :message="bussionStep" :idstr="'bussionStep'" class="heightCut44"></funnel>
</div> </div>
<div class="halfRight"> <div class="flex-1">
<div class="title">商机流程</div> <div class="title">商机类型</div>
<div class="line"></div> <pieChart :message="bussionType" idstr="bussionType" class="heightCut44"></pieChart>
<pie :message="businessType" :idstr="process" class="process heightCut42"></pie>
</div> </div>
</div> </div>
<div class="bottomBox"> <div class="flex-1">
<div class="title">商机税率</div> <doubleYBarChart :message="bussionAnalysis" idstr="bussionAnalysis" class="heightCut44 mt-1"></doubleYBarChart>
<div class="line"></div>
<quoteProportion :message="taxRate" idstr="taxRate" class="taxRate heightCut42"></quoteProportion>
</div> </div>
<div class="bottomBox">
<div class="title">项目分析</div>
<div class="line"></div>
<scatterPlot :message="projectAnalysis" :idstr="'pro'" class="projectAnalysis heightCut42"></scatterPlot>
</div> </div>
<div class="centerBoxHeight-3 mt-2">
<div class="title">合同税率分布</div>
<doubleYBarChart :message="taxRateDistribute" idstr="taxRateDistribute" class="heightCut44 mt-1"></doubleYBarChart>
</div> </div>
<div class="rightBlock">
<div class="topBox">
<knowledgeGraph class="knowledgeGraph height100"></knowledgeGraph>
</div> </div>
<div class="bottomBoxLong"> <div class="rightBlock">
<div class="boxHeight-3">
<div class="title">商机成功率</div> <div class="title">商机成功率</div>
<div class="line"></div> <doubleYBarChart :message="successRatio" idstr="successRatio" class="heightCut44 mt-1"></doubleYBarChart>
<funnel :message="funnelChart" :idstr="'fun'" class="funnelChart heightCut42"></funnel> </div>
<div class="boxHeight-3 mt-2">
<div class="title">新商机分析</div>
<doubleYBarChart :message="newBussAnalysis" idstr="newBussAnalysis" class="heightCut44 mt-1"></doubleYBarChart>
</div>
<div class="boxHeight-3 mt-2">
<div class="title">产品类型分析</div>
<pieChart :message="typeAnalysis" idstr="typeAnalysis" class="heightCut44"></pieChart>
</div> </div>
</div> </div>
</div> </div>
...@@ -83,18 +93,162 @@ ...@@ -83,18 +93,162 @@
<script> <script>
import headerLayout from '@/components/headerLayout/index' // 公共头部 import headerLayout from '@/components/headerLayout/index' // 公共头部
// import {pie, pies} from './components/pie' // 饼图/ import pieChart from '@/components/echarts/pieChart' // 行业分布-饼图
import quoteProportion from './components/barPolyline' // 报价及占比 import barChart from '@/components/echarts/barChart' // 商机分布-柱图
import scatterPlot from './components/scatterPlot' // 项目分析 import doubleYBarChart from '@/components/echarts/doubleYBarChart' // 新商机分析-柱加折线图
import knowledgeGraph from '../../system/index/components/knowledgeGraph'// 知识图谱 import funnel from '@/components/echarts/funnel' // 梯形图
import funnel from './components/funnel' // 梯形图
import * as API_BUSSINESS from '@/api/con.business.js' import * as API_BUSSINESS from '@/api/con.business.js'
const pie = () => import('./components/pie')
const pies = () => import('./components/pie')
export default { export default {
components: { headerLayout, pie, pies, quoteProportion, scatterPlot, knowledgeGraph, funnel }, components: { headerLayout, pieChart, barChart, doubleYBarChart, funnel },
data () { data () {
return { return {
// 行业分布
typeDistribute: {
legend: ['政府', '制造业', '能源', '金融', '军工'],
data: [
{ value: 335, name: '政府' },
{ value: 310, name: '制造业' },
{ value: 234, name: '能源' },
{ value: 135, name: '金融' },
{ value: 1548, name: '军工' }
]
},
// 产品类型分析
typeAnalysis: {
legend: ['DELL', '联想', '自有服务', '第三方', 'H3C'],
data: [
{ value: 335, name: 'DELL' },
{ value: 310, name: '联想' },
{ value: 234, name: '自有服务' },
{ value: 135, name: '第三方' },
{ value: 1548, name: 'H3C' }
]
},
// 商机分布
bussionDistribute: {
xAxis: ['上海', '北京', '广州', '河南', '天津', '深圳', '贵州', '河北', '江苏'],
data: [223.2, 195.6, 176.7, 135.6, 122.2, 122, 114, 95, 76]
},
// 新商机分析
newBussAnalysis: {
legend: ['新商机', '传统商机', '占比'],
xAxis: ['2017', '2018', '2019', '2020', '2021'],
yAxis: ['单位：个', '占比：%'],
data: [
{
name: '新商机',
type: 'bar',
data: [23.2, 25.6, 76.7, 135.6, 162.2]
}, {
name: '传统商机',
type: 'bar',
data: [13.2, 45.6, 76.7, 55.6, 62.2]
}, {
name: '占比',
type: 'line',
yAxisIndex: 1,
data: [4.5, 6.3, 10.2, 20.3, 23.4]
}
]
},
// 商机预算及硬蛋率
successRatio: {
legend: ['商机预算', '赢单率'],
xAxis: ['10以下', '10-30', '30-50', '50-100', '100以上'],
yAxis: ['单位：万元', '百分：%'],
data: [
{
name: '商机预算',
type: 'bar',
barWidth: '25%',
data: [23.2, 25.6, 76.7, 135.6, 162.2]
}, {
name: '赢单率',
type: 'line',
yAxisIndex: 1,
data: [4.5, 6.3, 10.2, 20.3, 23.4]
}
]
},
// 合同税率分布
taxRateDistribute: {
legend: ['合同数', '合同税率占比'],
xAxis: ['0%', '3%', '6%', '9%', '13%'],
yAxis: ['单位：个', '百分比：%'],
data: [
{
name: '合同数',
type: 'bar',
barWidth: '25%',
data: [23.2, 25.6, 76.7, 135.6, 162.2]
}, {
name: '合同税率占比',
type: 'line',
yAxisIndex: 1,
data: [4.5, 6.3, 10.2, 20.3, 23.4]
}
]
},
// 商机分析-中间图
bussionAnalysis: {
legend: ['初步接洽', '需求确定', '方案/报价', '谈判审核', '赢单'],
xAxis: ['XXXX中心', 'XXXX中心', 'XXXX中心', 'XXXX中心', 'XXXX中心', 'XXXX中心'],
yAxis: ['单位：个', '赢单率：%'],
data: [
{
name: '初步接洽',
type: 'bar',
data: [123.2, 125.6, 176.7, 135.6, 162.2, 200]
}, {
name: '需求确定',
type: 'bar',
data: [83.2, 75.6, 86.7, 85.6, 62.2, 90]
}, {
name: '方案/报价',
type: 'bar',
yAxisIndex: 1,
data: [74.5, 66.3, 70.2, 80.3, 53.4, 87]
}, {
name: '谈判审核',
type: 'bar',
yAxisIndex: 1,
data: [64.5, 56.3, 60.2, 70.3, 43.4, 77]
}, {
name: '赢单',
type: 'bar',
yAxisIndex: 1,
data: [54.5, 46.3, 50.2, 60.3, 33.4, 65]
}, {
name: '赢单率',
type: 'line',
yAxisIndex: 1,
data: [4.5, 6.3, 10.2, 20.3, 23.4, 30.2]
}
]
},
// 商机类型
bussionType: {
legend: ['服务续签', '其他', '特殊事项'],
data: [
{ value: 335, name: '服务续签' },
{ value: 310, name: '其他' },
{ value: 234, name: '特殊事项' }
]
},
// 商机阶段分析
bussionStep: {
legend: ['初步接洽', '需求确定', '方案/报价', '谈判审核', '赢单', '输单', '终止', '暂停'],
data: [
{ value: 335, name: '初步接洽' },
{ value: 280, name: '需求确定' },
{ value: 234, name: '方案/报价' },
{ value: 190, name: '谈判审核' },
{ value: 185, name: '赢单' },
{ value: 120, name: '输单' },
{ value: 89, name: '终止' },
{ value: 23, name: '暂停' }
]
},
businessType: [], // 商机业务类型 businessType: [], // 商机业务类型
quoteProportion: {}, // 商机报价及占比 quoteProportion: {}, // 商机报价及占比
taxRate: {}, // 商机税率 taxRate: {}, // 商机税率
...@@ -120,10 +274,6 @@ export default { ...@@ -120,10 +274,6 @@ export default {
} }
}, },
methods: { methods: {
// if (value) {
// value = value / 10000
// return value
// },
GetBusinessList () { GetBusinessList () {
API_BUSSINESS.GetBusinessList().then(res => { API_BUSSINESS.GetBusinessList().then(res => {
this.totalData = res this.totalData = res
......
src/views/content/operation/components/agingAnalysis.vue 0 → 100644
View file @ 4055900c
<template>
<div>
<div class="d-flex search-box jc-end">
<el-select v-model="selectType" size="mini">
<el-option
v-for="item in typeList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
<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="agingAnalysis" 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'],
selectType: '合同',
typeList: ['合同', '验收', '开票', '出库'],
dataList: {
legend: ['<30天', '<60天', '<90天', '<120天', '<180天', '180+天'],
data: [
{ value: 335, name: '<30天' },
{ value: 310, name: '<60天' },
{ value: 234, name: '<90天' },
{ value: 135, name: '<120天' },
{ value: 548, name: '<180天' },
{ value: 348, name: '180+天' }
]
}
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
</style>
src/views/content/operation/components/assetManagement.vue deleted 100644 → 0
View file @ 09f1cabc
<template>
<div>
<div class="block">
<div class="listTitleBox">
<div class="listTitle" v-for="(item,index) in title" :key="index">{{item}}</div>
</div>
<ul>
<li v-for="(item,index) in list.table" :key="index">
<div>{{item.name}}</div>
<div>{{item.num}}</div>
<div>{{item.principal}}</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data () {
return {
title: ['资产名称', '资产数量', '负责人'],
list: this.message
}
},
props: ['message'],
mounted () {
this.init()
},
methods: {
init () {
// console.log(this.message)
}
}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/style/operation.scss';
</style>
src/views/content/operation/components/budgetRatio.vue 0 → 100644
View file @ 4055900c
<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>
<doubleYBarChart :message="dataList" idstr="budgetRatio" class="heightCut68"></doubleYBarChart>
</div>
</template>
<script>
import doubleYBarChart from '@/components/echarts/doubleYBarChart' // 双柱加折线图
export default {
components: { doubleYBarChart },
data () {
return {
selectYear: '2020',
yearList: ['2021', '2020', '2019', '2018', '2017'],
dataList: {
legend: ['新签预算', '新签实际', '完成比'],
xAxis: ['4中心', '5中心', '6中心', '7中心', '8中心'],
yAxis: ['单位：万元', '完成比：%'],
data: [
{
name: '新签预算',
type: 'bar',
data: [23.2, 25.6, 76.7, 135.6, 162.2]
}, {
name: '新签实际',
type: 'bar',
data: [13.2, 45.6, 76.7, 55.6, 62.2]
}, {
name: '完成比',
type: 'line',
yAxisIndex: 1,
data: [4.5, 6.3, 10.2, 20.3, 23.4]
}
]
}
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
</style>
src/views/content/operation/components/cashFlow.vue
View file @ 4055900c
<template> <template>
<div :id="idstr"></div> <div>
<div class="d-flex search-box jc-end">
<el-select v-model="selectType" size="mini">
<el-option
v-for="item in typeList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
<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>
<negativeBarChart :message="dataList" idstr="cashFlow" class="heightCut68"></negativeBarChart>
</div>
</template> </template>
<script> <script>
// 引入基本模板 import negativeBarChart from '@/components/echarts/negativeBarChart' // 饼图
const echarts = require('echarts/lib/echarts')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default { export default {
components: { negativeBarChart },
data () { data () {
return { return {
dataObj: {}, selectYear: '2020',
option: {}, yearList: ['2021', '2020', '2019', '2018', '2017'],
chart: null, selectType: '总裁办',
clickNum: [1, 1, 1, 1, 1] typeList: ['总裁办', '客户营销中心', '计划财务中心', '运营管理中心', '解决方案中心', 'IT服务中心', '智能制造中心', '生态合作中心', '客户运营中心'],
dataList: {
legend: ['流入', '流出', '净流入'],
xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
data: {
inCome: [34, 56, 55, 33, 11, 76, 54, 34, 21, 33, 87, 66],
flowOut: [-4, -56, -55, -33, -11, -76, -54, -34, -21, -33, -87, -66],
inFlow: [30, 0, 0, 0, 22, -65, 22, 20, 13, 0, 0, 0]
} }
},
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 = {
legend: {},
tooltip: {
transitionDuration: 0,
trigger: 'axis',
showContent: false
},
dataset: {
source: [
['product', '2012', '2013', '2014', '2015', '2016', '2017'],
['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7]
]
},
xAxis: { type: 'category' },
yAxis: { gridIndex: 0 },
series: [{
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#30DDF4' },
{ offset: 0.4, color: 'rgba(255,255,255,0.1)' },
{ offset: 1, color: 'rgba(255,255,255,0)' }
]
)
} }
} }
}]
}
vm.drawBar()
// window.addEventListener("resize",()=>{
// chart.resize();
// });
},
drawBar () {
// 绘制图表
const vm = this
vm.chart.setOption(vm.option)
vm.eventList()
}, },
eventList () { mounted () {
const vm = this
vm.chart.on('click', function (params) {
})
}
}, },
watch: { methods: {
message: function () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 1000)
// console.log(this.message)
}
} }
} }
</script> </script>
<style lang="less"> <style lang="scss" scoped>
</style> </style>
src/views/content/operation/components/contractAmount.vue 0 → 100644
View file @ 4055900c
<template>
<div>
<div class="d-flex search-box jc-end">
<el-select v-model="selectType" size="mini">
<el-option
v-for="item in typeList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
<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="contractAmount" 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'],
selectType: '销售合同',
typeList: ['销售合同', '采购合同'],
dataList: {
legend: ['10W以下', '10W-30W', '30W-50W', '50W-100W', '100W以上'],
data: [
{ value: 335, name: '10W以下' },
{ value: 310, name: '10W-30W' },
{ value: 234, name: '30W-50W' },
{ value: 135, name: '50W-100W' },
{ value: 1548, name: '100W以上' }
]
}
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
</style>
src/views/content/operation/components/doubleHistogram.vue deleted 100644 → 0
View file @ 09f1cabc
<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 = {
legend: {},
tooltip: {
transitionDuration: 0
},
dataset: {
source: [
['product', '2012', '2013', '2014', '2015'],
['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
['Milk Tea', 86.5, 92.1, 85.7, 83.1]
]
},
xAxis: [
{ type: 'category', gridIndex: 0 }
],
yAxis: [
{ gridIndex: 0 }
],
series: [
{ type: 'bar', seriesLayoutBy: 'row' },
{ type: 'bar', seriesLayoutBy: 'row' }
]
}
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/operation/components/productIncome.vue 0 → 100644
View file @ 4055900c
<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>
<div class="d-flex heightCut68">
<div class="flex-1 ball">
<waterBall :message="dataList1" idstr="ball1" class="heightCut68"></waterBall>
<p>预算收入 200万元</p>
<p>实际收入 170万元</p>
</div>
<div class="flex-1 ball">
<waterBall :message="dataList2" idstr="ball2" class="heightCut68"></waterBall>
<p>预算成本 200万元</p>
<p>实际成本 170万元</p>
</div>
</div>
</div>
</template>
<script>
import waterBall from '@/components/echarts/waterBallChart' // 双柱加折线图
export default {
components: { waterBall },
data () {
return {
selectYear: '2021/4',
yearList: ['2021/4', '2021/3', '2021/2', '2021/1'],
dataList1: {
name: '收入比',
data: [0.79]
},
dataList2: {
name: '成本比',
data: [0.59]
}
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/style/operation.scss';
</style>
src/views/content/operation/components/receiptStatistics.vue 0 → 100644
View file @ 4055900c
<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>
<div class="ball-line d-flex heightCut68">
<div class="ball flex-1">
<waterBall :message="dataList1" idstr="ballLeft" class="heightCut68"></waterBall>
<p>共计 1200万元</p>
<p>已回款 170万元</p>
</div>
<div class="flex-2">
<lineChart :message="dataList" idstr="receiptStatistics" class="receiptStatistics"></lineChart>
</div>
</div>
</div>
</template>
<script>
import lineChart from '@/components/echarts/lineChart' // 双柱加折线图
import waterBall from '@/components/echarts/waterBallChart'
export default {
components: { waterBall, lineChart },
data () {
return {
selectYear: '2020',
yearList: ['2021', '2020', '2019', '2018', '2017'],
dataList1: {
name: '收入比',
data: [0.19]
},
dataList: {
legend: ['合同签署金额', '应收款', '累计收款金额'],
xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
data: [{
name: '合同签署金额',
data: [820, 932, 901, 934, 1290, 1330, 620],
type: 'line'
},
{
name: '应收款',
data: [420, 532, 701, 434, 290, 330, 120],
type: 'line'
}, {
name: '累计收款金额',
data: [520, 232, 401, 334, 790, 830, 320],
type: 'line'
}]
}
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/style/operation.scss';
</style>
src/views/content/operation/components/revenueRanking.vue
View file @ 4055900c
<template> <template>
<div> <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>
<div class="block"> <div class="block">
<div class="listTitleBox"> <div class="listTitleBox">
<div class="listTitle" v-for="(item,index) in title" :key="index">{{item}}</div> <div class="listTitle" v-for="(item,index) in column" :key="index">{{item}}</div>
</div> </div>
<ul> <ul>
<li v-for="(item,index) in list.table" :key="index"> <li v-for="(item,index) in list" :key="index">
<div>{{Number(index)+1}}</div> <div>{{Number(index)+1}}</div>
<div>{{item.name}}</div> <div>{{item.name}}</div>
<div>{{item.num}}</div> <div>{{item.num}}</div>
...@@ -20,11 +30,38 @@ ...@@ -20,11 +30,38 @@
export default { export default {
data () { data () {
return { return {
title: ['排名', '吧名', '完成数额', '完成比'], selectYear: '2020',
list: this.message yearList: ['2021', '2020', '2019', '2018', '2017'],
column: ['排名', '中心名称', '完成数额', '完成比'],
list: [
{
name: '平台应用吧',
num: '1500W',
percent: '50%'
},
{
name: '平台应用吧',
num: '1500W',
percent: '50%'
},
{
name: '平台应用吧',
num: '1500W',
percent: '50%'
},
{
name: '平台应用吧',
num: '1500W',
percent: '50%'
},
{
name: '平台应用吧',
num: '1500W',
percent: '50%'
}
]
} }
}, },
props: ['message'],
mounted () { mounted () {
}, },
methods: { methods: {
......
src/views/content/operation/components/revenueStatistics.vue 0 → 100644
View file @ 4055900c
<template>
<div>
<div class="d-flex search-box jc-end">
<el-select v-model="selectType" size="mini">
<el-option
v-for="item in typeList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
<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>
<barChart :message="dataList" idstr="revenueStatistics" class="heightCut68"></barChart>
</div>
</template>
<script>
import barChart from '@/components/echarts/barChart' // 柱图
export default {
components: { barChart },
data () {
return {
selectType: '合同收入',
typeList: ['合同收入', '项目收入', '切分收入'],
selectYear: '2021/4',
yearList: ['2021/4', '2021/3', '2021/2', '2021/1'],
dataList: {
xAxis: ['总裁办', '客户营销中心', '计划财务中心', '运营管理中心', '解决方案中心', 'IT服务中心', '智能制造中心', '生态合作中心', '客户运营中心'],
data: [23.2, 25.6, 76.7, 135.6, 162.2, 222, 34, 345, 76]
}
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
</style>
src/views/content/operation/components/totalExpenses.vue 0 → 100644
View file @ 4055900c
<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>
<barChart :message="dataList" idstr="totalExpenses" class="heightCut68"></barChart>
</div>
</template>
<script>
import barChart from '@/components/echarts/barChart' // 柱图
export default {
components: { barChart },
data () {
return {
selectYear: '2021/4',
yearList: ['2021/4', '2021/3', '2021/2', '2021/1'],
dataList: {
xAxis: ['4中心', '5中心', '6中心', '7中心', '8中心'],
data: [23.2, 25.6, 76.7, 135.6, 162.2]
}
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
</style>
src/views/content/operation/components/turnoverStatistics.vue deleted 100644 → 0
View file @ 09f1cabc
<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 = {
legend: {},
tooltip: {
transitionDuration: 0,
trigger: 'axis',
showContent: false
},
dataset: {
source: [
['product', '2012', '2013', '2014', '2015', '2016', '2017'],
['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7]
]
},
xAxis: { type: 'category' },
yAxis: { gridIndex: 0 },
series: [
{ type: 'line', smooth: true, seriesLayoutBy: 'row' }
]
}
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/operation/page.vue
View file @ 4055900c
...@@ -3,53 +3,45 @@ ...@@ -3,53 +3,45 @@
<headerLayout></headerLayout> <headerLayout></headerLayout>
<div class="section"> <div class="section">
<div class="leftBlock"> <div class="leftBlock">
<div class="topBox height100"> <div class="boxHeight-3">
<div class="title">流水利润完成比</div> <div class="title">预算完成比</div>
<div class="line"></div> <budgetRatio class="heightCut44" />
<doubleHistogram :message="profitChart" idstr="profitChart" class="profitChart heightCut42"></doubleHistogram>
</div> </div>
<div class="bottomBox height100"> <div class="boxHeight-3 mt-2">
<div class="title">合同金额</div> <div class="title">合同金额</div>
<div class="line"></div> <contractAmount class="heightCut44"/>
<pie :message="contractAmount" idstr="contractAmount" class="contractAmount heightCut42"></pie>
</div> </div>
<div class="bottomBox height100"> <div class="boxHeight-3 mt-2">
<div class="title">年度营收款</div> <div class="title">项目收入</div>
<div class="line"></div> <productIncome class="heightCut44"/>
<pie :message="annualRevenue" idstr="annualRevenue" class="annualRevenue heightCut42"></pie>
</div> </div>
</div> </div>
<div class="centerBlock"> <div class="centerBlock">
<div class="topBox height100"> <div class="centerBoxHeight-3">
<div class="title">回款额</div> <div class="title">回款额</div>
<div class="line"></div> <receiptStatistics class="heightCut44"/>
<pie :message="refundAmount" idstr="refundAmount" class="refundAmount heightCut42"></pie>
<lineChart :message="refundAmountLine" idstr="refundAmountLine" class="refundAmountLine heightCut42"></lineChart>
</div> </div>
<div class="bottomBox height100"> <div class="centerBoxHeight-3 mt-2">
<div class="title">营业额统计</div> <div class="title">营收统计</div>
<div class="line"></div> <revenueStatistics class="heightCut44" />
<turnoverStatistics :message="turnoverStatistics" idstr="turnoverStatistics" class="turnoverStatistics heightCut42"></turnoverStatistics>
</div> </div>
<div class="bottomBox height100"> <div class="centerBoxHeight-3 mt-2">
<div class="title">现金流</div> <div class="title">现金流</div>
<div class="line"></div> <cashFlow class="heightCut44" />
<cashFlow :message="cashFlow" idstr="cashFlow" class="cashFlow heightCut42"></cashFlow>
</div> </div>
</div> </div>
<div class="rightBlock"> <div class="rightBlock">
<div class="topBox height100"> <div class="boxHeight-3">
<knowledgeGraph class="knowledgeGraph height100"></knowledgeGraph> <div class="title">应收账龄分析</div>
<agingAnalysis class="heightCut44" />
</div> </div>
<div class="bottomBox height100"> <div class="boxHeight-3 mt-2">
<div class="title">营收排行</div> <div class="title">费用统计</div>
<div class="line"></div> <totalExpenses class="heightCut44" />
<revenueRanking :message="revenueRanking" class="revenueRanking heightCut62"></revenueRanking>
</div> </div>
<div class="bottomBox height100"> <div class="boxHeight-3 mt-2">
<div class="title">资产管理</div> <div class="title">营收排行</div>
<div class="line"></div> <revenueRanking class="heightCut44"></revenueRanking>
<assetManagement :message="assetManagement" class="assetManagement heightCut62"></assetManagement>
</div> </div>
</div> </div>
</div> </div>
...@@ -58,64 +50,20 @@ ...@@ -58,64 +50,20 @@
<script> <script>
import headerLayout from '@/components/headerLayout/index' // 公共头部 import headerLayout from '@/components/headerLayout/index' // 公共头部
import doubleHistogram from './components/doubleHistogram' // 双柱状图 import budgetRatio from './components/budgetRatio' // 预算完成比
import pie from './components/pie' // 饼图 import contractAmount from './components/contractAmount' // 合同金额
import lineChart from './components/polyline' // 折线图 import productIncome from './components/productIncome' // 项目收入
import turnoverStatistics from './components/turnoverStatistics' // 营业额统计 import agingAnalysis from './components/agingAnalysis' // 账龄分析
import cashFlow from './components/cashFlow' // 现金流 import totalExpenses from './components/totalExpenses' // 费用统计
import revenueRanking from './components/revenueRanking' // 营收排行 import revenueRanking from './components/revenueRanking' // 营收排行
import assetManagement from './components/assetManagement' // 资产管理 import revenueStatistics from './components/revenueStatistics' // 营业额统计
import knowledgeGraph from '../../system/index/components/knowledgeGraph'// 知识图谱 import cashFlow from './components/cashFlow' // 现金流
import receiptStatistics from './components/receiptStatistics' // 回款统计
export default { export default {
components: { headerLayout, doubleHistogram, pie, lineChart, turnoverStatistics, cashFlow, knowledgeGraph, revenueRanking, assetManagement }, components: { headerLayout, budgetRatio, contractAmount, productIncome, agingAnalysis, totalExpenses, receiptStatistics, revenueStatistics, cashFlow, revenueRanking },
data () { data () {
return { return {
profitChart: {}, // 流水利润完成比
contractAmount: {}, // 合同金额
annualRevenue: {}, // 年度营收款
refundAmount: {}, // 回款额
refundAmountLine: {}, // 回款额折线图
turnoverStatistics: {}, // 营业额统计
cashFlow: {}, // 现金流
revenueRanking: {
table: [
{
name: '平台应用吧',
num: '1500W',
percent: '50%'
},
{
name: '平台应用吧',
num: '1500W',
percent: '50%'
},
{
name: '平台应用吧',
num: '1500W',
percent: '50%'
}
]
}, // 营收排行
assetManagement: {
table: [
{
name: '服务器',
num: '20个',
principal: '米修'
},
{
name: '笔记本',
num: '50个',
principal: '米修'
},
{
name: '源代码',
num: '60个',
principal: '米修'
}
]
} // 资产管理
} }
}, },
mounted () { mounted () {
...@@ -127,18 +75,4 @@ export default { ...@@ -127,18 +75,4 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '~@/assets/style/operation.scss'; @import '~@/assets/style/operation.scss';
.operation{
.centerBlock{
.refundAmount{
width: 40%;
height: calc(100% - 42px);
float: left;
}
.refundAmountLine{
width: 60%;
height: calc(100% - 42px);
float: left;
}
}
}
</style> </style>
src/views/content/organization/page.vue
View file @ 4055900c
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<headerLayout></headerLayout> <headerLayout></headerLayout>
<div class="section"> <div class="section">
<div class="leftBlock"> <div class="leftBlock">
<div class="leftBox"> <div class="boxHeight-3">
<div class="title">组织架构</div> <div class="title">组织架构</div>
<div class="architecture"> <div class="architecture">
<div class="architectureBlock"> <div class="architectureBlock">
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="leftBox"> <div class="boxHeight-3 mt-2">
<div class="title">人员分布</div> <div class="title">人员分布</div>
<div class="peopleContent"> <div class="peopleContent">
<div class="select-box"> <div class="select-box">
...@@ -33,10 +33,10 @@ ...@@ -33,10 +33,10 @@
<span class="tab-button" @click="distributeActive=5" :class="{'is-active':distributeActive=== 5 }">司龄分布</span> <span class="tab-button" @click="distributeActive=5" :class="{'is-active':distributeActive=== 5 }">司龄分布</span>
</div> </div>
</div> </div>
<pie :message="jobDistribution" idstr="jobDistribution" class="jobDistribution heightCut42"></pie> <pieChart :message="jobDistribution" idstr="jobDistribution" class="jobDistribution heightCut42"></pieChart>
</div> </div>
</div> </div>
<div class="leftBox"> <div class="boxHeight-3 mt-2">
<div class="title">人才招聘</div> <div class="title">人才招聘</div>
<div class="px-24"> <div class="px-24">
<div class="sum-box d-flex"> <div class="sum-box d-flex">
...@@ -84,25 +84,25 @@ ...@@ -84,25 +84,25 @@
</div> </div>
<staffInfo :searchId="input"/> <staffInfo :searchId="input"/>
</div> </div>
<div class="bottomBox"> <div class="centerBoxHeight-3 mt-2">
<div class="title">入/离职统计</div> <div class="title">入/离职统计</div>
<lineChart :message="refundAmountLine" idstr="refundAmountLine" class="refundAmountLine height21"></lineChart> <lineChart :message="refundAmountLine" idstr="refundAmountLine" class="refundAmountLine height21"></lineChart>
</div> </div>
</div> </div>
<div class="rightBlock"> <div class="rightBlock">
<div class="rightBox"> <div class="boxHeight-2">
<div class="title">上月绩效</div> <div class="title">上月绩效</div>
<div class="px-24"> <div class="px-24 heightCut68">
<div class="select-box"> <div class="select-box">
<div class="tab-chart"> <div class="tab-chart">
<span class="tab-button" @click="performActive=1" :class="{'is-active':performActive=== 1 }">按分数</span> <span class="tab-button" @click="performActive=1" :class="{'is-active':performActive=== 1 }">按分数</span>
<span class="tab-button" @click="performActive=2" :class="{'is-active':performActive=== 2 }">按部门</span> <span class="tab-button" @click="performActive=2" :class="{'is-active':performActive=== 2 }">按部门</span>
</div> </div>
</div> </div>
<lastMonthPerformance :performActive="performActive" :message="{}" idstr="lastMonthPerformance" class="lastMonthPerformance"></lastMonthPerformance> <barChart :message="dataList" idstr="lastMonthPerformance" class="heightCut44"></barChart>
</div> </div>
</div> </div>
<peopleCounting class="peopleCounting"></peopleCounting> <peopleCounting class="peopleCounting mt-2"></peopleCounting>
</div> </div>
</div> </div>
</d2-container> </d2-container>
...@@ -110,15 +110,15 @@ ...@@ -110,15 +110,15 @@
<script> <script>
import headerLayout from '@/components/headerLayout/index' // 公共头部 import headerLayout from '@/components/headerLayout/index' // 公共头部
import lastMonthPerformance from './components/lastMonthPerformance' // 上月绩效 import barChart from '@/components/echarts/barChart' // 柱图上月绩效
import pieChart from '@/components/echarts/pieChart' // 岗位分布
import peopleCounting from './components/peopleCounting' // 人数统计 import peopleCounting from './components/peopleCounting' // 人数统计
import pie from './components/pie' // 岗位分布
import waterBall from './components/waterBall' // 岗位分布 import waterBall from './components/waterBall' // 岗位分布
import lineChart from './components/polyline' // 折线图 import lineChart from '@/components/echarts/lineChart' // 折线图
import staffInfo from './components/staffInfo' import staffInfo from './components/staffInfo'
export default { export default {
components: { headerLayout, pie, waterBall, lineChart, peopleCounting, lastMonthPerformance, staffInfo }, components: { headerLayout, pieChart, barChart, waterBall, lineChart, peopleCounting, staffInfo },
data () { data () {
return { return {
options: [ options: [
...@@ -130,15 +130,50 @@ export default { ...@@ -130,15 +130,50 @@ export default {
label: '证书名称' label: '证书名称'
} }
], ],
dataList: {
xAxis: ['运营管理中心', '解决方案中心', '智能制造中心', '生态合作中心', '客户运营中心'],
data: [123.2, 76.7, 135.6, 162.2, 32.6]
},
performActive: 1, performActive: 1,
distributeActive: 1, distributeActive: 1,
input: '', input: '',
jobDistribution: {}, jobDistribution: {
legend: ['技术岗', '销售岗', '管理岗', '职能岗', '其他岗'],
data: [
{ value: 335, name: '技术岗' },
{ value: 310, name: '销售岗' },
{ value: 234, name: '管理岗' },
{ value: 135, name: '职能岗' },
{ value: 548, name: '其他岗' }
]
},
refundAmountLine: {
legend: ['简历数', '面试数', '发放offer', '入职'],
xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
data: [{
name: '简历数',
data: [820, 932, 901, 934, 1290, 1330, 620],
type: 'line'
},
{
name: '面试数',
data: [420, 532, 701, 434, 290, 330, 120],
type: 'line'
}, {
name: '发放offer',
data: [520, 232, 401, 334, 790, 830, 320],
type: 'line'
},
{
name: '入职',
data: [620, 732, 101, 234, 690, 530, 520],
type: 'line'
}]
},
recruitment: {}, recruitment: {},
ball1: {}, ball1: {},
ball2: {}, ball2: {},
ball3: {}, ball3: {}
refundAmountLine: {}
} }
}, },
mounted () { mounted () {
......
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