lb #12

Merged
gtz217 merged 27 commits from lb into master 2022-11-18 17:04:51 +08:00
2 changed files with 56 additions and 14 deletions
Showing only changes of commit 16a335d71f - Show all commits

View File

@ -143,10 +143,10 @@
<div class="grow"> <div class="grow">
<techy-box class="" style="padding: calc(16px * var(--beilv));"> <techy-box class="" style="padding: calc(16px * var(--beilv));">
<techy-analysis-header>产品成品率</techy-analysis-header> <techy-analysis-header>产品成品率</techy-analysis-header>
<new-line-stack /> <new-line-stack :data-update-token="dataUpdateToken" />
<div class="date-select"> <div class="date-select">
<span :class="{ 'date-select__active': dateMode2 === 'day' }" @click="dateMode2 = 'day'"></span> <span :class="{ 'date-select__active': dateMode2 === 'day' }" @click="dateMode2 = 'day'; dataUpdateToken=''+Math.random()"></span>
<span :class="{ 'date-select__active': dateMode2 === 'month' }" @click="dateMode2 = 'month'"> <span :class="{ 'date-select__active': dateMode2 === 'month' }" @click="dateMode2 = 'month'; dataUpdateToken=''+Math.random()">
</span> </span>
</div> </div>
@ -281,6 +281,7 @@ export default {
] ]
return { return {
dataUpdateToken: 'xx-token',
plMode: 'a', plMode: 'a',
dateMode: 'month', dateMode: 'month',
dateMode2: 'month', dateMode2: 'month',
@ -423,7 +424,8 @@ export default {
.quality-analysis__body__row-1 { .quality-analysis__body__row-1 {
height: calc(216px * var(--beilv)); height: calc(216px * var(--beilv));
overflow: hidden; /* overflow: hidden; */
overflow: initial;
display: flex; display: flex;
gap: calc(16px * var(--beilv)); gap: calc(16px * var(--beilv));
} }

View File

@ -9,7 +9,12 @@ import resize from '@/views/OperationalOverview/components/mixins/resize'
export default { export default {
name: 'PlFaultAnalysisPieChart', name: 'PlFaultAnalysisPieChart',
mixins: [resize], mixins: [resize],
props: {}, props: {
dataUpdateToken: {
type: String,
default: 'default-token'
}
},
data() { data() {
return { return {
chart: null, chart: null,
@ -17,6 +22,7 @@ export default {
color: ['#FB418C', '#DDB112', '#1A99FF', '#A691FF', '#49FBD6'], color: ['#FB418C', '#DDB112', '#1A99FF', '#A691FF', '#49FBD6'],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
extraCssText: 'width: 180px !important; ',
axisPointer: { axisPointer: {
type: 'cross', type: 'cross',
label: { label: {
@ -24,9 +30,6 @@ export default {
} }
} }
}, },
// legend: {
// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
// },
grid: { grid: {
top: '15%', top: '15%',
left: '2%', left: '2%',
@ -73,6 +76,7 @@ export default {
show: false show: false
}, },
axisLabel: { axisLabel: {
formatter: '{value} %',
textStyle: { textStyle: {
color: 'rgba(255,255,255,0.5)' // color: 'rgba(255,255,255,0.5)' //
} }
@ -114,7 +118,10 @@ export default {
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
data: [11, 199, 140, 63, 185, 5, 78] data: [11, 199, 140, 63, 185, 5, 78].map(_ => {
let v = Math.floor(Math.random() * 100)
return v
})
}, },
{ {
name: '磨边机', name: '磨边机',
@ -145,7 +152,10 @@ export default {
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
data: [151, 57, 31, 7, 77, 88, 119] data: [151, 57, 31, 7, 77, 88, 119].map(_ => {
let v = Math.floor(Math.random() * 100)
return v
})
}, },
{ {
name: '镀膜机', name: '镀膜机',
@ -176,7 +186,10 @@ export default {
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
data: [58, 3, 67, 100, 42, 96, 124] data: [58, 3, 67, 100, 42, 96, 124].map(_ => {
let v = Math.floor(Math.random() * 100)
return v
})
}, },
{ {
name: '包装纸', name: '包装纸',
@ -207,7 +220,10 @@ export default {
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
data: [92, 88, 122, 169, 108, 130, 147] data: [92, 88, 122, 169, 108, 130, 147].map(_ => {
let v = Math.floor(Math.random() * 100)
return v
})
}, },
{ {
name: '丝印', name: '丝印',
@ -242,12 +258,22 @@ export default {
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
data: [44, 40, 118, 197, 123, 95, 96] data: [44, 40, 118, 197, 123, 95, 96].map(_ => {
let v = Math.floor(Math.random() * 100)
return v
})
} }
] ]
} }
} }
}, },
watch: {
dataUpdateToken(val) {
this.refreshData()
}
},
mounted() { mounted() {
window.addEventListener('resize', function() { window.addEventListener('resize', function() {
if (this.chart) { if (this.chart) {
@ -263,7 +289,17 @@ export default {
this.chart.resize() this.chart.resize()
}) })
}, },
methods: {} methods: {
refreshData() {
this.configs.series.forEach(item => {
item.data = [44, 40, 118, 197, 123, 95, 96].map(_ => {
let v = Math.floor(Math.random() * 100)
return v
})
})
if (this.chart) this.chart.setOption(this.configs)
}
}
} }
</script> </script>
@ -271,4 +307,8 @@ export default {
.chartContainer >>> div { .chartContainer >>> div {
width: 100% !important; width: 100% !important;
} }
.diy-linestack-tooltip {
color: red;
}
</style> </style>