提交 4b3df7bc authored 作者: coderBryanFu's avatar coderBryanFu

update

上级 4b2ec62b
...@@ -11,13 +11,14 @@ import BillLayout from '@/views/bill/index.vue' ...@@ -11,13 +11,14 @@ import BillLayout from '@/views/bill/index.vue'
import BillIntroduction from '@/views/bill/introdoction/index.vue' import BillIntroduction from '@/views/bill/introdoction/index.vue'
import BillBackground from '@/views/bill/background/index.vue' import BillBackground from '@/views/bill/background/index.vue'
import BillTemplate from '@/views/bill/template/index.vue' import BillTemplate from '@/views/bill/template/index.vue'
import DeepDigLayout from '@/views/bill/deepDig/index.vue' import BillDeepDigLayout from '@/views/bill/deepDig/index.vue'
import DeepDigProcessOverview from '@/views/bill/deepDig/processOverview/index.vue' import BillDeepDigProcessOverview from '@/views/bill/deepDig/processOverview/index.vue'
import DeepDigProcessAnalysis from '@/views/bill/deepDig/processAnalysis/index.vue' import BillDeepDigProcessAnalysis from '@/views/bill/deepDig/processAnalysis/index.vue'
import DeepDigProgressOverview from '@/views/bill/deepDig/progressAnalysis/index.vue' import BillDeepDigProgressOverview from '@/views/bill/deepDig/progressAnalysis/index.vue'
import InfluenceLayout from '@/views/bill/influence/index.vue' import BillInfluenceLayout from '@/views/bill/influence/index.vue'
import InfluenceIndustry from '@/views/bill/influence/industry/index.vue' import BillInfluenceIndustry from '@/views/bill/influence/industry/index.vue'
import InfluenceScientificResearch from '@/views/bill/influence/scientificResearch/index.vue' import BillInfluenceScientificResearch from '@/views/bill/influence/scientificResearch/index.vue'
import BillRelevantCircumstance from '@/views/bill/relevantCircumstance/index.vue'
// 出口管制 // 出口管制
import ExportControl from '@/views/exportControl/index.vue' import ExportControl from '@/views/exportControl/index.vue'
...@@ -25,7 +26,7 @@ import ExportControl from '@/views/exportControl/index.vue' ...@@ -25,7 +26,7 @@ import ExportControl from '@/views/exportControl/index.vue'
// 政令 // 政令
import Decree from '@/views/decree/decreeHome/index.vue' import Decree from '@/views/decree/decreeHome/index.vue'
import DecreeLayoutContainer from '@/views/decree/decreeLayout/index.vue' import DecreeLayoutContainer from '@/views/decree/decreeLayout/index.vue'
import OverviewLayout from '@/views/decree/decreeLayout/overview/index.vue' import DecreeOverviewLayout from '@/views/decree/decreeLayout/overview/index.vue'
import DecreeIntroduction from '@/views/decree/decreeLayout/overview/introduction/index.vue' import DecreeIntroduction from '@/views/decree/decreeLayout/overview/introduction/index.vue'
import DecreeBackground from '@/views/decree/decreeLayout/overview/background/index.vue' import DecreeBackground from '@/views/decree/decreeLayout/overview/background/index.vue'
import DecreeDeepDig from '@/views/decree/decreeLayout/deepdig/index.vue' import DecreeDeepDig from '@/views/decree/decreeLayout/deepdig/index.vue'
...@@ -128,8 +129,8 @@ const routes = [ ...@@ -128,8 +129,8 @@ const routes = [
// 深度挖掘路由 // 深度挖掘路由
{ {
path: 'deepDig', path: 'deepDig',
name: 'DeepDigLayout', name: 'BillDeepDigLayout',
component: DeepDigLayout, component: BillDeepDigLayout,
redirect: '/billLayout/deepDig/processOverview', redirect: '/billLayout/deepDig/processOverview',
meta: { meta: {
title: '深度挖掘' title: '深度挖掘'
...@@ -137,20 +138,20 @@ const routes = [ ...@@ -137,20 +138,20 @@ const routes = [
children: [ children: [
{ {
path: 'processOverview', path: 'processOverview',
name: 'DeepDigProcessOverview', name: 'BillDeepDigProcessOverview',
component: DeepDigProcessOverview, component: BillDeepDigProcessOverview,
meta: { title: '流程概要' } meta: { title: '流程概要' }
}, },
{ {
path: 'processAnalysis', path: 'processAnalysis',
name: 'DeepDigProcessAnalysis', name: 'BillDeepDigProcessAnalysis',
component: DeepDigProcessAnalysis, component: BillDeepDigProcessAnalysis,
meta: { title: '流程分析' } meta: { title: '流程分析' }
}, },
{ {
path: 'progressAnalysis', path: 'progressAnalysis',
name: 'DeepDigProgressAnalysis', name: 'DeepDigProgressAnalysis',
component: DeepDigProgressOverview, component: BillDeepDigProgressOverview,
meta: { title: '进程分析' } meta: { title: '进程分析' }
}, },
] ]
...@@ -158,8 +159,8 @@ const routes = [ ...@@ -158,8 +159,8 @@ const routes = [
// 影响分析路由 // 影响分析路由
{ {
path: 'influence', path: 'influence',
name: 'InfluenceLayout', name: 'BillInfluenceLayout',
component: InfluenceLayout, component: BillInfluenceLayout,
redirect: '/billLayout/influence/industry', redirect: '/billLayout/influence/industry',
meta: { meta: {
title: '影响分析' title: '影响分析'
...@@ -167,17 +168,25 @@ const routes = [ ...@@ -167,17 +168,25 @@ const routes = [
children: [ children: [
{ {
path: 'industry', path: 'industry',
name: 'InfluenceIndustry', name: 'BillInfluenceIndustry',
component: InfluenceIndustry, component: BillInfluenceIndustry,
meta: { title: '对华产业影响' } meta: { title: '对华产业影响' }
}, },
{ {
path: 'scientificResearch', path: 'scientificResearch',
name: 'InfluenceScientificResearch', name: 'BillInfluenceScientificResearch',
component: InfluenceScientificResearch, component: BillInfluenceScientificResearch,
meta: { title: '对华科研影响' } meta: { title: '对华科研影响' }
} }
] ]
},
{
path: 'relevantCircumstance',
name: 'BillRelevantCircumstance',
component: BillRelevantCircumstance,
meta: {
title: '相关情况'
}
} }
] ]
}, },
...@@ -212,8 +221,8 @@ const routes = [ ...@@ -212,8 +221,8 @@ const routes = [
children: [ children: [
{ {
path: 'overview', path: 'overview',
name: 'OverviewLayout', name: 'DecreeOverviewLayout',
component: OverviewLayout, component: DecreeOverviewLayout,
redirect: '/decreeLayout/overview/introduction', redirect: '/decreeLayout/overview/introduction',
meta: { meta: {
title: '政令概况' title: '政令概况'
...@@ -250,7 +259,7 @@ const routes = [ ...@@ -250,7 +259,7 @@ const routes = [
meta: { meta: {
title: '影响分析' title: '影响分析'
}, },
} }
] ]
}, },
...@@ -317,12 +326,12 @@ const routes = [ ...@@ -317,12 +326,12 @@ const routes = [
title: '深度挖掘' title: '深度挖掘'
}, },
}, },
] ]
}, },
] ]
const router = createRouter({ const router = createRouter({
......
...@@ -210,7 +210,7 @@ const mainHeaderBtnList = ref([ ...@@ -210,7 +210,7 @@ const mainHeaderBtnList = ref([
icon: icon4, icon: icon4,
activeIcon: icon4Active, activeIcon: icon4Active,
name: "相关情况", name: "相关情况",
path: "/billLayout/bill", path: "/billLayout/relevantCircumstance",
}, },
]); ]);
...@@ -239,10 +239,8 @@ onMounted(() => { ...@@ -239,10 +239,8 @@ onMounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.layout-container { .layout-container {
width: 1920px; width: 1920px;
height: 1080px; // height: 1080px;
// width: 100vw; height: 1016px;
// height: 100vh;
// overflow: auto;
background: rgba(249, 250, 252, 1); background: rgba(249, 250, 252, 1);
position: relative; position: relative;
.layout-header { .layout-header {
......
<template>
<div class="wrapper">
<div class="left">
<div class="box1">
<div class="box-header">
<div class="icon"></div>
<div class="title">{{ "相关实体" }}</div>
<div class="header-right">
<el-input
v-model="searchText"
placeholder="搜索内容"
:suffix-icon="Search"
size="small"
style="width: 150px"
/>
<el-select
v-model="releaseTime"
placeholder="选择发布时间"
style="width: 150px"
>
<el-option
v-for="item in releaseTimeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</div>
<div class="tool-box">
<div class="tool" @click="handleChangeChart(0)">
<img src="./assets/images/tool1.png" alt="" />
</div>
<div class="tool1" @click="handleChangeChart(1)">
<img src="./assets/images/tool2.png" alt="" />
</div>
<div class="tool" @click="handleChangeChart(0)">
<img src="./assets/images/tool3.png" alt="" />
</div>
</div>
<div class="box1-main" id="graphChart"></div>
<div class="box1-footer">
<div class="box1-footer-left">
<img src="./assets/images/footer-icon1.png" alt="" />
</div>
<div class="box1-footer-center">
{{
`美国《大而美法案》(OBBBA)通过系统性政策调整,对中国新能源产业链形成多维度冲击,同时倒逼产业链加速重构与技术创新。`
}}
</div>
<div class="box1-footer-right">
<img src="./assets/images/footer-icon2.png" alt="" />
</div>
</div>
</div>
</div>
<div class="right">
<div class="box2">
<div class="box-header">
<div class="icon"></div>
<div class="title">{{ "数据详情" }}</div>
<div class="header-right-icon">
<img src="./assets/images/header-right-icon.png" alt="" />
</div>
</div>
<div class="box2-main">
<div class="box3">
<div class="box-in-header">
<div class="header-in-icon">
<img src="./assets/images/header-icon1.png" alt="" />
</div>
<div class="header-in-title">{{ "科技法案" }}</div>
<div class="header-in-right">
<img src="./assets/images/down.png" alt="" />
</div>
</div>
<div class="box3-main">
<div
class="box3-item"
v-for="(item, index) in billList"
:key="index"
>
<div class="box3-item-left">
<img :src="item.img" alt="" />
</div>
<div class="box3-item-center">
<div class="title">{{ item.name }}</div>
<div class="time">{{ item.time }}</div>
</div>
<div
class="box3-item-right"
:class="{ tag1: item.status === 1, tag2: item.status === 2 }"
>
{{ item.tag }}
</div>
</div>
</div>
</div>
<div class="box4">
<div class="box-in-header">
<div class="header-in-icon">
<img src="./assets/images/header-icon2.png" alt="" />
</div>
<div class="header-in-title">{{ "科技政令" }}</div>
<div class="header-in-right">
<img src="./assets/images/down.png" alt="" />
</div>
</div>
<div class="box4-main">
<div
class="box4-item"
v-for="(item, index) in decreeList"
:key="index"
>
<div class="box4-item-left">
<div class="title">{{ item.title }}</div>
<div class="time">{{ item.time }}</div>
</div>
<div class="box4-item-right">{{ item.tag }}</div>
</div>
</div>
</div>
<div class="box5">
<div class="box-in-header">
<div class="header-in-icon">
<img src="./assets/images/header-icon3.png" alt="" />
</div>
<div class="header-in-title">{{ "科技智库" }}</div>
<div class="header-in-right">
<img src="./assets/images/down.png" alt="" />
</div>
</div>
<div class="box5-main">
<div
class="box5-item"
v-for="(item, index) in policyList"
:key="index"
>
<div class="box5-item-left">
<img :src="item.img" alt="" />
</div>
<div class="box5-item-center">
<div class="title">{{ item.title }}</div>
<div class="time">{{ item.time }}</div>
</div>
<div class="box5-item-right">
<img :src="item.logo" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { Search } from "@element-plus/icons-vue";
import getGraphChart from "./utils/graphChart";
import getTreeChart from "./utils/treeChart";
import Img1 from "./assets/images/img1.png";
import Img2 from "./assets/images/img2.png";
import Img3 from "./assets/images/img3.png";
import Img4 from "./assets/images/img4.png";
import Img5 from "./assets/images/img5.png";
import Img6 from "./assets/images/img6.png";
import Icon1 from "./assets/images/icon1.png";
import Icon2 from "./assets/images/icon2.png";
import CompanyImg from "./assets/images/symbol.png";
const searchText = ref("");
const releaseTime = ref("近五年");
const releaseTimeList = ref([
{
label: "近半年",
value: "近半年",
},
{
label: "近一年",
value: "近一年",
},
{
label: "近两年",
value: "近两年",
},
{
label: "近三年",
value: "近三年",
},
{
label: "近五年",
value: "近五年",
},
]);
const billList = ref([
{
name: "大而美法案",
time: "2025年7月4日",
tag: "人工智能",
status: 1,
img: Img1,
},
{
name: "汽车零部件25%关税实施规则",
time: "2025年7月4日",
tag: "能源",
status: 2,
img: Img2,
},
{
name: "小额豁免包裹政策调整",
time: "2025年7月4日",
tag: "能源",
status: 2,
img: Img3,
},
{
name: "NIH预算否决案",
time: "2025年7月4日",
tag: "能源",
status: 2,
img: Img4,
},
]);
const decreeList = ref([
{
title: "关于进一步延长TikTok执法宽限期的政令发布",
time: "2025年7月4日",
tag: "总统政令",
},
{
title: "修改对等关税税率以反映与中华人民共和国",
time: "2025年7月4日",
tag: "总统政令",
},
]);
const policyList = ref([
{
title: "中国对AI的转型产业政策",
time: "2025年7月4日",
img: Img5,
logo: Icon1,
},
{
title: "中美对抗、竞争和合作跨越人工智能XXXX",
time: "2025年7月4日",
img: Img6,
logo: Icon2,
},
]);
// 绘制echarts图表
const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId);
chartDom.removeAttribute("_echarts_instance_");
let chart = echarts.init(chartDom);
chart.setOption(option);
return chart;
};
const nodes = ref([
{
id: 0,
name: "泰丰先行",
// category: 0,
symbolSize: 30,
value: 8,
symbol: `image://${CompanyImg}`,
},
{
id: 1,
name: "国轩高科",
// category: 0,
symbolSize: 30,
value: 9,
symbol: `image://${CompanyImg}`,
},
{
id: 2,
name: "智方纳米",
// category: 2,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
},
{
id: 3,
name: "香百科技",
// category: 1,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 4,
name: "格林滨",
// category: 2,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 5,
name: "江西紫宸",
// category: 2,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
},
{
id: 6,
name: "紫江企业",
// category: 4,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 7,
name: "大而美法案",
// category: 4,
symbolSize: 50,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 8,
name: "比亚迪",
// category: 0,
symbolSize: 30,
value: 10,
symbol: `image://${CompanyImg}`,
},
{
id: 9,
name: "铜陵有色",
// category: 3,
symbolSize: 30,
value: 8,
symbol: `image://${CompanyImg}`,
},
{
id: 10,
name: "长盛精密",
// category: 1,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
},
{
id: 11,
name: "天合光能",
// category: 0,
symbolSize: 30,
value: 8,
symbol: `image://${CompanyImg}`,
},
{
id: 12,
name: "昆仑化学",
// category: 2,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 13,
name: "嘉源科技",
// category: 1,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: "华阳集团",
// category: 4,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
},
{
id: 15,
name: "海辰智能",
// category: 1,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
},
]);
const links = ref([
{ source: 0, target: 7 },
{ source: 1, target: 7 },
{ source: 1, target: 7 },
{ source: 8, target: 7 },
{ source: 8, target: 7 },
{ source: 2, target: 7 },
{ source: 2, target: 7 },
{ source: 3, target: 7 },
{ source: 3, target: 7 },
{ source: 3, target: 7 },
{ source: 4, target: 7 },
{ source: 4, target: 7 },
{ source: 5, target: 7 },
{ source: 6, target: 7 },
{ source: 9, target: 7 },
{ source: 10, target: 7 },
{ source: 11, target: 7 },
{ source: 12, target: 7 },
{ source: 13, target: 7 },
{ source: 14, target: 7 },
{ source: 15, target: 7 },
// { source: 0, target: 1, value: 1 },
// { source: 1, target: 8, value: 2 },
// { source: 1, target: 2, value: 1 },
// { source: 8, target: 11, value: 1 },
// { source: 8, target: 9, value: 1 },
// { source: 2, target: 5, value: 1 },
// { source: 2, target: 12, value: 1 },
// { source: 3, target: 10, value: 1 },
// { source: 3, target: 15, value: 1 },
// { source: 3, target: 13, value: 1 },
// { source: 4, target: 5, value: 1 },
// { source: 4, target: 12, value: 1 },
// { source: 5, target: 6, value: 1 },
// { source: 6, target: 14, value: 1 },
// { source: 7, target: 14, value: 1 },
// { source: 9, target: 10, value: 1 },
// { source: 10, target: 15, value: 1 },
// { source: 11, target: 13, value: 1 },
// { source: 12, target: 14, value: 1 },
]);
const treeData = ref([
{
id: 7,
name: "大而美法案",
// category: 4,
symbolSize: 50,
value: 5,
symbol: `image://${CompanyImg}`,
children: [
{
id: 0,
name: "泰丰先行",
// category: 0,
symbolSize: 30,
value: 8,
symbol: `image://${CompanyImg}`,
},
{
id: 1,
name: "国轩高科",
// category: 0,
symbolSize: 30,
value: 9,
symbol: `image://${CompanyImg}`,
},
{
id: 2,
name: "智方纳米",
// category: 2,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
},
{
id: 3,
name: "香百科技",
// category: 1,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 4,
name: "格林滨",
// category: 2,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 5,
name: "江西紫宸",
// category: 2,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
},
{
id: 6,
name: "紫江企业",
// category: 4,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 8,
name: "比亚迪",
// category: 0,
symbolSize: 30,
value: 10,
symbol: `image://${CompanyImg}`,
},
{
id: 9,
name: "铜陵有色",
// category: 3,
symbolSize: 30,
value: 8,
symbol: `image://${CompanyImg}`,
},
{
id: 10,
name: "长盛精密",
// category: 1,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
},
{
id: 11,
name: "天合光能",
// category: 0,
symbolSize: 30,
value: 8,
symbol: `image://${CompanyImg}`,
},
{
id: 12,
name: "昆仑化学",
// category: 2,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 13,
name: "嘉源科技",
// category: 1,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: "华阳集团",
// category: 4,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
},
{
id: 15,
name: "海辰智能",
// category: 1,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
},
],
},
]);
const handleChangeChart = (index) => {
if (index === 0) {
let graphChart = getGraphChart(nodes.value, links.value);
setChart(graphChart, "graphChart");
} else if (index === 1) {
let treeChart = getTreeChart(treeData.value);
setChart(treeChart, "graphChart");
}
};
onMounted(() => {
let graphChart = getGraphChart(nodes.value, links.value);
setChart(graphChart, "graphChart");
// let treeChart = getTreeChart(treeData.value);
// setChart(treeChart, "graphChart");
});
</script>
<style lang="scss" scoped>
.wrapper {
width: 100%;
height: 100%;
display: flex;
padding: 16px 160px;
justify-content: space-between;
.box-header {
height: 45px;
display: flex;
position: relative;
.icon {
margin-top: 20px;
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 16px;
margin-top: 16px;
height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
.header-right {
display: flex;
position: absolute;
right: 17px;
top: 14px;
width: 312px;
justify-content: space-between;
}
.header-right-icon {
position: absolute;
top: 14px;
right: 12px;
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
}
.box-in-header {
width: 484px;
height: 48px;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
border-radius: 2px;
background: rgba(247, 248, 249, 1);
display: flex;
align-items: center;
position: relative;
.header-in-icon {
width: 23px;
height: 21px;
margin-left: 20px;
img {
width: 100%;
height: 100%;
}
}
.header-in-title {
margin-left: 15px;
height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
.header-in-right {
position: absolute;
top: 12px;
right: 16px;
width: 12px;
height: 8px;
img {
width: 100%;
height: 100%;
}
}
}
.left {
width: 1068px;
height: 847px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box1 {
position: relative;
.tool-box {
position: absolute;
left: 21px;
top: 59px;
width: 96px;
height: 28px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
z-index: 9999;
display: flex;
align-items: center;
justify-content: space-around;
.tool {
width: 14px;
height: 14px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.tool1 {
width: 16px;
height: 16px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
.box1-main {
width: 1068px;
height: 730px;
// background: orange;
}
.box1-footer {
margin: 13px auto;
display: flex;
width: 1036px;
height: 40px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
padding: 6px 12px;
align-items: center;
.box1-footer-left {
width: 19px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.box1-footer-center {
margin-left: 13px;
height: 24px;
width: 943px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.box1-footer-right {
margin-left: 13px;
width: 24px;
height: 24px;
border-radius: 12px;
background: rgba(231, 243, 255, 1);
img {
width: 12px;
height: 12px;
margin-top: 6px;
margin-left: 6px;
}
}
}
}
}
.right {
width: 520px;
height: 848px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box2 {
.box2-main {
margin-top: 10px;
margin-left: 17px;
.box3 {
width: 484px;
height: 320px;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
.box3-item {
width: 445px;
margin-top: 10px;
display: flex;
margin-left: 19px;
align-items: center;
position: relative;
.box3-item-left {
width: 36px;
height: 48px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 2px;
img {
width: 100%;
height: 100%;
}
}
.box3-item-center {
margin-left: 10px;
width: 300px;
.title {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 30px;
}
.time {
height: 24px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
.box3-item-right {
position: absolute;
top: 0;
right: 0;
height: 22px;
box-sizing: border-box;
border-radius: 4px;
line-height: 22px;
padding: 0 8px;
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
}
.tag1 {
background: rgba(230, 255, 251, 1);
border: 1px solid rgba(135, 232, 222, 1);
color: rgba(19, 168, 168, 1);
}
.tag2 {
background: var(--tag-btn1-bg-color);
border: 1px solid var(--tag-btn1-border-color);
color: var(--tag-btn1-text-color);
}
}
}
.box4 {
margin-top: 16px;
width: 484px;
height: 190px;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
.box4-main {
height: 140px;
.box4-item {
margin-left: 20px;
margin-top: 11px;
display: flex;
width: 444px;
height: 53px;
justify-content: space-between;
.box4-item-left {
width: 309px;
.title {
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
height: 24px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
.box4-item-right {
height: 24px;
padding: 0 20px;
box-sizing: border-box;
border: 1px solid rgba(186, 224, 255, 1);
border-radius: 4px;
background: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 24px;
}
}
}
}
.box5 {
margin-top: 16px;
width: 484px;
height: 190px;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
.box5-main {
height: 142px;
overflow-y: auto;
.box5-item {
display: flex;
width: 480px;
height: 53px;
margin-top: 12px;
.box5-item-left {
width: 36px;
height: 48px;
margin-left: 21px;
margin-top: 3px;
img {
width: 100%;
height: 100%;
}
}
.box5-item-center {
margin-left: 10px;
width: 304px;
.title {
margin-top: 2px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
width: 304px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
margin-top: 2px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
.box5-item-right {
margin-left: 82px;
margin-top: 5px;
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
}
}
}
}
</style>
\ No newline at end of file
const getGraphChart = (nodes, links) => {
const option = {
// title: {
// text: '企业关系网络',
// subtext: '节点图标表示企业,箭头表示关联方向',
// top: 'top',
// left: 'center',
// textStyle: {
// fontSize: 20,
// color: '#2c3e50'
// }
// },
// tooltip: {
// formatter: function (params) {
// if (params.dataType === 'node') {
// return `<div style="font-weight:bold;margin-bottom:5px">${params.data.name}</div>
// <div>类别: ${categories[params.data.category].name}</div>
// <div>关联度: ${params.data.value}</div>`;
// } else {
// return `<div>${nodes[params.data.source].name} → ${nodes[params.data.target].name}</div>
// <div>关联强度: ${params.data.value}</div>`;
// }
// }
// },
legend: {
// data: categories.map(c => c.name),
show: false,
top: 40,
textStyle: {
fontSize: 12
}
},
animation: true,
animationDuration: 1000,
animationEasing: 'cubicOut',
series: [{
type: 'graph',
itemStyle: {
color: '#73C0DE'
},
layout: 'force',
data: nodes,
links: links,
// categories: categories,
roam: true,
label: {
show: true,
position: 'bottom',
formatter: '{b}',
fontSize: 12,
fontWeight: 'bold',
// backgroundColor: 'rgba(255,255,255,0.8)',
padding: [4, 6],
borderRadius: 4
},
lineStyle: {
color: 'source',
curveness: 0,
width: 2,
type: 'dashed',
color: '#AED6FF'
},
edgeSymbol: ['none', 'arrow'],
edgeSymbolSize: [0, 10],
emphasis: {
focus: 'adjacency',
lineStyle: {
width: 4
},
label: {
show: true,
fontSize: 14
}
},
force: {
repulsion: 300,
gravity: 0,
edgeLength: 300
}
}],
// color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de']
};
return option
}
export default getGraphChart
\ No newline at end of file
const getTreeChart = (treeData) => {
const option = {
series: [{
type: 'tree',
layout: 'orthogonal', // 从上到下布局
orient: 'TB', // Top to Bottom
data: treeData,
top: '10%',
bottom: '5%',
left: '10%',
right: '10%',
symbol: 'circle',
symbolSize: 40,
label: {
position: 'bottom',
verticalAlign: 'middle',
align: 'center'
},
leaves: {
label: {
position: 'top',
verticalAlign: 'middle',
align: 'center'
}
},
lineStyle: {
color: '#ccc',
width: 2,
type: 'dashed' // 虚线
},
emphasis: {
focus: 'descendant'
},
expandAndCollapse: false,
initialTreeDepth: 3
}]
};
return option
}
export default getTreeChart
\ No newline at end of file
...@@ -814,69 +814,45 @@ const curDecreeList = ref([ ...@@ -814,69 +814,45 @@ const curDecreeList = ref([
{ {
type: "总统政令", type: "总统政令",
status: 1, status: 1,
title: "关于进一步延长TikTok执法宽限期的行政令", title: "为国家安全部署先进核反应堆技术",
time: "2025年9月16日", time: "2025年9月16日",
}, },
{ {
type: "总统政令", type: "总统政令",
status: 1, status: 1,
title: "关于进一步延长TikTok执法宽限期的行政令", title: "修改对等关税税率以反映与中华人民共和国会谈情况的行政令",
time: "2025年9月16日", time: "2025年9月15日",
}, },
{ {
type: "总统政令", type: "总统政令",
status: 1, status: 1,
title: "关于进一步延长TikTok执法宽限期的行政令", title: "调整互惠关税范围,并制定实施贸易和安全协议的程序",
time: "2025年9月16日", time: "2025年9月15日",
}, },
{ {
type: "总统政令", type: "总统政令",
status: 1, status: 1,
title: "关于进一步延长TikTok执法宽限期的行政令", title: "持续努力加强国家网络安全,并修订第13694号行政命令和第14144号行政命令",
time: "2025年9月16日", time: "2025年9月14日",
}, },
{ {
type: "总统政令", type: "总统备忘录",
status: 3, status: 3,
title: "关于进一步延长TikTok执法宽限期的行政令", title: "通过第232条款行动确保加工关键矿物及衍生产品的国家安全与经济韧性",
time: "2025年9月16日", time: "2025年9月14日",
},
{
type: "总统政令",
status: 1,
title: "关于进一步延长TikTok执法宽限期的行政令",
time: "2025年9月16日",
}, },
{ {
type: "总统政令", type: "提名与任命",
status: 2, status: 2,
title: "关于进一步延长TikTok执法宽限期的行政令", title: "终止对不可靠、非受控能源的市场扭曲补贴",
time: "2025年9月16日", time: "2025年9月11日",
},
{
type: "总统政令",
status: 1,
title: "关于进一步延长TikTok执法宽限期的行政令",
time: "2025年9月16日",
},
{
type: "总统政令",
status: 3,
title: "关于进一步延长TikTok执法宽限期的行政令",
time: "2025年9月16日",
},
{
type: "总统政令",
status: 3,
title: "关于进一步延长TikTok执法宽限期的行政令",
time: "2025年9月16日",
}, },
{ {
type: "总统政令", type: "总统政令",
status: 1, status: 1,
title: "关于进一步延长TikTok执法宽限期的行政令", title: "对所有国家暂停免关税待遇",
time: "2025年9月16日", time: "2025年9月6日",
}, }
]); ]);
const releaseTime = ref("近一年发布"); const releaseTime = ref("近一年发布");
...@@ -931,11 +907,7 @@ const activeHylyId = ref(""); ...@@ -931,11 +907,7 @@ const activeHylyId = ref("");
// }; // };
const handleClickCate = (cate) => { const handleClickCate = (cate) => {
console.log(cate); activeCate.value = cate;
activeCate.value = cate.hylymc;
activeHylyId.value = cate.hylyid;
handleGetBillsByType();
}; };
const activeNavIndex = ref(0); const activeNavIndex = ref(0);
...@@ -2217,9 +2189,11 @@ onMounted(async () => { ...@@ -2217,9 +2189,11 @@ onMounted(async () => {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.btn-box { .btn-box {
margin-top: 10px;
width: 1000px; width: 1000px;
display: flex; display: flex;
.btn { .btn {
height: 42px;
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
...@@ -2254,17 +2228,17 @@ onMounted(async () => { ...@@ -2254,17 +2228,17 @@ onMounted(async () => {
} }
.home-main-footer-main { .home-main-footer-main {
width: 1600px; width: 1600px;
height: 687px; height: 685px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2); box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
margin: 0 auto; margin: 0 auto;
box-sizing: border-box; box-sizing: border-box;
padding: 20px; padding: 10px 20px 0 20px;
overflow-y: auto; overflow-y: auto;
.main-item { .main-item {
display: flex; display: flex;
height: 84px; height: 84px;
border-top: 1px solid rgba(234, 236, 238, 1); border-bottom: 1px solid rgba(234, 236, 238, 1);
.main-item-left { .main-item-left {
width: 105px; width: 105px;
.left-box { .left-box {
......
...@@ -241,7 +241,7 @@ ...@@ -241,7 +241,7 @@
<el-select <el-select
v-model="curAreaYear" v-model="curAreaYear"
placeholder="选择发布时间" placeholder="选择发布时间"
style="width: 120px" style="width: 100px"
> >
<el-option <el-option
v-for="item in areaYearList" v-for="item in areaYearList"
...@@ -1444,9 +1444,10 @@ onMounted(async () => { ...@@ -1444,9 +1444,10 @@ onMounted(async () => {
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1); box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
.box4-header { .box4-header {
width: 452px; width: 521px;
margin: 0 auto;
height: 53px; height: 53px;
box-sizing: border-box;
padding: 0 20px;
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex; display: flex;
position: relative; position: relative;
...@@ -1461,7 +1462,7 @@ onMounted(async () => { ...@@ -1461,7 +1462,7 @@ onMounted(async () => {
} }
.header-title { .header-title {
margin-top: 16px; margin-top: 16px;
margin-left: 26px; margin-left: 15px;
height: 22px; height: 22px;
color: rgba(20, 89, 187, 1); color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -1471,7 +1472,7 @@ onMounted(async () => { ...@@ -1471,7 +1472,7 @@ onMounted(async () => {
} }
.box4-header-right { .box4-header-right {
position: absolute; position: absolute;
right: 0; right: 20px;
top: 10px; top: 10px;
} }
} }
......
...@@ -12,6 +12,7 @@ const getBarChart1 = (nameList, valueList) => { ...@@ -12,6 +12,7 @@ const getBarChart1 = (nameList, valueList) => {
}, },
xAxis: { xAxis: {
type: 'value', type: 'value',
splitLine: { splitLine: {
show: false show: false
}, },
...@@ -20,6 +21,7 @@ const getBarChart1 = (nameList, valueList) => { ...@@ -20,6 +21,7 @@ const getBarChart1 = (nameList, valueList) => {
yAxis: { yAxis: {
type: 'category', type: 'category',
data: nameList, data: nameList,
inverse: true,
splitLine: { splitLine: {
show: false show: false
}, },
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论