链属

front-vue/src/views/system/company/chaingenus.vue

@@ -0,0 +1,466 @@
+<template>
+    <el-tabs v-model="activeName" @tab-click="handleClick" style="margin:2px">
+        <el-tab-pane label="基本信息" name="first">
+            <el-row>
+                <el-col :span="8"> <span>企业角色:</span>
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                        </el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="8">
+                    <span>所属行业:</span>
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                        </el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="8">
+                    <span>企业规模:
+                    </span>
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                        </el-option>
+                    </el-select>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="8" style="margin-top:2%">
+                    <span>机构性质:</span>
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                        </el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="8" style="margin-top:2%">
+                    邀请企业:
+                    <el-input v-model="enterprises " placeholder="请输入内容" style=" width:50%"></el-input>
+                </el-col>
+                <el-col :span="8" style="margin-top:2%">
+                    <span>客户经理：</span>
+                    <el-input v-model="manager " placeholder="请输入内容" style="width:50%"></el-input>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="8" style="margin-top:2%">
+                    <span>机构名称:</span>
+                    <el-input v-model="organization  " placeholder="请输入内容" style="width:50%"></el-input>
+                </el-col>
+                <el-col :span="8" style="margin-top:2%">
+                    <span>机构代码:</span>
+                    <el-input v-model="enterprises " placeholder="请输入内容" style="width:50%"></el-input>
+                </el-col>
+                <el-col :span="8" style="margin-top:2%">
+                    <div class="block">
+                        <span class="demonstration">证件注册日:</span>
+                        <el-date-picker v-model="value3" type="datetime" placeholder="选择日期时间" default-time="12:00:00">
+                        </el-date-picker>
+                    </div>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="16" style="margin-top:2%">
+                    <span class="demonstration">注册地址:</span>
+                    <el-input v-model="registered " placeholder="请输入内容" style="width:50%"></el-input>
+
+                </el-col>
+                <el-col :span="8" style="margin-top:2%">
+                    <div class="block">
+                        <span class="demonstration">证件到期日:</span>
+                        <el-date-picker v-model="value3" type="datetime" placeholder="选择日期时间" default-time="12:00:00">
+                        </el-date-picker>
+                    </div>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="16" style="margin-top:2%">
+                    <span class="demonstration">企业经营范围:</span>
+                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea" style="width:50%">
+                    </el-input>
+                </el-col>
+                <el-col :span="8" style="margin-top:2%">
+                    <span class="demonstration" style="line-">注册资本:</span>
+                    <el-input v-model="registered " placeholder="请输入内容" style="width:50%"></el-input>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="8" style="margin-top:2%">
+                    <span class="demonstration">法人姓名:</span>
+                    <el-input v-model="legal  " placeholder="请输入内容" style="width:50%"></el-input>
+                </el-col>
+                <el-col :span="8" style="margin-top:2%">
+                    <span class="demonstration">证件类型:</span>
+                    <el-input v-model="documentes " placeholder="请输入内容" style="width:50%"></el-input>
+                </el-col>
+                <el-col :span="8" style="margin-top:2%">
+                    <span class="demonstration">联系方式:</span>
+                    <el-input v-model="informat " placeholder="请输入内容" style="width:50%"></el-input>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="8" style="margin-top:2%">
+                    <span class="demonstration">证件号码:</span>
+                    <el-input v-model="fication " placeholder="请输入内容" style="width:50%"></el-input>
+                </el-col>
+                <el-col :span="8" style="margin-top:2%">
+                    <div class="block">
+                        <span class="demonstration">证件注册日::</span>
+                        <el-date-picker v-model="value3" type="datetime" placeholder="选择日期时间" default-time="12:00:00">
+                        </el-date-picker>
+                    </div>
+                </el-col>
+                <el-col :span="8" style="margin-top:2%">
+                    <div class="block">
+                        <span class="demonstration">证件到期日:</span>
+                        <el-date-picker v-model="value2" type="datetime" placeholder="选择日期时间" default-time="12:00:00">
+                        </el-date-picker>
+                    </div>
+                </el-col>
+            </el-row>
+        </el-tab-pane>
+        <el-tab-pane label="联系人信息" name="second">
+            <div><span style="color:#409EFF">▋</span> 经办人信息</div>
+            <el-row>
+                <el-col :span="8" style="margin-top:2%">
+
+                    姓名:
+                    <el-input v-model="fullname" placeholder="请输入内容" style=" width:50%"></el-input>
+                </el-col>
+                <el-col :span="8" style="margin-top:2%">
+                    移动电话:
+                    <el-input v-model="mobilephone " placeholder="请输入内容" style=" width:50%"></el-input>
+                </el-col>
+                <el-col :span="8" style="margin-top:2%">
+                    固定电话:
+                    <el-input v-model="fixedtelephone
+
+ " placeholder="请输入内容" style="width:50%"></el-input>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="8" style="margin-top:2%">
+                    邮箱:
+                    <el-input v-model="mailbox " placeholder="请输入内容" style=" width:50%"></el-input>
+                </el-col>
+            </el-row>
+            <div><span style="color:#409EFF">▋</span> 复核人信息</div>
+            <el-row>
+                <el-col :span="8" style="margin-top:2%">
+
+                    姓名:
+                    <el-input v-model="fullnamel" placeholder="请输入内容" style=" width:50%"></el-input>
+                </el-col>
+                <el-col :span="8" style="margin-top:2%">
+                    移动电话:
+                    <el-input v-model="mobilephonel " placeholder="请输入内容" style=" width:50%"></el-input>
+                </el-col>
+                <el-col :span="8" style="margin-top:2%">
+                    固定电话:
+                    <el-input v-model="fixedtelephonel" placeholder="请输入内容" style="width:50%"></el-input>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="8" style="margin-top:2%">
+                    邮箱:
+                    <el-input v-model="mailboxl " placeholder="请输入内容" style=" width:50%"></el-input>
+                </el-col>
+            </el-row>
+        </el-tab-pane>
+        <el-tab-pane label="发票信息" name="third">
+            <div><span style="color:#409EFF">▋</span> 复核人信息</div>
+            <el-row>
+                <el-col :span="8" style="margin-top:2%">
+
+                    单位名称:
+                    <el-input v-model="companynamel" placeholder="请输入内容" style=" width:50%"></el-input>
+                </el-col>
+                <el-col :span="8" style="margin-top:2%">
+                    税号:
+                    <el-input v-model="paragraph " placeholder="请输入内容" style=" width:50%"></el-input>
+                </el-col>
+                <el-col :span="8" style="margin-top:2%">
+                    单位地址:
+                    <el-input v-model="unitaddress" placeholder="请输入内容" style="width:50%"></el-input>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="8" style="margin-top:2%">
+
+                    电话号码:
+                    <el-input v-model="phonenumbera
+
+" placeholder="请输入内容" style=" width:50%"></el-input>
+                </el-col>
+                <el-col :span="8" style="margin-top:2%">
+                    开户银行:
+                    <el-input v-model="deposit " placeholder="请输入内容" style=" width:50%"></el-input>
+                </el-col>
+                <el-col :span="8" style="margin-top:2%">
+                    开户账号:
+                    <el-input v-model="account" placeholder="请输入内容" style="width:50%"></el-input>
+                </el-col>
+            </el-row>
+        </el-tab-pane>
+        <el-tab-pane label="地址信息" name="fourth">
+            <div><span style="color:#409EFF">▋</span> 地址信息</div>
+            <el-row>
+                <el-col :span="24">
+                    <span>
+                        企业邮寄地址:</span>
+                    <el-input v-model="address" placeholder="请输入内容" style="width:60%"></el-input>
+
+                </el-col>
+            </el-row>
+        </el-tab-pane>
+        <el-tab-pane label="实名信息" name="sixth">
+            <div><span style="color:#409EFF">▋</span> 企业四要素</div>
+            <el-row>
+                <el-col :span="8" style="margin-top:2%">
+
+                    机构名称:
+                    <el-input v-model="definition" placeholder="请输入内容" style=" width:50%"></el-input>
+                </el-col>
+                <el-col :span="8" style="margin-top:2%">
+                    机构代码:
+                    <el-input v-model="orgcode " placeholder="请输入内容" style=" width:50%"></el-input>
+                </el-col>
+                <el-col :span="8" style="margin-top:2%">
+                    法人:
+                    <el-input v-model="Legall" placeholder="请输入内容" style="width:50%"></el-input>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="8" style="margin-top:2%">
+                    法人身份证:
+
+                    <el-input v-model="Corporatel  " placeholder="请输入内容" style=" width:50%"></el-input>
+                </el-col>
+                <el-col :span="8" style="margin-top:2%">验证结果:
+                    <el-checkbox v-model="checked">通过</el-checkbox>
+                </el-col>
+            </el-row>
+        </el-tab-pane>
+        <el-tab-pane label="链属关系" name="Section">
+           <div style="width: calc(100% - 2px);height:calc(100vh - 50px);">
+      <SeeksRelationGraph ref="seeksRelationGraph" :options="userGraphOptions" />
+    </div>
+        </el-tab-pane>
+        <el-tab-pane label="附件信息" name="eighth">
+            <el-container>
+                <el-aside width="200px">
+                    <div>
+                        营业执照:
+                    </div>
+                    <div>法人身份证:</div>
+                    <div>经办人证件:</div>
+                </el-aside>
+                <el-main>
+                    <div>法人授权书:</div><a href="#" style="color:red">菜鸟教程</a>
+                    <div>数字证书授权与承诺书：</div><a href="#" style="color:red">菜鸟教程</a>
+                    <div>合作协议：</div><a href="#" style="color:red">菜鸟教程</a>
+                    <div>CFCA企业认证证书：</div><a href="#" style="color:red">菜鸟教程</a>
+                    <div>CFCA电子签章样式：</div><a href="#" style="color:red">菜鸟教程</a>
+                </el-main>
+            </el-container>
+
+        </el-tab-pane>
+    </el-tabs>
+</template>
+<script>
+import SeeksRelationGraph from 'relation-graph'
+export default {
+  name: 'SeeksRelationGraphDemo',
+  components: { SeeksRelationGraph },
+    data() {
+        return {
+            g_loading: true,
+      userGraphOptions: {
+        'backgrounImage': '',
+        'backgrounImageNoRepeat': true,
+        'layouts': [
+          {
+            'label': '手工',
+            'layoutName': 'fixed',
+            'layoutClassName': 'seeks-layout-fixed',
+            'defaultJunctionPoint': 'border',
+            'defaultNodeShape': 0,
+            'defaultLineShape': 1
+          }
+        ],
+        'defaultNodeBorderWidth': 0,
+        'defaultNodeShape': 1,
+        'allowShowMiniNameFilter': false,
+        'allowShowMiniToolBar': false,
+        'defaultJunctionPoint': 'lr',
+        'defaultLineShape': 2
+      },
+            activeName: "first",
+            enterprises: "",
+            organization: "",
+            manager: "",
+            enterprises: "",
+            registered: "",
+            textarea: "",
+            legal: "",
+            ontact: "",
+            documentes: "",
+            informat: "",
+            fication: "",
+            fullname: "",
+            mobilephone: "",
+            fixedtelephone: "",
+            mailbox: "",
+            fullnamel: "",
+            mobilephonel: "",
+            fixedtelephonel: "",
+            mailboxl: "",
+            address: "",
+            companynamel: "",
+            paragraph: "",
+            unitaddress: "",
+            phonenumbera: "",
+            deposit: "",
+            account: "",
+            checked: true,
+            definition: "",
+            orgcode: "",
+            Legall: "",
+            Corporatel: "",
+            pickerOptions: {
+                shortcuts: [
+                    {
+                        text: "今天",
+                        onClick(picker) {
+                            picker.$emit("pick", new Date());
+                        },
+                    },
+                    {
+                        text: "昨天",
+                        onClick(picker) {
+                            const date = new Date();
+                            date.setTime(date.getTime() - 3600 * 1000 * 24);
+                            picker.$emit("pick", date);
+                        },
+                    },
+                    {
+                        text: "一周前",
+                        onClick(picker) {
+                            const date = new Date();
+                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+                            picker.$emit("pick", date);
+                        },
+                    },
+                ],
+            },
+            value1: "",
+            value2: "",
+            value3: "",
+        };
+    },
+    created() {
+  },
+  mounted() {
+    this.setGraphData()
+  },
+    methods: {
+    setGraphData() {
+      var _orign_data = {
+        entname: '中数智汇数据科技股份有限公司',
+        invs: [
+          { id: 'inv1', text: '北京某个公司科技有限公司', desc: '40%' },
+          { id: 'inv2', text: '张蜈支', desc: '30%' },
+          { id: 'inv3', text: '如花', desc: '10%' },
+          { id: 'inv4', text: '路人甲', desc: '10%' },
+          { id: 'inv5', text: '路人乙', desc: '10%' }
+        ],
+        persons: [
+          { id: 'person1', text: '张蜈支', desc: '董事长' },
+          { id: 'person2', text: '包奥曼', desc: '总经理' },
+          { id: 'person3', text: '路人甲', desc: '监事' },
+          { id: 'person4', text: '路人乙', desc: '董事' }
+        ],
+        asInvs: [
+          { id: 'asinv1', text: '北京超级大橘科技有限公司', desc: '80%' },
+          { id: 'asinv2', text: '北京超级大蚂蚁科技有限公司', desc: '70%' },
+          { id: 'asinv3', text: '北京超级大米粒儿科技有限公司', desc: '20%' }
+        ],
+        branchs: [
+          { id: 'branch1', text: '某个公司（北京）科技股份有限公司', desc: '80%' },
+          { id: 'branch2', text: '某个公司（天津）科技股份有限公司', desc: '70%' },
+          { id: 'branch4', text: '某个公司（成都）科技股份有限公司', desc: '70%' },
+          { id: 'branch5', text: '某个公司（武汉）科技股份有限公司', desc: '20%' }
+        ]
+      }
+      var _graphSetting = this.$refs.seeksRelationGraph.graphSetting
+      this.$refs.seeksRelationGraph.graphSetting.defaultLineShape = 1
+      // 手工设置节点的坐标
+      const _center = {
+        x: (_graphSetting.viewSize.width) / 2 - _graphSetting.canvasOffset.x,
+        y: (_graphSetting.viewSize.height) / 2 - _graphSetting.canvasOffset.y
+      }
+      var graphData = {
+        rootId: 'root',
+        nodes: [],
+        links: []
+      }
+      // 添加根节点和虚拟节点
+      var rootNode = { id: graphData.rootId, name: _orign_data.entname, styleClass: 'c-g-center', color: '#A4C1FF', width: 250, height: 50, x: _center.x - 125, y: _center.y - 25 }
+      var invRootNode = { id: 'invRoot', name: '股东', styleClass: 'c-g-group-node', color: '#FFC5A6', width: 100, height: 50 }
+      var personRootNode = { id: 'personRoot', name: '高管', styleClass: 'c-g-group-node', color: '#B9FFA7', width: 100, height: 50 }
+      var asinvRootNode = { id: 'asinvRoot', name: '对外投资', styleClass: 'c-g-group-node', color: '#FFBEC1', width: 100, height: 50 }
+      var branchRootNode = { id: 'branchRoot', name: '分支机构', styleClass: 'c-g-group-node', color: '#FFA1F8', width: 100, height: 50 }
+      invRootNode.x = _center.x - 200 - invRootNode.width
+      invRootNode.y = _center.y - 130
+      personRootNode.x = _center.x - 200 - personRootNode.width
+      personRootNode.y = _center.y + 90
+      asinvRootNode.x = _center.x + 200
+      asinvRootNode.y = _center.y - 130
+      branchRootNode.x = _center.x + 200
+      branchRootNode.y = _center.y + 90
+      // 添加节点数据到graphData
+      graphData.nodes.push(rootNode)
+      graphData.nodes.push(invRootNode)
+      graphData.nodes.push(personRootNode)
+      graphData.nodes.push(asinvRootNode)
+      graphData.nodes.push(branchRootNode)
+      // 添加根节点和虚拟节点之间的关系，并将关系数据放入graphData
+      graphData.links.push({ from: rootNode.id, to: invRootNode.id, styleClass: 'c-g-l-group', color: '#C7E9FF', lineShape: 2 })
+      graphData.links.push({ from: rootNode.id, to: personRootNode.id, styleClass: 'c-g-l-group', color: '#C7E9FF', lineShape: 2 })
+      graphData.links.push({ from: rootNode.id, to: asinvRootNode.id, styleClass: 'c-g-l-group', color: '#C7E9FF', lineShape: 2 })
+      graphData.links.push({ from: rootNode.id, to: branchRootNode.id, styleClass: 'c-g-l-group', color: '#C7E9FF', lineShape: 2 })
+      // 将股东加入虚拟节点"股东"
+      _orign_data.invs.forEach((thisNode, _index) => {
+        thisNode.width = 200
+        thisNode.x = invRootNode.x - 300 - thisNode.width
+        thisNode.y = invRootNode.y + _index * 30 * -1 + 30
+        graphData.nodes.push(thisNode)
+        graphData.links.push({ from: invRootNode.id, to: thisNode.id, text: thisNode.desc, color: '#FFC5A6', arrow: 'none', lineShape: 4 })
+      })
+      // 将高管加入虚拟节点"高管"
+      _orign_data.persons.forEach((thisNode, _index) => {
+        thisNode.width = 200
+        thisNode.x = personRootNode.x - 200 - thisNode.width
+        thisNode.y = personRootNode.y + _index * 30
+        graphData.nodes.push(thisNode)
+        graphData.links.push({ from: personRootNode.id, to: thisNode.id, text: thisNode.desc, color: '#B9FFA7', arrow: 'none', lineShape: 4 })
+      })
+      // 将对外投资企业加入虚拟节点"对外投资"
+      _orign_data.asInvs.forEach((thisNode, _index) => {
+        thisNode.x = asinvRootNode.x + 200
+        thisNode.y = asinvRootNode.y + _index * 30 * -1 + 30
+        graphData.nodes.push(thisNode)
+        graphData.links.push({ from: asinvRootNode.id, to: thisNode.id, text: thisNode.desc, color: '#FFBEC1', lineShape: 4 })
+      })
+      // 将分支机构加入虚拟节点"分支机构东"
+      _orign_data.branchs.forEach((thisNode, _index) => {
+        thisNode.x = branchRootNode.x + 200
+        thisNode.y = branchRootNode.y + _index * 30
+        graphData.nodes.push(thisNode)
+        graphData.links.push({ from: branchRootNode.id, to: thisNode.id, text: thisNode.desc, color: '#FFA1F8', lineShape: 4 })
+      })
+      this.$refs.seeksRelationGraph.setJsonData(graphData, (seeksRGGraph) => {
+      })
+    }
+  }
+};
+</script>