Skip to content

R
risk-monitor
提交 bea204f6 authored 作者: 胡卉清's avatar 胡卉清
浏览文件
操作

合并分支 'dev_hhq' 到 'master'

Dev hhq 查看合并请求 !74
上级 04ee3324 9e13c130
显示空白字符变更
内嵌 并排
正在显示 包含 422 行增加 和 272 行删除
src/api/companyPages/index.js
浏览文件 @ bea204f6
......@@ -83,3 +83,12 @@ export function getEnterprisPatentField(params) {
}
//被制裁情况:事件
export function getSanctionList(params) {
return request({
method: 'GET',
url: `/api/enterprisePage/getSanctionList/${params}`,
})
}
src/router/modules/company.js
浏览文件 @ bea204f6
......@@ -4,7 +4,7 @@ import companyPages from "@/views/companyPages/index.vue";
const companyPagesRoutes = [
// 智库系统的主要路由
{
path: "/companyPages:id",
path: "/companyPages/:id",
name: "companyPages",
component: companyPages,
meta: {
......
src/views/companyPages/component/SanctionsSituation‌.vue
浏览文件 @ bea204f6
......@@ -30,9 +30,12 @@
</template>
<script setup>
import { ref, computed } from 'vue';
import { ref, onMounted } from 'vue';
import Timeline from './Timeline.vue';
import process from './process.vue';
import { useRouter } from "vue-router";
import { getSanctionList } from "@/api/companyPages/index.js";
const router = useRouter();
const sanctionTimeData = ref([
{
"title": "初步限制与“实体清单”",
......@@ -60,6 +63,24 @@ const sanctionTimeData = ref([
"time": "2025年10月"
}
])
// 获取制裁事件
const handleGetSanctionList = async () => {
try {
const res = await getSanctionList(router.currentRoute._value.params.id);
console.log("获取制裁事件", res);
if (res.code === 200 && res.data) {
sanctionTimeData.value = res.data
}
} catch (error) {
console.error("获取制裁事件error", error);
}
};
onMounted(async () => {
handleGetSanctionList()
});
</script>
<style scoped>
......
src/views/companyPages/component/Timeline.vue
浏览文件 @ bea204f6
......@@ -15,13 +15,13 @@
<div class="node" :style="leftOffset(i)">
<!-- 圆环 -->
<div class="dot" :class="linePos(i, flip)" :style="{
marginTop: linePos(i, flip) === 'down' ? '-5px' : '35px'
marginTop: linePos(i, flip) === 'down' ? '-5px' : '-5px'
}"></div>
<div class="time" :style="{
marginTop: linePos(i, flip) === 'down' ? '-50px' : '10px'
}" v-if="type === 'normal'">
{{ item.time }}
{{ item.sanctionDate }}
</div>
<!-- 卡片：放到线右侧 -->
<div class="card" :class="[cardPos(i, flip), 'right-side']" @click="$emit('click-card', item)" :style="{
......@@ -31,7 +31,7 @@
<div class="time" :style="{
marginLeft: 0
}" v-if="type !== 'normal'">
{{ item.time }}
{{ item.sanctionDate }}
</div>
<div class="title">
{{ item.title }}
......
src/views/exportControl/index.vue
浏览文件 @ bea204f6
......@@ -66,17 +66,9 @@
</div>
</div>
<div class="home-main-header-footer-info">
<InfoCard
v-for="(item, index) in infoList"
:key="item.id"
:title="item.nameZh"
:subtitle="item.nameAbbr"
:description="item.description"
:quantity="item.postCount"
unit="次"
:color="infoListColor[index]"
@click="handleToEntityListNoId(item)"
/>
<InfoCard v-for="(item, index) in infoList" :key="item.id" :title="item.nameZh" :subtitle="item.nameAbbr"
:description="item.description" :quantity="item.postCount" unit="次" :color="infoListColor[index]"
@click="handleToEntityListNoId(item)" />
</div>
</div>
......@@ -102,15 +94,8 @@
<img src="./assets/images/box1-right.png" alt="" />
</div>
</div>
<el-carousel
ref="carouselRef"
height="350px"
:autoplay="true"
:interval="3000"
arrow="never"
indicator-position="none"
@change="handleCarouselChange"
>
<el-carousel ref="carouselRef" height="350px" :autoplay="true" :interval="3000" arrow="never"
indicator-position="none" @change="handleCarouselChange">
<el-carousel-item v-for="(item, index) in entitiesDataInfoList" :key="item.id + index">
<div>
<div class="box1-top">
......@@ -128,11 +113,8 @@
</div>
<div class="box1-top-content-item">
<span class="box1-top-content-item-title">· 涉及领域：</span>
<div
class="box1-top-content-item-tags"
v-for="(domainItem, index) in item.domains"
:key="index"
>
<div class="box1-top-content-item-tags" v-for="(domainItem, index) in item.domains"
:key="index">
<el-tag :type="getTagType(domainItem)">{{ domainItem }}</el-tag>
</div>
</div>
......@@ -141,18 +123,10 @@
<div class="box1-bottom">
<div class="box1-bottom-title">· 涉及主要实体：</div>
<div class="box1-bottom-content">
<div
class="box1-bottom-content-item"
v-for="(ett, index) in item.sanEntities"
:key="index"
@click="handleEntityClick(ett)"
>
<el-image
v-if="ett.img"
class="box1-bottom-content-item-img"
:src="ett.img"
alt=""
></el-image>
<div class="box1-bottom-content-item" v-for="(ett, index) in item.sanEntities" :key="index"
@click="handleEntityClick(ett)">
<el-image v-if="ett.img" class="box1-bottom-content-item-img" :src="ett.img"
alt=""></el-image>
<div v-else class="box1-bottom-content-item-imgUndefined">
{{
(ett.entityNameZh || ett.enName)?.match(
......@@ -168,7 +142,9 @@
</div>
<div class="box1-absolute">
<div class="box1-absolute-des">
<el-icon><Warning color="rgba(206, 79, 81, 1)" /></el-icon>
<el-icon>
<Warning color="rgba(206, 79, 81, 1)" />
</el-icon>
<span>新增中国实体</span>
</div>
<div class="box1-absolute-num">{{ item.cnEntityCount }}家</div>
......@@ -181,23 +157,16 @@
</custom-container>
</el-col>
<el-col :span="8">
<custom-container
titleType="danger"
title="风险信号"
:headerNum="warningList.length"
:titleIcon="dangerIcon"
height="450px"
>
<custom-container titleType="danger" title="风险信号" :headerNum="warningList.length" :titleIcon="dangerIcon"
height="450px">
<template #default>
<div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in warningList" :key="index" @click="handleToRiskSignalDetail(item)">
<div
class="item-left"
:class="{
<div class="box2-main-item" v-for="(item, index) in warningList" :key="index"
@click="handleToRiskSignalDetail(item)">
<div class="item-left" :class="{
itemLeftStatus1: item.status === '一般风险',
itemLeftStatus2: item.status === '重大风险'
}"
>
}">
{{ item.status }}
</div>
<div class="item-right">
......@@ -242,17 +211,9 @@
<custom-container title="社交媒体" :titleIcon="dialogIcon" height="450px">
<template #default>
<div class="dialog-list">
<MessageBubble
v-for="(item, index) in socialMediaList"
@click="handlePerClick(item)"
@info-click="handleMediaClick(item)"
:key="index"
:avatar="item.avatar"
:name="item.name"
:time="item.time"
:source="item.source"
:content="item.content"
/>
<MessageBubble v-for="(item, index) in socialMediaList" @click="handlePerClick(item)"
@info-click="handleMediaClick(item)" :key="index" :avatar="item.avatar" :name="item.name"
:time="item.time" :source="item.source" :content="item.content" />
<!-- <MessageBubble
:avatar="customMessage.avatar"
:name="customMessage.name"
......@@ -304,19 +265,14 @@
<template #default="scope">
<div style="display: flex; align-items: center">
<span style="margin-right: 10px; width: 40px">{{ scope.row.num }}次</span>
<el-progress
:percentage="scope.row.percent * 100"
:show-text="false"
:status="getStatus(scope.row.percent)"
/>
<el-progress :percentage="scope.row.percent * 100" :show-text="false"
:status="getStatus(scope.row.percent)" />
</div>
</template>
</el-table-column>
<el-table-column label="重点领域" width="280" align="center">
<template #default="scope">
<div
style="display: flex; justify-content: center; align-items: center; gap: 5px"
>
<div style="display: flex; justify-content: center; align-items: center; gap: 5px">
<el-tag v-for="tag in scope.row.tags" :key="tag" :type="getTagType(tag)">{{
tag
}}</el-tag>
......@@ -333,19 +289,14 @@
<template #default="scope">
<div style="display: flex; align-items: center">
<span style="margin-right: 10px; width: 40px">{{ scope.row.num }}次</span>
<el-progress
:percentage="scope.row.percent * 100"
:show-text="false"
:status="getStatus(scope.row.percent)"
/>
<el-progress :percentage="scope.row.percent * 100" :show-text="false"
:status="getStatus(scope.row.percent)" />
</div>
</template>
</el-table-column>
<el-table-column label="重点领域" width="280" align="center">
<template #default="scope">
<div
style="display: flex; justify-content: center; align-items: center; gap: 5px"
>
<div style="display: flex; justify-content: center; align-items: center; gap: 5px">
<el-tag v-for="tag in scope.row.tags" :key="tag" :type="getTagType(tag)">{{
tag
}}</el-tag>
......@@ -362,11 +313,8 @@
<template #default="scope">
<div style="display: flex; align-items: center">
<span style="margin-right: 10px; width: 40px">{{ scope.row.num }}次</span>
<el-progress
:percentage="scope.row.percent * 100"
:show-text="false"
:status="getStatus(scope.row.percent)"
/>
<el-progress :percentage="scope.row.percent * 100" :show-text="false"
:status="getStatus(scope.row.percent)" />
</div>
</template>
</el-table-column>
......@@ -413,13 +361,9 @@
<el-row :gutter="20" style="width: 1600px; margin: 0 auto">
<CustomTitle id="position4" title="资源库" style="margin-top: 54px" />
<div class="resource-tabs">
<div
v-for="tab in resourceTabs"
:key="tab.value"
class="resource-tab-item"
<div v-for="tab in resourceTabs" :key="tab.value" class="resource-tab-item"
:class="{ active: activeResourceTab === tab.value, disabled: tab.disabled }"
@click="handleResourceTabClick(tab)"
>
@click="handleResourceTabClick(tab)">
{{ tab.label }}
</div>
</div>
......@@ -432,25 +376,15 @@
<div class="box4-item" v-for="(item, idx) in sanctionProcessList" :key="item.title">
<div class="box4-item-left">
<el-image :src="dotIcon" alt="图片" class="box4-item-left-icon" />
<div
class="box4-item-left-line"
v-if="idx + 1 != sanctionProcessList.length"
></div>
<div class="box4-item-left-line" v-if="idx + 1 != sanctionProcessList.length"></div>
</div>
<div class="box4-item-right">
<div class="box4-item-right-header" @click="handleSanc(item)">
<span class="box4-item-right-header-title"
>{{ item.postDate }}—{{ item.title }}</span
>
<span class="box4-item-right-header-title">{{ item.postDate }}—{{ item.title }}</span>
<span class="box4-item-right-header-desc">{{ item.desc }}</span>
</div>
<el-tooltip
effect="dark"
:content="item.content"
popper-class="common-prompt-popper"
placement="top"
:show-after="500"
>
<el-tooltip effect="dark" :content="item.content" popper-class="common-prompt-popper"
placement="top" :show-after="500">
<div class="box4-item-right-content">
{{ item.content }}
</div>
......@@ -458,13 +392,11 @@
</div>
</div>
</div>
<div
class="box4-footer"
:style="{ marginTop: sanctionProcessList.length > 0 ? '0px' : 'auto' }"
>
<el-button type="primary" link @click="handleGetMore"
>查看更多
<el-icon><DArrowRight /></el-icon>
<div class="box4-footer" :style="{ marginTop: sanctionProcessList.length > 0 ? '0px' : 'auto' }">
<el-button type="primary" link @click="handleGetMore">查看更多
<el-icon>
<DArrowRight />
</el-icon>
</el-button>
</div>
</div>
......@@ -478,15 +410,8 @@
</template>
<template #default>
<div class="box5">
<el-table
:data="entitiesList"
class="sanction-table"
stripe
empty-text="暂无数据"
height="700px"
header-row-class-name="table-header"
row-class-name="table-row"
>
<el-table :data="entitiesList" class="sanction-table" stripe empty-text="暂无数据" height="700px"
header-row-class-name="table-header" row-class-name="table-row">
<!-- <el-table-column prop="index" label="序号" width="80" align="center">
<template #default="scope">
{{ scope.$index + 1 + (currentPage - 1) * pageSize }}
......@@ -496,12 +421,8 @@
<el-table-column prop="name" label="实体名称" min-width="200">
<template #default="scope">
<div class="tableName" @click="handleCompClick(scope.row)">
<el-image
v-if="scope.row.img"
class="box1-bottom-content-item-img"
:src="scope.row.img"
alt=""
></el-image>
<el-image v-if="scope.row.img" class="box1-bottom-content-item-img" :src="scope.row.img"
alt=""></el-image>
<div v-else class="box1-bottom-content-item-imgUndefined">
{{
(scope.row.name || scope.row.enName)?.match(
......@@ -552,19 +473,13 @@
<el-table-column prop="revenue" label="50%规则子企业" width="280" align="right">
<template #default="scope">
<div class="num-item" v-if="scope.row.ruleOrgCount > 0">
<div
class="name-item"
:class="[
<div class="name-item" :class="[
'revenue-cell',
scope.row.revenue === '无营收数据' ? 'no-revenue' : ''
]"
>
]">
{{ scope.row.ruleOrgList[0].orgName }}...等
</div>
<div
style="width: 50px; color: #409eff; cursor: pointer"
@click="handleOrgClick(scope.row)"
>
<div style="width: 50px; color: #409eff; cursor: pointer" @click="handleOrgClick(scope.row)">
{{ scope.row.ruleOrgCount }}家>
</div>
</div>
......@@ -576,15 +491,8 @@
<!-- <div class="pagination-info">
第{{ currentPage }}页，共{{ totalPages }}页
</div> -->
<el-pagination
v-model:current-page="currentPage"
:page-size="pageSize"
:total="total"
:pager-count="5"
layout="prev, pager, next"
background
@current-change="handlePageChange"
/>
<el-pagination v-model:current-page="currentPage" :page-size="pageSize" :total="total"
:pager-count="5" layout="prev, pager, next" background @current-change="handlePageChange" />
</div>
</div>
</template>
......@@ -650,14 +558,8 @@
</div>
<div class="right-footer">
<div class="total-count">共{{ totalAll }}项调查</div>
<el-pagination
v-model:current-page="currentPageAll"
:page-size="pageSizeAll"
:total="totalAll"
layout="prev, pager, next"
background
@current-change="handlePageChangeAll"
/>
<el-pagination v-model:current-page="currentPageAll" :page-size="pageSizeAll" :total="totalAll"
layout="prev, pager, next" background @current-change="handlePageChangeAll" />
</div>
</div>
</div>
......@@ -670,12 +572,8 @@
<div class="dialog-title">50%规则子企业</div>
</template>
<div class="dialog-ett-wrpper">
<div
class="box1-bottom-content-item"
v-for="(ett, index) in currentOrgList"
:key="index"
@click="handleEntityClick(ett)"
>
<div class="box1-bottom-content-item" v-for="(ett, index) in currentOrgList" :key="index"
@click="handleEntityClick(ett)">
<el-image v-if="ett.img" class="box1-bottom-content-item-img" :src="ett.img" alt=""></el-image>
<div v-else class="box1-bottom-content-item-imgUndefined">
{{ (ett.orgName || ett.enName)?.match(/[\u4e00-\u9fa5a-zA-Z0-9]/)?.[0] }}
......@@ -1281,7 +1179,7 @@ const fetchSanctionList = async () => {
});
totalAll.value = res.totalElements;
}
} catch (error) {}
} catch (error) { }
};
const handlePageChangeAll = val => {
......@@ -1447,7 +1345,7 @@ const fetchRiskSignals = async () => {
time: item.signalTime,
status: item.signalLevel,
id: item.signalId,
sanId:item.sanId
sanId: item.sanId
}));
}
} catch (err) {
......@@ -1552,7 +1450,7 @@ const handleGetHylyList = async () => {
hylymc: "全部分类"
};
categoryList.value = [obj, ...categoryList.value];
} catch (error) {}
} catch (error) { }
};
const chart1Data = ref({
......@@ -1703,6 +1601,7 @@ const handleMediaClick = item => {
margin: 0;
padding: 0;
}
:deep(.el-input__wrapper) {
box-shadow: none;
}
......@@ -1719,11 +1618,14 @@ const handleMediaClick = item => {
box-sizing: border-box;
padding-left: 160px;
display: flex;
.header-item {
margin: 0 3px;
}
.back-item {
cursor: pointer;
&:hover {
color: #ccc;
}
......@@ -1735,6 +1637,7 @@ const handleMediaClick = item => {
flex-direction: column;
gap: 20px;
position: relative;
.box1-left-arrow {
position: absolute;
z-index: 9999;
......@@ -1747,15 +1650,18 @@ const handleMediaClick = item => {
justify-content: center;
align-items: center;
cursor: pointer;
.icon {
width: 11px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
}
.box1-right-arrow {
position: absolute;
z-index: 9999;
......@@ -1768,15 +1674,18 @@ const handleMediaClick = item => {
justify-content: center;
align-items: center;
cursor: pointer;
.icon {
width: 11px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
}
.box1-absolute {
position: absolute;
width: 240px;
......@@ -1790,6 +1699,7 @@ const handleMediaClick = item => {
padding-right: 50px;
box-sizing: border-box;
background: linear-gradient(to right, rgba(206, 79, 81, 0), rgba(206, 79, 81, 0.3));
&-des {
display: flex;
gap: 5px;
......@@ -1798,18 +1708,21 @@ const handleMediaClick = item => {
font-weight: 700;
color: rgba(206, 79, 81, 1);
}
&-num {
font-size: 32px;
font-weight: 700;
color: rgba(206, 79, 81, 1);
}
}
.box1-top {
// display: flex;
// flex-direction: column;
// gap: 10px;
padding-left: 30px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
&-title {
font-size: 20px;
font-weight: 700;
......@@ -1817,14 +1730,17 @@ const handleMediaClick = item => {
margin-top: 10px;
margin-bottom: 15px;
}
&-content {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
&-item {
display: flex;
gap: 5px;
&-title {
font-size: 16px;
font-weight: 700;
......@@ -1833,6 +1749,7 @@ const handleMediaClick = item => {
}
}
}
.box1-bottom {
padding-left: 30px;
......@@ -1842,6 +1759,7 @@ const handleMediaClick = item => {
color: rgba(59, 65, 75, 1);
margin-bottom: 15px;
}
&-content {
display: flex;
gap: 15px;
......@@ -1850,20 +1768,24 @@ const handleMediaClick = item => {
padding-left: 10px;
height: 156px;
overflow: auto;
&-item {
display: flex;
align-items: center;
justify-content: flex-start;
width: 48%; /* 留出2%的间距 */
width: 48%;
/* 留出2%的间距 */
// margin-bottom: 6px;
box-sizing: border-box;
gap: 10px;
cursor: pointer;
&-img {
width: 24px;
height: 24px;
flex-shrink: 0;
}
&-imgUndefined {
width: 24px;
height: 24px;
......@@ -1876,6 +1798,7 @@ const handleMediaClick = item => {
text-align: center;
border-radius: 12px;
}
&-txt {
font-size: 16px;
font-weight: 400;
......@@ -1884,30 +1807,36 @@ const handleMediaClick = item => {
}
}
}
.box1-right {
display: flex;
flex-direction: column;
gap: 10px;
.box1-right-title {
font-size: 20px;
font-weight: 700;
color: $base-color;
}
.box1-right-tags {
display: flex;
gap: 10px;
}
.box1-right-content {
color: rgba(59, 65, 75, 1);
font-size: 16px;
font-weight: 400;
line-height: 28px;
}
.box1-right-footer {
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: center;
.box1-right-footer-time {
color: rgba(95, 101, 108, 1);
font-size: 14px;
......@@ -1920,6 +1849,7 @@ const handleMediaClick = item => {
.box2-main {
height: 320px;
overflow-y: auto;
.box2-main-item {
display: flex;
justify-content: space-between;
......@@ -1928,17 +1858,21 @@ const handleMediaClick = item => {
box-sizing: border-box;
padding-right: 3px;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.itemLeftStatus1 {
color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important;
}
.itemLeftStatus2 {
color: rgba(250, 140, 22, 1) !important;
background: rgba(255, 247, 230, 1) !important;
}
.item-left {
display: flex;
align-items: center;
......@@ -1956,6 +1890,7 @@ const handleMediaClick = item => {
text-align: center;
flex-shrink: 0;
}
.item-right {
margin-left: 13px;
width: 100%;
......@@ -1965,6 +1900,7 @@ const handleMediaClick = item => {
gap: 8px;
height: 47px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
.text {
font-family: Microsoft YaHei;
line-height: 47px;
......@@ -1976,6 +1912,7 @@ const handleMediaClick = item => {
white-space: nowrap;
text-overflow: ellipsis;
}
.time {
margin-left: 10px;
line-height: 47px;
......@@ -1987,6 +1924,7 @@ const handleMediaClick = item => {
}
}
}
.box2-footer {
position: absolute;
left: 0;
......@@ -2002,14 +1940,17 @@ const handleMediaClick = item => {
background: var(--color-main-active);
margin: 0 auto;
cursor: pointer;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 8px;
color: rgba(255, 255, 255, 1);
......@@ -2025,6 +1966,7 @@ const handleMediaClick = item => {
justify-content: center;
// align-items: flex-start;
gap: 100px;
.box3-content-title {
font-size: 18px;
font-weight: 700;
......@@ -2038,7 +1980,9 @@ const handleMediaClick = item => {
color: $base-color;
margin-bottom: 15px;
}
.box3-content {
// flex: 1;
.el-progress--line {
width: 82px;
......@@ -2055,20 +1999,24 @@ const handleMediaClick = item => {
padding-top: 16px;
// padding-bottom: 50px;
position: relative;
.box4-item {
display: flex;
gap: 10px;
align-items: flex-start;
padding-bottom: 35px;
position: relative;
.box4-item-left {
display: flex;
flex-direction: column;
align-items: center;
.box4-item-left-icon {
width: 10px;
height: 10px;
}
.box4-item-left-line {
width: 1px;
height: 100%;
......@@ -2076,9 +2024,11 @@ const handleMediaClick = item => {
border-left: 1px solid rgba(10, 87, 166, 0.3);
}
}
.box4-item-right {
display: flex;
flex-direction: column;
.box4-item-right-header {
display: flex;
justify-content: space-between;
......@@ -2088,17 +2038,20 @@ const handleMediaClick = item => {
top: -7.5px;
padding-bottom: 8px;
cursor: pointer;
&-title {
font-size: 18px;
color: $base-color;
font-weight: 700;
}
&-desc {
font-size: 16px;
font-weight: 700;
color: rgba(59, 65, 75, 1);
}
}
.box4-item-right-content {
font-size: 16px;
font-weight: 400;
......@@ -2112,6 +2065,7 @@ const handleMediaClick = item => {
}
}
}
.box4-footer {
position: absolute;
// margin-top: auto;
......@@ -2132,15 +2086,18 @@ const handleMediaClick = item => {
justify-content: space-between;
align-items: center;
}
:deep(.table-header) {
font-size: 16px;
font-weight: 700;
color: rgba(59, 65, 75, 1);
}
:deep(.table-row) {
height: 64px;
}
.domain-tags {
display: flex;
gap: 8px;
......@@ -2161,17 +2118,20 @@ const handleMediaClick = item => {
height: calc(100vh - 96px);
position: relative;
overflow-y: hidden;
.home-main {
width: 100%;
height: 100%;
overflow-y: auto;
background: url("./assets/images/background.png");
background-size: 100% 100%;
.home-main-header {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
.home-main-header-center {
margin-top: 51px;
width: 960px;
......@@ -2183,9 +2143,11 @@ const handleMediaClick = item => {
padding: 1px;
position: relative;
border: 1px solid transparent;
&:hover {
border: 1px solid var(--color-main-active);
}
.search {
position: absolute;
right: -1px;
......@@ -2198,14 +2160,17 @@ const handleMediaClick = item => {
justify-content: center;
align-items: center;
cursor: pointer;
.search-icon {
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.search-text {
margin-left: 8px;
height: 22px;
......@@ -2217,6 +2182,7 @@ const handleMediaClick = item => {
}
}
}
.home-main-header-footer {
margin-top: 64px;
width: 700px;
......@@ -2225,9 +2191,11 @@ const handleMediaClick = item => {
padding: 0 108px;
display: flex;
justify-content: space-between;
.home-main-header-footer-item {
padding: 0 10px;
text-align: center;
.item-top {
height: 22px;
color: rgba(20, 89, 187, 1);
......@@ -2236,6 +2204,7 @@ const handleMediaClick = item => {
font-weight: 700;
line-height: 22px;
}
.item-footer {
margin-top: 10px;
height: 30px;
......@@ -2247,6 +2216,7 @@ const handleMediaClick = item => {
}
}
}
.home-main-header-footer-link,
.home-main-header-footer-info {
width: 100%;
......@@ -2255,15 +2225,18 @@ const handleMediaClick = item => {
gap: 16px;
padding: 30px 0;
}
.home-main-header-footer-info{
.home-main-header-footer-info {
margin-top: 34px;
}
.home-main-header-btn-box {
width: 688px;
margin: 0 auto;
margin-top: 39px;
display: flex;
justify-content: space-between;
.btn {
display: flex;
align-items: center;
......@@ -2276,9 +2249,11 @@ const handleMediaClick = item => {
background: #e7f3ff;
cursor: pointer;
position: relative;
&:hover {
background: #cae3fc;
}
.btn-text {
width: 80px;
color: var(--color-main-active);
......@@ -2289,12 +2264,14 @@ const handleMediaClick = item => {
margin-left: 36px;
text-align: center;
}
.btn-icon {
position: absolute;
top: 16px;
right: 19px;
width: 6px;
height: 12px;
img {
width: 100%;
height: 100%;
......@@ -2303,12 +2280,15 @@ const handleMediaClick = item => {
}
}
}
.home-main-center {
margin-top: 34px;
.center-top {
height: 450px;
display: flex;
gap: 20px;
.box1 {
display: flex;
gap: 10px;
......@@ -2319,17 +2299,21 @@ const handleMediaClick = item => {
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
justify-content: space-between;
.box1-header-left {
display: flex;
.icon {
width: 18px;
height: 18px;
margin-top: 19px;
img {
width: 100%;
height: 100%;
}
}
.title {
height: 22px;
margin-left: 18px;
......@@ -2341,6 +2325,7 @@ const handleMediaClick = item => {
line-height: 22px;
}
}
.box1-header-right {
margin-top: 19px;
height: 16px;
......@@ -2352,14 +2337,17 @@ const handleMediaClick = item => {
cursor: pointer;
}
}
.box1-main {
display: flex;
height: 354px;
margin-top: 22px;
.box1-main-top {
height: 68px;
display: flex;
justify-content: space-between;
.box1-main-top-left {
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
......@@ -2369,9 +2357,11 @@ const handleMediaClick = item => {
letter-spacing: 0px;
text-align: left;
}
.box1-main-top-right {
margin-left: 20px;
display: flex;
.num {
padding: 1px 8px;
height: 24px;
......@@ -2380,6 +2370,7 @@ const handleMediaClick = item => {
border-radius: 4px;
background: rgba(230, 244, 255, 1);
}
.tag {
box-sizing: border-box;
border: 1px solid rgba(135, 232, 222, 1);
......@@ -2390,6 +2381,7 @@ const handleMediaClick = item => {
}
}
}
.box2 {
flex: 1;
padding-right: 20px;
......@@ -2397,19 +2389,23 @@ const handleMediaClick = item => {
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
position: relative;
.box2-header {
height: 54px;
display: flex;
.icon {
width: 24px;
height: 22px;
margin-left: 33px;
margin-top: 18px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 22px;
margin-top: 16px;
......@@ -2420,6 +2416,7 @@ const handleMediaClick = item => {
font-weight: 700;
line-height: 22px;
}
.num {
width: 24px;
height: 16px;
......@@ -2433,6 +2430,7 @@ const handleMediaClick = item => {
border-radius: 100px;
background: rgba(255, 77, 79, 1);
}
.more {
margin-top: 19px;
margin-left: 256px;
......@@ -2443,22 +2441,27 @@ const handleMediaClick = item => {
line-height: 16px;
}
}
.box2-main {
height: 282px;
overflow-y: auto;
.box2-main-item {
margin-left: 23px;
height: 47px;
width: 464px;
display: flex;
.itemLeftStatus1 {
color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important;
}
.itemLeftStatus2 {
color: rgba(250, 140, 22, 1) !important;
background: rgba(255, 247, 230, 1) !important;
}
.item-left {
margin-top: 4px;
margin-left: 2px;
......@@ -2475,6 +2478,7 @@ const handleMediaClick = item => {
padding: 6px 4px;
text-align: center;
}
.item-right {
margin-left: 13px;
width: 408px;
......@@ -2482,6 +2486,7 @@ const handleMediaClick = item => {
border-top: 1px solid rgba(240, 242, 244, 1);
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
.text {
width: 348px;
color: rgba(59, 65, 75, 1);
......@@ -2490,6 +2495,7 @@ const handleMediaClick = item => {
font-weight: 400;
line-height: 47px;
}
.time {
margin-left: 10px;
line-height: 47px;
......@@ -2501,6 +2507,7 @@ const handleMediaClick = item => {
}
}
}
.box2-footer {
position: absolute;
left: 26px;
......@@ -2514,14 +2521,17 @@ const handleMediaClick = item => {
border-radius: 6px;
background: rgba(22, 119, 255, 1);
cursor: pointer;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 8px;
color: rgba(255, 255, 255, 1);
......@@ -2533,15 +2543,18 @@ const handleMediaClick = item => {
}
}
}
.center-footer {
margin-top: 21px;
height: 450px;
display: flex;
.box3 {
width: 900px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
.box3-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
......@@ -2549,17 +2562,21 @@ const handleMediaClick = item => {
display: flex;
justify-content: space-between;
padding: 0 20px;
.box3-header-left {
display: flex;
.box3-header-icon {
margin-top: 15px;
width: 13px;
height: 13px;
img {
width: 100%;
height: 100%;
}
}
.box3-header-title {
margin-top: 16px;
margin-left: 22px;
......@@ -2571,17 +2588,20 @@ const handleMediaClick = item => {
line-height: 22px;
}
}
.box3-header-right {
display: flex;
justify-content: flex-end;
width: 178px;
height: 22px;
.right-box {
display: flex;
margin-top: 16px;
width: 89px;
height: 22px;
justify-content: flex-end;
.icon1 {
margin-top: 5px;
width: 12px;
......@@ -2589,6 +2609,7 @@ const handleMediaClick = item => {
border-radius: 6px;
background: rgba(20, 89, 187, 1);
}
.icon2 {
margin-top: 5px;
width: 12px;
......@@ -2596,6 +2617,7 @@ const handleMediaClick = item => {
border-radius: 6px;
background: rgba(250, 140, 22, 1);
}
.text {
margin-left: 5px;
color: rgba(95, 101, 108, 1);
......@@ -2607,31 +2629,37 @@ const handleMediaClick = item => {
}
}
}
.box3-main {
height: 397px;
}
}
.box4 {
margin-left: 20px;
width: 521px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
.box4-header {
width: 452px;
margin: 0 auto;
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
.header-icon {
margin-top: 18px;
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
margin-top: 16px;
margin-left: 26px;
......@@ -2643,22 +2671,27 @@ const handleMediaClick = item => {
line-height: 22px;
}
}
.box4-main {
width: 452px;
margin: 0 auto;
margin-top: 8px;
height: 360px;
overflow-y: auto;
.box4-main-item {
margin-top: 6px;
height: 30px;
display: flex;
.leftStatus3 {
color: rgba(255, 197, 61, 1) !important;
}
.leftStatus2 {
color: rgba(255, 169, 64, 1) !important;
}
.left {
width: 44px;
text-align: left;
......@@ -2668,6 +2701,7 @@ const handleMediaClick = item => {
line-height: 30px;
color: rgba(206, 79, 81, 1);
}
.center {
width: 300px;
color: rgba(95, 101, 108, 1);
......@@ -2676,6 +2710,7 @@ const handleMediaClick = item => {
font-weight: 400;
line-height: 30px;
}
.right {
width: 108px;
color: rgba(132, 136, 142, 1);
......@@ -2690,10 +2725,12 @@ const handleMediaClick = item => {
}
}
}
.home-main-footer {
// width: 100%;
height: 911px;
background: rgba(248, 249, 250, 1);
.home-main-footer-header {
margin-top: 37px;
margin-bottom: 36px;
......@@ -2702,10 +2739,12 @@ const handleMediaClick = item => {
// background: orange;
display: flex;
justify-content: space-between;
.btn-box {
width: 1300px;
display: flex;
justify-content: space-between;
.btn {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
......@@ -2716,32 +2755,38 @@ const handleMediaClick = item => {
border-radius: 21px;
background: rgba(20, 89, 187, 0);
cursor: pointer;
&:hover {
background: rgba(20, 89, 187, 0.1);
}
}
.btnActive {
padding: 0 24px;
border-radius: 21px;
background: rgba(20, 89, 187, 1);
color: #fff;
&:hover {
color: #fff;
background: rgba(20, 89, 187, 1);
}
}
}
.select-box {
height: 42px;
box-sizing: border-box;
padding: 5px 0;
}
}
.home-main-footer-main {
width: 100%;
// background: orange;
display: flex;
flex-wrap: wrap;
// justify-content: space-between;
// justify-content: center;
.main-item {
......@@ -2751,6 +2796,7 @@ const handleMediaClick = item => {
background: #fff;
margin-bottom: 24px;
margin-right: 25px;
.main-item-box1 {
margin-top: 20px;
margin-left: 45px;
......@@ -2764,6 +2810,7 @@ const handleMediaClick = item => {
height: 100%;
}
}
.main-item-box2 {
margin-top: 26px;
text-align: center;
......@@ -2774,6 +2821,7 @@ const handleMediaClick = item => {
font-weight: 700;
line-height: 30px;
}
.main-item-box3 {
text-align: center;
height: 30px;
......@@ -2788,6 +2836,7 @@ const handleMediaClick = item => {
}
}
}
.tableName {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
......@@ -2818,6 +2867,7 @@ const handleMediaClick = item => {
.num-item {
width: 280px;
display: flex;
.name-item {
width: 215px;
overflow: hidden;
......@@ -2825,6 +2875,7 @@ const handleMediaClick = item => {
white-space: nowrap;
}
}
.dialog-title {
text-align: center;
font-size: 24px;
......@@ -2833,11 +2884,13 @@ const handleMediaClick = item => {
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.dialog-ett-wrpper {
display: flex;
flex-wrap: wrap;
gap: 10px;
height: 500px;
.box1-bottom-content {
display: flex;
gap: 15px;
......@@ -2846,20 +2899,24 @@ const handleMediaClick = item => {
padding-left: 10px;
height: 156px;
overflow: auto;
&-item {
display: flex;
// align-items: center;
justify-content: flex-start;
width: 48%; /* 留出2%的间距 */
width: 48%;
/* 留出2%的间距 */
// margin-bottom: 6px;
box-sizing: border-box;
gap: 10px;
cursor: pointer;
&-img {
width: 24px;
height: 24px;
flex-shrink: 0;
}
&-imgUndefined {
width: 24px;
height: 24px;
......@@ -2872,6 +2929,7 @@ const handleMediaClick = item => {
text-align: center;
border-radius: 12px;
}
&-txt {
font-size: 16px;
font-weight: 400;
......@@ -2885,6 +2943,7 @@ const handleMediaClick = item => {
box-shadow: none;
border-radius: 10px;
}
:deep(.el-input__wrapper:hover) {
box-shadow: none !important;
}
......@@ -2902,6 +2961,7 @@ const handleMediaClick = item => {
letter-spacing: 0px;
text-align: left;
}
:deep(.el-table tr) {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
......@@ -2952,6 +3012,7 @@ const handleMediaClick = item => {
}
}
}
.all-content {
width: 100%;
height: auto;
......@@ -2960,6 +3021,7 @@ const handleMediaClick = item => {
justify-content: space-between;
// align-items: center;
gap: 16px;
.left {
width: 360px;
height: auto;
......@@ -2967,12 +3029,14 @@ const handleMediaClick = item => {
background: #fff;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
.title {
width: 100%;
height: 56px;
display: flex;
align-items: center;
padding: 14px 12px 16px 0;
.box {
width: 8px;
height: 20px;
......@@ -2981,6 +3045,7 @@ const handleMediaClick = item => {
border-top-right-radius: 4px;
margin-right: 14px;
}
.text {
font-size: 20px;
font-weight: 700;
......@@ -2989,20 +3054,24 @@ const handleMediaClick = item => {
color: rgb(5, 95, 194);
}
}
.left-main {
width: 100%;
height: auto;
padding-left: 24px;
.checkbox-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 16px;
padding-bottom: 16px;
}
:deep(.el-checkbox) {
margin-right: 0;
height: auto;
}
:deep(.el-checkbox__label) {
font-size: 16px;
color: #666666;
......@@ -3010,6 +3079,7 @@ const handleMediaClick = item => {
}
}
}
.right {
width: 1224px;
height: auto;
......@@ -3017,17 +3087,20 @@ const handleMediaClick = item => {
border-radius: 4px;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
.right-title {
width: 100%;
height: 48px;
border-bottom: 1px solid rgb(234, 236, 238);
display: flex;
align-items: center;
img {
width: 22px;
height: 18px;
margin-left: 19px;
}
div {
font-size: 20px;
font-weight: 700;
......@@ -3037,14 +3110,17 @@ const handleMediaClick = item => {
margin-left: 19px;
}
}
.right-main {
width: 100%;
height: auto;
padding: 24px 35px 0 20px;
.sanction-list {
width: 1169px;
padding: 0px 0 12px 0;
display: flex;
// justify-content: flex-start;
.time {
width: 80px;
......@@ -3071,6 +3147,7 @@ const handleMediaClick = item => {
line-height: 24px;
}
}
img {
width: 30px;
height: 30px;
......@@ -3078,10 +3155,12 @@ const handleMediaClick = item => {
margin-top: 14px;
margin-right: 16px;
}
.main {
width: 1027px;
padding-top: 14px;
position: relative;
.main-title {
width: 800px;
font-size: 20px;
......@@ -3092,6 +3171,7 @@ const handleMediaClick = item => {
margin-bottom: 11px;
cursor: pointer;
}
.main-desc {
font-size: 16px;
font-weight: 400;
......@@ -3100,8 +3180,10 @@ const handleMediaClick = item => {
color: rgb(95, 101, 108);
margin-bottom: 9px;
}
.tag-box {
display: flex;
.tag-item {
padding: 1px 8px;
margin-right: 8px;
......@@ -3114,6 +3196,7 @@ const handleMediaClick = item => {
background-color: rgba(231, 243, 255, 1);
}
}
.count-tag {
position: absolute;
padding: 2px 8px;
......@@ -3130,6 +3213,7 @@ const handleMediaClick = item => {
}
}
}
.right-footer {
width: 100%;
height: 73px;
......
src/views/exportControl/v2.0EntityList/components/sanctionsOverview/components/listPage/index.vue
浏览文件 @ bea204f6
......@@ -13,29 +13,27 @@
<div class="text">科技领域</div>
</div>
<div class="checkbox-group">
<el-checkbox v-for="(item, index) in techFields" :key="index" v-model="item.checked" :label="item.label" @change="handleFilterChange(item, techFields, 'tech')" />
<el-checkbox v-for="(item, index) in techFields" :key="index" v-model="item.checked" :label="item.label"
@change="handleFilterChange(item, techFields, 'tech')" />
</div>
<div class="title">
<div class="box"></div>
<div class="text">实体类型</div>
</div>
<div class="checkbox-group">
<el-checkbox v-for="(item, index) in entityTypes" :key="index" v-model="item.checked" :label="item.label" @change="handleFilterChange(item, entityTypes, 'type')" />
<el-checkbox v-for="(item, index) in entityTypes" :key="index" v-model="item.checked" :label="item.label"
@change="handleFilterChange(item, entityTypes, 'type')" />
</div>
<div class="title">
<div class="box"></div>
<div class="text">制裁时间</div>
</div>
<div class="checkbox-group">
<el-checkbox v-for="(item, index) in sanctionTimes" :key="index" v-model="item.checked" :label="item.label" @change="handleFilterChange(item, sanctionTimes, 'time')" />
<el-checkbox v-for="(item, index) in sanctionTimes" :key="index" v-model="item.checked" :label="item.label"
@change="handleFilterChange(item, sanctionTimes, 'time')" />
<div v-if="sanctionTimes.find(i => i.value === 'custom' && i.checked)" class="custom-date-picker">
<el-date-picker
v-model="customDateRange"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
<el-date-picker v-model="customDateRange" type="daterange" range-separator="-" start-placeholder="开始日期"
end-placeholder="结束日期" />
</div>
</div>
</div>
......@@ -48,8 +46,8 @@
<div class="right-wrapper">
<div class="stats">
<div class="dot"></div>
<div class="count-text">共 <span class="highlight">{{ruleCount.totalCount}}</span> 家</div>
<div class="rule-text">(50%规则涉及<span class="highlight">{{ruleCount.ruleCount}}</span>家)</div>
<div class="count-text">共 <span class="highlight">{{ ruleCount.totalCount }}</span> 家</div>
<div class="rule-text">(50%规则涉及<span class="highlight">{{ ruleCount.ruleCount }}</span>家)</div>
</div>
<div class="btn">
<img src="../../../../assets/下载按钮.png" alt="" />
......@@ -58,21 +56,12 @@
</div>
</div>
<div class="right-table">
<el-table
:data="entityRows"
table-layout="fixed"
:row-class-name="tableRowClassName"
:header-cell-style="{ background: '#fff' }"
>
<el-table :data="entityRows" table-layout="fixed" :row-class-name="tableRowClassName"
:header-cell-style="{ background: '#fff' }">
<el-table-column label="实体名称" min-width="200">
<template #default="{ row }">
<div class="entity-name-cell" @click="handleCompClick(row)">
<el-image
v-if="row.img"
class="avatar"
:src="row.img"
alt=""
></el-image>
<el-image v-if="row.img" class="avatar" :src="row.img" alt=""></el-image>
<div v-else class="avatar-undefined">
{{
(row.entityNameZh || row.entityName)?.match(
......@@ -87,14 +76,8 @@
<el-table-column label="涉及领域" min-width="150">
<template #default="{ row }">
<div class="domain-cell">
<el-tag
v-for="tag in row.techDomains"
:key="tag"
class="domain-tag"
effect="plain"
:disable-transitions="true"
:style="getTagStyle(tag)"
>
<el-tag v-for="tag in row.techDomains" :key="tag" class="domain-tag" effect="plain"
:disable-transitions="true" :style="getTagStyle(tag)">
{{ tag }}
</el-tag>
</div>
......@@ -107,7 +90,8 @@
<div class="rule-text" :title="row.ruleOrgList?.[0]?.orgName || ''">
{{ row.ruleOrgList?.[0]?.orgName || '' }}...等
</div>
<el-link class="rule-link" type="primary" :underline="false" @click="handleRuleClick(row)">{{ row.ruleOrgCount }}家 ></el-link>
<el-link class="rule-link" type="primary" :underline="false" @click="handleRuleClick(row)">{{
row.ruleOrgCount }}家 ></el-link>
</div>
</template>
</el-table-column>
......@@ -115,25 +99,14 @@
</div>
<div class="tight-footer">
<div class="total-text">共{{ total }}项</div>
<el-pagination
:current-page="currentPage"
v-model:page-size="pageSize"
:total="total"
layout="prev, pager, next"
prev-text="<"
next-text=">"
@current-change="handleCurrentChange"
/>
<el-pagination :current-page="currentPage" v-model:page-size="pageSize" :total="total"
layout="prev, pager, next" prev-text="<" next-text=">" @current-change="handleCurrentChange" />
</div>
</div>
</div>
</div>
<RuleSubsidiaryDialog
v-model="ruleDialogVisible"
:company-name="currentRuleCompany"
:total-count="currentRuleCount"
:data-list="currentRuleList"
/>
<RuleSubsidiaryDialog v-model="ruleDialogVisible" :company-name="currentRuleCompany" :total-count="currentRuleCount"
:data-list="currentRuleList" />
</template>
<script setup>
......@@ -307,7 +280,7 @@ let abortController = null;
const getExportControlListApi = async () => {
// 取消上一轮未完成的请求
if (abortController) {
try { abortController.abort(); } catch {}
try { abortController.abort(); } catch { }
}
abortController = new AbortController();
isFetching.value = true;
......@@ -416,22 +389,27 @@ watch(customDateRange, () => {
margin: 0;
padding: 0;
}
.list-page {
width: 1601px;
padding-bottom: 50px;
margin: 0 auto;
padding-top: 16px;
.search-box {
margin-bottom: 16px;
display: flex;
justify-content: space-between;
align-items: center;
.search-input {
width: 388px;
height: 32px;
:deep(.el-input__wrapper) {
padding: 0 11px;
}
:deep(.el-input__inner) {
font-size: 16px;
font-weight: 400;
......@@ -440,24 +418,29 @@ watch(customDateRange, () => {
color: rgb(95, 101, 108);
}
}
.filters {
display: flex;
align-items: center;
.el-checkbox {
margin-right: 20px;
color: rgb(59, 65, 75);
}
.time-select {
width: 160px;
height: 32px;
}
}
}
.main {
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
.left {
padding-bottom: 20px;
width: 388px;
......@@ -465,10 +448,12 @@ watch(customDateRange, () => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff;
.checkbox-group {
display: flex;
flex-wrap: wrap;
padding: 0 0 0 24px;
.el-checkbox {
width: 50%;
margin-right: 0;
......@@ -479,11 +464,13 @@ watch(customDateRange, () => {
line-height: 24px;
color: rgb(95, 101, 108);
}
.custom-date-picker {
width: 100%;
margin-top: 8px;
padding-right: 24px;
box-sizing: border-box;
:deep(.el-date-editor) {
width: 100%;
height: 32px;
......@@ -491,21 +478,26 @@ watch(customDateRange, () => {
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 0 10px;
&:hover {
border-color: #c0c4cc;
}
&.is-active {
border-color: #409eff;
}
.el-range-input {
font-size: 14px;
font-family: "Microsoft YaHei";
color: rgb(95, 101, 108);
}
.el-range-separator {
color: rgb(95, 101, 108);
line-height: 30px;
}
.el-input__icon {
line-height: 32px;
color: rgb(95, 101, 108);
......@@ -514,12 +506,14 @@ watch(customDateRange, () => {
}
}
}
.right {
width: 1196px;
height: auto;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff;
.title {
width: 100%;
height: 56px;
......@@ -528,9 +522,11 @@ watch(customDateRange, () => {
align-items: center;
padding: 14px 12px 16px 0;
box-sizing: border-box;
.left-wrapper {
display: flex;
align-items: center;
.box {
width: 8px;
height: 20px;
......@@ -539,6 +535,7 @@ watch(customDateRange, () => {
border-top-right-radius: 4px;
margin-right: 14px;
}
.text {
font-size: 20px;
font-weight: 700;
......@@ -547,13 +544,16 @@ watch(customDateRange, () => {
color: rgb(5, 95, 194);
}
}
.right-wrapper {
display: flex;
align-items: center;
.stats {
display: flex;
align-items: center;
margin-right: 24px;
.dot {
width: 8px;
height: 8px;
......@@ -561,50 +561,61 @@ watch(customDateRange, () => {
border-radius: 50%;
margin-right: 8px;
}
.count-text {
font-size: 16px;
font-weight: 700;
color: #3b414b;
font-family: "Microsoft YaHei";
margin-right: 16px;
.highlight {
color: #cd4246;
margin: 0 4px;
}
}
.rule-text {
font-size: 14px;
color: #5f656c;
font-family: "Microsoft YaHei";
.highlight {
color: #cd4246;
}
}
}
.btn {
width: 60px;
height: 28px;
img {
width: 28px;
height: 28px;
cursor: pointer;
}
img:first-child {
margin-right: 4px;
}
}
}
}
.right-table {
padding: 5px 21px 0 21px;
:deep(.el-table) {
--el-table-header-bg-color: #fff;
--el-table-border-color: transparent;
--el-table-row-hover-bg-color: rgba(248, 249, 250, 1);
}
:deep(.el-table__inner-wrapper::before) {
background-color: transparent;
}
:deep(.el-table__header-wrapper th) {
height: 60px;
background-color: #fff;
......@@ -615,15 +626,19 @@ watch(customDateRange, () => {
border-bottom: 1px solid rgba(230, 231, 232, 1);
border-top: 1px solid rgba(230, 231, 232, 1);
}
:deep(.el-table__header-wrapper .cell) {
line-height: 22px;
}
:deep(.el-table__header-wrapper th:first-child .cell) {
padding-left: 39px;
}
:deep(.el-table__row) {
height: 64px;
}
:deep(.el-table__cell) {
border-bottom: 0;
font-size: 16px;
......@@ -631,21 +646,26 @@ watch(customDateRange, () => {
color: rgb(95, 101, 108);
font-family: "Microsoft YaHei";
}
:deep(.el-table__row .el-table__cell:first-child .cell) {
padding-left: 39px;
}
:deep(.odd-row td.el-table__cell) {
background-color: rgba(248, 249, 250, 1);
}
.entity-name-cell {
display: flex;
align-items: center;
.avatar {
width: 24px;
height: 24px;
margin-right: 8px;
border-radius: 4px;
}
.avatar-undefined {
width: 24px;
height: 24px;
......@@ -659,6 +679,7 @@ watch(customDateRange, () => {
font-size: 14px;
font-weight: 500;
}
.name {
font-size: 16px;
font-weight: 700;
......@@ -668,10 +689,12 @@ watch(customDateRange, () => {
text-overflow: ellipsis;
}
}
.domain-cell {
display: flex;
align-items: center;
gap: 8px;
:deep(.el-tag) {
height: auto;
padding: 2px 8px;
......@@ -683,16 +706,19 @@ watch(customDateRange, () => {
border: 1px solid;
}
}
.rule-cell {
display: flex;
align-items: center;
gap: 12px;
.rule-text {
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.rule-link {
font-size: 16px;
font-weight: 400;
......@@ -702,6 +728,7 @@ watch(customDateRange, () => {
}
}
}
.tight-footer {
padding: 16px 24px;
display: flex;
......@@ -768,12 +795,14 @@ watch(customDateRange, () => {
}
}
}
.title {
width: 100%;
height: 56px;
display: flex;
align-items: center;
padding: 14px 12px 16px 0;
.box {
width: 8px;
height: 16px;
......@@ -782,6 +811,7 @@ watch(customDateRange, () => {
border-top-right-radius: 4px;
margin-right: 14px;
}
.text {
font-size: 16px;
font-weight: 700;
......
src/views/exportControl/v2.0SingleSanction/components/sanctionsOverview/index.vue
浏览文件 @ bea204f6
......@@ -45,32 +45,21 @@
<div class="info-row">
<div class="label">制裁领域：</div>
<div class="value tags">
<span
class="tag"
v-for="(domain, index) in formattedData.domains"
:key="index"
>{{ domain }}</span>
<span class="tag" v-for="(domain, index) in formattedData.domains" :key="index">{{ domain }}</span>
</div>
</div>
</div>
<div class="left-top-content">
<div class="content-title">制裁实体分布：</div>
<div class="distribution-list">
<div
class="list-item"
v-for="(item, index) in entityDistribution"
:key="index"
>
<div class="list-item" v-for="(item, index) in entityDistribution" :key="index">
<img :src="flag" alt="" class="flag">
<div class="country-name">{{ item.name }}</div>
<div class="progress-bar-container">
<div
class="progress-bar"
:style="{
<div class="progress-bar" :style="{
width: item.width,
background: item.gradient
}"
></div>
}"></div>
</div>
<div class="count" :class="{ 'highlight': index === 0 }">{{ item.count }}家</div>
</div>
......@@ -88,11 +77,7 @@
</div>
<div class="left-bottom-content">
<div class="timeline-list">
<div
class="timeline-item"
v-for="(item, index) in timelineData"
:key="index"
>
<div class="timeline-item" v-for="(item, index) in timelineData" :key="index">
<div class="date-row">
<div class="dot"></div>
<div class="date">{{ item.date }}</div>
......@@ -101,7 +86,9 @@
</div>
</div>
<div class="view-more" v-if="hasMore" @click="loadMore">
查看更多 <el-icon class="icon-more"><DArrowRight /></el-icon>
查看更多 <el-icon class="icon-more">
<DArrowRight />
</el-icon>
</div>
</div>
</div>
......@@ -128,12 +115,7 @@
<el-option label="全部领域" value="" />
<el-option v-for="item in domainOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-input
v-model="searchKeyword"
placeholder="搜索实体"
style="width: 150px"
:suffix-icon="Search"
/>
<el-input v-model="searchKeyword" placeholder="搜索实体" style="width: 150px" :suffix-icon="Search" />
</div>
</div>
<div class="stats-row">
......@@ -144,7 +126,8 @@
<div class="stats-info">
<div class="stat-item">
<span class="dot red"></span>
<span class="text">新增 <span class="num red">{{ addCount }}</span> 家 (50%规则涉及<span class="num red">{{ addRuleCount }}</span>家)</span>
<span class="text">新增 <span class="num red">{{ addCount }}</span> 家 (50%规则涉及<span class="num red">{{
addRuleCount }}</span>家)</span>
</div>
<!-- <div class="stat-item">
<span class="dot green"></span>
......@@ -156,10 +139,7 @@
<div class="right-content">
<div class="sanction-group-list">
<div class="sanction-group" v-for="(group, index) in sanctionList" :key="index">
<el-table
:data="group.entities"
style="width: 100%"
>
<el-table :data="group.entities" style="width: 100%">
<el-table-column label="实体名称" min-width="280">
<template #default="scope">
<div class="name-cell">
......@@ -171,13 +151,8 @@
</el-table-column>
<el-table-column label="涉及领域" width="180" align="center">
<template #default="scope">
<span
v-for="(item, index) in scope.row.fields"
:key="index"
class="tag"
:style="getTagStyle(item)"
style="margin: 0 2px;"
>{{ item }}</span>
<span v-for="(item, index) in scope.row.fields" :key="index" class="tag" :style="getTagStyle(item)"
style="margin: 0 2px;">{{ item }}</span>
</template>
</el-table-column>
<el-table-column prop="location" label="上市地点" width="90" align="center" />
......@@ -185,7 +160,8 @@
<el-table-column prop="revenue" label="营收(亿元)" width="110" align="center" />
<el-table-column label="50%规则子企业" width="180" align="center">
<template #default="scope">
<span v-if="scope.row.subsidiaryCount" class="subsidiary-link" @click="handleSubsidiaryClick(scope.row)">
<span v-if="scope.row.subsidiaryCount" class="subsidiary-link"
@click="handleSubsidiaryClick(scope.row)">
{{ scope.row.subsidiaryText }} <span class="blue-text">{{ scope.row.subsidiaryCount }}家 ></span>
</span>
<span v-else>--</span>
......@@ -201,12 +177,8 @@
</div>
</div>
<!-- 50%规则子企业弹框 -->
<RuleSubsidiaryDialog
v-model="subsidiaryDialogVisible"
:company-name="currentSubsidiaryCompanyName"
:total-count="currentSubsidiaryCount"
:data-list="currentSubsidiaryList"
/>
<RuleSubsidiaryDialog v-model="subsidiaryDialogVisible" :company-name="currentSubsidiaryCompanyName"
:total-count="currentSubsidiaryCount" :data-list="currentSubsidiaryList" />
</div>
</template>
......@@ -223,14 +195,16 @@ import RuleSubsidiaryDialog from "../../../v2.0EntityList/components/sanctionsOv
// 跳转公司详情页
const handleCompClick = item => {
console.log("item", item);
const route = router.resolve({
name: "companyPages",
params: {
id: item.id
}
});
window.open(route.href, "_blank");
// console.log("item", item);
// const route = router.resolve({
// path: "/companyPages",
// query: {
// id: item.entityId
// }
// });
// window.open(route.href, "_blank");
const curRoute = router.resolve({ name: "companyPages", params: { id: item.entityId } });
window.open(curRoute.href, "_blank");
};
// 跳转发布机构详情页
......@@ -394,7 +368,7 @@ const props = defineProps({
});
// 跳转到人物页
const handleClick = () => {
const route = router.resolve({
const route = router.resolve({
path: "/characterPage",
query: {
// type: props.data.type,
......@@ -534,19 +508,23 @@ onMounted(() => {
margin: 0;
padding: 0;
}
.sanctions-overview {
width: 1601px;
margin: 0 auto;
padding-top: 16px;
padding-bottom: 50px;
.main {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
.left {
width: 520px;
height: 1119px;
.left-top {
width: 100%;
height: 582px;
......@@ -555,6 +533,7 @@ onMounted(() => {
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff;
margin-bottom: 16px;
.left-top-title {
padding: 22px 20px 22px 27px;
width: 100%;
......@@ -620,10 +599,12 @@ onMounted(() => {
&::-webkit-scrollbar {
height: 4px;
}
&::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 2px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
......@@ -642,11 +623,13 @@ onMounted(() => {
}
}
}
.left-top-content {
width: 100%;
height: 234px;
padding: 19px 29px 22px 27px;
overflow: auto;
.content-title {
font-size: 16px;
font-weight: 700;
......@@ -662,6 +645,7 @@ onMounted(() => {
flex-direction: column;
gap: 16px;
overflow: auto;
.list-item {
display: flex;
align-items: center;
......@@ -720,6 +704,7 @@ onMounted(() => {
}
}
}
.left-bottom {
width: 100%;
height: 521px;
......@@ -727,6 +712,7 @@ onMounted(() => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff;
.left-bottom-content {
padding: 26px 30px 0 25px;
height: calc(100% - 56px); // 减去标题高度
......@@ -746,10 +732,12 @@ onMounted(() => {
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
......@@ -833,12 +821,14 @@ onMounted(() => {
}
}
}
.right {
width: 1064px;
height: auto;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff;
.right-title {
width: 100%;
// height: 107px;
......@@ -920,6 +910,7 @@ onMounted(() => {
font-family: "Microsoft YaHei";
line-height: 24px;
margin-right: 34px;
.dot {
width: 8px;
height: 8px;
......@@ -929,6 +920,7 @@ onMounted(() => {
&.red {
background-color: rgb(206, 79, 81);
}
&.green {
background-color: rgb(33, 129, 57);
}
......@@ -940,11 +932,14 @@ onMounted(() => {
line-height: 24px;
font-family: "Microsoft YaHei";
color: rgb(59, 65, 75);
.num {
font-weight: 700;
&.red {
color: rgb(206, 79, 81);
}
&.green {
color: rgb(33, 129, 57);
}
......@@ -954,6 +949,7 @@ onMounted(() => {
}
}
}
.right-content {
padding: 0 20px 17px 20px;
......@@ -978,9 +974,11 @@ onMounted(() => {
font-family: "Microsoft YaHei";
border-bottom: none;
}
th:first-child {
border-top-left-radius: 8px;
}
th:last-child {
border-top-right-radius: 8px;
}
......@@ -990,9 +988,11 @@ onMounted(() => {
tr:nth-child(odd) td {
background-color: rgba(248, 249, 250, 1);
}
tr:nth-child(even) td {
background-color: #fff;
}
td {
height: 48px;
padding: 0;
......@@ -1068,12 +1068,14 @@ onMounted(() => {
}
}
}
.title-com {
width: 100%;
height: 56px;
display: flex;
align-items: center;
padding: 14px 12px 16px 0;
.box {
width: 8px;
height: 20px;
......@@ -1082,6 +1084,7 @@ onMounted(() => {
border-top-right-radius: 4px;
margin-right: 14px;
}
.text {
font-size: 20px;
font-weight: 700;
......@@ -1089,15 +1092,18 @@ onMounted(() => {
line-height: 26px;
color: rgb(5, 95, 194);
}
.btn {
width: 60px;
height: 28px;
margin-left: auto;
img {
width: 28px;
height: 28px;
cursor: pointer;
}
img:first-child {
margin-right: 4px;
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论