当月订单

src/pages/proj/ProdCount.vue

@@ -40,7 +40,7 @@
             </div>
           </div>
           <div class="con3">
-            <div class="title"><span class="dotIncon"></span><span class="tltxt">人员月生产量</span></div>
+            <div class="title"><span class="dotIncon"></span><span class="tltxt">当月订单</span></div>
             <div class="item_content_1">
               <div id="echart_d2" style="width: 100%; height: 100%"></div>
             </div>
@@ -89,6 +89,47 @@ export default {
       materData: [],
       deviceData: [],
       PersonnelMonthlyProduction: [],
+      MonthlyWorkOrder: [
+        {guada_num: 1200, name: 'XC-0', order_num: 1655, residue_num: 455},
+        {guada_num: 1200, name: 'XC-1', order_num: 1655, residue_num: 455},
+        {guada_num: 1200, name: 'XC-2', order_num: 1655, residue_num: 455},
+        {guada_num: 1200, name: 'XC-3', order_num: 1655, residue_num: 455},
+        {guada_num: 1200, name: 'XC-4', order_num: 1655, residue_num: 455},
+        {guada_num: 1200, name: 'XC-5', order_num: 1655, residue_num: 455},
+        {guada_num: 1200, name: 'XC-6', order_num: 1655, residue_num: 455}
+      ],
+      // MonthlyWorkOrder: [
+      //   {
+      //     name: 'A1',
+      //     order_num: '150',
+      //     guada_num: '100',
+      //     residue_num: '50'
+      //   },
+      //   {
+      //     name: 'A2',
+      //     order_num: '130',
+      //     guada_num: '120',
+      //     residue_num: '10'
+      //   },
+      //   {
+      //     name: 'A3',
+      //     order_num: '300',
+      //     guada_num: '30',
+      //     residue_num: '270',
+      //   },
+      //   {
+      //     name: 'A4',
+      //     order_num: '150',
+      //     guada_num: '100',
+      //     residue_num: '50'
+      //   },
+      //   {
+      //     name: 'A5',
+      //     order_num: '300',
+      //     guada_num: '100',
+      //     residue_num: '200'
+      //   }
+      // ],
       ProductionTask: [],
       ShiftProductionList: [],
       resData: {}
@@ -133,7 +174,8 @@ export default {
       this.showNum1 = (res.DayShiftList[0].plan_qty + '').split('')
       this.showNum2 = (res.DayShiftList[0].real_qty + '').split('')
       this.showNum3 = (res.DayShiftList[0].unqualified_qty + '').split('')
-      this.PersonnelMonthlyProduction = res.PersonnelMonthlyProduction
+      // this.PersonnelMonthlyProduction = res.PersonnelMonthlyProduction
+      // this.MonthlyWorkOrder = res.MonthlyWorkOrder
       this.ProductionTask = res.ProductionTask
       this.ShiftProductionList = res.ShiftProductionList
       this.setEchart01()
@@ -323,10 +365,10 @@ export default {
       }
     },
     setEchart02 () {
-      let max = 0
+      let max = 1
-      this.PersonnelMonthlyProduction.map(el => {
+      this.MonthlyWorkOrder.map(el => {
-        if (Number(el.real_qty) >= Number(max)) {
+        if (Number(el.order_num) >= Number(max)) {
-          max = Number(el.real_qty)
+          max = Number(el.order_num)
         }
       })
       let option = {
@@ -337,14 +379,15 @@ export default {
           bottom: 0,
           containLabel: true
         },
-        // dataZoom: [
+        dataZoom: [
-        //   {
+          {
-        //     show: false, // 为true滚动条出现
+            show: false, // 为true滚动条出现
-        //     type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
+            type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
-        //     startValue: 0, // 从头开始。
+            orient: 'vertical',
-        //     endValue: 5 // end百分比显示范围，endValue具体显示几个数值
+            startValue: 0, // 从头开始。
-        //   }
+            endValue: 3 // end百分比显示范围，endValue具体显示几个数值
-        // ],
+          }
+        ],
         xAxis: {
           type: 'value',
           min: 0,
@@ -394,43 +437,130 @@ export default {
               fontSize: 14
             }
           },
-          data: this.PersonnelMonthlyProduction.map((it) => it.operator)
+          data: this.MonthlyWorkOrder.map((it) => it.name)
         },
         series: [
           {
+            name: '房产',
             type: 'bar',
-            barWidth: '16',
+            stack: '总量',
-            zlevel: 1,
+            barWidth: 30,
-            label: {
-              show: true,
-              position: 'right', // 位置
-              color: '#A7D6F4',
-              fontSize: 14,
-              distance: 15, // 距离
-              formatter: '{c}' // 这里是数据展示的时候显示的数据
-            },
             itemStyle: {
               normal: {
-                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                // color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                  {
+                //   {
-                    offset: 0,
+                //     offset: 0,
-                    color: '#2DB796'
+                //     // color: '#f6b643'
-                  },
+                //     color: '#ed7d39'
-                  {
+                //     // color: '#EAAD24'
-                    offset: 1,
+                //   },
-                    color: '#6BBBA8'
+                //   {
-                  }
+                //     offset: 1,
-                ], false)
+                //     color: '#ed7d39'
+                //     // color: '#EAAD24'
+                //   }
+                // ], false),
+                label: {
+                  color: '#fff',
+                  show: true,
+                  position: 'inside'
+                }
               }
             },
-            data: this.PersonnelMonthlyProduction.map((it) => it.real_qty)
+            // data: [8, 10, 20, 20, 10, 10, 20],
+            data: this.MonthlyWorkOrder.map((it) => it.guada_num)
+          },
+          {
+            name: '土地',
+            type: 'bar',
+            stack: '总量',
+            itemStyle: {
+              normal: {
+                // color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                //   {
+                //     offset: 0,
+                //     color: '#94d153'
+                //     // color: '#33CCCC'
+                //   },
+                //   {
+                //     offset: 1,
+                //     color: '#94d153'
+                //     // color: '#33CCCC'
+                //   }
+                // ], false),
+                label: {
+                  color: '#333',
+                  show: true,
+                  position: 'inside'
+                  // position: 'insideRight',
+                }
+              }
+            },
+            // data: [10, 20, 10, 10, 20, 20, 20],
+            data: this.MonthlyWorkOrder.map((it) => it.residue_num)
           }
+          // {
+          //   type: 'bar',
+          //   barWidth: '16',
+          //   zlevel: 1,
+          //   label: {
+          //     show: true,
+          //     position: 'right', // 位置
+          //     color: '#A7D6F4',
+          //     fontSize: 14,
+          //     distance: 15, // 距离
+          //     formatter: '{c}' // 这里是数据展示的时候显示的数据
+          //   },
+          //   itemStyle: {
+          //     normal: {
+          //       color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
+          //         {
+          //           offset: 0,
+          //           color: '#2DB796'
+          //         },
+          //         {
+          //           offset: 1,
+          //           color: '#6BBBA8'
+          //         }
+          //       ], false)
+          //     }
+          //   },
+          //   data: this.MonthlyWorkOrder.map((it) => it.order_num)
+          // },
+          // {
+          //   type: 'bar',
+          //   barWidth: '16',
+          //   zlevel: 1,
+          //   label: {
+          //     show: true,
+          //     position: 'right', // 位置
+          //     color: '#A7D6F4',
+          //     fontSize: 14,
+          //     distance: 15, // 距离
+          //     formatter: '{c}' // 这里是数据展示的时候显示的数据
+          //   },
+          //   itemStyle: {
+          //     normal: {
+          //       color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
+          //         {
+          //           offset: 0,
+          //           color: '#f6b643'
+          //         },
+          //         {
+          //           offset: 1,
+          //           color: '#ed7d39'
+          //         }
+          //       ], false)
+          //     }
+          //   },
+          //   data: this.MonthlyWorkOrder.map((it) => it.guada_num)
+          // }
         ]
       }
       let echart = document.getElementById('echart_d2')
       this.myCharts02 = this.$echarts.init(echart)
       this.myCharts02.setOption(option)
-      // this.autoMove(option)
+      this.autoMove(option)
       window.addEventListener('resize', () => {
         this.myCharts02.resize()
       })
@@ -444,7 +574,7 @@ export default {
           option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
           option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
         }
-        this.myCharts01.setOption(option)
+        this.myCharts02.setOption(option)
       }, 2000)
     }
   }