<template>
<div id="borrow">
<div id="Main">
<div class="tupu" id="tupu">
<div class="tupu-toolbar">
<ul>
<li id="zoomOut">
<span class="big"></span>放大
</li>
<li id="zoomIn">
<span class="small"></span>缩小
</li>
<li id="reset">
<span class="refresh"></span>重置
</li>
<li @click="toggleFullScreen($event)">
<span class="screen"></span>
{{isFullscreen?"全屏":"退出"}}
</li>
<li id="TrSave" @click="downloadImpByChart(\'股权穿透图\')">
<span class="save"></span>保存
</li>
</ul>
</div>
<div id="mountNode"></div>
</div>
</div>
<div class="back" @click="onJumpReport">
<!-- <img src="~@/assets/relation/back.svg" alt /> -->
{{companyName}}
</div>
<div class="back2 back" @click="onJumpReport">
<img src="~@/assets/relation/back.svg" alt />返回
</div>
</div>
</template>
export default { components: {}, mixins: [D3Mixin], name: \'relation2\', data() { return { companyName: this.$route.query.companyName, isFullscreen: true, rootData: { "downward": { "direction": "down", "name": "origin", "children": [ { "name": "...有限公司", "amount": "100", "ratio": "55%", "hasHumanholding":true, "hasChildren":true, "isExpand": false, "type": 2, "hasNode": 1, "children": [ { "name": "公司名字", "hasHumanholding":false, "hasChildren":true, "amount": "100", "isHoldingCompany": true, "ratio": "55%", "type": 2, "children": [] }, { "name": "公司名字", "hasHumanholding":false, "hasChildren":true, "amount": "100", "isHoldingCompany": true, "ratio": "55%", "type": 2, "children": [] } ] }, { "name": "...有限公司11", "amount": "100", "isHoldingCompany": true, "ratio": "55%", "hasHumanholding":true, "hasChildren":true, "isExpand": false, "type": 2, "hasNode": 1, "children": [ { "name": "公司名字", "hasHumanholding":false, "hasChildren":true, "amount": "100", "isHoldingCompany": true, "ratio": "55%", "type": 2, "children": [] }, { "name": "公司名字", "hasHumanholding":false, "hasChildren":true, "amount": "100", "isHoldingCompany": true, "ratio": "55%", "type": 2, "children": [] } ] }, { "name": "...有限公司", "amount": "100", "isHoldingCompany": true, "ratio": "55%", "hasHumanholding":true, "hasChildren":true, "isExpand": false, "type": 2, "hasNode": 1, "children": [ { "name": "公司名字", "hasHumanholding":false, "hasChildren":true, "amount": "100", "isHoldingCompany": true, "ratio": "55%", "type": 2, "children": [] }, { "name": "公司名字", "hasHumanholding":false, "hasChildren":true, "amount": "100", "ratio": "55%", "type": 2, "children": [] } ] }, { "name": "...有限公司", "hasHumanholding":false, "hasChildren":true, "amount": "100", "ratio": "55%", "type": 2, "children": [] }, { "name": "...有限公司", "hasHumanholding":false, "hasChildren":true, "isExpand": false, "amount": "100", "ratio": "55%", "type": 2, "hasNode": 1, "children": [ { "name": "公司或股东名字", "hasHumanholding":false, "amount": "100", "ratio": "55%", "type": 2, "children": [] }, { "name": "公司或股东名字", "hasHumanholding":false, "amount": "100", "ratio": "55%", "type": 2, "children": [] }, { "name": "公司或股东名字", "hasHumanholding":false, "amount": "100", "ratio": "55%", "type": 2, "children": [] }, { "name": "公司或股东名字", "hasHumanholding":false, "amount": "100", "ratio": "55%", "type": 2, "children": [] } ] } ] }, "upward": { "direction": "up", "name": "origin", "children": [ { "name": "...(有限合伙)", "hasHumanholding":false, "amount": "100", "isHoldingCompany": true, "ratio": "55%", "type": 2, }, { "name": "...(有限合伙)", "hasHumanholding":false, "amount": "100", "isHoldingCompany": true, "ratio": "55%", "type": 2, "hasNode": 1, "children": [ { "name": "公司或股东名字", "hasHumanholding":false, "amount": "100", "isHoldingCompany": true, "ratio": "55%", "type": 1, "children": [], "isFHolder": true, "holderPercent": \'5%\', }, { "name": "公司或股东名字", "hasHumanholding":false, "isExpand": false, "amount": "100", "isHoldingCompany": true, "ratio": "55%", "type": 2, "hasNode": 1, "children": [ { "name": "公司或股东名字", "hasHumanholding":false, "amount": "100", "isHoldingCompany": true, "ratio": "55%", "type": 1, "isFHolder": true, "isActualController": true, "holderPercent": \'95%\', "children": [] }, { "name": "公司或股东名字", "hasHumanholding":false, "amount": "100", "ratio": "55%", "type": 2, "children": [] } ] }, { "name": "公司或股东名字", "hasHumanholding":false, "amount": "100", "ratio": "55%", "type": 1, "children": [] } ] } ] } }, rootName: \'...有限公司\', // beijingCrid: \'98682337095518809\' beijingCrid: this.$route.query.companyId ? decodeURIComponent(this.$route.query.companyId) : \'98682337095519887\' } }, created () { }, mounted () { this.getInitData() // this.drawing() window.addEventListener(\'resize\',function(){ const svg = document.getElementById(\'svg\') svg.setAttribute(\'height\',window.innerHeight) }) }, methods: { getInitData () { gqctt({ beijingCrid: this.beijingCrid, direction: \'\' }).then(res => { if (res.code === 0) { this.rootData.upward.children = res.result.investorList this.rootData.downward.children = res.result.holderList this.rootData.upward.children.map(item => { item.amount = Number(item.subConAm).toFixed(2) item.ratio = item.subComBl.length > 6 ? calculation.accMul(item.subComBl,100).toFixed(2) + \'%\' : calculation.accMul(item.subComBl,100) + \'%\' item.name = item.entName item.type = item.bz === \'企业\' ? 2 : 1 item.isHoldingCompany = item.isHolding == 1 ? true : false item.isFHolder = item.subComBl >= 0.25 && item.type == 1 item.holderPercent = item.ratio item.direction = \'up\' }) this.rootData.downward.children.map(item => { item.amount = Number(item.subConAm).toFixed(2) item.ratio = item.subComBl.length > 6 ? calculation.accMul(item.subComBl,100).toFixed(2) + \'%\' : calculation.accMul(item.subComBl,100) + \'%\' item.name = item.pentName item.type = item.bz === \'企业\' ? 2 : 1 item.direction = \'down\' }) this.rootName = res.result.name this.drawing() console.log(this.rootData) } }) }, addChildren (obj,beijingCrid,direction,cb) { gqctt({ beijingCrid: beijingCrid, direction: direction }).then(res => { if (res.code === 0) { if (direction == \'up\') { obj.children = res.result.investorList obj.children.map(item => { item.amount = Number(item.subConAm).toFixed(2) item.isFHolder = true item.ratio = item.subComBl.length > 6 ? calculation.accMul(item.subComBl,100).toFixed(2) + \'%\' : calculation.accMul(item.subComBl,100) + \'%\' item.name = item.entName item.type = item.bz === \'企业\' ? 2 : 1 item.isHoldingCompany = item.isHolding == 1 ? true : false item.isFHolder = item.subComBl >= 0.25 && item.type == 1 item.direction = direction item.holderPercent = item.ratio }) } else { obj.children = res.result.holderList obj.children.map(item => { item.amount = Number(item.subConAm).toFixed(2) item.isFHolder = true item.ratio = item.subComBl.length > 6 ? calculation.accMul(item.subComBl,100).toFixed(2) + \'%\' : calculation.accMul(item.subComBl,100) + \'%\' item.name = item.pentName item.type = item.bz === \'企业\' ? 2 : 1 item.isHoldingCompany = item.isHolding == 1 ? true : false item.isFHolder = item.subComBl >= 0.25 && item.type == 1 item.direction = direction item.holderPercent = item.ratio }) } cb() } }) }, drawing () { const width = document.getElementById(\'mountNode\').scrollWidth const height = document.getElementById(\'mountNode\').scrollHeight || 600 const strokeColor = { isActualController: \'#FBC6C3\', isFHolder: \'#F3DDB6\', person: \'#0084FF\', default: \'#CCC\' } const lineColor = { isActualController: \'#FA6B64\', isFHolder: \'#F1B03A\', person: \'#0084FF\', default: \'#919191\' } const fillColor = { isActualController: "#FFFBFB", isFHolder: \'#FEFBF3\', person: \'#F5FAFF\', default: \'#FFF\' } var _this = this; // var rootName = \'\'; //根节点的名字 var rootRectWidth = 0; //根节点rect的宽度 var downwardLength = 0, upwardLength = 0; var forUpward = true var treeChart = function(d3Object) { this.d3 = d3Object; this.directions = [\'upward\', \'downward\']; }; treeChart.prototype.drawChart = function() { // First get tree data for both directions. this.treeData = {}; var self = this; self.directions.forEach(function(direction) { self.treeData[direction] = _this.rootData[direction]; }); // rootName = \'上海冰鉴信息科技有限公司\'; rootRectWidth = _this.rootName.length * 15 + 60; //获得upward第一级节点的个数 upwardLength = _this.rootData.upward.children.length; //获得downward第一级节点的个数 downwardLength = _this.rootData.downward.children.length; self.graphTree(self.getTreeConfig()); }; treeChart.prototype.getTreeConfig = function() { var treeConfig = { \'margin\': { \'top\': 10, \'right\': 5, \'bottom\': 0, \'left\': 30 } } treeConfig.chartWidth = (width - treeConfig.margin.right - treeConfig.margin.left); treeConfig.chartHeight = (height - treeConfig.margin.top - treeConfig.margin.bottom); treeConfig.centralHeight = treeConfig.chartHeight / 2; treeConfig.centralWidth = treeConfig.chartWidth / 2; treeConfig.linkLength = 160; treeConfig.duration = 500; //动画时间 return treeConfig; }; treeChart.prototype.graphTree = function(config) { var self = this; var d3 = this.d3; var linkLength = config.linkLength; var duration = config.duration; var hasChildNodeArr = []; var id = 0; var diagonal = function(obj) { //折线 var s = obj.source; var t = obj.target; let multiplier = s.x > t.x ? -1 : s.x < t.x ? 1 : 0 let path = s.y > t.y ? (s.y / 3 + t.y * 2 / 3) : (s.y / 3 + t.y * 2 / 3 + 15) return ( "M" + s.x + "," + (s.y + 12) + "L" + s.x + "," + path + "L" + t.x + "," + path + // pathA+ "L" + t.x + "," + t.y ); }; var zoom = d3.behavior.zoom() .scaleExtent([0.5, 2]) .on(\'zoom\', redraw); var svg = d3.select(\'#mountNode\') .append(\'svg\') .attr(\'id\',\'svg\') .attr(\'width\', config.chartWidth + config.margin.right + config.margin.left) .attr(\'height\', config.chartHeight + config.margin.top + config.margin.bottom) .attr(\'xmlns\',\'http://www.w3.org/2000/svg\') .on(\'mousedown\', disableRightClick) .call(zoom) .on(\'dblclick.zoom\', null); var treeG = svg.append(\'g\') .attr(\'class\', \'gbox\') .attr(\'transform\', \'translate(\' + config.margin.left + \',\' + config.margin.top + \')\'); d3.select("#reset").on("click", function(d){ interpolateZoom([0, 0], 1); }); function interpolateZoom(translate, scale) { var self = this; return d3 .transition() .duration(350) .tween("zoom", function() { var iTranslate = d3.interpolate(zoom.translate(), translate), iScale = d3.interpolate(zoom.scale(), scale); return function(t) { zoom.scale(iScale(t)).translate(iTranslate(t)); redraw(); }; }); } function zoomClick() { var clicked = d3.event.target, direction = 1, factor = 0.2, target_zoom = 1, center = [width / 2, height / 2], extent = zoom.scaleExtent(), translate = zoom.translate(), translate0 = [], l = [], view = { x: translate[0], y: translate[1], k: zoom.scale() }; d3.event.preventDefault(); direction = this.id === "zoomOut" ? 1 : -1; target_zoom = Number(zoom.scale() + factor * direction).toFixed(1) if (target_zoom === extent[0] || target_zoom === extent[1]) { return false } if (target_zoom < extent[0]) { target_zoom = extent[0] } if (target_zoom > extent[1]) { target_zoom = extent[1] } translate0 = [(center[0] - view.x) / view.k, (center[1] - view.y) / view.k]; view.k = target_zoom; l = [translate0[0] * view.k + view.x, translate0[1] * view.k + view.y]; view.x += center[0] - l[0]; view.y += center[1] - l[1]; interpolateZoom([view.x, view.y], view.k); } d3.select("#zoomIn").on("click", zoomClick); d3.select("#zoomOut").on("click", zoomClick); for(var d in this.directions) { var direction = this.directions[d]; var data = self.treeData[direction]; data.x0 = config.centralWidth; data.y0 = config.centralHeight; data.children.forEach(collapse); update(data, data, treeG); } function update(source, originalData, g) { var direction = originalData[\'direction\']; forUpward = direction == \'up\'; var node_class = direction + \'Node\'; var link_class = direction + \'Link\'; var downwardSign = (forUpward) ? -1 : 1; var nodeColor = (forUpward) ? \'#37592b\' : \'#8b4513\'; var isExpand = false; var statusUp = true; var statusDown = true; var nodeSpace = 210; var tree = d3.layout.tree().sort(sortByDate).nodeSize([nodeSpace, 0]); var nodes = tree.nodes(originalData); var links = tree.links(nodes); var offsetX = -config.centralWidth; nodes.forEach(function(d) { d.y = downwardSign * (d.depth * linkLength) + config.centralHeight; d.x = d.x - offsetX; if(d.name == \'origin\') { d.x = config.centralWidth; d.y += downwardSign * 0; // 上下两树图根节点之间的距离 } }); var node = g.selectAll(\'g.\' + node_class) .data(nodes, function(d) { return d.id || (d.id = ++id); }) var nodeEnter = node.enter().append(\'g\') .attr(\'class\', node_class) .attr(\'transform\', function(d) { return \'translate(\' + source.x0 + \',\' + source.y0 + \')\'; }) .style(\'cursor\', function(d) { return(d.name == \'origin\') ? \'\' : (d.children || d._children) ? \'pointer\' : \'\'; }) .on(\'click\',d => { if (d.type == 2) { if ((d.direction == \'up\' && d.beijingCrid) || (d.direction == \'down\' && d.pbeijingCrid)) { _this.$router.push({ path: \'/search/detail\', name: \'search-detail\', query: { companyId: d.direction == \'up\' ? d.beijingCrid : d.pbeijingCrid } }) } } }) .on(\'mouseover\',d => { if (d.name === \'origin\') { return false } let hoverLinkArr = [d.id] let sColor = strokeColor.default let lColor = lineColor.default if (d.isActualController) { sColor = strokeColor.isActualController lColor = lineColor.isActualController } else if (d.isFHolder) { sColor = strokeColor.isFHolder lColor = lineColor.isFHolder } else { sColor = strokeColor.person lColor = lineColor.person } getRelationLink(d.id,lColor) d3.selectAll(\'marker#resolved\'+d.id).selectAll(\'path\').attr(\'fill\',lColor) let link if (d.direction == \'up\') { link = d3.selectAll(\'.upLink\') } else { link = d3.selectAll(\'.downLink\') } link.sort(function(a,b){ if (a.target.id === d.id) { return 1 } else { return -1 } }) rect.style(\'stroke-width\',function(r) { if (r.id === d.id) { return \'2\' } }).style(\'stroke\', function(r) { if (r.id === d.id) { if (r.type == 2) { return \'#0084FF\' } else { if (r.type == 1) { if (r.isActualController) { return "#FA6B64" } else if (r.isFHolder) { return \'#F1B03A\' } else { return \'#0084FF\' } } else{ return "#CCC" } } } else { if (r.type == 1) { if (r.isActualController) { return "#FBC6C3" } else if (r.isFHolder) { return \'#F3DDB6\' } else { return \'#83C6FF\' } } else if (r.name === \'origin\') { return \'#0E78DB\' } else{ return "#CCC" } } }) }) .on(\'mouseout\',d => { if (d.name === \'origin\') { return false } d3.selectAll(\'marker#resolved\'+d.id).selectAll(\'path\').attr(\'fill\',lineColor.default) link.style(\'stroke\',function(l){ return \'#919191\' }).style(\'stroke-width\',function(l){ return 1 }) rect.style(\'stroke-width\',function(r) { if (r.id === d.id) { return \'1\' } }).style(\'stroke\', function(r) { if (r.type == 1) { if (r.isActualController) { return "#FBC6C3" } else if (r.isFHolder) { return \'#F3DDB6\' } else { return \'#83C6FF\' } } else if (r.name === \'origin\') { return \'#0E78DB\' } else { return "#CCC" } }) }) function getRelationLink (id,color) { if (id == 1) { return false } let sourceId = \'\' link.style(\'stroke\',function(l){ if (id === l.target.id) { sourceId = l.source.id return color } }).style(\'stroke-width\',function(l){ if (id === l.target.id) { return 2 } }) } const rect = nodeEnter.append("svg:rect") .attr("x", function(d) { return(d.name == \'origin\') ? -(rootRectWidth / 2) : -100; }) .attr("y", function(d) { return(d.name == \'origin\') ? -20 : forUpward ? -52 : 12; }) .attr("width", function(d) { return(d.name == \'origin\') ? rootRectWidth : 200; }) .attr("height", function(d) { return(d.name == \'origin\') ? 40 : 80; }) .attr("rx", 0) .style(\'cursor\', "pointer") .style("stroke", function(d) { if (d.name == \'origin\') { return "#0E78DB" } else if (d.type == 1) { if (d.isActualController) { return "#FBC6C3" } else if (d.isFHolder) { return \'#F3DDB6\' } else { return \'#83C6FF\' } } else{ return "#CCC" } }) .style("fill", function(d) { if (d.name == \'origin\') { return "#0084FF" } else if (d.type == 1) { if (d.isActualController) { return "#FFFBFB" } else if (d.isFHolder) { return \'#FEFBF3\' } else { return \'#F5FAFF\' } } else{ return "#fff" } }) const personTopRect = nodeEnter.append("svg:rect") .attr("x", function(d) { return -100; }) .attr("y", function(d) { return !d.isFHolder ? 0 : d.isActualController ? -102 : -82; }) .attr("width", function(d) { return d.isFHolder ? 200 : 0; }) .attr("height", function(d) { return !d.isFHolder ? 0 : d.isActualController ? 50 : 30; }) .attr("rx", 2) .style("stroke", function(d) { return d.isActualController ? "#FA6B64" : "#F1B03A"; }) .style("fill", function(d) { return d.isActualController ? "#FA6B64" : "#F1B03A"; //节点背景色 }) nodeEnter .append("svg:path") .attr("fill", d => { return d.isActualController ? "#FA6B64" : "#F1B03A" }) .attr("d", function(d) { if (d.isFHolder) { return "M0 -44 L-10 -54 L10 -54 Z" } else { return ""; } }) const holdingCompanyRect = nodeEnter.append(\'svg:rect\') .attr("x", "-40") .attr("y", function(d) { return(d.name == \'origin\') ? \'.35em\' : forUpward ? \'31\' : \'-9\'; }) .attr("rx",2) .attr("width", function(d) { return d.isHoldingCompany ? 30 : 0; }) .attr("height", function(d) { return d.isHoldingCompany ? 20 : 0; }) .style("fill", "#EBF5FF") nodeEnter.append("text") .attr("x", "-35") .attr("dy", function(d) { return(d.name == \'origin\') ? \'.35em\' : forUpward ? \'45\' : \'5\'; }) .attr("text-anchor", "start") .style("fill", "#0084FF") .style(\'font-size\', 10) .text(function(d) { return d.isHoldingCompany ? "控股" : ""; }); nodeEnter.append(\'circle\') .attr(\'r\', 1e-6); nodeEnter.append("text") .attr("x", function(d) { return \'0\' }) .attr(\'dy\', function(d) { return(d.name == \'origin\') ? \'.35em\' : forUpward ? \'-24\' : \'40\'; }) .attr("text-anchor", function(d) { return \'middle\' }) .text(function(d) { if(d.name == \'origin\') { return _this.rootName; } if(d.repeated) { return \'[Recurring] \' + d.name; } return(d.name.length > 12) ? d.name.substr(0, 12) : d.name; }) .style({ \'fill\': function(d) { if(d.name == \'origin\') { return \'#fff\'; } else { return \'#333\' } }, \'font-size\': function(d) { return(d.name == \'origin\') ? 16 : 14; }, \'cursor\': "pointer" }) .on(\'click\', Change_modal) .append(\'svg:title\').text(d=>d.name) nodeEnter.append("text") .attr("x", "0") .attr("dy", function(d) { return(d.name == \'origin\') ? \'.35em\' : forUpward ? \'-5\' : \'59\'; }) .attr("text-anchor", function() { return \'middle\' }) .attr(\'fill\', \'#333\') .text(function(d) { return d.name.length > 24 ? d.name.substr(12, 12) + \'...\' : d.name.substr(12, d.name.length); }) .style({ \'font-size\': function(d) { return(d.name == \'origin\') ? 16 : 14; }, \'cursor\': "pointer" }) .append(\'svg:title\').text(d=>d.name) nodeEnter.append("text") .attr("x", "0") .attr("dy", function(d) { if (d.name === \'origin\') { return \'.35em\' } else { if (forUpward) { if (d.name.length > 12) { return \'16\' } else { return \'6\' } } else { if (d.name.length > 12) { return \'80\' } else { return \'70\' } } } }) .attr("text-anchor", "middle") .attr("class", "linkname") .style("fill", "#666") .style(\'cursor\', "pointer") .style(\'font-size\', 12) .text(function(d) { var str = (d.name == \'origin\') ? \'\' : "认缴金额："+ d.amount +"万人民币"; return(str.length > 18) ? str.substr(0, 18) + ".." : str; }); nodeEnter.append("text") .attr("x", "10") .attr("dy", function(d) { return(d.name == \'origin\') ? \'.35em\' : forUpward ? \'45\' : \'5\'; }) .attr("text-anchor", "start") .attr("class", "linkname") .style("fill", "#0084FF") .style(\'font-size\', 10) .text(function(d) { return(d.name == \'origin\') ? "" : d.ratio; }); nodeEnter.append("text") .attr("x", "0") .attr("dy", function(d) { return d.isActualController ? -87 : -72; }) .attr("text-anchor", "middle") .style("fill", "#fff") .style(\'font-size\', 12) .text(function(d) { return d.isActualController ? \'疑似实际控制人\' : \'\'; }); nodeEnter.append("text") .attr("x", "0") .attr("dy", function(d) { return d.isActualController ? -65 : -63; }) .attr("text-anchor", "middle") .style("fill", "#fff") .style(\'font-size\', 12) .text(function(d) { return d.isFHolder ? "最终受益人：" + d.holderPercent : \'\'; }); var nodeUpdate = node.transition() .duration(duration) .attr(\'transform\', function(d) { return \'translate(\' + d.x + \',\' + d.y + \')\'; }); nodeUpdate.select(\'circle\') .attr(\'r\', function(d) { return d.hasNode == 1 ? 10 : 0 }) .attr(\'cy\', function(d) { return(d.name == \'origin\') ? -20 : (forUpward) ? -63 : 103; }) .style(\'fill\', function(d) { return d.hasNode == 1 ? "#9CD0FF" : "" }) .style(\'stroke\', function(d) { return d.hasNode == 1 ? "#9CD0FF" : "" }) .style(\'stroke-width\', function(d) { if(d.repeated) { return 5; } }); //代表是否展开的+-号 nodeEnter.append("svg:text") .attr("class", "isExpand") .attr("x", "0") .attr("dy", function(d) { return forUpward ? -57 : 109; }) .attr("text-anchor", "middle") .style("fill", "#fff") .style(\'font-size\',\'20px\') .style(\'cursor\',\'pointer\') .text(function(d) { if(d.name == \'origin\') { return \'\'; } return d.hasNode == 1 ? "+" : \'\' }) .on(\'click\',click) nodeUpdate.select(\'text\').style(\'fill-opacity\', 1) var nodeExit = node.exit().transition() .duration(duration) .attr(\'transform\', function(d) { return \'translate(\' + source.x + \',\' + source.y + \')\'; }) .remove(); nodeExit.select(\'circle\') .attr(\'r\', 1e-6) nodeExit.select(\'text\') .style(\'fill-opacity\', 1e-6); var link = g.selectAll(\'path.\' + link_class) .data(links, function(d) { return d.target.id; }); link.enter().insert(\'path\', \'g\') .attr(\'class\', link_class) .attr(\'stroke\',function(d){ // return \'#8b4513\' return \'#919191\' }) .attr(\'fill\',"none") .attr(\'stroke-width\',\'1px\') // .attr(\'opacity\', 0.5) .attr(\'d\', function(d) { var o = { x: source.x0, y: source.y0 }; return diagonal({ source: o, target: o }); }) .attr("marker-end",function (d, i) { return forUpward ? getMarkerUpArrow(d,i) : getMarkerDownArrow(d,i) }) .attr("id", function(d, i) { return "mypath" + "-" + d.source.id + "-" + d.target.id; }) link.transition() .duration(duration) .attr(\'d\', diagonal); link.exit().transition() .duration(duration) .attr(\'d\', function(d) { var o = { x: source.x, y: source.y }; return diagonal({ source: o, target: o }); }) .remove(); nodes.forEach(function(d) { d.x0 = d.x; d.y0 = d.y; }); function getMarkerUpArrow(d,i) { svg.append("defs").append("marker") //箭头 .attr("id", "resolved"+d.target.id) .attr("markerUnits", "strokeWidth") //设置为strokeWidth箭头会随着线的粗细发生变化 .attr("markerUnits", "userSpaceOnUse") .attr("viewBox", "0 -5 10 10") //坐标系的区域 .attr("refX", -28) //箭头坐标 .attr("refY", 0) .attr("markerWidth", 12) //标识的大小 .attr("markerHeight", 12) .attr("orient", "90") //绘制方向，可设定为：auto（自动确认方向）和 角度值 .attr("stroke-width", 2) //箭头宽度 .append("path") .attr("d", "M0,-5L10,0L0,5") //箭头的路径 .attr(\'fill\', \'#919191\'); //箭头颜色 return "url(#resolved" + d.target.id + ")"; } function getMarkerDownArrow(d,i) { svg.append("defs").append("marker") //箭头 .attr("id", "resolved"+d.target.id) .attr("markerUnits", "strokeWidth") //设置为strokeWidth箭头会随着线的粗细发生变化 .attr("markerUnits", "userSpaceOnUse") .attr("viewBox", "0 -5 10 10") //坐标系的区域 .attr("refX", 0) //箭头坐标 .attr("refY", 0) .attr("markerWidth", 12) //标识的大小 .attr("markerHeight", 12) .attr("orient", "90") //绘制方向，可设定为：auto（自动确认方向）和 角度值 .attr("stroke-width", 2) //箭头宽度 .append("path") .attr("d", "M0,-5L10,0L0,5") //箭头的路径 .attr(\'fill\',\'#919191\'); return "url(#resolved" + d.target.id + ")"; } function Change_modal () { _this.Modal = true } function click(d) { event.stopPropagation() if(forUpward) { } else { if(d._children) { console.log(\'对外投资--ok\') } else { console.log(\'对外投资--no\') } } isExpand = !isExpand; if(d.name == \'origin\') { return; } if(d.children) { d._children = d.children; d.children = null; d3.select(this).text(\'+\') update(d, originalData, g); } else { if (d._children && d._children.length > 0) { d.children = d._children; d._children = null; if(d.name == \'origin\') { d.children.forEach(expand); } d3.select(this).text(\'-\') update(d, originalData, g); } else { gqctt({ beijingCrid: d.direction == \'up\' ? d.beijingCrid : d.pbeijingCrid, direction: d.direction }).then(res => { if (res.code === 0) { if (d.direction == \'up\') { d.children = res.result.investorList d.children.map(item => { item.amount = Number(item.subConAm).toFixed(2) item.isFHolder = true item.ratio = item.subComBl.length > 6 ? calculation.accMul(item.subComBl,100).toFixed(2) + \'%\' : calculation.accMul(item.subComBl,100) + \'%\' item.name = item.entName item.type = item.bz === \'企业\' ? 2 : 1 item.isHoldingCompany = item.isHolding == 1 ? true : false item.isFHolder = item.subComBl >= 0.25 && item.type == 1 item.direction = direction item.holderPercent = item.ratio }) } else { d.children = res.result.holderList d.children.map(item => { item.amount = Number(item.subConAm).toFixed(2) item.isFHolder = true item.ratio = item.subComBl.length > 6 ? calculation.accMul(item.subComBl,100).toFixed(2) + \'%\' : calculation.accMul(item.subComBl,100) + \'%\' item.name = item.pentName item.type = item.bz === \'企业\' ? 2 : 1 item.isHoldingCompany = item.isHolding == 1 ? true : false item.isFHolder = item.subComBl >= 0.25 && item.type == 1 item.direction = direction item.holderPercent = item.ratio }) } d._children = null; if(d.name == \'origin\') { d.children.forEach(expand); } d3.select(this).text(\'-\') update(d, originalData, g) } }) } } } } function expand(d) { if(d._children) { d.children = d._children; d.children.forEach(expand); d._children = null; } } function collapse(d) { if(d.children && d.children.length != 0) { d._children = d.children; d._children.forEach(collapse); d.children = null; hasChildNodeArr.push(d); } } function redraw() { treeG.attr(\'transform\', \'translate(\' + zoom.translate() + \')\' + \' scale(\' + zoom.scale() + \')\'); } function disableRightClick() { // stop zoom if(d3.event.button == 2) { console.log(\'No right click allowed\'); d3.event.stopImmediatePropagation(); } } function sortByDate(a, b) { var aNum = a.name.substr(a.name.lastIndexOf(\'(\') + 1, 4); var bNum = b.name.substr(b.name.lastIndexOf(\'(\') + 1, 4); return d3.ascending(aNum, bNum) || d3.ascending(a.name, b.name) || d3.ascending(a.id, b.id); } }; var d3GenerationChart = new treeChart(d3); d3GenerationChart.drawChart(); }, onJumpReport() { this.$router.push(...) } } }
.g6-tooltip { border: 1px solid #e2e2e2; border-radius: 4px; font-size: 12px; color: #545454; background-color: rgba(255, 255, 255, 0.9); padding: 10px 8px; box-shadow: rgb(174, 174, 174) 0px 0px 10px; } .borrow{ height: 1000px; position: relative; top: -66px; }
D3Mixin.js
/** * 全屏 toggleFullScreen * 保存 downloadImpByChart */ export const D3Mixin = { data() { return { isFullscreen: true, } }, methods: { downloadImpByChart(chartName) { var _this = this; var html = document.getElementsByTagName("html")[0]; //获取可视区域宽 var Bwidth = html.clientWidth + 20; //转换屏幕宽高 var Bheight = html.clientHeight + 150; var Bmax = Bwidth > Bheight ? Bwidth : Bheight; var Bmin = Bwidth > Bheight ? Bheight : Bwidth; var canvas = document.createElement("canvas"); var g = document.getElementsByTagName("g")[0].getBBox(); var svgbox = d3.select(\'#mountNode svg\'); var gbox = document.getElementsByClassName("gbox")[0] || document.getElementsByClassName("container")[0]; var x = g.width / 2 - html.clientWidth / 2 + 20; //计算偏移位置 var y = 0; g.y < 0 ? (y = Math.abs(g.y)) : (y = 0); // gbox.style.transform = "translate(" + x + \'px\' + "," + (y-60) + "px" + ") scale(1)"; //偏移位置 gbox.style.transform = "translate(" + x + "px" + "," + y + "px" + ") scale(1)"; //偏移位置 svgbox.attr("width", g.width + 20); svgbox.attr("height", g.height + 150); var svg = document.getElementById("mountNode").innerHTML; var c = canvas.getContext("2d"); //新建Image对象 var img = new Image(); //svg内容 img.src = "data:image/svg+xml," + encodeURIComponent(svg); //svg内容中可以有中文字符 // img.src = "data:image/svg+xml," + svg; //svg内容中不能有中文字符 //图片初始化完成后调用 var cwidth = g.width; img.onload = function () { //将canvas的宽高设置为图像的宽高 canvas.width = cwidth + 20; canvas.height = g.height + 150; //canvcas画图片 c.fillStyle = "#fff"; c.fillRect(0, 0, canvas.width, canvas.height); c.drawImage(img, 0, 30); var a = document.createElement("a"); a.download = `${chartName}-${_this.companyName}.png`; a.href = canvas.toDataURL("image/png"); a.click(); }; //图片转换为base64后 传给后端 发邮件 gbox.style.transform = ""; svgbox.attr("width", Bmax); svgbox.attr("height", Bmin); }, checkFull() { var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled if (isFull === undefined) { isFull = false } return isFull }, FullScreen(el) { if (this.isFullscreen) { //退出全屏 if (document.exitFullscreen) { document.exitFullscreen() } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen() } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen() } else if (!document.msRequestFullscreen) { document.msExitFullscreen() } } else { //进入全屏 if (el.requestFullscreen) { el.requestFullscreen() } else if (el.mozRequestFullScreen) { el.mozRequestFullScreen() } else if (el.webkitRequestFullscreen) { //改变平面图在google浏览器上面的样式问题 el.webkitRequestFullscreen() } else if (el.msRequestFullscreen) { this.isFullscreen = true el.msRequestFullscreen() } } }, toggleFullScreen(e) { this.isFullscreen = !this.isFullscreen this.FullScreen(document.getElementById(\'borrow\')) } }, mounted() { window.addEventListener(\'resize\', () => { let that = this if (!that.checkFull()) { //要执行的动作 that.isFullscreen = true } }) } }