From aa05304d221b1883d746e686f390d6f3fba598a7 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期五, 24 五月 2024 09:36:09 +0800
Subject: [PATCH] feat:动态数据中心
---
src/views/home/data-view/index.vue | 179 +++++++++++++++++++----------------------------------------
1 files changed, 58 insertions(+), 121 deletions(-)
diff --git a/src/views/home/data-view/index.vue b/src/views/home/data-view/index.vue
index 1360bc8..01aa966 100644
--- a/src/views/home/data-view/index.vue
+++ b/src/views/home/data-view/index.vue
@@ -8,6 +8,23 @@
<el-card class="map-wrapper">
+ <el-row>
+ <el-col :span="5">
+ <div class="select-container">
+ <div class="select-label">
+ 鏁版嵁婧�
+ </div>
+ <el-select v-model="selectOption" placeholder="璇烽�夋嫨">
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+ </el-option>
+ </el-select>
+ </div>
+
+ </el-col>
+ <el-col :offset="17" :span="2">
+ <el-button type="primary" @click="toScreen">鍙鍖栧ぇ灞�</el-button>
+ </el-col>
+ </el-row>
<el-row :gutter="40" class="data-plane" style="height: 100%;">
<el-col :xs='24' :md="24" :sm="24" :lg="6" :xl="6" style="height: 100%;">
<data-icon :activeData="activeData"></data-icon>
@@ -45,8 +62,8 @@
{ id: 1, type: '宸ュ崟鏁�', num: 523, },
{ id: 2, type: '鎭㈠鏁�', num: 50, },
{ id: 3, type: '寰呮仮澶嶆暟', num: 523, },
- { id: 4, type: '浜х敓杩濈害浜嬮」鏁�', num: 123, },
- { id: 5, type: '浜х敓杩濈害璐ｄ换涔�', num: 512323, },
+ { id: 4, type: '瓒呮湡鏈鐞嗘暟', num: 123, },
+ { id: 5, type: '瓒呮湡璐ｄ换鏁�', num: 512323, },
],
iconList: [
{ icon: 'el-icon-tickets', color: '#7868d9' },
@@ -57,7 +74,7 @@
],
totalList: [
{
- "name": "铏瑰彛涔�",
+ "name": "鑽ｅ幙",
"data1": 3,
"data2": 82,
"data3": 5,
@@ -65,7 +82,7 @@
"data5": 50
},
{
- "name": "鐜夊爞闀�",
+ "name": "璐′簳鍖�",
"data1": 1,
"data2": 94,
"data3": 38,
@@ -73,7 +90,7 @@
"data5": 87
},
{
- "name": "宕囦箟闀�",
+ "name": "鑷祦浜曞尯",
"data1": 15,
"data2": 57,
"data3": 81,
@@ -81,7 +98,7 @@
"data5": 85
},
{
- "name": "榫欐睜闀�",
+ "name": "娌挎哗鍖�",
"data1": 8,
"data2": 7,
"data3": 60,
@@ -89,7 +106,7 @@
"data5": 43
},
{
- "name": "涓叴闀�",
+ "name": "瀵岄『鍘�",
"data1": 40,
"data2": 75,
"data3": 50,
@@ -97,127 +114,30 @@
"data5": 79
},
{
- "name": "钂查槼闀�",
+ "name": "澶у畨鍖�",
"data1": 68,
"data2": 38,
"data3": 27,
"data4": 43,
"data5": 95
- },
- {
- "name": "澶ц闀�",
- "data1": 52,
- "data2": 9,
- "data3": 74,
- "data4": 40,
- "data5": 82
- },
- {
- "name": "骞哥闀�",
- "data1": 52,
- "data2": 10,
- "data3": 26,
- "data4": 70,
- "data5": 61
- },
- {
- "name": "澶╅┈闀�",
- "data1": 66,
- "data2": 44,
- "data3": 77,
- "data4": 68,
- "data5": 51
- },
- {
- "name": "瀹夐緳闀�",
- "data1": 80,
- "data2": 77,
- "data3": 84,
- "data4": 79,
- "data5": 47
- },
- {
- "name": "鑱氭簮闀�",
- "data1": 85,
- "data2": 78,
- "data3": 12,
- "data4": 37,
- "data5": 32
- },
- {
- "name": "鑳ュ闀�",
- "data1": 91,
- "data2": 76,
- "data3": 30,
- "data4": 47,
- "data5": 28
- },
- {
- "name": "鍚戝敞涔�",
- "data1": 32,
- "data2": 41,
- "data3": 45,
- "data4": 60,
- "data5": 54
- },
- {
- "name": "鏌宠闀�",
- "data1": 8,
- "data2": 80,
- "data3": 4,
- "data4": 14,
- "data5": 20
- },
- {
- "name": "绱潽閾洪晣",
- "data1": 1,
- "data2": 88,
- "data3": 41,
- "data4": 21,
- "data5": 88
- },
- {
- "name": "鐏屽彛闀�",
- "data1": 85,
- "data2": 72,
- "data3": 79,
- "data4": 27,
- "data5": 42
- },
- {
- "name": "闈掑煄灞遍晣",
- "data1": 77,
- "data2": 1,
- "data3": 33,
- "data4": 92,
- "data5": 45
- },
- {
- "name": "婊ㄦ睙琛楅亾",
- "data1": 82,
- "data2": 43,
- "data3": 9,
- "data4": 34,
- "data5": 96
- },
- {
- "name": "缈犳湀婀栭晣",
- "data1": 30,
- "data2": 41,
- "data3": 80,
- "data4": 9,
- "data5": 53
- },
- {
- "name": "鐭崇緤闀�",
- "data1": 9,
- "data2": 15,
- "data3": 24,
- "data4": 92,
- "data5": 37
}
],
- activeData: {name: '鑷础甯�', data1: 0, data2: 0, data3: 0, data4: 0, data5:0}
+ activeData: { name: '鑷础甯�', data1: 0, data2: 0, data3: 0, data4: 0, data5: 0 },
+ options: [
+ {
+ value: 1,
+ label: '鐪佸巺鏁版嵁'
+ },
+ {
+ value: 2,
+ label: '甯傚眬鏁版嵁'
+ },
+ {
+ value: 3,
+ label: '鍏畨閮ㄦ暟鎹�'
+ },
+ ],
+ selectOption: 1
}
},
methods: {
@@ -227,6 +147,7 @@
} else {
this.countTotal();
}
+
},
countTotal() {
let data = {};
@@ -237,6 +158,12 @@
});
data.name = '鑷础甯�';
this.activeData = data;
+ },
+
+ toScreen() {
+ this.$router.push({
+ path: '/screen'
+ })
}
},
created() {
@@ -271,6 +198,16 @@
aspect-ratio: 6/2;
}
+.select-container {
+ display: flex;
+ align-items: center;
+ .select-label {
+ color: #666;
+ margin-right: 20px;
+ font-size: 16px;
+ }
+}
+
@media screen and (min-width: 1200px) {
.el-col-md-6 {
width: 20%;
--
Gitblit v1.8.0