From bfb10b42c5fb6bc9f751f88f9351bfc19c6380a4 Mon Sep 17 00:00:00 2001
From: 黄何裕 <1053952480@qq.com>
Date: 星期二, 16 七月 2024 14:57:50 +0800
Subject: [PATCH] 样式调整
---
src/views/screen/components/screen-data/index.vue | 48 ++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 42 insertions(+), 6 deletions(-)
diff --git a/src/views/screen/components/screen-data/index.vue b/src/views/screen/components/screen-data/index.vue
index f6eba29..86a6679 100644
--- a/src/views/screen/components/screen-data/index.vue
+++ b/src/views/screen/components/screen-data/index.vue
@@ -1,10 +1,28 @@
<template>
<div class="data-container">
- <wrapper-title :title="'宸ュ崟鏁版嵁'" :path="'/monitorServe/car'"></wrapper-title>
+ <wrapper-title :title="'宸ュ崟鏁版嵁'" :path="'/work-order-center/maintenance/work-order/work-order'"></wrapper-title>
<div class="data-content">
<div class="data-panel">
-
+ <div class="panel-title">
+ <div class="icon">
+ <img src="@/assets/icons/arrow.png" alt="">
+ </div>
+ <div class="title">
+ 鏁翠綋宸ュ崟鏁�
+ </div>
+ </div>
+ <div class="panel-container">
+ <div class="panel-item">
+ <data-hola :holaTitle="`宸ュ崟鎬绘暟`" :centerValue="3000" :holaColor="`#4ea8ff`"></data-hola>
+ </div>
+ <div class="panel-item">
+ <data-hola :holaTitle="`宸插鐞嗗伐鍗曟暟`" :centerValue="1600" :holaColor="`#5dec24`"></data-hola>
+ </div>
+ <div class="panel-item">
+ <data-hola :holaTitle="`鏈鐞嗗伐鍗曟暟`" :centerValue="200" :holaColor="`#dfc639`"></data-hola>
+ </div>
+ </div>
</div>
<div class="data-panel">
<div class="panel-title">
@@ -26,11 +44,13 @@
<script>
import * as echarts from 'echarts';
import WrapperTitle from '../wrapper-title/index';
+import DataHola from './components/data-hola';
let chart = null;
export default {
name: 'ScreenData',
components: {
- WrapperTitle
+ WrapperTitle,
+ DataHola
},
data() {
return {
@@ -45,7 +65,9 @@
initEchart() {
const option = {
grid: {
+ top: '10%',
right: 0,
+ bottom: '17%',
},
legend: {
right: 0,
@@ -102,7 +124,7 @@
<style lang="scss" scoped>
.data-container {
width: 100%;
- height: 450px;
+ height: 500px;
display: flex;
flex-direction: column;
@@ -110,14 +132,14 @@
flex: 1;
background: rgba(67, 102, 155, 0.3);
border: 1px solid rgba(47, 91, 157, 0.8);
- padding: 20px;
+ padding: 10px;
box-sizing: border-box;
}
}
.echart-container {
width: 100%;
- height: 300px;
+ height: 260px;
#barChart {
width: 100%;
@@ -129,13 +151,27 @@
color: #b9b9b9;
display: flex;
align-items: center;
+
.icon {
width: 20px;
margin-right: 5px;
+
img {
width: 100%;
display: block;
}
}
}
+
+.panel-container {
+ width: 100%;
+ display: flex;
+ justify-content: space-around;
+ margin: 10px 0;
+
+ .panel-item {
+ width: 110px;
+ height: 110px;
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0