feat:新增goToPage.js文件

src/components/base/TimePickerBox/index.vue

+<template>
+  <div class="time-filter">
+    <el-checkbox-group class="checkbox-group" v-model="selectedValues" @change="handleChange">
+      <el-checkbox class="filter-checkbox" v-for="option in options" :key="option.value" :label="option.value"
+        :disabled="option.disabled">
+        {{ option.label }}
+      </el-checkbox>
+    </el-checkbox-group>
+
+    <!-- 自定义日期选择器，仅在选中“自定义”时显示 -->
+    <div v-if="showCustomPicker" class="custom-date-picker">
+      <el-date-picker v-model="customDateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
+        end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="handleCustomDateChange"
+        style="width: 100%;" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue'
+
+// Props 定义
+const props = defineProps({
+  // 外部控制选中值（支持 v-model）
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  // 外部控制自定义日期范围
+  customDate: {
+    type: Array,
+    default: () => []
+  }
+})
+
+// Emits 定义
+const emit = defineEmits(['update:modelValue', 'update:customDate', 'change'])
+
+// 响应式数据
+const selectedValues = ref([])     // 当前选中的选项值数组
+const customDateRange = ref([])    // 自定义日期范围 [start, end]
+const options = ref([])            // 动态生成的选项列表
+
+// 是否显示自定义日期选择器
+const showCustomPicker = computed(() => {
+  return selectedValues.value.includes('custom')
+})
+
+// 生成选项列表：全部时间 + 最近5个年份 + 自定义
+const initOptions = () => {
+  const currentYear = new Date().getFullYear()
+  // 生成最近5个年份（包含当前年份）
+  const recentYears = []
+  for (let i = 0; i < 5; i++) {
+    recentYears.push(currentYear - i)
+  }
+  // 年份选项（倒序展示，从大到小）
+  const yearOptions = recentYears.map(year => ({
+    label: `${year}年`,
+    value: String(year)
+  }))
+
+  options.value = [
+    { label: '全部时间', value: 'all' },
+    ...yearOptions,
+    { label: '自定义', value: 'custom' }
+  ]
+}
+
+// 向上层派发事件
+const emitChange = () => {
+  const eventData = {
+    type: 'time',
+    value: selectedValues.value[0], // 单选，只有一个值
+    customRange: selectedValues.value.includes('custom') ? customDateRange.value : []
+  }
+
+  emit('update:modelValue', selectedValues.value)
+  emit('update:customDate', customDateRange.value)
+  emit('change', eventData)
+}
+
+// 选项变化处理（单选逻辑）
+const handleChange = (selected) => {
+  // 实现单选逻辑
+  let lastSelected = null
+
+  if (selected.length > selectedValues.value.length) {
+    // 新增了选项：找到新增的那个
+    const added = selected.find(v => !selectedValues.value.includes(v))
+    lastSelected = added
+  } else if (selected.length < selectedValues.value.length) {
+    // 移除了选项：选中“全部时间”
+    lastSelected = 'all'
+  } else if (selected.length === 1 && selectedValues.value.length === 1 && selected[0] !== selectedValues.value[0]) {
+    // 直接替换场景
+    lastSelected = selected[0]
+  } else if (selected.length > 1) {
+    // 多选时，只保留最后一个选中的
+    lastSelected = selected[selected.length - 1]
+  }
+
+  if (lastSelected) {
+    selectedValues.value = [lastSelected]
+  } else if (selected.length === 0) {
+    // 全部取消，默认给“全部时间”
+    selectedValues.value = ['all']
+  } else {
+    // 确保只有一个
+    selectedValues.value = selected.slice(0, 1)
+  }
+
+  // 如果选中的不是“自定义”，清空自定义日期范围
+  if (!selectedValues.value.includes('custom')) {
+    customDateRange.value = []
+  }
+
+  emitChange()
+}
+
+// 自定义日期范围变化处理
+const handleCustomDateChange = (val) => {
+  if (val && val.length === 2) {
+    customDateRange.value = [...val]
+  } else {
+    customDateRange.value = []
+  }
+  emitChange()
+}
+
+// 重置方法（供外部调用）
+const reset = () => {
+  selectedValues.value = ['all']
+  customDateRange.value = []
+  emitChange()
+}
+
+// 获取当前筛选条件描述（供外部调用）
+const getFilterDescription = () => {
+  const selectedVal = selectedValues.value[0]
+  if (selectedVal === 'all') {
+    return '全部时间'
+  } else if (selectedVal === 'custom') {
+    if (customDateRange.value && customDateRange.value.length === 2) {
+      return `${customDateRange.value[0]} 至 ${customDateRange.value[1]}`
+    } else {
+      return '自定义（未选择日期）'
+    }
+  } else {
+    return `${selectedVal}年`
+  }
+}
+
+// 暴露方法给父组件
+defineExpose({
+  reset,
+  getFilterDescription
+})
+
+// 监听外部传入的 modelValue 变化
+watch(() => props.modelValue, (newVal) => {
+  if (JSON.stringify(newVal) !== JSON.stringify(selectedValues.value)) {
+    selectedValues.value = [...newVal]
+  }
+}, { immediate: true })
+
+// 监听外部传入的自定义日期变化
+watch(() => props.customDate, (newVal) => {
+  if (JSON.stringify(newVal) !== JSON.stringify(customDateRange.value)) {
+    customDateRange.value = [...newVal]
+  }
+}, { immediate: true })
+
+// 初始化
+onMounted(() => {
+  initOptions()
+  // 初始化选中值：如果外部没有传入，默认选中“全部时间”
+  if (!props.modelValue || props.modelValue.length === 0) {
+    selectedValues.value = ['all']
+  } else {
+    selectedValues.value = [...props.modelValue]
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.time-filter {
+  // display: flex;
+  // flex-direction: column;
+  // gap: 12px;
+  width: 100%;
+
+  .checkbox-group {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+
+    .filter-checkbox {
+      width: 50%;
+      margin-right: 0;
+      margin-bottom: 4px;
+      // background: orange;
+
+      :deep(.el-checkbox__label) {
+        color: var(--text-primary-65-color);
+        font-size: var(--font-size-base);
+        font-weight: 400;
+        font-family: "Microsoft YaHei";
+        line-height: 24px;
+      }
+    }
+  }
+}
+
+.custom-date-picker {
+  width: 100%;
+  margin-top: 8px;
+
+}
+</style>
\ No newline at end of file

src/styles/components/TimePickerBox/index.vue

+<template>
+  <el-row class="wrapper layout-grid-line">
+    <el-col :span="span">
+      <pre>
+{{
+  `
+
+  `
+}}
+      </pre>
+      <div class="time-box">
+<TimePickerBox />
+      </div>
+
+    </el-col>
+
+  </el-row>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import '@/styles/common.scss'
+import TimePickerBox from '@/components/base/TimePickerBox/index.vue'
+
+const span = 12
+
+
+</script>
+
+<style lang="scss" scoped>
+.time-box {
+  width: 300px;
+  height: 700px;
+  background: #F2F8FF;
+  border: 1px solid var(--bg-black-5);
+  display: flex;
+  gap: 8px;
+}
+</style>
\ No newline at end of file

src/styles/components/index.vue

@@ -9,7 +9,8 @@
                 <TextStyle />
                 <div class="text-title-1-show">通用样式/组件</div>
                 <div style="position: relative; height: 800px;">
-                    <el-tabs tabPosition="left" style="position: relative; height: 700px;" class="tabs-nav-no-wrap left-float-nav-tabs dev-style-tabs">
+                    <el-tabs tabPosition="left" style="position: relative; height: 700px;"
+                        class="tabs-nav-no-wrap left-float-nav-tabs dev-style-tabs">
                         <el-tab-pane label="通用" lazy>
                             <common-page />
                         </el-tab-pane>
@@ -76,6 +77,9 @@
                         <el-tab-pane label="自定义排序" lazy>
                             <TimeSortSelectBox />
                         </el-tab-pane>
+                        <!-- <el-tab-pane label="时间筛选框" lazy>
+                            <TimePickerBox />
+                        </el-tab-pane> -->
                     </el-tabs>
                 </div>
             </el-space>
@@ -111,6 +115,7 @@ import RelationCenterChart from './RelationCenterChart/index.vue'
 import RelationForceChart from './RelationForceChart/index.vue'
 import WorkingBox from './WorkingBox/index.vue'
 import TimeSortSelectBox from './TimeSortSelectBox/index.vue'
+import TimePickerBox from './TimePickerBox/index.vue'
 </script>
 
 <style lang="scss" scoped>

src/utils/goToPage.js

-import { useRouter } from "vue-router";
 import { getPersonSummaryInfo } from "@/api/common/index";
-const router = useRouter()
+import router from "@/router/index";
 
 // 跳转法案详情
 export const goToBill = (id, tabName) => {
@@ -167,23 +166,56 @@ export const goToNewsPage = (id, tabName) => {
 // 跳转搜索详情页
 export const goToSearch = (tabName, areaName, billSearchType) => {
   window.sessionStorage.setItem("curTabName", tabName);
-	// if (!areaName) return;
-	const query = {
-		searchText: tabName,
-		areaName: areaName
-	};
-	if (enableBillTypeSwitch) {
-		query.billSearchType = billSearchType
-	}
-	const curRoute = router.resolve({
-		path: "/searchResults",
-		query
-	});
-	window.open(curRoute.href, "_blank");
+  // if (!areaName) return;
+  const query = {
+    searchText: tabName,
+    areaName: areaName
+  };
+  if (enableBillTypeSwitch) {
+    query.billSearchType = billSearchType
+  }
+  const curRoute = router.resolve({
+    path: "/searchResults",
+    query
+  });
+  window.open(curRoute.href, "_blank");
 }
 
 
 // 跳转数据资源库
+export const goToDataCountryBill = (selectParam) => {
+  // const codeParam = new URLSearchParams(selectParam)
+  // JSON -> Base64
+  const jsonStr = JSON.stringify(selectParam);
+  // 处理中文：先 encodeURIComponent
+  const base64 = btoa(encodeURIComponent(jsonStr));
+  const route = router.resolve({
+    path: "/dataLibrary/countryBill",
+    query: {
+      data: base64
+    }
+  });
+  window.open(route.href, "_blank");
+}
+
+
+// 解码
+export const getDecodedParams = () => {
+  const urlParams = new URLSearchParams(window.location.search);
+  const encoded = urlParams.get('data');
+
+  if (!encoded) return null;
+
+  try {
+    // Base64 解码
+    const decoded = atob(encoded);
+    const jsonStr = decodeURIComponent(decoded);
+    return JSON.parse(jsonStr);
+  } catch (e) {
+    console.error('解码失败', e);
+    return null;
+  }
+}
 
 
 

src/utils/setChart.js

@@ -4,6 +4,7 @@ import getQuarterRange from './getQuarterRange';
 import * as echarts from 'echarts'
 import 'echarts-wordcloud';
 import router from '@/router/index'
+import { goToDataCountryBill } from './goToPage';
 const setChart = (option, chartId, allowClick, selectParam) => {
   let chartDom = document.getElementById(chartId);
   if (!chartDom) {
@@ -20,20 +21,22 @@ const setChart = (option, chartId, allowClick, selectParam) => {
             // console.log('当前点击', selectParam, params.seriesName, params.name);
             selectParam.selectedStatus = params.seriesName
             selectParam.selectedDate = JSON.stringify(getMonthRange(params.name))
-            const route = router.resolve({
-              path: "/dataLibrary/countryBill",
-              query: selectParam
-            });
-            window.open(route.href, "_blank");
-            return
+            // const route = router.resolve({
+            //   path: "/dataLibrary/countryBill",
+            //   query: selectParam
+            // });
+            // window.open(route.href, "_blank");
+            // goToDataCountryBill(selectParam)
+            // return
           } else if (selectParam.key === 2) {
             selectParam.domains = params.name
-            const route = router.resolve({
-              path: "/dataLibrary/countryBill",
-              query: selectParam
-            });
-            window.open(route.href, "_blank");
-            return
+            // const route = router.resolve({
+            //   path: "/dataLibrary/countryBill",
+            //   query: selectParam
+            // });
+            // window.open(route.href, "_blank");
+            // goToDataCountryBill(selectParam)
+            // return
           } else if (selectParam.key === 3) {
             if (params.name === '众议院' || params.name === '参议院') {
               selectParam.selectedCongress = params.name
@@ -48,20 +51,26 @@ const setChart = (option, chartId, allowClick, selectParam) => {
                 selectParam.selectedDate = JSON.stringify([selectParam.selectedDate + '-01-01', selectParam.selectedDate + '-12-31'])
               }
             }
-            const route = router.resolve({
-              path: "/dataLibrary/countryBill",
-              query: selectParam
-            });
-            window.open(route.href, "_blank");
-            return
+            // const route = router.resolve({
+            //   path: "/dataLibrary/countryBill",
+            //   query: selectParam
+            // });
+            // window.open(route.href, "_blank");
+            // goToDataCountryBill(selectParam)
+
+            // return
           } else {
             selectParam.selectedStatus = params.name
-            const route = router.resolve({
-              path: "/dataLibrary/countryBill",
-              query: selectParam
-            });
-            window.open(route.href, "_blank");
+            // const route = router.resolve({
+            //   path: "/dataLibrary/countryBill",
+            //   query: selectParam
+            // });
+            // window.open(route.href, "_blank");
+            // goToDataCountryBill(selectParam)
+
           }
+            goToDataCountryBill(selectParam)
+
           break
 
         case '政令':

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

@@ -173,6 +173,7 @@ import { getPostOrgList, getPostMemberList } from '@/api/bill/billHome'
 import { search, getStatusList } from '@/api/comprehensiveSearch'
 import { ElMessage } from 'element-plus'
 import getDateRange from '@/utils/getDateRange'
+import { getDecodedParams } from '@/utils/goToPage'
 
 const route = useRoute();
 
@@ -1151,33 +1152,36 @@ const handleDownloadCurChartData = () => {
 
 // 跳转到当前页 初始化筛选条件
 const initParam = () => {
-  const hasQuery = Object.keys(route.query).length > 0;
+  const routeQuery = getDecodedParams()
+  console.log('routeQuery',routeQuery);
+  
+  const hasQuery = Object.keys(routeQuery).length > 0;
   if (hasQuery) {
-    if (route.query.selectedAreaList) {
-      selectedArea.value = JSON.parse(route.query.selectedAreaList)
+    if (routeQuery.selectedAreaList) {
+      selectedArea.value = JSON.parse(routeQuery.selectedAreaList)
     } else {
-      selectedArea.value = route.query.domains ? [route.query.domains] : ['全部领域']
+      selectedArea.value = routeQuery.domains ? [routeQuery.domains] : ['全部领域']
     }
 
 
-    if (route.query.selectedDate && Array.isArray(JSON.parse(route.query.selectedDate)) && JSON.parse(route.query.selectedDate).length) {
+    if (routeQuery.selectedDate && Array.isArray(JSON.parse(routeQuery.selectedDate)) && JSON.parse(routeQuery.selectedDate).length) {
       selectedDate.value = '自定义'
-      customTime.value = JSON.parse(route.query.selectedDate)
+      customTime.value = JSON.parse(routeQuery.selectedDate)
     }
-    isInvolveCn.value = route.query.isInvolveCn ? true : false
-    if (route.query.selectedStatus && route.query.selectedStatus !== '全部阶段') {
+    isInvolveCn.value = routeQuery.isInvolveCn ? true : false
+    if (routeQuery.selectedStatus && routeQuery.selectedStatus !== '全部阶段') {
       selectedStatus.value = statusList.value.filter(item => {
-        return item.name === route.query.selectedStatus
+        return item.name === routeQuery.selectedStatus
       })[0].id
     } else {
       selectedStatus.value = '全部阶段'
     }
 
-    selectedCongress.value = route.query.selectedCongress ? route.query.selectedCongress : '全部议院'
-    selectedOrg.value = route.query.selectedOrg ? [route.query.selectedOrg] : ['全部委员会']
-    selectedmember.value = route.query.selectedmember ? JSON.parse(route.query.selectedmember) : ['全部议员']
+    selectedCongress.value = routeQuery.selectedCongress ? routeQuery.selectedCongress : '全部议院'
+    selectedOrg.value = routeQuery.selectedOrg ? [routeQuery.selectedOrg] : ['全部委员会']
+    selectedmember.value = routeQuery.selectedmember ? JSON.parse(routeQuery.selectedmember) : ['全部议员']
 
-    const query = route.query;
+    const query = routeQuery;
     if (Object.keys(query).length > 0) {
       sessionStorage.setItem('countryBillRouteQuery', JSON.stringify(query));
     }