Skip to content

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

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

parent 75c52e84
Expand all 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 () {
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({
url: `/tp/map/getByName?name=${name}&type=${type}`,
method: 'get'
......
src/assets/style/headerLayout.scss
View file @ b30dab83
......@@ -85,7 +85,7 @@
}
}
}
}
.no-line {
text-decoration: none;
}
src/components/HeaderLayout/index.vue
View file @ b30dab83
......@@ -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)
}
}
}
......
src/components/echarts/graphChart.vue
View file @ b30dab83
This diff is collapsed.
src/libs/util.cookies.js
View file @ b30dab83
......@@ -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
src/views/system/index/components/deptOperation.vue
View file @ b30dab83
......@@ -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'
......
src/views/system/index/components/enterpriseSize.vue
View file @ b30dab83
<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;
......
src/views/system/index/components/itemNationwide.vue
View file @ b30dab83
......@@ -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
}
}
}
......
src/views/system/index/components/knowledgeDialog.vue
View file @ b30dab83
......@@ -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;
......
src/views/system/index/components/nationwide.vue
View file @ b30dab83
......@@ -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>
......
src/views/system/index/page.vue
View file @ b30dab83
......@@ -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