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