Skip to content

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

style 修改aipane和waringpane样式

fix 根据修改意见修改法案首页 fix 修改影响分析部分界面
上级 0892a0ac
隐藏空白字符变更
内嵌 并排
正在显示 包含 399 行增加 和 377 行删除
src/components/SearchContainer.vue
浏览文件 @ 45af5214
......@@ -10,8 +10,7 @@
</div>
<div
class="search-type-tab"
:class="{ active: billSearchType === 'state' }"
@click="handleChangeBillSearchType('state')"
:class="{ active: billSearchType === 'state', 'is-disabled': true }"
>
州议会
</div>
......@@ -206,6 +205,11 @@ const handleToPosi = id => {
color: rgb(5, 95, 194);
border-color: rgb(255, 255, 255);
}
.search-type-tab.is-disabled {
cursor: not-allowed;
opacity: 0.6;
}
}
.search-main-with-tabs {
......
src/components/base/Ai/AiPane/index.vue
浏览文件 @ 45af5214
......@@ -24,7 +24,8 @@ const props = defineProps({
<style lang="scss">
.ai-pane-wrapper {
width: 100%;
height: 156px;
min-height: 156px;
height: auto;
background: var(--color-primary-2);
box-sizing: border-box;
padding: 12px 16px;
......@@ -57,18 +58,15 @@ const props = defineProps({
.content {
margin-top: 8px;
width: 100%;
height: 90px;
min-height: 90px;
height: auto;
box-sizing: border-box;
padding: 0 12px;
color: var(--color-primary-100);
display: -webkit-box;
-webkit-line-clamp: 3;
/* 控制显示的行数 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
display: block;
overflow: visible;
word-break: break-word;
/* 防止长单词溢出 */
white-space: pre-wrap;
}
}
</style>
\ No newline at end of file
src/components/base/WarningPane/index.vue
浏览文件 @ 45af5214
<template>
<div class="warnning-pane-wrapper" :style="{ width: width ? width : '1600px', height: height ? height : '116px' }"
<div class="warnning-pane-wrapper" :style="{ width: width ? width : '1600px', height: height ? height : 'auto', minHeight: height ? undefined : '116px' }"
:class="{
level1: warnningLevel === '特别重大风险',
level2: warnningLevel === '重大风险',
......@@ -146,15 +146,12 @@ const handleClickPane = () => {
.warnning-pane-content{
width: calc(100% - 40px);
margin: 0 auto;
height: 60px;
display: -webkit-box;
/* 2. 设置内部布局方向为垂直 */
-webkit-box-orient: vertical;
/* 3. 限制显示的行数为 2 行 */
-webkit-line-clamp: 2;
/* 4. 隐藏超出部分 */
overflow: hidden;
/* 5. 设置文本溢出显示省略号 */
text-overflow: ellipsis;
margin-bottom: 16px;
min-height: 60px;
height: auto;
display: block;
overflow: visible;
white-space: pre-wrap;
word-break: break-word;
}
</style>
\ No newline at end of file
src/views/bill/billHome/ResourceLibrarySection.vue
浏览文件 @ 45af5214
......@@ -260,6 +260,7 @@
import { computed, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { getHylyList, getPostOrgList, getPostMemberList, getBills, getBillsPerson, getBillsPersonRel, getBillsIsCnCommittee } from "@/api/bill/billHome";
import { getPersonSummaryInfo } from "@/api/common/index";
import CommonPrompt from "../commonPrompt/index.vue";
import desc from "./assets/icons/icon-desc.png";
import defaultAvatar from "@/assets/icons/default-icon1.png";
......@@ -268,6 +269,7 @@ import zyyIcon from "@/assets/icons/zyy.png";
import cyyIcon from "@/assets/icons/cyy.png";
import ghdIcon from "@/assets/icons/ghd.png";
import mzdIcon from "@/assets/icons/mzd.png";
import { ElMessage } from "element-plus";
const router = useRouter();
......@@ -405,16 +407,48 @@ const handleBillImageError = e => {
img.src = defaultBill;
};
const handleClickAvatar = member => {
const handleClickAvatar = async member => {
if (!member?.id) return;
window.sessionStorage.setItem("curTabName", member.name || "");
const routeData = router.resolve({
path: "/characterPage",
query: {
personId: member.id
const personTypeList = JSON.parse(window.sessionStorage.getItem("personTypeList") || "[]");
let type = 0;
let personTypeName = "";
const params = {
personId: member.id
};
try {
const res = await getPersonSummaryInfo(params);
if (res.code === 200 && res.data) {
const arr = personTypeList.filter(item => item.typeId === res.data.personType);
if (arr && arr.length > 0) {
personTypeName = arr[0].typeName;
if (personTypeName === "科技企业领袖") {
type = 1;
} else if (personTypeName === "国会议员") {
type = 2;
} else if (personTypeName === "智库研究人员") {
type = 3;
} else {
personTypeName = "";
ElMessage.warning("找不到当前人员的类型值！");
return;
}
window.sessionStorage.setItem("curTabName", member.name || "");
const routeData = router.resolve({
path: "/characterPage",
query: {
type,
personId: member.id
}
});
window.open(routeData.href, "_blank");
} else {
personTypeName = "";
ElMessage.warning("找不到当前人员的类型值！");
}
} else {
ElMessage.warning("找不到当前人员的类型值！");
}
});
window.open(routeData.href, "_blank");
} catch (error) {}
};
const getReversedProgress = progress => (Array.isArray(progress) ? [...progress].reverse() : []);
......
src/views/bill/influence/industry/index.vue
浏览文件 @ 45af5214
<template>
<div class="industry-wrap">
<div class="left">
<div class="box-header">
<div class="header-left"></div>
<div class="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="left-top" id="chart1"></div>
<div class="left-center">
<div class="left-center-btn-box">
<div
class="left-center-btn"
:class="{ btnActive: box1BtnActive === index }"
v-for="(item, index) in industryList"
:key="index"
@click="handleClickBox1Btn(item, index)"
>
{{ item.name }}
<AnalysisBox title="涉及行业" :showAllBtn="false" width="100%" height="100%">
<div class="left-main">
<div class="left-center">
<el-select
v-model="curHylyId"
placeholder="请选择行业"
class="left-center-select"
@change="handleIndustryChange"
>
<el-option
v-for="item in industryList"
:key="item.id"
:label="item.name || item.hylymc"
:value="item.id"
/>
</el-select>
<el-input
v-model="companySearchKeyword"
placeholder="搜索实体"
class="left-center-search"
:suffix-icon="Search"
clearable
/>
</div>
</div>
</div>
<div class="left-footer">
<div class="item-box">
<div
class="item"
:class="{ itemActive: companyActiveIndex === idx }"
@click="handleClickCompany(val, idx)"
v-for="(val, idx) in curCompanyList"
:key="idx"
>
<div class="id">{{ (currentPage - 1) * pageSize + idx + 1 }}</div>
<div class="title" :class="{ titleActive: companyActiveIndex === ((currentPage - 1) * pageSize + idx) }">
{{ val.name }}
<div class="left-footer">
<div class="item-box">
<div class="item" :class="{ itemActive: companyActiveIndex === idx }"
@click="handleClickCompany(val, idx)" v-for="(val, idx) in curCompanyList" :key="val.id">
<div class="id">{{ (currentPage - 1) * pageSize + idx + 1 }}</div>
<div class="title"
:class="{ titleActive: companyActiveIndex === ((currentPage - 1) * pageSize + idx) }">
{{ val.name }}
</div>
<div class="icon">
<img v-if="val.status === 'up'" :src="upIcon" alt="" />
<img v-if="val.status === 'down'" :src="downIcon" alt="" />
</div>
</div>
</div>
<div class="icon">
<img v-if="val.status === 'up'" :src="upIcon" alt="" />
<img v-if="val.status === 'down'" :src="downIcon" alt="" />
<div class="footer-box">
<div class="left">{{ `共 ${filteredCompanyList.length} 项` }}</div>
<div class="right">
<el-pagination @current-change="handleCurrentChange" :pageSize="pageSize"
:current-page="currentPage" size="small" background layout="prev, pager, next"
:total="filteredCompanyList.length" />
</div>
</div>
</div>
</div>
<div class="footer-box">
<div class="left">{{ `共 ${companyList.length} 项` }}</div>
<div class="right">
<el-pagination
@current-change="handleCurrentChange"
:pageSize="pageSize"
:current-page="currentPage"
size="small"
background
layout="prev, pager, next"
:total="companyList.length"
/>
</div>
</div>
</div>
</AnalysisBox>
</div>
<div class="right">
<div class="box-header">
<div class="header-left"></div>
<div class="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-main">
<div class="right-main-content" id="chartGraph">
<div class="right-main-content-header">
<div class="header-item1">
<div class="header-item1-top">{{ "基础支撑" }}</div>
<div class="header-item1-bottom">
<div class="icon">
<img src="./assets/images/warning.png" alt="" />
</div>
<div class="text">
{{ "中国企业45家（51.00%），受制裁3家（7.00%）" }}
<AnalysisBox title="产业链分析" :showAllBtn="false" width="100%" height="100%">
<div class="right-main">
<div class="right-main-content" id="chartGraph">
<div class="right-main-content-header">
<div class="header-item1">
<div class="header-item1-top">{{ "基础支撑" }}</div>
<div class="header-item1-bottom">
<div class="icon">
<img src="./assets/images/warning.png" alt="" />
</div>
<div class="text">
{{ "中国企业45家（51.00%），受制裁3家（7.00%）" }}
</div>
</div>
</div>
</div>
<div class="header-item2">
<div class="header-item2-top">{{ "软件算法" }}</div>
<div class="header-item2-bottom">
<div class="icon">
<img src="./assets/images/warning.png" alt="" />
</div>
<div class="text">
{{ "中国企业45家（51.00%），受制裁3家（7.00%）" }}
<div class="header-item2">
<div class="header-item2-top">{{ "软件算法" }}</div>
<div class="header-item2-bottom">
<div class="icon">
<img src="./assets/images/warning.png" alt="" />
</div>
<div class="text">
{{ "中国企业45家（51.00%），受制裁3家（7.00%）" }}
</div>
</div>
</div>
</div>
<div class="header-item3">
<div class="header-item3-top">{{ "行业应用" }}</div>
<div class="header-item3-bottom">
<div class="icon">
<img src="./assets/images/warning.png" alt="" />
</div>
<div class="text">
{{ "中国企业45家（51.00%），受制裁3家（7.00%）" }}
<div class="header-item3">
<div class="header-item3-top">{{ "行业应用" }}</div>
<div class="header-item3-bottom">
<div class="icon">
<img src="./assets/images/warning.png" alt="" />
</div>
<div class="text">
{{ "中国企业45家（51.00%），受制裁3家（7.00%）" }}
</div>
</div>
</div>
</div>
<div class="right-main-content-main">
<Fishbone />
</div>
</div>
<div class="right-main-content-main">
<Fishbone />
</div>
</div>
<div class="box-footer">
<div class="box-footer-left">
<img src="../assets/icons/right-icon1.png" alt="" />
</div>
<div class="box-footer-center">
法案以218:214​（众议院）和51:50​（副总统决胜票）微弱优势强行通过，暴露两党极端对立、党内倒戈频发的特点。
</div>
<div class="box-footer-right">
<img src="../assets/icons/arrow-right.png" alt="" />
<div class="box-footer">
<div class="box-footer-left">
<img src="../assets/icons/right-icon1.png" alt="" />
</div>
<div class="box-footer-center">
法案以218:214​（众议院）和51:50​（副总统决胜票）微弱优势强行通过，暴露两党极端对立、党内倒戈频发的特点。
</div>
<div class="box-footer-right">
<img src="../assets/icons/arrow-right.png" alt="" />
</div>
</div>
</div>
</div>
</AnalysisBox>
<div class="graph-dialog" v-if="isShowCompanyDialog">
<div class="tool-box">
<div class="tool" @click="handleChangeChart(0)">
......@@ -210,13 +184,12 @@
</template>
<script setup>
import { ref, onMounted, nextTick, computed } from "vue";
import { ref, onMounted, nextTick, computed, watch } from "vue";
import { useRoute } from "vue-router";
import * as echarts from "echarts";
const route = useRoute();
import { getCompanyList, getIndustryHyly, getHylyList, getCompanyDetail } from "@/api/influence";
import getBarChart from "./utils/barChart";
import { getCompanyList, getHylyList, getCompanyDetail } from "@/api/influence";
import getLineChart from "./utils/lineChart";
import getBarChart1 from "./utils/barChart1";
import getGraph from "./utils/graph";
......@@ -233,18 +206,16 @@ import uncheckIcon from "./assets/images/uncheck.png";
import checkedIcon from "./assets/images/checked.png";
import closeIcon from "./assets/images/close.png";
import { Search } from "@element-plus/icons-vue";
import Fishbone from "./components/fishbone.vue";
import CommonPrompt from "../../commonPrompt/index.vue";
import AnalysisBox from "@/components/base/boxBackground/analysisBox.vue";
import CompanyImg from "./assets/images/symbol.png";
const isShowCompanyDialog = ref(false);
const box1BtnActive = ref(0);
const handleClickBox1Btn = (industry, index) => {
box1BtnActive.value = index;
curHylyId.value = industry.id;
const handleIndustryChange = () => {
handleGetCompanyListById();
};
......@@ -258,32 +229,6 @@ const setChart = (option, chartId) => {
return chart;
};
const chart1Data = ref({
name: [],
value: [],
});
const showAllChart1 = ref(false);
const fullChart1Data = ref({ name: [], value: [] });
// const handleToggleChart1 = () => {
// showAllChart1.value = !showAllChart1.value;
// renderChart1();
// };
const renderChart1 = () => {
let dataName = fullChart1Data.value.name;
let dataValue = fullChart1Data.value.value;
// if (!showAllChart1.value && dataName.length > 5) {
// dataName = dataName.slice(0, 5);
// dataValue = dataValue.slice(0, 5);
// }
let chart1 = getBarChart(dataName, dataValue);
setChart(chart1, "chart1");
};
const industryActiveIndex = ref(0);
const companyActiveIndex = ref(0);
const curCompanyId = ref("");
......@@ -304,11 +249,22 @@ const pageSize = ref(10);
const currentPage = ref(1);
const companyList = ref([]); // 企业列表
// 当前企业列表
const companySearchKeyword = ref(""); // 企业搜索关键词
// 根据关键词筛选后的企业列表
const filteredCompanyList = computed(() => {
const keyword = companySearchKeyword.value?.trim().toLowerCase() || "";
if (!keyword) return companyList.value;
return companyList.value.filter((item) =>
(item.name || "").toLowerCase().includes(keyword)
);
});
// 当前页企业列表（分页 + 筛选）
const curCompanyList = computed(() => {
const startIndex = (currentPage.value - 1) * pageSize.value;
const endIndex = startIndex + pageSize.value;
return companyList.value.slice(startIndex, endIndex);
return filteredCompanyList.value.slice(startIndex, endIndex);
});
// 处理页码改变事件
......@@ -316,6 +272,11 @@ const handleCurrentChange = page => {
currentPage.value = page;
};
// 搜索关键词变化时重置到第一页
watch(companySearchKeyword, () => {
currentPage.value = 1;
});
const industryList = ref([
// {
// "id": 1,
......@@ -365,7 +326,7 @@ const handleGetHylyList = async () => {
if (res.data && res.data.length > 0) {
curHylyId.value = res.data[0].id;
}
} catch (error) {}
} catch (error) { }
};
const curHylyId = ref("");
......@@ -380,6 +341,7 @@ const handleGetCompanyListById = async () => {
// console.log('根据行业id获取公司里列表', res);
if (res.code === 200 && res.data.length) {
companyList.value = res.data;
companySearchKeyword.value = "";
currentPage.value = 1;
nextTick(() => {
handleClickCompany(companyList.value[0], 0);
......@@ -387,27 +349,7 @@ const handleGetCompanyListById = async () => {
} else {
companyList.value = [];
}
} catch (error) {}
};
// 根据法案ID 获取行业领域统计
const handleGetIndustryHyly = async () => {
const params = {
id: window.sessionStorage.getItem("billId")
};
try {
const res = await getIndustryHyly(params);
// console.log('行业领域统计', res);
const data = res.data || [];
data.sort((a, b) => b.companyNum - a.companyNum);
fullChart1Data.value.name = data.map(item => {
return item.hylyName;
});
fullChart1Data.value.value = data.map(item => {
return item.companyNum;
});
renderChart1();
} catch (error) {}
} catch (error) { }
};
// 根据法案id，公司id，行业领域id获取公司的详情
......@@ -452,7 +394,7 @@ const handleGetCompanyDetail = async () => {
// 更新左侧关系图表数据
const relationList = data.relationNameList || [];
// 更新树形图数据
const treeChildren = relationList.map((name, index) => ({
id: index,
......@@ -461,7 +403,7 @@ const handleGetCompanyDetail = async () => {
value: 5,
symbol: `image://${CompanyImg}`
}));
treeData.value = [{
id: relationList.length,
name: data.name,
......@@ -482,7 +424,7 @@ const handleGetCompanyDetail = async () => {
y: 300, // 假设容器高度600，中心点y坐标
fixed: true // 固定中心点位置
};
const radius = 200; // 圆的半径
const newNodes = relationList.map((name, index) => {
const angle = (index / relationList.length) * 2 * Math.PI; // 计算每个节点的角度
......@@ -520,7 +462,7 @@ const handleGetCompanyDetail = async () => {
}];
links.value = [];
}
// 重新渲染图表
nextTick(() => {
const chart2Data = companyInfo.value.data2.data;
......@@ -554,7 +496,7 @@ const handleGetCompanyDetail = async () => {
} else {
companyInfo.value = {};
}
} catch (error) {}
} catch (error) { }
};
......@@ -750,10 +692,6 @@ onMounted(async () => {
setChart(graphChart, "graphChart");
await handleGetHylyList();
handleGetCompanyListById();
await handleGetIndustryHyly();
// let chart1 = getBarChart(chart1Data.value.name, chart1Data.value.value);
// setChart(chart1, "chart1");
});
</script>
......@@ -762,114 +700,54 @@ onMounted(async () => {
width: 100%;
height: 100%;
display: flex;
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 18px;
width: 8px;
height: 20px;
border-radius: 0 4px 4px 0;
background: var(--color-main-active);
}
.title {
margin-left: 14px;
margin-top: 14px;
height: 26px;
line-height: 26px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
display: flex;
justify-content: flex-end;
gap: 4px;
.more-btn {
font-size: 14px;
color: #1677ff;
cursor: pointer;
line-height: 28px;
}
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
}
}
.left {
margin-top: 16px;
width: 480px;
height: 848px;
background: rgba(255, 255, 255);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
.left-top {
margin: 0 auto;
width: 446px;
height: 200px;
box-sizing: border-box;
border: 1px solid rgba(231, 241, 255, 1);
border-radius: 4px;
background: linear-gradient(180deg, rgba(246, 251, 255, 1), rgba(246, 251, 255, 0) 100%);
.left-main {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.left-center {
margin-top: 12px;
height: 56px;
margin-left: 17px;
overflow-x: hidden;
width: 445px;
overflow-x: auto;
.left-center-btn-box {
width: 1000px;
margin-top: 10px;
height: 28px;
display: flex;
flex-wrap: nowrap;
.left-center-btn {
margin-right: 4px;
height: 28px;
// width: 70px;
text-align: center;
padding: 0 5px;
box-sizing: border-box;
border-radius: 4px;
border: 1px solid var(--btn-plain-border-color);
background: var(--btn-plain-bg-color);
color: var(--btn-plain-text-color);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 28px;
cursor: pointer;
// overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.btnActive {
border: 1px solid var(--btn-active-border-color);
background: var(--btn-active-bg-color);
color: var(--btn-active-text-color);
flex: 1;
min-height: 0;
margin: 12px 17px 0;
display: flex;
align-items: flex-start;
gap: 12px;
.left-center-select {
width: 150px;
flex-shrink: 0;
}
.left-center-search {
flex: 1;
min-width: 0;
:deep(.el-input__wrapper) {
border: 1px solid var(--bg-black-10);
box-shadow: none;
}
}
}
.left-footer {
flex-shrink: 0;
margin: 0 auto;
width: 446px;
height: 520px;
overflow: hidden;
.item-box {
height: 480px;
overflow: hidden;
.item {
width: 100%;
height: 48px;
......@@ -877,9 +755,11 @@ onMounted(async () => {
border-bottom: 1px solid rgba(243, 243, 244, 1);
display: flex;
cursor: pointer;
&:hover {
background: rgba(246, 251, 255, 1);
}
.id {
margin-left: 12px;
margin-top: 8px;
......@@ -894,6 +774,7 @@ onMounted(async () => {
font-size: 12px;
font-weight: 400;
}
.title {
margin-top: 9px;
margin-left: 10px;
......@@ -908,27 +789,33 @@ onMounted(async () => {
text-overflow: ellipsis;
white-space: nowrap;
}
.icon {
margin-left: 7px;
margin-top: 6px;
width: 8px;
height: 6px;
img {
width: 100%;
height: 100%;
}
}
}
.itemActive {
background: rgba(246, 251, 255, 1);
}
.titleActive {
color: rgba(22, 119, 255, 1) !important;
}
}
.footer-box {
display: flex;
justify-content: space-between;
.left {
width: 100px;
height: 20px;
......@@ -938,21 +825,21 @@ onMounted(async () => {
font-weight: 400;
line-height: 20px;
}
.right {
flex: 300px;
}
}
}
}
.right {
margin-top: 16px;
margin-left: 16px;
width: 1247px;
height: 847px;
background: rgba(255, 255, 255);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
position: relative;
.graph-dialog {
width: 740px;
height: 723px;
......@@ -961,6 +848,7 @@ onMounted(async () => {
top: 55px;
z-index: 99999;
background: #fff;
.tool-box {
position: absolute;
left: 11px;
......@@ -975,31 +863,37 @@ onMounted(async () => {
display: flex;
align-items: center;
justify-content: space-around;
.tool {
width: 14px;
height: 14px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.tool1 {
width: 16px;
height: 16px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
.chart-box {
width: 640px;
height: 640px;
margin: 50px auto;
}
}
.company-dialog {
position: absolute;
z-index: 999999;
......@@ -1011,22 +905,26 @@ onMounted(async () => {
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
.dialog-header {
height: 54px;
box-sizing: border-box;
border-bottom: 1px solid rgba(243, 243, 244, 1);
display: flex;
position: relative;
.logo {
width: 48px;
height: 48px;
margin-left: 18px;
margin-top: 3px;
img {
width: 100%;
height: 100%;
}
}
.company-title {
margin-left: 16px;
margin-top: 16px;
......@@ -1037,16 +935,19 @@ onMounted(async () => {
font-weight: 600;
line-height: 22px;
}
.status-icon {
margin-left: 12px;
margin-top: 12px;
width: 8px;
height: 6px;
img {
width: 100%;
height: 100%;
}
}
.status-rate {
width: 41px;
margin-left: 4px;
......@@ -1058,33 +959,40 @@ onMounted(async () => {
font-weight: 400;
line-height: 22px;
}
.close {
position: absolute;
right: 15px;
top: 19px;
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
}
.dialog-main {
margin-top: 13px;
.dialog-box1 {
.dialog-box1-header {
margin-top: 10px;
display: flex;
.icon {
margin-left: 16px;
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.dialog-box1-title {
margin-top: 2px;
margin-left: 6px;
......@@ -1097,34 +1005,42 @@ onMounted(async () => {
text-align: left;
}
}
.dialog-box1-main {
margin-top: 4px;
margin-left: 18px;
max-height: 120px;
overflow-y: auto;
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(0, 0, 0, 0.2);
}
&::-webkit-scrollbar-track {
border-radius: 0;
background: rgba(0, 0, 0, 0.1);
}
.item {
display: flex;
.item-left {
margin-top: 13px;
width: 14px;
height: 14px;
border-radius: 4px;
img {
width: 100%;
height: 100%;
}
}
.item-right {
margin-top: 8px;
margin-left: 9px;
......@@ -1139,21 +1055,26 @@ onMounted(async () => {
}
}
}
.dialog-box2 {
margin-left: 16px;
margin-top: 50px;
.dialog-box2-header {
margin-top: 10px;
display: flex;
.icon {
margin-left: 16px;
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.dialog-box2-title {
margin-top: 2px;
margin-left: 6px;
......@@ -1166,6 +1087,7 @@ onMounted(async () => {
text-align: left;
}
}
.dialog-box2-main {
margin-top: 16px;
width: 446px;
......@@ -1176,21 +1098,26 @@ onMounted(async () => {
background: linear-gradient(180deg, rgba(246, 251, 255, 1), rgba(246, 251, 255, 0) 100%);
}
}
.dialog-box3 {
margin-top: 16px;
margin-left: 16px;
.dialog-box3-header {
margin-top: 10px;
display: flex;
.icon {
margin-left: 16px;
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.dialog-box3-title {
margin-top: 2px;
margin-left: 6px;
......@@ -1203,6 +1130,7 @@ onMounted(async () => {
text-align: left;
}
}
.dialog-box3-main {
margin-top: 16px;
width: 446px;
......@@ -1220,18 +1148,22 @@ onMounted(async () => {
width: 1218px;
height: 784px;
margin: 5px auto;
.right-main-content {
width: 1150px;
height: 720px;
margin: 4px 0 10px;
.right-main-content-header {
height: 84px;
margin-left: 14px;
margin-top: 16px;
// background: orange;
display: flex;
.header-item1 {
width: 408px;
.header-item1-top {
position: relative;
z-index: 3;
......@@ -1246,18 +1178,22 @@ onMounted(async () => {
font-weight: 700;
line-height: 28px;
}
.header-item1-bottom {
display: flex;
justify-content: center;
.icon {
margin-top: 9px;
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-top: 7px;
margin-left: 8px;
......@@ -1270,9 +1206,11 @@ onMounted(async () => {
}
}
}
.header-item2 {
margin-left: -8px;
width: 408px;
.header-item2-top {
position: relative;
z-index: 2;
......@@ -1287,18 +1225,22 @@ onMounted(async () => {
font-weight: 700;
line-height: 28px;
}
.header-item2-bottom {
display: flex;
justify-content: center;
.icon {
margin-top: 9px;
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-top: 7px;
margin-left: 8px;
......@@ -1311,9 +1253,11 @@ onMounted(async () => {
}
}
}
.header-item3 {
margin-left: -8px;
width: 408px;
.header-item3-top {
position: relative;
z-index: 1;
......@@ -1328,18 +1272,22 @@ onMounted(async () => {
font-weight: 700;
line-height: 28px;
}
.header-item3-bottom {
display: flex;
justify-content: center;
.icon {
margin-top: 9px;
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-top: 7px;
margin-left: 8px;
......@@ -1353,12 +1301,15 @@ onMounted(async () => {
}
}
}
.right-main-content-main {
height: 600px;
margin-top: 20px;
}
// background: orange;
}
.box-footer {
width: 1218px;
height: 40px;
......@@ -1367,16 +1318,19 @@ onMounted(async () => {
margin: 0 auto;
margin-top: 6px;
background: rgba(246, 251, 255, 1);
.box-footer-left {
margin-top: 10px;
margin-left: 12px;
width: 19px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.box-footer-center {
margin-left: 13px;
margin-top: 8px;
......@@ -1388,6 +1342,7 @@ onMounted(async () => {
font-weight: 400;
line-height: 24px;
}
.box-footer-right {
margin-left: 13px;
margin-top: 8px;
......@@ -1398,6 +1353,7 @@ onMounted(async () => {
background: #e7f1ff;
box-sizing: border-box;
padding: 3px;
img {
width: 100%;
height: 100%;
......
src/views/bill/introdoction/index.vue
浏览文件 @ 45af5214
<template>
<div class="introduction-wrap">
<WarningPane
v-if="riskSignal"
class="risk-signal-pane-top"
:warnningLevel="riskSignal.riskLevel"
:warnningContent="riskSignal.riskContent"
/>
<WarningPane v-if="riskSignal" class="risk-signal-pane-top" :warnningLevel="riskSignal.riskLevel"
:warnningContent="riskSignal.riskContent" />
<div class="introduction-wrap-content">
<div class="introduction-wrap-left">
<div class="introduction-wrap-left-box1">
<AnalysisBox title="基本信息" :showAllBtn="false">
<div class="box1-main">
<div class="box1-left">
<img :src="basicInfo.imageUrl || defaultBill" alt="" />
</div>
<div class="box1-right">
<div class="box1-right-item">
<div class="item-left">提案人：</div>
<div class="item-right">{{ basicInfo.tarName }}</div>
</div>
<div class="box1-right-item">
<div class="item-left">提案人：</div>
<div class="item-right">{{ basicInfo.tarName }}</div>
</div>
<div class="box1-right-item">
<div class="item-left">提出时间：</div>
<div class="item-right">{{ basicInfo.introductionDate }}</div>
</div>
<div class="box1-right-item">
<div class="item-left">相关领域：</div>
<div class="item-right1">
<AreaTag v-for="item in hylyList" :key="item" :tagName="item" />
<div class="box1-right-item">
<div class="item-left">提出时间：</div>
<div class="item-right">{{ basicInfo.introductionDate }}</div>
</div>
</div>
<div class="box1-right-item">
<div class="item-left">委员会报告：</div>
<div class="item-right2" v-if="reportList.length">
<div class="right2-item" v-for="(item, index) in reportList" :key="getReportKey(item, index)">
{{ item }}
<div class="box1-right-item">
<div class="item-left">相关领域：</div>
<div class="item-right1">
<AreaTag v-for="item in hylyList" :key="item" :tagName="item" />
</div>
</div>
</div>
<div class="box1-right-item">
<div class="item-left">表决记录：</div>
<div class="item-right3">{{ `全程共进行${basicInfo.votetotal}次唱名表决` }}​</div>
</div>
<div class="box1-right-item">
<div class="item-left">最近状态：</div>
<div class="item-right3">{{ basicInfo.status }}​</div>
</div>
<div class="box1-right-item">
<div class="item-left">立案流程：</div>
<div class="item-right4">
<div
v-for="(item, index) in reversedStageList"
:key="getStageKey(item, index)"
class="step"
:style="{ zIndex: getStageZIndex(index) }"
>
<div class="step-box"
:class="{ 'step-box-active': index === stageActiveIndex }">
<div class="box1-right-item">
<div class="item-left">委员会报告：</div>
<div class="item-right2" v-if="reportList.length">
<div class="right2-item" v-for="(item, index) in reportList"
:key="getReportKey(item, index)">
{{ item }}
</div>
</div>
</div>
<div class="box1-right-item">
<div class="item-left">表决记录：</div>
<div class="item-right3">{{ `全程共进行${basicInfo.votetotal}次唱名表决` }}​</div>
</div>
<div class="box1-right-item">
<div class="item-left">最近状态：</div>
<div class="item-right3">{{ basicInfo.status }}​</div>
</div>
<div class="box1-right-item">
<div class="item-left">立案流程：</div>
<div class="item-right4">
<div v-for="(item, index) in reversedStageList" :key="getStageKey(item, index)"
class="step" :style="{ zIndex: getStageZIndex(index) }">
<div class="step-box"
:class="{ 'step-box-active': index === stageActiveIndex }">
{{ item }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</AnalysisBox>
</div>
<div class="introduction-wrap-left-box2">
<AnalysisBox title="法案进展" :showAllBtn="false">
<template #header-btn>
</template>
<div class="box2-main">
<div class="box2-main-center">
<STimeline :dataList="timelineData" :mode="progressMode" :maxCount="5" />
</AnalysisBox>
</div>
<div class="introduction-wrap-left-box2">
<AnalysisBox title="法案进展" :showAllBtn="false">
<template #header-btn>
</template>
<div class="box2-main">
<div class="box2-main-center">
<STimeline :dataList="timelineData" :mode="progressMode" :maxCount="5" />
</div>
</div>
</div>
</AnalysisBox>
</div>
</AnalysisBox>
</div>
</div>
<div class="introduction-wrap-right">
<AnalysisBox title="提出人" :showAllBtn="false">
......@@ -86,14 +79,16 @@
<div class="name-box">
<div class="person-box">
<div class="person-item" :class="{ nameItemActive: box3BtnActive === item.name }"
@click="handleClcikBox3Btn(item.name, index)" v-for="(item, index) in personList" :key="index">
@click="handleClcikBox3Btn(item.name, index)"
v-for="(item, index) in personList" :key="index">
{{ item.name }}
</div>
</div>
</div>
<div class="info-box">
<div class="info-left">
<img class="person-avatar" :src="curPerson.imageUrl || defaultAvatar" alt="" @click="handleClickAvatar(curPerson)" />
<img class="person-avatar" :src="curPerson.imageUrl || defaultAvatar" alt=""
@click="handleClickAvatar(curPerson)" />
<div class="usr-icon1">
<img src="./assets/images/usr-icon1.png" alt="" />
</div>
......@@ -102,7 +97,8 @@
</div>
</div>
<div class="info-right">
<div class="info-right-title" @click="handleClickAvatar(curPerson)">{{ curPerson.name }}</div>
<div class="info-right-title" @click="handleClickAvatar(curPerson)">{{
curPerson.name }}</div>
<div class="info-right-item">
<div class="item-left">英文名:</div>
<div class="item-right">{{ curPerson.ename }}</div>
......@@ -123,7 +119,7 @@
</div>
</div>
<div class="right-main-box2" v-if="curPerson.tagList && curPerson.tagList.length">
<div class="tag-box status"v-for="(tag, index) in curPerson.tagList" :key="index">
<div class="tag-box status" v-for="(tag, index) in curPerson.tagList" :key="index">
{{ tag }}
</div>
</div>
......@@ -159,23 +155,58 @@ import WordCloudMap from "./WordCloudMap.vue";
import STimeline from "./STimeline.vue";
import WarningPane from "@/components/base/WarningPane/index.vue";
import { getBillInfo, getBillPerson, getBillEvent, getBillDyqk } from "@/api/bill";
import { getPersonSummaryInfo } from "@/api/common/index";
import defaultAvatar from "../assets/images/default-icon1.png";
import defaultNew from "../assets/images/default-icon-news.png";
import defaultBill from "./assets/images/image1.png"
import { ElMessage } from "element-plus";
const route = useRoute();
const router = useRouter();
// 跳转到人物页面
const handleClickAvatar = item => {
window.sessionStorage.setItem('curTabName', item.name)
const routeData = router.resolve({
path: "/characterPage",
query: {
personId: item.id
const handleClickAvatar = async item => {
if (!item?.id) return;
const personTypeList = JSON.parse(window.sessionStorage.getItem("personTypeList") || "[]");
let type = 0;
let personTypeName = "";
const params = {
personId: item.id
};
try {
const res = await getPersonSummaryInfo(params);
if (res.code === 200 && res.data) {
const arr = personTypeList.filter(val => val.typeId === res.data.personType);
if (arr && arr.length > 0) {
personTypeName = arr[0].typeName;
if (personTypeName === "科技企业领袖") {
type = 1;
} else if (personTypeName === "国会议员") {
type = 2;
} else if (personTypeName === "智库研究人员") {
type = 3;
} else {
personTypeName = "";
ElMessage.warning("找不到当前人员的类型值！");
return;
}
window.sessionStorage.setItem("curTabName", item.name || "");
const routeData = router.resolve({
path: "/characterPage",
query: {
type,
personId: item.id
}
});
window.open(routeData.href, "_blank");
} else {
personTypeName = "";
ElMessage.warning("找不到当前人员的类型值！");
}
} else {
ElMessage.warning("找不到当前人员的类型值！");
}
});
window.open(routeData.href, "_blank");
} catch (error) {}
};
// 获取URL地址里面的billId
const billId = ref(route.query.billId);
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论