提交 7298bb9b authored 作者: 张伊明's avatar 张伊明

合并分支 'zym-dev' 到 'master'

Zym dev 查看合并请求 !156
...@@ -148,11 +148,12 @@ ...@@ -148,11 +148,12 @@
</div> </div>
</div> --> </div> -->
<AnalysisBox title="政治献金流向"> <AnalysisBox title="政治献金流向">
<div class="box2-main"> <div class="box2-main" :class="{ 'box2-main-no-footer': !showHardcodedTips }">
<el-empty v-if="!fullSourceList.length" description="暂无数据" :image-size="100" /> <el-empty v-if="!fullSourceList.length" description="暂无数据" :image-size="100" />
<div v-else class="chart-box2" id="chart1"></div> <div v-else class="chart-box2" id="chart1"></div>
</div> </div>
<div class="box-footer"> <!-- 该提示文案后续改为接口返回,当前按需求先隐藏展示 -->
<div v-if="showHardcodedTips" class="box-footer">
<div class="box-footer-left"> <div class="box-footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" /> <img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div> </div>
...@@ -210,7 +211,7 @@ ...@@ -210,7 +211,7 @@
</div> </div>
</div> --> </div> -->
<AnalysisBox title="政治献金领域分布"> <AnalysisBox title="政治献金领域分布">
<div class="box3-main"> <div class="box3-main" :class="{ 'box3-main-no-footer': !showHardcodedTips }">
<div class="box3-main-left" id="chart2"></div> <div class="box3-main-left" id="chart2"></div>
<div class="box3-main-right"> <div class="box3-main-right">
<el-empty v-if="!areaList.length" description="暂无数据" :image-size="100" /> <el-empty v-if="!areaList.length" description="暂无数据" :image-size="100" />
...@@ -225,7 +226,8 @@ ...@@ -225,7 +226,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="box-footer"> <!-- 该提示文案后续改为接口返回,当前按需求先隐藏展示 -->
<div v-if="showHardcodedTips" class="box-footer">
<div class="box-footer-left"> <div class="box-footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" /> <img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div> </div>
...@@ -271,6 +273,9 @@ import Mzd from "@/assets/icons/mzd.png"; ...@@ -271,6 +273,9 @@ import Mzd from "@/assets/icons/mzd.png";
const activeBtnIndex = ref(0); const activeBtnIndex = ref(0);
const itemActiveIndex = ref(0); const itemActiveIndex = ref(0);
// 写死提示文案先保留逻辑,默认不展示;后续接口完成后改为 true 或替换为接口控制
const showHardcodedTips = ref(false);
const currentPersonName = computed(() => { const currentPersonName = computed(() => {
if (mainPoliContribution.value && mainPoliContribution.value[itemActiveIndex.value]) { if (mainPoliContribution.value && mainPoliContribution.value[itemActiveIndex.value]) {
return mainPoliContribution.value[itemActiveIndex.value].name; return mainPoliContribution.value[itemActiveIndex.value].name;
...@@ -1104,6 +1109,14 @@ onMounted(() => { ...@@ -1104,6 +1109,14 @@ onMounted(() => {
margin: 0 auto; margin: 0 auto;
margin-bottom: 9px; margin-bottom: 9px;
&.box2-main-no-footer {
height: 351px;
.chart-box2 {
height: 351px;
}
}
.chart-box2 { .chart-box2 {
width: 1020px; width: 1020px;
height: 302px; height: 302px;
...@@ -1128,6 +1141,10 @@ onMounted(() => { ...@@ -1128,6 +1141,10 @@ onMounted(() => {
margin-bottom: 9px; margin-bottom: 9px;
display: flex; display: flex;
&.box3-main-no-footer {
height: 349px;
}
.box3-main-left { .box3-main-left {
width: 492px; width: 492px;
} }
......
...@@ -34,12 +34,12 @@ ...@@ -34,12 +34,12 @@
<AnalysisBox title="典型阶段耗时"> <AnalysisBox title="典型阶段耗时">
<div class="box1-main"> <div class="box1-main">
<div class="box1-main-center" id="chart1"></div> <div class="box1-main-center" id="chart1"></div>
<div class="box1-main-footer"> <div v-if="timeFooterText" class="box1-main-footer">
<div class="box-footer-left"> <div class="box-footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" /> <img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div> </div>
<div class="box-footer-center"> <div class="box-footer-center">
从立法耗时角度分析,大而美法案从提交到签署仅39天,远快于历史同类法案(通常需6个月以上),立法速度极快。 {{ timeFooterText }}
</div> </div>
<div class="box-footer-right"> <div class="box-footer-right">
<img src="../assets/icons/arrow-right.png" alt="" /> <img src="../assets/icons/arrow-right.png" alt="" />
...@@ -82,13 +82,12 @@ ...@@ -82,13 +82,12 @@
<AnalysisBox title="修正案次数分析"> <AnalysisBox title="修正案次数分析">
<div class="box2-main"> <div class="box2-main">
<div class="box2-main-center" id="chart2"></div> <div class="box2-main-center" id="chart2"></div>
<div class="box2-main-footer"> <div v-if="amendFooterText" class="box2-main-footer">
<div class="box-footer-left"> <div class="box-footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" /> <img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div> </div>
<div class="box-footer-center"> <div class="box-footer-center">
法案本质是共和党与资本集团的深度联盟,共和党获超 {{ amendFooterText }}
​80%利益集团献金,以减税、松监管、军工扩张为核心回报。
</div> </div>
<div class="box-footer-right"> <div class="box-footer-right">
<img src="../assets/icons/arrow-right.png" alt="" /> <img src="../assets/icons/arrow-right.png" alt="" />
...@@ -367,6 +366,16 @@ ...@@ -367,6 +366,16 @@
</div> </div>
</div> --> </div> -->
<AnalysisBox title="投票分析"> <AnalysisBox title="投票分析">
<div class="vote-legend">
<div class="vote-legend-item">
<span class="vote-legend-dot agree"></span>
<span>赞成票</span>
</div>
<div class="vote-legend-item">
<span class="vote-legend-dot against"></span>
<span>反对票</span>
</div>
</div>
<div class="box3-main"> <div class="box3-main">
<div class="box3-main-center"> <div class="box3-main-center">
<div class="box3-main-center-header"> <div class="box3-main-center-header">
...@@ -658,12 +667,12 @@ ...@@ -658,12 +667,12 @@
</div> --> </div> -->
</div> </div>
</div> </div>
<div class="box3-main-footer"> <div v-if="voteFooterText" class="box3-main-footer">
<div class="box-footer-left"> <div class="box-footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" /> <img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div> </div>
<div class="box-footer-center"> <div class="box-footer-center">
法案以218:214​(众议院)和51:50​(副总统决胜票)微弱优势强行通过,暴露两党极端对立、党内倒戈频发的特点。 {{ voteFooterText }}
</div> </div>
<div class="box-footer-right"> <div class="box-footer-right">
<img src="../assets/icons/arrow-right.png" alt="" /> <img src="../assets/icons/arrow-right.png" alt="" />
...@@ -881,6 +890,11 @@ const voteAnalysisList4 = ref([ ...@@ -881,6 +890,11 @@ const voteAnalysisList4 = ref([
} }
]); ]);
// 底部说明文案(接口预留,默认不展示)
const timeFooterText = ref("");
const amendFooterText = ref("");
const voteFooterText = ref("");
// 绘制echarts图表 // 绘制echarts图表
const setChart = (option, chartId) => { const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId); let chartDom = document.getElementById(chartId);
...@@ -1093,7 +1107,7 @@ onMounted(async () => { ...@@ -1093,7 +1107,7 @@ onMounted(async () => {
.box1-main-center { .box1-main-center {
width: 792px; width: 792px;
height: 300px; height: 340px;
margin: 0 5px; margin: 0 5px;
overflow: hidden; overflow: hidden;
...@@ -1231,7 +1245,7 @@ onMounted(async () => { ...@@ -1231,7 +1245,7 @@ onMounted(async () => {
height: 359px; height: 359px;
.box2-main-center { .box2-main-center {
height: 300px; height: 340px;
margin: 0 5px; margin: 0 5px;
display: flex; display: flex;
...@@ -1345,7 +1359,7 @@ onMounted(async () => { ...@@ -1345,7 +1359,7 @@ onMounted(async () => {
#chart2 { #chart2 {
position: relative; position: relative;
width: 330px; width: 330px;
height: 300px; height: 340px;
z-index: 0; z-index: 0;
} }
...@@ -1471,11 +1485,48 @@ onMounted(async () => { ...@@ -1471,11 +1485,48 @@ onMounted(async () => {
.box3 { .box3 {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative;
.vote-legend {
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 20px;
z-index: 2;
.vote-legend-item {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: rgba(95, 101, 108, 1);
line-height: 22px;
}
.vote-legend-dot {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
&.agree {
background: rgb(33, 129, 57);
}
&.against {
background: rgb(206, 79, 81);
}
}
}
.box3-main { .box3-main {
height: 791px; height: 791px;
.box3-main-center { .box3-main-center {
height: 732px; height: 772px;
margin: 0 20px; margin: 0 20px;
overflow-x: hidden; overflow-x: hidden;
...@@ -1529,7 +1580,7 @@ onMounted(async () => { ...@@ -1529,7 +1580,7 @@ onMounted(async () => {
} }
.box3-main-center-content { .box3-main-center-content {
height: 682px; height: 722px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
......
...@@ -16,10 +16,10 @@ ...@@ -16,10 +16,10 @@
> >
<div class="item-title">{{ item.actionTitle }}</div> <div class="item-title">{{ item.actionTitle }}</div>
</el-tooltip> </el-tooltip>
<!-- <div class="right"> <div class="right">
<div class="risk-tag" :class="item.riskClass">{{ item.riskText }}</div> <div v-if="item.riskText" class="risk-tag" :class="item.riskClass">{{ item.riskText }}</div>
<div class="arrow">></div> <div class="arrow">></div>
</div> --> </div>
</div> </div>
</div> </div>
...@@ -41,6 +41,27 @@ const RISK_CLASS_MAP = { ...@@ -41,6 +41,27 @@ const RISK_CLASS_MAP = {
"低风险": "risk-low" "低风险": "risk-low"
}; };
const normalizeRiskSignal = riskSignal => {
if (riskSignal === null || riskSignal === undefined) return "";
if (typeof riskSignal === "number" && Number.isFinite(riskSignal)) {
const idx = Math.max(0, Math.min(RISK_LEVELS.length - 1, Math.floor(riskSignal)));
return RISK_LEVELS[idx];
}
const text = String(riskSignal).trim();
if (!text) return "";
if (RISK_CLASS_MAP[text]) return text;
const numeric = Number(text);
if (Number.isFinite(numeric)) {
const idx = Math.max(0, Math.min(RISK_LEVELS.length - 1, Math.floor(numeric)));
return RISK_LEVELS[idx];
}
return text;
};
export default { export default {
name: "SBillProgressList", name: "SBillProgressList",
data() { data() {
...@@ -81,7 +102,7 @@ export default { ...@@ -81,7 +102,7 @@ export default {
formattedDate = `${dateObj.getMonth() + 1}${dateObj.getDate()}日`; formattedDate = `${dateObj.getMonth() + 1}${dateObj.getDate()}日`;
} }
const riskText = RISK_LEVELS[Math.min(index, RISK_LEVELS.length - 1)]; const riskText = normalizeRiskSignal(item?.level);
const riskClass = RISK_CLASS_MAP[riskText] || "risk-low"; const riskClass = RISK_CLASS_MAP[riskText] || "risk-low";
return { return {
......
<template> <template>
<div class="temp-wrap"> <div class="temp-wrap">
<div class="left"> <div class="side">
<div class="side-box side-box-domain">
<AnalysisBox title="涉及领域" width="520px" height="415px">
<div class="right-box2-main" id="chart2"></div>
<div v-if="domainFooterText" class="right-box2-footer">
<div class="right-box2-footer-left">
<img src="./assets/icons/right-icon1.png" alt="" />
</div>
<div class="right-box2-footer-center">
{{ domainFooterText }}
</div>
<div class="right-box2-footer-right">
<img src="./assets/icons/arrow-right.png" alt="" />
</div>
</div>
</AnalysisBox>
</div>
<div class="side-box side-box-limit">
<AnalysisBox title="限制手段" width="520px" height="415px">
<div class="right-box1-main" id="chart1"></div>
<div v-if="limitFooterText" class="right-box1-footer">
<div class="right-box1-footer-left">
<img src="./assets/icons/right-icon1.png" alt="" />
</div>
<div class="right-box1-footer-center">
{{ limitFooterText }}
</div>
<div class="right-box1-footer-right">
<img src="./assets/icons/arrow-right.png" alt="" />
</div>
</div>
</AnalysisBox>
</div>
</div>
<div class="terms">
<!-- <div class="box-header"> <!-- <div class="box-header">
<div class="box-header-left"></div> <div class="box-header-left"></div>
<div class="box-header-title">主要条款</div> <div class="box-header-title">主要条款</div>
...@@ -91,7 +125,7 @@ ...@@ -91,7 +125,7 @@
</div> </div>
</div> </div>
<div class="left-main"> <div class="left-main">
<div class="left-main-item" v-for="(term, index) in mainTermsList" :key="index"> <div class="left-main-item" v-for="(term, index) in mainTermsList" :key="getTermKey(term, index)">
<div class="id">{{ (currentPage - 1) * pageSize + index + 1 }}</div> <div class="id">{{ (currentPage - 1) * pageSize + index + 1 }}</div>
<div class="info"> <div class="info">
<div class="title"> <div class="title">
...@@ -104,7 +138,7 @@ ...@@ -104,7 +138,7 @@
</div> </div>
</div> </div>
<div class="tags-box"> <div class="tags-box">
<div class="tag" v-for="(val, idx) in (term.hylyList || []).slice(0, 2)" :key="idx" :class="{ <div class="tag" v-for="(val, idx) in (term.hylyList || []).slice(0, 2)" :key="getTagKey(val, idx)" :class="{
tag1: val === '人工智能', tag1: val === '人工智能',
tag2: val === '新一代信息技术' || !['人工智能', '政治', '经济', '军事', '科技'].includes(val), tag2: val === '新一代信息技术' || !['人工智能', '政治', '经济', '军事', '科技'].includes(val),
tag3: val === '政治', tag3: val === '政治',
...@@ -131,86 +165,6 @@ ...@@ -131,86 +165,6 @@
</div> </div>
</AnalysisBox> </AnalysisBox>
</div> </div>
<div class="right">
<div class="right-box1">
<!-- <div class="box-header">
<div class="box-header-left"></div>
<div class="box-header-title">限制手段</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="right-box1-main" id="chart1"></div>
<div class="right-box1-footer">
<div class="right-box1-footer-left">
<img src="./assets/icons/right-icon1.png" alt="" />
</div>
<div class="right-box1-footer-center">通过关税壁垒、技术脱钩、新能源打压、地缘捆绑遏制中国产业链发展</div>
<div class="right-box1-footer-right">
<img src="./assets/icons/arrow-right.png" alt="" />
</div>
</div> -->
<AnalysisBox title="限制手段">
<div class="right-box1-main" id="chart1"></div>
<div class="right-box1-footer">
<div class="right-box1-footer-left">
<img src="./assets/icons/right-icon1.png" alt="" />
</div>
<div class="right-box1-footer-center">通过关税壁垒、技术脱钩、新能源打压、地缘捆绑遏制中国产业链发展</div>
<div class="right-box1-footer-right">
<img src="./assets/icons/arrow-right.png" alt="" />
</div>
</div>
</AnalysisBox>
</div>
<div class="right-box2">
<!-- <div class="box-header">
<div class="box-header-left"></div>
<div class="box-header-title">涉及领域</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="right-box2-main" id="chart2"></div>
<div class="right-box2-footer">
<div class="right-box2-footer-left">
<img src="./assets/icons/right-icon1.png" alt="" />
</div>
<div class="right-box2-footer-center">系统性挤压中国新能源、跨境电商及高端制造的在美生存空间。</div>
<div class="right-box2-footer-right">
<img src="./assets/icons/arrow-right.png" alt="" />
</div>
</div> -->
<AnalysisBox title="涉及领域">
<div class="right-box2-main" id="chart2"></div>
<div class="right-box2-footer">
<div class="right-box2-footer-left">
<img src="./assets/icons/right-icon1.png" alt="" />
</div>
<div class="right-box2-footer-center">系统性挤压中国新能源、跨境电商及高端制造的在美生存空间。</div>
<div class="right-box2-footer-right">
<img src="./assets/icons/arrow-right.png" alt="" />
</div>
</div>
</AnalysisBox>
</div>
</div>
</div> </div>
</template> </template>
...@@ -234,11 +188,21 @@ const pageSize = ref(10); ...@@ -234,11 +188,21 @@ const pageSize = ref(10);
const total = ref(0); const total = ref(0);
const mainTermsList = ref([]); const mainTermsList = ref([]);
const domainFooterText = ref("");
const limitFooterText = ref("");
const btnActiveIndex = ref(1); const btnActiveIndex = ref(1);
const handleSelectBtn = index => { const handleSelectBtn = index => {
btnActiveIndex.value = index; btnActiveIndex.value = index;
}; };
const getTermKey = (term, index) => {
return term?.ywid ?? term?.id ?? term?.tkxh ?? index;
};
const getTagKey = (val, idx) => {
return `${val}-${idx}`;
};
const chart1Data = ref([]); const chart1Data = ref([]);
const chart1ColorList = ref(["#4096ff", "#b37feb", "#ff7875", "#85a5ff", "#69b1ff", "#ffc069", "#87e8de"]); const chart1ColorList = ref(["#4096ff", "#b37feb", "#ff7875", "#85a5ff", "#69b1ff", "#ffc069", "#87e8de"]);
...@@ -478,8 +442,9 @@ onMounted(async () => { ...@@ -478,8 +442,9 @@ onMounted(async () => {
} }
} }
.left { .terms {
margin-top: 16px; margin-top: 16px;
margin-left: 16px;
width: 1064px; width: 1064px;
height: 845px; height: 845px;
.left-top { .left-top {
...@@ -668,19 +633,23 @@ onMounted(async () => { ...@@ -668,19 +633,23 @@ onMounted(async () => {
} }
} }
.right { .side {
width: 520px; width: 520px;
margin-top: 16px; margin-top: 16px;
margin-left: 16px;
.right-box1 { .side-box {
width: 520px; width: 520px;
height: 415px; }
.right-box1-main {
.side-box-limit {
margin-top: 15px;
width: 520px; width: 520px;
height: 315px; height: 415px;
padding: 16px; .right-box1-main {
} width: 520px;
height: 375px;
padding: 16px;
}
.right-box1-footer { .right-box1-footer {
width: 493px; width: 493px;
...@@ -735,15 +704,14 @@ onMounted(async () => { ...@@ -735,15 +704,14 @@ onMounted(async () => {
} }
} }
.right-box2 { .side-box-domain {
margin-top: 15px;
width: 520px;
height: 415px;
.right-box2-main {
width: 520px; width: 520px;
height: 315px; height: 415px;
padding: 16px; .right-box2-main {
} width: 520px;
height: 375px;
padding: 16px;
}
.right-box2-footer { .right-box2-footer {
width: 493px; width: 493px;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论