diff --git a/src/assets/js/mork2.js b/src/assets/js/mork2.js
index 9cd3422..1bd2559 100644
--- a/src/assets/js/mork2.js
+++ b/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
}
]
}
diff --git a/src/pages/Setup.vue b/src/pages/Setup.vue
index bce0ba0..3b1de01 100644
--- a/src/pages/Setup.vue
+++ b/src/pages/Setup.vue
@@ -44,6 +44,7 @@
+
@@ -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
},
diff --git a/src/pages/modules/new/left/left.vue b/src/pages/modules/new/left/left.vue
index e912b2b..04a6edb 100644
--- a/src/pages/modules/new/left/left.vue
+++ b/src/pages/modules/new/left/left.vue
@@ -71,13 +71,21 @@
-
+
@@ -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()
+ })
+ }
}
}
}