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">切割数据（切坡一体机）</span>
				<div class="inner-div">
					<div class="status-item run">
						<!-- <div class="status-dot run"></div> -->
						<span>管材数量：</span>
						<span class="status-text">24</span>
					</div>

					<!-- 待机状态 -->
					<div class="status-item standby">
						<span>切割管段总数量：</span>
						<span class="status-text">87</span>
					</div>
				</div>
			</div>
		</div>
		<div style="height: 100%;width: 100%;display: flex;">
			<div class="dv-content-body-center-list-center-barChart" id="warehouseHealth3"></div>

			<div class="dv-content-body-center-list-center-barChart2" id="warehouseHealth4"></div>
		</div>
	</div>
</template>

<!--趋势图-->
<script>
// import { warehouseHealthOption } from '../../public/static/echartsConfig'
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,
			warehouseHealthOption: warehouseHealthOption,
			warehouseHealthOption2: warehouseHealthOption2,
		}
	},
	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('warehouseHealth3'))
			this.warehouseHealthOption.xAxis.data = item.x
			this.warehouseHealthOption.series[0].data = item.running
			myChart.clear()
			myChart.setOption(this.warehouseHealthOption)
			window.addEventListener('resize', () => {
				myChart.resize();
			});
		},
		getwarehouseHealthbar2(item) {
			let myChart2 = this.$echarts.init(document.getElementById('warehouseHealth4'))
			this.warehouseHealthOption2.xAxis.data = item.x
			this.warehouseHealthOption2.series[0].data = item.running
			myChart2.clear()
			myChart2.setOption(this.warehouseHealthOption2)
			window.addEventListener('resize', () => {
				myChart2.resize();
			});
		},
		ajaxSuccessDataBefore(res, title) {
			if (res.data == null || res.data.data.length == 0) {
				''.Log(title + '无数据', 'getData')
				return false
			}
			return true
		},
	},
	mounted() {
		// this.getData()
		// const item = {
		//     x: ['1号堆垛机', '1号RGV', '2号RGV'],
		//     running: [50, 40, 44],
		//     free: [49, 59, 55],
		//     error: [1, 1, 0.9],
		// }
		// this.getwarehouseHealthbar(item)
	},
}
</script>

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

	// 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;
				margin-top: 0.6vh;
			}

			/* 右侧小div容器 */
			.inner-div {
				width: 50%;
				/* 占大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;
				/* 深红色 */
			}

			.status-text {
				color: #0eadfc;
			}
		}
	}

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

		.bar-vhart {
			width: 100%;
			height: 100%;
		}
	}

	.dv-content-body-center-list-center-barChart2 {
		width: 72%;
		height: 80%;

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