企业主页接口对接

src/api/companyPages/index.js

@@ -6,7 +6,6 @@ export function getEnterprisePageInfo(params) {
   return request({
     method: 'GET',
     url: `/api/enterprisePage/info/${params}`,
-
   })
 }
 
@@ -15,7 +14,72 @@ export function getEnterpriseKeyPerson(params) {
   return request({
     method: 'GET',
     url: `/api/enterprisePage/keyPerson/${params}`,
+  })
+}
+
+//企业基本信息:分支机构
+export function getEnterpriseBranch(params) {
+  return request({
+    method: 'GET',
+    url: `/api/enterprisePage/branch/${params}`,
+  })
+}
+
+//企业基本信息:最新动态
+export function getEnterpriseNewDynamic(params) {
+  return request({
+    method: 'GET',
+    url: `/api/enterprisePage/newDynamic/${params}`,
+  })
+}
+
+
+//企业研发投入:年度研发投入对比
+export function getEnterpriseStudy(params) {
+  return request({
+    method: 'GET',
+    url: `/api/enterprisePage/study/${params}`,
+  })
+}
+
+//企业研发投入:年度研发增长对比
+export function getEnterpriseGrowth(params) {
+  return request({
+    method: 'GET',
+    url: `/api/enterprisePage/growth/${params}`,
+  })
+}
 
+//企业研究人员:人员数量
+export function getEnterpriseResearcherNum(params) {
+  return request({
+    method: 'GET',
+    url: `/api/enterprisePage/researcherNum/${params}`,
   })
 }
 
+//企业研究人员:人员学历
+export function getEnterpriseResearcherDegree(params) {
+  return request({
+    method: 'GET',
+    url: `/api/enterprisePage/researcherDegree/${params}`,
+  })
+}
+
+//企业专利:地域分布
+export function getEnterprisePatentRegion(params) {
+  return request({
+    method: 'GET',
+    url: `/api/enterprisePage/patentRegion/${params}`,
+  })
+}
+
+//企业专利:领域分布
+export function getEnterprisPatentField(params) {
+  return request({
+    method: 'GET',
+    url: `/api/enterprisePage/patentField/${params}`,
+  })
+}
+
+

src/views/companyPages/component/Capability.vue

@@ -95,11 +95,14 @@
 </template>
 <script setup>
 import { ref, onMounted, nextTick } from 'vue'
+import { useRouter } from "vue-router";
 import getBarChart from "../js/barChart.js";
 import getDonutChart from '../js/donutChart.js';
 import getLineChart from "../js/lineChart.js";
 import getRadarChart from '../js/radarChart.js'
 import * as echarts from "echarts";
+import { getEnterpriseStudy, getEnterpriseGrowth, getEnterpriseResearcherNum, getEnterpriseResearcherDegree, getEnterprisePatentRegion, getEnterprisPatentField } from "@/api/companyPages/index.js";
+const router = useRouter();
 
 const tabList = ref(['研发投入', '研究人员', '专利情况'])
 const activeTab = ref('研发投入')
@@ -137,34 +140,188 @@ const totalData = ref([[
   { label: '家族专利', value: 4500, unit: '+' }
 ]])
 
+
+
 //年度研发投入对比
 const chart1Data = ref({
   name: ['2020', '2021', '2022', '2023', '2024', '2025'],
   value: [50, 100, 150, 200, 250, 300, 350, 400]
 });
-//研发投入增长对比
-const chart2Data = {
-  dataX: ["2025-01", "2025-02", "2025-03", "2025-04", "2025-05", "2025-06", "2025-07", "2025-08"],
-  dataY: [1.2, 1.5, 1.4, 1.8, 1.3, 1.5, 1.6, 1.4]
+const handleGetEnterpriseStudy = async () => {
+  try {
+    const res = await getEnterpriseStudy(router.currentRoute._value.params.id);
+    console.log("年度研发投入对比", res);
+    if (res.code === 200 && res.data) {
+      // 首先按年份倒序排序
+      res.data.sort((a, b) => a.year - b.year);
+
+      // 提取年份并转换为字符串数组
+      const years = res.data.map(item => item.year.toString());
+      // 提取对应的值
+      const values = res.data.map(item => item.value);
+
+      // 构造结果对象
+      const result = {
+        name: years,
+        value: values
+      };
+      chart1Data.value = result
+
+      let char1 = getBarChart(chart1Data.value.name, chart1Data.value.value, true);
+      setChart(char1, "chart1");
+    }
+  } catch (error) {
+    console.error("获取年度研发投入对比error", error);
+  }
 };
 
+
+const chart2Data = ref({})
+//研发投入增长对比
+const handleGetEnterpriseGrowth = async () => {
+  try {
+    const res = await getEnterpriseGrowth(router.currentRoute._value.params.id);
+    console.log("研发投入增长对比", res);
+    if (res.code === 200 && res.data) {
+      // 首先按年份倒序排序
+      res.data.sort((a, b) => b.year - a.year);
+
+      // 提取年份并转换为字符串数组
+      const years = res.data.map(item => item.year.toString());
+
+      // 提取对应的值
+      const values = res.data.map(item => item.value);
+
+      // 构造结果对象
+      const result = {
+        dataX: years,
+        dataY: values
+      };
+      chart2Data.value = result
+
+      let chart2 = getLineChart(chart2Data.value.dataX, chart2Data.value.dataY);
+      setChart(chart2, "chart2");
+    }
+  } catch (error) {
+    console.error("获取研发投入增长对比error", error);
+  }
+};
 const chart3Data = ref({
-  name: ['2020', '2021', '2022', '2023', '2024', '2025'],
-  value: [50, 100, 150, 200, 250, 300, 350, 400]
+  // name: ['2020', '2021', '2022', '2023', '2024', '2025'],
+  // value: [50, 100, 150, 200, 250, 300, 350, 400]
 });
 
-// 学历分布数据（对应图片）
+//研究人员数量增长趋势
+const handleGetEnterpriseResearcherNum = async () => {
+  try {
+    const res = await getEnterpriseResearcherNum(router.currentRoute._value.params.id);
+    console.log("研究人员数量增长趋势", res.data);
+    if (res.code === 200 && res.data) {
+      // 提取年份并转换为字符串数组
+      const years = res.data.map(item => item.year.toString());
+
+      // 提取对应的值
+      const values = res.data.map(item => item.num);
+
+      // 构造结果对象
+      const result = {
+        name: years,
+        value: values
+      };
+      chart3Data.value = result
+      let char3 = getBarChart(chart3Data.value.name, chart3Data.value.value, true);
+      setChart(char3, "chart3");
+    }
+  } catch (error) {
+    console.error("获取研究人员数量增长趋势error", error);
+  }
+}
+
+// 学历分布数据
 const chart4Data = ref({
   name: ['博士', '硕士', '学士', '其他'],
   value: [28, 36, 22, 8],
 })
 
-// 学历分布数据（对应图片）
+const handleGetEnterpriseResearcherDegree = async () => {
+  try {
+    const res = await getEnterpriseResearcherDegree(router.currentRoute._value.params.id);
+    console.log("学历分布数据", res.data);
+    if (res.code === 200 && res.data) {
+      // 提取类别名称
+      const names = res.data.map(item => item.degree);
+      // 提取对应的值
+      const values = res.data.map(item => item.num);
+
+      // 构造结果对象
+      const result = {
+        name: names,
+        value: values
+      };
+      chart4Data.value = result
+      let char4 = getDonutChart(chart4Data.value.name, chart4Data.value.value, true);
+      setChart(char4, "chart4");
+    }
+  } catch (error) {
+    console.error("获取学历分布数据error", error);
+  }
+}
+
+// 专利地域分布
 const chart5Data = ref({
   name: ['博士', '硕士', '学士', '其他'],
   value: [28, 36, 22, 8],
 })
 
+const handleGetEnterprisePatentRegion = async () => {
+  try {
+    const res = await getEnterprisePatentRegion(router.currentRoute._value.params.id);
+    console.log("专利地域分布", res.data);
+    if (res.code === 200 && res.data) {
+      // 提取类别名称
+      const names = res.data.map(item => item.field);
+      // 提取对应的值
+      const values = res.data.map(item => item.num);
+
+      // 构造结果对象
+      const result = {
+        name: names,
+        value: values
+      };
+      chart5Data.value = result
+      let char5 = getDonutChart(chart5Data.value.name, chart5Data.value.value, true);
+      setChart(char5, "chart5");
+    }
+  } catch (error) {
+    console.error("获取专利地域分布error", error);
+  }
+}
+const chart6Data = ref({})
+//专利技术领域分布
+const handleGetEnterprisPatentField = async () => {
+  try {
+    const res = await getEnterprisePatentRegion(router.currentRoute._value.params.id);
+    console.log("专利技术领域分布", res.data);
+    if (res.code === 200 && res.data) {
+      // 提取类别名称
+      const names = res.data.map(item => item.field);
+      // 提取对应的值
+      const values = res.data.map(item => item.percent);
+
+      // 构造结果对象
+      const result = {
+        name: names,
+        value: values
+      };
+      chart6Data.value = result
+      let char6 = getRadarChart(chart6Data.value);
+      setChart(char6, "chart6");
+    }
+  } catch (error) {
+    console.error("获取专利技术领域分布error", error);
+  }
+}
+
 
 
 function changeTab(tab, index) {
@@ -175,14 +332,14 @@ function changeTab(tab, index) {
   // 保证 DOM 更新完再画
   nextTick(() => {
     if (tab === '研发投入') {
-      chart1()
-      chart2()
+      handleGetEnterpriseStudy()
+      handleGetEnterpriseGrowth()
     } else if (tab === '研究人员') {
-      chart3()
-      char4()
+      handleGetEnterpriseResearcherNum()
+      handleGetEnterpriseResearcherDegree()
     } if (tab === '专利情况') {
-      char5()
-      chart6()
+      handleGetEnterprisePatentRegion()
+      handleGetEnterprisPatentField()
     }
     // 其它 tab 同理 …
   })
@@ -197,25 +354,7 @@ const setChart = (option, chartId) => {
   return chart;
 };
 
-function chart1() {
-  let char1 = getBarChart(chart1Data.value.name, chart1Data.value.value, true);
-  setChart(char1, "chart1");
-}
-function chart2() {
-  let chart2 = getLineChart(chart2Data.dataX, chart2Data.dataY);
-  setChart(chart2, "chart2");
-}
-
-function chart3() {
-  let char3 = getBarChart(chart3Data.value.name, chart3Data.value.value, true);
-  setChart(char3, "chart3");
-}
 
-function char4() {
-  console.log(chart4Data.value)
-  let char4 = getDonutChart(chart4Data.value.name, chart4Data.value.value, true);
-  setChart(char4, "chart4");
-}
 function char5() {
   console.log(chart5Data.value)
   let char5 = getDonutChart(chart5Data.value.name, chart5Data.value.value, true);
@@ -230,9 +369,8 @@ function chart6() {
 
 
 onMounted(() => {
-
-  chart1()
-  chart2()
+  handleGetEnterpriseStudy()
+  handleGetEnterpriseGrowth()
 });
 
 </script>

src/views/companyPages/component/Timeline.vue

@@ -15,11 +15,11 @@
         <div class="node" :style="leftOffset(i)">
           <!-- 圆环 -->
           <div class="dot" :class="linePos(i, flip)" :style="{
-            marginTop: linePos(i, flip) === 'down' ? '35px' : '-10px'
+            marginTop: linePos(i, flip) === 'down' ? '-5px' : '35px'
           }"></div>
 
           <div class="time" :style="{
-            marginTop: linePos(i, flip) === 'down' ? '10px' : '-40px'
+            marginTop: linePos(i, flip) === 'down' ? '-50px' : '10px'
           }" v-if="type === 'normal'">
             {{ item.time }}
           </div>
@@ -37,9 +37,12 @@
               {{ item.title }}
               <!-- <img class="item-header-icon" src="@/assets/images/icon/copy.png" style="cursor: pointer;"></img> -->
             </div>
-            <div class="content">
-              {{ item.content }}
-            </div>
+            <el-tooltip class="box-item" effect="dark" :content="item.content" placement="top">
+              <div class="content">
+                {{ item.content }}
+              </div>
+            </el-tooltip>
+
           </div>
         </div>
       </div>
@@ -86,7 +89,7 @@ export default {
   },
   methods: {
     leftOffset(i) {
-      return this.type === 'normal' ? { left: `${(i * 100) / 5}%`, top: '50%' } : { left: `${(i * 100) / 5}%`, top: '100%' }
+      return this.type === 'normal' ? { left: `${(i * 100) / 4}%`, top: '50%' } : { left: `${(i * 100) / 4}%`, top: '100%' }
     },
 
 
@@ -105,6 +108,7 @@ export default {
 <style scoped>
 /* 样式与之前完全一致，不再重复 */
 .timeline-wrapper {
+  font-family: Microsoft YaHei;
   display: flex;
   align-items: center;
   width: 100%;
@@ -252,13 +256,46 @@ export default {
   line-height: 24px;
   letter-spacing: 0px;
   text-align: justify;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
 }
 
 .card.up {
-  bottom: 50px;
+  bottom: 80px;
+  margin-bottom: 20px;
+  margin-left: 160px;
 }
 
 .card.down {
-  top: 20px;
+  top: -50px;
+  margin-top: 95px;
+  margin-left: 160px;
+}
+
+.box-item {
+  color: rgba(255, 255, 255, 1);
+
+  font-family: Microsoft YaHei;
+  font-style: Regular;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 30px;
+  letter-spacing: 0px;
+  text-align: left;
+}
+
+:deep(.el-popper.is-dark) {
+  color: rgba(255, 255, 255, 1);
+
+  font-family: Microsoft YaHei !important;
+  font-style: Regular;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 30px;
+  letter-spacing: 0px;
+  text-align: left;
 }
-</style>
+</style>
\ No newline at end of file

src/views/companyPages/index.vue

@@ -148,8 +148,8 @@
 							<h3 class="section-title">分支机构</h3>
 						</div>
 						<div class="branches-grid">
-							<div class="branch-item" v-for="(branch, idx) in data.branches" :key="idx">
-								<span>{{ branch }}</span>
+							<div class="branch-item" v-for="(branch) in brancheData" :key="branch.orgId">
+								<span>{{ branch.orgName }}</span>
 								<img src="../../assets/icons/open.png" alt="箭头" class="branch-arrow" />
 							</div>
 						</div>
@@ -173,15 +173,17 @@
 
 <script setup>
 import { ref, onMounted } from "vue";
+
 import data from "./data/huaweiData.json";
-import movementData from "./data/movement.json";
+// import movementData from "./data/movement.json";
+
 import Timeline from "./component/Timeline.vue";
 import Capability from "./component/Capability.vue";
 import SanctionsSituation‌ from "./component/SanctionsSituation‌.vue";
 import SupplyChain from "./component/SupplyChain.vue";
 import { useRouter } from "vue-router";
 
-import { getEnterprisePageInfo, getEnterpriseKeyPerson } from "@/api/companyPages/index.js";
+import { getEnterprisePageInfo, getEnterpriseKeyPerson, getEnterpriseBranch, getEnterpriseNewDynamic } from "@/api/companyPages/index.js";
 import TabIcon1 from "./images/tab-icon1.png";
 import TabIcon2 from "./images/tab-icon2.png";
 import TabIcon3 from "./images/tab-icon3.png";
@@ -232,7 +234,7 @@ const handleGetEnterprisePageInfo = async () => {
 	}
 };
 
-
+//获取主要人员
 const handleGetEnterpriseKeyPerson = async () => {
 	try {
 		const res = await getEnterpriseKeyPerson(router.currentRoute._value.params.id);
@@ -245,9 +247,38 @@ const handleGetEnterpriseKeyPerson = async () => {
 	}
 };
 
+const brancheData = ref([])
+//获取分支机构
+const handleGetEnterpriseBranch = async () => {
+	try {
+		const res = await getEnterpriseBranch(router.currentRoute._value.params.id);
+		console.log("分支机构", res);
+		if (res.code === 200 && res.data) {
+			brancheData.value = res.data
+		}
+	} catch (error) {
+		console.error("获取分支机构error", error);
+	}
+};
+
+const movementData = ref([])
+//获取最新动态
+const handleGetEnterpriseNewDynamic = async () => {
+	try {
+		const res = await getEnterpriseNewDynamic(router.currentRoute._value.params.id);
+		console.log("最新动态", res);
+		if (res.code === 200 && res.data) {
+			movementData.value = res.data
+		}
+	} catch (error) {
+		console.error("获取最新动态error", error);
+	}
+};
 onMounted(async () => {
 	handleGetEnterprisePageInfo()
 	handleGetEnterpriseKeyPerson()
+	handleGetEnterpriseBranch()
+	handleGetEnterpriseNewDynamic()
 });
 
 </script>

src/views/companyPages/js/radarChart.js

 import * as echarts from "echarts";
 
-const getBarChart = (nameList, valueList, isPer) => {
-  const option = {
-    title: { text: '' },
+/**
+ * 生成雷达图配置项（单系列）
+ * @param {{name: string[], value: number[]}} data - 包含 name 和 value 的对象
+ * @param {string} seriesName - 系列名称（如“学历分布”），可选，默认为 ''
+ * @returns {Object} ECharts 配置项
+ */
+const getRadarChart = (data, seriesName = '') => {
 
+  const nameList = data.name
+  const valueList = data.value
+  console.log(nameList, valueList, 'datadatadatadata')
+  // 自动计算每个维度的 max：取 value 中的最大值 * 1.2 并向上取整到合适刻度
+  const maxValue = Math.max(...valueList);
+  // 简单处理：如果 maxValue <= 10，max 设为 10；否则按 1.2 倍并取整到百/十位
+  let max;
+  if (maxValue === 0) {
+    max = 10;
+  } else if (maxValue <= 10) {
+    max = 10;
+  } else if (maxValue <= 100) {
+    max = Math.ceil(maxValue * 1.2 / 10) * 10;
+  } else {
+    max = Math.ceil(maxValue * 1.2 / 100) * 100;
+  }
 
+  // 所有 indicator 使用相同的 max（也可每个维度单独设，但你没提供）
+  const indicators = nameList.map(name => ({ name, max }));
+
+  const option = {
+    title: { text: '' },
     radar: {
-      radius: '50%',          // 关键：缩小整个雷达
-      center: ['50%', '50%'], // 可选：再往下挪一点，避免图例挤在一起
-      indicator: [
-        { name: '5G通信', max: 6500 },
-        { name: '生物科技', max: 16000 },
-        { name: '人工智能', max: 30000 },
-        { name: '物联网', max: 38000 },
-        { name: '量子科技', max: 52000 },
-        { name: '智能汽车', max: 25000 }
-      ],
+      radius: '50%',
+      center: ['50%', '50%'],
+      indicator: indicators,
       axisName: {
         formatter: '{value}',
         color: 'rgba(59, 65, 75, 1)',
@@ -25,26 +43,25 @@ const getBarChart = (nameList, valueList, isPer) => {
     },
     series: [
       {
-        name: 'Budget vs spending',
+        name: seriesName,
         type: 'radar',
         symbol: 'none',
-        // 添加或修改 lineStyle 属性来控制线条粗细
         lineStyle: {
-          width: 1, // 调整这个值可以改变线条的粗细，数值越大线条越粗
+          width: 1,
           color: '#69B1FF'
         },
         data: [
           {
-            value: [4200, 3000, 20000, 35000, 50000, 18000],
-            name: '美国',
+            value: valueList,
+            name: seriesName,
             areaStyle: { color: 'rgba(105, 177, 255, 0.1)' }
-          },
-
+          }
         ]
       }
     ]
-  }
-  return option
-}
+  };
+
+  return option;
+};
 
-export default getBarChart
+export default getRadarChart;
\ No newline at end of file