Skip to content

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

feat 新增法案议员列表查询

refactor 重构billhome法案主界面，拆分出最下方列表，拆分出出局卡片形成独立组件
上级 67255f2a
隐藏空白字符变更
内嵌 并排
正在显示 包含 299 行增加 和 846 行删除
src/api/bill/billHome.js
浏览文件 @ 5f3d772b
......@@ -14,20 +14,20 @@ export function getBillIndustry(params) {
// 涉华法案统计
export function getBillCount(params) {
return request({
method: 'GET',
url: `/api/BillOverview/billCount`,
params
})
return request({
method: 'GET',
url: `/api/BillOverview/billCount`,
params
})
}
// 获取关键条款
export function getBillOverviewKeyTK() {
return request({
method: 'GET',
url: `/api/BillOverview/keyTk`,
return request({
method: 'GET',
url: `/api/BillOverview/keyTk`,
})
})
}
// 获取热门法案列表
......@@ -104,22 +104,32 @@ export function getBillPostOrg(params) {
})
}
// 获取关键议员提案
// 获取涉华法案进展分布
/**
* @param {year}
* @param {year}
*/
export function getMemberProposal(params) {
export function getBillProcess(params) {
return request({
method: 'GET',
url: `/api/BillOverview/memberProposal/${params.year}`,
url: `/bill/BillOverview/billsProcess/${params.year}`,
})
}
// 获取资源库
// 获取资源库法案
export function getBills(params, signal) {
return request({
method: 'GET',
url: `/api/BillOverview/bills`,
url: `/bill/BillOverview/bills`,
params,
signal
})
}
// 获取资源库国会议员
export function getBillsPerson(params, signal) {
return request({
method: 'GET',
url: `/bill/BillOverview/billsPerson`,
params,
signal
})
......
src/views/bill/billHome/index.vue
浏览文件 @ 5f3d772b
......@@ -13,7 +13,10 @@
<DivideHeader id="position1" class="divide1" :titleText="'最新动态'"></DivideHeader>
<div class="home-content-center">
<div class="center-top">
<div class="box1">
<overviewMainBox class="box1" title="热门法案" @toDetail="handleClickToDetail">
<template #headerIcon>
<img style="width: 100%; height: 100%" src="./assets/images/box1-header-icon.png" alt="" />
</template>
<div class="box1-left" @click="handleSwithCurBill('left')">
<div class="icon">
<img src="./assets/images/box1-left.svg" alt="" />
......@@ -24,17 +27,6 @@
<img src="./assets/images/box1-right.svg" alt="" />
</div>
</div>
<div class="box1-header">
<div class="box1-header-left">
<div class="icon">
<img src="./assets/images/box1-header-icon.png" alt="" />
</div>
<div class="title">{{ "热门法案" }}</div>
</div>
<div class="box1-header-right" @click="handleClickToDetail()">
{{ "查看详情 >" }}
</div>
</div>
<div class="box1-main" style="display: block">
<el-carousel ref="carouselRef" height="354px" :autoplay="true" :interval="3000"
arrow="never" indicator-position="none" @change="handleCarouselChange">
......@@ -42,7 +34,6 @@
<div class="carousel-content" style="display: flex; height: 100%">
<div class="box1-main-left">
<div class="box1-main-left-title">
<!-- "H.R.1(119th)-大而美法案" -->
{{ bill.billName }}
</div>
<div class="box1-main-left-info">
......@@ -102,7 +93,7 @@
</el-carousel-item>
</el-carousel>
</div>
</div>
</overviewMainBox>
<RiskSignal :list="warningList" @more-click="handleToMoreRiskSignal"
@item-click="handleClickToDetailO" riskLevel="signalLevel" postDate="signalTime"
name="signalTitle" />
......@@ -112,320 +103,71 @@
<div class="center-center">
<NewsList :list="newsList" />
<MessageBubble :messageList="messageList" imageUrl="personImage"
@more-click="handleToSocialDetail" @person-click="handleClcikToCharacter" name="personName"
@more-click="handleToSocialDetail" @person-click="handleClickToCharacter" name="personName"
content="remarks" source="orgName" />
</div>
<DivideHeader id="position3" class="divide3" :titleText="'数据总览'"></DivideHeader>
<div class="center-footer">
<div class="box5">
<div class="box5-header">
<div class="box5-header-left">
<div class="box5-header-icon">
<img src="./assets/images/box5-header-icon.png" alt="" />
</div>
<div class="box5-header-title">{{ "涉华法案数量" }}</div>
</div>
<div class="box5-header-right">
<!-- <div class="header-right-icon">
<img src="./assets/images/tips-icon.png" alt="" />
</div>
<div class="header-right-text">{{ "数据来源：美国国会官方网站" }}</div> -->
<div class="box5-select">
<el-select v-model="box5Select" placeholder="选择领域" @change="handleBox5Change"
style="width: 150px">
<el-option label="全部领域" value="全部领域" />
<el-option v-for="item in categoryList" :key="item.id" :label="item.name"
:value="item.id" />
</el-select>
</div>
</div>
</div>
<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="全部领域" />
<el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</template>
<div class="box5-main" :style="getEmptyStateStyle(box5HasData)">
<el-empty v-if="!box5HasData" description="暂无数据" :image-size="100" />
<div v-else id="box5Chart" style="width: 100%; height: 100%"></div>
</div>
</div>
<div class="box6">
<div class="box6-header">
<div class="header-icon">
<img src="./assets/images/box6-header-icon.png" alt="" />
</div>
<div class="header-title">{{ "涉华法案领域分布" }}</div>
<div class="box6-header-right">
<el-select v-model="box9selectetedTime" placeholder="选择时间" style="width: 90px">
<el-option v-for="item in box9YearList" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</div>
</div>
</OverviewCard>
<OverviewCard class="overview-card--single box6" title="涉华法案领域分布" :icon="box6HeaderIcon">
<template #right>
<el-select v-model="box9selectetedTime" placeholder="选择时间" style="width: 90px">
<el-option v-for="item in box9YearList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</template>
<div class="box6-main" :style="getEmptyStateStyle(box9HasData)">
<el-empty v-if="!box9HasData" description="暂无数据" :image-size="100" />
<div v-else id="box9Chart" style="width: 100%; height: 100%"></div>
</div>
</div>
</OverviewCard>
</div>
<div class="center-footer1">
<div class="box7">
<div class="box7-header">
<div class="box7-header-left">
<div class="box7-header-icon">
<img src="./assets/images/box7-header-icon.png" alt="" />
</div>
<div class="box7-header-title">{{ "法案提出部门" }}</div>
</div>
<div class="box7-header-right">
<!-- <div class="header-right-icon">
<img src="./assets/images/tips-icon.png" alt="" />
</div> -->
<!-- <div class="header-right-text">{{ "数据来源：美国国会官方网站" }}</div> -->
<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" />
</el-select>
</div>
</div>
<!-- <div class="box-center">
<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"
/>
<el-option v-for="item in box7YearList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div> -->
</template>
<div class="box7-main" :style="getEmptyStateStyle(box7HasData)">
<el-empty v-if="!box7HasData" description="暂无数据" :image-size="100" />
<div v-else id="box7Chart" style="width: 100%; height: 100%"></div>
</div>
</div>
<div class="box8">
<div class="box8-header">
<div class="box8-header-left">
<div class="box8-header-icon">
<img src="./assets/images/box7-header-icon.png" alt="" />
</div>
<div class="box8-header-title">{{ "关键议员提案" }}</div>
</div>
<div class="box8-header-right">
<!-- <div class="header-right-icon">
<img src="./assets/images/tips-icon.png" alt="" />
</div> -->
<!-- <div class="header-right-text">{{ "数据来源：美国国会官方网站" }}</div> -->
<el-select v-model="box8selectetedTime" placeholder="选择时间" style="width: 90px">
<el-option v-for="item in box8YearList" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</div>
</div>
<!-- <div class="box-center">
</OverviewCard>
<OverviewCard class="overview-card--single box8" title="涉华法案进展分布" :icon="box7HeaderIcon">
<template #right>
<el-select v-model="box8selectetedTime" placeholder="选择时间" style="width: 90px">
<el-option
v-for="item in box8YearList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-option v-for="item in box8YearList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div> -->
<div class="box8-main" :style="getEmptyStateStyle(box8Data.length > 0)">
<el-empty v-if="box8Data.length === 0" description="暂无数据" :image-size="100" />
<div v-else class="box8-main-item" v-for="(item, index) in box8Data" :key="index"
@click="handleClcikToCharacter(item.memberId, item.name)">
<div class="box8-main-item-left">
<img :src="getProxyUrl(item.img)" alt="" referrerpolicy="no-referrer"
class="left-img" />
<div class="left-icon1">
<img :src="item.dangpai" alt="" />
</div>
<div class="left-icon2">
<img :src="item.yuan" alt="" />
</div>
</div>
<div class="box8-main-item-center">
<div class="box8-main-item-center-top">{{ item.name }}</div>
<div class="box8-main-item-center-footer">{{ item.zhiwei }}</div>
</div>
<div class="box8-main-item-right">
{{ `${item.num}项提案 >` }}
</div>
</div>
</div>
</div>
<div class="box9">
<div class="box9-header">
<div class="box9-header-left">
<div class="box9-header-icon">
<img src="./assets/images/box7-header-icon.png" alt="" />
</div>
<div class="box9-header-title">{{ "关键条款" }}</div>
</div>
</template>
<div class="box8-main" :style="getEmptyStateStyle(box8HasData)">
<el-empty v-if="!box8HasData" description="暂无数据" :image-size="100" />
<template v-else>
<div class="box8-desc">• 通过涉华法案{{ box8Summary }}项</div>
<div id="box8Chart" class="box8-chart"></div>
</template>
</div>
</OverviewCard>
<OverviewCard class="overview-card--single box9" title="关键条款" :icon="box7HeaderIcon">
<div class="box9-main" id="wordCloudChart"></div>
</div>
</OverviewCard>
</div>
</div>
</div>
<div class="home-content-footer">
<DivideHeader id="position4" class="divide4" :titleText="'资源库'"></DivideHeader>
<div class="home-content-footer-header">
<div class="btn-box">
<div class="btn" :class="{ btnActive: activeTabName === cate.name, disabled: index !== 0 }"
v-for="(cate, index) in tabList" :key="index" @click="index === 0 && handleClickTab(cate)">
{{ cate.name }}
</div>
</div>
</div>
<div class="home-content-footer-main">
<div class="left">
<div class="select-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "科技领域" }}</div>
</div>
<div class="select-main">
<el-checkbox-group class="checkbox-group" v-model="activeAreaList"
@change="handleAreaChange">
<el-checkbox class="filter-checkbox" label="全部领域"> 全部领域 </el-checkbox>
<el-checkbox v-for="(area, index) in cateKuList" :key="index" :label="area.id"
class="filter-checkbox">
{{ area.name }}
</el-checkbox>
</el-checkbox-group>
</div>
</div>
<div class="select-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "党派" }}</div>
</div>
<div class="select-main">
<el-checkbox-group class="checkbox-group" v-model="activeDpList"
@change="handleDpChange">
<el-checkbox v-for="(dp, index) in dpList" :key="index" :label="dp.id"
class="filter-checkbox">
{{ dp.name }}
</el-checkbox>
</el-checkbox-group>
</div>
</div>
<div class="select-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "议院" }}</div>
</div>
<div class="select-main">
<el-checkbox-group class="checkbox-group" v-model="activeYyList"
@change="handleYyChange">
<el-checkbox v-for="(yy, index) in yyList" :key="index" :label="yy.id"
class="filter-checkbox">
{{ yy.name }}
</el-checkbox>
</el-checkbox-group>
</div>
</div>
<div class="select-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "发布时间" }}</div>
</div>
<div class="select-main">
<el-checkbox-group class="checkbox-group" v-model="activePubTime"
@change="handlePubTimeChange">
<el-checkbox v-for="(time, index) in pubTime" :key="index" :label="time.id"
class="filter-checkbox">
{{ time.name }}
</el-checkbox>
</el-checkbox-group>
</div>
</div>
</div>
<div class="right">
<div class="right-header">
<div class="right-header-box">
<el-select v-model="footerSelect1" placeholder="选择委员会" style="width: 240px"
@change="handleFooterSelect1Change">
<el-option v-for="item in postOrgList" :key="item.departmentId"
:label="item.departmentName" :value="item.departmentId" />
</el-select>
</div>
<div class="right-header-box">
<el-select v-model="footerSelect2" placeholder="选择提出议员" style="width: 240px"
@change="handleFooterSelect2Change">
<el-option v-for="item in postMemberList" :key="item.memberId"
:label="item.memberName" :value="item.memberId" />
</el-select>
</div>
<div class="right-header-box" style="margin-left: auto">
<el-select v-model="releaseTime" placeholder="选择排序方式" style="width: 120px"
@change="handlePxChange">
<template #prefix>
<div style="display: flex; align-items: center; height: 100%">
<img :src="desc" style="width: 14px; height: 14px" />
</div>
</template>
<el-option v-for="item in releaseTimeList" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</div>
</div>
<div class="right-main" v-loading="loading">
<div class="right-main-box" v-for="(item, index) in bills" :key="index">
<div class="header">
<div class="title" @click="handleClickToDetailO(item)" :title="item.name">
{{ item.name }}
</div>
<div class="en-title" :title="item.eName">{{ item.eName }}</div>
</div>
<div class="main">
<div class="item">
<div class="item-left">{{ "提案人：" }}</div>
<div class="item-right">{{ item.tcr }}</div>
</div>
<div class="item">
<div class="item-left">{{ "委员会：" }}</div>
<div class="item-right">{{ item.wyh }}</div>
</div>
<div class="item">
<div class="item-left">{{ "相关领域：" }}</div>
<div class="item-right1">
<div class="tag" v-for="(val, idx) in item.areaList" :key="idx">{{ val }}
</div>
</div>
</div>
<div class="item">
<div class="item-left">{{ "最新动议：" }}</div>
<div class="item-right">
<CommonPrompt :content="item.zxdy" />
</div>
</div>
<div class="item">
<div class="item-left">{{ "法案进展：" }}</div>
<div class="item-right2">
<div class="tag" v-for="(val, idx) in [...item.progress].reverse()"
:key="idx" :style="{ zIndex: item.progress.length - idx }">
{{ val }}
</div>
</div>
</div>
</div>
</div>
<div class="right-footer">
<div class="footer-left">
{{ `共 ${total} 项` }}
</div>
<div class="footer-right">
<el-pagination @current-change="handleCurrentChange" :page-size="pageSize"
:current-page="currentPage" background layout="prev, pager, next"
:total="total" />
</div>
</div>
</div>
</div>
</div>
<ResourceLibrarySection :on-click-to-detail="handleClickToDetailO" :on-after-page-change="handlePageChange" />
</div>
</div>
</div>
......@@ -444,16 +186,15 @@ import {
getBillOverviewKeyTK,
getBillCount,
getBillPostOrg,
getMemberProposal,
getBillProcess,
getNews,
getRemarks,
getPostOrgList,
getPostMemberList,
getBills
getRemarks
} from "@/api/bill/billHome";
import { getPersonSummaryInfo } from "@/api/common/index";
import DivideHeader from "@/components/DivideHeader.vue";
import CommonPrompt from "../commonPrompt/index.vue";
import overviewMainBox from "@/components/base/boxBackground/overviewMainBox.vue";
import OverviewCard from "./OverviewCard.vue";
import ResourceLibrarySection from "./ResourceLibrarySection.vue";
import { useContainerScroll } from "@/hooks/useScrollShow";
import getMultiLineChart from "./utils/multiLineChart";
......@@ -461,34 +202,15 @@ import getWordCloudChart from "./utils/worldCloudChart";
import getPieChart from "./utils/piechart";
import getDoublePieChart from "./utils/doublePieChart";
import desc from "./assets/icons/icon-desc.png";
import box5HeaderIcon from "./assets/images/box5-header-icon.png";
import box6HeaderIcon from "./assets/images/box6-header-icon.png";
import box7HeaderIcon from "./assets/images/box7-header-icon.png";
import Cyy from "@/assets/icons/cyy.png";
import Ghd from "@/assets/icons/ghd.png";
import Mzd from "@/assets/icons/mzd.png";
import { ElMessage } from "element-plus";
// 处理图片代理
const getProxyUrl = url => {
if (!url) return "";
const urlStr = String(url);
// 排除非 http 开头（相对路径）、已经是代理链接、或者是本地链接
if (
!urlStr.startsWith("http") ||
urlStr.includes("images.weserv.nl") ||
urlStr.includes("localhost") ||
urlStr.includes("127.0.0.1")
) {
return url;
}
// 移除协议头 http:// 或 https://
const cleanUrl = urlStr.replace(/^https?:\/\//i, "");
return `https://images.weserv.nl/?url=${encodeURIComponent(cleanUrl)}`;
};
// 跳转人物主页
const handleClcikToCharacter = async (id, name) => {
const handleClickToCharacter = async (id, name) => {
const personTypeList = JSON.parse(window.sessionStorage.getItem("personTypeList"));
let type = 0;
......@@ -1143,29 +865,189 @@ watch(box9selectetedTime, () => {
handleBox9Data();
});
const box8Data = ref([]);
const box8HasData = ref(true);
const box8Summary = ref(0);
let box8ChartInstance = null;
const box8MockDataByYear = {
"2025": {
passCount: 19,
stages: [
{ name: "已提案", count: 24 },
{ name: "众议院通过", count: 20 },
{ name: "众议院不通过", count: 25 },
{ name: "解决分歧", count: 23 },
{ name: "参议院通过", count: 26 },
{ name: "总统否决", count: 48 },
{ name: "已立法", count: 19 }
]
}
};
const getBox8ChartOption = stageList => {
const axisMax = 100;
const countList = stageList.map(item => item.count || 0);
const totalCount = countList.reduce((sum, cur) => sum + cur, 0);
const safeTotal = totalCount > 0 ? totalCount : 1;
const rawWidths = countList.map(count => (count / safeTotal) * axisMax);
const markerData = rawWidths.map((width, index) => {
if (index === rawWidths.length - 1) {
const used = rawWidths.slice(0, index).reduce((sum, cur) => sum + Number(cur.toFixed(4)), 0);
return Number(Math.max(axisMax - used, 0).toFixed(4));
}
return Number(width.toFixed(4));
});
let cumulative = 0;
const offsetData = markerData.map(width => {
const start = Number(cumulative.toFixed(4));
cumulative += width;
return start;
});
const trackData = stageList.map(() => axisMax);
return {
tooltip: {
trigger: "item",
confine: true,
backgroundColor: "rgba(34, 44, 58, 0.92)",
borderWidth: 0,
textStyle: {
color: "#fff",
fontSize: 13
},
formatter: params => {
const item = stageList[params.dataIndex];
if (!item) return "";
return `${item.name}<br/>${item.count}项`;
}
},
grid: {
left: 118,
right: 60,
top: 6,
bottom: 6
},
xAxis: {
type: "value",
min: 0,
max: axisMax,
show: false
},
yAxis: {
type: "category",
inverse: true,
data: stageList.map(item => item.name),
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
color: "#3b414b",
fontSize: 16
}
},
series: [
{
type: "bar",
barWidth: 32,
barGap: "-100%",
silent: true,
data: trackData,
itemStyle: {
color: params => (params.dataIndex === stageList.length - 1 ? "rgba(206, 79, 81, 0.1)" : "rgb(246, 250, 255)")
},
label: {
show: true,
position: "right",
formatter: params => `${countList[params.dataIndex]}项`,
color: params => (params.dataIndex === stageList.length - 1 ? "rgb(206, 79, 81)" : "#3b414b"),
fontSize: 36 / 2,
fontWeight: params => (params.dataIndex === stageList.length - 1 ? 700 : 400)
}
},
{
type: "bar",
stack: "progress",
barWidth: 32,
silent: true,
data: offsetData,
itemStyle: { color: "transparent" }
},
{
type: "bar",
stack: "progress",
barWidth: 32,
data: markerData,
itemStyle: {
color: params => (params.dataIndex === stageList.length - 1 ? "rgb(206, 79, 81)" : "rgb(5, 95, 194)")
},
emphasis: {
disabled: false,
itemStyle: {
borderColor: "rgba(255, 255, 255, 0.9)",
borderWidth: 2,
shadowBlur: 10,
shadowColor: "rgba(5, 95, 194, 0.35)"
}
}
}
]
};
};
const handleBox8Data = async () => {
const stageOrder = ["提案", "众议院通过", "众议院不通过", "分歧已解决", "参议院通过", "总统否决或未签署", "完成立法"];
const stageNameMap = {
提案: "已提案",
众议院通过: "众议院通过",
众议院不通过: "众议院不通过",
分歧已解决: "解决分歧",
参议院通过: "参议院通过",
"总统否决或未签署": "总统否决",
完成立法: "已立法"
};
try {
const res = await getMemberProposal({ year: box8selectetedTime.value });
console.log("关键议员提案", res);
if (res.code === 200 && res.data) {
box8Data.value = res.data.map(item => ({
memberId: item.memberId,
name: item.memberName,
zhiwei: item.position,
img: item.imageUrl,
num: item.countProposal,
dangpai: Cyy,
yuan: item.position === "Democratic" ? Mzd : Ghd
const res = await getBillProcess({ year: box8selectetedTime.value });
console.log("涉华法案进展分布", res);
if (res.code === 200 && res.data && res.data.length > 0) {
const countMap = new Map(res.data.map(item => [item.progressName, item.countBill]));
const stages = stageOrder.map(name => ({
name: stageNameMap[name],
count: countMap.get(name) || 0
}));
box8HasData.value = true;
box8Summary.value = countMap.get("完成立法") || 0;
await nextTick();
const box8Chart = getBox8ChartOption(stages);
box8ChartInstance = setChart(box8Chart, "box8Chart");
} else {
// 接口异常（如500）时，清空图表数据以避免报错或显示错误信息
box8Data.value = [];
const data = box8MockDataByYear[box8selectetedTime.value];
if (data && data.stages && data.stages.length > 0) {
box8HasData.value = true;
box8Summary.value = data.passCount || 0;
await nextTick();
const box8Chart = getBox8ChartOption(data.stages);
box8ChartInstance = setChart(box8Chart, "box8Chart");
} else {
box8HasData.value = false;
box8Summary.value = 0;
setChart({}, "box8Chart");
}
}
} catch (error) {
console.error("获取关键议员提案失败", error);
box8Data.value = [];
console.error("获取涉华法案进展分布失败", error);
const data = box8MockDataByYear[box8selectetedTime.value];
if (data && data.stages && data.stages.length > 0) {
box8HasData.value = true;
box8Summary.value = data.passCount || 0;
await nextTick();
const box8Chart = getBox8ChartOption(data.stages);
box8ChartInstance = setChart(box8Chart, "box8Chart");
} else {
box8HasData.value = false;
box8Summary.value = 0;
setChart({}, "box8Chart");
}
}
};
......@@ -1337,6 +1219,7 @@ const footerSelect2 = ref("全部提出议员");
// ]);
const handleResize = () => {
box8ChartInstance && box8ChartInstance.resize();
box9ChartInstance && box9ChartInstance.resize();
};
......@@ -2449,510 +2332,65 @@ onUnmounted(() => {
margin-bottom: 36px;
}
$overview-card-gap: 16px;
$overview-single-width: calc((100% - #{$overview-card-gap} * 2) / 3);
.center-footer {
margin-top: 21px;
height: 450px;
display: flex;
.box5 {
width: 1059px;
height: 450px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
position: relative;
.box5-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin: 0 auto;
display: flex;
justify-content: space-between;
padding: 0 27px 0 22px;
.box5-header-left {
display: flex;
.box5-header-icon {
margin-top: 16px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box5-header-title {
margin-top: 11px;
margin-left: 19px;
height: 26px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
}
.box5-header-right {
display: flex;
justify-content: flex-end;
gap: 8px;
height: 24px;
margin-top: 12px;
.header-right-icon {
margin-top: 4px;
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.header-right-text {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
.box5-main {
height: 397px;
padding: 8px 16px 8px 16px;
}
}
.box6 {
margin-left: 20px;
width: 521px;
height: 450px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
.box6-header {
width: 521px;
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
box-sizing: border-box;
padding-left: 22px;
.header-icon {
margin-top: 15px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
margin-top: 11px;
margin-left: 18px;
height: 26px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
.box6-header-right {
margin-left: 130px;
display: flex;
justify-content: flex-end;
gap: 8px;
height: 24px;
margin-top: 12px;
.header-right-icon {
margin-top: 4px;
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.header-right-text {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
.box6-main {
width: 100%;
height: calc(100% - 53px);
}
}
gap: $overview-card-gap;
width: 100%;
}
.center-footer1 {
display: flex;
gap: 16px;
gap: $overview-card-gap;
margin-top: 16px;
width: 100%;
}
.box7 {
width: 520px;
height: 450px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box7-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin: 0 auto;
display: flex;
justify-content: space-between;
padding: 0 27px 0 22px;
.box7-header-left {
display: flex;
.box7-header-icon {
margin-top: 16px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box7-header-title {
margin-top: 11px;
margin-left: 19px;
height: 26px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
}
.box7-header-right {
display: flex;
justify-content: flex-end;
gap: 8px;
height: 24px;
margin-top: 12px;
.header-right-icon {
margin-top: 4px;
width: 14px;
height: 16px;
.overview-card--single {
width: $overview-single-width;
}
img {
width: 100%;
height: 100%;
}
}
.overview-card--double {
width: calc(#{$overview-single-width} * 2 + #{$overview-card-gap});
}
.box5-main,
.box6-main,
.box7-main,
.box9-main {
height: 100%;
box-sizing: border-box;
}
.header-right-text {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
.box5-main {
padding: 8px 16px;
}
.box-center {
height: 45px;
padding-right: 20px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.box8-main {
height: 100%;
box-sizing: border-box;
padding: 12px 20px 18px;
.box7-main {
height: 390px;
}
.box8-desc {
height: 24px;
line-height: 24px;
color: rgb(206, 79, 81);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
}
.box8 {
width: 527px;
height: 450px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box8-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin: 0 auto;
display: flex;
justify-content: space-between;
padding: 0 27px 0 22px;
.box8-header-left {
display: flex;
.box8-header-icon {
margin-top: 16px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box8-header-title {
margin-top: 11px;
margin-left: 19px;
height: 26px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
}
.box8-header-right {
display: flex;
justify-content: flex-end;
gap: 8px;
height: 24px;
margin-top: 12px;
.header-right-icon {
margin-top: 4px;
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.header-right-text {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
.box8-main {
height: 380px;
overflow: hidden;
padding: 20px;
.box8-main-item {
// margin: 0 auto;
width: 478px;
height: 51px;
margin-bottom: 20px;
display: flex;
align-items: center;
position: relative;
// padding: 0 10px;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.box8-main-item-left {
position: relative;
width: 42px;
height: 42px;
.left-img {
width: 42px;
height: 42px;
border-radius: 50%;
}
.left-icon1 {
position: absolute;
left: 2px;
bottom: -6px;
width: 20px;
height: 20px;
border-radius: 10px;
background: (255, 255, 255, 0.8);
box-sizing: border-box;
padding: 2px;
img {
width: 100%;
height: 100%;
}
}
.left-icon2 {
position: absolute;
right: 2px;
bottom: -6px;
width: 20px;
height: 20px;
border-radius: 10px;
background: (255, 255, 255, 0.8);
box-sizing: border-box;
padding: 2px;
img {
width: 100%;
height: 100%;
}
}
}
.box8-main-item-center {
height: 48px;
margin-left: 12px;
.box8-main-item-center-top {
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.box8-main-item-center-footer {
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
.box8-main-item-right {
position: absolute;
top: 0;
right: 10px;
height: 51px;
text-align: right;
color: rgba(95, 101, 108, 1);
font-family: "Microsoft YaHei";
font-size: 16px;
font-weight: 400;
line-height: 51px;
}
}
}
.box8-chart {
width: 100%;
height: calc(100% - 30px);
cursor: pointer;
}
}
.box9 {
width: 521px;
height: 450px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box9-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin: 0 auto;
display: flex;
justify-content: space-between;
padding: 0 27px 0 22px;
.box9-header-left {
display: flex;
.box9-header-icon {
margin-top: 16px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box9-header-title {
margin-top: 11px;
margin-left: 19px;
height: 26px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
}
.box9-header-right {
display: flex;
justify-content: flex-end;
gap: 8px;
height: 24px;
margin-top: 12px;
.header-right-icon {
margin-top: 4px;
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.header-right-text {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
.box-center {
height: 45px;
padding-right: 20px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.box9-main {
height: 380px;
padding: 10px 20px;
}
}
.box9-main {
padding: 10px 20px;
}
}
}
......
vite.config.js
浏览文件 @ 5f3d772b
......@@ -88,8 +88,13 @@ export default defineConfig({
changeOrigin: true,
rewrite: (path) => path.replace(/^\/temporarySearch/, '')
},
'^/bill(?:/|$)': {
target: 'http://172.20.10.3:28080/',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/bill/, '')
},
'/pdfSse': {
target: 'http://8.140.26.4:10020/',
target: 'http://8.140.26.4:10020/',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/pdfSse/, ''),
configure: (proxy) => {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论