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{
width: 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{
width: 90%;
height: 58%;
margin: calc(21% - 70px) auto 0;
position: relative;
.circle{
width: 30%;
padding-bottom: 30%;
height: 0;
background: #30DDF4;
border: 1px solid #30DDF4;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -15%;
margin-left: -15%;
z-index: 2;
.circleTitle{
font-size:16px;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
color:#000E42;
margin-top: 20%;
text-align: center;
}
.circleValue{
font-size:32px;
font-family:ZhenyanGB-Regular,ZhenyanGB;
font-weight:400;
color:#000E42;
text-align: center;
}
}
.circle1{
width: 34%;
padding-bottom: 34%;
height: 0;
background: #000E42;
border-radius: 50%;
position: absolute;
border:1px solid #77E2FF;
top: 50%;
left: 50%;
margin-top: -17%;
margin-left: -17%;
z-index: 1;
.businessStatistics{
flex-direction: column;
align-items: center;
box-sizing: border-box;
height: 2.58rem;
padding:.14rem .24rem;
position: relative;
.flex-1 {
font-size: .12rem;
}
.circle{
width: 1.25rem;
height: 1.25rem;
line-height: 1.25rem;
background: #30DDF4;
border: 1px solid #30DDF4;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 2;
font-size:.18rem;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
color:#000E42;
text-align: center;
}
.circleOut{
width: 1.6rem;
height: 1.6rem;
background: #000E42;
z-index: 1;
}
.box{
display: inline-block;
width: 2rem;
height: .6rem;
text-align: center;
background:rgba(144,224,255,0.15);
color: #fff;
border:1px solid #77E2FF;
margin-bottom: .2rem;
&:nth-of-type(2n){
margin-left: .2rem;
}
.box1,.box2,.box3,.box4{
display: inline-block;
width: calc(50% - 50px);
padding: 0 20px;
text-align: center;
height: calc(50% - 8px);
line-height: 50px;
background:rgba(144,224,255,0.15);
color: #fff;
position: absolute;
border:1px solid #77E2FF;
.boxTitle{
font-size:16px;
font-family:PingFang-SC-Medium,PingFang-SC;
font-weight:500;
color:#fff;
height: 40px;
span{
font-size:12px;
}
.boxTitle{
font-size:.16rem;
font-family:PingFang-SC-Medium,PingFang-SC;
font-weight:500;
color:#fff;
line-height: 2;
span{
font-size:.12rem;
}
.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{
width: 18px;
height: 100%;
background: #000E42;
position: absolute;
top:0;
left: calc(50% - 8px);
z-index: 1;
.boxValue{
font-size:.24rem;
font-family:ZhenyanGB-Regular,ZhenyanGB;
font-weight:400;
color:#30DDF4;
}
}
}
.bottomBox{
height: 26.5%;
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}
.horizontal{
width: 1.7rem;
height: .2rem;
background: #000E42;
position: absolute;
top:.76rem;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.horizontal1 {
top:1.58rem;
}
.vertical{
width: .2rem;
height: 1.62rem;
background: #000E42;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
.pl-8 {
padding-left: .8rem;
}
.pr-7 {
padding-right: .7rem;
}
.pl-2 {
padding-left: .2rem;
}
.pr-2 {
padding-right: .2rem;
}
}
}
src/assets/style/client.scss
View file @ 4055900c
.client{
width: 100%;
height: 100%;
background: #000E42;
.businessStatistics{
width: 90%;
height: 58%;
......
src/assets/style/mainPage.scss
View file @ 4055900c
......@@ -2,7 +2,6 @@
.mainPage{
width: 100%;
height: 100vh;
background: #000E42;
position: relative;
.mapChina{
width: 8rem;
......
src/assets/style/operation.scss
View file @ 4055900c
.operation{
width: 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{
width: 90%;
height:calc(100% - 20px);
margin: 20px auto;
background:rgba(13,30,91,1);
box-shadow:0px 4px 8px 0px rgba(10,18,35,0.5);
border:1px solid rgba(48,221,244,0.5);
width: 100%;
height:100%;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
font-size: .12rem;
text-align: center;
padding: 0 .24rem;
box-sizing: border-box;
.listTitleBox{
width: 100%;
height: 20px;
height: .32rem;
display: inline-flex;
.listTitle {
height: 20px;
line-height: 20px;
font-size:12px;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
height: .32rem;
line-height: .32rem;
color:rgba(48,221,244,1);
flex-grow:1;
text-align: center;
}
}
ul{
......@@ -29,18 +44,15 @@
padding: 0;
li{
width: 100%;
height: 20px;
height: .2rem;
display: inline-flex;
margin: 10px 0;
margin: .04rem 0;
background:rgba(13,30,91,1);
div{
height:20px;
line-height:20px;
font-size:12px;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
height:.2rem;
line-height:.2rem;
color:rgba(255,255,255,1);
flex-grow:1;
text-align: center;
}
}
}
......
src/assets/style/organization.scss
View file @ 4055900c
.organization{
width: 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{
width: calc(100% - .48rem);
height: calc(100% - .44rem);
padding: .24rem;
position: relative;
.architectureBlock{
font-family: PingFang-SC-Bold;
font-size: .14rem;
color: #000E42;
text-align: center;
width: 1.62rem;
height: 1.4rem;
// 组织架构
.architecture{
width: calc(100% - .48rem);
height: calc(100% - .44rem);
padding: .24rem;
position: relative;
.architectureBlock{
font-family: PingFang-SC-Bold;
font-size: .14rem;
color: #000E42;
text-align: center;
width: 1.62rem;
height: 1.4rem;
position: absolute;
left: 50%;
top: 50%;
margin-left: -.81rem;
margin-top: -.7rem;
background: url("~@/assets/img/ring.png");
background-size: 100% 100%;
.top{
width: 1.28rem;
height: .28rem;
line-height: .28rem;
background: #30DDF4;
border-radius: 2px;
position: absolute;
top: -35%;
left: 50%;
top: 50%;
margin-left: -.81rem;
margin-top: -.7rem;
background: url("~@/assets/img/ring.png");
background-size: 100% 100%;
.top{
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;
position: absolute;
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;
}
margin-bottom: .28rem;
}
.left {
left: -80%;
li {
&:nth-of-type(2n) {
margin-left: -.24rem;
}
}
.left {
left: -80%;
li {
&:nth-of-type(2n) {
margin-left: -.24rem;
}
}
.right{
left: 100%;
li {
&:nth-of-type(2n) {
margin-left: .24rem;
}
}
.right{
left: 100%;
li {
&:nth-of-type(2n) {
margin-left: .24rem;
}
}
}
}
// 人员分布
.peopleContent {
padding: .24rem;
.select-box {
justify-content: center;
font-size: .12rem;
}
.jobDistribution {
width: 100%;
height: 2.14rem;
}
}
// 人员分布
.peopleContent {
padding: .24rem;
.select-box {
justify-content: center;
font-size: .12rem;
}
// 人才招聘
.sum-item {
text-align: center;
font-size: .16rem;
color: #fff;
.num {
margin-left: .16rem;
font-family: ZhenyanGB-Regular,ZhenyanGB;
color: #30DDF4;
strong {
font-size: .24rem;
}
}
.jobDistribution {
width: 100%;
height: 2.14rem;
}
.ballBox{
.ball {
width: 100%;
p{
font-size:.12rem;
font-family:PingFang-SC-Medium,PingFang-SC;
color: #30DDF4;
text-align: center;
margin: 4px 0;
}
}
// 人才招聘
.sum-item {
text-align: center;
font-size: .16rem;
color: #fff;
.num {
margin-left: .16rem;
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{
.content{
height: 6.24rem;
}
.search-box {
margin: .2rem auto;
margin: 0 auto;
width: 60%;
.search {
width: 100%;
margin-left: .2rem;
}
}
.bottomBox{
height: 3.02rem;
background: url("~@/assets/img/c-border-b.png");
background-size: 100% 100%;
}
}
.rightBlock {
.rightBox,.peopleCounting {
height: 4.62rem;
background: url("~@/assets/img/r-border-1.png");
background-size: 100% 100%;
margin-bottom: .2rem;
.lastMonthPerformance {
width: 100%;
height: 3.6rem;
}
// 人数统计
.peopleCounting {
height: 4.62rem;
background: url("~@/assets/img/r-border-1.png");
background-size: 100% 100%;
margin-bottom: .2rem;
.lastMonthPerformance {
width: 100%;
height: 3.6rem;
}
}
}
src/assets/style/public.scss
View file @ 4055900c
......@@ -47,9 +47,9 @@ $prefix: d2;
.bg {
// background-color: #000E42;
// background-size: cover;
// background-position: center center;
background-color: $color-bg;
background-size: cover;
background-position: center center;
}
.dv-loading {
color: #fff;
......@@ -84,20 +84,20 @@ ul{list-style: none; padding: 0}
margin: 0 auto;
}
.subtitle{
height:16px;
font-size:16px;
height:.16rem;
font-size:.16rem;
font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold;
color:rgba(255,255,255,1);
line-height:16px;
line-height:.16rem;
.diamond{
display: inline-block;
width:6px;
height:6px;
width:.06rem;
height:.06rem;
background: $color-primary;
transform:rotate(45deg);
margin-right: 8px;
vertical-align: 3px;
margin-right: .08rem;
vertical-align: .03rem;
}
}
.px-24 {
......@@ -105,14 +105,41 @@ ul{list-style: none; padding: 0}
}
.height100{height: 100%}
.height21{height: 2.1rem}
.heightCut42 {height: calc(100% - 42px);}
.heightCut62 {height: calc(100% - 62px);}
.heightCut44 {height: calc(100% - .44rem);}
.heightCut68 {height: calc(100% - 0.68rem);}
.section{
height: calc(100% - 1.4rem);
padding:.08rem .48rem .4rem;
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{
width: 5.02rem;
}
......@@ -148,7 +175,7 @@ ul{list-style: none; padding: 0}
}
.search-box {
margin: .2rem;
padding: .2rem;
}
// 选择框 搜索框样式
.el-input__inner{
......
src/assets/style/unit/color.scss
View file @ 4055900c
......@@ -20,4 +20,4 @@ $color-border-3: #EBEEF5;
$color-border-4: #F2F6FC;
// 背景
$color-bg: #f8f8f9;
$color-bg: #000E42;;
src/components/HeaderLayout/index.vue
View file @ 4055900c
......@@ -45,7 +45,7 @@ export default {
yData: [70, 90, 110, 108, 100, 110, 130, 140, 150, 120, 110, 98],
colors: ['RGBA(27, 157, 247, 1)', 'RGBA(30, 201, 251, 1)']
},
buttenList: ['概况', '运营', '商机', '客户', '组织人才', '管理端']
buttenList: ['概况', '运营', '商机', '客户', '组织人才']
}
},
filters: {
......
src/views/content/organization/components/lastMonthPerformance.vue → src/components/echarts/barChart.vue
View file @ 4055900c
......@@ -15,14 +15,11 @@ export default {
dataObj: {},
option: {},
chart: null,
lengendColor: ['#00E8FF', '#746ef8', '#F8E71C', '#7ED321', '#FF663B'],
clickNum: [1, 1, 1, 1, 1]
}
},
props: ['message', 'idstr', 'performActive'],
props: ['message', 'idstr'],
mounted () {
console.log(this.performActive)
this.drawLine()
},
methods: {
......@@ -33,13 +30,22 @@ export default {
// 清空图表
vm.chart.clear()
vm.option = {
grid: {
top: '15%',
left: '10%',
right: '10%',
bottom: '30%'
},
xAxis: [
{
type: 'category',
data: ['客户营销', '解决方案', '智能制造', '生态合作', 'IT服务'],
data: vm.message.xAxis,
axisPointer: {
type: 'shadow'
},
axisLabel: {
rotate: 30
},
axisLine: {
lineStyle: {
color: '#FFF'
......@@ -47,43 +53,39 @@ export default {
}
}
],
yAxis: [
{
type: 'value',
name: vm.performActive === 1 ? '分数' : '部门',
min: 0,
max: 250,
interval: 50,
axisLine: {
lineStyle: {
color: '#FFF'
}
yAxis: {
type: 'value',
name: '金额 ：万元',
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: 'rgba(255,255,255,.3)'
}
},
axisLine: {
lineStyle: {
color: '#FFF'
}
}
],
grid: {
top: '20%',
left: '10%',
right: '10%',
bottom: '5%',
width: '80%', // 图例宽度
height: '70%' // 图例高度
},
series: [
{
type: 'bar',
barWidth: '50%',
barWidth: '30%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 0, color: '#30DDF4' },
{ offset: 1, color: '#001873' }
])
color: '#30DDF4',
barBorderRadius: [20, 20, 20, 20]
},
data: [23.2, 76.7, 135.6, 162.2, 32.6]
data: vm.message.data
}
]
}
vm.drawBar()
// window.addEventListener("resize",()=>{
// chart.resize();
// });
},
drawBar () {
// 绘制图表
......@@ -98,12 +100,12 @@ export default {
}
},
watch: {
performActive: function (val) {
console.log(val)
message: function () {
const vm = this
setTimeout(function () {
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 {
// 清空图表
vm.chart.clear()
vm.option = {
color: ['#30DDF4', '#D6FFBA', '#E23AA2', '#F5A623'],
legend: {
data: vm.message.legend, // ['新签预算', '新签实际', '完成比'],
textStyle: {
color: '#ffffff'
}
},
tooltip: {
transitionDuration: 0,
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
formatter: '{a}:<br/>{b}: {c} ({d}%)'
},
color: ['#30DDF4', '#E23AA2', '#F5A623', '#D6FFBA', '#9FFED7'],
legend: {
orient: 'vertical',
data: ['技术岗', '销售岗', '管理岗', '职能岗', '其他岗'],
right: 20,
bottom: 10,
textStyle: {
color: '#ffffff'
},
icon: 'circle', // 这个字段控制形状类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
itemWidth: 10, // 设置宽度
itemHeight: 4, // 设置高度
itemGap: 10 // 设置间距
grid: {
top: '20%',
left: '10%',
right: '10%',
bottom: '15%'
},
series: [
xAxis: [
{
name: '访问来源',
type: 'pie',
radius: ['40%', '60%'],
center: ['50%', '50%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'left'
type: 'category',
data: vm.message.xAxis, // ['4中心', '5中心', '6中心', '7中心', '8中心'],
axisPointer: {
type: 'shadow'
},
emphasis: { // hover效果，已经关闭
label: {
show: false,
fontSize: '30',
fontWeight: 'bold'
axisLine: {
lineStyle: {
color: '#FFF'
}
}
}
],
yAxis: [
{
type: 'value',
name: vm.message.yAxis[0], // '单位：万元',
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: 'rgba(255,255,255,.3)'
}
},
labelLine: {
show: false
axisLine: {
lineStyle: {
color: '#FFF'
}
}
},
{
type: 'value',
name: vm.message.yAxis[1], // '完成比：%',
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: 'rgba(255,255,255,.3)'
}
},
data: [
{ value: 335, name: '技术岗' },
{ value: 310, name: '销售岗' },
{ value: 234, name: '管理岗' },
{ value: 135, name: '职能岗' },
{ value: 1548, name: '其他岗' }
]
axisLine: {
lineStyle: {
color: '#FFF'
}
}
}
]
],
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()
// window.addEventListener("resize",()=>{
// chart.resize();
......
src/views/content/business/components/funnel.vue → src/components/echarts/funnel.vue
View file @ 4055900c
......@@ -30,39 +30,32 @@ export default {
// 清空图表
vm.chart.clear()
vm.option = {
color: ['#30DDF4', '#E23AA2', '#F5A623', '#D6FFBA'],
tooltip: {
transitionDuration: 0,
trigger: 'item',
formatter: '{a} <br/>{b} : {c}' // a对应系列名称,b对应数据项名称,c对应数据项值
formatter: '{b} : {c}' // a对应系列名称,b对应数据项名称,c对应数据项值
},
// toolbox: {
// feature: {
// dataView: { readOnly: false },
// restore: {},
// saveAsImage: {}
// }
// },
legend: {
textStyle: {
color: '#ffffff' // 图例文字颜色
color: '#fff' // 图例文字颜色
},
data: this.message[0].success
orient: 'vertical',
left: 20,
bottom: 10,
data: vm.message.legend
},
series: [
{
name: '漏斗图',
type: 'funnel',
left: '10%',
top: 60,
// x2: 80,
bottom: 60,
left: '30%',
top: 40,
bottom: 20,
width: '80%',
// height: {totalHeight} - y - y2,
min: 0,
max: 100,
minSize: '30%',
maxSize: '80%',
minSize: '10%',
maxSize: '70%',
sort: 'descending',
gap: 2,
label: {
......@@ -82,12 +75,7 @@ export default {
borderColor: '#fff',
borderWidth: 1
},
// emphasis: {
// label: {
// fontSize: 20
// }
// },
data: this.message[0].num
data: vm.message.data
}
]
}
......
src/views/content/operation/components/polyline.vue → src/components/echarts/lineChart.vue
View file @ 4055900c
......@@ -30,27 +30,48 @@ export default {
// 清空图表
vm.chart.clear()
vm.option = {
legend: {},
tooltip: {
transitionDuration: 0,
trigger: 'axis',
showContent: false
color: ['#30DDF4', '#E23AA2', '#F5A623', '#D6FFBA'],
legend: {
data: vm.message.legend,
right: 20,
top: 10,
textStyle: {
color: '#ffffff'
},
icon: 'circle' // 这个字段控制形状类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
},
dataset: {
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]
]
grid: {
top: '20%',
left: '10%',
bottom: '10%'
},
xAxis: { type: 'category' },
yAxis: { gridIndex: 0 },
series: [
{ type: 'line', smooth: true, seriesLayoutBy: 'row' },
{ 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()
// window.addEventListener("resize",()=>{
......
src/views/content/business/components/barPolyline.vue → src/components/echarts/negativeBarChart.vue
View file @ 4055900c
......@@ -29,85 +29,77 @@ export default {
vm.chart = echarts.init(document.getElementById(vm.idstr))
// 清空图表
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 = {
color: ['#9FFED7'],
tooltip: {
transitionDuration: 0, // 提示框浮层的移动动画过渡时间，单位是s，设置0的时候会紧跟鼠标移动
trigger: 'axis',
axisPointer: {
type: 'cross'
legend: {
data: vm.message.legend,
textStyle: {
color: '#ffffff'
}
},
grid: {
right: '20%',
height: 135,
top: 40
},
legend: {
padding: 18,
textStyle: {
color: '#ffffff' // 图例文字颜色
},
orient: 'vertical', // 垂直显示
y: 'center', // 延Y轴居中
x: 'right', // 居右显示
data: this.message.title
top: '15%',
left: '10%',
right: '10%',
bottom: '15%'
},
xAxis: [
{
type: 'category',
data: vm.message.xAxis,
axisPointer: {
type: 'shadow'
},
axisLine: {
lineStyle: {
color: '#675bba'
color: '#FFF'
}
},
axisTick: {
alignWithLabel: true
},
data: this.message.column
}
}
],
yAxis: [{
yAxis: {
type: 'value',
// min: 0,
// max: this.message.max + 500,
position: 'left',
axisLine: {
name: '金额 ：万元',
splitLine: {
show: true,
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: {
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()
// window.addEventListener("resize",()=>{
// chart.resize();
......
src/views/content/organization/components/pie.vue → src/components/echarts/pieChart.vue
View file @ 4055900c
......@@ -38,7 +38,7 @@ export default {
color: ['#30DDF4', '#E23AA2', '#F5A623', '#D6FFBA', '#9FFED7'],
legend: {
orient: 'vertical',
data: ['技术岗', '销售岗', '管理岗', '职能岗', '其他岗'],
data: vm.message.legend,
right: 20,
bottom: 10,
textStyle: {
......@@ -52,20 +52,15 @@ export default {
series: [
{
type: 'pie',
radius: ['30%', '70%'],
radius: ['40%', '70%'],
center: ['50%', '50%'],
// roseType: 'area', // radius
label: {
show: false
},
data: [
{ value: 335, name: '技术岗' },
{ value: 310, name: '销售岗' },
{ value: 234, name: '管理岗' },
{ value: 135, name: '职能岗' },
{ value: 548, name: '其他岗' }
]
labelLine: {
show: false
},
data: vm.message.data
}
]
}
......
src/views/content/business/components/scatterPlot.vue → src/components/echarts/waterBallChart.vue
View file @ 4055900c
......@@ -3,12 +3,13 @@
</template>
<script>
import 'echarts-liquidfill/src/liquidFill.js'
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
data () {
return {
......@@ -25,78 +26,75 @@ export default {
methods: {
drawLine () {
const vm = this
const bars = []
this.message.title.forEach(e => {
bars.push({ type: 'bar' })
})
const source = []
const x = Object.keys(this.message.data)
// 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实例
vm.chart = echarts.init(document.getElementById(vm.idstr))
// 清空图表
vm.chart.clear()
vm.option = {
color: ['#30DDF4', '#E23AA2', '#F5A623', '#D6FFBA'],
grid: {
height: 135,
top: 40
},
legend: {
show: true,
// 图表主标题
// 提示框组件
tooltip: {
trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
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: {},
dataset: {
source: source
},
xAxis: {
type: 'category',
axisLine: {
series: [{
type: 'liquidFill',
name: vm.message.name, // 系列名称，用于tooltip的显示，legend 的图例筛选
radius: '80%', // 水球图的半径
center: ['50%', '50%'], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
shape: 'circle',
phase: 0, // 波的相位弧度 不设置 默认自动
direction: 'right', // 波浪移动的速度 两个参数 left 从右往左 right 从左往右
outline: {
show: true,
lineStyle: {
color: '#675bba'
borderDistance: 0, // 边框线与图表的距离 数字
itemStyle: {
opacity: 1, // 边框的透明度 默认为 1
borderWidth: 2, // 边框的宽度
shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
shadowColor: '#fff', // 边框的阴影颜色,
borderColor: '#30DDF4' // 边框颜色
}
}
},
yAxis: {
// data: ['10', '20', '30', '40', '50', '60', '70'],
axisLine: {
show: true,
lineStyle: {
color: '#675bba'
},
// 图形样式
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{ offset: 0, color: '#90E0FF' },
{ 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
}
}
},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: bars
},
// 图形的高亮样式
emphasis: {
itemStyle: {
opacity: 0.8 // 鼠标经过波浪颜色的透明度
}
},
data: vm.message.data// 系列中的数据内容数组
}]
}
vm.drawBar()
// window.addEventListener("resize",()=>{
......@@ -121,7 +119,6 @@ export default {
setTimeout(function () {
vm.drawLine()
}, 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>
<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>
<script>
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
import negativeBarChart from '@/components/echarts/negativeBarChart' // 饼图
export default {
components: { negativeBarChart },
data () {
return {
dataObj: {},
option: {},
chart: null,
clickNum: [1, 1, 1, 1, 1]
selectYear: '2020',
yearList: ['2021', '2020', '2019', '2018', '2017'],
selectType: '总裁办',
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 () {
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 lang="scss" scoped>
</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>
<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="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>
<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>{{item.name}}</div>
<div>{{item.num}}</div>
......@@ -20,11 +30,38 @@
export default {
data () {
return {
title: ['排名', '吧名', '完成数额', '完成比'],
list: this.message
selectYear: '2020',
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 () {
},
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 @@
<headerLayout></headerLayout>
<div class="section">
<div class="leftBlock">
<div class="topBox height100">
<div class="title">流水利润完成比</div>
<div class="line"></div>
<doubleHistogram :message="profitChart" idstr="profitChart" class="profitChart heightCut42"></doubleHistogram>
<div class="boxHeight-3">
<div class="title">预算完成比</div>
<budgetRatio class="heightCut44" />
</div>
<div class="bottomBox height100">
<div class="boxHeight-3 mt-2">
<div class="title">合同金额</div>
<div class="line"></div>
<pie :message="contractAmount" idstr="contractAmount" class="contractAmount heightCut42"></pie>
<contractAmount class="heightCut44"/>
</div>
<div class="bottomBox height100">
<div class="title">年度营收款</div>
<div class="line"></div>
<pie :message="annualRevenue" idstr="annualRevenue" class="annualRevenue heightCut42"></pie>
<div class="boxHeight-3 mt-2">
<div class="title">项目收入</div>
<productIncome class="heightCut44"/>
</div>
</div>
<div class="centerBlock">
<div class="topBox height100">
<div class="centerBoxHeight-3">
<div class="title">回款额</div>
<div class="line"></div>
<pie :message="refundAmount" idstr="refundAmount" class="refundAmount heightCut42"></pie>
<lineChart :message="refundAmountLine" idstr="refundAmountLine" class="refundAmountLine heightCut42"></lineChart>
<receiptStatistics class="heightCut44"/>
</div>
<div class="bottomBox height100">
<div class="title">营业额统计</div>
<div class="line"></div>
<turnoverStatistics :message="turnoverStatistics" idstr="turnoverStatistics" class="turnoverStatistics heightCut42"></turnoverStatistics>
<div class="centerBoxHeight-3 mt-2">
<div class="title">营收统计</div>
<revenueStatistics class="heightCut44" />
</div>
<div class="bottomBox height100">
<div class="centerBoxHeight-3 mt-2">
<div class="title">现金流</div>
<div class="line"></div>
<cashFlow :message="cashFlow" idstr="cashFlow" class="cashFlow heightCut42"></cashFlow>
<cashFlow class="heightCut44" />
</div>
</div>
<div class="rightBlock">
<div class="topBox height100">
<knowledgeGraph class="knowledgeGraph height100"></knowledgeGraph>
<div class="boxHeight-3">
<div class="title">应收账龄分析</div>
<agingAnalysis class="heightCut44" />
</div>
<div class="bottomBox height100">
<div class="title">营收排行</div>
<div class="line"></div>
<revenueRanking :message="revenueRanking" class="revenueRanking heightCut62"></revenueRanking>
<div class="boxHeight-3 mt-2">
<div class="title">费用统计</div>
<totalExpenses class="heightCut44" />
</div>
<div class="bottomBox height100">
<div class="title">资产管理</div>
<div class="line"></div>
<assetManagement :message="assetManagement" class="assetManagement heightCut62"></assetManagement>
<div class="boxHeight-3 mt-2">
<div class="title">营收排行</div>
<revenueRanking class="heightCut44"></revenueRanking>
</div>
</div>
</div>
......@@ -58,64 +50,20 @@
<script>
import headerLayout from '@/components/headerLayout/index' // 公共头部
import doubleHistogram from './components/doubleHistogram' // 双柱状图
import pie from './components/pie' // 饼图
import lineChart from './components/polyline' // 折线图
import turnoverStatistics from './components/turnoverStatistics' // 营业额统计
import cashFlow from './components/cashFlow' // 现金流
import budgetRatio from './components/budgetRatio' // 预算完成比
import contractAmount from './components/contractAmount' // 合同金额
import productIncome from './components/productIncome' // 项目收入
import agingAnalysis from './components/agingAnalysis' // 账龄分析
import totalExpenses from './components/totalExpenses' // 费用统计
import revenueRanking from './components/revenueRanking' // 营收排行
import assetManagement from './components/assetManagement' // 资产管理
import knowledgeGraph from '../../system/index/components/knowledgeGraph'// 知识图谱
import revenueStatistics from './components/revenueStatistics' // 营业额统计
import cashFlow from './components/cashFlow' // 现金流
import receiptStatistics from './components/receiptStatistics' // 回款统计
export default {
components: { headerLayout, doubleHistogram, pie, lineChart, turnoverStatistics, cashFlow, knowledgeGraph, revenueRanking, assetManagement },
components: { headerLayout, budgetRatio, contractAmount, productIncome, agingAnalysis, totalExpenses, receiptStatistics, revenueStatistics, cashFlow, revenueRanking },
data () {
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 () {
......@@ -127,18 +75,4 @@ export default {
<style lang="scss" scoped>
@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>
src/views/content/organization/page.vue
View file @ 4055900c
......@@ -3,7 +3,7 @@
<headerLayout></headerLayout>
<div class="section">
<div class="leftBlock">
<div class="leftBox">
<div class="boxHeight-3">
<div class="title">组织架构</div>
<div class="architecture">
<div class="architectureBlock">
......@@ -21,7 +21,7 @@
</div>
</div>
</div>
<div class="leftBox">
<div class="boxHeight-3 mt-2">
<div class="title">人员分布</div>
<div class="peopleContent">
<div class="select-box">
......@@ -33,10 +33,10 @@
<span class="tab-button" @click="distributeActive=5" :class="{'is-active':distributeActive=== 5 }">司龄分布</span>
</div>
</div>
<pie :message="jobDistribution" idstr="jobDistribution" class="jobDistribution heightCut42"></pie>
<pieChart :message="jobDistribution" idstr="jobDistribution" class="jobDistribution heightCut42"></pieChart>
</div>
</div>
<div class="leftBox">
<div class="boxHeight-3 mt-2">
<div class="title">人才招聘</div>
<div class="px-24">
<div class="sum-box d-flex">
......@@ -84,25 +84,25 @@
</div>
<staffInfo :searchId="input"/>
</div>
<div class="bottomBox">
<div class="centerBoxHeight-3 mt-2">
<div class="title">入/离职统计</div>
<lineChart :message="refundAmountLine" idstr="refundAmountLine" class="refundAmountLine height21"></lineChart>
</div>
</div>
<div class="rightBlock">
<div class="rightBox">
<div class="boxHeight-2">
<div class="title">上月绩效</div>
<div class="px-24">
<div class="px-24 heightCut68">
<div class="select-box">
<div class="tab-chart">
<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>
</div>
</div>
<lastMonthPerformance :performActive="performActive" :message="{}" idstr="lastMonthPerformance" class="lastMonthPerformance"></lastMonthPerformance>
<barChart :message="dataList" idstr="lastMonthPerformance" class="heightCut44"></barChart>
</div>
</div>
<peopleCounting class="peopleCounting"></peopleCounting>
<peopleCounting class="peopleCounting mt-2"></peopleCounting>
</div>
</div>
</d2-container>
......@@ -110,15 +110,15 @@
<script>
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 pie from './components/pie' // 岗位分布
import waterBall from './components/waterBall' // 岗位分布
import lineChart from './components/polyline' // 折线图
import lineChart from '@/components/echarts/lineChart' // 折线图
import staffInfo from './components/staffInfo'
export default {
components: { headerLayout, pie, waterBall, lineChart, peopleCounting, lastMonthPerformance, staffInfo },
components: { headerLayout, pieChart, barChart, waterBall, lineChart, peopleCounting, staffInfo },
data () {
return {
options: [
......@@ -130,15 +130,50 @@ export default {
label: '证书名称'
}
],
dataList: {
xAxis: ['运营管理中心', '解决方案中心', '智能制造中心', '生态合作中心', '客户运营中心'],
data: [123.2, 76.7, 135.6, 162.2, 32.6]
},
performActive: 1,
distributeActive: 1,
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: {},
ball1: {},
ball2: {},
ball3: {},
refundAmountLine: {}
ball3: {}
}
},
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