148 lines
3.2 KiB
Vue
148 lines
3.2 KiB
Vue
<!--
|
|
* @Author: zwq
|
|
* @Date: 2023-08-22 15:01:54
|
|
* @LastEditors: zwq
|
|
* @LastEditTime: 2023-11-07 14:11:10
|
|
* @Description:
|
|
-->
|
|
<template>
|
|
<el-row :gutter="10" class="chart-container">
|
|
<el-col :span="wareType === 1 ? 14 : 24">
|
|
<div class="chart-card">
|
|
<div class="title">库存总览</div>
|
|
<div class="sub-title">产品总数量
|
|
<div style="color: black;">{{ totalNum }}</div>
|
|
</div>
|
|
<barChart
|
|
ref="barChart"
|
|
height="600px"
|
|
title="库存总览"
|
|
v-if="overviewList.length"
|
|
:histogram="overviewList" />
|
|
<!-- 没有数据 -->
|
|
<div class="no-data-bg" v-else></div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="wareType === 1 ? 10 : 0">
|
|
<div class="chart-card">
|
|
<div class="title">库位占用率</div>
|
|
<pieChart
|
|
ref="pieChart"
|
|
height="600px"
|
|
title="库位占用率"
|
|
v-if="rateList.length"
|
|
:pie-data="rateList" />
|
|
<!-- 没有数据 -->
|
|
<div class="no-data-bg" v-else></div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
|
|
<script>
|
|
import barChart from '../../chart/BarChart.vue';
|
|
import pieChart from '../../chart/PieChart.vue';
|
|
import { getOverview, getRate } from '@/api/warehouse/warehouseLocation';
|
|
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
urlOptions: {
|
|
allURL: getOverview,
|
|
rateURL: getRate,
|
|
},
|
|
listQuery: {
|
|
storageType: 1,
|
|
},
|
|
wareType: 1,
|
|
totalNum: 0,
|
|
overviewList: [],
|
|
rateList: [],
|
|
};
|
|
},
|
|
components: {
|
|
barChart,
|
|
pieChart,
|
|
},
|
|
mounted() {
|
|
this.getDataList();
|
|
},
|
|
created() {
|
|
getWarehouseList().then((response) => {
|
|
response.data.forEach((item) => {
|
|
if (item.storageType === this.listQuery.storageType) {
|
|
this.wareType = item.type;
|
|
}
|
|
});
|
|
});
|
|
},
|
|
methods: {
|
|
// 获取数据列表
|
|
getDataList() {
|
|
this.urlOptions.allURL(this.listQuery).then((response) => {
|
|
if (response.data && response.data.length) {
|
|
this.overviewList = response.data;
|
|
this.overviewList.forEach(item=>{
|
|
this.totalNum += item.num
|
|
})
|
|
this.$nextTick(() => {
|
|
this.$refs.barChart.initChart();
|
|
});
|
|
}
|
|
});
|
|
this.urlOptions.rateURL(this.listQuery).then((response) => {
|
|
if (response.data && response.data.length) {
|
|
this.rateList = response.data;
|
|
this.$nextTick(() => {
|
|
this.$refs.pieChart.initChart();
|
|
});
|
|
}
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.chart-container {
|
|
min-height: calc(100vh - 120px - 8px);
|
|
background-color: #f0f2f7;
|
|
}
|
|
.chart-card {
|
|
min-height: calc(100vh - 120px - 8px);
|
|
background-color: #fff;
|
|
padding: 16px;
|
|
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>
|