完善

src/views/workplace/backlog/SbInfoWorkplaceBacklog.vue

@@ -5,29 +5,28 @@
         <a-col class="gutter-row" :span="8">
           <div class="gutter-box">
             <a-row type="flex" justify="space-between" style="flex:1; font-size:22px;font-weight: 500;color: #373737;">
-              <a-col>数量汇总</a-col>
+              <a-col>设备数量汇总</a-col>
               <a-col>{{ record.totalDNumber }}</a-col>
             </a-row>
             <a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
               <a-col >
                 <a-badge color="#E4007F"/>
-                <span style="color:#E4007F;">待调拨 &nbsp; {{ record.dbNumber }}</span>
+                <span style="color:#E4007F;">在用 &nbsp; {{ record.dbNumber }}</span>
               </a-col>
               <a-col >
                 <a-badge color="#5864FF"/>
-                <span style="color:#5864FF;">待报废 &nbsp; {{ record.bfNumber }}</span>
+                <span style="color:#5864FF;">报废中 &nbsp; {{ record.bfNumber }}</span>
 
               </a-col>
             </a-row>
             <a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
               <a-col >
                 <a-badge color="#F19149"/>
-                <span style="color:#F19149;">待停机 &nbsp; {{ record.stopNumber }}</span>
-
+                <span style="color:#F19149;">已停机 &nbsp; {{ record.stopNumber }}</span>
               </a-col>
               <a-col>
                 <a-badge color="#009944"/>
-                <span style="color:#009944;">待盘点 &nbsp; {{ record.pdNumber }}</span>
+                <span style="color:#009944;">已报废 &nbsp; {{ record.pdNumber }}</span>
               </a-col>
             </a-row>
           </div>
@@ -78,7 +77,7 @@
     </div>
     <div class="gutter-example">
       <a-row :gutter="[20,40]">
-        <a-col class="gutter-row" :span="6">
+        <a-col class="gutter-row" :span="8">
           <div style="height: 471px;background: #FFFFFF;padding:24px">
             <div style="display:flex;justify-content: space-between;height: 18px; font-size:16px;color: #555555; ">
               <div>设备状态一览图</div>
@@ -89,14 +88,14 @@
         </a-col>
         <a-col class="gutter-row" :span="12">
           <div style="height: 471px;background: #FFFFFF; padding:24px;">
-            <div style="justify-content: space-between;height: 18px; font-size:16px;color: #555555; margin-bottom:80px;">
+            <div style="justify-content: space-between;height: 18px; font-size:16px;color: #555555; margin-bottom:25px;">
               <div style="width: 7px;background: #4D86ED;"></div>
               <div>近一周设备故障统计（截止到今天的一周）</div>
             </div>
             <div id="container-line"></div>
           </div>
         </a-col>
-        <a-col class="gutter-row" :span="6">
+        <a-col class="gutter-row" :span="4">
           <div style="height: 471px;display:flex;flex-direction:column;justify-content: space-between">
             <div class="btn" style="background:linear-gradient(to right,#36B5FA,#26ECF5);">
               <my-icon type="icon-chukuguanli" style="font-size:58px;"/>
@@ -188,22 +187,22 @@ export default {
   },
   data () {
     return {
-      record: null,
+      record: {},
       equipmentData: [
-        { item: '使用', count: 40, percent: 0.4 },
-        { item: '维修', count: 21, percent: 0.21 },
-        { item: '在库', count: 17, percent: 0.17 },
-        { item: '调拨', count: 13, percent: 0.13 },
-        { item: '借出', count: 9, percent: 0.09 }
+        { item: '事例一', count: 40, percent: 0.4 },
+        { item: '事例二', count: 21, percent: 0.21 },
+        { item: '事例三', count: 17, percent: 0.17 },
+        { item: '事例四', count: 13, percent: 0.13 },
+        { item: '事例五', count: 9, percent: 0.09 }
       ],
       lineData: [
-        { day: '周一', num: 3 },
-        { day: '周二', num: 4 },
-        { day: '周三', num: 7.5 },
-        { day: '周四', num: 5 },
-        { day: '周五', num: 4.9 },
-        { day: '周六', num: 6 },
-        { day: '周日', num: 7 }
+        { week: '周一', value: 3 },
+        { week: '周二', value: 4 },
+        { week: '周三', value: 7.5 },
+        { week: '周四', value: 5 },
+        { week: '周五', value: 4.9 },
+        { week: '周六', value: 6 },
+        { week: '周日', value: 7 }
       ],
       allCount: 100,
       chartPie: null,
@@ -329,16 +328,16 @@ export default {
     getData () {
       console.log('测试开始1')
       fetchSbWorkplaceData().then(res => {
-        this.record = res.data
-        // this.equipmentData = JSON.parse(this.record.pieDataList)
-        // this.lineData = JSON.parse(this.record.lineDataList)
-        this.getInfo()
+        this.getInfo(res.data)
       })
     },
-    getInfo () {
+    getInfo (data) {
       console.log('测试开始3')
+      this.equipmentData = data.pieDataList
+      this.lineData = data.lineDataList
       this.getPieCharts('container-pie', this.equipmentData)
       this.getLineCharts('container-line', this.lineData)
+      this.record = data
     },
     getPieCharts (id, data) {
       this.chartPie && this.chartPie.destroy()// 防止点击搜索按钮新增一个
@@ -366,38 +365,6 @@ export default {
       // 辅助文本
       this.chartPie
         .annotation()
-        .text({
-          position: ['50%', '50%'],
-          content: '主机',
-          style: {
-            fontSize: 14,
-            fill: '#8c8c8c',
-            textAlign: 'center'
-          },
-          offsetY: -20
-        })
-        .text({
-          position: ['50%', '50%'],
-          content: '100',
-          style: {
-            fontSize: 20,
-            fill: '#8c8c8c',
-            textAlign: 'center'
-          },
-          offsetX: -10,
-          offsetY: 20
-        })
-        .text({
-          position: ['50%', '50%'],
-          content: '台',
-          style: {
-            fontSize: 14,
-            fill: '#8c8c8c',
-            textAlign: 'center'
-          },
-          offsetY: 20,
-          offsetX: 20
-        })
       this.chartPie
         .interval()
         .adjust('stack')
@@ -406,7 +373,7 @@ export default {
         .label('percent', (percent) => {
           return {
             content: (data) => {
-              return `${data.item}: ${percent * 100}`
+              return `${data.item}: ${percent}`
             }
           }
         })
@@ -418,9 +385,35 @@ export default {
         })
       // this.chartPie.interaction('element-active')
       this.chartPie.interaction('active-region')
+
       this.chartPie.render()
     },
     getLineCharts (id, data) {
+      this.chartLine && this.chartLine.destroy()// 防止点击搜索按钮新增一个
+      this.chartLine = new Chart({
+        container: id,
+        autoFit: true,
+        height: 400
+      })
+      this.chartLine.data(data)
+      this.chartLine.scale('维修次数', {
+        nice: true
+      })
+      this.chartLine.tooltip({
+        showMarkers: true,
+        shared: true
+      })
+      this.chartLine.interval().position('week*value')
+      this.chartLine.interaction('active-region')
+      this.chartLine.legend({
+        position: 'bottom'
+      })
+      this.chartLine.option('scrollbar', {
+        type: 'horizontal'
+      })
+      this.chartLine.render()
+    }
+    /*getLineCharts (id, data) {
       this.chartLine = new Chart({
         container: id,
         autoFit: true,
@@ -429,7 +422,7 @@ export default {
 
       this.chartLine.data(data)
       this.chartLine.scale({
-        day: {
+        week: {
           range: [0, 1]
         },
         value: {
@@ -443,18 +436,19 @@ export default {
         shared: true
       })
 
-      this.chartLine.axis('num', {
+      this.chartLine.axis('value', {
         label: {
           formatter: (val) => {
-            return val + 'k'
+            return val
           }
         }
       })
 
-      this.chartLine.area().position('day*num')
-      this.chartLine.line().position('day*num')
+      this.chartLine.area().position('week*value')
+      this.chartLine.line().position('week*value')
+
       this.chartLine.render()
-    }
+    }*/
   }
 }
 </script>