Skip to content

R
risk-monitor
提交 4b63bc6c authored 作者: 张烨's avatar 张烨
浏览文件
操作

代码合并

上级 42c74a3f 31752ccc
显示空白字符变更
内嵌 并排
正在显示 包含 1477 行增加 和 388 行删除
src/api/marketAccessRestrictions/index.js
浏览文件 @ 4b63bc6c
...@@ -2,10 +2,11 @@ import request from "@/api/request.js"; ...@@ -2,10 +2,11 @@ import request from "@/api/request.js";
// 概览页-------------------------------------------------------------------- // 概览页--------------------------------------------------------------------
// 概览统计 // 概览统计
export function getStatCount() { export function getStatCount(params) {
return request({ return request({
method: 'GET', method: 'GET',
url: `/api/marketsearchHome/statCount` url: `/api/marketsearchHome/statCount`,
params
}) })
} }
......
src/components/base/WarningPane/icons/level1.svg 0 → 100644
浏览文件 @ 4b63bc6c
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none" customFrame="url(#clipPath_0)">
<defs>
<clipPath id="clipPath_0">
<rect width="16.000000" height="16.000000" x="0.000000" y="0.000000" rx="8.000000" fill="rgb(255,255,255)" />
</clipPath>
</defs>
<rect id="容器 767" width="16.000000" height="16.000000" x="0.000000" y="0.000000" rx="8.000000" />
<g id="组合 1059">
<path id="矩形 350" d="M2.50019 7.57031L12.4998 7.57048C12.7759 7.57048 12.9992 7.79409 12.9995 8.07012L13 8.07012C13.0001 8.34632 12.776 8.57031 12.4998 8.57031L2.50018 8.57015C2.22419 8.57015 2.00069 8.34649 2.00054 8.07051L2 8.07051C1.9997 7.79434 2.22403 7.57031 2.50019 7.57031Z" fill="rgb(206,79,81)" fill-rule="evenodd" />
<path id="矢量 610" d="M8 3L13 8L8 13" stroke="rgb(206,79,81)" stroke-linecap="round" stroke-width="1.000000" />
</g>
</svg>
src/components/base/WarningPane/icons/level2.svg 0 → 100644
浏览文件 @ 4b63bc6c
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none" customFrame="url(#clipPath_0)">
<defs>
<clipPath id="clipPath_0">
<rect width="16.000000" height="16.000000" x="0.000000" y="0.000000" rx="8.000000" fill="rgb(255,255,255)" />
</clipPath>
</defs>
<rect id="容器 767" width="16.000000" height="16.000000" x="0.000000" y="0.000000" rx="8.000000" />
<g id="组合 1059">
<path id="矩形 350" d="M2.50019 7.57031L12.4998 7.57048C12.7759 7.57048 12.9992 7.79409 12.9995 8.07012L13 8.07012C13.0001 8.34632 12.776 8.57031 12.4998 8.57031L2.50018 8.57015C2.22419 8.57015 2.00069 8.34649 2.00054 8.07051L2 8.07051C1.9997 7.79434 2.22403 7.57031 2.50019 7.57031Z" fill="rgb(255, 149, 77)" fill-rule="evenodd" />
<path id="矢量 610" d="M8 3L13 8L8 13" stroke="rgb(255, 149, 77)" stroke-linecap="round" stroke-width="1.000000" />
</g>
</svg>
src/components/base/WarningPane/icons/level3.svg 0 → 100644
浏览文件 @ 4b63bc6c
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none" customFrame="url(#clipPath_0)">
<defs>
<clipPath id="clipPath_0">
<rect width="16.000000" height="16.000000" x="0.000000" y="0.000000" rx="8.000000" fill="rgb(255,255,255)" />
</clipPath>
</defs>
<rect id="容器 767" width="16.000000" height="16.000000" x="0.000000" y="0.000000" rx="8.000000" />
<g id="组合 1059">
<path id="矩形 350" d="M2.50019 7.57031L12.4998 7.57048C12.7759 7.57048 12.9992 7.79409 12.9995 8.07012L13 8.07012C13.0001 8.34632 12.776 8.57031 12.4998 8.57031L2.50018 8.57015C2.22419 8.57015 2.00069 8.34649 2.00054 8.07051L2 8.07051C1.9997 7.79434 2.22403 7.57031 2.50019 7.57031Z" fill="rgb(232, 189, 11)" fill-rule="evenodd" />
<path id="矢量 610" d="M8 3L13 8L8 13" stroke="rgb(232, 189, 11)" stroke-linecap="round" stroke-width="1.000000" />
</g>
</svg>
src/components/base/WarningPane/icons/level4.svg 0 → 100644
浏览文件 @ 4b63bc6c
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none" customFrame="url(#clipPath_0)">
<defs>
<clipPath id="clipPath_0">
<rect width="16.000000" height="16.000000" x="0.000000" y="0.000000" rx="8.000000" fill="rgb(255,255,255)" />
</clipPath>
</defs>
<rect id="容器 767" width="16.000000" height="16.000000" x="0.000000" y="0.000000" rx="8.000000" />
<g id="组合 1059">
<path id="矩形 350" d="M2.50019 7.57031L12.4998 7.57048C12.7759 7.57048 12.9992 7.79409 12.9995 8.07012L13 8.07012C13.0001 8.34632 12.776 8.57031 12.4998 8.57031L2.50018 8.57015C2.22419 8.57015 2.00069 8.34649 2.00054 8.07051L2 8.07051C1.9997 7.79434 2.22403 7.57031 2.50019 7.57031Z" fill="rgb(33, 129, 57)" fill-rule="evenodd" />
<path id="矢量 610" d="M8 3L13 8L8 13" stroke="rgb(33, 129, 57)" stroke-linecap="round" stroke-width="1.000000" />
</g>
</svg>
src/components/base/WarningPane/icons/level5.svg 0 → 100644
浏览文件 @ 4b63bc6c
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none" customFrame="url(#clipPath_0)">
<defs>
<clipPath id="clipPath_0">
<rect width="16.000000" height="16.000000" x="0.000000" y="0.000000" rx="8.000000" fill="rgb(255,255,255)" />
</clipPath>
</defs>
<rect id="容器 767" width="16.000000" height="16.000000" x="0.000000" y="0.000000" rx="8.000000" />
<g id="组合 1059">
<path id="矩形 350" d="M2.50019 7.57031L12.4998 7.57048C12.7759 7.57048 12.9992 7.79409 12.9995 8.07012L13 8.07012C13.0001 8.34632 12.776 8.57031 12.4998 8.57031L2.50018 8.57015C2.22419 8.57015 2.00069 8.34649 2.00054 8.07051L2 8.07051C1.9997 7.79434 2.22403 7.57031 2.50019 7.57031Z" fill="rgb(5, 95, 194)" fill-rule="evenodd" />
<path id="矢量 610" d="M8 3L13 8L8 13" stroke="rgb(5, 95, 194)" stroke-linecap="round" stroke-width="1.000000" />
</g>
</svg>
src/components/base/WarningPane/icons/warnning-icon.svg 0 → 100644
浏览文件 @ 4b63bc6c
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none" customFrame="#000000">
<rect id="容器 1922" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<path id="减去顶层" d="M15.8612 13.4253L8.86371 1.38047C8.47821 0.716925 7.51986 0.716925 7.13436 1.38047L0.136829 13.4253C-0.250475 14.0919 0.230498 14.9276 1.0015 14.9276L14.9966 14.9276C15.7676 14.9276 16.2485 14.0919 15.8612 13.4253ZM8.73076 9.86062C8.71726 10.2202 8.42184 10.5047 8.06201 10.5047C7.7017 10.5047 7.40606 10.2195 7.39322 9.85936L7.25891 6.0939C7.24261 5.63713 7.60849 5.25797 8.06555 5.25797C8.5232 5.25797 8.8893 5.63808 8.87213 6.09541L8.73076 9.86062ZM7.21926 11.7574C7.26412 11.6666 7.32814 11.5851 7.41131 11.513C7.46859 11.4633 7.52999 11.4215 7.59553 11.3876C7.73661 11.3146 7.89683 11.278 8.07618 11.278C8.26676 11.278 8.43415 11.3187 8.57836 11.3999C8.6354 11.4321 8.68881 11.4706 8.73859 11.5154C8.81988 11.5886 8.88236 11.6708 8.92603 11.7618C8.97673 11.8675 9.00208 11.9853 9.00208 12.115C9.00208 12.2317 8.981 12.3396 8.93885 12.4386C8.89617 12.5388 8.83188 12.63 8.74598 12.7121C8.66424 12.7902 8.5746 12.8496 8.47706 12.8903C8.37086 12.9346 8.25529 12.9568 8.13036 12.9568C7.86357 12.9568 7.64481 12.8932 7.47407 12.7659C7.45149 12.7491 7.42975 12.7311 7.40885 12.7121C7.31197 12.6238 7.24131 12.5249 7.19688 12.4155C7.15926 12.3229 7.14044 12.2227 7.14044 12.115C7.14044 11.983 7.16671 11.8638 7.21926 11.7574Z" fill="rgb(255,255,255)" fill-rule="evenodd" />
</svg>
src/components/base/WarningPane/index.vue 0 → 100644
浏览文件 @ 4b63bc6c
<template>
<div class="warnning-pane-wrapper" :style="{ width: width ? width : '1600px', height: height ? height : '116px' }"
:class="{
level1: warnningLevel === '特别重大风险',
level2: warnningLevel === '重大风险',
level3: warnningLevel === '较大风险',
level4: warnningLevel === '一般风险',
}" @click="handleClickPane">
<div class="warnning-pane-header">
<div class="header-left" :class="{
'header-left-level1': warnningLevel === '特别重大风险',
'header-left-level2': warnningLevel === '重大风险',
'header-left-level3': warnningLevel === '较大风险',
'header-left-level4': warnningLevel === '一般风险',
}">
<div class="warnning-icon">
<img src="./icons/warnning-icon.svg" alt="">
</div>
<div class="warnning-text text-title-3-bold">{{ warnningLevel }}</div>
</div>
<div class="header-right">
<img v-if="warnningLevel === '特别重大风险'" src="./icons/level1.svg" alt="">
<img v-else-if="warnningLevel === '重大风险'" src="./icons/level2.svg" alt="">
<img v-else-if="warnningLevel === '较大风险'" src="./icons/level3.svg" alt="">
<img v-else-if="warnningLevel === '一般风险'" src="./icons/level4.svg" alt="">
<img v-else src="./icons/level5.svg" alt="">
</div>
</div>
<div class="warnning-pane-content text-regular">
{{ warnningContent }}
</div>
</div>
</template>
<script setup>
import { ElMessage } from 'element-plus'
const props = defineProps(
{
warnningContent: {
type: String,
default: ''
},
warnningLevel: {
type: String,
default: '低风险'
}
}
)
const emit = defineEmits(['clickPane'])
const handleClickPane = () => {
ElMessage.success('点击了预警面板')
emit('clickPane')
}
</script>
<style lang="scss" scoped>
.warnning-pane-wrapper {
border-radius: 10px;
border: 1px solid var(--color-primary-100);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
}
.level1 {
border: 1px solid var(--color-red-100) !important;
}
.level2 {
border: 1px solid var(--color-orange-100) !important;
}
.level3 {
border: 1px solid var(--color-yellow-100) !important;
}
.level4 {
border: 1px solid var(--color-green-100) !important;
}
.warnning-pane-header {
height: 44px;
display: flex;
justify-content: space-between;
}
.header-left {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
width: 164px;
height: 32px;
background: var(--color-main-active);
border-radius: 10px 0 10px 0;
}
.header-left-level1 {
background: var(--color-red-100) !important;
}
.header-left-level2 {
background: var(--color-orange-100) !important;
}
.header-left-level3 {
background: var(--color-yellow-100) !important;
}
.header-left-level4 {
background: var(--color-green-100) !important;
}
.warnning-icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.warnning-text {
color: #fff;
}
.header-right {
width: 16px;
height: 16px;
margin-top: 17px;
margin-right: 16px;
img {
width: 100%;
height: 100%;
}
}
.warnning-pane-content{
width: calc(100% - 40px);
margin: 0 auto;
height: 60px;
display: -webkit-box;
/* 2. 设置内部布局方向为垂直 */
-webkit-box-orient: vertical;
/* 3. 限制显示的行数为 2 行 */
-webkit-line-clamp: 2;
/* 4. 隐藏超出部分 */
overflow: hidden;
/* 5. 设置文本溢出显示省略号 */
text-overflow: ellipsis;
}
</style>
\ No newline at end of file
src/components/base/boxBackground/analysisBox.vue
浏览文件 @ 4b63bc6c
...@@ -116,11 +116,17 @@ const emit = defineEmits(['save', 'download', 'collect']) ...@@ -116,11 +116,17 @@ const emit = defineEmits(['save', 'download', 'collect'])
} }
} }
.header-btn { // .header-btn {
// display: flex; // display: flex;
// justify-content: flex-end; // justify-content: flex-end;
// gap: 8px; // gap: 8px;
} // }
// .header-btn1 {
// position: absolute;
// top: 14px;
// right: 116px;
// }
.header-right { .header-right {
height: 28px; height: 28px;
......
src/components/base/newsList/NewsItem2.vue 0 → 100644
浏览文件 @ 4b63bc6c
<template>
<div class="news-item">
<el-space direction="vertical" class="flex-fill" alignment='flex-start'>
<common-text :lineLimit="1" class="text-bold" color="var(--text-primary-80-color)">{{
props.title
}}</common-text>
<common-text class="text-tip-2" color="var(--text-primary-65-color)">
{{ props.from }}
</common-text>
<el-space v-if="props.aeraTags">
<area-tag v-for="(tag, index) in props.aeraTags" :key="index" :tagName="tag" />
</el-space>
</el-space>
<img style="width: 122px; height: 82px" :src="props.img">
<!-- <img v-else style="width: 122px; height: 82px" :src="DefaultIconNews"> -->
</div>
</template>
<script setup>
import { ref } from 'vue'
import { ElSpace } from 'element-plus'
import AreaTag from '@/components/base/AreaTag/index.vue'
import DefaultIconNews from "@/assets/icons/default-icon-news.png";
import CommonText from '../texts/CommonText.vue';
const props = defineProps({
img: {
type: String,
default: 'img'
},
title: {
type: String,
default: "title"
},
from: {
type: String,
default: "from"
},
aeraTags: {
type: Array,
default: []
},
content: {
type: String,
default: "content"
},
});
const emit = defineEmits(['item-click', 'more-click']);
</script>
<style lang="scss" scoped>
@use '@/styles/common.scss';
.news-item {
display: flex;
margin-top: 10px;
}
</style>
\ No newline at end of file
src/components/base/panes/AiTipPane.vue
浏览文件 @ 4b63bc6c
<script setup>
</script>
<template> <template>
<div class="flex-display box"> <div class="flex-display box">
<div class="img"></div> <div class="img">
<img src="@/assets/icons/box-footer-left-icon.png" alt="">
</div>
<div class="flex-fill txt text-tip-1"> <div class="flex-fill txt text-tip-1">
<slot></slot> <slot></slot>
</div> </div>
<div class="arrow"><span>→</span></div> <div class="arrow">
<img src="@/assets/icons/box-footer-right-icon.png" alt="">
</div>
</div> </div>
</template> </template>
<script setup>
</script>
<style scoped lang="scss"> <style scoped lang="scss">
@use '@/styles/common.scss'; @use '@/styles/common.scss';
...@@ -29,7 +33,11 @@ ...@@ -29,7 +33,11 @@
.img { .img {
width: 19px; width: 19px;
height: 20px; height: 20px;
background-image: url("@/assets/icons/model.png");
img {
width: 100%;
height: 100%;
}
} }
.txt { .txt {
...@@ -42,21 +50,12 @@ ...@@ -42,21 +50,12 @@
} }
.arrow { .arrow {
border-radius: 50%;
min-width: 24px;
width: 24px; width: 24px;
height: 24px; height: 24px;
background: var(--color-primary-10);
display: flex;
align-items: center;
justify-content: center;
span { img {
font-size: 22px; width: 100%;
font-weight: bold; height: 100%;
position: relative;
top: -3px;
/* 向上偏移2px */
} }
} }
</style> </style>
\ No newline at end of file
src/components/base/texts/CommonText.vue 0 → 100644
浏览文件 @ 4b63bc6c
<template>
<div class="common-text">
<slot></slot>
</div>
</template>
<script setup lang="js">
const props = defineProps({
color: {
type: String,
default: "#000"
},
lineLimit: {
type: Number,
default: null
}
});
</script>
<style lang="scss" scoped>
@use '@/styles/common.scss';
.common-text {
color: v-bind(color);
@if('v-bind(lineLimit) !==null') {
@include common.text-ellipsis(v-bind(lineLimit));
}
}
</style>
src/router/common.js 0 → 100644
浏览文件 @ 4b63bc6c
import { useRouter } from "vue-router";
export function useGotoPage() {
const router = useRouter();
return (path, data, isNewTabs = true) => {
console.log('path', path);
if (isNewTabs) {
// 打开新页面
const url = new URL(window.location.origin + path);
if (data) {
Object.entries(data).forEach(([key, value]) => {
url.searchParams.append(key, value);
});
}
window.open(url.toString(), '_blank');
} else {
// 当前页面打开
router.push({ path, query: data });
}
}
}
\ No newline at end of file
src/router/modules/news.js
浏览文件 @ 4b63bc6c
const newsBrief = () => import('@/views/newsBrief/index.vue') const newsBrief = () => import('@/views/newsBrief/index.vue')
const ModeuleNews = () => import('@/views/newsBrief/ModeuleNews.vue')
const NewsDetial = () => import('@/views/newsBrief/NewsDetial.vue')
const NewsAnalysis = () => import('@/views/newsAnalysis/index.vue') const NewsAnalysis = () => import('@/views/newsAnalysis/index.vue')
const newsRoutes = [ const newsRoutes = [
...@@ -11,6 +13,25 @@ const newsRoutes = [ ...@@ -11,6 +13,25 @@ const newsRoutes = [
title: "新闻速览" title: "新闻速览"
} }
}, },
//新闻模块页面路由
{
path: "/newsModeule/:id",
name: "newsModeule",
component: ModeuleNews,
meta: {
title: "新闻模块"
}
},
//新闻详情页面路由
{
path: "/newsDetail/:id",
name: "newsDetail",
component: NewsDetial,
meta: {
title: "新闻详情"
}
},
// 新闻事件分析 // 新闻事件分析
{ {
...@@ -22,5 +43,21 @@ const newsRoutes = [ ...@@ -22,5 +43,21 @@ const newsRoutes = [
} }
} }
]; ];
import { useGotoPage } from "../common.js";
export function useGotoNewsBrief() {
const gotoPage = useGotoPage();
return (isNewTabs = true) => gotoPage("/newsBrief/", {}, isNewTabs)
}
export function useGotoNewsDetail() {
const gotoPage = useGotoPage();
return (id, isNewTabs = true) => gotoPage("/newsDetail/" + id, {}, isNewTabs)
}
export function useGotoNewsModule() {
const gotoPage = useGotoPage();
return (id, name, isNewTabs = true) =>
gotoPage("/newsModeule/" + id, { name }, isNewTabs)
}
export default newsRoutes; export default newsRoutes;
src/styles/common.scss
浏览文件 @ 4b63bc6c
...@@ -11,19 +11,19 @@ ...@@ -11,19 +11,19 @@
display: flex; display: flex;
} }
.flex-display-center{ .flex-display-center {
@extend .flex-display; @extend .flex-display;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.flex-display-end{ .flex-display-end {
@extend .flex-display; @extend .flex-display;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
} }
.flex-display-start{ .flex-display-start {
@extend .flex-display; @extend .flex-display;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
...@@ -37,6 +37,13 @@ ...@@ -37,6 +37,13 @@
width: 100%; width: 100%;
} }
.mouse-hover:hover {
cursor: pointer;
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.082);
// margin-top: 1px;
// margin-left: 1px;
}
// 文本超出指定行数省略号显示 // 文本超出指定行数省略号显示
@mixin text-ellipsis($line-clamp) { @mixin text-ellipsis($line-clamp) {
overflow: hidden; overflow: hidden;
......
src/styles/components/CommonPage/index.vue
浏览文件 @ 4b63bc6c
...@@ -14,11 +14,29 @@ const span = 12 ...@@ -14,11 +14,29 @@ const span = 12
</template> </template>
`}} `}}
</pre> </pre>
<div class="common-padding">
<div class="background-as-card"> <div class="background-as-card">
<div v-for="item in [1, 2, 3, 4]" :key="item"> <div v-for="item in [1, 2, 3, 4]" :key="item">
{{ item }} {{ item }}
</div> </div>
</div> </div>
</div>
</el-col>
<el-col :span="span">
<pre>{{ `import '@/styles/container.scss';\n<template>
<div class="common-page"></div>
</template>
`}}
</pre>
通用的页面容器，限定了页面宽度为1600px，居中显示
</el-col>
<el-col :span="span">
<pre>{{ `import '@/styles/common.scss';\n<template>
<div class="mouse-hover"></div>
</template>
`}}
</pre>
<div class="mouse-hover">鼠标悬停</div>
</el-col> </el-col>
</el-row> </el-row>
</template> </template>
......
src/styles/components/RadioPage/index.vue
浏览文件 @ 4b63bc6c
...@@ -24,6 +24,19 @@ const span = 12 ...@@ -24,6 +24,19 @@ const span = 12
<el-radio-button :value="3">选项3</el-radio-button> <el-radio-button :value="3">选项3</el-radio-button>
</el-radio-group> </el-radio-group>
</el-col> </el-col>
<el-col :span="span">
<pre>{{ `import '@/styles/radio.scss';\n <template>
<el-radio-group class="radio-group-as-radius-btn">
</el-radio-group>
</template>
`}}
</pre>
<el-radio-group v-model="radio" class="radio-group-as-radius-btn">
<el-space>
<el-radio-button v-for="item in 3" :key="item" :value="item">选项{{ item }} ></el-radio-button>
</el-space>
</el-radio-group>
</el-col>
</el-row> </el-row>
</template> </template>
......
src/styles/components/TextPage/index.vue
浏览文件 @ 4b63bc6c
...@@ -3,6 +3,7 @@ import { ElSpace, ElRow, ElCol } from 'element-plus'; ...@@ -3,6 +3,7 @@ import { ElSpace, ElRow, ElCol } from 'element-plus';
import '@/styles/tabs.scss' import '@/styles/tabs.scss'
import ColorPrefixTitle from '@/components/base/texts/ColorPrefixTitle.vue'; import ColorPrefixTitle from '@/components/base/texts/ColorPrefixTitle.vue';
import AiTipPane from '@/components/base/panes/AiTipPane.vue'; import AiTipPane from '@/components/base/panes/AiTipPane.vue';
import CommonText from '@/components/base/texts/CommonText.vue';
const span = 12 const span = 12
</script> </script>
...@@ -10,20 +11,37 @@ const span = 12 ...@@ -10,20 +11,37 @@ const span = 12
<el-row class="layout-grid-line"> <el-row class="layout-grid-line">
<el-col :span="span"> <el-col :span="span">
<pre> <pre>
{{ `import ColorPrefixTitle from '@/components/base/texts/ColorPrefixTitle.vue'; {{ `import CommonText from '@/components/base/texts/CommonText.vue';
<template> <template>
<common-text>科技领域</common-text>
<common-text class="text-title-1-show" color="var(--color-yellow-100)">科技领域</common-text>
<common-text color="red" :lineLimit="1">科技领域</common-text>
</template>
`}}
</pre>
<el-space direction="vertical">
<common-text>科技领域</common-text>
<common-text class="text-title-1-show" color="var(--color-yellow-100)">科技领域</common-text>
<common-text color="red"
:lineLimit="1">超出行数则省略号。超出行数则省略号。超出行数则省略号。超出行数则省略号。超出行数则省略号。超出行数则省略号。超出行数则省略号。超出行数则省略号。超出行数则省略号。</common-text>
</el-space>
</el-col>
<el-col :span="span">
<pre>{{ `import ColorPrefixTitle from '@/components/base/texts/ColorPrefixTitle.vue';\n <template>
<color-prefix-title>科技领域</color-prefix-title> <color-prefix-title>科技领域</color-prefix-title>
<color-prefix-title color="var(--color-yellow-100)">科技领域</color-prefix-title> <color-prefix-title color="var(--color-yellow-100)">科技领域</color-prefix-title>
<color-prefix-title color="red">科技领域</color-prefix-title> <color-prefix-title color="red">科技领域</color-prefix-title>
</template> </template>
`}} `}}
</pre> </pre>
<el-space direction="vertical"> <el-space direction="vertical">
<color-prefix-title>科技领域</color-prefix-title> <color-prefix-title>科技领域</color-prefix-title>
<color-prefix-title color="var(--color-yellow-100)">科技领域</color-prefix-title> <color-prefix-title color="var(--color-yellow-100)">科技领域</color-prefix-title>
<color-prefix-title color="red">科技领域</color-prefix-title> <color-prefix-title color="red">科技领域</color-prefix-title>
</el-space> </el-space>
</el-col> </el-col>
<el-col :span="span"> <el-col :span="span">
<pre>{{ `import AiTipPane from '@/components/base/panes/AiTipPane.vue';\n<template> <pre>{{ `import AiTipPane from '@/components/base/panes/AiTipPane.vue';\n<template>
<ai-tip-pane>huidadadadadasda</ai-tip-pane> <ai-tip-pane>huidadadadadasda</ai-tip-pane>
......
src/styles/components/WarnningPane/index.vue 0 → 100644
浏览文件 @ 4b63bc6c
<script setup>
import { ElRow, ElCol } from 'element-plus';
import '@/styles/common.scss'
import WarnningPane from '@/components/base/WarningPane/index.vue'
const span = 12
</script>
<template>
<el-row class="wrapper layout-grid-line">
<el-col :span="span">
<pre>
{{
`import WarnningPane from '@/components/base/WarningPane/index.vue';
<template>
<WarnningPane warnningLevel="特别重大风险" warnningContent="我是特别重大风险内容文字">
</WarnningPane>
</template>
`}}
</pre>
<WarnningPane warnningLevel="特别重大风险" warnningContent="我是特别重大风险内容文字">
</WarnningPane>
</el-col>
</el-row>
</template>
<style lang="scss" scoped>
.person-avatar {
width: 200px;
}
</style>
\ No newline at end of file
src/styles/components/index.vue
浏览文件 @ 4b63bc6c
...@@ -28,6 +28,9 @@ ...@@ -28,6 +28,9 @@
<el-tab-pane label="人物" lazy> <el-tab-pane label="人物" lazy>
<people-page /> <people-page />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="预警面板" lazy>
<WarnningPane />
</el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</el-space> </el-space>
...@@ -47,6 +50,7 @@ import CommonPage from './CommonPage/index.vue'; ...@@ -47,6 +50,7 @@ import CommonPage from './CommonPage/index.vue';
import TextPage from './TextPage/index.vue'; import TextPage from './TextPage/index.vue';
import ImagesPage from './Images/index.vue'; import ImagesPage from './Images/index.vue';
import PeoplePage from './People/index.vue'; import PeoplePage from './People/index.vue';
import WarnningPane from './WarnningPane/index.vue'
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
src/styles/container.scss
浏览文件 @ 4b63bc6c
...@@ -6,3 +6,14 @@ ...@@ -6,3 +6,14 @@
// width: 1600px; // width: 1600px;
align-items: center; align-items: center;
} }
//水平居中
.h-center {
//水平居中
margin: 0 auto;
display: block; // 强制设置为块级元素
}
.common-padding {
padding: 20px 24px;
}
\ No newline at end of file
src/styles/radio.scss
浏览文件 @ 4b63bc6c
...@@ -17,3 +17,34 @@ ...@@ -17,3 +17,34 @@
border-radius: 4px; border-radius: 4px;
} }
} }
.radio-group-as-radius-btn {
.el-radio-button {
--el-radio-button-checked-bg-color: transparent;
--el-radio-button-checked-border-color: transparent;
.el-radio-button__inner {
border-radius: 32px !important;
// height: 40px;
@extend .text-regular;
background-color: var(--bg-white-65);
border-color: var(--bg-white-100);
border-width: 1px;
color: var(--text-primary-65-color);
//垂直居中
// display: flex;
// justify-content: center;
}
}
.el-radio-button.is-active {
--el-radio-button-checked-text-color: var(--color-primary-100);
.el-radio-button__inner {
background-color: var(--color-primary-10) !important;
border-color: var(--color-primary-35) !important;
}
}
}
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessHome/index.vue
浏览文件 @ 4b63bc6c
...@@ -390,6 +390,8 @@ ...@@ -390,6 +390,8 @@
<script setup> <script setup>
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import LeftBtn from "@/components/base/PageBtn/LeftBtn.vue";
import RightBtn from "@/components/base/PageBtn/RightBtn.vue";
import RiskSignal from "@/components/base/RiskSignal/index.vue"; import RiskSignal from "@/components/base/RiskSignal/index.vue";
import TipTab from "@/components/base/TipTab/index.vue" import TipTab from "@/components/base/TipTab/index.vue"
import MessageBubble from "@/components/base/MessageBubble/index.vue" import MessageBubble from "@/components/base/MessageBubble/index.vue"
......
src/views/marketAccessRestrictions/marketAccessLayout/assets/icons/icon1.svg 0 → 100644
浏览文件 @ 4b63bc6c
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none" customFrame="#000000">
<rect id="Icon/Line/AntDesign" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<path id="合并" d="M2 4C2 4.21118 2.06685 4.41694 2.19098 4.58779C2.31511 4.75863 2.49014 4.8858 2.69098 4.95106C2.89183 5.01631 3.10817 5.01631 3.30902 4.95106C3.50986 4.8858 3.68489 4.75863 3.80902 4.58779C3.93315 4.41694 4 4.21118 4 4C4 3.78882 3.93315 3.58306 3.80902 3.41221C3.68489 3.24137 3.50986 3.1142 3.30902 3.04894C3.10817 2.98369 2.89183 2.98369 2.69098 3.04894C2.49014 3.1142 2.31511 3.24137 2.19098 3.41221C2.06685 3.58306 2 3.78882 2 4ZM6.11111 5L13.8889 5C14.5 5 15 4.55 15 4C15 3.45 14.5 3 13.8889 3L6.11111 3C5.5 3 5 3.45 5 4C5 4.55 5.5 5 6.11111 5ZM2.19098 8.50064C2.06685 8.32979 2 8.12403 2 7.91285C2 7.70167 2.06685 7.49592 2.19098 7.32507C2.31511 7.15422 2.49014 7.02705 2.69098 6.9618C2.89183 6.89654 3.10817 6.89654 3.30902 6.9618C3.50986 7.02705 3.68489 7.15422 3.80902 7.32507C3.93315 7.49592 4 7.70167 4 7.91285C4 8.12403 3.93315 8.32979 3.80902 8.50064C3.68489 8.67149 3.50986 8.79865 3.30902 8.86391C3.10817 8.92917 2.89183 8.92917 2.69098 8.86391C2.49014 8.79865 2.31511 8.67149 2.19098 8.50064ZM6.11111 8.91309L13.8889 8.91309C14.5 8.91309 15 8.46309 15 7.91309C15 7.36309 14.5 6.91309 13.8889 6.91309L6.11111 6.91309C5.5 6.91309 5 7.36309 5 7.91309C5 8.46309 5.5 8.91309 6.11111 8.91309ZM2 11.8261C2 12.0373 2.06685 12.243 2.19098 12.4139C2.31511 12.5847 2.49014 12.7119 2.69098 12.7772C2.89183 12.8424 3.10817 12.8424 3.30902 12.7772C3.50986 12.7119 3.68489 12.5847 3.80902 12.4139C3.93315 12.243 4 12.0373 4 11.8261C4 11.6149 3.93315 11.4092 3.80902 11.2383C3.68489 11.0675 3.50986 10.9403 3.30902 10.875C3.10817 10.8098 2.89183 10.8098 2.69098 10.875C2.49014 10.9403 2.31511 11.0675 2.19098 11.2383C2.06685 11.4092 2 11.6149 2 11.8261ZM6.11111 12.8262L13.8889 12.8262C14.5 12.8262 15 12.3762 15 11.8262C15 11.2762 14.5 10.8262 13.8889 10.8262L6.11111 10.8262C5.5 10.8262 5 11.2762 5 11.8262C5 12.3762 5.5 12.8262 6.11111 12.8262Z" fill="rgb(59,65,75)" fill-rule="evenodd" />
</svg>
src/views/marketAccessRestrictions/marketAccessLayout/assets/icons/icon1_active.svg 0 → 100644
浏览文件 @ 4b63bc6c
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none" customFrame="#000000">
<rect id="Icon/Line/AntDesign" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<path id="合并" d="M2 4C2 4.21118 2.06685 4.41694 2.19098 4.58779C2.31511 4.75863 2.49014 4.8858 2.69098 4.95106C2.89183 5.01631 3.10817 5.01631 3.30902 4.95106C3.50986 4.8858 3.68489 4.75863 3.80902 4.58779C3.93315 4.41694 4 4.21118 4 4C4 3.78882 3.93315 3.58306 3.80902 3.41221C3.68489 3.24137 3.50986 3.1142 3.30902 3.04894C3.10817 2.98369 2.89183 2.98369 2.69098 3.04894C2.49014 3.1142 2.31511 3.24137 2.19098 3.41221C2.06685 3.58306 2 3.78882 2 4ZM6.11111 5L13.8889 5C14.5 5 15 4.55 15 4C15 3.45 14.5 3 13.8889 3L6.11111 3C5.5 3 5 3.45 5 4C5 4.55 5.5 5 6.11111 5ZM2.19098 8.50064C2.06685 8.32979 2 8.12403 2 7.91285C2 7.70167 2.06685 7.49592 2.19098 7.32507C2.31511 7.15422 2.49014 7.02705 2.69098 6.9618C2.89183 6.89654 3.10817 6.89654 3.30902 6.9618C3.50986 7.02705 3.68489 7.15422 3.80902 7.32507C3.93315 7.49592 4 7.70167 4 7.91285C4 8.12403 3.93315 8.32979 3.80902 8.50064C3.68489 8.67149 3.50986 8.79865 3.30902 8.86391C3.10817 8.92917 2.89183 8.92917 2.69098 8.86391C2.49014 8.79865 2.31511 8.67149 2.19098 8.50064ZM6.11111 8.91309L13.8889 8.91309C14.5 8.91309 15 8.46309 15 7.91309C15 7.36309 14.5 6.91309 13.8889 6.91309L6.11111 6.91309C5.5 6.91309 5 7.36309 5 7.91309C5 8.46309 5.5 8.91309 6.11111 8.91309ZM2 11.8261C2 12.0373 2.06685 12.243 2.19098 12.4139C2.31511 12.5847 2.49014 12.7119 2.69098 12.7772C2.89183 12.8424 3.10817 12.8424 3.30902 12.7772C3.50986 12.7119 3.68489 12.5847 3.80902 12.4139C3.93315 12.243 4 12.0373 4 11.8261C4 11.6149 3.93315 11.4092 3.80902 11.2383C3.68489 11.0675 3.50986 10.9403 3.30902 10.875C3.10817 10.8098 2.89183 10.8098 2.69098 10.875C2.49014 10.9403 2.31511 11.0675 2.19098 11.2383C2.06685 11.4092 2 11.6149 2 11.8261ZM6.11111 12.8262L13.8889 12.8262C14.5 12.8262 15 12.3762 15 11.8262C15 11.2762 14.5 10.8262 13.8889 10.8262L6.11111 10.8262C5.5 10.8262 5 11.2762 5 11.8262C5 12.3762 5.5 12.8262 6.11111 12.8262Z" fill="rgb(5,95,194)" fill-rule="evenodd" />
</svg>
src/views/marketAccessRestrictions/marketAccessLayout/assets/icons/icon2.svg 0 → 100644
浏览文件 @ 4b63bc6c
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
<rect id="分析 1" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<path id="矢量 828" d="M13.3712 9C13.032 9 12.7507 9.22792 12.7507 9.51994C12.6266 9.78348 11.038 10.4316 7.99328 10.4316C4.94855 10.4316 3.35172 9.77635 3.23589 9.54131C3.23589 9.5057 3.21934 9.47009 3.21107 9.43447C3.21107 9.39886 3.20279 9.36325 3.18624 9.33476C3.1697 9.29914 3.1366 9.27065 3.11178 9.23504C3.09523 9.21367 3.07869 9.18518 3.05387 9.16382C3.02077 9.13533 2.9794 9.11396 2.93803 9.09259C2.91321 9.07835 2.88839 9.05698 2.86357 9.04986C2.8222 9.03561 2.77256 9.03561 2.73119 9.02849C2.6981 9.02849 2.665 9.00712 2.62363 9.00712C2.54089 9.00712 2.45816 9.02137 2.38369 9.04986C2.36715 9.04986 2.35887 9.0641 2.3506 9.07122C2.29268 9.09971 2.23477 9.1282 2.18512 9.16382C2.17685 9.17094 2.16858 9.18518 2.1603 9.19943C2.11893 9.24216 2.07757 9.2849 2.05274 9.33476C2.04447 9.35612 2.04447 9.38461 2.0362 9.40598C2.01965 9.44872 2.0031 9.49145 2.0031 9.54131L2.0031 12.0342C1.99483 12.084 2.0031 12.1339 2.02792 12.1838C2.25959 13.6083 5.85038 14 8.00155 14C10.1527 14 14 13.5869 14 12.0413C14 12.0271 13.9917 12.0128 13.9917 11.9915L13.9917 9.54843L14 9.54843C14 9.25641 13.727 9 13.3795 9L13.3712 9ZM7.99328 12.9316C4.94027 12.9316 3.35172 12.2764 3.23589 12.0413C3.23589 12.0271 3.22761 12.0128 3.22761 11.9915L3.22761 10.8091C4.52659 11.3291 6.57847 11.5 7.99328 11.5C9.40808 11.5 11.4434 11.3291 12.7424 10.8162L12.7424 12.0271C12.5686 12.2977 10.9884 12.9245 7.99328 12.9245L7.99328 12.9316Z" fill="rgb(59,65,75)" fill-rule="nonzero" />
<path id="矢量 829" d="M14 4.10383C14 2.44372 10.2272 2 8.00155 2C5.77592 2 2.01138 2.44372 2.0031 4.09618L2.0031 6.88853C1.99483 6.94208 2.0031 6.99563 2.02792 7.04918C2.25959 8.57924 5.85038 9 8.00155 9C10.1527 9 14 8.55628 14 6.89617C14 6.88087 13.9917 6.86557 13.9917 6.84262L13.9917 4.10383L14 4.10383ZM8.00155 3.14754C10.9635 3.14754 12.5521 3.81311 12.7507 4.10383C12.5521 4.39454 10.9635 5.06011 8.00155 5.06011C5.03956 5.06011 3.37654 4.36393 3.24416 4.13443C3.37654 3.84372 4.96509 3.14754 8.00155 3.14754ZM8.00155 7.85246C4.94855 7.85246 3.35999 7.14863 3.24416 6.89618C3.24416 6.88087 3.23589 6.86557 3.23589 6.84262L3.23589 5.45792C4.54314 6.01639 6.58674 6.2 8.00155 6.2C9.41636 6.2 11.4517 6.01639 12.7507 5.46557L12.7507 6.88087C12.5769 7.17159 10.9966 7.84481 8.00155 7.84481L8.00155 7.85246Z" fill="rgb(59,65,75)" fill-rule="nonzero" />
</svg>
src/views/marketAccessRestrictions/marketAccessLayout/assets/icons/icon2_active.svg 0 → 100644
浏览文件 @ 4b63bc6c
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
<rect id="分析 1" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<path id="矢量 828" d="M13.3712 9C13.032 9 12.7507 9.22792 12.7507 9.51994C12.6266 9.78348 11.038 10.4316 7.99328 10.4316C4.94855 10.4316 3.35172 9.77635 3.23589 9.54131C3.23589 9.5057 3.21934 9.47009 3.21107 9.43447C3.21107 9.39886 3.20279 9.36325 3.18624 9.33476C3.1697 9.29914 3.1366 9.27065 3.11178 9.23504C3.09523 9.21367 3.07869 9.18518 3.05387 9.16382C3.02077 9.13533 2.9794 9.11396 2.93803 9.09259C2.91321 9.07835 2.88839 9.05698 2.86357 9.04986C2.8222 9.03561 2.77256 9.03561 2.73119 9.02849C2.6981 9.02849 2.665 9.00712 2.62363 9.00712C2.54089 9.00712 2.45816 9.02137 2.38369 9.04986C2.36715 9.04986 2.35887 9.0641 2.3506 9.07122C2.29268 9.09971 2.23477 9.1282 2.18512 9.16382C2.17685 9.17094 2.16858 9.18518 2.1603 9.19943C2.11893 9.24216 2.07757 9.2849 2.05274 9.33476C2.04447 9.35612 2.04447 9.38461 2.0362 9.40598C2.01965 9.44872 2.0031 9.49145 2.0031 9.54131L2.0031 12.0342C1.99483 12.084 2.0031 12.1339 2.02792 12.1838C2.25959 13.6083 5.85038 14 8.00155 14C10.1527 14 14 13.5869 14 12.0413C14 12.0271 13.9917 12.0128 13.9917 11.9915L13.9917 9.54843L14 9.54843C14 9.25641 13.727 9 13.3795 9L13.3712 9ZM7.99328 12.9316C4.94027 12.9316 3.35172 12.2764 3.23589 12.0413C3.23589 12.0271 3.22761 12.0128 3.22761 11.9915L3.22761 10.8091C4.52659 11.3291 6.57847 11.5 7.99328 11.5C9.40808 11.5 11.4434 11.3291 12.7424 10.8162L12.7424 12.0271C12.5686 12.2977 10.9884 12.9245 7.99328 12.9245L7.99328 12.9316Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
<path id="矢量 829" d="M14 4.10383C14 2.44372 10.2272 2 8.00155 2C5.77592 2 2.01138 2.44372 2.0031 4.09618L2.0031 6.88853C1.99483 6.94208 2.0031 6.99563 2.02792 7.04918C2.25959 8.57924 5.85038 9 8.00155 9C10.1527 9 14 8.55628 14 6.89617C14 6.88087 13.9917 6.86557 13.9917 6.84262L13.9917 4.10383L14 4.10383ZM8.00155 3.14754C10.9635 3.14754 12.5521 3.81311 12.7507 4.10383C12.5521 4.39454 10.9635 5.06011 8.00155 5.06011C5.03956 5.06011 3.37654 4.36393 3.24416 4.13443C3.37654 3.84372 4.96509 3.14754 8.00155 3.14754ZM8.00155 7.85246C4.94855 7.85246 3.35999 7.14863 3.24416 6.89618C3.24416 6.88087 3.23589 6.86557 3.23589 6.84262L3.23589 5.45792C4.54314 6.01639 6.58674 6.2 8.00155 6.2C9.41636 6.2 11.4517 6.01639 12.7507 5.46557L12.7507 6.88087C12.5769 7.17159 10.9966 7.84481 8.00155 7.84481L8.00155 7.85246Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
</svg>
src/views/marketAccessRestrictions/marketAccessLayout/case/337/index.vue
浏览文件 @ 4b63bc6c
...@@ -203,7 +203,6 @@ ...@@ -203,7 +203,6 @@
</AnalysisBox> </AnalysisBox>
</div> </div>
</div> </div>
<SearchBox placeholder="请输入搜索条件" v-model:search-text="searchData" @search="handleSearch" />
</div> </div>
</template> </template>
...@@ -215,13 +214,6 @@ import { Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue"; ...@@ -215,13 +214,6 @@ import { Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue";
import { getSearchAllArea, getSearchAllYear, getSurveyList, getSearchAllCountry } from "@/api/marketAccessRestrictions"; import { getSearchAllArea, getSearchAllYear, getSurveyList, getSearchAllCountry } from "@/api/marketAccessRestrictions";
import AnalysisBox from "@/components/base/BoxBackground/AnalysisBox.vue" import AnalysisBox from "@/components/base/BoxBackground/AnalysisBox.vue"
import SearchBox from "@/components/base/SearchBox/index.vue"
const searchData = ref('你好啊')
const handleSearch1 = () => {
console.log(searchData.value)
}
const route = useRoute(); const route = useRoute();
......
src/views/marketAccessRestrictions/marketAccessLayout/index.vue
浏览文件 @ 4b63bc6c
...@@ -47,10 +47,10 @@ ...@@ -47,10 +47,10 @@
<script setup> <script setup>
import { ref, computed, onMounted } from "vue"; import { ref, computed, onMounted } from "vue";
import router from "@/router/index"; import router from "@/router/index";
import icon1 from "./assets/images/icon1.png"; import icon1 from "./assets/icons/icon1.svg";
import icon1Active from "./assets/images/icon1_active.png"; import icon1Active from "./assets/icons/icon1_active.svg";
import icon2 from "./assets/images/icon2.png"; import icon2 from "./assets/icons/icon2.svg";
import icon2Active from "./assets/images/icon2_active.png"; import icon2Active from "./assets/icons/icon2_active.svg";
import Img337 from "./assets/images/337.png"; import Img337 from "./assets/images/337.png";
import Img232 from "./assets/images/232.png"; import Img232 from "./assets/images/232.png";
import Img301 from "./assets/images/301.png"; import Img301 from "./assets/images/301.png";
...@@ -207,10 +207,10 @@ onMounted(() => { ...@@ -207,10 +207,10 @@ onMounted(() => {
height: 48px; height: 48px;
margin-left: 160px; margin-left: 160px;
display: flex; display: flex;
gap: 24px;
.btn-item { .btn-item {
display: flex; display: flex;
width: 92px; gap: 4px;
margin-right: 30px;
cursor: pointer; cursor: pointer;
.icon { .icon {
width: 16px; width: 16px;
......
src/views/marketAccessRestrictions/marketAccessLayout/overview/337/index.vue
浏览文件 @ 4b63bc6c
...@@ -6,77 +6,49 @@ ...@@ -6,77 +6,49 @@
<div class="item-left1">{{ "总调查案件数" }}</div> <div class="item-left1">{{ "总调查案件数" }}</div>
<div class="item-left2">{{ "1980-2025" }}</div> <div class="item-left2">{{ "1980-2025" }}</div>
</div> </div>
<div class="item-right">{{ "452项" }}</div> <div class="item-right">{{ `${totalCaseNum}项` }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="item-left">{{ "仍在调查中的案件" }}</div> <div class="item-left">{{ "仍在调查中的案件" }}</div>
<div class="item-right">{{ "28项" }}</div> <div class="item-right">{{ `${onCaseNum}项` }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="item-left">{{ "涉及中企数量" }}</div> <div class="item-left">{{ "涉及中企数量" }}</div>
<div class="item-right">{{ "326家" }}</div> <div class="item-right">{{ `${relateCnNum}家` }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="item-left">{{ "胜诉/和解率" }}</div> <div class="item-left">{{ "胜诉/和解率" }}</div>
<div class="item-right">{{ "38%" }}</div> <div class="item-right">{{ `${windRate}/${cancelRate}` }}</div>
</div> </div>
</div> </div>
<div class="center"> <div class="center">
<div class="box1" v-loading="box1Loading"> <div class="box1" v-loading="box1Loading">
<div class="box-header"> <AnalysisBox title="美国对华337调查年度趋势">
<div class="header-left"></div>
<div class="title">美国对华337调查年度趋势</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box1-main" id="chart1"></div> <div class="box1-main" id="chart1"></div>
<div class="box1-footer">
<TipTab />
</div> </div>
<div class="box2" v-loading="box2Loading"> </AnalysisBox>
<div class="box-header">
<div class="header-left"></div>
<div class="title">调查案件领域分布</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div> </div>
<div class="box2" v-loading="box2Loading">
<AnalysisBox title="调查案件领域分布">
<div class="box2-main" id="chart2"></div> <div class="box2-main" id="chart2"></div>
<div class="box2-footer">
<TipTab />
</div>
</AnalysisBox>
</div> </div>
</div> </div>
<div class="footer"> <div class="footer">
<div class="box3" v-loading="box3Loading"> <div class="box3" v-loading="box3Loading">
<div class="box-header"> <!-- <div class="box-header">
<div class="header-left"></div> <div class="header-left"></div>
<div class="title">中国公司受调查情况</div> <div class="title">中国公司受调查情况</div>
<div class="header-btn-box"> <div class="header-btn-box">
<div <div class="btn" :class="{ btnActive: btnActiveName === '调查次数' }" @click="handleClickBox3Btn('调查次数')">
class="btn"
:class="{ btnActive: btnActiveName === '调查次数' }"
@click="handleClickBox3Btn('调查次数')"
>
调查次数 调查次数
</div> </div>
<div <div class="btn" :class="{ btnActive: btnActiveName === '注册地分布' }" @click="handleClickBox3Btn('注册地分布')">
class="btn"
:class="{ btnActive: btnActiveName === '注册地分布' }"
@click="handleClickBox3Btn('注册地分布')"
>
注册地分布 注册地分布
</div> </div>
</div> </div>
...@@ -105,55 +77,244 @@ ...@@ -105,55 +77,244 @@
</div> </div>
<div class="box3-main1-right" id="chartMap"></div> <div class="box3-main1-right" id="chartMap"></div>
</div> </div>
<div class="box3-footer">
<TipTab />
</div> -->
<AnalysisBox title="中国公司受调查情况">
<template #header-btn>
<div class="header-btn-box">
<div class="btn" :class="{ btnActive: btnActiveName === '调查次数' }" @click="handleClickBox3Btn('调查次数')">
调查次数
</div> </div>
<div class="box4" v-loading="box4Loading"> <div class="btn" :class="{ btnActive: btnActiveName === '注册地分布' }" @click="handleClickBox3Btn('注册地分布')">
<div class="box-header"> 注册地分布
<div class="header-left"></div>
<div class="title">调查结果分布</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div> </div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div> </div>
<div class="icon"> </template>
<img src="@/assets/icons/box-header-icon3.png" alt="" /> <div v-show="btnActiveName === '调查次数'" class="box3-main" id="chart3"></div>
<div v-show="btnActiveName === '注册地分布'" class="box3-main1">
<div class="box3-main1-left">
<div class="box3-main1-left-item" v-for="(item, index) in mapData" :key="index">
<div class="box3-main1-left-item-left">{{ index + 1 }}</div>
<div class="box3-main1-left-item-center">{{ item.name }}</div>
<div class="box3-main1-left-item-right">
{{ item.value + "次" }}
</div>
</div>
</div>
<div class="box3-main1-right" id="chartMap"></div>
</div> </div>
<div class="box3-footer">
<TipTab />
</div> </div>
</AnalysisBox>
</div> </div>
<div class="box4" v-loading="box4Loading">
<AnalysisBox title="调查结果分布">
<div class="box4-main" id="chart4"></div> <div class="box4-main" id="chart4"></div>
<div class="box4-footer">
<TipTab />
</div>
</AnalysisBox>
</div> </div>
</div> </div>
<div class="graph-box" id="graphChart">
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, onMounted, nextTick } from "vue"; import { ref, onMounted, nextTick } from "vue";
import * as echarts from "echarts"; import setChart from "@/utils/setChart";
import TipTab from "@/components/base/TipTab/index.vue"
import AnalysisBox from "@/components/base/BoxBackground/AnalysisBox.vue"
import ChinaJson from "../../assets/json/China.json"; import { getStatCount, getStatcnOrgCount, getSearchResult, getStatArea, getStatNum } from "@/api/marketAccessRestrictions";
import { getStatcnOrgCount, getSearchResult, getStatArea, getStatNum } from "@/api/marketAccessRestrictions";
import getMultiLineChart from "./utils/multiLineChart"; import getMultiLineChart from "./utils/multiLineChart";
import getBarChart from "./utils/barChart"; import getBarChart from "./utils/barChart";
import getPieChart from "./utils/piechart"; import getPieChart from "./utils/piechart";
import getMapChart from "./utils/mapChart"; import getMapChart from "./utils/mapChart";
// 绘制echarts图表 import CompanyImg from "./symbol.png"
const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId); import getGraphChart from "./utils/graphChart";
chartDom.removeAttribute("_echarts_instance_"); import getGraph from "./utils/graph";
let chart = echarts.init(chartDom);
chart.setOption(option);
return chart;
};
const box1Loading = ref(false); const box1Loading = ref(false);
const box2Loading = ref(false); const box2Loading = ref(false);
const box3Loading = ref(false); const box3Loading = ref(false);
const box4Loading = ref(false); const box4Loading = ref(false);
const btnActiveName = ref("注册地分布"); const btnActiveName = ref("调查次数");
const nodes = ref([
{
id: 0,
name: "泰丰先行",
// category: 0,
symbolSize: 30,
value: 8,
symbol: `image://${CompanyImg}`,
},
{
id: 1,
name: "国轩高科",
// category: 0,
symbolSize: 30,
value: 9,
symbol: `image://${CompanyImg}`,
},
{
id: 2,
name: "智方纳米",
// category: 2,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
},
{
id: 3,
name: "香百科技",
// category: 1,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 4,
name: "格林滨",
// category: 2,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 5,
name: "江西紫宸",
// category: 2,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
},
{
id: 6,
name: "紫江企业",
// category: 4,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 7,
name: "大而美法案",
// category: 4,
symbolSize: 50,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 8,
name: "比亚迪",
// category: 0,
symbolSize: 30,
value: 10,
symbol: `image://${CompanyImg}`,
},
{
id: 9,
name: "铜陵有色",
// category: 3,
symbolSize: 30,
value: 8,
symbol: `image://${CompanyImg}`,
},
{
id: 10,
name: "长盛精密",
// category: 1,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
},
{
id: 11,
name: "天合光能",
// category: 0,
symbolSize: 30,
value: 8,
symbol: `image://${CompanyImg}`,
},
{
id: 12,
name: "昆仑化学",
// category: 2,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 13,
name: "嘉源科技",
// category: 1,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: "华阳集团",
// category: 4,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
},
{
id: 15,
name: "海辰智能",
// category: 1,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
},
]);
const links = ref([
{ source: 1, target: 7, label: { show: true, formatter: '合作' } },
{ source: 2, target: 7, label: { show: true, formatter: '持股' } },
{ source: 3, target: 7, label: { show: true, formatter: '合作' } },
{ source: 4, target: 7, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '从属' } },
{ source: 5, target: 7, label: { show: true, formatter: '合作' } },
{ source: 6, target: 7, label: { show: true, formatter: '持股' } },
{ source: 0, target: 7, label: { show: true, formatter: '持股' } },
{ source: 8, target: 7, label: { show: true, formatter: '合作' } },
{ source: 9, target: 7, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '从属' } },
{ source: 10, target: 7, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '合作' } },
{ source: 11, target: 7, label: { show: true, formatter: '合作' } },
{ source: 12, target: 7, label: { show: true, formatter: '合作' } },
{ source: 13, target: 7, label: { show: true, formatter: '合作' } },
{ source: 14, target: 7, label: { show: true, formatter: '合作' } },
{ source: 15, target: 7, label: { show: true, formatter: '合作' } },
// { source: 0, target: 1, value: 1 },
// { source: 1, target: 8, value: 2 },
// { source: 1, target: 2, value: 1 },
// { source: 8, target: 11, value: 1 },
// { source: 8, target: 9, value: 1 },
// { source: 2, target: 5, value: 1 },
// { source: 2, target: 12, value: 1 },
// { source: 3, target: 10, value: 1 },
// { source: 3, target: 15, value: 1 },
// { source: 3, target: 13, value: 1 },
// { source: 4, target: 5, value: 1 },
// { source: 4, target: 12, value: 1 },
// { source: 5, target: 6, value: 1 },
// { source: 6, target: 14, value: 1 },
// { source: 7, target: 14, value: 1 },
// { source: 9, target: 10, value: 1 },
// { source: 10, target: 15, value: 1 },
// { source: 11, target: 13, value: 1 },
// { source: 12, target: 14, value: 1 },
]);
const provinceCoords = { const provinceCoords = {
"北京": [116.46, 39.92], "北京": [116.46, 39.92],
...@@ -192,6 +353,36 @@ const provinceCoords = { ...@@ -192,6 +353,36 @@ const provinceCoords = {
"台湾": [121.5, 25.05] "台湾": [121.5, 25.05]
}; };
// 数量统计
const totalCaseNum = ref(0)
const onCaseNum = ref(0)
const relateCnNum = ref(0)
const cancelRate = ref('0%')
const windRate = ref('0%')
const handleGetStat = async () => {
const params = {
sortCode: '337'
}
try {
const res = await getStatCount(params)
console.log('337数量统计', res);
if (res.code === 200 && res.data) {
totalCaseNum.value = res.data.allCaseNum
onCaseNum.value = res.data.underCaseNum
relateCnNum.value = res.data.involvinChinese
cancelRate.value = res.data.cancelNum
windRate.value = res.data.winRate
}
} catch (error) {
console.error('337数量统计error', error);
}
}
handleGetStat()
const handleGetStatcnOrgCount = async (type) => { const handleGetStatcnOrgCount = async (type) => {
box3Loading.value = true; box3Loading.value = true;
try { try {
...@@ -199,6 +390,8 @@ const handleGetStatcnOrgCount = async (type) => { ...@@ -199,6 +390,8 @@ const handleGetStatcnOrgCount = async (type) => {
type, type,
sortCode: "337" sortCode: "337"
}); });
console.log('中国公司受调查情况', res);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
if (type === "01") { if (type === "01") {
chart3Data.value = { chart3Data.value = {
...@@ -274,7 +467,6 @@ const handleGetStatNum = async () => { ...@@ -274,7 +467,6 @@ const handleGetStatNum = async () => {
}; };
const chart2Data = ref([]); const chart2Data = ref([]);
const chart2ColorList = ref(["#69B1FF", "#FFC069", "#87E8DE", "#597EF7", "#D6E4FF", "#FF7875", "#B37FEB", "#FFA39E"]);
const handleGetStatArea = async () => { const handleGetStatArea = async () => {
box2Loading.value = true; box2Loading.value = true;
...@@ -283,14 +475,16 @@ const handleGetStatArea = async () => { ...@@ -283,14 +475,16 @@ const handleGetStatArea = async () => {
sortCode: "337" sortCode: "337"
}); });
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
console.log('调查案件领域分布', res);
chart2Data.value = res.data chart2Data.value = res.data
.filter(item => item.SORTCODE === "337" || item.SORTNAME === "337调查") .filter(item => item.sortcode === "337" || item.sortname === "337调查")
.map(item => ({ .map(item => ({
name: item.AREANAME, name: item.areaname,
value: item.AREACOUNT value: item.areacount
})); }));
nextTick(() => { nextTick(() => {
let chart2 = getPieChart(chart2Data.value, chart2ColorList.value); let chart2 = getPieChart(chart2Data.value);
setChart(chart2, "chart2"); setChart(chart2, "chart2");
}); });
} }
...@@ -309,7 +503,6 @@ const chart3Data = ref({ ...@@ -309,7 +503,6 @@ const chart3Data = ref({
const mapData = ref([]); const mapData = ref([]);
const chart4Data = ref([]); const chart4Data = ref([]);
const chart4ColorList = ref(["#69B1FF", "#FFC069", "#87E8DE", "#597EF7", "#D6E4FF", "#FF7875", "#B37FEB", "#FFA39E"]);
const handleGetSearchResult = async () => { const handleGetSearchResult = async () => {
box4Loading.value = true; box4Loading.value = true;
...@@ -323,7 +516,7 @@ const handleGetSearchResult = async () => { ...@@ -323,7 +516,7 @@ const handleGetSearchResult = async () => {
value: item.RESULTNUM value: item.RESULTNUM
})); }));
nextTick(() => { nextTick(() => {
let chart4 = getPieChart(chart4Data.value, chart4ColorList.value); let chart4 = getPieChart(chart4Data.value);
setChart(chart4, "chart4"); setChart(chart4, "chart4");
}); });
} }
...@@ -335,10 +528,13 @@ const handleGetSearchResult = async () => { ...@@ -335,10 +528,13 @@ const handleGetSearchResult = async () => {
}; };
onMounted(() => { onMounted(() => {
handleGetStatNum();
handleGetStatArea(); let graph = getGraphChart(nodes.value, links.value)
setChart(graph, 'graphChart')
handleGetStatNum();
handleGetStatArea();
handleGetStatcnOrgCount(btnActiveName.value === "调查次数" ? "01" : "02"); handleGetStatcnOrgCount(btnActiveName.value === "调查次数" ? "01" : "02");
handleGetSearchResult(); handleGetSearchResult();
}); });
...@@ -349,19 +545,34 @@ onMounted(() => { ...@@ -349,19 +545,34 @@ onMounted(() => {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
position: relative;
.graph-box {
position: absolute;
top: 100px;
left: 100px;
width: 1000px;
height: 600px;
border-radius: 10px;
z-index: 9999;
background: #fff;
}
.top { .top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 16px 160px; margin: 16px 160px;
.item { .item {
width: 388px; width: 388px;
height: 80px; height: 80px;
border-radius: 4px; border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2); box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
position: relative; position: relative;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
&::before { &::before {
position: absolute; position: absolute;
content: ""; content: "";
...@@ -371,6 +582,7 @@ onMounted(() => { ...@@ -371,6 +582,7 @@ onMounted(() => {
left: 0; left: 0;
top: 15px; top: 15px;
} }
.item-left { .item-left {
margin-left: 30px; margin-left: 30px;
margin-top: 25px; margin-top: 25px;
...@@ -381,6 +593,7 @@ onMounted(() => { ...@@ -381,6 +593,7 @@ onMounted(() => {
font-weight: 700; font-weight: 700;
line-height: 24px; line-height: 24px;
} }
.item-right { .item-right {
margin-top: 28px; margin-top: 28px;
margin-right: 35px; margin-right: 35px;
...@@ -391,8 +604,10 @@ onMounted(() => { ...@@ -391,8 +604,10 @@ onMounted(() => {
font-weight: 700; font-weight: 700;
line-height: 24px; line-height: 24px;
} }
.item-left-box { .item-left-box {
margin-left: 30px; margin-left: 30px;
.item-left1 { .item-left1 {
margin-top: 13px; margin-top: 13px;
height: 24px; height: 24px;
...@@ -402,6 +617,7 @@ onMounted(() => { ...@@ -402,6 +617,7 @@ onMounted(() => {
font-weight: 700; font-weight: 700;
line-height: 24px; line-height: 24px;
} }
.item-left2 { .item-left2 {
height: 2px; height: 2px;
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
...@@ -413,10 +629,12 @@ onMounted(() => { ...@@ -413,10 +629,12 @@ onMounted(() => {
} }
} }
} }
.box-header { .box-header {
height: 56px; height: 56px;
display: flex; display: flex;
position: relative; position: relative;
.header-left { .header-left {
margin-top: 18px; margin-top: 18px;
width: 8px; width: 8px;
...@@ -424,6 +642,7 @@ onMounted(() => { ...@@ -424,6 +642,7 @@ onMounted(() => {
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
background: var(--color-main-active); background: var(--color-main-active);
} }
.title { .title {
margin-left: 14px; margin-left: 14px;
margin-top: 14px; margin-top: 14px;
...@@ -434,33 +653,37 @@ onMounted(() => { ...@@ -434,33 +653,37 @@ onMounted(() => {
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
} }
.header-btn-box {
position: absolute; // .header-btn-box {
top: 14px; // position: absolute;
right: 120px; // top: 14px;
display: flex; // right: 120px;
.btn { // display: flex;
margin-left: 8px;
height: 28px; // .btn {
padding: 0 8px; // margin-left: 8px;
box-sizing: border-box; // height: 28px;
border: 1px solid rgba(230, 231, 232, 1); // padding: 0 8px;
border-radius: 4px; // box-sizing: border-box;
background: rgba(255, 255, 255, 1); // border: 1px solid rgba(230, 231, 232, 1);
text-align: center; // border-radius: 4px;
line-height: 28px; // background: rgba(255, 255, 255, 1);
color: rgba(59, 65, 75, 1); // text-align: center;
font-family: Microsoft YaHei; // line-height: 28px;
font-size: 16px; // color: rgba(59, 65, 75, 1);
font-weight: 400; // font-family: Microsoft YaHei;
cursor: pointer; // font-size: 16px;
} // font-weight: 400;
.btnActive { // cursor: pointer;
border: 1px solid var(--color-main-active); // }
background: rgba(246, 250, 255, 1);
color: var(--color-main-active); // .btnActive {
} // border: 1px solid var(--color-main-active);
} // background: rgba(246, 250, 255, 1);
// color: var(--color-main-active);
// }
// }
.header-right { .header-right {
position: absolute; position: absolute;
top: 14px; top: 14px;
...@@ -468,9 +691,11 @@ onMounted(() => { ...@@ -468,9 +691,11 @@ onMounted(() => {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 4px; gap: 4px;
.icon { .icon {
width: 28px; width: 28px;
height: 28px; height: 28px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -478,59 +703,99 @@ onMounted(() => { ...@@ -478,59 +703,99 @@ onMounted(() => {
} }
} }
} }
.center { .center {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 0 160px; margin: 0 160px;
.box1 { .box1 {
width: 792px; width: 792px;
height: 360px; height: 360px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box1-main { .box1-main {
height: 300px; height: 263px;
}
.box1-footer {
height: 40px;
} }
} }
.box2 { .box2 {
width: 792px; width: 792px;
height: 360px; height: 360px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box2-main { .box2-main {
height: 300px; width: 792px;
// width: 752px; height: 263px;
box-sizing: border-box; box-sizing: border-box;
padding: 0 20px; padding: 0 24px;
} }
.box2-footer {
height: 40px;
} }
} }
}
.footer { .footer {
margin: 16px 160px; margin: 16px 160px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.box3 { .box3 {
width: 792px; width: 792px;
height: 360px; height: 360px;
.header-btn-box {
display: flex;
.btn {
margin-left: 8px;
height: 28px;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px; border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
text-align: center;
line-height: 28px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
cursor: pointer;
}
.btnActive {
border: 1px solid var(--color-main-active);
background: rgba(246, 250, 255, 1);
color: var(--color-main-active);
}
}
.box3-main { .box3-main {
height: 300px; height: 263px;
} }
.box3-main1 { .box3-main1 {
height: 300px; height: 263px;
display: flex; display: flex;
.box3-main1-left { .box3-main1-left {
padding-top: 24px;
width: 380px; width: 380px;
height: 300px; height: 263px;
overflow-y: auto; // overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
.box3-main1-left-item { .box3-main1-left-item {
display: flex; display: flex;
height: 36px; height: 36px;
margin-left: 20px; margin-left: 20px;
.box3-main1-left-item-left { .box3-main1-left-item-left {
width: 24px; width: 24px;
height: 24px; height: 24px;
...@@ -542,12 +807,14 @@ onMounted(() => { ...@@ -542,12 +807,14 @@ onMounted(() => {
text-align: center; text-align: center;
line-height: 24px; line-height: 24px;
} }
.box3-main1-left-item-center { .box3-main1-left-item-center {
height: 36px; height: 36px;
line-height: 36px; line-height: 36px;
width: 220px; width: 220px;
margin-left: 12px; margin-left: 12px;
} }
.box3-main1-left-item-right { .box3-main1-left-item-right {
width: 80px; width: 80px;
box-sizing: border-box; box-sizing: border-box;
...@@ -556,22 +823,33 @@ onMounted(() => { ...@@ -556,22 +823,33 @@ onMounted(() => {
} }
} }
} }
.box3-main1-right { .box3-main1-right {
width: 390px; width: 390px;
height: 300px; height: 263px;
box-sizing: border-box;
padding-top: 24px;
padding-right: 24px;
}
.box3-footer {
height: 40px;
} }
} }
} }
.box4 { .box4 {
width: 792px; width: 792px;
height: 360px; height: 360px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box4-main { .box4-main {
height: 300px; height: 263px;
box-sizing: border-box; box-sizing: border-box;
padding: 0 20px; padding: 0 24px;
}
.box4-footer {
height: 40px;
} }
} }
} }
......
src/views/marketAccessRestrictions/marketAccessLayout/overview/337/utils/barChart.js
浏览文件 @ 4b63bc6c
...@@ -4,10 +4,10 @@ const getBarChart = (nameList, valueList) => { ...@@ -4,10 +4,10 @@ const getBarChart = (nameList, valueList) => {
const option = { const option = {
tooltip: {}, tooltip: {},
grid: { grid: {
top: '3%', top: 40,
right: '3%', right: 64,
bottom: '1%', bottom: 24,
left: '1%', left: 24,
containLabel: true containLabel: true
}, },
xAxis: { xAxis: {
...@@ -30,7 +30,12 @@ const getBarChart = (nameList, valueList) => { ...@@ -30,7 +30,12 @@ const getBarChart = (nameList, valueList) => {
show: false show: false
}, },
axisLabel: { axisLabel: {
show: true show: true,
textStyle: {
color: 'rgb(59, 65, 75)',
fontSize: '16px',
fontFamliy: 'Source Han Sans CN'
}
} }
}, },
series: [{ series: [{
...@@ -38,9 +43,14 @@ const getBarChart = (nameList, valueList) => { ...@@ -38,9 +43,14 @@ const getBarChart = (nameList, valueList) => {
data: valueList, data: valueList,
label: { label: {
show: true, show: true,
position: [610, 0], position: [480, 0],
formatter: function (params) { formatter: function (params) {
return params.value + ' 次' return params.value + ' 次'
},
textStyle: {
color: 'rgb(59, 65, 75)',
fontSize: '16px',
fontFamliy: 'Source Han Sans CN'
} }
}, },
barWidth: 8, barWidth: 8,
...@@ -49,11 +59,11 @@ const getBarChart = (nameList, valueList) => { ...@@ -49,11 +59,11 @@ const getBarChart = (nameList, valueList) => {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, return new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{ [{
offset: 0, offset: 0,
color: 'rgba(255,255,255,0)' color: 'rgb(231, 243, 255)'
}, },
{ {
offset: 1, offset: 1,
color: '#1778ff' color: 'rgb(5, 95, 194)'
} }
]); ]);
}, },
......
src/views/marketAccessRestrictions/marketAccessLayout/overview/337/utils/graph.js 0 → 100644
浏览文件 @ 4b63bc6c
import CompanyImg from "../symbol.png"
const getGraph = () => {
const nodes = [
'宁德时代', '泰丰先行', '国轩高科', '晶科能源', '容百科技',
'江西紫宸', '比亚迪', '长盈精密', '昆仑化学',
'海辰储能', '华阳集团', '嘉源科技', '天合光能',
'铜陵有色', '紫江企业', '格林美', '德方纳米'
];
return {
series: [{
type: 'graph',
layout: 'force',
symbolSize: 60,
roam: true,
label: {
show: true,
position: 'bottom',
color: '#333',
fontWeight: 'bold'
},
edgeSymbol: ['arrow', 'none'],
edgeSymbolSize: [8, 4],
force: {
repulsion: 800,
gravity: 0.1,
edgeLength: 240
},
data: nodes.map((name, idx) => ({
name,
draggable: true,
symbol: `image://${CompanyImg}`,
itemStyle: {
color: '#fff', // 设置圆形背景色
borderColor: 'rgb(59, 65, 75)', // 可选：圆形边框色
borderWidth: 3 // 可选：圆形边框宽度
},
symbolKeepAspect: true, // 保持图片比例
symbolSize: 60,
symbolClip: true, // 裁剪为圆形
label: {
show: true,
position: 'bottom',
color: '#333',
fontWeight: 'bold'
}
})),
links: [
{ source: 0, target: 1, label: { show: true, formatter: '合作' } },
{ source: 0, target: 2, label: { show: true, formatter: '持股' } },
{ source: 0, target: 3, label: { show: true, formatter: '合作' } },
{ source: 0, target: 4, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '从属' } },
{ source: 0, target: 5, label: { show: true, formatter: '合作' } },
{ source: 0, target: 6, label: { show: true, formatter: '持股' } },
{ source: 0, target: 7, label: { show: true, formatter: '合作' } },
{ source: 0, target: 8, label: { show: true, formatter: '合作' } },
{ source: 0, target: 9, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '从属' } },
{ source: 0, target: 10, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '合作' } },
{ source: 0, target: 11, label: { show: true, formatter: '合作' } },
{ source: 0, target: 12, label: { show: true, formatter: '合作' } },
{ source: 0, target: 13, label: { show: true, formatter: '合作' } },
{ source: 0, target: 14, label: { show: true, formatter: '合作' } },
{ source: 0, target: 15, label: { show: true, formatter: '合作' } },
{ source: 0, target: 16, label: { show: true, formatter: '合作' } }
],
edgeLabel: {
show: true,
position: 'middle',
fontSize: 14,
color: '#666',
backgroundColor: 'rgba(255,255,255,0.9)',
borderColor: '#bbb',
borderWidth: 1,
borderRadius: 8,
padding: [4, 8],
formatter: params => params.data.label ? params.data.label.formatter : ''
}
}]
}
}
export default getGraph
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/337/utils/graphChart.js 0 → 100644
浏览文件 @ 4b63bc6c
const getGraphChart = (nodes, links) => {
const option = {
// title: {
// text: '企业关系网络',
// subtext: '节点图标表示企业，箭头表示关联方向',
// top: 'top',
// left: 'center',
// textStyle: {
// fontSize: 20,
// color: '#2c3e50'
// }
// },
// tooltip: {
// formatter: function (params) {
// if (params.dataType === 'node') {
// return `<div style="font-weight:bold;margin-bottom:5px">${params.data.name}</div>
// <div>类别: ${categories[params.data.category].name}</div>
// <div>关联度: ${params.data.value}</div>`;
// } else {
// return `<div>${nodes[params.data.source].name} → ${nodes[params.data.target].name}</div>
// <div>关联强度: ${params.data.value}</div>`;
// }
// }
// },
legend: {
// data: categories.map(c => c.name),
show: false,
top: 40,
textStyle: {
fontSize: 12
}
},
animation: true,
animationDuration: 1000,
animationEasing: 'cubicOut',
series: [{
type: 'graph',
itemStyle: {
color: '#73C0DE'
},
layout: 'force',
data: nodes,
links: links,
// categories: categories,
roam: true,
label: {
show: true,
position: 'bottom',
formatter: '{b}',
fontSize: 12,
fontWeight: 'bold',
// backgroundColor: 'rgba(255,255,255,0.8)',
padding: [4, 6],
borderRadius: 4
},
lineStyle: {
color: 'source',
curveness: 0,
width: 2,
type: 'dashed',
color: '#AED6FF'
},
edgeSymbol: ['none', 'arrow'],
edgeSymbolSize: [0, 10],
emphasis: {
focus: 'adjacency',
lineStyle: {
width: 4
},
label: {
show: true,
fontSize: 14
}
},
force: {
repulsion: 300,
gravity: 0,
edgeLength: 300
},
edgeLabel: {
show: true,
position: 'middle',
fontSize: 14,
color: '#666',
backgroundColor: 'rgba(255,255,255,0.9)',
borderColor: '#bbb',
borderWidth: 1,
borderRadius: 4,
padding: [4, 8],
formatter: params => params.data.label ? params.data.label.formatter : ''
}
}],
// color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de']
};
return option
}
export default getGraphChart
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/337/utils/multiLineChart.js
浏览文件 @ 4b63bc6c
...@@ -12,10 +12,10 @@ const getMultiLineChart = (dataX, dataY1, dataY2) => { ...@@ -12,10 +12,10 @@ const getMultiLineChart = (dataX, dataY1, dataY2) => {
} }
}, },
grid: { grid: {
top: '8%', top: 40,
right: '5%', right: 24,
bottom: '5%', bottom: 24,
left: '5%', left: 24,
containLabel: true containLabel: true
}, },
legend: { legend: {
...@@ -32,7 +32,16 @@ const getMultiLineChart = (dataX, dataY1, dataY2) => { ...@@ -32,7 +32,16 @@ const getMultiLineChart = (dataX, dataY1, dataY2) => {
], ],
yAxis: [ yAxis: [
{ {
type: 'value' type: 'value',
name: '数量',
splitLine: {
show: true,
lineStyle: {
type: 'dashed', // 虚线类型
color: 'rgb(231, 243, 255)', // 灰色线条
width: 1 // 线宽为1
}
}
} }
], ],
series: [ series: [
......
src/views/marketAccessRestrictions/marketAccessLayout/overview/337/utils/piechart.js
浏览文件 @ 4b63bc6c
const getPieChart = (data,colorList) => { const getPieChart = (data) => {
const colorList = ['#69B1FF','#FF7875','#B37FEB','#FFC069','#1677FF','#87E8DE','#ADC6FF','#FFBB96','#BAE0FF','#FFD591']
let option = { let option = {
color: colorList, color: colorList,
series: [ series: [
...@@ -7,6 +8,7 @@ const getPieChart = (data,colorList) => { ...@@ -7,6 +8,7 @@ const getPieChart = (data,colorList) => {
radius: [80, 100], radius: [80, 100],
height: '100%', height: '100%',
left: 'center', left: 'center',
top: 'center',
width: '100%', width: '100%',
itemStyle: { itemStyle: {
borderColor: '#fff', borderColor: '#fff',
...@@ -17,11 +19,18 @@ const getPieChart = (data,colorList) => { ...@@ -17,11 +19,18 @@ const getPieChart = (data,colorList) => {
formatter: '{name|{b}} {time|{c} 项 {d}%}\n', formatter: '{name|{b}} {time|{c} 项 {d}%}\n',
minMargin: 5, minMargin: 5,
edgeDistance: 10, edgeDistance: 10,
lineHeight: 15, lineHeight: 24,
rich: { rich: {
name: {
color: 'rgba(59, 65, 75, 1)',
fontFamily: 'Source Han Sans CN',
fontSize: 16,
fontWeight: 'bold',
},
time: { time: {
fontSize: 12, fontSize: 14,
color: '#999' fontFamily: 'Source Han Sans CN',
color: 'rgba(95, 101, 108, 1)',
} }
} }
}, },
......
src/views/newsBrief/ModeuleNews.vue 0 → 100644
浏览文件 @ 4b63bc6c
<template>
<el-space direction="vertical" class="full-width news-image-background">
<el-button class="float-btn" @click="gotoNewsBrief(false)"><el-icon>
<back />
</el-icon> 返回</el-button>
<el-space style="width: 993px;" direction="vertical" alignment="flex-start">
<div style="margin-top: 50px; margin-bottom: 24px; margin-left: 24px;">
<common-text class="text-title-0-show" color="var(--text-primary-90-color)">{{
moduleName
}}</common-text>
<common-text class="text-regular"
color="var(--text-primary-65-color)">基于情报价值评估预测算法，掌握全球重要潜在动向</common-text>
</div>
<el-space direction="vertical" fill alignment="flex-start" class="background-as-card common-padding">
<el-radio-group v-model="currentAreaId" class="radio-group-as-gap-btn">
<el-space direction="horizontal" wrap alignment="center">
<el-radio-button :label="''" @click="changeArea('')">全部</el-radio-button>
<el-radio-button v-for="(t, i) in AreaList" :key="i" :label="t.id" @click="changeArea(t.id)">{{
t.name }}
</el-radio-button>
</el-space>
</el-radio-group>
<el-divider style="margin: 10px 0px;"></el-divider>
<div class="">
<news-list :news="NewsData" />
</div>
</el-space>
</el-space>
</el-space>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from 'vue-router';
import '@/styles/container.scss';
import '@/styles/radio.scss';
import NewsList from "./NewsList.vue";
import { getAreaList, getHotNewsByArea } from "@/api/news/newsBrief";
import { ElSpace, ElDivider, ElRadioButton, ElRadioGroup, ElButton, ElIcon } from "element-plus";
import CommonText from "@/components/base/texts/CommonText.vue";
import AreaTag from "@/components/base/AreaTag/index.vue";
import { useGotoNewsBrief } from "@/router/modules/news";
const route = useRoute();
const gotoNewsBrief = useGotoNewsBrief();
const moduleId = ref(route.params.id);
const moduleName = ref(route.query.name ?? "");
const NewsData = ref([]);
const AreaList = ref([]);
const currentAreaId = ref("");
onMounted(async () => {
console.log(route.query.name, moduleId.value, moduleName.value);
const { data: areaList } = await getAreaList();
AreaList.value = areaList ?? [];
await changeArea("")
});
async function changeArea(id) {
const { data } = await getHotNewsByArea({
moduleId: moduleId.value,
industryId: id,
});
NewsData.value = data ?? [];
}
</script>
<style lang="scss" scoped>
@use '@/styles/common.scss' as *;
@import url("./style.css");
.float-btn {
position: absolute;
top: 24px;
left: 40px;
width: 92px;
height: 40px;
display: flex;
gap: 4px;
align-items: center;
justify-content: center;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 32px;
@extend .text-regular;
color: var(--text-primary-65-color);
}
</style>
\ No newline at end of file
src/views/newsBrief/NewsDetial.vue 0 → 100644
浏览文件 @ 4b63bc6c
<template>
</template>
<script setup>
</script>
<style lang="scss" scoped>
@import url("./style.css");
</style>
\ No newline at end of file
src/views/newsBrief/NewsList.vue 0 → 100644
浏览文件 @ 4b63bc6c
<template>
<el-space direction="vertical" fill class="full-width mouse-hover" v-for="(item, index) in props.news" :key="index">
<news-item2 :img="item.newsImage" :title="item.newsTitle" :from="`新闻来源：${item.newsOrg} 发表时间：${item.newsDate}`"
:aeraTags="item.industryList?.map(t => t.industryName)" @click="gotoNewsDetail(item.newsId)" />
<div class="divider"></div>
</el-space>
</template>
<script setup>
import NewsItem2 from '@/components/base/newsList/NewsItem2.vue';
import { useGotoNewsDetail } from '@/router/modules/news';
import { ElSpace } from 'element-plus';
const gotoNewsDetail = useGotoNewsDetail();
const props = defineProps({
news: {
type: Array,
default: () => []
}
})
</script>
<style lang="css" scoped>
.divider {
width: 100%;
height: 1px;
background: #eaecee;
}
</style>
\ No newline at end of file
src/views/newsBrief/NewsMain.vue 0 → 100644
浏览文件 @ 4b63bc6c
<template>
<el-space direction="vertical" class="full-width" :size=24>
<el-radio-group class="radio-group-as-radius-btn">
<el-space>
<el-radio-button v-for="item in moduleList" :key="item.moduleId" :value="item.moduleId"
@click="() => gotoNewsModule(item.moduleId, item.moduleName, false)">{{
item.moduleName
}} ></el-radio-button>
<!-- <el-radio-button value="nul"><img src="@/assets/icons/adjustment.png" /></el-radio-button> -->
</el-space>
</el-radio-group>
<el-space :size="16" alignment="flex-start">
<box-background width="712px" height="100%" title="今日要闻">
<template #header-icon>
<img src="@/assets/icons/Headlines-icon.svg" />
</template>
<div class="common-padding">
<news-list :news="HeadlinesData" />
</div>
</box-background>
<box-background width="712px" title="中美博弈专题">
<template #header-icon>
<img src="@/assets/icons/subject-icon.png" />
</template>
<el-space :size="16" direction="vertical" fill class="full-width common-padding">
<el-space v-for="(item, index) in subjectData.slice(0, 3)" :key="index" class="mouse-hover"
@click="() => gotoNewsDetail(item.newsId)" alignment="center">
<common-text class="text-bold"
:color="index === 0 ? 'var(--color-red-100)' : (index === 1 ? 'var(--color-orange-100)' : 'var(--text-primary-65-color)')">
{{ `${index + 1}` }}
</common-text>
<common-text class="text-bold" color="var(--text-primary-80-color)">{{
item.newsTitle
}}</common-text>
</el-space>
<el-space v-for="(item, index) in subjectData.slice(3)" :key="index" class="mouse-hover">
<common-text class="text-regular" color="var(--text-primary-80-color)">{{
"• " + item.newsTitle
}}</common-text>
</el-space>
</el-space>
</box-background>
</el-space>
</el-space>
</template>
<script setup>
import { ref, onMounted } from "vue";
import '@/styles/container.scss';
import '@/styles/radio.scss';
import { useGotoNewsModule, useGotoNewsDetail } from "@/router/modules/news";
import { getMoudleType, getTodayNews, getTodayNewByArea, getHotNewsByArea, getHotNews } from "@/api/news/newsBrief";
import { ElInput, ElSpace, ElImage, ElDivider, ElCol, ElRow, ElRadioButton, ElRadioGroup } from "element-plus";
import AreaTag from '@/components/base/AreaTag/index.vue'
import CommonText from "@/components/base/texts/CommonText.vue";
import BoxBackground from '@/components/base/boxBackground/overviewNormalBox.vue'
import NewsList from "./NewsList.vue";
//博弈专题新闻数据
const subjectData = ref([]);
// 今日要闻
const HeadlinesData = ref([
]);
const moduleList = ref([]);
const gotoNewsDetail = useGotoNewsDetail();
const gotoNewsModule = useGotoNewsModule();
onMounted(async () => {
await initData();
});
const handleGetModuleType = async () => {
try {
const res = await getMoudleType();
console.log("模块类别", res);
if (res.code === 200 && res.data) {
moduleList.value = res.data;
}
} catch (error) { }
};
async function updateToday() {
const { data: todayNews } = await getTodayNews();
HeadlinesData.value = todayNews ?? [];
}
async function updateHotNews() {
const { data: hotNews } = await getHotNews();
subjectData.value = hotNews ?? [];
}
async function initData() {
await handleGetModuleType();
await updateToday();
await updateHotNews();
}
</script>
<style lang="scss" scoped>
@import url("./style.css");
</style>
\ No newline at end of file
src/views/newsBrief/index.vue
浏览文件 @ 4b63bc6c
<template> <template>
<div class="newsBrief-page"> <el-scrollbar class="news-image-background">
<div v-if="showPage === 'home'"> <div class="common-page">
<div style="justify-content: space-between"> <el-space direction="vertical" class="full-width">
<div class="news-header">新闻速览</div> <div class="text-title-0-show" style="margin-top: 50px;">新闻速览</div>
<div class="input-box"> <search-box placeholder="请输入关键词" style="margin-top: 19px;margin-bottom: 42px;"></search-box>
<el-input placeholder="请输入关键词" :suffix-icon="searchInput" clearable style="width: 800px; height: 48px"> <news-main></news-main>
</el-input> <!-- <Headlines v-if="showPage === 'headlines'" @type="showPage" @back="changePage" />
</div> <Subject v-if="showPage === 'subject'" @back="changePage" /> -->
</el-space>
<div class="btn-box"> </div>
<div </el-scrollbar>
v-for="(item, index) in moduleList"
:key="index"
:class="moduleActiveId !== item.moduleId ? 'header-btn' : 'header-btn-select'"
@click="handleToWorldHot(item)"
@mouseenter="handleActiveModule(true, item)"
@mouseleave="handleActiveModule(false, item)"
>
<div class="btn-box-text">{{ item.moduleName }}</div>
<div class="btn-box-icon">
<img v-if="moduleActiveId === item.moduleId" src="@/assets/icons/btn-arrow-right-active.png" alt="" />
<img v-else src="@/assets/icons/btn-arrow-right.png" alt="" />
</div>
</div>
<div class="header-btn-more" v-if="moduleList.length">
<img src="@/assets/icons/adjustment.png" />
</div>
</div>
</div>
<div class="main">
<div class="box">
<div class="box-header">
<div class="box-header-img">
<img src="@/assets/icons/Headlines-icon.svg" />
</div>
<div class="box-header-title" @click="changePage('headlines')">今日要闻 ></div>
</div>
<div class="divider"></div>
<div v-for="(item, index) in HeadlinesData" :key="index">
<div class="box1-item">
<div class="box1-item-left">
<div class="box1-item-title">
{{ item.title }}
</div>
<div class="box1-item-content">
<div class="source">新闻来源： {{ item.from }}</div>
<div class="time">发表时间：{{ item.time }}</div>
</div>
<div class="tag-box">
<div v-for="(tag, index) in item.tag" :key="index" class="tag">
{{ tag }}
</div>
</div>
</div>
<div style="margin-left: auto; padding: 10px">
<img :src="item.image" />
</div>
</div>
<div class="divider"></div>
</div>
</div>
<div class="box">
<div class="box-header">
<div class="box-header-img"><img src="@/assets/icons/subject-icon.png" /></div>
<div class="box-header-title">中美博弈专题</div>
</div>
<div class="divider"></div>
<div v-for="(item, index) in subjectData" :key="index">
<div class="subject-line">
<div style="display: flex; align-items: center">
<div
class="subject-line-id"
:class="{
subjectLineId1: index === 0,
subjectLineId2: index === 1,
subjectLineId3: index === 2
}"
>
{{ index <= 2 ? index + 1 : "•" }}
</div>
<div class="text" :class="{ textTop: index < 3 }">
{{ item.newsTitle }}
</div>
</div>
<img v-if="item.hot" :src="`src/assets/icons/arrow-0.png`" />
<img v-else :src="`src/assets/icons/arrow-1.png`" />
</div>
</div>
</div>
</div>
</div>
<Headlines v-if="showPage === 'headlines'" @type="showPage" @back="changePage" />
<Subject v-if="showPage === 'subject'" @back="changePage" />
</div>
</template> </template>
<script setup> <script setup>
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import { getMoudleType, getTodayNews, getHotNews } from "@/api/news/newsBrief"; import '@/styles/container.scss';
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import Headlines from "./Headlines.vue"; import Headlines from "./Headlines.vue";
import Subject from "./Subject.vue"; import Subject from "./Subject.vue";
// import style from './style.css' import { ElInput, ElSpace, ElImage, ElDivider, ElCol, ElRow } from "element-plus";
import AreaTag from '@/components/base/AreaTag/index.vue'
import CommonText from "@/components/base/texts/CommonText.vue";
import NewsMain from "./NewsMain.vue";
import SearchBox from "@/components/base/SearchBox/index.vue";
const route = useRoute();
//顶部数据搜索 //顶部数据搜索
const searchInput = ref(""); const searchInput = ref("");
const moduleList = ref([]);
const moduleActiveId = ref("");
const handleGetModuleType = async () => {
try {
const res = await getMoudleType();
console.log("模块类别", res);
if (res.code === 200 && res.data) {
moduleList.value = res.data;
}
} catch (error) {}
};
// 今日要闻
const HeadlinesData = ref([
{
title: "黎巴嫩真主党指责美国破坏黎稳定 谴责以色列“蓄意挑衅”",
from: "人民网",
time: "2025-10-05",
tag: ["以色列", "美国"],
image: "/testData/HeadlinesData-img.png"
},
{
title: "IMF上调中东和北非地区经济增长预期",
from: "CNN",
time: "2025-10-05",
tag: ["经济", "中东", "IMF"],
image: "/testData/HeadlinesData-img.png"
},
{
title: "日本外务省亚洲大洋洲局局长金井正彰启程访华 预计18日与中方会面",
from: "人民网",
time: "2025-10-05",
tag: ["日本", "访华"],
image: "/testData/HeadlinesData-img.png"
},
{
title: "韩日因独岛主权争议暂停本月联合搜救演习",
from: "凤凰网",
time: "2025-10-05",
tag: ["独岛", "联合军演", "韩国", "日本"],
image: "/testData/HeadlinesData-img.png"
},
{
title: "美“福特”号航母抵达加勒比海 于委内瑞拉附近展开大规模军事集结",
from: "央视网",
time: "2025-10-05",
tag: ["美国", "航母", "加勒比海"],
image: "/testData/HeadlinesData-img.png"
}
]);
const handleGetTodayNews = async () => {
try {
const res = await getTodayNews();
console.log("今日要闻", res);
if (res.code === 200 && res.data) {
} else {
HeadlinesData.value = [];
}
} catch (error) {
HeadlinesData.value = [];
}
};
//当前页面显示 //当前页面显示
const showPage = ref("home"); const showPage = ref("home");
...@@ -178,54 +38,23 @@ const changePage = page => { ...@@ -178,54 +38,23 @@ const changePage = page => {
console.log(page); console.log(page);
showPage.value = page; showPage.value = page;
}; };
//博弈专题新闻数据
const subjectData = ref([
// { id: 1, text: "乌克兰与法国签署意向书 将获 100 架“阵风”战机及多套防空系统", arrow: 0 },
// { id: 2, text: "安理会通过涉加沙决议 建立和平委员会作为过渡行政机构", arrow: 1 },
// { id: 3, text: "日本首相高市早苗涉台及修“无核三原则”言论遭多方强烈反对", arrow: 1 },
// { id: 4, text: "美“福特”号航母打击群进入加勒比海 委方谴责其意图策动政权更迭", arrow: 1 },
// { id: 5, text: "BBC回应特朗普10亿-50亿美元索赔诉讼 称诽谤指控无依据", arrow: 1 },
// { id: 6, text: "俄军打击乌142个区域设施 乌军击落或压制91架俄无人机", arrow: 1 },
]);
const handleGetHotNews = async () => {
try {
const res = await getHotNews();
console.log("中美博弈专题", res);
if (res.code === 200 && res.data) {
subjectData.value = res.data;
} else {
subjectData.value = [];
}
} catch (error) {
subjectData.value = [];
}
};
const handleActiveModule = (isIn, module) => {
moduleActiveId.value = isIn ? module.moduleId : "";
};
const handleToWorldHot = () => {
showPage.value = "subject";
moduleActiveId.value = "";
};
onMounted(() => {
handleGetModuleType();
handleGetTodayNews();
handleGetHotNews();
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import url("./style.css"); @import url("./style.css");
.newsBrief-page { .search-container {
height: 100%; margin: 0 auto;
background: url("@/assets/images/background.png") no-repeat; }
background-position: center -100px;
background-size: 100% 100%; .search-input {
padding-top: 50px; width: 800px;
overflow: hidden; height: 48px;
overflow-y: auto;
//水平居中
margin: 0 auto;
display: block; // 强制设置为块级元素
} }
</style> </style>
src/views/newsBrief/style.css
浏览文件 @ 4b63bc6c
.news-image-background {
height: 100%;
background-image: url("./assets/images/概览页顶端背景.png");
background-position: center -100px;
background-size: 100% 100%;
background-repeat: no-repeat;
overflow: hidden;
overflow-y: auto;
}
.news-header { .news-header {
color: rgba(34, 41, 52, 1); color: rgba(34, 41, 52, 1);
font-family: YouSheBiaoTiHei; font-family: YouSheBiaoTiHei;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论