Skip to content

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

styles:组件命名更新

上级 ea247107
显示空白字符变更
内嵌 并排
正在显示 包含 727 行增加 和 129 行删除
src/components/RiskSignal/RiskSignal copy.vue 0 → 100644
浏览文件 @ c46c21a0
<template>
<div class="box2">
<div class="box2-header">
<div class="icon">
<img src="./image1.png" alt="" />
</div>
<div class="title">
<div class="text">{{ title }}</div>
<div class="num">{{ list.length }}</div>
</div>
</div>
<div class="box2-main" v-infinite-scroll="loadMore" :infinite-scroll-disabled="allLoaded || loading"
:infinite-scroll-distance="10" v-loading="loading">
<div class="box2-main-item" v-for="(item, index) in list" :key="index" @click="handleItemClick(item, index)">
<div :class="{
itemLeftStatus1: item[props.riskLevel] === '特别重大',
itemLeftStatus2: item[props.riskLevel] === '重大风险',
itemLeftStatus3: item[props.riskLevel] === '较大风险',
itemLeftStatus4: item[props.riskLevel] === '一般风险' || !item[props.riskLevel],
itemLeftStatus5: item[props.riskLevel] === '低风险',
}">
{{ item[props.riskLevel] || "暂无数据" }}
</div>
<div class="item-right">
<div class="text"> <span class="text-inner">{{ item[props.name] }}</span></div>
<div class="time">{{ item[props.postDate] }}</div>
</div>
</div>
</div>
<div class="box2-footer" @click="handleMoreClick" v-if="showMore">
<div class="icon">
<img src="./image2.png" alt="" />
</div>
<div class="text">{{ moreText }}</div>
</div>
</div>
</template>
<script setup>
import {ref} from 'vue'
import { ElMessage } from "element-plus";
// 接收父组件传递的参数
const props = defineProps({
// 标题（默认“风险信号”）
title: {
type: String,
default: "风险信号"
},
// 风险信号列表数据
list: {
type: Array,
default: () => []
},
// “查看更多”文本（默认“查看更多”）
moreText: {
type: String,
default: "查看更多"
},
//控制“查看更多”是否显示，默认显示
showMore: {
type: Boolean,
default: true
},
name: {
type: String,
default: "name"
},
postDate: {
type: String,
default: "postDate"
},
riskLevel: {
type: String,
default: "riskLevel"
},
});
// 定义自定义事件，把点击事件传递给父组件
const emit = defineEmits(['item-click', 'more-click']);
// 点击单条风险信号
const handleItemClick = (item, index) => {
emit('item-click', item, index)
};
// 点击“查看更多”
const handleMoreClick = () => {
emit('more-click')
};
const allLoaded = ref(false)
const loading = ref(false)
const currentPage = ref(0)
const pageSize = ref(7)
const loadMore = async () => {
if (allLoaded.value || loading.value) return;
// await fetchListData(true); // 传入 true 表示追加数据
ElMessage.success('追加数据')
}
// 添加初始化函数来获取数据
const fetchListData = async (append = false) => {
console.log("加载状态 =>", loading.value, allLoaded.value);
if (loading.value || allLoaded.value) return;
try {
loading.value = true;
// 调用接口获取数据
const response = await getStrategiesTopN(currentPage.value, pageSize.value, countryName.value);
const apiData = response.data || [];
// 转换数据格式
const newData =
apiData.content?.map(item => ({
...item,
img: item.countryImageUrl, // 使用默认图片或根据需要调整
title: item.titleZh,
content: item.contentZh,
time: formatTime(item.date), // 转换时间格式
tagList: item.domains
? item.domains.slice(0, 2).map(field => ({
name: field,
status: Math.floor(Math.random() * 3) + 1 // 随机分配 1-3 的状态值
}))
: []
})) || [];
if (newData.length > 0) {
if (append) {
// 追加数据
list.value = [...list.value, ...newData];
} else {
// 替换数据
list.value = [...newData];
}
// 检查是否还有更多数据（根据实际 API 响应调整判断逻辑）
if (newData.length < pageSize.value) {
allLoaded.value = true;
} else {
currentPage.value++;
}
} else {
allLoaded.value = true;
}
console.log("获取策略数据成功:", list.value);
} catch (error) {
console.error("获取策略数据失败:", error);
// 错误处理，停止加载状态但不重置数据
if (!append && list.value.length === 0) {
list.value = [];
}
} finally {
loading.value = false;
}
};
</script>
<style scoped lang="scss">
.risk-status-base {
width: 40px;
height: 40px;
border-radius: 20px;
font-size: 12px;
font-weight: 400;
line-height: 14px;
box-sizing: border-box;
padding: 6px 4px;
text-align: center;
}
.itemLeftStatus1 {
color: rgb(206, 79, 81) !important;
background: rgba(255, 241, 240, 1) !important;
@extend .risk-status-base
}
.itemLeftStatus2 {
color: rgba(250, 140, 22, 1) !important;
background: rgba(255, 247, 230, 1) !important;
@extend .risk-status-base
}
.itemLeftStatus3 {
color: rgba(212, 177, 6, 1) !important;
background: rgba(254, 255, 230, 1) !important;
@extend .risk-status-base
}
.itemLeftStatus4 {
color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important;
@extend .risk-status-base
}
.itemLeftStatus5 {
color: rgba(22, 119, 255, 1) !important;
background: rgba(230, 244, 255, 1) !important;
@extend .risk-status-base
}
.box2 {
width: 520px;
height: 450px;
border-radius: 10px;
position: relative;
background: rgba(255, 255, 255, 1);
padding: 0;
box-shadow: 0 0 20px 0 rgba(25, 69, 130, 0.1);
border: 1px solid rgba(234, 236, 238, 1);
box-sizing: border-box;
overflow: hidden;
.box2-header {
height: 48px;
display: flex;
border-bottom: 1px solid rgba(240, 242, 244, 1);
.icon {
width: 24px;
height: 24px;
margin-left: 18px;
margin-top: 14px;
margin-bottom: 10px;
img {
width: 100%;
height: 100%;
}
}
.title {
display: flex;
width: 148px;
background: rgb(206, 79, 81);
margin-left: 18px;
.text {
margin-left: 16px;
height: 48px;
color: rgba(255, 255, 255, 1);
font-family: 'Source Han Sans CN';
font-size: 20px;
font-weight: 700;
line-height: 48px;
}
.num {
width: 24px;
height: 20px;
line-height: 20px;
text-align: center;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 12px;
margin-left: 15px;
margin-top: 15px;
border-radius: 100px;
background: rgba(255, 255, 255, 0.3);
}
}
}
.box2-main {
box-sizing: border-box;
padding-left: 23px;
padding-right: 30px;
overflow-y: auto;
width: 520px;
height: calc(100% - 160px);
border-radius: 4px;
.box2-main-item {
width: 463px;
height: 48px;
border-radius: 2px;
position: relative;
display: flex;
align-items: center;
cursor: pointer;
&:hover {
.item-right .text {
color: rgb(5, 95, 194) !important;
font-weight: 700;
}
.item-right .text-inner {
border-bottom-color: rgb(5, 95, 194) !important;
}
}
.item-left {
margin-top: 4px;
margin-left: 0px;
margin-bottom: 4px;
width: 40px;
height: 40px;
border-radius: 20px;
color: rgba(82, 196, 26, 1);
background: rgba(246, 255, 237, 1);
font-family: Microsoft YaHei;
font-size: 12px;
font-weight: 400;
line-height: 14px;
box-sizing: border-box;
padding: 6px 4px;
text-align: center;
flex-shrink: 0;
}
.item-right {
margin-left: 12px;
height: 46px;
display: flex;
align-items: center;
flex: 1;
background: transparent;
padding: 0;
border-bottom: 1px solid #EAECEE;
box-sizing: border-box;
overflow: hidden; // 保证右侧不会溢出
.text {
padding-top: 8px;
padding-bottom: 8px;
flex: 1 1 auto;
min-width: 0;
height: 100%;
background: transparent;
font-family: "Source Han Sans CN";
font-weight: 400;
font-size: 16px;
letter-spacing: 0px;
text-align: left;
color: rgb(59, 65, 75);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
flex-shrink: 1;
.text-inner {
border-bottom: 1px solid transparent;
}
}
.time {
flex: 0 0 auto;
margin-left: 12px;
padding-top: 11px;
padding-bottom: 11px;
height: 100%;
flex-shrink: 0;
background: transparent;
font-family: "Source Han Sans CN", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0px;
text-align: right;
box-sizing: border-box;
color: rgb(132, 136, 142);
white-space: nowrap;
}
}
}
}
.box2-footer {
position: absolute;
left: 26px;
right: 20px;
bottom: 20px;
width: 460px;
height: 42px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-radius: 6px;
background: var(--color-main-active);
cursor: pointer;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 8px;
color: rgba(255, 255, 255, 1);
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
</style>
\ No newline at end of file
src/components/RiskSignal/RiskSignal.vue
浏览文件 @ c46c21a0
...@@ -9,7 +9,8 @@ ...@@ -9,7 +9,8 @@
<div class="num">{{ list.length }}</div> <div class="num">{{ list.length }}</div>
</div> </div>
</div> </div>
<div class="box2-main"> <div class="box2-main" v-infinite-scroll="loadMore" :infinite-scroll-disabled="allLoaded || loading"
:infinite-scroll-distance="10" v-loading="loading">
<div class="box2-main-item" v-for="(item, index) in list" :key="index" @click="handleItemClick(item, index)"> <div class="box2-main-item" v-for="(item, index) in list" :key="index" @click="handleItemClick(item, index)">
<div :class="{ <div :class="{
...@@ -37,6 +38,7 @@ ...@@ -37,6 +38,7 @@
</template> </template>
<script setup> <script setup>
import { ref } from 'vue'
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
// 接收父组件传递的参数 // 接收父组件传递的参数
const props = defineProps({ const props = defineProps({
...@@ -72,11 +74,19 @@ const props = defineProps({ ...@@ -72,11 +74,19 @@ const props = defineProps({
type: String, type: String,
default: "riskLevel" default: "riskLevel"
}, },
allLoaded: {
type: Boolean,
default: false
},
loading: {
type: Boolean,
default: false
},
}); });
// 定义自定义事件，把点击事件传递给父组件 // 定义自定义事件，把点击事件传递给父组件
const emit = defineEmits(['item-click', 'more-click']); const emit = defineEmits(['item-click', 'more-click', 'loadMore']);
// 点击单条风险信号 // 点击单条风险信号
const handleItemClick = (item, index) => { const handleItemClick = (item, index) => {
...@@ -85,10 +95,84 @@ const handleItemClick = (item, index) => { ...@@ -85,10 +95,84 @@ const handleItemClick = (item, index) => {
// 点击“查看更多” // 点击“查看更多”
const handleMoreClick = () => { const handleMoreClick = () => {
emit('more-click') emit('more-click')
}; };
// const allLoaded = ref(false)
// const loading = ref(false)
// const currentPage = ref(0)
// const pageSize = ref(7)
// const loadMore = async () => {
// if (allLoaded.value || loading.value) return;
// // await fetchListData(true); // 传入 true 表示追加数据
// ElMessage.success('追加数据')
// }
// // 添加初始化函数来获取数据
// const fetchListData = async (append = false) => {
// console.log("加载状态 =>", loading.value, allLoaded.value);
// if (loading.value || allLoaded.value) return;
// try {
// loading.value = true;
// // 调用接口获取数据
// const response = await getStrategiesTopN(currentPage.value, pageSize.value, countryName.value);
// const apiData = response.data || [];
// // 转换数据格式
// const newData =
// apiData.content?.map(item => ({
// ...item,
// img: item.countryImageUrl, // 使用默认图片或根据需要调整
// title: item.titleZh,
// content: item.contentZh,
// time: formatTime(item.date), // 转换时间格式
// tagList: item.domains
// ? item.domains.slice(0, 2).map(field => ({
// name: field,
// status: Math.floor(Math.random() * 3) + 1 // 随机分配 1-3 的状态值
// }))
// : []
// })) || [];
// if (newData.length > 0) {
// if (append) {
// // 追加数据
// list.value = [...list.value, ...newData];
// } else {
// // 替换数据
// list.value = [...newData];
// }
// // 检查是否还有更多数据（根据实际 API 响应调整判断逻辑）
// if (newData.length < pageSize.value) {
// allLoaded.value = true;
// } else {
// currentPage.value++;
// }
// } else {
// allLoaded.value = true;
// }
// console.log("获取策略数据成功:", list.value);
// } catch (error) {
// console.error("获取策略数据失败:", error);
// // 错误处理，停止加载状态但不重置数据
// if (!append && list.value.length === 0) {
// list.value = [];
// }
// } finally {
// loading.value = false;
// }
// };
const loadMore = () => {
emit('loadMore')
}
</script> </script>
......
src/components/base/ActionButton/index.vue 0 → 100644
浏览文件 @ c46c21a0
<template>
<button class="action-button" :type="type">
{{ name }}
</button>
</template>
<script setup>
defineProps({
type: {
type: String,
default: 'normal'
},
name: {
type: String,
default: ''
}
})
</script>
<style scoped>
.action-button {
height: 28px;
padding: 0 8px;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
cursor: pointer;
line-height: 26px;
font-family: Source Han Sans CN;
font-size: 16px;
font-weight: 400;
transition: all 0.3s;
}
.action-button[type="normal"] {
background-color: rgba(255, 255, 255, 1);
color: rgba(59, 65, 75, 1);
}
.action-button[type="active"] {
background-color: rgba(231, 243, 255, 1);
color: var(--color-main-active);
border: 1px solid var(--color-main-active);
}
/* 悬停效果
.action-button[type="normal"]:hover {
background-color: #d9d9d9;
}
.action-button[type="active"]:hover {
background-color: #40a9ff;
} */
</style>
\ No newline at end of file
src/components/base/MainButton/MainButton.vue 0 → 100644
浏览文件 @ c46c21a0
<template>
<button class="main-button" :type="type">
</button>
</template>
<script setup>
defineProps({
type: {
type: String,
default: 'normal'
},
name: {
type: String,
default: ''
}
})
</script>
<style scoped>
.main-button {
height: 28px;
padding: 0 8px;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
cursor: pointer;
line-height: 26px;
font-family: Source Han Sans CN;
font-size: 16px;
font-weight: 400;
transition: all 0.3s;
}
.main-button[type="normal"] {
background-color: rgba(255, 255, 255, 1);
color: rgba(59, 65, 75, 1);
}
.main-button[type="active"] {
background-color: rgba(231, 243, 255, 1);
color: var(--color-main-active);
border: 1px solid var(--color-main-active);
}
/* 悬停效果
.main-button[type="normal"]:hover {
background-color: #d9d9d9;
}
.main-button[type="active"]:hover {
background-color: #40a9ff;
} */
</style>
\ No newline at end of file
src/components/base/SourceTabList/index.vue 0 → 100644
浏览文件 @ c46c21a0
<template>
<div class="source-tab-list-wrapper" :style="{ width: width }">
<div class="tab-item" :class="{ tabItemActive: activeSouceTabId === item.id }" v-for="item, index in sourceTabList"
:key="index" @click="handleClcikTab(item)">
{{ item.name }}
</div>
</div>
</template>
<script setup>
const props = defineProps({
width: {
type: String,
default: '1000px'
},
sourceTabList: {
type: Array,
default: [
]
},
activeSouceTabId: {
type: [String, Number],
default: ''
}
})
const emit = defineEmits('clickTab')
const handleClcikTab = (tab) => {
emit('clickTab', tab)
}
</script>
<style lang="scss" scoped>
.source-tab-list-wrapper {
height: 42px;
display: flex;
justify-content: flex-start;
gap: 12px;
.tab-item {
height: 42px;
line-height: 42px;
padding: 0 16px;
font-size: 20px;
font-weight: 400;
color: rgba(59, 65, 75, 1);
font-family: Source Han Sans CN;
text-align: center;
cursor: pointer;
&:hover {
color: var(--color-main-active);
}
}
.tabItemActive {
background: var(--color-main-active);
color: #fff;
font-weight: 700;
border-radius: 21px;
&:hover {
color: #fff;
}
}
}
</style>
\ No newline at end of file
src/main.js
浏览文件 @ c46c21a0
...@@ -12,16 +12,18 @@ import "./styles/main.css"; ...@@ -12,16 +12,18 @@ import "./styles/main.css";
import '@/assets/fonts/font.css' import '@/assets/fonts/font.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs' import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import AreaTag from '@/components/base/areaTag/AreaTag.vue' import AreaTag from '@/components/base/AreaTag/index.vue'
import leftBtn from "@/components/base/pageBtn/leftBtn.vue"; import LeftBtn from "@/components/base/PageBtn/LeftBtn.vue";
import rightBtn from "@/components/base/pageBtn/rightBtn.vue"; import RightBtn from "@/components/base/PageBtn/RightBtn.vue";
import OverviewMainBox from "@/components/base/boxBackground/overviewMainBox.vue"; import OverviewMainBox from "@/components/base/BoxBackground/OverviewMainBox.vue";
import OverviewNormalBox from "@/components/base/boxBackground/overviewNormalBox.vue"; import OverviewNormalBox from "@/components/base/BoxBackground/OverviewNormalBox.vue";
import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue' import AnalysisBox from '@/components/base/BoxBackground/AnalysisBox.vue'
import NewsList from '@/components/base/newsList/NewsList.vue' import NewsList from '@/components/base/NewsList/index.vue'
import ModuleHeader from '@/components/base/moduleHeader/index.vue' import ModuleHeader from '@/components/base/ModuleHeader/index.vue'
import RiskSignal from "@/components/base/riskSignal/RiskSignal.vue"; import RiskSignal from "@/components/base/RiskSignal/index.vue";
import MessageBubble from "@/components/base/messageBubble/MessageBubble.vue"; import MessageBubble from "@/components/base/MessageBubble/index.vue";
import SourceTabLsit from '@/components/base/SourceTabList/index.vue'
import ActionButton from "@/components/base/ActionButton/index.vue"
// 引入 Pinia 实例 // 引入 Pinia 实例
import pinia from './stores' import pinia from './stores'
...@@ -41,8 +43,8 @@ app.use(ElementPlus, { ...@@ -41,8 +43,8 @@ app.use(ElementPlus, {
app.use(pinia) // 挂载 Pinia app.use(pinia) // 挂载 Pinia
app.component("CardTitle", CardTitle); app.component("CardTitle", CardTitle);
app.component('AreaTag', AreaTag) // 领域标签 app.component('AreaTag', AreaTag) // 领域标签
app.component('leftBtn', leftBtn) // 向左按钮 app.component('LeftBtn', LeftBtn) // 向左按钮
app.component('rightBtn', rightBtn) // 向右按钮 app.component('RightBtn', RightBtn) // 向右按钮
app.component('OverviewMainBox', OverviewMainBox) // 概览页最新动态背景盒子 app.component('OverviewMainBox', OverviewMainBox) // 概览页最新动态背景盒子
app.component('OverviewNormalBox', OverviewNormalBox) // 概览页一版模块背景盒子 app.component('OverviewNormalBox', OverviewNormalBox) // 概览页一版模块背景盒子
app.component('AnalysisBox', AnalysisBox) // 分析页模块背景 app.component('AnalysisBox', AnalysisBox) // 分析页模块背景
...@@ -50,5 +52,8 @@ app.component('ModuleHeader', ModuleHeader) // 模块头部 ...@@ -50,5 +52,8 @@ app.component('ModuleHeader', ModuleHeader) // 模块头部
app.component('RiskSignal', RiskSignal) // 风险信号 app.component('RiskSignal', RiskSignal) // 风险信号
app.component('NewsList', NewsList) // 新闻资讯 app.component('NewsList', NewsList) // 新闻资讯
app.component('MessageBubble', MessageBubble) // 社交媒体 app.component('MessageBubble', MessageBubble) // 社交媒体
app.component('SourceTabLsit', SourceTabLsit) // 资源库tab列表
app.component('ActionButton', ActionButton) // 普通按钮和激活按钮
app.mount("#app"); app.mount("#app");
src/views/coopRestriction/components/askPage/index.vue
浏览文件 @ c46c21a0
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
</template> </template>
<script setup> <script setup>
import NewsList from "@/components/NewsList/NewsList.vue";
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import router from '@/router' import router from '@/router'
import { getCoopRestrictionNews, getCoopRestrictionSocial } from '@/api/coopRestriction/coopRestriction' import { getCoopRestrictionNews, getCoopRestrictionSocial } from '@/api/coopRestriction/coopRestriction'
......
src/views/marketAccessRestrictions/marketAccessHome/index.vue
浏览文件 @ c46c21a0
...@@ -265,94 +265,15 @@ ...@@ -265,94 +265,15 @@
</div> </div>
<DivideHeader id="position2" class="divide-header" :titleText="'资讯要闻'"></DivideHeader> <DivideHeader id="position2" class="divide-header" :titleText="'资讯要闻'"></DivideHeader>
<div class="center-center"> <div class="center-center">
<!-- <div class="box3">
<div class="box3-header">
<div class="box3-header-left">
<div class="box3-header-icon">
<img src="./assets/images/header-news.png" alt="" />
</div>
<div class="box3-header-title">{{ "新闻资讯" }}</div>
<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
</div>
</div>
<div class="box3-main">
<div class="box3-item" v-for="(news, index) in newsList" :key="index" @click="handleToNewsAnalysis(news)">
<div class="left">
<img :src="news.newsImage ? news.newsImage : DefaultNewsIcon" alt="" />
</div>
<div class="right">
<div class="right-top">
<div class="title">{{ news.newsTitle }}</div>
<div class="time">{{ news.newsDate + " · " + news.newsOrg }}</div>
</div>
<!-- <el-popover effect="dark" :width="1000" :content="news.newsContent" placement="top-start">
<template #reference>
<div class="right-footer">{{ news.newsContent }}</div>
</template>
</el-popover> --
<div class="right-footer">{{ news.newsContent }}</div>
</div>
</div>
</div>
</div> -->
<NewsList :newsList="newsList" @item-click="handleToNewsAnalysis" @more-click="handleToMoreNews" <NewsList :newsList="newsList" @item-click="handleToNewsAnalysis" @more-click="handleToMoreNews"
img="newsImage" title="newsTitle" content="newsContent" from="from" /> img="newsImage" title="newsTitle" content="newsContent" from="from" />
<MessageBubble :messageList="messageList" @person-click="handleClickPerson" @more-click="handleToSocialDetail" <MessageBubble :messageList="messageList" @person-click="handleClickPerson" @more-click="handleToSocialDetail"
source="orgName" content="remarks" name="personName" imageUrl="personImage"> source="orgName" content="remarks" name="personName" imageUrl="personImage">
</MessageBubble> </MessageBubble>
<!-- <div class="box4">
<div class="box4-header">
<div class="header-icon">
<img src="./assets/images/header-message.png" alt="" />
</div>
<div class="header-title">{{ "社交媒体" }}</div>
</div>
<div class="box4-main">
<MessageBubble v-for="(item, index) in messageList" @click="handleClickPerson(item)"
@info-click="handleMediaClick(item)" :key="index"
:avatar="item.personImage ? item.personImage : DefaultUserIcon" :name="item.personName"
:time="item.time" :source="item.orgName" :content="item.remarks" />
<!-- <div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
<div class="left" @click="handleClickPerson(item)">
<img :src="item.personImage ? item.personImage : DefaultUserIcon" alt="" />
</div>
<div class="right">
<div class="right-top">
<div class="name">{{ item.personName }}</div>
<div class="time">{{ item.time + " · " + item.orgName }}</div>
</div>
<div class="content">{{ item.remarks }}</div>
</div>
</div> --
</div>
</div> -->
</div> </div>
<DivideHeader id="position3" class="divide-header" :titleText="'数据总览'"></DivideHeader> <DivideHeader id="position3" class="divide-header" :titleText="'数据总览'"></DivideHeader>
<div class="center-footer"> <div class="center-footer">
<div class="box5"> <div class="box5">
<!-- <div class="box5-header">
<div class="box5-header-left">
<div class="box5-header-icon">
<img src="./assets/images/box3-header-icon.png" alt="" />
</div>
<div class="box5-header-title">{{ "调查数量" }}</div>
</div>
<div class="box-header-right">
<div class="icon">
<img src="@/assets/images/icon/header-btn.png" alt="" />
</div>
<div class="text">{{ "数据来源：美国商务部" }}</div>
</div>
</div>
<div class="box5-main">
<div class="box5-main-chart" id="chart1"></div>
<div class="box5-main-btn-box">
<div class="right-box" :class="{ rightBoxActive: box5BtnActive === item.value }"
v-for="(item, index) in box5BtnList" :key="index" @click="handleChangeBox5Btn(item.value)">
{{ item.name }}
</div>
</div>
</div> -->
<OverviewNormalBox title="调查数量"> <OverviewNormalBox title="调查数量">
<template #headerIcon> <template #headerIcon>
<img style="width: 100%; height: 100%;" src="./assets/images/box3-header-icon.png" alt="" /> <img style="width: 100%; height: 100%;" src="./assets/images/box3-header-icon.png" alt="" />
...@@ -377,27 +298,6 @@ ...@@ -377,27 +298,6 @@
</OverviewNormalBox> </OverviewNormalBox>
</div> </div>
<div class="box6"> <div class="box6">
<!-- <div class="box6-header">
<div class="header-icon">
<img src="./assets/images/box6-header-icon.png" alt="" />
</div>
<div class="header-title">{{ "制裁领域分布" }}</div>
<div class="box-header-right">
<div class="icon">
<img src="@/assets/images/icon/header-btn.png" alt="" />
</div>
<div class="text">{{ "数据来源：美国商务部" }}</div>
</div>
</div>
<div class="box6-main">
<div class="box6-main-select-box">
<el-select v-model="box6SelectedYear" @change="handleChangeBox6Year" placeholder="选择时间"
style="width: 120px">
<el-option v-for="item in box6YearList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div class="box6-mian-chart" id="chart2"></div>
</div> -->
<OverviewNormalBox title="制裁领域分布" width="521px"> <OverviewNormalBox title="制裁领域分布" width="521px">
<template #headerIcon> <template #headerIcon>
<img style="width: 100%; height: 100%;" src="./assets/images/box6-header-icon.png" alt="" /> <img style="width: 100%; height: 100%;" src="./assets/images/box6-header-icon.png" alt="" />
...@@ -474,16 +374,10 @@ ...@@ -474,16 +374,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="home-main-footer"> <div class="home-main-footer">
<DivideHeader id="position4" class="divide-header" :titleText="'资源库'"></DivideHeader> <DivideHeader id="position4" class="divide-header" :titleText="'资源库'"></DivideHeader>
<div class="home-main-footer-header"> <div class="home-main-footer-header">
<div class="btn-box"> <SourceTabList :sourceTabList="categoryList" :activeSouceTabId="activeCateId" @clickTab="handleClickCate"></SourceTabList>
<div class="btn" :class="{ btnActive: activeCateId === cate.id }" v-for="(cate, index) in categoryList"
:key="index" @click="handleClickCate(cate)">
{{ cate.name }}
</div>
</div>
<div class="select-box"> <div class="select-box">
<div class="paixu-btn" @click="handleSwithSort"> <div class="paixu-btn" @click="handleSwithSort">
<div class="icon1"> <div class="icon1">
...@@ -1391,8 +1285,8 @@ const categoryList = ref([ ...@@ -1391,8 +1285,8 @@ const categoryList = ref([
const activeCateId = ref(""); const activeCateId = ref("");
const handleClickCate = cate => { const handleClickCate = item => {
activeCateId.value = cate.id; activeCateId.value = item.id;
handleGetInsList() handleGetInsList()
handleGetSurveyList(); handleGetSurveyList();
}; };
...@@ -2820,11 +2714,9 @@ onMounted(async () => { ...@@ -2820,11 +2714,9 @@ onMounted(async () => {
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
.icon { .icon {
width: 14px; width: 14px;
height: 16px; height: 16px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
......
src/views/marketAccessRestrictions/marketAccessLayout/overview/232/index.vue
浏览文件 @ c46c21a0
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
<div class="header-left"></div> <div class="header-left"></div>
<div class="title">232调查数量年度变化趋势</div> <div class="title">232调查数量年度变化趋势</div>
<div class="header-btn-box"> <div class="header-btn-box">
<div <!-- <div
class="btn" class="btn"
:class="{ btnActive: btnActiveName === '发起调查' }" :class="{ btnActive: btnActiveName === '发起调查' }"
@click="handleClickBox1Btn('发起调查')" @click="handleClickBox1Btn('发起调查')"
...@@ -40,7 +40,9 @@ ...@@ -40,7 +40,9 @@
@click="handleClickBox1Btn('结束调查')" @click="handleClickBox1Btn('结束调查')"
> >
{{ "结束调查" }} {{ "结束调查" }}
</div> </div> -->
<ActionButton :type="btnActiveName === '发起调查' ? 'active' : 'normal'" name="发起调查" @click="handleClickBox1Btn('发起调查')"></ActionButton>
<ActionButton :type="btnActiveName === '结束调查' ? 'active' : 'normal'" name="结束调查" @click="handleClickBox1Btn('结束调查')"></ActionButton>
</div> </div>
<div class="header-right"> <div class="header-right">
<div class="icon"> <div class="icon">
...@@ -293,6 +295,7 @@ onMounted(() => { ...@@ -293,6 +295,7 @@ onMounted(() => {
top: 14px; top: 14px;
right: 120px; right: 120px;
display: flex; display: flex;
gap: 8px;
.btn { .btn {
margin-left: 8px; margin-left: 8px;
height: 28px; height: 28px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论