From 4eeaec1eddd5ef2be4b79423154fa2dce81d5566 Mon Sep 17 00:00:00 2001
From: 黄何裕 <1053952480@qq.com>
Date: 星期五, 26 七月 2024 15:28:09 +0800
Subject: [PATCH] 大屏重构

---
 src/views/screen/components/screen-data/index.vue |  111 +++++++++++++++++++++++++++++++------------------------
 1 files changed, 63 insertions(+), 48 deletions(-)

diff --git a/src/views/screen/components/screen-data/index.vue b/src/views/screen/components/screen-data/index.vue
index 86a6679..45dd740 100644
--- a/src/views/screen/components/screen-data/index.vue
+++ b/src/views/screen/components/screen-data/index.vue
@@ -1,37 +1,48 @@
 <template>
   <div class="data-container">
-    <wrapper-title :title="'宸ュ崟鏁版嵁'" :path="'/work-order-center/maintenance/work-order/work-order'"></wrapper-title>
+    <!-- <wrapper-title
+      :title="'宸ュ崟鏁版嵁'"
+      :path="'/work-order-center/maintenance/work-order/work-order'"
+    ></wrapper-title> -->
 
     <div class="data-content">
       <div class="data-panel">
         <div class="panel-title">
           <div class="icon">
-            <img src="@/assets/icons/arrow.png" alt="">
+            <img src="@/assets/icons/arrow.png" alt="" />
           </div>
-          <div class="title">
-            鏁翠綋宸ュ崟鏁�
-          </div>
+          <div class="title">鏁翠綋宸ュ崟鏁�</div>
         </div>
         <div class="panel-container">
           <div class="panel-item">
-            <data-hola :holaTitle="`宸ュ崟鎬绘暟`" :centerValue="3000" :holaColor="`#4ea8ff`"></data-hola>
+            <data-hola
+              :holaTitle="`宸ュ崟鎬绘暟`"
+              :centerValue="3000"
+              :holaColor="`#4ea8ff`"
+            ></data-hola>
           </div>
           <div class="panel-item">
-            <data-hola :holaTitle="`宸插鐞嗗伐鍗曟暟`" :centerValue="1600" :holaColor="`#5dec24`"></data-hola>
+            <data-hola
+              :holaTitle="`宸插鐞嗗伐鍗曟暟`"
+              :centerValue="1600"
+              :holaColor="`#5dec24`"
+            ></data-hola>
           </div>
           <div class="panel-item">
-            <data-hola :holaTitle="`鏈鐞嗗伐鍗曟暟`" :centerValue="200" :holaColor="`#dfc639`"></data-hola>
+            <data-hola
+              :holaTitle="`鏈鐞嗗伐鍗曟暟`"
+              :centerValue="200"
+              :holaColor="`#dfc639`"
+            ></data-hola>
           </div>
         </div>
       </div>
       <div class="data-panel">
         <div class="panel-title">
           <div class="icon">
-            <img src="@/assets/icons/arrow.png" alt="">
+            <img src="@/assets/icons/arrow.png" alt="" />
           </div>
-          <div class="title">
-            鍒嗗尯宸ュ崟鏁�
-          </div>
+          <div class="title">鍒嗗尯宸ュ崟鏁�</div>
         </div>
         <div class="echart-container">
           <div id="barChart" ref="barChart"></div>
@@ -42,83 +53,90 @@
 </template>
 
 <script>
-import * as echarts from 'echarts';
-import WrapperTitle from '../wrapper-title/index';
-import DataHola from './components/data-hola';
+import * as echarts from "echarts";
+import WrapperTitle from "../wrapper-title/index";
+import DataHola from "./components/data-hola";
 let chart = null;
 export default {
-  name: 'ScreenData',
+  name: "ScreenData",
   components: {
     WrapperTitle,
-    DataHola
+    DataHola,
   },
   data() {
     return {
       dataList: {
-        name: ['瀵岄『鍘�', '鑽ｅ幙', '楂樻柊鍖�', '鑷祦浜曞尯', '璐′簳鍖�', '澶у畨鍖�', '娌挎哗鍖�'],
+        name: [
+          "瀵岄『鍘�",
+          "鑽ｅ幙",
+          "楂樻柊鍖�",
+          "鑷祦浜曞尯",
+          "璐′簳鍖�",
+          "澶у畨鍖�",
+          "娌挎哗鍖�",
+        ],
         data1: [210, 310, 40, 102, 111, 201, 123],
         data2: [20, 30, 10, 10, 11, 21, 5],
       },
-    }
+    };
   },
   methods: {
     initEchart() {
       const option = {
         grid: {
-          top: '10%',
+          top: "10%",
           right: 0,
-          bottom: '17%',
+          bottom: "17%",
         },
         legend: {
           right: 0,
           textStyle: {
-            color: '#447ED6'
-          }
+            color: "#fff",
+          },
         },
         tooltip: {},
         xAxis: {
-          type: 'category',
+          type: "category",
           axisLabel: {
-            color: '#447ED6',
-            rotate: 45
+            color: "#fff",
+            rotate: 45,
           },
-          data: this.dataList.name
+          data: this.dataList.name,
         },
         yAxis: {
           axisLabel: {
-            color: '#4D76B0',
+            color: "#fff",
           },
         },
         series: [
           {
-            type: 'bar',
-            name: '宸插鐞嗗伐鍗曟暟',
-            stack: 'total',
+            type: "bar",
+            name: "宸插鐞嗗伐鍗曟暟",
+            stack: "total",
             itemStyle: {
-              color: '#4ea8ff'
+              color: "#4ea8ff",
             },
-            data: this.dataList.data1
+            data: this.dataList.data1,
           },
           {
-            type: 'bar',
-            name: '鏈鐞嗗伐鍗曟暟',
-            stack: 'total',
+            type: "bar",
+            name: "鏈鐞嗗伐鍗曟暟",
+            stack: "total",
             itemStyle: {
-              color: '#dfc639'
+              color: "#dfc639",
             },
-            data: this.dataList.data2
+            data: this.dataList.data2,
           },
-        ]
-      }
+        ],
+      };
       chart.setOption(option, true);
-
-    }
+    },
   },
   mounted() {
     chart = echarts.init(this.$refs.barChart);
     this.initEchart();
-  }
-}
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -130,10 +148,7 @@
 
   .data-content {
     flex: 1;
-    background: rgba(67, 102, 155, 0.3);
-    border: 1px solid rgba(47, 91, 157, 0.8);
     padding: 10px;
-    box-sizing: border-box;
   }
 }
 
@@ -174,4 +189,4 @@
     height: 110px;
   }
 }
-</style>
\ No newline at end of file
+</style>

--
Gitblit v1.8.0