Skip to content

R
risk-monitor
提交 3f12faf6 authored 作者: 朱政's avatar 朱政
浏览文件
操作

Merge branch 'master' into zz-dev

上级 b5529599 80947d07
隐藏空白字符变更
内嵌 并排
正在显示 包含 891 行增加 和 480 行删除
.gitignore
浏览文件 @ 3f12faf6
...@@ -14,6 +14,7 @@ lerna-debug.log* ...@@ -14,6 +14,7 @@ lerna-debug.log*
# Dependencies # Dependencies
node_modules node_modules
*node_modules
.pnpm .pnpm
.npm .npm
......
src/App.vue
浏览文件 @ 3f12faf6
...@@ -29,6 +29,25 @@ import { ElMessage } from "element-plus"; ...@@ -29,6 +29,25 @@ import { ElMessage } from "element-plus";
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
import useTagsViewStore from '@/stores/tagsView.js'
const tagsViewStore = useTagsViewStore()
// 在路由全局守卫中处理
router.beforeEach((to, from, next) => {
// 路由允许添加标签（排除掉隐藏的布局页如 /404, /login 等）
if (to.path.includes('dataLibrary')) {
tagsViewStore.addView({
path: to.path,
name: to.name, // 对应组件的 name，用于缓存
meta: { ...to.meta },
active: true
})
}
next()
})
const isShowAiBox = ref(false); const isShowAiBox = ref(false);
......
src/components/base/WarningPane/index.vue
浏览文件 @ 3f12faf6
<template> <template>
<div class="warnning-pane-wrapper" :style="{ width: width ? width : '1600px', height: height ? height : 'auto', minHeight: height ? undefined : '116px' }" <div class="warnning-pane-wrapper" :style="{ width: width ? width : '1600px' }"
:class="{ :class="{
level1: warnningLevel === '特别重大风险', level1: warnningLevel === '特别重大风险',
level2: warnningLevel === '重大风险', level2: warnningLevel === '重大风险',
...@@ -27,12 +27,22 @@ ...@@ -27,12 +27,22 @@
</div> </div>
</div> </div>
<div class="warnning-pane-content text-regular"> <div class="warnning-pane-content text-regular">
{{ warnningContent }} {{ showContent }}
<div class="show-all-btn" v-if="props.warnningContent.length > 185" @click.stop="handleClickShowAll">
<div class="text text-tip-2">
{{ isShowAllContent? '收起' : '展开' }}
</div>
<div class="icon">
<img v-if="!isShowAllContent" src="./icons/down.png" alt="">
<img v-else src="./icons/up.png" alt="">
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import {ref, computed} from 'vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
...@@ -50,6 +60,14 @@ const props = defineProps( ...@@ -50,6 +60,14 @@ const props = defineProps(
} }
) )
const showContent = computed(() => {
if(!isShowAllContent.value) {
return props.warnningContent.length > 185 ? props.warnningContent.slice(0,185) + '...' : props.warnningContent
} else {
return props.warnningContent
}
})
const emit = defineEmits(['clickPane']) const emit = defineEmits(['clickPane'])
const handleClickPane = () => { const handleClickPane = () => {
...@@ -57,6 +75,12 @@ const handleClickPane = () => { ...@@ -57,6 +75,12 @@ const handleClickPane = () => {
emit('clickPane') emit('clickPane')
} }
const isShowAllContent = ref(false)
const handleClickShowAll = () => {
isShowAllContent.value = !isShowAllContent.value
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -64,7 +88,8 @@ const handleClickPane = () => { ...@@ -64,7 +88,8 @@ const handleClickPane = () => {
border-radius: 10px; border-radius: 10px;
border: 1px solid var(--color-primary-100); border: 1px solid var(--color-primary-100);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
cursor: pointer; // cursor: pointer;
height: max-content;
} }
.level1 { .level1 {
...@@ -146,12 +171,40 @@ const handleClickPane = () => { ...@@ -146,12 +171,40 @@ const handleClickPane = () => {
.warnning-pane-content{ .warnning-pane-content{
width: calc(100% - 40px); width: calc(100% - 40px);
margin: 0 auto; margin: 0 auto;
margin-bottom: 16px; // height: 60px;
min-height: 60px; // display: -webkit-box;
height: auto; // /* 2. 设置内部布局方向为垂直 */
display: block; // -webkit-box-orient: vertical;
overflow: visible; // /* 3. 限制显示的行数为 2 行 */
white-space: pre-wrap; // -webkit-line-clamp: 2;
word-break: break-word; // /* 4. 隐藏超出部分 */
// overflow: hidden;
// /* 5. 设置文本溢出显示省略号 */
// text-overflow: ellipsis;
position: relative;
.show-all-btn {
position: absolute;
right: 0px;
bottom: 4px;
width: 48px;
height: 22px;
display: flex;
gap: 4px;
cursor: pointer;
.text{
color: var(--text-primary-50-color);
&:hover{
color: var(--color-primary-100);
}
}
.icon{
width: 16px;
height: 16px;
img{
width: 100%;
height: 100%;
}
}
}
} }
</style> </style>
\ No newline at end of file
src/components/base/texts/IntelligentEntityText.vue
浏览文件 @ 3f12faf6
<template> <template>
<p class="p-regular-rereg"> <p class="p-regular-rereg">
<span class="text-regular" v-for="(segment, index) in processedText" :key="index"> <span class="text-regular" v-for="(segment, index) in processedText" :key="index">
<a v-if="segment.isEntity" :href="`https://cn.bing.com/search?q=${segment.entity?.text_span}`" <span v-if="segment.isEntity" @click="$emit('onEntityClick', segment.entity)" class="entity-link">
class="entity-link" target="_blank" rel="noopener noreferrer"> {{ segment.entity?.text_span }}
{{ segment.entity?.text_span }} <img :src="SearchIcon" :width="10" :height="10" alt="search" />
<img :src="SearchIcon" :width="10" :height="10" alt="search" /> </span>
</a> <span v-else>
<span v-else> {{ segment.text }}
{{ segment.text }} </span>
</span> </span>
</span> </p>
</p>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { TextEntity } from '@/api/intelligent'; import { TextEntity } from "@/api/intelligent";
import { ref, watch, onMounted } from 'vue'; import { ref, watch, onMounted } from "vue";
import SearchIcon from './images/search.png' import SearchIcon from "./images/search.png";
export interface ProcessedTextSegment { export interface ProcessedTextSegment {
text: string text: string;
isEntity: boolean isEntity: boolean;
entity?: TextEntity entity?: TextEntity;
} }
const props = defineProps({ const props = defineProps({
text: { text: {
type: String, type: String,
default: '' default: ""
}, },
entities: { entities: {
type: Array<TextEntity>, type: Array<TextEntity>,
default: () => [] default: () => []
} }
}) });
const emit = defineEmits(["onEntityClick"]);
// 处理后的文本段 // 处理后的文本段
const processedText = ref<ProcessedTextSegment[]>([]) const processedText = ref<ProcessedTextSegment[]>([]);
// 处理文本，识别并替换实体 // 处理文本，识别并替换实体
const processText = () => { const processText = () => {
console.log('props.entities.length', props.entities.length) console.log("props.entities.length", props.entities.length);
if (!props.text || !props.entities) { if (!props.text || !props.entities) {
// console.log('props.text', props.entities.length) // console.log('props.text', props.entities.length)
processedText.value = [{ text: '', isEntity: false }] processedText.value = [{ text: "", isEntity: false }];
return return;
} }
const result = [] const result = [];
let currentPosition = 0 let currentPosition = 0;
// 按实体文本长度排序，优先匹配长文本 // 按实体文本长度排序，优先匹配长文本
const sortedEntities = [...props.entities].sort((a, b) => const sortedEntities = [...props.entities].sort((a, b) => b.text_span.length - a.text_span.length);
b.text_span.length - a.text_span.length
)
while (currentPosition < props.text.length) { while (currentPosition < props.text.length) {
let matched = false let matched = false;
for (const entity of sortedEntities) { for (const entity of sortedEntities) {
const entityText = entity.text_span const entityText = entity.text_span;
const endPosition = currentPosition + entityText.length const endPosition = currentPosition + entityText.length;
if (props.text.substring(currentPosition, endPosition) === entityText) { if (props.text.substring(currentPosition, endPosition) === entityText) {
// 如果当前位置是实体，添加到结果 // 如果当前位置是实体，添加到结果
result.push({ result.push({
isEntity: true, isEntity: true,
entity: { ...entity } entity: { ...entity }
}) });
currentPosition = endPosition currentPosition = endPosition;
matched = true matched = true;
break break;
} }
} }
if (!matched) { if (!matched) {
// 如果不是实体，收集普通文本 // 如果不是实体，收集普通文本
let nextEntityStart = props.text.length let nextEntityStart = props.text.length;
for (const entity of sortedEntities) { for (const entity of sortedEntities) {
const pos = props.text.indexOf(entity.text_span, currentPosition) const pos = props.text.indexOf(entity.text_span, currentPosition);
if (pos !== -1 && pos < nextEntityStart) { if (pos !== -1 && pos < nextEntityStart) {
nextEntityStart = pos nextEntityStart = pos;
} }
} }
if (nextEntityStart > currentPosition) { if (nextEntityStart > currentPosition) {
const plainText = props.text.substring(currentPosition, nextEntityStart) const plainText = props.text.substring(currentPosition, nextEntityStart);
result.push({ result.push({
text: plainText, text: plainText,
isEntity: false isEntity: false
}) });
currentPosition = nextEntityStart currentPosition = nextEntityStart;
} else { } else {
// 没有更多实体，添加剩余文本 // 没有更多实体，添加剩余文本
const remainingText = props.text.substring(currentPosition) const remainingText = props.text.substring(currentPosition);
if (remainingText) { if (remainingText) {
result.push({ result.push({
text: remainingText, text: remainingText,
isEntity: false isEntity: false
}) });
} }
currentPosition = props.text.length currentPosition = props.text.length;
} }
} }
} }
processedText.value = result processedText.value = result;
} };
// 监听文本和实体变化 // 监听文本和实体变化
watch(() => props.text, processText) watch(() => props.text, processText);
watch(() => props.entities, processText, { deep: true }) watch(() => props.entities, processText, { deep: true });
// 初始化处理 // 初始化处理
onMounted(processText) onMounted(processText);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use '@/styles/common.scss'; @use "@/styles/common.scss";
.entity-link { .entity-link {
color: var(--color-primary-100); color: var(--color-primary-100);
&:hover {
cursor: pointer;
}
} }
.p-regular-rereg { .p-regular-rereg {
text-indent: 2em; text-indent: 2em;
margin: 4px 0; margin: 4px 0;
} }
</style> </style>
\ No newline at end of file
src/components/base/texts/TextTranslatePane.vue
浏览文件 @ 3f12faf6
<template> <template>
<div class="full-width"> <div class="full-width">
<div class="flex-display" style="align-items: center;"> <div class="flex-display" style="align-items: center">
<common-text class="text-title-3-bold" color="var(--text-primary-80-color)">{{ isOpenTranslation <common-text class="text-title-3-bold" color="var(--text-primary-80-color)">{{
? '中文' : '原文' }}</common-text> isOpenTranslation ? "中文" : "原文"
<div class="flex-fill" style="margin: 0 10px;"> }}</common-text>
<el-divider></el-divider> <div class="flex-fill" style="margin: 0 10px">
</div> <el-divider></el-divider>
<el-button v-if="showMoreVisible" @click="() => { showMore = !showMore; updateText() }"> </div>
{{ showMore ? '收起' : '展开' }} <el-button
<el-icon> v-if="showMoreVisible"
<arrow-up v-if="showMore" /> @click="
<arrow-down v-else /> () => {
</el-icon> showMore = !showMore;
</el-button> updateText();
</div> }
<el-row :gutter="32"> "
<el-col :span="textColSpan" v-for="(item, index) in allTexts" :key="index"> >
<!-- <p class="p-news-content"> {{ item }}</p> --> {{ showMore ? "收起" : "展开" }}
<intelligent-entity-text :text="item" <el-icon>
:entities="isHighlightEntity ? textEntities : []"></intelligent-entity-text> <arrow-up v-if="showMore" />
</el-col> <arrow-down v-else />
</el-row> </el-icon>
</div> </el-button>
</div>
<el-row :gutter="32">
<el-col :span="textColSpan" v-for="(item, index) in allTexts" :key="index">
<!-- <p class="p-news-content"> {{ item }}</p> -->
<intelligent-entity-text
:text="item"
@on-entity-click="e => $emit('onEntityClick', e)"
:entities="isHighlightEntity ? textEntities : []"
></intelligent-entity-text>
</el-col>
</el-row>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import '@/styles/container.scss'; import "@/styles/container.scss";
import '@/styles/common.scss'; import "@/styles/common.scss";
import { ref, watch, onMounted } from 'vue'; import { ref, watch, onMounted } from "vue";
import { TextEntity } from '@/api/intelligent'; import { TextEntity } from "@/api/intelligent";
import IntelligentEntityText from '@/components/base/texts/IntelligentEntityText.vue'; import IntelligentEntityText from "@/components/base/texts/IntelligentEntityText.vue";
import { ElIcon, ElButton, ElDivider, ElRow, ElCol } from 'element-plus'; import { ElIcon, ElButton, ElDivider, ElRow, ElCol } from "element-plus";
import CommonText from './CommonText.vue'; import CommonText from "./CommonText.vue";
const allTexts = ref([]); const allTexts = ref([]);
const textColSpan = ref(12); const textColSpan = ref(12);
...@@ -39,71 +51,73 @@ const hasTranslation = ref(false); ...@@ -39,71 +51,73 @@ const hasTranslation = ref(false);
const showMore = ref(false); const showMore = ref(false);
const showMoreVisible = ref(false); const showMoreVisible = ref(false);
const props = defineProps({ const props = defineProps({
//段落列表： 原始文本 //段落列表： 原始文本
textsRaw: { textsRaw: {
type: Array<String>, type: Array<String>,
default: () => [] default: () => []
}, },
//段落列表： 翻译文本 //段落列表： 翻译文本
textsTranslate: { textsTranslate: {
type: Array<String>, type: Array<String>,
default: () => [] default: () => []
}, },
//是否显示翻译 //是否显示翻译
isOpenTranslation: { isOpenTranslation: {
type: Boolean, type: Boolean,
default: true default: true
}, },
//是否高亮实体 //是否高亮实体
isHighlightEntity: { isHighlightEntity: {
type: Boolean, type: Boolean,
default: true default: true
}, },
//实体列表 //实体列表
textEntities: { textEntities: {
type: Array<TextEntity>, type: Array<TextEntity>,
default: () => [] default: () => []
} }
}) });
const emit = defineEmits(["onEntityClick"]);
function updateText() { function updateText() {
const tempTexts = [] const tempTexts = [];
const tempRaws = props.textsRaw ?? [] const tempRaws = props.textsRaw ?? [];
const tempTranslates = props.textsTranslate ?? [] const tempTranslates = props.textsTranslate ?? [];
hasTranslation.value = tempTranslates.length > 0 hasTranslation.value = tempTranslates.length > 0;
if (hasTranslation.value && props.isOpenTranslation) { if (hasTranslation.value && props.isOpenTranslation) {
// 遍历原始文本和翻译文本，将它们交替添加到 tempTexts 中,并保持原始文本和翻译文本的的数量一致 // 遍历原始文本和翻译文本，将它们交替添加到 tempTexts 中,并保持原始文本和翻译文本的的数量一致
const maxCount = Math.max(tempRaws.length, tempTranslates.length) const maxCount = Math.max(tempRaws.length, tempTranslates.length);
for (let i = 0; i < maxCount; i++) { for (let i = 0; i < maxCount; i++) {
if (i < tempTranslates.length) { if (i < tempTranslates.length) {
tempTexts.push(tempTranslates[i]); tempTexts.push(tempTranslates[i]);
} else { } else {
tempTexts.push(''); tempTexts.push("");
} }
if (i < tempRaws.length) { if (i < tempRaws.length) {
tempTexts.push(tempRaws[i]); tempTexts.push(tempRaws[i]);
} else { } else {
tempTexts.push(''); tempTexts.push("");
} }
} }
console.log(tempTexts.length) console.log(tempTexts.length);
textColSpan.value = 12; textColSpan.value = 12;
showMoreVisible.value = tempTexts.length > 6; showMoreVisible.value = tempTexts.length > 6;
allTexts.value = showMore.value ? tempTexts : tempTexts.slice(0, 6); allTexts.value = showMore.value ? tempTexts : tempTexts.slice(0, 6);
} else { } else {
textColSpan.value = 24; textColSpan.value = 24;
showMoreVisible.value = tempRaws.length > 3; showMoreVisible.value = tempRaws.length > 3;
allTexts.value = showMore.value ? tempRaws : tempRaws.slice(0, 3); allTexts.value = showMore.value ? tempRaws : tempRaws.slice(0, 3);
} }
} }
watch(() => [props.textsRaw, props.textsTranslate, props.isOpenTranslation], () => { watch(
updateText(); () => [props.textsRaw, props.textsTranslate, props.isOpenTranslation],
}) () => {
updateText();
}
);
onMounted(() => { onMounted(() => {
updateText(); updateText();
}) });
</script> </script>
\ No newline at end of file
src/router/index.js
浏览文件 @ 3f12faf6
...@@ -65,4 +65,5 @@ router.beforeEach((to, from, next) => { ...@@ -65,4 +65,5 @@ router.beforeEach((to, from, next) => {
next(); next();
}); });
export default router; export default router;
src/router/modules/comprehensiveSearch.js
浏览文件 @ 3f12faf6
// 综合搜索 // 综合搜索
const ComprehensiveSearch = () => import('@/views/comprehensiveSearch/index.vue') const ComprehensiveSearch = () => import("@/views/comprehensiveSearch/index.vue");
const SearchResults = () => import('@/views/comprehensiveSearch/searchResults/index.vue') const SearchResults = () => import("@/views/comprehensiveSearch/searchResults/index.vue");
const Chat = () => import('@/views/comprehensiveSearch/chat/index.vue') const Chat = () => import("@/views/comprehensiveSearch/chat/index.vue");
const comprehensiveSearchRoutes = [ const comprehensiveSearchRoutes = [
// 综合搜索 // 综合搜索
{ {
path: "/comprehensiveSearch", path: "/comprehensiveSearch",
name: "comprehensiveSearch", name: "comprehensiveSearch",
component: ComprehensiveSearch, component: ComprehensiveSearch,
meta: { meta: {
title: "搜索-科技安全" title: "搜索-科技安全"
} }
}, },
{ {
path: "/searchResults", path: "/searchResults",
name: "searchResults", name: "searchResults",
component: SearchResults, component: SearchResults,
meta: { meta: {
title: "搜索结果", title: "搜索结果",
dynamicTitle: true dynamicTitle: true
} }
}, },
{ {
path: "/chat", path: "/chat",
name: "chat", name: "chat",
component: Chat, component: Chat,
meta: { meta: {
title: "智能问答" title: "智能问答"
} }
}, }
];
]
import { useGotoPage } from "../common.js"; import { useGotoPage } from "../common.js";
export function useGotoComprehensiveSearch() { export function useGotoComprehensiveSearch() {
const gotoPage = useGotoPage(); const gotoPage = useGotoPage();
return (isNewTabs = true) => gotoPage("/comprehensiveSearch/", {}, isNewTabs) return (isNewTabs = true) => gotoPage("/comprehensiveSearch/", {}, isNewTabs);
} }
export function useGotoSearchResults() { export function useGotoSearchResults() {
const gotoPage = useGotoPage(); const gotoPage = useGotoPage();
return (isNewTabs = true) => gotoPage("/searchResults/", {searchText, areaName}, isNewTabs)
return (searchText, areaName, isNewTabs = true) => gotoPage("/searchResults/", { searchText, areaName }, isNewTabs);
} }
export default comprehensiveSearchRoutes export default comprehensiveSearchRoutes;
\ No newline at end of file
src/utils/setChart.js
浏览文件 @ 3f12faf6
...@@ -11,7 +11,6 @@ const setChart = (option, chartId, allowClick, selectParam) => { ...@@ -11,7 +11,6 @@ const setChart = (option, chartId, allowClick, selectParam) => {
let chart = echarts.init(chartDom); let chart = echarts.init(chartDom);
chart.setOption(option); chart.setOption(option);
if (allowClick) { if (allowClick) {
// 3. 添加点击事件监听
chart.on('click', function (params) { chart.on('click', function (params) {
switch (selectParam.moduleType) { switch (selectParam.moduleType) {
case '国会法案': case '国会法案':
......
src/views/bill/billHome/index.vue
浏览文件 @ 3f12faf6
...@@ -988,7 +988,9 @@ const handleBox9Data = async () => { ...@@ -988,7 +988,9 @@ const handleBox9Data = async () => {
const selectParam = { const selectParam = {
moduleType: '国会法案', moduleType: '国会法案',
proposedDateStart: box9selectetedTime.value, proposedDateStart: box9selectetedTime.value,
status: box9LegislativeStatus.value === '提出法案' ? 0 : 1 status: box9LegislativeStatus.value === '提出法案' ? 0 : 1,
isInvolveCn: 1
} }
box9ChartInstance = setChart(box9Chart, "box9Chart", true, selectParam); box9ChartInstance = setChart(box9Chart, "box9Chart", true, selectParam);
......
src/views/dataLibrary/bill/countryBill/index.vue
浏览文件 @ 3f12faf6
...@@ -8,19 +8,29 @@ ...@@ -8,19 +8,29 @@
:select-name="selectedDate" :custom-time="customTime" @update:select-text="handleSelectDate" :select-name="selectedDate" :custom-time="customTime" @update:select-text="handleSelectDate"
@update:custom-time="handleCustomDate" /> @update:custom-time="handleCustomDate" />
<SelectBox v-if="isFolderAll" :placeholder-name="partyPlaceHolder" select-title="所属党派" :select-list="partyList" <SelectBox v-if="isFolderAll" :placeholder-name="partyPlaceHolder" select-title="所属党派" :select-list="partyList"
:select-name="selectedParty" @update:select-text="handleSelectArea" /> :select-name="selectedParty" @update:select-text="handleSelectParty" />
<SelectBox v-if="isFolderAll" :placeholder-name="congressPlaceHolder" select-title="提出议院" :select-list="congressList" <SelectBox v-if="isFolderAll" :placeholder-name="congressPlaceHolder" select-title="提出议院"
:select-name="selectedCongress" @update:select-text="handleSelectArea" /> :select-list="congressList" :select-name="selectedCongress" @update:select-text="handleSelectCongress" />
<SelectBox v-if="isFolderAll" :placeholder-name="areaPlaceHolder" select-title="委员会" :select-list="areaList" <SelectBox v-if="isFolderAll" :placeholder-name="orgPlaceHolder" select-title="委员会" :select-list="orgList"
:select-name="selectedArea" @update:select-text="handleSelectArea" /> :select-name="selectedOrg" @update:select-text="handleSelectOrg" />
<SelectBox v-if="isFolderAll" :placeholder-name="areaPlaceHolder" select-title="提出议员" :select-list="areaList" <SelectBox v-if="isFolderAll" :placeholder-name="memberPlaceHolder" select-title="提出议员"
:select-name="selectedArea" @update:select-text="handleSelectArea" /> :select-list="memberList" :select-name="selectedmember" @update:select-text="handleSelectMember" />
<SelectBox v-if="isFolderAll" :placeholder-name="statusPlaceHolder" select-title="所处阶段" :select-list="statusList" <SelectBox v-if="isFolderAll" :placeholder-name="statusPlaceHolder" select-title="所处阶段"
:select-name="selectedStauts" @update:select-text="handleSelectArea" /> :select-list="statusList" :select-name="selectedStauts" @update:select-text="handleSelectStauts" />
<div class="check-box">
<div class="check-box-left text-tip-1">
{{ '是否涉华：' }}
</div>
<div class="check-box-right">
<el-checkbox v-model="isInvolveCn" class="involve-checkbox" @change="handleInvolveCnChange">
{{ '只看涉华委员会' }}
</el-checkbox>
</div>
</div>
</div> </div>
<div class="header-footer"> <div class="header-footer">
<div class="header-footer-left"> <div class="header-footer-left">
<ActiveTag v-for="tag, index in activeTagList" :key="index" :tagName="tag.name" <ActiveTag v-for="tag, index in activeTagList" :key="index" :tagName="tag"
@close="handleCloseCurTag(tag, index)" /> @close="handleCloseCurTag(tag, index)" />
</div> </div>
<div class="header-footer-right"> <div class="header-footer-right">
...@@ -53,10 +63,10 @@ ...@@ -53,10 +63,10 @@
<ChartContainer chartTitle="美国会法案提出数量随时间变化趋势" :chartTypeList="curChartTypeList" <ChartContainer chartTitle="美国会法案提出数量随时间变化趋势" :chartTypeList="curChartTypeList"
@clickChartItem="handleSwitchActiveChart"> @clickChartItem="handleSwitchActiveChart">
<template #chart-box> <template #chart-box>
<LineChart v-if="activeChart === '折线图'" :lineChartData="lineChartData" /> <LineChart v-if="activeChart === '折线图'" :lineChartData="curChartData" />
<PieChart v-if="activeChart === '饼状图'" :pieChartData="pieChartData" /> <PieChart v-if="activeChart === '饼状图'" :pieChartData="curChartData" />
<BarChart v-if="activeChart === '柱状图'" :barChartData="barChartData" /> <BarChart v-if="activeChart === '柱状图'" :barChartData="curChartData" />
<RaderChart v-if="activeChart === '雷达图'" :radarChartData="radarChartData" /> <RaderChart v-if="activeChart === '雷达图'" :radarChartData="curChartData" />
</template> </template>
</ChartContainer> </ChartContainer>
...@@ -109,13 +119,23 @@ ...@@ -109,13 +119,23 @@
<div class="data-main-box-main-content"> <div class="data-main-box-main-content">
<el-table ref="tableRef" :data="tableData" row-key="id" @selection-change="handleSelectionChange" <el-table ref="tableRef" :data="tableData" row-key="id" @selection-change="handleSelectionChange"
@select="handleSelect" @select-all="handleSelectAll" style="width: 100%" :row-style="{ height: '52px' }"> @select="handleSelect" @select-all="handleSelectAll" style="width: 100%" :row-style="{ height: '52px' }">
<el-table-column type="selection" width="55" /> <el-table-column type="selection" width="40" />
<el-table-column label="Date" width="180" class-name="date-column"> <el-table-column label="法案名称" width="455">
<template #default="scope">
<span class="title-item text-compact-bold">{{ scope.row.title }}</span>
</template>
</el-table-column>
<el-table-column label="日期" width="120" class-name="date-column">
<template #default="scope">{{ scope.row.date }}</template> <template #default="scope">{{ scope.row.date }}</template>
</el-table-column> </el-table-column>
<el-table-column property="name" label="Name" width="180" /> <el-table-column label="提出人" width="480">
<el-table-column property="address" label="use show-overflow-tooltip" width="360" show-overflow-tooltip /> <template #default="scope">
<el-table-column property="address" label="address" /> <span class="person-item text-compact">{{ scope.row.sponsorPersonName }}</span>
</template>
</el-table-column>
<el-table-column property="affiliation" label="所属党派" width="120" />
<el-table-column property="originDepart" label="提出委员会" width="180" />
<el-table-column property="status" label="所处阶段" width="120" />
</el-table> </el-table>
</div> </div>
</div> </div>
...@@ -139,9 +159,13 @@ import BarChart from '../../components/BarChart/index.vue' ...@@ -139,9 +159,13 @@ import BarChart from '../../components/BarChart/index.vue'
import RaderChart from '../../components/RadarChart/idnex.vue' import RaderChart from '../../components/RadarChart/idnex.vue'
import SelectBox from '../../components/SelectBox/index.vue' import SelectBox from '../../components/SelectBox/index.vue'
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { getPostOrgList, getPostMemberList } from '@/api/bill/billHome'
import { search } from '@/api/comprehensiveSearch'
const route = useRoute(); const route = useRoute();
// 图表/数据 // 图表/数据
const isShowChart = ref(true) const isShowChart = ref(false)
const handleSwitchChartData = () => { const handleSwitchChartData = () => {
isShowChart.value = !isShowChart.value isShowChart.value = !isShowChart.value
...@@ -155,32 +179,41 @@ const staticsDemensionList = ref([ ...@@ -155,32 +179,41 @@ const staticsDemensionList = ref([
{ {
name: '提案时间', name: '提案时间',
active: true, active: true,
chartTypeList: ['折线图', '柱状图'] chartTypeList: ['折线图', '柱状图'],
data: {
dataX: [],
dataY: []
}
}, },
{ {
name: '科技领域', name: '科技领域',
active: false, active: false,
chartTypeList: ['饼状图'] chartTypeList: ['饼状图'],
data: []
}, },
{ {
name: '提出议院', name: '提出议院',
active: false, active: false,
chartTypeList: ['饼状图', '雷达图'] chartTypeList: ['饼状图'],
data: []
}, },
{ {
name: '提出委员会', name: '提出委员会',
active: false, active: false,
chartTypeList: ['折线图', '柱状图', '饼状图'] chartTypeList: ['饼状图'],
data: []
}, },
{ {
name: '提出议员党派', name: '提出议员党派',
active: false, active: false,
chartTypeList: ['饼状图'] chartTypeList: ['饼状图'],
data: []
}, },
{ {
name: '立法阶段', name: '立法阶段',
active: false, active: false,
chartTypeList: ['饼状图'] chartTypeList: ['饼状图'],
data: []
}, },
]) ])
...@@ -193,12 +226,16 @@ const curChartTypeList = computed(() => { ...@@ -193,12 +226,16 @@ const curChartTypeList = computed(() => {
const curDemension = ref('提案时间') const curDemension = ref('提案时间')
const handleClickDemensionItem = (val) => { const handleClickDemensionItem = (val) => {
activeChart.value = ''
staticsDemensionList.value.forEach(item => { staticsDemensionList.value.forEach(item => {
item.active = false item.active = false
}) })
val.active = true val.active = true
curDemension.value = val.name curDemension.value = val.name
activeChart.value = val.chartTypeList[0] setTimeout(() => {
activeChart.value = val.chartTypeList[0]
curChartData.value = val.data
})
} }
const selectedTime = ref('按月统计') const selectedTime = ref('按月统计')
...@@ -218,25 +255,44 @@ const timeList = ref([ ...@@ -218,25 +255,44 @@ const timeList = ref([
]) ])
// 激活的标签列表 // 激活的标签列表
const activeTagList = ref([ const activeTagList = computed(() => {
{ const arr = []
name: '人工智能' if (selectedArea.value && selectedArea !== '全部领域') {
}, arr.push(selectedArea.value)
{ }
name: '共和党' if (selectedDate.value) {
}, arr.push(selectedDate.value)
{ }
name: '2025-01-01 至 2025-12-31' if (selectedParty.value && selectedParty !== '全部党派') {
}, arr.push(selectedParty.value)
}
if (selectedCongress.value && selectedCongress !== '全部议院') {
arr.push(selectedCongress.value)
}
if (selectedOrg.value && selectedOrg !== '全部委员会') {
arr.push(selectedOrg.value)
}
if (selectedmember.value && selectedmember !== '全部议员') {
arr.push(selectedmember.value)
}
if (selectedStauts.value && selectedStauts !== '全部阶段') {
arr.push(selectedStauts.value)
}
if (isInvolveCn.value) {
const involveStr = '涉华'
arr.push(involveStr)
}
]) return arr
})
const handleCloseCurTag = (tag, index) => { const handleCloseCurTag = (tag, index) => {
// alert(tag.name) // alert(tag.name)
activeTagList.value.splice(index, 1) activeTagList.value.splice(index, 1)
} }
const activeChart = ref('折线图') const activeChart = ref('')
const handleSwitchActiveChart = val => { const handleSwitchActiveChart = val => {
activeChart.value = val.name activeChart.value = val.name
...@@ -373,18 +429,70 @@ const operationList = ref([ ...@@ -373,18 +429,70 @@ const operationList = ref([
const areaPlaceHolder = ref('请选择领域') const areaPlaceHolder = ref('请选择领域')
const selectedArea = ref('') const selectedArea = ref('')
const areaList = ref([ const areaList = ref([
{
name: '全部领域',
id: '全部领域'
},
{ {
name: '人工智能', name: '人工智能',
id: '人工智能' id: '人工智能'
}, },
{
name: '生物科技',
id: '生物科技'
},
{
name: '新一代通信网络',
id: '新一代通信网络'
},
{
name: '量子科技',
id: '量子科技'
},
{
name: '新能源',
id: '新能源'
},
{ {
name: '集成电路', name: '集成电路',
id: '集成电路' id: '集成电路'
}, },
{
name: '海洋',
id: '海洋'
},
{ {
name: '先进制造', name: '先进制造',
id: '先进制造' id: '先进制造'
}, },
{
name: '新材料',
id: '新材料'
},
{
name: '航空航天',
id: '航空航天'
},
{
name: '太空',
id: '太空'
},
{
name: '深海',
id: '深海'
},
{
name: '极地',
id: '极地'
},
{
name: '核',
id: '核'
},
{
name: '其他',
id: '其他'
},
]) ])
const handleSelectArea = (value) => { const handleSelectArea = (value) => {
...@@ -450,6 +558,10 @@ const partyList = ref([ ...@@ -450,6 +558,10 @@ const partyList = ref([
const selectedParty = ref('') const selectedParty = ref('')
const partyPlaceHolder = ref('请选择党派') const partyPlaceHolder = ref('请选择党派')
const handleSelectParty = value => {
selectedParty.value = value
}
// 议院列表 // 议院列表
const congressList = ref([ const congressList = ref([
{ {
...@@ -465,6 +577,10 @@ const congressList = ref([ ...@@ -465,6 +577,10 @@ const congressList = ref([
const selectedCongress = ref('') const selectedCongress = ref('')
const congressPlaceHolder = ref('请选择议院') const congressPlaceHolder = ref('请选择议院')
const handleSelectCongress = value => {
selectedCongress.value = value
}
// 议院列表 // 议院列表
const statusList = ref([ const statusList = ref([
{ {
...@@ -480,6 +596,79 @@ const statusList = ref([ ...@@ -480,6 +596,79 @@ const statusList = ref([
const selectedStauts = ref('') const selectedStauts = ref('')
const statusPlaceHolder = ref('请选择立法阶段') const statusPlaceHolder = ref('请选择立法阶段')
const handleSelectStauts = value => {
selectedStauts.value = value
}
// 是否涉华
const isInvolveCn = ref(true)
const handleInvolveCnChange = () => {
}
// 委员会
const orgList = ref([
])
const selectedOrg = ref('')
const orgPlaceHolder = ref('请选择委员会')
const handleSelectOrg = value => {
selectedOrg.value = value
}
// 获取委员会
const handleGetOrgList = async () => {
try {
const res = await getPostOrgList()
console.log('委员会列表', res);
if (res.code === 200 && res.data) {
orgList.value = res.data.map(item => {
return {
name: item.departmentName,
id: item.departmentName
}
})
}
} catch (error) {
console.error('获取委员会列表报错:', error);
}
}
// 提出议员
const memberList = ref([
])
const selectedmember = ref('')
const memberPlaceHolder = ref('请选择议员')
const handleSelectMember = value => {
selectedmember.value = value
}
// 获取议员
const handleGetMemberList = async () => {
try {
const res = await getPostMemberList()
console.log('议员列表', res);
if (res.code === 200 && res.data) {
memberList.value = res.data.map(item => {
return {
name: item.memberName,
id: item.memberName
}
})
}
} catch (error) {
console.error('获取议员列表报错:', error);
}
}
// 展开全部 / 收起 // 展开全部 / 收起
const isFolderAll = ref(false) const isFolderAll = ref(false)
const handleSwitchFolderAll = () => { const handleSwitchFolderAll = () => {
...@@ -492,78 +681,6 @@ const tableRef = ref(null) ...@@ -492,78 +681,6 @@ const tableRef = ref(null)
// 表格数据 // 表格数据
const tableData = ref([ const tableData = ref([
{
id: 1,
date: '2016-05-04',
name: 'Aleyna Kutzner',
address: 'Lohrbergstr. 86c, Süd Lilli, Saarland',
},
{
id: 2,
date: '2016-05-03',
name: 'Helen Jacobi',
address: '760 A Street, South Frankfield, Illinois',
},
{
id: 3,
date: '2016-05-02',
name: 'Brandon Deckert',
address: 'Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen',
},
{
id: 4,
date: '2016-05-01',
name: 'Margie Smith',
address: '23618 Windsor Drive, West Ricardoview, Idaho',
},
{
id: 5,
date: '2016-05-01',
name: 'Margie Smith',
address: '23618 Windsor Drive, West Ricardoview, Idaho',
},
{
id: 6,
date: '2016-05-01',
name: 'Margie Smith',
address: '23618 Windsor Drive, West Ricardoview, Idaho',
},
{
id: 7,
date: '2016-05-01',
name: 'Margie Smith',
address: '23618 Windsor Drive, West Ricardoview, Idaho',
},
{
id: 8,
date: '2016-05-01',
name: 'Margie Smith',
address: '23618 Windsor Drive, West Ricardoview, Idaho',
},
{
id: 9,
date: '2016-05-01',
name: 'Margie Smith',
address: '23618 Windsor Drive, West Ricardoview, Idaho',
},
{
id: 10,
date: '2016-05-01',
name: 'Margie Smith',
address: '23618 Windsor Drive, West Ricardoview, Idaho',
},
// {
// id: 11,
// date: '2016-05-01',
// name: 'Margie Smith',
// address: '23618 Windsor Drive, West Ricardoview, Idaho',
// },
// {
// id: 12,
// date: '2016-05-01',
// name: 'Margie Smith',
// address: '23618 Windsor Drive, West Ricardoview, Idaho',
// }
]) ])
...@@ -599,7 +716,59 @@ const selectedCount = computed(() => selectedMap.value.size) ...@@ -599,7 +716,59 @@ const selectedCount = computed(() => selectedMap.value.size)
// 获取表格数据（示例） // 获取表格数据（示例）
const fetchTableData = async () => { const fetchTableData = async () => {
// 调用接口获取数据... // 调用接口获取数据...
// const res = await getList({ page: currentPage.value, size: pageSize.value }) const params = {
page: currentPage.value,
size: pageSize.value,
keyword: '',
type: 1, // type 1= 法案 2= 政令 3 =智库 4=智库报告 5=实体清单【制裁记录】 6= 人物 7= 机构 8=新闻 9= 社媒
domains: selectedArea.value ? [selectedArea.value] : null,
proposedDateStart: selectedDate.value ? selectedDate.value : null,
proposedDateEnd: null,
affiliation: selectedParty.value ? selectedParty.value : null,
originChamber: selectedCongress.value ? selectedCongress.value : null,
originDepart: selectedOrg.value ? selectedOrg.value : null,
sponsorPersonName: selectedmember.value ? selectedmember.value : null,
status: selectedStauts.value === '通过' ? 1 : 0,
sleStatus: isInvolveCn ? 1 : 0
}
try {
const res = await search(params)
console.log('搜索结果', res);
if (res.code === 200 && res.data) {
tableData.value = res.data.records
totalNum.value = res.data.total
staticsDemensionList.value[0].data = {
dataX: Object.keys(res.data.aggregationsDate),
dataY: Object.values(res.data.aggregationsDate).map(value => Number(value))
}
staticsDemensionList.value[1].data = Object.entries(res.data.aggregationsDomain).map(([key, value]) => ({
name: key,
value: Number(value)
}))
staticsDemensionList.value[2].data = Object.entries(res.data.aggregationsOriginChamber).map(([key, value]) => ({
name: key,
value: Number(value)
}))
staticsDemensionList.value[3].data = Object.entries(res.data.aggregationsOriginDepart).map(([key, value]) => ({
name: key,
value: Number(value)
}))
staticsDemensionList.value[4].data = Object.entries(res.data.aggregationsAffiliation).map(([key, value]) => ({
name: key,
value: Number(value)
}))
staticsDemensionList.value[5].data = Object.entries(res.data.aggregationsStatus).map(([key, value]) => ({
name: key === '1' ? '通过' : '提出',
value: Number(value)
}))
}
} catch (error) {
}
// tableData.value = res.data // tableData.value = res.data
// total.value = res.total // total.value = res.total
...@@ -720,30 +889,23 @@ watch(tableData, () => { ...@@ -720,30 +889,23 @@ watch(tableData, () => {
}) })
}) })
onMounted(() => { // 当前图表数据
selectedArea.value = route.query.domains?JSON.parse(route.query.domains)[0]:'' const curChartData = ref(null)
selectedDate.value = route.query.proposedDateStart
activeTagList.value = [ onMounted(async () => {
] handleGetOrgList()
if (selectedArea.value) { handleGetMemberList()
activeTagList.value.push( selectedArea.value = route.query.domains ? JSON.parse(route.query.domains)[0] : ''
{ name: selectedArea.value } selectedDate.value = route.query.proposedDateStart,
) isInvolveCn.value = route.query.isInvolveCn ? true : false
} selectedStauts.value = route.query.status === '1' ? '通过' : '提出'
if (selectedDate.value) {
activeTagList.value.push({
name: selectedDate.value
})
}
if (route.query.status === '0' || route.query.status === '1') {
activeTagList.value.push({
name: route.query.status === '0' ? '提出' : '通过'
})
}
// 初始化 // 初始化
fetchTableData() await fetchTableData()
activeChart.value = staticsDemensionList.value[0].chartTypeList[0]
curChartData.value = staticsDemensionList.value[0].data
}) })
...@@ -780,7 +942,20 @@ onMounted(() => { ...@@ -780,7 +942,20 @@ onMounted(() => {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 12px 42px; gap: 12px 42px;
// transition: all ease 1s; // transition: all ease 1s;
.check-box {
display: flex;
width: 348px;
height: 28px;
align-items: center;
gap: 8px;
.check-box-left {
width: 100px;
color: var(--text-primary-65-color);
}
}
} }
...@@ -979,4 +1154,12 @@ onMounted(() => { ...@@ -979,4 +1154,12 @@ onMounted(() => {
color: #409eff !important; color: #409eff !important;
font-weight: 500; font-weight: 500;
} }
.title-item {
color: var(--text-primary-80-color);
}
.person-item {
color: var(--color-primary-100);
}
</style> </style>
\ No newline at end of file
src/views/dataLibrary/index.vue
浏览文件 @ 3f12faf6
...@@ -111,13 +111,13 @@ const siderList = ref([ ...@@ -111,13 +111,13 @@ const siderList = ref([
{ {
name: '科技法案', name: '科技法案',
icon: Icon1, icon: Icon1,
active: true, active: false,
isExpanded: true, isExpanded: false,
children: [ children: [
{ {
name: '国会法案', name: '国会法案',
path: '/dataLibrary/countryBill', path: '/dataLibrary/countryBill',
active: true, active: false,
}, },
{ {
name: '州法案', name: '州法案',
...@@ -477,6 +477,118 @@ const handleClickToolBox = () => { ...@@ -477,6 +477,118 @@ const handleClickToolBox = () => {
}; };
onMounted(() => { onMounted(() => {
const path = route.path
switch (path) {
case '/dataLibrary/countryBill':
siderList.value[0].active = true
siderList.value[0].isExpanded = true
siderList.value[0].children[0].active = true
break
case '/dataLibrary/stateBill':
siderList.value[0].active = true
siderList.value[0].isExpanded = true
siderList.value[0].children[1].active = true
break
case '/dataLibrary/dataDecree':
siderList.value[1].active = true
break
case '/dataLibrary/dataThinkTank':
siderList.value[2].active = true
break
case '/dataLibrary/dataEntityList':
siderList.value[3].active = true
siderList.value[3].isExpanded = true
siderList.value[3].children[0].active = true
break
case '/dataLibrary/dataCommerceControlList':
siderList.value[3].active = true
siderList.value[3].isExpanded = true
siderList.value[3].children[1].active = true
break
case '/dataLibrary/dataEntityListEvent':
siderList.value[3].active = true
siderList.value[3].isExpanded = true
siderList.value[3].children[2].active = true
break
case '/dataLibrary/dataCommerceControlListEvent':
siderList.value[3].active = true
siderList.value[3].isExpanded = true
siderList.value[3].children[3].active = true
break
case '/dataLibrary/sDNList':
siderList.value[4].active = true
siderList.value[4].isExpanded = true
siderList.value[4].children[0].active = true
break
case '/dataLibrary/mREList':
siderList.value[4].active = true
siderList.value[4].isExpanded = true
siderList.value[4].children[1].active = true
break
case '/dataLibrary/sDNListEvent':
siderList.value[4].active = true
siderList.value[4].isExpanded = true
siderList.value[4].children[2].active = true
break
case '/dataLibrary/mREListEvent':
siderList.value[4].active = true
siderList.value[4].isExpanded = true
siderList.value[4].children[3].active = true
break
case '/dataLibrary/case337':
siderList.value[5].active = true
siderList.value[5].isExpanded = true
siderList.value[5].children[0].active = true
break
case '/dataLibrary/case232':
siderList.value[5].active = true
siderList.value[5].isExpanded = true
siderList.value[5].children[1].active = true
break
case '/dataLibrary/case301':
siderList.value[5].active = true
siderList.value[5].isExpanded = true
siderList.value[5].children[2].active = true
break
case '/dataLibrary/congressMan':
siderList.value[6].active = true
siderList.value[6].isExpanded = true
siderList.value[6].children[0].active = true
break
case '/dataLibrary/technologyLeader':
siderList.value[6].active = true
siderList.value[6].isExpanded = true
siderList.value[6].children[1].active = true
break
case '/dataLibrary/minister':
siderList.value[6].active = true
siderList.value[6].isExpanded = true
siderList.value[6].children[2].active = true
break
case '/dataLibrary/thinkTankResearcher':
siderList.value[6].active = true
siderList.value[6].isExpanded = true
siderList.value[6].children[3].active = true
break
case '/dataLibrary/technologyCompany':
siderList.value[7].active = true
siderList.value[7].isExpanded = true
siderList.value[7].children[0].active = true
break
case '/dataLibrary/researchUniversity':
siderList.value[7].active = true
siderList.value[7].isExpanded = true
siderList.value[7].children[1].active = true
break
case '/dataLibrary/keyLab':
siderList.value[7].active = true
siderList.value[7].isExpanded = true
siderList.value[7].children[2].active = true
break
}
}) })
...@@ -683,7 +795,8 @@ onMounted(() => { ...@@ -683,7 +795,8 @@ onMounted(() => {
.icon { .icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
&:hover{
&:hover {
border-radius: 8px; border-radius: 8px;
background: var(--color-primary-10); background: var(--color-primary-10);
} }
......
src/views/home/index.vue
浏览文件 @ 3f12faf6
...@@ -77,7 +77,7 @@ import { useRoute } from "vue-router"; ...@@ -77,7 +77,7 @@ import { useRoute } from "vue-router";
import AiBox from "@/components/AiBox.vue"; import AiBox from "@/components/AiBox.vue";
import { getPersonType } from "@/api/common/index"; import { getPersonType } from "@/api/common/index";
// import { useDraggable } from "@vueuse/core"; // import { useDraggable } from "@vueuse/core";
import ModuleHeader from '@/components/base/ModuleHeader/index.vue' import ModuleHeader from '@/components/base/moduleHeader/index.vue'
import Menu1 from "@/assets/icons/overview/menu1.png"; import Menu1 from "@/assets/icons/overview/menu1.png";
import Menu2 from "@/assets/icons/overview/menu2.png"; import Menu2 from "@/assets/icons/overview/menu2.png";
...@@ -120,7 +120,7 @@ const handleGetPersonType = async () => { ...@@ -120,7 +120,7 @@ const handleGetPersonType = async () => {
personTypeList.value = []; personTypeList.value = [];
} }
window.sessionStorage.setItem("personTypeList", JSON.stringify(personTypeList.value)); window.sessionStorage.setItem("personTypeList", JSON.stringify(personTypeList.value));
} catch (error) {} } catch (error) { }
}; };
const isCurrentOverview = computed(() => { const isCurrentOverview = computed(() => {
...@@ -298,7 +298,7 @@ body { ...@@ -298,7 +298,7 @@ body {
text-align: justify; text-align: justify;
} }
.el-popper[data-popper-placement^="top"] > .el-popper__arrow:before { .el-popper[data-popper-placement^="top"]>.el-popper__arrow:before {
display: none; display: none;
} }
......
src/views/newsBrief/NewsDetial.vue
浏览文件 @ 3f12faf6
<template> <template>
<el-scrollbar> <el-scrollbar>
<div class="flex-display common-page top-box-news-deatail" style="align-items: center;"> <div class="flex-display common-page top-box-news-deatail" style="align-items: center">
<!-- <color-svg :svg-url="NewsLogo" :size="72" style="margin-right:10px"></color-svg> --> <!-- <color-svg :svg-url="NewsLogo" :size="72" style="margin-right:10px"></color-svg> -->
<img :src="NewsLogo" style="margin-right:24px"> <img :src="NewsLogo" style="margin-right: 24px" />
<el-space direction="vertical" class="flex-fill" alignment="flex-start"> <el-space direction="vertical" class="flex-fill" alignment="flex-start">
<common-text class="text-title-1-bold" color="var(--text-primary-80-color)"> <common-text class="text-title-1-bold" color="var(--text-primary-80-color)">
{{ newsDetail.titleZh }} {{ newsDetail.titleZh }}
</common-text> </common-text>
<common-text class="text-tip-1-bold" color="var(--text-primary-80-color)"> <common-text class="text-tip-1-bold" color="var(--text-primary-80-color)">
{{ newsDetail.title }} {{ newsDetail.title }}
</common-text> </common-text>
<common-text class="text-tip-1-bold" color="var(--text-primary-65-color)"> <common-text class="text-tip-1-bold" color="var(--text-primary-65-color)">
{{ `${newsDetail.publishedTime} · ${newsDetail.source} ` }} {{ `${newsDetail.publishedTime} · ${newsDetail.source} ` }}
<el-space> <el-space>
<area-tag v-for="item in newsDetail.domainList" :key="item" :tag-name="item.industryName" /> <area-tag v-for="item in newsDetail.domainList" :key="item" :tag-name="item.industryName" />
</el-space> </el-space>
</common-text> </common-text>
</el-space> </el-space>
<!-- <el-button type="primary" @click="() => gotoNewsDetail(newsDetail.newsId)"> <!-- <el-button type="primary" @click="() => gotoNewsDetail(newsDetail.newsId)">
<el-icon class="icon"> <el-icon class="icon">
<el-icon> <el-icon>
<top-right /> <top-right />
...@@ -25,64 +25,90 @@ ...@@ -25,64 +25,90 @@
</el-icon> </el-icon>
查看原网页 查看原网页
</el-button> --> </el-button> -->
</div> </div>
<div class="flex-display common-page content-box-news-detail"> <div class="flex-display common-page content-box-news-detail">
<el-space direction="vertical" class="background-as-card flex-fill" fill alignment="flex-start"> <el-space direction="vertical" class="background-as-card flex-fill" fill alignment="flex-start">
<div style="margin-top: 10px; margin-right: 24px;gap:10px" class="flex-display"> <div style="margin-top: 10px; margin-right: 24px; gap: 10px" class="flex-display">
<color-prefix-title height="20px"> <color-prefix-title height="20px">
<div class="text-title-2-bold">新闻内容</div> <div class="text-title-2-bold">新闻内容</div>
</color-prefix-title> </color-prefix-title>
<div class="flex-fill"></div> <div class="flex-fill"></div>
<el-switch v-model="isHightLightEntity" active-text="高亮实体" @change="handleHighlightEntity" /> <el-switch v-model="isHightLightEntity" active-text="高亮实体" @change="handleHighlightEntity" />
<el-button v-if="textZns.length > 0" :type="isOpenTranslation ? 'primary' : ''" plain <el-button
@click="handleTranslation"> v-if="textZns.length > 0"
<color-svg :svg-url="TranslationSvg" color="var(--color-primary-100)" :size="18" :type="isOpenTranslation ? 'primary' : ''"
style="margin-right:10px"></color-svg> plain
译文 @click="handleTranslation"
</el-button> >
</div> <color-svg
<text-translate-pane class="common-padding-h" :texts-raw="textEns" :texts-translate="textZns" :svg-url="TranslationSvg"
:text-entities="textEntities" :is-open-translation="isOpenTranslation" color="var(--color-primary-100)"
:is-highlight-entity="isHightLightEntity"> :size="18"
</text-translate-pane> style="margin-right: 10px"
<div> ></color-svg>
<img v-if="newsDetail.coverUrl" class="common-padding" :src="newsDetail.coverUrl" :width="320" 译文
:height="240" /> </el-button>
</div> </div>
</el-space> <text-translate-pane
<el-space direction="vertical" class="background-as-card relation-news-box" fill> class="common-padding-h"
<el-space style="margin-top: 10px;"> :texts-raw="textEns"
<color-prefix-title height="20px"> :texts-translate="textZns"
<div class="text-title-2-bold">相关新闻</div> :text-entities="textEntities"
</color-prefix-title> :is-open-translation="isOpenTranslation"
</el-space> :is-highlight-entity="isHightLightEntity"
<el-space v-if="relationNews?.length > 0" direction="vertical" fill class="common-padding"> @on-entity-click="e => gotoSearchResults(e.text_span, '')"
<news-item-mini v-for="item in relationNews" :key="item.newsId" :news="item" :img="item.newsImage" >
:title="item.newsTitle" :from="`${item.newsDate} · ${item.newsOrg}`" </text-translate-pane>
@click="gotoNewsDetail(item.newsId)" /> <div>
</el-space> <img
<el-empty v-else style=""></el-empty> v-if="newsDetail.coverUrl"
</el-space> class="common-padding"
</div> :src="newsDetail.coverUrl"
</el-scrollbar> :width="320"
:height="240"
/>
</div>
</el-space>
<el-space direction="vertical" class="background-as-card relation-news-box" fill>
<el-space style="margin-top: 10px">
<color-prefix-title height="20px">
<div class="text-title-2-bold">相关新闻</div>
</color-prefix-title>
</el-space>
<el-space v-if="relationNews?.length > 0" direction="vertical" fill class="common-padding">
<news-item-mini
v-for="item in relationNews"
:key="item.newsId"
:news="item"
:img="item.newsImage"
:title="item.newsTitle"
:from="`${item.newsDate} · ${item.newsOrg}`"
@click="gotoNewsDetail(item.newsId)"
/>
</el-space>
<el-empty v-else style=""></el-empty>
</el-space>
</div>
</el-scrollbar>
</template> </template>
<script setup> <script setup>
import { getNewsDetail } from "@/api/news/newsBrief"; import { getNewsDetail } from "@/api/news/newsBrief";
import '@/styles/container.scss'; import "@/styles/container.scss";
import '@/styles/common.scss'; import "@/styles/common.scss";
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { ElSpace, ElButton, ElScrollbar, ElSwitch, ElEmpty, ElImage } from "element-plus"; import { ElSpace, ElButton, ElScrollbar, ElSwitch, ElEmpty, ElImage } from "element-plus";
import CommonText from "@/components/base/texts/CommonText.vue"; import CommonText from "@/components/base/texts/CommonText.vue";
import AreaTag from "@/components/base/AreaTag/index.vue"; import AreaTag from "@/components/base/AreaTag/index.vue";
import ColorPrefixTitle from '@/components/base/texts/ColorPrefixTitle.vue'; import ColorPrefixTitle from "@/components/base/texts/ColorPrefixTitle.vue";
import { getRelationNews } from "@/api/news/newsDetail"; import { getRelationNews } from "@/api/news/newsDetail";
import NewsItemMini from "@/components/base/newsList/NewsItemMini.vue"; import NewsItemMini from "@/components/base/newsList/NewsItemMini.vue";
import ColorSvg from "@/components/base/images/ColorSvg.vue"; import ColorSvg from "@/components/base/images/ColorSvg.vue";
import TranslationSvg from './assets/images/翻译 1.svg'; import TranslationSvg from "./assets/images/翻译 1.svg";
import NewsLogo from './assets/images/组合 293.svg'; import NewsLogo from "./assets/images/组合 293.svg";
import { extractTextEntity } from "@/api/intelligent"; import { extractTextEntity } from "@/api/intelligent";
import { useGotoNewsDetail } from "@/router/modules/news"; import { useGotoNewsDetail } from "@/router/modules/news";
import { useGotoSearchResults } from "@/router/modules/comprehensiveSearch";
import TextTranslatePane from "@/components/base/texts/TextTranslatePane.vue"; import TextTranslatePane from "@/components/base/texts/TextTranslatePane.vue";
const newsDetail = ref({}); const newsDetail = ref({});
...@@ -94,55 +120,54 @@ const textZns = ref([]); ...@@ -94,55 +120,54 @@ const textZns = ref([]);
const textEns = ref([]); const textEns = ref([]);
const route = useRoute(); const route = useRoute();
const gotoNewsDetail = useGotoNewsDetail(); const gotoNewsDetail = useGotoNewsDetail();
const gotoSearchResults = useGotoSearchResults();
onMounted(async () => { onMounted(async () => {
const params = { const params = {
newsId: route.params.id newsId: route.params.id
} };
const { data: newsDetailData } = await getNewsDetail(params); const { data: newsDetailData } = await getNewsDetail(params);
newsDetail.value = newsDetailData ?? {}; newsDetail.value = newsDetailData ?? {};
textZns.value = newsDetail.value?.contentZh?.split('\n') ?? []; textZns.value = newsDetail.value?.contentZh?.split("\n") ?? [];
textEns.value = newsDetail.value?.content?.split('\n') ?? []; textEns.value = newsDetail.value?.content?.split("\n") ?? [];
const { data: relationNewsData } = await getRelationNews(params); const { data: relationNewsData } = await getRelationNews(params);
relationNews.value = relationNewsData ?? []; relationNews.value = relationNewsData ?? [];
await handleHighlightEntity(); await handleHighlightEntity();
}); });
async function handleHighlightEntity() { async function handleHighlightEntity() {
if (textEntities.value.length > 0) return if (textEntities.value.length > 0 || (!newsDetail.value?.contentZh && !newsDetail.value?.content)) return;
const { result: entityDataZh } = await extractTextEntity(newsDetail.value?.contentZh ?? ''); const { result: entityDataZh } = await extractTextEntity(newsDetail.value.contentZh ?? "");
textEntities.value = [...entityDataZh ?? []] textEntities.value = [...(entityDataZh ?? [])];
if (newsDetail.value.contentZh !== newsDetail.value.content) { if (newsDetail.value.contentZh !== newsDetail.value.content) {
const { result: entityData } = await extractTextEntity(newsDetail.value?.content ?? ''); const { result: entityData } = await extractTextEntity(newsDetail.value.content ?? "");
textEntities.value = [...textEntities.value, ...entityData ?? []] textEntities.value = [...textEntities.value, ...(entityData ?? [])];
} }
console.log(isHightLightEntity.value) console.log(isHightLightEntity.value);
} }
function handleTranslation() { function handleTranslation() {
isOpenTranslation.value = !isOpenTranslation.value; isOpenTranslation.value = !isOpenTranslation.value;
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import url("./style.css"); @import url("./style.css");
.top-box-news-deatail { .top-box-news-deatail {
background-color: var(--bg-white-100); background-color: var(--bg-white-100);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
} }
.content-box-news-detail { .content-box-news-detail {
align-items: flex-start; align-items: flex-start;
gap: 16px; gap: 16px;
} }
.relation-news-box { .relation-news-box {
width: 520px; width: 520px;
} }
.p-news-content { .p-news-content {
//首行缩进 //首行缩进
text-indent: 2em; text-indent: 2em;
} }
</style> </style>
\ No newline at end of file
src/views/newsBrief/NewsMain.vue
浏览文件 @ 3f12faf6
...@@ -25,20 +25,21 @@ ...@@ -25,20 +25,21 @@
<img src="@/assets/icons/subject-icon.png" /> <img src="@/assets/icons/subject-icon.png" />
</template> </template>
<el-space :size="16" direction="vertical" fill class="full-width common-padding"> <el-space :size="16" direction="vertical" fill class="full-width common-padding">
<el-space v-for="(item, index) in subjectData.slice(0, 3)" :key="index" class="mouse-hover" <el-space v-for="(item, index) in subjectData.slice(0, 3)" :key="index"
@click="() => gotoNewsDetail(item.newsId)" alignment="center"> @click="() => gotoNewsDetail(item.newsId)" alignment="center">
<common-text class="text-bold" <common-text class="text-bold text-hover"
:color="index === 0 ? 'var(--color-red-100)' : (index === 1 ? 'var(--color-orange-100)' : 'var(--text-primary-65-color)')"> :color="index === 0 ? 'var(--color-red-100)' : (index === 1 ? 'var(--color-orange-100)' : 'var(--text-primary-65-color)')">
{{ `${index + 1}` }} {{ `${index + 1}` }}
</common-text> </common-text>
<common-text class="text-bold" color="var(--text-primary-80-color)">{{ <common-text class="text-bold text-hover" color="var(--text-primary-80-color)">{{
item.newsTitle item.newsTitle
}}</common-text> }}</common-text>
</el-space> </el-space>
<el-space v-for="(item, index) in subjectData.slice(3)" :key="index" class="mouse-hover"> <el-space v-for="(item, index) in subjectData.slice(3)" :key="index"
<common-text class="text-regular" color="var(--text-primary-80-color)">{{ @click="() => gotoNewsDetail(item.newsId)">
<common-text class="text-regular text-hover" color="var(--text-primary-80-color)">{{
"• " + item.newsTitle "• " + item.newsTitle
}}</common-text> }}</common-text>
</el-space> </el-space>
</el-space> </el-space>
</box-background> </box-background>
...@@ -48,6 +49,7 @@ ...@@ -48,6 +49,7 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import '@/styles/common.scss';
import '@/styles/container.scss'; import '@/styles/container.scss';
import '@/styles/radio.scss'; import '@/styles/radio.scss';
import { useGotoNewsModule, useGotoNewsDetail } from "@/router/modules/news"; import { useGotoNewsModule, useGotoNewsDetail } from "@/router/modules/news";
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论