<template>
|
<div>
|
<Card v-show="Area===1">
|
<tab3_3 :name="searchName"></tab3_3>
|
</Card>
|
<Card v-show="Area===0">
|
<p v-show="loading" style="width: 150px;margin: 0 auto;margin-bottom: 12px;">
|
<Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
|
加载中,请稍后...
|
</p>
|
<div class="clearfix" style="line-height: 40px;" id="jieGou">
|
<Tabs v-model="guquanjiegoututab" type="card">
|
<TabPane label="变更情况" name="tab1"></TabPane>
|
<TabPane label="变更前股权结构图" name="tab2"></TabPane>
|
<TabPane label="变更后股权结构图" name="tab3"></TabPane>
|
</Tabs>
|
<div v-show="guquanjiegoututab==='tab1'">
|
<div class="clearfix">
|
<Table :data="guquanjiegouList"
|
:columns="guquanjiegouColumnstab1"
|
border style="margin-top: 12px;">
|
</Table>
|
<Page :current="guquanjiegouPageIndex"
|
:total="guquanjiegouTotalItem"
|
:page-size="5"
|
@on-change="changeguquanjiegouPageIndex"
|
show-elevator style="float: right;margin-top: 12px;"/>
|
</div>
|
</div>
|
<Button style="float: right;margin-top: 12px" @click="toFcreenfull">全屏</Button>
|
</div>
|
<div class="itemTitle">
|
{{ this.name }}
|
</div>
|
<div v-if="guquanjiegoututab==='tab1'">
|
<div id="d3FullScreen" style="position: relative;background-color: #fff;">
|
<span v-if="isFullscreen" style="position: absolute;top: 0;right: 0;padding: 8px;font-size: 16px;z-index: 9;">按ESC退出全屏</span>
|
<div id="textBox_1" style="background-color:white;"></div>
|
</div>
|
</div>
|
<div v-if="guquanjiegoututab==='tab2'">
|
<div>
|
tab2
|
tab2
|
</div>
|
</div>
|
<div v-if="guquanjiegoututab==='tab3'">
|
<div>
|
tab3
|
tab3
|
</div>
|
</div>
|
</Card>
|
<Card v-show="Area===2">
|
<Tabs v-model="guquanjiegoututab" type="card">
|
<TabPane label="变更情况" name="tab1"></TabPane>
|
<TabPane label="变更前股权穿透图" name="tab2"></TabPane>
|
<TabPane label="变更后股权穿透图" name="tab3"></TabPane>
|
</Tabs>
|
<div v-show="guquanjiegoututab==='tab1'">
|
<div class="clearfix">
|
<Table :data="guquanjiegouList"
|
:columns="guquanjiegouColumnstab1"
|
border style="margin-top: 12px;">
|
</Table>
|
<Page :current="guquanjiegouPageIndex"
|
:total="guquanjiegouTotalItem"
|
:page-size="5"
|
@on-change="changeguquanjiegouPageIndex"
|
show-elevator style="float: right;margin-top: 12px;"/>
|
</div>
|
</div>
|
<GQCTT :name="searchName"></GQCTT>
|
</Card>
|
</div>
|
</template>
|
|
<script>
|
import tab3_3 from '@/view/diligenceTools/components/tab3_3'
|
import GQCTT from '@/view/enterpriseControl/GQCTT'
|
import * as screenfull from "screenfull";
|
import $ from 'jquery'
|
import axios from '@/libs/api.request';
|
// 过渡时间
|
const DURATION = 0
|
// 加减符号半径
|
const SYMBOLA_S_R = 9
|
// 公司
|
const COMPANY = 0
|
// 人
|
const PERSON = 1
|
export default {
|
components: {
|
tab3_3,
|
GQCTT
|
},
|
name: "offSiteCheckQYTP",
|
data(){
|
return{
|
guquanjiegoututab:'tab1',
|
searchName:'',
|
name:'',
|
loading: false, // loading
|
layoutTree: '',
|
diamonds: '',
|
i: 0,
|
hasChildNodeArr: [],
|
originDiamonds: '',
|
diagonalUp: '',
|
diagonalDown: '',
|
tree: {
|
'Name': '测试',
|
'Children': [],
|
'Parents': []
|
},
|
rootUp: '',
|
rootDown: '',
|
svg: '',
|
ratio: 1, // 浏览器缩放比例
|
isFullscreen: false,// 是否全屏
|
Area:0,
|
guquanjiegouList:[],
|
guquanjiegouPageIndex:1,
|
guquanjiegouTotalItem:0,
|
annualReportDetails:[]
|
}
|
},
|
mounted(){
|
this.searchName = this.$route.query.name
|
this.name= this.$route.query.name
|
this.Area=parseInt(this.$route.query.Area)
|
// console.log(this.$route.query.annualReportDetails.Children)
|
console.log(JSON.parse(this.$route.query.params))
|
let a=JSON.parse(this.$route.query.params)
|
let b=JSON.parse(a.Detail)
|
this.guquanjiegouTotalItem=b.length
|
this.guquanjiegouList=b
|
if (this.name) {
|
this.tree.Name = this.name
|
this.GetEquityThrough()
|
}
|
this.ratio = this.CustomMethods.getRatio()
|
if (this.ratio < 125) {
|
this.ratio = 125
|
}
|
window.addEventListener('fullscreenchange', (e) => {
|
if (screenfull.isFullscreen) {
|
let xres = window.screen.width * window.devicePixelRatio
|
let yres = window.screen.height * window.devicePixelRatio
|
this.init(window.screen.width * this.ratio / 100, window.screen.height * this.ratio / 100)
|
this.isFullscreen = true
|
} else {
|
this.init()
|
this.isFullscreen = false
|
}
|
})
|
},
|
methods: {
|
changeguquanjiegouPageIndex(page){
|
this.guquanjiegouPageIndex = page
|
this.guquanjiegouList= this.annualReportDetails.slice((this.guquanjiegouPageIndex - 1) * 5, this.guquanjiegouPageIndex * 5)
|
},
|
/**
|
* 跳转至详情页面
|
* d : 当前点击的公司信息
|
*/
|
showPublicMessage (d) {
|
if (d.data.Name.indexOf('自动生成') == -1 && d.data.Name.length > 4) {
|
// localStorage.setItem('public_Message_name', d.data.Name)
|
localStorage.setItem('powerAccess',"publicMessage_tool")
|
window.open(`#/publicMessage_tool?name=${d.data.Name}`, '_blank')
|
// this.$emit('structure-Chart',d.data.Name)
|
// console.log(d.data.Name)
|
// window.open(`#/publicMessage_tool`, '_blank')
|
}
|
},
|
/**
|
* 全屏事件
|
*/
|
toFcreenfull () {
|
if (screenfull.isEnabled) {
|
screenfull.request(document.getElementById('d3FullScreen'))
|
}
|
},
|
unScreenfull () {
|
if (screenfull.isEnabled) {
|
screenfull.exit()
|
this.init()
|
}
|
},
|
init (w, h) {
|
let svgW = w || document.body.clientWidth
|
let svgH = h || 700
|
// 方块形状
|
this.diamonds = {
|
w: 250,
|
h: 75,
|
intervalW: 300,
|
intervalH: 150
|
}
|
// 源头对象
|
this.originDiamonds = {
|
w: 300,
|
h: 75
|
}
|
this.layoutTree = this.d3.tree().nodeSize([this.diamonds.intervalW - 100, this.diamonds.intervalH + 180]).separation(() => 1)
|
// 主图
|
if (document.getElementById('textBox_1')) {
|
document.getElementById('textBox_1').innerHTML = ''
|
}
|
this.svg = this.d3.select('#textBox_1').append('svg').attr('width', svgW).attr('height', svgH).attr('id', 'treesvg_1')
|
.call(this.d3.zoom().scaleExtent([0, 5]).on('zoom', () => {
|
// 设置缩放位置以及平移初始位置
|
this.svg.attr('transform', this.d3.event.transform.translate(200, svgH / 2))
|
}))
|
.attr('style', 'position: relative;z-index: 2;')
|
.append('g').attr('id', 'g').attr('transform', 'translate(' + 200 + ',' + (svgH / 2) + ')')
|
let tree = null
|
// 拷贝树的数据
|
Object.keys(this.tree).map(item => {
|
tree = JSON.parse(JSON.stringify(this.tree))
|
tree.Children = this.tree[item]
|
tree.parents = null
|
})
|
// hierarchy 返回新的结构 x0,y0初始化起点坐标
|
this.rootDown = this.d3.cluster()
|
.size([this.diamonds.intervalW, this.diamonds.intervalH - 80])
|
.separation(function (a, b) {
|
return (a.parent === b.parent ? 1 : 2) / a.depth
|
})(this.d3.hierarchy(tree, d => d.Children))
|
this.rootDown.x0 = 0
|
this.rootDown.y0 = 0
|
// 上 和 下 结构
|
let treeArr = [
|
{
|
data: this.rootDown,
|
Category: 'down'
|
}
|
]
|
treeArr.map(item => {
|
if (item.data.children) {
|
item.data.children.forEach(this.collapse)
|
}
|
this.update(item.data, item.Category, item.data)
|
})
|
},
|
|
/*
|
*[update 函数描述], [click 函数描述]
|
* @param {[Object]} source 第一次是初始源对象，后面是点击的对象
|
* @param {[String]} showtype up表示向上 down表示向下
|
* @param {[Object]} sourceTree 初始源对象
|
*/
|
update (source, showtype, sourceTree) {
|
let _this = this
|
if (source.parents === null) {
|
source.isOpen = !source.isOpen
|
}
|
let nodes
|
nodes = this.layoutTree(this.rootDown).descendants()
|
let links = nodes.slice(1)
|
|
let node = this.svg.selectAll('g.node' + showtype)
|
.data(nodes, d => d.id || (d.id = showtype + ++this.i))
|
|
let nodeEnter = node.enter().append('g')
|
.attr('class', d => showtype === 'up' && !d.depth ? 'hide-node' : 'node' + showtype)
|
.attr('transform', function (d) {
|
return 'translate(' + d.y + ',' + d.x + ')'
|
})
|
|
// 创建矩形
|
nodeEnter.append('rect')
|
.attr('type', d => {
|
return d.id
|
})
|
.attr('width', d => d.depth ? this.diamonds.w : this.originDiamonds.w)
|
.attr('height', d => d.depth ? (d.Category === COMPANY ? this.diamonds.h : this.diamonds.h) : this.originDiamonds.h)
|
.attr('x', d => d.depth ? -this.diamonds.w / 2 : -this.originDiamonds.w / 2)
|
.attr('y', d => d.depth ? -35 : -35)
|
.attr('stroke', d => d._children ? '#60e897' : (d.depth ? '#2d8bef' : '#2d8bef'))
|
.attr('stroke-width', 1)
|
.attr('rx', 5)
|
.attr('ry', 5)
|
.style('fill', d => {
|
return d._children ? '#fff' : (d.depth ? '#fff' : '#2d8bef')
|
})
|
.on('click', (d) => {
|
this.showPublicMessage(d)
|
})
|
|
// 创建圆 加减
|
nodeEnter.append('circle')
|
.attr('type', d => d.id || (d.id = showtype + 'text' + ++this.i))
|
.attr('r', (d) => d.depth ? (this.hasChildNodeArr.indexOf(d) === -1 ? 0 : SYMBOLA_S_R) : 0)
|
.attr('cy', d => d.depth ? 0 : 0)
|
.attr('cx', 135)
|
.attr('fill', d => d.children ? '#fff' : '#60e897')
|
.attr('stroke', d => d._children || d.children ? '#60e897' : '')
|
.on('click', function (d) {
|
_this.click(d, showtype, sourceTree)
|
setTimeout(() => {
|
if (document.querySelector(`text[type="${d.id}"]`).innerHTML === '-') {
|
d.isOpen = false
|
this.innerHTML = '+'
|
this.setAttribute('fill', '#60e897')
|
document.querySelector(`text[type="${d.id}"]`).setAttribute('fill', '#fff')
|
document.querySelector(`rect[type="${d.id}"]`).setAttribute('style', 'fill:#fff')
|
document.querySelector(`text[type="${d.id}"]`).innerHTML = '+'
|
} else {
|
d.isOpen = true
|
this.setAttribute('fill', '#fff')
|
document.querySelector(`text[type="${d.id}"]`).setAttribute('fill', '#60e897')
|
document.querySelector(`rect[type="${d.id}"]`).setAttribute('style', 'fill:#fff')
|
document.querySelector(`text[type="${d.id}"]`).innerHTML = '-'
|
}
|
}, DURATION)
|
})
|
|
// 持股比例
|
// nodeEnter.append('g')
|
// .attr('transform', () => 'translate(0,0)')
|
// .append('text')
|
// .attr('class', d => !d.depth ? 'proportion-hide' : 'proportion')
|
// .attr('x', d => d.x > 0 ? -110 : -110)
|
// .attr('y', -10)
|
// .attr('text-anchor', 'middle')
|
// .attr('fill', d => d.data.Category === COMPANY ? '#2d8bef' : '#7A9EFF')
|
// .text(d => '30.99%')
|
|
// 公司名称
|
// 名称过长 第一段
|
nodeEnter.append('text')
|
.attr('class', 'text-style-name')
|
.attr('x', 0)
|
.attr('y', d => {
|
console.log(d)
|
if (d.data.Name == this.tree.Name && d.x === 0 && d.y === 0) {
|
if (d.data.Name.length <= 20) {
|
return 0
|
} else {
|
return -10
|
}
|
} else {
|
return -35
|
}
|
})
|
.attr('dy', d => d.depth ? (d.data.Name.length > 9 ? '1.5em' : '2em') : '.3em')
|
.attr('text-anchor', 'middle')
|
.attr('fill', d => d.depth ? '#465166' : '#fff')
|
.text(d => {
|
let str = (d.data.Name.length > 20) ? d.data.Name.substr(0, 20) : d.data.Name
|
return str
|
})
|
.on('click', (d) => {
|
this.showPublicMessage(d)
|
})
|
// 名称过长 第二段
|
nodeEnter.append('text')
|
.attr('class', 'text-style-name')
|
.attr('x', 0)
|
.attr('y', d => {
|
if (d.data.Name == this.tree.Name && d.x === 0 && d.y === 0) {
|
if (d.data.Name.length <= 20) {
|
return 0
|
} else {
|
return -10
|
}
|
} else {
|
return -35
|
}
|
})
|
.attr('dy', d => d.depth ? '3em' : '2.3em')
|
.attr('text-anchor', 'middle')
|
.attr('fill', d => d.depth ? '#465166' : '#fff')
|
.text(d => {
|
let str = ''
|
if (d.data.Name.length <= 20) {
|
str = ''
|
} else {
|
str = d.data.Name.substr(20, 20)
|
}
|
return str
|
})
|
.on('click', (d) => {
|
this.showPublicMessage(d)
|
})
|
// 名称过长 第三段
|
nodeEnter.append('text')
|
.attr('class', 'text-style-name')
|
.attr('x', 0)
|
.attr('y', d => {
|
if (d.data.Name == this.tree.Name && d.x === 0 && d.y === 0) {
|
if (d.data.Name.length <= 40) {
|
return 0
|
} else {
|
return -10
|
}
|
} else {
|
return -35
|
}
|
})
|
.attr('dy', d => d.depth ? '4.5em' : '4.3em')
|
.attr('text-anchor', 'middle')
|
.attr('fill', d => d.depth ? '#465166' : '#fff')
|
.text(d => {
|
let str = ''
|
if (d.data.Name.length <= 40) {
|
str = ''
|
} else {
|
str = d.data.Name.substr(40, d.data.Name.length)
|
}
|
return str
|
})
|
.on('click', (d) => {
|
this.showPublicMessage(d)
|
})
|
// 股权及认缴金额
|
nodeEnter.append('text')
|
.attr('class', 'num-style-name')
|
.attr('x', -80)
|
.attr('y', d => {
|
if (d.data.Name == this.tree.Name && d.x === 0 && d.y === 0) {
|
return -20
|
} else {
|
return -35
|
}
|
})
|
.attr('dy', d => d.depth ? '5.7em' : '.3em')
|
.attr('text-anchor', 'middle')
|
.attr('fill', d => d.depth ? '#465166' : '#fff')
|
.text(d => {
|
let str = d.data.FundedRatio ? `股权: ${d.data.FundedRatio}` : ''
|
if (d.data.Name == this.name) {
|
str = ''
|
}
|
return str
|
})
|
.on('click', (d) => {
|
this.showPublicMessage(d)
|
})
|
nodeEnter.append('text')
|
.attr('class', 'num-style-name')
|
.attr('x', 40)
|
.attr('y', d => {
|
if (d.data.Name == this.tree.Name && d.x === 0 && d.y === 0) {
|
return -20
|
} else {
|
return -35
|
}
|
})
|
.attr('dy', d => d.depth ? '5.7em' : '.3em')
|
.attr('text-anchor', 'middle')
|
.attr('fill', d => d.depth ? '#465166' : '#fff')
|
.text(d => {
|
let str = ''
|
if (d.data.StockRightNum) {
|
str = `持股数: ${d.data.StockRightNum}股`
|
} else if (d.data.ShouldCapi) {
|
str = `认缴金额: ${this.CustomMethods.numTo$_NaN(d.data.ShouldCapi)}`
|
}
|
if (d.data.Name == this.name) {
|
str = ''
|
}
|
return str
|
})
|
.on('click', (d) => {
|
this.showPublicMessage(d)
|
})
|
// 认缴金额
|
// nodeEnter.append('text')
|
// .attr('class', 'text-style-money')
|
// .attr('x', 0)
|
// .attr('y', showtype === 'up' ? -this.diamonds.h / 2 : 0)
|
// .attr('dy', d => d.data.Name.substr(9, d.data.Name.length).length ? '5em' : '4em')
|
// .attr('text-anchor', 'middle')
|
// .attr('fill', d => d.depth ? '#465166' : '#fff')
|
// .text(d => d.data.money)
|
/*
|
* 绘制箭头
|
* @param {string} markerUnits [设置为strokeWidth箭头会随着线的粗细发生变化]
|
* @param {string} viewBox 坐标系的区域
|
* @param {number} markerWidth,markerHeight 标识的大小
|
* @param {string} orient 绘制方向，可设定为：auto（自动确认方向）和 角度值
|
* @param {number} stroke-width 箭头宽度
|
* @param {string} d 箭头的路径
|
* @param {string} fill 箭头颜色
|
* @param {string} id resolved0表示公司 resolved1表示个人
|
* 直接用一个marker达不到两种颜色都展示的效果
|
*/
|
nodeEnter.append('marker')
|
.attr('id', showtype + 'resolved')
|
.attr('markerUnits', 'strokeWidth')
|
.attr('markerUnits', 'userSpaceOnUse')
|
.attr('viewBox', '0 -5 10 10')
|
.attr('markerWidth', 12)
|
.attr('markerHeight', 12)
|
.attr('orient', '180')
|
.attr('refX', () => '-115')
|
.attr('stroke-width', 2)
|
.attr('fill', 'red')
|
.append('path')
|
.attr('d', 'M0,-5L10,0L0,5')
|
.attr('fill', '#dbdbdb')
|
|
// 将节点转换到它们的新位置。
|
let nodeUpdate = node.transition()
|
.duration(DURATION)
|
.attr('transform', d => 'translate(' + d.y + ',' + d.x + ')')
|
|
// 代表是否展开的+-号,function this指向当前dom
|
nodeEnter.append('svg:text')
|
.attr('type', d => d.id || (d.id = showtype + 'text' + ++this.i))
|
.on('click', function (d) {
|
_this.click(d, showtype, sourceTree)
|
setTimeout(() => {
|
if (this.innerHTML === '-') {
|
d.isOpen = false
|
this.innerHTML = '+'
|
this.setAttribute('fill', '#fff')
|
document.querySelector(`circle[type="${d.id}"]`).setAttribute('fill', '#60e897')
|
document.querySelector(`rect[type="${d.id}"]`).setAttribute('style', 'fill:#fff')
|
} else {
|
d.isOpen = true
|
this.innerHTML = '-'
|
this.setAttribute('fill', '#2d8bef')
|
document.querySelector(`circle[type="${d.id}"]`).setAttribute('fill', '#fff')
|
document.querySelector(`rect[type="${d.id}"]`).setAttribute('style', 'fill:#fff')
|
}
|
}, DURATION)
|
})
|
.attr('x', 135)
|
.attr('dy', d => d.depth ? 4 : 0)
|
.attr('text-anchor', 'middle')
|
.attr('fill', d => d._children ? '#fff' : '#2d8bef')
|
.text(d => this.hasChildNodeArr.indexOf(d) !== -1 ? (source.depth && d.isOpen ? '-' : '+') : '')
|
|
// 将退出节点转换到父节点的新位置.
|
let nodeExit = node.exit().transition()
|
.duration(DURATION)
|
.attr('transform', () => showtype === 'up' ? 'translate(' + source.x + ',' + -(source.y) + ')' : 'translate(' + source.x + ',' + (parseInt(source.y)) + ')')
|
.remove()
|
|
nodeExit.select('rect')
|
.attr('width', this.diamonds.w)
|
.attr('height', this.diamonds.h)
|
.attr('stroke', 'black')
|
.attr('stroke-width', 1)
|
|
// 修改线条
|
let link = this.svg.selectAll('path.link' + showtype)
|
.data(links, d => d.id)
|
|
// 在父级前的位置画线。
|
let linkEnter = link.enter().insert('path', 'g')
|
.attr('class', 'link' + showtype)
|
.attr('marker-start', d => `url(#${showtype}resolved)`)// 根据箭头标记的id号标记箭头
|
.attr('stroke', d => d.data.Category === COMPANY ? '#dbdbdb' : '#dbdbdb')
|
.style('fill-opacity', 1)
|
.attr('d', (d) => {
|
let o = {x: d.x, y: d.y}
|
return _this.diagonal(o, o, showtype)
|
})
|
|
let linkUpdate = linkEnter.merge(link)
|
// 过渡更新位置.
|
linkUpdate.transition()
|
.duration(DURATION)
|
.attr('d', d => _this.diagonal(d, d.parent, showtype))
|
|
// 将退出节点转换到父节点的新位置
|
link.exit().transition()
|
.duration(DURATION)
|
.attr('d', () => {
|
let o = {
|
x: source.x,
|
y: source.y
|
}
|
return _this.diagonal(o, o, showtype)
|
}).remove()
|
|
// 隐藏旧位置方面过渡.
|
nodes.forEach(d => {
|
d.x0 = d.x
|
d.y0 = d.y
|
})
|
},
|
|
// 拷贝到_children 隐藏1排以后的树
|
collapse (source) {
|
if (source.children) {
|
source._children = source.children
|
source._children.forEach(this.collapse)
|
source.children = null
|
this.hasChildNodeArr.push(source)
|
}
|
},
|
|
click (source, showType, sourceTree) {
|
// 不是起点才能点
|
if (source.depth) {
|
if (source.children) {
|
source._children = source.children
|
source.children = null
|
} else {
|
source.children = source._children
|
source._children = null
|
}
|
this.update(source, showType, sourceTree)
|
}
|
},
|
|
diagonal (s, d, showtype) {
|
let path
|
path = `M ${s.y} ${s.x}
|
L ${s.y} ${s.x}
|
L ${d.y + 170} ${s.x}
|
L ${d.y + 170} ${d.x}
|
L ${d.y + 80} ${d.x}`
|
return path
|
},
|
|
saveImg () {
|
alert('保存')
|
},
|
|
resetSvg () {
|
this.d3.select('#treesvg_1').remove()
|
this.init()
|
},
|
/**
|
* 获取股权穿透信息
|
*/
|
GetEquityThrough () {
|
let data = {
|
name: this.name,
|
ev: 0,
|
iv: 0,
|
isinvest: false,
|
ispro: false
|
}
|
this.loading = true
|
axios.request({
|
url: '/QiChaCha/GetEquityThroughAndInvestV2',
|
data,
|
method: 'post'
|
}).then((res) => {
|
if (res.data.Check) {
|
this.tree.Parents = res.data.Data.Children
|
this.init()
|
} else {
|
|
}
|
this.loading = false
|
}, (err) => {
|
this.loading = false
|
})
|
}
|
},
|
watch: {
|
name: {
|
handler (newValue) {
|
this.tree.Name = this.name
|
this.GetEquityThrough()
|
}
|
}
|
},
|
computed:{
|
guquanjiegouColumnstab1 () { // 控制企业
|
let columns = []
|
columns.push({
|
title: '序号',
|
key: 'ItemIndex',
|
width: 150,
|
align: 'center',
|
render: (h, params) => {
|
return h('span', params.index + 1)
|
}
|
})
|
columns.push({
|
title: '变更类型',
|
key: 'Type',
|
minWidth: 200,
|
align: 'center',
|
})
|
columns.push({
|
title: '变更内容',
|
key: 'Content',
|
minWidth: 200,
|
align: 'center',
|
})
|
return columns
|
},
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.penetrate-chart {
|
.bt-group {
|
position: fixed;
|
z-index: 999;
|
right: 15px;
|
bottom: 15px;
|
|
button {
|
width: 88px;
|
height: 32px;
|
display: block;
|
border-radius: 18px;
|
font-size: 14px;
|
font-family: PingFangSC-Medium;
|
font-weight: 500;
|
line-height: 20px;
|
}
|
|
.save {
|
background: rgba(255, 168, 9, 1);
|
color: rgba(255, 255, 255, 1);
|
}
|
|
.reset {
|
margin-top: 8px;
|
color: rgba(255, 168, 9, 1);
|
background: white;
|
border: 1px solid rgba(255, 168, 9, 1);
|
}
|
}
|
}
|
|
#textBox_1 {
|
width: 100%;
|
height: 700px;
|
cursor: pointer;
|
}
|
#treesvg_1 {
|
width: 100%;
|
display: block;
|
margin: auto;
|
|
#g {
|
.linkup, .linkdown {
|
fill: none;
|
stroke-width: 1px;
|
}
|
|
.text-style-name {
|
font-size: 12px; /*no*/
|
font-family: PingFangSC-Medium;
|
font-weight: 600;
|
}
|
|
.num-style-name {
|
font-size: 12px; /*no*/
|
font-family: PingFangSC-Medium;
|
font-weight: 500;
|
}
|
|
.text-style-money {
|
font-size: 10px; /*no*/
|
font-family: PingFangSC-Regular;
|
font-weight: 400;
|
color: rgba(70, 81, 102, 1)
|
}
|
|
.proportion {
|
font-size: 10px;
|
font-family: PingFangSC-Regular;
|
font-weight: 400;
|
}
|
}
|
|
.proportion-hide, .hide-node {
|
display: none;
|
}
|
}
|
.newTitle {
|
position: relative;
|
margin-bottom: 12px;
|
border-left: 4px solid #2d8bef;
|
padding-left: 8px;
|
font-size: 16px;
|
line-height: 18px;
|
font-weight: 600;
|
color: #404040;
|
|
.titleLogo {
|
height: 16px;
|
position: absolute;
|
top: 1px;
|
right: 0;
|
}
|
}
|
|
.itemTitle {
|
background-color: #f4f4f4;
|
color: #8b8b8b;
|
font-size: 16px;
|
line-height: 40px;
|
padding-left: 20px;
|
}
|
.routerItem {
|
width: 150px;
|
margin: 0 10px 12px 0;
|
float: left;
|
text-align: center;
|
border: 1px solid #dcdee2;
|
padding: 6px;
|
cursor: pointer;
|
|
.title {
|
margin-right: 8px;
|
}
|
}
|
|
.routerItem:hover,.selectedRouterItem {
|
background-color: #128bed;
|
color: white;
|
}
|
|
.disabledRouterItem {
|
background-color: #f3f3f3;
|
cursor: auto;
|
}
|
|
.disabledRouterItem:hover {
|
background-color: #f3f3f3;
|
color: #404040;
|
}
|
|
.listBox {
|
.li {
|
width: 50%;
|
float: left;
|
padding: 6px 12px 6px 40px;
|
position: relative;
|
|
.circle {
|
width: 6px;
|
height: 6px;
|
display: inline-block;
|
border-radius: 6px;
|
background-color: #2d8bef;
|
position: absolute;
|
top: 13px;
|
left: 26px;
|
}
|
.name{
|
margin-right: 8px;
|
font-weight: 600;
|
}
|
.content{
|
|
}
|
}
|
}
|
</style>
|
