Skip to content

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

修改页面适配 添加新页面

parent 9ddba6de
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 3540 additions and 425 deletions
src/App.vue
View file @ db4f0034
<template> <template>
<div id="app"> <div id="app" class="bg">
<dv-full-screen-container class="bg"> <router-view/>
<router-view/>
</dv-full-screen-container>
</div> </div>
</template> </template>
......
src/assets/js/VisHelper.js
View file @ db4f0034
...@@ -4,9 +4,9 @@ let ori_data = null ...@@ -4,9 +4,9 @@ let ori_data = null
let cur_data = {} let cur_data = {}
let network = null let network = null
let container = null let container = null
let nodeBorderWidth = 5 const nodeBorderWidth = 5
let vm = null let vm = null
let options = { const options = {
physics: { physics: {
enabled: false enabled: false
}, },
...@@ -31,7 +31,7 @@ let options = { ...@@ -31,7 +31,7 @@ let options = {
let int = 0 let int = 0
let nodecontext = null let nodecontext = null
let edgecontext = null let edgecontext = null
let colors = { const colors = {
// n: '#dddddd', // 闪烁背景色 // n: '#dddddd', // 闪烁背景色
// d: '#cf2b0b', // 深红 // d: '#cf2b0b', // 深红
l: '#E4F9FF', // 线默认色 l: '#E4F9FF', // 线默认色
...@@ -49,7 +49,7 @@ let colors = { ...@@ -49,7 +49,7 @@ let colors = {
let MapNodeIdIndex = {} let MapNodeIdIndex = {}
let MapEdgeIdIndex = {} let MapEdgeIdIndex = {}
let registerNetworkEvent = () => { const registerNetworkEvent = () => {
// 屏蔽右键菜单 // 屏蔽右键菜单
document.getElementsByTagName('canvas')[0].oncontextmenu = function (ev) { document.getElementsByTagName('canvas')[0].oncontextmenu = function (ev) {
ev.preventDefault() ev.preventDefault()
...@@ -87,8 +87,8 @@ let registerNetworkEvent = () => { ...@@ -87,8 +87,8 @@ let registerNetworkEvent = () => {
cur_data.nodes._data[params.nodes[0]].axisX = params.pointer.canvas.x cur_data.nodes._data[params.nodes[0]].axisX = params.pointer.canvas.x
cur_data.nodes._data[params.nodes[0]].axisY = params.pointer.canvas.y cur_data.nodes._data[params.nodes[0]].axisY = params.pointer.canvas.y
// console.log(params.nodes[0], params.pointer.canvas.x, params.pointer.canvas.y) // console.log(params.nodes[0], params.pointer.canvas.x, params.pointer.canvas.y)
let arr = [] const arr = []
for (let k in cur_data.nodes._data) { for (const k in cur_data.nodes._data) {
// 实际需要传位置和id // 实际需要传位置和id
// obj={axisX:cur_data.nodes._data[k].axisX,axisY : cur_data.nodes._data[k].axisY,ip : cur_data.nodes._data[k].ip} // obj={axisX:cur_data.nodes._data[k].axisX,axisY : cur_data.nodes._data[k].axisY,ip : cur_data.nodes._data[k].ip}
arr.push(cur_data.nodes._data[k]) arr.push(cur_data.nodes._data[k])
...@@ -100,21 +100,21 @@ let registerNetworkEvent = () => { ...@@ -100,21 +100,21 @@ let registerNetworkEvent = () => {
} }
}) })
//双击事件 // 双击事件
network.on("doubleClick", params => { network.on('doubleClick', params => {
// saveviewpos(); // saveviewpos();
// hidecontext(); // hidecontext();
let id = params.nodes[0]; const id = params.nodes[0]
if (id == undefined) { if (id == undefined) {
return; return
} }
localStorage.setItem("cfg", ""); localStorage.setItem('cfg', '')
let bexc = 0; const bexc = 0
let bend = 0; const bend = 0
ori_data.nodes.forEach((v,i)=>{ ori_data.nodes.forEach((v, i) => {
if(v.level == 1){ if (v.level == 1) {
redraw(id, 1) redraw(id, 1)
}else{ } else {
redraw(id, 2) redraw(id, 2)
} }
}) })
...@@ -129,23 +129,23 @@ let registerNetworkEvent = () => { ...@@ -129,23 +129,23 @@ let registerNetworkEvent = () => {
// } else { // } else {
// id && redraw(id, 2); // id && redraw(id, 2);
// } // }
}); })
} }
let redraw = (id, qryType, that) => { const redraw = (id, qryType, that) => {
vm = that || vm vm = that || vm
let cfg = { const cfg = {
qryType // 1,展开 2,收缩 3,刷新 4,按点查询 qryType // 1,展开 2,收缩 3,刷新 4,按点查询
} }
// cfg.vpnName = sessionStorage.getItem('topuVpnName'); // cfg.vpnName = sessionStorage.getItem('topuVpnName');
if (qryType === 3 || qryType == 4) { if (qryType === 3 || qryType == 4) {
cfg.nodeId = id cfg.nodeId = id
} }
let list = [] const list = []
let listStr = '' let listStr = ''
// let list = ""; // let list = "";
if (qryType === 3) { if (qryType === 3) {
ori_data = JSON.parse(sessionStorage.getItem('graph')) ori_data = JSON.parse(sessionStorage.getItem('graph'))
container = document.querySelector(`#topology`) container = document.querySelector('#topology')
} }
ori_data && ori_data &&
ori_data.nodes.forEach(v => { ori_data.nodes.forEach(v => {
...@@ -179,9 +179,9 @@ let redraw = (id, qryType, that) => { ...@@ -179,9 +179,9 @@ let redraw = (id, qryType, that) => {
// }).catch((err=>{ // }).catch((err=>{
// })) // }))
} }
let moveTo = () => { const moveTo = () => {
let scale = JSON.parse(localStorage.getItem('scale')) const scale = JSON.parse(localStorage.getItem('scale'))
let viewposition = JSON.parse(localStorage.getItem('viewposition')) const viewposition = JSON.parse(localStorage.getItem('viewposition'))
if (scale && viewposition) { if (scale && viewposition) {
network.moveTo({ network.moveTo({
position: viewposition, position: viewposition,
...@@ -190,27 +190,27 @@ let moveTo = () => { ...@@ -190,27 +190,27 @@ let moveTo = () => {
} }
} }
//字符串换行 // 字符串换行
function insertEnter(str,n){ function insertEnter (str, n) {
if(str){ if (str) {
var len = str.length; var len = str.length
var strTemp = ''; var strTemp = ''
if(len > n){ if (len > n) {
strTemp = str.substring(0,n); strTemp = str.substring(0, n)
str = str.substring(n,len); str = str.substring(n, len)
return strTemp+'\n'+insertEnter(str,n); return strTemp + '\n' + insertEnter(str, n)
}else{ } else {
return str; return str
} }
} }
} }
let handleData = (data) => { const handleData = (data) => {
let newData = { nodes: [], edges: [] } const newData = { nodes: [], edges: [] }
if (data.retNodes.length != 0) { if (data.retNodes.length != 0) {
// _store.commit('updateRetNode', data.retNodes) // _store.commit('updateRetNode', data.retNodes)
data.retNodes.forEach((v, i) => { data.retNodes.forEach((v, i) => {
v.label = insertEnter(v.customerName,5) || insertEnter(v.projectName,5) || insertEnter(v.nicheName,5) || insertEnter(v.memberName,5) v.label = insertEnter(v.customerName, 5) || insertEnter(v.projectName, 5) || insertEnter(v.nicheName, 5) || insertEnter(v.memberName, 5)
newData.nodes.push(v) newData.nodes.push(v)
}) })
} }
...@@ -293,16 +293,16 @@ export default { ...@@ -293,16 +293,16 @@ export default {
}, },
cgraph: (fn, S, __fn) => { cgraph: (fn, S, __fn) => {
// 改变数据类型 // 改变数据类型
cur_data['edges'] = new DataSet(cur_data['edges']) cur_data.edges = new DataSet(cur_data.edges)
cur_data['nodes'] = new DataSet(cur_data['nodes']) cur_data.nodes = new DataSet(cur_data.nodes)
// 初始绘制图表 // 初始绘制图表
if (!container) return if (!container) return
network = new Network(container, cur_data, options) network = new Network(container, cur_data, options)
registerNetworkEvent() registerNetworkEvent()
if (!S) { if (!S) {
// 计算位置 // 计算位置
let initpos = network.getPositions() const initpos = network.getPositions()
let initid = Object.keys(initpos)[0] const initid = Object.keys(initpos)[0]
sessionStorage.setItem('initpos', JSON.stringify(initpos[initid])) sessionStorage.setItem('initpos', JSON.stringify(initpos[initid]))
sessionStorage.setItem('initid', initid) sessionStorage.setItem('initid', initid)
} }
......
src/assets/js/knowledgeJSON.js
View file @ db4f0034
const knowledgeJSON = [ const knowledgeJSON = [
{ 'retNodes': [ {
{ 'ip': '1', retNodes: [
'axisX': '886.4717477003943', {
'axisY': '551.522667542707', ip: '1',
'level': '1', axisX: '886.4717477003943',
'status': '1', axisY: '551.522667542707',
'nodeName': '一级节点' }, level: '1',
{ 'ip': '2-1', status: '1',
'axisX': '1032.0933249370275', nodeName: '一级节点'
'axisY': '544.7911335012593', },
'level': '2', {
'status': '1', ip: '2-1',
'nodeName': '二级节点' }, axisX: '1032.0933249370275',
{ 'ip': '3-1', axisY: '544.7911335012593',
'axisX': '1150.6307490144548', level: '2',
'axisY': '63.60545335085421', status: '1',
'level': '3', nodeName: '二级节点'
'status': '1', },
'nodeName': '三级节点1' }, {
{ 'ip': '3-2', ip: '3-1',
'axisX': '1445.867279894875', axisX: '1150.6307490144548',
'axisY': '265.6093955321945', axisY: '63.60545335085421',
'level': '3', level: '3',
'status': '1', status: '1',
'nodeName': '三级节点2' } nodeName: '三级节点1'
], },
{
ip: '3-2',
axisX: '1445.867279894875',
axisY: '265.6093955321945',
level: '3',
status: '1',
nodeName: '三级节点2'
}
],
'retLinks': [ retLinks: [
{ {
'lkId': '54', lkId: '54',
'state': '1', state: '1',
'useRate': '0.00', useRate: '0.00',
'bandwidth': '1000', bandwidth: '1000',
'flow': '0', flow: '0',
'dnode': '1', dnode: '1',
'snode': '2-1' snode: '2-1'
}, },
{ {
'lkId': '56', lkId: '56',
'state': '1', state: '1',
'useRate': '164.48', useRate: '164.48',
'bandwidth': '155', bandwidth: '155',
'flow': '254', flow: '254',
'dnode': '3-1', dnode: '3-1',
'snode': '2-1' snode: '2-1'
}, },
{ {
'lkId': '61', lkId: '61',
'state': '1', state: '1',
'useRate': '115.55', useRate: '115.55',
'bandwidth': '155', bandwidth: '155',
'flow': '179', flow: '179',
'dnode': '3-2', dnode: '3-2',
'snode': '2-1' snode: '2-1'
} }
] } ]
}
] ]
export default knowledgeJSON export default knowledgeJSON
src/assets/style/business.scss
View file @ db4f0034
...@@ -41,15 +41,17 @@ ...@@ -41,15 +41,17 @@
} }
.box{ .box{
display: inline-block; display: inline-block;
box-sizing: border-box;
width: 2rem; width: 2rem;
height: .613rem; height: .613rem;
text-align: center; text-align: left;
padding: 0 .16rem;
background:rgba(144,224,255,0.15); background:rgba(144,224,255,0.15);
color: #fff; color: #fff;
border: 0.01rem solid #77E2FF; border: 0.01rem solid #77E2FF;
// margin-bottom: .2rem;
&:nth-of-type(2n){ &:nth-of-type(2n){
margin-left: .2rem; margin-left: .2rem;
text-align: right;
} }
.boxTitle{ .boxTitle{
font-size:.16rem; font-size:.16rem;
...@@ -93,17 +95,5 @@ ...@@ -93,17 +95,5 @@
transform: translateY(-50%); transform: translateY(-50%);
z-index: 1; z-index: 1;
} }
.pl-8 {
padding-left: .8rem;
}
.pr-7 {
padding-right: .7rem;
}
.pl-2 {
padding-left: .2rem;
}
.pr-2 {
padding-right: .2rem;
}
} }
} }
src/assets/style/client.scss
View file @ db4f0034
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
} }
.iconBlock{ .iconBlock{
padding: .24rem; padding: .24rem;
height:calc(100% - 1.12rem); height:calc(100% - 1.6rem);
margin: 0 auto; margin: 0 auto;
} }
i{ i{
......
src/assets/style/mainPage.scss
View file @ db4f0034
...@@ -21,7 +21,14 @@ ...@@ -21,7 +21,14 @@
} }
} }
.centerBlock { .centerBlock {
.clientDistributed{ position: relative;
.search-box {
position: absolute;
top: .2rem;
left: .2rem;
z-index: 1;
}
.nationwide,.itemNation{
margin-top: .2rem; margin-top: .2rem;
height: 3.02rem; height: 3.02rem;
background: url("~@/assets/img/c-border-b.png"); background: url("~@/assets/img/c-border-b.png");
......
src/assets/style/operation.scss
View file @ db4f0034
...@@ -21,7 +21,6 @@ ...@@ -21,7 +21,6 @@
} }
.block{ .block{
width: 100%; width: 100%;
height:100%;
font-family:PingFang-SC-Bold,PingFang-SC; font-family:PingFang-SC-Bold,PingFang-SC;
font-weight:bold; font-weight:bold;
font-size: .12rem; font-size: .12rem;
......
src/assets/style/public.scss
View file @ db4f0034
...@@ -50,6 +50,7 @@ $prefix: d2; ...@@ -50,6 +50,7 @@ $prefix: d2;
background-color: $color-bg; background-color: $color-bg;
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
overflow: hidden;
} }
.dv-loading { .dv-loading {
color: #fff; color: #fff;
...@@ -100,6 +101,15 @@ ul{list-style: none; padding: 0} ...@@ -100,6 +101,15 @@ ul{list-style: none; padding: 0}
vertical-align: .03rem; vertical-align: .03rem;
} }
} }
.lookMore {
position: absolute;
right: 0.1rem;
top: 0.1rem;
font-size: .14rem;
color: #fff;
text-decoration: underline;
cursor: pointer;
}
.px-24 { .px-24 {
padding: .24rem; padding: .24rem;
} }
......
src/components/HeaderLayout/index.vue
View file @ db4f0034
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<el-button class="tabButton" size="mini" :class="num==index?'is-active':''">{{item}}</el-button> <el-button class="tabButton" size="mini" :class="num==index?'is-active':''">{{item}}</el-button>
</div> </div>
</div> </div>
<h3 class="flex-1">企业运行图谱</h3> <h3 class="flex-1">企业运营图谱</h3>
<div class="flex-1 header-right-box"> <div class="flex-1 header-right-box">
<div class="time">{{nowDate | moment("YYYY/MM/DD")}} {{nowDate | moment("HH:mm:ss")}} 星期{{week | weekFilter}}</div> <div class="time">{{nowDate | moment("YYYY/MM/DD")}} {{nowDate | moment("HH:mm:ss")}} 星期{{week | weekFilter}}</div>
<div class="right-menu"> <div class="right-menu">
...@@ -84,7 +84,6 @@ export default { ...@@ -84,7 +84,6 @@ export default {
this.timer = true this.timer = true
const that = this const that = this
setTimeout(function () { setTimeout(function () {
console.log(that.screenWidth)
that.timer = false that.timer = false
}, 400) }, 400)
} }
...@@ -116,6 +115,7 @@ export default { ...@@ -116,6 +115,7 @@ export default {
const vm = this const vm = this
this.nowDate = new Date() this.nowDate = new Date()
this.week = new Date().getDay() this.week = new Date().getDay()
console.log(this.week)
setTimeout(function () { setTimeout(function () {
vm.getDate() vm.getDate()
}, 1000) }, 1000)
......
src/components/echarts/barChart.vue
View file @ db4f0034
...@@ -3,13 +3,9 @@ ...@@ -3,13 +3,9 @@
</template> </template>
<script> <script>
// 引入基本模板 // import echartMixins from '@/utils/resizeMixins'
const echarts = require('echarts/lib/echarts')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default { export default {
// mixins: [echartMixins],
data () { data () {
return { return {
dataObj: {}, dataObj: {},
...@@ -26,10 +22,15 @@ export default { ...@@ -26,10 +22,15 @@ export default {
drawLine () { drawLine () {
const vm = this const vm = this
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
vm.chart = echarts.init(document.getElementById(vm.idstr)) vm.chart = this.$echarts.init(document.getElementById(vm.idstr))
// 清空图表 // 清空图表
vm.chart.clear() vm.chart.clear()
vm.option = { vm.option = {
tooltip: {
transitionDuration: 0,
trigger: 'item',
formatter: '{b}: {c}'
},
grid: { grid: {
top: '15%', top: '15%',
left: '10%', left: '10%',
...@@ -106,7 +107,6 @@ export default { ...@@ -106,7 +107,6 @@ export default {
setTimeout(function () { setTimeout(function () {
vm.drawLine() vm.drawLine()
}, 0) }, 0)
console.log(this.message)
}, },
deep: true deep: true
} }
......
src/components/echarts/doubleYBarChart.vue
View file @ db4f0034
...@@ -3,12 +3,6 @@ ...@@ -3,12 +3,6 @@
</template> </template>
<script> <script>
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default { export default {
data () { data () {
return { return {
...@@ -26,7 +20,7 @@ export default { ...@@ -26,7 +20,7 @@ export default {
drawLine () { drawLine () {
const vm = this const vm = this
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
vm.chart = echarts.init(document.getElementById(vm.idstr)) vm.chart = this.$echarts.init(document.getElementById(vm.idstr))
// 清空图表 // 清空图表
vm.chart.clear() vm.chart.clear()
vm.option = { vm.option = {
...@@ -163,7 +157,6 @@ export default { ...@@ -163,7 +157,6 @@ export default {
setTimeout(function () { setTimeout(function () {
vm.drawLine() vm.drawLine()
}, 0) }, 0)
console.log(this.message)
}, },
deep: true deep: true
} }
......
src/components/echarts/funnel.vue
View file @ db4f0034
...@@ -3,12 +3,6 @@ ...@@ -3,12 +3,6 @@
</template> </template>
<script> <script>
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default { export default {
data () { data () {
return { return {
...@@ -26,7 +20,7 @@ export default { ...@@ -26,7 +20,7 @@ export default {
drawLine () { drawLine () {
const vm = this const vm = this
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
vm.chart = echarts.init(document.getElementById(vm.idstr)) vm.chart = this.$echarts.init(document.getElementById(vm.idstr))
// 清空图表 // 清空图表
vm.chart.clear() vm.chart.clear()
vm.option = { vm.option = {
...@@ -97,7 +91,6 @@ export default { ...@@ -97,7 +91,6 @@ export default {
setTimeout(function () { setTimeout(function () {
vm.drawLine() vm.drawLine()
}, 0) }, 0)
console.log(this.message)
}, },
deep: true deep: true
} }
......
src/components/echarts/graphChart.vue 0 → 100644
View file @ db4f0034
<template>
<div :id="idstr"></div>
</template>
<script>
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
const _list = {
nodes: [
{
id: '0',
name: '群智合',
symbolSize: 19.12381,
value: 28.685715,
category: 0,
itemStyle: {
color: '#30DDF4'
}
},
{
id: '1',
name: '中行',
symbolSize: 15.6666666666666665,
value: 4,
category: 0,
itemStyle: {
color: '#4f19c7'
}
},
{
id: '2',
name: '新航城',
symbolSize: 15.323809333333333,
value: 9.485714,
category: 1,
itemStyle: {
color: '#c71969'
}
},
{
id: '3',
name: '科技局',
symbolSize: 15.323809333333333,
value: 9.485714,
category: 1,
itemStyle: {
color: '#1984c7'
}
},
{
id: '4',
name: '报表项目',
symbolSize: 10,
value: 4,
category: 0,
itemStyle: {
color: '#8419c7'
}
},
{
id: '5',
name: '知识图谱项目',
symbolSize: 10,
value: 4,
category: 0,
itemStyle: {
color: '#9f19c7'
}
},
{
id: '6',
name: '可视化项目',
symbolSize: 10,
value: 4,
category: 0,
itemStyle: {
color: '#199fc7'
}
},
{
id: '7',
name: '可视化报表',
symbolSize: 6,
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: 10,
value: 4,
category: 0,
itemStyle: {
color: '#8419c7'
}
},
{
id: '11',
name: '科技局大数据分析项目',
symbolSize: 10,
value: 4,
category: 0,
itemStyle: {
color: '#8419c7'
}
},
{
id: '12',
name: '可视化大屏',
symbolSize: 6,
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: 6,
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))
// 清空图表
vm.chart.clear()
vm.option = {
series: [
{
type: 'graph',
// layout: 'none', // 力引导布局
layout: 'force', // 力引导布局
legendHoverLink: true, // 是否启用图例 hover(悬停) 时的联动高亮。
hoverAnimation: false, // 是否开启鼠标悬停节点的显示动画
edgeLabel: {
show: false
},
force: {
edgeLength: 50,
repulsion: 100
},
edgeSymbol: ['none', 'none'],
roam: true,
draggable: true, // 每个节点的拖拉
emphasis: {
scale: true,
focus: 'series',
blurScope: 'coordinateSystem'
},
itemStyle: {
normal: {
color: '#30DDF4',
cursor: 'pointer',
shadowColor: 'rgba(0,0,0,0.10)',
shadowBlur: 4,
shadowOffsetX: 1,
shadowOffsetY: 1,
label: {
show: true,
position: [-10, -20],
textStyle: { // 标签的字体样式
color: '#fff', // 字体颜色
fontStyle: 'normal', // 文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
fontWeight: '500', // 'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...
fontFamily: 'PingFangSC-Regular', // 文字的字体系列
fontSize: 14, // 字体大小
align: 'center'
}
}
}
},
lineStyle: {
width: 1,
color: '#fff'
},
symbolSize: 26, // 节点大小
links: _list.links,
data: _list.nodes,
cursor: 'pointer'
}
]
}
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: {
handler () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 0)
},
deep: true
}
}
}
</script>
<style lang="less">
</style>
src/components/echarts/lineChart.vue
View file @ db4f0034
...@@ -3,12 +3,6 @@ ...@@ -3,12 +3,6 @@
</template> </template>
<script> <script>
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default { export default {
data () { data () {
return { return {
...@@ -26,7 +20,7 @@ export default { ...@@ -26,7 +20,7 @@ export default {
drawLine () { drawLine () {
const vm = this const vm = this
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
vm.chart = echarts.init(document.getElementById(vm.idstr)) vm.chart = this.$echarts.init(document.getElementById(vm.idstr))
// 清空图表 // 清空图表
vm.chart.clear() vm.chart.clear()
vm.option = { vm.option = {
...@@ -97,7 +91,6 @@ export default { ...@@ -97,7 +91,6 @@ export default {
setTimeout(function () { setTimeout(function () {
vm.drawLine() vm.drawLine()
}, 0) }, 0)
console.log(this.message)
}, },
deep: true deep: true
} }
......
src/components/echarts/mulBarChart.vue
View file @ db4f0034
...@@ -3,12 +3,6 @@ ...@@ -3,12 +3,6 @@
</template> </template>
<script> <script>
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default { export default {
data () { data () {
return { return {
...@@ -26,7 +20,7 @@ export default { ...@@ -26,7 +20,7 @@ export default {
drawLine () { drawLine () {
const vm = this const vm = this
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
vm.chart = echarts.init(document.getElementById(vm.idstr)) vm.chart = this.$echarts.init(document.getElementById(vm.idstr))
// 清空图表 // 清空图表
vm.chart.clear() vm.chart.clear()
vm.option = { vm.option = {
...@@ -107,7 +101,6 @@ export default { ...@@ -107,7 +101,6 @@ export default {
setTimeout(function () { setTimeout(function () {
vm.drawLine() vm.drawLine()
}, 0) }, 0)
console.log(this.message)
}, },
deep: true deep: true
} }
......
src/components/echarts/negativeBarChart.vue
View file @ db4f0034
...@@ -3,12 +3,6 @@ ...@@ -3,12 +3,6 @@
</template> </template>
<script> <script>
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default { export default {
data () { data () {
return { return {
...@@ -26,7 +20,7 @@ export default { ...@@ -26,7 +20,7 @@ export default {
drawLine () { drawLine () {
const vm = this const vm = this
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
vm.chart = echarts.init(document.getElementById(vm.idstr)) vm.chart = this.$echarts.init(document.getElementById(vm.idstr))
// 清空图表 // 清空图表
vm.chart.clear() vm.chart.clear()
vm.option = { vm.option = {
...@@ -124,7 +118,6 @@ export default { ...@@ -124,7 +118,6 @@ export default {
setTimeout(function () { setTimeout(function () {
vm.drawLine() vm.drawLine()
}, 0) }, 0)
console.log(this.message)
}, },
deep: true deep: true
} }
......
src/components/echarts/pieChart.vue
View file @ db4f0034
...@@ -3,12 +3,6 @@ ...@@ -3,12 +3,6 @@
</template> </template>
<script> <script>
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default { export default {
data () { data () {
return { return {
...@@ -26,7 +20,7 @@ export default { ...@@ -26,7 +20,7 @@ export default {
drawLine () { drawLine () {
const vm = this const vm = this
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
vm.chart = echarts.init(document.getElementById(vm.idstr)) vm.chart = this.$echarts.init(document.getElementById(vm.idstr))
// 清空图表 // 清空图表
vm.chart.clear() vm.chart.clear()
vm.option = { vm.option = {
...@@ -88,7 +82,6 @@ export default { ...@@ -88,7 +82,6 @@ export default {
setTimeout(function () { setTimeout(function () {
vm.drawLine() vm.drawLine()
}, 0) }, 0)
console.log(this.message)
}, },
deep: true deep: true
} }
......
src/components/echarts/treeChart.vue 0 → 100644
View file @ db4f0034
<template>
<div :id="idstr"></div>
</template>
<script>
export default {
data () {
return {
option: {},
chart: null
}
},
props: ['message', 'idstr'],
mounted () {
this.drawLine()
},
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 }
]
}
]
}
// 基于准备好的dom，初始化echarts实例
vm.chart = this.$echarts.init(document.getElementById(vm.idstr))
// 清空图表
vm.chart.clear()
vm.option = {
series: [
{
type: 'tree',
data: [data],
top: '1%',
left: '7%',
bottom: '1%',
right: '20%',
symbolSize: 14,
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
fontSize: 12,
color: '#fff'
},
leaves: {
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left',
color: '#fff'
}
},
emphasis: {
focus: 'descendant'
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
}
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: {
handler () {
const vm = this
setTimeout(function () {
vm.drawLine()
}, 0)
},
deep: true
}
}
}
</script>
<style lang="less">
</style>
src/components/echarts/waterBallChart.vue
View file @ db4f0034
...@@ -4,12 +4,8 @@ ...@@ -4,12 +4,8 @@
<script> <script>
import 'echarts-liquidfill/src/liquidFill.js' import 'echarts-liquidfill/src/liquidFill.js'
// 引入基本模板 // 引入基本模板
const echarts = require('echarts/lib/echarts') const echarts = require('echarts/lib/echarts')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default { export default {
data () { data () {
return { return {
...@@ -120,7 +116,6 @@ export default { ...@@ -120,7 +116,6 @@ export default {
setTimeout(function () { setTimeout(function () {
vm.drawLine() vm.drawLine()
}, 0) }, 0)
console.log(this.message)
}, },
deep: true deep: true
} }
......
src/filters/index.js 0 → 100644
View file @ db4f0034
/**
* 金额单位转换
* @param {Number} value
* @param {Number} format
*/
const moneyFormat = (value, format) => {
if (value === '' || value === null || value === undefined) {
return '--'
}
if (format === 4) { // 转万元
return (Number(value) / 10000).toFixed(0).toLocaleString()
}
if (format === 8) { // 转亿元
return (Number(value) / 10000 / 10000).toFixed(0).toLocaleString()
}
if (format === 8.5) { // 转亿元
return (Number(value) / 10000 / 10000).toLocaleString()
}
}
/**
* 千分位符转换
* @param {Number} num
*/
const numFormat = (num) => {
if (num === '--' || num === '' || num === null || num === undefined) {
return '--'
}
var _num = Number(num)
var c = (_num.toString().indexOf('.') !== -1) ? _num.toLocaleString() : _num.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
return c
}
export {
moneyFormat,
numFormat
}
src/main.js
View file @ db4f0034
...@@ -22,10 +22,13 @@ import echarts from 'echarts' ...@@ -22,10 +22,13 @@ import echarts from 'echarts'
import dataV from '@jiaminghi/data-view' import dataV from '@jiaminghi/data-view'
// 适配flex // 适配flex
import '@/utils/flexible.js' import '@/utils/flexible.js'
Vue.prototype.$echarts = echarts
// Vue.prototype.$ = $
// 引入全局过滤器
import * as filters from '@/filters/index'
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
Vue.prototype.$echarts = echarts
Vue.prototype.downUrl = 'http://10.11.16.19:8080' Vue.prototype.downUrl = 'http://10.11.16.19:8080'
Vue.prototype.baseUrl = 'http://10.12.8.67:51005' Vue.prototype.baseUrl = 'http://10.12.8.67:51005'
......
src/router/modules/child.js 0 → 100644
View file @ db4f0034
// 由于懒加载页面太多的话会造成webpack热更新太慢，所以开发环境不使用懒加载，只有生产环境使用懒加载
const _import = require('@/libs/util.import.' + process.env.NODE_ENV)
const meta = { auth: true }
// 首页-companyNews
export default [
{
path: '/companyNews',
name: 'companyNews',
meta,
component: _import('system/index/components/companyNews')
},
{
path: '/newsDetail',
name: 'newsDetail',
meta,
component: _import('system/index/components/newsDetail')
},
{
path: '/orgDetail',
name: 'orgDetail',
meta,
component: _import('content/organization/components/orgDetail')
}
]
src/router/routes.js
View file @ db4f0034
...@@ -3,7 +3,9 @@ import operation from './modules/operation' ...@@ -3,7 +3,9 @@ import operation from './modules/operation'
import business from './modules/business' import business from './modules/business'
import client from './modules/client' import client from './modules/client'
import organization from './modules/organization' import organization from './modules/organization'
import child from './modules/child'
console.log(child, 'child')
console.log(organization, 'organization')
// 由于懒加载页面太多的话会造成webpack热更新太慢，所以开发环境不使用懒加载，只有生产环境使用懒加载 // 由于懒加载页面太多的话会造成webpack热更新太慢，所以开发环境不使用懒加载，只有生产环境使用懒加载
const _import = require('@/libs/util.import.' + process.env.NODE_ENV) const _import = require('@/libs/util.import.' + process.env.NODE_ENV)
...@@ -44,7 +46,8 @@ const frameIn = [ ...@@ -44,7 +46,8 @@ const frameIn = [
operation, operation,
business, business,
client, client,
organization organization,
...child
] ]
/** /**
......
src/utils/flexible.js
View file @ db4f0034
...@@ -22,25 +22,25 @@ ...@@ -22,25 +22,25 @@
// create testDom // create testDom
var testDom = document.createElement('div') var testDom = document.createElement('div')
var testDomWidth = 0 // var testDomWidth = 0
var adjustRatio = 0 var adjustRatio = 0
testDom.style.cssText = 'height:0;width:1rem;' testDom.style.cssText = 'height:0;width:1rem;'
// doc.body.appendChild(testDom); // doc.body.appendChild(testDom);
var calcTestDom = function () { // var calcTestDom = function () {
testDomWidth = testDom.offsetWidth // testDomWidth = testDom.offsetWidth
if (testDomWidth !== Math.round(clientWidth / grids)) { // if (testDomWidth !== Math.round(clientWidth / grids)) {
adjustRatio = clientWidth / grids / testDomWidth // adjustRatio = clientWidth / grids / testDomWidth
var reCalcRem = clientWidth * adjustRatio / grids // var reCalcRem = clientWidth * adjustRatio / grids
html.style.fontSize = reCalcRem + 'px' // html.style.fontSize = reCalcRem + 'px'
} else { // } else {
doc.body.removeChild(testDom) // doc.body.removeChild(testDom)
} // }
} // }
// detect if rem calc is working directly // detect if rem calc is working directly
// if not , recalc and set the rem value // if not , recalc and set the rem value
setTimeout(calcTestDom, 20) // setTimeout(calcTestDom, 20)
var reCalc = function () { var reCalc = function () {
var newCW = html.clientWidth var newCW = html.clientWidth
......
src/utils/index.js 0 → 100644
View file @ db4f0034
/**
* 节流throttle（时间戳+定时器）
* @param {FUNCTION} func
* @param {NUMBER} delay
*/
export function throttle (func, delay) {
var timer = null
var startTime = Date.now()
return function () {
var curTime = Date.now()
var remaining = delay - (curTime - startTime)
var context = this
var args = arguments
clearTimeout(timer)
if (remaining <= 0) {
func.apply(context, args)
startTime = Date.now()
} else {
timer = setTimeout(func, remaining)
}
}
}
/**
* 防抖
* @param {FUNCTION} func
* @param {NUMBER} wait
* @param {BOOLEAN} immediate
*/
export function debounce (func, wait, immediate) {
let timeout, args, context, timestamp, result
const later = function () {
// 据上一次触发时间间隔
const last = +new Date() - timestamp
// 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last)
} else {
timeout = null
// 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
if (!immediate) {
result = func.apply(context, args)
if (!timeout) context = args = null
}
}
}
return function (...args) {
context = this
timestamp = +new Date()
const callNow = immediate && !timeout
// 如果延时不存在，重新设定延时
if (!timeout) timeout = setTimeout(later, wait)
if (callNow) {
result = func.apply(context, args)
context = args = null
}
return result
}
}
/**
* @param {date} time 需要转换的时间
* @param {String} fmt 需要转换的格式 如 yyyy-MM-dd、yyyy-MM-dd HH:mm:ss
*/
export function formatTime (time, fmt) {
if (!time) return ''
else {
const date = new Date(time)
const o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'H+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds(),
'q+': Math.floor((date.getMonth() + 3) / 3),
S: date.getMilliseconds()
}
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
for (const k in o) {
if (new RegExp('(' + k + ')').test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : ((
'00' + o[k]).substr(('' + o[k]).length)))
}
}
return fmt
}
}
/**
* 动画函数
* 任意一个元素移动到指定的目标位置
* @param {*} element 任意一个元素
* @param {*} direction 移动方向
* @param {*} target 目标位置（number类型）
*/
export function animate (element, direction, target) {
// 先清理定时器
if (element && element.timeId) {
clearInterval(element.timeId)
}
element.timeId = setInterval(function () {
// 获取移动元素当前位置
var current = Number(element.style[direction].replace('rem', ''))
// 每次移动距离
var step = 0.4
step = target > current ? step : -step
// 移动后的距离
current += step
// 判断是否到达目标位置
if (Math.abs(target - current) > Math.abs(step)) {
element.style[direction] = current + 'rem'
} else {
clearInterval(element.timeId)
element.style[direction] = target + 'rem'
}
}, 10)
}
/**
*
* @param {Number} value 金额
* @param {Number} fmt 亿元还是万元
*/
export function formatMoney (value, fmt) {
if (value === '' || value === null || value === undefined) {
return '--'
}
if (fmt === 4) { // 转万元
return (Number(value) / 10000).toFixed(0)
}
if (fmt === 8) { // 转亿元
return (Number(value) / 10000 / 10000).toFixed(0)
}
if (fmt === 8.01) { // 转亿元
return (Number(value) / 10000 / 10000).toFixed(2)
}
}
/**
* 千分位符转换
* @param {Number} num
*/
export function numFormat (num) {
if (num === '--' || num === '' || num === null || num === undefined) {
return '--'
}
var _num = Number(num)
var c = (_num.toString().indexOf('.') !== -1) ? _num.toLocaleString() : _num.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
return c
}
src/utils/resizeMixins.js 0 → 100644
View file @ db4f0034
// 混入代码 resize-mixins.js
import { debounce } from '@/utils/index'
const resizeChartMethod = '$__resizeChartMethod'
export default {
data () {
// 在组件内部将图表init的引用映射到chart属性上
return {
chart: null
}
},
created () {
window.addEventListener('resize', this[resizeChartMethod], false)
},
beforeDestroy () {
window.removeEventListener('reisze', this[resizeChartMethod])
},
methods: {
// 通过lodash的防抖函数来控制resize的频率
[resizeChartMethod]: debounce(function () {
if (this.chart) {
this.chart.resize()
}
}, 100)
}
}
src/views/content/business/page.vue
View file @ db4f0034
...@@ -12,34 +12,34 @@ ...@@ -12,34 +12,34 @@
<div class="circle circleOut"></div> <div class="circle circleOut"></div>
<div class="flex-1"> <div class="flex-1">
<div class="box"> <div class="box">
<div class="boxTitle pr-2">商机总数<span>（个）</span></div> <div class="boxTitle">商机总数<span>（个）</span></div>
<div class="boxValue pr-2">{{totalObj.total['商机总数']}}</div> <div class="boxValue">{{totalObj.total['商机总数']}}</div>
</div> </div>
<div class="box"> <div class="box">
<div class="boxTitle pl-2">整体预算<span>（百万）</span></div> <div class="boxTitle">整体预算<span>（百万）</span></div>
<div class="boxValue pl-2">{{totalObj.total['商机整体总预算'] | numFilter}}</div> <div class="boxValue">{{totalObj.total['商机整体总预算'] | numFilter}}</div>
</div> </div>
</div> </div>
<div class="horizontal"></div> <div class="horizontal"></div>
<div class="flex-1"> <div class="flex-1">
<div class="box"> <div class="box">
<div class="boxTitle pr-7">本月新增<span>（个）</span></div> <div class="boxTitle">本月新增<span>（个）</span></div>
<div class="boxValue pr-7">{{(totalObj.total['本月新增']|| 0) | numFilter }}</div> <div class="boxValue">{{(totalObj.total['本月新增']|| 0) | numFilter }}</div>
</div> </div>
<div class="box"> <div class="box">
<div class="boxTitle pl-8">预计毛利<span>（百万）</span></div> <div class="boxTitle">预计毛利<span>（百万）</span></div>
<div class="boxValue pl-8">{{totalObj.total['公司预计毛利'] | numFilter }}</div> <div class="boxValue">{{totalObj.total['公司预计毛利'] | numFilter }}</div>
</div> </div>
</div> </div>
<div class="horizontal"></div> <div class="horizontal"></div>
<div class="flex-1"> <div class="flex-1">
<div class="box"> <div class="box">
<div class="boxTitle pr-2">售前参与<span>（个）</span></div> <div class="boxTitle">售前参与<span>（个）</span></div>
<div class="boxValue pr-2">{{totalObj.total['售前参与']}}</div> <div class="boxValue">{{totalObj.total['售前参与']}}</div>
</div> </div>
<div class="box"> <div class="box">
<div class="boxTitle pl-2">预计成本<span>（百万）</span></div> <div class="boxTitle">预计成本<span>（百万）</span></div>
<div class="boxValue pl-2">{{totalObj.total['公司预计成本'] | numFilter }}</div> <div class="boxValue">{{totalObj.total['公司预计成本'] | numFilter }}</div>
</div> </div>
</div> </div>
<div class="horizontal horizontal1 "></div> <div class="horizontal horizontal1 "></div>
......
src/views/content/client/page.vue
View file @ db4f0034
...@@ -12,34 +12,34 @@ ...@@ -12,34 +12,34 @@
<div class="circle circleOut"></div> <div class="circle circleOut"></div>
<div class="flex-1"> <div class="flex-1">
<div class="box"> <div class="box">
<div class="boxTitle pr-2">客户总数<span>（个）</span></div> <div class="boxTitle">客户总数<span>（个）</span></div>
<div class="boxValue pr-2">{{clientObj.total['客户总数']}}</div> <div class="boxValue">{{clientObj.total['客户总数']}}</div>
</div> </div>
<div class="box"> <div class="box">
<div class="boxTitle pl-2">商机客户<span>（个）</span></div> <div class="boxTitle">商机客户<span>（个）</span></div>
<div class="boxValue pl-2">{{clientObj.total['最终用户']}}</div> <div class="boxValue">{{clientObj.total['最终用户']}}</div>
</div> </div>
</div> </div>
<div class="horizontal"></div> <div class="horizontal"></div>
<div class="flex-1"> <div class="flex-1">
<div class="box"> <div class="box">
<div class="boxTitle pr-7">集成商<span>（个）</span></div> <div class="boxTitle">集成商<span>（个）</span></div>
<div class="boxValue pr-7">{{clientObj.total['集成商']}}</div> <div class="boxValue">{{clientObj.total['集成商']}}</div>
</div> </div>
<div class="box"> <div class="box">
<div class="boxTitle pl-8">本年新增<span>（个）</span></div> <div class="boxTitle">本年新增<span>（个）</span></div>
<div class="boxValue pl-8">{{clientObj.total['本年新增客户']}}</div> <div class="boxValue">{{clientObj.total['本年新增客户']}}</div>
</div> </div>
</div> </div>
<div class="horizontal"></div> <div class="horizontal"></div>
<div class="flex-1"> <div class="flex-1">
<div class="box"> <div class="box">
<div class="boxTitle pr-2">优秀案例<span>（个）</span></div> <div class="boxTitle">优秀案例<span>（个）</span></div>
<div class="boxValue pr-2">500</div> <div class="boxValue">500</div>
</div> </div>
<div class="box"> <div class="box">
<div class="boxTitle pl-2">本年活跃<span>（个）</span></div> <div class="boxTitle">本年活跃<span>（个）</span></div>
<div class="boxValue pl-2">29</div> <div class="boxValue">29</div>
</div> </div>
</div> </div>
<div class="horizontal horizontal1 "></div> <div class="horizontal horizontal1 "></div>
......
src/views/content/organization/components/orgDetail.vue 0 → 100644
View file @ db4f0034
<template>
<d2-container class="orgDetail">
<headerLayout></headerLayout>
<div class="org-wrapper">
<div class="org-title d-flex jc-between">
<label>组织架构</label>
<span @click="goBack">&lt; 返回</span>
</div>
<treeChart class="org-content" idstr="orgCharts"/>
</div>
</d2-container>
</template>
<script>
import headerLayout from '@/components/headerLayout/index' // 公共头部
import treeChart from '@/components/echarts/treeChart'
export default {
components: { headerLayout, treeChart },
data () {
return {
itemContent: {},
content: ''
}
},
mounted () {
this.itemContent = JSON.parse(this.$route.query.row)
this.content = ''
},
methods: {
goBack () {
this.$router.back(-1)
}
}
}
</script>
<style lang="scss" scoped>
.orgDetail {
.org-wrapper {
padding: .5rem 1rem;
}
.org-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;
}
}
.org-content {
color: #fff;
font-size: .14rem;
width: 10.8rem;
height: 7.89rem;
margin: 0 auto;
}
}
</style>
src/views/content/organization/components/peopleCounting.vue
View file @ db4f0034
<template> <template>
<div class="peopleCounting"> <div class="peopleCounting">
<div class="title">人数统计</div> <div class="title">人数统计</div>
<div class="px-24"> <div class="content heightCut44">
<dv-scroll-board :config="config" style="width:450px;height:380px" /> <dv-scroll-board :config="config" style="width:calc(100% - 0.01rem);height:calc(100% - 0.01rem)" />
</div> </div>
</div> </div>
</template> </template>
...@@ -37,4 +37,12 @@ export default { ...@@ -37,4 +37,12 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.peopleCounting {
.content{
box-sizing: border-box;
padding: .24rem;
width: 100%;
}
}
</style> </style>
src/views/content/organization/page.vue
View file @ db4f0034
...@@ -3,8 +3,9 @@ ...@@ -3,8 +3,9 @@
<headerLayout></headerLayout> <headerLayout></headerLayout>
<div class="section"> <div class="section">
<div class="leftBlock"> <div class="leftBlock">
<div class="boxHeight-3"> <div class="boxHeight-3" style="position:relative;">
<div class="title">组织架构</div> <div class="title">组织架构</div>
<div class="lookMore" @click="orgDetail">查看详情</div>
<div class="architecture"> <div class="architecture">
<div class="architectureBlock"> <div class="architectureBlock">
<div class="top">总裁办</div> <div class="top">总裁办</div>
...@@ -184,6 +185,9 @@ export default { ...@@ -184,6 +185,9 @@ export default {
}, },
handleSelect (item) { handleSelect (item) {
},
orgDetail () {
this.$router.push('/orgDetail')
} }
} }
} }
......
src/views/system/index/components/_knowledgeGraph.vue 0 → 100644
View file @ db4f0034
This diff is collapsed.
src/views/system/index/components/companyNews.vue
View file @ db4f0034
<template> <template>
<div class="news height100"> <d2-container class="companyNews">
<div class="title">公司新闻</div> <headerLayout></headerLayout>
<div class="line"></div> <div class="news-wrapper">
<div class="block"> <div class="news-title d-flex jc-between">
<el-carousel> <label>公司新闻</label>
<el-carousel-item v-for="(item, id) in newsList" :key="id"> <span @click="goBack">&lt; 返回</span>
<img :src="item.url" alt=""> </div>
<div class="content"> <div class="news-content">
<!-- <span>{{item.name}}</span> --> <el-table stripe :data="tableData" style="width: 100%">
<!-- <p>{{item.introduce}}</p> --> <el-table-column prop="name" label="内容">
<el-link href="https://www.baidu.com" :underline="false" target="_blank">{{item.introduce}}</el-link> <template slot-scope="scope">
<!-- <p>工期：2个月***信息有限公司机房运维项目</p> <a @click.stop="goDetail(scope.row)">{{scope.row.name}}</a>
<p>工期：2个月****信息有限</p> --> </template>
</div> </el-table-column>
</el-carousel-item> <el-table-column align="right" prop="publishTime" label="日期">
</el-carousel> <template slot-scope="scope">
</div> <a @click.stop="goDetail(scope.row)">{{scope.row.publishTime}}</a>
</template>
</el-table-column>
</el-table>
<el-pagination
background
class="text-right"
layout="prev, pager, next"
:total="1000">
</el-pagination>
</div>
</div> </div>
</d2-container>
</template> </template>
<script> <script>
import * as API_BASIC from '@/api/sys.basic.js' import headerLayout from '@/components/headerLayout/index' // 公共头部
export default { export default {
components: { headerLayout },
data () { data () {
return { return {
newsList: [], tableData: [
newsObj: {} { id: '1', name: '千帆竞渡，群智合助力医药健康行业数字化', publishTime: '2021年4月30日', source: '中国网' },
{ id: '2', name: '千帆竞渡，群智合助力医药健康行业数字化', publishTime: '2021年4月30日', source: '中国网' },
{ id: '3', name: '千帆竞渡，群智合助力医药健康行业数字化', publishTime: '2021年4月30日', source: '中国网' },
{ id: '4', name: '千帆竞渡，群智合助力医药健康行业数字化', publishTime: '2021年4月30日', source: '中国网' },
{ id: '5', name: '千帆竞渡，群智合助力医药健康行业数字化', publishTime: '2021年4月30日', source: '中国网' },
{ id: '6', name: '千帆竞渡，群智合助力医药健康行业数字化', publishTime: '2021年4月30日', source: '中国网' },
{ id: '7', name: '千帆竞渡，群智合助力医药健康行业数字化', publishTime: '2021年4月30日', source: '中国网' },
{ id: '8', name: '千帆竞渡，群智合助力医药健康行业数字化', publishTime: '2021年4月30日', source: '中国网' },
{ id: '9', name: '千帆竞渡，群智合助力医药健康行业数字化', publishTime: '2021年4月30日', source: '中国网' },
{ id: '10', name: '千帆竞渡，群智合助力医药健康行业数字化', publishTime: '2021年4月30日', source: '中国网' }
]
} }
}, },
mounted () { mounted () {
this.getCustomerList()
}, },
methods: { methods: {
getCustomerList () { goDetail (row) {
API_BASIC.GetBasicList().then(res => { this.$router.push({ path: '/newsDetail', query: { row: JSON.stringify(row) } })
this.newsList = res.data.news },
this.newsList.forEach(element => { goBack () {
this.newsObj = element this.$router.back(-1)
})
})
} }
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.news{ .companyNews {
.block{ .news-wrapper {
height: calc(100% - 60px); padding: .5rem 1rem;
margin-top: 10px; }
overflow: hidden; .news-title {
background:rgba(0,14,66,0.5); width: 100%;
box-shadow:0px 0px 8px 4px rgba(10,18,35,0.5); height: .54rem;
.el-carousel,.el-carousel__container{ font-size: .24rem;
width:calc(100% - 20px); line-height: 1.5;
height: 100%; color: $color-primary;
margin: 0 10px; border-bottom: .02rem solid $color-primary;
} margin-bottom: .5rem;
img{ span {
width:44%; cursor: pointer;
height: 80%; }
box-shadow:0px 0px 8px 4px rgba(10,18,35,0.5); }
border-radius:2px 0px 0px 2px; .news-content {
float: left; ::v-deep .el-table {
} font-size: .16rem;
.content{ color: #fff;
width: calc(56% - 10px); margin-bottom: .24rem;
margin-left: 10px; background-color: rgba(47, 219, 243, 0.05);
float: left; &::before {
span{ height: 0;
font-size:14px; }
font-family:PingFang-SC-Bold,PingFang-SC; .el-table__header-wrapper {
font-weight:bold; display: none;
color:rgba(255,255,255,1); }
line-height:18px; td {
} border-bottom: none;
p{ }
font-size:12px; .el-table__row--striped td {
font-family:PingFang-SC-Regular,PingFang-SC; background-color: rgba(47, 219, 243, 0.15);
font-weight:400; }
color:rgba(255,255,255,1); tr {
line-height:18px; background-color: $color-bg;
margin: 0; cursor: pointer;
} &.is-leaf {
} border-bottom: none;
} }
}
.el-table__body tr:hover>td {
background-color: rgba(47, 219, 243, 0.15);
}
} }
::v-deep .el-pagination.is-background {
.el-pager li:not(.disabled):hover {
color: $color-primary;
}
.el-pager li:not(.disabled).active {
background-color:$color-primary;
color: #fff;
}
}
}
}
</style> </style>
src/views/system/index/components/deptNews.vue
View file @ db4f0034
<template> <template>
<div class="deptNews"> <div class="deptNews">
<div class="title">公司新闻</div> <div class="title">公司新闻</div>
<div class="content"> <div class="lookMore" @click="newsDetail">查看更多</div>
<dv-scroll-board :config="config" style="width:450px;height:220px" /> <div class="content heightCut44">
<dv-scroll-board :config="config" style="width:calc(100% - 0.01rem);height:calc(100% - 0.01rem)" />
</div> </div>
</div> </div>
</template> </template>
...@@ -13,22 +14,11 @@ import * as API_BASIC from '@/api/sys.basic.js' ...@@ -13,22 +14,11 @@ import * as API_BASIC from '@/api/sys.basic.js'
export default { export default {
data () { data () {
return { return {
basicData: {},
basicObj: {},
hotwordsarr: [],
labelArr: [],
businessarr: [],
config: { config: {
columnWidth: [350, 100], columnWidth: [350, 100],
oddRowBGC: 'rgba(47,219,243,0.15)', oddRowBGC: 'rgba(47,219,243,0.15)',
evenRowBGC: 'rgba(47,219,243,0.05)', evenRowBGC: 'rgba(47,219,243,0.05)',
data: [ data: [
['群智合成功交付实施*****项目', '2010/9/10'],
['群智合成功交付实施*****项目', '2010/9/10'],
['群智合成功交付实施*****项目', '2010/9/10'],
['群智合成功交付实施*****项目', '2010/9/10'],
['群智合成功交付实施*****项目', '2010/9/10'],
['群智合成功交付实施*****项目', '2010/9/10'],
['群智合成功交付实施*****项目', '2010/9/10'], ['群智合成功交付实施*****项目', '2010/9/10'],
['群智合成功交付实施*****项目', '2010/9/10'], ['群智合成功交付实施*****项目', '2010/9/10'],
['群智合成功交付实施*****项目', '2010/9/10'], ['群智合成功交付实施*****项目', '2010/9/10'],
...@@ -40,20 +30,27 @@ export default { ...@@ -40,20 +30,27 @@ export default {
} }
}, },
mounted () { mounted () {
// this.getBasicList() // this.getNewsList()
}, },
methods: { methods: {
// 查询概况页面数据 // 查询概况页面数据
getBasicList () { getNewsList () {
API_BASIC.GetBasicList().then(res => { API_BASIC.GetBasicList().then(res => {
this.basicData = res.data const newsList = res.data.news
this.basicData.org.forEach(element => { const _data = []
this.basicObj = element newsList.forEach(element => {
this.labelArr = element.label.split('，') _data.push([element.introduce, element.createTime])
this.hotwordsarr = element.hotwords.split('，')
this.businessarr = element.business.split('，')
}) })
this.config = {
columnWidth: [350, 100],
oddRowBGC: 'rgba(47,219,243,0.15)',
evenRowBGC: 'rgba(47,219,243,0.05)',
data: _data
}
}) })
},
newsDetail () {
this.$router.push('/companyNews')
} }
} }
} }
...@@ -61,8 +58,11 @@ export default { ...@@ -61,8 +58,11 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.deptNews{ .deptNews{
position: relative;
.content{ .content{
box-sizing: border-box;
padding: .24rem; padding: .24rem;
width: 100%;
} }
} }
......
src/views/system/index/components/itemNationwide.vue 0 → 100644
View file @ db4f0034
<template>
<div class="itemNation">
<div class="title">全国</div>
<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>
</div>
<template>
<div v-if="type=='1'" class="flex-1 sum-box">
<div class="d-flex flex-column">
<div class="text-box">
<label>本年度签署合同</label>
<span>3.98 亿</span>
</div>
<div class="text-box">
<label>相关产品</label>
<span>3009 个</span>
</div>
<div class="text-box">
<label>累计服务次数</label>
<span>3000 次</span>
</div>
</div>
</div>
<div v-if="type=='2'" class="flex-1 sum-box">
<div class="d-flex flex-column">
<div class="text-box">
<label>预计总收入</label>
<span>3098 亿</span>
</div>
<div class="text-box">
<label>预计总成本</label>
<span>300 亿</span>
</div>
<div class="text-box">
<label>参与售前</label>
<span>300 人</span>
</div>
</div>
</div>
<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>
</div>
<div class="text-box">
<label>当前参与技术人员</label>
<span>300 人</span>
</div>
<div class="text-box">
<label>当前参与销售人员</label>
<span>300 人</span>
</div>
</div>
</div>
</template>
</div>
</div>
</template>
<script>
// import * as API_BASIC from '@/api/sys.basic.js'
import pieChart from '@/components/echarts/pieChart' // 行业分布-饼图
export default {
props: ['message', 'type'],
components: { pieChart },
data () {
return {
itemNationWide: {}
}
},
watch: {
message: {
handler () {
const vm = this
setTimeout(function () {
vm.getList()
}, 0)
},
deep: true
}
},
mounted () {
this.getList()
},
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: '服务' }
]
}
}
}
}
}
</script>
<style lang="scss" scoped>
.itemNation {
.content {
width: 100%;
height: calc(100% - .44rem);
box-sizing: border-box;
padding: .24rem;
p {
font-size: .16rem;
color: #fff;
text-align: center;
}
.sum-box {
border-left: 1px solid #30DDF4;
padding-top: .24rem;
}
.text-box {
text-align: center;
flex: 1;
font-family: PingFang-SC-Medium;
font-size: .16rem;
line-height: 2;
color: #FFFFFF;
span {
padding-left: .24rem;
font-family: ZhenyanGB-Regular;
font-size: .24rem;
color: #30DDF4;
}
}
}
}
</style>
src/views/system/index/components/knowledgeDialog.vue
View file @ db4f0034
<template> <template>
<el-dialog :visible.sync="visible" :close-on-click-modal="false" center @close="close" <el-dialog
:modal-append-to-body=true append-to-body class="knowledgeDialog"> :visible.sync="visible"
:close-on-click-modal="false"
center
@close="close"
:modal-append-to-body=true
append-to-body class="knowledgeDialog">
<div class="leftBox"> <div class="leftBox">
<div id="topo"></div> <div id="topo"></div>
</div> </div>
<div class="rightBox"> <div class="rightBox">
<div class="search-box">
<el-select v-model="value" size="mini">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div class="search"> <div class="search">
<el-autocomplete <el-autocomplete
class="inline-input" class="inline-input"
...@@ -12,12 +26,13 @@ ...@@ -12,12 +26,13 @@
size="mini" size="mini"
clearable clearable
:fetch-suggestions="querySearch" :fetch-suggestions="querySearch"
placeholder="请输入项目名称" placeholder="请输入"
:trigger-on-focus="false" :trigger-on-focus="false"
@select="handleSelectChild" @select="handleSelectChild"
></el-autocomplete> ></el-autocomplete>
<div class="searchBtn">搜索</div> <el-button class="searchBtn" type="text">搜索</el-button>
</div> </div>
</div>
<h3>关系筛选</h3> <h3>关系筛选</h3>
<el-checkbox-group v-model="checked"> <el-checkbox-group v-model="checked">
<el-checkbox v-for="item in checkList" :key="item.value" :label="item.value">{{item.name}}</el-checkbox> <el-checkbox v-for="item in checkList" :key="item.value" :label="item.value">{{item.name}}</el-checkbox>
...@@ -41,9 +56,11 @@ export default { ...@@ -41,9 +56,11 @@ export default {
knowledData: [], knowledData: [],
checked: [1], checked: [1],
checkList: [ checkList: [
{ name: '对应销售', value: 2 }, { name: '客户', value: 2 },
{ name: '对应商机', value: 3 }, { name: '项目', value: 3 },
{ name: '对应客户', value: 4 } { name: '商机', value: 4 },
{ name: '产品', value: 5 },
{ name: '人员', value: 6 }
], ],
value: '', value: '',
topoData: {} // 接收到的topo数据 topoData: {} // 接收到的topo数据
...@@ -142,52 +159,54 @@ export default { ...@@ -142,52 +159,54 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.knowledgeDialog{ .knowledgeDialog{
.leftBox{ .leftBox{
width: 75%; width: 75%;
height: 100%; height: 100%;
float: left; float: left;
#topo{ #topo{
height: 100%; height: 100%;
} }
} }
.rightBox{ .rightBox{
width: calc(25% - 4px); box-sizing: border-box;
height:calc(100% - 4px); width: calc(25% - 4px);
background: #000E42; height:calc(100% - 4px);
float: left; background: #000E42;
margin-top: 2px; float: left;
position: relative; padding-top: .6rem;
h3{ position: relative;
width: calc(100% - 20px); h3{
font-size:16px; width: calc(100% - .2rem);
font-family:PingFang-SC-Bold,PingFang-SC; font-size:.16rem;
font-weight:bold; font-family:PingFang-SC-Bold,PingFang-SC;
color:rgba(48,221,244,1); font-weight:bold;
padding: 10px; color:rgba(48,221,244,1);
margin-top: 20px; padding: .1rem;
border-bottom: 1px solid #30DDF4; margin: 0;
} margin-bottom:.1rem;
.inquire{ border-bottom: 1px solid #30DDF4;
width: 90%; }
height: 32px; .inquire{
background:linear-gradient(180deg,rgba(48,221,244,1) 0%,rgba(48,221,244,1) 100%); width: 90%;
box-shadow:0px 4px 10px 0px rgba(0,0,0,0.5); height: .32rem;
border-radius:2px; background:linear-gradient(180deg,rgba(48,221,244,1) 0%,rgba(48,221,244,1) 100%);
border:1px solid rgba(119,226,255,0.15); box-shadow:0px 4px 10px 0px rgba(0,0,0,0.5);
font-size:16px; border-radius:2px;
font-family:PingFang-SC-Bold,PingFang-SC; border:1px solid rgba(119,226,255,0.15);
font-weight:bold; font-size:.16rem;
color:rgba(0,14,66,1); font-family:PingFang-SC-Bold,PingFang-SC;
line-height:32px; font-weight:bold;
cursor: pointer; color:rgba(0,14,66,1);
position: absolute; line-height:.32rem;
bottom: 10px; cursor: pointer;
left: 5%; position: absolute;
text-align: center; bottom: .1rem;
} left: 5%;
} text-align: center;
}
} }
}
</style> </style>
<style lang="scss"> <style lang="scss">
.el-dialog{ .el-dialog{
...@@ -218,34 +237,23 @@ export default { ...@@ -218,34 +237,23 @@ export default {
font-weight:bold; font-weight:bold;
} }
.search{ .search{
width: calc(90% - 2px); font-size:12px;
height:28px; font-family:PingFang-SC-Bold,PingFang-SC;
margin:60px 8% 0 2%; font-weight:bold;
border:1px solid rgba(119,226,255,1); width: 100%;
border-radius: 2px; height:.28rem;
.el-autocomplete{ margin-top:.2rem;
width: 70%; border-bottom:1px solid rgba(119,226,255,1);
float: left; display: flex;
.el-input__inner{ .el-autocomplete{
width: 100%; flex: 1;
background:rgba(144,224,255,0.15); .el-input__inner{
border-radius:2px; width: 100%;
color: #FFFFFF; background:transparent;
font-size:12px; color: #FFFFFF;
font-family:PingFang-SC-Bold,PingFang-SC; border: 0 !important;
font-weight:bold;
border: 0 !important;
}
}
.searchBtn{
width: 30%;
height: 28px;
line-height: 28px;
background:linear-gradient(180deg,rgba(48,221,244,1) 0%,rgba(48,221,244,1) 100%);
box-shadow:0px 4px 10px 0px rgba(0,0,0,0.5);
text-align: center;
float: left;
} }
}
} }
.el-checkbox{ .el-checkbox{
float: left; float: left;
......
src/views/system/index/components/knowledgeGraph.vue
View file @ db4f0034
...@@ -25,7 +25,8 @@ ...@@ -25,7 +25,8 @@
</div> </div>
</div> </div>
<div id="topology"></div> <!-- <div id="topology"></div> -->
<graphChart :message="{}" idstr="graphChart" class="heightCut44"></graphChart>
<div class="open" @click="openDialog"></div> <div class="open" @click="openDialog"></div>
<knowledgeDialog v-if="knowledgeDialogShow" ref="child"></knowledgeDialog> <knowledgeDialog v-if="knowledgeDialogShow" ref="child"></knowledgeDialog>
</div> </div>
...@@ -36,9 +37,10 @@ import vis from '@/assets/js/VisHelper.js' ...@@ -36,9 +37,10 @@ import vis from '@/assets/js/VisHelper.js'
import knowledgeJSON from '@/assets/js/knowledgeJSON.js' import knowledgeJSON from '@/assets/js/knowledgeJSON.js'
import knowledgeDialog from './knowledgeDialog' import knowledgeDialog from './knowledgeDialog'
import * as API_KNOWLED from '@/api/sys.knowled.js' import * as API_KNOWLED from '@/api/sys.knowled.js'
import graphChart from '@/components/echarts/graphChart'
export default { export default {
components: { knowledgeDialog }, components: { knowledgeDialog, graphChart },
data () { data () {
return { return {
options: [ options: [
...@@ -71,6 +73,7 @@ export default { ...@@ -71,6 +73,7 @@ export default {
} }
}, },
mounted () { mounted () {
}, },
methods: { methods: {
// 根据name查id // 根据name查id
...@@ -128,16 +131,6 @@ export default { ...@@ -128,16 +131,6 @@ export default {
// } // }
// vm.locationArr = arr // vm.locationArr = arr
}, },
initTopuData (data) {
localStorage.setItem('data', JSON.stringify(data))
vis.destroy()
vis.init('topology', data, this)
vis.cgraph(
(snode, dnode, S, B) => {},
false,
info => {}
)
},
openDialog () { openDialog () {
let data = '' let data = ''
if (this.state) { if (this.state) {
...@@ -167,16 +160,16 @@ export default { ...@@ -167,16 +160,16 @@ export default {
margin-left: .2rem; margin-left: .2rem;
} }
#topology{ #topology{
height: calc(100% - 80px); height: calc(100% - 1.12rem);
} }
.open{ .open{
width: 24px; width: .24rem;
height: 24px; height: .24rem;
background: url("~@/assets/img/open.png"); background: url("~@/assets/img/open.png");
background-size: 100% 100%; background-size: 100% 100%;
position: absolute; position: absolute;
right: 10px; right: .1rem;
bottom: 10px; bottom: .1rem;
cursor: pointer; cursor: pointer;
} }
} }
......
src/views/system/index/components/clientDistributed.vue → src/views/system/index/components/nationwide.vue
View file @ db4f0034
<template> <template>
<div class="clientDistributed"> <div class="nationwide">
<div class="title">全国</div> <div class="title">全国</div>
<div class="content"> <div class="content">
<el-col span="12"> <el-col span="12">
...@@ -93,7 +93,7 @@ export default { ...@@ -93,7 +93,7 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.clientDistributed { .nationwide {
.content { .content {
padding: .24rem; padding: .24rem;
.icon-box { .icon-box {
......
src/views/system/index/components/newsDetail.vue 0 → 100644
View file @ db4f0034
<template>
<d2-container class="newsDetail">
<headerLayout></headerLayout>
<div class="news-wrapper">
<div class="news-title d-flex jc-between">
<label>公司新闻</label>
<span @click="goBack">&lt; 返回</span>
</div>
<div class="news-content">
<h3>{{itemContent.name}}</h3>
<div class="d-flex jc-center mb-2">
<div>
<label>发布时间：</label>
{{itemContent.publishTime}}
</div>
<div class="pl">
<label>来源：</label>{{itemContent.source}}
</div>
</div>
<!-- <div v-html="content"></div> -->
<div>
“晓看红湿处，花重锦官城”。春天自古是筹谋与播种的季节，春生夏长秋收冬藏，在春意盎然的成都城里，一场关于信息化数字化的讨论为这个3月增添了更多的春色。
3月18日-19日，以“千帆竞渡·数字新起点”为主题的第九届医药健康行业信息化高峰论坛在成都保利公园皇冠假日酒店举行，来自医药健康行业的从业者、信息中心负责人、厂商代表等300余位行业精英共聚一堂，会间，大家围绕疫情后产业变局思维、数字新生态新空间、网络智慧连接运用、数据治理、设备智慧互联、研发全流程信息化等话题展开了激烈交流与探讨，群智合作为国内领先的政企数字化转型方案提供商应邀出席本次盛会。
<div class="text-center">
<el-image src=""></el-image>
<el-image src=""></el-image>
</div>
“晓看红湿处，花重锦官城”。春天自古是筹谋与播种的季节，春生夏长秋收冬藏，在春意盎然的成都城里，一场关于信息化数字化的讨论为这个3月增添了更多的春色。
3月18日-19日，以“千帆竞渡·数字新起点”为主题的第九届医药健康行业信息化高峰论坛在成都保利公园皇冠假日酒店举行，来自医药健康行业的从业者、信息中心负责人、厂商代表等300余位行业精英共聚一堂，会间，大家围绕疫情后产业变局思维、数字新生态新空间、网络智慧连接运用、数据治理、设备智慧互联、研发全流程信息化等话题展开了激烈交流与探讨，群智合作为国内领先的政企数字化转型方案提供商应邀出席本次盛会。
</div>
</div>
</div>
</d2-container>
</template>
<script>
import headerLayout from '@/components/headerLayout/index' // 公共头部
export default {
components: { headerLayout },
data () {
return {
itemContent: {},
content: ''
}
},
mounted () {
this.itemContent = JSON.parse(this.$route.query.row)
this.content = ''
},
methods: {
goBack () {
this.$router.back(-1)
}
}
}
</script>
<style lang="scss" scoped>
.newsDetail {
.news-wrapper {
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;
}
}
.news-content {
color: #fff;
font-size: .14rem;
width: 9.6rem;
margin: 0 auto;
h3 {
text-align: center;
font-size: .18rem;
}
.mb-2 {
margin-bottom: .2rem;
}
.pl {
padding-left: .5rem;
}
.el-image {
width: 2.4rem;
height: 1.8rem;
margin: .24rem;
}
}
}
</style>
src/views/system/index/page.vue
View file @ db4f0034
...@@ -8,13 +8,18 @@ ...@@ -8,13 +8,18 @@
<deptNews class="deptNews"></deptNews> <deptNews class="deptNews"></deptNews>
</div> </div>
<div class="centerBlock"> <div class="centerBlock">
<div style="position: absolute; left: .2rem; z-index: 1; top: 0;line-height: .4rem;"> <div class="d-flex search-box">
<el-button @click="getData(1)">客户</el-button> <el-select v-model="type" size="mini" @change="getData">
<el-button @click="getData(2)">商机</el-button> <el-option
<el-button @click="getData(3)">项目</el-button> v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div> </div>
<mapChina :message="mapChina" idstr="mapChina" class="mapChina"></mapChina> <mapChina :message="mapChina" idstr="mapChina" class="mapChina"></mapChina>
<clientDistributed class="clientDistributed"></clientDistributed> <component :is="currentComp" :message="dataList" :type="type"/>
</div> </div>
<div class="rightBlock"> <div class="rightBlock">
<knowledgeGraph class="knowledgeGraph"></knowledgeGraph> <knowledgeGraph class="knowledgeGraph"></knowledgeGraph>
...@@ -30,26 +35,51 @@ import mapChina from './components/mainPageEcharts/mapChina' // 地图 ...@@ -30,26 +35,51 @@ import mapChina from './components/mainPageEcharts/mapChina' // 地图
import deptIntroduction from './components/deptIntroduction'// 部门介绍 import deptIntroduction from './components/deptIntroduction'// 部门介绍
import deptNews from './components/deptNews'// 部门介绍 import deptNews from './components/deptNews'// 部门介绍
import deptOperation from './components/deptOperation'// 部门运营 import deptOperation from './components/deptOperation'// 部门运营
import clientDistributed from './components/clientDistributed'// 客户增长分布
import knowledgeGraph from './components/knowledgeGraph'// 知识图谱 import knowledgeGraph from './components/knowledgeGraph'// 知识图谱
import importantProject from './components/importantProject'// 重点项目 import importantProject from './components/importantProject'// 重点项目
import * as API_BASIC from '@/api/sys.basic.js' import * as API_BASIC from '@/api/sys.basic.js'
import nationwide from './components/nationwide' // 全国
import itemNationwide from './components/itemNationwide'// 全国 客户 项目 商机
export default { export default {
components: { headerLayout, mapChina, deptIntroduction, deptNews, deptOperation, clientDistributed, knowledgeGraph, importantProject }, components: { headerLayout, mapChina, deptIntroduction, deptNews, deptOperation, nationwide, itemNationwide, knowledgeGraph, importantProject },
data () { data () {
return { return {
currentComp: 'nationwide',
options: [
{
value: 0,
label: '全部'
},
{
value: 1,
label: '客户'
}, {
value: 2,
label: '商机'
}, {
value: 3,
label: '项目'
}
],
newData: [], newData: [],
mapChina: [], mapChina: [],
type: 1 type: 0
} }
}, },
mounted () { mounted () {
this.GET_MapChina() this.GET_MapChina()
}, },
methods: { methods: {
getData (type) { getData () {
this.type = type this.dataList = { type: this.type }
if (this.type) {
this.currentComp = 'itemNationwide'
} else {
this.currentComp = 'nationwide'
}
this.GET_MapChina() this.GET_MapChina()
}, },
GET_MapChina () { GET_MapChina () {
......
vue.config.js
View file @ db4f0034
...@@ -13,8 +13,8 @@ process.env.VUE_APP_VERSION = require('./package.json').version ...@@ -13,8 +13,8 @@ process.env.VUE_APP_VERSION = require('./package.json').version
process.env.VUE_APP_BUILD_TIME = require('dayjs')().format('YYYY-M-D HH:mm:ss') process.env.VUE_APP_BUILD_TIME = require('dayjs')().format('YYYY-M-D HH:mm:ss')
// 基础路径 注意发布之前要先修改这里 // 基础路径 注意发布之前要先修改这里
// const publicPath = process.env.VUE_APP_PUBLIC_PATH || '/' const publicPath = process.env.VUE_APP_PUBLIC_PATH || '/'
const publicPath = '/front/' // const publicPath = '/front/'
// 设置不参与构建的库 // 设置不参与构建的库
const externals = {} const externals = {}
......
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