From 2bd38f3c07fa4ec63c5b5fd99bca19d2b1b4ee2d Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期二, 19 三月 2024 14:54:50 +0800
Subject: [PATCH] refactor
---
src/views/screen/components/screen-video/index.vue | 206 +++++++++++++----------------
src/views/screen/components/screen-wrapper/index.vue | 8
src/views/screen/components/screen-car/index.vue | 117 ++++++++++++++++
src/views/screen/components/screen-face/index.vue | 87 ++----------
4 files changed, 227 insertions(+), 191 deletions(-)
diff --git a/src/views/screen/components/screen-car/index.vue b/src/views/screen/components/screen-car/index.vue
index 76da509..a8a6446 100644
--- a/src/views/screen/components/screen-car/index.vue
+++ b/src/views/screen/components/screen-car/index.vue
@@ -1,19 +1,130 @@
<template>
<div class="car-container">
- <wrapper-title :title="'浜鸿劯鏁版嵁瓒嬪娍'"></wrapper-title>
+ <wrapper-title :title="'杞﹁締璁惧鏁版嵁'"></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">{{ formatNumber(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">{{ formatNumber(200000) }}</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">{{ formatNumber(112313141111) }}</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: {
+ formatNumber(value) {
+ return new Intl.NumberFormat('en-US').format(value);
+ }
+ },
+
+ 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: rgba(67, 102, 155, 0.3);
+ border: 1px solid rgba(47, 91, 157, 0.8);
+
+ .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;
+ }
+ }
+ }
+ }
+
+ #faceChart {
+ width: 100%;
+ height: 300px;
+ }
+}
+
+.width-img {
+ width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/screen/components/screen-face/index.vue b/src/views/screen/components/screen-face/index.vue
index 978f2a5..cf1a29a 100644
--- a/src/views/screen/components/screen-face/index.vue
+++ b/src/views/screen/components/screen-face/index.vue
@@ -1,6 +1,6 @@
<template>
<div class="face-container">
- <wrapper-title :title="'浜鸿劯鏁版嵁瓒嬪娍'"></wrapper-title>
+ <wrapper-title :title="'浜鸿劯璁惧鏁版嵁'"></wrapper-title>
<div class="face-content">
<div class="data-plane">
@@ -10,8 +10,8 @@
<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">{{formatNumber(1123)}}</div>
+ <div class="data-lable">璁惧鎬绘暟</div>
+ <div class="data-num">{{ formatNumber(1123) }}</div>
</div>
</div>
</dv-border-box-13>
@@ -22,7 +22,7 @@
<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-lable">璁惧姝ｅ父鏁�</div>
<div class="data-num">{{ formatNumber(200000) }}</div>
</div>
</div>
@@ -34,13 +34,12 @@
<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-lable">璁惧寮傚父鏁�</div>
<div class="data-num">{{ formatNumber(112313141111) }}</div>
</div>
</div>
</dv-border-box-13>
</div>
- <div id="faceChart" ref="faceChart"></div>
</div>
</div>
@@ -48,8 +47,6 @@
<script>
import WrapperTitle from '../wrapper-title/index';
-import * as echarts from 'echarts';
-let lineChart = null;
export default {
name: 'ScreenFace',
components: {
@@ -65,62 +62,6 @@
},
methods: {
- initChart() {
- const option = {
- legend: {
- right: 'right',
- top: 'top',
- orient: "vertical",
- icon: 'rect',
- data: [
- {
- name: '姝ｅ父鏁�',
- itemStyle: {
- color: 'rgba(62, 144, 247, 1)'
- }
- },
- {
- name: '寮傚父鏁�',
- itemStyle: {
- color: 'rgba(85, 192, 191, 1)'
- }
- },
- ],
- },
- grid: {
- left: '2%',
- right: '5%',
- bottom: '5%',
- top: '8%',
- containLabel: true
- },
- tooltip: {},
- xAxis: {
- type: 'category',
- data: Object.keys(this.dataList.state),
- },
- yAxis: {},
- series: [
- {
- name: '浠婃棩',
- data: Object.entries(this.dataList.state).map(([key, value]) => value),
- type: 'line',
- itemStyle: {
- color: 'rgba(62, 144, 247, 1)'
- }
- },
- {
- name: '鏄ㄦ棩',
- data: Object.entries(this.dataList.state2).map(([key, value]) => value),
- type: 'line',
- itemStyle: {
- color: 'rgba(85, 192, 191, 1)'
- }
- }
- ]
- };
- lineChart.setOption(option, true);
- },
formatNumber(value) {
return new Intl.NumberFormat('en-US').format(value);
@@ -128,19 +69,21 @@
},
mounted() {
- lineChart = echarts.init(this.$refs.faceChart);
- this.initChart();
- },
- beforeDestroy() {
- if (lineChart) {
- lineChart.dispose();
- }
+
},
}
</script>
<style lang="scss" scoped>
+.face-container {
+ width: 100%;
+ height: fit-content;
+ display: flex;
+ flex-direction: column;
+}
+
.face-content {
+ flex: 1;
background: rgba(67, 102, 155, 0.3);
border: 1px solid rgba(47, 91, 157, 0.8);
@@ -151,7 +94,7 @@
.data-plane {
.data-item {
width: 100%;
- padding: 20px 20px;
+ padding: 10px 20px;
display: flex;
align-items: center;
diff --git a/src/views/screen/components/screen-video/index.vue b/src/views/screen/components/screen-video/index.vue
index e6fd8dd..3fa66d1 100644
--- a/src/views/screen/components/screen-video/index.vue
+++ b/src/views/screen/components/screen-video/index.vue
@@ -1,149 +1,129 @@
<template>
<div class="video-container">
- <wrapper-title :title="'瑙嗛璁惧'"></wrapper-title>
+ <wrapper-title :title="'瑙嗛璁惧鏁版嵁'"></wrapper-title>
+
<div class="video-content">
- <div class="video-plane">
- <dv-border-box-13 class="panel">
- <div class="panel-container">
- <div class="top-container">
- <div class="data-item">
- <dv-decoration-9 style="width:120px;height:120px;">
- <div class="data-num type1">1156</div>
- </dv-decoration-9>
- <div class="data-label">璁惧鎬绘暟</div>
- </div>
- <div class="data-item">
- <dv-decoration-9 style="width:120px;height:120px;">
- <div class="data-num type2">1000</div>
- </dv-decoration-9>
- <div class="data-label">姝ｅ父鏁�</div>
- </div>
+ <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="bottom-container">
- <div class="data-item">
- <dv-decoration-9 style="width:120px;height:120px;">
- <div class="data-num type3">156</div>
- </dv-decoration-9>
- <div class="data-label">寮傚父鏁�</div>
- </div>
- <div class="data-item">
- <dv-decoration-9 style="width:120px;height:120px;">
- <div class="data-num type4">75</div>
- </dv-decoration-9>
- <div class="data-label">鐢熸垚寮傚父宸ュ崟鏁�</div>
- </div>
- <div class="data-item">
- <dv-decoration-9 style="width:120px;height:120px;">
- <div class="data-num type5">91.36%</div>
- </dv-decoration-9>
- <div class="data-label">璁惧杩愯鐜�</div>
- </div>
+ <div class="data-info">
+ <div class="data-lable">璁惧鎬绘暟</div>
+ <div class="data-num">{{ formatNumber(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">{{ formatNumber(200000) }}</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">{{ formatNumber(112313141111) }}</div>
+ </div>
+ </div>
</dv-border-box-13>
</div>
</div>
</div>
+
</template>
<script>
import WrapperTitle from '../wrapper-title/index';
-
export default {
- name: 'ScreenVideo',
+ name: 'ScreenFace',
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: {
+
+ formatNumber(value) {
+ return new Intl.NumberFormat('en-US').format(value);
+ }
+ },
+
+ mounted() {
+
+ },
}
</script>
<style lang="scss" scoped>
.video-container {
- flex: 1;
+ width: 100%;
+ height: fit-content;
display: flex;
flex-direction: column;
- margin-bottom: 20px;
}
.video-content {
flex: 1;
background: rgba(67, 102, 155, 0.3);
border: 1px solid rgba(47, 91, 157, 0.8);
-}
-.panel {
- width: 100%;
- height: 100%;
-}
-
-.video-plane {
- width: 100%;
-
- .panel-container {
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- align-items: center;
- box-sizing: border;
- padding: 20px;
-
- .top-container,
- .bottom-container {
- width: 100%;
- display: flex;
-
- }
-
- .top-container {
- justify-content: center;
-
- .data-item {
- margin: 0 30px;
- }
- }
-
- .bottom-container {
- justify-content: space-around;
- }
-
- .data-item {
- display: flex;
- flex-direction: column;
- align-items: center;
- font-size: 20px;
- color: #fff;
- .data-num {
- font-weight: bold;
- font-size: 22px;
- }
- }
-
- .type1 {
- color: #0883d4;
- }
-
- .type2 {
- color: #08b108;
- }
-
- .type3 {
- color: #ff0000;
- }
-
- .type4 {
- color: #d82a64;
- }
-
- .type5 {
- color: #08b108;
- }
-
+ .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;
+ }
+ }
+ }
+ }
+
+ #faceChart {
+ width: 100%;
+ height: 300px;
+ }
+}
+
+.width-img {
+ width: 100%;
}
</style>
\ No newline at end of file
diff --git a/src/views/screen/components/screen-wrapper/index.vue b/src/views/screen/components/screen-wrapper/index.vue
index 14b259f..532a79a 100644
--- a/src/views/screen/components/screen-wrapper/index.vue
+++ b/src/views/screen/components/screen-wrapper/index.vue
@@ -4,10 +4,11 @@
<div class="wrapper-content">
<div class="left-container wrapper">
<screen-face></screen-face>
+ <screen-car></screen-car>
+ <screen-video></screen-video>
</div>
<div class="center-container wrapper">
<screen-detection></screen-detection>
- <screen-video></screen-video>
</div>
<div class="right-container wrapper">
@@ -22,13 +23,15 @@
import ScreenDetection from '../screen-detection/index';
import ScreenExamine from '../screen-examine/index';
import ScreenVideo from '../screen-video/index';
+import ScreenCar from '../screen-car/index';
export default {
name: 'ScreenWrapper',
components: {
ScreenFace,
ScreenDetection,
ScreenExamine,
- ScreenVideo
+ ScreenVideo,
+ ScreenCar
},
}
</script>
@@ -72,5 +75,4 @@
padding-right: 0;
}
}
-
</style>
\ No newline at end of file
--
Gitblit v1.8.0