提交 52c138b3 authored 作者: coderBryanFu's avatar coderBryanFu

update

上级 800667be
<template>
<div id="app">
<div class="pro-wrapper">
<div class="home-page" v-show="isCurrentOverview">
<div class="home-page" v-if="isCurrentOverview">
<div class="navbar">
<div class="nav-left">
<div class="icon">
......@@ -53,7 +53,7 @@
<router-view />
</div>
</div>
<div class="content-page" v-show="!isCurrentOverview">
<div class="content-page" v-if="!isCurrentOverview">
<div class="navbar">
<div class="nav-brand">
<div class="brand-icon">
......@@ -136,8 +136,8 @@ const route = useRoute()
const handleToHome = () => {
router.push({
path: "/ZMOverView"
// path: "/overview"
});
isCurrentOverview.value = true;
};
const isShowAiBox = ref(false);
......@@ -150,10 +150,6 @@ const openAiBox = () => {
isShowAiBox.value = true;
};
const handleHomeCommand = command => {
router.push(command);
};
const personTypeList = ref([]);
// 获取人物类别
......
......@@ -933,7 +933,7 @@ onMounted(() => {
width: 1064px;
height: 846px;
.box2 {
width: 1210px;
width: 1064px;
height: 415px;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
......@@ -948,7 +948,7 @@ onMounted(() => {
}
.box3 {
margin-top: 16px;
width: 1210px;
width: 1064px;
height: 415px;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
......
......@@ -99,8 +99,19 @@
<div class="item">
<div class="item-box1">
<div class="box1-left">
<div style="width: 100%; display: flex; flex-direction: column; align-items: flex-end;">
<div class="name nameBlod" :title="item.actionTitle" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;">
<div
style="width: 100%; display: flex; flex-direction: column; align-items: flex-end"
>
<div
class="name nameBlod"
:title="item.actionTitle"
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
"
>
{{ item.actionTitle }}
</div>
<div class="time">
......@@ -110,24 +121,34 @@
</div>
<div class="box1-right">
<div class="box1-right-top">
<el-progress :percentage="Number(item.agreePercent)" :show-text="false" color="#1677FF"> </el-progress>
<el-progress
:percentage="Number(item.agreePercent)"
:show-text="false"
color="#1677FF"
>
</el-progress>
</div>
<div class="box1-right-bottom">
<el-progress :percentage="Number(item.againstPercent)" :show-text="false" color="#FF9054"> </el-progress>
<el-progress
:percentage="Number(item.againstPercent)"
:show-text="false"
color="#FF9054"
>
</el-progress>
</div>
</div>
</div>
<div class="item-box2">
<div class="box2-1" style="color: #1677FF">{{ item.agreeCount + "票" }}</div>
<div class="box2-2" style="color: #FF9054">{{ item.againstCount + "票" }}</div>
<div class="box2-1" style="color: #1677ff">{{ item.agreeCount + "票" }}</div>
<div class="box2-2" style="color: #ff9054">{{ item.againstCount + "票" }}</div>
</div>
<div class="item-box3">
<div class="box3-1"></div>
<div class="box3-2"></div>
</div>
<div class="item-box4">
<div class="box4-1" style="color: #1677FF">{{ item.agreePercent + "%" }}</div>
<div class="box4-2" style="color: #FF9054">{{ item.againstPercent + "%" }}</div>
<div class="box4-1" style="color: #1677ff">{{ item.agreePercent + "%" }}</div>
<div class="box4-2" style="color: #ff9054">{{ item.againstPercent + "%" }}</div>
</div>
<div class="item-box5"></div>
<div class="item-box6">
......@@ -144,24 +165,34 @@
</div>
<div class="box1-right">
<div class="box1-right-top">
<el-progress :percentage="Number(item.dagreePercent)" :show-text="false" color="#85b4ff"> </el-progress>
<el-progress
:percentage="Number(item.dagreePercent)"
:show-text="false"
color="#85b4ff"
>
</el-progress>
</div>
<div class="box1-right-bottom">
<el-progress :percentage="Number(item.dagainstPercent)" :show-text="false" color="#FF9054"> </el-progress>
<el-progress
:percentage="Number(item.dagainstPercent)"
:show-text="false"
color="#FF9054"
>
</el-progress>
</div>
</div>
</div>
<div class="item-box2">
<div class="box2-1" style="color: #1677FF">{{ item.dagreeCount + "票" }}</div>
<div class="box2-2" style="color: #FF9054">{{ item.dagainstCount + "票" }}</div>
<div class="box2-1" style="color: #1677ff">{{ item.dagreeCount + "票" }}</div>
<div class="box2-2" style="color: #ff9054">{{ item.dagainstCount + "票" }}</div>
</div>
<div class="item-box3"></div>
<div class="item-box4">
<div class="box4-1" style="color: #1677FF">{{ item.dagreePercent + "%" }}</div>
<div class="box4-2" style="color: #FF9054">{{ item.dagainstPercent + "%" }}</div>
<div class="box4-1" style="color: #1677ff">{{ item.dagreePercent + "%" }}</div>
<div class="box4-2" style="color: #ff9054">{{ item.dagainstPercent + "%" }}</div>
</div>
<div class="item-box5">
<div class="box5-1" style="color: #CE4F51">{{ item.dreverseCount + "人" }}</div>
<div class="box5-1" style="color: #ce4f51">{{ item.dreverseCount + "人" }}</div>
</div>
<div class="item-box6">
<div class="img-box" v-if="item.dpersonImageUrl">
......@@ -179,24 +210,34 @@
</div>
<div class="box1-right">
<div class="box1-right-top">
<el-progress :percentage="Number(item.ragreePercent)" :show-text="false" color="#1677FF"> </el-progress>
<el-progress
:percentage="Number(item.ragreePercent)"
:show-text="false"
color="#1677FF"
>
</el-progress>
</div>
<div class="box1-right-bottom">
<el-progress :percentage="Number(item.ragainstPercent)" :show-text="false" color="#ffdcc8"> </el-progress>
<el-progress
:percentage="Number(item.ragainstPercent)"
:show-text="false"
color="#ffdcc8"
>
</el-progress>
</div>
</div>
</div>
<div class="item-box2">
<div class="box2-1" style="color: #1677FF">{{ item.ragreeCount + "票" }}</div>
<div class="box2-2" style="color: #FF9054">{{ item.ragainstCount + "票" }}</div>
<div class="box2-1" style="color: #1677ff">{{ item.ragreeCount + "票" }}</div>
<div class="box2-2" style="color: #ff9054">{{ item.ragainstCount + "票" }}</div>
</div>
<div class="item-box3"></div>
<div class="item-box4">
<div class="box4-1" style="color: #1677FF">{{ item.ragreePercent + "%" }}</div>
<div class="box4-2" style="color: #FF9054">{{ item.ragainstPercent + "%" }}</div>
<div class="box4-1" style="color: #1677ff">{{ item.ragreePercent + "%" }}</div>
<div class="box4-2" style="color: #ff9054">{{ item.ragainstPercent + "%" }}</div>
</div>
<div class="item-box5">
<div class="box5-1" style="color: #CE4F51">{{ item.rreverseCount + "人" }}</div>
<div class="box5-1" style="color: #ce4f51">{{ item.rreverseCount + "人" }}</div>
</div>
<div class="item-box6">
<div class="img-box" v-if="item.rpersonImageUrl">
......@@ -642,22 +683,22 @@ const handleGetBillAmeAnalyzeCount = async () => {
// 兼容多种字段名,防止字段不存在导致图表消失
// 顺序:最小(min), Q1(小), 中位数(median), Q3(大), 最大(max), 该法案(current)
return [
item.zsCount || item.zscs || item.zshs || 0,
item.jsx || item.pjx || 0,
item.zws || item.zwcs || 0,
item.pjs || item.pjcs || 0,
item.zdCount || item.zdcs || item.zdhs || 0,
item.zsCount || item.zscs || item.zshs || 0,
item.jsx || item.pjx || 0,
item.zws || item.zwcs || 0,
item.pjs || item.pjcs || 0,
item.zdCount || item.zdcs || item.zdhs || 0,
item.dysc || item.dycs || 0
];
});
} catch (error) {
console.error("修正案次数分析 error", error);
}
console.error("修正案次数分析 error", error);
}
};
// 获取投票分析
const voteAnalysisList = ref([]);
const formatDate = (dateStr) => {
const formatDate = dateStr => {
if (!dateStr) return "";
const date = new Date(dateStr);
const y = date.getFullYear();
......@@ -674,26 +715,26 @@ const handleGetBillVoteAnalyze = async () => {
console.log("投票分析", res);
voteAnalysisList.value = res.data;
} catch (error) {
console.error("投票分析 error", error);
}
console.error("投票分析 error", error);
}
};
onMounted(async () => {
await handleGetBillTimeAnalyze();
await handleGetBillAmeAnalyzeCount();
await handleGetBillVoteAnalyze();
let chart1 = getBoxPlotChcart(chartData1.value, "天");
setChart(chart1, "chart1");
const countLabels = {
max: '最大次数',
q3: '平均次数大',
median: '次数中位数',
q1: '平均次数小',
min: '最小次数',
current: '该法案修正案数量'
};
const countLabels = {
max: "最大次数",
q3: "平均次数大",
median: "次数中位数",
q1: "平均次数小",
min: "最小次数",
current: "该法案修正案数量"
};
let chart2 = getBoxPlotChcart(chartData2.value, "次", countLabels);
setChart(chart2, "chart2");
});
......@@ -773,7 +814,7 @@ onMounted(async () => {
.left {
margin-top: 16px;
.box1 {
width: 860px;
width: 792px;
height: 415px;
background: rgb(255, 255, 255);
border-radius: 10px;
......@@ -845,7 +886,7 @@ onMounted(async () => {
}
}
.box1-main-footer {
width: 830px;
width: 762px;
height: 40px;
display: flex;
box-sizing: border-box;
......@@ -865,13 +906,16 @@ onMounted(async () => {
.box-footer-center {
margin-left: 13px;
margin-top: 8px;
width: 749px;
width: 669px;
height: 24px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.box-footer-right {
margin-left: 13px;
......@@ -893,7 +937,7 @@ onMounted(async () => {
}
.box2 {
margin-top: 17px;
width: 860px;
width: 792px;
height: 415px;
background: rgb(255, 255, 255);
border-radius: 10px;
......@@ -1053,7 +1097,7 @@ onMounted(async () => {
}
}
.box2-main-footer {
width: 830px;
width: 762px;
height: 40px;
display: flex;
box-sizing: border-box;
......@@ -1073,13 +1117,16 @@ onMounted(async () => {
.box-footer-center {
margin-left: 13px;
margin-top: 8px;
width: 749px;
width: 669px;
height: 24px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.box-footer-right {
margin-left: 13px;
......@@ -1103,7 +1150,7 @@ onMounted(async () => {
.right {
margin-left: 16px;
margin-top: 16px;
width: 868px;
width: 792px;
height: 847px;
background: rgb(255, 255, 255);
.box3 {
......@@ -1336,7 +1383,7 @@ onMounted(async () => {
}
}
.box3-main-footer {
width: 830px;
width: 762px;
height: 40px;
display: flex;
box-sizing: border-box;
......@@ -1356,13 +1403,16 @@ onMounted(async () => {
.box-footer-center {
margin-left: 13px;
margin-top: 8px;
width: 749px;
width: 669px;
height: 24px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.box-footer-right {
margin-left: 13px;
......
......@@ -635,7 +635,7 @@ onMounted(() => {
<style lang="scss" scoped>
.process-overview-wrap {
width: 1744px;
width: 1600px;
height: 848px;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
......
......@@ -183,7 +183,7 @@
</div>
</div>
<div class="info-right">
<div class="info-right-title">{{ 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>
......@@ -889,6 +889,7 @@ onMounted(() => {
margin-top: 25px;
display: flex;
.info-left {
cursor: pointer;
img {
width: 128px;
height: 128px;
......@@ -935,6 +936,7 @@ onMounted(() => {
font-size: 16px;
font-weight: 600;
line-height: 22px;
cursor: pointer;
}
.info-right-item {
margin-top: 8px;
......@@ -1110,6 +1112,7 @@ onMounted(() => {
line-height: 22px;
text-align: center;
margin-bottom: 50px;
cursor: pointer;
}
.info-right-item {
margin-top: 8px;
......
......@@ -978,6 +978,7 @@ onUnmounted(() => {
<style lang="scss" scoped>
:deep(.el-input__wrapper) {
box-shadow: none;
height: 44px;
}
:deep(.el-input__wrapper:hover) {
box-shadow: none !important;
......@@ -1024,7 +1025,13 @@ onUnmounted(() => {
font-weight: 400;
}
.wrapper {
width: 100%;
height: 100%;
overflow-y: auto;
.header {
position: sticky;
top: 0;
z-index: 9999;
height: 64px;
color: #fff;
font-family: Microsoft YaHei;
......
......@@ -6,9 +6,9 @@
<div class="icon">
<img src="./assets/images/search-icon1.png" alt="" />
</div>
<el-input v-model="keyword" :border="false" style="width: 900px; height: 100%" @keyup.enter="handleSearch" />
<el-input v-model="keyword" :border="false" style="width: 900px" @keyup.enter="handleSearch" />
</div>
<div class="right" @click="handleSearch">
<div class="right" @click="handleToAi">
<img src="./assets/images/ai-icon.png" alt="" />
</div>
</div>
......@@ -51,9 +51,9 @@
<div class="text-box">
搜索关键词:<span class="text-2">{{ keyword }}</span>
</div>
<div class="text-box">
<!-- <div class="text-box">
当前领域:<span class="text-2">{{ curArea }}</span>
</div>
</div> -->
</div>
<!-- <div class="info-right">
<el-select v-model="selectTime" placeholder="选择时间" style="width: 125px">
......@@ -262,6 +262,13 @@ const handleClickDomains = domain => {
handleSearch();
};
function highlightText(text, keyword) {
if (!text || !keyword) return text;
const regex = new RegExp(`(${keyword})`, 'gi');
return text.replace(regex, '<span style="color: red; font-weight: bold;">$1</span>');
}
const handleSearch = async () => {
let params;
if (activeTabId.value) {
......@@ -292,6 +299,10 @@ const handleSearch = async () => {
}));
}
searchResults.value = res.data.records;
searchResults.value.forEach(item => {
item.originalTitle = highlightText(item.originalTitle, keyword.value)
item.originalDescription = highlightText(item.originalDescription, keyword.value)
})
totalNum.value = res.data.total;
if (totalNum.value) {
ElMessage.success(`共计搜索到${totalNum.value}条结果`);
......@@ -475,27 +486,26 @@ onMounted(() => {
}
handleSearch();
});
const handleToAi = () => {
const route = router.resolve({
path: "/chat"
});
window.open(route.href, "_blank");
};
</script>
<style lang="scss" scoped>
:deep(.el-input__wrapper) {
box-shadow: none;
}
:deep(.el-input__wrapper:hover) {
box-shadow: none !important;
}
:deep(.el-input__wrapper.is-focus) {
box-shadow: none !important;
}
.wrapper {
width: 100%;
height: 100%;
background: url("../assets/images/background.png") no-repeat;
background-size: 100% 100%;
overflow-y: auto;
.header {
margin-top: 24px;
position: relative;
// position: sticky;
// top: 24px;
.header-right {
position: absolute;
width: 360px;
......@@ -589,12 +599,12 @@ onMounted(() => {
margin-top: 12px;
height: 48px;
display: flex;
margin-left: 257px;
align-items: center;
margin-left: 240px;
.tab-left {
width: 726px;
height: 48px;
display: flex;
justify-content: flex-start;
gap: 32px;
.tab {
color: rgba(59, 65, 75, 1);
......@@ -655,7 +665,7 @@ onMounted(() => {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-left: 256px;
margin-left: 240px;
.tag {
height: 32px;
line-height: 30px;
......@@ -678,7 +688,7 @@ onMounted(() => {
}
.info-box {
margin-top: 26px;
margin-left: 257px;
margin-left: 240px;
width: 920px;
height: 32px;
display: flex;
......@@ -748,7 +758,7 @@ onMounted(() => {
width: 913px;
// height: 1464px;
margin-top: 36px;
margin-left: 264px;
margin-left: 240px;
.item {
width: 913px;
min-height: 108px;
......@@ -848,7 +858,17 @@ onMounted(() => {
justify-content: center;
}
}
:deep(.el-input__wrapper) {
box-shadow: none;
height: 46px;
}
:deep(.el-input__wrapper:hover) {
box-shadow: none !important;
}
:deep(.el-input__wrapper.is-focus) {
box-shadow: none !important;
}
:deep(.el-input__inner) {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
......
......@@ -285,17 +285,17 @@
<div class="header-title">{{ "社交媒体" }}</div>
</div>
<div class="box4-main">
<MessageBubble
v-for="(item, index) in messageList"
@click="handleClickPerson(item)"
@info-click="handleMediaClick(item)"
:key="index"
:avatar="item.img ? item.img : DefaultIcon1"
:name="item.name"
:time="item.time"
:source="item.source"
:content="item.content"
/>
<MessageBubble
v-for="(item, index) in messageList"
@click="handleClickPerson(item)"
@info-click="handleMediaClick(item)"
:key="index"
:avatar="item.img ? item.img : DefaultIcon1"
:name="item.name"
:time="item.time"
:source="item.source"
:content="item.content"
/>
<!-- <div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
<div class="left" @click="handleClickPerson(item)">
<img :src="item.img ? item.img : DefaultIcon1" alt="" />
......@@ -407,8 +407,7 @@
</div>
<div class="header-title">{{ "政令重点条款" }}</div>
</div>
<div class="box8-main" id="wordCloudChart">
</div>
<div class="box8-main" id="wordCloudChart"></div>
</div>
</div>
</div>
......@@ -561,7 +560,7 @@
</template>
<script setup>
import { onMounted, ref, computed, watch } from "vue";
import { onMounted, ref, computed, watch, nextTick } from "vue";
import router from "@/router";
import HeaderMenu from "@/components/headerMenu.vue";
import headerInfo from "@/components/headerInfo.vue";
......@@ -1141,19 +1140,25 @@ const handleSwithSort = () => {
};
const handleToPosi = id => {
// 0 618 1240 2350
switch (id) {
case "position2":
containerRef.value.scrollTop = isShow.value ? 844 : 1190;
break;
case "position3":
containerRef.value.scrollTop = isShow.value ? 1480 : 1826;
break;
case "position4":
containerRef.value.scrollTop = isShow.value ? 2554 : 2900;
break;
default:
containerRef.value.scrollTop = 0;
const element = document.getElementById(id);
if (element && containerRef.value) {
// 1. 如果是从完整搜索框跳转,先强制切换状态稳定布局
if (!isShow.value) {
isShow.value = true;
}
// 2. 使用 nextTick 等待 DOM 布局(如高度切换)完成后再进行坐标计算
nextTick(() => {
const containerRect = containerRef.value.getBoundingClientRect();
const elementRect = element.getBoundingClientRect();
// 使用 getBoundingClientRect 计算元素相对于容器顶部的绝对距离,不受嵌套布局影响
const top = elementRect.top - containerRect.top + containerRef.value.scrollTop;
containerRef.value.scrollTo({
top: top,
behavior: "smooth"
});
});
}
};
......@@ -1583,7 +1588,7 @@ onMounted(async () => {
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 0.65);
align-items: center;
gap:17px;
gap: 17px;
margin: 0 6px 16px 6px;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
......
......@@ -42,9 +42,9 @@
</div>
</div>
</div>
<div class="home-main" :class="{ scrollHomeMain: isShow }" ref="containerRef">
<div class="home-main" :class="{ scrollHomeMain: isShow }" ref="containerRef">
<div class="home-main-header">
<div class="home-main-header-top" v-show="!isShow">
<div class="home-main-header-top" v-show="!isShow">
<div class="header-left">
<HeaderMenu></HeaderMenu>
</div>
......@@ -592,7 +592,7 @@
</template>
<script setup>
import { onMounted, ref, computed, reactive } from "vue";
import { onMounted, ref, computed, reactive, nextTick } from "vue";
import scrollToTop from "@/utils/scrollToTop";
import router from "@/router";
import DivideHeader from "@/components/DivideHeader.vue";
......@@ -657,22 +657,26 @@ import { useContainerScroll } from "@/hooks/useScrollShow";
const containerRef = ref(null);
const { isShow } = useContainerScroll(containerRef);
const handleToPosi = id => {
// 0 618 1240 2350
switch (id) {
case "position2":
// containerRef.value.scrollTop = isShow.value ? 744 : 1090;
containerRef.value.scrollTop = isShow.value ? 900 : 1150;
break;
case "position3":
containerRef.value.scrollTop = isShow.value ? 1480 : 1730;
break;
case "position4":
containerRef.value.scrollTop = isShow.value ? 2545 : 2795;
break;
default:
containerRef.value.scrollTop = 0;
const element = document.getElementById(id);
if (element && containerRef.value) {
// 1. 如果是从完整搜索框跳转,先强制切换状态稳定布局
if (!isShow.value) {
isShow.value = true;
}
// 2. 使用 nextTick 等待 DOM 布局(如高度切换)完成后再进行坐标计算
nextTick(() => {
const containerRect = containerRef.value.getBoundingClientRect();
const elementRect = element.getBoundingClientRect();
// 使用 getBoundingClientRect 计算元素相对于容器顶部的绝对距离,不受嵌套布局影响
const top = elementRect.top - containerRect.top + containerRef.value.scrollTop;
containerRef.value.scrollTo({
top: top,
behavior: "smooth"
});
});
}
};
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论