fix:设备管理看板

src/views/system/jbdHome/board/component/CarouselTabl.vue

@@ -1,6 +1,6 @@
 <template>
-  <div :class="$style.pieView">
-    <div style="height: 30px;line-height: 30px;text-align: left;padding-left: 10px;width: calc(100% - 10px) ;background-color: #06163f;opacity: 0.5;">停用/报废列表</div>   
+  <div style="width: 100%;height: 100%;">
+    <div class="title">停用/报废列表</div>   
     <div style="width:100%;display: inline-block;background-color: #06163f;">
       <dv-scroll-board :config="info" style="width:100%;height:320px" />
     </div>
@@ -23,7 +23,6 @@ export default {
 </script>
 <style lang="scss" module>
 .pieView{
-  display: flex;
   width: 100%;
 }
 </style>

src/views/system/jbdHome/board/component/bottomCard.vue

@@ -1,21 +1,10 @@
 <template>
     <div id="bottom-card">
         <div :class="$style.chart_box">
-            <!-- <div
-                v-for="(item, index) in cards"
-                :key="index"
-                :class="$style.item"
-            >
-                <div :id="item" style="width: 100%; height: 100%"></div>
-            </div> -->
             <div :class="$style.item">
                 <div id="trust"></div>
             </div>
             <dv-decoration-2 :reverse="true" :dur="4" style="width:5px;height:100%;" />
-            <!-- <div :class="$style.item">
-                <div id="sample"></div>
-            </div>
-            <dv-decoration-2 :reverse="true" :dur="6" style="width:5px;height:100%;" /> -->
             <div :class="$style.item">
                 <div id="month"></div>
             </div>
@@ -87,7 +76,7 @@
         width: 100%;
         height: 100%;
         .item {
-            width: 32.5%;
+            width: 24%;
             height: 100%;
             background-color: rgba(6, 30, 93, 0.5);
             > div {

src/views/system/jbdHome/board/component/equipmentBoardTopcard.vue

@@ -4,12 +4,10 @@
       <!-- <div class="title">设备信息情况</div> -->
       <div class="bar">
         <div v-for="(item, index) in topBarData" :key="index" class="item">
-          <!-- <div class="title">{{ item.title }}</div> -->
-          <div v-for="(v, i) in item.children" :key="i" class="box1">
-            <div class="label">{{ v.label }}</div>
-            <div class="count">
-              <dv-digital-flop :config="v.data" class="flop" v-if="v.unit !='元'" />
-              <dv-digital-flop :config="v.data" class="flops" v-else />
+          <div v-for="(v, i) in item.children" :key="i" class="box1" style="">
+            <div class="label" style="text-align: center; ">{{ v.label }}</div>
+            <div class="count" style="display: flex;justify-content: center;">
+              <div :style="{'color':1}">{{v.value}}{{ v.style.fill }}</div>
               <div class="unit">{{ v.unit }}</div>
             </div>
           </div>
@@ -20,6 +18,8 @@
   </div>
 </template>
 <script>
+import color from '@/store/modules/ibps/modules/color';
+
 export default {
   name: "topBar",
   props: {
@@ -76,7 +76,7 @@ export default {
             textAlign: "center",
             style: {
               fill: this.fontColor[this.getRandom(0, 11)],
-              fontWeight: "bold",
+              //  formatter
             },
           };
           i.unit = i.danwei;
@@ -88,67 +88,41 @@ export default {
   },
 };
 </script>
+
 <style lang="scss" scoped>
-.content {
-  height: 96%;
-  width: 96%;
-  margin-left: 30px;
-  padding: 10px;
-  min-height: 0px;
-  overflow: hidden;
+.content{
+  height: 82%;
+  width: 100%;
+  // background-color: rgba(6, 30, 93, 0.5);
+  // .title{
+  //   // width: 100%;
+  //   margin: 20px 2%;
+    
+  // }
 }
 .bar {
-  width: 100%;
   position: relative;
-  margin: 0 5px 11px;
+  margin: 20px 2%;
+  width: 96%;
   height: 150px;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border: none;
   background-color: rgba(6, 30, 93, 0.5);
-  .box1{
-    text-align: center;
-    font-size: 12px;
-    display: inline-block;
-      width: 33%;
-    .label {
-        text-align: center;
-        font-size: 14px;
-      }
-    .count{
-      display: flex;
-        align-items: center;
-        justify-content: center;
-        .flop {
-          width: 80px;
-          height: 40px;
-          font-size: 10px;
-        }
-        .flops {
-          width: 160px;
-          height: 40px;
-          font-size: 10px;
-        }
-        .unit {
-          margin-left: 10px;
-          box-sizing: border-box;
-        }
-    }
-    
-  }
   .item {
     width: 20%;
-    // height: 60%;
-    padding: 1px 15px;
+    // width: calc(100% / 13);
+    height: 60%;
+    padding: 6px 6px;
     border-left: 5px solid rgb(6, 30, 93);
     &:first-child {
-      width: 28%;
+      width: 34%;
       display: flex;
       justify-content: space-around;
       align-items: center;
+      box-sizing: border-box;
       .box1 {
-        width: 19%;
+          width: 20%;
       }
     }
     &:nth-child(2) {
@@ -156,8 +130,9 @@ export default {
       display: flex;
       justify-content: space-around;
       align-items: center;
+      box-sizing: border-box;
       .box1 {
-        width: 48%;
+        width: 50%;
       }
     }
     &:nth-child(3) {
@@ -165,8 +140,9 @@ export default {
       display: flex;
       justify-content: space-around;
       align-items: center;
+      box-sizing: border-box;
       .box1 {
-        width: 48%;
+        width: 50%;
       }
     }
     &:nth-child(4) {
@@ -174,15 +150,17 @@ export default {
       display: flex;
       justify-content: space-around;
       align-items: center;
+      box-sizing: border-box;
       .box1 {
-        width: 48%;
+        width: 50%;
       }
     }
     &:last-child {
-      width: 26%;
+      width: 25%;
       display: flex;
       justify-content: space-around;
       align-items: center;
+      box-sizing: border-box;
       .box1 {
         width: 33%;
       }
@@ -193,42 +171,43 @@ export default {
       font-weight: bold;
       margin-bottom: 20px;
     }
-    // .box {
-    //   display: inline-block;
-    //   width: 33%;
-    //   .label {
-    //     text-align: center;
-    //     font-size: 14px;
-    //   }
-    //   .count {
-    //     display: flex;
-    //     align-items: center;
-    //     justify-content: center;
-    //     .flop {
-    //       width: 80px;
-    //       height: 40px;
-    //       font-size: 10px;
-    //     }
-    //     .flops {
-    //       width: 160px;
-    //       height: 40px;
-    //       font-size: 10px;
-    //     }
-    //     .unit {
-    //       margin-left: 10px;
-    //       box-sizing: border-box;
-    //     }
-    //   }
-    // }
+    .box {
+      display: inline-block;
+      width: 33%;
+      .label {
+        text-align: center;
+        font-size: 14px;
+      }
+      .count {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .flop {
+          width: 60px;
+          height: 40px;
+          font-size: 18px;
+        }
+        .flops{
+          width: 180px;
+          height: 40px;
+          font-size: 10px;
+        }
+        .unit {
+          margin-left: 10px;
+          box-sizing: border-box;
+        }
+      }
+    }
   }
 }
 
 #top-bar {
-  height: 180px;
+  height: 90%;
+  width: 100%;
 }
 .dv-decoration-10 {
   width: 96%;
-  margin: -20px 40px 0;
-  height: 5px;
+  margin: 7px 2% 0;
+  height: 10%;
 }
 </style>

src/views/system/jbdHome/board/component/getPieView.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="pieView">
-    <div style="height: 30px;line-height: 30px;text-align: left;padding-left: 10px;">{{info.config.title||""}}</div>   
-    <div style="width:100%;height:320px;display: inline-block;">
-      <div :id="info.config.idSelector" style="width:100%;height:320px;"> </div>
+    <div style="height: 20%;line-height: 30px;text-align: left;padding-left: 10px;">{{info.config.title||""}}</div>   
+    <div style="width:100%;height:80%;display: inline-block; overflow: hidden;">
+      <div :id="info.config.idSelector" style="width:100%;height:95%;overflow: hidden;"> </div>
     </div>
   </div>
 </template>
@@ -30,28 +30,30 @@ export default {
   methods:{
     getMiddleLeft(){ 
       let chartDom = document.getElementById(this.info.config.idSelector);
-      const setEchartWH = {
-        //设置控制图表大小变量
-        width: 350,
-        height: 320,
-      };
-      var myChart = echarts.init(chartDom, null, setEchartWH);
+      // const setEchartWH = {
+      //   //设置控制图表大小变量
+      //   width: 350,
+      //   height: 320,
+      // };
+      var myChart = echarts.init(chartDom);
       var option;
       option = {
         title: {
-          subtext: '',
+          show: true,
           left: 'center',
-         
-          textStyle:{
-            color:"#fff"
-          }
+          textStyle: {
+            color: '#fff',
+            fontSize: 20,
+            fontWeight: '600'
+        },
         },
         color:this.info.color,
         tooltip: {
-          trigger: 'item',
-          formatter: '{b} : {c} %'
+          trigger: 'item'
         },
         legend: {
+          show: true,
+          z: 3,
           orient: 'vertical',
           left: 'right',
           textStyle:{
@@ -61,7 +63,7 @@ export default {
         series: [{
           type: 'pie',
           radius: '50%',
-          
+          center: ['50%', '50%'],
           data:this.info.data,
           emphasis: {
             itemStyle: {
@@ -69,10 +71,11 @@ export default {
               shadowOffsetX: 0,
               shadowColor: 'rgba(0, 0, 0, 0.5)'
             }
-          }
+          },
+          
         }]
       };
-      option && myChart.setOption(option);
+      myChart.setOption(option);
     },
 
   }
@@ -82,6 +85,8 @@ export default {
 .pieView{
   display: flex;
   width: 100%;
+  height: 100%;
+  overflow: hidden;
   background-color: rgba(6,30,93,.5);
 }
 </style>

src/views/system/jbdHome/board/equipmentBoard.vue

@@ -21,7 +21,7 @@
           <top-bar v-if="topBarData.length" :info="topBarData" />
         </div>
         <div class="middleCard" >
-          <div style="width:100%">
+          <div style="width:100%;height: 92%;">
           <div class="middleCardLeft" >
             <middleCard v-if="MiddleLeftPieViewList.data.length" :info="MiddleLeftPieViewList" ref="middleCardLeft"/>
           </div>
@@ -197,7 +197,7 @@ export default {
               danwei:'台'
             },
             {
-              label: '本月新增设备',
+              label: '新增设备',
               value: data[0].addEquipments,
               danwei:'台'
             },
@@ -222,12 +222,12 @@ export default {
           title: '',
           children: [
             {
-              label: '本月计划维护设备',
+              label: '计划维护设备',
               value: data[0].weiHuNoEquipments,
               danwei:'台'
             },
             {
-              label: '本月已维护设备',
+              label: '已维护设备',
               value: data[0].weiHuEquipments,
               danwei:'台'
             }
@@ -237,12 +237,12 @@ export default {
           title: '',
           children: [
             {
-              label: '本月计划检定/校准设备',
+              label: '计划检定/校准设备',
               value: data[0].testNoEquipments,
               danwei:'台'
             },
             {
-              label: '本月已检定/校准设备',
+              label: '已检定/校准设备',
               value: data[0].testEquipments,
               danwei:'台'
             }
@@ -252,7 +252,7 @@ export default {
           title: '',
           children: [
             {
-              label: '本月计划核查设备',
+              label: '计划核查设备',
               value: data[0].checkNoEquipments,
               danwei:'台'
             },
@@ -472,10 +472,12 @@ export default {
   .header {
     position: relative;
     width: 100%;
-    height: 100px;
+    height: 7%;
     display: flex;
     justify-content: space-between;
     flex-shrink: 0;
+    box-sizing: border-box;
+    overflow: hidden;
     .left,
     .right {
       width: 25%;
@@ -518,6 +520,19 @@ export default {
   }  
   .topCard{
     width: 100%;
+    height: 20%;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+ .bottomCard{
+  height: 37%;
+  overflow: hidden;
+  box-sizing: border-box;
+  }
+  .middleCard{
+    height:40%;
+    overflow: hidden;
+    box-sizing: border-box;
   }
   .middleCard,.bottomCard{
     width: 100%;
@@ -527,15 +542,21 @@ export default {
       display: inline-block;                                                        
     }
     .middleCardLeft{
-      width: 22%;
+      width: 25%;
+      height: 100%;
     }
     .middleCardCenter{
-      width: 22%;
+      width: 25%;
+      height: 100%;
     }
     .middleCardRight{
-      width: 48%;
+      width: 40%;
+      height: 100%;
     }
-    padding: 10px;
+    // .middleCardRight1{
+    //   width: 45%;
+    // }
+    padding: 2px;
   }
   .bottomCard{
     display: flex;
@@ -566,8 +587,8 @@ export default {
   }
 }
 .dv-decoration-10 {
-  width: 96%;
-  margin: 7px 2% 0;
+  width: 92%;
+  margin: 7px 0 0;
   height: 5px;
 }
 </style>