修改
This commit is contained in:
qumeng039@126.com
parent
eb19dd0eb4
commit
08ad8b078f
BIN
src/assets/images/head/anchor-topic-title.png
Normal file
BIN
src/assets/images/head/anchor-topic-title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
src/assets/images/icon/activity-warning.png
Normal file
BIN
src/assets/images/icon/activity-warning.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
src/assets/images/icon/high-warning.png
Normal file
BIN
src/assets/images/icon/high-warning.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/images/icon/monitor-anchor.png
Normal file
BIN
src/assets/images/icon/monitor-anchor.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/assets/images/icon/search-icon.png
Normal file
BIN
src/assets/images/icon/search-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/assets/images/icon/statistics-anchor-number.png
Normal file
BIN
src/assets/images/icon/statistics-anchor-number.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -20,6 +20,24 @@ import shenhaiImg from "@/assets/user/shenhai.png";
|
|||
import haijingImg from "@/assets/user/haijing.png";
|
||||
import luxianImg from "@/assets/user/luxian.png";
|
||||
|
||||
import statisticsAnchorNumber from "@/assets/images/icon/statistics-anchor-number.png";
|
||||
import monitorAnchor from "@/assets/images/icon/monitor-anchor.png";
|
||||
import activityWarning from "@/assets/images/icon/activity-warning.png";
|
||||
import highWarning from "@/assets/images/icon/high-warning.png";
|
||||
|
||||
import main1Img from "@/assets/images/mess/main1.png";
|
||||
import main2Img from "@/assets/images/mess/main2.png";
|
||||
import main3Img from "@/assets/images/mess/main3.png";
|
||||
import main4Img from "@/assets/images/mess/main4.png";
|
||||
import main5Img from "@/assets/images/mess/main5.png";
|
||||
import rank1Img from "@/assets/images/logo/ruank1.png";
|
||||
import rank2Img from "@/assets/images/logo/ruank2.png";
|
||||
import rank3Img from "@/assets/images/logo/ruank3.png";
|
||||
import rank4Img from "@/assets/images/logo/ruank4.png";
|
||||
import rank5Img from "@/assets/images/logo/ruank5.png";
|
||||
import high3Img from "@/assets/images/logo/high3.png";
|
||||
import high2Img from "@/assets/images/logo/high2.png";
|
||||
import high1Img from "@/assets/images/logo/high1.png";
|
||||
export const useKeyNodeRecognitionStore = defineStore("keyNodeRecognition", {
|
||||
state: () => ({
|
||||
mediaData: [
|
||||
|
|
@ -330,7 +348,231 @@ export const useKeyNodeRecognitionStore = defineStore("keyNodeRecognition", {
|
|||
{ name: "原发行为", value: 100, itemStyle: { color: "#56d796" } }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
//统计列表
|
||||
statisticsList: [
|
||||
{
|
||||
id: 1,
|
||||
icon: statisticsAnchorNumber,
|
||||
name: "锚点数量",
|
||||
number: 50
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: monitorAnchor,
|
||||
name: "已监控锚点",
|
||||
number: 35
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: activityWarning,
|
||||
name: "活跃预警事件",
|
||||
number: 12
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: highWarning,
|
||||
name: "高风险事件",
|
||||
number: 1
|
||||
}
|
||||
],
|
||||
|
||||
//根据时间切换不同的子数组
|
||||
tooltipList: [
|
||||
[
|
||||
{
|
||||
id: "01-1",
|
||||
title: "#中国海警首次登检菲律宾运补船只#",
|
||||
comenter: "诗林一鬼16",
|
||||
switcher: "四泉-先生-郭辉",
|
||||
earler: "玉渊谭天",
|
||||
keyuser: "爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑",
|
||||
img: main1Img,
|
||||
imgdata: "@/assets/images/mess/1top.png",
|
||||
beforeimg: rank1Img,
|
||||
backimg: high3Img
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
id: "02-1",
|
||||
title: "#中国海警首次登检菲律宾运补船只#",
|
||||
comenter: "诗林一鬼16",
|
||||
switcher: "四泉-先生-郭辉",
|
||||
earler: "玉渊谭天",
|
||||
keyuser: "爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑",
|
||||
img: main1Img,
|
||||
imgdata: "src/assets/images/mess/1top.png",
|
||||
beforeimg: rank1Img,
|
||||
backimg: high3Img
|
||||
},
|
||||
{
|
||||
id: "03-2",
|
||||
title: "#中方回应菲称我海警挥舞刀具#",
|
||||
comenter: "黄龙检察",
|
||||
switcher: "枸杞菊花煮泡面",
|
||||
earler: "玉渊谭天",
|
||||
keyuser: "爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑",
|
||||
img: main2Img,
|
||||
imgdata: "src/assets/images/mess/2top.png",
|
||||
beforeimg: rank2Img,
|
||||
backimg: high3Img
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
id: "03-1",
|
||||
title: "#中国海警首次登检菲律宾运补船只#",
|
||||
comenter: "诗林一鬼16",
|
||||
switcher: "四泉-先生-郭辉",
|
||||
earler: "玉渊谭天",
|
||||
keyuser: "爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑",
|
||||
img: main1Img,
|
||||
imgdata: "src/assets/images/mess/1top.png",
|
||||
beforeimg: rank1Img,
|
||||
backimg: high3Img
|
||||
},
|
||||
{
|
||||
id: "03-2",
|
||||
title: "#中方回应菲称我海警挥舞刀具#",
|
||||
comenter: "黄龙检察",
|
||||
switcher: "枸杞菊花煮泡面",
|
||||
earler: "玉渊谭天",
|
||||
keyuser: "爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑",
|
||||
img: main2Img,
|
||||
imgdata: "src/assets/images/mess/2top.png",
|
||||
beforeimg: rank2Img,
|
||||
backimg: high3Img
|
||||
},
|
||||
{
|
||||
id: "03-3",
|
||||
title: "#中国海警夺回菲方盗窃赃物#",
|
||||
comenter: "入山花露水",
|
||||
switcher: "入山花露水",
|
||||
earler: "新浪军事",
|
||||
keyuser: "环球时报, 苍龙飞天79, 外贸发布BBS, 新浪军事, 空天砺剑",
|
||||
img: main3Img,
|
||||
imgdata: "src/assets/images/mess/3top.png",
|
||||
beforeimg: rank3Img,
|
||||
backimg: high3Img
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
id: "04-1",
|
||||
title: "#中国海警首次登检菲律宾运补船只#",
|
||||
comenter: "诗林一鬼16",
|
||||
switcher: "四泉-先生-郭辉",
|
||||
earler: "玉渊谭天",
|
||||
keyuser: "爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑",
|
||||
img: main1Img,
|
||||
imgdata: "src/assets/images/mess/1top.png",
|
||||
beforeimg: rank1Img,
|
||||
backimg: high2Img
|
||||
},
|
||||
{
|
||||
id: "04-2",
|
||||
title: "#中方回应菲称我海警挥舞刀具#",
|
||||
comenter: "黄龙检察",
|
||||
switcher: "枸杞菊花煮泡面",
|
||||
earler: "玉渊谭天",
|
||||
keyuser: "爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑",
|
||||
img: main2Img,
|
||||
imgdata: "src/assets/images/mess/2top.png",
|
||||
beforeimg: rank2Img,
|
||||
backimg: high3Img
|
||||
},
|
||||
{
|
||||
id: "04-3",
|
||||
title: "#中国海警夺回菲方盗窃赃物#",
|
||||
comenter: "入山花露水",
|
||||
switcher: "入山花露水",
|
||||
earler: "新浪军事",
|
||||
keyuser: "环球时报, 苍龙飞天79, 外贸发布BBS, 新浪军事, 空天砺剑",
|
||||
img: main3Img,
|
||||
imgdata: "src/assets/images/mess/3top.png",
|
||||
beforeimg: rank3Img,
|
||||
backimg: high3Img
|
||||
},
|
||||
{
|
||||
id: "04-4",
|
||||
title: "#菲自曝被中国海警缴枪的是顶级特种部队#",
|
||||
comenter: "端木舒林",
|
||||
switcher: "杨毅妻儿",
|
||||
earler: "白俄罗斯大宽",
|
||||
keyuser:
|
||||
"盖世英雄玉椒龙, 肥_谍_gg, 钻石狗Boss, 外贸发布BBS, 新浪军事, 钱局长本人, 地瓜熊老六,唐宁20150903,空天砺剑",
|
||||
img: main4Img,
|
||||
imgdata: "src/assets/images/mess/4top.png",
|
||||
beforeimg: rank4Img,
|
||||
backimg: high3Img
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
id: "05-1",
|
||||
title: "#中国海警首次登检菲律宾运补船只#",
|
||||
comenter: "诗林一鬼16",
|
||||
switcher: "四泉-先生-郭辉",
|
||||
earler: "玉渊谭天",
|
||||
keyuser: "爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑",
|
||||
img: main1Img,
|
||||
imgdata: "src/assets/images/mess/1top.png",
|
||||
beforeimg: rank1Img,
|
||||
backimg: high1Img
|
||||
},
|
||||
{
|
||||
id: "05-2",
|
||||
title: "#中方回应菲称我海警挥舞刀具#",
|
||||
comenter: "黄龙检察",
|
||||
switcher: "枸杞菊花煮泡面",
|
||||
earler: "白俄罗斯大宽",
|
||||
keyuser: "苍龙飞天79,平安泸县,新浪军事",
|
||||
img: main2Img,
|
||||
imgdata: "src/assets/images/mess/2top.png",
|
||||
beforeimg: rank2Img,
|
||||
backimg: high2Img
|
||||
},
|
||||
{
|
||||
id: "05-3",
|
||||
title: "#中国海警夺回菲方盗窃赃物#",
|
||||
comenter: "入山花露水",
|
||||
switcher: "入山花露水",
|
||||
earler: "新浪军事",
|
||||
keyuser: "环球时报, 苍龙飞天79, 外贸发布BBS, 新浪军事, 空天砺剑",
|
||||
img: main3Img,
|
||||
imgdata: "src/assets/images/mess/3top.png",
|
||||
beforeimg: rank3Img,
|
||||
backimg: high3Img
|
||||
},
|
||||
{
|
||||
id: "05-4",
|
||||
title: "#菲自曝被中国海警缴枪的是顶级特种部队#",
|
||||
comenter: "端木舒林",
|
||||
switcher: "杨毅妻儿",
|
||||
earler: "白俄罗斯大宽",
|
||||
keyuser:
|
||||
"盖世英雄玉椒龙, 肥_谍_gg, 钻石狗Boss, 外贸发布BBS, 新浪军事, 钱局长本人, 地瓜熊老六,唐宁20150903,空天砺剑",
|
||||
img: main4Img,
|
||||
imgdata: "src/assets/images/mess/4top.png",
|
||||
beforeimg: rank4Img,
|
||||
backimg: high3Img
|
||||
},
|
||||
{
|
||||
id: "05-5",
|
||||
title: "#菲律宾希望与中国就南海问题进行对话#",
|
||||
comenter: "美雨_12",
|
||||
switcher: "彼岸星光德尔塔",
|
||||
earler: "今日俄罗斯RT",
|
||||
keyuser: "新浪军事",
|
||||
img: main5Img,
|
||||
imgdata: "src/assets/images/mess/5top.png",
|
||||
beforeimg: rank5Img,
|
||||
backimg: high3Img
|
||||
}
|
||||
]
|
||||
]
|
||||
}),
|
||||
actions: {},
|
||||
persist: true // 开启持久化
|
||||
|
|
|
|||
|
|
@ -1,12 +1,81 @@
|
|||
<template>
|
||||
<div class="anchorStatistics-component">3</div>
|
||||
<div class="anchorStatistics-component">
|
||||
<div class="statistics-list">
|
||||
<div class="statistic-item" v-for="item in statisticsList" :key="item.id">
|
||||
<img :src="item.icon" alt="" class="anchor-icon" />
|
||||
<div class="anchor-number">{{ item.number }}</div>
|
||||
<div class="anchor-explain">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
<script setup>
|
||||
import { defineProps } from "vue";
|
||||
const props = defineProps({
|
||||
statisticsList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.anchorStatistics-component {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #95ceff;
|
||||
background: linear-gradient(270deg, rgba(0, 63, 125, 0.24) 0%, rgba(93, 185, 255, 0.12) 100%);
|
||||
backdrop-filter: blur(8px);
|
||||
.statistics-list {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
.statistic-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
&:not(:last-child)::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 25%; // 距离顶部百分比，可微调
|
||||
height: 60%; // 竖线长度百分比，可微调
|
||||
width: 1px;
|
||||
background: rgba(149, 206, 255, 0.3);
|
||||
z-index: 1;
|
||||
}
|
||||
.anchor-icon {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
}
|
||||
.anchor-number {
|
||||
color: #00e5ff;
|
||||
text-align: center;
|
||||
text-shadow: 0px 3px 1px rgba(0, 0, 0, 0.47);
|
||||
font-family: PangMenZhengDao;
|
||||
font-size: 30px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
.anchor-explain {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-shadow:
|
||||
0px 4px 18px rgba(33, 117, 255, 0.45),
|
||||
4px 4px 8px rgba(0, 90, 255, 0.56);
|
||||
font-family: OPPOSans;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,264 @@
|
|||
<template>
|
||||
<div class="attentionTopic-component">4</div>
|
||||
<div class="attentionTopic-component">
|
||||
<img src="@/assets/images/head/anchor-topic-title.png" alt="" class="headerImage" />
|
||||
<div class="attentionTopic-content">
|
||||
<div class="topic-list">
|
||||
<div class="topic-item" v-for="item in currentTopicList" :key="item.id">
|
||||
<div class="topic-item-content">
|
||||
<div class="item-content-left-box">
|
||||
<img :src="item.beforeimg" alt="" class="before-img" />
|
||||
<div class="topic-content">{{ item.title }}</div>
|
||||
</div>
|
||||
<img :src="item.backimg" alt="" class="topic-state" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="topicChart" class="topic-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
<script setup>
|
||||
import { defineProps, ref, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
const props = defineProps({
|
||||
topicList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
const currentTopicList = ref([]);
|
||||
let myChart = null;
|
||||
const initTopicChart = () => {
|
||||
const chartDom = document.getElementById("topicChart");
|
||||
if (!chartDom) return;
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
const option = {
|
||||
animationDuration: 60000, // 动画持续时间，单位ms
|
||||
animationEasing: "cubicInOut",
|
||||
title: {},
|
||||
tooltip: {
|
||||
trigger: "axis"
|
||||
},
|
||||
legend: {
|
||||
data: ["活跃预警事件", "高风险事件"],
|
||||
textStyle: {
|
||||
fontSize: 14, // 字体大小
|
||||
fontWeight: "bold", // 字体粗细(normal/bold/bolder/lighter/100-900)
|
||||
color: "#E1F4FF", // 字体颜色
|
||||
fontFamily: "微软雅黑, Arial, sans-serif", // 字体族
|
||||
fontWeight: 200,
|
||||
fontStyle: "normal" // 字体风格(normal/italic/oblique)
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: "5%",
|
||||
top: "30%", // 距离容器顶部
|
||||
bottom: "1%",
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
boundaryGap: true, //坐标轴两边留白
|
||||
data: ["6.29", "6.30", "7-1", "7-2", "7-3", "7-4", "7-5"],
|
||||
name: "日期",
|
||||
nameGap: 20,
|
||||
nameTextStyle: {
|
||||
color: "#606266",
|
||||
fontSize: 12
|
||||
},
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置。
|
||||
interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
|
||||
// margin:15,
|
||||
textStyle: {
|
||||
color: "#a8aab0",
|
||||
fontStyle: "normal",
|
||||
fontFamily: "微软雅黑",
|
||||
fontSize: 12
|
||||
},
|
||||
formatter: function (params) {
|
||||
var newParamsName = "";
|
||||
var paramsNameNumber = params.length;
|
||||
var provideNumber = 4; //一行显示几个字
|
||||
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
|
||||
if (paramsNameNumber > provideNumber) {
|
||||
for (var p = 0; p < rowNumber; p++) {
|
||||
var tempStr = "";
|
||||
var start = p * provideNumber;
|
||||
var end = start + provideNumber;
|
||||
if (p == rowNumber - 1) {
|
||||
tempStr = params.substring(start, paramsNameNumber);
|
||||
} else {
|
||||
tempStr = params.substring(start, end) + "\n";
|
||||
}
|
||||
newParamsName += tempStr;
|
||||
}
|
||||
} else {
|
||||
newParamsName = params;
|
||||
}
|
||||
return newParamsName;
|
||||
}
|
||||
//rotate:50,
|
||||
},
|
||||
axisTick: {
|
||||
//坐标轴刻度相关设置。
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
//坐标轴轴线相关设置
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
//坐标轴在 grid 区域中的分隔线。
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(229, 233, 237, 0.3)", // 半透明浅灰色
|
||||
type: "dashed", // 虚线样式
|
||||
width: 1, // 线条宽度
|
||||
opacity: 0.7 // 线条透明度
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
splitNumber: 5,
|
||||
name: "事件数量",
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#a8aab0",
|
||||
fontStyle: "normal",
|
||||
fontFamily: "微软雅黑",
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(229, 233, 237, 0.3)", // 半透明浅灰色
|
||||
type: "dashed", // 虚线样式
|
||||
width: 1, // 线条宽度
|
||||
opacity: 0.7 // 线条透明度
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "活跃预警事件",
|
||||
type: "line",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#3A84FF",
|
||||
lineStyle: {
|
||||
color: "#3A84FF",
|
||||
width: 1
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(58,132,255,0)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(58,132,255,0.35)"
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [0, 1, 2, 3, 4, 5, 5]
|
||||
},
|
||||
{
|
||||
name: "高风险事件",
|
||||
type: "line",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(255,80,124,1)",
|
||||
lineStyle: {
|
||||
color: "rgba(255,80,124,1)",
|
||||
width: 1
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(255,80,124,0)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(255,80,124,0.35)"
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [0, 0, 0, 0, 1, 2, 2]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
};
|
||||
onMounted(() => {
|
||||
initTopicChart();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.attentionTopic-component {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.attentionTopic-content {
|
||||
padding: 10px 20px;
|
||||
color: #fff;
|
||||
.topic-list {
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
overflow: auto;
|
||||
-ms-overflow-style: none; /* IE 和 Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
.topic-item {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
border-bottom: 1px solid #0071bc;
|
||||
padding: 10px 0px;
|
||||
.topic-item-content {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.item-content-left-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #182441;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.topic-content {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.topic-chart {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
<template>
|
||||
<div class="search-component"></div>
|
||||
<div class="search-component">
|
||||
<input type="text" class="search-input" placeholder="南海争端系列舆情事件" />
|
||||
<img src="@/assets/images/icon/search-icon.png" alt="" class="search-icon" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
|
|
@ -8,5 +11,36 @@
|
|||
.search-component {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.search-input {
|
||||
border: none;
|
||||
outline: none;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
width: 50%;
|
||||
height: 90%;
|
||||
border-radius: 58px;
|
||||
border: 1px solid #214a8e;
|
||||
background: linear-gradient(0deg, #051634 0%, #081d40 51.78%, #04285c 100%);
|
||||
text-indent: 1em;
|
||||
color: #fff;
|
||||
|
||||
&::placeholder {
|
||||
color: #fff; // 你想要的颜色
|
||||
opacity: 0.8; // 保证颜色不透明
|
||||
}
|
||||
}
|
||||
.search-icon {
|
||||
margin-left: -50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -59,6 +59,21 @@ const updateChart = () => {
|
|||
const chartData = KeyNodeOneStore.chartData[currentTabType.value][currentChartTabType.value];
|
||||
// 设置图表数据
|
||||
categoryChart.setOption({
|
||||
graphic: [
|
||||
{
|
||||
type: "text",
|
||||
left: "16.5%", // 与 center 保持一致
|
||||
top: "35.5%",
|
||||
style: {
|
||||
text: currentChartTabType.value.slice(0, 2) + "\n" + currentChartTabType.value.slice(2), // 每个字一行 // 例如“注册时间”或“行为模式”
|
||||
fill: "#fff",
|
||||
fontSize: 12,
|
||||
textAlign: "center",
|
||||
textVerticalAlign: "middle",
|
||||
lineHeight: 18
|
||||
}
|
||||
}
|
||||
],
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{a} <br/>{b}: {c}% ({d}%)"
|
||||
|
|
@ -66,7 +81,7 @@ const updateChart = () => {
|
|||
legend: {
|
||||
orient: "vertical", // 垂直排列
|
||||
top: "center", // 垂直居中
|
||||
left: "right", // 定位到左侧
|
||||
left: "160", // 定位到左侧
|
||||
right: 100, // 向右移动留出详细信息空间
|
||||
itemGap: 10,
|
||||
textStyle: { color: "#fff", width: 120 }, // 固定文本宽度
|
||||
|
|
@ -91,7 +106,7 @@ const updateChart = () => {
|
|||
{
|
||||
name: currentTabType.value === "注册时间" ? "注册时间分布" : "行为模式分布",
|
||||
type: "pie",
|
||||
radius: ["40%", "50%"],
|
||||
radius: ["85%", "70%"],
|
||||
center: ["20%", "50%"],
|
||||
padAngle: 5,
|
||||
avoidLabelOverlap: false,
|
||||
|
|
@ -120,7 +135,7 @@ const updateChart = () => {
|
|||
{
|
||||
name: currentTabType.value === "注册时间" ? "注册时间分布" : "行为模式分布",
|
||||
type: "pie",
|
||||
radius: ["20%", "30%"],
|
||||
radius: ["45%", "60%"],
|
||||
center: ["20%", "50%"],
|
||||
padAngle: 10,
|
||||
avoidLabelOverlap: false,
|
||||
|
|
|
|||
|
|
@ -85,8 +85,8 @@ const swichToTabs = (item) => {
|
|||
}
|
||||
.tabs-list {
|
||||
width: 100%;
|
||||
height: 370px;
|
||||
margin-top: 20px;
|
||||
height: 380px;
|
||||
margin-top: 10px;
|
||||
|
||||
overflow: auto;
|
||||
-ms-overflow-style: none; /* IE 和 Edge */
|
||||
|
|
@ -114,7 +114,7 @@ const swichToTabs = (item) => {
|
|||
|
||||
.username {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
font-family: "微软雅黑";
|
||||
}
|
||||
.userState {
|
||||
|
|
|
|||
|
|
@ -26,12 +26,12 @@
|
|||
<AnchorGraph></AnchorGraph>
|
||||
</div>
|
||||
<div class="anchorGrap-statistics">
|
||||
<AnchorStatistics></AnchorStatistics>
|
||||
<AnchorStatistics :statisticsList="KeyNodeOneStore.statisticsList"></AnchorStatistics>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-container">
|
||||
<div class="attention-topic">
|
||||
<AttentionTopic></AttentionTopic>
|
||||
<AttentionTopic :topicList="KeyNodeOneStore.tooltipList"></AttentionTopic>
|
||||
</div>
|
||||
<div class="monitoring-situation">
|
||||
<Monitoring></Monitoring>
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
import { computed, ref } from "vue";
|
||||
import UserPanel from "./components/userPanel.vue";
|
||||
import UserChart from "./components/userChart.vue";
|
||||
import Search from "./components/search.vue";
|
||||
|
|
@ -92,7 +92,7 @@ const handleSwitchChartTab = (tabName) => {
|
|||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
.left-container {
|
||||
width: 350px;
|
||||
width: 370px;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
|
|
@ -111,36 +111,33 @@ const handleSwitchChartTab = (tabName) => {
|
|||
|
||||
.middle-container {
|
||||
flex: 1;
|
||||
background-color: cadetblue;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.search {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background-color: brown;
|
||||
}
|
||||
.anchorGraph {
|
||||
width: 100%;
|
||||
height: 580px;
|
||||
background-color: red;
|
||||
}
|
||||
.anchorGrap-statistics {
|
||||
flex: 1;
|
||||
background-color: blueviolet;
|
||||
}
|
||||
}
|
||||
|
||||
.right-container {
|
||||
width: 350px;
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
background-color: skyblue;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
.attention-topic {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
background-color: bisque;
|
||||
background-color: #090f28;
|
||||
}
|
||||
.monitoring-situation {
|
||||
flex: 1;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user