From c46d8df84b7eefe4cfeb433571112eb6be71a893 Mon Sep 17 00:00:00 2001 From: fuliqi <fuliqi@qq.com> Date: 星期三, 07 八月 2024 14:13:10 +0800 Subject: [PATCH] 点位去掉设备类型 --- src/views/system/data-manage/data-detail/index.vue | 111 +++++++++++++++++++++++++++---------------------------- 1 files changed, 55 insertions(+), 56 deletions(-) diff --git a/src/views/system/data-manage/data-detail/index.vue b/src/views/system/data-manage/data-detail/index.vue index 08d602a..a4783ca 100644 --- a/src/views/system/data-manage/data-detail/index.vue +++ b/src/views/system/data-manage/data-detail/index.vue @@ -1,48 +1,23 @@ <template> <div class="app-container"> <el-card class="box-card"> - <el-row type="flex" align="middle" justify="space-between"> - <el-col :span="2"> - <div class="icon-container"> - <i class="el-icon-wind-power"></i> - </div> - </el-col> - <el-col :span="2"> - <div> - <div class="dashboard-item"> - <h3 style="color: #5C9BF8">{{ totalKiosks }}</h3> - <p>鍗″彛鎬绘暟</p> + <el-row style="display: flex; flex-direction: row; align-items: center" justify="space-between"> + <div v-for="card in cardList" style="display: flex;flex-direction: row; margin-right: 50px"> + <div> + <div class="icon-container"> + <i :class="card.icon"></i> + </div> + </div> + <div v-for="data in card.dataList" class="dashboard-item"> + <div style="color: #5C9BF8;margin-bottom: 20px;font-size: 20px">{{ data.value }}</div> + <div>{{data.label}}</div> </div> </div> - </el-col> - <el-col :span="2"> - <div class="dashboard-item"> - <h3>{{ uniqueKiosks }}</h3> - <p>涓嶅敮涓�鍗″彛鏁�</p> - </div> - </el-col> - <el-col :span="1"> - <div class="dashboard-item"> - <div style="width: 1px;height: 55px;border: 1px solid #D7EBFA;margin: 20px;"></div> - </div> - </el-col> - <el-col :span="2"> - <div class="icon-container"> - <i class="el-icon-truck"></i> - </div> - </el-col> - <el-col :span="2"> - <div class="dashboard-item"> - <h3 style="color: #5C9BF8">{{ totalCarData }}</h3> - <p>杩囪溅鏁版嵁鎬婚噺</p> - </div> - </el-col> - <el-col :span="2"> - <div class="dashboard-item"> - <h3>{{ uniqueCarData }}</h3> - <p>涓嶅敮涓�鏁版嵁閲�</p> - </div> - </el-col> +<!-- <el-col :span="1">--> +<!-- <div class="dashboard-item">--> +<!-- <div style="width: 1px;height: 55px;border: 1px solid #D7EBFA;margin: 20px;"></div>--> +<!-- </div>--> +<!-- </el-col>--> <el-col :span="8"></el-col> </el-row> </el-card> @@ -56,8 +31,8 @@ <el-input v-model="queryParams.bayonetName" placeholder="璇疯緭鍏ュ崱鍙e悕绉�" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item> - <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">鎼滅储</el-button> - <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">閲嶇疆</el-button> + <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">鎼滅储</el-button> + <el-button icon="el-icon-refresh" size="small" @click="resetQuery">閲嶇疆</el-button> </el-form-item> </el-form> @@ -120,15 +95,15 @@ </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> - <el-button type="primary" @click="submitForm">纭� 瀹�</el-button> <el-button @click="cancel">鍙� 娑�</el-button> + <el-button type="primary" @click="submitForm">纭� 瀹�</el-button> </div> </el-dialog> </div> </template> <script> -import { listPlatform, getPlatform, delPlatform, addPlatform, updatePlatform } from "@/api/platform/vehicle-data-monitor"; +import { dataCenter } from "@/api/platform/data-center"; import { videoData, carData, faceData, equipment } from "./list"; import store from '@/store'; @@ -177,7 +152,8 @@ { required: true, message: "鍗″彛缂栧彿涓嶈兘涓虹┖", trigger: "blur" } ], }, - tableHead: [] + tableHead: [], + cardList: [] }; }, beforeRouteEnter(to, from, next) { @@ -185,17 +161,35 @@ next(); }, created() { - if (this.$route.query.type === '1') this.tableHead = videoData[this.$route.query.index].columns; - if (this.$route.query.type === '2') this.tableHead = carData[this.$route.query.index].columns; - if (this.$route.query.type === '3') this.tableHead = faceData[this.$route.query.index].columns; - if (this.$route.query.type === '4') this.tableHead = equipment[this.$route.query.index].columns; - this.getList(); + if (this.$route.query.type === '1') { + let data = videoData.table.filter(item => item.index === this.$route.query.index)[0] + this.tableHead = data.columns; + this.cardList = data.card; + console.log(data, "aaa") + console.log(this.cardList, "ddd") + }; + if (this.$route.query.type === '2') { + let data = carData.table.filter(item => item.index === this.$route.query.index)[0] + this.tableHead = data.columns; + this.cardList = data.card; + } + if (this.$route.query.type === '3') { + let data = faceData.table.filter(item => item.index === this.$route.query.index)[0] + this.tableHead = data.columns; + this.cardList = data.card; + } + if (this.$route.query.type === '4') { + let data = equipment.table.filter(item => item.index === this.$route.query.index)[0] + this.tableHead = data.columns; + this.cardList = data.card; + } + this.getList(this.$route.query.url); }, methods: { /** 鏌ヨ鍗″彛杩囪溅鏁版嵁涓�鑷存�у垪琛� */ - getList() { + getList(url) { this.loading = true; - listPlatform(this.queryParams).then(response => { + dataCenter(url, this.queryParams).then(response => { this.platformList = response.rows; this.total = response.total; this.loading = false; @@ -303,13 +297,14 @@ .icon-container { display: flex; + flex-direction: row; justify-content: center; align-items: center; - border-radius: 20px; + border-radius: 10px; width: 20%; height: 80px; margin-left: 5%; - background-color: #5599F7; + background-color: #1890FF; font-size: 50px; color: #FFF; width: 85px; @@ -321,6 +316,10 @@ } .dashboard-item { - text-align: center; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 150px; } -</style> \ No newline at end of file +</style> -- Gitblit v1.8.0