fix:设备管理看板

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

@@ -1,8 +1,8 @@
 <template>
-  <div style="width: 100%;height: 100%;">
-    <div class="title" style="vertical-align: top; height: 35px;font-size: 18px;">停用/报废列表</div>
-    <div style="width:100%;display: inline-block;background-color: #06163f;">
-      <dv-scroll-board :config="info" style="width:100%;height:320px" />
+  <div style="width: 100%;height: 100%;overflow: hidden;">
+    <div class="title" style="vertical-align: top; height: 10%;font-size: 16px;">停用/报废列表</div>
+    <div style="width:100%;height: 90%;display: inline-block;background-color: #06163f;">
+      <dv-scroll-board :config="info" style="width:100%;height:100%" />
     </div>
   </div>
 </template>

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

@@ -52,6 +52,9 @@ export default {
           trigger: 'item',
           formatter: '{d}%'
         },
+        label: {
+          formatter: '{b}\n({d}%)'
+        },
         legend: {
           show: true,
           z: 3,

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

@@ -1,8 +1,8 @@
 <template>
   <div class="pieView">
-    <div style="height: 30px;line-height: 30px;text-align: left;padding-left: 10px;width: 100%;">{{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: 10%;line-height: 30px;text-align: left;padding-left: 10px;width: 100%;">{{info.config.title}}</div>   
+    <div style="width:100%;height:90%;display: inline-block;overflow: hidden;box-sizing: border-box;">
+      <div :id="info.config.idSelector" style="width:100%;height:100%;"> </div>
     </div>
   </div>
 </template>
@@ -128,6 +128,8 @@ export default {
   display: flex;
   width: 100%;
   height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
   background-color: rgba(6,30,93,.5);
 }
 </style>

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

@@ -15,17 +15,17 @@
           <dv-border-box-8>返回</dv-border-box-8>
         </div>
       </div>
-      <dv-border-box-1>
+      <dv-border-box-1 style="height:88%;overflow: hidden;">
         <!-- 顶部数据 -->
         <div class="topCard">
           <top-bar v-if="topBarData.length" :info="topBarData" />
         </div>
         <div class="middleCard" >
-          <div style="width:100%;height: 92%;">
+          <div style="width:100%;height: 100%;box-sizing: border-box;overflow: hidden;">
           <div class="middleCardLeft" >
             <middleCard v-if="MiddleLeftPieViewList.data.length" :info="MiddleLeftPieViewList" ref="middleCardLeft"/>
           </div>
-          <dv-decoration-2 :reverse="true" style="width:5px;height:350px;margin:0 15px;" />
+          <dv-decoration-2 :reverse="true" style="width:5px;height: 100%;;margin:0 15px;" />
           <div class="middleCardCenter">
             <middleCard v-if="eBgRateData.data.length" :info="eBgRateData" ref="middleCardCenter"/>
           </div>
@@ -35,40 +35,38 @@
           </div>
         </div>
         </div>
-        <dv-decoration-10 />
+        <dv-decoration-10 style="height:2%;display:flex;"/>
         <div class="bottomCard">
-          <div style="width:31%;display:flex;">
+          <div style="width:28%;height: 100%;overflow: hidden;box-sizing: border-box;display:flex;">
             <div class="bottomCardLeft0">
               <middleCard v-if="weiHuSheBeiData.data.length" :info="weiHuSheBeiData" ref="sheBeiWeiHuRef"/>
             </div>
-            <dv-decoration-2 :reverse="true" style="width:3%;height:330px;margin: 0 10px;" />
-            <div style="width:37%">
+            <!-- <dv-decoration-2 :reverse="true" style="width:3%;height:100%;;margin: 0 10px;" /> -->
+            <!-- <div style="width:37%">
               <zhuzhuangtu v-if="sheBeiweiHuData.data.length" :info="sheBeiweiHuData"  ref="sheBeiWeiHuDataref"/>          
-            </div>
+            </div> -->
           </div>
-          <dv-decoration-2 :reverse="true" style="width:5px;height:330px;margin: 0 10px;" />
-          <div style="width:31%;display:flex;">
-            <div class="bottomCardLeft">
-              <middleCard v-if="sheBeiHeChaData.data.length" :info="sheBeiHeChaData" ref="sheBeiHeChaRef"/>
-            </div>
-            <dv-decoration-2 :reverse="true" style="width:5px;height:330px;margin: 0 10px;" />
+          <dv-decoration-2 :reverse="true" style="width:1%;height:100%;overflow: hidden;box-sizing: border-box;" />
+          <div style="width:49%;display:flex;">
             <div style="width:37%">
-              <zhuzhuangtu v-if="bottomData.data.length" :info="bottomData"  ref="bottomCardLeft"/>          
+              <zhuzhuangtu v-if="zhuantaiEData.data.length" :info="zhuantaiEData"  ref="zhuantaiEDataref"/>
             </div>
-          </div>
-          <dv-decoration-2 :reverse="true" style="width:5px;height:330px;margin: 0 10px;" />
-          <div style="width:31%;display:flex;">
+            <dv-decoration-2 :reverse="true" style="width:3%;height:330px;margin: 0 10px;" />
             <div class="bottomCardright">
               <middleCard v-if="jianDingjiaoZhunSheBeiData.data.length" :info="jianDingjiaoZhunSheBeiData" ref="jiandingRef"/>
             </div>
-            <dv-decoration-2 :reverse="true" style="width:3%;height:330px;margin: 0 10px;" />
-            <div style="width:40%">
-              <zhuzhuangtu v-if="zhuantaiEData.data.length" :info="zhuantaiEData"  ref="zhuantaiEDataref"/>
+          </div>
+          <dv-decoration-2 :reverse="true" style="width:1%;height:100%;overflow: hidden;box-sizing: border-box;" />
+          <div style="width:18%;overflow: hidden;box-sizing: border-box;display:flex;">
+            <!-- <div class="bottomCardLeft">
+              <middleCard v-if="sheBeiHeChaData.data.length" :info="sheBeiHeChaData" ref="sheBeiHeChaRef"/>
+            </div> -->
+            <!-- <dv-decoration-2 :reverse="true" style="width:5px;height:330px;margin: 0 10px;" /> -->
+            <div style="width:100%">
+              <zhuzhuangtu v-if="bottomData.data.length" :info="bottomData"  ref="bottomCardLeft"/>          
             </div>
           </div>
 
-          
-
         </div>
       </dv-border-box-1>
     </dv-full-screen-container>
@@ -168,18 +166,18 @@ export default {
         let eBadRate =Number((( (100 - eIntactnessRate).toFixed(4))+"").slice(0,4));
         let obj ={};
         obj.value = Number(((data[0].goodEquipments/data[0].Equipments).toFixed(4)*100+"").slice(0,5));
-        obj.name = "正常设备";
+        obj.name = "正常设备数";
         this_.MiddleLeftPieViewList.data.push(obj);
         obj ={};
         obj.value =Number(((data[0].limitedEquipments/data[0].Equipments).toFixed(4)*100+"").slice(0,5));
-        obj.name = "备用设备";
+        obj.name = "受限设备数";
         this_.MiddleLeftPieViewList.data.push(obj);
         obj ={};
         obj.value = Number(((data[0].scrapEquipments/data[0].Equipments).toFixed(4)*100+"").slice(0,5));
         obj.name = "停用/报废";
         this_.MiddleLeftPieViewList.data.push(obj);
         this_.MiddleLeftPieViewList.color = ['#339933','#FFFF66','#FF0033'];
-        this_.MiddleLeftPieViewList.config.title = "设备工作状态分布";
+        this_.MiddleLeftPieViewList.config.title = "设备数工作状态分布";
         this_.MiddleLeftPieViewList.config.idSelector = "main2";
         this_.$nextTick(()=>{
         setTimeout(() => {
@@ -192,29 +190,29 @@ export default {
           title: '',
           children: [
             {
-              label: '设备总数',
+              label: '设备数总数',
               value: data[0].Equipments,
-              danwei:'台'
+              danwei:''
             },
             {
-              label: '新增设备',
+              label: '新增设备数',
               value: data[0].addEquipments,
-              danwei:'台'
+              danwei:''
             },
             {
-              label: '正常设备',
+              label: '正常设备数',
               value: data[0].goodEquipments,
-              danwei:'台'
+              danwei:''
             },            
             {
-              label: '报废/停用设备',
+              label: '报废/停用设备数',
               value: data[0].scrapEquipments,
-              danwei:'台'
+              danwei:''
             },
             {
-              label: '受限设备',
+              label: '受限设备数',
               value: data[0].limitedEquipments,
-              danwei:'台'
+              danwei:''
             }
           ]
         },
@@ -222,14 +220,14 @@ export default {
           title: '',
           children: [
             {
-              label: '计划维护设备',
+              label: '计划维护设备数',
               value: data[0].weiHuNoEquipments,
-              danwei:'台'
+              danwei:''
             },
             {
-              label: '已维护设备',
+              label: '已维护设备数',
               value: data[0].weiHuEquipments,
-              danwei:'台'
+              danwei:''
             }
           ]
         },
@@ -237,14 +235,14 @@ export default {
           title: '',
           children: [
             {
-              label: '计划检定/校准设备',
+              label: '计划检定/校准设备数',
               value: data[0].testNoEquipments,
-              danwei:'台'
+              danwei:''
             },
             {
-              label: '已检定/校准设备',
+              label: '已检定/校准设备数',
               value: data[0].testEquipments,
-              danwei:'台'
+              danwei:''
             }
           ]
         },
@@ -252,14 +250,14 @@ export default {
           title: '',
           children: [
             {
-              label: '计划核查设备',
+              label: '计划核查设备数',
               value: data[0].checkNoEquipments,
-              danwei:'台'
+              danwei:''
             },
             {
-              label: '本月已核查设备',
+              label: '已核查设备数',
               value: data[0].checkEquipments,
-              danwei:'台'
+              danwei:''
             }
           ]
         },
@@ -285,7 +283,7 @@ export default {
         }
        ];
        //
-      this_.bottomData.xData =["计划核查设备","已核查设备"];
+      this_.bottomData.xData =["计划核查设备数","已核查设备数"];
       this_.bottomData.data.push(data[0].checkNoEquipments);
       this_.bottomData.data.push(data[0].checkEquipments);
       this_.bottomData.config.title ="核查设备柱状图";
@@ -295,13 +293,13 @@ export default {
 					
 			// 	}, 1000)
       // })
-      this_.zhuantaiEData.xData =["计划检定/校准设备","已完成检定/校准设备",];
+      this_.zhuantaiEData.xData =["计划检定/校准设备数","已完成检定/校准设备数",];
       this_.zhuantaiEData.data.push(data[0].testNoEquipments);
       this_.zhuantaiEData.data.push(data[0].testEquipments);
       this_.zhuantaiEData.config.title ="设备检定/校准设备柱状图";
       this_.zhuantaiEData.config.idSelector ="main3"; 
-      //维护设备柱状图
-      this_.sheBeiweiHuData.xData =["计划维护设备","已完成设备",];
+      //维护设备数柱状图
+      this_.sheBeiweiHuData.xData =["计划维护设备数","已完成设备数",];
       this_.sheBeiweiHuData.data.push(data[0].weiHuNoEquipments);
       this_.sheBeiweiHuData.data.push(data[0].weiHuEquipments);
       this_.sheBeiweiHuData.config.title ="设备维护柱状图";
@@ -325,38 +323,38 @@ export default {
       this_.eBgRateData.color = ['#339933','#FF0033'];
       this_.eBgRateData.config.title = "设备工作状态分布";
       this_.eBgRateData.config.idSelector = "main1";
-      //设备维护
+      //设备数维护
       let objweihu ={};
-      objweihu.name ="计划维护设备";
+      objweihu.name ="计划维护设备数";
       objweihu.value = data[0].weiHuNoEquipments;
       this_.weiHuSheBeiData.data.push(objweihu);
       objweihu ={};
       objweihu.value =  data[0].weiHuEquipments;
-      objweihu.name = "已维护设备";
+      objweihu.name = "已维护设备数";
       this_.weiHuSheBeiData.data.push(objweihu);
       this_.weiHuSheBeiData.color = ['#5470c6','#38a838'];
       this_.weiHuSheBeiData.config.title = "设备维护分布";
       this_.weiHuSheBeiData.config.idSelector = "mainWeiHu";
-      //设备核查
+      //设备数核查
       let objHeCha ={};
-      objHeCha.name ="计划核查设备";
+      objHeCha.name ="计划核查设备数";
       objHeCha.value = data[0].checkNoEquipments;
       this_.sheBeiHeChaData.data.push(objHeCha);
       objHeCha ={};
       objHeCha.value =  data[0].checkEquipments;
-      objHeCha.name = "已核查设备";
+      objHeCha.name = "已核查设备数";
       this_.sheBeiHeChaData.data.push(objHeCha);
       this_.sheBeiHeChaData.color = ['#5470c6','#38a838'];
       this_.sheBeiHeChaData.config.title = "设备核查分布";
       this_.sheBeiHeChaData.config.idSelector = "mainHeCha";
-      //设备检定校准
+      //设备数检定校准
       let objJianding ={};
-      objJianding.name ="计划检定/校准设备";
+      objJianding.name ="计划检定/校准设备数";
       objJianding.value = data[0].testNoEquipments;
       this_.jianDingjiaoZhunSheBeiData.data.push(objJianding);
       objJianding ={};
       objJianding.value =  data[0].testEquipments;
-      objJianding.name = "已完成设备";
+      objJianding.name = "已完成设备数";
       this_.jianDingjiaoZhunSheBeiData.data.push(objJianding);
       this_.jianDingjiaoZhunSheBeiData.color = ['#5470c6','#38a838'];
       this_.jianDingjiaoZhunSheBeiData.config.title = "设备检定校准分布";
@@ -380,7 +378,6 @@ export default {
     },
     async getCarouselTable() {
       this.config={ header:['设备名称','设备编号','规格型号','设备状态'],data:[]};
-
       let this_ = this;
       const sql = "select * from t_sbdj where she_bei_zhuang_ta ='停用' or she_bei_zhuang_ta ='报废' or she_bei_zhuang_ta ='报废/停用'";
       let data1 = [];
@@ -472,7 +469,7 @@ export default {
   .header {
     position: relative;
     width: 100%;
-    height: 9%;
+    height: 8%;
     display: flex;
     justify-content: space-between;
     flex-shrink: 0;
@@ -525,12 +522,12 @@ export default {
     overflow: hidden;
   }
  .bottomCard{
-  height: 37%;
+  height: 36%;
   overflow: hidden;
   box-sizing: border-box;
   }
   .middleCard{
-    height:40%;
+    height:38%;
     overflow: hidden;
     box-sizing: border-box;
   }
@@ -544,14 +541,20 @@ export default {
     .middleCardLeft{
       width: 25%;
       height: 100%;
+      box-sizing: border-box;
+      overflow: hidden;
     }
     .middleCardCenter{
       width: 25%;
       height: 100%;
+      box-sizing: border-box;
+      overflow: hidden;
     }
     .middleCardRight{
       width: 43%;
       height: 100%;
+      box-sizing: border-box;
+      overflow: hidden;
     }
     // .middleCardRight1{
     //   width: 45%;
@@ -564,26 +567,23 @@ export default {
       display: inline-block;
     }
     .bottomCardLeft0,.bottomCardLeft,.bottomCardright{
-      width: 70%;
+      height: 100%;
+      overflow: hidden;
+      box-sizing: border-box;
+      width: 100%;
+    }
+    .bottomCardLeft,.bottomCardright{
+      height: 100%;
+      overflow: hidden;
+      box-sizing: border-box;
+      width: 100%;
+    }
+    .bottomCardright{
+      height: 100%;
+      overflow: hidden;
+      box-sizing: border-box;
+      width: 63%;
     }
-    // .bottomCardCenter0{
-
-    // }
-    // .bottomCardLeft{
-
-    //   margin-left: 30px;
-    // }
-    // .bottomCardCenter{
-    //   margin-left: 15px;
-    // }
-    // .bottomCardright{
-
-    //   margin-left: 15px;
-    // }
-    // .bottomCardright2{
-
-    //   margin-left: 15px;
-    // }
   }
 }
 .dv-decoration-10 {