From 08a78d7c2dc453ccd510a176bf95b62c3da30c0c Mon Sep 17 00:00:00 2001
From: 黄何裕 <1053952480@qq.com>
Date: 星期三, 31 七月 2024 13:52:02 +0800
Subject: [PATCH] .

---
 src/views/screen/components/screen-examine/components/examine-chart.vue |  159 ++++++++++++++++++++++++++++++++++-----
 src/views/screen/newPage/index.vue                                      |   35 ++++++--
 2 files changed, 163 insertions(+), 31 deletions(-)

diff --git a/src/views/screen/components/screen-examine/components/examine-chart.vue b/src/views/screen/components/screen-examine/components/examine-chart.vue
index f4059f4..2c1dfde 100644
--- a/src/views/screen/components/screen-examine/components/examine-chart.vue
+++ b/src/views/screen/components/screen-examine/components/examine-chart.vue
@@ -1,44 +1,157 @@
 <template>
   <div class="chart-container">
     <div class="rank-chart">
-      <div class="hola-item" v-for="item in dataList" :key="item.id">
-        <examine-hola :startColor="'#124ae4'" :endColor="'#99b3fd'" :centerValue="item.value" :bottomTitle="item.name"
-          :routerPath="item.routerUrl"></examine-hola>
+      <div
+        class="hola-item"
+        v-for="item in dataType == 'car' ? dataListA : dataList"
+        :key="item.id"
+      >
+        <examine-hola
+          :startColor="'#124ae4'"
+          :endColor="'#99b3fd'"
+          :centerValue="item.value"
+          :bottomTitle="item.name"
+          :routerPath="item.routerUrl"
+        ></examine-hola>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import ExamineHola from './examine-hola.vue';
+import ExamineHola from "./examine-hola.vue";
 let barChart = null;
 export default {
-  name: 'ExamineChart',
+  name: "ExamineChart",
   components: {
-    ExamineHola
+    ExamineHola,
+  },
+  props: {
+    dataType: {
+      type: String,
+      default: "",
+    },
   },
   data() {
     return {
       dataList: [
-        { id: 1, name: '骞冲彴鍦ㄧ嚎鐜�', value: 60, routerUrl: '/car/vehicle-data-monitor/index' },
-        { id: 2, name: '涓�鏈轰竴妗e悎鏍肩巼', value: 20, routerUrl: '/car/vehicle-data-monitor/index' },
-        { id: 3, name: '妗f鑰冩牳姣�', value: 60, routerUrl: '/car/vehicle-data-monitor/index' },
-        { id: 4, name: '鐐逛綅鍦ㄧ嚎鐜�', value: 40, routerUrl: '/car/vehicle-data-monitor/index' },
-        { id: 5, name: '褰曞儚鍙敤鐜�', value: 80, routerUrl: '/car/vehicle-data-monitor/index' },
-        { id: 6, name: '閲嶇偣鐐逛綅褰曞儚鍙敤鐜�', value: 20, routerUrl: '/car/vehicle-data-monitor/index' },
-        { id: 7, name: '閲嶇偣鐐逛綅褰曞儚鍙敤鐜�', value: 20, routerUrl: '/car/vehicle-data-monitor/index' },
-        { id: 8, name: '閲嶇偣鐐逛綅褰曞儚鍙敤鐜�', value: 20, routerUrl: '/car/vehicle-data-monitor/index' },
-      ]
-    }
+        {
+          id: 1,
+          name: "骞冲彴鍦ㄧ嚎鐜�",
+          value: 60,
+          routerUrl: "/car/vehicle-data-monitor/index",
+        },
+        {
+          id: 2,
+          name: "涓�鏈轰竴妗e悎鏍肩巼",
+          value: 20,
+          routerUrl: "/car/vehicle-data-monitor/index",
+        },
+        {
+          id: 3,
+          name: "妗f鑰冩牳姣�",
+          value: 60,
+          routerUrl: "/car/vehicle-data-monitor/index",
+        },
+        {
+          id: 4,
+          name: "鐐逛綅鍦ㄧ嚎鐜�",
+          value: 40,
+          routerUrl: "/car/vehicle-data-monitor/index",
+        },
+        {
+          id: 5,
+          name: "褰曞儚鍙敤鐜�",
+          value: 80,
+          routerUrl: "/car/vehicle-data-monitor/index",
+        },
+        {
+          id: 6,
+          name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
+          value: 20,
+          routerUrl: "/car/vehicle-data-monitor/index",
+        },
+        {
+          id: 7,
+          name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
+          value: 20,
+          routerUrl: "/car/vehicle-data-monitor/index",
+        },
+        {
+          id: 8,
+          name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
+          value: 20,
+          routerUrl: "/car/vehicle-data-monitor/index",
+        },
+      ],
+      dataListA: [
+        {
+          id: 1,
+          name: "骞冲彴鍦ㄧ嚎鐜�",
+          value: 60,
+          routerUrl: "/car/vehicle-data-monitor/index",
+        },
+        {
+          id: 2,
+          name: "涓�鏈轰竴妗e悎鏍肩巼",
+          value: 20,
+          routerUrl: "/car/vehicle-data-monitor/index",
+        },
+        {
+          id: 3,
+          name: "妗f鑰冩牳姣�",
+          value: 60,
+          routerUrl: "/car/vehicle-data-monitor/index",
+        },
+        {
+          id: 4,
+          name: "鐐逛綅鍦ㄧ嚎鐜�",
+          value: 40,
+          routerUrl: "/car/vehicle-data-monitor/index",
+        },
+        {
+          id: 5,
+          name: "褰曞儚鍙敤鐜�",
+          value: 80,
+          routerUrl: "/car/vehicle-data-monitor/index",
+        },
+        {
+          id: 6,
+          name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
+          value: 20,
+          routerUrl: "/car/vehicle-data-monitor/index",
+        },
+        {
+          id: 7,
+          name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
+          value: 20,
+          routerUrl: "/car/vehicle-data-monitor/index",
+        },
+        {
+          id: 8,
+          name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
+          value: 20,
+          routerUrl: "/car/vehicle-data-monitor/index",
+        },
+        {
+          id: 9,
+          name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
+          value: 20,
+          routerUrl: "/car/vehicle-data-monitor/index",
+        },
+        {
+          id: 10,
+          name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
+          value: 20,
+          routerUrl: "/car/vehicle-data-monitor/index",
+        },
+      ],
+    };
   },
 
-  methods: {
-
-
-  },
-  mounted() {
-  }
-}
+  methods: {},
+  mounted() {},
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/screen/newPage/index.vue b/src/views/screen/newPage/index.vue
index 3c6aba4..a2a83e9 100644
--- a/src/views/screen/newPage/index.vue
+++ b/src/views/screen/newPage/index.vue
@@ -46,14 +46,14 @@
                 <div class="data-lable">璁惧鎬绘暟</div>
                 <div class="data-num type1">
                   <span v-roll>{{ 1123 }}</span
-                  ><i class="el-icon-bottom"></i>
+                  ><i class="el-icon-top"></i>
                 </div>
               </div>
               <div class="data-info">
                 <div class="data-lable">璁惧姝e父鏁�</div>
                 <div class="data-num type2">
                   <span v-roll>{{ 1123 }}</span
-                  ><i class="el-icon-bottom"></i>
+                  ><i class="el-icon-top"></i>
                 </div>
               </div>
               <div class="data-info">
@@ -139,15 +139,24 @@
         <div class="card_header">
           <div class="title">浜鸿劯鑰冩牳鏁版嵁</div>
           <div style="width: 600px; margin-left: -20px">
-            <ExamineChart class="wrapper-item"></ExamineChart>
+            <ExamineChart class="wrapper-item" dataType="face"></ExamineChart>
           </div>
         </div>
       </div>
       <div class="footer_card">
         <div class="card_header">
-          <div class="title">杞﹁締鑰冩牳鏁版嵁</div>
-          <div style="width: 600px; margin-left: -20px">
-            <ExamineChart class="wrapper-item"></ExamineChart>
+          <div class="titleCar">杞﹁締鑰冩牳鏁版嵁</div>
+        </div>
+        <div
+          style="
+            overflow: hidden;
+            overflow-x: auto;
+            margin-top: -9px;
+            height: 90%;
+          "
+        >
+          <div style="width: 750px">
+            <ExamineChart class="wrapper-item" dataType="car"></ExamineChart>
           </div>
         </div>
       </div>
@@ -155,7 +164,7 @@
         <div class="card_header">
           <div class="title">瑙嗛鑰冩牳鏁版嵁</div>
           <div style="width: 600px; margin-left: -20px">
-            <ExamineChart class="wrapper-item"></ExamineChart>
+            <ExamineChart class="wrapper-item" dataType="video"></ExamineChart>
           </div>
         </div>
       </div>
@@ -205,7 +214,9 @@
     returnPath() {
       this.$router.push("/index");
     },
-    handleClick() {},
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
   },
 };
 </script>
@@ -353,6 +364,14 @@
     margin: 5px 0;
     .card_header {
       height: 40px;
+      .titleCar {
+        margin-left: 20px;
+        padding-top: 5px;
+        color: #fff;
+        letter-spacing: 2px;
+        font-size: 20px;
+        font-style: italic;
+      }
     }
   }
 }

--
Gitblit v1.8.0