Merge branch 'master' of http://8.140.26.4:10003/caijian/risk-monitor into zym-dev

.gitignore

@@ -10,6 +10,7 @@ lerna-debug.log*
 *.rar
 *.zip
 *.7z
+*.rest
 
 # Dependencies
 node_modules

src/App.vue

@@ -321,6 +321,13 @@ body {
 .el-popper[data-popper-placement^="top"] > .el-popper__arrow:before {
 	display: none;
 }
+
+/* 单行文本溢出隐藏显示省略号 */
+.one-line-ellipsis {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
 </style>
 
 <style lang="scss" scoped>

src/api/allUnion.js

@@ -7,32 +7,41 @@ import request from "@/api/request.js";
  * @param {String} params.date - 日期
  */
 export function getAllUnionList(params) {
-  return request({
-    method: 'GET',
-    url: `/api/union/union/unionList/${params.date}`
-  })
+	return request({
+		method: "GET",
+		url: `/api/union/union/unionList/${params.date}`,
+		params: {
+			domainId: params.domainId ? params.domainId : null
+		}
+	});
 }
 
 // 全联盟-获取排华数量
 /**
  * @header token
  */
-export function getUnionCount() {
-  return request({
-    method: 'GET',
-    url: `/api/union/union/unionCount`
-  })
+export function getUnionCount(params) {
+	return request({
+		method: "GET",
+		url: `/api/union/union/unionCount`,
+		params: {
+			currentPage: params.page ? params.page : 1,
+			pageSize: params.pageSize ? params.pageSize : 10,
+			domainId: params.domainId ? params.domainId : null
+		}
+	});
 }
 
 // 全联盟-获取排华联盟动态
 /**
  * @header token
  */
-export function getDynamic() {
-  return request({
-    method: 'GET',
-    url: `/api/union/union/dynamic`
-  })
+export function getDynamic(params) {
+	return request({
+		method: "GET",
+		url: `/api/union/union/dynamic`,
+		params
+	});
 }
 
 // 全联盟-获取排华联盟预警
@@ -42,10 +51,10 @@ export function getDynamic() {
  * @header token
  */
 export function getPrediction() {
-  return request({
-    method: 'GET',
-    url: `/api/union/union/prediction`
-  })
+	return request({
+		method: "GET",
+		url: `/api/union/union/prediction`
+	});
 }
 
 // 全联盟-获取排华联盟领域分布
@@ -55,10 +64,10 @@ export function getPrediction() {
  * @header token
  */
 export function getIndustry() {
-  return request({
-    method: 'GET',
-    url: `/api/union/union/industry`
-  })
+	return request({
+		method: "GET",
+		url: `/api/union/union/industry`
+	});
 }
 
 // 全联盟-获取排华联盟国家紧密度
@@ -68,8 +77,8 @@ export function getIndustry() {
  * @header token
  */
 export function getCountryRelation() {
-  return request({
-    method: 'GET',
-    url: `/api/union/union/countryRelation`
-  })
-}
+	return request({
+		method: "GET",
+		url: `/api/union/union/countryRelation`
+	});
+}
\ No newline at end of file

src/api/decree/background.js

@@ -12,6 +12,18 @@ export function getDecreeBackground(params) {
     })
 }
 
+// 前序政令
+/**
+ * @param {id} 
+ */
+export function getDecreePrev(params) {
+    return request({
+        method: 'GET',
+        url: `/api/administrativeOrderInfo/prev/${params.id}`,
+        params
+    })
+}
+
 // 相关事件
 /**
  * @param { id } 
@@ -34,4 +46,28 @@ export function getDecreeDepend(params) {
         url: `/api/administrativeOrderInfo/depend/${params.id}`,
         params
     })
+}
+
+// 主要指令
+/**
+ * @param { id } 
+ */
+export function getDecreeMainContent(params) {
+    return request({
+        method: 'GET',
+        url: `/api/administrativeOrderInfo/mainContent/${params.id}`,
+        params
+    })
+}
+
+// 相关实体
+/**
+ * @param { id } 
+ */
+export function getDecreeRelatedEntity(params) {
+    return request({
+        method: 'GET',
+        url: `/api/administrativeOrderInfo/relatedEntity/${params.id}`,
+        params
+    })
 }
\ No newline at end of file

src/api/decree/deepdig.js

 import request from "@/api/request.js";
 
+// 获取相关政令
+/**
+ * @param { id }
+ */
+export function getDecreeRelatedOrder(params) {
+    return request({
+        method: 'GET',
+        url: `/api/administrativeOrderInfo/relatedOrder/${params.id}`,
+        params
+    })
+}
+
 // 根据政令ID获取领域公司信息
 /**
  * @param {cRelated, id} 

src/api/decree/introduction.js

@@ -60,16 +60,17 @@ export function getDecreeSummary(params) {
     })
 }
 
-// 获取报告原文
+// 获取风险信号
 /**
  * @param {id} 
  */
-// export function getDecreeReport(params) {
-//     return request({
-//         method: 'GET',
-//         url: `/api/administrativeOrderInfo/contentUrl/${params.id}`,
-//     })
-// }
+export function getDecreeRiskSignal(params) {
+    return request({
+        method: 'GET',
+        url: `/api/administrativeOrderInfo/riskSignal/${params.id}`,
+        params
+    })
+}
 
 export function getDecreeReport(params) {
     return request({

src/api/intelligent/index.ts

+import request from "@/api/request.js";
+const INTELLECTUAL_API = "/intelligent-api";
+
+export class IntelligentResultWrapper<T> {
+	result: T;
+	status: string;
+}
+export class TextEntity {
+	text_span: string;
+	type: string;
+}
+// 智能化：提取文本实体
+export function extractTextEntity(text: string): Promise<IntelligentResultWrapper<TextEntity[]>> {
+	return request({
+		url: `${INTELLECTUAL_API}/extract-entity`,
+		method: "POST",
+		data: {
+			text
+		}
+	});
+}

src/api/news/newsBrief.js

@@ -35,7 +35,7 @@ export function getHotNews() {
 export function getHotNewsByArea(params) {
     return request({
         method: 'GET',
-        url: `/api/news/hotNews`,
+        url: `/api/news/hotAreaNews/${params.moduleId}`,
         params
     })
 }

src/api/thinkTank/overview.js

@@ -83,6 +83,15 @@ export function getThinkTankReport(params) {
   })
 }
 
+// 智库概览：政策建议（资源库-政策建议）
+export function getThinkTankOverviewPolicy(params) {
+  return request({
+    method: 'GET',
+    url: `/api/thinkTankOverview/policy`,
+    params
+  })
+}
+
 /*********  智库信息 */
 //智库百科:获取全局信息
 export function getThinkTankSummary(params) {
@@ -119,6 +128,13 @@ export function getThinkPolicyIndustry(params) {
     url: `/api/thinkTankInfo/policyIndustry/${params.id}/${params.year}`,
   })
 }
+//提出政策建议涉及部门分布
+export function getPolicyAdviceDeptDistribution(params){
+   return request({
+    method: 'GET',
+    url: `/api/thinkTankInfo/policyDepartment/${params.id}/${params.year}`,
+  })
+}
 
 //获取相关政策领域分布
 export function getThinkPolicyIndustryTotal(params) {
@@ -201,6 +217,15 @@ export const getThinkTankReportSummary = (params) => {
     }
   );
 }
+//智库报告：获取相关报告
+export const getThinkTankReportRelated = (params) => {
+  return request(
+    {
+      method: 'GET',
+      url: `/api/thinkTankReport/related/${params}`,
+    }
+  );
+}
 
 //获取报告原文
 export const getThinkTankReportcontentUrl = (params) => {

src/api/zmOverview/allElement/index.js

@@ -2,74 +2,99 @@ import request from "@/api/request.js";
 
 // 全要素统计
 export function getElementCount(params) {
-  return request({
-    method: 'GET',
-    url: `/api/element/elementCount/${params.date}`,
-  })
+	return request({
+		method: "GET",
+		url: `/api/element/elementCount/${params.date}`
+	});
+}
+
+// 美对华科技要素打压遏制数量趋势
+export function getElementSuppressTrend(params) {
+	return request({
+		method: "GET",
+		url: `/api/element/DomainContainmentTrend/${params.date}`,
+		params: {
+			domainId: params.domainId ? params.domainId : null
+		}
+	});
 }
 
 // 最新动态
 export function getNewDynamics() {
-  return request({
-    method: 'GET',
-    url: `/api/element/newDynamics`,
-  })
+	return request({
+		method: "GET",
+		url: `/api/element/newDynamics`
+	});
 }
 
 // 美对我要素打压情况
 /**
- * @param {currentPage, pageSize} 
+ * @param {currentPage, pageSize}
  */
 export function getElementSuppress(params) {
-  return request({
-    method: 'GET',
-    url: `/api/element/elementSuppress/${params.date}`,
-    params
-  })
+	return request({
+		method: "GET",
+		url: `/api/element/elementSuppress/${params.date}`,
+		params: {
+			elementId: params.elementId ? params.elementId : null,
+			page: params.currentPage,
+			pageSize: params.pageSize
+		}
+	});
 }
 
 // 关键词云-上
 /**
- * @param {date} 
+ * @param {date}
  */
 export function getKeyWordUp(params) {
-  return request({
-    method: 'GET',
-    url: `/api/element/getKeyWordUp/${params.date}`,
-  })
+	return request({
+		method: "GET",
+		url: `/api/element/getKeyWordUp/${params.date}`,
+		params: {
+			elementId: params.elementId ? params.elementId : null
+		}
+	});
 }
 
 // 美自身要素发展情况
 /**
- * @param {currentPage, pageSize} 
+ * @param {currentPage, pageSize}
  */
 export function getElementDevelop(params) {
-  return request({
-    method: 'GET',
-    url: `/api/element/elementDevelop/${params.date}`,
-    params
-  })
+	return request({
+		method: "GET",
+		url: `/api/element/elementDevelop/${params.date}`,
+		params: {
+			elementId: params.elementId ? params.elementId : null,
+			page: params.currentPage,
+			pageSize: params.pageSize
+		}
+	});
 }
 
 // 关键词云-下
 /**
- * @param {currentPage, pageSize} 
+ * @param {currentPage, pageSize}
  */
 export function getKeyWordDown(params) {
-  return request({
-    method: 'GET',
-    url: `/api/element/getKeyWordDown/${params.date}`,
-  })
+	return request({
+		method: "GET",
+		url: `/api/element/getKeyWordDown/${params.date}`,
+		params: {
+			elementId: params.elementId ? params.elementId : null
+		}
+	});
 }
 
 // 通过id获取政令详细信息
 /**
- * @param {id} 
+ * @param {id}
  */
 export function getOrderInfo(params) {
-  return request({
-    method: 'GET',
-    url: `/api/element/getOrderInfo/${params.id}`,
-    params
-  })
-}
+	return request({
+		method: "GET",
+		url: `/api/element/getOrderInfo/${params.id}`,
+		params
+	});
+}
\ No newline at end of file

src/assets/json/countryCoordMap.js

+export const countryCoordMap = {
+	// 亚洲
+	中国: [104.1954, 35.8617], // 中国地理中心
+	日本: [138.2529, 36.2048], // 日本地理中心
+	韩国: [127.7669, 35.9078], // 韩国首尔
+	朝鲜: [127.5101, 40.3399], // 朝鲜平壤
+	蒙古: [103.8198, 46.8625], // 蒙古乌兰巴托
+	越南: [108.2772, 14.0583], // 越南河内
+	泰国: [100.9925, 15.87], // 泰国曼谷
+	马来西亚: [101.9758, 4.2105], // 马来西亚吉隆坡
+	新加坡: [103.8198, 1.3521], // 新加坡
+	印度尼西亚: [113.9213, -0.7893], // 印尼雅加达
+	菲律宾: [121.774, 12.8797], // 菲律宾马尼拉
+	印度: [78.9629, 20.5937], // 印度新德里
+	巴基斯坦: [73.0479, 30.3753], // 巴基斯坦伊斯兰堡
+	孟加拉国: [90.3563, 23.685], // 孟加拉达卡
+	斯里兰卡: [80.7718, 7.8731], // 斯里兰卡科伦坡
+	尼泊尔: [85.3131, 27.7172], // 尼泊尔加德满都
+	不丹: [89.412, 27.5142], // 不丹廷布
+	缅甸: [96.1997, 21.9162], // 缅甸内比都
+	柬埔寨: [104.9162, 11.5621], // 柬埔寨金边
+	老挝: [102.4955, 19.8563], // 老挝万象
+	文莱: [114.9409, 4.5353], // 文莱斯里巴加湾
+	东帝汶: [125.573, -8.8742], // 东帝汶帝力
+	阿富汗: [69.1761, 33.9391], // 阿富汗喀布尔
+	伊拉克: [44.3661, 33.2232], // 伊拉克巴格达
+	伊朗: [53.688, 32.4279], // 伊朗德黑兰
+	沙特阿拉伯: [45.0792, 23.8859], // 沙特利雅得
+	阿联酋: [54.3705, 23.4241], // 阿联酋阿布扎比
+	阿曼: [57.595, 23.588], // 阿曼马斯喀特
+	科威特: [47.999, 29.3117], // 科威特科威特城
+	卡塔尔: [51.531, 25.2854], // 卡塔尔多哈
+	巴林: [50.5853, 26.0275], // 巴林麦纳麦
+	也门: [48.5164, 15.5527], // 也门萨那
+	约旦: [36.2384, 30.5852], // 约旦安曼
+	黎巴嫩: [35.5018, 33.8938], // 黎巴嫩贝鲁特
+	以色列: [35.2137, 31.0461], // 以色列耶路撒冷
+	巴勒斯坦: [35.2037, 31.9522], // 巴勒斯坦拉姆安拉
+	叙利亚: [36.8065, 33.5138], // 叙利亚大马士革
+	土耳其: [35.2433, 38.9637], // 土耳其安卡拉
+	塞浦路斯: [33.238, 35.1264], // 塞浦路斯尼科西亚
+	哈萨克斯坦: [66.9237, 48.0196], // 哈萨克斯坦努尔苏丹
+	吉尔吉斯斯坦: [74.5818, 42.8746], // 吉尔吉斯斯坦比什凯克
+	塔吉克斯坦: [68.7872, 38.5598], // 塔吉克斯坦杜尚别
+	乌兹别克斯坦: [69.2401, 41.3775], // 乌兹别克斯坦塔什干
+	土库曼斯坦: [59.5568, 38.9697], // 土库曼斯坦阿什哈巴德
+	阿塞拜疆: [47.5769, 40.1431], // 阿塞拜疆巴库
+	格鲁吉亚: [44.8337, 41.7151], // 格鲁吉亚第比利斯
+	亚美尼亚: [44.5136, 40.0691], // 亚美尼亚埃里温
+	// 欧洲
+	俄罗斯: [37.6184, 55.7558], // 俄罗斯莫斯科
+	德国: [10.4515, 51.1657], // 德国柏林
+	英国: [-3.436, 55.3781], // 英国伦敦
+	法国: [2.2137, 46.2276], // 法国巴黎
+	意大利: [12.5674, 41.8719], // 意大利罗马
+	西班牙: [-3.7492, 40.4637], // 西班牙马德里
+	葡萄牙: [-8.2275, 39.3999], // 葡萄牙里斯本
+	荷兰: [5.2913, 52.1326], // 荷兰阿姆斯特丹
+	比利时: [4.3517, 50.8503], // 比利时布鲁塞尔
+	卢森堡: [6.1296, 49.8153], // 卢森堡卢森堡市
+	瑞士: [8.2275, 46.8182], // 瑞士伯尔尼
+	奥地利: [16.3738, 48.2082], // 奥地利维也纳
+	爱尔兰: [-8.2439, 53.1424], // 爱尔兰都柏林
+	芬兰: [25.7482, 61.9241], // 芬兰赫尔辛基
+	瑞典: [18.6435, 60.1282], // 瑞典斯德哥尔摩
+	挪威: [10.7461, 60.472], // 挪威奥斯陆
+	丹麦: [9.5018, 56.2639], // 丹麦哥本哈根
+	冰岛: [-19.0208, 64.9631], // 冰岛雷克雅未克
+	波兰: [19.1451, 51.9194], // 波兰华沙
+	捷克: [14.4208, 50.0755], // 捷克布拉格
+	斯洛伐克: [19.699, 48.1486], // 斯洛伐克布拉迪斯拉发
+	匈牙利: [19.0402, 47.4979], // 匈牙利布达佩斯
+	罗马尼亚: [24.9375, 45.9432], // 罗马尼亚布加勒斯特
+	保加利亚: [23.3219, 42.7339], // 保加利亚索非亚
+	塞尔维亚: [20.4651, 44.804], // 塞尔维亚贝尔格莱德
+	克罗地亚: [16.0, 45.1], // 克罗地亚萨格勒布
+	斯洛文尼亚: [14.5146, 46.0569], // 斯洛文尼亚卢布尔雅那
+	波黑: [18.3564, 43.8486], // 波黑萨拉热窝
+	黑山: [19.2664, 42.4304], // 黑山波德戈里察
+	马其顿: [21.7453, 41.6086], // 北马其顿斯科普里
+	阿尔巴尼亚: [20.1683, 41.3275], // 阿尔巴尼亚地拉那
+	希腊: [21.8243, 39.0742], // 希腊雅典
+	乌克兰: [30.5234, 50.4501], // 乌克兰基辅
+	白俄罗斯: [27.5615, 53.9045], // 白俄罗斯明斯克
+	摩尔多瓦: [28.8613, 47.4116], // 摩尔多瓦基希讷乌
+	立陶宛: [25.2797, 54.6872], // 立陶宛维尔纽斯
+	拉脱维亚: [24.1052, 56.9496], // 拉脱维亚里加
+	爱沙尼亚: [24.7536, 59.437], // 爱沙尼亚塔林
+	马耳他: [14.5146, 35.8997], // 马耳他瓦莱塔
+	列支敦士登: [9.5215, 47.166], // 列支敦士登瓦杜兹
+	摩纳哥: [7.4215, 43.7384], // 摩纳哥摩纳哥城
+	安道尔: [1.5218, 42.5063], // 安道尔安道尔城
+	圣马力诺: [12.4417, 43.9424], // 圣马力诺圣马力诺市
+	梵蒂冈: [12.4534, 41.9028], // 梵蒂冈梵蒂冈城
+	// 非洲
+	埃及: [30.8025, 26.8206], // 埃及开罗
+	南非: [25.0, -30.0], // 南非比勒陀利亚
+	尼日利亚: [8.6753, 9.082], // 尼日利亚阿布贾
+	肯尼亚: [36.8219, -1.2921], // 肯尼亚内罗毕
+	埃塞俄比亚: [38.7469, 9.145], // 埃塞俄比亚亚的斯亚贝巴
+	坦桑尼亚: [34.8888, -6.369], // 坦桑尼亚达累斯萨拉姆
+	加纳: [-0.187, 5.6037], // 加纳阿克拉
+	科特迪瓦: [-5.581, 7.5399], // 科特迪瓦亚穆苏克罗
+	喀麦隆: [12.3578, 4.0417], // 喀麦隆雅温得
+	塞内加尔: [-17.4441, 14.6937], // 塞内加尔达喀尔
+	马里: [-7.6009, 17.5707], // 马里巴马科
+	布基纳法索: [-1.5332, 12.2383], // 布基纳法索瓦加杜古
+	尼日尔: [8.9676, 13.518], // 尼日尔尼亚美
+	乍得: [19.3973, 15.4542], // 乍得恩贾梅纳
+	苏丹: [32.535, 15.588], // 苏丹喀土穆
+	南苏丹: [31.6, 6.87], // 南苏丹朱巴
+	摩洛哥: [-7.6114, 31.7917], // 摩洛哥拉巴特
+	阿尔及利亚: [2.8235, 28.0339], // 阿尔及利亚阿尔及尔
+	突尼斯: [10.1815, 36.8065], // 突尼斯突尼斯市
+	利比亚: [17.2283, 26.3351], // 利比亚的黎波里
+	毛里塔尼亚: [-10.9408, 20.9373], // 毛里塔尼亚努瓦克肖特
+	塞拉利昂: [-13.2356, 8.4606], // 塞拉利昂弗里敦
+	利比里亚: [-9.5018, 6.4281], // 利比里亚蒙罗维亚
+	几内亚: [-9.6966, 9.9456], // 几内亚科纳克里
+	几内亚比绍: [-15.1804, 11.8037], // 几内亚比绍比绍
+	冈比亚: [-16.579, 13.4432], // 冈比亚班珠尔
+	贝宁: [2.3158, 6.3697], // 贝宁波多诺伏
+	多哥: [1.2226, 6.826], // 多哥洛美
+	加蓬: [11.601, 0.417], // 加蓬利伯维尔
+	"刚果(布)": [15.2829, -4.2634], // 刚果布拉柴维尔
+	"刚果(金)": [15.309, -4.4419], // 刚果金金沙萨
+	乌干达: [32.5825, 0.3476], // 乌干达坎帕拉
+	卢旺达: [30.058, -1.9403], // 卢旺达基加利
+	布隆迪: [29.3694, -3.3731], // 布隆迪布琼布拉
+	马拉维: [34.9, -13.5], // 马拉维利隆圭
+	赞比亚: [28.2871, -15.4067], // 赞比亚卢萨卡
+	津巴布韦: [30.1502, -17.8252], // 津巴布韦哈拉雷
+	博茨瓦纳: [24.6849, -24.6282], // 博茨瓦纳哈博罗内
+	纳米比亚: [18.5449, -22.5594], // 纳米比亚温得和克
+	莱索托: [28.2336, -29.61], // 莱索托马塞卢
+	斯威士兰: [31.1378, -26.5225], // 斯威士兰姆巴巴内
+	莫桑比克: [32.5709, -25.9655], // 莫桑比克马普托
+	马达加斯加: [46.8691, -18.7669], // 马达加斯加塔那那利佛
+	毛里求斯: [57.5522, -20.3484], // 毛里求斯路易港
+	科摩罗: [43.865, -11.8678], // 科摩罗莫罗尼
+	塞舌尔: [55.4919, -4.6737], // 塞舌尔维多利亚
+	佛得角: [-23.5087, 16.0], // 佛得角普拉亚
+	圣多美和普林西比: [6.6131, 0.3385], // 圣多美和普林西比圣多美
+	厄立特里亚: [38.9208, 15.1794], // 厄立特里亚阿斯马拉
+	吉布提: [43.145, 11.8251], // 吉布提吉布提市
+	索马里: [45.3438, 5.1521], // 索马里摩加迪沙
+	中非: [20.9394, 6.6111], // 中非班吉
+	赤道几内亚: [8.7815, 1.6508], // 赤道几内亚马拉博
+	"加那利群岛(西)": [-15.5974, 28.0966], // 加那利群岛拉斯帕尔马斯
+	西撒哈拉: [-12.8858, 24.2155], // 西撒哈拉阿尤恩
+	// 北美洲
+	美国: [-95.7129, 37.0902], // 美国华盛顿
+	加拿大: [-106.3468, 56.1304], // 加拿大渥太华
+	墨西哥: [-102.5528, 23.6345], // 墨西哥墨西哥城
+	危地马拉: [-90.5578, 15.7835], // 危地马拉危地马拉城
+	伯利兹: [-88.2075, 17.1899], // 伯利兹贝尔莫潘
+	萨尔瓦多: [-88.8965, 13.7942], // 萨尔瓦多圣萨尔瓦多
+	洪都拉斯: [-86.2419, 15.199], // 洪都拉斯特古西加尔巴
+	尼加拉瓜: [-85.2072, 12.8654], // 尼加拉瓜马那瓜
+	哥斯达黎加: [-84.0875, 9.7489], // 哥斯达黎加圣何塞
+	巴拿马: [-79.5199, 8.538], // 巴拿马巴拿马城
+	古巴: [-77.7812, 21.5218], // 古巴哈瓦那
+	海地: [-72.337, 18.9712], // 海地太子港
+	多米尼加: [-70.1627, 18.7357], // 多米尼加圣多明各
+	牙买加: [-76.802, 18.1096], // 牙买加金斯顿
+	巴哈马: [-77.34, 25.0343], // 巴哈马拿骚
+	巴巴多斯: [-59.5236, 13.1939], // 巴巴多斯布里奇顿
+	特立尼达和多巴哥: [-61.2225, 10.6918], // 特多西班牙港
+	格林纳达: [-61.6781, 12.1165], // 格林纳达圣乔治
+	圣卢西亚: [-60.9915, 13.9094], // 圣卢西亚卡斯特里
+	圣文森特和格林纳丁斯: [-61.2273, 13.2529], // 圣文森特金斯敦
+	安提瓜和巴布达: [-61.7964, 17.0608], // 安提瓜圣约翰
+	多米尼克: [-61.3709, 15.414], // 多米尼克罗索
+	圣基茨和尼维斯: [-62.7177, 17.3578], // 圣基茨巴斯特尔
+	"波多黎各(美)": [-66.5901, 18.2208], // 波多黎各圣胡安
+	"开曼群岛(英)": [-81.25, 19.2975], // 开曼群岛乔治敦
+	"百慕大(英)": [-64.8457, 32.3078], // 百慕大汉密尔顿
+	// 南美洲
+	巴西: [-51.9253, -14.235], // 巴西巴西利亚
+	阿根廷: [-68.3064, -38.4161], // 阿根廷布宜诺斯艾利斯
+	智利: [-71.5429, -35.6751], // 智利圣地亚哥
+	秘鲁: [-75.0152, -9.1899], // 秘鲁利马
+	哥伦比亚: [-74.0818, 4.711], // 哥伦比亚波哥大
+	委内瑞拉: [-66.9036, 6.4238], // 委内瑞拉加拉加斯
+	厄瓜多尔: [-78.5249, -0.1807], // 厄瓜多尔基多
+	玻利维亚: [-68.15, -16.5], // 玻利维亚苏克雷
+	巴拉圭: [-58.4434, -25.2637], // 巴拉圭亚松森
+	乌拉圭: [-56.1645, -34.9011], // 乌拉圭蒙得维的亚
+	圭亚那: [-58.1551, 6.8013], // 圭亚那乔治敦
+	苏里南: [-55.2038, 3.9193], // 苏里南帕拉马里博
+	法属圭亚那: [-52.3264, 4.9375], // 法属圭亚那卡宴
+	// 大洋洲
+	澳大利亚: [133.7751, -25.2744], // 澳大利亚堪培拉
+	新西兰: [174.886, -40.9006], // 新西兰惠灵顿
+	巴布亚新几内亚: [147.1557, -6.3149], // 巴新莫尔兹比港
+	所罗门群岛: [159.95, -9.6457], // 所罗门群岛霍尼亚拉
+	瓦努阿图: [167.6864, -16.5225], // 瓦努阿图维拉港
+	斐济: [179.4144, -18.1416], // 斐济苏瓦
+	萨摩亚: [-172.1626, -13.759], // 萨摩亚阿皮亚
+	汤加: [-175.1982, -21.1789], // 汤加努库阿洛法
+	基里巴斯: [173.038, 1.2921], // 基里巴斯塔拉瓦
+	密克罗尼西亚: [158.166, 6.9167], // 密克罗尼西亚帕利基尔
+	马绍尔群岛: [171.8485, 7.1315], // 马绍尔群岛马朱罗
+	帕劳: [134.5825, 7.5149], // 帕劳梅莱凯奥克
+	瑙鲁: [166.9315, -0.5228], // 瑙鲁亚伦
+	图瓦卢: [179.1942, -8.5243], // 图瓦卢富纳富提
+	"库克群岛(新)": [-159.7756, -21.2367], // 库克群岛阿瓦鲁阿
+	"纽埃(新)": [-169.8672, -19.0544], // 纽埃阿洛菲
+	"托克劳(新)": [-171.7415, -8.9672], // 托克劳法考福
+	美属萨摩亚: [-170.6991, -14.271], // 美属萨摩亚马努阿
+	"关岛(美)": [144.7937, 13.4443], // 关岛阿加尼亚
+	"北马里亚纳群岛(美)": [145.6739, 15.1178], // 北马里亚纳塞班
+	法属波利尼西亚: [-149.5986, -17.6797], // 法属波利尼西亚帕皮提
+	"新喀里多尼亚(法)": [166.4572, -21.5547] // 新喀里多尼亚努美阿
+};

src/common/constant.js

 export const TAGTYPE = ["primary", "success", "warning", "danger", "info"];
+
+// 双色图表
+export const DOUBLECHARTCOLORS = [
+  '#055FC2',
+  '#CE4F51'
+]
+
+// 多色图表预设颜色列表 20种
+export const MUTICHARTCOLORS = [
+	"#69B1FF",
+	"#FF7875",
+	"#B37FEB",
+	"#FFC069",
+	"#1677FF",
+	"#87E8DE",
+	"#ADC6FF",
+	"#FFBB96",
+	"#BAE0FF",
+	"#FFD591",
+	"#6691FF",
+	"#FFB2AF",
+	"#81D0FF",
+	"#D8E5FB",
+	"#7981F1",
+	"#FF9696",
+	"#6678A1",
+	"#273C57",
+	"#E8B8FF",
+	"#DF812E"
+];

src/components/Container/index.vue

@@ -103,6 +103,7 @@ const headerTitleClasses = computed(() => [
 	border-bottom: 1px solid #ebeef5;
 	/* background-color: #f8fafc; */
 	padding-left: 0;
+	// background: linear-gradient(180deg, rgb(231, 243, 255) 0%, rgba(231, 243, 255, 0) 100%);
 }
 
 .header-left {
@@ -132,10 +133,10 @@ const headerTitleClasses = computed(() => [
 }
 
 .header-icon {
-	width: 20px;
-	height: 20px;
+	width: 22px;
+	height: 18px;
 	margin-left: 5px;
-	margin-right: 19px;
+	margin-right: 14px;
 }
 
 .blue-title-block {
@@ -148,14 +149,13 @@ const headerTitleClasses = computed(() => [
 
 .header-title {
 	font-family: $base-font-family;
-	font-size: $base-font-size;
+	font-size: 20px;
 	font-weight: 700;
 	/* color: var(--color-main-active); */
 	/* color: var(--base-color); */
 	color: $base-color;
 	line-height: 48px;
-	padding: 0 12px;
-	font-size: 20px;
+	// padding: 0 12px;
 }
 
 .header-title-primary {

src/components/base/AreaTag/index.vue

@@ -41,6 +41,7 @@ const classObject = computed(() => ({
   height: 24px;
   padding: 0 8px;
   line-height: 24px;
+  width: fit-content;
   text-align: center;
   font-family: Microsoft YaHei;
   font-style: Regular;

src/components/base/WordCloundChart/index.vue

+<template>
+  <div class="wordcloud-wrapper" :style="{ width: width ? width : '520px', height: height ? height : '400px' }">
+    <div class="chart-box" id="wordcloud-chart">
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+import setChart from '@/utils/setChart';
+import getWordCloudChart from './wordCloudChart';
+
+const props = defineProps(({
+  width: {
+    type: String,
+    default: ''
+  },
+  height: {
+    type: String,
+    default: ''
+  },
+  data: {
+    type: Array,
+    default: [
+      // { name: "与马斯克公开冲突", value: 100 },
+      // { name: "传统能源", value: 5 },
+      // { name: "共和党财政鹰派", value: 77 },
+      // { name: "未实现赤字控制目标", value: 35 },
+      // { name: "得克萨斯州", value: 88 },
+      // { name: "选举压力", value: 57 },
+      // { name: "主张财政紧缩", value: 72 },
+      // { name: "财政保守", value: 18 },
+    ]
+  }
+}))
+
+onMounted(() => {
+  let chart = getWordCloudChart(props.data);
+  setChart(chart, "wordcloud-chart");
+})
+
+</script>
+
+<style lang="scss">
+.chart-box {
+  width: 100%;
+  height: 100%;
+}
+</style>
\ No newline at end of file

src/components/base/WordCloundChart/wordCloudChart.js

+import 'echarts-wordcloud';
+
+const getWordCloudChart = (data) => {
+      const option = {
+      grid: {
+        left: 5,
+        top: 5,
+        right: 5,
+        bottom: 5,
+      },
+      series: [
+        {
+          type: "wordCloud",
+          shape: 'circle',
+          width: '100%',
+          height: '100%',
+          // 其他形状你可以使用形状路径
+          // shape: 'circle', // 示例
+          // 或者自定义路径
+          gridSize: 35, // 网格大小，影响词间距。
+          sizeRange: [16, 36], // 定义词云中文字大小的范围
+          rotationRange: [0, 0],
+          rotationStep: 0,
+          drawOutOfBound: false,  // 是否超出画布
+          shrinkToFit: true,     // 是否自动缩小以适应容器
+          // 字体
+          textStyle: {
+            // normal: {
+            //   color: function () {
+            //     return 'rgb(' + [
+            //       Math.round(Math.random() * 160),
+            //       Math.round(Math.random() * 160),
+            //       Math.round(Math.random() * 160)
+            //     ].join(',') + ')';
+            //   }
+            // },
+            color: function () {
+              let colors = [
+                "rgba(189, 33, 33, 1)",
+                "rgba(232, 151, 21, 1)",
+                "rgba(220, 190, 68, 1)",
+                "rgba(96, 58, 186, 1)",
+                "rgba(32, 121, 69, 1)",
+                "rgba(22, 119, 255, 1)",
+              ];
+              return colors[parseInt(Math.random() * colors.length)];
+            },
+            emphasis: {
+              shadowBlur: 5,
+              shadowColor: "#333",
+            },
+          },
+          // 设置词云数据
+          data: data,
+        },
+      ],
+    };
+
+    return option
+}
+
+export default getWordCloudChart
\ No newline at end of file

src/components/base/boxBackground/analysisBox.vue

@@ -2,7 +2,10 @@
   <div class="analysis-box-wrapper" :style="{ width: width ? width : '100%', height: height ? height : '100%' }">
     <div class="wrapper-header">
       <div class="header-icon"></div>
-      <div class="header-title">{{ title }}</div>
+      <div class="header-title">
+        <div v-if="title">{{ title }}</div>
+        <slot v-else name="custom-title"></slot>
+      </div>
       <div class="header-btn" v-if="!showAllBtn">
         <slot name="header-btn"></slot>
       </div>
@@ -98,54 +101,51 @@ const emit = defineEmits(['save', 'download', 'collect'])
   .wrapper-header {
     height: 45px;
     display: flex;
+    padding-right: 14px;
+    align-items: center;
     box-sizing: border-box;
-    position: relative;
 
     .header-icon {
-      margin-top: 18px;
       width: 8px;
       height: 20px;
       background: var(--color-main-active);
       border-radius: 0 4px 4px 0;
+      margin-right: 14px;
     }
-
+    
     .header-title {
-      margin-left: 14px;
-      margin-top: 14px;
-      height: 26px;
+      flex: auto;
+      width: 20px;
       // color: var(--color-main-active);
       // font-family: Source Han Sans CN;
       // font-size: 20px;
       // font-weight: 700;
       // line-height: 26px;
       // letter-spacing: 0px;
-      height: 26px;
-      color: var(--color-main-active);
-      font-family: Microsoft YaHei;
-      font-size: 20px;
-      font-weight: 700;
-      line-height: 26px;
+      height: 100%;
+      &>div {
+        height: 100%;
+        color: var(--color-main-active);
+        font-family: Microsoft YaHei;
+        font-size: 20px;
+        line-height: 45px;
+        font-weight: 700;
+      }
     }
 
-    .header-btn {
-      position: absolute;
-      top: 14px;
-      right: 84px;
-      // display: flex;
-      // justify-content: flex-end;
-      // gap: 8px;
-    }
+    // .header-btn {
+    //   display: flex;
+    //   justify-content: flex-end;
+    //   gap: 8px;
+    // }
 
-    .header-btn1 {
-      position: absolute;
-      top: 14px;
-      right: 116px;
-    }
+    // .header-btn1 {
+    //   position: absolute;
+    //   top: 14px;
+    //   right: 116px;
+    // }
 
     .header-right {
-      position: absolute;
-      top: 14px;
-      right: 14px;
       height: 28px;
       display: flex;
       justify-content: flex-end;

src/components/base/images/ColorSvg.vue

@@ -8,7 +8,6 @@
 </template>
 
 <script setup lang="ts">
-import { size } from 'lodash';
 import { ref, computed, watch, onMounted } from 'vue';
 
 // 组件属性
@@ -83,7 +82,7 @@ const processedSvgContent = computed(() => {
         });
     }
 
-    console.log(processed)
+    // console.log(processed)
     return processed;
 });
 

src/components/base/moduleHeader/index.vue

@@ -323,10 +323,12 @@ onMounted(() => {
 
 		.nav-right {
 			display: flex;
+			align-items: center;
 			justify-content: flex-end;
 			gap: 21px;
 
 			.info-box {
+				height: 40px;
 				display: flex;
 				justify-content: flex-end;
 				align-items: center;

src/components/base/newsList/NewsItem.vue

 <template>
-  <div class="box3-item" @click="handleToNewsAnalysis(news)">
-    <div class="left">
-      <img :src="news[props.img] ? news[props.img] : DefaultIconNews" alt="" />
-    </div>
-    <div class="right">
-      <div class="right-top">
-        <div class="title"><span class="text-inner">{{ news[props.title] }}</span></div>
-        <div class="time">{{ news[props.from] }}</div>
+  <el-space alignment="flex-start" :size="10">
+    <img :width="97" :height="72" :src="news ?? DefaultIconNews" alt="" />
+    <el-space direction="vertical" alignment="flex-start" :size="0" fill>
+      <div class="full-width flex-display">
+        <common-text :line-limit="1" class="text-title-3-bold text-hover flex-fill"
+          color="var(--text-primary-80-color)">
+          {{ title }}
+        </common-text>
+        <common-text class="text-tip-2" color="var(--text-primary-65-color)">
+          {{ from }}
+        </common-text>
       </div>
-      <div class="right-footer">{{ news[props.content] }}</div>
-    </div>
-  </div>
+      <common-text :line-limit="contentLineLimit" class="text-compact" color="var(--text-primary-65-color)">
+        {{ content }}
+      </common-text>
+    </el-space>
+  </el-space>
 </template>
 
 <script setup>
 import DefaultIconNews from "@/assets/icons/default-icon-news.png";
-const props = defineProps({
-
-  // 新闻列表数据
-  news: {
-    type: Object,
-    default: () => { }
-  },
+import { ElSpace } from "element-plus";
+import CommonText from "../texts/CommonText.vue";
 
+const props = defineProps({
   img: {
     type: String,
-    default: 'img'
+    default: ''
   },
   title: {
     type: String,
-    default: "title"
+    default: ""
   },
   from: {
     type: String,
-    default: "from"
+    default: ""
   },
   content: {
     type: String,
-    default: "content"
+    default: ""
   },
-
+  contentLineLimit: {
+    type: Number,
+    default: 2
+  }
 });
-const emit = defineEmits(['item-click', 'more-click']);
-
-const handleToNewsAnalysis = (item, index) => {
-  emit('item-click', item, index)
-};
 </script>
 <style lang="scss" scoped>
 @use '@/styles/common.scss';
-
-.box3-item {
-  display: flex;
-  align-items: center;
-  height: 78px;
-  margin: 0px 21px;
-  cursor: pointer;
-
-  &:hover {
-    .right-top .title {
-      color: rgb(5, 95, 194) !important;
-      font-weight: 700;
-    }
-
-    .right-top .text-inner {
-      border-bottom-color: rgb(5, 95, 194) !important;
-    }
-  }
-}
-
-.left {
-  width: 97px;
-  // flex-shrink: 0;
-  height: 72px;
-
-  img {
-    width: 100%;
-    height: 100%;
-    border-radius: 4px;
-  }
-}
-
-.right {
-  flex: 1;
-  min-width: 0;
-  margin-left: 20px;
-
-  .right-top {
-    display: flex;
-    justify-content: space-between;
-
-    .title {
-      // width: 500px;
-      @extend .text-title-3-bold;
-      color: var(--text-primary-80-color);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-
-      .text-inner {
-        border-bottom: 1px solid transparent;
-
-      }
-    }
-
-    .time {
-      text-align: right;
-      @extend .text-tip-2;
-      color: var(--text-primary-65-color);
-    }
-  }
-
-  .right-footer {
-    @extend .text-compact;
-    color: var(--text-primary-65-color);
-    @include common.text-ellipsis(2);
-  }
-}
+@use '@/styles/container.scss';
 </style>
\ No newline at end of file

src/components/base/newsList/NewsItemMini.vue

+<template>
+  <el-space alignment="flex-start" :size="10">
+    <img :width="64" :height="52" :src="news ?? DefaultIconNews" alt="" />
+    <el-space direction="vertical" alignment="flex-start" :size="0">
+      <common-text :line-limit="1" class="text-regular text-hover" color="var(--text-primary-80-color)">
+        {{ title }}
+      </common-text>
+      <common-text :line-limit="1" class="text-tip-1" color="var(--text-primary-65-color)">
+        {{ from }}
+      </common-text>
+    </el-space>
+  </el-space>
+</template>
+
+<script setup>
+import DefaultIconNews from "@/assets/icons/default-icon-news.png";
+import { ElSpace } from "element-plus";
+import CommonText from "../texts/CommonText.vue";
+
+const props = defineProps({
+  img: {
+    type: String,
+    default: ''
+  },
+  title: {
+    type: String,
+    default: ""
+  },
+  from: {
+    type: String,
+    default: ""
+  }
+});
+</script>
+<style lang="scss" scoped>
+@use '@/styles/common.scss';
+</style>
\ No newline at end of file

src/components/base/newsList/NewsItem2.vue → src/components/base/newsList/NewsItemWithTag.vue

 <template>
     <div class="news-item">
         <el-space direction="vertical" class="flex-fill" alignment='flex-start'>
-            <common-text :lineLimit="1" class="text-bold" color="var(--text-primary-80-color)">{{
+            <common-text :lineLimit="1" class="text-bold text-hover" color="var(--text-primary-80-color)">{{
                 props.title
                 }}</common-text>
             <common-text class="text-tip-2" color="var(--text-primary-65-color)">
@@ -12,7 +12,6 @@
             </el-space>
         </el-space>
         <img style="width: 122px; height: 82px" :src="props.img">
-        <!-- <img v-else style="width: 122px; height: 82px" :src="DefaultIconNews"> -->
     </div>
 </template>
 

src/components/base/newsList/index.vue

@@ -80,6 +80,7 @@ const handleToNewsAnalysis = (item, index) => {
 	flex-direction: column;
 	gap: 0 !important;
 	overflow: hidden;
+	border: 1px solid rgba(234, 236, 238, 1) !important;
 
 	.news-header {
 		height: 48px !important;
@@ -149,6 +150,7 @@ const handleToNewsAnalysis = (item, index) => {
 
 			&:hover {
 				background: var(--color-bg-hover);
+
 				.right-top .title {
 					text-decoration: underline;
 					color: rgb(5, 95, 194) !important;

src/components/base/pageBtn/leftBtn.vue

@@ -12,6 +12,7 @@
 .left-btn-wrapper {
   width: 24px;
   height: 48px;
+  cursor: pointer
 
   img {
     width: 100%;

src/components/base/pageBtn/rightBtn.vue

@@ -12,7 +12,7 @@
 .right-btn-wrapper {
   width: 24px;
   height: 48px;
-
+  cursor: pointer
   img {
     width: 100%;
     height: 100%;

src/components/base/texts/CommonText.vue

 <template>
-    <div class="common-text">
+    <div class="common-text-box-hudf">
         <slot></slot>
     </div>
 </template>
@@ -18,8 +18,8 @@ const props = defineProps({
 <style lang="scss" scoped>
 @use '@/styles/common.scss';
 
-.common-text {
-    color: v-bind(color);
+.common-text-box-hudf {
+    color: v-bind(color) !important;
 
     @if('v-bind(lineLimit) !==null') {
         @include common.text-ellipsis(v-bind(lineLimit));

src/components/base/texts/IntelligentEntityText.vue

+<template>
+    <p class="p-regular-rereg">
+        <span class="text-regular" v-for="(segment, index) in processedText" :key="index">
+            <a v-if="segment.isEntity" :href="`https://cn.bing.com/search?q=${segment.entity?.text_span}`"
+                class="entity-link" target="_blank" rel="noopener noreferrer">
+                {{ segment.entity?.text_span }}
+                <img :src="SearchIcon" :width="10" :height="10" alt="search" />
+            </a>
+            <span v-else>
+                {{ segment.text }}
+            </span>
+        </span>
+    </p>
+</template>
+<script lang="ts" setup>
+import { TextEntity } from '@/api/intelligent';
+import { ref, watch, onMounted } from 'vue';
+import SearchIcon from './images/search.png'
+
+export interface ProcessedTextSegment {
+    text: string
+    isEntity: boolean
+    entity?: TextEntity
+}
+const props = defineProps({
+    text: {
+        type: String,
+        default: ''
+    },
+    entities: {
+        type: Array<TextEntity>,
+        default: () => []
+    }
+})
+
+// 处理后的文本段
+const processedText = ref<ProcessedTextSegment[]>([])
+// 处理文本，识别并替换实体
+const processText = () => {
+    console.log('props.entities.length', props.entities.length)
+    if (!props.text || !props.entities) {
+        // console.log('props.text', props.entities.length)
+        processedText.value = [{ text: '', isEntity: false }]
+        return
+    }
+
+    const result = []
+    let currentPosition = 0
+
+    // 按实体文本长度排序，优先匹配长文本
+    const sortedEntities = [...props.entities].sort((a, b) =>
+        b.text_span.length - a.text_span.length
+    )
+
+    while (currentPosition < props.text.length) {
+        let matched = false
+
+        for (const entity of sortedEntities) {
+            const entityText = entity.text_span
+            const endPosition = currentPosition + entityText.length
+
+            if (props.text.substring(currentPosition, endPosition) === entityText) {
+                // 如果当前位置是实体，添加到结果
+                result.push({
+                    isEntity: true,
+                    entity: { ...entity }
+                })
+                currentPosition = endPosition
+                matched = true
+                break
+            }
+        }
+
+        if (!matched) {
+            // 如果不是实体，收集普通文本
+            let nextEntityStart = props.text.length
+
+            for (const entity of sortedEntities) {
+                const pos = props.text.indexOf(entity.text_span, currentPosition)
+                if (pos !== -1 && pos < nextEntityStart) {
+                    nextEntityStart = pos
+                }
+            }
+
+            if (nextEntityStart > currentPosition) {
+                const plainText = props.text.substring(currentPosition, nextEntityStart)
+                result.push({
+                    text: plainText,
+                    isEntity: false
+                })
+                currentPosition = nextEntityStart
+            } else {
+                // 没有更多实体，添加剩余文本
+                const remainingText = props.text.substring(currentPosition)
+                if (remainingText) {
+                    result.push({
+                        text: remainingText,
+                        isEntity: false
+                    })
+                }
+                currentPosition = props.text.length
+            }
+        }
+    }
+
+    processedText.value = result
+}
+// 监听文本和实体变化
+watch(() => props.text, processText)
+watch(() => props.entities, processText, { deep: true })
+
+// 初始化处理
+onMounted(processText)
+</script>
+<style lang="scss" scoped>
+@use '@/styles/common.scss';
+
+.entity-link {
+    color: var(--color-primary-100);
+}
+
+.p-regular-rereg {
+    text-indent: 2em;
+}
+</style>
\ No newline at end of file

src/components/base/texts/TextTranslatePane.vue

+<template>
+    <div class="full-width">
+        <div class="flex-display" style="align-items: center;">
+            <common-text class="text-title-3-bold" color="var(--text-primary-80-color)">{{ isOpenTranslation
+                ? '中文' : '原文' }}</common-text>
+            <div class="flex-fill" style="margin: 0 10px;">
+                <el-divider></el-divider>
+            </div>
+            <el-button v-if="showMoreVisible" @click="() => { showMore = !showMore; updateText() }">
+                {{ showMore ? '收起' : '展开' }}
+                <el-icon>
+                    <arrow-down v-if="showMore" />
+                    <arrow-up v-else />
+                </el-icon>
+            </el-button>
+        </div>
+        <el-row :gutter="32">
+            <el-col :span="textColSpan" v-for="(item, index) in allTexts" :key="index">
+                <!-- <p class="p-news-content"> {{ item }}</p> -->
+                <intelligent-entity-text :text="item"
+                    :entities="isHighlightEntity ? textEntities : []"></intelligent-entity-text>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+<script lang="ts" setup>
+import '@/styles/container.scss';
+import '@/styles/common.scss';
+
+import { ref, watch, onMounted } from 'vue';
+import { TextEntity } from '@/api/intelligent';
+import IntelligentEntityText from '@/components/base/texts/IntelligentEntityText.vue';
+import { ElIcon, ElButton, ElDivider, ElRow, ElCol } from 'element-plus';
+import CommonText from './CommonText.vue';
+
+const allTexts = ref([]);
+const textColSpan = ref(12);
+const hasTranslation = ref(false);
+const showMore = ref(false);
+const showMoreVisible = ref(false);
+const props = defineProps({
+    //段落列表： 原始文本
+    textsRaw: {
+        type: Array<String>,
+        default: () => []
+    },
+    //段落列表： 翻译文本
+    textsTranslate: {
+        type: Array<String>,
+        default: () => []
+    },
+    //是否显示翻译
+    isOpenTranslation: {
+        type: Boolean,
+        default: true
+    },
+    //是否高亮实体
+    isHighlightEntity: {
+        type: Boolean,
+        default: true
+    },
+    //实体列表
+    textEntities: {
+        type: Array<TextEntity>,
+        default: () => []
+    }
+})
+
+function updateText() {
+    const tempTexts = []
+    const tempRaws = props.textsRaw ?? []
+    const tempTranslates = props.textsTranslate ?? []
+    hasTranslation.value = tempTranslates.length > 0
+
+    if (hasTranslation.value && props.isOpenTranslation) {
+        // 遍历原始文本和翻译文本，将它们交替添加到 tempTexts 中,并保持原始文本和翻译文本的的数量一致
+        const maxCount = Math.max(tempRaws.length, tempTranslates.length)
+        for (let i = 0; i < maxCount; i++) {
+            if (i < tempTranslates.length) {
+                tempTexts.push(tempTranslates[i]);
+            } else {
+                tempTexts.push('');
+            }
+            if (i < tempRaws.length) {
+                tempTexts.push(tempRaws[i]);
+            } else {
+                tempTexts.push('');
+            }
+        }
+        console.log(tempTexts.length)
+        textColSpan.value = 12;
+        showMoreVisible.value = tempTexts.length > 6;
+        allTexts.value = showMore.value ? tempTexts : tempTexts.slice(0, 6);
+    } else {
+        textColSpan.value = 24;
+        showMoreVisible.value = tempRaws.length > 3;
+        allTexts.value = showMore.value ? tempRaws : tempRaws.slice(0, 3);
+    }
+}
+
+watch(() => [props.textsRaw, props.textsTranslate, props.isOpenTranslation], () => {
+    updateText();
+})
+
+
+onMounted(() => {
+    updateText();
+})
+</script>
\ No newline at end of file

src/router/modules/comprehensiveSearch.js

@@ -33,4 +33,15 @@ const comprehensiveSearchRoutes = [
 
 ]
 
+import { useGotoPage } from "../common.js";
+
+export function useGotoComprehensiveSearch() {
+  const gotoPage = useGotoPage();
+  return (isNewTabs = true) => gotoPage("/comprehensiveSearch/", {}, isNewTabs)
+}
+export function useGotoSearchResults() {
+  const gotoPage = useGotoPage();
+  return (isNewTabs = true) => gotoPage("/searchResults/", {searchText, areaName}, isNewTabs)
+}
+
 export default comprehensiveSearchRoutes
\ No newline at end of file

src/router/modules/decree.js

@@ -4,6 +4,7 @@ const DecreeLayoutContainer = () => import('@/views/decree/decreeLayout/index.vu
 const DecreeOverviewLayout = () => import('@/views/decree/decreeLayout/overview/index.vue')
 const DecreeIntroduction = () => import('@/views/decree/decreeLayout/overview/introduction/index.vue')
 const DecreeBackground = () => import('@/views/decree/decreeLayout/overview/background/index.vue')
+const DecreeMeasures = () => import('@/views/decree/decreeLayout/overview/measures/index.vue')
 const DecreeDeepDig = () => import('@/views/decree/decreeLayout/deepdig/index.vue')
 const DecreeInfluence = () => import('@/views/decree/decreeLayout/influence/index.vue')
 const Institution = () => import('@/views/decree/institution/index.vue')
@@ -50,7 +51,13 @@ const decreeRoutes = [
             name: "DecreeBackground",
             component: DecreeBackground,
             // meta: { title: "政令背景" }
-          }
+          },
+          {
+            path: "measures",
+            name: "DecreeMeasures",
+            component: DecreeMeasures,
+            // meta: { title: "政令举措" }
+          },
         ]
       },
       // 深度挖掘路由

src/styles/common.scss

@@ -71,6 +71,14 @@
     color: var(--text-primary-80);
 }
 
+.text-hover {
+    &:hover {
+        color: rgb(5, 95, 194) !important;
+        font-weight: 700;
+        cursor: pointer;
+    }
+}
+
 //0级标题
 .text-title-0 {
     @extend .text-base;

src/styles/components/ActionButton/index.vue

+<template>
+  <el-row class="wrapper layout-grid-line">
+    <el-col :span="span">
+      <pre>
+        {{
+          `
+      import ActionButton from '@/components/base/ActionButton/index.vue'
+      <ActionButton name="全部选项" type="active" />
+      <ActionButton name="选项A" type="normal" />
+      <ActionButton name="选项B" type="normal" />
+      <ActionButton name="选项C" type="normal" />
+
+      选项按钮
+  `
+        }}
+      </pre>
+      <div class="button-box">
+        <ActionButton name="全部选项" type="active" />
+        <ActionButton name="选项A" type="normal" />
+        <ActionButton name="选项B" type="normal" />
+        <ActionButton name="选项C" type="normal" />
+      </div>
+
+    </el-col>
+
+    <el-col :span="span">
+      <pre>
+        {{
+          `
+      import LeftBtn from '@/components/base/PageBtn/LeftBtn.vue'
+      import RightBtn from '@/components/base/PageBtn/RightBtn.vue'
+
+      <LeftBtn />
+      <RightBtn />
+        
+      左右按钮
+  `
+        }}
+      </pre>
+      <div class="button-box1">
+        <LeftBtn />
+        <RightBtn />
+      </div>
+
+    </el-col>
+  </el-row>
+</template>
+
+<script setup>
+import '@/styles/common.scss'
+import LeftBtn from '@/components/base/PageBtn/LeftBtn.vue'
+import RightBtn from '@/components/base/PageBtn/RightBtn.vue'
+const span = 12
+</script>
+
+<style lang="scss" scoped>
+.button-box {
+  margin-left: 40px;;
+  display: flex;
+  gap: 8px
+}
+
+.button-box1 {
+  width: 200px;
+  display: flex;
+  justify-content: space-between;
+  margin-left: 40px;
+  margin-bottom: 10px;
+  gap: 8px
+}
+</style>
\ No newline at end of file

src/styles/components/AreaTag/index.vue

+<template>
+  <el-row class="wrapper layout-grid-line">
+    <el-col :span="span">
+      <pre>
+        {{
+  `
+  import AreaTag from '@/components/base/AreaTag/index.vue'
+      <AreaTag tagName="人工智能" />
+      <AreaTag tagName="生物科技" />
+      <AreaTag tagName="新一代通信网络" />
+      <AreaTag tagName="量子科技" />
+      <AreaTag tagName="新能源" />
+  `
+        }}
+      </pre>
+      <div class="tag-box">
+      <AreaTag tagName="人工智能" />
+      <AreaTag tagName="生物科技" />
+      <AreaTag tagName="新一代通信网络" />
+      <AreaTag tagName="量子科技" />
+      <AreaTag tagName="新能源" />
+      </div>
+
+    </el-col>
+  </el-row>
+</template>
+
+<script setup>
+import '@/styles/common.scss'
+import AreaTag from '@/components/base/AreaTag/index.vue'
+const span = 12
+</script>
+
+<style lang="scss" scoped>
+.tag-box{
+  display: flex;
+  gap: 8px
+}
+</style>
\ No newline at end of file

src/styles/components/CommonPage/index.vue

@@ -38,6 +38,14 @@ const span = 12
     </pre>
             <div class="mouse-hover">鼠标悬停</div>
         </el-col>
+        <el-col :span="span">
+            <pre>{{ `import '@/styles/common.scss';\n<template>
+    <div class="text-hover"></div>
+</template>
+        `}}
+    </pre>
+            <div class="text-hover">文字悬停</div>
+        </el-col>
     </el-row>
 </template>
 

src/styles/components/TextPage/TranslateExample.vue

+<template>
+    <el-space direction="vertical" class="common-padding" fill alignment="flex-start">
+        <el-space>
+            <el-switch v-model="isHightLightEntity" active-text="高亮实体" @change="console.log(isHightLightEntity)" />
+            <el-switch v-model="isOpenTranslation" active-text="译文" />
+        </el-space>
+        <text-translate-pane :texts-raw="textEns" :texts-translate="textZns" :text-entities="textEntities"
+            :is-open-translation="isOpenTranslation" :is-highlight-entity="isHightLightEntity">
+        </text-translate-pane>
+    </el-space>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import TextTranslatePane from '@/components/base/texts/TextTranslatePane.vue'
+import { ElSwitch, ElButton, ElSpace } from 'element-plus'
+const isOpenTranslation = ref(true);
+const isHightLightEntity = ref(true);
+const textEntities = ref([{
+    text_span: '美国',
+    type: '国家'
+},
+{
+    text_span: 'U.S.',
+    type: '国家'
+}]);
+const textZns = ref(['华盛顿当地时间2024年7月2日，美国商务部产业与安全局（BIS）',
+    '发布一项最终规则，宣布修订《出口管理条例》（EAR） ，',
+    '以违反美国国家安全或外交政策利益为由在实体清单中增列来自四个国家的6个实体，其中包括2家中国企业。[1]',
+    '多余段落-测试']);
+const textEns = ref(['Washington local time on July 2, 2024, the U.S. Department of Commerce, Industry and Security (BIS) released a final rule, announcing the revision of the Export Administration Regulations (EAR) ,',
+    'Violating the U.S. national security or diplomatic policy interests, BIS increased the list of 6 entities from four countries, including 2 Chinese companies, on the entity list. [1]',
+    'Your company has a large amount of money in the U.S.',
+]);
+
+</script>
+<style scoped>
+:deep(.el-col) {
+    border: 0px !important;
+}
+</style>

src/styles/components/TextPage/index.vue

@@ -4,6 +4,9 @@ import '@/styles/tabs.scss'
 import ColorPrefixTitle from '@/components/base/texts/ColorPrefixTitle.vue';
 import AiTipPane from '@/components/base/panes/AiTipPane.vue';
 import CommonText from '@/components/base/texts/CommonText.vue';
+import IntelligentEntityText from '@/components/base/texts/IntelligentEntityText.vue';
+import TranslateExample from './TranslateExample.vue';
+
 const span = 12
 </script>
 
@@ -50,6 +53,40 @@ const span = 12
     </pre>
             <ai-tip-pane>huidadadadadasda</ai-tip-pane>
         </el-col>
+
+        <el-col :span="span">
+            <pre>{{ `import IntelligentEntityText from '@/components/base/texts/IntelligentEntityText.vue';\n<template>
+    <intelligent-entity-text
+        text="华盛顿当地时间2024年7月2日，美国商务部产业与安全局（BIS） 发布一项最终规则，宣布修订《出口管理条例》（EAR） ，以违反美国国家安全或外交政策利益为由在实体清单 中增列来自四个国家的6个实体，其中包括2家中国企业。[1]"
+        :entities="[{
+            text_span: '华盛顿',
+            type: 'location'
+        }, {
+            text_span: '美国商务部产业与安全局',
+            type: 'organization'
+        }]">
+    </intelligent-entity-text>
+</template>
+        `}}
+    </pre>
+            <intelligent-entity-text
+                text="华盛顿当地时间2024年7月2日，美国商务部产业与安全局（BIS） 发布一项最终规则，宣布修订《出口管理条例》（EAR） ，以违反美国国家安全或外交政策利益为由在实体清单 中增列来自四个国家的6个实体，其中包括2家中国企业。[1]"
+                :entities="[{
+                    text_span: '华盛顿',
+                    type: 'location'
+                }, {
+                    text_span: '美国商务部产业与安全局',
+                    type: 'organization'
+                }]">
+            </intelligent-entity-text>
+        </el-col>
+
+        <el-col :span="span">
+            <pre>{{ `参考src/styles/components/TextPage/TranslateExample.vue` }}
+    </pre>
+            <translate-example>
+            </translate-example>
+        </el-col>
     </el-row>
 </template>
 

src/styles/components/WordCloudChart/index.vue

+<template>
+  <el-row class="wrapper layout-grid-line">
+    <el-col :span="span">
+      <pre>
+        {{
+          `
+          import WordCloudChart from "@/components/base/WordCloundChart/index.vue"
+          <div class="chart-box">
+            <WordCloudChart :data="data" />
+          </div>
+          `
+        }}
+      </pre>
+      <div class="chart-box">
+        <WordCloudChart :data="data" />
+      </div>
+
+    </el-col>
+
+  </el-row>
+</template>
+
+<script setup>
+import {ref} from 'vue'
+import '@/styles/common.scss'
+import WordCloudChart from "@/components/base/WordCloundChart/index.vue"
+const span = 12
+
+const data = ref([
+  { name: "与马斯克公开冲突", value: 100 },
+  { name: "传统能源", value: 5 },
+  { name: "共和党财政鹰派", value: 77 },
+  { name: "未实现赤字控制目标", value: 35 },
+  { name: "得克萨斯州", value: 88 },
+  { name: "选举压力", value: 57 },
+  { name: "主张财政紧缩", value: 72 },
+  { name: "财政保守", value: 18 },
+])
+</script>
+
+<style lang="scss" scoped>
+.chart-box {
+  width: 520px;
+  height: 400px;
+  border: 1px solid var(--bg-black-5);
+}
+</style>
\ No newline at end of file

src/styles/components/devStyle.scss

 .layout-grid-line {
-    .el-col {
+    .el-col:not(disinheritance) {
         border: 1px double var(--bg-black-5);
     }
 

src/styles/components/index.vue

@@ -8,7 +8,7 @@
                 <div class="text-title-1-show">文字样式</div>
                 <TextStyle />
                 <div class="text-title-1-show">通用样式/组件</div>
-                <div style="position: relative; min-height: 300px;">
+                <div style="position: relative; min-height: 700px;">
                     <el-tabs tabPosition="left" class="tabs-nav-no-wrap left-float-nav-tabs">
                         <el-tab-pane label="通用" lazy>
                             <common-page />
@@ -31,12 +31,21 @@
                         <el-tab-pane label="预警面板" lazy>
                             <WarnningPane />
                         </el-tab-pane>
+                        <el-tab-pane label="领域标签" lazy>
+                            <AreaTag />
+                        </el-tab-pane>
+                        <el-tab-pane label="按钮" lazy>
+                            <ActionButton />
+                        </el-tab-pane>
                         <el-tab-pane label="层级关系图" lazy>
                             <GraphChart />
                         </el-tab-pane>
                         <el-tab-pane label="引力关系图" lazy>
                             <GraphTreeChart />
                         </el-tab-pane>
+                        <el-tab-pane label="词云图" lazy>
+                            <WordCloudChart />
+                        </el-tab-pane>
                     </el-tabs>
                 </div>
             </el-space>
@@ -59,6 +68,9 @@ import PeoplePage from './People/index.vue';
 import WarnningPane from './WarnningPane/index.vue'
 import GraphChart from './GraphChart/index.vue'
 import GraphTreeChart from './GraphTreeChart/index.vue'
+import AreaTag from './AreaTag/index.vue'
+import ActionButton from './ActionButton/index.vue'
+import WordCloudChart from './WordCloudChart/index.vue'
 </script>
 
 <style lang="scss" scoped>

src/views/ZMOverView/components/fourSuppress/components/addDomain/index.vue

@@ -141,12 +141,30 @@
 					@page-change="handleNewsPageChange"
 				/>
 			</div>
+			<!-- <custom-container title="美对华领域打压遏制排行" :titleIcon="icon3" height="700px">
+				<template #header-right>
+					<div class="title-right-select">
+						<el-select
+							v-model="selectedField"
+							@change="handleFieldChange"
+							placeholder="全部领域"
+							class="field-select"
+							:style="{ width: '160px' }"
+						>
+							<el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" />
+						</el-select>
+					</div>
+				</template>
+			</custom-container> -->
 			<div class="empty-section">
 				<div class="bottom-item">
 					<div class="bottom-item-title">
 						<img :src="icon3" alt="" />
 						<span>美对华领域打压遏制排行</span>
 					</div>
+					<el-select v-model="selectedField" placeholder="全部领域" class="field-select">
+						<el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" />
+					</el-select>
 				</div>
 				<div class="select-box">
 					<div class="rank-btns">
@@ -160,13 +178,18 @@
 							受打压院校
 						</div>
 					</div>
-					<el-select v-model="selectedField" placeholder="全部领域" class="field-select">
-						<el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" />
-					</el-select>
 				</div>
 				<div class="main-box" v-loading="rankLoading" element-loading-background="rgba(255, 255, 255, 0.5)">
-					<!-- 机构排行的原有样式 -->
 					<template v-if="rankType === 'institution'">
+						<div class="table-header">
+							<div class="col-rank col-rank-75"></div>
+							<div class="col-name" style="color: rgb(59, 65, 75); font-weight: 700">部门名称</div>
+							<div class="col-domain" style="color: rgb(59, 65, 75); font-weight: 700"></div>
+							<div class="col-date" style="color: rgb(59, 65, 75); font-weight: 700"></div>
+							<div class="col-member" v-if="rankType !== 'school'" style="color: rgb(59, 65, 75); font-weight: 700">
+								打压次数
+							</div>
+						</div>
 						<div v-for="(item, index) in rankList" :key="index" class="rank-item">
 							<div class="rank-num" :class="'rank-' + (index + 1)">{{ index + 1 }}</div>
 							<img :src="item.orgPicture ? item.orgPicture : defaultImg" alt="" class="rank-icon" />
@@ -177,7 +200,6 @@
 							<div class="rank-count">{{ item.count }}次</div>
 						</div>
 					</template>
-					<!-- 企业/院校排行的表格样式 -->
 					<template v-else>
 						<div class="table-header">
 							<div class="col-rank"></div>
@@ -210,7 +232,6 @@
 									</div>
 								</div>
 								<div class="col-date">{{ item.date }}</div>
-								<!-- <div class="col-member" v-if="rankType !== 'school'">{{ item.member }}</div> -->
 								<div class="col-member" v-if="rankType !== 'school'">{{ item.province }}</div>
 							</div>
 						</div>
@@ -315,10 +336,13 @@ import getMultiLineChart from "./multiLineChart";
 import CommonPrompt from "../../../../commonPrompt/index.vue";
 import leftBtn from "../../assets/left-btn.png";
 import rightBtn from "../../assets/right-btn.png";
+import icon1 from "./icon/icon-1.png";
 import icon3 from "./icon/icon-3.png";
 import icon4 from "./icon/icon-4.png";
 import defaultImg from "../../../../assets/images/default-icon2.png";
 
+import { fieldOptions } from "@/views/ZMOverView/public.js";
+
 import {
 	getAllDomainCount,
 	getDomainContainmentTrend,
@@ -330,6 +354,7 @@ import { getUSGovernmentLatestDynamic, getDepartmentList, getSanTypeList } from
 import { ElMessage } from "element-plus";
 import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
 import SimplePagination from "@/components/SimplePagination.vue";
+import CustomContainer from "@/components/Container/index.vue";
 
 const router = useRouter();
 
@@ -752,23 +777,23 @@ const svgHeight = computed(() => {
 	return startY + rows * rowHeight + 50;
 });
 
-const fieldOptions = [
-	{ value: "", label: "全部领域" },
-	{ value: "1", label: "人工智能" },
-	{ value: "2", label: "生物科技" },
-	{ value: "3", label: "新一代信息技术" },
-	{ value: "4", label: "量子科技" },
-	{ value: "5", label: "新能源" },
-	{ value: "6", label: "集成电路" },
-	{ value: "7", label: "海洋" },
-	{ value: "8", label: "先进制造" },
-	{ value: "9", label: "新材料" },
-	{ value: "10", label: "航空航天" },
-	{ value: "11", label: "深海" },
-	{ value: "12", label: "极地" },
-	{ value: "13", label: "太空" },
-	{ value: "14", label: "核" }
-];
+// const fieldOptions = [
+// 	{ value: "", label: "全部领域" },
+// 	{ value: "1", label: "人工智能" },
+// 	{ value: "2", label: "生物科技" },
+// 	{ value: "3", label: "新一代信息技术" },
+// 	{ value: "4", label: "量子科技" },
+// 	{ value: "5", label: "新能源" },
+// 	{ value: "6", label: "集成电路" },
+// 	{ value: "7", label: "海洋" },
+// 	{ value: "8", label: "先进制造" },
+// 	{ value: "9", label: "新材料" },
+// 	{ value: "10", label: "航空航天" },
+// 	{ value: "11", label: "深海" },
+// 	{ value: "12", label: "极地" },
+// 	{ value: "13", label: "太空" },
+// 	{ value: "14", label: "核" }
+// ];
 
 // 全领域统计
 const buttonsData = ref([]);
@@ -1614,8 +1639,8 @@ watch(activeDate, () => {
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
-			padding-left: 17px;
-			padding-right: 35px;
+			padding-left: 16px;
+			padding-right: 16px;
 			box-sizing: border-box;
 			background: linear-gradient(180deg, rgba(231, 243, 255, 1) 0%, rgba(231, 243, 255, 0) 100%);
 			.bottom-item-title {
@@ -1634,14 +1659,19 @@ watch(activeDate, () => {
 					color: rgb(5, 95, 194);
 				}
 			}
+			.field-select {
+				width: 160px;
+			}
 		}
 		.select-box {
 			width: 691px;
-			height: 32px;
+			height: 50px;
 			margin: 10px auto 5px auto;
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
+			border-bottom: 1px solid #eee;
+			padding-bottom: 15px;
 
 			.rank-btns {
 				display: flex;
@@ -1698,7 +1728,7 @@ watch(activeDate, () => {
 			box-sizing: border-box;
 			display: flex;
 			flex-direction: column;
-			gap: 28px;
+			gap: 21px;
 			overflow-y: auto;
 			.rank-item {
 				display: flex;
@@ -1910,6 +1940,9 @@ watch(activeDate, () => {
 				text-align: center;
 				flex-shrink: 0;
 			}
+			.col-rank-75 {
+				width: 75px;
+			}
 			.col-name {
 				flex: 1.5;
 				min-width: 0;

src/views/ZMOverView/components/fourSuppress/components/allElement/index.vue

 <template>
 	<div class="content-wrapper">
 		<div class="header">
-			<div class="header-arrow-left" @click="prev">
+			<!-- <div class="header-arrow-left" @click="prev">
 				<img src="../../assets/left-btn.png" alt="" />
 			</div>
 			<div class="header-arrow-right" @click="next">
 				<img src="../../assets/right-btn.png" alt="" />
-			</div>
+			</div> -->
 			<div class="cards-mask">
-				<div class="item-box" :style="{ transform: `translateX(-${currentIndex * (307 + 16)}px)` }">
+				<!-- <div class="item-box" :style="{ transform: `translateX(-${currentIndex * (307 + 16)}px)` }"> -->
+				<div class="item-box">
 					<div
 						class="header-item"
 						:class="{
@@ -75,12 +76,60 @@
 				</div>
 			</div>
 			<div class="right">
+				<container
+					:title="'美对华科技要素打压遏制数量趋势'"
+					:header-bg-color="headerBgColor"
+					:headerBorderBottom="false"
+					:title-icon="trendIcon"
+					height="500px"
+				>
+					<template #header-right>
+						<el-select
+							v-model="selectField"
+							@change="handleFieldChange"
+							placeholder="全部领域"
+							:style="{ width: '160px' }"
+						>
+							<el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" />
+						</el-select>
+						<!-- <el-select
+							v-model="selectSandMethod"
+							@change="handleSandMethodChange"
+							placeholder="全部制裁手段"
+							:style="{ width: '160px' }"
+						>
+							<el-option v-for="item in sanTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
+						</el-select> -->
+					</template>
+					<el-empty
+						v-if="usChinaSanctionTrendData.length == 0"
+						style="padding-top: 120px"
+						description="暂无数据"
+						:image-size="100"
+					/>
+					<Echarts v-else :option="usChinaSanctionTrendOptions" height="410px"></Echarts>
+				</container>
 				<div class="box box2">
 					<div class="box2-header">
-						<div class="icon">
+						<div class="box2-header-left">
 							<img src="./assets/images/box-header-icon2.png" alt="" />
+							<div class="title">{{ "美对华要素打压情况" }}</div>
+						</div>
+						<div class="box2-header-right">
+							<el-select
+								v-model="selectSuppressElement"
+								@change="handleElementSuppressChange"
+								placeholder="全部科技要素"
+								class="field-select"
+							>
+								<el-option
+									v-for="item in elementOptions"
+									:key="item.value"
+									:label="item.label"
+									:value="item.value"
+								/>
+							</el-select>
 						</div>
-						<div class="title">{{ "美对华要素打压情况" }}</div>
 					</div>
 					<div class="box2-main">
 						<div class="inner-box1">
@@ -88,7 +137,7 @@
 								<div class="left-main">
 									<el-empty
 										v-if="box2DataList.length === 0"
-										style="padding-top: 80px"
+										style="padding-top: 140px"
 										description="暂无数据"
 										:image-size="100"
 									/>
@@ -99,12 +148,30 @@
 										:key="index"
 										@click="handleClickBox2Item(index)"
 									>
-										<div class="id">{{ index + 1 }}</div>
-										<div class="text">{{ item.name }}</div>
+										<div class="id">{{ (box2CurrentPage - 1) * box2PageSize + index + 1 }}</div>
+										<div class="left-item-content">
+											<div class="content-header">
+												<div class="text">{{ item.name }}</div>
+												<div class="date">{{ item.postDate }}</div>
+											</div>
+											<div class="describe">{{ item.describe || item.name }}</div>
+											<div class="content-footer">
+												<div class="element-box">
+													<AreaTag v-for="(ele, idxx) in item.elementList" :key="idxx" :tagName="ele" />
+												</div>
+												<div class="tag-box">
+													<AreaTag
+														v-for="(ele, idxx) in item.domainList"
+														:key="idxx"
+														:tagName="ele.industryName"
+													/>
+												</div>
+											</div>
+										</div>
 									</div>
 								</div>
-								<div class="left-footer" v-if="box2DataList.length !== 0">
-									<el-pagination
+								<div class="left-footer" v-if="box2AllDataList.length !== 0">
+									<!-- <el-pagination
 										background
 										layout="prev, pager, next"
 										:total="box2Total"
@@ -113,13 +180,19 @@
 										@current-change="handleGetBox2DataList"
 										size="small"
 										:pager-count="4"
+									/> -->
+									<simple-pagination
+										v-model:current-page="box2CurrentPage"
+										:page-size="box2PageSize"
+										:total="box2AllDataList.length"
+										@page-change="handleBox2PageChange"
 									/>
 								</div>
 							</div>
 							<div class="right" @click="handleToDecreeDetail(box2DetailInfo)">
 								<el-empty
 									v-if="box2DataList.length === 0 || !isShowBox2Info"
-									style="padding-top: 80px"
+									style="padding-top: 140px"
 									description="暂无数据"
 									:image-size="100"
 								/>
@@ -154,6 +227,12 @@
 							</div>
 						</div>
 						<div class="inner-box2">
+							<el-empty
+								v-if="box2ChartData.length === 0"
+								style="padding-top: 140px"
+								description="暂无数据"
+								:image-size="100"
+							/>
 							<div class="chart-header">{{ "关键词云" }}</div>
 							<div class="box2Chart" id="box2Chart"></div>
 						</div>
@@ -161,10 +240,25 @@
 				</div>
 				<div class="box box3">
 					<div class="box3-header">
-						<div class="icon">
+						<div class="box3-header-left">
 							<img src="./assets/images/box-header-icon2.png" alt="" />
+							<div class="title">{{ "美自身要素发展情况" }}</div>
+						</div>
+						<div class="box3-header-right">
+							<el-select
+								v-model="selectDevElement"
+								@change="handleElementDevChange"
+								placeholder="全部科技要素"
+								class="field-select"
+							>
+								<el-option
+									v-for="item in elementOptions"
+									:key="item.value"
+									:label="item.label"
+									:value="item.value"
+								/>
+							</el-select>
 						</div>
-						<div class="title">{{ "美自身要素发展情况" }}</div>
 					</div>
 					<div class="box3-main">
 						<div class="inner-box1">
@@ -172,7 +266,7 @@
 								<div class="left-main">
 									<el-empty
 										v-if="box3DataList.length === 0"
-										style="padding-top: 80px"
+										style="padding-top: 140px"
 										description="暂无数据"
 										:image-size="100"
 									/>
@@ -183,12 +277,30 @@
 										:key="index"
 										@click="handleClickBox3Item(index)"
 									>
-										<div class="id">{{ index + 1 }}</div>
-										<div class="text">{{ item.name }}</div>
+										<div class="id">{{ (box3CurrentPage - 1) * box3PageSize + index + 1 }}</div>
+										<div class="left-item-content">
+											<div class="content-header">
+												<div class="text">{{ item.name }}</div>
+												<div class="date">{{ item.postDate }}</div>
+											</div>
+											<div class="describe">{{ item.describe || item.name }}</div>
+											<div class="content-footer">
+												<div class="element-box">
+													<AreaTag v-for="(ele, idxx) in item.elementList" :key="idxx" :tagName="ele" />
+												</div>
+												<div class="tag-box">
+													<AreaTag
+														v-for="(ele, idxx) in item.domainList"
+														:key="idxx"
+														:tagName="ele.industryName"
+													/>
+												</div>
+											</div>
+										</div>
 									</div>
 								</div>
-								<div class="left-footer" v-if="box3DataList.length">
-									<el-pagination
+								<div class="left-footer" v-if="box3AllDataList.length !== 0">
+									<!-- <el-pagination
 										background
 										layout="prev, pager, next"
 										:total="box3Total"
@@ -197,13 +309,19 @@
 										@current-change="handleGetBox3DataList"
 										size="small"
 										:pager-count="4"
+									/> -->
+									<simple-pagination
+										v-model:current-page="box3CurrentPage"
+										:page-size="box3PageSize"
+										:total="box3AllDataList.length"
+										@page-change="handleBox3PageChange"
 									/>
 								</div>
 							</div>
 							<div class="right" @click="handleToDecreeDetail(box3DetailInfo)">
 								<el-empty
 									v-if="box3DataList.length === 0 || !isShowBox3Info"
-									style="padding-top: 80px"
+									style="padding-top: 140px"
 									description="暂无数据"
 									:image-size="100"
 								/>
@@ -240,13 +358,12 @@
 						<div class="inner-box2">
 							<el-empty
 								v-if="box3ChartData.length === 0"
-								style="padding-top: 80px"
+								style="padding-top: 140px"
 								description="暂无数据"
 								:image-size="100"
 							/>
 							<div class="chart-header">{{ "关键词云" }}</div>
 							<div class="box3Chart" id="box3Chart"></div>
-							<!-- <Echarts :option="usChinaSanctionTrendOptions" height="100%"></Echarts> -->
 						</div>
 					</div>
 				</div>
@@ -256,7 +373,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref, computed, inject, watch, onUnmounted } from "vue";
+import { onMounted, ref, computed, inject, watch, onUnmounted, nextTick } from "vue";
 import router from "@/router";
 import setChart from "@/utils/setChart";
 import getWordCloudChart from "./uitls/worldCloudChart";
@@ -268,9 +385,18 @@ import {
 	getKeyWordUp,
 	getElementDevelop,
 	getKeyWordDown,
-	getOrderInfo
+	getOrderInfo,
+	getElementSuppressTrend
 } from "@/api/zmOverview/allElement";
 import Echarts from "@/components/Chart/index.vue";
+import { elementOptions, sanTypeOptions, fieldOptions } from "@/views/ZMOverView/public.js";
+import SimplePagination from "@/components/SimplePagination.vue";
+import container from "@/views/ZMOverView/components/fourSuppress/components/container/index.vue";
+
+import trendIcon from "./assets/images/icon-trend.png";
+import { Legend } from "@antv/g6";
+
+const headerBgColor = ref("linear-gradient(180deg, rgba(231, 243, 255, 0.5), rgba(231, 243, 255, 0) 100%)");
 
 const activeDate = inject("activeDate");
 
@@ -328,23 +454,189 @@ const handleGetHeaderList = async () => {
 	} catch (error) {}
 };
 
+// 数量趋势
+const selectField = ref("");
+const selectSandMethod = ref("");
+const handleFieldChange = val => {
+	getUsChinaSanctionTrendData();
+};
+const handleSandMethodChange = val => {};
+
+const getChartOption = (xAxisData = [], seriesData = []) => {
+	const option = {
+		tooltip: {
+			trigger: "axis",
+			backgroundColor: "rgba(255, 255, 255, 0.9)",
+			borderColor: "#2f79c4",
+			textStyle: {
+				color: "#666"
+			},
+			formatter: function (params) {
+				console.log("图形数据的详情", params);
+				if (!params || params.length === 0) return "";
+
+				let result = `<div style="padding: 6px 10px;">
+					<div style="font-weight: bold; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid #eee;">${params[0].name}</div>`;
+
+				params.forEach(param => {
+					const color = param.borderColor || "#2f79c4";
+					result += `
+						<div style="display: flex; align-items: center; margin-top: 4px;">
+							<span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: ${color}; margin-right: 8px;"></span>
+							<span style="color: #666;">${param.seriesName}:</span>
+							<span style="color: ${color}; font-weight: bold; margin-left: 8px;">${param.value}</span>
+						</div>`;
+				});
+
+				result += `</div>`;
+				return result;
+			}
+		},
+		legend: {
+			show: true,
+			top: "10px",
+			// left: "center",
+			itemWidth: 15,
+			itemHeight: 10,
+			itemGap: 20,
+			textStyle: {
+				color: "#666",
+				fontSize: 14
+			}
+		},
+		grid: {
+			top: "10%",
+			left: "1%",
+			right: "2%",
+			bottom: "5%",
+			containLabel: true
+		},
+		xAxis: {
+			type: "category",
+			boundaryGap: false,
+			data: xAxisData,
+			axisLine: {
+				lineStyle: {
+					color: "#f0f0f0"
+				}
+			},
+			axisLabel: {
+				color: "#999",
+				fontSize: 12
+			},
+			axisTick: {
+				show: false
+			}
+		},
+		yAxis: {
+			name: "次数",
+			fontSize: 18,
+			type: "value",
+			min: 0,
+			minInterval: 1, // 保证最小间隔为1，避免小数
+			axisLine: {
+				show: false
+			},
+			axisLabel: {
+				color: "#999",
+				fontSize: 12
+			},
+			splitLine: {
+				lineStyle: {
+					type: "dashed",
+					color: "#f0f0f0"
+				}
+			}
+		},
+		series: seriesData.map(item => {
+			return {
+				name: item.name,
+				data: item.data,
+				type: "line",
+				// smooth: true,
+				symbol: "circle",
+				symbolSize: 8,
+				itemStyle: {
+					color: item.color || "#fff",
+					borderColor: item.borderColor || "#2f79c4",
+					borderWidth: 2
+				},
+				lineStyle: {
+					color: item.borderColor || "#2f79c4",
+					width: 2
+				}
+			};
+		})
+	};
+	return option;
+};
+const usChinaSanctionTrendOptions = ref(getChartOption([], []));
+const usChinaSanctionTrendData = ref([]);
+
+// 获取打压遏制趋势数据
+const getUsChinaSanctionTrendData = async () => {
+	const { startDate, endDate } = getCalculatedDate(activeDate.value);
+	const params = {
+		date: startDate,
+		domainId: selectField.value
+		// sanTypeId: selectSandMethod.value
+	};
+
+	try {
+		const res = await getElementSuppressTrend(params);
+		console.log("美对华科技要素打压遏制数量趋势", res);
+
+		if (res.code === 200 && res.data) {
+			// 按 elementName 分组整理数据
+			const dataMap = new Map();
+			const dateSet = new Set();
+			usChinaSanctionTrendData.value = res.data;
+			res.data.forEach(item => {
+				const { elementName, elementDate, elementNum } = item;
+				dateSet.add(elementDate);
+
+				if (!dataMap.has(elementName)) {
+					dataMap.set(elementName, []);
+				}
+				dataMap.get(elementName).push({
+					date: elementDate,
+					value: elementNum
+				});
+			});
+
+			// 排序日期
+			const sortedDates = Array.from(dateSet).sort();
+
+			// 为每个 elementName 生成完整的数据系列（补齐缺失的日期）
+			const seriesData = [];
+			const colors = ["#2f79c4", "#e74c3c", "#2ecc71", "#f39c12", "#9b59b6", "#1abc9c"];
+
+			dataMap.forEach((values, elementName) => {
+				// 创建日期到值的映射
+				const valueMap = new Map(values.map(v => [v.date, v.value]));
+
+				// 补齐所有日期的数据
+				const seriesValues = sortedDates.map(date => valueMap.get(date) || 0);
+
+				seriesData.push({
+					name: elementName,
+					data: seriesValues,
+					borderColor: colors[seriesData.length % colors.length]
+				});
+			});
+
+			usChinaSanctionTrendOptions.value = getChartOption(sortedDates, seriesData);
+			console.log("美对华科技要素打压遏制数量趋势 options", usChinaSanctionTrendOptions.value);
+		}
+	} catch (error) {
+		console.error("获取打压遏制趋势数据失败:", error);
+		usChinaSanctionTrendOptions.value = getChartOption([], []);
+		usChinaSanctionTrendData.value = [];
+	}
+};
+
 // 最新动态
-const box1DataList = ref([
-	// {
-	// 	title: '更新"中国涉军企业清单"(NS-CMIC List)',
-	// 	content: "国防部新增多家中国高科技实体至清单，依据法律禁止美国人士对其进行投资。",
-	// 	tagList: ["科研机构", "科研经费"],
-	// 	time: "2025年12月18日",
-	// 	areaList: [
-	// 		{
-	// 			name: "量子科技"
-	// 		},
-	// 		{
-	// 			name: "量子科技"
-	// 		}
-	// 	]
-	// }
-]);
+const box1DataList = ref([]);
 const handleGetBox1Data = async () => {
 	try {
 		const res = await getNewDynamics();
@@ -355,7 +647,16 @@ const handleGetBox1Data = async () => {
 	} catch (error) {}
 };
 
+const selectSuppressElement = ref("");
+const handleElementSuppressChange = val => {
+	selectSuppressElement.value = val;
+	box2CurrentPage.value = 1;
+	handleGetBox2DataList();
+	handleBox2Chart();
+};
+
 const box2DataList = ref([]);
+const box2AllDataList = ref([]);
 const box2Total = ref(0);
 const box2CurrentPage = ref(1);
 const box2PageSize = ref(5);
@@ -384,20 +685,32 @@ const handleGetBox2DataList = async () => {
 	const { startDate, endDate } = getCalculatedDate(activeDate.value);
 	const params = {
 		currentPage: box2CurrentPage.value,
-		pageSize: box2PageSize.value,
-		date: startDate
+		pageSize: 100,
+		date: startDate,
+		elementId: selectSuppressElement.value
 	};
 	try {
 		const res = await getElementSuppress(params);
 		console.log("美对我要素打压情况", res);
 		if (res.code === 200 && res.data) {
-			box2DataList.value = res.data.content;
+			box2AllDataList.value = res.data.content;
 			box2Total.value = res.data.totalElements;
-			handleGetOrderInfo(box2DataList.value[box2LeftActiveIndex.value].id);
+			// handleGetOrderInfo(box2DataList.value[box2LeftActiveIndex.value].id);
 		}
+		updateBox2DataList();
 	} catch (error) {}
 };
 
+const updateBox2DataList = () => {
+	const start = (box2CurrentPage.value - 1) * box2PageSize.value;
+	const end = start + box2PageSize.value;
+	box2DataList.value = box2AllDataList.value.slice(start, end);
+};
+
+const handleBox2PageChange = page => {
+	updateBox2DataList();
+};
+
 const handleClickBox2Item = index => {
 	box2LeftActiveIndex.value = index;
 	handleGetOrderInfo(box2DataList.value[index].id);
@@ -407,7 +720,8 @@ const box2ChartData = ref([]);
 const handleGetBox2ChartData = async () => {
 	const { startDate, endDate } = getCalculatedDate(activeDate.value);
 	const params = {
-		date: startDate
+		date: startDate,
+		elementId: selectSuppressElement.value
 	};
 	try {
 		const res = await getKeyWordUp(params);
@@ -431,14 +745,26 @@ const handleBox2Chart = async () => {
 	setChart(box2Chart, "box2Chart");
 };
 
-const box3DataList = ref([]);
+const selectDevElement = ref("");
+const handleElementDevChange = val => {
+	selectDevElement.value = val;
+	box3CurrentPage.value = 1;
+	handleGetBox3DataList();
+	handleBox3Chart();
+};
 
+const box3DataList = ref([]);
+const box3AllDataList = ref([]);
 const box3Total = ref(0);
 const box3CurrentPage = ref(1);
 const box3PageSize = ref(5);
 const box3LeftActiveIndex = ref(0);
 const box3DetailInfo = ref({});
 
+const handleBox3PageChange = page => {
+	updateBox3DataList();
+};
+
 // 根据id 获取政令详细信息
 const handleGetOrderInfo1 = async id => {
 	const params = {
@@ -462,26 +788,34 @@ const handleGetBox3DataList = async () => {
 
 	const params = {
 		currentPage: box3CurrentPage.value,
-		pageSize: box3PageSize.value,
-		date: startDate
+		pageSize: 100,
+		date: startDate,
+		elementId: selectDevElement.value
 	};
 	try {
 		const res = await getElementDevelop(params);
 		console.log("美自身要素发展情况", res);
 		if (res.code === 200 && res.data) {
-			box3DataList.value = res.data.content;
+			box3AllDataList.value = res.data.content;
 			box3Total.value = res.data.totalElements;
-			if (res.data.content.length) {
-				handleGetOrderInfo1(box3DataList.value[box3LeftActiveIndex.value].id);
-			} else {
-				box3DetailInfo.value = {};
-			}
+			// if (res.data.content.length) {
+			// 	handleGetOrderInfo1(box3DataList.value[box3LeftActiveIndex.value].id);
+			// } else {
+			// 	box3DetailInfo.value = {};
+			// }
 		} else {
 			box3DetailInfo.value = {};
 		}
+		updateBox3DataList();
 	} catch (error) {}
 };
 
+const updateBox3DataList = async () => {
+	const start = (box3CurrentPage.value - 1) * box3PageSize.value;
+	const end = start + box3PageSize.value;
+	box3DataList.value = box3AllDataList.value.slice(start, end);
+};
+
 const handleClickBox3Item = index => {
 	box3LeftActiveIndex.value = index;
 	handleGetOrderInfo1(box3DataList.value[index].id);
@@ -492,7 +826,8 @@ const box3ChartData = ref([]);
 const handleGetBox3ChartData = async () => {
 	const { startDate, endDate } = getCalculatedDate(activeDate.value);
 	const params = {
-		date: startDate
+		date: startDate,
+		elementId: selectDevElement.value
 	};
 	try {
 		const res = await getKeyWordDown(params);
@@ -567,10 +902,13 @@ const handleToDecreeDetail = item => {
 };
 
 watch(activeDate, async () => {
+	box2CurrentPage.value = 1;
+	box3CurrentPage.value = 1;
 	handleGetBox2DataList(); // 美对我要素打压情况
 	handleGetBox3DataList(); // 美自身要素发展情况
 	handleBox2Chart(); // 关键词云-上
 	handleBox3Chart(); // 关键词云-下
+	getUsChinaSanctionTrendData();
 	await handleGetHeaderList(); // 全要素统计
 	// startAutoPlay();
 });
@@ -581,6 +919,7 @@ onMounted(async () => {
 	handleGetBox3DataList(); // 美自身要素发展情况
 	handleBox2Chart(); // 关键词云-上
 	handleBox3Chart(); // 关键词云-下
+	getUsChinaSanctionTrendData();
 	await handleGetHeaderList(); // 全要素统计
 	// startAutoPlay();
 });
@@ -928,7 +1267,32 @@ onUnmounted(() => {
 					border-bottom: 1px solid rgba(255, 255, 255, 1);
 					background: linear-gradient(180deg, rgba(231, 243, 255, 0.5), rgba(231, 243, 255, 0) 100%);
 					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					padding: 10px 16px;
+					.box2-header-left {
+						display: flex;
+						align-items: center;
+
+						img {
+							width: 17px;
+							height: 17px;
+							margin-right: 8px;
+						}
 
+						.title {
+							font-family: YouSheBiaoTiHei;
+							font-size: 24px;
+							font-weight: 400;
+							line-height: 31px;
+							letter-spacing: 0px;
+							text-align: left;
+							color: rgba(5, 95, 194, 1);
+						}
+					}
+					.field-select {
+						width: 160px;
+					}
 					.icon {
 						width: 17px;
 						height: 16.5px;
@@ -942,8 +1306,8 @@ onUnmounted(() => {
 					}
 
 					.title {
-						margin-top: 8px;
-						margin-left: 13px;
+						// margin-top: 8px;
+						// margin-left: 13px;
 						width: 199px;
 						height: 31px;
 						color: var(--color-main-active);
@@ -986,11 +1350,82 @@ onUnmounted(() => {
 
 								.left-item {
 									width: 100%;
-									height: 54px;
+									height: 120px;
 									border: 1px solid transparent;
 									display: flex;
-									align-items: center;
-
+									padding: 10px;
+									box-sizing: border-box;
+									border-bottom: 1px solid #eee;
+									// align-items: center;
+									.left-item-content {
+										display: flex;
+
+										flex-direction: column;
+										justify-content: space-between;
+										gap: 5px;
+										width: 100%;
+										.content-header {
+											display: flex;
+											justify-content: space-between;
+											.text {
+												max-width: 80%;
+												height: 30px;
+												margin-left: 12px;
+												color: rgba(59, 65, 75, 1);
+												font-family: Microsoft YaHei;
+												font-style: Regular;
+												font-size: 16px;
+												font-weight: 700;
+												line-height: 30px;
+												letter-spacing: 0px;
+												text-align: left;
+												overflow: hidden;
+												text-overflow: ellipsis;
+												white-space: nowrap;
+											}
+											.date {
+												font-family: Source Han Sans CN;
+												font-size: 16px;
+												font-weight: 400;
+											}
+										}
+										.describe {
+											max-width: 80%;
+											height: 30px;
+											margin-left: 12px;
+											color: rgba(59, 65, 75, 1);
+											font-family: Microsoft YaHei;
+											font-style: Regular;
+											font-size: 16px;
+											font-weight: 400;
+											line-height: 30px;
+											letter-spacing: 0px;
+											text-align: left;
+											overflow: hidden;
+											text-overflow: ellipsis;
+											white-space: nowrap;
+										}
+										.content-footer {
+											display: flex;
+											justify-content: space-between;
+											align-items: center;
+											.element-box {
+												display: flex;
+												flex-direction: row;
+												gap: 5px;
+											}
+											.tag-box {
+												min-width: 75px;
+												height: 24px;
+												gap: 5px;
+												/* 自动布局 */
+												display: flex;
+												flex-direction: row;
+												justify-content: right;
+												align-items: center;
+											}
+										}
+									}
 									&:hover {
 										background: rgba(246, 250, 255, 1);
 									}
@@ -998,7 +1433,8 @@ onUnmounted(() => {
 									cursor: pointer;
 
 									.id {
-										margin-left: 16px;
+										// margin-left: 16px;
+										margin-top: 3px;
 										width: 24px;
 										height: 24px;
 										border-radius: 50px;
@@ -1211,7 +1647,32 @@ onUnmounted(() => {
 					border-bottom: 1px solid rgba(255, 255, 255, 1);
 					background: linear-gradient(180deg, rgba(231, 243, 255, 0.5), rgba(231, 243, 255, 0) 100%);
 					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					padding: 10px 16px;
+					.box3-header-left {
+						display: flex;
+						align-items: center;
 
+						img {
+							width: 17px;
+							height: 17px;
+							margin-right: 8px;
+						}
+
+						.title {
+							font-family: YouSheBiaoTiHei;
+							font-size: 24px;
+							font-weight: 400;
+							line-height: 31px;
+							letter-spacing: 0px;
+							text-align: left;
+							color: rgba(5, 95, 194, 1);
+						}
+					}
+					.field-select {
+						width: 160px;
+					}
 					.icon {
 						width: 17px;
 						height: 16.5px;
@@ -1225,7 +1686,7 @@ onUnmounted(() => {
 					}
 
 					.title {
-						margin-top: 8px;
+						// margin-top: 8px;
 						margin-left: 13px;
 						width: 199px;
 						height: 31px;
@@ -1267,10 +1728,80 @@ onUnmounted(() => {
 
 								.left-item {
 									width: 100%;
-									height: 54px;
+									height: 120px;
 									border: 1px solid transparent;
 									display: flex;
-									align-items: center;
+									border-bottom: 1px solid #eee;
+									padding: 10px;
+									.left-item-content {
+										display: flex;
+
+										flex-direction: column;
+										justify-content: space-between;
+										gap: 5px;
+										width: 100%;
+										.content-header {
+											display: flex;
+											justify-content: space-between;
+											.text {
+												max-width: 80%;
+												height: 30px;
+												margin-left: 12px;
+												color: rgba(59, 65, 75, 1);
+												font-family: Microsoft YaHei;
+												font-style: Regular;
+												font-size: 16px;
+												font-weight: 700;
+												line-height: 30px;
+												letter-spacing: 0px;
+												text-align: left;
+												overflow: hidden;
+												text-overflow: ellipsis;
+												white-space: nowrap;
+											}
+											.date {
+												font-family: Source Han Sans CN;
+												font-size: 16px;
+												font-weight: 400;
+											}
+										}
+										.describe {
+											max-width: 80%;
+											height: 30px;
+											margin-left: 12px;
+											color: rgba(59, 65, 75, 1);
+											font-family: Microsoft YaHei;
+											font-style: Regular;
+											font-size: 16px;
+											font-weight: 400;
+											line-height: 30px;
+											letter-spacing: 0px;
+											text-align: left;
+											overflow: hidden;
+											text-overflow: ellipsis;
+											white-space: nowrap;
+										}
+										.content-footer {
+											display: flex;
+											justify-content: space-between;
+											align-items: center;
+											.element-box {
+												display: flex;
+												flex-direction: row;
+												gap: 5px;
+											}
+											.tag-box {
+												min-width: 75px;
+												height: 24px;
+												gap: 5px;
+												/* 自动布局 */
+												display: flex;
+												flex-direction: row;
+												justify-content: right;
+												align-items: center;
+											}
+										}
+									}
 
 									&:hover {
 										background: rgba(246, 250, 255, 1);
@@ -1279,7 +1810,9 @@ onUnmounted(() => {
 									cursor: pointer;
 
 									.id {
-										margin-left: 16px;
+										// margin-left: 16px;
+
+										margin-top: 3px;
 										width: 24px;
 										height: 24px;
 										border-radius: 50px;

src/views/ZMOverView/components/fourSuppress/components/allElement/mock.json

+{
+	"code": 200,
+	"message": "操作成功",
+	"success": true,
+	"data": [
+		{
+			"elementName": "科研机构",
+			"elementNum": 0,
+			"elementDate": "2025-01"
+		},
+		{
+			"elementName": "科研人才",
+			"elementNum": 1,
+			"elementDate": "2025-01"
+		},
+		{
+			"elementName": "科研仪器",
+			"elementNum": 0,
+			"elementDate": "2025-01"
+		},
+		{
+			"elementName": "科研机构",
+			"elementNum": 0,
+			"elementDate": "2025-02"
+		},
+		{
+			"elementName": "科研人才",
+			"elementNum": 0,
+			"elementDate": "2025-02"
+		},
+		{
+			"elementName": "科研仪器",
+			"elementNum": 1,
+			"elementDate": "2025-02"
+		},
+		{
+			"elementName": "科研机构",
+			"elementNum": 0,
+			"elementDate": "2025-03"
+		},
+		{
+			"elementName": "科研人才",
+			"elementNum": 0,
+			"elementDate": "2025-03"
+		},
+		{
+			"elementName": "科研仪器",
+			"elementNum": 0,
+			"elementDate": "2025-03"
+		},
+		{
+			"elementName": "科研机构",
+			"elementNum": 1,
+			"elementDate": "2025-04"
+		},
+		{
+			"elementName": "科研人才",
+			"elementNum": 0,
+			"elementDate": "2025-04"
+		},
+		{
+			"elementName": "科研仪器",
+			"elementNum": 0,
+			"elementDate": "2025-04"
+		},
+		{
+			"elementName": "科研机构",
+			"elementNum": 0,
+			"elementDate": "2025-05"
+		},
+		{
+			"elementName": "科研人才",
+			"elementNum": 1,
+			"elementDate": "2025-05"
+		},
+		{
+			"elementName": "科研仪器",
+			"elementNum": 0,
+			"elementDate": "2025-05"
+		},
+		{
+			"elementName": "科研机构",
+			"elementNum": 0,
+			"elementDate": "2025-06"
+		},
+		{
+			"elementName": "科研人才",
+			"elementNum": 0,
+			"elementDate": "2025-06"
+		},
+		{
+			"elementName": "科研仪器",
+			"elementNum": 0,
+			"elementDate": "2025-06"
+		},
+		{
+			"elementName": "科研机构",
+			"elementNum": 0,
+			"elementDate": "2025-07"
+		},
+		{
+			"elementName": "科研人才",
+			"elementNum": 0,
+			"elementDate": "2025-07"
+		},
+		{
+			"elementName": "科研仪器",
+			"elementNum": 3,
+			"elementDate": "2025-07"
+		},
+		{
+			"elementName": "科研机构",
+			"elementNum": 0,
+			"elementDate": "2025-08"
+		},
+		{
+			"elementName": "科研人才",
+			"elementNum": 0,
+			"elementDate": "2025-08"
+		},
+		{
+			"elementName": "科研仪器",
+			"elementNum": 0,
+			"elementDate": "2025-08"
+		},
+		{
+			"elementName": "科研机构",
+			"elementNum": 0,
+			"elementDate": "2025-09"
+		},
+		{
+			"elementName": "科研人才",
+			"elementNum": 0,
+			"elementDate": "2025-09"
+		},
+		{
+			"elementName": "科研仪器",
+			"elementNum": 0,
+			"elementDate": "2025-09"
+		},
+		{
+			"elementName": "科研机构",
+			"elementNum": 0,
+			"elementDate": "2025-10"
+		},
+		{
+			"elementName": "科研人才",
+			"elementNum": 0,
+			"elementDate": "2025-10"
+		},
+		{
+			"elementName": "科研仪器",
+			"elementNum": 0,
+			"elementDate": "2025-10"
+		},
+		{
+			"elementName": "科研机构",
+			"elementNum": 0,
+			"elementDate": "2025-11"
+		},
+		{
+			"elementName": "科研人才",
+			"elementNum": 0,
+			"elementDate": "2025-11"
+		},
+		{
+			"elementName": "科研仪器",
+			"elementNum": 0,
+			"elementDate": "2025-11"
+		},
+		{
+			"elementName": "科研机构",
+			"elementNum": 0,
+			"elementDate": "2025-12"
+		},
+		{
+			"elementName": "科研人才",
+			"elementNum": 0,
+			"elementDate": "2025-12"
+		},
+		{
+			"elementName": "科研仪器",
+			"elementNum": 0,
+			"elementDate": "2025-12"
+		},
+		{
+			"elementName": "科研机构",
+			"elementNum": 0,
+			"elementDate": "2026-01"
+		},
+		{
+			"elementName": "科研人才",
+			"elementNum": 0,
+			"elementDate": "2026-01"
+		},
+		{
+			"elementName": "科研仪器",
+			"elementNum": 0,
+			"elementDate": "2026-01"
+		},
+		{
+			"elementName": "科研机构",
+			"elementNum": 0,
+			"elementDate": "2026-02"
+		},
+		{
+			"elementName": "科研人才",
+			"elementNum": 0,
+			"elementDate": "2026-02"
+		},
+		{
+			"elementName": "科研仪器",
+			"elementNum": 0,
+			"elementDate": "2026-02"
+		},
+		{
+			"elementName": "科研机构",
+			"elementNum": 0,
+			"elementDate": "2026-03"
+		},
+		{
+			"elementName": "科研人才",
+			"elementNum": 0,
+			"elementDate": "2026-03"
+		},
+		{
+			"elementName": "科研仪器",
+			"elementNum": 0,
+			"elementDate": "2026-03"
+		}
+	]
+}
\ No newline at end of file