提交 3f5b529e authored 作者: yanpeng's avatar yanpeng

问题修改

上级 b8c93c36
......@@ -5,7 +5,7 @@
<img src="./image1.png" alt="" />
</div>
<div class="header-title">
<slot name='title'>{{ "社交媒体" }}</slot>
<slot name="title">{{ "社交媒体" }}</slot>
</div>
<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
</div>
......@@ -14,10 +14,12 @@
<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 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">
......@@ -49,11 +51,10 @@
</div> -->
</div>
</div>
</template>
<script setup>
import { computed } from 'vue';
import { computed } from "vue";
import avatarUser from "@/assets/images/avatar_user.png";
const emit = defineEmits(["click", "info-click"]);
......@@ -88,34 +89,32 @@ const props = defineProps({
},
content: {
type: String,
default:
"content"
default: "content"
}
});
const formattedTime = computed((index) => {
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 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');
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) => {
const handleClickPerson = item => {
emit("person-click", item);
};
const handleInfoClick = (item) => {
const handleInfoClick = item => {
emit("info-click", item);
};
const handleToMoreNews = (item) => {
const handleToMoreNews = item => {
emit("more-click", item);
};
</script>
......@@ -163,13 +162,13 @@ const handleToMoreNews = (item) => {
}
.more {
width: 45px;
width: 50px;
height: 24px;
position: absolute;
top: 12px;
right: 27px;
color: rgb(5, 95, 194);
font-family: 'Source Han Sans CN';
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 400;
line-height: 24px;
......@@ -208,16 +207,13 @@ const handleToMoreNews = (item) => {
}
.avatar-containerOne {
left: 2px;
top: 29px;
.avatar-imageOne {
width: 20px;
height: 20px;
}
}
.avatar-containerTwo {
......@@ -225,14 +221,11 @@ const handleToMoreNews = (item) => {
top: 29px;
.avatar-imageTwo {
width: 20px;
height: 20px;
}
}
.avatar {
width: 42px;
height: 42px;
......@@ -259,7 +252,6 @@ const handleToMoreNews = (item) => {
align-items: center;
margin-bottom: 5px;
.name {
color: rgb(59, 65, 75);
font-family: "Source Han Sans CN";
......@@ -289,7 +281,6 @@ const handleToMoreNews = (item) => {
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.triangle {
......@@ -307,7 +298,7 @@ const handleToMoreNews = (item) => {
/* 内层:原有颜色的三角形,覆盖在外层上面,模拟描边效果 */
.triangle::after {
content: '';
content: "";
position: absolute;
top: -8px;
/* 向上偏移1px,对齐中心 */
......@@ -319,31 +310,12 @@ const handleToMoreNews = (item) => {
border-bottom: 8px solid transparent;
border-right: 8px solid rgba(246, 250, 255, 1);
}
}
}
}
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.message-bubble {
......
......@@ -16,7 +16,9 @@
</div>
<div class="right">
<div class="right-top">
<div class="title"><span class="text-inner">{{ news[props.title] }}</span></div>
<div class="title">
<span class="text-inner">{{ news[props.title] }}</span>
</div>
<div class="time">{{ news[props.from] }}</div>
</div>
<div class="right-footer">{{ news[props.content] }}</div>
......@@ -29,7 +31,6 @@
<script setup>
import DefaultIconNews from "@/assets/icons/default-icon-news.png";
const props = defineProps({
// 新闻列表数据
newsList: {
type: Array,
......@@ -38,7 +39,7 @@ const props = defineProps({
img: {
type: String,
default: 'img'
default: "img"
},
title: {
type: String,
......@@ -51,15 +52,14 @@ const props = defineProps({
content: {
type: String,
default: "content"
},
}
});
const emit = defineEmits(['item-click', 'more-click']);
const emit = defineEmits(["item-click", "more-click"]);
const handleToMoreNews = () => {
emit('more-click')
emit("more-click");
};
const handleToNewsAnalysis = (item, index) => {
emit('item-click', item, index)
emit("item-click", item, index);
};
</script>
<style lang="scss" scoped>
......@@ -74,7 +74,6 @@ const handleToNewsAnalysis = (item, index) => {
gap: 0 !important;
overflow: hidden;
.box3-header {
height: 48px !important;
border-bottom: 1px solid rgba(234, 236, 238, 1) !important;
......@@ -105,7 +104,7 @@ const handleToNewsAnalysis = (item, index) => {
margin-left: 17px !important;
height: 26px !important;
color: var(--color-main-active) !important;
font-family: 'Source Han Sans CN' !important;
font-family: "Source Han Sans CN" !important;
font-size: 20px !important;
font-weight: 700 !important;
line-height: 26px !important;
......@@ -113,13 +112,13 @@ const handleToNewsAnalysis = (item, index) => {
}
.more {
width: 45px;
width: 50px;
height: 24px;
position: absolute;
top: 12px;
right: 27px;
color: rgba(20, 89, 187, 1);
font-family: 'Source Han Sans CN';
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 400;
line-height: 24px;
......@@ -149,7 +148,6 @@ const handleToNewsAnalysis = (item, index) => {
.right-top .text-inner {
border-bottom-color: rgb(5, 95, 194) !important;
}
}
......@@ -178,7 +176,7 @@ const handleToNewsAnalysis = (item, index) => {
width: 500px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: 'Source Han Sans CN';
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 700;
line-height: 24px;
......@@ -188,7 +186,6 @@ const handleToNewsAnalysis = (item, index) => {
.text-inner {
border-bottom: 1px solid transparent;
}
}
......@@ -198,7 +195,7 @@ const handleToNewsAnalysis = (item, index) => {
height: 22px;
margin-top: 14px;
color: rgba(95, 101, 108, 1);
font-family: 'Source Han Sans CN';
font-family: "Source Han Sans CN";
font-size: 14px;
font-weight: 400;
line-height: 22px;
......@@ -212,7 +209,7 @@ const handleToNewsAnalysis = (item, index) => {
width: 657px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: 'Source Han Sans CN';
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 400;
line-height: 24px;
......
......@@ -246,6 +246,7 @@
/>
<div class="chart-header">{{ "关键词云" }}</div>
<div class="box3Chart" id="box3Chart"></div>
<!-- <Echarts :option="usChinaSanctionTrendOptions" height="100%"></Echarts> -->
</div>
</div>
</div>
......@@ -259,6 +260,7 @@ import { onMounted, ref, computed, inject, watch, onUnmounted } from "vue";
import router from "@/router";
import setChart from "@/utils/setChart";
import getWordCloudChart from "./uitls/worldCloudChart";
import "echarts-wordcloud";
import {
getElementCount,
getNewDynamics,
......@@ -268,6 +270,7 @@ import {
getKeyWordDown,
getOrderInfo
} from "@/api/zmOverview/allElement";
import Echarts from "@/components/Chart/index.vue";
const activeDate = inject("activeDate");
......@@ -409,6 +412,7 @@ const handleGetBox2ChartData = async () => {
try {
const res = await getKeyWordUp(params);
console.log("关键词云-上", res);
console.log("关键词云-上 参数", params);
if (res.code === 200 && res.data) {
box2ChartData.value = res.data.map(item => {
return {
......@@ -422,6 +426,8 @@ const handleGetBox2ChartData = async () => {
const handleBox2Chart = async () => {
await handleGetBox2ChartData();
let box2Chart = getWordCloudChart(box2ChartData.value);
console.log("关键词云-上 options =>", box2Chart);
console.log("关键词云-上 box2ChartData =>", box2ChartData.value);
setChart(box2Chart, "box2Chart");
};
......@@ -504,6 +510,7 @@ const handleGetBox3ChartData = async () => {
const handleBox3Chart = async () => {
await handleGetBox3ChartData();
let box3Chart = getWordCloudChart(box3ChartData.value);
console.log("关键词云-下", box3Chart);
setChart(box3Chart, "box3Chart");
};
......
const getWordCloudChart = (data) => {
const getWordCloudChart = data => {
const option = {
grid: {
left: 0,
top: 0,
right: 0,
bottom: 0,
bottom: 0
},
series: [
{
type: "wordCloud",
width: '80%',
height: '80%',
shape: "rect", //
width: "80%",
height: "80%",
shape: "circle", //
// 其他形状你可以使用形状路径
// 或者自定义路径
// shape: 'circle' // 圆形(默认)
......@@ -31,6 +29,7 @@ const getWordCloudChart = (data) => {
drawOutOfBound: false, // 是否超出画布
// 字体
textStyle: {
fontweight: "bold",
// normal: {
// color: function () {
// return 'rgb(' + [
......@@ -47,22 +46,23 @@ const getWordCloudChart = (data) => {
"rgba(220, 190, 68, 1)",
"rgba(96, 58, 186, 1)",
"rgba(32, 121, 69, 1)",
"rgba(22, 119, 255, 1)",
"rgba(22, 119, 255, 1)"
];
return colors[parseInt(Math.random() * colors.length)];
},
emphasis: {
shadowBlur: 5,
shadowColor: "#333",
},
fontweight: "bold"
}
},
// 设置词云数据
data: data,
},
],
data: data
}
]
};
return option
}
return option;
};
export default getWordCloudChart
\ No newline at end of file
export default getWordCloudChart;
......@@ -112,13 +112,11 @@
<div class="box1-top-content">
<div class="box1-top-content-item">
<span class="box1-top-content-item-title">· 发布机构:</span>
<span class="box1-top-content-item-content">{{ item.postOrgName
}}</span>
<span class="box1-top-content-item-content">{{ item.postOrgName }}</span>
</div>
<div class="box1-top-content-item">
<span class="box1-top-content-item-title">· 生效日期:</span>
<span class="box1-top-content-item-content">{{ item.postDate
}}</span>
<span class="box1-top-content-item-content">{{ item.postDate }}</span>
</div>
<div class="box1-top-content-item">
<span class="box1-top-content-item-title">· 涉及领域:</span>
......@@ -356,8 +354,7 @@
<el-table-column label="重点领域" width="180">
<template #default="scope">
<div style="display: flex; align-items: center; gap: 5px">
<el-tag v-for="tag in scope.row.tags" :key="tag"
:type="getTagType(tag)">{{
<el-tag v-for="tag in scope.row.tags" :key="tag" :type="getTagType(tag)">{{
tag
}}</el-tag>
</div>
......@@ -373,23 +370,22 @@
<el-row :gutter="20" style="width: 1600px; margin: 0 auto; height: 505px; margin-top: 16px">
<el-col :span="8">
<custom-container title="制裁领域分布" :titleIcon="radarIcon" height="480px">
<custom-container title="实体领域分布" :titleIcon="radarIcon" height="480px">
<template #header-right>
<el-checkbox v-model="domainChecked" label="50%规则" size="large" />
</template>
<template #default>
<EChart :option="radarOption" autoresize :style="{ height: '450px' }" />
<EChart :option="radarOption" autoresize :style="{ height: '460px' }" />
</template>
</custom-container>
</el-col>
<el-col :span="16">
<custom-container title="制裁清单数量增长趋势" :titleIcon="qushiIcon" height="480px">
<custom-container title="实体清单数量增长趋势" :titleIcon="qushiIcon" height="480px">
<template #header-right>
<div style="display: flex; align-items: center; gap: 16px">
<el-checkbox v-model="trendChecked" label="50%规则" size="large" />
<el-select v-model="selectedEntityId" placeholder="请选择清单类型" style="width: 160px">
<el-option v-for="item in infoList" :key="item.id" :label="item.nameZh"
:value="item.id" />
<el-option v-for="item in infoList" :key="item.id" :label="item.nameZh" :value="item.id" />
</el-select>
</div>
</template>
......@@ -419,8 +415,7 @@
<template #default>
<div class="box4">
<div style="height: 90%; overflow-y: auto; padding-top: 10px">
<div class="box4-item" v-for="(item, idx) in sanctionProcessList"
:key="item.title">
<div class="box4-item" v-for="(item, idx) in sanctionProcessList" :key="item.title">
<div class="box4-item-left">
<el-image :src="dotIcon" alt="图片" class="box4-item-left-icon" />
<div
......@@ -502,8 +497,7 @@
)?.[0]
}}
</div>
<CommonPrompt :content="scope.row.name"
style="flex: 1; overflow: hidden" />
<CommonPrompt :content="scope.row.name" style="flex: 1; overflow: hidden" />
</div>
</template>
</el-table-column>
......@@ -511,8 +505,7 @@
<el-table-column prop="domains" label="涉及领域" min-width="150">
<template #default="scope">
<div class="domain-tags">
<el-tag v-for="tag in scope.row.domains" :key="tag"
:type="getTagType(tag)">{{
<el-tag v-for="tag in scope.row.domains" :key="tag" :type="getTagType(tag)">{{
tag
}}</el-tag>
</div>
......@@ -600,8 +593,7 @@
<div class="left-main">
<el-checkbox-group v-model="checkedTech">
<div class="checkbox-grid">
<el-checkbox v-for="item in techOptions" :key="item.value"
:label="item.value">{{
<el-checkbox v-for="item in techOptions" :key="item.value" :label="item.value">{{
item.label
}}</el-checkbox>
</div>
......@@ -634,12 +626,10 @@
</div>
<img :src="item.orgLogoUrl || comTitle" alt="" />
<div class="main">
<div class="main-title" @click="handleTitleClick(item)">{{ item.title }}
</div>
<div class="main-title" @click="handleTitleClick(item)">{{ item.title }}</div>
<div class="main-desc">{{ item.desc }}</div>
<div class="tag-box">
<div v-for="tag in item.tags" :key="tag" class="tag-item">{{ tag }}
</div>
<div v-for="tag in item.tags" :key="tag" class="tag-item">{{ tag }}</div>
</div>
<div :class="{ 'count-tag': item.countTag }">{{ item.countTag }}</div>
......@@ -1160,6 +1150,7 @@ const radarOption = ref({
confine: true
},
legend: {
show: false,
top: "0%",
icon: "circle",
itemWidth: 12,
......@@ -1175,9 +1166,13 @@ const radarOption = ref({
},
data: []
},
grid: {
top: "5%",
bottom: "5%"
},
radar: {
radius: "55%",
center: ["50%", "55%"],
radius: "60%",
center: ["50%", "50%"],
// shape: 'circle',
indicator: [],
axisName: {
......@@ -3522,6 +3517,7 @@ const handleMediaClick = item => {
margin-top: 21px;
height: 450px;
display: flex;
gap: 20px;
.center-center-news {
flex-shrink: 0;
......
......@@ -1001,12 +1001,39 @@ export const getMultipleBarChart_m = object => {
},
xAxis: {
type: "category",
data: names
data: names,
axisLabel: {
margin: 20
},
axisLabel: {
formatter: "{value} 年",
color: "rgba(95, 101, 108, 1)",
margin: 20
},
axisLine: {
lineStyle: {
color: "rgb(231, 243, 255)",
width: 1
}
},
axisTick: {
show: false
}
},
yAxis: {
type: "value",
splitNumber: 5,
alignTicks: false
alignTicks: false,
name: "个",
nameLocation: "end",
nameGap: 10,
nameTextStyle: {
color: "rgba(95, 101, 108, 1)",
fontSize: 14,
fontWeight: 400,
fontFamily: "Microsoft YaHei",
padding: [0, 0, 0, 0]
}
},
series: datas
};
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论