Skip to content

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

底部按钮组

上级 d509b3b8
隐藏空白字符变更
内嵌 并排
正在显示 包含 191 行增加 和 101 行删除
src/views/ZMOverView/components/gameProfile/index.vue
浏览文件 @ 2adaa791
...@@ -6,14 +6,26 @@ ...@@ -6,14 +6,26 @@
<img class="icon" src="../../assets/icons/title-icon1.png" /> <img class="icon" src="../../assets/icons/title-icon1.png" />
<img class="text" src="../../assets/icons/title-text1.png" /> <img class="text" src="../../assets/icons/title-text1.png" />
</div> </div>
<div style="display: flex;height: 650px;width: 100%;"> <div style="display: flex; height: 650px; width: 100%">
<div style="width: 50%;"> <div style="width: 50%">
<div> <div style="display: flex; justify-content: space-between; margin-right: 50px; ine-height: 32px">
数据来源 <div style="display: flex; margin-left: 50px">
数据来源:
<el-select class="select-item" size="default" style="margin-left: 15px; width: 240px; height: 32px">
<el-option label="国家创新指数报告" value="last_year" />
</el-select>
</div>
<div style="display: flex">
<div class="china-icon"></div>
<div class="text">中国</div>
<div class="usa-icon"></div>
<div class="text">美国</div>
</div>
</div> </div>
<div style="width: 672px;height: 486px;" id="char"></div>
<div style="width: 672px; height: 486px; padding-top: 50px" id="char"></div>
</div> </div>
<div style="width: 50%;"> <div style="width: 50%">
<el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all> <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all>
<el-table-column prop="name" label="指标名称" sortable width="350" /> <el-table-column prop="name" label="指标名称" sortable width="350" />
<el-table-column prop="percent" label="中国"> <el-table-column prop="percent" label="中国">
...@@ -29,7 +41,6 @@ ...@@ -29,7 +41,6 @@
<div class="progress-wrapper right" :style="{ '--i': '40px', marginRight: '20px' }"> <div class="progress-wrapper right" :style="{ '--i': '40px', marginRight: '20px' }">
<el-progress :percentage="scope.row.percent[0]" :stroke-width="20" class="right-progress" <el-progress :percentage="scope.row.percent[0]" :stroke-width="20" class="right-progress"
:show-text="false" /> :show-text="false" />
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
...@@ -37,15 +48,24 @@ ...@@ -37,15 +48,24 @@
</div> </div>
</div> </div>
</div> </div>
<div class="card-box" style="margin-top: 16px;"> <div class="card-box" style="margin-top: 16px">
<div class="card-title"> <div class="card-title">
<img class="icon" src="../../assets/icons/title-icon2.png" /> <img class="icon" src="../../assets/icons/title-icon2.png" />
<img class="text" src="../../assets/icons/title-text2.png" /> <img class="text" src="../../assets/icons/title-text2.png" />
</div> </div>
<div style="display: flex;height: 650px;"> <div style="display: flex; height: 650px">
<Timeline :data="course" text-key="title" id-key="seq" /> <Timeline :data="course" text-key="title" id-key="seq" />
</div> </div>
</div> </div>
<div class="btn-box">
<div v-for="(value, index) in btnList" class="btn-item" :style="{
background: value.background
}">
<img :src="`/public/icon/ZM/btn-icon-${index}.png`" style="width: 22px; height: 19px;margin:0 22px" />
{{ value.text }}
<img :src="`/public/icon/ZM/btn-icon-arrow.png`" style="margin-right: 22px; width: 22px; height: 19px" />
</div>
</div>
</div> </div>
</template> </template>
...@@ -54,143 +74,112 @@ import { onMounted, ref, computed } from "vue"; ...@@ -54,143 +74,112 @@ import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import Timeline from "./Timeline.vue"; import Timeline from "./Timeline.vue";
import tableShow from "./tableShow.vue"; import tableShow from "./tableShow.vue";
import radarChart from './radarChart3.js' import radarChart from "./radarChart3.js";
const course = ref([ const course = ref([
{ {
"time": "2025-01-15", time: "2025-01-15",
"title": "《国家量子倡议再授权法案》发布", title: "《国家量子倡议再授权法案》发布",
"content": "计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA的量子研究纳入，旨在加速技术应用与人才发展。", content:
"unit": "美国", "计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA的量子研究纳入，旨在加速技术应用与人才发展。",
"tag": "科技发展战略" unit: "美国",
tag: "科技发展战略"
}, },
{ {
"time": "2025-01-21", time: "2025-01-21",
"title": "将美国实体列入'不可靠实体清单'并采取商品进口限制", title: "将美国实体列入'不可靠实体清单'并采取商品进口限制",
"content": "根据《反外国制裁法》等，将17家美国实体列入清单，禁止其从事与中国有关的进出口与新增投资。", content: "根据《反外国制裁法》等，将17家美国实体列入清单，禁止其从事与中国有关的进出口与新增投资。",
"unit": "中国", unit: "中国",
"tag": "反制措施" tag: "反制措施"
}, },
{ {
"time": "2025-01-21", time: "2025-01-21",
"title": "《国家创新驱动发展战略纲要》发布", title: "《国家创新驱动发展战略纲要》发布",
"content": "纲领性文件，提出了建设世界科技强国的'三步走'战略目标，并系统部署了构建现代产业技术体系等八大战略任务。", content: "纲领性文件，提出了建设世界科技强国的'三步走'战略目标，并系统部署了构建现代产业技术体系等八大战略任务。",
"unit": "中国", unit: "中国",
"tag": "科技发展战略" tag: "科技发展战略"
}, },
{ {
"time": "2025-01-21", time: "2025-01-21",
"title": "中国网信办约谈英伟达", title: "中国网信办约谈英伟达",
"content": "中国网信办约谈英伟达，要求就H20算力芯片漏洞后门安全风险问题进行说明。", content: "中国网信办约谈英伟达，要求就H20算力芯片漏洞后门安全风险问题进行说明。",
"unit": "中国", unit: "中国",
"tag": "反制措施" tag: "反制措施"
}, },
{ {
"time": "2025-05-09", time: "2025-05-09",
"title": "《2026财年中国防授权法案》发布", title: "《2026财年中国防授权法案》发布",
"content": "年度国防预算法案，其中系统性地嵌入了大量对华竞争条款，首次将对外投资审查法律化，并在供应链、实体清单等方面加强限制。", content:
"unit": "美国", "年度国防预算法案，其中系统性地嵌入了大量对华竞争条款，首次将对外投资审查法律化，并在供应链、实体清单等方面加强限制。",
"tag": "对华打压遏制" unit: "美国",
tag: "对华打压遏制"
}, },
{ {
"time": "2025-07-24", time: "2025-07-24",
"title": "白宫'人工智能(AI)行动计划'", title: "白宫'人工智能(AI)行动计划'",
"content": "提出放宽监管、简化环境许可可以加快AI基础设施建设，并涉及促进AI出口、要求联邦采购的AI模型具备中立性等内容。", content: "提出放宽监管、简化环境许可可以加快AI基础设施建设，并涉及促进AI出口、要求联邦采购的AI模型具备中立性等内容。",
"unit": "美国", unit: "美国",
"tag": "科技发展战略" tag: "科技发展战略"
}, },
{ {
"time": "2025-07-24", time: "2025-07-24",
"title": "2026财年《商务、司法、科学及相关支出法案》", title: "2026财年《商务、司法、科学及相关支出法案》",
"content": "法案为商务部工业与安全局(BIS)大幅增加预算，以加强出口管制执法，特别强调审查对华为、中芯国际的出口许可证。", content: "法案为商务部工业与安全局(BIS)大幅增加预算，以加强出口管制执法，特别强调审查对华为、中芯国际的出口许可证。",
"unit": "美国", unit: "美国",
"tag": "对华打压遏制" tag: "对华打压遏制"
} }
]); ]);
const data = ref([
{
name: '竞争潜力',
value: [81.7, 75.4]
}, {
name: '研究人员总数',
value: [81.7, 75.4]
}, {
name: '研发经费投入总额',
value: [81.7, 75.4]
}, {
name: '研发经费占GDP的比重',
value: [81.7, 75.4]
}, {
name: '每万人研发经费投入额',
value: [81.7, 75.4]
}, {
name: '每万研究人员经费投入额',
value: [81.7, 75.4]
}, {
name: '每万人研究人员数',
value: [81.7, 75.4]
}
])
onMounted(() => { onMounted(() => {
const dom = document.getElementById("char");
const dom = document.getElementById('char');
const myChart = echarts.init(dom); const myChart = echarts.init(dom);
// 2. 传入容器，生成配置 // 2. 传入容器，生成配置
const option = radarChart( const option = radarChart(
[ ["创新资源", "知识创造", "企业创新", "创新绩效", "创新环境"],
"创新资源",
"知识创造",
"企业创新",
"创新绩效",
"创新环境"
],
[ [
[4200, 3000, 20000, 35000, 50000, 18000], [4200, 3000, 20000, 35000, 50000, 18000],
[1000, 42000, 32000, 35000, 50000, 18000] [1000, 42000, 32000, 35000, 50000, 18000]
] ]
); );
myChart.setOption(option); myChart.setOption(option);
// setChart(option, "char7"); // setChart(option, "char7");
}); });
const tableData = ref([ const tableData = ref([
{ {
id: 1, id: 1,
name: '综合创新指数', name: "综合创新指数",
percent: [60, 40], percent: [60, 40],
children: [] children: []
}, },
{ {
id: 2, id: 2,
name: '创新资源', name: "创新资源",
percent: [50, 50], percent: [50, 50],
children: [] children: []
}, },
{ {
id: 3, id: 3,
name: '研发人力', name: "研发人力",
percent: [70, 30], percent: [70, 30],
children: [ children: [
{ {
id: 31, id: 31,
name: '每万名就业人员中R&D人员全时当量', name: "每万名就业人员中R&D人员全时当量",
percent: [65, 35], percent: [65, 35],
children: [] children: []
}, },
{ {
id: 32, id: 32,
name: '研究人员占R&D人员比例', name: "研究人员占R&D人员比例",
percent: [55, 45], percent: [55, 45],
children: [] children: []
}, },
{ {
id: 33, id: 33,
name: '科学与工程类毕业生比例', name: "科学与工程类毕业生比例",
percent: [70, 30], percent: [70, 30],
children: [] children: []
} }
...@@ -198,24 +187,24 @@ const tableData = ref([ ...@@ -198,24 +187,24 @@ const tableData = ref([
}, },
{ {
id: 4, id: 4,
name: '研发经费', name: "研发经费",
percent: [60, 40], percent: [60, 40],
children: [ children: [
{ {
id: 41, id: 41,
name: 'R&D经费支出总额(购买力平价)', name: "R&D经费支出总额(购买力平价)",
percent: [65, 35], percent: [65, 35],
children: [] children: []
}, },
{ {
id: 42, id: 42,
name: 'R&D经费支出占GDP比重', name: "R&D经费支出占GDP比重",
percent: [55, 45], percent: [55, 45],
children: [] children: []
}, },
{ {
id: 43, id: 43,
name: '基础研究经费占R&D经费比重', name: "基础研究经费占R&D经费比重",
percent: [45, 55], percent: [45, 55],
children: [] children: []
} }
...@@ -223,24 +212,59 @@ const tableData = ref([ ...@@ -223,24 +212,59 @@ const tableData = ref([
}, },
{ {
id: 5, id: 5,
name: '科研条件', name: "科研条件",
percent: [60, 40], percent: [60, 40],
children: [ children: [
{ {
id: 51, id: 51,
name: '国家级重大科技基础设施数量', name: "国家级重大科技基础设施数量",
percent: [50, 50], percent: [50, 50],
children: [] children: []
} }
] ]
} }
]); ]);
const btnList = ref([
{
text: "制裁征候挖掘",
background: "linear-gradient(180.00deg, rgba(9, 88, 217, 1),rgba(9, 88, 217, 0.5) 100%)"
},
{
text: "制裁内容快速摘要",
background: "linear-gradient(180.00deg, rgba(255, 97, 97, 1),rgba(255, 97, 97, 0.5) 100%)"
},
{
text: "重点领域博弈历程分析",
background: "linear-gradient(180.00deg, rgba(255, 187, 51, 1),rgba(255, 187, 51, 0.5) 100%)"
},
{
text: "制裁手段关联分析",
background: "linear-gradient(180.00deg, rgba(48, 193, 195, 1),rgba(48, 193, 195, 0.5) 100%)"
},
{
text: "政要人物画像",
background: "linear-gradient(180.00deg, rgba(123, 52, 184, 1),rgba(123, 52, 184, 0.5) 100%)"
},
{
text: "人物关系挖掘",
background: "linear-gradient(180.00deg, rgba(255, 187, 51, 1),rgba(255, 187, 51, 0.5) 100%)"
},
{
text: "人物立场分析",
background: "linear-gradient(180.00deg, rgba(93, 186, 255, 1),rgba(93, 186, 255, 0.5) 100%)"
},
{
text: "制裁内容比对分析",
background: "linear-gradient(180.00deg, rgba(93, 186, 255, 1),rgba(93, 186, 255, 0.5) 100%)"
}
]);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content-wrapper { .content-wrapper {
width: 100%; width: 100%;
height: 1416px; height: 1600px;
.card-box { .card-box {
width: 1600px; width: 1600px;
...@@ -253,7 +277,6 @@ const tableData = ref([ ...@@ -253,7 +277,6 @@ const tableData = ref([
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
.card-title { .card-title {
width: 1602px; width: 1602px;
height: 48px; height: 48px;
display: flex; display: flex;
...@@ -275,7 +298,6 @@ const tableData = ref([ ...@@ -275,7 +298,6 @@ const tableData = ref([
} }
} }
/* ========== 公共外壳 ========== */ /* ========== 公共外壳 ========== */
.progress-wrapper { .progress-wrapper {
position: relative; position: relative;
...@@ -306,7 +328,6 @@ const tableData = ref([ ...@@ -306,7 +328,6 @@ const tableData = ref([
.left-progress { .left-progress {
transform: scaleX(-1); transform: scaleX(-1);
} }
.left-progress :deep(.el-progress-bar__outer) { .left-progress :deep(.el-progress-bar__outer) {
...@@ -316,7 +337,7 @@ const tableData = ref([ ...@@ -316,7 +337,7 @@ const tableData = ref([
overflow: hidden; overflow: hidden;
/* 读行内传进来的变量 */ /* 读行内传进来的变量 */
height: var(--i) !important; height: var(--i) !important;
margin-left: var(--j) !important margin-left: var(--j) !important;
} }
.left-progress :deep(.el-progress-bar__inner) { .left-progress :deep(.el-progress-bar__inner) {
...@@ -324,14 +345,12 @@ const tableData = ref([ ...@@ -324,14 +345,12 @@ const tableData = ref([
/* 移除圆角 */ /* 移除圆角 */
clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0);
/* 设置为矩形，inset() 函数的四个参数都是0表示不裁剪 */ /* 设置为矩形，inset() 函数的四个参数都是0表示不裁剪 */
background: #055FC2; background: #055fc2;
/* 读行内传进来的变量 */ /* 读行内传进来的变量 */
height: var(--i) !important; height: var(--i) !important;
margin-left: var(--j) !important; margin-left: var(--j) !important;
} }
/* ========== 右侧：左侧斜切 + 右侧圆角 ========== */ /* ========== 右侧：左侧斜切 + 右侧圆角 ========== */
.right-progress :deep(.el-progress-bar__outer) { .right-progress :deep(.el-progress-bar__outer) {
border-radius: 0; border-radius: 0;
...@@ -344,7 +363,7 @@ const tableData = ref([ ...@@ -344,7 +363,7 @@ const tableData = ref([
.right-progress :deep(.el-progress-bar__inner) { .right-progress :deep(.el-progress-bar__inner) {
border-radius: 0; border-radius: 0;
clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0);
background: #CE4F51; background: #ce4f51;
height: var(--i) !important; height: var(--i) !important;
} }
...@@ -361,4 +380,75 @@ const tableData = ref([ ...@@ -361,4 +380,75 @@ const tableData = ref([
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
} }
.china-icon {
/* 椭圆 79 */
width: 12px;
height: 12px;
margin: 5px;
border-radius: 50%;
background: rgba(206, 79, 81, 1);
}
.usa-icon {
width: 12px;
height: 12px;
margin: 5px;
border-radius: 50%;
background: rgba(5, 95, 194, 1);
}
.text {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.btn-box {
margin-top: 16px;
width: 1601px;
height: auto;
/* 高度自适应内容 */
display: flex;
flex-direction: row;
/* 行方向布局 */
flex-wrap: wrap;
/* 允许换行 */
justify-content: space-between;
align-items: stretch;
/* 使所有按钮高度一致 */
gap: 16px 16px;
/* 设置按钮之间的间距 */
padding: 0;
/* 移除内边距，防止内容溢出 */
}
.btn-item {
width: calc(20% - 16px);
/* 宽度为容器宽度的20%减去一个间隙的宽度 */
height: 60px;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
// justify-content: center;
/* 使按钮内容居中 */
align-items: center;
/* 使按钮内容居中 */
display: flex;
/* 使用flex布局 */
color: rgba(255, 255, 255, 1);
justify-content: space-between;
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 16px;
font-weight: 700;
line-height: 30px;
letter-spacing: 0px;
text-align: center;
}
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论