Skip to content

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

refactor: 移除base外的同名组件RiskSignal和NewsList

上级 67c1079a
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 121 行增加 和 281 行删除
src/components/NewsList.vue deleted 100644 → 0
浏览文件 @ 67c1079a
<template>
<div class="news-box">
<div class="box3-header">
<div class="box3-header-left">
<div class="box3-header-icon">
<img src="@/assets/images/box3-header-icon.png" alt="" />
</div>
<div class="box3-header-title">{{ "新闻资讯" }}</div>
<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
</div>
</div>
<div class="box3-main">
<div class="box3-item" v-for="(news, index) in normalizedList" :key="index"
@click="handleClickToNewsDetail(news)">
<div class="left">
<img :src="getProxyUrl(news.newsImage) || defaultImg" alt="" referrerpolicy="no-referrer"
@error="e => (e.target.src = errImg || News1)" />
</div>
<div class="right">
<div class="right-top">
<div class="title">{{ news.newsTitle || news.title }}</div>
<div class="time">
{{ news.newsDate ? news.newsDate.slice(5) : "" }} {{ news.newsOrg ? "-" + news.newsOrg : "" }}
</div>
</div>
<div class="right-footer">{{ news.newsContent || news.description }}</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { computed } from "vue";
import router from "@/router/index";
import News1 from "@/assets/images/news1.png"; // 错误图片
import defaultNew from "@/assets/images/default-icon-news.png"; // 默认图片
let { list, newsList, errImg, defaultImg } = defineProps({
list: {
type: Array,
default: () => []
},
// 兼容历史用法：部分页面使用 newsList 作为入参
newsList: {
type: Array,
default: undefined
},
defaultImg: {
type: String,
default: defaultNew
},
errImg: {
type: String,
default: ''
}
});
// 统一对外渲染数据源：优先使用 list，其次兼容 newsList
const normalizedList = computed(() => {
return (Array.isArray(list) && list.length ? list : newsList) || [];
});
// 处理图片代理
const getProxyUrl = url => {
if (!url) return "";
const urlStr = String(url);
// 排除非 http 开头（相对路径）、已经是代理链接、或者是本地链接
if (
!urlStr.startsWith("http") ||
urlStr.includes("images.weserv.nl") ||
urlStr.includes("localhost") ||
urlStr.includes("127.0.0.1")
) {
return url;
}
// 移除协议头 http:// 或 https://
const cleanUrl = urlStr.replace(/^https?:\/\//i, "");
return `https://images.weserv.nl/?url=${encodeURIComponent(cleanUrl)}`;
};
const handleClickToNewsDetail = news => {
const route = router.resolve({
path: "/newsAnalysis",
query: {
newsId: news.newsId ?? news.id
}
});
window.open(route.href, "_blank");
};
// 查看更多新闻资讯
const handleToMoreNews = () => {
const route = router.resolve("/newsBrief");
window.open(route.href, "_blank");
};
</script>
<style lang="scss" scoped>
.news-box {
width: 792px;
height: 450px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
background: rgba(255, 255, 255, 1);
.box3-header {
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin: 0 auto;
display: flex;
justify-content: space-between;
position: relative;
.box3-header-left {
display: flex;
.box3-header-icon {
margin-left: 21px;
margin-top: 16px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box3-header-title {
margin-top: 11px;
margin-left: 20px;
height: 26px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
}
.more {
width: 49px;
height: 24px;
position: absolute;
top: 14px;
right: 27px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
}
}
.box3-main {
height: 402px;
overflow-y: auto;
overflow-x: hidden;
padding: 6px 0;
.box3-item {
display: flex;
height: 77px;
width: 749px;
margin-left: 21px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.left {
width: 72px;
height: 48px;
margin-top: 15px;
img {
width: 100%;
height: 100%;
border-radius: 4px;
}
}
.right {
width: 657px;
margin-left: 20px;
.right-top {
width: 657px;
display: flex;
justify-content: space-between;
&:hover {
text-decoration: underline;
color: var(--color-main-active);
.title {
color: var(--color-main-active);
}
}
.title {
margin-top: 13px;
width: 500px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
width: 157px;
text-align: right;
height: 22px;
margin-top: 19px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.right-footer {
width: 657px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
</style>
src/components/base/TipTab/index.vue 0 → 100644
浏览文件 @ 69d1fe4b
<template>
<div class="tip-wrapper">
<div class="icon">
<img src="./tip-icon.svg" alt="">
</div>
<div class="text text-tip-2 text-primary-50-clor">{{ `数据来源：${dataSource},数据时间：${dataTime}` }}</div>
</div>
</template>
<script setup>
const props = defineProps({
dataSource: {
type: String,
default: '美国国会官网'
},
dataTime: {
type: String,
default: '2023.1至2025.12'
},
})
</script>
<style lang="scss" scoped>
.tip-wrapper{
width: 100%;
display: flex;
gap: 8px;
justify-content: center;
align-items: center;
height: 22px;
.icon{
width: 16px;
height: 16px;
img{
width: 100%;
height: 100%;
}
}
}
</style>
\ No newline at end of file
src/components/base/TipTab/tip-icon.svg 0 → 100644
浏览文件 @ 69d1fe4b
<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="容器 704" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<circle id="椭圆 96" cx="8" cy="8" r="7" fill="rgb(230,231,232)" />
<circle id="椭圆 97" cx="8" cy="4" r="1" fill="rgb(132,136,142)" />
<path id="矩形 241" d="M6.49996 6L8.00028 6.0004C8.55256 6.0004 9.00028 6.44811 9.00028 7.00039L9.00028 10.4992C9.00028 10.7754 9.22408 10.9989 9.50033 10.9992L9.50033 10.9997C9.77657 10.9998 10.0005 11.2236 10.0005 11.4998L10.0003 11.5001C10.0002 11.7765 9.77622 12.0006 9.49978 12.0006L8.00028 12.0004L6.50033 12.0004C6.22423 12.0004 6.00064 11.7767 6.00049 11.5006L6.00021 11.5005C6.00021 11.2243 6.22418 11.0003 6.50037 11.0003L6.50037 11.0006C6.77649 11.0007 7.00042 10.7766 7.00042 10.5005L7.00017 7.50005C7.00017 7.22376 6.77644 7.00047 6.50015 7.00002L6.49946 6.99922C6.22357 6.999 6 6.77565 6 6.49976C6.00011 6.22373 6.22393 6 6.49996 6Z" fill="rgb(132,136,142)" fill-rule="evenodd" />
</svg>
src/components/base/newsList/index.vue
浏览文件 @ 69d1fe4b
......@@ -10,7 +10,7 @@
</div>
</div>
<div class="news-main">
<div class="news-item" v-for="(news, index) in newsList" :key="index" @click="handleToNewsAnalysis(news)">
<div class="news-item" v-for="(news, index) in showNewsList" :key="index" @click="handleToNewsAnalysis(news)">
<div class="left">
<img :src="news[props.img] ? news[props.img] : DefaultIconNews" alt="" />
</div>
......@@ -29,6 +29,7 @@
</template>
<script setup>
import { computed } from "vue";
import DefaultIconNews from "@/assets/icons/default-icon-news.png";
const props = defineProps({
// 新闻列表数据
......@@ -54,6 +55,12 @@ const props = defineProps({
default: "content"
}
});
const showNewsList = computed(() => {
return props.newsList.slice(0,5)
})
const emit = defineEmits(["item-click", "more-click"]);
const handleToMoreNews = () => {
emit("more-click");
......
src/components/base/riskSignal/index.vue
浏览文件 @ 69d1fe4b
......@@ -11,7 +11,7 @@
</div>
<div class="box2-main">
<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 showRiskSignalList" :key="index" @click="handleItemClick(item, index)">
<div :class="{
itemLeftStatus1: item[props.riskLevel] === '特别重大',
itemLeftStatus2: item[props.riskLevel] === '重大风险',
......@@ -38,6 +38,7 @@
<script setup>
import { ElMessage } from "element-plus";
import { computed } from "vue";
// 接收父组件传递的参数
const props = defineProps({
// 标题（默认“风险信号”）
......@@ -75,6 +76,10 @@ const props = defineProps({
});
const showRiskSignalList = computed(() => {
return props.list.slice(0,6)
})
// 定义自定义事件，把点击事件传递给父组件
const emit = defineEmits(['item-click', 'more-click']);
......@@ -85,7 +90,6 @@ const handleItemClick = (item, index) => {
// 点击“查看更多”
const handleMoreClick = () => {
emit('more-click')
};
......@@ -202,11 +206,10 @@ const handleMoreClick = () => {
box-sizing: border-box;
padding-left: 23px;
padding-right: 30px;
overflow-y: auto;
width: 520px;
height: calc(100% - 160px);
height: 313px;
border-radius: 4px;
padding: 15px 30px 10px 23px;
.box2-main-item {
width: 463px;
height: 48px;
......
src/styles/common.scss
浏览文件 @ 69d1fe4b
......@@ -11,6 +11,24 @@
display: flex;
}
.flex-display-center{
@extend .flex-display;
justify-content: center;
align-items: center;
}
.flex-display-end{
@extend .flex-display;
justify-content: flex-end;
align-items: center;
}
.flex-display-start{
@extend .flex-display;
justify-content: flex-start;
align-items: center;
}
.flex-fill {
flex: 1;
}
......@@ -232,34 +250,42 @@
background: #FFFFFF;
}
// 红色
.color-red-100 {
color: rgb(206, 79, 81);
}
// 红色10%背景
.bg-red-10 {
background: rgba(206, 79, 81, 0.1);
}
// 橙色
.color-orange-100 {
color: rgb(255, 149, 77)
}
// 橙色10%背景
.bg-orange-10 {
background: rgba(255, 149, 77, 0.1)
}
// 黄色
.color-yellow-100 {
color: rgb(232, 189, 11);
}
// 黄色10%背景
.bg-yellow-10 {
background: rgba(232, 189, 11, 0.1);
}
// 绿色
.color-green-100 {
color: rgb(33, 129, 57);
}
// 绿色10%背景
.bg-green-10 {
background: rgba(33, 129, 57, 0.1);
}
\ No newline at end of file
src/styles/components/textStyle.vue
浏览文件 @ 69d1fe4b
......@@ -99,16 +99,16 @@ const tableData = ref([
{name: '高亮背景色', className: 'color-bg-active'},
{name: '红色', className: 'color-red-100'},
{name: '红色10%', className: 'bg-red-10'},
{name: '红色10%-背景', className: 'bg-red-10'},
{name: '橙色', className: 'color-orange-100'},
{name: '橙色10%', className: 'bg-orange-10'},
{name: '橙色10%-背景', className: 'bg-orange-10'},
{name: '黄色', className: 'color-yellow-100'},
{name: '黄色10%', className: 'bg-yellow-10'},
{name: '黄色10%-背景', className: 'bg-yellow-10'},
{name: '绿色', className: 'color-green-100'},
{name: '绿色10%', className: 'bg-green-10'},
{name: '绿色10%-背景', className: 'bg-green-10'},
])
</script>
......
src/views/marketAccessRestrictions/marketAccessHome/utils/barChart1.js
浏览文件 @ 69d1fe4b
......@@ -6,9 +6,9 @@ const getBarChart = (nameList, valueList) => {
tooltip: {},
grid: {
top: '8%',
right: '6%',
bottom: '6%',
left: '6%',
right: 24,
bottom: 24,
left: 24,
containLabel: true
},
yAxis: {
......@@ -65,7 +65,7 @@ const getBarChart = (nameList, valueList) => {
yAxis: valueList[index],
symbol: `image://${item.img}`,
symbolSize: [20, 20],
symbolOffset: [0, 10],
symbolOffset: [0, 20],
symbolCircle: 10
});
});
......
src/views/marketAccessRestrictions/marketAccessHome/utils/multiLineChart.js
浏览文件 @ 69d1fe4b
import * as echarts from 'echarts'
const getMultiLineChart = (data) => {
console.log('dataaaa',data);
console.log('dataaaa', data);
return {
tooltip: {
......@@ -14,18 +14,18 @@ const getMultiLineChart = (data) => {
}
},
grid: {
top: '15%',
right: '3%',
bottom: '5%',
left: '3%',
top: 48,
right: 24,
bottom: 24,
left: 24,
containLabel: true
},
legend: {
show: true,
top: 10,
left:'5%'
left: '10%'
},
color: ['#0A57A6', '#FA8C16','#722ED1'],
color: ['#0A57A6', '#FA8C16', '#722ED1'],
xAxis: [
{
type: 'category',
......@@ -35,7 +35,16 @@ const getMultiLineChart = (data) => {
],
yAxis: [
{
type: 'value'
type: 'value',
name: '数量',
splitLine: {
show: true,
lineStyle: {
type: 'dashed', // 虚线类型
color: 'rgb(231, 243, 255)', // 灰色线条
width: 1 // 线宽为1
}
}
}
],
series: [
......
src/views/marketAccessRestrictions/marketAccessHome/utils/piechart.js
浏览文件 @ 69d1fe4b
const getPieChart = (data) => {
const colorList = ['#69B1FF','#FF7875','#B37FEB','#FFC069','#1677FF','#87E8DE','#ADC6FF','#FFBB96','#BAE0FF','#FFD591',]
let option = {
// color: colorList,
color: colorList,
series: [
{
type: 'pie',
radius: [90, 115],
radius: [75, 100],
height: '100%',
left: 'center',
width: '100%',
......
src/views/marketAccessRestrictions/marketAccessLayout/case/337/index.vue
浏览文件 @ 69d1fe4b
......@@ -29,13 +29,6 @@
</div>
</div>
<div class="select-box">
<!-- <div class="paixu-btn" @click="handleSwithSort">
<div class="text">{{ "发布时间" }}</div>
<div class="icon2">
<img v-if="isSort" src="@/assets/icons/shengxu2.png" alt="" />
<img v-else src="@/assets/icons/jiangxu2.png" alt="" />
</div>
</div> -->
<el-select v-model="isSort" placeholder="发布时间" style="width: 166px">
<template #prefix>
<div style="display: flex; align-items: center; height: 100%">
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论