2026新UI
This commit is contained in:
lnljyang
BIN
screen.png
Normal file
BIN
screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 323 KiB |
@@ -47,7 +47,7 @@
|
|||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
//滚动条的设置
|
//滚动条的设置
|
||||||
background-color: rgba(25, 118, 210, 0);
|
background-color: rgba(0, 212, 170, 0);
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
@@ -55,7 +55,7 @@
|
|||||||
&:hover {
|
&:hover {
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
//滚动条的设置
|
//滚动条的设置
|
||||||
background-color: rgba(25, 118, 210, 0.3);
|
background-color: rgba(0, 212, 170, 0.3);
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
@@ -75,7 +75,7 @@
|
|||||||
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb:hover {
|
&::-webkit-scrollbar-thumb:hover {
|
||||||
background-color: rgba(25, 118, 210, .5);
|
background-color: rgba(0, 212, 170, .5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -106,7 +106,7 @@
|
|||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: #1976d2;
|
border-color: #00D4AA;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -126,7 +126,7 @@
|
|||||||
}
|
}
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: #1976d2;
|
border-color: #00D4AA;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -136,9 +136,9 @@
|
|||||||
.yh-big-button {
|
.yh-big-button {
|
||||||
width: 53px;
|
width: 53px;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
background: #1976d2;
|
background: #00D4AA;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
// border-color: #1976d2;
|
// border-color: #00D4AA;
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -147,8 +147,8 @@
|
|||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
// border-color: #1565c0;
|
// border-color: #00bfa5;
|
||||||
background: #1565c0;
|
background: #00bfa5;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -195,13 +195,13 @@
|
|||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
//滚动条的设置
|
//滚动条的设置
|
||||||
background-color: rgba(25, 118, 210, 0.3);
|
background-color: rgba(0, 212, 170, 0.3);
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb:hover {
|
&::-webkit-scrollbar-thumb:hover {
|
||||||
background-color: rgba(25, 118, 210, .5);
|
background-color: rgba(0, 212, 170, .5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ve-table-content {
|
.ve-table-content {
|
||||||
@@ -256,7 +256,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.ve-table-row-hover tr.ve-table-body-tr:hover td {
|
&.ve-table-row-hover tr.ve-table-body-tr:hover td {
|
||||||
background-color: rgba(25, 118, 210, 0.08);
|
background-color: rgba(0, 212, 170, 0.08);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,104 +1,109 @@
|
|||||||
// 颜色
|
// 颜色 - 亮绿色主题
|
||||||
$colors: (
|
$colors: (
|
||||||
"primary": #1976d2,
|
"primary": #00D4AA,
|
||||||
"info-1": #2196f3,
|
"info-1": #1de9b6,
|
||||||
"info": #1e88e5,
|
"info": #00bfa5,
|
||||||
"white": #ffffff,
|
"white": #ffffff,
|
||||||
"light": #f5f7fa,
|
"light": #f5f7fa,
|
||||||
"grey-1": #999999,
|
"grey-1": #999999,
|
||||||
"grey": #666666,
|
"grey": #666666,
|
||||||
"dark-1": #333333,
|
"dark-1": #333333,
|
||||||
"dark": #222222,
|
"dark": #222222,
|
||||||
"black-1": #333333,
|
"black-1": #333333,
|
||||||
"black": #000000,
|
"black": #000000,
|
||||||
"icon": #1976d2,
|
"icon": #00D4AA,
|
||||||
// 新增浅色主题专用颜色
|
// 新增浅色主题专用颜色
|
||||||
"bg-light": #fafbfc,
|
"bg-light": #f7f9fb,
|
||||||
"bg-lighter": #ffffff,
|
"bg-lighter": #ffffff,
|
||||||
"border-light": #e4e7ed,
|
"border-light": #e4e7ed,
|
||||||
"text-secondary": #606266,
|
"text-secondary": #606266,
|
||||||
"text-regular": #909399
|
"text-regular": #909399
|
||||||
);
|
);
|
||||||
|
|
||||||
// 字体大小
|
// 字体大小
|
||||||
$base-font-size: 0.2rem;
|
$base-font-size: 0.2rem;
|
||||||
$font-sizes: (
|
$font-sizes: (
|
||||||
xxs: 0.1,
|
xxs: 0.1,
|
||||||
//8px
|
//8px
|
||||||
xs: 0.125,
|
xs: 0.125,
|
||||||
//10px
|
//10px
|
||||||
sm: 0.2875,
|
sm: 0.2875,
|
||||||
//12px
|
//12px
|
||||||
md: 0.1625,
|
md: 0.1625,
|
||||||
//13px
|
//13px
|
||||||
lg: 0.175,
|
lg: 0.175,
|
||||||
//14px
|
//14px
|
||||||
xl: 0.2,
|
xl: 0.2,
|
||||||
//16px
|
//16px
|
||||||
xxl: 0.225,
|
xxl: 0.225,
|
||||||
//18px
|
//18px
|
||||||
xxxl: 0.25 //20px,,,,
|
xxxl: 0.25 //20px,,,,
|
||||||
);
|
);
|
||||||
|
|
||||||
// 宽高
|
// 宽高
|
||||||
.w-100 {
|
.w-100 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-100 {
|
.h-100 {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
//flex
|
//flex
|
||||||
.flex {
|
.flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-column {
|
.flex-column {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-wrap {
|
.flex-wrap {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-nowrap {
|
.flex-nowrap {
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
$flex-jc: (
|
$flex-jc: (
|
||||||
start: flex-start,
|
start: flex-start,
|
||||||
end: flex-end,
|
end: flex-end,
|
||||||
center: center,
|
center: center,
|
||||||
between: space-between,
|
between: space-between,
|
||||||
around: space-around,
|
around: space-around,
|
||||||
evenly: space-evenly,
|
evenly: space-evenly,
|
||||||
);
|
);
|
||||||
|
|
||||||
$flex-ai: (
|
$flex-ai: (
|
||||||
start: flex-start,
|
start: flex-start,
|
||||||
end: flex-end,
|
end: flex-end,
|
||||||
center: center,
|
center: center,
|
||||||
stretch: stretch,
|
stretch: stretch,
|
||||||
);
|
);
|
||||||
|
|
||||||
.flex-1 {
|
.flex-1 {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
//.mt-1 => margin top
|
//.mt-1 => margin top
|
||||||
//spacing
|
//spacing
|
||||||
$spacing-types: (
|
$spacing-types: (
|
||||||
m: margin,
|
m: margin,
|
||||||
p: padding,
|
p: padding,
|
||||||
);
|
);
|
||||||
$spacing-directions: (
|
$spacing-directions: (
|
||||||
t: top,
|
t: top,
|
||||||
r: right,
|
r: right,
|
||||||
b: bottom,
|
b: bottom,
|
||||||
l: left,
|
l: left,
|
||||||
);
|
);
|
||||||
$spacing-base-size: 0.5rem;
|
$spacing-base-size: 0.5rem;
|
||||||
$spacing-sizes: (
|
$spacing-sizes: (
|
||||||
0: 0,
|
0: 0,
|
||||||
1: 0.5,
|
1: 0.5,
|
||||||
2: 1,
|
2: 1,
|
||||||
3: 1.5,
|
3: 1.5,
|
||||||
4: 2,
|
4: 2,
|
||||||
5: 2.5,
|
5: 2.5,
|
||||||
);
|
);
|
||||||
@@ -1,12 +1,12 @@
|
|||||||
// 颜色
|
// 颜色 - 亮绿色主题
|
||||||
$primary-color: #1890ff;
|
$primary-color: #00D4AA;
|
||||||
$primary-color-hl: rgb(41, 52, 67);
|
$primary-color-hl: rgb(0, 212, 170);
|
||||||
$default-color: #006569;
|
$default-color: #00bfa5;
|
||||||
$link: #1890ff;
|
$link: #00D4AA;
|
||||||
$active-color: rgb(0, 101, 105);
|
$active-color: rgb(0, 191, 165);
|
||||||
$del-color: #ff1839;
|
$del-color: #ff1839;
|
||||||
$content-background: #f3f5fa;
|
$content-background: #f8fafb;
|
||||||
$table-header-background: #d8eaff;
|
$table-header-background: #d0f4ea;
|
||||||
|
|
||||||
$primary-color-rgba: rgba($color: $primary-color,
|
$primary-color-rgba: rgba($color: $primary-color,
|
||||||
$alpha: 0.1,
|
$alpha: 0.1,
|
||||||
|
|||||||
BIN
src/assets/img/new/banner.png
Normal file
BIN
src/assets/img/new/banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
BIN
src/assets/img/new/btn.png
Normal file
BIN
src/assets/img/new/btn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
src/assets/img/new/car.png
Normal file
BIN
src/assets/img/new/car.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/img/new/chat.png
Normal file
BIN
src/assets/img/new/chat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/img/new/chilun.png
Normal file
BIN
src/assets/img/new/chilun.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 972 B |
BIN
src/assets/img/new/dot.png
Normal file
BIN
src/assets/img/new/dot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/assets/img/new/logo.png
Normal file
BIN
src/assets/img/new/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
BIN
src/assets/img/new/yezi.png
Normal file
BIN
src/assets/img/new/yezi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
@@ -6,18 +6,17 @@
|
|||||||
* @FilePath: \web-pc\src\pages\big-screen\components\item-wrap\item-wrap.vue
|
* @FilePath: \web-pc\src\pages\big-screen\components\item-wrap\item-wrap.vue
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<dv-border-box-13 class="lr_titles">
|
<div class="lr_titles">
|
||||||
<div class="item_title" v-if="title !== ''">
|
<div class="item_title" v-if="title !== ''">
|
||||||
<div class="zuo"></div>
|
<span class="title-inner">{{ title }}</span>
|
||||||
<span class="title-inner"> {{ title }} </span>
|
<span class="unit">单位: kg</span>
|
||||||
<div class="you"></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
:class="title !== '' ? 'item_title_content' : 'item_title_content_def'"
|
:class="title !== '' ? 'item_title_content' : 'item_title_content_def'"
|
||||||
>
|
>
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
</dv-border-box-13>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -37,56 +36,62 @@ export default {
|
|||||||
methods: {},
|
methods: {},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang='scss' scoped>
|
<style lang="scss" scoped>
|
||||||
$item-title-height: 38px;
|
$item-title-height: 20px;
|
||||||
$item_title_content-height: calc(100% - 38px);
|
$item_title_content-height: calc(100% - 20px);
|
||||||
|
|
||||||
.lr_titles {
|
.lr_titles {
|
||||||
|
height: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
background: #ffffff;
|
||||||
:deep(.border-box-content) {
|
border-radius: 8px;
|
||||||
box-sizing: border-box;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||||
padding: 6px 16px 0px;
|
padding: 16px;
|
||||||
}
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
.item_title {
|
.item_title {
|
||||||
height: $item-title-height;
|
height: $item-title-height;
|
||||||
line-height: $item-title-height;
|
line-height: $item-title-height;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
color: #1976d2;
|
padding-bottom: 12px;
|
||||||
text-align: center;
|
|
||||||
// background: linear-gradient(to right, transparent, #f5f7fa, transparent);
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
justify-content: space-between;
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.zuo,
|
|
||||||
.you {
|
|
||||||
width: 58px;
|
|
||||||
height: 14px;
|
|
||||||
background-image: url("../../assets/img/titles/zuo.png");
|
|
||||||
}
|
|
||||||
|
|
||||||
.you {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
.title-inner {
|
.title-inner {
|
||||||
font-weight: 900;
|
font-size: 16px;
|
||||||
letter-spacing: 2px;
|
font-weight: 600;
|
||||||
background: linear-gradient(
|
color: #333333;
|
||||||
92deg,
|
letter-spacing: 1px;
|
||||||
#666666 0%,
|
position: relative;
|
||||||
#1976d2 48.8525390625%,
|
|
||||||
#1565c0 100%
|
// &::before {
|
||||||
);
|
// content: '';
|
||||||
-webkit-background-clip: text;
|
// position: absolute;
|
||||||
-webkit-text-fill-color: transparent;
|
// left: 0;
|
||||||
|
// top: 50%;
|
||||||
|
// transform: translateY(-50%);
|
||||||
|
// width: 4px;
|
||||||
|
// height: 16px;
|
||||||
|
// background: linear-gradient(180deg, #00D4AA 0%, #00bfa5 100%);
|
||||||
|
// border-radius: 2px;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
.unit {
|
||||||
|
width: 53px;
|
||||||
|
line-height: 19px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #ecfdf5;
|
||||||
|
color: #059669;
|
||||||
|
font-family: "PingFang SC";
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 10px;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.item_title_content {
|
.item_title_content {
|
||||||
height: $item_title_content-height;
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item_title_content_def {
|
.item_title_content_def {
|
||||||
|
|||||||
@@ -14,9 +14,9 @@
|
|||||||
.bg {
|
.bg {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 16px 16px 10px 16px;
|
padding: 16px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: #fafbfc;
|
background-color: #f7f9fb;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
@@ -25,88 +25,77 @@
|
|||||||
.host-body {
|
.host-body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
|
.d-flex {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
.title_wrap {
|
.title_wrap {
|
||||||
height: 60px;
|
height: 66px;
|
||||||
background-image: url("../assets/img/top.png");
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center center;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 0 24px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||||
|
|
||||||
.guang {
|
.logo {
|
||||||
position: absolute;
|
flex: 1;
|
||||||
bottom: -26px;
|
display: flex;
|
||||||
background-image: url("../assets/img/guang.png");
|
justify-content: flex-start;
|
||||||
background-position: 80px center;
|
|
||||||
width: 100%;
|
|
||||||
height: 56px;
|
|
||||||
|
|
||||||
.imgs {
|
img {
|
||||||
width: 320px;
|
height: 40px;
|
||||||
height: 35px;
|
width: auto;
|
||||||
margin-top: -0.6%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.imgs2 {
|
|
||||||
width: 236px;
|
|
||||||
/* height: 60px; */
|
|
||||||
margin-left: 150px;
|
|
||||||
margin-top: -9px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.zuojuxing,
|
.title {
|
||||||
.youjuxing {
|
flex: 0 0 auto;
|
||||||
position: absolute;
|
text-align: center;
|
||||||
top: -2px;
|
|
||||||
width: 140px;
|
|
||||||
height: 6px;
|
|
||||||
background-image: url("../assets/img/headers/juxing1.png");
|
|
||||||
}
|
|
||||||
|
|
||||||
.zuojuxing {
|
.title-text {
|
||||||
|
color: #00D4AA;
|
||||||
left: 11%;
|
font-family: Audiowide, sans-serif;
|
||||||
}
|
font-weight: 400;
|
||||||
|
font-size: 32px;
|
||||||
.youjuxing {
|
letter-spacing: 2px;
|
||||||
right: 11%;
|
}
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.timers {
|
.timers {
|
||||||
position: absolute;
|
display: flex;
|
||||||
right: 0;
|
justify-content: flex-end;
|
||||||
top: 30px;
|
border: 1px solid #d1fae5;
|
||||||
font-size: 18px;
|
box-sizing: border-box;
|
||||||
|
background: #ecfdf5;
|
||||||
|
padding: 8px 20px;
|
||||||
|
border-radius: 36px;
|
||||||
|
align-items: center;
|
||||||
|
width: fit-content;
|
||||||
|
margin-left: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
color: #065f46;
|
||||||
|
font-family: "PingFang TC";
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 17px;
|
||||||
|
|
||||||
.blq-icon-shezhi02 {
|
.blq-icon-shezhi02 {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #00D4AA;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #00bfa5;
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
|
||||||
position: relative;
|
|
||||||
// width: 500px;
|
|
||||||
text-align: center;
|
|
||||||
background-size: cover;
|
|
||||||
color: transparent;
|
|
||||||
height: 60px;
|
|
||||||
line-height: 46px;
|
|
||||||
|
|
||||||
.title-text {
|
|
||||||
font-size: 38px;
|
|
||||||
font-weight: 900;
|
|
||||||
letter-spacing: 6px;
|
|
||||||
width: 100%;
|
|
||||||
background: linear-gradient(92deg, #1976d2 0%, #2196f3 48.8525390625%, #42a5f5 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -122,12 +111,12 @@
|
|||||||
width: 130px;
|
width: 130px;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
border-radius: 18px 0px 0px 18px;
|
border-radius: 18px 0px 0px 18px;
|
||||||
color: #1976d2;
|
color: #00D4AA;
|
||||||
text-indent: 26px;
|
text-indent: 26px;
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
background: linear-gradient(to right, rgba(25, 118, 210, 0.15), rgba(25, 118, 210, 0));
|
background: linear-gradient(to right, rgba(0, 212, 170, 0.15), rgba(0, 212, 170, 0));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,29 +18,23 @@
|
|||||||
<div v-else class="host-body">
|
<div v-else class="host-body">
|
||||||
<!-- 头部 s -->
|
<!-- 头部 s -->
|
||||||
<div class="d-flex jc-center title_wrap">
|
<div class="d-flex jc-center title_wrap">
|
||||||
<div class="zuojuxing"></div>
|
<div class="logo">
|
||||||
<div class="youjuxing"></div>
|
<img src="../assets/img/new/logo.png" alt="" />
|
||||||
<div class="guang">
|
|
||||||
<!-- <p class="title-name">广州开发区交投氢能</p> -->
|
|
||||||
<!-- <img src="@/assets/img/logo.png" alt="" class="imgs"/> -->
|
|
||||||
<img src="@/assets/img/ln_logo.png" alt="" class="imgs2" />
|
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex jc-center">
|
<div class="title">
|
||||||
<div class="title">
|
<span class="title-text">Lingniu ESG Link</span>
|
||||||
<!--箱箱碳林可视化平台-->
|
</div>
|
||||||
<!--嘉兴海港碳服务平台-->
|
<div style="display: flex; flex: 1">
|
||||||
<!--2025.4.1 szy -->
|
<div class="timers">
|
||||||
<span class="title-text">Lingniu ESG Link</span>
|
{{ dateYear }} {{ dateWeek }} {{ dateDay }}
|
||||||
|
<!-- <button class="selectTime">选择日期</button> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<img
|
||||||
<div class="timers">
|
src="../assets/img/new/chilun.png"
|
||||||
{{ dateYear }} {{ dateWeek }} {{ dateDay }}
|
|
||||||
<!-- <button class="selectTime">选择日期</button> -->
|
|
||||||
<i
|
|
||||||
class="blq-icon-shezhi02"
|
|
||||||
style="margin-left: 10px"
|
style="margin-left: 10px"
|
||||||
@click="showSetting"
|
@click="showSetting"
|
||||||
></i>
|
alt=""
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 头部 e-->
|
<!-- 头部 e-->
|
||||||
|
|||||||
@@ -7,6 +7,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import echarts from "echarts";
|
import echarts from "echarts";
|
||||||
import { currentGET } from "api/modules";
|
import { currentGET } from "api/modules";
|
||||||
|
import { color } from "echarts/lib/export";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@@ -20,12 +21,26 @@ export default {
|
|||||||
// { name: '其它：10%', value: 260 }
|
// { name: '其它：10%', value: 260 }
|
||||||
],
|
],
|
||||||
],
|
],
|
||||||
colors: ["#1976d2", "#ff9800"],
|
colors: [
|
||||||
|
"#46AEF4",
|
||||||
|
"#10B981",
|
||||||
|
"#04724F",
|
||||||
|
"#C2F1E1",
|
||||||
|
"#EAFAF5",
|
||||||
|
"#F6F8FA",
|
||||||
|
],
|
||||||
//colors: ["#00E5FF", "#FF5733", "#FFBF00", "#5CDB95"]
|
//colors: ["#00E5FF", "#FF5733", "#FFBF00", "#5CDB95"]
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getData();
|
this.getData();
|
||||||
|
window.addEventListener("resize", this.handleResize);
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
window.removeEventListener("resize", this.handleResize);
|
||||||
|
if (this.chart) {
|
||||||
|
this.chart.dispose();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getData() {
|
getData() {
|
||||||
@@ -52,79 +67,173 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
handleResize() {
|
||||||
|
if (this.chart) {
|
||||||
|
this.chart.resize();
|
||||||
|
}
|
||||||
|
},
|
||||||
initChart() {
|
initChart() {
|
||||||
const myChart = echarts.init(this.$refs.chart); // 修复变量名不一致问题
|
this.$nextTick(() => {
|
||||||
let option = {
|
if (!this.$refs.chart) return;
|
||||||
title: {
|
|
||||||
text: "",
|
const myChart = echarts.init(this.$refs.chart);
|
||||||
left: "center",
|
|
||||||
textStyle: {
|
// 计算总数和每项的百分比
|
||||||
color: "#666666", // 将原来的 #999 改为更亮的灰色
|
const chartData = this.chartData[0];
|
||||||
fontWeight: "normal",
|
console.log("图表数据:", chartData);
|
||||||
fontSize: 12,
|
|
||||||
},
|
if (!chartData || chartData.length === 0) {
|
||||||
},
|
console.warn("图表数据为空");
|
||||||
series: this.chartData.map(function (data, idx) {
|
return;
|
||||||
var top = idx * 33.3;
|
}
|
||||||
return {
|
|
||||||
type: "pie",
|
const total = chartData.reduce(
|
||||||
radius: [40, 70],
|
(sum, item) => sum + Number(item.value),
|
||||||
top: top + "%",
|
0
|
||||||
height: "33.33%",
|
);
|
||||||
left: "center",
|
console.log("总数:", total);
|
||||||
width: "600px",
|
|
||||||
itemStyle: {
|
// 创建name到数据的映射
|
||||||
borderColor: "orange",
|
const dataMap = {};
|
||||||
borderWidth: 1,
|
chartData.forEach((item) => {
|
||||||
|
const numValue = Number(item.value);
|
||||||
|
const percent =
|
||||||
|
total > 0 ? ((numValue / total) * 100).toFixed(1) : "0.0";
|
||||||
|
dataMap[item.name] = {
|
||||||
|
value: numValue,
|
||||||
|
percent: percent,
|
||||||
|
};
|
||||||
|
console.log(`${item.name}: ${numValue}辆, ${percent}%`);
|
||||||
|
});
|
||||||
|
|
||||||
|
let option = {
|
||||||
|
title: {
|
||||||
|
text: `总计`,
|
||||||
|
subtext: `${total}`,
|
||||||
|
left: "24%",
|
||||||
|
top: "39%",
|
||||||
|
textAlign: "center",
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 13,
|
||||||
|
color: "#64748B",
|
||||||
},
|
},
|
||||||
label: {
|
subtextStyle: {
|
||||||
alignTo: "edge",
|
fontSize: 20,
|
||||||
formatter: ({ name, value, percent }) =>
|
fontWeight: "bold",
|
||||||
`{name|${name}}\n {value|${value}辆} {percent|${percent}%}`,
|
color: "#1E293B",
|
||||||
minMargin: 5,
|
},
|
||||||
edgeDistance: 10,
|
},
|
||||||
lineHeight: 20,
|
tooltip: {
|
||||||
rich: {
|
trigger: "item",
|
||||||
name: {
|
formatter: "{b}: {c}辆 ",
|
||||||
// 新增 name 样式
|
},
|
||||||
fontSize: 12,
|
legend: {
|
||||||
color: "#333333", // 使用深色
|
orient: "vertical",
|
||||||
padding: [0, 0, 5, 0],
|
right: "5%",
|
||||||
},
|
top: "middle",
|
||||||
value: {
|
formatter: (name) => {
|
||||||
fontSize: 12,
|
const data = dataMap[name];
|
||||||
color: "#1976d2",
|
if (data) {
|
||||||
padding: [0, 5, 0, 0],
|
return `${name} ${data.percent}%`;
|
||||||
},
|
}
|
||||||
percent: {
|
return name;
|
||||||
fontSize: 12,
|
},
|
||||||
color: "#ff9800", // 保留橙色
|
textStyle: {
|
||||||
|
color: "#333333",
|
||||||
|
fontSize: 13,
|
||||||
|
},
|
||||||
|
itemGap: 15,
|
||||||
|
itemWidth: 14,
|
||||||
|
itemHeight: 14,
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "车型分布",
|
||||||
|
type: "pie",
|
||||||
|
radius: ["45%", "65%"],
|
||||||
|
center: ["25%", "50%"],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 4,
|
||||||
|
borderColor: "#fff",
|
||||||
|
borderWidth: 2,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: "center",
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
color: "#1E293B",
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: "bold",
|
||||||
|
formatter: "{b}\n{c}辆",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: chartData.map((item, index) => ({
|
||||||
|
name: item.name,
|
||||||
|
value: Number(item.value),
|
||||||
|
itemStyle: {
|
||||||
|
color: this.colors[index % this.colors.length],
|
||||||
|
},
|
||||||
|
})),
|
||||||
},
|
},
|
||||||
labelLine: {
|
],
|
||||||
length: 40,
|
};
|
||||||
length2: 15,
|
|
||||||
maxSurfaceAngle: 80,
|
|
||||||
},
|
|
||||||
labelLayout: function (params) {
|
|
||||||
const isLeft = params.labelRect.x < myChart.getWidth() / 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,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
option && myChart.setOption(option);
|
||||||
this.chart = myChart;
|
this.chart = myChart;
|
||||||
|
this.chart.resize();
|
||||||
|
|
||||||
|
let isHoveringChart = false;
|
||||||
|
|
||||||
|
// 鼠标悬停在扇区时
|
||||||
|
myChart.on("mouseover", "series", () => {
|
||||||
|
isHoveringChart = true;
|
||||||
|
myChart.setOption({
|
||||||
|
title: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 鼠标离开扇区时
|
||||||
|
myChart.on("mouseout", "series", () => {
|
||||||
|
isHoveringChart = false;
|
||||||
|
myChart.setOption({
|
||||||
|
title: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 监听高亮事件（包括legend悬停触发的）
|
||||||
|
myChart.on("highlight", () => {
|
||||||
|
// 如果不是在扇区上悬停，说明是legend触发的
|
||||||
|
if (!isHoveringChart) {
|
||||||
|
myChart.setOption({
|
||||||
|
title: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 监听取消高亮事件
|
||||||
|
myChart.on("downplay", () => {
|
||||||
|
if (!isHoveringChart) {
|
||||||
|
myChart.setOption({
|
||||||
|
title: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
},
|
},
|
||||||
toggleMode() {
|
toggleMode() {
|
||||||
this.showPercentage = !this.showPercentage;
|
this.showPercentage = !this.showPercentage;
|
||||||
@@ -137,6 +246,7 @@ export default {
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.chart-container {
|
.chart-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 800px;
|
height: 100%;
|
||||||
|
min-height: 200px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -7,41 +7,40 @@
|
|||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div class="centermap">
|
<div class="centermap">
|
||||||
<div class="maptitle">
|
<!-- <div class="maptitle">
|
||||||
<div class="zuo"></div>
|
|
||||||
<span class="titletextBefore"
|
<span class="titletextBefore"
|
||||||
>今年累计碳减排<span class="titletext">{{ maptitle }}</span
|
>今年累计碳减排<span class="titletext">{{ maptitle }}</span
|
||||||
>{{ maptitle2 }}</span
|
>{{ maptitle2 }}</span
|
||||||
>
|
>
|
||||||
<div class="you"></div>
|
</div> -->
|
||||||
</div>
|
|
||||||
<div class="mapwrap">
|
<div class="mapwrap">
|
||||||
<dv-border-box-13>
|
<div class="map-card">
|
||||||
<div class="quanguo" @click="getData('china')" v-if="code !== 'china'">
|
<div class="quanguo1" @click="goToPage()">实时监控</div>
|
||||||
|
<div
|
||||||
|
class="quanguo1 quanguo"
|
||||||
|
@click="getData('china')"
|
||||||
|
v-if="code !== 'china'"
|
||||||
|
>
|
||||||
中国
|
中国
|
||||||
</div>
|
</div>
|
||||||
<div class="quanguo1" @click="goToPage()" v-if="showType === 1">
|
<div class="quanguo2">
|
||||||
车辆实况
|
羚牛全国车辆信息
|
||||||
|
<div class="btn" @click="changeShow1()" v-if="showType === 2">
|
||||||
|
车辆
|
||||||
|
</div>
|
||||||
|
<div class="btn" @click="changeShow2()" v-else>加氢站</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- <div
|
||||||
<div
|
|
||||||
class="quanguo2"
|
|
||||||
@click="changeShow1()"
|
|
||||||
:style="{ backgroundColor: currentBgColor2 }"
|
|
||||||
>
|
|
||||||
<div>车辆信息</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="quanguo3"
|
class="quanguo3"
|
||||||
@click="changeShow2()"
|
|
||||||
:style="{ backgroundColor: currentBgColor3 }"
|
:style="{ backgroundColor: currentBgColor3 }"
|
||||||
>
|
>
|
||||||
<div>加氢站</div>
|
<div>加氢站</div>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
<Echart id="CenterMap" :options="options" ref="CenterMap" />
|
<Echart id="CenterMap" :options="options" ref="CenterMap" />
|
||||||
<!-- <dv-flyline-chart :config="config" style="width:100%;height:100%;" /> -->
|
<!-- <dv-flyline-chart :config="config" style="width:100%;height:100%;" /> -->
|
||||||
</dv-border-box-13>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -75,20 +74,20 @@ export default {
|
|||||||
this.getYearData();
|
this.getYearData();
|
||||||
|
|
||||||
this.showType = 1;
|
this.showType = 1;
|
||||||
this.currentBgColor2 = "#1976d2";
|
this.currentBgColor2 = "#00D4AA";
|
||||||
this.getData("china");
|
this.getData("china");
|
||||||
//this.getData("440000");
|
//this.getData("440000");
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
changeShow1() {
|
changeShow1() {
|
||||||
this.showType = 1;
|
this.showType = 1;
|
||||||
this.currentBgColor2 = "#1976d2";
|
this.currentBgColor2 = "#00D4AA";
|
||||||
this.currentBgColor3 = "";
|
this.currentBgColor3 = "";
|
||||||
this.getData(this.code);
|
this.getData(this.code);
|
||||||
},
|
},
|
||||||
changeShow2() {
|
changeShow2() {
|
||||||
this.currentBgColor2 = "";
|
this.currentBgColor2 = "";
|
||||||
this.currentBgColor3 = "#1976d2";
|
this.currentBgColor3 = "#00D4AA";
|
||||||
this.showType = 2;
|
this.showType = 2;
|
||||||
this.getData(this.code);
|
this.getData(this.code);
|
||||||
},
|
},
|
||||||
@@ -322,18 +321,14 @@ export default {
|
|||||||
{ lte: 50, label: "1-50 辆" }, // 不指定 min，表示 min 为无限大（-Infinity）。
|
{ lte: 50, label: "1-50 辆" }, // 不指定 min，表示 min 为无限大（-Infinity）。
|
||||||
],
|
],
|
||||||
inRange: {
|
inRange: {
|
||||||
// 渐变颜色，从小到大
|
// 渐变颜色，从小到大（绿色系）
|
||||||
color: [
|
color: [
|
||||||
// "#c3d7df",
|
"#a7f3d0",
|
||||||
// "#5cb3cc",
|
"#6ee7b7",
|
||||||
// "#8abcd1",
|
"#34d399",
|
||||||
// "#66a9c9",
|
"#10b981",
|
||||||
// "#2f90b9",
|
"#059669",
|
||||||
// "#1781b5",
|
"#047857",
|
||||||
"#6EC3F7",
|
|
||||||
"#2196F3",
|
|
||||||
"#1565C0",
|
|
||||||
"#0D47A1",
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
textStyle: {
|
textStyle: {
|
||||||
@@ -437,12 +432,12 @@ export default {
|
|||||||
|
|
||||||
type: "scatter",
|
type: "scatter",
|
||||||
coordinateSystem: "geo",
|
coordinateSystem: "geo",
|
||||||
symbol:
|
// symbol:
|
||||||
"image://https://lnh2etest.oss-cn-shanghai.aliyuncs.com/truck25.png",
|
// "image://https://lnh2etest.oss-cn-shanghai.aliyuncs.com/truck25.png",
|
||||||
symbolSize: function (val) {
|
// symbolSize: function (val) {
|
||||||
return 20;
|
// return 20;
|
||||||
// return val[2] / 50;
|
// // return val[2] / 50;
|
||||||
},
|
// },
|
||||||
legendHoverLink: true,
|
legendHoverLink: true,
|
||||||
showEffectOn: "render",
|
showEffectOn: "render",
|
||||||
rippleEffect: {
|
rippleEffect: {
|
||||||
@@ -504,7 +499,7 @@ export default {
|
|||||||
textShadowBlur: 10,
|
textShadowBlur: 10,
|
||||||
textBorderWidth: 0,
|
textBorderWidth: 0,
|
||||||
color: "#333333",
|
color: "#333333",
|
||||||
show: true,
|
show: false,
|
||||||
},
|
},
|
||||||
// colorBy: "data",
|
// colorBy: "data",
|
||||||
},
|
},
|
||||||
@@ -542,18 +537,14 @@ export default {
|
|||||||
{ lte: 10, label: "1-10 座" }, // 不指定 min，表示 min 为无限大（-Infinity）。
|
{ lte: 10, label: "1-10 座" }, // 不指定 min，表示 min 为无限大（-Infinity）。
|
||||||
],
|
],
|
||||||
inRange: {
|
inRange: {
|
||||||
// 渐变颜色，从小到大
|
// 渐变颜色，从小到大（绿色系）
|
||||||
color: [
|
color: [
|
||||||
// "#c3d7df",
|
"#a7f3d0",
|
||||||
// "#5cb3cc",
|
"#6ee7b7",
|
||||||
// "#8abcd1",
|
"#34d399",
|
||||||
// "#66a9c9",
|
"#10b981",
|
||||||
// "#2f90b9",
|
"#059669",
|
||||||
// "#1781b5",
|
"#047857",
|
||||||
"#6EC3F7",
|
|
||||||
"#2196F3",
|
|
||||||
"#1565C0",
|
|
||||||
"#0D47A1",
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
textStyle: {
|
textStyle: {
|
||||||
@@ -772,132 +763,131 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.centermap {
|
.centermap {
|
||||||
margin-bottom: 30px;
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
.maptitle {
|
.maptitle {
|
||||||
height: 60px;
|
height: 50px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding-top: 10px;
|
align-items: center;
|
||||||
box-sizing: border-box;
|
margin-bottom: 8px;
|
||||||
|
padding: 0 20px;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||||
|
|
||||||
.titletext {
|
.titletext {
|
||||||
font-size: 32px;
|
font-size: 28px;
|
||||||
font-weight: 900;
|
font-weight: 700;
|
||||||
letter-spacing: 6px;
|
letter-spacing: 2px;
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
92deg,
|
92deg,
|
||||||
#0072ff 0%,
|
#00d4aa 0%,
|
||||||
#00eaff 48.8525390625%,
|
#1de9b6 48.8525390625%,
|
||||||
#01aaff 100%
|
#00bfa5 100%
|
||||||
);
|
);
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
margin: 0 10px;
|
margin: 0 8px;
|
||||||
}
|
}
|
||||||
.titletextBefore {
|
.titletextBefore {
|
||||||
font-size: 28px;
|
font-size: 16px;
|
||||||
font-weight: 900;
|
font-weight: 600;
|
||||||
letter-spacing: 6px;
|
letter-spacing: 1px;
|
||||||
color: #333333;
|
color: #666666;
|
||||||
margin: 0 10px;
|
|
||||||
}
|
|
||||||
.zuo,
|
|
||||||
.you {
|
|
||||||
background-size: 100% 100%;
|
|
||||||
width: 29px;
|
|
||||||
height: 20px;
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.zuo {
|
|
||||||
background: url("../../assets/img/xiezuo.png") no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
.you {
|
|
||||||
background: url("../../assets/img/xieyou.png") no-repeat;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mapwrap {
|
.mapwrap {
|
||||||
height: 548px;
|
flex: 1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
// padding: 0 0 10px 0;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.quanguo {
|
.map-card {
|
||||||
position: absolute;
|
width: 100%;
|
||||||
right: 20px;
|
height: 100%;
|
||||||
top: -46px;
|
background: #ffffff;
|
||||||
width: 80px;
|
border-radius: 8px;
|
||||||
height: 28px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||||
border: 1px solid #1976d2;
|
padding: 16px;
|
||||||
border-radius: 10px;
|
box-sizing: border-box;
|
||||||
color: #1976d2;
|
position: relative;
|
||||||
text-align: center;
|
|
||||||
line-height: 26px;
|
|
||||||
letter-spacing: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
|
|
||||||
0 0 6px rgba(0, 237, 237, 0.4);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.quanguo1 {
|
.quanguo1 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
top: 24px;
|
top: 16px;
|
||||||
width: 100px;
|
padding: 6px 16px;
|
||||||
height: 28px;
|
border-radius: 8px;
|
||||||
border: 1px solid #1976d2;
|
border: 1px solid #a7f3d0;
|
||||||
border-radius: 10px;
|
box-sizing: border-box;
|
||||||
color: #333333;
|
background: #d1fae5;
|
||||||
text-align: center;
|
|
||||||
line-height: 26px;
|
|
||||||
letter-spacing: 6px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
box-shadow: 0 2px 4px rgba(25, 118, 210, 0.3),
|
z-index: 999;
|
||||||
0 0 6px rgba(25, 118, 210, 0.2);
|
text-align: center;
|
||||||
font-family: "微软雅黑", sans-serif;
|
color: #047857;
|
||||||
z-index: 9999;
|
font-family: "PingFang SC";
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 15px;
|
||||||
|
}
|
||||||
|
.quanguo {
|
||||||
|
position: absolute;
|
||||||
|
right: 20px;
|
||||||
|
top: 56px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.quanguo2 {
|
.quanguo2 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 20px;
|
left: 20px;
|
||||||
top: 24px;
|
top: 16px;
|
||||||
width: 100px;
|
border-radius: 6px;
|
||||||
height: 28px;
|
color: #1e293b;
|
||||||
border: 1px solid #1976d2;
|
display: flex;
|
||||||
border-radius: 10px;
|
align-items: center;
|
||||||
color: #333333;
|
font-family: "PingFang SC";
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 24px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 26px;
|
|
||||||
letter-spacing: 6px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
box-shadow: 0 2px 4px rgba(25, 118, 210, 0.3),
|
z-index: 999;
|
||||||
0 0 6px rgba(25, 118, 210, 0.2);
|
.btn {
|
||||||
font-family: "微软雅黑", sans-serif;
|
width: 102px;
|
||||||
z-index: 9999;
|
height: 32px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: "PingFang SC";
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
padding-left: 10px;
|
||||||
|
line-height: 32px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-image: url("../../assets/img/new/btn.png");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.quanguo3 {
|
.quanguo3 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 20px;
|
left: 20px;
|
||||||
top: 60px;
|
top: 52px;
|
||||||
width: 100px;
|
padding: 6px 16px;
|
||||||
height: 28px;
|
background: #ffffff;
|
||||||
border: 1px solid #1976d2;
|
border: 1px solid #00d4aa;
|
||||||
border-radius: 10px;
|
border-radius: 6px;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 26px;
|
|
||||||
letter-spacing: 6px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
box-shadow: 0 2px 4px rgba(25, 118, 210, 0.3),
|
transition: all 0.3s ease;
|
||||||
0 0 6px rgba(25, 118, 210, 0.2);
|
z-index: 999;
|
||||||
font-family: "微软雅黑", sans-serif;
|
|
||||||
z-index: 9999;
|
&:hover {
|
||||||
|
background: rgba(0, 212, 170, 0.1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,188 +2,213 @@
|
|||||||
<div class="chart-block">
|
<div class="chart-block">
|
||||||
<!-- 左侧 柱状+折线图 -->
|
<!-- 左侧 柱状+折线图 -->
|
||||||
<div class="chart-container">
|
<div class="chart-container">
|
||||||
<v-chart class="bar-line-chart" :options="barLineOption" style="width: 390px;height: 250px;"/>
|
<v-chart
|
||||||
|
class="bar-line-chart"
|
||||||
|
:options="barLineOption"
|
||||||
|
style="width: 390px; height: 250px"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 右侧 两个环形图 -->
|
<!-- 右侧 两个环形图 -->
|
||||||
<div class="chart-container-right">
|
<div class="chart-container-right">
|
||||||
<v-chart class="pie-chart" :options="pieOptionOne" style="width: 140px;height:100px;margin-left: -11%;margin-top: 5%;"/>
|
<v-chart
|
||||||
<v-chart class="pie-chart" :options="pieOptionTwo" style="width: 140px;height:100px;margin-left: -11%;margin-top: 5%;"/>
|
class="pie-chart"
|
||||||
|
:options="pieOptionOne"
|
||||||
|
style="width: 140px; height: 100px; margin-left: -11%; margin-top: 5%"
|
||||||
|
/>
|
||||||
|
<v-chart
|
||||||
|
class="pie-chart"
|
||||||
|
:options="pieOptionTwo"
|
||||||
|
style="width: 140px; height: 100px; margin-left: -11%; margin-top: 5%"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import VChart from 'vue-echarts'
|
import VChart from "vue-echarts";
|
||||||
import * as echarts from 'echarts'
|
import * as echarts from "echarts";
|
||||||
import 'echarts/lib/chart/bar'
|
import "echarts/lib/chart/bar";
|
||||||
import 'echarts/lib/chart/line'
|
import "echarts/lib/chart/line";
|
||||||
import 'echarts/lib/chart/pie'
|
import "echarts/lib/chart/pie";
|
||||||
import 'echarts/lib/component/legend'
|
import "echarts/lib/component/legend";
|
||||||
import 'echarts/lib/component/tooltip'
|
import "echarts/lib/component/tooltip";
|
||||||
import { currentGET } from 'api/modules'
|
import { currentGET } from "api/modules";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ChartBlock',
|
name: "ChartBlock",
|
||||||
components: { VChart },
|
components: { VChart },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
/* 柱状图 + 折线图 */
|
/* 柱状图 + 折线图 */
|
||||||
barLineOption: {
|
barLineOption: {
|
||||||
backgroundColor: 'transparent', // 让背景透明，方便在大屏布局中适配
|
backgroundColor: "transparent", // 让背景透明，方便在大屏布局中适配
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: "axis",
|
||||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
||||||
borderColor: '#333333',
|
borderColor: "#333333",
|
||||||
textStyle: { color: '#ffffff' },
|
textStyle: { color: "#ffffff" },
|
||||||
formatter: (params) => {
|
formatter: (params) => {
|
||||||
console.log(params)
|
console.log(params);
|
||||||
return `碳减排量：${params[0].value}吨<br/>行驶里程：${params[1].value}万km`;
|
return `碳减排量：${params[0].value}吨<br/>行驶里程：${params[1].value}万km`;
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ['碳减排量(吨)', '行驶里程(万km)'],
|
data: ["碳减排量(吨)", "行驶里程(万km)"],
|
||||||
textStyle: { color: '#333333' }
|
textStyle: { color: "#333333" },
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: '15%',
|
left: "15%",
|
||||||
right: '15%',
|
right: "15%",
|
||||||
top: '10%',
|
top: "10%",
|
||||||
bottom: '10%'
|
bottom: "10%",
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: "category",
|
||||||
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
|
data: [
|
||||||
axisLine: { lineStyle: { color: '#666666' } },
|
"1月",
|
||||||
axisLabel: { color: '#333333' }
|
"2月",
|
||||||
|
"3月",
|
||||||
|
"4月",
|
||||||
|
"5月",
|
||||||
|
"6月",
|
||||||
|
"7月",
|
||||||
|
"8月",
|
||||||
|
"9月",
|
||||||
|
"10月",
|
||||||
|
"11月",
|
||||||
|
"12月",
|
||||||
|
],
|
||||||
|
axisLine: { lineStyle: { color: "#666666" } },
|
||||||
|
axisLabel: { color: "#333333" },
|
||||||
},
|
},
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: "value",
|
||||||
// name: '碳减排量',
|
// name: '碳减排量',
|
||||||
axisLine: { lineStyle: { color: '#666666' } },
|
axisLine: { lineStyle: { color: "#666666" } },
|
||||||
axisLabel: { color: '#333333' },
|
axisLabel: { color: "#333333" },
|
||||||
splitLine: { show: false },
|
splitLine: { show: false },
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
formatter: '{value}吨'
|
formatter: "{value}吨",
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: "value",
|
||||||
// name: '行驶里程',
|
// name: '行驶里程',
|
||||||
axisLine: { lineStyle: { color: '#666666' } },
|
axisLine: { lineStyle: { color: "#666666" } },
|
||||||
axisLabel: { color: '#333333' },
|
axisLabel: { color: "#333333" },
|
||||||
splitLine: { show: false },
|
splitLine: { show: false },
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
formatter: '{value}万km'
|
formatter: "{value}万km",
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '碳减排量(吨)',
|
name: "碳减排量(吨)",
|
||||||
type: 'bar',
|
type: "bar",
|
||||||
data: [3500, 400, 4200, 3800, 4500, 4800, 4200, 4600, 4900],
|
data: [3500, 400, 4200, 3800, 4500, 4800, 4200, 4600, 4900],
|
||||||
itemStyle: { color: '#1976d2' },
|
itemStyle: { color: "#00D4AA" },
|
||||||
barWidth: 14
|
barWidth: 14,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '行驶里程(万km)',
|
name: "行驶里程(万km)",
|
||||||
type: 'line',
|
type: "line",
|
||||||
yAxisIndex: 1,
|
yAxisIndex: 1,
|
||||||
data: [10, 15, 18, 12, 20, 25, 18, 22, 30],
|
data: [10, 15, 18, 12, 20, 25, 18, 22, 30],
|
||||||
itemStyle: { color: '#ff9800' },
|
itemStyle: { color: "#ff9800" },
|
||||||
smooth: true,
|
smooth: true,
|
||||||
lineStyle: { width: 2 },
|
lineStyle: { width: 2 },
|
||||||
symbol: 'circle',
|
symbol: "circle",
|
||||||
symbolSize: 8
|
symbolSize: 8,
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
},
|
},
|
||||||
|
|
||||||
/* 环形图1 - 年度碳减排量 */
|
/* 环形图1 - 年度碳减排量 */
|
||||||
pieOptionOne: {
|
pieOptionOne: {
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: "transparent",
|
||||||
tooltip: { show: false },
|
tooltip: { show: false },
|
||||||
title: {
|
title: {
|
||||||
text: '0吨',
|
text: "0吨",
|
||||||
//subtext: '年度碳减排量',
|
//subtext: '年度碳减排量',
|
||||||
left: 'center',
|
left: "center",
|
||||||
top: '40%',
|
top: "40%",
|
||||||
textStyle: { color: '#333333', fontSize: 18 },
|
textStyle: { color: "#333333", fontSize: 18 },
|
||||||
subtextStyle: { color: '#666666', fontSize: 14}
|
subtextStyle: { color: "#666666", fontSize: 14 },
|
||||||
},
|
},
|
||||||
graphic: [
|
graphic: [
|
||||||
{
|
{
|
||||||
type: 'text',
|
type: "text",
|
||||||
left: '0px', // 根据需要调整文字与图表的间距
|
left: "0px", // 根据需要调整文字与图表的间距
|
||||||
top: 'center', // 垂直居中
|
top: "center", // 垂直居中
|
||||||
style: {
|
style: {
|
||||||
text: '年\n度\n碳\n减\n排\n量', // 每个字符换行显示
|
text: "年\n度\n碳\n减\n排\n量", // 每个字符换行显示
|
||||||
fill: '#333333',
|
fill: "#333333",
|
||||||
font: '16px sans-serif',
|
font: "16px sans-serif",
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '年度碳减排量',
|
name: "年度碳减排量",
|
||||||
type: 'pie',
|
type: "pie",
|
||||||
radius: ['70%', '90%'],
|
radius: ["70%", "90%"],
|
||||||
hoverAnimation: false,
|
hoverAnimation: false,
|
||||||
label: { show: false },
|
label: { show: false },
|
||||||
labelLine: { show: false },
|
labelLine: { show: false },
|
||||||
data: [
|
data: [
|
||||||
{ value: 5, name: '碳排放量', itemStyle: { color: '#1976d2' } },
|
{ value: 5, name: "碳排放量", itemStyle: { color: "#00D4AA" } },
|
||||||
{ value: 95, name: 'other', itemStyle: { color: '#e3f2fd' } }
|
{ value: 95, name: "other", itemStyle: { color: "#d0f4ea" } },
|
||||||
]
|
],
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
},
|
},
|
||||||
|
|
||||||
/* 环形图2 - 年度行驶里程 */
|
/* 环形图2 - 年度行驶里程 */
|
||||||
pieOptionTwo: {
|
pieOptionTwo: {
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: "transparent",
|
||||||
tooltip: { show: false },
|
tooltip: { show: false },
|
||||||
title: {
|
title: {
|
||||||
text: '0万',
|
text: "0万",
|
||||||
//subtext: '年度行驶里程',
|
//subtext: '年度行驶里程',
|
||||||
left: 'center',
|
left: "center",
|
||||||
top: '40%',
|
top: "40%",
|
||||||
textStyle: { color: '#333333', fontSize: 18 },
|
textStyle: { color: "#333333", fontSize: 18 },
|
||||||
subtextStyle: { color: '#666666', fontSize: 14}
|
subtextStyle: { color: "#666666", fontSize: 14 },
|
||||||
},
|
},
|
||||||
graphic: [
|
graphic: [
|
||||||
{
|
{
|
||||||
type: 'text',
|
type: "text",
|
||||||
left: '0px', // 根据需要调整文字与图表的间距
|
left: "0px", // 根据需要调整文字与图表的间距
|
||||||
top: 'center', // 垂直居中
|
top: "center", // 垂直居中
|
||||||
style: {
|
style: {
|
||||||
text: '年\n度\n行\n驶\n里\n程', // 每个字符换行显示
|
text: "年\n度\n行\n驶\n里\n程", // 每个字符换行显示
|
||||||
fill: '#333333',
|
fill: "#333333",
|
||||||
font: '16px sans-serif',
|
font: "16px sans-serif",
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '年度行驶里程',
|
name: "年度行驶里程",
|
||||||
type: 'pie',
|
type: "pie",
|
||||||
radius: ['70%', '90%'],
|
radius: ["70%", "90%"],
|
||||||
hoverAnimation: false,
|
hoverAnimation: false,
|
||||||
label: { show: false },
|
label: { show: false },
|
||||||
labelLine: { show: false },
|
labelLine: { show: false },
|
||||||
data: [
|
data: [
|
||||||
{ value: 85, name: '行驶里程', itemStyle: { color: '#ff9800' } },
|
{ value: 85, name: "行驶里程", itemStyle: { color: "#ff9800" } },
|
||||||
{ value: 15, name: 'other', itemStyle: { color: '#e3f2fd' } }
|
{ value: 15, name: "other", itemStyle: { color: "#e3f2fd" } },
|
||||||
]
|
],
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
},
|
},
|
||||||
monthItems:[],
|
monthItems: [],
|
||||||
monthCarbon:[],
|
monthCarbon: [],
|
||||||
monthMileage:[]
|
monthMileage: [],
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getMonthData();
|
this.getMonthData();
|
||||||
@@ -191,32 +216,32 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getMonthData() {
|
getMonthData() {
|
||||||
currentGET("big2").then((res) => {
|
currentGET("big2").then((res) => {
|
||||||
console.log('月度碳足迹');
|
console.log("月度碳足迹");
|
||||||
this.monthItems = res.data;
|
this.monthItems = res.data;
|
||||||
console.log(this.monthItems);
|
console.log(this.monthItems);
|
||||||
this.monthItems.forEach((item) => {
|
this.monthItems.forEach((item) => {
|
||||||
console.log(item.monthCarbon);
|
console.log(item.monthCarbon);
|
||||||
console.log(item.monthMileage);
|
console.log(item.monthMileage);
|
||||||
this.monthCarbon.push(item.monthCarbon);
|
this.monthCarbon.push(item.monthCarbon);
|
||||||
this.monthMileage.push((item.monthMileage/10000).toFixed(2));
|
this.monthMileage.push((item.monthMileage / 10000).toFixed(2));
|
||||||
});
|
|
||||||
console.log('碳减排：'+ this.monthCarbon);
|
|
||||||
console.log('里程数：'+ this.monthMileage);
|
|
||||||
this.barLineOption.series[0].data = this.monthCarbon;
|
|
||||||
this.barLineOption.series[1].data = this.monthMileage;
|
|
||||||
});
|
});
|
||||||
|
console.log("碳减排：" + this.monthCarbon);
|
||||||
|
console.log("里程数：" + this.monthMileage);
|
||||||
|
this.barLineOption.series[0].data = this.monthCarbon;
|
||||||
|
this.barLineOption.series[1].data = this.monthMileage;
|
||||||
|
});
|
||||||
},
|
},
|
||||||
getYearData() {
|
getYearData() {
|
||||||
currentGET("big3").then((res) => {
|
currentGET("big3").then((res) => {
|
||||||
console.log('年度碳减排量');
|
console.log("年度碳减排量");
|
||||||
console.log(res);
|
console.log(res);
|
||||||
this.pieOptionOne.title.text = res.data.yearCarbonTon + '吨';
|
this.pieOptionOne.title.text = res.data.yearCarbonTon + "吨";
|
||||||
this.pieOptionTwo.title.text = res.data.yearMileage + '万km';
|
this.pieOptionTwo.title.text = res.data.yearMileage + "万km";
|
||||||
});
|
});
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@@ -224,17 +249,17 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
/* 自行控制宽高，若嵌入大屏可由外层决定大小 */
|
width: 100%;
|
||||||
width: 800px;
|
height: 100%;
|
||||||
height: 300px;
|
|
||||||
/* 背景可保持透明，方便嵌入大屏的背景 */
|
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-container {
|
.chart-container {
|
||||||
margin-left: -30px;
|
flex: 1;
|
||||||
width: 50%;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar-line-chart {
|
.bar-line-chart {
|
||||||
@@ -244,13 +269,16 @@ export default {
|
|||||||
|
|
||||||
/* 右侧两个环形图的布局 */
|
/* 右侧两个环形图的布局 */
|
||||||
.chart-container-right {
|
.chart-container-right {
|
||||||
width: 45%;
|
flex: 1;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin-right: -20px;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pie-chart {
|
.pie-chart {
|
||||||
width: 160px;
|
width: 100%;
|
||||||
height: 160px;
|
height: 50%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -6,65 +6,122 @@
|
|||||||
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\index.vue
|
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\index.vue
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div class="contents">
|
<div class="page-container">
|
||||||
<div class="contetn_left">
|
<!-- 三列内容区域 -->
|
||||||
<div class="pagetab">
|
<div class="contents">
|
||||||
<!-- <div class="item">实时监测</div> -->
|
<!-- 左侧列 -->
|
||||||
|
<div class="contetn_left">
|
||||||
|
<div style="display: flex; justify-content: space-between; gap: 20px">
|
||||||
|
<!-- 左侧数据卡片1 -->
|
||||||
|
<div class="data-card">
|
||||||
|
<div class="card-icon">
|
||||||
|
<img src="@/assets/img/new/yezi.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="card-label">{{ leftCards[0].label }}</div>
|
||||||
|
<div class="card-value">
|
||||||
|
<span class="number">{{ leftCards[0].value }}</span>
|
||||||
|
<span class="unit">{{ leftCards[0].unit }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 左侧数据卡片2 -->
|
||||||
|
<div class="data-card">
|
||||||
|
<div class="card-icon">
|
||||||
|
<img src="@/assets/img/new/dot.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="card-label">{{ leftCards[1].label }}</div>
|
||||||
|
<div class="card-value">
|
||||||
|
<span class="number">{{ leftCards[1].value }}</span>
|
||||||
|
<span class="unit">{{ leftCards[1].unit }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 今年累计碳排 - 大数字卡片 -->
|
||||||
|
<div class="big-number-card">
|
||||||
|
<div class="card-title">今年累计碳排</div>
|
||||||
|
<div class="card-value">
|
||||||
|
<span class="number">{{ yearCarbonTon }}</span>
|
||||||
|
<span class="unit">吨</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-desc">
|
||||||
|
<span class="line"></span>
|
||||||
|
相当于种植了约XX棵树
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 月度碳足迹 -->
|
||||||
|
<ItemWrap class="contetn_lr-item" title="月度行驶里程&用氢量">
|
||||||
|
<base-chart />
|
||||||
|
</ItemWrap>
|
||||||
|
<!-- 月度碳减排 -->
|
||||||
|
<ItemWrap class="contetn_lr-item" title="月度碳减排">
|
||||||
|
<LeftBottom />
|
||||||
|
</ItemWrap>
|
||||||
</div>
|
</div>
|
||||||
<ItemWrap class="contetn_left-top contetn_lr-item" title="当日实况">
|
|
||||||
<LeftTop/>
|
|
||||||
|
|
||||||
</ItemWrap>
|
<!-- 中间列 -->
|
||||||
<ItemWrap class="contetn_left-center contetn_lr-item" title="月度碳足迹">
|
<div class="contetn_center">
|
||||||
<!-- <LeftCenter /> -->
|
<CenterMap class="contetn_center_top" />
|
||||||
<base-chart/>
|
<ItemWrap class="contetn_center-bottom" title="">
|
||||||
</ItemWrap>
|
<RightBottom />
|
||||||
<ItemWrap
|
</ItemWrap>
|
||||||
class="contetn_left-bottom contetn_lr-item"
|
</div>
|
||||||
title="月度碳减排"
|
|
||||||
style="padding: 0 10px 16px 10px"
|
<!-- 右侧列 -->
|
||||||
>
|
<div class="contetn_right">
|
||||||
<LeftBottom />
|
<div style="display: flex; justify-content: space-between; gap: 20px">
|
||||||
</ItemWrap>
|
<!-- 右侧数据卡片1 -->
|
||||||
</div>
|
<div class="data-card">
|
||||||
<div class="contetn_center">
|
<div class="card-icon">
|
||||||
<CenterMap class="contetn_center_top" />
|
<img src="@/assets/img/new/car.png" alt="" />
|
||||||
<ItemWrap class="contetn_center-bottom" title="">
|
</div>
|
||||||
<!-- <CenterBottom /> -->
|
<div class="card-content">
|
||||||
<RightBottom />
|
<div class="card-label">{{ rightCards[0].label }}</div>
|
||||||
</ItemWrap>
|
<div class="card-value">
|
||||||
</div>
|
<span class="number">{{ rightCards[0].value }}</span>
|
||||||
<div class="contetn_right">
|
<span class="unit">{{ rightCards[0].unit }}</span>
|
||||||
<!-- <ItemWrap
|
</div>
|
||||||
class="contetn_left-bottom contetn_lr-item"
|
</div>
|
||||||
title="月度特殊标箱情况"
|
</div>
|
||||||
>
|
|
||||||
<RightTop />
|
<!-- 右侧数据卡片2 -->
|
||||||
</ItemWrap>
|
<div class="data-card">
|
||||||
<ItemWrap
|
<div class="card-icon">
|
||||||
class="contetn_left-bottom contetn_lr-item"
|
<img src="@/assets/img/new/chat.png" alt="" />
|
||||||
title="月度标箱数"
|
</div>
|
||||||
style="padding: 0 10px 16px 10px"
|
<div class="card-content">
|
||||||
>
|
<div class="card-label">{{ rightCards[1].label }}</div>
|
||||||
<RightCenter />
|
<div class="card-value">
|
||||||
</ItemWrap> -->
|
<span class="number">{{ rightCards[1].value }}</span>
|
||||||
<!-- 2025.8.13 szy 使用当天数据 -->
|
<span class="unit">{{ rightCards[1].unit }}</span>
|
||||||
<ItemWrap class="contetn_right_day_top" title="">
|
</div>
|
||||||
<RightTopDay />
|
</div>
|
||||||
</ItemWrap>
|
</div>
|
||||||
<ItemWrap
|
</div>
|
||||||
class="contetn_left-bottom contetn_lr-item"
|
|
||||||
title="车型分类 "
|
<!-- 车辆实时监控 -->
|
||||||
>
|
<ItemWrap class="contetn_right_day_top" title="车辆实时监控">
|
||||||
<CenterBottom />
|
<RightTopDay />
|
||||||
</ItemWrap>
|
</ItemWrap>
|
||||||
|
|
||||||
|
<!-- 车型结构分析 -->
|
||||||
|
<ItemWrap
|
||||||
|
class="contetn_lr-item"
|
||||||
|
title="车型结构分析"
|
||||||
|
style="flex: 0; min-height: 260px"
|
||||||
|
>
|
||||||
|
<CenterBottom />
|
||||||
|
</ItemWrap>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import LeftTop from './left-top.vue'
|
|
||||||
import LeftCenter from "./left-center.vue";
|
import LeftCenter from "./left-center.vue";
|
||||||
import LeftBottom from "./left-bottom.vue";
|
import LeftBottom from "./left-bottom.vue";
|
||||||
import CenterMap from "./center-map.vue";
|
import CenterMap from "./center-map.vue";
|
||||||
@@ -72,12 +129,12 @@ import CenterBottom from "./center-bottom.vue";
|
|||||||
import RightTop from "./right-top.vue";
|
import RightTop from "./right-top.vue";
|
||||||
import RightCenter from "./right-center.vue";
|
import RightCenter from "./right-center.vue";
|
||||||
import RightBottom from "./right-bottom.vue";
|
import RightBottom from "./right-bottom.vue";
|
||||||
import BaseChart from "./chart/baseChart.vue"
|
import BaseChart from "./chart/baseChart.vue";
|
||||||
import RightTopDay from './right-top-day.vue'; //2025.10.15 szy add
|
import RightTopDay from "./right-top-day.vue";
|
||||||
|
import { currentGET } from "api/modules";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
LeftTop,
|
|
||||||
LeftCenter,
|
LeftCenter,
|
||||||
LeftBottom,
|
LeftBottom,
|
||||||
CenterMap,
|
CenterMap,
|
||||||
@@ -90,7 +147,37 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
yearCarbonTon: 0,
|
||||||
|
// 左侧卡片数据
|
||||||
|
leftCards: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
value: "8463.91",
|
||||||
|
unit: "kg",
|
||||||
|
label: "当日减碳量",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
value: "1027.98",
|
||||||
|
unit: "kg",
|
||||||
|
label: "当日用氢量",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 右侧卡片数据
|
||||||
|
rightCards: [
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
value: "403 / 977",
|
||||||
|
unit: "辆",
|
||||||
|
label: "在线数量",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
value: "18012.87",
|
||||||
|
unit: "km",
|
||||||
|
label: "当日行驶里程",
|
||||||
|
},
|
||||||
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
filters: {
|
filters: {
|
||||||
@@ -98,78 +185,272 @@ export default {
|
|||||||
return msg || 0;
|
return msg || 0;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
created() {
|
created() {},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.getYearData();
|
||||||
|
this.getDayData();
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {},
|
|
||||||
methods: {
|
methods: {
|
||||||
|
getYearData() {
|
||||||
|
currentGET("big3").then((res) => {
|
||||||
|
console.log("年度碳减排量");
|
||||||
|
console.log(res);
|
||||||
|
if (res && res.data) {
|
||||||
|
this.yearCarbonTon = res.data.yearCarbonTon || 0;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getDayData() {
|
||||||
|
currentGET("big1").then((res) => {
|
||||||
|
console.log("当日实况");
|
||||||
|
console.log(res);
|
||||||
|
let onLineCount = 0;
|
||||||
|
let vehicleCount = 0;
|
||||||
|
let dayCarbon = 0;
|
||||||
|
let dayHydrogen = 0;
|
||||||
|
let dayMileage = 0;
|
||||||
|
|
||||||
|
if (res !== null && res.data !== null) {
|
||||||
|
if (res.data.onLineCount !== null) onLineCount = res.data.onLineCount;
|
||||||
|
if (res.data.vehicleCount !== null)
|
||||||
|
vehicleCount = res.data.vehicleCount;
|
||||||
|
if (res.data.dayCarbon !== null) dayCarbon = res.data.dayCarbon;
|
||||||
|
if (res.data.dayHydrogen !== null) dayHydrogen = res.data.dayHydrogen;
|
||||||
|
if (res.data.dayMileage !== null) dayMileage = res.data.dayMileage;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新左侧卡片 - 当日减碳量
|
||||||
|
this.$set(this.leftCards[0], "value", dayCarbon);
|
||||||
|
|
||||||
|
// 更新左侧卡片 - 当日用氢量
|
||||||
|
this.$set(this.leftCards[1], "value", dayHydrogen);
|
||||||
|
|
||||||
|
// 更新右侧卡片 - 在线数量
|
||||||
|
this.$set(
|
||||||
|
this.rightCards[0],
|
||||||
|
"value",
|
||||||
|
onLineCount + " / " + vehicleCount
|
||||||
|
);
|
||||||
|
|
||||||
|
// 更新右侧卡片 - 当日行驶里程
|
||||||
|
this.$set(this.rightCards[1], "value", dayMileage);
|
||||||
|
});
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
// 内容
|
// 页面容器
|
||||||
|
.page-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: calc(100% - 80px);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 三列内容区域 - 1:2:1 布局
|
||||||
.contents {
|
.contents {
|
||||||
.contetn_left,
|
flex: 1;
|
||||||
.contetn_right {
|
display: flex;
|
||||||
width: 540px;
|
gap: 12px;
|
||||||
|
min-height: 0;
|
||||||
|
|
||||||
|
.contetn_left {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
// padding: 16px 0;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contetn_center {
|
.contetn_center {
|
||||||
width: 720px;
|
flex: 2;
|
||||||
|
min-width: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
//左右两侧 三个块
|
.contetn_right {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 左右两侧卡片高度
|
||||||
.contetn_lr-item {
|
.contetn_lr-item {
|
||||||
height: 310px;
|
flex: 1;
|
||||||
|
min-height: 230px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contetn_center_top {
|
.contetn_center_top {
|
||||||
width: 100%;
|
flex: 1;
|
||||||
}
|
min-height: 0;
|
||||||
|
|
||||||
// 中间
|
|
||||||
.contetn_center {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.contetn_center-bottom {
|
.contetn_center-bottom {
|
||||||
height: 315px;
|
height: 260px;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
//左边 右边 结构一样
|
// 右侧车辆监控表格
|
||||||
.contetn_left,
|
.contetn_right_day_top {
|
||||||
.contetn_right {
|
flex: 1;
|
||||||
|
min-height: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 数据卡片样式
|
||||||
|
.data-card {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 14px 18px;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
height: 82px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
// &:hover {
|
||||||
|
// transform: translateY(-2px);
|
||||||
|
// box-shadow: 0 4px 12px rgba(0, 212, 170, 0.15);
|
||||||
|
// }
|
||||||
|
|
||||||
|
.card-icon {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
// background: linear-gradient(
|
||||||
|
// 135deg,
|
||||||
|
// rgba(0, 212, 170, 0.1),
|
||||||
|
// rgba(0, 212, 170, 0.05)
|
||||||
|
// );
|
||||||
|
// border-radius: 8px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-content {
|
||||||
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-around;
|
gap: 4px;
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
//右上角，车辆信息
|
.card-label {
|
||||||
.contetn_right_day_top {
|
display: flex;
|
||||||
margin-top: 0px;
|
align-items: center;
|
||||||
height: 640px;
|
color: #64748b;
|
||||||
|
font-family: "PingFang TC";
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-value {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 4px;
|
||||||
|
|
||||||
|
.number {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: #1e293b;
|
||||||
|
font-family: "PingFang SC";
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 19px;
|
||||||
|
line-height: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unit {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 大数字卡片样式
|
||||||
|
.big-number-card {
|
||||||
|
background-image: url("../../assets/img/new/banner.png");
|
||||||
|
background-size: cover;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 15px 20px;
|
||||||
|
color: #ffffff;
|
||||||
|
height: 90px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
color: #d1fae5;
|
||||||
|
font-family: "PingFang TC";
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-value {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
|
||||||
|
.number {
|
||||||
|
font-size: 34px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unit {
|
||||||
|
font-size: 15px;
|
||||||
|
margin-left: 6px;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-desc {
|
||||||
|
font-size: 12px;
|
||||||
|
opacity: 0.85;
|
||||||
|
padding-top: 4px;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
.line {
|
||||||
|
margin-right: 8px;
|
||||||
|
width: 30px;
|
||||||
|
height: 3px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
background: #34d399;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes rotating {
|
@keyframes rotating {
|
||||||
0% {
|
0% {
|
||||||
-webkit-transform: rotate(0) scale(1);
|
-webkit-transform: rotate(0) scale(1);
|
||||||
transform: rotate(0) scale(1);
|
transform: rotate(0) scale(1);
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
-webkit-transform: rotate(180deg) scale(1.1);
|
-webkit-transform: rotate(180deg) scale(1.1);
|
||||||
transform: rotate(180deg) scale(1.1);
|
transform: rotate(180deg) scale(1.1);
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
-webkit-transform: rotate(360deg) scale(1);
|
-webkit-transform: rotate(360deg) scale(1);
|
||||||
transform: rotate(360deg) scale(1);
|
transform: rotate(360deg) scale(1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -32,8 +32,20 @@ export default {
|
|||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getMonthData();
|
this.getMonthData();
|
||||||
|
window.addEventListener("resize", this.handleResize);
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
window.removeEventListener("resize", this.handleResize);
|
||||||
|
if (this.chart) {
|
||||||
|
this.chart.dispose();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
handleResize() {
|
||||||
|
if (this.chart) {
|
||||||
|
this.chart.resize();
|
||||||
|
}
|
||||||
|
},
|
||||||
getMonthData() {
|
getMonthData() {
|
||||||
currentGET("big2").then((res) => {
|
currentGET("big2").then((res) => {
|
||||||
console.log("月度碳减排");
|
console.log("月度碳减排");
|
||||||
@@ -55,91 +67,97 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
initChart() {
|
initChart() {
|
||||||
let chart = echarts.init(this.$refs.chart);
|
this.$nextTick(() => {
|
||||||
let option = {
|
if (!this.$refs.chart) return;
|
||||||
grid:{
|
|
||||||
left:'13%'
|
const chart = echarts.init(this.$refs.chart);
|
||||||
},
|
let option = {
|
||||||
tooltip: {
|
grid: {
|
||||||
trigger: "axis",
|
left: "13%",
|
||||||
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
|
||||||
borderColor: "#333333",
|
|
||||||
textStyle: { color: "#ffffff" },
|
|
||||||
// formatter: (params) => {
|
|
||||||
// console.log(params)
|
|
||||||
// return `用氢量：${params[0].value}kg<br/>用电量：${params[1].value}kWh<br/>行驶里程：${params[2].value}km`;
|
|
||||||
// }
|
|
||||||
formatter: (params) => {
|
|
||||||
console.log(params);
|
|
||||||
return `用氢量：${params[0].value}kg<br/>行驶里程：${params[1].value}km`;
|
|
||||||
},
|
},
|
||||||
},
|
tooltip: {
|
||||||
legend: {
|
trigger: "axis",
|
||||||
//data: ['用氢量', '用电量', '行驶里程'],
|
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
||||||
data: ["用氢量", "行驶里程"],
|
borderColor: "#333333",
|
||||||
//data: ['用电量', '行驶里程'],
|
textStyle: { color: "#ffffff" },
|
||||||
textStyle: { color: "#333333" },
|
// formatter: (params) => {
|
||||||
},
|
// console.log(params)
|
||||||
xAxis: {
|
// return `用氢量：${params[0].value}kg<br/>用电量：${params[1].value}kWh<br/>行驶里程：${params[2].value}km`;
|
||||||
type: "category",
|
// }
|
||||||
boundaryGap: false,
|
formatter: (params) => {
|
||||||
data: [
|
console.log(params);
|
||||||
"1月",
|
return `用氢量：${params[0].value}kg<br/>行驶里程：${params[1].value}km`;
|
||||||
"2月",
|
},
|
||||||
"3月",
|
},
|
||||||
"4月",
|
legend: {
|
||||||
"5月",
|
//data: ['用氢量', '用电量', '行驶里程'],
|
||||||
"6月",
|
data: ["用氢量", "行驶里程"],
|
||||||
"7月",
|
//data: ['用电量', '行驶里程'],
|
||||||
"8月",
|
textStyle: { color: "#333333" },
|
||||||
"9月",
|
},
|
||||||
"10月",
|
xAxis: {
|
||||||
"11月",
|
type: "category",
|
||||||
"12月",
|
boundaryGap: false,
|
||||||
|
data: [
|
||||||
|
"1月",
|
||||||
|
"2月",
|
||||||
|
"3月",
|
||||||
|
"4月",
|
||||||
|
"5月",
|
||||||
|
"6月",
|
||||||
|
"7月",
|
||||||
|
"8月",
|
||||||
|
"9月",
|
||||||
|
"10月",
|
||||||
|
"11月",
|
||||||
|
"12月",
|
||||||
|
],
|
||||||
|
axisLine: { lineStyle: { color: "#666666" } },
|
||||||
|
axisLabel: { color: "#333333" },
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
axisLine: { lineStyle: { color: "#666666" } },
|
||||||
|
splitLine: { lineStyle: { color: "#e0e0e0" } },
|
||||||
|
axisLabel: {
|
||||||
|
color: "#333333",
|
||||||
|
//align: 'left',
|
||||||
|
// margin:70,
|
||||||
|
//width: 100, //将内容的宽度固定
|
||||||
|
// overflow: 'truncate', //超出的部分截断
|
||||||
|
formatter: "{value}kg",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "用氢量",
|
||||||
|
type: "line",
|
||||||
|
//data: [5000, 7000, 10000, 8000, 6000, 11000, 9000, 7000, 5000, 7050, 10020, 8900],
|
||||||
|
data: this.monthHydrogen,
|
||||||
|
// data: [11865.86,11687.64,18874.66,11311.62, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||||
|
itemStyle: { color: "#3399FF" },
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// name: '用电量',
|
||||||
|
// type: 'line',
|
||||||
|
// //data: [6000, 8000, 12000, 10000, 5000, 10000, 9500, 7200, 5000, 3000, 10000, 8500],
|
||||||
|
// data: [60, 80, 120, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||||
|
// itemStyle: { color: '#3f89ff' }
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
name: "行驶里程",
|
||||||
|
type: "line",
|
||||||
|
//data: [4000, 9000, 9500, 7000, 9000, 12000, 10000, 8000, 5000, 7000, 10000, 8000],
|
||||||
|
data: this.monthMileage,
|
||||||
|
//data: [20219.1,332767.1,1671592.3,330955, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||||
|
itemStyle: { color: "#a060ff" },
|
||||||
|
},
|
||||||
],
|
],
|
||||||
axisLine: { lineStyle: { color: "#666666" } },
|
};
|
||||||
axisLabel: { color: "#333333" },
|
chart.setOption(option);
|
||||||
},
|
this.chart = chart;
|
||||||
yAxis: {
|
this.chart.resize();
|
||||||
type: "value",
|
});
|
||||||
axisLine: { lineStyle: { color: "#666666" } },
|
|
||||||
splitLine: { lineStyle: { color: "#e0e0e0" } },
|
|
||||||
axisLabel: {
|
|
||||||
color: "#333333",
|
|
||||||
//align: 'left',
|
|
||||||
// margin:70,
|
|
||||||
//width: 100, //将内容的宽度固定
|
|
||||||
// overflow: 'truncate', //超出的部分截断
|
|
||||||
formatter: "{value}kg",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "用氢量",
|
|
||||||
type: "line",
|
|
||||||
//data: [5000, 7000, 10000, 8000, 6000, 11000, 9000, 7000, 5000, 7050, 10020, 8900],
|
|
||||||
data: this.monthHydrogen,
|
|
||||||
// data: [11865.86,11687.64,18874.66,11311.62, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
itemStyle: { color: "#3399FF" },
|
|
||||||
},
|
|
||||||
// {
|
|
||||||
// name: '用电量',
|
|
||||||
// type: 'line',
|
|
||||||
// //data: [6000, 8000, 12000, 10000, 5000, 10000, 9500, 7200, 5000, 3000, 10000, 8500],
|
|
||||||
// data: [60, 80, 120, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
// itemStyle: { color: '#3f89ff' }
|
|
||||||
// },
|
|
||||||
{
|
|
||||||
name: "行驶里程",
|
|
||||||
type: "line",
|
|
||||||
//data: [4000, 9000, 9500, 7000, 9000, 12000, 10000, 8000, 5000, 7000, 10000, 8000],
|
|
||||||
data: this.monthMileage,
|
|
||||||
//data: [20219.1,332767.1,1671592.3,330955, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
||||||
itemStyle: { color: "#a060ff" },
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
chart.setOption(option);
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -6,14 +6,20 @@
|
|||||||
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
|
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<Echart id="leftCenter" :options="options" class="left_center_inner" v-if="pageflag" ref="charts" />
|
<Echart
|
||||||
<Reacquire v-else @onclick="getData" style="line-height:200px">
|
id="leftCenter"
|
||||||
|
:options="options"
|
||||||
|
class="left_center_inner"
|
||||||
|
v-if="pageflag"
|
||||||
|
ref="charts"
|
||||||
|
/>
|
||||||
|
<Reacquire v-else @onclick="getData" style="line-height: 200px">
|
||||||
重新获取
|
重新获取
|
||||||
</Reacquire>
|
</Reacquire>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { currentGET } from 'api/modules'
|
import { currentGET } from "api/modules";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@@ -22,67 +28,70 @@ export default {
|
|||||||
lockNum: 0,
|
lockNum: 0,
|
||||||
onlineNum: 0,
|
onlineNum: 0,
|
||||||
offlineNum: 0,
|
offlineNum: 0,
|
||||||
totalNum: 0
|
totalNum: 0,
|
||||||
},
|
},
|
||||||
pageflag: true,
|
pageflag: true,
|
||||||
timer: null
|
timer: null,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.getData()
|
this.getData();
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
},
|
},
|
||||||
|
mounted() {},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
this.clearData()
|
this.clearData();
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
clearData() {
|
clearData() {
|
||||||
if (this.timer) {
|
if (this.timer) {
|
||||||
clearInterval(this.timer)
|
clearInterval(this.timer);
|
||||||
this.timer = null
|
this.timer = null;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getData() {
|
getData() {
|
||||||
this.pageflag = true
|
this.pageflag = true;
|
||||||
// this.pageflag =false
|
// this.pageflag =false
|
||||||
|
|
||||||
currentGET('big1').then(res => {
|
currentGET("big1").then((res) => {
|
||||||
//只打印一次
|
//只打印一次
|
||||||
if (!this.timer) {
|
if (!this.timer) {
|
||||||
console.log("设备总览", res);
|
console.log("设备总览", res);
|
||||||
}
|
}
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
this.countUserNumData = res.data
|
this.countUserNumData = res.data;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.init()
|
this.init();
|
||||||
})
|
});
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
this.pageflag = false
|
this.pageflag = false;
|
||||||
this.$Message({
|
this.$Message({
|
||||||
text: res.msg,
|
text: res.msg,
|
||||||
type: 'warning'
|
type: "warning",
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
//轮询
|
//轮询
|
||||||
switper() {
|
switper() {
|
||||||
if (this.timer) {
|
if (this.timer) {
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
let looper = (a) => {
|
let looper = (a) => {
|
||||||
this.getData()
|
this.getData();
|
||||||
};
|
};
|
||||||
this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
|
this.timer = setInterval(
|
||||||
let myChart = this.$refs.charts.chart
|
looper,
|
||||||
myChart.on('mouseover', params => {
|
this.$store.state.setting.echartsAutoTime
|
||||||
this.clearData()
|
);
|
||||||
|
let myChart = this.$refs.charts.chart;
|
||||||
|
myChart.on("mouseover", (params) => {
|
||||||
|
this.clearData();
|
||||||
});
|
});
|
||||||
myChart.on('mouseout', params => {
|
myChart.on("mouseout", (params) => {
|
||||||
this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
|
this.timer = setInterval(
|
||||||
|
looper,
|
||||||
|
this.$store.state.setting.echartsAutoTime
|
||||||
|
);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
init() {
|
init() {
|
||||||
@@ -129,8 +138,6 @@ export default {
|
|||||||
shadowColor: colors[1],
|
shadowColor: colors[1],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
this.options = {
|
this.options = {
|
||||||
@@ -195,11 +202,10 @@ export default {
|
|||||||
length: 20, // 第一段线 长度
|
length: 20, // 第一段线 长度
|
||||||
length2: 36, // 第二段线 长度
|
length2: 36, // 第二段线 长度
|
||||||
show: true,
|
show: true,
|
||||||
|
|
||||||
},
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
show: true,
|
show: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
...piedata,
|
...piedata,
|
||||||
@@ -227,5 +233,4 @@ export default {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang='scss' scoped>
|
<style lang="scss" scoped></style>
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -1,100 +1,64 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="cards-container">
|
<div class="top-cards-wrapper">
|
||||||
<!-- 四个卡片 -->
|
<!-- 左侧卡片1 -->
|
||||||
<div class="card">
|
<div class="top-card">
|
||||||
<!-- 数值与文字 -->
|
<div class="card-icon">
|
||||||
<div class="card-info">
|
<img src="@/assets/img/left/1.svg" alt="" />
|
||||||
<!-- 主数值（高亮） -->
|
</div>
|
||||||
<div class="value-line">
|
<div class="card-content">
|
||||||
|
<div class="card-label">{{ cards[0].label }}</div>
|
||||||
|
<div class="card-value">
|
||||||
<span class="number">{{ cards[0].value }}</span>
|
<span class="number">{{ cards[0].value }}</span>
|
||||||
<span class="unit">{{ cards[0].unit }}</span>
|
<span class="unit">{{ cards[0].unit }}</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- 标签说明 -->
|
|
||||||
<div class="label">{{ cards[0].label }}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 图标及其闪动背景 -->
|
|
||||||
<div class="icon-wrapper">
|
|
||||||
<!-- 背后闪动的竖直矩形 -->
|
|
||||||
<div class="icon-bg icon-bg-0"></div>
|
|
||||||
<!-- 圆形平台 -->
|
|
||||||
<div class="platform-circle"></div>
|
|
||||||
<!-- 图标本身（此处用Unicode或自定义图标） -->
|
|
||||||
<div class="icon">
|
|
||||||
<img src="@/assets/img/left/1.svg" class="images" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
|
||||||
<!-- 数值与文字 -->
|
<!-- 左侧卡片2 -->
|
||||||
<div class="card-info">
|
<div class="top-card">
|
||||||
<!-- 主数值（高亮） -->
|
<div class="card-icon">
|
||||||
<div class="value-line">
|
<img src="@/assets/img/left/2.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="card-label">{{ cards[1].label }}</div>
|
||||||
|
<div class="card-value">
|
||||||
<span class="number">{{ cards[1].value }}</span>
|
<span class="number">{{ cards[1].value }}</span>
|
||||||
<span class="unit">{{ cards[1].unit }}</span>
|
<span class="unit">{{ cards[1].unit }}</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- 标签说明 -->
|
|
||||||
<div class="label">{{ cards[1].label }}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 图标及其闪动背景 -->
|
|
||||||
<div class="icon-wrapper">
|
|
||||||
<!-- 背后闪动的竖直矩形 -->
|
|
||||||
<div class="icon-bg icon-bg-1"></div>
|
|
||||||
<!-- 圆形平台 -->
|
|
||||||
<div class="platform-circle"></div>
|
|
||||||
<!-- 图标本身（此处用Unicode或自定义图标） -->
|
|
||||||
<div class="icon">
|
|
||||||
<img src="@/assets/img/left/2.svg" class="images" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
|
||||||
<!-- 数值与文字 -->
|
<!-- 中间标题区域 -->
|
||||||
<div class="card-info">
|
<div class="center-title">
|
||||||
<!-- 主数值（高亮） -->
|
<div class="title-text">羚牛全国车辆信息</div>
|
||||||
<div class="value-line">
|
<div class="status-badge">922 功能中</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 右侧卡片1 -->
|
||||||
|
<div class="top-card">
|
||||||
|
<div class="card-icon">
|
||||||
|
<img src="@/assets/img/left/3.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="card-label">{{ cards[2].label }}</div>
|
||||||
|
<div class="card-value">
|
||||||
<span class="number">{{ cards[2].value }}</span>
|
<span class="number">{{ cards[2].value }}</span>
|
||||||
<span class="unit">{{ cards[2].unit }}</span>
|
<span class="unit">{{ cards[2].unit }}</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- 标签说明 -->
|
|
||||||
<div class="label">{{ cards[2].label }}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 图标及其闪动背景 -->
|
|
||||||
<div class="icon-wrapper">
|
|
||||||
<!-- 背后闪动的竖直矩形 -->
|
|
||||||
<div class="icon-bg icon-bg-2"></div>
|
|
||||||
<!-- 圆形平台 -->
|
|
||||||
<div class="platform-circle"></div>
|
|
||||||
<!-- 图标本身（此处用Unicode或自定义图标） -->
|
|
||||||
<div class="icon">
|
|
||||||
<img src="@/assets/img/left/3.svg" class="images" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
|
||||||
<!-- 数值与文字 -->
|
<!-- 右侧卡片2 -->
|
||||||
<div class="card-info">
|
<div class="top-card">
|
||||||
<!-- 主数值（高亮） -->
|
<div class="card-icon">
|
||||||
<div class="value-line">
|
<img src="@/assets/img/left/4.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="card-label">{{ cards[3].label }}</div>
|
||||||
|
<div class="card-value">
|
||||||
<span class="number">{{ cards[3].value }}</span>
|
<span class="number">{{ cards[3].value }}</span>
|
||||||
<span class="unit">{{ cards[3].unit }}</span>
|
<span class="unit">{{ cards[3].unit }}</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- 标签说明 -->
|
|
||||||
<div class="label">{{ cards[3].label }}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 图标及其闪动背景 -->
|
|
||||||
<div class="icon-wrapper">
|
|
||||||
<!-- 背后闪动的竖直矩形 -->
|
|
||||||
<div class="icon-bg icon-bg-3"></div>
|
|
||||||
<!-- 圆形平台 -->
|
|
||||||
<div class="platform-circle"></div>
|
|
||||||
<!-- 图标本身（此处用Unicode或自定义图标） -->
|
|
||||||
<div class="icon">
|
|
||||||
<img src="@/assets/img/left/4.svg" class="images" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -110,31 +74,31 @@ export default {
|
|||||||
cards: [
|
cards: [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
value: "452/807",
|
value: "8463.91",
|
||||||
unit: "辆",
|
unit: "kg",
|
||||||
label: "在线车数",
|
label: "当日减碳量",
|
||||||
srcValue: "@/assets/img/left_top_lv.png",
|
srcValue: "@/assets/img/left/1.svg",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
value: "561",
|
value: "1027.98",
|
||||||
unit: "kg",
|
unit: "kg",
|
||||||
label: "当日减碳",
|
label: "当日用氢量",
|
||||||
srcValue: "@/assets/img/left/1.svg",
|
srcValue: "@/assets/img/left/2.svg",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
value: "534",
|
value: "403 / 977",
|
||||||
unit: "kg",
|
unit: "辆",
|
||||||
label: "当日用氢量",
|
label: "在线数量",
|
||||||
srcValue: "@/assets/img/left/1.svg",
|
srcValue: "@/assets/img/left/3.svg",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 4,
|
id: 4,
|
||||||
value: "3300",
|
value: "18012.87",
|
||||||
unit: "km",
|
unit: "km",
|
||||||
label: "当日里程",
|
label: "当日行驶里程",
|
||||||
srcValue: "@/assets/img/left/1.svg",
|
srcValue: "@/assets/img/left/4.svg",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
@@ -162,16 +126,22 @@ export default {
|
|||||||
if (res.data.dayMileage !== null) dayMileage = res.data.dayMileage;
|
if (res.data.dayMileage !== null) dayMileage = res.data.dayMileage;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 当日减碳量
|
||||||
let change = this.cards[0];
|
let change = this.cards[0];
|
||||||
change.value = res.data.onLineCount + "/" + res.data.vehicleCount;
|
change.value = dayCarbon;
|
||||||
this.$set(this.cards, 0, change);
|
this.$set(this.cards, 0, change);
|
||||||
|
|
||||||
|
// 当日用氢量
|
||||||
change = this.cards[1];
|
change = this.cards[1];
|
||||||
change.value = dayCarbon;
|
|
||||||
this.$set(this.cards, 1, change);
|
|
||||||
change = this.cards[2];
|
|
||||||
change.value = dayHydrogen;
|
change.value = dayHydrogen;
|
||||||
|
this.$set(this.cards, 1, change);
|
||||||
|
|
||||||
|
// 在线数量
|
||||||
|
change = this.cards[2];
|
||||||
|
change.value = res.data.onLineCount + " / " + res.data.vehicleCount;
|
||||||
this.$set(this.cards, 2, change);
|
this.$set(this.cards, 2, change);
|
||||||
|
|
||||||
|
// 当日行驶里程
|
||||||
change = this.cards[3];
|
change = this.cards[3];
|
||||||
change.value = dayMileage;
|
change.value = dayMileage;
|
||||||
this.$set(this.cards, 3, change);
|
this.$set(this.cards, 3, change);
|
||||||
@@ -182,144 +152,110 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* 整体背景 */
|
.top-cards-wrapper {
|
||||||
.cards-container {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
align-items: center;
|
||||||
align-items: flex-end;
|
justify-content: space-between;
|
||||||
padding-left: 0px;
|
gap: 16px;
|
||||||
padding-top: 30px;
|
padding: 12px 0;
|
||||||
padding-bottom: 30px;
|
|
||||||
background-image: none;
|
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: 0% 100%;
|
|
||||||
}
|
|
||||||
.images {
|
|
||||||
width: 65px;
|
|
||||||
height: 70px;
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-top: -5px;
|
|
||||||
}
|
|
||||||
/* 单个卡片 */
|
|
||||||
.card {
|
|
||||||
position: relative;
|
|
||||||
width: 180px;
|
|
||||||
text-align: center;
|
|
||||||
color: #333333;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 卡片信息区域 */
|
/* 数据卡片 */
|
||||||
.card-info {
|
.top-card {
|
||||||
margin-bottom: 120px; /* 给下方图标区域留出空间 */
|
flex: 1;
|
||||||
margin-left: 10px;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 16px 20px;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||||
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.value-line {
|
.top-card:hover {
|
||||||
font-size: 20px;
|
transform: translateY(-2px);
|
||||||
margin-bottom: 8px;
|
box-shadow: 0 4px 12px rgba(0, 212, 170, 0.15);
|
||||||
width: 120px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.number {
|
.card-icon {
|
||||||
font-weight: 700;
|
flex-shrink: 0;
|
||||||
color: #1976d2; /* 高亮数字颜色 */
|
width: 48px;
|
||||||
margin-right: 6px;
|
height: 48px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: linear-gradient(135deg, rgba(0, 212, 170, 0.1), rgba(0, 212, 170, 0.05));
|
||||||
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.unit {
|
.card-icon img {
|
||||||
font-size: 14px;
|
width: 32px;
|
||||||
opacity: 0.8;
|
height: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.card-content {
|
||||||
font-size: 16px;
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-label {
|
||||||
|
font-size: 13px;
|
||||||
color: #666666;
|
color: #666666;
|
||||||
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 图标容器 */
|
.card-value {
|
||||||
.icon-wrapper {
|
display: flex;
|
||||||
position: absolute;
|
align-items: baseline;
|
||||||
bottom: 0;
|
gap: 4px;
|
||||||
left: 54%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 100%;
|
|
||||||
height: 100px;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 背后闪动的竖直矩形 */
|
.card-value .number {
|
||||||
.icon-bg {
|
font-size: 22px;
|
||||||
position: absolute;
|
font-weight: 700;
|
||||||
bottom: 0;
|
color: #00D4AA;
|
||||||
left: 50%;
|
line-height: 1;
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 90px;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 6px;
|
|
||||||
background-image: none;
|
|
||||||
background-color: rgba(25, 118, 210, 0.1);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
animation: blink 1s infinite alternate;
|
|
||||||
top: -15%;
|
|
||||||
}
|
|
||||||
.icon-bg-0 {
|
|
||||||
animation-delay: 0s;
|
|
||||||
}
|
|
||||||
.icon-bg-1 {
|
|
||||||
animation-delay: 0.2s;
|
|
||||||
}
|
|
||||||
.icon-bg-2 {
|
|
||||||
animation-delay: 0.4s;
|
|
||||||
}
|
|
||||||
.icon-bg-3 {
|
|
||||||
animation-delay: 0.6s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 圆形平台 */
|
.card-value .unit {
|
||||||
.platform-circle {
|
font-size: 13px;
|
||||||
position: absolute;
|
color: #999999;
|
||||||
bottom: 0;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 100px;
|
|
||||||
height: 20px;
|
|
||||||
background: radial-gradient(rgba(25, 118, 210, 0.3), transparent 70%);
|
|
||||||
border-radius: 50%;
|
|
||||||
box-shadow: 0 0 8px rgba(25, 118, 210, 0.4), 0 0 12px rgba(25, 118, 210, 0.3);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 图标 */
|
/* 中间标题区域 */
|
||||||
.icon {
|
.center-title {
|
||||||
position: absolute;
|
flex: 1.2;
|
||||||
bottom: -5px;
|
display: flex;
|
||||||
left: 50%;
|
flex-direction: column;
|
||||||
transform: translateX(-50%);
|
align-items: center;
|
||||||
font-size: 28px;
|
justify-content: center;
|
||||||
color: #1976d2;
|
gap: 8px;
|
||||||
|
padding: 16px 24px;
|
||||||
|
background: linear-gradient(135deg, rgba(0, 212, 170, 0.05), rgba(0, 212, 170, 0.02));
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid rgba(0, 212, 170, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 关键帧动画：闪动 */
|
.title-text {
|
||||||
@keyframes blink {
|
font-size: 18px;
|
||||||
0% {
|
font-weight: 600;
|
||||||
opacity: 0.5;
|
color: #333333;
|
||||||
}
|
letter-spacing: 1px;
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 图标模拟，可用 Font Awesome 等替换 */
|
.status-badge {
|
||||||
.icon-phone::before {
|
display: inline-flex;
|
||||||
content: "☎";
|
align-items: center;
|
||||||
}
|
padding: 4px 12px;
|
||||||
.icon-shield::before {
|
background: #00D4AA;
|
||||||
content: "⛨";
|
color: #ffffff;
|
||||||
}
|
font-size: 12px;
|
||||||
.icon-star::before {
|
font-weight: 500;
|
||||||
content: "★";
|
border-radius: 12px;
|
||||||
}
|
box-shadow: 0 2px 6px rgba(0, 212, 170, 0.3);
|
||||||
.icon-protect::before {
|
|
||||||
content: "🛡";
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>交易所</th>
|
<th style="width: 36%">交易所</th>
|
||||||
<th>项目</th>
|
<th>项目</th>
|
||||||
<th>价格 (RMB)</th>
|
<th>价格 (RMB)</th>
|
||||||
<th>地区</th>
|
<th>地区</th>
|
||||||
@@ -11,14 +11,20 @@
|
|||||||
</thead>
|
</thead>
|
||||||
</table>
|
</table>
|
||||||
<div class="scroll-wrapper">
|
<div class="scroll-wrapper">
|
||||||
<vue-seamless-scroll :data="tableData" :class-option="scrollOptions" class="scroll-container">
|
<vue-seamless-scroll
|
||||||
|
:data="tableData"
|
||||||
|
:class-option="scrollOptions"
|
||||||
|
class="scroll-container"
|
||||||
|
>
|
||||||
<table>
|
<table>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr v-for="(item, index) in tableData" :key="index">
|
<tr v-for="(item, index) in tableData" :key="index">
|
||||||
<td :style="{ color: item.exchangeColor }">{{ item.name }}</td>
|
<td>
|
||||||
|
{{ item.name }}
|
||||||
|
</td>
|
||||||
<td>{{ item.project }}</td>
|
<td>{{ item.project }}</td>
|
||||||
<td :style="{ color: item.priceColor }">{{ item.price }}</td>
|
<td>{{ item.price }}</td>
|
||||||
<td :style="{ color: item.regionColor }">{{ item.area }}</td>
|
<td>{{ item.area }}</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
@@ -29,7 +35,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import vueSeamlessScroll from "vue-seamless-scroll";
|
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||||
import { currentGET } from 'api/modules'
|
import { currentGET } from "api/modules";
|
||||||
export default {
|
export default {
|
||||||
components: { vueSeamlessScroll },
|
components: { vueSeamlessScroll },
|
||||||
data() {
|
data() {
|
||||||
@@ -54,7 +60,6 @@ export default {
|
|||||||
// { exchange: "英国碳市场", project: "CER", price: "87", region: "英国", exchangeColor: "#ffcc00", priceColor: "#ffcc00", regionColor: "#ffffff" },
|
// { exchange: "英国碳市场", project: "CER", price: "87", region: "英国", exchangeColor: "#ffcc00", priceColor: "#ffcc00", regionColor: "#ffffff" },
|
||||||
// { exchange: "热田碳排放交易所", project: "CER", price: "86", region: "韩国", exchangeColor: "#00ffcc", priceColor: "#ffffff", regionColor: "#ffffff" },
|
// { exchange: "热田碳排放交易所", project: "CER", price: "86", region: "韩国", exchangeColor: "#00ffcc", priceColor: "#ffffff", regionColor: "#ffffff" },
|
||||||
],
|
],
|
||||||
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@@ -62,36 +67,29 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getExchangeData() {
|
getExchangeData() {
|
||||||
currentGET("big4").then(res => {
|
currentGET("big4").then((res) => {
|
||||||
|
|
||||||
console.log("交易所数据：");
|
console.log("交易所数据：");
|
||||||
//console.log(this.tableData1);
|
//console.log(this.tableData1);
|
||||||
console.log(res.data);
|
console.log(res.data);
|
||||||
this.tableData = res.data;
|
this.tableData = res.data;
|
||||||
this.tableData.forEach((item, index) => {
|
this.tableData.forEach((item, index) => {
|
||||||
|
if (index % 2 !== 0) {
|
||||||
if(index % 2 !== 0)
|
item.exchangeColor = "#00D4AA";
|
||||||
{
|
|
||||||
|
|
||||||
item.exchangeColor = "#1976d2";
|
|
||||||
item.priceColor = "#333333";
|
item.priceColor = "#333333";
|
||||||
item.regionColor = "#333333";
|
item.regionColor = "#333333";
|
||||||
this.$set(this.tableData, index, item);
|
this.$set(this.tableData, index, item);
|
||||||
}
|
} else {
|
||||||
else
|
|
||||||
{
|
|
||||||
//console.log("偶数index: " + index);
|
//console.log("偶数index: " + index);
|
||||||
item.exchangeColor = "#ff9800";
|
item.exchangeColor = "#10b981";
|
||||||
item.priceColor = "#ff9800";
|
item.priceColor = "#10b981";
|
||||||
item.regionColor = "#ff9800";
|
item.regionColor = "#10b981";
|
||||||
this.$set(this.tableData, index, item);
|
this.$set(this.tableData, index, item);
|
||||||
//this.$set(this.tableData, index, modifiedItem);
|
//this.$set(this.tableData, index, modifiedItem);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
// console.log("转换后交易所数据：");
|
// console.log("转换后交易所数据：");
|
||||||
// console.log(this.tableData);
|
// console.log(this.tableData);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
@@ -100,9 +98,11 @@ export default {
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.table-container {
|
.table-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding-top: 10px; /* 添加顶部内边距 */
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
@@ -111,20 +111,31 @@ table {
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
th, td {
|
th,
|
||||||
padding: 12px;
|
td {
|
||||||
color: #333333;
|
padding: 10px 12px;
|
||||||
|
color: #334155;
|
||||||
|
font-family: "PingFang SC";
|
||||||
|
font-weight: 400;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
line-height: 17px;
|
||||||
width: 25%;
|
width: 25%;
|
||||||
}
|
}
|
||||||
|
|
||||||
thead {
|
td:first-child {
|
||||||
background: #f5f7fa;
|
width: 36%;
|
||||||
padding: 10%;
|
}
|
||||||
|
|
||||||
|
thead th {
|
||||||
|
color: #059669;
|
||||||
|
font-family: "PingFang SC";
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 17px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scroll-wrapper {
|
.scroll-wrapper {
|
||||||
height: 250px; /* 适配大屏，数据较多可增加高度 */
|
flex: 1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -133,10 +144,5 @@ thead {
|
|||||||
}
|
}
|
||||||
|
|
||||||
tr {
|
tr {
|
||||||
border-bottom: 1px solid #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr:nth-child(even) {
|
|
||||||
background: rgba(25, 118, 210, 0.05);
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -5,10 +5,10 @@
|
|||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th style="width: 24%">车牌号</th>
|
<th style="width: 24%">车牌号</th>
|
||||||
<th style="width: 19%">当前总里程</th>
|
<th style="width: 19%">总里程</th>
|
||||||
<th style="width: 19%">当日里程</th>
|
<th style="width: 19%">日里程</th>
|
||||||
<th style="width: 19%">当日用氢量</th>
|
<th style="width: 19%">日用氢量</th>
|
||||||
<th style="width: 19%">当日碳减排</th>
|
<th style="width: 19%">日碳减排</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
</table>
|
</table>
|
||||||
@@ -174,15 +174,18 @@ export default {
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.table-container {
|
.table-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding-top: 10px; /* 添加顶部内边距 */
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
text-align: center; /* 修改为居中对齐 */
|
text-align: center;
|
||||||
|
table-layout: fixed; /* 固定表格布局，确保列宽一致 */
|
||||||
}
|
}
|
||||||
|
|
||||||
th,
|
th,
|
||||||
@@ -190,21 +193,41 @@ td {
|
|||||||
padding: 12px;
|
padding: 12px;
|
||||||
color: #2d3748;
|
color: #2d3748;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
border-right: 1px solid rgba(0, 212, 170, 0.2);
|
||||||
|
border: none;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 统一列宽 */
|
||||||
|
th:nth-child(1),
|
||||||
|
td:nth-child(1) {
|
||||||
width: 24%;
|
width: 24%;
|
||||||
border-right: 1px solid rgba(79, 209, 197, 0.2);
|
}
|
||||||
|
|
||||||
|
th:nth-child(2),
|
||||||
|
td:nth-child(2),
|
||||||
|
th:nth-child(3),
|
||||||
|
td:nth-child(3),
|
||||||
|
th:nth-child(4),
|
||||||
|
td:nth-child(4),
|
||||||
|
th:nth-child(5),
|
||||||
|
td:nth-child(5) {
|
||||||
|
width: 19%;
|
||||||
}
|
}
|
||||||
|
|
||||||
th {
|
th {
|
||||||
color: #000;
|
color: #94a3b8;
|
||||||
font-weight: 600;
|
font-family: "PingFang SC";
|
||||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
font-weight: 500;
|
||||||
}
|
|
||||||
td {
|
|
||||||
padding: 10px 12px;
|
|
||||||
color: #000;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
width: 20%;
|
padding: 12px;
|
||||||
text-align: center; /* 确保单元格内容居中 */
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
color: #1e293b;
|
||||||
|
font-family: "PingFang TC";
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
thead {
|
thead {
|
||||||
@@ -235,8 +258,8 @@ thead {
|
|||||||
text-align: center; /* 确保单元格内容居中 */
|
text-align: center; /* 确保单元格内容居中 */
|
||||||
}
|
}
|
||||||
.closeButton {
|
.closeButton {
|
||||||
color: #4fd1c5;
|
color: #ffffff;
|
||||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
background: linear-gradient(135deg, #00d4aa 0%, #1de9b6 100%);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@@ -244,9 +267,9 @@ thead {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.closeButton:hover {
|
.closeButton:hover {
|
||||||
background: linear-gradient(135deg, #3bb2ff 0%, #00d4ff 100%);
|
background: linear-gradient(135deg, #00bfa5 0%, #00d4aa 100%);
|
||||||
transform: translateY(-1px);
|
transform: translateY(-1px);
|
||||||
box-shadow: 0 4px 12px rgba(79, 209, 197, 0.3);
|
box-shadow: 0 4px 12px rgba(0, 212, 170, 0.3);
|
||||||
}
|
}
|
||||||
/* 内容容器滚动设置 */
|
/* 内容容器滚动设置 */
|
||||||
.dialog-body-wrapper {
|
.dialog-body-wrapper {
|
||||||
@@ -267,7 +290,7 @@ thead {
|
|||||||
);
|
);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
backdrop-filter: blur(20px);
|
backdrop-filter: blur(20px);
|
||||||
box-shadow: 0 8px 32px rgba(79, 209, 197, 0.15);
|
box-shadow: 0 8px 32px rgba(0, 212, 170, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialog_el .el-table {
|
.dialog_el .el-table {
|
||||||
@@ -277,7 +300,7 @@ thead {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.dialog_el .el-table th {
|
.dialog_el .el-table th {
|
||||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
|
background: linear-gradient(135deg, #00d4aa 0%, #1de9b6 100%) !important;
|
||||||
color: #ffffff !important;
|
color: #ffffff !important;
|
||||||
font-weight: 600 !important;
|
font-weight: 600 !important;
|
||||||
}
|
}
|
||||||
@@ -285,11 +308,11 @@ thead {
|
|||||||
.dialog_el .el-table td {
|
.dialog_el .el-table td {
|
||||||
background-color: rgba(255, 255, 255, 0.7) !important;
|
background-color: rgba(255, 255, 255, 0.7) !important;
|
||||||
color: #2d3748 !important;
|
color: #2d3748 !important;
|
||||||
border-bottom: 1px solid rgba(79, 209, 197, 0.1) !important;
|
border-bottom: 1px solid rgba(0, 212, 170, 0.1) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialog_el .el-table--enable-row-hover .el-table__body tr:hover > td {
|
.dialog_el .el-table--enable-row-hover .el-table__body tr:hover > td {
|
||||||
background-color: rgba(79, 209, 197, 0.1) !important;
|
background-color: rgba(0, 212, 170, 0.1) !important;
|
||||||
}
|
}
|
||||||
/* .dialog-table{
|
/* .dialog-table{
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
@@ -308,29 +331,34 @@ thead {
|
|||||||
background-color: rgba(255,255,255,0.8);
|
background-color: rgba(255,255,255,0.8);
|
||||||
} */
|
} */
|
||||||
.scroll-wrapper {
|
.scroll-wrapper {
|
||||||
height: 550px; /*适配大屏，数据较多可增加高度 */
|
flex: 1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
background: rgba(255, 255, 255, 0.5);
|
||||||
background: rgba(255, 255, 255, 0.8);
|
}
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
|
.scroll-container {
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scroll-container table {
|
.scroll-container table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
table-layout: fixed; /* 确保与表头布局一致 */
|
||||||
}
|
}
|
||||||
|
|
||||||
tr {
|
tr {
|
||||||
border-bottom: 1px solid rgba(79, 209, 197, 0.1);
|
border-bottom: 1px solid rgba(0, 212, 170, 0.1);
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:nth-child(even) {
|
tr:nth-child(even) {
|
||||||
background: rgba(79, 209, 197, 0.05);
|
background: rgba(0, 212, 170, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:hover {
|
/* tr:hover {
|
||||||
background: rgba(79, 209, 197, 0.1);
|
background: rgba(0, 212, 170, 0.1);
|
||||||
transform: translateX(2px);
|
transform: translateX(2px);
|
||||||
}
|
} */
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user