Skip to content

R
risk-monitor
提交 e4a5b60a authored 作者: caijian's avatar caijian
浏览文件
操作

智库详情更新

上级 caea84d1
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 498 行增加 和 147 行删除
src/components/PolicyList.vue
浏览文件 @ e4a5b60a
<template>
<div class="policy-list">
<div v-for="item in props.policyList" :key="item.id" class="policy-item">
<el-image :src="$withFallbackImage(item.imageUrl, item.content) " class="item-cover" fit="cover"/>
<div class="item-details">
<h3 class="item-title">{{ item.name }}</h3>
<div class="item-content"> {{ item.times }} · {{ item.content }} <el-icon><Link /></el-icon></div>
<div class="item-tags">
<el-tag v-for="tag in item.tags" :key="tag" class="custom-tag">{{ tag }}</el-tag>
<div
v-for="(item, index) in policyList"
:key="index"
class="policy-item"
>
<div class="item-left">
<div class="report-cover">
<img :src="$withFallbackImage(item.imageUrl, index)" alt="Report Cover" />
</div>
<div
v-if="item.relatedBill"
class="related-bill-box"
:class="`status-bg-${item.status}`"
>
<span>{{ item.relatedBill.text }}</span>
<div class="status-badge" :class="`status-color-${item.status}`">
<span class="badge-dot"></span>
{{ getStatusInfo(item.status).text }}
</div>
</div>
<div class="item-right">
<h3 class="item-title">
{{ item.content }}
</h3>
<div class="item-meta">
<span class="meta-date">{{ formatDate(item.times) }}</span>
<span class="meta-divider">·</span>
<span class="meta-source">
{{ item.name }}
<el-icon class="link-icon"><TopRight /></el-icon>
</span>
</div>
<div class="item-tags" v-if="item.tags && item.tags.length">
<span v-for="(tag, tIndex) in item.tags" :key="tIndex" class="tag-pill">
{{ tag }}
</span>
</div>
<div v-else class="related-bill-box status-bg-unimplemented">
<span>不存在相关提案。</span>
<div class="status-badge status-color-unimplemented">
<span class="badge-dot"></span>
{{ item.status }}
<div class="item-actions" v-if="item.statusRaw">
<div
v-for="(statusItem, sIndex) in parseStatus(item.statusRaw)"
:key="sIndex"
class="status-link"
>
<span class="status-type">{{ statusItem.type }}</span>
<span class="status-year">{{ statusItem.year }}</span>
<span class="status-name">《{{ statusItem.name }}》</span>
<el-icon class="arrow-icon"><Right /></el-icon>
</div>
</div>
</div>
......@@ -33,35 +48,53 @@
</div>
</template>
<script setup>
import { ref } from 'vue'
import { Link } from '@element-plus/icons-vue'
const props = defineProps({
policyList: {
type: Array,
default: () => []
}
})
// --- Status Styling Helper ---
const getStatusInfo = (status) => {
switch (status) {
case 'implemented':
return { text: '已实施', color: '#e66657', bgColor: '#fdeeed' };
case 'partial':
return { text: '部分实施', color: '#d38f24', bgColor: '#fcf3e4' };
case 'unimplemented':
return { text: '未实施', color: '#409eff', bgColor: '#ecf5ff' };
default:
return { text: '未知', color: '#909399', bgColor: '#f4f4f5' };
}
};
<script setup lang="ts">
import { TopRight, Right } from '@element-plus/icons-vue'
interface PolicyItem {
content: string;
statusRaw: string; // 原始的长字符串
name: string;
times: string;
tags?: string[];
coverUrl?: string;
}
const props = defineProps<{
policyList: PolicyItem[]
}>()
// 格式化日期：2025-06-26 -> 2025年6月26日
const formatDate = (dateStr: string) => {
if (!dateStr) return '';
const date = new Date(dateStr);
return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
}
// 解析状态字符串
// 输入: "法案 2024 《芯片科学法案》; 政令 2025 《推动美国...》"
// 输出: 数组对象
const parseStatus = (raw: string) => {
if (!raw) return [];
// 按分号分割多个条目
const items = raw.split(/[;；]/).map(s => s.trim()).filter(s => s);
return items.map(itemStr => {
// 简单正则匹配： "类型 年份 《名称》"
// 注意：这里假设数据格式比较规范，实际需根据后端数据调整
// 尝试移除书名号进行提取
const cleanStr = itemStr.replace(/[《》]/g, '');
const parts = cleanStr.split(' ');
return {
type: parts[0] || '政策',
year: parts[1] || '',
name: parts.slice(2).join(' ') || cleanStr // 剩余部分作为名称
}
});
}
</script>
<style scoped>
/* --- Policy List Styles --- */
.policy-list {
display: flex;
flex-direction: column;
......@@ -70,139 +103,143 @@ const getStatusInfo = (status) => {
.policy-item {
display: flex;
padding: 20px 0;
border-bottom: 1px solid #e4e7ed;
border-bottom: 1px solid #ebeef5;
gap: 16px;
transition: background-color 0.2s;
}
.policy-item:last-child {
border-bottom: none;
}
.item-cover {
width: 80px;
height: 80px;
margin-right: 20px;
/* 左侧封面 */
.item-left {
flex-shrink: 0;
border-radius: 4px;
border: 1px solid #ebeef5;
}
.item-details {
flex-grow: 1;
.report-cover {
width: 60px;
height: 80px;
background-color: #f2f3f5;
border: 1px solid #e4e7ed;
border-radius: 2px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.report-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 右侧内容 */
.item-right {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* 1. 标题 */
.item-title {
margin: 0 0 6px 0;
font-size: 16px;
font-weight: 600;
color: #303133;
margin: 0 0 8px;
cursor: pointer;
font-weight: 700;
color: #1a1a1a;
line-height: 1.4;
cursor: pointer;
}
.item-title:hover {
color: #409eff;
color: #409EFF;
}
.item-content {
color: #909399;
font-size: 14px;
/* 2. 元数据 */
.item-meta {
display: flex;
align-items: center;
font-size: 13px;
color: #606266;
margin-bottom: 8px;
}
.item-tags {
margin-bottom: 12px;
}
.custom-tag {
margin-right: 8px;
background-color: #f0f2f5;
color: #606266;
border-color: #e4e7ed;
font-size: 12px;
.meta-divider {
margin: 0 8px;
font-weight: bold;
}
.related-bill-box {
.meta-source {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
border-radius: 6px;
font-size: 14px;
line-height: 1.4;
gap: 4px;
cursor: pointer;
}
.meta-source:hover {
color: #409EFF;
}
.status-badge {
.link-icon {
font-size: 12px;
}
/* 3. 标签 */
.item-tags {
display: flex;
align-items: center;
font-size: 13px;
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
font-weight: 500;
gap: 8px;
margin-bottom: 10px;
}
.badge-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: currentColor;
margin-right: 6px;
.tag-pill {
background-color: #f2f3f5;
color: #5e6d82;
font-size: 12px;
padding: 2px 8px;
border-radius: 4px;
}
/* Dynamic status colors */
.status-bg-implemented {
background-color: #fdeeed;
/* 4. 底部状态链接 */
.item-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.status-color-implemented {
color: #e66657;
.status-link {
display: inline-flex;
align-items: center;
background-color: #ecf5ff; /* 浅蓝色背景 */
color: #409EFF; /* 蓝色文字 */
padding: 4px 12px;
border-radius: 4px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.status-bg-partial {
background-color: #fcf3e4;
.status-link:hover {
background-color: #d9ecff;
}
.status-color-partial {
color: #d38f24;
.status-type {
font-weight: bold;
margin-right: 4px;
}
.status-bg-unimplemented {
background-color: #ecf5ff;
.status-year {
margin-right: 4px;
}
.status-color-unimplemented {
color: #409eff;
.status-name {
margin-right: 4px;
}
/* 响应式设计 */
@media (max-width: 768px) {
.policy-item {
flex-direction: column;
gap: 12px;
padding: 16px 0;
}
.item-cover {
width: 100%;
height: 120px;
margin-right: 0;
margin-bottom: 12px;
}
.item-title {
font-size: 15px;
}
.related-bill-box {
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 12px;
}
.status-badge {
align-self: flex-end;
}
.arrow-icon {
margin-left: 4px;
font-size: 12px;
}
</style>
</style>
\ No newline at end of file
src/components/PolicyTab.vue
浏览文件 @ e4a5b60a
......@@ -82,7 +82,7 @@ import PolicyList from './PolicyList.vue';
import CardTitle from './CardTitle.vue';
import { getOverviewPolicy } from '@/api'
import PolicyOverview from '@/views/thinkTank/components/PolicyOverview.vue'
import { mockPolicyList } from '@/views/thinkTank/mockData';
const props = defineProps({
showSearch: {
type: Boolean,
......@@ -120,7 +120,8 @@ const getPolicies = async () => {
researchTypeIds: activeTechField.value,
statusList: activeStatus.value,
})
policies.value = data
// policies.value = data
policies.value = mockPolicyList
}
......
src/views/thinkTank/ThinkTankDetail/FundingSource.vue 0 → 100644
浏览文件 @ e4a5b60a
<template>
<div class="funding-source-container">
<div class="chart-header">
<CardTitle title="经费来源" />
<div class="header-icons">
<el-icon><Coin /></el-icon>
<el-icon><Download /></el-icon>
<el-icon><Star /></el-icon>
</div>
</div>
<div class="chart-body">
<div class="stats-panel">
<div class="stat-card total-card">
<div class="label">总计</div>
<div class="value">4.358亿美元</div>
</div>
<div class="stat-card govt-card">
<div class="label">政府部门</div>
<div class="value">3.271亿美元</div>
</div>
<div class="stat-card other-card">
<div class="label">其他机构</div>
<div class="value">1.087亿美元</div>
</div>
</div>
<div class="chart-panel" ref="chartRef"></div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import * as echarts from 'echarts';
import { Coin, Download, Star } from '@element-plus/icons-vue';
import CardTitle from '@/components/CardTitle.vue';
// 1. 模拟数据
// 注意：为了还原图表，这里的数据是凑出来的近似值，确保比例看起来像截图
const chartData = [
// 右侧数据 (通常从12点顺时针开始)
{ value: 7830, name: '美国国土安全部', percent: '21%' },
{ value: 7290, name: '美国办公室国防部长和...', percent: '21%' },
{ value: 6740, name: '美国卫生与公众服务部...', percent: '18%' },
{ value: 4840, name: '美国空军', percent: '18%' },
{ value: 3880, name: '美国陆军', percent: '16%' },
{ value: 3520, name: '捐款', percent: '16%' },
// 左侧数据
{ value: 3110, name: '基金', percent: '14%' },
{ value: 2905, name: '大学', percent: '12%' },
{ value: 2840, name: '私营部门', percent: '12%' },
{ value: 2400, name: '州和地方政府机构', percent: '12%' },
{ value: 2130, name: '其他非营利组织', percent: '11%' },
{ value: 2060, name: '非美国政府机构和国际...', percent: '8%' },
{ value: 1850, name: '其他联邦机构', percent: '8%' },
{ value: 1200, name: '其他', percent: '8%' },
];
// 颜色盘 (从截图吸取的近似色)
const colorPalette = [
'#8cbbf1', // 浅蓝
'#a5d67d', // 浅绿
'#f6c469', // 橙黄
'#fdf27e', // 黄色
'#94e6d6', // 青绿
'#6b85ef', // 深蓝紫
'#d3d7fd', // 极浅蓝
'#d9f3b2', // 极浅绿
'#eb7d7d', // 红
'#a28ee3', // 紫
'#f4a678', // 橙
'#6ba7f5', // 蓝
'#f5a8a8', // 浅红
];
const chartRef = ref(null);
let myChart = null;
const initChart = () => {
if (!chartRef.value) return;
myChart = echarts.init(chartRef.value);
const option = {
color: colorPalette,
tooltip: {
trigger: 'item',
formatter: '{b}: {c}万 ({d}%)'
},
series: [
{
name: '经费来源',
type: 'pie',
radius: ['45%', '60%'], // 环形图半径
center: ['50%', '50%'], // 居中
data: chartData,
// 标签配置
label: {
show: true,
position: 'outside',
formatter: function (params) {
// 这里的逻辑是为了模仿截图：右边的文字名字在右侧，左边的文字名字在左侧
// 简单的判断逻辑：基于 ECharts 内部计算的 label 角度，或者根据数据索引
// 这里我们构建一个富文本结构
return `{name|${params.name}}\n{val|${params.value}万} {pct|${params.data.percent}}`;
},
// 关键配置：使用 edge 对齐方式让标签像表格一样排列在两侧
alignTo: 'edge',
edgeDistance: 10, // 距离容器边缘的距离
minMargin: 5,
lineHeight: 20,
rich: {
name: {
fontSize: 13,
fontWeight: 'bold',
color: '#333',
padding: [0, 5]
},
val: {
fontSize: 12,
color: '#666'
},
pct: {
fontSize: 12,
color: '#666',
padding: [0, 5]
}
}
},
// 引导线配置
labelLine: {
length: 15,
length2: 60, // 第二段线长一点，以便连接到边缘
maxSurfaceAngle: 80
},
// 每一项的样式
itemStyle: {
borderColor: '#fff',
borderWidth: 2
}
}
]
};
myChart.setOption(option);
};
// 响应式处理
const resizeHandler = () => {
if (myChart) {
myChart.resize();
}
};
onMounted(() => {
nextTick(() => {
initChart();
window.addEventListener('resize', resizeHandler);
});
});
onUnmounted(() => {
window.removeEventListener('resize', resizeHandler);
if (myChart) {
myChart.dispose();
}
});
</script>
<style lang="scss" scoped>
.funding-source-container {
width: 100%;
background: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
// 头部样式
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
.title-wrapper {
display: flex;
align-items: center;
.blue-bar {
width: 4px;
height: 18px;
background-color: #409eff; // Element Plus Primary Blue
margin-right: 8px;
border-radius: 2px;
}
.title-text {
font-size: 18px;
font-weight: 700;
color: #303133;
}
}
.header-icons {
display: flex;
gap: 15px;
color: #909399;
cursor: pointer;
.el-icon {
font-size: 18px;
&:hover {
color: #409eff;
}
}
}
}
// 主体布局
.chart-body {
display: flex;
flex-direction: row;
height: 450px; // 固定一个高度给图表展示
// 左侧统计面板
.stats-panel {
width: 200px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
flex-shrink: 0;
.stat-card {
padding: 15px;
border-radius: 6px;
display: flex;
flex-direction: column;
gap: 8px;
.label {
font-size: 14px;
}
.value {
font-size: 20px;
font-weight: 800;
}
// 不同卡片的特定样式
&.total-card {
background-color: #eef6ff; // 浅蓝背景
.label { color: #409eff; }
.value { color: #185ebd; }
}
&.govt-card {
background-color: #fff2f2; // 浅红背景
.label { color: #f56c6c; }
.value { color: #c43e3e; }
}
&.other-card {
background-color: #f0f9eb; // 浅绿背景
.label { color: #67c23a; }
.value { color: #3a8e1e; }
}
}
}
// 右侧图表区域
.chart-panel {
flex: 1;
min-width: 0; // 防止 flex 子项溢出
height: 100%;
}
}
}
// 移动端适配微调
@media (max-width: 768px) {
.chart-body {
flex-direction: column !important;
height: auto !important;
.stats-panel {
width: 100% !important;
flex-direction: row !important;
overflow-x: auto;
padding-bottom: 10px;
}
.chart-panel {
height: 400px !important;
}
}
}
</style>
\ No newline at end of file
src/views/thinkTank/ThinkTankDetail/ReportTab.vue
浏览文件 @ e4a5b60a
......@@ -72,6 +72,7 @@ import { onMounted, ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { getThinkTankReport } from '@/api';
import { useRoute } from 'vue-router';
import { mockReportList } from '../mockData';
const route = useRoute();
const props = defineProps({
......@@ -102,7 +103,8 @@ const reportList = ref([
onMounted(() => {
getThinkTankReport({ id: route.params.id }).then(res => {
reportList.value = res.data;
// reportList.value = res.data;
reportList.value = mockReportList;
});
})
</script>
......@@ -145,8 +147,11 @@ onMounted(() => {
.report-card {
cursor: pointer;
border-radius: 10px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
border: 1px solid #e4e7ed;
padding: 10px;
}
.report-card:hover {
......@@ -173,9 +178,9 @@ onMounted(() => {
/* overflow: hidden; */
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-line-clamp: 1;
overflow: hidden;
-webkit-box-orient: vertical;
min-height: 42px;
}
.card-meta {
......
src/views/thinkTank/ThinkTankDetail/index.vue
浏览文件 @ e4a5b60a
......@@ -50,7 +50,7 @@ import PolicyTab from '@/components/PolicyTab.vue';
import DescTab from './DescTab.vue';
import { getThinkTankSummary } from '@/api';
import { useRoute } from 'vue-router';
import { mockThinkTankList } from '../mockData';
// --- Component State ---
const activeTab = ref('reports');
const route = useRoute();
......@@ -77,13 +77,16 @@ const currentComponent = computed(() => {
onMounted(() => {
getThinkTankSummary({ id: route.params.id }).then(res => {
console.log(res.data);
summary.value = res.data || {};
// summary.value = res.data || {};
summary.value = mockThinkTankList[0];
});
});
</script>
<style scoped>
/* 变量 1200px - 定义在组件根元素上 */
.page-container {
--max-width: 1650px;
background-color: #f5f7fa;
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
min-height: 100vh;
......@@ -99,7 +102,7 @@ onMounted(() => {
}
.header-container {
max-width: 1200px;
max-width: var(--max-width);
margin: 0 auto;
padding: 24px 24px 0;
display: flex;
......@@ -116,7 +119,7 @@ onMounted(() => {
}
.tabs-container {
max-width: 1200px;
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px;
}
......@@ -212,7 +215,7 @@ onMounted(() => {
}
.content-container {
max-width: 1200px;
max-width: var(--max-width);
width: 100%;
background-color: #fff;
padding: 24px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论