提交 275a9ec3 authored 作者: 张伊明's avatar 张伊明

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

feat 修改部分样式,重新接入法案数量接口 查看合并请求 !255
流水线 #131 已取消 于阶段
in 4 分 46 秒
...@@ -14,7 +14,9 @@ build_pre: ...@@ -14,7 +14,9 @@ build_pre:
stage: build stage: build
image: node:20-bullseye image: node:20-bullseye
tags: tags:
- risk-monitor-frontend - docker
- frontend
- linux
only: only:
- pre - pre
script: script:
...@@ -49,7 +51,7 @@ deploy_pre: ...@@ -49,7 +51,7 @@ deploy_pre:
LATEST_PIPELINE_ID="$( LATEST_PIPELINE_ID="$(
curl --silent --show-error --fail curl --silent --show-error --fail
--header "JOB-TOKEN: $CI_JOB_TOKEN" --header "JOB-TOKEN: $CI_JOB_TOKEN"
"$CI_SERVER_URL/api/v4/projects/$CI_PROJECT_ID/pipelines?ref=pre&order_by=id&sort=desc&per_page=1" "${CI_PROJECT_URL%/*/*}/api/v4/projects/$CI_PROJECT_ID/pipelines?ref=pre&order_by=id&sort=desc&per_page=1"
| jq -r '.[0].id' | jq -r '.[0].id'
)" )"
- > - >
......
...@@ -25,7 +25,9 @@ ...@@ -25,7 +25,9 @@
</div> </div>
<div class="committee-cards-row"> <div class="committee-cards-row">
<div v-for="item in committeeCardList" :key="item.id" class="committee-card"> <div v-for="item in committeeCardList" :key="item.id" class="committee-card">
<div class="committee-card-icon"></div> <div class="committee-card-icon">
<img :src="iconCommit" alt="委员会头像" />
</div>
<div class="committee-card-content"> <div class="committee-card-content">
<div class="committee-card-name">{{ item.name }}</div> <div class="committee-card-name">{{ item.name }}</div>
<div class="committee-card-chamber">{{ item.chamber }}</div> <div class="committee-card-chamber">{{ item.chamber }}</div>
...@@ -287,7 +289,7 @@ import getDoublePieChart from "./utils/doublePieChart"; ...@@ -287,7 +289,7 @@ import getDoublePieChart from "./utils/doublePieChart";
import box5HeaderIcon from "./assets/images/box5-header-icon.png"; import box5HeaderIcon from "./assets/images/box5-header-icon.png";
import box6HeaderIcon from "./assets/images/box6-header-icon.png"; import box6HeaderIcon from "./assets/images/box6-header-icon.png";
import box7HeaderIcon from "./assets/images/box7-header-icon.png"; import box7HeaderIcon from "./assets/images/box7-header-icon.png";
import iconCommit from "./assets/icons/icon-commit.png";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { Calendar } from "@element-plus/icons-vue"; import { Calendar } from "@element-plus/icons-vue";
...@@ -503,13 +505,9 @@ const buildAiChartPayload = key => { ...@@ -503,13 +505,9 @@ const buildAiChartPayload = key => {
const title = Array.isArray(box5Data.value.title) ? box5Data.value.title : []; const title = Array.isArray(box5Data.value.title) ? box5Data.value.title : [];
const proposed = box5Data.value?.data?.[0]?.value || []; const proposed = box5Data.value?.data?.[0]?.value || [];
const passed = box5Data.value?.data?.[1]?.value || []; const passed = box5Data.value?.data?.[1]?.value || [];
const rate = const housePassed = box5Data.value?.data?.[2]?.value || [];
box5Data.value.percent || const senatePassed = box5Data.value?.data?.[3]?.value || [];
title.map((_, i) => { const hsPassed = box5Data.value?.data?.[4]?.value || [];
const p = Number(proposed[i] || 0);
const pass = Number(passed[i] || 0);
return p ? Number(((pass / p) * 100).toFixed(2)) : 0;
});
return { return {
type: "折线图", type: "折线图",
name: "涉华法案数量变化趋势", name: "涉华法案数量变化趋势",
...@@ -517,7 +515,9 @@ const buildAiChartPayload = key => { ...@@ -517,7 +515,9 @@ const buildAiChartPayload = key => {
month, month,
proposed: Number(proposed[i] || 0), proposed: Number(proposed[i] || 0),
passed: Number(passed[i] || 0), passed: Number(passed[i] || 0),
pass_rate: Number(rate[i] || 0) house_passed: Number(housePassed[i] || 0),
senate_passed: Number(senatePassed[i] || 0),
hs_passed: Number(hsPassed[i] || 0)
})) }))
}; };
} }
...@@ -750,6 +750,18 @@ const box5Data = ref({ ...@@ -750,6 +750,18 @@ const box5Data = ref({
{ {
name: "通过法案", name: "通过法案",
value: [6, 3, 4, 6, 11, 5, 2, 14, 16, 27, 28, 44] value: [6, 3, 4, 6, 11, 5, 2, 14, 16, 27, 28, 44]
},
{
name: "众议院通过",
value: []
},
{
name: "参议院通过",
value: []
},
{
name: "双院通过",
value: []
} }
] ]
}); });
...@@ -772,11 +784,23 @@ const handleGetBillCount = async () => { ...@@ -772,11 +784,23 @@ const handleGetBillCount = async () => {
data: [ data: [
{ {
name: "提出法案", name: "提出法案",
value: sortedData.map(item => item.totalCount) value: sortedData.map(item => item.proposedCount)
}, },
{ {
name: "通过法案", name: "通过法案",
value: sortedData.map(item => item.passCount) value: sortedData.map(item => item.passCount)
},
{
name: "众议院通过",
value: sortedData.map(item => item.houseCount)
},
{
name: "参议院通过",
value: sortedData.map(item => item.senateCount)
},
{
name: "双院通过",
value: sortedData.map(item => item.hscount)
} }
], ],
percent: sortedData.map(item => item.percent) percent: sortedData.map(item => item.percent)
...@@ -788,7 +812,10 @@ const handleGetBillCount = async () => { ...@@ -788,7 +812,10 @@ const handleGetBillCount = async () => {
title: [], title: [],
data: [ data: [
{ name: "提出法案", value: [] }, { name: "提出法案", value: [] },
{ name: "通过法案", value: [] } { name: "通过法案", value: [] },
{ name: "众议院通过", value: [] },
{ name: "参议院通过", value: [] },
{ name: "双院通过", value: [] }
], ],
percent: [] percent: []
}; };
...@@ -801,7 +828,10 @@ const handleGetBillCount = async () => { ...@@ -801,7 +828,10 @@ const handleGetBillCount = async () => {
title: [], title: [],
data: [ data: [
{ name: "提出法案", value: [] }, { name: "提出法案", value: [] },
{ name: "通过法案", value: [] } { name: "通过法案", value: [] },
{ name: "众议院通过", value: [] },
{ name: "参议院通过", value: [] },
{ name: "双院通过", value: [] }
], ],
percent: [] percent: []
}; };
...@@ -814,13 +844,17 @@ const handleBox5 = async () => { ...@@ -814,13 +844,17 @@ const handleBox5 = async () => {
await nextTick(); await nextTick();
const proposed = box5Data.value.data[0].value; const proposed = box5Data.value.data[0].value;
const passed = box5Data.value.data[1].value; const passed = box5Data.value.data[1].value;
const rate = const housePassed = box5Data.value.data[2].value;
box5Data.value.percent || const senatePassed = box5Data.value.data[3].value;
proposed.map((p, i) => { const hsPassed = box5Data.value.data[4].value;
const pass = passed[i] || 0; const box5Chart = getMultiLineChart(
return p ? ((pass / p) * 100).toFixed(2) : 0; box5Data.value.title,
}); proposed,
const box5Chart = getMultiLineChart(box5Data.value.title, proposed, passed, rate); passed,
housePassed,
senatePassed,
hsPassed
);
const domain = categoryList.value.filter(item => { const domain = categoryList.value.filter(item => {
return item.id === box5Select.value return item.id === box5Select.value
})[0]?.name })[0]?.name
...@@ -1693,6 +1727,14 @@ onUnmounted(() => { ...@@ -1693,6 +1727,14 @@ onUnmounted(() => {
border-radius: 50%; border-radius: 50%;
background: var(--color-primary-10); background: var(--color-primary-10);
flex-shrink: 0; flex-shrink: 0;
overflow: hidden;
img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
} }
.committee-card-content { .committee-card-content {
......
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { MUTICHARTCOLORS } from '../../../../common/constant'
const getMultiLineChart = (dataX, proposedData, passData, houseData, senateData, hsData) => {
const lineColors = MUTICHARTCOLORS.slice(0, 5)
const hexToRgba = (hex, alpha) => {
if (typeof hex !== 'string' || !hex.startsWith('#')) return hex
const normalized = hex.replace('#', '')
const full = normalized.length === 3
? normalized.split('').map(c => c + c).join('')
: normalized
const r = parseInt(full.slice(0, 2), 16)
const g = parseInt(full.slice(2, 4), 16)
const b = parseInt(full.slice(4, 6), 16)
return `rgba(${r}, ${g}, ${b}, ${alpha})`
}
const getAreaColor = color => new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: hexToRgba(color, 0.35)
}, {
offset: 1,
color: hexToRgba(color, 0)
}])
const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => {
return { return {
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
...@@ -28,7 +49,7 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => { ...@@ -28,7 +49,7 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => {
containLabel: true containLabel: true
}, },
legend: { legend: {
data: ['提出法案', '通过法案', '通过率'], data: ['提出法案', '通过法案', '众议院通过', '参议院通过', '双院通过'],
show: true, show: true,
top: 10, top: 10,
icon: 'circle', icon: 'circle',
...@@ -38,7 +59,7 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => { ...@@ -38,7 +59,7 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => {
fontSize: '14px', fontSize: '14px',
} }
}, },
color: ['#1677FF', '#FA8C16', '#D9001B'], color: lineColors,
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
...@@ -65,7 +86,6 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => { ...@@ -65,7 +86,6 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => {
{ {
type: 'value', type: 'value',
position: 'left', position: 'left',
// 纵轴单位只在纵轴上方显示一次(通过 axis.name),避免每个刻度重复显示
name: '项', name: '项',
nameLocation: 'end', nameLocation: 'end',
nameGap: 12, nameGap: 12,
...@@ -73,7 +93,6 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => { ...@@ -73,7 +93,6 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => {
color: '#666', color: '#666',
fontSize: 14, fontSize: 14,
fontWeight: 400, fontWeight: 400,
// 给单位一点点下移空间,使其更贴近顶部刻度数字的视觉基线
padding: [0, 0, 6, -20] padding: [0, 0, 6, -20]
}, },
axisLabel: { axisLabel: {
...@@ -89,36 +108,6 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => { ...@@ -89,36 +108,6 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => {
type: 'dashed', type: 'dashed',
} }
}, },
},
{
type: 'value',
position: 'right',
min: 0,
max: 100,
interval: 20,
// 通过率单位仅展示一次
name: '%',
nameLocation: 'end',
nameGap: 12,
nameTextStyle: {
color: '#666',
fontSize: 14,
fontWeight: 400,
padding: [0, 0, 6, 20]
},
axisLabel: {
formatter: '{value}',
color: '#666',
fontSize: 14,
fontWeight: 400
},
splitLine: {
show: true,
lineStyle: {
color: '#e7f3ff',
type: 'dashed',
}
},
} }
], ],
series: [ series: [
...@@ -129,18 +118,12 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => { ...@@ -129,18 +118,12 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => {
symbol: 'emptyCircle', symbol: 'emptyCircle',
symbolSize: 6, symbolSize: 6,
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: getAreaColor(lineColors[0])
offset: 0,
color: 'rgba(22, 119, 255, 0.4)' // 起始颜色
}, {
offset: 1,
color: 'rgba(22, 119, 255, 0)' // 结束颜色
}])
}, },
itemStyle: { itemStyle: {
color: '#1677FF' color: lineColors[0]
}, },
data: dataY1 data: proposedData
}, },
{ {
name: '通过法案', name: '通过法案',
...@@ -149,34 +132,54 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => { ...@@ -149,34 +132,54 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => {
symbol: 'emptyCircle', symbol: 'emptyCircle',
symbolSize: 6, symbolSize: 6,
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: getAreaColor(lineColors[1])
offset: 0,
color: 'rgba(250, 140, 22, 0.4)' // 起始颜色
}, {
offset: 1,
color: 'rgba(250, 140, 22, 0)' // 结束颜色
}])
}, },
itemStyle: { itemStyle: {
color: '#FA8C16' color: lineColors[1]
}, },
data: dataY2 data: passData
}, },
{ {
name: '通过率', name: '众议院通过',
type: 'line', type: 'line',
yAxisIndex: 1,
smooth: true, smooth: true,
symbol: 'emptyCircle', symbol: 'emptyCircle',
symbolSize: 4, symbolSize: 6,
lineStyle: { areaStyle: {
type: 'dashed', color: getAreaColor(lineColors[2])
width: 2 },
itemStyle: {
color: lineColors[2]
},
data: houseData
},
{
name: '参议院通过',
type: 'line',
smooth: true,
symbol: 'emptyCircle',
symbolSize: 6,
areaStyle: {
color: getAreaColor(lineColors[3])
},
itemStyle: {
color: lineColors[3]
},
data: senateData
},
{
name: '双院通过',
type: 'line',
smooth: true,
symbol: 'emptyCircle',
symbolSize: 6,
areaStyle: {
color: getAreaColor(lineColors[4])
}, },
itemStyle: { itemStyle: {
color: '#D9001B' color: lineColors[4]
}, },
data: dataY3 data: hsData
} }
] ]
} }
......
...@@ -253,7 +253,7 @@ const partyIconUrl = computed(() => { ...@@ -253,7 +253,7 @@ const partyIconUrl = computed(() => {
const reversedStageList = computed(() => { const reversedStageList = computed(() => {
const list = Array.isArray(basicInfo.value?.stageList) ? basicInfo.value.stageList : []; const list = Array.isArray(basicInfo.value?.stageList) ? basicInfo.value.stageList : [];
return [...list].reverse(); return [...list];
}); });
const stageListLength = computed(() => (Array.isArray(basicInfo.value?.stageList) ? basicInfo.value.stageList.length : 0)); const stageListLength = computed(() => (Array.isArray(basicInfo.value?.stageList) ? basicInfo.value.stageList.length : 0));
const stageActiveIndex = computed(() => stageListLength.value - 1); const stageActiveIndex = computed(() => stageListLength.value - 1);
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论