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 =