From c9aaead65392b10b576f2f35c992a64bfb7ab08f Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期三, 10 四月 2024 18:21:13 +0800
Subject: [PATCH] feat:工单数据
---
src/views/screen/components/screen-data/index.vue | 45 ++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 40 insertions(+), 5 deletions(-)
diff --git a/src/views/screen/components/screen-data/index.vue b/src/views/screen/components/screen-data/index.vue
index f6eba29..5518046 100644
--- a/src/views/screen/components/screen-data/index.vue
+++ b/src/views/screen/components/screen-data/index.vue
@@ -4,7 +4,25 @@
<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="1111" :holaColor="`#4ea8ff`"></data-hola>
+ </div>
+ <div class="panel-item">
+ <data-hola :holaTitle="`宸插鐞嗗伐鍗曟暟`" :centerValue="1111" :holaColor="`#4ea8ff`"></data-hola>
+ </div>
+ <div class="panel-item">
+ <data-hola :holaTitle="`鏈鐞嗗伐鍗曟暟`" :centerValue="1111" :holaColor="`#4ea8ff`"></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: '15%',
},
legend: {
right: 0,
@@ -102,7 +124,7 @@
<style lang="scss" scoped>
.data-container {
width: 100%;
- height: 450px;
+ height: 470px;
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,26 @@
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;
+
+ .panel-item {
+ width: 100px;
+ height: 100px;
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0