From 05e80f0a0531e3b3d10836599f63189af0ee0524 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期二, 12 三月 2024 18:18:20 +0800
Subject: [PATCH] feat:首页添加地图
---
src/views/home/data-view/index.vue | 265 +++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 218 insertions(+), 47 deletions(-)
diff --git a/src/views/home/data-view/index.vue b/src/views/home/data-view/index.vue
index f92b236..0288490 100644
--- a/src/views/home/data-view/index.vue
+++ b/src/views/home/data-view/index.vue
@@ -5,35 +5,40 @@
<h1 class="title">杩愮淮鎶ヨ〃</h1>
</el-col>
</el-row>
- <el-row :gutter="20" class="data-plane">
- <el-col :xs='24' :md="6" :xl="{ span: '4-8' }" :sm="12" v-for="item, index in dataList" :key="item.id">
- <div class="col-content">
- <el-card>
- <el-row type="flex" align="middle" justify="space-between">
- <el-col :xl="8" :lg="8" :md="10" :sm="8" :xs="6">
- <div class="icon-container" :style="{ backgroundColor: iconList[index].color }">
- <i :class="iconList[index].icon" class="icon-font"></i>
- </div>
- </el-col>
- <el-col :xl="14" :lg="14" :md="12" :sm="14" :xs="16">
- <div class="data-info">
- <div class="data-num">{{ item.num }}</div>
- <div class="data-lable">{{ item.type }}</div>
- </div>
- </el-col>
- </el-row>
- </el-card>
- </div>
- </el-col>
- </el-row>
+
+ <el-card class="map-wrapper">
+ <el-row :gutter="40" class="data-plane" style="height: 100%;">
+ <el-col :xs='24' :md="24" :sm="24" :lg="12" :xl="6" style="height: 100%;">
+ <data-icon :activeData="activeData"></data-icon>
+ </el-col>
+ <el-col :xs='24' :md="24" :sm="24" :lg="12" :xl="12" style="height: 100%;">
+ <data-map @filterData="filterData"></data-map>
+ </el-col>
+ <el-col :xs='24' :md="24" :sm="24" :lg="12" :xl="6" style="height: 100%;">
+ <data-hola :activeData="activeData"></data-hola>
+ </el-col>
+ </el-row>
+ </el-card>
+
</div>
-
</template>
<script>
+// import DataPlane from './components/data-plane.vue';
+
+import DataMap from './components/data-map.vue';
+import DataIcon from './components/data-icon.vue';
+import DataHola from './components/data-hola.vue';
+
export default {
name: 'DataView',
+ components: {
+ DataMap,
+ DataIcon,
+ DataHola,
+ // DataPlane
+ },
data() {
return {
dataList: [
@@ -49,8 +54,193 @@
{ icon: 'el-icon-edit', color: '#3da7f8' },
{ icon: 'el-icon-warning', color: '#ffbe40' },
{ icon: 'el-icon-error', color: '#fe640d' },
- ]
+ ],
+ totalList: [
+ {
+ "name": "铏瑰彛涔�",
+ "data1": 3,
+ "data2": 82,
+ "data3": 5,
+ "data4": 95,
+ "data5": 50
+ },
+ {
+ "name": "鐜夊爞闀�",
+ "data1": 1,
+ "data2": 94,
+ "data3": 38,
+ "data4": 60,
+ "data5": 87
+ },
+ {
+ "name": "宕囦箟闀�",
+ "data1": 15,
+ "data2": 57,
+ "data3": 81,
+ "data4": 77,
+ "data5": 85
+ },
+ {
+ "name": "榫欐睜闀�",
+ "data1": 8,
+ "data2": 7,
+ "data3": 60,
+ "data4": 77,
+ "data5": 43
+ },
+ {
+ "name": "涓叴闀�",
+ "data1": 40,
+ "data2": 75,
+ "data3": 50,
+ "data4": 69,
+ "data5": 79
+ },
+ {
+ "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}
}
+ },
+ methods: {
+ filterData(name) {
+ if (name) {
+ this.activeData = this.totalList.find(item => item.name === name);
+ } else {
+ this.countTotal();
+ }
+ },
+ countTotal() {
+ let data = {};
+ this.totalList.forEach((item) => {
+ Object.keys(item).forEach((key) => {
+ data[key] = data[key] ? data[key] + item[key] : item[key];
+ });
+ });
+ data.name = '鑷础甯�';
+ this.activeData = data;
+ }
+ },
+ created() {
+ this.countTotal();
}
}
</script>
@@ -59,6 +249,7 @@
.data-container {
margin-bottom: 20px;
}
+
.title {
text-align: left;
}
@@ -71,33 +262,13 @@
margin-bottom: 10px;
}
-.icon-container {
- display: flex;
- justify-content: center;
- align-items: center;
- border-radius: 8px;
+.map-wrapper {
+ // background-color: rgb(48, 65, 86);
- .icon-font {
- font-size: 30px;
- color: #fff;
- }
}
-.data-info {
- display: flex;
- height: 100%;
- flex-direction: column;
- justify-content: center;
- text-align: left;
-
- .data-num {
- font-size: 32px;
- }
-
- .data-lable {
- font-size: 16px;
- text-indent: 3px;
- }
+.data-plane {
+ aspect-ratio: 6/2;
}
@media screen and (min-width: 1200px) {
--
Gitblit v1.8.0