fix:设备管理看板

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

@@ -1,8 +1,8 @@
 <template>
   <div class="pieView">
-    <div class="title">{{title}}</div>
-    <div style="width:100%;display: inline-block;background-color: #06163f;">
-      <dv-scroll-board :config="info" style="width:100%;height:320px" />
+    <div style=" height: 10%;">{{title}}</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>
@@ -28,14 +28,8 @@ export default {
 .pieView {
   display: flex;
   width: 100%;
-  // .title {
-  //   height: 30px;
-  //   line-height: 30px;
-  //   text-align: left;
-  //   padding-left: 10px;
-  //   width: calc(100% - 10px);
-  //   background-color: #06163f;
-  //   opacity: 0.5;
-  // }
+  height: 100%;
+  overflow: hidden;
+      box-sizing: border-box;
 }
 </style>

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

@@ -8,9 +8,8 @@
           <div v-for="(v, i) in item.children" :key="i" class="box">
             <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 class="unit">{{ v.unit }}</div>
+              <div :style="{color:v.data.style.fill}" style="font-weight:bold;font-size: 27px;">{{v.value}}</div>
+              <div class="unit" style="line-height: 34px;">{{ v.unit }}</div>
             </div>
           </div>
         </div>
@@ -38,18 +37,18 @@ export default {
     return {
       topBarData: [],
       fontColor: [
-        "#d20962",
-        "#f47721",
-        "#7ac143",
-        "#00a78e",
-        "#00bce4",
-        "#7d3f98",
-        "#037ef3",
-        "#f85a40",
-        "#00c16e",
-        "#ffd900",
-        "#0cb9c1",
-        "#7552cc",
+        "#00b56a",
+        "#00b56a",
+        "#00b56a",
+        "#00b56a",
+        "#00b56a",
+        "#00b56a",
+        "#00b56a",
+        "#00b56a",
+        "#00b56a",
+        "#00b56a",
+        "#00b56a",
+        "#00b56a",
       ],
     };
   },
@@ -110,10 +109,10 @@ export default {
     width: 20%;
     // width: calc(100% / 13);
     height: 60%;
-    padding: 12px 20px;
+    padding: 4px 4px;
     border-left: 5px solid rgb(6, 30, 93);
     &:first-child {
-      width: 34%;
+      width: 35%;
       display: flex;
       justify-content: space-around;
       align-items: center;
@@ -123,7 +122,7 @@ export default {
       }
     }
     &:nth-child(2) {
-      width: 13%;
+      width: 15%;
       display: flex;
       justify-content: space-around;
       align-items: center;
@@ -133,7 +132,7 @@ export default {
       }
     }
     &:nth-child(3) {
-      width: 20%;
+      width: 23%;
       display: flex;
       justify-content: space-around;
       align-items: center;
@@ -143,7 +142,7 @@ export default {
       }
     }
     &:nth-child(4) {
-      width: 20%;
+      width: 15%;
       display: flex;
       justify-content: space-around;
       align-items: center;

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

@@ -1,6 +1,6 @@
 <template>
   <div class="pieView">
-    <div style="height: 20%;line-height: 30px;text-align: left;padding-left: 10px;">{{info.config.title||""}}</div>   
+    <div style="height: 20%;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>
@@ -30,11 +30,6 @@ export default {
   methods:{
     getMiddleLeft(){ 
       let chartDom = document.getElementById(this.info.config.idSelector);
-      // const setEchartWH = {
-      //   //设置控制图表大小变量
-      //   width: 350,
-      //   height: 320,
-      // };
       var myChart = echarts.init(chartDom);
       var option;
       option = {
@@ -47,6 +42,9 @@ export default {
             fontWeight: '600'
         },
         },
+        label: {
+          formatter: '{b}\n({d}%)'
+        },
         color:this.info.color,
         tooltip: {
           trigger: 'item',
@@ -87,6 +85,7 @@ export default {
   display: flex;
   width: 100%;
   height: 100%;
+  box-sizing: border-box;
   overflow: hidden;
   background-color: rgba(6,30,93,.5);
 }

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

@@ -11,7 +11,9 @@
 import * as echarts from "echarts";
 export default {
   data() {
-    return {};
+    return {
+      yAxisNum:1,
+    };
   },
   props: {
     info: {
@@ -28,6 +30,13 @@ export default {
       //   width: 250,
       //   height: 300,
       // };
+      
+      let ay =this.info.data;
+      console.log(ay,"1212")
+      let yc;
+      ay[0] > ay[1]?yc=ay[0]:yc=ay[1];
+      this.yAxisNum = ay / 6;
+      this.yAxisNum ==0? this.yAxisNum =1:'';
       var myChart = echarts.init(chartDom);
       var option;
       option = {
@@ -52,8 +61,6 @@ export default {
               alignWithLabel: false,
             },
             axisLabel: {
-              // rotate: -1,
-              // margin: 0,
               fontSize: 12,
               formatter:function(value){  
                 var str = ""; 
@@ -93,7 +100,7 @@ export default {
               color: "#fff"
             }
           },
-          interval:1
+          interval:this.yAxisNum
         },
         ],
         series: [

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="content" >
+  <div class="content">
     <dv-full-screen-container>
       <!-- 头部内容 -->
       <div class="header">
@@ -15,62 +15,64 @@
           <dv-border-box-8>返回</dv-border-box-8>
         </div>
       </div>
-      <dv-border-box-1 v-if="MiddleLeftPieViewList.data.length" style="height:90%">
+      <dv-border-box-1 v-if="MiddleLeftPieViewList.data.length" style="width: 100%;height:89%;margin: 0 auto;box-sizing: border-box;overflow: hidden;">
         <!-- 顶部数据 -->
         <div class="topCard">
           <top-bar v-if="topBarData.length" :info="topBarData" />
         </div>
-        <div class="middleCard" >
-          <div style="width:100%;height: 92%;">
-          <div class="middleCardLeft"  >
-            <middleCard v-if="MiddleLeftPieViewList.data.length" :info="MiddleLeftPieViewList" ref="middleCardLeft"/>
-          </div>
-          <dv-decoration-2 v-if="MiddleLeftPieViewList.data.length" :reverse="true" style="width:2%;height:350px;" />
-          <div class="middleCardCenter">
-            <middleCard v-if="eBgRateData.data.length" :info="eBgRateData" ref="middleCardCenter"/>
-          </div>
-          <dv-decoration-2 v-if="eBgRateData.data.length"  :reverse="true" style="width:2%;height:350px;" />
-          <div class="middleCardRight" v-if="eBgRateData.data.length" >
-            <CarouselTabl v-if="config.data.length" :info="config" title="设备报废记录"/>
-          </div>
-          <dv-decoration-2 v-if="eBgRateData.data.length" :reverse="true" style="width:2%;height:350px;" />
-          <div class="middleCardRight1">
-            <CarouselTabl v-if="MiddleLeftPieViewList.data.length" :info="shiyonglvConfig" title="设备使用记录"/>
+        <div class="middleCard">
+          <div style="width:100%;height: 100%;overflow: hidden;box-sizing: border-box;">
+            <div class="middleCardLeft">
+              <middleCard v-if="MiddleLeftPieViewList.data.length" :info="MiddleLeftPieViewList" ref="middleCardLeft" />
+            </div>
+            <dv-decoration-2 v-if="MiddleLeftPieViewList.data.length" :reverse="true" style="width:2%;height:100%;overflow: hidden;box-sizing: border-box;" />
+            <div class="middleCardCenter">
+              <middleCard v-if="eBgRateData.data.length" :info="eBgRateData" ref="middleCardCenter" />
+            </div>
+            <dv-decoration-2 v-if="eBgRateData.data.length" :reverse="true" style="width:2%;height:100%;overflow: hidden;box-sizing: border-box;" />
+            <div class="middleCardRight" v-if="eBgRateData.data.length">
+              <CarouselTabl v-if="config.data.length" :info="config" title="设备报废记录" />
+            </div>
+            <dv-decoration-2 v-if="eBgRateData.data.length" :reverse="true" style="width:2%;height:100%;overflow: hidden;box-sizing: border-box;" />
+            <div class="middleCardRight1">
+              <CarouselTabl v-if="MiddleLeftPieViewList.data.length" :info="shiyonglvConfig" title="设备使用记录" />
+            </div>
           </div>
+          <dv-decoration-10 v-if="MiddleLeftPieViewList.data.length" style="height: 5%;" />
         </div>
-        <dv-decoration-10  v-if="MiddleLeftPieViewList.data.length" style="height: 5%;"/>
-        </div>
-        
         <div class="bottomCard">
-          <div style="width:31%;display:flex;">
+          <div style="width:28%;display:flex;overflow: hidden;">
             <div class="bottomCardLeft0">
-              <middleCard v-if="weiHuSheBeiData.data.length" :info="weiHuSheBeiData" ref="sheBeiWeiHuRef"/>
-            </div>
-            <dv-decoration-2 v-if="weiHuSheBeiData.data.length" :reverse="true" style="width:3%;height:330px;margin: 0 10px;" />
-            <div style="width:37%">
-              <zhuzhuangtu v-if="sheBeiweiHuData.data.length" :info="sheBeiweiHuData"  ref="sheBeiWeiHuDataref"/>          
+              <middleCard v-if="weiHuSheBeiData.data.length" :info="weiHuSheBeiData" ref="sheBeiWeiHuRef" />
             </div>
+            <!-- <dv-decoration-2 v-if="weiHuSheBeiData.data.length" :reverse="true" style="width:3%;height:330px;margin: 0 10px;" /> -->
+            <!-- <div style="width:37%">
+              <zhuzhuangtu v-if="sheBeiweiHuData.data.length" :info="sheBeiweiHuData" ref="sheBeiWeiHuDataref" />
+            </div> -->
           </div>
-          <dv-decoration-2 v-if="sheBeiweiHuData.data.length" :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"/>
+          <dv-decoration-2 v-if="bottomData.data.length" :reverse="true" style="width:2%;height:100%;" />
+          <div style="width:50%;display:flex;overflow: hidden;">
+            <div style="width:38%">
+              <zhuzhuangtu v-if="zhuantaiEData.data.length" :info="zhuantaiEData" ref="zhuantaiEDataref" />
             </div>
-            <dv-decoration-2 v-if="sheBeiHeChaData.data.length" :reverse="true" style="width:5px;height:330px;margin: 0 10px;" />
-            <div style="width:37%">
-              <zhuzhuangtu v-if="bottomData.data.length" :info="bottomData"  ref="bottomCardLeft"/>          
-            </div>
-          </div>
-          <dv-decoration-2 v-if="bottomData.data.length" :reverse="true" style="width:5px;height:330px;margin: 0 10px;" />
-          <div style="width:31%;display:flex;">
+            <dv-decoration-2 v-if="jianDingjiaoZhunSheBeiData.data.length" :reverse="true" style="width:4%;height:100%;" />
             <div class="bottomCardright">
-              <middleCard v-if="jianDingjiaoZhunSheBeiData.data.length" :info="jianDingjiaoZhunSheBeiData" ref="jiandingRef"/>
+              <middleCard v-if="jianDingjiaoZhunSheBeiData.data.length" :info="jianDingjiaoZhunSheBeiData" ref="jiandingRef" />
             </div>
-            <dv-decoration-2 v-if="jianDingjiaoZhunSheBeiData.data.length" :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 v-if="sheBeiweiHuData.data.length" :reverse="true" style="width:2%;height:100%;" />
+          <div style="width:18%;display:flex;overflow: hidden;">
+            <!-- <div class="bottomCardLeft">
+              <middleCard v-if="sheBeiHeChaData.data.length" :info="sheBeiHeChaData" ref="sheBeiHeChaRef" />
+            </div> -->
+            <!-- <dv-decoration-2 v-if="sheBeiHeChaData.data.length" :reverse="true" style="width:2%;height:100%;" /> -->
+            <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>
@@ -79,17 +81,17 @@
 <script>
 import screenfull from "screenfull";
 import curdPost from "@/business/platform/form/utils/custom/joinCURD.js";
-import { color } from 'echarts/lib/export';
+import { color } from "echarts/lib/export";
 // import { config } from 'public/lib/UEditor/third-party/zeroclipboard/ZeroClipboard';
 // import { acceptList } from "./data.js";
 // import { number } from 'echarts/lib/export';
 export default {
   name: "checkBoard",
   components: {
-    topBar: () => import('./component/equipment/equipmentBoardTopcard'),
-    middleCard: () => import('./component/equipment/getPieView'),
-    zhuzhuangtu: () => import('./component/equipment/zhuzhuangtu'),
-    CarouselTabl: () => import('./component/equipment/CarouselTabl')
+    topBar: () => import("./component/equipment/equipmentBoardTopcard"),
+    middleCard: () => import("./component/equipment/getPieView"),
+    zhuzhuangtu: () => import("./component/equipment/zhuzhuangtu"),
+    CarouselTabl: () => import("./component/equipment/CarouselTabl"),
   },
   data() {
     const d = new Date();
@@ -100,34 +102,44 @@ export default {
       today: d.toJSON().slice(0, 10),
       topBarData: [],
       timer: null,
-      MiddleLeftPieViewList:{
-        data:[],
-        config:{idSelector:"main"}, //{name:,value}
-        color:[]
+      MiddleLeftPieViewList: {
+        data: [],
+        config: { idSelector: "main" }, //{name:,value}
+        color: [],
       },
-      eBgRateData:{
-        data:[],
-        config:{}
+      eBgRateData: {
+        data: [],
+        config: {},
       },
-      sheBeiHeChaData:{
-        data:[],
-        config:{}
+      sheBeiHeChaData: {
+        data: [],
+        config: {},
       },
-      jianDingjiaoZhunSheBeiData:{
-        data:[],
-        config:{}
+      jianDingjiaoZhunSheBeiData: {
+        data: [],
+        config: {},
       },
-      weiHuSheBeiData:{
-        data:[],
-        config:{}
+      weiHuSheBeiData: {
+        data: [],
+        config: {},
       },
-      bottomData:{xData:[],data:[],config:{idSelector:""}},
-      zhuantaiEData:{xData:[],data:[],config:{idSelector:""}},
-      sheBeiweiHuData:{xData:[],data:[],config:{idSelector:""}},
-      config:{ header:['设备名称','设备编号','规格型号','设备状态'],data:[],columnWidth:['100','110','85','85'],rowNum:4,},
-      shiyonglvConfig:{ header:['设备名称','设备状态','频率'],data:[],columnWidth:['120','120','50'],rowNum:4},
-      zichan:0,
-      loading:true
+      bottomData: { xData: [], data: [], config: { idSelector: "" } },
+      zhuantaiEData: { xData: [], data: [], config: { idSelector: "" } },
+      sheBeiweiHuData: { xData: [], data: [], config: { idSelector: "" } },
+      config: {
+        header: ["设备名称", "设备编号", "规格型号", "设备状态"],
+        data: [],
+        columnWidth: ["100", "110", "85", "85"],
+        rowNum: 4,
+      },
+      shiyonglvConfig: {
+        header: ["设备名称", "设备状态", "频率"],
+        data: [],
+        columnWidth: ["120", "120", "50"],
+        rowNum: 4,
+      },
+      zichan: 0,
+      loading: true,
     };
   },
   created() {
@@ -135,7 +147,6 @@ export default {
       this.allView();
     }
     this.updateAll();
-
   },
   beforeDestroy() {
     if (screenfull.isFullscreen) {
@@ -143,7 +154,8 @@ export default {
     }
   },
   methods: {
-    allView() { // 默认显示全屏 
+    allView() {
+      // 默认显示全屏
       screenfull.request();
     },
     goBack() {
@@ -157,28 +169,28 @@ export default {
       this.getCarouselShiYonglvTable();
       // this.getbottomData();
     },
-    async getTopBarData(){
+    async getTopBarData() {
       let this_ = this;
-      let sql1 = `select fei_yong_ as feiyong from t_mjsbxzqrb where shi_fou_guo_shen_ ='1'`
-      let zichan
-      await curdPost("sql",sql1).then(res=>{
-        const data = res.variables.data
+      let sql1 = `select fei_yong_ as feiyong from t_mjsbxzqrb where shi_fou_guo_shen_ ='1'`;
+      let zichan;
+      await curdPost("sql", sql1).then((res) => {
+        const data = res.variables.data;
         zichan = this_.getAllMonyInt(data);
-      })
-      let sql2 = `select yu_suan_ as feiyong from t_mjyqsbwxsqb where shi_fou_guo_shen_ ='1'`
-      let shenqinngfeiyong
-      await curdPost("sql",sql1).then(res=>{
-        const data = res.variables.data
+      });
+      let sql2 = `select yu_suan_ as feiyong from t_mjyqsbwxsqb where shi_fou_guo_shen_ ='1'`;
+      let shenqinngfeiyong;
+      await curdPost("sql", sql1).then((res) => {
+        const data = res.variables.data;
         shenqinngfeiyong = this_.getAllMonyInt(data);
-      })
-      let sql3 = `select shi_ji_zhi_chu_ as feiyong from t_mjsbwxqrb where shi_fou_guo_shen_ ='1'`
-      let querennfeiyong
-      await curdPost("sql",sql1).then(res=>{
-        const data = res.variables.data
+      });
+      let sql3 = `select shi_ji_zhi_chu_ as feiyong from t_mjsbwxqrb where shi_fou_guo_shen_ ='1'`;
+      let querennfeiyong;
+      await curdPost("sql", sql1).then((res) => {
+        const data = res.variables.data;
         querennfeiyong = this_.getAllMonyInt(data);
-      })
+      });
       let weixiufeiyongbi = shenqinngfeiyong / querennfeiyong;
-      let sql =`select a.Equipments,a1.mony,b.addEquipments,c.testEquipments,c1.testNoEquipments,d.checkEquipments,
+      let sql = `select a.Equipments,a1.mony,b.addEquipments,c.testEquipments,c1.testNoEquipments,d.checkEquipments,
       d1.checkNoEquipments,e.goodEquipments,f.scrapEquipments,g.limitedEquipments,h.weiHuNoEquipments,h1.weiHuEquipments
       from  
       (select count(*) as Equipments from t_sbdj) as a,
@@ -194,231 +206,241 @@ export default {
       (select count(*) as weiHuNoEquipments  from t_mjsbwhjhzb where create_time_ LIKE '${this_.month}') as h,
       (select count(*) as weiHuEquipments  from t_mjsbwhbyjlby where create_time_ LIKE '${this_.month}' and shi_fou_guo_shen_ ='1') as h1`;
 
-     await curdPost("sql",sql).then(res=>{
-        const data = res.variables.data
-        // let zichan = '待确认';
-        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 = "正常设备";
-        this_.MiddleLeftPieViewList.data.push(obj);
-        obj ={};
-        obj.value = data[0].limitedEquipments;
-        obj.name = "备用设备";
-        this_.MiddleLeftPieViewList.data.push(obj);
-        obj ={};
-        obj.value = data[0].scrapEquipments;
-        obj.name = "停用/报废";
-        this_.MiddleLeftPieViewList.data.push(obj);
-        this_.MiddleLeftPieViewList.color = ['#339933','#FFFF66','#FF0033'];
-        this_.MiddleLeftPieViewList.config.title = "设备状态工作分布";
-        this_.MiddleLeftPieViewList.config.idSelector = "main2";
-        this_.$nextTick(()=>{
-        setTimeout(() => {
-					this_.$refs.middleCardLeft.getMiddleLeft()// hhhh xxxx
-				}, 1000)
-        })
-        obj ={};
-        let result =[
-        {
-          title: '',
-          children: [
-            {
-              label: '设备总数',
-              value: data[0].Equipments,
-              danwei:'台'
-            },
-            {
-              label: '本月新增设备',
-              value: data[0].addEquipments,
-              danwei:'台'
-            },
-            {
-              label: '正常设备',
-              value: data[0].goodEquipments,
-              danwei:'台'
-            },            
-            {
-              label: '报废/停用设备',
-              value: data[0].scrapEquipments,
-              danwei:'台'
-            },
-            {
-              label: '受限设备',
-              value: data[0].limitedEquipments,
-              danwei:'台'
-            }
-          ]
-        },
-        {
-          title: '',
-          children: [
-            {
-              label: '本月计划维护设备',
-              value: data[0].weiHuNoEquipments,
-              danwei:'台'
-            },
-            {
-              label: '本月已维护设备',
-              value: data[0].weiHuEquipments,
-              danwei:'台'
-            }
-          ]
-        },
-        {
-          title: '',
-          children: [
+      await curdPost("sql", sql)
+        .then((res) => {
+          const data = res.variables.data;
+          // let zichan = '待确认';
+          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 = "正常设备";
+          this_.MiddleLeftPieViewList.data.push(obj);
+          obj = {};
+          obj.value = data[0].limitedEquipments;
+          obj.name = "备用设备";
+          this_.MiddleLeftPieViewList.data.push(obj);
+          obj = {};
+          obj.value = data[0].scrapEquipments;
+          obj.name = "停用/报废";
+          this_.MiddleLeftPieViewList.data.push(obj);
+          this_.MiddleLeftPieViewList.color = ["#339933", "#FFFF66", "#FF0033"];
+          this_.MiddleLeftPieViewList.config.title = "设备状态工作分布";
+          this_.MiddleLeftPieViewList.config.idSelector = "main2";
+          this_.$nextTick(() => {
+            setTimeout(() => {
+              this_.$refs.middleCardLeft.getMiddleLeft(); // hhhh xxxx
+            }, 1000);
+          });
+          obj = {};
+          let result = [
             {
-              label: '本月计划检定/校准设备',
-              value: data[0].testNoEquipments,
-              danwei:'台'
+              title: "",
+              children: [
+                {
+                  label: "设备总数",
+                  value: data[0].Equipments,
+                  danwei: "",
+                },
+                {
+                  label: "新增设备",
+                  value: data[0].addEquipments,
+                  danwei: "",
+                },
+                {
+                  label: "正常设备",
+                  value: data[0].goodEquipments,
+                  danwei: "",
+                },
+                {
+                  label: "报废/停用设备",
+                  value: data[0].scrapEquipments,
+                  danwei: "",
+                },
+                {
+                  label: "受限设备",
+                  value: data[0].limitedEquipments,
+                  danwei: "",
+                },
+              ],
             },
             {
-              label: '本月已检定/校准设备',
-              value: data[0].testEquipments,
-              danwei:'台'
+              title: "",
+              children: [
+                {
+                  label: "计划维护设备",
+                  value: data[0].weiHuNoEquipments,
+                  danwei: "",
+                },
+                {
+                  label: "已维护设备",
+                  value: data[0].weiHuEquipments,
+                  danwei: "",
+                },
+              ],
             },
             {
-              label: `检定校准费用`,
-              value: zichan,
-              danwei:'元'
-            }
-          ]
-        },
-        {
-          title: '',
-          children: [
-            {
-              label: '本月申请维修设备',
-              value: data[0].checkNoEquipments,
-              danwei:'台'
+              title: "",
+              children: [
+                {
+                  label: "计划检定/校准设备",
+                  value: data[0].testNoEquipments,
+                  danwei: "",
+                },
+                {
+                  label: "已检定/校准设备",
+                  value: data[0].testEquipments,
+                  danwei: "",
+                },
+                {
+                  label: `检定校准费用`,
+                  value: zichan,
+                  danwei: "元",
+                },
+              ],
             },
             {
-              label: '本月完成维修设备',
-              value: data[0].checkEquipments,
-              danwei:'台'
+              title: "",
+              children: [
+                {
+                  label: "申请维修设备",
+                  value: data[0].checkNoEquipments,
+                  danwei: "",
+                },
+                {
+                  label: "完成维修设备",
+                  value: data[0].checkEquipments,
+                  danwei: "",
+                },
+                // {
+                //   label: "费用比",
+                //   value: weixiufeiyongbi || 0,
+                //   danwei: "%",
+                // },
+              ],
             },
             {
-              label: '费用比',
-              value: weixiufeiyongbi||0,
-              danwei:'%'
-            }
-          ]
-        },
-        {
-          title: '',
-          children: [
-            {
-              label: '设备完好率',
-              value: eIntactnessRate,
-              danwei:'%'
+              title: "",
+              children: [
+                {
+                  label: "设备完好率",
+                  value: eIntactnessRate,
+                  danwei: "%",
+                },
+                {
+                  label: "设备故障率",
+                  value: eBadRate,
+                  danwei: "%",
+                },
+                // {
+                //   label: '设备总值',
+                //   value:zichan,
+                //   danwei:'元'
+                // },
+              ],
             },
-            {
-              label: '设备故障率',
-              value: eBadRate,
-              danwei:'%'
-            },
-            // {
-            //   label: '设备总值',
-            //   value:zichan,
-            //   danwei:'元'
-            // },
-          ]
-        }
-       ];
-       //
-      this_.bottomData.xData =["计划核查设备","已核查设备"];
-      this_.bottomData.data.push(data[0].checkNoEquipments);
-      this_.bottomData.data.push(data[0].checkEquipments);
-      this_.bottomData.config.title ="核查设备柱状图";
-      this_.bottomData.config.idSelector ="main4";
-      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.data.push(data[0].weiHuNoEquipments);
-      this_.sheBeiweiHuData.data.push(data[0].weiHuEquipments);
-      this_.sheBeiweiHuData.config.title ="设备维护柱状图";
-      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 objRate = {};
-      objRate.name ="设备完好率";
-      objRate.value = eIntactnessRate;
-      this_.eBgRateData.data.push(objRate);
-      objRate ={};
-      objRate.value = eBadRate;
-      objRate.name = "设备故障率";
-      this_.eBgRateData.data.push(objRate);
-      this_.eBgRateData.color = ['#339933','#FF0033'];
-      this_.eBgRateData.config.title = "设备完好率分布";
-      this_.eBgRateData.config.idSelector = "main1";
-      //设备维护
-      let objweihu ={};
-      objweihu.name ="计划维护设备";
-      objweihu.value = data[0].weiHuNoEquipments;
-      this_.weiHuSheBeiData.data.push(objweihu);
-      objweihu ={};
-      objweihu.value =  data[0].weiHuEquipments;
-      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.value = data[0].checkNoEquipments;
-      this_.sheBeiHeChaData.data.push(objHeCha);
-      objHeCha ={};
-      objHeCha.value =  data[0].checkEquipments;
-      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.value = data[0].testNoEquipments;
-      this_.jianDingjiaoZhunSheBeiData.data.push(objJianding);
-      objJianding ={};
-      objJianding.value =  data[0].testEquipments;
-      objJianding.name = "已完成设备";
-      this_.jianDingjiaoZhunSheBeiData.data.push(objJianding);
-      this_.jianDingjiaoZhunSheBeiData.color = ['#5470c6','#38a838'];
-      this_.jianDingjiaoZhunSheBeiData.config.title = "设备检定校准分布";
-      this_.jianDingjiaoZhunSheBeiData.config.idSelector = "mainJianDing";
-      this_.$nextTick(()=>{
-        setTimeout(() => {
-					this_.$refs.middleCardCenter.getMiddleLeft();// hhhh xxxx
-          this_.$refs.sheBeiHeChaRef.getMiddleLeft();//
-          this_.$refs.jiandingRef.getMiddleLeft();
-				}, 1000)
-      })
-      objRate = {};
-      this_.topBarData = result;
-      }).catch(err=>{
-        console.log(err)
-      })
+          ];
+          //
+          this_.bottomData.xData = ["计划核查设备", "已核查设备"];
+          this_.bottomData.data.push(data[0].checkNoEquipments);
+          this_.bottomData.data.push(data[0].checkEquipments);
+          this_.bottomData.config.title = "核查设备柱状图";
+          this_.bottomData.config.idSelector = "main4";
+          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.data.push(data[0].weiHuNoEquipments);
+          this_.sheBeiweiHuData.data.push(data[0].weiHuEquipments);
+          this_.sheBeiweiHuData.config.title = "设备维护柱状图";
+          this_.sheBeiweiHuData.config.idSelector = "mainWeiHuZ";
+          this_.$nextTick(() => {
+            setTimeout(() => {
+              this_.$refs.zhuantaiEDataref.getMiddleLeft?this_.$refs.zhuantaiEDataref.getMiddleLeft():''; // hhhh xxxx
+              this_.$refs.bottomCardLeft.getMiddleLeft?this_.$refs.bottomCardLeft.getMiddleLeft():''; // hhhh xxxx
+              this_.$refs.sheBeiWeiHuDataref.getMiddleLeft?this_.$refs.sheBeiWeiHuDataref.getMiddleLeft():'';
+            }, 1000);
+          });
+
+          let objRate = {};
+          objRate.name = "设备完好率";
+          objRate.value = eIntactnessRate;
+          this_.eBgRateData.data.push(objRate);
+          objRate = {};
+          objRate.value = eBadRate;
+          objRate.name = "设备故障率";
+          this_.eBgRateData.data.push(objRate);
+          this_.eBgRateData.color = ["#339933", "#FF0033"];
+          this_.eBgRateData.config.title = "设备完好率分布";
+          this_.eBgRateData.config.idSelector = "main1";
+          //设备维护
+          let objweihu = {};
+          objweihu.name = "计划维护设备";
+          objweihu.value = data[0].weiHuNoEquipments;
+          this_.weiHuSheBeiData.data.push(objweihu);
+          objweihu = {};
+          objweihu.value = data[0].weiHuEquipments;
+          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.value = data[0].checkNoEquipments;
+          this_.sheBeiHeChaData.data.push(objHeCha);
+          objHeCha = {};
+          objHeCha.value = data[0].checkEquipments;
+          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.value = data[0].testNoEquipments;
+          this_.jianDingjiaoZhunSheBeiData.data.push(objJianding);
+          objJianding = {};
+          objJianding.value = data[0].testEquipments;
+          objJianding.name = "已完成设备";
+          this_.jianDingjiaoZhunSheBeiData.data.push(objJianding);
+          this_.jianDingjiaoZhunSheBeiData.color = ["#5470c6", "#38a838"];
+          this_.jianDingjiaoZhunSheBeiData.config.title = "设备检定校准分布";
+          this_.jianDingjiaoZhunSheBeiData.config.idSelector = "mainJianDing";
+          this_.$nextTick(() => {
+            setTimeout(() => {
+              this_.$refs.middleCardCenter.getMiddleLeft?this_.$refs.middleCardCenter.getMiddleLeft():''; // hhhh xxxx
+              this_.$refs.sheBeiHeChaRef.getMiddleLeft?this_.$refs.sheBeiHeChaRef.getMiddleLeft():""; //
+              this_.$refs.jiandingRef.getMiddleLeft?this_.$refs.jiandingRef.getMiddleLeft():'';
+            }, 1000);
+          });
+          objRate = {};
+          this_.topBarData = result;
+        })
+        .catch((err) => {
+          console.log(err);
+        });
     },
-    getMiddleLeftPieView(){
+    getMiddleLeftPieView() {
       // [ { value: 1048, name: 'Search Engine' },]
-      console.log(1)
+      console.log(1);
     },
     async getCarouselTable() {
       let this_ = this;
-      const sql = "select * from t_sbdj where she_bei_zhuang_ta ='禁止使用' or she_bei_zhuang_ta ='报废/停用'";
+      const sql =
+        "select * from t_sbdj where she_bei_zhuang_ta ='禁止使用' or she_bei_zhuang_ta ='报废/停用'";
       let data1 = [];
       await curdPost("sql", sql)
         .then((res) => {
@@ -440,7 +462,7 @@ export default {
       let this_ = this;
       const sql = `select she_bei_ming_chen,she_bei_bian_hao_ ,she_bei_zhuang_ku,COUNT(*) AS pinlv FROM t_mjsbsy GROUP BY she_bei_bian_hao_  AND create_time_ LIKE '%${this.month}%' ORDER BY pinlv DESC`;
       let data1 = [];
-      let res1 =[]
+      let res1 = [];
       await curdPost("sql", sql)
         .then((res) => {
           const result = res.variables.data;
@@ -452,21 +474,19 @@ export default {
             data1.push(item.pinlv);
             this_.shiyonglvConfig.data.push(data1);
           });
-          console.log(this_.shiyonglvConfig.data)
+          console.log(this_.shiyonglvConfig.data);
         })
         .catch((err) => {
           console.log(err);
         });
     },
-    getAllMonyInt (monyArr){
-      
+    getAllMonyInt(monyArr) {
       let mony = 0;
-      let filterMony = 0
-      monyArr.forEach(item=>{      
-           filterMony = item.feiyong*1;
-           mony +=filterMony    
-
-      })
+      let filterMony = 0;
+      monyArr.forEach((item) => {
+        filterMony = item.feiyong * 1;
+        mony += filterMony;
+      });
       return mony;
     },
   },
@@ -480,39 +500,39 @@ export default {
   position: absolute;
   color: #fff;
   z-index: 999;
-    #dv-full-screen-container {
-      background-image: url("./img/bg.png");
-      background-size: 100% 100%;
-      box-shadow: 0 0 3px blue;
-      display: flex;
-      flex-direction: column;
-    }
-    .main-content {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-    }
+  #dv-full-screen-container {
+    background-image: url("./img/bg.png");
+    background-size: 100% 100%;
+    box-shadow: 0 0 3px blue;
+    display: flex;
+    flex-direction: column;
+  }
+  .main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .block-left-right-content {
+    flex: 1;
+    display: flex;
+    margin-top: 0.8%;
+  }
+  .block-top-bottom-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding-left: 0.8%;
+  }
+  .block-top-content {
+    height: 55%;
+    display: flex;
+    flex-grow: 0;
+    box-sizing: border-box;
+    padding-bottom: 0.8%;
+  }
 
-    .block-left-right-content {
-      flex: 1;
-      display: flex;
-      margin-top: 0.8%;
-    }
-    .block-top-bottom-content {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      box-sizing: border-box;
-      padding-left: 0.8%;
-    }
-    .block-top-content {
-      height: 55%;
-      display: flex;
-      flex-grow: 0;
-      box-sizing: border-box;
-      padding-bottom: 0.8%;
-    }
-  
   .header {
     position: relative;
     width: 100%;
@@ -561,72 +581,74 @@ export default {
     .back {
       left: 75%;
     }
-  }  
-  .topCard{
+  }
+  .topCard {
     width: 100%;
     height: 20%;
     box-sizing: border-box;
     overflow: hidden;
   }
- .bottomCard{
-  height: 37%;
-  overflow: hidden;
-  box-sizing: border-box;
+  .bottomCard {
+    height: 38%;
+    overflow: hidden;
+    box-sizing: border-box;
   }
-  .middleCard{
-    height:40%;
+  .middleCard {
+    height: 40%;
     overflow: hidden;
     box-sizing: border-box;
   }
-  .middleCard,.bottomCard{
-    width: 100%;
-    margin-left: 30px;
+  .middleCard,
+  .bottomCard {
+    width: 96%;
+    // margin-left: 18px;
     // margin-top: 30px;
-    div{
-      display: inline-block;                                                        
+    margin: 0 auto;
+    overflow: hidden;
+    box-sizing: border-box;
+    div {
+      display: inline-block;
     }
-    .middleCardLeft{
-      width: 19%;
+    .middleCardLeft {
+      width: 20%;
       height: 100%;
+      overflow: hidden;
+      box-sizing: border-box;
     }
-    .middleCardCenter{
-      width: 19%;
+    .middleCardCenter {
+      width: 20%;
       height: 100%;
+      overflow: hidden;
+      box-sizing: border-box;
     }
-    .middleCardRight{
+    .middleCardRight {
       width: 28%;
+      height: 100%;
+      overflow: hidden;
+      box-sizing: border-box;
     }
-    .middleCardRight1{
-      width: 24%;
+    .middleCardRight1 {
+      height: 100%;
+      width: 26%;
+      overflow: hidden;
+      box-sizing: border-box;
     }
-    padding: 2px;
+    padding: 2px 0px;
   }
-  .bottomCard{
+  .bottomCard {
     display: flex;
-    div{
+    div {
       display: inline-block;
     }
-    .bottomCardLeft0,.bottomCardLeft,.bottomCardright{
+    .bottomCardLeft0 {
+      width: 100%;
+    }
+    .bottomCardLeft {
       width: 70%;
     }
-    // .bottomCardCenter0{
-
-    // }
-    // .bottomCardLeft{
-
-    //   margin-left: 30px;
-    // }
-    // .bottomCardCenter{
-    //   margin-left: 15px;
-    // }
-    // .bottomCardright{
-
-    //   margin-left: 15px;
-    // }
-    // .bottomCardright2{
-
-    //   margin-left: 15px;
-    // }
+    .bottomCardright {
+      width: 58%;
+    }
   }
 }
 .dv-decoration-10 {