Skip to content

R
risk-monitor
提交 e8a57e68 authored 作者: 李顺's avatar 李顺
浏览文件
操作

[update]:新增全联盟页面

上级 afc38de7 16a20621
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 405 行增加 和 102 行删除
src/api/aiAnalysis/index.js 0 → 100644
浏览文件 @ e8a57e68
import request from "@/api/request.js";
// 图表解读（流式）
/**
* @param {text}
*/
export function getChartAnalysis(data) {
return request({
method: 'POST',
url: `/aiAnalysis/chart_interpretation`,
data,
})
}
\ No newline at end of file
src/components/SnakeTimeline/index.vue 0 → 100644
浏览文件 @ e8a57e68
差异被折叠。
src/router/modules/ZMGame.js
浏览文件 @ e8a57e68
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
import ZMGame from "@/views/ZMGame/index.vue"; import ZMGame from "@/views/ZMGame/index.vue";
const ZMGameRoutes = [ const ZMGameRoutes = [
//创新主体
{ {
path: "/ZMGame", path: "/ZMGame",
name: "ZMGame", name: "ZMGame",
......
src/router/modules/ZMOverView.js
浏览文件 @ e8a57e68
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
import ZMOverview from "@/views/ZMOverView/index.vue"; import ZMOverview from "@/views/ZMOverView/index.vue";
const ZMOverviewRoutes = [ const ZMOverviewRoutes = [
//创新主体
{ {
path: "/ZMOverView", path: "/ZMOverView",
name: "ZMOverView", name: "ZMOverView",
......
src/views/ZMOverView/commonTitle/comTitle.vue
浏览文件 @ e8a57e68
...@@ -21,11 +21,12 @@ const props = defineProps({ ...@@ -21,11 +21,12 @@ const props = defineProps({
<style scoped lang="scss"> <style scoped lang="scss">
.com-title { .com-title {
width: 100%; width: 1601px;
height: 42px; height: 42px;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 36px; // margin-bottom: 36px;
margin: 0 auto;
.cl1 { .cl1 {
width: 24px; width: 24px;
height: 30px; height: 30px;
......
src/views/ZMOverView/components/fourSuppress/components/addDomain/multiLineChart.js 0 → 100644
浏览文件 @ e8a57e68
import * as echarts from 'echarts';
const getMultiLineChart = (data) => {
// 提取标题和系列数据
// const { title, series } = data;
const title = data.title
const series = data.data
// 动态生成 series 配置
const echartsSeries = series.map((item, index) => ({
name: item.name,
type: 'line',
symbol: 'circle',
symbolSize: 8,
itemStyle: {
color: '#fff', // 图表圆点内部为白色
borderColor: item.color, // 圆点边框为系列颜色
borderWidth: 2
},
lineStyle: {
width: 2,
color: item.color
},
emphasis: {
focus: 'series'
},
data: item.value
}));
return {
color: series.map(item => item.color),
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255, 255, 255, 0.9)',
textStyle: {
color: '#666'
},
extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 4px;'
},
grid: {
top: '15%',
right: '2%',
bottom: '5%',
left: '2%',
containLabel: true
},
legend: {
show: true,
top: 0,
left: 'center',
icon: 'circle',
itemWidth: 12,
itemHeight: 12,
data: series.map(item => ({
name: item.name,
itemStyle: {
color: item.color, // 强制图例使用实心系列颜色
borderWidth: 0
}
})),
textStyle: {
fontFamily: 'Microsoft YaHei',
fontSize: 16,
fontWeight: 400,
lineHeight: 24,
color: 'rgb(95, 101, 108)'
}
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: title,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#999',
fontSize: 12,
margin: 15
}
}
],
yAxis: [
{
type: 'value',
min: 0,
max: 100,
interval: 20,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#999',
fontSize: 12
},
splitLine: {
lineStyle: {
type: 'dashed',
color: '#E0E6F1'
}
}
}
],
series: echartsSeries
};
};
export default getMultiLineChart;
\ No newline at end of file
src/views/ZMOverView/components/fourSuppress/components/allElement/uitls/worldCloudChart.js 0 → 100644
浏览文件 @ e8a57e68
const getWordCloudChart = (data) => {
const option = {
grid: {
left: 0,
top: 0,
right: 0,
bottom: 0,
},
series: [
{
type: "wordCloud",
width: '80%',
height: '80%',
shape: "rect", //
// 其他形状你可以使用形状路径
// 或者自定义路径
// shape: 'circle' // 圆形（默认）
// shape: 'rect' // 矩形
// shape: 'roundRect' // 圆角矩形
// shape: 'triangle' // 三角形
// shape: 'diamond' // 菱形
// shape: 'pentagon' // 五边形
// shape: 'star' // 星形
// shape: 'cardioid' // 心形
gridSize: 15, // 网格大小，影响词间距。
sizeRange: [10, 30], // 定义词云中文字大小的范围
rotationRange: [0, 0],
rotationStep: 15,
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/ZMOverView/components/fourSuppress/index.vue
浏览文件 @ e8a57e68
...@@ -35,16 +35,11 @@ import AddDomain from "./components/addDomain/index.vue"; ...@@ -35,16 +35,11 @@ import AddDomain from "./components/addDomain/index.vue";
import AllUnion from "./components/allUnion/index.vue"; import AllUnion from "./components/allUnion/index.vue";
import AllElement from "./components/allElement/index.vue"; import AllElement from "./components/allElement/index.vue";
const navList = ref([ const navList = ref([{ name: "全政府" }, { name: "全领域" }, { name: "全联盟" }, { name: "全要素" }]);
{ name: "全政府" },
{ name: "全领域" },
{ name: "全联盟" },
{ name: "全要素" }
]);
const activeNav = ref("全政府"); const activeNav = ref("全政府");
const handleNavClick = (name) => { const handleNavClick = name => {
activeNav.value = name; activeNav.value = name;
}; };
</script> </script>
...@@ -52,11 +47,12 @@ const handleNavClick = (name) => { ...@@ -52,11 +47,12 @@ const handleNavClick = (name) => {
<style lang="scss" scoped> <style lang="scss" scoped>
.content-wrapper { .content-wrapper {
width: 1601px; width: 1601px;
height: 2203px; height: auto;
margin: 0 auto; margin: 0 auto;
.main-nav { .main-nav {
width: 100%; width: 1600px;
height: 55px; height: 55px;
// margin: 0 auto;
padding: 4px 5px; padding: 4px 5px;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -89,7 +85,7 @@ const handleNavClick = (name) => { ...@@ -89,7 +85,7 @@ const handleNavClick = (name) => {
} }
span { span {
font-family: 'YouSheBiaoTiHei'; font-family: "YouSheBiaoTiHei";
font-size: 24px; font-size: 24px;
font-weight: 400; font-weight: 400;
line-height: 31px; line-height: 31px;
......
src/views/ZMOverView/components/gameProfile/Timeline.vue
浏览文件 @ e8a57e68
<template> <template>
<div class="timeline-wrapper"> <div class="timeline-wrapper">
<button class="arrow left" :disabled="index <= 0" @click="index--"> <button class="arrow left" :disabled="index <= 0" @click="index--">
{{ '<' }} {{ '<' }} </button>
</button>
<div class="timeline-box"> <div class="timeline-box">
<div class="line"></div> <div class="line" style="width:100vw ;" />
<div v-for="(item, i) in showList" :key="item[idKey]" class="node" :style="leftOffset(i)"> <!-- 一次性渲染全部节点 -->
<div class="node" :style="leftOffset(i)"> <div v-for="(item, i) in data" :key="item[idKey]" class="node" :style="leftStyle(i)">
<!-- 圆环 --> <!-- 圆环 -->
<div class="dot" :class="linePos(i, flip)"></div> <div class="dot" :class="linePos(item)" :style="{ '--i': item.unit === '中国' ? ' #E29697' : '#69A0DA' }" />
<!-- 卡片：放到线右侧 --> <div class="dot">
<div class="card" :class="[cardPos(i, flip), 'right-side']" @click="$emit('click-card', item)"> <div class="big-circle" :style="{
backgroundColor: item.unit === '中国' ? ' #CF4F51' : '#CDDFF3'
<div class="time"> }">
{{ item.time }} <div class="small-circle" :style="{
backgroundColor: item.unit === '中国' ? ' #E29697' : '#69A0DA'
}"></div>
</div> </div>
<div class="title">
{{ item.title }}
<img class="item-header-icon" src="@/assets/images/icon/copy.png" style="cursor: pointer;" />
</div>
<div class="content">
{{ item.content }}
</div> </div>
<!-- 卡片 -->
<div class="card" :class="[cardPos(item), 'right-side']" @click="$emit('click-card', item)">
<div style="justify-content: space-between;display: flex;width: 300px;">
<div class="tag">{{ item.tag }}</div>
<img :src="`/icon/${item.unit}.png`" class="icon"></img>
</div> </div>
<div class="title" :style="{
}">{{ item.title }}</div>
<div class="time">{{ item.time }}</div>
<!-- <div class="title" :style="{
color: item.unit === '中国' ? ' #CF4F51' : ''
}">{{ item.title }}</div>
<div class="time">{{ item.time }}</div> -->
<div class="content">{{ item.content }}</div>
</div> </div>
</div> </div>
</div> </div>
<button class="arrow right" :disabled="index >= total - 5" @click="index++"> <button class="arrow right" :disabled="index >= total - 5" @click="index++">
{{ '>' }} {{ '>' }}
</button> </button>
...@@ -39,18 +49,9 @@ ...@@ -39,18 +49,9 @@
export default { export default {
name: 'TimeLine', name: 'TimeLine',
props: { props: {
data: { // 父组件传入的数组 data: { type: Array, required: true },
type: Array, textKey: { type: String, default: 'text' },
required: true idKey: { type: String, default: 'id' }
},
textKey: { // 要显示的文本字段
type: String,
default: 'text'
},
idKey: { // 唯一标识字段
type: String,
default: 'id'
}
}, },
data() { data() {
return { index: 0 }; return { index: 0 };
...@@ -65,37 +66,49 @@ export default { ...@@ -65,37 +66,49 @@ export default {
flip() { return this.index % 2 === 1; } flip() { return this.index % 2 === 1; }
}, },
methods: { methods: {
leftOffset(i) { // widthStyle() {
return { left: `${(i * 100) / 5}%` }; // console.log(`100 / ${this.data.length - 1}}vw`)
// let w = 100 / (this.data.length - 1)
// return { width: ` calc(${w}vw - 20px)` };
// },
/* 水平位置：按索引均匀分布 */
leftStyle(i) {
// let pos = ``
// if (i === 0) {
// pos = 0
// } else {
// this.linePos(this.data[i - 1]) !== this.linePos(this.data[i]) ? pos = { left: `${(i * 270) - 125}px` } : pos = { left: `${(i * 270)}px` }
// }
return { left: `${(i * 327)}px` }
// return pos;
}, },
/* 卡片上下位置：unit=0 -> 下侧，其余 -> 上侧 */
cardPos(item) {
/* 上下层翻转（保留上次逻辑） */ return item.unit === '中国' ? 'down' : 'up';
cardPos(i, flip = false) {
return (i % 2) ^ flip ? 'down' : 'up';
}, },
/* 线延伸方向 = 卡片出现方向 */ /* 延伸线方向 = 卡片方向 */
linePos(i, flip = false) { linePos(item) {
return this.cardPos(i, flip); // up / down return this.cardPos(item);
} }
} }
}; };
</script> </script>
<style scoped> <style scoped>
/* 样式与之前完全一致，不再重复 */ /* 以下样式完全沿用你已有的，无需改动 */
.timeline-wrapper { .timeline-wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
position: relative;
padding: 0 40px; padding: 0 40px;
width: 1500px;
overflow: auto;
} }
.arrow { .arrow {
position: absolute;
top: 170px;
/* 左右切换按钮 */
width: 24px; width: 24px;
height: 48px; height: 48px;
font-size: 24px; font-size: 24px;
...@@ -123,10 +136,21 @@ export default { ...@@ -123,10 +136,21 @@ export default {
border-radius: 4px 0px 0px 4px; border-radius: 4px 0px 0px 4px;
} }
.year-box {
width: 80px;
height: 36px;
border-radius: 4px;
background: #055fc2;
color: #fff;
font-size: 18px;
border: none
}
.timeline-box { .timeline-box {
flex: 1; flex: 1;
height: 100%;
position: relative; position: relative;
margin-left: 15px;
} }
.line { .line {
...@@ -142,101 +166,185 @@ export default { ...@@ -142,101 +166,185 @@ export default {
background-size: auto 100%; background-size: auto 100%;
} }
.node { .node {
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 2; z-index: 2
} }
/* ===== 圆环基础 ===== */
.dot { .dot {
/* 任意尺寸/居中方式随意 */
margin: 0 auto;
position: relative;
display: flex;
justify-content: center;
align-items: center;
/* 仅示例 */
}
.big-circle {
width: 14px;
height: 14px;
border-radius: 50%;
/* 大圆颜色 */
display: flex;
justify-content: center;
align-items: center;
}
.small-circle {
width: 8px;
/* 小圆直径 */
height: 8px;
border-radius: 50%;
/* 小圆颜色 */
}
/* .dot {
width: 14px; width: 14px;
height: 14px; height: 14px;
border-radius: 50%; border-radius: 50%;
border: 3px solid #409eff; border: 3px solid #409eff;
background: #fff; background: #fff;
position: relative;
margin: 0 auto; margin: 0 auto;
z-index: 2; position: relative
} } */
/* ===== 延伸线 ===== */
.dot::after { .dot::after {
content: ''; content: '';
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translateX(-1px); transform: translateX(-1px);
/* 居中细线 */
width: 1px; width: 1px;
background: #409eff; /* background: #409eff */
background: var(--i);
} }
/* 向上节点：线往下伸 */
.dot.up::after { .dot.up::after {
bottom: 100%; bottom: 100%;
height: 165px; height: 240px
/* 圆环底部 → 卡片顶 */
} }
/* 向下节点：线往上伸 */
.dot.down::after { .dot.down::after {
top: 100%; top: 100%;
height: 165px; height: 240px
} }
.card { .card {
position: absolute; position: absolute;
height: 165px; /* 容器 28 */
width: 320px; width: 327px;
padding: 8px 12px; height: 270px;
text-align: left; padding-left: 27px;
cursor: pointer;
font-size: 14px; font-size: 14px;
cursor: pointer
} }
.time { .card.up {
color: rgba(5, 95, 194, 1); bottom: 0px
font-family: Microsoft YaHei; }
font-size: 20px;
font-weight: 700; .card.down {
line-height: 26px; top: 10px;
letter-spacing: 0px; padding-top: 50px
text-align: justify; }
margin-bottom: 10px;
.icon {
width: 28px;
height: 28px;
} }
.title { .title {
/* 美国进一步收紧对华AI芯片出口限制 */
width: 300px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-style: Bold;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
line-height: 26px; line-height: 26px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: justify; text-align: justify;
margin-bottom: 10px;
} }
.content { .tag {
color: rgba(95, 101, 108, 1); /* 容器 1626 */
width: 120px;
height: 28px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
padding: 2px 8px 2px 8px;
border-radius: 4px;
background: rgba(231, 243, 255, 1);
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: justify; text-align: center;
margin-bottom: 4px;
} }
.card.up { .tag1 {
bottom: 20px; /* 容器 1626 */
width: 120px;
height: 28px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
padding: 2px 8px 2px 8px;
border-radius: 4px;
background: rgba(206, 79, 81, 0.1);
color: rgba(206, 79, 81, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
} }
.card.down { .time {
top: 20px; color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
}
.content {
width: 300px;
height: 150px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
} }
</style> </style>
\ No newline at end of file
vite.config.js
浏览文件 @ e8a57e68
差异被折叠。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论