lb #12
@ -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));
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user