Skip to content

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

暂存

上级 15c01871
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 617 行增加 和 15 行删除
src/components/button/button.vue 0 → 100644
浏览文件 @ dfb2af28
<template>
<div class="button" @click="emit('click')" :class="{ activeButton: isActive }">
<slot name="default"></slot>
</div>
</template>
<script setup>
const props = defineProps({
isActive: {
type: Boolean,
default: false
}
});
const emit = defineEmits(["click"]);
</script>
<style lang="scss" scoped>
.button {
/* 复选标签 */
height: 28px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: 1px solid rgb(230, 231, 232);
border-radius: 4px;
background-color: rgb(255, 255, 255);
color: rgb(59, 65, 75);
font-size: 16px;
font-weight: 400;
cursor: pointer;
padding-left: 8px;
padding-right: 8px;
}
.activeButton {
border: 1px solid rgb(10, 87, 166);
background: rgb(246, 250, 255);
color: rgb(10, 87, 166);
}
</style>
src/components/buttonList/buttonList.vue 0 → 100644
浏览文件 @ dfb2af28
<template>
<div class="buttonList" :style="{ gap: gap + 'px' }">
<Button class="button" @click="setActiveIndex(item)" :is-active="isActive(item)" v-for="item in list" :key="item.id">
<slot name="item" :item="item">
{{ item.text }}
</slot>
</Button>
</div>
</template>
<script setup>
import { ref } from "vue";
import Button from "../button/button.vue";
const props = defineProps({
activeId: {
type: [Number, Array],
default: 0
},
gap: {
type: Number,
default: 8
},
multiple: {
type: Boolean,
default: false
},
list: {
type: Array,
default: function () {
return [];
}
}
});
const emit = defineEmits(["click"]);
const isActive = item => {
if (!props.multiple) {
return item.id === props.activeId;
} else {
return props.activeId.includes(item.id);
}
};
function setActiveIndex(item) {
if (!props.multiple) {
if (props.activeId === item.id) {
return;
}
emit("click", item.id);
} else {
let idList;
if (props.activeId.includes(item.id)) {
idList = props.activeId.filter(currentId => currentId !== item.id);
} else {
idList = props.activeId.concat(item.id);
}
emit("click", idList);
}
}
</script>
<style lang="scss" scoped>
.buttonList {
display: flex;
gap: 8px;
}
</style>
src/router/index.js
浏览文件 @ dfb2af28
......@@ -243,17 +243,6 @@ const routes = [
}
]
},
// 出口管制首页
{
path: "/exportControl",
name: "ExportControl",
component: ExportControl,
meta: {
title: "出口管制"
}
},
// 政令首页
{
path: "/decree",
......@@ -379,16 +368,51 @@ const routes = [
}
]
},
// 出口管制首页
{
path: "/exportControl",
name: "ExportControl",
component: ExportControl,
meta: {
title: "出口管制"
}
},
// 出口管制转移过来的页面
{
path: "/exportControl/analysis",
name: "analysis",
path: "/exportControlAnalysis",
name: "exportControlAnalysis",
component: () => import("@/views/exportControl/analysis/index.vue"),
redirect: "/exportControlAnalysis/overview",
meta: {
title: "分析页"
},
children: [
{
path: "overview",
name: "exportControlAnalysisOverview",
component: () => import("@/views/exportControl/analysis/content/overview.vue"),
meta: {
title: "制裁概况"
}
},
{
path: "deepDig",
name: "exportControlAnalysisDeepDig",
component: () => import("@/views/exportControl/analysis/content/deepDig.vue"),
meta: {
title: "深度挖掘"
}
},
{
path: "influence",
name: "exportControlAnalysisInfluence",
component: () => import("@/views/exportControl/analysis/content/influence.vue"),
meta: {
title: "影响分析"
}
},
]
},
{
path: "/exportControl/infoplatform",
name: "infoplatform",
......
src/views/exportControl/analysis/components/mapCharts.vue 0 → 100644
浏览文件 @ dfb2af28
<template>
<div class="mapChartsWrap">
<Echarts :option="mapOption"></Echarts>
</div>
</template>
<script setup>
import Echarts from "@/components/Chart/index.vue";
import { getMapOption } from "../../utils/charts";
import { ref, onMounted, shallowRef } from "vue";
const mapOption = shallowRef({});
onMounted(() => {
mapOption.value = getMapOption();
});
</script>
<style lang="scss" scoped>
.mapChartsWrap {
width: 100%;
height: 100%;
}
</style>
src/views/exportControl/analysis/components/panel1.vue 0 → 100644
浏览文件 @ dfb2af28
<template>
<div class="panel1Wrap">
<div class="row">
<CardCustom title="实体清单制裁强度" :style="{ width: '798px', height: '422px' }">
<div class="sunPanel1"></div>
</CardCustom>
<CardCustom title="新增实体数量增长趋势" :style="{ width: '798px', height: '422px' }">
<div class="sunPanel2"></div>
</CardCustom>
</div>
<div class="row">
<CardCustom title="实体清单更新频率" :style="{ width: '798px', height: '422px' }">
<div class="sunPanel3"></div>
</CardCustom>
<CardCustom title="重点实体列表" :style="{ width: '798px', height: '422px' }">
<div class="sunPanel4"></div>
</CardCustom>
</div>
</div>
</template>
<script setup>
import CardCustom from "../../components/CardCustom.vue";
</script>
<style lang="scss" scoped>
.panel1Wrap {
width: 1600px;
margin: 0px auto 0 auto;
padding-bottom: 20px;
}
.row {
display: flex;
flex-direction: row;
gap: 16px;
margin-top: 15px;
}
.subPanel1 {
height: 100%;
padding: 2px 24px 0 24px;
display: flex;
}
</style>
src/views/exportControl/analysis/components/panel2.vue 0 → 100644
浏览文件 @ dfb2af28
<template>
<div class="panel2">panel2</div>
</template>
<script setup></script>
<style lang="scss" scoped></style>
src/views/exportControl/analysis/components/panel3.vue 0 → 100644
浏览文件 @ dfb2af28
<template>
<div class="panel3">panel3</div>
</template>
<script setup></script>
<style lang="scss" scoped></style>
src/views/exportControl/analysis/components/panel4.vue 0 → 100644
浏览文件 @ dfb2af28
<template>
<div class="panel4">panel4</div>
</template>
<script setup></script>
<style lang="scss" scoped></style>
src/views/exportControl/analysis/components/pieCharts.vue 0 → 100644
浏览文件 @ dfb2af28
<template>
<div class="pieChartsWrap">
<div class="item">
<Echarts :option="pie1Option"></Echarts>
</div>
<div class="item">
<Echarts :option="pie2Option"></Echarts>
</div>
</div>
</template>
<script setup>
import Echarts from "@/components/Chart/index.vue";
import { getPieOption } from "../../utils/charts";
import { ref, onMounted, shallowRef } from "vue";
const pie1Option = shallowRef({});
const pie2Option = shallowRef({});
onMounted(() => {
pie1Option.value = getPieOption(
[
{ name: "能源领域", value: 30 },
{ name: "集成电路领域", value: 20 },
{ name: "人工智能领域", value: 12 },
{ name: "通信网络领域", value: 18 },
{ name: "量子科技领域", value: 10 },
{ name: "生物科技领域", value: 10 }
],
"领域分布"
);
pie2Option.value = getPieOption(
[
{ name: "能源领域", value: 30 },
{ name: "集成电路领域", value: 20 },
{ name: "人工智能领域", value: 12 },
{ name: "通信网络领域", value: 18 },
{ name: "量子科技领域", value: 10 },
{ name: "生物科技领域", value: 10 }
],
"类别分布"
);
});
</script>
<style lang="scss" scoped>
.pieChartsWrap {
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
gap: 16px;
padding-top: 6px;
.item {
width: 460px;
height: 388px;
background-color: rgba(231, 243, 255, 0.5);
}
}
</style>
src/views/exportControl/analysis/content/deepDig.vue 0 → 100644
浏览文件 @ dfb2af28
<template>
<div class="deepDig">
<div class="row">
<div class="panelButtonList">
<div
class="item"
:class="{ activeItem: activePanelId === item.id }"
v-for="item in panelListData"
:key="item.id"
@click="setActivePanelId(item.id)"
>
<div
class="line"
:class="{
lineActive: activePanelId === item.id,
lineUp: activePanelId !== item.id && item.isUp,
lineDown: activePanelId !== item.id && !item.isUp
}"
></div>
<div class="infoWrap">
<div
class="number"
:class="{
numberActive: activePanelId === item.id,
numberUp: activePanelId !== item.id && item.isUp,
numberDown: activePanelId !== item.id && !item.isUp
}"
>
{{ item.number }}
</div>
<div class="name">{{ item.name }}</div>
</div>
<div class="text">较上次{{ item.isUp ? "增加" : "减少" }}{{ item.ComparisonNumber }}个</div>
<div
class="icon"
:class="{
iconActiveUp: activePanelId === item.id && item.isUp,
iconActiveDown: activePanelId === item.id && !item.isUp,
iconUp: activePanelId !== item.id && item.isUp,
iconDown: activePanelId !== item.id && !item.isUp
}"
></div>
</div>
</div>
</div>
<div class="row">
<panel1 v-if="activePanelId === panelListData[0].id"></panel1>
<panel2 v-if="activePanelId === panelListData[1].id"></panel2>
<panel3 v-if="activePanelId === panelListData[2].id"></panel3>
<panel4 v-if="activePanelId === panelListData[3].id"></panel4>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import Panel1 from "../components/panel1.vue";
import Panel2 from "../components/panel2.vue";
import Panel3 from "../components/panel3.vue";
import Panel4 from "../components/panel4.vue";
const panelListData = [
{
id: 1,
name: "新增实体数量",
number: "37",
isUp: true,
ComparisonNumber: "31"
},
{
id: 2,
name: "上市企业数量",
number: "6",
isUp: true,
ComparisonNumber: "2"
},
{
id: 3,
name: "涉及领域数量",
number: "2",
isUp: false,
ComparisonNumber: "1"
},
{
id: 4,
name: "实体类别数量",
number: "4",
isUp: true,
ComparisonNumber: "1"
}
];
const activePanelId = ref(panelListData[0].id);
const setActivePanelId = id => {
activePanelId.value = id;
};
</script>
<style lang="scss" scoped>
.deepDig {
width: 1600px;
margin: 0px auto 0 auto;
padding-bottom: 20px;
}
.row {
display: flex;
flex-direction: row;
gap: 16px;
margin-top: 15px;
}
.panelButtonList {
display: flex;
justify-content: center;
gap: 16px;
.item {
width: 388px;
height: 80px;
border-radius: 4px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
display: flex;
align-items: center;
cursor: pointer;
.line {
width: 4px;
height: 49px;
margin-right: 26px;
}
.lineActive {
background-color: rgba(255, 255, 255, 1);
}
.lineUp {
background-color: rgba(206, 79, 81, 1);
}
.lineDown {
background-color: rgba(33, 129, 57, 1);
}
.infoWrap {
flex: 1;
display: flex;
flex-direction: column;
.number {
font-size: 30px;
font-weight: 700;
line-height: 24px;
}
.numberActive {
color: rgba(255, 255, 255, 1);
}
.numberUp {
color: rgba(206, 79, 81, 1);
}
.numberDown {
color: rgba(33, 129, 57, 1);
}
.name {
color: rgba(34, 41, 52, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
.text {
color: rgba(34, 41, 52, 1);
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
.icon {
width: 32px;
height: 32px;
margin-right: 15px;
margin-left: 8px;
background-size: 100% 100%;
}
.iconActiveUp {
background-image: url("../../assets/images/activeUp.png");
}
.iconActiveDown {
background-image: url("../../assets/images/activeDown.png");
}
.iconUp {
background-image: url("../../assets/images/UnActiveUp.png");
}
.iconDown {
background-image: url("../../assets/images/UnActiveDown.png");
}
}
.activeItem {
background-color: rgba(5, 95, 194, 1);
.infoWrap {
.name {
color: rgba(255, 255, 255, 1);
}
}
.text {
color: rgba(255, 255, 255, 1);
}
}
}
</style>
src/views/exportControl/components/CardCustom.vue 0 → 100644
浏览文件 @ dfb2af28
<template>
<el-card class="card">
<div class="wrap">
<div class="header" :style="{ height: headerHeight }">
<div class="iconWrap"></div>
<div class="titleWrap">
{{ title }}
</div>
<div class="rightWrap">
<slot name="right"> </slot>
<div class="ButtonWrap">
<div class="button buttonXiazai"></div>
<div class="button buttonShoucang"></div>
</div>
</div>
</div>
<div class="body">
<slot name="default"> </slot>
</div>
</div>
</el-card>
</template>
<script setup>
import { Edit, Plus } from "@element-plus/icons-vue";
const emit = defineEmits(["moreClick"]);
defineProps({
titleBackgroundColor: {
type: String,
default: "red"
},
titleColor: {
type: String,
default: "#fff"
},
titleTextAlign: {
type: String,
default: "center"
},
lineColor: {
type: String,
default: "transparent"
},
title: {
type: String,
default: "风险信号"
},
iconWidth: {
type: String,
default: "60px"
},
headerHeight: {
type: String,
default: "56px"
}
});
function moreClick() {
emit("moreClick");
}
</script>
<style lang="scss" scoped>
.card {
position: relative;
:deep(.el-card__body) {
padding: 0;
height: 100%;
}
}
.wrap {
height: 100%;
display: flex;
flex-direction: column;
}
.header {
height: 56px;
display: flex;
flex-direction: row;
align-items: center;
z-index: 1;
position: relative;
flex-shrink: 0;
padding-right: 12px;
}
.iconWrap {
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: var(--color-main-active);
}
.titleWrap {
margin-left: 16px;
height: 16px;
line-height: 16px;
color: var(--color-main-active);
font-size: 16px;
font-weight: 600;
line-height: 16px;
}
.rightWrap {
display: flex;
justify-content: end;
align-items: center;
flex: 1;
}
.ButtonWrap {
display: flex;
align-items: center;
.button {
width: 28px;
height: 28px;
background-size: 100% 100%;
cursor: pointer;
}
.buttonXiazai {
background-image: url("../assets/images/xiazaiIcon.png");
margin-right: 4px;
}
.buttonShoucang {
background-image: url("../assets/images/shoucangIcon.png");
}
}
.body {
flex: 1;
min-height: 0;
}
</style>
src/views/exportControl/index.vue
浏览文件 @ dfb2af28
......@@ -674,7 +674,7 @@ const handleBackHome = () => {
const handleToDetail = () => {
router.push({
path: "/exportControl/analysis"
path: "/exportControlAnalysis"
});
};
......
浏览文件 @ dfb2af28
No preview for this file type
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论