153 lines
3.5 KiB
Vue
153 lines
3.5 KiB
Vue
|
<template>
|
||
|
|
<div class="process-flow-container">
|
||
|
|
<div class="flow-chart" ref="flowChart"></div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import * as echarts from 'echarts';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'ProcessFlow',
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
chart: null
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.initChart();
|
||
|
|
},
|
||
|
|
beforeDestroy() {
|
||
|
|
if (this.chart) {
|
||
|
|
this.chart.dispose();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
initChart() {
|
||
|
|
// 初始化 echarts 实例
|
||
|
|
this.chart = echarts.init(this.$refs.flowChart);
|
||
|
|
|
||
|
|
// 流程图配置
|
||
|
|
const option = {
|
||
|
|
title: {
|
||
|
|
text: '钢卷加工流程图',
|
||
|
|
left: 'center'
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item',
|
||
|
|
formatter: '{b}'
|
||
|
|
},
|
||
|
|
animationDurationUpdate: 1500,
|
||
|
|
animationEasingUpdate: 'quinticInOut',
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: 'graph',
|
||
|
|
layout: 'none',
|
||
|
|
symbolSize: 80,
|
||
|
|
roam: false,
|
||
|
|
label: {
|
||
|
|
show: true
|
||
|
|
},
|
||
|
|
edgeSymbol: ['circle', 'arrow'],
|
||
|
|
edgeSymbolSize: [4, 10],
|
||
|
|
edgeLabel: {
|
||
|
|
fontSize: 12
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{
|
||
|
|
name: '酸轧',
|
||
|
|
x: 100,
|
||
|
|
y: 100,
|
||
|
|
itemStyle: { color: '#5c7495' }
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '镀锌卷',
|
||
|
|
x: 250,
|
||
|
|
y: 50,
|
||
|
|
itemStyle: { color: '#2cb867' }
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '分剪',
|
||
|
|
x: 400,
|
||
|
|
y: 50,
|
||
|
|
itemStyle: { color: '#22bbff' }
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '脱脂',
|
||
|
|
x: 250,
|
||
|
|
y: 150,
|
||
|
|
itemStyle: { color: '#800080' }
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '罩退',
|
||
|
|
x: 400,
|
||
|
|
y: 150,
|
||
|
|
itemStyle: { color: '#3ba272' }
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '拉矫【冷轧】',
|
||
|
|
x: 550,
|
||
|
|
y: 100,
|
||
|
|
itemStyle: { color: '#f56c6c' }
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '双机架',
|
||
|
|
x: 550,
|
||
|
|
y: 200,
|
||
|
|
itemStyle: { color: '#ffa500' }
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '镀铬',
|
||
|
|
x: 700,
|
||
|
|
y: 200,
|
||
|
|
itemStyle: { color: '#0000ff' }
|
||
|
|
}
|
||
|
|
],
|
||
|
|
links: [
|
||
|
|
{ source: '酸轧', target: '镀锌卷' },
|
||
|
|
{ source: '镀锌卷', target: '分剪' },
|
||
|
|
{ source: '酸轧', target: '脱脂' },
|
||
|
|
{ source: '脱脂', target: '罩退' },
|
||
|
|
{ source: '罩退', target: '拉矫【冷轧】' },
|
||
|
|
{ source: '罩退', target: '双机架' },
|
||
|
|
{ source: '双机架', target: '镀铬' }
|
||
|
|
],
|
||
|
|
lineStyle: {
|
||
|
|
opacity: 0.9,
|
||
|
|
width: 2,
|
||
|
|
curveness: 0
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
// 应用配置
|
||
|
|
this.chart.setOption(option);
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.chart.resize();
|
||
|
|
});
|
||
|
|
|
||
|
|
// 响应式处理
|
||
|
|
window.addEventListener('resize', () => {
|
||
|
|
this.chart.resize();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
resizeChart() {
|
||
|
|
if (this.chart) {
|
||
|
|
this.chart.resize();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.process-flow-container {
|
||
|
|
width: 100%;
|
||
|
|
height: 400px;
|
||
|
|
.flow-chart {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|