projects/mes-test #133
@@ -60,31 +60,31 @@ export default {
 | 
			
		||||
			this.chart = echarts.init(this.$el, 'macarons');
 | 
			
		||||
 | 
			
		||||
			this.chart.setOption({
 | 
			
		||||
				title: {
 | 
			
		||||
					text: this.title
 | 
			
		||||
						? '{space|}{tip|}{space|}{value|' + this.title + '}'
 | 
			
		||||
						: '',
 | 
			
		||||
					left: '0%',
 | 
			
		||||
					top: '0%',
 | 
			
		||||
					textStyle: {
 | 
			
		||||
						rich: {
 | 
			
		||||
							tip: {
 | 
			
		||||
								width: 4,
 | 
			
		||||
								height: 18,
 | 
			
		||||
								backgroundColor: '#0B58FF',
 | 
			
		||||
								marginRight: 6,
 | 
			
		||||
							},
 | 
			
		||||
							space: {
 | 
			
		||||
								width: 8,
 | 
			
		||||
							},
 | 
			
		||||
							value: {
 | 
			
		||||
								fontSize: 16,
 | 
			
		||||
								fontWeight: 'bold',
 | 
			
		||||
								color: 'black',
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
				},
 | 
			
		||||
				// title: {
 | 
			
		||||
				// 	text: this.title
 | 
			
		||||
				// 		? '{space|}{tip|}{space|}{value|' + this.title + '}'
 | 
			
		||||
				// 		: '',
 | 
			
		||||
				// 	left: '0%',
 | 
			
		||||
				// 	top: '0%',
 | 
			
		||||
				// 	textStyle: {
 | 
			
		||||
				// 		rich: {
 | 
			
		||||
				// 			tip: {
 | 
			
		||||
				// 				width: 4,
 | 
			
		||||
				// 				height: 18,
 | 
			
		||||
				// 				backgroundColor: '#0B58FF',
 | 
			
		||||
				// 				marginRight: 6,
 | 
			
		||||
				// 			},
 | 
			
		||||
				// 			space: {
 | 
			
		||||
				// 				width: 8,
 | 
			
		||||
				// 			},
 | 
			
		||||
				// 			value: {
 | 
			
		||||
				// 				fontSize: 16,
 | 
			
		||||
				// 				fontWeight: 'bold',
 | 
			
		||||
				// 				color: 'black',
 | 
			
		||||
				// 			},
 | 
			
		||||
				// 		},
 | 
			
		||||
				// 	},
 | 
			
		||||
				// },
 | 
			
		||||
				color: ['#288AFF', '#8EF0AB', '#FFDC94'],
 | 
			
		||||
				tooltip: {
 | 
			
		||||
					trigger: 'axis',
 | 
			
		||||
@@ -148,6 +148,7 @@ export default {
 | 
			
		||||
				yAxis: [
 | 
			
		||||
					{
 | 
			
		||||
						gridIndex: 0,
 | 
			
		||||
						name: '库存数量',
 | 
			
		||||
						axisTick: {
 | 
			
		||||
							show: false,
 | 
			
		||||
						},
 | 
			
		||||
@@ -160,6 +161,7 @@ export default {
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						gridIndex: 1,
 | 
			
		||||
						name: '剩余使用天数',
 | 
			
		||||
						axisTick: {
 | 
			
		||||
							show: false,
 | 
			
		||||
						},
 | 
			
		||||
 
 | 
			
		||||
@@ -59,7 +59,7 @@ export default {
 | 
			
		||||
					zlevel: 2, // 控制圆环图中间的字的层级
 | 
			
		||||
					text: '总数',
 | 
			
		||||
					subtext: totalNumber,
 | 
			
		||||
					top: '42%', // 控制位置
 | 
			
		||||
					top: '35%', // 控制位置
 | 
			
		||||
					left: '50%', // 控制位置
 | 
			
		||||
					textAlign: 'center', // 让文字居中
 | 
			
		||||
					textStyle: {
 | 
			
		||||
@@ -72,7 +72,7 @@ export default {
 | 
			
		||||
				tooltip: {
 | 
			
		||||
					trigger: 'item',
 | 
			
		||||
					show: true, // 控制鼠标悬浮是否显示数据
 | 
			
		||||
					formatter: '产品: {b}<br/>数量: {c}<br/>占比: {d}%',
 | 
			
		||||
					formatter: '{b}<br/>数量: {c}<br/>占比: {d}%',
 | 
			
		||||
				},
 | 
			
		||||
				legend: {
 | 
			
		||||
					orient: 'vartical',
 | 
			
		||||
 
 | 
			
		||||
@@ -2,16 +2,20 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2023-08-22 15:01:54
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2023-11-04 16:32:13
 | 
			
		||||
 * @LastEditTime: 2023-11-07 14:12:00
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
	<el-row :gutter="10" class="chart-container">
 | 
			
		||||
		<el-col :span="14">
 | 
			
		||||
		<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="500px"
 | 
			
		||||
					height="600px"
 | 
			
		||||
					title="库存总览"
 | 
			
		||||
					v-if="overviewList.length"
 | 
			
		||||
					:histogram="overviewList" />
 | 
			
		||||
@@ -19,16 +23,18 @@
 | 
			
		||||
				<div class="no-data-bg" v-else></div>
 | 
			
		||||
			</div>
 | 
			
		||||
		</el-col>
 | 
			
		||||
		<el-col :span="10">
 | 
			
		||||
		<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>
 | 
			
		||||
			</div>
 | 
			
		||||
		</el-col>
 | 
			
		||||
	</el-row>
 | 
			
		||||
</template>
 | 
			
		||||
@@ -36,46 +42,62 @@
 | 
			
		||||
<script>
 | 
			
		||||
import barChart from '../../chart/BarChart.vue';
 | 
			
		||||
import pieChart from '../../chart/PieChart.vue';
 | 
			
		||||
import {
 | 
			
		||||
	getOverview,
 | 
			
		||||
	getRate,
 | 
			
		||||
} from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getOverview, getRate } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			urlOptions: {
 | 
			
		||||
				allURL: getOverview,
 | 
			
		||||
        rateURL: getRate
 | 
			
		||||
				rateURL: getRate,
 | 
			
		||||
			},
 | 
			
		||||
			listQuery: {
 | 
			
		||||
				storageType: 2,
 | 
			
		||||
			},
 | 
			
		||||
			wareType: 1,
 | 
			
		||||
      totalNum: 0,
 | 
			
		||||
			overviewList: [],
 | 
			
		||||
      rateList: []
 | 
			
		||||
			rateList: [],
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	components: {
 | 
			
		||||
		barChart,
 | 
			
		||||
    pieChart
 | 
			
		||||
		pieChart,
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		this.getDataList();
 | 
			
		||||
	},
 | 
			
		||||
	created() {
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					this.wareType = item.type;
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		// 获取数据列表
 | 
			
		||||
		getDataList() {
 | 
			
		||||
      const data = {
 | 
			
		||||
        storageType : 2
 | 
			
		||||
      }
 | 
			
		||||
			this.urlOptions.allURL(data).then((response) => {
 | 
			
		||||
				this.overviewList = response.data;
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.barChart.initChart();
 | 
			
		||||
				});
 | 
			
		||||
			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(data).then((response) => {
 | 
			
		||||
				this.rateList = response.data;
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.pieChart.initChart();
 | 
			
		||||
				});
 | 
			
		||||
			this.urlOptions.rateURL(this.listQuery).then((response) => {
 | 
			
		||||
				if (response.data && response.data.length) {
 | 
			
		||||
					this.rateList = response.data;
 | 
			
		||||
					this.$nextTick(() => {
 | 
			
		||||
						this.$refs.pieChart.initChart();
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
@@ -93,4 +115,33 @@ export default {
 | 
			
		||||
	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>
 | 
			
		||||
 
 | 
			
		||||
@@ -58,7 +58,7 @@ import {
 | 
			
		||||
	getWarehouseLocationHisPage,
 | 
			
		||||
} from '@/api/warehouse/warehouseRealtimeLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
import { listData } from '@/api/system/dict/data';
 | 
			
		||||
import { publicFormatter } from '@/utils/dict';
 | 
			
		||||
 | 
			
		||||
@@ -179,8 +179,14 @@ export default {
 | 
			
		||||
		listData(queryParams).then((response) => {
 | 
			
		||||
			this.formConfig[2].selectOptions = response.data.list;
 | 
			
		||||
		});
 | 
			
		||||
		listByWarehouse(this.listQuery.storageType).then((response) => {
 | 
			
		||||
			this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
						this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
 
 | 
			
		||||
@@ -2,7 +2,7 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2023-08-21 14:26:23
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2023-11-04 14:46:59
 | 
			
		||||
 * @LastEditTime: 2023-11-06 11:25:34
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
@@ -93,7 +93,8 @@
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import { listByWarehouse, listAll } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	data() {
 | 
			
		||||
@@ -129,7 +130,10 @@ export default {
 | 
			
		||||
				there: [],
 | 
			
		||||
				four: [],
 | 
			
		||||
			}),
 | 
			
		||||
				listAll(1).then((response) => {
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === 2) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
					response.data.forEach((a, b) => {
 | 
			
		||||
						if (b % 4 === 0) {
 | 
			
		||||
							this.wareData.one.push(a);
 | 
			
		||||
@@ -142,7 +146,10 @@ export default {
 | 
			
		||||
						}
 | 
			
		||||
					});
 | 
			
		||||
					this.total = Math.ceil(response.data.length / 40);
 | 
			
		||||
				});
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
		},
 | 
			
		||||
		buttonClick(val) {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
 
 | 
			
		||||
@@ -64,7 +64,7 @@ import {
 | 
			
		||||
	outWarehouseRealtimeLocation,
 | 
			
		||||
} from '@/api/warehouse/warehouseRealtimeLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
import { listData } from '@/api/system/dict/data';
 | 
			
		||||
import { publicFormatter } from '@/utils/dict';
 | 
			
		||||
import { mapGetters } from 'vuex';
 | 
			
		||||
@@ -203,8 +203,14 @@ export default {
 | 
			
		||||
		listData(queryParams).then((response) => {
 | 
			
		||||
			this.formConfig[2].selectOptions = response.data.list;
 | 
			
		||||
		});
 | 
			
		||||
		listByWarehouse(this.listQuery.storageType).then((response) => {
 | 
			
		||||
			this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
						this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
 
 | 
			
		||||
@@ -2,16 +2,20 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2023-08-22 15:01:54
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2023-11-04 16:11:36
 | 
			
		||||
 * @LastEditTime: 2023-11-07 14:11:50
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
	<el-row :gutter="10" class="chart-container">
 | 
			
		||||
		<el-col :span="14">
 | 
			
		||||
		<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="500px"
 | 
			
		||||
					height="600px"
 | 
			
		||||
					title="库存总览"
 | 
			
		||||
					v-if="overviewList.length"
 | 
			
		||||
					:histogram="overviewList" />
 | 
			
		||||
@@ -19,16 +23,18 @@
 | 
			
		||||
				<div class="no-data-bg" v-else></div>
 | 
			
		||||
			</div>
 | 
			
		||||
		</el-col>
 | 
			
		||||
		<el-col :span="10">
 | 
			
		||||
		<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>
 | 
			
		||||
			</div>
 | 
			
		||||
		</el-col>
 | 
			
		||||
	</el-row>
 | 
			
		||||
</template>
 | 
			
		||||
@@ -36,46 +42,62 @@
 | 
			
		||||
<script>
 | 
			
		||||
import barChart from '../../chart/BarChart.vue';
 | 
			
		||||
import pieChart from '../../chart/PieChart.vue';
 | 
			
		||||
import {
 | 
			
		||||
	getOverview,
 | 
			
		||||
	getRate,
 | 
			
		||||
} from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getOverview, getRate } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			urlOptions: {
 | 
			
		||||
				allURL: getOverview,
 | 
			
		||||
        rateURL: getRate
 | 
			
		||||
				rateURL: getRate,
 | 
			
		||||
			},
 | 
			
		||||
			listQuery: {
 | 
			
		||||
				storageType: 5,
 | 
			
		||||
			},
 | 
			
		||||
			wareType: 1,
 | 
			
		||||
      totalNum: 0,
 | 
			
		||||
			overviewList: [],
 | 
			
		||||
      rateList: []
 | 
			
		||||
			rateList: [],
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	components: {
 | 
			
		||||
		barChart,
 | 
			
		||||
    pieChart
 | 
			
		||||
		pieChart,
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		this.getDataList();
 | 
			
		||||
	},
 | 
			
		||||
	created() {
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					this.wareType = item.type;
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		// 获取数据列表
 | 
			
		||||
		getDataList() {
 | 
			
		||||
      const data = {
 | 
			
		||||
        storageType : 5
 | 
			
		||||
      }
 | 
			
		||||
			this.urlOptions.allURL(data).then((response) => {
 | 
			
		||||
				this.overviewList = response.data;
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.barChart.initChart();
 | 
			
		||||
				});
 | 
			
		||||
			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(data).then((response) => {
 | 
			
		||||
				this.rateList = response.data;
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.pieChart.initChart();
 | 
			
		||||
				});
 | 
			
		||||
			this.urlOptions.rateURL(this.listQuery).then((response) => {
 | 
			
		||||
				if (response.data && response.data.length) {
 | 
			
		||||
					this.rateList = response.data;
 | 
			
		||||
					this.$nextTick(() => {
 | 
			
		||||
						this.$refs.pieChart.initChart();
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
@@ -93,4 +115,33 @@ export default {
 | 
			
		||||
	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>
 | 
			
		||||
 
 | 
			
		||||
@@ -58,7 +58,7 @@ import {
 | 
			
		||||
	getWarehouseLocationHisPage,
 | 
			
		||||
} from '@/api/warehouse/warehouseRealtimeLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
import { listData } from '@/api/system/dict/data';
 | 
			
		||||
import { publicFormatter } from '@/utils/dict';
 | 
			
		||||
 | 
			
		||||
@@ -179,8 +179,14 @@ export default {
 | 
			
		||||
		listData(queryParams).then((response) => {
 | 
			
		||||
			this.formConfig[2].selectOptions = response.data.list;
 | 
			
		||||
		});
 | 
			
		||||
		listByWarehouse(this.listQuery.storageType).then((response) => {
 | 
			
		||||
			this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
						this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
 
 | 
			
		||||
@@ -2,7 +2,7 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2023-08-21 14:26:23
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2023-11-04 14:46:59
 | 
			
		||||
 * @LastEditTime: 2023-11-06 11:32:23
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
@@ -93,7 +93,8 @@
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import { listByWarehouse, listAll } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	data() {
 | 
			
		||||
@@ -129,7 +130,10 @@ export default {
 | 
			
		||||
				there: [],
 | 
			
		||||
				four: [],
 | 
			
		||||
			}),
 | 
			
		||||
				listAll(1).then((response) => {
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === 5) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
					response.data.forEach((a, b) => {
 | 
			
		||||
						if (b % 4 === 0) {
 | 
			
		||||
							this.wareData.one.push(a);
 | 
			
		||||
@@ -142,7 +146,10 @@ export default {
 | 
			
		||||
						}
 | 
			
		||||
					});
 | 
			
		||||
					this.total = Math.ceil(response.data.length / 40);
 | 
			
		||||
				});
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
		},
 | 
			
		||||
		buttonClick(val) {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
 
 | 
			
		||||
@@ -64,7 +64,7 @@ import {
 | 
			
		||||
	outWarehouseRealtimeLocation,
 | 
			
		||||
} from '@/api/warehouse/warehouseRealtimeLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
import { listData } from '@/api/system/dict/data';
 | 
			
		||||
import { publicFormatter } from '@/utils/dict';
 | 
			
		||||
import { mapGetters } from 'vuex';
 | 
			
		||||
@@ -203,8 +203,14 @@ export default {
 | 
			
		||||
		listData(queryParams).then((response) => {
 | 
			
		||||
			this.formConfig[2].selectOptions = response.data.list;
 | 
			
		||||
		});
 | 
			
		||||
		listByWarehouse(this.listQuery.storageType).then((response) => {
 | 
			
		||||
			this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
						this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
 
 | 
			
		||||
@@ -2,16 +2,20 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2023-08-22 15:01:54
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2023-11-04 16:06:10
 | 
			
		||||
 * @LastEditTime: 2023-11-07 14:11:37
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
	<el-row :gutter="10" class="chart-container">
 | 
			
		||||
		<el-col :span="14">
 | 
			
		||||
		<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="500px"
 | 
			
		||||
					height="600px"
 | 
			
		||||
					title="库存总览"
 | 
			
		||||
					v-if="overviewList.length"
 | 
			
		||||
					:histogram="overviewList" />
 | 
			
		||||
@@ -19,16 +23,18 @@
 | 
			
		||||
				<div class="no-data-bg" v-else></div>
 | 
			
		||||
			</div>
 | 
			
		||||
		</el-col>
 | 
			
		||||
		<el-col :span="10">
 | 
			
		||||
		<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>
 | 
			
		||||
			</div>
 | 
			
		||||
		</el-col>
 | 
			
		||||
	</el-row>
 | 
			
		||||
</template>
 | 
			
		||||
@@ -36,46 +42,62 @@
 | 
			
		||||
<script>
 | 
			
		||||
import barChart from '../../chart/BarChart.vue';
 | 
			
		||||
import pieChart from '../../chart/PieChart.vue';
 | 
			
		||||
import {
 | 
			
		||||
	getOverview,
 | 
			
		||||
	getRate,
 | 
			
		||||
} from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getOverview, getRate } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			urlOptions: {
 | 
			
		||||
				allURL: getOverview,
 | 
			
		||||
        rateURL: getRate
 | 
			
		||||
				rateURL: getRate,
 | 
			
		||||
			},
 | 
			
		||||
			listQuery: {
 | 
			
		||||
				storageType: 3,
 | 
			
		||||
			},
 | 
			
		||||
			wareType: 1,
 | 
			
		||||
      totalNum: 0,
 | 
			
		||||
			overviewList: [],
 | 
			
		||||
      rateList: []
 | 
			
		||||
			rateList: [],
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	components: {
 | 
			
		||||
		barChart,
 | 
			
		||||
    pieChart
 | 
			
		||||
		pieChart,
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		this.getDataList();
 | 
			
		||||
	},
 | 
			
		||||
	created() {
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					this.wareType = item.type;
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		// 获取数据列表
 | 
			
		||||
		getDataList() {
 | 
			
		||||
      const data = {
 | 
			
		||||
        storageType : 3
 | 
			
		||||
      }
 | 
			
		||||
			this.urlOptions.allURL(data).then((response) => {
 | 
			
		||||
				this.overviewList = response.data;
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.barChart.initChart();
 | 
			
		||||
				});
 | 
			
		||||
			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(data).then((response) => {
 | 
			
		||||
				this.rateList = response.data;
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.pieChart.initChart();
 | 
			
		||||
				});
 | 
			
		||||
			this.urlOptions.rateURL(this.listQuery).then((response) => {
 | 
			
		||||
				if (response.data && response.data.length) {
 | 
			
		||||
					this.rateList = response.data;
 | 
			
		||||
					this.$nextTick(() => {
 | 
			
		||||
						this.$refs.pieChart.initChart();
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
@@ -93,4 +115,33 @@ export default {
 | 
			
		||||
	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>
 | 
			
		||||
 
 | 
			
		||||
@@ -58,7 +58,7 @@ import {
 | 
			
		||||
	getWarehouseLocationHisPage,
 | 
			
		||||
} from '@/api/warehouse/warehouseRealtimeLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
import { listData } from '@/api/system/dict/data';
 | 
			
		||||
import { publicFormatter } from '@/utils/dict';
 | 
			
		||||
 | 
			
		||||
@@ -179,8 +179,14 @@ export default {
 | 
			
		||||
		listData(queryParams).then((response) => {
 | 
			
		||||
			this.formConfig[2].selectOptions = response.data.list;
 | 
			
		||||
		});
 | 
			
		||||
		listByWarehouse(3).then((response) => {
 | 
			
		||||
			this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
						this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
 
 | 
			
		||||
@@ -2,7 +2,7 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2023-08-21 14:26:23
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2023-11-04 14:46:59
 | 
			
		||||
 * @LastEditTime: 2023-11-06 11:31:52
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
@@ -93,7 +93,8 @@
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import { listByWarehouse, listAll } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	data() {
 | 
			
		||||
@@ -129,7 +130,10 @@ export default {
 | 
			
		||||
				there: [],
 | 
			
		||||
				four: [],
 | 
			
		||||
			}),
 | 
			
		||||
				listAll(1).then((response) => {
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === 3) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
					response.data.forEach((a, b) => {
 | 
			
		||||
						if (b % 4 === 0) {
 | 
			
		||||
							this.wareData.one.push(a);
 | 
			
		||||
@@ -142,7 +146,10 @@ export default {
 | 
			
		||||
						}
 | 
			
		||||
					});
 | 
			
		||||
					this.total = Math.ceil(response.data.length / 40);
 | 
			
		||||
				});
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
		},
 | 
			
		||||
		buttonClick(val) {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
 
 | 
			
		||||
@@ -64,7 +64,7 @@ import {
 | 
			
		||||
	outWarehouseRealtimeLocation,
 | 
			
		||||
} from '@/api/warehouse/warehouseRealtimeLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
import { listData } from '@/api/system/dict/data';
 | 
			
		||||
import { publicFormatter } from '@/utils/dict';
 | 
			
		||||
import { mapGetters } from 'vuex';
 | 
			
		||||
@@ -203,8 +203,14 @@ export default {
 | 
			
		||||
		listData(queryParams).then((response) => {
 | 
			
		||||
			this.formConfig[2].selectOptions = response.data.list;
 | 
			
		||||
		});
 | 
			
		||||
		listByWarehouse(3).then((response) => {
 | 
			
		||||
			this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
						this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
 
 | 
			
		||||
@@ -2,16 +2,20 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2023-08-22 15:01:54
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2023-11-04 16:24:11
 | 
			
		||||
 * @LastEditTime: 2023-11-07 14:11:24
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
	<el-row :gutter="10" class="chart-container">
 | 
			
		||||
		<el-col :span="14">
 | 
			
		||||
		<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="500px"
 | 
			
		||||
					height="600px"
 | 
			
		||||
					title="库存总览"
 | 
			
		||||
					v-if="overviewList.length"
 | 
			
		||||
					:histogram="overviewList" />
 | 
			
		||||
@@ -19,16 +23,18 @@
 | 
			
		||||
				<div class="no-data-bg" v-else></div>
 | 
			
		||||
			</div>
 | 
			
		||||
		</el-col>
 | 
			
		||||
		<el-col :span="10">
 | 
			
		||||
		<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>
 | 
			
		||||
			</div>
 | 
			
		||||
		</el-col>
 | 
			
		||||
	</el-row>
 | 
			
		||||
</template>
 | 
			
		||||
@@ -36,46 +42,62 @@
 | 
			
		||||
<script>
 | 
			
		||||
import barChart from '../../chart/BarChart.vue';
 | 
			
		||||
import pieChart from '../../chart/PieChart.vue';
 | 
			
		||||
import {
 | 
			
		||||
	getOverview,
 | 
			
		||||
	getRate,
 | 
			
		||||
} from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getOverview, getRate } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			urlOptions: {
 | 
			
		||||
				allURL: getOverview,
 | 
			
		||||
        rateURL: getRate
 | 
			
		||||
				rateURL: getRate,
 | 
			
		||||
			},
 | 
			
		||||
			listQuery: {
 | 
			
		||||
				storageType: 4,
 | 
			
		||||
			},
 | 
			
		||||
			wareType: 1,
 | 
			
		||||
      totalNum: 0,
 | 
			
		||||
			overviewList: [],
 | 
			
		||||
      rateList: []
 | 
			
		||||
			rateList: [],
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	components: {
 | 
			
		||||
		barChart,
 | 
			
		||||
    pieChart
 | 
			
		||||
		pieChart,
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		this.getDataList();
 | 
			
		||||
	},
 | 
			
		||||
	created() {
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					this.wareType = item.type;
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		// 获取数据列表
 | 
			
		||||
		getDataList() {
 | 
			
		||||
      const data = {
 | 
			
		||||
        storageType : 4
 | 
			
		||||
      }
 | 
			
		||||
			this.urlOptions.allURL(data).then((response) => {
 | 
			
		||||
				this.overviewList = response.data;
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.barChart.initChart();
 | 
			
		||||
				});
 | 
			
		||||
			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(data).then((response) => {
 | 
			
		||||
				this.rateList = response.data;
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.pieChart.initChart();
 | 
			
		||||
				});
 | 
			
		||||
			this.urlOptions.rateURL(this.listQuery).then((response) => {
 | 
			
		||||
				if (response.data && response.data.length) {
 | 
			
		||||
					this.rateList = response.data;
 | 
			
		||||
					this.$nextTick(() => {
 | 
			
		||||
						this.$refs.pieChart.initChart();
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
@@ -93,4 +115,33 @@ export default {
 | 
			
		||||
	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>
 | 
			
		||||
 
 | 
			
		||||
@@ -58,7 +58,7 @@ import {
 | 
			
		||||
	getWarehouseLocationHisPage,
 | 
			
		||||
} from '@/api/warehouse/warehouseRealtimeLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
import { listData } from '@/api/system/dict/data';
 | 
			
		||||
import { publicFormatter } from '@/utils/dict';
 | 
			
		||||
 | 
			
		||||
@@ -179,8 +179,14 @@ export default {
 | 
			
		||||
		listData(queryParams).then((response) => {
 | 
			
		||||
			this.formConfig[2].selectOptions = response.data.list;
 | 
			
		||||
		});
 | 
			
		||||
		listByWarehouse(this.listQuery.storageType).then((response) => {
 | 
			
		||||
			this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
						this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
 
 | 
			
		||||
@@ -2,7 +2,7 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2023-08-21 14:26:23
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2023-11-04 14:46:59
 | 
			
		||||
 * @LastEditTime: 2023-11-06 11:31:14
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
@@ -93,7 +93,8 @@
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import { listByWarehouse, listAll } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	data() {
 | 
			
		||||
@@ -129,7 +130,10 @@ export default {
 | 
			
		||||
				there: [],
 | 
			
		||||
				four: [],
 | 
			
		||||
			}),
 | 
			
		||||
				listAll(1).then((response) => {
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === 4) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
					response.data.forEach((a, b) => {
 | 
			
		||||
						if (b % 4 === 0) {
 | 
			
		||||
							this.wareData.one.push(a);
 | 
			
		||||
@@ -142,7 +146,10 @@ export default {
 | 
			
		||||
						}
 | 
			
		||||
					});
 | 
			
		||||
					this.total = Math.ceil(response.data.length / 40);
 | 
			
		||||
				});
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
		},
 | 
			
		||||
		buttonClick(val) {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
 
 | 
			
		||||
@@ -64,7 +64,7 @@ import {
 | 
			
		||||
	outWarehouseRealtimeLocation,
 | 
			
		||||
} from '@/api/warehouse/warehouseRealtimeLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
import { listData } from '@/api/system/dict/data';
 | 
			
		||||
import { publicFormatter } from '@/utils/dict';
 | 
			
		||||
import { mapGetters } from 'vuex';
 | 
			
		||||
@@ -203,8 +203,14 @@ export default {
 | 
			
		||||
		listData(queryParams).then((response) => {
 | 
			
		||||
			this.formConfig[2].selectOptions = response.data.list;
 | 
			
		||||
		});
 | 
			
		||||
		listByWarehouse(this.listQuery.storageType).then((response) => {
 | 
			
		||||
			this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
						this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
 
 | 
			
		||||
@@ -2,16 +2,20 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2023-08-22 15:01:54
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2023-11-04 15:18:38
 | 
			
		||||
 * @LastEditTime: 2023-11-07 14:11:10
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
	<el-row :gutter="10" class="chart-container">
 | 
			
		||||
		<el-col :span="14">
 | 
			
		||||
		<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="500px"
 | 
			
		||||
					height="600px"
 | 
			
		||||
					title="库存总览"
 | 
			
		||||
					v-if="overviewList.length"
 | 
			
		||||
					:histogram="overviewList" />
 | 
			
		||||
@@ -19,16 +23,18 @@
 | 
			
		||||
				<div class="no-data-bg" v-else></div>
 | 
			
		||||
			</div>
 | 
			
		||||
		</el-col>
 | 
			
		||||
		<el-col :span="10">
 | 
			
		||||
		<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>
 | 
			
		||||
			</div>
 | 
			
		||||
		</el-col>
 | 
			
		||||
	</el-row>
 | 
			
		||||
</template>
 | 
			
		||||
@@ -36,46 +42,62 @@
 | 
			
		||||
<script>
 | 
			
		||||
import barChart from '../../chart/BarChart.vue';
 | 
			
		||||
import pieChart from '../../chart/PieChart.vue';
 | 
			
		||||
import {
 | 
			
		||||
	getOverview,
 | 
			
		||||
	getRate,
 | 
			
		||||
} from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getOverview, getRate } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			urlOptions: {
 | 
			
		||||
				allURL: getOverview,
 | 
			
		||||
        rateURL: getRate
 | 
			
		||||
				rateURL: getRate,
 | 
			
		||||
			},
 | 
			
		||||
			listQuery: {
 | 
			
		||||
				storageType: 1,
 | 
			
		||||
			},
 | 
			
		||||
			wareType: 1,
 | 
			
		||||
      totalNum: 0,
 | 
			
		||||
			overviewList: [],
 | 
			
		||||
      rateList: []
 | 
			
		||||
			rateList: [],
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	components: {
 | 
			
		||||
		barChart,
 | 
			
		||||
    pieChart
 | 
			
		||||
		pieChart,
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		this.getDataList();
 | 
			
		||||
	},
 | 
			
		||||
	created() {
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					this.wareType = item.type;
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		// 获取数据列表
 | 
			
		||||
		getDataList() {
 | 
			
		||||
      const data = {
 | 
			
		||||
        storageType : 1
 | 
			
		||||
      }
 | 
			
		||||
			this.urlOptions.allURL(data).then((response) => {
 | 
			
		||||
				this.overviewList = response.data;
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.barChart.initChart();
 | 
			
		||||
				});
 | 
			
		||||
			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(data).then((response) => {
 | 
			
		||||
				this.rateList = response.data;
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.pieChart.initChart();
 | 
			
		||||
				});
 | 
			
		||||
			this.urlOptions.rateURL(this.listQuery).then((response) => {
 | 
			
		||||
				if (response.data && response.data.length) {
 | 
			
		||||
					this.rateList = response.data;
 | 
			
		||||
					this.$nextTick(() => {
 | 
			
		||||
						this.$refs.pieChart.initChart();
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
@@ -93,4 +115,33 @@ export default {
 | 
			
		||||
	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>
 | 
			
		||||
 
 | 
			
		||||
@@ -58,7 +58,7 @@ import {
 | 
			
		||||
	getWarehouseLocationHisPage,
 | 
			
		||||
} from '@/api/warehouse/warehouseRealtimeLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
import { listData } from '@/api/system/dict/data';
 | 
			
		||||
import { publicFormatter } from '@/utils/dict';
 | 
			
		||||
 | 
			
		||||
@@ -179,8 +179,14 @@ export default {
 | 
			
		||||
		listData(queryParams).then((response) => {
 | 
			
		||||
			this.formConfig[2].selectOptions = response.data.list;
 | 
			
		||||
		});
 | 
			
		||||
		listByWarehouse(1).then((response) => {
 | 
			
		||||
			this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
						this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
 
 | 
			
		||||
@@ -2,7 +2,7 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2023-08-21 14:26:23
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2023-11-04 14:46:59
 | 
			
		||||
 * @LastEditTime: 2023-11-06 11:30:20
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
@@ -93,7 +93,8 @@
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import { listByWarehouse, listAll } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	data() {
 | 
			
		||||
@@ -129,7 +130,10 @@ export default {
 | 
			
		||||
				there: [],
 | 
			
		||||
				four: [],
 | 
			
		||||
			}),
 | 
			
		||||
				listAll(1).then((response) => {
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === 1) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
					response.data.forEach((a, b) => {
 | 
			
		||||
						if (b % 4 === 0) {
 | 
			
		||||
							this.wareData.one.push(a);
 | 
			
		||||
@@ -142,7 +146,10 @@ export default {
 | 
			
		||||
						}
 | 
			
		||||
					});
 | 
			
		||||
					this.total = Math.ceil(response.data.length / 40);
 | 
			
		||||
				});
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
		},
 | 
			
		||||
		buttonClick(val) {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
 
 | 
			
		||||
@@ -64,7 +64,7 @@ import {
 | 
			
		||||
	outWarehouseRealtimeLocation,
 | 
			
		||||
} from '@/api/warehouse/warehouseRealtimeLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
import { listData } from '@/api/system/dict/data';
 | 
			
		||||
import { publicFormatter } from '@/utils/dict';
 | 
			
		||||
import { mapGetters } from 'vuex';
 | 
			
		||||
@@ -175,7 +175,7 @@ export default {
 | 
			
		||||
					label: '入库时间',
 | 
			
		||||
					dateType: 'daterange',
 | 
			
		||||
					format: 'yyyy-MM-dd',
 | 
			
		||||
          valueFormat: "timestamp",
 | 
			
		||||
					valueFormat: 'timestamp',
 | 
			
		||||
					rangeSeparator: '-',
 | 
			
		||||
					startPlaceholder: '开始时间',
 | 
			
		||||
					endPlaceholder: '结束时间',
 | 
			
		||||
@@ -203,8 +203,14 @@ export default {
 | 
			
		||||
		listData(queryParams).then((response) => {
 | 
			
		||||
			this.formConfig[2].selectOptions = response.data.list;
 | 
			
		||||
		});
 | 
			
		||||
		listByWarehouse(1).then((response) => {
 | 
			
		||||
			this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
						this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
@@ -216,7 +222,7 @@ export default {
 | 
			
		||||
					this.listQuery.locationId = val.name;
 | 
			
		||||
					this.listQuery.palletCode = val.code;
 | 
			
		||||
					this.listQuery.status = val.status;
 | 
			
		||||
					this.listQuery.inTime = val.searchTime?val.searchTime:null;
 | 
			
		||||
					this.listQuery.inTime = val.searchTime ? val.searchTime : null;
 | 
			
		||||
					this.getDataList();
 | 
			
		||||
					break;
 | 
			
		||||
				default:
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user