From f18ff6df94830a0147f372f031fa94ab5402ead8 Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期一, 18 三月 2024 15:57:29 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/views/screen/components/screen-face/index.vue | 186 ++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 186 insertions(+), 0 deletions(-)
diff --git a/src/views/screen/components/screen-face/index.vue b/src/views/screen/components/screen-face/index.vue
new file mode 100644
index 0000000..978f2a5
--- /dev/null
+++ b/src/views/screen/components/screen-face/index.vue
@@ -0,0 +1,186 @@
+<template>
+ <div class="face-container">
+ <wrapper-title :title="'浜鸿劯鏁版嵁瓒嬪娍'"></wrapper-title>
+
+ <div class="face-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 id="faceChart" ref="faceChart"></div>
+ </div>
+ </div>
+
+</template>
+
+<script>
+import WrapperTitle from '../wrapper-title/index';
+import * as echarts from 'echarts';
+let lineChart = null;
+export default {
+ 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: {
+ 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>
+.face-content {
+ 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: 20px 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
--
Gitblit v1.8.0