Skip to content

R
risk-monitor
提交 1111a47d authored 作者: coderBryanFu's avatar coderBryanFu
浏览文件
操作

update

上级 6de917f9
隐藏空白字符变更
内嵌 并排
正在显示 包含 233 行增加 和 68 行删除
src/App.vue
浏览文件 @ 1111a47d
......@@ -10,12 +10,14 @@
<div class="title-box">
<div
class="title"
:aria-disabled="item.disabled"
v-for="(item, index) in homeTitleList"
:key="index"
@mouseenter="handleShowMenu(index, true)"
@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>
</div>
......@@ -28,7 +30,7 @@
<img src="@/assets/icons/overview/search.png" alt="" />
</div>
</div>
<div class="info-box">
<div class="info-box" aria-disabled="true">
<div class="mail">
<img src="@/assets/icons/overview/mail.png" alt="" />
</div>
......@@ -78,6 +80,21 @@
</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="icon">
<img src="@/assets/icons/ai-icon.png" alt="" />
......@@ -168,7 +185,7 @@ const handleGetPersonType = async () => {
const isCurrentOverview = computed(() => {
if (route.path === "/ZMOverView") {
return true
return true;
} else {
return false;
}
......@@ -178,15 +195,18 @@ const isCurrentOverview = computed(() => {
const homeTitleList = ref([
{
name: "中美科技博弈",
path: "/ZMOverView"
path: "/ZMOverView",
disabled: false
},
{
name: "主要国家科技动向感知",
path: ""
path: "",
disabled: true
},
{
name: "主要国家竞争科技安全",
path: ""
path: "",
disabled: true
}
]);
......@@ -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 {
position: absolute;
bottom: 240px;
......@@ -657,7 +718,7 @@ body {
}
:deep(.el-input__wrapper) {
height: 34px;
height: 100%;
box-shadow: none;
border-radius: 10px;
background: transparent;
......@@ -669,4 +730,23 @@ body {
:deep(.el-input__wrapper.is-focus) {
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>
src/components/dialog.vue
浏览文件 @ 1111a47d
......@@ -87,7 +87,8 @@ const handleInfoClick = () => {
border-radius: 12px;
padding: 10px 16px;
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 {
......
src/views/ZMOverView/components/gameProfile/index.vue
浏览文件 @ 1111a47d
......@@ -9,11 +9,23 @@
<div style="display: flex; height: 650px; width: 100%">
<div style="width: 50%">
<div
style="display: flex; justify-content: space-between; margin-right: 50px; line-height: 32px;align-items: center;">
style="
display: flex;
justify-content: space-between;
margin-right: 50px;
line-height: 32px;
align-items: center;
"
>
<div style="display: flex; margin-left: 50px">
数据来源:
<el-select class="select-item" size="default" style="margin-left: 15px; width: 240px; height: 32px"
v-model="origin" @change="handleGetCompare()">
<el-select
class="select-item"
size="default"
style="margin-left: 15px; width: 240px; height: 32px"
v-model="origin"
@change="handleGetCompare()"
>
<el-option :value="value.id" :label="value.name" v-for="value in originList" />
</el-select>
</div>
......@@ -27,22 +39,30 @@
<div style="width: 672px; height: 486px; padding-top: 50px" id="char"></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-column prop="targetName" label="指标名称" sortable width="350" />
<el-table-column prop="chinaScore" label="中国">
<template #default="scope">
<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" />
<el-progress
:percentage="scope.row.chinaScore"
:stroke-width="20"
class="left-progress"
:show-text="false"
/>
</div>
</template>
</el-table-column>
<el-table-column prop="usScore" label="美国">
<template #default="scope">
<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" />
<el-progress
:percentage="scope.row.usScore"
:stroke-width="20"
class="right-progress"
:show-text="false"
/>
</div>
</template>
</el-table-column>
......@@ -60,13 +80,20 @@
</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" />
<div
v-for="(value, index) in btnList"
:key="index"
class="btn-item disabled"
:style="{
background: value.background
}"
>
<img :src="value.img" style="width: 22px; height: 19px; margin: 0 22px" />
{{ value.text }}
<img :src="`/public/icon/ZM/btn-icon-arrow.png`"
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>
......@@ -79,7 +106,16 @@ import Timeline from "./Timeline.vue";
import tableShow from "./tableShow.vue";
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 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([
{
......@@ -135,17 +171,16 @@ const course = ref([
}
]);
const originList = ref([])
const origin = ref('')
const originList = ref([]);
const origin = ref("");
//数据来源
const handleGetChartDict = async () => {
try {
const res = await getChartDict();
console.log("数据来源", res);
if (res.code === 200 && res.data) {
originList.value = res.data
origin.value = res.data[0].id
originList.value = res.data;
origin.value = res.data[0].id;
}
} catch (error) {
console.error("获取数据来源error", error);
......@@ -154,11 +189,10 @@ const handleGetChartDict = async () => {
//中美科技实力对比
const handleGetCompare = async () => {
try {
const res = await getCompare(origin.value);
console.log("中美科技实力对比", res);
if (res.code === 200 && res.data) {
tableData.value = res.data
tableData.value = res.data;
const secondLevelData = res.data[0].children;
const indicatorNames = secondLevelData.map(item => item.targetName);
const chinaScores = secondLevelData.map(item => item.chinaScore);
......@@ -167,16 +201,11 @@ const handleGetCompare = async () => {
const myChart = echarts.init(dom);
const radarOption = {
indicatorNames: indicatorNames,
data: [
chinaScores,
usScores
]
data: [chinaScores, usScores]
};
const option = radarChart(
radarOption.indicatorNames, radarOption.data
);
const option = radarChart(radarOption.indicatorNames, radarOption.data);
myChart.setOption(option);
console.log(radarOption)
console.log(radarOption);
}
} catch (error) {
console.error("获取中美科技实力对比error", error);
......@@ -186,20 +215,19 @@ const handleGetCompare = async () => {
//中美博弈概览V2:领域打压遏制时间线
const handlegetTechnologyGameAnalysis = async () => {
try {
const res = await getTechnologyGameAnalysis();
console.log("中美科技博弈分析", res);
if (res.code === 200 && res.data) {
course.value = res.data
course.value = res.data;
}
} catch (error) {
console.error("获取中美科技博弈分析error", error);
}
};
onMounted(async () => {
await handleGetChartDict()
await handleGetCompare()
await handlegetTechnologyGameAnalysis()
await handleGetChartDict();
await handleGetCompare();
await handlegetTechnologyGameAnalysis();
// const dom = document.getElementById("char");
// const myChart = echarts.init(dom);
......@@ -298,35 +326,43 @@ const tableData = ref([
const btnList = ref([
{
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: "制裁内容快速摘要",
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: "重点领域博弈历程分析",
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: "制裁手段关联分析",
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: "政要人物画像",
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: "人物关系挖掘",
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: "人物立场分析",
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: "制裁内容比对分析",
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>
......@@ -521,4 +557,12 @@ const btnList = ref([
letter-spacing: 0px;
text-align: center;
}
.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
filter: grayscale(50%);
background-color: #f5f5f5 !important;
}
</style>
src/views/ZMOverView/index.vue
浏览文件 @ 1111a47d
......@@ -63,14 +63,16 @@
<div class="info-item-left">
<img :src="logo1" alt="" />
<div class="info-item-left-content">
<p>地址：北京市海淀区复兴路15号 邮编：100038</p>
<p>办公电话：010-58882033 办公传真：010-58882590</p>
<p>中国科学技术信息研究所 版权所有 京ICP备10027328号</p>
<p>地址：北京市海淀区复兴路某某某某某某 邮编：100000</p>
<p>办公电话：000-88888888 办公传真：000-88888888</p>
<p>中国中国中国中国中国北京 版权所有 京ICP备00000000号</p>
</div>
</div>
<div class="info-item-right">
<img :src="logo2" alt="" />
<img :src="logo3" alt="" />
<img class="img1" :src="logo2" alt="" />
<img class="img2" :src="logo3" alt="" />
<div class="text2">{{ "中国某某某某某某某某部" }}</div>
<div class="text3">{{ "中国某某某某某某某某所" }}</div>
</div>
</div>
</div>
......@@ -110,6 +112,11 @@ const navList = ref([
]);
const handleScrollTo = id => {
if (id === "tech-news") {
const route = router.resolve("/newsBrief");
window.open(route.href, "_blank");
return;
}
const element = document.getElementById(id);
const container = document.querySelector(".content-box");
if (element && container) {
......@@ -391,12 +398,45 @@ const handleDateClick = type => {
.info-item-right {
display: flex;
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;
height: 48.8px;
margin-right: 24px;
}
img:last-child {
.img2 {
width: 300px;
height: 43.5px;
}
......
src/views/bill/billHome/index.vue
浏览文件 @ 1111a47d
......@@ -2071,13 +2071,13 @@ onUnmounted(() => {
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 0 40px 0 30px;
padding: 0 40px 0 21px;
.box1-header-left {
display: flex;
.icon {
width: 18px;
height: 18px;
margin-top: 19px;
margin-top: 15px;
img {
width: 100%;
height: 100%;
......@@ -2087,7 +2087,7 @@ onUnmounted(() => {
width: 112px;
height: 48px;
background: var(--color-main-active);
margin-left: 18px;
margin-left: 21px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 20px;
......@@ -2188,7 +2188,7 @@ onUnmounted(() => {
line-height: 30px;
}
.info1-box-right {
margin-left: 64px;
margin-left: 40px;
height: 30px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
......@@ -2347,7 +2347,7 @@ onUnmounted(() => {
width: 24px;
height: 22px;
margin-left: 18px;
margin-top: 18px;
margin-top: 13px;
img {
width: 100%;
height: 100%;
......@@ -2574,11 +2574,12 @@ onUnmounted(() => {
width: 657px;
margin-left: 20px;
.right-top {
margin-top: 16px;
width: 657px;
height: 24px;
display: flex;
justify-content: space-between;
.title {
margin-top: 13px;
width: 440px;
height: 24px;
color: rgba(59, 65, 75, 1);
......@@ -2593,13 +2594,12 @@ onUnmounted(() => {
.time {
flex: 1;
text-align: right;
height: 22px;
margin-top: 19px;
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
line-height: 24px;
overflow: hidden;
}
}
......
src/views/bill/billHome/utils/multiLineChart.js
浏览文件 @ 1111a47d
......@@ -28,7 +28,7 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => {
legend: {
data: ['提出法案', '通过法案', '通过率'],
show: true,
top: 0,
top: 10,
icon: 'circle',
textStyle: {
color: 'rgba(95, 101, 108, 1)',
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论