yudao-dev/src/views/warehouse/raw-material/InventoryOverview/index.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>