企业股权关系图

public/icon/company/普通企业节点2.svg

+<svg viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="52.000000" height="52.000000" fill="none" customFrame="#000000">
+	<defs>
+		<g id="pixso_custom_effect_1">
+			<effect x="0.000000" y="0.000000" visibility="visible" fill="rgb(0,0,0)" fill-opacity="0.100000001" effectType="dropShadow" stdDeviation="8" radius="0" />
+		</g>
+		<filter id="filter_1" width="52.000000" height="52.000000" x="0.000000" y="0.000000" filterUnits="userSpaceOnUse" customEffect="url(#pixso_custom_effect_1)" color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix" />
+			<feOffset dx="0.000000" dy="0.000000" in="SourceAlpha" />
+			<feGaussianBlur stdDeviation="2.66666675" />
+			<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0 " />
+			<feBlend result="effect_dropShadow_1" in2="BackgroundImageFix" mode="normal" />
+			<feBlend result="shape" in="SourceGraphic" in2="effect_dropShadow_1" mode="normal" />
+		</filter>
+		<clipPath id="clipPath_1">
+			<rect width="16.000000" height="16.000000" x="18.000000" y="18.000000" fill="rgb(255,255,255)" />
+		</clipPath>
+	</defs>
+	<rect id="普通企业节点" width="36.000000" height="36.000000" x="8.000000" y="8.000000" />
+	<g filter="url(#filter_1)">
+		<circle id="椭圆 25" cx="26" cy="26" r="18" fill="rgb(255,255,255)" />
+		<circle id="椭圆 25" cx="26" cy="26" r="17.5" stroke="rgb(230,231,232)" stroke-width="1.000000" />
+	</g>
+	<g id="企业 " clip-path="url(#clipPath_1)" customFrame="url(#clipPath_1)">
+		<rect id="企业 " width="16.000000" height="16.000000" x="18.000000" y="18.000000" />
+		<path id="矢量 370" d="M33.4667 31.9231L32.9333 31.9231L32.9333 24.3846C32.9333 23.2 31.9733 22.2308 30.8 22.2308L27.6 22.2308L27.6 21.1538C27.6 19.9692 26.64 19 25.4667 19L21.2 19C20.0267 19 19.0667 19.9692 19.0667 21.1538L19.0667 31.9231L18.5333 31.9231C18.2347 31.9231 18 32.16 18 32.4615C18 32.7631 18.2347 33 18.5333 33L33.4667 33C33.7653 33 34 32.7631 34 32.4615C34 32.16 33.7653 31.9231 33.4667 31.9231ZM26.5333 22.2308L26.5333 23.3077L26.5333 31.9231L20.1333 31.9231L20.1333 21.1538C20.1333 20.5615 20.6133 20.0769 21.2 20.0769L25.4667 20.0769C26.0533 20.0769 26.5333 20.5615 26.5333 21.1538L26.5333 22.2308ZM31.8667 31.9231L27.6 31.9231L27.6 23.3077L30.8 23.3077C31.3867 23.3077 31.8667 23.7923 31.8667 24.3846L31.8667 31.9231ZM24.9333 22.2308L21.7333 22.2308C21.4347 22.2308 21.2 22.4677 21.2 22.7692C21.2 23.0708 21.4347 23.3077 21.7333 23.3077L24.9333 23.3077C25.232 23.3077 25.4667 23.0708 25.4667 22.7692C25.4667 22.4677 25.232 22.2308 24.9333 22.2308ZM24.9333 25.4615L21.7333 25.4615C21.4347 25.4615 21.2 25.6985 21.2 26C21.2 26.3015 21.4347 26.5385 21.7333 26.5385L24.9333 26.5385C25.232 26.5385 25.4667 26.3015 25.4667 26C25.4667 25.6985 25.232 25.4615 24.9333 25.4615ZM24.9333 28.6923L21.7333 28.6923C21.4347 28.6923 21.2 28.9292 21.2 29.2308C21.2 29.5323 21.4347 29.7692 21.7333 29.7692L24.9333 29.7692C25.232 29.7692 25.4667 29.5323 25.4667 29.2308C25.4667 28.9292 25.232 28.6923 24.9333 28.6923ZM30.2667 25.4615L29.2 25.4615C28.9013 25.4615 28.6667 25.6985 28.6667 26C28.6667 26.3015 28.9013 26.5385 29.2 26.5385L30.2667 26.5385C30.5653 26.5385 30.8 26.3015 30.8 26C30.8 25.6985 30.5653 25.4615 30.2667 25.4615ZM30.2667 28.6923L29.2 28.6923C28.9013 28.6923 28.6667 28.9292 28.6667 29.2308C28.6667 29.5323 28.9013 29.7692 29.2 29.7692L30.2667 29.7692C30.5653 29.7692 30.8 29.5323 30.8 29.2308C30.8 28.9292 30.5653 28.6923 30.2667 28.6923Z" fill="rgb(59,65,75)" fill-rule="nonzero" />
+	</g>
+</svg>

src/styles/container.scss

@@ -2,7 +2,7 @@
 
 /***通用页面***/
 .common-page {
-    margin: 16px auto;
-    width: 1600px;
+    padding: 16px 160px;
+    // width: 1600px;
     align-items: center;
 }
\ No newline at end of file

src/styles/tabs.scss

@@ -55,14 +55,13 @@
 
     position: relative;
     overflow: visible;
-    transform: translateZ(0);
     /* 双重保障 */
 
     /* 创建新的渲染层 */
     /* 创建新的层叠上下文 */
     .el-tabs__header {
 
-        // position: absolute;
+        position: relative;
         left: 0;
         top: 0;
         z-index: 999;

src/views/companyPages2/assets/images/机械设备.svg

+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="机械设备 1" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="矢量 1620" d="M11.6932 12.3121L9.37157 12.3121C9.37514 12.1495 9.33467 11.9889 9.25445 11.8474L5.77115 5.86676C5.44431 6.35635 4.98227 6.74044 4.44121 6.97234C3.90015 7.20425 3.30337 7.27397 2.72342 7.17305L5.71648 12.3118L3.62339 12.3118C3.4668 12.312 3.31301 12.3533 3.17743 12.4317C3.04185 12.51 2.92925 12.6226 2.85091 12.7582C2.77257 12.8938 2.73124 13.0475 2.73107 13.2041L2.73107 14.1023C2.73124 14.2589 2.77257 14.4127 2.85091 14.5483C2.92925 14.6839 3.04185 14.7965 3.17743 14.8748C3.31301 14.9531 3.4668 14.9945 3.62339 14.9946L11.6932 14.9946C11.8498 14.9944 12.0035 14.9531 12.1391 14.8748C12.2747 14.7964 12.3873 14.6838 12.4656 14.5483C12.544 14.4127 12.5853 14.2589 12.5855 14.1023L12.5855 13.2044C12.5855 13.0478 12.5443 12.8939 12.466 12.7582C12.3877 12.6225 12.2751 12.5099 12.1394 12.4316C12.0037 12.3532 11.8498 12.312 11.6932 12.3121L11.6932 12.3121ZM3.22705 1.96949C2.79606 1.96946 2.37474 2.09724 2.01638 2.33667C1.65801 2.5761 1.37869 2.91642 1.21375 3.3146C1.0488 3.71277 1.00564 4.15092 1.08972 4.57363C1.17379 4.99634 1.38133 5.38462 1.68608 5.68938C1.99084 5.99413 2.37912 6.20167 2.80183 6.28574C3.22454 6.36982 3.66269 6.32665 4.06086 6.16171C4.45904 5.99677 4.79936 5.71745 5.03879 5.35908C5.27822 5.00072 5.406 4.5794 5.40597 4.14841C5.4058 3.76598 5.30503 3.39032 5.11376 3.05915C4.9225 2.72798 4.64748 2.45296 4.31631 2.2617C3.98514 2.07043 3.60948 1.96966 3.22705 1.96949ZM3.22705 4.92756C3.07297 4.92756 2.92236 4.88188 2.79425 4.79628C2.66614 4.71068 2.56629 4.58901 2.50733 4.44666C2.44837 4.30432 2.43294 4.14768 2.463 3.99657C2.49306 3.84546 2.56725 3.70665 2.6762 3.5977C2.78515 3.48875 2.92395 3.41456 3.07507 3.3845C3.22618 3.35444 3.38282 3.36987 3.52516 3.42883C3.66751 3.48779 3.78918 3.58764 3.87478 3.71575C3.96038 3.84386 4.00606 3.99447 4.00606 4.14855C4.00587 4.28523 3.96977 4.41946 3.90136 4.5378C3.83296 4.65613 3.73466 4.75441 3.61631 4.8228C3.49797 4.89118 3.36373 4.92726 3.22705 4.92743L3.22705 4.92756ZM14.3101 4.88274L11.8948 6.26679L10.8052 4.89435L10.8052 3.39673L11.8948 2.02416L14.3101 3.40848C14.3917 3.45427 14.4856 3.47325 14.5785 3.46275C14.6715 3.45226 14.7588 3.4128 14.8281 3.34998C14.8974 3.28715 14.9452 3.20413 14.9647 3.11266C14.9843 3.02118 14.9745 2.92588 14.937 2.84022C14.8994 2.75457 14.8358 2.6829 14.7553 2.63534L12.0081 1.05968C11.9467 1.02425 11.8778 1.00397 11.807 1.00053C11.7362 0.997082 11.6656 1.01057 11.6011 1.03988C11.5366 1.06918 11.4799 1.11345 11.436 1.16902L10.362 2.52013L9.18871 2.52013C9.00972 2.52002 8.83488 2.57403 8.68714 2.67508C8.53941 2.77613 8.42568 2.9195 8.3609 3.08635L6.109 3.08635C6.23779 3.43142 6.30261 3.79707 6.30028 4.16539C6.29794 4.5337 6.22849 4.8985 6.09533 5.2419L8.36145 5.2419C8.42665 5.40889 8.54076 5.5523 8.68883 5.65336C8.8369 5.75441 9.01204 5.8084 9.19131 5.80826L10.3914 5.80826L11.436 7.1222C11.4778 7.17467 11.531 7.21702 11.5915 7.2461C11.652 7.27518 11.7183 7.29024 11.7854 7.29017C11.8634 7.28993 11.94 7.2698 12.0081 7.23168L14.7551 5.65588C14.8239 5.61728 14.8812 5.56114 14.9212 5.49319C14.9612 5.42524 14.9825 5.34789 14.9829 5.26904C14.9832 5.19018 14.9627 5.11263 14.9234 5.0443C14.884 4.97596 14.8273 4.91927 14.7589 4.88001C14.6905 4.84075 14.6129 4.82032 14.5341 4.82079C14.4552 4.82127 14.3779 4.84265 14.31 4.88274L14.3101 4.88274Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
+</svg>

src/views/companyPages2/assets/images/资金管理.svg

+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="1-资金管理 1" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="矢量 1620" d="M11.7086 10.5216C11.9447 10.5216 12.1365 10.7062 12.1365 10.9337C12.1365 11.1612 11.9447 11.3457 11.7086 11.3457L10.6554 11.3457L10.6554 12.0432C10.6551 12.2707 10.4632 12.4552 10.2275 12.4552C9.99168 12.4552 9.7995 12.2707 9.7995 12.0432L9.7995 11.3457L8.74632 11.3457C8.50991 11.3457 8.31836 11.1612 8.31836 10.9337C8.31836 10.7062 8.50991 10.5216 8.746 10.5216L9.7995 10.5216L9.7995 9.76022L8.74632 9.76022C8.50991 9.76022 8.31836 9.57568 8.31836 9.34818C8.31836 9.12067 8.50991 8.93613 8.746 8.93613L9.28818 8.93613L8.48477 8.04681C8.43563 7.99294 8.40209 7.9267 8.38774 7.85521C8.3734 7.78372 8.37879 7.70968 8.40334 7.64102C8.42789 7.57236 8.47067 7.51168 8.52709 7.46549C8.58441 7.41784 8.65292 7.38556 8.72617 7.3717C8.79941 7.35785 8.87498 7.36287 8.94575 7.38629C9.01652 7.40971 9.08016 7.45077 9.13068 7.50558L10.2275 8.7204L11.3239 7.5059C11.3744 7.45108 11.4381 7.41003 11.5088 7.38661C11.5796 7.36319 11.6552 7.35817 11.7284 7.37202C11.8017 7.38588 11.8702 7.41816 11.9275 7.46581C11.984 7.51193 12.0269 7.57259 12.0515 7.64127C12.0761 7.70995 12.0815 7.78404 12.0671 7.85556C12.0527 7.92708 12.0191 7.99331 11.9698 8.04713L11.1667 8.93645L11.7086 8.93645C11.9447 8.93645 12.1365 9.12099 12.1365 9.34849C12.1365 9.57599 11.9447 9.76054 11.7086 9.76054L10.6554 9.76054L10.6554 10.5216L11.7086 10.5216L11.7086 10.5216ZM10.2275 5.45522C7.76695 5.45522 5.77291 7.44958 5.77291 9.90977C5.77291 12.3703 7.76695 14.3643 10.2275 14.3643C12.6876 14.3643 14.682 12.3703 14.682 9.90977C14.682 7.44958 12.6876 5.45522 10.2275 5.45522ZM6.01886 12.7734L2.2729 12.7734L2.2729 10.8643L4.50018 10.8643C4.60094 10.8643 4.69911 10.8323 4.78061 10.7731C4.86212 10.7138 4.92278 10.6303 4.95391 10.5345C4.98504 10.4387 4.98504 10.3354 4.95391 10.2396C4.92278 10.1438 4.86211 10.0602 4.78061 10.001C4.69911 9.94174 4.60094 9.90981 4.50018 9.90977L2.2729 9.90977L2.2729 8.15977L5.13654 8.15977C5.2373 8.15972 5.33547 8.12779 5.41698 8.06854C5.49848 8.0093 5.55914 7.92578 5.59027 7.82994C5.6214 7.73411 5.6214 7.63088 5.59027 7.53504C5.55914 7.43921 5.49848 7.35569 5.41698 7.29644C5.33547 7.23719 5.2373 7.20526 5.13654 7.20522L2.2729 7.20522L2.2729 5.7734L7.26709 5.7734C7.95348 5.28046 8.7525 4.96748 9.59109 4.86308L9.59109 2.27308C9.59109 2.16138 9.56168 2.05164 9.50583 1.9549C9.44998 1.85816 9.36965 1.77783 9.27291 1.72198C9.17617 1.66612 9.06643 1.63672 8.95472 1.63672L1.95472 1.63672C1.84302 1.63672 1.73328 1.66612 1.63654 1.72198C1.5398 1.77783 1.45947 1.85816 1.40362 1.9549C1.34776 2.05164 1.31836 2.16138 1.31836 2.27308L1.31836 13.0913C1.31836 13.203 1.34776 13.3127 1.40362 13.4094C1.45947 13.5062 1.5398 13.5865 1.63654 13.6424C1.73328 13.6982 1.84302 13.7276 1.95472 13.7276L6.86777 13.7276C6.54602 13.4462 6.26082 13.1255 6.01886 12.7731L6.01886 12.7734Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
+</svg>

src/views/companyPages2/component/CapitalScale.vue

@@ -101,7 +101,7 @@ watch(() => props.enterpriseInfo, (newVal, oldVal) => {
 .item-value-img {
     width: 8px;
     height: 6px;
-    background-image: url(../images/Regular_polygon_11097_225086.png);
+    background-image: url(../assets/images/Regular_polygon_11097_225086.png);
     background-size: 100% 100%;
     background-repeat: no-repeat;
     position: relative;

src/views/companyPages2/component/OperatingPages/SanctionsSituation.vue

 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, watch } from 'vue';
-import { ElRadioGroup, ElRadioButton } from 'element-plus';
+import { ElRadioGroup, ElRadioButton, ElSpace } from 'element-plus';
 import * as echarts from 'echarts';
 import { getSanctionList } from '@/api/companyPages';
 import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue';
@@ -263,7 +263,9 @@ function handleStudyTypesChange() {
     <analysis-box title="被制裁时间轴">
         <template v-if="lineTypes.length > 1" v-slot:header-btn>
             <el-radio-group class="radio-group-as-gap-btn" v-model="lineType" @change="handleStudyTypesChange">
+                <el-space>
                     <el-radio-button v-for="item in lineTypes" :key="item" :label="item">{{ item }}</el-radio-button>
+                </el-space>
             </el-radio-group>
         </template>
         <div class="flex-display content-box">

src/views/companyPages2/component/SupplyChain/GraphChart.vue

@@ -3,15 +3,29 @@ import { ref, onMounted, onUnmounted, watch } from 'vue';
 import * as echarts from 'echarts';
 
 
+export interface GraphNode {
+    id: string
+    name: string
+    type: string
+    x: number
+    y: number
+}
+
+export interface GraphLink {
+    source: string
+    target: string
+    type: string
+}
+
 // 定义组件属性
 const props = defineProps({
 
     nodes: {
-        type: Array,
+        type: Array<GraphNode>,
         default: () => []
     }
     , links: {
-        type: Array,
+        type: Array<GraphLink>,
         default: () => []
     }
 });
@@ -82,14 +96,16 @@ function nodeTopBottomLayout(nodes: Array<any>) {
 }
 // 辅助函数：更新图表数据
 function updateCharts() {
-
-
     // 销毁现有图表实例
     if (myChart) {
         myChart.dispose()
     }
     myChart = echarts.init(chartDom.value)
 
+    const ys = props.nodes.map((item) => item.y)
+    const minY = Math.min(...ys)
+    const maxY = Math.max(...ys)
+
     myChart.setOption({
 
         grid: {
@@ -103,8 +119,8 @@ function updateCharts() {
             show: false
         },
         // 优化渲染性能
-        progressive: 500,
-        progressiveThreshold: 300,
+        // progressive: 500,
+        // progressiveThreshold: 300,
         animation: false,
         animationDuration: 1000,
         animationEasing: 'cubicOut',
@@ -118,7 +134,7 @@ function updateCharts() {
             layout: 'none',
             data: props.nodes,
             links: props.links,
-            center: [0, 10],
+            center: [0, (minY + maxY) / 2 + 10],
             nodeScaleRatio: 0,
             // categories: categories,
             roam: true,
@@ -129,9 +145,9 @@ function updateCharts() {
                 formatter: '{b}',
                 fontSize: 14,
                 fontWeight: 'bold',
+                color: 'rgb(5, 95, 194)',
                 padding: [4, 6],
                 borderRadius: 4,
-                color: 'rgb(5 95 194)',
                 // 限制宽度并自动换行
                 width: 120, // 限制标签宽度
                 overflow: 'break', // 超出宽度自动换行

src/views/companyPages2/component/SupplyChain/index.vue

@@ -2,13 +2,16 @@
 import '@/styles/common.scss';
 import { getSupplyAreaList, getSupplyCountryList, getSupplyList } from "@/api/companyPages/index.js";
 import { onMounted, ref } from 'vue';
-import { ElCheckbox, ElCheckboxGroup, ElRow, ElCol, ElMessage } from 'element-plus';
+import { ElCheckbox, ElCheckboxGroup, ElRow, ElCol, ElMessage, ElRadioGroup, ElRadioButton } from 'element-plus';
 import ColorPrefixTitle from '@/components/base/texts/ColorPrefixTitle.vue';
 import GraphChart from './GraphChart.vue'
 import { forEach } from 'lodash';
 import AiTipPane from '@/components/base/panes/AiTipPane.vue';
 import { getRuleOrg } from '@/api/ruleRestriction';
 const CompanyImg = "/icon/company/普通企业节点.svg"
+const CompanyImg2 = "/icon/company/普通企业节点2.svg"
+
+import { getSingleSanctionEntityEquity } from '@/api/exportControlV2.0';
 
 // 定义组件属性
 const props = defineProps({
@@ -25,9 +28,15 @@ const supplyTypeList = [{
 }, {
     name: '下游', id: 'customer'
 }];
+const dataTypeList = ref([{
+    name: '供应链', id: 'supply',
+}, {
+    name: '股权', id: 'equity',
+}])
 const selectedSupplyAreas = ref([]);
 const selectedSupplyCountries = ref([]);
 const selectedSupplyTypes = ref([]);
+const selectedDataType = ref('supply')
 
 const nodes = ref([])
 const links = ref([])
@@ -35,8 +44,7 @@ const links = ref([])
 
 onMounted(async () => {
     await initData()
-    await handleOptionsChnage()
-    await getRuleOrg({ orgId: props.enterpriseInfo.id })
+    await updateData()
 })
 
 async function initData() {
@@ -45,7 +53,16 @@ async function initData() {
     const { data: countryData } = await getSupplyCountryList(props.enterpriseInfo.id);
     supplyCountryList.value = countryData ?? [];
 }
-async function handleOptionsChnage() {
+
+async function updateData() {
+    if (selectedDataType.value === 'supply') {
+        await updateDataSupply()
+    } else if (selectedDataType.value === 'equity') {
+        await updateDataEquity()
+    }
+}
+
+async function updateDataSupply() {
     const params = {
         arealist: selectedSupplyAreas.value ? selectedSupplyAreas.value.join(",") : null,
         countrylist: selectedSupplyCountries.value ? selectedSupplyCountries.value.join(",") : null,
@@ -66,28 +83,11 @@ async function handleOptionsChnage() {
 
 
     // 创建nodes数组
-    nodes.value = Array.from(companyMap).map(([orgId, item]) => ({
-        id: orgId,
-        name: item.name,
-        type: item.type,
-        symbolSize: 50,
-        symbol: `image://${CompanyImg}` // 假设CompanyImg是一个图片路径变量
-    }));
+    nodes.value = Array.from(companyMap).map(([orgId, item]) => (createNode(orgId, item.name, item.type, false)));
 
     const linksData = []
     forEach(data, item => {
-        const link = {
-            source: item.orgId,
-            target: item.otherOrgId,
-            label: {
-                show: true,
-                formatter: '供应商',
-                color: 'rgba(137, 193, 255, 1)',
-                backgroundColor: 'rgba(137, 193, 255, 0.2)',
-                padding: [4, 4],
-                borderRadius: 10
-            },
-        }
+        const link = createLink(item.orgId, item.otherOrgId, '供应商', false)
         if (item.type === 'from') {
             link.source = item.otherOrgId
             link.target = item.orgId
@@ -98,6 +98,68 @@ async function handleOptionsChnage() {
     // 创建links数组
     links.value = linksData
 }
+function createNode(orgId: string, orgName: string, type: string, isSanctioned: boolean) {
+    return {
+        id: orgId,
+        name: orgName,
+        type: type,
+        symbolSize: 50,
+        symbol: `image://${isSanctioned ? CompanyImg2 : CompanyImg}`,
+        isSanctioned
+    }
+}
+function createLink(source: string, target: string, formatter: string, isSanctioned: boolean) {
+    return {
+        source: source,
+        target: target,
+        label: {
+            show: true,
+            formatter: formatter,
+            color: isSanctioned ? 'rgba(255, 102, 102, 1)' : 'rgba(137, 193, 255, 1)',
+            backgroundColor: isSanctioned ? 'rgba(255, 102, 102, 0.2)' : 'rgba(137, 193, 255, 0.2)',
+            padding: [4, 4],
+            borderRadius: 10
+        },
+    }
+}
+
+async function updateDataEquity() {
+    const { data } = await getSingleSanctionEntityEquity({ orgId: props.enterpriseInfo.id, rule: true })
+    if (!data) {
+        ElMessage.error('获取股权数据失败')
+        return
+    }
+    const cnode = createNode(data.orgId, data.orgName, "to", false)
+    const linksData = []
+    const nodesData = [cnode]
+    const { parentOrgList, childrenOrgList } = data
+
+    childrenOrgList.forEach((item, i) => {
+        if (!item.id) item.id = i
+        nodesData.push(createNode(item.id, item.name, "to", item.isSanctioned))
+        linksData.push(createLink(cnode.id, item.id, item.description, item.isSanctioned))
+    })
+
+    parentOrgList.forEach((item, i) => {
+        if (!item.id) item.id = i
+        nodesData.push(createNode(item.id, item.name, "from", item.isSanctioned))
+        linksData.push(createLink(item.id, cnode.id, item.description, item.isSanctioned))
+    })
+    nodes.value = nodesData
+    links.value = linksData
+
+    console.log(nodesData, linksData)
+}
+
+async function handleOptionsChnage() {
+
+    await updateData()
+}
+
+async function handleDataTypeChange() {
+    await updateData()
+}
+
 </script>
 
 <template>
@@ -130,6 +192,10 @@ async function handleOptionsChnage() {
         </div>
         <div class="background-as-card chart-box flex-fill">
             <graph-chart :nodes="nodes" :links="links" />
+            <el-radio-group v-model="selectedDataType" class="data-type-group" @change="handleDataTypeChange">
+                <el-radio-button v-for="item in dataTypeList" :label="item.id" :value="item.id">
+                    {{ item.name }} </el-radio-button>
+            </el-radio-group>
             <ai-tip-pane v-if="enterpriseInfo.id === '914403001922038216'">
                 华为构建了覆盖全球的复杂供应链网络，以自身为核心，辐射芯片、显示、摄像头等关键领域。其供应链深度扎根中国，同时整合美国高通、韩国三星、日本索尼等国际顶尖供应商，形成多元化供应格局。面对外部技术封锁，华为通过扶持海思等子公司强化垂直整合，并积极拓展本土替代资源，在保持技术领先的同时增强供应链韧性，展现出卓越的全球资源调配与风险管控能力。
             </ai-tip-pane>
@@ -157,4 +223,22 @@ async function handleOptionsChnage() {
     padding: 0px 25px;
     margin-bottom: 20px;
 }
+
+.data-type-group {
+    padding: 0px 25px;
+    margin-bottom: 20px;
+    position: absolute;
+    top: 16px;
+
+    svg {
+        width: 24px;
+        height: 24px;
+    }
+
+    .is-active {
+        svg {
+            height: 32px;
+        }
+    }
+}
 </style>
\ No newline at end of file