From 6660790baa07aad61d552e6af63a898af06afc62 Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期一, 02 十二月 2024 17:02:57 +0800
Subject: [PATCH] 地图样式
---
src/views/home/data-view/index.vue | 202 ++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 155 insertions(+), 47 deletions(-)
diff --git a/src/views/home/data-view/index.vue b/src/views/home/data-view/index.vue
index f92b236..01aa966 100644
--- a/src/views/home/data-view/index.vue
+++ b/src/views/home/data-view/index.vue
@@ -5,43 +5,65 @@
<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>
+ <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>
+ </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="6" :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: [
{ 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' },
@@ -49,8 +71,103 @@
{ 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
+ }
+ ],
+ 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: {
+ 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;
+ },
+
+ toScreen() {
+ this.$router.push({
+ path: '/screen'
+ })
+ }
+ },
+ created() {
+ this.countTotal();
}
}
</script>
@@ -59,6 +176,7 @@
.data-container {
margin-bottom: 20px;
}
+
.title {
text-align: left;
}
@@ -71,32 +189,22 @@
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 {
+.data-plane {
+ aspect-ratio: 6/2;
+}
+
+.select-container {
display: flex;
- height: 100%;
- flex-direction: column;
- justify-content: center;
- text-align: left;
-
- .data-num {
- font-size: 32px;
- }
-
- .data-lable {
+ align-items: center;
+ .select-label {
+ color: #666;
+ margin-right: 20px;
font-size: 16px;
- text-indent: 3px;
}
}
@@ -105,4 +213,4 @@
width: 20%;
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0