完善

src/views/workplace/backlog/NewWorkplaceBacklog.vue

@@ -88,16 +88,18 @@
             <div style="display:flex;justify-content: space-between;width:160px;height: 18px; font-size:16px;color: #555555; ">
               <div>维修费用类别统计</div>
             </div>
-            <div id="container-pie"></div>
+            <chart-view height="400px" :chartOption="chartOption1" />
           </div>
         </a-col>
         <a-col class="gutter-row" :span="12">
           <div style="height: 471px;background: #FFFFFF; padding:24px;">
-            <div style="display:flex;justify-content: space-between;width:190px;height: 18px; font-size:16px;color: #555555; margin-bottom:80px;">
+            <div style="display:flex;justify-content: space-between;width:190px;height: 18px; font-size:16px;color: #555555; margin-bottom:20px;">
               <div style="width: 7px;background: #4D86ED;"></div>
               <div>近一周每日产生维修单数</div>
             </div>
-            <div id="container-line"></div>
+
+            <chart-view height="360px" :chartOption="chartOption2" />
+
           </div>
         </a-col>
         <a-col class="gutter-row" :span="4">
@@ -318,26 +320,90 @@ export default {
       } else {
         return 'undifined'
       }
+    },
+    chartOption1 () {
+      return {
+        legend: {
+          top: '10%',
+          type: 'scroll'
+
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        series: [
+          {
+            type: 'pie',
+            center: ['50%', '50%'],
+            radius: [50, 100],
+            label: {
+              formatter: `{b}:{c}`,
+              textBorderColor: '#000',
+              textBorderWidth: 0,
+              fontSize: 16,
+              overflow: 'breakAll',
+              labelLine: {
+                length: 3
+              }
+            },
+
+            data: this.equipmentData
+          }
+        ]
+      }
+    },
+    chartOption2 () {
+      return {
+        // tooltip: {
+        //   trigger: 'axis',
+        //   axisPointer: {
+        //     type: 'shadow'
+        //   }
+        // },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        yAxis: {
+          type: 'value'
+        },
+        xAxis: {
+          type: 'category',
+          data: this.lineData.map(item => item.weekDayName)
+        },
+        series: [
+          {
+            name: '维修单数',
+            type: 'bar',
+            data: this.lineData.map(item => item.tempTotalNum),
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, // 开启显示
+                  position: 'top', // 在上方显示
+                  textStyle: { // 数值样式
+                    color: 'black',
+                    fontSize: 16
+                  }
+                }
+              }
+            }
+          }
+        ]
+      }
     }
   },
   created () {
     this.getdate()
-    console.log(this.date)
     this.getDict()
-    this.getInfo()
     this.toCalendar()
-  },
-  mounted () {
-  },
-  updated () {
-    console.log(11)
-    if (this.lineData.length > 0 && this.equipmentData.length > 0) {
-      this.$nextTick(function () {
-        console.log(1111)
-        this.getPieCharts('container-pie')
-        this.getLineCharts('container-line')
-      })
-    }
+    this.getInfo()
   },
   methods: {
     getdate () {
@@ -362,27 +428,7 @@ export default {
         alert('您的角色未赋予该权限')
         this.$router.push({ path: '/WorkplaceBacklog' })
       }
-      getWorkplaceBacklogWeekData(this.role).then(res => {
-        const data = res.data.reduce((pre, item) => {
-          pre.push({
-            week: item.weekDayName,
-            value: item.tempTotalNum
-          })
-          return pre
-        }, [])
-        this.lineData = data
-      })
-      getWorkplaceBacklogPie(this.role).then(res => {
-        const data = res.data.reduce((pre, item) => {
-          pre.push({
-            item: item.typeName,
-            count: item.fee,
-            percent: item.fee
-          })
-          return pre
-        }, [])
-        this.equipmentData = data
-      })
+
       getWorkplaceBacklogTopData(this.role).then(res => {
         this.topData = res.data
       })
@@ -396,6 +442,22 @@ export default {
       }).then(res => {
         this.information = res.data.rows
       })
+      getWorkplaceBacklogWeekData(this.role).then(res => {
+        this.lineData = res.data
+      })
+      getWorkplaceBacklogPie(this.role).then(res => {
+        const data = res.data.reduce((pre, item) => {
+          pre.push({
+            name: item.typeName,
+            value: item.fee
+          })
+          return pre
+        }, [])
+        this.$nextTick(() => {
+        })
+
+        this.equipmentData = data
+      })
     },
     handleView (record) {
       fetchArticle({ id: record.id }).then(res => {
@@ -403,88 +465,6 @@ export default {
         modal.base(res.data)
       })
     },
-    getPieCharts (id) {
-      this.chartPie && this.chartPie.destroy()// 防止点击搜索按钮新增一个
-      this.chartPie = new Chart({
-        container: id,
-        autoFit: true,
-        height: 400
-      })
-      this.chartPie.data(this.equipmentData)
-      this.chartPie.scale('count', {
-        nice: true
-      })
-      this.chartPie.coordinate('theta', {
-        radius: 0.6,
-        innerRadius: 0.5
-      })
-      this.chartPie.tooltip({
-        showTitle: false,
-        showMarkers: false,
-        itemTpl: `<li class="g2-tooltip-list-item">
-                     <span style="background-color:{color};" class="g2-tooltip-marker"></span>
-                     {name}: {value}
-                  </li>`
-      })
-      // 辅助文本
-      this.chartPie
-        .annotation()
-      this.chartPie
-        .interval()
-        .adjust('stack')
-        .position('percent')
-        .color('item')
-        .label('percent', (percent) => {
-          return {
-            content: (data) => {
-              return `${data.item}: ${percent}`
-            }
-          }
-        })
-        .tooltip('item*count', (item, count) => {
-          return {
-            name: item,
-            value: count
-          }
-        })
-      // this.chartPie.interaction('element-active')
-      this.chartPie.interaction('active-region')
-
-      this.chartPie.render()
-    },
-    getLineCharts (id) {
-      this.chartLine = new Chart({
-        container: id,
-        autoFit: true,
-        height: 300
-      })
-
-      this.chartLine.data(this.lineData)
-      this.chartLine.scale({
-
-        value: {
-          min: 0,
-          nice: true
-        }
-      })
-
-      this.chartLine.tooltip({
-        showCrosshairs: true, // 展示 Tooltip 辅助线
-        shared: true
-      })
-
-      this.chartLine.axis('value', {
-        label: {
-          formatter: (val) => {
-            return val
-          }
-        }
-      })
-      this.chartLine.interval().position('week*value').color('week')
-      this.chartLine.interaction('active-region')
-
-      this.chartLine.render()
-    },
     toCalendar () {
       const repairTips = cookie.get('repairTips')
       if (repairTips === '1') {

src/views/workplace/backlog/SbInfoWorkplaceBacklog.vue

@@ -84,7 +84,7 @@
                 <div>设备状态一览图</div>
               <!-- <div>设备总数100</div> -->
               </div>
-              <div id="container-pie"></div>
+              <chart-view height="400px" :chartOption="chartOption1" />
             </div>
           </a-col>
           <a-col class="gutter-row" :span="12">
@@ -93,7 +93,7 @@
                 <div style="width: 7px;background: #4D86ED;"></div>
                 <div>近一周设备故障统计（截止到今天的一周）</div>
               </div>
-              <div id="container-line"></div>
+              <chart-view height="360px" :chartOption="chartOption2" />
             </div>
           </a-col>
           <a-col class="gutter-row" :span="4">
@@ -201,6 +201,7 @@ import { fetchSbWorkplaceData } from '@/api/sb/info'
 import { fetchCustomFieldTemplateByRemark } from '@/api/customize/fieldTemplate'
 
 import { getCalendarNotice } from '@/api/repair/application-form'
+import cookie from 'vue-cookie'
 export default {
   name: 'SbInfoWorkplaceBacklog',
   components: {
@@ -213,20 +214,9 @@ export default {
     return {
       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 }
+
       ],
       lineData: [
-        { week: '周一', value: 3 },
-        { week: '周二', value: 4 },
-        { week: '周三', value: 7.5 },
-        { week: '周四', value: 5 },
-        { week: '周五', value: 4.9 },
-        { week: '周六', value: 6 },
-        { week: '周日', value: 7 }
       ],
       visible: true,
       allCount: 100,
@@ -336,15 +326,91 @@ export default {
       }
     }
   },
+  computed: {
+    chartOption1 () {
+      return {
+        legend: {
+          top: '10%',
+          type: 'scroll'
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        series: [
+          {
+            type: 'pie',
+            center: ['50%', '50%'],
+            radius: [50, 100],
+            label: {
+              formatter: `{b}:{c}`,
+              textBorderColor: '#000',
+              textBorderWidth: 0,
+              fontSize: 16,
+              overflow: 'breakAll',
+              labelLine: {
+                length: 3
+              }
+            },
+
+            data: this.equipmentData
+          }
+        ]
+      }
+    },
+    chartOption2 () {
+      return {
+        // tooltip: {
+        //   trigger: 'axis',
+        //   axisPointer: {
+        //     type: 'shadow'
+        //   }
+        // },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        yAxis: {
+          type: 'value'
+        },
+        xAxis: {
+          type: 'category',
+          data: this.lineData.map(item => item.week)
+        },
+        series: [
+          {
+            name: '故障数',
+            type: 'bar',
+            data: this.lineData.map(item => item.value),
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, // 开启显示
+                  position: 'top', // 在上方显示
+                  textStyle: { // 数值样式
+                    color: 'black',
+                    fontSize: 16
+                  }
+                }
+              }
+            }
+          }
+        ]
+      }
+    }
+  },
   created () {
     this.getDict()
     this.toCalendar()
-    // this.getData()
+    this.getData()
   },
   mounted () {
-    this.$nextTick(function () {
-      this.getData()
-    })
+
   },
   methods: {
     handleAdd (key) {
@@ -385,10 +451,6 @@ export default {
       this.typeDetailDict = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.WORKPLACE_BACKLOG_DETAIL_TYPE)
     },
     getData () {
-      console.log('测试开始1')
-      fetchSbWorkplaceData().then(res => {
-        this.getInfo(res.data)
-      })
       getArticlePage({
         pageNum: 1,
         pageSize: 10,
@@ -399,6 +461,17 @@ export default {
       }).then(res => {
         this.information = res.data.rows
       })
+      fetchSbWorkplaceData().then(res => {
+        this.record = res.data
+        this.equipmentData = res.data.pieDataList.map(item => {
+          return {
+            name: item.item,
+            value: item.count
+          }
+        })
+        this.lineData = res.data.lineDataList
+        console.log(res.data)
+      })
     },
     getInfo (data) {
       console.log('测试开始3')
@@ -406,7 +479,6 @@ export default {
       this.lineData = data.lineDataList
       this.getPieCharts('container-pie', this.equipmentData)
       this.getLineCharts('container-line', this.lineData)
-      this.record = data
     },
     handleView (record) {
       fetchArticle({ id: record.id }).then(res => {

src/views/workplace/backlog/StoreWorkplaceBacklog.vue

@@ -110,16 +110,16 @@
                 <div>备件类型数量统计</div>
               <!-- <div>设备总数100</div> -->
               </div>
-              <div id="container-pie"></div>
+              <chart-view height="400px" :chartOption="chartOption1" />
             </div>
           </a-col>
           <a-col class="gutter-row" :span="12">
             <div style="height: 471px;background: #FFFFFF; padding:24px;">
-              <div style="display:flex;justify-content: space-between;width:190px;height: 18px; font-size:16px;color: #555555; margin-bottom:80px;">
+              <div style="display:flex;justify-content: space-between;width:190px;height: 18px; font-size:16px;color: #555555; margin-bottom:20px;">
                 <div style="width: 7px;background: #4D86ED;"></div>
                 <div>近一周每日出入库数据</div>
               </div>
-              <div id="container-line"></div>
+              <chart-view height="360px" :chartOption="chartOption2" />
             </div>
           </a-col>
           <a-col class="gutter-row" :span="4">
@@ -226,6 +226,7 @@ import { STable } from '@/components'
 import { getWorkplaceBacklogUserPage, getWorkplaceBacklogTopData, getWorkplaceBacklogWeekData, getWorkplaceBacklogPie } from '@/api/workplace/backlog'
 import { getCalendarNotice } from '@/api/repair/application-form'
 import { Chart } from '@antv/g2'
+import cookie from 'vue-cookie'
 export default {
   name: 'NewWorkplaceBacklog',
   components: {
@@ -361,6 +362,99 @@ export default {
       } else {
         return 'undifined'
       }
+    },
+    chartOption1 () {
+      return {
+        legend: {
+          type: 'scroll',
+          top: '10%'
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        series: [
+          {
+            type: 'pie',
+            center: ['50%', '50%'],
+            radius: [50, 100],
+            label: {
+              formatter: `{b}:{c}`,
+              textBorderColor: '#000',
+              textBorderWidth: 0,
+              fontSize: 16,
+              overflow: 'breakAll',
+              labelLine: {
+                length: 3
+              }
+            },
+
+            data: this.equipmentData
+          }
+        ]
+      }
+    },
+    chartOption2 () {
+      return {
+        // tooltip: {
+        //   trigger: 'axis',
+        //   axisPointer: {
+        //     type: 'shadow'
+        //   }
+        // },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        yAxis: {
+          type: 'value'
+        },
+        xAxis: {
+          type: 'category',
+          data: this.lineData.inStoreDetailVOS.map(item => item.weekDayName)
+        },
+        series: [
+          {
+            name: '入库数',
+            type: 'bar',
+            data: this.lineData.inStoreDetailVOS.map(item => item.num),
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, // 开启显示
+                  position: 'top', // 在上方显示
+                  textStyle: { // 数值样式
+                    color: 'black',
+                    fontSize: 16
+                  }
+                }
+              }
+            }
+          },
+          {
+            name: '出库数',
+            type: 'bar',
+            data: this.lineData.outStoreDetailVOS.map(item => item.num),
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, // 开启显示
+                  position: 'top', // 在上方显示
+                  textStyle: { // 数值样式
+                    color: 'black',
+                    fontSize: 16
+                  }
+                }
+              }
+            }
+          }
+        ]
+      }
     }
   },
   created () {
@@ -370,14 +464,6 @@ export default {
   },
   mounted () {
   },
-  updated () {
-    if (this.lineData.length > 0 && this.equipmentData.length > 0) {
-      this.$nextTick(function () {
-        this.getPieCharts('container-pie', this.equipmentData)
-        this.getLineCharts('container-line', this.lineData)
-      })
-    }
-  },
   methods: {
     getDict () {
       this.typeDict = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.WORKPLACE_BACKLOG_TYPE)
@@ -404,36 +490,17 @@ export default {
         getWorkplaceBacklogPie(this.role),
         getWorkplaceBacklogTopData(this.role)
       ]).then(res => {
-        const data = res[0].data.inStoreDetailVOS.reduce((pre, item) => {
-          pre.push({
-            week: item.weekDayName,
-            value: item.num,
-            name: '入库'
-          })
-          return pre
-        }, [])
-        data.push(
-          ...res[0].data.outStoreDetailVOS.reduce((pre, item) => {
-            pre.push({
-              week: item.weekDayName,
-              value: item.num,
-              name: '出库'
-
-            })
-            return pre
-          }, [])
-        )
-        this.lineData = data
         const data2 = res[1].data.reduce((pre, item) => {
           pre.push({
-            item: item.name,
-            count: item.currentStock,
-            percent: item.currentStock
+            name: item.name,
+            value: item.currentStock
           })
           return pre
         }, [])
         this.equipmentData = data2
         this.topData = res[2].data
+        this.lineData = res[0].data
+        console.log(res[0].data)
       })
     },
     handleView (record) {
@@ -442,95 +509,6 @@ export default {
         modal.base(res.data)
       })
     },
-    getPieCharts (id, data) {
-      this.chartPie && this.chartPie.destroy()// 防止点击搜索按钮新增一个
-      this.chartPie = new Chart({
-        container: id,
-        autoFit: true,
-        height: 400
-      })
-      this.chartPie.data(data)
-      this.chartPie.scale('count', {
-        nice: true
-      })
-      this.chartPie.coordinate('theta', {
-        radius: 0.6,
-        innerRadius: 0.5
-      })
-      this.chartPie.tooltip({
-        showTitle: false,
-        showMarkers: false,
-        itemTpl: `<li class="g2-tooltip-list-item">
-                     <span style="background-color:{color};" class="g2-tooltip-marker"></span>
-                     {name}: {value}
-                  </li>`
-      })
-      // 辅助文本
-      this.chartPie
-        .annotation()
-      this.chartPie
-        .interval()
-        .adjust('stack')
-        .position('percent')
-        .color('item')
-        .label('percent', (percent) => {
-          return {
-            content: (data) => {
-              return `${data.item}: ${percent}`
-            }
-          }
-        })
-        .tooltip('item*count', (item, count) => {
-          return {
-            name: item,
-            value: count
-          }
-        })
-      // this.chartPie.interaction('element-active')
-      this.chartPie.interaction('active-region')
-
-      this.chartPie.render()
-    },
-    getLineCharts (id, data) {
-      this.chartLine = new Chart({
-        container: id,
-        autoFit: true,
-        height: 300
-      })
-
-      this.chartLine.data(data)
-      this.chartLine.scale({
-
-        value: {
-          min: 0,
-          nice: true
-        }
-      })
-
-      this.chartLine.tooltip({
-        showCrosshairs: true, // 展示 Tooltip 辅助线
-        shared: true
-      })
-
-      this.chartLine.axis('value', {
-        label: {
-          formatter: (val) => {
-            return val
-          }
-        }
-      })
-
-      this.chartLine.interval().position('week*value').color('name').adjust([
-        {
-          type: 'dodge',
-          marginRatio: 0
-        }
-      ])
-
-      this.chartLine.interaction('active-region')
-
-      this.chartLine.render()
-    },
     handleOk () {
       this.visible = true
       this.getDict()