提交 2959b3ad authored 作者: coderBryanFu's avatar coderBryanFu

feat:新增组件:时间排序选择框

上级 356f18c3
...@@ -225,31 +225,6 @@ const menuList = ref([ ...@@ -225,31 +225,6 @@ const menuList = ref([
} }
]); ]);
const handleToModule = item => {
const curRoute = router.resolve({
path: item.path
});
window.open(curRoute.href, "_blank");
};
const searchText = ref("");
const handleSearch = () => {
const curRoute = router.resolve({
path: "/searchResults",
query: {
searchText: searchText.value
}
});
window.open(curRoute.href, "_blank");
};
const handleClickTitle = item => {
if (item.name === "主要国家科技动向感知" || item.name === "主要国家竞争科技安全") {
ElMessage.warning("当前功能正在开发中,敬请期待!");
}
};
const handleOpenPage = page => { const handleOpenPage = page => {
const pageObj = { const pageObj = {
znwd: "/chat", znwd: "/chat",
......
...@@ -27,7 +27,6 @@ import Menu12 from "@/assets/icons/overview/menu12.png"; ...@@ -27,7 +27,6 @@ import Menu12 from "@/assets/icons/overview/menu12.png";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
const router = useRouter(); const router = useRouter();
const route = useRoute();
import useTagsViewStore from '@/stores/tagsView.js' import useTagsViewStore from '@/stores/tagsView.js'
...@@ -48,17 +47,6 @@ router.beforeEach((to, from, next) => { ...@@ -48,17 +47,6 @@ router.beforeEach((to, from, next) => {
next() next()
}) })
const isShowAiBox = ref(false);
const closeAiBox = () => {
isShowAiBox.value = false;
};
const openAiBox = () => {
isShowAiBox.value = true;
};
const personTypeList = ref([]); const personTypeList = ref([]);
// 获取人物类别 // 获取人物类别
...@@ -75,146 +63,6 @@ const handleGetPersonType = async () => { ...@@ -75,146 +63,6 @@ const handleGetPersonType = async () => {
} catch (error) {} } catch (error) {}
}; };
const isCurrentOverview = computed(() => {
if (route.path === "/ZMOverView") {
return true;
} else {
return false;
}
});
// 概览页标题列表
const homeTitleList = ref([
{
name: "中美科技博弈",
path: "/ZMOverView",
disabled: false
},
{
name: "主要国家科技动向感知",
path: "",
disabled: true
},
{
name: "主要国家竞争科技安全",
path: "",
disabled: true
}
]);
const homeActiveTitleIndex = ref(0);
const isShowMenu = ref(false);
const handleShowMenu = (index, isShow) => {
if (index === 0) {
isShowMenu.value = isShow;
}
};
const handleHoverMenu = isShow => {
isShowMenu.value = isShow;
};
const menuList = ref([
{
title: "中美科技博弈概览",
icon: Menu1,
path: "/ZMOverView"
},
{
title: "科技法案",
icon: Menu2,
path: "/billHome"
},
{
title: "科技政令",
icon: Menu3,
path: "/decree"
},
{
title: "美国科技智库",
icon: Menu4,
path: "/thinkTank"
},
{
title: "出口管制",
icon: Menu5,
path: "/exportControl"
},
{
title: "科研合作限制",
icon: Menu6,
path: "/cooperationRestrictions"
},
{
title: "投融资限制",
icon: Menu7,
path: "/finance"
},
{
title: "市场准入限制",
icon: Menu8,
path: "/marketAccessRestrictions"
},
{
title: "规则限制",
icon: Menu9,
path: "/ruleRestrictions"
},
{
title: "美国科技人物观点",
icon: Menu10,
path: "/technologyFigures"
},
{
title: "美国主要创新主体动向",
icon: Menu11,
path: "/innovationSubject"
},
{
title: "美国科研资助体系",
icon: Menu12,
path: "/scientificFunding"
}
]);
const handleToModule = item => {
const curRoute = router.resolve({
path: item.path
});
window.open(curRoute.href, "_blank");
};
const searchText = ref("");
const handleSearch = () => {
const curRoute = router.resolve({
path: "/searchResults",
query: {
searchText: searchText.value
}
});
window.open(curRoute.href, "_blank");
};
const handleClickTitle = item => {
if (item.name === "主要国家科技动向感知" || item.name === "主要国家竞争科技安全") {
ElMessage.warning("当前功能正在开发中,敬请期待!");
}
};
const handleOpenPage = page => {
const pageObj = {
znwd: "/chat",
znxb: "/writtingAsstaint"
};
window.open(pageObj[page], "_blank");
};
const handleClickToolBox = () => {
ElMessage.warning("当前功能正在开发中,敬请期待!");
};
onMounted(() => { onMounted(() => {
handleGetPersonType(); handleGetPersonType();
}); });
......
<template> <template>
<RelationGraph style="width: 100%; height: 100%;" ref="graphRef" :options="graphOptions" @node-click="onNodeClick" <RelationGraph class="graph-box" style="width: 100%; height: 100%;" ref="graphRef" :options="graphOptions" @node-click="onNodeClick"
@line-click="onLineClick" /> @line-click="onLineClick" />
</template> </template>
...@@ -18,6 +18,13 @@ const graphOptions = { ...@@ -18,6 +18,13 @@ const graphOptions = {
allowSwitchJunctionPoint: true, allowSwitchJunctionPoint: true,
defaultLineShape: 1, defaultLineShape: 1,
distance_coefficient: 1, distance_coefficient: 1,
// 背景图配置
backgroundImage: new URL('@/assets/images/bg/companyGraph-bg.png', import.meta.url).href, // Vite 引入本地图片
// backgroundImage: 'https://example.com/your-bg-image.png', // 或者直接用网络图片
backgroundImageNoRepeat: true, // 图片不重复
backgroundImageOffsetX: 0, // X轴偏移
backgroundImageOffsetY: 0, // Y轴偏移
// backgroundColor: '#f5f5f5', // 背景底色
layouts: [ layouts: [
{ {
layoutName: 'center', layoutName: 'center',
...@@ -123,4 +130,9 @@ onMounted(() => { ...@@ -123,4 +130,9 @@ onMounted(() => {
}); });
</script> </script>
<style scoped lang="scss"></style> <style scoped lang="scss">
// .graph-box{
// background: url('@/assets/images/bg/chart-bg.png');
// background: orange;
// }
</style>
<template> <template>
<RelationGraph <RelationGraph style="width: 100%; height: 100%" ref="graphRef" :options="currentGraphOptions"
style="width: 100%; height: 100%" :on-node-click="onNodeClick" :on-line-click="onLineClick">
ref="graphRef"
:options="currentGraphOptions"
:on-node-click="onNodeClick"
:on-line-click="onLineClick"
>
<template #node="{ node }"> <template #node="{ node }">
<div <div class="custom-node" :style="{
class="custom-node" backgroundColor: node.color || 'var(--color-primary-50)'
:style="{ }">
backgroundColor: node.color || 'var(--color-primary-50)' <span :style="{
}" color: node.fontColor || '#ffffff',
> fontSize: node.customFontSize || '24px',
<span fontWeight: 'normal',
:style="{ textAlign: 'center',
color: node.fontColor || '#ffffff', wordBreak: 'break-word',
fontSize: node.customFontSize || '24px', padding: '0 8px'
fontWeight: 'normal', }">
textAlign: 'center',
wordBreak: 'break-word',
padding: '0 8px'
}"
>
{{ node.text }} {{ node.text }}
</span> </span>
</div> </div>
...@@ -76,7 +66,14 @@ const baseGraphOptionsH = { ...@@ -76,7 +66,14 @@ const baseGraphOptionsH = {
defaultNodeBorderColor: "var(--color-primary-100)", defaultNodeBorderColor: "var(--color-primary-100)",
defaultLineColor: "var(--color-primary-50)", defaultLineColor: "var(--color-primary-50)",
defaultNodeColor: "var(--color-primary-50)", defaultNodeColor: "var(--color-primary-50)",
defaultNodeFontColor: "var(--text-primary-90-color)" defaultNodeFontColor: "var(--text-primary-90-color)",
// 背景图配置
backgroundImage: new URL('@/assets/images/bg/companyGraph-bg.png', import.meta.url).href, // Vite 引入本地图片
// backgroundImage: 'https://example.com/your-bg-image.png', // 或者直接用网络图片
backgroundImageNoRepeat: true, // 图片不重复
backgroundImageOffsetX: 0, // X轴偏移
backgroundImageOffsetY: 0, // Y轴偏移
// backgroundColor: '#f5f5f5', // 背景底色
}; };
// 基础垂直配置 // 基础垂直配置
...@@ -102,7 +99,14 @@ const baseGraphOptionsV = { ...@@ -102,7 +99,14 @@ const baseGraphOptionsV = {
defaultNodeBorderWidth: 2, defaultNodeBorderWidth: 2,
defaultLineColor: "var(--color-primary-50)", defaultLineColor: "var(--color-primary-50)",
defaultNodeColor: "var(--color-primary-50)", defaultNodeColor: "var(--color-primary-50)",
defaultNodeFontColor: "var(--bg-white-100)" defaultNodeFontColor: "var(--bg-white-100)",
// 背景图配置
backgroundImage: new URL('@/assets/images/bg/companyGraph-bg.png', import.meta.url).href, // Vite 引入本地图片
// backgroundImage: 'https://example.com/your-bg-image.png', // 或者直接用网络图片
backgroundImageNoRepeat: true, // 图片不重复
backgroundImageOffsetX: 0, // X轴偏移
backgroundImageOffsetY: 0, // Y轴偏移
// backgroundColor: '#f5f5f5', // 背景底色
}; };
// 【核心修改】根据 isReversed 动态计算配置 // 【核心修改】根据 isReversed 动态计算配置
...@@ -184,6 +188,7 @@ onMounted(() => { ...@@ -184,6 +188,7 @@ onMounted(() => {
justify-content: center; justify-content: center;
} }
} }
.custom-node { .custom-node {
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
......
<template> <template>
<RelationGraph <RelationGraph style="width: 100%; height: 100%" ref="graphRef" :options="graphOptions" @node-click="onNodeClick"
style="width: 100%; height: 100%" @line-click="onLineClick">
ref="graphRef"
:options="graphOptions"
@node-click="onNodeClick"
@line-click="onLineClick"
>
<!-- 自定义节点插槽 - 这是官方推荐的方式 --> <!-- 自定义节点插槽 - 这是官方推荐的方式 -->
<template #node="{ node }"> <template #node="{ node }">
<div <div class="custom-node" :style="{
class="custom-node" backgroundColor: node.color || 'var(--color-primary-50)'
:style="{ }">
backgroundColor: node.color || 'var(--color-primary-50)'
}"
>
{{ console.log(node) }} {{ console.log(node) }}
<!-- 在这里自由控制文字样式 --> <!-- 在这里自由控制文字样式 -->
<div class="img" v-if="node.data.pic"> <div class="img" v-if="node.data.pic">
<img :src="node.data.pic" alt="" /> <img :src="node.data.pic" alt="" />
</div> </div>
<span <span class="text" :style="{
class="text" color: node.fontColor || 'var(--text-primary-80-color)',
:style="{ fontSize: node.customFontSize || '24px' // 可以从数据中读取
color: node.fontColor || 'var(--text-primary-80-color)', }">
fontSize: node.customFontSize || '24px' // 可以从数据中读取
}"
>
{{ node.text }} {{ node.text }}
</span> </span>
</div> </div>
...@@ -57,7 +46,14 @@ const graphOptions = ref({ ...@@ -57,7 +46,14 @@ const graphOptions = ref({
layout: { layout: {
layoutName: "force" layoutName: "force"
}, },
defaultJunctionPoint: "border" defaultJunctionPoint: "border",
// 背景图配置
backgroundImage: new URL('@/assets/images/bg/companyGraph-bg.png', import.meta.url).href, // Vite 引入本地图片
// backgroundImage: 'https://example.com/your-bg-image.png', // 或者直接用网络图片
backgroundImageNoRepeat: true, // 图片不重复
backgroundImageOffsetX: 0, // X轴偏移
backgroundImageOffsetY: 0, // Y轴偏移
// backgroundColor: '#f5f5f5', // 背景底色
// defaultNodeWidth: 150, // 全局默认节点宽度 // defaultNodeWidth: 150, // 全局默认节点宽度
// defaultNodeHeight: 150, // 全局默认节点高度 // defaultNodeHeight: 150, // 全局默认节点高度
}); });
......
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
<rect id="降序 6" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<path id="椭圆 465" d="M8 14.5C6.20507 14.5 4.67301 13.8654 3.40381 12.5962C2.1346 11.327 1.5 9.79492 1.5 8C1.5 6.20507 2.1346 4.67301 3.40381 3.40381C4.67301 2.1346 6.20507 1.5 8 1.5C9.79492 1.5 11.327 2.1346 12.5962 3.40381C13.8654 4.67301 14.5 6.20507 14.5 8L13.5 8C13.5 6.48122 12.963 5.18485 11.8891 4.11091C10.8151 3.03697 9.51878 2.5 8 2.5C6.48122 2.5 5.18485 3.03697 4.11091 4.11091C3.03697 5.18486 2.5 6.48122 2.5 8C2.5 9.51878 3.03697 10.8151 4.11091 11.8891C5.18485 12.963 6.48122 13.5 8 13.5L8 14.5ZM14.48 7.98L14.5 8C14.5 8.28 14.28 8.5 14 8.5C13.72 8.5 13.5 8.28 13.5 8L13.52 7.98L14.48 7.98ZM7.98 13.52L8 13.5C8.28 13.5 8.5 13.72 8.5 14C8.5 14.28 8.28 14.5 8 14.5L7.98 14.48L7.98 13.52Z" fill="rgb(95, 101, 108)" fill-rule="nonzero" />
<path id="矢量 1981" d="M4 8L8 8" stroke="rgb(95, 101, 108)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.000000" />
<path id="矢量 1982" d="M0 0L4 0" stroke="rgb(95, 101, 108)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.000000" transform="matrix(0,1,-1,0,8,4)" />
<path id="矢量 1983" d="M0 0L4 0" stroke="rgb(95, 101, 108)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.000000" transform="matrix(0,1,-1,0,12,9)" />
<path id="矢量 1984" d="M10 12L12 14L14 12" stroke="rgb(95, 101, 108)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.000000" />
</svg>
<template>
<div class="time-sort-select-box">
<el-select v-model="isSort" placeholder="发布时间" style="width: 130px" @change="handlePxChange">
<template #prefix>
<div style="display: flex; align-items: center; height: 100%">
<img v-if="isSort" src="./down.svg" style="width: 16px; height: 16px" />
<img v-else src="./up.svg" style="width: 16px; height: 16px" />
</div>
</template>
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</template>
<script setup>
import { ref } from 'vue'
const isSort = ref(true)
const timeList = ref([
{ label: "时间倒序", value: true },
{ label: "时间正序", value: false }
])
const emits = defineEmits(['handlePxChange'])
const handlePxChange = () => {
emits('handlePxChange', isSort.value)
}
</script>
<style scoped>
.time-sort-select-box {
height: 42px;
box-sizing: border-box;
padding: 5px 0;
}
</style>
\ No newline at end of file
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
<rect id="降序 7" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<path id="椭圆 465" d="M8 14.5C6.20507 14.5 4.67301 13.8654 3.40381 12.5962C2.1346 11.327 1.5 9.79492 1.5 8C1.5 6.20507 2.1346 4.67301 3.40381 3.40381C4.67301 2.1346 6.20507 1.5 8 1.5C9.79492 1.5 11.327 2.1346 12.5962 3.40381C13.8654 4.67301 14.5 6.20507 14.5 8L13.5 8C13.5 6.48122 12.963 5.18485 11.8891 4.11091C10.8151 3.03697 9.51878 2.5 8 2.5C6.48122 2.5 5.18485 3.03697 4.11091 4.11091C3.03697 5.18486 2.5 6.48122 2.5 8C2.5 9.51878 3.03697 10.8151 4.11091 11.8891C5.18485 12.963 6.48122 13.5 8 13.5L8 14.5ZM14.48 7.98L14.5 8C14.5 8.28 14.28 8.5 14 8.5C13.72 8.5 13.5 8.28 13.5 8L13.52 7.98L14.48 7.98ZM7.98 13.52L8 13.5C8.28 13.5 8.5 13.72 8.5 14C8.5 14.28 8.28 14.5 8 14.5L7.98 14.48L7.98 13.52Z" fill="rgb(95, 101, 108)" fill-rule="nonzero" />
<path id="矢量 1981" d="M4 8L8 8" stroke="rgb(95, 101, 108)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.000000" />
<path id="矢量 1982" d="M0 0L4 0" stroke="rgb(95, 101, 108)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.000000" transform="matrix(0,1,-1,0,8,4)" />
<path id="矢量 1983" d="M0 0L4 0" stroke="rgb(95, 101, 108)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.000000" transform="matrix(0,1,-1,0,12,10)" />
<path id="矢量 1984" d="M10 10.9969L12.0003 9L14 10.9969" stroke="rgb(95, 101, 108)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.000000" />
</svg>
<template>
<el-row class="wrapper layout-grid-line">
<el-col :span="span">
<pre>
{{
`
`
}}
</pre>
<div class="time-box">
<TimeSortSelectBox @handle-px-change="handlePx" />
</div>
</el-col>
</el-row>
</template>
<script setup>
import { ref } from 'vue'
import '@/styles/common.scss'
import TimeSortSelectBox from '@/components/base/TimeSortSelectBox/index.vue'
const span = 12
const handlePx = (val) => {
alert(val)
}
</script>
<style lang="scss" scoped>
.time-box {
width: 700px;
height: 400px;
padding: 100px;
background: #F2F8FF;
border: 1px solid var(--bg-black-5);
}
</style>
\ No newline at end of file
...@@ -73,6 +73,10 @@ ...@@ -73,6 +73,10 @@
<el-tab-pane label="激活工作框" lazy> <el-tab-pane label="激活工作框" lazy>
<WorkingBox /> <WorkingBox />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="时间排序" lazy>
<TimeSortSelectBox />
</el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</el-space> </el-space>
...@@ -107,6 +111,7 @@ import RelationChart from './RelationChart/index.vue' ...@@ -107,6 +111,7 @@ import RelationChart from './RelationChart/index.vue'
import RelationCenterChart from './RelationCenterChart/index.vue' import RelationCenterChart from './RelationCenterChart/index.vue'
import RelationForceChart from './RelationForceChart/index.vue' import RelationForceChart from './RelationForceChart/index.vue'
import WorkingBox from './WorkingBox/index.vue' import WorkingBox from './WorkingBox/index.vue'
import TimeSortSelectBox from './TimeSortSelectBox/index.vue'
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { getPersonSummaryInfo } from "@/api/common/index";
const router = useRouter() const router = useRouter()
// 跳转法案详情 // 跳转法案详情
...@@ -27,8 +28,20 @@ export const goToDecree = (id, tabName) => { ...@@ -27,8 +28,20 @@ export const goToDecree = (id, tabName) => {
window.open(route.href, "_blank"); window.open(route.href, "_blank");
}; };
// 跳转智库 // 跳转智库详情
export const goToThinkTank = (id, tabName) => { export const goToThinkTank = (id, tabName) => {
window.sessionStorage.setItem("curTabName", tabName);
const curRoute = router.resolve({
name: "ThinkTankDetail",
params: {
id: id
}
});
window.open(curRoute.href, "_blank");
}
// 跳转智库报告详情
export const goToThinkTankReport = (id, tabName) => {
window.sessionStorage.setItem("curTabName", tabName); window.sessionStorage.setItem("curTabName", tabName);
const route = router.resolve({ const route = router.resolve({
name: "ReportDetail", name: "ReportDetail",
...@@ -49,4 +62,129 @@ export const goToInstitution = (id, tabName) => { ...@@ -49,4 +62,129 @@ export const goToInstitution = (id, tabName) => {
} }
}); });
window.open(curRoute.href, "_blank"); window.open(curRoute.href, "_blank");
} }
\ No newline at end of file
// 跳转人物详情
export const goToCharacterPage = async (id, tabName) => {
window.sessionStorage.setItem('curTabName', tabName)
const personTypeList = JSON.parse(window.sessionStorage.getItem("personTypeList"));
let type
let personTypeName
const params = {
personId: id
}
// 先获取人物全局信息
try {
const res = await getPersonSummaryInfo(params)
if (res.code === 200 && res.data) {
const arr = personTypeList.filter(item => {
return item.typeId === res.data.personType;
})
if (arr && arr.length) {
personTypeName = arr[0].typeName;
if (personTypeName === "科技企业领袖") {
type = 1;
} else if (personTypeName === "国会议员") {
type = 2;
} else if (personTypeName === "智库研究人员") {
type = 3;
} else {
personTypeName = "其他类型";
const route = router.resolve({
path: "/characterPage",
query: {
personId: item.id
}
});
window.open(route.href, "_blank");
return;
}
const route = router.resolve({
path: "/characterPage",
query: {
type: type, // type=1为科技企业领袖,2为国会议员,3为智库研究人员
personId: item.id
}
});
window.open(route.href, "_blank");
} else {
personTypeName = "";
const route = router.resolve({
path: "/characterPage",
query: {
personId: item.id
}
});
window.open(route.href, "_blank");
return;
}
} else {
const route = router.resolve({
path: "/characterPage",
query: {
personId: item.id
}
});
window.open(route.href, "_blank");
return;
}
} catch (error) {
const route = router.resolve({
path: "/characterPage",
query: {
personId: item.id
}
});
window.open(route.href, "_blank");
return;
}
}
// 跳转企业
export const goToCompanyPage = (id, tabName) => {
window.sessionStorage.setItem('curTabName', tabName)
const route = router.resolve({
name: "companyPages",
params: {
id: id
}
});
window.open(route.href, "_blank");
}
// 跳转新闻详情
export const goToNewsPage = (id, tabName) => {
window.sessionStorage.setItem("curTabName", tabName);
const route = router.resolve({
path: "/newsAnalysis",
query: {
newsId: id
}
});
window.open(route.href, "_blank");
}
// 跳转搜索详情页
export const goToSearch = (tabName, areaName, billSearchType) => {
window.sessionStorage.setItem("curTabName", tabName);
// if (!areaName) return;
const query = {
searchText: tabName,
areaName: areaName
};
if (enableBillTypeSwitch) {
query.billSearchType = billSearchType
}
const curRoute = router.resolve({
path: "/searchResults",
query
});
window.open(curRoute.href, "_blank");
}
// 跳转数据资源库
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
moreText="查看全部委员会" moreText="查看全部委员会"
:moreCardMinCount="1" :moreCardMinCount="1"
@time-click="handleCommitteeTimeClick" @time-click="handleCommitteeTimeClick"
@name-click="handleToDataLibrary" @name-click="handleToInstitution"
@count-click="handleToBillDataLibrary" @count-click="handleToBillDataLibrary"
@more-click="handleToCommitteeMore" @more-click="handleToCommitteeMore"
/> />
...@@ -1009,7 +1009,7 @@ const handleBox7Data = async () => { ...@@ -1009,7 +1009,7 @@ const handleBox7Data = async () => {
watch(box7selectetedTime, () => { watch(box7selectetedTime, () => {
handleBox7Data(); handleBox7Data();
}); });
// 查看社交媒体详情 // 查看人物详情
const handleToSocialDetail = item => { const handleToSocialDetail = item => {
const route = router.resolve({ const route = router.resolve({
path: "/characterPage", path: "/characterPage",
...@@ -1428,7 +1428,7 @@ const handleResize = () => { ...@@ -1428,7 +1428,7 @@ const handleResize = () => {
}; };
// 下钻至资源库 // 下钻至资源库
const handleToDataLibrary = (item) => { const handleToInstitution = (item) => {
const orgId = item?.orgId || item?.id; const orgId = item?.orgId || item?.id;
if (!orgId) return; if (!orgId) return;
......
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
</div> </div>
</div> --> </div> -->
</div> </div>
<div class="main" v-if="curArea !== '实体清单'" > <div class="main" v-if="curArea !== '实体清单'">
<div class="item" v-for="(item, index) in searchResults" :key="index" @click="handleToPage(item)"> <div class="item" v-for="(item, index) in searchResults" :key="index" @click="handleToPage(item)">
<div class="item-left" v-if="item.img"> <div class="item-left" v-if="item.img">
<img :src="item?.img" alt="" /> <img :src="item?.img" alt="" />
...@@ -93,7 +93,7 @@ ...@@ -93,7 +93,7 @@
</div> </div>
<el-empty v-if="!searchResults.length"></el-empty> <el-empty v-if="!searchResults.length"></el-empty>
</div> </div>
<div class="main1" v-if="curArea === '实体清单'" > <div class="main1" v-if="curArea === '实体清单'">
<div class="item" v-for="(item, index) in searchResults" :key="index" @click="handleToPage(item)"> <div class="item" v-for="(item, index) in searchResults" :key="index" @click="handleToPage(item)">
<div class="main-header"> <div class="main-header">
<div class="title" v-html="item?.originalTitle"></div> <div class="title" v-html="item?.originalTitle"></div>
...@@ -358,9 +358,9 @@ const handleSearch = async (isShowResultTip) => { ...@@ -358,9 +358,9 @@ const handleSearch = async (isShowResultTip) => {
} }
} }
} catch (error) { } catch (error) {
console.error('error', error); console.error('error', error);
} finally { } finally {
isLoading.value = false isLoading.value = false
} }
...@@ -397,25 +397,44 @@ const handleToPage = async item => { ...@@ -397,25 +397,44 @@ const handleToPage = async item => {
} else if (personTypeName === "智库研究人员") { } else if (personTypeName === "智库研究人员") {
type = 3; type = 3;
} else { } else {
personTypeName = ""; personTypeName = "其他类型";
ElMessage.warning("找不到当前人员的类型值!"); const route = router.resolve({
path: "/characterPage",
query: {
personId: item.id
}
});
window.open(route.href, "_blank");
return; return;
} }
const route = router.resolve({ const route = router.resolve({
path: "/characterPage", path: "/characterPage",
query: { query: {
type: type, // type=1为科技企业领袖,2为国会议员,3为智库研究人员 type: type, // type=1为科技企业领袖,2为国会议员,3为智库研究人员
personId: id personId: item.id
} }
}); });
window.open(route.href, "_blank"); window.open(route.href, "_blank");
} else { } else {
personTypeName = ""; personTypeName = "";
ElMessage.warning("找不到当前人员的类型值!"); const route = router.resolve({
path: "/characterPage",
query: {
personId: item.id
}
});
window.open(route.href, "_blank");
return; return;
} }
} else { } else {
ElMessage.warning("获取人物全局信息错误"); // ElMessage.warning("获取人物全局信息错误");
const route = router.resolve({
path: "/characterPage",
query: {
personId: item.id
}
});
window.open(route.href, "_blank");
return; return;
} }
} catch (error) { } } catch (error) { }
...@@ -445,7 +464,7 @@ const handleToPage = async item => { ...@@ -445,7 +464,7 @@ const handleToPage = async item => {
break; break;
case "智库": case "智库":
curRoute = router.resolve({ curRoute = router.resolve({
name: "ReportDetail", name: "ThinkTankDetail",
params: { params: {
id: item.id id: item.id
} }
...@@ -517,36 +536,36 @@ const handleToPage = async item => { ...@@ -517,36 +536,36 @@ const handleToPage = async item => {
} }
}); });
break break
case "商业管制清单事件": // case "商业管制清单事件":
curRoute = router.resolve({ // curRoute = router.resolve({
path: "/exportControl/singleSanction", // path: "/exportControl/singleSanction",
query: { // query: {
id: item.id, // id: item.id,
sanTypeId: 2, // sanTypeId: 2,
date: item.date // date: item.date
} // }
}); // });
break // break
case "SDN清单事件": // case "SDN清单事件":
curRoute = router.resolve({ // curRoute = router.resolve({
path: "/exportControl/singleSanction", // path: "/exportControl/singleSanction",
query: { // query: {
id: item.id, // id: item.id,
sanTypeId: 2, // sanTypeId: 2,
date: item.date // date: item.date
} // }
}); // });
break // break
case "涉军企业清单事件": // case "涉军企业清单事件":
curRoute = router.resolve({ // curRoute = router.resolve({
path: "/exportControl/singleSanction", // path: "/exportControl/singleSanction",
query: { // query: {
id: item.id, // id: item.id,
sanTypeId: 2, // sanTypeId: 2,
date: item.date // date: item.date
} // }
}); // });
break // break
case "机构": case "机构":
curRoute = router.resolve({ curRoute = router.resolve({
path: "/institution", path: "/institution",
...@@ -998,6 +1017,18 @@ const handleCompClick = item => { ...@@ -998,6 +1017,18 @@ const handleCompClick = item => {
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
overflow: hidden; overflow: hidden;
/* 2. 关键属性:将元素转为弹性盒模型 */
display: -webkit-box;
/* 3. 限制显示的行数(修改数字即可改变行数) */
-webkit-line-clamp: 2;
/* 4. 设置文字垂直排列方向 */
-webkit-box-orient: vertical;
/* 5. 隐藏超出部分 */
overflow: hidden;
/* 6. 显示省略号 */
text-overflow: ellipsis;
/* 可选:修复文字间距/换行问题 */
word-break: break-all;
} }
.item-right-footer { .item-right-footer {
...@@ -1164,7 +1195,7 @@ const handleCompClick = item => { ...@@ -1164,7 +1195,7 @@ const handleCompClick = item => {
.content { .content {
margin-top: 10px; margin-top: 10px;
min-height: 0; min-height: 0;
// max-height: 48px; max-height: 48px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
...@@ -1173,6 +1204,18 @@ const handleCompClick = item => { ...@@ -1173,6 +1204,18 @@ const handleCompClick = item => {
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
overflow: hidden; overflow: hidden;
/* 2. 关键属性:将元素转为弹性盒模型 */
display: -webkit-box;
/* 3. 限制显示的行数(修改数字即可改变行数) */
-webkit-line-clamp: 2;
/* 4. 设置文字垂直排列方向 */
-webkit-box-orient: vertical;
/* 5. 隐藏超出部分 */
overflow: hidden;
/* 6. 显示省略号 */
text-overflow: ellipsis;
/* 可选:修复文字间距/换行问题 */
word-break: break-all;
} }
.time { .time {
......
...@@ -12,6 +12,10 @@ const getBarChart = (data) => { ...@@ -12,6 +12,10 @@ const getBarChart = (data) => {
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
name: '数量',
nameTextStyle: {
padding: [-10, 0, 0, -40] // [上, 右, 下, 左],向左移动10px
},
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
......
...@@ -24,6 +24,9 @@ const getLineChart = (dataX, dataY) => { ...@@ -24,6 +24,9 @@ const getLineChart = (dataX, dataY) => {
yAxis: { yAxis: {
type: 'value', type: 'value',
name: '数量', name: '数量',
nameTextStyle: {
padding: [-10, 0, 0, -40] // [上, 右, 下, 左],向左移动10px
},
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
......
...@@ -199,7 +199,7 @@ const staticsDemensionList = ref([ ...@@ -199,7 +199,7 @@ const staticsDemensionList = ref([
name: '制裁时间', name: '制裁时间',
active: true, active: true,
chartTypeList: ['折线图', '柱状图'], chartTypeList: ['折线图', '柱状图'],
chartTitle: '商业管制清单制裁时间变化趋势', chartTitle: '涉军企业清单制裁时间变化趋势',
data: { data: {
dataX: [], dataX: [],
dataY: [] dataY: []
...@@ -217,14 +217,14 @@ const staticsDemensionList = ref([ ...@@ -217,14 +217,14 @@ const staticsDemensionList = ref([
name: '科技领域', name: '科技领域',
active: false, active: false,
chartTypeList: ['饼状图'], chartTypeList: ['饼状图'],
chartTitle: '商业管制清单科技领域分布', chartTitle: '涉军企业清单科技领域分布',
data: [] data: []
}, },
{ {
name: '物项类别', name: '物项类别',
active: false, active: false,
chartTypeList: ['饼状图'], chartTypeList: ['饼状图'],
chartTitle: '商业管制清单物项类别分布', chartTitle: '涉军企业清单物项类别分布',
data: [] data: []
} }
...@@ -908,13 +908,13 @@ const initParam = () => { ...@@ -908,13 +908,13 @@ const initParam = () => {
} }
// 跳转政令详情 // 跳转企业详情
const handleClickToDetail = (curEntity) => { const handleClickToDetail = (curEntity) => {
window.sessionStorage.setItem("curTabName", curEntity.title); window.sessionStorage.setItem("curTabName", curEntity.title);
const route = router.resolve({ const route = router.resolve({
name: "companyPages", name: "companyPages",
params: { params: {
id: curEntity.id id: curEntity.organizationId
} }
}); });
window.open(route.href, "_blank"); window.open(route.href, "_blank");
......
...@@ -234,7 +234,7 @@ const staticsDemensionList = ref([ ...@@ -234,7 +234,7 @@ const staticsDemensionList = ref([
name: '制裁时间', name: '制裁时间',
active: true, active: true,
chartTypeList: ['折线图', '柱状图'], chartTypeList: ['折线图', '柱状图'],
chartTitle: '实体清单制裁时间变化趋势', chartTitle: 'SDN清单制裁时间变化趋势',
data: { data: {
dataX: [], dataX: [],
dataY: [] dataY: []
...@@ -252,28 +252,28 @@ const staticsDemensionList = ref([ ...@@ -252,28 +252,28 @@ const staticsDemensionList = ref([
name: '科技领域', name: '科技领域',
active: false, active: false,
chartTypeList: ['饼状图'], chartTypeList: ['饼状图'],
chartTitle: '实体清单科技领域分布', chartTitle: 'SDN清单科技领域分布',
data: [] data: []
}, },
{ {
name: '实体类型', name: 'SDN类型',
active: false, active: false,
chartTypeList: ['饼状图'], chartTypeList: ['饼状图'],
chartTitle: '实体类型分布', chartTitle: 'SDN类型分布',
data: [] data: []
}, },
{ {
name: '实体国家地区', name: 'SDN国家地区',
active: false, active: false,
chartTypeList: ['饼状图'], chartTypeList: ['饼状图'],
chartTitle: '实体国家地区分布', chartTitle: 'SDN国家地区分布',
data: [] data: []
}, },
{ {
name: '实体省份', name: 'SDN省份',
active: false, active: false,
chartTypeList: ['饼状图'], chartTypeList: ['饼状图'],
chartTitle: '实体省份分布', chartTitle: 'SDN省份分布',
data: [] data: []
} }
]) ])
......
...@@ -157,6 +157,11 @@ const desMap = { ...@@ -157,6 +157,11 @@ const desMap = {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
&:hover{
text-decoration: underline;
background: var(--color-primary-2);
}
.quantity-title-des { .quantity-title-des {
display: flex; display: flex;
......
...@@ -3,25 +3,12 @@ ...@@ -3,25 +3,12 @@
<div class="home-main" ref="homeMainRef"> <div class="home-main" ref="homeMainRef">
<div class="home-top-bg"></div> <div class="home-top-bg"></div>
<div class="home-main-header"> <div class="home-main-header">
<SearchContainer <SearchContainer style="margin-bottom: 0; margin-top: 48px; height: fit-content" v-if="homeMainRef"
style="margin-bottom: 0; margin-top: 48px; height: fit-content" placeholder="搜索出口管制" :containerRef="homeMainRef" areaName="实体清单" />
v-if="homeMainRef"
placeholder="搜索出口管制"
:containerRef="homeMainRef"
areaName="实体清单"
/>
<div class="home-main-header-footer-info"> <div class="home-main-header-footer-info">
<InfoCard <InfoCard v-for="(item, index) in infoList" :key="item.id" :title="item.nameZh" :subtitle="item.nameAbbr"
v-for="(item, index) in infoList" :description="item.description" :quantity="item.postCount" :unit="item.unit" :color="infoListColor[index]"
:key="item.id" @click="handleToEntityListNoId(item)" />
:title="item.nameZh"
:subtitle="item.nameAbbr"
:description="item.description"
:quantity="item.postCount"
:unit="item.unit"
:color="infoListColor[index]"
@click="handleToEntityListNoId(item)"
/>
</div> </div>
</div> </div>
...@@ -47,15 +34,8 @@ ...@@ -47,15 +34,8 @@
<img src="./assets/images/box1-right.png" alt="" /> <img src="./assets/images/box1-right.png" alt="" />
</div> </div>
</div> </div>
<el-carousel <el-carousel ref="carouselRef" height="370px" :autoplay="true" :interval="3000" arrow="never"
ref="carouselRef" indicator-position="none" @change="handleCarouselChange">
height="370px"
:autoplay="true"
:interval="3000"
arrow="never"
indicator-position="none"
@change="handleCarouselChange"
>
<el-carousel-item v-for="(item, index) in entitiesDataInfoList" :key="item.id + index"> <el-carousel-item v-for="(item, index) in entitiesDataInfoList" :key="item.id + index">
<div> <div>
<div class="box1-top"> <div class="box1-top">
...@@ -80,11 +60,7 @@ ...@@ -80,11 +60,7 @@
> >
<el-tag :type="getTagType(domainItem)">{{ domainItem }}</el-tag> <el-tag :type="getTagType(domainItem)">{{ domainItem }}</el-tag>
</div> --> </div> -->
<AreaTag <AreaTag v-for="(domainItem, index) in item.domains" :key="index" :tagName="domainItem" />
v-for="(domainItem, index) in item.domains"
:key="index"
:tagName="domainItem"
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -92,18 +68,10 @@ ...@@ -92,18 +68,10 @@
<div class="box1-bottom-sanTypeId" v-if="item.sanEntities?.length"> <div class="box1-bottom-sanTypeId" v-if="item.sanEntities?.length">
<div class="box1-bottom-title">· 涉及主要实体:</div> <div class="box1-bottom-title">· 涉及主要实体:</div>
<div class="box1-bottom-content"> <div class="box1-bottom-content">
<div <div class="box1-bottom-content-item" v-for="(ett, index) in item.sanEntities" :key="index"
class="box1-bottom-content-item" @click="handleEntityClick(ett)">
v-for="(ett, index) in item.sanEntities" <el-image v-if="ett.img" class="box1-bottom-content-item-img" :src="ett.img"
:key="index" alt=""></el-image>
@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"> <div v-else class="box1-bottom-content-item-imgUndefined">
{{ {{
(ett.orgName || ett.orgNameZh)?.match( (ett.orgName || ett.orgNameZh)?.match(
...@@ -120,12 +88,8 @@ ...@@ -120,12 +88,8 @@
<div class="box1-bottom-sanTypeId" v-if="item.sanItems?.length > 0"> <div class="box1-bottom-sanTypeId" v-if="item.sanItems?.length > 0">
<div class="box1-bottom-title">· 涉及管制物项:</div> <div class="box1-bottom-title">· 涉及管制物项:</div>
<div class="box1-bottom-content__wx"> <div class="box1-bottom-content__wx">
<div <div class="box1-bottom-content__wx-item" v-for="(ett, index) in item.sanItems" :key="index"
class="box1-bottom-content__wx-item" @click="handleWxClick(item)">
v-for="(ett, index) in item.sanItems"
:key="index"
@click="handleWxClick(item)"
>
<div class="box1-bottom-content__wx-item-id"> <div class="box1-bottom-content__wx-item-id">
{{ ett.id }} {{ ett.id }}
</div> </div>
...@@ -199,14 +163,8 @@ ...@@ -199,14 +163,8 @@
</div> </div>
</template> </template>
</custom-container> --> </custom-container> -->
<RiskSignal <RiskSignal :list="warningList" @item-click="handleToRiskSignalDetail" @more-click="handleToMoreRiskSignal"
:list="warningList" riskLevel="signalLevel" postDate="signalTime" name="signalTitle" />
@item-click="handleToRiskSignalDetail"
@more-click="handleToMoreRiskSignal"
riskLevel="signalLevel"
postDate="signalTime"
name="signalTitle"
/>
</el-col> </el-col>
</el-row> </el-row>
...@@ -229,19 +187,11 @@ ...@@ -229,19 +187,11 @@
</custom-container> </custom-container>
</el-col> --> </el-col> -->
<div class="center-center"> <div class="center-center">
<NewsList <NewsList :newsList="newsList" @item-click="handleNewsInfoClick" @more-click="handleToMoreNews"
:newsList="newsList" content="newsContent" />
@item-click="handleNewsInfoClick"
@more-click="handleToMoreNews" <MessageBubble :messageList="socialMediaList" @person-click="handlePerClick" imageUrl="avatar"
content="newsContent" @more-click="handleToSocialDetail" />
/>
<MessageBubble
:messageList="socialMediaList"
@person-click="handlePerClick"
imageUrl="avatar"
@more-click="handleToSocialDetail"
/>
<!-- <custom-container title="社交媒体" :titleIcon="dialogIcon" height="450px"> <!-- <custom-container title="社交媒体" :titleIcon="dialogIcon" height="450px">
<template #default> <template #default>
<div class="dialog-list"> <div class="dialog-list">
...@@ -261,30 +211,20 @@ ...@@ -261,30 +211,20 @@
<div class="box3"> <div class="box3">
<div class="box3-content"> <div class="box3-content">
<div class="box3-content-title">实体清单发布频次统计</div> <div class="box3-content-title">实体清单发布频次统计</div>
<el-table <el-table :data="entityListReleaseFreq" stripe style="width: 100%" @row-click="handleEntityRowClick">
:data="entityListReleaseFreq"
stripe
style="width: 100%"
@row-click="handleEntityRowClick"
>
<el-table-column prop="year" label="年份" width="200" /> <el-table-column prop="year" label="年份" width="200" />
<el-table-column label="发布次数" width="300"> <el-table-column label="发布次数" width="300">
<template #default="scope"> <template #default="scope">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<span style="margin-right: 10px; width: 40px">{{ scope.row.num }}</span> <span style="margin-right: 10px; width: 40px">{{ scope.row.num }}</span>
<el-progress <el-progress :percentage="scope.row.percent * 100" :show-text="false"
:percentage="scope.row.percent * 100" :status="getStatus(scope.row.percent)" />
:show-text="false"
:status="getStatus(scope.row.percent)"
/>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="重点领域" width="220" align="center"> <el-table-column label="重点领域" width="220" align="center">
<template #default="scope"> <template #default="scope">
<div <div style="display: flex; justify-content: center; align-items: center; gap: 5px">
style="display: flex; justify-content: center; align-items: center; gap: 5px"
>
<AreaTag v-for="tag in scope.row.tags" :key="tag" :tagName="tag" /> <AreaTag v-for="tag in scope.row.tags" :key="tag" :tagName="tag" />
<!-- <el-tag v-for="tag in scope.row.tags" :key="tag" :type="getTagType(tag)">{{ <!-- <el-tag v-for="tag in scope.row.tags" :key="tag" :type="getTagType(tag)">{{
tag tag
...@@ -306,30 +246,21 @@ ...@@ -306,30 +246,21 @@
</div> </div>
<div class="box3-content"> <div class="box3-content">
<div class="box3-content-title">商业管制清单发布频次统计</div> <div class="box3-content-title">商业管制清单发布频次统计</div>
<el-table <el-table :data="commerceControlListReleaseFreq" stripe style="width: 100%"
:data="commerceControlListReleaseFreq" @row-click="handleCommercialRowClick">
stripe
style="width: 100%"
@row-click="handleCommercialRowClick"
>
<el-table-column prop="year" label="年份" width="200" /> <el-table-column prop="year" label="年份" width="200" />
<el-table-column label="发布次数" width="300"> <el-table-column label="发布次数" width="300">
<template #default="scope"> <template #default="scope">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<span style="margin-right: 10px; width: 40px">{{ scope.row.num }}</span> <span style="margin-right: 10px; width: 40px">{{ scope.row.num }}</span>
<el-progress <el-progress :percentage="scope.row.percent * 100" :show-text="false"
:percentage="scope.row.percent * 100" :status="getStatus(scope.row.percent)" />
:show-text="false"
:status="getStatus(scope.row.percent)"
/>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="重点领域" width="220" align="center"> <el-table-column label="重点领域" width="220" align="center">
<template #default="scope"> <template #default="scope">
<div <div style="display: flex; justify-content: center; align-items: center; gap: 5px">
style="display: flex; justify-content: center; align-items: center; gap: 5px"
>
<AreaTag v-for="tag in scope.row.tags" :key="tag" :tagName="tag" /> <AreaTag v-for="tag in scope.row.tags" :key="tag" :tagName="tag" />
<!-- <el-tag v-for="tag in scope.row.tags" :key="tag" :type="getTagType(tag)">{{ <!-- <el-tag v-for="tag in scope.row.tags" :key="tag" :type="getTagType(tag)">{{
tag tag
...@@ -359,11 +290,8 @@ ...@@ -359,11 +290,8 @@
<template #default="scope"> <template #default="scope">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<span style="margin-right: 10px; width: 40px">{{ scope.row.num }}</span> <span style="margin-right: 10px; width: 40px">{{ scope.row.num }}</span>
<el-progress <el-progress :percentage="scope.row.percent * 100" :show-text="false"
:percentage="scope.row.percent * 100" :status="getStatus(scope.row.percent)" />
:show-text="false"
:status="getStatus(scope.row.percent)"
/>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
...@@ -391,12 +319,8 @@ ...@@ -391,12 +319,8 @@
<el-checkbox v-model="domainChecked" label="50%规则" size="large" /> <el-checkbox v-model="domainChecked" label="50%规则" size="large" />
</template> </template>
<template #default> <template #default>
<EChart <EChart :option="radarOption" autoresize :style="{ height: '420px' }"
:option="radarOption" @chart-click="handleRadarChartClick" />
autoresize
:style="{ height: '420px' }"
@chart-click="handleRadarChartClick"
/>
<div class="data-origin-box"> <div class="data-origin-box">
<div class="data-origin-icon"> <div class="data-origin-icon">
<img :src="tipsIcon" alt="" /> <img :src="tipsIcon" alt="" />
...@@ -414,24 +338,15 @@ ...@@ -414,24 +338,15 @@
<custom-container title="制裁清单数量增长趋势" :titleIcon="qushiIcon" height="540px"> <custom-container title="制裁清单数量增长趋势" :titleIcon="qushiIcon" height="540px">
<template #header-right> <template #header-right>
<div style="display: flex; align-items: center; gap: 16px"> <div style="display: flex; align-items: center; gap: 16px">
<el-checkbox <el-checkbox v-if="selectedEntityId != '13'" v-model="trendChecked" label="50%规则" size="large" />
v-if="selectedEntityId != '13'"
v-model="trendChecked"
label="50%规则"
size="large"
/>
<el-select v-model="selectedEntityId" placeholder="请选择清单类型" style="width: 160px"> <el-select v-model="selectedEntityId" placeholder="请选择清单类型" style="width: 160px">
<el-option v-for="item in infoList" :key="item.id" :label="item.nameZh" :value="item.id" /> <el-option v-for="item in infoList" :key="item.id" :label="item.nameZh" :value="item.id" />
</el-select> </el-select>
</div> </div>
</template> </template>
<template #default> <template #default>
<EChart <EChart :option="trendOption" autoresize :style="{ height: '420px' }"
:option="trendOption" @chart-click="handleMultiBarChartClick" />
autoresize
:style="{ height: '420px' }"
@chart-click="handleMultiBarChartClick"
/>
<div class="data-origin-box"> <div class="data-origin-box">
<div class="data-origin-icon"> <div class="data-origin-icon">
<img :src="tipsIcon" alt="" /> <img :src="tipsIcon" alt="" />
...@@ -450,13 +365,9 @@ ...@@ -450,13 +365,9 @@
<el-row :gutter="16" style="width: 1600px; margin: 0 auto; margin-top: 39px; padding-bottom: 60px"> <el-row :gutter="16" style="width: 1600px; margin: 0 auto; margin-top: 39px; padding-bottom: 60px">
<CustomTitle id="position4" title="资源库" style="margin-top: 0px" /> <CustomTitle id="position4" title="资源库" style="margin-top: 0px" />
<div class="resource-tabs"> <div class="resource-tabs">
<div <div v-for="tab in resourceTabs" :key="tab.value" class="resource-tab-item"
v-for="tab in resourceTabs"
:key="tab.value"
class="resource-tab-item"
:class="{ active: activeResourceTab == tab.value, disabled: tab.disabled }" :class="{ active: activeResourceTab == tab.value, disabled: tab.disabled }"
@click="handleResourceTabClick(tab)" @click="handleResourceTabClick(tab)">
>
{{ tab.label }} {{ tab.label }}
</div> </div>
</div> </div>
...@@ -469,25 +380,15 @@ ...@@ -469,25 +380,15 @@
<div class="box4-item" v-for="(item, idx) in sanctionProcessList" :key="item.title"> <div class="box4-item" v-for="(item, idx) in sanctionProcessList" :key="item.title">
<div class="box4-item-left"> <div class="box4-item-left">
<el-image :src="dotIcon" alt="图片" class="box4-item-left-icon" /> <el-image :src="dotIcon" alt="图片" class="box4-item-left-icon" />
<div <div class="box4-item-left-line" v-if="idx + 1 != sanctionProcessList.length"></div>
class="box4-item-left-line"
v-if="idx + 1 != sanctionProcessList.length"
></div>
</div> </div>
<div class="box4-item-right"> <div class="box4-item-right">
<div class="box4-item-right-header" @click="handleSanc(item)"> <div class="box4-item-right-header" @click="handleSanc(item)">
<span class="box4-item-right-header-title" <span class="box4-item-right-header-title">{{ item.postDate }}{{ item.title }}</span>
>{{ item.postDate }}{{ item.title }}</span
>
<span class="box4-item-right-header-desc">{{ item.desc }}</span> <span class="box4-item-right-header-desc">{{ item.desc }}</span>
</div> </div>
<el-tooltip <el-tooltip effect="dark" :content="item.content" popper-class="common-prompt-popper"
effect="dark" placement="top" :show-after="500">
:content="item.content"
popper-class="common-prompt-popper"
placement="top"
:show-after="500"
>
<div class="box4-item-right-content"> <div class="box4-item-right-content">
{{ item.content }} {{ item.content }}
</div> </div>
...@@ -495,12 +396,8 @@ ...@@ -495,12 +396,8 @@
</div> </div>
</div> </div>
</div> </div>
<div <div class="box4-footer" :style="{ marginTop: sanctionProcessList.length > 0 ? '0px' : 'auto' }">
class="box4-footer" <el-button type="primary" link @click="handleGetMore">查看更多
:style="{ marginTop: sanctionProcessList.length > 0 ? '0px' : 'auto' }"
>
<el-button type="primary" link @click="handleGetMore"
>查看更多
<el-icon> <el-icon>
<DArrowRight /> <DArrowRight />
</el-icon> </el-icon>
...@@ -517,24 +414,13 @@ ...@@ -517,24 +414,13 @@
</template> </template>
<template #default> <template #default>
<div class="box5"> <div class="box5">
<el-table <el-table :data="entitiesList" class="sanction-table" stripe empty-text="暂无数据" height="700px"
:data="entitiesList" header-row-class-name="table-header" row-class-name="table-row">
class="sanction-table"
stripe
empty-text="暂无数据"
height="700px"
header-row-class-name="table-header"
row-class-name="table-row"
>
<el-table-column prop="name" label="实体名称" min-width="200"> <el-table-column prop="name" label="实体名称" min-width="200">
<template #default="scope"> <template #default="scope">
<div class="tableName" @click="handleCompClick(scope.row)"> <div class="tableName" @click="handleCompClick(scope.row)">
<el-image <el-image v-if="scope.row.img" class="box1-bottom-content-item-img" :src="scope.row.img"
v-if="scope.row.img" alt=""></el-image>
class="box1-bottom-content-item-img"
:src="scope.row.img"
alt=""
></el-image>
<div v-else class="box1-bottom-content-item-imgUndefined"> <div v-else class="box1-bottom-content-item-imgUndefined">
{{ {{
(scope.row.name || scope.row.enName)?.match( (scope.row.name || scope.row.enName)?.match(
...@@ -588,19 +474,13 @@ ...@@ -588,19 +474,13 @@
<el-table-column prop="revenue" label="50%规则子企业" width="280" align="right"> <el-table-column prop="revenue" label="50%规则子企业" width="280" align="right">
<template #default="scope"> <template #default="scope">
<div class="num-item" v-if="scope.row.ruleOrgCount > 0"> <div class="num-item" v-if="scope.row.ruleOrgCount > 0">
<div <div class="name-item" :class="[
class="name-item" 'revenue-cell',
:class="[ scope.row.revenue === '无营收数据' ? 'no-revenue' : ''
'revenue-cell', ]">
scope.row.revenue === '无营收数据' ? 'no-revenue' : ''
]"
>
{{ scope.row.ruleOrgList[0].orgName }}...等 {{ scope.row.ruleOrgList[0].orgName }}...等
</div> </div>
<div <div style="width: 50px; color: #409eff; cursor: pointer" @click="handleOrgClick(scope.row)">
style="width: 50px; color: #409eff; cursor: pointer"
@click="handleOrgClick(scope.row)"
>
{{ scope.row.ruleOrgCount }}家> {{ scope.row.ruleOrgCount }}家>
</div> </div>
</div> </div>
...@@ -612,15 +492,8 @@ ...@@ -612,15 +492,8 @@
<!-- <div class="pagination-info"> <!-- <div class="pagination-info">
第{{ currentPage }}页,共{{ totalPages }}页 第{{ currentPage }}页,共{{ totalPages }}页
</div> --> </div> -->
<el-pagination <el-pagination v-model:current-page="currentPage" :page-size="pageSize" :total="total"
v-model:current-page="currentPage" :pager-count="5" layout="prev, pager, next" background @current-change="handlePageChange" />
:page-size="pageSize"
:total="total"
:pager-count="5"
layout="prev, pager, next"
background
@current-change="handlePageChange"
/>
</div> </div>
</div> </div>
</template> </template>
...@@ -686,14 +559,8 @@ ...@@ -686,14 +559,8 @@
</div> </div>
<div class="right-footer"> <div class="right-footer">
<div class="total-count">{{ totalAll }}</div> <div class="total-count">{{ totalAll }}</div>
<el-pagination <el-pagination v-model:current-page="currentPageAll" :page-size="pageSizeAll" :total="totalAll"
v-model:current-page="currentPageAll" layout="prev, pager, next" background @current-change="handlePageChangeAll" />
:page-size="pageSizeAll"
:total="totalAll"
layout="prev, pager, next"
background
@current-change="handlePageChangeAll"
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -706,12 +573,8 @@ ...@@ -706,12 +573,8 @@
</template> </template>
</el-row> </el-row>
</div> </div>
<RuleSubsidiaryDialog <RuleSubsidiaryDialog v-model="dialogVisible" :company-name="currentRuleCompany" :total-count="currentRuleCount"
v-model="dialogVisible" :data-list="currentOrgList" />
:company-name="currentRuleCompany"
:total-count="currentRuleCount"
:data-list="currentOrgList"
/>
</div> </div>
<el-dialog v-model="mediaVisible" title="社交媒体信息" width="500" :before-close="handleMediaClose"> <el-dialog v-model="mediaVisible" title="社交媒体信息" width="500" :before-close="handleMediaClose">
<div class="dialog-content"> <div class="dialog-content">
...@@ -724,13 +587,8 @@ ...@@ -724,13 +587,8 @@
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
<RiskSignalOverviewDetailDialog <RiskSignalOverviewDetailDialog v-model="isRiskOverviewDetailOpen" :row="riskOverviewDetailRow"
v-model="isRiskOverviewDetailOpen" name-field="signalTitle" post-date-field="signalTime" risk-level-field="signalLevel" />
:row="riskOverviewDetailRow"
name-field="signalTitle"
post-date-field="signalTime"
risk-level-field="signalLevel"
/>
</template> </template>
<script setup> <script setup>
...@@ -1457,7 +1315,7 @@ const fetchSanctionList = async () => { ...@@ -1457,7 +1315,7 @@ const fetchSanctionList = async () => {
}); });
totalAll.value = res.totalElements; totalAll.value = res.totalElements;
} }
} catch (error) {} } catch (error) { }
}; };
const handlePageChangeAll = val => { const handlePageChangeAll = val => {
...@@ -1751,7 +1609,7 @@ const handleGetHylyList = async () => { ...@@ -1751,7 +1609,7 @@ const handleGetHylyList = async () => {
hylymc: "全部分类" hylymc: "全部分类"
}; };
categoryList.value = [obj, ...categoryList.value]; categoryList.value = [obj, ...categoryList.value];
} catch (error) {} } catch (error) { }
}; };
const chart1Data = ref({ const chart1Data = ref({
...@@ -2024,6 +1882,7 @@ const handleMediaClick = item => { ...@@ -2024,6 +1882,7 @@ const handleMediaClick = item => {
box-sizing: border-box; box-sizing: border-box;
background: linear-gradient(to right, rgba(206, 79, 81, 0), rgba(206, 79, 81, 0.3)); background: linear-gradient(to right, rgba(206, 79, 81, 0), rgba(206, 79, 81, 0.3));
cursor: pointer; cursor: pointer;
&-des { &-des {
display: flex; display: flex;
gap: 5px; gap: 5px;
...@@ -2095,18 +1954,21 @@ const handleMediaClick = item => { ...@@ -2095,18 +1954,21 @@ const handleMediaClick = item => {
padding-left: 10px; padding-left: 10px;
height: 156px; height: 156px;
overflow: auto; overflow: auto;
&-item { &-item {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
gap: 10px; gap: 10px;
cursor: pointer; cursor: pointer;
&-id { &-id {
font-family: "Source Han Sans CN"; font-family: "Source Han Sans CN";
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: rgb(95, 101, 108); color: rgb(95, 101, 108);
} }
&-txt { &-txt {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
...@@ -2115,6 +1977,7 @@ const handleMediaClick = item => { ...@@ -2115,6 +1977,7 @@ const handleMediaClick = item => {
} }
} }
} }
&-content { &-content {
display: flex; display: flex;
gap: 15px; gap: 15px;
...@@ -2347,6 +2210,7 @@ const handleMediaClick = item => { ...@@ -2347,6 +2210,7 @@ const handleMediaClick = item => {
} }
.box3-content { .box3-content {
// flex: 1; // flex: 1;
.el-progress--line { .el-progress--line {
width: 82px; width: 82px;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论