projects/mes-test #132
@ -60,31 +60,31 @@ export default {
|
|||||||
this.chart = echarts.init(this.$el, 'macarons');
|
this.chart = echarts.init(this.$el, 'macarons');
|
||||||
|
|
||||||
this.chart.setOption({
|
this.chart.setOption({
|
||||||
title: {
|
// title: {
|
||||||
text: this.title
|
// text: this.title
|
||||||
? '{space|}{tip|}{space|}{value|' + this.title + '}'
|
// ? '{space|}{tip|}{space|}{value|' + this.title + '}'
|
||||||
: '',
|
// : '',
|
||||||
left: '0%',
|
// left: '0%',
|
||||||
top: '0%',
|
// top: '0%',
|
||||||
textStyle: {
|
// textStyle: {
|
||||||
rich: {
|
// rich: {
|
||||||
tip: {
|
// tip: {
|
||||||
width: 4,
|
// width: 4,
|
||||||
height: 18,
|
// height: 18,
|
||||||
backgroundColor: '#0B58FF',
|
// backgroundColor: '#0B58FF',
|
||||||
marginRight: 6,
|
// marginRight: 6,
|
||||||
},
|
// },
|
||||||
space: {
|
// space: {
|
||||||
width: 8,
|
// width: 8,
|
||||||
},
|
// },
|
||||||
value: {
|
// value: {
|
||||||
fontSize: 16,
|
// fontSize: 16,
|
||||||
fontWeight: 'bold',
|
// fontWeight: 'bold',
|
||||||
color: 'black',
|
// color: 'black',
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
color: ['#288AFF', '#8EF0AB', '#FFDC94'],
|
color: ['#288AFF', '#8EF0AB', '#FFDC94'],
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
@ -148,6 +148,7 @@ export default {
|
|||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
gridIndex: 0,
|
gridIndex: 0,
|
||||||
|
name: '库存数量',
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
@ -160,6 +161,7 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
gridIndex: 1,
|
gridIndex: 1,
|
||||||
|
name: '剩余使用天数',
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
|
@ -59,7 +59,7 @@ export default {
|
|||||||
zlevel: 2, // 控制圆环图中间的字的层级
|
zlevel: 2, // 控制圆环图中间的字的层级
|
||||||
text: '总数',
|
text: '总数',
|
||||||
subtext: totalNumber,
|
subtext: totalNumber,
|
||||||
top: '42%', // 控制位置
|
top: '35%', // 控制位置
|
||||||
left: '50%', // 控制位置
|
left: '50%', // 控制位置
|
||||||
textAlign: 'center', // 让文字居中
|
textAlign: 'center', // 让文字居中
|
||||||
textStyle: {
|
textStyle: {
|
||||||
@ -72,7 +72,7 @@ export default {
|
|||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
show: true, // 控制鼠标悬浮是否显示数据
|
show: true, // 控制鼠标悬浮是否显示数据
|
||||||
formatter: '产品: {b}<br/>数量: {c}<br/>占比: {d}%',
|
formatter: '{b}<br/>数量: {c}<br/>占比: {d}%',
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
orient: 'vartical',
|
orient: 'vartical',
|
||||||
|
@ -2,16 +2,20 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2023-08-22 15:01:54
|
* @Date: 2023-08-22 15:01:54
|
||||||
* @LastEditors: zwq
|
* @LastEditors: zwq
|
||||||
* @LastEditTime: 2023-11-04 16:32:13
|
* @LastEditTime: 2023-11-07 14:12:00
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<el-row :gutter="10" class="chart-container">
|
<el-row :gutter="10" class="chart-container">
|
||||||
<el-col :span="14">
|
<el-col :span="wareType === 1 ? 14 : 24">
|
||||||
<div class="chart-card">
|
<div class="chart-card">
|
||||||
|
<div class="title">库存总览</div>
|
||||||
|
<div class="sub-title">产品总数量
|
||||||
|
<div style="color: black;">{{ totalNum }}</div>
|
||||||
|
</div>
|
||||||
<barChart
|
<barChart
|
||||||
ref="barChart"
|
ref="barChart"
|
||||||
height="500px"
|
height="600px"
|
||||||
title="库存总览"
|
title="库存总览"
|
||||||
v-if="overviewList.length"
|
v-if="overviewList.length"
|
||||||
:histogram="overviewList" />
|
:histogram="overviewList" />
|
||||||
@ -19,11 +23,13 @@
|
|||||||
<div class="no-data-bg" v-else></div>
|
<div class="no-data-bg" v-else></div>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="10">
|
<el-col :span="wareType === 1 ? 10 : 0">
|
||||||
<div class="chart-card">
|
<div class="chart-card">
|
||||||
|
<div class="title">库位占用率</div>
|
||||||
<pieChart
|
<pieChart
|
||||||
ref="pieChart"
|
ref="pieChart"
|
||||||
height="600px"
|
height="600px"
|
||||||
|
title="库位占用率"
|
||||||
v-if="rateList.length"
|
v-if="rateList.length"
|
||||||
:pie-data="rateList" />
|
:pie-data="rateList" />
|
||||||
<!-- 没有数据 -->
|
<!-- 没有数据 -->
|
||||||
@ -36,46 +42,62 @@
|
|||||||
<script>
|
<script>
|
||||||
import barChart from '../../chart/BarChart.vue';
|
import barChart from '../../chart/BarChart.vue';
|
||||||
import pieChart from '../../chart/PieChart.vue';
|
import pieChart from '../../chart/PieChart.vue';
|
||||||
import {
|
import { getOverview, getRate } from '@/api/warehouse/warehouseLocation';
|
||||||
getOverview,
|
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
|
||||||
getRate,
|
|
||||||
} from '@/api/warehouse/warehouseLocation';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
allURL: getOverview,
|
allURL: getOverview,
|
||||||
rateURL: getRate
|
rateURL: getRate,
|
||||||
},
|
},
|
||||||
|
listQuery: {
|
||||||
|
storageType: 2,
|
||||||
|
},
|
||||||
|
wareType: 1,
|
||||||
|
totalNum: 0,
|
||||||
overviewList: [],
|
overviewList: [],
|
||||||
rateList: []
|
rateList: [],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
barChart,
|
barChart,
|
||||||
pieChart
|
pieChart,
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getDataList();
|
this.getDataList();
|
||||||
},
|
},
|
||||||
|
created() {
|
||||||
|
getWarehouseList().then((response) => {
|
||||||
|
response.data.forEach((item) => {
|
||||||
|
if (item.storageType === this.listQuery.storageType) {
|
||||||
|
this.wareType = item.type;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 获取数据列表
|
// 获取数据列表
|
||||||
getDataList() {
|
getDataList() {
|
||||||
const data = {
|
this.urlOptions.allURL(this.listQuery).then((response) => {
|
||||||
storageType : 2
|
if (response.data && response.data.length) {
|
||||||
}
|
|
||||||
this.urlOptions.allURL(data).then((response) => {
|
|
||||||
this.overviewList = response.data;
|
this.overviewList = response.data;
|
||||||
|
this.overviewList.forEach(item=>{
|
||||||
|
this.totalNum += item.num
|
||||||
|
})
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.barChart.initChart();
|
this.$refs.barChart.initChart();
|
||||||
});
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
this.urlOptions.rateURL(data).then((response) => {
|
this.urlOptions.rateURL(this.listQuery).then((response) => {
|
||||||
|
if (response.data && response.data.length) {
|
||||||
this.rateList = response.data;
|
this.rateList = response.data;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.pieChart.initChart();
|
this.$refs.pieChart.initChart();
|
||||||
});
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -93,4 +115,33 @@ export default {
|
|||||||
padding: 16px;
|
padding: 16px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
.title {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 16px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #000;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
.title::before {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
width: 4px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 1px;
|
||||||
|
margin-right: 5px;
|
||||||
|
background-color: #0b58ff;
|
||||||
|
}
|
||||||
|
.sub-title{
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 18px;
|
||||||
|
color: #888686;
|
||||||
|
min-width: 80px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-right: 30px;
|
||||||
|
font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -58,7 +58,7 @@ import {
|
|||||||
getWarehouseLocationHisPage,
|
getWarehouseLocationHisPage,
|
||||||
} from '@/api/warehouse/warehouseRealtimeLocation';
|
} from '@/api/warehouse/warehouseRealtimeLocation';
|
||||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
|
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
|
||||||
|
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
|
||||||
import { listData } from '@/api/system/dict/data';
|
import { listData } from '@/api/system/dict/data';
|
||||||
import { publicFormatter } from '@/utils/dict';
|
import { publicFormatter } from '@/utils/dict';
|
||||||
|
|
||||||
@ -179,9 +179,15 @@ export default {
|
|||||||
listData(queryParams).then((response) => {
|
listData(queryParams).then((response) => {
|
||||||
this.formConfig[2].selectOptions = response.data.list;
|
this.formConfig[2].selectOptions = response.data.list;
|
||||||
});
|
});
|
||||||
listByWarehouse(this.listQuery.storageType).then((response) => {
|
getWarehouseList().then((response) => {
|
||||||
|
response.data.forEach((item) => {
|
||||||
|
if (item.storageType === this.listQuery.storageType) {
|
||||||
|
listByWarehouse(item.id).then((response) => {
|
||||||
this.formConfig[0].selectOptions = response.data;
|
this.formConfig[0].selectOptions = response.data;
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
buttonClick(val) {
|
buttonClick(val) {
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2023-08-21 14:26:23
|
* @Date: 2023-08-21 14:26:23
|
||||||
* @LastEditors: zwq
|
* @LastEditors: zwq
|
||||||
* @LastEditTime: 2023-11-04 14:46:59
|
* @LastEditTime: 2023-11-06 11:25:34
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
@ -93,7 +93,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { listByWarehouse, listAll } from '@/api/warehouse/warehouseLocation';
|
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
|
||||||
|
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
@ -129,7 +130,10 @@ export default {
|
|||||||
there: [],
|
there: [],
|
||||||
four: [],
|
four: [],
|
||||||
}),
|
}),
|
||||||
listAll(1).then((response) => {
|
getWarehouseList().then((response) => {
|
||||||
|
response.data.forEach((item) => {
|
||||||
|
if (item.storageType === 2) {
|
||||||
|
listByWarehouse(item.id).then((response) => {
|
||||||
response.data.forEach((a, b) => {
|
response.data.forEach((a, b) => {
|
||||||
if (b % 4 === 0) {
|
if (b % 4 === 0) {
|
||||||
this.wareData.one.push(a);
|
this.wareData.one.push(a);
|
||||||
@ -143,6 +147,9 @@ export default {
|
|||||||
});
|
});
|
||||||
this.total = Math.ceil(response.data.length / 40);
|
this.total = Math.ceil(response.data.length / 40);
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
},
|
},
|
||||||
buttonClick(val) {
|
buttonClick(val) {
|
||||||
switch (val.btnName) {
|
switch (val.btnName) {
|
||||||
|
@ -64,7 +64,7 @@ import {
|
|||||||
outWarehouseRealtimeLocation,
|
outWarehouseRealtimeLocation,
|
||||||
} from '@/api/warehouse/warehouseRealtimeLocation';
|
} from '@/api/warehouse/warehouseRealtimeLocation';
|
||||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
|
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
|
||||||
|
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
|
||||||
import { listData } from '@/api/system/dict/data';
|
import { listData } from '@/api/system/dict/data';
|
||||||
import { publicFormatter } from '@/utils/dict';
|
import { publicFormatter } from '@/utils/dict';
|
||||||
import { mapGetters } from 'vuex';
|
import { mapGetters } from 'vuex';
|
||||||
@ -203,9 +203,15 @@ export default {
|
|||||||
listData(queryParams).then((response) => {
|
listData(queryParams).then((response) => {
|
||||||
this.formConfig[2].selectOptions = response.data.list;
|
this.formConfig[2].selectOptions = response.data.list;
|
||||||
});
|
});
|
||||||
listByWarehouse(this.listQuery.storageType).then((response) => {
|
getWarehouseList().then((response) => {
|
||||||
|
response.data.forEach((item) => {
|
||||||
|
if (item.storageType === this.listQuery.storageType) {
|
||||||
|
listByWarehouse(item.id).then((response) => {
|
||||||
this.formConfig[0].selectOptions = response.data;
|
this.formConfig[0].selectOptions = response.data;
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
buttonClick(val) {
|
buttonClick(val) {
|
||||||
|
@ -2,16 +2,20 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2023-08-22 15:01:54
|
* @Date: 2023-08-22 15:01:54
|
||||||
* @LastEditors: zwq
|
* @LastEditors: zwq
|
||||||
* @LastEditTime: 2023-11-04 16:11:36
|
* @LastEditTime: 2023-11-07 14:11:50
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<el-row :gutter="10" class="chart-container">
|
<el-row :gutter="10" class="chart-container">
|
||||||
<el-col :span="14">
|
<el-col :span="wareType === 1 ? 14 : 24">
|
||||||
<div class="chart-card">
|
<div class="chart-card">
|
||||||
|
<div class="title">库存总览</div>
|
||||||
|
<div class="sub-title">产品总数量
|
||||||
|
<div style="color: black;">{{ totalNum }}</div>
|
||||||
|
</div>
|
||||||
<barChart
|
<barChart
|
||||||
ref="barChart"
|
ref="barChart"
|
||||||
height="500px"
|
height="600px"
|
||||||
title="库存总览"
|
title="库存总览"
|
||||||
v-if="overviewList.length"
|
v-if="overviewList.length"
|
||||||
:histogram="overviewList" />
|
:histogram="overviewList" />
|
||||||
@ -19,11 +23,13 @@
|
|||||||
<div class="no-data-bg" v-else></div>
|
<div class="no-data-bg" v-else></div>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="10">
|
<el-col :span="wareType === 1 ? 10 : 0">
|
||||||
<div class="chart-card">
|
<div class="chart-card">
|
||||||
|
<div class="title">库位占用率</div>
|
||||||
<pieChart
|
<pieChart
|
||||||
ref="pieChart"
|
ref="pieChart"
|
||||||
height="600px"
|
height="600px"
|
||||||
|
title="库位占用率"
|
||||||
v-if="rateList.length"
|
v-if="rateList.length"
|
||||||
:pie-data="rateList" />
|
:pie-data="rateList" />
|
||||||
<!-- 没有数据 -->
|
<!-- 没有数据 -->
|
||||||
@ -36,46 +42,62 @@
|
|||||||
<script>
|
<script>
|
||||||
import barChart from '../../chart/BarChart.vue';
|
import barChart from '../../chart/BarChart.vue';
|
||||||
import pieChart from '../../chart/PieChart.vue';
|
import pieChart from '../../chart/PieChart.vue';
|
||||||
import {
|
import { getOverview, getRate } from '@/api/warehouse/warehouseLocation';
|
||||||
getOverview,
|
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
|
||||||
getRate,
|
|
||||||
} from '@/api/warehouse/warehouseLocation';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
allURL: getOverview,
|
allURL: getOverview,
|
||||||
rateURL: getRate
|
rateURL: getRate,
|
||||||
},
|
},
|
||||||
|
listQuery: {
|
||||||
|
storageType: 5,
|
||||||
|
},
|
||||||
|
wareType: 1,
|
||||||
|
totalNum: 0,
|
||||||
overviewList: [],
|
overviewList: [],
|
||||||
rateList: []
|
rateList: [],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
barChart,
|
barChart,
|
||||||
pieChart
|
pieChart,
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getDataList();
|
this.getDataList();
|
||||||
},
|
},
|
||||||
|
created() {
|
||||||
|
getWarehouseList().then((response) => {
|
||||||
|
response.data.forEach((item) => {
|
||||||
|
if (item.storageType === this.listQuery.storageType) {
|
||||||
|
this.wareType = item.type;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 获取数据列表
|
// 获取数据列表
|
||||||
getDataList() {
|
getDataList() {
|
||||||
const data = {
|
this.urlOptions.allURL(this.listQuery).then((response) => {
|
||||||
storageType : 5
|
if (response.data && response.data.length) {
|
||||||
}
|
|
||||||
this.urlOptions.allURL(data).then((response) => {
|
|
||||||
this.overviewList = response.data;
|
this.overviewList = response.data;
|
||||||
|
this.overviewList.forEach(item=>{
|
||||||
|
this.totalNum += item.num
|
||||||
|
})
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.barChart.initChart();
|
this.$refs.barChart.initChart();
|
||||||
});
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
this.urlOptions.rateURL(data).then((response) => {
|
this.urlOptions.rateURL(this.listQuery).then((response) => {
|
||||||
|
if (response.data && response.data.length) {
|
||||||
this.rateList = response.data;
|
this.rateList = response.data;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.pieChart.initChart();
|
this.$refs.pieChart.initChart();
|
||||||
});
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -93,4 +115,33 @@ export default {
|
|||||||
padding: 16px;
|
padding: 16px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
.title {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 16px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #000;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
.title::before {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
width: 4px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 1px;
|
||||||
|
margin-right: 5px;
|
||||||
|
background-color: #0b58ff;
|
||||||
|
}
|
||||||
|
.sub-title{
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 18px;
|
||||||
|
color: #888686;
|
||||||
|
min-width: 80px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-right: 30px;
|
||||||
|
font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -58,7 +58,7 @@ import {
|
|||||||
getWarehouseLocationHisPage,
|
getWarehouseLocationHisPage,
|
||||||
} from '@/api/warehouse/warehouseRealtimeLocation';
|
} from '@/api/warehouse/warehouseRealtimeLocation';
|
||||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
|
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
|
||||||
|
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
|
||||||
import { listData } from '@/api/system/dict/data';
|
import { listData } from '@/api/system/dict/data';
|
||||||
import { publicFormatter } from '@/utils/dict';
|
import { publicFormatter } from '@/utils/dict';
|
||||||
|
|
||||||
@ -179,9 +179,15 @@ export default {
|
|||||||
listData(queryParams).then((response) => {
|
listData(queryParams).then((response) => {
|
||||||
this.formConfig[2].selectOptions = response.data.list;
|
this.formConfig[2].selectOptions = response.data.list;
|
||||||
});
|
});
|
||||||
listByWarehouse(this.listQuery.storageType).then((response) => {
|
getWarehouseList().then((response) => {
|
||||||
|
response.data.forEach((item) => {
|
||||||
|
if (item.storageType === this.listQuery.storageType) {
|
||||||
|
listByWarehouse(item.id).then((response) => {
|
||||||
this.formConfig[0].selectOptions = response.data;
|
this.formConfig[0].selectOptions = response.data;
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
buttonClick(val) {
|
buttonClick(val) {
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2023-08-21 14:26:23
|
* @Date: 2023-08-21 14:26:23
|
||||||
* @LastEditors: zwq
|
* @LastEditors: zwq
|
||||||
* @LastEditTime: 2023-11-04 14:46:59
|
* @LastEditTime: 2023-11-06 11:32:23
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
@ -93,7 +93,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { listByWarehouse, listAll } from '@/api/warehouse/warehouseLocation';
|
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
|
||||||
|
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
@ -129,7 +130,10 @@ export default {
|
|||||||
there: [],
|
there: [],
|
||||||
four: [],
|
four: [],
|
||||||
}),
|
}),
|
||||||
listAll(1).then((response) => {
|
getWarehouseList().then((response) => {
|
||||||
|
response.data.forEach((item) => {
|
||||||
|
if (item.storageType === 5) {
|
||||||
|
listByWarehouse(item.id).then((response) => {
|
||||||
response.data.forEach((a, b) => {
|
response.data.forEach((a, b) => {
|
||||||
if (b % 4 === 0) {
|
if (b % 4 === 0) {
|
||||||
this.wareData.one.push(a);
|
this.wareData.one.push(a);
|
||||||
@ -143,6 +147,9 @@ export default {
|
|||||||
});
|
});
|
||||||
this.total = Math.ceil(response.data.length / 40);
|
this.total = Math.ceil(response.data.length / 40);
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
},
|
},
|
||||||
buttonClick(val) {
|
buttonClick(val) {
|
||||||
switch (val.btnName) {
|
switch (val.btnName) {
|
||||||
|
@ -64,7 +64,7 @@ import {
|
|||||||
outWarehouseRealtimeLocation,
|
outWarehouseRealtimeLocation,
|
||||||
} from '@/api/warehouse/warehouseRealtimeLocation';
|
} from '@/api/warehouse/warehouseRealtimeLocation';
|
||||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
|
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
|
||||||
|
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
|
||||||
import { listData } from '@/api/system/dict/data';
|
import { listData } from '@/api/system/dict/data';
|
||||||
import { publicFormatter } from '@/utils/dict';
|
import { publicFormatter } from '@/utils/dict';
|
||||||
import { mapGetters } from 'vuex';
|
import { mapGetters } from 'vuex';
|
||||||
@ -203,9 +203,15 @@ export default {
|
|||||||
listData(queryParams).then((response) => {
|
listData(queryParams).then((response) => {
|
||||||
this.formConfig[2].selectOptions = response.data.list;
|
this.formConfig[2].selectOptions = response.data.list;
|
||||||
});
|
});
|
||||||
listByWarehouse(this.listQuery.storageType).then((response) => {
|
getWarehouseList().then((response) => {
|
||||||
|
response.data.forEach((item) => {
|
||||||
|
if (item.storageType === this.listQuery.storageType) {
|
||||||
|
listByWarehouse(item.id).then((response) => {
|
||||||
this.formConfig[0].selectOptions = response.data;
|
this.formConfig[0].selectOptions = response.data;
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
buttonClick(val) {
|
buttonClick(val) {
|
||||||
|
@ -2,16 +2,20 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2023-08-22 15:01:54
|
* @Date: 2023-08-22 15:01:54
|
||||||
* @LastEditors: zwq
|
* @LastEditors: zwq
|
||||||
* @LastEditTime: 2023-11-04 16:06:10
|
* @LastEditTime: 2023-11-07 14:11:37
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<el-row :gutter="10" class="chart-container">
|
<el-row :gutter="10" class="chart-container">
|
||||||
<el-col :span="14">
|
<el-col :span="wareType === 1 ? 14 : 24">
|
||||||
<div class="chart-card">
|
<div class="chart-card">
|
||||||
|
<div class="title">库存总览</div>
|
||||||
|
<div class="sub-title">产品总数量
|
||||||
|
<div style="color: black;">{{ totalNum }}</div>
|
||||||
|
</div>
|
||||||
<barChart
|
<barChart
|
||||||
ref="barChart"
|
ref="barChart"
|
||||||
height="500px"
|
height="600px"
|
||||||
title="库存总览"
|
title="库存总览"
|
||||||
v-if="overviewList.length"
|
v-if="overviewList.length"
|
||||||
:histogram="overviewList" />
|
:histogram="overviewList" />
|
||||||
@ -19,11 +23,13 @@
|
|||||||
<div class="no-data-bg" v-else></div>
|
<div class="no-data-bg" v-else></div>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="10">
|
<el-col :span="wareType === 1 ? 10 : 0">
|
||||||
<div class="chart-card">
|
<div class="chart-card">
|
||||||
|
<div class="title">库位占用率</div>
|
||||||
<pieChart
|
<pieChart
|
||||||
ref="pieChart"
|
ref="pieChart"
|
||||||
height="600px"
|
height="600px"
|
||||||
|
title="库位占用率"
|
||||||
v-if="rateList.length"
|
v-if="rateList.length"
|
||||||
:pie-data="rateList" />
|
:pie-data="rateList" />
|
||||||
<!-- 没有数据 -->
|
<!-- 没有数据 -->
|
||||||
@ -36,46 +42,62 @@
|
|||||||
<script>
|
<script>
|
||||||
import barChart from '../../chart/BarChart.vue';
|
import barChart from '../../chart/BarChart.vue';
|
||||||
import pieChart from '../../chart/PieChart.vue';
|
import pieChart from '../../chart/PieChart.vue';
|
||||||
import {
|
import { getOverview, getRate } from '@/api/warehouse/warehouseLocation';
|
||||||
getOverview,
|
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
|
||||||
getRate,
|
|
||||||
} from '@/api/warehouse/warehouseLocation';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
allURL: getOverview,
|
allURL: getOverview,
|
||||||
rateURL: getRate
|
rateURL: getRate,
|
||||||
},
|
},
|
||||||
|
listQuery: {
|
||||||
|
storageType: 3,
|
||||||
|
},
|
||||||
|
wareType: 1,
|
||||||
|
totalNum: 0,
|
||||||
overviewList: [],
|
overviewList: [],
|
||||||
rateList: []
|
rateList: [],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
barChart,
|
barChart,
|
||||||
pieChart
|
pieChart,
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getDataList();
|
this.getDataList();
|
||||||
},
|
},
|
||||||
|
created() {
|
||||||
|
getWarehouseList().then((response) => {
|
||||||
|
response.data.forEach((item) => {
|
||||||
|
if (item.storageType === this.listQuery.storageType) {
|
||||||
|
this.wareType = item.type;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 获取数据列表
|
// 获取数据列表
|
||||||
getDataList() {
|
getDataList() {
|
||||||
const data = {
|
this.urlOptions.allURL(this.listQuery).then((response) => {
|
||||||
storageType : 3
|
if (response.data && response.data.length) {
|
||||||
}
|
|
||||||
this.urlOptions.allURL(data).then((response) => {
|
|
||||||
this.overviewList = response.data;
|
this.overviewList = response.data;
|
||||||
|
this.overviewList.forEach(item=>{
|
||||||
|
this.totalNum += item.num
|
||||||
|
})
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.barChart.initChart();
|
this.$refs.barChart.initChart();
|
||||||
});
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
this.urlOptions.rateURL(data).then((response) => {
|
this.urlOptions.rateURL(this.listQuery).then((response) => {
|
||||||
|
if (response.data && response.data.length) {
|
||||||
this.rateList = response.data;
|
this.rateList = response.data;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.pieChart.initChart();
|
this.$refs.pieChart.initChart();
|
||||||
});
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -93,4 +115,33 @@ export default {
|
|||||||
padding: 16px;
|
padding: 16px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
.title {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 16px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #000;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
.title::before {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
width: 4px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 1px;
|
||||||
|
margin-right: 5px;
|
||||||
|
background-color: #0b58ff;
|
||||||
|
}
|
||||||
|
.sub-title{
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 18px;
|
||||||
|
color: #888686;
|
||||||
|
min-width: 80px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-right: 30px;
|
||||||
|
font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -58,7 +58,7 @@ import {
|
|||||||
getWarehouseLocationHisPage,
|
getWarehouseLocationHisPage,
|
||||||
} from '@/api/warehouse/warehouseRealtimeLocation';
|
} from '@/api/warehouse/warehouseRealtimeLocation';
|
||||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
|
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
|
||||||
|
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
|
||||||
import { listData } from '@/api/system/dict/data';
|
import { listData } from '@/api/system/dict/data';
|
||||||
import { publicFormatter } from '@/utils/dict';
|
import { publicFormatter } from '@/utils/dict';
|
||||||
|
|
||||||
@ -179,9 +179,15 @@ export default {
|
|||||||
listData(queryParams).then((response) => {
|
listData(queryParams).then((response) => {
|
||||||
this.formConfig[2].selectOptions = response.data.list;
|
this.formConfig[2].selectOptions = response.data.list;
|
||||||
});
|
});
|
||||||
listByWarehouse(3).then((response) => {
|
getWarehouseList().then((response) => {
|
||||||
|
response.data.forEach((item) => {
|
||||||
|
if (item.storageType === this.listQuery.storageType) {
|
||||||
|
listByWarehouse(item.id).then((response) => {
|
||||||
this.formConfig[0].selectOptions = response.data;
|
this.formConfig[0].selectOptions = response.data;
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
buttonClick(val) {
|
buttonClick(val) {
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2023-08-21 14:26:23
|
* @Date: 2023-08-21 14:26:23
|
||||||
* @LastEditors: zwq
|
* @LastEditors: zwq
|
||||||
* @LastEditTime: 2023-11-04 14:46:59
|
* @LastEditTime: 2023-11-06 11:31:52
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
@ -93,7 +93,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { listByWarehouse, listAll } from '@/api/warehouse/warehouseLocation';
|
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
|
||||||
|
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
@ -129,7 +130,10 @@ export default {
|
|||||||
there: [],
|
there: [],
|
||||||
four: [],
|
four: [],
|
||||||
}),
|
}),
|
||||||
listAll(1).then((response) => {
|
getWarehouseList().then((response) => {
|
||||||
|
response.data.forEach((item) => {
|
||||||
|
if (item.storageType === 3) {
|
||||||
|
listByWarehouse(item.id).then((response) => {
|
||||||
response.data.forEach((a, b) => {
|
response.data.forEach((a, b) => {
|
||||||
if (b % 4 === 0) {
|
if (b % 4 === 0) {
|
||||||
this.wareData.one.push(a);
|
this.wareData.one.push(a);
|
||||||
@ -143,6 +147,9 @@ export default {
|
|||||||
});
|
});
|
||||||
this.total = Math.ceil(response.data.length / 40);
|
this.total = Math.ceil(response.data.length / 40);
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
},
|
},
|
||||||
buttonClick(val) {
|
buttonClick(val) {
|
||||||
switch (val.btnName) {
|
switch (val.btnName) {
|
||||||
|
@ -64,7 +64,7 @@ import {
|
|||||||
outWarehouseRealtimeLocation,
|
outWarehouseRealtimeLocation,
|
||||||
} from '@/api/warehouse/warehouseRealtimeLocation';
|
} from '@/api/warehouse/warehouseRealtimeLocation';
|
||||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
|
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
|
||||||
|
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
|
||||||
import { listData } from '@/api/system/dict/data';
|
import { listData } from '@/api/system/dict/data';
|
||||||
import { publicFormatter } from '@/utils/dict';
|
import { publicFormatter } from '@/utils/dict';
|
||||||
import { mapGetters } from 'vuex';
|
import { mapGetters } from 'vuex';
|
||||||
@ -203,9 +203,15 @@ export default {
|
|||||||
listData(queryParams).then((response) => {
|
listData(queryParams).then((response) => {
|
||||||
this.formConfig[2].selectOptions = response.data.list;
|
this.formConfig[2].selectOptions = response.data.list;
|
||||||
});
|
});
|
||||||
listByWarehouse(3).then((response) => {
|
getWarehouseList().then((response) => {
|
||||||
|
response.data.forEach((item) => {
|
||||||
|
if (item.storageType === this.listQuery.storageType) {
|
||||||
|
listByWarehouse(item.id).then((response) => {
|
||||||
this.formConfig[0].selectOptions = response.data;
|
this.formConfig[0].selectOptions = response.data;
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
buttonClick(val) {
|
buttonClick(val) {
|
||||||
|
@ -2,16 +2,20 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2023-08-22 15:01:54
|
* @Date: 2023-08-22 15:01:54
|
||||||
* @LastEditors: zwq
|
* @LastEditors: zwq
|
||||||
* @LastEditTime: 2023-11-04 16:24:11
|
* @LastEditTime: 2023-11-07 14:11:24
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<el-row :gutter="10" class="chart-container">
|
<el-row :gutter="10" class="chart-container">
|
||||||
<el-col :span="14">
|
<el-col :span="wareType === 1 ? 14 : 24">
|
||||||
<div class="chart-card">
|
<div class="chart-card">
|
||||||
|
<div class="title">库存总览</div>
|
||||||
|
<div class="sub-title">产品总数量
|
||||||
|
<div style="color: black;">{{ totalNum }}</div>
|
||||||
|
</div>
|
||||||
<barChart
|
<barChart
|
||||||
ref="barChart"
|
ref="barChart"
|
||||||
height="500px"
|
height="600px"
|
||||||
title="库存总览"
|
title="库存总览"
|
||||||
v-if="overviewList.length"
|
v-if="overviewList.length"
|
||||||
:histogram="overviewList" />
|
:histogram="overviewList" />
|
||||||
@ -19,11 +23,13 @@
|
|||||||
<div class="no-data-bg" v-else></div>
|
<div class="no-data-bg" v-else></div>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="10">
|
<el-col :span="wareType === 1 ? 10 : 0">
|
||||||
<div class="chart-card">
|
<div class="chart-card">
|
||||||
|
<div class="title">库位占用率</div>
|
||||||
<pieChart
|
<pieChart
|
||||||
ref="pieChart"
|
ref="pieChart"
|
||||||
height="600px"
|
height="600px"
|
||||||
|
title="库位占用率"
|
||||||
v-if="rateList.length"
|
v-if="rateList.length"
|
||||||
:pie-data="rateList" />
|
:pie-data="rateList" />
|
||||||
<!-- 没有数据 -->
|
<!-- 没有数据 -->
|
||||||
@ -36,46 +42,62 @@
|
|||||||
<script>
|
<script>
|
||||||
import barChart from '../../chart/BarChart.vue';
|
import barChart from '../../chart/BarChart.vue';
|
||||||
import pieChart from '../../chart/PieChart.vue';
|
import pieChart from '../../chart/PieChart.vue';
|
||||||
import {
|
import { getOverview, getRate } from '@/api/warehouse/warehouseLocation';
|
||||||
getOverview,
|
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
|
||||||
getRate,
|
|
||||||
} from '@/api/warehouse/warehouseLocation';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
allURL: getOverview,
|
allURL: getOverview,
|
||||||
rateURL: getRate
|
rateURL: getRate,
|
||||||
},
|
},
|
||||||
|
listQuery: {
|
||||||
|
storageType: 4,
|
||||||
|
},
|
||||||
|
wareType: 1,
|
||||||
|
totalNum: 0,
|
||||||
overviewList: [],
|
overviewList: [],
|
||||||
rateList: []
|
rateList: [],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
barChart,
|
barChart,
|
||||||
pieChart
|
pieChart,
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getDataList();
|
this.getDataList();
|
||||||
},
|
},
|
||||||
|
created() {
|
||||||
|
getWarehouseList().then((response) => {
|
||||||
|
response.data.forEach((item) => {
|
||||||
|
if (item.storageType === this.listQuery.storageType) {
|
||||||
|
this.wareType = item.type;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 获取数据列表
|
// 获取数据列表
|
||||||
getDataList() {
|
getDataList() {
|
||||||
const data = {
|
this.urlOptions.allURL(this.listQuery).then((response) => {
|
||||||
storageType : 4
|
if (response.data && response.data.length) {
|
||||||
}
|
|
||||||
this.urlOptions.allURL(data).then((response) => {
|
|
||||||
this.overviewList = response.data;
|
this.overviewList = response.data;
|
||||||
|
this.overviewList.forEach(item=>{
|
||||||
|
this.totalNum += item.num
|
||||||
|
})
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.barChart.initChart();
|
this.$refs.barChart.initChart();
|
||||||
});
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
this.urlOptions.rateURL(data).then((response) => {
|
this.urlOptions.rateURL(this.listQuery).then((response) => {
|
||||||
|
if (response.data && response.data.length) {
|
||||||
this.rateList = response.data;
|
this.rateList = response.data;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.pieChart.initChart();
|
this.$refs.pieChart.initChart();
|
||||||
});
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -93,4 +115,33 @@ export default {
|
|||||||
padding: 16px;
|
padding: 16px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
.title {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 16px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #000;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
.title::before {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
width: 4px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 1px;
|
||||||
|
margin-right: 5px;
|
||||||
|
background-color: #0b58ff;
|
||||||
|
}
|
||||||
|
.sub-title{
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 18px;
|
||||||
|
color: #888686;
|
||||||
|
min-width: 80px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-right: 30px;
|
||||||
|
font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -58,7 +58,7 @@ import {
|
|||||||
getWarehouseLocationHisPage,
|
getWarehouseLocationHisPage,
|
||||||
} from '@/api/warehouse/warehouseRealtimeLocation';
|
} from '@/api/warehouse/warehouseRealtimeLocation';
|
||||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
|
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
|
||||||
|
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
|
||||||
import { listData } from '@/api/system/dict/data';
|
import { listData } from '@/api/system/dict/data';
|
||||||
import { publicFormatter } from '@/utils/dict';
|
import { publicFormatter } from '@/utils/dict';
|
||||||
|
|
||||||
@ -179,9 +179,15 @@ export default {
|
|||||||
listData(queryParams).then((response) => {
|
listData(queryParams).then((response) => {
|
||||||
this.formConfig[2].selectOptions = response.data.list;
|
this.formConfig[2].selectOptions = response.data.list;
|
||||||
});
|
});
|
||||||
listByWarehouse(this.listQuery.storageType).then((response) => {
|
getWarehouseList().then((response) => {
|
||||||
|
response.data.forEach((item) => {
|
||||||
|
if (item.storageType === this.listQuery.storageType) {
|
||||||
|
listByWarehouse(item.id).then((response) => {
|
||||||
this.formConfig[0].selectOptions = response.data;
|
this.formConfig[0].selectOptions = response.data;
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
buttonClick(val) {
|
buttonClick(val) {
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2023-08-21 14:26:23
|
* @Date: 2023-08-21 14:26:23
|
||||||
* @LastEditors: zwq
|
* @LastEditors: zwq
|
||||||
* @LastEditTime: 2023-11-04 14:46:59
|
* @LastEditTime: 2023-11-06 11:31:14
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
@ -93,7 +93,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { listByWarehouse, listAll } from '@/api/warehouse/warehouseLocation';
|
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
|
||||||
|
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
@ -129,7 +130,10 @@ export default {
|
|||||||
there: [],
|
there: [],
|
||||||
four: [],
|
four: [],
|
||||||
}),
|
}),
|
||||||
listAll(1).then((response) => {
|
getWarehouseList().then((response) => {
|
||||||
|
response.data.forEach((item) => {
|
||||||
|
if (item.storageType === 4) {
|
||||||
|
listByWarehouse(item.id).then((response) => {
|
||||||
response.data.forEach((a, b) => {
|
response.data.forEach((a, b) => {
|
||||||
if (b % 4 === 0) {
|
if (b % 4 === 0) {
|
||||||
this.wareData.one.push(a);
|
this.wareData.one.push(a);
|
||||||
@ -143,6 +147,9 @@ export default {
|
|||||||
});
|
});
|
||||||
this.total = Math.ceil(response.data.length / 40);
|
this.total = Math.ceil(response.data.length / 40);
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
},
|
},
|
||||||
buttonClick(val) {
|
buttonClick(val) {
|
||||||
switch (val.btnName) {
|
switch (val.btnName) {
|
||||||
|
@ -64,7 +64,7 @@ import {
|
|||||||
outWarehouseRealtimeLocation,
|
outWarehouseRealtimeLocation,
|
||||||
} from '@/api/warehouse/warehouseRealtimeLocation';
|
} from '@/api/warehouse/warehouseRealtimeLocation';
|
||||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
|
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
|
||||||
|
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
|
||||||
import { listData } from '@/api/system/dict/data';
|
import { listData } from '@/api/system/dict/data';
|
||||||
import { publicFormatter } from '@/utils/dict';
|
import { publicFormatter } from '@/utils/dict';
|
||||||
import { mapGetters } from 'vuex';
|
import { mapGetters } from 'vuex';
|
||||||
@ -203,9 +203,15 @@ export default {
|
|||||||
listData(queryParams).then((response) => {
|
listData(queryParams).then((response) => {
|
||||||
this.formConfig[2].selectOptions = response.data.list;
|
this.formConfig[2].selectOptions = response.data.list;
|
||||||
});
|
});
|
||||||
listByWarehouse(this.listQuery.storageType).then((response) => {
|
getWarehouseList().then((response) => {
|
||||||
|
response.data.forEach((item) => {
|
||||||
|
if (item.storageType === this.listQuery.storageType) {
|
||||||
|
listByWarehouse(item.id).then((response) => {
|
||||||
this.formConfig[0].selectOptions = response.data;
|
this.formConfig[0].selectOptions = response.data;
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
buttonClick(val) {
|
buttonClick(val) {
|
||||||
|
@ -2,16 +2,20 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2023-08-22 15:01:54
|
* @Date: 2023-08-22 15:01:54
|
||||||
* @LastEditors: zwq
|
* @LastEditors: zwq
|
||||||
* @LastEditTime: 2023-11-04 15:18:38
|
* @LastEditTime: 2023-11-07 14:11:10
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<el-row :gutter="10" class="chart-container">
|
<el-row :gutter="10" class="chart-container">
|
||||||
<el-col :span="14">
|
<el-col :span="wareType === 1 ? 14 : 24">
|
||||||
<div class="chart-card">
|
<div class="chart-card">
|
||||||
|
<div class="title">库存总览</div>
|
||||||
|
<div class="sub-title">产品总数量
|
||||||
|
<div style="color: black;">{{ totalNum }}</div>
|
||||||
|
</div>
|
||||||
<barChart
|
<barChart
|
||||||
ref="barChart"
|
ref="barChart"
|
||||||
height="500px"
|
height="600px"
|
||||||
title="库存总览"
|
title="库存总览"
|
||||||
v-if="overviewList.length"
|
v-if="overviewList.length"
|
||||||
:histogram="overviewList" />
|
:histogram="overviewList" />
|
||||||
@ -19,11 +23,13 @@
|
|||||||
<div class="no-data-bg" v-else></div>
|
<div class="no-data-bg" v-else></div>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="10">
|
<el-col :span="wareType === 1 ? 10 : 0">
|
||||||
<div class="chart-card">
|
<div class="chart-card">
|
||||||
|
<div class="title">库位占用率</div>
|
||||||
<pieChart
|
<pieChart
|
||||||
ref="pieChart"
|
ref="pieChart"
|
||||||
height="600px"
|
height="600px"
|
||||||
|
title="库位占用率"
|
||||||
v-if="rateList.length"
|
v-if="rateList.length"
|
||||||
:pie-data="rateList" />
|
:pie-data="rateList" />
|
||||||
<!-- 没有数据 -->
|
<!-- 没有数据 -->
|
||||||
@ -36,46 +42,62 @@
|
|||||||
<script>
|
<script>
|
||||||
import barChart from '../../chart/BarChart.vue';
|
import barChart from '../../chart/BarChart.vue';
|
||||||
import pieChart from '../../chart/PieChart.vue';
|
import pieChart from '../../chart/PieChart.vue';
|
||||||
import {
|
import { getOverview, getRate } from '@/api/warehouse/warehouseLocation';
|
||||||
getOverview,
|
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
|
||||||
getRate,
|
|
||||||
} from '@/api/warehouse/warehouseLocation';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
allURL: getOverview,
|
allURL: getOverview,
|
||||||
rateURL: getRate
|
rateURL: getRate,
|
||||||
},
|
},
|
||||||
|
listQuery: {
|
||||||
|
storageType: 1,
|
||||||
|
},
|
||||||
|
wareType: 1,
|
||||||
|
totalNum: 0,
|
||||||
overviewList: [],
|
overviewList: [],
|
||||||
rateList: []
|
rateList: [],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
barChart,
|
barChart,
|
||||||
pieChart
|
pieChart,
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getDataList();
|
this.getDataList();
|
||||||
},
|
},
|
||||||
|
created() {
|
||||||
|
getWarehouseList().then((response) => {
|
||||||
|
response.data.forEach((item) => {
|
||||||
|
if (item.storageType === this.listQuery.storageType) {
|
||||||
|
this.wareType = item.type;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 获取数据列表
|
// 获取数据列表
|
||||||
getDataList() {
|
getDataList() {
|
||||||
const data = {
|
this.urlOptions.allURL(this.listQuery).then((response) => {
|
||||||
storageType : 1
|
if (response.data && response.data.length) {
|
||||||
}
|
|
||||||
this.urlOptions.allURL(data).then((response) => {
|
|
||||||
this.overviewList = response.data;
|
this.overviewList = response.data;
|
||||||
|
this.overviewList.forEach(item=>{
|
||||||
|
this.totalNum += item.num
|
||||||
|
})
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.barChart.initChart();
|
this.$refs.barChart.initChart();
|
||||||
});
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
this.urlOptions.rateURL(data).then((response) => {
|
this.urlOptions.rateURL(this.listQuery).then((response) => {
|
||||||
|
if (response.data && response.data.length) {
|
||||||
this.rateList = response.data;
|
this.rateList = response.data;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.pieChart.initChart();
|
this.$refs.pieChart.initChart();
|
||||||
});
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -93,4 +115,33 @@ export default {
|
|||||||
padding: 16px;
|
padding: 16px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
.title {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 16px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #000;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
.title::before {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
width: 4px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 1px;
|
||||||
|
margin-right: 5px;
|
||||||
|
background-color: #0b58ff;
|
||||||
|
}
|
||||||
|
.sub-title{
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 18px;
|
||||||
|
color: #888686;
|
||||||
|
min-width: 80px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-right: 30px;
|
||||||
|
font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -58,7 +58,7 @@ import {
|
|||||||
getWarehouseLocationHisPage,
|
getWarehouseLocationHisPage,
|
||||||
} from '@/api/warehouse/warehouseRealtimeLocation';
|
} from '@/api/warehouse/warehouseRealtimeLocation';
|
||||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
|
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
|
||||||
|
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
|
||||||
import { listData } from '@/api/system/dict/data';
|
import { listData } from '@/api/system/dict/data';
|
||||||
import { publicFormatter } from '@/utils/dict';
|
import { publicFormatter } from '@/utils/dict';
|
||||||
|
|
||||||
@ -179,9 +179,15 @@ export default {
|
|||||||
listData(queryParams).then((response) => {
|
listData(queryParams).then((response) => {
|
||||||
this.formConfig[2].selectOptions = response.data.list;
|
this.formConfig[2].selectOptions = response.data.list;
|
||||||
});
|
});
|
||||||
listByWarehouse(1).then((response) => {
|
getWarehouseList().then((response) => {
|
||||||
|
response.data.forEach((item) => {
|
||||||
|
if (item.storageType === this.listQuery.storageType) {
|
||||||
|
listByWarehouse(item.id).then((response) => {
|
||||||
this.formConfig[0].selectOptions = response.data;
|
this.formConfig[0].selectOptions = response.data;
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
buttonClick(val) {
|
buttonClick(val) {
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2023-08-21 14:26:23
|
* @Date: 2023-08-21 14:26:23
|
||||||
* @LastEditors: zwq
|
* @LastEditors: zwq
|
||||||
* @LastEditTime: 2023-11-04 14:46:59
|
* @LastEditTime: 2023-11-06 11:30:20
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
@ -93,7 +93,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { listByWarehouse, listAll } from '@/api/warehouse/warehouseLocation';
|
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
|
||||||
|
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
@ -129,7 +130,10 @@ export default {
|
|||||||
there: [],
|
there: [],
|
||||||
four: [],
|
four: [],
|
||||||
}),
|
}),
|
||||||
listAll(1).then((response) => {
|
getWarehouseList().then((response) => {
|
||||||
|
response.data.forEach((item) => {
|
||||||
|
if (item.storageType === 1) {
|
||||||
|
listByWarehouse(item.id).then((response) => {
|
||||||
response.data.forEach((a, b) => {
|
response.data.forEach((a, b) => {
|
||||||
if (b % 4 === 0) {
|
if (b % 4 === 0) {
|
||||||
this.wareData.one.push(a);
|
this.wareData.one.push(a);
|
||||||
@ -143,6 +147,9 @@ export default {
|
|||||||
});
|
});
|
||||||
this.total = Math.ceil(response.data.length / 40);
|
this.total = Math.ceil(response.data.length / 40);
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
},
|
},
|
||||||
buttonClick(val) {
|
buttonClick(val) {
|
||||||
switch (val.btnName) {
|
switch (val.btnName) {
|
||||||
|
@ -64,7 +64,7 @@ import {
|
|||||||
outWarehouseRealtimeLocation,
|
outWarehouseRealtimeLocation,
|
||||||
} from '@/api/warehouse/warehouseRealtimeLocation';
|
} from '@/api/warehouse/warehouseRealtimeLocation';
|
||||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
|
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
|
||||||
|
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
|
||||||
import { listData } from '@/api/system/dict/data';
|
import { listData } from '@/api/system/dict/data';
|
||||||
import { publicFormatter } from '@/utils/dict';
|
import { publicFormatter } from '@/utils/dict';
|
||||||
import { mapGetters } from 'vuex';
|
import { mapGetters } from 'vuex';
|
||||||
@ -175,7 +175,7 @@ export default {
|
|||||||
label: '入库时间',
|
label: '入库时间',
|
||||||
dateType: 'daterange',
|
dateType: 'daterange',
|
||||||
format: 'yyyy-MM-dd',
|
format: 'yyyy-MM-dd',
|
||||||
valueFormat: "timestamp",
|
valueFormat: 'timestamp',
|
||||||
rangeSeparator: '-',
|
rangeSeparator: '-',
|
||||||
startPlaceholder: '开始时间',
|
startPlaceholder: '开始时间',
|
||||||
endPlaceholder: '结束时间',
|
endPlaceholder: '结束时间',
|
||||||
@ -203,9 +203,15 @@ export default {
|
|||||||
listData(queryParams).then((response) => {
|
listData(queryParams).then((response) => {
|
||||||
this.formConfig[2].selectOptions = response.data.list;
|
this.formConfig[2].selectOptions = response.data.list;
|
||||||
});
|
});
|
||||||
listByWarehouse(1).then((response) => {
|
getWarehouseList().then((response) => {
|
||||||
|
response.data.forEach((item) => {
|
||||||
|
if (item.storageType === this.listQuery.storageType) {
|
||||||
|
listByWarehouse(item.id).then((response) => {
|
||||||
this.formConfig[0].selectOptions = response.data;
|
this.formConfig[0].selectOptions = response.data;
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
buttonClick(val) {
|
buttonClick(val) {
|
||||||
@ -216,7 +222,7 @@ export default {
|
|||||||
this.listQuery.locationId = val.name;
|
this.listQuery.locationId = val.name;
|
||||||
this.listQuery.palletCode = val.code;
|
this.listQuery.palletCode = val.code;
|
||||||
this.listQuery.status = val.status;
|
this.listQuery.status = val.status;
|
||||||
this.listQuery.inTime = val.searchTime?val.searchTime:null;
|
this.listQuery.inTime = val.searchTime ? val.searchTime : null;
|
||||||
this.getDataList();
|
this.getDataList();
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
|
Loading…
Reference in New Issue
Block a user