From 4c060cb5b79f8f08ae2fa529feb9992a7fca8cbb Mon Sep 17 00:00:00 2001
From: 龚焕茏 <2842157468@qq.com>
Date: 星期四, 22 八月 2024 16:52:40 +0800
Subject: [PATCH] feat：新增工单故障类型记录、支持多个
---
src/views/screen/components/screen-car/index.vue | 126 +++++++++++++++++++++++++++++++++++++++++-
1 files changed, 123 insertions(+), 3 deletions(-)
diff --git a/src/views/screen/components/screen-car/index.vue b/src/views/screen/components/screen-car/index.vue
index 76da509..5a3f04e 100644
--- a/src/views/screen/components/screen-car/index.vue
+++ b/src/views/screen/components/screen-car/index.vue
@@ -1,19 +1,139 @@
<template>
<div class="car-container">
- <wrapper-title :title="'浜鸿劯鏁版嵁瓒嬪娍'"></wrapper-title>
+ <wrapper-title :title="'杞﹁締璁惧鏁版嵁'" :path="'/monitorServe/car'"></wrapper-title>
+ <div class="car-content">
+ <div class="data-plane">
+ <dv-border-box-13 class="plane">
+ <div class="data-item">
+ <div class="data-icon">
+ <img src="@/assets/images/screen/icon/icon1.png" alt="" class="width-img">
+ </div>
+ <div class="data-info">
+ <div class="data-lable">璁惧鎬绘暟</div>
+ <div class="data-num type1" v-roll>{{ 1123 }}</div>
+ </div>
+ </div>
+ </dv-border-box-13>
+
+ <dv-border-box-13 class="plane">
+ <div class="data-item">
+ <div class="data-icon">
+ <img src="@/assets/images/screen/icon/icon2.png" alt="" class="width-img">
+ </div>
+ <div class="data-info">
+ <div class="data-lable">璁惧姝ｅ父鏁�</div>
+ <div class="data-num type2" v-roll>{{ 2000 }}</div>
+ </div>
+ </div>
+ </dv-border-box-13>
+
+ <dv-border-box-13 class="plane">
+ <div class="data-item">
+ <div class="data-icon">
+ <img src="@/assets/images/screen/icon/icon2.png" alt="" class="width-img">
+ </div>
+ <div class="data-info">
+ <div class="data-lable">璁惧寮傚父鏁�</div>
+ <div class="data-num type3" v-roll>{{ 1000 }}</div>
+ </div>
+ </div>
+ </dv-border-box-13>
+ </div>
+
+ </div>
</div>
+
</template>
<script>
import WrapperTitle from '../wrapper-title/index';
-
export default {
name: 'ScreenCar',
components: {
WrapperTitle
},
+ data() {
+ return {
+ dataList: {
+ state: { '01:00': 1000, '02:00': 2131, '03:00': 1233, '04:00': 2132, '05:00': 3211, '06:00': 213, '07:00': 123, '08:00': 566 },
+ state2: { '01:00': 900, '02:00': 1131, '03:00': 1533, '04:00': 2132, '05:00': 3011, '06:00': 13, '07:00': 113, '08:00': 566 },
+ },
+ }
+ },
+
+ methods: {
+ },
+
+ mounted() {
+ },
+ beforeDestroy() {
+ },
}
</script>
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="scss" scoped>
+.car-container {
+ width: 100%;
+ height: fit-content;
+ display: flex;
+ flex-direction: column;
+}
+
+.car-content {
+ flex: 1;
+ background: url('../../../../assets/images/screen/cardBg.png');
+ background-size: cover !important;
+ background-repeat: no-repeat !important;
+ background-position: center center !important;
+
+ .plane {
+ margin-bottom: 10px;
+ }
+
+ .data-plane {
+ .data-item {
+ width: 100%;
+ padding: 10px 20px;
+ display: flex;
+ align-items: center;
+
+ .data-icon {
+ width: 40px;
+ margin: 0 20px;
+ }
+
+ .data-info {
+ flex: 1;
+ color: #5b83bd;
+ font-size: 16px;
+
+ .data-num {
+ margin-top: 5px;
+ font-size: 24px;
+ color: #fff;
+ }
+
+ .type1 {
+ color: #287cfa;
+ }
+ .type2 {
+ color: #0cd81d;
+ }
+ .type3 {
+ color: #e20c0c
+ }
+ }
+ }
+ }
+
+ #faceChart {
+ width: 100%;
+ height: 300px;
+ }
+}
+
+.width-img {
+ width: 100%;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0