提交 b4e2f8fc authored 作者: huhuiqing's avatar huhuiqing

Merge branch 'master' of http://8.140.26.4:10003/caijian/risk-monitor into dev_hhq

......@@ -14,6 +14,8 @@
"@microsoft/fetch-event-source": "^2.0.1",
"@traptitech/markdown-it-katex": "^3.6.0",
"axios": "^1.12.2",
"d3": "^7.9.0",
"d3-cloud": "^1.2.7",
"echarts": "^5.4.3",
"echarts-liquidfill": "^3.1.0",
"echarts-wordcloud": "^2.1.0",
......@@ -2364,6 +2366,21 @@
"node": ">=12"
}
},
"node_modules/d3-cloud": {
"version": "1.2.7",
"resolved": "https://registry.npmmirror.com/d3-cloud/-/d3-cloud-1.2.7.tgz",
"integrity": "sha512-8TrgcgwRIpoZYQp7s3fGB7tATWfhckRb8KcVd1bOgqkNdkJRDGWfdSf4HkHHzZxSczwQJdSxvfPudwir5IAJ3w==",
"license": "BSD-3-Clause",
"dependencies": {
"d3-dispatch": "^1.0.3"
}
},
"node_modules/d3-cloud/node_modules/d3-dispatch": {
"version": "1.0.6",
"resolved": "https://registry.npmmirror.com/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
"integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA==",
"license": "BSD-3-Clause"
},
"node_modules/d3-color": {
"version": "3.1.0",
"resolved": "https://registry.npmmirror.com/d3-color/-/d3-color-3.1.0.tgz",
......
......@@ -23,6 +23,8 @@
"@microsoft/fetch-event-source": "^2.0.1",
"@traptitech/markdown-it-katex": "^3.6.0",
"axios": "^1.12.2",
"d3": "^7.9.0",
"d3-cloud": "^1.2.7",
"echarts": "^5.4.3",
"echarts-liquidfill": "^3.1.0",
"echarts-wordcloud": "^2.1.0",
......
......@@ -9,9 +9,9 @@
</div>
<div class="brand-text" @click="handleToHome">
<div class="text-ch">某方向风险监测预警系统</div>
<div class="text-en">
<!-- <div class="text-en">
National Science and Technology Security Risk Monitoring and Early Warning System
</div>
</div> -->
</div>
</div>
<!-- <div class="nav-menu">
......
......@@ -5,11 +5,16 @@
<slot name="header-top"></slot>
</div>
<div class="container-header">
<div class="header-left">
<div class="header-left" :style="{ paddingLeft: block ? 0 : '14px' }">
<slot name="header-left">
<!-- <div class="blue-title-block"></div> -->
<el-image :src="titleIcon" class="header-icon" fit="contain" />
<div v-if="block" class="blue-title-block"></div>
<el-image v-else :src="titleIcon" class="header-icon" fit="contain" />
<div :class="headerTitleClasses">{{ title }}</div>
<div v-if="props.headerNum > 0" class="num-box">
<div class="num">
{{ headerNum }}
</div>
</div>
</slot>
</div>
<div class="header-right">
......@@ -57,6 +62,14 @@ const props = defineProps({
titleType: {
type: String,
default: ""
},
block: {
type: Boolean,
default: false
},
headerNum: {
type: Number,
default: 0
}
});
......@@ -95,6 +108,26 @@ const headerTitleClasses = computed(() => [
display: flex;
align-items: center;
padding-left: 14px;
.num-box {
height: 48px;
width: 35px;
background: rgba(206, 79, 81, 1);
display: flex;
justify-content: flex-start;
align-items: center;
.num {
width: 24px;
height: 20px;
line-height: 20px;
text-align: center;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 12px;
// border: 1px solid rgba(255, 255, 255, 1);
border-radius: 100px;
background: rgba(255, 255, 255, 0.3);
}
}
}
.header-icon {
......@@ -106,9 +139,9 @@ const headerTitleClasses = computed(() => [
.blue-title-block {
width: 8px;
height: 16px;
background-color: var(--base-color);
background-color: $base-color;
/* border-radius: 3px; */
margin-right: 14px;
margin-right: 4px;
}
.header-title {
......@@ -127,7 +160,7 @@ const headerTitleClasses = computed(() => [
}
.header-title-danger {
background: red;
background: rgba(206, 79, 81, 1);
color: white;
}
......
......@@ -53,6 +53,9 @@ import MarketSingleCaseDeepdig from "@/views/marketAccessRestrictions/singleCase
// 投融资限制
import Finance from "@/views/finance/index.vue";
// 新闻事件分析
import NewsAnalysis from "@/views/newsAnalysis/index.vue";
// 智能写报
import WrittingAsstaint from "@/views/writtingAsstaint/index.vue";
// 门户
......@@ -444,6 +447,132 @@ const routes = [
},
// 市场准入限制首页
{
path: "/marketAccessRestrictions",
name: "MarketAccessRestrictions",
component: MarketAccessRestrictions,
meta: {
title: "市场准入限制"
}
},
{
path: "/marketAccessLayout",
name: "MarketAccessLayout",
component: MarketAccessLayout,
redirect: "/marketAccessLayout/overview",
meta: {
title: "市场准入限制布局"
},
children: [
{
path: "overview",
name: "MarketAccessOverview",
component: MarketAccessOverview,
meta: {
title: "调查概况"
}
},
{
path: "case",
name: "MarketAccessCase",
component: MarketAccessCase,
meta: {
title: "调查案件"
}
}
]
},
{
path: "/marketSingleCaseLayout",
name: "MarketSingleCaseLayout",
component: MarketSingleCaseLayout,
redirect: "/marketSingleCaseLayout/overview",
meta: {
title: "单次调查案件布局"
},
children: [
{
path: "overview",
name: "MarketSingleCaseOverview",
component: MarketSingleCaseOverview,
meta: {
title: "调查简介"
}
},
{
path: "deepdig",
name: "MarketSingleCaseDeepdig",
component: MarketSingleCaseDeepdig,
meta: {
title: "深度挖掘"
}
}
]
},
// 出口管制转移过来的页面
{
path: "/exportControl/analysis",
name: "analysis",
component: () => import("@/views/exportControl/analysis/index.vue"),
meta: {
title: "分析页"
}
},
{
path: "/exportControl/infoplatform",
name: "infoplatform",
component: () => import("@/views/exportControl/infoPlatform/index.vue"),
meta: {
title: "信息平台"
}
},
{
path: "/exportControl/rulelimit",
name: "rulelimit",
component: () => import("@/views/exportControl/ruleLimit/index.vue"),
meta: {
title: "规则限制"
}
},
{
path: "/exportControl/ruledetail",
name: "ruledetail",
component: () => import("@/views/exportControl/ruleDetail/index.vue"),
meta: {
title: "规则详情"
}
},
{
path: "/exportControl/researchfunding",
name: "researchfunding",
component: () => import("@/views/exportControl/researchFunding/index.vue"),
meta: {
title: "科研资助"
}
},
// 投融资限制
{
path: "/finance",
name: "finance",
component: Finance,
meta: {
title: "投融资限制"
}
},
// 新闻事件分析
{
path: "/newsAnalysis",
name: "newsAnalysis",
component: NewsAnalysis,
meta: {
title: "新闻事件分析"
}
},
// 门户
{
path: "/portal1",
......@@ -478,15 +607,7 @@ const routes = [
meta: {
title: "搜索结果"
}
},
{
path: "/chat",
name: "chat",
component: Chat,
meta: {
title: "智能问答"
}
},
];
const router = createRouter({
......
......@@ -2,6 +2,8 @@
--color-main-active: rgba(5, 95, 194, 1);
--color-main-primay: rgba(59, 65, 75, 1);
--color-bg-hover: #e7f3ff;
/* 普通按钮颜色 */
--btn-plain-border-color: rgba(230, 231, 232, 1);
--btn-plain-bg-color: rgba(255, 255, 255, 1);
......
// 平滑滚动到指定元素
const scrollToCenter = (elementId) => {
const element = document.getElementById(elementId);
if (element) {
element.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
}
}
export default scrollToCenter
\ No newline at end of file
// 平滑滚动到指定元素
const scrollToTop = (elementId) => {
const element = document.getElementById(elementId);
if (element) {
element.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
}
export default scrollToTop
\ No newline at end of file
......@@ -11,19 +11,19 @@
</div>
</div>
<div class="home-main-header-btn-box">
<div class="btn">
<div class="btn" @click="handleToPosi('position1')">
<div class="btn-text">{{ "最新动态" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
<div class="btn">
<div class="btn" @click="handleToPosi('position2')">
<div class="btn-text">{{ "资讯要闻" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
<div class="btn">
<div class="btn" @click="handleToPosi('position3')">
<div class="btn-text">{{ "统计概览" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
<div class="btn">
<div class="btn" @click="handleToPosi('position4')">
<div class="btn-text">{{ "资源库" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
......@@ -71,25 +71,25 @@
</div>
</div>
<div class="home-main-header-btn-box">
<div class="btn">
<div class="btn" @click="handleToPosi('position1')">
<div class="btn-text">{{ "最新动态" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
<div class="btn">
<div class="btn" @click="handleToPosi('position2')">
<div class="btn-text">{{ "资讯要闻" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
<div class="btn">
<div class="btn" @click="handleToPosi('position3')">
<div class="btn-text">{{ "统计概览" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
<div class="btn">
<div class="btn" @click="handleToPosi('position4')">
<div class="btn-text">{{ "资源库" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
</div>
</div>
<DivideHeader class="divide1" :titleText="'最新动态'"></DivideHeader>
<DivideHeader id="position1" class="divide1" :titleText="'最新动态'"></DivideHeader>
<div class="home-main-center">
<div class="center-top">
<div class="box1">
......@@ -110,7 +110,7 @@
</div>
<div class="title">{{ "热门法案" }}</div>
</div>
<div class="box1-header-right" @click="handleClickToDetail()">
<div class="box1-header-right">
{{ "查看详情 >" }}
</div>
</div>
......@@ -193,7 +193,12 @@
</div>
</div>
<div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in warningList" :key="index">
<div
class="box2-main-item"
v-for="(item, index) in warningList"
:key="index"
@click="handleClickToDetail()"
>
<div
class="item-left"
:class="{
......@@ -211,7 +216,7 @@
</div>
</div>
</div>
<div class="box2-footer">
<div class="box2-footer" @click="handleToMoreRiskSignal">
<div class="icon">
<img src="./assets/images/box2-footer-icon.png" alt="" />
</div>
......@@ -219,7 +224,7 @@
</div>
</div>
</div>
<DivideHeader class="divide2" :titleText="'资讯要闻'"></DivideHeader>
<DivideHeader id="position2" class="divide2" :titleText="'资讯要闻'"></DivideHeader>
<div class="center-center">
<div class="box3">
<div class="box3-header">
......@@ -228,7 +233,7 @@
<img src="./assets/images/box3-header-icon.png" alt="" />
</div>
<div class="box3-header-title">{{ "新闻资讯" }}</div>
<div class="more">{{ "更多 +" }}</div>
<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
</div>
</div>
<div class="box3-main">
......@@ -270,7 +275,7 @@
</div>
</div>
</div>
<DivideHeader class="divide3" :titleText="'统计概览'"></DivideHeader>
<DivideHeader id="position3" class="divide3" :titleText="'统计概览'"></DivideHeader>
<div class="center-footer">
<div class="box5">
<div class="box5-header">
......@@ -410,7 +415,7 @@
</div>
</div>
<div class="home-main-footer">
<DivideHeader class="divide4" :titleText="'资源库'"></DivideHeader>
<DivideHeader id="position4" class="divide4" :titleText="'资源库'"></DivideHeader>
<div class="home-main-footer-header">
<div class="btn-wrapper">
<div class="btn-box">
......@@ -450,7 +455,7 @@
</div>
</div>
<div class="home-main-footer-main">
<div class="main-item" v-for="(bill, index) in curBillList" :key="index">
<div class="main-item" v-for="(bill, index) in curBillList" :key="index" @click="handleClickToDetail">
<div
class="status-box"
:class="{
......@@ -515,7 +520,7 @@
</template>
<script setup>
import { onMounted, ref, computed } from "vue";
import { onMounted, ref, computed, onUnmounted, nextTick } from "vue";
import * as echarts from "echarts";
import router from "@/router/index";
......@@ -523,6 +528,7 @@ import { getHotBills, getBillsByType, getHylyList } from "@/api/home";
import DivideHeader from "@/components/DivideHeader.vue";
import { useContainerScroll } from "@/hooks/useScrollShow";
import scrollToCenter from "@/utils/scrollToCenter";
import headerIcon1 from "./assets/icons/header-icon1.png";
import headerIcon2 from "./assets/icons/header-icon2.png";
......@@ -621,7 +627,21 @@ const curBill = ref({
// 查看详情
const handleClickToDetail = () => {
window.sessionStorage.setItem("billId", curBill.value.billId);
router.push("/billLayout");
// router.push("/billLayout");
const route = router.resolve("/billLayout");
window.open(route.href, "_blank");
};
// 查看更多风险信号
const handleToMoreRiskSignal = () => {
const route = router.resolve("/riskSignal");
window.open(route.href, "_blank");
};
// 查看更多新闻资讯
const handleToMoreNews = () => {
const route = router.resolve("/newsBrief");
window.open(route.href, "_blank");
};
// 风险信号
......@@ -1202,10 +1222,26 @@ const box8Data = ref([
const box9ChartColorList = ref(["#4096FF", "#FFA39E", "#ADC6FF", "#FFC069", "#B5F5EC", "#B37FEB", "#D6E4FF"]);
const handleToPosi = id => {
// 0 618 1240 2350
switch (id) {
case "position2":
containerRef.value.scrollTop = isShow.value ? 634 : 980;
break;
case "position3":
containerRef.value.scrollTop = isShow.value ? 1204 : 1550;
break;
case "position4":
containerRef.value.scrollTop = isShow.value ? 2334 : 2680;
break;
default:
containerRef.value.scrollTop = 0;
}
};
onMounted(async () => {
handleGetHylyList();
await handleGetHotBills();
curBill.value = hotBillList.value[0];
// handleGetBillsByType();
let chart1 = getMultiLineChart(chart1Data.value.title, chart1Data.value.data[0].value, chart1Data.value.data[1].value);
setChart(chart1, "chart1");
......@@ -1218,7 +1254,12 @@ onMounted(async () => {
const box9Chart = getPieChart(box9ChartData.value, box9ChartColorList.value);
setChart(box9Chart, "box9Chart");
await handleGetHotBills();
curBill.value = hotBillList.value[0];
});
onUnmounted(() => {});
</script>
<style lang="scss" scoped>
......@@ -1848,6 +1889,10 @@ onMounted(async () => {
height: 47px;
width: 464px;
display: flex;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.itemLeftStatus1 {
color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important;
......@@ -2685,6 +2730,7 @@ onMounted(async () => {
margin-bottom: 24px;
margin-right: 25px;
position: relative;
cursor: pointer;
.status-box {
position: absolute;
top: 15px;
......
......@@ -11,19 +11,19 @@
</div>
</div>
<div class="home-main-header-btn-box">
<div class="btn">
<div class="btn" @click="handleToPosi('position1')">
<div class="btn-text">{{ "最新动态" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
<div class="btn">
<div class="btn" @click="handleToPosi('position2')">
<div class="btn-text">{{ "资讯要闻" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
<div class="btn">
<div class="btn-text">{{ "统计概览" }}</div>
<div class="btn" @click="handleToPosi('position3')">
<div class="btn-text">{{ "数据总览" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
<div class="btn">
<div class="btn" @click="handleToPosi('position4')">
<div class="btn-text">{{ "资源库" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
......@@ -70,19 +70,19 @@
</div>
</div>
<div class="home-main-header-btn-box" v-show="!isShow">
<div class="btn">
<div class="btn" @click="handleToPosi('position1')">
<div class="btn-text">{{ "最新动态" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
<div class="btn">
<div class="btn" @click="handleToPosi('position2')">
<div class="btn-text">{{ "资讯要闻" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
<div class="btn">
<div class="btn-text">{{ "统计概览" }}</div>
<div class="btn" @click="handleToPosi('position3')">
<div class="btn-text">{{ "数据总览" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
<div class="btn">
<div class="btn" @click="handleToPosi('position4')">
<div class="btn-text">{{ "资源库" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
......@@ -96,7 +96,7 @@
</div>
</div>
</div>
<DivideHeader class="divide" :titleText="'最新动态'"></DivideHeader>
<DivideHeader id="position1" class="divide" :titleText="'最新动态'"></DivideHeader>
<div class="home-main-center">
<div class="center-top">
<div class="box1">
......@@ -117,7 +117,7 @@
</div>
<div class="title">{{ "最新科技政令" }}</div>
</div>
<div class="box1-header-right" @click="handleClickToDetail()">
<div class="box1-header-right">
{{ "查看详情 >" }}
</div>
</div>
......@@ -173,10 +173,14 @@
<div class="text">{{ "风险信号" }}</div>
<div class="num">{{ warningList.length }}</div>
</div>
<div class="more">{{ "更多 +" }}</div>
</div>
<div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in warningList" :key="index">
<div
class="box2-main-item"
v-for="(item, index) in warningList"
:key="index"
@click="handleClickToDetail()"
>
<div
class="item-left"
:class="{
......@@ -194,15 +198,15 @@
</div>
</div>
</div>
<div class="box2-footer">
<div class="box2-footer" @click="handleToMoreRiskSignal">
<div class="icon">
<img src="./assets/images/box2-footer-icon.png" alt="" />
</div>
<div class="text">{{ "风险处理" }}</div>
<div class="text">{{ "查看更多" }}</div>
</div>
</div>
</div>
<DivideHeader class="divide2" :titleText="'资讯要闻'"></DivideHeader>
<DivideHeader id="position2" class="divide2" :titleText="'资讯要闻'"></DivideHeader>
<div class="center-center">
<div class="box3">
<div class="box3-header">
......@@ -211,6 +215,7 @@
<img src="./assets/images/box3-header-icon.png" alt="" />
</div>
<div class="box3-header-title">{{ "新闻资讯" }}</div>
<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
</div>
</div>
<div class="box3-main">
......@@ -439,7 +444,7 @@
</div>
</div>
</div> -->
<DivideHeader class="divide3" :titleText="'数据总览'"></DivideHeader>
<DivideHeader id="position3" class="divide3" :titleText="'数据总览'"></DivideHeader>
<div class="center-footer">
<div class="box3">
<div class="box3-header">
......@@ -505,7 +510,7 @@
</div>
</div>
<div class="home-main-footer">
<DivideHeader class="divide4" :titleText="'资源库'"></DivideHeader>
<DivideHeader id="position4" class="divide4" :titleText="'资源库'"></DivideHeader>
<div class="home-main-footer-header">
<div class="btn-box">
<div
......@@ -549,7 +554,7 @@
<div class="title">{{ "政令库" }}</div>
</div>
<div class="content-box">
<div class="main-item" v-for="(decree, index) in curDecreeList" :key="index">
<div class="main-item" v-for="(decree, index) in curDecreeList" :key="index" @click="handleClickToDetail">
<div class="main-item-left">
<div
class="left-box"
......@@ -714,7 +719,21 @@ const tagList = ref([
]);
// 点击查看详情
const handleClickToDetail = () => {
router.push("/decreeLayout");
// router.push("/decreeLayout");
const route = router.resolve("/decreeLayout");
window.open(route.href, "_blank");
};
// 查看更多风险信号
const handleToMoreRiskSignal = () => {
const route = router.resolve("/riskSignal");
window.open(route.href, "_blank");
};
// 查看更多新闻资讯
const handleToMoreNews = () => {
const route = router.resolve("/newsBrief");
window.open(route.href, "_blank");
};
// 风险信号
......@@ -1075,6 +1094,24 @@ const calendarData = ref([
["2025-10-21", 190]
]);
const handleToPosi = id => {
// 0 618 1240 2350
switch (id) {
case "position2":
// containerRef.value.scrollTop = isShow.value ? 744 : 1090;
containerRef.value.scrollTop = isShow.value ? 844 : 1190;
break;
case "position3":
containerRef.value.scrollTop = isShow.value ? 1480 : 1826;
break;
case "position4":
containerRef.value.scrollTop = isShow.value ? 2554 : 2900;
break;
default:
containerRef.value.scrollTop = 0;
}
};
onMounted(async () => {
let chart1 = getBarChart(chart1Data.value.dataX, chart1Data.value.dataY);
setChart(chart1, "chart1");
......@@ -1649,6 +1686,10 @@ onMounted(async () => {
height: 47px;
width: 464px;
display: flex;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.itemLeftStatus1 {
color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important;
......@@ -1700,7 +1741,7 @@ onMounted(async () => {
}
.box2-footer {
position: absolute;
left: 40px;
left: 45px;
bottom: 20px;
width: 430px;
height: 42px;
......@@ -1709,7 +1750,7 @@ onMounted(async () => {
justify-content: center;
align-items: center;
border-radius: 6px;
background: rgba(22, 119, 255, 1);
background: var(--color-main-active);
cursor: pointer;
.icon {
width: 16px;
......@@ -1754,6 +1795,7 @@ onMounted(async () => {
display: flex;
justify-content: space-between;
padding: 0 20px;
position: relative;
.box3-header-left {
display: flex;
.box3-header-icon {
......@@ -1776,6 +1818,19 @@ onMounted(async () => {
line-height: 22px;
}
}
.more {
width: 49px;
height: 24px;
position: absolute;
top: 14px;
right: 27px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
}
}
.box3-main {
height: 402px;
......@@ -2710,6 +2765,10 @@ onMounted(async () => {
display: flex;
height: 84px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
cursor: pointer;
&:hover{
background: var(--color-bg-hover);
}
.main-item-left {
width: 105px;
.left-box {
......
......@@ -2,13 +2,14 @@
<div :class="['clickable-card', { disabled: disabled }]" @click="handleClick">
<span class="card-text">{{ text }}</span>
<!-- <span class="arrow-icon"></span> -->
<el-icon><ArrowRight /></el-icon>
<div class="icon">
<el-icon><ArrowRightBold /></el-icon>
</div>
</div>
</template>
<script setup>
import { defineProps, defineEmits } from "vue";
import { ArrowRight } from "@element-plus/icons-vue";
import { ArrowRight, ArrowRightBold } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
......@@ -51,7 +52,7 @@ const handleClick = () => {
};
</script>
<style scoped>
<style lang="scss" scoped>
.clickable-card {
width: 160px;
height: 48px;
......@@ -69,6 +70,12 @@ const handleClick = () => {
font-size: 20px;
font-weight: 500;
box-sizing: border-box;
position: relative;
.icon{
position: absolute;
top: 14px;
right: 12px;
}
}
.clickable-card:hover {
......
......@@ -19,7 +19,6 @@
</template>
<script setup>
import { defineProps, defineEmits } from "vue";
const props = defineProps({
listData: {
......
......@@ -19,7 +19,6 @@
</template>
<script setup>
import { defineProps, defineEmits } from "vue";
const props = defineProps({
listData: {
......
......@@ -43,25 +43,25 @@
</div>
</div>
<div class="home-main-header-btn-box">
<div class="btn">
<div class="btn" @click="scrollToTop('position1')">
<div class="btn-text">{{ "最新动态" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
<div class="btn">
<div class="btn" @click="scrollToTop('position2')">
<div class="btn-text">{{ "资讯要闻" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
<div class="btn">
<div class="btn" @click="scrollToTop('position3')">
<div class="btn-text">{{ "统计概览" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
<div class="btn">
<div class="btn" @click="scrollToTop('position4')">
<div class="btn-text">{{ "资源库" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
</div>
<div class="home-main-header-card-box">
<div class="home-main-header-card-box-box1 card">
<div class="home-main-header-card-box-box1 card" @click="handleClickToDetail('301')">
<div class="header">
<div class="header-left">{{ "301调查" }}</div>
<div class="header-right">{{ "52项" }}</div>
......@@ -73,7 +73,7 @@
</div>
</div>
</div>
<div class="home-main-header-card-box-box2 card">
<div class="home-main-header-card-box-box2 card" @click="handleClickToDetail('232')">
<div class="header">
<div class="header-left">{{ "232调查" }}</div>
<div class="header-right">{{ "3项" }}</div>
......@@ -85,7 +85,7 @@
</div>
</div>
</div>
<div class="home-main-header-card-box-box3 card">
<div class="home-main-header-card-box-box3 card" @click="handleClickToDetail('337')">
<div class="header">
<div class="header-left">{{ "337调查" }}</div>
<div class="header-right">{{ "87项" }}</div>
......@@ -100,7 +100,7 @@
</div>
</div>
<div class="home-main-center">
<DivideHeader class="divide-header" :titleText="'最新动态'"></DivideHeader>
<DivideHeader id="position1" class="divide-header" :titleText="'最新动态'"></DivideHeader>
<div class="center-top">
<div class="box1">
<div class="box1-left">
......@@ -116,7 +116,7 @@
</div>
<div class="title">{{ "调查进展" }}</div>
</div>
<div class="box1-header-right" @click="handleClickToDetail()">
<div class="box1-header-right">
{{ "查看详情 >" }}
</div>
</div>
......@@ -192,7 +192,6 @@
<div class="text">{{ "风险信号" }}</div>
<div class="num">{{ warningList.length }}</div>
</div>
<div class="more">{{ "更多 >" }}</div>
</div>
<div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in warningList" :key="index">
......@@ -213,7 +212,7 @@
</div>
</div>
</div>
<div class="box2-footer">
<div class="box2-footer" @click="handleToMoreRiskSignal">
<div class="icon">
<img src="./assets/images/box2-footer-icon.png" alt="" />
</div>
......@@ -221,7 +220,7 @@
</div>
</div>
</div>
<DivideHeader class="divide-header" :titleText="'资讯要闻'"></DivideHeader>
<DivideHeader id="position2" class="divide-header" :titleText="'资讯要闻'"></DivideHeader>
<div class="center-center">
<div class="box3">
<div class="box3-header">
......@@ -230,7 +229,7 @@
<img src="./assets/images/header-news.png" alt="" />
</div>
<div class="box3-header-title">{{ "新闻资讯" }}</div>
<div class="more">{{ "更多 +" }}</div>
<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
</div>
</div>
<div class="box3-main">
......@@ -272,7 +271,7 @@
</div>
</div>
</div>
<DivideHeader class="divide-header" :titleText="'数据总览'"></DivideHeader>
<DivideHeader id="position3" class="divide-header" :titleText="'数据总览'"></DivideHeader>
<div class="center-footer">
<div class="box3">
<div class="box3-header">
......@@ -316,7 +315,7 @@
</div>
<div class="home-main-footer">
<DivideHeader class="divide-header" :titleText="'资源库'"></DivideHeader>
<DivideHeader id="position4" class="divide-header" :titleText="'资源库'"></DivideHeader>
<div class="home-main-footer-header">
<div class="btn-box">
<div
......@@ -423,6 +422,7 @@
<script setup>
import { onMounted, ref } from "vue";
import scrollToTop from "@/utils/scrollToTop";
import * as echarts from "echarts";
import router from "@/router";
import DivideHeader from "@/components/DivideHeader.vue";
......@@ -447,8 +447,14 @@ const handleBackHome = () => {
});
};
const handleClickToDetail = () => {
router.push("/marketAccessLayout");
const handleClickToDetail = (id) => {
const route = router.resolve({
path: "/marketAccessLayout",
query: {
id: id
}
});
window.open(route.href, "_blank");
};
// 风险信号
......@@ -800,7 +806,17 @@ const messageList = ref([
}
]);
// 获取热门法案
// 查看更多风险信号
const handleToMoreRiskSignal = () => {
const route = router.resolve("/riskSignal");
window.open(route.href, "_blank");
};
// 查看更多新闻资讯
const handleToMoreNews = () => {
const route = router.resolve("/newsBrief");
window.open(route.href, "_blank");
};
onMounted(async () => {
let chart1 = getMultiLineChart(
......@@ -1446,6 +1462,10 @@ onMounted(async () => {
height: 47px;
width: 464px;
display: flex;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.itemLeftStatus1 {
color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important;
......
......@@ -127,6 +127,8 @@
<script setup>
import { ref, onMounted, watch } from "vue";
import router from '@/router'
import { useRoute } from "vue-router";
const route = useRoute();
const releaseTime = ref("近一年发布");
......@@ -350,7 +352,14 @@ watch(
);
const handleToSingleCase = (item) => {
router.push('/marketSingleCaseLayout/overview')
// router.push('/marketSingleCaseLayout/overview')
const curRoute = router.resolve({
path: "/marketSingleCaseLayout/overview",
query: {
id: route.query.id
}
});
window.open(curRoute.href, "_blank");
}
onMounted(() => {
......
......@@ -4,12 +4,12 @@
<div class="header-top">
<div class="left">
<div class="icon">
<img src="./assets/images/img1.png" alt="" />
<img :src="curSurvey.image" alt="" />
</div>
<div class="info">
<div class="title">{{ "337调查" }}</div>
<div class="title">{{ curSurvey.title }}</div>
<div class="content">
{{ '依据《1974年贸易法》第301条针对"不合理或不公正贸易做法"' }}
{{ curSurvey.desc }}
</div>
</div>
</div>
......@@ -29,17 +29,10 @@
@click="handleClickBtn(item)"
>
<div class="icon">
<img
:src="item.acitveIcon"
alt=""
v-if="activeBtnName === item.name"
/>
<img :src="item.acitveIcon" alt="" v-if="activeBtnName === item.name" />
<img :src="item.icon" alt="" v-else />
</div>
<div
class="text"
:class="{ textActive: activeBtnName === item.name }"
>
<div class="text" :class="{ textActive: activeBtnName === item.name }">
{{ item.name }}
</div>
</div>
......@@ -58,28 +51,63 @@ import icon1 from "./assets/images/icon1.png";
import icon1Active from "./assets/images/icon1_active.png";
import icon2 from "./assets/images/icon2.png";
import icon2Active from "./assets/images/icon2_active.png";
import Img337 from "./assets/images/337.png";
import Img232 from "./assets/images/232.png";
import { useRoute } from "vue-router";
const route = useRoute();
const btnList = ref([
{
name: "调查概况",
icon: icon1,
acitveIcon: icon1Active,
path: "/marketAccessLayout/overview",
path: "/marketAccessLayout/overview"
},
{
name: "调查案件",
icon: icon2,
acitveIcon: icon2Active,
path: "/marketAccessLayout/case",
path: "/marketAccessLayout/case"
}
]);
const surveyList = ref([
{
title: "337调查",
desc: '依据《1974年贸易法》第301条针对"不合理或不公正贸易做法"',
image: Img337
},
{
title: "232调查",
desc: "依据《1962年贸易扩展法》第232条款,授权美国商务部对“特定进口产品是否威胁或损害美国国家安全”而开展的全面调查。",
image: Img232
}
]);
const curSurvey = ref({
title: "337调查",
desc: '依据《1974年贸易法》第301条针对"不合理或不公正贸易做法"',
image: Img337
});
const activeBtnName = ref("调查概况");
const handleClickBtn = (item) => {
const handleClickBtn = item => {
activeBtnName.value = item.name;
router.push(item.path);
router.push({
path: item.path,
query: {
id: route.query.id
}
});
};
onMounted(() => {
if (route.query.id === "232") {
curSurvey.value = surveyList.value[1];
}
});
</script>
<style lang="scss" scoped>
......
import * as echarts from "echarts";
const getBarChart = (nameList, valueList) => {
const option = {
tooltip: {},
grid: {
top: '3%',
right: '3%',
bottom: '1%',
left: '1%',
containLabel: true
},
xAxis: {
type: 'value',
splitLine: {
show: false
},
show: false
},
yAxis: {
type: 'category',
data: nameList,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true
}
},
series: [{
type: 'bar',
data: valueList,
label: {
show: true,
position: [610, 0],
formatter: function (params) {
return params.value + ' 次'
}
},
barWidth: 8,
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: 'rgba(255,255,255,0)'
},
{
offset: 1,
color: '#1778ff'
}
]);
},
barBorderRadius: 4,
}
}]
}
return option
}
export default getBarChart
\ No newline at end of file
import * as echarts from 'echarts'
import chinaJson from '../../../assets/json/China.json'
const getMapChart = (mapData) => {
echarts.registerMap('china', chinaJson);
// 定义颜色范围
const colorRanges = [
{ range: [0, 4], color: '#8ECFC9', label: '0-4' },
{ range: [5, 9], color: '#FFBE7A', label: '5-9' },
{ range: [10, 19], color: '#FA7F6F', label: '10-19' },
{ range: [20, 30], color: '#AA6FC9', label: '20-30' }
];
const getColorByValue = (value, colorRanges) => {
const range = colorRanges.find(range =>
value >= range.range[0] && value <= range.range[1]
);
return range ? range.color : '#CCCCCC';
}
const option = {
title: {
// text: '全国数据分布图',
// subtext: '数据范围颜色标识',
left: 'center',
textStyle: {
fontSize: 18,
color: '#333'
}
},
tooltip: {
trigger: 'item',
formatter: (params) => {
if (params.componentType === 'series') {
if (params.seriesType === 'scatter') {
return `${params.data.name}<br/>数值: ${params.data.value[2]}`;
} else {
return `${params.name}<br/>数值: ${params.value[2] || 0}`;
}
}
return params.name;
}
},
visualMap: {
type: 'piecewise',
pieces: colorRanges.map(range => ({
min: range.range[0],
max: range.range[1],
label: range.label,
color: range.color
})),
left: 'right',
top: 'bottom',
textStyle: {
color: '#000',
fontSize: 12
},
itemWidth: 20,
itemHeight: 14
},
geo: {
map: 'china',
roam: true,
zoom: 1.2,
label: {
emphasis: {
show: true,
color: '#fff'
}
},
itemStyle: {
areaColor: '#F9FAFC',
borderColor: '#E7F1FF',
borderWidth: 1
},
emphasis: {
itemStyle: {
areaColor: '#ffd700'
},
label: {
show: true,
color: '#fff',
fontSize: 12
}
}
},
series: [
// 地图系列 - 用于省份高亮
{
name: '数据分布',
type: 'map',
map: 'china',
geoIndex: 0,
data: mapData.map(item => ({
name: item.name,
value: item.value,
itemStyle: {
// color: getColorByValue(item.value, colorRanges),
areaColor: '#E7F1FF'
}
})),
emphasis: {
itemStyle: {
areaColor: '#ffd700',
borderColor: '#333',
borderWidth: 2
},
label: {
show: true,
fontSize: 14,
fontWeight: 'bold',
color: '#333'
}
}
},
// 散点系列 - 用于显示圆点数字标记
{
name: '数据标记',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'circle',
symbolSize: (val) => {
// 根据数值大小调整圆点大小
const size = Math.max(20, val[2] * 2);
return Math.min(size, 30);
},
// symbolSize: 30,
label: {
show: true,
formatter: (params) => {
return params.data.value[2];
},
position: 'inside',
color: '#fff',
fontSize: 12,
fontWeight: 'bold'
},
itemStyle: {
color: (params) => {
return getColorByValue(params.data.value, colorRanges);
},
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
data: mapData.map(item => ({
name: item.name,
value: [item.coord[0], item.coord[1], item.value],
itemStyle: {
color: getColorByValue(item.value, colorRanges)
}
})),
emphasis: {
label: {
show: true,
fontSize: 14,
fontWeight: 'bold'
},
itemStyle: {
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.8)'
}
}
}
]
};
return option
}
export default getMapChart
\ No newline at end of file
import * as echarts from 'echarts'
const getMultiLineChart = (dataX, dataY1, dataY2) => {
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
grid: {
top: '8%',
right: '5%',
bottom: '5%',
left: '5%',
containLabel: true
},
legend: {
data: ['提出法案', '通过法案'],
show: false
},
color: ['#1459bb', '#fa8c16'],
xAxis: [
{
type: 'category',
boundaryGap: false,
data: dataX
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '提出法案',
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(22, 119, 255, 0.5)' // 起始颜色
}, {
offset: 1,
color: 'rgba(22, 119, 255, 0)' // 结束颜色
}])
},
emphasis: {
focus: 'series'
},
data: dataY1
},
// {
// name: '通过法案',
// type: 'line',
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: 'rgba(255, 172, 77, 1)' // 起始颜色
// }, {
// offset: 1,
// color: 'rgba(255, 172, 77, 0)' // 结束颜色
// }])
// },
// emphasis: {
// focus: 'series'
// },
// data: dataY2
// }
]
}
}
export default getMultiLineChart
\ No newline at end of file
const getPieChart = (data,colorList) => {
let option = {
color: colorList,
series: [
{
type: 'pie',
radius: [80, 100],
height: '100%',
left: 'center',
width: '100%',
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
label: {
alignTo: 'edge',
formatter: '{name|{b}} {time|{c} 项 {d}%}\n',
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 12,
color: '#999'
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < 556 / 2;
const points = params.labelLinePoints;
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: data
}]
}
return option
}
export default getPieChart;
\ No newline at end of file
import * as echarts from "echarts";
const getBarChart = (nameList, valueList) => {
const option = {
tooltip: {},
grid: {
top: '3%',
right: '3%',
bottom: '1%',
left: '1%',
containLabel: true
},
xAxis: {
type: 'value',
splitLine: {
show: false
},
show: false
},
yAxis: {
type: 'category',
data: nameList,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true
}
},
series: [{
type: 'bar',
data: valueList,
label: {
show: true,
position: [610, 0],
formatter: function (params) {
return params.value + ' 次'
}
},
barWidth: 8,
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: 'rgba(255,255,255,0)'
},
{
offset: 1,
color: '#1778ff'
}
]);
},
barBorderRadius: 4,
}
}]
}
return option
}
export default getBarChart
\ No newline at end of file
import * as echarts from 'echarts'
import chinaJson from '../../../assets/json/China.json'
const getMapChart = (mapData) => {
echarts.registerMap('china', chinaJson);
// 定义颜色范围
const colorRanges = [
{ range: [0, 4], color: '#8ECFC9', label: '0-4' },
{ range: [5, 9], color: '#FFBE7A', label: '5-9' },
{ range: [10, 19], color: '#FA7F6F', label: '10-19' },
{ range: [20, 30], color: '#AA6FC9', label: '20-30' }
];
const getColorByValue = (value, colorRanges) => {
const range = colorRanges.find(range =>
value >= range.range[0] && value <= range.range[1]
);
return range ? range.color : '#CCCCCC';
}
const option = {
title: {
// text: '全国数据分布图',
// subtext: '数据范围颜色标识',
left: 'center',
textStyle: {
fontSize: 18,
color: '#333'
}
},
tooltip: {
trigger: 'item',
formatter: (params) => {
if (params.componentType === 'series') {
if (params.seriesType === 'scatter') {
return `${params.data.name}<br/>数值: ${params.data.value[2]}`;
} else {
return `${params.name}<br/>数值: ${params.value[2] || 0}`;
}
}
return params.name;
}
},
visualMap: {
type: 'piecewise',
pieces: colorRanges.map(range => ({
min: range.range[0],
max: range.range[1],
label: range.label,
color: range.color
})),
left: 'right',
top: 'bottom',
textStyle: {
color: '#000',
fontSize: 12
},
itemWidth: 20,
itemHeight: 14
},
geo: {
map: 'china',
roam: true,
zoom: 1.2,
label: {
emphasis: {
show: true,
color: '#fff'
}
},
itemStyle: {
areaColor: '#F9FAFC',
borderColor: '#E7F1FF',
borderWidth: 1
},
emphasis: {
itemStyle: {
areaColor: '#ffd700'
},
label: {
show: true,
color: '#fff',
fontSize: 12
}
}
},
series: [
// 地图系列 - 用于省份高亮
{
name: '数据分布',
type: 'map',
map: 'china',
geoIndex: 0,
data: mapData.map(item => ({
name: item.name,
value: item.value,
itemStyle: {
// color: getColorByValue(item.value, colorRanges),
areaColor: '#E7F1FF'
}
})),
emphasis: {
itemStyle: {
areaColor: '#ffd700',
borderColor: '#333',
borderWidth: 2
},
label: {
show: true,
fontSize: 14,
fontWeight: 'bold',
color: '#333'
}
}
},
// 散点系列 - 用于显示圆点数字标记
{
name: '数据标记',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'circle',
symbolSize: (val) => {
// 根据数值大小调整圆点大小
const size = Math.max(20, val[2] * 2);
return Math.min(size, 30);
},
// symbolSize: 30,
label: {
show: true,
formatter: (params) => {
return params.data.value[2];
},
position: 'inside',
color: '#fff',
fontSize: 12,
fontWeight: 'bold'
},
itemStyle: {
color: (params) => {
return getColorByValue(params.data.value, colorRanges);
},
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
data: mapData.map(item => ({
name: item.name,
value: [item.coord[0], item.coord[1], item.value],
itemStyle: {
color: getColorByValue(item.value, colorRanges)
}
})),
emphasis: {
label: {
show: true,
fontSize: 14,
fontWeight: 'bold'
},
itemStyle: {
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.8)'
}
}
}
]
};
return option
}
export default getMapChart
\ No newline at end of file
import * as echarts from 'echarts'
const getMultiLineChart = (dataX, dataY1, dataY2) => {
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
grid: {
top: '8%',
right: '5%',
bottom: '5%',
left: '5%',
containLabel: true
},
legend: {
data: ['提出法案', '通过法案'],
show: false
},
color: ['#1459bb', '#fa8c16'],
xAxis: [
{
type: 'category',
boundaryGap: false,
data: dataX
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '提出法案',
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(22, 119, 255, 0.5)' // 起始颜色
}, {
offset: 1,
color: 'rgba(22, 119, 255, 0)' // 结束颜色
}])
},
emphasis: {
focus: 'series'
},
data: dataY1
},
// {
// name: '通过法案',
// type: 'line',
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: 'rgba(255, 172, 77, 1)' // 起始颜色
// }, {
// offset: 1,
// color: 'rgba(255, 172, 77, 0)' // 结束颜色
// }])
// },
// emphasis: {
// focus: 'series'
// },
// data: dataY2
// }
]
}
}
export default getMultiLineChart
\ No newline at end of file
const getPieChart = (data,colorList) => {
let option = {
color: colorList,
series: [
{
type: 'pie',
radius: [80, 100],
height: '100%',
left: 'center',
width: '100%',
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
label: {
alignTo: 'edge',
formatter: '{name|{b}} {time|{c} 项 {d}%}\n',
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 12,
color: '#999'
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < 556 / 2;
const points = params.labelLinePoints;
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: data
}]
}
return option
}
export default getPieChart;
\ No newline at end of file
差异被折叠。
差异被折叠。
差异被折叠。
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论