|
@@ -59,7 +59,7 @@
|
|
|
<!-- <view class="data-divider"></view> -->
|
|
<!-- <view class="data-divider"></view> -->
|
|
|
<view class="data-row">
|
|
<view class="data-row">
|
|
|
<text class="data-label">生产总量</text>
|
|
<text class="data-label">生产总量</text>
|
|
|
- <text class="data-value">{{ production.yearTotal }}<text class="data-unit">件</text></text>
|
|
|
|
|
|
|
+ <text class="data-value">{{ production.yearTotal }}</text>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="data-card orange">
|
|
<view class="data-card orange">
|
|
@@ -71,7 +71,7 @@
|
|
|
<!-- <view class="data-divider"></view> -->
|
|
<!-- <view class="data-divider"></view> -->
|
|
|
<view class="data-row">
|
|
<view class="data-row">
|
|
|
<text class="data-label">生产总量</text>
|
|
<text class="data-label">生产总量</text>
|
|
|
- <text class="data-value">{{ production.monthTotal }}<text class="data-unit">件</text></text>
|
|
|
|
|
|
|
+ <text class="data-value">{{ production.monthTotal }}</text>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
@@ -239,7 +239,6 @@ export default {
|
|
|
currentMonth: '',
|
|
currentMonth: '',
|
|
|
chartData: {
|
|
chartData: {
|
|
|
marketingChart: {
|
|
marketingChart: {
|
|
|
- categories: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
|
|
|
|
|
// 混合图表:柱状图(订单量) + 折线图(订单金额)
|
|
// 混合图表:柱状图(订单量) + 折线图(订单金额)
|
|
|
series: [
|
|
series: [
|
|
|
{ name: '月订单量', data: [], type: 'bar' },
|
|
{ name: '月订单量', data: [], type: 'bar' },
|
|
@@ -249,7 +248,6 @@ export default {
|
|
|
]
|
|
]
|
|
|
},
|
|
},
|
|
|
productionChart: {
|
|
productionChart: {
|
|
|
- categories: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
|
|
|
|
|
series: [
|
|
series: [
|
|
|
{ name: '生产工单', data: [], type: 'bar' },
|
|
{ name: '生产工单', data: [], type: 'bar' },
|
|
|
{ name: '去年同期工单', data: [], type: 'bar' },
|
|
{ name: '去年同期工单', data: [], type: 'bar' },
|
|
@@ -258,7 +256,6 @@ export default {
|
|
|
]
|
|
]
|
|
|
},
|
|
},
|
|
|
purchaseChart: {
|
|
purchaseChart: {
|
|
|
- categories: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
|
|
|
|
|
series: [
|
|
series: [
|
|
|
{ name: '采购数量', data: [], type: 'bar' },
|
|
{ name: '采购数量', data: [], type: 'bar' },
|
|
|
{ name: '去年同期数量', data: [], type: 'bar' },
|
|
{ name: '去年同期数量', data: [], type: 'bar' },
|
|
@@ -267,7 +264,6 @@ export default {
|
|
|
]
|
|
]
|
|
|
},
|
|
},
|
|
|
materialChart: {
|
|
materialChart: {
|
|
|
- categories: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
|
|
|
|
|
series: [
|
|
series: [
|
|
|
{ name: '采购入库', data: [], type: 'bar' },
|
|
{ name: '采购入库', data: [], type: 'bar' },
|
|
|
{ name: '去年同期入库', data: [], type: 'bar' },
|
|
{ name: '去年同期入库', data: [], type: 'bar' },
|
|
@@ -276,7 +272,6 @@ export default {
|
|
|
]
|
|
]
|
|
|
},
|
|
},
|
|
|
finishedChart: {
|
|
finishedChart: {
|
|
|
- categories: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
|
|
|
|
|
series: [
|
|
series: [
|
|
|
{ name: '生产入库', data: [], type: 'bar' },
|
|
{ name: '生产入库', data: [], type: 'bar' },
|
|
|
{ name: '去年同期入库', data: [], type: 'bar' },
|
|
{ name: '去年同期入库', data: [], type: 'bar' },
|
|
@@ -292,20 +287,8 @@ export default {
|
|
|
mounted() {
|
|
mounted() {
|
|
|
const now = new Date()
|
|
const now = new Date()
|
|
|
this.currentYear = now.getFullYear()
|
|
this.currentYear = now.getFullYear()
|
|
|
- this.currentMonth = String(now.getMonth() + 1).padStart(2, '0')
|
|
|
|
|
- this.getMonthOutput()
|
|
|
|
|
- this.getYearOutput()
|
|
|
|
|
- this.getTendencyChart()
|
|
|
|
|
- this.getPadStockStreamStatistics()
|
|
|
|
|
- this.getPdaFindMaterialTrend()
|
|
|
|
|
- this.getSaleOrderSummary()
|
|
|
|
|
- this.getSaleOrderTrendSummary()
|
|
|
|
|
- this.getPurchaseOrderSummary()
|
|
|
|
|
- this.getPurchaseOrderTrendSummary()
|
|
|
|
|
- // 作为备用:如果父组件没有调用 initCharts,这里兜底执行
|
|
|
|
|
- this.$nextTick(() => {
|
|
|
|
|
- this.initCharts()
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ this.currentMonth = String(now.getMonth() + 1)
|
|
|
|
|
+ this.refreshData()
|
|
|
},
|
|
},
|
|
|
beforeDestroy() {
|
|
beforeDestroy() {
|
|
|
const chartIds = ['marketingChart', 'productionChart', 'purchaseChart', 'materialChart', 'finishedChart']
|
|
const chartIds = ['marketingChart', 'productionChart', 'purchaseChart', 'materialChart', 'finishedChart']
|
|
@@ -563,6 +546,22 @@ export default {
|
|
|
url: '/pages/home/pages/manage/purchaseOrderDetail?type=' + type
|
|
url: '/pages/home/pages/manage/purchaseOrderDetail?type=' + type
|
|
|
})
|
|
})
|
|
|
},
|
|
},
|
|
|
|
|
+ // 刷新所有数据(供父组件在 tab 切换回来时调用)
|
|
|
|
|
+ refreshData() {
|
|
|
|
|
+ const now = new Date()
|
|
|
|
|
+ this.currentYear = now.getFullYear()
|
|
|
|
|
+ this.currentMonth = String(now.getMonth() + 1)
|
|
|
|
|
+ this.getMonthOutput()
|
|
|
|
|
+ this.getYearOutput()
|
|
|
|
|
+ this.getTendencyChart()
|
|
|
|
|
+ this.getPadStockStreamStatistics()
|
|
|
|
|
+ this.getPdaFindMaterialTrend()
|
|
|
|
|
+ this.getSaleOrderSummary()
|
|
|
|
|
+ this.getSaleOrderTrendSummary()
|
|
|
|
|
+ this.getPurchaseOrderSummary()
|
|
|
|
|
+ this.getPurchaseOrderTrendSummary()
|
|
|
|
|
+ // 图表初始化在数据回来后由各方法内部 $nextTick 刷新
|
|
|
|
|
+ },
|
|
|
initCharts() {
|
|
initCharts() {
|
|
|
console.log('initCharts')
|
|
console.log('initCharts')
|
|
|
Object.keys(this.chartData).forEach(chartId => {
|
|
Object.keys(this.chartData).forEach(chartId => {
|
|
@@ -574,31 +573,104 @@ export default {
|
|
|
const ref = this.$refs[domId]
|
|
const ref = this.$refs[domId]
|
|
|
if (!ref) return
|
|
if (!ref) return
|
|
|
|
|
|
|
|
|
|
+ // 当前月份,categories 和 data 只显示到当月
|
|
|
|
|
+ const currentMonthNum = new Date().getMonth() + 1
|
|
|
|
|
+ const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
|
|
|
|
|
+ const categories = months.slice(0, currentMonthNum)
|
|
|
|
|
+
|
|
|
|
|
+ // 判断是否需要双Y轴(含金额/数量分离的图表:营销/采购/生产)
|
|
|
|
|
+ const needDualYAxis = ['marketingChart', 'purchaseChart', 'productionChart'].includes(domId)
|
|
|
|
|
+
|
|
|
|
|
+ const barColors = ['#f5a529', '#0da323', '#f5a529', '#0da323']
|
|
|
|
|
+ const lineColors = ['#f5a529', '#0da323', '#f5a529', '#0da323']
|
|
|
|
|
+
|
|
|
const option = {
|
|
const option = {
|
|
|
grid: {
|
|
grid: {
|
|
|
- left: '14%',
|
|
|
|
|
- right: '6%',
|
|
|
|
|
|
|
+ left: needDualYAxis ? '6%' : '6%',
|
|
|
|
|
+ right: needDualYAxis ? '6%' : '6%',
|
|
|
top: '12%',
|
|
top: '12%',
|
|
|
- bottom: '10%'
|
|
|
|
|
|
|
+ bottom: '10%',
|
|
|
|
|
+ containLabel: true
|
|
|
},
|
|
},
|
|
|
tooltip: {
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
trigger: 'axis',
|
|
|
confine: true,
|
|
confine: true,
|
|
|
- backgroundColor: 'rgba(50, 50, 50, 0.9)',
|
|
|
|
|
- borderColor: '#333',
|
|
|
|
|
|
|
+ backgroundColor: '#f5a529',
|
|
|
|
|
+ borderColor: '#f5a529',
|
|
|
|
|
+ borderRadius: 6,
|
|
|
|
|
+ padding: [8, 12],
|
|
|
textStyle: {
|
|
textStyle: {
|
|
|
color: '#fff',
|
|
color: '#fff',
|
|
|
fontSize: 12
|
|
fontSize: 12
|
|
|
- }
|
|
|
|
|
|
|
+ },
|
|
|
|
|
+ formatter: (function(chartId) {
|
|
|
|
|
+ var isAmountChart = chartId === 'marketingChart' || chartId === 'purchaseChart'
|
|
|
|
|
+ return function(params) {
|
|
|
|
|
+ if (!params || !params.length) return ''
|
|
|
|
|
+ var date = params[0].axisValue
|
|
|
|
|
+ var thisYear = []
|
|
|
|
|
+ var lastYear = []
|
|
|
|
|
+ for (var i = 0; i < params.length; i++) {
|
|
|
|
|
+ var item = params[i]
|
|
|
|
|
+ if (item.seriesName.indexOf('去年') !== -1) {
|
|
|
|
|
+ lastYear.push(item)
|
|
|
|
|
+ } else {
|
|
|
|
|
+ thisYear.push(item)
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ var result = date
|
|
|
|
|
+ if (thisYear.length) {
|
|
|
|
|
+ result += '\n今年:\n'
|
|
|
|
|
+ for (var j = 0; j < thisYear.length; j++) {
|
|
|
|
|
+ var unit = (isAmountChart && thisYear[j].seriesName.indexOf('金额') !== -1) ? '万元' : ''
|
|
|
|
|
+ result += ' ' + thisYear[j].seriesName + ' ' + thisYear[j].value + unit + '\n'
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ if (lastYear.length) {
|
|
|
|
|
+ result += '去年:\n'
|
|
|
|
|
+ for (var k = 0; k < lastYear.length; k++) {
|
|
|
|
|
+ var unit2 = (isAmountChart && lastYear[k].seriesName.indexOf('金额') !== -1) ? '万元' : ''
|
|
|
|
|
+ result += ' ' + lastYear[k].seriesName + ' ' + lastYear[k].value + unit2 + '\n'
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ return result
|
|
|
|
|
+ }
|
|
|
|
|
+ })(domId)
|
|
|
|
|
+ },
|
|
|
|
|
+ legend: {
|
|
|
|
|
+ show: false
|
|
|
},
|
|
},
|
|
|
xAxis: {
|
|
xAxis: {
|
|
|
type: 'category',
|
|
type: 'category',
|
|
|
- data: data.categories,
|
|
|
|
|
|
|
+ data: categories,
|
|
|
axisLine: { lineStyle: { color: '#e5e5e5' } },
|
|
axisLine: { lineStyle: { color: '#e5e5e5' } },
|
|
|
axisLabel: { fontSize: 12, color: '#666' },
|
|
axisLabel: { fontSize: 12, color: '#666' },
|
|
|
axisTick: { show: false }
|
|
axisTick: { show: false }
|
|
|
},
|
|
},
|
|
|
- yAxis: {
|
|
|
|
|
|
|
+ yAxis: needDualYAxis ? [
|
|
|
|
|
+ {
|
|
|
|
|
+ type: 'value',
|
|
|
|
|
+ name: domId === 'productionChart' ? '工单' : '数量',
|
|
|
|
|
+ min: 0,
|
|
|
|
|
+ splitNumber: 4,
|
|
|
|
|
+ axisLine: { show: false },
|
|
|
|
|
+ axisTick: { show: false },
|
|
|
|
|
+ splitLine: {
|
|
|
|
|
+ lineStyle: { color: '#e5e5e5', type: 'dashed' }
|
|
|
|
|
+ },
|
|
|
|
|
+ axisLabel: { fontSize: 12, color: '#666' }
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ type: 'value',
|
|
|
|
|
+ name: domId === 'productionChart' ? '总量' : '金额(万元)',
|
|
|
|
|
+ min: 0,
|
|
|
|
|
+ splitNumber: 4,
|
|
|
|
|
+ axisLine: { show: false },
|
|
|
|
|
+ axisTick: { show: false },
|
|
|
|
|
+ splitLine: { show: false },
|
|
|
|
|
+ axisLabel: { fontSize: 12, color: '#666' }
|
|
|
|
|
+ }
|
|
|
|
|
+ ] : {
|
|
|
type: 'value',
|
|
type: 'value',
|
|
|
min: 0,
|
|
min: 0,
|
|
|
splitNumber: 4,
|
|
splitNumber: 4,
|
|
@@ -611,23 +683,29 @@ export default {
|
|
|
},
|
|
},
|
|
|
series: data.series.map((item, index) => {
|
|
series: data.series.map((item, index) => {
|
|
|
const chartType = item.type || 'line'
|
|
const chartType = item.type || 'line'
|
|
|
- const barColors = ['#f5a529', '#0da323', '#f5a529', '#0da323']
|
|
|
|
|
- const lineColors = ['#f5a529', '#0da323', '#f5a529', '#0da323']
|
|
|
|
|
|
|
+
|
|
|
|
|
+ // 裁剪 data 到当前月份
|
|
|
|
|
+ const slicedData = (item.data || []).slice(0, currentMonthNum)
|
|
|
|
|
+
|
|
|
|
|
+ // 双Y轴:bar 用左轴(yAxisIndex:0),line 用右轴(yAxisIndex:1)
|
|
|
|
|
+ const yAxisIndex = needDualYAxis ? (chartType === 'bar' ? 0 : 1) : 0
|
|
|
|
|
|
|
|
if (chartType === 'bar') {
|
|
if (chartType === 'bar') {
|
|
|
return {
|
|
return {
|
|
|
name: item.name,
|
|
name: item.name,
|
|
|
type: 'bar',
|
|
type: 'bar',
|
|
|
|
|
+ yAxisIndex,
|
|
|
barWidth: 10,
|
|
barWidth: 10,
|
|
|
itemStyle: {
|
|
itemStyle: {
|
|
|
color: barColors[index % barColors.length]
|
|
color: barColors[index % barColors.length]
|
|
|
},
|
|
},
|
|
|
- data: item.data
|
|
|
|
|
|
|
+ data: slicedData
|
|
|
}
|
|
}
|
|
|
} else {
|
|
} else {
|
|
|
return {
|
|
return {
|
|
|
name: item.name,
|
|
name: item.name,
|
|
|
type: 'line',
|
|
type: 'line',
|
|
|
|
|
+ yAxisIndex,
|
|
|
smooth: true,
|
|
smooth: true,
|
|
|
symbol: 'circle',
|
|
symbol: 'circle',
|
|
|
symbolSize: 4,
|
|
symbolSize: 4,
|
|
@@ -638,7 +716,7 @@ export default {
|
|
|
itemStyle: {
|
|
itemStyle: {
|
|
|
color: lineColors[index % lineColors.length]
|
|
color: lineColors[index % lineColors.length]
|
|
|
},
|
|
},
|
|
|
- data: item.data
|
|
|
|
|
|
|
+ data: slicedData
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|