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

5
index.html
View File

@@ -3,7 +3,10 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=MZ9Zd9vKGesV5wxV1EhvjOoGIjHc09Yj"></script> <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=MZ9Zd9vKGesV5wxV1EhvjOoGIjHc09Yj"></script>
<title>奉节旅游调度</title> <title>奉节旅游调度</title>
</head> </head>

9
package-lock.json generated
View File

@@ -11,6 +11,7 @@
"@newpanjing/datav-vue3": "^0.0.0-alpha.0", "@newpanjing/datav-vue3": "^0.0.0-alpha.0",
"axios": "^1.7.9", "axios": "^1.7.9",
"echarts": "^5.5.1", "echarts": "^5.5.1",
"echarts-wordcloud": "^2.0.0",
"element-plus": "^2.9.0", "element-plus": "^2.9.0",
"flv.js": "^1.6.2", "flv.js": "^1.6.2",
"pinia": "^2.2.6", "pinia": "^2.2.6",
@@ -1787,6 +1788,14 @@
"zrender": "5.6.0" "zrender": "5.6.0"
} }
}, },
"node_modules/echarts-wordcloud": {
"version": "2.0.0",
"resolved": "https://registry.npmmirror.com/echarts-wordcloud/-/echarts-wordcloud-2.0.0.tgz",
"integrity": "sha512-K7l6pTklqdW7ZWzT/1CS0KhBSINr/cd7c5N1fVMzZMwLQHEwT7x+nivK7g5hkVh7WNcAv4Dn6/ZS5zMKRozC1g==",
"peerDependencies": {
"echarts": "^5.0.1"
}
},
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.5.68", "version": "1.5.68",
"resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.68.tgz", "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.68.tgz",

1
package.json
View File

@@ -12,6 +12,7 @@
"@newpanjing/datav-vue3": "^0.0.0-alpha.0", "@newpanjing/datav-vue3": "^0.0.0-alpha.0",
"axios": "^1.7.9", "axios": "^1.7.9",
"echarts": "^5.5.1", "echarts": "^5.5.1",
"echarts-wordcloud": "^2.0.0",
"element-plus": "^2.9.0", "element-plus": "^2.9.0",
"flv.js": "^1.6.2", "flv.js": "^1.6.2",
"pinia": "^2.2.6", "pinia": "^2.2.6",

6
src/components/CountItem/index.vue
View File

@@ -6,7 +6,7 @@
</div> </div>
<div class="count"> <div class="count">
<img class="bg" src="@/assets/images/mask-success.png" /> <img class="bg" src="@/assets/images/mask-success.png" />
<div class="flex align-center"> <div class="flex align-center" :style="{ color }">
<countup class="value" :end-val="count" /> <countup class="value" :end-val="count" />
<span class="suffix">{{ suffix }}</span> <span class="suffix">{{ suffix }}</span>
</div> </div>
@@ -26,6 +26,10 @@
type: Number, type: Number,
default: 0 default: 0
}, },
color: {
type: String,
default: '#02f9fa'
},
mode: { mode: {
type: Number, type: Number,
default: 0 default: 0

14
src/components/Header/index.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="header"> <div class="header">
<div v-if="isBack" class="back">返回</div> <div v-if="isBack" class="back" @click="handleBack">返回</div>
<ul class="nav-left"> <ul class="nav-left">
<li <li
class="nav-left-item" class="nav-left-item"
@@ -18,9 +18,12 @@
<span>{{ name }}</span> <span>{{ name }}</span>
</div> </div>
<ul class="nav-right"> <ul class="nav-right">
<li class="nav-right-item" <li
class="nav-right-item"
@click="handleNav(item, index)" @click="handleNav(item, index)"
v-for="(item, index) in navRight" :key="index"> v-for="(item, index) in navRight"
:key="index"
>
{{ item.name }} {{ item.name }}
</li> </li>
</ul> </ul>
@@ -68,6 +71,9 @@
return props.title return props.title
}) })
const handleBack = () => {
router.go(-1)
}
const handleNav = (item, index) => { const handleNav = (item, index) => {
if (props.isSkip) { if (props.isSkip) {
router.push(item.path) router.push(item.path)
@@ -83,7 +89,7 @@
left: vw(326); left: vw(326);
.back { .back {
position: absolute; position: absolute;
left: vw(60); right: vw(20);
top: vh(40); top: vh(40);
width: vw(120); width: vw(120);
height: vh(30); height: vh(30);

185
src/components/Line/index.vue
View File

@@ -20,6 +20,22 @@
height: { height: {
type: Number, type: Number,
default: () => 0 default: () => 0
},
data: {
type: Array,
default: () => []
},
xAxisData: {
type: Array,
default: () => []
},
config: {
type: Object,
default: () => {}
},
seriesConfig: {
type: Object,
default: () => {}
} }
}) })
@@ -27,12 +43,26 @@
let lineChart = null let lineChart = null
let timer = null let timer = null
let currentIndex = -1 let currentIndex = -1
let defaultCofig = {
var defaultColors = ['#06E2FF', '#02FFB8', '#FF465F', '#FFCA36', '#9A4BFC', '#044EFF']
let defaultSeriesConfig = {
type: 'line',
smooth: true,
symbol: 'none',
symbolSize: fitChartSize(8)
}
let defaultConfig = {
colors: defaultColors,
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
backgroundColor: 'transparent', backgroundColor: 'transparent',
borderWidth: 0, borderWidth: 0,
formatter: (params) => { formatter: (params) => {
let valueStr = ''
params.map((item) => {
valueStr += `<div>${item.seriesName}：${item.value}</div>`
})
let str = `<div style=" let str = `<div style="
background: #07356B; background: #07356B;
border: 1px solid #0096FF; border: 1px solid #0096FF;
@@ -41,7 +71,7 @@
font-size: ${fitChartSize(16)}px; font-size: ${fitChartSize(16)}px;
border-radius: ${fitChartSize(4)}px; border-radius: ${fitChartSize(4)}px;
padding: ${fitChartSize(4)}px ${fitChartSize(12)}px;"> padding: ${fitChartSize(4)}px ${fitChartSize(12)}px;">
${params[0].value}</div>` ${valueStr}</div>`
return str return str
} }
}, },
@@ -49,9 +79,23 @@
left: '2%', left: '2%',
right: '2%', right: '2%',
bottom: '5%', bottom: '5%',
top: '5%', top: '10%',
containLabel: true containLabel: true
}, },
legend: {
orient: 'horizontal',
x: 'center',
y: 'top',
icon: 'rect',
itemWidth: fitChartSize(8),
itemHeight: fitChartSize(4),
itemGap: fitChartSize(10),
textStyle: {
color: '#ffffff',
fontSize: fitChartSize(12)
},
data: []
},
title: { title: {
show: false show: false
}, },
@@ -85,48 +129,42 @@
} }
} }
}, },
series: [ series: []
{ }
data: [], watch(
type: 'line', () => props.data,
smooth: true, (val) => {
symbol: 'none', if (val.length > 0) {
lineStyle: { setTimeout(() => {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ initChart()
{ }, 500)
offset: 0, }
color: '#7DE7FF'
}, },
{ { immediate: true }
offset: 0.5, )
color: '#02F9FA' const initChart = () => {
},
{
offset: 1,
color: '#009DFF'
}
])
}
}
]
}
const init = () => {
const dom = document.getElementById(id.value) const dom = document.getElementById(id.value)
lineChart = echarts.init(dom) lineChart = echarts.init(dom)
defaultCofig.xAxis.data = [ defaultConfig.xAxis.data = props.xAxisData
'10:00', props.data.map((item, index) => {
'10:05', defaultConfig.series.push({
'10:10', ...defaultSeriesConfig,
'10:15', ...props.seriesConfig,
'10:20', name: item.name,
'10:25', data: item.data,
'10:30', itemStyle: {
'10:35' color: '#0B2F63',
] borderColor: defaultColors[index],
defaultCofig.series[0].data = [820, 932, 901, 934, 1290, 1330, 1320, 1290] borderWidth: fitChartSize(4)
},
lineStyle: {
color: defaultColors[index]
}
})
defaultConfig.legend.data.push(item.name)
})
lineChart.setOption({ lineChart.setOption({
...defaultCofig ...defaultConfig
}) })
// // 开启轮播 // // 开启轮播
// startTooltipLoop() // startTooltipLoop()
@@ -151,42 +189,37 @@
if (lineChart) { if (lineChart) {
lineChart.dispose() lineChart.dispose()
lineChart = null lineChart = null
init() initChart()
} }
} }
// // 切换tooltip
// 切换tooltip // const switchTooltip = () => {
const switchTooltip = () => { // // 取消之前高亮的图形
// 取消之前高亮的图形 // lineChart.dispatchAction({
lineChart.dispatchAction({ // type: 'downplay',
type: 'downplay', // seriesIndex: 0,
seriesIndex: 0, // dataIndex: currentIndex
dataIndex: currentIndex // })
}) // currentIndex = (currentIndex + 1) % 8
currentIndex = (currentIndex + 1) % 8 // // 高亮当前图形
// 高亮当前图形 // lineChart.dispatchAction({
lineChart.dispatchAction({ // type: 'highlight',
type: 'highlight', // seriesIndex: 0,
seriesIndex: 0, // dataIndex: currentIndex
dataIndex: currentIndex // })
}) // // 显示tooltip
// 显示tooltip // lineChart.dispatchAction({
lineChart.dispatchAction({ // type: 'showTip',
type: 'showTip', // seriesIndex: 0,
seriesIndex: 0, // dataIndex: currentIndex
dataIndex: currentIndex // })
}) // }
} // const startTooltipLoop = () => {
const startTooltipLoop = () => { // timer = setInterval(() => switchTooltip(), 3000)
timer = setInterval(() => switchTooltip(), 3000) // }
} // const closeSwitchTooltip = () => {
const closeSwitchTooltip = () => { // clearInterval(timer)
clearInterval(timer) // timer = undefined
timer = undefined // }
}
onMounted(() => {
init()
})
</script> </script>
<style lang="scss"></style> <style lang="scss"></style>

17
src/components/PieRow/index.vue
View File

@@ -61,7 +61,6 @@
fontSize: fitChartSize(12) fontSize: fitChartSize(12)
} }
}, },
series: [ series: [
{ {
type: 'pie', type: 'pie',
@@ -98,14 +97,6 @@
} }
] ]
} }
const resize = () => {
if (pieChart) {
pieChart.dispose()
pieChart = null
init()
}
}
const init = () => { const init = () => {
const dom = document.getElementById(id.value) const dom = document.getElementById(id.value)
pieChart = echarts.init(dom) pieChart = echarts.init(dom)
@@ -116,7 +107,13 @@
// 监听窗口大小变化 // 监听窗口大小变化
window.addEventListener('resize', resize) window.addEventListener('resize', resize)
} }
const resize = () => {
if (pieChart) {
pieChart.dispose()
pieChart = null
init()
}
}
onMounted(() => { onMounted(() => {
init() init()
}) })

9
src/styles/common.scss
View File

@@ -19,9 +19,18 @@
.justify-evenly { .justify-evenly {
justify-content: space-evenly; justify-content: space-evenly;
} }
.gap-8 {
gap: vh(8) vw(8);
}
.mb-6 { .mb-6 {
margin-bottom: vh(6) !important; margin-bottom: vh(6) !important;
} }
.ml-8 {
margin-left: vw(8) !important;
}
.mr-8 {
margin-right: vw(8) !important;
}
.pt-10 { .pt-10 {
padding-top: vh(10) !important; padding-top: vh(10) !important;
} }

4
src/styles/screen.scss
View File

@@ -1,7 +1,7 @@
@use "sass:math"; @use 'sass:math';
//默认设计稿的宽度 //默认设计稿的宽度
$designWidth:3840; $designWidth: 3822;
//默认设计稿的高度 //默认设计稿的高度
$designHeight: 1080; $designHeight: 1080;

2
src/utils/dataUtil.js
View File

@@ -1,5 +1,5 @@
/* Echarts图表尺寸自适应 */ /* Echarts图表尺寸自适应 */
export const fitChartSize = (size, width = 3840) => { export const fitChartSize = (size, width = 3822) => {
let clientWidth = let clientWidth =
window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
if (!clientWidth) return size if (!clientWidth) return size

2
src/utils/styleUtil.js
View File

@@ -1,5 +1,5 @@
//默认设计稿的宽度 //默认设计稿的宽度
const designWidth = 3840 const designWidth = 3822
//默认设计稿的高度 //默认设计稿的高度
const designHeight = 1080 const designHeight = 1080

40
src/views/home/components/age-ratio.vue
View File

@@ -15,16 +15,42 @@
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
}, },
legend: {
orient: 'vertical',
left: '60%',
y: 'center',
data: ['19岁以下', '18-30岁', '30-40岁', '40-60岁', '60岁以上'],
itemHeight: fitChartSize(8),
itemWidth: fitChartSize(8),
itemGap: fitChartSize(10),
formatter: function (name) {
return '{title|' + name + '}'
},
textStyle: {
rich: {
title: {
color: '#fff',
fontSize: fitChartSize(14)
},
value: {
color: '#00D5F6',
fontSize: fitChartSize(14)
}
}
}
},
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: ['30%', '40%'], center: ['30%', '50%'],
radius: ['50%', '70%'],
itemStyle: { itemStyle: {
borderColor: 'transparent', borderColor: 'transparent',
borderRadius: fitChartSize(2), borderRadius: fitChartSize(2),
borderWidth: fitChartSize(2) borderWidth: fitChartSize(2)
}, },
label: { label: {
show: false,
color: '#D3F0FE', color: '#D3F0FE',
fontSize: fitChartSize(12) fontSize: fitChartSize(12)
}, },
@@ -36,11 +62,11 @@
} }
}, },
data: [ data: [
{ value: 484, name: '19岁以下', labelLine: { length: 2 } }, { value: 484, name: '19岁以下' },
{ value: 300, name: '18-30岁', labelLine: { length: 2 } }, { value: 300, name: '18-30岁' },
{ value: 1048, name: '30-40岁', labelLine: { length: 2 } }, { value: 1048, name: '30-40岁' },
{ value: 580, name: '40-60岁', labelLine: { length: 2 } }, { value: 580, name: '40-60岁' },
{ value: 735, name: '60岁以上', labelLine: { length: 2 } } { value: 735, name: '60岁以上' }
] ]
} }
] ]
@@ -63,6 +89,6 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.age-ratio { .age-ratio {
width: vw(253); width: vw(253);
height: vh(100); height: vh(120);
} }
</style> </style>

2
src/views/home/components/box-2.vue
View File

@@ -245,7 +245,7 @@
} }
.box-1 { .box-1 {
width: vw(253); width: vw(253);
height: vh(270); height: vh(290);
background-image: url('@/assets/images/bg-3.png'); background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%; background-size: 100% 100%;
&:nth-child(1) { &:nth-child(1) {

2
src/views/home/components/box-4.vue
View File

@@ -235,7 +235,7 @@
} }
.box-4 { .box-4 {
margin-top: vh(120); margin-top: vh(120);
width: vw(790); width: vw(710);
height: vh(950); height: vh(950);
padding: vw(8); padding: vw(8);
box-sizing: border-box; box-sizing: border-box;

0
src/views/home/components/box-5.vue
View File

2
src/views/home/components/jam.vue
View File

@@ -103,7 +103,7 @@
}, },
label: { label: {
show: true, show: true,
offset: [10, -13], offset: [10, -10],
color: '#D3E5FF', color: '#D3E5FF',
fontWeight: 500, fontWeight: 500,
position: 'left', position: 'left',

14
src/views/home/components/ticket.vue
View File

@@ -42,12 +42,8 @@
} }
}, },
legend: { legend: {
orient: 'vertical', x: 'center',
x: 'right', y: 'bottom',
y: 'center',
// textStyle: {
// color: '#4A9AE4'
// },
data: qxzbData, data: qxzbData,
itemHeight: fitChartSize(8), itemHeight: fitChartSize(8),
itemWidth: fitChartSize(8), itemWidth: fitChartSize(8),
@@ -75,7 +71,7 @@
type: 'pie', type: 'pie',
clockWise: false, //顺时加载 clockWise: false, //顺时加载
radius: ['15%', '25%'], radius: ['15%', '25%'],
center: ['30%', '50%'], center: ['50%', '40%'],
label: { label: {
normal: { normal: {
show: false show: false
@@ -109,7 +105,7 @@
type: 'pie', type: 'pie',
clockWise: false, //顺时加载 clockWise: false, //顺时加载
radius: ['30%', '40%'], radius: ['30%', '40%'],
center: ['30%', '50%'], center: ['50%', '40%'],
label: { label: {
normal: { normal: {
show: false show: false
@@ -143,7 +139,7 @@
type: 'pie', type: 'pie',
clockWise: false, //顺时加载 clockWise: false, //顺时加载
radius: ['45%', '55%'], radius: ['45%', '55%'],
center: ['30%', '50%'], center: ['50%', '40%'],
label: { label: {
normal: { normal: {
show: false show: false

6
src/views/home/index.vue
View File

@@ -11,7 +11,11 @@
import box2 from './components/box-2.vue' import box2 from './components/box-2.vue'
import box3 from './components/box-3.vue' import box3 from './components/box-3.vue'
import box4 from './components/box-4.vue' import box4 from './components/box-4.vue'
const navLeft = [{ name: '安全' }, { name: '景区', path: '/scenic' }, { name: '交通' }] const navLeft = [
{ name: '安全', path: '/monitor' },
{ name: '景区', path: '/scenic' },
{ name: '交通' }
]
const navRight = [ const navRight = [
{ name: '停车' }, { name: '停车' },
{ name: '工单' }, { name: '工单' },

2
src/views/scenic/index.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<Header :current="current" :nav-left="navLeft" @on-change="onChange" /> <Header is-back :current="current" :nav-left="navLeft" @on-change="onChange" />
<CoreVideo /> <CoreVideo />
<box1 /> <box1 />
<box2 /> <box2 />

11
src/views/sentiment/components/box1.vue
View File

@@ -1,11 +0,0 @@
<template>
<div class="container"> </div>
</template>
<script setup></script>
<style scoped lang="scss">
.container {
margin: vh(120) vw(10) 0 vw(10);
}
</style>

105
src/views/sentiment/components/dataSource.vue Normal file
View File

@@ -0,0 +1,105 @@
<template>
<div class="table">
<div class="header">
<p>排名</p>
<p>媒体/账号名称</p>
<p>媒体类型</p>
<p>总条数</p>
<p>敏感舆情</p>
</div>
<div class="list">
<div class="cell" v-for="(item, index) in 10" :key="index">
<p><span class="index">排名</span></p>
<p><span class="name">手机新浪网</span></p>
<p><span class="name">新闻</span></p>
<p><span class="number">580</span></p>
<p><span class="status">1000</span></p>
</div>
</div>
</div>
</template>
<script setup></script>
<style scoped lang="scss">
.table {
padding: 0 vw(20);
.header {
display: flex;
font-weight: 400;
font-size: vw(13);
color: #0084ff;
height: vh(40);
display: flex;
align-items: center;
background: rgba(3, 78, 153, 0.3);
& > p {
flex: 1;
text-align: center;
}
}
.list {
overflow-y: auto;
height: vh(370);
/* 滚动条整体样式 */
&::-webkit-scrollbar {
width: vw(4); /* 滚动条的宽度 */
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
background: 'transparent'; /* 轨道的背景色 */
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
border-radius: 5px; /* 滑块的圆角 */
}
// /* 当鼠标悬停在滚动条上时滑块的样式 */
// &::-webkit-scrollbar-thumb:hover {
// background: #555; /* 滑块的背景色 */
// }
.cell {
height: vh(40);
display: flex;
align-items: center;
&:nth-child(2n) {
background: rgba(3, 78, 153, 0.3);
}
& > p {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.index {
display: inline-block;
width: vw(40);
height: vh(24);
font-weight: 400;
font-size: vw(12);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
border-radius: vw(2);
background-color: #495c77;
}
.name {
font-weight: 400;
font-size: vw(15);
color: #ffffff;
}
.number {
font-weight: 400;
font-size: vw(15);
color: #02f9fa;
}
.status {
font-weight: 400;
font-size: vw(15);
color: #e21b1b;
}
}
}
}
</style>

64
src/views/sentiment/components/emotion.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<div class="emotion" id="emotion" />
</template>
<script setup>
import * as echarts from 'echarts'
import { fitChartSize } from '@/utils/dataUtil'
let emotionChart = null
const initChart = () => {
const dom = document.getElementById('emotion')
emotionChart = echarts.init(dom)
emotionChart.setOption({
legend: {
top: 'top',
itemWidth: fitChartSize(30),
itemHeight: fitChartSize(30),
textStyle: {
fontSize: fitChartSize(14),
color: '#fff'
}
},
series: [
{
name: 'Nightingale Chart',
type: 'pie',
radius: ['10%', '70%'],
center: ['50%', '56%'],
roseType: 'area',
itemStyle: {
borderRadius: fitChartSize(10)
},
data: [
{ value: 40, name: 'rose 1' },
{ value: 38, name: 'rose 2' },
{ value: 32, name: 'rose 3' },
{ value: 30, name: 'rose 4' },
{ value: 28, name: 'rose 5' },
{ value: 26, name: 'rose 6' },
{ value: 22, name: 'rose 7' },
{ value: 18, name: 'rose 8' }
]
}
]
})
}
const resize = () => {
if (emotionChart) {
emotionChart.dispose()
emotionChart = null
initChart()
}
}
onMounted(() => {
initChart()
window.addEventListener('resize', resize)
})
</script>
<style scoped lang="scss">
.emotion {
width: vw(740);
height: vh(400);
}
</style>

120
src/views/sentiment/components/wordCloud.vue Normal file
View File

@@ -0,0 +1,120 @@
<template>
<div class="wordCloud" id="wordCloud" />
</template>
<script setup>
import * as echarts from 'echarts'
import 'echarts-wordcloud'
import { fitChartSize } from '@/utils/dataUtil'
let wordChart = null
const initChart = () => {
const dom = document.getElementById('wordCloud')
wordChart = echarts.init(dom)
wordChart.setOption({
//你的代码
series: [
{
type: 'wordCloud',
// 网格大小，各项之间间距
gridSize: fitChartSize(50),
// 形状 circle 圆，cardioid 心， diamond 菱形，
// triangle-forward 、triangle 三角，star五角星
shape: 'circle',
// 字体大小范围
sizeRange: [fitChartSize(14), fitChartSize(36)],
// 文字旋转角度范围
rotationRange: [0, 0],
// 旋转步值
rotationStep: 90,
// 自定义图形
// maskImage: maskImage,
left: 'center',
top: 'center',
// 画布宽
width: '100%',
// 画布高
height: '100%',
// 是否渲染超出画布的文字
drawOutOfBound: false,
textStyle: {
color: function () {
const colors = ['#165DFF', '#6aca37', '#05a4b6', '#f93920', '#f0b114']
return colors[parseInt(Math.random() * colors.length)]
},
padding: fitChartSize(10),
backgroundColor: 'rgba(0,255,255,.2)'
},
data: [
{
value: 2,
name: '体外循环'
},
{
value: 1,
name: '偏好现金'
},
{
value: 7.75434839431,
name: '新成立公司'
},
{
value: 11.3865516372,
name: '相同董监高'
},
{
value: 7.75434839431,
name: '司法风险'
},
{
value: 5.83541244308,
name: '小微企业'
},
{
value: 15.83541244308,
name: '同名称交易'
},
{
value: 2.83541244308,
name: '高频交易'
},
{
value: 5.83541244308,
name: '大额交易'
},
{
value: 10.83541244308,
name: '贸易公司'
},
{
value: 5.83541244308,
name: '票据偏好'
},
{
value: 5.83541244308,
name: '空转走单'
}
]
}
]
})
}
const resize = () => {
if (wordChart) {
wordChart.dispose()
wordChart = null
initChart()
}
}
onMounted(() => {
initChart()
window.addEventListener('resize', resize)
})
</script>
<style scoped lang="scss">
.wordCloud {
width: vw(760);
height: vh(420);
}
</style>

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

@@ -1,40 +1,104 @@
<template> <template>
<Header title="舆情检测" /> <Header title="舆情检测" is-back />
<CoreVideo /> <CoreVideo />
<div class="container"> <div class="container">
<div class="flex"> <div class="flex">
<div class="box-1 mr-10"> <div class="box-1 mr-10">
<Title1 title="最新舆情" /> <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>
<div class="box-2 mr-10"> <div class="box-2 mr-10">
<div class="flex justify-center"> <div class="flex justify-center">
<div class="flex"> <div class="top flex justify-evenly">
<count-item label="今日预警" :count="35600" suffix="条" /> <count-item label="今日舆情总数" :count="35600" suffix="条" color="#fff" />
<count-item label="今日预警" :count="35600" suffix="条" /> <count-item label="今日正面舆情" :count="35600" suffix="条" color="#fff" />
<count-item label="今日预警" :count="35600" suffix="条" /> <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>
</div> </div>
<div class="box-1"> <div class="box-1">
<Title1 title="数据来源分析" /> <Title1 title="数据来源分析" />
<data-source />
</div> </div>
</div> </div>
<div class="flex mt-10"> <div class="flex mt-10">
<div class="box-2 mr-10"> <div class="box-2 mr-10">
<Title1 title="舆情指数" /> <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>
<div class="box-1 mr-10"> <div class="box-1 mr-10">
<Title1 title="情感分布" /> <Title1 title="情感分布" />
<emotion />
</div> </div>
<div class="box-1 mr-10"> <div class="box-1 mr-10">
<Title1 title="词频分析" /> <Title1 title="词频分析" />
<word-cloud />
</div> </div>
</div> </div>
</div> </div>
<Correspondence /> <Correspondence />
</template> </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"> <style scoped lang="scss">
.container { .container {
@@ -43,6 +107,10 @@
.bg { .bg {
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%); background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
} }
.top {
width: vw(600);
margin-top: vh(35);
}
.box-1 { .box-1 {
width: vw(770); width: vw(770);
height: vh(470); height: vh(470);
@@ -53,5 +121,73 @@
height: vh(470); height: vh(470);
@extend .bg; @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> </style>

BIN
t.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB