d3實現家族樹

来源:https://www.cnblogs.com/Little-Sky/archive/2019/03/14/10530624.html
-Advertisement-
Play Games

1、 jQuery和CSS3支持移動手機的DOM元素移動和縮放插件：panzoom 2、拖動：jqueryUI-Draggable、touchpunch 3、圖表：echart、heightChart、d3 <template> <div class="topdivall"> <div class= ...


  1、  jQuery和CSS3支持移動手機的DOM元素移動和縮放插件：panzoom   2、拖動：jqueryUI-Draggable、touchpunch   3、圖表：echart、heightChart、d3

 

 

<template>
<div class="topdivall">
<div class="all-tree">
<com-header :title="titleName"></com-header>
<section>
<div class="parent clearFix" style="overflow: auto;background-color: #fff;">
<div id="tree" class="tree"></div>
</div>
</section>
<div class="nodeColor">
<ul class="clearFix">
<li>私募管理人</li>
<li>股東</li>
<li>對外投資</li>
<li>私募備案產品</li>
</ul>
<p class="danger">可能有風險的企業為紅色</p>
</div>
</div>
<!--第一個彈窗start-->
<div class="content" v-show="AlertOne">
<div class="con_top clearFix">
<div class="fl">{{titleType==5?'相同股東':(titleType==4?'對外投資':'股東')}}(<span>{{listArr.length}}</span>)</div>
<div class="fr" @click="AlertOne=false">&times;</div>
</div>
<div v-if="titleType==5" style="margin-top:10px;">相同股東指的是：該公司的股東的對外投資中，還有哪些是私募管理人。</div>
<div class="con_center">
<div class="con_cen_bottom">
<div class="clearFix con_cen_title">
<div class="grid-col-7 text-left">{{titleType==5?'私募管理人':(titleType==4?'投資企業':'股東名稱')}}</div>
<div class="grid-col-3 text-center">風險信息</div>
<div class="grid-col-2 text-center">股比</div>
</div>
<div class="clearFix con_cen_text" v-for="item in listArr">
<div class="grid-col-7 text-left apostrophe">
<div class="orange" v-if="item.fundflag==1&&item.prodflag==0"></div>
<div class="blue" v-if="item.prodflag==1&&item.fundflag==0"></div>
<div class="double" v-if="item.prodflag==1&&item.fundflag==1">
<div class="dou_one"></div><div class="dou_two"></div>
</div>
<span :class="[item.clickflag==1?'color-blue':'']" @click="AlertDetail(item.id,item.clickflag,item.prodflag,item.fundflag,item.shareHolderId)">{{item.fullName}}</span>
</div>
<div class="grid-col-3 text-center">
<span>{{item.riskcount}}</span>條
</div>
<div class="grid-col-2 text-center">{{item.proportion && item.proportion=='0' ? '--' : item.proportion}}</div>
</div>
</div>
<div class="con_footer clearFix">
<div class="fl">
<div class="orange"></div>
管理人
</div>
<div class="fr">
<div class="blue"></div>
私募基金
</div>
</div>
</div>
</div>
<!--第一個彈窗end-->

<!--第二個彈窗start-->
<div class="content" v-show="AlertTwo">
<div class="con_top clearFix">
<div class="fl">公司信息</div>
<div class="fr" @click="AlertTwo=false">&times;</div>
</div>
<div class="con_center">
<div class="con_cen_top clearFix">
<div class="grid-col-10">
<router-link :to="{path:'/ManagersDetails',query:{corpid:corpinfo.corpid}}" v-if="corpinfo.corptype==1">
<div class="apostrophe com_title color-blue">
{{corpinfo.corpname}}
</div>
</router-link>
<router-link :to="{path:'/ProBaseInfo',query:{prodid:currentClickProdid}}" v-else-if="currentClickProdid">
<div class="apostrophe com_title color-blue">
{{corpinfo.corpname}}
</div>
</router-link>
<div class="apostrophe com_title color-gry" v-else>
{{corpinfo.corpname}}
</div>
<div class="com_detail">法定代表人：<span>{{corpinfo.legalpersonname}}</span></div>
<div class="com_detail">註冊資本：<span v-if="corpinfo.registercapital">{{toFix(corpinfo.registercapital)}}萬人民幣</span><span v-else>--</span></div>
<div class="com_detail">成立日期：<span>{{corpinfo.founddate|dateFormatYMD}}</span></div>
<div class="com_detail" v-if="corpinfo.corptype==1">認繳規模：<span>{{toFix(corpinfo.subscribedcapital)}}</span>萬</div>
<div class="com_detail" v-if="!!corpinfo.shareHolderName">相同股東名稱：<span>{{corpinfo.shareHolderName}}</span></div>
</div>
<div class="grid-col-2 text-center com_mark">{{jugeType(corpinfo.corptype)}}</div>
</div>
<div class="con_cen_center clearFix text-center">
<div v-for="(item,index) in tabArr" class="grid-col-3" :class="[tabValue==index?'select':'']" @click="tabValue=index">{{item}}</div>
</div>
<div v-show="tabValue==0">
<div class="con_cen_bottom">
<div class="clearFix con_cen_title">
<div class="grid-col-7 text-left">股東名稱</div>
<div class="grid-col-3 text-center">風險信息</div>
<div class="grid-col-2 text-center">股比</div>
</div>
<div class="clearFix con_cen_text" v-for="item in listArrHold">
<div class="grid-col-7 text-left apostrophe" :class="[item.clickflag==1?'color-blue':'']" @click="alertTwoClick(item)">
<div class="orange" v-if="item.fundflag==1&&item.prodflag==0"></div>
<div class="blue" v-if="item.prodflag==1&&item.fundflag==0"></div>
<div class="double" v-if="item.prodflag==1&&item.fundflag==1">
<div class="dou_one"></div><div class="dou_two"></div>
</div>
{{item.fullName}}
</div>
<div class="grid-col-3 text-center">
<span>{{item.riskcount}}</span>條
</div>
<div class="grid-col-2 text-center">{{item.proportion && item.proportion=='0' ? '--' : item.proportion}}</div>
</div>
</div>
<div class="con_footer clearFix">
<div class="fl">
<div class="orange"></div>
管理人
</div>
<div class="fr">
<div class="blue"></div>
私募基金
</div>
</div>
</div>
<div v-show="tabValue==1">
<div class="con_cen_bottom">
<div class="clearFix con_cen_title">
<div class="grid-col-7 text-left">投資企業</div>
<div class="grid-col-3 text-center">風險信息</div>
<div class="grid-col-2 text-center">股比</div>
</div>
<div class="clearFix con_cen_text" v-for="item in listArrInvest">
<div class="grid-col-7 text-left apostrophe" :class="[item.clickflag==1?'color-blue':'']" @click="alertTwoClick(item)">
<div class="orange" v-if="item.fundflag==1&&item.prodflag==0"></div>
<div class="blue" v-if="item.prodflag==1&&item.fundflag==0"></div>
<div class="double" v-if="item.prodflag==1&&item.fundflag==1">
<div class="dou_one"></div><div class="dou_two"></div>
</div>
{{item.fullName}}
</div>
<div class="grid-col-3 text-center">
<span>{{item.riskcount}}</span>條
</div>
<div class="grid-col-2 text-center">{{item.proportion && item.proportion=='0' ? '--' : item.proportion}}</div>
</div>
</div>
<div class="con_footer clearFix">
<div class="fl">
<div class="orange"></div>
管理人
</div>
<div class="fr">
<div class="blue"></div>
私募基金
</div>
</div>
</div>
<div v-show="tabValue==2">
<div class="con_cen_bottom">
<div class="clearFix con_cen_title">
<div class="grid-col-6 text-left">姓名</div>
<div class="grid-col-6 text-left">職務</div>
</div>
<div class="clearFix con_cen_text" v-for="item in listArrMem">
<div class="grid-col-6 apostrophe">{{item.staffname}}</div>
<div class="grid-col-6">{{item.position}}</div>
</div>
</div>
</div>
<div v-show="tabValue==3">
<div class="con_cen_punish">
<div class="punish_type" v-if="listArrPunish.court.list.length>0">
<div class="punish_title"> 法院判決：<span>{{listArrPunish.court.list.length}}</span>條</div>
<div class="punish_list" v-for="item in listArrPunish.court.list">
<div class="com_title">{{item.courtname}}</div>
<div class="com_detail">案件類型：<span>{{item.lawsuittype}}</span></div>
<div class="com_detail">發佈時間：<span>{{item.submittime|dateFormatYMD}}</span></div>
</div>
</div>
<div class="punish_type" v-if="listArrPunish.enforced.list.length>0">
<div class="punish_title"> 失信人被執行人：<span>{{listArrPunish.enforced.list.length}}</span>條</div>
<div class="punish_list" v-for="item in listArrPunish.enforced.list">
<div class="com_detail">{{item.casecode}}</div>
<div class="com_detail">發佈時間：<span>{{item.publishdate|dateFormatYMD}}</span></div>
<div class="com_detail">執行法院：<span>{{item.courtname}}</span></div>
<div class="com_detail">執行標的：<span>{{item.gistid}}</span></div>
</div>
</div>
<div class="punish_type" v-if="listArrPunish.admin.list.length>0">
<div class="punish_title"> 行政處罰：<span>{{listArrPunish.admin.list.length}}</span>條</div>
<div class="punish_list" v-for="item in listArrPunish.admin.list">
<div class="com_detail">處罰時間：<span>{{item.publishdate|dateFormatYMD}}</span></div>
<div class="com_detail">處罰類型：<span>{{item.remark}}</span></div>
<div class="com_detail">處罰來源：<span>{{item.sourceorgan}}</span></div>
<div class="com_detail"><a :href="item.url">處罰詳情：鏈接網址</a></div>
</div>
</div>
<div class="punish_type" v-if="listArrPunish.notice.list.length>0">
<div class="punish_title"> 法院公告：<span>{{listArrPunish.notice.list.length}}</span>條</div>
<div class="punish_list" v-for="item in listArrPunish.notice.list">
<div class="com_detail">原告：<span>{{item.party1}}</span></div>
<div class="com_detail">當事人：<span>{{item.party2}}</span></div>
<div class="com_detail">公告類型：<span>{{item.bltntypename}}</span></div>
<div class="com_detail">公告人：<span>{{item.courtname}}</span></div>
<div class="com_detail">刊登日期：<span>{{item.publishdate|dateFormatYMD}}</span></div>
</div>
</div>
<div class="punish_type" v-if="listArrPunish.fmcreditabnormal!=null">
<div class="punish_title"> 異常機構：</div>
<div class="punish_list">
<div class="com_title">{{listArrPunish.fmcreditabnormal.fullname}}</div>
<div class="com_detail">異常原因：</div>
<div class="com_detail">
{{listArrPunish.fmcreditabnormal.credittip}}
</div>
</div>
</div>
<div class="punish_type" v-if="listArrPunish.abnormal.list.length>0">
<div class="punish_title"> 工商異常：<span>{{listArrPunish.abnormal.list.length}}</span>條</div>
<div class="punish_list" v-for="item in listArrPunish.abnormal.list">
<div class="com_detail">異常原因：<span>{{item.addreason}}</span></div>
<div class="com_detail">發現機構：<span>{{item.addorgan}}</span></div>
<div class="com_detail">加入時間：<span>{{item.adddate|dateFormatYMD}}</span></div>
<div class="com_detail" v-if="item.removedate==null">移除時間：<span>- -</span></div>
<div class="com_detail" v-if="item.removedate!=null">移除時間：<span>{{item.removedate|dateFormatYMD}}</span></div>
</div>
</div>
<div class="punish_type" v-if="listArrPunish.court.list.length==0&&listArrPunish.enforced.list.length==0&&listArrPunish.admin.list.length==0&&listArrPunish.notice.list.length==0&&listArrPunish.fmcreditabnormal==null&&listArrPunish.abnormal.list.length==0">
<div class="punish_title setPadBot text-center"> 暫無風險信息</div>
</div>
</div>
</div>
</div>
</div>
<!--第二個彈窗end-->

<div class="alert-shadow" v-show="AlertOne||AlertTwo" @click="shadow()"></div>
</div>
</template>
<script>
import ComHeader from '../common/ComHeader.vue'
import $ from 'jquery'
import panzoom from '../../../static/js/jquery.panzoom.js'
import mousewheel from '../../../static/js/jquery.mousewheel.js'
let echarts = require('echarts/echarts')
require('echarts/chart/tree');
require('echarts/chart/treemap');
// require('../../../static/js/d3')
export default {
name: 'default',
components: {
ComHeader
},
data () {
return {
titleName: '',
AlertOne:false,//控制第一個彈出框的顯示和隱藏
titleType:'',//4為對外投資，3為股東
listArr:[],//第一個彈窗的數據
AlertTwo:false,//控制第二個彈出框的顯示和隱藏
corpinfo:{},//公司詳情數據
tabArr:['股東','投資','主要成員','風險信息'],//類別切換
tabValue:0,//切換的具體哪個類別:0股東，1投資，2主要成員，3風險信息
listArrHold:[],//股東數據數組
listArrInvest:[],//投資數據數組
listArrMem:[],//成員數組數據
isZQ: false, //是證券公司 不顯示 相同地址 和相同法人
listArrPunish:{//處罰的數據數組
admin:{//行政處罰數據
list:[]
},
court:{//法院判決數據
list:[]
},
notice:{//法院公告數據
list:[]
},
enforced:{//被執行人數據
list:[]
},
fmcreditabnormal:{//異常機構

},
abnormal:{//工商異常
list:[]
}
},
treeColor: { // 0 : 私募管理人 1 ： 股東 2： 對外投資 3： 私募備案產品
normal: {
color: '#FE8C58', // 圓點 節點 顏色 橙色
label: {
show: true,
position: 'bottom',
formatter: "{b}",
textStyle: {
color: '#4883b4',
fontSize: 12,
}
},
lineStyle: {
color: '#ccc',
type: 'curve', // 'curve'|'broken'|'solid'|'dotted'|'dashed'
}
},
emphasis: {
color: '#4883b4',
label: {
show: false
},
}
},
currentClickProdid:0
}
},
mounted: function () {
var _this = this;
if (this.$route.query.types) {
this.isZQ = true;
} else {
this.isZQ = false;
}
this.$nextTick(function () {

_this.ajaxHandle();

})
},
methods: {
toFix:function(val){//保留兩位小數
return Math.floor(val*100)/100;
},
shadow:function(){//點擊陰影部分的事件
var _this = this;
if(this.AlertOne){
this.listArr=[];
this.AlertOne=false;
}else if(this.AlertTwo){
_this.listArrPunish.admin.list=[];
_this.listArrPunish.court.list=[];
_this.listArrPunish.notice.list=[];
_this.listArrPunish.enforced.list=[];
_this.listArrPunish.abnormal.list=[];
_this.listArrPunish.fmcreditabnormal={};
_this.tabValue=0;
this.AlertTwo=false;
}
},
AlertDetail:function(id,flag,prodflag,fundflag,shareHolderId){//從第一個彈窗跳到第二個彈窗的事件
var _this = this;
if(flag==1){
_this.AlertOne=false;
_this.AlertTwo=true;
_this.listArrPunish.admin.list=[];
_this.listArrPunish.court.list=[];
_this.listArrPunish.notice.list=[];
_this.listArrPunish.enforced.list=[];
_this.listArrPunish.abnormal.list=[];
_this.listArrPunish.fmcreditabnormal={};
_this.tabValue=0;
_this.ajaxAlertTwo(id,prodflag,fundflag,shareHolderId);
}
},
jugeType:function(type){//判斷機構類型
var title='';
switch (type){
case 1:
title="管理人";
break;
case 2:
title="期貨";
break;
case 3:
title="券商";
break;
case 4:
title="基金子公司";
break;
case 5:
title="信托";
break;
case 6:
title="銀行";
break;
case 7:
title="基金公司";
break;
case 8:
title="上市公司";
break;
case 9:
title="新三板上市公司";
break;
case 10:
title="律師事務所";
break;
case 11:
title="會計事務所";
break;
case 12:
title="保險公司";
break;
default:
title="其他";
break;

}
return title;

},
ajaxAlertOne: function (id,type) {//獲取第一個彈出框的信息
var _this = this;
this.$http.post(this.BASEURL + 'manager/queryCorpListForFamilyTreeByType',JSON.stringify(
{
corpid:id,
type:type
}
)).then(function (response) {
if (response.body.status == 'success') {
_this.listArr=response.body.data;
_this.AlertOne=true;
}
}, function (response) {
});
},
alertTwoClick:function(item){
var _this=this;
if(item.clickflag==1){
_this.AlertTwo=false;
_this.ajaxAlertTwo(item.id,item.prodflag,item.fundflag,item.shareHolderId);
}
},
ajaxAlertTwo:function(id,prodflag,fundflag,shareHolderId){
var _this = this;
let param = {
corpid:id,
type:0,
fundflag:fundflag,
prodflag:prodflag
};
if(shareHolderId){
param.shareHolderId = shareHolderId;
}
//查看公司詳情和股東情況
this.$http.post(this.BASEURL + 'manager/showCompanyInfo',JSON.stringify(param)).then(function (response) {
if (response.body.status == 'success') {
_this.corpinfo=response.body.data.corpinfo;
_this.listArrHold=response.body.data.list;
if(response.body.data.prodflag){
_this.currentClickProdid = response.body.data.prodid;
}
if(shareHolderId) {
_this.corpinfo.shareHolderName = response.body.data.shareHolder.corpname;
}
_this.AlertTwo=true;
}
}, function (response) {

});

//查看公司對外投資
this.$http.post(this.BASEURL + 'manager/showCompanyInfo',JSON.stringify(
{
corpid:id,
type:1
}
)).then(function (response) {
if (response.body.status == 'success') {
_this.listArrInvest=response.body.data.list;
}
}, function (response) {

});

//查看公司主要成員
this.$http.post(this.BASEURL + 'manager/showCompanyInfo',JSON.stringify(
{
corpid:id,
type:2
}
)).then(function (response) {
if (response.body.status == 'success') {
_this.listArrMem=response.body.data.list;
}
}, function (response) {

});

//查看公司風險詳情列表
this.$http.post(this.BASEURL + 'manager/showCompanyInfo',JSON.stringify(
{
corpid:id,
type:3
}
)).then(function (response) {
if (response.body.status == 'success') {
_this.listArrPunish.admin.list=response.body.data.negatives;
_this.listArrPunish.court.list=response.body.data.corplawsuits;
_this.listArrPunish.notice.list=response.body.data.corpcourts;
_this.listArrPunish.enforced.list=response.body.data.corpdishonests;
_this.listArrPunish.fmcreditabnormal=response.body.data.fmcreditabnormal;
_this.listArrPunish.abnormal.list=response.body.data.abnormal;
}
}, function (response) {

});
},
returnType: function (obj) {
var index;
if (obj.fundflag) {
index = 0;
} else if (obj.prodflag) {
index = 3;
} else if (obj.investmentflag) {
index = 2;
} else if (obj.shareflag) {
index = 1;
}
obj.itemStyle = this.setColorForTree(index);
if (obj.riskcount) {
obj.itemStyle.normal.label.textStyle.color = 'red';
}
return obj;
},
setColorForTree: function (idx) {
var itemStyle;
/*
* 0 私募管理人
* 1 股東
* 2 對外投資
* 3 私募備案產品
* 其他 原點
* */
switch (idx) {
case 0:
itemStyle = {
normal: {
color: '#FE8C58', // 圓點 節點 顏色
label: {
show: true,
position: 'bottom',
formatter: '{b}',
textStyle: {
color: '#4883b4',
fontSize: 10,
}
},
lineStyle: {
color: '#ccc',
type: 'curve', // 'curve'|'broken'|'solid'|'dotted'|'dashed'
}
},
emphasis: {
color: '#4883b4',
label: {
show: false
},
}
};
break;
case 1:
itemStyle = {
normal: {
color: '#FBDE15', // 圓點 節點 顏色
label: {
show: true,
position: 'bottom',
formatter: "{b}",
textStyle: {
color: '#4883b4',
fontSize: 10,
}
},
lineStyle: {
color: '#ccc',
type: 'curve', // 'curve'|'broken'|'solid'|'dotted'|'dashed'
}
},
emphasis: {
color: '#4883b4',
label: {
show: false
},
}
};
break;
case 2:
itemStyle = {
normal: {
color: '#00A2E8', // 圓點 節點 顏色#E69E07
label: {
show: true,
position: 'bottom',
formatter: "{b}",
textStyle: {
color: '#4883b4',
fontSize: 10,
}
},
lineStyle: {
color: '#ccc',
type: 'curve', // 'curve'|'broken'|'solid'|'dotted'|'dashed'
}
},
emphasis: {
color: '#4883b4',
label: {
show: false
},
}
};
break;
case 3:
itemStyle = {
normal: {
color: '#11A259', // 圓點 節點 顏色
label: {
show: true,
position: 'bottom',
formatter: "{b}",
textStyle: {
color: '#4883b4',
fontSize: 10,
}
},
lineStyle: {
color: '#ccc',
type: 'curve', // 'curve'|'broken'|'solid'|'dotted'|'dashed'
}
},
emphasis: {
color: '#4883b4',
label: {
show: false
},
}
};
break;
default:
itemStyle = {
normal: {
color: '#333', // 圓點 節點 顏色
label: {
show: true,
position: 'inside',
formatter: '{b}',
textStyle: {
color: '#000',
fontSize: 10,
}
},
lineStyle: {
color: '#ccc',
type: 'curve', // 'curve'|'broken'|'solid'|'dotted'|'dashed'
width:'3'
}
},
emphasis: {
color: '#4883b4',
label: {
show: false
},
}
};
break;
}
return itemStyle;
},
ajaxHandle: function () {
var _this = this;
this.$http.post(this.BASEURL + 'manager/familysearch', JSON.stringify({
corpid: _this.$route.query.corpid
})).then(response => {
var res = response.body;
if (res.status === 'success') {
_this.titleName = res.data.corpinfo.corpname;
var data;
data = [
{
//'name':res.data.corpinfo.corpname, children: [
'name':res.data.corpinfo.corpname, children: [
// {
// name: '對外投資' + '(' + res.data.investMentsCount + ')',type: 4,id: res.data.corpinfo.corpid
// },
// {
// name: '股東' + '(' + res.data.shareHoldersCount + ')',type: 3,id: res.data.corpinfo.corpid
// },
]
}
];
// 設置原點的顏色
data[0].itemStyle = _this.setColorForTree(100);
if (res.data.investMentsCount>0) {
var im = {
name: '對外投資' + '(' + res.data.investMentsCount + ')',type: 4,id: res.data.corpinfo.corpid
};
im.clickflag = 1;
im.itemStyle = _this.setColorForTree(2);

res.data.investMents.forEach(function (val, index) {
val = _this.returnType(val);
val.type = 4;
});
im.children = res.data.investMents;
data[0].children.push(im);
}
if (res.data.shareHoldersCount>0) {
var sh = {
name: '股東' + '(' + res.data.shareHoldersCount + ')',type: 3,id: res.data.corpinfo.corpid
};
sh.clickflag = 1;
sh.itemStyle = _this.setColorForTree(1);


sh.children = _this.returnType(res.data.shareHolders);
res.data.shareHolders.forEach(function (val, index) {
val = _this.returnType(val);
val.type = 3;
});
sh.children = res.data.shareHolders;
data[0].children.push(sh);
}
var xtdz = {
name: '相同地址 ' + '(' + res.data.sameAddressCount + ')'
};
var xtfr = {
name: '相同法人' + '(' + res.data.sameLegalPersonCount + ')'
};
var xtgd = {
name: '相同股東' + '(' + res.data.sameShareHoldersCount + ')',type: 5,id: res.data.corpinfo.corpid
};

if (!_this.isZQ) { // 是證券公司 隱藏 相同地址 相同法人
if (res.data.sameLegalPersonCount > 0) { //相同法人
xtfr.children = res.data.sameLegalPerson;
}
if (res.data.sameAddressCount > 0) { // 相同地址
xtdz.children = res.data.sameAddress;
}
if (res.data.sameShareHoldersCount > 0) {
xtgd.children = res.data.sameShareHolders;
}
xtdz.itemStyle = _this.setColorForTree(0);
if(res.data.sameAddressCount>0){
data[0].children.push(xtdz);
}
xtfr.itemStyle = _this.setColorForTree(0);
if(res.data.sameLegalPersonCount>0){
data[0].children.push(xtfr);
}

xtgd.itemStyle = _this.setColorForTree(0);
if(res.data.sameShareHoldersCount>0){
xtgd.clickflag = 1;
data[0].children.push(xtgd);
}
// 相同股東，要也能點擊
// if (res.data.sameShareHoldersCount) {
// data[0].children[4].clickflag = 1;
// }
}

// if (res.data.investMentsCount > 0) { // 對外投資
// res.data.investMents.forEach(function (val, index) {
// val = _this.returnType(val);
// val.type = 4;
// });
// data[0].children[0].children = res.data.investMents;
// }
// if (res.data.shareHoldersCount > 0) { // 股東
// data[0].children[1].children = _this.returnType(res.data.shareHolders);
// res.data.shareHolders.forEach(function (val, index) {
// val = _this.returnType(val);
// val.type = 3;
// });
// data[0].children[1].children = res.data.shareHolders;
// }

_this.drawTree(data);
}
}, response => {

})
},
drawTree: function (data) {
var _this = this;
// 基於準備好的dom，初始化echarts實例
let myChart = echarts.init(document.getElementById('tree'));
myChart.setOption({
title: {
text: ''
},
toolbox: {
feature: {
dataZoom: {
show: true,
title: {
dataZoom: '區域縮放',
dataZoomReset: '區域縮放後退'
}
}
}
},
series: [
{
name: '樹圖',
type: 'tree',
orient: 'radial', // vertical horizontal
rootLocation: {x: 'center', y: 'center'}, // 根節點位置 {x: 100, y: 'center'}
nodePadding: 1,
layerPadding: 60,
symbol: 'circle',
hoverable: false,
roam: true,
symbolSize: 10,
itemStyle: {
normal: {
// color: '#333', // 圓點 節點 顏色 #FF8D59 橘黃色
label: {
show: true,
position: 'bottom',
//formatter: "{b}",
textStyle: {
color: '#4883b4',
fontSize: 10,
}
},
lineStyle: {
color: '#ccc',
type: 'curve', // 'curve'|'broken'|'solid'|'dotted'|'dashed'
length:'5'
}
},
emphasis: {
color: '#4883b4',
label: {
show: false
},
// borderWidth: 0,
}
},

data: data
}
]
});
window.onresize = myChart.resize();
//var ecConfig = require('echarts/config');
//myChart.on(ecConfig.EVENT.CLICK, _this.clickFun);
//console.info(myChart);
myChart.on('click', _this.clickFun);
myChart.refresh();
_this.scaleFun();
},
clickFun: function (e) {
var _this = this;
if(e.data.clickflag){
if(e.data.children){
_this.listArr=[];
_this.titleType=e.data.type;
_this.ajaxAlertOne(e.data.id,e.data.type);
}else{
_this.listArrPunish.admin.list=[];
_this.listArrPunish.court.list=[];
_this.listArrPunish.notice.list=[];
_this.listArrPunish.enforced.list=[];
_this.listArrPunish.abnormal.list=[];
_this.listArrPunish.fmcreditabnormal={};
_this.tabValue=0;
_this.ajaxAlertTwo(e.data.id,e.data.prodflag,e.data.fundflag,e.data.shareHolderId);
}
}
},
scaleFun: function(){
var $panzoom = $("#tree").panzoom();
$panzoom.parent().on('mousewheel.focal', function( e ) {
e.preventDefault();
var delta = e.delta || e.originalEvent.wheelDelta;
var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
$panzoom.panzoom('zoom', zoomOut, {
increment: 0.1,
animate: false,
focal: e
});
});
}
/*scaleFun: function () {
var slider = {
//判斷設備是否支持touch事件
touch:('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
slider:document.getElementById('tree'),
//事件
events:{
index:0, //顯示元素的索引
slider:this.slider, //this為slider對象
//icons:document.getElementById('icons'),
//icon:this.icons.getElementsByTagName('span'),
handleEvent:function(event){
var self = this; //this指events對象
console.info(event.type)
if(event.type == 'touchstart'){
self.start(event);
}else if(event.type == 'touchmove'){
self.move(event);
}else if(event.type == 'touchend'){
self.end(event);
}

},
//滑動開始
start:function(event){
var touch = event.targetTouches[0]; //touches數組對象獲得屏幕上所有的touch，取第一個touch
startPos = {x:touch.pageX,y:touch.pageY,time:+new Date}; //取第一個touch的坐標值
isScrolling = 0; //這個參數判斷是垂直滾動還是水平滾動
this.slider.addEventListener('touchmove',this,false);
this.slider.addEventListener('touchend',this,false);
},
//移動
move:function(event){
//當屏幕有多個touch或者頁面被縮放過，就不執行move操作
if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
var touch = event.targetTouches[0];
endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};
isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0; //isScrolling為1時，表示縱向滑動，0為橫向滑動
if(isScrolling === 0){
event.preventDefault(); //阻止觸摸事件的預設行為，即阻止滾屏
this.slider.className = 'cnt';
this.slider.style.left = -this.index*600 + endPos.x + 'px';
}
},
//滑動釋放
end:function(event){
var duration = +new Date - startPos.time; //滑動的持續時間
if(isScrolling === 0){ //當為水平滾動時
this.icon[this.index].className = '';
if(Number(duration) > 10){
//判斷是左移還是右移，當偏移量大於10時執行
if(endPos.x > 10){
if(this.index !== 0) this.index -= 1;
}else if(endPos.x < -10){
if(this.index !== this.icon.length-1) this.index += 1;
}
}
this.icon[this.index].className = 'curr';
this.slider.className = 'cnt f-anim';
this.slider.style.left = -this.index*600 + 'px';
}
//解綁事件
this.slider.removeEventListener('touchmove',this,false);
this.slider.removeEventListener('touchend',this,false);
}
},
//初始化
init:function(){
var self = this; //this指slider對象
if(!!self.touch) self.slider.addEventListener('touchstart',self.events,false); //addEventListener第二個參數可以傳一個對象，會調用該對象的handleEvent屬性
}
};
slider.init();
},*/

}
}
</script>

<style scoped src="../../css/family/managerfamily.css">

</style>


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 簡單的巨集替換
    簡單的巨集替換 1.巨集定義必須寫在第一次使用該巨集定義的代碼之前； 2.巨集定義不是以分號結束的 3.#define string1 string2 之間至少要有一個空格 4.string 1稱為巨集，string2 稱為巨集擴展 5. 巨集名用大寫的字母表示是一個習慣 6.使用巨集的好處： a 簡化程式的書寫 ...
  • 猜字母
    一個渣渣的再次分享： 標題：猜字母 把abcd...s共19個字母組成的序列重覆拼接106次，得到長度為2014的串。 接下來刪除第1個字母（即開頭的字母a），以及第3個，第5個等所有奇數位置的字母。 得到的新串再進行刪除奇數位置字母的動作。如此下去，最後只剩下一個字母，請寫出該字母。 答案是一個小 ...
  • 奇怪的分式
    一個小渣渣的隨筆開始：標題：奇怪的分式 上小學的時候，小明經常自己發明新演算法。一次，老師出的題目是： 1/4 乘以 8/5 小明居然把分子拼接在一起，分母拼接在一起，答案是：18/45 （參見圖1.png） 老師剛想批評他，轉念一想，這個答案湊巧也對啊，真是見鬼！ 對於分子、分母都是 1~9 中的一 ...
  • 10函數的進階
    動態函數 *args 是動態關鍵字參數,在形參位置*叫做聚合,*args會把位置參數沒有對應上的元素都'吃'掉,組成一個元組. #位置參數大於動態參數. **kwargs 動態關鍵字參數 # args 和 kwargs 是可以更換的，但是程式員約定都用它 # 用途：在不明確接收參數、數量時使用*ar ...
  • python爬蟲批量抓取ip代理
    使用爬蟲抓取數據時，經常要用到多個ip代理，防止單個ip訪問太過頻繁被封禁。ip代理可以從這個網站獲取：http://www.xicidaili.com/nn/。因此寫一個python程式來獲取ip代理，保存到本地。python版本：3.6.3 運行程式： 查看文件： 之後就可以直接使用了 ...
  • 【C#進階】擁抱Lambda（一）
    寫在開頭，好奇從這裡開始（當時讓加查詢條件，結果竟然是一句話來發揮神奇作用）： 1. 語法糖 Lambda 在我看來，=>總是一個無敵可愛的符號。嗯，包括C語言裡面的 -> 這個，它總像是在說“我指到這邊，你看..”。 找到了一張圖[1]，可以很好地說明lambda表達式，語法糖上的變化。 下麵有一 ...
  • 判斷某一點是否在幾何圖形內部
    公司項目，要實現用戶在矩形的紅外圖像上圈一塊區域，計算該區域內部的平均溫度、最大、最小溫度，圈的區域有可能是矩形、橢圓、或者任意由多條線段構成的多邊形，實現這個需求可以轉換為求一個點是否在該幾何圖形內部，下麵總結一下各種幾何圖形的判斷方法。 1.矩形 判斷點是否在矩形內，只要確定點的坐標在矩形四個頂 ...
  • 在混合開發框架模式中，簡化客戶端對Web API的頻繁調用
    在混合開發框架模式中，有時候我們在處理樹形節點的時候，需要很多關聯的處理，可能需要結合用戶配置信息，屬性字典，以及表的欄位分類等信息來展示一個結構樹，那麼在處理的時候就可能會頻繁的對這些介面API進行調用，而如果我們使用Web API一次性的獲取樹形節點信息，然後統一載入的話，性能會提升很多，本篇隨... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類