This commit is contained in:
2023-10-13 16:09:30 +08:00
parent 78796203f6
commit d51328c836
49 changed files with 985 additions and 600 deletions

View File

@@ -2,27 +2,26 @@
* @Author: zwq
* @Date: 2023-08-22 15:01:54
* @LastEditors: zwq
* @LastEditTime: 2023-09-27 10:44:49
* @LastEditTime: 2023-10-13 14:30:24
* @Description:
-->
<template>
<div class="app-container">
<el-row :gutter="20">
<el-col :span="10">
<gaugeChart
ref="gaugeChart"
title="仓库占用率"
height="500px"/>
</el-col>
<el-col :span="14">
<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="库存总览"
:all-data="allData" />
</el-col>
</el-row>
</div>
</div>
</el-col>
</el-row>
</template>
<script>
@@ -55,7 +54,7 @@ export default {
getDataList() {
this.urlOptions.occupancyURL(this.aId).then((response) => {
this.occupancyData = response.data.toFixed(2);
const num = mul(this.occupancyData,100)
const num = mul(this.occupancyData, 100);
this.$nextTick(() => {
this.$refs.gaugeChart.initChart(num);
});
@@ -70,3 +69,17 @@ export default {
},
};
</script>
<style lang="scss" 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;
}
</style>

View File

@@ -2,27 +2,26 @@
* @Author: zwq
* @Date: 2023-08-22 15:01:54
* @LastEditors: zwq
* @LastEditTime: 2023-10-08 15:49:40
* @LastEditTime: 2023-10-13 14:32:40
* @Description:
-->
<template>
<div class="app-container">
<el-row :gutter="20">
<el-col :span="10">
<gaugeChart
ref="gaugeChart"
title="仓库占用率"
height="500px"/>
</el-col>
<el-col :span="14">
<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="库存总览"
:all-data="allData" />
</el-col>
</el-row>
</div>
</div>
</el-col>
</el-row>
</template>
<script>
@@ -51,13 +50,13 @@ export default {
},
created() {
this.listQuery.warehouseId = this.bId;
},
},
methods: {
// 获取数据列表
getDataList() {
this.urlOptions.occupancyURL(this.bId).then((response) => {
this.occupancyData = response.data.toFixed(2);
const num = mul(this.occupancyData,100)
const num = mul(this.occupancyData, 100);
this.$nextTick(() => {
this.$refs.gaugeChart.initChart(num);
});
@@ -72,3 +71,16 @@ export default {
},
};
</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>