Skip to content

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

修改概况中的地图和图谱功能

parent 75c52e84
Hide whitespace changes
Inline Side-by-side
Showing with 847 additions and 863 deletions
src/api/sys.basic.js
View file @ b30dab83
...@@ -126,3 +126,27 @@ export function getIndustryData () { ...@@ -126,3 +126,27 @@ export function getIndustryData () {
method: 'post' method: 'post'
}) })
} }
// 查询客户增长率的下拉框年份数据
export function getCustomerTime () {
return request({
url: '/tp/revenue/getCustomerTime',
method: 'get'
})
}
// 查询地图以及联动数据
export function getMapAllData (params) {
return request({
url: '/tp/introduction/getAllData',
method: 'get',
params
})
}
// 查询公司规模地图
export function getScaleList () {
return request({
url: '/tp/scale/getScaleList',
method: 'get'
})
}
src/api/sys.knowled.js
View file @ b30dab83
import { service, request, serviceForMock, requestForMock, mock } from './service' import { request } from './service'
/** /**
* 获取知识图谱 * 获取知识图谱
*/ */
export function GetKnowledgeGraph (name, type) { export function getByName (name, type) {
return request({ return request({
url: `/tp/map/getByName?name=${name}&type=${type}`, url: `/tp/map/getByName?name=${name}&type=${type}`,
method: 'get' method: 'get'
......
src/assets/style/headerLayout.scss
View file @ b30dab83
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
} }
} }
} }
}
.no-line {
text-decoration: none;
} }
src/components/HeaderLayout/index.vue
View file @ b30dab83
...@@ -7,21 +7,20 @@ ...@@ -7,21 +7,20 @@
</div> </div>
<h3 class="flex-1">企业运营图谱</h3> <h3 class="flex-1">企业运营图谱</h3>
<div class="flex-1 header-right-box"> <div class="flex-1 header-right-box">
<div class="time">{{nowDate | moment("YYYY/MM/DD")}} {{nowDate | moment("HH:mm:ss")}} 星期{{week | weekFilter}}</div> <!-- <div class="time">{{nowDate | moment("YYYY/MM/DD")}} {{nowDate | moment("HH:mm:ss")}} 星期{{week | weekFilter}}</div> -->
<div class="time">{{user}}</div>
<div class="right-menu"> <div class="right-menu">
<el-dropdown class="avatar-container" trigger="click"> <el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper"> <div class="avatar-wrapper">
<img src="~@/assets/img/timg.jpg" class="user-avatar"> <img src="~@/assets/img/timg.jpg" class="user-avatar">
<i class="el-icon-caret-bottom" /> <i class="el-icon-caret-bottom" />
</div> </div>
<el-dropdown-menu slot="dropdown" class="user-dropdown"> <el-dropdown-menu slot="dropdown">
<router-link to="/"> <el-dropdown-item>
<el-dropdown-item> <a class="no-line" href="http://111.203.232.175:8085/" target="_blank">管理端 </a>
Home </el-dropdown-item>
</el-dropdown-item>
</router-link>
<el-dropdown-item divided @click.native="logout"> <el-dropdown-item divided @click.native="logout">
<span style="display:block; width: 60px">Log Out</span> <span style="display:block; width: 60px">登出</span>
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
...@@ -31,10 +30,12 @@ ...@@ -31,10 +30,12 @@
</template> </template>
<script> <script>
import util from '@/libs/util'
export default { export default {
data () { data () {
return { return {
screenWidth: document.body.clientWidth, screenWidth: document.body.clientWidth,
user: '',
num: 0, num: 0,
nowDate: '', nowDate: '',
week: '', week: '',
...@@ -91,7 +92,7 @@ export default { ...@@ -91,7 +92,7 @@ export default {
}, },
mounted () { mounted () {
this.init() this.init()
this.getDate() // this.getDate()
const that = this const that = this
window.onresize = () => { window.onresize = () => {
return (() => { return (() => {
...@@ -102,15 +103,16 @@ export default { ...@@ -102,15 +103,16 @@ export default {
}, },
methods: { methods: {
logout () { logout () {
sessionStorage.clear()
localStorage.clear()
util.cookies.delCookie()
this.$router.push('/login') this.$router.push('/login')
}, },
init () { init () {
this.user = sessionStorage.getItem('user') ? JSON.parse(sessionStorage.getItem('user')).name : '无相关信息'
this.num = sessionStorage.getItem('num') this.num = sessionStorage.getItem('num')
const user = JSON.parse(sessionStorage.getItem('user'))
if (user.role === 1) {
this.buttenList.push('管理端')
}
}, },
// 获取时间
getDate () { getDate () {
const vm = this const vm = this
this.nowDate = new Date() this.nowDate = new Date()
...@@ -122,7 +124,6 @@ export default { ...@@ -122,7 +124,6 @@ export default {
change (index) { change (index) {
this.num = index this.num = index
sessionStorage.setItem('num', index) sessionStorage.setItem('num', index)
const token = sessionStorage.getItem('token')
switch (index) { switch (index) {
case 0: case 0:
this.$router.replace('/index') this.$router.replace('/index')
...@@ -139,9 +140,6 @@ export default { ...@@ -139,9 +140,6 @@ export default {
case 4: case 4:
this.$router.replace('/content/organization/page') this.$router.replace('/content/organization/page')
break break
case 5:
window.open('http://111.203.232.175:8085/#/dashboard?token=' + token)
// window.open('http://localhost:9528/#/dashboard?token=' + token)
} }
} }
} }
......
src/components/echarts/graphChart.vue
View file @ b30dab83
...@@ -19,265 +19,277 @@ export default { ...@@ -19,265 +19,277 @@ export default {
methods: { methods: {
drawLine () { drawLine () {
const vm = this const vm = this
// const _list = vm.message const _list = vm.message
const _list = { _list.nodes.forEach(item => {
nodes: [ item.itemStyle = {
{ color: item.color
id: '0', }
name: '群智合', item.emphasis = {
symbolSize: 30, focus: 'adjacency',
value: 128.685715, label: {
category: 2, position: 'right',
itemStyle: { show: true
color: '#30DDF4'
}
},
{
id: '1',
name: '中行',
symbolSize: 20,
value: 4,
category: 0,
itemStyle: {
color: '#4f19c7'
}
},
{
id: '2',
name: '新航城',
symbolSize: 20,
value: 9.485714,
category: 0,
itemStyle: {
color: '#c71969'
}
},
{
id: '3',
name: '科技局',
symbolSize: 20,
value: 9.485714,
category: 1,
itemStyle: {
color: '#1984c7'
}
},
{
id: '4',
name: '报表项目',
symbolSize: 20,
value: 4,
category: 0,
itemStyle: {
color: '#8419c7'
}
},
{
id: '5',
name: '知识图谱项目',
symbolSize: 20,
value: 4,
category: 0,
itemStyle: {
color: '#9f19c7'
}
},
{
id: '6',
name: '可视化项目',
symbolSize: 20,
value: 4,
category: 0,
itemStyle: {
color: '#199fc7'
}
},
{
id: '7',
name: '可视化报表',
symbolSize: 10,
value: 4,
category: 0,
itemStyle: {
color: '#19c719'
}
},
{
id: '8',
name: '王珊珊',
symbolSize: 6,
value: 4,
category: 0,
itemStyle: {
color: '#69c719'
}
},
{
id: '9',
name: '崔雪征',
symbolSize: 6,
value: 4,
category: 0,
itemStyle: {
color: '#b9c719'
}
},
{
id: '10',
name: '土地开发项目',
symbolSize: 20,
value: 4,
category: 0,
itemStyle: {
color: '#8419c7'
}
},
{
id: '11',
name: '科技局大数据分析项目',
symbolSize: 20,
value: 4,
category: 0,
itemStyle: {
color: '#8419c7'
}
},
{
id: '12',
name: '可视化大屏',
symbolSize: 10,
value: 4,
category: 0,
itemStyle: {
color: '#19c719'
}
},
{
id: '13',
name: '傅宝乐',
symbolSize: 6,
value: 4,
category: 0,
itemStyle: {
color: '#69c719'
}
}, {
id: '14',
name: '奚鑫',
symbolSize: 6,
value: 4,
category: 0,
itemStyle: {
color: '#69c719'
}
}, {
id: '15',
name: '郭静',
symbolSize: 6,
value: 4,
category: 0,
itemStyle: {
color: '#69c719'
}
}, {
id: '16',
name: 'PC端系统',
symbolSize: 10,
value: 4,
category: 0,
itemStyle: {
color: '#19c719'
}
}, {
id: '17',
name: '余大超',
symbolSize: 6,
value: 4,
category: 0,
itemStyle: {
color: '#b9c719'
}
}, {
id: '18',
name: '郭襄',
symbolSize: 6,
value: 4,
category: 0,
itemStyle: {
color: '#b9c719'
}
}
],
links: [
{
source: '1',
target: '0'
},
{
source: '2',
target: '0'
},
{
source: '3',
target: '0'
},
{
source: '4',
target: '1'
},
{
source: '5',
target: '1'
},
{
source: '6',
target: '1'
},
{
source: '10',
target: '2'
},
{
source: '7',
target: '4'
},
{
source: '8',
target: '7'
},
{
source: '9',
target: '7'
},
{
source: '11',
target: '3'
},
{
source: '12',
target: '10'
}, {
source: '16',
target: '10'
}, {
source: '13',
target: '12'
}, {
source: '14',
target: '12'
}, {
source: '15',
target: '12'
}, {
source: '17',
target: '16'
}, {
source: '18',
target: '16'
} }
], }
category: [{ name: '类目0' }] })
} // const _list = {
// nodes: [
// {
// id: '0',
// name: '群智合',
// symbolSize: 30,
// value: 128.685715,
// category: 2,
// itemStyle: {
// color: '#30DDF4'
// }
// },
// {
// id: '1',
// name: '中行',
// symbolSize: 20,
// value: 4,
// category: 0,
// itemStyle: {
// color: '#4f19c7'
// }
// },
// {
// id: '2',
// name: '新航城',
// symbolSize: 20,
// value: 9.485714,
// category: 0,
// itemStyle: {
// color: '#c71969'
// }
// },
// {
// id: '3',
// name: '科技局',
// symbolSize: 20,
// value: 9.485714,
// category: 1,
// itemStyle: {
// color: '#1984c7'
// }
// },
// {
// id: '4',
// name: '报表项目',
// symbolSize: 20,
// value: 4,
// category: 0,
// itemStyle: {
// color: '#8419c7'
// }
// },
// {
// id: '5',
// name: '知识图谱项目',
// symbolSize: 20,
// value: 4,
// category: 0,
// itemStyle: {
// color: '#9f19c7'
// }
// },
// {
// id: '6',
// name: '可视化项目',
// symbolSize: 20,
// value: 4,
// category: 0,
// itemStyle: {
// color: '#199fc7'
// }
// },
// {
// id: '7',
// name: '可视化报表',
// symbolSize: 10,
// value: 4,
// category: 0,
// itemStyle: {
// color: '#19c719'
// }
// },
// {
// id: '8',
// name: '王珊珊',
// symbolSize: 6,
// value: 4,
// category: 0,
// itemStyle: {
// color: '#69c719'
// }
// },
// {
// id: '9',
// name: '崔雪征',
// symbolSize: 6,
// value: 4,
// category: 0,
// itemStyle: {
// color: '#b9c719'
// }
// },
// {
// id: '10',
// name: '土地开发项目',
// symbolSize: 20,
// value: 4,
// category: 0,
// itemStyle: {
// color: '#8419c7'
// }
// },
// {
// id: '11',
// name: '科技局大数据分析项目',
// symbolSize: 20,
// value: 4,
// category: 0,
// itemStyle: {
// color: '#8419c7'
// }
// },
// {
// id: '12',
// name: '可视化大屏',
// symbolSize: 10,
// value: 4,
// category: 0,
// itemStyle: {
// color: '#19c719'
// }
// },
// {
// id: '13',
// name: '傅宝乐',
// symbolSize: 6,
// value: 4,
// category: 0,
// itemStyle: {
// color: '#69c719'
// }
// }, {
// id: '14',
// name: '奚鑫',
// symbolSize: 6,
// value: 4,
// category: 0,
// itemStyle: {
// color: '#69c719'
// }
// }, {
// id: '15',
// name: '郭静',
// symbolSize: 6,
// value: 4,
// category: 0,
// itemStyle: {
// color: '#69c719'
// }
// }, {
// id: '16',
// name: 'PC端系统',
// symbolSize: 10,
// value: 4,
// category: 0,
// itemStyle: {
// color: '#19c719'
// }
// }, {
// id: '17',
// name: '余大超',
// symbolSize: 6,
// value: 4,
// category: 0,
// itemStyle: {
// color: '#b9c719'
// }
// }, {
// id: '18',
// name: '郭襄',
// symbolSize: 6,
// value: 4,
// category: 0,
// itemStyle: {
// color: '#b9c719'
// }
// }
// ],
// links: [
// {
// source: '1',
// target: '0'
// },
// {
// source: '2',
// target: '0'
// },
// {
// source: '3',
// target: '0'
// },
// {
// source: '4',
// target: '1'
// },
// {
// source: '5',
// target: '1'
// },
// {
// source: '6',
// target: '1'
// },
// {
// source: '10',
// target: '2'
// },
// {
// source: '7',
// target: '4'
// },
// {
// source: '8',
// target: '7'
// },
// {
// source: '9',
// target: '7'
// },
// {
// source: '11',
// target: '3'
// },
// {
// source: '12',
// target: '10'
// }, {
// source: '16',
// target: '10'
// }, {
// source: '13',
// target: '12'
// }, {
// source: '14',
// target: '12'
// }, {
// source: '15',
// target: '12'
// }, {
// source: '17',
// target: '16'
// }, {
// source: '18',
// target: '16'
// }
// ],
// category: [{ name: '类目0' }]
// }
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
vm.chart = this.$echarts.init(document.getElementById(vm.idstr)) vm.chart = this.$echarts.init(document.getElementById(vm.idstr))
// 清空图表 // 清空图表
......
src/libs/util.cookies.js
View file @ b30dab83
...@@ -39,4 +39,16 @@ cookies.remove = function (name = 'default') { ...@@ -39,4 +39,16 @@ cookies.remove = function (name = 'default') {
return Cookies.remove(`d2admin-${process.env.VUE_APP_VERSION}-${name}`) return Cookies.remove(`d2admin-${process.env.VUE_APP_VERSION}-${name}`)
} }
/**
* @description 清除所有cookie
*/
cookies.delCookie = function () {
var keys = document.cookie.match(/[^ =;]+(?==)/g)
if (keys) {
for (var i = keys.length; i--;) {
document.cookie = keys[i] + '=0;path=/;expires=' + new Date(0).toUTCString() // 清除当前域名下的,例如：m.ratingdog.cn
document.cookie = keys[i] + '=0;path=/;domain=' + document.domain + ';expires=' + new Date(0).toUTCString() // 清除当前域名下的
}
}
}
export default cookies export default cookies
src/views/system/index/components/deptOperation.vue
View file @ b30dab83
...@@ -40,10 +40,7 @@ export default { ...@@ -40,10 +40,7 @@ export default {
components: { statistics, distributed }, components: { statistics, distributed },
data () { data () {
return { return {
yearsOption: [ yearsOption: [],
'2020',
'2021'
],
years: '2021', years: '2021',
chartActive: 1, chartActive: 1,
dataActive: 'year', dataActive: 'year',
...@@ -55,9 +52,15 @@ export default { ...@@ -55,9 +52,15 @@ export default {
} }
}, },
mounted () { mounted () {
this.getCustomerTime()
this.getTypeData(1) this.getTypeData(1)
}, },
methods: { methods: {
async getCustomerTime () {
const _data = await API_BASIC.getCustomerTime()
this.yearsOption = _data.data
this.years = this.yearsOption[0]
},
getTimeData (param) { getTimeData (param) {
if (param === 'year') { if (param === 'year') {
this.dataActive = 'year' this.dataActive = 'year'
......
src/views/system/index/components/enterpriseSize.vue
View file @ b30dab83
<template> <template>
<d2-container class="enterpriseSize"> <d2-container >
<headerLayout></headerLayout> <headerLayout></headerLayout>
<div class="section"> <div class="enterpriseSize">
<div class="leftBlock"> <div class="news-title d-flex jc-between">
<el-table :show-header="false" :data="tableData" stripe style="width: 100%"> <label>公司规模</label>
<el-table-column prop="type" width="100"> <span @click="goBack">&lt; 返回</span>
<template slot-scope="scope">
<span>{{scope.row.type==1?'子公司':'母公司'}}</span>
</template>
</el-table-column>
<el-table-column prop="name"></el-table-column>
</el-table>
</div> </div>
<div class="centerBlock"> <div class="section">
<mapChina :message="mapChina" idstr="mapChinaCompany" class="mapChina"></mapChina> <div class="leftBlock">
<el-table :show-header="false" :data="tableData" stripe style="width: 100%">
<el-table-column prop="type" width="100">
<template slot-scope="scope">
<span>{{scope.row.type==1?'子公司':'母公司'}}</span>
</template>
</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> </div>
</div> </div>
</d2-container> </d2-container>
</template> </template>
...@@ -50,13 +57,16 @@ export default { ...@@ -50,13 +57,16 @@ export default {
}) })
}, },
GET_MapChina () { GET_MapChina () {
API_BASIC.GetMapChina(0).then(res => { API_BASIC.getScaleList().then(res => {
this.newData = res.data this.newData = res.data
this.newData.forEach(e => { this.newData.forEach(e => {
var arr = { name: e.area, value: e.num } var arr = { province: e.areaName, number: e.number }
this.mapChina.push(arr) this.mapChina.push(arr)
}) })
}) })
},
goBack () {
this.$router.back(-1)
} }
} }
} }
...@@ -67,22 +77,38 @@ export default { ...@@ -67,22 +77,38 @@ export default {
</style> </style>
<style lang="scss"> <style lang="scss">
.enterpriseSize{ .enterpriseSize{
padding: .5rem 1rem;
.news-title {
width: 100%;
height: .54rem;
font-size: .24rem;
line-height: 1.5;
color: $color-primary;
border-bottom: .02rem solid $color-primary;
margin-bottom: .5rem;
span {
cursor: pointer;
}
}
.section {
padding:0;
}
.leftBlock { .leftBlock {
height: calc(100vh - 1.4rem); height: calc(100vh - 2.8rem);
padding: .24rem; padding: .24rem;
border: 1px solid $color-primary; border: 1px solid $color-primary;
border-radius: .2rem; border-radius: .2rem;
box-sizing: border-box; box-sizing: border-box;
overflow-y: auto; overflow-y: auto;
} }
.section { .section {
.centerBlock { .centerBlock {
width: calc(100vw - 6rem); width: calc(100vw - 6rem);
height: calc(100vh - 1.4rem); height: calc(100vh - 2.8rem);
} }
.mapChina { .mapChina {
height: calc(100vh - 2rem); height: calc(100vh - 3rem);
} }
} }
.el-table { .el-table {
font-size: .16rem; font-size: .16rem;
......
src/views/system/index/components/itemNationwide.vue
View file @ b30dab83
...@@ -4,56 +4,56 @@ ...@@ -4,56 +4,56 @@
<div class="content d-flex"> <div class="content d-flex">
<div class="flex-1"> <div class="flex-1">
<pieChart :message="itemNationWide" idstr="itemNationWide" class="heightCut44"></pieChart> <pieChart :message="itemNationWide" idstr="itemNationWide" class="heightCut44"></pieChart>
<p v-if="type=='1'">共计客户 <strong>2655个</strong></p> <p v-if="type=='4'">共计客户 <strong>{{message.allCustomerNumber}}个</strong></p>
<p v-if="type=='2'">共计商机 <strong>18792个</strong></p> <p v-if="type=='3'">共计商机 <strong>{{message.allOpportunitiesNumber}}个</strong></p>
<p v-if="type=='3'">共计项目 <strong>98231个</strong></p> <p v-if="type=='1'">共计项目 <strong>{{message.allProjectNumber}}个</strong></p>
</div> </div>
<template> <template>
<div v-if="type=='1'" class="flex-1 sum-box"> <div v-if="type=='4'" class="flex-1 sum-box">
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<div class="text-box"> <div class="text-box">
<label>本年度签署合同</label> <label>本年度签署合同</label>
<span>3.98 亿</span> <span>{{message.contactMoney|moneyFormat(8)|numFormat}} 亿</span>
</div> </div>
<div class="text-box"> <div class="text-box">
<label>相关产品</label> <label>相关产品</label>
<span>3009 个</span> <span>{{message.contactNumber}} 个</span>
</div> </div>
<div class="text-box"> <div class="text-box">
<label>累计服务次数</label> <label>累计服务次数</label>
<span>3000 次</span> <span>{{message.serviceNumber}} 次</span>
</div> </div>
</div> </div>
</div> </div>
<div v-if="type=='2'" class="flex-1 sum-box"> <div v-if="type=='3'" class="flex-1 sum-box">
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<div class="text-box"> <div class="text-box">
<label>预计总收入</label> <label>预计总收入</label>
<span>3098 亿</span> <span>{{message.allRevenueMoney|moneyFormat(8)|numFormat}} 亿</span>
</div> </div>
<div class="text-box"> <div class="text-box">
<label>预计总成本</label> <label>预计总成本</label>
<span>300 亿</span> <span>{{message.allCostMoney|moneyFormat(8)|numFormat}} 亿</span>
</div> </div>
<div class="text-box"> <div class="text-box">
<label>参与售前</label> <label>参与售前</label>
<span>300 人</span> <span>{{message.allSalerNumber}} 人</span>
</div> </div>
</div> </div>
</div> </div>
<div v-if="type=='3'" class="flex-1 sum-box"> <div v-if="type=='1'" class="flex-1 sum-box">
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<div class="text-box"> <div class="text-box">
<label>服务次数累计</label> <label>服务次数累计</label>
<span>3098 次</span> <span>{{message.serviceNumber}} 次</span>
</div> </div>
<div class="text-box"> <div class="text-box">
<label>当前参与技术人员</label> <label>当前参与技术人员</label>
<span>300 人</span> <span>{{message.technologyEmployee}} 人</span>
</div> </div>
<div class="text-box"> <div class="text-box">
<label>当前参与销售人员</label> <label>当前参与销售人员</label>
<span>300 人</span> <span>{{message.saleEmployee}} 人</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -91,24 +91,9 @@ export default { ...@@ -91,24 +91,9 @@ export default {
methods: { methods: {
// 查询概况页面数据 // 查询概况页面数据
getList () { getList () {
if (this.type === 3) { this.itemNationWide = {
this.itemNationWide = { legend: this.message.legend,
legend: ['启动', '完结', '作废'], data: this.message.data
data: [
{ value: 35, name: '启动' },
{ value: 100, name: '完结' },
{ value: 234, name: '作废' }
]
}
} else {
this.itemNationWide = {
legend: ['集成', '软件', '服务'],
data: [
{ value: 335, name: '集成' },
{ value: 310, name: '软件' },
{ value: 234, name: '服务' }
]
}
} }
} }
} }
......
src/views/system/index/components/knowledgeDialog.vue
View file @ b30dab83
...@@ -7,7 +7,8 @@ ...@@ -7,7 +7,8 @@
:modal-append-to-body=true :modal-append-to-body=true
append-to-body class="knowledgeDialog"> append-to-body class="knowledgeDialog">
<div class="leftBox"> <div class="leftBox">
<div id="topo"></div> <!-- <div id="topo"></div> -->
<graphChart :message="mapData" idstr="topo"></graphChart>
</div> </div>
<div class="rightBox"> <div class="rightBox">
<div class="search-box"> <div class="search-box">
...@@ -35,7 +36,7 @@ ...@@ -35,7 +36,7 @@
</div> </div>
<h3>关系筛选</h3> <h3>关系筛选</h3>
<el-checkbox-group v-model="checked"> <el-checkbox-group v-model="checked">
<el-checkbox v-for="item in checkList" :key="item.value" :label="item.value">{{item.name}}</el-checkbox> <el-checkbox :disabled="value==item.value" v-for="item in checkList" :key="item.value" :label="item.value">{{item.name}}</el-checkbox>
</el-checkbox-group> </el-checkbox-group>
<div class="inquire" @click="handleChange">查询</div> <div class="inquire" @click="handleChange">查询</div>
</div> </div>
...@@ -44,23 +45,47 @@ ...@@ -44,23 +45,47 @@
<script> <script>
import * as API_KNOWLED from '@/api/sys.knowled.js' import * as API_KNOWLED from '@/api/sys.knowled.js'
import vis from '@/assets/js/VisHelper.js' import graphChart from '@/components/echarts/graphChart'
// import knowledgeJSON from '@/assets/js/knowledgeJSON.js' // import knowledgeJSON from '@/assets/js/knowledgeJSON.js'
const colorMap = new Map()
colorMap.set(1, '#8419c7')
colorMap.set(2, '#b9c719')
colorMap.set(3, '#199fc7')
colorMap.set(4, '#4f19c7')
colorMap.set(5, '#69c719')
export default { export default {
components: { graphChart },
data () { data () {
return { return {
options: [
{
value: 1,
label: '项目'
}, {
value: 2,
label: '销售'
}, {
value: 3,
label: '商机'
}, {
value: 4,
label: '客户'
}, {
value: 5,
label: '成员'
}
],
visible: true, visible: true,
state: '', state: '',
knowledname: {}, mapData: {},
knowledid: '',
knowledData: [], knowledData: [],
checked: [1], checked: [1, 2, 3, 4, 5],
checkList: [ checkList: [
{ name: '客户', value: 2 }, { name: '项目', value: 1 },
{ name: '项目', value: 3 }, { name: '销售', value: 2 },
{ name: '商机', value: 4 }, { name: '商机', value: 3 },
{ name: '产品', value: 5 }, { name: '客户', value: 4 },
{ name: '人员', value: 6 } { name: '成员', value: 5 }
], ],
value: '', value: '',
topoData: {} // 接收到的topo数据 topoData: {} // 接收到的topo数据
...@@ -69,22 +94,30 @@ export default { ...@@ -69,22 +94,30 @@ export default {
mounted () { mounted () {
}, },
methods: { methods: {
close () { topoDialog (data, value, state) {
this.$store.commit('d2admin/information/changeKnowledgeDialogShow', false) const vm = this
vm.value = value
vm.state = state
if (data) {
vm.mapData = data
vm.sourceData = JSON.parse(JSON.stringify(data))
}
}, },
// 根据name查id // 根据name查id
querySearch (queryString, cb) { querySearch (queryString, cb) {
API_KNOWLED.GetKnowledgeGraph(queryString, this.value).then(res => { API_KNOWLED.getByName(queryString, this.value).then(res => {
this.knowledData = res.data this.knowledData = res.data
for (var i = 0; i < this.knowledData.length; i++) { for (var i = 0; i < this.knowledData.length; i++) {
if (this.value === 1) { if (this.value === 1) { // 项目
this.knowledData[i].value = this.knowledData[i].projectName this.knowledData[i].value = this.knowledData[i].projectName
} else if (this.value === 2) { } else if (this.value === 2) { // 销售
this.knowledData[i].value = this.knowledData[i].memberName this.knowledData[i].value = this.knowledData[i].memberName
} else if (this.value === 3) { } else if (this.value === 3) { // 商机
this.knowledData[i].value = this.knowledData[i].nicheName this.knowledData[i].value = this.knowledData[i].nicheName
} else { } else if (this.value === 4) { // 客户
this.knowledData[i].value = this.knowledData[i].customerName this.knowledData[i].value = this.knowledData[i].customerName
} else { // 成员
this.knowledData[i].value = this.knowledData[i].personName
} }
} }
cb(this.knowledData) cb(this.knowledData)
...@@ -92,68 +125,31 @@ export default { ...@@ -92,68 +125,31 @@ export default {
}, },
handleSelectChild (item) { handleSelectChild (item) {
API_KNOWLED.GetKnowledId(item.id, this.value).then(res => { API_KNOWLED.GetKnowledId(item.id, this.value).then(res => {
this.knowledname = res.data this.mapData = res.data
this.topoAll(res.data) this.sourceData = JSON.parse(JSON.stringify(res.data))
this.checked = [1, 2, 3, 4, 5]
localStorage.setItem('data', JSON.stringify(res.data))
}) })
}, },
// 通过控制关系筛选来控制左侧图谱展示，默认展示1 // 通过控制关系筛选来控制左侧图谱展示，默认展示1
handleChange () { handleChange () {
const vm = this const vm = this
const newData = { const newNodes = []
retNodes: [], console.log(vm.sourceData.nodes, vm.checked)
retLinks: [] if (vm.sourceData.nodes) {
} vm.sourceData.nodes.forEach((v, i) => {
if (vm.topoData.retNodes) { vm.checked.forEach(a => {
vm.topoData.retNodes.forEach((v, i) => { if (v.color === colorMap.get(a)) {
vm.checked.forEach((a, b) => { newNodes.push(v)
if (v.type === a) {
newData.retNodes.push(v)
} }
}) })
}) })
newData.retLinks = vm.topoData.retLinks
vm.initTopu(newData)
}
},
topoAll (value) {
const vm = this
const data = {
retLinks: [],
retNodes: []
}
const linksArr = []
value.links.forEach((v, i) => {
// v.indexName = '线上的字'
const linksObj = {}
linksObj.id = v.id
linksObj.from = v.from
linksObj.to = v.to
linksObj.label = v.indexName
linksArr.push(linksObj)
})
data.retLinks = linksArr
data.retNodes = value.nodes
vm.topoData = data
// console.log('tag', data)
vm.handleChange()
// vm.initTopu(data)
},
topoDialog (data, value) {
const vm = this
vm.value = value
// let data = knowledgeJSON[0]
if (data) {
vm.topoData = JSON.parse(data)
} }
vm.handleChange() vm.mapData.nodes = newNodes
}, },
initTopu (data) { // 关闭
vis.init('topo', data, this) close () {
vis.cgraph( this.$store.commit('d2admin/information/changeKnowledgeDialogShow', false)
(snode, dnode, S, B) => {},
false,
info => {}
)
} }
} }
} }
...@@ -170,12 +166,13 @@ export default { ...@@ -170,12 +166,13 @@ export default {
} }
.rightBox{ .rightBox{
box-sizing: border-box; box-sizing: border-box;
width: calc(25% - 4px); width: calc(25% - .04rem);
height:calc(100% - 4px); height:calc(100% - .14rem);
background: #000E42; background: #000E42;
float: left; float: left;
padding-top: .6rem; padding-top: .5rem;
position: relative; position: relative;
margin-top: .1rem;
h3{ h3{
width: calc(100% - .2rem); width: calc(100% - .2rem);
font-size:.16rem; font-size:.16rem;
......
src/views/system/index/components/knowledgeGraph.vue
View file @ b30dab83
...@@ -25,7 +25,6 @@ ...@@ -25,7 +25,6 @@
</div> </div>
</div> </div>
<!-- <div id="topology"></div> -->
<graphChart :message="mapData" idstr="graphChart" class="heightCut44"></graphChart> <graphChart :message="mapData" idstr="graphChart" class="heightCut44"></graphChart>
<div class="open" @click="openDialog"></div> <div class="open" @click="openDialog"></div>
<knowledgeDialog v-if="knowledgeDialogShow" ref="child"></knowledgeDialog> <knowledgeDialog v-if="knowledgeDialogShow" ref="child"></knowledgeDialog>
...@@ -33,8 +32,6 @@ ...@@ -33,8 +32,6 @@
</template> </template>
<script> <script>
// import vis from '@/assets/js/VisHelper.js'
import knowledgeJSON from '@/assets/js/knowledgeJSON.js'
import knowledgeDialog from './knowledgeDialog' import knowledgeDialog from './knowledgeDialog'
import * as API_KNOWLED from '@/api/sys.knowled.js' import * as API_KNOWLED from '@/api/sys.knowled.js'
import graphChart from '@/components/echarts/graphChart' import graphChart from '@/components/echarts/graphChart'
...@@ -56,230 +53,17 @@ export default { ...@@ -56,230 +53,17 @@ export default {
}, { }, {
value: 4, value: 4,
label: '客户' label: '客户'
}, {
value: 5,
label: '成员'
} }
], ],
value: 1, value: 4,
input: '', state: '中国银行保险监督管理委员会',
state: '',
knowledname: {}, knowledname: {},
knowledid: '', knowledid: '',
knowledData: [], knowledData: [],
mapData: { mapData: {},
nodes: [
{
category: 0,
color: '#4f19c7',
customerId: '83449',
customerName: '中国银行保险监督管理委员会',
id: '83449',
name: '中国银行保险监督管理委员会',
refId: '6286628186264322878',
symbolSize: 30,
value: 10
},
{
category: 0,
code: '',
color: '#8419c7',
id: '93232',
name: '2019年中国银行保险监督管理委员会驻场项目',
projectId: '93232',
projectName: '2019年中国银行保险监督管理委员会驻场项目',
refId: '7906013387793795048',
symbolSize: 50,
value: 10
},
{
category: 0,
code: '',
color: '#8419c7',
id: '93231',
name: '保监会2018年驻场项目',
projectId: '93231',
projectName: '保监会2018年驻场项目',
refId: '7633172723624484172',
symbolSize: 50,
value: 10
},
{
category: 0,
color: '#199fc7',
id: '90243',
name: '2019年中国银行保险监督管理委员会维保项目',
nicheId: '90243',
nicheName: '2019年中国银行保险监督管理委员会维保项目',
refId: '6102089388333429693',
symbolSize: 50,
value: 10
},
{
category: 0,
color: '#199fc7',
id: '90242',
name: '2019年中国银行保险监督管理委员会维保项目',
nicheId: '90242',
nicheName: '2019年中国银行保险监督管理委员会维保项目',
refId: '5460092193160790682',
symbolSize: 50,
value: 10
},
{
category: 0,
color: '#b9c719',
id: '87336',
memberId: '87336',
memberName: '王伟',
name: '王伟',
refId: '4624570720492670093',
symbolSize: 10,
value: 10
}
],
links: [
{
customer: {
category: 0,
color: '#4f19c7',
customerId: '83449',
customerName: '中国银行保险监督管理委员会',
id: '83449',
name: '中国银行保险监督管理委员会',
refId: '6286628186264322878',
symbolSize: 10,
value: 10
},
id: '80577',
indexName: '',
project: {
category: 0,
code: '',
color: '#8419c7',
id: '93232',
name: '2019年中国银行保险监督管理委员会驻场项目',
projectId: '93232',
projectName: '2019年中国银行保险监督管理委员会驻场项目',
refId: '7906013387793795048',
symbolSize: 10,
value: 10
},
source: '83449',
target: '93232'
},
{
customer: {
category: 0,
color: '#4f19c7',
customerId: '83449',
customerName: '中国银行保险监督管理委员会',
id: '83449',
name: '中国银行保险监督管理委员会',
refId: '6286628186264322878',
symbolSize: 10,
value: 10
},
id: '80576',
indexName: '',
project: {
category: 0,
code: '',
color: '#8419c7',
id: '93231',
name: '保监会2018年驻场项目',
projectId: '93231',
projectName: '保监会2018年驻场项目',
refId: '7633172723624484172',
symbolSize: 10,
value: 10
},
source: '83449',
target: '93231'
},
{
customer: {
category: 0,
color: '#4f19c7',
customerId: '83449',
customerName: '中国银行保险监督管理委员会',
id: '83449',
name: '中国银行保险监督管理委员会',
refId: '6286628186264322878',
symbolSize: 10,
value: 10
},
id: '78195',
indexName: '',
niche: {
category: 0,
color: '#199fc7',
id: '90243',
name: '2019年中国银行保险监督管理委员会维保项目',
nicheId: '90243',
nicheName: '2019年中国银行保险监督管理委员会维保项目',
refId: '6102089388333429693',
symbolSize: 10,
value: 10
},
source: '83449',
target: '90243'
},
{
customer: {
category: 0,
color: '#4f19c7',
customerId: '83449',
customerName: '中国银行保险监督管理委员会',
id: '83449',
name: '中国银行保险监督管理委员会',
refId: '6286628186264322878',
symbolSize: 10,
value: 10
},
id: '78194',
indexName: '',
niche: {
category: 0,
color: '#199fc7',
id: '90242',
name: '2019年中国银行保险监督管理委员会维保项目',
nicheId: '90242',
nicheName: '2019年中国银行保险监督管理委员会维保项目',
refId: '5460092193160790682',
symbolSize: 10,
value: 10
},
source: '83449',
target: '90242'
},
{
customer: {
category: 0,
color: '#4f19c7',
customerId: '83449',
customerName: '中国银行保险监督管理委员会',
id: '83449',
name: '中国银行保险监督管理委员会',
refId: '6286628186264322878',
symbolSize: 10,
value: 10
},
id: '74409',
indexName: '',
member: {
category: 0,
color: '#b9c719',
id: '87336',
memberId: '87336',
memberName: '王伟',
name: '王伟',
refId: '4624570720492670093',
symbolSize: 10,
value: 10
},
source: '83449',
target: '87336'
}
]
},
knowledgeDialogShow: false knowledgeDialogShow: false
} }
}, },
...@@ -289,22 +73,24 @@ export default { ...@@ -289,22 +73,24 @@ export default {
} }
}, },
mounted () { mounted () {
this.handleSelect({ id: '83449' })
}, },
methods: { methods: {
// 根据name查id // 根据name查id
querySearch (queryString, cb) { querySearch (queryString, cb) {
API_KNOWLED.GetKnowledgeGraph(queryString, this.value).then(res => { API_KNOWLED.getByName(queryString, this.value).then(res => {
this.knowledData = res.data this.knowledData = res.data
for (var i = 0; i < this.knowledData.length; i++) { for (var i = 0; i < this.knowledData.length; i++) {
if (this.value === 1) { if (this.value === 1) { // 项目
this.knowledData[i].value = this.knowledData[i].projectName this.knowledData[i].value = this.knowledData[i].projectName
} else if (this.value === 2) { } else if (this.value === 2) { // 销售
this.knowledData[i].value = this.knowledData[i].memberName this.knowledData[i].value = this.knowledData[i].memberName
} else if (this.value === 3) { } else if (this.value === 3) { // 商机
this.knowledData[i].value = this.knowledData[i].nicheName this.knowledData[i].value = this.knowledData[i].nicheName
} else { } else if (this.value === 4) { // 客户
this.knowledData[i].value = this.knowledData[i].customerName this.knowledData[i].value = this.knowledData[i].customerName
} else { // 成员
this.knowledData[i].value = this.knowledData[i].personName
} }
} }
cb(this.knowledData) cb(this.knowledData)
...@@ -313,50 +99,20 @@ export default { ...@@ -313,50 +99,20 @@ export default {
// 点击下拉列表搜索 // 点击下拉列表搜索
handleSelect (item) { handleSelect (item) {
API_KNOWLED.GetKnowledId(item.id, this.value).then(res => { API_KNOWLED.GetKnowledId(item.id, this.value).then(res => {
this.knowledname = res.data this.mapData = res.data
this.topoAll(res.data) localStorage.setItem('data', JSON.stringify(res.data))
})
},
topoAll (value) {
const vm = this
const data = knowledgeJSON[0]
// const data = {
// retLinks: [],
// retNodes: []
// }
const linksArr = []
value.links.forEach((v, i) => {
// v.indexName = '线上的字'
const linksObj = {}
linksObj.id = v.id
linksObj.from = v.from
linksObj.to = v.to
linksObj.label = v.indexName
linksArr.push(linksObj)
}) })
data.retLinks = linksArr
data.retNodes = value.nodes
// console.log('tag', data)
vm.initTopuData(data)
// let obj = {}
// let arr = []
// for (let i = 0; i < data.retNodes.length; i++) {
// obj = { axisX: data.retNodes[i].axisX, axisY: data.retNodes[i].axisY, ip: data.retNodes[i].ip }
// arr.push(obj)
// }
// vm.locationArr = arr
}, },
openDialog () { openDialog () {
let data = '' let data = ''
if (this.state) { if (this.state) {
data = localStorage.getItem('data') data = JSON.parse(localStorage.getItem('data'))
} else { } else {
data = '' data = ''
} }
this.$store.commit('d2admin/information/changeKnowledgeDialogShow', true) this.$store.commit('d2admin/information/changeKnowledgeDialogShow', true)
setTimeout(() => { setTimeout(() => {
this.$refs.child.topoDialog(data, this.value) this.$refs.child.topoDialog(data, this.value, this.state)
}, 500) }, 500)
} }
}, },
......
src/views/system/index/components/mainPageEcharts/mapChina.vue
View file @ b30dab83
...@@ -9,23 +9,168 @@ export default { ...@@ -9,23 +9,168 @@ export default {
return { return {
option: {}, option: {},
chart: null, chart: null,
lengendColor: ['#00E8FF', '#746ef8', '#F8E71C', '#7ED321', '#FF663B'] keyMap: {
customerNumber: '客户数量',
productNumber: '相关产品',
serviceNumber: '服务次数',
contactNumber: '签署合同',
opportunitiesNumber: '商机数量',
budgetMoney: '总体预算',
costMoney: '预计成本',
revenueMoney: '预计收入',
salerNumber: '参与售前',
projectNumber: '项目总数',
endNumber: '完结项目',
employeeNumber: '参与人员'
},
seriesArr: []
} }
}, },
props: ['message', 'idstr'], props: ['message', 'idstr', 'type'],
mounted () { mounted () {
this.drawLine() this.initSeries()
}, },
methods: { methods: {
drawLine () { initSeries () {
// 引入基本模板 this.seriesArr = [
const echarts = require('echarts/lib/echarts') {
// 引入提示框和title组件 name: '', // 黄色点点
// require('echarts/lib/component/tooltip') type: 'scatter',
// require('echarts/lib/component/title') coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: [50, 50],
itemStyle: {
normal: {
color: '#D8BC37' // 标志颜色黄色
}
},
data: '',
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
zlevel: 1
},
{
symbolSize: 5, // 原点
itemStyle: {
normal: {
color: '#fff'
}
},
name: '',
type: 'scatter',
coordinateSystem: 'geo',
data: ''
}
var uploadedData = require('./data-1528971808162-BkOXf61WX.json') ]
echarts.registerMap('china', uploadedData) this.changeSeriesData()
},
changeSeriesData () {
if (this.type === 1) {
this.seriesArr[0].name = '项目总数'
this.seriesArr[0].data = this.convertData('projectNumber')
this.seriesArr[1].name = '完结项目'
this.seriesArr[1].data = this.convertData('endNumber')
this.seriesArr.push({
symbolSize: 0,
name: '参与人员',
type: 'scatter',
coordinateSystem: 'geo',
data: this.convertData('employeeNumber')
})
} else if (this.type === 3) {
this.seriesArr[0].name = '商机数量'
this.seriesArr[0].data = this.convertData('opportunitiesNumber')
this.seriesArr[1].name = '总体预算'
this.seriesArr[1].data = this.convertData('budgetMoney')
this.seriesArr.push({
symbolSize: 0,
name: '预计成本',
type: 'scatter',
coordinateSystem: 'geo',
data: this.convertData('costMoney')
})
this.seriesArr.push({
symbolSize: 0,
name: '预计收入',
type: 'scatter',
coordinateSystem: 'geo',
data: this.convertData('revenueMoney')
})
this.seriesArr.push({
symbolSize: 0,
name: '参与售前',
type: 'scatter',
coordinateSystem: 'geo',
data: this.convertData('salerNumber')
})
} else if (this.type === 4) {
this.seriesArr[0].name = '客户数量'
this.seriesArr[0].data = this.convertData('customerNumber')
this.seriesArr[1].name = '相关产品'
this.seriesArr[1].data = this.convertData('productNumber')
this.seriesArr.push({
symbolSize: 0,
name: '服务次数',
type: 'scatter',
coordinateSystem: 'geo',
data: this.convertData('serviceNumber')
})
this.seriesArr.push({
symbolSize: 0,
name: '签署合同',
type: 'scatter',
coordinateSystem: 'geo',
data: this.convertData('contactNumber')
})
} else if (this.type === 0) {
this.seriesArr[0].name = '客户数量'
this.seriesArr[0].data = this.convertData('customerNumber')
this.seriesArr[1].name = '商机总数'
this.seriesArr[1].data = this.convertData('opportunitiesNumber')
this.seriesArr.push({
symbolSize: 0,
name: '项目总数',
type: 'scatter',
coordinateSystem: 'geo',
data: this.convertData('projectNumber')
})
this.seriesArr.push({
symbolSize: 0,
name: '参与人员',
type: 'scatter',
coordinateSystem: 'geo',
data: this.convertData('employeeNumber')
})
} else {
this.seriesArr = [
{
name: '', // 黄色点点
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: [50, 50],
itemStyle: {
normal: {
color: '#D8BC37' // 标志颜色黄色
}
},
data: this.convertData('number'),
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
zlevel: 1
}
]
}
this.drawLine()
},
convertData (type) {
var geoCoordMap = { // 地理坐标 var geoCoordMap = { // 地理坐标
台湾省: [121.5135, 25.0308], 台湾省: [121.5135, 25.0308],
黑龙江省: [127.9688, 45.368], 黑龙江省: [127.9688, 45.368],
...@@ -61,26 +206,50 @@ export default { ...@@ -61,26 +206,50 @@ export default {
上海市: [121.4648, 31.2891], 上海市: [121.4648, 31.2891],
香港: [114.2784, 22.3057] 香港: [114.2784, 22.3057]
} }
var data = this.message var res = []
var convertData = function (data) { for (var i = 0; i < this.message.length; i++) {
var res = [] var geoCoord = geoCoordMap[this.message[i].province]
for (var i = 0; i < data.length; i++) { if (geoCoord) {
var geoCoord = geoCoordMap[data[i].name] res.push({
if (geoCoord) { name: this.message[i].province,
res.push({ value: geoCoord.concat(this.message[i][type])
name: data[i].name, })
value: geoCoord.concat(data[i].value)
})
}
} }
return res
} }
return res
},
drawLine () {
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入地图数据
var uploadedData = require('./data-1528971808162-BkOXf61WX.json')
// 注入数据
echarts.registerMap('china', uploadedData)
const vm = this const vm = this
// 基于准备好的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 = {
tooltip: {
trigger: 'item',
formatter: function (params) {
var res = params.name + '<br/>'
if (vm.type !== undefined) {
var myseries = vm.option.series
for (var i = 0; i < myseries.length; i++) {
for (var j = 0; j < myseries[i].data.length; j++) {
if (myseries[i].data[j].name === params.name) {
res += myseries[i].name + ' : ' + myseries[i].data[j].value[myseries[i].data[j].value.length - 1] + '</br>'
}
}
}
}
return res
}
},
backgroundColor: { backgroundColor: {
type: 'linear', type: 'linear',
x: 0, x: 0,
...@@ -94,36 +263,7 @@ export default { ...@@ -94,36 +263,7 @@ export default {
}], }],
globalCoord: false // 缺省为 false globalCoord: false // 缺省为 false
}, },
title: {
top: 20,
text: '',
subtext: '',
x: 'center',
textStyle: {
color: '#ccc'
}
},
tooltip: {
transitionDuration: 0,
trigger: 'item',
formatter: function (params) {
if (typeof (params.value)[2] === 'undefined') {
return params.name + ' : ' + params.value
} else {
return params.name + ' : ' + params.value[2]
}
}
},
legend: {
orient: 'vertical',
y: 'bottom',
x: 'right',
data: ['pm2.5'],
textStyle: {
color: '#fff'
}
},
visualMap: { visualMap: {
show: false, show: false,
min: 0, min: 0,
...@@ -159,94 +299,148 @@ export default { ...@@ -159,94 +299,148 @@ export default {
} }
} }
}, },
series: [ series: vm.seriesArr
{ // [
// {
symbolSize: 5, // symbolSize: 5,
label: { // label: {
normal: { // normal: {
formatter: '{b}', // formatter: '{b}',
position: 'right', // position: 'right',
show: true // show: true
}, // },
emphasis: { // emphasis: {
show: true // show: true
} // }
}, // },
itemStyle: { // itemStyle: {
normal: { // normal: {
color: '#fff' // color: '#fff'
} // }
}, // },
name: 'light', // name: '项目总数',
type: 'scatter', // type: 'scatter',
coordinateSystem: 'geo', // coordinateSystem: 'geo',
data: convertData(data) // data: convertData('projectNumber')
// },
// {
}, // symbolSize: 0,
{ // label: {
type: 'map', // normal: {
map: 'china', // formatter: '{b}',
geoIndex: 0, // position: 'right',
aspectScale: 0.75, // 长宽比 // show: true
showLegendSymbol: false, // 存在legend时显示 // },
label: { // emphasis: {
normal: { // show: true
show: false // }
}, // },
emphasis: { // itemStyle: {
show: false, // normal: {
textStyle: { // color: '#fff'
color: '#fff' // }
} // },
} // name: '客户总数',
}, // type: 'scatter',
roam: true, // coordinateSystem: 'geo',
itemStyle: { // data: convertData('customerNumber')
normal: { // },
areaColor: '#000E42', // {
borderColor: '#FFFFFF' // name: '参与人员',
}, // type: 'scatter',
emphasis: { // coordinateSystem: 'geo',
areaColor: '#2B91B7' // symbol: 'pin',
} // symbolSize: [50, 50],
}, // label: {
animation: false, // normal: {
data: data // show: false,
}, // textStyle: {
{ // color: '#fff',
name: 'Top 5', // fontSize: 9
type: 'scatter', // },
coordinateSystem: 'geo', // formatter (value) {
symbol: 'pin', // return value.data.value[2]
symbolSize: [50, 50], // }
label: { // }
normal: { // },
show: true, // itemStyle: {
textStyle: { // normal: {
color: '#fff', // color: '#D8BC37' // 标志颜色黄色
fontSize: 9 // }
}, // },
formatter (value) { // data: convertData('employeeNumber'),
return value.data.value[2] // showEffectOn: 'render',
} // rippleEffect: {
} // brushType: 'stroke'
}, // },
itemStyle: { // hoverAnimation: true,
normal: { // zlevel: 1
color: '#D8BC37' // 标志颜色黄色 // },
} // {
}, // name: '商机总数',
data: convertData(data), // type: 'scatter',
showEffectOn: 'render', // coordinateSystem: 'geo',
rippleEffect: { // symbol: 'pin',
brushType: 'stroke' // symbolSize: 0,
}, // label: {
hoverAnimation: true, // normal: {
zlevel: 1 // show: true,
} // textStyle: {
// color: '#fff',
// fontSize: 9
// },
// formatter (value) {
// return value.data.value[2]
// }
// }
// },
// itemStyle: {
// normal: {
// color: '#D8BC37' // 标志颜色黄色
// }
// },
// data: convertData('opportunitiesNumber'),
// showEffectOn: 'render',
// rippleEffect: {
// brushType: 'stroke'
// },
// hoverAnimation: true,
// zlevel: 1
// }
// {
// type: 'map',
// map: 'china',
// geoIndex: 0,
// aspectScale: 0.75, // 长宽比
// showLegendSymbol: false, // 存在legend时显示
// label: {
// normal: {
// show: false
// },
// emphasis: {
// show: false,
// textStyle: {
// color: '#fff'
// }
// }
// },
// roam: true,
// itemStyle: {
// normal: {
// areaColor: '#000E42',
// borderColor: '#FFFFFF'
// },
// emphasis: {
// areaColor: '#2B91B7'
// }
// },
// animation: false,
// data: data
// },
] // ]
} }
vm.drawBar() vm.drawBar()
// window.addEventListener("resize",()=>{ // window.addEventListener("resize",()=>{
...@@ -269,7 +463,7 @@ export default { ...@@ -269,7 +463,7 @@ export default {
message: function () { message: function () {
const vm = this const vm = this
setTimeout(function () { setTimeout(function () {
vm.drawLine() vm.initSeries()
}, 1000) }, 1000)
// console.log(this.message) // console.log(this.message)
} }
......
src/views/system/index/components/nationwide.vue
View file @ b30dab83
...@@ -7,11 +7,11 @@ ...@@ -7,11 +7,11 @@
<img class="" src="@/assets/img/icon-custom.png" alt=""> <img class="" src="@/assets/img/icon-custom.png" alt="">
<div class="text-box"> <div class="text-box">
<label>客户共计(个)</label> <label>客户共计(个)</label>
<span>3098</span> <span>{{message.allCustomer}}</span>
</div> </div>
<div class="text-box"> <div class="text-box">
<label>本年度新增(个)</label> <label>本年度新增(个)</label>
<span>30</span> <span>{{message.newCustomer}}</span>
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -20,11 +20,11 @@ ...@@ -20,11 +20,11 @@
<img class="" src="@/assets/img/icon-project.png" alt=""> <img class="" src="@/assets/img/icon-project.png" alt="">
<div class="text-box"> <div class="text-box">
<label>项目共计(个)</label> <label>项目共计(个)</label>
<span>3098</span> <span>{{message.allProject}}</span>
</div> </div>
<div class="text-box"> <div class="text-box">
<label>本年度新增(个)</label> <label>本年度新增(个)</label>
<span>30</span> <span>{{message.newProject}}</span>
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -33,11 +33,11 @@ ...@@ -33,11 +33,11 @@
<img class="" src="@/assets/img/icon-bussion.png" alt=""> <img class="" src="@/assets/img/icon-bussion.png" alt="">
<div class="text-box"> <div class="text-box">
<label>商机共计(个)</label> <label>商机共计(个)</label>
<span>3098</span> <span>{{message.allOpportunities}}</span>
</div> </div>
<div class="text-box"> <div class="text-box">
<label>本年度新增(个)</label> <label>本年度新增(个)</label>
<span>30</span> <span>{{message.newOpportunities}}</span>
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -46,11 +46,11 @@ ...@@ -46,11 +46,11 @@
<img class="" src="@/assets/img/icon-people.png" alt=""> <img class="" src="@/assets/img/icon-people.png" alt="">
<div class="text-box"> <div class="text-box">
<label>参与人员(个)</label> <label>参与人员(个)</label>
<span>3098</span> <span>{{message.allEmployee}}</span>
</div> </div>
<div class="text-box"> <div class="text-box">
<label>本年度新增(个)</label> <label>本年度新增(个)</label>
<span>30</span> <span>{{message.newEmployee}}</span>
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -59,36 +59,16 @@ ...@@ -59,36 +59,16 @@
</template> </template>
<script> <script>
import * as API_BASIC from '@/api/sys.basic.js'
export default { export default {
props: ['message'],
data () { data () {
return { return {
pieChart: {},
distributedChart: []
} }
}, },
mounted () { mounted () {
// this.getCustoList()
}, },
methods: { methods: {
// 查询概况页面数据
getCustoList () {
API_BASIC.GetBasicList().then(res => {
// 客户分布
const argcustomer = res.data.customer
const title = []
const data = []
const num = []
argcustomer.forEach(e => {
title.push(e.status)
num.push(e.new)
var dis = { name: e.status, value: e.new }
data.push(dis)
})
this.distributedChart.push({ title: title, num: num, data: data })
})
}
} }
} }
</script> </script>
......
src/views/system/index/page.vue
View file @ b30dab83
...@@ -18,8 +18,8 @@ ...@@ -18,8 +18,8 @@
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
<mapChina :message="mapChina" idstr="mapChina" class="mapChina"></mapChina> <mapChina :message="mapChina" idstr="mapChina" class="mapChina" :type="type"></mapChina>
<component :is="currentComp" :message="dataList" :type="type"/> <component :is="currentComp" :message="chartsData" :type="type"/>
</div> </div>
<div class="rightBlock"> <div class="rightBlock">
<knowledgeGraph class="knowledgeGraph"></knowledgeGraph> <knowledgeGraph class="knowledgeGraph"></knowledgeGraph>
...@@ -55,16 +55,16 @@ export default { ...@@ -55,16 +55,16 @@ export default {
}, },
{ {
value: 1, value: 1,
label: '客户' label: '项目'
}, { }, {
value: 2, value: 3,
label: '商机' label: '商机'
}, { }, {
value: 3, value: 4,
label: '项目' label: '客户'
} }
], ],
newData: [], chartsData: [],
mapChina: [], mapChina: [],
type: 0 type: 0
} }
...@@ -74,7 +74,6 @@ export default { ...@@ -74,7 +74,6 @@ export default {
}, },
methods: { methods: {
getData () { getData () {
this.dataList = { type: this.type }
if (this.type) { if (this.type) {
this.currentComp = 'itemNationwide' this.currentComp = 'itemNationwide'
} else { } else {
...@@ -83,13 +82,11 @@ export default { ...@@ -83,13 +82,11 @@ export default {
this.GET_MapChina() this.GET_MapChina()
}, },
GET_MapChina () { GET_MapChina () {
const type = this.type const type = this.type || null
API_BASIC.GetMapChina(type).then(res => { // API_BASIC.GetMapChina(type).then(res => {
this.newData = res.data API_BASIC.getMapAllData({ type: type }).then(res => {
this.newData.forEach(e => { this.chartsData = res.data.allData
var arr = { name: e.area, value: e.num } this.mapChina = res.data.allByProvince
this.mapChina.push(arr)
})
}) })
} }
......
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