Skip to content

R
risk-monitor
提交 a21ce506 authored 作者: 李智林's avatar 李智林
浏览文件
操作

update

上级 c6f84780 698a46f6
隐藏空白字符变更
内嵌 并排
正在显示 包含 466 行增加 和 112 行删除
src/App.vue
浏览文件 @ a21ce506
...@@ -10,12 +10,14 @@ ...@@ -10,12 +10,14 @@
<div class="title-box"> <div class="title-box">
<div <div
class="title" class="title"
:aria-disabled="item.disabled"
v-for="(item, index) in homeTitleList" v-for="(item, index) in homeTitleList"
:key="index" :key="index"
@mouseenter="handleShowMenu(index, true)" @mouseenter="handleShowMenu(index, true)"
@mouseleave="handleShowMenu(index, false)" @mouseleave="handleShowMenu(index, false)"
> >
<div class="text" :class="{ textActive: homeActiveTitleIndex === index }">{{ item.name }}</div> <div class="text" :class="{ textActive: homeActiveTitleIndex === index }">
{{ item.name }}</div>
<div class="bottom-line" v-if="homeActiveTitleIndex === index"></div> <div class="bottom-line" v-if="homeActiveTitleIndex === index"></div>
</div> </div>
</div> </div>
...@@ -28,7 +30,7 @@ ...@@ -28,7 +30,7 @@
<img src="@/assets/icons/overview/search.png" alt="" /> <img src="@/assets/icons/overview/search.png" alt="" />
</div> </div>
</div> </div>
<div class="info-box"> <div class="info-box" aria-disabled="true">
<div class="mail"> <div class="mail">
<img src="@/assets/icons/overview/mail.png" alt="" /> <img src="@/assets/icons/overview/mail.png" alt="" />
</div> </div>
...@@ -78,6 +80,21 @@ ...@@ -78,6 +80,21 @@
</div> </div>
</div> </div>
<div class="right-btn" aria-disabled="true">
<div class="item">
<div class="icon">
<img src="@/assets/icons/overview/domain.png" alt="" />
</div>
<div class="text">{{ "领域" }}</div>
</div>
<div class="item">
<div class="icon">
<img src="@/assets/icons/overview/element.png" alt="" />
</div>
<div class="text">{{ "要素" }}</div>
</div>
</div>
<div class="ai-btn" @click="openAiBox"> <div class="ai-btn" @click="openAiBox">
<div class="icon"> <div class="icon">
<img src="@/assets/icons/ai-icon.png" alt="" /> <img src="@/assets/icons/ai-icon.png" alt="" />
...@@ -168,7 +185,7 @@ const handleGetPersonType = async () => { ...@@ -168,7 +185,7 @@ const handleGetPersonType = async () => {
const isCurrentOverview = computed(() => { const isCurrentOverview = computed(() => {
if (route.path === "/ZMOverView") { if (route.path === "/ZMOverView") {
return true return true;
} else { } else {
return false; return false;
} }
...@@ -178,15 +195,18 @@ const isCurrentOverview = computed(() => { ...@@ -178,15 +195,18 @@ const isCurrentOverview = computed(() => {
const homeTitleList = ref([ const homeTitleList = ref([
{ {
name: "中美科技博弈", name: "中美科技博弈",
path: "/ZMOverView" path: "/ZMOverView",
disabled: false
}, },
{ {
name: "主要国家科技动向感知", name: "主要国家科技动向感知",
path: "" path: "",
disabled: true
}, },
{ {
name: "主要国家竞争科技安全", name: "主要国家竞争科技安全",
path: "" path: "",
disabled: true
} }
]); ]);
...@@ -620,6 +640,47 @@ body { ...@@ -620,6 +640,47 @@ body {
} }
} }
.right-btn {
position: absolute;
top: 132px;
right: 0;
.item {
width: 108px;
height: 40px;
box-sizing: border-box;
border: 1px solid #fff;
border-radius: 50px 0px 0px 50px;
background: rgba(255, 255, 255, 0.65);
display: flex;
margin-bottom: 8px;
cursor: pointer;
.icon {
width: 36px;
height: 36px;
margin-top: 2px;
margin-left: 2px;
img {
width: 100%;
height: 100%;
}
}
.text {
width: 36px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Source Han Sans CN;
font-style: Regular;
font-size: 18px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
margin-top: 8px;
margin-left: 10px;
}
}
}
.ai-btn { .ai-btn {
position: absolute; position: absolute;
bottom: 240px; bottom: 240px;
...@@ -657,7 +718,7 @@ body { ...@@ -657,7 +718,7 @@ body {
} }
:deep(.el-input__wrapper) { :deep(.el-input__wrapper) {
height: 34px; height: 100%;
box-shadow: none; box-shadow: none;
border-radius: 10px; border-radius: 10px;
background: transparent; background: transparent;
...@@ -669,4 +730,23 @@ body { ...@@ -669,4 +730,23 @@ body {
:deep(.el-input__wrapper.is-focus) { :deep(.el-input__wrapper.is-focus) {
box-shadow: none !important; box-shadow: none !important;
} }
.title[aria-disabled="true"] {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
.info-box[aria-disabled="true"] {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
.right-btn[aria-disabled="true"] {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
</style> </style>
src/components/dialog.vue
浏览文件 @ a21ce506
...@@ -87,7 +87,8 @@ const handleInfoClick = () => { ...@@ -87,7 +87,8 @@ const handleInfoClick = () => {
border-radius: 12px; border-radius: 12px;
padding: 10px 16px; padding: 10px 16px;
position: relative; position: relative;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); border: 1px solid rgba(231, 243, 255, 1);
/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
} }
.bubble-header { .bubble-header {
......
src/views/ZMOverView/components/fourSuppress/components/addDomain/multiLineChart.js
浏览文件 @ a21ce506
...@@ -10,7 +10,7 @@ const getMultiLineChart = (data) => { ...@@ -10,7 +10,7 @@ const getMultiLineChart = (data) => {
const echartsSeries = series.map((item, index) => ({ const echartsSeries = series.map((item, index) => ({
name: item.name, name: item.name,
type: 'line', type: 'line',
smooth: false, smooth: true,
symbol: 'circle', symbol: 'circle',
symbolSize: 8, symbolSize: 8,
itemStyle: { itemStyle: {
......
src/views/ZMOverView/components/gameProfile/Timeline.vue
浏览文件 @ a21ce506
...@@ -102,8 +102,8 @@ export default { ...@@ -102,8 +102,8 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
padding: 0 40px; /* padding: 0 40px; */
width: 1500px; width: 1600px;
overflow: auto; overflow: auto;
} }
...@@ -156,7 +156,7 @@ export default { ...@@ -156,7 +156,7 @@ export default {
.line { .line {
position: absolute; position: absolute;
left: 0; left: 10px;
right: 0; right: 0;
top: 50%; top: 50%;
height: 6px; height: 6px;
......
src/views/ZMOverView/components/gameProfile/index.vue
浏览文件 @ a21ce506
...@@ -8,8 +8,13 @@ ...@@ -8,8 +8,13 @@
</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="
style="display: flex; justify-content: space-between; margin-right: 50px; line-height: 32px;align-items: center;"> display: flex;
justify-content: space-between;
margin-right: 50px;
line-height: 32px;
align-items: center;
">
<div style="display: flex; margin-left: 50px"> <div style="display: flex; margin-left: 50px">
数据来源: 数据来源:
<el-select class="select-item" size="default" style="margin-left: 15px; width: 240px; height: 32px" <el-select class="select-item" size="default" style="margin-left: 15px; width: 240px; height: 32px"
...@@ -28,22 +33,39 @@ ...@@ -28,22 +33,39 @@
<div style="width: 672px; height: 486px; padding-top: 50px" id="char"></div> <div style="width: 672px; height: 486px; padding-top: 50px" id="char"></div>
</div> </div>
<div style="width: 50%; height: 620px;overflow: auto;"> <div style="width: 50%; height: 620px;overflow: auto;">
<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="targetCode" border
<el-table-column prop="targetName" label="指标名称" sortable width="350" /> :tree-props="{ children: 'children' }" default-expand-all :header-cell-style="{ 'border-right': 'none' }"
<el-table-column prop="chinaScore" label="中国"> :cell-style="{ 'border-right': 'none' }">
<!-- 自定义展开图标 -->
<el-table-column prop="targetName" label="指标名称" width="350" />
<el-table-column prop="usScore" label="美国">
<template #default="scope"> <template #default="scope">
<div class="progress-wrapper left" :style="{ '--i': '40px', '--j': '-20px', marginLeft: '20px' }"> <div style="display: flex;">
<el-progress :percentage="scope.row.chinaScore" :stroke-width="20" class="left-progress" <div class="progress-text">
:show-text="false" /> {{ scope.row.usScore }}
</div>
<div class="progress-wrapper left" :style="{ '--i': '40px', '--j': '-20px', marginLeft: '20px' }">
<el-progress :percentage="scope.row.chinaScore" :stroke-width="20" class="left-progress"
:show-text="false" />
</div>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="usScore" label="美国"> <el-table-column prop="chinaScore" label="中国">
<template #default="scope"> <template #default="scope">
<div class="progress-wrapper right" :style="{ '--i': '40px', marginRight: '20px' }"> <div style="display: flex;">
<el-progress :percentage="scope.row.usScore" :stroke-width="20" class="right-progress"
:show-text="false" /> <div class="progress-wrapper right" :style="{ '--i': '40px', marginRight: '20px' }">
<el-progress :percentage="scope.row.usScore" :stroke-width="20" class="right-progress"
:show-text="false" />
</div>
<div class="progress-text" style="color:rgba(206, 79, 81, 1);">
{{ scope.row.chinaScore }}
</div>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -60,13 +82,17 @@ ...@@ -60,13 +82,17 @@
</div> </div>
</div> </div>
<div class="btn-box"> <div class="btn-box">
<div v-for="(value, index) in btnList" class="btn-item" :style="{ <div v-for="(value, index) in btnList" :key="index" class="btn-item disabled" :style="{
background: value.background background: value.background
}"> }">
<img :src="`/public/icon/ZM/btn-icon-${index}.png`" style="width: 22px; height: 19px; margin: 0 22px" /> <img :src="value.img" style="width: 22px; height: 19px; margin: 0 22px" />
{{ value.text }} {{ value.text }}
<img :src="`/public/icon/ZM/btn-icon-arrow.png`" <img :src="`./icon/ZM/btn-icon-arrow.png`"
style="margin-left: auto; margin-right: 22px; width: 13px; height: 12px" /> style="margin-left: auto; margin-right: 22px; width: 13px; height: 12px" />
<!-- <img src="./assets/images/btn-icon-arrow.png"
style="margin-left: auto; margin-right: 22px; width: 13px; height: 12px" /> -->
</div> </div>
</div> </div>
</div> </div>
...@@ -75,11 +101,28 @@ ...@@ -75,11 +101,28 @@
<script setup> <script setup>
import { onMounted, ref, computed } from "vue"; import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { ArrowRight, CaretBottom } from '@element-plus/icons-vue'
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";
import { getCompare, getChartDict, getTechnologyGameAnalysis } from '@/api/zmOverview/risk/index.js' import { getCompare, getChartDict, getTechnologyGameAnalysis } from '@/api/zmOverview/risk/index.js'
import icon1 from './icon/btn-icon-0.png'
import icon2 from './icon/btn-icon-1.png'
import icon3 from './icon/btn-icon-2.png'
import icon4 from './icon/btn-icon-3.png'
import icon5 from './icon/btn-icon-4.png'
import icon6 from './icon/btn-icon-5.png'
import icon7 from './icon/btn-icon-6.png'
import icon from './icon/btn-icon-7.png'
import Img1 from "./assets/images/btn-icon-0.png";
import Img2 from "./assets/images/btn-icon-1.png";
import Img3 from "./assets/images/btn-icon-2.png";
import Img4 from "./assets/images/btn-icon-3.png";
import Img5 from "./assets/images/btn-icon-4.png";
import Img6 from "./assets/images/btn-icon-5.png";
import Img7 from "./assets/images/btn-icon-6.png";
import Img8 from "./assets/images/btn-icon-7.png";
const course = ref([ const course = ref([
{ {
...@@ -88,28 +131,32 @@ const course = ref([ ...@@ -88,28 +131,32 @@ const course = ref([
content: content:
"计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA的量子研究纳入，旨在加速技术应用与人才发展。", "计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA的量子研究纳入，旨在加速技术应用与人才发展。",
unit: "美国", unit: "美国",
tag: "科技发展战略" tag: "科技发展战略",
icon: icon1,
}, },
{ {
time: "2025-01-21", time: "2025-01-21",
title: "将美国实体列入'不可靠实体清单'并采取商品进口限制", title: "将美国实体列入'不可靠实体清单'并采取商品进口限制",
content: "根据《反外国制裁法》等，将17家美国实体列入清单，禁止其从事与中国有关的进出口与新增投资。", content: "根据《反外国制裁法》等，将17家美国实体列入清单，禁止其从事与中国有关的进出口与新增投资。",
unit: "中国", unit: "中国",
tag: "反制措施" tag: "反制措施",
icon: icon2,
}, },
{ {
time: "2025-01-21", time: "2025-01-21",
title: "《国家创新驱动发展战略纲要》发布", title: "《国家创新驱动发展战略纲要》发布",
content: "纲领性文件，提出了建设世界科技强国的'三步走'战略目标，并系统部署了构建现代产业技术体系等八大战略任务。", content: "纲领性文件，提出了建设世界科技强国的'三步走'战略目标，并系统部署了构建现代产业技术体系等八大战略任务。",
unit: "中国", unit: "中国",
tag: "科技发展战略" tag: "科技发展战略",
icon: icon3
}, },
{ {
time: "2025-01-21", time: "2025-01-21",
title: "中国网信办约谈英伟达", title: "中国网信办约谈英伟达",
content: "中国网信办约谈英伟达，要求就H20算力芯片漏洞后门安全风险问题进行说明。", content: "中国网信办约谈英伟达，要求就H20算力芯片漏洞后门安全风险问题进行说明。",
unit: "中国", unit: "中国",
tag: "反制措施" tag: "反制措施",
icon: icon4,
}, },
{ {
time: "2025-05-09", time: "2025-05-09",
...@@ -117,35 +164,37 @@ const course = ref([ ...@@ -117,35 +164,37 @@ const course = ref([
content: content:
"年度国防预算法案，其中系统性地嵌入了大量对华竞争条款，首次将对外投资审查法律化，并在供应链、实体清单等方面加强限制。", "年度国防预算法案，其中系统性地嵌入了大量对华竞争条款，首次将对外投资审查法律化，并在供应链、实体清单等方面加强限制。",
unit: "美国", unit: "美国",
tag: "对华打压遏制" tag: "对华打压遏制",
icon: icon5,
}, },
{ {
time: "2025-07-24", time: "2025-07-24",
title: "白宫'人工智能(AI)行动计划'", title: "白宫'人工智能(AI)行动计划'",
content: "提出放宽监管、简化环境许可可以加快AI基础设施建设，并涉及促进AI出口、要求联邦采购的AI模型具备中立性等内容。", content: "提出放宽监管、简化环境许可可以加快AI基础设施建设，并涉及促进AI出口、要求联邦采购的AI模型具备中立性等内容。",
unit: "美国", unit: "美国",
tag: "科技发展战略" tag: "科技发展战略",
icon: icon6,
}, },
{ {
time: "2025-07-24", time: "2025-07-24",
title: "2026财年《商务、司法、科学及相关支出法案》", title: "2026财年《商务、司法、科学及相关支出法案》",
content: "法案为商务部工业与安全局(BIS)大幅增加预算，以加强出口管制执法，特别强调审查对华为、中芯国际的出口许可证。", content: "法案为商务部工业与安全局(BIS)大幅增加预算，以加强出口管制执法，特别强调审查对华为、中芯国际的出口许可证。",
unit: "美国", unit: "美国",
tag: "对华打压遏制" tag: "对华打压遏制",
icon: icon7,
} }
]); ]);
const originList = ref([]) const originList = ref([]);
const origin = ref('') const origin = ref("");
//数据来源 //数据来源
const handleGetChartDict = async () => { const handleGetChartDict = async () => {
try { try {
const res = await getChartDict(); const res = await getChartDict();
console.log("数据来源", res); console.log("数据来源", res);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
originList.value = res.data originList.value = res.data;
origin.value = res.data[0].id origin.value = res.data[0].id;
} }
} catch (error) { } catch (error) {
console.error("获取数据来源error", error); console.error("获取数据来源error", error);
...@@ -154,11 +203,11 @@ const handleGetChartDict = async () => { ...@@ -154,11 +203,11 @@ const handleGetChartDict = async () => {
//中美科技实力对比 //中美科技实力对比
const handleGetCompare = async () => { const handleGetCompare = async () => {
try { try {
const res = await getCompare(origin.value); const res = await getCompare(origin.value);
console.log("中美科技实力对比", res); console.log("中美科技实力对比", res);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
tableData.value = res.data tableData.value = res.data[0].children;
// tableData.value = [res.data];
const secondLevelData = res.data[0].children; const secondLevelData = res.data[0].children;
const indicatorNames = secondLevelData.map(item => item.targetName); const indicatorNames = secondLevelData.map(item => item.targetName);
const chinaScores = secondLevelData.map(item => item.chinaScore); const chinaScores = secondLevelData.map(item => item.chinaScore);
...@@ -167,16 +216,11 @@ const handleGetCompare = async () => { ...@@ -167,16 +216,11 @@ const handleGetCompare = async () => {
const myChart = echarts.init(dom); const myChart = echarts.init(dom);
const radarOption = { const radarOption = {
indicatorNames: indicatorNames, indicatorNames: indicatorNames,
data: [ data: [chinaScores, usScores]
chinaScores,
usScores
]
}; };
const option = radarChart( const option = radarChart(radarOption.indicatorNames, radarOption.data);
radarOption.indicatorNames, radarOption.data
);
myChart.setOption(option); myChart.setOption(option);
console.log(radarOption) console.log(radarOption);
} }
} catch (error) { } catch (error) {
console.error("获取中美科技实力对比error", error); console.error("获取中美科技实力对比error", error);
...@@ -186,20 +230,19 @@ const handleGetCompare = async () => { ...@@ -186,20 +230,19 @@ const handleGetCompare = async () => {
//中美博弈概览V2:领域打压遏制时间线 //中美博弈概览V2:领域打压遏制时间线
const handlegetTechnologyGameAnalysis = async () => { const handlegetTechnologyGameAnalysis = async () => {
try { try {
const res = await getTechnologyGameAnalysis(); const res = await getTechnologyGameAnalysis();
console.log("中美科技博弈分析", res); console.log("中美科技博弈分析", res);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
course.value = res.data course.value = res.data;
} }
} catch (error) { } catch (error) {
console.error("获取中美科技博弈分析error", error); console.error("获取中美科技博弈分析error", error);
} }
}; };
onMounted(async () => { onMounted(async () => {
await handleGetChartDict() await handleGetChartDict();
await handleGetCompare() await handleGetCompare();
await handlegetTechnologyGameAnalysis() await handlegetTechnologyGameAnalysis();
// const dom = document.getElementById("char"); // const dom = document.getElementById("char");
// const myChart = echarts.init(dom); // const myChart = echarts.init(dom);
...@@ -298,35 +341,43 @@ const tableData = ref([ ...@@ -298,35 +341,43 @@ const tableData = ref([
const btnList = ref([ const btnList = ref([
{ {
text: "制裁征候挖掘", text: "制裁征候挖掘",
background: "linear-gradient(180.00deg, rgba(9, 88, 217, 1),rgba(9, 88, 217, 0.5) 100%)" background: "linear-gradient(180.00deg, rgba(9, 88, 217, 1),rgba(9, 88, 217, 0.5) 100%)",
img: Img1
}, },
{ {
text: "制裁内容快速摘要", text: "制裁内容快速摘要",
background: "linear-gradient(180.00deg, rgba(255, 97, 97, 1),rgba(255, 97, 97, 0.5) 100%)" background: "linear-gradient(180.00deg, rgba(255, 97, 97, 1),rgba(255, 97, 97, 0.5) 100%)",
img: Img2
}, },
{ {
text: "重点领域博弈历程分析", text: "重点领域博弈历程分析",
background: "linear-gradient(180.00deg, rgba(255, 187, 51, 1),rgba(255, 187, 51, 0.5) 100%)" background: "linear-gradient(180.00deg, rgba(255, 187, 51, 1),rgba(255, 187, 51, 0.5) 100%)",
img: Img3
}, },
{ {
text: "制裁手段关联分析", text: "制裁手段关联分析",
background: "linear-gradient(180.00deg, rgba(48, 193, 195, 1),rgba(48, 193, 195, 0.5) 100%)" background: "linear-gradient(180.00deg, rgba(48, 193, 195, 1),rgba(48, 193, 195, 0.5) 100%)",
img: Img4
}, },
{ {
text: "政要人物画像", text: "政要人物画像",
background: "linear-gradient(180.00deg, rgba(123, 52, 184, 1),rgba(123, 52, 184, 0.5) 100%)" background: "linear-gradient(180.00deg, rgba(123, 52, 184, 1),rgba(123, 52, 184, 0.5) 100%)",
img: Img5
}, },
{ {
text: "人物关系挖掘", text: "人物关系挖掘",
background: "linear-gradient(180.00deg, rgba(255, 187, 51, 1),rgba(255, 187, 51, 0.5) 100%)" background: "linear-gradient(180.00deg, rgba(255, 187, 51, 1),rgba(255, 187, 51, 0.5) 100%)",
img: Img6
}, },
{ {
text: "人物立场分析", text: "人物立场分析",
background: "linear-gradient(180.00deg, rgba(93, 186, 255, 1),rgba(93, 186, 255, 0.5) 100%)" background: "linear-gradient(180.00deg, rgba(93, 186, 255, 1),rgba(93, 186, 255, 0.5) 100%)",
img: Img7
}, },
{ {
text: "制裁内容比对分析", text: "制裁内容比对分析",
background: "linear-gradient(180.00deg, rgba(93, 186, 255, 1),rgba(93, 186, 255, 0.5) 100%)" background: "linear-gradient(180.00deg, rgba(93, 186, 255, 1),rgba(93, 186, 255, 0.5) 100%)",
img: Img8
} }
]); ]);
</script> </script>
...@@ -369,6 +420,21 @@ const btnList = ref([ ...@@ -369,6 +420,21 @@ const btnList = ref([
} }
} }
.progress-text {
/* No.1 92.5 */
width: 80px;
height: 22px;
color: rgba(5, 95, 194, 1);
font-family: Source Han Sans CN;
font-style: Bold;
font-size: 14px;
font-weight: 700;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
}
/* ========== 公共外壳 ========== */ /* ========== 公共外壳 ========== */
.progress-wrapper { .progress-wrapper {
position: relative; position: relative;
...@@ -407,8 +473,9 @@ const btnList = ref([ ...@@ -407,8 +473,9 @@ const btnList = ref([
background: rgba(231, 243, 255, 1); background: rgba(231, 243, 255, 1);
overflow: hidden; overflow: hidden;
/* 读行内传进来的变量 */ /* 读行内传进来的变量 */
height: var(--i) !important; height: 10px !important;
margin-left: var(--j) !important; margin-left: var(--j) !important;
margin-top: 6px;
} }
.left-progress :deep(.el-progress-bar__inner) { .left-progress :deep(.el-progress-bar__inner) {
...@@ -418,7 +485,7 @@ const btnList = ref([ ...@@ -418,7 +485,7 @@ const btnList = ref([
/* 设置为矩形，inset() 函数的四个参数都是0表示不裁剪 */ /* 设置为矩形，inset() 函数的四个参数都是0表示不裁剪 */
background: #055fc2; background: #055fc2;
/* 读行内传进来的变量 */ /* 读行内传进来的变量 */
height: var(--i) !important; height: 10px !important;
margin-left: var(--j) !important; margin-left: var(--j) !important;
} }
...@@ -428,14 +495,15 @@ const btnList = ref([ ...@@ -428,14 +495,15 @@ const btnList = ref([
clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0);
background: #ffccc7; background: #ffccc7;
overflow: hidden; overflow: hidden;
height: var(--i) !important; height: 10px !important;
margin-top: 6px;
} }
.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: 10px !important;
} }
:deep(.el-table .cell) { :deep(.el-table .cell) {
...@@ -521,4 +589,69 @@ const btnList = ref([ ...@@ -521,4 +589,69 @@ const btnList = ref([
letter-spacing: 0px; letter-spacing: 0px;
text-align: center; text-align: center;
} }
/* 隐藏原生箭头 */
// :deep(.el-table__expand-icon>.el-icon) {
// display: none;
// }
// /* 或者用背景图/伪元素替换 */
// :deep(.el-table__expand-icon>.el-icon::before) {
// content: "▶";
// color: #409eff;
// }
// :deep(.el-table .el-table__expand-icon--expanded::before) {
// content: "▼";
// }
/* 隐藏原生图标 */
:deep(.el-table__expand-icon > .el-icon) {
display: none;
}
/* 自定义未展开图标 */
:deep(.el-table__expand-icon) {
background-image: url('./icon/arrowDown.png');
background-repeat: no-repeat;
background-size: contain;
width: 24px;
height: 24px;
cursor: pointer;
transition: transform 0.3s;
}
/* 自定义展开图标 */
:deep(.el-table__expand-icon.is-expanded) {
background-image: url('./icon/arrowDown.png');
transform: rotate(-90deg);
}
/* 自定义表头背景颜色 */
:deep(.el-table th) {
background-color: #f0f9eb;
}
/* 自定义表头文字颜色 */
:deep(.el-table th .cell) {
color: rgba(59, 65, 75, 1);
font-family: Source Han Sans CN;
font-style: Bold;
font-size: 18px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
text-align: center;
}
/* 自定义表头边框 */
:deep(.el-table th) {
border-bottom: 2px solid #ebeef5;
}
/* 自定义表头高度 */
:deep(.el-table th) {
padding: 12px 0;
}
</style> </style>
src/views/ZMOverView/components/newRisk/WaveBall.vue
浏览文件 @ a21ce506
...@@ -74,7 +74,7 @@ const makeOption = () => { ...@@ -74,7 +74,7 @@ const makeOption = () => {
const change = props.data.change; const change = props.data.change;
const unit = props.data.unit; const unit = props.data.unit;
if (change === 0) { if (change === 0) {
return `{num|${'无新增'}}` return `{noChange|${'无新增'}}\n{b|共${props.data.count}${unit}}`
} }
return `{num|${change}}{unit| ${unit}}\n{b|共${props.data.count}${unit}}` return `{num|${change}}{unit| ${unit}}\n{b|共${props.data.count}${unit}}`
}, },
...@@ -86,7 +86,7 @@ const makeOption = () => { ...@@ -86,7 +86,7 @@ const makeOption = () => {
padding: [-4, 0, 8, 0] padding: [-4, 0, 8, 0]
}, },
noChange: { noChange: {
fontSize: 24, fontSize: 20,
fontWeight: 'bold', fontWeight: 'bold',
color: `${props.color[5]}`, color: `${props.color[5]}`,
padding: [0, 0, 8, 0] padding: [0, 0, 8, 0]
......
src/views/ZMOverView/components/newRisk/index.vue
浏览文件 @ a21ce506
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
width: sections[index].waveBall.length === 2 ? '350px' : '503px', width: sections[index].waveBall.length === 2 ? '350px' : '503px',
background: section.background background: section.background
}"> }">
<img class="section-title" :src="`/public/icon/riskToday/title-` + (index + 1) + `.png`" /> <img class="section-title" :src="section.title" />
<div class="stats"> <div class="stats">
<div v-for="value in sections[index].waveBall"> <div v-for="value in sections[index].waveBall">
<WaveBall :percent="value.percent" :data="value" :color="section.waterColor" :size="128" /> <WaveBall :percent="value.percent" :data="value" :color="section.waterColor" :size="128" />
...@@ -39,7 +39,8 @@ ...@@ -39,7 +39,8 @@
</div> </div>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<div class="risk-signals"> <!-- 风险信号列表 -->
<div class="risk-signals" ref="riskSignalsRef">
<div class="risk-signals-item" v-for="(item, index) in warningList" :key="index" <div class="risk-signals-item" v-for="(item, index) in warningList" :key="index"
@click="handleClickToDetailO(item)"> @click="handleClickToDetailO(item)">
<div class="item-left" :class="{ <div class="item-left" :class="{
...@@ -70,7 +71,7 @@ ...@@ -70,7 +71,7 @@
<el-carousel ref="carouselRef" style="height: 443px; width: 664px" :autoplay="true" :interval="30000" <el-carousel ref="carouselRef" style="height: 443px; width: 664px" :autoplay="true" :interval="30000"
arrow="never" indicator-position="none" @change="handleCarouselChange"> arrow="never" indicator-position="none" @change="handleCarouselChange">
<el-carousel-item v-for="(News, NewsIndex) in hotNewsList" :key="NewsIndex"> <el-carousel-item v-for="(News, NewsIndex) in hotNewsList" :key="NewsIndex">
<div class="carousel-item"> <div class="carousel-item" @click="toDetaile(News.id, News.HotspotType)">
<div class="carousel-title"> <div class="carousel-title">
<div> <div>
<div class="title-text"> <div class="title-text">
...@@ -105,17 +106,21 @@ ...@@ -105,17 +106,21 @@
<script setup> <script setup>
import { color } from "echarts"; import { color } from "echarts";
import { onMounted, ref, computed, onBeforeUnmount } from "vue"; import { onMounted, ref, onUnmounted, onBeforeUnmount } from "vue";
import WaveBall from "./WaveBall.vue"; import WaveBall from "./WaveBall.vue";
import { getBillRiskSignal } from "@/api/bill/billHome";
import { getLatestRiskUpdates, getLatestRisks } from '@/api/zmOverview/risk/index.js' import { getLatestRiskUpdates, getLatestRisks } from '@/api/zmOverview/risk/index.js'
import router from "@/router/index";
import icon1 from './icon/title-1.png'
import icon2 from './icon/title-2.png'
import icon3 from './icon/title-3.png'
import icon4 from './icon/title-4.png'
const sectionTab = [ const sectionTab = [
{ {
textColor: "rgba(9, 88, 217, 1)", textColor: "rgba(9, 88, 217, 1)",
background: "linear-gradient(180.00deg, rgba(9, 88, 217, 1),rgba(9, 88, 217, 0.5) 100%)", background: "linear-gradient(180.00deg, rgba(9, 88, 217, 1),rgba(9, 88, 217, 0.5) 100%)",
borderColor: "rgba(186, 224, 255, 1)", borderColor: "rgba(186, 224, 255, 1)",
waterColor: ["#4E92F4", "#5993EE", "#8EB3ED", "#77A2EB", "#ffffff", "#ffffff"], waterColor: ["#4E92F4", "#5993EE", "#8EB3ED", "#77A2EB", "#ffffff", "#ffffff"],
title: "政策法规" title: icon1
}, },
{ {
textColor: "rgba(9, 88, 217, 1)", textColor: "rgba(9, 88, 217, 1)",
...@@ -123,7 +128,7 @@ const sectionTab = [ ...@@ -123,7 +128,7 @@ const sectionTab = [
borderColor: "rgba(186, 224, 255, 1)", borderColor: "rgba(186, 224, 255, 1)",
waterColor: ["#4AB9BA", "#5DBFC1", "#86CCCF", "#8DD0D2", "#ffffff", "#ffffff"], waterColor: ["#4AB9BA", "#5DBFC1", "#86CCCF", "#8DD0D2", "#ffffff", "#ffffff"],
title: "出口管制" title: icon2
}, },
{ {
textColor: "rgba(9, 88, 217, 1)", textColor: "rgba(9, 88, 217, 1)",
...@@ -131,7 +136,7 @@ const sectionTab = [ ...@@ -131,7 +136,7 @@ const sectionTab = [
borderColor: "rgba(186, 224, 255, 1)", borderColor: "rgba(186, 224, 255, 1)",
waterColor: ["#EF797B", "#ED8C8E", "#EAB0B2", "#E7ABAC", "#ffffff", "#ffffff"], waterColor: ["#EF797B", "#ED8C8E", "#EAB0B2", "#E7ABAC", "#ffffff", "#ffffff"],
title: "投融资限制" title: icon3
}, },
{ {
textColor: "rgba(9, 88, 217, 1)", textColor: "rgba(9, 88, 217, 1)",
...@@ -139,7 +144,7 @@ const sectionTab = [ ...@@ -139,7 +144,7 @@ const sectionTab = [
borderColor: "rgba(186, 224, 255, 1)", borderColor: "rgba(186, 224, 255, 1)",
waterColor: ["#EFA04F", "#EDA969", "#EABA8C", "#E7AF7A", "#ffffff", "#ffffff"], waterColor: ["#EFA04F", "#EDA969", "#EABA8C", "#E7AF7A", "#ffffff", "#ffffff"],
title: "市场准入" title: icon4
} }
]; ];
// 模拟从后端获取的数据 // 模拟从后端获取的数据
...@@ -367,7 +372,6 @@ const hotNewsList = ref([ ...@@ -367,7 +372,6 @@ const hotNewsList = ref([
//最新风险信号 //最新风险信号
const handleGetLatestRisks = async () => { const handleGetLatestRisks = async () => {
try { try {
const res = await getLatestRisks(); const res = await getLatestRisks();
console.log("最新风险信号", res); console.log("最新风险信号", res);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
...@@ -391,12 +395,86 @@ const handleCarouselChange = index => { ...@@ -391,12 +395,86 @@ const handleCarouselChange = index => {
} }
}; };
// 查看详情
const handleClickToDetail = () => {
window.sessionStorage.setItem("billId", curBill.value.billId);
window.sessionStorage.setItem("curTabName", curBill.value.billName);
const route = router.resolve({
path: "/billLayout",
query: {
billId: curBill.value.billId
}
});
console.log(route);
window.open(route.href, "_blank");
};
// 查看详情 传递参数
const handleClickToDetailO = item => {
window.sessionStorage.setItem("billId", item.billId);
window.sessionStorage.setItem("curTabName", item.name || item.signalTitle);
const route = router.resolve("/billLayout?billId=" + item.billId);
window.open(route.href, "_blank");
};
const handleToRiskManage = () => { const handleToRiskManage = () => {
// 这里的路由路径请根据实际情况修改 // 这里的路由路径请根据实际情况修改
// router.push('/riskSignalManage'); // router.push('/riskSignalManage');
console.log('跳转到风险信号管理'); console.log('跳转到风险信号管理');
}; };
const toDetaile = (id, type) => {
if (type === '法案') {
let path = "/billLayout/bill/introduction";
let query = { billId: id };
const { href } = router.resolve({ path, query });
window.open(href, "_blank");
} else if (type === '政令') {
const route = router.resolve({
path: "/decreeLayout/overview/introduction",
query: {
id: id
}
});
window.open(route.href, "_blank");
} else if (type === '实体清单' || type === 'CCL') {
const route = router.resolve({
path: "/exportControl/singleSanction",
query: {
id: id
}
});
window.open(route.href, "_blank");
} else if (type === '337') {
const curRoute = router.resolve({
path: "/marketSingleCaseLayout/overview",
query: {
id: "337",
searchId: id
}
});
window.open(curRoute.href, "_blank");
} else if (type === '203') {
const curRoute = router.resolve({
path: "/marketSingleCaseLayout/overview",
query: {
id: "203",
searchId: id
}
});
window.open(curRoute.href, "_blank");
} else if (type === '301') {
const curRoute = router.resolve({
path: "/marketSingleCaseLayout/overview",
query: {
id: "301",
searchId: id
}
});
window.open(curRoute.href, "_blank");
}
//type=涉军企业和SDN未对接
}
const handleSwithCurNews = name => { const handleSwithCurNews = name => {
if (name === "left") { if (name === "left") {
carouselRef.value.prev(); carouselRef.value.prev();
...@@ -404,12 +482,37 @@ const handleSwithCurNews = name => { ...@@ -404,12 +482,37 @@ const handleSwithCurNews = name => {
carouselRef.value.next(); carouselRef.value.next();
} }
}; };
const riskSignalsRef = ref(null); // 引用risk-signals容器
let intervalId;
onMounted(async () => { onMounted(async () => {
await handleGetLatestRiskUpdates() await handleGetLatestRiskUpdates()
await handleGetLatestRisks() await handleGetLatestRisks()
console.log("页面加载完成，可以获取数据了"); const scrollInterval = 2000; // 每隔2秒滚动一次
let currentScroll = 0;
intervalId = setInterval(() => {
if (riskSignalsRef.value) {
const scrollHeight = riskSignalsRef.value.scrollHeight; // 内容总高度
const clientHeight = riskSignalsRef.value.clientHeight; // 可视区域高度
console.log(scrollHeight, clientHeight)
// 如果滚动到底，则回到顶部
if (currentScroll + clientHeight >= scrollHeight) {
currentScroll = 0;
riskSignalsRef.value.scrollTop = currentScroll;
} else {
currentScroll += 10; // 调整这个值可以改变滚动速度
riskSignalsRef.value.scrollTop = currentScroll;
}
}
}, scrollInterval);
});
onUnmounted(() => {
clearInterval(intervalId); // 清除定时器
}); });
// onBeforeUnmount(() => { // onBeforeUnmount(() => {
// andleGetLatestRiskUpdates() // andleGetLatestRiskUpdates()
...@@ -785,32 +888,29 @@ onMounted(async () => { ...@@ -785,32 +888,29 @@ onMounted(async () => {
.title-text { .title-text {
/* 美国白宫发布关于进一步延长TikTok执法宽限期的行政令 */ /* 美国白宫发布关于进一步延长TikTok执法宽限期的行政令 */
width: 547px; width: 547px;
height: 26px; // height: 26px;
} }
.title-tag { .title-tag {
/* 容器 1563 */ /* 移除固定 width */
width: 190px;
height: 30px; height: 30px;
margin-top: 12px; padding: 0 12px;
/* 自动布局 */ /* 左右内边距控制最小宽度 */
display: flex; display: inline-flex;
flex-direction: row; /* ✅ 关键：inline + flex */
justify-content: flex-start; justify-content: center;
align-items: flex-start; /* 水平居中 */
gap: 10; align-items: center;
padding: 0px 12px 0px 12px; /* 垂直居中 */
border-radius: 20px; border-radius: 20px;
background: rgba(206, 79, 81, 0.1); background: rgba(206, 79, 81, 0.1);
color: rgba(206, 79, 81, 1); color: rgba(206, 79, 81, 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: 30px; white-space: nowrap;
letter-spacing: 0px; /* 防止文字换行 */
text-align: justify; box-sizing: border-box;
} }
} }
......
src/views/ZMOverView/index.vue
浏览文件 @ a21ce506
...@@ -63,14 +63,16 @@ ...@@ -63,14 +63,16 @@
<div class="info-item-left"> <div class="info-item-left">
<img :src="logo1" alt="" /> <img :src="logo1" alt="" />
<div class="info-item-left-content"> <div class="info-item-left-content">
<p>地址：北京市海淀区复兴路15号 邮编：100038</p> <p>地址：北京市海淀区复兴路某某某某某某 邮编：100000</p>
<p>办公电话：010-58882033 办公传真：010-58882590</p> <p>办公电话：000-88888888 办公传真：000-88888888</p>
<p>中国科学技术信息研究所 版权所有 京ICP备10027328号</p> <p>中国中国中国中国中国北京 版权所有 京ICP备00000000号</p>
</div> </div>
</div> </div>
<div class="info-item-right"> <div class="info-item-right">
<img :src="logo2" alt="" /> <img class="img1" :src="logo2" alt="" />
<img :src="logo3" alt="" /> <img class="img2" :src="logo3" alt="" />
<div class="text2">{{ "中国某某某某某某某某部" }}</div>
<div class="text3">{{ "中国某某某某某某某某所" }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -110,6 +112,11 @@ const navList = ref([ ...@@ -110,6 +112,11 @@ const navList = ref([
]); ]);
const handleScrollTo = id => { const handleScrollTo = id => {
if (id === "tech-news") {
const route = router.resolve("/newsBrief");
window.open(route.href, "_blank");
return;
}
const element = document.getElementById(id); const element = document.getElementById(id);
const container = document.querySelector(".content-box"); const container = document.querySelector(".content-box");
if (element && container) { if (element && container) {
...@@ -393,12 +400,45 @@ const handleDateClick = type => { ...@@ -393,12 +400,45 @@ const handleDateClick = type => {
.info-item-right { .info-item-right {
display: flex; display: flex;
align-items: center; align-items: center;
img:first-child { position: relative;
height: 60px;
.text2 {
left: 60px;
position: absolute;
width: 237px;
height: 37px;
background: #fff;
color: rgba(34, 41, 52, 1);
font-family: Source Han Sans CN;
font-style: Bold;
font-size: 20px;
font-weight: 700;
line-height: 37px;
letter-spacing: 0px;
text-align: center;
}
.text3 {
left: 385px;
top: 12px;
position: absolute;
width: 237px;
height: 37px;
background: #fff;
color: rgba(34, 41, 52, 1);
font-family: Source Han Sans CN;
font-style: Bold;
font-size: 20px;
font-weight: 700;
line-height: 37px;
letter-spacing: 0px;
text-align: center;
}
.img1 {
width: 300px; width: 300px;
height: 48.8px; height: 48.8px;
margin-right: 24px; margin-right: 24px;
} }
img:last-child { .img2 {
width: 300px; width: 300px;
height: 43.5px; height: 43.5px;
} }
......
src/views/bill/billHome/index.vue
浏览文件 @ a21ce506
...@@ -2071,13 +2071,13 @@ onUnmounted(() => { ...@@ -2071,13 +2071,13 @@ onUnmounted(() => {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
box-sizing: border-box; box-sizing: border-box;
padding: 0 40px 0 30px; padding: 0 40px 0 21px;
.box1-header-left { .box1-header-left {
display: flex; display: flex;
.icon { .icon {
width: 18px; width: 18px;
height: 18px; height: 18px;
margin-top: 19px; margin-top: 15px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -2087,7 +2087,7 @@ onUnmounted(() => { ...@@ -2087,7 +2087,7 @@ onUnmounted(() => {
width: 112px; width: 112px;
height: 48px; height: 48px;
background: var(--color-main-active); background: var(--color-main-active);
margin-left: 18px; margin-left: 21px;
color: #fff; color: #fff;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 20px; font-size: 20px;
...@@ -2188,7 +2188,7 @@ onUnmounted(() => { ...@@ -2188,7 +2188,7 @@ onUnmounted(() => {
line-height: 30px; line-height: 30px;
} }
.info1-box-right { .info1-box-right {
margin-left: 64px; margin-left: 40px;
height: 30px; height: 30px;
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -2347,7 +2347,7 @@ onUnmounted(() => { ...@@ -2347,7 +2347,7 @@ onUnmounted(() => {
width: 24px; width: 24px;
height: 22px; height: 22px;
margin-left: 18px; margin-left: 18px;
margin-top: 18px; margin-top: 13px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -2574,11 +2574,12 @@ onUnmounted(() => { ...@@ -2574,11 +2574,12 @@ onUnmounted(() => {
width: 657px; width: 657px;
margin-left: 20px; margin-left: 20px;
.right-top { .right-top {
margin-top: 16px;
width: 657px; width: 657px;
height: 24px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.title { .title {
margin-top: 13px;
width: 440px; width: 440px;
height: 24px; height: 24px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
...@@ -2593,13 +2594,12 @@ onUnmounted(() => { ...@@ -2593,13 +2594,12 @@ onUnmounted(() => {
.time { .time {
flex: 1; flex: 1;
text-align: right; text-align: right;
height: 22px; height: 24px;
margin-top: 19px;
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 22px; line-height: 24px;
overflow: hidden; overflow: hidden;
} }
} }
......
src/views/bill/billHome/utils/multiLineChart.js
浏览文件 @ a21ce506
...@@ -28,7 +28,7 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => { ...@@ -28,7 +28,7 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => {
legend: { legend: {
data: ['提出法案', '通过法案', '通过率'], data: ['提出法案', '通过法案', '通过率'],
show: true, show: true,
top: 0, top: 10,
icon: 'circle', icon: 'circle',
textStyle: { textStyle: {
color: 'rgba(95, 101, 108, 1)', color: 'rgba(95, 101, 108, 1)',
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论