Skip to content

R
risk-monitor
提交 6c20ab0c authored 作者: 张伊明's avatar 张伊明
浏览文件
操作

refactor 根据演示需求调整样式及开放功能

上级 b5324563
隐藏空白字符变更
内嵌 并排
正在显示 包含 135 行增加 和 96 行删除
src/views/bill/billHome/index.vue
浏览文件 @ 6c20ab0c
......@@ -109,7 +109,7 @@
<DivideHeader id="position3" class="divide3" :titleText="'数据总览'"></DivideHeader>
<div class="center-footer">
<OverviewCard class="overview-card--double box5" title="涉华法案数量" :icon="box5HeaderIcon">
<OverviewCard class="overview-card--double box5" title="涉华法案数量变化趋势" :icon="box5HeaderIcon">
<template #right>
<el-select v-model="box5Select" placeholder="选择领域" @change="handleBox5Change" style="width: 150px">
<el-option label="全部领域" value="全部领域" />
......@@ -134,7 +134,7 @@
</OverviewCard>
</div>
<div class="center-footer1">
<OverviewCard class="overview-card--single box7" title="法案提出部门" :icon="box7HeaderIcon">
<OverviewCard class="overview-card--single box7" title="涉华法案提出部门" :icon="box7HeaderIcon">
<template #right>
<el-select v-model="box7selectetedTime" placeholder="选择时间" style="width: 90px">
<el-option v-for="item in box7YearList" :key="item.value" :label="item.label" :value="item.value" />
......@@ -159,7 +159,7 @@
</template>
</div>
</OverviewCard>
<OverviewCard class="overview-card--single box9" title="关键条款" :icon="box7HeaderIcon">
<OverviewCard class="overview-card--single box9" title="涉华法案关键条款" :icon="box7HeaderIcon">
<div class="box9-main" id="wordCloudChart"></div>
</OverviewCard>
</div>
......
src/views/bill/billHome/utils/multiLineChart.js
浏览文件 @ 6c20ab0c
......@@ -66,6 +66,7 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => {
type: 'value',
position: 'left',
axisLabel: {
formatter: '{value}项',
color: '#666'
}
},
......
src/views/bill/billLayout/index.vue
浏览文件 @ 6c20ab0c
......@@ -209,19 +209,19 @@ const mainHeaderBtnList = ref([
activeIcon: icon2Active,
name: "深度挖掘",
path: "/billLayout/deepDig"
},
{
icon: icon3,
activeIcon: icon3Active,
name: "影响分析",
path: "/billLayout/influence"
},
{
icon: icon4,
activeIcon: icon4Active,
name: "相关情况",
path: "/billLayout/relevantCircumstance"
}
// {
// icon: icon3,
// activeIcon: icon3Active,
// name: "影响分析",
// path: "/billLayout/influence"
// },
// {
// icon: icon4,
// activeIcon: icon4Active,
// name: "相关情况",
// path: "/billLayout/relevantCircumstance"
// }
]);
const activeTitle = ref("法案概况");
......
src/views/bill/deepDig/processAnalysis/index.vue
浏览文件 @ 6c20ab0c
......@@ -148,26 +148,26 @@
</div>
<div class="box1-right">
<div class="box1-right-top">
<el-progress :percentage="Number(item.agreePercent)" :show-text="false" color="#1677FF">
<el-progress :percentage="Number(item.agreePercent)" :show-text="false" color="rgb(33, 129, 57)">
</el-progress>
</div>
<div class="box1-right-bottom">
<el-progress :percentage="Number(item.againstPercent)" :show-text="false" color="#FF9054">
<el-progress :percentage="Number(item.againstPercent)" :show-text="false" color="rgb(206, 79, 81)">
</el-progress>
</div>
</div>
</div>
<div class="item-box2">
<div class="box2-1" style="color: #1677ff">{{ item.agreeCount + "票" }}</div>
<div class="box2-2" style="color: #ff9054">{{ item.againstCount + "票" }}</div>
<div class="box2-1" style="color: rgb(33, 129, 57)">{{ item.agreeCount + "票" }}</div>
<div class="box2-2" style="color: rgb(206, 79, 81)">{{ item.againstCount + "票" }}</div>
</div>
<div class="item-box3">
<div class="box3-1"></div>
<div class="box3-2"></div>
</div>
<div class="item-box4">
<div class="box4-1" style="color: #1677ff">{{ item.agreePercent + "%" }}</div>
<div class="box4-2" style="color: #ff9054">{{ item.againstPercent + "%" }}</div>
<div class="box4-1" style="color: rgb(33, 129, 57)">{{ item.agreePercent + "%" }}</div>
<div class="box4-2" style="color: rgb(206, 79, 81)">{{ item.againstPercent + "%" }}</div>
</div>
<div class="item-box5"></div>
<div class="item-box6">
......@@ -186,23 +186,23 @@
</div>
<div class="box1-right">
<div class="box1-right-top">
<el-progress :percentage="Number(item.dagreePercent)" :show-text="false" color="#85b4ff">
<el-progress :percentage="Number(item.dagreePercent)" :show-text="false" color="rgb(33, 129, 57)">
</el-progress>
</div>
<div class="box1-right-bottom">
<el-progress :percentage="Number(item.dagainstPercent)" :show-text="false" color="#FF9054">
<el-progress :percentage="Number(item.dagainstPercent)" :show-text="false" color="rgb(206, 79, 81)">
</el-progress>
</div>
</div>
</div>
<div class="item-box2">
<div class="box2-1" style="color: #1677ff">{{ item.dagreeCount + "票" }}</div>
<div class="box2-2" style="color: #ff9054">{{ item.dagainstCount + "票" }}</div>
<div class="box2-1" style="color: rgb(33, 129, 57)">{{ item.dagreeCount + "票" }}</div>
<div class="box2-2" style="color: rgb(206, 79, 81)">{{ item.dagainstCount + "票" }}</div>
</div>
<div class="item-box3"></div>
<div class="item-box4">
<div class="box4-1" style="color: #1677ff">{{ item.dagreePercent + "%" }}</div>
<div class="box4-2" style="color: #ff9054">{{ item.dagainstPercent + "%" }}</div>
<div class="box4-1" style="color: rgb(33, 129, 57)">{{ item.dagreePercent + "%" }}</div>
<div class="box4-2" style="color: rgb(206, 79, 81)">{{ item.dagainstPercent + "%" }}</div>
</div>
<div class="item-box5">
<div class="box5-1" style="color: #ce4f51">{{ item.dreverseCount + "人" }}</div>
......@@ -223,23 +223,23 @@
</div>
<div class="box1-right">
<div class="box1-right-top">
<el-progress :percentage="Number(item.ragreePercent)" :show-text="false" color="#1677FF">
<el-progress :percentage="Number(item.ragreePercent)" :show-text="false" color="rgb(33, 129, 57)">
</el-progress>
</div>
<div class="box1-right-bottom">
<el-progress :percentage="Number(item.ragainstPercent)" :show-text="false" color="#ffdcc8">
<el-progress :percentage="Number(item.ragainstPercent)" :show-text="false" color="rgb(206, 79, 81)">
</el-progress>
</div>
</div>
</div>
<div class="item-box2">
<div class="box2-1" style="color: #1677ff">{{ item.ragreeCount + "票" }}</div>
<div class="box2-2" style="color: #ff9054">{{ item.ragainstCount + "票" }}</div>
<div class="box2-1" style="color: rgb(33, 129, 57)">{{ item.ragreeCount + "票" }}</div>
<div class="box2-2" style="color: rgb(206, 79, 81)">{{ item.ragainstCount + "票" }}</div>
</div>
<div class="item-box3"></div>
<div class="item-box4">
<div class="box4-1" style="color: #1677ff">{{ item.ragreePercent + "%" }}</div>
<div class="box4-2" style="color: #ff9054">{{ item.ragainstPercent + "%" }}</div>
<div class="box4-1" style="color: rgb(33, 129, 57)">{{ item.ragreePercent + "%" }}</div>
<div class="box4-2" style="color: rgb(206, 79, 81)">{{ item.ragainstPercent + "%" }}</div>
</div>
<div class="item-box5">
<div class="box5-1" style="color: #ce4f51">{{ item.rreverseCount + "人" }}</div>
......@@ -400,26 +400,26 @@
</div>
<div class="box1-right">
<div class="box1-right-top">
<el-progress :percentage="Number(item.agreePercent)" :show-text="false" color="#1677FF">
<el-progress :percentage="Number(item.agreePercent)" :show-text="false" color="rgb(33, 129, 57)">
</el-progress>
</div>
<div class="box1-right-bottom">
<el-progress :percentage="Number(item.againstPercent)" :show-text="false" color="#FF9054">
<el-progress :percentage="Number(item.againstPercent)" :show-text="false" color="rgb(206, 79, 81)">
</el-progress>
</div>
</div>
</div>
<div class="item-box2">
<div class="box2-1" style="color: #1677ff">{{ item.agreeCount + "票" }}</div>
<div class="box2-2" style="color: #ff9054">{{ item.againstCount + "票" }}</div>
<div class="box2-1" style="color: rgb(33, 129, 57)">{{ item.agreeCount + "票" }}</div>
<div class="box2-2" style="color: rgb(206, 79, 81)">{{ item.againstCount + "票" }}</div>
</div>
<div class="item-box3">
<div class="box3-1"></div>
<div class="box3-2"></div>
</div>
<div class="item-box4">
<div class="box4-1" style="color: #1677ff">{{ item.agreePercent + "%" }}</div>
<div class="box4-2" style="color: #ff9054">{{ item.againstPercent + "%" }}</div>
<div class="box4-1" style="color: rgb(33, 129, 57)">{{ item.agreePercent + "%" }}</div>
<div class="box4-2" style="color: rgb(206, 79, 81)">{{ item.againstPercent + "%" }}</div>
</div>
<div class="item-box5"></div>
<div class="item-box6">
......@@ -438,23 +438,23 @@
</div>
<div class="box1-right">
<div class="box1-right-top">
<el-progress :percentage="Number(item.dagreePercent)" :show-text="false" color="#85b4ff">
<el-progress :percentage="Number(item.dagreePercent)" :show-text="false" color="rgb(33, 129, 57)">
</el-progress>
</div>
<div class="box1-right-bottom">
<el-progress :percentage="Number(item.dagainstPercent)" :show-text="false" color="#FF9054">
<el-progress :percentage="Number(item.dagainstPercent)" :show-text="false" color="rgb(206, 79, 81)">
</el-progress>
</div>
</div>
</div>
<div class="item-box2">
<div class="box2-1" style="color: #1677ff">{{ item.dagreeCount + "票" }}</div>
<div class="box2-2" style="color: #ff9054">{{ item.dagainstCount + "票" }}</div>
<div class="box2-1" style="color: rgb(33, 129, 57)">{{ item.dagreeCount + "票" }}</div>
<div class="box2-2" style="color: rgb(206, 79, 81)">{{ item.dagainstCount + "票" }}</div>
</div>
<div class="item-box3"></div>
<div class="item-box4">
<div class="box4-1" style="color: #1677ff">{{ item.dagreePercent + "%" }}</div>
<div class="box4-2" style="color: #ff9054">{{ item.dagainstPercent + "%" }}</div>
<div class="box4-1" style="color: rgb(33, 129, 57)">{{ item.dagreePercent + "%" }}</div>
<div class="box4-2" style="color: rgb(206, 79, 81)">{{ item.dagainstPercent + "%" }}</div>
</div>
<div class="item-box5">
<div class="box5-1" style="color: #ce4f51">{{ item.dreverseCount + "人" }}</div>
......@@ -475,23 +475,23 @@
</div>
<div class="box1-right">
<div class="box1-right-top">
<el-progress :percentage="Number(item.ragreePercent)" :show-text="false" color="#1677FF">
<el-progress :percentage="Number(item.ragreePercent)" :show-text="false" color="rgb(33, 129, 57)">
</el-progress>
</div>
<div class="box1-right-bottom">
<el-progress :percentage="Number(item.ragainstPercent)" :show-text="false" color="#ffdcc8">
<el-progress :percentage="Number(item.ragainstPercent)" :show-text="false" color="rgb(206, 79, 81)">
</el-progress>
</div>
</div>
</div>
<div class="item-box2">
<div class="box2-1" style="color: #1677ff">{{ item.ragreeCount + "票" }}</div>
<div class="box2-2" style="color: #ff9054">{{ item.ragainstCount + "票" }}</div>
<div class="box2-1" style="color: rgb(33, 129, 57)">{{ item.ragreeCount + "票" }}</div>
<div class="box2-2" style="color: rgb(206, 79, 81)">{{ item.ragainstCount + "票" }}</div>
</div>
<div class="item-box3"></div>
<div class="item-box4">
<div class="box4-1" style="color: #1677ff">{{ item.ragreePercent + "%" }}</div>
<div class="box4-2" style="color: #ff9054">{{ item.ragainstPercent + "%" }}</div>
<div class="box4-1" style="color: rgb(33, 129, 57)">{{ item.ragreePercent + "%" }}</div>
<div class="box4-2" style="color: rgb(206, 79, 81)">{{ item.ragainstPercent + "%" }}</div>
</div>
<div class="item-box5">
<div class="box5-1" style="color: #ce4f51">{{ item.rreverseCount + "人" }}</div>
......@@ -1394,7 +1394,7 @@ onMounted(async () => {
}
.item-footer1 {
color: rgba(22, 119, 255, 1);
color: rgb(33, 129, 57);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
......@@ -1477,56 +1477,66 @@ onMounted(async () => {
.box3-main-center {
height: 732px;
margin: 0 20px;
overflow-x: hidden;
.box3-main-center-header {
height: 50px;
display: flex;
width: 100%;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 600;
line-height: 22px;
padding: 0 20px;
box-sizing: border-box;
.box3-main-center-header-box1 {
width: 370px;
flex: 370 1 0;
min-width: 0;
text-align: center;
}
.box3-main-center-header-box2 {
width: 60px;
flex: 60 1 0;
min-width: 0;
text-align: center;
}
.box3-main-center-header-box3 {
width: 75px;
flex: 75 1 0;
min-width: 0;
text-align: center;
}
.box3-main-center-header-box4 {
width: 70px;
flex: 70 1 0;
min-width: 0;
text-align: center;
}
.box3-main-center-header-box5 {
width: 100px;
flex: 100 1 0;
min-width: 0;
text-align: center;
}
.box3-main-center-header-box6 {
width: 90px;
flex: 90 1 0;
min-width: 0;
text-align: center;
}
}
.box3-main-center-content {
height: 682px;
overflow: auto;
overflow-y: auto;
overflow-x: hidden;
.box3-main-center-content-box {
width: 746px;
height: 160px;
width: 100%;
box-sizing: border-box;
height: 160px;
border: 1px solid rgba(243, 243, 244, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
......@@ -1535,11 +1545,15 @@ onMounted(async () => {
.item {
display: flex;
align-items: center;
height: 45px;
width: 100%;
.item-box1 {
width: 340px;
flex: 370 1 0;
min-width: 0;
display: flex;
align-items: center;
.box1-left {
width: 130px;
......@@ -1585,36 +1599,51 @@ onMounted(async () => {
.box1-right {
// border-left: 1px solid rgba(243, 243, 244, 1);
// border-right: 1px solid rgba(243, 243, 244, 1);
width: 215px;
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
.box1-right-top {
height: 20px;
height: 14px;
display: flex;
align-items: center;
box-sizing: border-box;
padding-top: 8px;
:deep(.el-progress-bar__outer) {
height: 6px;
}
:deep(.el-progress-bar__inner) {
background: rgba(22, 119, 255, 1);
background: rgb(33, 129, 57);
border-radius: 0;
}
:deep(.el-progress-bar__outer) {
background: rgba(22, 119, 255, 0.1);
background: rgba(33, 129, 57, 0.1);
border-radius: 0;
}
}
.box1-right-bottom {
height: 20px;
height: 14px;
display: flex;
align-items: center;
box-sizing: border-box;
padding-top: 8px;
:deep(.el-progress-bar__outer) {
height: 6px;
}
:deep(.el-progress-bar__inner) {
background: rgba(255, 172, 77, 1);
background: rgb(206, 79, 81);
border-radius: 0;
}
:deep(.el-progress-bar__outer) {
background: rgba(255, 172, 77, 0.1);
background: rgba(206, 79, 81, 0.1);
border-radius: 0;
}
}
......@@ -1622,38 +1651,43 @@ onMounted(async () => {
}
.item-box2 {
width: 60px;
flex: 60 1 0;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
text-align: center;
.box2-1 {
height: 14px;
color: rgba(22, 119, 255, 1);
line-height: 14px;
color: rgb(33, 129, 57);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 14px;
text-align: center;
}
.box2-2 {
margin-top: 5px;
height: 14px;
line-height: 14px;
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 14px;
text-align: center;
color: rgba(255, 172, 77, 1);
color: rgb(206, 79, 81);
}
}
.item-box3 {
width: 65px;
flex: 75 1 0;
min-width: 0;
text-align: center;
.box3-1 {
height: 14px;
color: rgba(22, 119, 255, 1);
color: rgb(33, 129, 57);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
......@@ -1669,38 +1703,43 @@ onMounted(async () => {
font-weight: 400;
line-height: 14px;
text-align: center;
color: rgba(255, 172, 77, 1);
color: rgb(206, 79, 81);
}
}
.item-box4 {
width: 70px;
flex: 70 1 0;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
text-align: center;
.box4-1 {
height: 14px;
color: rgba(22, 119, 255, 1);
line-height: 14px;
color: rgb(33, 129, 57);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 14px;
text-align: center;
}
.box4-2 {
margin-top: 5px;
height: 14px;
line-height: 14px;
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 14px;
text-align: center;
color: rgba(255, 172, 77, 1);
color: rgb(206, 79, 81);
}
}
.item-box5 {
width: 100px;
flex: 100 1 0;
min-width: 0;
text-align: center;
.box5-1 {
......@@ -1724,7 +1763,8 @@ onMounted(async () => {
}
.item-box6 {
width: 90px;
flex: 90 1 0;
min-width: 0;
text-align: center;
.img-box {
......
src/views/bill/deepDig/processAnalysis/utils/boxplot.js
浏览文件 @ 6c20ab0c
......@@ -39,10 +39,10 @@ const getBoxPlotChcart = (data, unit, labelConfig = {}) => {
}
},
grid: {
left: '5%',
right: '3%',
left: '8%',
right: '5%',
top: '10%',
bottom: '10%'
bottom: '12%'
},
xAxis: {
type: 'category',
......@@ -59,11 +59,9 @@ const getBoxPlotChcart = (data, unit, labelConfig = {}) => {
},
yAxis: {
type: 'value',
name: `单位：${unit}`,
nameTextStyle: {
padding: [0, 0, 0, 1520], // [上, 右, 下, 左]
verticalAlign: 'middle',
align: 'center'
name: '',
axisLabel: {
formatter: (value) => `${value}${unit}`
},
splitArea: {
show: true
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论