129 lines
3.3 KiB
Vue
129 lines
3.3 KiB
Vue
<template>
|
|
<div>
|
|
<container1 title="工厂计划">
|
|
<el-date-picker slot="datePicker" v-model="month" value-format="yyyy-MM" type="month" size="mini" placeholder="选择月">
|
|
</el-date-picker>
|
|
<div style="height:100%;width:100%;" ref="chart"></div>
|
|
</container1>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import container1 from "./components/container1/index.vue";
|
|
|
|
import echarts from 'echarts'
|
|
require('echarts/theme/macarons') // echarts theme
|
|
import resize from '../../../dashboard/mixins/resize'
|
|
import colorList from '@/utils/colorPalette'
|
|
export default {
|
|
mixins: [resize],
|
|
name: 'left2',
|
|
components: {
|
|
container1,
|
|
},
|
|
data () {
|
|
return {
|
|
|
|
chart: null,
|
|
month: '',
|
|
}
|
|
},
|
|
watch: {
|
|
month (newVal) {
|
|
this.initChart(newVal)
|
|
},
|
|
},
|
|
mounted () {
|
|
this.$nextTick(() => {
|
|
this.initChart()
|
|
})
|
|
},
|
|
beforeDestroy () { },
|
|
methods: {
|
|
initChart (month) {
|
|
if (this.chart) {
|
|
this.chart.dispose();
|
|
this.chart = null;
|
|
}
|
|
let params = {};
|
|
if (month) {
|
|
params['month'] = month
|
|
}
|
|
this.chart = echarts.init(this.$refs.chart)
|
|
this.request({
|
|
url: '/hx/scientificProduction/getMonthFactoryPlanPic',
|
|
method: 'get',
|
|
params,
|
|
}).then(res => {
|
|
if (200 == res.code) {
|
|
let list = res.data;
|
|
if (200 == res.code) {
|
|
|
|
this.chart.setOption({
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b} : {c}%'
|
|
},
|
|
legend: {
|
|
show: false,
|
|
data: ['绝热', '装药', '总装'],
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
},
|
|
color: colorList,
|
|
series: [
|
|
{
|
|
name: 'Funnel',
|
|
type: 'funnel',
|
|
left: '20%',
|
|
top: 30,
|
|
bottom: 30,
|
|
width: '60%',
|
|
min: 20,
|
|
max: 60,
|
|
minSize: '40%',
|
|
maxSize: '70%',
|
|
label: {
|
|
show: true,
|
|
position: 'inside',
|
|
color: '#fff',
|
|
formatter: '{b} : {c}%'
|
|
},
|
|
labelLine: {
|
|
length: 10,
|
|
lineStyle: {
|
|
width: 1,
|
|
type: 'solid'
|
|
}
|
|
},
|
|
itemStyle: {
|
|
borderColor: '#fff',
|
|
borderWidth: 1
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
fontSize: 20,
|
|
}
|
|
},
|
|
data: [
|
|
{ value: list.map(e => e.realInsulate).reduce((prev, next) => prev + next), name: '绝热' },
|
|
{ value: list.map(e => e.realCharge).reduce((prev, next) => prev + next), name: '装药' },
|
|
{ value: list.map(e => e.realAssemble).reduce((prev, next) => prev + next), name: '总装' },
|
|
]
|
|
}
|
|
]
|
|
})
|
|
}
|
|
}
|
|
|
|
})
|
|
},
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
</style> |