更新
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user