企业主页接口对接

src/api/companyPages/index.js

+// 企业主页接口信息
+import request from "@/api/request.js";
+
+// 企业基本信息:基本信息
+export function getEnterprisePageInfo(params) {
+  return request({
+    method: 'GET',
+    url: `/api/enterprisePage/info/${params}`,
+
+  })
+}
+
+// 企业基本信息:主要人员
+export function getEnterpriseKeyPerson(params) {
+  return request({
+    method: 'GET',
+    url: `/api/enterprisePage/keyPerson/${params}`,
+
+  })
+}
+

src/router/modules/company.js

@@ -4,7 +4,7 @@ import companyPages from "@/views/companyPages/index.vue";
 const companyPagesRoutes = [
   // 智库系统的主要路由
   {
-    path: "/companyPages",
+    path: "/companyPages/:id",
     name: "companyPages",
     component: companyPages,
     meta: {

src/views/companyPages/index.vue

@@ -3,19 +3,15 @@
 		<!-- 公司导航栏 -->
 		<div class="company-nav">
 			<div class="company-logo-title">
-				<img :src="data.company.logo" alt="华为logo" class="logo-img" />
+				<img :src="infoData.logoUrl" class="logo-img" />
 				<div class="title-group">
-					<h1 class="company-name">{{ data.company.name }}</h1>
-					<p class="company-english">{{ data.company.englishName }}</p>
+					<h1 class="company-name">{{ infoData.orgName }}</h1>
+					<p class="company-english">{{ infoData.orgNameEn }}</p>
 				</div>
 			</div>
 			<div class="main-tabs">
-				<div
-					v-for="(tab, index) in tabList"
-					:key="index"
-					:class="activeTab === tab.title ? 'tab-active' : 'tab'"
-					@click="activeTab = tab.title"
-				>
+				<div v-for="(tab, index) in tabList" :key="index" :class="activeTab === tab.title ? 'tab-active' : 'tab'"
+					@click="activeTab = tab.title">
 					<img :src="activeTab === tab.title ? tab.activeIcon : tab.icon" alt="" />
 					{{ tab.title }}
 				</div>
@@ -25,28 +21,28 @@
 		<div class="main-content" v-if="activeTab === '基础信息'">
 			<!-- 左侧信息栏 -->
 			<div class="left-sidebar">
-				<img :src="data.company.logo" alt="华为logo" class="sidebar-logo" />
-				<h2 class="sidebar-company-name">{{ data.company.name }}</h2>
+				<img :src="infoData.logoUrl" class="sidebar-logo" />
+				<h2 class="sidebar-company-name">{{ infoData.orgName }}</h2>
 
 				<div class="contact-list">
 					<div class="contact-item">
 						<img src="../../assets/icons/shutter.svg" alt="网址" class="contact-icon" />
-						<span>{{ data.contactInfo.website }}</span>
+						<span>{{ infoData.url }}</span>
 					</div>
 					<div class="contact-item">
 						<img src="../../assets/icons/location.svg" alt="地址" class="contact-icon" />
-						<span>{{ data.contactInfo.address }}</span>
+						<span>{{ infoData.address }}</span>
 					</div>
 					<div class="contact-item">
 						<img src="../../assets/icons/call.svg" alt="电话" class="contact-icon" />
-						<span>{{ data.contactInfo.phone }}</span>
+						<span>{{ infoData.telephone }}</span>
 					</div>
 					<div class="contact-item">
 						<img src="../../assets/icons/mail.svg" alt="邮箱" class="contact-icon" />
-						<span>{{ data.contactInfo.email }}</span>
+						<span>{{ infoData.email }}</span>
 					</div>
 				</div>
-
+				<!--接口未对接-->
 				<div class="financial-list">
 					<div class="financial-item" v-for="(item, idx) in data.financialData" :key="idx">
 						<p class="financial-value">{{ item.value }}</p>
@@ -59,12 +55,8 @@
 			<div class="right-content">
 				<!-- 子标签栏 -->
 				<div class="sub-tabs">
-					<span
-						v-for="(tab, idx) in tabListSmall"
-						:key="idx"
-						:class="['sub-tab', activeTabSmall === tab ? 'active' : '']"
-						@click="activeTabSmall = tab"
-					>
+					<span v-for="(tab, idx) in tabListSmall" :key="idx"
+						:class="['sub-tab', activeTabSmall === tab ? 'active' : '']" @click="activeTabSmall = tab">
 						{{ tab }}
 					</span>
 					<div class="action-icons">
@@ -80,27 +72,49 @@
 							<div class="info-card">
 								<h3 class="section-title">类别分布</h3>
 								<ul class="info-list">
-									<li
-										v-for="(value, key) in data.categoryDist"
-										:key="key"
-										style="display: flex; align-items: center"
-									>
+									<li style="display: flex; align-items: center">
 										<div class="li-icon"></div>
-										<span class="info-key">{{ key }}</span>
-										<span class="info-value">{{ value }}</span>
+										<span class="info-key">企业类型</span>
+										<span class="info-value">{{ infoData.nsIndustryCategory }}</span>
+									</li>
+									<li style="display: flex; align-items: center">
+										<div class="li-icon"></div>
+										<span class="info-key">机构代码</span>
+										<span class="info-value">{{ infoData.uscc }}</span>
+									</li>
+									<li style="display: flex; align-items: center">
+										<div class="li-icon"></div>
+										<span class="info-key">成立时间</span>
+										<span class="info-value">{{ infoData.createTime }}</span>
+									</li>
+									<li style="display: flex; align-items: center">
+										<div class="li-icon"></div>
+										<span class="info-key">创办人</span>
+										<span class="info-value">{{ infoData.legalRepresentative }}</span>
 									</li>
 								</ul>
 							</div>
 							<div class="info-card">
 								<h3 class="section-title">经营信息</h3>
 								<ul class="info-list">
-									<li
-										v-for="(value, key) in data.businessInfo"
-										:key="key"
-										style="display: flex; align-items: center"
-									>
+									<li style="display: flex; align-items: center">
+										<div class="li-icon"></div>
+										<span class="info-key">总部地点</span>
+										<span class="info-value">{{ infoData.address }}</span>
+									</li>
+									<li style="display: flex; align-items: center">
+										<div class="li-icon"></div>
+										<span class="info-key">标语口号</span>
+										<span class="info-value">{{ value }}</span>
+									</li>
+									<li style="display: flex; align-items: center">
+										<div class="li-icon"></div>
+										<span class="info-key">业务范围</span>
+										<span class="info-value">{{ infoData.businessScope }}</span>
+									</li>
+									<li style="display: flex; align-items: center">
 										<div class="li-icon"></div>
-										<span class="info-key">{{ key }}</span>
+										<span class="info-key">所有权者</span>
 										<span class="info-value">{{ value }}</span>
 									</li>
 								</ul>
@@ -115,15 +129,15 @@
 						</div>
 
 						<div class="personnel-grid">
-							<div class="personnel-card" v-for="(person, idx) in data.mainPersonnel" :key="idx">
+							<div class="personnel-card" v-for="(person, idx) in mainPersonnel" :key="idx">
 								<div class="personnel-card-header">
-									<img :src="person.avatar" alt="头像" class="person-avatar" />
+									<img :src="person.avatarUrl" class="person-avatar" />
 									<div class="person-info">
 										<h4 class="person-name">{{ person.name }}</h4>
 										<p class="person-position">{{ person.position }}</p>
 									</div>
 								</div>
-								<p class="person-desc">{{ person.desc }}</p>
+								<div class="person-desc">{{ person.introduction }}</div>
 							</div>
 						</div>
 					</div>
@@ -158,14 +172,16 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import data from "./data/huaweiData.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 TabIcon1 from "./images/tab-icon1.png";
 import TabIcon2 from "./images/tab-icon2.png";
 import TabIcon3 from "./images/tab-icon3.png";
@@ -175,6 +191,7 @@ import TabIcon2Active from "./images/tab-icon2-active.png";
 import TabIcon3Active from "./images/tab-icon3-active.png";
 import TabIcon4Active from "./images/tab-icon4-active.png";
 
+const router = useRouter();
 const tabList = ref([
 	{
 		title: "基础信息",
@@ -200,6 +217,39 @@ const tabList = ref([
 const activeTab = ref("基础信息");
 const tabListSmall = ref(["企业概况", "企业动态"]);
 const activeTabSmall = ref("企业概况");
+const infoData = ref({})//基本信息
+const mainPersonnel = ref([])//主要人员
+// 获取企业基本信息
+const handleGetEnterprisePageInfo = async () => {
+	try {
+		const res = await getEnterprisePageInfo(router.currentRoute._value.params.id);
+		console.log("企业基本信息", res);
+		if (res.code === 200 && res.data) {
+			infoData.value = res.data
+		}
+	} catch (error) {
+		console.error("获取企业基本信息error", error);
+	}
+};
+
+
+const handleGetEnterpriseKeyPerson = async () => {
+	try {
+		const res = await getEnterpriseKeyPerson(router.currentRoute._value.params.id);
+		console.log("主要人员", res);
+		if (res.code === 200 && res.data) {
+			mainPersonnel.value = res.data
+		}
+	} catch (error) {
+		console.error("获取主要人员error", error);
+	}
+};
+
+onMounted(async () => {
+	handleGetEnterprisePageInfo()
+	handleGetEnterpriseKeyPerson()
+});
+
 </script>
 
 <style lang="scss" scoped>
@@ -258,11 +308,13 @@ const activeTabSmall = ref("企业概况");
 	align-items: flex-start;
 	gap: 32;
 	padding: 0px 16px 0px 0px;
+
 	img {
 		width: 16px;
 		height: 16px;
-    margin-right: 4px;
+		margin-right: 4px;
 	}
+
 	.tab {
 		color: rgba(59, 65, 75, 1);
 		font-family: Microsoft YaHei;
@@ -517,6 +569,13 @@ const activeTabSmall = ref("企业概况");
 	line-height: 24px;
 	letter-spacing: 0px;
 	text-align: justify;
+	/* overflow: hidden; */
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 1;
+	overflow: hidden;
+	-webkit-box-orient: vertical;
+	width: 313px;
 }
 
 /* 主要人员 */
@@ -606,14 +665,22 @@ const activeTabSmall = ref("企业概况");
 }
 
 .person-desc {
-	padding: 16px 8px;
-	margin: 0;
+	// padding: 16px 8px;
+	margin: 16px 8px;
 	color: rgba(95, 101, 108, 1);
 	font-size: 16px;
 	font-weight: 400;
 	line-height: 24px;
 	letter-spacing: 0px;
 	text-align: left;
+
+	/* overflow: hidden; */
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	overflow: hidden;
+	-webkit-box-orient: vertical;
+
 }
 
 /* 分支机构 */