Skip to content

R
risk-monitor
提交 590ea4f1 authored 作者: 张烨's avatar 张烨
浏览文件
操作

feat:政令详情增加政令关键词云和报告内容摘要板块

上级 7bc0a1ee
显示空白字符变更
内嵌 并排
正在显示 包含 123 行增加 和 97 行删除
src/App.vue
浏览文件 @ 590ea4f1
......@@ -251,7 +251,7 @@ body {
/* 可点击文本 鼠标悬浮样式 */
#app .text-click-hover:hover {
text-decoration: underline;
color: rgb(5, 95, 194);
color: var(--color-primary-100);
cursor: pointer;
}
/* #endregion 公共样式类名 */
......
src/views/decree/decreeHome/index.vue
浏览文件 @ 590ea4f1
......@@ -37,16 +37,17 @@
<TimeTabPane @time-click="handleTimeClick" />
</div>
<div class="home-main-header-item-box" v-if="govInsList.length">
<div class="item" v-for="(item, index) in govInsList.slice(0, 7)" :key="index" @click="handleToInstitution(item)">
<div class="organization-item" v-for="(item, index) in govInsList.slice(0, 7)" :key="index" @click="handleToInstitution(item)">
<div class="item-left">
<img :src="item.orgImage || DefaultIcon2" alt="" />
</div>
<div class="item-right one-line-ellipsis">{{ item.orgName }}</div>
<div class="item-num">{{ item.total }}项</div>
<div class="item-total">{{ item.total }}项</div>
<el-icon color="var(--color-primary-100)"><ArrowRightBold /></el-icon>
<div class="item-dot">+999</div>
</div>
<div class="item">
<div class="item-num item-more">查看全部机构 ({{govInsList.length+1}}家)</div>
<div class="organization-item">
<div class="item-more">查看全部机构 ({{govInsList.length+1}}家)</div>
<el-icon color="var(--color-primary-100)"><ArrowRightBold /></el-icon>
</div>
</div>
......@@ -1386,8 +1387,9 @@ onMounted(async () => {
display: flex;
flex-wrap: wrap;
gap: 16px;
font-family: Microsoft YaHei;
.item {
.organization-item {
width: 20%;
flex: auto;
height: 80px;
......@@ -1401,9 +1403,8 @@ onMounted(async () => {
align-items: center;
justify-content: center;
cursor: pointer;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
&:hover {
transform: translateY(-3px);
......@@ -1424,25 +1425,43 @@ onMounted(async () => {
width: 20px;
flex: auto;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 20px;
margin: 0 16px;
}
.item-num {
white-space: nowrap;
font-family: Microsoft YaHei;
.item-total {
font-size: 20px;
margin-right: 2px;
white-space: nowrap;
font-weight: 700;
line-height: 20px;
margin-right: 2px;
color: var(--color-primary-100);
}
.item-more {
font-size: 16px;
margin-right: 12px;
white-space: nowrap;
font-weight: 700;
line-height: 16px;
color: var(--color-primary-100);
}
.item-dot {
position: absolute;
right: -13px;
top: -10px;
padding: 0 8px;
height: 26px;
background-color: #FF4D4F;
color: white;
font-size: 16px;
line-height: 26px;
font-family: Source Han Sans CN;
border-radius: 14px;
letter-spacing: 1px;
}
}
}
......
src/views/decree/decreeLayout/overview/index.vue
浏览文件 @ 590ea4f1
......@@ -79,7 +79,7 @@ onMounted(() => {
.left {
position: absolute;
left: -160px;
top: 0px;
top: 25px;
width: 160px;
padding: 0px 16px;
}
......
src/views/decree/decreeLayout/overview/introduction/index.vue
浏览文件 @ 590ea4f1
......@@ -4,7 +4,7 @@
<WarnningPane :warnningLevel="riskInfo.riskLevel" :warnningContent="riskInfo.content" />
</div>
<div class="introduction-wrap">
<div class="left">
<div class="page-left">
<div class="box1">
<AnalysisBox title="基本信息" :showAllBtn="false">
<div class="box1-main">
......@@ -23,14 +23,10 @@
</div>
<div class="item">
<div class="item-left">{{ "英文全称：" }}</div>
<div class="item-right text" v-if="basicInfo.eName?.length < 60">
{{ basicInfo.eName }}
</div>
<div class="item-right text" v-if="basicInfo.eName?.length < 60"> {{ basicInfo.eName }} </div>
<el-popover v-else effect="dark" :width="500" :content="basicInfo.eName" placement="top-start">
<template #reference>
<div class="item-right text">
{{ basicInfo.eName }}
</div>
<div class="item-right text"> {{ basicInfo.eName }} </div>
</template>
</el-popover>
</div>
......@@ -66,7 +62,20 @@
</div>
</AnalysisBox>
</div>
<div class="box2">
<div>
<AnalysisBox title="报告内容摘要" :showAllBtn="false">
<el-empty v-if="false" style="margin: 20px 0;" description="暂无数据" :image-size="100" />
<div class="box5-main">
<div class="box5-back">
<div class="box5-top">
<div class="box5-image"></div>
</div>
<div class="box5-text text-align-justify">{{ box1Data }}</div>
</div>
</div>
</AnalysisBox>
</div>
<div>
<AnalysisBox title="相关事件" :showAllBtn="false">
<div class="box2-main">
<el-empty v-if="!relatedData.length" description="暂无数据" :image-size="100" />
......@@ -80,18 +89,21 @@
<span class="meta">{{ item.sjsj }} · {{ item.source }}</span>
</div>
<div class="content">{{ item.sjnr }}</div>
<!-- <el-popover effect="dark" :width="1000" :content="item.content" placement="top-start">
<template #reference>
<div class="content">{{ item.content }}</div>
</template>
</el-popover> -->
</div>
</div>
</div>
</AnalysisBox>
</div>
</div>
<div class="right">
<div class="page-right">
<div class="box4">
<AnalysisBox title="政令关键词云" :showAllBtn="false">
<div class="box4-main">
<el-empty v-if="false" description="暂无数据" :image-size="100" />
<WordCloudChart :data="wordCloudData" width="100%" height="100%" />
</div>
</AnalysisBox>
</div>
<div class="box3">
<AnalysisBox title="发布机构" :showAllBtn="false">
<div class="box3-top">
......@@ -151,6 +163,7 @@ import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import router from "@/router";
import WarnningPane from '@/components/base/WarningPane/index.vue'
import WordCloudChart from "@/components/base/WordCloundChart/index.vue"
import {
getDecreeBasicInfo,
getDecreeRiskSignal,
......@@ -216,6 +229,21 @@ const handleGetBasicInfo = async () => {
};
handleGetBasicInfo();
// 政令关键词云
const wordCloudData = ref([
{ name: "与马斯克公开冲突", value: 100 },
{ name: "传统能源", value: 5 },
{ name: "共和党财政鹰派", value: 77 },
{ name: "未实现赤字控制目标", value: 35 },
{ name: "得克萨斯州", value: 88 },
{ name: "选举压力", value: 57 },
{ name: "主张财政紧缩", value: 72 },
{ name: "财政保守", value: 18 },
])
// 报告内容摘要
const box1Data = ref(`包括经济竞争在内的美中竞争自2017年以来一直在定义美国外交政策。这两个经济体是世界上第一和第二大国家经济体,并且深深交织在一起。改变关系,无论多么必要,可能是昂贵的。因此,美国面临着一项挑战,确保其经济在耦合的战略竞争条件下满足国家的需求。为了应对这一挑战,兰德大学的研究人员对美中竞争进行了经济和制度分析,进行了参与式的远见练习,以了解确保美国经济健康的长期路径,并创建了两个经济竞争游戏,探索多个国家在相互交流的同时确保经济健康的动态...`);
// 相关事件
const relatedData = ref([]);
const handleGetRelateEvents = async () => {
......@@ -322,15 +350,15 @@ onMounted(() => {
width: 100%;
display: flex;
.left {
.page-left {
display: flex;
flex-direction: column;
flex: auto;
margin-right: 16px;
gap: 16px;
.box1 {
height: 414px;
.box1-main {
display: flex;
padding: 0 24px;
......@@ -427,18 +455,36 @@ onMounted(() => {
}
}
.box2 {
margin-top: 16px;
height: 420px;
.box5-main {
padding: 10px 22px 22px;
.box5-back {
border: solid 1px #E7F3FF;
.box5-top {
display: flex;
padding: 18px 20px;
background: linear-gradient(rgb(137, 193, 255, 0.1), rgb(255, 255, 255));
.box5-image {
width: 199px;
height: 32px;
font-size: 0px;
background-image: url('./assets/images/title-image.png');
background-size: 100% 100%;
cursor: pointer;
}
}
.box5-text {
padding: 0 20px 20px;
font-family: "Source Han Sans CN";
font-weight: 400;
font-size: 16px;
line-height: 30px;
min-height: 300px;
}
}
}
.box2-main {
margin-top: 3px;
margin-left: 31px;
height: 100%;
width: 1004px;
overflow: hidden;
overflow-y: auto;
padding: 0 22px;
.box2-item {
display: flex;
height: 60px;
......@@ -446,18 +492,16 @@ onMounted(() => {
margin-bottom: 2px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin-top: 10px;
.item-left {
width: 64px;
height: 48px;
border-radius: 2px;
font-size: 0px;
img {
width: 100%;
height: 100%;
}
}
.item-center {
flex: auto;
width: 20px;
......@@ -510,12 +554,10 @@ onMounted(() => {
}
}
}
.box2-footer {
margin: 20px 22px;
display: flex;
justify-content: space-between;
.box2-footer-left {
height: 20px;
color: rgba(132, 136, 142, 1);
......@@ -526,20 +568,26 @@ onMounted(() => {
}
}
}
}
.right {
.page-right {
display: flex;
flex-direction: column;
width: 520px;
flex: none;
gap: 16px;
.box3 {
width: 520px;
.box4 {
height: 414px;
.box4-main {
height: 100%;
}
}
.box3-top {
border-bottom: 1px solid rgba(234, 236, 238, 1);
padding: 0 22px;
.box3-top-top {
width: 473px;
height: 88px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
......@@ -549,40 +597,13 @@ onMounted(() => {
align-items: center;
margin: 0 auto;
position: relative;
padding: 0 16px;
cursor: pointer;
.more {
position: absolute;
right: 17px;
top: 17px;
display: flex;
gap: 3px;
.text {
height: 16px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 16px;
}
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
}
.left {
width: 64px;
height: 64px;
margin-left: 17px;
font-size: 0px;
img {
width: 100%;
height: 100%;
......@@ -590,9 +611,9 @@ onMounted(() => {
}
.right {
width: 370px;
width: 20px;
flex: auto;
margin-left: 15px;
.name {
height: 26px;
color: rgba(59, 65, 75, 1);
......@@ -601,7 +622,6 @@ onMounted(() => {
font-weight: 700;
line-height: 26px;
}
.ename {
margin-top: 6px;
height: 24px;
......@@ -613,9 +633,7 @@ onMounted(() => {
}
}
}
.box3-top-bottom {
width: 473px;
height: 193px;
margin: 0 auto;
......@@ -717,8 +735,8 @@ onMounted(() => {
}
}
}
.box3-bottom {
padding-right: 22px;
.box3-bottom-header {
height: 59px;
display: flex;
......@@ -748,11 +766,6 @@ onMounted(() => {
}
.box3-bottom-main {
width: 510px;
height: 440px;
overflow: hidden;
overflow-y: auto;
:deep(.el-timeline) {
padding: 8px 0px 0px 25px !important;
}
......@@ -780,12 +793,6 @@ onMounted(() => {
font-size: 14px;
font-weight: 400;
line-height: 26px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论