Skip to content

R
risk-monitor
提交 6ec1e289 authored 作者: yanpeng's avatar yanpeng
浏览文件
操作

news analysis

上级 6b26970e 46febd14
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 1189 行增加 和 45 行删除
src/components/Container/index.vue
浏览文件 @ 6ec1e289
......@@ -5,10 +5,10 @@
<slot name="header-top"></slot>
</div>
<div class="container-header">
<div class="header-left">
<div class="header-left" :style="{ paddingLeft: block ? 0 : '14px' }">
<slot name="header-left">
<!-- <div class="blue-title-block"></div> -->
<el-image :src="titleIcon" class="header-icon" fit="contain" />
<div v-if="block" class="blue-title-block"></div>
<el-image v-else :src="titleIcon" class="header-icon" fit="contain" />
<div :class="headerTitleClasses">{{ title }}</div>
</slot>
</div>
......@@ -57,6 +57,10 @@ const props = defineProps({
titleType: {
type: String,
default: ""
},
block: {
type: Boolean,
default: false
}
});
......@@ -106,9 +110,9 @@ const headerTitleClasses = computed(() => [
.blue-title-block {
width: 8px;
height: 16px;
background-color: var(--base-color);
background-color: $base-color;
/* border-radius: 3px; */
margin-right: 14px;
margin-right: 4px;
}
.header-title {
......
src/router/index.js
浏览文件 @ 6ec1e289
......@@ -47,12 +47,19 @@ import MarketSingleCaseDeepdig from "@/views/marketAccessRestrictions/singleCase
// 投融资限制
import Finance from "@/views/finance/index.vue";
// 新闻事件分析
import NewsAnalysis from "@/views/newsAnalysis/index.vue";
// 智能写报
import WrittingAsstaint from "@/views/writtingAsstaint/index.vue";
// 门户
import Portal1 from "@/views/portals/portal1/index.vue";
import Portal2 from "@/views/portals/portal2/index.vue";
// 综合搜索
import ComprehensiveSearch from "@/views/comprehensiveSearch/index.vue";
import SearchResults from "@/views/comprehensiveSearch/searchResults/index.vue";
const routes = [
// 智能写报
{
......@@ -396,6 +403,112 @@ const routes = [
}
},
// 市场准入限制首页
{
path: "/marketAccessRestrictions",
name: "MarketAccessRestrictions",
component: MarketAccessRestrictions,
meta: {
title: "市场准入限制"
}
},
{
path: "/marketAccessLayout",
name: "MarketAccessLayout",
component: MarketAccessLayout,
redirect: "/marketAccessLayout/overview",
meta: {
title: "市场准入限制布局"
},
children: [
{
path: "overview",
name: "MarketAccessOverview",
component: MarketAccessOverview,
meta: {
title: "调查概况"
}
},
{
path: "case",
name: "MarketAccessCase",
component: MarketAccessCase,
meta: {
title: "调查案件"
}
}
]
},
{
path: "/marketSingleCaseLayout",
name: "MarketSingleCaseLayout",
component: MarketSingleCaseLayout,
redirect: "/marketSingleCaseLayout/overview",
meta: {
title: "单次调查案件布局"
},
children: [
{
path: "overview",
name: "MarketSingleCaseOverview",
component: MarketSingleCaseOverview,
meta: {
title: "调查简介"
}
},
{
path: "deepdig",
name: "MarketSingleCaseDeepdig",
component: MarketSingleCaseDeepdig,
meta: {
title: "深度挖掘"
}
}
]
},
// 出口管制转移过来的页面
{
path: "/exportControl/analysis",
name: "analysis",
component: () => import("@/views/exportControl/analysis/index.vue"),
meta: {
title: "分析页"
}
},
{
path: "/exportControl/infoplatform",
name: "infoplatform",
component: () => import("@/views/exportControl/infoPlatform/index.vue"),
meta: {
title: "信息平台"
}
},
{
path: "/exportControl/rulelimit",
name: "rulelimit",
component: () => import("@/views/exportControl/ruleLimit/index.vue"),
meta: {
title: "规则限制"
}
},
{
path: "/exportControl/ruledetail",
name: "ruledetail",
component: () => import("@/views/exportControl/ruleDetail/index.vue"),
meta: {
title: "规则详情"
}
},
{
path: "/exportControl/researchfunding",
name: "researchfunding",
component: () => import("@/views/exportControl/researchFunding/index.vue"),
meta: {
title: "科研资助"
}
},
// 投融资限制
{
path: "/finance",
......@@ -406,7 +519,17 @@ const routes = [
}
},
// 门户路由放在这块
// 新闻事件分析
{
path: "/newsAnalysis",
name: "newsAnalysis",
component: NewsAnalysis,
meta: {
title: "新闻事件分析"
}
},
// 门户
{
path: "/portal1",
name: "portal1",
......@@ -422,6 +545,24 @@ const routes = [
meta: {
title: "门户2"
}
},
// 综合搜索
{
path: "/comprehensiveSearch",
name: "comprehensiveSearch",
component: ComprehensiveSearch,
meta: {
title: "综合搜索"
}
},
{
path: "/searchResults",
name: "searchResults",
component: SearchResults,
meta: {
title: "搜索结果"
}
}
];
......
src/views/comprehensiveSearch/index.vue 0 → 100644
浏览文件 @ 6ec1e289
差异被折叠。
src/views/comprehensiveSearch/utils/wordCloud.js 0 → 100644
浏览文件 @ 6ec1e289
const getWordCloudChart = (data) => {
const option = {
grid: {
left: 0,
top: 0,
right: 0,
bottom: 0,
},
series: [
{
type: "wordCloud",
shape: "rect", //
// 其他形状你可以使用形状路径
// 或者自定义路径
// shape: 'circle' // 圆形（默认）
// shape: 'rect' // 矩形
// shape: 'roundRect' // 圆角矩形
// shape: 'triangle' // 三角形
// shape: 'diamond' // 菱形
// shape: 'pentagon' // 五边形
// shape: 'star' // 星形
// shape: 'cardioid' // 心形
gridSize: 5, // 网格大小，影响词间距。
sizeRange: [10, 30], // 定义词云中文字大小的范围
rotationRange: [0, 0],
rotationStep: 10,
drawOutOfBound: false, // 是否超出画布
// 字体
textStyle: {
// normal: {
// color: function () {
// return 'rgb(' + [
// Math.round(Math.random() * 160),
// Math.round(Math.random() * 160),
// Math.round(Math.random() * 160)
// ].join(',') + ')';
// }
// },
color: function () {
let colors = [
"rgba(189, 33, 33, 1)",
"rgba(232, 151, 21, 1)",
"rgba(220, 190, 68, 1)",
"rgba(96, 58, 186, 1)",
"rgba(32, 121, 69, 1)",
"rgba(22, 119, 255, 1)",
];
return colors[parseInt(Math.random() * colors.length)];
},
emphasis: {
shadowBlur: 5,
shadowColor: "#333",
},
},
// 设置词云数据
data: data,
},
],
}
return option
}
export default getWordCloudChart
\ No newline at end of file
src/views/exportControl/index.vue
浏览文件 @ 6ec1e289
......@@ -657,9 +657,9 @@ import aircasIcon from "./assets/images/aircas.png";
const handleToDetail = () => {
router.push({
path: '/exportControl/analysis'
})
}
path: "/exportControl/analysis"
});
};
const billList = ref([]);
const curBillListIndex = ref(0);
......
src/views/newsAnalysis/index.vue 0 → 100644
浏览文件 @ 6ec1e289
差异被折叠。
src/views/newsAnalysis/relation.vue 0 → 100644
浏览文件 @ 6ec1e289
<!-- src/components/HuaweiSupplyChainChart.vue -->
<template>
<div class="chart-container" ref="chartRef"></div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
// import { graphData } from "./mockData";
const graphData = {
nodes: [
{ id: "huawei", name: "美国众议院", category: 0, symbolSize: 80 },
{ id: "huawei-cloud", name: "约翰·斯奎尔斯", category: 0, symbolSize: 50 },
{ id: "huawei-digital-energy", name: "马尔科·卢比奥", category: 0, symbolSize: 50 },
{ id: "huawei-intelligent-car", name: "埃隆·马斯克", category: 0, symbolSize: 50 },
{ id: "qualcomm", name: "道格·伯格姆", category: 1, symbolSize: 50 },
{ id: "intel", name: "斯科特·贝森特", category: 1, symbolSize: 50 },
{ id: "mediatek", name: "杰弗里·凯斯勒", category: 1, symbolSize: 50 },
{ id: "shenghongda", name: "杰弗里·凯斯勒", category: 1, symbolSize: 50 },
{ id: "foxconn", name: "唐纳德·特朗普", category: 1, symbolSize: 50 }
// { id: "luxshare", name: "立讯精密", category: 1, symbolSize: 20 },
// { id: "tianma", name: "天马微电子", category: 1, symbolSize: 20 },
// { id: "desay", name: "德赛电池", category: 1, symbolSize: 20 },
// { id: "auspicious-sound", name: "瑞声科技", category: 1, symbolSize: 20 },
// { id: "goertek", name: "歌尔股份", category: 1, symbolSize: 20 },
// { id: "sony-semiconductor", name: "索尼半导体", category: 1, symbolSize: 20 },
// { id: "ibm", name: "IBM", category: 1, symbolSize: 20 },
// { id: "lg-innotek", name: "LG伊诺特", category: 1, symbolSize: 20 },
// { id: "micron", name: "美光科技", category: 1, symbolSize: 20 }
// { id: "nokia", name: "诺基亚", category: 1, symbolSize: 20 },
// { id: "google", name: "谷歌", category: 1, symbolSize: 20 },
// { id: "vodafone", name: "沃达丰", category: 1, symbolSize: 20 },
// { id: "microsoft", name: "微软", category: 1, symbolSize: 20 },
// { id: "china-unicom", name: "中国联通", category: 1, symbolSize: 20 },
// { id: "china-mobile", name: "中国移动", category: 1, symbolSize: 20 },
// { id: "tsmc", name: "台积电", category: 1, symbolSize: 20 }
// { id: "orange", name: "Orange", category: 1, symbolSize: 20 },
// { id: "germany-telecom", name: "德国电信", category: 1, symbolSize: 20 },
// { id: "byd-electronics", name: "比亚迪电子", category: 1, symbolSize: 20 },
// { id: "boe", name: "京东方", category: 1, symbolSize: 20 },
// { id: "dali-optical", name: "大力光", category: 1, symbolSize: 20 },
// { id: "lg-display", name: "LG显示", category: 1, symbolSize: 20 },
// { id: "sunny-optical", name: "舜宇光学", category: 1, symbolSize: 20 }
],
links: [
{ source: "huawei", target: "huawei-cloud" },
{ source: "huawei", target: "huawei-digital-energy" },
{ source: "huawei", target: "huawei-intelligent-car" },
{ source: "huawei", target: "qualcomm" },
{ source: "huawei", target: "intel" },
{ source: "huawei", target: "mediatek" },
{ source: "huawei", target: "shenghongda" },
{ source: "huawei", target: "foxconn" }
// { source: "huawei", target: "luxshare" },
// { source: "huawei", target: "tianma" },
// { source: "huawei", target: "desay" },
// { source: "huawei", target: "auspicious-sound" },
// { source: "huawei", target: "goertek" },
// { source: "huawei", target: "sony-semiconductor" },
// { source: "huawei", target: "ibm" },
// { source: "huawei", target: "lg-innotek" },
// { source: "huawei", target: "micron" }
// { source: "huawei", target: "nokia" },
// { source: "huawei", target: "google" },
// { source: "huawei", target: "vodafone" },
// { source: "huawei", target: "microsoft" },
// { source: "huawei", target: "china-unicom" },
// { source: "huawei", target: "china-mobile" },
// { source: "huawei", target: "tsmc" }
// { source: "huawei", target: "orange" },
// { source: "huawei", target: "germany-telecom" },
// { source: "huawei", target: "byd-electronics" },
// { source: "huawei", target: "boe" },
// { source: "huawei", target: "dali-optical" },
// { source: "huawei", target: "lg-display" },
// { source: "huawei", target: "sunny-optical" }
],
categories: [{ name: "子业务" }, { name: "合作商" }]
};
const chartRef = ref(null);
onMounted(() => {
const chart = echarts.init(chartRef.value);
const option = {
title: { text: "", left: "center" },
tooltip: {},
legend: {
data: graphData.categories.map(item => item.name),
left: "left"
},
series: [
{
type: "graph",
layout: "force", // 力导向布局
force: {
repulsion: 1000, // 节点排斥力
edgeLength: [50, 200] // 边长度范围
},
data: graphData.nodes,
links: graphData.links,
categories: graphData.categories,
roam: true, // 支持缩放、平移
label: {
show: true,
fontSize: 12
},
edgeSymbol: ["arrow", "none"], // 边的箭头
edgeSymbolSize: [8, 50],
itemStyle: {
color: "rgba(5, 95, 194, 1)"
// borderColor: "red",
// borderWidth: 1
},
lineStyle: {
color: "rgba(174, 214, 255, 1)",
width: 2,
opacity: 0.5
},
emphasis: {
focus: "adjacency",
lineStyle: {
width: 2
}
}
}
]
};
chart.setOption(option);
// 窗口resize时自适应
window.addEventListener("resize", () => chart.resize());
});
</script>
<style scoped>
.chart-container {
width: 100%;
height: 600px;
background-color: #fff; /* 深色背景，模拟原图风格 */
}
</style>
src/views/overView/component/ResourceSupport.vue
浏览文件 @ 6ec1e289
<!-- 中M博弈概览页 -->
<!-- 中M博弈资源支撑 -->
<template>
<div class="resource-box">
<img class="title-img" src="@/assets/images/bg/概览页模块标题2.png"></img>
<DivideHeader class="divide1" :titleText="'中美博弈资源支撑'"></DivideHeader>
<div style="margin-top: 20px;height: 450px;display: flex;">
<div class="resource-content" style="width: 45%; display: block;">
<div class="resource-content" style="width: 47.5%; display: block;">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">中美博弈资源新闻动态</div>
<div class="item-header-right"> 更多 +</div>
</div>
<div class="item-header-divider"></div>
<div style=" height: 400px;overflow: auto;">
<el-timeline style="max-width: 600px;padding: 25px; ">
<el-timeline-item placement="top" v-for="(activity, index) in newsData" :key="index" :icon="activity.icon"
type="primary" :hollow="true" :timestamp="activity.time">
<div class="row">
<div class="content-wrapper">
{{ activity.content }}
</div>
<img :src="activity.image" />
</div>
</el-timeline-item>
</el-timeline>
</div>
</div>
<div class="resource-content" style="width: 45%;margin-left: 5%;">
<div class="resource-content" style="width: 47.5%;margin-left: 5%;">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">创新主体排名</div>
<div class="item-header-text" style="width: 130px;">创新主体排名</div>
<el-radio-group v-model="InnovationRankingBtn" size="small" @change="handleInnovationRankingBtn">
<el-radio-button value="enterprise" border>科技企业
</el-radio-button>
<el-radio-button value="lab" border>国家重点实验室</el-radio-button>
<el-radio-button value="university" border>研究型大学
</el-radio-button>
<el-radio-button value="contractor" border>国防承包商</el-radio-button>
</el-radio-group>
</div>
<div class="item-header-divider"></div>
<el-table :data="InnovationRanking" stripe style="width: 100%;padding: 5px 25px;"
:header-cell-style="headerCellStyle">
<el-table-column prop="name" label="创新主体" width="100" />
<el-table-column prop="markValue" align="right">
<template #header>
<div class="custom-header">
<div class="label">市值</div>
<div class="unit">（亿元）</div>
</div>
</template>
</el-table-column>
<el-table-column label="所属领域" width="180">
<template #default="scope">
<div style="display: flex; align-items: center; gap: 5px">
<el-tag v-for="tag in scope.row.area" :key="tag" :type="tag === '人工智能'
? 'primary'
: TAGTYPE[Math.floor(Math.random() * 5)]
">{{ tag }}</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="创新实力">
<template #default="scope">
<div style="display: flex; align-items: center">
<el-progress :percentage="scope.row.value * 100" :show-text="false" style="width: 50px;"
:status="getStatus(scope.row.value)" />
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div style="margin-top: 20px;height: 450px;display: flex;">
<div class="resource-content" style="width: 45%; display: block;">
<div class="resource-content" style="width: 47.5%; display: block;">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">研发投入情况</div>
......@@ -37,7 +92,7 @@
</div>
</div>
<div class="resource-content" style="width: 45%;margin-left: 5%;">
<div class="resource-content" style="width: 47.5%;margin-left: 5%;">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">研发投入领域</div>
......@@ -51,7 +106,7 @@
</div>
<div style="margin-top: 20px;height: 450px;display: flex;">
<div class="resource-content" style="width: 45%; display: block;">
<div class="resource-content" style="width: 47.5%; display: block;">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">专利申请情况</div>
......@@ -62,7 +117,7 @@
</div>
</div>
<div class="resource-content" style="width: 45%;margin-left: 5%;">
<div class="resource-content" style="width: 47.5%;margin-left: 5%;">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">论文发表情况</div>
......@@ -82,6 +137,8 @@
<script setup>
import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts";
import DivideHeader from "@/components/DivideHeader.vue";
import { TAGTYPE } from "@/public/constant";
import getBarChart2 from '../js/barChart2.js'
import radarChart2 from '../js/radarChart2.js'
import getMultiLineChart1 from "../js/multiLineChart1.js";
......@@ -91,6 +148,83 @@ const names = ['Jan', 'Feb', 'Mar', 'Apr', 'May']
const data1 = [120, 200, 150, 80, 70]
const data2 = [90, 230, 180, 110, 100]
//博弈资源新闻动态
const newsData = ref([
{
time: ' 2025-07-31',
content: '美商务部发布指南，警告全球企业使用华为异腾芯片可能违反美国出口管制。意在限制中国AI产业发展，阻碍其获得先进算力。',
image: '/testData/newsData1.jpg',
},
{
time: '2025-07-30',
content: '美商务部持续对多种中国产品发起“双反”(反倾销、反补贴)调查并作出裁决，涉及产品从工业原料到日常用品，且裁定的税率普遍较高。',
image: '/testData/newsData1.jpg',
}, {
time: '2025-07-30',
content: '美商务部进一步收紧对华先进半导体出口管制，将更多中国实体列入“实体清单”限制14纳米及以下先进芯片、DRAM等对华出口。',
image: '/testData/newsData1.jpg',
}, {
time: '2025-07-27',
content: '美商务部发起第三次反倾销和反补贴日落复审调査。',
image: '/testData/newsData1.jpg',
}
])
function headerCellStyle() {
return {
color: 'rgba(59, 65, 75, 1)',
fontSize: '16px',
fontWeight: 700,
};
}
//创新主体排名
const InnovationRanking = ref([
{
name: '微软(Microsoft)',
markValue: '3200',
area: ['人工智能', '先进制造'],
value: 0.9
}, {
name: '苹果(Apple)',
markValue: '1600',
area: ['人工智能'],
value: 0.8
}, {
name: '英伟达(NVIDIA)',
markValue: '1200',
area: ['人工智能'],
value: 0.7
}, {
name: '谷歌(Google)',
markValue: '800',
area: ['人工智能'],
value: 0.5
}, {
name: 'Meta (Facebook)',
markValue: '900',
area: ['人工智能'],
value: 0.2
}
])
// 进度条状态
const getStatus = _percent => {
const percent = _percent * 100;
if (percent >= 90) {
return "exception";
} else if (percent >= 50) {
return "warning";
} else {
return "success";
}
};
//科技主体排名按钮
const InnovationRankingBtn = ref('enterprise')
function handleInnovationRankingBtn() {
}
//专利申请情况
const chart5Data = ref({
title: [
......@@ -145,6 +279,11 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
.divide1 {
margin-top: 64px;
margin-bottom: 36px;
}
.resource-box {
height: 1550px;
}
......@@ -173,6 +312,44 @@ onMounted(() => {
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.row {
display: flex;
/* 横向排列 */
align-items: center;
/* 垂直居中（可选） */
width: 100%;
/* 和外层容器同宽 */
}
.content-wrapper {
flex: 1 1 auto;
/* 占满剩余空间，把图片顶到最右 */
/* 文字过长时自动换行 */
word-break: break-all;
}
.row img {
width: 96px;
height: 72px;
margin-left: 8px;
/* 图片与文字间距，可删 */
flex-shrink: 0;
/* 防止图片被压缩 */
}
:deep(.el-timeline-item__timestamp.is-top) {
color: rgba(59, 65, 75, 1);
font-size: 16px;
font-weight: 700;
line-height: 24px;
text-align: left;
}
:deep(.el-timeline-item__node.is-hollow) {
border-width: 4px
}
.item-header {
height: 48px;
width: 100%;
......@@ -226,6 +403,24 @@ onMounted(() => {
}
}
.custom-header {
text-align: center;
line-height: 1.3;
}
.custom-header .label {
color: rgba(59, 65, 75, 1);
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.custom-header .unit {
font-size: 12px;
color: #909399;
}
.item-header-divider {
/* 矩形 249 */
width: 100%;
......
src/views/overView/component/Thematicanalysis.vue
浏览文件 @ 6ec1e289
<!-- 中M博弈概览页 -->
<!-- 打压遏制ts分析 -->
<template>
<div class="thematic-box">
<div class="title-text">中美博弈专题分析</div>
<img class="title-img" src="@/assets/images/bg/概览页模块标题.png"></img>
<DivideHeader class="divide" :titleText="'打压遏制态势分析'"></DivideHeader>
<div class="thematic-content">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
......@@ -12,11 +12,13 @@
</div>
<div class="item-header-divider"></div>
<div style="display: flex;height: calc(100% - 60px);">
<div class="thematic-btn-left" @click="changeBtn('timwLine', 'left')">
<!-- <div class="thematic-btn-left" @click="changeBtn('timwLine', 'left')">
<img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-left.png"></img>
</div>
<div class="timeLine-box">
</div> -->
<Timeline :data="course" text-key="title" id-key="seq" @click-card="showDetail" />
<!-- <div class="timeLine-box">
<div style="height: calc(50% - 8px);display: flex">
<div v-for="(item, index) in timeLineOddIndexItems" class="time-item-box">
{{ item.titlle }}
......@@ -28,7 +30,7 @@
{{ item.titlle }}
</div>
</div>
</div>
</div> -->
<div class="thematic-btn-right" @click="changeBtn('right')">
<img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-right.png"></img>
......@@ -84,7 +86,7 @@
</div>
<div style="margin-top: 20px;height: 450px;display: flex;">
<div class="thematic-content" style="width: 45%; display: block;">
<div class="thematic-content" style="width: 47.5%; display: block;">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">打压遏制强度变化</div>
......@@ -96,7 +98,7 @@
</div>
</div>
<div class="thematic-content" style="width: 45%;margin-left: 5%;">
<div class="thematic-content" style="width: 47.5%;margin-left: 5%;">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">打压遏制强度变化</div>
......@@ -117,36 +119,69 @@
<script setup>
import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts";
import DivideHeader from "@/components/DivideHeader.vue";
import Timeline from '../component/Timeline.vue'
import getBarChart from '../js/barChart.js'
import radarChart from '../js/radarChart.js'
const timeLine = ref([
const course = ref([
{
time: '2025年1月',
titlle: '《AI扩散暂行最终规则》发布0',
title: '《AI扩散暂行最终规则》发布',
content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
},
{
time: '2025年1月',
titlle: '《AI扩散暂行最终规则》发布1',
title: '特朗普宣布撤销拜登AI规则',
content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
},
{
time: '2025年1月',
titlle: '特朗普签署EO 143202',
title: '特朗普签署EO 143202',
content: '特朗普政府宣布撤销拜登AI规则，计划'
},
{
time: '2025年1月',
title: '中国网信办约谈英伟达',
content: '中国网信办约谈英伟达，要求就H20算力芯片漏洞后门安全风险问题进行说明。'
},
{
time: '2025年7月23日',
title: '英伟达H20发放出口许可证',
content: '美国商务部为4月份被实质禁售的英伟达H20发放出口许可证。'
},
{
time: '2025年1月',
title: '《AI扩散暂行最终规则》发布',
content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
},
{
time: '2025年1月',
titlle: '《AI扩散暂行最终规则》发布3',
title: '特朗普宣布撤销拜登AI规则',
content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
},
{
time: '2025年1月',
title: '特朗普签署EO 143202',
content: '特朗普政府宣布撤销拜登AI规则，计划'
},
{
time: '2025年1月',
title: '中国网信办约谈英伟达',
content: '中国网信办约谈英伟达，要求就H20算力芯片漏洞后门安全风险问题进行说明。'
},
{
time: '2025年7月23日',
titlle: '《AI扩散暂行最终规则》发布4',
content: '拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。'
title: '英伟达H20发放出口许可证',
content: '美国商务部为4月份被实质禁售的英伟达H20发放出口许可证。'
},
])
function showDetail(item) {
console.log('点击了：', item);
}
// 过滤出奇数下标（1,3,5...）
const timeLineOddIndexItems = computed(() =>
timeLine.value.filter((_, idx) => idx % 2 === 1)
......@@ -344,6 +379,13 @@ onMounted(() => {
.thematic-box {
height: 1500px;
.divide {
width: 100%;
margin: 0 auto;
margin-top: 52px;
margin-bottom: 36px;
}
}
.title-text {
......@@ -370,6 +412,8 @@ onMounted(() => {
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.item-header {
height: 48px;
width: 100%;
......
src/views/overView/component/Timeline.vue 0 → 100644
浏览文件 @ 6ec1e289
<template>
<div class="timeline-wrapper">
<button class="arrow left" :disabled="index <= 0" @click="index--">
&lt;
</button>
<div class="timeline-box">
<div class="line"></div>
<div v-for="(item, i) in showList" :key="item[idKey]" class="node" :style="leftOffset(i)">
<div class="node" :style="leftOffset(i)">
<!-- 圆环 -->
<div class="dot" :class="linePos(i, flip)"></div>
<!-- 卡片：放到线右侧 -->
<div class="card" :class="[cardPos(i, flip), 'right-side']" @click="$emit('click-card', item)">
<div class="title">
{{ item.time }}
</div>
<div class="name">
{{ item.name }}
</div>
<div class="content">
{{ item.content }}
</div>
</div>
</div>
</div>
</div>
<button class="arrow right" :disabled="index >= total - 5" @click="index++">
&gt;
</button>
</div>
</template>
<script>
export default {
name: 'TimeLine',
props: {
data: { // 父组件传入的数组
type: Array,
required: true
},
textKey: { // 要显示的文本字段
type: String,
default: 'text'
},
idKey: { // 唯一标识字段
type: String,
default: 'id'
}
},
data() {
return { index: 0 };
},
computed: {
total() {
return this.data.length;
},
showList() {
return this.data.slice(this.index, this.index + 5);
},
flip() { return this.index % 2 === 1; }
},
methods: {
leftOffset(i) {
return { left: `${(i * 100) / 5}%` };
},
/* 上下层翻转（保留上次逻辑） */
cardPos(i, flip = false) {
return (i % 2) ^ flip ? 'down' : 'up';
},
/* 线延伸方向 = 卡片出现方向 */
linePos(i, flip = false) {
return this.cardPos(i, flip); // up / down
}
}
};
</script>
<style scoped>
/* 样式与之前完全一致，不再重复 */
.timeline-wrapper {
display: flex;
align-items: center;
width: 100%;
position: relative;
padding: 0 40px;
box-sizing: border-box;
}
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid #dcdfe6;
background: #fff;
cursor: pointer;
z-index: 10;
}
.arrow:disabled {
color: #c0c4cc;
cursor: not-allowed;
}
.left {
left: 0;
}
.right {
right: 0;
}
.timeline-box {
flex: 1;
height: 100%;
position: relative;
}
.line {
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 6px;
background-image: url("@/assets/images/bg/timeLine-bg.jpg");
transform: translateY(-50%);
background-size: auto 100%;
}
.node {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
/* ===== 圆环基础 ===== */
.dot {
width: 14px;
height: 14px;
border-radius: 50%;
border: 3px solid #409eff;
background: #fff;
position: relative;
margin: 0 auto;
z-index: 2;
}
/* ===== 延伸线 ===== */
.dot::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-1px);
/* 居中细线 */
width: 1px;
background: #409eff;
}
/* 向上节点：线往下伸 */
.dot.up::after {
bottom: 100%;
height: 120px;
/* 圆环底部 → 卡片顶 */
}
/* 向下节点：线往上伸 */
.dot.down::after {
top: 100%;
height: 120px;
}
.card {
position: absolute;
height: 120px;
width: 15vw;
padding: 8px 12px;
text-align: center;
cursor: pointer;
font-size: 14px;
}
.title {
color: rgba(5, 95, 194, 1);
font-size: 18px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: justify;
}
.name {
color: var(----80, rgba(59, 65, 75, 1));
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: justify;
}
.content {}
.card.up {
bottom: 20px;
}
.card.down {
top: 20px;
}
</style>
\ No newline at end of file
src/views/overView/component/strengthComparison.vue
浏览文件 @ 6ec1e289
<!-- 中M博弈概览页 -->
<!-- 中M科技实力对比 -->
<template>
<div class="resource-box">
<img class="title-img" src="@/assets/images/bg/概览页模块标题3.png"></img>
<DivideHeader class="divide1" :titleText="'中美科技实力对比'"></DivideHeader>
<div style="margin-top: 20px;height: 450px;display: flex;">
<div class="resource-content" style="width:100%; display: flex;">
......@@ -49,6 +48,7 @@
<script setup>
import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts";
import DivideHeader from "@/components/DivideHeader.vue";
import radarChart3 from '../js/radarChart3.js'
......@@ -94,6 +94,11 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
.divide1 {
margin-top: 64px;
margin-bottom: 36px;
}
/* ========== 一行两个 ========== */
.progress-row {
display: flex;
......
src/views/overView/index.vue
浏览文件 @ 6ec1e289
......@@ -377,7 +377,7 @@ onMounted(() => { });
width: 100%;
height: 100%;
overflow: auto;
padding: 0 160px;
padding: 0 10%;
.title-text {
font-size: 32px;
......
src/views/writtingAsstaint/index.vue
浏览文件 @ 6ec1e289
......@@ -16,7 +16,8 @@
</div>
<div class="btn" @click="handleSwitchMode">
<div class="icon">
<img src="./assets/images/preview-icon.png" alt="" />
<img v-if="isEditMode" src="./assets/images/preview-icon.png" alt="" />
<img v-else src="./assets/images/edit.png" alt="" />
</div>
<div class="text">{{ isEditMode ? "预览" : "编辑" }}</div>
</div>
......@@ -92,6 +93,62 @@
<div class="submit-text">生成报文</div>
</div>
</div>
<!-- <div class="process-box">
<div class="back">
{{ "< 返回" }}
</div>
<div class="process-main-box">
<div class="analysis-box">
<div class="analysis-header">
<div class="icon">
<img src="./assets/images/right-arrow.png" alt="" />
</div>
<div class="text">{{ "任务分析：" }}</div>
</div>
<div class="analysis-content">
{{
"用户需求属于态势要图制图任务，需要围绕“伊以冲突”主题生成关键词、搜索相关新闻、抽取并聚类事件、获取地理位置信息，最终完成事件和地点的可视化标绘"
}}
</div>
</div>
<div class="steps-box">
<div class="steps-header">
<div class="icon">
<img src="./assets/images/right-arrow.png" alt="" />
</div>
<div class="text">{{ "执行步骤：" }}</div>
</div>
<div class="steps-content">
<div class="steps" v-for="(step, index) in steps" :key="index">
<div class="steps-id">{{ step.id }}</div>
<div class="steps-content">{{ step.content }}</div>
</div>
</div>
</div>
<div class="doing-box">
{{ "正在执行步骤1/7:根据制图主题生成关键词" }}
</div>
<div class="tool-box">
<div class="tool-header">{{ '工具调用' }}</div>
<div class="tool-main"></div>
</div>
</div>
<div class="process-tips-box">
<div class="tips-icon">
<img src="./assets/images/tips-icon.png" alt="" />
</div>
<div class="tips-text">内容由AI生成，无法确保真实准确，仅供参考</div>
</div>
<div class="process-footer-box">
<div class="footer-left">
{{ "报文生成中..." }}
</div>
<div class="footer-right">
<div class="icon"></div>
<div class="text">{{ "停止" }}</div>
</div>
</div>
</div> -->
<div class="main-box">
<div v-if="isEditMode" class="edit-panel">
<v-md-editor
......@@ -127,6 +184,37 @@ VMdEditor.use(vuepressTheme, {
Prism
});
const steps = [
{
id: 1,
content: "111111111111111111111111111"
},
{
id: 2,
content: "111111111111111111111111111"
},
{
id: 3,
content: "111111111111111111111111111222222222222222222222222222222222233333333333333333333333333"
},
{
id: 4,
content: "111111111111111111111111111"
},
{
id: 5,
content: "111111111111111111111111111"
},
{
id: 6,
content: "111111111111111111111111111"
},
{
id: 7,
content: "111111111111111111111111111"
}
];
const isEditMode = ref(false);
const handleSwitchMode = () => {
......@@ -162,9 +250,13 @@ const { renderedContent, updateContent } = useMarkdownStream();
const reportContent = ref("");
const curTempTitle = ref("法案");
const getStreamChat = async (search, inputValue) => {
const params = {
query: "输出一篇报文"
query: writtingTitle.value, // "输出一篇报文"
desc: descText.value,
topic: curTempTitle.value // 政令、智库、法案、清单
};
abortController.value = new AbortController();
......@@ -186,6 +278,10 @@ const getStreamChat = async (search, inputValue) => {
let str = msgData.content;
if (str !== "[DONE]") {
reportContent.value += str;
if (reportContent.value.includes("./out/img")) {
reportContent.value = reportContent.value.replaceAll("./out/img", "http://192.168.26.70:8000/out/img");
console.log(111, reportContent.value);
}
updateContent(reportContent.value, scrollContainer.value);
} else {
ElMessage.success("报文生成结束");
......@@ -231,12 +327,20 @@ const tabList = ref([
]);
const tempList = ref([
{
title: "主题报",
desc: "基于特定主题生成各维度的综合分析报告"
title: "法案",
desc: "基于法案内容生成各维度的综合分析报告"
},
{
title: "统计速报",
desc: "基于定期更新的数据源生成各关键指标统计"
title: "智库",
desc: "基于智库内容生成各维度的综合分析报告"
},
{
title: "政令",
desc: "基于政令内容生成各维度的综合分析报告"
},
{
title: "清单",
desc: "基于清单内容生成各维度的综合分析报告"
}
]);
......@@ -244,6 +348,7 @@ const tempActiveIndex = ref(0);
const handleClickTemp = (item, index) => {
tempActiveIndex.value = index;
curTempTitle.value = item.title;
};
// 导出
......@@ -352,6 +457,217 @@ onUnmounted(() => {
.writting-main {
display: flex;
height: calc(100% - 60px);
position: relative;
.process-box {
position: absolute;
left: 0;
top: 0;
width: 520px;
height: 100%;
z-index: 9999;
background: #fff;
.back {
margin-top: 21px;
height: 24px;
line-height: 24px;
margin-left: 22px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
}
.process-main-box {
margin-top: 20px;
margin-left: 22px;
width: 476px;
height: 900px;
// background: orange;
.analysis-box {
.analysis-header {
display: flex;
.icon {
margin-top: 5px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 30px;
line-height: 30px;
font-family: Microsoft YaHei;
color: #333;
font-size: 20px;
font-weight: 700;
margin-left: 5px;
}
}
.analysis-content {
height: 90px;
line-height: 30px;
color: #555;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
text-indent: 32px;
}
}
.steps-box {
margin-top: 20px;
.steps-header {
display: flex;
.icon {
margin-top: 5px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 30px;
line-height: 30px;
font-family: Microsoft YaHei;
color: #333;
font-size: 20px;
font-weight: 700;
margin-left: 5px;
}
}
.steps-content {
max-height: 500px;
width: 100%;
background: skyblue;
overflow-x: hidden;
overflow-y: auto;
.steps {
display: flex;
width: 410px;
margin-left: 40px;
color: #555;
font-family: Microsoft YaHei;
line-height: 35px;
.steps-id {
width: 20px;
font-size: 18px;
font-weight: 700;
}
.steps-content {
font-size: 16px;
font-weight: 400;
width: 430px;
word-wrap: break-word;
}
}
}
}
.doing-box {
height: 40px;
line-height: 40px;
color: #555;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
margin-left: 20px;
}
.tool-box {
width: 440px;
height: 160px;
margin: 10px auto;
background: #f6f9fe;
border-radius: 10px;
.tool-header {
height: 30px;
line-height: 30px;
margin-left: 20px;
color: var(--color-main-active);
}
.tool-main {
height: 110px;
width: 400px;
margin: 0 auto;
background: #fff;
}
}
}
.process-tips-box {
position: absolute;
left: 22px;
bottom: 81px;
height: 22px;
display: flex;
.tips-icon {
width: 14px;
height: 16px;
margin-top: 3px;
img {
width: 100%;
height: 100%;
}
}
.tips-text {
margin-left: 8px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
.process-footer-box {
height: 36px;
display: flex;
position: absolute;
left: 22px;
bottom: 29px;
.footer-left {
width: 348px;
height: 36px;
border-radius: 4px;
background: rgba(234, 236, 238, 1);
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
text-align: center;
line-height: 36px;
}
.footer-right {
margin-left: 8px;
display: flex;
width: 120px;
height: 36px;
box-sizing: border-box;
border: 1px solid var(--color-main-active);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
justify-content: center;
align-items: center;
gap: 8px;
cursor: pointer;
.icon {
width: 8px;
height: 8px;
border-radius: 2px;
background: var(--color-main-active);
}
.text {
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
}
.sider {
width: 520px;
box-sizing: border-box;
......@@ -411,10 +727,10 @@ onUnmounted(() => {
}
.template-box {
margin-top: 19px;
height: 120px;
height: 260px;
display: flex;
flex-wrap: wrap;
gap: 16px;
.template {
width: 230px;
height: 120px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论