From 9e5caf43d7059cd5b28703b138e95b7f4df94699 Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期五, 27 九月 2024 17:00:42 +0800
Subject: [PATCH] 首页图表
---
src/views/screen/components/screen-face/index.vue | 133 +++++++++++---------------------------------
1 files changed, 33 insertions(+), 100 deletions(-)
diff --git a/src/views/screen/components/screen-face/index.vue b/src/views/screen/components/screen-face/index.vue
index 0f4a90c..8c1f54a 100644
--- a/src/views/screen/components/screen-face/index.vue
+++ b/src/views/screen/components/screen-face/index.vue
@@ -1,8 +1,7 @@
<template>
<div class="face-container">
- <div class="title-container">
- <span class="title">浜鸿劯鏁版嵁瓒嬪娍</span>
- </div>
+ <wrapper-title :title="'浜鸿劯璁惧鏁版嵁'" :path="'/monitorServe/face'"></wrapper-title>
+
<div class="face-content">
<div class="data-plane">
<dv-border-box-13 class="plane">
@@ -11,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 type1" v-roll>{{ 1123 }}</div>
</div>
</div>
</dv-border-box-13>
@@ -23,8 +22,8 @@
<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 class="data-lable">姝ｅ父鏁�</div>
+ <div class="data-num type2" v-roll>{{ 2000 }}</div>
</div>
</div>
</dv-border-box-13>
@@ -35,23 +34,24 @@
<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 class="data-lable">寮傚父鏁�</div>
+ <div class="data-num type3" v-roll>{{ 1000 }}</div>
</div>
</div>
</dv-border-box-13>
</div>
- <div id="faceChart" ref="faceChart"></div>
</div>
</div>
</template>
<script>
-import * as echarts from 'echarts';
-let lineChart = null;
+import WrapperTitle from '../wrapper-title/index';
export default {
name: 'ScreenFace',
+ components: {
+ WrapperTitle
+ },
data() {
return {
dataList: {
@@ -62,105 +62,28 @@
},
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);
- }
},
mounted() {
- lineChart = echarts.init(this.$refs.faceChart);
- this.initChart();
- },
- beforeDestroy() {
- if (lineChart) {
- lineChart.dispose();
- }
+
},
}
</script>
<style lang="scss" scoped>
-.title-container {
- background-image: url("../../../../assets/images/screen/title_bg.png");
- background-size: 231px 100%;
- background-repeat: no-repeat;
- height: 38px;
+.face-container {
width: 100%;
- position: relative;
+ height: fit-content;
display: flex;
- align-items: center;
- margin-bottom: 10px;
-
- .title {
- margin-left: 20px;
- margin-top: -2px;
- color: #fff;
- letter-spacing: 2px;
- font-size: 20px;
- font-style: italic;
- }
+ flex-direction: column;
}
.face-content {
- background: rgba(67, 102, 155, 0.3);
- border: 1px solid rgba(47, 91, 157, 0.8);
+ 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;
@@ -169,7 +92,7 @@
.data-plane {
.data-item {
width: 100%;
- padding: 20px 20px;
+ padding: 10px 20px;
display: flex;
align-items: center;
@@ -188,6 +111,16 @@
font-size: 24px;
color: #fff;
}
+
+ .type1 {
+ color: #287cfa;
+ }
+ .type2 {
+ color: #0cd81d;
+ }
+ .type3 {
+ color: #e20c0c
+ }
}
}
}
@@ -201,4 +134,4 @@
.width-img {
width: 100%;
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0