fix:设备管理看板

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

@@ -8,6 +8,7 @@
 </template>
 
 <script>
+import { create } from "@/api/platform/job/job";
 export default {
   data() {
     return {};
@@ -21,6 +22,28 @@ export default {
       type: String,
       default: "",
     },
+    isup: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  watch: {
+    isup: {
+      async function(news, olds) {
+        console.log(news, olds, "心志");
+      },
+      immediate:true
+    },
+    info: {
+      async function(news, olds) {
+        console.log(news, olds, "心志");
+      },
+      // immediate:true,
+      deep:true
+    },
+  },
+  create() {
+    console.log(info, "create");
   },
 };
 </script>
@@ -30,6 +53,6 @@ export default {
   width: 100%;
   height: 100%;
   overflow: hidden;
-      box-sizing: border-box;
+  box-sizing: border-box;
 }
 </style>

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

@@ -1,14 +1,17 @@
 <template>
   <div id="top-bar">
     <div class="content">
-      <!-- <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="box">
             <div class="label">{{ v.label }}</div>
             <div class="count">
-              <div :style="{color:v.data.style.fill}" style="font-weight:bold;font-size: 27px;">{{v.value}}</div>
+              <div v-if=" v.label.includes('计划')||v.label.includes('申请')" :style="{color:'#9966FF'}" style="font-weight:bold;font-size: 27px;">{{v.value}}</div>
+              <div v-else-if="v.label.includes('报废/停用')" :style="{color:'#FF0066'}" style="font-weight:bold;font-size: 27px;">{{v.value}}</div>
+              <div v-else-if="v.label.includes('受限')" :style="{color:'#CCFF33'}" style="font-weight:bold;font-size: 27px;">{{v.value}}</div>
+              <div v-else-if="v.label.includes('已')||v.label.includes('完成')||v.label.includes('正常')||v.label.includes('率')" :style="{color:'#00b56a'}" style="font-weight:bold;font-size: 27px;">{{v.value}}</div>
+              <div v-else :style="{color:'#66CCCC'}" style="font-weight:bold;font-size: 27px;">{{v.value}}</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>
@@ -37,9 +40,10 @@ export default {
     return {
       topBarData: [],
       fontColor: [
-        "#00b56a",
-        "#00b56a",
-        "#00b56a",
+        "#00b56a",//绿色
+        "#CCFF33",//黄色
+        "#9966FF",//蓝色
+        "#FF0066",//红色
         "#00b56a",
         "#00b56a",
         "#00b56a",
@@ -87,20 +91,14 @@ export default {
 </script>
 <style lang="scss" scoped>
 .content{
-  height: 82%;
+  height: 100%;
   width: 100%;
-  // background-color: rgba(6, 30, 93, 0.5);
-  // .title{
-  //   // width: 100%;
-  //   margin: 20px 2%;
-    
-  // }
 }
 .bar {
   position: relative;
   margin: 20px 2%;
   width: 96%;
-  height: 150px;
+  height: 90%;
   display: flex;
   justify-content: space-between;
   align-items: center;

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

@@ -25,14 +25,14 @@
             <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">
+            <!-- <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>
+            </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="设备使用记录" />
+              <CarouselTabl v-if="MiddleLeftPieViewList.data.length" :info="shiyonglvConfig" title="设备使用记录" isup=isup />
             </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">
@@ -52,8 +52,8 @@
             </div> -->
           </div>
           <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%">
+          <div style="width:49%;display:flex;overflow: hidden;">
+            <div style="width:40%">
               <zhuzhuangtu v-if="zhuantaiEData.data.length" :info="zhuantaiEData" ref="zhuantaiEDataref" />
             </div>
             <dv-decoration-2 v-if="jianDingjiaoZhunSheBeiData.data.length" :reverse="true" style="width:4%;height:100%;" />
@@ -63,7 +63,7 @@
 
           </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 style="width:2%;display:flex;overflow: hidden;">
             <!-- <div class="bottomCardLeft">
               <middleCard v-if="sheBeiHeChaData.data.length" :info="sheBeiHeChaData" ref="sheBeiHeChaRef" />
             </div> -->
@@ -73,7 +73,6 @@
             </div>
           </div>
 
-
         </div>
       </dv-border-box-1>
     </dv-full-screen-container>
@@ -97,6 +96,7 @@ export default {
   data() {
     const d = new Date();
     return {
+      isup: false,
       titleName: "设备管理看板",
       year: d.toJSON().slice(0, 4),
       month: d.toJSON().slice(0, 7),
@@ -131,13 +131,13 @@ export default {
         header: ["设备名称", "设备编号", "规格型号", "设备状态"],
         data: [],
         columnWidth: ["100", "110", "85", "85"],
-        rowNum: 4,
+        rowNum: 6,
       },
       shiyonglvConfig: {
-        header: ["设备名称", "设备状态", "频率"],
+        header: ["设备名称", "使用时间", "设备状态", "频率"],
         data: [],
-        columnWidth: ["120", "120", "50"],
-        rowNum: 4,
+        columnWidth: ["120", "120", "120", "50"],
+        rowNum: 6,
       },
       zichan: 0,
       loading: true,
@@ -147,7 +147,7 @@ export default {
     if (screenfull.isEnabled && !screenfull.isFullscreen) {
       this.allView();
     }
-    this.updateAll();
+    this.createAll();
   },
   beforeDestroy() {
     if (screenfull.isFullscreen) {
@@ -162,12 +162,19 @@ export default {
     goBack() {
       this.$router.back(-1);
     },
+    createAll() {
+      this.getCarouselShiYonglvTable();
+      this.getTopBarData();
+      this.getCarouselTable();
+    },
     updateAll(e) {
       // this.getSheBeiMony();
+      this.getCarouselShiYonglvTable();
       this.getTopBarData();
-      this.getMiddleLeftPieView();
+      // this.getMiddleLeftPieView();
       this.getCarouselTable();
-      this.getCarouselShiYonglvTable();
+      this.$forceUpdate();
+      // location.reload()
       // this.getbottomData();
     },
     async getTopBarData() {
@@ -190,7 +197,7 @@ export default {
         const data = res.variables.data;
         querennfeiyong = this_.getAllMonyInt(data);
       });
-      let weixiufeiyongbi = shenqinngfeiyong / querennfeiyong;
+      // let weixiufeiyongbi = shenqinngfeiyong / querennfeiyong;
       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  
@@ -206,7 +213,6 @@ export default {
       (select count(*) as limitedEquipments  from t_sbdj where she_bei_zhuang_ta ='限制使用') as g,
       (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;
@@ -216,21 +222,22 @@ export default {
               (data[0].goodEquipments / data[0].Equipments).toFixed(3) + ""
             ).slice(2, 4)
           );
+          this_.MiddleLeftPieViewList.data = [];
           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 = "备用设备";
+          obj.name = "正常设备数";
           this_.MiddleLeftPieViewList.data.push(obj);
           obj = {};
           obj.value = data[0].scrapEquipments;
           obj.name = "停用/报废";
+          obj = {};
+          obj.value = data[0].limitedEquipments;
+          obj.name = "备用设备数";
+          this_.MiddleLeftPieViewList.data.push(obj);
           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(() => {
@@ -243,28 +250,29 @@ export default {
               title: "",
               children: [
                 {
-                  label: "设备总数",
+                  label: "设备数总数",
                   value: data[0].Equipments,
                   danwei: "",
                 },
                 {
-                  label: "新增设备",
+                  label: "新增设备数",
                   value: data[0].addEquipments,
                   danwei: "",
                 },
                 {
-                  label: "正常设备",
+                  label: "正常设备数",
                   value: data[0].goodEquipments,
                   danwei: "",
                 },
+
                 {
-                  label: "报废/停用设备",
-                  value: data[0].scrapEquipments,
+                  label: "受限设备数",
+                  value: data[0].limitedEquipments,
                   danwei: "",
                 },
                 {
-                  label: "受限设备",
-                  value: data[0].limitedEquipments,
+                  label: "报废/停用设备数",
+                  value: data[0].scrapEquipments,
                   danwei: "",
                 },
               ],
@@ -273,12 +281,12 @@ export default {
               title: "",
               children: [
                 {
-                  label: "计划维护设备",
+                  label: "计划维护设备数",
                   value: data[0].weiHuNoEquipments,
                   danwei: "",
                 },
                 {
-                  label: "已维护设备",
+                  label: "已维护设备数",
                   value: data[0].weiHuEquipments,
                   danwei: "",
                 },
@@ -288,12 +296,12 @@ export default {
               title: "",
               children: [
                 {
-                  label: "计划检定/校准设备",
+                  label: "计划检定/校准设备数",
                   value: data[0].testNoEquipments,
                   danwei: "",
                 },
                 {
-                  label: "已检定/校准设备",
+                  label: "已检定/校准设备数",
                   value: data[0].testEquipments,
                   danwei: "",
                 },
@@ -308,12 +316,12 @@ export default {
               title: "",
               children: [
                 {
-                  label: "申请维修设备",
+                  label: "申请维修设备数",
                   value: data[0].checkNoEquipments,
                   danwei: "",
                 },
                 {
-                  label: "完成维修设备",
+                  label: "完成维修设备数",
                   value: data[0].checkEquipments,
                   danwei: "",
                 },
@@ -346,31 +354,37 @@ 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 = "核查设备柱状图";
+          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.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 = "设备维护柱状图";
           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);
+            // 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 = {};
@@ -382,19 +396,19 @@ export default {
           objRate.name = "设备故障率";
           this_.eBgRateData.data.push(objRate);
           this_.eBgRateData.color = ["#339933", "#FF0033"];
-          this_.eBgRateData.config.title = "设备完好率分布";
-          this_.eBgRateData.config.idSelector = "main1";
+          // 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.title = "设备维护完成图";
           this_.weiHuSheBeiData.config.idSelector = "mainWeiHu";
           //设备核查
           let objHeCha = {}; //核查改维修
@@ -403,30 +417,34 @@ export default {
           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 = "设备检定校准分布";
+          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);
-          });
+          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;
         })
@@ -434,10 +452,10 @@ export default {
           console.log(err);
         });
     },
-    getMiddleLeftPieView() {
-      // [ { value: 1048, name: 'Search Engine' },]
-      console.log(1);
-    },
+    // getMiddleLeftPieView() {
+    //   // [ { value: 1048, name: 'Search Engine' },]
+    //   console.log(1);
+    // },
     async getCarouselTable() {
       let this_ = this;
       const sql =
@@ -459,27 +477,47 @@ export default {
           console.log(err);
         });
     },
+
     async getCarouselShiYonglvTable() {
       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`;
+      const sql = `select she_bei_ming_chen,she_bei_bian_hao_ ,create_time_,she_bei_zhuang_ku,COUNT(*) AS pinlv FROM t_mjsbsy GROUP BY she_bei_bian_hao_  HAVING create_time_ LIKE '${this.month}%' ORDER BY pinlv DESC`;
+      console.log(sql, "设备使用");
       let data1 = [];
       let res1 = [];
+      this_.shiyonglvConfig.data = [];
       await curdPost("sql", sql)
         .then((res) => {
           const result = res.variables.data;
           result.forEach((item) => {
             data1 = [];
             data1.push(item.she_bei_ming_chen);
-            // data1.push(item.she_bei_bian_hao_);
+            data1.push(this_.timestampToTime(item.create_time_ / 1000));
             data1.push(item.she_bei_zhuang_ku);
             data1.push(item.pinlv);
             this_.shiyonglvConfig.data.push(data1);
+            // this_.$forceUpdate()
           });
-          console.log(this_.shiyonglvConfig.data);
+
+          // console.log(this_.shiyonglvConfig.data);
         })
         .catch((err) => {
           console.log(err);
         });
+      this.isup = true;
+    },
+    timestampToTime(timestamp) {
+      var date = new Date(timestamp * 1000);
+      var Y = date.getFullYear() + "-";
+      var M =
+        (date.getMonth() + 1 < 10
+          ? "0" + (date.getMonth() + 1)
+          : date.getMonth() + 1) + "-";
+      var D =
+        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
+      var h = date.getHours() + ":";
+      var m = date.getMinutes() + ":";
+      var s = date.getSeconds();
+      return Y + M + D;
     },
     getAllMonyInt(monyArr) {
       let mony = 0;
@@ -537,7 +575,7 @@ export default {
   .header {
     position: relative;
     width: 100%;
-    height: 9%;
+    height: 10%;
     display: flex;
     justify-content: space-between;
     flex-shrink: 0;
@@ -611,26 +649,26 @@ export default {
       display: inline-block;
     }
     .middleCardLeft {
-      width: 20%;
-      height: 100%;
-      overflow: hidden;
-      box-sizing: border-box;
-    }
-    .middleCardCenter {
-      width: 20%;
+      width: 28%;
       height: 100%;
       overflow: hidden;
       box-sizing: border-box;
     }
+    // .middleCardCenter {
+    //   width: 20%;
+    //   height: 100%;
+    //   overflow: hidden;
+    //   box-sizing: border-box;
+    // }
     .middleCardRight {
-      width: 28%;
+      width: 34%;
       height: 100%;
       overflow: hidden;
       box-sizing: border-box;
     }
     .middleCardRight1 {
       height: 100%;
-      width: 26%;
+      width: 34%;
       overflow: hidden;
       box-sizing: border-box;
     }
@@ -648,7 +686,7 @@ export default {
       width: 70%;
     }
     .bottomCardright {
-      width: 58%;
+      width: 56%;
     }
   }
 }