Skip to content

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

Merge branch 'master' of http://8.140.26.4:10003/caijian/risk-monitor into zym-dev

上级 1f11cc0a 54f8850d
隐藏空白字符变更
内嵌 并排
正在显示 包含 1180 行增加 和 1004 行删除
src/api/thinkTank/overview.js
浏览文件 @ 0b438adc
......@@ -258,6 +258,21 @@ export function getThinkTankReportContent(params) {
})
}
// 获取报告核心论点（支持关键字搜索）
export function getThinkTankReportViewpoint(params) {
const { reportId, currentPage, pageSize, keyword = '', orgIds = '' } = params
return request({
method: 'GET',
url: `/api/thinkTankReport/viewpoint/${reportId}`,
params: {
currentPage,
pageSize,
keyword,
orgIds,
}
})
}
//获取涉及科技领域
export function getThinkTankReportIndustry(params) {
return request({
......
src/assets/json/countryCoordMap.js
浏览文件 @ 0b438adc
......@@ -213,3 +213,18 @@ export const countryCoordMap = {
法属波利尼西亚: [-149.5986, -17.6797], // 法属波利尼西亚帕皮提
"新喀里多尼亚(法)": [166.4572, -21.5547] // 新喀里多尼亚努美阿
};
export function convertAsiaCenterCoord(coord) {
const [lng, lat] = coord;
// 将以本初子午线为基准的坐标转换为以亚洲为中心的坐标
// world-asia-center.json 是将标准坐标的经度减去了 180 度
let newLng = lng - 180;
// 规范化到 [-180, 180] 范围
if (newLng < -180) {
newLng += 360;
}
return [newLng, lat];
}
src/components/base/WordCloundChart/wordCloudChart.js
浏览文件 @ 0b438adc
import "echarts-wordcloud";
import { MUTICHARTCOLORS } from "@/common/constant";
import 'echarts-wordcloud';
import { MUTICHARTCOLORS } from '@/common/constant';
const getWordCloudChart = data => {
const option = {
......@@ -18,7 +18,7 @@ const getWordCloudChart = data => {
// 其他形状你可以使用形状路径
// shape: 'circle', // 示例
// 或者自定义路径
gridSize: 35, // 网格大小，影响词间距。
gridSize: 15, // 网格大小，影响词间距。
sizeRange: [16, 36], // 定义词云中文字大小的范围
rotationRange: [0, 0],
rotationStep: 0,
......
src/styles/components/WarnningPane/index.vue
浏览文件 @ 0b438adc
......@@ -2,7 +2,7 @@
import { ElRow, ElCol } from 'element-plus';
import '@/styles/common.scss'
import WarnningPane from '@/components/base/WarningPane/index.vue'
const span = 12
const span = 24
</script>
<template>
......@@ -12,19 +12,26 @@ const span = 12
{{
`import WarnningPane from '@/components/base/WarningPane/index.vue';
<template>
<WarnningPane warnningLevel="特别重大风险" warnningContent="我是特别重大风险内容文字我是特别重大风险内容文字">
</WarnningPane>
<WarnningPane warnningLevel="特别重大风险" warnningContent="我是特别重大风险内容文字我是特别重大风险内容文字" />
</template>
`}}
</pre>
<WarnningPane warnningLevel="特别重大风险" warnningContent="我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字">
</WarnningPane>
<div class="warnning-box">
<WarnningPane warnningLevel="特别重大风险" warnningContent="我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字" />
<WarnningPane warnningLevel="重大风险" warnningContent="我是重大风险内容我是重大风险内容我是重大风险内容我是重大风险内容我是重大风险内容我是重大风险内容我是重大风险内容我是重大风险内容我是重大风险内容我是重大风险内容我是重大风险内容我是重大风险内容我是重大风险内容我是重大风险内容我是重大风险内容我是重大风险内容我是重大风险内容我是重大风险内容我是重大风险内容我是重大风险内容我是重大风险内容我是重大风险内容我是重大风险内容我是重大风险内容我是重大风险内容我是重大风险内容我是重大风险内容我是重大风险内容我是重大风险内容" />
<WarnningPane warnningLevel="较大风险" warnningContent="我是较大风险内容我是较大风险内容我是较大风险内容我是较大风险内容我是较大风险内容我是较大风险内容我是较大风险内容我是较大风险内容我是较大风险内容我是较大风险内容我是较大风险内容我是较大风险内容我是较大风险内容我是较大风险内容我是较大风险内容" />
<WarnningPane warnningLevel="一般风险" warnningContent="我是一般风险内容我是一般风险内容我是一般风险内容我是一般风险内容我是一般风险内容我是一般风险内容我是一般风险内容我是一般风险内容我是一般风险内容我是一般风险内容我是一般风险内容我是一般风险内容我是一般风险内容" />
<WarnningPane warnningLevel="低风险" warnningContent="我是低风险内容我是低风险内容我是低风险内容我是低风险内容我是低风险内容我是低风险内容我是低风险内容我是低风险内容我是低风险内容我是低风险内容我是低风险内容" />
</div>
</el-col>
</el-row>
</template>
<style lang="scss" scoped>
.person-avatar {
width: 200px;
.warnning-box{
display: flex;
flex-direction: column;
gap: 8px;
}
</style>
\ No newline at end of file
src/styles/components/WordCloudChart/index.vue
浏览文件 @ 0b438adc
......@@ -35,6 +35,11 @@ const data = ref([
{ name: "选举压力", value: 57 },
{ name: "主张财政紧缩", value: 72 },
{ name: "财政保守", value: 18 },
{ name: "财政保守1", value: 25 },
{ name: "财政保守2", value: 46 },
{ name: "财政保守3", value: 72 },
{ name: "财政保守4", value: 69 },
{ name: "财政保守5", value: 53 },
])
</script>
......
src/views/ZMOverView/components/fourSuppress/components/allUnion/index-back.vue
浏览文件 @ 0b438adc
......@@ -588,22 +588,18 @@ function handleUnionItemClick(item) {
createUnionChart();
});
}
// ... existing code ...
// ... existing code ...
function createChart() {
// 如果没有数据，直接返回
if (!countryTotalList.value || countryTotalList.value.length === 0) {
console.error("No country data available");
return;
}
// 找到最大值用于颜色计算
const maxValue = Math.max(...countryTotalList.value.map(item => item.value));
console.log("全部国家数据 countryTotalList =>", countryTotalList.value);
// 为每个数据项计算颜色
const processedData = countryTotalList.value.map(item => {
const color = getColorByValueRandom(item.value, maxValue);
return {
......@@ -621,12 +617,12 @@ function createChart() {
};
});
// 构建基础地图配置
const option = {
geo: {
map: "world",
roam: true,
zoom: 1.2,
// center: [104.1954, 35.8617], // 设置地图中心点为中国
label: {
show: false
},
......@@ -687,7 +683,6 @@ function createChart() {
]
};
// 如果有选中的国家，添加关系线
if (
currentSelectedCountry.value &&
currentSelectedCountry.value.memberRelation &&
......@@ -698,8 +693,19 @@ function createChart() {
currentSelectedCountry.value.zhName ||
nameMap[currentSelectedCountry.value.name] ||
currentSelectedCountry.value.name;
const sourceCoord = countryCoordMap[sourceCountryName];
if (!sourceCoord) {
console.warn(`无法找到源国家 ${sourceCountryName} 的坐标`);
return;
}
console.log("=== 源国家信息 ===");
console.log("源国家名称:", sourceCountryName);
console.log("源国家坐标:", sourceCoord);
console.log("==================");
const validRelations = relations.filter(relation => {
return relation.tagetMemberName && relation.tagetMemberCount;
});
......@@ -711,10 +717,12 @@ function createChart() {
const targetPoints = [];
validRelations.forEach(relation => {
const targetCountry = relation.tagetMemberName;
const targetCoord = countryCoordMap[targetCountry];
const targetCountryZhName = relation.tagetMemberName;
const targetCoord = countryCoordMap[targetCountryZhName];
if (targetCoord) {
console.log(`目标国家：${targetCountryZhName}, 坐标:`, targetCoord);
const ratio = relation.tagetMemberCount / maxRelationCount;
const r = Math.round(5 + (255 - 5) * ratio);
const g = Math.round(95 + (77 - 95) * ratio);
......@@ -724,9 +732,9 @@ function createChart() {
const lineWidth = 1 + (relation.tagetMemberCount / maxRelationCount) * 7;
linesData.push({
name: `${sourceCountryName} - ${targetCountry}`,
name: `${sourceCountryName} - ${targetCountryZhName}`,
sourceName: sourceCountryName,
targetName: targetCountry,
targetName: targetCountryZhName,
coords: [sourceCoord, targetCoord],
value: relation.tagetMemberCount,
lineStyle: {
......@@ -737,13 +745,15 @@ function createChart() {
});
targetPoints.push({
name: targetCountry,
name: targetCountryZhName,
value: targetCoord,
symbolSize: 8 + (relation.tagetMemberCount / maxRelationCount) * 7,
itemStyle: {
color: lineColor
}
});
} else {
console.warn(`无法找到目标国家 ${targetCountryZhName} 的坐标`);
}
});
......@@ -795,244 +805,29 @@ function createChart() {
// ... existing code ...
// ... existing code ...
// 处理国家列表项点击事件
// 在 handleCountryClick 中添加调试代码
const handleCountryClick = country => {
currentSelectedCountry.value = country;
console.log("国家之间的关系 =>", country);
console.log("=== 点击的国家信息 ===");
console.log("国家中文名:", country.zhName);
console.log("国家英文名:", country.name);
// 检查坐标映射
const coordFromZhName = countryCoordMap[country.zhName];
const coordFromEnName = countryCoordMap[country.name];
const coordFromMappedName = countryCoordMap[nameMap[country.name]];
console.log("通过中文名获取坐标:", coordFromZhName);
console.log("通过英文名获取坐标:", coordFromEnName);
console.log("通过映射名获取坐标:", coordFromMappedName);
console.log("=====================");
nextTick(() => {
createChart();
});
};
const countryMock = {
name: "Australia",
ename: "Commonwealth of Australia",
image: "http://8.140.26.4:10010/kjb-files/images/cr_flag/AUS.jpg",
count: 7,
memberRelation: [
{
tagetMemberName: "美国",
tagetMemberCount: 7
},
{
tagetMemberName: "英国",
tagetMemberCount: 6
},
{
tagetMemberName: "日本",
tagetMemberCount: 5
},
{
tagetMemberName: "韩国",
tagetMemberCount: 4
},
{
tagetMemberName: "印度",
tagetMemberCount: 4
},
{
tagetMemberName: "新西兰",
tagetMemberCount: 3
},
{
tagetMemberName: "加拿大",
tagetMemberCount: 3
},
{
tagetMemberName: "挪威",
tagetMemberCount: 2
},
{
tagetMemberName: "德国",
tagetMemberCount: 2
},
{
tagetMemberName: "法国",
tagetMemberCount: 2
},
{
tagetMemberName: "意大利",
tagetMemberCount: 2
},
{
tagetMemberName: "荷兰",
tagetMemberCount: 2
},
{
tagetMemberName: "芬兰",
tagetMemberCount: 2
},
{
tagetMemberName: "瑞典",
tagetMemberCount: 2
},
{
tagetMemberName: "爱沙尼亚",
tagetMemberCount: 2
},
{
tagetMemberName: "新加坡",
tagetMemberCount: 2
},
{
tagetMemberName: "泰国",
tagetMemberCount: 1
},
{
tagetMemberName: "文莱",
tagetMemberCount: 1
},
{
tagetMemberName: "丹麦",
tagetMemberCount: 1
},
{
tagetMemberName: "克罗地亚",
tagetMemberCount: 1
},
{
tagetMemberName: "卢森堡",
tagetMemberCount: 1
},
{
tagetMemberName: "欧盟",
tagetMemberCount: 1
},
{
tagetMemberName: "阿根廷",
tagetMemberCount: 1
},
{
tagetMemberName: "越南",
tagetMemberCount: 1
},
{
tagetMemberName: "罗马尼亚",
tagetMemberCount: 1
},
{
tagetMemberName: "立陶宛",
tagetMemberCount: 1
},
{
tagetMemberName: "以色列",
tagetMemberCount: 1
},
{
tagetMemberName: "阿联酋",
tagetMemberCount: 1
},
{
tagetMemberName: "斐济",
tagetMemberCount: 1
},
{
tagetMemberName: "墨西哥",
tagetMemberCount: 1
},
{
tagetMemberName: "希腊",
tagetMemberCount: 1
},
{
tagetMemberName: "捷克",
tagetMemberCount: 1
},
{
tagetMemberName: "保加利亚",
tagetMemberCount: 1
},
{
tagetMemberName: "马耳他",
tagetMemberCount: 1
},
{
tagetMemberName: "匈牙利",
tagetMemberCount: 1
},
{
tagetMemberName: "波兰",
tagetMemberCount: 1
},
{
tagetMemberName: "瑞士",
tagetMemberCount: 1
},
{
tagetMemberName: "奥地利",
tagetMemberCount: 1
},
{
tagetMemberName: "俄罗斯",
tagetMemberCount: 1
},
{
tagetMemberName: "斯洛文尼亚",
tagetMemberCount: 1
},
{
tagetMemberName: "土耳其",
tagetMemberCount: 1
},
{
tagetMemberName: "西班牙",
tagetMemberCount: 1
},
{
tagetMemberName: "斯洛伐克",
tagetMemberCount: 1
},
{
tagetMemberName: "比利时",
tagetMemberCount: 1
},
{
tagetMemberName: "乌克兰",
tagetMemberCount: 1
},
{
tagetMemberName: "南非",
tagetMemberCount: 1
},
{
tagetMemberName: "拉脱维亚",
tagetMemberCount: 1
},
{
tagetMemberName: "马来西亚",
tagetMemberCount: 1
},
{
tagetMemberName: "爱尔兰",
tagetMemberCount: 1
},
{
tagetMemberName: "葡萄牙",
tagetMemberCount: 1
},
{
tagetMemberName: "菲律宾",
tagetMemberCount: 1
}
],
value: 7,
zhName: "澳大利亚"
};
// function initMap() {
// chartDom.value = document.getElementById("echartsMap");
// if (!chartDom.value) return;
// if (myChart.value) myChart.value.dispose();
// myChart.value = echarts.init(chartDom.value);
// myChart.value.showLoading();
// echarts.registerMap("world", mapJson);
// createChart();
// myChart.value.hideLoading();
// }
function initMap() {
chartDom.value = document.getElementById("echartsMap");
unionChartDom.value = document.getElementById("echartsUnionMap");
......
src/views/ZMOverView/components/fourSuppress/components/allUnion/index.vue
浏览文件 @ 0b438adc
......@@ -69,7 +69,13 @@
<div class="right-num">参与排华联盟</div>
</div>
</div>
<div class="item" v-for="(item, index) in countList" :key="index" @click="handleCountryClick(item)">
<div
class="item"
v-for="(item, index) in countList"
:key="index"
@click="handleCountryClick(item)"
:class="{ 'selected-country': currentSelectedCountry && currentSelectedCountry.name === item.name }"
>
<div class="item-left">
<img :src="item.image" alt />
<el-tooltip
......@@ -298,7 +304,7 @@ import { link } from "d3";
import { get, union, update } from "lodash";
import ButtonList from "@/components/buttonList/buttonList.vue";
import { fieldOptions, COLORS, countryNameMap, nameMap } from "@/views/ZMOverView/public.js";
import { countryCoordMap } from "@/assets/json/countryCoordMap.js";
import { countryCoordMap, convertAsiaCenterCoord } from "@/assets/json/countryCoordMap.js";
const buttonList = ref([
{
......@@ -589,8 +595,6 @@ function handleUnionItemClick(item) {
});
}
// ... existing code ...
function createChart() {
if (!countryTotalList.value || countryTotalList.value.length === 0) {
console.error("No country data available");
......@@ -622,7 +626,6 @@ function createChart() {
map: "world",
roam: true,
zoom: 1.2,
// center: [104.1954, 35.8617], // 设置地图中心点为中国
label: {
show: false
},
......@@ -672,6 +675,8 @@ function createChart() {
type: "scatter",
coordinateSystem: "geo",
geoIndex: 0,
nameMap: nameMap,
data: processedData,
symbolSize: function (val) {
return Math.max(val.value / 5, 5);
......@@ -689,20 +694,36 @@ function createChart() {
Array.isArray(currentSelectedCountry.value.memberRelation)
) {
const relations = currentSelectedCountry.value.memberRelation;
const sourceCountryName =
currentSelectedCountry.value.zhName ||
nameMap[currentSelectedCountry.value.name] ||
currentSelectedCountry.value.name;
const sourceCoord = countryCoordMap[sourceCountryName];
const sourceCountryZhName = currentSelectedCountry.value.zhName;
const sourceCountryEnName = currentSelectedCountry.value.name;
let sourceCoord = null;
let finalSourceName = "";
if (sourceCountryZhName && countryCoordMap[sourceCountryZhName]) {
const convertedCoord = convertAsiaCenterCoord(countryCoordMap[sourceCountryZhName]);
sourceCoord = convertedCoord;
finalSourceName = sourceCountryZhName;
} else if (sourceCountryEnName) {
const mappedName = nameMap[sourceCountryEnName] || countryNameMap[sourceCountryEnName];
const zhName = mappedName || sourceCountryEnName;
if (countryCoordMap[zhName]) {
const convertedCoord = convertAsiaCenterCoord(countryCoordMap[zhName]);
sourceCoord = convertedCoord;
finalSourceName = zhName;
}
}
if (!sourceCoord) {
console.warn(`无法找到源国家 ${sourceCountryName} 的坐标`);
console.warn(`无法找到源国家 ${sourceCountryZhName || sourceCountryEnName} 的坐标`);
return;
}
console.log("=== 源国家信息 ===");
console.log("源国家名称:", sourceCountryName);
console.log("源国家中文名:", sourceCountryZhName);
console.log("源国家英文名:", sourceCountryEnName);
console.log("最终使用的国家名称:", finalSourceName);
console.log("源国家坐标:", sourceCoord);
console.log("==================");
......@@ -718,23 +739,46 @@ function createChart() {
validRelations.forEach(relation => {
const targetCountryZhName = relation.tagetMemberName;
const targetCoord = countryCoordMap[targetCountryZhName];
let targetCoord = null;
let finalTargetName = "";
if (countryCoordMap[targetCountryZhName]) {
const convertedCoord = convertAsiaCenterCoord(countryCoordMap[targetCountryZhName]);
targetCoord = convertedCoord;
finalTargetName = targetCountryZhName;
} else {
const possibleNames = [
targetCountryZhName,
nameMap[targetCountryZhName],
countryNameMap[targetCountryZhName]
];
for (const name of possibleNames) {
if (name && countryCoordMap[name]) {
const convertedCoord = convertAsiaCenterCoord(countryCoordMap[name]);
targetCoord = convertedCoord;
finalTargetName = name;
break;
}
}
}
if (targetCoord) {
console.log(`目标国家：${targetCountryZhName}, 坐标:`, targetCoord);
console.log(`目标国家：${targetCountryZhName}, 最终名称：${finalTargetName}, 坐标:`, targetCoord);
const ratio = relation.tagetMemberCount / maxRelationCount;
const r = Math.round(5 + (255 - 5) * ratio);
const g = Math.round(95 + (77 - 95) * ratio);
const b = Math.round(194 + (79 - 194) * ratio);
const b = Math.round(194 + (194 - 194) * ratio);
const lineColor = `rgb(${r}, ${g}, ${b})`;
const lineWidth = 1 + (relation.tagetMemberCount / maxRelationCount) * 7;
linesData.push({
name: `${sourceCountryName} - ${targetCountryZhName}`,
sourceName: sourceCountryName,
targetName: targetCountryZhName,
name: `${finalSourceName} - ${finalTargetName}`,
sourceName: finalSourceName,
targetName: finalTargetName,
coords: [sourceCoord, targetCoord],
value: relation.tagetMemberCount,
lineStyle: {
......@@ -745,7 +789,7 @@ function createChart() {
});
targetPoints.push({
name: targetCountryZhName,
name: finalTargetName,
value: targetCoord,
symbolSize: 8 + (relation.tagetMemberCount / maxRelationCount) * 7,
itemStyle: {
......@@ -753,7 +797,7 @@ function createChart() {
}
});
} else {
console.warn(`无法找到目标国家 ${targetCountryZhName} 的坐标`);
console.warn(`无法找到目标国家 ${targetCountryZhName} 的坐标，尝试的名称都不匹配`);
}
});
......@@ -776,7 +820,7 @@ function createChart() {
});
targetPoints.unshift({
name: sourceCountryName,
name: finalSourceName,
value: sourceCoord,
symbolSize: 15,
itemStyle: {
......@@ -803,44 +847,24 @@ function createChart() {
}
}
// ... existing code ...
// 处理国家列表项点击事件
// 在 handleCountryClick 中添加调试代码
const handleCountryClick = country => {
currentSelectedCountry.value = country;
if (currentSelectedCountry.value?.name === country.name) {
// currentSelectedCountry.value = null;
return;
} else {
currentSelectedCountry.value = country;
}
console.log("=== 点击的国家信息 ===");
console.log("国家中文名:", country.zhName);
console.log("国家英文名:", country.name);
// 检查坐标映射
const coordFromZhName = countryCoordMap[country.zhName];
const coordFromEnName = countryCoordMap[country.name];
const coordFromMappedName = countryCoordMap[nameMap[country.name]];
console.log("通过中文名获取坐标:", coordFromZhName);
console.log("通过英文名获取坐标:", coordFromEnName);
console.log("通过映射名获取坐标:", coordFromMappedName);
console.log("=====================");
console.log("联盟关系数据:", country.memberRelation);
nextTick(() => {
createChart();
});
};
// function initMap() {
// chartDom.value = document.getElementById("echartsMap");
// if (!chartDom.value) return;
// if (myChart.value) myChart.value.dispose();
// myChart.value = echarts.init(chartDom.value);
// myChart.value.showLoading();
// echarts.registerMap("world", mapJson);
// createChart();
// myChart.value.hideLoading();
// }
function initMap() {
chartDom.value = document.getElementById("echartsMap");
unionChartDom.value = document.getElementById("echartsUnionMap");
......@@ -1489,22 +1513,21 @@ const getPredictionList = async () => {
};
// 获取排华联盟数量
const getUnionCountList = async () => {
try {
const res = await getUnionCount({ page: 1, pageSize: 100, domainId: selectedFieldForLatest.value });
if (res && res.code === 200) {
console.log("----getUnionCountList", res.data);
// 处理一下数据
countryTotalList.value = res.data.content
.sort((a, b) => b.count - a.count)
.map(item => {
item.value = item.count;
item.zhName = item.name;
// 1. 尝试直接从映射表获取
let mappedName = countryNameMap[item.ename];
// 2. 如果映射表没有，尝试简单的模糊匹配
if (!mappedName && item.ename) {
let tempName = item.ename
.replace(/Republic of /i, "")
......@@ -1517,7 +1540,8 @@ const getUnionCountList = async () => {
mappedName = tempName;
}
item.name = mappedName || item.ename;
item.name = nameMap[item.ename] || mappedName || item.ename;
item.originalEnName = item.ename;
return item;
});
......@@ -1878,11 +1902,15 @@ watch(activeDate, async () => {
padding: 4px 12px 4px 12px;
box-sizing: border-box;
// border: 1px solid rgba(234, 236, 238, 1);
border-radius: 50px;
// border-radius: 50px;
/* 业务系统/模态背景模糊 */
backdrop-filter: blur(30px);
background: rgba(255, 255, 255, 0.65);
&.selected-country {
background-color: rgb(246, 250, 255) !important;
}
.item-left {
display: flex;
align-items: center;
......
src/views/characterPage/components/memberOfCongress/components/characterRelationships/index.vue
浏览文件 @ 0b438adc
......@@ -48,6 +48,48 @@ const getProxyUrl = (url) => {
return `https://images.weserv.nl/?url=${encodeURIComponent(cleanUrl)}`;
};
// ========== 创建圆形图片 ==========
const createCircularImage = (imageUrl, size, borderWidth = 2, borderColor = "rgba(174,214,255,1)") => {
return new Promise((resolve) => {
const img = new Image();
img.crossOrigin = "anonymous";
img.onload = () => {
const canvas = document.createElement("canvas");
// 增加大小以容纳边框
const totalSize = size + borderWidth * 2;
canvas.width = totalSize;
canvas.height = totalSize;
const ctx = canvas.getContext("2d");
// 清空背景
ctx.clearRect(0, 0, totalSize, totalSize);
// 绘制圆形图片
ctx.beginPath();
ctx.arc(totalSize / 2, totalSize / 2, size / 2, 0, Math.PI * 2);
ctx.closePath();
ctx.clip();
// 绘制图片到圆形区域
ctx.drawImage(img, borderWidth, borderWidth, size, size);
// 恢复上下文并绘制边框
ctx.restore();
ctx.beginPath();
ctx.arc(totalSize / 2, totalSize / 2, size / 2, 0, Math.PI * 2);
ctx.strokeStyle = borderColor;
ctx.lineWidth = borderWidth;
ctx.stroke();
resolve(canvas.toDataURL("image/png"));
};
img.onerror = () => {
resolve(imageUrl); // 失败时返回原图
};
img.src = imageUrl;
});
};
// ========== 数据 ==========
const nodes = ref([]);
const links = ref([]);
......@@ -106,13 +148,17 @@ const getCharacterRelationFn = async () => {
console.error("获取人物关系失败", error);
}
// 创建圆形头像
const centerImageUrl = getProxyUrl(characterInfo.value.imageUrl);
const centerCircularImage = await createCircularImage(centerImageUrl, 76, 3, "rgba(174,214,255,1)");
// ---------- 组装节点和连线 ----------
const centerNode = {
id: "c",
name: characterInfo.value.name || "",
category: 0,
symbolSize: 80,
symbol: `image://${getProxyUrl(characterInfo.value.imageUrl)}`,
symbol: `image://${centerCircularImage}`,
label: {
show: true,
position: "bottom",
......@@ -130,12 +176,19 @@ const getCharacterRelationFn = async () => {
};
if (CharacterRelation.value.length > 0) {
// 并行创建所有圆形头像
const circularImages = await Promise.all(
CharacterRelation.value.map((item) =>
createCircularImage(getProxyUrl(item.imageUrl), 76, 2, "rgba(174,214,255,1)")
)
);
const newNodes = CharacterRelation.value.map((item, index) => ({
id: index,
name: item.name,
category: 1,
symbolSize: 80,
symbol: `image://${getProxyUrl(item.imageUrl)}`,
symbol: `image://${circularImages[index]}`,
}));
newNodes.push(centerNode);
......@@ -308,4 +361,4 @@ onMounted(async () => {
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
</style>
src/views/characterPage/components/techLeader/components/characterRelationships/index.vue
浏览文件 @ 0b438adc
......@@ -46,6 +46,35 @@ const getProxyUrl = (url) => {
return `https://images.weserv.nl/?url=${encodeURIComponent(cleanUrl)}`
}
// 创建圆形图片的函数
const createCircularImage = (imageUrl, size) => {
return new Promise((resolve) => {
const img = new Image()
img.crossOrigin = 'anonymous'
img.onload = () => {
const canvas = document.createElement('canvas')
canvas.width = size
canvas.height = size
const ctx = canvas.getContext('2d')
// 绘制圆形裁剪区域
ctx.beginPath()
ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2)
ctx.closePath()
ctx.clip()
// 绘制图片
ctx.drawImage(img, 0, 0, size, size)
resolve(canvas.toDataURL('image/png'))
}
img.onerror = () => {
resolve(imageUrl) // 失败时返回原图
}
img.src = imageUrl
})
}
const nodes = ref([])
const links = ref([])
const characterInfo = ref({})
......@@ -91,12 +120,16 @@ const getCharacterRelationFn = async () => {
}
} catch (error) {}
// 创建圆形头像
const centerImageUrl = getProxyUrl(characterInfo.value.imageUrl)
const centerCircularImage = await createCircularImage(centerImageUrl, 168)
const centerNode = {
id: 'c',
name: characterInfo.value.name || '',
category: 0,
symbolSize: 84,
symbol: `image://${getProxyUrl(characterInfo.value.imageUrl)}`,
symbol: `image://${centerCircularImage}`,
itemStyle: {
borderColor: 'rgba(174,214,255,1)',
borderWidth: 3,
......@@ -114,12 +147,19 @@ const getCharacterRelationFn = async () => {
}
if (CharacterRelation.value.length > 0) {
// 并行创建所有圆形头像
const circularImages = await Promise.all(
CharacterRelation.value.map((item) =>
createCircularImage(getProxyUrl(item.imageUrl), 108)
)
)
const newNodes = CharacterRelation.value.map((item, index) => ({
id: index,
name: item.name,
category: 1,
symbolSize: 54,
symbol: `image://${getProxyUrl(item.imageUrl)}`,
symbol: `image://${circularImages[index]}`,
itemStyle: {
borderColor: 'rgba(174,214,255,1)',
borderWidth: 2,
......@@ -322,4 +362,4 @@ onMounted(async () => {
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
</style>
src/views/characterPage/components/thinkTankPerson/components/characterRelationships/assets/icon-circle.svg 0 → 100644
浏览文件 @ 0b438adc
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
<rect id="icon-圆形布局 1" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<path id="矢量 423" d="M13.81 6.6C13.67 5.97 13.39 5.41 13.04 4.85C13.18 4.64 13.25 4.36 13.25 4.15C13.25 3.38 12.62 2.75 11.85 2.75C11.57 2.75 11.36 2.82 11.15 2.96C10.59 2.61 10.03 2.4 9.4 2.19C9.33 1.49 8.7 1 8 1C7.3 1 6.74 1.56 6.6 2.19C5.97 2.4 5.41 2.61 4.85 2.96C4.64 2.82 4.36 2.75 4.15 2.75C3.38 2.75 2.75 3.38 2.75 4.15C2.75 4.43 2.82 4.64 2.96 4.85C2.61 5.41 2.4 5.97 2.19 6.6C1.56 6.74 1 7.3 1 8C1 8.7 1.56 9.26 2.19 9.4C2.33 10.03 2.61 10.59 2.96 11.15C2.82 11.36 2.75 11.64 2.75 11.85C2.75 12.62 3.38 13.25 4.15 13.25C4.43 13.25 4.64 13.18 4.85 13.04C5.41 13.39 5.97 13.6 6.6 13.81C6.67 14.51 7.3 15 8 15C8.7 15 9.26 14.44 9.4 13.81C10.03 13.67 10.59 13.39 11.15 13.04C11.36 13.18 11.64 13.25 11.85 13.25C12.62 13.25 13.25 12.62 13.25 11.85C13.25 11.57 13.18 11.36 13.04 11.15C13.39 10.59 13.6 10.03 13.81 9.4C14.51 9.33 15 8.7 15 8C15 7.3 14.44 6.74 13.81 6.6L13.81 6.6ZM12.55 10.66C12.34 10.52 12.13 10.45 11.85 10.45C11.08 10.45 10.45 11.08 10.45 11.85C10.45 12.13 10.52 12.34 10.66 12.55C10.24 12.76 9.82 12.97 9.33 13.11C9.12 12.62 8.63 12.2 8 12.2C7.44 12.2 6.88 12.55 6.67 13.11C6.18 12.97 5.76 12.83 5.34 12.55C5.48 12.34 5.55 12.13 5.55 11.85C5.55 11.08 4.92 10.45 4.15 10.45C3.87 10.45 3.66 10.52 3.45 10.66C3.24 10.24 3.03 9.82 2.89 9.33C3.45 9.12 3.8 8.56 3.8 8C3.8 7.44 3.45 6.88 2.96 6.74C3.1 6.25 3.24 5.83 3.52 5.41C3.73 5.55 3.94 5.62 4.22 5.62C4.99 5.62 5.62 4.99 5.62 4.22C5.62 3.94 5.55 3.73 5.41 3.52C5.83 3.31 6.25 3.1 6.74 2.96C6.88 3.45 7.44 3.8 8 3.8C8.56 3.8 9.12 3.45 9.33 2.89C9.82 3.03 10.24 3.17 10.66 3.45C10.52 3.66 10.45 3.87 10.45 4.15C10.45 4.92 11.08 5.55 11.85 5.55C12.13 5.55 12.34 5.48 12.55 5.34C12.76 5.76 12.97 6.18 13.11 6.67C12.55 6.88 12.2 7.44 12.2 8C12.2 8.56 12.55 9.12 13.04 9.26C12.97 9.75 12.76 10.24 12.55 10.66L12.55 10.66Z" fill="rgb(59,65,75)" fill-rule="nonzero" />
</svg>
src/views/characterPage/components/thinkTankPerson/components/characterRelationships/assets/icon-download.svg 0 → 100644
浏览文件 @ 0b438adc
<svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28.000000" height="28.000000" fill="none">
<defs>
<clipPath id="clipPath_1">
<rect width="18.000000" height="15.000000" x="5.000000" y="5.000000" fill="rgb(255,255,255)" />
</clipPath>
</defs>
<rect id="导出数据" width="28.000000" height="28.000000" x="0.000000" y="0.000000" />
<g id="容器 742" customFrame="url(#clipPath_1)">
<rect id="容器 742" width="18.000000" height="15.000000" x="5.000000" y="5.000000" />
<rect id="矩形 347" width="2.000000" height="6.000000" x="13.000000" y="5.000000" fill="rgb(132,136,142)" />
<path id="矢量 600" d="M18 11L10 11L14 16L18 11Z" fill="rgb(132,136,142)" fill-rule="evenodd" />
<path id="矢量 601" d="M22 19.9996L22.9999 15.0012L19.9999 12.0011L18.9999 12L21.0003 15.001L17.9999 15.0015L16.9998 17.9987L14 17.9996L11.0001 17.9997L9.99998 15.002L7.00017 15.0028L8.99996 12.0008L8 12.0004L5 15.0023L6.00016 20L22 19.9996Z" fill="rgb(132,136,142)" fill-rule="evenodd" />
</g>
</svg>
src/views/characterPage/components/thinkTankPerson/components/characterRelationships/assets/icon-expand.svg 0 → 100644
浏览文件 @ 0b438adc
<svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28.000000" height="28.000000" fill="none">
<defs>
<clipPath id="clipPath_0">
<rect width="20.000000" height="20.000000" x="4.000000" y="4.000000" fill="rgb(255,255,255)" />
</clipPath>
</defs>
<rect id="数据源" width="28.000000" height="28.000000" x="0.000000" y="0.000000" />
<g id="数据库 1" clip-path="url(#clipPath_0)" customFrame="url(#clipPath_0)">
<rect id="数据库 1" width="20.000000" height="20.000000" x="4.000000" y="4.000000" />
<path id="合并" d="M10.6426 6.48828C11.6719 6.28906 12.791 6.1875 14 6.1875C15.209 6.1875 16.3281 6.28906 17.3574 6.48828C18.3867 6.6875 19.2012 6.96094 19.7988 7.30469C20.3965 7.64844 20.6973 8.01953 20.6973 8.42188L20.6973 9.53906C20.6973 9.94141 20.3984 10.3125 19.7988 10.6563C19.1992 11 18.3867 11.2715 17.3574 11.4727C16.3281 11.6699 15.209 11.7695 14 11.7695C12.791 11.7695 11.6719 11.668 10.6426 11.4688C9.61328 11.2695 8.79883 10.9961 8.20117 10.6523C7.60156 10.3086 7.30273 9.9375 7.30273 9.53516L7.30273 8.41797C7.30273 8.01563 7.60156 7.64453 8.20117 7.30078C8.80078 6.96094 9.61328 6.68945 10.6426 6.48828ZM10.1387 12.5078C11.3359 12.7578 12.623 12.8828 14 12.8828C15.377 12.8828 16.6641 12.7578 17.8613 12.5078C19.0586 12.2578 20.0039 11.8887 20.6953 11.4004L20.6953 12.8828C20.6953 13.2852 20.3965 13.6563 19.7969 14C19.1973 14.3438 18.3848 14.6152 17.3555 14.8164C16.3281 15.0156 15.209 15.1152 14 15.1152C12.791 15.1152 11.6719 15.0137 10.6426 14.8145C9.61328 14.6152 8.79883 14.3418 8.20117 13.998C7.60156 13.6543 7.30273 13.2832 7.30273 12.8809L7.30273 11.3984C7.99609 11.8906 8.94141 12.2598 10.1387 12.5078ZM10.1387 15.8574C11.3359 16.1074 12.623 16.2324 14 16.2324C14.6624 16.2324 15.3041 16.2035 15.9249 16.1456C14.2088 16.4715 12.8443 17.3161 12.2805 18.3935C11.7114 18.3432 11.1654 18.2672 10.6426 18.166C9.61328 17.9668 8.80078 17.6934 8.20117 17.3496C7.60156 17.0059 7.30273 16.6348 7.30273 16.2324L7.30273 14.75C7.9961 15.2383 8.94141 15.6074 10.1387 15.8574ZM17.5 16C17.3281 16 17.1581 16.005 16.9902 16.0148C17.2857 15.9695 17.5761 15.917 17.8613 15.8574C19.0586 15.6074 20.0039 15.2383 20.6953 14.75L20.6953 16.2324C20.6953 16.3614 20.6646 16.4872 20.6031 16.6099C19.7199 16.2251 18.6512 16 17.5 16ZM13 19.5C13 18.1193 15.0147 17 17.5 17C19.9853 17 22 18.1193 22 19.5C22 20.8807 19.9853 22 17.5 22C15.0147 22 13 20.8807 13 19.5ZM17.5 18C18.3284 18 19 18.6716 19 19.5C19 20.3284 18.3284 21 17.5 21C16.6716 21 16 20.3284 16 19.5C16 18.6716 16.6716 18 17.5 18ZM12 19.5L12 19.4861C11.3572 19.4236 10.7367 19.33 10.1387 19.2051C8.94141 18.9551 7.99609 18.5859 7.30273 18.0957L7.30273 19.5781C7.30273 19.9805 7.60156 20.3516 8.20117 20.6953C8.79883 21.0391 9.61328 21.3125 10.6426 21.5117C11.4872 21.6752 12.3923 21.7729 13.3579 21.8027C12.5123 21.1873 12 20.3817 12 19.5Z" fill="rgb(132,136,142)" fill-rule="evenodd" />
</g>
</svg>
src/views/characterPage/components/thinkTankPerson/components/characterRelationships/assets/icon-force.svg 0 → 100644
浏览文件 @ 0b438adc
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
<rect id="拓扑 1" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<path id="矢量 422" d="M12.7727 11.142C12.4273 11.142 12.107 11.2495 11.8433 11.4327L9.42154 9.6837C9.65586 9.26852 9.78974 8.7891 9.78974 8.27836C9.78974 8.18728 9.7853 8.09723 9.77697 8.00833L12.257 6.54325C12.6396 6.77576 13.1451 6.72689 13.4758 6.39622C13.8641 6.00791 13.8641 5.37835 13.4758 4.99004C13.0875 4.60173 12.4579 4.60173 12.0696 4.99004C11.7835 5.27612 11.7085 5.69309 11.844 6.04812L9.63655 7.35217C9.40869 6.68522 8.9416 6.12922 8.33762 5.78637L8.77881 3.58047C8.81046 3.5835 8.84253 3.58519 8.87497 3.58519C9.42413 3.58519 9.8693 3.14002 9.8693 2.59087C9.8693 2.04173 9.42413 1.59656 8.87497 1.59656C8.32582 1.59656 7.88065 2.04173 7.88065 2.59087C7.88065 2.87182 7.99736 3.12535 8.18469 3.30617L7.73951 5.53213C7.48164 5.45587 7.2087 5.41473 6.9261 5.41473C6.388 5.41473 5.88464 5.56327 5.45458 5.8214L4.08134 4.61294C4.32918 4.12086 4.24801 3.50548 3.83714 3.09461C3.32457 2.58205 2.49355 2.58205 1.98098 3.09461C1.46841 3.60717 1.46842 4.4382 1.98098 4.95078C2.43973 5.40952 3.15341 5.45735 3.66574 5.09492L4.93964 6.21596C4.39895 6.73684 4.06247 7.46826 4.06247 8.27836C4.06247 9.15881 4.45994 9.94631 5.0851 10.4716L3.95324 11.6792C3.74531 11.5408 3.49572 11.4602 3.22724 11.4602C2.50236 11.4602 1.91474 12.0478 1.91474 12.7727C1.91474 13.4975 2.50236 14.0852 3.22724 14.0852C3.95212 14.0852 4.53974 13.4975 4.53974 12.7727C4.53974 12.5477 4.48308 12.3359 4.38332 12.1508L5.62251 10.8288C6.01351 11.029 6.45662 11.142 6.9261 11.142C7.76819 11.142 8.52534 10.7785 9.04931 10.1999L11.3976 11.8958C11.2358 12.149 11.142 12.4499 11.142 12.7727C11.142 13.6733 11.8721 14.4034 12.7727 14.4034C13.6733 14.4034 14.4034 13.6733 14.4034 12.7727C14.4034 11.8721 13.6733 11.142 12.7727 11.142L12.7727 11.142Z" fill="rgb(59,65,75)" fill-rule="nonzero" />
</svg>
src/views/characterPage/components/thinkTankPerson/components/characterRelationships/assets/icon-star.svg 0 → 100644
浏览文件 @ 0b438adc
<svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28.000000" height="28.000000" fill="none">
<rect id="收藏" width="28.000000" height="28.000000" x="0.000000" y="0.000000" />
<path id="星形 2" d="M15.9534 11.0113C15.9936 11.1349 16.1088 11.2186 16.2388 11.2186L21.6363 11.2188C21.9269 11.2188 22.0478 11.5907 21.8127 11.7615L17.446 14.9343C17.3409 15.0107 17.2969 15.1461 17.3371 15.2697L19.0048 20.4031C19.0946 20.6795 18.7783 20.9094 18.5432 20.7385L14.1763 17.5661C14.0712 17.4897 13.9288 17.4897 13.8237 17.5661L9.45683 20.7385C9.22171 20.9094 8.90539 20.6795 8.99518 20.4031L10.6629 15.2697C10.7031 15.1461 10.6591 15.0107 10.554 14.9343L6.18734 11.7615C5.95224 11.5907 6.07307 11.2188 6.36368 11.2188L11.7612 11.2186C11.8912 11.2186 12.0064 11.1349 12.0466 11.0113L13.7147 5.87799C13.8045 5.60161 14.1955 5.60161 14.2853 5.87799L15.9534 11.0113Z" fill="rgb(132,136,142)" fill-rule="evenodd" />
</svg>
src/views/characterPage/components/thinkTankPerson/components/characterRelationships/assets/icon-tree.svg 0 → 100644
浏览文件 @ 0b438adc
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
<rect id="绿洲_拓扑图 1" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<path id="矢量 422" d="M15.0147 9.88449L14.1867 9.88449L14.1867 8.65516C14.1867 7.53912 13.312 6.63116 12.2368 6.63116L8.37334 6.63116L8.37334 5.08449L9.2317 5.08449C9.42605 5.08449 9.58222 4.94394 9.58222 4.74957L9.58222 2.34115C9.58222 2.11642 9.40148 1.92004 9.17669 1.92004L6.76829 1.92004C6.57396 1.92004 6.41778 2.09179 6.41778 2.28616L6.41778 4.69459C6.41778 4.91931 6.59853 5.08449 6.82329 5.08449L7.62667 5.08449L7.62667 6.63116L3.59268 6.63116C2.62816 6.63116 1.81334 7.45731 1.81334 8.43519L1.81334 9.88449L0.930314 9.88449C0.735986 9.88449 0.58667 10.0572 0.58667 10.2515L0.58667 12.66C0.58667 12.8847 0.760554 13.0489 0.985319 13.0489L3.39371 13.0489C3.58806 13.0489 3.75111 12.9093 3.75111 12.7149L3.75111 10.3066C3.75111 10.0818 3.56351 9.88451 3.33874 9.88451L2.52445 9.88451L2.52445 8.43521C2.52445 7.84276 3.01364 7.34227 3.59268 7.34227L7.62667 7.34227L7.62667 9.88449L6.76829 9.88449C6.57396 9.88449 6.41778 10.0572 6.41778 10.2515L6.41778 12.66C6.41778 12.8847 6.59853 13.0489 6.82329 13.0489L9.2317 13.0489C9.42605 13.0489 9.58222 12.9093 9.58222 12.7149L9.58222 10.3066C9.58222 10.0818 9.40148 9.88451 9.1767 9.88451L8.37334 9.88451L8.37334 7.34227L12.2368 7.34227C12.9199 7.34227 13.4756 7.93123 13.4756 8.65516L13.4756 9.88449L12.6063 9.88449C12.4119 9.88449 12.2489 10.0572 12.2489 10.2515L12.2489 12.66C12.2489 12.8847 12.4365 13.0489 12.6613 13.0489L15.0697 13.0489C15.264 13.0489 15.4133 12.9093 15.4133 12.7149L15.4133 10.3066C15.4133 10.0818 15.2395 9.88449 15.0147 9.88449Z" fill="rgb(59,65,75)" fill-rule="nonzero" />
</svg>
src/views/characterPage/components/thinkTankPerson/components/characterRelationships/index.vue
浏览文件 @ 0b438adc
......@@ -5,12 +5,17 @@
v-for="(item, index) in list"
:key="index"
class="headerItem"
:class="{ active: item === activeIndex }"
@click="activeIndex = item"
>{{ item }}</span
:class="{ active: item.value === activeIndex }"
@click="handleChangeLayout(item.value)"
>
<img :src="item.icon" :alt="item.label" />
</span>
</div>
<div class="headerBtnBox">
<img src="./assets/icon-expand.svg" alt="" class="btn-icon" />
<img src="./assets/icon-download.svg" alt="" class="btn-icon" />
<img src="./assets/icon-star.svg" alt="" class="btn-icon" />
</div>
<div class="headerBtnBox"><img src="./assets/下载按钮.png" alt="" /><img src="./assets/收藏按钮.png" alt="" /></div>
<!-- 主要内容，人物关系图 -->
<div class="mainBox">
<div class="graph" id="relGraph"></div>
......@@ -98,6 +103,76 @@ const getProxyUrl = (url) => {
return `https://images.weserv.nl/?url=${encodeURIComponent(cleanUrl)}`;
};
// 创建圆形图片的函数
const createCircularImage = (imageUrl, size) => {
return new Promise((resolve) => {
if (!imageUrl) {
console.log("[v0] No image URL provided");
resolve('');
return;
}
const img = new Image();
img.crossOrigin = 'anonymous';
const onLoadSuccess = () => {
try {
const canvas = document.createElement('canvas');
canvas.width = size;
canvas.height = size;
const ctx = canvas.getContext('2d');
// 绘制圆形裁剪区域
ctx.beginPath();
ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
ctx.closePath();
ctx.clip();
// 绘制图片
ctx.drawImage(img, 0, 0, size, size);
resolve(canvas.toDataURL('image/png'));
} catch (error) {
console.log("[v0] Canvas error:", error);
resolve(imageUrl);
}
};
img.onload = onLoadSuccess;
img.onerror = () => {
console.log("[v0] Image failed to load, trying without crossOrigin:", imageUrl);
// 如果加载失败，尝试不带 crossOrigin 的方式
const img2 = new Image();
img2.onload = () => {
try {
const canvas = document.createElement('canvas');
canvas.width = size;
canvas.height = size;
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
ctx.closePath();
ctx.clip();
ctx.drawImage(img2, 0, 0, size, size);
resolve(canvas.toDataURL('image/png'));
} catch (error) {
console.log("[v0] Fallback canvas error:", error);
resolve(imageUrl);
}
};
img2.onerror = () => {
console.log("[v0] Image loading failed completely:", imageUrl);
resolve(imageUrl);
};
img2.src = imageUrl;
};
img.src = imageUrl;
});
};
const nodes = ref([]);
const links = ref([]);
......@@ -111,20 +186,14 @@ const getCharacterGlobalInfoFn = async () => {
personId: personId.value
};
try{
const res = await getCharacterGlobalInfo(params);
if (res.code === 200) {
console.log("人物全局信息4", res);
if (res.data) {
characterInfo.value = res.data;
}
}
}catch(error){
......@@ -132,28 +201,42 @@ const getCharacterGlobalInfoFn = async () => {
};
const getCharacterRelationFn = async () => {
const params = {
personId: personId.value
};
try{
const res = await getCharacterRelation(params);
if (res.code === 200) {
console.log("人物关系", res);
if (res.data) {
CharacterRelation.value = res.data;
try{
const res = await getCharacterRelation(params);
if (res.code === 200) {
if (res.data) {
CharacterRelation.value = res.data;
}
}
}
// 创建圆形头像
console.log("[v0] characterInfo.value:", characterInfo.value);
console.log("[v0] characterInfo.value.imageUrl:", characterInfo.value.imageUrl);
const centerImageUrl = getProxyUrl(characterInfo.value.imageUrl);
console.log("[v0] centerImageUrl:", centerImageUrl);
const centerCircularImage = await createCircularImage(centerImageUrl, 160);
console.log("[v0] centerCircularImage:", centerCircularImage?.substring(0, 50));
if(CharacterRelation.value.length > 0){
// 并行创建所有圆形头像
const circularImages = await Promise.all(
CharacterRelation.value.map((item) =>
createCircularImage(getProxyUrl(item.imageUrl), 160)
)
);
const centerNode = {
id: "c",
name: characterInfo.value.name,
category: 0,
symbolSize: 80,
symbol: `image://${characterInfo.value.imageUrl}`,
symbol: `image://${centerCircularImage}`,
label: {
show: true,
position: "bottom",
......@@ -176,7 +259,7 @@ const getCharacterRelationFn = async () => {
name: item.name,
category: 1,
symbolSize: 80,
symbol: `image://${getProxyUrl(item.imageUrl)}`
symbol: `image://${circularImages[index]}`
}
});
......@@ -199,7 +282,7 @@ const getCharacterRelationFn = async () => {
name: characterInfo.value.name,
category: 0,
symbolSize: 80,
symbol: `image://${characterInfo.value.imageUrl}`,
symbol: `image://${centerCircularImage}`,
label: {
show: true,
position: "bottom",
......@@ -284,21 +367,36 @@ const getCharacterRelationFn = async () => {
};
const list = ref(["圆形布局", "力导向布局", "树形布局"]);
const list = ref([
{
value: "圆形布局",
label: "圆形布局",
icon: new URL('./assets/icon-circle.svg', import.meta.url).href,
},
{
value: "力导向布局",
label: "力导向布局",
icon: new URL('./assets/icon-force.svg', import.meta.url).href,
},
{
value: "树形布局",
label: "树形布局",
icon: new URL('./assets/icon-tree.svg', import.meta.url).href,
},
]);
const activeIndex = ref("圆形布局");
const handleChangeLayout = (layout) => {
activeIndex.value = layout;
};
let chart;
let chart;
onMounted(() => {
getCharacterGlobalInfoFn();
onMounted(async () => {
await getCharacterGlobalInfoFn();
getCharacterRelationFn();
const el = document.getElementById("relGraph");
if (!el) return;
......@@ -359,7 +457,6 @@ onMounted(() => {
});
};
setOption();
console.log("node1", nodes);
const onResize = () => chart && chart.resize();
window.addEventListener("resize", onResize);
watch(activeIndex, () => setOption());
......@@ -386,34 +483,44 @@ onMounted(() => {
.headerBox {
position: absolute;
top: 14px;
right: 96px;
left: 12px;
display: flex;
gap: 8px;
.headerItem {
padding: 1px 8px;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 4px;
font-size: 16px;
font-weight: 400;
line-height: 30px;
cursor: pointer;
color: rgb(59, 65, 75);
font-family: "Microsoft YaHei";
margin-right: 8px;
border: 1px solid rgb(230, 231, 232);
background-color: #fff;
transition: all 0.3s ease;
img {
width: 20px;
height: 20px;
}
}
.active {
background-color: rgba(246, 250, 255, 1);
border-color: rgb(5, 95, 194);
color: rgb(5, 95, 194);
}
}
.headerBtnBox {
position: absolute;
top: 14px;
right: 12px;
img {
display: flex;
gap: 4px;
.btn-icon {
width: 28px;
height: 28px;
margin-right: 4px;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
transform: scale(1.1);
}
}
}
.mainBox {
......
src/views/decree/decreeOriginal/index.vue
浏览文件 @ 0b438adc
......@@ -2,25 +2,25 @@
<div class="layout-container">
<!-- 导航菜单 -->
<div class="layout-main">
<div class="layout-main-box">
<div class="header-main">
<div class="layout-main-header">
<div class="icon">
<img :src="summaryInfo.imageUrl" alt="" />
</div>
<div class="info">
<div class="info-box1 one-line-ellipsis">{{ summaryInfo.name }}</div>
<div class="info-box1 one-line-ellipsis">{{ summaryInfo.name || "--" }}</div>
<div class="info-box2">
<div class="info-box2-item">{{ summaryInfo.postDate }}</div>
<div class="info-box2-item">{{ summaryInfo.postDate || "--" }}</div>
|
<div class="info-box2-item">{{ summaryInfo.orgName }}</div>
<div class="info-box2-item">{{ summaryInfo.orgName || "--" }}</div>
|
<div class="info-box2-item one-line-ellipsis">{{ summaryInfo.ename }}</div>
<div class="info-box2-item one-line-ellipsis">{{ summaryInfo.ename || "--" }}</div>
</div>
</div>
<div class="layout-main-header-right-box">
<div class="right-box-top">
<div class="time">{{ summaryInfo.postDate }}</div>
<div class="name">{{ summaryInfo.orgName }}</div>
<div class="time">{{ summaryInfo.postDate || "--" }}</div>
<div class="name">{{ summaryInfo.orgName || "--" }}</div>
</div>
</div>
</div>
......@@ -28,16 +28,20 @@
<div class="layout-main-center">
<div class="report-header">
<div class="report-title">政令原文</div>
<!-- <el-switch v-model="isHighlight" />
<div style="margin-left: 6px; margin-right: 10px;">高亮实体</div> -->
<el-switch v-model="isHighlight" />
<div style="margin-left: 6px; margin-right: 10px;">高亮实体</div>
<el-switch v-model="isTranslate" />
<div style="margin-left: 6px;">原文显示</div>
<!-- <div class="btn" @click="handleDownload">
<el-icon><Document /></el-icon>
<div class="btn" @click="handleDownload">
<div class="icon" style="margin-right: 4px;">
<img :src="download" alt="">
</div>
<div class="text">下载</div>
</div> -->
</div>
<div class="btn" @click="handleFindWord('open')">
<el-icon><Search /></el-icon>
<div class="icon" style="margin-right: 6px;">
<img :src="search" alt="">
</div>
<div class="text">查找</div>
</div>
<div class="find-word-box" v-if="findWordBox">
......@@ -79,6 +83,8 @@ import { ElMessage } from "element-plus";
import { debounce } from "lodash";
import { getDecreeSummary } from "@/api/decree/introduction";
import { getDecreeReport } from "@/api/decree/introduction";
import download from "./assets/icons/download.png";
import search from "./assets/icons/search.png";
const route = useRoute();
......@@ -178,7 +184,10 @@ const handleUpdateWord = debounce(() => {
}
});
if (findWordMax.value > 0) {
nextTick(() => { handleFindWord('next') })
nextTick(() => {
findWordNum.value = findWordNum.value==findWordMax.value ? 1 : findWordNum.value+1;
handleHighlight()
})
}
} else {
originData.forEach((item, index) => {
......@@ -257,11 +266,10 @@ onMounted(() => {
display: flex;
flex-direction: column;
align-items: center;
.layout-main-box {
padding: 16px 0;
.header-main {
padding: 17px 0;
width: 100%;
border-bottom: 1px solid rgba(234, 236, 238, 1);
border-top: 1px solid rgba(234, 236, 238, 1);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
}
......@@ -412,7 +420,6 @@ onMounted(() => {
background: rgba(255, 255, 255, 1);
display: flex;
justify-content: center;
gap: 8px;
align-items: center;
cursor: pointer;
.text {
......@@ -426,6 +433,15 @@ onMounted(() => {
letter-spacing: 0px;
text-align: left;
}
.icon {
width: 16px;
height: 16px;
font-size: 0px;
img {
width: 100%;
height: 100%;
}
}
}
}
......
src/views/innovationSubject/InnovationAnalysis/InnovationAnalysis.vue
浏览文件 @ 0b438adc
......@@ -151,15 +151,12 @@ const fieldAnalysis = ref('人工智能与信息技术占据最大份额，反
const radarAnalysis = ref('研究型大学在基础科学领域(生物医学、材料科学)占据主导地位；科技企业高度集中于人工智能和信息技术领域；国家实验室在能源技术和国家安全相关领域有显著优势；国防承包商的研究高度集中于航空航天和国家安全领域。')
// 切换视图
function switchView(view: string) {
console.log('[v0] switchView 被调用, view:', view, ', currentView:', currentView.value)
function switchView(view: string) {
if (currentView.value !== view) {
currentView.value = view
if (view === 'ranking') {
console.log('[v0] 切换到排名视图，调用 handleGetOverallRanking')
if (view === 'ranking') {
handleGetOverallRanking()
} else {
console.log('[v0] 切换到研究布局视图，调用 handleGetResearchField 和 handleGetResearchFieldSubjectType')
} else {
handleGetResearchField()
handleGetResearchFieldSubjectType()
}
......@@ -174,8 +171,7 @@ const handleGetOverallRanking = async () => {
subjectTypeId: props.activeCate1,
year: releaseTime.value
}
const res = await getOverallRanking(params)
console.log('[v0] 综合排名', res)
const res = await getOverallRanking(params)
if (res.code === 200 && res.data) {
innoItemList.value = res.data
}
......@@ -192,8 +188,7 @@ const handleGetResearchField = async () => {
const params = {
year: releaseTime.value
}
const res = await getResearchField(params)
console.log('[v0] 研究领域布局情况', res)
const res = await getResearchField(params)
if (res.code === 200 && res.data) {
const names = res.data.map(item => item.areaName)
const values = res.data.map(item => item.amount)
......@@ -215,8 +210,7 @@ const handleGetResearchFieldSubjectType = async () => {
const params = {
year: releaseTime.value
}
const res = await getResearchFieldSubjectType(params)
console.log('[v0] 研究领域主体类型', res)
const res = await getResearchFieldSubjectType(params)
if (res.code === 200 && res.data) {
raderOptionData.value = res.data
}
......
src/views/technologyFigures/assets/images/personNewIcon.svg 0 → 100644
浏览文件 @ 0b438adc
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.000000" height="24.000000" fill="none" customFrame="#000000">
<rect id="容器 1603" width="24.000000" height="24.000000" x="0.000000" y="0.000000" />
<path id="矢量 1680" d="M18.506 13.4068L5.49373 13.4068C4.80439 13.4068 4.23005 12.8787 4.17272 12.1925L4.00237 10.1513C3.96989 9.76532 4.27512 9.43428 4.66288 9.43428L19.3372 9.43428C19.7249 9.43428 20.0298 9.76532 19.9977 10.1513L19.8273 12.1925C19.77 12.8787 19.1957 13.4068 18.506 13.4068ZM18.4003 14.0688L5.59945 14.0688L6.9251 24L17.0746 24L18.4003 14.0688ZM12.0565 4.46505C13.291 4.46505 14.2916 3.46532 14.2916 2.23253C14.2916 0.999407 13.2907 0 12.0565 0C10.8223 0 9.82148 0.999738 9.82148 2.23253C9.82115 3.46532 10.822 4.46505 12.0565 4.46505ZM17.1368 8.7722L16.6473 6.589C16.523 6.03385 16.0686 5.61277 15.5052 5.53001L13.5177 5.23803L12.5334 7.49373L12.4065 6.3821C12.4032 6.34701 12.3734 6.3202 12.3382 6.3202L11.7758 6.3202C11.74 6.3202 11.7105 6.34734 11.7072 6.38276L11.5919 7.5222L10.5953 5.23836L8.60785 5.53034C8.04445 5.6131 7.59008 6.03418 7.4658 6.58933L6.9763 8.7722L17.1368 8.7722ZM11.3688 5.32377C11.3695 5.53001 11.5399 5.80477 11.6429 5.90772C11.746 6.01068 11.919 6.01068 12.0565 6.01068C12.1941 6.01068 12.3671 6.01068 12.4701 5.90772C12.5732 5.80477 12.7435 5.53001 12.7442 5.32377C12.7452 5.08344 12.3243 5.04901 12.0565 5.04901C11.7884 5.04901 11.3679 5.0831 11.3688 5.32377Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
</svg>
src/views/thinkTank/ReportDetail/reportAnalysis/index.vue
浏览文件 @ 0b438adc
<template>
<div class="wrap">
<div class="left">
<div class="box1">
<!-- <div class="box-header">
<div class="top">
<WarningPane :warnningLevel="riskSignal?.level" :warnningContent="riskSignal?.content">
</WarningPane>
</div>
<div class="bottom-row">
<div class="left">
<div class="box1">
<!-- <div class="box-header">
<div class="header-left"></div>
<div class="title">内容摘要</div>
<div class="header-right">
......@@ -17,44 +22,44 @@
<div class="box1-main">
{{ box1Data }}
</div> -->
<AnalysisBox title="基本信息" :showAllBtn="true">
<div class="box1-main">
<div class="text-box">
<div class="time">
<div class="time-title">发布时间:</div>
<div class="time-content">{{ publishTime }}</div>
</div>
<div class="topic">
<div class="topic-title">报告主题:</div>
<div class="topic-content">{{ reportTopic }}</div>
</div>
<div class="author">
<div class="author-title">报告作者:</div>
<div class="author-content">
<template v-if="Array.isArray(reportAuthors) && reportAuthors.length">
<span v-for="(author, idx) in reportAuthors" :key="idx">
{{ author.name }}
<span v-if="idx < reportAuthors.length - 1">、</span>
</span>
</template>
<AnalysisBox title="基本信息" :showAllBtn="true">
<div class="box1-main">
<div class="text-box">
<div class="time">
<div class="time-title">发布时间:</div>
<div class="time-content">{{ publishTime }}</div>
</div>
<div class="topic">
<div class="topic-title">报告主题:</div>
<div class="topic-content">{{ reportTopic }}</div>
</div>
<div class="author">
<div class="author-title">报告作者:</div>
<div class="author-content">
<template v-if="Array.isArray(reportAuthors) && reportAuthors.length">
<span v-for="(author, idx) in reportAuthors" :key="idx">
{{ author.name }}
<span v-if="idx < reportAuthors.length - 1">、</span>
</span>
</template>
</div>
</div>
</div>
</div>
<div class="author-box" v-for="(author, idx) in reportAuthors" :key="idx"
v-if="Array.isArray(reportAuthors) && reportAuthors.length">
<div class="author-item">
<div class="image"><img :src="author.avatar" :alt="reportAuthors[0].name" /></div>
<div class="author-text">
<div class="author-name">{{ author.name }}</div>
<div class="author-position">{{ author.job }}</div>
<div class="author-box" v-for="(author, idx) in reportAuthors" :key="idx"
v-if="Array.isArray(reportAuthors) && reportAuthors.length">
<div class="author-item">
<div class="image"><img :src="author.avatar" :alt="reportAuthors[0].name" /></div>
<div class="author-text">
<div class="author-name">{{ author.name }}</div>
<div class="author-position">{{ author.job }}</div>
</div>
</div>
</div>
</div>
</div>
</AnalysisBox>
</div>
<div class="box2">
<!-- <div class="box-header">
</AnalysisBox>
</div>
<div class="box2">
<!-- <div class="box-header">
<div class="header-left"></div>
<div class="title">涉及科技领域</div>
<div class="header-right">
......@@ -69,97 +74,117 @@
<div class="box2-main">
<div class="box2-content" id="box2Chart"></div>
</div> -->
<AnalysisBox title="相关报告" :showAllBtn="true">
<div class="box2-main">
<div class="box2-item" v-for="(report, idx) in reportList" :key="idx">
<div class="box2-item-content">
<div class="left"><img :src="report.image" alt="" /></div>
<div class="right-content">
<div class="report-title">{{ report.name }}</div>
<div class="report-footer">
<div class="report-time">{{ report.postDate }}</div>
<div class="report-footer-right">
<div class="footer-image">
<img :src="report.thinktankLogo" alt="" />
<AnalysisBox title="相关报告" :showAllBtn="true">
<div class="box2-main">
<div class="box2-item" v-for="(report, idx) in reportList" :key="idx">
<div class="box2-item-content">
<div class="left"><img :src="report.image" alt="" /></div>
<div class="right-content">
<div class="report-title">{{ report.name }}</div>
<div class="report-footer">
<div class="report-time">{{ report.postDate }}</div>
<div class="report-footer-right">
<div class="footer-image">
<img :src="report.thinktankLogo" alt="" />
</div>
<div class="think-name">{{ report.thinktankName }}</div>
</div>
<div class="think-name">{{ report.thinktankName }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box2-btn">
<div class="btn-text">
多智库报告观点汇聚分析
</div>
<div class="btn-image">
<img src="../images/btn-right.png" alt="">
<div class="box2-btn">
<div class="btn-text">
多智库报告观点汇聚分析
</div>
<div class="btn-image">
<img src="../images/btn-right.png" alt="">
</div>
</div>
</div>
</AnalysisBox>
</AnalysisBox>
</div>
</div>
</div>
<div class="right">
<div class="box3">
<AnalysisBox title="报告摘要" :showAllBtn="true">
<div class="box3-main">
<div class="box3-top">
<div class="top-title">
<div class="title-image">
<img src="../images/title-image.png" alt="" />
<div class="right">
<div class="box3">
<AnalysisBox title="报告摘要" :showAllBtn="true">
<div class="box3-main">
<div class="box3-top">
<div class="top-title">
<div class="title-image">
<img src="../images/title-image.png" alt="" />
</div>
</div>
</div>
<div class="box3-text"> {{ box1Data }}</div>
</div>
<div class="box3-text"> {{ box1Data }}</div>
</div>
</AnalysisBox>
</div>
<div class="box4">
<AnalysisBox title="核心论点" :showAllBtn="true">
<div class="box4-main">
<div class="box4-main-main">
<div class="box4-item" v-for="(item, index) in majorOpinions" :key="index">
<div class="left">
{{ index + 1 }}
</div>
<div class="center">
<div class="title">{{ item.content }}</div>
<div>
<img src="../images/image-open.png" alt="" class="center-image"
@click="handleOpenReportOriginal(item)" />
</AnalysisBox>
</div>
<div class="box4">
<AnalysisBox title="核心论点" :showAllBtn="true">
<div class="search-box">
<el-input placeholder="搜索观点" v-model="searchOpinions" style="width: 180px"
@keyup.enter="handleSearchOpinions" />
<div class="icon">
<img src="../images/Line_Search.png" alt="" @click="handleSearchOpinions" />
</div>
</div>
<div class="box4-main">
<div class="box4-main-main">
<div class="box4-item" v-for="(item, index) in filteredOpinions" :key="index">
<div class="top-row">
<div class="left">
{{ index + 1 }}
</div>
<div class="center">
<div class="title">{{ item.titleZh }}</div>
<div>
<img src="../images/image-open.png" alt="" class="center-image"
@click="handleOpenReportOriginal(item)" />
</div>
<div>
<img v-if="expandedIndex !== index" src="../images/image-down.png" alt="" class="center-image"
@click="toggleOpinion(index)" />
<img v-else src="../images/image-up.png" alt="" class="center-image"
@click="toggleOpinion(index)" />
</div>
</div>
</div>
<!-- <div class="desc">{{ item.econtent }}</div> -->
</div>
<!-- <div class="right"> -->
<!-- <div class="tag" v-for="(val, idx) in item.hylyList" :key="idx">
<div v-if="expandedIndex === index" class="desc">
{{ item.contentZh }}
</div>
<!-- <div class="right"> -->
<!-- <div class="tag" v-for="(val, idx) in item.hylyList" :key="idx">
{{ val }}
</div>
<div class="tag" v-for="(val, idx) in item.serialNum" :key="idx">
{{ val }}
</div> -->
<!-- <AreaTag v-for="(val, idx) in item.hylyList" :key="idx" :tagName="val"></AreaTag>
<!-- <AreaTag v-for="(val, idx) in item.hylyList" :key="idx" :tagName="val"></AreaTag>
</div> -->
<!-- <div class="more">
<!-- <div class="more">
<img src="@/assets/icons/open.png" alt="" />
</div> -->
</div>
</div>
</div>
<div class="box4-main-footer">
<div class="info">共{{ total }}条核心论点</div>
<div class="page-box">
<el-pagination :page-size="12" background layout="prev, pager, next" :total="total"
@current-change="handleCurrentChange" :current-page="currentPage" />
<div class="box4-main-footer">
<div class="info">共{{ opinionsTotal }}条核心论点</div>
<div class="page-box">
<el-pagination :page-size="pageSize" background layout="prev, pager, next" :total="opinionsTotal"
@current-change="handleCurrentChange" :current-page="currentPage" />
</div>
</div>
</div>
</div>
</AnalysisBox>
</AnalysisBox>
</div>
</div>
</div>
</div>
</template>
<script setup>
import WarningPane from "@/components/base/WarningPane/index.vue"
import SearchContainer from "@/components/SearchContainer.vue";
import { ref, onMounted, computed, defineProps } from "vue";
import setChart from "@/utils/setChart";
import getWordCloudChart from "./utils/worldCloudChart";
......@@ -167,7 +192,8 @@ import {
getThinkTankReportAbstract,
getThinkTankReportContent,
getThinkTankReportIndustry,
getThinkTankReportIndustryCloud
getThinkTankReportIndustryCloud,
getThinkTankReportViewpoint
} from "@/api/thinkTank/overview";
import { getChartAnalysis } from "@/api/aiAnalysis/index";
import { useRouter } from "vue-router";
......@@ -185,6 +211,28 @@ const props = defineProps({
}
});
const searchOpinions = ref('');
const handleSearchOpinions = () => {
currentPage.value = 1;
handleGetThinkTankReportViewpoint();
};
// 当前展开的核心论点下标（同一时刻只展开一条）
const expandedIndex = ref(null);
const filteredOpinions = computed(() => majorOpinions.value);
const opinionsTotal = computed(() => total.value);
const toggleOpinion = index => {
if (expandedIndex.value === index) {
expandedIndex.value = null;
} else {
expandedIndex.value = index;
}
};
const publishTime = computed(() => {
const info = props.thinkInfo || {};
// 优先用 times，其次用 reportTime 的日期部分
......@@ -207,6 +255,11 @@ const reportAuthors = computed(() => {
}
return [];
});
const riskSignal = computed(() => {
const info = props.thinkInfo || {};
return info.riskSignal;
});
// 内容摘要
......@@ -362,22 +415,27 @@ const pageSize = ref(10);
const total = ref(0);
const handleCurrentChange = page => {
currentPage.value = page;
handleGetThinkTankReportContent();
handleGetThinkTankReportViewpoint();
};
//获取报告主要观点
const handleGetThinkTankReportContent = async () => {
// 获取报告核心论点（支持搜索）
const handleGetThinkTankReportViewpoint = async () => {
try {
const params = {
id: router.currentRoute._value.params.id,
reportId: router.currentRoute._value.params.id,
currentPage: currentPage.value - 1,
pageSize: pageSize.value
pageSize: pageSize.value,
keyword: (searchOpinions.value || "").trim(),
orgIds: ""
};
const res = await getThinkTankReportContent(params);
console.log("主要观点", res.data);
const res = await getThinkTankReportViewpoint(params);
console.log("核心论点", res.data);
if (res.code === 200 && res.data) {
majorOpinions.value = res.data.content || [];
handleGetBox3AnalysisContent(majorOpinions.value);
total.value = res.data.totalElements || 0;
// 重置展开状态
expandedIndex.value = null;
}
} catch (error) {
console.error("获取主要观点error", error);
......@@ -396,7 +454,7 @@ const handleGetBox3AnalysisContent = async textJson => {
onMounted(() => {
handleGetThinkTankReportAbstract();
handleGetThinkTankReportContent();
handleGetThinkTankReportViewpoint();
handleGetThinkTankReportIndustry();
handleGetThinkTankReportIndustryCloud();
......@@ -409,661 +467,659 @@ onMounted(() => {
justify-content: center;
gap: 16px;
padding-bottom: 16px;
flex-direction: column;
.box-header {
.top {
margin-top: 16px;
width: 100%;
height: 50px;
height: 100%;
justify-content: center;
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;
}
.bottom-row {
.header-btn-box {
position: absolute;
top: 15px;
right: 83px;
display: flex;
justify-content: flex-end;
gap: 8px;
.btn {
height: 28px;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 28px;
}
flex-direction: row;
justify-content: center;
display: flex;
gap: 16px;
.btnActive {
color: var(--color-main-active);
border: 1px solid var(--color-main-active);
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
.left {
gap: 16px;
display: flex;
justify-content: flex-end;
gap: 4px;
.icon {
width: 28px;
height: 28px;
flex-direction: column;
img {
width: 100%;
height: 100%;
}
}
}
}
.left {
gap: 16px;
display: flex;
flex-direction: column;
.box1 {
margin-top: 17px;
width: 480px;
height: 486px;
// border: 1px solid rgba(234, 236, 238, 1);
// border-radius: 10px;
// box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
// background: rgba(255, 255, 255, 1);
.box1-main {
.box1 {
margin-top: 17px;
width: 480px;
height: 438px;
.text-box {
width: 437px;
margin-left: 22px;
margin-top: 8px;
gap: 12px;
display: flex;
flex-direction: column;
.time {
height: 24px;
height: 486px;
// border: 1px solid rgba(234, 236, 238, 1);
// border-radius: 10px;
// box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
// background: rgba(255, 255, 255, 1);
.box1-main {
width: 480px;
height: 438px;
.text-box {
width: 437px;
margin-left: 22px;
margin-top: 8px;
gap: 12px;
display: flex;
gap: 4px;
.time-title {
width: 88px;
font-family: "Source Han Sans CN";
font-weight: 700;
font-size: 16px;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
color: rgb(59, 65, 75);
}
.time-content {
flex-direction: column;
width: 345px;
font-family: "Source Han Sans CN";
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
color: rgb(59, 65, 75);
}
}
.topic {
display: flex;
gap: 4px;
.topic-title {
width: 88px;
font-family: "Source Han Sans CN";
font-weight: 700;
font-size: 16px;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
color: rgb(59, 65, 75);
.time {
height: 24px;
display: flex;
gap: 4px;
.time-title {
width: 88px;
}
font-family: "Source Han Sans CN";
font-weight: 700;
font-size: 16px;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
color: rgb(59, 65, 75);
}
.topic-content {
.time-content {
width: 345px;
font-family: "Source Han Sans CN";
font-weight: 400;
font-size: 16px;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
color: rgb(59, 65, 75);
width: 345px;
font-family: "Source Han Sans CN";
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
color: rgb(59, 65, 75);
}
}
}
.author {
height: 24px;
display: flex;
gap: 4px;
.author-title {
width: 88px;
font-family: "Source Han Sans CN";
font-weight: 700;
font-size: 16px;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
color: rgb(59, 65, 75);
}
.topic {
.author-content {
display: flex;
gap: 4px;
width: 345px;
font-family: "Source Han Sans CN";
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
color: rgb(59, 65, 75);
}
}
}
.topic-title {
width: 88px;
.author-box {
width: 437px;
height: 220px;
margin-top: 34px;
margin-left: 18px;
font-family: "Source Han Sans CN";
font-weight: 700;
font-size: 16px;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
color: rgb(59, 65, 75);
.author-item {
width: 213px;
height: 49px;
display: flex;
gap: 11px;
.image {
width: 42px;
height: 42px;
margin-top: 3px;
margin-left: 3px;
display: inline-block;
}
.topic-content {
img {
width: 100%;
height: 100%;
border-radius: 50%;
width: 345px;
font-family: "Source Han Sans CN";
font-weight: 400;
font-size: 16px;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
color: rgb(59, 65, 75);
}
}
.author-text {
width: 154px;
height: 49px;
.author {
height: 24px;
display: flex;
gap: 4px;
.author-title {
width: 88px;
.author-name {
width: 154px;
height: 24px;
font-family: "Source Han Sans CN";
font-weight: 700;
font-size: 16px;
line-height: 24px;
letter-spacing: 0;
letter-spacing: 1px;
text-align: left;
color: rgb(59, 65, 75);
}
.author-position {
width: 154px;
height: 22px;
.author-content {
width: 345px;
font-family: "Source Han Sans CN";
font-weight: 400;
font-size: 14px;
line-height: 22px;
letter-spacing: 0;
font-size: 16px;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
color: rgb(95, 101, 108);
color: rgb(59, 65, 75);
}
}
}
}
}
}
.author-box {
width: 437px;
height: 220px;
margin-top: 34px;
margin-left: 18px;
.box2 {
.author-item {
width: 213px;
height: 49px;
display: flex;
gap: 11px;
width: 480px;
height: 648px;
// border: 1px solid rgba(234, 236, 238, 1);
// border-radius: 10px;
// box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
// background: rgba(255, 255, 255, 1);
.image {
width: 42px;
height: 42px;
margin-top: 3px;
margin-left: 3px;
display: inline-block;
.box2-main {
width: 436px;
margin-top: 5px;
margin-left: 23px;
.box2-item {
height: 103px;
width: 100%;
border-bottom: 1px solid rgba(234, 236, 238, 1);
border-top: 1px solid rgba(234, 236, 238, 1);
img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.box2-item-content {
width: 100%;
height: 90px;
margin-top: 7px;
display: flex;
.author-text {
width: 154px;
height: 49px;
.left {
width: 56px;
height: 74px;
margin-top: 8px;
.author-name {
width: 154px;
height: 24px;
font-family: "Source Han Sans CN";
font-weight: 700;
font-size: 16px;
line-height: 24px;
letter-spacing: 0;
text-align: left;
color: rgb(59, 65, 75);
}
img {
width: 100%;
height: 100%;
.author-position {
width: 154px;
height: 22px;
font-family: "Source Han Sans CN";
font-weight: 400;
font-size: 14px;
line-height: 22px;
letter-spacing: 0;
text-align: left;
color: rgb(95, 101, 108);
}
}
}
.right-content {
margin-left: 13px;
width: 365px;
height: 76px;
}
}
}
.box2 {
width: 480px;
height: 648px;
// border: 1px solid rgba(234, 236, 238, 1);
// border-radius: 10px;
// box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
// background: rgba(255, 255, 255, 1);
.box2-main {
width: 436px;
margin-top: 5px;
margin-left: 23px;
.box2-item {
height: 103px;
width: 100%;
border-bottom: 1px solid rgba(234, 236, 238, 1);
border-top: 1px solid rgba(234, 236, 238, 1);
.box2-item-content {
width: 100%;
height: 90px;
margin-top: 7px;
display: flex;
.report-title {
height: 48px;
font-family: "Source Han Sans CN";
font-weight: 700;
font-size: 16px;
line-height: 24px;
letter-spacing: 0;
text-align: left;
.left {
width: 56px;
height: 74px;
margin-top: 8px;
img {
width: 100%;
height: 100%;
}
}
.report-footer {
margin-top: 4px;
height: 22px;
justify-content: space-between;
display: flex;
.right-content {
margin-left: 13px;
width: 365px;
height: 76px;
margin-top: 7px;
.report-time {
height: 22px;
width: 97px;
.report-title {
height: 48px;
font-family: "Source Han Sans CN";
font-weight: 400;
font-size: 14px;
line-height: 22px;
font-weight: 700;
font-size: 16px;
line-height: 24px;
letter-spacing: 0;
text-align: left;
color: rgb(95, 101, 108);
}
.report-footer-right {
.report-footer {
margin-top: 4px;
height: 22px;
justify-content: space-between;
display: flex;
gap: 6px;
.footer-image {
width: 16px;
height: 16px;
margin-top: 3px;
img {
width: 100%;
height: 100%;
}
.report-time {
height: 22px;
width: 97px;
font-family: "Source Han Sans CN";
font-weight: 400;
font-size: 14px;
line-height: 22px;
letter-spacing: 0;
text-align: left;
color: rgb(95, 101, 108);
}
.think-name {
.report-footer-right {
height: 22px;
display: flex;
gap: 6px;
.footer-image {
width: 16px;
height: 16px;
margin-top: 3px;
img {
width: 100%;
height: 100%;
}
}
.think-name {
height: 22px;
}
}
}
}
}
}
}
}
.box2-btn {
margin-top: 16px;
margin-left: 23px;
width: 436px;
height: 36px;
background-color: rgb(5, 95, 194);
border-radius: 6px;
display: flex;
.btn-text {
color: rgb(255, 255, 255);
font-family: "Source Han Sans CN";
font-weight: 400;
font-size: 16px;
line-height: 22px;
letter-spacing: 0;
margin-left: 120px;
margin-top: 7px;
.box2-btn {
margin-top: 16px;
margin-left: 23px;
width: 436px;
height: 36px;
background-color: rgb(5, 95, 194);
border-radius: 6px;
display: flex;
.btn-text {
color: rgb(255, 255, 255);
font-family: "Source Han Sans CN";
font-weight: 400;
font-size: 16px;
line-height: 22px;
letter-spacing: 0;
margin-left: 120px;
margin-top: 7px;
}
}
.btn-image {
width: 13px;
height: 8px;
.btn-image {
width: 13px;
height: 8px;
margin-left: 8px;
display: inline-block;
margin-top: 14px;
margin-left: 8px;
display: inline-block;
margin-top: 14px;
img {
width: 100%;
height: 100%;
display: block;
img {
width: 100%;
height: 100%;
display: block;
}
}
}
}
}
}
.right {
margin-top: 17px;
gap: 16px;
display: flex;
flex-direction: column;
.box3 {
width: 1103px;
height: 545px;
.right {
margin-top: 17px;
gap: 16px;
display: flex;
flex-direction: column;
// border: 1px solid rgba(234, 236, 238, 1);
// border-radius: 10px;
// box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
// background: rgba(255, 255, 255, 1);
.box3-main {
width: 1058px;
height: 466px;
margin-top: 3px;
margin-left: 22px;
.box3 {
width: 1103px;
height: 545px;
// border: 1px solid rgba(234, 236, 238, 1);
// border-radius: 10px;
// box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
// background: rgba(255, 255, 255, 1);
.box3-main {
width: 1058px;
height: 466px;
margin-top: 3px;
margin-left: 22px;
.box3-top {
width: 1058px;
height: 48px;
background: linear-gradient(rgb(137, 193, 255, 0.1), rgb(255, 255, 255));
display: flex;
.top-title {
width: 1010px;
height: 32px;
margin-left: 24px;
margin-top: 16px;
.box3-top {
width: 1058px;
height: 48px;
background: linear-gradient(rgb(137, 193, 255, 0.1), rgb(255, 255, 255));
display: flex;
.title-image {
width: 199px;
.top-title {
width: 1010px;
height: 32px;
margin-left: 24px;
margin-top: 16px;
.title-image {
width: 199px;
height: 32px;
img {
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
}
}
}
}
}
.box3-text {
width: 1006px;
margin-top: 24px;
margin-left: 26px;
font-family: "Source Han Sans CN";
font-weight: 400;
font-size: 16px;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
text-justify: inter-ideograph;
}
}
.box3-text {
width: 1006px;
margin-top: 24px;
margin-left: 26px;
font-family: "Source Han Sans CN";
font-weight: 400;
font-size: 16px;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
text-justify: inter-ideograph;
}
}
.box4 {
width: 1103px;
height: 965px;
// border: 1px solid rgba(234, 236, 238, 1);
// border-radius: 10px;
// box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
// background: rgba(255, 255, 255, 1);
position: relative;
}
.search-box {
display: flex;
width: 180px;
height: 32px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
position: relative;
margin-top: 3px;
margin-bottom: 16px;
margin-left: 23px;
.icon {
width: 16px;
height: 16px;
cursor: pointer;
position: absolute;
right: 8px;
top: 8px;
.box4 {
width: 1103px;
height: 965px;
// border: 1px solid rgba(234, 236, 238, 1);
// border-radius: 10px;
// box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
// background: rgba(255, 255, 255, 1);
position: relative;
.box4-main {
width: 1057px;
margin: 0 auto;
.box4-main-main {
height: 767px;
overflow: hidden;
.box4-item {
width: 1057px;
height: 72px;
box-sizing: border-box;
border-radius: 4px;
display: flex;
position: relative;
justify-content: flex-end;
.left {
margin-top: 24px;
margin-left: 15px;
width: 24px;
height: 24px;
border-radius: 12px;
line-height: 24px;
text-align: center;
background: rgba(231, 243, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 12px;
font-weight: 400;
letter-spacing: 0px;
img {
width: 100%;
height: 100%;
}
}
}
.box4-main {
width: 1057px;
margin: 0 auto;
.center {
height: 64px;
width: 910px;
margin-left: 13px;
.box4-main-main {
height: 767px;
overflow: hidden;
.box4-item {
width: 1057px;
box-sizing: border-box;
border-radius: 4px;
display: flex;
align-items: center;
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
.title {
margin-top: 12px;
width: 918px;
// height: 55px;
color: rgba(59, 65, 75, 1);
flex-direction: column;
position: relative;
.top-row {
display: flex;
align-items: flex-start;
}
.left {
margin-top: 24px;
margin-left: 15px;
width: 24px;
height: 24px;
border-radius: 12px;
line-height: 24px;
text-align: center;
background: rgba(231, 243, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 26px;
font-size: 12px;
font-weight: 400;
letter-spacing: 0px;
text-align: left;
overflow: hidden;
}
.center {
min-height: 64px;
margin-left: 13px;
display: flex;
align-items: center;
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.center-image {
width: 16px;
height: 24px;
margin-top: 12px;
margin-left: 18px;
}
.title {
margin-top: 12px;
width: 918px;
// height: 55px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: left;
overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.center-image {
width: 16px;
height: 24px;
margin-top: 12px;
margin-left: 18px;
}
}
.right {
margin-top: 26px;
width: 180px;
height: 22px;
display: flex;
margin-top: 26px;
margin-left: 20px;
}
height: 22px;
display: flex;
gap: 4px;
.right {
margin-top: 26px;
width: 180px;
height: 22px;
display: flex;
margin-top: 26px;
margin-left: 20px;
.tag {
height: 22px;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(217, 247, 190, 1);
border-radius: 4px;
background: rgba(246, 255, 237, 1);
color: rgba(82, 196, 26, 1);
font-family: Microsoft YaHei;
font-size: 14px;
display: flex;
gap: 4px;
.tag {
height: 22px;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(217, 247, 190, 1);
border-radius: 4px;
background: rgba(246, 255, 237, 1);
color: rgba(82, 196, 26, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
}
.more {
width: 16px;
height: 16px;
position: absolute;
top: 28px;
right: 20px;
img {
width: 100%;
height: 100%;
}
}
.desc {
width: 950px;
margin-top: 22px;
margin-left: 52px; // 24(left) + 13(center margin) + 一点间距
color: rgb(59, 65, 75);
font-family: "Source Han Sans CN";
font-weight: 400;
line-height: 20px;
/* Regular 常规 */
font-size: 16px;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
/* 两端对齐 */
}
}
.more {
width: 16px;
height: 16px;
position: absolute;
top: 28px;
right: 20px;
.box4-item {
border-bottom: 1px solid rgba(234, 236, 238, 1);
border-top: 1px solid rgba(234, 236, 238, 1);
img {
width: 100%;
height: 100%;
}
}
}
.box4-item {
border-bottom: 1px solid rgba(234, 236, 238, 1);
border-top: 1px solid rgba(234, 236, 238, 1);
.box4-main-footer {
height: 80px;
display: flex;
justify-content: space-between;
padding: 30px 5px;
.info {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
letter-spacing: 0px;
text-align: left;
}
}
}
.box4-main-footer {
height: 80px;
.box4-footer {
position: absolute;
left: 22px;
bottom: 19px;
width: 1057px;
height: 64px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
display: flex;
justify-content: space-between;
padding: 30px 5px;
align-items: center;
justify-content: center;
gap: 13px;
.info {
color: rgba(132, 136, 142, 1);
.footer-left {
width: 19px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.footer-center {
width: 964px;
height: 48px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 14px;
font-size: 16px;
font-weight: 400;
line-height: 18px;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
}
}
.box4-footer {
position: absolute;
left: 22px;
bottom: 19px;
width: 1057px;
height: 64px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
display: flex;
align-items: center;
justify-content: center;
gap: 13px;
.footer-left {
width: 19px;
height: 20px;
img {
width: 100%;
height: 100%;
text-align: justify;
}
}
.footer-center {
width: 964px;
height: 48px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.footer-right {
width: 24px;
height: 24px;
.footer-right {
width: 24px;
height: 24px;
img {
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
}
}
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论