fix:设备管理看板

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

@@ -1,6 +1,6 @@
 <template>
   <div :class="$style.pieView">
-    <div style="height: 35px;line-height: 47px;text-align: left;padding-left: 10px;width: calc(100% - 10px) ;background-color: #06163f;opacity: 0.5;">标题</div>   
+    <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%;display: inline-block;background-color: #06163f;">
       <dv-scroll-board :config="info" style="width:50%;height:300px" />
     </div>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="pieView">
-    <div style="height: 35px;line-height: 47px;text-align: left;padding-left: 10px;width: 390px;background-color: rgba(6,30,93,.5);">{{info.config.title||""}}</div>   
+    <div style="height: 30px;line-height: 30px;text-align: left;padding-left: 10px;width: 390px;background-color: rgba(6,30,93,.5);">{{info.config.title||""}}</div>   
     <div style="width:400px;height:300px;display: inline-block;background-color: rgba(6,30,93,.5);">
       <div :id="info.config.idSelector" style="width:400px;height:300px;"> </div>
     </div>

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

@@ -1,6 +1,6 @@
 <template>
-  <div :class="$style.pieView">
-    <div style="height: 30px;line-height: 30px;text-align: left;padding-left: 10px;width: 390px;background-color: rgba(6,30,93,.5);">{{info.config.title}}</div>   
+  <div class="pieView">
+    <div style="height: 30px;line-height: 30px;text-align: left;padding-left: 10px;width: 190px;background-color: rgba(6,30,93,.5);">{{info.config.title}}</div>   
     <div style="width:200px;height:300px;display: inline-block;background-color: rgba(6,30,93,.5);">
       <div :id="info.config.idSelector" style="width:200px;height:300px;"> </div>
     </div>
@@ -23,6 +23,12 @@ export default {
     getMiddleLeft() {
       var chartDom = document.getElementById(this.info.config.idSelector);
       var myChart = echarts.init(chartDom);
+      const setEchartWH = {
+        //设置控制图表大小变量
+        width: 200,
+        height: 300,
+      };
+      var myChart = echarts.init(chartDom, null, setEchartWH);
       var option;
       option = {
         tooltip: {
@@ -95,9 +101,10 @@ export default {
   },
 };
 </script>
-<style lang="scss" module>
+<style lang="scss" scoped>
 .pieView {
   display: flex;
-  width: 100vw;
+  width: 100%;
+  margin-left: 300px;
 }
 </style>

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

@@ -35,29 +35,35 @@
         </div>
         <dv-decoration-10 />
         <div class="bottomCard">
-          <div class="bottomCardLeft0">
-            <middleCard v-if="weiHuSheBeiData.data.length" :info="weiHuSheBeiData" ref="sheBeiWeiHuRef"/>
+          <div style="width:30%;display:flex;margin-left: 30px;">
+            <div class="bottomCardLeft0">
+              <middleCard v-if="weiHuSheBeiData.data.length" :info="weiHuSheBeiData" ref="sheBeiWeiHuRef"/>
+            </div>
+            <div style="padding-left: 10px;">
+              <zhuzhuangtu v-if="sheBeiweiHuData.data.length" :info="sheBeiweiHuData"  ref="sheBeiWeiHuDataref"/>          
+            </div>
           </div>
           <dv-decoration-2 :reverse="true" style="width:5px;height:330px;margin-left: 15px;" />
-          <div class="bottomCardCenter0">
-            <zhuzhuangtu v-if="sheBeiweiHuData.data.length" :info="sheBeiweiHuData"  ref="sheBeiWeiHuDataref"/>          
+          <div style="width:30%;display:flex;margin-left: 15px;">
+            <div class="bottomCardLeft">
+              <middleCard v-if="sheBeiHeChaData.data.length" :info="sheBeiHeChaData" ref="sheBeiHeChaRef"/>
+            </div>
+            <div class="bottomCardCenter">
+              <zhuzhuangtu v-if="zhuantaiEData.data.length" :info="zhuantaiEData"  ref="zhuantaiEDataref"/>          
+            </div>
           </div>
           <dv-decoration-2 :reverse="true" style="width:5px;height:330px;margin-left: 15px;" />
-          <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-left: 15px;" />
-          <div class="bottomCardCenter">
-            <zhuzhuangtu v-if="zhuantaiEData.data.length" :info="zhuantaiEData"  ref="zhuantaiEDataref"/>          
-          </div>
-          <dv-decoration-2 :reverse="true" style="width:5px;height:330px;margin-left: 15px;" />
-          <div class="bottomCardright">
-            <middleCard v-if="jianDingjiaoZhunSheBeiData.data.length" :info="jianDingjiaoZhunSheBeiData" ref="jiandingRef"/>
-          </div>
-          <dv-decoration-2 :reverse="true" style="width:5px;height:330px;margin-left: 25px;" />
-          <div class="bottomCardright2">
-            <zhuzhuangtu v-if="bottomData.data.length" :info="bottomData"  ref="bottomCardLeft"/>
+          <div style="width:30%;display:flex;margin-left: 15px;">
+            <div class="bottomCardright">
+              <middleCard v-if="jianDingjiaoZhunSheBeiData.data.length" :info="jianDingjiaoZhunSheBeiData" ref="jiandingRef"/>
+            </div>
+            <div class="bottomCardright2">
+              <zhuzhuangtu v-if="bottomData.data.length" :info="bottomData"  ref="bottomCardLeft"/>
+            </div>
           </div>
+
+          
+
         </div>
       </dv-border-box-1>
     </dv-full-screen-container>
@@ -157,6 +163,7 @@ export default {
      await curdPost("sql",sql).then(res=>{
         const data = res.variables.data
         let eIntactnessRate = Number(((data[0].goodEquipments/data[0].Equipments).toFixed(3)+"").slice(2,4));
+        let eBadRate = 100 - parseInt(eIntactnessRate);
         let obj ={};
         obj.value = data[0].goodEquipments;
         obj.name = "正常设备";
@@ -262,6 +269,11 @@ export default {
               value: eIntactnessRate,
               danwei:'%'
             },
+            {
+              label: '设备损坏率',
+              value: eBadRate,
+              danwei:'%'
+            },
             {
               label: '设备总值',
               value:100,
@@ -276,11 +288,11 @@ export default {
       this_.bottomData.data.push(data[0].checkEquipments);
       this_.bottomData.config.title ="核查设备数量";
       this_.bottomData.config.idSelector ="main4";
-      this_.$nextTick(()=>{
-        setTimeout(() => {
-					this_.$refs.zhuantaiEDataref.getMiddleLeft()// hhhh xxxx
-				}, 1000)
-      })
+      // this_.$nextTick(()=>{
+      //   setTimeout(() => {
+					
+			// 	}, 1000)
+      // })
       this_.zhuantaiEData.xData =["计划检定/校准设备数","已完成检定/校准设备数",];
       this_.zhuantaiEData.data.push(data[0].testNoEquipments);
       this_.zhuantaiEData.data.push(data[0].testEquipments);
@@ -294,11 +306,12 @@ export default {
       this_.sheBeiweiHuData.config.idSelector ="mainWeiHuZ";
       this_.$nextTick(()=>{
         setTimeout(() => {
+          this_.$refs.zhuantaiEDataref.getMiddleLeft()// hhhh xxxx
 					this_.$refs.bottomCardLeft.getMiddleLeft()// hhhh xxxx
           this_.$refs.sheBeiWeiHuDataref.getMiddleLeft();
 				}, 1000)
       })
-      let eBadRate = 100 - parseInt(eIntactnessRate);
+      
       let objRate = {};
       objRate.name ="设备完好率";
       objRate.value = eIntactnessRate;
@@ -499,31 +512,31 @@ export default {
     padding: 10px;
   }
   .bottomCard{
+    display: flex;
     div{
       display: inline-block;
     }
-    .bottomCardLeft0{
-      width:15%;
-    }
-    .bottomCardCenter0{
-      width:15%;
-    }
-    .bottomCardLeft{
-      width:15%;
-      margin-left: 30px;
-    }
-    .bottomCardCenter{
-      width:15%;
-      margin-left: 15px;
-    }
-    .bottomCardright{
-      width:15%;
-      margin-left: 15px;
-    }
-    .bottomCardright2{
-      width:15%;
-      margin-left: 15px;
-    }
+    // .bottomCardLeft0{
+
+    // }
+    // .bottomCardCenter0{
+
+    // }
+    // .bottomCardLeft{
+
+    //   margin-left: 30px;
+    // }
+    // .bottomCardCenter{
+    //   margin-left: 15px;
+    // }
+    // .bottomCardright{
+
+    //   margin-left: 15px;
+    // }
+    // .bottomCardright2{
+
+    //   margin-left: 15px;
+    // }
   }
 }
 .dv-decoration-10 {