Skip to content

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

feat:新增概览页时间线日历热力图功能

上级 bb76d85f 6e0bf909
隐藏空白字符变更
内嵌 并排
正在显示 包含 1990 行增加 和 739 行删除
src/api/allGovernment.js
浏览文件 @ e811d74d
......@@ -6,14 +6,13 @@ import request from "@/api/request.js";
* * @param {String} params.monthNum // 月份数
*/
export function getAllGovernmentList(params) {
return request({
method: 'GET',
url: `/api/rivalryIndex/governmentSanctionsData`,
params
})
return request({
method: "GET",
url: `/api/rivalryIndex/governmentSanctionsData`,
params
});
}
// 全政府-获取美对华制裁措施数量趋势
/**
* @header token
......@@ -24,22 +23,23 @@ export function getAllGovernmentList(params) {
* @param {String} params.sanType // 制裁手段
*/
export function getUSChinaSanctionTrend(params) {
return request({
method: 'GET',
url: `/api/rivalryIndex/sanctionsQuantitativeTrend`,
params
})
return request({
method: "GET",
url: `/api/rivalryIndex/sanctionsQuantitativeTrend`,
params
});
}
// 全政府-美政府部门打压遏制最新动态
/**
* @header token
*/
export function getUSGovernmentLatestDynamic() {
return request({
method: 'GET',
url: `/api/rivalryIndex/governmentSanctionsDynamics`
})
export function getUSGovernmentLatestDynamic(params) {
return request({
method: "GET",
url: `/api/rivalryIndex/governmentSanctionsDynamics`,
params
});
}
// 全政府-美政府部门联合制裁排行
......@@ -47,13 +47,12 @@ export function getUSGovernmentLatestDynamic() {
* @header token
*/
export function getUSGovernmentJointSanctionRank() {
return request({
method: 'GET',
url: `/api/rivalryIndex/governmentJointSanctionsRanking`
})
return request({
method: "GET",
url: `/api/rivalryIndex/governmentJointSanctionsRanking`
});
}
// 全政府-美政府部门对我打压遏制时间线
/**
* @header token
......@@ -65,24 +64,23 @@ export function getUSGovernmentJointSanctionRank() {
* @param {String} params.field // 领域ID
*/
export function getUSGovernmentSanctionHistory(params) {
return request({
method: 'GET',
url: `/api/rivalryIndex/getSanctionProcess`,
params
})
return request({
method: "GET",
url: `/api/rivalryIndex/getSanctionProcess`,
params
});
}
// 全政府-获取部门数据
/**
* @header token
*/
export function getDepartmentList(params) {
return request({
method: 'GET',
url: `/api/organization/summaryDepartList`,
params
})
return request({
method: "GET",
url: `/api/organization/summaryDepartList`,
params
});
}
// 全政府-获取制裁手段数据
......@@ -90,11 +88,11 @@ export function getDepartmentList(params) {
* @params {orgId}
*/
export function getSanTypeList(params) {
return request({
method: 'GET',
url: `/api/rivalryIndex/sanTypeList`,
params
})
return request({
method: "GET",
url: `/api/rivalryIndex/sanTypeList`,
params
});
}
// 全政府-获取未来三个月内的打压遏制时间线
......@@ -102,9 +100,9 @@ export function getSanTypeList(params) {
* @params {field}
*/
export function getThreeMonthSanctionProcess(params) {
return request({
method: 'GET',
url: `/api/rivalryIndex/nextThreeMonthSanctionProcess`,
params
})
}
\ No newline at end of file
return request({
method: "GET",
url: `/api/rivalryIndex/nextThreeMonthSanctionProcess`,
params
});
}
src/api/bill.js
浏览文件 @ e811d74d
......@@ -20,7 +20,7 @@ export function getBillInfo(params) {
export function getBillPerson(params) {
return request({
method: 'GET',
url: `/api/billInfoBean/person/${params.billId}`,
url: `/bill/billInfoBean/person/${params.billId}`,
params,
})
}
......
src/api/companyPages/index.js
浏览文件 @ e811d74d
......@@ -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/SimplePagination.vue 0 → 100644
浏览文件 @ e811d74d
NEW_FILE_CODE
<template>
<div class="simple-pagination">
<div class="pagination-wrapper">
<el-icon class="pagination-btn" @click="handlePrevPage" :class="{ disabled: currentPage === 1 }">
<el-icon :size="16">
<ArrowLeft />
</el-icon>
</el-icon>
<div class="pagination-info">
<span class="current-page">{{ currentPage }}</span>
<span>/</span>
<span>{{ totalPages }}</span>
</div>
<el-icon class="pagination-btn" @click="handleNextPage" :class="{ disabled: currentPage === totalPages }">
<el-icon :size="16">
<ArrowRight />
</el-icon>
</el-icon>
</div>
</div>
</template>
<script setup>
import { computed } from "vue";
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
const props = defineProps({
// 当前页码
currentPage: {
type: Number,
default: 1
},
// 每页显示条数
pageSize: {
type: Number,
default: 5
},
// 总记录数
total: {
type: Number,
default: 0
}
});
const emit = defineEmits(["update:currentPage", "page-change"]);
// 计算总页数
const totalPages = computed(() => {
return Math.ceil(props.total / props.pageSize) || 1;
});
// 处理上一页
const handlePrevPage = () => {
if (props.currentPage > 1) {
const newPage = props.currentPage - 1;
emit("update:currentPage", newPage);
emit("page-change", newPage);
}
};
// 处理下一页
const handleNextPage = () => {
if (props.currentPage < totalPages.value) {
const newPage = props.currentPage + 1;
emit("update:currentPage", newPage);
emit("page-change", newPage);
}
};
</script>
<style lang="scss" scoped>
.simple-pagination {
display: flex;
justify-content: center;
align-items: center;
padding: 16px 0;
.pagination-wrapper {
display: flex;
align-items: center;
gap: 12px;
.pagination-btn {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(231, 243, 255, 1);
// border: 1px solid #dcdfe6;
border: none;
border-radius: 4px;
color: #055fc2;
font-size: 20px;
cursor: pointer;
transition: all 0.3s;
&:hover:not(.disabled) {
background-color: #f5f7fa;
border-color: #c0c4cc;
}
&.disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: #f5f7fa;
color: #c0c4cc;
}
}
.pagination-info {
font-size: 14px;
color: rgba(5, 95, 194, 1);
// min-width: 60px;
text-align: center;
display: flex;
gap: 5px;
// letter-spacing: 5px;
}
}
}
</style>
src/components/base/newsList/newsItem.vue → src/components/base/newsList/NewsItem.vue
浏览文件 @ e811d74d
......@@ -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/base/riskSignal/index.vue
浏览文件 @ e811d74d
......@@ -236,25 +236,6 @@ const handleMoreClick = () => {
.item-left {
margin-top: 4px;
margin-left: 0px;
margin-bottom: 4px;
width: 40px;
height: 40px;
border-radius: 20px;
color: rgba(82, 196, 26, 1);
background: rgba(246, 255, 237, 1);
font-family: Microsoft YaHei;
font-size: 12px;
font-weight: 400;
line-height: 14px;
box-sizing: border-box;
padding: 6px 4px;
text-align: center;
flex-shrink: 0;
}
.item-right {
margin-left: 12px;
height: 46px;
......
src/components/buttonList/buttonList.vue
浏览文件 @ e811d74d
<template>
<div class="buttonList" :style="{ gap: gap + 'px' }">
<Button class="button" @click="setActiveIndex(item)" :is-active="isActive(item)" v-for="item in list" :key="item.id">
<Button
class="button"
@click="setActiveIndex(item)"
:is-active="isActive(item)"
:disabled="disabled || item.disabled"
v-for="item in list"
:key="item.id"
>
<slot name="item" :item="item">
{{ item.text }}
</slot>
......@@ -29,6 +36,10 @@ const props = defineProps({
default: function () {
return [];
}
},
disabled: {
type: Boolean,
default: false
}
});
const emit = defineEmits(["click"]);
......@@ -40,6 +51,9 @@ const isActive = item => {
}
};
function setActiveIndex(item) {
if (props.disabled || item.disabled) {
return;
}
if (!props.multiple) {
if (props.activeId === item.id) {
return;
......@@ -63,5 +77,12 @@ function setActiveIndex(item) {
gap: 8px;
overflow-x: auto;
flex-wrap: wrap;
.button {
&.is-disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
}
</style>
src/components/devStyle/components/index.vue
浏览文件 @ e811d74d
<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>
<ConstStyle />
......
src/router/modules/company.js
浏览文件 @ e811d74d
//企业主页
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/router/modules/riskSignal.js → src/router/modules/viewRiskSignal.js
浏览文件 @ e811d74d
// 风险信号
const RiskSignal = () => import('@/views/riskSignal/index.vue')
const viewRiskSignal = () => import('@/views/viewRiskSignal/index.vue')
const riskSignalRoutes = [
const viewRiskSignalRoutes = [
//风险信号页面路由
{
path: "/riskSignal",
name: "riskSignal",
component: RiskSignal,
path: "/viewRiskSignal",
name: "viewRiskSignal",
component: viewRiskSignal,
meta: {
title: "风险信号"
}
}
]
export default riskSignalRoutes
\ No newline at end of file
export default viewRiskSignalRoutes
\ No newline at end of file
src/styles/common.scss
浏览文件 @ e811d74d
/***背景作为卡片***/
.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
浏览文件 @ e811d74d
......@@ -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
浏览文件 @ e811d74d
......@@ -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);
......
src/views/ZMOverView/components/fourSuppress/components/addDomain/index-back.vue
浏览文件 @ e811d74d
......@@ -80,7 +80,7 @@
</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)">
......@@ -109,6 +109,25 @@
</el-tooltip>
</div>
</div>
<div class="news-pagination">
<div class="pagination-wrapper">
<el-button
class="pagination-btn"
type="primary"
@click="handlePrevPage"
:disabled="newsCurrentPage === 1"
:icon="ArrowLeft"
/>
<span class="pagination-info"> {{ newsCurrentPage }}/{{ totalPages }} </span>
<el-button
class="pagination-btn"
type="primary"
@click="handleNextPage"
:disabled="newsCurrentPage === totalPages"
:icon="ArrowRight"
/>
</div>
</div>
</div>
<div class="empty-section">
<div class="bottom-item">
......@@ -296,6 +315,7 @@ import {
} from "@/api/zmOverview/allDomains";
import { getUSGovernmentLatestDynamic, getDepartmentList, getSanTypeList } from "@/api/allGovernment.js";
import { ElMessage } from "element-plus";
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
const router = useRouter();
......@@ -377,6 +397,36 @@ const timelineContainerWidth = 1700;
// 美政府部门打压遏制最新动态
const newsList = ref([]);
const newsCurrentPage = ref(1);
const newsPageSize = ref(3); // 每页显示 5 条
// 总页数
const totalPages = computed(() => {
return Math.ceil(newsList.value.length / newsPageSize.value) || 1;
});
// 分页后的新闻列表
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 handlePrevPage = () => {
if (newsCurrentPage.value > 1) {
newsCurrentPage.value--;
}
};
const handleNextPage = () => {
if (newsCurrentPage.value < totalPages.value) {
newsCurrentPage.value++;
}
};
const getUSGovernmentLatestDynamicData = async () => {
try {
......@@ -1359,11 +1409,115 @@ 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;
// }
// }
// }
// }
.news-pagination {
display: flex;
justify-content: center;
align-items: center;
padding: 16px 0;
.pagination-wrapper {
display: flex;
align-items: center;
gap: 12px;
.pagination-btn {
padding: 6px;
background-color: rgba(231, 243, 255, 1);
// border: 1px solid #dcdfe6;
border: none;
border-radius: 4px;
font-size: 14px;
color: #606266;
cursor: pointer;
transition: all 0.3s;
&:hover:not(:disabled) {
background-color: #f5f7fa;
// border-color: #c0c4cc;
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: #f5f7fa;
}
}
.pagination-info {
font-size: 14px;
color: rgba(5, 95, 194, 1);
min-width: 60px;
text-align: center;
letter-spacing: 4px;
}
}
}
.tag-container {
display: flex;
align-items: center;
......@@ -1753,11 +1907,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;
......@@ -1825,7 +1980,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;
......
src/views/ZMOverView/components/fourSuppress/components/addDomain/index.vue
浏览文件 @ e811d74d
......@@ -80,7 +80,7 @@
</div>
</div>
<div class="news-content">
<div v-for="(value, idx) in paginatedNewsList" :key="idx" class="news-item">
<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)">
......@@ -109,16 +109,31 @@
</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 class="news-pagination">
<div class="pagination-wrapper">
<el-button
class="pagination-btn"
type="primary"
@click="handlePrevPage"
:disabled="newsCurrentPage === 1"
:icon="ArrowLeft"
/>
<span class="pagination-info"> {{ newsCurrentPage }}/{{ totalPages }} </span>
<el-button
class="pagination-btn"
type="primary"
@click="handleNextPage"
:disabled="newsCurrentPage === totalPages"
:icon="ArrowRight"
/>
</div>
</div> -->
<simple-pagination
v-model:current-page="newsCurrentPage"
:page-size="pageSize"
:total="newsList.length"
@page-change="handleNewsPageChange"
/>
</div>
<div class="empty-section">
<div class="bottom-item">
......@@ -306,6 +321,8 @@ import {
} from "@/api/zmOverview/allDomains";
import { getUSGovernmentLatestDynamic, getDepartmentList, getSanTypeList } from "@/api/allGovernment.js";
import { ElMessage } from "element-plus";
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import SimplePagination from "@/components/SimplePagination.vue";
const router = useRouter();
......@@ -386,27 +403,56 @@ const selectedFieldTimeline = ref("");
const timelineContainerWidth = 1700;
// 美政府部门打压遏制最新动态
const allNewsList = ref([]);
const newsList = ref([]);
const newsCurrentPage = ref(1);
const newsPageSize = ref(5); // 每页显示 5 条
const pageSize = ref(5); // 每页显示 5 条
// 总页数
const totalPages = computed(() => {
return Math.ceil(newsList.value.length / pageSize.value) || 1;
});
// 分页后的新闻列表
const paginatedNewsList = computed(() => {
const start = (newsCurrentPage.value - 1) * newsPageSize.value;
const end = start + newsPageSize.value;
const start = (newsCurrentPage.value - 1) * pageSize.value;
const end = start + pageSize.value;
return newsList.value.slice(start, end);
});
const updateNewsListByPage = () => {
const start = (newsCurrentPage.value - 1) * pageSize.value;
const end = start + pageSize.value;
newsList.value = allNewsList.value.slice(start, end);
};
const handleNewsPageChange = page => {
newsCurrentPage.value = page;
};
const handlePrevPage = () => {
if (newsCurrentPage.value > 1) {
newsCurrentPage.value--;
}
};
const handleNextPage = () => {
if (newsCurrentPage.value < totalPages.value) {
newsCurrentPage.value++;
}
};
const getUSGovernmentLatestDynamicData = async () => {
try {
const res = await getUSGovernmentLatestDynamic();
const params = {
orgId: !!deptValueForLatest.value ? deptValueForLatest.value : null,
pageSize: 50,
currentPage: newsCurrentPage.value
};
const res = await getUSGovernmentLatestDynamic(params);
if (res.code === 200 && res.data) {
// 将接口数据转换为 newsList 需要的格式
newsList.value = res.data.map(item => {
allNewsList.value = res.data.content.map(item => {
const dateObj = new Date(item.time);
const formattedDate = `${dateObj.getFullYear()}年${dateObj.getMonth() + 1}月${dateObj.getDate()}日`;
......@@ -419,6 +465,7 @@ const getUSGovernmentLatestDynamicData = async () => {
content: item.content || item.title // 如果 content 为空，使用 title 填充
};
});
updateNewsListByPage();
}
} catch (error) {
console.error("获取美政府部门打压遏制最新动态失败:", error);
......@@ -1390,60 +1437,104 @@ watch(activeDate, () => {
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;
// }
// }
// }
// }
.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;
}
}
.pagination-wrapper {
display: flex;
align-items: center;
gap: 12px;
.btn-prev,
.btn-next {
.pagination-btn {
padding: 6px;
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;
}
color: #606266;
cursor: pointer;
transition: all 0.3s;
&:hover:not(.is-disabled) {
&:hover:not(:disabled) {
background-color: #f5f7fa;
// border-color: #c0c4cc;
}
&.is-disabled {
&:disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: #f5f7fa;
}
}
.pagination-info {
font-size: 14px;
color: rgba(5, 95, 194, 1);
min-width: 60px;
text-align: center;
letter-spacing: 4px;
}
}
}
......
src/views/ZMOverView/components/fourSuppress/components/allGovernment/index.vue
浏览文件 @ e811d74d
......@@ -69,14 +69,33 @@
</div>
</div>
<div class="charts-content">
<div ref="chartRef" class="chart-container"></div>
<!-- <div ref="chartRef" class="chart-container"></div> -->
<Echarts :option="usChinaSanctionTrendOptions" height="100%"></Echarts>
</div>
</div>
<div class="main-text">
<div class="text-item">
<div class="text-item-title">
<img :src="icon2" alt="" />
<span>美政府部门打压遏制最新动态</span>
<div class="title">
<div class="text-item-title">
<img :src="icon2" alt="" />
<span>美政府部门打压遏制最新动态</span>
</div>
<div class="title-right">
<el-select
v-model="deptValueForLatest"
placeholder="全部部门"
class="custom-select"
@change="handleDeptValueChange"
>
<el-option label="全部部门" value="" />
<el-option
v-for="item in departmentList"
:key="item.departId"
:label="item.departName"
:value="item.departId"
/>
</el-select>
</div>
</div>
<div class="text-item-content">
<div v-for="(item, index) in dynamicList" :key="index" class="dynamic-item">
......@@ -105,6 +124,12 @@
</div>
</div>
</div>
<simple-pagination
v-model:current-page="newsCurrentPage"
:page-size="pageSize"
:total="allDynamicData.length"
@page-change="handleNewsPageChange"
/>
</div>
<div class="text-item">
<div class="text-item-title">
......@@ -130,7 +155,8 @@
<span class="joint-count">{{ rank.count }}次联合制裁</span>
</div>
</div>
<div class="ranking-body">
<!-- 暂时不展示 -->
<div class="ranking-body" v-if="false">
<div v-for="(item, iIndex) in rank.items" :key="iIndex" class="ranking-item">
<div class="item-left">
<span class="item-type" :class="item.type === '法案' ? 'type-bill' : 'type-order'">{{
......@@ -156,6 +182,13 @@
</div>
</div>
</div>
<simple-pagination
v-model:current-page="rankCurrentPage"
:page-size="pageSize"
:total="rankingList.length"
@page-change="handleRankPageChange"
/>
</div>
</div>
<div class="main-bottom">
......@@ -243,6 +276,8 @@
<script setup>
import { onMounted, ref, computed, inject, watch, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import Echarts from "@/components/Chart/index.vue";
import SimplePagination from "@/components/SimplePagination.vue";
import * as echarts from "echarts";
import defaultIcon from "../../assets/defaultIcon.png";
import leftBtn from "../../assets/left-btn.png";
......@@ -394,7 +429,7 @@ const getUSGovernmentJointSanctionRankData = async () => {
try {
const res = await getUSGovernmentJointSanctionRank();
if (res.code === 200 && res.data) {
rankingList.value = res.data.map(item => ({
allRankingList.value = res.data.map(item => ({
depts: (item.organizations || item.org || []).map(o => ({
name: o.orgName,
icon: o.logoUrl ? o.logoUrl.trim() : ""
......@@ -407,6 +442,8 @@ const getUSGovernmentJointSanctionRankData = async () => {
date: s.postDate ? s.postDate.replace(/^(\d{4})-(\d{2})-(\d{2})$/, "$1年$2月$3日") : ""
}))
}));
updateRankListByPage();
}
} catch (error) {
console.error("获取美政府部门联合制裁排行失败:", error);
......@@ -419,12 +456,17 @@ const getUSGovernmentJointSanctionRankData = async () => {
const loadingLatestDynamic = ref(false);
const getUSGovernmentLatestDynamicData = async () => {
loadingLatestDynamic.value = true;
const params = {
orgId: !!deptValueForLatest.value ? deptValueForLatest.value : null,
pageSize: 100,
currentPage: newsCurrentPage.value
};
try {
const res = await getUSGovernmentLatestDynamic();
const res = await getUSGovernmentLatestDynamic(params);
if (res.code === 200 && res.data) {
console.log("美政府部门打压遏制最新动态", res);
dynamicList.value = res.data.map(item => ({
allDynamicData.value = res.data.content.map(item => ({
title: item.orgName ? `${item.orgName}：${item.title}` : item.title,
date: item.time ? item.time.replace(/^(\d{4})-(\d{2})-(\d{2})$/, "$1年$2月$3日") : "",
type: item.sanTypeName || "",
......@@ -434,6 +476,8 @@ const getUSGovernmentLatestDynamicData = async () => {
orgName: item.orgName || "",
logoUrl: item.logoUrl
}));
updateDynamicListByPage();
}
} catch (error) {
console.error("获取美政府部门打压遏制最新动态失败:", error);
......@@ -441,6 +485,19 @@ const getUSGovernmentLatestDynamicData = async () => {
loadingLatestDynamic.value = false;
}
};
// 根据当前页码更新动态列表
const updateDynamicListByPage = () => {
const start = (newsCurrentPage.value - 1) * pageSize.value;
const end = start + pageSize.value;
dynamicList.value = allDynamicData.value.slice(start, end);
};
const updateRankListByPage = () => {
const start = (rankCurrentPage.value - 1) * pageSize.value;
const end = start + pageSize.value;
rankingList.value = allRankingList.value.slice(start, end);
};
// 点击科技要闻-跳转详情页
const handleNewsClick = item => {
if (!item || !item.id) return;
......@@ -470,6 +527,8 @@ const handleJointRankItemClick = item => {
// 全政府-获取美对华制裁措施数量趋势
const usChinaSanctionTrend = ref([]);
const loadingTrend = ref(false);
const usChinaSanctionTrendOptions = ref({});
const getUSChinaSanctionTrendData = async () => {
loadingTrend.value = true;
try {
......@@ -514,7 +573,8 @@ const getUSChinaSanctionTrendData = async () => {
xAxisData = Object.keys(monthlyMap).sort();
seriesData = xAxisData.map(key => monthlyMap[key]);
}
initChart(xAxisData, seriesData);
// initChart(xAxisData, seriesData);
usChinaSanctionTrendOptions.value = getChartOption(xAxisData, seriesData);
}
} catch (error) {
console.error("获取美对华制裁措施数量趋势失败:", error);
......@@ -703,6 +763,8 @@ const fieldValue = ref("");
const deptValue = ref("");
const methodValue = ref("");
const deptValueForLatest = ref("");
const measureType = ref("history");
const selectedField = ref("");
const fieldOptions = ref([
......@@ -788,7 +850,29 @@ watch(
}
);
const allDynamicData = ref([]);
const dynamicList = ref([]);
const newsCurrentPage = ref(1);
const pageSize = ref(5); // 每页显示 5 条
const handleNewsPageChange = page => {
newsCurrentPage.value = page;
updateDynamicListByPage();
// getUSGovernmentLatestDynamicData();
};
const handleDeptValueChange = dep => {
console.log("最新动态部门选择改变", dep);
deptValueForLatest.value = !!dep ? dep : null;
newsCurrentPage.value = 1;
getUSGovernmentLatestDynamicData();
};
const rankCurrentPage = ref(1);
const handleRankPageChange = page => {
rankCurrentPage.value = page;
updateRankListByPage();
};
const getColorName = tag => {
const tagColorMap = {
......@@ -845,6 +929,7 @@ const filteredTimelineList = computed(() => {
const timelineList = ref([]);
const rankingList = ref([]);
const allRankingList = ref([]);
const chartRef = ref(null);
let myChart = null;
......@@ -970,9 +1055,9 @@ const initSlider = () => {
});
};
const initChart = (xAxisData = [], seriesData = []) => {
if (!chartRef.value) return;
myChart = echarts.init(chartRef.value);
const getChartOption = (xAxisData = [], seriesData = []) => {
// if (!chartRef.value) return;
// myChart = echarts.init(chartRef.value);
const option = {
tooltip: {
trigger: "axis",
......@@ -1061,7 +1146,8 @@ const initChart = (xAxisData = [], seriesData = []) => {
}
]
};
myChart.setOption(option);
return option;
// myChart.setOption(option);
};
const activeSanctionId = ref(null);
......@@ -1091,7 +1177,7 @@ watch([() => measureType.value, () => selectedField.value], () => {
onMounted(() => {
getDepartmentListData();
handleGetSanList();
initChart();
// initChart();
initSlider();
getGovernmentList();
getUSChinaSanctionTrendData();
......@@ -1233,14 +1319,20 @@ const prev = () => {
align-items: center;
height: 30px;
.stat-label,
.stat-value {
.stat-label {
font-family: "Microsoft YaHei";
font-size: 16px;
font-weight: 400;
line-height: 30px;
color: rgba(255, 255, 255, 0.8);
}
.stat-value {
font-family: "YouSheBiaoTiHei";
font-size: 20px;
font-weight: 400;
line-height: 30px;
color: rgba(255, 255, 255, 0.8);
}
}
}
}
......@@ -1294,7 +1386,7 @@ const prev = () => {
.charts-title {
width: 100%;
height: 48px;
height: 54px;
display: flex;
justify-content: space-between;
align-items: center;
......@@ -1397,6 +1489,19 @@ const prev = () => {
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
.title {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
.title-right {
position: absolute;
right: 10px;
width: 140px;
}
}
.text-item-title {
width: 100%;
height: 48px;
......@@ -1425,9 +1530,10 @@ const prev = () => {
.text-item-content {
width: 100%;
height: 652px;
padding: 6px 27px 22px 27px;
padding: 10px 27px 14px 27px;
box-sizing: border-box;
overflow-y: auto;
margin-bottom: auto;
.dynamic-item {
width: 100%;
......@@ -1485,7 +1591,7 @@ const prev = () => {
font-family: "Microsoft YaHei";
font-size: 16px;
font-weight: 400;
line-height: 30px;
line-height: 24px;
color: rgb(95, 101, 108);
margin-top: 0; // 紧贴标题行
width: 100%;
......@@ -1560,8 +1666,9 @@ const prev = () => {
.ranking-card {
width: 100%;
border-radius: 10px;
border: 1px solid rgb(234, 236, 238);
// border-radius: 10px;
// border: 1px solid rgb(234, 236, 238);
border-bottom: 1px solid rgb(234, 236, 238);
padding: 12px 24px;
margin-bottom: 12px;
box-sizing: border-box;
......@@ -1574,7 +1681,7 @@ const prev = () => {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
// margin-bottom: 12px;
.header-left {
display: flex;
......@@ -1692,7 +1799,7 @@ const prev = () => {
}
.text-item:last-child {
padding-bottom: 22px;
// padding-bottom: 22px;
}
}
......@@ -2062,7 +2169,7 @@ const prev = () => {
}
}
}
.event-no-card{
.event-no-card {
width: 240px;
height: 130px;
}
......
src/views/ZMOverView/components/gameProfile/index.vue
浏览文件 @ e811d74d
......@@ -2,26 +2,45 @@
<template>
<div class="content-wrapper">
<div class="card-box">
<div class="card-title">
<img class="icon" src="../../assets/icons/title-icon1.png" />
<img class="text" src="../../assets/icons/title-text1.svg" />
<div class="card-header">
<div class="card-title">
<img class="icon" src="../../assets/icons/title-icon1.png" />
<img class="text" src="../../assets/icons/title-text1.svg" />
</div>
<div style="display: flex; margin-left: 50px; align-items: center">
数据来源:
<el-select
class="select-item"
size="default"
style="margin-left: 15px; width: 240px; height: 32px"
v-model="origin"
@change="handleGetCompare()"
>
<el-option :value="value.id" :label="value.name" v-for="(value, index) in originList" :key="index" />
</el-select>
</div>
</div>
<div style="display: flex; height: 650px; width: 100%;padding-top: 24px;">
<div style="display: flex; height: 650px; width: 100%; padding-top: 12px">
<div style="width: 50%">
<div style="
display: flex;
justify-content: space-between;
margin-right: 50px;
line-height: 32px;
align-items: center;
">
<div style="display: flex; margin-left: 50px">
<div class="content-chart-header">
<button-list :list="buttonList" :active-id="activeButtonId" @click="setActiveButtonId"></button-list>
<!-- <div style="display: flex; margin-left: 50px">
数据来源:
<el-select class="select-item" size="default" style="margin-left: 15px; width: 240px; height: 32px"
v-model="origin" @change="handleGetCompare()">
<el-option :value="value.id" :label="value.name" v-for="value,index in originList" :key="index" />
<el-select
class="select-item"
size="default"
style="margin-left: 15px; width: 240px; height: 32px"
v-model="origin"
@change="handleGetCompare()"
>
<el-option
:value="value.id"
:label="value.name"
v-for="(value, index) in originList"
:key="index"
/>
</el-select>
</div>
</div> -->
<div style="display: flex">
<div class="china-icon"></div>
<div class="text" style="margin-right: 18px">中国</div>
......@@ -33,25 +52,38 @@
<div style="width: 100%; height: 620px; padding-top: 24px" id="char"></div>
</div>
<div style="width: 778px; height: 620px; overflow: auto">
<el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="targetCode" border
:tree-props="{ children: 'children' }" default-expand-all :header-cell-style="{ 'border-right': 'none' }"
:cell-style="{ 'border-right': 'none' }" height="600">
<el-table
:data="tableData"
style="width: 100%; margin-bottom: 20px"
row-key="targetCode"
border
:tree-props="{ children: 'children' }"
default-expand-all
:header-cell-style="{ 'border-right': 'none' }"
:cell-style="{ 'border-right': 'none' }"
height="600"
>
<!-- 自定义展开图标 -->
<el-table-column prop="targetName" label="指标名称" width="350">
</el-table-column>
<el-table-column prop="targetName" label="指标名称" width="350"> </el-table-column>
<el-table-column prop="usScore" label="美国">
<template #default="scope">
<div style="display: flex">
<div class="progress-text" style="width:90px;">
<div class="progress-text" style="width: 90px">
<div class="rank" v-show="scope.row.usScore != 0">{{ "No." + scope.row.usRank }}</div>
<div class="score" v-show="scope.row.usScore != 0">{{ scope.row.usScore }}</div>
</div>
<div class="progress-wrapper left">
<el-progress :percentage="scope.row.usScore" :stroke-width="20" class="left-progress" :class="{
cLead: scope.row.usScore == 0,
leftProgress: scope.row.usScore != 0
}" :show-text="false" />
<el-progress
:percentage="scope.row.usScore"
:stroke-width="20"
class="left-progress"
:class="{
cLead: scope.row.usScore == 0,
leftProgress: scope.row.usScore != 0
}"
:show-text="false"
/>
</div>
</div>
</template>
......@@ -60,17 +92,29 @@
<template #default="scope">
<div style="display: flex">
<div class="progress-wrapper right" :style="{ '--i': '40px', marginRight: '20px' }">
<el-progress :percentage="scope.row.chinaScore" :stroke-width="20" class="right-progress"
:class="{ cLead: scope.row.chinaRank < scope.row.usRank && scope.row.chinaScore != 0 }"
:show-text="false" />
<el-progress
:percentage="scope.row.chinaScore"
:stroke-width="20"
class="right-progress"
:class="{
cLead: scope.row.chinaRank < scope.row.usRank && scope.row.chinaScore != 0
}"
:show-text="false"
/>
</div>
<div class="progress-text" style="color: rgba(206, 79, 81, 1);width:90px;">
<div class="rank" :class="{ cLeadRank: scope.row.chinaRank < scope.row.usRank }"
v-show="scope.row.chinaScore != 0">
<div class="progress-text" style="color: rgba(206, 79, 81, 1); width: 90px">
<div
class="rank"
:class="{ cLeadRank: scope.row.chinaRank < scope.row.usRank }"
v-show="scope.row.chinaScore != 0"
>
{{ "No." + scope.row.chinaRank }}
</div>
<div class="score" :class="{ cLeadScore: scope.row.chinaRank < scope.row.usRank }"
v-show="scope.row.chinaScore != 0">
<div
class="score"
:class="{ cLeadScore: scope.row.chinaRank < scope.row.usRank }"
v-show="scope.row.chinaScore != 0"
>
{{ scope.row.chinaScore }}
</div>
</div>
......@@ -94,8 +138,10 @@
<div class="card-item" v-for="(val, idx) in course" :key="idx">
<div class="card-item-top">{{ val.eventStrategy }}</div>
<div class="card-item-line"></div>
<div class="card-item-main"
:class="{ cnBackground: val.eventCountry === '中国', usBackground: val.eventCountry === '美国' }">
<div
class="card-item-main"
:class="{ cnBackground: val.eventCountry === '中国', usBackground: val.eventCountry === '美国' }"
>
<div class="logo">
<img :src="val.eventCountryImg" alt="" />
</div>
......@@ -125,20 +171,38 @@
</div>
</div>
</div>
<img src="@/assets/icons/card-btn-left.png" alt="" class="left-btn" @click="prev"
:class="{ disabled: currentIndex === 0 }" />
<img src="@/assets/icons/card-btn-right.png" alt="" class="right-btn" @click="next"
:class="{ disabled: currentIndex >= course.length - 5 }" />
<img
src="@/assets/icons/card-btn-left.png"
alt=""
class="left-btn"
@click="prev"
:class="{ disabled: currentIndex === 0 }"
/>
<img
src="@/assets/icons/card-btn-right.png"
alt=""
class="right-btn"
@click="next"
:class="{ disabled: currentIndex >= course.length - 5 }"
/>
</div>
</div>
<div class="btn-box">
<div v-for="(value, index) in btnList" :key="index" class="btn-item" @click="handleClickBottomBtn" :style="{
background: value.background
}">
<div
v-for="(value, index) in btnList"
:key="index"
class="btn-item"
@click="handleClickBottomBtn"
:style="{
background: value.background
}"
>
<img :src="value.img" style="width: 22px; height: 19px; margin: 0 22px" />
{{ value.text }}
<img :src="`./icon/ZM/btn-icon-arrow.png`"
style="margin-left: auto; margin-right: 22px; width: 13px; height: 12px" />
<img
:src="`./icon/ZM/btn-icon-arrow.png`"
style="margin-left: auto; margin-right: 22px; width: 13px; height: 12px"
/>
<!-- <img src="./assets/images/btn-icon-arrow.png"
style="margin-left: auto; margin-right: 22px; width: 13px; height: 12px" /> -->
......@@ -153,6 +217,7 @@ import * as echarts from "echarts";
import { ArrowRight, CaretBottom } from "@element-plus/icons-vue";
import Timeline from "./Timeline.vue";
import tableShow from "./tableShow.vue";
import ButtonList from "@/components/buttonList/buttonList.vue";
import radarChart from "./radarChart3.js";
import { getCompare, getChartDict, getTechnologyGameAnalysis } from "@/api/zmOverview/risk/index.js";
......@@ -174,6 +239,22 @@ import Img7 from "./assets/images/btn-icon-6.png";
import Img8 from "./assets/images/btn-icon-7.png";
import { ElMessage } from "element-plus";
const buttonList = ref([
{
id: 1,
text: "趋势变化",
disabled: true
},
{
id: 2,
text: "指数对比"
}
]);
const activeButtonId = ref(buttonList.value[1]?.id || 1);
const setActiveButtonId = id => {
activeButtonId.value = id;
};
const course = ref([
{
time: "2025-01-15",
......@@ -493,9 +574,15 @@ const handleClickBottomBtn = () => {
/* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 20px;
height: 54px;
}
.card-title {
width: 100%;
// width: 100%;
height: 48px;
display: flex;
......@@ -514,6 +601,14 @@ const handleClickBottomBtn = () => {
}
}
.content-chart-header {
display: flex;
justify-content: space-between;
margin: 0 50px;
// line-height: 32px;
align-items: center;
}
.card-main {
height: 650px;
position: relative;
......
src/views/ZMOverView/components/newRisk/index.vue
浏览文件 @ e811d74d
......@@ -685,7 +685,7 @@ const filteredHotNewsList = computed(() => {
const handleToRiskManage = () => {
// 这里的路由路径请根据实际情况修改
// router.push('/riskSignalManage');
const route = router.resolve("/riskSignal");
const route = router.resolve("/viewRiskSignal");
window.open(route.href, "_blank");
console.log("跳转到风险信号管理");
};
......
src/views/bill/billHome/ResourceLibrarySection.vue
浏览文件 @ e811d74d
......@@ -2,13 +2,13 @@
<div class="resource-library-section">
<div class="home-content-footer-header">
<div class="btn-box">
<div class="btn" :class="{ btnActive: activeTabName === cate.name, disabled: index > 2 }"
v-for="(cate, index) in tabList" :key="index" @click="index <= 2 && handleClickTab(cate)">
<div class="btn" :class="{ btnActive: activeTabName === cate.name, disabled: cate.active === false}"
v-for="(cate, index) in tabList" :key="index" @click="cate.active === true && handleClickTab(cate)">
{{ cate.name }}
</div>
</div>
</div>
<div class="home-content-footer-main">
<div class="home-content-footer-main" :class="{ 'committee-full-layout': activeTabName === '委员会' }">
<div class="left" v-if="['国会法案', '国会议员', '议员合作关系'].includes(activeTabName)">
<div class="select-box">
<div class="select-box-header">
......@@ -77,8 +77,8 @@
</div>
</div>
</div>
<div class="right">
<div class="right-header">
<div class="right" :class="{ 'right-full': activeTabName === '委员会' }">
<div class="right-header" v-if="activeTabName !== '委员会'">
<div class="right-header-box">
<el-select v-model="footerSelect1" placeholder="选择委员会" style="width: 240px" @change="handleFooterSelect1Change">
<el-option v-for="item in postOrgList" :key="item.departmentId" :label="item.departmentName" :value="item.departmentId" />
......@@ -177,6 +177,22 @@
<div class="member-info">关注领域：{{ item.focus || '-' }}</div>
</div>
</div>
<div v-else-if="activeTabName === '委员会'" class="committee-list">
<div class="committee-card" v-for="item in committeeList" :key="item.id">
<div class="committee-info">
<img class="committee-avatar" :src="item.avatar || defaultAvatar" alt="committee-avatar" />
<div class="committee-text">
<div class="committee-name">{{ item.name }}</div>
<div class="committee-desc">{{ item.desc }}</div>
</div>
</div>
<div class="committee-bill-grid">
<div class="committee-bill-item" v-for="(bill, idx) in item.bills" :key="`${item.id}-bill-${idx}`">
{{ bill }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
......@@ -201,9 +217,9 @@ const props = defineProps({
const tabList = ref([
{ name: "国会法案", active: true },
{ name: "国会议员", active: false },
{ name: "国会议员", active: true },
{ name: "议员合作关系", active: false },
{ name: "涉华委员会", active: false }
{ name: "委员会", active: true }
]);
const activeTabName = ref("国会法案");
const handleClickTab = tab => {
......@@ -216,6 +232,10 @@ const handleClickTab = tab => {
if (tab.name === "国会法案") {
currentPage.value = 1;
handleGetBills();
return;
}
if (tab.name === "委员会") {
handleGetCommitteeList();
}
};
......@@ -249,6 +269,30 @@ const memberTotal = ref(0);
const memberPageSize = ref(15);
const memberCurrentPage = ref(1);
const committeeList = ref([
{
id: "committee-1",
avatar: "",
name: "美中经济与安全审查委员会",
desc: "聚焦中美经贸、科技与国家安全议题，跟踪涉华政策与立法动态。",
bills: ["2025年涉华关键技术审查法案", "供应链安全与关键矿产保障法案", "对华投资限制与透明度加强法案", "联邦科研合作安全审查法案"]
},
{
id: "committee-2",
avatar: "",
name: "众议院外交事务委员会",
desc: "负责对外政策与国际关系立法，持续推进对华议题相关审议与听证。",
bills: ["印太战略资源配置法案", "对外援助合规与问责法案", "跨境数据安全与执法协作法案", "关键基础设施网络韧性法案"]
},
{
id: "committee-3",
avatar: "",
name: "参议院军事委员会",
desc: "围绕国防授权、军费及安全合作展开审查，关注涉华国防与技术议题。",
bills: ["国防授权法涉华条款（示例）", "先进半导体供应安全法案", "军民两用技术出口管制法案", "海外关键设施安全评估法案"]
}
]);
const bills = ref([]);
const total = ref(0);
const pageSize = ref(4);
......@@ -263,6 +307,20 @@ const getRiskTagClass = riskSignal => {
return "";
};
// 获取委员会列表（占位）
const handleGetCommitteeList = async () => {
loading.value = true;
try {
// TODO: 接入委员会列表接口后，在此替换为真实请求并赋值 committeeList
// const res = await getCommitteeList(params);
// committeeList.value = res?.data?.content || [];
} catch (error) {
committeeList.value = [];
} finally {
loading.value = false;
}
};
const handleGetHylyList = async () => {
try {
const res = await getHylyList();
......@@ -551,6 +609,17 @@ onMounted(() => {
justify-content: space-between;
align-items: flex-start;
&.committee-full-layout {
.right {
margin-left: 0;
width: 1600px;
.right-main {
height: auto;
}
}
}
.left {
width: 300px;
padding-bottom: 33px;
......@@ -662,6 +731,14 @@ onMounted(() => {
.right-main {
height: 1264px;
.member-grid,
.coop-list,
.committee-list {
display: grid;
column-gap: 16px;
row-gap: 16px;
}
.member-grid,
.coop-list {
display: grid;
......@@ -834,6 +911,72 @@ onMounted(() => {
grid-template-columns: 1fr;
}
.committee-list {
grid-template-columns: 1fr;
.committee-card {
padding: 20px 24px;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: #fff;
}
.committee-info {
display: flex;
gap: 16px;
align-items: flex-start;
padding-bottom: 16px;
border-bottom: 1px solid #eaeced;
}
.committee-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.committee-name {
color: #3b414b;
font-family: "Microsoft YaHei";
font-size: 20px;
font-weight: 700;
line-height: 28px;
}
.committee-desc {
margin-top: 8px;
color: #5f656c;
font-family: "Microsoft YaHei";
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.committee-bill-grid {
margin-top: 16px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.committee-bill-item {
height: 48px;
padding: 0 14px;
border-radius: 6px;
background: #f5f8fc;
color: #3b414b;
font-family: "Microsoft YaHei";
font-size: 15px;
font-weight: 400;
line-height: 48px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.right-main-box {
position: relative;
width: 1280px;
......
src/views/bill/billHome/utils/worldCloudChart.js
浏览文件 @ e811d74d
import "echarts-wordcloud";
const getWordCloudChart = (data) => {
const getWordCloudChart = (data = []) => {
const option = {
grid: {
left: 0,
......
src/views/bill/introdoction/SBillProgressTimeline.vue 0 → 100644
浏览文件 @ e811d74d
<template>
<div class="container">
<div class="svg-timeline">
<svg :viewBox="`0 0 ${svgWidth} ${svgHeight}`" width="100%" height="100%">
<line
v-if="nodes.length > 0"
:x1="nodes[0].x - 100"
:y1="nodes[0].y"
:x2="nodes[0].x"
:y2="nodes[0].y"
stroke="#e8f2ff"
stroke-width="2"
marker-end="url(#arrow)"
/>
<path :d="arcPaths" fill="none" stroke="#e8f2ff" stroke-width="2" marker-end="url(#arrow)" />
<circle
v-for="(node, idx) in nodes"
:key="'circle' + idx"
:cx="node.x"
:cy="node.y"
r="4"
fill="#fff"
stroke="#1677ff"
stroke-width="3"
/>
<line
v-for="(node, idx) in nodes"
:key="'line' + idx"
:x1="node.x"
:y1="node.y + 4"
:x2="node.x"
:y2="node.y + verticalLineLength"
stroke="#1677ff"
:stroke-width="verticalLineWidth"
/>
<foreignObject
v-for="(node, idx) in nodes"
:key="'fo-' + idx"
:x="node.x + 15"
:y="node.y + 5"
:width="nodeGapX - 30"
height="100"
style="overflow: visible;"
>
<div class="node-content" xmlns="http://www.w3.org/1999/xhtml">
<div class="date">{{ node.formattedDate }}</div>
<el-tooltip
effect="dark"
:content="node.actionTitle"
popper-class="common-prompt-popper"
placement="top"
:show-after="500"
>
<div class="title">{{ node.actionTitle }}</div>
</el-tooltip>
<div class="votes" v-if="node.voteString">{{ node.voteString }}</div>
</div>
</foreignObject>
<text
v-if="startMonth && nodes.length > 0"
:x="nodes[0].x - 110"
:y="nodes[0].y + 5"
text-anchor="end"
fill="rgb(5, 95, 194)"
font-size="16"
font-weight="700"
>
{{ startMonth }}
</text>
<line
v-if="nodes.length > 0"
:x1="nodes[nodes.length - 1].x"
:y1="nodes[nodes.length - 1].y"
:x2="nodes[nodes.length - 1].row % 2 === 0 ? nodes[nodes.length - 1].x + 100 : nodes[nodes.length - 1].x - 100"
:y2="nodes[nodes.length - 1].y"
stroke="#e8f2ff"
stroke-width="2"
marker-end="url(#arrow)"
/>
<text
v-if="endMonth && nodes.length > 0"
:x="nodes[nodes.length - 1].row % 2 === 0 ? nodes[nodes.length - 1].x + 110 : nodes[nodes.length - 1].x - 110"
:y="nodes[nodes.length - 1].y + 5"
:text-anchor="nodes[nodes.length - 1].row % 2 === 0 ? 'start' : 'end'"
fill="rgb(5, 95, 194)"
font-size="16"
font-weight="700"
>
{{ endMonth }}
</text>
</svg>
</div>
</div>
</template>
<script>
export default {
name: "SBillProgressTimeline",
props: ["dataList"],
data() {
return {
maxPerRow: 5,
nodeGapX: 200,
nodeGapY: 180,
leftMargin: 150,
verticalLineLength: 80,
verticalLineWidth: 1
};
},
computed: {
startMonth() {
if (this.sortedDataList.length === 0) return '';
const date = new Date(this.sortedDataList[0].actionDate);
return `${date.getFullYear()}年${date.getMonth() + 1}月`;
},
endMonth() {
if (this.sortedDataList.length === 0) return '';
const date = new Date(this.sortedDataList[this.sortedDataList.length - 1].actionDate);
return `${date.getFullYear()}年${date.getMonth() + 1}月`;
},
sortedDataList() {
if (!this.dataList || !Array.isArray(this.dataList)) return [];
return [...this.dataList]
.filter(item => item && item.actionDate)
.sort((a, b) => new Date(a.actionDate) - new Date(b.actionDate));
},
nodes() {
return this.sortedDataList.map((item, idx) => {
const row = Math.floor(idx / this.maxPerRow);
const col = idx % this.maxPerRow;
let x, y;
if (row % 2 === 0) {
x = this.leftMargin + col * this.nodeGapX + 50;
} else {
x = this.leftMargin + (this.maxPerRow - 1 - col) * this.nodeGapX + 50;
}
y = 60 + row * this.nodeGapY;
let formattedDate = "";
if (item.actionDate) {
const dateObj = new Date(item.actionDate);
if (!isNaN(dateObj.getTime())) {
formattedDate = `${dateObj.getMonth() + 1}月${dateObj.getDate()}日`;
}
}
let voteString = "";
if (item.agreeVote !== null && item.agreeVote !== undefined && item.disagreeVote !== null && item.disagreeVote !== undefined) {
voteString = `${item.agreeVote}票赞成 : ${item.disagreeVote}票反对`;
}
return { ...item, x, y, row, formattedDate, voteString };
});
},
arcPaths() {
if (this.nodes.length < 2) return "";
let path = `M ${this.nodes[0].x} ${this.nodes[0].y}`;
for (let i = 1; i < this.nodes.length; i++) {
const prev = this.nodes[i - 1];
const curr = this.nodes[i];
const isTurnPoint = i % this.maxPerRow === 0;
if (isTurnPoint) {
const radius = 10 / 2;
if (prev.row % 2 === 0) {
path += ` L ${prev.x + radius} ${prev.y} A ${radius} ${radius} 0 0 1 ${curr.x - radius} ${curr.y} L ${curr.x} ${curr.y}`;
} else {
path += ` L ${prev.x - radius} ${prev.y} A ${radius} ${radius} 0 0 0 ${curr.x + radius} ${curr.y} L ${curr.x} ${curr.y}`;
}
} else {
path += ` L ${curr.x} ${curr.y}`;
}
}
return path;
},
svgWidth() {
return this.leftMargin + this.maxPerRow * this.nodeGapX + 50;
},
svgHeight() {
const listLength = (this.dataList && Array.isArray(this.dataList)) ? this.dataList.length : 0;
return Math.ceil(listLength / this.maxPerRow) * this.nodeGapY + 40;
}
}
};
</script>
<style lang="scss" scoped>
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.svg-timeline {
width: 100%;
.node-content {
font-family: Microsoft YaHei, sans-serif;
text-align: left;
padding-left: 4px;
.date {
color: rgb(5, 95, 194);
font-weight: 700;
font-size: 16px;
line-height: 22px;
margin-bottom: 0px;
margin-top: 6px;
}
.title {
color: rgb(59, 65, 75);
font-weight: 700;
font-size: 16px;
line-height: 22px;
margin-bottom: 0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
display: block;
}
.votes {
color: rgb(95, 101, 108);
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
}
}
</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;
max-width: 600px;
}
.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/bill/introdoction/STimeline.vue
浏览文件 @ e811d74d
<template>
<div class="container">
<div class="svg-timeline">
<svg :viewBox="`0 0 ${svgWidth} ${svgHeight}`" width="100%" height="100%">
<!-- <line
:x1="lines[0].x1 - 100"
:y1="lines[0].y1"
:x2="lines[0].x1"
:y2="lines[0].y1"
stroke="#e8f2ff"
stroke-width="2"
marker-end="url(#arrow)"
/> -->
<!-- <line
v-for="(line, idx) in lines"
:key="'line' + idx"
:x1="line.x1"
:y1="line.y1"
:x2="line.x2"
:y2="line.y2"
stroke="#e8f2ff"
stroke-width="2"
marker-end="url(#arrow)"
/> -->
<!-- <path
v-for="(arc, idx) in arcPaths"
:key="'arc' + idx"
:d="arc.d"
fill="none"
stroke="red"
stroke-width="2"
/> -->
<line
v-if="nodes.length > 0"
:x1="nodes[0].x - 100"
:y1="nodes[0].y"
:x2="nodes[0].x"
:y2="nodes[0].y"
stroke="#e8f2ff"
stroke-width="2"
marker-end="url(#arrow)"
/>
<path :d="arcPaths" fill="none" stroke="#e8f2ff" stroke-width="2" marker-end="url(#arrow)" />
<!-- <defs>
<marker
id="arrow"
markerWidth="6"
markerHeight="6"
refX="6"
refY="3"
orient="auto"
markerUnits="strokeWidth"
>
<path d="M0,0 L6,3 L0,6" fill="#333" />
</marker>
</defs> -->
<!-- 节点 -->
<circle
v-for="(node, idx) in nodes"
:key="'circle' + idx"
:cx="node.x"
:cy="node.y"
r="4"
fill="#fff"
stroke="#1677ff"
stroke-width="3"
/>
<line
v-for="(node, idx) in nodes"
:key="'line' + idx"
:x1="node.x"
:y1="node.y + 4"
:x2="node.x"
:y2="node.y + verticalLineLength"
stroke="#1677ff"
:stroke-width="verticalLineWidth"
/>
<foreignObject
v-for="(node, idx) in nodes"
:key="'fo-' + idx"
:x="node.x + 15"
:y="node.y + 5"
:width="nodeGapX - 30"
height="100"
style="overflow: visible;"
>
<div class="node-content" xmlns="http://www.w3.org/1999/xhtml">
<div class="date">{{ node.formattedDate }}</div>
<el-tooltip
effect="dark"
:content="node.actionTitle"
popper-class="common-prompt-popper"
placement="top"
:show-after="500"
>
<div class="title">{{ node.actionTitle }}</div>
</el-tooltip>
<div class="votes" v-if="node.voteString">{{ node.voteString }}</div>
<div class="bill-progress-list">
<div class="list-wrapper">
<div class="list-item" v-for="(item, index) in displayList" :key="`${item.actionDate}-${index}`">
<div class="item-main">
<div class="left">
<div class="dot"></div>
<div class="item-date">{{ item.formattedDate }}</div>
</div>
<el-tooltip
effect="dark"
:content="item.actionTitle"
popper-class="common-prompt-popper"
placement="top"
:show-after="500"
>
<div class="item-title">{{ item.actionTitle }}</div>
</el-tooltip>
<div class="right">
<div class="risk-tag" :class="item.riskClass">• {{ item.riskText }}</div>
<div class="arrow">></div>
</div>
</foreignObject>
<text
v-if="startMonth && nodes.length > 0"
:x="nodes[0].x - 110"
:y="nodes[0].y + 5"
text-anchor="end"
fill="rgb(5, 95, 194)"
font-size="16"
font-weight="700"
>
{{ startMonth }}
</text>
</div>
</div>
<line
v-if="nodes.length > 0"
:x1="nodes[nodes.length - 1].x"
:y1="nodes[nodes.length - 1].y"
:x2="nodes[nodes.length - 1].row % 2 === 0 ? nodes[nodes.length - 1].x + 100 : nodes[nodes.length - 1].x - 100"
:y2="nodes[nodes.length - 1].y"
stroke="#e8f2ff"
stroke-width="2"
marker-end="url(#arrow)"
/>
<text
v-if="endMonth && nodes.length > 0"
:x="nodes[nodes.length - 1].row % 2 === 0 ? nodes[nodes.length - 1].x + 110 : nodes[nodes.length - 1].x - 110"
:y="nodes[nodes.length - 1].y + 5"
:text-anchor="nodes[nodes.length - 1].row % 2 === 0 ? 'start' : 'end'"
fill="rgb(5, 95, 194)"
font-size="16"
font-weight="700"
>
{{ endMonth }}
</text>
</svg>
<div class="empty" v-if="displayList.length === 0">暂无进展数据</div>
</div>
<div class="more" v-if="hasMore">查看更多<img :src="arrowDown"/></div>
</div>
</template>
<script>
import arrowDown from './assets/icons/arrow-down.svg';
const RISK_LEVELS = ["特别重大风险", "重大风险", "较大风险", "一般风险", "低风险"];
const RISK_CLASS_MAP = {
"特别重大风险": "risk-critical",
"重大风险": "risk-high",
"较大风险": "risk-medium",
"一般风险": "risk-normal",
"低风险": "risk-low"
};
export default {
props: ["dataList"],
name: "SBillProgressList",
data() {
return {
// dataList: [
// { actionDate: "2025-07-08 14:20", actionTitle: "起飞", dyms: '16票赞成 : 21票反对​ ' },
// { actionDate: "2025-07-08 14:22", actionTitle: "转弯" },
// { actionDate: "2025-07-08 14:25", actionTitle: "发现问题",dyms: '16票赞成 : 21票反对​ ' },
// { actionDate: "2025-07-08 14:27", actionTitle: "飞行",dyms: '16票赞成 : 21票反对​ ' },
// { actionDate: "2025-07-08 14:33", actionTitle: "转弯" },
// { actionDate: "2025-07-08 14:35", actionTitle: "飞行" },
// ],
maxPerRow: 5,
nodeGapX: 200,
nodeGapY: 180,
leftMargin: 150,
verticalLineLength: 80,
verticalLineWidth: 1
arrowDown
};
},
computed: {
startMonth() {
if (this.sortedDataList.length === 0) return '';
const date = new Date(this.sortedDataList[0].actionDate);
return `${date.getFullYear()}年${date.getMonth() + 1}月`;
props: {
dataList: {
type: Array,
default: () => []
},
endMonth() {
if (this.sortedDataList.length === 0) return '';
const date = new Date(this.sortedDataList[this.sortedDataList.length - 1].actionDate);
return `${date.getFullYear()}年${date.getMonth() + 1}月`;
mode: {
type: String,
default: "latest"
},
maxCount: {
type: Number,
default: 5
}
},
computed: {
sortedDataList() {
if (!this.dataList || !Array.isArray(this.dataList)) return [];
// Clone and sort by date ascending (Old -> New)
if (!Array.isArray(this.dataList)) return [];
return [...this.dataList]
.filter(item => item && item.actionDate)
.sort((a, b) => new Date(a.actionDate) - new Date(b.actionDate));
.sort((a, b) => new Date(b.actionDate) - new Date(a.actionDate));
},
nodes() {
// 计算每个节点的坐标（蛇形）
return this.sortedDataList.map((item, idx) => {
const row = Math.floor(idx / this.maxPerRow);
const col = idx % this.maxPerRow;
let x, y;
if (row % 2 === 0) {
x = this.leftMargin + col * this.nodeGapX + 50;
} else {
x = this.leftMargin + (this.maxPerRow - 1 - col) * this.nodeGapX + 50;
}
// 节点纵坐标起始值
y = 60 + row * this.nodeGapY;
// Format Date: 2025-07-04 -> 7月4日
hasMore() {
return this.sortedDataList.length > this.maxCount;
},
displayList() {
const list = this.mode === "early" ? [...this.sortedDataList].reverse() : this.sortedDataList;
return list.slice(0, this.maxCount).map((item, index) => {
let formattedDate = "";
if (item.actionDate) {
const dateObj = new Date(item.actionDate);
if (!isNaN(dateObj.getTime())) {
formattedDate = `${dateObj.getMonth() + 1}月${dateObj.getDate()}日`;
}
const dateObj = new Date(item.actionDate);
if (!isNaN(dateObj.getTime())) {
formattedDate = `${dateObj.getMonth() + 1}月${dateObj.getDate()}日`;
}
// Format Votes
let voteString = "";
if (item.agreeVote !== null && item.agreeVote !== undefined && item.disagreeVote !== null && item.disagreeVote !== undefined) {
voteString = `${item.agreeVote}票赞成 : ${item.disagreeVote}票反对`;
}
const riskText = RISK_LEVELS[Math.min(index, RISK_LEVELS.length - 1)];
const riskClass = RISK_CLASS_MAP[riskText] || "risk-low";
return { ...item, x, y, row, formattedDate, voteString };
return {
...item,
formattedDate,
riskText,
riskClass
};
});
},
lines() {
const arr = [];
const gap = 0; // 间隔长度
for (let i = 0; i < this.nodes.length - 1; i++) {
const x1 = this.nodes[i].x;
const y1 = this.nodes[i].y;
const x2 = this.nodes[i + 1].x;
const y2 = this.nodes[i + 1].y;
const dx = x2 - x1;
const dy = y2 - y1;
const len = Math.sqrt(dx * dx + dy * dy);
// 计算起点和终点都缩进 gap
const ratioStart = gap / len;
const ratioEnd = (len - gap) / len;
const sx = x1 + dx * ratioStart;
const sy = y1 + dy * ratioStart;
const tx = x1 + dx * ratioEnd;
const ty = y1 + dy * ratioEnd;
arr.push({
x1: sx,
y1: sy,
x2: tx,
y2: ty
});
}
return arr;
},
arcPaths() {
if (this.nodes.length < 2) return "";
let path = `M ${this.nodes[0].x} ${this.nodes[0].y}`;
for (let i = 1; i < this.nodes.length; i++) {
const prev = this.nodes[i - 1];
const curr = this.nodes[i];
// 判断是否是行尾转折点
const isTurnPoint = i % this.maxPerRow === 0;
if (isTurnPoint) {
// 计算半圆路径
const radius = 10 / 2;
if (prev.row % 2 === 0) {
// 偶数行向右凸半圆
path += `
L ${prev.x + radius} ${prev.y}
A ${radius} ${radius} 0 0 1 ${curr.x - radius} ${curr.y}
L ${curr.x} ${curr.y}`;
} else {
// 奇数行向左凸半圆
path += `
L ${prev.x - radius} ${prev.y}
A ${radius} ${radius} 0 0 0 ${curr.x + radius} ${curr.y}
L ${curr.x} ${curr.y}`;
}
} else {
// 同行节点间用直线连接
path += ` L ${curr.x} ${curr.y}`;
}
}
return path;
},
svgWidth() {
return this.leftMargin + this.maxPerRow * this.nodeGapX + 50;
},
svgHeight() {
// SVG高度
const listLength = (this.dataList && Array.isArray(this.dataList)) ? this.dataList.length : 0;
return Math.ceil(listLength / this.maxPerRow) * this.nodeGapY + 40;
}
}
};
</script>
<style lang="scss" scoped>
.container {
.bill-progress-list {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.svg-timeline {
width: 100%;
// background-size: 100% 100%;
// position: relative;
// .title {
// position: absolute;
// top: 0;
// left: 32px;
// width: 100%;
// height: 100%;
// font-family: YouSheBiaoTiHei;
// font-size: 16px;
// color: #ffffff;
// line-height: 24px;
// background: linear-gradient(90deg, #ffffff 0%, #79c2ff 100%);
// -webkit-background-clip: text;
// -webkit-text-fill-color: transparent;
// display: flex;
// align-items: center;
// height: 40px;
// img {
// width: 12px;
// height: 24px;
// }
// }
.node-content {
font-family: Microsoft YaHei, sans-serif;
text-align: left;
padding-left: 4px;
padding: 2px 0 0;
box-sizing: border-box;
.list-wrapper {
height: 100%;
overflow: hidden;
padding-right: 2px;
position: relative;
padding-bottom: 48px;
}
.date {
color: rgb(5, 95, 194);
font-weight: 700;
font-size: 16px;
line-height: 22px;
margin-bottom: 0px;
margin-top: 6px;
.list-item {
height: 58px;
box-sizing: border-box;
}
.item-main {
height: 100%;
display: flex;
align-items: center;
gap: 20px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
}
.left {
display: flex;
align-items: center;
width: 110px;
flex-shrink: 0;
.dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #ff4d4f;
margin-right: 12px;
}
.title {
color: rgb(59, 65, 75);
font-weight: 700;
.item-date {
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 22px;
margin-bottom: 0px;
white-space: nowrap; /* Keep text on one line */
overflow: hidden; /* Hide overflow */
text-overflow: ellipsis; /* Show ... for overflow */
width: 100%; /* Ensure it takes full width of container */
display: block; /* Block level for ellipsis to work */
color: #3b414b;
white-space: nowrap;
}
}
.votes {
color: rgb(95, 101, 108);
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
.item-title {
flex: 1;
min-width: 0;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
color: #3b414b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
</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;
max-width: 600px;
}
.right {
display: flex;
align-items: center;
gap: 16px;
margin-left: auto;
padding-right: 6px;
flex-shrink: 0;
}
.risk-tag {
height: 32px;
padding: 0 14px;
border-radius: 16px;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 32px;
white-space: nowrap;
}
.risk-critical {
color: #ff4d4f;
background: #fff1f0;
}
.risk-high {
color: #fa8c16;
background: #fff7e6;
}
.risk-medium {
color: #d4b106;
background: #fffbe6;
}
.risk-normal {
color: #389e0d;
background: #f6ffed;
}
.common-prompt-popper.el-popper .el-popper__arrow::before {
background-color: rgb(59, 65, 75) !important;
border-color: rgb(59, 65, 75) !important;
.risk-low {
color: #1677ff;
background: #e6f4ff;
}
.arrow {
font-size: 16px;
color: #8c8c8c;
line-height: 1;
}
.more {
display: flex;
gap: 5px;
position: absolute;
left: 50%;
bottom: 23px;
transform: translateX(-50%);
font-family: Microsoft YaHei;
font-size: 14px;
line-height: 22px;
color: #1677ff;
cursor: pointer;
}
.empty {
font-family: Microsoft YaHei;
font-size: 16px;
line-height: 24px;
color: rgba(95, 101, 108, 1);
text-align: center;
padding-top: 40px;
}
}
</style>
\ No newline at end of file
</style>
src/views/bill/introdoction/assets/icons/arrow-down.svg 0 → 100644
浏览文件 @ e811d74d
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none" customFrame="#000000">
<rect id="Icon图标/Line/double right" width="16.000000" height="16.000000" x="0.000000" y="0.000000" transform="matrix(0,1,-1,0,16,0)" />
<path id="形状" d="M5.519 5.19219L1.52994 0.0953125C1.48307 0.034375 1.40963 0 1.33307 0L0.125253 0C0.0205652 0 -0.0372473 0.120312 0.0268152 0.201562L4.17369 5.5L0.0268152 10.7984C-0.0372473 10.8797 0.0205652 11 0.125253 11L1.33307 11C1.40963 11 1.48307 10.9641 1.52994 10.9047L5.519 5.80937C5.66119 5.62656 5.66119 5.37344 5.519 5.19219ZM6.27994 0.0953125L10.269 5.19219C10.4112 5.37344 10.4112 5.62656 10.269 5.80937L6.27994 10.9047C6.23306 10.9641 6.15963 11 6.08307 11L4.87525 11C4.77056 11 4.71275 10.8797 4.77681 10.7984L8.92369 5.5L4.77681 0.201562C4.71275 0.120312 4.77056 0 4.87525 0L6.08307 0C6.15963 0 6.23306 0.034375 6.27994 0.0953125Z" fill="rgb(5,95,194)" fill-rule="evenodd" transform="matrix(0,1,-1,0,13.5,3.8125)" />
</svg>
src/views/bill/introdoction/index.vue
浏览文件 @ e811d74d
......@@ -89,7 +89,7 @@
<div class="item-left">相关领域：</div>
<div class="item-right1">
<!-- <div class="right1-item" v-for="item in basicInfo.hylyList" :key="item">{{ item }}</div> -->
<AreaTag v-for="item, index in basicInfo.hylyList" :key="index" :tagName="item"></AreaTag>
<AreaTag v-for="item, index in basicInfo.hylyList" :key="index" :tagName="item"/>
</div>
</div>
<div class="box1-right-item">
......@@ -144,9 +144,19 @@
</div>
</div> -->
<AnalysisBox title="法案进展" :showAllBtn="false">
<template #header-btn>
<div class="progress-header-btns">
<div class="btn" :class="{ btnActive: progressMode === 'latest' }" @click="handleSwitchProgressMode('latest')">
最新进展
</div>
<div class="btn" :class="{ btnActive: progressMode === 'early' }" @click="handleSwitchProgressMode('early')">
前期进程
</div>
</div>
</template>
<div class="box2-main">
<div class="box2-main-center">
<STimeline :dataList="timelineData" />
<STimeline :dataList="timelineData" :mode="progressMode" :maxCount="5" />
</div>
</div>
</AnalysisBox>
......@@ -261,7 +271,7 @@
</div>
<div class="info-box">
<div class="info-left">
<img :src="defaultAvatar" alt="" @click="handleClickAvatar(curPerson)" />
<img class="person-avatar" :src="curPerson.imageUrl || defaultAvatar" alt="" @click="handleClickAvatar(curPerson)" />
<div class="usr-icon1">
<img src="./assets/images/usr-icon1.png" alt="" />
</div>
......@@ -292,13 +302,8 @@
</div>
<div class="right-main-box2" v-if="curPerson.tagList && curPerson.tagList.length">
<!-- <WordCloudMap :data="wordCloudData" :shape="circle" /> -->
<div class="tag-box" :class="{
status0: index % 4 === 0,
status1: index % 4 === 1,
status2: index % 4 === 2,
status3: index % 4 === 3
}" v-for="(tag, index) in curPerson.tagList" :key="index">
{{ tag.industryName }}
<div class="tag-box status"v-for="(tag, index) in curPerson.tagList" :key="index">
{{ tag }}
</div>
</div>
<div class="right-main-box3">
......@@ -329,88 +334,10 @@
</el-timeline-item> -->
</el-timeline>
</div>
<div class="right-main-box3-footer">
<div class="btn-more" @click="handleClickMore2">
<img src="../assets/images/btn-more.png" alt="" />
</div>
</div>
</div>
</div>
</AnalysisBox>
</div>
<el-dialog v-model="isShowDialog" class="dialog-box" width="1280">
<div class="dialog-inner-box">
<div class="inner-left">
<div class="info-box">
<div class="info-top">
<img :src="defaultAvatar" alt="" />
<div class="usr-icon1">
<img src="./assets/images/usr-icon1.png" alt="" />
</div>
<div class="usr-icon2">
<img src="./assets/images/usr-icon2.png" alt="" />
</div>
</div>
<div class="info-footer">
<div class="info-right-title">{{ curPerson.name }}</div>
<div class="info-right-item">
<div class="item-left">英文名:</div>
<div class="item-right">{{ curPerson.ename }}</div>
</div>
<div class="info-right-item">
<div class="item-left">党派:</div>
<div class="item-right">{{ curPerson.dp }}</div>
</div>
<div class="info-right-item">
<div class="item-left">选区:</div>
<div class="item-right">{{ curPerson.xq }}</div>
</div>
<div class="info-right-item">
<div class="item-left">职位:</div>
<div class="item-right">{{ curPerson.zw }}</div>
</div>
</div>
</div>
<div class="tag-wrapper" v-if="curPerson.tagList && curPerson.tagList.length">
<div class="tag-box" :class="{
status0: index % 4 === 0,
status1: index % 4 === 1,
status2: index % 4 === 2,
status3: index % 4 === 3
}" v-for="(tag, index) in curPerson.tagList" :key="index">
{{ tag.industryName }}
</div>
</div>
<div class="more">更多议员 ></div>
</div>
<div class="inner-right">
<div class="btn-box">
<div class="btn" :class="{ btnActive: dialogBoxBtnActive === 0 }" @click="handleClcikDialogBoxBtn(0)">
新闻动态
</div>
<div class="btn" :class="{ btnActive: dialogBoxBtnActive === 1 }" @click="handleClcikDialogBoxBtn(1)">
人物履历
</div>
</div>
<div class="inner-right-main">
<el-timeline style="max-width: 840px">
<el-timeline-item :timestamp="item.newsDate" placement="top" v-for="(item, index) in curPerson.newsList"
:key="index">
<div class="timeline-content1">
<div class="text">
{{ item.newsContent }}
</div>
<div class="pic">
<img :src="defaultNew" alt="" />
</div>
</div>
</el-timeline-item>
</el-timeline>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
......@@ -446,11 +373,10 @@ const handleClcikDialogBoxBtn = index => {
};
const timelineData = ref([]);
const progressMode = ref("latest");
const isShowDialog = ref(false);
const handleClickMore2 = () => {
isShowDialog.value = true;
const handleSwitchProgressMode = mode => {
progressMode.value = mode;
};
// 获取基本信息
......@@ -529,6 +455,32 @@ onMounted(() => {
height: 880px;
display: flex;
.progress-header-btns {
display: flex;
gap: 8px;
.btn {
height: 28px;
padding: 0 12px;
box-sizing: border-box;
border: 1px solid var(--btn-plain-border-color);
border-radius: 4px;
background: var(--btn-plain-bg-color);
color: var(--btn-plain-text-color);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 26px;
cursor: pointer;
}
.btnActive {
border: 1px solid var(--btn-active-border-color);
background: var(--btn-active-bg-color);
color: var(--btn-active-text-color);
}
}
.box-header {
height: 56px;
display: flex;
......@@ -913,17 +865,6 @@ onMounted(() => {
left: 50%;
transform: translateX(-50%);
z-index: 99;
.btn-more {
width: 108px;
height: 32px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
}
}
......@@ -1007,6 +948,13 @@ onMounted(() => {
.info-left {
cursor: pointer;
.person-avatar {
width: 128px;
height: 128px;
border-radius: 50%;
object-fit: cover;
}
img {
width: 128px;
height: 128px;
......@@ -1117,28 +1065,10 @@ onMounted(() => {
display: inline-block;
}
.status0 {
border: 1px solid rgba(217, 247, 190, 1);
color: rgba(82, 196, 26, 1);
background: rgba(246, 255, 237, 1);
}
.status1 {
border: 1px solid rgba(186, 224, 255, 1);
color: rgba(22, 119, 255, 1);
background: rgba(230, 244, 255, 1);
}
.status2 {
border: 1px solid rgba(255, 241, 184, 1);
color: rgba(250, 173, 20, 1);
background: rgba(255, 251, 230, 1);
}
.status3 {
border: 1px solid rgba(255, 204, 199, 1);
color: rgba(255, 77, 79, 1);
background: rgba(255, 241, 240, 1);
.status {
// border: 1px solid rgba(217, 247, 190, 1);
color: rgb(5, 95, 194);
background: rgb(231, 243, 255);
}
}
......@@ -1156,37 +1086,19 @@ onMounted(() => {
.title {
margin-left: 12px;
height: 22px;
color: rgba(95, 101, 108, 1);
height: 24px;
color: rgb(59, 65, 75);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 600;
line-height: 22px;
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
}
.right-main-box3-main {
margin-top: 18px;
height: 412px;
overflow-y: auto;
}
.right-main-box3-footer {
margin-top: 1px;
display: flex;
justify-content: center;
.btn-more {
width: 108px;
height: 32px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
}
}
}
......
src/views/companyPages2/component/capitalScale.vue 0 → 100644
浏览文件 @ e811d74d
<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
浏览文件 @ e811d74d
<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
浏览文件 @ e811d74d
<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
浏览文件 @ e811d74d
<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
浏览文件 @ e811d74d
<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
浏览文件 @ e811d74d
<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/gjOverView/index.vue
浏览文件 @ e811d74d
......@@ -222,7 +222,7 @@ const warningList = ref([
// 查看更多风险信号
const handleToMoreRiskSignal = () => {
const route = router.resolve("/riskSignal");
const route = router.resolve("/viewRiskSignal");
window.open(route.href, "_blank");
};
</script>
......
src/views/innovationSubject/index.vue
浏览文件 @ e811d74d
......@@ -541,7 +541,7 @@ const handleClickToDetail = university => {
// 查看更多风险信号
const handleToMoreRiskSignal = () => {
const route = router.resolve("/riskSignal");
const route = router.resolve("/viewRiskSignal");
window.open(route.href, "_blank");
};
......
src/views/marketAccessRestrictions/marketAccessHome/index.vue
浏览文件 @ e811d74d
......@@ -1421,7 +1421,7 @@ const handleClickToSurveyDetail = id => {
// 查看更多风险信号
const handleToMoreRiskSignal = () => {
const route = router.resolve("/riskSignal");
const route = router.resolve("/viewRiskSignal");
window.open(route.href, "_blank");
};
......
src/views/overView/index.vue
浏览文件 @ e811d74d
......@@ -225,7 +225,7 @@ const handleToSearch = () => {
// 查看更多风险信号
const handleToMoreRiskSignal = () => {
const route = router.resolve("/riskSignal");
const route = router.resolve("/viewRiskSignal");
window.open(route.href, "_blank");
};
......
src/views/ruleRestriction/components/dataNew/index.vue
浏览文件 @ e811d74d
......@@ -196,7 +196,7 @@ const handleToRiskDetail = (item) => {
// 查看更多动态
const handleToMoreRiskSignal = () => {
const route = router.resolve("/riskSignal");
const route = router.resolve("/viewRiskSignal");
window.open(route.href, "_blank");
};
......
src/views/scientificFunding/components/dataNew/index.vue
浏览文件 @ e811d74d
......@@ -150,7 +150,7 @@ const handleGetRiskSignal = async () => {
// 查看更多风险信号
const handleToMoreRiskSignal = () => {
const route = router.resolve("/riskSignal");
const route = router.resolve("/viewRiskSignal");
window.open(route.href, "_blank");
};
const box1Data = ref([])
......
src/views/technologyFigures/index.vue
浏览文件 @ e811d74d
......@@ -839,7 +839,7 @@ const handleClickCate = cate => {
// 查看更多风险信号
const handleToMoreRiskSignal = () => {
const route = router.resolve("/riskSignal");
const route = router.resolve("/viewRiskSignal");
window.open(route.href, "_blank");
};
......
src/views/thinkTank/index.vue
浏览文件 @ e811d74d
......@@ -1351,7 +1351,7 @@ const handleClick = tank => {
// 查看更多风险信号
const handleToMoreRiskSignal = () => {
const route = router.resolve("/riskSignal");
const route = router.resolve("/viewRiskSignal");
window.open(route.href, "_blank");
};
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论