diff --git a/src/views/QualityManager/HomePage.vue b/src/views/QualityManager/HomePage.vue index 5bb4dc3..71309b8 100644 --- a/src/views/QualityManager/HomePage.vue +++ b/src/views/QualityManager/HomePage.vue @@ -137,7 +137,7 @@ :class="{ 'pl-select__active': plMode === 'a' }" @click=" plMode = 'a' - chosenDatalist = getFaultDataList() + chosenDatalist = getFaultDataList() " > A @@ -187,8 +187,8 @@
- - + + + + 产线成品率 + + +
@@ -300,7 +335,8 @@ export default { }, data() { const quexianDatalist = [ - [ // 月a + [ + // 月a { value: 5.21, name: '破片' }, { value: 3.2, name: '崩边' }, { value: 4.12, name: '脏污' }, @@ -308,7 +344,8 @@ export default { { value: 0.96, name: '崩孔' }, { value: 2.2, name: '其他' } ], - [ // 月b + [ + // 月b { value: 4.34, name: '破片' }, { value: 3.4, name: '崩边' }, { value: 4.1, name: '脏污' }, @@ -316,7 +353,8 @@ export default { { value: 0.32, name: '崩孔' }, { value: 2.14, name: '其他' } ], - [ // 日a + [ + // 日a { value: 184, name: '破片' }, { value: 110, name: '崩边' }, { value: 163, name: '脏污' }, @@ -324,7 +362,8 @@ export default { { value: 22, name: '崩孔' }, { value: 74, name: '其他' } ], - [ // 日b + [ + // 日b { value: 172, name: '破片' }, { value: 122, name: '崩边' }, { value: 162, name: '脏污' }, @@ -338,7 +377,7 @@ export default { dataUpdateToken: 'xx-token', plMode: 'a', dateMode: 'month', - dateMode2: 'month', + dateMode2: 'day', qualityTableProps, qualityDatalist, qualityExceptionDatalist, @@ -629,6 +668,15 @@ export default { width: calc(375px * var(--beilv)); } +.fake-legend{ + cursor: unset; +} + +.fake-legend span { + background: none; + cursor: none; + color: #DFF1FE; +} /* @media all and (max-width: 1680px) { .production-rate { text-align: center; diff --git a/src/views/QualityManager/components/charts/newLineStack.vue b/src/views/QualityManager/components/charts/newLineStack.vue index acd0d2e..85b7dfd 100644 --- a/src/views/QualityManager/components/charts/newLineStack.vue +++ b/src/views/QualityManager/components/charts/newLineStack.vue @@ -11,19 +11,19 @@ class ChartOption { constructor() { this.color = ['#DDB112', '#1A99FF', '#FB418C', '#A691FF', '#49FBD6'] - // this.legend = { - // top: 11, - // right: 32, - // itemWidth: 8, - // itemHeight: 8, - // textStyle: { - // color: '#fff9', - // fontSize: 10 - // } - // } + this.legend = { + top: 14, + right: 22, + itemWidth: 6, + itemHeight: 8, + textStyle: { + color: '#DFF1FECC', + fontSize: 12 + } + } this.grid = { - top: 64, + top: 72, left: 12, right: 28, bottom: 20, @@ -44,6 +44,7 @@ class ChartOption { } } + let today = new Date() this.xAxis = { type: 'category', boundaryGap: false, @@ -62,13 +63,15 @@ class ChartOption { }, data: this.mode === 'month' - ? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20] + ? Array(new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate()) + .fill(1) + .map((_, idx) => idx + 1) : ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] } this.yAxis = [ { - name: '成品率 ', + name: '成品率 ', type: 'value', min: '80', splitNumber: 4, @@ -259,11 +262,57 @@ export default { methods: { refreshData() { // update xaxis + let today = new Date() this.configs.xAxis.data = this.mode === 'month' - ? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20] + ? Array(new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate()) + .fill(1) + .map((_, idx) => idx + 1) : ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] + // update tooltip + if (this.mode === 'month') { + this.configs.tooltip = { + trigger: 'axis', + padding: 10, + backgroundColor: 'rgba(13, 29, 53, 0.8)', + extraCssText: 'width: 180px !important; ', + axisPointer: { + type: 'line', + lineStyle: { + type: 'dotted', + color: '#7BFFFB' + } + }, + formatter: params => { + const currentMonth = new Date().getMonth() + 1 + return ` +
+

${currentMonth}-${params[0].axisValue}

+ ${params[0].seriesName}: ${params[0].value} + ${params[1].seriesName}: ${params[1].value} +
+ ` + } + } + } else if (this.mode === 'day') { + this.configs.tooltip = null + this.configs.tooltip = { + trigger: 'axis', + padding: 10, + backgroundColor: 'rgba(13, 29, 53, 0.8)', + extraCssText: 'width: 180px !important; ', + axisPointer: { + type: 'line', + lineStyle: { + type: 'dotted', + color: '#7BFFFB' + } + }, + formatter: undefined + } + } + // update series this.configs.series.forEach(item => { item.data =