Skip to content

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

写运营和商机页面

parent 09f1cabc
Expand all Hide 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; .businessStatistics{
.topBox{ flex-direction: column;
height: calc(43% - 2vw); align-items: center;
background: url("~@/assets/img/566378.png"); box-sizing: border-box;
background-color:rgba(0,14,66,0.5); height: 2.58rem;
background-size: 100% 100%; padding:.14rem .24rem;
.businessStatistics{ position: relative;
width: 90%; .flex-1 {
height: 58%; font-size: .12rem;
margin: calc(21% - 70px) auto 0; }
position: relative; .circle{
.circle{ width: 1.25rem;
width: 30%; height: 1.25rem;
padding-bottom: 30%; line-height: 1.25rem;
height: 0; 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%; transform: translate(-50%,-50%);
margin-top: -15%; z-index: 2;
margin-left: -15%; font-size:.18rem;
z-index: 2; font-family:PingFang-SC-Bold,PingFang-SC;
.circleTitle{ font-weight:bold;
font-size:16px; color:#000E42;
font-family:PingFang-SC-Bold,PingFang-SC; text-align: center;
font-weight:bold; }
color:#000E42; .circleOut{
margin-top: 20%; width: 1.6rem;
text-align: center; height: 1.6rem;
} background: #000E42;
.circleValue{ z-index: 1;
font-size:32px; }
font-family:ZhenyanGB-Regular,ZhenyanGB; .box{
font-weight:400; display: inline-block;
color:#000E42; width: 2rem;
text-align: center; height: .6rem;
} text-align: center;
} background:rgba(144,224,255,0.15);
.circle1{ color: #fff;
width: 34%; border:1px solid #77E2FF;
padding-bottom: 34%; margin-bottom: .2rem;
height: 0; &:nth-of-type(2n){
background: #000E42; margin-left: .2rem;
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{ .boxTitle{
display: inline-block; font-size:.16rem;
width: calc(50% - 50px); font-family:PingFang-SC-Medium,PingFang-SC;
padding: 0 20px; font-weight:500;
text-align: center; color:#fff;
height: calc(50% - 8px); line-height: 2;
line-height: 50px; span{
background:rgba(144,224,255,0.15); font-size:.12rem;
color: #fff;
position: absolute;
border:1px solid #77E2FF;
.boxTitle{
font-size:16px;
font-family:PingFang-SC-Medium,PingFang-SC;
font-weight:500;
color:#fff;
height: 40px;
span{
font-size:12px;
}
} }
.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{
width: 100%;
height: 14px;
background: #000E42;
position: absolute;
top:calc(50% - 6px);
left: 0;
z-index: 1;
} }
.vertical{ .boxValue{
width: 18px; font-size:.24rem;
height: 100%; font-family:ZhenyanGB-Regular,ZhenyanGB;
background: #000E42; font-weight:400;
position: absolute; color:#30DDF4;
top:0;
left: calc(50% - 8px);
z-index: 1;
} }
} }
.horizontal{
} width: 1.7rem;
.bottomBox{ height: .2rem;
height: 26.5%; background: #000E42;
background: url("~@/assets/img/566266.png"); position: absolute;
background-color:rgba(0,14,66,0.5); top:.76rem;
background-size: 100% 100%; left: 50%;
margin-top: 20px; transform: translateX(-50%);
} z-index: 1;
.bottomBoxLong{ }
height: calc(53% + 20px); .horizontal1 {
background: url("~@/assets/img/566378.png"); top:1.58rem;
background-color:rgba(0,14,66,0.5); }
background-size: 100% 100%; .vertical{
margin-top: 20px; width: .2rem;
} height: 1.62rem;
.centerBlock{ background: #000E42;
.topBoxEmpty{ position: absolute;
height: calc(47% - 40px); top: 50%;
.halfLeft,.halfRight{ transform: translateY(-50%);
width: calc(50% - 10px); z-index: 1;
height: 100%; }
background: url("~@/assets/img/326378.png"); .pl-8 {
background-color:rgba(0,14,66,0.5); padding-left: .8rem;
background-size: 100% 100%; }
float: left; .pr-7 {
} padding-right: .7rem;
.halfRight{margin-left: 20px} }
.pl-2 {
padding-left: .2rem;
}
.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; // 组织架构
.architecture{
.leftBox{ width: calc(100% - .48rem);
height: 3.02rem; height: calc(100% - .44rem);
background: url("~@/assets/img/l-border-1.png"); padding: .24rem;
background-size: 100% 100%; position: relative;
margin-bottom: .2rem; .architectureBlock{
// 组织架构 font-family: PingFang-SC-Bold;
.architecture{ font-size: .14rem;
width: calc(100% - .48rem); color: #000E42;
height: calc(100% - .44rem); text-align: center;
padding: .24rem; width: 1.62rem;
position: relative; height: 1.4rem;
.architectureBlock{ position: absolute;
font-family: PingFang-SC-Bold; left: 50%;
font-size: .14rem; top: 50%;
color: #000E42; margin-left: -.81rem;
text-align: center; margin-top: -.7rem;
width: 1.62rem; background: url("~@/assets/img/ring.png");
height: 1.4rem; background-size: 100% 100%;
.top{
width: 1.28rem;
height: .28rem;
line-height: .28rem;
background: #30DDF4;
border-radius: 2px;
position: absolute; position: absolute;
top: -35%;
left: 50%; left: 50%;
top: 50%; margin-left: -.64rem;
margin-left: -.81rem; }
margin-top: -.7rem; .left,.right {
background: url("~@/assets/img/ring.png"); position: absolute;
background-size: 100% 100%; top:0;
.top{ margin: 0;
li{
width: 1.28rem; width: 1.28rem;
height: .28rem; height: .28rem;
line-height: .28rem; line-height: .28rem;
background: #30DDF4; background: #30DDF4;
border-radius: 2px; border-radius: 2px;
position: absolute; margin-bottom: .28rem;
top: -35%;
left: 50%;
margin-left: -.64rem;
}
.left,.right {
position: absolute;
top:0;
margin: 0;
li{
width: 1.28rem;
height: .28rem;
line-height: .28rem;
background: #30DDF4;
border-radius: 2px;
margin-bottom: .28rem;
}
} }
.left { }
left: -80%; .left {
li { left: -80%;
&:nth-of-type(2n) { li {
margin-left: -.24rem; &:nth-of-type(2n) {
} margin-left: -.24rem;
} }
} }
.right{ }
left: 100%; .right{
li { left: 100%;
&:nth-of-type(2n) { li {
margin-left: .24rem; &:nth-of-type(2n) {
} margin-left: .24rem;
} }
} }
} }
} }
// 人员分布 }
.peopleContent { // 人员分布
padding: .24rem; .peopleContent {
.select-box { padding: .24rem;
justify-content: center; .select-box {
font-size: .12rem; justify-content: center;
} font-size: .12rem;
.jobDistribution {
width: 100%;
height: 2.14rem;
}
} }
// 人才招聘 .jobDistribution {
.sum-item { width: 100%;
text-align: center; height: 2.14rem;
font-size: .16rem;
color: #fff;
.num {
margin-left: .16rem;
font-family: ZhenyanGB-Regular,ZhenyanGB;
color: #30DDF4;
strong {
font-size: .24rem;
}
}
} }
.ballBox{ }
.ball { // 人才招聘
width: 100%; .sum-item {
p{ text-align: center;
font-size:.12rem; font-size: .16rem;
font-family:PingFang-SC-Medium,PingFang-SC; color: #fff;
color: #30DDF4; .num {
text-align: center; margin-left: .16rem;
margin: 4px 0; font-family: ZhenyanGB-Regular,ZhenyanGB;
} color: #30DDF4;
strong {
font-size: .24rem;
} }
.ball1{ }
height: 1.2rem; }
// 人才招聘
.ballBox{
.ball {
width: 100%;
p{
font-size:.12rem;
font-family:PingFang-SC-Medium,PingFang-SC;
color: #30DDF4;
text-align: center;
margin: 4px 0;
} }
.ball2,.ball3 {
width:.88rem;
height:.88rem;
margin: 0 auto;
align-self: baseline;
} }
.ball1{
height: 1.2rem;
} }
.ball2,.ball3 {
width:.88rem;
height:.88rem;
margin: 0 auto;
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%;
margin-bottom: .2rem; margin-bottom: .2rem;
.lastMonthPerformance { .lastMonthPerformance {
width: 100%; width: 100%;
height: 3.6rem; height: 3.6rem;
}
} }
} }
} }
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: '金额 ：万元',
name: vm.performActive === 1 ? '分数' : '部门', splitLine: {
min: 0, show: true,
max: 250, lineStyle: {
interval: 50, type: 'dashed',
axisLine: { color: 'rgba(255,255,255,.3)'
lineStyle: { }
color: '#FFF' },
} axisLine: {
lineStyle: {
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
itemWidth: 10, // 设置宽度
itemHeight: 4, // 设置高度
itemGap: 10 // 设置间距
}, },
series: [ xAxis: [
{ {
name: '访问来源', type: 'category',
type: 'pie', data: vm.message.xAxis, // ['4中心', '5中心', '6中心', '7中心', '8中心'],
radius: ['40%', '60%'], axisPointer: {
center: ['50%', '50%'], type: 'shadow'
avoidLabelOverlap: false,
label: {
show: false,
position: 'left'
}, },
emphasis: { // hover效果，已经关闭 axisLine: {
label: { lineStyle: {
show: false, color: '#FFF'
fontSize: '30', }
fontWeight: 'bold' }
}
],
yAxis: [
{
type: 'value',
name: vm.message.yAxis[0], // '单位：万元',
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: 'rgba(255,255,255,.3)'
} }
}, },
labelLine: { axisLine: {
show: false lineStyle: {
color: '#FFF'
}
}
},
{
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'
},
icon: 'circle' // 这个字段控制形状类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
}, },
dataset: { grid: {
source: [ top: '20%',
['product', '2012', '2013', '2014', '2015', '2016', '2017'], left: '10%',
['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7], bottom: '10%'
['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' }, xAxis: {
yAxis: { gridIndex: 0 }, type: 'category',
series: [ data: vm.message.xAxis,
{ type: 'line', smooth: true, seriesLayoutBy: 'row' }, axisLine: {
{ type: 'line', smooth: true, seriesLayoutBy: 'row' }, lineStyle: {
{ type: 'line', smooth: true, seriesLayoutBy: 'row' } 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'], legend: {
tooltip: { data: vm.message.legend,
transitionDuration: 0, // 提示框浮层的移动动画过渡时间，单位是s，设置0的时候会紧跟鼠标移动 textStyle: {
trigger: 'axis', color: '#ffffff'
axisPointer: {
type: 'cross'
} }
}, },
grid: { grid: {
right: '20%', top: '15%',
height: 135, left: '10%',
top: 40 right: '10%',
}, bottom: '15%'
legend: {
padding: 18,
textStyle: {
color: '#ffffff' // 图例文字颜色
},
orient: 'vertical', // 垂直显示
y: 'center', // 延Y轴居中
x: 'right', // 居右显示
data: this.message.title
}, },
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'
} }
}
},
series: [
{
type: 'bar',
barWidth: '25%',
itemStyle: {
color: '#30DDF4'
},
data: vm.message.data.inCome
}, },
axisLabel: { {
formatter: '{value} %' 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' // 文字颜色
},
// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
// 水球图: {a}（系列名称），{b}（无），{c}（数值）
// 使用函数模板 传入的数据值 -> value: number|Array,
formatter: function (value) {
return value.seriesName + ': ' + value.data * 100 + '%'
} }
// data: this.message.title
// left: 'right'
}, },
tooltip: {}, series: [{
dataset: { type: 'liquidFill',
source: source name: vm.message.name, // 系列名称，用于tooltip的显示，legend 的图例筛选
}, radius: '80%', // 水球图的半径
xAxis: { center: ['50%', '50%'], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
type: 'category', shape: 'circle',
axisLine: { 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: { itemStyle: {
// data: ['10', '20', '30', '40', '50', '60', '70'], color: new echarts.graphic.LinearGradient(
axisLine: { 0, 0, 0, 1,
show: true, [{ offset: 0, color: '#90E0FF' },
lineStyle: { { offset: 1, color: '#E23AA2' }]
color: '#675bba' ), // 水球显示的背景颜色
opacity: 1, // 波浪的透明度
shadowBlur: 10 // 波浪的阴影范围
},
backgroundStyle: {
color: '#000E42', // 水球未到的背景颜色
borderWidth: 0,
borderColor: 'rgb(255,0,255,0.9)'
},
// 图形上的文本标签
label: {
color: '#ffffff', // 在波浪上方时的文字颜色
insideColor: '#ffffff', // 在波浪下方时的文字颜色
textStyle: {
fontSize: 24
} }
} },
}, // 图形的高亮样式
// Declare several bar series, each will be mapped emphasis: {
// to a column of dataset.source by default. itemStyle: {
series: bars opacity: 0.8 // 鼠标经过波浪颜色的透明度
}
},
data: vm.message.data// 系列中的数据内容数组
}]
} }
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
This diff is collapsed.
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 () { mounted () {
this.drawLine()
}, },
methods: { 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 () {
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> </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