Commit dd078b2c authored by 乐宝呗666's avatar 乐宝呗666

添加各个的详情页面

parent db4f0034
......@@ -29,7 +29,7 @@ $font-sizes: (
width: 100%;
}
.h-100 {
height: 100%;
height: calc(100% - 0.01rem);
}
//flex
......@@ -167,4 +167,3 @@ $sizes: (0, 5, 10, 15, 20);
height: 5px;
}
......@@ -113,6 +113,10 @@ ul{list-style: none; padding: 0}
.px-24 {
padding: .24rem;
}
.plr-2 {
padding-left: .2rem;
padding-right: .2rem;
}
.height100{height: 100%}
.height21{height: 2.1rem}
.heightCut44 {height: calc(100% - .44rem);}
......
......@@ -115,7 +115,6 @@ export default {
const vm = this
this.nowDate = new Date()
this.week = new Date().getDay()
console.log(this.week)
setTimeout(function () {
vm.getDate()
}, 1000)
......
<template>
<div :id="idstr"></div>
<div class="wrapper">
<div class="back text-right" @click="goBack" v-if="message.parent">&lt; 返回</div>
<div :id="idstr" class="h-100"></div>
</div>
</template>
<script>
......@@ -8,13 +11,12 @@ export default {
// mixins: [echartMixins],
data () {
return {
dataObj: {},
recordList: [],
option: {},
chart: null,
clickNum: [1, 1, 1, 1, 1]
chart: null
}
},
props: ['message', 'idstr'],
props: ['message', 'idstr', 'isShow'],
mounted () {
this.drawLine()
},
......@@ -94,9 +96,23 @@ export default {
vm.chart.setOption(vm.option)
vm.eventList()
},
goBack () {
if (this.recordList.length) {
const popItem = this.recordList.pop()
this.$emit('downData', popItem.parent)
} else {
this.$emit('update:isShow', false)
}
},
eventList () {
const vm = this
vm.chart.off('click')
vm.chart.on('click', function (params) {
if (params.data.isLeaf) return
if (params.data.parent === undefined) return
vm.recordList.push({ name: params.name, parent: params.data.parent })
console.log(vm.recordList)
vm.$emit('downData', params.name)
})
}
},
......@@ -114,6 +130,17 @@ export default {
}
</script>
<style lang="less">
<style lang="scss" scoped>
.wrapper{
position: relative;
.back {
position: absolute;
top: 0;
right: 0.2rem;
color: #fff;
font-size: .12rem;
z-index: 1;
cursor: pointer;
}
}
</style>
<template>
<div :id="idstr"></div>
<div class="wrapper">
<div class="back text-right" @click="goBack" v-if="message.parent">&lt; 返回</div>
<div :id="idstr" class="h-100"></div>
</div>
</template>
<script>
export default {
data () {
return {
dataObj: {},
recordList: [],
option: {},
chart: null,
clickNum: [1, 1, 1, 1, 1]
chart: null
}
},
props: ['message', 'idstr'],
......@@ -26,7 +28,7 @@ export default {
vm.option = {
color: ['#30DDF4', '#D6FFBA', '#E23AA2', '#F5A623'],
legend: {
data: vm.message.legend, // ['新签预算', '新签实际', '完成比'],
data: vm.message.legend,
textStyle: {
color: '#ffffff'
}
......@@ -37,18 +39,21 @@ export default {
formatter: '{a}:<br/>{b}: {c} ({d}%)'
},
grid: {
top: '20%',
top: '25%',
left: '10%',
right: '10%',
bottom: '15%'
bottom: '30%'
},
xAxis: [
{
type: 'category',
data: vm.message.xAxis, // ['4中心', '5中心', '6中心', '7中心', '8中心'],
data: vm.message.xAxis,
axisPointer: {
type: 'shadow'
},
axisLabel: {
rotate: 30
},
axisLine: {
lineStyle: {
color: '#FFF'
......@@ -59,7 +64,7 @@ export default {
yAxis: [
{
type: 'value',
name: vm.message.yAxis[0], // '单位:万元',
name: vm.message.yAxis[0],
splitLine: {
show: true,
lineStyle: {
......@@ -75,7 +80,7 @@ export default {
},
{
type: 'value',
name: vm.message.yAxis[1], // '完成比:%',
name: vm.message.yAxis[1],
splitLine: {
show: true,
lineStyle: {
......@@ -91,46 +96,6 @@ export default {
}
],
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()
......@@ -144,9 +109,22 @@ export default {
vm.chart.setOption(vm.option)
vm.eventList()
},
goBack () {
if (this.recordList.length) {
const popItem = this.recordList.pop()
this.$emit('downData', popItem.parent)
}
},
eventList () {
const vm = this
vm.chart.off('click')
vm.chart.on('click', function (params) {
console.log(params)
if (params.data.isLeaf) return
if (params.data.parent === undefined) return
vm.recordList.push({ name: params.name, parent: params.data.parent })
console.log(vm.recordList)
vm.$emit('downData', params.name)
})
}
},
......@@ -164,6 +142,17 @@ export default {
}
</script>
<style lang="less">
<style lang="scss" scoped>
.wrapper{
position: relative;
.back {
position: absolute;
top: 0;
right: 0.24rem;
color: #fff;
font-size: .12rem;
z-index: 1;
cursor: pointer;
}
}
</style>
......@@ -98,6 +98,6 @@ export default {
}
</script>
<style lang="less">
<style lang="scss" scoped>
</style>
......@@ -24,47 +24,62 @@ export default {
{
id: '0',
name: '群智合',
symbolSize: 19.12381,
symbolSize: 50,
value: 28.685715,
category: 0,
itemStyle: {
color: '#30DDF4'
},
label: {
position: 'inside'
}
},
{
id: '1',
name: '中行',
symbolSize: 15.6666666666666665,
symbolSize: 40,
value: 4,
category: 0,
itemStyle: {
color: '#4f19c7'
},
label: {
fontSize: 12,
position: 'inside'
}
},
{
id: '2',
name: '新航城',
symbolSize: 15.323809333333333,
symbolSize: 40,
value: 9.485714,
category: 1,
itemStyle: {
color: '#c71969'
},
label: {
fontSize: 12,
position: 'inside'
}
},
{
id: '3',
name: '科技局',
symbolSize: 15.323809333333333,
symbolSize: 40,
value: 9.485714,
category: 1,
itemStyle: {
color: '#1984c7'
},
label: {
fontSize: 12,
position: 'inside'
}
},
{
id: '4',
name: '报表项目',
symbolSize: 10,
symbolSize: 20,
value: 4,
category: 0,
itemStyle: {
......@@ -74,7 +89,7 @@ export default {
{
id: '5',
name: '知识图谱项目',
symbolSize: 10,
symbolSize: 20,
value: 4,
category: 0,
itemStyle: {
......@@ -84,7 +99,7 @@ export default {
{
id: '6',
name: '可视化项目',
symbolSize: 10,
symbolSize: 20,
value: 4,
category: 0,
itemStyle: {
......@@ -94,7 +109,7 @@ export default {
{
id: '7',
name: '可视化报表',
symbolSize: 6,
symbolSize: 10,
value: 4,
category: 0,
itemStyle: {
......@@ -124,7 +139,7 @@ export default {
{
id: '10',
name: '土地开发项目',
symbolSize: 10,
symbolSize: 20,
value: 4,
category: 0,
itemStyle: {
......@@ -134,7 +149,7 @@ export default {
{
id: '11',
name: '科技局大数据分析项目',
symbolSize: 10,
symbolSize: 20,
value: 4,
category: 0,
itemStyle: {
......@@ -144,7 +159,7 @@ export default {
{
id: '12',
name: '可视化大屏',
symbolSize: 6,
symbolSize: 10,
value: 4,
category: 0,
itemStyle: {
......@@ -181,7 +196,7 @@ export default {
}, {
id: '16',
name: 'PC端系统',
symbolSize: 6,
symbolSize: 10,
value: 4,
category: 0,
itemStyle: {
......@@ -369,6 +384,6 @@ export default {
}
</script>
<style lang="less">
<style lang="scss" scoped>
</style>
......@@ -27,8 +27,7 @@ export default {
color: ['#30DDF4', '#E23AA2', '#F5A623', '#D6FFBA'],
legend: {
data: vm.message.legend,
right: 20,
top: 10,
top: 0,
textStyle: {
color: '#ffffff'
},
......@@ -37,7 +36,7 @@ export default {
grid: {
top: '20%',
left: '10%',
bottom: '10%'
bottom: '15%'
},
xAxis: {
type: 'category',
......@@ -98,6 +97,6 @@ export default {
}
</script>
<style lang="less">
<style lang="scss" scoped>
</style>
......@@ -108,6 +108,6 @@ export default {
}
</script>
<style lang="less">
<style lang="scss" scoped>
</style>
......@@ -125,6 +125,6 @@ export default {
}
</script>
<style lang="less">
<style lang="scss" scoped>
</style>
<template>
<div :id="idstr"></div>
<div class="wrapper">
<div class="back text-right" @click="goBack" v-if="message.parent">&lt; 返回</div>
<div :id="idstr" class="h-100"></div>
</div>
</template>
<script>
export default {
data () {
return {
dataObj: {},
recordList: [],
option: {},
chart: null,
clickNum: [1, 1, 1, 1, 1]
chart: null
}
},
props: ['message', 'idstr'],
......@@ -69,9 +71,20 @@ export default {
vm.chart.setOption(vm.option)
vm.eventList()
},
goBack () {
if (this.recordList.length) {
const popItem = this.recordList.pop()
this.$emit('downData', popItem.parent)
}
},
eventList () {
const vm = this
vm.chart.off('click')
vm.chart.on('click', function (params) {
if (params.data.isLeaf) return
if (params.data.parent === undefined) return
vm.recordList.push({ name: params.name, parent: params.data.parent })
vm.$emit('downData', params.name)
})
}
},
......@@ -89,6 +102,18 @@ export default {
}
</script>
<style lang="less">
<style lang="scss" scoped>
.wrapper{
position: relative;
.back {
position: absolute;
top: .24rem;
right: .24rem;
color: #fff;
font-size: .12rem;
z-index: 1;
cursor: pointer;
}
}
</style>
......@@ -209,6 +209,6 @@ export default {
}
</script>
<style lang="less">
<style lang="scss" scoped>
</style>
......@@ -123,6 +123,6 @@ export default {
}
</script>
<style lang="less">
<style lang="scss" scoped>
</style>
......@@ -5,21 +5,27 @@ const meta = { auth: true }
// 首页-companyNews
export default [
{
path: '/companyNews',
path: '/companyNews', // 公司新闻
name: 'companyNews',
meta,
component: _import('system/index/components/companyNews')
},
{
path: '/newsDetail',
path: '/newsDetail', // 公司新闻详情
name: 'newsDetail',
meta,
component: _import('system/index/components/newsDetail')
},
{
path: '/orgDetail',
path: '/orgDetail', // 组织机构详情
name: 'orgDetail',
meta,
component: _import('content/organization/components/orgDetail')
},
{
path: '/enterpriseSize', // 企业规模详情
name: 'enterpriseSize',
meta,
component: _import('system/index/components/enterpriseSize')
}
]
This diff is collapsed.
......@@ -23,7 +23,7 @@
</template>
<script>
import pieChart from '@/components/echarts/pieChart' // 饼图
import pieChart from '@/components/echarts/pieChart' // 应收账龄分析饼图
export default {
components: { pieChart },
......
......@@ -10,12 +10,12 @@
</el-option>
</el-select>
</div>
<doubleYBarChart :message="dataList" idstr="budgetRatio" class="heightCut68"></doubleYBarChart>
<doubleYBarChart @downData="downData" :message="dataList" idstr="budgetRatio" class="heightCut68"></doubleYBarChart>
</div>
</template>
<script>
import doubleYBarChart from '@/components/echarts/doubleYBarChart' // 双柱加折线图
import doubleYBarChart from '@/components/echarts/doubleYBarChart' // 预算完成比 双柱加折线图
export default {
components: { doubleYBarChart },
......@@ -25,22 +25,43 @@ export default {
yearList: ['2021', '2020', '2019', '2018', '2017'],
dataList: {
legend: ['新签预算', '新签实际', '完成比'],
xAxis: ['4中心', '5中心', '6中心', '7中心', '8中心'],
xAxis: ['运营管理中心', '解决方案中心', '智能制造中心', '生态合作中心', '客户运营中心', 'XXXX中心'],
yAxis: ['单位:万元', '完成比:%'],
data: [
{
name: '新签预算',
type: 'bar',
data: [23.2, 25.6, 76.7, 135.6, 162.2]
data: [
{ value: 123.2, isLeaf: false, parent: '' },
{ value: 125.6, isLeaf: false, parent: '' },
{ value: 176.7, isLeaf: false, parent: '' },
{ value: 135.6, isLeaf: false, parent: '' },
{ value: 162.2, isLeaf: false, parent: '' },
{ value: 200, isLeaf: false, parent: '' }
]
}, {
name: '新签实际',
type: 'bar',
data: [13.2, 45.6, 76.7, 55.6, 62.2]
data: [
{ value: 83.2, isLeaf: false, parent: '' },
{ value: 75.6, isLeaf: false, parent: '' },
{ value: 86.7, isLeaf: false, parent: '' },
{ value: 85.6, isLeaf: false, parent: '' },
{ value: 62.2, isLeaf: false, parent: '' },
{ value: 90, isLeaf: false, parent: '' }
]
}, {
name: '完成比',
type: 'line',
yAxisIndex: 1,
data: [4.5, 6.3, 10.2, 20.3, 23.4]
data: [
{ value: 4.5, isLeaf: false, parent: '' },
{ value: 6.3, isLeaf: false, parent: '' },
{ value: 10.2, isLeaf: false, parent: '' },
{ value: 20.3, isLeaf: false, parent: '' },
{ value: 23.4, isLeaf: false, parent: '' },
{ value: 30.2, isLeaf: false, parent: '' }
]
}
]
}
......@@ -49,6 +70,145 @@ export default {
mounted () {
},
methods: {
downData (item) {
console.log('传来的值:', item)
setTimeout(() => {
if (!item) {
this.dataList = {
legend: ['新签预算', '新签实际', '完成比'],
xAxis: ['运营管理中心', '解决方案中心', '智能制造中心', '生态合作中心', '客户运营中心', 'XXXX中心'],
yAxis: ['单位:万元', '完成比:%'],
data: [
{
name: '新签预算',
type: 'bar',
data: [
{ value: 123.2, isLeaf: false, parent: '' },
{ value: 125.6, isLeaf: false, parent: '' },
{ value: 176.7, isLeaf: false, parent: '' },
{ value: 135.6, isLeaf: false, parent: '' },
{ value: 162.2, isLeaf: false, parent: '' },
{ value: 200, isLeaf: false, parent: '' }
]
}, {
name: '新签实际',
type: 'bar',
data: [
{ value: 83.2, isLeaf: false, parent: '' },
{ value: 75.6, isLeaf: false, parent: '' },
{ value: 86.7, isLeaf: false, parent: '' },
{ value: 85.6, isLeaf: false, parent: '' },
{ value: 62.2, isLeaf: false, parent: '' },
{ value: 90, isLeaf: false, parent: '' }
]
}, {
name: '完成比',
type: 'line',
yAxisIndex: 1,
data: [
{ value: 4.5, isLeaf: false, parent: '' },
{ value: 6.3, isLeaf: false, parent: '' },
{ value: 10.2, isLeaf: false, parent: '' },
{ value: 20.3, isLeaf: false, parent: '' },
{ value: 23.4, isLeaf: false, parent: '' },
{ value: 30.2, isLeaf: false, parent: '' }
]
}
]
}
}
if (item.indexOf('中心') !== -1) {
this.dataList = {
parent: item,
legend: ['新签预算', '新签实际', '完成比'],
xAxis: ['运营管理部门', '解决方案部门', '智能制造部门', '生态合作部门', '客户运营部门', 'XXXX部门'],
yAxis: ['单位:万元', '完成比:%'],
data: [
{
name: '新签预算',
type: 'bar',
data: [
{ value: 123.2, isLeaf: false, parent: item },
{ value: 125.6, isLeaf: false, parent: item },
{ value: 176.7, isLeaf: false, parent: item },
{ value: 135.6, isLeaf: false, parent: item },
{ value: 162.2, isLeaf: false, parent: item },
{ value: 200, isLeaf: false, parent: item }
]
}, {
name: '新签实际',
type: 'bar',
data: [
{ value: 83.2, isLeaf: false, parent: item },
{ value: 75.6, isLeaf: false, parent: item },
{ value: 86.7, isLeaf: false, parent: item },
{ value: 85.6, isLeaf: false, parent: item },
{ value: 62.2, isLeaf: false, parent: item },
{ value: 90, isLeaf: false, parent: item }
]
}, {
name: '完成比',
type: 'line',
yAxisIndex: 1,
data: [
{ value: 4.5, isLeaf: false, parent: item },
{ value: 6.3, isLeaf: false, parent: item },
{ value: 10.2, isLeaf: false, parent: item },
{ value: 20.3, isLeaf: false, parent: item },
{ value: 23.4, isLeaf: false, parent: item },
{ value: 30.2, isLeaf: false, parent: item }
]
}
]
}
}
if (item.indexOf('部门') !== -1) {
this.dataList = {
parent: item,
legend: ['新签预算', '新签实际', '完成比'],
xAxis: ['小小黄', '小小安', '小小圆', '小小静', '小小宝', 'XXXXXXX'],
yAxis: ['单位:万元', '完成比:%'],
data: [
{
name: '新签预算',
type: 'bar',
data: [
{ value: 123.2, isLeaf: true, parent: item },
{ value: 125.6, isLeaf: true, parent: item },
{ value: 176.7, isLeaf: true, parent: item },
{ value: 135.6, isLeaf: true, parent: item },
{ value: 162.2, isLeaf: true, parent: item },
{ value: 200, isLeaf: true, parent: item }
]
}, {
name: '新签实际',
type: 'bar',
data: [
{ value: 83.2, isLeaf: true, parent: item },
{ value: 75.6, isLeaf: true, parent: item },
{ value: 86.7, isLeaf: true, parent: item },
{ value: 85.6, isLeaf: true, parent: item },
{ value: 62.2, isLeaf: true, parent: item },
{ value: 90, isLeaf: true, parent: item }
]
}, {
name: '完成比',
type: 'line',
yAxisIndex: 1,
data: [
{ value: 4.5, isLeaf: true, parent: item },
{ value: 6.3, isLeaf: true, parent: item },
{ value: 10.2, isLeaf: true, parent: item },
{ value: 20.3, isLeaf: true, parent: item },
{ value: 23.4, isLeaf: true, parent: item },
{ value: 30.2, isLeaf: true, parent: item }
]
}
]
}
}
}, 0)
}
}
}
</script>
......
......@@ -23,7 +23,7 @@
</template>
<script>
import pieChart from '@/components/echarts/pieChart' // 饼图
import pieChart from '@/components/echarts/pieChart' // 合同金额 饼图
export default {
components: { pieChart },
......
......@@ -26,7 +26,7 @@
</template>
<script>
import waterBall from '@/components/echarts/waterBallChart' // 双柱加折线
import waterBall from '@/components/echarts/waterBallChart' // 项目收入 水球
export default {
components: { waterBall },
......
......@@ -25,7 +25,7 @@
</template>
<script>
import lineChart from '@/components/echarts/lineChart' // 双柱加折线图
import lineChart from '@/components/echarts/lineChart' // 回款额 折线图
import waterBall from '@/components/echarts/waterBallChart'
export default {
......
......@@ -27,6 +27,7 @@
</template>
<script>
// 营收排行
export default {
data () {
return {
......
......@@ -18,12 +18,12 @@
</el-option>
</el-select>
</div>
<barChart :message="dataList" idstr="revenueStatistics" class="heightCut68"></barChart>
<barChart @downData="downData" :message="dataList" idstr="revenueStatistics" class="heightCut68"></barChart>
</div>
</template>
<script>
import barChart from '@/components/echarts/barChart' // 柱图
import barChart from '@/components/echarts/barChart' // 营收统计 柱图
export default {
components: { barChart },
......@@ -34,14 +34,80 @@ export default {
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]
xAxis: ['总裁办中心', '客户营销中心', '计划财务中心', '运营管理中心', '解决方案中心', 'IT服务中心', '智能制造中心', '生态合作中心', '客户运营中心'],
data: [
{ value: 123.2, parent: '', isLeaf: false },
{ value: 76.7, parent: '', isLeaf: false },
{ value: 135.6, parent: '', isLeaf: false },
{ value: 162.2, parent: '', isLeaf: false },
{ value: 32.6, parent: '', isLeaf: false },
{ value: 76.7, parent: '', isLeaf: false },
{ value: 135.6, parent: '', isLeaf: false },
{ value: 162.2, parent: '', isLeaf: false },
{ value: 32.6, parent: '', isLeaf: false }
]
}
}
},
mounted () {
},
methods: {
downData (item) {
console.log('传来的值:', item)
setTimeout(() => {
if (!item) {
this.dataList = {
xAxis: ['总裁办中心', '客户营销中心', '计划财务中心', '运营管理中心', '解决方案中心', 'IT服务中心', '智能制造中心', '生态合作中心', '客户运营中心'],
data: [
{ value: 123.2, parent: '', isLeaf: false },
{ value: 76.7, parent: '', isLeaf: false },
{ value: 135.6, parent: '', isLeaf: false },
{ value: 162.2, parent: '', isLeaf: false },
{ value: 32.6, parent: '', isLeaf: false },
{ value: 76.7, parent: '', isLeaf: false },
{ value: 135.6, parent: '', isLeaf: false },
{ value: 162.2, parent: '', isLeaf: false },
{ value: 32.6, parent: '', isLeaf: false }
]
}
}
if (item.indexOf('中心') !== -1) {
this.dataList = {
parent: item,
xAxis: ['总裁办部门', '客户营销部门', '计划财务部门', '运营管理部门', '解决方案部门', 'IT服务部门', '智能制造部门', '生态合作部门', '客户运营部门'],
data: [
{ value: 123.2, parent: item, isLeaf: false },
{ value: 76.7, parent: item, isLeaf: false },
{ value: 135.6, parent: item, isLeaf: false },
{ value: 162.2, parent: item, isLeaf: false },
{ value: 32.6, parent: item, isLeaf: false },
{ value: 123.2, parent: item, isLeaf: false },
{ value: 76.7, parent: item, isLeaf: false },
{ value: 135.6, parent: item, isLeaf: false },
{ value: 162.2, parent: item, isLeaf: false }
]
}
}
if (item.indexOf('部门') !== -1) {
this.dataList = {
parent: item,
level: 'people',
xAxis: ['小小黄', '小小安', '小小圆', '小小静', '小小宝', '小小丽', '小小徐', '小小→', '小小人'],
data: [
{ value: 23.2, parent: item, isLeaf: true },
{ value: 6.7, parent: item, isLeaf: true },
{ value: 35.6, parent: item, isLeaf: true },
{ value: 62.2, parent: item, isLeaf: true },
{ value: 2.6, parent: item, isLeaf: true },
{ value: 6.7, parent: item, isLeaf: true },
{ value: 35.6, parent: item, isLeaf: true },
{ value: 62.2, parent: item, isLeaf: true },
{ value: 2.6, parent: item, isLeaf: true }
]
}
}
}, 0)
}
}
}
</script>
......
......@@ -10,12 +10,12 @@
</el-option>
</el-select>
</div>
<barChart :message="dataList" idstr="totalExpenses" class="heightCut68"></barChart>
<barChart @downData="downData" :message="dataList" idstr="totalExpenses" class="heightCut68"></barChart>
</div>
</template>
<script>
import barChart from '@/components/echarts/barChart' // 柱图
import barChart from '@/components/echarts/barChart' // 费用统计 柱图
export default {
components: { barChart },
......@@ -24,14 +24,64 @@ export default {
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]
xAxis: ['运营管理中心', '解决方案中心', '智能制造中心', '生态合作中心', '客户运营中心'],
data: [
{ value: 123.2, parent: '', isLeaf: false },
{ value: 76.7, parent: '', isLeaf: false },
{ value: 135.6, parent: '', isLeaf: false },
{ value: 162.2, parent: '', isLeaf: false },
{ value: 32.6, parent: '', isLeaf: false }
]
}
}
},
mounted () {
},
methods: {
downData (item) {
console.log('传来的值:', item)
setTimeout(() => {
if (!item) {
this.dataList = {
xAxis: ['运营管理中心', '解决方案中心', '智能制造中心', '生态合作中心', '客户运营中心'],
data: [
{ value: 123.2, parent: '', isLeaf: false },
{ value: 76.7, parent: '', isLeaf: false },
{ value: 135.6, parent: '', isLeaf: false },
{ value: 162.2, parent: '', isLeaf: false },
{ value: 32.6, parent: '', isLeaf: false }
]
}
}
if (item.indexOf('中心') !== -1) {
this.dataList = {
parent: '运营管理中心',
xAxis: ['运营管理部门', '解决方案部门', '智能制造部门', '生态合作部门', '客户运营部门'],
data: [
{ value: 123.2, parent: '运营管理中心', isLeaf: false },
{ value: 76.7, parent: '运营管理中心', isLeaf: false },
{ value: 135.6, parent: '运营管理中心', isLeaf: false },
{ value: 162.2, parent: '运营管理中心', isLeaf: false },
{ value: 32.6, parent: '运营管理中心', isLeaf: false }
]
}
}
if (item.indexOf('部门') !== -1) {
this.dataList = {
parent: '解决方案部门',
level: 'people',
xAxis: ['小小黄', '小小安', '小小圆', '小小静', '小小宝'],
data: [
{ value: 23.2, parent: '解决方案部门', isLeaf: true },
{ value: 6.7, parent: '解决方案部门', isLeaf: true },
{ value: 35.6, parent: '解决方案部门', isLeaf: true },
{ value: 62.2, parent: '解决方案部门', isLeaf: true },
{ value: 2.6, parent: '解决方案部门', isLeaf: true }
]
}
}
}, 0)
}
}
}
</script>
......
<template>
<div class="peopleCounting">
<div class="title">人数统计</div>
<div class="content heightCut44">
<dv-scroll-board :config="config" style="width:calc(100% - 0.01rem);height:calc(100% - 0.01rem)" />
<div class="count-body heightCut44">
<div class="d-flex flex-column" v-if="!showBar">
<div class="count-item d-flex jc-between" v-for="item in dataList" :key="item.name" @click="showBarFn(item)">
<div>{{item.name}}</div>
<div>{{item.value}}</div>
</div>
</div>
<barChart v-if="showBar" :is-show.sync="showBar" @downData="downData" :message="itemList" idstr="peopleCenter" class="h-100"></barChart>
</div>
</div>
</template>
<script>
// import * as API_BASIC from '@/api/sys.basic.js'
import barChart from '@/components/echarts/barChart' // 柱图
export default {
components: {},
components: { barChart },
data () {
return {
config: {
columnWidth: [350, 100],
oddRowBGC: 'rgba(47,219,243,0.15)',
evenRowBGC: 'rgba(47,219,243,0.05)',
data: [
['劳动生产率', '1000/人'],
['人力成本绿润效率', '19.2'],
['人力成本含量', '10.2'],
['人均收入', '1000元/人'],
['人力成本绩效', '11.7'],
['人均贡献利润', '1000元/人']
]
}
showBar: false,
dataList: [
{
name: '劳动生产率',
value: '1000/人'
}, {
name: '人力成本绿润效率',
value: '19.2'
}, {
name: '人力成本含量',
value: '10.2'
}, {
name: '人均收入',
value: '1000元/人'
}, {
name: '人力成本绩效',
value: '11.7'
},
{
name: '人均贡献利润',
value: '1000元/人'
}
],
itemList: {}
}
},
mounted () {
},
methods: {
showBarFn (item) {
this.showBar = true
this.itemList = {
parent: 'company',
xAxis: ['运营管理中心', '解决方案中心', '智能制造中心', '生态合作中心', '客户运营中心'],
data: [
{ value: 123.2, parent: 'company', isLeaf: false },
{ value: 76.7, parent: 'company', isLeaf: false },
{ value: 135.6, parent: 'company', isLeaf: false },
{ value: 162.2, parent: 'company', isLeaf: false },
{ value: 32.6, parent: 'company', isLeaf: false }
]
}
},
downData (item) {
console.log('传来的值:', item)
setTimeout(() => {
if (item.indexOf('company') !== -1) {
this.itemList = {
parent: 'company',
xAxis: ['运营管理中心', '解决方案中心', '智能制造中心', '生态合作中心', '客户运营中心'],
data: [
{ value: 123.2, parent: 'company', isLeaf: false },
{ value: 76.7, parent: 'company', isLeaf: false },
{ value: 135.6, parent: 'company', isLeaf: false },
{ value: 162.2, parent: 'company', isLeaf: false },
{ value: 32.6, parent: 'company', isLeaf: false }
]
}
}
if (item.indexOf('中心') !== -1) {
this.itemList = {
parent: '运营管理中心',
xAxis: ['运营管理部门', '解决方案部门', '智能制造部门', '生态合作部门', '客户运营部门'],
data: [
{ value: 123.2, parent: '运营管理中心', isLeaf: false },
{ value: 76.7, parent: '运营管理中心', isLeaf: false },
{ value: 135.6, parent: '运营管理中心', isLeaf: false },
{ value: 162.2, parent: '运营管理中心', isLeaf: false },
{ value: 32.6, parent: '运营管理中心', isLeaf: false }
]
}
}
if (item.indexOf('部门') !== -1) {
this.itemList = {
parent: '解决方案部门',
level: 'people',
xAxis: ['小小黄', '小小安', '小小圆', '小小静', '小小宝'],
data: [
{ value: 23.2, parent: '解决方案部门', isLeaf: true },
{ value: 6.7, parent: '解决方案部门', isLeaf: true },
{ value: 35.6, parent: '解决方案部门', isLeaf: true },
{ value: 62.2, parent: '解决方案部门', isLeaf: true },
{ value: 2.6, parent: '解决方案部门', isLeaf: true }
]
}
}
}, 0)
}
}
}
</script>
<style lang="scss" scoped>
.peopleCounting {
.content{
.count-body{
font-size: .16rem;
color: #fff;
box-sizing: border-box;
padding: .24rem;
width: 100%;
}
.count-item {
line-height: 2.5;
padding: 0 .2rem;
border: 1px solid $color-primary;
border-radius: .2rem;
margin-bottom: .2rem;
cursor: pointer;
}
}
</style>
......@@ -87,7 +87,7 @@
</div>
<div class="centerBoxHeight-3 mt-2">
<div class="title">入/离职统计</div>
<lineChart :message="refundAmountLine" idstr="refundAmountLine" class="refundAmountLine height21"></lineChart>
<lineChart :message="refundAmountLine" idstr="refundAmountLine" class="px-24 refundAmountLine height21"></lineChart>
</div>
</div>
<div class="rightBlock">
......@@ -100,7 +100,7 @@
<span class="tab-button" @click="performActive=2" :class="{'is-active':performActive=== 2 }">按部门</span>
</div>
</div>
<barChart :message="dataList" idstr="lastMonthPerformance" class="heightCut44"></barChart>
<barChart :message="dataList" idstr="lastMonthPerformance" @downData="downData" class="heightCut44"></barChart>
</div>
</div>
<peopleCounting class="peopleCounting mt-2"></peopleCounting>
......@@ -132,8 +132,15 @@ export default {
}
],
dataList: {
parent: '',
xAxis: ['运营管理中心', '解决方案中心', '智能制造中心', '生态合作中心', '客户运营中心'],
data: [123.2, 76.7, 135.6, 162.2, 32.6]
data: [
{ value: 123.2, parent: '', isLeaf: false },
{ value: 76.7, parent: '', isLeaf: false },
{ value: 135.6, parent: '', isLeaf: false },
{ value: 162.2, parent: '', isLeaf: false },
{ value: 32.6, parent: '', isLeaf: false }
]
},
performActive: 1,
distributeActive: 1,
......@@ -185,6 +192,51 @@ export default {
},
handleSelect (item) {
},
downData (item) {
console.log('传来的值:', item)
setTimeout(() => {
if (!item) {
this.dataList = {
parent: '',
xAxis: ['运营管理中心', '解决方案中心', '智能制造中心', '生态合作中心', '客户运营中心'],
data: [
{ value: 123.2, parent: '', isLeaf: false },
{ value: 76.7, parent: '', isLeaf: false },
{ value: 135.6, parent: '', isLeaf: false },
{ value: 162.2, parent: '', isLeaf: false },
{ value: 32.6, parent: '', isLeaf: false }
]
}
}
if (item.indexOf('中心') !== -1) {
this.dataList = {
parent: '运营管理中心',
xAxis: ['运营管理部门', '解决方案部门', '智能制造部门', '生态合作部门', '客户运营部门'],
data: [
{ value: 123.2, parent: '运营管理中心', isLeaf: false },
{ value: 76.7, parent: '运营管理中心', isLeaf: false },
{ value: 135.6, parent: '运营管理中心', isLeaf: false },
{ value: 162.2, parent: '运营管理中心', isLeaf: false },
{ value: 32.6, parent: '运营管理中心', isLeaf: false }
]
}
}
if (item.indexOf('部门') !== -1) {
this.dataList = {
parent: '解决方案部门',
level: 'people',
xAxis: ['小小黄', '小小安', '小小圆', '小小静', '小小宝'],
data: [
{ value: 23.2, parent: '解决方案部门', isLeaf: true },
{ value: 6.7, parent: '解决方案部门', isLeaf: true },
{ value: 35.6, parent: '解决方案部门', isLeaf: true },
{ value: 62.2, parent: '解决方案部门', isLeaf: true },
{ value: 2.6, parent: '解决方案部门', isLeaf: true }
]
}
}
}, 0)
},
orgDetail () {
this.$router.push('/orgDetail')
......
......@@ -76,6 +76,9 @@ export default {
methods: {
handleDetail (item) {
this.activeIndex = item
if (this.basicData[item].name === '企业规模') {
this.$router.push('./enterpriseSize')
}
}
}
}
......
<template>
<d2-container class="enterpriseSize">
<headerLayout></headerLayout>
<div class="section">
<div class="leftBlock">
<el-table :show-header="false" :data="tableData" stripe style="width: 100%">
<el-table-column prop="type" width="100"></el-table-column>
<el-table-column prop="name"></el-table-column>
</el-table>
</div>
<div class="centerBlock">
<mapChina :message="mapChina" idstr="mapChinaCompany" class="mapChina"></mapChina>
</div>
</div>
</d2-container>
</template>
<script>
import headerLayout from '@/components/headerLayout/index' // 公共头部
import mapChina from './mainPageEcharts/mapChina' // 地图
import * as API_BASIC from '@/api/sys.basic.js'
export default {
components: { headerLayout, mapChina },
data () {
return {
mapChina: [],
tableData: [{
name: '北京群智合信息科技股份有限公司',
type: '母公司'
}, {
name: '北京群智合信息技术服务有限公司',
type: '子公司'
}, {
name: '北京群智合数码科技有限公司',
type: '子公司'
}, {
name: '北京群智合数码科技有限公司深圳分公司',
type: '子公司'
}, {
name: '天津群智合数码科技有限公司',
type: '子公司'
}, {
name: '许昌群智合数码科技有限公司',
type: '子公司'
}, {
name: '郑州',
type: '办事处'
}, {
name: '西安',
type: '办事处'
}, {
name: '成都',
type: '办事处'
}, {
name: '贵阳',
type: '办事处'
}, {
name: '安阳',
type: '办事处'
}, {
name: '唐山',
type: '办事处'
}, {
name: '张家口',
type: '办事处'
}, {
name: '南京',
type: '办事处'
}, {
name: '云南',
type: '办事处'
}, {
name: '广东',
type: '办事处'
}, {
name: '威海',
type: '办事处'
}, {
name: '烟台',
type: '办事处'
}]
}
},
mounted () {
this.GET_MapChina()
},
methods: {
GET_MapChina () {
API_BASIC.GetMapChina(0).then(res => {
this.newData = res.data
this.newData.forEach(e => {
var arr = { name: e.area, value: e.num }
this.mapChina.push(arr)
})
})
}
}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/style/mainPage.scss';
</style>
<style lang="scss">
.enterpriseSize{
.leftBlock {
height: calc(100vh - 1.4rem);
padding: .24rem;
border: 1px solid $color-primary;
border-radius: .2rem;
box-sizing: border-box;
overflow-y: auto;
}
.section {
.centerBlock {
width: calc(100vw - 6rem);
height: calc(100vh - 1.4rem);
}
.mapChina {
height: calc(100vh - 2rem);
}
}
.el-table {
font-size: .16rem;
color: #fff;
background-color: rgba(47, 219, 243, 0.05);
&::before {
height: 0;
}
td {
border-bottom: none;
}
tr {
background-color: $color-bg;
cursor: pointer;
&.is-leaf {
border-bottom: none;
}
&.el-table__row--striped td {
background-color: rgba(47, 219, 243, 0.15);
}
}
.el-table__body tr:hover>td {
background-color: rgba(47, 219, 243, 0.15);
}
}
}
</style>
......@@ -200,16 +200,16 @@ export default {
content: "...";
box-sizing: content-box;
position: absolute;
width: 50px;
bottom: 3px;
width: .5rem;
bottom: .03rem;
left: 100%;
margin-left: -61px;
padding-right: 5px;
margin-left: -.61rem;
padding-right: .08rem;
text-align: right;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0),
#000E42 50px
#000E42 .5rem
);
}
}
......
......@@ -33,7 +33,7 @@
</template>
<script>
import vis from '@/assets/js/VisHelper.js'
// import vis from '@/assets/js/VisHelper.js'
import knowledgeJSON from '@/assets/js/knowledgeJSON.js'
import knowledgeDialog from './knowledgeDialog'
import * as API_KNOWLED from '@/api/sys.knowled.js'
......
......@@ -7,12 +7,9 @@
export default {
data () {
return {
newData: [],
dataObj: {},
option: {},
chart: null,
lengendColor: ['#00E8FF', '#746ef8', '#F8E71C', '#7ED321', '#FF663B'],
clickNum: [1, 1, 1, 1, 1]
lengendColor: ['#00E8FF', '#746ef8', '#F8E71C', '#7ED321', '#FF663B']
}
},
props: ['message', 'idstr'],
......@@ -24,8 +21,8 @@ export default {
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
// require('echarts/lib/component/tooltip')
// require('echarts/lib/component/title')
var uploadedData = require('./data-1528971808162-BkOXf61WX.json')
echarts.registerMap('china', uploadedData)
......@@ -237,7 +234,7 @@ export default {
},
itemStyle: {
normal: {
color: '#D8BC37' // 标志颜色
color: '#D8BC37' // 标志颜色黄色
}
},
data: convertData(data),
......@@ -280,6 +277,6 @@ export default {
}
</script>
<style lang="less">
<style>
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment