Skip to content

R
risk-monitor
提交 d7757e36 authored 作者: coderBryanFu's avatar coderBryanFu
浏览文件
操作

feat:更新数据资源库

上级 09b8b813
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 61 行增加 和 51 行删除
src/components/base/GraphChart/graphChart.js
浏览文件 @ d7757e36
......@@ -41,6 +41,12 @@ const getGraphChart = (nodes, links, layoutType) => {
itemStyle: {
color: '#73C0DE'
},
// 方法1：通过 left/right/top/bottom 控制绘图区域
left: '5%',
right: '5%',
top: '5%',
bottom: '5%',
layout: layoutType,
data: nodes,
links: links,
......
src/components/base/GraphChart/index.vue
浏览文件 @ d7757e36
......@@ -52,5 +52,7 @@ onBeforeUnmount(() => {
.graph-chart-wrapper {
width: 100%;
height: 100%;
// width: 800px;
// height: 500px;
}
</style>
\ No newline at end of file
src/styles/components/GraphChart/index.vue
浏览文件 @ d7757e36
......@@ -11,7 +11,7 @@
`}}
</pre>
<div class="chart-box">
<GraphChart :nodes="nodes" :links="links" layoutType="none">
<GraphChart :nodes="nodes" :links="links" layoutType="force">
</GraphChart>
</div>
</el-col>
......@@ -207,6 +207,7 @@ const links = ref([
{ source: 15, target: 7, label: { show: true, formatter: '合作', color: 'red', borderColor: 'red' } },
]);
</script>
<style lang="scss" scoped>
......@@ -218,5 +219,4 @@ const links = ref([
width: 800px;
height: 500px;
}
</style>
\ No newline at end of file
src/utils/setChart.js
浏览文件 @ d7757e36
// 绘制echarts图表
import * as echarts from 'echarts'
import 'echarts-wordcloud';
const setChart = (option, chartId) => {
import router from '@/router/index'
const setChart = (option, chartId, allowClick, selectParam) => {
let chartDom = document.getElementById(chartId);
if (!chartDom) {
return null;
......@@ -9,6 +10,26 @@ const setChart = (option, chartId) => {
chartDom.removeAttribute("_echarts_instance_");
let chart = echarts.init(chartDom);
chart.setOption(option);
if (allowClick) {
// 3. 添加点击事件监听
chart.on('click', function (params) {
switch (selectParam.moduleType) {
case '国会法案':
// 判断点击的是否为饼图的数据项
if (params.componentType === 'series' && params.seriesType === 'pie') {
console.log('点击的扇形名称：', params.name);
selectParam.domains = JSON.stringify([params.name])
const route = router.resolve({
path: "/dataLibrary/countryBill",
query: selectParam
});
window.open(route.href, "_blank");
}
}
});
}
// 容器可能受布局/异步渲染影响，强制一次 resize 保证 canvas 与容器一致
setTimeout(() => {
chart.resize();
......
src/views/bill/billHome/index.vue
浏览文件 @ d7757e36
......@@ -40,8 +40,7 @@
<div class="center-top">
<overviewMainBox class="box1" title="热门法案" @toDetail="handleClickToDetail">
<template #headerIcon>
<img style="width: 100%; height: 100%" src="./assets/images/box1-header-icon.png"
alt="" />
<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">
......@@ -122,27 +121,23 @@
<DivideHeader id="position2" class="divide2" :titleText="'资讯要闻'"></DivideHeader>
<div class="center-center">
<NewsList :newsList="newsList" img="newsImage" title="newsTitle" from="from"
content="newsContent" />
<MessageBubble :messageList="messageList" imageUrl="personImage"
@more-click="handleToSocialDetail" @person-click="handleClickToCharacter" name="personName"
content="remarks" source="orgName" />
<NewsList :newsList="newsList" img="newsImage" title="newsTitle" from="from" content="newsContent" />
<MessageBubble :messageList="messageList" imageUrl="personImage" @more-click="handleToSocialDetail"
@person-click="handleClickToCharacter" name="personName" content="remarks" source="orgName" />
</div>
<DivideHeader id="position3" class="divide3" :titleText="'数据总览'"></DivideHeader>
<div class="center-footer">
<OverviewCard class="overview-card--double box5" title="涉华法案数量变化趋势" :icon="box5HeaderIcon">
<template #right>
<el-select v-model="box5Select" placeholder="选择领域" @change="handleBox5Change"
style="width: 150px">
<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-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
<el-select v-model="box5ProposalTime" placeholder="提案时间" @change="handleBox5Change"
style="width: 120px; margin-left: 8px">
<el-option v-for="item in box5ProposalTimeList" :key="item.value"
:label="item.label" :value="item.value" />
<el-option v-for="item in box5ProposalTimeList" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</template>
<div class="overview-card-body box5-main">
......@@ -154,8 +149,7 @@
<TipTab class="overview-tip" />
<AiButton class="overview-tip-action" @mouseenter="handleShowAiPane('box5')" />
</div>
<div v-if="aiPaneVisible.box5" class="overview-ai-pane"
@mouseleave="handleHideAiPane('box5')">
<div v-if="aiPaneVisible.box5" class="overview-ai-pane" @mouseleave="handleHideAiPane('box5')">
<AiPane :aiContent="overviewAiContent.box5" />
</div>
</div>
......@@ -163,13 +157,12 @@
<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-option v-for="item in box9YearList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-select v-model="box9LegislativeStatus" placeholder="立法状态" @change="handleBox9StatusChange"
style="width: 110px; margin-left: 8px">
<el-option v-for="item in box9LegislativeStatusList" :key="item.value"
:label="item.label" :value="item.value" />
<el-option v-for="item in box9LegislativeStatusList" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</template>
<div class="overview-card-body box6-main">
......@@ -181,8 +174,7 @@
<TipTab class="overview-tip" />
<AiButton class="overview-tip-action" @mouseenter="handleShowAiPane('box6')" />
</div>
<div v-if="aiPaneVisible.box6" class="overview-ai-pane"
@mouseleave="handleHideAiPane('box6')">
<div v-if="aiPaneVisible.box6" class="overview-ai-pane" @mouseleave="handleHideAiPane('box6')">
<AiPane :aiContent="overviewAiContent.box6" />
</div>
</div>
......@@ -192,8 +184,7 @@
<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>
</template>
<div class="overview-card-body box7-main">
......@@ -205,8 +196,7 @@
<TipTab class="overview-tip" />
<AiButton class="overview-tip-action" @mouseenter="handleShowAiPane('box7')" />
</div>
<div v-if="aiPaneVisible.box7" class="overview-ai-pane"
@mouseleave="handleHideAiPane('box7')">
<div v-if="aiPaneVisible.box7" class="overview-ai-pane" @mouseleave="handleHideAiPane('box7')">
<AiPane :aiContent="overviewAiContent.box7" />
</div>
</div>
......@@ -214,8 +204,7 @@
<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>
</template>
<div class="overview-card-body box8-main">
......@@ -230,8 +219,7 @@
<TipTab class="overview-tip" />
<AiButton class="overview-tip-action" @mouseenter="handleShowAiPane('box8')" />
</div>
<div v-if="aiPaneVisible.box8" class="overview-ai-pane"
@mouseleave="handleHideAiPane('box8')">
<div v-if="aiPaneVisible.box8" class="overview-ai-pane" @mouseleave="handleHideAiPane('box8')">
<AiPane :aiContent="overviewAiContent.box8" />
</div>
</div>
......@@ -240,15 +228,13 @@
<div class="overview-card-body box9-main">
<div class="overview-chart-wrap">
<el-empty v-if="!wordCloudHasData" description="暂无数据" :image-size="100" />
<WordCloundChart v-else class="overview-chart" width="100%" height="100%"
:data="wordCloudData" />
<WordCloundChart v-else class="overview-chart" width="100%" height="100%" :data="wordCloudData" />
</div>
<div class="overview-tip-row">
<TipTab class="overview-tip" />
<AiButton class="overview-tip-action" @mouseenter="handleShowAiPane('box9')" />
</div>
<div v-if="aiPaneVisible.box9" class="overview-ai-pane"
@mouseleave="handleHideAiPane('box9')">
<div v-if="aiPaneVisible.box9" class="overview-ai-pane" @mouseleave="handleHideAiPane('box9')">
<AiPane :aiContent="overviewAiContent.box9" />
</div>
</div>
......@@ -258,8 +244,7 @@
</div>
<div class="home-content-footer">
<DivideHeader id="position4" class="divide4" :titleText="'资源库'"></DivideHeader>
<ResourceLibrarySection :on-click-to-detail="handleClickToDetailO"
:on-after-page-change="handlePageChange" />
<ResourceLibrarySection :on-click-to-detail="handleClickToDetailO" :on-after-page-change="handlePageChange" />
</div>
</div>
</div>
......@@ -285,7 +270,7 @@ import {
import { getPersonSummaryInfo } from "@/api/common/index";
import { getChartAnalysis } from "@/api/aiAnalysis/index";
import DivideHeader from "@/components/DivideHeader.vue";
import overviewMainBox from "@/components/base/boxBackground/overviewMainBox.vue";
import overviewMainBox from "@/components/base/BoxBackground/OverviewMainBox.vue";
import OverviewCard from "./OverviewCard.vue";
import ResourceLibrarySection from "./ResourceLibrarySection.vue";
import { useContainerScroll } from "@/hooks/useScrollShow";
......@@ -974,7 +959,13 @@ const handleBox9Data = async () => {
null,
{ showCount: false }
);
box9ChartInstance = setChart(box9Chart, "box9Chart");
const selectParam = {
moduleType: '国会法案',
proposedDateStart: box9selectetedTime.value,
status: box9LegislativeStatus.value === '提出法案' ? 0 : 1
}
box9ChartInstance = setChart(box9Chart, "box9Chart", true, selectParam);
}
};
......
src/views/dataLibrary/components/ChartContainer/index.vue
浏览文件 @ d7757e36
......@@ -100,16 +100,6 @@ const chartItemList = computed(() => {
return arr
})
// nextTick(() => {
// let arr = chartItemList.value.filter(item => item.active)
// if(!arr.length) {
// alert(1)
// chartItemList.value[0].active = true
// }
// })
</script>
<style lang="scss" scoped>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论