大屏的基本布局，告警数据模块的数据处理

src/views/chart/boxBoardBody.vue

@@ -26,20 +26,22 @@ export default {
   position: relative;
   width: 100%;
   height: 100%;
-  padding: 0 0 20px 0;
+  /* padding: 0 0 20px 0; */
+  background-image: url("../../assets/image/kuang.png");
+  background-size: 100% 100%;
 }
 .body {
   position: relative;
   width: 99%;
   height: 100%;
+  padding-top: 50px;
   text-align: center;
   vertical-align: middle;
   line-height: 100%;
-  background-color: rgba(7, 26, 72, 0.2);
-  border: 0px solid rgba(70, 233, 255, 1);
-  border-radius: 3px 3px 3px 3px;
-  -webkit-box-shadow: #666 0px 0px 10px;
-  -moz-box-shadow: #666 0px 0px 10px;
+  /* background-color: rgba(7, 26, 72, 0.2); */
+  
+  /* border: 0px solid rgba(70, 233, 255, 1); */
+  /* border-radius: 3px 3px 3px 3px; */
   /* box-shadow: #666 0px 0px 10px; */
   pointer-events: auto;
   z-index: 10100;
@@ -47,7 +49,9 @@ export default {
 }
 .BoxBoardTit {
   position: absolute;
-  left: 50px;
-  top: -10px;
+  /* left: 50px;
+  top: -10px; */
+  left: 32px;
+  top: 30px;
 }
 </style>

src/views/chart/boxBoardTit.vue

@@ -18,20 +18,21 @@ export default {
 
 <style scoped>
 .boxBoardTit {
-  font-size: 12px;
+  text-align: left;
+  font-size: 14px;
   width: 70px;
   height: 20px;
   line-height: 20px;
-  background-color: transparent;
-  color: rgba(70, 233, 255, 1);
+  /* background-color: transparent; */
+  /* color: rgba(70, 233, 255, 1); */
+  color: #85d8ff;
   font-weight: bold;
-  border: 0.5px solid rgba(70, 233, 255, 1);
-  border-radius: 10px 1px 10px 1px;
-  text-align: center;
+  /* border: 0.5px solid rgba(70, 233, 255, 1); */
+  /* border-radius: 10px 1px 10px 1px; */
   vertical-align: middle;
   z-index: 10100;
-  -webkit-box-shadow: #666 0px 0px 10px;
-  -moz-box-shadow: #666 0px 0px 10px;
-  box-shadow: #666 0px 0px 10px;
+  /* -webkit-box-shadow: #666 0px 0px 10px; */
+  /* -moz-box-shadow: #666 0px 0px 10px; */
+  /* box-shadow: #666 0px 0px 10px; */
 }
 </style>

src/views/chart/components/leftTop.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="content-box">
+    <div><span>电池总数</span><span>748</span></div>
+    <div><span>电池白名单数</span><span>334</span></div>
+  </div>
+</template>
+<script>
+export default {};
+</script>
+<style lang="scss" scoped>
+.content-box {
+  // padding: 10px;
+  padding: 10px 30px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  height: calc(100% - 20px);
+  div{
+    // border: 1px solid #f00;
+    // box-shadow: 0px 0px 10px 2px rgb(60,172,238) inset;
+    background-image: url("../../../assets/image/ltbg.png");
+    background-size: 100% 100%;
+    padding: 10px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    >span:nth-child(2){
+      font-weight:700;
+      font-size: 24px;
+      color: #ff4c4c;
+    }
+  }
+  >div:nth-child(2) span:nth-child(2){
+    color: #35ffff;
+  }
+}
+</style>