提交 5e8a9085 authored 作者: coderBryanFu's avatar coderBryanFu

update

上级 08105c8b
......@@ -6,6 +6,9 @@ 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)
......
......@@ -33,6 +33,7 @@ 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'
......@@ -245,30 +246,16 @@ const routes = [
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: '对华科研影响' }
// }
// ]
// }
// 影响分析路由
{
path: 'influence',
name: 'DecreeInfluence',
component: DecreeInfluence,
meta: {
title: '影响分析'
},
}
]
},
......
: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
: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
/* 全局滚动条样式 */
* {
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
......@@ -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%;
}
}
}
}
......
......@@ -302,7 +302,7 @@ onMounted(() => {});
}
}
.siderBtnActive {
background: rgba(22, 119, 255, 1);
background: var(--color-main-active);
.btn-text {
color: #fff !important;
}
......
......@@ -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;
cursor: pointer;
&:hover {
background: rgba(225, 225, 225, 0.3);
}
.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%;
}
}
}
}
......@@ -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;
cursor: pointer;
&:hover {
background: rgba(225, 225, 225, 0.3);
}
.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;
.btn-more {
width: 108px;
height: 32px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
}
......@@ -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 {
......
......@@ -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;
......
......@@ -105,7 +105,7 @@ onBeforeUnmount(() => {
<style lang="scss" scoped>
.echarts-wrap {
// width: 100%;
width: 576px;
height: 215px;
width: 792px;
height: 401px;
}
</style>
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
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
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
......@@ -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;
// 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;
// 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;
// // 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-search {
// width: 22px;
// height: 22px;
// margin: 21px 0;
// }
.nav-message {
width: 22px;
height: 22px;
margin: 21px 30px;
}
// .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;
}
}
}
}
// .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);
......
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
......@@ -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;
}
......
......@@ -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;
......
......@@ -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;
......@@ -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;
......
......@@ -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;
}
......
......@@ -376,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;
......@@ -439,10 +439,10 @@ onMounted(async () => {
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;
......@@ -452,11 +452,11 @@ onMounted(async () => {
text-overflow: ellipsis;
white-space: nowrap;
}
}
.btnActive {
border: 1px solid rgba(20, 89, 187, 1);
background: rgba(246, 251, 255, 1);
.btnActive {
border: 1px solid var(--btn-active-border-color);
background: var(--btn-active-bg-color);
color: var(--btn-active-text-color);
}
}
}
.left-footer {
......@@ -907,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;
......
......@@ -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;
......
No preview for this file type
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论