Commit 3e1e1eb3 authored by 乐宝呗666's avatar 乐宝呗666

修改bug

parent 872bec7b
......@@ -17,7 +17,7 @@
<title><%= VUE_APP_TITLE %></title>
<style>
html, body, #app { height: 100%; margin: 0px; padding: 0px; width: 100%; }
.d2-home { background-color: #303133; height: 100%; display: flex; flex-direction: column; }
.d2-home { background-color: #000E42; height: 100%; display: flex; flex-direction: column; }
.d2-home__main { user-select: none; width: 100%; flex-grow: 1; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.d2-home__footer { width: 100%; flex-grow: 0; text-align: center; padding: 1em 0; }
.d2-home__footer > a { font-size: 12px; color: #ABABAB; text-decoration: none; }
......@@ -43,13 +43,13 @@
src="./image/loading/loading-spin.svg"
alt="loading">
</div>
<div class="d2-home__footer">
<!-- <div class="d2-home__footer">
<a
href="https://github.com/d2-projects/d2-admin"
target="_blank">
https://github.com/d2-projects/d2-admin
</a>
</div>
</div> -->
</div>
</div>
<!-- 使用 CDN 加速的 JS 文件,配置在 vue.config.js 下 -->
......
......@@ -12,7 +12,7 @@ export default {
'$i18n.locale': 'i18nHandle'
},
created () {
this.i18nHandle(this.$i18n.locale)
// this.i18nHandle(this.$i18n.locale)
},
methods: {
i18nHandle (val, oldVal) {
......
......@@ -13,6 +13,13 @@ export function getCustomerByProvince () {
method: 'get'
})
}
// 用户端客户合同分布
export function getCustomerByAmount () {
return request({
url: '/tp/customerInformation/getCustomerByAmount',
method: 'get'
})
}
// 获取客户图标信息
export function GetClientList () {
return request({
......
import { request } from './service'
// 获取组织结构树-PC
export function getDeptTree () {
return request({
url: '/tp/organ/getDeptTree',
method: 'get'
})
}
// 查询相应部门或中心下的统计的招聘信息
export function recruitmentStatistics (params) {
return request({
url: '/tp/recruitment/recruitmentStatistics',
method: 'get',
params
})
}
......@@ -15,7 +15,7 @@ function createService () {
baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_REQUEST_URL : process.env.VUE_APP_BASE_API,
// baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
timeout: 60000 // request timeout
})
// 请求拦截
service.interceptors.request.use(
......
......@@ -120,9 +120,9 @@ export function productDemonstration (params) {
})
}
// 获取行业信息
export function getIndustryData () {
export function getIndustryList () {
return request({
url: '/tp/customerInformation/getList',
url: '/tp/customerInformation/getIndustryList',
method: 'post'
})
}
......
......@@ -10,9 +10,10 @@ export function getByName (name, type) {
})
}
// 根据客户id查询
export function GetKnowledId (id, type) {
export function GetKnowledId (params) {
return request({
url: `/tp/map/select?id=${id}&type=${type} `,
method: 'get'
url: '/tp/map/select',
method: 'get',
params
})
}
......@@ -34,8 +34,8 @@ export default {
formatter: '{b}: {c}'
},
grid: {
top: '15%',
left: '10%',
top: '18%',
left: '15%',
right: '10%',
bottom: '30%'
},
......@@ -47,7 +47,7 @@ export default {
type: 'shadow'
},
axisLabel: {
rotate: 30
rotate: vm.message.xAxis.length > 4 ? 30 : 0
},
axisLine: {
lineStyle: {
......
......@@ -40,7 +40,7 @@ export default {
},
grid: {
top: '25%',
left: '10%',
left: '15%',
right: '10%',
bottom: '30%'
},
......@@ -52,7 +52,7 @@ export default {
type: 'shadow'
},
axisLabel: {
rotate: 30
rotate: vm.message.xAxis.length > 2 ? 30 : 0
},
axisLine: {
lineStyle: {
......@@ -97,7 +97,6 @@ export default {
],
series: vm.message.data
}
console.log(vm.message)
vm.drawBar()
// window.addEventListener("resize",()=>{
// chart.resize();
......
<template>
<div :id="idstr"></div>
<!-- <div class="wrapper">
<div class="back text-right" @click="goBack" v-if="message.parentId">&lt; 返回</div> -->
<div :id="idstr" class="h-100"></div>
<!-- </div> -->
</template>
<script>
export default {
data () {
return {
dataObj: {},
option: {},
chart: null,
clickNum: [1, 1, 1, 1, 1]
recordList: []
}
},
props: ['message', 'idstr'],
......@@ -19,7 +21,7 @@ export default {
methods: {
drawLine () {
const vm = this
const _list = vm.message
const _list = vm.message.data
_list.nodes.forEach(item => {
item.itemStyle = {
color: item.color
......@@ -362,9 +364,21 @@ export default {
vm.chart.setOption(vm.option)
vm.eventList()
},
goBack () {
if (this.recordList.length) {
const popItem = this.recordList.pop()
this.$emit('downData', { id: popItem.parentId, color: popItem.parentType })
}
},
eventList () {
const vm = this
vm.chart.off('click')
vm.chart.on('click', function (params) {
// if (vm.message.isLeaf) return
if (vm.message.parentId === undefined) return
vm.recordList.push({ name: params.name, id: params.data.id, parentId: vm.message.parentId, color: params.data.color, parentType: vm.message.type })
// console.log(vm.recordList)
vm.$emit('downData', params.data)
})
}
},
......@@ -383,5 +397,16 @@ export default {
</script>
<style lang="scss" scoped>
.wrapper{
position: relative;
.back {
position: absolute;
top: 0;
right: 0.24rem;
color: #fff;
font-size: .12rem;
z-index: 1;
cursor: pointer;
}
}
</style>
......@@ -36,7 +36,7 @@ export default {
grid: {
top: '20%',
left: '10%',
bottom: '15%'
bottom: '18%'
},
xAxis: {
type: 'category',
......
......@@ -29,7 +29,7 @@ export default {
}
},
grid: {
top: '15%',
top: '18%',
left: '10%',
right: '10%',
bottom: '15%'
......
......@@ -17,121 +17,119 @@ export default {
methods: {
drawLine () {
const vm = this
const data = {
name: 'flare',
children: [
{
name: 'analytics',
children: [
{
name: 'cluster',
children: [
{ name: 'AgglomerativeCluster', value: 3938 },
{ name: 'CommunityStructure', value: 3812 },
{ name: 'HierarchicalCluster', value: 6714 },
{ name: 'MergeEdge', value: 743 }
]
},
{
name: 'graph',
children: [
{ name: 'BetweennessCentrality', value: 3534 },
{ name: 'LinkDistance', value: 5731 },
{ name: 'MaxFlowMinCut', value: 7840 },
{ name: 'ShortestPaths', value: 5914 },
{ name: 'SpanningTree', value: 3416 }
]
},
{
name: 'optimization',
children: [
{ name: 'AspectRatioBanker', value: 7074 }
]
}
]
},
{
name: 'animate',
children: [
{ name: 'Easing', value: 17010 },
{ name: 'FunctionSequence', value: 5842 },
{
name: 'interpolate',
children: [
{ name: 'ArrayInterpolator', value: 1983 },
{ name: 'ColorInterpolator', value: 2047 },
{ name: 'DateInterpolator', value: 1375 },
{ name: 'Interpolator', value: 8746 },
{ name: 'MatrixInterpolator', value: 2202 },
{ name: 'NumberInterpolator', value: 1382 },
{ name: 'ObjectInterpolator', value: 1629 },
{ name: 'PointInterpolator', value: 1675 },
{ name: 'RectangleInterpolator', value: 2042 }
]
},
{ name: 'ISchedulable', value: 1041 },
{ name: 'Parallel', value: 5176 },
{ name: 'Pause', value: 449 },
{ name: 'Scheduler', value: 5593 },
{ name: 'Sequence', value: 5534 },
{ name: 'Transition', value: 9201 },
{ name: 'Transitioner', value: 19975 },
{ name: 'TransitionEvent', value: 1116 },
{ name: 'Tween', value: 6006 }
]
},
{
name: 'data',
children: [
{
name: 'converters',
children: [
{ name: 'Converters', value: 721 },
{ name: 'DelimitedTextConverter', value: 4294 },
{ name: 'GraphMLConverter', value: 9800 },
{ name: 'IDataConverter', value: 1314 },
{ name: 'JSONConverter', value: 2220 }
]
},
{ name: 'DataField', value: 1759 },
{ name: 'DataSchema', value: 2165 },
{ name: 'DataSet', value: 586 },
{ name: 'DataSource', value: 3331 },
{ name: 'DataTable', value: 772 },
{ name: 'DataUtil', value: 3322 }
]
},
{
name: 'display',
children: [
{ name: 'DirtySprite', value: 8833 },
{ name: 'LineSprite', value: 1732 },
{ name: 'RectSprite', value: 3623 },
{ name: 'TextSprite', value: 10066 }
]
},
{
name: 'flex',
children: [
{ name: 'FlareVis', value: 4116 }
]
},
{
name: 'physics',
children: [
{ name: 'DragForce', value: 1082 },
{ name: 'GravityForce', value: 1336 },
{ name: 'IForce', value: 319 },
{ name: 'NBodyForce', value: 10498 },
{ name: 'Particle', value: 2822 },
{ name: 'Simulation', value: 9983 },
{ name: 'Spring', value: 2213 },
{ name: 'SpringForce', value: 1681 }
]
}
]
}
// const data = {
// name: 'flare',
// children: [
// {
// name: 'analytics',
// children: [
// {
// name: 'cluster',
// children: [
// { name: 'AgglomerativeCluster', value: 3938 },
// { name: 'CommunityStructure', value: 3812 },
// { name: 'HierarchicalCluster', value: 6714 },
// { name: 'MergeEdge', value: 743 }
// ]
// },
// {
// name: 'graph',
// children: [
// { name: 'BetweennessCentrality', value: 3534 },
// { name: 'LinkDistance', value: 5731 },
// { name: 'MaxFlowMinCut', value: 7840 },
// { name: 'ShortestPaths', value: 5914 },
// { name: 'SpanningTree', value: 3416 }
// ]
// },
// {
// name: 'optimization',
// children: [
// { name: 'AspectRatioBanker', value: 7074 }
// ]
// }
// ]
// },
// {
// name: 'animate',
// children: [
// { name: 'Easing', value: 17010 },
// { name: 'FunctionSequence', value: 5842 },
// {
// name: 'interpolate',
// children: [
// { name: 'ArrayInterpolator', value: 1983 },
// { name: 'ColorInterpolator', value: 2047 },
// { name: 'DateInterpolator', value: 1375 },
// { name: 'Interpolator', value: 8746 },
// { name: 'MatrixInterpolator', value: 2202 },
// { name: 'NumberInterpolator', value: 1382 },
// { name: 'ObjectInterpolator', value: 1629 },
// { name: 'PointInterpolator', value: 1675 },
// { name: 'RectangleInterpolator', value: 2042 }
// ]
// },
// { name: 'ISchedulable', value: 1041 },
// { name: 'Parallel', value: 5176 },
// { name: 'Pause', value: 449 },
// { name: 'Scheduler', value: 5593 },
// { name: 'Sequence', value: 5534 },
// { name: 'Transition', value: 9201 },
// { name: 'Transitioner', value: 19975 },
// { name: 'TransitionEvent', value: 1116 },
// { name: 'Tween', value: 6006 }
// ]
// },
// {
// name: 'data',
// children: [
// {
// name: 'converters',
// children: [
// { name: 'Converters', value: 721 },
// { name: 'DelimitedTextConverter', value: 4294 },
// { name: 'GraphMLConverter', value: 9800 },
// { name: 'IDataConverter', value: 1314 },
// { name: 'JSONConverter', value: 2220 }
// ]
// },
// { name: 'DataField', value: 1759 },
// { name: 'DataSchema', value: 2165 },
// { name: 'DataSet', value: 586 },
// { name: 'DataSource', value: 3331 },
// { name: 'DataTable', value: 772 },
// { name: 'DataUtil', value: 3322 }
// ]
// },
// {
// name: 'display',
// children: [
// { name: 'DirtySprite', value: 8833 },
// { name: 'LineSprite', value: 1732 },
// { name: 'RectSprite', value: 3623 },
// { name: 'TextSprite', value: 10066 }
// ]
// },
// {
// name: 'flex',
// children: []
// },
// {
// name: 'physics',
// children: [
// { name: 'DragForce', value: 1082 },
// { name: 'GravityForce', value: 1336 },
// { name: 'IForce', value: 319 },
// { name: 'NBodyForce', value: 10498 },
// { name: 'Particle', value: 2822 },
// { name: 'Simulation', value: 9983 },
// { name: 'Spring', value: 2213 },
// { name: 'SpringForce', value: 1681 }
// ]
// }
// ]
// }
const data = vm.message
// 基于准备好的dom,初始化echarts实例
vm.chart = this.$echarts.init(document.getElementById(vm.idstr))
// 清空图表
......
......@@ -26,6 +26,7 @@ export default {
vm.chart = echarts.init(document.getElementById(vm.idstr))
// 清空图表
vm.chart.clear()
console.log(vm.message)
vm.option = {
// 图表主标题
// 提示框组件
......@@ -80,7 +81,7 @@ export default {
color: '#ffffff', // 在波浪上方时的文字颜色
insideColor: '#ffffff', // 在波浪下方时的文字颜色
textStyle: {
fontSize: 24
fontSize: 14
}
},
// 图形的高亮样式
......
......@@ -4,8 +4,6 @@ import business from './modules/business'
import client from './modules/client'
import organization from './modules/organization'
import child from './modules/child'
console.log(child, 'child')
console.log(organization, 'organization')
// 由于懒加载页面太多的话会造成webpack热更新太慢,所以开发环境不使用懒加载,只有生产环境使用懒加载
const _import = require('@/libs/util.import.' + process.env.NODE_ENV)
......
......@@ -11,22 +11,22 @@
<div class="flex-1">
<div class="box">
<div class="boxTitle">客户总数<span>(个)</span></div>
<div class="boxValue">{{clientObj.total['客户总数']}}</div>
<div class="boxValue">{{totalObj}}</div>
</div>
<div class="box">
<div class="boxTitle">商机客户<span>(个)</span></div>
<div class="boxValue">{{clientObj.total['最终用户']}}</div>
<div class="boxValue">{{totalObj}}</div>
</div>
</div>
<div class="horizontal"></div>
<div class="flex-1">
<div class="box">
<div class="boxTitle">集成商<span>(个)</span></div>
<div class="boxValue">{{clientObj.total['集成商']}}</div>
<div class="boxValue">{{totalObj}}</div>
</div>
<div class="box">
<div class="boxTitle">本年新增<span>(个)</span></div>
<div class="boxValue">{{clientObj.total['本年新增客户']}}</div>
<div class="boxValue">{{totalObj}}</div>
</div>
</div>
<div class="horizontal"></div>
......@@ -234,29 +234,21 @@ export default {
components: { headerLayout, pieChart, barChart, mulBarChart, serviceAnalysis },
data () {
return {
loading: true,
clientData: {}, // 客户数据
clientObj: {}, // 客户数据
totalObj: {}, // 客户数据
typeDistribute: {}, // 业务分布
customDistribute: {}, // 地区分布
clientAnalysis: {}, // 客户分析
input: '',
state: '',
restaurants: [],
params: {
name: ''
},
customername: {},
customerid: '',
selectYear: '综合',
yearList: ['综合', '按资金', '按项目']
selectYear: '综合', // 选中重要客户项
yearList: ['综合', '按资金', '按项目'] // 重要客户下拉框
}
},
mounted () {
this.getClientList()
this.GetCustomerInfo()
this.getCustomerByProvince()
this.getDistribution()
this.getCustomerByAmount()
},
methods: {
// 行业分布
......@@ -278,6 +270,11 @@ export default {
const _data = await API_CLIENT.getCustomerByProvince()
this.customDistribute = _data.data
},
// 合同分布
async getCustomerByAmount () {
const _data = await API_CLIENT.getCustomerByAmount()
this.clientAnalysis = _data.data
},
// 默认展示公司信息
GetCustomerInfo () {
API_CLIENT.CustomerInfo().then(res => {
......@@ -299,57 +296,6 @@ export default {
API_CLIENT.GetCustomerId(item.id).then(res => {
this.customername = res.data
})
},
// 客户图表数据
getClientList () {
API_CLIENT.GetClientList().then(res => {
this.loading = false
this.clientData = res
this.clientObj = this.clientData.data
// 行业分布
// const arg = this.clientObj.status
// const title = []
// const da = []
// arg.forEach(element => {
// title.push(element.status)
// var jso = { name: element.status, value: element.num }
// da.push(jso)
// })
// this.typeDistribute = { legend: title, data: da }
// 客户地区分布
// const argdis = this.clientObj.area
// const titdis = []
// const dadis = []
// argdis.forEach(e => {
// titdis.push(e.area)
// var dis = { name: e.area, value: e.num }
// dadis.push(dis)
// })
// this.customDistribute = { xAxis: titdis, data: dadis }
// 客户合同分析
const legend = this.clientObj.analysis.title
const seriesData = this.clientObj.analysis.data
const xAxis = Object.keys(this.clientObj.analysis.data)
const _data = []
for (let i = 0; i < legend.length; i++) {
var _obj = {
name: legend[i],
type: 'bar',
data: []
}
for (const key in seriesData) {
_obj.data.push(seriesData[key][i].num)
}
_data.push(_obj)
}
this.clientAnalysis = {
legend: legend,
xAxis: xAxis,
yAxis: '单位:个',
data: _data
}
})
}
}
}
......
<template>
<div>
<div class="d-flex search-box jc-end">
<el-select v-model="selectTypeId" size="mini" @change="getCashFlowYear">
<el-select v-model="selectTypeId" style="width:2rem;" size="mini" @change="getCashFlowYear" filterable>
<el-option
v-for="item in typeList"
:key="item.id"
......@@ -9,7 +9,7 @@
:value="item.id">
</el-option>
</el-select>
<el-select v-model="selectYear" size="mini" @change="getCashFlow">
<el-select v-model="selectYear" size="mini" style="width:1.4rem;" @change="getCashFlow">
<el-option
v-for="item in yearList"
:key="item"
......
<template>
<div>
<div class="d-flex search-box jc-end">
<el-select v-model="selectType" size="mini" @change="getContractYear">
<el-select v-model="selectType" size="mini" style="width:1.4rem;" @change="getContractYear">
<el-option
v-for="item in typeList"
:key="item"
:label="item"
:value="item">
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<el-select v-model="selectYear" size="mini" @change="getContract">
......@@ -31,8 +31,13 @@ export default {
return {
selectYear: '',
yearList: [],
selectType: '销售合同',
typeList: ['销售合同', '采购合同'],
selectType: '1',
typeList: [
{ id: '1', name: '购销合同' },
{ id: '2', name: '服务合同' },
{ id: '3', name: '混合合同' },
{ id: '4', name: '其他' }
],
dataList: {}
}
},
......
<template>
<div>
<div class="d-flex search-box jc-end">
<el-select v-model="selectYear" size="mini" @change="getProject">
<el-select v-model="selectYear" size="mini" style="width:1.5rem;" @change="getProject">
<el-option
v-for="item in yearList"
:key="item"
......@@ -14,7 +14,7 @@
<div class="flex-1 ball">
<waterBall :message="acutalBall.charts" idstr="ball1" class="heightCut68"></waterBall>
<p>预算收入 {{acutalBall.budgetCost}}万元</p>
<p>实际收入 {{acutalBall.actualCost}}170万元</p>
<p>实际收入 {{acutalBall.actualCost}}万元</p>
</div>
<div class="flex-1 ball">
<waterBall :message="budgetBall.charts" idstr="ball2" class="heightCut68"></waterBall>
......
<template>
<div>
<div class="d-flex search-box jc-end">
<el-select v-model="selectType" size="mini" @change="getRevenueYear">
<el-select v-model="selectType" size="mini" style="width:1.4rem;" @change="getRevenueYear">
<el-option
v-for="item in typeList"
:key="item"
......@@ -9,7 +9,7 @@
:value="item">
</el-option>
</el-select>
<el-select v-model="selectYear" size="mini" @change="getRevenue('')">
<el-select v-model="selectYear" size="mini" style="width:1.5rem;" @change="getRevenue('')">
<el-option
v-for="item in yearList"
:key="item"
......
<template>
<div>
<div class="d-flex search-box jc-end">
<el-select v-model="selectYear" size="mini" @change="getFee('')">
<el-select v-model="selectYear" size="mini" style="width:1.4rem;" @change="getFee('')">
<el-option
v-for="item in yearList"
:key="item"
......
......@@ -6,7 +6,7 @@
<label>组织架构</label>
<span @click="goBack">&lt; 返回</span>
</div>
<treeChart class="org-content" idstr="orgCharts"/>
<treeChart class="org-content" :message="organList" idstr="orgCharts"/>
</div>
</d2-container>
</template>
......@@ -14,20 +14,23 @@
<script>
import headerLayout from '@/components/headerLayout/index' // 公共头部
import treeChart from '@/components/echarts/treeChart'
import * as API_ORGAN from '@/api/con.organ'
export default {
components: { headerLayout, treeChart },
data () {
return {
itemContent: {},
content: ''
organList: {}
}
},
mounted () {
this.itemContent = JSON.parse(this.$route.query.row)
this.content = ''
this.getDeptTree()
},
methods: {
// 获取组织机构
async getDeptTree () {
const _data = await API_ORGAN.getDeptTree()
this.organList = _data.data
},
goBack () {
this.$router.back(-1)
}
......
......@@ -52,7 +52,7 @@ export default {
showBarFn (item) {
this.showBar = true
this.itemList = {
parent: 'company',
parentId: 'company',
xAxis: ['运营管理中心', '解决方案中心', '智能制造中心', '生态合作中心', '客户运营中心'],
data: [
{ value: 123.2, parent: 'company', isLeaf: false },
......@@ -68,7 +68,7 @@ export default {
setTimeout(() => {
if (item.indexOf('company') !== -1) {
this.itemList = {
parent: 'company',
parentId: 'company',
xAxis: ['运营管理中心', '解决方案中心', '智能制造中心', '生态合作中心', '客户运营中心'],
data: [
{ value: 123.2, parent: 'company', isLeaf: false },
......@@ -81,28 +81,28 @@ export default {
}
if (item.indexOf('中心') !== -1) {
this.itemList = {
parent: '运营管理中心',
parentId: item,
xAxis: ['运营管理部门', '解决方案部门', '智能制造部门', '生态合作部门', '客户运营部门'],
data: [
{ value: 123.2, parent: '运营管理中心', isLeaf: false },
{ value: 76.7, parent: '运营管理中心', isLeaf: false },
{ value: 135.6, parent: '运营管理中心', isLeaf: false },
{ value: 162.2, parent: '运营管理中心', isLeaf: false },
{ value: 32.6, parent: '运营管理中心', isLeaf: false }
{ value: 123.2, parent: item, isLeaf: false },
{ value: 76.7, parent: item, isLeaf: false },
{ value: 135.6, parent: item, isLeaf: false },
{ value: 162.2, parent: item, isLeaf: false },
{ value: 32.6, parent: item, isLeaf: false }
]
}
}
if (item.indexOf('部门') !== -1) {
this.itemList = {
parent: '解决方案部门',
parentId: item,
level: 'people',
xAxis: ['小小黄', '小小安', '小小圆', '小小静', '小小宝'],
data: [
{ value: 23.2, parent: '解决方案部门', isLeaf: true },
{ value: 6.7, parent: '解决方案部门', isLeaf: true },
{ value: 35.6, parent: '解决方案部门', isLeaf: true },
{ value: 62.2, parent: '解决方案部门', isLeaf: true },
{ value: 2.6, parent: '解决方案部门', isLeaf: true }
{ value: 23.2, parent: item, isLeaf: true },
{ value: 6.7, parent: item, isLeaf: true },
{ value: 35.6, parent: item, isLeaf: true },
{ value: 62.2, parent: item, isLeaf: true },
{ value: 2.6, parent: item, isLeaf: true }
]
}
}
......
<template>
<div :id="idstr"></div>
</template>
<script>
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
data () {
return {
dataObj: {},
option: {},
chart: null,
clickNum: [1, 1, 1, 1, 1]
}
},
props: ['message', 'idstr'],
mounted () {
this.drawLine()
},
methods: {
drawLine () {
const vm = this
// 基于准备好的dom,初始化echarts实例
vm.chart = echarts.init(document.getElementById(vm.idstr))
// 清空图表
vm.chart.clear()
vm.option = {
color: ['#30DDF4', '#E23AA2', '#F5A623', '#D6FFBA'],
legend: {
data: ['简历数', '面试数', '发放offer', '入职'],
right: 20,
top: 10,
textStyle: {
color: '#ffffff'
},
icon: 'circle' // 这个字段控制形状类型包括 circle,rect ,roundRect,triangle,diamond,pin,arrow,none
},
grid: {
top: '20%',
left: '10%',
bottom: '10%'
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
axisLine: {
lineStyle: {
color: '#FFF'
}
},
axisLabel: {
interval: 0
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#FFF'
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
}
},
series: [{
name: '简历数',
data: [820, 932, 901, 934, 1290, 1330, 620],
type: 'line'
},
{
name: '面试数',
data: [420, 532, 701, 434, 290, 330, 120],
type: 'line'
}, {
name: '发放offer',
data: [520, 232, 401, 334, 790, 830, 320],
type: 'line'
},
{
name: '入职',
data: [620, 732, 101, 234, 690, 530, 520],
type: 'line'
}]
}
vm.drawBar()
// window.addEventListener("resize",()=>{
// chart.resize();
// });
},
drawBar () {
// 绘制图表
const vm = this
vm.chart.setOption(vm.option)
vm.eventList()
},
eventList () {
const vm = this
vm.chart.on('click', function (params) {
})
}
},
watch: {
message: function () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 1000)
// console.log(this.message)
}
}
}
</script>
<style lang="less">
</style>
<template>
<div :id="idstr"></div>
</template>
<script>
import 'echarts-liquidfill/src/liquidFill.js'
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
data () {
return {
dataObj: {},
option: {},
chart: null,
clickNum: [1, 1, 1, 1, 1]
}
},
props: ['message', 'idstr'],
mounted () {
this.drawLine()
},
methods: {
drawLine () {
const vm = this
// 基于准备好的dom,初始化echarts实例
vm.chart = echarts.init(document.getElementById(vm.idstr))
// 清空图表
vm.chart.clear()
vm.option = {
// 图表主标题
// 提示框组件
tooltip: {
trigger: 'item', // 触发类型, 数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。
textStyle: {
color: '#fff' // 文字颜色
},
// 提示框浮层内容格式器,支持字符串模板和回调函数两种形式
// 水球图: {a}(系列名称),{b}(无),{c}(数值)
// 使用函数模板 传入的数据值 -> value: number|Array,
formatter: function (value) {
return value.seriesName + ': ' + value.data * 100 + '%'
}
},
series: [{
type: 'liquidFill',
name: '离职率', // 系列名称,用于tooltip的显示,legend 的图例筛选
radius: '80%', // 水球图的半径
center: ['50%', '50%'], // 水球图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标
// 水填充图的形状 circle 默认圆形 rect 圆角矩形 triangle 三角形
// diamond 菱形 pin 水滴状 arrow 箭头状 还可以是svg的path
shape: 'circle',
// color: '#000', // 波浪颜色
phase: 0, // 波的相位弧度 不设置 默认自动
direction: 'right', // 波浪移动的速度 两个参数 left 从右往左 right 从左往右
outline: {
show: true,
borderDistance: 0, // 边框线与图表的距离 数字
itemStyle: {
opacity: 1, // 边框的透明度 默认为 1
borderWidth: 2, // 边框的宽度
shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
shadowColor: '#fff', // 边框的阴影颜色,
borderColor: '#30DDF4' // 边框颜色
}
},
// 图形样式
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{ offset: 0, color: '#90E0FF' },
{ offset: 1, color: '#E23AA2' }]
), // 水球显示的背景颜色
opacity: 1, // 波浪的透明度
shadowBlur: 10 // 波浪的阴影范围
},
backgroundStyle: {
color: '#000E42', // 水球未到的背景颜色
borderWidth: 0,
borderColor: 'rgb(255,0,255,0.9)'
},
// 图形上的文本标签
label: {
color: '#ffffff', // 在波浪上方时的文字颜色
insideColor: '#ffffff', // 在波浪下方时的文字颜色
textStyle: {
fontSize: 28
}
},
// 图形的高亮样式
emphasis: {
itemStyle: {
opacity: 0.8 // 鼠标经过波浪颜色的透明度
}
},
data: [0.45] // 系列中的数据内容数组
}]
}
vm.drawBar()
// window.addEventListener("resize",()=>{
// chart.resize();
// });
},
drawBar () {
// 绘制图表
const vm = this
vm.chart.setOption(vm.option)
vm.eventList()
},
eventList () {
const vm = this
vm.chart.on('click', function (params) {
})
}
},
watch: {
message: function () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 1000)
// console.log(this.message)
}
}
}
</script>
<style lang="less">
</style>
......@@ -43,17 +43,17 @@
<div class="sum-box d-flex">
<div class="sum-item flex-1">
<span class="title">月招聘目标</span>
<span class="num"><strong>40</strong></span>
<span class="num"><strong>{{recruitment.target}}</strong></span>
</div>
<div class="sum-item flex-1">
<span class="title">月入职</span>
<span class="num"><strong>40</strong></span>
<span class="num"><strong>{{recruitment.enters}}</strong></span>
</div>
</div>
<div class="ballBox d-flex ai-end">
<div class="ball"><waterBall :message="ball1" idstr="ball1" class="ball1"></waterBall><p>招聘完成率</p></div>
<div class="ball"><waterBall :message="ball2" idstr="ball2" class="ball2"></waterBall><p>录用率</p></div>
<div class="ball"><waterBall :message="ball3" idstr="ball3" class="ball3"></waterBall><p>离职率</p></div>
<div class="ball"><waterBall :message="recruitment.ball1" idstr="ball1" class="ball1"></waterBall><p>招聘完成率</p></div>
<div class="ball"><waterBall :message="recruitment.ball2" idstr="ball2" class="ball2"></waterBall><p>录用率</p></div>
<div class="ball"><waterBall :message="recruitment.ball3" idstr="ball3" class="ball3"></waterBall><p>离职率</p></div>
</div>
</div>
</div>
......@@ -113,11 +113,12 @@
import headerLayout from '@/components/headerLayout/index' // 公共头部
import barChart from '@/components/echarts/barChart' // 柱图上月绩效
import pieChart from '@/components/echarts/pieChart' // 岗位分布
import peopleCounting from './components/peopleCounting' // 人数统计
import waterBall from './components/waterBall' // 岗位分布
import waterBall from '@/components/echarts/waterBallChart' // 岗位分布
import lineChart from '@/components/echarts/lineChart' // 折线图
import staffInfo from './components/staffInfo'
import peopleCounting from './components/peopleCounting' // 人数统计
import staffInfo from './components/staffInfo'
import * as API_ORGAN from '@/api/con.organ'
export default {
components: { headerLayout, pieChart, barChart, waterBall, lineChart, peopleCounting, staffInfo },
data () {
......@@ -132,14 +133,15 @@ export default {
}
],
dataList: {
parent: '',
parentId: '',
idxs: [1, 2, 3, 4, 5],
xAxis: ['运营管理中心', '解决方案中心', '智能制造中心', '生态合作中心', '客户运营中心'],
data: [
{ value: 123.2, parent: '', isLeaf: false },
{ value: 76.7, parent: '', isLeaf: false },
{ value: 135.6, parent: '', isLeaf: false },
{ value: 162.2, parent: '', isLeaf: false },
{ value: 32.6, parent: '', isLeaf: false }
{ id: 1, value: 123.2, parent: '', isLeaf: false },
{ id: 2, value: 76.7, parent: '', isLeaf: false },
{ id: 3, value: 135.6, parent: '', isLeaf: false },
{ id: 4, value: 162.2, parent: '', isLeaf: false },
{ id: 5, value: 32.6, parent: '', isLeaf: false }
]
},
performActive: 1,
......@@ -178,15 +180,31 @@ export default {
type: 'line'
}]
},
recruitment: {},
ball1: {},
ball2: {},
ball3: {}
recruitment: {}
}
},
mounted () {
this.recruitmentStatistics()
},
methods: {
// 获取人才招聘信息
async recruitmentStatistics () {
const _data = await API_ORGAN.recruitmentStatistics()
this.recruitment = _data.data
this.recruitment.ball1 = {
data: [_data.data.rmCompletionRate || '0.00'],
name: '招聘完成率'
}
this.recruitment.ball2 = {
data: [_data.data.employmentRate || '0.00'],
name: '录用率'
}
this.recruitment.ball3 = {
data: [_data.data.turnoverRate || '0.00'],
name: '离职率'
}
},
querySearch (queryString, cb) {
// cb()
},
......@@ -198,41 +216,44 @@ export default {
setTimeout(() => {
if (!item) {
this.dataList = {
parent: '',
parentId: '',
xAxis: ['运营管理中心', '解决方案中心', '智能制造中心', '生态合作中心', '客户运营中心'],
idxs: [1, 2, 3, 4, 5],
data: [
{ value: 123.2, parent: '', isLeaf: false },
{ value: 76.7, parent: '', isLeaf: false },
{ value: 135.6, parent: '', isLeaf: false },
{ value: 162.2, parent: '', isLeaf: false },
{ value: 32.6, parent: '', isLeaf: false }
{ id: 1, value: 123.2, parent: '', isLeaf: false },
{ id: 2, value: 76.7, parent: '', isLeaf: false },
{ id: 3, value: 135.6, parent: '', isLeaf: false },
{ id: 4, value: 162.2, parent: '', isLeaf: false },
{ id: 5, value: 32.6, parent: '', isLeaf: false }
]
}
}
if (item.indexOf('中心') !== -1) {
this.dataList = {
parent: '运营管理中心',
parentId: item,
xAxis: ['运营管理部门', '解决方案部门', '智能制造部门', '生态合作部门', '客户运营部门'],
idxs: [11, 22, 33, 44, 55],
data: [
{ value: 123.2, parent: '运营管理中心', isLeaf: false },
{ value: 76.7, parent: '运营管理中心', isLeaf: false },
{ value: 135.6, parent: '运营管理中心', isLeaf: false },
{ value: 162.2, parent: '运营管理中心', isLeaf: false },
{ value: 32.6, parent: '运营管理中心', isLeaf: false }
{ id: 11, value: 123.2, parent: '运营管理中心', isLeaf: false },
{ id: 22, value: 76.7, parent: '运营管理中心', isLeaf: false },
{ id: 33, value: 135.6, parent: '运营管理中心', isLeaf: false },
{ id: 44, value: 162.2, parent: '运营管理中心', isLeaf: false },
{ id: 55, value: 32.6, parent: '运营管理中心', isLeaf: false }
]
}
}
if (item.indexOf('部门') !== -1) {
this.dataList = {
parent: '解决方案部门',
parentId: item,
level: 'people',
xAxis: ['小小黄', '小小安', '小小圆', '小小静', '小小宝'],
idxs: [111, 222, 333, 444, 555],
data: [
{ value: 23.2, parent: '解决方案部门', isLeaf: true },
{ value: 6.7, parent: '解决方案部门', isLeaf: true },
{ value: 35.6, parent: '解决方案部门', isLeaf: true },
{ value: 62.2, parent: '解决方案部门', isLeaf: true },
{ value: 2.6, parent: '解决方案部门', isLeaf: true }
{ id: 111, value: 23.2, parent: '解决方案部门', isLeaf: true },
{ id: 222, value: 6.7, parent: '解决方案部门', isLeaf: true },
{ id: 333, value: 35.6, parent: '解决方案部门', isLeaf: true },
{ id: 444, value: 62.2, parent: '解决方案部门', isLeaf: true },
{ id: 555, value: 2.6, parent: '解决方案部门', isLeaf: true }
]
}
}
......
......@@ -6,13 +6,13 @@
<el-option
v-for="(item,index) in industryOptions"
:key="index"
:label="item.customerAttribute"
:value="item.customerAttribute">
:label="item"
:value="item">
</el-option>
</el-select>
<div class="search d-flex">
<el-input v-model="searchName" placeholder="请输入内容" clearable></el-input>
<el-button class="searchBtn" @click="getMajorItems">查询</el-button>
<el-button class="searchBtn" @click="getTypeData">查询</el-button>
</div>
</div>
<div class="content">
......@@ -78,7 +78,7 @@ export default {
}
},
mounted () {
this.getIndustryData()
this.getIndustryList()
this.getMajorItems()
this.productDemonstration()
},
......@@ -88,8 +88,8 @@ export default {
this.productDemonstration()
},
// 获取下拉框数据
async getIndustryData () {
const _data = await API_BASIC.getIndustryData()
async getIndustryList () {
const _data = await API_BASIC.getIndustryList()
this.industryOptions = _data.data
},
// 查询概况页面数据
......@@ -124,7 +124,7 @@ export default {
// },
// 案例展示 产品展示
productDemonstration () {
API_BASIC.productDemonstration({ industry: this.industry || null }).then(res => {
API_BASIC.productDemonstration({ industry: this.industry || null, name: this.searchName || null }).then(res => {
if (res.status === 200) {
this.caseList = res.data
}
......
......@@ -8,7 +8,7 @@
append-to-body class="knowledgeDialog">
<div class="leftBox">
<!-- <div id="topo"></div> -->
<graphChart :message="mapData" idstr="topo"></graphChart>
<graphChart :message="mapData" @downData="downData" idstr="topo" style="height:58vh;"></graphChart>
</div>
<div class="rightBox">
<div class="search-box">
......@@ -17,7 +17,8 @@
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
:value="item.value"
placeholder="请选择类型">
</el-option>
</el-select>
<div class="search">
......@@ -75,7 +76,15 @@ export default {
label: '成员'
}
],
visible: true,
colorMap: {
'#30DDF4': null,
'#8419c7': 1,
'#b9c719': 2,
'#199fc7': 3,
'#4f19c7': 4,
'#69c719': 5
},
visible: false,
state: '',
mapData: {},
knowledData: [],
......@@ -96,6 +105,7 @@ export default {
methods: {
topoDialog (data, value, state) {
const vm = this
vm.visible = true
vm.value = value
vm.state = state
if (data) {
......@@ -105,6 +115,10 @@ export default {
},
// 根据name查id
querySearch (queryString, cb) {
if (!this.value) {
this.$message.warning('请选择节点类型')
return false
}
API_KNOWLED.getByName(queryString, this.value).then(res => {
this.knowledData = res.data
for (var i = 0; i < this.knowledData.length; i++) {
......@@ -124,20 +138,23 @@ export default {
})
},
handleSelectChild (item) {
API_KNOWLED.GetKnowledId(item.id, this.value).then(res => {
this.mapData = res.data
this.sourceData = JSON.parse(JSON.stringify(res.data))
API_KNOWLED.GetKnowledId({ id: item.id || null, type: this.value }).then(res => {
this.mapData = {
data: res.data,
parentId: item.id,
type: this.value
}
this.sourceData = JSON.parse(JSON.stringify(this.mapData))
this.checked = [1, 2, 3, 4, 5]
localStorage.setItem('data', JSON.stringify(res.data))
localStorage.setItem('data', JSON.stringify(this.mapData))
})
},
// 通过控制关系筛选来控制左侧图谱展示,默认展示1
handleChange () {
const vm = this
const newNodes = []
console.log(vm.sourceData.nodes, vm.checked)
if (vm.sourceData.nodes) {
vm.sourceData.nodes.forEach((v, i) => {
if (vm.sourceData.data.nodes) {
vm.sourceData.data.nodes.forEach((v, i) => {
vm.checked.forEach(a => {
if (v.color === colorMap.get(a)) {
newNodes.push(v)
......@@ -145,11 +162,19 @@ export default {
})
})
}
vm.mapData.nodes = newNodes
vm.mapData.data.nodes = newNodes
},
downData (item) {
this.value = item.color
if (item.color.toString().indexOf('#') > -1) {
this.value = this.colorMap[item.color]
}
this.handleSelectChild({ id: item.id })
},
// 关闭
close () {
this.$store.commit('d2admin/information/changeKnowledgeDialogShow', false)
this.visible = false
// this.$store.commit('d2admin/information/changeKnowledgeDialogShow', false)
}
}
}
......
......@@ -7,7 +7,8 @@
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
:value="item.value"
placeholder="请选择类型">
</el-option>
</el-select>
<div class="search">
......@@ -25,9 +26,10 @@
</div>
</div>
<graphChart :message="mapData" idstr="graphChart" class="heightCut112"></graphChart>
<graphChart :message="mapData" @downData="downData" idstr="graphChart" class="heightCut112"></graphChart>
<div class="open" @click="openDialog"></div>
<knowledgeDialog v-if="knowledgeDialogShow" ref="child"></knowledgeDialog>
<!-- <knowledgeDialog v-if="knowledgeDialogShow" ref="child"></knowledgeDialog> -->
<knowledgeDialog ref="child"></knowledgeDialog>
</div>
</template>
......@@ -46,7 +48,8 @@ export default {
label: '项目'
}, {
value: 2,
label: '销售'
label: '销售',
color: '#8419c7'
}, {
value: 3,
label: '商机'
......@@ -58,8 +61,16 @@ export default {
label: '成员'
}
],
value: 4,
state: '中国银行保险监督管理委员会',
colorMap: {
'#30DDF4': null,
'#8419c7': 1,
'#b9c719': 2,
'#199fc7': 3,
'#4f19c7': 4,
'#69c719': 5
},
value: null,
state: '',
knowledname: {},
knowledid: '',
knowledData: [],
......@@ -73,11 +84,15 @@ export default {
}
},
mounted () {
this.handleSelect({ id: '83449' })
this.handleSelect({ id: null })
},
methods: {
// 根据name查id
querySearch (queryString, cb) {
if (!this.value) {
this.$message.warning('请选择节点类型')
return false
}
API_KNOWLED.getByName(queryString, this.value).then(res => {
this.knowledData = res.data
for (var i = 0; i < this.knowledData.length; i++) {
......@@ -98,22 +113,27 @@ export default {
},
// 点击下拉列表搜索
handleSelect (item) {
API_KNOWLED.GetKnowledId(item.id, this.value).then(res => {
this.mapData = res.data
localStorage.setItem('data', JSON.stringify(res.data))
API_KNOWLED.GetKnowledId({ id: item.id || null, type: this.value }).then(res => {
this.mapData = {
data: res.data,
parentId: item.id,
type: this.value
}
localStorage.setItem('data', JSON.stringify(this.mapData))
})
},
openDialog () {
let data = ''
if (this.state) {
data = JSON.parse(localStorage.getItem('data'))
} else {
data = ''
}
this.$store.commit('d2admin/information/changeKnowledgeDialogShow', true)
setTimeout(() => {
const data = JSON.parse(localStorage.getItem('data'))
// this.$store.commit('d2admin/information/changeKnowledgeDialogShow', true)
this.$refs.child.topoDialog(data, this.value, this.state)
}, 500)
},
downData (item) {
this.value = item.color
if (item.color.toString().indexOf('#') > -1) {
this.value = this.colorMap[item.color]
}
console.log('传来的值:', this.value, item.id)
this.handleSelect({ id: item.id })
}
},
watch: {
......
......@@ -10,8 +10,8 @@ export default new Vuex.Store({
token: ''
},
mutations: {
token(state, token){
state.token = token;
token (state, token) {
state.token = token
sessionStorage.token = token
}
......
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