Skip to content

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

GJ概览样式完善

上级 10b405e6
隐藏空白字符变更
内嵌 并排
正在显示 包含 183 行增加 和 47 行删除
src/views/gjOverView/component/AdvantagesAnalysis.vue
浏览文件 @ d141161f
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
</div> </div>
<div class="chart-box"> <div class="chart-box">
<div class="item-header"> <div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img> <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-radar.png"></img>
<div class="item-header-text">产业能力对比</div> <div class="item-header-text">产业能力对比</div>
<div class="item-header-btn"> <div class="item-header-btn">
查看数据源 > 查看数据源 >
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
</div> </div>
<div class="divider"></div> <div class="divider"></div>
<div style="display: flex;height: 320px;width: calc(100% - 40px) ;margin: 20px;" id="char9"> <div style="display: flex;height: 320px;width: calc(100%-40px) ;margin: 20px;" id="char9">
</div> </div>
...@@ -101,24 +101,24 @@ const chart8Data = ref({ ...@@ -101,24 +101,24 @@ const chart8Data = ref({
], ],
data: [ data: [
{ {
name: "科技法案", name: "美国",
value: [145, 52, 84, 99, 71, 96, 128, 144, 140, 168, 188, 172] value: [145, 52, 84, 99, 71, 96, 128, 144, 140, 168, 188, 172]
}, },
{ {
name: "出口管制", name: "中国",
value: [6, 3, 4, 6, 11, 5, 2, 14, 16, 27, 28, 44] value: [6, 3, 4, 6, 11, 5, 2, 14, 16, 27, 28, 44]
}, },
{ {
name: "科技政令", name: "日本",
value: [149, 58, 85, 95, 72, 108, 133, 148, 139, 180, 187, 175] value: [149, 58, 85, 95, 72, 108, 133, 148, 139, 180, 187, 125]
}, },
{ {
name: "合作限制", name: "欧盟",
value: [152, 48, 91, 88, 74, 103, 129, 141, 136, 171, 185, 169] value: [152, 48, 91, 88, 74, 103, 129, 141, 136, 171, 185, 19]
}, },
{ {
name: "市场准入", name: "韩国",
value: [138, 61, 77, 105, 68, 112, 135, 159, 147, 183, 192, 178] value: [138, 61, 77, 105, 68, 112, 135, 159, 147, 183, 192, 148]
}, },
{ {
name: "人才限制", name: "人才限制",
...@@ -263,6 +263,11 @@ onMounted(() => { ...@@ -263,6 +263,11 @@ onMounted(() => {
cursor: pointer; cursor: pointer;
margin-right: 27px; margin-right: 27px;
width: 100px; width: 100px;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
letter-spacing: 0px;
text-align: right;
} }
} }
......
src/views/gjOverView/component/MeansAnalysis.vue
浏览文件 @ d141161f
...@@ -79,37 +79,37 @@ const course = ref([ ...@@ -79,37 +79,37 @@ const course = ref([
time: "2025-05-23", time: "2025-05-23",
title: "日本加入对华设备管制联盟", title: "日本加入对华设备管制联盟",
content: "日本经济产业省正式宣布，将23种高性能半导体制造设备纳入出口管制范围，于7月23...", content: "日本经济产业省正式宣布，将23种高性能半导体制造设备纳入出口管制范围，于7月23...",
unit: "1" unit: "日本"
}, },
{ {
time: "2025-05-23", time: "2025-05-23",
title: "中国发起关键原材料反制", title: "中国发起关键原材料反制",
content: "中国商务部、海关总署宣布为维护国家安全和利益，自8月1日起对镓、锗相关物项实施...", content: "中国商务部、海关总署宣布为维护国家安全和利益，自8月1日起对镓、锗相关物项实施...",
unit: "0" unit: "中国"
}, },
{ {
time: "2025-08-19", time: "2025-08-19",
title: "中国突破7nm芯片制造", title: "中国突破7nm芯片制造",
content: "华为开售Mate 60 Pro手机。其搭载的麒麟9000s芯片使用DUV光刻技术制造。", content: "华为开售Mate 60 Pro手机。其搭载的麒麟9000s芯片使用DUV光刻技术制造。",
unit: "0" unit: "中国"
}, },
{ {
time: "2025-08-20", time: "2025-08-20",
title: "中国加速成熟制程产能扩张引发欧美担忧", title: "中国加速成熟制程产能扩张引发欧美担忧",
content: "中国在成熟制程半导体(28nm及以上)的产能正急剧扩张。此举引发美国和欧洲联盟的...", content: "中国在成熟制程半导体(28nm及以上)的产能正急剧扩张。此举引发美国和欧洲联盟的...",
unit: "0" unit: "中国"
}, },
{ {
time: "2025-08-17", time: "2025-08-17",
title: "美国进一步收紧对华AI芯片出口限制", title: "美国进一步收紧对华AI芯片出口限制",
content: "美国商务部工业和安全局(BIS)宣布更新“先进计算芯片规则”，大幅收紧对向中...", content: "美国商务部工业和安全局(BIS)宣布更新“先进计算芯片规则”，大幅收紧对向中...",
unit: "2" unit: "美国"
}, },
{ {
time: "2025-12-21", time: "2025-12-21",
title: "美国调查中国传统芯片产能", title: "美国调查中国传统芯片产能",
content: "美国商务部宣布，将启动一项针对美国关键行业对中国制造的成熟制程依赖程度的调查...", content: "美国商务部宣布，将启动一项针对美国关键行业对中国制造的成熟制程依赖程度的调查...",
unit: "2" unit: "美国"
} }
]); ]);
......
src/views/gjOverView/component/ResourceAnalysis.vue
浏览文件 @ d141161f
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img> <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">科技人才对比分析</div>
<div class="item-header-btn"> <div class="item-header-btn">
<img class="item-header-ibtn-con" src="@/assets/images/icon/header-btn.png"></img>
数据来源：美国某某发展基金会 数据来源：美国某某发展基金会
</div> </div>
</div> </div>
...@@ -30,6 +31,7 @@ ...@@ -30,6 +31,7 @@
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img> <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">科研投入对比分析</div>
<div class="item-header-btn"> <div class="item-header-btn">
<img class="item-header-ibtn-con" src="@/assets/images/icon/header-btn.png"></img>
数据来源：美国某某发展基金会 数据来源：美国某某发展基金会
</div> </div>
...@@ -53,6 +55,7 @@ ...@@ -53,6 +55,7 @@
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img> <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">创新主体对比分析</div>
<div class="item-header-btn"> <div class="item-header-btn">
<img class="item-header-icon" src="@/assets/images/icon/header-btn.png"></img>
数据来源：美国某某发展基金会 数据来源：美国某某发展基金会
</div> </div>
</div> </div>
...@@ -70,6 +73,7 @@ ...@@ -70,6 +73,7 @@
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img> <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">科学数据对比分析</div>
<div class="item-header-btn"> <div class="item-header-btn">
<img class="item-header-ibtn-con" src="@/assets/images/icon/header-btn.png"></img>
数据来源：美国某某发展基金会 数据来源：美国某某发展基金会
</div> </div>
...@@ -81,9 +85,9 @@ ...@@ -81,9 +85,9 @@
<div style="width: 50%;padding-top: 50px;"> <div style="width: 50%;padding-top: 50px;">
<div v-for="value in radar2Data" class="radar2Data-line"> <div v-for="value in radar2Data" class="radar2Data-line">
<div class="radar2Data-circle" :style="{ backgroundColor: value.color }"></div> <div class="radar2Data-circle" :style="{ backgroundColor: value.color }"></div>
<div style=" width: 70px;margin: 0 7px">{{ value.name }}</div> <div style=" width: 40px;margin: 0 7px">{{ value.name }}</div>
<div style="width: calc(100%-150px) ;"> <el-progress :percentage="value.percent" :color="value.color" <div style="width: calc(100% - 150px) ;padding: 10px;"> <el-progress :percentage="value.percent"
:show-text="false" /></div> :color="value.color" :show-text="false" /></div>
<div style=" width: 70px;text-align: right;">{{ value.percent < 50 ? '低依赖' : value.percent < 80 <div style=" width: 70px;text-align: right;">{{ value.percent < 50 ? '低依赖' : value.percent < 80
? '中度依赖' : '高度依赖' }} </div> ? '中度依赖' : '高度依赖' }} </div>
</div> </div>
...@@ -189,6 +193,7 @@ onMounted(() => { ...@@ -189,6 +193,7 @@ onMounted(() => {
.thematic-box { .thematic-box {
margin-top: 36px; margin-top: 36px;
height: 1050px; height: 1050px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 1); border: 1px solid rgba(255, 255, 255, 1);
border-radius: var(---, 10px); border-radius: var(---, 10px);
...@@ -282,6 +287,7 @@ onMounted(() => { ...@@ -282,6 +287,7 @@ onMounted(() => {
line-height: 48px; line-height: 48px;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center;
.item-header-icon { .item-header-icon {
width: 20px; width: 20px;
...@@ -290,7 +296,7 @@ onMounted(() => { ...@@ -290,7 +296,7 @@ onMounted(() => {
} }
.item-header-text { .item-header-text {
width: calc(100% - 170px); width: 165px;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
line-height: 26px; line-height: 26px;
...@@ -303,9 +309,23 @@ onMounted(() => { ...@@ -303,9 +309,23 @@ onMounted(() => {
} }
.item-header-btn { .item-header-btn {
display: flex;
color: rgba(132, 136, 142, 1); color: rgba(132, 136, 142, 1);
margin-right: 27px;
width: 350px; width: calc(100% - 210px);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
letter-spacing: 0px;
text-align: right;
}
.item-header-ibtn-con {
width: 16px;
height: 16px;
margin-top: 15px;
} }
} }
......
src/views/gjOverView/component/Timeline.vue
浏览文件 @ d141161f
...@@ -7,12 +7,26 @@ ...@@ -7,12 +7,26 @@
<!-- 一次性渲染全部节点 --> <!-- 一次性渲染全部节点 -->
<div v-for="(item, i) in data" :key="item[idKey]" class="node" :style="leftStyle(i)"> <div v-for="(item, i) in data" :key="item[idKey]" class="node" :style="leftStyle(i)">
<!-- 圆环 --> <!-- 圆环 -->
<div class="dot" :class="linePos(item)" /> <div class="dot" :class="linePos(item)" :style="{ '--i': item.unit === '中国' ? ' #E29697' : '#69A0DA' }" />
<div class="dot">
<div class="big-circle" :style="{
backgroundColor: item.unit === '中国' ? ' #CF4F51' : '#CDDFF3'
}">
<div class="small-circle" :style="{
backgroundColor: item.unit === '中国' ? ' #E29697' : '#69A0DA'
}"></div>
</div>
</div>
<!-- 卡片 --> <!-- 卡片 -->
<div class="card" :class="[cardPos(item), 'right-side']" :style="widthStyle()" <div class="card" :class="[cardPos(item), 'right-side']" :style="widthStyle()"
@click="$emit('click-card', item)"> @click="$emit('click-card', item)">
<img :src="`/icon/${item.unit}.png`" class="icon"></img>
<div class="title">{{ item.time }}</div> <div class="title">{{ item.time }}</div>
<div class="title">{{ item.title }}</div> <div class="title" :style="{
color: item.unit === '中国' ? ' #CF4F51' : ''
}">{{ item.title }}</div>
<div class="content">{{ item.content }}</div> <div class="content">{{ item.content }}</div>
</div> </div>
</div> </div>
...@@ -40,7 +54,7 @@ export default { ...@@ -40,7 +54,7 @@ export default {
}, },
/* 卡片上下位置：unit=0 -> 下侧，其余 -> 上侧 */ /* 卡片上下位置：unit=0 -> 下侧，其余 -> 上侧 */
cardPos(item) { cardPos(item) {
return item.unit === '0' ? 'down' : 'up'; return item.unit === '中国' ? 'down' : 'up';
}, },
/* 延伸线方向 = 卡片方向 */ /* 延伸线方向 = 卡片方向 */
linePos(item) { linePos(item) {
...@@ -100,6 +114,37 @@ export default { ...@@ -100,6 +114,37 @@ export default {
} }
.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%;
...@@ -107,7 +152,7 @@ export default { ...@@ -107,7 +152,7 @@ export default {
background: #fff; background: #fff;
margin: 0 auto; margin: 0 auto;
position: relative position: relative
} } */
.dot::after { .dot::after {
content: ''; content: '';
...@@ -115,7 +160,8 @@ export default { ...@@ -115,7 +160,8 @@ export default {
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 {
...@@ -141,7 +187,12 @@ export default { ...@@ -141,7 +187,12 @@ export default {
} }
.card.down { .card.down {
top: 20px top: 20px;
}
.icon {
margin-left: -22px;
} }
.title { .title {
......
src/views/gjOverView/index.vue
浏览文件 @ d141161f
...@@ -103,6 +103,7 @@ ...@@ -103,6 +103,7 @@
<MeansAnalysis /> <MeansAnalysis />
<ResourceAnalysis /> <ResourceAnalysis />
<AdvantagesAnalysis /> <AdvantagesAnalysis />
<div style="width: 100%;height: 100px;"></div>
</div> </div>
</div> </div>
</template> </template>
......
src/views/gjOverView/js/barChart.js
浏览文件 @ d141161f
...@@ -49,7 +49,7 @@ const getColumnChart = (nameList, valueList, isPer) => { ...@@ -49,7 +49,7 @@ const getColumnChart = (nameList, valueList, isPer) => {
position: 'inside', position: 'inside',
offset: [0, -70], // 向上顶整个图标高（28 px） offset: [0, -70], // 向上顶整个图标高（28 px）
align: 'center', align: 'center',
formatter: () => '{icon|}', formatter: '{icon|}{txt|}', // 模板
rich: { rich: {
icon: { icon: {
backgroundColor: { image: `/icon/${name}.png` }, backgroundColor: { image: `/icon/${name}.png` },
......
src/views/gjOverView/js/barChart3.js
浏览文件 @ d141161f
...@@ -15,7 +15,7 @@ const getColumnChart = (nameList, series1, series2, isPer) => { ...@@ -15,7 +15,7 @@ const getColumnChart = (nameList, series1, series2, isPer) => {
icon: 'circle', icon: 'circle',
textStyle: { color: '#757B82', fontSize: 15 } textStyle: { color: '#757B82', fontSize: 15 }
}, },
grid: { top: '10%', right: '3%', bottom: '0%', left: '3%', containLabel: true }, grid: { top: '20%', right: '3%', bottom: '0%', left: '3%', containLabel: true },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: nameList, data: nameList,
...@@ -28,12 +28,17 @@ const getColumnChart = (nameList, series1, series2, isPer) => { ...@@ -28,12 +28,17 @@ const getColumnChart = (nameList, series1, series2, isPer) => {
axisLine: { show: false }, axisLine: { show: false },
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { color: '#666' }, axisLabel: { color: '#666' },
splitLine: { show: true, lineStyle: { color: '#ebebeb' } } splitLine: {
show: true, lineStyle: {
type: "dashed",
color: "#E7F3FF"
}
}
}, },
graphic: [{ // 右上角单位 graphic: [{ // 右上角单位
type: 'text', type: 'text',
right: 20, right: 20,
top: 10, top: 40,
style: { text: '单位：万人', font: '14px sans-serif', fill: '#666' } style: { text: '单位：万人', font: '14px sans-serif', fill: '#666' }
}], }],
series: [ series: [
...@@ -43,7 +48,8 @@ const getColumnChart = (nameList, series1, series2, isPer) => { ...@@ -43,7 +48,8 @@ const getColumnChart = (nameList, series1, series2, isPer) => {
stack: 'total', // 堆叠关键 stack: 'total', // 堆叠关键
barWidth: 20, barWidth: 20,
itemStyle: { borderRadius: 0, color: '#0560C3' }, itemStyle: { borderRadius: 0, color: '#0560C3' },
data: series1 data: series1,
}, },
{ {
name: '生物科技', name: '生物科技',
...@@ -83,7 +89,15 @@ const getColumnChart = (nameList, series1, series2, isPer) => { ...@@ -83,7 +89,15 @@ const getColumnChart = (nameList, series1, series2, isPer) => {
stack: 'total', stack: 'total',
barWidth: 20, barWidth: 20,
itemStyle: { borderRadius: 0, color: '#CF4F51' }, itemStyle: { borderRadius: 0, color: '#CF4F51' },
data: series2 data: series2,
label: {
show: true, // 开启显示
position: 'top', // 文字显示位置，这里选择'top'或'bottom'取决于你的需求
formatter: '{c}', // 格式化标签显示，{c}表示系列当前数值
fontSize: 16,
fontWeight: 'bold',
color: 'rgba(5, 95, 194, 1)'
},
} }
] ]
} }
......
src/views/gjOverView/js/multiLineChart2.js
浏览文件 @ d141161f
import * as echarts from "echarts"; import * as echarts from "echarts";
const getMultiLineChart = (dataX, dataY1, dataY2, dataY3, dataY4, dataY5, dataY6) => { const getMultiLineChart = (dataX, dataY1, dataY2, dataY3, dataY4, dataY5) => {
const colors = ['#055FC2', '#14A8A8', '#722FD1', '#FA8C15', '#69B2FF', '#D35E61'] const colors = ['#055FC2', '#CF4F51', '#FF964D', '#14A8A8', '#722FD1']
const names = ['科技法案', '出口管制', '科技政令', '合作限制', '市场准入', '人才限制'] const names = ['美国', '中国', '日本', '欧盟', '韩国']
const dataArr = [dataY1, dataY2, dataY3, dataY4, dataY5, dataY6] const dataArr = [dataY1, dataY2, dataY3, dataY4, dataY5]
const series = dataArr.map((d, i) => ({ const series = dataArr.map((d, i) => ({
name: names[i], name: names[i],
type: 'line', type: 'line',
symbol: 'none', symbol: 'none',
lineStyle: { width: 2, color: colors[i] }, lineStyle: { width: 1, color: colors[i] },
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[i] }, { offset: 0, color: colors[i] },
{ offset: 1, color: 'rgba(255,255,255,0)' } { offset: 1, color: 'rgba(255,255,255,0)' }
]) ])
}, },
// grid: { top: '10%', right: '3%', bottom: '0%', left: '3%', containLabel: true },
data: d, data: d,
emphasis: { focus: 'series' }, emphasis: { focus: 'series' },
// 关键：只在最后一个点显示跟随文字 symbol: 'circle',
symbolSize: (val, params) =>
params.dataIndex === d.length - 1 ? 6 : 0, // 最后一个空心圆 10px
// 空心效果：边框用线的颜色，内部无填充
itemStyle: {
color: 'transparent', // 内部透明
borderColor: colors[i], // 边框跟线同色
borderWidth: 2
},
// 2. 只给最后一个点显文字（可选）
label: { label: {
show: false,
position: 'right',
formatter: (params) =>
params.dataIndex === d.length - 1 ? names[i] : '', // 仅末尾
// 空心效果：边框用线的颜色，内部无填充
itemStyle: {
color: 'transparent', // 内部透明
borderColor: colors[i], // 边框跟线同色
borderWidth: 2
},
color: colors[i],
fontSize: 12,
distance: 8
},
endLabel: {
show: true, show: true,
position: 'end', // 最后一个点右侧 formatter: () => `{icon|}{txt|${names[i]}}`,
formatter: p => `{a|${names[i]}} {b|${names[i]}}`,
rich: { rich: {
a: { color: '#757B82', fontSize: 12, padding: [0, 6, 0, 0] }, icon: {
b: { color: colors[i], fontSize: 12 } backgroundColor: { image: `/icon/${names[i]}2.png` },
width: 18,
height: 18
},
txt: {
padding: [0, 0, 0, 10], // 文字与图标间距
color: colors[i],
fontSize: 14
}
} }
} },
})) }))
return { return {
tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } },
grid: { top: '5%', right: '20%', bottom: '0%', left: '0%', containLabel: true }, grid: { top: '5%', right: '20%', bottom: '0%', left: '0%', containLabel: true },
xAxis: { type: 'category', boundaryGap: false, data: dataX }, xAxis: { type: 'category', boundaryGap: false, data: dataX },
yAxis: { type: 'value', splitLine: { lineStyle: { color: '#ebebeb' } } },
yAxis: {
type: 'value', splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#E7F3FF"
}
},
},
legend: { show: false }, // 隐藏官方 legend legend: { show: false }, // 隐藏官方 legend
color: colors, color: colors,
series series
......
src/views/gjOverView/js/radarChart.js
浏览文件 @ d141161f
...@@ -16,7 +16,7 @@ const getBarChart = (nameList, valueList, isPer) => { ...@@ -16,7 +16,7 @@ const getBarChart = (nameList, valueList, isPer) => {
}, },
radar: { radar: {
radius: '60%', // 关键：缩小整个雷达 radius: '50%', // 关键：缩小整个雷达
center: ['50%', '60%'], // 可选：再往下挪一点，避免图例挤在一起 center: ['50%', '60%'], // 可选：再往下挪一点，避免图例挤在一起
indicator: [ indicator: [
{ name: '能源', max: 6500 }, { name: '能源', max: 6500 },
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论