政令概览-替换词云图组件

src/views/decree/decreeHome/index.vue

@@ -269,7 +269,9 @@
 							</div>
 							<div class="header-title">{{ "政令重点条款" }}</div>
 						</div>
-						<div class="box8-main" id="wordCloudChart"></div>
+						<div class="box8-content" v-if="wordCloudData?.length">
+							<WordCloudChart :data="wordCloudData" width="100%" height="100%" />
+						</div>
 					</div>
 				</div>
 			</div>
@@ -427,9 +429,9 @@
 </template>
 
 <script setup>
-import NewsList from "@/components/base/NewsList/index.vue";
 import { onMounted, ref, watch, nextTick } from "vue";
 import router from "@/router";
+import WordCloudChart from "@/components/base/WordCloundChart/index.vue"
 import {
 	getDepartmentList,
 	getLatestDecree,
@@ -448,7 +450,6 @@ import DivideHeader from "@/components/DivideHeader.vue";
 import { useContainerScroll } from "@/hooks/useScrollShow";
 import getBarChart from "./utils/barChart";
 import getPieChart from "./utils/piechart";
-import getWordCloudChart from "./utils/wordCloudChart";
 
 import setChart from "@/utils/setChart";
 
@@ -935,38 +936,17 @@ const handleGetKeyDecree = async () => {
 handleGetKeyDecree();
 
 // 政令重点条款
-const wordCloudData = [
-	// { name: "与马斯克公开冲突", value: 100 },
-	// { name: "传统能源", value: 5 },
-	// { name: "共和党财政鹰派", value: 77 },
-	// { name: "未实现赤字控制目标", value: 35 },
-	// { name: "得克萨斯州", value: 88 },
-	// { name: "选举压力", value: 57 },
-	// { name: "主张财政紧缩", value: 72 },
-	// { name: "财政保守", value: 18 },
-];
-
+const wordCloudData = ref([]);
 const handleGetDecreeKeyInstruction = async () => {
 	try {
 		const res = await getDecreeKeyInstruction();
 		console.log("政令重点条款", res);
-		wordCloudData.value = res.data.map(item => {
-			return {
-				name: item.clause,
-				value: item.count
-			};
-		});
+		wordCloudData.value = res.data.map(item => ({name: item.clause, value: item.count}));
 	} catch (error) {
 		console.error("政令重点条款error", error);
 	}
 };
 
-const handleBox8 = async () => {
-	await handleGetDecreeKeyInstruction();
-	let chart3 = getWordCloudChart(wordCloudData.value);
-	setChart(chart3, "wordCloudChart");
-};
-
 // 资源库
 const searchType = ref("");
 const isChina = ref(false);
@@ -1224,7 +1204,7 @@ onMounted(async () => {
 	handleBox1(); // 最新科技政令
 	handleBox5();
 	handleBox6();
-	handleBox8();
+	handleGetDecreeKeyInstruction();
 });
 </script>
 
@@ -2999,9 +2979,11 @@ onMounted(async () => {
 					border-radius: 10px;
 					box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
 					background: rgba(255, 255, 255, 1);
+					display: flex;
+					flex-direction: column;
 
 					.box8-header {
-						width: 792px;
+						width: 100%;
 						height: 48px;
 						display: flex;
 						border-bottom: 1px solid rgba(240, 242, 244, 1);
@@ -3030,6 +3012,12 @@ onMounted(async () => {
 						}
 					}
 
+					.box8-content {
+						width: 100%;
+						height: 20px;
+						flex: auto;
+					}
+
 					.box8-main {
 						height: 401px;
 					}