From b0bfdbe89eda26315b836042f63ef699a00e7819 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期三, 20 三月 2024 09:55:10 +0800
Subject: [PATCH] Merge branch 'master' of http://42.193.1.25:9521/r/zgyw-ui

---
 src/views/system/data-manage/index.vue          |  119 ++++++++++++++---------------
 src/views/system/vehicle-data-monitor/index.vue |   87 ++++++++++++++-------
 2 files changed, 118 insertions(+), 88 deletions(-)

diff --git a/src/views/system/data-manage/index.vue b/src/views/system/data-manage/index.vue
index 43b150b..eef8562 100644
--- a/src/views/system/data-manage/index.vue
+++ b/src/views/system/data-manage/index.vue
@@ -1,80 +1,79 @@
 <template>
   <div>
     <div class="container">
-        <el-row type="flex" justify="center">
-            <el-col :span="24">
-                <h3 style="color: rgb(104,104,103);padding-top: 20px;padding-bottom: 20px;">浜鸿劯鏁版嵁寮傚父妫�娴�</h3>
-            </el-col>
-        </el-row>
+      <el-row type="flex" justify="center">
+        <el-col :span="24">
+          <h3 style="color: rgb(104,104,103);padding-top: 20px;padding-bottom: 20px;">浜鸿劯鏁版嵁寮傚父妫�娴�</h3>
+        </el-col>
+      </el-row>
 
-        <el-row type="flex" justify="center">
-            <el-col :span="6" v-for="(item, index) in faceData" :key="index">
-                <el-link @click="handleDetail(item)">
-                    <el-card style="width:150px;height: 150px;text-align: center;">
-                        <i style="font-size: 40px;padding: 15px;" :class="item.icon"></i>
-                        <div>{{ item.name }}</div>
-                    </el-card>
-                </el-link>
-            </el-col>
-        </el-row>
+      <el-row type="flex" justify="center">
+        <el-col :span="6" v-for="(item, index) in faceData" :key="index">
+          <el-link @click="handleDetail(item)">
+            <el-card style="width:150px;height: 150px;text-align: center;">
+              <i style="font-size: 40px;padding: 15px;" :class="item.icon"></i>
+              <div>{{ item.name }}</div>
+            </el-card>
+          </el-link>
+        </el-col>
+      </el-row>
     </div>
 
-  <div class="container">
-    <el-row type="flex" justify="center">
-      <el-col :span="24">
-        <h3 style="color: rgb(104,104,103);padding-top: 20px;padding-bottom: 20px;">杞︿咯鏁版嵁寮傚父妫�娴�</h3>
-      </el-col>
-    </el-row>
+    <div class="container">
+      <el-row type="flex" justify="center">
+        <el-col :span="24">
+          <h3 style="color: rgb(104,104,103);padding-top: 20px;padding-bottom: 20px;">杞︿咯鏁版嵁寮傚父妫�娴�</h3>
+        </el-col>
+      </el-row>
 
-    <el-row type="flex" >
-      <el-col :span="6" v-for="(item, index) in carData" :key="index">
-        <el-link @click="handleDetail(item)">
-          <el-card style="width:150px;height: 150px;text-align: center;">
-            <i style="font-size: 40px;padding: 15px;" :class="item.icon"></i>
-            <div>{{ item.name }}</div>
-          </el-card>
-        </el-link>
-      </el-col>
-    </el-row>
-  </div>
+      <el-row type="flex">
+        <el-col :span="6" v-for="(item, index) in carData" :key="index">
+          <el-link @click="handleDetail(item)">
+            <el-card style="width:150px;height: 150px;text-align: center;">
+              <i style="font-size: 40px;padding: 15px;" :class="item.icon"></i>
+              <div>{{ item.name }}</div>
+            </el-card>
+          </el-link>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-    data() {
-        return {
-            faceData: [
-                { name: '浜鸿劯璇嗗埆鏃堕挓鍑嗙‘鎬�', icon: 'el-icon-alarm-clock', description: '鎻忚堪淇℃伅', routerUrl: '/face/index' },
-                { name: '浜鸿劯鎶撴媿鏁版嵁鐩戞祴', icon: 'el-icon-user', description: '鎻忚堪淇℃伅', routerUrl: '/face/faceClock' },
-                { name: '浜鸿劯鏁版嵁瓒嬪娍鍒嗘瀽', icon: 'el-icon-data-line', description: '鎻忚堪淇℃伅', routerUrl: '/face/faceClock' },
-                { name: '浜鸿劯鎶撴媿璁惧娲昏穬鎬�', icon: 'el-icon-timer', description: '鎻忚堪淇℃伅', routerUrl: '/face/faceClock' },
-                { name: '浜鸿劯鎶撴媿涓婁紶鍙婃椂鎬�', icon: 'el-icon-money', description: '鎻忚堪淇℃伅', routerUrl: '/face/faceClock' },
-                { name: '浜鸿劯鎶撴媿澶у浘鍙敤鎬�', icon: 'el-icon-data-analysis', description: '鎻忚堪淇℃伅', routerUrl: '/face/faceClock' },
-            ],
-          carData: [
-            { name: '鍗″彛杩囪溅鏁版嵁涓�鑷存��', icon: 'el-icon-alarm-clock', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' },
-
-          ]
-        }
-    },
-    methods: {
-        handleDetail(item) {
-            this.$router.push({
-                path: item.routerUrl,
-                params: {
-                    id: item.id
-                }
-            })
-        }
+  data() {
+    return {
+      faceData: [
+        { name: '浜鸿劯璇嗗埆鏃堕挓鍑嗙‘鎬�', icon: 'el-icon-alarm-clock', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' },
+        { name: '浜鸿劯鎶撴媿鏁版嵁鐩戞祴', icon: 'el-icon-user', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' },
+        { name: '浜鸿劯鏁版嵁瓒嬪娍鍒嗘瀽', icon: 'el-icon-data-line', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' },
+        { name: '浜鸿劯鎶撴媿璁惧娲昏穬鎬�', icon: 'el-icon-timer', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' },
+        { name: '浜鸿劯鎶撴媿涓婁紶鍙婃椂鎬�', icon: 'el-icon-money', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' },
+        { name: '浜鸿劯鎶撴媿澶у浘鍙敤鎬�', icon: 'el-icon-data-analysis', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' },
+      ],
+      carData: [
+        { name: '鍗″彛杩囪溅鏁版嵁涓�鑷存��', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }
+      ]
     }
+  },
+  methods: {
+    handleDetail(item) {
+      this.$router.push({
+        path: item.routerUrl,
+        params: {
+          id: item.id
+        }
+      })
+    }
+  }
 }
 </script>
 
 <style scoped>
 .container {
-    margin-left: 100px;
-    margin-right: 100px;
-    margin-top: 10px;
+  margin-left: 100px;
+  margin-right: 100px;
+  margin-top: 10px;
 }
 </style>
diff --git a/src/views/system/vehicle-data-monitor/index.vue b/src/views/system/vehicle-data-monitor/index.vue
index 76ce1d1..44cac60 100644
--- a/src/views/system/vehicle-data-monitor/index.vue
+++ b/src/views/system/vehicle-data-monitor/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <div class="top">
+    <!-- <div class="top">
       <el-row type="flex" justify="space-between" style="width: 60%;">
         <el-col :span="6">
           <el-card class="card">
@@ -37,7 +37,43 @@
         </el-col>
       </el-row>
 
-    </div>
+    </div> -->
+
+
+    <el-card class="box-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="background-color: #5599F7;font-size: 50px;color: #FFF;">
+            <i class="el-icon-wind-power"></i>
+          </div>
+        </el-col>
+        <el-col :xl="14" :lg="14" :md="12" :sm="14" :xs="16">
+          <div class="dashboard">
+            <div class="dashboard-item">
+              <h3 style="color: #5C9BF8">{{ totalKiosks }}</h3>
+              <p>鍗″彛鎬绘暟</p>
+            </div>
+            <div class="dashboard-item">
+              <h3>{{ uniqueKiosks }}</h3>
+              <p>涓嶅敮涓�鍗″彛鏁�</p>
+            </div>
+            <div class="dashboard-item">
+              <div style="width: 1px;height: 55px;border: 1px solid #D7EBFA;"></div>
+            </div>
+            <div class="dashboard-item">
+              <h3 style="color: #5C9BF8">{{ totalCarData }}</h3>
+              <p>杩囪溅鏁版嵁鎬婚噺</p>
+            </div>
+            <div class="dashboard-item">
+              <h3>{{ uniqueCarData }}</h3>
+              <p>涓嶅敮涓�鏁版嵁閲�</p>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </el-card>
+
+
 
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="鍗″彛缂栧彿" prop="bayonetNumber">
@@ -276,41 +312,36 @@
 };
 </script>
 <style scoped>
-.top {
-  height: 150px;
+.box-card {
+  background-color: #F5F9FE;
+  width: 100%;
   margin-bottom: 20px;
-  background-color: #F2F9FF;
-  border: 1px solid #77befd;
+  height: 120px
 }
 
-.container {
-  max-width: 1000px;
-  margin: auto;
+.icon-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 20px;
+  width: 20%;
+  height: 80px;
+  margin-left: 5%;
 }
 
-.number {
-  font-size: 36px;
-  font-weight: bold;
-  color: #00A5FE;
+.el-icon-refresh-left {
+  font-size: 50px;
+  color: #FFFFFF;
 }
 
-.numberTwo {
-  font-size: 36px;
-  font-weight: bold;
-  color: #505051;
+.dashboard {
+  display: flex;
+  gap: 10%;
+  align-items: center;
+  margin-left: -50%;
 }
 
-.card {
-  width: 100px;
-  height: 100px;
+.dashboard-item {
   text-align: center;
-  background-color: #00A5FE;
-  color: aliceblue;
-  border-radius: 10%;
-  margin: 25px;
-}
-
-.mod {
-  margin-top: 40px;
 }
 </style>
\ No newline at end of file

--
Gitblit v1.8.0