zhangdi
1 month ago
parent
e8212536e8
commit
80d5f90b15
9 changed files with 193 additions and 187 deletions
@ -1,191 +1,194 @@ |
||||
<template> |
||||
<div class="order_box"> |
||||
<div class="title_bar">车间订单</div> |
||||
<div class="pie_box"> |
||||
<div class="pie_box_item" > |
||||
<div class="btn_box"> |
||||
<span class="btn first" :class="activeIndex == 1 ? 'active' : ''" @click="changeChart(1)">热表</span> |
||||
<span class="btn second" :class="activeIndex == 2 ? 'active' : ''" @click="changeChart(2)">烧结</span> |
||||
</div> |
||||
<div ref="rb_chart" v-show="activeIndex == 1" class="chart_box"></div> |
||||
<div ref="sj_chart" v-show="activeIndex == 2" class="chart_box"></div> |
||||
</div> |
||||
<div class="order_box"> |
||||
<div class="title_bar">车间订单</div> |
||||
<div class="pie_box"> |
||||
<div class="pie_box_item"> |
||||
<div class="btn_box"> |
||||
<span class="btn first" :class="activeIndex == 1 ? 'active' : ''" @click="changeChart(1)" |
||||
>热表</span |
||||
> |
||||
<span class="btn second" :class="activeIndex == 2 ? 'active' : ''" @click="changeChart(2)" |
||||
>烧结</span |
||||
> |
||||
</div> |
||||
<div ref="rb_chart" v-show="activeIndex == 1" class="chart_box"></div> |
||||
<div ref="sj_chart" v-show="activeIndex == 2" class="chart_box"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
activeIndex:1 |
||||
data() { |
||||
return { |
||||
activeIndex: 1, |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.$nextTick(() => { |
||||
this.initRbEcharts(); |
||||
}); |
||||
}, |
||||
methods: { |
||||
changeChart(type) { |
||||
this.activeIndex = type; |
||||
this.$nextTick(() => { |
||||
if (type == 1) { |
||||
this.initRbEcharts(); |
||||
} else { |
||||
this.initSjEcharts(); |
||||
} |
||||
}); |
||||
}, |
||||
mounted() { |
||||
this.$nextTick(() =>{ |
||||
this.initRbEcharts() |
||||
}) |
||||
}, |
||||
methods: { |
||||
changeChart(type){ |
||||
this.activeIndex = type |
||||
this.$nextTick(() =>{ |
||||
if(type == 1){ |
||||
this.initRbEcharts() |
||||
}else{ |
||||
this.initSjEcharts() |
||||
} |
||||
}) |
||||
|
||||
initRbEcharts() { |
||||
var myChart = this.$echarts.init(this.$refs.rb_chart); |
||||
let option = { |
||||
tooltip: { |
||||
trigger: 'item', |
||||
formatter: '{b} : {c} <br/> 占比：{d}%', |
||||
}, |
||||
initRbEcharts() { |
||||
var myChart = this.$echarts.init(this.$refs.rb_chart); |
||||
let option = { |
||||
tooltip: { |
||||
trigger: 'item', |
||||
formatter: '{b} : {c} <br/> 占比：{d}%' |
||||
}, |
||||
legend: { |
||||
// top: '-2%', |
||||
left: '15%', |
||||
top:'center', |
||||
orient: "vertical" |
||||
}, |
||||
series: [ |
||||
{ |
||||
top: '10%', |
||||
type: 'pie', |
||||
radius: ['65%', '95%'], |
||||
avoidLabelOverlap: false, |
||||
padAngle: 5, |
||||
itemStyle: { |
||||
borderRadius: 5 |
||||
}, |
||||
label: { |
||||
show: false, |
||||
position: 'center' |
||||
}, |
||||
labelLine: { |
||||
show: false |
||||
}, |
||||
// data: this.problemArr |
||||
data:[ |
||||
{ value: 8, name: '在制品',itemStyle: {color:'#3B82F6'}}, |
||||
{ value: 2, name: '加工中',itemStyle: {color:'#E6A23C'} }, |
||||
{ value: 2, name: '检验中',itemStyle: {color:'#EF4444'} }, |
||||
{ value: 2, name: '已完成',itemStyle: {color:'#22C55E'} }, |
||||
] |
||||
} |
||||
] |
||||
}; |
||||
myChart.setOption(option); |
||||
legend: { |
||||
top: '-2%', |
||||
left: '1%', |
||||
// top: 'center', |
||||
orient: 'vertical', |
||||
}, |
||||
initSjEcharts() { |
||||
var myChart = this.$echarts.init(this.$refs.sj_chart); |
||||
let option = { |
||||
tooltip: { |
||||
trigger: 'item', |
||||
formatter: '{b} : {c} <br/> 占比：{d}%' |
||||
}, |
||||
legend: { |
||||
// top: '-2%', |
||||
left: '15%', |
||||
top:'center', |
||||
orient: "vertical" |
||||
}, |
||||
series: [ |
||||
{ |
||||
top: '10%', |
||||
type: 'pie', |
||||
radius: ['65%', '95%'], |
||||
avoidLabelOverlap: false, |
||||
padAngle: 5, |
||||
itemStyle: { |
||||
borderRadius: 5 |
||||
}, |
||||
label: { |
||||
show: false, |
||||
position: 'center' |
||||
}, |
||||
labelLine: { |
||||
show: false |
||||
}, |
||||
// data: this.problemArr |
||||
data:[ |
||||
{ value: 20, name: '在制品',itemStyle: {color:'#3B82F6'}}, |
||||
{ value: 28, name: '未齐套',itemStyle: {color:'#ff7a45'}}, |
||||
{ value: 14, name: '已齐套', itemStyle: {color:'#20c5f6'}}, |
||||
{ value: 42, name: '加工中',itemStyle: {color:'#E6A23C'} }, |
||||
{ value: 13, name: '检验中',itemStyle: {color:'#EF4444'} }, |
||||
{ value: 25, name: '已完成',itemStyle: {color:'#22C55E'} }, |
||||
] |
||||
} |
||||
] |
||||
}; |
||||
myChart.setOption(option); |
||||
series: [ |
||||
{ |
||||
top: '0%', |
||||
type: 'pie', |
||||
radius: ['70%', '95%'], |
||||
avoidLabelOverlap: false, |
||||
padAngle: 5, |
||||
itemStyle: { |
||||
borderRadius: 5, |
||||
}, |
||||
label: { |
||||
show: false, |
||||
position: 'center', |
||||
}, |
||||
labelLine: { |
||||
show: false, |
||||
}, |
||||
// data: this.problemArr |
||||
data: [ |
||||
{ value: 8, name: '在制品', itemStyle: { color: '#3B82F6' } }, |
||||
{ value: 2, name: '加工中', itemStyle: { color: '#E6A23C' } }, |
||||
{ value: 2, name: '检验中', itemStyle: { color: '#EF4444' } }, |
||||
{ value: 2, name: '已完成', itemStyle: { color: '#22C55E' } }, |
||||
], |
||||
}, |
||||
], |
||||
}; |
||||
myChart.setOption(option); |
||||
}, |
||||
initSjEcharts() { |
||||
var myChart = this.$echarts.init(this.$refs.sj_chart); |
||||
let option = { |
||||
tooltip: { |
||||
trigger: 'item', |
||||
formatter: '{b} : {c} <br/> 占比：{d}%', |
||||
}, |
||||
} |
||||
} |
||||
legend: { |
||||
top: '-2%', |
||||
left: '1%', |
||||
// top:'center', |
||||
orient: 'vertical', |
||||
}, |
||||
series: [ |
||||
{ |
||||
top: '0%', |
||||
type: 'pie', |
||||
radius: ['65%', '95%'], |
||||
avoidLabelOverlap: false, |
||||
padAngle: 5, |
||||
itemStyle: { |
||||
borderRadius: 5, |
||||
}, |
||||
label: { |
||||
show: false, |
||||
position: 'center', |
||||
}, |
||||
labelLine: { |
||||
show: false, |
||||
}, |
||||
// data: this.problemArr |
||||
data: [ |
||||
{ value: 20, name: '在制品', itemStyle: { color: '#3B82F6' } }, |
||||
{ value: 28, name: '未齐套', itemStyle: { color: '#ff7a45' } }, |
||||
{ value: 14, name: '已齐套', itemStyle: { color: '#20c5f6' } }, |
||||
{ value: 42, name: '加工中', itemStyle: { color: '#E6A23C' } }, |
||||
{ value: 13, name: '检验中', itemStyle: { color: '#EF4444' } }, |
||||
{ value: 25, name: '已完成', itemStyle: { color: '#22C55E' } }, |
||||
], |
||||
}, |
||||
], |
||||
}; |
||||
myChart.setOption(option); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.order_box { |
||||
padding: 20px; |
||||
padding: 20px; |
||||
|
||||
.title_bar { |
||||
font-weight: 550; |
||||
} |
||||
.title_bar { |
||||
font-weight: 550; |
||||
} |
||||
|
||||
.pie_box { |
||||
width: 100%; |
||||
height: 200px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
|
||||
.pie_box_item { |
||||
width: 100%; |
||||
height: 100%; |
||||
padding: 10px; |
||||
.pie_box { |
||||
width: 100%; |
||||
height: 200px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
|
||||
.btn_box{ |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
.pie_box_item { |
||||
width: 100%; |
||||
height: 100%; |
||||
padding: 10px; |
||||
|
||||
.btn{ |
||||
padding: 5px 15px; |
||||
border: 1px solid #eee; |
||||
cursor: pointer; |
||||
font-size: 14px; |
||||
.btn_box { |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
margin-top: -30px; |
||||
|
||||
&.first{ |
||||
border-top-left-radius: 6px; |
||||
border-bottom-left-radius: 6px; |
||||
border-right: none; |
||||
} |
||||
.btn { |
||||
padding: 5px 15px; |
||||
border: 1px solid #eee; |
||||
cursor: pointer; |
||||
font-size: 14px; |
||||
|
||||
&.second{ |
||||
border-top-right-radius: 6px; |
||||
border-bottom-right-radius: 6px; |
||||
} |
||||
&.first { |
||||
border-top-left-radius: 6px; |
||||
border-bottom-left-radius: 6px; |
||||
border-right: none; |
||||
} |
||||
|
||||
&.second { |
||||
border-top-right-radius: 6px; |
||||
border-bottom-right-radius: 6px; |
||||
} |
||||
|
||||
&.active{ |
||||
color: rgb(64, 158, 255); |
||||
} |
||||
} |
||||
} |
||||
&.active { |
||||
color: rgb(64, 158, 255); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.title{ |
||||
font-weight: 500; |
||||
} |
||||
.title { |
||||
font-weight: 500; |
||||
} |
||||
|
||||
.chart_box{ |
||||
width: 100%; |
||||
height: 210px; |
||||
margin-top: 10px; |
||||
} |
||||
} |
||||
.chart_box { |
||||
width: 100%; |
||||
height: 210px; |
||||
margin-top: 10px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue