You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
274 lines
9.9 KiB
274 lines
9.9 KiB
<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> |