238 lines
5.4 KiB
Vue
238 lines
5.4 KiB
Vue
<template>
|
||
<el-container>
|
||
<el-header>
|
||
<div class="right-panel">
|
||
<el-select v-model="searchType" style="width: 200px" @change="searchTypeChange">
|
||
<el-option label="原料批次号" value="batch"></el-option>
|
||
<el-option label="物料名称" value="material"></el-option>
|
||
</el-select>
|
||
<el-input
|
||
v-if="searchType === 'batch'"
|
||
v-model="query.batch" placeholder="物料批次"
|
||
clearable style="width:200px"
|
||
></el-input>
|
||
<el-select v-else
|
||
v-model="query.m_name"
|
||
style="width: 200px"
|
||
@change="materialChange"
|
||
placeholder="请选择物料">
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.name"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-search"
|
||
@click="handleQuery"
|
||
></el-button>
|
||
<el-button
|
||
@click="handleExport"
|
||
class="tables"
|
||
type="primary"
|
||
>导出</el-button
|
||
>
|
||
</div>
|
||
</el-header>
|
||
<el-main class="nopadding">
|
||
<scTable
|
||
:data="tableData"
|
||
id="exportDiv"
|
||
stripe
|
||
hideDo
|
||
hidePagination
|
||
>
|
||
<el-table-column type="index" width="50" />
|
||
<el-table-column label="部门" prop="部门">
|
||
</el-table-column>
|
||
<el-table-column label="工段" prop="工段">
|
||
</el-table-column>
|
||
<el-table-column label="原料数" prop="原料数">
|
||
</el-table-column>
|
||
<el-table-column label="待加工原料数" prop="待加工原料数">
|
||
</el-table-column>
|
||
<el-table-column label="非本段产物数" prop="非本段产物数">
|
||
</el-table-column>
|
||
<el-table-column label="待加工产物数" prop="待加工产物数">
|
||
</el-table-column>
|
||
<el-table-column label="加工中原料数" prop="加工中原料数">
|
||
</el-table-column>
|
||
<el-table-column label="加工中产物数" prop="加工中产物数">
|
||
</el-table-column>
|
||
<el-table-column label="合格品数" prop="合格品数">
|
||
</el-table-column>
|
||
<el-table-column label="不合格品数" prop="不合格品数">
|
||
</el-table-column>
|
||
<el-table-column label="返工品数" prop="返工品数">
|
||
</el-table-column>
|
||
<el-table-column label="检验数" prop="检验数">
|
||
</el-table-column>
|
||
<el-table-column label="废品数" prop="废品数">
|
||
</el-table-column>
|
||
<el-table-column label="仓库原料数" prop="仓库原料数">
|
||
</el-table-column>
|
||
<el-table-column label="仓库合格品数" prop="仓库合格品数">
|
||
</el-table-column>
|
||
<el-table-column label="仓库合格成品数" prop="仓库合格成品数">
|
||
</el-table-column>
|
||
</scTable>
|
||
</el-main>
|
||
</el-container>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
function deepCopy(obj) {
|
||
return JSON.parse(JSON.stringify(obj));
|
||
}
|
||
export default {
|
||
name: "chart",
|
||
data() {
|
||
return {
|
||
query: {
|
||
batch: "",
|
||
m_name: "",
|
||
m_model: "",
|
||
m_specification: ""
|
||
},
|
||
searchType:'batch',
|
||
options:[],
|
||
tableData:[],
|
||
basicOption: {
|
||
backgroundColor: "transparent",
|
||
title: {
|
||
text: "库存统计",
|
||
},
|
||
grid: {
|
||
top: "80px",
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: ['库房','扫边车间','黑化车间','减薄车间','精雕车间','倒角车间','磨抛车间'],
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
},
|
||
legend: {
|
||
top: "3",
|
||
right: "3%",
|
||
},
|
||
series: [
|
||
{
|
||
data: [0,0,0,0,0,0,0],
|
||
type: "bar",
|
||
name:'未处理',
|
||
barWidth: "15px",
|
||
},
|
||
{
|
||
data: [0,0,0,0,0,0,0],
|
||
type: "bar",
|
||
name:'处理中',
|
||
barWidth: "15px",
|
||
},
|
||
{
|
||
data: [0,0,0,0,0,0,0],
|
||
type: "bar",
|
||
name:'已处理',
|
||
barWidth: "15px",
|
||
},
|
||
],
|
||
},
|
||
};
|
||
},
|
||
mounted() {
|
||
let that = this;
|
||
that.getOptions();
|
||
that.getInmMaterial();
|
||
},
|
||
methods: {
|
||
getOptions(){
|
||
let that = this;
|
||
let obj = {};
|
||
obj.page = 0;
|
||
obj.type__in = "10,20";
|
||
obj.is_hidden = false;
|
||
that.options = [];
|
||
that.$API.mtm.material.list.req(obj).then((res) => {
|
||
if(res.length>0){
|
||
that.options = res;
|
||
}
|
||
});
|
||
},
|
||
getInmMaterial(){
|
||
let that = this;
|
||
let obj = {};
|
||
obj.query = that.query;
|
||
that.tableData =[];
|
||
that.$API.bi.dataset.exec.req('batch_search', obj).then((res) => {
|
||
if(res.data2.ds0){
|
||
that.tableData = res.data2.ds0;
|
||
}
|
||
});
|
||
},
|
||
searchTypeChange(){
|
||
this.query.batch = '';
|
||
this.query.m_name = '';
|
||
this.query.m_model = '';
|
||
this.query.m_specification = '';
|
||
},
|
||
materialChange(val){
|
||
let that = this;
|
||
console.log(val);
|
||
that.options.forEach((item) => {
|
||
if (item.name == val) {
|
||
that.query.m_model = item.model;
|
||
that.query.m_specification = item.specification;
|
||
}
|
||
})
|
||
},
|
||
handleQuery(){
|
||
this.getInmMaterial();
|
||
},
|
||
setChart(name, option = null) {
|
||
// 根据name 渲染数据, option需填写，否则option为模拟数据
|
||
var myChart = echarts.getInstanceByDom(
|
||
document.getElementById(name)
|
||
);
|
||
if (myChart == undefined) {
|
||
myChart = echarts.init(document.getElementById(name), "T");
|
||
}
|
||
if (option == null) {
|
||
option = Object.assign({}, this.basicOption);
|
||
}
|
||
setTimeout(() => {
|
||
try {
|
||
myChart.setOption(option);
|
||
} catch (error) {}
|
||
}, 500);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
#bachart1{
|
||
width: 100%;
|
||
height: 500px;
|
||
}
|
||
|
||
.tableHead {
|
||
background:rgb(0,176,240);
|
||
height:40px;
|
||
}
|
||
.tableTh{
|
||
width:120px;
|
||
height:36px;
|
||
}
|
||
.tableTd{
|
||
width:120px;
|
||
height:36px;
|
||
}
|
||
</style>
|