深度信息

hailu

2023-06-28 d9e6ad723191c3a31d97cfa38544e48b3e66af02

深度信息

 src/router/routers.js

@@ -819,7 +819,7 @@
    redirect: '/publicMessage_tool',
    meta: {
        notCache: true,
        access: ['no_admin',"publicMessage_tool", 'menuPublicInfo','attribute_report','publicSifa','publicJinyin','publicJinyinFengx'],
        access: ['no_admin',"publicMessage_tool", 'menuPublicInfo','attribute_report','publicSifa','publicJinyin','publicJinyinFengx','relationDeep'],
        icon: 'custom custom-waiBu',
        title: '深度信息'
    },
@@ -876,6 +876,19 @@
            import('@/view/diligenceTools/gongkaixinxi/publicJinyinFengx.vue')
        // import('@/view/diligenceTools/publicMessage.vue')
    },
    {
        path: '/relationDeep',
        name: 'relationDeep',
        meta: {
            access: ['no_admin', 'relationDeep'],
            notCache: true,
            icon: 'custom custom-gongkaixinxi2',
            title: '关系发现'
        },
        component: () =>
            import('@/view/diligenceTools/gongkaixinxi/relationDeep.vue')
        // import('@/view/diligenceTools/publicMessage.vue')
    },
    // {
    //   path: '/basicAttributes_tool',
    //   name: 'basicAttributes_tool',

 src/view/diligenceTools/gongkaixinxi/components/tab1.vue

New file
@@ -0,0 +1,553 @@
<template>
    <div style="position: relative;">
        <!--    <Spin v-show="loading" fix>-->
        <!--      <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>-->
        <!--      <div>Loading</div>-->
        <!--    </Spin>-->
        <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="newTitle clearfix" style="line-height: 40px;" id="kongZhi">
            实际控制人
            <Button style="float: right;" @click="toFcreenfull">全屏</Button>
        </div>
        <div class="itemTitle">
            {{ SuspectedActualControl.CompanyName }}
        </div>
        <div v-if="!isShow" style="text-align: center;margin: 20px 0;">
            <Icon custom="custom custom-kong" size="40" style="color: darkgray;"></Icon>
            <p style="margin-top: 8px;">暂无数据</p>
        </div>
        <div v-if="isShow">
            <div class="clearfix cntrol-top">
                <div style="position: relative;padding-left: 228px;float: left;">
                    <span style="text-align: right;width: 220px;position: absolute;top: 0;left: 0;color: #5c6b77;">疑似实际控制人为
                        (大数据分析) :</span>
                    <span style="text-align: left;width: 100%;">{{
                        SuspectedActualControl.ControllerData && SuspectedActualControl.ControllerData.Name ?
                        SuspectedActualControl.ControllerData.Name : '无实际控制人'
                    }}</span>
                </div>
                <div style="float: left;">
                    <span style="color: #5c6b77;">总股权比例为 :</span>
                    <span>{{
                        SuspectedActualControl.ControllerData && SuspectedActualControl.ControllerData.PercentTotal ?
                        SuspectedActualControl.ControllerData.PercentTotal : '无总股权比率'
                    }}</span>
                </div>
            </div>
            <div></div>
            <div class="control-chart">
                <div class="tuPu">
                    <p>实际控制人</p>
                    <p>{{
                        `受益股份${SuspectedActualControl.ControllerData ? SuspectedActualControl.ControllerData.PercentTotal :
                            ''}`
                    }}</p>
                </div>
                <div id="d3FullScreen" style="position: relative;background-color: #fff;overflow: hidden">
                    <span v-if="isFullscreen"
                        style="position: absolute;top: 0;right: 0;padding: 8px;font-size: 16px;z-index:9;">按ESC退出全屏</span>
                    <div ref="echartsDOM" class="echartsDOM" id="echartsDOM"
                        style="background-color:white;cursor: pointer;margin:0 auto;"></div>
                </div>
            </div>
        </div>
        <footer v-if="isShow">疑似实际控制人由维优信用基于公开信息利用大数据分析引擎独家生成</footer>
    </div>
</template>
  
<script>
import $ from 'jquery'
import * as echarts from 'echarts'
import axios from '@/libs/api.request'
import * as screenfull from 'screenfull'
import * as vis from 'vis-network'
import G6 from "@antv/g6";

export default {
    name: 'app',
    props: {

        name: {
            type: String,
            default: ''
        },
        tab: {
            type: String,
            default: 'tab2'
        }
    },
    components: {},
    data() {
        return {
            loading: true, // loading
            SuspectedActualControl: {}, // 实际控制人信息
            nodes: [],
            links: [],
            isFullscreen: false,// 是否全屏
            maxLevel: 0,//最大层级
            widthLevel: 0,//最大横向宽度
            isShow: true,//是否展示图形
        }
    },
    mounted() {
        if (this.name) {
            this.GetSuspectedActualControl()
        }
        window.addEventListener('fullscreenchange', (e) => {
            if (screenfull.isFullscreen) {
                this.initEcharts('fullscreen')
                this.isFullscreen = true
            } else {
                this.initEcharts()
                this.isFullscreen = false
            }
        })
    },
    updated() {
    },
    methods: {
        /**
         * 跳转至详情页面
         * d : 当前点击的公司信息
         */
        showPublicMessage(name) {
            if (name.indexOf('自动生成') == -1 && name.length > 4) {
                window.open(`#/publicMessage_tool?name=${name}`, '_blank')
            }
        },
        /**
         * 全屏事件
         */
        toFcreenfull() {
            if (screenfull.isEnabled) {
                screenfull.request(document.getElementById('d3FullScreen'))
            }
        },
        unScreenfull() {
            if (screenfull.isEnabled) {
                screenfull.exit()
                this.init()
            }
        },
        /**
         * 获取实际控制人
         */
        GetSuspectedActualControl() {
            let data = {
                name: this.name,
                ev: 0,
                iv: 0
            }
            this.loading = true
            axios.request({
                url: '/QiChaCha/GetSuspectedActualControl',
                data,
                method: 'post'
            }).then((res) => {
                if (res.data.Check) {
                    // res.data.Data.ControllerData.Paths[0].push({
                    //   KeyNo: "p0b1f20c4c28963ace6eff596cbb7215",
                    //   Level: "2",
                    //   Name: "74.8619%",
                    //   Percent: "74.8619%",
                    //   PercentTotal: "0.0291%",
                    // })
                    this.SuspectedActualControl = res.data.Data
                    if (this.SuspectedActualControl.ControllerData && this.SuspectedActualControl.ControllerData.Paths) {
                        this.isShow = true
                        let list = []
                        let nodes = []
                        let links = []
                        this.maxLevel = 0
                        for (let i = 0; i < this.SuspectedActualControl.ControllerData.Paths.length; i++) {
                            let level = 1
                            for (let k = this.SuspectedActualControl.ControllerData.Paths[i].length - 1; k >= 0; k--) {
                                let name = this.SuspectedActualControl.ControllerData.Paths[i][k].Name
                                let id = this.SuspectedActualControl.ControllerData.Paths[i][k].KeyNo
                                if (list.indexOf(name) == -1) {
                                    list.push(name)
                                    nodes.push({
                                        group: 'Event',
                                        id: id,
                                        label: name,
                                        level: level,
                                        color: {
                                            background: "white",
                                        }
                                    })
                                }
                                level++
                                this.maxLevel = this.maxLevel > level ? this.maxLevel : level
                                if (k >= 1) {
                                    links.push({
                                        from: id,
                                        label: this.SuspectedActualControl.ControllerData.Paths[i][k].Percent,
                                        to: this.SuspectedActualControl.ControllerData.Paths[i][k - 1].KeyNo
                                    })
                                } else {
                                    links.push({
                                        from: id,
                                        label: this.SuspectedActualControl.ControllerData.Paths[i][k].Percent,
                                        to: this.SuspectedActualControl.KeyNo,
                                    })
                                }
                            }
                        }
                        if (list.indexOf(this.SuspectedActualControl.CompanyName) == -1) {
                            nodes.push({
                                group: 'Event',
                                id: this.SuspectedActualControl.KeyNo,
                                label: this.SuspectedActualControl.CompanyName,
                                level: this.maxLevel + 1,
                                color: {
                                    background: "white",
                                }
                            })
                        }
                        this.nodes = nodes
                        this.links = links
                        console.log(this.nodes, this.links);
                        this.$nextTick(() => {
                            this.initEcharts()
                        })
                    } else {
                        this.isShow = false
                    }
                } else {
                    this.isShow = false
                }
                this.loading = false
            }, (err) => {
                this.isShow = false
                this.loading = false
            })
        },
        GetTycActualControl() {
            let data = {
                name: this.name,
            }
            this.loading = true
            axios.request({
                url: '/QiChaCha/GetTycActualControl',
                data,
                method: 'post'
            }).then((res) => {
                if (res.data.Check) {
                    // res.data.Data.ControllerData.Paths[0].push({
                    //   KeyNo: "p0b1f20c4c28963ace6eff596cbb7215",
                    //   Level: "2",
                    //   Name: "74.8619%",
                    //   Percent: "74.8619%",
                    //   PercentTotal: "0.0291%",
                    // })
                    this.SuspectedActualControl = res.data.Data
                    if (this.SuspectedActualControl.actualControllerList && this.SuspectedActualControl.pathMap) {
                        this.isShow = true
                        let list = []
                        let nodes = []
                        let links = []
                        this.maxLevel = 0
                        let num=0
                        let arr=[]
                        for (let item in this.SuspectedActualControl.pathMap) {
                            if(num<Number(item.split('p_')[1])){
                                num=Number(item.split('p_')[1])
                            }
                        }
                        for (let item in this.SuspectedActualControl.pathMap) {
                            if(num==Number(item.split('p_')[1])){
                                arr.push(this.SuspectedActualControl.pathMap[item])   
                            }
                        }
                        console.log(arr);
                        
                        for (let i = 0; i < arr.length; i++) {
                            let level = 1
                            for (let k = arr[i].relationships.length - 1; k >= 0; k--) {
                                console.log(arr[i].relationships[k]);
                                let name = arr[i].nodes[k].properties.name
                                let id = arr[i].nodes[k].id
                                if (list.indexOf(name) == -1) {
                                    list.push(name)
                                    nodes.push({
                                        group: 'Event',
                                        id: id,
                                        label: name,
                                        level: level,
                                        color: {
                                            background: "white",
                                        }
                                    })
                                }
                                level++
                                this.maxLevel = this.maxLevel > level ? this.maxLevel : level
                                if (k >= 1) {
                                  
                                    links.push({
                                        from: id,
                                        label: arr[i].relationships[k].properties.percentStr,
                                        to: arr[i].nodes[k - 1].id
                                    })
                                } else {
                                    links.push({
                                        from: id,
                                        label: arr[i].relationships[k].properties.percentStr,
                                        to: this.SuspectedActualControl.hId,
                                    })
                                }
                            }
                        }
                        if (list.indexOf(this.SuspectedActualControl.CompanyName) == -1) {
                            nodes.push({
                                group: 'Event',
                                id: this.SuspectedActualControl.hId,
                                label: this.SuspectedActualControl.CompanyName,
                                level: this.maxLevel + 1,
                                color: {
                                    background: "white",
                                }
                            })
                        }
                        this.nodes = nodes
                        this.links = links
                                              console.log(this.nodes, this.links);

                                              this.$nextTick(() => {
                            this.initEcharts()
                        })
                    }

                } else {

                }

            }, (err) => {

            })
        },
        /**
         * 初始化echarts
         * @param type fullscreen : 全屏
         */
        initEcharts(type) {
            if (type == 'fullscreen') {
                $('#echartsDOM').css('height', window.screen.height)
            } else {
                $('#echartsDOM').css('height', this.maxLevel > 5 ? `${this.maxLevel * 120}px` : '500px')
            }

            let container = document.getElementById('echartsDOM')
            let data = {
                nodes: this.nodes,
                edges: this.links,
            }
            let maxWidthLevel = 0
            for (let i = 1; i < this.maxLevel; i++) {
                let maxWidthLevel_current = 0
                for (let k = 0, item; item = this.nodes[k]; k++) {
                    if (item.level == i) {
                        maxWidthLevel_current++
                    }
                }
                maxWidthLevel = maxWidthLevel < maxWidthLevel_current ? maxWidthLevel_current : maxWidthLevel
            }
            // if (this.SuspectedActualControl.ControllerData.Paths.length >= 6) {
            if (this.links.length >= 6) {
                $('#echartsDOM').css({ 'width': `${maxWidthLevel * 220}px` })
            } else {
                $('#echartsDOM').css('width', '100%')
            }
            let option = {
                autoResize: true,
                nodes: {//节点
                    borderWidth: 1,
                    borderWidthSelected: 2,
                    size: 14,
                    shape: 'box',
                    margin: 10,
                    color: '#2d8bef',

                    font: {
                        color: '#343434',
                        size: 14, // px
                        background: '#ffffff',
                        strokeWidth: 0, // px
                        strokeColor: '#ffffff',
                        align: 'center',
                    }
                },
                edges: {//连线
                    font: {
                        size: 14,
                        background: 'white',
                    },
                    arrows: {
                        to: { enabled: true, scaleFactor: 1 }
                    },
                    smooth: { enabled: false },
                },
                layout: {//布局
                    randomSeed: undefined,
                    improvedLayout: true,
                    clusterThreshold: 150,
                    hierarchical: {
                        enabled: true,
                        levelSeparation: 100,
                        nodeSpacing: 300,
                        treeSpacing: 200,
                        blockShifting: true,
                        edgeMinimization: true,
                        parentCentralization: true,
                        direction: 'UD',        // UD, DU, LR, RL
                        sortMethod: 'hubsize',  // hubsize, directed
                        shakeTowards: 'leaves',  // roots, leaves
                    }
                },
                physics: {
                    enabled: false,
                }
            }
            let network = new vis.Network(container, data, option)
            network.on('click', (properties) => {
                if (properties.nodes.length == 1) {
                    let keyNo = properties.nodes[0]
                    for (let i = 0, item; item = this.nodes[i]; i++) {
                        if (item.id == keyNo) {
                            this.showPublicMessage(item.label)
                            break
                        }
                    }
                }
            })
            // if (this.SuspectedActualControl.ControllerData.Paths.length >= 6) {
                if (this.links.length >= 6) {
                $('#echartsDOM .vis-network').css('left', '0%')
            } else {
                $('#echartsDOM .vis-network').css('left', '0%')
            }
        }
    },
    watch: {
        name: {
            handler(newValue, oldValue) {
                // this.GetSuspectedActualControl()
                this.GetTycActualControl()
            }
        },
        tab: {
            handler(newValue, oldValue) {
                if (this.tab == 'tab1') {
                    // this.GetSuspectedActualControl()
                    this.GetTycActualControl()
                }
            }
        }
    },
    computed: {}
}
</script>
  
<style scoped lang="less">
#echartsDOM {
    min-width: 600px;
    min-height: 600px;
}

.echartsDOM {
    /*width: ~"calc(100% - 230px)";*/
    width: 900px;
    height: 700px;
    margin: 0 auto;
}

.echartsDOM>div {
    margin: 0 auto !important;
}

.cntrol-top {
    padding: 20px 10px;
}

.cntrol-top div {
    width: 50%;
    //text-align: right;
    padding: 0 30px;
    display: inline-block;
}

.cntrol-top div:last-child {
    text-align: left;
}

.cntrol-top div span {
    color: #2d8bef;
    padding: 0 5px;
}

footer {
    text-align: center;
    padding: 10px 0;
    margin-top: 20px;
    font-size: 12px;
    color: #5c6b77;
}

.control-chart {
    text-align: center;
}

.control-chart div.box {
    margin: 0 auto;
    background-color: #f3f3f3;
    width: 328px;
    height: 40px;
    line-height: 40px;
    box-shadow: 1px 2px rgba(100, 100, 100, .2);
}

.control-chart div.line {
    width: 3px;
    height: 90px;
    margin: 0 auto;
    background-color: #dbdbdb;
}

.percent-box {
    position: absolute;
    left: 50%;
    bottom: 45px;
    margin-left: -30px;
    width: 60px;
    background-color: white;
    height: 18px;
    line-height: 18px;
}

.icon {
    position: absolute;
    bottom: -20px;
    left: 50%;
    color: #dbdbdb;
    margin-left: -18px;
    width: 36px;
    font-size: 36px;
    text-align: center;
}

.tuPu {
    width: 328px;
    height: 67px;
    padding-top: 5px;
    margin: 10px auto;
    margin-bottom: 0;
    background-image: url('../../../../assets/images/tuPu.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: white;
    text-align: center;
}
</style>
  

 src/view/diligenceTools/gongkaixinxi/components/tab2.vue

New file
@@ -0,0 +1,860 @@
<template>
    <div class="penetrate-chart clearfix" style="position: relative;">
        <!--    <Spin v-show="loading" fix>-->
        <!--      <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>-->
        <!--      <div>Loading</div>-->
        <!--    </Spin>-->
        <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="newTitle clearfix" style="line-height: 40px;" id="jieGou">
            股权穿透图
            <Button style="float: right;" @click="toFcreenfull">全屏</Button>
        </div>
        <div class="itemTitle">
            {{ this.name }}
        </div>
        <div id="screenfullDOM" style="background-color:white;position: relative;">
            <Spin v-show="loading && isFullscreen" fix>
                <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                <div>Loading</div>
            </Spin>
            <span v-if="isFullscreen"
                style="position: absolute;top: 0;right: 0;padding: 8px;font-size: 16px;">按ESC退出全屏</span>
            <div id="textBox_2"></div>
            <div id="rightSide">
                <div>
                    <span style="display: inline-block;width: 110px;">只查看持股股东</span>
                    <span style="margin-right: 10px;">>=</span>
                    <Input v-model="ev" :class="ev.match(/^100$|^(\d|[1-9]\d)(\.\d+)*$/) ? '' : 'ErrorTip'"
                        style="width: 90px;"></Input> %
                </div>
                <div style="margin-top: 10px;">
                    <span style="display: inline-block;width: 110px;">只查看对外投资</span>
                    <span style="margin-right: 10px;">>=</span>
                    <Input v-model="iv" :class="iv.match(/^100$|^(\d|[1-9]\d)(\.\d+)*$/) ? '' : 'ErrorTip'"
                        style="width: 90px;"></Input> %
                </div>
                <div class="clearfix" style="width: 183px;margin: 10px auto 0;">
                    <Button style="width: 80px;float: left;" type="primary" @click="getEquityThroughAndInvest">查询
                    </Button>
                    <Button style="width: 80px;float: right;" type="default" @click="reset">重置
                    </Button>
                </div>
            </div>
        </div>
    </div>
</template>
<!--股权穿透图-->
<script>
import $ from 'jquery'
import axios from '@/libs/api.request'
import * as screenfull from 'screenfull'
// 过渡时间
const DURATION = 0
// 加减符号半径
const SYMBOLA_S_R = 9
// 公司
const COMPANY = 0
// 人
const PERSON = 1
export default {
    props: {
        name: {
            type: String,
            default: ''
        },
        tab: {
            type: String,
            default: 'tab1'
        }
    },
    components: {},
    data() {
        return {
            loading: true,
            layoutTree: '',
            diamonds: '',
            i: 0,
            hasChildNodeArr: [],
            originDiamonds: '',
            diagonalUp: '',
            diagonalDown: '',
            tree: {
                'Name': '',
                'Children': [],
                'Parents': []
            },
            rootUp: '',
            rootDown: '',
            svg: '',
            ev: '0',
            iv: '0',
            ratio: 1, // 浏览器缩放比例
            isFullscreen: false// 是否全屏
        }
    },

    mounted() {
        if (this.name) {
            this.getEquityThroughAndInvest()
        }
        this.ratio = this.CustomMethods.getRatio()
        if (this.ratio < 125) {
            this.ratio = 125
        }
        window.addEventListener('fullscreenchange', (e) => {
            if (screenfull.isFullscreen) {
                this.init(window.screen.width * this.ratio / 100, window.screen.height * this.ratio / 100)
                $('#textBox_2').css('height', (window.screen.height - 20) * this.ratio / 100)
                $('#rightSide').css('height', (window.screen.height - 20) * this.ratio / 100)
                $('#rightSide').css('paddingTop', (window.screen.height - 120) * this.ratio / 100 * 0.5)
                this.isFullscreen = true
            } else {
                this.init()
                $('#textBox_2').css('height', 500)
                $('#rightSide').css('height', 500)
                $('#rightSide').css('paddingTop', 10)
                this.isFullscreen = false
            }
        })
    },

    methods: {
        /**
         * 跳转至详情页面
         * d : 当前点击的公司信息
         */
        showPublicMessage(d) {
            if (d.data.Name.indexOf('自动生成') == -1 && d.data.Name.length > 4) {
                window.open(`#/publicMessage_tool?name=${d.data.Name}`, '_blank')
            }
        },
        /**
         * 全屏事件
         */
        toFcreenfull() {
            if (screenfull.isEnabled) {
                screenfull.request(document.getElementById('screenfullDOM'))
            }
        },
        unScreenfull() {
            if (screenfull.isEnabled) {
                screenfull.exit()
                this.init()
            }
        },
        init(w, h) {
            let svgW = w || document.body.clientWidth
            let svgH = h || 500
            // 方块形状
            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, this.diamonds.intervalH]).separation(() => 1)
            // 主图
            if (document.getElementById('textBox_2')) {
                document.getElementById('textBox_2').innerHTML = ''
            }
            this.svg = this.d3.select('#textBox_2').append('svg').attr('width', svgW).attr('height', svgH).attr('id', 'treesvg_2')
                .call(this.d3.zoom().scaleExtent([0, 5]).on('zoom', () => {
                    // 设置缩放位置以及平移初始位置
                    this.svg.attr('transform', this.d3.event.transform.translate(svgW / 2, svgH / 2))
                }))
                .attr('style', 'position: relative;z-index: 2;')
                .append('g').attr('id', 'g').attr('transform', 'translate(' + (svgW / 2) + ',' + (svgH / 2) + ')')
            let upTree = null
            let downTree = null
            // 拷贝树的数据
            Object.keys(this.tree).map(item => {
                if (item === 'Parents') {
                    upTree = JSON.parse(JSON.stringify(this.tree))
                    upTree.Children = this.tree[item]
                    upTree.Parents = null
                } else if (item === 'Children') {
                    downTree = JSON.parse(JSON.stringify(this.tree))
                    downTree.Children = this.tree[item]
                    downTree.Parents = null
                }
            })
            // hierarchy 返回新的结构 x0,y0初始化起点坐标
            this.rootUp = this.d3.hierarchy(upTree, d => d.Children)
            this.rootUp.x0 = 0
            this.rootUp.y0 = 0

            this.rootDown = this.d3.hierarchy(downTree, d => d.Children)
            this.rootDown.x0 = 0
            this.rootDown.y0 = 0
            // 上 和 下 结构
            let treeArr = [
                {
                    data: this.rootUp,
                    Category: 'up'
                },
                {
                    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
            if (showtype === 'up') {
                nodes = this.layoutTree(this.rootUp).descendants()
            } else {
                nodes = this.layoutTree(this.rootDown).descendants()
            }
            let links = nodes.slice(1)
            nodes.forEach(d => {
                d.y = d.depth * this.diamonds.intervalH
            })

            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', d => {
                    let str = showtype === 'up' ? 'translate(' + d.x + ',' + -(d.y) + ')' : 'translate(' + d.x + ',' + d.y + ')'
                    return str
                })

            // 创建矩形
            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 ? showtype === 'up' ? -45 : 45 : 0)
                .attr('cx', 0)
                .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 ? (showtype === 'up' ? -40 : 40) : 40)
                .attr('y', showtype === 'up' ? 60 : -50)
                .attr('text-anchor', 'middle')
                .attr('fill', d => d.data.Category === COMPANY ? '#333333' : '#333333')
                .text((d) => {
                    let str = ''
                    if (d.data.FundedRatio) {
                        str = `持股 ${d.data.FundedRatio}`
                    } else if (d.data.Percent) {
                        str = `持股 ${d.data.Percent}`
                    }
                    return str
                })

            // 公司名称
            // y轴 否表源头的字体距离
            // 名称过长 第一段
            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 3
                        } else {
                            return -7
                        }
                    } else {
                        if (showtype === 'up') {
                            return -35
                        } else {
                            if (d.data.Name.length <= 20) {
                                return -11
                            } else if (d.data.Name.length <= 40) {
                                return -21
                            } else {
                                return -31
                            }
                        }
                    }
                })
                .attr('dy', d => d.depth ? '1.5em' : '.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 3
                        } else {
                            return -7
                        }
                    } else {
                        if (showtype === 'up') {
                            return -35
                        } else {
                            if (d.data.Name.length <= 20) {
                                return -11
                            } else if (d.data.Name.length <= 40) {
                                return -21
                            } else {
                                return -31
                            }
                        }
                    }
                })
                .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 3
                        } else {
                            return -7
                        }
                    } else {
                        if (showtype === 'up') {
                            return -35
                        } else {
                            if (d.data.Name.length <= 20) {
                                return -11
                            } else if (d.data.Name.length <= 40) {
                                return -21
                            } else {
                                return -31
                            }
                        }
                    }
                })
                .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', showtype === 'up' ? 0 : 45)
                .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.DetailInfoList && d.data.DetailInfoList.length == 1){
                    //   if (d.data.DetailInfoList[0].StockType) {
                    //     str += `持股类型: ${d.data.DetailInfoList[0].StockType}`
                    //   }
                    //   if (d.data.DetailInfoList[0].ShouldCapi) {
                    //     str += `认缴金额: ${this.CustomMethods.numTo$_NaN(d.data.DetailInfoList[0].ShouldCapi)} 万元`
                    //   }
                    // }
                    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', -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 = ''
            //     if (d.data.StockType) {
            //       str += `持股类型: ${d.data.StockType}`
            //     }
            //     if (d.data.Name == this.name) {
            //       str = ''
            //     }
            //     return str
            //   })

            // nodeEnter.append('text')
            //   .attr('class', 'num-style-name')
            //   .attr('x', 45)
            //   .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.ShouldCapi) {
            //       str += `认缴金额: ${this.CustomMethods.numTo$_NaN(d.data.ShouldCapi)} 万元`
            //     }
            //     if (d.data.Name == this.name) {
            //       str = ''
            //     }
            //     return str
            //   })
            // title
            nodeEnter.append('title')
                .text(d => {
                    let str = ''
                    if (d.data.DetailInfoList && d.data.DetailInfoList.length > 0) {
                        let list = d.data.DetailInfoList[0].Path.split('->')
                        str = list.join('-->\n')
                    }
                    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 + 'resolved1')
                .attr('markerUnits', 'strokeWidth')
                .attr('markerUnits', 'userSpaceOnUse')
                .attr('viewBox', '0 -5 10 10')
                .attr('markerWidth', 12)
                .attr('markerHeight', 12)
                .attr('orient', '90')
                .attr('refX', () => {
                    return showtype === 'up' ? '-45' : '50'
                })
                .attr('stroke-width', 2)
                .append('path')
                .attr('d', 'M0,-5L10,0L0,5')
                .attr('fill', '#dbdbdb')

            // 将节点转换到它们的新位置。
            let nodeUpdate = node.transition()
                .duration(DURATION)
                .attr('transform', d => showtype === 'up' ? 'translate(' + d.x + ',' + -(d.y) + ')' : 'translate(' + d.x + ',' + (d.y) + ')')

            // 代表是否展开的+-号,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', 0)
                .attr('dy', d => d.depth ? (showtype === 'up' ? -41 : 49) : 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}resolved1)`)// 根据箭头标记的id号标记箭头
                .attr('stroke', d => d.data.Category === COMPANY ? '#dbdbdb' : '#dbdbdb')
                .style('fill-opacity', 1)
                .attr('d', () => {
                    let o = { x: source.x0, y: source.y0 }
                    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
            if (showtype === 'up') {
                path = `M ${s.x} ${-s.y}
          L ${s.x} ${parseFloat(-s.y + 80)}
          L ${d.x} ${parseFloat(-s.y + 80)}
          L ${d.x} ${parseFloat(-d.y - 30)}`
            } else {
                path = `M ${s.x} ${s.y}
          L ${s.x} ${s.y - 80}
          L ${d.x} ${s.y - 80}
          L ${d.x} ${d.y + 30}`
            }
            return path
        },

        saveImg() {
            alert('保存')
        },

        resetSvg() {
            this.d3.select('#treesvg_2').remove()
            this.init()
        },
        reset() {
            this.ev = '0'
            this.iv = '0'
            this.getEquityThroughAndInvest()
        },
        /**
         * 获取股权穿透信息
         */
        getEquityThroughAndInvest() {
            if ($('#rightSide .ErrorTip').length > 0) {
                this.$Message.error('请修改标红部分!')
                return false
            }
            let data = {
                name: this.name,
                ev: this.ev,
                iv: this.iv,
                ispro: false
            }
            this.loading = true
            axios.request({
                url: '/QiChaCha/GetEquityThroughAndInvestV2',
                data,
                method: 'post'
            }).then((res) => {
                if (res.data.Check) {
                    let list = []
                    this.tree.Name = res.data.Data.Name
                    this.tree.Parents = res.data.Data.Children
                    this.tree.Children = res.data.Data.PathTree[0] ? res.data.Data.PathTree[0].Children : []
                    if (this.isFullscreen) {
                        this.init(window.screen.width * this.ratio / 100, window.screen.height * this.ratio / 100)
                        $('#textBox_2').css('height', (window.screen.height - 20) * this.ratio / 100)
                        $('#rightSide').css('height', (window.screen.height - 20) * this.ratio / 100)
                        $('#rightSide').css('paddingTop', (window.screen.height - 120) * this.ratio / 100 * 0.5)
                    } else {
                        this.init()
                        $('#textBox_2').css('height', 500)
                        $('#rightSide').css('height', 500)
                        $('#rightSide').css('paddingTop', 10)
                    }
                } else {

                }
                this.loading = false
            }, (err) => {
                this.loading = false
            })
        }
    },
    watch: {
        name: {
            handler(newValue) {
                this.getEquityThroughAndInvest()
            }
        },
        tab: {
            handler(newValue) {
                if (this.tab == 'tab2') {
                    this.getEquityThroughAndInvest()
                }
            }
        }
    }
}
</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_2 {
    width: ~"calc(100% - 300px)";
    height: 500px;
    cursor: pointer;
    border: 1px solid darkgray;
    float: left;
    margin-top: 10px;
}

#rightSide {
    width: 290px;
    height: 500px;
    padding: 10px;
    border: 1px solid darkgray;
    float: right;
    margin-top: 10px;
}

#treesvg_2 {
    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;
    }
}</style>

 src/view/diligenceTools/gongkaixinxi/gongshang.vue

@@ -211,7 +211,7 @@
                                <td style="width: 25%;font-weight: normal;text-align: left;background-color: #fff;">
                                    {{
                                        this.getType(baseInfo.Type)
                                        

                                    }}
                                </td>
                                <td style="width: 10%;font-weight: normal;text-align: center;background-color: #f8f8f9;">
@@ -403,7 +403,21 @@
                        </tbody>
                    </table>
                </TabPane>
                <TabPane label="企业股东" name="tab2" :index="2"></TabPane>
                <TabPane label="企业股东" name="tab2" :index="2">
                    <Table :data="PartnerCase" :columns="PartnerCaseColumns" transfer border>
                        <template slot="Name" slot-scope="params" style="display: flex;">
                            <img v-if="params.row.logo" :src="params.row.logo" style="height: 60px;" />
                            <span style="display:inline-block;">{{
                                params.row.Name ?
                                params.row.Name : '--'
                            }}</span>
                        </template>
                    </Table>
                    <div style="margin-top: 12px">
                        <Page :current="pageIndex" :total="TotalItems" :page-size="pageSize" style="text-align: right"
                            @on-change="changePageIndex" ref="pagesChange1" show-elevator />
                    </div>
                </TabPane>
            </Tabs>
        </Card>
    </div>
@@ -438,7 +452,8 @@
            pageSize: 10,
            loadingTable: false,
            baseInfo: {},

            holderList: {},
            PartnerCase: []
        }
    },
    mounted() {
@@ -543,16 +558,13 @@
            if (this.tab == 'tab1') {
                this.GetTycTaxCredit()
            } else if (this.tab == 'tab2') {
                // this.GetTycPurchaseLand()
                this.GetHolderList()
            }
        },
        changePageIndex(e) {
            this.pageIndex = e
            if (this.tab == 'tab1') {
                this.GetTycTaxCredit()
            } else if (this.tab == 'tab2') {
                // this.GetTycPurchaseLand()
            }
            this.GetHolderList()

        },
        //  获取历史记录
        getSearchInfoList() {
@@ -628,6 +640,89 @@
                this.baseInfo = {}
            })
        },
        // 获取企业股东
        GetHolderList() {
            this.PartnerCase = []
            let data = {
                name: this.searchName,
                pageIndex: this.pageIndex,
                pageSize: this.pageSize
            }
            axios.request({
                url: '/QiChaCha/GetHolderList',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.Check) {
                    this.holderList = res.data.Data
                    this.TotalItems = res.data.Data.TotalItems




                    if (this.holderList.Items) {
                        for (let i = 0; i < this.holderList.Items.length; i++) {
                            if (this.holderList.Items[i].CapitalActl.length > 0) {
                                let obj = {}
                                if (this.holderList.Items[i].Capital.length > 0) {
                                    console.log(this.holderList.Items[i].Capital);
                                    obj = {
                                        Name: this.holderList.Items[i].Name,
                                        ItemIndex: this.holderList.Items[i].ItemIndex,
                                        logo: this.holderList.Items[i].Logo,
                                        type: this.holderList.Items[i].Type,
                                        CapitalPaymet: this.holderList.Items[i].Capital[0].Paymet, 
                                        CapitalAmomon: this.holderList.Items[i].Capital[0].Amomon,
                                        CapitalTime: this.holderList.Items[i].Capital[0].Time,
                                        CapitalPercent:this.holderList.Items[i].Capital[0].Percent,
                                        CapitalActlPaymet: '', CapitalActlAmomon: '', CapitalActlTime: '',CapitalActlPercent:''
                                    }
                                } else {
                                    obj = {
                                        Name: this.holderList.Items[i].Name,
                                        ItemIndex: this.holderList.Items[i].ItemIndex,
                                        logo: this.holderList.Items[i].Logo,
                                        type: this.holderList.Items[i].Type,
                                        CapitalPaymet: '', CapitalAmomon: '', CapitalTime: '', CapitalPercent: '',
                                        CapitalActlPaymet: '', CapitalActlAmomon: '', CapitalActlTime: '',CapitalActlPercent:''
                                    }
                                }
                                let data = this.holderList.Items[i].CapitalActl
                                for (let k = 0; k < data.length; k++) {

                                    obj.CapitalActlPaymet += `${data[k].Paymet};`
                                    obj.CapitalActlAmomon += `${data[k].Amomon};`
                                    obj.CapitalActlTime += `${data[k].Time};`
                                    obj.CapitalActlPercent += `${data[k].Percent};`
                                    // CapitalActlPaymet:data[k].Paymet,CapitalActlAmomon:data[k].Amomon,CapitalActlTime:data[k].Time,Percent:data[k].Percent,
                                }
                                this.PartnerCase.push(obj)
                            } else {
                                console.log(this.holderList.Items[i]);
                                this.PartnerCase.push({
                                    Name: this.holderList.Items[i].Name,
                                    ItemIndex: this.holderList.Items[i].ItemIndex,
                                    logo: this.holderList.Items[i].Logo,
                                    type: this.holderList.Items[i].Type,
                                    CapitalPaymet: this.holderList.Items[i].Capital.length > 0 ? (this.holderList.Items[i].Capital[0].Paymet ? this.holderList.Items[i].Capital[0].Paymet : '') : '', CapitalAmomon: this.holderList.Items[i].Capital.length > 0 ? (this.holderList.Items[i].Capital[0].Amomon ? this.holderList.Items[i].Capital[0].Amomon : '') : '', CapitalTime: this.holderList.Items[i].Capital.length > 0 ? (this.holderList.Items[i].Capital[0].Time ? this.holderList.Items[i].Capital[0].Time : '') : '', CapitalPercent: this.holderList.Items[i].Capital.length > 0 ? (this.holderList.Items[i].Capital[0].Percent ? this.holderList.Items[i].Capital[0].Percent : '') : '',
                                    // CapitalPaymet: this.holderList.Items[i].Capital[0].Paymet, CapitalAmomon:this.holderList.Items[i].Capital[0].Amomon , CapitalTime:this.holderList.Items[i].Capital[0].Time , Percent:this.holderList.Items[i].Capital[0].Percent,
                                    CapitalActlPaymet: '', CapitalActlAmomon: '', CapitalActlTime: '',CapitalActlPercent:''
                                })
                            }
                        }
                        console.log(this.PartnerCase);
                    }
                } else {
                    this.holderList = {}
                    this.TotalItems = 0
                }


            }, res => {
                this.holderList = {}
                this.TotalItems = 0
            })
        },



@@ -645,12 +740,12 @@
                return now;
            }
        },
        getType(item){
            if(item==1){
        getType(item) {
            if (item == 1) {
                return '人'
            }else if(item==2){
            } else if (item == 2) {
                return '公司'
            }else {
            } else {
                return '其它'
            }

@@ -670,69 +765,7 @@

    },
    computed: {
        SWPJColumns() { // 税务评级
            let columns = []
            columns.push({
                title: '序号',
                width: 80,
                align: 'center',
                render: (h, params) => {
                    return h(
                        'span',
                        params.row.ItemIndex
                    )
                },
                fixed: 'left'
            })
            columns.push({
                title: '评价年度',
                key: 'year',
                render: (h, params) => {
                    return h('span', params.row.year ? params.row.year : '--')
                },
                align: 'center',
                // minWidth: 200
            })
            columns.push({
                title: '纳税人信用级别',
                key: 'grade',
                render: (h, params) => {
                    return h('span', params.row.grade ? params.row.grade : '--')
                },
                align: 'center',
                // minWidth: 200
            })
            columns.push({
                title: '类型',
                key: 'type ',
                render: (h, params) => {
                    return h('span', params.row.type ? params.row.type : '--')
                },
                align: 'center',
                // width: 120
            })
            columns.push({
                title: '纳税人识别号',
                key: 'idNumber',
                render: (h, params) => {
                    return h('span', params.row.idNumber ? params.row.idNumber : '--')
                },
                // width: 120,
                align: 'center',
            })

            columns.push({
                title: '评价单位',
                key: 'evalDepartment',
                render: (h, params) => {
                    return h('span', params.row.evalDepartment ? params.row.evalDepartment : '--')
                },
                minWidth: 120
            })

            return columns
        },
        GDXXColumns() { // 购地信息
        PartnerCaseColumns() { // 股东出资信息
            let columns = []
            columns.push({
                title: '序号',
@@ -745,622 +778,205 @@
                    )
                }
            })

            columns.push({
                title: '土地坐落',
                key: 'projectLocation',
                render: (h, params) => {
                    return h('span', params.row.projectLocation ? params.row.projectLocation : '--')
                },
                title: '股东名称',
                slot: 'Name',
                // render: (h, params) => {
                //     return h('span', params.row.Name ? params.row.Name : '--')
                // },
                align: 'center',
                // width: 130
                minWidth: 120,
            })

            columns.push({
                title: '土地用途',
                key: 'landUseType',
                title: '股东类型',
                key: 'type',
                render: (h, params) => {
                    return h('span', params.row.landUseType ? params.row.landUseType : '--')
                    if (params.row.type == 1) {
                        return h('span', '公司')
                    } else if (params.row.type == 2) {
                        return h('span', '⼈')
                    } else if (params.row.type == 3) {
                        return h('span', '其它')
                    }else {
                        return h('span', '--')
                    }
                    // return h('span', params.row.Percent ? params.row.Percent : '--')
                },
                align: 'center',
                // width: 130

            })

            columns.push({
                title: '总面积（公顷）',
                key: 'area',
                render: (h, params) => {
                    return h('span', params.row.area ? params.row.area : '--')
                }

            })
            columns.push({
                title: '行政区',
                key: 'district',
                render: (h, params) => {
                    return h('span', params.row.district ? params.row.district : '--')
                }

            })
            columns.push({
                title: '供应方式',
                key: 'landSupplyMethod',
                render: (h, params) => {
                    return h('span', params.row.landSupplyMethod ? params.row.landSupplyMethod : '--')
                }

            })
            columns.push({
                title: '签订日期',
                key: 'contractDate',
                render: (h, params) => {
                    return h('span', params.row.contractDate ? this.getDate(params.row.contractDate) : '--')
                }
            })
            columns.push({
                title: '操作',
                slot: 'action',
                width: 100,
                width:120,
                align: 'center'
            })
            return columns
        },
        getTycBidsColumns() { // 企业招投标信息
            let columns = []
            // columns.push({
            //     title: '出资比例(%)',
            //     key: 'Percent',
            //     render: (h, params) => {
            //         return h('span', params.row.Percent ? params.row.Percent : '--')
            //     },
            //     minWidth: 120,
            //     align: 'center'
            // })
            columns.push({
                title: '序号',
                width: 90,
                title: '认缴明细',
                align: 'center',
                render: (h, params) => {
                    return h(
                        'span',
                        params.row.ItemIndex
                    )
                }
                key: 'capital',
                children: [ 
                    {
                        title: '出资金额(万元)',
                        key: 'CapitalAmomon',
                        render: (h, params) => {
                            return h('span', params.row.CapitalAmomon ? params.row.CapitalAmomon : '--')
                        },
                        width: 100,
                        align: 'center'
                    },
                    {
                        title: '认缴方式',
                        key: 'CapitalPaymet',
                        render: (h, params) => {
                            return h('span', params.row.CapitalPaymet ? params.row.CapitalPaymet : '--')
                        },
                        width: 100,
                        align: 'center'
                    },
                   
                    {
                        title: '出资时间',
                        key: 'CapitalTime',
                        render: (h, params) => {
                            return h('span', params.row.CapitalTime ? params.row.CapitalTime : '--')
                        },
                        width: 105,
                        align: 'center'
                    },
                    {
                        title: '占比',
                        key: 'CapitalPercent',
                        render: (h, params) => {
                            return h('span', params.row.CapitalPercent ? params.row.CapitalPercent : '--')
                        },
                        width: 105,
                        align: 'center'
                    }
                ]
            })
            columns.push({
                title: '实缴明细',
                key: 'capitalActl',
                align: 'center',
                children: [
                {
                        title: '出资金额(万元)',
                        key: 'CapitalActlAmomon',
                        align: 'center',
                        width:100,
                        className: 'CapitalActl',
                        render: (h, params) => {
                            if (params.row.CapitalActlAmomon) {
                                let html = "";
                                let list = params.row.CapitalActlAmomon.split(';');
                                for (let index in list) {
                                    if (list[index]) {
                                        html += "<span>" + list[index] + "</span>";
                                        html += "</br>";
                                    }
                                }
                                return h("span", {
                                    domProps: {
                                        innerHTML: html
                                    }
                                });

            columns.push({
                title: '标题',
                key: 'title',
                render: (h, params) => {
                    return h('span', params.row.title ? params.row.title : '--')
                },
                minWidth: 200
            })
            columns.push({
                title: '采购人',
                key: 'purchaser',
                render: (h, params) => {
                    return h('span', params.row.purchaser ? params.row.purchaser : '--')
                }
            })
                            } else {
                                return h('span', '--')
                            }
                        }
                    },
                    {
                        title: '实缴方式',
                        key: 'CapitalActlPaymet',
                      
                        render: (h, params) => {
                            if (params.row.CapitalActlPaymet) {
                                let html = "";
                                let list = params.row.CapitalActlPaymet.split(';');
                                for (let index in list) {
                                    if (list[index]) {
                                        html += "<span>" + list[index] ? list[index].indexOf('1') > -1 || list[index].indexOf('货币') > -1 ? '货币' : '其它' : '' + "</span>";
                                        html += "</br>";
                                    }

            columns.push({
                title: '发布日期',
                key: 'publishTime',
                render: (h, params) => {
                    return h('span', params.row.publishTime ? this.getDate(params.row.publishTime) : '--')
                },
                width: 120
            })
            columns.push({
                title: '操作',
                slot: 'action',
                width: 100,
                align: 'center'
            })
            return columns
        },
        GetTycLandPublicityColumns() { // 地块公示
            let columns = []
            columns.push({
                title: '序号',
                width: 90,
                align: 'center',
                render: (h, params) => {
                    return h(
                        'span',
                        params.row.ItemIndex
                    )
                }
            })
                                }
                                return h("span", {
                                    domProps: {
                                        innerHTML: html == '' ? '--' : html
                                    }
                                });
                            } else {
                                return h('span', '--')
                            }

            columns.push({
                title: '地块位置',
                key: 'land_location',
                render: (h, params) => {
                    return h('span', params.row.land_location ? params.row.land_location : '--')
                },
                minWidth: 130
            })
            columns.push({
                title: '行政区',
                key: 'administrative_district',
                render: (h, params) => {
                    return h('span', params.row.administrative_district ? params.row.administrative_district : '--')
                },
                minWidth: 130
            })
            columns.push({
                title: '土地面积（公顷）',
                key: 'land_area',
                render: (h, params) => {
                    return h('span', params.row.land_area ? params.row.land_area : '--')
                },
                minWidth: 130
            })
            columns.push({
                title: '土地用途',
                key: 'land_usefulness',
                render: (h, params) => {
                    return h('span', params.row.land_usefulness ? params.row.land_usefulness : '--')
                },
                minWidth: 130
            })
            columns.push({
                title: '发布机关',
                key: 'publication_organize',
                render: (h, params) => {
                    return h('span', params.row.publication_organize ? params.row.publication_organize : '--')
                },
                minWidth: 130
            })
            columns.push({
                title: '发布日期',
                key: 'publication_date',
                render: (h, params) => {
                    return h('span', params.row.publication_date ? params.row.publication_date : '--')
                },
                width: 120
            })
            columns.push({
                title: '操作',
                slot: 'action',
                width: 100,
                align: 'center'
            })
            return columns
        },
        GetTycLandTransferColumns() { // 土地转让
            let columns = []
            columns.push({
                title: '序号',
                width: 90,
                align: 'center',
                render: (h, params) => {
                    return h(
                        'span',
                        params.row.ItemIndex
                    )
                }
            })
            columns.push({
                title: '土地坐落',
                key: 'location',
                render: (h, params) => {
                    return h('span', params.row.location ? params.row.location : '--')
                }
            })
            columns.push({
                title: '土地面积（公顷）',
                key: 'area',
                render: (h, params) => {
                    return h('span', params.row.area ? params.row.area : '--')
                }
            })
            columns.push({
                title: '原土地使用权人',
                key: 'user_change_pre_clean',
                render: (h, params) => {
                    return h('span', params.row.user_change_pre_clean ? params.row.user_change_pre_clean : '--')
                }
            })
            columns.push({
                title: '现土地使用权人',
                key: 'user_change_now_clean',
                render: (h, params) => {
                    return h('span', params.row.user_change_now_clean ? params.row.user_change_now_clean : '--')
                }
            })
            columns.push({
                title: '转让价格（万元）',
                key: 'merchandise_price',
                render: (h, params) => {
                    return h('span', params.row.merchandise_price ? params.row.merchandise_price : '--')
                }
            })
            columns.push({
                title: '成交日期',
                key: 'merchandise_time',
                render: (h, params) => {
                    return h('span', params.row.merchandise_time ? params.row.merchandise_time : '--')
                },
                width: 130
            })
            columns.push({
                title: '操作',
                slot: 'action',
                width: 100,
                align: 'center'
            })
            return columns
        },
        GetTycPsNewsColumns() { // 新闻舆情
            let columns = []
            columns.push({
                title: '序号',
                width: 90,
                align: 'center',
                render: (h, params) => {
                    return h(
                        'span',
                        params.row.ItemIndex
                    )
                }
            })
            columns.push({
                title: '数据来源',
                key: 'website',
                render: (h, params) => {
                    return h('span', params.row.website ? params.row.website : '--')
                },
                width: 120
            })
            columns.push({
                title: '简介',
                key: 'abstracts',
                render: (h, params) => {
                    return h('span', params.row.abstracts ? params.row.abstracts : '--')
                },
                align: 'right',
                minWidth: 400
            })
                        },
                        // return h('span', params.row.CapitalActlPaymet ? params.row.CapitalActlPaymet.indexOf('1')>-1||params.row.CapitalActlPaymet.indexOf('货币')>-1?'货币':'其它' : '--')
                        width: 100,
                        align: 'center',
                    },
                    {
                        title: '出资时间',
                        key: 'CapitalActlTime',
                        width: 105,
                        align: 'center',
                        className: 'CapitalActl',
                        render: (h, params) => {
                            if (params.row.CapitalActlAmomon) {
                                let html = "";
                                let list = params.row.CapitalActlTime.split(';');
                                for (let index in list) {
                                    if (list[index]) {
                                        html += "<span>" + list[index] + "</span>";
                                        html += "</br>";
                                    }
                                }
                                return h("span", {
                                    domProps: {
                                        innerHTML: html
                                    }
                                });
                            } else {
                                return h('span', '--')
                            }
                        }
                    },
                    {
                        title: '占比',
                        key: 'CapitalActlPercent',
                        width: 105,
                        align: 'center',
                        className: 'CapitalActl',
                        render: (h, params) => {
                            if (params.row.CapitalActlAmomon) {
                                let html = "";
                                let list = params.row.CapitalActlPercent.split(';');
                                for (let index in list) {
                                    if (list[index]) {
                                        html += "<span>" + list[index] + "</span>";
                                        html += "</br>";
                                    }
                                }
                                return h("span", {
                                    domProps: {
                                        innerHTML: html
                                    }
                                });
                            } else {
                                return h('span', '--')
                            }

            columns.push({
                title: '标题',
                key: 'title',
                render: (h, params) => {
                    return h('span', params.row.title ? params.row.title : '--')
                },
                minWidth: 200
            })
            columns.push({
                title: '标签',
                key: 'tags',
                render: (h, params) => {
                    return h('span', params.row.tags ? params.row.tags : '--')
                },
                minWidth: 200
            })
            columns.push({
                title: '标签分类',
                key: 'emotion',
                render: (h, params) => {
                    return h('span', params.row.emotion ? params.row.emotion : '--')
                },
                minWidth: 200
            })
            columns.push({
                title: '发布时间',
                key: 'ExecutiveCourt',
                render: (h, params) => {
                    return h('span', params.row.ExecutiveCourt ? this.getDate(params.row.ExecutiveCourt) : '--')
                },
                width: 120
            })
            columns.push({
                title: '新闻链接',
                slot: 'action',
                width: 100,
                align: 'center'
            })
            return columns
        },
        pochanListColumns() { // 破产重整
            let columns = []
            columns.push({
                title: '序号',
                width: 90,
                align: 'center',
                render: (h, params) => {
                    return h(
                        'span',
                        params.row.ItemIndex
                    )
                }
            })
            columns.push({
                title: '案号',
                key: 'caseNo',
                render: (h, params) => {
                    return h('span', params.row.caseNo ? params.row.caseNo : '--')
                }
            })
            columns.push({
                title: '案件类型',
                key: 'caseType',
                render: (h, params) => {
                    return h('span', params.row.caseType ? params.row.caseType : '--')
                }
            })
            columns.push({
                title: '被申请人',
                key: 'respondent',
                render: (h, params) => {
                    return h('span', params.row.respondent ? params.row.respondent : '--')
                }
            })
            columns.push({
                title: '公开时间',
                key: 'submitTime',
                render: (h, params) => {
                    return h('span', params.row.submitTime ? params.row.submitTime : '--')
                }
            })
            columns.push({
                title: '操作',
                slot: 'action',
                width: 100,
                align: 'center'
            })
            return columns
        },
        zhiXingColumns() { // 被执行人
            let columns = []
            columns.push({
                title: '序号',
                width: 90,
                align: 'center',
                render: (h, params) => {
                    return h(
                        'span',
                        params.row.ItemIndex
                    )
                }
            })
            columns.push({
                title: '案号',
                key: 'caseCode',
                render: (h, params) => {
                    return h('span', params.row.caseCode ? params.row.caseCode : '--')
                }
            })
            columns.push({
                title: '被执行人',
                key: 'pname',
                render: (h, params) => {
                    return h('span', params.row.pname ? params.row.pname : '--')
                }
            })
            columns.push({
                title: '身份证号/组织机构代码',
                key: 'partyCardNum',
                render: (h, params) => {
                    return h('span', params.row.partyCardNum ? params.row.partyCardNum : '--')
                }
            })


            columns.push({
                title: '执行标的(元)',
                key: 'execMoney',
                render: (h, params) => {
                    return h('span', params.row.execMoney ? this.CustomMethods.numTo$(params.row.execMoney) : '--')
                },
                align: 'right'
            })
            columns.push({
                title: '执行法院',
                key: 'execCourtName',
                render: (h, params) => {
                    return h('span', params.row.execCourtName ? params.row.execCourtName : '--')
                }
            })
            columns.push({
                title: '立案日期',
                key: 'caseCreateTime',
                render: (h, params) => {
                    return h('span', params.row.caseCreateTime ? this.getDate(params.row.caseCreateTime) : '--')
                },
                width: 130
            })
            return columns
        },
        shixinListColumns() { //失信被执行
            let columns = []
            columns.push({
                title: '序号',
                width: 90,
                align: 'center',
                render: (h, params) => {
                    return h(
                        'span',
                        params.row.ItemIndex
                    )
                }
            })
            columns.push({
                title: '案号',
                key: 'casecode',
                render: (h, params) => {
                    return h('span', params.row.casecode ? params.row.casecode : '--')
                }
            })
            columns.push({
                title: '执行法院',
                key: 'courtname',
                render: (h, params) => {
                    return h('span', params.row.courtname ? params.row.courtname : '--')
                }
            })
            columns.push({
                title: '履行情况',
                key: 'performance',
                render: (h, params) => {
                    return h('span', params.row.performance ? params.row.performance : '--')
                }
            })
            columns.push({
                title: '执行依据文号',
                key: 'gistid',
                render: (h, params) => {
                    return h('span', params.row.gistid ? params.row.gistid : '--')
                }
            })
            columns.push({
                title: '发布日期',
                key: 'publishdate',
                render: (h, params) => {
                    return h('span', params.row.publishdate ? this.getDate(params.row.publishdate) : '--')
                }
            })
            columns.push({
                title: '立案日期',
                key: 'regdate',
                render: (h, params) => {
                    return h('span', params.row.regdate ? this.getDate(params.row.regdate) : '--')
                }
            })
            columns.push({
                title: '操作',
                slot: 'action',
                width: 100,
                align: 'center'
                        }
                    }
                ]
            })
            return columns
        },

        xianzhixiaofeiColumns() { //限制消费
            let columns = []
            columns.push({
                title: '序号',
                width: 90,
                align: 'center',
                render: (h, params) => {
                    return h(
                        'span',
                        params.row.ItemIndex
                    )
                }
            })
            columns.push({
                title: '案号',
                key: 'CaseCode',
                render: (h, params) => {
                    return h('span', params.row.CaseCode ? params.row.CaseCode : '--')
                }
            })
            columns.push({
                title: '企业名称',
                key: 'Qyinfo',
                render: (h, params) => {
                    return h('span', params.row.Qyinfo ? params.row.Qyinfo : '--')
                },
                minWidth: 200
            })
            columns.push({
                title: '立案时间',
                key: 'CreateTime',
                render: (h, params) => {
                    return h('span', params.row.CreateTime ? params.row.CreateTime : '--')
                }
            })
            columns.push({
                title: '限制消费者名称',
                key: 'Xname',
                render: (h, params) => {
                    return h('span', params.row.Xname ? params.row.Xname : '--')
                }
            })
            columns.push({
                title: '申请人',
                key: 'applicant',
                render: (h, params) => {
                    return h('span', params.row.applicant ? params.row.applicant : '--')
                }
            })
            columns.push({
                title: '发布日期',
                key: 'publishDate',
                render: (h, params) => {
                    return h('span', params.row.publishDate ? this.getDate(params.row.publishDate) : '--')
                }
            })

            columns.push({
                title: '文件',
                slot: 'action',
                minWidth: 200,
                align: 'center'
            })
            return columns
        },
        zbajColumns() { //终本案件
            let columns = []
            columns.push({
                title: '序号',
                width: 90,
                align: 'center',
                render: (h, params) => {
                    return h(
                        'span',
                        params.row.ItemIndex
                    )
                }
            })
            columns.push({
                title: '案号',
                key: 'CaseCode',
                render: (h, params) => {
                    return h('span', params.row.CaseCode ? params.row.CaseCode : '--')
                }
            })
            columns.push({
                title: '终本日期',
                key: 'CaseFinalTime',
                render: (h, params) => {
                    return h('span', params.row.CaseFinalTime ? this.getDate(params.row.CaseFinalTime) : '--')
                },
                // minWidth:200
            })
            columns.push({
                title: '立案时间',
                key: 'CaseCreateTime',
                render: (h, params) => {
                    return h('span', params.row.CaseCreateTime ? params.row.CaseCreateTime.split('00:00:00')[0] : '--')
                }
            })
            columns.push({
                title: '执行法院',
                key: 'ExecCourtName',
                render: (h, params) => {
                    return h('span', params.row.ExecCourtName ? params.row.ExecCourtName : '--')
                }
            })
            columns.push({
                title: '执行标的',
                key: 'ExecMoney',
                render: (h, params) => {
                    return h('span', params.row.ExecMoney ? params.row.ExecMoney : '--')
                }
            })
            columns.push({
                title: '未履行金额',
                key: 'NoExecMoney',
                render: (h, params) => {
                    return h('span', params.row.NoExecMoney ? this.getDate(params.row.NoExecMoney) : '--')
                }
            })
            columns.push({
                title: '被执行人名称',
                key: 'Zname',
                render: (h, params) => {
                    return h('span', params.row.Zname ? params.row.Zname : '--')
                }
            })
            return columns
        },
    },
    destroyed() {
        this.checkCityInvestmentZone = ''
@@ -1390,5 +1006,10 @@
        color: #FFF;
    }

}</style>
}
.CapitalActl {
  padding-bottom: 0;
  margin-bottom: 0
}
</style>
  

 src/view/diligenceTools/gongkaixinxi/relationDeep.vue

New file
@@ -0,0 +1,373 @@
<template>
    <div id="topId">
        <div v-show="scrollTop < -200" @click="backTop"
            style="width: 20px;height: 20px;position: fixed;bottom: 45px;right: 22px;
            z-index: 99999;cursor: pointer;text-align: center;line-height: 18px;background-color: darkgray;color: white;">
            <Icon type="md-arrow-round-up" size="18" />
        </div>
        <Card id="backTop">
            <div class="customTitle">
                <Icon custom="custom custom-gongkaixinxi2"></Icon>
                <span style="margin-left: 6px;">关系发现</span>
            </div>
        </Card>
        <Card style="position: relative;margin-top: 12px;">
            <Spin v-show="loading" fix></Spin>
            <ul class="lists_readAndEdit clearfix" style="margin-top: 0;padding-bottom: 6px;">
                <li class="list" style="width: 100%;">
                    <span class="list_name">企业名称</span>
                    <div class="list_value">
                        <Poptip trigger="focus" placement="bottom-start" transfer class="node_poptip"
                            style="width: 400px;float: left;margin-right: 10px;">
                            <Input v-model="searchName" size="large" @on-change="remoteMethod" @on-enter="mergeRequest"
                                placeholder="请输入企业名称"></Input>
                            <ul slot="content" style="width: 500px;">
                                <li v-if="optionsList && optionsList.length == 0">无匹配结果</li>
                                <li v-for="(item, index) in optionsList" :key="index" @click="changeBelongLtdId(item.Name)"
                                    class="clearfix" style="cursor:pointer;padding: 4px 2px;">
                                    <span style="float: left;">{{ item.Name }}</span>
                                    <span
                                        style="float: right;display: inline-block;border-radius: 4px;background-color: #e5f7fa;padding: 1px 4px;color: #05b6d0;">{{
                                            item.IsOriginalNameMatch ? '历史名称匹配' : '企业名称匹配'
                                        }}</span>
                                </li>
                            </ul>
                        </Poptip>
                        <Button size="large" icon="ios-search" style="float: left;" type="primary" @click="mergeRequest">搜索
                        </Button>
                    </div>
                </li>
                <li v-if="historyList.length > 0" class="list" style="width: 100%;margin-top: 2px;">
                    <span class="list_name" style="top: 5px;">历史记录</span>
                    <div class="list_value">
                        <Tag v-for="(item, index) in historyList" type="border" style="cursor:pointer;"
                            @click.native="quickSearch(item)">{{ item }}
                        </Tag>
                    </div>
                </li>
            </ul>
            <Tabs :value="tab" @on-click="changeTab" type="card" style="margin-top:8px;">
                <TabPane label="疑似实际控制人" name="tab1" :index="1">
                   <tab1 :name="searchName" :tab="tab"></tab1> 
                </TabPane>
                <TabPane label="股权穿透图" name="tab2" :index="2">
                    <tab2 :name="searchName" :tab="tab"></tab2> 
                </TabPane>
            </Tabs>
        </Card>
    </div>
</template>
  
<script>
import $ from 'jquery'
import axios from '@/libs/api.request'
import tab1 from './components/tab1.vue'
import tab2 from './components/tab2.vue'


export default {
    name: 'publicInformation',
    components: {
      tab1,
      tab2
    },
    props: {

    },

    data() {
        return {
            scrollTop: 0,// 距离顶部距离
            topTrue: false,
            tab: 'tab1',
            searchName: '',
            selectedName: '',
            optionsList: [],
            historyList: [],
            loading: false,
            pageIndex: 1,
            TotalItems: 0,
            pageSize: 10,
            loadingTable: false,
            baseInfo: {},
            holderList: {},
            PartnerCase: []
        }
    },
    mounted() {
        window.addEventListener('scroll', this.scrollListen, true)

        this.ProjId = localStorage.getItem('RiskProjectId')
        this.CompanyId = localStorage.getItem('RiskCompanyId')
        this.accessParams = this.$store.state.user.access
        if (this.accessParams.indexOf('enterpriseControl') >= 0) {
            this.accessShow = true
        } else {
            this.accessShow = false
        }
        // if (this.$route.query.name) {
        //     this.searchName = this.$route.query.name
        //     this.selectedName = this.$route.query.name
        //     // this.changeTab('tab1')
            this.getSearchInfoList2()
        // } else {
        //     // this.getSearchInfoList()
        // }

        // console.log(this.searchName, this.selectedName, this.$route.query.name);
        // this.changeTab('tab1')
    },
    beforeRouteLeave(to, from, next) {
        this.clearMyInterval = true
        window.removeEventListener('scroll', this.scrollListen, true)
        next()
    },
    deactivated() {

    },
    watch: {
        '$route': {
            handler(to, from) {
                if (to.name === 'publicMessage_tool') {
                    this.topTrue = true
                } else {
                    this.topTrue = false
                }
            },
            deep: true, // 深度监听
            immediate: true, // 第一次初始化渲染就可以监听到
        }
    },
    methods: {
        scrollListen() {
            if (this.topTrue) {
                if ($('#topId').offset().top) {
                    this.scrollTop = $('#topId').offset().top
                }
            }
        },
        backTop() {
            document.getElementById('backTop').scrollIntoView()
        },
        /**
    * 远程搜索主体名称
    */
        remoteMethod() {
            // this.TypeAdd = 1
            if (this.searchName !== '') {
                this.searchLoading = true
                let data = { keyword: this.searchName }
                axios.request({
                    url: '/qichacha/FuzzySearch',
                    data,
                    method: 'post'
                }).then(res => {
                    if (res.data.Check) {
                        this.optionsList = JSON.parse(JSON.stringify(res.data.Data))
                    } else {
                        this.optionsList = []
                    }
                    this.searchLoading = false
                }, res => {
                    this.optionsList = []
                    this.searchLoading = false
                })
            } else {
                this.optionsList = []
            }
        },
        mergeRequest() {
            // this.pageIndex = 1
            // this.changeTab('tab1')
        },
        changeBelongLtdId(item) {
            this.searchName = item
        },
        quickSearch(item) {
            this.searchName = item
            this.selectedName = item
            this.pageIndex = 1
            this.changeTab('tab1')

        },
        changeTab(e) {
            this.tab = e
            // this.pageIndex = 1
            // if (this.tab == 'tab1') {
            //     this.GetTycTaxCredit()
            // } else if (this.tab == 'tab2') {
            //     this.GetHolderList()
            // }
        },
        changePageIndex(e) {
            this.pageIndex = e
            this.GetHolderList()

        },
        //  获取历史记录
        getSearchInfoList() {
            axios.request({
                url: '/SearchInfo/GetSearchInfoList',
                method: 'post'
            }).then(res => {
                if (res.data.Check) {
                    this.historyList = res.data.Data
                    if (this.historyList.length > 0 && this.selectedName === '') {
                        this.searchName = this.historyList[0]
                        this.selectedName = this.historyList[0]
                        console.log(this.searchName, this.selectedName, this.$route.query.name);
                        if (this.optionsList.length == 0) {
                            this.remoteMethod()
                        }
                        this.changeTab('tab1')
                        // this.mergeRequest(this.selectedName)
                    } else {
                        this.loading = false
                    }
                } else {

                }
            }, res => {

            })
        },
        getSearchInfoList2() {
            axios.request({
                url: '/SearchInfo/GetSearchInfoList',
                method: 'post'
            }).then(res => {
                if (res.data.Check) {
                    this.historyList = res.data.Data
                    if (this.historyList.length > 0 && this.selectedName === '') {
                        this.searchName = this.historyList[0]
                        this.selectedName = this.historyList[0]
                        console.log(this.searchName, this.selectedName, this.$route.query.name);
                        if (this.optionsList.length == 0) {
                            this.remoteMethod()
                        }
                        // this.mergeRequest(this.selectedName)
                    } else {
                        this.loading = false
                    }
                } else {

                }
            }, res => {

            })
        },
        // 获取企业基本信息
        GetTycTaxCredit() {
            let data = {
                name: this.searchName,
                searchType: 1
            }
            axios.request({
                url: '/QiChaCha/GetBaseinfoV3',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.Check) {
                    this.baseInfo = res.data.Data
                } else {
                    this.baseInfo = {}
                }


            }, res => {
                this.baseInfo = {}
            })
        },
        // 获取企业股东
        GetHolderList() {
            this.PartnerCase = []
            let data = {
                name: this.searchName,
                pageIndex: this.pageIndex,
                pageSize: this.pageSize
            }
            axios.request({
                url: '/QiChaCha/GetHolderList',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.Check) {
                    this.holderList = res.data.Data
                    this.TotalItems = res.data.Data.TotalItems




                
                } else {
                    this.holderList = {}
                    this.TotalItems = 0
                }


            }, res => {
                this.holderList = {}
                this.TotalItems = 0
            })
        },




        // 获取当前日期
        getDate(date1) {
            if (date1 == 0) {
                return '--'
            } else {
                var myDate = new Date(Number(date1));
                var year = myDate.getFullYear(); //获取当前年
                var mon = myDate.getMonth() + 1; //获取当前月
                var date = myDate.getDate(); //获取当前日
                var now = year + "-" + mon + "-" + date
                return now;
            }
        },
        


    },
    computed: {
      


    },
    destroyed() {
        this.checkCityInvestmentZone = ''
    }
}
</script>
  
<style lang="less">
[v-cloak] {
    display: none !important;
}

.ztb {
    table {
        border-top: 1px solid #dcdee2;
        border-right: 1px solid #dcdee2;
    }
}

.node_poptip {
    .ivu-poptip-arrow:after {
        border-right-color: #93b3a5 !important; //根据气泡框的箭头进行调整
    }

    .ivu-poptip-inner {
        background-color: #93b3a5;
        color: #FFF;
    }

}
.CapitalActl {
  padding-bottom: 0;
  margin-bottom: 0
}
</style>