FroupAndEconomicDependenceInformation.vue

<template>
  <div>
    <title-bar title="集团及经济依存信息" @clickLef="onClick">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>
    <van-tabs class="guarTabCls" :active="active" @click="checkMod">
      <van-tab title="集团母公司">
        <div id="mgs" class="d-flex align-items-center justify-content-center echarts-container-class" v-show="active == 0">
          <img v-if="!errorFlag" src="../../../../assets/images/nodata.png" class="no-data-class"/>
        </div>
      </van-tab>
      <van-tab title="集团关系">
        <div class="d-flex align-items-center justify-content-center echarts-container-class">
          <tree-graph-cmp :data="treeData" :format="formatLabel" v-if="active == '2'"></tree-graph-cmp>
          <img v-if="!relationFlag" src="../../../../assets/images/nodata.png" class="no-data-class"/>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TitleBar from "@/components/general/TitleBar.vue";
import TreeGraphCmp from '@/components/general/TreeGraphCmp.vue';
import { NativeUI } from "@/public/ts/NativeUI";
import nettyApi from "@/constants/api/ms-netty/netty.api";
import Public from "@/public/ts/Public";
/**
 * @Description 集团及经济依存信息
 * @Author JiangTao
 * @Date 2021-11-10 下午 03:15
 */
@Component({
  name: "FroupAndEconomicDependenceInformation",
  components: {
    TitleBar,
    TreeGraphCmp
  },
})
export default class FroupAndEconomicDependenceInformation extends Vue {
  pageTitle = ""; // 页面标题
  treeData:any = {};
  array:any = {
    name: this.$store.getters.getCusInfo.cus_name,
    children: []
  };
  active = 0;
  companyArray:any[] = [];
  linksArray:any = [];
  chartFlag = true;
  momCompany = "";
  creditcodes = "";
  arrayMember:any = {
    name: '',
    children: []
  };
  arrayKGZRR:any = {
    name: '',
    children: []
  };
  zrPeople = '';
  errorFlag = true;
  relationFlag = true;

  onClick() {
    this.$router.back();
  }
  mounted() {
    this.pageTitle = this.$route.meta?.name;
    this.active = 0;
    this.checkMod();
    this.getInfo();
  }
  formatLabel() {}
  /**
   * @description:  切换
   * @author LiShenghui
   * @date 2022/2/18 20:28
   */
  checkMod() {
    if (this.active == 0) {
      this.getInfo();
    } else if (this.active == 1) {
      this.getInfoMember();
    }
  }
  /**
   *
   * description：查询集团成员
   * ahthor：pd
   * 2021年12月13日21:01:38
   */
  getInfoMember() {
    const parms = {
      tc: nettyApi.TRADE_CODE.selectInfoMember,
      creditcode: this.creditcodes, //this.$store.getters.getCusInfo.cert_code, //this.$store.getters.getCusInfo.cert_code, //'91510100725399362W','915101002021494601''91110108779517897G'
      entid: '',
      regno: '',
      entname: this.momCompany, //this.$store.getters.getCusInfo.cus_name, //this.$store.getters.getCusInfo.cus_name, //'四川飞森房地产开发有限公司','蓝光投资控股集团有限公司''北京金山奇剑数码科技有限公司'
      ProdId: Public.getProdId(),
      SvrCode: Public.getSvrCode(nettyApi.TRADE_CODE.selectInfoMember),
      ClientNo: this.$store.getters.getCusInfo.cus_id,
      pageIndex: '1'
    };
    NativeUI.showWaiting('正在查询');
    return this.$IF.transferDataInter(nettyApi.commonRq, parms).then((res:any) => {
      NativeUI.closeWaiting();
      if (res.rc == '1') {
        this.arrayMember.name = this.momCompany;
        if (res.final_out_control && res.final_out_control != '') {
          for (let obj of res.final_out_control) {
            for (let index in obj.path2.nodes) {
              if (obj.path2.nodes[index].innode == true) {
                this.zrPeople = obj.path2.nodes[index].name;
                // if (index == 0) {
                //   console.log(this.momCompany);
                //   this.arrayMember.name = obj.path2.nodes[1].name;
                // } else if (index == 1) {
                //   console.log(this.momCompany);
                //   this.arrayMember.name = obj.path2.nodes[0].name;
                // }
              }
            }
          }

          this.arrayKGZRR.name = '最终控股自然人' + this.zrPeople;
          let objkg:any = {
            name: '控股企业' + '(' + res.final_out_control.length + ')',
            children: []
          };
          for (let index in res.final_out_control) {
            if (parseInt(index) < 5) {
              let objname:any = {};
              objname.name = res.final_out_control[index].entname;
              objkg.children.push(objname);
            }
          }
          this.arrayKGZRR.children.push(objkg);

          if (res.final_out_legal && res.final_out_legal != '') {
            let objFA:any = {
              name: '担任法人企业' + '(' + res.final_out_legal.length + ')',
              children: []
            };
            for (let indexs in res.final_out_legal) {
              let objcom:any = {};
              if (parseInt(indexs) < 5) {
                objcom.name = res.final_out_legal[indexs].entname;
                objFA.children.push(objcom);
              }
            }
            this.arrayKGZRR.children.push(objFA);
          }
          this.arrayMember.children.push(this.arrayKGZRR);
        }

        if (res.parent_and_staff_control && res.parent_and_staff_control != '') {
          let objgg:any = {
            name: '母公司及其高管共同控制企业' + '(' + res.parent_and_staff_control.length + ')',
            children: []
          };
          for (let objindex in res.parent_and_staff_control) {
            if (parseInt(objindex) < 5) {
              let obj:any = {};
              obj.name = res.parent_and_staff_control[objindex].entname;
              objgg.children.push(obj);
            }
          }
          this.arrayMember.children.push(objgg);
        }

        if (res.staff_out_control && res.staff_out_control != '') {
          let objzz:any = {
            name: '母公司高管直接控制企业' + '(' + res.staff_out_control.length + ')',
            children: []
          };
          for (let objindex in res.staff_out_control) {
            if (parseInt(objindex) < 5) {
              let obj:any = {};
              obj.name = res.staff_out_control[objindex].entname;
              objzz.children.push(obj);
            }
          }
          this.arrayMember.children.push(objzz);
        }

        if (res.members && res.members != '') {
          let objson:any = {
            name: '子公司' + '(' + res.members.length + ')',
            children: []
          };
          for (let objindex in res.members) {
            if (parseInt(objindex) < 5) {
              let obj:any = {};
              obj.name = res.members[objindex].entname;
              objson.children.push(obj);
            }
          }
          this.arrayMember.children.push(objson);
        }

        if (res.legal_out_control && res.legal_out_control != '') {
          let objdw:any = {
            name: '母公司法人对外直接控制' + '(' + res.legal_out_control.length + ')',
            children: []
          };
          for (let objindex in res.legal_out_control) {
            if (parseInt(objindex) < 5) {
              let obj:any = {};
              obj.name = res.legal_out_control[objindex].entname;
              objdw.children.push(obj);
            }
          }
          this.arrayMember.children.push(objdw);
        }

        if (res.parent_and_inv_control && res.parent_and_inv_control != '') {
          let objmo:any = {
            name: '母公司及主要投资者共同控制' + '(' + res.parent_and_inv_control.length + ')',
            children: []
          };
          for (let objindex in res.parent_and_inv_control) {
            if (parseInt(objindex) < 5) {
              let obj:any = {};
              obj.name = res.parent_and_inv_control[objindex].entname;
              objmo.children.push(obj);
            }
          }
          this.arrayMember.children.push(objmo);
        }

        this.treeData = this.arrayMember;
      } else {
        this.arrayMember.name = '暂无数据';
        this.treeData = this.arrayMember;
        this.relationFlag = false;
        if (res.ret_code != '4999999') {
          NativeUI.toast(res.msg);
        }
      }
    });
  }
  /**
   * 查询集团母公司
   * ahthor：pd
   * 2021年12月13日20:38:12
   * @returns {Promise<void>}
   */
  getInfo() {
    const parms = {
      tc: nettyApi.TRADE_CODE.selectMothCompany,
      creditcode: this.$store.getters.getCusInfo.cert_code, //'91510100725399362W',
      entname: this.$store.getters.getCusInfo.cus_name, //'四川飞森房地产开发有限公司',
      entid: '',
      regno: '',
      ProdId: Public.getProdId(),
      SvrCode: Public.getSvrCode(nettyApi.TRADE_CODE.selectMothCompany),
      ClientNo: this.$store.getters.getCusInfo.cus_id
    };
    NativeUI.showWaiting('正在查询');
    return this.$IF.transferDataInter(nettyApi.commonRq, parms).then((res:any) => {
      NativeUI.closeWaiting();
      if (res.rc == '1') {
        let obj:any = {};
        obj.name = res.result[0].parent[0].entname;
        this.momCompany = res.result[0].parent[0].entname;
        this.creditcodes = res.result[0].parent[0].creditcode;
        this.companyArray.push(obj);
        if (res.result[0].parent[0].path && res.result[0].parent[0].path != '') {
          for (let objinfo of res.result[0].parent[0].path) {
            if (objinfo.nodes && objinfo.nodes != '') {
              for (let objNodes of objinfo.nodes) {
                if (objNodes.name == obj.name) {
                  obj.id = objNodes.id;
                }
                let objcom:any = {};
                if (objNodes.name != obj.name && objNodes.name != this.$store.getters.getCusInfo.cus_name) {
                  objcom.name = objNodes.name;
                  objcom.id = objNodes.id;
                  this.companyArray.push(objcom);
                }
                if (objNodes.name == this.$store.getters.getCusInfo.cus_name) {
                  objcom.name = objNodes.name;
                  objcom.id = objNodes.id;
                  this.companyArray.push(objcom);
                }
              }
              for (let objLinks of objinfo.links) {
                let objLink:any = {};
                objLink.source = objLinks.from;
                objLink.target = objLinks.to;
                if (objLinks.type == 1) {
                  objLink.relation = '出资比例：' + objLinks.properties[0].conprop * 100 + '%';
                } else if (objLinks.type == 2) {
                  objLink.relation = objLinks.properties[0].position_desc;
                } else if (objLinks.type == 13) {
                  objLink.relation = '持股比例:' + objLinks.properties[0].holderrto + '%';
                } else {
                  objLink.relation = '';
                }
                this.linksArray.push(objLink);
              }
            }
          }
          if (this.chartFlag) {
            this.init();
          }
        }
      } else {
        if (res.ret_code != '4999999') {
          NativeUI.toast(res.msg);
        }
        this.errorFlag = false;
      }
    });
  }
  /**
   * 初始化echarts
   * anthor：pd
   * 2021年12月13日20:38:39
   */
  init() {
    var chartDom = document.getElementById('mgs');
    var myChart = this.$echarts.init(chartDom);
    this.chartFlag = false;
    var option;
    option = {
      title: {},
      tooltip: {},
      animationDurationUpdate: 0,
      backgroundColor: '#FFFFFF',
      animationEasingUpdate: 'quinticInOut',
      color: ['#3FA7DC', '#2BC15D'],
      series: [
        {
          type: 'graph',
          layout: 'force',
          force: {
            repulsion: 200,
            gravity: 0.1,
            edgeLength: 250,
            dataZoom: {
              orient: 'horizontal'
            }
            //layoutAnimation:true
          },
          draggable: true,
          symbolSize: 80,
          roam: true,
          label: {
            show: true,
            width: 80,
            overflow: 'break',
            fontWeight: 14
          },
          edgeSymbol: ['circle', 'arrow'],
          edgeSymbolSize: [4, 10],
          edgeLabel: {
            fontSize: 20,
            normal: {
              show: true,
              formatter: function(links:any) {
                return links.data.relation;
              }
            }
          },
          data: this.companyArray,
          links: this.linksArray,
          lineStyle: {
            opacity: 0.9,
            width: 2,
            curveness: 0
          }
        }
      ]
    };
    myChart.setOption(option);
  }

}
</script>

<style scoped>
.guarTabCls {
  width: 100%;
}
.echarts-container-class {
  height: calc(100vh - 120px);
}
.no-data-class {
  width: 40%;
}
::v-deep .van-tab{
  font-size: 20px;
  line-height: 60px;
}
::v-deep .van-cell__title,
::v-deep .van-field__label {
  display: flex;
  align-items: center;
  width: 20%;
}
::v-deep .van-tabs--line .van-tabs__wrap {
  width: 30%;
  height: 60px;
}
::v-deep .van-tab--active {
  border-bottom: 3px solid #FF574C;
  font-weight: bold;
  color: #FF574C;
}
::v-deep .van-tabs__line {
  height: 0;
  background-color: white;
}
::v-deep .van-tabs__content {
  height: 100%;
  width: 100%;
}
</style>