yanglijie/smart-large-screen-light-ln
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
lnljyang
2026-01-05 15:07:49 +08:00
parent 4ad393a9a1
commit 3bb5419386
138 changed files with 118289 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

332
src/views/indexs/left-top.vue Normal file
View File

@@ -0,0 +1,332 @@
<template>
<div class="cards-container">
<!-- 四个卡片 -->
<div class="card">
<!-- 数值与文字 -->
<div class="card-info">
<!-- 主数值（高亮） -->
<div class="value-line">
<span class="number">{{ cards[0].value }}</span>
<span class="unit">{{ cards[0].unit }}</span>
</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 class="card">
<!-- 数值与文字 -->
<div class="card-info">
<!-- 主数值（高亮） -->
<div class="value-line">
<span class="number">{{ cards[1].value }}</span>
<span class="unit">{{ cards[1].unit }}</span>
</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 class="card">
<!-- 数值与文字 -->
<div class="card-info">
<!-- 主数值（高亮） -->
<div class="value-line">
<span class="number">{{ cards[2].value }}</span>
<span class="unit">{{ cards[2].unit }}</span>
</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 class="card">
<!-- 数值与文字 -->
<div class="card-info">
<!-- 主数值（高亮） -->
<div class="value-line">
<span class="number">{{ cards[3].value }}</span>
<span class="unit">{{ cards[3].unit }}</span>
</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>
</template>
<script>
import { currentGET } from 'api/modules'
export default {
name: "BlinkingIcons",
data() {
return {
cards: [
{
id: 1,
value: "452/807",
unit: "辆",
label: "在线车数",
srcValue: "@/assets/img/left_top_lv.png",
},
{
id: 2,
value: "561",
unit: "kg",
label: "当日减碳",
srcValue: "@/assets/img/left/1.svg",
},
{
id: 3,
value: "534",
unit: "kg",
label: "当日用氢量",
srcValue: "@/assets/img/left/1.svg",
},
{
id:4,
value: "3300",
unit: "km",
label: "当日里程",
srcValue: "@/assets/img/left/1.svg",
},
],
};
},
mounted() {
this.getData();
},
methods: {
getData() {
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;
}
let change = this.cards[0];
change.value = res.data.onLineCount + "/" + res.data.vehicleCount;
this.$set(this.cards, 0, change);
change = this.cards[1];
change.value = dayCarbon;
this.$set(this.cards, 1, change);
change = this.cards[2];
change.value = dayHydrogen;
this.$set(this.cards, 2, change);
change = this.cards[3];
change.value = dayMileage;
this.$set(this.cards, 3, change);
});
},
}
};
</script>
<style scoped>
/* 整体背景 */
.cards-container {
display: flex;
justify-content: space-around;
align-items: flex-end;
padding-left: 0px;
padding-top: 30px;
padding-bottom: 30px;
background-image: none;
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 {
margin-bottom: 120px; /* 给下方图标区域留出空间 */
margin-left:10px;
}
.value-line {
font-size: 20px;
margin-bottom: 8px;
width:120px;
}
.number {
color: #1976d2; /* 高亮数字颜色 */
margin-right: 6px;
}
.unit {
font-size: 14px;
opacity: 0.8;
}
.label {
font-size: 16px;
color: #666666;
}
/* 图标容器 */
.icon-wrapper {
position: absolute;
bottom: 0;
left: 54%;
transform: translateX(-50%);
width: 100%;
height: 100px;
overflow: visible;
}
/* 背后闪动的竖直矩形 */
.icon-bg {
position: absolute;
bottom: 0;
left: 50%;
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;
}
/* 圆形平台 */
.platform-circle {
position: absolute;
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 {
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
font-size: 28px;
color: #1976d2;
}
/* 关键帧动画：闪动 */
@keyframes blink {
0% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
/* 图标模拟，可用 Font Awesome 等替换 */
.icon-phone::before {
content: "☎";
}
.icon-shield::before {
content: "⛨";
}
.icon-star::before {
content: "★";
}
.icon-protect::before {
content: "🛡";
}
</style>