Merge branch 'pre' into zz-dev

src/components/base/WorkingBox/index.vue

+<template>
+  <div class="normal-box" :class="{ 'box-glow': isBorderActive }">
+    <div class="content-box">
+      <slot></slot>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  isBorderActive: {
+    type: Boolean,
+    default: false,
+  }
+})
+
+</script>
+
+
+<style lang="scss" scoped>
+.normal-box {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 16px;
+  // border: 2px solid var(--bg-black-5);
+  background: var(--color-primary-2);
+
+  .content-box {
+    position: absolute;
+    z-index: 2;
+    top: 10px;
+    left: 10px;
+    width: calc(100% - 20px);
+    height: calc(100% - 20px);
+  }
+
+}
+
+/* 霓虹发光效果变体 */
+.box-glow {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  border-radius: 16px;
+  // background: #1a1a1a;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  background: var(--bg-black-5);
+  // border: 2px solid transparent !important;
+  border: none;
+
+  .content-box {
+    position: absolute;
+    z-index: 2;
+    top: 10px;
+    left: 10px;
+    width: calc(100% - 20px);
+    height: calc(100% - 20px);
+  }
+}
+
+.box-glow::before {
+  content: '';
+  position: absolute;
+  width: 150%;
+  height: 250%;
+  background: conic-gradient(from 0deg,
+      #85B2FF 0deg 180deg,
+      #B685FF 180deg 360deg);
+  animation: rotate 3s linear infinite;
+  filter: blur(10px);
+}
+
+.box-glow::after {
+  content: '';
+  position: absolute;
+  inset: 3px;
+  background: #fff;
+  border-radius: 12px;
+}
+
+// .glow-layer {
+//   position: absolute;
+//   inset: -2px;
+//   background: conic-gradient(from 0deg,
+//       #85B2FF 0deg 180deg,
+//       #B685FF 180deg 360deg);
+//   animation: rotate 3s linear infinite;
+//   filter: blur(20px);
+//   opacity: 0.5;
+// }
+</style>

src/components/base/messageBubble/index.vue

@@ -10,8 +10,8 @@
 			</div>
 			<!-- <div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div> -->
 		</div>
-		<div class="msg-bubble-main" ref="scrollContainer">
-			<div class="message-bubble" v-for="(item, index) in displayList" :key="index" @click="handleClickPerson(item)">
+		<div class="msg-bubble-main" ref="scrollContainer" @mouseenter="pauseScroll" @mouseleave="resumeScroll">
+			<div class="message-bubble" v-for="(item, index) in infiniteList" :key="index" @click="handleClickPerson(item)">
 				<div class="avatar-container">
 					<img :src="item[props.imageUrl] || avatarUser" :alt="item[props.name]" class="avatar" />
 					<div class="avatar-containerOne" v-if="isRepublicanParty">
@@ -39,7 +39,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onBeforeUnmount } from "vue";
+import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount, onUnmounted } from "vue";
 import avatarUser from "@/assets/images/avatar_user.png";
 
 const emit = defineEmits(["click", "info-click"]);
@@ -135,30 +135,164 @@ const displayList = computed(() => {
 	return list
 })
 
+
+const scrollSpeed = ref(30)
+const autoStart = ref(true)
+const copyCount = ref(3)
+
+// 创建无限列表（复制多份）
+const infiniteList = computed(() => {
+  if (!displayList.value || displayList.value.length === 0) return []
+  
+  const result = []
+  for (let i = 0; i < copyCount.value; i++) {
+    result.push(...displayList.value)
+  }
+  return result
+})
+
+// 状态
+let animationId = null
+let lastTimestamp = 0
+let isPaused = ref(false)
+let isScrolling = ref(false)
+
+// 滚动动画函数（使用 requestAnimationFrame）
+const scrollAnimation = (timestamp) => {
+  if (!scrollContainer.value || isPaused.value) {
+    if (!isPaused.value) {
+      animationId = requestAnimationFrame(scrollAnimation)
+    }
+    return
+  }
+
+  if (!lastTimestamp) {
+    lastTimestamp = timestamp
+    animationId = requestAnimationFrame(scrollAnimation)
+    return
+  }
+
+  // 计算时间差（秒）
+  const deltaTime = Math.min(0.033, (timestamp - lastTimestamp) / 1000) // 限制最大33ms
+  if (deltaTime <= 0) {
+    lastTimestamp = timestamp
+    animationId = requestAnimationFrame(scrollAnimation)
+    return
+  }
+
+  const container = scrollContainer.value
+  const scrollHeight = container.scrollHeight
+  const clientHeight = container.clientHeight
+  
+  // 计算滚动步长
+  const step = scrollSpeed.value * deltaTime
+  let newScrollTop = container.scrollTop + step
+  
+  // 检查是否滚动到底部
+  const maxScrollTop = scrollHeight - clientHeight
+  
+  if (newScrollTop >= maxScrollTop - 1) {
+    // 到达底部，无缝跳转到顶部
+    container.scrollTop = 0
+    // 重置时间戳避免跳跃
+    lastTimestamp = timestamp
+  } else {
+    container.scrollTop = newScrollTop
+  }
+  
+  lastTimestamp = timestamp
+  animationId = requestAnimationFrame(scrollAnimation)
+}
+
 // 开始滚动
 const startScroll = () => {
-	if (timer) clearInterval(timer)
-	timer = setInterval(() => {
-		currentIndex.value = (currentIndex.value + 1) % props.messageList.length
-	}, 2000) // 每秒滚动一条
+  if (animationId) {
+    cancelAnimationFrame(animationId)
+    animationId = null
+  }
+  if (isPaused.value) return
+  
+  lastTimestamp = 0
+  isScrolling.value = true
+  animationId = requestAnimationFrame(scrollAnimation)
 }
 
 // 停止滚动
 const stopScroll = () => {
-	if (timer) {
-		clearInterval(timer)
-		timer = null
+  if (animationId) {
+    cancelAnimationFrame(animationId)
+    animationId = null
   }
+  lastTimestamp = 0
+  isScrolling.value = false
+}
+
+// 暂停滚动
+const pauseScroll = () => {
+  if (isPaused.value) return
+  isPaused.value = true
+  stopScroll()
 }
 
-onMounted(() => {
-	if (props.messageList.length > 3) {
+// 恢复滚动
+const resumeScroll = () => {
+  if (!isPaused.value) return
+  isPaused.value = false
+  if (autoStart.value) {
     startScroll()
   }
+}
 
+// 重置滚动位置（可选方法）
+const resetScrollPosition = () => {
+  if (scrollContainer.value) {
+    scrollContainer.value.scrollTop = 0
+  }
+}
+
+// 监听 displayList 变化
+watch(
+  () => displayList.value,
+  async (newVal, oldVal) => {
+    if (newVal && newVal.length > 0) {
+      await nextTick()
+      // 如果列表内容变化，重置滚动位置并重新开始
+      if (scrollContainer.value) {
+        const wasPaused = isPaused.value
+        stopScroll()
+        scrollContainer.value.scrollTop = 0
+        if (!wasPaused && autoStart.value) {
+          isPaused.value = false
+          startScroll()
+        }
+      }
+    }
+  },
+  { deep: true, immediate: false }
+)
+
+// 监听 scrollSpeed 变化
+watch(
+  () => scrollSpeed.value,
+  () => {
+    if (isScrolling.value && !isPaused.value) {
+      // 重新启动滚动以应用新速度
+      stopScroll()
+      startScroll()
+    }
+  }
+)
+
+// 组件挂载
+onMounted(async () => {
+  await nextTick()
+  if (autoStart.value && displayList.value && displayList.value.length > 0) {
+    startScroll()
+  }
 })
 
-onBeforeUnmount(() => {
+// 组件卸载
+onUnmounted(() => {
   stopScroll()
 })
 

src/components/base/moduleHeader/index.vue

 <template>
 	<div class="module-header-wrapper">
-		<div class="nav-content">
+		<div class="nav-content" :class="{ 'nav-content-library': isShowDataLibrary }">
 			<div class="nav-left" :class="{ 'flex-start': isShowSearchBar }">
 				<div class="icon">
 					<img v-show="!isShowSearchBar" src="@/assets/icons/overview/logo.png" alt="" />
@@ -489,6 +489,11 @@ const handleUserCommand = async (command) => {
 	}
 };
 
+const isShowDataLibrary = computed(() => {
+	const isShowLibrary = route.fullPath.includes('/dataLibrary')
+	return isShowLibrary
+})
+
 onMounted(() => {
 	handleGetPersonType();
 	handleGetSsoUserInfo();
@@ -506,6 +511,11 @@ onMounted(() => {
 	background: linear-gradient(180deg, rgba(246, 250, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%);
 	padding: 12px 0;
 
+	.nav-content-library {
+		width: calc(100% - 24px - 37px) !important;
+		margin: 0 37px 0 24px !important;
+	}
+
 	.nav-content {
 		width: 1600px;
 		margin: 0 auto;

src/stores/tagsView.js

@@ -12,7 +12,7 @@ const useTagsViewStore = defineStore('tags-view', {
       this.addCachedView(view)
     },
     addVisitedView(view) {
-      this.visitedViews = localStorage.getItem('visitedViews') && JSON.parse(localStorage.getItem('visitedViews')) || []
+      this.visitedViews = sessionStorage.getItem('visitedViews') && JSON.parse(sessionStorage.getItem('visitedViews')) || []
       this.visitedViews.forEach(item => {
         item.active = false
       })
@@ -24,7 +24,7 @@ const useTagsViewStore = defineStore('tags-view', {
           ...view,
           title: view.meta?.title || '未命名'
         })
-        localStorage.setItem('visitedViews', JSON.stringify(this.visitedViews))
+        sessionStorage.setItem('visitedViews', JSON.stringify(this.visitedViews))
       } else {
         this.visitedViews.forEach(v => {
           if (v.path === view.path) {
@@ -50,7 +50,7 @@ const useTagsViewStore = defineStore('tags-view', {
         if (index !== -1) {
           this.visitedViews.splice(index, 1)
         }
-        localStorage.setItem('visitedViews', JSON.stringify(this.visitedViews))
+        sessionStorage.setItem('visitedViews', JSON.stringify(this.visitedViews))
         resolve([...this.visitedViews])
       })
     },
@@ -66,7 +66,7 @@ const useTagsViewStore = defineStore('tags-view', {
     },
 
     loadVisitedViewFromLocalStorage() {
-      const saved = localStorage.getItem('visitedViews')
+      const saved = sessionStorage.getItem('visitedViews')
       if (saved) {
         this.items = JSON.parse(saved)
       }

src/styles/components/WorkingBox/index.vue

+<template>
+  <el-row class="wrapper layout-grid-line">
+    <el-col :span="span">
+      <pre>
+        {{
+          `
+      import WorkingBox from '@/components/base/WorkingBox/index.vue'
+      <div class="outer-box">
+        <WorkingBox>
+            <div class="content">我是内容区域</div>
+        </WorkingBox>
+      </div>
+  `
+        }}
+      </pre>
+      <div class="outer-box">
+        <WorkingBox :is-border-active="isBorderActive">
+          <div class="content">我是内容区域</div>
+        </WorkingBox>
+
+        <div class="btn-box">
+          <el-button type="primary" @click="handleChangeBorderActiveStatus(true)">激活</el-button>
+          <el-button type="plain" @click="handleChangeBorderActiveStatus(false)">恢复</el-button>
+        </div>
+      </div>
+
+
+    </el-col>
+  </el-row>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import '@/styles/common.scss'
+import WorkingBox from '@/components/base/WorkingBox/index.vue'
+const span = 12
+
+const isBorderActive = ref(false)
+
+const handleChangeBorderActiveStatus = (isActive) => {
+  isBorderActive.value = isActive
+}
+
+</script>
+
+<style lang="scss" scoped>
+.outer-box {
+  width: 600px;
+  height: 300px;
+  margin: 50px 20px;
+
+  .content {
+    width: 100%;
+    height: 100%;
+    background: #e3e3e3;
+  }
+  .btn-box{
+    margin-top: 10px;
+  }
+}
+</style>
\ No newline at end of file

src/styles/components/index.vue

@@ -70,6 +70,9 @@
                         <el-tab-pane label="引力关系图" lazy>
                             <RelationForceChart />
                         </el-tab-pane>
+                        <el-tab-pane label="激活工作框" lazy>
+                            <WorkingBox />
+                        </el-tab-pane>
                     </el-tabs>
                 </div>
             </el-space>
@@ -103,6 +106,7 @@ import AiSummary from './Ai/AiSummary/index.vue'
 import RelationChart from './RelationChart/index.vue'
 import RelationCenterChart from './RelationCenterChart/index.vue'
 import RelationForceChart from './RelationForceChart/index.vue'
+import WorkingBox from './WorkingBox/index.vue'
 </script>
 
 <style lang="scss" scoped>

src/views/bill/billHome/ResourceLibrarySection.vue

@@ -2,7 +2,8 @@
 	<div class="resource-library-section">
 		<div class="home-content-footer-header">
 			<div class="btn-box">
-				<div class="btn" :class="{ btnActive: activeTabName === cate.name }" v-for="cate in tabList" :key="cate.name" @click="handleClickTab(cate)">
+				<div class="btn" :class="{ btnActive: activeTabName === cate.name }" v-for="cate in tabList" :key="cate.name"
+					@click="handleClickTab(cate)">
 					{{ cate.name }}
 				</div>
 			</div>
@@ -26,18 +27,23 @@
 			<div class="right" :class="{ 'right-full': activeTabName === '委员会' }">
 				<div class="right-header" v-if="activeTabName !== '委员会'">
 					<div class="right-header-box">
-						<el-select v-model="footerSelect1" placeholder="选择委员会" style="width: 240px" @change="handleFooterSelect1Change">
-							<el-option v-for="item in postOrgList" :key="item.departmentId" :label="item.departmentName" :value="item.departmentId" />
+						<el-select v-model="footerSelect1" placeholder="选择委员会" style="width: 240px"
+							@change="handleFooterSelect1Change">
+							<el-option v-for="item in postOrgList" :key="item.departmentId" :label="item.departmentName"
+								:value="item.departmentId" />
 						</el-select>
 					</div>
 					<template v-if="activeTabName === '国会法案'">
 						<div class="right-header-box">
-							<el-select v-model="footerSelect2" placeholder="选择提出议员" style="width: 240px" @change="handleFooterSelect2Change">
-								<el-option v-for="item in postMemberList" :key="item.memberId" :label="item.memberName" :value="item.memberId" />
+							<el-select v-model="footerSelect2" placeholder="选择提出议员" style="width: 240px"
+								@change="handleFooterSelect2Change">
+								<el-option v-for="item in postMemberList" :key="item.memberId" :label="item.memberName"
+									:value="item.memberId" />
 							</el-select>
 						</div>
 						<div class="right-header-box right-header-sort" style="margin-left: auto">
-							<el-checkbox v-model="isInvolveCn" true-label="Y" false-label="N" class="involve-checkbox" @change="handleInvolveCnChange">只看涉华法案</el-checkbox>
+							<el-checkbox v-model="isInvolveCn" true-label="Y" false-label="N" class="involve-checkbox"
+								@change="handleInvolveCnChange">只看涉华法案</el-checkbox>
 							<el-select v-model="releaseTime" placeholder="选择排序方式" style="width: 150px" @change="handlePxChange">
 								<template #prefix>
 									<div style="display: flex; align-items: center; height: 100%">
@@ -50,24 +56,23 @@
 					</template>
 					<template v-else-if="activeTabName === '国会议员'">
 						<div class="right-header-box right-header-sort" style="margin-left: auto">
-							<el-select v-model="memberSortFun" placeholder="选择排序方式" style="width: 150px" @change="handleMemberSortFunChange">
+							<el-select v-model="memberSortFun" placeholder="选择排序方式" style="width: 150px"
+								@change="handleMemberSortFunChange">
 								<template #prefix>
 									<div style="display: flex; align-items: center; height: 100%">
 										<img :src="desc" style="width: 14px; height: 14px" />
 									</div>
 								</template>
-								<el-option v-for="item in memberSortFunList" :key="item.value" :label="item.label" :value="item.value" />
+								<el-option v-for="item in memberSortFunList" :key="item.value" :label="item.label"
+									:value="item.value" />
 							</el-select>
 						</div>
 					</template>
 				</div>
 				<div class="right-header" v-else>
 					<div class="right-header-box right-header-sort" style="margin-left: auto">
-						<el-checkbox
-							v-model="committeeIsInvolveCn"
-							class="involve-checkbox"
-							@change="handleCommitteeInvolveCnChange"
-						>
+						<el-checkbox v-model="committeeIsInvolveCn" class="involve-checkbox"
+							@change="handleCommitteeInvolveCnChange">
 							只看涉华委员会
 						</el-checkbox>
 					</div>
@@ -75,7 +80,8 @@
 				<div class="right-main" v-loading="loading">
 					<template v-if="activeTabName === '国会法案'">
 						<div class="right-main-box" v-for="item in bills" :key="item.billId">
-							<div v-if="item.riskSignal" class="risk-tag" :class="getRiskTagClass(item.riskSignal)">{{ item.riskSignal }}</div>
+							<div v-if="item.riskSignal" class="risk-tag" :class="getRiskTagClass(item.riskSignal)">{{ item.riskSignal
+								}}</div>
 							<div class="bill-cover">
 								<img class="bill-image" :src="getBillImageUrl(item)" alt="" @error="handleBillImageError" />
 								<div class="bill-id" :title="item.billId">{{ item.billId || "-" }}</div>
@@ -86,14 +92,32 @@
 									<div class="en-title" :title="item.eName">{{ item.eName }}</div>
 								</div>
 								<div class="main">
-									<div class="item"><div class="item-left">提案人：</div><div class="item-right">{{ item.tcr }}</div></div>
-									<div class="item"><div class="item-left">委员会：</div><div class="item-right">{{ item.wyh }}</div></div>
-									<div class="item"><div class="item-left">相关领域：</div><div class="item-right1"><AreaTag v-for="(val, idx) in item.areaList" :key="`${item.billId}-${val}-${idx}`" :tagName="val" /></div></div>
-									<div class="item"><div class="item-left">最新动议：</div><div class="item-right"><CommonPrompt :content="item.zxdy" /></div></div>
+									<div class="item">
+										<div class="item-left">提案人：</div>
+										<div class="item-right">{{ item.tcr }}</div>
+									</div>
+									<div class="item">
+										<div class="item-left">委员会：</div>
+										<div class="item-right">{{ item.wyh }}</div>
+									</div>
+									<div class="item">
+										<div class="item-left">相关领域：</div>
+										<div class="item-right1">
+											<AreaTag v-for="(val, idx) in item.areaList" :key="`${item.billId}-${val}-${idx}`"
+												:tagName="val" />
+										</div>
+									</div>
+									<div class="item">
+										<div class="item-left">最新动议：</div>
+										<div class="item-right">
+											<CommonPrompt :content="item.zxdy" />
+										</div>
+									</div>
 									<div class="item">
 										<div class="item-left">法案进展：</div>
 										<div class="item-right2">
-											<div class="tag" v-for="(val, idx) in item.progress" :key="`${item.billId}-${val}-${idx}`" :style="{ zIndex: item.progress.length - idx }">{{ val }}</div>
+											<div class="tag" v-for="(val, idx) in item.progress" :key="`${item.billId}-${val}-${idx}`"
+												:style="{ zIndex: item.progress.length - idx }">{{ val }}</div>
 										</div>
 									</div>
 								</div>
@@ -102,7 +126,8 @@
 						<div class="right-footer">
 							<div class="footer-left">{{ `共 ${total} 项` }}</div>
 							<div class="footer-right">
-								<el-pagination @current-change="handleCurrentChange" :page-size="pageSize" :current-page="currentPage" background layout="prev, pager, next" :total="total" />
+								<el-pagination @current-change="handleCurrentChange" :page-size="pageSize" :current-page="currentPage"
+									background layout="prev, pager, next" :total="total" />
 							</div>
 						</div>
 					</template>
@@ -111,7 +136,8 @@
 							<div class="member-card" v-for="item in memberList" :key="item.id">
 								<div class="member-card-top">
 									<div class="member-avatar-wrap">
-										<img class="member-avatar" :src="item.avatar || defaultAvatar" alt="avatar" @click="handleClickAvatar(item)" />
+										<img class="member-avatar" :src="item.avatar || defaultAvatar" alt="avatar"
+											@click="handleClickAvatar(item)" />
 										<div class="member-icon-row">
 											<img v-if="item.partyIcon" class="member-mini-icon-img" :src="item.partyIcon" alt="party" />
 											<img v-if="item.chamberIcon" class="member-mini-icon-img" :src="item.chamberIcon" alt="chamber" />
@@ -122,10 +148,14 @@
 											<div class="member-name">{{ item.name || '-' }}</div>
 											<div class="member-link">{{ item.billCountText || '0项提案 >' }}</div>
 										</div>
-										<div class="member-meta">{{ item.partyText || '-' }} · {{ item.chamberText || '-' }} · {{ item.termText || '-' }}</div>
+										<div class="member-meta">{{ item.partyText || '-' }} · {{ item.chamberText || '-' }} · {{
+											item.termText ||
+											'-' }}</div>
 										<div class="member-committee">{{ item.committeeText || '-' }}</div>
 										<div class="member-tags">
-											<div class="member-tag" v-for="(tag, idx) in item.focusTags" :key="`${item.id}-${tag}-${idx}`">{{ tag }}</div>
+											<div class="member-tag" v-for="(tag, idx) in item.focusTags" :key="`${item.id}-${tag}-${idx}`">{{
+												tag }}
+											</div>
 										</div>
 									</div>
 								</div>
@@ -138,7 +168,8 @@
 						<div class="right-footer">
 							<div class="footer-left">{{ `共 ${memberTotal} 项` }}</div>
 							<div class="footer-right">
-								<el-pagination @current-change="handleMemberCurrentChange" :page-size="memberPageSize" :current-page="memberCurrentPage" background layout="prev, pager, next" :total="memberTotal" />
+								<el-pagination @current-change="handleMemberCurrentChange" :page-size="memberPageSize"
+									:current-page="memberCurrentPage" background layout="prev, pager, next" :total="memberTotal" />
 							</div>
 						</div>
 					</div>
@@ -148,27 +179,25 @@
 								<div class="coop-card-header">
 									<div class="coop-members">
 										<div class="coop-member">
-											<img class="coop-avatar" :src="item.left.avatar || defaultAvatar" alt="avatar-left" @click="handleClickAvatar(item.left)" />
+											<img class="coop-avatar" :src="item.left.avatar || defaultAvatar" alt="avatar-left"
+												@click="handleClickAvatar(item.left)" />
 											<div class="coop-member-name" :title="item.left.name">{{ item.left.name }}</div>
 										</div>
 										<div class="coop-dot">·</div>
 										<div class="coop-member">
-											<img class="coop-avatar" :src="item.right.avatar || defaultAvatar" alt="avatar-right" @click="handleClickAvatar(item.right)" />
+											<img class="coop-avatar" :src="item.right.avatar || defaultAvatar" alt="avatar-right"
+												@click="handleClickAvatar(item.right)" />
 											<div class="coop-member-name" :title="item.right.name">{{ item.right.name }}</div>
 										</div>
 									</div>
-									<div class="coop-count">
+									<div class="coop-count" @click="handleCooperationToDataLibrary(item)">
 										{{ item.totalText }}
 									</div>
 									<slot name="coop-extra" :relation="item" />
 								</div>
 								<div class="coop-proposals">
-									<div
-										class="coop-proposal-item"
-										v-for="proposal in item.proposals"
-										:key="proposal.billId"
-										@click="handleClickCoopProposal(proposal)"
-									>
+									<div class="coop-proposal-item" v-for="proposal in item.proposals" :key="proposal.billId"
+										@click="handleClickCoopProposal(proposal)">
 										<div class="coop-proposal-main">
 											<div class="coop-proposal-title">
 												<span class="year">{{ proposal.year }}</span>
@@ -186,14 +215,8 @@
 						<div class="right-footer">
 							<div class="footer-left">{{ `共 ${coopTotal} 项` }}</div>
 							<div class="footer-right">
-								<el-pagination
-									@current-change="handleCoopCurrentChange"
-									:page-size="coopPageSize"
-									:current-page="coopCurrentPage"
-									background
-									layout="prev, pager, next"
-									:total="coopTotal"
-								/>
+								<el-pagination @current-change="handleCoopCurrentChange" :page-size="coopPageSize"
+									:current-page="coopCurrentPage" background layout="prev, pager, next" :total="coopTotal" />
 							</div>
 						</div>
 					</div>
@@ -215,17 +238,13 @@
 									<!-- <div class="coop-summary" :title="item.desc">
 										{{ item.desc }}
 									</div> -->
-									<div class="coop-count">
+									<div class="coop-count" @click="handleToDataLibrary(item)">
 										{{ `${item.proposalSize ?? (item.bills || []).length}项重点法案` }}
 									</div>
 								</div>
 								<div class="coop-proposals">
-									<div
-										class="coop-proposal-item"
-										v-for="bill in item.bills"
-										:key="`${item.id}-${bill.billId || bill.title}`"
-										@click="handleClickCommitteeBill(bill)"
-									>
+									<div class="coop-proposal-item" v-for="bill in item.bills"
+										:key="`${item.id}-${bill.billId || bill.title}`" @click="handleClickCommitteeBill(bill)">
 										<div class="coop-proposal-main">
 											<div class="coop-proposal-subtitle" :title="bill.title">
 												{{ bill.title }}
@@ -239,14 +258,8 @@
 						<div class="right-footer">
 							<div class="footer-left">{{ `共 ${committeeTotal} 项` }}</div>
 							<div class="footer-right">
-								<el-pagination
-									@current-change="handleCommitteeCurrentChange"
-									:page-size="committeePageSize"
-									:current-page="committeeCurrentPage"
-									background
-									layout="prev, pager, next"
-									:total="committeeTotal"
-								/>
+								<el-pagination @current-change="handleCommitteeCurrentChange" :page-size="committeePageSize"
+									:current-page="committeeCurrentPage" background layout="prev, pager, next" :total="committeeTotal" />
 							</div>
 						</div>
 					</div>
@@ -455,7 +468,7 @@ const handleClickAvatar = async member => {
 		} else {
 			ElMessage.warning("找不到当前人员的类型值！");
 		}
-	} catch (error) {}
+	} catch (error) { }
 };
 
 const handleClickCommitteeBill = bill => {
@@ -490,7 +503,7 @@ const handleGetCommitteeList = async () => {
 				const descText = billInfoPage[0]?.originDepart || "";
 				return {
 					id: item.id,
-					nameEn:item.nameEn || "",
+					nameEn: item.nameEn || "",
 					avatar: "",
 					name: item.name || "-",
 					desc: descText,
@@ -586,7 +599,7 @@ const handleGetHylyList = async () => {
 	try {
 		const res = await getHylyList();
 		cateKuList.value = res.data || [];
-	} catch (error) {}
+	} catch (error) { }
 };
 
 const handleGetPostOrgList = async () => {
@@ -596,7 +609,7 @@ const handleGetPostOrgList = async () => {
 			const list = (res.data || []).filter(item => item.departmentId);
 			postOrgList.value = [{ departmentName: "全部委员会", departmentId: "全部委员会" }, ...list];
 		}
-	} catch (error) {}
+	} catch (error) { }
 };
 
 const handleGetPostMemberList = async () => {
@@ -606,7 +619,7 @@ const handleGetPostMemberList = async () => {
 			const list = (res.data || []).filter(item => item.memberId);
 			postMemberList.value = [{ memberName: "全部提出议员", memberId: "全部提出议员" }, ...list];
 		}
-	} catch (error) {}
+	} catch (error) { }
 };
 
 // 获取资源库法案列表
@@ -844,6 +857,40 @@ const handleCommitteeCurrentChange = page => {
 	props.onAfterPageChange && props.onAfterPageChange();
 };
 
+// 议员合作关系跳转至数据资源库
+const handleCooperationToDataLibrary = (item) => {
+	console.log('item', item);
+	console.log('activeAreaList', activeAreaList.value);
+	console.log('areaOptions', areaOptions.value);
+	
+	
+
+}
+
+// 委员会跳转至数据资源库
+const handleToDataLibrary = (item) => {
+	let congressStr = '全部议院'
+	console.log('item', item);
+	console.log('activeYyList', activeYyList.value);
+	if(activeYyList.value && activeYyList.value.length === 1) {
+		if(activeYyList.value[0] === 'S') {
+			congressStr = '参议院'
+		} else if(activeYyList.value[0] === 'H') {
+			congressStr = '众议院'
+		}
+	}
+	const param = {
+		selectedOrg: item.name,
+		selectedCongress: congressStr
+	}
+	
+	const route = router.resolve({
+		path: "/dataLibrary/countryBill",
+		query: param
+	});
+	window.open(route.href, "_blank");
+}
+
 onMounted(() => {
 	handleGetHylyList();
 	handleGetPostOrgList();
@@ -1342,6 +1389,11 @@ onMounted(() => {
 					font-weight: 500;
 					line-height: 22px;
 					margin-left: auto;
+					cursor: pointer;
+
+					&:hover {
+						text-decoration: underline;
+					}
 				}
 
 				.coop-proposals {

src/views/dataLibrary/assets/icons/chart-active.svg

-<svg viewBox="0 0 158 28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="158.000000" height="28.000000" fill="none" clip-path="url(#clipPath_0)" customFrame="url(#clipPath_0)">
+<svg viewBox="0 0 160 28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="160.000000" height="28.000000" fill="none" clip-path="url(#clipPath_10)" customFrame="url(#clipPath_10)">
 	<defs>
-		<clipPath id="clipPath_0">
-			<rect width="158.000000" height="28.000000" x="0.000000" y="0.000000" rx="14.000000" fill="rgb(255,255,255)" />
+		<clipPath id="clipPath_10">
+			<rect width="160.000000" height="28.000000" x="0.000000" y="0.000000" rx="14.000000" fill="rgb(255,255,255)" />
 		</clipPath>
-		<clipPath id="clipPath_1">
-			<rect width="79.000000" height="28.000000" x="0.000000" y="0.000000" fill="rgb(255,255,255)" />
+		<clipPath id="clipPath_11">
+			<rect width="80.000000" height="28.000000" x="0.000000" y="0.000000" fill="rgb(255,255,255)" />
 		</clipPath>
-		<clipPath id="clipPath_2">
-			<rect width="53.000000" height="16.000000" x="13.000000" y="6.000000" fill="rgb(255,255,255)" />
+		<clipPath id="clipPath_12">
+			<rect width="16.000000" height="16.000000" x="12.000000" y="6.000000" fill="rgb(255,255,255)" />
 		</clipPath>
-		<clipPath id="clipPath_3">
-			<rect width="16.000000" height="16.000000" x="13.000000" y="6.000000" fill="rgb(255,255,255)" />
+		<clipPath id="clipPath_13">
+			<rect width="80.000000" height="28.000000" x="80.000000" y="0.000000" fill="rgb(255,255,255)" />
 		</clipPath>
-		<clipPath id="clipPath_4">
-			<rect width="79.000000" height="28.000000" x="79.000000" y="0.000000" fill="rgb(255,255,255)" />
-		</clipPath>
-		<clipPath id="clipPath_5">
-			<rect width="53.000000" height="16.000000" x="92.000000" y="6.000000" fill="rgb(255,255,255)" />
-		</clipPath>
-		<clipPath id="clipPath_6">
+		<clipPath id="clipPath_14">
 			<rect width="16.000000" height="16.000000" x="92.000000" y="6.000000" fill="rgb(255,255,255)" />
 		</clipPath>
 	</defs>
-	<rect id="双相选择" width="157.000000" height="27.000000" x="0.500000" y="0.500000" rx="13.500000" stroke="rgb(5,95,194)" stroke-width="1.000000" />
-	<g id="容器 208" customFrame="url(#clipPath_1)">
-		<rect id="容器 208" width="79.000000" height="28.000000" x="0.000000" y="0.000000" fill="rgb(5,95,194)" />
-		<g id="容器 207" customFrame="url(#clipPath_2)">
-			<rect id="容器 207" width="53.000000" height="16.000000" x="13.000000" y="6.000000" />
-			<g id="icon_图表1 1" clip-path="url(#clipPath_3)" customFrame="url(#clipPath_3)">
-				<rect id="icon_图表1 1" width="16.000000" height="16.000000" x="13.000000" y="6.000000" />
-				<path id="矢量 461" d="M24.8999 11.5078C24.4899 11.5078 24.1499 11.8478 24.1499 12.2578L24.1499 20.2578C24.1499 20.6678 24.4899 21.0078 24.8999 21.0078C25.3099 21.0078 25.6499 20.6678 25.6499 20.2578L25.6499 12.2578C25.6499 11.8478 25.3099 11.5078 24.8999 11.5078ZM20.9999 8.50781C20.5899 8.50781 20.2499 8.84781 20.2499 9.25781L20.2499 20.2578C20.2499 20.6678 20.5899 21.0078 20.9999 21.0078C21.4099 21.0078 21.7499 20.6678 21.7499 20.2578L21.7499 9.25781C21.7499 8.84781 21.4099 8.50781 20.9999 8.50781L20.9999 8.50781ZM16.8999 13.5078C16.4899 13.5078 16.1499 13.8478 16.1499 14.2578L16.1499 20.2578C16.1499 20.6678 16.4899 21.0078 16.8999 21.0078C17.3099 21.0078 17.6499 20.6678 17.6499 20.2578L17.6499 14.2578C17.6499 13.8478 17.3099 13.5078 16.8999 13.5078Z" fill="rgb(255,255,255)" fill-rule="nonzero" />
-			</g>
-			<path id="" d="M38.4492 17.5508C40.625 17.8086 43.375 18.4492 44.8789 18.9922L45.4258 18.1133C43.8711 17.5859 41.1367 16.9766 38.9922 16.7344L38.4492 17.5508ZM40.0312 15.5352C41.2969 15.8086 42.9102 16.3516 43.793 16.7852L44.2891 15.9844C43.3906 15.5859 41.793 15.0703 40.5117 14.8164L40.0312 15.5352ZM40.1602 10.9102L44.2891 10.9102C43.7109 11.5195 42.9609 12.0781 42.0977 12.5742C41.2812 12.1133 40.5938 11.5859 40.0625 11.0078L40.1602 10.9102ZM45.2812 9.9375L45.0898 9.98438L40.9766 9.98438C41.2148 9.67969 41.4414 9.375 41.6172 9.05469L40.6406 8.73438C39.8398 10.0312 38.4805 11.2656 37.1211 12.0625C37.3594 12.2227 37.7617 12.5938 37.9375 12.7852C38.4336 12.4648 38.9102 12.0781 39.3906 11.6484C39.8867 12.1602 40.4805 12.6406 41.1211 13.0703C39.7617 13.6953 38.2383 14.1914 36.832 14.4492C37.0234 14.6875 37.2812 15.1523 37.3906 15.4258C38.9609 15.0703 40.625 14.4805 42.1289 13.6641C43.457 14.3828 44.9609 14.9297 46.4648 15.2461C46.6094 14.9766 46.9102 14.5586 47.1211 14.3516C45.7266 14.0977 44.3203 13.6641 43.1055 13.0898C44.2734 12.3203 45.2812 11.4062 45.9531 10.3516L45.2812 9.9375ZM36.543 19.5039L36.543 8.39844L47.4414 8.39844L47.4414 19.5039L36.543 19.5039ZM35.3906 7.3125L35.3906 21.2305L36.543 21.2305L36.543 20.5586L47.4414 20.5586L47.4414 21.2305L48.6094 21.2305L48.6094 7.3125L35.3906 7.3125ZM63.4883 14.4648C62.8008 15.1367 61.6797 16.0156 60.7188 16.6719C60.0156 15.8398 59.457 14.8945 59.0234 13.8398L64.8789 13.8398L64.8789 12.8164L58.5586 12.8164L58.5586 11.3906L63.6641 11.3906L63.6641 10.3984L58.5586 10.3984L58.5586 9.05469L64.3828 9.05469L64.3828 8.03125L58.5586 8.03125L58.5586 6.60938L57.375 6.60938L57.375 8.03125L51.7266 8.03125L51.7266 9.05469L57.375 9.05469L57.375 10.3984L52.543 10.3984L52.543 11.3906L57.375 11.3906L57.375 12.8164L51.1055 12.8164L51.1055 13.8398L56.3828 13.8398C54.8789 15.1836 52.625 16.4336 50.6406 17.0547C50.8945 17.2969 51.2461 17.7266 51.4062 18.0156C52.2891 17.6797 53.2461 17.2461 54.1602 16.7188L54.1602 19.0898C54.1602 19.7109 53.8086 20 53.5508 20.1289C53.7422 20.3984 53.9844 20.9102 54.0625 21.2148C54.4336 20.9609 55.0078 20.7695 59.4414 19.3438C59.375 19.1055 59.2812 18.6406 59.2461 18.3203L55.375 19.4883L55.375 15.9531C56.3203 15.3125 57.1836 14.5938 57.8711 13.8398C59.0898 17.1836 61.3281 19.5859 64.6094 20.6875C64.7852 20.3672 65.1367 19.9023 65.3906 19.6641C63.8086 19.1992 62.4805 18.4141 61.375 17.375C62.3828 16.7539 63.5508 15.9375 64.4648 15.1523L63.4883 14.4648Z" fill="rgb(255,255,255)" fill-rule="nonzero" />
-		</g>
+	<g id="容器 209" customFrame="url(#clipPath_11)">
+		<rect id="容器 209" width="80.000000" height="28.000000" x="0.000000" y="0.000000" fill="rgb(255,255,255)" />
+		<g id="表格(1) 1" clip-path="url(#clipPath_12)" customFrame="url(#clipPath_12)">
+			<rect id="表格(1) 1" width="16.000000" height="16.000000" x="12.000000" y="6.000000" />
+			<path id="矢量 462" d="M25.1 9L14.9 9C14.8409 9 14.7824 9.006 14.7244 9.01801C14.6665 9.03002 14.6102 9.04781 14.5556 9.07136C14.501 9.09492 14.4491 9.1238 14.4 9.158C14.3509 9.1922 14.3054 9.23106 14.2636 9.27459C14.2218 9.31811 14.1845 9.36547 14.1517 9.41665C14.1188 9.46784 14.0911 9.52186 14.0685 9.57873C14.0459 9.63561 14.0288 9.69423 14.0173 9.7546C14.0058 9.81498 14 9.87594 14 9.9375L14 18.0625C14 18.1241 14.0058 18.185 14.0173 18.2454C14.0288 18.3058 14.0459 18.3644 14.0685 18.4213C14.0911 18.4781 14.1188 18.5322 14.1517 18.5833C14.1845 18.6345 14.2218 18.6819 14.2636 18.7254C14.3054 18.7689 14.3509 18.8078 14.4 18.842C14.4491 18.8762 14.501 18.9051 14.5556 18.9286C14.6102 18.9522 14.6665 18.97 14.7244 18.982C14.7824 18.994 14.8409 19 14.9 19L25.1 19C25.1591 19 25.2176 18.994 25.2756 18.982C25.3335 18.97 25.3898 18.9522 25.4444 18.9286C25.499 18.9051 25.5509 18.8762 25.6 18.842C25.6491 18.8078 25.6946 18.7689 25.7364 18.7254C25.7782 18.6819 25.8155 18.6345 25.8483 18.5833C25.8812 18.5322 25.9089 18.4781 25.9315 18.4213C25.9541 18.3644 25.9712 18.3058 25.9827 18.2454C25.9942 18.185 26 18.1241 26 18.0625L26 9.9375C26 9.87594 25.9942 9.81498 25.9827 9.7546C25.9712 9.69423 25.9541 9.6356 25.9315 9.57873C25.9089 9.52186 25.8812 9.46784 25.8483 9.41665C25.8155 9.36547 25.7782 9.31811 25.7364 9.27459C25.6946 9.23106 25.6492 9.1922 25.6 9.158C25.5509 9.1238 25.499 9.09492 25.4444 9.07136C25.3898 9.04781 25.3335 9.03002 25.2756 9.01801C25.2176 9.006 25.1591 9 25.1 9ZM14.9 11.0312L17.75 11.0312L17.75 12.75L14.9 12.75L14.9 11.0312ZM14.9 13.6875L17.75 13.6875L17.75 15.4062L14.9 15.4062L14.9 13.6875ZM21.35 16.3438L21.35 18.0625L18.65 18.0625L18.65 16.3438L21.35 16.3438ZM18.65 15.4062L18.65 13.6875L21.35 13.6875L21.35 15.4062L18.65 15.4062ZM21.35 12.75L18.65 12.75L18.65 11.0312L21.35 11.0312L21.35 12.75ZM22.25 13.6875L25.1 13.6875L25.1 15.4062L22.25 15.4062L22.25 13.6875ZM22.25 12.75L22.25 11.0312L25.1 11.0312L25.1 12.75L22.25 12.75ZM14.9 16.3438L17.75 16.3438L17.75 18.0625L14.9 18.0625L14.9 16.3438ZM22.25 18.0625L22.25 16.3438L25.1 16.3438L25.1 18.0625L22.25 18.0625Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
 		</g>
-	<g id="容器 209" customFrame="url(#clipPath_4)">
-		<rect id="容器 209" width="79.000000" height="28.000000" x="79.000000" y="0.000000" fill="rgb(255,255,255)" />
-		<g id="容器 207" customFrame="url(#clipPath_5)">
-			<rect id="容器 207" width="53.000000" height="16.000000" x="92.000000" y="6.000000" />
-			<g id="表格(1) 1" clip-path="url(#clipPath_6)" customFrame="url(#clipPath_6)">
-				<rect id="表格(1) 1" width="16.000000" height="16.000000" x="92.000000" y="6.000000" />
-				<path id="矢量 462" d="M105.1 9L94.9 9C94.8409 9 94.7824 9.006 94.7244 9.01801C94.6665 9.03002 94.6102 9.04781 94.5556 9.07136C94.501 9.09492 94.4491 9.1238 94.4 9.158C94.3509 9.1922 94.3054 9.23106 94.2636 9.27459C94.2218 9.31811 94.1845 9.36547 94.1517 9.41665C94.1188 9.46784 94.0911 9.52186 94.0685 9.57873C94.0459 9.63561 94.0288 9.69423 94.0173 9.7546C94.0058 9.81498 94 9.87594 94 9.9375L94 18.0625C94 18.1241 94.0058 18.185 94.0173 18.2454C94.0288 18.3058 94.0459 18.3644 94.0685 18.4213C94.0911 18.4781 94.1188 18.5322 94.1517 18.5833C94.1845 18.6345 94.2218 18.6819 94.2636 18.7254C94.3054 18.7689 94.3509 18.8078 94.4 18.842C94.4491 18.8762 94.501 18.9051 94.5556 18.9286C94.6102 18.9522 94.6665 18.97 94.7244 18.982C94.7824 18.994 94.8409 19 94.9 19L105.1 19C105.159 19 105.218 18.994 105.276 18.982C105.334 18.97 105.39 18.9522 105.444 18.9286C105.499 18.9051 105.551 18.8762 105.6 18.842C105.649 18.8078 105.695 18.7689 105.736 18.7254C105.778 18.6819 105.815 18.6345 105.848 18.5833C105.881 18.5322 105.909 18.4781 105.931 18.4213C105.954 18.3644 105.971 18.3058 105.983 18.2454C105.994 18.185 106 18.1241 106 18.0625L106 9.9375C106 9.87594 105.994 9.81498 105.983 9.7546C105.971 9.69423 105.954 9.6356 105.931 9.57873C105.909 9.52186 105.881 9.46784 105.848 9.41665C105.815 9.36547 105.778 9.31811 105.736 9.27459C105.695 9.23106 105.649 9.1922 105.6 9.158C105.551 9.1238 105.499 9.09492 105.444 9.07136C105.39 9.04781 105.334 9.03002 105.276 9.01801C105.218 9.006 105.159 9 105.1 9ZM94.9 11.0312L97.75 11.0312L97.75 12.75L94.9 12.75L94.9 11.0312ZM94.9 13.6875L97.75 13.6875L97.75 15.4062L94.9 15.4062L94.9 13.6875ZM101.35 16.3438L101.35 18.0625L98.65 18.0625L98.65 16.3438L101.35 16.3438ZM98.65 15.4062L98.65 13.6875L101.35 13.6875L101.35 15.4062L98.65 15.4062ZM101.35 12.75L98.65 12.75L98.65 11.0312L101.35 11.0312L101.35 12.75ZM102.25 13.6875L105.1 13.6875L105.1 15.4062L102.25 15.4062L102.25 13.6875ZM102.25 12.75L102.25 11.0312L105.1 11.0312L105.1 12.75L102.25 12.75ZM94.9 16.3438L97.75 16.3438L97.75 18.0625L94.9 18.0625L94.9 16.3438ZM102.25 18.0625L102.25 16.3438L105.1 16.3438L105.1 18.0625L102.25 18.0625Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
+		<path id="" d="M43.1055 6.91016C42.832 7.55078 42.3047 8.46484 41.9023 9.03906L42.6719 9.40625C43.1211 8.87891 43.6328 8.07812 44.0977 7.35938L43.1055 6.91016ZM39.3594 9.07031C39.1992 8.48047 38.7695 7.63281 38.3203 7.00781L37.457 7.35938C37.8867 8.01562 38.3047 8.89453 38.4492 9.45703L39.3594 9.07031ZM40.1445 13.5508L41.2461 13.5508L41.2461 11.3594C42.0156 11.9023 43.0078 12.6875 43.3906 13.0547L44.0469 12.1914C43.6797 11.9219 42.3047 11.0234 41.5039 10.5586L44.5117 10.5586L44.5117 9.56641L41.2461 9.56641L41.2461 6.60938L40.1445 6.60938L40.1445 9.56641L36.8477 9.56641L36.8477 10.5586L39.7773 10.5586C38.9922 11.6016 37.8086 12.5742 36.6875 13.0547C36.9102 13.2812 37.1992 13.6797 37.3281 13.9531C38.3047 13.4414 39.3438 12.5586 40.1445 11.6172L40.1445 13.5508ZM42.5742 15.8398C42.2227 16.6719 41.7109 17.375 41.0898 17.9531C40.5117 17.6641 39.8711 17.3594 39.2812 17.1055C39.5039 16.7344 39.7422 16.2891 39.9844 15.8398L42.5742 15.8398ZM43.3594 19.2812C43.0078 19.0234 42.5273 18.7344 42.0156 18.4492C42.8633 17.5508 43.5195 16.4336 43.9375 15.0547L43.2656 14.7852L43.0898 14.832L40.4805 14.832C40.6094 14.543 40.7031 14.2734 40.8164 14L39.7617 13.8086C39.6484 14.1445 39.5039 14.4805 39.3438 14.832L37.1836 14.832L37.1836 15.8398L38.8477 15.8398C38.5117 16.4648 38.1602 17.0547 37.8242 17.5352C38.6094 17.8242 39.4727 18.2227 40.2734 18.6406C39.2305 19.375 38.0156 19.8867 36.7188 20.1758C36.9297 20.3984 37.168 20.832 37.2812 21.0898C38.7344 20.7031 40.0977 20.0781 41.2305 19.168C41.7773 19.4727 42.2578 19.793 42.625 20.0625L43.3594 19.2812ZM48.9102 10.8008C48.6719 12.6406 48.2891 14.2383 47.7109 15.5859C47.1055 14.1602 46.6562 12.5273 46.3516 10.8008L48.9102 10.8008ZM51.1055 10.8008L51.1055 9.69531L46.5938 9.69531C46.8164 8.80078 47.0078 7.87109 47.1367 6.92969L46.0469 6.76953C45.6484 9.53516 44.9297 12.207 43.7109 13.8867C43.9688 14.0469 44.4141 14.4141 44.6094 14.6094C45.0078 14 45.375 13.2969 45.6953 12.5117C46.0469 14.0977 46.4961 15.5352 47.1055 16.7852C46.207 18.3047 44.9609 19.4727 43.2305 20.3203C43.4414 20.543 43.7773 21.0234 43.8867 21.2812C45.5195 20.3984 46.7344 19.2812 47.6797 17.8867C48.4648 19.2461 49.4727 20.3359 50.7031 21.0898C50.8789 20.7852 51.2148 20.3828 51.4883 20.1602C50.1602 19.457 49.1211 18.2734 48.3047 16.8164C49.1523 15.168 49.6797 13.1836 50.0469 10.8008L51.1055 10.8008ZM57.6484 14.6562L57.4883 13.5664L55.8242 14.0977L55.8242 10.9297L57.6328 10.9297L57.6328 9.82422L55.8242 9.82422L55.8242 6.625L54.7188 6.625L54.7188 9.82422L52.7344 9.82422L52.7344 10.9297L54.7188 10.9297L54.7188 14.4336C53.8867 14.6719 53.1367 14.8945 52.543 15.0703L52.832 16.207C53.4062 16.0312 54.0469 15.8398 54.7188 15.6172L54.7188 19.7266C54.7188 19.9688 54.6406 20.0312 54.4492 20.0312C54.2734 20.0312 53.6328 20.0312 52.9453 20.0156C53.1055 20.3516 53.2461 20.832 53.2969 21.1211C54.3047 21.1367 54.9102 21.0898 55.2812 20.8945C55.6797 20.7031 55.8242 20.3984 55.8242 19.7422L55.8242 15.2461L57.6484 14.6562ZM59.4727 13.1836C59.4883 12.8008 59.4883 12.4648 59.4883 12.1133L59.4883 11.4258L62.5742 11.4258L62.5742 13.1836L59.4727 13.1836ZM65.582 8.35156L65.582 10.3828L59.4883 10.3828L59.4883 8.35156L65.582 8.35156ZM65.6953 19.6016L60.7852 19.6016L60.7852 17.1836L65.6953 17.1836L65.6953 19.6016ZM67.2656 14.207L67.2656 13.1836L63.7109 13.1836L63.7109 11.4258L66.7188 11.4258L66.7188 7.3125L58.3359 7.3125L58.3359 12.1133C58.3359 14.6406 58.1914 18.1133 56.543 20.5586C56.8164 20.6719 57.3125 21.0078 57.5039 21.2305C58.8477 19.2656 59.2812 16.5742 59.4258 14.207L62.5742 14.207L62.5742 16.1758L59.7422 16.1758L59.7422 21.2461L60.7852 21.2461L60.7852 20.5938L65.6953 20.5938L65.6953 21.1836L66.7852 21.1836L66.7852 16.1758L63.7109 16.1758L63.7109 14.207L67.2656 14.207Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
 	</g>
-			<path id="" d="M120.105 6.91016C119.832 7.55078 119.305 8.46484 118.902 9.03906L119.672 9.40625C120.121 8.87891 120.633 8.07812 121.098 7.35938L120.105 6.91016ZM116.359 9.07031C116.199 8.48047 115.77 7.63281 115.32 7.00781L114.457 7.35938C114.887 8.01562 115.305 8.89453 115.449 9.45703L116.359 9.07031ZM117.145 13.5508L118.246 13.5508L118.246 11.3594C119.016 11.9023 120.008 12.6875 120.391 13.0547L121.047 12.1914C120.68 11.9219 119.305 11.0234 118.504 10.5586L121.512 10.5586L121.512 9.56641L118.246 9.56641L118.246 6.60938L117.145 6.60938L117.145 9.56641L113.848 9.56641L113.848 10.5586L116.777 10.5586C115.992 11.6016 114.809 12.5742 113.688 13.0547C113.91 13.2812 114.199 13.6797 114.328 13.9531C115.305 13.4414 116.344 12.5586 117.145 11.6172L117.145 13.5508ZM119.574 15.8398C119.223 16.6719 118.711 17.375 118.09 17.9531C117.512 17.6641 116.871 17.3594 116.281 17.1055C116.504 16.7344 116.742 16.2891 116.984 15.8398L119.574 15.8398ZM120.359 19.2812C120.008 19.0234 119.527 18.7344 119.016 18.4492C119.863 17.5508 120.52 16.4336 120.938 15.0547L120.266 14.7852L120.09 14.832L117.48 14.832C117.609 14.543 117.703 14.2734 117.816 14L116.762 13.8086C116.648 14.1445 116.504 14.4805 116.344 14.832L114.184 14.832L114.184 15.8398L115.848 15.8398C115.512 16.4648 115.16 17.0547 114.824 17.5352C115.609 17.8242 116.473 18.2227 117.273 18.6406C116.23 19.375 115.016 19.8867 113.719 20.1758C113.93 20.3984 114.168 20.832 114.281 21.0898C115.734 20.7031 117.098 20.0781 118.23 19.168C118.777 19.4727 119.258 19.793 119.625 20.0625L120.359 19.2812ZM125.91 10.8008C125.672 12.6406 125.289 14.2383 124.711 15.5859C124.105 14.1602 123.656 12.5273 123.352 10.8008L125.91 10.8008ZM128.105 10.8008L128.105 9.69531L123.594 9.69531C123.816 8.80078 124.008 7.87109 124.137 6.92969L123.047 6.76953C122.648 9.53516 121.93 12.207 120.711 13.8867C120.969 14.0469 121.414 14.4141 121.609 14.6094C122.008 14 122.375 13.2969 122.695 12.5117C123.047 14.0977 123.496 15.5352 124.105 16.7852C123.207 18.3047 121.961 19.4727 120.23 20.3203C120.441 20.543 120.777 21.0234 120.887 21.2812C122.52 20.3984 123.734 19.2812 124.68 17.8867C125.465 19.2461 126.473 20.3359 127.703 21.0898C127.879 20.7852 128.215 20.3828 128.488 20.1602C127.16 19.457 126.121 18.2734 125.305 16.8164C126.152 15.168 126.68 13.1836 127.047 10.8008L128.105 10.8008ZM134.648 14.6562L134.488 13.5664L132.824 14.0977L132.824 10.9297L134.633 10.9297L134.633 9.82422L132.824 9.82422L132.824 6.625L131.719 6.625L131.719 9.82422L129.734 9.82422L129.734 10.9297L131.719 10.9297L131.719 14.4336C130.887 14.6719 130.137 14.8945 129.543 15.0703L129.832 16.207C130.406 16.0312 131.047 15.8398 131.719 15.6172L131.719 19.7266C131.719 19.9688 131.641 20.0312 131.449 20.0312C131.273 20.0312 130.633 20.0312 129.945 20.0156C130.105 20.3516 130.246 20.832 130.297 21.1211C131.305 21.1367 131.91 21.0898 132.281 20.8945C132.68 20.7031 132.824 20.3984 132.824 19.7422L132.824 15.2461L134.648 14.6562ZM136.473 13.1836C136.488 12.8008 136.488 12.4648 136.488 12.1133L136.488 11.4258L139.574 11.4258L139.574 13.1836L136.473 13.1836ZM142.582 8.35156L142.582 10.3828L136.488 10.3828L136.488 8.35156L142.582 8.35156ZM142.695 19.6016L137.785 19.6016L137.785 17.1836L142.695 17.1836L142.695 19.6016ZM144.266 14.207L144.266 13.1836L140.711 13.1836L140.711 11.4258L143.719 11.4258L143.719 7.3125L135.336 7.3125L135.336 12.1133C135.336 14.6406 135.191 18.1133 133.543 20.5586C133.816 20.6719 134.312 21.0078 134.504 21.2305C135.848 19.2656 136.281 16.5742 136.426 14.207L139.574 14.207L139.574 16.1758L136.742 16.1758L136.742 21.2461L137.785 21.2461L137.785 20.5938L142.695 20.5938L142.695 21.1836L143.785 21.1836L143.785 16.1758L140.711 16.1758L140.711 14.207L144.266 14.207Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
+	<g id="容器 208" customFrame="url(#clipPath_13)">
+		<rect id="容器 208" width="80.000000" height="28.000000" x="80.000000" y="0.000000" fill="rgb(5,95,194)" />
+		<g id="icon_图表1 1" clip-path="url(#clipPath_14)" customFrame="url(#clipPath_14)">
+			<rect id="icon_图表1 1" width="16.000000" height="16.000000" x="92.000000" y="6.000000" />
+			<path id="矢量 461" d="M103.9 11.5078C103.49 11.5078 103.15 11.8478 103.15 12.2578L103.15 20.2578C103.15 20.6678 103.49 21.0078 103.9 21.0078C104.31 21.0078 104.65 20.6678 104.65 20.2578L104.65 12.2578C104.65 11.8478 104.31 11.5078 103.9 11.5078ZM100 8.50781C99.5904 8.50781 99.2504 8.84781 99.2504 9.25781L99.2504 20.2578C99.2504 20.6678 99.5904 21.0078 100 21.0078C100.41 21.0078 100.75 20.6678 100.75 20.2578L100.75 9.25781C100.75 8.84781 100.41 8.50781 100 8.50781L100 8.50781ZM95.9004 13.5078C95.4904 13.5078 95.1504 13.8478 95.1504 14.2578L95.1504 20.2578C95.1504 20.6678 95.4904 21.0078 95.9004 21.0078C96.3104 21.0078 96.6504 20.6678 96.6504 20.2578L96.6504 14.2578C96.6504 13.8478 96.3104 13.5078 95.9004 13.5078Z" fill="rgb(255,255,255)" fill-rule="nonzero" />
 		</g>
+		<path id="" d="M120.449 17.5508C122.625 17.8086 125.375 18.4492 126.879 18.9922L127.426 18.1133C125.871 17.5859 123.137 16.9766 120.992 16.7344L120.449 17.5508ZM122.031 15.5352C123.297 15.8086 124.91 16.3516 125.793 16.7852L126.289 15.9844C125.391 15.5859 123.793 15.0703 122.512 14.8164L122.031 15.5352ZM122.16 10.9102L126.289 10.9102C125.711 11.5195 124.961 12.0781 124.098 12.5742C123.281 12.1133 122.594 11.5859 122.062 11.0078L122.16 10.9102ZM127.281 9.9375L127.09 9.98438L122.977 9.98438C123.215 9.67969 123.441 9.375 123.617 9.05469L122.641 8.73438C121.84 10.0312 120.48 11.2656 119.121 12.0625C119.359 12.2227 119.762 12.5938 119.938 12.7852C120.434 12.4648 120.91 12.0781 121.391 11.6484C121.887 12.1602 122.48 12.6406 123.121 13.0703C121.762 13.6953 120.238 14.1914 118.832 14.4492C119.023 14.6875 119.281 15.1523 119.391 15.4258C120.961 15.0703 122.625 14.4805 124.129 13.6641C125.457 14.3828 126.961 14.9297 128.465 15.2461C128.609 14.9766 128.91 14.5586 129.121 14.3516C127.727 14.0977 126.32 13.6641 125.105 13.0898C126.273 12.3203 127.281 11.4062 127.953 10.3516L127.281 9.9375ZM118.543 19.5039L118.543 8.39844L129.441 8.39844L129.441 19.5039L118.543 19.5039ZM117.391 7.3125L117.391 21.2305L118.543 21.2305L118.543 20.5586L129.441 20.5586L129.441 21.2305L130.609 21.2305L130.609 7.3125L117.391 7.3125ZM145.488 14.4648C144.801 15.1367 143.68 16.0156 142.719 16.6719C142.016 15.8398 141.457 14.8945 141.023 13.8398L146.879 13.8398L146.879 12.8164L140.559 12.8164L140.559 11.3906L145.664 11.3906L145.664 10.3984L140.559 10.3984L140.559 9.05469L146.383 9.05469L146.383 8.03125L140.559 8.03125L140.559 6.60938L139.375 6.60938L139.375 8.03125L133.727 8.03125L133.727 9.05469L139.375 9.05469L139.375 10.3984L134.543 10.3984L134.543 11.3906L139.375 11.3906L139.375 12.8164L133.105 12.8164L133.105 13.8398L138.383 13.8398C136.879 15.1836 134.625 16.4336 132.641 17.0547C132.895 17.2969 133.246 17.7266 133.406 18.0156C134.289 17.6797 135.246 17.2461 136.16 16.7188L136.16 19.0898C136.16 19.7109 135.809 20 135.551 20.1289C135.742 20.3984 135.984 20.9102 136.062 21.2148C136.434 20.9609 137.008 20.7695 141.441 19.3438C141.375 19.1055 141.281 18.6406 141.246 18.3203L137.375 19.4883L137.375 15.9531C138.32 15.3125 139.184 14.5938 139.871 13.8398C141.09 17.1836 143.328 19.5859 146.609 20.6875C146.785 20.3672 147.137 19.9023 147.391 19.6641C145.809 19.1992 144.48 18.4141 143.375 17.375C144.383 16.7539 145.551 15.9375 146.465 15.1523L145.488 14.4648Z" fill="rgb(255,255,255)" fill-rule="nonzero" />
 	</g>
+	<rect id="双相选择" width="159.000000" height="27.000000" x="0.500000" y="0.500000" rx="13.500000" stroke="rgb(5,95,194)" stroke-width="1.000000" />
 </svg>

src/views/dataLibrary/assets/icons/data-active.svg

-<svg viewBox="0 0 158 28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="158.000000" height="28.000000" fill="none" clip-path="url(#clipPath_7)" customFrame="url(#clipPath_7)">
+<svg viewBox="0 0 160 28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="160.000000" height="28.000000" fill="none" clip-path="url(#clipPath_15)" customFrame="url(#clipPath_15)">
 	<defs>
-		<clipPath id="clipPath_7">
-			<rect width="158.000000" height="28.000000" x="0.000000" y="0.000000" rx="14.000000" fill="rgb(255,255,255)" />
+		<clipPath id="clipPath_15">
+			<rect width="160.000000" height="28.000000" x="0.000000" y="0.000000" rx="14.000000" fill="rgb(255,255,255)" />
 		</clipPath>
-		<clipPath id="clipPath_8">
-			<rect width="79.000000" height="28.000000" x="0.000000" y="0.000000" fill="rgb(255,255,255)" />
+		<clipPath id="clipPath_16">
+			<rect width="80.000000" height="28.000000" x="0.000000" y="0.000000" fill="rgb(255,255,255)" />
 		</clipPath>
-		<clipPath id="clipPath_9">
-			<rect width="53.000000" height="16.000000" x="13.000000" y="6.000000" fill="rgb(255,255,255)" />
+		<clipPath id="clipPath_17">
+			<rect width="16.000000" height="16.000000" x="12.000000" y="6.000000" fill="rgb(255,255,255)" />
 		</clipPath>
-		<clipPath id="clipPath_10">
-			<rect width="16.000000" height="16.000000" x="13.000000" y="6.000000" fill="rgb(255,255,255)" />
+		<clipPath id="clipPath_18">
+			<rect width="80.000000" height="28.000000" x="80.000000" y="0.000000" fill="rgb(255,255,255)" />
 		</clipPath>
-		<clipPath id="clipPath_11">
-			<rect width="79.000000" height="28.000000" x="79.000000" y="0.000000" fill="rgb(255,255,255)" />
-		</clipPath>
-		<clipPath id="clipPath_12">
-			<rect width="53.000000" height="16.000000" x="92.000000" y="6.000000" fill="rgb(255,255,255)" />
-		</clipPath>
-		<clipPath id="clipPath_13">
+		<clipPath id="clipPath_19">
 			<rect width="16.000000" height="16.000000" x="92.000000" y="6.000000" fill="rgb(255,255,255)" />
 		</clipPath>
 	</defs>
-	<rect id="双相选择" width="157.000000" height="27.000000" x="0.500000" y="0.500000" rx="13.500000" stroke="rgb(5,95,194)" stroke-width="1.000000" />
-	<g id="容器 208" customFrame="url(#clipPath_8)">
-		<rect id="容器 208" width="79.000000" height="28.000000" x="0.000000" y="0.000000" fill="rgb(255,255,255)" />
-		<g id="容器 207" customFrame="url(#clipPath_9)">
-			<rect id="容器 207" width="53.000000" height="16.000000" x="13.000000" y="6.000000" />
-			<g id="icon_图表1 1" clip-path="url(#clipPath_10)" customFrame="url(#clipPath_10)">
-				<rect id="icon_图表1 1" width="16.000000" height="16.000000" x="13.000000" y="6.000000" />
-				<path id="矢量 461" d="M24.9004 11.5078C24.4904 11.5078 24.1504 11.8478 24.1504 12.2578L24.1504 20.2578C24.1504 20.6678 24.4904 21.0078 24.9004 21.0078C25.3104 21.0078 25.6504 20.6678 25.6504 20.2578L25.6504 12.2578C25.6504 11.8478 25.3104 11.5078 24.9004 11.5078ZM21.0004 8.50781C20.5904 8.50781 20.2504 8.84781 20.2504 9.25781L20.2504 20.2578C20.2504 20.6678 20.5904 21.0078 21.0004 21.0078C21.4104 21.0078 21.7504 20.6678 21.7504 20.2578L21.7504 9.25781C21.7504 8.84781 21.4104 8.50781 21.0004 8.50781L21.0004 8.50781ZM16.9004 13.5078C16.4904 13.5078 16.1504 13.8478 16.1504 14.2578L16.1504 20.2578C16.1504 20.6678 16.4904 21.0078 16.9004 21.0078C17.3104 21.0078 17.6504 20.6678 17.6504 20.2578L17.6504 14.2578C17.6504 13.8478 17.3104 13.5078 16.9004 13.5078Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
-			</g>
-			<path id="" d="M38.4492 17.5508C40.625 17.8086 43.375 18.4492 44.8789 18.9922L45.4258 18.1133C43.8711 17.5859 41.1367 16.9766 38.9922 16.7344L38.4492 17.5508ZM40.0312 15.5352C41.2969 15.8086 42.9102 16.3516 43.793 16.7852L44.2891 15.9844C43.3906 15.5859 41.793 15.0703 40.5117 14.8164L40.0312 15.5352ZM40.1602 10.9102L44.2891 10.9102C43.7109 11.5195 42.9609 12.0781 42.0977 12.5742C41.2812 12.1133 40.5938 11.5859 40.0625 11.0078L40.1602 10.9102ZM45.2812 9.9375L45.0898 9.98438L40.9766 9.98438C41.2148 9.67969 41.4414 9.375 41.6172 9.05469L40.6406 8.73438C39.8398 10.0312 38.4805 11.2656 37.1211 12.0625C37.3594 12.2227 37.7617 12.5938 37.9375 12.7852C38.4336 12.4648 38.9102 12.0781 39.3906 11.6484C39.8867 12.1602 40.4805 12.6406 41.1211 13.0703C39.7617 13.6953 38.2383 14.1914 36.832 14.4492C37.0234 14.6875 37.2812 15.1523 37.3906 15.4258C38.9609 15.0703 40.625 14.4805 42.1289 13.6641C43.457 14.3828 44.9609 14.9297 46.4648 15.2461C46.6094 14.9766 46.9102 14.5586 47.1211 14.3516C45.7266 14.0977 44.3203 13.6641 43.1055 13.0898C44.2734 12.3203 45.2812 11.4062 45.9531 10.3516L45.2812 9.9375ZM36.543 19.5039L36.543 8.39844L47.4414 8.39844L47.4414 19.5039L36.543 19.5039ZM35.3906 7.3125L35.3906 21.2305L36.543 21.2305L36.543 20.5586L47.4414 20.5586L47.4414 21.2305L48.6094 21.2305L48.6094 7.3125L35.3906 7.3125ZM63.4883 14.4648C62.8008 15.1367 61.6797 16.0156 60.7188 16.6719C60.0156 15.8398 59.457 14.8945 59.0234 13.8398L64.8789 13.8398L64.8789 12.8164L58.5586 12.8164L58.5586 11.3906L63.6641 11.3906L63.6641 10.3984L58.5586 10.3984L58.5586 9.05469L64.3828 9.05469L64.3828 8.03125L58.5586 8.03125L58.5586 6.60938L57.375 6.60938L57.375 8.03125L51.7266 8.03125L51.7266 9.05469L57.375 9.05469L57.375 10.3984L52.543 10.3984L52.543 11.3906L57.375 11.3906L57.375 12.8164L51.1055 12.8164L51.1055 13.8398L56.3828 13.8398C54.8789 15.1836 52.625 16.4336 50.6406 17.0547C50.8945 17.2969 51.2461 17.7266 51.4062 18.0156C52.2891 17.6797 53.2461 17.2461 54.1602 16.7188L54.1602 19.0898C54.1602 19.7109 53.8086 20 53.5508 20.1289C53.7422 20.3984 53.9844 20.9102 54.0625 21.2148C54.4336 20.9609 55.0078 20.7695 59.4414 19.3438C59.375 19.1055 59.2812 18.6406 59.2461 18.3203L55.375 19.4883L55.375 15.9531C56.3203 15.3125 57.1836 14.5938 57.8711 13.8398C59.0898 17.1836 61.3281 19.5859 64.6094 20.6875C64.7852 20.3672 65.1367 19.9023 65.3906 19.6641C63.8086 19.1992 62.4805 18.4141 61.375 17.375C62.3828 16.7539 63.5508 15.9375 64.4648 15.1523L63.4883 14.4648Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
-		</g>
+	<g id="容器 209" customFrame="url(#clipPath_16)">
+		<rect id="容器 209" width="80.000000" height="28.000000" x="0.000000" y="0.000000" fill="rgb(5,95,194)" />
+		<g id="表格(1) 1" clip-path="url(#clipPath_17)" customFrame="url(#clipPath_17)">
+			<rect id="表格(1) 1" width="16.000000" height="16.000000" x="12.000000" y="6.000000" />
+			<path id="矢量 462" d="M25.1 9L14.9 9C14.8409 9 14.7824 9.006 14.7244 9.01801C14.6665 9.03002 14.6102 9.04781 14.5556 9.07136C14.501 9.09492 14.4491 9.1238 14.4 9.158C14.3509 9.1922 14.3054 9.23106 14.2636 9.27459C14.2218 9.31811 14.1845 9.36547 14.1517 9.41665C14.1188 9.46784 14.0911 9.52186 14.0685 9.57873C14.0459 9.63561 14.0288 9.69423 14.0173 9.7546C14.0058 9.81498 14 9.87594 14 9.9375L14 18.0625C14 18.1241 14.0058 18.185 14.0173 18.2454C14.0288 18.3058 14.0459 18.3644 14.0685 18.4213C14.0911 18.4781 14.1188 18.5322 14.1517 18.5833C14.1845 18.6345 14.2218 18.6819 14.2636 18.7254C14.3054 18.7689 14.3509 18.8078 14.4 18.842C14.4491 18.8762 14.501 18.9051 14.5556 18.9286C14.6102 18.9522 14.6665 18.97 14.7244 18.982C14.7824 18.994 14.8409 19 14.9 19L25.1 19C25.1591 19 25.2176 18.994 25.2756 18.982C25.3335 18.97 25.3898 18.9522 25.4444 18.9286C25.499 18.9051 25.5509 18.8762 25.6 18.842C25.6491 18.8078 25.6946 18.7689 25.7364 18.7254C25.7782 18.6819 25.8155 18.6345 25.8483 18.5833C25.8812 18.5322 25.9089 18.4781 25.9315 18.4213C25.9541 18.3644 25.9712 18.3058 25.9827 18.2454C25.9942 18.185 26 18.1241 26 18.0625L26 9.9375C26 9.87594 25.9942 9.81498 25.9827 9.7546C25.9712 9.69423 25.9541 9.6356 25.9315 9.57873C25.9089 9.52186 25.8812 9.46784 25.8483 9.41665C25.8155 9.36547 25.7782 9.31811 25.7364 9.27459C25.6946 9.23106 25.6492 9.1922 25.6 9.158C25.5509 9.1238 25.499 9.09492 25.4444 9.07136C25.3898 9.04781 25.3335 9.03002 25.2756 9.01801C25.2176 9.006 25.1591 9 25.1 9ZM14.9 11.0312L17.75 11.0312L17.75 12.75L14.9 12.75L14.9 11.0312ZM14.9 13.6875L17.75 13.6875L17.75 15.4062L14.9 15.4062L14.9 13.6875ZM21.35 16.3438L21.35 18.0625L18.65 18.0625L18.65 16.3438L21.35 16.3438ZM18.65 15.4062L18.65 13.6875L21.35 13.6875L21.35 15.4062L18.65 15.4062ZM21.35 12.75L18.65 12.75L18.65 11.0312L21.35 11.0312L21.35 12.75ZM22.25 13.6875L25.1 13.6875L25.1 15.4062L22.25 15.4062L22.25 13.6875ZM22.25 12.75L22.25 11.0312L25.1 11.0312L25.1 12.75L22.25 12.75ZM14.9 16.3438L17.75 16.3438L17.75 18.0625L14.9 18.0625L14.9 16.3438ZM22.25 18.0625L22.25 16.3438L25.1 16.3438L25.1 18.0625L22.25 18.0625Z" fill="rgb(255,255,255)" fill-rule="nonzero" />
 		</g>
-	<g id="容器 209" customFrame="url(#clipPath_11)">
-		<rect id="容器 209" width="79.000000" height="28.000000" x="79.000000" y="0.000000" fill="rgb(5,95,194)" />
-		<g id="容器 207" customFrame="url(#clipPath_12)">
-			<rect id="容器 207" width="53.000000" height="16.000000" x="92.000000" y="6.000000" />
-			<g id="表格(1) 1" clip-path="url(#clipPath_13)" customFrame="url(#clipPath_13)">
-				<rect id="表格(1) 1" width="16.000000" height="16.000000" x="92.000000" y="6.000000" />
-				<path id="矢量 462" d="M105.1 9L94.9 9C94.8409 9 94.7824 9.006 94.7244 9.01801C94.6665 9.03002 94.6102 9.04781 94.5556 9.07136C94.501 9.09492 94.4491 9.1238 94.4 9.158C94.3509 9.1922 94.3054 9.23106 94.2636 9.27459C94.2218 9.31811 94.1845 9.36547 94.1517 9.41665C94.1188 9.46784 94.0911 9.52186 94.0685 9.57873C94.0459 9.63561 94.0288 9.69423 94.0173 9.7546C94.0058 9.81498 94 9.87594 94 9.9375L94 18.0625C94 18.1241 94.0058 18.185 94.0173 18.2454C94.0288 18.3058 94.0459 18.3644 94.0685 18.4213C94.0911 18.4781 94.1188 18.5322 94.1517 18.5833C94.1845 18.6345 94.2218 18.6819 94.2636 18.7254C94.3054 18.7689 94.3509 18.8078 94.4 18.842C94.4491 18.8762 94.501 18.9051 94.5556 18.9286C94.6102 18.9522 94.6665 18.97 94.7244 18.982C94.7824 18.994 94.8409 19 94.9 19L105.1 19C105.159 19 105.218 18.994 105.276 18.982C105.334 18.97 105.39 18.9522 105.444 18.9286C105.499 18.9051 105.551 18.8762 105.6 18.842C105.649 18.8078 105.695 18.7689 105.736 18.7254C105.778 18.6819 105.815 18.6345 105.848 18.5833C105.881 18.5322 105.909 18.4781 105.931 18.4213C105.954 18.3644 105.971 18.3058 105.983 18.2454C105.994 18.185 106 18.1241 106 18.0625L106 9.9375C106 9.87594 105.994 9.81498 105.983 9.7546C105.971 9.69423 105.954 9.6356 105.931 9.57873C105.909 9.52186 105.881 9.46784 105.848 9.41665C105.815 9.36547 105.778 9.31811 105.736 9.27459C105.695 9.23106 105.649 9.1922 105.6 9.158C105.551 9.1238 105.499 9.09492 105.444 9.07136C105.39 9.04781 105.334 9.03002 105.276 9.01801C105.218 9.006 105.159 9 105.1 9ZM94.9 11.0312L97.75 11.0312L97.75 12.75L94.9 12.75L94.9 11.0312ZM94.9 13.6875L97.75 13.6875L97.75 15.4062L94.9 15.4062L94.9 13.6875ZM101.35 16.3438L101.35 18.0625L98.65 18.0625L98.65 16.3438L101.35 16.3438ZM98.65 15.4062L98.65 13.6875L101.35 13.6875L101.35 15.4062L98.65 15.4062ZM101.35 12.75L98.65 12.75L98.65 11.0312L101.35 11.0312L101.35 12.75ZM102.25 13.6875L105.1 13.6875L105.1 15.4062L102.25 15.4062L102.25 13.6875ZM102.25 12.75L102.25 11.0312L105.1 11.0312L105.1 12.75L102.25 12.75ZM94.9 16.3438L97.75 16.3438L97.75 18.0625L94.9 18.0625L94.9 16.3438ZM102.25 18.0625L102.25 16.3438L105.1 16.3438L105.1 18.0625L102.25 18.0625Z" fill="rgb(255,255,255)" fill-rule="nonzero" />
+		<path id="" d="M43.1055 6.91016C42.832 7.55078 42.3047 8.46484 41.9023 9.03906L42.6719 9.40625C43.1211 8.87891 43.6328 8.07812 44.0977 7.35938L43.1055 6.91016ZM39.3594 9.07031C39.1992 8.48047 38.7695 7.63281 38.3203 7.00781L37.457 7.35938C37.8867 8.01562 38.3047 8.89453 38.4492 9.45703L39.3594 9.07031ZM40.1445 13.5508L41.2461 13.5508L41.2461 11.3594C42.0156 11.9023 43.0078 12.6875 43.3906 13.0547L44.0469 12.1914C43.6797 11.9219 42.3047 11.0234 41.5039 10.5586L44.5117 10.5586L44.5117 9.56641L41.2461 9.56641L41.2461 6.60938L40.1445 6.60938L40.1445 9.56641L36.8477 9.56641L36.8477 10.5586L39.7773 10.5586C38.9922 11.6016 37.8086 12.5742 36.6875 13.0547C36.9102 13.2812 37.1992 13.6797 37.3281 13.9531C38.3047 13.4414 39.3438 12.5586 40.1445 11.6172L40.1445 13.5508ZM42.5742 15.8398C42.2227 16.6719 41.7109 17.375 41.0898 17.9531C40.5117 17.6641 39.8711 17.3594 39.2812 17.1055C39.5039 16.7344 39.7422 16.2891 39.9844 15.8398L42.5742 15.8398ZM43.3594 19.2812C43.0078 19.0234 42.5273 18.7344 42.0156 18.4492C42.8633 17.5508 43.5195 16.4336 43.9375 15.0547L43.2656 14.7852L43.0898 14.832L40.4805 14.832C40.6094 14.543 40.7031 14.2734 40.8164 14L39.7617 13.8086C39.6484 14.1445 39.5039 14.4805 39.3438 14.832L37.1836 14.832L37.1836 15.8398L38.8477 15.8398C38.5117 16.4648 38.1602 17.0547 37.8242 17.5352C38.6094 17.8242 39.4727 18.2227 40.2734 18.6406C39.2305 19.375 38.0156 19.8867 36.7188 20.1758C36.9297 20.3984 37.168 20.832 37.2812 21.0898C38.7344 20.7031 40.0977 20.0781 41.2305 19.168C41.7773 19.4727 42.2578 19.793 42.625 20.0625L43.3594 19.2812ZM48.9102 10.8008C48.6719 12.6406 48.2891 14.2383 47.7109 15.5859C47.1055 14.1602 46.6562 12.5273 46.3516 10.8008L48.9102 10.8008ZM51.1055 10.8008L51.1055 9.69531L46.5938 9.69531C46.8164 8.80078 47.0078 7.87109 47.1367 6.92969L46.0469 6.76953C45.6484 9.53516 44.9297 12.207 43.7109 13.8867C43.9688 14.0469 44.4141 14.4141 44.6094 14.6094C45.0078 14 45.375 13.2969 45.6953 12.5117C46.0469 14.0977 46.4961 15.5352 47.1055 16.7852C46.207 18.3047 44.9609 19.4727 43.2305 20.3203C43.4414 20.543 43.7773 21.0234 43.8867 21.2812C45.5195 20.3984 46.7344 19.2812 47.6797 17.8867C48.4648 19.2461 49.4727 20.3359 50.7031 21.0898C50.8789 20.7852 51.2148 20.3828 51.4883 20.1602C50.1602 19.457 49.1211 18.2734 48.3047 16.8164C49.1523 15.168 49.6797 13.1836 50.0469 10.8008L51.1055 10.8008ZM57.6484 14.6562L57.4883 13.5664L55.8242 14.0977L55.8242 10.9297L57.6328 10.9297L57.6328 9.82422L55.8242 9.82422L55.8242 6.625L54.7188 6.625L54.7188 9.82422L52.7344 9.82422L52.7344 10.9297L54.7188 10.9297L54.7188 14.4336C53.8867 14.6719 53.1367 14.8945 52.543 15.0703L52.832 16.207C53.4062 16.0312 54.0469 15.8398 54.7188 15.6172L54.7188 19.7266C54.7188 19.9688 54.6406 20.0312 54.4492 20.0312C54.2734 20.0312 53.6328 20.0312 52.9453 20.0156C53.1055 20.3516 53.2461 20.832 53.2969 21.1211C54.3047 21.1367 54.9102 21.0898 55.2812 20.8945C55.6797 20.7031 55.8242 20.3984 55.8242 19.7422L55.8242 15.2461L57.6484 14.6562ZM59.4727 13.1836C59.4883 12.8008 59.4883 12.4648 59.4883 12.1133L59.4883 11.4258L62.5742 11.4258L62.5742 13.1836L59.4727 13.1836ZM65.582 8.35156L65.582 10.3828L59.4883 10.3828L59.4883 8.35156L65.582 8.35156ZM65.6953 19.6016L60.7852 19.6016L60.7852 17.1836L65.6953 17.1836L65.6953 19.6016ZM67.2656 14.207L67.2656 13.1836L63.7109 13.1836L63.7109 11.4258L66.7188 11.4258L66.7188 7.3125L58.3359 7.3125L58.3359 12.1133C58.3359 14.6406 58.1914 18.1133 56.543 20.5586C56.8164 20.6719 57.3125 21.0078 57.5039 21.2305C58.8477 19.2656 59.2812 16.5742 59.4258 14.207L62.5742 14.207L62.5742 16.1758L59.7422 16.1758L59.7422 21.2461L60.7852 21.2461L60.7852 20.5938L65.6953 20.5938L65.6953 21.1836L66.7852 21.1836L66.7852 16.1758L63.7109 16.1758L63.7109 14.207L67.2656 14.207Z" fill="rgb(255,255,255)" fill-rule="nonzero" />
 	</g>
-			<path id="" d="M120.105 6.91016C119.832 7.55078 119.305 8.46484 118.902 9.03906L119.672 9.40625C120.121 8.87891 120.633 8.07812 121.098 7.35938L120.105 6.91016ZM116.359 9.07031C116.199 8.48047 115.77 7.63281 115.32 7.00781L114.457 7.35938C114.887 8.01562 115.305 8.89453 115.449 9.45703L116.359 9.07031ZM117.145 13.5508L118.246 13.5508L118.246 11.3594C119.016 11.9023 120.008 12.6875 120.391 13.0547L121.047 12.1914C120.68 11.9219 119.305 11.0234 118.504 10.5586L121.512 10.5586L121.512 9.56641L118.246 9.56641L118.246 6.60938L117.145 6.60938L117.145 9.56641L113.848 9.56641L113.848 10.5586L116.777 10.5586C115.992 11.6016 114.809 12.5742 113.688 13.0547C113.91 13.2812 114.199 13.6797 114.328 13.9531C115.305 13.4414 116.344 12.5586 117.145 11.6172L117.145 13.5508ZM119.574 15.8398C119.223 16.6719 118.711 17.375 118.09 17.9531C117.512 17.6641 116.871 17.3594 116.281 17.1055C116.504 16.7344 116.742 16.2891 116.984 15.8398L119.574 15.8398ZM120.359 19.2812C120.008 19.0234 119.527 18.7344 119.016 18.4492C119.863 17.5508 120.52 16.4336 120.938 15.0547L120.266 14.7852L120.09 14.832L117.48 14.832C117.609 14.543 117.703 14.2734 117.816 14L116.762 13.8086C116.648 14.1445 116.504 14.4805 116.344 14.832L114.184 14.832L114.184 15.8398L115.848 15.8398C115.512 16.4648 115.16 17.0547 114.824 17.5352C115.609 17.8242 116.473 18.2227 117.273 18.6406C116.23 19.375 115.016 19.8867 113.719 20.1758C113.93 20.3984 114.168 20.832 114.281 21.0898C115.734 20.7031 117.098 20.0781 118.23 19.168C118.777 19.4727 119.258 19.793 119.625 20.0625L120.359 19.2812ZM125.91 10.8008C125.672 12.6406 125.289 14.2383 124.711 15.5859C124.105 14.1602 123.656 12.5273 123.352 10.8008L125.91 10.8008ZM128.105 10.8008L128.105 9.69531L123.594 9.69531C123.816 8.80078 124.008 7.87109 124.137 6.92969L123.047 6.76953C122.648 9.53516 121.93 12.207 120.711 13.8867C120.969 14.0469 121.414 14.4141 121.609 14.6094C122.008 14 122.375 13.2969 122.695 12.5117C123.047 14.0977 123.496 15.5352 124.105 16.7852C123.207 18.3047 121.961 19.4727 120.23 20.3203C120.441 20.543 120.777 21.0234 120.887 21.2812C122.52 20.3984 123.734 19.2812 124.68 17.8867C125.465 19.2461 126.473 20.3359 127.703 21.0898C127.879 20.7852 128.215 20.3828 128.488 20.1602C127.16 19.457 126.121 18.2734 125.305 16.8164C126.152 15.168 126.68 13.1836 127.047 10.8008L128.105 10.8008ZM134.648 14.6562L134.488 13.5664L132.824 14.0977L132.824 10.9297L134.633 10.9297L134.633 9.82422L132.824 9.82422L132.824 6.625L131.719 6.625L131.719 9.82422L129.734 9.82422L129.734 10.9297L131.719 10.9297L131.719 14.4336C130.887 14.6719 130.137 14.8945 129.543 15.0703L129.832 16.207C130.406 16.0312 131.047 15.8398 131.719 15.6172L131.719 19.7266C131.719 19.9688 131.641 20.0312 131.449 20.0312C131.273 20.0312 130.633 20.0312 129.945 20.0156C130.105 20.3516 130.246 20.832 130.297 21.1211C131.305 21.1367 131.91 21.0898 132.281 20.8945C132.68 20.7031 132.824 20.3984 132.824 19.7422L132.824 15.2461L134.648 14.6562ZM136.473 13.1836C136.488 12.8008 136.488 12.4648 136.488 12.1133L136.488 11.4258L139.574 11.4258L139.574 13.1836L136.473 13.1836ZM142.582 8.35156L142.582 10.3828L136.488 10.3828L136.488 8.35156L142.582 8.35156ZM142.695 19.6016L137.785 19.6016L137.785 17.1836L142.695 17.1836L142.695 19.6016ZM144.266 14.207L144.266 13.1836L140.711 13.1836L140.711 11.4258L143.719 11.4258L143.719 7.3125L135.336 7.3125L135.336 12.1133C135.336 14.6406 135.191 18.1133 133.543 20.5586C133.816 20.6719 134.312 21.0078 134.504 21.2305C135.848 19.2656 136.281 16.5742 136.426 14.207L139.574 14.207L139.574 16.1758L136.742 16.1758L136.742 21.2461L137.785 21.2461L137.785 20.5938L142.695 20.5938L142.695 21.1836L143.785 21.1836L143.785 16.1758L140.711 16.1758L140.711 14.207L144.266 14.207Z" fill="rgb(255,255,255)" fill-rule="nonzero" />
+	<g id="容器 208" customFrame="url(#clipPath_18)">
+		<rect id="容器 208" width="80.000000" height="28.000000" x="80.000000" y="0.000000" fill="rgb(255,255,255)" />
+		<g id="icon_图表1 1" clip-path="url(#clipPath_19)" customFrame="url(#clipPath_19)">
+			<rect id="icon_图表1 1" width="16.000000" height="16.000000" x="92.000000" y="6.000000" />
+			<path id="矢量 461" d="M103.9 11.5078C103.49 11.5078 103.15 11.8478 103.15 12.2578L103.15 20.2578C103.15 20.6678 103.49 21.0078 103.9 21.0078C104.31 21.0078 104.65 20.6678 104.65 20.2578L104.65 12.2578C104.65 11.8478 104.31 11.5078 103.9 11.5078ZM100 8.50781C99.5904 8.50781 99.2504 8.84781 99.2504 9.25781L99.2504 20.2578C99.2504 20.6678 99.5904 21.0078 100 21.0078C100.41 21.0078 100.75 20.6678 100.75 20.2578L100.75 9.25781C100.75 8.84781 100.41 8.50781 100 8.50781L100 8.50781ZM95.9004 13.5078C95.4904 13.5078 95.1504 13.8478 95.1504 14.2578L95.1504 20.2578C95.1504 20.6678 95.4904 21.0078 95.9004 21.0078C96.3104 21.0078 96.6504 20.6678 96.6504 20.2578L96.6504 14.2578C96.6504 13.8478 96.3104 13.5078 95.9004 13.5078Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
 		</g>
+		<path id="" d="M120.449 17.5508C122.625 17.8086 125.375 18.4492 126.879 18.9922L127.426 18.1133C125.871 17.5859 123.137 16.9766 120.992 16.7344L120.449 17.5508ZM122.031 15.5352C123.297 15.8086 124.91 16.3516 125.793 16.7852L126.289 15.9844C125.391 15.5859 123.793 15.0703 122.512 14.8164L122.031 15.5352ZM122.16 10.9102L126.289 10.9102C125.711 11.5195 124.961 12.0781 124.098 12.5742C123.281 12.1133 122.594 11.5859 122.062 11.0078L122.16 10.9102ZM127.281 9.9375L127.09 9.98438L122.977 9.98438C123.215 9.67969 123.441 9.375 123.617 9.05469L122.641 8.73438C121.84 10.0312 120.48 11.2656 119.121 12.0625C119.359 12.2227 119.762 12.5938 119.938 12.7852C120.434 12.4648 120.91 12.0781 121.391 11.6484C121.887 12.1602 122.48 12.6406 123.121 13.0703C121.762 13.6953 120.238 14.1914 118.832 14.4492C119.023 14.6875 119.281 15.1523 119.391 15.4258C120.961 15.0703 122.625 14.4805 124.129 13.6641C125.457 14.3828 126.961 14.9297 128.465 15.2461C128.609 14.9766 128.91 14.5586 129.121 14.3516C127.727 14.0977 126.32 13.6641 125.105 13.0898C126.273 12.3203 127.281 11.4062 127.953 10.3516L127.281 9.9375ZM118.543 19.5039L118.543 8.39844L129.441 8.39844L129.441 19.5039L118.543 19.5039ZM117.391 7.3125L117.391 21.2305L118.543 21.2305L118.543 20.5586L129.441 20.5586L129.441 21.2305L130.609 21.2305L130.609 7.3125L117.391 7.3125ZM145.488 14.4648C144.801 15.1367 143.68 16.0156 142.719 16.6719C142.016 15.8398 141.457 14.8945 141.023 13.8398L146.879 13.8398L146.879 12.8164L140.559 12.8164L140.559 11.3906L145.664 11.3906L145.664 10.3984L140.559 10.3984L140.559 9.05469L146.383 9.05469L146.383 8.03125L140.559 8.03125L140.559 6.60938L139.375 6.60938L139.375 8.03125L133.727 8.03125L133.727 9.05469L139.375 9.05469L139.375 10.3984L134.543 10.3984L134.543 11.3906L139.375 11.3906L139.375 12.8164L133.105 12.8164L133.105 13.8398L138.383 13.8398C136.879 15.1836 134.625 16.4336 132.641 17.0547C132.895 17.2969 133.246 17.7266 133.406 18.0156C134.289 17.6797 135.246 17.2461 136.16 16.7188L136.16 19.0898C136.16 19.7109 135.809 20 135.551 20.1289C135.742 20.3984 135.984 20.9102 136.062 21.2148C136.434 20.9609 137.008 20.7695 141.441 19.3438C141.375 19.1055 141.281 18.6406 141.246 18.3203L137.375 19.4883L137.375 15.9531C138.32 15.3125 139.184 14.5938 139.871 13.8398C141.09 17.1836 143.328 19.5859 146.609 20.6875C146.785 20.3672 147.137 19.9023 147.391 19.6641C145.809 19.1992 144.48 18.4141 143.375 17.375C144.383 16.7539 145.551 15.9375 146.465 15.1523L145.488 14.4648Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
 	</g>
+	<rect id="双相选择" width="159.000000" height="27.000000" x="0.500000" y="0.500000" rx="13.500000" stroke="rgb(5,95,194)" stroke-width="1.000000" />
 </svg>

src/views/dataLibrary/bill/countryBill/index.vue

@@ -42,7 +42,7 @@
     <div class="chart-main-box" v-if="isShowChart">
       <div class="info-box">
         <div class="switch-box" @click="handleSwitchChartData">
-          <img src="@/views/dataLibrary/assets/icons/chart-active.svg" alt="">
+          <DataChartSwitchBox :is-show-data="!isShowChart" />
         </div>
         <div class="num-box text-title-3-bold">
           {{ `共 ${totalNum} 条数据` }}
@@ -52,8 +52,8 @@
         <div class="content-header">
           <ChartHeader :list="staticsDemensionList" @clickItem="handleClickDemensionItem">
             <template #chart-header-right>
-              <el-select v-model="selectedTime" placeholder="选择时间" style="width: 150px"
-                v-show="curDemension === '提案时间'" @change="handleChangeTime">
+              <el-select v-model="selectedTime" placeholder="选择时间" style="width: 150px" v-show="curDemension === '提案时间'"
+                @change="handleChangeTime">
                 <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
               </el-select>
 
@@ -77,7 +77,7 @@
     <div class="data-main-box" v-else>
       <div class="data-main-box-header">
         <div class="switch-box" @click="handleSwitchChartData">
-          <img src="@/views/dataLibrary/assets/icons/data-active.svg" alt="">
+          <DataChartSwitchBox :is-show-data="!isShowChart" />
         </div>
         <div class="num-box text-title-3-bold">
           {{ `共 ${totalNum} 条数据` }}
@@ -106,7 +106,7 @@
               </el-select>
             </div>
             <div class="header-right-item3 item3">
-              <el-select v-model="isSort" placeholder="发布时间" style="width: 166px" @change="handlePxChange">
+              <el-select v-model="isSort" placeholder="提案时间" style="width: 166px" @change="handlePxChange">
                 <template #prefix>
                   <div style="display: flex; align-items: center; height: 100%">
                     <img src="../../assets/icons/desc-icon.svg" style="width: 14px; height: 14px" />
@@ -162,6 +162,7 @@ import PieChart from '../../components/PieChart/index.vue'
 import BarChart from '../../components/BarChart/index.vue'
 import RaderChart from '../../components/RadarChart/idnex.vue'
 import SelectBox from '../../components/SelectBox/index.vue'
+import DataChartSwitchBox from '../../components/dataChartSwitchBox/index.vue'
 import { useRoute } from "vue-router";
 import router from '@/router'
 
@@ -286,9 +287,9 @@ const handleClickDemensionItem = (val) => {
   curDemension.value = val.name
   timer2.value = setTimeout(() => {
     activeChart.value = val.chartTypeList[0]
-    if (curDemension.value === '发布时间' && selectedTime.value === '按年度统计') {
+    if (curDemension.value === '提案时间' && selectedTime.value === '按年度统计') {
       curChartData.value = val.yearData
-    } else if (curDemension.value === '发布时间' && selectedTime.value === '按季度统计') {
+    } else if (curDemension.value === '提案时间' && selectedTime.value === '按季度统计') {
       curChartData.value = val.quatarData
     } else {
       curChartData.value = val.data
@@ -823,11 +824,11 @@ const tableData = ref([
 
 const releaseTimeList = ref([
   {
-    label: "按发布时间倒序",
+    label: "按提案时间倒序",
     value: true
   },
   {
-    label: "按发布时间升序",
+    label: "按提案时间升序",
     value: false
   }
 ]);
@@ -921,7 +922,17 @@ const fetchTableData = async () => {
 
     timer3.value = setTimeout(() => {
       activeChart.value = curDemensionItem.chartTypeList[0]
+      if (curDemension.value === '提案时间') {
+        if (selectedTime.value === '按月度统计') {
+          curChartData.value = curDemensionItem.data
+        } else if (selectedTime.value === '按季度统计') {
+          curChartData.value = curDemensionItem.quatarData
+        } else {
+          curChartData.value = curDemensionItem.yearData
+        }
+      } else {
         curChartData.value = curDemensionItem.data
+      }
     })
 
   } catch (error) {
@@ -1288,24 +1299,26 @@ onBeforeUnmount(() => {
   }
 
   .chart-main-box {
+    width: 1568px;
+    height: 809px;
+    margin: 0 auto;
+    background: rgba(255, 255, 255);
+    border: 1px solid var(--bg-black-5);
+    border-radius: 10px;
+
     .info-box {
       margin: 0 auto;
-      width: 1568px;
+      margin-top: 16px;
+      width: 1520px;
       height: 30px;
       display: flex;
       justify-content: space-between;
 
       .switch-box {
         width: 160px;
-        border-radius: 20px;
-        border: 1px solid var(--color-primary-100);
-        height: 30px;
+        height: 28px;
+        border: none;
         cursor: pointer;
-
-        img {
-          width: 100%;
-          height: 100%;
-        }
       }
 
       .num-box {
@@ -1316,14 +1329,13 @@ onBeforeUnmount(() => {
     .content-box {
       margin: 0 auto;
       margin-top: 16px;
-      width: 1568px;
-      height: 766px;
-      border-radius: 10px;
-      background: rgba(255, 255, 255);
-      border: 1px solid var(--bg-black-5);
+      width: 1520px;
+      height: 726px;
+      border: none;
+
 
       .content-header {
-        margin: 16px 24px;
+        margin: 16px 0;
         width: 1520px;
         height: 28px;
       }
@@ -1353,15 +1365,9 @@ onBeforeUnmount(() => {
 
       .switch-box {
         width: 160px;
-        border-radius: 20px;
-        border: 1px solid var(--color-primary-100);
-        height: 30px;
+        border: none;
+        height: 28px;
         cursor: pointer;
-
-        img {
-          width: 100%;
-          height: 100%;
-        }
       }
 
       .num-box {

src/views/dataLibrary/company/index.vue

@@ -34,10 +34,10 @@
         </div>
       </div>
     </div>
-    <div class="chart-main-box" v-if="isShowChart">
+    <div class="chart-main-box" v-if="isShowChart" v-loading="loading" element-loading-text="数据加载中，请稍候...">
       <div class="info-box">
         <div class="switch-box" @click="handleSwitchChartData">
-          <img src="@/views/dataLibrary/assets/icons/chart-active.svg" alt="">
+          <DataChartSwitchBox :is-show-data="!isShowChart" />
         </div>
         <div class="num-box text-title-3-bold">
           {{ `共 ${totalNum} 条数据` }}
@@ -69,10 +69,10 @@
         </div>
       </div>
     </div>
-    <div class="data-main-box" v-else>
+    <div class="data-main-box box-glow" v-else v-loading="loading" element-loading-text="数据加载中，请稍候...">
       <div class="data-main-box-header">
         <div class="switch-box" @click="handleSwitchChartData">
-          <img src="@/views/dataLibrary/assets/icons/data-active.svg" alt="">
+          <DataChartSwitchBox :is-show-data="!isShowChart" />
         </div>
         <div class="num-box text-title-3-bold">
           {{ `共 ${totalNum} 条数据` }}
@@ -114,36 +114,32 @@
             </div>
           </div>
         </div>
-        <div class="data-main-box-main-content" v-loading="loading" element-loading-text="数据加载中，请稍候...">
+        <div class="data-main-box-main-content">
           <el-table ref="tableRef" :data="tableData" row-key="id" @selection-change="handleSelectionChange"
             @select="handleSelect" @select-all="handleSelectAll" style="width: 100%" :row-style="{ height: '52px' }">
             <el-table-column type="selection" width="40" />
-            <el-table-column label="企业名称" width="600">
+            <el-table-column label="实体名称" width="600">
               <template #default="scope">
                 <span class="title-item text-compact-bold" @click="handleClickToDetail(scope.row)">{{
                   scope.row.originalTitle
                 }}</span>
               </template>
             </el-table-column>
-            <el-table-column label="成立时间" width="120" class-name="date-column">
-              <template #default="scope">{{ scope.row.date }}</template>
-            </el-table-column>
-            <el-table-column label="国家地区">
+            <el-table-column label="所属国家地区">
               <template #default="scope">
                 <span class="person-item text-compact" @click="handleOrgClick(scope.row)">{{ scope.row.organizationName
                 }}</span>
               </template>
             </el-table-column>
-            <el-table-column label="涉及领域" width="350" class-name="date-column">
+            <el-table-column label="涉及领域" width="490" class-name="date-column">
               <template #default="scope">
                 <div class="tag-box">
                   <AreaTag v-for="tag, index in scope.row.domains" :key="index" :tagName="tag" />
                 </div>
-
               </template>
             </el-table-column>
-            <el-table-column label="企业类型" width="100">
-              <template #default="scope">{{ scope.row.typeStr }}</template>
+            <el-table-column label="是否被制裁" width="120">
+              <template #default="scope">{{ scope.row.isSanctioned === 'N' ? '否' : '是' }}</template>
             </el-table-column>
           </el-table>
         </div>
@@ -167,6 +163,7 @@ import PieChart from '../components/PieChart/index.vue'
 import BarChart from '../components/BarChart/index.vue'
 import RaderChart from '../components/RadarChart/idnex.vue'
 import SelectBox from '../components/SelectBox/index.vue'
+import DataChartSwitchBox from '../components/dataChartSwitchBox/index.vue'
 import { useRoute } from "vue-router";
 import router from '@/router'
 
@@ -188,18 +185,20 @@ const handleSwitchChartData = () => {
       return item.name === curDemension.value
     })[0]
     // setTimeout(() => {
-    activeChart.value = curDemensionItem.chartTypeList[0]
+    activeChart.value = curDemensionItem.chartTypeList[0].name
     if (curDemension.value === '成立时间') {
       if (selectedTime.value === '按月度统计') {
-        curChartData.value = curDemensionItem.data
+        curChartData.value = curDemensionItem.chartTypeList[0].data
       } else if (selectedTime.value === '按季度统计') {
-        curChartData.value = curDemensionItem.quatarData
+        curChartData.value = curDemensionItem.chartTypeList[0].quatarData
       } else {
-        curChartData.value = curDemensionItem.yearData
+        curChartData.value = curDemensionItem.chartTypeList[0].yearData
       }
     } else {
-      curChartData.value = curDemensionItem.data
+      curChartData.value = curDemensionItem.chartTypeList[0].data
     }
+    console.log(curChartData.value);
+
     // })
   }
 }
@@ -212,8 +211,26 @@ const staticsDemensionList = ref([
   {
     name: '成立时间',
     active: true,
-    chartTypeList: ['折线图', '柱状图'],
-    chartTitle: '科技企业成立数量随时间变化趋势',
+    chartTypeList: [
+      {
+        name: '折线图',
+        data: {
+          dataX: [],
+          dataY: []
+        },
+        quatarData: {
+          dataX: [],
+          dataY: []
+        },
+        yearData: {
+          dataX: [],
+          dataY: []
+        }
+
+      },
+      {
+        name: '柱状图',
+
         data: {
           dataX: [],
           dataY: []
@@ -226,21 +243,70 @@ const staticsDemensionList = ref([
           dataX: [],
           dataY: []
         }
+
+      }],
+    chartTitle: '科技企业数量随时间变化趋势',
+
   },
   {
     name: '科技领域',
     active: false,
-    chartTypeList: ['饼状图'],
-    chartTitle: '科技企业领域分布',
+    chartTypeList: [
+      {
+        name: '饼状图',
         data: []
+      }
+    ],
+    chartTitle: '科技企业领域分布',
+
   },
   {
     name: '国家地区',
     active: false,
-    chartTypeList: ['饼状图'],
+    chartTypeList: [
+      {
+        name: '饼状图',
+        data: []
+      },
+      {
+        name: '柱状图',
+        data: {
+          dataX: [],
+          dataY: []
+        }
+      }
+    ],
     chartTitle: '科技企业国家地区分布',
+  },
+  {
+    name: '企业类型',
+    active: false,
+    chartTypeList: [
+      {
+        name: '饼状图',
+        data: []
+      },
+      {
+        name: '柱状图',
+        data: {
+          dataX: [],
+          dataY: []
+        }
+      }
+    ],
+    chartTitle: '科技企业企业类型分布',
+  },
+  {
+    name: '是否被制裁',
+    active: false,
+    chartTypeList: [
+      {
+        name: '饼状图',
         data: []
       }
+    ],
+    chartTitle: '科技企业制裁分布',
+  }
 ])
 
 // 当前维度下的图表列表
@@ -267,14 +333,16 @@ const handleClickDemensionItem = (val) => {
   val.active = true
   curDemension.value = val.name
   setTimeout(() => {
-    activeChart.value = val.chartTypeList[0]
+    activeChart.value = val.chartTypeList[0].name
     if (curDemension.value === '成立时间' && selectedTime.value === '按年度统计') {
-      curChartData.value = val.yearData
+      curChartData.value = val.chartTypeList[0].yearData
     } else if (curDemension.value === '成立时间' && selectedTime.value === '按季度统计') {
-      curChartData.value = val.quatarData
+      curChartData.value = val.chartTypeList[0].quatarData
     } else {
-      curChartData.value = val.data
+      curChartData.value = val.chartTypeList[0].data
     }
+    console.log('curChartData', curChartData.value);
+
   })
 }
 
@@ -301,17 +369,17 @@ const handleChangeTime = value => {
   if (value === '按月度统计') {
     setTimeout(() => {
       activeChart.value = curChart
-      curChartData.value = staticsDemensionList.value[0].data
+      curChartData.value = staticsDemensionList.value[0].chartTypeList[0].data
     })
   } else if (value === '按季度统计') {
     setTimeout(() => {
       activeChart.value = curChart
-      curChartData.value = staticsDemensionList.value[0].quatarData
+      curChartData.value = staticsDemensionList.value[0].chartTypeList[0].quatarData
     })
   } else {
     setTimeout(() => {
       activeChart.value = curChart
-      curChartData.value = staticsDemensionList.value[0].yearData
+      curChartData.value = staticsDemensionList.value[0].chartTypeList[0].yearData
     })
   }
 }
@@ -388,63 +456,22 @@ const handleCloseCurTag = (tag, index) => {
       break
 
   }
-  // alert(tag.name)
-  // activeTagList.value.splice(index, 1)
 }
 
 const activeChart = ref('')  // 当前激活的图表
 // 切换当前图表
 const handleSwitchActiveChart = val => {
   activeChart.value = val.name
-}
-// 雷达图数据
-const radarChartData = ref({
-  title: [
-    {
-      name: '航空航天',
-      max: 10
-    },
-    {
-      name: '先进制造',
-      max: 10
-    },
-    {
-      name: '量子科技',
-      max: 10
-    },
-    {
-      name: '人工智能',
-      max: 10
-    },
-    {
-      name: '新材料',
-      max: 10
-    },
-    {
-      name: '集成电路',
-      max: 10
-    },
-  ],
-  data: [
-    {
-      name: "337调查",
-      value: [10, 5, 2, 8, 5, 7
-      ]
-    },
-    {
-      name: "232调查",
-      value: [2, 5, 3, 8, 10, 2]
-    },
-    {
-      name: "301调查",
-      value: [5, 8, 2, 9, 1, 5]
+  const curChartItem = curChartTypeList.value.filter(item => item.name === val.name)[0]
+  if (curDemension.value === '成立时间' && selectedTime.value === '按年度统计') {
+    curChartData.value = curChartItem.yearData
+  } else if (curDemension.value === '成立时间' && selectedTime.value === '按季度统计') {
+    curChartData.value = curChartItem.quatarData
+  } else {
+    curChartData.value = curChartItem.data
   }
-  ]
 }
 
-)
-
-
 // 数据- 是否全选
 const isSelectedAll = ref(false)
 // 批量操作-当前操作
@@ -624,14 +651,14 @@ const handleGetCompanyType = async () => {
   try {
     const res = await getBusinessType()
     console.log('企业类型', res);
-    if(res && res.length) {
+    if (res && res.length) {
       let arr = res.map(item => {
         return {
           name: item,
           id: item
         }
       })
-      companyTypeList.value = [...arr,...companyTypeList.value]
+      companyTypeList.value = [...arr, ...companyTypeList.value]
     }
 
   } catch (error) {
@@ -720,26 +747,56 @@ const fetchTableData = async () => {
     if (res.code === 200 && res.data) {
       tableData.value = res.data.records
       totalNum.value = res.data.total
-      staticsDemensionList.value[0].data = {
+      staticsDemensionList.value[0].chartTypeList[0].data = {
+        dataX: Object.keys(res.data.aggregationsDate),
+        dataY: Object.values(res.data.aggregationsDate).map(value => Number(value))
+      }
+      staticsDemensionList.value[0].chartTypeList[0].quatarData = {
+        dataX: Object.keys(res.data.aggregationsQuarter),
+        dataY: Object.values(res.data.aggregationsQuarter).map(value => Number(value))
+      }
+      staticsDemensionList.value[0].chartTypeList[0].yearData = {
+        dataX: Object.keys(res.data.aggregationsYear),
+        dataY: Object.values(res.data.aggregationsYear).map(value => Number(value))
+      }
+      staticsDemensionList.value[0].chartTypeList[1].data = {
         dataX: Object.keys(res.data.aggregationsDate),
         dataY: Object.values(res.data.aggregationsDate).map(value => Number(value))
       }
-      staticsDemensionList.value[0].quatarData = {
+      staticsDemensionList.value[0].chartTypeList[1].quatarData = {
         dataX: Object.keys(res.data.aggregationsQuarter),
         dataY: Object.values(res.data.aggregationsQuarter).map(value => Number(value))
       }
-      staticsDemensionList.value[0].yearData = {
+      staticsDemensionList.value[0].chartTypeList[1].yearData = {
         dataX: Object.keys(res.data.aggregationsYear),
         dataY: Object.values(res.data.aggregationsYear).map(value => Number(value))
       }
-      staticsDemensionList.value[1].data = Object.entries(res.data.aggregationsDomain).map(([key, value]) => ({
+      staticsDemensionList.value[1].chartTypeList[0].data = Object.entries(res.data.aggregationsDomain).map(([key, value]) => ({
+        name: key,
+        value: Number(value)
+      }))
+      staticsDemensionList.value[2].chartTypeList[0].data = Object.entries(res.data.aggregationCountryId).map(([key, value]) => ({
         name: key,
         value: Number(value)
       }))
-      staticsDemensionList.value[2].data = Object.entries(res.data.aggregationCountryId).map(([key, value]) => ({
+      staticsDemensionList.value[2].chartTypeList[1].data = {
+        dataX: Object.keys(res.data.aggregationCountryId),
+        dataY: Object.values(res.data.aggregationCountryId).map(value => Number(value))
+      }
+
+      staticsDemensionList.value[3].chartTypeList[0].data = Object.entries(res.data.aggregationBusinessType).map(([key, value]) => ({
         name: key,
         value: Number(value)
       }))
+      staticsDemensionList.value[3].chartTypeList[1].data = {
+        dataX: Object.keys(res.data.aggregationBusinessType),
+        dataY: Object.values(res.data.aggregationBusinessType).map(value => Number(value))
+      }
+
+      staticsDemensionList.value[4].chartTypeList[0].data = Object.entries(res.data.aggregationIsSanctioned).map(([key, value]) => ({
+        name: key === 'Y' ? '是' : '否',
+        value: Number(value)
+      }))
 
     }
 
@@ -751,7 +808,17 @@ const fetchTableData = async () => {
 
     setTimeout(() => {
       activeChart.value = curDemensionItem.chartTypeList[0]
-      curChartData.value = curDemensionItem.data
+      if (curDemension.value === '成立时间') {
+        if (selectedTime.value === '按月度统计') {
+          curChartData.value = curDemensionItem.chartTypeList[0].data
+        } else if (selectedTime.value === '按季度统计') {
+          curChartData.value = curDemensionItem.chartTypeList[0].quatarData
+        } else {
+          curChartData.value = curDemensionItem.chartTypeList[0].yearData
+        }
+      } else {
+        curChartData.value = curDemensionItem.chartTypeList[0].data
+      }
     })
 
   } catch (error) {
@@ -1089,24 +1156,26 @@ onMounted(async () => {
   }
 
   .chart-main-box {
+    width: 1568px;
+    height: 809px;
+    margin: 0 auto;
+    background: rgba(255, 255, 255);
+    border: 1px solid var(--bg-black-5);
+    border-radius: 10px;
+
     .info-box {
       margin: 0 auto;
-      width: 1568px;
+      margin-top: 16px;
+      width: 1520px;
       height: 30px;
       display: flex;
       justify-content: space-between;
 
       .switch-box {
         width: 160px;
-        border-radius: 20px;
-        border: 1px solid var(--color-primary-100);
-        height: 30px;
+        height: 28px;
+        border: none;
         cursor: pointer;
-
-        img {
-          width: 100%;
-          height: 100%;
-        }
       }
 
       .num-box {
@@ -1117,14 +1186,13 @@ onMounted(async () => {
     .content-box {
       margin: 0 auto;
       margin-top: 16px;
-      width: 1568px;
-      height: 766px;
-      border-radius: 10px;
-      background: rgba(255, 255, 255);
-      border: 1px solid var(--bg-black-5);
+      width: 1520px;
+      height: 726px;
+      border: none;
+
 
       .content-header {
-        margin: 16px 24px;
+        margin: 16px 0;
         width: 1520px;
         height: 28px;
       }
@@ -1154,15 +1222,9 @@ onMounted(async () => {
 
       .switch-box {
         width: 160px;
-        border-radius: 20px;
-        border: 1px solid var(--color-primary-100);
-        height: 30px;
+        height: 28px;
+        border: none;
         cursor: pointer;
-
-        img {
-          width: 100%;
-          height: 100%;
-        }
       }
 
       .num-box {

src/views/dataLibrary/components/ChartContainer/index.vue

@@ -88,7 +88,7 @@ const chartItemList = computed(() => {
   let arr = []
   props.chartTypeList.forEach(item => {
     defaultChartTypeList.forEach(val => {
-      if (val.name === item) {
+      if (val.name === item || val.name === item.name) {
         arr.push(val)
       }
     })

src/views/dataLibrary/components/dataChartSwitchBox/chart-active.svg

+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="icon_图表1 1" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="矢量 461" d="M11.9004 5.50781C11.4904 5.50781 11.1504 5.84781 11.1504 6.25781L11.1504 14.2578C11.1504 14.6678 11.4904 15.0078 11.9004 15.0078C12.3104 15.0078 12.6504 14.6678 12.6504 14.2578L12.6504 6.25781C12.6504 5.84781 12.3104 5.50781 11.9004 5.50781ZM8.00039 2.50781C7.59039 2.50781 7.25039 2.84781 7.25039 3.25781L7.25039 14.2578C7.25039 14.6678 7.59039 15.0078 8.00039 15.0078C8.41039 15.0078 8.75039 14.6678 8.75039 14.2578L8.75039 3.25781C8.75039 2.84781 8.41039 2.50781 8.00039 2.50781L8.00039 2.50781ZM3.90039 7.50781C3.49039 7.50781 3.15039 7.84781 3.15039 8.25781L3.15039 14.2578C3.15039 14.6678 3.49039 15.0078 3.90039 15.0078C4.31039 15.0078 4.65039 14.6678 4.65039 14.2578L4.65039 8.25781C4.65039 7.84781 4.31039 7.50781 3.90039 7.50781Z" fill="rgb(255,255,255)" fill-rule="nonzero" />
+</svg>

src/views/dataLibrary/components/dataChartSwitchBox/chart.svg

+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="icon_图表1 1" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="矢量 461" d="M11.9004 5.50781C11.4904 5.50781 11.1504 5.84781 11.1504 6.25781L11.1504 14.2578C11.1504 14.6678 11.4904 15.0078 11.9004 15.0078C12.3104 15.0078 12.6504 14.6678 12.6504 14.2578L12.6504 6.25781C12.6504 5.84781 12.3104 5.50781 11.9004 5.50781ZM8.00039 2.50781C7.59039 2.50781 7.25039 2.84781 7.25039 3.25781L7.25039 14.2578C7.25039 14.6678 7.59039 15.0078 8.00039 15.0078C8.41039 15.0078 8.75039 14.6678 8.75039 14.2578L8.75039 3.25781C8.75039 2.84781 8.41039 2.50781 8.00039 2.50781L8.00039 2.50781ZM3.90039 7.50781C3.49039 7.50781 3.15039 7.84781 3.15039 8.25781L3.15039 14.2578C3.15039 14.6678 3.49039 15.0078 3.90039 15.0078C4.31039 15.0078 4.65039 14.6678 4.65039 14.2578L4.65039 8.25781C4.65039 7.84781 4.31039 7.50781 3.90039 7.50781Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
+</svg>

src/views/dataLibrary/components/dataChartSwitchBox/data-acitve.svg

+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="表格(1) 1" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="矢量 462" d="M13.1 3L2.9 3C2.84091 3 2.78238 3.006 2.72442 3.01801C2.66646 3.03002 2.61018 3.04781 2.55559 3.07136C2.50099 3.09492 2.44912 3.1238 2.39999 3.158C2.35085 3.1922 2.30539 3.23106 2.2636 3.27459C2.22182 3.31811 2.18451 3.36547 2.15168 3.41665C2.11885 3.46784 2.09112 3.52186 2.06851 3.57873C2.04589 3.63561 2.02882 3.69423 2.01729 3.7546C2.00576 3.81498 2 3.87594 2 3.9375L2 12.0625C2 12.1241 2.00576 12.185 2.01729 12.2454C2.02882 12.3058 2.04589 12.3644 2.06851 12.4213C2.09112 12.4781 2.11885 12.5322 2.15168 12.5833C2.18451 12.6345 2.22182 12.6819 2.2636 12.7254C2.30539 12.7689 2.35085 12.8078 2.39999 12.842C2.44912 12.8762 2.50099 12.9051 2.55558 12.9286C2.61018 12.9522 2.66646 12.97 2.72442 12.982C2.78238 12.994 2.84091 13 2.9 13L13.1 13C13.1591 13 13.2176 12.994 13.2756 12.982C13.3335 12.97 13.3898 12.9522 13.4444 12.9286C13.499 12.9051 13.5509 12.8762 13.6 12.842C13.6491 12.8078 13.6946 12.7689 13.7364 12.7254C13.7782 12.6819 13.8155 12.6345 13.8483 12.5833C13.8812 12.5322 13.9089 12.4781 13.9315 12.4213C13.9541 12.3644 13.9712 12.3058 13.9827 12.2454C13.9942 12.185 14 12.1241 14 12.0625L14 3.9375C14 3.87594 13.9942 3.81498 13.9827 3.7546C13.9712 3.69423 13.9541 3.63561 13.9315 3.57873C13.9089 3.52186 13.8812 3.46784 13.8483 3.41665C13.8155 3.36547 13.7782 3.31811 13.7364 3.27459C13.6946 3.23106 13.6491 3.1922 13.6 3.158C13.5509 3.1238 13.499 3.09492 13.4444 3.07136C13.3898 3.04781 13.3335 3.03002 13.2756 3.01801C13.2176 3.006 13.1591 3 13.1 3ZM2.9 5.03125L5.75 5.03125L5.75 6.75L2.9 6.75L2.9 5.03125ZM2.9 7.6875L5.75 7.6875L5.75 9.40625L2.9 9.40625L2.9 7.6875ZM9.35 10.3438L9.35 12.0625L6.65 12.0625L6.65 10.3438L9.35 10.3438ZM6.65 9.40625L6.65 7.6875L9.35 7.6875L9.35 9.40625L6.65 9.40625ZM9.35 6.75L6.65 6.75L6.65 5.03125L9.35 5.03125L9.35 6.75ZM10.25 7.6875L13.1 7.6875L13.1 9.40625L10.25 9.40625L10.25 7.6875ZM10.25 6.75L10.25 5.03125L13.1 5.03125L13.1 6.75L10.25 6.75ZM2.9 10.3438L5.75 10.3438L5.75 12.0625L2.9 12.0625L2.9 10.3438ZM10.25 12.0625L10.25 10.3438L13.1 10.3438L13.1 12.0625L10.25 12.0625Z" fill="rgb(255,255,255)" fill-rule="nonzero" />
+</svg>

src/views/dataLibrary/components/dataChartSwitchBox/data.svg

+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="表格(1) 1" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="矢量 462" d="M13.1 3L2.9 3C2.84091 3 2.78238 3.006 2.72442 3.01801C2.66646 3.03002 2.61018 3.04781 2.55559 3.07136C2.50099 3.09492 2.44912 3.1238 2.39999 3.158C2.35085 3.1922 2.30539 3.23106 2.2636 3.27459C2.22182 3.31811 2.18451 3.36547 2.15168 3.41665C2.11885 3.46784 2.09112 3.52186 2.06851 3.57873C2.04589 3.63561 2.02882 3.69423 2.01729 3.7546C2.00576 3.81498 2 3.87594 2 3.9375L2 12.0625C2 12.1241 2.00576 12.185 2.01729 12.2454C2.02882 12.3058 2.04589 12.3644 2.06851 12.4213C2.09112 12.4781 2.11885 12.5322 2.15168 12.5833C2.18451 12.6345 2.22182 12.6819 2.2636 12.7254C2.30539 12.7689 2.35085 12.8078 2.39999 12.842C2.44912 12.8762 2.50099 12.9051 2.55558 12.9286C2.61018 12.9522 2.66646 12.97 2.72442 12.982C2.78238 12.994 2.84091 13 2.9 13L13.1 13C13.1591 13 13.2176 12.994 13.2756 12.982C13.3335 12.97 13.3898 12.9522 13.4444 12.9286C13.499 12.9051 13.5509 12.8762 13.6 12.842C13.6491 12.8078 13.6946 12.7689 13.7364 12.7254C13.7782 12.6819 13.8155 12.6345 13.8483 12.5833C13.8812 12.5322 13.9089 12.4781 13.9315 12.4213C13.9541 12.3644 13.9712 12.3058 13.9827 12.2454C13.9942 12.185 14 12.1241 14 12.0625L14 3.9375C14 3.87594 13.9942 3.81498 13.9827 3.7546C13.9712 3.69423 13.9541 3.63561 13.9315 3.57873C13.9089 3.52186 13.8812 3.46784 13.8483 3.41665C13.8155 3.36547 13.7782 3.31811 13.7364 3.27459C13.6946 3.23106 13.6491 3.1922 13.6 3.158C13.5509 3.1238 13.499 3.09492 13.4444 3.07136C13.3898 3.04781 13.3335 3.03002 13.2756 3.01801C13.2176 3.006 13.1591 3 13.1 3ZM2.9 5.03125L5.75 5.03125L5.75 6.75L2.9 6.75L2.9 5.03125ZM2.9 7.6875L5.75 7.6875L5.75 9.40625L2.9 9.40625L2.9 7.6875ZM9.35 10.3438L9.35 12.0625L6.65 12.0625L6.65 10.3438L9.35 10.3438ZM6.65 9.40625L6.65 7.6875L9.35 7.6875L9.35 9.40625L6.65 9.40625ZM9.35 6.75L6.65 6.75L6.65 5.03125L9.35 5.03125L9.35 6.75ZM10.25 7.6875L13.1 7.6875L13.1 9.40625L10.25 9.40625L10.25 7.6875ZM10.25 6.75L10.25 5.03125L13.1 5.03125L13.1 6.75L10.25 6.75ZM2.9 10.3438L5.75 10.3438L5.75 12.0625L2.9 12.0625L2.9 10.3438ZM10.25 12.0625L10.25 10.3438L13.1 10.3438L13.1 12.0625L10.25 12.0625Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
+</svg>

src/views/dataLibrary/components/dataChartSwitchBox/index.vue

+<template>
+  <div class="data-chart-switch-box-wrapper">
+    <div class="item" :class="{ 'item-acitve': isShowData }">
+      <div class="icon">
+        <img src="./data-acitve.svg" alt="" v-if="isShowData">
+        <img src="./data.svg" alt="" v-else>
+      </div>
+      <div class="text text-tip-1" :class="{ 'text-active': isShowData }">{{ "数据" }}</div>
+    </div>
+    <div class="item" :class="{ 'item-acitve': !isShowData }">
+      <div class="icon">
+        <img src="./chart.svg" alt="" v-if="isShowData">
+        <img src="./chart-active.svg" alt="" v-else>
+      </div>
+      <div class="text text-tip-1" :class="{ 'text-active': !isShowData }">{{ "图表" }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+const props = defineProps({
+  isShowData: {
+    type: Boolean,
+    default: true
+  }
+})
+
+
+</script>
+
+<style lang="scss" scoped>
+.data-chart-switch-box-wrapper {
+  width: 160px;
+  height: 28px;
+  border: 1px solid var(--color-primary-100);
+  display: flex;
+  border-radius: 20px;
+  overflow: hidden;
+
+  .item-acitve {
+    background: var(--color-primary-100);
+  }
+
+  .item {
+    width: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+
+
+    .icon {
+      width: 16px;
+      height: 16px;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .text {
+      color: var(--color-primary-100);
+    }
+
+    .text-active {
+      color: var(--bg-white-100) !important;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/dataLibrary/decree/index.vue

@@ -47,7 +47,7 @@
     <div class="chart-main-box" v-if="isShowChart">
       <div class="info-box">
         <div class="switch-box" @click="handleSwitchChartData">
-          <img src="@/views/dataLibrary/assets/icons/chart-active.svg" alt="">
+          <DataChartSwitchBox :is-show-data="!isShowChart" />
         </div>
         <div class="num-box text-title-3-bold">
           {{ `共 ${totalNum} 条数据` }}
@@ -82,7 +82,7 @@
     <div class="data-main-box" v-else>
       <div class="data-main-box-header">
         <div class="switch-box" @click="handleSwitchChartData">
-          <img src="@/views/dataLibrary/assets/icons/data-active.svg" alt="">
+          <DataChartSwitchBox :is-show-data="!isShowChart" />
         </div>
         <div class="num-box text-title-3-bold">
           {{ `共 ${totalNum} 条数据` }}
@@ -177,6 +177,7 @@ import PieChart from '../components/PieChart/index.vue'
 import BarChart from '../components/BarChart/index.vue'
 import RaderChart from '../components/RadarChart/idnex.vue'
 import SelectBox from '../components/SelectBox/index.vue'
+import DataChartSwitchBox from '../components/dataChartSwitchBox/index.vue'
 import { useRoute } from "vue-router";
 import router from '@/router'
 
@@ -773,7 +774,17 @@ const fetchTableData = async () => {
 
     setTimeout(() => {
       activeChart.value = curDemensionItem.chartTypeList[0]
+      if (curDemension.value === '发布时间') {
+        if (selectedTime.value === '按月度统计') {
           curChartData.value = curDemensionItem.data
+        } else if (selectedTime.value === '按季度统计') {
+          curChartData.value = curDemensionItem.quatarData
+        } else {
+          curChartData.value = curDemensionItem.yearData
+        }
+      } else {
+        curChartData.value = curDemensionItem.data
+      }
     })
 
   } catch (error) {
@@ -1117,18 +1128,25 @@ onMounted(async () => {
   }
 
   .chart-main-box {
+    width: 1568px;
+    height: 809px;
+    margin: 0 auto;
+    background: rgba(255, 255, 255);
+    border: 1px solid var(--bg-black-5);
+    border-radius: 10px;
+
     .info-box {
       margin: 0 auto;
-      width: 1568px;
+      margin-top: 16px;
+      width: 1520px;
       height: 30px;
       display: flex;
       justify-content: space-between;
 
       .switch-box {
         width: 160px;
-        border-radius: 20px;
-        border: 1px solid var(--color-primary-100);
-        height: 30px;
+        height: 28px;
+        border: none;
         cursor: pointer;
 
         img {
@@ -1145,14 +1163,13 @@ onMounted(async () => {
     .content-box {
       margin: 0 auto;
       margin-top: 16px;
-      width: 1568px;
-      height: 766px;
-      border-radius: 10px;
-      background: rgba(255, 255, 255);
-      border: 1px solid var(--bg-black-5);
+      width: 1520px;
+      height: 726px;
+      border: none;
+
 
       .content-header {
-        margin: 16px 24px;
+        margin: 16px 0;
         width: 1520px;
         height: 28px;
       }
@@ -1182,9 +1199,8 @@ onMounted(async () => {
 
       .switch-box {
         width: 160px;
-        border-radius: 20px;
-        border: 1px solid var(--color-primary-100);
-        height: 30px;
+        height: 28px;
+        border: none;
         cursor: pointer;
 
         img {

src/views/dataLibrary/exportControl/commerceControlList/index.vue

@@ -29,7 +29,7 @@
     <div class="chart-main-box" v-if="isShowChart">
       <div class="info-box">
         <div class="switch-box" @click="handleSwitchChartData">
-          <img src="@/views/dataLibrary/assets/icons/chart-active.svg" alt="">
+          <DataChartSwitchBox :is-show-data="!isShowChart" />
         </div>
         <div class="num-box text-title-3-bold">
           {{ `共 ${totalNum} 条数据` }}
@@ -64,7 +64,7 @@
     <div class="data-main-box" v-else>
       <div class="data-main-box-header">
         <div class="switch-box" @click="handleSwitchChartData">
-          <img src="@/views/dataLibrary/assets/icons/data-active.svg" alt="">
+          <DataChartSwitchBox :is-show-data="!isShowChart" />
         </div>
         <div class="num-box text-title-3-bold">
           {{ `共 ${totalNum} 条数据` }}
@@ -153,6 +153,7 @@ import BarChart from '../../components/BarChart/index.vue'
 import RaderChart from '../../components/RadarChart/idnex.vue'
 import SelectBox from '../../components/SelectBox/index.vue'
 import InputBox from '../../components/InputBox/index.vue'
+import DataChartSwitchBox from '../../components/dataChartSwitchBox/index.vue'
 import { useRoute } from "vue-router";
 import router from '@/router'
 
@@ -682,7 +683,17 @@ const fetchTableData = async () => {
 
     setTimeout(() => {
       activeChart.value = curDemensionItem.chartTypeList[0]
+      if (curDemension.value === '制裁时间') {
+        if (selectedTime.value === '按月度统计') {
           curChartData.value = curDemensionItem.data
+        } else if (selectedTime.value === '按季度统计') {
+          curChartData.value = curDemensionItem.quatarData
+        } else {
+          curChartData.value = curDemensionItem.yearData
+        }
+      } else {
+        curChartData.value = curDemensionItem.data
+      }
     })
     loading.value = false
   } catch (error) {
@@ -1015,18 +1026,25 @@ onMounted(async () => {
   }
 
   .chart-main-box {
+    width: 1568px;
+    height: 809px;
+    margin: 0 auto;
+    background: rgba(255, 255, 255);
+    border: 1px solid var(--bg-black-5);
+    border-radius: 10px;
+
     .info-box {
       margin: 0 auto;
-      width: 1568px;
+      margin-top: 16px;
+      width: 1520px;
       height: 30px;
       display: flex;
       justify-content: space-between;
 
       .switch-box {
         width: 160px;
-        border-radius: 20px;
-        border: 1px solid var(--color-primary-100);
-        height: 30px;
+        height: 28px;
+        border: none;
         cursor: pointer;
 
         img {
@@ -1043,14 +1061,13 @@ onMounted(async () => {
     .content-box {
       margin: 0 auto;
       margin-top: 16px;
-      width: 1568px;
-      height: 766px;
-      border-radius: 10px;
-      background: rgba(255, 255, 255);
-      border: 1px solid var(--bg-black-5);
+      width: 1520px;
+      height: 726px;
+      border: none;
+
 
       .content-header {
-        margin: 16px 24px;
+        margin: 16px 0;
         width: 1520px;
         height: 28px;
       }
@@ -1080,9 +1097,8 @@ onMounted(async () => {
 
       .switch-box {
         width: 160px;
-        border-radius: 20px;
-        border: 1px solid var(--color-primary-100);
-        height: 30px;
+        height: 28px;
+        border: none;
         cursor: pointer;
 
         img {

src/views/dataLibrary/exportControl/commerceControlListEvent/index.vue

@@ -24,15 +24,15 @@
             @close="handleCloseCurTag(tag, index)" />
         </div>
         <div class="header-footer-right">
-          <HeaderBtnBox :isShowAll="isFolderAll" :isShowAllBtn="false" @show-all="handleSwitchFolderAll" @clear="handleClear"
-            @confirm="handleConfirm" />
+          <HeaderBtnBox :isShowAll="isFolderAll" :isShowAllBtn="false" @show-all="handleSwitchFolderAll"
+            @clear="handleClear" @confirm="handleConfirm" />
         </div>
       </div>
     </div>
     <div class="chart-main-box" v-if="isShowChart">
       <div class="info-box">
         <div class="switch-box" @click="handleSwitchChartData">
-          <img src="@/views/dataLibrary/assets/icons/chart-active.svg" alt="">
+          <DataChartSwitchBox :is-show-data="!isShowChart" />
         </div>
         <div class="num-box text-title-3-bold">
           {{ `共 ${totalNum} 条数据` }}
@@ -66,7 +66,7 @@
     <div class="data-main-box" v-else>
       <div class="data-main-box-header">
         <div class="switch-box" @click="handleSwitchChartData">
-          <img src="@/views/dataLibrary/assets/icons/data-active.svg" alt="">
+          <DataChartSwitchBox :is-show-data="!isShowChart" />
         </div>
         <div class="num-box text-title-3-bold">
           {{ `共 ${totalNum} 条数据` }}
@@ -144,6 +144,7 @@ import PieChart from '../../components/PieChart/index.vue'
 import BarChart from '../../components/BarChart/index.vue'
 import RaderChart from '../../components/RadarChart/idnex.vue'
 import SelectBox from '../../components/SelectBox/index.vue'
+import DataChartSwitchBox from '../../components/dataChartSwitchBox/index.vue'
 import { useRoute } from "vue-router";
 import router from '@/router'
 
@@ -611,7 +612,17 @@ const fetchTableData = async () => {
 
     setTimeout(() => {
       activeChart.value = curDemensionItem.chartTypeList[0]
+      if (curDemension.value === '制裁时间') {
+        if (selectedTime.value === '按月度统计') {
           curChartData.value = curDemensionItem.data
+        } else if (selectedTime.value === '按季度统计') {
+          curChartData.value = curDemensionItem.quatarData
+        } else {
+          curChartData.value = curDemensionItem.yearData
+        }
+      } else {
+        curChartData.value = curDemensionItem.data
+      }
     })
     loading.value = false
   } catch (error) {
@@ -940,18 +951,25 @@ onMounted(async () => {
   }
 
   .chart-main-box {
+    width: 1568px;
+    height: 809px;
+    margin: 0 auto;
+    background: rgba(255, 255, 255);
+    border: 1px solid var(--bg-black-5);
+    border-radius: 10px;
+
     .info-box {
       margin: 0 auto;
-      width: 1568px;
+      margin-top: 16px;
+      width: 1520px;
       height: 30px;
       display: flex;
       justify-content: space-between;
 
       .switch-box {
         width: 160px;
-        border-radius: 20px;
-        border: 1px solid var(--color-primary-100);
-        height: 30px;
+        height: 28px;
+        border: none;
         cursor: pointer;
 
         img {
@@ -968,14 +986,13 @@ onMounted(async () => {
     .content-box {
       margin: 0 auto;
       margin-top: 16px;
-      width: 1568px;
-      height: 766px;
-      border-radius: 10px;
-      background: rgba(255, 255, 255);
-      border: 1px solid var(--bg-black-5);
+      width: 1520px;
+      height: 726px;
+      border: none;
+
 
       .content-header {
-        margin: 16px 24px;
+        margin: 16px 0;
         width: 1520px;
         height: 28px;
       }
@@ -1005,9 +1022,8 @@ onMounted(async () => {
 
       .switch-box {
         width: 160px;
-        border-radius: 20px;
-        border: 1px solid var(--color-primary-100);
-        height: 30px;
+        height: 28px;
+        border: none;
         cursor: pointer;
 
         img {

src/views/dataLibrary/exportControl/entityList/index.vue

@@ -49,7 +49,7 @@
     <div class="chart-main-box" v-if="isShowChart">
       <div class="info-box">
         <div class="switch-box" @click="handleSwitchChartData">
-          <img src="@/views/dataLibrary/assets/icons/chart-active.svg" alt="">
+          <DataChartSwitchBox :is-show-data="!isShowChart" />
         </div>
         <div class="num-box text-title-3-bold">
           {{ `共 ${totalNum} 条数据` }}
@@ -84,7 +84,7 @@
     <div class="data-main-box" v-else>
       <div class="data-main-box-header">
         <div class="switch-box" @click="handleSwitchChartData">
-          <img src="@/views/dataLibrary/assets/icons/data-active.svg" alt="">
+          <DataChartSwitchBox :is-show-data="!isShowChart" />
         </div>
         <div class="num-box text-title-3-bold">
           {{ `共 ${totalNum} 条数据` }}
@@ -179,6 +179,8 @@ import PieChart from '../../components/PieChart/index.vue'
 import BarChart from '../../components/BarChart/index.vue'
 import RaderChart from '../../components/RadarChart/idnex.vue'
 import SelectBox from '../../components/SelectBox/index.vue'
+import DataChartSwitchBox from '../../components/dataChartSwitchBox/index.vue'
+
 import { useRoute } from "vue-router";
 import router from '@/router'
 
@@ -860,7 +862,17 @@ const fetchTableData = async () => {
 
     setTimeout(() => {
       activeChart.value = curDemensionItem.chartTypeList[0]
+      if (curDemension.value === '制裁时间') {
+        if (selectedTime.value === '按月度统计') {
+          curChartData.value = curDemensionItem.data
+        } else if (selectedTime.value === '按季度统计') {
+          curChartData.value = curDemensionItem.quatarData
+        } else {
+          curChartData.value = curDemensionItem.yearData
+        }
+      } else {
         curChartData.value = curDemensionItem.data
+      }
     })
     loading.value = false
   } catch (error) {
@@ -1206,24 +1218,26 @@ onMounted(async () => {
   }
 
   .chart-main-box {
+    width: 1568px;
+    height: 809px;
+    margin: 0 auto;
+    background: rgba(255, 255, 255);
+    border: 1px solid var(--bg-black-5);
+    border-radius: 10px;
+
     .info-box {
       margin: 0 auto;
-      width: 1568px;
+      margin-top: 16px;
+      width: 1520px;
       height: 30px;
       display: flex;
       justify-content: space-between;
 
       .switch-box {
         width: 160px;
-        border-radius: 20px;
-        border: 1px solid var(--color-primary-100);
-        height: 30px;
+        height: 28px;
+        border: none;
         cursor: pointer;
-
-        img {
-          width: 100%;
-          height: 100%;
-        }
       }
 
       .num-box {
@@ -1234,14 +1248,13 @@ onMounted(async () => {
     .content-box {
       margin: 0 auto;
       margin-top: 16px;
-      width: 1568px;
-      height: 766px;
-      border-radius: 10px;
-      background: rgba(255, 255, 255);
-      border: 1px solid var(--bg-black-5);
+      width: 1520px;
+      height: 726px;
+      border: none;
+
 
       .content-header {
-        margin: 16px 24px;
+        margin: 16px 0;
         width: 1520px;
         height: 28px;
       }
@@ -1271,15 +1284,9 @@ onMounted(async () => {
 
       .switch-box {
         width: 160px;
-        border-radius: 20px;
-        border: 1px solid var(--color-primary-100);
-        height: 30px;
+        height: 28px;
+        border: none;
         cursor: pointer;
-
-        img {
-          width: 100%;
-          height: 100%;
-        }
       }
 
       .num-box {

src/views/dataLibrary/exportControl/entityListEvent/index.vue

@@ -24,15 +24,15 @@
             @close="handleCloseCurTag(tag, index)" />
         </div>
         <div class="header-footer-right">
-          <HeaderBtnBox :isShowAll="isFolderAll" :isShowAllBtn="false" @show-all="handleSwitchFolderAll" @clear="handleClear"
-            @confirm="handleConfirm" />
+          <HeaderBtnBox :isShowAll="isFolderAll" :isShowAllBtn="false" @show-all="handleSwitchFolderAll"
+            @clear="handleClear" @confirm="handleConfirm" />
         </div>
       </div>
     </div>
     <div class="chart-main-box" v-if="isShowChart">
       <div class="info-box">
         <div class="switch-box" @click="handleSwitchChartData">
-          <img src="@/views/dataLibrary/assets/icons/chart-active.svg" alt="">
+          <DataChartSwitchBox :is-show-data="!isShowChart" />
         </div>
         <div class="num-box text-title-3-bold">
           {{ `共 ${totalNum} 条数据` }}
@@ -66,7 +66,7 @@
     <div class="data-main-box" v-else>
       <div class="data-main-box-header">
         <div class="switch-box" @click="handleSwitchChartData">
-          <img src="@/views/dataLibrary/assets/icons/data-active.svg" alt="">
+          <DataChartSwitchBox :is-show-data="!isShowChart" />
         </div>
         <div class="num-box text-title-3-bold">
           {{ `共 ${totalNum} 条数据` }}
@@ -144,6 +144,8 @@ import PieChart from '../../components/PieChart/index.vue'
 import BarChart from '../../components/BarChart/index.vue'
 import RaderChart from '../../components/RadarChart/idnex.vue'
 import SelectBox from '../../components/SelectBox/index.vue'
+import DataChartSwitchBox from '../../components/dataChartSwitchBox/index.vue'
+
 import { useRoute } from "vue-router";
 import router from '@/router'
 
@@ -611,7 +613,17 @@ const fetchTableData = async () => {
 
     setTimeout(() => {
       activeChart.value = curDemensionItem.chartTypeList[0]
+      if (curDemension.value === '制裁时间') {
+        if (selectedTime.value === '按月度统计') {
           curChartData.value = curDemensionItem.data
+        } else if (selectedTime.value === '按季度统计') {
+          curChartData.value = curDemensionItem.quatarData
+        } else {
+          curChartData.value = curDemensionItem.yearData
+        }
+      } else {
+        curChartData.value = curDemensionItem.data
+      }
     })
     loading.value = false
   } catch (error) {
@@ -956,18 +968,25 @@ onMounted(async () => {
   }
 
   .chart-main-box {
+    width: 1568px;
+    height: 809px;
+    margin: 0 auto;
+    background: rgba(255, 255, 255);
+    border: 1px solid var(--bg-black-5);
+    border-radius: 10px;
+
     .info-box {
       margin: 0 auto;
-      width: 1568px;
+      margin-top: 16px;
+      width: 1520px;
       height: 30px;
       display: flex;
       justify-content: space-between;
 
       .switch-box {
         width: 160px;
-        border-radius: 20px;
-        border: 1px solid var(--color-primary-100);
-        height: 30px;
+        height: 28px;
+        border: none;
         cursor: pointer;
 
         img {
@@ -984,14 +1003,13 @@ onMounted(async () => {
     .content-box {
       margin: 0 auto;
       margin-top: 16px;
-      width: 1568px;
-      height: 766px;
-      border-radius: 10px;
-      background: rgba(255, 255, 255);
-      border: 1px solid var(--bg-black-5);
+      width: 1520px;
+      height: 726px;
+      border: none;
+
 
       .content-header {
-        margin: 16px 24px;
+        margin: 16px 0;
         width: 1520px;
         height: 28px;
       }
@@ -1021,9 +1039,8 @@ onMounted(async () => {
 
       .switch-box {
         width: 160px;
-        border-radius: 20px;
-        border: 1px solid var(--color-primary-100);
-        height: 30px;
+        height: 28px;
+        border: none;
         cursor: pointer;
 
         img {

src/views/dataLibrary/financeControl/mREList/index.vue

 <template>
   <div class="countrybill-wrapper">
-    <div class="header-box">我是涉军企业清单</div>
-    <div class="main-box">
+    <div class="header-box">
+      <div class="header-top">
+        <SelectBox :placeholder-name="areaPlaceHolder" select-title="科技领域" :select-list="areaList"
+          :select-name="selectedArea" @update:select-text="handleSelectArea" />
+        <SelectBox :placeholder-name="DatePlaceHolder" select-title="制裁时间" :select-list="dateList"
+          :select-name="selectedDate" :custom-time="customTime" @update:select-text="handleSelectDate"
+          @update:custom-time="handleCustomDate" />
+        <SelectBox v-if="isFolderAll" :placeholder-name="countryPlaceHolder" select-title="国家地区"
+          :select-list="countryList" :select-name="selectedCountry" @update:select-text="handleSelectCountry" />
+        <SelectBox v-if="isShowProvinceBox" :placeholder-name="provincePlaceHolder" select-title="实体省份"
+          :select-list="provinceList" :select-name="selectedProvince" @update:select-text="handleSelectProvince" />
+        <SelectBox v-if="isFolderAll" :placeholder-name="entityTypePlaceHolder" select-title="实体类型"
+          :select-list="entityTypeList" :select-name="selectedEntityType"
+          @update:select-text="handleSelectEntityType" />
+        <div class="check-box">
+          <div class="check-box-left text-tip-1">
+            {{ '50%规则：' }}
+          </div>
+          <div class="check-box-right">
+            <el-checkbox v-model="isHalfRule" class="involve-checkbox">
+              {{ '只看50%规则' }}
+            </el-checkbox>
+          </div>
+        </div>
+        <div class="check-box">
+          <div class="check-box-left text-tip-1">
+            {{ '中国实体：' }}
+          </div>
+          <div class="check-box-right">
+            <el-checkbox v-model="isCnEntityOnly" class="involve-checkbox">
+              {{ '只看中国实体' }}
+            </el-checkbox>
+          </div>
+        </div>
+      </div>
+      <div class="header-footer">
+        <div class="header-footer-left">
+          <ActiveTag v-for="tag, index in activeTagList" :key="index" :tagName="tag.name"
+            @close="handleCloseCurTag(tag, index)" />
+        </div>
+        <div class="header-footer-right">
+          <HeaderBtnBox :isShowAll="isFolderAll" @show-all="handleSwitchFolderAll" @clear="handleClear"
+            @confirm="handleConfirm" />
+        </div>
+      </div>
+    </div>
+    <div class="chart-main-box" v-if="isShowChart">
       <div class="info-box">
         <div class="switch-box" @click="handleSwitchChartData">
-          <img v-if="!isShowChart" src="@/views/dataLibrary/assets/icons/chart-active.svg" alt="">
-          <img v-else src="@/views/dataLibrary/assets/icons/data-active.svg" alt="">
+          <DataChartSwitchBox :is-show-data="!isShowChart" />
         </div>
         <div class="num-box text-title-3-bold">
           {{ `共 ${totalNum} 条数据` }}
         </div>
       </div>
-      <div class="content-box"></div>
+      <div class="content-box">
+        <div class="content-header">
+          <ChartHeader :list="staticsDemensionList" @clickItem="handleClickDemensionItem">
+            <template #chart-header-right>
+              <el-select v-model="selectedTime" placeholder="选择时间" style="width: 150px" v-show="curDemension === '制裁时间'"
+                @change="handleChangeTime">
+                <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+
+            </template>
+          </ChartHeader>
+        </div>
+        <div class="content-main">
+          <ChartContainer :chartTitle="curChartTitle" :chartTypeList="curChartTypeList"
+            @clickChartItem="handleSwitchActiveChart" @download="handleDownloadCurChartData">
+            <template #chart-box>
+              <LineChart v-if="activeChart === '折线图'" :lineChartData="curChartData" />
+              <BarChart v-if="activeChart === '柱状图'" :barChartData="curChartData" />
+              <PieChart v-if="activeChart === '饼状图'" :pieChartData="curChartData" />
+              <RaderChart v-if="activeChart === '雷达图'" :radarChartData="curChartData" />
+            </template>
+          </ChartContainer>
+
+        </div>
+      </div>
+    </div>
+    <div class="data-main-box" v-else>
+      <div class="data-main-box-header">
+        <div class="switch-box" @click="handleSwitchChartData">
+          <DataChartSwitchBox :is-show-data="!isShowChart" />
+        </div>
+        <div class="num-box text-title-3-bold">
+          {{ `共 ${totalNum} 条数据` }}
+        </div>
+      </div>
+      <div class="data-main-box-main">
+        <div class="data-main-box-main-header">
+          <div class="header-left">
+            <div class="header-left-item1">
+              <el-checkbox v-model="isSelectedAll" label="全选" @change="handleSelectAllChange" size="large" />
+            </div>
+            <div class="header-left-item2 text-tip-1">{{ `已选择${selectedCount}项` }}</div>
+            <div class="header-left-item2 text-tip-1 cancel" @click="handleClearAll" v-show="selectedCount">{{ '取消' }}
+              <div class="header-left-item3 text-tip-1" v-if="isShowAllDataMaxLengthTip">{{ `(当前最大选择不能超过1万条！)` }}</div>
+
+            </div>
+          </div>
+          <div class="header-right">
+            <div class="header-right-item item1" @click="handleExport">
+              <div class="icon">
+                <img src="../../assets/icons/download.svg" alt="">
+              </div>
+              <div class="text text-tip-1">{{ '导出' }}</div>
+            </div>
+            <div class="header-right-item2 item2">
+              <el-select v-model="curOperation" placeholder="批量操作" style="width: 120px">
+                <el-option v-for="item in operationList" :key="item.id" :label="item.name" :value="item.id" />
+              </el-select>
+            </div>
+            <div class="header-right-item3 item3">
+              <el-select v-model="isSort" placeholder="制裁时间" style="width: 166px" @change="handlePxChange">
+                <template #prefix>
+                  <div style="display: flex; align-items: center; height: 100%">
+                    <img src="../../assets/icons/desc-icon.svg" style="width: 14px; height: 14px" />
+                  </div>
+                </template>
+                <el-option v-for="item in releaseTimeList" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </div>
+          </div>
+        </div>
+        <div class="data-main-box-main-content" v-loading="loading" element-loading-text="数据加载中，请稍候...">
+          <el-table ref="tableRef" :data="tableData" row-key="id" @selection-change="handleSelectionChange"
+            @select="handleSelect" @select-all="handleSelectAll" style="width: 100%" :row-style="{ height: '52px' }">
+            <el-table-column type="selection" width="40" />
+            <el-table-column label="实体名称" width="620">
+              <template #default="scope">
+                <span class="title-item text-compact-bold" @click="handleClickToDetail(scope.row)">{{
+                  scope.row.originalTitle
+                }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="制裁时间" width="120" class-name="date-column">
+              <template #default="scope">{{ scope.row.date }}</template>
+            </el-table-column>
+            <el-table-column label="上市地点">
+              <template #default="scope">
+                <span class="person-item text-compact" @click="handleOrgClick(scope.row)">{{ scope.row.organizationName
+                }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="涉及领域" width="500" class-name="date-column">
+              <template #default="scope">
+                <div class="tag-box">
+                  <AreaTag v-for="tag, index in scope.row.domains" :key="index" :tagName="tag" />
+                </div>
+
+              </template>
+            </el-table-column>
+            <el-table-column label="实体类型" width="100">
+              <template #default="scope">{{ scope.row.typeStr }}</template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+      <div class="data-main-box-footer">
+        <el-pagination background layout="prev, pager, next" :total="totalNum" v-model:current-page="currentPage"
+          :page-size="pageSize" @current-change="handleCurrentChange" />
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed, watch, onMounted, nextTick } from 'vue'
+import ChartContainer from '../../components/ChartContainer/index.vue'
+import ChartHeader from '../../components/ChartHeader/index.vue'
+import ActiveTag from '../../components/ActiveTag/index.vue'
+import HeaderBtnBox from '../../components/HeaderBtnBox/index.vue'
+import LineChart from '../../components/LineChart/index.vue'
+import PieChart from '../../components/PieChart/index.vue'
+import BarChart from '../../components/BarChart/index.vue'
+import RaderChart from '../../components/RadarChart/idnex.vue'
+import SelectBox from '../../components/SelectBox/index.vue'
+import DataChartSwitchBox from '../../components/dataChartSwitchBox/index.vue'
+import { useRoute } from "vue-router";
+import router from '@/router'
 
-// 图表/数据
-const isShowChart = ref(true)
+import { search } from '@/api/comprehensiveSearch'
+import { ElMessage } from 'element-plus'
+import getDateRange from '@/utils/getDateRange'
+import { getProvinceList, getCountryList, getEntityTypes } from '@/api/comprehensiveSearch/index'
+
+const route = useRoute();
+
+const isShowProvinceBox = computed(() => {
+  let isShow = false
+  if (isFolderAll.value && (selectedCountry.value === '0101' || selectedCountry.value === '全部国家')) {
+    isShow = true
+  }
+  return isShow
+})
 
+// 图表/数据
+const isShowChart = ref(false)
+// 点击切换数据/图表
 const handleSwitchChartData = () => {
   isShowChart.value = !isShowChart.value
+  if (isShowChart.value) {
+    const curDemensionItem = staticsDemensionList.value.filter(item => {
+      return item.name === curDemension.value
+    })[0]
+    // setTimeout(() => {
+    activeChart.value = curDemensionItem.chartTypeList[0]
+    if (curDemension.value === '制裁时间') {
+      if (selectedTime.value === '按月度统计') {
+        curChartData.value = curDemensionItem.data
+      } else if (selectedTime.value === '按季度统计') {
+        curChartData.value = curDemensionItem.quatarData
+      } else {
+        curChartData.value = curDemensionItem.yearData
+      }
+    } else {
+      curChartData.value = curDemensionItem.data
+    }
+    // })
+  }
 }
 
 // 总计数据
-const totalNum = ref(12)
+const totalNum = ref(0)
+
+// 统计维度列表
+const staticsDemensionList = ref([
+  {
+    name: '制裁时间',
+    active: true,
+    chartTypeList: ['折线图', '柱状图'],
+    chartTitle: '实体清单制裁时间变化趋势',
+    data: {
+      dataX: [],
+      dataY: []
+    },
+    quatarData: {
+      dataX: [],
+      dataY: []
+    },
+    yearData: {
+      dataX: [],
+      dataY: []
+    }
+  },
+  {
+    name: '科技领域',
+    active: false,
+    chartTypeList: ['饼状图'],
+    chartTitle: '实体清单科技领域分布',
+    data: []
+  },
+  {
+    name: '实体类型',
+    active: false,
+    chartTypeList: ['饼状图'],
+    chartTitle: '实体类型分布',
+    data: []
+  },
+  {
+    name: '实体国家地区',
+    active: false,
+    chartTypeList: ['饼状图'],
+    chartTitle: '实体国家地区分布',
+    data: []
+  },
+  {
+    name: '实体省份',
+    active: false,
+    chartTypeList: ['饼状图'],
+    chartTitle: '实体省份分布',
+    data: []
+  }
+])
+
+// 当前维度下的图表列表
+const curChartTypeList = computed(() => {
+  let arr = staticsDemensionList.value.filter(item => item.active)
+  return arr[0].chartTypeList
+})
+
+// 当前图表标题
+const curChartTitle = computed(() => {
+  let arr = staticsDemensionList.value.filter(item => item.active)
+  return arr[0].chartTitle
+})
+
+// 当前维度
+const curDemension = ref('制裁时间')
+
+// 点击维度item
+const handleClickDemensionItem = (val) => {
+  activeChart.value = ''
+  staticsDemensionList.value.forEach(item => {
+    item.active = false
+  })
+  val.active = true
+  curDemension.value = val.name
+  setTimeout(() => {
+    activeChart.value = val.chartTypeList[0]
+    if (curDemension.value === '制裁时间' && selectedTime.value === '按年度统计') {
+      curChartData.value = val.yearData
+    } else if (curDemension.value === '制裁时间' && selectedTime.value === '按季度统计') {
+      curChartData.value = val.quatarData
+    } else {
+      curChartData.value = val.data
+    }
+  })
+}
+
+// 时间图表 当前选择时间
+const selectedTime = ref('按年度统计')
+// 时间图表-时间列表
+const timeList = ref([
+  {
+    label: '按年度统计',
+    value: '按年度统计'
+  },
+  {
+    label: '按季度统计',
+    value: '按季度统计'
+  },
+  {
+    label: '按月度统计',
+    value: '按月度统计'
+  },
+])
+const handleChangeTime = value => {
+  let curChart = activeChart.value
+  activeChart.value = ''
+  if (value === '按月度统计') {
+    setTimeout(() => {
+      activeChart.value = curChart
+      curChartData.value = staticsDemensionList.value[0].data
+    })
+  } else if (value === '按季度统计') {
+    setTimeout(() => {
+      activeChart.value = curChart
+      curChartData.value = staticsDemensionList.value[0].quatarData
+    })
+  } else {
+    setTimeout(() => {
+      activeChart.value = curChart
+      curChartData.value = staticsDemensionList.value[0].yearData
+    })
+  }
+}
+
+
+// 激活的标签列表
+const activeTagList = computed(() => {
+  const arr = []
+  if (selectedArea.value && selectedArea.value !== '全部领域') {
+    arr.push(
+      {
+        tag: '科技领域',
+        name: selectedArea.value
+      }
+    )
+  }
+  if (selectedDate.value === '自定义') {
+    arr.push(
+      {
+        tag: '制裁时间',
+        name: customTime.value.join('至')
+      }
+    )
+  }
+  if (selectedCountry.value && selectedCountry.value !== '全部国家') {
+    const countryArr = countryList.value.filter(item => item.id === selectedCountry.value)
+    let countryStr = '全部国家'
+    if (countryArr && countryArr.length) {
+      countryStr = countryArr[0].name
+    }
+    arr.push(
+      {
+        tag: '实体国家地区',
+        name: countryStr
+      }
+    )
+  }
+  if (selectedProvince.value && selectedProvince.value !== '全部省份' && (selectedCountry.value === '0101' || selectedCountry.value === '全部国家')) {
+    arr.push(
+      {
+        tag: '实体省份',
+        name: selectedProvince.value
+      }
+    )
+  }
+  if (selectedEntityType.value && selectedEntityType.value !== '全部实体类型') {
+    const entityTypeArr = entityTypeList.value.filter(item => item.id === selectedEntityType.value)
+    let entityTypeStr = '全部类型'
+    if (entityTypeArr && entityTypeArr.length) {
+      entityTypeStr = entityTypeArr[0].name
+    }
+    arr.push(
+      {
+        tag: '实体类型',
+        name: entityTypeStr
+      }
+    )
+  }
+
+  if (isHalfRule.value) {
+    const halfRuleStr = '50%规则'
+    arr.push(
+      {
+        tag: '50%规则',
+        name: halfRuleStr
+      }
+    )
+  }
+
+  if (isCnEntityOnly.value) {
+    const involveStr = '只看中国实体'
+    arr.push(
+      {
+        tag: '只看中国实体',
+        name: involveStr
+      }
+    )
+  }
+
+  return arr
+
+})
+
+// 关闭当前标签
+const handleCloseCurTag = (tag, index) => {
+  switch (tag.tag) {
+    case '科技领域':
+      selectedArea.value = '全部领域'
+      break
+    case '制裁时间':
+      selectedDate.value = ''
+      customTime.value = []
+      break
+    case '实体国家地区':
+      selectedCountry.value = '全部国家'
+      break
+    case '实体省份':
+      selectedProvince.value = '全部省份'
+      break
+    case '实体类型':
+      selectedEntityType.value = '全部实体类型'
+      break
+    case '50%规则':
+      isHalfRule.value = false
+      break
+    case '只看中国实体':
+      isCnEntityOnly.value = false
+      break
+  }
+
+}
+
+const activeChart = ref('')  // 当前激活的图表
+// 切换当前图表
+const handleSwitchActiveChart = val => {
+  activeChart.value = val.name
+}
+// 雷达图数据
+const radarChartData = ref({
+  title: [
+    {
+      name: '航空航天',
+      max: 10
+    },
+    {
+      name: '先进制造',
+      max: 10
+    },
+    {
+      name: '量子科技',
+      max: 10
+    },
+    {
+      name: '人工智能',
+      max: 10
+    },
+    {
+      name: '新材料',
+      max: 10
+    },
+    {
+      name: '集成电路',
+      max: 10
+    },
+  ],
+  data: [
+    {
+      name: "337调查",
+      value: [10, 5, 2, 8, 5, 7
+      ]
+    },
+    {
+      name: "232调查",
+      value: [2, 5, 3, 8, 10, 2]
+    },
+    {
+      name: "301调查",
+      value: [5, 8, 2, 9, 1, 5]
+    }
+  ]
+}
+
+)
+
+
+// 数据- 是否全选
+const isSelectedAll = ref(false)
+// 批量操作-当前操作
+const curOperation = ref('')
+const operationList = ref([
+  {
+    name: 'aaa',
+    id: 'aaa'
+  },
+  {
+    name: 'bbb',
+    id: 'bbb'
+  },
+  {
+    name: 'ccc',
+    id: 'ccc'
+  },
+])
+
+// 科技领域
+const areaPlaceHolder = ref('请选择领域')
+const selectedArea = ref('全部领域')
+const areaList = ref([
+  {
+    name: '全部领域',
+    id: '全部领域'
+  },
+  {
+    name: '人工智能',
+    id: '人工智能'
+  },
+  {
+    name: '生物科技',
+    id: '生物科技'
+  },
+  {
+    name: '新一代通信网络',
+    id: '新一代通信网络'
+  },
+  {
+    name: '量子科技',
+    id: '量子科技'
+  },
+  {
+    name: '新能源',
+    id: '新能源'
+  },
+  {
+    name: '集成电路',
+    id: '集成电路'
+  },
+  {
+    name: '海洋',
+    id: '海洋'
+  },
+  {
+    name: '先进制造',
+    id: '先进制造'
+  },
+  {
+    name: '新材料',
+    id: '新材料'
+  },
+  {
+    name: '航空航天',
+    id: '航空航天'
+  },
+  {
+    name: '太空',
+    id: '太空'
+  },
+  {
+    name: '深海',
+    id: '深海'
+  },
+  {
+    name: '极地',
+    id: '极地'
+  },
+  {
+    name: '核',
+    id: '核'
+  },
+  {
+    name: '其他',
+    id: '其他'
+  },
+])
+const handleSelectArea = (value) => {
+  selectedArea.value = value
+}
+
+// 制裁时间
+const DatePlaceHolder = ref('请选择时间')
+const selectedDate = ref('')
+const dateList = ref([
+  {
+    name: '自定义',
+    id: '自定义'
+  },
+  {
+    name: '近一年',
+    id: '近一年'
+  },
+  {
+    name: '近半年',
+    id: '近半年'
+  },
+  {
+    name: '近三月',
+    id: '近三月'
+  },
+  {
+    name: '近一月',
+    id: '近一月'
+  }
+])
+const customTime = ref([])  // 自定义时间
+const handleCustomDate = value => {
+  customTime.value = value
+}
+const handleSelectDate = (value) => {
+  selectedDate.value = value
+  if (selectedDate.value !== '自定义') {
+    customTime.value = getDateRange(selectedDate.value)
+  }
+}
+
+// 实体国家地区
+const countryList = ref([
+  {
+    name: '全部国家',
+    id: '全部国家'
+  },
+])
+const selectedCountry = ref('全部国家')
+const countryPlaceHolder = ref('请选择实体国家')
+const handleSelectCountry = value => {
+  selectedCountry.value = value
+}
+// 获取国家地区列表
+const handleGetCountryList = async () => {
+  try {
+    const res = await getCountryList()
+    console.log('获取国家列表', res);
+    if (res.code === 200 && res.data) {
+      countryList.value = res.data.map(item => {
+        return {
+          name: item.name,
+          id: item.id
+        }
+      })
+    }
+  } catch (error) {
+
+  }
+}
+
+
+// 实体省份（仅支持中国省份）
+const provinceList = ref([
+  {
+    name: '全部省份',
+    id: '全部省份',
+  }
+])
+const selectedProvince = ref('全部省份')
+const provincePlaceHolder = ref('请选择发布机构')
+const handleSelectProvince = value => {
+  selectedProvince.value = value
+}
+// 获取全部省份列表
+const handleGetProvinceList = async () => {
+  try {
+    const res = await getProvinceList()
+    console.log('获取省份列表', res);
+    if (res && res.length) {
+      provinceList.value = res.map(item => {
+        return {
+          name: item,
+          id: item
+        }
+      })
+    }
+
+  } catch (error) {
+    console.error(error);
+
+  } finally {
+
+  }
+}
+
+// 实体类型列表
+const entityTypeList = ref([
+  {
+    name: '全部实体类型',
+    id: '全部实体类型'
+  }
+])
+const selectedEntityType = ref('全部实体类型')
+const entityTypePlaceHolder = ref('请选择实体类型')
+const handleSelectEntityType = value => {
+  selectedEntityType.value = value
+}
+// 获取实体类型列表
+const handleGetEntityTypes = async () => {
+  try {
+    const res = await getEntityTypes()
+    console.log('获取实体类型列表');
+    if (res.code === 200 && res.data) {
+      entityTypeList.value = res.data.map(item => {
+        return {
+          name: item.name,
+          id: item.code
+        }
+      })
+    }
+
+  } catch (error) {
+
+  }
+}
+
+// 是否50%规则
+const isHalfRule = ref(false)
+// 是否只看中国实体
+const isCnEntityOnly = ref(false)
+
+// 清空条件
+const handleClear = () => {
+  selectedArea.value = '全部领域'
+  selectedDate.value = ''
+  customTime.value = []
+  selectedCountry.value = '全部国家'
+  selectedProvince.value = '全部省份'
+  selectedEntityType.value = '全部实体类型'
+  isHalfRule.value = false
+  isCnEntityOnly.value = false
+  ElMessage.success('已清空条件！')
+}
+
+// 确定
+const handleConfirm = () => {
+  currentPage.value = 1
+  fetchTableData()
+}
+
+// 展开全部 / 收起
+const isFolderAll = ref(false)
+const handleSwitchFolderAll = () => {
+  isFolderAll.value = !isFolderAll.value
+}
+
+const tableRef = ref(null)
+
+// 表格数据
+const tableData = ref([
+])
+
+const releaseTimeList = ref([
+  {
+    label: "按发布时间倒序",
+    value: true
+  },
+  {
+    label: "按发布时间升序",
+    value: false
+  }
+]);
+const isSort = ref(true); // true 倒序  false 升序
+const handlePxChange = val => {
+  fetchTableData()
+};
+
+const currentPage = ref(1);
+const pageSize = ref(10)
+
+// 存储选中的数据（跨页）[citation:3][citation:8]
+const selectedMap = ref(new Map())  // 使用 Map 存储，key 为唯一 id
+
+// 计算已选中的条数
+const selectedCount = computed(() => selectedMap.value.size)
+
+// 获取当前页表格数据（示例）
+const fetchTableData = async () => {
+  // isSelectedAll.value = false
+  // selectedMap.value.clear()
+  loading.value = true
+  // 调用接口获取数据...
+  const params = {
+    page: currentPage.value,
+    size: pageSize.value,
+    // keyword: '',
+    type: 10,  // 实体清单
+    domains: selectedArea.value === '全部领域' ? null : [selectedArea.value],  // 科技领域
+    proposedDateStart: customTime.value[0] ? customTime.value[0] : null,
+    proposedDateEnd: customTime.value[1] ? customTime.value[1] : null,
+    countryId: selectedCountry.value === '全部国家' ? null : selectedCountry.value,  // 国家地区
+    provinceName: selectedProvince.value === '全部省份' ? null : selectedProvince.value,  // 实体省份
+    entityTypeCode: selectedEntityType.value === '全部实体类型' ? null : selectedEntityType.value,  // 实体类别
+    ratio: isHalfRule.value ? 'Y' : null,  // 50%规则
+    isInvolveCn: isCnEntityOnly.value ? 'Y' : null,  // 是否只看中国实体
+    sort: isSort.value ? 0 : 1     // 0 先按分数降序 后按时间降序  1 先按分数降序，再按时间升序
+  }
+  try {
+    const res = await search(params)
+    console.log('搜索结果', res);
+    if (res.code === 200 && res.data) {
+      tableData.value = res.data.records
+      totalNum.value = res.data.total
+      staticsDemensionList.value[0].data = {
+        dataX: Object.keys(res.data.aggregationsDate),
+        dataY: Object.values(res.data.aggregationsDate).map(value => Number(value))
+      }
+      staticsDemensionList.value[0].quatarData = {
+        dataX: Object.keys(res.data.aggregationsQuarter),
+        dataY: Object.values(res.data.aggregationsQuarter).map(value => Number(value))
+      }
+      staticsDemensionList.value[0].yearData = {
+        dataX: Object.keys(res.data.aggregationsYear),
+        dataY: Object.values(res.data.aggregationsYear).map(value => Number(value))
+      }
+      staticsDemensionList.value[1].data = Object.entries(res.data.aggregationsDomain).map(([key, value]) => ({
+        name: key,
+        value: Number(value)
+      }))
+      staticsDemensionList.value[2].data = Object.entries(res.data.aggregationSentityTypeCode).map(([key, value]) => ({
+        name: key,
+        value: Number(value)
+      }))
+      staticsDemensionList.value[3].data = Object.entries(res.data.aggregationCountryId).map(([key, value]) => ({
+        name: key,
+        value: Number(value)
+      }))
+      staticsDemensionList.value[4].data = Object.entries(res.data.aggregationProvinceName).map(([key, value]) => ({
+        name: key,
+        value: Number(value)
+      }))
+
+    }
+
+    const curDemensionItem = staticsDemensionList.value.filter(item => {
+      return item.name === curDemension.value
+    })[0]
+
+    activeChart.value = ''
+
+    setTimeout(() => {
+      activeChart.value = curDemensionItem.chartTypeList[0]
+      curChartData.value = curDemensionItem.data
+    })
+    loading.value = false
+  } catch (error) {
+    loading.value = false
+  }
+  // tableData.value = res.data
+  // total.value = res.total
+
+  // 数据加载后，回显已选中的行 
+  nextTick(() => {
+    tableData.value.forEach(row => {
+      if (selectedMap.value.has(row.id)) {
+        tableRef.value?.toggleRowSelection(row, true)
+      }
+    })
+  })
+}
+const allData = ref([])
+
+// 获取筛选条件下全部表格数据
+const fetchAllData = async () => {
+  const params = {
+    page: 1,
+    size: 9999,
+    type: 10,  // 实体清单
+    domains: selectedArea.value === '全部领域' ? null : [selectedArea.value],  // 科技领域
+    proposedDateStart: customTime.value[0] ? customTime.value[0] : null,
+    proposedDateEnd: customTime.value[1] ? customTime.value[1] : null,
+    countryId: selectedCountry.value === '全部国家' ? null : selectedCountry.value,  // 国家地区
+    provinceName: selectedProvince.value === '全部省份' ? null : selectedProvince.value,  // 实体省份
+    entityTypeCode: selectedEntityType.value === '全部实体类型' ? null : selectedEntityType.value,  // 实体类别
+    ratio: isHalfRule.value ? 'Y' : null,  // 50%规则
+    isInvolveCn: isCnEntityOnly.value ? 'Y' : null,  // 是否只看中国实体
+    sort: isSort.value ? 0 : 1     // 0 先按分数降序 后按时间降序  1 先按分数降序，再按时间升序
+  }
+  try {
+    const res = await search(params)
+    console.log('搜索结果', res);
+    if (res.code === 200 && res.data) {
+      allData.value = res.data.records
+    }
+
+  } catch (error) {
+    ElMessage.error('加载全部数据出错！')
+  }
+}
+
+// 单选事件 
+const handleSelect = (selection, row) => {
+  if (selection.some(item => item.id === row.id)) {
+    // 选中：添加到 Map
+    selectedMap.value.set(row.id, row)
+  } else {
+    // 取消选中：从 Map 移除
+    selectedMap.value.delete(row.id)
+  }
+}
+
+// 表格自带 当前页 全选/全不选事件 
+const handleSelectAll = (selection) => {
+  if (selection.length > 0) {
+    // 全选：将当前页所有数据添加到 Map
+    tableData.value.forEach(row => {
+      if (!selectedMap.value.has(row.id)) {
+        selectedMap.value.set(row.id, row)
+      }
+    })
+  } else {
+    // 全不选：从 Map 中移除当前页的所有数据
+    tableData.value.forEach(row => {
+      selectedMap.value.delete(row.id)
+    })
+  }
+}
+
+// 处理选择变化（用于统计）
+const handleSelectionChange = (val) => {
+  // 这里可以做一些额外的处理，但主要统计使用 selectedMap
+  console.log('当前页选中数量:', val.length)
+}
+
+// 全选当前页按钮
+const handleSelectAllPage = () => {
+  if (tableData.value.length === 0) return
+
+  // 检查当前页是否已全选
+  const currentPageSelected = tableData.value.every(row =>
+    selectedMap.value.has(row.id)
+  )
+
+  if (currentPageSelected) {
+    // 已全选，则不动当前页的全选
+    tableData.value.forEach(row => {
+      tableRef.value.toggleRowSelection(row, false)
+      // selectedMap.value.delete(row.id)
+    })
+  } else {
+    // 未全选，则全选当前页
+    tableData.value.forEach(row => {
+      tableRef.value.toggleRowSelection(row, true)
+      if (!selectedMap.value.has(row.id)) {
+        selectedMap.value.set(row.id, row)
+      }
+    })
+  }
+}
+
+// 全选最大1万条提示
+const isShowAllDataMaxLengthTip = ref(false)
+const loading = ref(false)  // 加载数据loading
+
+// 处理 全选(全部数据)
+const handleSelectAllChange = async () => {
+  if (isSelectedAll.value) {
+
+    if (totalNum.value > 10000) {
+      isShowAllDataMaxLengthTip.value = true
+    }
+    loading.value = true
+
+    await fetchAllData()
+    handleSelectAllPage()
+    allData.value.forEach(row => {
+      if (!selectedMap.value.has(row.id)) {
+        selectedMap.value.set(row.id, row)
+      }
+    })
+    loading.value = false
+  } else {
+    handleClearAll()
+  }
+
+}
+
+// 清空所有选择
+const handleClearAll = () => {
+  isSelectedAll.value = false
+  selectedMap.value.clear()
+  tableRef.value?.clearSelection()
+}
+
+// 翻页
+const handleCurrentChange = async (val) => {
+  currentPage.value = val
+  await fetchTableData()
+  if (isSelectedAll.value) {
+    handleSelectAllPage()
+  }
+}
+
+
+// 监听数据变化，回显选中状态 [citation:4][citation:8]
+watch(tableData, () => {
+  nextTick(() => {
+    tableData.value.forEach(row => {
+      if (selectedMap.value.has(row.id)) {
+        tableRef.value?.toggleRowSelection(row, true)
+      }
+    })
+  })
+})
+
+// 当前图表数据
+const curChartData = ref(null)
+
+// 下载当前图表数据
+const handleDownloadCurChartData = () => {
+  const jsonStr = JSON.stringify(curChartData.value, null, 2);
+  const blob = new Blob([jsonStr], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = 'chartData.json';
+  link.click();
+
+  URL.revokeObjectURL(url);
+}
+
+// 跳转到当前页 初始化筛选条件
+const initParam = () => {
+  const hasQuery = Object.keys(route.query).length > 0;
+  if (hasQuery) {
+    selectedArea.value = route.query.domains ? route.query.domains : '全部领域'
+
+    if (route.query.selectedDate && Array.isArray(JSON.parse(route.query.selectedDate)) && JSON.parse(route.query.selectedDate).length) {
+      selectedDate.value = '自定义'
+      customTime.value = JSON.parse(route.query.selectedDate)
+    }
+
+    selectedProvince.value = route.query.selectedProvince ? provinceList.value.filter(item => item.name.indexOf(route.query.selectedProvince) > -1)[0].name : '全部省份'
+    selectedCountry.value = route.query.selectedCountryId ? route.query.selectedCountryId : '全部国家'
+
+    isHalfRule.value = route.query.isHalfRule ? true : false
+
+    isCnEntityOnly.value = route.query.isCnEntityOnly ? true : false
+
+    selectedEntityType.value = route.query.selectedEntityType ? entityTypeList.value.filter(item => item.name === route.query.selectedEntityType)[0].id : '全部实体类型'
+
+    const query = route.query;
+    if (Object.keys(query).length > 0) {
+      sessionStorage.setItem('entityRouteQuery', JSON.stringify(query));
+    }
+  } else {
+    const savedQuery = JSON.parse(sessionStorage.getItem('entityRouteQuery') || '{}');
+    selectedArea.value = savedQuery.domains ? savedQuery.domains : '全部领域'
+    if (savedQuery.selectedDate && Array.isArray(JSON.parse(savedQuery.selectedDate)) && JSON.parse(savedQuery.selectedDate).length) {
+      selectedDate.value = '自定义'
+      customTime.value = JSON.parse(savedQuery.selectedDate)
+    }
+    isHalfRule.value = savedQuery.isHalfRule ? true : false
+    selectedProvince.value = savedQuery.selectedProvince ? provinceList.value.filter(item => item.name.indexOf(savedQuery.selectedProvince) > -1)[0].name : '全部省份'
+    selectedCountry.value = route.query.selectedCountryId ? route.query.selectedCountryId : '全部国家'
+
+    isCnEntityOnly.value = savedQuery.isCnEntityOnly ? true : false
+
+    selectedEntityType.value = savedQuery.selectedEntityType ? entityTypeList.value.filter(item => item.name === savedQuery.selectedEntityType)[0].id : '全部实体类型'
+  }
+
+}
+
+// 跳转机构详情
+const handleClickToDetail = (curEntity) => {
+  console.log('curEntity', curEntity);
+
+  window.sessionStorage.setItem("decreeId", curEntity.id);
+  window.sessionStorage.setItem("curTabName", curEntity.title);
+  const route = router.resolve({
+				name: "companyPages",
+				params: {
+					id: curEntity.id
+				}
+			});
+  window.open(route.href, "_blank");
+};
+
+// 跳转机构详情
+const handleOrgClick = item => {
+  console.log('item', item);
+
+  window.sessionStorage.setItem("curTabName", item.organizationName);
+  const route = router.resolve({
+    path: "/institution",
+    query: {
+      id: item.organizationId
+    }
+  });
+  window.open(route.href, "_blank");
+};
+
+// 导出
+const handleExport = () => {
+  if (!selectedCount.value) {
+    ElMessage.warning('请选择至少一项数据！')
+    return
+  }
+  console.log(selectedMap.value);
+  const arr = Array.from(selectedMap.value);
+
+  const jsonStr = JSON.stringify(arr, null, 2);
+  const blob = new Blob([jsonStr], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = 'export.json';
+  link.click();
+
+  URL.revokeObjectURL(url);
+};
+
+onMounted(async () => {
+  await handleGetProvinceList()  // 获取省份列表
+  await handleGetCountryList()  // 获取国家列表 
+  await handleGetEntityTypes() // 获取实体类型列表
+  initParam()
+  // 初始化
+  await fetchTableData()
+
+
+})
 
 </script>
 
@@ -35,6 +1149,8 @@ const totalNum = ref(12)
 .countrybill-wrapper {
   width: 1600px;
   height: 968px;
+  overflow: hidden;
+  overflow-y: auto;
 
   .headere-box {
     width: 1568px;
@@ -44,19 +1160,53 @@ const totalNum = ref(12)
     border: 1px solid var(--bg-black-5);
     margin: 16px auto;
   }
+
   .header-box {
     width: 1568px;
-      height: 112px;
+    min-height: 112px;
     border-radius: 10px;
     background: rgb(255, 255, 255);
     border: 1px solid var(--bg-black-5);
     margin: 16px auto;
+    box-sizing: border-box;
+    padding: 16px 24px;
+
+    .header-top {
+      min-height: 28px;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px 42px;
+
+      // transition: all ease 1s;
+      .check-box {
+        display: flex;
+        width: 348px;
+        height: 28px;
+        align-items: center;
+        gap: 8px;
+
+        .check-box-left {
+          width: 100px;
+          color: var(--text-primary-65-color);
+        }
+      }
     }
 
-  .main-box {
 
+    .header-footer {
+      margin-top: 16px;
+      display: flex;
+      justify-content: space-between;
 
+      .header-footer-left {
+        display: flex;
+        justify-content: space-between;
+        gap: 8px;
+      }
+    }
+  }
 
+  .chart-main-box {
     .info-box {
       margin: 0 auto;
       width: 1568px;
@@ -66,15 +1216,9 @@ const totalNum = ref(12)
 
       .switch-box {
         width: 160px;
-        border-radius: 20px;
-        border: 1px solid var(--color-primary-100);
-        height: 30px;
+        height: 28px;
+        border: none;
         cursor: pointer;
-
-        img {
-          width: 100%;
-          height: 100%;
-        }
       }
 
       .num-box {
@@ -90,7 +1234,193 @@ const totalNum = ref(12)
       border-radius: 10px;
       background: rgba(255, 255, 255);
       border: 1px solid var(--bg-black-5);
+
+      .content-header {
+        margin: 16px 24px;
+        width: 1520px;
+        height: 28px;
+      }
+
+      .content-main {
+        width: 1520px;
+        margin: 0 auto;
+      }
+    }
+  }
+
+  .data-main-box {
+    width: 1568px;
+    min-height: 810px;
+    border-radius: 10px;
+    background: var(--bg-white-100);
+    margin: 0 auto;
+    margin-bottom: 20px;
+    overflow: hidden;
+
+    .data-main-box-header {
+      margin: 16px auto;
+      width: 1520px;
+      height: 30px;
+      display: flex;
+      justify-content: space-between;
+
+      .switch-box {
+        width: 160px;
+        height: 28px;
+        border: none;
+        cursor: pointer;
+      }
+
+      .num-box {
+        box-sizing: border-box;
+        padding: 2px 0;
+        color: var(--color-red-100);
+      }
+    }
+
+    .data-main-box-main {
+      width: 1520px;
+      // height: 633px;
+      min-height: 680px;
+      border-radius: 10px;
+      border: 1px solid var(--bg-black-5);
+      margin: 0 auto;
+
+      .data-main-box-main-header {
+        height: 48px;
+        background: var(--bg-black-2);
+        display: flex;
+        justify-content: space-between;
+
+        .header-left {
+          margin-left: 16px;
+          height: 48px;
+          display: flex;
+          gap: 16px;
+          align-items: center;
+
+          .header-left-item2 {
+            color: var(--color-primary-100);
+            display: flex;
+            gap: 8px;
+
+          }
+
+          .header-left-item3 {
+            color: var(--color-orange-100);
+          }
+
+          .cancel {
+            cursor: pointer;
+          }
+        }
+
+        .header-right {
+          margin-right: 16px;
+          display: flex;
+          gap: 8px;
+          align-items: center;
+
+          .header-right-item {
+            height: 30px;
+            padding: 5px 16px;
+            border: 1px solid var(--bg-black-10);
+            border-radius: 4px;
+            background: var(--bg-white-100);
+            cursor: pointer;
+          }
+
+          .item1 {
+            display: flex;
+            gap: 2px;
+            justify-content: center;
+            align-items: center;
+
+            &:hover {
+              background: var(--color-primary-2);
+            }
+
+            .icon {
+              width: 16px;
+              height: 16px;
+
+              img {
+                width: 100%;
+                height: 100%;
+              }
+            }
+
+            .text {
+              color: var(--text-primary-65-color);
+            }
+          }
+
+          .item2 {}
+
+          .item3 {}
         }
       }
+
+      .data-main-box-main-content {}
+    }
+
+    .data-main-box-footer {
+      margin: 16px auto 0;
+      height: 40px;
+      width: 1520px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+}
+
+.date-column {
+  background-color: #ecf5ff;
+
+  .tag-box {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    width: 490px;
+
+  }
+}
+
+.date-column .cell {
+  color: #409eff !important;
+  font-weight: 500;
+}
+
+.title-item {
+  color: var(--text-primary-80-color);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--color-primary-100);
+    text-decoration: underline;
+  }
+}
+
+.person-item {
+  color: var(--color-primary-100);
+  cursor: pointer;
+
+  &:hover {
+    font-weight: bold;
+    text-decoration: underline;
+  }
+}
+
+:deep(.el-table__header-wrapper) {
+  // background-color: #f5f7fa;
+  height: 48px;
+
+}
+
+:deep(.el-table__header th) {
+  // background-color: #f5f7fa;
+  color: var(--text-primary-50-color);
+  font-weight: bold;
 }
 </style>
\ No newline at end of file

src/views/dataLibrary/financeControl/sDNList/index.vue

 <template>
   <div class="countrybill-wrapper">
-    <div class="header-box">我是SDN清单</div>
-    <div class="main-box">
+    <div class="header-box">
+      <div class="header-top">
+        <SelectBox :placeholder-name="areaPlaceHolder" select-title="科技领域" :select-list="areaList"
+          :select-name="selectedArea" @update:select-text="handleSelectArea" />
+        <SelectBox :placeholder-name="DatePlaceHolder" select-title="制裁时间" :select-list="dateList"
+          :select-name="selectedDate" :custom-time="customTime" @update:select-text="handleSelectDate"
+          @update:custom-time="handleCustomDate" />
+        <SelectBox v-if="isFolderAll" :placeholder-name="countryPlaceHolder" select-title="国家地区"
+          :select-list="countryList" :select-name="selectedCountry" @update:select-text="handleSelectCountry" />
+        <SelectBox v-if="isShowProvinceBox" :placeholder-name="provincePlaceHolder" select-title="实体省份"
+          :select-list="provinceList" :select-name="selectedProvince" @update:select-text="handleSelectProvince" />
+        <SelectBox v-if="isFolderAll" :placeholder-name="entityTypePlaceHolder" select-title="实体类型"
+          :select-list="entityTypeList" :select-name="selectedEntityType"
+          @update:select-text="handleSelectEntityType" />
+        <div class="check-box">
+          <div class="check-box-left text-tip-1">
+            {{ '50%规则：' }}
+          </div>
+          <div class="check-box-right">
+            <el-checkbox v-model="isHalfRule" class="involve-checkbox">
+              {{ '只看50%规则' }}
+            </el-checkbox>
+          </div>
+        </div>
+        <div class="check-box">
+          <div class="check-box-left text-tip-1">
+            {{ '中国实体：' }}
+          </div>
+          <div class="check-box-right">
+            <el-checkbox v-model="isCnEntityOnly" class="involve-checkbox">
+              {{ '只看中国实体' }}
+            </el-checkbox>
+          </div>
+        </div>
+      </div>
+      <div class="header-footer">
+        <div class="header-footer-left">
+          <ActiveTag v-for="tag, index in activeTagList" :key="index" :tagName="tag.name"
+            @close="handleCloseCurTag(tag, index)" />
+        </div>
+        <div class="header-footer-right">
+          <HeaderBtnBox :isShowAll="isFolderAll" @show-all="handleSwitchFolderAll" @clear="handleClear"
+            @confirm="handleConfirm" />
+        </div>
+      </div>
+    </div>
+    <div class="chart-main-box" v-if="isShowChart">
       <div class="info-box">
         <div class="switch-box" @click="handleSwitchChartData">
-          <img v-if="!isShowChart" src="@/views/dataLibrary/assets/icons/chart-active.svg" alt="">
-          <img v-else src="@/views/dataLibrary/assets/icons/data-active.svg" alt="">
+          <DataChartSwitchBox :is-show-data="!isShowChart" />
         </div>
         <div class="num-box text-title-3-bold">
           {{ `共 ${totalNum} 条数据` }}
         </div>
       </div>
-      <div class="content-box"></div>
+      <div class="content-box">
+        <div class="content-header">
+          <ChartHeader :list="staticsDemensionList" @clickItem="handleClickDemensionItem">
+            <template #chart-header-right>
+              <el-select v-model="selectedTime" placeholder="选择时间" style="width: 150px" v-show="curDemension === '制裁时间'"
+                @change="handleChangeTime">
+                <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+
+            </template>
+          </ChartHeader>
+        </div>
+        <div class="content-main">
+          <ChartContainer :chartTitle="curChartTitle" :chartTypeList="curChartTypeList"
+            @clickChartItem="handleSwitchActiveChart" @download="handleDownloadCurChartData">
+            <template #chart-box>
+              <LineChart v-if="activeChart === '折线图'" :lineChartData="curChartData" />
+              <BarChart v-if="activeChart === '柱状图'" :barChartData="curChartData" />
+              <PieChart v-if="activeChart === '饼状图'" :pieChartData="curChartData" />
+              <RaderChart v-if="activeChart === '雷达图'" :radarChartData="curChartData" />
+            </template>
+          </ChartContainer>
+
+        </div>
+      </div>
+    </div>
+    <div class="data-main-box" v-else>
+      <div class="data-main-box-header">
+        <div class="switch-box" @click="handleSwitchChartData">
+          <DataChartSwitchBox :is-show-data="!isShowChart" />
+        </div>
+        <div class="num-box text-title-3-bold">
+          {{ `共 ${totalNum} 条数据` }}
+        </div>
+      </div>
+      <div class="data-main-box-main">
+        <div class="data-main-box-main-header">
+          <div class="header-left">
+            <div class="header-left-item1">
+              <el-checkbox v-model="isSelectedAll" label="全选" @change="handleSelectAllChange" size="large" />
+            </div>
+            <div class="header-left-item2 text-tip-1">{{ `已选择${selectedCount}项` }}</div>
+            <div class="header-left-item2 text-tip-1 cancel" @click="handleClearAll" v-show="selectedCount">{{ '取消' }}
+              <div class="header-left-item3 text-tip-1" v-if="isShowAllDataMaxLengthTip">{{ `(当前最大选择不能超过1万条！)` }}</div>
+
+            </div>
+          </div>
+          <div class="header-right">
+            <div class="header-right-item item1" @click="handleExport">
+              <div class="icon">
+                <img src="../../assets/icons/download.svg" alt="">
+              </div>
+              <div class="text text-tip-1">{{ '导出' }}</div>
+            </div>
+            <div class="header-right-item2 item2">
+              <el-select v-model="curOperation" placeholder="批量操作" style="width: 120px">
+                <el-option v-for="item in operationList" :key="item.id" :label="item.name" :value="item.id" />
+              </el-select>
+            </div>
+            <div class="header-right-item3 item3">
+              <el-select v-model="isSort" placeholder="制裁时间" style="width: 166px" @change="handlePxChange">
+                <template #prefix>
+                  <div style="display: flex; align-items: center; height: 100%">
+                    <img src="../../assets/icons/desc-icon.svg" style="width: 14px; height: 14px" />
+                  </div>
+                </template>
+                <el-option v-for="item in releaseTimeList" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </div>
+          </div>
+        </div>
+        <div class="data-main-box-main-content" v-loading="loading" element-loading-text="数据加载中，请稍候...">
+          <el-table ref="tableRef" :data="tableData" row-key="id" @selection-change="handleSelectionChange"
+            @select="handleSelect" @select-all="handleSelectAll" style="width: 100%" :row-style="{ height: '52px' }">
+            <el-table-column type="selection" width="40" />
+            <el-table-column label="实体名称" width="620">
+              <template #default="scope">
+                <span class="title-item text-compact-bold" @click="handleClickToDetail(scope.row)">{{
+                  scope.row.originalTitle
+                }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="制裁时间" width="120" class-name="date-column">
+              <template #default="scope">{{ scope.row.date }}</template>
+            </el-table-column>
+            <el-table-column label="上市地点">
+              <template #default="scope">
+                <span class="person-item text-compact" @click="handleOrgClick(scope.row)">{{ scope.row.organizationName
+                }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="涉及领域" width="500" class-name="date-column">
+              <template #default="scope">
+                <div class="tag-box">
+                  <AreaTag v-for="tag, index in scope.row.domains" :key="index" :tagName="tag" />
+                </div>
+
+              </template>
+            </el-table-column>
+            <el-table-column label="实体类型" width="100">
+              <template #default="scope">{{ scope.row.typeStr }}</template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+      <div class="data-main-box-footer">
+        <el-pagination background layout="prev, pager, next" :total="totalNum" v-model:current-page="currentPage"
+          :page-size="pageSize" @current-change="handleCurrentChange" />
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed, watch, onMounted, nextTick } from 'vue'
+import ChartContainer from '../../components/ChartContainer/index.vue'
+import ChartHeader from '../../components/ChartHeader/index.vue'
+import ActiveTag from '../../components/ActiveTag/index.vue'
+import HeaderBtnBox from '../../components/HeaderBtnBox/index.vue'
+import LineChart from '../../components/LineChart/index.vue'
+import PieChart from '../../components/PieChart/index.vue'
+import BarChart from '../../components/BarChart/index.vue'
+import RaderChart from '../../components/RadarChart/idnex.vue'
+import SelectBox from '../../components/SelectBox/index.vue'
+import DataChartSwitchBox from '../../components/dataChartSwitchBox/index.vue'
+import { useRoute } from "vue-router";
+import router from '@/router'
 
-// 图表/数据
-const isShowChart = ref(true)
+import { search } from '@/api/comprehensiveSearch'
+import { ElMessage } from 'element-plus'
+import getDateRange from '@/utils/getDateRange'
+import { getProvinceList, getCountryList, getEntityTypes } from '@/api/comprehensiveSearch/index'
+
+const route = useRoute();
+
+const isShowProvinceBox = computed(() => {
+  let isShow = false
+  if (isFolderAll.value && (selectedCountry.value === '0101' || selectedCountry.value === '全部国家')) {
+    isShow = true
+  }
+  return isShow
+})
 
+// 图表/数据
+const isShowChart = ref(false)
+// 点击切换数据/图表
 const handleSwitchChartData = () => {
   isShowChart.value = !isShowChart.value
+  if (isShowChart.value) {
+    const curDemensionItem = staticsDemensionList.value.filter(item => {
+      return item.name === curDemension.value
+    })[0]
+    // setTimeout(() => {
+    activeChart.value = curDemensionItem.chartTypeList[0]
+    if (curDemension.value === '制裁时间') {
+      if (selectedTime.value === '按月度统计') {
+        curChartData.value = curDemensionItem.data
+      } else if (selectedTime.value === '按季度统计') {
+        curChartData.value = curDemensionItem.quatarData
+      } else {
+        curChartData.value = curDemensionItem.yearData
+      }
+    } else {
+      curChartData.value = curDemensionItem.data
+    }
+    // })
+  }
 }
 
 // 总计数据
-const totalNum = ref(12)
+const totalNum = ref(0)
+
+// 统计维度列表
+const staticsDemensionList = ref([
+  {
+    name: '制裁时间',
+    active: true,
+    chartTypeList: ['折线图', '柱状图'],
+    chartTitle: '实体清单制裁时间变化趋势',
+    data: {
+      dataX: [],
+      dataY: []
+    },
+    quatarData: {
+      dataX: [],
+      dataY: []
+    },
+    yearData: {
+      dataX: [],
+      dataY: []
+    }
+  },
+  {
+    name: '科技领域',
+    active: false,
+    chartTypeList: ['饼状图'],
+    chartTitle: '实体清单科技领域分布',
+    data: []
+  },
+  {
+    name: '实体类型',
+    active: false,
+    chartTypeList: ['饼状图'],
+    chartTitle: '实体类型分布',
+    data: []
+  },
+  {
+    name: '实体国家地区',
+    active: false,
+    chartTypeList: ['饼状图'],
+    chartTitle: '实体国家地区分布',
+    data: []
+  },
+  {
+    name: '实体省份',
+    active: false,
+    chartTypeList: ['饼状图'],
+    chartTitle: '实体省份分布',
+    data: []
+  }
+])
+
+// 当前维度下的图表列表
+const curChartTypeList = computed(() => {
+  let arr = staticsDemensionList.value.filter(item => item.active)
+  return arr[0].chartTypeList
+})
+
+// 当前图表标题
+const curChartTitle = computed(() => {
+  let arr = staticsDemensionList.value.filter(item => item.active)
+  return arr[0].chartTitle
+})
+
+// 当前维度
+const curDemension = ref('制裁时间')
+
+// 点击维度item
+const handleClickDemensionItem = (val) => {
+  activeChart.value = ''
+  staticsDemensionList.value.forEach(item => {
+    item.active = false
+  })
+  val.active = true
+  curDemension.value = val.name
+  setTimeout(() => {
+    activeChart.value = val.chartTypeList[0]
+    if (curDemension.value === '制裁时间' && selectedTime.value === '按年度统计') {
+      curChartData.value = val.yearData
+    } else if (curDemension.value === '制裁时间' && selectedTime.value === '按季度统计') {
+      curChartData.value = val.quatarData
+    } else {
+      curChartData.value = val.data
+    }
+  })
+}
+
+// 时间图表 当前选择时间
+const selectedTime = ref('按年度统计')
+// 时间图表-时间列表
+const timeList = ref([
+  {
+    label: '按年度统计',
+    value: '按年度统计'
+  },
+  {
+    label: '按季度统计',
+    value: '按季度统计'
+  },
+  {
+    label: '按月度统计',
+    value: '按月度统计'
+  },
+])
+const handleChangeTime = value => {
+  let curChart = activeChart.value
+  activeChart.value = ''
+  if (value === '按月度统计') {
+    setTimeout(() => {
+      activeChart.value = curChart
+      curChartData.value = staticsDemensionList.value[0].data
+    })
+  } else if (value === '按季度统计') {
+    setTimeout(() => {
+      activeChart.value = curChart
+      curChartData.value = staticsDemensionList.value[0].quatarData
+    })
+  } else {
+    setTimeout(() => {
+      activeChart.value = curChart
+      curChartData.value = staticsDemensionList.value[0].yearData
+    })
+  }
+}
+
+
+// 激活的标签列表
+const activeTagList = computed(() => {
+  const arr = []
+  if (selectedArea.value && selectedArea.value !== '全部领域') {
+    arr.push(
+      {
+        tag: '科技领域',
+        name: selectedArea.value
+      }
+    )
+  }
+  if (selectedDate.value === '自定义') {
+    arr.push(
+      {
+        tag: '制裁时间',
+        name: customTime.value.join('至')
+      }
+    )
+  }
+  if (selectedCountry.value && selectedCountry.value !== '全部国家') {
+    const countryArr = countryList.value.filter(item => item.id === selectedCountry.value)
+    let countryStr = '全部国家'
+    if (countryArr && countryArr.length) {
+      countryStr = countryArr[0].name
+    }
+    arr.push(
+      {
+        tag: '实体国家地区',
+        name: countryStr
+      }
+    )
+  }
+  if (selectedProvince.value && selectedProvince.value !== '全部省份' && (selectedCountry.value === '0101' || selectedCountry.value === '全部国家')) {
+    arr.push(
+      {
+        tag: '实体省份',
+        name: selectedProvince.value
+      }
+    )
+  }
+  if (selectedEntityType.value && selectedEntityType.value !== '全部实体类型') {
+    const entityTypeArr = entityTypeList.value.filter(item => item.id === selectedEntityType.value)
+    let entityTypeStr = '全部类型'
+    if (entityTypeArr && entityTypeArr.length) {
+      entityTypeStr = entityTypeArr[0].name
+    }
+    arr.push(
+      {
+        tag: '实体类型',
+        name: entityTypeStr
+      }
+    )
+  }
+
+  if (isHalfRule.value) {
+    const halfRuleStr = '50%规则'
+    arr.push(
+      {
+        tag: '50%规则',
+        name: halfRuleStr
+      }
+    )
+  }
+
+  if (isCnEntityOnly.value) {
+    const involveStr = '只看中国实体'
+    arr.push(
+      {
+        tag: '只看中国实体',
+        name: involveStr
+      }
+    )
+  }
+
+  return arr
+
+})
+
+// 关闭当前标签
+const handleCloseCurTag = (tag, index) => {
+  switch (tag.tag) {
+    case '科技领域':
+      selectedArea.value = '全部领域'
+      break
+    case '制裁时间':
+      selectedDate.value = ''
+      customTime.value = []
+      break
+    case '实体国家地区':
+      selectedCountry.value = '全部国家'
+      break
+    case '实体省份':
+      selectedProvince.value = '全部省份'
+      break
+    case '实体类型':
+      selectedEntityType.value = '全部实体类型'
+      break
+    case '50%规则':
+      isHalfRule.value = false
+      break
+    case '只看中国实体':
+      isCnEntityOnly.value = false
+      break
+  }
+
+}
+
+const activeChart = ref('')  // 当前激活的图表
+// 切换当前图表
+const handleSwitchActiveChart = val => {
+  activeChart.value = val.name
+}
+// 雷达图数据
+const radarChartData = ref({
+  title: [
+    {
+      name: '航空航天',
+      max: 10
+    },
+    {
+      name: '先进制造',
+      max: 10
+    },
+    {
+      name: '量子科技',
+      max: 10
+    },
+    {
+      name: '人工智能',
+      max: 10
+    },
+    {
+      name: '新材料',
+      max: 10
+    },
+    {
+      name: '集成电路',
+      max: 10
+    },
+  ],
+  data: [
+    {
+      name: "337调查",
+      value: [10, 5, 2, 8, 5, 7
+      ]
+    },
+    {
+      name: "232调查",
+      value: [2, 5, 3, 8, 10, 2]
+    },
+    {
+      name: "301调查",
+      value: [5, 8, 2, 9, 1, 5]
+    }
+  ]
+}
+
+)
+
+
+// 数据- 是否全选
+const isSelectedAll = ref(false)
+// 批量操作-当前操作
+const curOperation = ref('')
+const operationList = ref([
+  {
+    name: 'aaa',
+    id: 'aaa'
+  },
+  {
+    name: 'bbb',
+    id: 'bbb'
+  },
+  {
+    name: 'ccc',
+    id: 'ccc'
+  },
+])
+
+// 科技领域
+const areaPlaceHolder = ref('请选择领域')
+const selectedArea = ref('全部领域')
+const areaList = ref([
+  {
+    name: '全部领域',
+    id: '全部领域'
+  },
+  {
+    name: '人工智能',
+    id: '人工智能'
+  },
+  {
+    name: '生物科技',
+    id: '生物科技'
+  },
+  {
+    name: '新一代通信网络',
+    id: '新一代通信网络'
+  },
+  {
+    name: '量子科技',
+    id: '量子科技'
+  },
+  {
+    name: '新能源',
+    id: '新能源'
+  },
+  {
+    name: '集成电路',
+    id: '集成电路'
+  },
+  {
+    name: '海洋',
+    id: '海洋'
+  },
+  {
+    name: '先进制造',
+    id: '先进制造'
+  },
+  {
+    name: '新材料',
+    id: '新材料'
+  },
+  {
+    name: '航空航天',
+    id: '航空航天'
+  },
+  {
+    name: '太空',
+    id: '太空'
+  },
+  {
+    name: '深海',
+    id: '深海'
+  },
+  {
+    name: '极地',
+    id: '极地'
+  },
+  {
+    name: '核',
+    id: '核'
+  },
+  {
+    name: '其他',
+    id: '其他'
+  },
+])
+const handleSelectArea = (value) => {
+  selectedArea.value = value
+}
+
+// 制裁时间
+const DatePlaceHolder = ref('请选择时间')
+const selectedDate = ref('')
+const dateList = ref([
+  {
+    name: '自定义',
+    id: '自定义'
+  },
+  {
+    name: '近一年',
+    id: '近一年'
+  },
+  {
+    name: '近半年',
+    id: '近半年'
+  },
+  {
+    name: '近三月',
+    id: '近三月'
+  },
+  {
+    name: '近一月',
+    id: '近一月'
+  }
+])
+const customTime = ref([])  // 自定义时间
+const handleCustomDate = value => {
+  customTime.value = value
+}
+const handleSelectDate = (value) => {
+  selectedDate.value = value
+  if (selectedDate.value !== '自定义') {
+    customTime.value = getDateRange(selectedDate.value)
+  }
+}
+
+// 实体国家地区
+const countryList = ref([
+  {
+    name: '全部国家',
+    id: '全部国家'
+  },
+])
+const selectedCountry = ref('全部国家')
+const countryPlaceHolder = ref('请选择实体国家')
+const handleSelectCountry = value => {
+  selectedCountry.value = value
+}
+// 获取国家地区列表
+const handleGetCountryList = async () => {
+  try {
+    const res = await getCountryList()
+    console.log('获取国家列表', res);
+    if (res.code === 200 && res.data) {
+      countryList.value = res.data.map(item => {
+        return {
+          name: item.name,
+          id: item.id
+        }
+      })
+    }
+  } catch (error) {
+
+  }
+}
+
+
+// 实体省份（仅支持中国省份）
+const provinceList = ref([
+  {
+    name: '全部省份',
+    id: '全部省份',
+  }
+])
+const selectedProvince = ref('全部省份')
+const provincePlaceHolder = ref('请选择发布机构')
+const handleSelectProvince = value => {
+  selectedProvince.value = value
+}
+// 获取全部省份列表
+const handleGetProvinceList = async () => {
+  try {
+    const res = await getProvinceList()
+    console.log('获取省份列表', res);
+    if (res && res.length) {
+      provinceList.value = res.map(item => {
+        return {
+          name: item,
+          id: item
+        }
+      })
+    }
+
+  } catch (error) {
+    console.error(error);
+
+  } finally {
+
+  }
+}
+
+// 实体类型列表
+const entityTypeList = ref([
+  {
+    name: '全部实体类型',
+    id: '全部实体类型'
+  }
+])
+const selectedEntityType = ref('全部实体类型')
+const entityTypePlaceHolder = ref('请选择实体类型')
+const handleSelectEntityType = value => {
+  selectedEntityType.value = value
+}
+// 获取实体类型列表
+const handleGetEntityTypes = async () => {
+  try {
+    const res = await getEntityTypes()
+    console.log('获取实体类型列表');
+    if (res.code === 200 && res.data) {
+      entityTypeList.value = res.data.map(item => {
+        return {
+          name: item.name,
+          id: item.code
+        }
+      })
+    }
+
+  } catch (error) {
+
+  }
+}
+
+// 是否50%规则
+const isHalfRule = ref(false)
+// 是否只看中国实体
+const isCnEntityOnly = ref(false)
+
+// 清空条件
+const handleClear = () => {
+  selectedArea.value = '全部领域'
+  selectedDate.value = ''
+  customTime.value = []
+  selectedCountry.value = '全部国家'
+  selectedProvince.value = '全部省份'
+  selectedEntityType.value = '全部实体类型'
+  isHalfRule.value = false
+  isCnEntityOnly.value = false
+  ElMessage.success('已清空条件！')
+}
+
+// 确定
+const handleConfirm = () => {
+  currentPage.value = 1
+  fetchTableData()
+}
+
+// 展开全部 / 收起
+const isFolderAll = ref(false)
+const handleSwitchFolderAll = () => {
+  isFolderAll.value = !isFolderAll.value
+}
+
+const tableRef = ref(null)
+
+// 表格数据
+const tableData = ref([
+])
+
+const releaseTimeList = ref([
+  {
+    label: "按发布时间倒序",
+    value: true
+  },
+  {
+    label: "按发布时间升序",
+    value: false
+  }
+]);
+const isSort = ref(true); // true 倒序  false 升序
+const handlePxChange = val => {
+  fetchTableData()
+};
+
+const currentPage = ref(1);
+const pageSize = ref(10)
+
+// 存储选中的数据（跨页）[citation:3][citation:8]
+const selectedMap = ref(new Map())  // 使用 Map 存储，key 为唯一 id
+
+// 计算已选中的条数
+const selectedCount = computed(() => selectedMap.value.size)
+
+// 获取当前页表格数据（示例）
+const fetchTableData = async () => {
+  // isSelectedAll.value = false
+  // selectedMap.value.clear()
+  loading.value = true
+  // 调用接口获取数据...
+  const params = {
+    page: currentPage.value,
+    size: pageSize.value,
+    // keyword: '',
+    type: 10,  // 实体清单
+    domains: selectedArea.value === '全部领域' ? null : [selectedArea.value],  // 科技领域
+    proposedDateStart: customTime.value[0] ? customTime.value[0] : null,
+    proposedDateEnd: customTime.value[1] ? customTime.value[1] : null,
+    countryId: selectedCountry.value === '全部国家' ? null : selectedCountry.value,  // 国家地区
+    provinceName: selectedProvince.value === '全部省份' ? null : selectedProvince.value,  // 实体省份
+    entityTypeCode: selectedEntityType.value === '全部实体类型' ? null : selectedEntityType.value,  // 实体类别
+    ratio: isHalfRule.value ? 'Y' : null,  // 50%规则
+    isInvolveCn: isCnEntityOnly.value ? 'Y' : null,  // 是否只看中国实体
+    sort: isSort.value ? 0 : 1     // 0 先按分数降序 后按时间降序  1 先按分数降序，再按时间升序
+  }
+  try {
+    const res = await search(params)
+    console.log('搜索结果', res);
+    if (res.code === 200 && res.data) {
+      tableData.value = res.data.records
+      totalNum.value = res.data.total
+      staticsDemensionList.value[0].data = {
+        dataX: Object.keys(res.data.aggregationsDate),
+        dataY: Object.values(res.data.aggregationsDate).map(value => Number(value))
+      }
+      staticsDemensionList.value[0].quatarData = {
+        dataX: Object.keys(res.data.aggregationsQuarter),
+        dataY: Object.values(res.data.aggregationsQuarter).map(value => Number(value))
+      }
+      staticsDemensionList.value[0].yearData = {
+        dataX: Object.keys(res.data.aggregationsYear),
+        dataY: Object.values(res.data.aggregationsYear).map(value => Number(value))
+      }
+      staticsDemensionList.value[1].data = Object.entries(res.data.aggregationsDomain).map(([key, value]) => ({
+        name: key,
+        value: Number(value)
+      }))
+      staticsDemensionList.value[2].data = Object.entries(res.data.aggregationSentityTypeCode).map(([key, value]) => ({
+        name: key,
+        value: Number(value)
+      }))
+      staticsDemensionList.value[3].data = Object.entries(res.data.aggregationCountryId).map(([key, value]) => ({
+        name: key,
+        value: Number(value)
+      }))
+      staticsDemensionList.value[4].data = Object.entries(res.data.aggregationProvinceName).map(([key, value]) => ({
+        name: key,
+        value: Number(value)
+      }))
+
+    }
+
+    const curDemensionItem = staticsDemensionList.value.filter(item => {
+      return item.name === curDemension.value
+    })[0]
+
+    activeChart.value = ''
+
+    setTimeout(() => {
+      activeChart.value = curDemensionItem.chartTypeList[0]
+      curChartData.value = curDemensionItem.data
+    })
+    loading.value = false
+  } catch (error) {
+    loading.value = false
+  }
+  // tableData.value = res.data
+  // total.value = res.total
+
+  // 数据加载后，回显已选中的行 
+  nextTick(() => {
+    tableData.value.forEach(row => {
+      if (selectedMap.value.has(row.id)) {
+        tableRef.value?.toggleRowSelection(row, true)
+      }
+    })
+  })
+}
+const allData = ref([])
+
+// 获取筛选条件下全部表格数据
+const fetchAllData = async () => {
+  const params = {
+    page: 1,
+    size: 9999,
+    type: 10,  // 实体清单
+    domains: selectedArea.value === '全部领域' ? null : [selectedArea.value],  // 科技领域
+    proposedDateStart: customTime.value[0] ? customTime.value[0] : null,
+    proposedDateEnd: customTime.value[1] ? customTime.value[1] : null,
+    countryId: selectedCountry.value === '全部国家' ? null : selectedCountry.value,  // 国家地区
+    provinceName: selectedProvince.value === '全部省份' ? null : selectedProvince.value,  // 实体省份
+    entityTypeCode: selectedEntityType.value === '全部实体类型' ? null : selectedEntityType.value,  // 实体类别
+    ratio: isHalfRule.value ? 'Y' : null,  // 50%规则
+    isInvolveCn: isCnEntityOnly.value ? 'Y' : null,  // 是否只看中国实体
+    sort: isSort.value ? 0 : 1     // 0 先按分数降序 后按时间降序  1 先按分数降序，再按时间升序
+  }
+  try {
+    const res = await search(params)
+    console.log('搜索结果', res);
+    if (res.code === 200 && res.data) {
+      allData.value = res.data.records
+    }
+
+  } catch (error) {
+    ElMessage.error('加载全部数据出错！')
+  }
+}
+
+// 单选事件 
+const handleSelect = (selection, row) => {
+  if (selection.some(item => item.id === row.id)) {
+    // 选中：添加到 Map
+    selectedMap.value.set(row.id, row)
+  } else {
+    // 取消选中：从 Map 移除
+    selectedMap.value.delete(row.id)
+  }
+}
+
+// 表格自带 当前页 全选/全不选事件 
+const handleSelectAll = (selection) => {
+  if (selection.length > 0) {
+    // 全选：将当前页所有数据添加到 Map
+    tableData.value.forEach(row => {
+      if (!selectedMap.value.has(row.id)) {
+        selectedMap.value.set(row.id, row)
+      }
+    })
+  } else {
+    // 全不选：从 Map 中移除当前页的所有数据
+    tableData.value.forEach(row => {
+      selectedMap.value.delete(row.id)
+    })
+  }
+}
+
+// 处理选择变化（用于统计）
+const handleSelectionChange = (val) => {
+  // 这里可以做一些额外的处理，但主要统计使用 selectedMap
+  console.log('当前页选中数量:', val.length)
+}
+
+// 全选当前页按钮
+const handleSelectAllPage = () => {
+  if (tableData.value.length === 0) return
+
+  // 检查当前页是否已全选
+  const currentPageSelected = tableData.value.every(row =>
+    selectedMap.value.has(row.id)
+  )
+
+  if (currentPageSelected) {
+    // 已全选，则不动当前页的全选
+    tableData.value.forEach(row => {
+      tableRef.value.toggleRowSelection(row, false)
+      // selectedMap.value.delete(row.id)
+    })
+  } else {
+    // 未全选，则全选当前页
+    tableData.value.forEach(row => {
+      tableRef.value.toggleRowSelection(row, true)
+      if (!selectedMap.value.has(row.id)) {
+        selectedMap.value.set(row.id, row)
+      }
+    })
+  }
+}
+
+// 全选最大1万条提示
+const isShowAllDataMaxLengthTip = ref(false)
+const loading = ref(false)  // 加载数据loading
+
+// 处理 全选(全部数据)
+const handleSelectAllChange = async () => {
+  if (isSelectedAll.value) {
+
+    if (totalNum.value > 10000) {
+      isShowAllDataMaxLengthTip.value = true
+    }
+    loading.value = true
+
+    await fetchAllData()
+    handleSelectAllPage()
+    allData.value.forEach(row => {
+      if (!selectedMap.value.has(row.id)) {
+        selectedMap.value.set(row.id, row)
+      }
+    })
+    loading.value = false
+  } else {
+    handleClearAll()
+  }
+
+}
+
+// 清空所有选择
+const handleClearAll = () => {
+  isSelectedAll.value = false
+  selectedMap.value.clear()
+  tableRef.value?.clearSelection()
+}
+
+// 翻页
+const handleCurrentChange = async (val) => {
+  currentPage.value = val
+  await fetchTableData()
+  if (isSelectedAll.value) {
+    handleSelectAllPage()
+  }
+}
+
+
+// 监听数据变化，回显选中状态 [citation:4][citation:8]
+watch(tableData, () => {
+  nextTick(() => {
+    tableData.value.forEach(row => {
+      if (selectedMap.value.has(row.id)) {
+        tableRef.value?.toggleRowSelection(row, true)
+      }
+    })
+  })
+})
+
+// 当前图表数据
+const curChartData = ref(null)
+
+// 下载当前图表数据
+const handleDownloadCurChartData = () => {
+  const jsonStr = JSON.stringify(curChartData.value, null, 2);
+  const blob = new Blob([jsonStr], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = 'chartData.json';
+  link.click();
+
+  URL.revokeObjectURL(url);
+}
+
+// 跳转到当前页 初始化筛选条件
+const initParam = () => {
+  const hasQuery = Object.keys(route.query).length > 0;
+  if (hasQuery) {
+    selectedArea.value = route.query.domains ? route.query.domains : '全部领域'
+
+    if (route.query.selectedDate && Array.isArray(JSON.parse(route.query.selectedDate)) && JSON.parse(route.query.selectedDate).length) {
+      selectedDate.value = '自定义'
+      customTime.value = JSON.parse(route.query.selectedDate)
+    }
+
+    selectedProvince.value = route.query.selectedProvince ? provinceList.value.filter(item => item.name.indexOf(route.query.selectedProvince) > -1)[0].name : '全部省份'
+    selectedCountry.value = route.query.selectedCountryId ? route.query.selectedCountryId : '全部国家'
+
+    isHalfRule.value = route.query.isHalfRule ? true : false
+
+    isCnEntityOnly.value = route.query.isCnEntityOnly ? true : false
+
+    selectedEntityType.value = route.query.selectedEntityType ? entityTypeList.value.filter(item => item.name === route.query.selectedEntityType)[0].id : '全部实体类型'
+
+    const query = route.query;
+    if (Object.keys(query).length > 0) {
+      sessionStorage.setItem('entityRouteQuery', JSON.stringify(query));
+    }
+  } else {
+    const savedQuery = JSON.parse(sessionStorage.getItem('entityRouteQuery') || '{}');
+    selectedArea.value = savedQuery.domains ? savedQuery.domains : '全部领域'
+    if (savedQuery.selectedDate && Array.isArray(JSON.parse(savedQuery.selectedDate)) && JSON.parse(savedQuery.selectedDate).length) {
+      selectedDate.value = '自定义'
+      customTime.value = JSON.parse(savedQuery.selectedDate)
+    }
+    isHalfRule.value = savedQuery.isHalfRule ? true : false
+    selectedProvince.value = savedQuery.selectedProvince ? provinceList.value.filter(item => item.name.indexOf(savedQuery.selectedProvince) > -1)[0].name : '全部省份'
+    selectedCountry.value = route.query.selectedCountryId ? route.query.selectedCountryId : '全部国家'
+
+    isCnEntityOnly.value = savedQuery.isCnEntityOnly ? true : false
+
+    selectedEntityType.value = savedQuery.selectedEntityType ? entityTypeList.value.filter(item => item.name === savedQuery.selectedEntityType)[0].id : '全部实体类型'
+  }
+
+}
+
+// 跳转机构详情
+const handleClickToDetail = (curEntity) => {
+  console.log('curEntity', curEntity);
+
+  window.sessionStorage.setItem("decreeId", curEntity.id);
+  window.sessionStorage.setItem("curTabName", curEntity.title);
+  const route = router.resolve({
+				name: "companyPages",
+				params: {
+					id: curEntity.id
+				}
+			});
+  window.open(route.href, "_blank");
+};
+
+// 跳转机构详情
+const handleOrgClick = item => {
+  console.log('item', item);
+
+  window.sessionStorage.setItem("curTabName", item.organizationName);
+  const route = router.resolve({
+    path: "/institution",
+    query: {
+      id: item.organizationId
+    }
+  });
+  window.open(route.href, "_blank");
+};
+
+// 导出
+const handleExport = () => {
+  if (!selectedCount.value) {
+    ElMessage.warning('请选择至少一项数据！')
+    return
+  }
+  console.log(selectedMap.value);
+  const arr = Array.from(selectedMap.value);
+
+  const jsonStr = JSON.stringify(arr, null, 2);
+  const blob = new Blob([jsonStr], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = 'export.json';
+  link.click();
+
+  URL.revokeObjectURL(url);
+};
+
+onMounted(async () => {
+  await handleGetProvinceList()  // 获取省份列表
+  await handleGetCountryList()  // 获取国家列表 
+  await handleGetEntityTypes() // 获取实体类型列表
+  initParam()
+  // 初始化
+  await fetchTableData()
+
+
+})
 
 </script>
 
@@ -35,6 +1149,8 @@ const totalNum = ref(12)
 .countrybill-wrapper {
   width: 1600px;
   height: 968px;
+  overflow: hidden;
+  overflow-y: auto;
 
   .headere-box {
     width: 1568px;
@@ -44,19 +1160,53 @@ const totalNum = ref(12)
     border: 1px solid var(--bg-black-5);
     margin: 16px auto;
   }
+
   .header-box {
     width: 1568px;
-      height: 112px;
+    min-height: 112px;
     border-radius: 10px;
     background: rgb(255, 255, 255);
     border: 1px solid var(--bg-black-5);
     margin: 16px auto;
+    box-sizing: border-box;
+    padding: 16px 24px;
+
+    .header-top {
+      min-height: 28px;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px 42px;
+
+      // transition: all ease 1s;
+      .check-box {
+        display: flex;
+        width: 348px;
+        height: 28px;
+        align-items: center;
+        gap: 8px;
+
+        .check-box-left {
+          width: 100px;
+          color: var(--text-primary-65-color);
+        }
+      }
     }
 
-  .main-box {
 
+    .header-footer {
+      margin-top: 16px;
+      display: flex;
+      justify-content: space-between;
 
+      .header-footer-left {
+        display: flex;
+        justify-content: space-between;
+        gap: 8px;
+      }
+    }
+  }
 
+  .chart-main-box {
     .info-box {
       margin: 0 auto;
       width: 1568px;
@@ -66,15 +1216,9 @@ const totalNum = ref(12)
 
       .switch-box {
         width: 160px;
-        border-radius: 20px;
-        border: 1px solid var(--color-primary-100);
-        height: 30px;
+        height: 28px;
+        border: none;
         cursor: pointer;
-
-        img {
-          width: 100%;
-          height: 100%;
-        }
       }
 
       .num-box {
@@ -90,7 +1234,193 @@ const totalNum = ref(12)
       border-radius: 10px;
       background: rgba(255, 255, 255);
       border: 1px solid var(--bg-black-5);
+
+      .content-header {
+        margin: 16px 24px;
+        width: 1520px;
+        height: 28px;
+      }
+
+      .content-main {
+        width: 1520px;
+        margin: 0 auto;
+      }
+    }
+  }
+
+  .data-main-box {
+    width: 1568px;
+    min-height: 810px;
+    border-radius: 10px;
+    background: var(--bg-white-100);
+    margin: 0 auto;
+    margin-bottom: 20px;
+    overflow: hidden;
+
+    .data-main-box-header {
+      margin: 16px auto;
+      width: 1520px;
+      height: 30px;
+      display: flex;
+      justify-content: space-between;
+
+      .switch-box {
+        width: 160px;
+        height: 28px;
+        border: none;
+        cursor: pointer;
+      }
+
+      .num-box {
+        box-sizing: border-box;
+        padding: 2px 0;
+        color: var(--color-red-100);
+      }
+    }
+
+    .data-main-box-main {
+      width: 1520px;
+      // height: 633px;
+      min-height: 680px;
+      border-radius: 10px;
+      border: 1px solid var(--bg-black-5);
+      margin: 0 auto;
+
+      .data-main-box-main-header {
+        height: 48px;
+        background: var(--bg-black-2);
+        display: flex;
+        justify-content: space-between;
+
+        .header-left {
+          margin-left: 16px;
+          height: 48px;
+          display: flex;
+          gap: 16px;
+          align-items: center;
+
+          .header-left-item2 {
+            color: var(--color-primary-100);
+            display: flex;
+            gap: 8px;
+
+          }
+
+          .header-left-item3 {
+            color: var(--color-orange-100);
+          }
+
+          .cancel {
+            cursor: pointer;
+          }
+        }
+
+        .header-right {
+          margin-right: 16px;
+          display: flex;
+          gap: 8px;
+          align-items: center;
+
+          .header-right-item {
+            height: 30px;
+            padding: 5px 16px;
+            border: 1px solid var(--bg-black-10);
+            border-radius: 4px;
+            background: var(--bg-white-100);
+            cursor: pointer;
+          }
+
+          .item1 {
+            display: flex;
+            gap: 2px;
+            justify-content: center;
+            align-items: center;
+
+            &:hover {
+              background: var(--color-primary-2);
+            }
+
+            .icon {
+              width: 16px;
+              height: 16px;
+
+              img {
+                width: 100%;
+                height: 100%;
+              }
+            }
+
+            .text {
+              color: var(--text-primary-65-color);
+            }
+          }
+
+          .item2 {}
+
+          .item3 {}
         }
       }
+
+      .data-main-box-main-content {}
+    }
+
+    .data-main-box-footer {
+      margin: 16px auto 0;
+      height: 40px;
+      width: 1520px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+}
+
+.date-column {
+  background-color: #ecf5ff;
+
+  .tag-box {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    width: 490px;
+
+  }
+}
+
+.date-column .cell {
+  color: #409eff !important;
+  font-weight: 500;
+}
+
+.title-item {
+  color: var(--text-primary-80-color);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--color-primary-100);
+    text-decoration: underline;
+  }
+}
+
+.person-item {
+  color: var(--color-primary-100);
+  cursor: pointer;
+
+  &:hover {
+    font-weight: bold;
+    text-decoration: underline;
+  }
+}
+
+:deep(.el-table__header-wrapper) {
+  // background-color: #f5f7fa;
+  height: 48px;
+
+}
+
+:deep(.el-table__header th) {
+  // background-color: #f5f7fa;
+  color: var(--text-primary-50-color);
+  font-weight: bold;
 }
 </style>
\ No newline at end of file

src/views/dataLibrary/index.vue

 <template>
 	<div class="data-library-wrapper">
-		<!-- <div class="data-library-header">
-      <div class="header-left">
-        <div class="icon">
-          <img src="@/assets/icons/overview/logo.png" alt="">
-        </div>
-        <div class="title text-title-1-show">{{ '数据资源库' }}</div>
-      </div>
-      <div class="header-right">
-        <div class="search-box"></div>
-        <div class="info-box" @click="handleClickToolBox">
-          <div class="mail">
-            <img src="@/assets/icons/overview/mail.png" alt="" />
-          </div>
-          <div class="user">
-            <img src="@/assets/icons/overview/user.png" alt="" />
-          </div>
-          <div class="name">{{ "管理员" }}</div>
-        </div>
-      </div>
-    </div> -->
 		<div class="data-library-main">
 			<div class="data-library-sider">
 				<div class="sider-item-box" v-for="(item, index) in siderList" :key="index">
@@ -431,10 +411,6 @@ const handleCloseCurTab = (tab, index) => {
 	}
 };
 
-const handleClickToolBox = () => {
-	ElMessage.warning("当前功能正在开发中，敬请期待！");
-};
-
 onMounted(() => {
 	const path = route.path;
 	console.log(decodeURI(route.fullPath));
@@ -548,7 +524,7 @@ onBeforeUnmount(() => {
 	if (timer.value) {
 		clearTimeout(timer.value);
 	}
-	localStorage.setItem('visitedViews', [])
+	sessionStorage.setItem('visitedViews', [])
 });
 </script>
 
@@ -583,7 +559,6 @@ onBeforeUnmount(() => {
 					height: 100%;
 				}
 			}
-
 			.title {
 				color: var(--color-primary-100);
 			}

src/views/dataLibrary/institution/index.vue

@@ -5,8 +5,8 @@
         <SelectBox :placeholder-name="DatePlaceHolder" select-title="成立时间" :select-list="dateList"
           :select-name="selectedDate" :custom-time="customTime" @update:select-text="handleSelectDate"
           @update:custom-time="handleCustomDate" />
-        <SelectBox :placeholder-name="countryPlaceHolder" select-title="国家地区"
-          :select-list="countryList" :select-name="selectedCountry" @update:select-text="handleSelectCountry" />
+        <SelectBox :placeholder-name="countryPlaceHolder" select-title="国家地区" :select-list="countryList"
+          :select-name="selectedCountry" @update:select-text="handleSelectCountry" />
       </div>
       <div class="header-footer">
         <div class="header-footer-left">
@@ -14,15 +14,15 @@
             @close="handleCloseCurTag(tag, index)" />
         </div>
         <div class="header-footer-right">
-          <HeaderBtnBox :isShowAll="isFolderAll" :isShowAllBtn="false" @show-all="handleSwitchFolderAll" @clear="handleClear"
-            @confirm="handleConfirm" />
+          <HeaderBtnBox :isShowAll="isFolderAll" :isShowAllBtn="false" @show-all="handleSwitchFolderAll"
+            @clear="handleClear" @confirm="handleConfirm" />
         </div>
       </div>
     </div>
-    <div class="chart-main-box" v-if="isShowChart">
+    <div class="chart-main-box" v-if="isShowChart"  v-loading="loading" element-loading-text="数据加载中，请稍候...">
       <div class="info-box">
         <div class="switch-box" @click="handleSwitchChartData">
-          <img src="@/views/dataLibrary/assets/icons/chart-active.svg" alt="">
+          <DataChartSwitchBox :is-show-data="!isShowChart" />
         </div>
         <div class="num-box text-title-3-bold">
           {{ `共 ${totalNum} 条数据` }}
@@ -54,10 +54,10 @@
         </div>
       </div>
     </div>
-    <div class="data-main-box" v-else>
+    <div class="data-main-box" v-else  v-loading="loading" element-loading-text="数据加载中，请稍候...">
       <div class="data-main-box-header">
         <div class="switch-box" @click="handleSwitchChartData">
-          <img src="@/views/dataLibrary/assets/icons/data-active.svg" alt="">
+          <DataChartSwitchBox :is-show-data="!isShowChart" />
         </div>
         <div class="num-box text-title-3-bold">
           {{ `共 ${totalNum} 条数据` }}
@@ -99,29 +99,24 @@
             </div>
           </div>
         </div>
-        <div class="data-main-box-main-content" v-loading="loading" element-loading-text="数据加载中，请稍候...">
+        <div class="data-main-box-main-content">
           <el-table ref="tableRef" :data="tableData" row-key="id" @selection-change="handleSelectionChange"
             @select="handleSelect" @select-all="handleSelectAll" style="width: 100%" :row-style="{ height: '52px' }">
             <el-table-column type="selection" width="40" />
-            <el-table-column label="实体名称" width="620">
+            <el-table-column label="实体名称" width="540">
               <template #default="scope">
                 <span class="title-item text-compact-bold" @click="handleClickToDetail(scope.row)">{{
                   scope.row.originalTitle
                 }}</span>
               </template>
             </el-table-column>
-            <el-table-column label="成立时间" class-name="date-column">
+            <el-table-column label="所属国家地区" width="240">
               <template #default="scope">{{ scope.row.date }}</template>
             </el-table-column>
-            <el-table-column label="涉及领域" width="500" class-name="date-column">
-              <template #default="scope">
-                <div class="tag-box">
-                  <AreaTag v-for="tag, index in scope.row.domains" :key="index" :tagName="tag" />
-                </div>
-
-              </template>
+            <el-table-column label="主官名称" width="180">
+              <template #default="scope">{{ scope.row.date }}</template>
             </el-table-column>
-            <el-table-column label="实体类型" width="100">
+            <el-table-column label="最新动态">
               <template #default="scope">{{ scope.row.typeStr }}</template>
             </el-table-column>
           </el-table>
@@ -146,6 +141,7 @@ import PieChart from '../components/PieChart/index.vue'
 import BarChart from '../components/BarChart/index.vue'
 import RaderChart from '../components/RadarChart/idnex.vue'
 import SelectBox from '../components/SelectBox/index.vue'
+import DataChartSwitchBox from '../components/dataChartSwitchBox/index.vue'
 import { useRoute } from "vue-router";
 import router from '@/router'
 
@@ -156,14 +152,6 @@ import { getProvinceList, getCountryList, getEntityTypes } from '@/api/comprehen
 
 const route = useRoute();
 
-const isShowProvinceBox = computed(() => {
-  let isShow = false
-  if (isFolderAll.value && (selectedCountry.value === '0101' || selectedCountry.value === '全部国家')) {
-    isShow = true
-  }
-  return isShow
-})
-
 // 图表/数据
 const isShowChart = ref(false)
 // 点击切换数据/图表
@@ -174,17 +162,17 @@ const handleSwitchChartData = () => {
       return item.name === curDemension.value
     })[0]
     // setTimeout(() => {
-    activeChart.value = curDemensionItem.chartTypeList[0]
+    activeChart.value = curDemensionItem.chartTypeList[0].name
     if (curDemension.value === '成立时间') {
       if (selectedTime.value === '按月度统计') {
-        curChartData.value = curDemensionItem.data
+        curChartData.value = curDemensionItem.chartTypeList[0].data
       } else if (selectedTime.value === '按季度统计') {
-        curChartData.value = curDemensionItem.quatarData
+        curChartData.value = curDemensionItem.chartTypeList[0].quatarData
       } else {
-        curChartData.value = curDemensionItem.yearData
+        curChartData.value = curDemensionItem.chartTypeList[0].yearData
       }
     } else {
-      curChartData.value = curDemensionItem.data
+      curChartData.value = curDemensionItem.chartTypeList[0].data
     }
     // })
   }
@@ -198,8 +186,26 @@ const staticsDemensionList = ref([
   {
     name: '成立时间',
     active: true,
-    chartTypeList: ['折线图', '柱状图'],
-    chartTitle: '实体清单成立时间变化趋势',
+    chartTypeList: [
+      {
+        name: '折线图',
+        data: {
+          dataX: [],
+          dataY: []
+        },
+        quatarData: {
+          dataX: [],
+          dataY: []
+        },
+        yearData: {
+          dataX: [],
+          dataY: []
+        }
+
+      },
+      {
+        name: '柱状图',
+
         data: {
           dataX: [],
           dataY: []
@@ -212,35 +218,27 @@ const staticsDemensionList = ref([
           dataX: [],
           dataY: []
         }
+
+      }],
+    chartTitle: '实体清单成立时间变化趋势',
   },
-  // {
-  //   name: '科技领域',
-  //   active: false,
-  //   chartTypeList: ['饼状图'],
-  //   chartTitle: '实体清单科技领域分布',
-  //   data: []
-  // },
-  // {
-  //   name: '实体类型',
-  //   active: false,
-  //   chartTypeList: ['饼状图'],
-  //   chartTitle: '实体类型分布',
-  //   data: []
-  // },
+
   {
     name: '所属国家地区',
     active: false,
-    chartTypeList: ['饼状图'],
-    chartTitle: '所属国家地区分布',
+    chartTypeList: [{
+      name: '饼状图',
       data: []
     },
-  // {
-  //   name: '实体省份',
-  //   active: false,
-  //   chartTypeList: ['饼状图'],
-  //   chartTitle: '实体省份分布',
-  //   data: []
-  // }
+    {
+      name: '柱状图',
+      data: {
+        dataX: [],
+        dataY: []
+      }
+    }],
+    chartTitle: '所属国家地区分布',
+  },
 ])
 
 // 当前维度下的图表列表
@@ -267,13 +265,13 @@ const handleClickDemensionItem = (val) => {
   val.active = true
   curDemension.value = val.name
   setTimeout(() => {
-    activeChart.value = val.chartTypeList[0]
+    activeChart.value = val.chartTypeList[0].name
     if (curDemension.value === '成立时间' && selectedTime.value === '按年度统计') {
-      curChartData.value = val.yearData
+      curChartData.value = val.chartTypeList[0].yearData
     } else if (curDemension.value === '成立时间' && selectedTime.value === '按季度统计') {
-      curChartData.value = val.quatarData
+      curChartData.value = val.chartTypeList[0].quatarData
     } else {
-      curChartData.value = val.data
+      curChartData.value = val.chartTypeList[0].data
     }
   })
 }
@@ -301,17 +299,17 @@ const handleChangeTime = value => {
   if (value === '按月度统计') {
     setTimeout(() => {
       activeChart.value = curChart
-      curChartData.value = staticsDemensionList.value[0].data
+      curChartData.value = staticsDemensionList.value[0].chartTypeList[0].data
     })
   } else if (value === '按季度统计') {
     setTimeout(() => {
       activeChart.value = curChart
-      curChartData.value = staticsDemensionList.value[0].quatarData
+      curChartData.value = staticsDemensionList.value[0].chartTypeList[0].quatarData
     })
   } else {
     setTimeout(() => {
       activeChart.value = curChart
-      curChartData.value = staticsDemensionList.value[0].yearData
+      curChartData.value = staticsDemensionList.value[0].chartTypeList[0].yearData
     })
   }
 }
@@ -364,6 +362,14 @@ const activeChart = ref('')  // 当前激活的图表
 // 切换当前图表
 const handleSwitchActiveChart = val => {
   activeChart.value = val.name
+  const curChartItem = curChartTypeList.value.filter(item => item.name === val.name)[0]
+  if (curDemension.value === '成立时间' && selectedTime.value === '按年度统计') {
+    curChartData.value = curChartItem.yearData
+  } else if (curDemension.value === '成立时间' && selectedTime.value === '按季度统计') {
+    curChartData.value = curChartItem.quatarData
+  } else {
+    curChartData.value = curChartItem.data
+  }
 }
 
 // 数据- 是否全选
@@ -524,34 +530,38 @@ const fetchTableData = async () => {
     if (res.code === 200 && res.data) {
       tableData.value = res.data.records
       totalNum.value = res.data.total
-      staticsDemensionList.value[0].data = {
+      staticsDemensionList.value[0].chartTypeList[0].data = {
         dataX: Object.keys(res.data.aggregationsDate),
         dataY: Object.values(res.data.aggregationsDate).map(value => Number(value))
       }
-      staticsDemensionList.value[0].quatarData = {
+      staticsDemensionList.value[0].chartTypeList[0].quatarData = {
         dataX: Object.keys(res.data.aggregationsQuarter),
         dataY: Object.values(res.data.aggregationsQuarter).map(value => Number(value))
       }
-      staticsDemensionList.value[0].yearData = {
+      staticsDemensionList.value[0].chartTypeList[0].yearData = {
         dataX: Object.keys(res.data.aggregationsYear),
         dataY: Object.values(res.data.aggregationsYear).map(value => Number(value))
       }
-      staticsDemensionList.value[1].data = Object.entries(res.data.aggregationCountryId).map(([key, value]) => ({
+      staticsDemensionList.value[0].chartTypeList[1].data = {
+        dataX: Object.keys(res.data.aggregationsDate),
+        dataY: Object.values(res.data.aggregationsDate).map(value => Number(value))
+      }
+      staticsDemensionList.value[0].chartTypeList[1].quatarData = {
+        dataX: Object.keys(res.data.aggregationsQuarter),
+        dataY: Object.values(res.data.aggregationsQuarter).map(value => Number(value))
+      }
+      staticsDemensionList.value[0].chartTypeList[1].yearData = {
+        dataX: Object.keys(res.data.aggregationsYear),
+        dataY: Object.values(res.data.aggregationsYear).map(value => Number(value))
+      }
+      staticsDemensionList.value[1].chartTypeList[0].data = Object.entries(res.data.aggregationCountryId).map(([key, value]) => ({
         name: key,
         value: Number(value)
       }))
-      // staticsDemensionList.value[2].data = Object.entries(res.data.aggregationSentityTypeCode).map(([key, value]) => ({
-      //   name: key,
-      //   value: Number(value)
-      // }))
-      // staticsDemensionList.value[3].data = Object.entries(res.data.aggregationCountryId).map(([key, value]) => ({
-      //   name: key,
-      //   value: Number(value)
-      // }))
-      // staticsDemensionList.value[4].data = Object.entries(res.data.aggregationProvinceName).map(([key, value]) => ({
-      //   name: key,
-      //   value: Number(value)
-      // }))
+      staticsDemensionList.value[1].chartTypeList[1].data = {
+        dataX: Object.keys(res.data.aggregationCountryId),
+        dataY: Object.values(res.data.aggregationCountryId).map(value => Number(value))
+      }
 
     }
 
@@ -562,8 +572,18 @@ const fetchTableData = async () => {
     activeChart.value = ''
 
     setTimeout(() => {
-      activeChart.value = curDemensionItem.chartTypeList[0]
-      curChartData.value = curDemensionItem.data
+      activeChart.value = curDemensionItem.chartTypeList[0].name
+      if (curDemension.value === '成立时间') {
+        if (selectedTime.value === '按月度统计') {
+          curChartData.value = curDemensionItem.chartTypeList[0].data
+        } else if (selectedTime.value === '按季度统计') {
+          curChartData.value = curDemensionItem.chartTypeList[0].quatarData
+        } else {
+          curChartData.value = curDemensionItem.chartTypeList[0].yearData
+        }
+      } else {
+        curChartData.value = curDemensionItem.chartTypeList[0].data
+      }
     })
     loading.value = false
   } catch (error) {
@@ -875,24 +895,26 @@ onMounted(async () => {
   }
 
   .chart-main-box {
+    width: 1568px;
+    height: 809px;
+    margin: 0 auto;
+    background: rgba(255, 255, 255);
+    border: 1px solid var(--bg-black-5);
+    border-radius: 10px;
+
     .info-box {
       margin: 0 auto;
-      width: 1568px;
+      margin-top: 16px;
+      width: 1520px;
       height: 30px;
       display: flex;
       justify-content: space-between;
 
       .switch-box {
         width: 160px;
-        border-radius: 20px;
-        border: 1px solid var(--color-primary-100);
-        height: 30px;
+        height: 28px;
+        border: none;
         cursor: pointer;
-
-        img {
-          width: 100%;
-          height: 100%;
-        }
       }
 
       .num-box {
@@ -903,14 +925,13 @@ onMounted(async () => {
     .content-box {
       margin: 0 auto;
       margin-top: 16px;
-      width: 1568px;
-      height: 766px;
-      border-radius: 10px;
-      background: rgba(255, 255, 255);
-      border: 1px solid var(--bg-black-5);
+      width: 1520px;
+      height: 726px;
+      border: none;
+
 
       .content-header {
-        margin: 16px 24px;
+        margin: 16px 0;
         width: 1520px;
         height: 28px;
       }
@@ -940,15 +961,9 @@ onMounted(async () => {
 
       .switch-box {
         width: 160px;
-        border-radius: 20px;
-        border: 1px solid var(--color-primary-100);
-        height: 30px;
+        height: 28px;
+        border: none;
         cursor: pointer;
-
-        img {
-          width: 100%;
-          height: 100%;
-        }
       }
 
       .num-box {

src/views/dataLibrary/news/index.vue

@@ -21,10 +21,10 @@
         </div>
       </div>
     </div>
-    <div class="chart-main-box" v-if="isShowChart">
+    <div class="chart-main-box" v-if="isShowChart" v-loading="loading" element-loading-text="数据加载中，请稍候...">
       <div class="info-box">
         <div class="switch-box" @click="handleSwitchChartData">
-          <img src="@/views/dataLibrary/assets/icons/chart-active.svg" alt="">
+          <DataChartSwitchBox :is-show-data="!isShowChart" />
         </div>
         <div class="num-box text-title-3-bold">
           {{ `共 ${totalNum} 条数据` }}
@@ -56,10 +56,10 @@
         </div>
       </div>
     </div>
-    <div class="data-main-box" v-else>
+    <div class="data-main-box" v-else v-loading="loading" element-loading-text="数据加载中，请稍候...">
       <div class="data-main-box-header">
         <div class="switch-box" @click="handleSwitchChartData">
-          <img src="@/views/dataLibrary/assets/icons/data-active.svg" alt="">
+          <DataChartSwitchBox :is-show-data="!isShowChart" />
         </div>
         <div class="num-box text-title-3-bold">
           {{ `共 ${totalNum} 条数据` }}
@@ -101,34 +101,29 @@
             </div>
           </div>
         </div>
-        <div class="data-main-box-main-content" v-loading="loading" element-loading-text="数据加载中，请稍候...">
+        <div class="data-main-box-main-content">
           <el-table ref="tableRef" :data="tableData" row-key="id" @selection-change="handleSelectionChange"
             @select="handleSelect" @select-all="handleSelectAll" style="width: 100%" :row-style="{ height: '52px' }">
             <el-table-column type="selection" width="40" />
-            <el-table-column label="新闻标题" width="720">
+            <el-table-column label="新闻标题" width="600">
               <template #default="scope">
                 <span class="title-item text-compact-bold" @click="handleClickToDetail(scope.row)">{{
                   scope.row.originalTitle
                 }}</span>
               </template>
             </el-table-column>
-            <el-table-column label="发布时间" width="120" class-name="date-column">
+            <el-table-column label="发布时间" width="100" class-name="date-column">
               <template #default="scope">{{ scope.row.date }}</template>
             </el-table-column>
-            <el-table-column label="来源媒体">
+            <el-table-column label="发布时间" class-name="date-column">
+              <template #default="scope">{{ scope.row.originalDescription }}</template>
+            </el-table-column>
+            <el-table-column label="来源媒体" width="90">
               <template #default="scope">
                 <span class="person-item text-compact">{{ scope.row.organizationName
                 }}</span>
               </template>
             </el-table-column>
-            <el-table-column label="涉及领域" width="350" class-name="date-column">
-              <template #default="scope">
-                <div class="tag-box">
-                  <AreaTag v-for="tag, index in scope.row.domains" :key="index" :tagName="tag" />
-                </div>
-
-              </template>
-            </el-table-column>
           </el-table>
         </div>
       </div>
@@ -151,6 +146,7 @@ import PieChart from '../components/PieChart/index.vue'
 import BarChart from '../components/BarChart/index.vue'
 import RaderChart from '../components/RadarChart/idnex.vue'
 import SelectBox from '../components/SelectBox/index.vue'
+import DataChartSwitchBox from '../components/dataChartSwitchBox/index.vue'
 import { useRoute } from "vue-router";
 import router from '@/router'
 
@@ -590,7 +586,17 @@ const fetchTableData = async () => {
 
     setTimeout(() => {
       activeChart.value = curDemensionItem.chartTypeList[0]
+      if (curDemension.value === '发布时间') {
+        if (selectedTime.value === '按月度统计') {
           curChartData.value = curDemensionItem.data
+        } else if (selectedTime.value === '按季度统计') {
+          curChartData.value = curDemensionItem.quatarData
+        } else {
+          curChartData.value = curDemensionItem.yearData
+        }
+      } else {
+        curChartData.value = curDemensionItem.data
+      }
     })
 
   } catch (error) {
@@ -906,24 +912,26 @@ onMounted(async () => {
   }
 
   .chart-main-box {
+    width: 1568px;
+    height: 809px;
+    margin: 0 auto;
+    background: rgba(255, 255, 255);
+    border: 1px solid var(--bg-black-5);
+    border-radius: 10px;
+
     .info-box {
       margin: 0 auto;
-      width: 1568px;
+      margin-top: 16px;
+      width: 1520px;
       height: 30px;
       display: flex;
       justify-content: space-between;
 
       .switch-box {
         width: 160px;
-        border-radius: 20px;
-        border: 1px solid var(--color-primary-100);
-        height: 30px;
+        height: 28px;
+        border: none;
         cursor: pointer;
-
-        img {
-          width: 100%;
-          height: 100%;
-        }
       }
 
       .num-box {
@@ -934,14 +942,13 @@ onMounted(async () => {
     .content-box {
       margin: 0 auto;
       margin-top: 16px;
-      width: 1568px;
-      height: 766px;
-      border-radius: 10px;
-      background: rgba(255, 255, 255);
-      border: 1px solid var(--bg-black-5);
+      width: 1520px;
+      height: 726px;
+      border: none;
+
 
       .content-header {
-        margin: 16px 24px;
+        margin: 16px 0;
         width: 1520px;
         height: 28px;
       }
@@ -971,15 +978,9 @@ onMounted(async () => {
 
       .switch-box {
         width: 160px;
-        border-radius: 20px;
-        border: 1px solid var(--color-primary-100);
-        height: 30px;
+        height: 28px;
+        border: none;
         cursor: pointer;
-
-        img {
-          width: 100%;
-          height: 100%;
-        }
       }
 
       .num-box {

src/views/dataLibrary/technologyFigures/index.vue

@@ -22,10 +22,10 @@
         </div>
       </div>
     </div>
-    <div class="chart-main-box" v-if="isShowChart">
+    <div class="chart-main-box" v-if="isShowChart" v-loading="loading" element-loading-text="数据加载中，请稍候...">
       <div class="info-box">
         <div class="switch-box" @click="handleSwitchChartData">
-          <img src="@/views/dataLibrary/assets/icons/chart-active.svg" alt="">
+          <DataChartSwitchBox :is-show-data="!isShowChart" />
         </div>
         <div class="num-box text-title-3-bold">
           {{ `共 ${totalNum} 条数据` }}
@@ -34,13 +34,13 @@
       <div class="content-box">
         <div class="content-header">
           <ChartHeader :list="staticsDemensionList" @clickItem="handleClickDemensionItem">
-            <template #chart-header-right>
+            <!-- <template #chart-header-right>
               <el-select v-model="selectedTime" placeholder="选择时间" style="width: 150px" v-show="curDemension === '发布时间'"
                 @change="handleChangeTime">
                 <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
               </el-select>
 
-            </template>
+            </template> -->
           </ChartHeader>
         </div>
         <div class="content-main">
@@ -57,10 +57,10 @@
         </div>
       </div>
     </div>
-    <div class="data-main-box" v-else>
+    <div class="data-main-box" v-else v-loading="loading" element-loading-text="数据加载中，请稍候...">
       <div class="data-main-box-header">
         <div class="switch-box" @click="handleSwitchChartData">
-          <img src="@/views/dataLibrary/assets/icons/data-active.svg" alt="">
+          <DataChartSwitchBox :is-show-data="!isShowChart" />
         </div>
         <div class="num-box text-title-3-bold">
           {{ `共 ${totalNum} 条数据` }}
@@ -102,29 +102,30 @@
             </div>
           </div>
         </div>
-        <div class="data-main-box-main-content" v-loading="loading" element-loading-text="数据加载中，请稍候...">
+        <div class="data-main-box-main-content">
           <el-table ref="tableRef" :data="tableData" row-key="id" @selection-change="handleSelectionChange"
             @select="handleSelect" @select-all="handleSelectAll" style="width: 100%" :row-style="{ height: '52px' }">
             <el-table-column type="selection" width="40" />
-            <el-table-column label="人物名称" width="540">
+            <el-table-column label="姓名" width="360">
               <template #default="scope">
                 <span class="title-item text-compact-bold" @click="handleClickToDetail(scope.row)">{{
                   scope.row.originalTitle
                 }}</span>
               </template>
             </el-table-column>
-            <el-table-column label="时间" width="120" class-name="date-column">
+            <el-table-column label="国籍" width="180" class-name="date-column">
               <template #default="scope">{{ scope.row.date }}</template>
             </el-table-column>
-            <el-table-column label="所属机构">
+            <el-table-column label="党派" width="100">
+              <template #default="scope">{{ scope.row.affiliation }}</template>
+            </el-table-column>
+            <el-table-column label="最新动态">
               <template #default="scope">
-                <span class="person-item text-compact" @click="handleOrgClick(scope.row)">{{ scope.row.organizationName
+                <span class="person-item text-compact">{{ scope.row.organizationName
                 }}</span>
               </template>
             </el-table-column>
-            <el-table-column label="党派" width="100">
-              <template #default="scope">{{ scope.row.affiliation }}</template>
-            </el-table-column>
+
           </el-table>
         </div>
       </div>
@@ -147,6 +148,7 @@ import PieChart from '../components/PieChart/index.vue'
 import BarChart from '../components/BarChart/index.vue'
 import RaderChart from '../components/RadarChart/idnex.vue'
 import SelectBox from '../components/SelectBox/index.vue'
+import DataChartSwitchBox from '../components/dataChartSwitchBox/index.vue'
 import { useRoute } from "vue-router";
 import router from '@/router'
 
@@ -166,8 +168,8 @@ const handleSwitchChartData = () => {
     const curDemensionItem = staticsDemensionList.value.filter(item => {
       return item.name === curDemension.value
     })[0]
-    activeChart.value = curDemensionItem.chartTypeList[0]
-    curChartData.value = curDemensionItem.data
+    activeChart.value = curDemensionItem.chartTypeList[0].name
+    curChartData.value = curDemensionItem.chartTypeList[0].data
   }
 }
 
@@ -179,14 +181,34 @@ const staticsDemensionList = ref([
   {
     name: '人物国籍',
     active: true,
-    chartTypeList: ['饼状图'],
+    chartTypeList: [{
+      name: '饼状图',
+      data: []
+    },
+    {
+      name: '柱状图',
+      data: {
+        dataX: [],
+        dataY: []
+      }
+    }],
     chartTitle: '科技人物国籍分布',
     data: []
   },
   {
     name: '党派',
     active: false,
-    chartTypeList: ['饼状图'],
+    chartTypeList: [{
+      name: '饼状图',
+      data: []
+    },
+    {
+      name: '柱状图',
+      data: {
+        dataX: [],
+        dataY: []
+      }
+    }],
     chartTitle: '科技人物党派分布',
     data: []
   },
@@ -194,17 +216,35 @@ const staticsDemensionList = ref([
   {
     name: '所属机构',
     active: false,
-    chartTypeList: ['饼状图'],
-    chartTitle: '科技人物所属机构分布',
+    chartTypeList: [{
+      name: '饼状图',
       data: []
     },
+    {
+      name: '柱状图',
+      data: {
+        dataX: [],
+        dataY: []
+      }
+    }],
+    chartTitle: '科技人物所属机构分布',
+  },
   {
     name: '人物类别',
     active: false,
-    chartTypeList: ['饼状图'],
-    chartTitle: '科技人物类别分布',
+    chartTypeList: [{
+      name: '饼状图',
       data: []
     },
+    {
+      name: '柱状图',
+      data: {
+        dataX: [],
+        dataY: []
+      }
+    }],
+    chartTitle: '科技人物类别分布',
+  },
 
 ])
 
@@ -231,8 +271,8 @@ const handleClickDemensionItem = (val) => {
   })
   val.active = true
   nextTick(() => {
-    activeChart.value = val.chartTypeList[0]
-    curChartData.value = val.data
+    activeChart.value = val.chartTypeList[0].name
+    curChartData.value = val.chartTypeList[0].data
     curDemension.value = val.name
   })
 }
@@ -254,26 +294,26 @@ const timeList = ref([
     value: '按月度统计'
   },
 ])
-const handleChangeTime = value => {
-  let curChart = activeChart.value
-  activeChart.value = ''
-  if (value === '按月度统计') {
-    setTimeout(() => {
-      activeChart.value = curChart
-      curChartData.value = staticsDemensionList.value[0].data
-    })
-  } else if (value === '按季度统计') {
-    setTimeout(() => {
-      activeChart.value = curChart
-      curChartData.value = staticsDemensionList.value[0].quatarData
-    })
-  } else {
-    setTimeout(() => {
-      activeChart.value = curChart
-      curChartData.value = staticsDemensionList.value[0].yearData
-    })
-  }
-}
+// const handleChangeTime = value => {
+//   let curChart = activeChart.value
+//   activeChart.value = ''
+//   if (value === '按月度统计') {
+//     setTimeout(() => {
+//       activeChart.value = curChart
+//       curChartData.value = staticsDemensionList.value[0].data
+//     })
+//   } else if (value === '按季度统计') {
+//     setTimeout(() => {
+//       activeChart.value = curChart
+//       curChartData.value = staticsDemensionList.value[0].quatarData
+//     })
+//   } else {
+//     setTimeout(() => {
+//       activeChart.value = curChart
+//       curChartData.value = staticsDemensionList.value[0].yearData
+//     })
+//   }
+// }
 
 
 // 激活的标签列表
@@ -341,6 +381,8 @@ const activeChart = ref('')  // 当前激活的图表
 // 切换当前图表
 const handleSwitchActiveChart = val => {
   activeChart.value = val.name
+  const curChartItem = curChartTypeList.value.filter(item => item.name === val.name)[0]
+  curChartData.value = curChartItem.data
 }
 
 
@@ -575,19 +617,38 @@ const fetchTableData = async () => {
     if (res.code === 200 && res.data) {
       tableData.value = res.data.records
       totalNum.value = res.data.total
-      staticsDemensionList.value[0].data = Object.entries(res.data.aggregationCountryId).map(([key, value]) => ({
+      staticsDemensionList.value[0].chartTypeList[0].data = Object.entries(res.data.aggregationCountryId).map(([key, value]) => ({
         name: key,
         value: Number(value)
       }))
-      staticsDemensionList.value[1].data = Object.entries(res.data.aggregationsAffiliation).map(([key, value]) => ({
+      staticsDemensionList.value[0].chartTypeList[1].data = {
+        dataX: Object.keys(res.data.aggregationCountryId),
+        dataY: Object.values(res.data.aggregationCountryId).map(value => Number(value))
+      }
+      staticsDemensionList.value[1].chartTypeList[0].data = Object.entries(res.data.aggregationsAffiliation).map(([key, value]) => ({
         name: key,
         value: Number(value)
       }))
-      staticsDemensionList.value[2].data = Object.entries(res.data.aggregationsorganizationName).map(([key, value]) => ({
+      staticsDemensionList.value[1].chartTypeList[1].data = {
+        dataX: Object.keys(res.data.aggregationsAffiliation),
+        dataY: Object.values(res.data.aggregationsAffiliation).map(value => Number(value))
+      }
+      staticsDemensionList.value[2].chartTypeList[0].data = Object.entries(res.data.aggregationsorganizationName).map(([key, value]) => ({
         name: key,
         value: Number(value)
       }))
-
+      staticsDemensionList.value[2].chartTypeList[1].data = {
+        dataX: Object.keys(res.data.aggregationsorganizationName),
+        dataY: Object.values(res.data.aggregationsorganizationName).map(value => Number(value))
+      }
+      staticsDemensionList.value[3].chartTypeList[0].data = Object.entries(res.data.aggregationPersonType).map(([key, value]) => ({
+        name: key,
+        value: Number(value)
+      }))
+      staticsDemensionList.value[3].chartTypeList[1].data = {
+        dataX: Object.keys(res.data.aggregationPersonType),
+        dataY: Object.values(res.data.aggregationPersonType).map(value => Number(value))
+      }
     }
 
     const curDemensionItem = staticsDemensionList.value.filter(item => {
@@ -922,24 +983,26 @@ onMounted(async () => {
   }
 
   .chart-main-box {
+    width: 1568px;
+    height: 809px;
+    margin: 0 auto;
+    background: rgba(255, 255, 255);
+    border: 1px solid var(--bg-black-5);
+    border-radius: 10px;
+
     .info-box {
       margin: 0 auto;
-      width: 1568px;
+      margin-top: 16px;
+      width: 1520px;
       height: 30px;
       display: flex;
       justify-content: space-between;
 
       .switch-box {
         width: 160px;
-        border-radius: 20px;
-        border: 1px solid var(--color-primary-100);
-        height: 30px;
+        height: 28px;
+        border: none;
         cursor: pointer;
-
-        img {
-          width: 100%;
-          height: 100%;
-        }
       }
 
       .num-box {
@@ -950,14 +1013,13 @@ onMounted(async () => {
     .content-box {
       margin: 0 auto;
       margin-top: 16px;
-      width: 1568px;
-      height: 766px;
-      border-radius: 10px;
-      background: rgba(255, 255, 255);
-      border: 1px solid var(--bg-black-5);
+      width: 1520px;
+      height: 726px;
+      border: none;
+
 
       .content-header {
-        margin: 16px 24px;
+        margin: 16px 0;
         width: 1520px;
         height: 28px;
       }
@@ -987,15 +1049,9 @@ onMounted(async () => {
 
       .switch-box {
         width: 160px;
-        border-radius: 20px;
-        border: 1px solid var(--color-primary-100);
-        height: 30px;
+        height: 28px;
+        border: none;
         cursor: pointer;
-
-        img {
-          width: 100%;
-          height: 100%;
-        }
       }
 
       .num-box {

src/views/dataLibrary/thinkTank/index.vue

@@ -38,7 +38,7 @@
     <div class="chart-main-box" v-if="isShowChart">
       <div class="info-box">
         <div class="switch-box" @click="handleSwitchChartData">
-          <img src="@/views/dataLibrary/assets/icons/chart-active.svg" alt="" />
+          <DataChartSwitchBox :is-show-data="!isShowChart" />
         </div>
         <div class="num-box text-title-3-bold">
           {{ `共 ${totalNum} 条数据` }}
@@ -71,7 +71,7 @@
     <div class="data-main-box" v-else>
       <div class="data-main-box-header">
         <div class="switch-box" @click="handleSwitchChartData">
-          <img src="@/views/dataLibrary/assets/icons/data-active.svg" alt="" />
+          <DataChartSwitchBox :is-show-data="!isShowChart" />
         </div>
         <div class="num-box text-title-3-bold">
           {{ `共 ${totalNum} 条数据` }}
@@ -169,6 +169,7 @@ import BarChart from "../components/BarChart/index.vue";
 import RaderChart from "../components/RadarChart/idnex.vue";
 import SelectBox from "../components/SelectBox/index.vue";
 import InputBox from "../components/InputBox/index.vue";
+import DataChartSwitchBox from '../components/dataChartSwitchBox/index.vue'
 import { useRoute } from "vue-router";
 import router from "@/router";
 
@@ -714,7 +715,17 @@ const fetchTableData = async () => {
 
     setTimeout(() => {
       activeChart.value = curDemensionItem.chartTypeList[0];
-      curChartData.value = curDemensionItem.data;
+      if (curDemension.value === '发布时间') {
+        if (selectedTime.value === '按月度统计') {
+          curChartData.value = curDemensionItem.data
+        } else if (selectedTime.value === '按季度统计') {
+          curChartData.value = curDemensionItem.quatarData
+        } else {
+          curChartData.value = curDemensionItem.yearData
+        }
+      } else {
+        curChartData.value = curDemensionItem.data
+      }
     });
   } catch (error) {
     console.error(error);
@@ -1047,18 +1058,25 @@ onMounted(async () => {
   }
 
   .chart-main-box {
+    width: 1568px;
+    height: 809px;
+    margin: 0 auto;
+    background: rgba(255, 255, 255);
+    border: 1px solid var(--bg-black-5);
+    border-radius: 10px;
+
     .info-box {
       margin: 0 auto;
-      width: 1568px;
+      margin-top: 16px;
+      width: 1520px;
       height: 30px;
       display: flex;
       justify-content: space-between;
 
       .switch-box {
         width: 160px;
-        border-radius: 20px;
-        border: 1px solid var(--color-primary-100);
-        height: 30px;
+        height: 28px;
+        border: none;
         cursor: pointer;
 
         img {
@@ -1075,14 +1093,13 @@ onMounted(async () => {
     .content-box {
       margin: 0 auto;
       margin-top: 16px;
-      width: 1568px;
-      height: 766px;
-      border-radius: 10px;
-      background: rgba(255, 255, 255);
-      border: 1px solid var(--bg-black-5);
+      width: 1520px;
+      height: 726px;
+      border: none;
+
 
       .content-header {
-        margin: 16px 24px;
+        margin: 16px 0;
         width: 1520px;
         height: 28px;
       }
@@ -1112,9 +1129,8 @@ onMounted(async () => {
 
       .switch-box {
         width: 160px;
-        border-radius: 20px;
-        border: 1px solid var(--color-primary-100);
-        height: 30px;
+        height: 28px;
+        border: none;
         cursor: pointer;
 
         img {

src/views/decree/decreeHome/utils/piechart.js

+import { MUTICHARTCOLORS } from "@/common/constant";
 const getPieChart = (data) => {
   let option = {
+    color: MUTICHARTCOLORS,
     series: [
       {
         type: 'pie',