92 lines
2.0 KiB
Vue
92 lines
2.0 KiB
Vue
<!--
|
|
* @Author: zwq
|
|
* @Date: 2023-08-22 15:01:54
|
|
* @LastEditors: zwq
|
|
* @LastEditTime: 2024-02-23 16:41:40
|
|
* @Description:
|
|
-->
|
|
<template>
|
|
<el-row :gutter="10" class="chart-container">
|
|
<el-col :span="8">
|
|
<div class="chart-card">
|
|
<gaugeChart ref="gaugeChart" title="仓库占用率" height="450px" />
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="16">
|
|
<div class="chart-card">
|
|
<barChart
|
|
ref="barChart"
|
|
height="500px"
|
|
title="库存总览"
|
|
v-if="allData"
|
|
:all-data="allData" />
|
|
<el-empty
|
|
v-else
|
|
:image-size="300"
|
|
:image="require('../../../assets/images/empty.png')" />
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
|
|
<script>
|
|
import basicPage from '../mixins/basic-page';
|
|
import { mul } from '../mixins/code-filter';
|
|
import barChart from '../chart/BarChart.vue';
|
|
import gaugeChart from '../chart/GaugeChart.vue';
|
|
import { getOccupancy } from '@/api/asrs/warehouseStorehouse';
|
|
import { inventoryOverview } from '@/api/asrs/warehouseStorehouseGoodsSpecification';
|
|
|
|
export default {
|
|
mixins: [basicPage],
|
|
data() {
|
|
return {
|
|
urlOptions: {
|
|
occupancyURL: getOccupancy,
|
|
allURL: inventoryOverview,
|
|
},
|
|
occupancyData: 0,
|
|
allData: {},
|
|
};
|
|
},
|
|
components: {
|
|
barChart,
|
|
gaugeChart,
|
|
},
|
|
created() {
|
|
this.listQuery.warehouseId = this.bId;
|
|
},
|
|
methods: {
|
|
// 获取数据列表
|
|
getDataList() {
|
|
this.urlOptions.occupancyURL(this.bId).then((response) => {
|
|
this.occupancyData = response.data[0].toFixed(2);
|
|
const num = mul(this.occupancyData, 100);
|
|
this.$nextTick(() => {
|
|
this.$refs.gaugeChart.initChart(num,response.data[1]);
|
|
});
|
|
});
|
|
this.urlOptions.allURL(this.bId).then((response) => {
|
|
this.allData = response.data;
|
|
this.$nextTick(() => {
|
|
this.$refs.barChart.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;
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
}
|
|
</style>
|