安全质量大屏

src/module/databoard/databoard/safe-quality.vue

@@ -2,7 +2,7 @@
   <div class="main">
     <div class="full_page">
       <!-- 左-->
-      <div class="trade_left">
+      <div class="trade_left" style="width: 18%">
       <div style="height: 37%;" >
         <display-board  style="display: flex; justify-content: space-between; height: 98%;"  title="安全">
           <winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="safe_list" :rows="arSafeList"/>
@@ -15,24 +15,23 @@
       </div>
         <div style="height: 26%;" >
           <display-board  style="display: flex; justify-content: space-between; height: 98%;"  title="人员情况表">
-            <div class="bar">
-              <div ref="bar"></div>
+            <div >
+              <div style="height: 100px;width: 200px" ref="bar"></div>
             </div>
           </display-board>
         </div>
       </div>
       <!--中-->
-      <display-board class="trade_middle" >
-        <div class="trade_middle" style="border: none;box-shadow: none;">
-          <div style="display: flex; justify-content: space-between; height: 80%;">
+      <div class="trade_middle" style="border: none;box-shadow: none;width: 54%;padding-left: 0.5rem">
+        <display-board  style="height: 76%">
 
-          </div>
-          <div style="display: flex; justify-content: space-between; height: 20%;">
-          </div>
+        </display-board>
+        <div style="display: flex; justify-content: space-between; height: 20%;">
         </div>
-      </display-board>
+      </div>
+
       <!-- 右-->
-      <div class="trade_right">
+      <div class="trade_right" style="width: 26%;;padding-left: 0.5rem">
         <div style="height: 33%;" >
           <display-board  style="display: flex; justify-content: space-between; height: 98%;"  title="汽运">
 
@@ -55,16 +54,21 @@
 <script>
 import DisplayBoard from "../components/container/display-board.vue";
 import WinnersList from "../components/card/winners-list.vue";
-import TitleContentMark from "../components/layout/title-content-mark.vue";
+import * as echarts from "echarts";
 export default {
   name: "SafeQuality",
   components: {
-    TitleContentMark,
     DisplayBoard,
     WinnersList
   },
   data() {
-      return {}
+      return {
+        arSafeList:[{'title':"aaaaaaaaaaaaaaaaaaa"},{'title':"aaaaaaaaaaaaaaaaaaa"},{'title':"aaaaaaaaaaaaaaaaaaa"},{'title':"aaaaaaaaaaaaaaaaaaa"},{'title':"aaaaaaaaaaaaaaaaaaa"}],
+        arQualityList:[{'title':"bbbbbbbbbbbbbbb"},{'title':"bbbbbbbbbbbbbbb"},{'title':"bbbbbbbbbbbbbbb"},{'title':"aaaaaaaaaaaaaaaaaaa"},{'title':"aaaaaaaaaaaaaaaaaaa"}],
+        people_options:{
+
+        }
+      }
   },
   methods: {
 
@@ -86,6 +90,12 @@ export default {
     }
   },
   mounted() {
+    setTimeout(() => {
+
+      let barDom = this.$refs.bar;
+      this.bar = echarts.init(barDom);
+
+    }, 500);
     this.refreshData();
   },
   beforeDestroy() {
@@ -107,8 +117,4 @@ export default {
 </script>
 
 <style scoped>
-#ar_company_list:hover {
-  background-color: #19EBFF10;
-  transform: scale(101%);
-}
 </style>