设备管理看板：设备资产金额

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

@@ -1,59 +1,59 @@
 <template>
-  <div class="statisticsPage" :style="{width:width,height:height}">
-    <!-- <div style="height:8%;font-size:28px;font-weight: 600;"> {{title}} </div> -->
-    <!-- <div style="height:90%;display:flex;justify-content: space-between;"> -->
-      <div :id="'staff'+id" :style="{height:'100%'}"/>
+    <div class="statisticsPage" :style="{width:width,height:height}">
+        <!-- <div style="height:8%;font-size:28px;font-weight: 600;"> {{title}} </div> -->
+        <!-- <div style="height:90%;display:flex;justify-content: space-between;"> -->
+        <div :id="'staff'+id" :style="{height:'100%'}" />
     <!-- </div> -->
-  </div>
+    </div>
 </template>
 
 <script>
-  import * as echarts from 'echarts'
-  import { getFormatDate } from '../utils/config.js'
-  export default {
+import * as echarts from 'echarts'
+import { getFormatDate } from '../utils/config.js'
+export default {
     components: {
     },
     props: {
-      value: {
-        type: Array,
-      },
-      width:{
-        type:String,
-        default:"100%"
-      },
-      height:{
-        type:String,
-        default: "100%"
-      },
-      id:{
-        type:Number,
-        default:0
-      },
-      click:{
-        type:String,
-        default:'true'
-      },
-      colorw:{
-        type:String,
-        default:'#fff'
-      },
-      title:{
-        type: String
-      },
-      data: {
-        type: Array,
-      }
+        value: {
+            type: Array
+        },
+        width: {
+            type: String,
+            default: '100%'
+        },
+        height: {
+            type: String,
+            default: '100%'
+        },
+        id: {
+            type: Number,
+            default: 0
+        },
+        click: {
+            type: String,
+            default: 'true'
+        },
+        colorw: {
+            type: String,
+            default: '#fff'
+        },
+        title: {
+            type: String
+        },
+        data: {
+            type: Array
+        }
     },
     data () {
-      return {
-        correspondence: {
-          numO: '1年以下',
-          numOT: '1-3年',
-          numTF: '3-5年',
-          numF: '5年以上',
-        },
-        color: ['rgb(78,203,115)', 'rgb(251,211,55)', 'rgb(16,142,233)']
-      }
+        return {
+            correspondence: {
+                numO: '1年以下',
+                numOT: '1-3年',
+                numTF: '3-5年',
+                numF: '5年以上'
+            },
+            color: ['rgb(78,203,115)', 'rgb(251,211,55)', 'rgb(16,142,233)']
+        }
     },
     watch: {
         value: {
@@ -63,114 +63,113 @@
             deep: true
         }
     },
-    mounted(){
-      setTimeout(() => {
-        this.drawLine()
-      }, 100);
+    mounted () {
+        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)) {
-            xData.push(key)
-          // }
-        }
-        
-        let serArr = []
-        for (let i = 1; i < xData.length; i++) {
-          let ser = {
-            name: '',
-            type: 'bar',
-            barWidth: 10,
-            color: ''
-          }
-          ser.name = xData[i]
-          ser.color = this.color[i-1]
-          serArr.push(ser)
-        }
-        let staff = echarts.init(document.getElementById('staff'+this.id))
-        let option
-        option = {
-          title: {
-            text: this.title,
-            left: 'left',
-            textStyle:{ fontSize:24,color: this.colorw }
-          },
-          grid: {
-            left: '3%',
-            right: '1%',
-            bottom: '20%',
-            top: '10%'
-          },
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'cross',
-              crossStyle: {
-                color: '#999'
-              }
-            },
-            formatter: function (params) {
-              let str = `${that.value[params[0].dataIndex].org}`
-              params.forEach(item =>{
-                let nameNum = ''
-                nameNum = that.correspondence[item.seriesName]
-                str += `<br /> ${item.marker} ${nameNum}  ${item.data[item.seriesName]}`
-              })
-              return str
-            }
-          },
-          legend: {
-            data: xData,
-            textStyle: {
-              color: '#fff'
-            },
-            icon: 'circle',
-            bottom: 0,
-            formatter: function (name) {
-              return that.correspondence[name]
-            }
-          },
-          dataset: {
-            dimensions: xData,
-            source: this.value
-          },
-          xAxis: {
-            type: 'category',
-            boundaryGap: true,
-            axisLabel: {
-                color: '#fff'
-            },
-            axisTick: {
-              alignWithLabel: true
+        drawLine () {
+            const that = this
+            const xData = []
+            for (const key in this.value[0]) {
+                // if (this.value[0].hasOwnProperty.call(object, key)) {
+                xData.push(key)
+                // }
             }
-          },
-          yAxis: {
-            type: 'value',
-            min:0,
-            axisLabel: {
-                color: '#fff',
-                formatter: function(value) {
-                  console.log(value)
-                  return (value+'').indexOf('.')===-1?value: ''
+
+            const serArr = []
+            for (let i = 1; i < xData.length; i++) {
+                const ser = {
+                    name: '',
+                    type: 'bar',
+                    barWidth: 10,
+                    color: ''
                 }
-            },
-            splitLine:{
-              show:true,
-              lineStyle:{
-                  type: [15,8],
-                  color: ['#fff'],
-              }
+                ser.name = xData[i]
+                ser.color = this.color[i - 1]
+                serArr.push(ser)
             }
-          },
-          series: serArr
-       };
-       option && staff.setOption(option);
-      },
+            const staff = echarts.init(document.getElementById('staff' + this.id))
+            const option = {
+                title: {
+                    text: this.title,
+                    left: 'left',
+                    textStyle: { fontSize: 24, color: this.colorw }
+                },
+                grid: {
+                    left: '3%',
+                    right: '1%',
+                    bottom: '20%',
+                    top: '10%'
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross',
+                        crossStyle: {
+                            color: '#999'
+                        }
+                    },
+                    formatter: function (params) {
+                        let str = `${that.value[params[0].dataIndex].org}`
+                        params.forEach(item => {
+                            let nameNum = ''
+                            nameNum = that.correspondence[item.seriesName]
+                            str += `<br /> ${item.marker} ${nameNum}  ${item.data[item.seriesName]}`
+                        })
+                        return str
+                    }
+                },
+                legend: {
+                    data: xData,
+                    textStyle: {
+                        color: '#fff'
+                    },
+                    icon: 'circle',
+                    bottom: 0,
+                    formatter: function (name) {
+                        return that.correspondence[name]
+                    }
+                },
+                dataset: {
+                    dimensions: xData,
+                    source: this.value
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: true,
+                    axisLabel: {
+                        color: '#fff'
+                    },
+                    axisTick: {
+                        alignWithLabel: true
+                    }
+                },
+                yAxis: {
+                    type: 'value',
+                    min: 0,
+                    axisLabel: {
+                        color: '#fff',
+                        formatter: function (value) {
+                            console.log(value)
+                            return (value + '').indexOf('.') === -1 ? value : ''
+                        }
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            type: [15, 8],
+                            color: ['#fff']
+                        }
+                    }
+                },
+                series: serArr
+            }
+            option && staff.setOption(option)
+        }
     }
-  }
+}
 </script>
 <style scoped>
   /* #zlmbPie:hover{

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

@@ -54,6 +54,10 @@ export default {
         stack: {
             type: Boolean,
             default: false
+        },
+        legendVal: {
+            type: Boolean,
+            default: true
         }
     },
     data () {
@@ -67,7 +71,8 @@ export default {
                 numP: '待处理',
                 numC: '已完成',
                 numJ: '计划数',
-                numW: '完成数'
+                numW: '完成数',
+                assets: '金额（万元）'
             },
             correspondenceUn: {
                 rate: '完成率'
@@ -154,6 +159,7 @@ export default {
                 legend: {
                     left: 'left',
                     top: '40',
+                    show: this.legendVal,
                     textStyle: {
                         color: '#fff'
                     },
@@ -206,7 +212,7 @@ export default {
                                     let temp = ''
                                     const start = i * len
                                     const end = start + len
-                                    if (i == rowNumber - 1) {
+                                    if (i === rowNumber - 1) {
                                         temp = params.substring(start, paramsLen)
                                     } else {
                                         temp = params.substring(start, end) + '\n'
@@ -225,7 +231,27 @@ export default {
                         color: '#fff',
                         min: 0,
                         formatter: function (value) {
-                            return (value + '').indexOf('.') === -1 ? value : ''
+                            const mid = (value + '').indexOf('.') === -1 ? value + '' : ''
+                            let str = ''
+                            const paramsLen = mid.length
+                            const len = 4
+                            const rowNumber = Math.ceil(paramsLen / len)
+                            if (paramsLen > len) {
+                                for (let i = 0; i < rowNumber; i++) {
+                                    let temp = ''
+                                    const start = i * len
+                                    const end = start + len
+                                    if (i === rowNumber - 1) {
+                                        temp = mid.substring(start, paramsLen)
+                                    } else {
+                                        temp = mid.substring(start, end) + '\n'
+                                    }
+                                    str += temp
+                                }
+                            } else {
+                                str = mid
+                            }
+                            return str
                         }
                     }
                     // interval: interval

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

@@ -152,6 +152,28 @@ export const verificationData = [
         numW: 40
     }
 ]
+export const originalAssets = [
+    {
+        org: '生化组',
+        assets: 60
+    },
+    {
+        org: '免疫组',
+        assets: 60
+    },
+    {
+        org: '临检组',
+        assets: 60
+    },
+    {
+        org: '微生物组',
+        assets: 60
+    },
+    {
+        org: '检验科',
+        assets: 60
+    }
+]
 export const scrapData = [
     [
         '微生物组',
@@ -289,5 +311,6 @@ export default {
     completeData,
     verificationData,
     scrapData,
-    entiretyData
+    entiretyData,
+    originalAssets
 }

src/views/business/deviceManagement/index.vue

@@ -40,7 +40,7 @@
                     <dv-decoration-2 :key="`line4`" :reverse="true" :dur="6" style="width:1%;height:100%;" />
                     <div class="area">
                         <dv-border-box-7 :color="dvColor" :background-color="dvBackColor" style="width:100%;height:31.66%;">
-                            <bar-chart v-if="mergeData[4].numData.length>0" :id="3" v-model="mergeData[4].numData" :title="mergeData[4].title" :line-t-f="true" :width="'98%'" :height="'98%'" />
+                            <bar-chart v-if="mergeData[4].numData.length>0" :id="3" v-model="mergeData[4].numData" :title="mergeData[4].title" :legend-val="false" :width="'98%'" :height="'98%'" />
                         </dv-border-box-7>
                         <dv-decoration-2 :key="`6`" :dur="6" style="width:100%;height:2.5%;" />
                         <dv-border-box-7 :color="dvColor" :background-color="dvBackColor" style="width:100%;height:31.66%;">
@@ -100,9 +100,13 @@ export default {
                     title: '设备状况统计',
                     numData: dataobj.intactData
                 },
+                // {
+                //     title: '设备维护完成情况',
+                //     numData: dataobj.completeData
+                // },
                 {
-                    title: '设备维护完成情况',
-                    numData: dataobj.completeData
+                    title: '设备资产金额情况（万元）',
+                    numData: dataobj.originalAssets
                 },
                 {
                     title: '设备检定/校准完成情况',
@@ -207,15 +211,24 @@ export default {
                 this.mergeData[2].numData = lifeTimeData
                 this.mergeData[3].numData = intactData
                 this.mergeData[4].numData = []
-                if (data.completeData !== null && data.completeData.length > 0) {
-                    data.completeData.forEach(element => {
+                // if (data.completeData !== null && data.completeData.length > 0) {
+                //     data.completeData.forEach(element => {
+                //         if (element.org.indexOf('综合') === -1) {
+                //             console.log((element.numC / element.numP).toFixed(4), (element.numC / element.numP).toFixed(4) * 100)
+                //             this.mergeData[4].numData.push({ ...element, rate: (element.numP !== 0 ? ((element.numC * 100) / element.numP).toFixed(2) : 0) + '%' })
+                //         }
+                //     })
+                // }
+                if (data.originalAssets !== null && data.originalAssets.length > 0) {
+                    data.originalAssets.forEach(element => {
                         if (element.org.indexOf('综合') === -1) {
-                            console.log((element.numC / element.numP).toFixed(4), (element.numC / element.numP).toFixed(4) * 100)
-                            this.mergeData[4].numData.push({ ...element, rate: (element.numP !== 0 ? ((element.numC * 100) / element.numP).toFixed(2) : 0) + '%' })
+                            this.mergeData[4].numData.push({ org: element.org, assets: element.assets })
                         }
                     })
                 }
+                console.log(this.mergeData[4].numData, 'this.mergeData[4].numData')
                 this.mergeData[5].numData = verificationData
+                // this.mergeData[5].numData = originalAssets
                 this.mergeData[6].numData.data = scrapDataList
                 const { upKeep, ...b } = data.entiretyData
                 this.mergeData[7].numData = b || []