Board / HH-board-2026 · Files

<template>
	<div class="dv-content-body-center-list-center">
		<div class="dv-content-body-center-list-center-head">
			<div class="stuts-style" style="padding-top: 2px;">
				<span class="div-span-title">仓库运行状况(当月往前30天)</span>
				<div class="inner-div">
					<!-- 运行状态 -->
					<div class="status-item run">
						<div class="status-dot run"></div>
						<span class="status-text">运行</span>
					</div>

					<!-- 待机状态 -->
					<div class="status-item standby">
						<div class="status-dot standby"></div>
						<span class="status-text">待机</span>
					</div>

					<!-- 故障状态 -->
					<div class="status-item error">
						<div class="status-dot error"></div>
						<span class="status-text">故障</span>
					</div>
				</div>
			</div>
		</div>
		<div class="dv-content-body-center-list-center-barChart" id="warehouseHealthByMonth"></div>
	</div>
</template>

<!--趋势图-->
<script>
export default {
	data() {
		return {
			// 各自动仓库状况
			baseUrlOff: 'http://127.0.0.1:6001/api/BulletinBoard/Mes/V1/ReadData5',
			baseUrlOnLine: window.appConfig.baseUrlOnLine5,

			sysData: {
				getwarehouseHealth: null,
			},
			tempEcharts: [
				{ name: 'SRM32', index: null },
				{ name: 'SRM31', index: null },
				{ name: 'SRM21', index: null },
				{ name: 'SRM11', index: null },
				{ name: 'SRM41', index: null },
				{ name: 'SRM11_PLCHeatBeat', index: null },
				{ name: 'SRM21_PLCHeatBeat', index: null },
				{ name: 'SRM31_PLCHeatBeat', index: null },
				{ name: 'SRM32_PLCHeatBeat', index: null },
				{ name: 'SRM41_PLCHeatBeat', index: null },
			],

			getwarehouseHealth: null,
			warehouseHealthLineOption: warehouseHealthLineOption,
		}
	},
	methods: {
		// 中间柱状图
		getData() {
			let opt = {
				urlSuffix: window.baseOnLineOrOff ? this.baseUrlOnLine : this.baseUrlOff,
				logTitle: '中间柱状图',
				isUrlALL: true,
				headers: window.baseOnLineOrOff,
				// header: window.baseOnLineOrOff,
			}
			let callBackFn = (res) => {
				if (!this.ajaxSuccessDataBefore(res, opt.logTitle)) return
				this.sysData.getwarehouseHealth = res.data.data
				// this.dataAnalysis(res.data.data)
				this.getwarehouseHealthbar(res.data.data)
			}
			''.ajax(this, opt, callBackFn)
		},
		dataAnalysis(data) {
			//获取数据下标，用于数据对应name渲染
			data.x.forEach((x, index) => {
				if (x == 'SRM32') {
					this.tempEcharts[0].index = index
				}
				if (x == 'SRM31') {
					this.tempEcharts[1].index = index
				}
				if (x == 'SRM21') {
					this.tempEcharts[2].index = index
				}
				if (x == 'SRM11') {
					this.tempEcharts[3].index = index
				}
				if (x == 'SRM41') {
					this.tempEcharts[4].index = index
				}
				if (x == 'SRM11_PLCHeatBeat') {
					this.tempEcharts[5].index = index
				}
				if (x == 'SRM21_PLCHeatBeat') {
					this.tempEcharts[6].index = index
				}
				if (x == 'SRM31_PLCHeatBeat') {
					this.tempEcharts[7].index = index
				}
				if (x == 'SRM32_PLCHeatBeat') {
					this.tempEcharts[8].index = index
				}
				if (x == 'SRM41_PLCHeatBeat') {
					this.tempEcharts[9].index = index
				}
			})
		},
		// 中间柱状图
		getwarehouseHealthbar(item) {
			let myChart = this.$echarts.init(document.getElementById('warehouseHealthByMonth'))
			// let running = []
			// let free = []
			// let error = []
			this.warehouseHealthLineOption.xAxis.data = item.x

			// item.running.forEach((x) => {
			//     running.push(x.replace(/%/g, ''))
			// })
			this.warehouseHealthLineOption.series[0].data = item.running
			// item.free.forEach((x) => {
			//     free.push(x.replace(/%/g, ''))
			// })
			this.warehouseHealthLineOption.series[1].data = item.free
			// item.error.forEach((x) => {
			//     error.push(x.replace(/%/g, ''))
			// })
			this.warehouseHealthLineOption.series[2].data = item.error
			myChart.clear()
			myChart.setOption(this.warehouseHealthLineOption)
			window.onresize = myChart.resize
		},
		ajaxSuccessDataBefore(res, title) {
			if (res.data == null || res.data.data.length == 0) {
				''.Log(title + '无数据', 'getData')
				return false
			}
			return true
		},
		getLast30Days() {
			const days = [];
			const today = new Date();

			for (let i = 0; i < 30; i++) {
				const date = new Date(today);
				date.setDate(today.getDate() - i);
				days.push(String(date.getDate()).padStart(2, '0'));
			}

			return days.reverse();
		}
	},
	mounted() {
		// this.getData()
		const days = this.getLast30Days();
		const item = {
			x: days,
			running: [50, 40, 60, 30, 40, 60, 70, 50, 45, 55, 50, 60, 65, 45, 40, 55, 45, 60, 50, 65, 55, 60, 50, 45, 80, 75, 75, 80, 70, 75],
			free: [45, 60, 40, 70, 50, 35, 30, 50, 50, 35, 40, 35, 35, 55, 50, 40, 55, 35, 50, 35, 45, 35, 50, 50, 20, 25, 20, 20, 30, 20],
			error: [5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 5],
		}
		this.getwarehouseHealthbar(item)
	},
}
</script>

<style lang="less" scoped>
.dv-content-body-center-list-center {
	box-sizing: border-box;
	width: 34vw;
	height: 100%;

	// background-color: #441f75;
	.dv-content-body-center-list-center-head {
		box-sizing: border-box;
		// padding-top: 0.7vw;
		width: 100%;
		height: 20%;

		.stuts-style {
			display: flex;
			height: 100%;
			font-weight: 800;
			font-size: 1vw;
			color: aliceblue;
			text-indent: 1vw;
			box-sizing: border-box;

			.div-span-title {
				font-size: 2vh;
				font-weight: 600;
			}

			/* 右侧小div容器 */
			.inner-div {
				width: 20%;
				/* 占大div的50%宽度 */
				height: 100%;
				/* 与大div同高 */
				margin-left: auto;
				/* 靠右对齐 */
				display: flex;
				/* 启用flex布局，用于内部子元素排列 */
			}

			/* 三个子div的共同样式 */
			.status-item {
				flex: 1;
				/* 均等分配宽度 */
				height: 100%;
				/* 与父元素同高 */
				display: flex;
				/* 内部flex布局，用于排列方块和文字 */
				align-items: center;
				/* 垂直居中 */
				justify-content: center;
				/* 水平居中 */
				padding: 0 4px;
				/* 减少左右内边距，使整体更紧凑 */
			}

			/* 状态指示小方块 - 缩小与文字的间距 */
			.status-dot {
				width: 10px;
				/* 方块宽度 */
				height: 10px;
				/* 方块高度 */
				margin-right: -6px;
				/* 减小右外边距（原6px），拉近与文字的距离 */
				border-radius: 1px;
				/* 轻微圆角 */
			}

			/* 运行状态的绿色方块 */
			.status-dot.run {
				background-color: #04efcd;
				/* 深绿色 */
			}

			/* 待机状态的黄色方块 */
			.status-dot.standby {
				background-color: #ffab20;
				/* 深黄色 */
			}

			/* 故障状态的红色方块 */
			.status-dot.error {
				background-color: #ff5447;
				/* 深红色 */
			}
		}
	}

	.dv-content-body-center-list-center-barChart {
		width: 99%;
		height: 80%;

		.bar-vhart {
			width: 100%;
			height: 100%;
		}
	}
}
</style>