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 | 54 +++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 51 insertions(+), 3 deletions(-)
diff --git a/src/views/home/data-view/index.vue b/src/views/home/data-view/index.vue
index 026df58..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' },
@@ -105,7 +122,22 @@
"data5": 95
}
],
- 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: {
@@ -126,6 +158,12 @@
});
data.name = '鑷础甯�';
this.activeData = data;
+ },
+
+ toScreen() {
+ this.$router.push({
+ path: '/screen'
+ })
}
},
created() {
@@ -160,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