fix:政令模块细节优化

src/views/decree/decreeHome/index.vue

@@ -63,12 +63,18 @@
 						</div>
 					</div>
 				</div> -->
-				<div class="home-main-header-item-box">
-					<div class="item" v-for="(item, index) in govInsList.slice(0, 12)" :key="index" @click="handleToInstitution(item)">
+				<div class="home-main-header-item-box" v-if="govInsList.length">
+					<div class="item" v-for="(item, index) in govInsList.slice(0, 7)" :key="index" @click="handleToInstitution(item)">
 						<div class="item-left">
-							<img :src="item.img ? item.img : DefaultIcon2" alt="" />
+							<img :src="item.orgImage || DefaultIcon2" alt="" />
 						</div>
-						<div class="item-right">{{ item.name }}</div>
+						<div class="item-right one-line-ellipsis">{{ item.orgName }}</div>
+						<div class="item-num">{{ item.total }}项</div>
+						<el-icon color="var(--color-primary-100)"><ArrowRightBold /></el-icon>
+					</div>
+					<div class="item">
+						<div class="item-num item-more">查看全部机构 ({{govInsList.length+1}}家)</div>
+						<el-icon color="var(--color-primary-100)"><ArrowRightBold /></el-icon>
 					</div>
 				</div>
 			</div>
@@ -271,7 +277,7 @@
 					<div class="search-box">
 						<el-select v-model="searchType" :empty-values="[null, undefined]" style="width: 100%" filterable>
 							<el-option label="全部政府部门" value="" />
-							<el-option v-for="item in govInsList" :key="item.id" :label="item.name" :value="item.id" />
+							<el-option v-for="item in govInsList" :key="item.orgId" :label="item.orgName" :value="item.orgId" />
 						</el-select>
 					</div>
 					<div style="flex: auto;"></div>
@@ -417,11 +423,11 @@ import { ElMessage } from "element-plus";
 
 // 跳转行政机构主页
 const handleToInstitution = item => {
-	window.sessionStorage.setItem("curTabName", item.name);
+	window.sessionStorage.setItem("curTabName", item.orgName);
 	const curRoute = router.resolve({
 		path: "/institution",
 		query: {
-			id: item.id
+			id: item.orgId
 		}
 	});
 	window.open(curRoute.href, "_blank");
@@ -447,13 +453,7 @@ const handleGetDepartmentList = async () => {
 		const res = await getDepartmentList();
 		console.log("机构列表", res);
 		if (res.code === 200 && res.data) {
-			govInsList.value = res.data.map(item => {
-				return {
-					id: item.orgId,
-					name: item.orgName,
-					img: item.orgImage
-				};
-			});
+			govInsList.value = res.data;
 		}
 	} catch (error) {
 		console.error("获取机构列表error", error);
@@ -1390,15 +1390,17 @@ onMounted(async () => {
 			}
 
 			.home-main-header-item-box {
-				margin-top: 48px;
-				margin-bottom: 64px;
+				margin: 48px 0 64px;
 				width: 1600px;
 				display: flex;
 				flex-wrap: wrap;
+				gap: 16px;
 
 				.item {
-					width: 254px;
-					height: 72px;
+					width: 20%;
+					flex: auto;
+					height: 80px;
+					padding: 0 16px;
 					display: flex;
 					box-sizing: border-box;
 					background: rgba(255, 255, 255, 0.65);
@@ -1406,8 +1408,7 @@ onMounted(async () => {
 					border-radius: 10px;
 					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
 					align-items: center;
-					gap: 17px;
-					margin: 0 6px 16px 6px;
+					justify-content: center;
 					cursor: pointer;
 					transition:
 						transform 0.3s ease,
@@ -1419,10 +1420,9 @@ onMounted(async () => {
 					}
 
 					.item-left {
-						margin-left: 24px;
 						width: 48px;
 						height: 48px;
-
+						font-size: 0px;
 						img {
 							width: 100%;
 							height: 100%;
@@ -1430,12 +1430,28 @@ onMounted(async () => {
 					}
 
 					.item-right {
-						width: 140px;
+						width: 20px;
+						flex: auto;
 						color: rgba(59, 65, 75, 1);
 						font-family: Microsoft YaHei;
 						font-size: 20px;
 						font-weight: 700;
-						line-height: 24px;
+						line-height: 20px;
+						margin: 0 16px;
+					}
+
+					.item-num {
+						white-space: nowrap;
+						font-family: Microsoft YaHei;
+						font-size: 20px;
+						font-weight: 700;
+						line-height: 20px;
+						margin-right: 2px;
+						color: var(--color-primary-100);
+					}
+					.item-more {
+						margin-right: 12px;
+						font-size: 16px;
 					}
 				}
 			}

src/views/decree/decreeLayout/overview/measures/index.vue

 <template>
 	<div class="introduction-wrap">
-		<div class="left">
+		<div class="page-left">
 			<div class="box1">
 				<AnalysisBox title="主要指令" :showAllBtn="false">
 					<div class="analysis-box">
@@ -21,7 +21,7 @@
 							<el-empty v-if="!contentList?.length" style="padding: 60px 0;" description="暂无数据" :image-size="100" />
 							<div v-for="(section, index) in contentList" :key="index" class="section">
 								<div class="section-header">
-									<div class="section-title text-align-justify">({{ simpleNumToChinese(index+1) }}) {{ section.content }}</div>
+									<div class="section-title text-align-justify" v-html="section.content"></div>
 									<div class="section-icon">
 										<img src="./assets/images/open-icon.png" alt="" />
 									</div>
@@ -30,19 +30,19 @@
 								<div class="numbered-list">
 									<div v-for="(item, itemIndex) in section.slaver" :key="itemIndex" class="list-item">
 										<div class="list-item-dot">{{itemIndex+1}}.</div>
-										<div class="list-item-word">{{ item.content }}</div>
+										<div class="list-item-word" v-html="item.content"></div>
 
 										<!-- 渲染二级列表 -->
 										<div v-if="item.slaver" class="sub-list">
 											<div v-for="(subItem, subIndex) in item.slaver" :key="subIndex" class="sub-item">
 												<div class="sub-item-dot">({{subIndex+1}})</div>
-												<div class="sub-item-word">{{ subItem.content }}</div>
+												<div class="sub-item-word" v-html="subItem.content"></div>
 
 												<!-- 渲染三级列表 -->
 												<div v-if="subItem.slaver" class="sub-sub-list">
 													<div v-for="(subSubItem, subSubIndex) in subItem.slaver" :key="subSubIndex" class="sub-sub-item">
 														<div class="sub-sub-item-dot">{{ALPHABET[subSubIndex%26]}}.</div>
-														<div class="sub-sub-item-word">{{ subSubItem.content }}</div>
+														<div class="sub-sub-item-word" v-html="subItem.content"></div>
 													</div>
 												</div>
 											</div>
@@ -55,17 +55,22 @@
 				</AnalysisBox>
 			</div>
 		</div>
-		<div class="right">
+		<div class="page-right">
 			<div class="box3">
-				<AnalysisBox title="发布机构" :showAllBtn="false">
+				<AnalysisBox title="执行机构" :showAllBtn="false">
 					<div class="box3-top">
-						<div class="box3-top-top" @click="handleToInstitution(box3TopTopData)">
+						<div class="organization-list">
+							<div class="organization-item" v-for="item in organizationInfo.list" :key="item.id">
+								<ActionButton @click="handleOrganization(item)" :name="item.obb" :type="item.id==organizationInfo.node.id?'active':'normal'" />
+							</div>
+						</div>
+						<div class="box3-top-top" @click="handleToInstitution()">
 							<div class="left">
-								<img :src="box3TopTopData.logo ? box3TopTopData.logo : DefaultIcon2" alt="" />
+								<img :src="organizationInfo.node.logo || DefaultIcon2" alt="" />
 							</div>
 							<div class="right">
-								<div class="name">{{ box3TopTopData.name + " >" }}</div>
-								<div class="ename">{{ box3TopTopData.eName }}</div>
+								<div class="name">{{ organizationInfo.node.name + " >" }}</div>
+								<div class="ename">{{ organizationInfo.node.ename }}</div>
 							</div>
 						</div>
 						<div class="box3-top-bottom">
@@ -76,17 +81,21 @@
 								<div class="text">{{ "关键人物" }}</div>
 							</div>
 							<div class="box3-top-bottom-main">
-								<div class="box3-top-bottom-item" v-for="(item, index) in box3TopBottomData" :key="index">
+								<div class="box3-top-bottom-item" v-for="(item, index) in organizationInfo.node.leaders" :key="index">
 									<div class="box3-top-bottom-item-left">
-										<img :src="item.avatar ? item.avatar : DefaultIcon1" alt="" />
+										<img :src="item.avatar || DefaultIcon1" alt="" />
 									</div>
 									<div class="box3-top-bottom-item-right">
-										<div class="name" @click="handleClickUser(item)">{{ item.name }}</div>
+										<div class="name one-line-ellipsis text-click-hover" @click="handleClickUser(item)">{{ item.name }}</div>
 										<div class="position">{{ item.job }}</div>
 									</div>
 								</div>
 							</div>
 						</div>
+						<div class="organization-button">
+							<div class="button-text">查看政令执行情况</div>
+							<el-icon size="16"><Right /></el-icon>
+						</div>
 					</div>
 				</AnalysisBox>
 			</div>
@@ -109,14 +118,14 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import { useRoute } from "vue-router";
 import router from "@/router";
 import { Search } from '@element-plus/icons-vue'
-import { getDecreeIssueOrganization } from "@/api/decree/introduction";
+import { getDecreeOrganization } from "@/api/decree/introduction";
 import { getDecreeRelatedEntity, getDecreeMainContent } from "@/api/decree/background";
 import { getDecreehylyList } from "@/api/decree/home";
-
+import ActionButton from '@/components/base/ActionButton/index.vue'
 import DefaultIcon1 from "@/assets/icons/default-icon1.png";
 import DefaultIcon2 from "@/assets/icons/default-icon2.png";
 import defaultCom from "@/views/coopRestriction/assets/images/default-icon2.png"
@@ -211,14 +220,16 @@ const contentList = ref([
 const ALPHABET = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
 const onMainContentData = async () => {
 	try {
-		const res = await getDecreeMainContent({
-			id: route.query.id,
-			keyword: commandWord.value,
-			domainId: areaType.value
-		});
+		const keyword = commandWord.value;
+		const res = await getDecreeMainContent({ id: route.query.id, keyword, domainId: areaType.value });
 		console.log("主要指令", res);
 		if (res && res.code === 200) {
-			contentList.value = res.data;
+			contentList.value = res.data || [];
+			contentList.value.forEach((item, index) => { item.content = `(${simpleNumToChinese(index+1)}) ${item.content}` })
+			if (keyword) {
+				let word = keyword.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+				contentList.value.forEach(item => {onHighlight(word, item)})
+			}
 		} else {
 			contentList.value = []
 		}
@@ -227,12 +238,19 @@ const onMainContentData = async () => {
 		console.error("获取主要指令数据失败:", error);
 	} 
 };
+// 搜索高亮效果
+const onHighlight = (word, row) => {
+	row.content = String(row.content).replace(new RegExp(word, "gi"), (match) => {
+		return `<span class="highlight">${match}</span>`;
+	});
+	if (row.slaver?.length) {
+		row.slaver.forEach(item => { onHighlight(word, item) })
+	}
+}
 // 数字转中文（支持 0-99 整数）
 const simpleNumToChinese = (num) => {
   // 1. 基础校验：只处理 0-99 的整数
-  if (!Number.isInteger(num) || num < 0 || num > 99) {
-    return '仅支持 0-99 之间的整数';
-  }
+  if (!Number.isInteger(num) || num < 0 || num > 99) return '100';
   // 2. 定义基础字符
   const singleChars = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
   const tenChar = '十';
@@ -271,20 +289,34 @@ const onRelatedEntityData = async () => {
 	} 
 };
 
-// 发布机构
-const box3TopTopData = ref({
-	id: "",
-	logo: "",
-	name: "",
-	eName: ""
-});
-const box3TopBottomData = ref([]);
-// 跳转行政机构主页
-const handleToInstitution = item => {
+// 执行机构
+const organizationInfo = reactive({
+	list : [],
+	node: {id: "", obb: "", logo: "", name: "", ename: "", leaders: []},
+})
+const handleGetOrgnization = async () => {
+	try {
+		const res = await getDecreeOrganization({id: route.query.id});
+		console.log("执行机构", res);
+		if (res.code === 200 && res.data?.length) {
+			organizationInfo.list = res.data;
+			organizationInfo.node = res.data[0];
+		}
+	} catch (error) {
+		organizationInfo.node = {id: "", obb: "", logo: "", name: "", ename: "", leaders: []};
+		console.error("获取执行机构数据失败", error);
+	}
+};
+// 切换执行机构
+const handleOrganization = (node) => {
+	organizationInfo.node = node;
+};
+// 跳转机构主页
+const handleToInstitution = () => {
 	const curRoute = router.resolve({
 		path: "/institution",
 		query: {
-			id: item.id
+			id: organizationInfo.node.id
 		}
 	});
 	window.open(curRoute.href, "_blank");
@@ -300,21 +332,6 @@ const handleClickUser = item => {
 	});
 	window.open(routeData.href, "_blank");
 };
-const handleGetOrgnization = async () => {
-	try {
-		const res = await getDecreeIssueOrganization({id: route.query.id});
-		console.log("发布机构", res);
-		if (res.code === 200 && res.data) {
-			let { id, image, name, ename } = res.data
-			Object.assign(box3TopTopData.value, { id, logo: image, name, eName: ename });
-			box3TopBottomData.value = res.data.personList;
-		}
-	} catch (error) {
-		box3TopTopData.value = { id: "", logo: "", name: "", eName: "" };
-		box3TopBottomData.value = [];
-		console.error("执行机构error", error);
-	}
-};
 
 onMounted(() => {
 	handleGetAreaList();
@@ -325,13 +342,19 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+.analysis-content {
+	:deep(span.highlight) {
+		background-color: #ffff00;
+	}
+}
+
 .introduction-wrap {
 	display: flex;
 	width: 1600px;
 	padding: 16px 0;
 	gap: 16px;
 
-	.left {
+	.page-left {
 		width: 20px;
 		flex: auto;
 
@@ -456,7 +479,7 @@ onMounted(() => {
 		}
 	}
 
-	.right {
+	.page-right {
 		width: 520px;
 		display: flex;
 		flex-direction: column;
@@ -465,10 +488,34 @@ onMounted(() => {
 		.box3 {
 			.box3-top {
 				margin-top: 2px;
+				padding: 0 22px 20px;
 				border-bottom: 1px solid rgba(234, 236, 238, 1);
 
+				.organization-list {
+					display: flex;
+					flex-wrap: wrap;
+					margin-bottom: 16px;
+					gap: 8px 16px;
+				}
+
+				.organization-button {
+					height: 36px;
+					background-color: var(--color-primary-100);
+					color: var(--bg-white-100);
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					border-radius: 6px;
+					cursor: pointer;
+					.button-text {
+						margin-right: 8px;
+						font-family: Microsoft YaHei;
+						font-size: 16px;
+						line-height: 16px;
+					}
+				}
+
 				.box3-top-top {
-					width: 473px;
 					height: 88px;
 					box-sizing: border-box;
 					border: 1px solid rgba(234, 236, 238, 1);
@@ -476,42 +523,13 @@ onMounted(() => {
 					background: rgba(247, 248, 249, 1);
 					display: flex;
 					align-items: center;
-					margin: 0 auto;
-					position: relative;
 					cursor: pointer;
 
-					.more {
-						position: absolute;
-						right: 17px;
-						top: 17px;
-						display: flex;
-						gap: 3px;
-
-						.text {
-							height: 16px;
-							color: rgba(5, 95, 194, 1);
-							font-family: Microsoft YaHei;
-							font-size: 14px;
-							font-weight: 400;
-							line-height: 16px;
-						}
-
-						.icon {
-							width: 16px;
-							height: 16px;
-
-							img {
-								width: 100%;
-								height: 100%;
-							}
-						}
-					}
-
 					.left {
 						width: 64px;
 						height: 64px;
 						margin-left: 17px;
-
+						font-size: 0px;
 						img {
 							width: 100%;
 							height: 100%;
@@ -519,7 +537,8 @@ onMounted(() => {
 					}
 
 					.right {
-						width: 370px;
+						width: 20px;
+						flex: auto;
 						margin-left: 15px;
 
 						.name {
@@ -544,9 +563,7 @@ onMounted(() => {
 				}
 
 				.box3-top-bottom {
-					width: 473px;
 					height: 193px;
-					margin: 0 auto;
 
 					.box3-top-bottom-header {
 						height: 40px;
@@ -623,10 +640,6 @@ onMounted(() => {
 									line-height: 24px;
 									letter-spacing: 0px;
 									text-align: left;
-									overflow: hidden;
-									text-overflow: ellipsis;
-									white-space: nowrap;
-									cursor: pointer;
 								}
 
 								.position {