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

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

parent 75c52e84
......@@ -126,3 +126,27 @@ export function getIndustryData () {
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'
})
}
import { service, request, serviceForMock, requestForMock, mock } from './service'
import { request } from './service'
/**
* 获取知识图谱
*/
export function GetKnowledgeGraph (name, type) {
export function getByName (name, type) {
return request({
url: `/tp/map/getByName?name=${name}&type=${type}`,
method: 'get'
......
......@@ -85,7 +85,7 @@
}
}
}
}
.no-line {
text-decoration: none;
}
......@@ -7,21 +7,20 @@
</div>
<h3 class="flex-1">企业运营图谱</h3>
<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">
<el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper">
<img src="~@/assets/img/timg.jpg" class="user-avatar">
<i class="el-icon-caret-bottom" />
</div>
<el-dropdown-menu slot="dropdown" class="user-dropdown">
<router-link to="/">
<el-dropdown-item>
Home
</el-dropdown-item>
</router-link>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<a class="no-line" href="http://111.203.232.175:8085/" target="_blank">管理端 </a>
</el-dropdown-item>
<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-menu>
</el-dropdown>
......@@ -31,10 +30,12 @@
</template>
<script>
import util from '@/libs/util'
export default {
data () {
return {
screenWidth: document.body.clientWidth,
user: '',
num: 0,
nowDate: '',
week: '',
......@@ -91,7 +92,7 @@ export default {
},
mounted () {
this.init()
this.getDate()
// this.getDate()
const that = this
window.onresize = () => {
return (() => {
......@@ -102,15 +103,16 @@ export default {
},
methods: {
logout () {
sessionStorage.clear()
localStorage.clear()
util.cookies.delCookie()
this.$router.push('/login')
},
init () {
this.user = sessionStorage.getItem('user') ? JSON.parse(sessionStorage.getItem('user')).name : '无相关信息'
this.num = sessionStorage.getItem('num')
const user = JSON.parse(sessionStorage.getItem('user'))
if (user.role === 1) {
this.buttenList.push('管理端')
}
},
// 获取时间
getDate () {
const vm = this
this.nowDate = new Date()
......@@ -122,7 +124,6 @@ export default {
change (index) {
this.num = index
sessionStorage.setItem('num', index)
const token = sessionStorage.getItem('token')
switch (index) {
case 0:
this.$router.replace('/index')
......@@ -139,9 +140,6 @@ export default {
case 4:
this.$router.replace('/content/organization/page')
break
case 5:
window.open('http://111.203.232.175:8085/#/dashboard?token=' + token)
// window.open('http://localhost:9528/#/dashboard?token=' + token)
}
}
}
......
......@@ -19,265 +19,277 @@ export default {
methods: {
drawLine () {
const vm = this
// const _list = vm.message
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'
const _list = vm.message
_list.nodes.forEach(item => {
item.itemStyle = {
color: item.color
}
item.emphasis = {
focus: 'adjacency',
label: {
position: 'right',
show: true
}
],
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实例
vm.chart = this.$echarts.init(document.getElementById(vm.idstr))
// 清空图表
......
......@@ -39,4 +39,16 @@ cookies.remove = function (name = 'default') {
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
......@@ -40,10 +40,7 @@ export default {
components: { statistics, distributed },
data () {
return {
yearsOption: [
'2020',
'2021'
],
yearsOption: [],
years: '2021',
chartActive: 1,
dataActive: 'year',
......@@ -55,9 +52,15 @@ export default {
}
},
mounted () {
this.getCustomerTime()
this.getTypeData(1)
},
methods: {
async getCustomerTime () {
const _data = await API_BASIC.getCustomerTime()
this.yearsOption = _data.data
this.years = this.yearsOption[0]
},
getTimeData (param) {
if (param === 'year') {
this.dataActive = 'year'
......
<template>
<d2-container class="enterpriseSize">
<d2-container >
<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">
<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 class="enterpriseSize">
<div class="news-title d-flex jc-between">
<label>公司规模</label>
<span @click="goBack">&lt; 返回</span>
</div>
<div class="centerBlock">
<mapChina :message="mapChina" idstr="mapChinaCompany" class="mapChina"></mapChina>
<div class="section">
<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>
</d2-container>
</template>
......@@ -50,13 +57,16 @@ export default {
})
},
GET_MapChina () {
API_BASIC.GetMapChina(0).then(res => {
API_BASIC.getScaleList().then(res => {
this.newData = res.data
this.newData.forEach(e => {
var arr = { name: e.area, value: e.num }
var arr = { province: e.areaName, number: e.number }
this.mapChina.push(arr)
})
})
},
goBack () {
this.$router.back(-1)
}
}
}
......@@ -67,22 +77,38 @@ export default {
</style>
<style lang="scss">
.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 {
height: calc(100vh - 1.4rem);
padding: .24rem;
border: 1px solid $color-primary;
border-radius: .2rem;
box-sizing: border-box;
overflow-y: auto;
height: calc(100vh - 2.8rem);
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);
}
.centerBlock {
width: calc(100vw - 6rem);
height: calc(100vh - 2.8rem);
}
.mapChina {
height: calc(100vh - 3rem);
}
}
.el-table {
font-size: .16rem;
......
......@@ -4,56 +4,56 @@
<div class="content d-flex">
<div class="flex-1">
<pieChart :message="itemNationWide" idstr="itemNationWide" class="heightCut44"></pieChart>
<p v-if="type=='1'">共计客户 <strong>2655</strong></p>
<p v-if="type=='2'">共计商机 <strong>18792</strong></p>
<p v-if="type=='3'">共计项目 <strong>98231</strong></p>
<p v-if="type=='4'">共计客户 <strong>{{message.allCustomerNumber}}</strong></p>
<p v-if="type=='3'">共计商机 <strong>{{message.allOpportunitiesNumber}}</strong></p>
<p v-if="type=='1'">共计项目 <strong>{{message.allProjectNumber}}</strong></p>
</div>
<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="text-box">
<label>本年度签署合同</label>
<span>3.98 亿</span>
<span>{{message.contactMoney|moneyFormat(8)|numFormat}} 亿</span>
</div>
<div class="text-box">
<label>相关产品</label>
<span>3009</span>
<span>{{message.contactNumber}}</span>
</div>
<div class="text-box">
<label>累计服务次数</label>
<span>3000</span>
<span>{{message.serviceNumber}}</span>
</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="text-box">
<label>预计总收入</label>
<span>3098 亿</span>
<span>{{message.allRevenueMoney|moneyFormat(8)|numFormat}} 亿</span>
</div>
<div class="text-box">
<label>预计总成本</label>
<span>300 亿</span>
<span>{{message.allCostMoney|moneyFormat(8)|numFormat}} 亿</span>
</div>
<div class="text-box">
<label>参与售前</label>
<span>300</span>
<span>{{message.allSalerNumber}}</span>
</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="text-box">
<label>服务次数累计</label>
<span>3098</span>
<span>{{message.serviceNumber}}</span>
</div>
<div class="text-box">
<label>当前参与技术人员</label>
<span>300</span>
<span>{{message.technologyEmployee}}</span>
</div>
<div class="text-box">
<label>当前参与销售人员</label>
<span>300</span>
<span>{{message.saleEmployee}}</span>
</div>
</div>
</div>
......@@ -91,24 +91,9 @@ export default {
methods: {
// 查询概况页面数据
getList () {
if (this.type === 3) {
this.itemNationWide = {
legend: ['启动', '完结', '作废'],
data: [
{ value: 35, name: '启动' },
{ value: 100, name: '完结' },
{ value: 234, name: '作废' }
]
}
} else {
this.itemNationWide = {
legend: ['集成', '软件', '服务'],
data: [
{ value: 335, name: '集成' },
{ value: 310, name: '软件' },
{ value: 234, name: '服务' }
]
}
this.itemNationWide = {
legend: this.message.legend,
data: this.message.data
}
}
}
......
......@@ -7,7 +7,8 @@
:modal-append-to-body=true
append-to-body class="knowledgeDialog">
<div class="leftBox">
<div id="topo"></div>
<!-- <div id="topo"></div> -->
<graphChart :message="mapData" idstr="topo"></graphChart>
</div>
<div class="rightBox">
<div class="search-box">
......@@ -35,7 +36,7 @@
</div>
<h3>关系筛选</h3>
<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>
<div class="inquire" @click="handleChange">查询</div>
</div>
......@@ -44,23 +45,47 @@
<script>
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'
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 {
components: { graphChart },
data () {
return {
options: [
{
value: 1,
label: '项目'
}, {
value: 2,
label: '销售'
}, {
value: 3,
label: '商机'
}, {
value: 4,
label: '客户'
}, {
value: 5,
label: '成员'
}
],
visible: true,
state: '',
knowledname: {},
knowledid: '',
mapData: {},
knowledData: [],
checked: [1],
checked: [1, 2, 3, 4, 5],
checkList: [
{ name: '客户', value: 2 },
{ name: '项目', value: 3 },
{ name: '商机', value: 4 },
{ name: '产品', value: 5 },
{ name: '人员', value: 6 }
{ name: '项目', value: 1 },
{ name: '销售', value: 2 },
{ name: '商机', value: 3 },
{ name: '客户', value: 4 },
{ name: '成员', value: 5 }
],
value: '',
topoData: {} // 接收到的topo数据
......@@ -69,22 +94,30 @@ export default {
mounted () {
},
methods: {
close () {
this.$store.commit('d2admin/information/changeKnowledgeDialogShow', false)
topoDialog (data, value, state) {
const vm = this
vm.value = value
vm.state = state
if (data) {
vm.mapData = data
vm.sourceData = JSON.parse(JSON.stringify(data))
}
},
// 根据name查id
querySearch (queryString, cb) {
API_KNOWLED.GetKnowledgeGraph(queryString, this.value).then(res => {
API_KNOWLED.getByName(queryString, this.value).then(res => {
this.knowledData = res.data
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
} else if (this.value === 2) {
} else if (this.value === 2) { // 销售
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
} else {
} else if (this.value === 4) { // 客户
this.knowledData[i].value = this.knowledData[i].customerName
} else { // 成员
this.knowledData[i].value = this.knowledData[i].personName
}
}
cb(this.knowledData)
......@@ -92,68 +125,31 @@ export default {
},
handleSelectChild (item) {
API_KNOWLED.GetKnowledId(item.id, this.value).then(res => {
this.knowledname = res.data
this.topoAll(res.data)
this.mapData = 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
handleChange () {
const vm = this
const newData = {
retNodes: [],
retLinks: []
}
if (vm.topoData.retNodes) {
vm.topoData.retNodes.forEach((v, i) => {
vm.checked.forEach((a, b) => {
if (v.type === a) {
newData.retNodes.push(v)
const newNodes = []
console.log(vm.sourceData.nodes, vm.checked)
if (vm.sourceData.nodes) {
vm.sourceData.nodes.forEach((v, i) => {
vm.checked.forEach(a => {
if (v.color === colorMap.get(a)) {
newNodes.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)
vis.cgraph(
(snode, dnode, S, B) => {},
false,
info => {}
)
// 关闭
close () {
this.$store.commit('d2admin/information/changeKnowledgeDialogShow', false)
}
}
}
......@@ -170,12 +166,13 @@ export default {
}
.rightBox{
box-sizing: border-box;
width: calc(25% - 4px);
height:calc(100% - 4px);
width: calc(25% - .04rem);
height:calc(100% - .14rem);
background: #000E42;
float: left;
padding-top: .6rem;
padding-top: .5rem;
position: relative;
margin-top: .1rem;
h3{
width: calc(100% - .2rem);
font-size:.16rem;
......
......@@ -25,7 +25,6 @@
</div>
</div>
<!-- <div id="topology"></div> -->
<graphChart :message="mapData" idstr="graphChart" class="heightCut44"></graphChart>
<div class="open" @click="openDialog"></div>
<knowledgeDialog v-if="knowledgeDialogShow" ref="child"></knowledgeDialog>
......@@ -33,8 +32,6 @@
</template>
<script>
// 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'
import graphChart from '@/components/echarts/graphChart'
......@@ -56,230 +53,17 @@ export default {
}, {
value: 4,
label: '客户'
}, {
value: 5,
label: '成员'
}
],
value: 1,
input: '',
state: '',
value: 4,
state: '中国银行保险监督管理委员会',
knowledname: {},
knowledid: '',
knowledData: [],
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'
}
]
},
mapData: {},
knowledgeDialogShow: false
}
},
......@@ -289,22 +73,24 @@ export default {
}
},
mounted () {
this.handleSelect({ id: '83449' })
},
methods: {
// 根据name查id
querySearch (queryString, cb) {
API_KNOWLED.GetKnowledgeGraph(queryString, this.value).then(res => {
API_KNOWLED.getByName(queryString, this.value).then(res => {
this.knowledData = res.data
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
} else if (this.value === 2) {
} else if (this.value === 2) { // 销售
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
} else {
} else if (this.value === 4) { // 客户
this.knowledData[i].value = this.knowledData[i].customerName
} else { // 成员
this.knowledData[i].value = this.knowledData[i].personName
}
}
cb(this.knowledData)
......@@ -313,50 +99,20 @@ export default {
// 点击下拉列表搜索
handleSelect (item) {
API_KNOWLED.GetKnowledId(item.id, this.value).then(res => {
this.knowledname = res.data
this.topoAll(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)
this.mapData = res.data
localStorage.setItem('data', JSON.stringify(res.data))
})
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 () {
let data = ''
if (this.state) {
data = localStorage.getItem('data')
data = JSON.parse(localStorage.getItem('data'))
} else {
data = ''
}
this.$store.commit('d2admin/information/changeKnowledgeDialogShow', true)
setTimeout(() => {
this.$refs.child.topoDialog(data, this.value)
this.$refs.child.topoDialog(data, this.value, this.state)
}, 500)
}
},
......
......@@ -9,23 +9,168 @@ export default {
return {
option: {},
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 () {
this.drawLine()
this.initSeries()
},
methods: {
drawLine () {
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入提示框和title组件
// require('echarts/lib/component/tooltip')
// require('echarts/lib/component/title')
initSeries () {
this.seriesArr = [
{
name: '', // 黄色点点
type: 'scatter',
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 = { // 地理坐标
台湾省: [121.5135, 25.0308],
黑龙江省: [127.9688, 45.368],
......@@ -61,26 +206,50 @@ export default {
上海市: [121.4648, 31.2891],
香港: [114.2784, 22.3057]
}
var data = this.message
var convertData = function (data) {
var res = []
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name]
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
})
}
var res = []
for (var i = 0; i < this.message.length; i++) {
var geoCoord = geoCoordMap[this.message[i].province]
if (geoCoord) {
res.push({
name: this.message[i].province,
value: geoCoord.concat(this.message[i][type])
})
}
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
// 基于准备好的dom,初始化echarts实例
vm.chart = echarts.init(document.getElementById(vm.idstr))
// 清空图表
vm.chart.clear()
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: {
type: 'linear',
x: 0,
......@@ -94,36 +263,7 @@ export default {
}],
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: {
show: false,
min: 0,
......@@ -159,94 +299,148 @@ export default {
}
}
},
series: [
{
series: vm.seriesArr
// [
// {
symbolSize: 5,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#fff'
}
},
name: 'light',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data)
// symbolSize: 5,
// label: {
// normal: {
// formatter: '{b}',
// position: 'right',
// show: true
// },
// emphasis: {
// show: true
// }
// },
// itemStyle: {
// normal: {
// color: '#fff'
// }
// },
// name: '项目总数',
// type: 'scatter',
// coordinateSystem: 'geo',
// data: convertData('projectNumber')
// },
// {
},
{
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
},
{
name: 'Top 5',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: [50, 50],
label: {
normal: {
show: true,
textStyle: {
color: '#fff',
fontSize: 9
},
formatter (value) {
return value.data.value[2]
}
}
},
itemStyle: {
normal: {
color: '#D8BC37' // 标志颜色黄色
}
},
data: convertData(data),
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
zlevel: 1
}
// symbolSize: 0,
// label: {
// normal: {
// formatter: '{b}',
// position: 'right',
// show: true
// },
// emphasis: {
// show: true
// }
// },
// itemStyle: {
// normal: {
// color: '#fff'
// }
// },
// name: '客户总数',
// type: 'scatter',
// coordinateSystem: 'geo',
// data: convertData('customerNumber')
// },
// {
// name: '参与人员',
// type: 'scatter',
// coordinateSystem: 'geo',
// symbol: 'pin',
// symbolSize: [50, 50],
// label: {
// normal: {
// show: false,
// textStyle: {
// color: '#fff',
// fontSize: 9
// },
// formatter (value) {
// return value.data.value[2]
// }
// }
// },
// itemStyle: {
// normal: {
// color: '#D8BC37' // 标志颜色黄色
// }
// },
// data: convertData('employeeNumber'),
// showEffectOn: 'render',
// rippleEffect: {
// brushType: 'stroke'
// },
// hoverAnimation: true,
// zlevel: 1
// },
// {
// name: '商机总数',
// type: 'scatter',
// coordinateSystem: 'geo',
// symbol: 'pin',
// symbolSize: 0,
// label: {
// normal: {
// 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()
// window.addEventListener("resize",()=>{
......@@ -269,7 +463,7 @@ export default {
message: function () {
const vm = this
setTimeout(function () {
vm.drawLine()
vm.initSeries()
}, 1000)
// console.log(this.message)
}
......
......@@ -7,11 +7,11 @@
<img class="" src="@/assets/img/icon-custom.png" alt="">
<div class="text-box">
<label>客户共计(个)</label>
<span>3098</span>
<span>{{message.allCustomer}}</span>
</div>
<div class="text-box">
<label>本年度新增(个)</label>
<span>30</span>
<span>{{message.newCustomer}}</span>
</div>
</div>
</el-col>
......@@ -20,11 +20,11 @@
<img class="" src="@/assets/img/icon-project.png" alt="">
<div class="text-box">
<label>项目共计(个)</label>
<span>3098</span>
<span>{{message.allProject}}</span>
</div>
<div class="text-box">
<label>本年度新增(个)</label>
<span>30</span>
<span>{{message.newProject}}</span>
</div>
</div>
</el-col>
......@@ -33,11 +33,11 @@
<img class="" src="@/assets/img/icon-bussion.png" alt="">
<div class="text-box">
<label>商机共计(个)</label>
<span>3098</span>
<span>{{message.allOpportunities}}</span>
</div>
<div class="text-box">
<label>本年度新增(个)</label>
<span>30</span>
<span>{{message.newOpportunities}}</span>
</div>
</div>
</el-col>
......@@ -46,11 +46,11 @@
<img class="" src="@/assets/img/icon-people.png" alt="">
<div class="text-box">
<label>参与人员(个)</label>
<span>3098</span>
<span>{{message.allEmployee}}</span>
</div>
<div class="text-box">
<label>本年度新增(个)</label>
<span>30</span>
<span>{{message.newEmployee}}</span>
</div>
</div>
</el-col>
......@@ -59,36 +59,16 @@
</template>
<script>
import * as API_BASIC from '@/api/sys.basic.js'
export default {
props: ['message'],
data () {
return {
pieChart: {},
distributedChart: []
}
},
mounted () {
// this.getCustoList()
},
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>
......
......@@ -18,8 +18,8 @@
</el-option>
</el-select>
</div>
<mapChina :message="mapChina" idstr="mapChina" class="mapChina"></mapChina>
<component :is="currentComp" :message="dataList" :type="type"/>
<mapChina :message="mapChina" idstr="mapChina" class="mapChina" :type="type"></mapChina>
<component :is="currentComp" :message="chartsData" :type="type"/>
</div>
<div class="rightBlock">
<knowledgeGraph class="knowledgeGraph"></knowledgeGraph>
......@@ -55,16 +55,16 @@ export default {
},
{
value: 1,
label: '客户'
label: '项目'
}, {
value: 2,
value: 3,
label: '商机'
}, {
value: 3,
label: '项目'
value: 4,
label: '客户'
}
],
newData: [],
chartsData: [],
mapChina: [],
type: 0
}
......@@ -74,7 +74,6 @@ export default {
},
methods: {
getData () {
this.dataList = { type: this.type }
if (this.type) {
this.currentComp = 'itemNationwide'
} else {
......@@ -83,13 +82,11 @@ export default {
this.GET_MapChina()
},
GET_MapChina () {
const type = this.type
API_BASIC.GetMapChina(type).then(res => {
this.newData = res.data
this.newData.forEach(e => {
var arr = { name: e.area, value: e.num }
this.mapChina.push(arr)
})
const type = this.type || null
// API_BASIC.GetMapChina(type).then(res => {
API_BASIC.getMapAllData({ type: type }).then(res => {
this.chartsData = res.data.allData
this.mapChina = res.data.allByProvince
})
}
......
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