feat: 库存统计里添加饼图配置

This commit is contained in:
caoqianming 2025-11-20 11:09:47 +08:00
parent a0189dbe95
commit b778ab7574
1 changed files with 207 additions and 284 deletions

View File

@ -1,231 +1,137 @@
<template> <template>
<el-container> <el-container>
<el-aside style="width: 50%; background: #ffffff"> <el-aside style="width: 50%; background: #ffffff">
<div style="height: 50%;">
<el-container> <el-container>
<el-header> <el-header>
<div class="left-panel"> <div class="left-panel">
<span style="font-size: 14px">库存统计</span> <span style="font-size: 14px">库存统计</span>
</div> </div>
<div class="right-panel"> <div class="right-panel">
<el-select <el-select v-model="params.type" clearable style="width: 120px;"
v-model="params.type" @change="materialTypeChange">
clearable <el-option v-for="item in materialTypeOptions" :key="item.id" :label="item.name"
style="width: 120px;" :value="item.id">
@change="materialTypeChange"
>
<el-option
v-for="item in materialTypeOptions"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option> </el-option>
</el-select> </el-select>
<xtSelect <xtSelect :apiObj="apiObj" v-model="query.material" v-model:obj="selectObj"
:apiObj="apiObj" :labelField="'name'" style="width: 250px;" :params="mquery"
v-model="query.material" @change="selectMaterialChange">
v-model:obj="selectObj"
:labelField="'name'"
style="width: 150px;"
:params="mquery"
@change="selectMaterialChange"
>
<el-table-column label="名称" prop="name"></el-table-column> <el-table-column label="名称" prop="name"></el-table-column>
<el-table-column label="型号" prop="model"></el-table-column> <el-table-column label="型号" prop="model"></el-table-column>
<el-table-column label="规格" prop="spcification"></el-table-column> <el-table-column label="规格" prop="spcification"></el-table-column>
</xtSelect> </xtSelect>
<el-button <el-button type="primary" icon="el-icon-search" @click="materialTypeChange"></el-button>
type="primary" <el-button @click="handleExport('1')" type="primary">导出</el-button>
icon="el-icon-search"
@click="materialTypeChange"
></el-button>
<el-button @click="handleExport('1')" type="primary"
>导出</el-button
>
</div> </div>
</el-header> </el-header>
<el-main> <el-main>
<scTable <scTable v-if="params.type == 10 || params.type == 20" ref="tables1" :data="tableData1"
v-if="params.type == 10 || params.type == 20" id="exportDiv1" stripe hideDo hidePagination :summary-method="getSummaries" show-summary row-key="id">
ref="tables1"
:data="tableData1"
id="exportDiv1"
stripe
hideDo
hidePagination
:summary-method="getSummaries" show-summary
>
<el-table-column type="index" width="50"/>
<el-table-column label="物料名" prop="material_name"
:filters="nameFilters1"
:filter-method="filterName1"
filter-placement="bottom-end"/>
<el-table-column label="型号" prop="material_model"
:filters="modelFilters1"
:filter-method="filterModel1"
filter-placement="bottom-end"/>
<el-table-column label="规格" prop="material_specification"
:filters="specsFilters1"
:filter-method="filterSpecs1"
filter-placement="bottom-end"/>
<el-table-column prop="dept_name" label="完成车间"
:filters="deptFilters1"
:filter-method="filterDept1"
filter-placement="bottom-end"/>
<el-table-column label="库存总数" prop="count" />
</scTable>
<scTable
v-else
ref="tables11"
:data="tableData11"
id="exportDiv1"
stripe
hideDo
hidePagination
:summary-method="getSummaries2"
show-summary
>
<el-table-column type="index" width="50" /> <el-table-column type="index" width="50" />
<el-table-column label="物料名" prop="name" <el-table-column label="物料名" prop="material_name" :filters="nameFilters1"
:filters="nameFilters11" :filter-method="filterName1" filter-placement="bottom-end" />
:filter-method="filterName11" <el-table-column label="型号" prop="material_model" :filters="modelFilters1"
filter-placement="bottom-end"/> :filter-method="filterModel1" filter-placement="bottom-end" />
<el-table-column label="型号" prop="model" <el-table-column label="规格" prop="material_specification" :filters="specsFilters1"
:filters="modelFilters11" :filter-method="filterSpecs1" filter-placement="bottom-end" />
:filter-method="filterModel11" <el-table-column prop="dept_name" label="完成车间" :filters="deptFilters1"
filter-placement="bottom-end"/> :filter-method="filterDept1" filter-placement="bottom-end" />
<el-table-column label="规格" prop="specification" <el-table-column label="库存合格品数" prop="count" />
:filters="specsFilters11" </scTable>
:filter-method="filterSpecs11" <scTable v-else ref="tables11" :data="tableData11" id="exportDiv1" stripe hideDo hidePagination
filter-placement="bottom-end"/> :summary-method="getSummaries2" show-summary row-key="id">
<el-table-column label="仓库合格品数" prop="count_mb"/> <el-table-column type="index" width="50" />
<el-table-column label="物料名" prop="name" :filters="nameFilters11"
:filter-method="filterName11" filter-placement="bottom-end" />
<el-table-column label="型号" prop="model" :filters="modelFilters11"
:filter-method="filterModel11" filter-placement="bottom-end" />
<el-table-column label="规格" prop="specification" :filters="specsFilters11"
:filter-method="filterSpecs11" filter-placement="bottom-end" />
<el-table-column label="仓库合格品数" prop="count_mb" />
<el-table-column label="周预估值" v-if="params.type == 30"> <el-table-column label="周预估值" v-if="params.type == 30">
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.week_esitimate_consume"
v-model="scope.row.week_esitimate_consume" @blur="weekcountChange(scope.row)"></el-input>
@blur="weekcountChange(scope.row)"
></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="可用天数" v-if="params.type == 30"> <el-table-column label="可用天数" v-if="params.type == 30">
<template #default="scope"> <template #default="scope">
<span v-if="scope.row.week_esitimate_consume &&scope.row.week_esitimate_consume !==null"> <span
{{Math.floor(scope.row.count_mb /scope.row.week_esitimate_consume) * 7}} v-if="scope.row.week_esitimate_consume && scope.row.week_esitimate_consume !== null">
{{ Math.floor(scope.row.count_mb / scope.row.week_esitimate_consume) * 7 }}
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
</scTable> </scTable>
</el-main> </el-main>
</el-container> </el-container>
</el-aside> </div>
<el-main class="nopadding"> <div style="height: 50%;">
<el-container> <el-container>
<el-header> <el-header>
<div class="left-panel"> <div class="left-panel">
<span style="font-size: 14px">库存出入库统计</span> <span style="font-size: 14px">库存出入库统计</span>
</div> </div>
<div class="right-panel"> <div class="right-panel">
<el-select <el-select v-model="query.mio_type" clearable @change="mioTypeChange" style="width: 100px">
v-model="query.mio_type" <el-option v-for="e in mioTypeEnum.values" :key="e.key" :value="e.key"
clearable :label="e.text"></el-option>
@change="mioTypeChange"
style="width: 100px"
>
<el-option
v-for="e in mioTypeEnum.values"
:key="e.key"
:value="e.key"
:label="e.text"
></el-option>
</el-select> </el-select>
<el-select <el-select v-model="queryType" style="width: 100px" @change="queryTypeChnge">
v-model="queryType" <el-option v-for="item in typeOptions" :key="item" :label="item"
style="width: 100px" :value="item"></el-option>
@change="queryTypeChnge"
>
<el-option
v-for="item in typeOptions"
:key="item"
:label="item"
:value="item"
></el-option>
</el-select> </el-select>
<el-date-picker <el-date-picker v-if="queryType == ''" v-model="queryDate" type="month" placeholder="查询月"
v-if="queryType == '月'" value-format="YYYY-MM" style="width: 100px">
v-model="queryDate"
type="month"
placeholder="查询月"
value-format="YYYY-MM"
style="width: 100px"
>
</el-date-picker> </el-date-picker>
<el-date-picker <el-date-picker v-if="queryType == ''" v-model="queryDate" type="year" placeholder="查询年"
v-if="queryType == '年'" value-format="YYYY" style="width: 100px">
v-model="queryDate"
type="year"
placeholder="查询年"
value-format="YYYY"
style="width: 100px"
>
</el-date-picker> </el-date-picker>
<el-button <el-button type="primary" icon="el-icon-search" @click="handleQuery"></el-button>
type="primary"
icon="el-icon-search"
@click="handleQuery"
></el-button>
<el-button @click="handleExport('2')" type="primary">导出</el-button> <el-button @click="handleExport('2')" type="primary">导出</el-button>
</div> </div>
</el-header> </el-header>
<el-main> <el-main>
<scTable <scTable ref="tables2" :data="tableData" id="exportDiv2" stripe hideDo hidePagination
ref="tables2" :summary-method="getSummaries" show-summary row-key="id">
:data="tableData" <el-table-column label="物料名" prop="物料名" :filters="nameFilters2" :filter-method="filterName2"
id="exportDiv2"
stripe
hideDo
hidePagination
:summary-method="getSummaries"
show-summary
>
<el-table-column label="物料名" prop="物料名"
:filters="nameFilters2"
:filter-method="filterName2"
filter-placement="bottom-end"> filter-placement="bottom-end">
</el-table-column> </el-table-column>
<el-table-column label="型号" prop="型号" <el-table-column label="型号" prop="型号" :filters="modelFilters2" :filter-method="filterModel2"
:filters="modelFilters2" filter-placement="bottom-end"></el-table-column>
:filter-method="filterModel2" <el-table-column label="规格" prop="规格" :filters="specsFilters2" :filter-method="filterSpecs2"
filter-placement="bottom-end" filter-placement="bottom-end"></el-table-column>
></el-table-column>
<el-table-column label="规格" prop="规格"
:filters="specsFilters2"
:filter-method="filterSpecs2"
filter-placement="bottom-end"
></el-table-column>
<el-table-column label="出入库类型"> <el-table-column label="出入库类型">
<span>{{ mio_type_name }}</span> <span>{{ mio_type_name }}</span>
</el-table-column> </el-table-column>
<el-table-column label="执行车间" prop="执行车间" <el-table-column label="执行车间" prop="执行车间" :filters="deptFilters2"
:filters="deptFilters2" :filter-method="filterDept2" filter-placement="bottom-end">
:filter-method="filterDept2"
filter-placement="bottom-end">
</el-table-column> </el-table-column>
<template v-if="queryType == '月' &&(query.mio_type == 'pur_in' ||query.mio_type == 'do_in' ||query.mio_type == 'other_in')"> <template
v-if="queryType == '月' && (query.mio_type == 'pur_in' || query.mio_type == 'do_in' || query.mio_type == 'other_in')">
<el-table-column label="月入库总数" prop="数量"></el-table-column> <el-table-column label="月入库总数" prop="数量"></el-table-column>
</template> </template>
<template v-if="queryType == '月' &&(query.mio_type == 'do_out' ||query.mio_type == 'sale_out' ||query.mio_type == 'other_out')"> <template
v-if="queryType == '月' && (query.mio_type == 'do_out' || query.mio_type == 'sale_out' || query.mio_type == 'other_out')">
<el-table-column label="月出库数量" prop="数量"> <el-table-column label="月出库数量" prop="数量">
</el-table-column> </el-table-column>
</template> </template>
<template v-if="queryType == '年' &&(query.mio_type == 'pur_in' ||query.mio_type == 'do_in' ||query.mio_type == 'other_in')"> <template
v-if="queryType == '年' && (query.mio_type == 'pur_in' || query.mio_type == 'do_in' || query.mio_type == 'other_in')">
<el-table-column label="年入库总数" prop="数量"></el-table-column> <el-table-column label="年入库总数" prop="数量"></el-table-column>
</template> </template>
<template v-if="queryType == '年' &&(query.mio_type == 'do_out'||query.mio_type == 'sale_out'||query.mio_type == 'other_out')"> <template
v-if="queryType == '年' && (query.mio_type == 'do_out' || query.mio_type == 'sale_out' || query.mio_type == 'other_out')">
<el-table-column label="年出库总数" prop="数量"></el-table-column> <el-table-column label="年出库总数" prop="数量"></el-table-column>
</template> </template>
</scTable> </scTable>
</el-main> </el-main>
</el-container> </el-container>
</div>
</el-aside>
<el-main class="nopadding">
<scEcharts :option="echartsOptions" height="80%"></scEcharts>
</el-main> </el-main>
</el-container> </el-container>
</template> </template>
@ -238,19 +144,21 @@ export default {
name: "chart", name: "chart",
data() { data() {
return { return {
echartsOptions: null,
mioTypeEnum, mioTypeEnum,
apiObj: this.$API.mtm.material.list, apiObj: this.$API.mtm.material.list,
materialType: "", materialType: "",
params: { is_hidden: false, type: 10, count_mb__gt: 0,page:0 }, params: { is_hidden: false, type: 10, count_mb__gt: 0, page: 0 },
query: { query: {
material: "", material: "",
mio_type: mioTypeEnum.values[0].key, mio_type: mioTypeEnum.values[0].key,
}, },
mquery:{ mquery: {
page: 0, page: 0,
type__in: "10", type__in: "10",
is_hidden: false, is_hidden: false,
is_assemb: false, is_assemb: false,
query: "{id,name,model,specification}"
}, },
selectObj: {}, selectObj: {},
mio_type_name: mioTypeEnum.values[0].text, mio_type_name: mioTypeEnum.values[0].text,
@ -297,15 +205,16 @@ export default {
that.currentYear = year; that.currentYear = year;
that.currentMonth = month > 9 ? month : "0" + month; that.currentMonth = month > 9 ? month : "0" + month;
that.currentLastDay = lastDay; that.currentLastDay = lastDay;
that.queryDate = that.currentYear+''; that.queryDate = that.currentYear + '';
that.start_date = that.currentYear + "-01-01"; that.start_date = that.currentYear + "-01-01";
that.end_date = that.currentYear + "-12-31"; that.end_date = that.currentYear + "-12-31";
that.getTableData(); that.getTableData();
that.getTableData1(); that.getTableData1();
that.initChartOptions();
}, },
methods: { methods: {
queryTypeChnge() { queryTypeChnge() {
this.queryDate =null; this.queryDate = null;
}, },
getTableData1() { getTableData1() {
let that = this; let that = this;
@ -314,7 +223,7 @@ export default {
that.deptFilters1 = []; that.deptFilters1 = [];
that.modelFilters1 = []; that.modelFilters1 = [];
that.specsFilters1 = []; that.specsFilters1 = [];
let nameList=[],deptList = [],specsList=[],modelList=[]; let nameList = [], deptList = [], specsList = [], modelList = [];
let obj = { let obj = {
query: { query: {
material_types: that.params.type, material_types: that.params.type,
@ -324,30 +233,30 @@ export default {
if (res.data2.ds0) { if (res.data2.ds0) {
let data = res.data2.ds0; let data = res.data2.ds0;
that.tableData1 = data; that.tableData1 = data;
if(data.length>0){ if (data.length > 0) {
data.forEach((ite) => { data.forEach((ite) => {
if (nameList.indexOf(ite.material_name) > -1) {} else { if (nameList.indexOf(ite.material_name) > -1) { } else {
nameList.push(ite.material_name); nameList.push(ite.material_name);
let obj = {}; let obj = {};
obj.text = ite.material_name; obj.text = ite.material_name;
obj.value = ite.material_name; obj.value = ite.material_name;
that.nameFilters1.push(obj); that.nameFilters1.push(obj);
} }
if(modelList.indexOf(ite.material_model)>-1){}else{ if (modelList.indexOf(ite.material_model) > -1) { } else {
modelList.push(ite.material_model); modelList.push(ite.material_model);
let obj2 = {}; let obj2 = {};
obj2.text = ite.material_model; obj2.text = ite.material_model;
obj2.value = ite.material_model; obj2.value = ite.material_model;
that.modelFilters1.push(obj2); that.modelFilters1.push(obj2);
} }
if(specsList.indexOf(ite.material_specification)>-1){}else{ if (specsList.indexOf(ite.material_specification) > -1) { } else {
specsList.push(ite.material_specification); specsList.push(ite.material_specification);
let obj3 = {}; let obj3 = {};
obj3.text = ite.material_specificationv; obj3.text = ite.material_specificationv;
obj3.value = ite.material_specification; obj3.value = ite.material_specification;
that.specsFilters1.push(obj3); that.specsFilters1.push(obj3);
} }
if(deptList.indexOf(ite.dept_name)>-1){}else{ if (deptList.indexOf(ite.dept_name) > -1) { } else {
deptList.push(ite.dept_name); deptList.push(ite.dept_name);
let obj4 = {}; let obj4 = {};
obj4.text = ite.dept_name; obj4.text = ite.dept_name;
@ -359,36 +268,36 @@ export default {
} }
}); });
}, },
getTableData11(){ getTableData11() {
let that = this; let that = this;
that.tableData11 = []; that.tableData11 = [];
that.nameFilters11 = []; that.nameFilters11 = [];
that.modelFilters11 = []; that.modelFilters11 = [];
that.specsFilters11 = []; that.specsFilters11 = [];
let nameList=[],specsList=[],modelList=[]; let nameList = [], specsList = [], modelList = [];
if(that.material_name!==''&&that.material_name!==null){ if (that.material_name !== '' && that.material_name !== null) {
that.params.name = that.material_name; that.params.name = that.material_name;
} }
that.params.query = '{id,name,model,specification,count_mb,week_esitimate_consume}'; that.params.query = '{id,name,model,specification,count_mb,week_esitimate_consume}';
this.$API.mtm.material.list.req(that.params).then((res) => { this.$API.mtm.material.list.req(that.params).then((res) => {
that.tableData11 = res; that.tableData11 = res;
if(res.length>0){ if (res.length > 0) {
res.forEach((ite) =>{ res.forEach((ite) => {
if (nameList.indexOf(ite.name) > -1) {} else { if (nameList.indexOf(ite.name) > -1) { } else {
nameList.push(ite.name); nameList.push(ite.name);
let obj = {}; let obj = {};
obj.text = ite.name; obj.text = ite.name;
obj.value = ite.name; obj.value = ite.name;
that.nameFilters11.push(obj); that.nameFilters11.push(obj);
} }
if(modelList.indexOf(ite.model)>-1){}else{ if (modelList.indexOf(ite.model) > -1) { } else {
modelList.push(ite.model); modelList.push(ite.model);
let obj2 = {}; let obj2 = {};
obj2.text = ite.model; obj2.text = ite.model;
obj2.value = ite.model; obj2.value = ite.model;
that.modelFilters11.push(obj2); that.modelFilters11.push(obj2);
} }
if(specsList.indexOf(ite.specification)>-1){}else{ if (specsList.indexOf(ite.specification) > -1) { } else {
specsList.push(ite.specification); specsList.push(ite.specification);
let obj3 = {}; let obj3 = {};
obj3.text = ite.specification; obj3.text = ite.specification;
@ -399,20 +308,34 @@ export default {
} }
}); });
}, },
materialTypeChange(){ materialTypeChange() {
let that = this; let that = this;
that.mquery.type__in = that.params.type; that.mquery.type__in = that.params.type;
that.material_type = that.params.type; that.material_type = that.params.type;
if(that.params.type == 10 || that.params.type == 20){ if (that.params.type == 10 || that.params.type == 20) {
that.getTableData1(); that.getTableData1();
}else{ } else {
that.getTableData11(); that.getTableData11();
} }
that.getTableData(); that.getTableData();
that.initChartOptions();
},
initChartOptions() {
this.$API.bi.dataset.exec.req("materialCount", {query: {
"select_dept": "",
"groupby_dept": "",
"material_types": this.params.type,
"select_material": "",
"groupby_material": ""
}}).then((res) => {
if (res.echart_options) {
this.echartsOptions = JSON.parse(res.echart_options);
}
})
}, },
// //
weekcountChange(row) { weekcountChange(row) {
let obj = {week_esitimate_consume: row.week_esitimate_consume}; let obj = { week_esitimate_consume: row.week_esitimate_consume };
this.$API.mtm.material.setWeekConsume.req(row.id, obj).then((res) => { this.$API.mtm.material.setWeekConsume.req(row.id, obj).then((res) => {
this.$refs.tables1.refresh(); this.$refs.tables1.refresh();
}); });
@ -424,7 +347,7 @@ export default {
that.deptFilters2 = []; that.deptFilters2 = [];
that.modelFilters2 = []; that.modelFilters2 = [];
that.specsFilters2 = []; that.specsFilters2 = [];
let nameList=[],deptList = [],specsList=[],modelList=[]; let nameList = [], deptList = [], specsList = [], modelList = [];
let exec = that.queryType == "月" ? "saleOutMonth" : "saleOutYear"; let exec = that.queryType == "月" ? "saleOutMonth" : "saleOutYear";
let obj = { let obj = {
query: { query: {
@ -433,46 +356,46 @@ export default {
mio_type: that.query.mio_type, mio_type: that.query.mio_type,
}, },
}; };
if(that.material_name!==''&&that.material_name!==null){ if (that.material_name !== '' && that.material_name !== null) {
obj.query.material_name = that.material_name; obj.query.material_name = that.material_name;
} }
if(that.material_type!==''&&that.material_type!==null){ if (that.material_type !== '' && that.material_type !== null) {
obj.query.material_type = that.material_type; obj.query.material_type = that.material_type;
} }
if(that.material_model!==''&&that.material_model!==null){ if (that.material_model !== '' && that.material_model !== null) {
obj.query.material_model = that.material_model; obj.query.material_model = that.material_model;
} }
if(that.material_specification!==''&&that.material_specification!==null){ if (that.material_specification !== '' && that.material_specification !== null) {
obj.query.material_specification = that.material_specification; obj.query.material_specification = that.material_specification;
} }
that.$API.bi.dataset.exec.req(exec, obj).then((res) => { that.$API.bi.dataset.exec.req(exec, obj).then((res) => {
if (res.data2.ds0) { if (res.data2.ds0) {
let data = res.data2.ds0; let data = res.data2.ds0;
that.tableData = data; that.tableData = data;
if(data.length>0){ if (data.length > 0) {
data.forEach((ite) => { data.forEach((ite) => {
if (nameList.indexOf(ite.物料名) > -1) {} else { if (nameList.indexOf(ite.物料名) > -1) { } else {
nameList.push(ite.物料名); nameList.push(ite.物料名);
let obj = {}; let obj = {};
obj.text = ite.物料名; obj.text = ite.物料名;
obj.value = ite.物料名; obj.value = ite.物料名;
that.nameFilters2.push(obj); that.nameFilters2.push(obj);
} }
if(modelList.indexOf(ite.型号)>-1){}else{ if (modelList.indexOf(ite.型号) > -1) { } else {
modelList.push(ite.型号); modelList.push(ite.型号);
let obj2 = {}; let obj2 = {};
obj2.text = ite.型号; obj2.text = ite.型号;
obj2.value = ite.型号; obj2.value = ite.型号;
that.modelFilters2.push(obj2); that.modelFilters2.push(obj2);
} }
if(specsList.indexOf(ite.规格)>-1){}else{ if (specsList.indexOf(ite.规格) > -1) { } else {
specsList.push(ite.规格); specsList.push(ite.规格);
let obj3 = {}; let obj3 = {};
obj3.text = ite.规格; obj3.text = ite.规格;
obj3.value = ite.规格; obj3.value = ite.规格;
that.specsFilters2.push(obj3); that.specsFilters2.push(obj3);
} }
if(deptList.indexOf(ite.执行车间)>-1){}else{ if (deptList.indexOf(ite.执行车间) > -1) { } else {
deptList.push(ite.执行车间); deptList.push(ite.执行车间);
let obj4 = {}; let obj4 = {};
obj4.text = ite.执行车间; obj4.text = ite.执行车间;