Skip to content

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

styles:组件命名更新

上级 ea247107
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 301 行增加 和 129 行删除
src/components/RiskSignal/RiskSignal copy.vue 0 → 100644
浏览文件 @ c46c21a0
差异被折叠。
src/components/RiskSignal/RiskSignal.vue
浏览文件 @ c46c21a0
......@@ -9,7 +9,8 @@
<div class="num">{{ list.length }}</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="{
......@@ -37,6 +38,7 @@
</template>
<script setup>
import { ref } from 'vue'
import { ElMessage } from "element-plus";
// 接收父组件传递的参数
const props = defineProps({
......@@ -72,11 +74,19 @@ const props = defineProps({
type: String,
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) => {
......@@ -85,10 +95,84 @@ const handleItemClick = (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;
// }
// };
const loadMore = () => {
emit('loadMore')
}
</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";
import '@/assets/fonts/font.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import AreaTag from '@/components/base/areaTag/AreaTag.vue'
import leftBtn from "@/components/base/pageBtn/leftBtn.vue";
import rightBtn from "@/components/base/pageBtn/rightBtn.vue";
import OverviewMainBox from "@/components/base/boxBackground/overviewMainBox.vue";
import OverviewNormalBox from "@/components/base/boxBackground/overviewNormalBox.vue";
import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue'
import NewsList from '@/components/base/newsList/NewsList.vue'
import ModuleHeader from '@/components/base/moduleHeader/index.vue'
import RiskSignal from "@/components/base/riskSignal/RiskSignal.vue";
import MessageBubble from "@/components/base/messageBubble/MessageBubble.vue";
import AreaTag from '@/components/base/AreaTag/index.vue'
import LeftBtn from "@/components/base/PageBtn/LeftBtn.vue";
import RightBtn from "@/components/base/PageBtn/RightBtn.vue";
import OverviewMainBox from "@/components/base/BoxBackground/OverviewMainBox.vue";
import OverviewNormalBox from "@/components/base/BoxBackground/OverviewNormalBox.vue";
import AnalysisBox from '@/components/base/BoxBackground/AnalysisBox.vue'
import NewsList from '@/components/base/NewsList/index.vue'
import ModuleHeader from '@/components/base/ModuleHeader/index.vue'
import RiskSignal from "@/components/base/RiskSignal/index.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 实例
import pinia from './stores'
......@@ -41,8 +43,8 @@ app.use(ElementPlus, {
app.use(pinia) // 挂载 Pinia
app.component("CardTitle", CardTitle);
app.component('AreaTag', AreaTag) // 领域标签
app.component('leftBtn', leftBtn) // 向左按钮
app.component('rightBtn', rightBtn) // 向右按钮
app.component('LeftBtn', LeftBtn) // 向左按钮
app.component('RightBtn', RightBtn) // 向右按钮
app.component('OverviewMainBox', OverviewMainBox) // 概览页最新动态背景盒子
app.component('OverviewNormalBox', OverviewNormalBox) // 概览页一版模块背景盒子
app.component('AnalysisBox', AnalysisBox) // 分析页模块背景
......@@ -50,5 +52,8 @@ app.component('ModuleHeader', ModuleHeader) // 模块头部
app.component('RiskSignal', RiskSignal) // 风险信号
app.component('NewsList', NewsList) // 新闻资讯
app.component('MessageBubble', MessageBubble) // 社交媒体
app.component('SourceTabLsit', SourceTabLsit) // 资源库tab列表
app.component('ActionButton', ActionButton) // 普通按钮和激活按钮
app.mount("#app");
src/views/coopRestriction/components/askPage/index.vue
浏览文件 @ c46c21a0
......@@ -50,7 +50,7 @@
</template>
<script setup>
import NewsList from "@/components/NewsList/NewsList.vue";
import { ref, onMounted } from "vue";
import router from '@/router'
import { getCoopRestrictionNews, getCoopRestrictionSocial } from '@/api/coopRestriction/coopRestriction'
......
src/views/marketAccessRestrictions/marketAccessHome/index.vue
浏览文件 @ c46c21a0
......@@ -265,94 +265,15 @@
</div>
<DivideHeader id="position2" class="divide-header" :titleText="'资讯要闻'"></DivideHeader>
<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"
img="newsImage" title="newsTitle" content="newsContent" from="from" />
<MessageBubble :messageList="messageList" @person-click="handleClickPerson" @more-click="handleToSocialDetail"
source="orgName" content="remarks" name="personName" imageUrl="personImage">
</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>
<DivideHeader id="position3" class="divide-header" :titleText="'数据总览'"></DivideHeader>
<div class="center-footer">
<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="调查数量">
<template #headerIcon>
<img style="width: 100%; height: 100%;" src="./assets/images/box3-header-icon.png" alt="" />
......@@ -377,27 +298,6 @@
</OverviewNormalBox>
</div>
<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">
<template #headerIcon>
<img style="width: 100%; height: 100%;" src="./assets/images/box6-header-icon.png" alt="" />
......@@ -474,16 +374,10 @@
</div>
</div>
</div>
<div class="home-main-footer">
<DivideHeader id="position4" class="divide-header" :titleText="'资源库'"></DivideHeader>
<div class="home-main-footer-header">
<div class="btn-box">
<div class="btn" :class="{ btnActive: activeCateId === cate.id }" v-for="(cate, index) in categoryList"
:key="index" @click="handleClickCate(cate)">
{{ cate.name }}
</div>
</div>
<SourceTabList :sourceTabList="categoryList" :activeSouceTabId="activeCateId" @clickTab="handleClickCate"></SourceTabList>
<div class="select-box">
<div class="paixu-btn" @click="handleSwithSort">
<div class="icon1">
......@@ -1391,8 +1285,8 @@ const categoryList = ref([
const activeCateId = ref("");
const handleClickCate = cate => {
activeCateId.value = cate.id;
const handleClickCate = item => {
activeCateId.value = item.id;
handleGetInsList()
handleGetSurveyList();
};
......@@ -2820,11 +2714,9 @@ onMounted(async () => {
justify-content: flex-end;
align-items: center;
gap: 8px;
.icon {
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
......
src/views/marketAccessRestrictions/marketAccessLayout/overview/232/index.vue
浏览文件 @ c46c21a0
......@@ -27,7 +27,7 @@
<div class="header-left"></div>
<div class="title">232调查数量年度变化趋势</div>
<div class="header-btn-box">
<div
<!-- <div
class="btn"
:class="{ btnActive: btnActiveName === '发起调查' }"
@click="handleClickBox1Btn('发起调查')"
......@@ -40,7 +40,9 @@
@click="handleClickBox1Btn('结束调查')"
>
{{ "结束调查" }}
</div>
</div> -->
<ActionButton :type="btnActiveName === '发起调查' ? 'active' : 'normal'" name="发起调查" @click="handleClickBox1Btn('发起调查')"></ActionButton>
<ActionButton :type="btnActiveName === '结束调查' ? 'active' : 'normal'" name="结束调查" @click="handleClickBox1Btn('结束调查')"></ActionButton>
</div>
<div class="header-right">
<div class="icon">
......@@ -293,6 +295,7 @@ onMounted(() => {
top: 14px;
right: 120px;
display: flex;
gap: 8px;
.btn {
margin-left: 8px;
height: 28px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论