From b79d7e36392d9992ef883d2fc731b1ab3cf577c3 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期二, 01 八月 2023 10:40:57 +0800
Subject: [PATCH] #
---
src/components/datav/cards.vue | 251 +++++++++++++++++++-------------------------------
1 files changed, 95 insertions(+), 156 deletions(-)
diff --git a/src/components/datav/cards.vue b/src/components/datav/cards.vue
index a8ea08d..9d3c8c3 100644
--- a/src/components/datav/cards.vue
+++ b/src/components/datav/cards.vue
@@ -1,26 +1,10 @@
<template>
<div id="cards">
- <div class="card-item" v-for="(card, i) in cards" :key="card.title">
- <div class="card-header">
- <div class="card-header-left">{{ card.title }}</div>
- <div class="card-header-right">{{ '0' + (i + 1) }}</div>
- </div>
- <dv-charts class="ring-charts" :option="card.ring" />
- <div class="card-footer">
- <div class="card-footer-item">
- <div class="footer-title">绱閲戦</div>
- <div class="footer-detail">
- <dv-digital-flop :config="card.total" style="width:70%;height:35px;" />鍏�
- </div>
- </div>
- <div class="card-footer-item">
- <div class="footer-title">宸℃煡鐥呭</div>
- <div class="footer-detail">
- <dv-digital-flop :config="card.num" style="width:70%;height:35px;" />澶�
- </div>
- </div>
- </div>
+ <div class="chart-name">
+ 璁惧鏁呴殰鏈堣秼鍔�
+ <dv-decoration-3 style="width:200px;height:20px;" />
</div>
+ <dv-charts :option="option" />
</div>
</template>
@@ -31,81 +15,85 @@
name: 'Cards',
data() {
return {
- cards: []
+ option: {
+ legend: { // 灏忔爣绛�
+ data: [
+ {
+ name: '绯诲垪A',
+ color: '#333'
+ },
+ {
+ name: '绯诲垪B',
+ color: '#fff'
+ }
+ ],
+ textStyle: {
+ fill: '#fff'
+ },
+ left: 0,
+ top: '50%',
+ orient: 'vertical'
+ },
+ xAxis: {
+ name: '绗竴鍛�',
+ data: ['鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚', '鍛ㄦ棩'],
+ nameTextStyle: { // 杞存爣棰�
+ fill: '#fff',
+ fontSize: 15
+ },
+ axisLine: { // 杞寸嚎
+ style: {
+ stroke: '#fff'
+ }
+ },
+ axisLabel: { // 杞村瓧
+ style: {
+ fill: '#fff',
+ fontSize: 12,
+ }
+ }
+ },
+ yAxis: {
+ name: '閿�鍞',
+ data: 'value',
+ nameTextStyle: { // 杞存爣棰�
+ fill: '#fff',
+ fontSize: 15
+ },
+ axisLine: { // 杞寸嚎
+ style: {
+ stroke: '#fff'
+ }
+ },
+ axisLabel: { // 杞村瓧
+ style: {
+ fill: '#fff',
+ fontSize: 12,
+ }
+ }
+ },
+ series: [ // 鏁版嵁
+ {
+ name: '绯诲垪A',
+ data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
+ type: 'bar',
+ gradient: {
+ color: ['#333']
+ }
+ },
+ {
+ name: '绯诲垪B',
+ data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
+ type: 'bar',
+ gradient: {
+ color: ['#fff']
+ }
+ }
+ ]
+ }
}
},
methods: {
- createData() {
- const { randomExtend } = this
-
- this.httpData();
-
- this.cards = new Array(5).fill(0).map((foo, i) => ({
- title: '娴嬭瘯璺' + (i + i),
- total: {
- number: [randomExtend(9000, 10000)],
- content: '{nt}',
- textAlign: 'right',
- style: {
- fill: '#ea6027',
- fontWeight: 'bold'
- }
- },
- num: {
- number: [randomExtend(30, 60)],
- content: '{nt}',
- textAlign: 'right',
- style: {
- fill: '#26fcd8',
- fontWeight: 'bold'
- }
- },
- ring: {
- series: [
- {
- type: 'gauge',
- startAngle: -Math.PI / 2,
- endAngle: Math.PI * 1.5,
- arcLineWidth: 13,
- radius: '80%',
- data: [
- { name: '璧勯噾鍗犳瘮', value: randomExtend(40, 60) }
- ],
- axisLabel: {
- show: false
- },
- axisTick: {
- show: false
- },
- pointer: {
- show: false
- },
- backgroundArc: {
- style: {
- stroke: '#224590'
- }
- },
- details: {
- show: true,
- formatter: '璧勯噾鍗犳瘮{value}%',
- style: {
- fill: '#1ed3e5',
- fontSize: 20
- }
- }
- }
- ],
- color: ['#03d3ec']
- }
- }))
- },
- randomExtend(minNum, maxNum) {
- if (arguments.length === 1) {
- return parseInt(Math.random() * minNum + 1, 10)
- } else {
- return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
- }
- },
httpData() {
const getApiData = async () => {
return await axios.get(this.baseUrl + "test.json", { params: {} })
@@ -114,11 +102,11 @@
}
},
mounted() {
- const { createData } = this
+ const { httpData } = this
- createData()
+ httpData()
- setInterval(this.createData, 30000)
+ setInterval(this.httpData, 30000)
}
}
</script>
@@ -128,68 +116,19 @@
display: flex;
justify-content: space-between;
height: 45%;
+ background-color: rgba(6, 30, 93, 0.5);
+ border-top: 2px solid rgba(1, 153, 209, .5);
+ box-shadow: 0 0 3px blue;
+ box-sizing: border-box;
+ padding: 0px 30px;
+ position: relative;
- .card-item {
- background-color: rgba(6, 30, 93, 0.5);
- border-top: 2px solid rgba(1, 153, 209, .5);
- width: 19%;
- display: flex;
- flex-direction: column;
- }
-
- .card-header {
- display: flex;
- height: 20%;
- align-items: center;
- justify-content: space-between;
-
- .card-header-left {
- font-size: 18px;
- font-weight: bold;
- padding-left: 20px;
- }
-
- .card-header-right {
- padding-right: 20px;
- font-size: 40px;
- color: #03d3ec;
- }
- }
-
- .ring-charts {
- height: 55%;
- }
-
- .card-footer {
- height: 25%;
- display: flex;
- align-items: center;
- justify-content: space-around;
- }
-
- .card-footer-item {
- padding: 5px 10px 0px 10px;
- box-sizing: border-box;
- width: 40%;
- background-color: rgba(6, 30, 93, 0.7);
- border-radius: 3px;
-
- .footer-title {
- font-size: 15px;
- margin-bottom: 5px;
- }
-
- .footer-detail {
- font-size: 20px;
- color: #1294fb;
- display: flex;
- font-size: 18px;
- align-items: center;
-
- .dv-digital-flop {
- margin-right: 5px;
- }
- }
+ .chart-name {
+ position: absolute;
+ right: 70px;
+ text-align: right;
+ font-size: 20px;
+ top: 10px;
}
}
</style>
--
Gitblit v1.9.1