Skip to content

R
risk-monitor
提交 a6d0a804 authored 作者: 张烨's avatar 张烨
浏览文件
操作

Merge branch 'master' into zy-dev

上级 1a031e8a 4cd6ce99
隐藏空白字符变更
内嵌 并排
正在显示 包含 4712 行增加 和 847 行删除
src/api/companyPages/index.js
浏览文件 @ a6d0a804
......@@ -32,7 +32,13 @@ export function getEnterpriseNewDynamic(params) {
url: `/api/enterprisePage/newDynamic/${params}`,
})
}
//企业基本信息:最新动态(分页)
export function getEnterpriseNewDynamicPage(params) {
return request({
method: 'GET',
url: `/api/enterprisePage/newDynamicPage/${params}`,
})
}
//企业研发投入:年度研发投入对比
export function getEnterpriseStudy(params) {
......
src/components/base/messageBubble/index.vue
浏览文件 @ a6d0a804
......@@ -4,7 +4,9 @@
<div class="header-icon">
<img src="./image1.png" alt="" />
</div>
<div class="header-title">{{ "社交媒体" }}</div>
<div class="header-title">
<slot name='title'>{{ "社交媒体" }}</slot>
</div>
<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
</div>
<div class="box4-main">
......@@ -148,7 +150,7 @@ const handleToMoreNews = (item) => {
}
.header-title {
width: 80px;
width: 100%;
margin-top: 11px;
margin-left: 18px;
height: 26px;
......
src/components/base/newsList/newsItem.vue → src/components/base/newsList/NewsItem.vue
浏览文件 @ a6d0a804
......@@ -48,6 +48,8 @@ const handleToNewsAnalysis = (item, index) => {
};
</script>
<style lang="scss" scoped>
@use '@/styles/common.scss';
.box3-item {
display: flex;
align-items: center;
......@@ -90,12 +92,8 @@ const handleToNewsAnalysis = (item, index) => {
.title {
// width: 500px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: 'Source Han Sans CN';
font-size: 16px;
font-weight: 700;
line-height: 24px;
@extend .text-title-3-bold;
color: var(--text-primary-80-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
......@@ -108,39 +106,15 @@ const handleToNewsAnalysis = (item, index) => {
.time {
text-align: right;
height: 22px;
color: rgba(95, 101, 108, 1);
font-family: 'Source Han Sans CN';
font-size: 14px;
font-weight: 400;
line-height: 22px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@extend .text-tip-2;
color: var(--text-primary-65-color);
}
}
.right-footer {
height: 48px;
/* 调整为2行的高度：24px × 2 = 48px */
color: rgba(59, 65, 75, 1);
font-family: 'Source Han Sans CN';
font-size: 16px;
font-weight: 400;
line-height: 24px;
overflow: hidden;
display: -webkit-box;
/* 关键 */
-webkit-line-clamp: 2;
/* 显示2行 */
-webkit-box-orient: vertical;
/* 垂直方向排列 */
text-overflow: ellipsis;
/* 第二行省略号 */
white-space: normal;
/* 改为 normal */
word-break: break-word;
/* 允许单词换行 */
@extend .text-compact;
color: var(--text-primary-65-color);
@include common.text-ellipsis(2);
}
}
</style>
\ No newline at end of file
src/components/devStyle/components/constStyle.vue
浏览文件 @ a6d0a804
......@@ -3,7 +3,9 @@ import { ElSpace, ElButton } from 'element-plus';
import "@/styles/main.css"
import { copyToClipboardThenTip } from '@/utils/systemUtils'
const colors = [
// 黑色到白色主色一行
const rowBlackToWhite = [
{ title: "黑色", name: "--text-primary-color" },
{ title: "黑色90% / 主标题文字颜色", name: "--text-primary-90-color" },
{ title: "黑色80% / 小标题文字颜色", name: "--text-primary-80-color" },
{ title: "黑色65% / 正文颜色", name: "--text-primary-65-color" },
......@@ -12,7 +14,25 @@ const colors = [
{ title: "黑色5% / 分割线颜色", name: "--bg-black-5" },
{ title: "黑色2% / 灰色背景色", name: "--bg-black-2" },
{ title: "白色主色", name: "--bg-white-100" },
]
// 主色到主色高亮背景一行（主色高亮背景为浅色，需黑色文字）
const rowPrimaryToHighlight = [
{ title: "主色", name: "--color-primary-100" },
{ title: "主色50%", name: "--color-primary-50", light: true },
{ title: "主色35%", name: "--color-primary-35" },
{ title: "主色10%", name: "--color-primary-10", light: true },
{ title: "主色高亮背景", name: "--color-primary-2", light: true },
]
// 红色到绿色10%一行（*10% 为浅色背景，需黑色文字）
const rowRedToGreen10 = [
{ title: "红色", name: "--color-red-100" },
{ title: "红色10%", name: "--color-red-10", light: true },
{ title: "橙色", name: "--color-orange-100" },
{ title: "橙色10%", name: "--color-orange-10", light: true },
{ title: "黄色", name: "--color-yellow-100" },
{ title: "黄色10%", name: "--color-yellow-10", light: true },
{ title: "绿色", name: "--color-green-100" },
{ title: "绿色10%", name: "--color-green-10", light: true },
]
function copyColorVar(item) {
const color = `var(${item.name})`
......@@ -23,13 +43,36 @@ function copyColorVar(item) {
<template>
<el-space direction="vertical" alignment="flex-start">
<div class="text-title-2">颜色</div>
<el-space>
<el-button v-for="(item, index) in colors" :key="index" :color="`var(${item.name})`"
v-on:click="copyColorVar(item)">
{{ item.title }}
</el-button>
<el-space direction="vertical" alignment="flex-start">
<el-space wrap>
<el-button v-for="(item, index) in rowBlackToWhite" :key="'bw-' + index" :color="`var(${item.name})`"
@click="copyColorVar(item)">
{{ item.title }}
</el-button>
</el-space>
<el-space wrap>
<el-button v-for="(item, index) in rowPrimaryToHighlight" :key="'ph-' + index"
:class="{ 'color-btn-text-black': item.light }"
:style="item.light ? { '--btn-bg': `var(${item.name})` } : undefined" :color="`var(${item.name})`"
@click="copyColorVar(item)">
{{ item.title }}
</el-button>
</el-space>
<el-space wrap>
<el-button v-for="(item, index) in rowRedToGreen10" :key="'rg-' + index"
:class="{ 'color-btn-text-black': item.light }"
:style="item.light ? { '--btn-bg': `var(${item.name})` } : undefined" :color="`var(${item.name})`"
@click="copyColorVar(item)">
{{ item.title }}
</el-button>
</el-space>
</el-space>
</el-space>
</template>
<style scoped></style>
\ No newline at end of file
<style scoped>
/* 浅色背景按钮：文字黑色 */
:deep(.color-btn-text-black) {
color: var(--el-color-black) !important;
}
</style>
\ No newline at end of file
src/components/devStyle/components/index.vue
浏览文件 @ a6d0a804
......@@ -9,7 +9,7 @@ import { ElScrollbar, ElSpace } from "element-plus";
<template>
<el-scrollbar>
<div class="common-page">
<el-space direction="vertical" alignment="flex-start">
<el-space direction="vertical" :size="20" alignment="flex-start">
<div class="text-title-0-show">开发样式</div>
<div class="text-title-1-show">样式变量</div>
<const-style></const-style>
......
src/router/modules/company.js
浏览文件 @ a6d0a804
//企业主页
const companyPages = () => import('@/views/companyPages/index.vue')
const companyPages2 = () => import('@/views/companyPages2/index.vue')
const companyPagesRoutes = [
......@@ -14,6 +15,16 @@ const companyPagesRoutes = [
dynamicTitle: true
}
},
// todo: 开发过程测试，开发完成后删除，by hsx ，20260306
{
path: "/companyPages2/:id",
name: "companyPages2",
component: companyPages2,
meta: {
title: "企业主页",
dynamicTitle: true
}
},
]
......
src/styles/common.scss
浏览文件 @ a6d0a804
/***背景作为卡片***/
.background-as-card {
background-color: var(--color-primary-65);
background-color: var(--bg-white-80);
border-radius: 10px;
border: 1px solid rgba(234, 236, 238, 1);
border: 1px solid var(--bg-white-100);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
}
......@@ -10,10 +10,29 @@
.flex-display{
display: flex;
}
// 文本超出指定行数省略号显示
@mixin text-ellipsis($line-clamp) {
overflow: hidden;
display: -webkit-box;
/* 关键 */
-webkit-line-clamp: $line-clamp;
/* 显示2行 */
-webkit-box-orient: vertical;
/* 垂直方向排列 */
text-overflow: ellipsis;
/* 第二行省略号 */
white-space: normal;
/* 改为 normal */
word-break: break-word;
/* 允许单词换行 */
}
//禁止换行
.text-nowrap{
white-space: nowrap;
}
/***文本样式***/
.text-base{
color: var(--color-primary-90);
color: var(--color-primary-80);
}
//0级标题
......
src/styles/descriptions.scss
浏览文件 @ a6d0a804
......@@ -3,6 +3,7 @@
/***没有nav下划线***/
.common-descriptions .el-descriptions__label{
@extend .text-tip-1-bold;
color: var(--text-primary-80-color);
}
.common-descriptions .el-descriptions__content{
@extend .text-tip-1;
......
src/styles/main.css
浏览文件 @ a6d0a804
......@@ -4,8 +4,6 @@
--font-family-base: "Source Han Sans CN";
--font-size-base: 16px;
--color-bg-hover: #f6faff;
/* 普通按钮颜色 */
......@@ -29,6 +27,7 @@
--bg-black-5: #EAECEE;
--bg-black-2: #F7F8F9;
--bg-white-100: #FFFFFF;
--bg-white-80: rgba(255, 255, 255, 0.8);
--bg-white-65: rgba(255, 255, 255, 0.65);
--bg-white-50: rgba(255, 255, 255, 0.5);
--bg-white-35: rgba(255, 255, 255, 0.35);
......@@ -39,10 +38,22 @@
/* 主色 设计定义*/
--color-primary-100: #055FC2;
--color-primary-50: #82AFE0;
--color-primary-35: #AED6FF;
--color-primary-50: #89C1FF;
--color-primary-35: #B9DCFF;
--color-primary-10: #E7F3FF;
--color-primary-2: #F6FAFF;
/* 红色 设计定义 */
--color-red-100:#CE4F51;
--color-red-10:rgba(206, 79, 81, 0.1);
/* 橙色 设计定义 */
--color-orange-100:#FF954D;
--color-orange-10:rgba(255, 149, 77, 0.1);
/* 黄色 设计定义 */
--color-yellow-100:#E8BD0B;
--color-yellow-10:rgba(232, 189, 11, 0.1);
/* 绿色 设计定义 */
--color-green-100:#218139;
--color-green-10:rgba(33, 129, 57, 0.1);
}
.hover-dialog {
......
src/views/ZMOverView/components/fourSuppress/components/addDomain/index-back.vue 0 → 100644
浏览文件 @ a6d0a804
<!--全领域-->
<template>
<div class="content-wrapper">
<div class="btn-wrapper" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay(true)">
<div class="cards-mask">
<div class="btn-box" :style="{ transform: `translateX(-${currentIndex * (cardWidth + cardGap)}px)` }">
<div class="btn-item-outer" v-for="(item, indexx) in buttonsData" :key="indexx">
<div
v-for="(value, index) in item"
:key="index"
class="btn-item"
:style="{ background: value.background }"
>
<div
:style="{
backgroundImage: 'url(' + `/public/icon/ZM/btn-icon2-${value.originalIndex}.png` + ')'
}"
class="btn-left-text"
>
{{ value.text }}
</div>
<div class="btn-right">
{{ value.count + "次" }}
</div>
</div>
</div>
</div>
</div>
<img :src="leftBtn" alt="" @click="prev" class="left-btn" />
<img :src="rightBtn" alt="" @click="next" class="right-btn" />
</div>
<div class="main-charts">
<div class="charts-title">
<div class="title-left">
<img src="./icon/icon-1.png" alt="" />
<span>美对华领域打压遏制数量趋势</span>
</div>
<div class="title-right">
<el-select
v-model="deptValue"
placeholder="全部部门"
class="custom-select"
@change="handleGetDomainContainmentTrend"
>
<el-option label="全部部门" value="" />
<el-option
v-for="item in departmentList"
:key="item.departId"
:label="item.departName"
:value="item.departId"
/>
</el-select>
<el-select
v-model="methodValue"
placeholder="全部制裁手段"
class="custom-select"
@change="handleGetDomainContainmentTrend"
>
<el-option v-for="item in methodOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</div>
<div class="charts-content">
<div id="chartRef" class="chart-container"></div>
</div>
</div>
<div class="bottom-content">
<div class="news-section main-charts">
<div class="charts-title news-title">
<div class="title-left">
<img src="./icon/icon-2.png" alt="" style="width: 22px; height: 18px" />
<span>美对华领域打压遏制最新动态</span>
</div>
<div class="title-right-select">
<el-select v-model="selectedFieldForLatest" placeholder="全部领域" class="field-select">
<el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</div>
<div class="news-content">
<div v-for="(value, idx) in newsList" :key="idx" class="news-item">
<div class="news-item-title">
<div class="tag-container">
<!-- <div v-for="tag in value.tags" :key="tag" :class="getTagClass(tag)">
{{ tag }}
</div> -->
<AreaTag v-for="(tag, index) in value.tags" :key="index" :tagName="tag"></AreaTag>
</div>
<div class="date">
{{ value.date + " · " + value.type }}
</div>
</div>
<div class="content-title" @click="handleClickTitle(value)">
{{ value.title }}
</div>
<el-tooltip
effect="dark"
:content="value.content"
popper-class="common-prompt-popper"
placement="top"
:show-after="500"
>
<div class="content-text">
{{ value.content }}
</div>
</el-tooltip>
</div>
</div>
</div>
<div class="empty-section">
<div class="bottom-item">
<div class="bottom-item-title">
<img :src="icon3" alt="" />
<span>美对华领域打压遏制排行</span>
</div>
</div>
<div class="select-box">
<div class="rank-btns">
<div class="rank-btn" :class="{ active: rankType === 'institution' }" @click="rankType = 'institution'">
对我打压机构
</div>
<div class="rank-btn" :class="{ active: rankType === 'enterprise' }" @click="rankType = 'enterprise'">
受打压企业
</div>
<div class="rank-btn" :class="{ active: rankType === 'school' }" @click="rankType = 'school'">
受打压院校
</div>
</div>
<el-select v-model="selectedField" placeholder="全部领域" class="field-select">
<el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div class="main-box" v-loading="rankLoading" element-loading-background="rgba(255, 255, 255, 0.5)">
<!-- 机构排行的原有样式 -->
<template v-if="rankType === 'institution'">
<div v-for="(item, index) in rankList" :key="index" class="rank-item">
<div class="rank-num" :class="'rank-' + (index + 1)">{{ index + 1 }}</div>
<img :src="item.orgPicture ? item.orgPicture : defaultImg" alt="" class="rank-icon" />
<div class="rank-name" :title="item.name">{{ item.name }}</div>
<div class="rank-progress-container">
<div class="rank-progress-bar" :style="{ width: getProgressWidth(item.count) }"></div>
</div>
<div class="rank-count">{{ item.count }}次</div>
</div>
</template>
<!-- 企业/院校排行的表格样式 -->
<template v-else>
<div class="table-header">
<div class="col-rank"></div>
<div class="col-name" style="color: rgb(59, 65, 75); font-weight: 700">
{{ rankType === "enterprise" ? "公司名称" : "院校名称" }}
</div>
<div class="col-domain" style="color: rgb(59, 65, 75); font-weight: 700">所属领域</div>
<div class="col-date" style="color: rgb(59, 65, 75); font-weight: 700">制裁时间</div>
<div class="col-member" v-if="rankType !== 'school'" style="color: rgb(59, 65, 75); font-weight: 700">
关键人物
</div>
</div>
<div class="table-list">
<div v-for="(item, index) in rankList" :key="index" class="table-row">
<div class="col-rank rank-num" :class="'rank-' + (index + 1)">{{ index + 1 }}</div>
<div class="col-name flex-align">
<img :src="item.orgPicture ? item.orgPicture : defaultImg" class="rank-icon" />
<span class="text-ellipsis" :title="item.name">{{ item.name }}</span>
</div>
<div class="col-domain">
<div class="domain-tags">
<span
v-for="(tag, tIndex) in item.domains.slice(0, rankType === 'enterprise' ? 2 : 3)"
:key="tIndex"
class="mini-tag"
:class="getTagClass(tag)"
>
{{ tag }}
</span>
</div>
</div>
<div class="col-date">{{ item.date }}</div>
<div class="col-member" v-if="rankType !== 'school'">{{ item.member }}</div>
</div>
</div>
</template>
</div>
</div>
</div>
<div class="line-time">
<div class="bottom-item">
<div class="bottom-item-title">
<img :src="icon4" alt="" />
<span>美对我领域打压遏制时间线</span>
</div>
<el-select
v-model="selectedFieldTimeline"
placeholder="全部领域"
class="field-select"
@change="handleGetDomainContainmentTimeline"
>
<el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div class="line-main">
<div class="svg-container">
<svg :viewBox="`0 0 ${svgWidth} ${svgHeight}`" width="100%">
<defs>
<marker
id="arrow"
markerWidth="10"
markerHeight="10"
refX="8"
refY="3"
orient="auto"
markerUnits="strokeWidth"
>
<path d="M0,0 L0,6 L9,3 z" fill="#e8f2ff" />
</marker>
</defs>
<path :d="snakePath" fill="none" stroke="rgba(185, 220, 255, 1)" stroke-width="5" />
<g v-for="(label, index) in axisDates" :key="'date-' + index">
<foreignObject :x="label.x" :y="label.y" width="80" height="60" style="overflow: visible">
<div class="axis-date-label">
<div class="year">{{ label.year }}</div>
<div class="month">{{ label.month }}</div>
</div>
</foreignObject>
</g>
<g v-for="(node, index) in timelineNodes" :key="index" @click="handleTimeLineNode(node)">
<line :x1="node.x" :y1="node.y" :x2="node.x" :y2="node.y + 150" stroke="#1677ff" stroke-width="1" />
<circle :cx="node.x" :cy="node.y" r="4" fill="#fff" stroke="#1677ff" stroke-width="3" />
<foreignObject
:x="node.contentX"
:y="node.contentY"
:width="node.contentWidth"
:height="node.contentHeight"
style="overflow: visible"
>
<div class="timeline-content-item">
<div class="item-tags">
<!-- <span v-for="tag in node.tags" :key="tag" :class="getTagClass(tag)">{{ tag }}</span> -->
<AreaTag v-for="(tag, idx) in node.tags" :key="idx" :tagName="tag"></AreaTag>
</div>
<div class="item-title">
<CommonPrompt :content="node.title" />
</div>
<el-tooltip
effect="dark"
:content="node.content"
popper-class="common-prompt-popper"
placement="top"
:show-after="500"
>
<div class="item-desc">{{ node.content }}</div>
</el-tooltip>
<div class="item-footer">{{ node.info }}</div>
</div>
</foreignObject>
</g>
</svg>
</div>
</div>
<div class="left-btn" @click="handleLeft">
<img src="@/assets/icons/card-btn-left.png" alt="" />
</div>
<div class="right-btn" @click="handleRight">
<img src="@/assets/icons/card-btn-right.png" alt="" />
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted, watch, inject, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import setChart from "@/utils/setChart";
import getMultiLineChart from "./multiLineChart";
import CommonPrompt from "../../../../commonPrompt/index.vue";
import leftBtn from "../../assets/left-btn.png";
import rightBtn from "../../assets/right-btn.png";
import icon3 from "./icon/icon-3.png";
import icon4 from "./icon/icon-4.png";
import defaultImg from "../../../../assets/images/default-icon2.png";
import {
getAllDomainCount,
getDomainContainmentTrend,
getTechnologyGameAnalysis,
getDomainContainmentRanking,
getDomainContainmentTimeline
} from "@/api/zmOverview/allDomains";
import { getUSGovernmentLatestDynamic, getDepartmentList, getSanTypeList } from "@/api/allGovernment.js";
import { ElMessage } from "element-plus";
const router = useRouter();
const activeDate = inject("activeDate");
const deptValue = ref("");
const methodValue = ref("");
const departmentList = ref([]);
const methodOptions = ref([
// { label: "全部制裁手段", value: "" },
// { label: "法案", value: "-1" },
// { label: "政令", value: "-2" },
// { label: "实体清单", value: "1" },
// { label: "特别国民指定清单", value: "2" },
// { label: "涉军企业", value: "3" },
// { label: "行业制裁识别清单", value: "4" },
// { label: "无法核实清单", value: "5" },
// { label: "军事最终用户清单", value: "6" },
// { label: "非SDN中国军工企业名单", value: "7" },
// { label: "拒绝往来人员清单", value: "8" },
// { label: "军事最终用途与最终用户规则", value: "9" },
// { label: "欧盟合并制裁清单", value: "10" },
// { label: "英国制裁清单", value: "11" },
// { label: "加拿大合并自主制裁清单", value: "12" },
// { label: "商业管制清单", value: "13" }
]);
const handleGetSanList = async () => {
const params = {
orgId: deptValue.value
};
try {
const res = await getSanTypeList(params);
console.log("制裁手段列表", res);
if (res.code === 200 && res.data) {
methodOptions.value = res.data.map(item => {
return {
label: item.name,
value: item.id
};
});
}
} catch (error) {}
};
const getDepartmentListData = async () => {
const params = {
sanTypeId: methodValue.value
};
try {
const res = await getDepartmentList(params);
if (res.code === 200 && res.data) {
departmentList.value = res.data;
}
} catch (error) {
console.error("获取部门数据失败:", error);
}
};
watch(
() => methodValue.value,
val => {
getDepartmentListData();
}
);
watch(
() => deptValue.value,
val => {
handleGetSanList();
}
);
const rankType = ref("institution");
const rankLoading = ref(false);
const selectedField = ref("");
const selectedFieldForLatest = ref("");
const selectedFieldTimeline = ref("");
const timelineContainerWidth = 1700;
// 美政府部门打压遏制最新动态
const newsList = ref([]);
const getUSGovernmentLatestDynamicData = async () => {
try {
const res = await getUSGovernmentLatestDynamic();
if (res.code === 200 && res.data) {
// 将接口数据转换为 newsList 需要的格式
newsList.value = res.data.map(item => {
const dateObj = new Date(item.time);
const formattedDate = `${dateObj.getFullYear()}年${dateObj.getMonth() + 1}月${dateObj.getDate()}日`;
return {
id: item.id,
tags: item.industrylist || [],
date: formattedDate,
type: item.orgName || "未知机构", // 使用 orgName 作为类型信息
title: item.title,
content: item.content || item.title // 如果 content 为空，使用 title 填充
};
});
}
} catch (error) {
console.error("获取美政府部门打压遏制最新动态失败:", error);
}
};
const handleClickTitle = item => {
if (!item || !item.id) return;
// 打开新标签页
const { href } = router.resolve({
path: "/newsAnalysis",
query: {
newsId: item.id
}
});
window.open(href, "_blank");
};
const timelineList = ref([]);
// 处理时间线数据的方法
const processTimelineData = rawData => {
if (!rawData || !Array.isArray(rawData) || rawData.length === 0) {
return [];
}
return rawData.map(item => {
const eventDate = item.eventDate ? new Date(item.eventDate) : null;
const formattedDate = eventDate ? `${eventDate.getFullYear()}年 ${eventDate.getMonth() + 1}月` : "";
let tags = [];
if (item.eventDomainList && Array.isArray(item.eventDomainList)) {
if (!selectedFieldTimeline.value) {
tags = item.eventDomainList.slice(0, 3).map(domain => domain.domainName || "");
} else {
const matchedIndex = item.eventDomainList.findIndex(domain => domain.domainId === selectedFieldTimeline.value);
if (matchedIndex !== -1) {
const matchedItem = item.eventDomainList[matchedIndex];
const remainingItems = item.eventDomainList.filter((_, idx) => idx !== matchedIndex);
const sortedList = [matchedItem, ...remainingItems];
tags = sortedList.slice(0, 3).map(domain => domain.domainName || "");
} else {
tags = item.eventDomainList.slice(0, 3).map(domain => domain.domainName || "");
}
}
}
return {
date: formattedDate,
tags: tags,
title: item.eventName || "",
content: item.eventDesc || "",
info: `${item.eventDate || ""} · ${item.eventType || ""}`,
eventId: item.eventId,
eventOrg: item.eventOrg,
eventType: item.eventType,
eventCountryImg: item.eventCountryImg,
eventDomainList: item.eventDomainList
};
});
};
// 获取领域遏制时间线数据
const handleGetDomainContainmentTimeline = async () => {
try {
const params = {};
if (selectedFieldTimeline.value) {
params.domain = selectedFieldTimeline.value;
}
console.log("美对我领域打压遏制时间线", params);
const res = await getDomainContainmentTimeline(params);
console.log("美对我领域打压遏制时间线", res);
if (res.code === 200 && res.data) {
// 处理返回的数据结构
const processedData = processTimelineData(res.data);
// processedData.forEach(item => {
// if (item.eventDomainList && Array.isArray(item.eventDomainList)) {
// if (!selectedFieldTimeline.value) {
// item.eventDomainList = item.eventDomainList.slice(0, 3);
// } else {
// const matchedIndex = item.eventDomainList.findIndex(
// domain => domain.domainId === selectedFieldTimeline.value
// );
// if (matchedIndex !== -1) {
// const matchedItem = item.eventDomainList[matchedIndex];
// const remainingItems = item.eventDomainList.filter((_, idx) => idx !== matchedIndex);
// item.eventDomainList = [matchedItem, ...remainingItems.slice(0, 2)];
// } else {
// item.eventDomainList = item.eventDomainList.slice(0, 3);
// }
// }
// }
// });
timelineList.value = processedData;
console.log("timelineList", timelineList.value);
}
} catch (error) {
console.error("获取美对我领域打压遏制时间线失败:", error);
// 设置默认空数组
timelineList.value = [];
}
};
const maxPerRow = 3;
const nodeGapX = 420;
const rowHeight = 230;
const startX = 250;
const startY = 45;
const timeLineActiveIndex = ref(0);
const axisDates = computed(() => {
const dates = [];
if (timelineList.value.length > 0) {
dates.push({
year: timelineList.value[0].date.split(" ")[0],
month: timelineList.value[0].date.split(" ")[1],
x: startX - 140,
y: startY - 25
});
const lastNode = timelineNodes.value[timelineNodes.value.length - 1];
const isEvenRow = lastNode.row % 2 === 0;
const endX = isEvenRow ? lastNode.x + 400 : lastNode.x - 140;
dates.push({
year: timelineList.value[timelineList.value.length - 1].date.split(" ")[0],
month: timelineList.value[timelineList.value.length - 1].date.split(" ")[1],
x: endX,
y: lastNode.y - 25
});
}
return dates;
});
const handleLeft = () => {
if (timeLineActiveIndex.value === 0) {
ElMessage.warning("当前已经是第一组数据！");
} else {
timeLineActiveIndex.value--;
}
};
const handleRight = () => {
if (timeLineActiveIndex.value === timelineList.value.length % 9) {
ElMessage.warning("当前已经是最后一组数据！");
} else {
timeLineActiveIndex.value++;
}
console.log("axisDates", axisDates.value);
console.log("timelineNodes", timelineNodes.value);
};
const timelineNodes = computed(() => {
// 计算起始索引：activeIndex * 9
const startIndex = timeLineActiveIndex.value * 9;
// 计算结束索引：起始索引 + 9（因为slice的第二个参数是结束索引，不包含）
const endIndex = timeLineActiveIndex.value + 9;
const showTimeLineList = timelineList.value.slice(startIndex, endIndex);
console.log("时间线相关数据 showTimeLineList =>", showTimeLineList);
console.log("时间线相关数据 timelineList =>", timelineList.value);
return showTimeLineList.map((item, index) => {
const row = Math.floor(index / maxPerRow);
const col = index % maxPerRow;
let x;
if (row % 2 === 0) {
x = startX + col * nodeGapX;
} else {
x = startX + (maxPerRow - 1 - col) * nodeGapX;
}
const y = startY + row * rowHeight;
const contentX = x + 20;
const contentY = y + 10;
return {
...item,
x,
y,
row,
col,
contentX,
contentY,
contentWidth: 320,
contentHeight: 180
};
});
});
const getColorName = tag => {
const tagColorMap = {
航空航天: "blue",
生物科技: "blue",
集成电路: "blue",
能源: "green",
新材料: "green",
人工智能: "red"
};
if (tagColorMap[tag]) return tagColorMap[tag];
const colors = ["blue", "green", "red", "orange", "purple", "cyan"];
let hash = 0;
for (let i = 0; i < tag.length; i++) {
hash = tag.charCodeAt(i) + ((hash << 5) - hash);
}
return colors[Math.abs(hash) % colors.length];
};
const getTagClass = tag => {
return "tag-item " + `tag-${getColorName(tag)}`;
};
const snakePath = computed(() => {
if (timelineNodes.value.length === 0) return "";
let path = `M ${startX - 100} ${startY}`;
path += ` L ${timelineNodes.value[0].x} ${timelineNodes.value[0].y}`;
for (let i = 0; i < timelineNodes.value.length - 1; i++) {
const curr = timelineNodes.value[i];
const next = timelineNodes.value[i + 1];
if (curr.row !== next.row) {
const radius = rowHeight / 2;
if (curr.row % 2 === 0) {
const turnX = curr.x + 400;
path += ` L ${turnX} ${curr.y}`;
path += ` A ${radius} ${radius} 0 0 1 ${turnX} ${next.y}`;
path += ` L ${next.x} ${next.y}`;
} else {
const turnX = curr.x - 100;
path += ` L ${turnX} ${curr.y}`;
path += ` A ${radius} ${radius} 0 0 0 ${turnX} ${next.y}`;
path += ` L ${next.x} ${next.y}`;
}
} else {
path += ` L ${next.x} ${next.y}`;
}
}
const last = timelineNodes.value[timelineNodes.value.length - 1];
if (last.row % 2 === 0) {
path += ` L ${last.x + 400} ${last.y}`;
} else {
path += ` L ${last.x - 100} ${last.y}`;
}
return path;
});
const svgWidth = computed(() => {
return timelineContainerWidth;
});
const svgHeight = computed(() => {
const rows = Math.ceil(timelineList.value.length / maxPerRow);
console.log("看下高度", rows);
return startY + rows * rowHeight + 50;
});
const fieldOptions = [
{ value: "", label: "全部领域" },
{ value: "1", label: "人工智能" },
{ value: "2", label: "生物科技" },
{ value: "3", label: "新一代信息技术" },
{ value: "4", label: "量子科技" },
{ value: "5", label: "新能源" },
{ value: "6", label: "集成电路" },
{ value: "7", label: "海洋" },
{ value: "8", label: "先进制造" },
{ value: "9", label: "新材料" },
{ value: "10", label: "航空航天" },
{ value: "11", label: "深海" },
{ value: "12", label: "极地" },
{ value: "13", label: "太空" },
{ value: "14", label: "核" }
];
// 全领域统计
const buttonsData = ref([]);
const bgList = [
{
text: "集成电路",
count: 101,
background: "linear-gradient(180.00deg, rgba(255, 102, 102, 1),rgba(255, 102, 102, 0.5) 100%)"
},
{
text: "人工智能",
count: 132,
background: "linear-gradient(180.00deg, rgba(51, 153, 255, 1),rgba(51, 153, 255, 0.5) 100%)"
},
{
text: "新一代信息技术",
count: 105,
background: "linear-gradient(180.00deg, rgba(255, 187, 51, 1),rgba(255, 187, 51, 0.5) 100%)"
},
{
text: "量子科技",
count: 97,
background: "linear-gradient(180.00deg, rgba(117, 73, 255, 1),rgba(117, 73, 255, 0.5) 100%)"
},
{
text: "先进制造",
count: 84,
background: "linear-gradient(180.00deg, rgba(102, 102, 102, 1),rgba(102, 102, 102, 0.5) 100%)"
},
{
text: "航空航天",
count: 77,
background: "linear-gradient(180.00deg, rgba(51, 102, 255, 1),rgba(51, 102, 255, 0.5) 100%)"
},
{
text: "生物科技",
count: 62,
background: "linear-gradient(180.00deg, rgba(102, 204, 204, 1),rgba(102, 204, 204, 0.5) 100%)"
},
{
text: "新能源",
count: 60,
background: "linear-gradient(180.00deg, rgba(102, 187, 51, 1),rgba(102, 187, 51, 0.5) 100%)"
},
{
text: "新材料",
count: 43,
background: "linear-gradient(180.00deg, rgba(255, 102, 51, 1),rgba(255, 102, 51, 0.5) 100%)"
},
{
text: "海洋",
count: 25,
background: "linear-gradient(180.00deg, rgba(153, 204, 255, 1),rgba(153, 204, 255, 0.5) 100%)"
},
{
text: "核",
count: 25,
background: "linear-gradient(180.00deg, rgba(255, 102, 102, 1),rgba(255, 102, 102, 0.5) 100%)"
},
{
text: "太空",
count: 25,
background: "linear-gradient(180.00deg, rgba(51, 153, 255, 1),rgba(51, 153, 255, 0.5) 100%)"
},
{
text: "其他",
count: 25,
background: "linear-gradient(180.00deg, rgba(255, 187, 51, 1),rgba(255, 187, 51, 0.5) 100%)"
},
{
text: "深海",
count: 25,
background: "linear-gradient(180.00deg, rgba(117, 73, 255, 1),rgba(117, 73, 255, 0.5) 100%)"
},
{
text: "极地",
count: 25,
background: "linear-gradient(180.00deg, rgba(102, 102, 102, 1),rgba(102, 102, 102, 0.5) 100%)"
},
{
text: "新一代通信网络",
count: 25,
background: "linear-gradient(180.00deg, rgba(153, 204, 255, 1),rgba(153, 204, 255, 0.5) 100%)"
}
];
const getCalculatedDate = type => {
const now = new Date();
const endDate = new Date();
const start = new Date();
switch (type) {
case "week": // 近一个月
start.setMonth(now.getMonth() - 1);
break;
case "three_month": // 近三个月
start.setMonth(now.getMonth() - 3);
break;
case "six_month": // 近半年
start.setMonth(now.getMonth() - 6);
break;
case "year": // 近一年
start.setFullYear(now.getFullYear() - 1);
break;
default:
start.setMonth(now.getMonth() - 1); // 默认近一个月
}
const formatDate = date => {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
return `${year}-${month}-${day}`;
};
return {
startDate: formatDate(start),
endDate: formatDate(endDate)
};
};
const handleGetAllDomainCount = async () => {
try {
const { startDate, endDate } = getCalculatedDate(activeDate.value);
const res = await getAllDomainCount({
startDate: startDate,
endDate: endDate
});
console.log("全领域统计", res);
if (res.code === 200 && res.data) {
// 按照 countNum 从大到小排序
res.data.sort((a, b) => b.countNum - a.countNum);
buttonsData.value = res.data.map((item, index) => {
const matchedBg = bgList.find(bg => bg.text === item.countName);
const background = matchedBg ? matchedBg.background : bgList[index % 10].background;
// 映射图标索引
let iconIndex = 0; // 默认
switch (item.countName) {
case "集成电路":
iconIndex = 0;
break;
case "人工智能":
iconIndex = 1;
break;
case "新一代通信网络":
case "新一代信息技术":
iconIndex = 2;
break;
case "量子科技":
iconIndex = 3;
break;
case "先进制造":
iconIndex = 4;
break;
case "航空航天":
iconIndex = 5;
break;
case "生物科技":
iconIndex = 6;
break;
case "新能源":
iconIndex = 7;
break;
case "新材料":
iconIndex = 8;
break;
case "海洋":
iconIndex = 9;
break;
default:
iconIndex = 0;
}
return {
text: item.countName,
count: item.countNum,
background: background,
originalIndex: iconIndex
};
});
const chunkSize = 2;
buttonsData.value = Array.from({ length: Math.ceil(buttonsData.value.length / chunkSize) }, (_, i) =>
buttonsData.value.slice(i * chunkSize, i * chunkSize + chunkSize)
);
console.log("buttonsData", buttonsData.value);
startAutoPlay();
}
} catch (error) {}
};
const box5Data = ref({});
const handleGetDomainContainmentTrend = async () => {
try {
const { startDate, endDate } = getCalculatedDate(activeDate.value);
const params = {
startDate,
endDate
};
if (deptValue.value) {
params.org = deptValue.value;
}
if (methodValue.value) {
params.sanMeasures = methodValue.value;
}
const res = await getDomainContainmentTrend(params);
console.log("美对华领域打压遏制数量趋势", res);
if (res.code === 200 && res.data) {
// 处理返回的数据结构，按照 mockdata.json 中的格式
const processedData = processDomainTrendData(res.data);
box5Data.value = processedData;
// 更新图表
let Chart = getMultiLineChart(box5Data.value);
setChart(Chart, "chartRef");
}
} catch (error) {
console.error("获取美对华领域打压遏制数量趋势失败:", error);
}
};
// 处理领域趋势数据的方法
const processDomainTrendData = rawData => {
// 提取所有的月份作为标题
const titles = rawData.map(item => item.yearOrMonth).reverse();
// 收集所有不重复的领域名称
const domainNamesSet = new Set();
rawData.forEach(item => {
item.domainList.forEach(domain => {
domainNamesSet.add(domain.domainName);
});
});
const domainNames = Array.from(domainNamesSet);
// 定义颜色映射
const colorMap = {
人工智能: "#E34D59",
新一代通信网络: "#FF9F1C",
核: "#FFB3B3",
生物科技: "#00A79D",
量子科技: "#7B61FF",
先进制造: "#363B42",
新能源: "#2BA471",
太空: "#3762F0",
集成电路: "#0052D9",
新材料: "#FFD900",
航空航天: "#3762F0",
海洋: "#76D1FF",
深海: "#002060",
其他: "#A6A6A6"
};
// 生成数据系列
const dataSeries = domainNames.map(domainName => {
const values = rawData
.map(monthData => {
const domainItem = monthData.domainList.find(d => d.domainName === domainName);
return domainItem ? domainItem.domainNum : 0;
})
.reverse(); // 数据值也需要跟随标题反转顺序
return {
name: domainName,
color: colorMap[domainName] || `#${Math.floor(Math.random() * 16777215).toString(16)}`, // 如果没有预定义颜色，则随机生成
value: values
};
});
return {
title: titles,
data: dataSeries
};
};
const rankList = ref([]);
const maxCount = computed(() => {
if (!rankList.value || rankList.value.length === 0) return 0;
return Math.max(...rankList.value.map(item => item.count || 0));
});
const getProgressWidth = count => {
if (!maxCount.value) return "0%";
return (count / maxCount.value) * 100 + "%";
};
// 处理排名数据的方法
const processRankingData = rawData => {
if (!rawData || !Array.isArray(rawData) || rawData.length === 0) {
return [];
}
return rawData.map(item => {
// 格式化日期：2025-10-08 -> 2025.10.8
let formattedDate = "";
if (item.sanctionDate) {
const date = new Date(item.sanctionDate);
if (!isNaN(date.getTime())) {
formattedDate = `${date.getFullYear()}.${date.getMonth() + 1}.${date.getDate()}`;
} else {
formattedDate = item.sanctionDate;
}
}
return {
name: item.orgName || "",
count: item.orgCount || 0,
orgPicture: item.orgPicture,
// 新增字段
domains: item.domainList ? item.domainList.map(d => d.name) : [],
date: formattedDate,
member: item.keyMember || "-"
};
});
};
const rankTypeMap = {
institution: "对我打压机构",
enterprise: "受打压企业",
school: "受打压院校"
};
// 获取领域遏制排名数据
const handleGetDomainContainmentRanking = async () => {
rankLoading.value = true;
rankList.value = [];
try {
const res = await getDomainContainmentRanking(
rankTypeMap[rankType.value],
!!selectedField.value ? selectedField.value : ""
);
if (res.code === 200 && res.data) {
// 处理返回的数据结构
const processedData = processRankingData(res.data);
rankList.value = processedData;
}
} catch (error) {
console.error("获取美对华领域打压遏制排行失败:", error);
// 设置默认空数组
rankList.value = [];
} finally {
rankLoading.value = false;
}
};
// 监听rankType变化, 调用获取领域遏制排名数据方法
watch(rankType, handleGetDomainContainmentRanking);
// 监听selectedField变化, 调用获取领域遏制排名数据方法
watch(selectedField, handleGetDomainContainmentRanking);
const currentIndex = ref(0);
let autoTimer = null;
const visibleCount = 7;
const cardWidth = 215; // 卡片宽度
const cardGap = 16; // 卡片间距
const startAutoPlay = isContiune => {
if (!isContiune) {
currentIndex.value = 0;
}
stopAutoPlay();
if (buttonsData.value.length > visibleCount) {
autoTimer = setInterval(() => {
next();
}, 3000);
}
};
const stopAutoPlay = () => {
if (autoTimer) {
clearInterval(autoTimer);
autoTimer = null;
}
};
const next = () => {
let arr = [...buttonsData.value];
if (currentIndex.value < buttonsData.value.length - visibleCount) {
currentIndex.value++;
} else {
// currentIndex.value = 0;
buttonsData.value = [...buttonsData.value, ...arr];
currentIndex.value++;
}
};
const prev = () => {
if (currentIndex.value > 0) {
currentIndex.value--;
} else {
currentIndex.value = Math.max(0, buttonsData.value.length - visibleCount);
}
};
// const next = () => {
// const maxIndex = buttonsData.value.length - visibleCount;
// if (currentIndex.value < maxIndex) {
// currentIndex.value++;
// } else {
// // 滚动到末尾时，重置到开头并复制数组实现无缝滚动
// const arr = [...buttonsData.value];
// buttonsData.value = [...buttonsData.value, ...arr];
// currentIndex.value = buttonsData.value.length - visibleCount - arr.length;
// }
// };
// const prev = () => {
// if (currentIndex.value > 0) {
// currentIndex.value--;
// } else {
// // 滚动到开头时，跳转到末尾
// currentIndex.value = buttonsData.value.length - visibleCount;
// }
// };
const handleTimeLineNode = node => {
// console.log("timeLineNode", node);
if (node.eventType === "科技法案") {
window.sessionStorage.setItem("curTabName", node.title);
const route = router.resolve({
path: "/billLayout",
query: {
billId: node.eventId
}
});
window.open(route.href, "_blank");
}
};
onMounted(() => {
// let Chart = getMultiLineChart(box5Data.value);
// setChart(Chart, "chartRef");
handleGetDomainContainmentTrend();
getDepartmentListData();
handleGetSanList();
handleGetAllDomainCount();
handleGetDomainContainmentRanking();
handleGetDomainContainmentTimeline();
getUSGovernmentLatestDynamicData();
startAutoPlay();
});
onUnmounted(() => {
stopAutoPlay();
});
watch(activeDate, () => {
handleGetAllDomainCount();
handleGetDomainContainmentTrend();
});
</script>
<style lang="scss" scoped>
.content-wrapper {
width: 1666px;
height: 2132px;
}
.btn-wrapper {
position: relative;
width: 1601px;
}
.cards-mask {
width: 100%;
overflow: hidden; // 仅在这里隐藏超出部分，不影响外层的按钮
}
.btn-box {
width: 100%;
width: max-content;
height: 176px;
overflow: hidden;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
gap: 16px;
padding: 0;
transition: transform 0.5s ease; // 平滑过渡动画
}
.left-btn {
width: 24px;
height: 48px;
position: absolute;
top: 50%;
left: -33px;
transform: translateY(-50%);
cursor: pointer;
z-index: 10;
}
.right-btn {
width: 24px;
height: 48px;
position: absolute;
top: 50%;
right: -33px;
transform: translateY(-50%);
cursor: pointer;
z-index: 10;
}
.btn-item {
/* 全领域-总统计 */
// width: 307px;
width: 215px;
height: 80px;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
margin-bottom: 10px;
.btn-left-text {
width: fit-content;
min-width: 60px;
max-width: 97px;
height: 60px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
font-family: YouSheBiaoTiHei;
font-size: 24px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
color: rgba(255, 255, 255, 1);
//换行
white-space: wrap;
display: flex;
align-items: center;
font-style: italic;
}
.btn-right {
font-family: YouSheBiaoTiHei;
font-size: 30px;
font-weight: 400;
color: rgba(255, 255, 255, 1);
font-style: italic;
}
}
.btn-left {
position: relative;
display: flex;
align-items: center;
}
.btn-left-icon {
margin-right: 8px; // 图标和文本之间的间距
}
.main-charts {
margin-top: 16px;
width: 1601px;
height: 500px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.65);
box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);
display: flex;
flex-direction: column;
.charts-title {
width: 100%;
height: 54px;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 17px;
padding-right: 35px;
box-sizing: border-box;
background: linear-gradient(180deg, rgba(231, 243, 255, 1) 0%, rgba(231, 243, 255, 0) 100%);
.title-left {
display: flex;
align-items: center;
img {
width: 18px;
height: 18px;
margin-right: 14px;
}
span {
font-family: YouSheBiaoTiHei;
font-size: 24px;
font-weight: 400;
line-height: 24px;
color: rgb(5, 95, 194);
}
}
.title-right {
display: flex;
height: 48px;
align-items: end;
gap: 12px;
padding-right: 17px;
.custom-select {
width: 160px;
:deep(.el-input) {
height: 32px;
.el-input__wrapper {
background-color: #fff;
box-shadow: 0 0 0 1px #dcdfe6 inset;
border-radius: 4px;
padding: 0 12px;
height: 32px;
&:hover {
box-shadow: 0 0 0 1px #c0c4cc inset;
}
&.is-focus {
box-shadow: 0 0 0 1px #409eff inset;
}
}
.el-input__inner {
font-family: "Microsoft YaHei";
font-size: 16px;
font-weight: 400;
color: rgb(95, 101, 108);
height: 32px;
line-height: 24px;
&::placeholder {
color: rgb(95, 101, 108);
}
}
}
}
}
.title-right-select {
width: 150px;
}
}
.charts-content {
flex: 1;
width: 100%;
padding: 20px 40px 20px 40px;
box-sizing: border-box;
.chart-container {
width: 100%;
height: 100%;
}
}
}
.bottom-content {
display: flex;
gap: 17px;
background: rgba(255, 255, 255, 0.65);
.news-section {
width: 792px;
height: 700px;
.news-title {
padding: 8px;
}
.tag-container {
display: flex;
align-items: center;
gap: 8px;
.tag-item {
padding: 2px 8px;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
border: 1px solid transparent;
&.tag-blue {
color: rgba(9, 88, 217, 1);
background: rgba(230, 244, 255, 1);
border-color: rgba(186, 224, 255, 1);
}
&.tag-green {
color: rgba(56, 158, 13, 1);
background: rgba(246, 255, 237, 1);
border-color: rgba(217, 247, 190, 1);
}
&.tag-red {
color: rgba(245, 34, 45, 1);
background: rgba(255, 241, 240, 1);
border-color: rgba(255, 163, 158, 1);
}
&.tag-orange {
color: rgba(250, 140, 22, 1);
background: rgba(255, 247, 230, 1);
border-color: rgba(255, 213, 145, 1);
}
&.tag-purple {
color: rgba(114, 46, 209, 1);
background: rgba(249, 240, 255, 1);
border-color: rgba(211, 173, 247, 1);
}
&.tag-cyan {
color: rgba(19, 194, 194, 1);
background: rgba(230, 255, 251, 1);
border-color: rgba(135, 232, 222, 1);
}
}
}
}
.empty-section {
width: 792px;
height: 700px;
margin-top: 16px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.65);
box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);
.bottom-item {
width: 100%;
height: 48px;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 17px;
padding-right: 35px;
box-sizing: border-box;
background: linear-gradient(180deg, rgba(231, 243, 255, 1) 0%, rgba(231, 243, 255, 0) 100%);
.bottom-item-title {
display: flex;
align-items: center;
img {
width: 18px;
height: 18px;
margin-right: 14px;
}
span {
font-family: YouSheBiaoTiHei;
font-size: 24px;
font-weight: 400;
line-height: 24px;
color: rgb(5, 95, 194);
}
}
}
.select-box {
width: 691px;
height: 32px;
margin: 10px auto 5px auto;
display: flex;
justify-content: space-between;
align-items: center;
.rank-btns {
display: flex;
gap: 8px;
.rank-btn {
padding: 4px 12px;
border-radius: 4px;
border: 1px solid rgb(230, 231, 232);
font-family: "Microsoft YaHei";
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: rgb(95, 101, 108);
cursor: pointer;
background-color: #fff;
&.active {
color: rgb(5, 95, 194);
border-color: rgb(5, 95, 194);
background-color: rgba(231, 243, 255, 1);
}
}
}
.field-select {
width: 160px;
:deep(.el-input) {
.el-input__wrapper {
height: 32px;
padding: 0 12px;
box-sizing: border-box;
background-color: #fff;
border-radius: 4px;
.el-input__inner {
height: 32px;
line-height: 32px;
font-family: "Microsoft YaHei";
font-size: 16px;
font-weight: 400;
color: rgb(95, 101, 108);
&::placeholder {
color: rgb(95, 101, 108);
}
}
}
}
}
}
.main-box {
width: 100%;
height: 577px;
padding: 24px 30px 0px 27px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 28px;
overflow-y: auto;
.rank-item {
display: flex;
align-items: center;
height: 30px;
flex-shrink: 0;
.rank-num {
width: 24px;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
margin-right: 12px;
text-align: center;
color: #3b414b;
&.rank-1 {
color: #d94b4b;
}
&.rank-2 {
color: #e3935d;
}
&.rank-3 {
color: #ebd348;
}
}
.rank-icon {
width: 30px;
height: 30px;
margin-right: 12px;
}
.rank-name {
width: 180px;
font-family: "Microsoft YaHei";
font-size: 16px;
font-weight: 700;
color: rgb(59, 65, 75);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rank-progress-container {
flex: 1;
height: 12px;
margin: 0 20px;
background: transparent;
display: flex;
align-items: center;
.rank-progress-bar {
height: 100%;
border-radius: 6px;
background: linear-gradient(90deg, rgba(55, 98, 240, 0) 0%, rgba(55, 98, 240, 0.8) 100%);
}
}
&:nth-child(1) .rank-progress-bar {
background: linear-gradient(90deg, rgba(217, 75, 75, 0) 0%, rgba(217, 75, 75, 0.8) 100%);
}
&:nth-child(2) .rank-progress-bar {
background: linear-gradient(90deg, rgba(227, 147, 93, 0) 0%, rgba(227, 147, 93, 0.8) 100%);
}
&:nth-child(3) .rank-progress-bar {
background: linear-gradient(90deg, rgba(235, 211, 72, 0) 0%, rgba(235, 211, 72, 0.8) 100%);
}
.rank-count {
width: 60px;
font-family: "Microsoft YaHei";
font-size: 16px;
font-weight: 700;
color: rgb(59, 65, 75);
text-align: right;
}
}
// 新增表格样式
.table-header {
display: flex;
align-items: center;
padding-bottom: 12px;
// border-bottom: 1px solid #eee;
margin-bottom: 8px;
div {
font-family: "Microsoft YaHei";
font-size: 16px;
color: #5f656c;
font-weight: 400;
}
}
.table-list {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 16px;
}
.table-row {
display: flex;
align-items: center;
height: 40px;
.rank-num {
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
text-align: center;
color: #3b414b;
&.rank-1 {
color: #d94b4b;
}
&.rank-2 {
color: #e3935d;
}
&.rank-3 {
color: #ebd348;
}
}
.flex-align {
display: flex;
align-items: center;
}
.rank-icon {
width: 30px;
height: 30px;
margin-right: 12px;
}
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: "Microsoft YaHei";
font-size: 16px;
font-weight: 700;
line-height: 30px;
color: rgb(59, 65, 75);
}
.domain-tags {
display: flex;
gap: 6px;
flex-wrap: wrap;
.mini-tag {
padding: 2px 6px;
border-radius: 4px;
font-size: 12px;
font-family: "Microsoft YaHei";
line-height: 1.2;
white-space: nowrap;
// 复用已有的tag颜色逻辑，需要配合 getTagClass
&.tag-item {
// 基础样式
}
&.tag-blue {
color: rgba(9, 88, 217, 1);
background: rgba(230, 244, 255, 1);
border-color: rgba(186, 224, 255, 1);
border: 1px solid rgba(186, 224, 255, 1);
}
&.tag-green {
color: rgba(56, 158, 13, 1);
background: rgba(246, 255, 237, 1);
border-color: rgba(217, 247, 190, 1);
border: 1px solid rgba(217, 247, 190, 1);
}
&.tag-red {
color: rgba(245, 34, 45, 1);
background: rgba(255, 241, 240, 1);
border-color: rgba(255, 163, 158, 1);
border: 1px solid rgba(255, 163, 158, 1);
}
&.tag-orange {
color: rgba(250, 140, 22, 1);
background: rgba(255, 247, 230, 1);
border-color: rgba(255, 213, 145, 1);
border: 1px solid rgba(255, 213, 145, 1);
}
&.tag-purple {
color: rgba(114, 46, 209, 1);
background: rgba(249, 240, 255, 1);
border-color: rgba(211, 173, 247, 1);
border: 1px solid rgba(211, 173, 247, 1);
}
&.tag-cyan {
color: rgba(19, 194, 194, 1);
background: rgba(230, 255, 251, 1);
border-color: rgba(135, 232, 222, 1);
border: 1px solid rgba(135, 232, 222, 1);
}
}
}
}
// 列宽控制
.col-rank {
width: 50px;
text-align: center;
flex-shrink: 0;
}
.col-name {
flex: 1.5;
min-width: 0;
margin-right: 16px;
}
.col-domain {
flex: 1.5;
min-width: 0;
margin-right: 16px;
}
.col-date {
width: 100px;
flex-shrink: 0;
font-family: "Microsoft YaHei";
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: rgb(59, 65, 75);
text-align: left;
}
.col-member {
width: 80px;
flex-shrink: 0;
font-family: "Microsoft YaHei";
font-size: 16px;
color: rgb(59, 65, 75);
text-align: center;
}
}
}
}
.news-content {
overflow-y: auto;
overflow-x: hidden;
}
.news-item {
/* 全政府-动态 (四全-最新动态) */
width: 737px;
height: 124px;
margin: 0 28px;
/* 自动布局 */
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding: 16px 24px 16px 24px;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
background: transparent;
.news-item-title {
display: flex;
justify-content: space-between;
width: 689px;
.tag {
display: none;
}
.date {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: right;
}
}
.content-title {
cursor: pointer;
width: 689px;
height: 30px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 12;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 16px;
font-weight: 700;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
}
.content-text {
width: 689px;
height: 30px;
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
color: rgba(59, 65, 75, 1);
margin-top: 8px;
/* 单行省略 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
cursor: pointer;
}
}
.line-time {
margin-top: 16px;
width: 1601px;
height: 700px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.65);
box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);
position: relative;
.left-btn {
position: absolute;
z-index: 9999;
left: 0;
top: 345px;
width: 24px;
height: 48px;
img {
width: 100%;
height: 100%;
}
}
.right-btn {
position: absolute;
z-index: 9999;
right: 0;
top: 345px;
width: 24px;
height: 48px;
img {
width: 100%;
height: 100%;
}
}
.bottom-item {
width: 100%;
height: 48px;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 17px;
padding-right: 35px;
box-sizing: border-box;
background: linear-gradient(180deg, rgba(231, 243, 255, 1) 0%, rgba(231, 243, 255, 0) 100%);
.bottom-item-title {
display: flex;
align-items: center;
img {
width: 18px;
height: 18px;
margin-right: 14px;
}
span {
font-family: YouSheBiaoTiHei;
font-size: 24px;
font-weight: 400;
line-height: 24px;
color: rgb(5, 95, 194);
}
}
.field-select {
width: 160px;
:deep(.el-input) {
.el-input__wrapper {
height: 32px;
padding: 0 12px;
box-sizing: border-box;
background-color: #fff;
border-radius: 4px;
.el-input__inner {
height: 32px;
line-height: 32px;
font-family: "Microsoft YaHei";
font-size: 16px;
font-weight: 400;
color: rgb(95, 101, 108);
&::placeholder {
color: rgb(95, 101, 108);
}
}
}
}
}
}
.line-main {
width: 100%;
height: 652px;
position: relative;
.nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
z-index: 10;
img {
width: 24px;
height: 48px;
}
&.left {
left: 0;
}
&.right {
right: 0;
}
}
.svg-container {
width: 100%;
height: 100%;
overflow: hidden;
display: block;
padding: 0;
box-sizing: border-box;
}
.axis-date-label {
background: rgba(231, 243, 255, 1);
padding: 4px 2px;
border-radius: 8px;
text-align: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: auto;
min-width: 60px;
.year,
.month {
font-family: "Microsoft YaHei";
font-size: 18px;
font-weight: 700;
line-height: 24px;
color: rgb(5, 95, 194);
margin-bottom: 0;
}
}
.timeline-content-item {
width: 100%;
height: 160px;
display: flex;
flex-direction: column;
gap: 8px;
.item-tags {
width: 355px;
height: 30px;
display: flex;
gap: 8px;
overflow: auto;
text-overflow: ellipsis;
white-space: nowrap;
.tag-item {
padding: 2px 8px;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
border: 1px solid transparent; // Ensure border width is set for all
&.tag-blue {
color: rgba(9, 88, 217, 1);
background: rgba(230, 244, 255, 1);
border-color: rgba(186, 224, 255, 1);
}
&.tag-green {
color: rgba(56, 158, 13, 1);
background: rgba(246, 255, 237, 1);
border-color: rgba(217, 247, 190, 1);
}
&.tag-red {
color: rgba(245, 34, 45, 1);
background: rgba(255, 241, 240, 1);
border-color: rgba(255, 163, 158, 1);
}
&.tag-orange {
color: rgba(250, 140, 22, 1);
background: rgba(255, 247, 230, 1);
border-color: rgba(255, 213, 145, 1);
}
&.tag-purple {
color: rgba(114, 46, 209, 1);
background: rgba(249, 240, 255, 1);
border-color: rgba(211, 173, 247, 1);
}
&.tag-cyan {
color: rgba(19, 194, 194, 1);
background: rgba(230, 255, 251, 1);
border-color: rgba(135, 232, 222, 1);
}
}
}
.item-title {
font-size: 18px;
font-weight: 700;
color: rgb(59, 65, 75);
font-family: "Microsoft YaHei";
line-height: 24px;
width: 100%;
}
.item-desc {
font-size: 16px;
font-weight: 400;
color: rgb(95, 101, 108);
line-height: 24px;
/* max-height: 48px; 可选：明确限制高度 */
font-family: "Microsoft YaHei";
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
white-space: normal;
}
.el-tooltip__trigger {
height: 48px;
}
.item-footer {
font-size: 16px;
font-weight: 400;
color: rgb(95, 101, 108);
line-height: 24px;
font-family: "Microsoft YaHei";
margin-top: 4px;
}
}
}
}
</style>
<style>
.common-prompt-popper.el-popper {
padding: 8px 16px !important;
border-radius: 10px !important;
background-color: rgb(59, 65, 75) !important;
font-size: 16px !important;
font-weight: 400 !important;
font-family: "Microsoft YaHei" !important;
line-height: 30px !important;
color: #fff !important;
border: none !important;
}
.common-prompt-popper.el-popper .el-popper__arrow::before {
background-color: rgb(59, 65, 75) !important;
border-color: rgb(59, 65, 75) !important;
}
</style>
src/views/ZMOverView/components/fourSuppress/components/addDomain/index.vue
浏览文件 @ a6d0a804
......@@ -4,7 +4,7 @@
<div class="content-wrapper">
<div class="btn-wrapper" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay(true)">
<div class="cards-mask">
<div class="btn-box" :style="{ transform: `translateX(-${currentIndex * (307 + 16)}px)` }">
<div class="btn-box" :style="{ transform: `translateX(-${currentIndex * (cardWidth + cardGap)}px)` }">
<div class="btn-item-outer" v-for="(item, indexx) in buttonsData" :key="indexx">
<div
v-for="(value, index) in item"
......@@ -73,15 +73,20 @@
<img src="./icon/icon-2.png" alt="" style="width: 22px; height: 18px" />
<span>美对华领域打压遏制最新动态</span>
</div>
<div class="title-right-select">
<el-select v-model="selectedFieldForLatest" placeholder="全部领域" class="field-select">
<el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</div>
<div class="news-content">
<div v-for="value,idx in newsList" :key="idx" class="news-item">
<div v-for="(value, idx) in paginatedNewsList" :key="idx" class="news-item">
<div class="news-item-title">
<div class="tag-container">
<!-- <div v-for="tag in value.tags" :key="tag" :class="getTagClass(tag)">
{{ tag }}
</div> -->
<AreaTag v-for="tag,index in value.tags" :key="index" :tagName="tag"></AreaTag>
<AreaTag v-for="(tag, index) in value.tags" :key="index" :tagName="tag"></AreaTag>
</div>
<div class="date">
......@@ -104,6 +109,16 @@
</el-tooltip>
</div>
</div>
<div class="news-pagination">
<el-pagination
layout="prev, pager, next"
:total="newsList.length"
:page-size="newsPageSize"
v-model:current-page="newsCurrentPage"
size="small"
@current-change="handleNewsPageChange"
/>
</div>
</div>
<div class="empty-section">
<div class="bottom-item">
......@@ -213,7 +228,7 @@
</marker>
</defs>
<path :d="snakePath" fill="none" stroke="#e8f2ff" stroke-width="2" />
<path :d="snakePath" fill="none" stroke="rgba(185, 220, 255, 1)" stroke-width="5" />
<g v-for="(label, index) in axisDates" :key="'date-' + index">
<foreignObject :x="label.x" :y="label.y" width="80" height="60" style="overflow: visible">
......@@ -239,7 +254,7 @@
<div class="timeline-content-item">
<div class="item-tags">
<!-- <span v-for="tag in node.tags" :key="tag" :class="getTagClass(tag)">{{ tag }}</span> -->
<AreaTag v-for="tag,idx in node.tags" :key="idx" :tagName="tag"></AreaTag>
<AreaTag v-for="(tag, idx) in node.tags" :key="idx" :tagName="tag"></AreaTag>
</div>
<div class="item-title">
<CommonPrompt :content="node.title" />
......@@ -261,10 +276,10 @@
</div>
</div>
<div class="left-btn" @click="handleLeft">
<img src="@/assets/icons/card-btn-left.png" alt="">
<img src="@/assets/icons/card-btn-left.png" alt="" />
</div>
<div class="right-btn" @click="handleRight">
<img src="@/assets/icons/card-btn-right.png" alt="">
<img src="@/assets/icons/card-btn-right.png" alt="" />
</div>
</div>
</div>
......@@ -366,11 +381,25 @@ watch(
const rankType = ref("institution");
const rankLoading = ref(false);
const selectedField = ref("");
const selectedFieldForLatest = ref("");
const selectedFieldTimeline = ref("");
const timelineContainerWidth = 1700;
// 美政府部门打压遏制最新动态
const newsList = ref([]);
const newsCurrentPage = ref(1);
const newsPageSize = ref(5); // 每页显示 5 条
// 分页后的新闻列表
const paginatedNewsList = computed(() => {
const start = (newsCurrentPage.value - 1) * newsPageSize.value;
const end = start + newsPageSize.value;
return newsList.value.slice(start, end);
});
const handleNewsPageChange = page => {
newsCurrentPage.value = page;
};
const getUSGovernmentLatestDynamicData = async () => {
try {
......@@ -417,18 +446,26 @@ const processTimelineData = rawData => {
}
return rawData.map(item => {
// 将日期格式转换为 "YYYY年 M月" 格式
const eventDate = item.eventDate ? new Date(item.eventDate) : null;
const formattedDate = eventDate ? `${eventDate.getFullYear()}年 ${eventDate.getMonth() + 1}月` : "";
// 提取领域标签
const tags = [];
let tags = [];
if (item.eventDomainList && Array.isArray(item.eventDomainList)) {
item.eventDomainList.forEach(domain => {
if (domain.domainName) {
tags.push(domain.domainName);
if (!selectedFieldTimeline.value) {
tags = item.eventDomainList.slice(0, 3).map(domain => domain.domainName || "");
} else {
const matchedIndex = item.eventDomainList.findIndex(domain => domain.domainId === selectedFieldTimeline.value);
if (matchedIndex !== -1) {
const matchedItem = item.eventDomainList[matchedIndex];
const remainingItems = item.eventDomainList.filter((_, idx) => idx !== matchedIndex);
const sortedList = [matchedItem, ...remainingItems];
tags = sortedList.slice(0, 3).map(domain => domain.domainName || "");
} else {
tags = item.eventDomainList.slice(0, 3).map(domain => domain.domainName || "");
}
});
}
}
return {
......@@ -437,7 +474,6 @@ const processTimelineData = rawData => {
title: item.eventName || "",
content: item.eventDesc || "",
info: `${item.eventDate || ""} · ${item.eventType || ""}`,
// 保留原始数据字段
eventId: item.eventId,
eventOrg: item.eventOrg,
eventType: item.eventType,
......@@ -454,15 +490,35 @@ const handleGetDomainContainmentTimeline = async () => {
if (selectedFieldTimeline.value) {
params.domain = selectedFieldTimeline.value;
}
console.log("美对我领域打压遏制时间线", params);
const res = await getDomainContainmentTimeline(params);
console.log("美对我领域打压遏制时间线", res);
if (res.code === 200 && res.data) {
// 处理返回的数据结构
const processedData = processTimelineData(res.data);
// processedData.forEach(item => {
// if (item.eventDomainList && Array.isArray(item.eventDomainList)) {
// if (!selectedFieldTimeline.value) {
// item.eventDomainList = item.eventDomainList.slice(0, 3);
// } else {
// const matchedIndex = item.eventDomainList.findIndex(
// domain => domain.domainId === selectedFieldTimeline.value
// );
// if (matchedIndex !== -1) {
// const matchedItem = item.eventDomainList[matchedIndex];
// const remainingItems = item.eventDomainList.filter((_, idx) => idx !== matchedIndex);
// item.eventDomainList = [matchedItem, ...remainingItems.slice(0, 2)];
// } else {
// item.eventDomainList = item.eventDomainList.slice(0, 3);
// }
// }
// }
// });
timelineList.value = processedData;
console.log('timelineList', timelineList.value);
console.log("timelineList", timelineList.value);
}
} catch (error) {
console.error("获取美对我领域打压遏制时间线失败:", error);
......@@ -477,10 +533,9 @@ const rowHeight = 230;
const startX = 250;
const startY = 45;
const timeLineActiveIndex = ref(0)
const timeLineActiveIndex = ref(0);
const axisDates = computed(() => {
const dates = [];
if (timelineList.value.length > 0) {
dates.push({
......@@ -500,39 +555,37 @@ const axisDates = computed(() => {
y: lastNode.y - 25
});
}
return dates
return dates;
});
const handleLeft = () => {
if(timeLineActiveIndex.value === 0) {
ElMessage.warning('当前已经是第一组数据！')
if (timeLineActiveIndex.value === 0) {
ElMessage.warning("当前已经是第一组数据！");
} else {
timeLineActiveIndex.value --
timeLineActiveIndex.value--;
}
}
};
const handleRight = () => {
if(timeLineActiveIndex.value === (timelineList.value.length % 9 )) {
ElMessage.warning('当前已经是最后一组数据！')
if (timeLineActiveIndex.value === timelineList.value.length % 9) {
ElMessage.warning("当前已经是最后一组数据！");
} else {
timeLineActiveIndex.value ++
timeLineActiveIndex.value++;
}
console.log('axisDates',axisDates.value);
console.log('timelineNodes',timelineNodes.value);
}
console.log("axisDates", axisDates.value);
console.log("timelineNodes", timelineNodes.value);
};
const timelineNodes = computed(() => {
// 计算起始索引：activeIndex * 9
const startIndex = timeLineActiveIndex.value * 9;
// 计算结束索引：起始索引 + 9（因为slice的第二个参数是结束索引，不包含）
const endIndex = timeLineActiveIndex.value + 9;
const startIndex = timeLineActiveIndex.value * 9;
const showTimeLineList = timelineList.value.slice(startIndex, endIndex);
// 计算结束索引：起始索引 + 9（因为slice的第二个参数是结束索引，不包含）
const endIndex = timeLineActiveIndex.value + 9;
const showTimeLineList = timelineList.value.slice(startIndex, endIndex);
console.log("时间线相关数据 showTimeLineList =>", showTimeLineList);
console.log("时间线相关数据 timelineList =>", timelineList.value);
return showTimeLineList.map((item, index) => {
const row = Math.floor(index / maxPerRow);
const col = index % maxPerRow;
......@@ -560,7 +613,7 @@ const timelineNodes = computed(() => {
contentWidth: 320,
contentHeight: 180
};
})
});
});
const getColorName = tag => {
......@@ -1012,6 +1065,9 @@ watch(selectedField, handleGetDomainContainmentRanking);
const currentIndex = ref(0);
let autoTimer = null;
const visibleCount = 7;
const cardWidth = 215; // 卡片宽度
const cardGap = 16; // 卡片间距
const startAutoPlay = isContiune => {
if (!isContiune) {
......@@ -1019,7 +1075,7 @@ const startAutoPlay = isContiune => {
}
stopAutoPlay();
if (buttonsData.value.length > 5) {
if (buttonsData.value.length > visibleCount) {
autoTimer = setInterval(() => {
next();
}, 3000);
......@@ -1035,7 +1091,7 @@ const stopAutoPlay = () => {
const next = () => {
let arr = [...buttonsData.value];
if (currentIndex.value < buttonsData.value.length - 5) {
if (currentIndex.value < buttonsData.value.length - visibleCount) {
currentIndex.value++;
} else {
// currentIndex.value = 0;
......@@ -1048,10 +1104,32 @@ const prev = () => {
if (currentIndex.value > 0) {
currentIndex.value--;
} else {
currentIndex.value = Math.max(0, buttonsData.value.length - 5);
currentIndex.value = Math.max(0, buttonsData.value.length - visibleCount);
}
};
// const next = () => {
// const maxIndex = buttonsData.value.length - visibleCount;
// if (currentIndex.value < maxIndex) {
// currentIndex.value++;
// } else {
// // 滚动到末尾时，重置到开头并复制数组实现无缝滚动
// const arr = [...buttonsData.value];
// buttonsData.value = [...buttonsData.value, ...arr];
// currentIndex.value = buttonsData.value.length - visibleCount - arr.length;
// }
// };
// const prev = () => {
// if (currentIndex.value > 0) {
// currentIndex.value--;
// } else {
// // 滚动到开头时，跳转到末尾
// currentIndex.value = buttonsData.value.length - visibleCount;
// }
// };
const handleTimeLineNode = node => {
// console.log("timeLineNode", node);
if (node.eventType === "科技法案") {
......@@ -1144,7 +1222,8 @@ watch(activeDate, () => {
.btn-item {
/* 全领域-总统计 */
width: 307px;
// width: 307px;
width: 215px;
height: 80px;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
......@@ -1156,6 +1235,7 @@ watch(activeDate, () => {
.btn-left-text {
width: fit-content;
min-width: 60px;
max-width: 97px;
height: 60px;
background-repeat: no-repeat;
background-position: center;
......@@ -1163,19 +1243,19 @@ watch(activeDate, () => {
font-family: YouSheBiaoTiHei;
font-size: 24px;
font-weight: 400;
line-height: 60px;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
color: rgba(255, 255, 255, 1);
//不换行
white-space: nowrap;
//换行
white-space: wrap;
display: flex;
align-items: center;
font-style: italic;
}
.btn-right {
font-family: YouSheBiaoTiHei;
font-size: 24px;
font-size: 30px;
font-weight: 400;
color: rgba(255, 255, 255, 1);
font-style: italic;
......@@ -1204,7 +1284,7 @@ watch(activeDate, () => {
.charts-title {
width: 100%;
height: 48px;
height: 54px;
display: flex;
justify-content: space-between;
align-items: center;
......@@ -1276,6 +1356,10 @@ watch(activeDate, () => {
}
}
}
.title-right-select {
width: 150px;
}
}
.charts-content {
......@@ -1298,11 +1382,71 @@ watch(activeDate, () => {
.news-section {
width: 792px;
height: 700px;
display: flex;
flex-direction: column;
justify-content: space-between;
.news-title {
padding: 8px;
}
.news-pagination {
display: flex;
justify-content: center;
align-items: center;
padding: 16px 0;
:deep(.el-pagination) {
&.is-background .el-pager li {
background-color: #fff;
border: 1px solid #dcdfe6;
border-radius: 4px;
font-size: 14px;
min-width: 32px;
height: 32px;
line-height: 32px;
margin: 0 4px;
&.is-active {
background-color: #055fc2;
color: #fff;
border-color: #055fc2;
}
&:hover {
background-color: #f5f7fa;
}
}
.btn-prev,
.btn-next {
background-color: rgba(231, 243, 255, 1);
// border: 1px solid #dcdfe6;
border: none;
border-radius: 4px;
font-size: 14px;
// min-width: 32px;
// height: 32px;
line-height: 32px;
margin-right: 4px;
.el-icon {
font-size: 16px;
color: #055fc2;
font-weight: 800;
}
&:hover:not(.is-disabled) {
background-color: #f5f7fa;
}
&.is-disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
}
}
.tag-container {
display: flex;
align-items: center;
......@@ -1692,11 +1836,12 @@ watch(activeDate, () => {
.news-content {
overflow-y: auto;
overflow-x: hidden;
margin-bottom: auto;
}
.news-item {
/* 全政府-动态 (四全-最新动态) */
width: 737px;
height: 124px;
height: 116px;
margin: 0 28px;
/* 自动布局 */
display: flex;
......@@ -1764,7 +1909,7 @@ watch(activeDate, () => {
letter-spacing: 0px;
text-align: left;
color: rgba(59, 65, 75, 1);
margin-top: 8px;
// margin-top: 8px;
/* 单行省略 */
display: -webkit-box;
-webkit-box-orient: vertical;
......@@ -1783,27 +1928,27 @@ watch(activeDate, () => {
box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);
position: relative;
.left-btn{
.left-btn {
position: absolute;
z-index: 9999;
left: 0;
top: 345px;
width: 24px;
height: 48px;
img{
img {
width: 100%;
height: 100%;
}
}
.right-btn{
.right-btn {
position: absolute;
z-index: 9999;
right: 0;
top: 345px;
width: 24px;
height: 48px;
img{
img {
width: 100%;
height: 100%;
}
......
src/views/ZMOverView/components/fourSuppress/components/addDomain/mockdata.json deleted 100644 → 0
浏览文件 @ 1a031e8a
{
"code": 200,
"message": "操作成功",
"success": true,
"data": [
{
"eventType": "行政令",
"eventName": "为了美国和委内瑞拉人民的利益保障委内瑞拉的石油收入",
"eventDesc": null,
"eventId": "248914",
"eventDomainList": [
{
"domainId": "1",
"domainName": "人工智能"
},
{
"domainId": "3",
"domainName": "新一代通信网络"
}
],
"eventOrgName": null,
"eventDate": "2026-01-10"
},
{
"eventType": "行政令",
"eventName": null,
"eventDesc": null,
"eventId": "248863",
"eventDomainList": [
{
"domainId": "8",
"domainName": "先进制造"
},
{
"domainId": "9",
"domainName": "新材料"
}
],
"eventOrgName": null,
"eventDate": "2026-01-09"
},
{
"eventType": "行政令",
"eventName": "使美国退出与美国利益相悖的国际组织、公约、条约",
"eventDesc": null,
"eventId": "249004",
"eventDomainList": [
{
"domainId": "2",
"domainName": "生物科技"
},
{
"domainId": "4",
"domainName": "量子科技"
},
{
"domainId": "5",
"domainName": "新能源"
},
{
"domainId": "3",
"domainName": "新一代通信网络"
}
],
"eventOrgName": null,
"eventDate": "2026-01-08"
},
{
"eventType": "行政令",
"eventName": "在国防合同中优先考虑作战人员",
"eventDesc": null,
"eventId": "248915",
"eventDomainList": [
{
"domainId": "99",
"domainName": "其他"
},
{
"domainId": "8",
"domainName": "先进制造"
},
{
"domainId": "10",
"domainName": "航空航天"
}
],
"eventOrgName": null,
"eventDate": "2026-01-08"
},
{
"eventType": "行政令",
"eventName": "大西洋高度洄游物种；商业性大西洋黑鼻鲨和娱乐性大西洋鲨鱼渔业管理措施的修订",
"eventDesc": "NMFS提议对商业和休闲大西洋鲨鱼渔业进行几项改革。具体来说，NMFS正在考虑取消大西洋地区黑鼻鲨管理边界，修改商业保留限额...",
"eventId": "163447",
"eventDomainList": [
{
"domainId": "14",
"domainName": "核"
},
{
"domainId": "7",
"domainName": "海洋"
}
],
"eventOrgName": null,
"eventDate": "2026-01-05"
},
{
"eventType": "行政令",
"eventName": "关于Hiefo Corporation收购Emcore Corporation部分资产",
"eventDesc": null,
"eventId": "248916",
"eventDomainList": [
{
"domainId": "3",
"domainName": "新一代通信网络"
},
{
"domainId": "8",
"domainName": "先进制造"
},
{
"domainId": "6",
"domainName": "集成电路"
}
],
"eventOrgName": null,
"eventDate": "2026-01-03"
},
{
"eventType": "行政令",
"eventName": "汽车贷款利息扣除",
"eventDesc": "本文件包含关于某些纳税人扣除高达10,000美元的合格乘用车贷款利息的拟议法规。本文件还包含关于新信息报告的拟议法规...",
"eventId": "163443",
"eventDomainList": [
{
"domainId": "13",
"domainName": "太空"
},
{
"domainId": "14",
"domainName": "核"
}
],
"eventOrgName": null,
"eventDate": "2026-01-02"
},
{
"eventType": "行政令",
"eventName": "品牌处方药费用法规的法定更新",
"eventDesc": "本文件建议修订有关对从事制造或进口某些品牌处方药业务的相关实体征收年费的法规。为了应对覆盖缺口折扣的替代...",
"eventId": "163444",
"eventDomainList": [
{
"domainId": "2",
"domainName": "生物科技"
},
{
"domainId": "3",
"domainName": "新一代通信网络"
}
],
"eventOrgName": null,
"eventDate": "2026-01-02"
},
{
"eventType": "337",
"eventName": "外国制造的半导体器件及其下游产品和组件",
"eventDesc": "美国ITC发布对外国制造的半导体器件及其下游产品和组件的337部分终裁",
"eventId": "111",
"eventDomainList": [
{
"domainId": "1",
"domainName": "人工智能"
},
{
"domainId": "5",
"domainName": "新能源"
}
],
"eventOrgName": "美国商务部",
"eventDate": "2026-01-01"
},
{
"eventType": "行政令",
"eventName": "美国东北部的渔业；大西洋冲浪蛤和海洋圆蛤渔业管理计划修正案21",
"eventDesc": "NMFS宣布，中大西洋渔业管理委员会已提交大西洋冲浪蛤和海洋圆蛤渔业管理计划第21号修正案，供商务部长审查和批准。我们正在征求意见...",
"eventId": "163426",
"eventDomainList": [
{
"domainId": "7",
"domainName": "海洋"
},
{
"domainId": "3",
"domainName": "新一代通信网络"
}
],
"eventOrgName": null,
"eventDate": "2025-12-29"
}
]
}
\ No newline at end of file
src/views/ZMOverView/components/fourSuppress/index.vue
浏览文件 @ a6d0a804
......@@ -26,7 +26,7 @@
<script setup>
import { onMounted, ref, computed } from "vue";
import right from "./assets/right.png";
import right from "./assets/right-white.png";
import background from "./assets/background.png";
// 组件引入
......@@ -104,12 +104,13 @@ const handleNavClick = name => {
}
&.active {
background-color: rgba(246, 250, 255, 1);
background-color: rgba(5, 95, 194, 1);
border: 1px solid rgba(174, 214, 255, 1);
border-radius: 10px;
span {
color: rgb(5, 95, 194);
// color: rgb(5, 95, 194);
color: #fff;
}
}
}
......
src/views/ZMOverView/index.vue
浏览文件 @ a6d0a804
......@@ -21,8 +21,13 @@
<!-- 美对华“四全”打压 -->
<div id="us-pressure" class="us-pressure-section">
<div class="data-select">
<div v-for="item in dateList" :key="item.type" class="date-item" :class="{ active: activeDate === item.type }"
@click="handleDateClick(item.type)">
<div
v-for="item in dateList"
:key="item.type"
class="date-item"
:class="{ active: activeDate === item.type }"
@click="handleDateClick(item.type)"
>
<!-- <img :src="activeDate === item.type ? item.activeIcon : item.icon" alt="" /> -->
<span>{{ item.name }}</span>
</div>
......@@ -133,8 +138,6 @@ provide("activeDate", activeDate);
const handleDateClick = type => {
activeDate.value = type;
};
</script>
<style lang="scss" scoped>
......@@ -250,7 +253,8 @@ const handleDateClick = type => {
.home-top-bg {
background:
url("./assets/images/background.png"), linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
url("./assets/images/background.png"),
linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
background-size: 100% 100%;
position: absolute;
width: 100%;
......@@ -266,7 +270,7 @@ const handleDateClick = type => {
.data-select {
width: 108px;
height: 192px;
position: fixed;
position: absolute;
top: 149px;
left: 0;
background-color: rgba(255, 255, 255, 0.65);
......
src/views/companyPages2/component/capitalScale.vue 0 → 100644
浏览文件 @ a6d0a804
<template>
<!-- 资本规模组件 -->
<el-space :size="24">
<!-- 遍历资本规模数据 -->
<div v-for="(t, i) in scales" :key="i" class="item-box">
<!-- 标题 -->
<div class="item-title">{{ t.title }}</div>
<!-- 数值区域 -->
<el-space :size="6">
<!-- 数值图标 -->
<div class="item-value-img" />
<!-- 数值 -->
<div class="item-value">
{{ t.value }}
</div>
</el-space>
</div>
</el-space>
</template>
<script setup>
// 导入Vue组合式API
import { ref, watch } from 'vue'
// 导入Element Plus组件
import { ElSpace } from 'element-plus'
// 响应式数据
const scales = ref([]) // 资本规模数据列表
// 定义组件属性
const props = defineProps({
enterpriseInfo: {
type: Object,
default: {}
}
});
// 监听企业信息变化，更新资本规模数据
watch(() => props.enterpriseInfo, (newVal, oldVal) => {
// 如果没有年份信息，直接返回
if (!newVal?.year)
return
const scales1 = []
// 添加营业额数据
if (newVal.turnover) {
scales1.push({
title: newVal.year + '年营业额',
// 文字转数字，保留整数，添加单位
value: Number(newVal.turnover).toFixed(0) + '亿'
})
}
// 添加总资产数据
if (newVal.totalAssets) {
scales1.push({
title: newVal.year + '年总资产',
// 文字转数字，保留整数，添加单位
value: Number(newVal.totalAssets).toFixed(0) + '亿'
})
}
// 添加净资产数据
if (newVal.netAssets) {
scales1.push({
title: newVal.year + '年净资产',
// 文字转数字，保留整数，添加单位
value: Number(newVal.netAssets).toFixed(0) + '亿'
})
}
// 更新资本规模数据
scales.value = scales1
}, { immediate: true }) // immediate: true 表示组件挂载时立即执行
</script>
<style lang="scss" scoped>
// 导入通用样式
@use '@/styles/common.scss';
/* 项目盒子样式 */
.item-box {
white-space: nowrap; // 禁止换行
text-align: right; // 右对齐
}
/* 项目标题样式 */
.item-title {
@extend .text-tip-1;
color: var(--text-primary-80-color);
}
/* 项目数值样式 */
.item-value {
@extend .text-title-0-bold;
color: var(--color-primary-100);
}
/* 项目数值图标样式 */
.item-value-img {
width: 8px;
height: 6px;
background-image: url(../images/Regular_polygon_11097_225086.png);
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
flex-shrink: 0; // 防止收缩
}
</style>
\ No newline at end of file
src/views/companyPages2/component/detailsPages/baseInfo.vue 0 → 100644
浏览文件 @ a6d0a804
<template>
<!-- 企业基本信息组件 -->
<analysis-box title="基本信息" :showAllBtn="false">
<div class="box-wrap">
<!-- 企业图片 -->
<el-image :src="enterpriseInfo.picture" class="company-picture" />
<!-- 企业基本信息描述 -->
<el-descriptions title='' :column="1" class="common-descriptions">
<el-descriptions-item label="成立时间：">{{ enterpriseInfo.establishmentDate }}</el-descriptions-item>
<el-descriptions-item label="总部地址：">{{ enterpriseInfo.address }}</el-descriptions-item>
<el-descriptions-item label="联系方式：">{{ enterpriseInfo.telephone }}</el-descriptions-item>
<el-descriptions-item label="企业类型：">{{ enterpriseInfo.companyType }}</el-descriptions-item>
<el-descriptions-item label="业务范围：">{{ enterpriseInfo.businessScope }}</el-descriptions-item>
<el-descriptions-item label="分支机构：">
<div style="margin-left: 86px;">
<li v-for="(t, i) in branchs" :key="i">{{ t.orgName }}</li>
</div>
</el-descriptions-item>
</el-descriptions>
<!-- 分隔线 -->
<el-divider></el-divider>
<!-- 关键人物标题 -->
<div class="text-tip-1-bold" style="margin-bottom: 19px;">关键人物：</div>
<!-- 关键人物列表 -->
<el-space wrap>
<person-avatar style="width: 200px;" v-for="(t, i) in persons" :key="i" :person="t"></person-avatar>
</el-space>
</div>
</analysis-box>
</template>
<script setup>
// 导入组件
import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue';
import { ref, watch } from 'vue';
import { getEnterpriseBranch, getEnterpriseKeyPerson } from '@/api/companyPages';
import PersonAvatar from '@/components/base/people/personAvatar.vue';
import { ElDescriptions, ElDescriptionsItem, ElDivider, ElImage, ElSpace } from 'element-plus';
import '@/styles/descriptions.scss'
// 定义组件属性
const props = defineProps({
enterpriseInfo: {
type: Object,
default: {}
}
});
// 响应式数据
const branchs = ref([]) // 分支机构列表
const persons = ref([]) // 关键人物列表
/**
* 获取企业相关数据
* @param {string} id - 企业ID
*/
const featchData = async (id) => {
// 获取分支机构数据
var res = await getEnterpriseBranch(id);
if (res?.code === 200) {
branchs.value = res.data;
}
// 获取关键人物数据
res = await getEnterpriseKeyPerson(id);
if (res?.code === 200) {
persons.value = res.data;
}
}
// 监听企业信息变化，当企业信息更新时重新获取数据
watch(() => props.enterpriseInfo, async (newVal, oldVal) => {
if (newVal) {
await featchData(newVal.id)
}
}, { immediate: true }) // immediate: true 表示组件挂载时立即执行
</script>
<style lang="css" scoped>
/* 容器样式 */
.box-wrap {
margin: 25px;
}
/* 企业图片样式 */
.company-picture {
border-radius: 4px;
margin-bottom: 16px;
}
</style>
\ No newline at end of file
src/views/companyPages2/component/detailsPages/newsPane.vue 0 → 100644
浏览文件 @ a6d0a804
<template>
<!-- 企业最新动态组件 -->
<analysis-box title="最新动态" :showAllBtn="false">
<!-- 顶部分隔线 -->
<el-divider></el-divider>
<!-- 新闻列表 -->
<el-space :size="0" direction="vertical">
<news-item class="list-item" v-for="(t, i) in newsPage.content" :key="i" :news="t"></news-item>
</el-space>
<!-- 底部分隔线 -->
<el-divider></el-divider>
<!-- 分页组件 -->
<el-pagination style="margin: 25px;" background layout="total, ->, prev, pager, next"
:total="newsPage.totalElements" v-on:current-change="onCurrentChange">
</el-pagination>
</analysis-box>
</template>
<script setup>
// 导入API
import { getEnterpriseNewDynamicPage } from '@/api/companyPages';
// 导入组件
import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue';
import NewsItem from '@/components/base/newsList/NewsItem.vue';
import { ElDivider, ElSpace, ElPagination } from 'element-plus';
// 导入Vue组合式API
import { ref, watch } from 'vue';
// 响应式数据
const newsPage = ref({}) // 新闻分页数据
// 定义组件属性
const props = defineProps({
enterpriseInfo: {
type: Object,
default: {}
}
});
/**
* 更新新闻列表
* @param {string} id - 企业ID
* @param {number} page - 页码（从0开始）
*/
const updateNews = async (id, page) => {
// 获取企业最新动态分页数据
const res = await getEnterpriseNewDynamicPage(`${id}?pageNumber=${page}`);
if (res?.code === 200) {
// 处理新闻数据，添加来源信息
res.data?.content?.forEach(t => {
t.from = `${t.time} · ${t.orgName}`
});
// 更新新闻分页数据
newsPage.value = res.data;
}
}
// 监听企业信息变化，当企业信息更新时重新获取新闻
watch(() => props.enterpriseInfo, async (newVal, oldVal) => {
if (newVal) {
await updateNews(newVal.id, 0) // 默认从第0页开始
}
}, { immediate: true }) // immediate: true 表示组件挂载时立即执行
/**
* 分页变化处理函数
* @param {number} e - 当前页码（从1开始）
*/
const onCurrentChange = e => {
console.log(e) // 打印当前页码
updateNews(props.enterpriseInfo.id, e - 1) // 转换为从0开始的页码
}
</script>
<style lang="css" scoped>
/* 新闻列表项样式 */
.list-item {
margin-bottom: 20px;
/* 底部外边距 */
border-bottom: 1px solid rgba(240, 242, 244, 1);
/* 底部边框 */
}
</style>
\ No newline at end of file
src/views/companyPages2/component/operatingPages/index.vue 0 → 100644
浏览文件 @ a6d0a804
<script setup lang="ts">
import '@/styles/tabs.scss'
import { ElTabPane, ElTabs } from 'element-plus';
</script>
<template>
<el-tabs tabPosition="left" class="disinheritance tabs-nav-no-wrap left-float-nav-tabs">
<el-tab-pane label="企业规模"></el-tab-pane>
<el-tab-pane label="市值变化"></el-tab-pane>
<el-tab-pane label="研发投入"></el-tab-pane>
<el-tab-pane label="市场占比"></el-tab-pane>
</el-tabs>
</template>
\ No newline at end of file
src/views/companyPages2/component/titlePane.vue 0 → 100644
浏览文件 @ a6d0a804
<template>
<!-- 企业标题面板组件 -->
<div class="box background-as-card">
<!-- 企业Logo -->
<img v-if="enterpriseInfo.logoUrl" :src="enterpriseInfo.logoUrl" alt="logo" class="company-logo" />
<!-- 企业信息区域 -->
<el-space fill :size="4">
<!-- 企业名称 -->
<div class="company-name">{{ enterpriseInfo.orgName }}</div>
<!-- 企业英文名称 -->
<div class="company-name2">{{ enterpriseInfo.orgNameEn }}</div>
<!-- 企业简介 -->
<div class="company-name2">{{ enterpriseInfo.orgIntroduction }}</div>
<!-- 供应区域标签 -->
<el-space>
<area-tag v-for="(t, i) in areas" :key="i" :tagName="t.name"></area-tag>
</el-space>
</el-space>
<capital-scale :enterpriseInfo="enterpriseInfo"></capital-scale>
</div>
</template>
<script setup>
// 导入组件
import AreaTag from '@/components/base/AreaTag/index.vue';
// 导入API
import { getSupplyAreaList } from '@/api/companyPages';
// 导入Vue组合式API
import { ref, watch } from 'vue';
import { ElSpace } from 'element-plus';
// 导入自定义组件
import CapitalScale from './capitalScale.vue'
// 响应式数据
const areas = ref([]) // 供应区域列表
// 定义组件属性
const props = defineProps({
enterpriseInfo: {
type: Object,
default: {}
}
});
// 监听企业信息变化，当企业信息更新时重新获取供应区域
watch(() => props.enterpriseInfo, async (newVal, oldVal) => {
if (newVal) {
await initAreas(newVal.id)
}
})
/**
* 初始化供应区域列表
* @param {string} id - 企业ID
*/
const initAreas = async (id) => {
// 获取供应区域数据
const res = await getSupplyAreaList(id);
if (res?.code === 200) {
// 更新供应区域列表
areas.value = res.data;
}
}
</script>
<style lang="scss" scoped>
// 导入通用样式
@use '@/styles/common.scss';
/* 容器样式 */
.box {
width: 100%;
height: 160px;
top: 80px;
left: 160px;
padding: 16px 19px;
border-radius: 10px;
display: flex;
align-items: center;
}
/* 企业Logo样式 */
.company-logo {
width: 128px;
height: 128px;
margin-right: 21px;
object-fit: contain;
}
/* 企业名称样式 */
.company-name {
@extend .text-title-1-bold;
color: var(--text-primary-80-color);
}
/* 企业英文名称和简介样式 */
.company-name2 {
@extend .text-tip-1;
color: var(--text-primary-80-color);
@include common.text-ellipsis(2); // 最多显示2行，超出部分省略
}
</style>
\ No newline at end of file
src/views/companyPages2/index.vue 0 → 100644
浏览文件 @ a6d0a804
<template>
<div class="background-container"
:style="{ backgroundImage: `linear-gradient(to bottom, var(--bg-white-80), var(--bg-white-100)), url(${enterpriseInfo.picture})` }">
</div>
<el-scrollbar>
<div class="common-page">
<el-space wrap :size="16">
<title-pane :enterprise-info="enterpriseInfo"></title-pane>
<el-tabs stretch class="tabs-header-as-card tabs-nav-no-wrap tabs-bar-as-btn">
<el-tab-pane label="企业详情">
<div class="flex-display">
<news-pane :enterprise-info="enterpriseInfo" />
<base-info class="base-info" :enterprise-info="enterpriseInfo" />
</div>
</el-tab-pane>
<el-tab-pane lazy label="经营情况">
<operating-pages />
</el-tab-pane>
<el-tab-pane lazy label="供应链 / 股权">
<div class="flex-display">
</div>
</el-tab-pane>
</el-tabs>
</el-space>
</div>
</el-scrollbar>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { getEnterprisePageInfo } from '@/api/companyPages';
import TitlePane from './component/titlePane.vue';
import NewsPane from './component/detailsPages/newsPane.vue';
import BaseInfo from './component/detailsPages/baseInfo.vue';
import OperatingPages from './component/operatingPages/index.vue';
import '@/styles/tabs.scss'
import '@/styles/container.scss'
import { ElScrollbar, ElSpace, ElTabs, ElTabPane } from 'element-plus';
const route = useRoute();
const companyId = route.params.id;
const enterpriseInfo = ref({})
console.log(companyId)
onMounted(() => {
init();
});
const init = async () => {
const res = await getEnterprisePageInfo(companyId);
if (res?.code === 200) {
enterpriseInfo.value = res.data
}
}
</script>
<style lang="scss" scoped>
.background-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 383px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: -1;
}
.base-info {
max-width: 520px;
width: 520px;
margin-left: 16px;
}
</style>
\ No newline at end of file
src/views/overView/js/radarChart3.js
浏览文件 @ a6d0a804
import * as echarts from 'echarts';
import * as echarts from "echarts";
/**
* 计算雷达图最外圈半径（px）
......@@ -6,9 +6,9 @@ import * as echarts from 'echarts';
* @param {number} radarRadius 配置项里 radar.radius，默认 75%
*/
function getOuterRadius(dom, radarRadius = 75) {
// 容器短边的一半 * 百分比
const minSide = Math.min(dom.offsetWidth, dom.offsetHeight);
return (minSide / 2) * (radarRadius / 100);
// 容器短边的一半 * 百分比
const minSide = Math.min(dom.offsetWidth, dom.offsetHeight);
return (minSide / 2) * (radarRadius / 100);
}
/**
......@@ -19,95 +19,121 @@ function getOuterRadius(dom, radarRadius = 75) {
* @param {HTMLDivElement} dom 图表容器（用于计算半径，必须传）
*/
const getBarChart = (nameList, valueList, isPer, dom) => {
// 1. 基础雷达图配置
const option = {
title: { text: '' },
legend: {
show: false,
icon: 'circle',
orient: 'vertical',
right: 0,
top: 'center',
align: 'left',
data: ['法案', '行政令', '科技智库', '出口管制', '投融资限制', '市场准入']
},
radar: {
shape: 'circle',
radius: '75%', // 雷达图本身占容器 75%
indicator: [
{ name: '研究人员总数', max: 6500 },
{ name: '每万人研究人员数', max: 16000 },
{ name: '每万研究人员研发经费投入额', max: 30000 },
{ name: '每万人研发经费投入额', max: 38000 },
{ name: '研发经费占GDP的比重', max: 52000 },
{ name: '研发经费投入总额', max: 25000 }
],
axisName: {
// 1. 富文本颜色
color: '#3B414B',
fontSize: 14,
fontWeight: 600,
// 1. 基础雷达图配置
const option = {
title: { text: "" },
legend: {
show: false,
icon: "circle",
orient: "vertical",
right: 0,
top: "center",
align: "left",
data: ["法案", "行政令", "科技智库", "出口管制", "投融资限制", "市场准入"]
},
radar: {
shape: "circle",
radius: "75%", // 雷达图本身占容器 75%
indicator: [
{ name: "研究人员总数", max: 6500 },
{ name: "每万人研究人员数", max: 16000 },
{ name: "每万研究人员研发经费投入额", max: 30000 },
{ name: "每万人研发经费投入额", max: 38000 },
{ name: "研发经费占GDP的比重", max: 52000 },
{ name: "研发经费投入总额", max: 25000 }
],
axisName: {
// 1. 富文本颜色
color: "#3B414B",
fontSize: 14,
fontWeight: 600,
// 2. 白色矩形背景
backgroundColor: '#fff', // 背景色
borderRadius: 4, // 圆角
padding: [4, 8], // 上下 4px，左右 8px
// 2. 白色矩形背景
backgroundColor: "#fff", // 背景色
borderRadius: 4, // 圆角
padding: [4, 8], // 上下 4px，左右 8px
// 3. 自动换两行（你原来的逻辑）
formatter: function (txt) {
const len = txt.length;
if (len <= 5) return txt;
const br = Math.ceil(len / 2);
return txt.substring(0, br) + '\n' + txt.substring(br);
}
},
splitLine: {
lineStyle: { color: 'rgba(200,200,200,.6)' }
},
splitArea: { show: false },
axisLine: { show: false }
},
series: [{
name: 'Budget vs spending',
type: 'radar',
data: [
{ value: [4200, 3000, 20000, 35000, 50000, 18000], name: '法案', areaStyle: { color: 'rgba(10, 87, 166, 0.2)' } },
{ value: [5000, 14000, 28000, 26000, 42000, 21000], name: '行政令', areaStyle: { color: 'rgba(206, 79, 81, 0.2)' } },
{ value: [4000, 14000, 18000, 21000, 32000, 10000], name: '科技智库', areaStyle: { color: 'rgba(250, 140, 22, 0.2)' } },
{ value: [4000, 14000, 18000, 21000, 32000, 10000], name: '出口管制', areaStyle: { color: 'rgba(22, 180, 120, 0.2)' } },
{ value: [4000, 14000, 18000, 21000, 32000, 10000], name: '投融资限制', areaStyle: { color: 'rgba(120, 100, 200, 0.2)' } },
{ value: [4000, 14000, 18000, 21000, 32000, 10000], name: '市场准入', areaStyle: { color: 'rgba(255, 100, 150, 0.2)' } }
]
}]
};
// 3. 自动换两行（你原来的逻辑）
formatter: function (txt) {
const len = txt.length;
if (len <= 5) return txt;
const br = Math.ceil(len / 2);
return txt.substring(0, br) + "\n" + txt.substring(br);
}
},
splitLine: {
lineStyle: { color: "rgba(200,200,200,.6)" }
},
splitArea: { show: false },
axisLine: { show: false }
},
series: [
{
name: "Budget vs spending",
type: "radar",
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: "法案",
areaStyle: { color: "rgba(10, 87, 166, 0.2)" }
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: "行政令",
areaStyle: { color: "rgba(206, 79, 81, 0.2)" }
},
{
value: [4000, 14000, 18000, 21000, 32000, 10000],
name: "科技智库",
areaStyle: { color: "rgba(250, 140, 22, 0.2)" }
},
{
value: [4000, 14000, 18000, 21000, 32000, 10000],
name: "出口管制",
areaStyle: { color: "rgba(22, 180, 120, 0.2)" }
},
{
value: [4000, 14000, 18000, 21000, 32000, 10000],
name: "投融资限制",
areaStyle: { color: "rgba(120, 100, 200, 0.2)" }
},
{
value: [4000, 14000, 18000, 21000, 32000, 10000],
name: "市场准入",
areaStyle: { color: "rgba(255, 100, 150, 0.2)" }
}
]
}
]
};
// 2. 计算文字所在圆半径（单位 px）
const textRadius = getRadarTextRadius(dom, 75) + 30; // 75 与 radar.radius 保持一致
// 2. 计算文字所在圆半径（单位 px）
const textRadius = getRadarTextRadius(dom, 75) + 30; // 75 与 radar.radius 保持一致
// 3. 用“单圈描边”实现「粗线 + 文字在线上」
option.graphic = [{
type: 'circle',
shape: {
cx: dom.offsetWidth / 2,
cy: dom.offsetHeight / 2,
r: textRadius
},
style: {
stroke: '#EBECEE', // 线的颜色
lineWidth: 6, // 线的粗细（想要再粗就继续加大）
fill: 'transparent'
},
// z: 1000 // 保证压在最上层
}];
return option;
// 3. 用“单圈描边”实现「粗线 + 文字在线上」
option.graphic = [
{
type: "circle",
shape: {
cx: dom.offsetWidth / 2,
cy: dom.offsetHeight / 2,
r: textRadius
},
style: {
stroke: "#EBECEE", // 线的颜色
lineWidth: 6, // 线的粗细（想要再粗就继续加大）
fill: "transparent"
}
// z: 1000 // 保证压在最上层
}
];
return option;
};
// 1. 先准备一个“半径换算”小工具
function getRadarTextRadius(dom, radiusPercent = 75) {
// 雷达图中心永远在容器中心
const minSide = Math.min(dom.offsetWidth, dom.offsetHeight);
return (minSide / 2) * (radiusPercent / 100);
// 雷达图中心永远在容器中心
const minSide = Math.min(dom.offsetWidth, dom.offsetHeight);
return (minSide / 2) * (radiusPercent / 100);
}
export default getBarChart;
\ No newline at end of file
export default getBarChart;
src/views/ruleRestriction/index2.vue
浏览文件 @ a6d0a804
......@@ -29,7 +29,7 @@
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt />
</div>
</div>
</div>,
<div class="btn" @click="handleToPosi('position4')">
<div class="btn-text">资源库</div>
<div class="btn-icon">
......
src/views/thinkTank/ThinkTankDetail/PolicyTracking/index.vue
浏览文件 @ a6d0a804
......@@ -6,17 +6,35 @@
<div class="icon">
<img src="./images/box-header-icon1.png" alt="" />
</div>
<div class="title">{{ "提出建议领域分布" }}</div>
<div class="title">{{ "政策建议领域分布" }}</div>
<!-- <div class="box-header-right">{{ "查看数据源 >" }}</div> -->
<div class="select-box">
<el-select v-model="box1SelectYear" placeholder="选择时间" style="width: 100px">
<el-option v-for="(item, index) in box1YearList" :key="index" :label="item.label + '年'"
:value="item.value" @click="handleGetThinkPolicyIndustry()" />
</el-select>
</div>
</div>
<div class="box-main">
<div id="box1Chart"></div>
</div>
</div>
<div class="box1 box">
<div class="box-header">
<div class="icon">
<img src="./images/box-header-icon2.png" alt="" />
</div>
<div class="title">{{ "政策建议涉及部门分布" }}</div>
<!-- <div class="box-header-right">{{ "查看数据源 >" }}</div> -->
<div class="select-box">
<el-select v-model="box1SelectYear" placeholder="选择时间" style="width: 100px">
<el-option v-for="(item, index) in box1YearList" :key="index" :label="item.label" :value="item.value"
@click="handleGetThinkPolicyIndustry()" />
<el-option v-for="(item, index) in box1YearList" :key="index" :label="item.label + '年'"
:value="item.value" @click="handleGetThinkPolicyIndustry()" />
</el-select>
</div>
<div id="box1Chart"></div>
</div>
<div class="box-main">
<div id="box2Chart"></div>
</div>
</div>
<!-- <div class="box2 box">
......@@ -53,14 +71,14 @@
</div>
<div class="title">{{ "热门研究方向变化趋势" }}</div>
<!-- <div class="box-header-right">{{ "查看数据源 >" }}</div> -->
</div>
<div class="box-main">
<div class="select-box">
<el-select v-model="box3SelectMonths" placeholder="选择时间" style="width: 100px">
<el-option v-for="item in box3MonthsList" :key="item.value" :label="item.label" :value="item.value"
<el-option v-for="item in box3MonthsList" :key="item.value" :label="item.label + '年'" :value="item.value"
@click="handleGetThinkPolicyIndustryChange()" />
</el-select>
</div>
</div>
<div class="box-main">
<div id="box3Chart"></div>
</div>
</div>
......@@ -78,43 +96,68 @@
<el-select v-model="selectedYear" placeholder="选择时间" style="width: 120px" @click="handleGetThinkPolicy()">
<el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<div class="paixu-btn" @click="handleSwithSort()">
<div class="icon1">
<img v-if="sort" src="@/assets/icons/shengxu1.png" alt="" />
<img v-else src="@/assets/icons/jiangxu1.png" alt="" />
</div>
<div class="text">{{ "发布时间" }}</div>
<div class="icon2">
<img v-if="sort" src="@/assets/icons/shengxu2.png" alt="" />
<img v-else src="@/assets/icons/jiangxu2.png" alt="" />
</div>
</div>
<!-- <el-select v-model="sort" placeholder="发布时间" style="width: 120px; margin-left: 8px">
<el-select class="select-box-sort" v-model="sort" placeholder="倒序" style="width: 120px;" :teleported="true"
:placement="'bottom-start'" :popper-options="{
modifiers: [
{
name: 'preventOverflow',
options: { mainAxis: false, altAxis: false }
},
{
name: 'flip',
enabled: false
}
]
}">
<template #prefix>
<img v-if="!sort" src="../thinkDynamics/images/image down.png" class="select-prefix-img" alt="" />
<img v-else src="../thinkDynamics/images/image up.png" class="select-prefix-img" alt="" />
</template>
<el-option @click="handleGetThinkPolicy()" :key="true" label="正序" :value="true" />
<el-option @click="handleGetThinkPolicy()" :key="false" label="倒序" :value="false" />
</el-select> -->
</el-select>
</div>
</div>
<div class="bottom-main">
<div class="left">
<div class="select-box">
<div class="select-box-header" style=" display: flex;">
<div class="select-box-science">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "科技领域" }}</div>
</div>
<div class="select-main" style="padding: 25px;">
<div class="select-main">
<div class="checkbox-group">
<!-- <el-checkbox v-for="(item, index) in areaList" :key="index" v-model="selectedAreaList" :label="item"
class="filter-checkbox">
{{ item }}
</el-checkbox> -->
<el-checkbox style="width: 180px" v-for="research in areaList" :key="research.id"
v-model="selectedAreaList" :label="research.id" class="filter-checkbox">
<el-checkbox class="filter-checkbox" label="全部领域"></el-checkbox>
<el-checkbox class="filter-checkbox" v-for="research in areaList" :key="research.id"
v-model="selectedAreaList" :label="research.id">
{{ research.name }}
</el-checkbox>
</div>
</div>
</div>
<div class="select-box-publish">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "发布时间" }}</div>
</div>
<div class="select-main">
<div class="checkbox-group">
<!-- <el-checkbox v-for="(item, index) in areaList" :key="index" v-model="selectedAreaList" :label="item"
class="filter-checkbox">
{{ item }}
</el-checkbox> -->
<el-checkbox class="filter-checkbox" label="全部领域"></el-checkbox>
<el-checkbox class="filter-checkbox" v-for="year in selectableYears" :key="year"
v-model="selectedAreaList" :label="year">
{{ year }}
</el-checkbox>
</div>
</div>
</div>
</div>
<div class="right">
<div class="right-main">
......@@ -242,7 +285,7 @@ const box1YearList = ref([
value: "2023"
}
]);
const selectableYears = ref(["2025年", "2024年", "2023年", "2022年", "2021年", "更早"]);
const handleGetThinkPolicyIndustry = async () => {
try {
const parmas = {
......@@ -263,6 +306,7 @@ const handleGetThinkPolicyIndustry = async () => {
box1Data.value = data;
const box1Chart = getPieChart(box1Data.value);
setChart(box1Chart, "box1Chart");
setChart(box1Chart, "box2Chart");
}
} catch (error) {
console.error("获取提出建议领域分布error", error);
......@@ -456,7 +500,7 @@ const selectedAreaList = ref([]);
const handleGetHylyList = async () => {
try {
const res = await getHylyList();
console.log("智库研究类型信息", res);
console.log("智库研究类型信息", res.data);
if (res.code === 200 && res.data) {
areaList.value = res.data;
}
......@@ -616,11 +660,11 @@ onMounted(() => {
.top {
height: 420px;
width: 1600px;
margin: 24px 0;
margin: 16px 0;
display: flex;
gap: 16px;
.box {
width: 790px;
width: 520px;
height: 420px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
......@@ -629,7 +673,7 @@ onMounted(() => {
background: rgba(255, 255, 255, 1);
.box-header {
width: 790px;
width: 520px;
height: 48px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
display: flex;
......@@ -673,87 +717,34 @@ onMounted(() => {
letter-spacing: 0px;
text-align: right;
}
}
.box-main {
height: 360px;
position: relative;
overflow: hidden;
#box1Chart {
height: 360px;
}
#box2Chart {
width: 470px;
margin: 0 auto;
margin-top: 50px;
height: 300px;
overflow: hidden;
overflow-y: auto;
.box2-item {
height: 30px;
margin-top: 20px;
display: flex;
align-items: center;
.icon {
width: 12px;
height: 12px;
border-radius: 6px;
}
.name {
width: 120px;
margin-left: 7px;
margin-right: 23px;
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.num {
width: 100px;
margin-left: 10px;
height: 22px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
text-align: right;
}
.per {
margin-left: 5px;
height: 22px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
}
#box3Chart {
height: 360px;
}
.select-box {
position: absolute;
z-index: 999;
top: 13px;
right: 33px;
top: 12px;
right: 43px;
width: 100px;
height: 28px;
.select-box-sort {
background: rgb(255, 255, 255);
box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1);
border: 1px solid rgb(230, 231, 232);
border-radius: 4px;
height: 32px;
}
:deep(.el-select-dropdown) {
left: 0 !important;
/* 强制下拉框左对齐选择框 */
top: 100% !important;
/* 强制下拉框在选择框正下方 */
transform: none !important;
/* 禁用默认的位移变换 */
}
.paixu-btn {
display: flex;
width: 120px;
......@@ -808,6 +799,26 @@ onMounted(() => {
}
}
}
.box-main {
height: 360px;
position: relative;
overflow: hidden;
#box1Chart {
height: 360px;
}
#box2Chart {
height: 360px;
}
#box3Chart {
height: 360px;
}
}
}
}
......@@ -821,18 +832,26 @@ onMounted(() => {
.search-box {
display: flex;
width: 300px;
width: 360px;
height: 32px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
position: relative;
.icon {
width: 16px;
height: 16px;
margin: 8px 7px;
cursor: pointer;
position: absolute;
right: 8px;
top: 8px;
display: flex;
justify-content: flex-end;
img {
width: 100%;
......@@ -905,17 +924,165 @@ onMounted(() => {
justify-content: space-between;
.left {
width: 300px;
height: 800px;
width: 360px;
height: 100%;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.select-box {
margin-top: 21px;
.select-box-science {
margin-top: 16px;
.select-box-header {
display: flex;
.title {
font-family: "Source Han Sans CN";
font-weight: 700;
font-size: 16px;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
}
.select-main {
margin-top: 12px;
}
.checkbox-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px 4px;
margin-left: 24px;
.filter-checkbox {
width: 160px;
margin: 0;
font-family: "Source Han Sans CN", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
}
.paixu-btn {
display: flex;
width: 120px;
height: 32px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
&:hover {
background: var(--color-bg-hover);
}
cursor: pointer;
.icon1 {
width: 11px;
height: 14px;
margin-top: 10px;
margin-left: 9px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 19px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
letter-spacing: 0px;
text-align: left;
margin-top: 7px;
margin-left: 9px;
}
.icon2 {
width: 10px;
height: 5px;
margin-top: 5px;
margin-left: 13px;
img {
width: 100%;
height: 100%;
}
}
}
.icon {
margin-top: 4px;
width: 8px;
height: 16px;
background: var(--color-main-active);
border-radius: 0 4px 4px 0;
}
.title {
color: rgba(5, 95, 194, 1);
margin-left: 17px;
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: left;
}
}
.select-box-publish {
margin-top: 24px;
margin-bottom: 24px;
.select-box-header {
display: flex;
.title {
font-family: "Source Han Sans CN";
font-weight: 700;
font-size: 16px;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
}
.select-main {
margin-top: 12px;
}
.checkbox-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px 4px;
margin-left: 24px;
.filter-checkbox {
width: 160px;
margin: 0;
font-family: "Source Han Sans CN", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
}
.paixu-btn {
display: flex;
......@@ -993,7 +1160,7 @@ onMounted(() => {
}
.right {
width: 1284px;
width: 1224px;
max-height: 1670px;
margin-bottom: 20px;
box-sizing: border-box;
......@@ -1146,4 +1313,10 @@ onMounted(() => {
}
}
}
:deep(.select-prefix-img) {
width: 8px !important;
height: 8px !important;
margin-right: 4px;
}
</style>
\ No newline at end of file
src/views/thinkTank/ThinkTankDetail/index.vue
浏览文件 @ a6d0a804
......@@ -17,7 +17,12 @@
<AreaTag v-for="(tag, index) in thinkTank.tags" :key="index" :tagName="tag.industryName"></AreaTag>
</div>
</div>
<!-- <div class="header-top-right">{{ '查看智库官网' }}</div> -->
<div class="header-top-right">
<button class="blue-btn">
<img class="btn-img" src="./images/image1.png" alt="" />
<span class="text">{{ '查看智库官网' }}</span>
</button>
</div>
</div>
<div class="header-footer">
<div class="tab" :class="{ tabActive: tabActiveName === '智库动态' }" @click="switchTab('智库动态')">
......@@ -94,19 +99,22 @@ onMounted(async () => {
height: 100%;
overflow: hidden;
overflow-y: auto;
.header {
width: 100%;
height: 188px;
box-sizing: border-box;
padding: 0 160px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
border-bottom: 1px solid rgb(234, 236, 238);
border-top: 1px solid rgb(234, 236, 238);
box-shadow: 0 0 20px 0 rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
position: relative;
position: sticky;
top: 0;
z-index: 99999;
overflow: hidden;
overflow: visible;
.header-top {
width: 1600px;
margin: 0 auto;
......@@ -116,6 +124,8 @@ onMounted(async () => {
.header-top-left {
width: 88px;
height: 88px;
img {
width: 100%;
height: 100%;
......@@ -130,8 +140,8 @@ onMounted(async () => {
.name {
height: 26px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
color: rgb(59, 65, 75);
font-family: 'Source Han Sans CN';
font-size: 20px;
font-weight: 700;
line-height: 26px;
......@@ -142,11 +152,11 @@ onMounted(async () => {
.e-name {
margin-left: 11px;
height: 26px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
color: rgb(132, 136, 142);
font-family: 'Source Han Sans CN';
font-size: 14px;
font-weight: 400;
line-height: 26px;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
}
......@@ -156,12 +166,13 @@ onMounted(async () => {
margin-top: 4px;
width: 769px;
height: 24px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
color: rgb(132, 136, 142);
font-family: 'Source Han Sans CN';
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.center-footer {
......@@ -171,18 +182,71 @@ onMounted(async () => {
.tag {
height: 26px;
line-height: 26px;
text-align: center;
padding: 0 8px;
padding: 1px 8px 1px 8px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border: 1px solid rgb(231, 243, 255);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
color: rgba(5, 95, 194, 1);
background: rgb(246, 250, 255);
position: relative;
display: inline-flex;
align-items: center;
.tag-industryName {
color: rgb(5, 95, 194);
font-family: 'Source Han Sans CN';
font-size: 16px;
font-weight: 400;
line-height: 23px;
text-align: left;
letter-spacing: 0px;
}
}
}
}
.header-top-right {
margin-left: auto;
height: 36px;
box-sizing: border-box;
position: relative;
.blue-btn {
height: 100%;
box-sizing: border-box;
border: none;
outline: none;
border-radius: 6px;
background: rgba(5, 95, 194, 1);
padding: 7px 16px;
display: flex;
align-items: center;
&:focus {
outline: none;
}
.btn-img {
width: 16px;
height: 16px;
margin-left: 0px;
margin-top: 3px;
margin-bottom: 3px;
margin-right: 8px;
}
.text {
color: #fff;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
line-height: 22px;
}
}
}
......@@ -191,14 +255,14 @@ onMounted(async () => {
.header-footer {
width: 1600px;
margin: 0 auto;
margin-top: 25px;
margin-top: 28px;
height: 48px;
display: flex;
gap: 24px;
.tab {
width: 94px;
height: 48px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
......@@ -218,21 +282,21 @@ onMounted(async () => {
.text {
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
color: rgb(59, 65, 75);
font-family: 'Source Han Sans CN';
font-size: 18px;
font-weight: 400;
line-height: 24px;
}
.textActive {
color: rgba(5, 95, 194, 1);
color: rgb(5, 95, 194);
font-weight: 700;
}
}
.tabActive {
border-bottom: 2px solid rgba(5, 95, 194, 1);
.tab.tabActive {
border-bottom: 2px solid rgb(5, 95, 194);
}
}
}
......@@ -241,167 +305,7 @@ onMounted(async () => {
margin: 0 auto;
width: 1600px;
.main-header {
height: 64px;
display: flex;
justify-content: space-between;
.search-box {
margin-top: 16px;
display: flex;
width: 300px;
height: 32px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
.icon {
width: 16px;
height: 16px;
margin: 8px 7px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
.select-box {
margin-top: 16px;
margin-right: 5px;
}
}
.main-content {
display: flex;
gap: 16px;
.left {
width: 300px;
height: 806px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1);
background: rgba(255, 255, 255, 1);
position: relative;
.select-box {
margin-top: 21px;
.select-box-header {
display: flex;
gap: 17px;
.icon {
margin-top: 4px;
width: 8px;
height: 16px;
background: var(--color-main-active);
border-radius: 0 4px 4px 0;
}
.title {
height: 24px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
}
.select-main {
margin-left: 25px;
}
.select-main1 {
width: 100px;
}
}
}
.right {
width: 1284px;
height: 1377px;
.card-box {
width: 1284px;
height: 1248px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.footer-card {
width: 418px;
height: 300px;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.footer-card-top {
width: 384px;
height: 206px;
margin: 0 auto;
margin-top: 15px;
img {
width: 100%;
height: 100%;
}
}
.footer-card-title {
margin: 0 auto;
margin-top: 13px;
width: 376px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
.footer-card-footer {
margin: 0 auto;
margin-top: 5px;
width: 376px;
height: 22px;
display: flex;
justify-content: space-between;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
}
.right-footer {
margin-top: 43px;
display: flex;
justify-content: space-between;
.info {
height: 19px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
letter-spacing: 0px;
text-align: left;
}
}
}
}
}
}
......
src/views/thinkTank/ThinkTankDetail/thinkDynamics/CongressHearing/index.vue 0 → 100644
浏览文件 @ a6d0a804
<template>
<div class="main-content">
<div class="left">
<!-- <div class="select-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "报告类型" }}</div>
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox v-for="type in reportTypeList" :key="type.id" v-model="selectedReportTypeList"
:label="type.id" class="filter-checkbox" @change="handleGetThinkDynamicsReport()">
{{ type.typeName }}
</el-checkbox>
</div>
</div>
</div> -->
<div class="select-research-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "研究类型" }}</div>
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox label="全部领域"></el-checkbox>
<el-checkbox v-for="type in researchTypeList" :key="type.id" v-model="selectedResearchTypeList"
:label="type.id" class="filter-checkbox" @change="handleGetThinkDynamicsReport()">
{{ type.name }}
</el-checkbox>
</div>
</div>
</div>
<div class="select-time-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "发布时间" }}</div>
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox label="全部时间"></el-checkbox>
<el-checkbox v-for="type in researchTimeList" :key="type.id" v-model="selectedResearchTypeList"
:label="type.id" class="filter-checkbox" @change="handleGetThinkDynamicsReport()">
{{ type.name }}
</el-checkbox>
</div>
</div>
<!-- <div class="input-main">
<el-input placeholder="输入作者名字" v-model="author" @input="handleGetThinkDynamicsReport()" />
</div> -->
</div>
<div class="select-hearing-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "听证会部门" }}</div>
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox label="全部部门"></el-checkbox>
<el-checkbox v-for="type in researchHearingList" :key="type.id" v-model="selectedResearchTypeList"
:label="type.id" class="filter-checkbox" @change="handleGetThinkDynamicsReport()">
{{ type.name }}
</el-checkbox>
</div>
</div>
<!-- <div class="input-main">
<el-input placeholder="输入作者名字" v-model="author" @input="handleGetThinkDynamicsReport()" />
</div> -->
</div>
</div>
<div class="right">
<div class="card-box">
<div class="card-content">
<div v-for="(item, index) in displayList" :key="item.id">
<div class="card-item">
<img class="card-item-img" src="../images/img congress.png" alt="report image" />
<div class="card-item-text">
<div class="card-item-title">
{{ item.title }}
</div>
<div class="card-item-time">
{{ item.time + ' · ' + item.content }}
<img src="../images/image open.png" alt="open icon" class="card-open-image" />
</div>
<div class="card-item-category"> {{ item.category }}</div>
</div>
</div>
<div class="divider" v-if="index !== displayList.length - 1"></div>
</div>
</div>
</div>
<div class="right-footer">
<div class="info">
共 {{ hearingData.length }} 项
</div>
<div class="page-box">
<el-pagination :page-size="10" background layout="prev, pager, next" :total="hearingData.length"
@current-change="handleCurrentChange" :current-page="currentPage" />
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, toRefs, watch, computed } from "vue";
const props = defineProps({
researchTypeList: {
type: Array,
default: () => []
},
researchTimeList: {
type: Array,
default: () => []
},
researchHearingList: {
type: Array,
default: () => []
},
hearingData: {
type: Array,
default: () => []
},
selectedResearchTypeList: {
type: Array,
default: () => []
},
curFooterList: {
type: Array,
default: () => []
},
total: {
type: Number,
default: 0
},
currentPage: {
type: Number,
default: 1
}
});
const emit = defineEmits([
"update:selectedResearchTypeList",
"filter-change",
"page-change",
"report-click"
]);
// 解构 props，保持模板里变量名不变
const { researchTypeList, researchTimeList, curFooterList, total, currentPage, researchHearingList, hearingData } = toRefs(props);
const pageSize = 10;
// 只展示当前页的 12 条，否则会一页显示全部 20 条
const displayList = computed(() => {
const list = hearingData.value || [];
const start = (currentPage.value - 1) * pageSize;
return list.slice(start, start + pageSize);
});
// 用本地 ref 替代 computed，el-checkbox 会直接修改数组，需要可变的 ref
const selectedResearchTypeList = ref([...(props.selectedResearchTypeList || [])]);
// 父组件更新时同步到子组件
watch(
() => props.selectedResearchTypeList,
val => {
selectedResearchTypeList.value = val ? [...val] : [];
},
{ immediate: true, deep: true }
);
// 子组件勾选变化时通知父组件，flush: 'sync' 确保在 @change 触发前父组件已更新，否则 filter-change 时父组件拿到的还是旧值
watch(
selectedResearchTypeList,
val => {
emit("update:selectedResearchTypeList", val);
},
{ deep: true, flush: "sync" }
);
// 保持模板里的方法名不变，但改成通知父组件，直接传入当前选中值避免时序问题
const handleGetThinkDynamicsReport = () => {
emit("update:selectedResearchTypeList", [...selectedResearchTypeList.value]);
emit("filter-change", [...selectedResearchTypeList.value]);
};
const handleCurrentChange = page => {
emit("page-change", page);
};
const handleToReportDetail = item => {
emit("report-click", item);
};
</script>
<style lang="scss" scoped>
.main-content {
display: flex;
gap: 16px;
.left {
width: 360px;
height: 874px;
padding-bottom: 36px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1);
background: rgba(255, 255, 255, 1);
position: relative;
.select-research-box {
width: 360px;
height: 284px;
margin-top: 21px;
.select-box-header {
display: flex;
gap: 17px;
margin-bottom: 12px;
.icon {
margin-top: 4px;
width: 8px;
height: 16px;
background: var(--color-main-active);
border-radius: 0 4px 4px 0;
}
.title {
height: 26px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 1px;
text-align: left;
}
}
.select-main {
margin-left: 25px;
.checkbox-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
}
.select-main1 {
width: 100px;
}
.input-main {
margin: 10px auto;
width: 250px;
height: 34px;
border-radius: 10px;
border: 1px solid rgba(230, 231, 232, 1);
}
}
.select-time-box {
margin-top: 21px;
width: 360px;
height: 156px;
.select-box-header {
margin-bottom: 12px;
display: flex;
gap: 17px;
.icon {
margin-top: 4px;
width: 8px;
height: 16px;
background: var(--color-main-active);
border-radius: 0 4px 4px 0;
}
.title {
height: 26px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 1px;
text-align: left;
}
}
.select-main {
margin-left: 25px;
.checkbox-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
}
.select-main1 {
width: 100px;
}
.input-main {
margin: 10px auto;
width: 250px;
height: 34px;
border-radius: 10px;
border: 1px solid rgba(230, 231, 232, 1);
}
}
.select-hearing-box {
margin-top: 21px;
width: 360px;
.select-box-header {
display: flex;
gap: 17px;
.icon {
margin-top: 4px;
width: 8px;
height: 16px;
background: var(--color-main-active);
border-radius: 0 4px 4px 0;
}
.title {
height: 26px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 1px;
text-align: left;
}
}
.select-main {
margin-left: 25px;
.checkbox-group {
display: grid;
}
}
.select-main1 {
width: 100px;
}
.input-main {
margin: 10px auto;
width: 250px;
height: 34px;
border-radius: 10px;
border: 1px solid rgba(230, 231, 232, 1);
}
}
}
.right {
width: 1224px;
height: 1377px;
.card-box {
width: 100%;
height: 1248px;
display: flex;
background: rgba(255, 255, 255, 1);
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1);
background: rgba(255, 255, 255, 1);
.card-content {
width: 1211px;
height: 1067px;
margin-top: 33px;
margin-left: 37px;
.card-item {
width: 100%;
height: 77px;
display: flex;
align-items: center;
.card-item-img {
width: 56px;
height: 77px;
margin-right: 22px;
flex-shrink: 0;
}
.card-item-text {
flex: 1;
min-width: 0;
flex-direction: column;
justify-content: space-between;
display: flex;
.card-item-title {
color: rgb(59, 65, 75);
font-family: "Source Han Sans CN";
font-size: 18px;
font-weight: 700;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
margin-bottom: 2px;
display: inline-flex;
}
.card-item-time {
color: rgb(95, 101, 108);
font-family: "Source Han Sans CN";
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
margin-bottom: 7px;
text-align: left;
display: inline-flex;
.card-open-image {
width: 16px;
height: 16px;
margin-left: 9px;
margin-top: 3px;
}
}
.card-item-category {
padding: 1px 8px;
box-sizing: border-box;
border: 1px solid rgb(231, 243, 255);
border-radius: 4px;
display: inline-flex;
background-color: rgb(247, 248, 249);
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0px;
text-align: left;
width: fit-content;
}
}
}
.divider {
height: 1px;
background: rgb(234, 236, 238);
margin: 16px 0;
}
}
}
.right-footer {
margin-top: 43px;
display: flex;
justify-content: space-between;
.info {
height: 19px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
letter-spacing: 0px;
text-align: left;
}
}
}
}
</style>
\ No newline at end of file
src/views/thinkTank/ThinkTankDetail/thinkDynamics/ThinkTankReport/index.vue 0 → 100644
浏览文件 @ a6d0a804
<template>
<div class="main-content">
<div class="left">
<!-- <div class="select-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "报告类型" }}</div>
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox v-for="type in reportTypeList" :key="type.id" v-model="selectedReportTypeList"
:label="type.id" class="filter-checkbox" @change="handleGetThinkDynamicsReport()">
{{ type.typeName }}
</el-checkbox>
</div>
</div>
</div> -->
<div class="select-research-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "研究类型" }}</div>
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox label="全部领域" class="filter-checkbox"></el-checkbox>
<el-checkbox v-for="type in researchTypeList" :key="type.id" v-model="selectedResearchTypeList"
:label="type.id" class="filter-checkbox" @change="handleGetThinkDynamicsReport()">
{{ type.name }}
</el-checkbox>
</div>
</div>
</div>
<div class="select-time-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "发布时间" }}</div>
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox label="全部时间"></el-checkbox>
<el-checkbox v-for="type in researchTimeList" :key="type.id" v-model="selectedResearchTypeList"
:label="type.id" class="filter-checkbox" @change="handleGetThinkDynamicsReport()">
{{ type.name }}
</el-checkbox>
</div>
</div>
<!-- <div class="input-main">
<el-input placeholder="输入作者名字" v-model="author" @input="handleGetThinkDynamicsReport()" />
</div> -->
</div>
</div>
<div class="right">
<div class="card-box">
<div class="footer-card" v-for="(item, index) in curFooterList" :key="index"
@click="handleToReportDetail(item)">
<div class="footer-card-top">
<img :src="item.imageUrl" alt="" />
</div>
<div class="footer-card-title">
{{ item.name }}
</div>
<div class="footer-card-footer">
<div class="time">{{ item.times }}</div>
<div class="from">{{ item.thinkTankName }}</div>
</div>
</div>
</div>
<div class="right-footer">
<div class="info">
共 {{ total }} 篇智库报告
</div>
<div class="page-box">
<el-pagination :page-size="12" background layout="prev, pager, next" :total="total"
@current-change="handleCurrentChange" :current-page="currentPage" />
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, toRefs, watch } from "vue";
const props = defineProps({
researchTypeList: {
type: Array,
default: () => []
},
researchTimeList: {
type: Array,
default: () => []
},
selectedResearchTypeList: {
type: Array,
default: () => []
},
curFooterList: {
type: Array,
default: () => []
},
total: {
type: Number,
default: 0
},
currentPage: {
type: Number,
default: 1
}
});
const emit = defineEmits([
"update:selectedResearchTypeList",
"filter-change",
"page-change",
"report-click"
]);
// 解构 props，保持模板里变量名不变
const { researchTypeList, researchTimeList, curFooterList, total, currentPage } = toRefs(props);
// 用本地 ref 替代 computed，el-checkbox 会直接修改数组，需要可变的 ref
const selectedResearchTypeList = ref([...(props.selectedResearchTypeList || [])]);
// 父组件更新时同步到子组件
watch(
() => props.selectedResearchTypeList,
val => {
selectedResearchTypeList.value = val ? [...val] : [];
},
{ immediate: true, deep: true }
);
// 子组件勾选变化时通知父组件，flush: 'sync' 确保在 @change 触发前父组件已更新，否则 filter-change 时父组件拿到的还是旧值
watch(
selectedResearchTypeList,
val => {
emit("update:selectedResearchTypeList", val);
},
{ deep: true, flush: "sync" }
);
// 保持模板里的方法名不变，但改成通知父组件，直接传入当前选中值避免时序问题
const handleGetThinkDynamicsReport = () => {
emit("update:selectedResearchTypeList", [...selectedResearchTypeList.value]);
emit("filter-change", [...selectedResearchTypeList.value]);
};
const handleCurrentChange = page => {
emit("page-change", page);
};
const handleToReportDetail = item => {
emit("report-click", item);
};
</script>
<style lang="scss" scoped>
.main-content {
display: flex;
gap: 16px;
.left {
width: 360px;
height: 541px;
padding-bottom: 36px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1);
background: rgba(255, 255, 255, 1);
position: relative;
.select-research-box {
width: 360px;
height: 284px;
margin-top: 21px;
.select-box-header {
display: flex;
gap: 17px;
margin-bottom: 12px;
.icon {
margin-top: 4px;
width: 8px;
height: 16px;
background: var(--color-main-active);
border-radius: 0 4px 4px 0;
}
.title {
height: 26px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 1px;
text-align: left;
}
}
.select-main {
margin-left: 25px;
.checkbox-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px 4px;
.filter-checkbox {
width: 160px;
height: 24px;
}
}
}
.select-main1 {
width: 100px;
}
.input-main {
margin: 10px auto;
width: 250px;
height: 34px;
border-radius: 10px;
border: 1px solid rgba(230, 231, 232, 1);
}
}
.select-time-box {
margin-top: 21px;
width: 360px;
height: 156px;
.select-box-header {
display: flex;
gap: 17px;
.icon {
margin-top: 4px;
width: 8px;
height: 16px;
background: var(--color-main-active);
border-radius: 0 4px 4px 0;
}
.title {
height: 26px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 1px;
text-align: left;
}
}
.select-main {
margin-left: 25px;
.checkbox-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
}
.select-main1 {
width: 100px;
}
.input-main {
margin: 10px auto;
width: 250px;
height: 34px;
border-radius: 10px;
border: 1px solid rgba(230, 231, 232, 1);
}
}
}
.right {
width: 1284px;
height: 1377px;
.card-box {
width: 1226px;
height: 1248px;
display: flex;
flex-wrap: wrap;
gap: 13px;
.footer-card {
width: 398px;
height: 300px;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
&:hover {
transform: translateY(-3px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
cursor: pointer;
.footer-card-top {
width: 364px;
height: 180px;
margin: 0 auto;
margin-top: 15px;
position: relative;
img {
width: 100%;
height: 100%;
}
}
.footer-card-title {
margin: 0 auto;
margin-top: 12px;
width: 360px;
color: rgb(59, 65, 75);
font-family: "Source Han Sans CN";
font-size: 18px;
font-weight: 700;
line-height: 24px;
// 多行省略 + 自动换行（兼容写法）
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; // webkit 私有：开启弹性盒模型
display: box; // 标准写法（兜底）
-webkit-line-clamp: 2; // webkit 私有：限制行数
line-clamp: 2; // 标准属性：解决兼容性提示
-webkit-box-orient: vertical; // webkit 私有：垂直排列
box-orient: vertical; // 标准写法（兜底）
// 基础换行属性（确保文字能换行）
word-wrap: break-word;
word-break: break-all;
white-space: normal;
}
.footer-card-footer {
position: absolute;
left: 50%;
bottom: 15px;
transform: translateX(-50%);
margin: 0;
width: 360px;
height: 22px;
display: flex;
justify-content: space-between;
color: rgb(95, 101, 108);
font-family: "Source Han Sans CN";
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
}
.right-footer {
margin-top: 35px;
display: flex;
justify-content: space-between;
.info {
height: 19px;
color: rgb(132, 136, 142);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
letter-spacing: 0px;
text-align: left;
}
}
}
}
:deep(.el-checkbox) {
margin-right: 0 !important;
}
</style>
\ No newline at end of file
src/views/thinkTank/ThinkTankDetail/thinkDynamics/index.vue
浏览文件 @ a6d0a804
......@@ -3,91 +3,87 @@
<div class="main-header">
<div class="search-box">
<el-input placeholder="搜索智库报告" v-model="searchReport" style="width: 270px" />
<el-input placeholder="搜索智库动态" v-model="searchReport" style="width: 270px" />
<div class="icon">
<img src="./images/search-icon.png" alt="" @click="handleGetThinkDynamicsReport()" />
</div>
</div>
<div>
<div class="select-box">
<el-select v-model="selectedYear" placeholder="选择时间" style="width: 120px">
<el-option @click="handleGetThinkDynamicsReport()" v-for="item in yearList" :key="item.value"
:label="item.label" :value="item.value" />
</el-select>
<el-select v-model="sort" placeholder="发布时间" style="width: 120px; margin-left: 8px;">
<el-option @click="handleGetThinkDynamicsReport()" :key="true" label="正序" :value="true" />
<el-option @click="handleGetThinkDynamicsReport()" :key="false" label="倒序" :value="false" />
</el-select>
<div class="report-btn-group">
<div class="report-btn" v-for="type in choseTypeList" :key="type.id"
:class="{ active: activeTypeId === type.id }" @click="handleChooseType(type)">
<div class="text"> {{ type.name }}</div>
</div>
</div>
</div>
<div class="main-content">
<div class="left">
<!-- <div class="select-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "报告类型" }}</div>
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox v-for="type in reportTypeList" :key="type.id" v-model="selectedReportTypeList"
:label="type.id" class="filter-checkbox" @change="handleGetThinkDynamicsReport()">
{{ type.typeName }}
</el-checkbox>
</div>
</div>
</div> -->
<div class="select-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "研究类型" }}</div>
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox v-for="type in researchTypeList" :key="type.id" v-model="selectedResearchTypeList"
:label="type.id" class="filter-checkbox" @change="handleGetThinkDynamicsReport()">
{{ type.name }}
</el-checkbox>
</div>
</div>
</div>
<div>
<div class="select-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "作者" }}</div>
<div class="select-box-time">
<el-select v-model="selectedYear" placeholder="近一年以来" style="width: 120px" :teleported="true"
:placement="'bottom-start'" :popper-options="{
modifiers: [
{
name: 'preventOverflow', // 禁用自动翻转逻辑
options: {
mainAxis: false, // 禁用垂直方向的自动调整
altAxis: false, // 禁用水平方向的自动调整
}
},
{
name: 'flip', // 完全禁用翻转功能
enabled: false
}
]
}">
<el-option @click="handleGetThinkDynamicsReport()" v-for="item in yearList" :key="item.value"
:label="item.label" :value="item.value" />
</el-select>
</div>
<div class="input-main">
<el-input placeholder="输入作者名字" v-model="author" @input="handleGetThinkDynamicsReport()" />
</div>
</div>
</div>
<div class="right">
<div class="card-box">
<div class="footer-card" v-for="(item, index) in curFooterList" :key="index"
@click="handleToReportDetail(item)">
<div class="footer-card-top">
<img :src="item.imageUrl" alt="" />
</div>
<div class="footer-card-title">
{{ item.name }}
</div>
<div class="footer-card-footer">
<div class="time">{{ item.times }}</div>
<div class="from">{{ item.thinkTankName }}</div>
</div>
</div>
</div>
<div class="right-footer">
<div class="info">
共 {{ total }} 项
</div>
<div class="page-box">
<el-pagination :page-size="12" background layout="prev, pager, next" :total="total"
@current-change="handleCurrentChange" :current-page="currentPage" />
<div class="select-box-sort">
<el-select v-model="sort" placeholder="倒序" style="width: 120px" :teleported="true"
:placement="'bottom-start'" :popper-options="{
modifiers: [
{
name: 'preventOverflow', // 禁用自动翻转逻辑
options: {
mainAxis: false, // 禁用垂直方向的自动调整
altAxis: false, // 禁用水平方向的自动调整
}
},
{
name: 'flip', // 完全禁用翻转功能
enabled: false
}
]
}">
<template #prefix>
<img src="./images/image down.png" class="select-prefix-img" alt="" @click.stop="toggleSortAndFetch()"
:key="true" label="正序" :value="true" v-if="!sort" />
<img src="./images/image up.png" class="select-prefix-img" alt="" @click.stop="toggleSortAndFetch()"
:key="true" label="正序" :value="true" v-if="sort" />
</template>
<el-option @click="handleGetThinkDynamicsReport()" :key="true" label="正序" :value="true" />
<el-option @click="handleGetThinkDynamicsReport()" :key="false" label="倒序" :value="false" />
</el-select>
</div>
</div>
</div>
</div>
<div v-if="pageChange">
<ThinkTankReport :research-type-list="researchTypeList" :research-time-list="researchTimeList"
:selected-research-type-list="selectedResearchTypeList" :cur-footer-list="curFooterList" :total="total"
:current-page="currentPage" @update:selected-research-type-list="val => (selectedResearchTypeList.value = val)"
@filter-change="(payload) => handleGetThinkDynamicsReport(payload)" @page-change="handleCurrentChange"
@report-click="handleToReportDetail" />
</div>
<div v-if="!pageChange">
<CongressHearing :research-type-list="researchTypeList" :research-time-list="researchTimeList"
:research-hearing-list="researchHearingList" :selected-research-type-list="selectedResearchTypeList"
:cur-footer-list="curFooterList" :total="total" :current-page="currentPage" :hearing-data="hearingData"
@update:selected-research-type-list="val => (selectedResearchTypeList.value = val)"
@filter-change="(payload) => handleGetThinkDynamicsReport(payload)" @page-change="handleCurrentChange"
@report-click="handleToReportDetail" />
</div>
</div>
</template>
......@@ -112,8 +108,10 @@ import {
getThinkDynamicsReport
} from "@/api/thinkTank/overview";
import { useRouter } from "vue-router";
import ThinkTankReport from "./ThinkTankReport/index.vue";
import CongressHearing from "./CongressHearing/index.vue";
const router = useRouter();
const pageChange = ref(true)
const searchReport = ref('')
const handleToReportDetail = (item) => {
......@@ -126,7 +124,130 @@ const handleToReportDetail = (item) => {
});
window.open(route.href, "_blank");
}
const hearingData = ref([
// 军事类（10条）
{
title: "2025财年美国国防部国防授权法案听证会：军事预算与战略部署",
content: "参与美中经济与安全审查委员会听证会",
category: "军事",
time: "2025年7月8日"
},
{
title: "美国国会众议院听证会：美军网络安全与军事信息系统防护",
content: "参与美中经济与安全审查委员会听证会",
category: "军事",
time: "2025年6月15日"
},
{
title: "俄乌冲突背景下美国对乌军事援助听证会：援助规模与后续规划",
content: "参与美中经济与安全审查委员会听证会",
category: "军事",
time: "2025年5月22日"
},
{
title: "美国海军舰艇建造与维护听证会：舰队规模目标与工业基础支撑",
content: "参与美中经济与安全审查委员会听证会",
category: "军事",
time: "2025年4月10日"
},
{
title: "美军太空军事能力建设听证会：太空军发展与反卫星武器管控",
content: "参与美中经济与安全审查委员会听证会",
category: "军事",
time: "2025年3月5日"
},
{
title: "美国国防工业基础听证会：军工供应链韧性与本土制造能力",
content: "参与美中经济与安全审查委员会听证会",
category: "军事",
time: "2025年2月18日"
},
{
title: "美军人工智能军事应用听证会：伦理规范与作战效能评估",
content: "参与美中经济与安全审查委员会听证会",
category: "军事",
time: "2025年1月30日"
},
{
title: "美国陆军未来作战系统听证会：下一代战车与单兵装备研发",
content: "参与美中经济与安全审查委员会听证会",
category: "军事",
time: "2025年7月2日"
},
{
title: "北约军事合作听证会：美国对北约防务开支承诺与兵力部署",
content: "参与美中经济与安全审查委员会听证会",
category: "军事",
time: "2025年6月8日"
},
{
title: "美军核力量现代化听证会：洲际导弹更新与核不扩散政策",
content: "参与美中经济与安全审查委员会听证会",
category: "军事",
time: "2025年5月1日"
},
// 先进制造类（10条）
{
title: "美国国会听证会：先进制造业供应链重塑与本土产业回流",
content: "参与美中经济与安全审查委员会听证会",
category: "先进制造",
time: "2025年7月15日"
},
{
title: "先进制造中的人工智能应用听证会：智能制造与产业升级",
content: "参与美中经济与安全审查委员会听证会",
category: "先进制造",
time: "2025年6月20日"
},
{
title: "美国先进制造业研发法案听证会：资金分配与技术突破方向",
content: "参与美中经济与安全审查委员会听证会",
category: "先进制造",
time: "2025年4月25日"
},
{
title: "新能源装备先进制造听证会：动力电池与氢能装备产业化",
content: "参与美中经济与安全审查委员会听证会",
category: "先进制造",
time: "2025年3月12日"
},
{
title: "美国半导体先进制造听证会：芯片制造本土化与技术封锁",
content: "参与美中经济与安全审查委员会听证会",
category: "先进制造",
time: "2025年2月8日"
},
{
title: "先进制造劳动力培训听证会：技能匹配与产业人才供给",
content: "参与美中经济与安全审查委员会听证会",
category: "先进制造",
time: "2025年1月15日"
},
{
title: "航空航天先进制造听证会：民用飞机轻量化材料与智能制造",
content: "参与美中经济与安全审查委员会听证会",
category: "先进制造",
time: "2025年7月20日"
},
{
title: "先进制造中的可持续发展听证会：绿色制造与碳中和目标",
content: "参与美中经济与安全审查委员会听证会",
category: "先进制造",
time: "2025年6月1日"
},
{
title: "美国国防先进制造听证会：军工制造数字化与快速响应能力",
content: "参与美中经济与安全审查委员会听证会",
category: "先进制造",
time: "2025年5月18日"
},
{
title: "先进制造标准制定听证会：美国主导的全球制造标准体系构建",
content: "参与美中经济与安全审查委员会听证会",
category: "先进制造",
time: "2025年4月8日"
}
])
const reportTypeList = ref([
{
id: '研究报告',
......@@ -165,6 +286,88 @@ const researchTypeList = ref([
name: '期刊文章',
},
])
const choseTypeList = ref([
{
id: '智库报告',
name: '智库报告',
},
{
id: '调查项目',
name: '调查项目',
},
{
id: '国会听证会',
name: '国会听证会',
},
])
const activeTypeId = ref(choseTypeList.value[0]?.id || null)
const handleChooseType = (type) => {
activeTypeId.value = type.id
if (type.id === '国会听证会') {
pageChange.value = false
} else {
pageChange.value = true
}
}
const researchTimeList = ref([
{
id: '2025年',
name: '2025年',
},
{
id: '2024年',
name: '2024年',
},
{
id: '2023年',
name: '2023年',
},
{
id: '2022年',
name: '2022年',
},
{
id: '2021年',
name: '2021年',
},
{
id: '更早以前',
name: '更早以前',
}
])
const researchHearingList = ref([
{
id: '美中经济与安全审查委员会',
name: '美中经济与安全审查委员会',
},
{
id: '国会-行政部门中国委员会',
name: '国会-行政部门中国委员会',
},
{
id: '美中战略竞争特设委员会',
name: '美中战略竞争特设委员会',
},
{
id: '众议院小企业委员会',
name: '众议院小企业委员会',
},
{
id: '众议院国土安全委员会',
name: '众议院国土安全委员会',
},
{
id: '参议院能源与自然资源委员会',
name: '参议院能源与自然资源委员会',
},
{
id: '新材料',
name: '新材料',
}
])
const selectedResearchTypeList = ref([])
const author = ref('') // 作者
......@@ -260,7 +463,7 @@ const yearList = ref([
]);
const selectedYear = ref(1);
const sort = ref(true)
const sort = ref(false);
//获取当前时间x年前的日期
function getDateYearsAgo(years) {
// 获取当前日期
......@@ -301,7 +504,10 @@ const handleGetHylyList = async () => {
}
};
const toggleSortAndFetch = async () => {
sort.value = !sort.value
await handleGetThinkDynamicsReport()
}
const currentPage = ref(1);
// 处理页码改变事件
const handleCurrentChange = page => {
......@@ -318,22 +524,23 @@ function arrayToString(arr) {
}, "");
}
// 获取智库动态报告
const handleGetThinkDynamicsReport = async () => {
// 获取智库动态报告，payload 为子组件筛选变更时传入的当前选中值，避免时序导致拿到旧值
const handleGetThinkDynamicsReport = async (payload) => {
const selectedIds = Array.isArray(payload) ? payload : selectedResearchTypeList.value;
if (Array.isArray(payload)) {
selectedResearchTypeList.value = payload;
}
try {
const parmas = {
id: router.currentRoute._value.params.id,
startDate: getDateYearsAgo(selectedYear.value),
startDate: getDateYearsAgo(selectedYear.value ?? 1),
parmas: {
searchText: searchReport.value,
authorName: author.name,
sortFun: sort.value,
authorName: author.value ? author.value : null,
sortFun: sort.value ?? true,
currentPage: currentPage.value - 1,
pageSize: 12,
// reportTypeIds: arrayToString(selectedReportTypeList.value) === '' ? null : arrayToString(selectedResearchTypeList.value),
researchTypeIds: arrayToString(selectedResearchTypeList.value) === '' ? null : arrayToString(selectedResearchTypeList.value)
researchTypeIds: arrayToString(selectedIds) === '' ? null : arrayToString(selectedIds)
}
}
......@@ -365,22 +572,86 @@ onMounted(async () => {
height: 64px;
width: 1600px;
display: flex;
justify-content: space-between;
align-items: center;
background: rgb(255, 255, 255);
// 让右侧下拉框整体靠右
>div:last-child {
margin-left: auto;
display: flex;
align-items: center;
}
.report-btn-group {
width: 384px;
height: 32px;
/* 定位参数：top:268px、left:536px（需基于定位父容器） */
/* 布局分布：集中分布（水平+垂直居中） */
display: flex;
margin-top: 16px;
margin-left: 16px;
/* 图层模式：穿透（事件+视觉穿透） */
background: rgb(255, 255, 255); // 与整体背景一致的纯白色
/* 基础兼容：避免尺寸偏移 */
box-sizing: border-box;
gap: 12px;
.report-btn {
width: 120px; // 宽度：120px
height: 32px; // 高度：32px
border-radius: 21px; // 圆角半径：21px
border: 1px solid rgb(230, 231, 232); // 描边：1px实线，颜色为rgb(230, 231, 232)
background: rgb(255, 255, 255); // 背景色：白色
box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1);
// 布局分布：集中分布（水平+垂直居中）
display: flex;
align-items: center;
justify-content: center;
// 文字样式（匹配你项目的字体风格）
color: rgba(59, 65, 75, 1); // 适配你项目的文字主色
font-family: 'Source Han Sans CN';
font-size: 16px;
font-weight: 400;
line-height: 1; // 消除行高对垂直居中的影响
// 图层模式：穿透（即允许点击事件穿透，如需的话）
box-sizing: border-box; // 确保描边/内边距不影响尺寸
&.active {
background: rgb(5, 95, 194); // 蓝色背景
color: #fff; // 文字变白
box-shadow: none; // 需要的话可以关掉灰描边
}
}
}
.search-box {
margin-top: 16px;
display: flex;
width: 300px;
width: 360px;
height: 32px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border: 1px solid rgb(230, 231, 232);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
background: rgb(255, 255, 255);
box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1);
.icon {
width: 16px;
height: 16px;
margin: 8px 7px;
margin-top: 8px;
margin-bottom: 8px;
margin-left: 50px;
cursor: pointer;
img {
......@@ -392,7 +663,31 @@ onMounted(async () => {
.select-box {
margin-top: 16px;
margin-right: 5px;
display: flex;
.select-box-time,
.select-box-sort {
background: rgb(255, 255, 255);
box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1);
border: 1px solid rgb(230, 231, 232);
border-radius: 4px;
height: 32px;
}
.select-prefix-img {
width: 8px;
height: 8px;
margin-right: 4px;
}
:deep(.el-select-dropdown) {
left: 0 !important;
/* 强制下拉框左对齐选择框 */
top: 100% !important;
/* 强制下拉框在选择框正下方 */
transform: none !important;
/* 禁用默认的位移变换 */
}
}
}
......@@ -402,8 +697,8 @@ onMounted(async () => {
gap: 16px;
.left {
width: 300px;
height: 100%;
width: 360px;
height: 541px;
padding-bottom: 36px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
......@@ -412,49 +707,7 @@ onMounted(async () => {
background: rgba(255, 255, 255, 1);
position: relative;
.select-box {
margin-top: 21px;
.select-box-header {
display: flex;
gap: 17px;
.icon {
margin-top: 4px;
width: 8px;
height: 16px;
background: var(--color-main-active);
border-radius: 0 4px 4px 0;
}
.title {
height: 26px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 1px;
text-align: left;
}
}
.select-main {
margin-left: 25px;
}
.select-main1 {
width: 100px;
}
.input-main {
margin: 10px auto;
width: 250px;
height: 34px;
border-radius: 10px;
border: 1px solid rgba(230, 231, 232, 1);
}
}
}
.right {
......@@ -462,14 +715,14 @@ onMounted(async () => {
height: 1377px;
.card-box {
width: 1284px;
width: 1226px;
height: 1248px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
.footer-card {
width: 418px;
width: 398px;
height: 300px;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
......@@ -484,7 +737,7 @@ onMounted(async () => {
cursor: pointer;
.footer-card-top {
width: 384px;
width: 364px;
height: 206px;
margin: 0 auto;
margin-top: 15px;
......@@ -547,6 +800,7 @@ onMounted(async () => {
.filter-checkbox {
width: 180px;
}
......
src/views/thinkTank/index.vue
浏览文件 @ a6d0a804
......@@ -13,7 +13,7 @@
</div> -->
<div class="home-main-header-center">
<SearchContainer style="margin-bottom: 0; margin-top: 48px; height: fit-content" v-if="containerRef"
<SearchContainer style="margin-bottom: 0; margin-top: 51px; height: fit-content" v-if="containerRef"
placeholder="搜索智库报告" :containerRef="containerRef" areaName="智库" />
<!-- <el-input v-model="searchThinktankText" @keyup.enter="handleSearch"
style="width: 838px; height: 100%" placeholder="搜索智库报告" />
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论