jonhon-mes-web/src/views/processManagement/sinTer/index.vue

<template>
    <basic-container>
        <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="部件-子件" name="1"></el-tab-pane>
            <el-tab-pane label="部件-模具" name="2"></el-tab-pane>
            <el-tab-pane label="模具-子件" name="3"></el-tab-pane>
        </el-tabs> -->
        <!-- <pieceChildQuery v-if="activeName=='1'"></pieceChildQuery>
        <sinterMoldNew v-if="activeName=='2'"></sinterMoldNew>
        <moldChild v-if="activeName=='3'"></moldChild> -->
        <el-form :model="form" label-width="60" label-position="left">
            <el-row :gutter="24">
                <el-col :span="6">
                    <el-form-item label="部件号:">
                        <el-input v-model="form.bujian" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="子件号:">
                        <el-input v-model="form.zijian" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <div style="float: right;">
                        <el-button type="primary" icon="search" @click="searchFn()">查询</el-button>
                        <el-button icon="refreshLeft" @click="resetFn()">重置</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>

        <div class="form-box">
            <div v-if="isComponentOpen">
                <div style="width: 100%;height: 700px;background: #f0f2f5;" ref="lineChart"></div>
            </div>
            <div v-if="isSubOpen">
                <avue-crud :option="option" :table-loading="loading" :data="data" v-model="form" v-model:page="page"
                    ref="crud" @row-del="rowDel" @search-change="searchChange" @search-reset="searchReset"
                    @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
                    @refresh-change="refreshChange" @on-load="onLoad"></avue-crud>
            </div>
        </div>
    </basic-container>
</template>
<script>
import pieceChildQuery from './components/pieceChildQuery.vue'
import sinterMoldNew from './components/sinterMoldNew.vue'
import moldChild from './components/moldChild.vue'
export default {
    components: {
        pieceChildQuery,
        sinterMoldNew,
        moldChild
    },
    data() {
        return {
            activeName: '1',
            form: {
                bujian: '',
                zijian: '',
            },
            option: {
                height: 'auto',
                calcHeight: 32,
                tip: false,
                size: 'medium',
                simplePage: true,
                searchShow: true,
                searchMenuSpan: 6,
                searchIcon: true,
                searchIndex: 3,
                tree: false,
                border: true,
                index: true,
                selection: false,
                viewBtn: false,
                delBtn: false,
                addBtn: false,
                editBtn: false,
                editBtnText: '修改',
                addBtnIcon: ' ',
                viewBtnIcon: ' ',
                delBtnIcon: ' ',
                editBtnIcon: ' ',
                viewBtnText: '详情',
                labelWidth: 120,
                menuWidth: 100,
                dialogWidth: 640,
                dialogClickModal: false,
                searchEnter: true,
                excelBtn: false,
                filterBtn: true,
                searchShowBtn: false,
                columnSort: true,
                excelBtn: true,
                columnSort: true,
                showOverflowTooltip: true,
                gridBtn: false,
                searchLabelPosition: 'left',
                searchGutter: 24,
                searchSpan: 6,
                menuAlign: 'left',
                gridBtn: false,
                searchMenuPosition: 'right',
                addBtnIcon: ' ',
                viewBtnIcon: ' ',
                delBtnIcon: ' ',
                editBtnIcon: ' ',
                header: false,
                menu: false,
                align: 'center',
                column: [
                    {
                        label: '部件号',
                        prop: 'partCode',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: false,
                        headerAlign: 'center',
                        align: 'center',

                    },
                    {
                        label: '子件号',
                        prop: 'subCode',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: false,
                        headerAlign: 'center',
                        align: 'center',
                    },
                    {
                        label: '子件名称',
                        prop: 'subName',
                        sortable: true,
                        filter: true,
                        span: 24,
                        search: false,
                        headerAlign: 'center',
                        align: 'left',
                    },
                ]
            },
            isSubOpen: false,
            isComponentOpen: false
        }
    },
    methods: {
        searchFn() {
            if (this.form.zijian != '') {
                this.isComponentOpen = false
                this.isSubOpen = true
            } else if (this.form.bujian != '') {
                this.isComponentOpen = true
                this.isSubOpen = false
                this.$nextTick(() => {
                    this.createBarChart()
                })
            }
            if (this.form.zijian == '' && this.form.bujian == '') {
                this.isSubOpen = false
                this.isComponentOpen = false
            }
        },
        resetFn() {
            this.form.zijian = ''
            this.form.bujian = ''
            this.isSubOpen = false
            this.isComponentOpen = false
        },
        // 图表
        createBarChart() {
            const mapBoxEchart = this.$echarts.init(this.$refs.lineChart);
            const option = {
                "series": [{
                    roam: true,
                    "type": "tree",
                    "data": [{
                        "name": "部件一",
                        "children": [{
                            "name": "子件一",
                            "children": [{
                                "name": "子件一",
                                "value": 1200
                            }, {
                                "name": "子件二",
                                "value": 1500
                            }]
                        }, {
                            "name": "子件二",
                            "children": [{
                                "name": "子件二",
                                "children": [{
                                    "name": "子件二",
                                    "value": 450,
                                    "children": [{
                                        "name": "子件二",
                                        "value": 450
                                    }, {
                                        "name": "子件二",
                                        "value": 640,
                                        "children": [{
                                            "name": "子件二",
                                            "value": 450
                                        }, {
                                            "name": "子件二",
                                            "value": 640
                                        }]
                                    }]
                                }, {
                                    "name": "子件二",
                                    "value": 640
                                }]
                            }, {
                                "name": "子件二",
                                "value": 3600
                            }, {
                                "name": "子件二",
                                "value": 2700
                            }]
                        }, {
                            "name": "子件三",
                            "children": [{
                                "name": "子件三",
                                "value": 800
                            }, {
                                "name": "子件三",
                                "value": 600
                            }]
                        }, {
                            "name": "子件四",
                            "children": [{
                                "name": "子件四",
                                "value": 300
                            }]
                        }]
                    }],
                    "top": "20%",
                    "left": "7%",
                    "bottom": "20%",
                    "right": "20%",
                    symbolSize: 50,
                    itemStyle: {
                        color: "#284c89"
                    },

                    "expandAndCollapse": true,
                    "animationDuration": 550,
                    "animationDurationUpdate": 750,
                    orient: 'vertical',
                    "symbol": "roundRect"



                }]
            };
            // 使用制定的配置项和数据显示图表
            mapBoxEchart.setOption(option, true);
            // // 窗口大小改变时，重新渲染图表
            window.addEventListener('resize', function () {
                mapBoxEchart.resize();
            }, 200);
        },
    }
}
</script>
<style lang="scss" scoped>
.form-box {
    height: 700px;

}
</style>