lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：完善舆情页面

Browse Source
This commit is contained in:
zjc
2024-12-19 18:21:28 +08:00
parent 42a680c9c3
commit 188e233c7f
25 changed files with 641 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
src/views/sentiment/index.vue
View File

@@ -1,40 +1,104 @@
<template>
<Header title="舆情检测" />
<Header title="舆情检测" is-back />
<CoreVideo />
<div class="container">
<div class="flex">
<div class="box-1 mr-10">
<Title1 title="最新舆情" />
<div class="list">
<div class="item" v-for="item in 20">
<p class="status status-error">负面</p>
<p class="content">
这是一条关于三侠之颠旅游舆情的负面新闻这是一条关于三侠之颠旅游舆情的负面这是一条关于三侠之颠旅游舆情的负面新闻这是一条关于三侠之颠旅游舆情的负面
</p>
<p class="date">2024-12.16 23:58</p>
</div>
</div>
</div>
<div class="box-2 mr-10">
<div class="flex justify-center">
<div class="flex">
<count-item label="今日预警" :count="35600" suffix="条" />
<count-item label="今日预警" :count="35600" suffix="条" />
<count-item label="今日预警" :count="35600" suffix="条" />
<div class="top flex justify-evenly">
<count-item label="今日舆情总数" :count="35600" suffix="条" color="#fff" />
<count-item label="今日正面舆情" :count="35600" suffix="条" color="#fff" />
<count-item label="今日负面舆情" :count="35600" suffix="条" color="#fff" />
</div>
</div>
<div class="flex mt-20 gap-8 ml-8 mr-8">
<div class="border flex-1">
<Title3 title="山峡之巅" />
<pie-row :width="500" :height="330" />
</div>
<div class="border flex-1">
<Title3 title="山峡之巅" />
<pie-row :width="500" :height="330" />
</div>
<div class="border flex-1">
<Title3 title="山峡之巅" />
<pie-row :width="500" :height="330" />
</div>
</div>
</div>
<div class="box-1">
<Title1 title="数据来源分析" />
<data-source />
</div>
</div>
<div class="flex mt-10">
<div class="box-2 mr-10">
<Title1 title="舆情指数" />
<Line
:width="1560"
:height="400"
:data="[
{
name: '企业数',
data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
},
{
name: '交易量',
data: [124, 30, 77, 97, 67, 75, 70, 334, 123, 124, 30, 77, 97, 67, 75, 70]
}
]"
:xAxisData="xAxisData"
:seriesConfig="{ smooth: false, symbol: 'circle' }"
/>
</div>
<div class="box-1 mr-10">
<Title1 title="情感分布" />
<emotion />
</div>
<div class="box-1 mr-10">
<Title1 title="词频分析" />
<word-cloud />
</div>
</div>
</div>
<Correspondence />
</template>
<script setup></script>
<script setup>
import emotion from './components/emotion.vue'
import wordCloud from './components/wordCloud.vue'
import dataSource from './components/dataSource.vue'
let xAxisData = ref([
'12-16 10:00',
'12-16 14:00',
'12-16 16:00',
'12-16 22:00',
'12-17 02:00',
'12-17 06:00',
'12-17 10:00',
'12-17 14:00',
'12-17 16:00',
'12-16 22:00',
'12-18 02:00',
'12-18 06:00',
'12-8 10:00',
'12-18 14:00',
'12-18 16:00',
'12-18 20:00'
])
</script>
<style scoped lang="scss">
.container {
@@ -43,6 +107,10 @@
.bg {
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
}
.top {
width: vw(600);
margin-top: vh(35);
}
.box-1 {
width: vw(770);
height: vh(470);
@@ -53,5 +121,73 @@
height: vh(470);
@extend .bg;
}
.border {
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
}
.list {
margin: 0 vw(20);
overflow-y: auto;
height: vh(400);
/* 滚动条整体样式 */
&::-webkit-scrollbar {
width: vw(4); /* 滚动条的宽度 */
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
background: 'transparent'; /* 轨道的背景色 */
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
border-radius: 5px; /* 滑块的圆角 */
}
.item {
display: flex;
align-items: center;
height: vh(40);
&:nth-child(2n + 1) {
background: rgba(3, 78, 153, 0.3);
}
.status {
width: vw(40);
height: vh(20);
line-height: vh(20);
text-align: center;
margin: 0 vw(20);
font-weight: 400;
font-size: vw(12);
color: #ffffff;
border-radius: vw(2);
&-error {
@extend .status;
background: #d9011b;
}
&-warning {
@extend .status;
background: #feae00;
}
&-primary {
@extend .status;
background: #2380fb;
}
}
.content {
flex: 1;
font-weight: 400;
font-size: vw(15);
color: #ffffff;
white-space: nowrap; /* 保证文本在一行内显示 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
}
.date {
margin: 0 vw(20);
font-weight: 400;
font-size: vw(12);
color: rgba(255, 255, 255, 0.7);
}
}
}
}
</style>