add 1
This commit is contained in:
duanliang
@@ -4,7 +4,7 @@
|
||||
<div class="box-1 mr-8">
|
||||
<Title1 title="最新舆情" />
|
||||
<div class="list">
|
||||
<div class="item" v-for="(item, index) in hotNewList" :key="index">
|
||||
<div class="item" @click="handleHot(item)" v-for="(item, index) in hotNewList" :key="index">
|
||||
<p
|
||||
:class="{
|
||||
'status-error': item.type == '负面',
|
||||
@@ -71,6 +71,55 @@
|
||||
<word-cloud />
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog :title="'舆情详情'" center v-model="dialogTableVisible">
|
||||
<div class="bom-box">
|
||||
<div class="table">
|
||||
<div class="modal-body">
|
||||
<div class="m-modal">
|
||||
<!-- <div class="detail-item">
|
||||
<span class="label">标识：</span>
|
||||
<span class="value">{{ detailsHot.id }}</span>
|
||||
</div> -->
|
||||
<div class="detail-item">
|
||||
<span class="label">文章作者：</span>
|
||||
<span class="value">{{ detailsHot.newsAuthor }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">情感属性：</span>
|
||||
<span class="value">{{ detailsHot.newsEmotion }}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="m-modal">
|
||||
<div class="detail-item">
|
||||
<span class="label">发布平台：</span>
|
||||
<span class="value">{{ detailsHot.platformName }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">发布时间：</span>
|
||||
<span class="value">{{ detailsHot.newsPosttime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-modal">
|
||||
|
||||
<div class="detail-item">
|
||||
<span class="label">原文链接：</span>
|
||||
<a :href="detailsHot.newsUrl" target="_blank" class="link">{{ detailsHot.newsUrl }}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">文章标题：</span>
|
||||
<div class="content" v-html="detailsHot.newsTitle"></div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">新闻内容：</span>
|
||||
<div class="content" v-html="detailsHot.newsContent"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -83,7 +132,8 @@
|
||||
getLineChartApi,
|
||||
getStateApi,
|
||||
getTotalApi,
|
||||
getSpotApi
|
||||
getSpotApi,
|
||||
getGsdataDetailApi
|
||||
} from '@/api/sentiment.js'
|
||||
import { useHomeStore } from '@/stores/home'
|
||||
const homeStore = useHomeStore()
|
||||
@@ -96,7 +146,15 @@
|
||||
let stateList = ref([])
|
||||
let options = ref([])
|
||||
let params = reactive({ id: '' })
|
||||
|
||||
let dialogTableVisible = ref(false)
|
||||
let detailsHot = ref({})
|
||||
// 详情
|
||||
const handleHot = async(item)=>{
|
||||
let res = await getGsdataDetailApi(item.id)
|
||||
console.log(res)
|
||||
detailsHot.value = res.data
|
||||
dialogTableVisible.value = true
|
||||
}
|
||||
const getStop = async () => {
|
||||
let res = await getSpotApi()
|
||||
options.value = res.data
|
||||
@@ -136,6 +194,251 @@
|
||||
if (timer) clearInterval(timer)
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
|
||||
.modal-header h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 16px;
|
||||
color:#fff;
|
||||
height:vh(850);
|
||||
overflow:auto;
|
||||
}
|
||||
.m-modal{
|
||||
display: flex;
|
||||
|
||||
}
|
||||
.detail-item {
|
||||
flex:1;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* .label {
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #333;
|
||||
} */
|
||||
|
||||
.link {
|
||||
color: #1890ff;
|
||||
text-decoration: none;
|
||||
// font-size:vw(14);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
white-space: pre-wrap;
|
||||
line-height: 2;
|
||||
color: #fff;
|
||||
margin-top:vh(10);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 16px;
|
||||
border-top: 1px solid #eee;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
padding: 8px 16px;
|
||||
background: #1890ff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-dialog__headerbtn .el-dialog__close){
|
||||
color:#fff;
|
||||
font-size:40px;
|
||||
position:relative;
|
||||
top:15px;
|
||||
right:15px;
|
||||
}
|
||||
:deep(.el-dialog__header.show-close){
|
||||
padding-right:0;
|
||||
}
|
||||
:deep(.el-dialog) {
|
||||
background: url('/src/assets/images/map-bg-2.png') no-repeat center;
|
||||
background-size: 100% 100%;
|
||||
// width:vw(1500);
|
||||
height:vh(880);
|
||||
// overflow:auto;
|
||||
}
|
||||
:deep(.el-dialog__title) {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sp-ico {
|
||||
width: vw(40);
|
||||
}
|
||||
.item-name {
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
}
|
||||
.sp-img {
|
||||
width: vw(100);
|
||||
}
|
||||
.correspondence {
|
||||
margin: vw(8);
|
||||
width: vw(300);
|
||||
height: vh(1070);
|
||||
background-image: url('@/assets/images/bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.bom-box2{
|
||||
// margin-top:vh(10);
|
||||
min-width:vw(900);
|
||||
height:vh(800);
|
||||
|
||||
}
|
||||
.header-title{
|
||||
font-size:vw(32);
|
||||
color:#fff;
|
||||
text-align:center;
|
||||
font-weight:bold;
|
||||
margin-bottom:vh(20);
|
||||
|
||||
}
|
||||
.bom-box {
|
||||
.table2{
|
||||
width:100%;
|
||||
height:vh(740);
|
||||
}
|
||||
.table {
|
||||
width: 100%;
|
||||
margin-top: vh(5);
|
||||
.header {
|
||||
height: vh(28);
|
||||
font-weight: 400;
|
||||
font-size: vw(24);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
|
||||
& > div {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
overflow-y: auto;
|
||||
height: vh(490);
|
||||
/* 滚动条整体样式 */
|
||||
&::-webkit-scrollbar {
|
||||
width: vw(4); /* 滚动条的宽度 */
|
||||
}
|
||||
/* 滚动条轨道 */
|
||||
&::-webkit-scrollbar-track {
|
||||
background: 'transparent'; /* 轨道的背景色 */
|
||||
}
|
||||
/* 滚动条滑块 */
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
|
||||
border-radius: 5px; /* 滑块的圆角 */
|
||||
}
|
||||
.item {
|
||||
height: vh(50);
|
||||
font-weight: 400;
|
||||
font-size: vw(24);
|
||||
color: #f1f7ff;
|
||||
display: flex;
|
||||
&:nth-child(2n + 1) {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(0, 150, 255, 0) 0%,
|
||||
rgba(0, 150, 255, 0.22) 100%
|
||||
);
|
||||
}
|
||||
& > div {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
white-space: nowrap; /* 保证文本在一行内显示 */
|
||||
overflow: hidden; /* 隐藏溢出的内容 */
|
||||
text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
span {
|
||||
margin-left: vw(30);
|
||||
font-weight: 800;
|
||||
font-size: vw(15);
|
||||
line-height: vh(26);
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-box {
|
||||
width: 100%;
|
||||
height: vh(500);
|
||||
.icon-box {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #ffffff;
|
||||
line-height: vh(16);
|
||||
flex-wrap: wrap;
|
||||
.item {
|
||||
cursor: pointer;
|
||||
width: 50%;
|
||||
margin-top: vh(40);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
& > img {
|
||||
width: vw(54);
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
width: vw(260);
|
||||
height: vh(26);
|
||||
text-align: center;
|
||||
line-height: vh(26);
|
||||
margin-left: vw(32.5);
|
||||
font-size: vw(16);
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
background-image: url('@/assets/images/title-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
|
||||
Reference in New Issue
Block a user