Skip to content

R
risk-monitor
提交 c7238487 authored 作者: 朱政's avatar 朱政
浏览文件
操作

feat:概览页人物社交媒体言论组件开发并替换

上级 ec73ea06
隐藏空白字符变更
内嵌 并排
正在显示 包含 649 行增加 和 325 行删除
src/components/dialog.vue deleted 100644 → 0
浏览文件 @ ec73ea06
<template>
<div class="message-bubble">
<div class="avatar-container" @click="handleClick">
<img :src="avatar || avatarUser" :alt="name" class="avatar" />
</div>
<div class="bubble-container">
<div class="bubble">
<div class="bubble-header">
<span class="name">{{ name }}</span>
<span class="meta">{{ formattedTime }} · {{ source }}</span>
</div>
<div class="bubble-content" @click="handleInfoClick">
{{ content }}
</div>
<div class="triangle"></div>
</div>
</div>
</div>
</template>
<script setup>
import { computed } from 'vue';
import avatarUser from "@/assets/images/avatar_user.png";
const emit = defineEmits(["click", "info-click"]);
const props = defineProps({
avatar: {
type: String,
default: "https://via.placeholder.com/40x40/4A90E2/FFFFFF?text=T"
},
name: {
type: String,
default: "唐纳德·特朗普"
},
time: {
type: String,
default: "15:23"
},
source: {
type: String,
default: "发布于真实社交"
},
content: {
type: String,
default:
"埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。"
}
});
const formattedTime = computed(() => {
const date = new Date(props.time);
if (isNaN(date.getTime())) {
return props.time; // 如果不是有效日期，返回原值
}
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate());
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
// return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
return `${month}月${day}日 ${hours}:${minutes}`;
});
const handleClick = () => {
emit("click");
};
const handleInfoClick = () => {
emit("info-click");
};
</script>
<style scoped>
.message-bubble {
display: flex;
max-width: 750px;
margin-top: 5px;
margin-bottom: 12px;
}
.avatar-container {
flex-shrink: 0;
flex-grow: 0;
flex: 0;
margin-right: 12px;
cursor: pointer;
}
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
}
.bubble-container {
flex: 1;
position: relative;
}
.bubble {
background-color: rgba(246, 250, 255, 1);
border-radius: 12px;
padding: 12px 12px;
position: relative;
border: 1px solid rgba(231, 243, 255, 1);
/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
}
.bubble-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
font-family: "微软雅黑";
}
.name {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
.meta {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: right;
}
.bubble-content {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
font-family: "微软雅黑";
}
.triangle {
position: absolute;
left: -8px;
top: 15px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid rgba(246, 250, 255, 1);
}
/* 响应式设计 */
@media (max-width: 768px) {
.message-bubble {
max-width: 100%;
}
.bubble-header {
flex-direction: column;
align-items: flex-start;
}
.meta {
margin-top: 4px;
}
}
</style>
src/components/dialog/dialog.vue 0 → 100644
浏览文件 @ c7238487
<template>
<div class="box4">
<div class="box4-header">
<div class="header-icon">
<img src="./image1.png" alt="" />
</div>
<div class="header-title">{{ "社交媒体" }}</div>
<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
</div>
<div class="box4-main">
<div class="message-bubble" v-for="(item, index) in messageList" :key="index" @click="handleClickPerson(item)">
<div class="avatar-container">
<img :src="item[props.imageUrl] || avatarUser" :alt="item[props.name]" class="avatar" />
<div class="avatar-containerOne" v-if="isRepublicanParty"><img src="./image2.png" alt=""
class="avatar-imageOne" /></div>
<div class="avatar-containerTwo" v-if="isUnitedStatesSenate"><img src="./image3.png" alt=""
class="avatar-imageTwo" /></div>
</div>
<div class="bubble-container">
<div class="bubble">
<div class="bubble-header">
<span class="name">{{ item[props.name] }}</span>
<span class="meta">{{ item[props.time] }} · {{ item[props.source] }}</span>
</div>
<div class="bubble-content">
{{ item[props.content] }}
</div>
<div class="triangle"></div>
</div>
</div>
</div>
<!-- <MessageBubble v-for="(item, index) in messageList" @click="handleClickPsserson(item)"
@info-click="handleMediaClick(item)" :key="index" :avatar="item.img ? item.img : DefaultIcon1" :name="item.name"
:time="item.time" :source="item.source" :content="item.content" /> -->
<!-- <div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
<div class="left" @click="handleClickPerson(item)">
<img :src="item.img ? item.img : DefaultIcon1" alt="" />
</div>
<div class="right">
<div class="right-top">
<div class="name">{{ item.name }}</div>
<div class="time">{{ item.time }}</div>
</div>
<div class="content">{{ item.content }}</div>
</div>
</div> -->
</div>
</div>
</template>
<script setup>
import { computed } from 'vue';
import avatarUser from "@/assets/images/avatar_user.png";
const emit = defineEmits(["click", "info-click"]);
const props = defineProps({
isRepublicanParty: {
type: Boolean,
default: false
},
isUnitedStatesSenate: {
type: Boolean,
default: false
},
messageList: {
type: Array,
default: () => []
},
imageUrl: {
type: String,
default: "imageUrl"
},
name: {
type: String,
default: "name"
},
time: {
type: String,
default: "time"
},
source: {
type: String,
default: "source"
},
content: {
type: String,
default:
"content"
}
});
const formattedTime = computed((index) => {
const date = new Date(index);
if (isNaN(date.getTime())) {
return index; // 如果不是有效日期，返回原值
}
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate());
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
// return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
return `${month}月${day}日 ${hours}:${minutes}`;
});
const handleClickPerson = (item) => {
emit("person-click", item);
};
const handleInfoClick = (item) => {
emit("info-click", item);
};
const handleToMoreNews = (item) => {
emit("more-click", item);
};
</script>
<style scoped>
.box4 {
margin-left: 20px;
width: 792px;
height: 450px;
border-radius: 10px;
box-shadow: 0 0 20px 0 rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
border: 1px solid rgb(234, 236, 238);
.box4-header {
width: 792px;
height: 48px;
border-bottom: 1px solid rgb(234, 236, 238);
display: flex;
box-sizing: border-box;
position: relative;
.header-icon {
margin-left: 18px;
margin-top: 14px;
width: 24px;
height: 24px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
width: 80px;
margin-top: 11px;
margin-left: 18px;
height: 26px;
color: rgb(5, 95, 194);
font-family: "Source Han Sans CN";
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
}
.more {
width: 45px;
height: 24px;
position: absolute;
top: 12px;
right: 27px;
color: rgb(5, 95, 194);
font-family: 'Source Han Sans CN';
font-size: 16px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
text-align: right;
}
}
.box4-main {
height: 402px;
overflow-y: auto;
box-sizing: border-box;
padding-bottom: 8px;
padding-left: 21px;
padding-top: 23px;
.message-bubble {
display: flex;
max-width: 740px;
margin-bottom: 15px;
.avatar-container {
flex-shrink: 0;
flex-grow: 0;
flex: 0;
width: 42px;
height: 42px;
margin-right: 14.5px;
cursor: pointer;
position: relative;
.avatar-containerOne,
.avatar-containerTwo {
display: inline-block;
position: absolute;
}
.avatar-containerOne {
left: 2px;
top: 29px;
.avatar-imageOne {
width: 20px;
height: 20px;
}
}
.avatar-containerTwo {
right: 2px;
top: 29px;
.avatar-imageTwo {
width: 20px;
height: 20px;
}
}
.avatar {
width: 42px;
height: 42px;
border-radius: 50%;
object-fit: cover;
}
}
.bubble-container {
flex: 1;
position: relative;
.bubble {
background-color: rgba(246, 250, 255, 1);
border-radius: 12px;
padding: 12px 12px;
position: relative;
border: 1px solid rgba(231, 243, 255, 1);
/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
.bubble-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
.name {
color: rgb(59, 65, 75);
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
.meta {
color: rgb(95, 101, 108);
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: right;
}
}
.bubble-content {
color: rgba(59, 65, 75, 1);
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.triangle {
position: absolute;
left: -9px;
/* 向左偏移1px，给描边留出空间 */
top: 15px;
width: 0;
height: 0;
/* 外层：描边颜色的三角形（比内层大1px） */
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-right: 9px solid rgb(231, 243, 255);
}
/* 内层：原有颜色的三角形，覆盖在外层上面，模拟描边效果 */
.triangle::after {
content: '';
position: absolute;
top: -8px;
/* 向上偏移1px，对齐中心 */
left: 1px;
/* 向右偏移1px，露出外层的描边 */
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid rgba(246, 250, 255, 1);
}
}
}
}
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.message-bubble {
max-width: 100%;
}
.bubble-header {
flex-direction: column;
align-items: flex-start;
}
.meta {
margin-top: 4px;
}
}
</style>
src/views/bill/billHome/index.vue
浏览文件 @ c7238487
......@@ -290,7 +290,9 @@
</div>
</div> -->
<NewsList :list="newsList.slice(0, 5)" />
<div class="box4">
<MessageBubble :messageList="messageList" imageUrl="personImage" @more-click="handleToSocialDetail"
@person-click="handleClcikToCharacter" name="personName" content="remarks" source="orgName" />
<!-- <div class="box4">
<div class="box4-header">
<div class="header-icon">
<img src="./assets/images/box4-header-icon.png" alt="" />
......@@ -319,9 +321,9 @@
</div>
<div class="content">{{ item.remarks }}</div>
</div>
</div> -->
</div> --
</div>
</div>
</div> -->
</div>
<DivideHeader id="position3" class="divide3" :titleText="'数据总览'"></DivideHeader>
<div class="center-footer">
......@@ -684,7 +686,7 @@ import {
import { getPersonSummaryInfo } from "@/api/common/index";
import DivideHeader from "@/components/DivideHeader.vue";
import CommonPrompt from "../commonPrompt/index.vue";
import MessageBubble from "@/components/dialog.vue";
import MessageBubble from "@/components/dialog/dialog.vue";
import { useContainerScroll } from "@/hooks/useScrollShow";
import getMultiLineChart from "./utils/multiLineChart";
......@@ -1011,7 +1013,13 @@ const handleGetRemarks = async () => {
const res = await getRemarks(params);
console.log("社交媒体", res);
if (res.code === 200) {
messageList.value = res.data;
messageList.value = res.data.map(item => {
return {
...item,
time: item.time.replace("T", " ")
};
});
}
} catch (error) { }
};
......@@ -1307,7 +1315,16 @@ const handleBox7Data = async () => {
watch(box7selectetedTime, () => {
handleBox7Data();
});
// 查看社交媒体详情
const handleToSocialDetail = item => {
const route = router.resolve({
path: "/characterPage",
query: {
personId: item.id
}
});
window.open(route.href, "_blank");
};
// 关键条款
const wordCloudData = ref([]);
const handleGetKeyTK = async () => {
......
src/views/coopRestriction/components/askPage/index.vue
浏览文件 @ c7238487
......@@ -27,7 +27,9 @@
</div> -->
<NewsList :newsList="leftList" @item-click="handleToNewsDetail" @more-click="handleToMoreNews" img="image"
title="title" content="content" from="from" />
<div class="right">
<MessageBubble :messageList="rightList" imageUrl="personImage" @more-click="handleToSocialDetail"
@person-click="handleToSocialDetail" name="name" content="content" source="orgName" image-url="image" />
<!-- <div class="right">
<div class="right-title">
<img src="./assets/icon02.png" alt="">
<div class="tit">社交媒体</div>
......@@ -43,11 +45,12 @@
</div>
</div>
</div>
</div>
</div> -->
</div>
</template>
<script setup>
import MessageBubble from "@/components/dialog/dialog.vue";
import NewsList from "@/components/NewsList/NewsList.vue";
import { ref, onMounted } from "vue";
import router from '@/router'
......@@ -75,12 +78,13 @@ const getCoopRestrictionSocialData = async () => {
const d = date.getDate().toString().padStart(2, '0');
const hh = date.getHours().toString().padStart(2, '0');
const mm = date.getMinutes().toString().padStart(2, '0');
const formattedTime = `${y}-${m}-${d} ${hh}:${mm} · 发布于${item.orgName}`;
const formattedTime = `${y}-${m}-${d} ${hh}:${mm} `;
return {
id: item.personId,
name: item.personName,
content: item.remarks,
time: formattedTime,
orgName: item.orgName,
image: item.personImage
}
});
......
src/views/decree/decreeHome/index.vue
浏览文件 @ c7238487
......@@ -228,7 +228,7 @@
</div>
</div> -->
<NewsList :newsList="newsList" @item-click="handleToNewsAnalysis" @more-click="handleToMoreNews" />
<div class="box4">
<!-- <div class="box4">
<div class="box4-header">
<div class="header-icon">
<img src="@/assets/images/box-header-icon/message-icon.png" alt="" />
......@@ -236,9 +236,7 @@
<div class="header-title">{{ "社交媒体" }}</div>
</div>
<div class="box4-main">
<MessageBubble v-for="(item, index) in messageList" @click="handleClickPerson(item)"
@info-click="handleMediaClick(item)" :key="index" :avatar="item.img ? item.img : DefaultIcon1"
:name="item.name" :time="item.time" :source="item.source" :content="item.content" />
<!-- <div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
<div class="left" @click="handleClickPerson(item)">
<img :src="item.img ? item.img : DefaultIcon1" alt="" />
......@@ -250,9 +248,11 @@
</div>
<div class="content">{{ item.content }}</div>
</div>
</div> -->
</div> --
</div>
</div>
</div> -->
<MessageBubble :messageList="messageList" @person-click="handleClickPerson" @info-click="handleGetMessage"
imageUrl="img" @more-click="handleToSocialDetail" />
</div>
<DivideHeader id="position3" class="divide3" :titleText="'数据总览'"></DivideHeader>
<div class="center-footer">
......@@ -491,7 +491,7 @@ import {
import RiskSignal from "@/components/RiskSignal/RiskSignal.vue";
import { getPersonSummaryInfo } from "@/api/common/index";
import { getNews, getSocialMedia } from "@/api/general/index";
import MessageBubble from "@/components/dialog.vue";
import MessageBubble from "@/components/dialog/dialog.vue";
import DivideHeader from "@/components/DivideHeader.vue";
import { useContainerScroll } from "@/hooks/useScrollShow";
import getMultiLineChart from "./utils/multiLineChart";
......@@ -1112,7 +1112,16 @@ const handleGetDecreeTypeList = async () => {
}
} catch (error) { }
};
// 查看社交媒体详情
const handleToSocialDetail = item => {
const route = router.resolve({
path: "/characterPage",
query: {
personId: item.id
}
});
window.open(route.href, "_blank");
};
const handleChangeCheckedDecreeType = () => {
handleGetDecreeOrderList();
};
......
src/views/exportControl/index.vue
浏览文件 @ c7238487
......@@ -214,12 +214,13 @@
</custom-container>
</el-col> -->
<div class="center-center">
<div class="center-center-news">
<NewsList :newsList="newsList" @item-click="handleNewsInfoClick" @more-click="handleToMoreNews"
content="newsContent" />
</div>
<div class="boxs4">
<custom-container title="社交媒体" :titleIcon="dialogIcon" height="450px">
<NewsList :newsList="newsList" @item-click="handleNewsInfoClick" @more-click="handleToMoreNews"
content="newsContent" />
<MessageBubble :messageList="socialMediaList" @person-click="handlePerClick" imageUrl="avatar"
@more-click="handleToSocialDetail" />
<!-- <custom-container title="社交媒体" :titleIcon="dialogIcon" height="450px">
<template #default>
<div class="dialog-list">
<MessageBubble v-for="(item, index) in socialMediaList" @click="handlePerClick(item)"
......@@ -227,8 +228,9 @@
:time="item.time" :source="item.source" :content="item.content" />
</div>
</template>
</custom-container>
</div>
</custom-container> -->
</div>
......@@ -623,7 +625,7 @@ import ClickableCard from "./components/link.vue";
import InfoCard from "./components/info.vue";
import CustomTitle from "./components/title.vue";
import MessageBubble from "./components/dialog.vue";
import MessageBubble from "@/components/dialog/dialog.vue";
import CommonPrompt from "./commonPrompt/index.vue";
import RuleSubsidiaryDialog from "./components/RuleSubsidiaryDialog.vue";
import trumpAvatar from "@/assets/images/icon-trump.png";
......@@ -882,7 +884,16 @@ onMounted(async () => {
console.log(err);
}
});
// 查看社交媒体详情
const handleToSocialDetail = item => {
const route = router.resolve({
path: "/characterPage",
query: {
personId: item.id
}
});
window.open(route.href, "_blank");
};
// 获取趋势图数据
const fetchTrendData = async () => {
try {
......@@ -1490,11 +1501,11 @@ const handlePerClick = item => {
// };
// 添加格式化时间的方法
const formatTime = dateString => {
const date = new Date(dateString);
const month = (date.getMonth() + 1).toString().padStart(2, "0");
const day = date.getDate().toString().padStart(2, "0");
return `${month}-${day}`;
const formatTime = timeStr => {
// 空值兜底，避免报错
if (!timeStr) return '暂无时间';
// 核心：替换T为空格
return timeStr.replace('T', ' ');
};
const warningList = ref([]);
......@@ -2020,94 +2031,94 @@ const handleMediaClick = item => {
}
}
.box4 {
height: 786px;
overflow: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top: 16px;
// padding-bottom: 50px;
position: relative;
.box4-item {
display: flex;
gap: 10px;
align-items: flex-start;
padding-bottom: 35px;
position: relative;
.box4-item-left {
display: flex;
flex-direction: column;
align-items: center;
.box4-item-left-icon {
width: 10px;
height: 10px;
}
.box4-item-left-line {
width: 1px;
height: 100%;
position: absolute;
border-left: 1px solid rgba(10, 87, 166, 0.3);
}
}
.box4-item-right {
display: flex;
flex-direction: column;
.box4-item-right-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(234, 236, 238, 1);
position: relative;
top: -7.5px;
padding-bottom: 8px;
cursor: pointer;
// .box4 {
// height: 786px;
// overflow: auto;
// display: flex;
// flex-direction: column;
// justify-content: space-between;
// padding-top: 16px;
// // padding-bottom: 50px;
// position: relative;
// .box4-item {
// display: flex;
// gap: 10px;
// align-items: flex-start;
// padding-bottom: 35px;
// position: relative;
// .box4-item-left {
// display: flex;
// flex-direction: column;
// align-items: center;
// .box4-item-left-icon {
// width: 10px;
// height: 10px;
// }
&-title {
font-size: 18px;
color: $base-color;
font-weight: 700;
}
// .box4-item-left-line {
// width: 1px;
// height: 100%;
// position: absolute;
// border-left: 1px solid rgba(10, 87, 166, 0.3);
// }
// }
&-desc {
font-size: 16px;
font-weight: 700;
color: rgba(59, 65, 75, 1);
}
}
// .box4-item-right {
// display: flex;
// flex-direction: column;
// .box4-item-right-header {
// display: flex;
// justify-content: space-between;
// align-items: center;
// border-bottom: 1px solid rgba(234, 236, 238, 1);
// position: relative;
// top: -7.5px;
// padding-bottom: 8px;
// cursor: pointer;
// &-title {
// font-size: 18px;
// color: $base-color;
// font-weight: 700;
// }
// &-desc {
// font-size: 16px;
// font-weight: 700;
// color: rgba(59, 65, 75, 1);
// }
// }
.box4-item-right-content {
font-size: 16px;
font-weight: 400;
color: rgba(95, 101, 108, 1);
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
line-height: 25px;
}
}
}
// .box4-item-right-content {
// font-size: 16px;
// font-weight: 400;
// color: rgba(95, 101, 108, 1);
// overflow: hidden;
// display: -webkit-box;
// -webkit-line-clamp: 3;
// -webkit-box-orient: vertical;
// text-overflow: ellipsis;
// line-height: 25px;
// }
// }
// }
.box4-footer {
position: absolute;
// margin-top: auto;
display: flex;
justify-content: center;
align-items: center;
bottom: 30px;
left: 50%;
margin-left: -30px;
// margin-bottom: 30px;
}
}
// .box4-footer {
// position: absolute;
// // margin-top: auto;
// display: flex;
// justify-content: center;
// align-items: center;
// bottom: 30px;
// left: 50%;
// margin-left: -30px;
// // margin-bottom: 30px;
// }
// }
.box5 {
height: 115%;
......
src/views/finance/index.vue
浏览文件 @ c7238487
......@@ -8,16 +8,11 @@
<headerInfo curTitleName="投融资限制"></headerInfo>
</div>
</div> -->
<div class="home-main" ref="containerRef">
<div class="home-main" ref="containerRef">
<div class="home-main-header">
<div class="home-main-header-center">
<SearchContainer
style="margin-bottom: 0; height: fit-content"
v-if="containerRef"
placeholder="搜索投融资限制政策"
:containerRef="containerRef"
areaName=""
/>
<SearchContainer style="margin-bottom: 0; height: fit-content" v-if="containerRef" placeholder="搜索投融资限制政策"
:containerRef="containerRef" areaName="" />
<!-- <el-input
v-model="searchKey"
style="width: 100%; height: 48px"
......@@ -202,7 +197,9 @@
<NewsList :newsList="customNewsData" @item-click="handleNewsInfoClick" @more-click="handleToMoreNews"
from='from' content="description" title="title" img="image" />
</div>
<div class="boxs4">
<MessageBubble :messageList="messageList" @person-click="handlePerClick" imageUrl="avatar"
@more-click="handleToSocialDetail" />
<!-- <div class="boxs4">
<custom-container title="社交媒体" :titleIcon="dialogIcon" height="450px">
<template #default>
<div class="dialog-list">
......@@ -212,7 +209,7 @@
:time="customMessage.time"
:source="customMessage.source"
:content="customMessage.content"
/> -->
/> --
<MessageBubble :avatar="trumpAvatar" name="唐纳德·特朗普" time="16:02" source="发布于真实社交"
content="埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。" />
......@@ -224,7 +221,7 @@
</div>
</template>
</custom-container>
</div>
</div> -->
</div>
......@@ -482,7 +479,7 @@ import ClickableCard from "./components/link.vue";
import InfoCard from "./components/info.vue";
import CustomTitle from "./components/title.vue";
import NewsList from "@/components/NewsList/NewsList.vue";
import MessageBubble from "./components/dialog.vue";
import MessageBubble from "@/components/dialog/dialog.vue";
import trumpAvatar from "@/assets/images/icon-trump.png";
import elongAvatar from "@/assets/images/icon-elong.png";
......@@ -529,7 +526,30 @@ import shenggongIcon from "./assets/images/shenggong.png";
import shoushiIcon from "./assets/images/shoushi.png";
import tianyiIcon from "./assets/images/tianyi.png";
import aircasIcon from "./assets/images/aircas.png";
// 父组件中定义 messageList 数据（avatar 对应子组件 imageUrl 字段，需用 import 的图片才能正确显示）
const messageList = ref([
{
avatar: trumpAvatar,
name: "唐纳德·特朗普",
time: "2025-05-12 16:02:37",
source: "真实社交",
content: "埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。"
},
{
avatar: elongAvatar,
name: "埃隆·马斯克",
time: "2025-05-12 16:02:37",
source: "真实社交",
content: "如果这个疯狂的支出法案获得通过，‘美国党’将在第二天成立。"
},
{
avatar: elongAvatar,
name: "埃隆·马斯克",
time: "2025-05-12 16:02:37",
source: "真实社交",
content: "提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。"
}
]);
// 查看更多风险信号
const handleToMoreRiskSignal = () => {
const route = router.resolve("/riskSignal");
......@@ -1248,7 +1268,16 @@ const handleGetBillsByType = async () => {
});
} catch (error) { }
};
// 查看社交媒体详情
const handleToSocialDetail = item => {
const route = router.resolve({
path: "/characterPage",
query: {
personId: item.id
}
});
window.open(route.href, "_blank");
};
onMounted(async () => {
handleGetHylyList();
curBill.value = billList.value[0];
......
src/views/innovationSubject/index.vue
浏览文件 @ c7238487
......@@ -176,7 +176,9 @@
</div> -->
<NewsList :newsList="newsList" @item-click="handleNewsInfoClick" @more-click="handleToMoreNews"
img="newsImage" title="newsTitle" content="newsContent" />
<div class="box4">
<MessageBubble :messageList="messageList" imageUrl="personImage" @more-click="handleToSocialDetail"
name="personName" content="remarks" source="orgName" />
<!-- <div class="box4">
<div class="box4-header">
<div class="header-icon">
<img src="./assets/images/box4-header-icon.png" alt="" />
......@@ -197,7 +199,7 @@
</div>
</div>
</div>
</div>
</div> -->
</div>
<DivideHeader id="position3" class="divide3" :titleText="'数据总览'"></DivideHeader>
<div v-if="activeCate === '创新主体排名'">
......@@ -370,6 +372,7 @@
</template>
<script setup>
import MessageBubble from "@/components/dialog/dialog.vue";
import RiskSignal from "@/components/RiskSignal/RiskSignal.vue";
import NewsList from "@/components/NewsList/NewsList.vue";
import { onMounted, ref, computed } from "vue";
......@@ -671,7 +674,10 @@ const handleGetSocialMediaInfo = async () => {
const res = await getSocialMediaInfo();
console.log("社交媒体", res);
if (res.code === 200 && res.data) {
messageList.value = res.data;
messageList.value = res.data.map(item => ({
...item,
time: item.time.replace(/T/, " "),
}));
}
} catch (error) {
console.error("获取社交媒体error", error);
......@@ -1015,6 +1021,16 @@ const handleToPosi = id => {
containerRef.value.scrollTop = 0;
}
};
// 查看社交媒体详情
const handleToSocialDetail = item => {
const route = router.resolve({
path: "/characterPage",
query: {
personId: item.id
}
});
window.open(route.href, "_blank");
};
onMounted(async () => {
handleGetAreaType();
......
src/views/marketAccessRestrictions/marketAccessHome/index.vue
浏览文件 @ c7238487
......@@ -273,7 +273,10 @@
</div> -->
<NewsList :newsList="newsList" @item-click="handleToNewsAnalysis" @more-click="handleToMoreNews"
img="newsImage" title="newsTitle" content="newsContent" from="from" />
<div class="box4">
<MessageBubble :messageList="messageList" @person-click="handleClickPerson" @more-click="handleToSocialDetail"
source="orgName" content="remarks" name="personName" imageUrl="personImage">
</MessageBubble>
<!-- <div class="box4">
<div class="box4-header">
<div class="header-icon">
<img src="./assets/images/header-message.png" alt="" />
......@@ -296,9 +299,9 @@
</div>
<div class="content">{{ item.remarks }}</div>
</div>
</div> -->
</div> --
</div>
</div>
</div> -->
</div>
<DivideHeader id="position3" class="divide-header" :titleText="'数据总览'"></DivideHeader>
<div class="center-footer">
......@@ -572,7 +575,7 @@ import getPieChart from "./utils/piechart";
import getRadarChart from "./utils/radarChart";
import getMapChart from "./utils/mapChart";
// import getBarChart from "./utils/barChart";
import MessageBubble from "@/components/dialog.vue";
import MessageBubble from "@/components/dialog/dialog.vue";
import News1 from "./assets/images/news1.png";
import News2 from "./assets/images/news2.png";
import News3 from "./assets/images/news3.png";
......@@ -768,6 +771,16 @@ const handleGetBox4Data = async () => {
}
} catch (error) { }
};
// 查看社交媒体详情
const handleToSocialDetail = item => {
const route = router.resolve({
path: "/characterPage",
query: {
personId: item.id
}
});
window.open(route.href, "_blank");
};
// 点击人物头像，跳转到人物主页
const handleClickPerson = async item => {
console.log("person", item);
......
src/views/ruleRestriction/components/askPage/index.vue
浏览文件 @ c7238487
......@@ -22,7 +22,7 @@
</div> -->
<NewsList :newsList="leftList" @item-click="handleToNewsDetail" @more-click="handleToMoreNews" img="newsImage"
title="newsTitle" content="newsContent" />
<div class="right">
<!-- <div class="right">
<div class="right-title">
<img src="./assets/icon02.png" alt />
<div class="tit">社交媒体</div>
......@@ -52,14 +52,17 @@
<div class="cl2">{{ rightList[2].content }}</div>
<div class="cl3">{{ rightList[2].time }}</div>
</div>
</div> -->
</div> --
</div>
</div>
</div> -->
<MessageBubble :messageList="rightList" imageUrl="personImage" @more-click="handleToSocialDetail" content="remarks"
name="personName" source="orgName" />
</div>
</template>
<script setup>
import NewsList from "@/components/NewsList/NewsList.vue";
import MessageBubble from "@/components/dialog/dialog.vue";
import { ref, onBeforeMount } from "vue";
import router from "@/router"
import image01 from './assets/image01.png'
......@@ -95,7 +98,14 @@ const getRemarksList = async () => {
// console.log('----res', res)
if (res && res.code === 200) {
// console.log('----getRemarksList', res.data)
rightList.value = res.data
rightList.value = res.data.map(item => {
return {
...item,
time: item.time.replace('T', ' ')
}
})
}
} catch (error) {
console.error("获取社交媒体接口失败:", error);
......
src/views/scientificFunding/components/askPage/index.vue
浏览文件 @ c7238487
......@@ -24,7 +24,10 @@
</div> -->
<NewsList :newsList="leftList" @more-click="handleToMoreNews" img="newsImage" title="newsTitle"
content="newsContent" from="from" />
<div class="right-box">
<MessageBubble :messageList="rightList" @more-click="handleToSocialDetail" source="orgName" content="remarks"
name="personName" imageUrl="personImage">
</MessageBubble>
<!-- <div class="right-box">
<div class="right-title">
<img src="./assets/icon02.png" alt="">
<div class="tit">社交媒体</div>
......@@ -45,12 +48,13 @@
</div>
</div>
</div>
</div> -->
</div>
</template>
<script setup>
import NewsList from "@/components/NewsList/NewsList.vue";
import MessageBubble from "@/components/dialog/dialog.vue";
import { ref, onMounted } from "vue";
import {
getSocialMediaInfo, getNews
......@@ -151,7 +155,10 @@ const handleSocialMediaInfo = async () => {
const res = await getSocialMediaInfo();
console.log("获取社交媒体", res);
if (res.code === 200 && res.data) {
rightList.value = res.data
rightList.value = res.data.map(item => ({
...item,
time: item.time.replace(/T/, ' ')
}));
}
} catch (error) {
console.error("获取社交媒体error", error);
......@@ -162,6 +169,17 @@ const handleToMoreNews = () => {
const route = router.resolve("/newsBrief");
window.open(route.href, "_blank");
};
// 查看社交媒体详情
const handleToSocialDetail = item => {
const route = router.resolve({
path: "/characterPage",
query: {
personId: item.id
}
});
window.open(route.href, "_blank");
};
onMounted(async () => {
handleNews()
handleSocialMediaInfo()
......
src/views/thinkTank/index.vue
浏览文件 @ c7238487
......@@ -228,7 +228,9 @@
</div> -->
<NewsList :newsList="newsList" @item-click="handleToNewsAnalysis" @more-click="handleToMoreNews"
img="newsImage" title="newsTitle" content="newsContent" from="from" />
<div class="box4">
<MessageBubble :messageList="messageList" imageUrl="personImage" @more-click="handleToSocialDetail"
@person-click="handleClickPerson" name="personName" content="remarks" source="orgName" />
<!-- <div class="box4">
<div class="box4-header">
<div class="header-icon">
<img src="./assets/images/header-message.png" alt="" />
......@@ -246,7 +248,7 @@
}" v-for="(tag, index) in box4TagList" :key="index" @click="handleClickBox4Tag(tag.name)">
{{ tag.name }}
</div>
</div> -->
</div> --
<div class="box4-main">
<MessageBubble v-for="(item, index) in messageList" @click="handleClickPerson(item)" :key="index"
:avatar="item.personImage ? item.personImage : defaultHeaderIcin" :name="item.personName"
......@@ -262,9 +264,9 @@
</div>
<div class="content">{{ item.remarks }}</div>
</div>
</div> -->
</div> --
</div>
</div>
</div> -->
</div>
<DivideHeader id="position3" class="divide-header" :titleText="'数据总览'"></DivideHeader>
<div class="center-footer">
......@@ -465,7 +467,7 @@ import scrollToTop from "@/utils/scrollToTop";
import router from "@/router";
import DivideHeader from "@/components/DivideHeader.vue";
import setChart from "@/utils/setChart";
import MessageBubble from "@/components/dialog.vue";
import MessageBubble from "@/components/dialog/dialog.vue";
import {
getThinkTankList,
getThinkTankRiskSignal,
......@@ -1258,7 +1260,16 @@ const handleGetHylyList = async () => {
console.error("获取行业领域字典error", error);
}
};
// 查看社交媒体详情
const handleToSocialDetail = item => {
const route = router.resolve({
path: "/characterPage",
query: {
personId: item.id
}
});
window.open(route.href, "_blank");
};
const checkAll = ref(false);
const isIndeterminate = ref(true);
const selectedAreaList = ref([]);
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论