设备看板

src/api/platform/spectaculars/lab.js

@@ -23,3 +23,14 @@ export function labsDashBoard(params) {
     params: params
   })
 }
+/**
+ *设备看板
+ * @param {*} params
+ */
+ export function equipDashBoard(params) {
+  return request({
+    url: DATA_URL() + '/report/statistic/equipDashBoard',
+    method: 'get',
+    // params: params
+  })
+}

src/views/business/deviceManagement/components/CarouselTabl.vue

@@ -1,12 +1,10 @@
 <template>
     <div style="width: 98%;height: 98%;overflow: hidden;padding: 1%;">
         <div class="title" style="vertical-align: top; height: 10%;font-size: 24px;color: white;font-weight:600;">{{ title }}</div>
-        <div v-show="showChart" style="width:100%;height: 88%;display: flex;justify-content: center;">
-            <dv-scroll-board :config="configData" style="width:100%;height:100%" />
-        </div>
-        <div v-if="!showChart" style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;">
-            <div style="color: #c7c7c7">目前无数据</div>
+        <div v-show="showChart" style="width:100%;height: 87%;display: flex;justify-content: center;">
+            <dv-scroll-board :key="scrollBoardKey" :config="configData" style="width:100%;height:100%" />
         </div>
+        <div v-show="!showChart" :class="$style.nullShow">暂无数据</div>
     </div>
 </template>
 
@@ -23,17 +21,24 @@ export default {
     },
     data () {
         return {
+            scrollBoardKey: 0,
             configData: {},
-            showChart: true
+            showChart: false
         }
     },
     watch: {
         value: {
             handler (newVal, oldVal) {
-                this.configData = { ...newVal }
+                if(newVal.data.length>0){
+                    this.configData = { ...newVal }
+                    this.scrollBoardKey++
+                    this.showChart = true
+                }else{
+                    this.shoshowChartw = false
+                }
             },
             deep: true,
-            immediate: true
+            // immediate: true
         }
     },
     mounted () {
@@ -47,4 +52,11 @@ export default {
 }
 </script>
 <style lang="scss" module>
+    .nullShow{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 18px;
+        height: 85%;
+    }
 </style>

src/views/business/deviceManagement/components/barCharto.vue

@@ -1,6 +1,10 @@
 <template>
-  <div class="statisticsPage" :style="{width:width,height:height}">
-      <div :id="'staff'+id" :style="{height:'100%'}"/>
+  <div :class="$style.statisticsPage" :style="{width:width,height:height}">
+      <div v-show="show" :id="'staff'+id" :style="{height:'100%'}"/>
+      <div v-show="!show" :style="{height:'100%'}">
+        <div style="height:8%;font-size:24px;font-weight: 600;"> {{ title }} </div>
+        <div :class="$style.nullShow">暂无数据</div>
+      </div>
   </div>
 </template>
 
@@ -38,6 +42,14 @@
       },
       data: {
         type: Array,
+      },
+      lineTF: {
+        type: Boolean,
+        default: false
+      },
+      colorIndex: {
+        type: Number,
+        default: 0
       }
     },
     data () {
@@ -47,53 +59,72 @@
           numOT: '1-3年',
           numTF: '3-5年',
           numF: '5年以上',
-          numAll: '设备总数',
+          // numAll: '设备总数',
           numR: '良好数',
           numS: '停用数',
           numP: '待处理',
           numC: '已完成',
           numJ: '计划数',
-          numW: '完成数',
+          numW: '完成数'
+        },
+        correspondenceUn:{
+          rate: '完成率'
         },
         // color: ['rgb(78,203,115)', 'rgb(251,211,55)', 'rgb(16,142,233)']
-        color: ['#5470c6', '#339933', '#FF0033', 'rgb(251,211,55)']
+        color: ['#5470c6', '#339933', '#FF0033', 'rgb(251,211,55)'],
+        show: false
       }
     },
     watch: {
         value: {
-            handler () {
-                this.drawLine()
+            handler (newVal) {
+                if(newVal.length>0){
+                  this.show = true
+                  setTimeout(() => {
+                    this.drawLine()
+                  }, 100)
+                }else{
+                  this.show = false
+                }  
             },
             deep: true
         }
     },
     mounted(){
-      setTimeout(() => {
-        this.drawLine()
-      }, 100);
+      // setTimeout(() => {
+      //   this.drawLine()
+      // }, 100);
     },
     methods: {
       drawLine(){
         const that = this
         let xData = []
         for (const key in this.value[0]) {
-          // if (this.value[0].hasOwnProperty.call(object, key)) {
+          if (this.correspondence.hasOwnProperty(key) || key === 'org') {
             xData.push(key)
-          // }
+          }
         }
-        
         let serArr = []
         for (let i = 1; i < xData.length; i++) {
           let ser = {
             name: '',
             type: 'bar',
-            barWidth: 10,
+            barWidth: xData.length>3?10:20,
             color: ''
           }
           ser.name = xData[i]
-          ser.color = this.color[i-1]
+          ser.color = this.color[i-1+this.colorIndex]
           serArr.push(ser)
         }
+        if(this.lineTF){
+          serArr.push({
+            name: 'rate',
+            type: 'line',
+            // barWidth: xData.length>3?10:20,
+            color: 'rgb(251,211,55)'
+          })
+        }
+        
         let staff = echarts.init(document.getElementById('staff'+this.id))
         let option
 
@@ -110,7 +141,7 @@
               color: '#fff'
             },
             formatter: function (name) {
-              return that.correspondence[name]
+              return that.correspondence[name] || that.correspondenceUn[name]
             }
           },
           grid: { // 让图表占满容器
@@ -130,8 +161,9 @@
             formatter: function (params) {
               let str = `${that.value[params[0].dataIndex].org}`
               params.forEach(item =>{
+                console.log(item,'iiiiiiiiiiiiii')
                 let nameNum = ''
-                nameNum = that.correspondence[item.seriesName]
+                nameNum = that.correspondence[item.seriesName] || that.correspondenceUn[item.seriesName]
                 str += `<br /> ${item.marker} ${nameNum}  ${item.data[item.seriesName]}`
               })
               return str
@@ -146,7 +178,29 @@
             axisLabel: {
               color: '#fff',
               interval: 0,
-              rotate: 20
+              // rotate: 20,
+              formatter: function (params) {
+                let str = ""
+                let paramsLen = params.length
+                let len = 5
+                let rowNumber = Math.ceil(paramsLen / len)
+                if (paramsLen > len) {
+                  for (let i = 0; i < rowNumber; i++) {
+                    let temp = ""
+                    let start = i * len
+                    let end = start + len
+                    if (i == rowNumber - 1) {
+                      temp = params.substring(start, paramsLen)
+                    } else {
+                      temp = params.substring(start, end) + "\n"
+                    }
+                    str += temp
+                  }
+                } else {
+                  str = params
+                }
+                return str
+              }
             }
           },
           yAxis: {
@@ -162,7 +216,7 @@
     }
   }
 </script>
-<style scoped>
+<style lang="scss" module>
   /* #zlmbPie:hover{
     transition: all 0.5s;
     transform:scale(1.03);
@@ -171,5 +225,12 @@
       box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
       padding: 1%;
       /* background-color: rgba(6, 30, 93, 0.5); */
+      .nullShow{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 18px;
+        height: 92%;
+      }
   }
 </style>

src/views/business/deviceManagement/components/getPieView.vue

@@ -1,18 +1,11 @@
 <template>
     <div class="statisticsPage" :style="{width:width,height:height}">
-        <div :id="'mid'+id" :style="{height:'100%'}"/>
-    </div>
-    <!-- <div class="pieView">
-        <div style="  height:14%;line-height:30px;text-align: left;padding-left: 10px;color: white;">
-            {{ title || "" }}
-        </div>
-        <div v-show="showChart" style="width: 100%; height: 86%; display: inline-block; overflow: hidden">
-            <div :id="'mid'+id" style="width: 100%; height: 95%; overflow: hidden" />
-        </div>
-        <div v-if="!showChart" style="background: #061237;width: 100%;height: 70%;display: flex;justify-content: center;align-items: center;">
-            <div style="color: #c7c7c7">目前无数据</div>
+        <div v-show="show" :id="'mid'+id" :style="{height:'100%'}"/>
+        <div v-show="!show"  :style="{height:'100%'}">
+            <div style="height:8%;font-size:24px;font-weight: 600;"> {{ title }} </div>
+            <div class="nullShow">暂无数据</div>
         </div>
-    </div> -->
+    </div>
 </template>
 
 <script>
@@ -21,7 +14,7 @@ export default {
     props: {
         value: {
             type: Array,
-            default: {}
+            default: []
         },
         width:{
             type:String,
@@ -45,22 +38,31 @@ export default {
     },
     data () {
         return {
-            showChart: true
+            show: false
         }
     },
     watch: {
         value: {
             handler (newVal, oldVal) {
-                this.getMiddleLeft()
+                if(newVal.length>0){
+                    this.show = true
+                    setTimeout(() => {
+                        this.getMiddleLeft()
+                    }, 100)
+                }else{
+                    this.show = false
+                }
+                
             },
-            deep: true
+            deep: true,
+            // immediate: true
         }
     },
     mounted () {
         const this_ = this
-        setTimeout(() => {
-            this_.getMiddleLeft()
-        }, 100);
+        // setTimeout(() => {
+        //     this_.getMiddleLeft()
+        // }, 100);
     },
     methods: {
         getMiddleLeft () {
@@ -131,6 +133,13 @@ export default {
 .statisticsPage{
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
     padding: 1%;
-    // background-color: rgba(6, 30, 93, 0.5);
+    .nullShow{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 18px;
+        height: 92%;
+    }
 }
+
 </style>

src/views/business/deviceManagement/components/pieChart.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="statisticsPage" :style="{width:width,height:height}">
-    <div :id="'pie'+id" :style="{height:'100%'}"/>
+    <div v-show="show" :id="'pie'+id" :style="{height:'100%'}"/>
+    <div v-show="!show"  :style="{height:'100%'}">
+      <div style="height:8%;font-size:24px;font-weight: 600;"> {{ title }} </div>
+      <div class="nullShow">暂无数据</div>
+    </div>
   </div>
 </template>
 
@@ -38,20 +42,28 @@
     },
     data () {
       return {
+        show: false
       }
     },
     watch: {
         value: {
-            handler () {
-                this.drawLine()
+            handler (newVal) {
+              if(newVal.length>0){
+                this.show = true
+                setTimeout(() => {
+                  this.drawLine()
+                }, 100)
+              }else{
+                this.show = false
+              }              
             },
             deep: true
         }
     },
     mounted(){
-      setTimeout(() => {
-        this.drawLine()
-      }, 100);
+      // setTimeout(() => {
+      //   this.drawLine()
+      // }, 100);
       
     },
     methods: {
@@ -79,9 +91,26 @@
             right: '0',
             top: '60',
             formatter: function (name) {
+                let strn = ""
                 let mid = that.value.find(i => i.name === name)
                 let rate = ((mid.value/totality)*100).toFixed(2)
-                let str = `{a|${name}} | {b|${rate}%}{c|${mid.value}}`
+                let leng = 4
+                let rowNumber = Math.ceil(name.length / leng)
+                if(name.length > leng){
+                  for (let i = 0; i < rowNumber; i++) {
+                    let temp = ""
+                    let start = i * leng
+                    let end = start + leng
+                    if (i == rowNumber - 1) {
+                      temp = name.substring(start, name.length)
+                    } else {
+                      temp = name.substring(start, end) + "\n"
+                    }
+                    strn += temp
+                  }
+                }
+
+                let str = `{a|${strn===""?name:strn}} | {b|${rate}%}{c|${mid.value}}`
                 return str
             },
             textStyle: {
@@ -92,7 +121,8 @@
                 a: {
                   width:80,
                   align: 'left',
-                  fontSize: 16
+                  fontSize: 16,
+                  lineHeight: 20
                 },
                 b: {
                   width:60,
@@ -111,7 +141,7 @@
           series: [
             {
               type: 'pie',
-              radius: ['45%', '70%'],
+              radius: ['35%', '55%'],
               center: ['20%', '55%'],
               label: {
                 show: false,
@@ -137,17 +167,6 @@
                     show: false,
                 },
               },
-              // emphasis: {
-              //   label: {
-              //     show: true,
-              //     fontSize: '12px'
-              //   },
-              //   itemStyle: {
-              //     shadowBlur: 10,
-              //     shadowOffsetX: 0,
-              //     shadowColor: 'rgba(0, 0, 0, 0.5)'
-              //   }
-              // }
             }
           ]
        }
@@ -156,14 +175,17 @@
     }
   }
 </script>
-<style scoped>
-  /* #zlmbPie:hover{
-    transition: all 0.5s;
-    transform:scale(1.03);
-  } */
+<style lang="scss" scoped>
   .statisticsPage{
       box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
       padding: 1%;
       /* background-color: rgba(6, 30, 93, 0.5); */
+      .nullShow{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 18px;
+        height: 92%;
+      }
   }
 </style>

src/views/business/deviceManagement/constants/simulated.js

@@ -75,25 +75,25 @@ export const lifeTimeData = [
 export const intactData = [
     {
         org: '生化组',
-        numAll: 60,
+        // numAll: 60,
         numR: 40,
         numS: 20
     },
     {
         org: '免疫组',
-        numAll: 60,
+        // numAll: 60,
         numR: 40,
         numS: 20
     },
     {
         org: '临检组',
-        numAll: 60,
+        // numAll: 60,
         numR: 40,
         numS: 20
     },
     {
         org: '微生物组',
-        numAll: 60,
+        // numAll: 60,
         numR: 40,
         numS: 20
     }
@@ -252,11 +252,11 @@ export const entiretyData = {
             outService: 10,
             scrap: 10
         },
-        year: {
-            add: 10,
-            outService: 10,
-            scrap: 10
-        }
+        // year: {
+        //     add: 10,
+        //     outService: 10,
+        //     scrap: 10
+        // }
     },
     calibrate:{
         sum: 50,

src/views/business/deviceManagement/index.vue

@@ -34,19 +34,19 @@
                         </dv-border-box-7>
                         <dv-decoration-2 :key="`line5`" :dur="6" style="width:100%;height:2.5%;" />
                         <dv-border-box-7 :color="dvColor" :backgroundColor="dvBackColor" style="width:100%;height:56.18%;">
-                            <bar-chart v-if="mergeData[3].numData.length>0" :title="mergeData[3].title" v-model="mergeData[3].numData" :width="'98%'" :height="'98%'" :id="2" />
+                            <bar-chart v-if="mergeData[3].numData.length>0" :title="mergeData[3].title" v-model="mergeData[3].numData" :colorIndex="1" :width="'98%'" :height="'98%'" :id="2" />
                         </dv-border-box-7>
                     </div>
                     <dv-decoration-2 :key="`line4`" :reverse="true" :dur="6" style="width:1%;height:100%;" />
                     <div class="area">
                         <dv-border-box-7 :color="dvColor" :backgroundColor="dvBackColor" style="width:100%;height:31.66%;">
-                            <bar-chart v-if="mergeData[4].numData.length>0" :title="mergeData[4].title" v-model="mergeData[4].numData" :width="'98%'" :height="'98%'" :id="3" />
+                            <bar-chart v-if="mergeData[4].numData.length>0" :title="mergeData[4].title" v-model="mergeData[4].numData" :lineTF="true" :width="'98%'" :height="'98%'" :id="3" />
                         </dv-border-box-7>
-                        <dv-decoration-2 :key="`line1`" :dur="6" style="width:100%;height:2.5%;" />
+                        <dv-decoration-2 :key="`6`" :dur="6" style="width:100%;height:2.5%;" />
                         <dv-border-box-7 :color="dvColor" :backgroundColor="dvBackColor" style="width:100%;height:31.66%;">
                             <bar-chart v-if="mergeData[5].numData.length>0" :title="mergeData[5].title" v-model="mergeData[5].numData" :width="'98%'" :height="'98%'" :id="4" />
                         </dv-border-box-7>
-                        <dv-decoration-2 :key="`line1`" :dur="6" style="width:100%;height:2.5%;" />
+                        <dv-decoration-2 :key="`line7`" :dur="6" style="width:100%;height:2.5%;" />
                         <dv-border-box-7 :color="dvColor" :backgroundColor="dvBackColor" style="width:100%;height:31.66%;">
                             <CarouselTabl v-if="mergeData[6].numData.data.length>0" :title="mergeData[6].title" v-model="mergeData[6].numData"/> 
                         </dv-border-box-7>
@@ -59,6 +59,7 @@
 <script>
 import screenfull from 'screenfull'
 import dataobj from './constants/simulated.js'
+import { equipDashBoard } from '@/api/platform/spectaculars/lab'
 export default {
     components: {
         barChart: () => import('./components/barCharto.vue'),
@@ -78,7 +79,7 @@ export default {
             level: '',
             title: '设备管理看板',
             fontSize: 18,
-            show: true,
+            // show: true,
             hoverClassAdd:'w',
             dvColor: ['rgb(22,47,98)', 'rgba(116, 142, 194, 1)'],
             dvBackColor: 'rgba(6, 30, 93, 0)',
@@ -137,7 +138,6 @@ export default {
         if (screenfull.isFullscreen) {
             screenfull.toggle()
         }
-        // this.clenUp()
     },
     methods: {
         initializeData () {
@@ -147,12 +147,28 @@ export default {
             this.fontSize = w >= 1600 ? 20 : w > 1366 && w < 1600 ? 18 : 16
         },
         updateAll () {
+            const loading = this.$loading({
+                lock: true,
+                background: 'rgba(0, 0, 0, 0.7)'
+            })
             this.initializeData()
-        },
-        updatePart () {
-
-        },
-        async fetchData () {
+            equipDashBoard().then(res => {
+                let data = res.data[0] || {}
+                this.mergeData[0].numData = data.distributionDataObj || []
+                this.mergeData[1].numData = data.numDistributionDataObj || []
+                this.mergeData[2].numData = data.lifeTimeData || []
+                this.mergeData[3].numData = data.intactData || []
+                this.mergeData[4].numData = []
+                if(data.completeData !== null && data.completeData.length>0){
+                    data.completeData.forEach(element => {
+                        this.mergeData[4].numData.push({...element,rate: element.numP!==0?(element.numC/element.numP).toFixed(2) * 100:0})
+                    })
+                }
+                this.mergeData[5].numData = data.verificationData || []
+                this.mergeData[6].numData.data = data.scrapData || []
+                this.mergeData[7].numData = data.entiretyData || []
+                loading.close()
+            })
         },
         goBack () {
             this.$router.back(-1)