Skip to content

R
risk-monitor
提交 259b19f0 authored 作者: yanpeng's avatar yanpeng
浏览文件
操作

merge master

上级 d48cb135 4b2ec62b
显示空白字符变更
内嵌 并排
正在显示 包含 2848 行增加 和 615 行删除
src/main.js
浏览文件 @ 259b19f0
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import CardTitle from './components/CardTitle.vue'
import { withFallbackImage } from './utils'
// import './styles/var.scss'
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import CardTitle from "./components/CardTitle.vue";
import { withFallbackImage } from "./utils";
import "./styles/scrollbar.css";
import "./styles/elui.css";
import "./styles/main.css";
const app = createApp(App)
const app = createApp(App);
// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
app.component(key, component);
}
// 注册全局函数
app.config.globalProperties.$withFallbackImage = withFallbackImage
app.use(router)
app.use(ElementPlus)
app.component('CardTitle', CardTitle)
app.mount('#app')
\ No newline at end of file
app.config.globalProperties.$withFallbackImage = withFallbackImage;
app.use(router);
app.use(ElementPlus);
app.component("CardTitle", CardTitle);
app.mount("#app");
src/router/index.js
浏览文件 @ 259b19f0
......@@ -5,23 +5,19 @@ import ThinkTankDetail from "@/views/ThinkTankDetail/index.vue";
import ReportDetail from "@/views/ReportDetail/index.vue";
// 法案相关组件
import BillHome from "@/views/billHome/index.vue";
import BillLayoutContainer from "@/views/billLayout/index.vue";
import BillHome from "@/views/bill/billHome/index.vue";
import BillLayoutContainer from "@/views/bill/billLayout/index.vue";
import BillLayout from "@/views/bill/index.vue";
import BillIntroduction from "@/views/bill/introdoction/index.vue";
import BillBackground from "@/views/bill/background/index.vue";
import BillTemplate from "@/views/bill/template/index.vue";
// 深度挖掘相关组件
import DeepDigLayout from "@/views/deepDig/index.vue";
import DeepDigProcessOverview from "@/views/deepDig/processOverview/index.vue";
import DeepDigProcessAnalysis from "@/views/deepDig/processAnalysis/index.vue";
import DeepDigProgressOverview from "@/views/deepDig/progressAnalysis/index.vue";
// 影响分析相关组件
import InfluenceLayout from "@/views/influence/index.vue";
import InfluenceIndustry from "@/views/influence/industry/index.vue";
import InfluenceScientificResearch from "@/views/influence/scientificResearch/index.vue";
import DeepDigLayout from "@/views/bill/deepDig/index.vue";
import DeepDigProcessOverview from "@/views/bill/deepDig/processOverview/index.vue";
import DeepDigProcessAnalysis from "@/views/bill/deepDig/processAnalysis/index.vue";
import DeepDigProgressOverview from "@/views/bill/deepDig/progressAnalysis/index.vue";
import InfluenceLayout from "@/views/bill/influence/index.vue";
import InfluenceIndustry from "@/views/bill/influence/industry/index.vue";
import InfluenceScientificResearch from "@/views/bill/influence/scientificResearch/index.vue";
// 出口管制
import ExportControl from "@/views/exportControl/index.vue";
......@@ -33,12 +29,16 @@ import OverviewLayout from "@/views/decree/decreeLayout/overview/index.vue";
import DecreeIntroduction from "@/views/decree/decreeLayout/overview/introduction/index.vue";
import DecreeBackground from "@/views/decree/decreeLayout/overview/background/index.vue";
import DecreeDeepDig from "@/views/decree/decreeLayout/deepdig/index.vue";
import DecreeInfluence from "@/views/decree/decreeLayout/influence/index.vue";
// 市场准入限制
import MarketAccessRestrictions from "@/views/marketAccessRestrictions/marketAccessHome/index.vue";
import MarketAccessLayout from "@/views/marketAccessRestrictions/marketAccessLayout/index.vue";
import MarketAccessOverview from "@/views/marketAccessRestrictions/marketAccessLayout/overview/index.vue";
import MarketAccessCase from "@/views/marketAccessRestrictions/marketAccessLayout/case/index.vue";
import MarketSingleCaseLayout from "@/views/marketAccessRestrictions/singleCaseLayout/index.vue";
import MarketSingleCaseOverview from "@/views/marketAccessRestrictions/singleCaseLayout/overview/index.vue";
import MarketSingleCaseDeepdig from "@/views/marketAccessRestrictions/singleCaseLayout/deepdig/index.vue";
const routes = [
// 智库系统的主要路由
......@@ -239,31 +239,16 @@ const routes = [
meta: {
title: "深度挖掘"
}
},
// 影响分析路由
{
path: "influence",
name: "DecreeInfluence",
component: DecreeInfluence,
meta: {
title: "影响分析"
}
}
// // 影响分析路由
// {
// path: 'influence',
// name: 'InfluenceLayout',
// component: InfluenceLayout,
// redirect: '/billLayout/influence/industry',
// meta: {
// title: '影响分析'
// },
// children: [
// {
// path: 'industry',
// name: 'InfluenceIndustry',
// component: InfluenceIndustry,
// meta: { title: '对华产业影响' }
// },
// {
// path: 'scientificResearch',
// name: 'InfluenceScientificResearch',
// component: InfluenceScientificResearch,
// meta: { title: '对华科研影响' }
// }
// ]
// }
]
},
......@@ -303,8 +288,33 @@ const routes = [
}
]
},
,
{
path: "/marketSingleCaseLayout",
name: "MarketSingleCaseLayout",
component: MarketSingleCaseLayout,
redirect: "/marketSingleCaseLayout/overview",
meta: {
title: "单次调查案件布局"
},
children: [
{
path: "overview",
name: "MarketSingleCaseOverview",
component: MarketSingleCaseOverview,
meta: {
title: "调查简介"
}
},
{
path: "deepdig",
name: "MarketSingleCaseDeepdig",
component: MarketSingleCaseDeepdig,
meta: {
title: "深度挖掘"
}
}
]
},
// 转移过来的页面
{
path: "/analysis",
......
src/styles/elui.css 0 → 100644
浏览文件 @ 259b19f0
:deep(.el-checkbox__input.is-checked+.el-checkbox__label) {
color: red !important;
}
:root {
--el-color-primary: rgba(10, 87, 166, 1);
/* --el-color-success: #1dd1a1;
--el-border-radius-base: 8px;
--el-font-size-base: 14px; */
}
\ No newline at end of file
src/styles/main.css 0 → 100644
浏览文件 @ 259b19f0
:root {
--color-main-active: rgba(10, 87, 166, 1);
--color-main-primay: rgba(59, 65, 75, 1);
/* 普通按钮颜色 */
--btn-plain-border-color: rgba(230, 231, 232, 1);
--btn-plain-bg-color: rgba(255, 255, 255, 1);
--btn-plain-text-color: rgba(59, 65, 75, 1);
/* 选中按钮颜色 */
--btn-active-border-color: rgba(10, 87, 166, 1);
--btn-active-bg-color: rgba(231, 243, 255, 1);
--btn-active-text-color: rgba(10, 87, 166, 1);
/* 标签按钮颜色 */
--tag-btn1-bg-color: rgba(255, 241, 240, 1);
--tag-btn1-border-color: rgba(255, 204, 199, 1);
--tag-btn1-text-color: rgba(255, 77, 79, 1);
--tag-btn2-bg-color: rgba(255, 251, 230, 1);
--tag-btn2-border-color: rgba(255, 241, 184, 1);
--tag-btn2-text-color: rgba(250, 173, 20, 1);
--tag-btn2-bg-color: rgba(230, 244, 255, 1);
--tag-btn2-border-color: rgba(186, 224, 255, 1);
--tag-btn2-text-color: rgba(22, 119, 255, 1);
--tag-btn3-bg-color: rgba(246, 255, 237, 1);
--tag-btn3-border-color: rgba(217, 247, 190, 1);
--tag-btn3-text-color: rgba(82, 196, 26, 1);
}
\ No newline at end of file
src/styles/scrollbar.css 0 → 100644
浏览文件 @ 259b19f0
/* 全局滚动条样式 */
* {
scrollbar-width: thin;
scrollbar-color: #c1c1c1 #f1f1f1;
}
/* Webkit 浏览器 */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #f8f9fa;
border-radius: 6px;
}
::-webkit-scrollbar-thumb {
background: #6c757d;
border-radius: 6px;
border: 2px solid #f8f9fa;
}
::-webkit-scrollbar-thumb:hover {
background: #495057;
}
::-webkit-scrollbar-thumb:active {
background: #343a40;
}
::-webkit-scrollbar-corner {
background: #f8f9fa;
}
/* 特定元素的滚动条样式 */
.el-scrollbar__bar {
z-index: 9999;
}
/* Element UI 组件滚动条优化 */
.el-table__body-wrapper::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
background: #909399;
border-radius: 4px;
}
.el-select-dropdown .el-scrollbar__wrap {
scrollbar-width: thin;
scrollbar-color: #c1c1c1 #f1f1f1;
}
\ No newline at end of file
src/views/bill/background/index.vue
浏览文件 @ 259b19f0
......@@ -80,9 +80,8 @@
</div>
</div>
<div class="box2-footer">
<div class="box2-footer-text">查看更多</div>
<div class="box2-footer-icon">
<img src="./assets/images/more.png" alt="" />
<div class="btn-more">
<img src="../assets/images/btn-more.png" alt="" />
</div>
</div>
</div>
......@@ -150,15 +149,7 @@
<div class="right-box2">
<div class="right-box2-header">
<div class="title">
<span
style="
color: rgb(22, 119, 255);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
"
>"传统能源"</span
>涉及议员动态 >
<span class="title-active">"传统能源"</span>涉及议员动态 >
</div>
</div>
<div class="right-box2-center">
......@@ -177,9 +168,8 @@
</div>
</div>
<div class="right-box2-footer">
<div class="box2-footer-text">查看更多</div>
<div class="box2-footer-icon">
<img src="./assets/images/more.png" alt="" />
<div class="btn-more">
<img src="../assets/images/btn-more.png" alt="" />
</div>
</div>
</div>
......@@ -205,7 +195,11 @@ import userIcon from "./assets/icons/user-icon.png";
import userIcon1 from "./assets/icons/user-icon1.png";
import userIcon2 from "./assets/icons/user-icon2.png";
import { getBillBackground, getBillEvent, getBillPersonAnalyze } from "@/api/bill";
import {
getBillBackground,
getBillEvent,
getBillPersonAnalyze,
} from "@/api/bill";
const box1BtnActive = ref(1);
const handleClickBox1Btn = (index) => {
......@@ -220,10 +214,10 @@ const handleClickBox1Btn = (index) => {
const box2BtnActive = ref(1);
const handleClickBox2Btn = (index) => {
box2BtnActive.value = index;
if(index === 1) {
handleGetBillPersonAnalyze(true)
if (index === 1) {
handleGetBillPersonAnalyze(true);
} else {
handleGetBillPersonAnalyze(false)
handleGetBillPersonAnalyze(false);
}
};
......@@ -249,7 +243,7 @@ const aboutUserList = ref([
const backgroundList = ref([
{
id: window.sessionStorage.getItem('billId'),
id: window.sessionStorage.getItem("billId"),
bjnr: "将中国跨境电商描述为“利用低价商品冲击美国市场、规避关税监管”",
},
{
......@@ -433,7 +427,7 @@ const wordCloudData = [
const handleGetBillBackground = async (cRelated) => {
const params = {
cRelated: cRelated,
id: window.sessionStorage.getItem('billId'),
id: window.sessionStorage.getItem("billId"),
currentPage: 0,
pageSize: 10,
};
......@@ -445,58 +439,52 @@ const handleGetBillBackground = async (cRelated) => {
};
// 获取相关事件
const handleGetRelatedEvent = async() => {
const handleGetRelatedEvent = async () => {
const params = {
id: 1
}
id: 1,
};
try {
const res = await getBillEvent(params)
console.log('相关事件',res);
eventList.value = res.data
eventList.value.forEach((item,index) => {
if(index === 0) {
item.image = event1
} else if(index === 1) {
item.image = event2
} else if(index===2) {
item.image = event3
} else if(index ===3) {
item.image = event4
const res = await getBillEvent(params);
console.log("相关事件", res);
eventList.value = res.data;
eventList.value.forEach((item, index) => {
if (index === 0) {
item.image = event1;
} else if (index === 1) {
item.image = event2;
} else if (index === 2) {
item.image = event3;
} else if (index === 3) {
item.image = event4;
} else {
item.image = event5
item.image = event5;
}
})
} catch (error) {
}
}
});
} catch (error) {}
};
// 议员相关性分析
const handleGetBillPersonAnalyze = async (isOppose) => {
const params = {
id: window.sessionStorage.getItem('billId'),
isOppose: isOppose
}
id: window.sessionStorage.getItem("billId"),
isOppose: isOppose,
};
try {
const res = await getBillPersonAnalyze(params)
console.log('议员相关性分析', res);
personList.value = res.data
personList.value.forEach(item => {
item.image = user1
item.icon = userIcon
item.icon1 = userIcon1
})
} catch (error) {
}
}
const res = await getBillPersonAnalyze(params);
console.log("议员相关性分析", res);
personList.value = res.data;
personList.value.forEach((item) => {
item.image = user1;
item.icon = userIcon;
item.icon1 = userIcon1;
});
} catch (error) {}
};
onMounted(() => {
handleGetBillBackground(true);
handleGetRelatedEvent()
handleGetBillPersonAnalyze(true)
handleGetRelatedEvent();
handleGetBillPersonAnalyze(true);
});
</script>
......@@ -515,14 +503,14 @@ onMounted(() => {
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(22, 119, 255, 1);
background: var(--color-main-active);
}
.title {
margin-left: 22px;
margin-top: 20px;
height: 16px;
line-height: 16px;
color: rgba(22, 119, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 600;
......@@ -576,16 +564,16 @@ onMounted(() => {
display: flex;
margin-top: 8px;
.id {
width: 18px;
height: 18px;
border-radius: 9px;
width: 24px;
height: 24px;
border-radius: 12px;
background: rgba(231, 241, 255);
color: #1677ff;
color: var(--color-main-active);
text-align: center;
line-height: 18px;
line-height: 24px;
font-size: 12px;
font-weight: bold;
margin: 15px 16px 15px 18px;
font-weight: 400;
margin: 12px 16px 12px 18px;
}
.title {
width: 440px;
......@@ -702,13 +690,14 @@ onMounted(() => {
margin-top: 7px;
display: flex;
justify-content: center;
.box2-footer-text {
color: rgba(22, 119, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
margin-right: 4px;
.btn-more {
width: 108px;
height: 32px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
}
......@@ -724,7 +713,6 @@ onMounted(() => {
.background-wrap-right-main {
.right-box1 {
height: 365px;
border-bottom: 1px solid rgba(243, 243, 244, 1);
.right-box1-header {
height: 22px;
margin-left: 22px;
......@@ -895,7 +883,7 @@ onMounted(() => {
.right-box2-header {
height: 22px;
margin-left: 22px;
padding-top: 19px;
padding-top: 10px;
display: flex;
.icon {
margin: 1px 12px 3px 0;
......@@ -915,6 +903,12 @@ onMounted(() => {
line-height: 22px;
letter-spacing: 0px;
text-align: left;
.title-active {
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
}
}
}
.right-box2-center {
......@@ -963,13 +957,14 @@ onMounted(() => {
margin-top: 7px;
display: flex;
justify-content: center;
.box2-footer-text {
color: rgba(22, 119, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
margin-right: 4px;
.btn-more {
width: 108px;
height: 32px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
}
......
src/views/billHome/index.vue → src/views/bill/billHome/index.vue
浏览文件 @ 259b19f0
<template>
<div class="home-wrapper">
<div class="home-main">
<div class="home-main-header">
<div class="home-main-header-top">
<div class="home-header">
<span>国家科技安全 </span>> <span>中美博弈概览 </span>>
<span style="color: #1459bb; font-weight: bold">科技法案 </span>
<span>科技法案 </span>
</div>
<div class="home-main">
<div class="home-main-header">
<div class="home-main-header-center">
<el-input
v-model="input"
......@@ -104,7 +104,7 @@
<div class="box1-main-left-info2">
<div
class="time-line"
:style="{ height: 38 * 4 + 'px' }"
:style="{ height: 38 * 3 + 'px' }"
></div>
<div
class="info2-item"
......@@ -180,9 +180,11 @@
<div class="icon">
<img src="./assets/images/box2-header-icon.png" alt="" />
</div>
<div class="title">
<div class="text">{{ "风险信号" }}</div>
<div class="num">{{ warningList.length }}</div>
<div class="more">{{ "更多 >" }}</div>
</div>
<div class="more">{{ "更多 +" }}</div>
</div>
<div class="box2-main">
<div
......@@ -242,7 +244,7 @@
<div class="header-icon">
<img src="./assets/images/box4-header-icon.png" alt="" />
</div>
<div class="header-title">{{ "法案趋势" }}</div>
<div class="header-title">{{ "关键条款" }}</div>
</div>
<div class="box4-main">
<div
......@@ -268,6 +270,7 @@
</div>
<div class="home-main-footer">
<div class="home-main-footer-header">
<div class="btn-wrapper">
<div class="btn-box">
<div
class="btn"
......@@ -279,6 +282,8 @@
{{ cate.hylymc }}
</div>
</div>
</div>
<div class="select-box">
<el-select
v-model="releaseTime"
......@@ -385,7 +390,7 @@ const curBill = ref({
});
const handleClickToDetail = () => {
window.sessionStorage.setItem('billId', curBill.value.billId)
window.sessionStorage.setItem("billId", curBill.value.billId);
router.push("/billLayout");
};
......@@ -636,7 +641,7 @@ const handleClickCate = (cate) => {
activeCate.value = cate.hylymc;
activeHylyId.value = cate.hylyid;
handleGetBillsByType()
handleGetBillsByType();
};
const navList = ref([
......@@ -764,6 +769,18 @@ onMounted(async () => {
box-shadow: none;
}
.home-wrapper {
.home-header {
height: 64px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
line-height: 64px;
background: url("./assets/images/header-bg.png");
box-sizing: border-box;
padding-left: 160px;
}
.home-main {
width: 1400px;
margin: 0 auto;
......@@ -773,15 +790,6 @@ onMounted(async () => {
display: flex;
flex-direction: column;
align-items: center;
.home-main-header-top {
height: 30px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
margin-top: 43px;
}
.home-main-header-center {
margin-top: 13px;
width: 960px;
......@@ -865,8 +873,6 @@ onMounted(async () => {
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: #fff;
box-sizing: border-box;
padding-left: 31px;
padding-right: 41px;
position: relative;
.box1-left {
position: absolute;
......@@ -909,10 +915,12 @@ onMounted(async () => {
}
}
.box1-header {
height: 53px;
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 0 40px 0 30px;
.box1-header-left {
display: flex;
.icon {
......@@ -925,14 +933,16 @@ onMounted(async () => {
}
}
.title {
height: 22px;
width: 112px;
height: 48px;
background: var(--color-main-active);
margin-left: 18px;
margin-top: 16px;
color: rgba(20, 89, 187, 1);
color: #fff;
font-family: Microsoft YaHei;
font-size: 16px;
font-size: 20px;
font-weight: 700;
line-height: 22px;
line-height: 48px;
text-align: center;
}
}
.box1-header-right {
......@@ -950,6 +960,8 @@ onMounted(async () => {
display: flex;
height: 354px;
margin-top: 22px;
box-sizing: border-box;
padding-left: 31px;
.box1-main-left {
margin-left: 37px;
// flex: 1;
......@@ -966,7 +978,11 @@ onMounted(async () => {
margin-top: 17px;
display: flex;
.info-box {
padding: 1px 8px;
height: 30px;
width: 80px;
text-align: center;
overflow: hidden;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(186, 224, 255, 1);
border-radius: 4px;
......@@ -975,7 +991,7 @@ onMounted(async () => {
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 20px;
line-height: 30px;
margin-right: 8px;
}
.info1 {
......@@ -1035,13 +1051,13 @@ onMounted(async () => {
.box1-main-left-info2 {
margin-top: 21px;
height: 200px;
width: 100%;
width: 400px;
position: relative;
.time-line {
position: absolute;
z-index: 0;
top: 15px;
left: 5px;
left: 4px;
width: 2px;
background: #e6e7e8;
}
......@@ -1050,6 +1066,7 @@ onMounted(async () => {
margin-bottom: 8px;
height: 30px;
display: flex;
// background: orange;
.item-icon {
margin-top: 2px;
width: 10px;
......@@ -1057,8 +1074,8 @@ onMounted(async () => {
position: relative;
z-index: 1;
img {
width: 100%;
height: 100%;
width: 10px;
height: 10px;
}
}
.itemTimeActive {
......@@ -1079,7 +1096,7 @@ onMounted(async () => {
line-height: 30px;
}
.item-title {
margin-left: 17px;
margin-left: 10px;
width: 295px;
height: 30px;
color: rgba(132, 136, 142, 1);
......@@ -1092,8 +1109,9 @@ onMounted(async () => {
}
}
.box1-main-right {
flex: 1;
margin-left: 20px;
margin-top: 50px;
height: 270px;
width: 350px;
border-radius: 4px;
overflow: hidden;
position: relative;
......@@ -1102,9 +1120,8 @@ onMounted(async () => {
height: 100%;
}
.inner-box {
width: 458px;
width: 330px;
height: 93px;
// backdrop-filter: blur(80px);
background: rgba(10, 18, 30, 0.75);
position: absolute;
left: 0;
......@@ -1115,24 +1132,33 @@ onMounted(async () => {
height: 30px;
display: flex;
.inner-box-title {
width: 360px;
width: 270px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inner-box-time {
width: 60px;
height: 30px;
color: rgba(255, 255, 255, 0.65);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.inner-box-content {
width: 418px;
width: 330px;
height: 40px;
overflow: hidden;
color: rgba(255, 255, 255, 0.8);
font-family: Microsoft YaHei;
font-size: 14px;
......@@ -1145,50 +1171,58 @@ onMounted(async () => {
}
.box2 {
flex: 1;
padding-right: 20px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
position: relative;
.box2-header {
height: 54px;
height: 48px;
display: flex;
box-sizing: border-box;
padding-right: 20px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.icon {
width: 24px;
height: 22px;
margin-left: 33px;
margin-left: 18px;
margin-top: 18px;
img {
width: 100%;
height: 100%;
}
}
.title {
margin-left: 18px;
width: 148px;
height: 48px;
background: rgba(206, 79, 81, 1);
display: flex;
.text {
margin-left: 22px;
margin-top: 16px;
margin-left: 16px;
height: 22px;
color: rgba(20, 89, 187, 1);
color: #fff;
font-family: Microsoft YaHei;
font-size: 16px;
font-size: 20px;
font-weight: 700;
line-height: 22px;
line-height: 48px;
}
.num {
width: 24px;
height: 16px;
height: 20px;
text-align: center;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 12px;
margin-left: 6px;
margin-top: 17px;
border: 1px solid rgba(255, 255, 255, 1);
margin-left: 10px;
margin-top: 15px;
// border: 1px solid rgba(255, 255, 255, 1);
border-radius: 100px;
background: rgba(255, 77, 79, 1);
background: rgba(255, 255, 255, 0.3);
}
}
.more {
margin-top: 19px;
margin-left: 256px;
margin-left: 224px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
......@@ -1197,8 +1231,10 @@ onMounted(async () => {
}
}
.box2-main {
height: 282px;
height: 330px;
overflow-y: auto;
box-sizing: border-box;
padding-right: 20px;
.box2-main-item {
margin-left: 23px;
height: 47px;
......@@ -1232,7 +1268,6 @@ onMounted(async () => {
margin-left: 13px;
width: 408px;
height: 47px;
border-top: 1px solid rgba(240, 242, 244, 1);
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
.text {
......@@ -1256,7 +1291,7 @@ onMounted(async () => {
}
.box2-footer {
position: absolute;
left: 26px;
left: 40px;
bottom: 20px;
width: 430px;
height: 42px;
......@@ -1305,9 +1340,9 @@ onMounted(async () => {
.box3-header-left {
display: flex;
.box3-header-icon {
margin-top: 15px;
width: 13px;
height: 13px;
margin-top: 16px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
......@@ -1315,11 +1350,11 @@ onMounted(async () => {
}
.box3-header-title {
margin-top: 16px;
margin-left: 22px;
margin-left: 19px;
height: 22px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-size: 20px;
font-weight: 700;
line-height: 22px;
}
......@@ -1371,15 +1406,16 @@ onMounted(async () => {
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;
width: 521px;
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
box-sizing: border-box;
padding-left: 22px;
.header-icon {
margin-top: 18px;
width: 18px;
height: 18px;
margin-top: 15px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
......@@ -1387,11 +1423,11 @@ onMounted(async () => {
}
.header-title {
margin-top: 16px;
margin-left: 26px;
margin-left: 18px;
height: 22px;
color: rgba(20, 89, 187, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-size: 20px;
font-weight: 700;
line-height: 22px;
}
......@@ -1447,43 +1483,54 @@ onMounted(async () => {
// width: 100%;
height: 911px;
background: rgba(248, 249, 250, 1);
margin-bottom: 20px;
.home-main-footer-header {
margin-top: 37px;
margin-bottom: 36px;
// width: 1600px;
height: 42px;
height: 62px;
// background: orange;
display: flex;
justify-content: space-between;
.btn-box {
.btn-wrapper {
width: 1300px;
overflow-x: auto;
.btn-box {
display: flex;
justify-content: space-between;
// justify-content: space-between;
max-width: 2000px;
.btn {
max-width: 100px;
min-width: 80px;
height: 42px;
margin: 0 5px;
overflow: hidden;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 42px;
padding: 0 24px;
text-align: center;
border-radius: 21px;
background: rgba(20, 89, 187, 0);
padding: 0 16px;
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;
font-weight: 700;
&:hover {
color: #fff;
background: rgba(20, 89, 187, 1);
}
}
}
}
.select-box {
height: 42px;
box-sizing: border-box;
......@@ -1495,8 +1542,11 @@ onMounted(async () => {
// background: orange;
display: flex;
flex-wrap: wrap;
padding: 5px 10px;
// justify-content: space-between;
// justify-content: center;
overflow-y: auto;
height: 820px;
.main-item {
width: 240px;
height: 320px;
......
src/views/deepDig/index.vue → src/views/bill/deepDig/index.vue
浏览文件 @ 259b19f0
......@@ -86,7 +86,7 @@ const handleClickLeftSiderBtn = (item,index) => {
}
}
.siderBtnActive {
background: rgba(22, 119, 255, 1);
background: var(--color-main-active);
.btn-text {
color: #fff !important;
}
......
src/views/deepDig/processAnalysis/index.vue → src/views/bill/deepDig/processAnalysis/index.vue
浏览文件 @ 259b19f0
......@@ -1109,14 +1109,14 @@ onMounted(async () => {
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(22, 119, 255, 1);
background: var(--color-main-active);
}
.title {
margin-left: 22px;
margin-top: 20px;
height: 16px;
line-height: 16px;
color: rgba(22, 119, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 600;
......@@ -1222,7 +1222,7 @@ onMounted(async () => {
font-weight: 700;
}
.item:nth-child(3) {
color: rgba(22, 119, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
......@@ -1262,7 +1262,7 @@ onMounted(async () => {
margin-top: 8px;
width: 749px;
height: 24px;
color: rgba(22, 119, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
......@@ -1541,7 +1541,7 @@ onMounted(async () => {
margin-top: 8px;
width: 749px;
height: 24px;
color: rgba(22, 119, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
......@@ -1821,7 +1821,7 @@ onMounted(async () => {
margin-top: 8px;
width: 749px;
height: 24px;
color: rgba(22, 119, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
......
src/views/deepDig/processOverview/index.vue → src/views/bill/deepDig/processOverview/index.vue
浏览文件 @ 259b19f0
......@@ -741,14 +741,14 @@ const handleClickDetail = (isShow) => {
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(22, 119, 255, 1);
background: var(--color-main-active);
}
.title {
margin-left: 14px;
margin-top: 20px;
height: 16px;
line-height: 16px;
color: rgba(22, 119, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 600;
......@@ -769,7 +769,7 @@ const handleClickDetail = (isShow) => {
.main {
margin-left: 59px;
height: 680px;
padding: 15px 10px;
padding: 3px 10px;
.left {
height: 680px;
position: relative;
......@@ -860,7 +860,7 @@ const handleClickDetail = (isShow) => {
position: absolute;
z-index: 9999;
left: 10px;
bottom: -4px;
bottom: -7px;
width: 12px;
height: 12px;
img {
......@@ -1064,7 +1064,7 @@ const handleClickDetail = (isShow) => {
position: absolute;
z-index: 9999;
left: 10px;
top: 3px;
top: 7px;
width: 12px;
height: 12px;
img {
......@@ -1076,7 +1076,7 @@ const handleClickDetail = (isShow) => {
display: flex;
height: 30px;
border-left: 1px solid rgba(255, 172, 77, 1);
padding: 15px 10px;
padding: 5px 10px;
.item-title {
height: 30px;
line-height: 30px;
......@@ -1191,7 +1191,7 @@ const handleClickDetail = (isShow) => {
.right {
position: absolute;
left: 1295px;
top: calc(50% - 65px);
top: calc(50% - 50px);
display: flex;
align-items: center;
.right-line {
......@@ -1241,7 +1241,7 @@ const handleClickDetail = (isShow) => {
margin-top: 8px;
width: 1617px;
height: 60px;
color: rgba(22, 119, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
......@@ -1344,7 +1344,7 @@ const handleClickDetail = (isShow) => {
.box3-center {
width: 345px;
margin-left: 25px;
color: rgba(20, 89, 187, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
......
src/views/bill/index.vue
浏览文件 @ 259b19f0
......@@ -302,7 +302,7 @@ onMounted(() => {});
}
}
.siderBtnActive {
background: rgba(22, 119, 255, 1);
background: var(--color-main-active);
.btn-text {
color: #fff !important;
}
......
src/views/influence/index.vue → src/views/bill/influence/index.vue
浏览文件 @ 259b19f0
......@@ -82,7 +82,7 @@ const handleClickLeftSiderBtn = (item,index) => {
}
}
.siderBtnActive {
background: rgba(22, 119, 255, 1);
background: var(--color-main-active);
.btn-text {
color: #fff !important;
}
......
src/views/influence/industry/index.vue → src/views/bill/influence/industry/index.vue
浏览文件 @ 259b19f0
......@@ -10,16 +10,18 @@
</div>
<div class="left-top" id="chart1"></div>
<div class="left-center">
<div class="left-center-btn-box">
<div
class="btn"
class="left-center-btn"
:class="{ btnActive: box1BtnActive === index }"
v-for="(item, index) in industryList"
:key="index"
@click="handleClickBox1Btn(item,index)"
@click="handleClickBox1Btn(item, index)"
>
{{ item.hylymc }}
</div>
</div>
</div>
<div class="left-footer">
<div
class="item"
......@@ -169,7 +171,7 @@
<script setup>
import { ref, onMounted, nextTick } from "vue";
import * as echarts from "echarts";
import {getCompanyList, getIndustryHyly, getHylyList} from '@/api/influence'
import { getCompanyList, getIndustryHyly, getHylyList } from "@/api/influence";
import getBarChart from "./utils/barChart";
import getLineChart from "./utils/lineChart";
import getBarChart1 from "./utils/barChart1";
......@@ -193,8 +195,8 @@ const box1BtnActive = ref(0);
const handleClickBox1Btn = (industry, index) => {
box1BtnActive.value = index;
curHylyId.value = industry.hylyid
handleGetCompanyListById()
curHylyId.value = industry.hylyid;
handleGetCompanyListById();
};
// 绘制echarts图表
......@@ -255,7 +257,7 @@ const handleClickCompany = (index) => {
}, 100);
};
const companyList= ref([])
const companyList = ref([]);
const industryList = ref([
// {
......@@ -309,63 +311,54 @@ const companyInfo = ref({
// 获取行业领域列表
const handleGetHylyList = async () => {
try {
const res = await getHylyList()
// console.log('行业领域字典列表', res);
industryList.value = res.data
curHylyId.value = res.data[0].hylyid
} catch (error) {
}
}
const res = await getHylyList();
console.log("行业领域字典列表", res);
industryList.value = res.data;
curHylyId.value = res.data[0].hylyid;
} catch (error) {}
};
const curHylyId = ref('')
const curHylyId = ref("");
// 根据行业领域id获取公司列表
const handleGetCompanyListById = async () => {
const params = {
id: curHylyId.value
}
id: curHylyId.value,
};
try {
const res = await getCompanyList(params)
const res = await getCompanyList(params);
// console.log('根据行业id获取公司里列表', res);
if(res.code === 200 && res.data.length) {
companyList.value = res.data
if (res.code === 200 && res.data.length) {
companyList.value = res.data;
} else {
companyList.value = []
companyList.value = [];
}
} catch (error) {
}
}
} catch (error) {}
};
// 根据法案ID 获取行业领域统计
const handleGetIndustryHyly = async () => {
const params = {
id : 1
}
id: 1,
};
try {
const res = await getIndustryHyly(params)
const res = await getIndustryHyly(params);
// console.log('行业领域统计', res);
chart1Data.value.name = res.data.map(item => {
return item.hylyName
})
chart1Data.value.value = res.data.map(item => {
return item.companyNum
})
} catch (error) {
}
}
chart1Data.value.name = res.data.map((item) => {
return item.hylyName;
});
chart1Data.value.value = res.data.map((item) => {
return item.companyNum;
});
} catch (error) {}
};
onMounted(async () => {
await handleGetHylyList()
handleGetCompanyListById()
await handleGetIndustryHyly()
await handleGetHylyList();
handleGetCompanyListById();
await handleGetIndustryHyly();
let chart1 = getBarChart(chart1Data.value.name, chart1Data.value.value);
setChart(chart1, "chart1");
});
</script>
......@@ -383,14 +376,14 @@ onMounted(async () => {
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(22, 119, 255, 1);
background: var(--color-main-active);
}
.title {
margin-left: 22px;
margin-top: 20px;
height: 16px;
line-height: 16px;
color: rgba(22, 119, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 600;
......@@ -429,35 +422,48 @@ onMounted(async () => {
}
.left-center {
margin-top: 12px;
height: 56px;
margin-left: 17px;
overflow-x: hidden;
width: 445px;
.left-center-btn-box {
width: 1000px;
margin-top: 10px;
height: 28px;
display: flex;
justify-content: flex-start;
margin-left: 17px;
.btn {
margin-right: 8px;
flex-wrap: nowrap;
.left-center-btn {
margin-right: 4px;
height: 28px;
padding: 1px 8px 1px 8px;
width: 60px;
text-align: center;
padding: 0 5px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
color: rgba(132, 136, 142, 1);
border: 1px solid var(--btn-plain-border-color);
background: var(--btn-plain-bg-color);
color: var(--btn-plain-text-color);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
line-height: 28px;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.btnActive {
border: 1px solid rgba(20, 89, 187, 1);
background: rgba(246, 251, 255, 1);
border: 1px solid var(--btn-active-border-color);
background: var(--btn-active-bg-color);
color: var(--btn-active-text-color);
}
}
}
.left-footer {
margin: 0 auto;
margin-top: 5px;
width: 446px;
height: 548px;
height: 520px;
overflow: auto;
.item {
width: 100%;
......@@ -493,6 +499,9 @@ onMounted(async () => {
font-weight: 600;
line-height: 22px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.icon {
margin-left: 7px;
......@@ -898,7 +907,7 @@ onMounted(async () => {
margin-top: 8px;
width: 1119px;
height: 24px;
color: rgba(22, 119, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
......
src/views/influence/scientificResearch/index.vue → src/views/bill/influence/scientificResearch/index.vue
浏览文件 @ 259b19f0
......@@ -577,14 +577,14 @@ onMounted(() => {
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(22, 119, 255, 1);
background: var(--color-main-active);
}
.title {
margin-left: 14px;
margin-top: 20px;
height: 16px;
line-height: 16px;
color: rgba(22, 119, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 600;
......@@ -654,7 +654,7 @@ onMounted(() => {
margin-top: 8px;
width: 749px;
height: 24px;
color: rgba(22, 119, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
......@@ -729,7 +729,7 @@ onMounted(() => {
margin-top: 8px;
width: 749px;
height: 24px;
color: rgba(22, 119, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
......@@ -874,7 +874,7 @@ onMounted(() => {
margin-top: 8px;
width: 749px;
height: 24px;
color: rgba(22, 119, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
......
src/views/bill/introdoction/index.vue
浏览文件 @ 259b19f0
......@@ -162,9 +162,8 @@
</div>
</div>
<div class="box2-footer">
<div class="box2-footer-text">查看更多</div>
<div class="box2-footer-icon">
<img src="./assets/images/more.png" alt="" />
<div class="btn-more">
<img src="../assets/images/btn-more.png" alt="" />
</div>
</div>
</div>
......@@ -287,10 +286,9 @@
</el-timeline-item> -->
</el-timeline>
</div>
<div class="right-main-box3-footer" @click="handleClickMore2">
<div class="right-main-box3-footer-text">查看更多</div>
<div class="right-main-box3-footer-icon">
<img src="./assets/images/more.png" alt="" />
<div class="right-main-box3-footer">
<div class="btn-more" @click="handleClickMore2">
<img src="../assets/images/btn-more.png" alt="" />
</div>
</div>
</div>
......@@ -321,11 +319,11 @@
</div>
<div class="info-right-item">
<div class="item-left">选区:</div>
<div class="item-right">{{curPerson.xq}}</div>
<div class="item-right">{{ curPerson.xq }}</div>
</div>
<div class="info-right-item">
<div class="item-left">职位:</div>
<div class="item-right">{{curPerson.zw}}</div>
<div class="item-right">{{ curPerson.zw }}</div>
</div>
</div>
</div>
......@@ -583,7 +581,7 @@ const handleClickMore2 = () => {
// 获取基本信息
const handleGetBasicInfo = async () => {
const params = {
id: window.sessionStorage.getItem('billId'),
id: window.sessionStorage.getItem("billId"),
};
try {
const res = await getBillInfo(params);
......@@ -599,7 +597,7 @@ const warningNum = ref(0);
const handleGetBillEvent = async () => {
warningNum.value = 0;
const params = {
id: window.sessionStorage.getItem('billId'),
id: window.sessionStorage.getItem("billId"),
};
try {
const res = await getBillEvent(params);
......@@ -618,7 +616,7 @@ const handleGetBillEvent = async () => {
// 法案进展 获取前期进展 --也是提出人左上角列表
const handleGetBillDyqk = async () => {
const params = {
id: window.sessionStorage.getItem('billId'),
id: window.sessionStorage.getItem("billId"),
};
try {
const res = await getBillDyqk(params);
......@@ -682,17 +680,17 @@ onMounted(() => {
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(22, 119, 255, 1);
background: var(--color-main-active);
}
.title {
margin-left: 14px;
margin-top: 20px;
height: 16px;
line-height: 16px;
color: rgba(22, 119, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 600;
font-size: 18px;
font-weight: 700;
line-height: 16px;
}
.header-btn-box {
......@@ -752,8 +750,7 @@ onMounted(() => {
}
.item-right {
height: 14px;
color: rgba(22, 119, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 600;
......@@ -800,7 +797,8 @@ onMounted(() => {
}
.item-right4 {
// width: 500px;
height: 24px;
margin-top: -2px;
height: 26px;
display: flex;
padding-left: -10px;
border: 2px solid #5f656c;
......@@ -821,10 +819,10 @@ onMounted(() => {
.right-arrow {
position: absolute;
right: -21px;
top: -3px;
top: -2px;
z-index: 99;
width: 30px;
height: 30px;
height: 28px;
img {
width: 100%;
height: 100%;
......@@ -996,22 +994,17 @@ onMounted(() => {
}
}
.box2-footer {
margin-top: 7px;
display: flex;
justify-content: center;
width: 100px;
margin: 0 auto;
margin-top: 5px;
.btn-more {
width: 108px;
height: 32px;
cursor: pointer;
&:hover {
background: rgba(225, 225, 225, 0.3);
img {
width: 100%;
height: 100%;
}
.box2-footer-text {
color: rgba(22, 119, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
margin-right: 4px;
}
}
}
......@@ -1040,10 +1033,10 @@ onMounted(() => {
.person-item {
height: 28px;
box-sizing: border-box;
border: 1px solid rgba(170, 172, 177, 1);
border: 1px solid var(--btn-plain-border-color);
border-radius: 4px;
background: rgba(250, 250, 251, 1);
color: rgba(132, 136, 142, 1);
background: var(--btn-plain-bg-color);
color: var(--btn-plain-text-color);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
......@@ -1056,9 +1049,9 @@ onMounted(() => {
cursor: pointer;
}
.nameItemActive {
border: 1px solid rgba(22, 119, 255, 1);
background: rgba(246, 251, 255, 1);
color: rgba(22, 119, 255, 1);
border: 1px solid var(--btn-active-border-color);
background: var(--btn-active-bg-color);
color: var(--btn-active-text-color);
}
}
}
......@@ -1104,7 +1097,7 @@ onMounted(() => {
.info-right-title {
height: 22px;
color: rgba(22, 119, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 600;
......@@ -1189,22 +1182,17 @@ onMounted(() => {
overflow-y: auto;
}
.right-main-box3-footer {
margin-top: 7px;
display: flex;
justify-content: center;
width: 100px;
margin: 0 auto;
margin-top: 10px;
.btn-more {
width: 108px;
height: 32px;
cursor: pointer;
&:hover {
background: rgba(225, 225, 225, 0.3);
img {
width: 100%;
height: 100%;
}
.right-main-box3-footer-text {
color: rgba(22, 119, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
margin-right: 4px;
}
}
}
......@@ -1271,9 +1259,9 @@ onMounted(() => {
.info-right-title {
height: 22px;
color: rgba(22, 119, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-size: 20px;
font-weight: 700;
line-height: 22px;
text-align: center;
......@@ -1344,7 +1332,7 @@ onMounted(() => {
bottom: 32px;
width: 81px;
height: 16px;
color: rgba(22, 119, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
......@@ -1367,16 +1355,17 @@ onMounted(() => {
align-items: center;
padding: 1px 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
border: 1px solid var(--btn-plain-border-color);
background: var(--btn-plain-bg-color);
color: var(--btn-plain-text-color);
margin: 20px 8px;
cursor: pointer;
}
.btnActive {
border: 1px solid rgba(22, 119, 255, 1);
background: rgba(246, 251, 255, 1);
color: rgba(22, 119, 255, 1);
border: 1px solid var(--btn-active-border-color);
background: var(--btn-active-bg-color);
color: var(--btn-active-text-color);
}
}
}
......@@ -1396,10 +1385,9 @@ onMounted(() => {
padding-bottom: 5px !important;
}
:deep(.el-timeline-item__timestamp) {
// color: rgba(95, 101, 108, 1) !important;
color: rgba(22, 119, 255, 1) !important;
color: var(--color-main-active) !important;
font-family: Microsoft YaHei !important;
font-size: 14px !important;
font-size: 16px !important;
font-weight: 600 !important;
}
.timeline-content {
......
src/views/bill/template/index.vue
浏览文件 @ 259b19f0
......@@ -5,22 +5,6 @@
<div class="box-header-left"></div>
<div class="box-header-title">主要条款</div>
<div class="box-header-btn-box">
<!-- <div class="btn" @click="handleSelectBtn(1)">
<el-button type="primary" plain v-if="btnActiveIndex === 1"
>涉华条款</el-button
>
<el-button type="info" plain v-if="btnActiveIndex === 2"
>涉华条款</el-button
>
</div>
<div class="btn" @click="handleSelectBtn(2)">
<el-button type="primary" plain v-if="btnActiveIndex === 2"
>全部条款</el-button
>
<el-button type="info" plain v-if="btnActiveIndex === 1"
>全部条款</el-button
>
</div> -->
</div>
<div class="box-header-icon">
<img src="./assets/icons/header-icon.png" alt="" />
......@@ -66,11 +50,11 @@
<div class="id">{{ index + 1 }}</div>
<div class="info">
<div class="title">
<span style="color: #1677ff">{{ term.header }}</span>
<span class="title-active">{{ term.header }}</span>
{{ term.title }}
</div>
<div class="content">
<span style="color: #1677ff">{{ term.headerEn }}</span>
<span class="content-active">{{ term.headerEn }}</span>
{{ term.content }}
</div>
</div>
......@@ -500,13 +484,13 @@ onMounted(async () => {
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(22, 119, 255, 1);
background: var(--color-main-active);
}
.box-header-title {
margin-left: 22px;
margin-top: 20px;
height: 16px;
color: rgba(22, 119, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 600;
......@@ -580,7 +564,7 @@ onMounted(async () => {
height: 24px;
border-radius: 12px;
background: rgba(231, 241, 255);
color: #1677ff;
color: var(--color-main-active);
font-size: 12px;
text-align: center;
line-height: 24px;
......@@ -600,6 +584,9 @@ onMounted(async () => {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.title-active{
color: var(--color-main-active)
}
}
.content {
margin-top: 6px;
......@@ -613,6 +600,9 @@ onMounted(async () => {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.content-active{
color: var(--color-main-active)
}
}
}
.tags-box {
......@@ -732,7 +722,7 @@ onMounted(async () => {
margin-top: 8px;
width: 456px;
height: 24px;
color: rgba(22, 119, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
......@@ -788,7 +778,7 @@ onMounted(async () => {
margin-top: 8px;
width: 456px;
height: 24px;
color: rgba(22, 119, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
......
src/views/decree/decreeHome/WordCloudMap.vue
浏览文件 @ 259b19f0
......@@ -105,7 +105,7 @@ onBeforeUnmount(() => {
<style lang="scss" scoped>
.echarts-wrap {
// width: 100%;
width: 576px;
height: 215px;
width: 792px;
height: 401px;
}
</style>
src/views/decree/decreeHome/index.vue
浏览文件 @ 259b19f0
......@@ -118,7 +118,7 @@
<div class="text">{{ "风险信号" }}</div>
<div class="num">{{ warningList.length }}</div>
</div>
<div class="more">{{ "更多 >" }}</div>
<div class="more">{{ "更多 +" }}</div>
</div>
<div class="box2-main">
<div
......@@ -151,6 +151,225 @@
</div>
</div>
</div>
<div class="center-center1">
<div
class="center1-item"
:class="{ center1ItemActive: center1ActiveIndex === 0 }"
@click="handleClickCenter1Item(0)"
>
<div class="left">
<img src="./assets/images/p1.png" alt="" />
</div>
<div class="right">
<div
class="name"
:class="{ nameActive: center1ActiveIndex === 0 }"
>
{{ "唐纳德·特朗普任期" }}
</div>
<div
class="time"
:class="{ timeActive: center1ActiveIndex === 0 }"
>
{{ "2025.1.20-至今" }}
</div>
</div>
</div>
<div
class="center1-item"
:class="{ center1ItemActive: center1ActiveIndex === 1 }"
@click="handleClickCenter1Item(1)"
>
<div class="left">
<img src="./assets/images/p2.png" alt="" />
</div>
<div class="right">
<div
class="name"
:class="{ nameActive: center1ActiveIndex === 1 }"
>
{{ "乔·拜登任期" }}
</div>
<div
class="time"
:class="{ timeActive: center1ActiveIndex === 1 }"
>
{{ "2021.1.20-2025.1.20" }}
</div>
</div>
</div>
<div
class="center1-item"
:class="{ center1ItemActive: center1ActiveIndex === 2 }"
@click="handleClickCenter1Item(2)"
>
<div class="left">
<img src="./assets/images/p1.png" alt="" />
</div>
<div class="right">
<div
class="name"
:class="{ nameActive: center1ActiveIndex === 2 }"
>
{{ "唐纳德·特朗普任期" }}
</div>
<div
class="time"
:class="{ timeActive: center1ActiveIndex === 2 }"
>
{{ "2017.1.20-2021.1.20" }}
</div>
</div>
</div>
<div
class="center1-item"
:class="{ center1ItemActive: center1ActiveIndex === 3 }"
@click="handleClickCenter1Item(3)"
>
<div class="left">
<img src="./assets/images/p3.png" alt="" />
</div>
<div class="right">
<div
class="name"
:class="{ nameActive: center1ActiveIndex === 3 }"
>
{{ "贝拉克·奥巴马任期" }}
</div>
<div
class="time"
:class="{ timeActive: center1ActiveIndex === 3 }"
>
{{ "2013.1.20-2017.1.20" }}
</div>
</div>
</div>
</div>
<div class="center-center2">
<div class="center2-header">
<div class="center2-header-left">
<div class="left">
<div class="icon">
<img src="./assets/images/p1.png" alt="" />
</div>
</div>
<div class="right">
<div class="right-item1">{{ "唐纳德·特朗普" }}</div>
<div class="right-item2">
<div class="icon">
<img src="./assets/images/icon1.png" alt="" />
</div>
<div class="text">{{ "共和党" }}</div>
</div>
<div class="right-item3">{{ "美国第45任总统" }}</div>
<div class="right-item4">{{ "2025.1.20-至今" }}</div>
</div>
</div>
<div class="center2-header-right">
<div class="top">
<div class="top-box">
<div class="item1">{{ "本月发布" }}</div>
<div class="item2">
<div class="item2-1">{{ "1项" }}</div>
<div class="item2-2">{{ "/" }}</div>
<div class="item2-3">{{ "4项" }}</div>
</div>
</div>
<div class="top-box">
<div class="item1">{{ "今年发布" }}</div>
<div class="item2">
<div class="item2-1">{{ "7项" }}</div>
<div class="item2-2">{{ "/" }}</div>
<div class="item2-3">{{ "29项" }}</div>
</div>
</div>
<div class="top-box">
<div class="item1">{{ "任期内发布" }}</div>
<div class="item2">
<div class="item2-1">{{ "20项" }}</div>
<div class="item2-2">{{ "/" }}</div>
<div class="item2-3">{{ "96项" }}</div>
</div>
</div>
</div>
<div class="bottom">
<div class="icon">
<img src="./assets/images/tips-icon.png" alt="" />
</div>
<div class="text">{{ "涉华政令数量/政令总数" }}</div>
</div>
</div>
</div>
<div class="center2-mid" id="chartCalendar"></div>
<div class="center2-footer">
<div class="center2-footer-left">
<div class="header">
<div class="icon">
<img src="./assets/images/center2-header-icon2.png" alt="" />
</div>
<div class="text">{{ "主要内阁成员" }}</div>
</div>
<div class="main">
<div
class="item"
v-for="(item, index) in personList"
:key="index"
>
<div class="item-left">
<img :src="item.avator" alt="" />
</div>
<div class="item-right">
<div class="item-right-box1">{{ item.name }}</div>
<div class="item-right-box2">{{ item.posi }}</div>
</div>
</div>
</div>
</div>
<div class="center2-footer-right">
<div class="header">
<div class="icon">
<img src="./assets/images/center2-header-icon1.png" alt="" />
</div>
<div class="tab-box">
<div
class="tab"
:class="{ tabActive: tabActiveIndex === index }"
v-for="(item, index) in list"
:key="index"
>
{{ item.title }}
</div>
</div>
<div class="right">
<div class="btn">
<img src="./assets/images/left-btn.png" alt="" />
</div>
<div class="btn">
<img src="./assets/images/right-btn.png" alt="" />
</div>
</div>
</div>
<div class="main">
<div
class="main-item"
v-for="(val, idx) in list[tabActiveIndex].data"
:key="idx"
>
<div class="id">{{ idx + 1 }}</div>
<div class="info">
<div class="info-header">
<div class="title">{{ val.title }}</div>
<div class="tag">{{ val.tag }}</div>
</div>
<div class="info-content">
{{ val.content }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="center-footer">
<div class="box3">
<div class="box3-header">
......@@ -158,15 +377,10 @@
<div class="box3-header-icon">
<img src="./assets/images/box3-header-icon.png" alt="" />
</div>
<div class="box3-header-title">{{ "涉华政令数量" }}</div>
<div class="box3-header-title">{{ "政令发布频度" }}</div>
</div>
<div class="box3-header-right">
<div class="right-box rightBoxActive">
{{ "月度" }}
</div>
<div class="right-box">
{{ "年度" }}
</div>
<img src="./assets/images/header-more.png" alt="" />
</div>
</div>
<div class="box3-main" id="chart1"></div>
......@@ -176,9 +390,49 @@
<div class="header-icon">
<img src="./assets/images/box4-header-icon.png" alt="" />
</div>
<div class="header-title">{{ "关键内容" }}</div>
<div class="header-title">{{ "政令涉及领域" }}</div>
<div class="header-right">
<img src="./assets/images/header-more.png" alt="" />
</div>
</div>
<div class="box4-main" id="chart2"></div>
</div>
</div>
<div class="center-footer1">
<div class="box5">
<div class="box5-header">
<div class="header-icon">
<img src="./assets/images/box5-header-icon.png" alt="" />
</div>
<div class="header-title">{{ "关键政令及举措" }}</div>
</div>
<div class="box5-main">
<div
class="box5-item"
v-for="(item, index) in keyDecreeList"
:key="index"
>
<div class="icon">
<img src="./assets/images/warning.png" alt="" />
</div>
<div class="info">
<div class="info-header">
<div class="title">{{ item.title }}</div>
<div class="time">{{ item.time }}</div>
</div>
<div class="info-content">{{ item.content }}</div>
</div>
</div>
</div>
</div>
<div class="box6">
<div class="box6-header">
<div class="header-icon">
<img src="./assets/images/box5-header-icon.png" alt="" />
</div>
<div class="header-title">{{ "政令重点条款" }}</div>
</div>
<div class="box4-main">
<div class="box6-main">
<WordCloudMap :data="wordCloudData" :shape="circle" />
</div>
</div>
......@@ -266,7 +520,174 @@ import router from "@/router";
import WordCloudMap from "./WordCloudMap.vue";
import getMultiLineChart from "./utils/multiLineChart";
import getBarChart from "./utils/barChart";
import getPieChart from "./utils/piechart";
import getCalendarHeatChart from "./utils/cleandarHeat";
import p1 from "./assets/images/iconp1.png";
import p2 from "./assets/images/iconp2.png";
import p3 from "./assets/images/iconp3.png";
import p4 from "./assets/images/iconp4.png";
import p5 from "./assets/images/iconp5.png";
import p6 from "./assets/images/iconp6.png";
import p7 from "./assets/images/iconp7.png";
import p8 from "./assets/images/iconp8.png";
import p9 from "./assets/images/iconp9.png";
import p10 from "./assets/images/iconp10.png";
const center1ActiveIndex = ref(0);
const handleClickCenter1Item = (index) => {
center1ActiveIndex.value = index;
};
const personList = ref([
{
name: "詹姆斯·JD·万斯",
posi: "副总统",
avator: p1,
},
{
name: "马尔科·卢比奥",
posi: "国务卿",
avator: p2,
},
{
name: "斯科特·贝森特",
posi: "财政部长",
avator: p3,
},
{
name: "皮特·赫格塞斯",
posi: "国防部长",
avator: p4,
},
{
name: "帕姆·邦迪",
posi: "司法部长",
avator: p5,
},
{
name: "霍华德·卢特尼克",
posi: "商务部长",
avator: p6,
},
{
name: "苏西·威尔斯",
posi: "白宫办公厅主任",
avator: p7,
},
{
name: "克里斯蒂·诺姆",
posi: "国土安全部长",
avator: p8,
},
{
name: "道格·伯古姆",
posi: "内政部长",
avator: p9,
},
{
name: "克里斯·赖特",
posi: "能源部长",
avator: p10,
},
]);
const tabActiveIndex = ref(0);
const list = [
{
title: "内政情况",
data: [
{
title: "司法与法律政策",
tag: "司法改革",
content: `继续任命保守派法官至联邦各级范元、可能利用司法部调查政治对手，破坏司法部独立性传统。`,
},
{
title: "移民政策",
tag: "边境安全",
content: `重启并扩大美墨边境墙建设，启动大规模非法移民驱逐行动。恢复并加强"留在墨西哥"政策，限制庇护申请。`,
},
{
title: "能源政策",
tag: "能源独立",
content: `推行"钻探、钻探、钻探"政策，全力扩大化石燃料（石油、天然气、煤炭）的生产，撤销清洁能源补贴和环保法规。`,
},
{
title: "关税政策",
tag: "能征关税",
content: `全面加征关税，推行“对等关税”，将关税收入作为弥补减税造成的财政收入缺口的手段之一。`,
},
{
title: "外交政策",
tag: "能华强硬",
content: `采取单边主义和交易性做法，对国际多边体系构成挑战，要求盟友承担更多成本，对华政策更趋强硬。`,
},
],
},
{
title: "外交情况",
data: [
{
title: "司法与法律政策1",
tag: "司法改革",
content: `继续任命保守派法官至联邦各级范元、可能利用司法部调查政治对手，破坏司法部独立性传统。`,
},
{
title: "移民政策",
tag: "边境安全",
content: `重启并扩大美墨边境墙建设，启动大规模非法移民驱逐行动。恢复并加强"留在墨西哥"政策，限制庇护申请。`,
},
{
title: "能源政策",
tag: "能源独立",
content: `推行"钻探、钻探、钻探"政策，全力扩大化石燃料（石油、天然气、煤炭）的生产，撤销清洁能源补贴和环保法规。`,
},
{
title: "关税政策",
tag: "能征关税",
content: `全面加征关税，推行“对等关税”，将关税收入作为弥补减税造成的财政收入缺口的手段之一。`,
},
{
title: "外交政策",
tag: "能华强硬",
content: `采取单边主义和交易性做法，对国际多边体系构成挑战，要求盟友承担更多成本，对华政策更趋强硬。`,
},
],
},
{
title: "经济情况",
data: [
{
title: "司法与法律政策2",
tag: "司法改革",
content: `继续任命保守派法官至联邦各级范元、可能利用司法部调查政治对手，破坏司法部独立性传统。`,
},
{
title: "移民政策",
tag: "边境安全",
content: `重启并扩大美墨边境墙建设，启动大规模非法移民驱逐行动。恢复并加强"留在墨西哥"政策，限制庇护申请。`,
},
{
title: "能源政策",
tag: "能源独立",
content: `推行"钻探、钻探、钻探"政策，全力扩大化石燃料（石油、天然气、煤炭）的生产，撤销清洁能源补贴和环保法规。`,
},
{
title: "关税政策",
tag: "能征关税",
content: `全面加征关税，推行“对等关税”，将关税收入作为弥补减税造成的财政收入缺口的手段之一。`,
},
{
title: "外交政策",
tag: "能华强硬",
content: `采取单边主义和交易性做法，对国际多边体系构成挑战，要求盟友承担更多成本，对华政策更趋强硬。`,
},
],
},
];
const tagList = ref([
{
......@@ -517,7 +938,6 @@ const handleClickCate = (cate) => {
handleGetBillsByType();
};
const activeNavIndex = ref(0);
const handleClickNav = (index, item) => {
......@@ -535,28 +955,50 @@ const setChart = (option, chartId) => {
};
const chart1Data = ref({
title: [
"2024-09",
"2024-10",
"2024-11",
"2024-12",
"2025-01",
"2025-02",
"2025-03",
"2025-04",
"2025-05",
"2025-06",
"2025-07",
"2025-08",
],
data: [
dataX: ["2019", "2020", "2021", "2022", "2023", "2024", "2025"],
dataY: [219, 228, 129, 159, 152, 157, 78],
});
const chart2Data = ref([
{
name: "提出法案",
value: [145, 52, 84, 99, 71, 96, 128, 144, 140, 168, 188, 172],
name: "集成电路",
value: 50,
},
],
});
{
name: "人工智能",
value: 46,
},
{
name: "通信网络",
value: 40,
},
{
name: "量子科技",
value: 32,
},
{
name: "能源",
value: 31,
},
{
name: "生物科技",
value: 30,
},
{
name: "航空航天",
value: 24,
},
]);
const colorList = [
"#69B1FF",
"#FFC069",
"#87E8DE",
"#85A5FF",
"#FF7875",
"#B37FEB",
"#4096FF",
];
// 根据法案类型获取法案列表
// const handleGetBillsByType = async () => {
......@@ -577,13 +1019,80 @@ const chart1Data = ref({
// } catch (error) {}
// };
onMounted(async () => {
const keyDecreeList = ref([
{
title: "关于“对等关税”的行政令",
time: "2025年4月",
content: `对所有贸易伙伴设立10%的“最低基准关税”，并对中国商品加征高达34%​​ 的额外关税，使针对中国的总关税水平大幅提升。`,
},
{
title: "《美国优先投资政策》备忘录",
time: "2025年2月",
content: `将中国列为“外国对手”，系统性收紧中美在半导体、人工智能、量子技术等前沿科技领域的双向投资，构建对华科技封锁体系。`,
},
{
title: "针对TikTok的行政令",
time: "2025年2月",
content: `以所谓“信息安全”为由，要求字节跳动剥离TikTok在美业务，并禁止通过微信、支付宝等中国应用程序进行交易。`,
},
{
title: "签署《外国投资风险审查现代化法》",
time: "2025年2月",
content: `极大加强了美国外国投资委员会（CFIUS）的权限，重点关注来自中国的投资。`,
},
]);
let chart1 = getMultiLineChart(
chart1Data.value.title,
chart1Data.value.data[0].value
);
const calendarData = ref([
["2025-01-01", 20],
["2025-01-05", 120],
["2025-01-09", 220],
["2025-01-15", 320],
["2025-01-20", 120],
["2025-01-24", 420],
["2025-02-05", 80],
["2025-02-08", 280],
["2025-02-18", 480],
["2025-02-11", 420],
["2025-02-21", 320],
["2025-03-05", 160],
["2025-03-09", 260],
["2025-03-19", 460],
["2025-03-26", 430],
["2025-04-01", 70],
["2025-04-05", 170],
["2025-04-11", 270],
["2025-04-18", 370],
["2025-05-05", 210],
["2025-05-09", 210],
["2025-05-15", 410],
["2025-05-22", 480],
["2025-06-06", 45],
["2025-06-09", 415],
["2025-06-16", 245],
["2025-06-19", 332],
["2025-07-04", 127],
["2025-07-09", 327],
["2025-07-24", 427],
["2025-08-08", 150],
["2025-08-11", 250],
["2025-08-15", 350],
["2025-08-22", 460],
["2025-09-10", 480],
["2025-09-18", 312],
["2025-10-15", 60],
["2025-10-19", 80],
["2025-10-21", 190],
]);
onMounted(async () => {
let chart1 = getBarChart(chart1Data.value.dataX, chart1Data.value.dataY);
setChart(chart1, "chart1");
let chart2 = getPieChart(chart2Data.value, colorList);
setChart(chart2, "chart2");
let chartCalendar = getCalendarHeatChart(calendarData.value);
setChart(chartCalendar, "chartCalendar");
});
</script>
......@@ -602,10 +1111,6 @@ onMounted(async () => {
display: flex;
flex-direction: column;
align-items: center;
// position: sticky;
// left: 0;
// top: 0;
// z-index: 9999;
.home-main-header-top {
width: 100%;
height: 64px;
......@@ -706,8 +1211,6 @@ onMounted(async () => {
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: #fff;
box-sizing: border-box;
padding-left: 31px;
padding-right: 41px;
position: relative;
.box1-left {
position: absolute;
......@@ -756,6 +1259,7 @@ onMounted(async () => {
justify-content: space-between;
.box1-header-left {
display: flex;
margin-left: 19px;
.icon {
width: 18px;
height: 18px;
......@@ -787,12 +1291,16 @@ onMounted(async () => {
font-weight: 400;
line-height: 16px;
cursor: pointer;
margin-right: 39px;
}
}
.box1-main {
display: flex;
height: 354px;
margin-top: 22px;
padding-left: 31px;
padding-right: 41px;
box-sizing: border-box;
.box1-main-left {
width: 458px;
height: 353px;
......@@ -887,7 +1395,6 @@ onMounted(async () => {
}
.box2 {
width: 521px;
padding-right: 20px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
......@@ -895,6 +1402,7 @@ onMounted(async () => {
.box2-header {
height: 54px;
display: flex;
border-bottom: 1px solid rgba(240, 242, 244, 1);
.icon {
width: 24px;
height: 22px;
......@@ -942,9 +1450,12 @@ onMounted(async () => {
font-size: 16px;
font-weight: 400;
line-height: 16px;
cursor: pointer;
}
}
.box2-main {
box-sizing: border-box;
padding-right: 20px;
height: 282px;
overflow-y: auto;
.box2-main-item {
......@@ -980,7 +1491,6 @@ onMounted(async () => {
margin-left: 13px;
width: 408px;
height: 47px;
border-top: 1px solid rgba(240, 242, 244, 1);
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
.text {
......@@ -1034,68 +1544,481 @@ onMounted(async () => {
}
}
}
.center-footer {
margin-top: 21px;
height: 450px;
display: flex;
justify-content: center;
.box3 {
width: 1064px;
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);
.center-center1 {
margin: 0 auto;
margin-top: 24px;
height: 100px;
width: 1600px;
border-radius: 50px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
display: flex;
justify-content: space-between;
padding: 0 20px;
.box3-header-left {
box-sizing: border-box;
padding: 4px 5px;
.center1-item {
width: 351px;
height: 92px;
border-radius: 48px;
display: flex;
.box3-header-icon {
cursor: pointer;
&:hover {
background: rgba(231, 243, 255, 1);
}
.left {
margin-top: 15px;
width: 13px;
height: 13px;
margin-left: 39px;
width: 60px;
height: 60px;
img {
width: 100%;
height: 100%;
}
}
.box3-header-title {
.right {
margin-left: 8px;
.name {
height: 31px;
margin-top: 16px;
margin-left: 22px;
height: 22px;
color: rgba(20, 89, 187, 1);
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 24px;
font-weight: 700;
line-height: 31px;
}
.nameActive {
color: rgba(10, 87, 166, 1);
}
.time {
margin-top: 1px;
height: 30px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
.timeActive {
color: rgba(10, 87, 166, 1);
}
}
}
.center1ItemActive {
background: rgba(231, 243, 255, 1);
}
}
.center-center2 {
margin: 0 auto;
margin-top: 24px;
width: 1600px;
height: 960px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.center2-header {
display: flex;
justify-content: space-between;
.center2-header-left {
margin-left: 62px;
display: flex;
.left {
width: 140px;
height: 175px;
border-radius: 0px 0px 70px 70px;
background: rgba(231, 243, 255, 1);
overflow: hidden;
.icon {
width: 128px;
height: 128px;
border-radius: 75px;
margin-top: 41px;
margin-left: 6px;
img {
width: 100%;
height: 100%;
}
}
}
.right {
margin-left: 29px;
.right-item1 {
margin-top: 41px;
height: 31px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 24px;
font-weight: 700;
line-height: 22px;
line-height: 32px;
}
.right-item2 {
display: flex;
margin-top: 7px;
.icon {
width: 24px;
height: 24px;
img {
width: 100%;
height: 100%;
}
.box3-header-right {
}
.text {
margin-left: 8px;
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 400;
line-height: 24px;
}
}
.right-item3 {
margin-top: 10px;
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 400;
line-height: 24px;
}
.right-item4 {
margin-top: 8px;
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 400;
line-height: 24px;
}
}
}
.center2-header-right {
margin-right: 59px;
margin-top: 47px;
.top {
display: flex;
.top-box {
width: 180px;
height: 72px;
margin-left: 50px;
.item1 {
height: 26px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
text-align: right;
}
.item2 {
margin-top: 4px;
font-family: Microsoft YaHei;
font-weight: 700;
display: flex;
justify-content: flex-end;
.item2-3 {
height: 42px;
color: rgba(10, 87, 166, 1);
font-size: 32px;
line-height: 42px;
}
.item2-2 {
height: 24px;
margin-top: 9px;
margin-left: 5px;
margin-right: 5px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
.item2-1 {
height: 42px;
color: rgba(206, 79, 81, 1);
font-size: 32px;
line-height: 42px;
}
}
}
}
.bottom {
height: 22px;
margin-top: 29px;
display: flex;
justify-content: flex-end;
width: 178px;
.icon {
margin-top: 4px;
width: 14px;
height: 14px;
margin-right: 8px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 22px;
margin-top: 11px;
.right-box {
width: 48px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 24px;
}
}
}
}
.center2-mid {
width: 1479px;
height: 189px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
margin: 40px auto 0;
}
.center2-footer {
display: flex;
.center2-footer-left {
width: 732px;
margin-left: 58px;
margin-top: 21px;
.header {
display: flex;
height: 48px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.icon {
margin-top: 15px;
margin-left: 20px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 20px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 48px;
}
}
.main {
width: 732px;
height: 470px;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
padding-top: 9px;
.item {
width: 50%;
height: 80px;
display: flex;
margin-top: 8px;
.item-left {
width: 60px;
height: 60px;
margin-top: 10px;
margin-left: 16px;
img {
width: 100%;
height: 100%;
}
}
.item-right {
margin-left: 13px;
.item-right-box1 {
margin-top: 15px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
.item-right-box2 {
margin-top: 1px;
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
}
}
.center2-footer-right {
margin-left: 21px;
margin-top: 16px;
width: 730px;
.header {
height: 54px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
display: flex;
.icon {
width: 24px;
height: 24px;
margin-left: 16px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
.tab-box {
margin-left: 20px;
width: 500px;
display: flex;
.tab {
height: 54px;
margin-right: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 400;
line-height: 54px;
padding: 0 2px;
box-sizing: border-box;
}
.tabActive {
font-weight: 700;
color: var(--color-main-active);
border-bottom: 3px solid var(--color-main-active);
}
}
.right {
width: 80px;
margin-left: 90px;
display: flex;
justify-content: space-between;
.btn {
width: 28px;
height: 28px;
margin-top: 13px;
img {
width: 100%;
height: 100%;
}
}
}
}
.main {
height: 475px;
margin-top: 5px;
overflow-y: hidden;
.main-item {
display: flex;
margin-top: 20px;
.id {
margin-top: 3px;
margin-left: 2px;
width: 36px;
height: 36px;
border-radius: 18px;
background: #e7f3ff;
line-height: 36px;
text-align: center;
line-height: 28px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
color: var(--color-main-active);
}
.info {
margin-left: 13px;
width: 672px;
.info-header {
display: flex;
justify-content: space-between;
height: 24px;
.title {
height: 24px;
margin-top: 1px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
.tag {
height: 24px;
line-height: 24px;
border-radius: 4px;
padding: 0 8px;
background: var(--tag-btn2-bg-color);
color: var(--tag-btn2-text-color);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
}
}
.info-content {
margin-top: 3px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
}
}
}
}
}
}
.center-footer {
margin-top: 21px;
height: 452px;
display: flex;
justify-content: center;
.box3 {
width: 792px;
height: 452px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
margin-left: 8px;
cursor: pointer;
border-radius: 4px;
.box3-header {
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin: 0 auto;
display: flex;
justify-content: space-between;
padding: 0 20px;
.box3-header-left {
display: flex;
.box3-header-icon {
margin-top: 14px;
margin-left: 4px;
width: 17px;
height: 17px;
img {
width: 100%;
height: 100%;
}
.rightBoxActive {
}
.box3-header-title {
margin-top: 11px;
margin-left: 19px;
height: 26px;
color: rgba(10, 87, 166, 1);
border: 1px solid rgba(10, 87, 166, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
}
.box3-header-right {
width: 49px;
height: 24px;
margin-top: 12px;
margin-right: 7px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
......@@ -1104,41 +2027,180 @@ onMounted(async () => {
}
}
.box4 {
margin-left: 20px;
width: 521px;
height: 450px;
margin-left: 16px;
width: 792px;
height: 452px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
border-radius: 4px;
.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;
margin-top: 16px;
margin-left: 22px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
margin-top: 16px;
margin-left: 26px;
height: 22px;
margin-top: 12px;
margin-left: 18px;
height: 26px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-size: 20px;
font-weight: 700;
line-height: 22px;
line-height: 26px;
}
.header-right {
margin-left: 550px;
width: 49px;
height: 24px;
margin-top: 12px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
.box4-main {
width: 452px;
margin-top: 8px;
height: 360px;
height: 390px;
}
}
}
.center-footer1 {
margin-top: 21px;
height: 450px;
display: flex;
justify-content: center;
.box5 {
width: 792px;
height: 450px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box5-header {
width: 792px;
height: 48px;
display: flex;
border-bottom: 1px solid rgba(240, 242, 244, 1);
.header-icon {
width: 22px;
height: 20px;
margin-left: 25px;
margin-top: 15px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
height: 26px;
margin-top: 11px;
margin-left: 13px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
}
.box5-main {
height: 400px;
box-sizing: border-box;
.box5-item {
width: 730px;
margin-top: 16px;
margin-left: 25px;
display: flex;
.icon {
margin-top: 6px;
width: 24px;
height: 22px;
img {
width: 100%;
height: 100%;
}
}
.info {
margin-left: 13px;
width: 100%;
.info-header {
display: flex;
margin-top: 4px;
justify-content: space-between;
.title {
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
.time {
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
.info-content {
margin-top: 6px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
}
}
.box6 {
margin-left: 16px;
width: 792px;
height: 450px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box6-header {
width: 792px;
height: 48px;
display: flex;
border-bottom: 1px solid rgba(240, 242, 244, 1);
.header-icon {
width: 22px;
height: 20px;
margin-left: 25px;
margin-top: 15px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
height: 26px;
margin-top: 11px;
margin-left: 13px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
}
.box6-main {
height: 401px;
}
}
}
......
src/views/decree/decreeHome/utils/barChart.js 0 → 100644
浏览文件 @ 259b19f0
import * as echarts from "echarts";
const getBarChart = (nameList, valueList) => {
const option = {
tooltip: {},
grid: {
top: '3%',
right: '3%',
bottom: '1%',
left: '1%',
containLabel: true
},
yAxis: {
type: 'value',
splitLine: {
show: false
},
axisLine: {
show: false
},
show: true
},
xAxis: {
type: 'category',
data: nameList,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: true
},
axisLabel: {
show: true
}
},
series: [{
type: 'bar',
data: valueList,
label: {
show: true,
position: 'top',
color: 'rgba(10, 87, 166, 1)',
fontWeight: 'bold', // 文字加粗
fontSize: 14,
formatter: function (params) {
return params.value
},
},
barWidth: 20,
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0,
[{
offset: 0,
color: 'rgba(10, 87, 166, 0)'
},
{
offset: 1,
color: 'rgba(10, 87, 166, 1)'
}
]);
},
barBorderRadius: 10,
}
}]
}
return option
}
export default getBarChart
\ No newline at end of file
src/views/decree/decreeHome/utils/cleandarHeat.js 0 → 100644
浏览文件 @ 259b19f0
const getCalendarHeatChart = (data) => {
const option = {
title: {
top: 30,
left: 'center',
text: `日历热力图`,
show: false
},
tooltip: {
position: 'top',
formatter: function (params) {
const date = new Date(params.data[0]);
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}<br/>数值: ${params.data[1]}`;
}
},
visualMap: {
show: false,
min: 0,
max: 500,
calculable: true,
orient: 'horizontal',
left: 'center',
top: 65,
inRange: {
color: ['#E7F3FF', '#8AC4FF', '#0A57A6', '#FFC069', '#CE4F51']
},
textStyle: {
color: '#7f8c8d'
}
},
calendar: {
top: 24,
left: 30,
right: 30,
cellSize: ['auto', 20],
range: '2025',
itemStyle: {
borderWidth: 0.5,
borderColor: '#ccc'
},
yearLabel: { show: true },
monthLabel: {
nameMap: 'cn'
},
dayLabel: {
nameMap: ['日', '一', '二', '三', '四', '五', '六'],
show: false
}
},
series: {
type: 'heatmap',
coordinateSystem: 'calendar',
data: data
}
};
return option
}
export default getCalendarHeatChart
\ No newline at end of file
src/views/decree/decreeHome/utils/piechart.js 0 → 100644
浏览文件 @ 259b19f0
const getPieChart = (data,colorList) => {
let option = {
color: colorList,
series: [
{
type: 'pie',
radius: [110, 143],
height: '100%',
left: 'center',
width: '100%',
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
label: {
alignTo: 'edge',
formatter: '{name|{b}}\n{time|{c} 条 {d}%}',
minMargin: 5,
edgeDistance: 10,
lineHeight: 24,
rich: {
time: {
fontSize: 16,
color: '#999'
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < 556 / 2;
const points = params.labelLinePoints;
// Update the end point.
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: data
}]
}
return option
}
export default getPieChart;
\ No newline at end of file
src/views/decree/decreeLayout/index.vue
浏览文件 @ 259b19f0
......@@ -204,7 +204,7 @@ const mainHeaderBtnList = ref([
icon: icon3,
activeIcon: icon3Active,
name: "影响分析",
// path: "/billLayout/influence",
path: "/decreeLayout/influence",
}
]);
......@@ -233,153 +233,153 @@ onMounted(() => {
<style lang="scss" scoped>
.layout-container {
width: 1920px;
height: 1080px;
height: 1016px;
background: rgba(249, 250, 252, 1);
position: relative;
.layout-header {
width: 1920px;
height: 64px;
// background: #0a121e;
background: #fff;
// border-bottom: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
// margin-bottom: 13px;
display: flex;
position: relative;
z-index: 99;
.layout-header-left {
width: 480px;
display: flex;
.logo-box {
width: 36px;
height: 36px;
margin: 14px;
// .layout-header {
// width: 1920px;
// height: 64px;
// // background: #0a121e;
// background: #fff;
// // border-bottom: 1px solid rgba(0, 0, 0, 0.1);
// box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
// // margin-bottom: 13px;
// display: flex;
// position: relative;
// z-index: 99;
// .layout-header-left {
// width: 480px;
// display: flex;
// .logo-box {
// width: 36px;
// height: 36px;
// margin: 14px;
img {
width: 100%;
height: 100%;
border-radius: 6px;
}
}
.title-box {
height: 64px;
width: 350px;
margin: 0 5px;
color: #eee;
line-height: 64px;
font-size: 20px;
font-weight: bold;
color: rgba(10, 18, 30, 1);
font-family: Microsoft YaHei;
font-size: 22px;
font-weight: 700;
text-align: left;
}
}
.layout-header-center {
width: 700px;
display: flex;
justify-content: space-between;
margin-left: 200px;
.nav-item {
border-radius: 5px;
cursor: pointer;
display: flex;
&:hover {
background: rgba(255, 255, 255, 0.2);
}
.nav-icon-box {
width: 25px;
height: 25px;
margin: 22px 0 20px 5px;
.nav-icon {
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.nav-icon-active {
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
}
.name-box {
margin: 18px 5px;
height: 30px;
text-align: center;
line-height: 30px;
color: rgba(59, 65, 75, 1);
letter-spacing: 2px;
font-size: 18px;
}
// .nameActive {
// color: #ea9518;
// img {
// width: 100%;
// height: 100%;
// border-radius: 6px;
// }
// }
// .title-box {
// height: 64px;
// width: 350px;
// margin: 0 5px;
// color: #eee;
// line-height: 64px;
// font-size: 20px;
// font-weight: bold;
// color: rgba(10, 18, 30, 1);
// font-family: Microsoft YaHei;
// font-size: 22px;
// font-weight: 700;
// text-align: left;
// }
}
.navItemActive {
// background: #295dab;
// border-bottom: 4px solid #ea9518;
// }
// .layout-header-center {
// width: 700px;
// display: flex;
// justify-content: space-between;
// margin-left: 200px;
// .nav-item {
// border-radius: 5px;
// cursor: pointer;
// display: flex;
// &:hover {
// background: #295dab;
// border-bottom: 4px solid #ea9518;
// background: rgba(255, 255, 255, 0.2);
// }
}
}
.layout-header-right {
flex: 1;
display: flex;
justify-content: flex-end;
.nav-search {
width: 22px;
height: 22px;
margin: 21px 0;
}
.nav-message {
width: 22px;
height: 22px;
margin: 21px 30px;
}
.nav-usr {
width: 110px;
display: flex;
height: 40px;
margin: 12px 5px 12px 0;
.usr-img {
margin-top: 4px;
height: 32px;
width: 32px;
background: rgba(255, 255, 255, 0.5);
border-radius: 100%;
box-sizing: border-box;
padding: 4px;
// .nav-icon-box {
// width: 25px;
// height: 25px;
// margin: 22px 0 20px 5px;
// .nav-icon {
// width: 20px;
// height: 20px;
// img {
// width: 100%;
// height: 100%;
// }
}
.usr-info {
height: 40px;
line-height: 40px;
text-align: center;
font-size: 14px;
margin-left: 10px;
}
}
}
}
// }
// .nav-icon-active {
// width: 20px;
// height: 20px;
// img {
// width: 100%;
// height: 100%;
// }
// }
// }
// .name-box {
// margin: 18px 5px;
// height: 30px;
// text-align: center;
// line-height: 30px;
// color: rgba(59, 65, 75, 1);
// letter-spacing: 2px;
// font-size: 18px;
// }
// // .nameActive {
// // color: #ea9518;
// // font-weight: bold;
// // }
// }
// .navItemActive {
// // background: #295dab;
// // border-bottom: 4px solid #ea9518;
// // &:hover {
// // background: #295dab;
// // border-bottom: 4px solid #ea9518;
// // }
// }
// }
// .layout-header-right {
// flex: 1;
// display: flex;
// justify-content: flex-end;
// .nav-search {
// width: 22px;
// height: 22px;
// margin: 21px 0;
// }
// .nav-message {
// width: 22px;
// height: 22px;
// margin: 21px 30px;
// }
// .nav-usr {
// width: 110px;
// display: flex;
// height: 40px;
// margin: 12px 5px 12px 0;
// .usr-img {
// margin-top: 4px;
// height: 32px;
// width: 32px;
// background: rgba(255, 255, 255, 0.5);
// border-radius: 100%;
// box-sizing: border-box;
// padding: 4px;
// // img {
// // width: 100%;
// // height: 100%;
// // }
// }
// .usr-info {
// height: 40px;
// line-height: 40px;
// text-align: center;
// font-size: 14px;
// margin-left: 10px;
// }
// }
// }
// }
.layout-main {
width: 100%;
height: calc(100% - 64px);
height: 100%;
.layout-main-header {
height: 137px;
background: rgba(255, 255, 255, 1);
......
src/views/decree/decreeLayout/influence/index.vue 0 → 100644
浏览文件 @ 259b19f0
<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-right1">
<el-checkbox
v-model="isChecked"
label="只看中国企业"
size="large"
/>
</div>
<div class="header-right">
<img src="./assets/images/header-right-icon.png" alt="" />
</div>
</div>
<div class="box1-top" id="chart1"></div>
<div class="box1-tab-box">
<div
class="tab"
:class="{ tabActive: tabActiveIndex === index }"
v-for="(item, index) in tabList"
:key="index"
>
{{ item }}
</div>
</div>
<div class="box1-list-box">
<div
class="box1-item"
v-for="(item, index) in companyList"
:key="index"
>
<div class="id">{{ index + 1 }}</div>
<div class="title">{{ item.name }}</div>
<div class="icon">
<img
v-if="item.status === 'up'"
src="./assets/images/up.png"
alt=""
/>
<img v-else src="./assets/images/down.png" alt="" />
</div>
</div>
</div>
<div class="box1-footer">
<div class="box1-footer-left">{{ `共105家企业` }}</div>
<div class="box1-footer-right">
<el-pagination
background
layout="prev, pager, next"
size="small"
:total="105"
/>
</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-right1"></div>
<div class="header-right">
<img src="./assets/images/header-right-icon.png" alt="" />
</div>
</div>
<div class="box2-main">
<div class="box2-line-box"></div>
<div
class="box2-item"
:class="{ box2ItemFooter: index % 2 }"
v-for="(item, index) in timeLineList"
:key="index"
>
<div class="point" :class="{ pointFooter: index % 2 }">
<img src="./assets/images/point.png" alt="" />
</div>
<div class="box2-item-header">
<div class="title">{{ item.time }}</div>
</div>
<div class="box2-item-content">
{{ item.content }}
</div>
</div>
</div>
<div class="box2-footer">
<div class="footer-left">
<img src="./assets/images/footer-icon1.png" alt="" />
</div>
<div class="footer-center">
{{
`政令目前仍处于关键的执行框架搭建期。该政令旨在通过推动“全栈式”美国AI技术出口，巩固其技术霸权并减少国际社会对美国对手国家技术的依赖`
}}
</div>
<div class="footer-right">
<img src="./assets/images/footer-icon2.png" alt="" />
</div>
</div>
</div>
<div class="box3">
<div class="box-header">
<div class="icon"></div>
<div class="title">{{ "历史相似举措及落实情况" }}</div>
<div class="header-right1"></div>
<div class="header-right">
<img src="./assets/images/header-right-icon.png" alt="" />
</div>
</div>
<div class="box3-main">
<div class="box3-item" v-for="(item, index) in box3List" :key="index">
<div class="box3-item-left">
<div class="text">
{{ item.type }}
</div>
</div>
<div class="box3-item-right">
<div class="right-top">
<div class="title">{{ item.title }}</div>
<div class="tag">{{ item.tag }}</div>
</div>
<div class="right-footer">
<div class="content">{{ item.content }}</div>
<div class="time">{{ item.time }}</div>
</div>
</div>
</div>
</div>
<div class="box3-footer">
<div class="footer-left">
<img src="./assets/images/footer-icon1.png" alt="" />
</div>
<div class="footer-center">
{{
`中美经济深度交织，全面脱钩成本高昂且不现实。其核心揭示了三大纽带：生产网络相互依存使强行分离代价巨大；人才双向流动推动创新却成政策博弈焦点；能源领域合作与竞争并存，关乎全球气候治理与经济博弈。报告主张理性竞合，在竞争中找到合作路径。`
}}
</div>
<div class="footer-right">
<img src="./assets/images/footer-icon2.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import getBarChart from "./utils/barChart";
const chart1Data = ref({
title: ["集成电路", "新能源", "人工智能", "先进制造", "量子科技"],
value: [109, 95, 79, 25, 11],
});
const tabActiveIndex = ref(0);
const tabList = ref(["集成电路", "新能源", "人工智能", "先进制造", "量子科技"]);
const companyList = ref([
{
name: "宁德时代新能源科技股份有限公司",
status: "down",
},
{
name: "比亚迪股份有限公司",
status: "down",
},
{
name: "隆基绿能科技股份有限公司",
status: "down",
},
{
name: "晶科能源控股有限公司",
status: "down",
},
{
name: "厦门海辰储能科技股份有限公司",
status: "down",
},
{
name: "国轩高科股份有限公司",
status: "up",
},
{
name: "远景科技集团",
status: "down",
},
{
name: "惠州亿纬锂能股份有限公司",
status: "down",
},
{
name: "天合光能股份有限公司",
status: "down",
},
{
name: "晶澳太阳能科技股份有限公司",
status: "up",
},
]);
const companyTotalNum = ref(105);
const isChecked = ref(true);
const box3List = ref([
{
type: "科技法案",
title: "瓦森纳安排",
content: "落实情况：持续有效，但面临技术快速迭代挑战。",
time: "1996-至今",
tag: "人工智能",
},
{
type: "科技法案",
title: "云计算出口管制",
content: "落实情况：部分有效，但执行难度大。",
time: "1996-至今",
tag: "人工智能",
},
{
type: "科技法案",
title: "芯片与科学法案",
content: "落实情况：正在实施，效果待观察。",
time: "2022-至今",
tag: "人工智能",
},
{
type: "科技法案",
title: "AI芯片出口管制",
content: "落实情况：部分有效，但催生中国自主创新。",
time: "1996-至今",
tag: "人工智能",
},
{
type: "科技法案",
title: "瓦森纳安排",
content: "落实情况：持续有效，但面临技术快速迭代挑战。",
time: "1996-至今",
tag: "人工智能",
},
{
type: "科技法案",
title: "瓦森纳安排",
content: "落实情况：持续有效，但面临技术快速迭代挑战。",
time: "1996-至今",
tag: "人工智能",
},
]);
const timeLineList = ref([
{
time: "2025年7月25日",
content: "商务部已成立AI出口计划办公室，并开始招募专业人员。",
},
{
time: "2025年7月31日",
content: "英伟达、微软、谷歌等企业已提交初步技术栈提案。",
},
{
time: "2025年8月5日",
content: "国务院开始与盟友国家进行初步磋商。",
},
{
time: "2025年8月9日",
content:"国防部、能源部安全审查流程尚未最终确定。",
},
{
time: "2025年8月12日",
content: "商务部已成立AI出口计划办公室，并开始招募专业人员。",
},
]);
// 绘制echarts图表
const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId);
chartDom.removeAttribute("_echarts_instance_");
let chart = echarts.init(chartDom);
chart.setOption(option);
return chart;
};
onMounted(() => {
let chart1 = getBarChart(chart1Data.value.title, chart1Data.value.value);
setChart(chart1, "chart1");
});
</script>
<style lang="scss" scoped>
.wrapper {
width: 100%;
height: 879px;
display: flex;
.box-header {
display: flex;
height: 48px;
position: relative;
.icon {
margin-top: 20px;
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
height: 24px;
margin-left: 14px;
margin-top: 16px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
.header-right {
top: 14px;
right: 12px;
position: absolute;
width: 28px;
width: 28px;
img {
width: 100%;
height: 100%;
}
}
.header-right1 {
position: absolute;
top: 8px;
right: 60px;
}
}
.left {
margin-left: 160px;
margin-top: 16px;
.box1 {
width: 480px;
height: 845px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box1-top {
width: 446px;
height: 188px;
margin: 7px auto 0;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
background: rgba(247, 248, 249, 1);
}
.box1-tab-box {
height: 57px;
width: 446px;
margin: 0 auto;
display: flex;
.tab {
margin-top: 18px;
margin-right: 8px;
padding: 0 8px;
height: 28px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
cursor: pointer;
&:hover {
background: var(--btn-active-bg-color);
border: 1px solid var(--btn-active-border-color);
}
}
.tabActive {
color: var(--btn-active-text-color);
background: var(--btn-active-bg-color);
border: 1px solid var(--btn-active-border-color);
}
}
.box1-list-box {
height: 480px;
width: 446px;
margin: 0 auto;
.box1-item {
width: 446px;
height: 48px;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
display: flex;
.id {
width: 24px;
height: 24px;
margin-top: 12px;
margin-left: 12px;
border-radius: 12px;
background: #e7f3ff;
font-size: 14px;
font-family: Microsoft YaHei;
text-align: center;
line-height: 24px;
color: var(--color-main-active);
}
.title {
margin-left: 10px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 48px;
}
.icon {
width: 8px;
height: 6px;
margin-top: 14px;
margin-left: 6px;
img {
width: 100%;
height: 100%;
}
}
}
}
.box1-footer {
height: 65px;
width: 446px;
margin: 0 auto;
display: flex;
justify-content: space-between;
box-sizing: border-box;
.box1-footer-left {
margin-top: 25px;
height: 18px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
}
.box1-footer-right {
margin-top: 23px;
}
}
}
}
.right {
margin-left: 17px;
margin-top: 16px;
.box2 {
width: 1103px;
height: 415px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box2-main {
margin: 0 auto;
margin-top: 10px;
height: 260px;
width: 1054px;
overflow-x: auto;
overflow-y: hidden;
display: flex;
position: relative;
padding-left: 120px;
.box2-line-box {
position: absolute;
left: 0;
top: 114px;
height: 8px;
width: 1556px;
background: url("./assets/images/line-bg.png") repeat;
}
.box2-item {
width: 300px;
height: 120px;
// background: pink;
position: relative;
box-sizing: border-box;
padding-left: 13px;
margin-left: -100px;
border-left: 1px solid #0a57a6;
.box2-item-header {
display: flex;
width: 240px;
.title {
color: rgba(10, 87, 166, 1);
height: 26px;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
}
}
.box2-item-content {
width: 210px;
min-height: 48px;
max-height: 96px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
overflow: hidden;
}
.point {
position: absolute;
left: -8px;
bottom: -7px;
width: 15px;
height: 15px;
img{
width: 100%;
height: 100%;
}
}
.pointFooter {
position: absolute;
left: -8px;
top: -7px;
width: 15px;
height: 15px;
img{
width: 100%;
height: 100%;
}
}
.time {
height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
position: absolute;
bottom: -36px;
left: 0;
}
}
.box2ItemFooter {
margin-top: 118px;
margin-left: -120px;
box-sizing: border-box;
padding-top: 20px;
// display: flex;
// flex-direction: column;
// justify-content: flex-end;
}
}
.box2-footer {
margin-top: 6px;
width: 1057px;
height: 64px;
box-sizing: border-box;
border: 1px rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
margin: 14px auto 0;
padding: 6px 12px 6px 12px;
display: flex;
.footer-left {
width: 19px;
height: 20px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
.footer-center {
margin-left: 13px;
width: 964px;
height: 48px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
}
.footer-right {
margin-left: 13px;
width: 24px;
height: 24px;
border-radius: 12px;
background: rgba(231, 243, 255, 1);
margin-top: 14px;
img {
margin: 6px;
width: 12px;
height: 12px;
}
}
}
}
.box3 {
margin-top: 15px;
width: 1103px;
height: 415px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box3-main {
height: 264px;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-left: 21px;
margin-right: 26px;
.box3-item {
margin-top: 12px;
width: 520px;
height: 76px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
display: flex;
.box3-item-left {
width: 54px;
height: 54px;
border-radius: 27px;
background: #e7f3ff;
text-align: center;
margin-top: 11px;
margin-left: 14px;
.text {
width: 33px;
height: 30px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 700;
line-height: 18px;
margin: 11px auto;
}
}
.box3-item-right {
margin-left: 8px;
width: 433px;
.right-top {
display: flex;
justify-content: space-between;
.title {
margin-top: 13px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
.tag {
margin-top: 11px;
width: 72px;
height: 24px;
box-sizing: border-box;
border: 1px solid rgba(255, 163, 158, 1);
border-radius: 4px;
background: rgba(255, 241, 240, 1);
color: rgba(245, 34, 45, 1);
}
}
.right-footer {
margin-top: 2px;
display: flex;
justify-content: space-between;
.content {
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
width: 353px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
width: 78px;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
.box3-footer {
width: 1057px;
height: 64px;
box-sizing: border-box;
border: 1px rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
margin: 14px auto 0;
padding: 6px 12px 6px 12px;
display: flex;
.footer-left {
width: 19px;
height: 20px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
.footer-center {
margin-left: 13px;
width: 964px;
height: 48px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
}
.footer-right {
margin-left: 13px;
width: 24px;
height: 24px;
border-radius: 12px;
background: rgba(231, 243, 255, 1);
margin-top: 14px;
img {
margin: 6px;
width: 12px;
height: 12px;
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/decree/decreeLayout/influence/utils/barChart.js 0 → 100644
浏览文件 @ 259b19f0
import * as echarts from "echarts";
const getBarChart = (nameList, valueList) => {
const colorList = ['#b37feb', '#ffc53e', '#36cfc9', '#5c80f7', '#ff7d7a', '#4a9cff']
const option = {
tooltip: {},
grid: {
top: '3%',
right: '7%',
bottom: '1%',
left: '1%',
containLabel: true
},
xAxis: {
type: 'value',
splitLine: {
show: false
},
show: false
},
yAxis: {
type: 'category',
data: nameList,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true
}
},
series: [{
type: 'bar',
data: valueList.map((item,index) => {
return {
value: item,
label: {
textStyle: {
color: colorList[index]
}
}
};
}
),
barWidth: 8,
label: {
show: true,
position: [355, 0],
formatter: function(params) {
return params.value
}
},
itemStyle: {
color: function (params) {
var colorList = [
['rgba(179, 127, 235, 0.1)', 'rgba(179, 127, 235, 1)'],
['rgba(255, 197, 61, 0.1)', 'rgba(255, 197, 61, 1)'],
['rgba(54, 207, 201, 0.1)', 'rgba(54, 207, 201, 1)'],
['rgba(89, 126, 247, 0.1)', 'rgba(89, 126, 247, 1)'],
['rgba(255, 192, 105, 0.1)', 'rgba(255, 192, 105, 1)'],
// ['#fff', '#4a9cff'],
];
var index = params.dataIndex;
if (params.dataIndex >= colorList.length) {
index = params.dataIndex - colorList.length;
}
return new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: colorList[index][0]
},
{
offset: 1,
color: colorList[index][1]
}
]);
},
barBorderRadius: 4,
}
}]
}
return option
}
export default getBarChart
\ No newline at end of file
浏览文件 @ 259b19f0
No preview for this file type
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论