Skip to content

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

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

上级 7bc0a1ee
显示空白字符变更
内嵌 并排
正在显示 包含 123 行增加 和 97 行删除
src/App.vue
浏览文件 @ 590ea4f1
...@@ -251,7 +251,7 @@ body { ...@@ -251,7 +251,7 @@ body {
/* 可点击文本 鼠标悬浮样式 */ /* 可点击文本 鼠标悬浮样式 */
#app .text-click-hover:hover { #app .text-click-hover:hover {
text-decoration: underline; text-decoration: underline;
color: rgb(5, 95, 194); color: var(--color-primary-100);
cursor: pointer; cursor: pointer;
} }
/* #endregion 公共样式类名 */ /* #endregion 公共样式类名 */
......
src/views/decree/decreeHome/index.vue
浏览文件 @ 590ea4f1
...@@ -37,16 +37,17 @@ ...@@ -37,16 +37,17 @@
<TimeTabPane @time-click="handleTimeClick" /> <TimeTabPane @time-click="handleTimeClick" />
</div> </div>
<div class="home-main-header-item-box" v-if="govInsList.length"> <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"> <div class="item-left">
<img :src="item.orgImage || DefaultIcon2" alt="" /> <img :src="item.orgImage || DefaultIcon2" alt="" />
</div> </div>
<div class="item-right one-line-ellipsis">{{ item.orgName }}</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> <el-icon color="var(--color-primary-100)"><ArrowRightBold /></el-icon>
<div class="item-dot">+999</div>
</div> </div>
<div class="item"> <div class="organization-item">
<div class="item-num item-more">查看全部机构 ({{govInsList.length+1}}家)</div> <div class="item-more">查看全部机构 ({{govInsList.length+1}}家)</div>
<el-icon color="var(--color-primary-100)"><ArrowRightBold /></el-icon> <el-icon color="var(--color-primary-100)"><ArrowRightBold /></el-icon>
</div> </div>
</div> </div>
...@@ -1386,8 +1387,9 @@ onMounted(async () => { ...@@ -1386,8 +1387,9 @@ onMounted(async () => {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 16px; gap: 16px;
font-family: Microsoft YaHei;
.item { .organization-item {
width: 20%; width: 20%;
flex: auto; flex: auto;
height: 80px; height: 80px;
...@@ -1401,9 +1403,8 @@ onMounted(async () => { ...@@ -1401,9 +1403,8 @@ onMounted(async () => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
transition: transition: transform 0.3s ease, box-shadow 0.3s ease;
transform 0.3s ease, position: relative;
box-shadow 0.3s ease;
&:hover { &:hover {
transform: translateY(-3px); transform: translateY(-3px);
...@@ -1424,25 +1425,43 @@ onMounted(async () => { ...@@ -1424,25 +1425,43 @@ onMounted(async () => {
width: 20px; width: 20px;
flex: auto; flex: auto;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
line-height: 20px; line-height: 20px;
margin: 0 16px; margin: 0 16px;
} }
.item-num { .item-total {
white-space: nowrap;
font-family: Microsoft YaHei;
font-size: 20px; font-size: 20px;
margin-right: 2px;
white-space: nowrap;
font-weight: 700; font-weight: 700;
line-height: 20px; line-height: 20px;
margin-right: 2px;
color: var(--color-primary-100); color: var(--color-primary-100);
} }
.item-more { .item-more {
font-size: 16px;
margin-right: 12px; 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; 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(() => { ...@@ -79,7 +79,7 @@ onMounted(() => {
.left { .left {
position: absolute; position: absolute;
left: -160px; left: -160px;
top: 0px; top: 25px;
width: 160px; width: 160px;
padding: 0px 16px; padding: 0px 16px;
} }
......
src/views/decree/decreeLayout/overview/introduction/index.vue
浏览文件 @ 590ea4f1
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<WarnningPane :warnningLevel="riskInfo.riskLevel" :warnningContent="riskInfo.content" /> <WarnningPane :warnningLevel="riskInfo.riskLevel" :warnningContent="riskInfo.content" />
</div> </div>
<div class="introduction-wrap"> <div class="introduction-wrap">
<div class="left"> <div class="page-left">
<div class="box1"> <div class="box1">
<AnalysisBox title="基本信息" :showAllBtn="false"> <AnalysisBox title="基本信息" :showAllBtn="false">
<div class="box1-main"> <div class="box1-main">
...@@ -23,14 +23,10 @@ ...@@ -23,14 +23,10 @@
</div> </div>
<div class="item"> <div class="item">
<div class="item-left">{{ "英文全称：" }}</div> <div class="item-left">{{ "英文全称：" }}</div>
<div class="item-right text" v-if="basicInfo.eName?.length < 60"> <div class="item-right text" v-if="basicInfo.eName?.length < 60"> {{ basicInfo.eName }} </div>
{{ basicInfo.eName }}
</div>
<el-popover v-else effect="dark" :width="500" :content="basicInfo.eName" placement="top-start"> <el-popover v-else effect="dark" :width="500" :content="basicInfo.eName" placement="top-start">
<template #reference> <template #reference>
<div class="item-right text"> <div class="item-right text"> {{ basicInfo.eName }} </div>
{{ basicInfo.eName }}
</div>
</template> </template>
</el-popover> </el-popover>
</div> </div>
...@@ -66,7 +62,20 @@ ...@@ -66,7 +62,20 @@
</div> </div>
</AnalysisBox> </AnalysisBox>
</div> </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"> <AnalysisBox title="相关事件" :showAllBtn="false">
<div class="box2-main"> <div class="box2-main">
<el-empty v-if="!relatedData.length" description="暂无数据" :image-size="100" /> <el-empty v-if="!relatedData.length" description="暂无数据" :image-size="100" />
...@@ -80,18 +89,21 @@ ...@@ -80,18 +89,21 @@
<span class="meta">{{ item.sjsj }} · {{ item.source }}</span> <span class="meta">{{ item.sjsj }} · {{ item.source }}</span>
</div> </div>
<div class="content">{{ item.sjnr }}</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> </div>
</div> </div>
</AnalysisBox> </AnalysisBox>
</div> </div>
</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"> <div class="box3">
<AnalysisBox title="发布机构" :showAllBtn="false"> <AnalysisBox title="发布机构" :showAllBtn="false">
<div class="box3-top"> <div class="box3-top">
...@@ -151,6 +163,7 @@ import { ref, onMounted } from "vue"; ...@@ -151,6 +163,7 @@ import { ref, onMounted } from "vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import router from "@/router"; import router from "@/router";
import WarnningPane from '@/components/base/WarningPane/index.vue' import WarnningPane from '@/components/base/WarningPane/index.vue'
import WordCloudChart from "@/components/base/WordCloundChart/index.vue"
import { import {
getDecreeBasicInfo, getDecreeBasicInfo,
getDecreeRiskSignal, getDecreeRiskSignal,
...@@ -216,6 +229,21 @@ const handleGetBasicInfo = async () => { ...@@ -216,6 +229,21 @@ const handleGetBasicInfo = async () => {
}; };
handleGetBasicInfo(); 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 relatedData = ref([]);
const handleGetRelateEvents = async () => { const handleGetRelateEvents = async () => {
...@@ -322,15 +350,15 @@ onMounted(() => { ...@@ -322,15 +350,15 @@ onMounted(() => {
width: 100%; width: 100%;
display: flex; display: flex;
.left { .page-left {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: auto; flex: auto;
margin-right: 16px; margin-right: 16px;
gap: 16px;
.box1 { .box1 {
height: 414px; height: 414px;
.box1-main { .box1-main {
display: flex; display: flex;
padding: 0 24px; padding: 0 24px;
...@@ -427,18 +455,36 @@ onMounted(() => { ...@@ -427,18 +455,36 @@ onMounted(() => {
} }
} }
.box2 { .box5-main {
margin-top: 16px; padding: 10px 22px 22px;
height: 420px; .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 { .box2-main {
margin-top: 3px; padding: 0 22px;
margin-left: 31px;
height: 100%;
width: 1004px;
overflow: hidden;
overflow-y: auto;
.box2-item { .box2-item {
display: flex; display: flex;
height: 60px; height: 60px;
...@@ -446,18 +492,16 @@ onMounted(() => { ...@@ -446,18 +492,16 @@ onMounted(() => {
margin-bottom: 2px; margin-bottom: 2px;
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
margin-top: 10px; margin-top: 10px;
.item-left { .item-left {
width: 64px; width: 64px;
height: 48px; height: 48px;
border-radius: 2px; border-radius: 2px;
font-size: 0px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.item-center { .item-center {
flex: auto; flex: auto;
width: 20px; width: 20px;
...@@ -510,12 +554,10 @@ onMounted(() => { ...@@ -510,12 +554,10 @@ onMounted(() => {
} }
} }
} }
.box2-footer { .box2-footer {
margin: 20px 22px; margin: 20px 22px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.box2-footer-left { .box2-footer-left {
height: 20px; height: 20px;
color: rgba(132, 136, 142, 1); color: rgba(132, 136, 142, 1);
...@@ -526,20 +568,26 @@ onMounted(() => { ...@@ -526,20 +568,26 @@ onMounted(() => {
} }
} }
} }
}
.right { .page-right {
display: flex;
flex-direction: column;
width: 520px; width: 520px;
flex: none;
gap: 16px;
.box3 { .box4 {
width: 520px; height: 414px;
.box4-main {
height: 100%; height: 100%;
}
}
.box3-top { .box3-top {
border-bottom: 1px solid rgba(234, 236, 238, 1); border-bottom: 1px solid rgba(234, 236, 238, 1);
padding: 0 22px;
.box3-top-top { .box3-top-top {
width: 473px;
height: 88px; height: 88px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid rgba(234, 236, 238, 1);
...@@ -549,40 +597,13 @@ onMounted(() => { ...@@ -549,40 +597,13 @@ onMounted(() => {
align-items: center; align-items: center;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
padding: 0 16px;
cursor: pointer; 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 { .left {
width: 64px; width: 64px;
height: 64px; height: 64px;
margin-left: 17px; font-size: 0px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -590,9 +611,9 @@ onMounted(() => { ...@@ -590,9 +611,9 @@ onMounted(() => {
} }
.right { .right {
width: 370px; width: 20px;
flex: auto;
margin-left: 15px; margin-left: 15px;
.name { .name {
height: 26px; height: 26px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
...@@ -601,7 +622,6 @@ onMounted(() => { ...@@ -601,7 +622,6 @@ onMounted(() => {
font-weight: 700; font-weight: 700;
line-height: 26px; line-height: 26px;
} }
.ename { .ename {
margin-top: 6px; margin-top: 6px;
height: 24px; height: 24px;
...@@ -613,9 +633,7 @@ onMounted(() => { ...@@ -613,9 +633,7 @@ onMounted(() => {
} }
} }
} }
.box3-top-bottom { .box3-top-bottom {
width: 473px;
height: 193px; height: 193px;
margin: 0 auto; margin: 0 auto;
...@@ -717,8 +735,8 @@ onMounted(() => { ...@@ -717,8 +735,8 @@ onMounted(() => {
} }
} }
} }
.box3-bottom { .box3-bottom {
padding-right: 22px;
.box3-bottom-header { .box3-bottom-header {
height: 59px; height: 59px;
display: flex; display: flex;
...@@ -748,11 +766,6 @@ onMounted(() => { ...@@ -748,11 +766,6 @@ onMounted(() => {
} }
.box3-bottom-main { .box3-bottom-main {
width: 510px;
height: 440px;
overflow: hidden;
overflow-y: auto;
:deep(.el-timeline) { :deep(.el-timeline) {
padding: 8px 0px 0px 25px !important; padding: 8px 0px 0px 25px !important;
} }
...@@ -780,12 +793,6 @@ onMounted(() => { ...@@ -780,12 +793,6 @@ onMounted(() => {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 26px; line-height: 26px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}
} }
} }
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论