获取尺寸

src/assets/js/mork2.js

@@ -8,6 +8,7 @@ export const homepageDataLeft = () => {
       {
         // 物料编码
         'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
+        'materialName': '物料一',
         // 需生产
         'plan': 14,
         // 已生产
@@ -16,6 +17,7 @@ export const homepageDataLeft = () => {
       {
         // 物料编码
         'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
+        'materialName': '物料二',
         // 需生产
         'plan': 14,
         // 已生产
@@ -24,6 +26,7 @@ export const homepageDataLeft = () => {
       {
         // 物料编码
         'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
+        'materialName': '物料三',
         // 需生产
         'plan': 14,
         // 已生产
@@ -32,6 +35,7 @@ export const homepageDataLeft = () => {
       {
         // 物料编码
         'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
+        'materialName': '物料四',
         // 需生产
         'plan': 14,
         // 已生产
@@ -40,6 +44,25 @@ export const homepageDataLeft = () => {
       {
         // 物料编码
         'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
+        'materialName': '物料五',
+        // 需生产
+        'plan': 14,
+        // 已生产
+        'real': 16
+      },
+      {
+        // 物料编码
+        'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
+        'materialName': '物料六',
+        // 需生产
+        'plan': 14,
+        // 已生产
+        'real': 16
+      },
+      {
+        // 物料编码
+        'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
+        'materialName': '物料七',
         // 需生产
         'plan': 14,
         // 已生产
@@ -138,8 +161,37 @@ export const homepageDataLeft = () => {
       {
         // 物料编码
         'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
+        'materialName': '物料一',
         // 数量
-        'qty': 0
+        'qty': 100
+      },
+      {
+        // 物料编码
+        'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
+        'materialName': '物料二',
+        // 数量
+        'qty': 100
+      },
+      {
+        // 物料编码
+        'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
+        'materialName': '物料三',
+        // 数量
+        'qty': 100
+      },
+      {
+        // 物料编码
+        'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
+        'materialName': '物料四',
+        // 数量
+        'qty': 100
+      },
+      {
+        // 物料编码
+        'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
+        'materialName': '物料五',
+        // 数量
+        'qty': 100
       }
     ]
   }

src/pages/Setup.vue

@@ -44,6 +44,7 @@
               </div>
             </div>
             <button class="btn" @click="_config">配置</button>
+            <!-- <button class="btn" @click="getCc">获取尺寸</button> -->
             <!-- <div class="submit"><input type="submit" value="配  置" class="btn" @click="_config"></div> -->
           </div>
         </div>
@@ -77,6 +78,11 @@ export default {
     document.body.removeAttribute('class', 'login_bg')
   },
   methods: {
+    getCc () {
+      const screenWidth = window.screen.width
+      const screenHeight = window.screen.height
+      alert('宽：' + screenWidth + ';' + '高：' + screenHeight + ';')
+    },
     change (e) {
       this.index = e
     },

src/pages/modules/new/left/left.vue

@@ -71,13 +71,21 @@
                 <div class="title_wraper">
                     <p>库存量监控</p>
                 </div>
-                <div class="content_wraper"></div>
+                <div class="content_wraper">
+                  <div class="echart_wraper">
+                      <div id="new_home_echart_4" style="width: 100%; height: 100%;"></div>
+                  </div>
+                </div>
             </div>
             <div class="l_item_wraper">
                 <div class="title_wraper">
                     <p>历史分析</p>
                 </div>
-                <div class="content_wraper"></div>
+                <div class="content_wraper">
+                  <div class="echart_wraper">
+                      <div id="new_home_echart_5" style="width: 100%; height: 100%;"></div>
+                  </div>
+                </div>
             </div>
         </div>
     </div>
@@ -93,9 +101,12 @@ export default {
       todayProduction: {}, // 今日生产
       todayMix: [], // 当日混料
       todaySort: [], // 当日成品
+      inventory: [], // 库存量监控
       myCharts1: '',
       myCharts2: '',
-      myCharts3: ''
+      myCharts3: '',
+      myCharts4: '',
+      myCharts5: ''
     }
   },
   created () {
@@ -116,9 +127,11 @@ export default {
       this.todayProduction = res.todayProduction
       this.todayMix = [...res.todayMix]
       this.todaySort = [...res.todaySort]
+      this.inventory = [...res.inventory]
       this.setEchart1()
       this.setEchart2()
       this.setEchart3()
+      this.setEchart4()
     },
     setEchart1 () {
       let value = Number(this.todayProduction.orderFulfillmentRate.real) / Number(this.todayProduction.orderFulfillmentRate.plan)
@@ -225,12 +238,9 @@ export default {
           type: 'pie',
           radius: ['58%', '58.5%'],
           startAngle: 225,
-          hoverAnimation: false,
           legendHoverLink: false,
           labelLine: {
-            normal: {
-              show: false
-            }
+            show: false
           },
           data: [{
             value: 100,
@@ -245,7 +255,6 @@ export default {
           startAngle: 0,
           endAngle: 359.9,
           splitNumber: 18,
-          hoverAnimation: false,
           axisTick: {
             show: false
           },
@@ -293,7 +302,7 @@ export default {
       let barData1 = []
       let barData2 = []
       this.todayMix.map(el => {
-        barName.push(el.materialCode)
+        barName.push(el.materialName)
         barData1.push(el.plan)
         barData2.push(el.real)
       })
@@ -325,17 +334,14 @@ export default {
           axisLine: {
             show: true,
             lineStyle: {
-              width: 2,
+              width: 1,
               color: '#8FABBF'
             }
           },
           axisLabel: {
             interval: 0,
-            textStyle: {
-              color: '#8FABBF',
-              fontSize: 16
-            }
-            // rotate: 50
+            color: '#8FABBF',
+            fontSize: 16
           },
           data: barName
         },
@@ -345,21 +351,18 @@ export default {
           axisLine: {
             show: false
           },
-          splitNumber: 2,
+          splitNumber: 4,
           axisTick: {
             show: false
           },
           axisLabel: {
-            textStyle: {
-              color: '#8FABBF',
-              fontSize: 14
-            }
+            color: '#8FABBF',
+            fontSize: 14
           },
           splitLine: {
             show: true,
             lineStyle: {
-              type: [8, 4],
-              dashOffset: 4,
+              type: [4, 3],
               color: '#8FABBF'
             }
           }
@@ -368,31 +371,28 @@ export default {
           {
             name: '需生产',
             type: 'pictorialBar',
-            barWidth: '55%',
+            barWidth: '75%',
             // symbolOffset: [-10, 0],
             itemStyle: {
-              normal: {
-                color: {
-                  type: 'linear',
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: '#115A9C' // 0% 处的颜色
-                    },
-                    {
-                      offset: 0.8,
-                      color: '#115A9C' // 100% 处的颜色
-                    }
-                  ],
-                  globalCoord: false // 缺省为 false
-                }, // 渐变颜色
-                borderColor: '#09F6FF',
-                borderWidth: 3
-              }
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(255, 255, 255, 0.6)' // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(255, 255, 255, 0.1)' // 100% 处的颜色
+                  }
+                ]
+              },
+              borderColor: '#fff',
+              borderWidth: 3
             },
             symbol:
               'path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z',
@@ -401,49 +401,59 @@ export default {
           {
             name: '已生产',
             type: 'pictorialBar',
-            barWidth: '55%',
-            barGap: '-50%',
+            barWidth: '75%',
+            barGap: '-65%',
             itemStyle: {
-              normal: {
-                color: {
-                  type: 'linear',
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: '#115A9C' // 0% 处的颜色
-                    },
-                    {
-                      offset: 0.8,
-                      color: '#115A9C' // 100% 处的颜色
-                    }
-                  ],
-                  globalCoord: false // 缺省为 false
-                }, // 渐变颜色
-                borderColor: '#09F6FF',
-                borderWidth: 3
-              }
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(0, 0, 199, 0.6)' // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0, 0, 199, 0.1)' // 100% 处的颜色
+                  }
+                ]
+              }, // 渐变颜色
+              borderColor: '#fff',
+              borderWidth: 3
             },
             symbol:
               'path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z',
             data: barData2
           }
+        ],
+        dataZoom: [
+          {
+            xAxisIndex: 0, // 这里是从X轴的0刻度开始
+            show: false, // 是否显示滑动条，不影响使用
+            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+            startValue: 0, // 从头开始。
+            endValue: 5 // 展示到第几个。
+          }
         ]
       }
-      let echart = document.getElementById('new_home_echart_2')
-      if (this.myCharts2 !== '') {
-        this.myCharts2.dispose()
-      }
-      if (echart !== null) {
-        this.myCharts2 = this.$echarts.init(echart)
-        this.myCharts2.setOption(option)
-        window.addEventListener('resize', () => {
-          this.myCharts2.resize()
-        })
-      }
+      let echart = this.$echarts.init(document.getElementById('new_home_echart_2'))
+      echart.setOption(option)
+      setInterval(() => {
+        if (option.dataZoom[0].endValue >= barData1.length - 1) {
+          option.dataZoom[0].endValue = 4
+          option.dataZoom[0].startValue = 0
+        } else {
+          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
+          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
+        }
+        echart.setOption(option)
+      }, 2000)
+      window.addEventListener('resize', () => {
+        echart.resize()
+      })
     },
     setEchart3 () {
       let barName = []
@@ -490,11 +500,8 @@ export default {
           },
           axisLabel: {
             interval: 0,
-            textStyle: {
-              color: '#8FABBF',
-              fontSize: 16
-            }
-            // rotate: 50
+            color: '#8FABBF',
+            fontSize: 16
           },
           data: barName
         },
@@ -509,10 +516,8 @@ export default {
             show: false
           },
           axisLabel: {
-            textStyle: {
-              color: '#8FABBF',
-              fontSize: 14
-            }
+            color: '#8FABBF',
+            fontSize: 14
           },
           splitLine: {
             show: true,
@@ -530,20 +535,18 @@ export default {
             barWidth: '8',
             barGap: '200%',
             itemStyle: {
-              normal: {
-                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  {
-                    offset: 1,
-                    color: 'rgba(96,112,128,0.10)',
-                    opacity: 1
-                  },
-                  {
-                    offset: 0,
-                    color: '#0E90FD',
-                    opacity: 0.1
-                  }
-                ])
-              }
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 1,
+                  color: 'rgba(96,112,128,0.10)',
+                  opacity: 1
+                },
+                {
+                  offset: 0,
+                  color: '#0E90FD',
+                  opacity: 0.1
+                }
+              ])
             },
             data: barData1
           },
@@ -553,20 +556,18 @@ export default {
             barWidth: '8',
             barGap: '200%',
             itemStyle: {
-              normal: {
-                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  {
-                    offset: 0,
-                    color: '#33CCCC',
-                    opacity: 1
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(31,89,89,0.25)',
-                    opacity: 0.25
-                  }
-                ])
-              }
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#33CCCC',
+                  opacity: 1
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(31,89,89,0.25)',
+                  opacity: 0.25
+                }
+              ])
             },
             data: barData2
           },
@@ -576,20 +577,18 @@ export default {
             barWidth: '8',
             barGap: '200%',
             itemStyle: {
-              normal: {
-                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  {
-                    offset: 0,
-                    color: '#33CCCC',
-                    opacity: 1
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(31,89,89,0.25)',
-                    opacity: 0.25
-                  }
-                ])
-              }
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#33CCCC',
+                  opacity: 1
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(31,89,89,0.25)',
+                  opacity: 0.25
+                }
+              ])
             },
             data: barData3
           }
@@ -606,6 +605,145 @@ export default {
           this.myCharts3.resize()
         })
       }
+    },
+    setEchart4 () {
+      this.inventory.map((el, i) => {
+        el.value = el.qty
+        el.name = el.materialName
+        if (i === 1) {
+          el.selected = true
+        }
+      })
+      let total = this.inventory.reduce((a, b) => {
+        return a + Number(b.value)
+      }, 0)
+      total = 5
+      let seriesData = []
+      this.inventory.forEach(r => {
+        seriesData.push(r)
+        seriesData.push({
+          name: '',
+          value: 5,
+          tooltip: { show: false },
+          itemStyle: {
+            label: {
+              show: false
+            },
+            labelLine: {
+              show: false
+            },
+            color: 'rgba(0, 0, 0, 0)',
+            borderColor: 'rgba(0, 0, 0, 0)',
+            borderWidth: 0
+          }
+        })
+      })
+      let option = {
+        color: ['#96B5FC', '#5F8CEF', '#F18A70', '#F4C594', '#E0E7FA'],
+        grid: {
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          containLabel: true
+        },
+        title: {
+          text: total,
+          subtext: '总数',
+          x: '25%',
+          y: 'center',
+          textAlign: 'center',
+          textStyle: {
+            color: '#fff',
+            fontSize: 24,
+            fontWeight: 'normal'
+          },
+          subtextStyle: {
+            color: 'rgba(255,255,255,.45)',
+            fontSize: 14,
+            fontWeight: 'normal'
+          }
+        },
+        legend: {
+          icon: 'circle',
+          orient: 'horizontal',
+          right: '10%',
+          top: '30%',
+          width: '0',
+          textStyle: {
+            color: '#fff'
+          },
+          data: this.inventory.map(r => r.materialName)
+        },
+        series: [{
+          name: '库存量监控',
+          type: 'pie',
+          radius: ['50%', '55%'],
+          center: ['25%', '50%'],
+          labelLine: {
+            show: false
+          },
+          tooltip: {
+            show: false
+          },
+          label: {
+            show: false
+          },
+          selectedMode: 'single',
+          data: seriesData
+        },
+        {
+          name: '阴影圈',
+          type: 'pie',
+          radius: ['0', '40%'],
+          center: ['25%', '50%'],
+          emphasis: {
+            scale: false
+          },
+          tooltip: {
+            show: false
+          },
+          itemStyle: {
+            color: 'rgba(204,225,255, 0.05)'
+          },
+          zlevel: 4,
+          labelLine: {
+            show: false
+          },
+          data: [100]
+        },
+        {
+          name: '阴影圈',
+          type: 'pie',
+          radius: ['0', '30%'],
+          center: ['25%', '50%'],
+          emphasis: {
+            scale: false
+          },
+          tooltip: {
+            show: false
+          },
+          itemStyle: {
+            color: 'rgba(204,225,255, 0.07)'
+          },
+          zlevel: 4,
+          labelLine: {
+            show: false
+          },
+          data: [100]
+        }]
+      }
+      let echart = document.getElementById('new_home_echart_4')
+      if (this.myCharts4 !== '') {
+        this.myCharts4.dispose()
+      }
+      if (echart !== null) {
+        this.myCharts4 = this.$echarts.init(echart)
+        this.myCharts4.setOption(option)
+        window.addEventListener('resize', () => {
+          this.myCharts4.resize()
+        })
+      }
     }
   }
 }