hht-ftdlDTY-uni/pages/ftdlDTY/zd-manage.vue

<template>
	<view class="zd_container">
		<!-- 站点管理 -->
		<nav-bar :title="title"></nav-bar>
		<view class="zd_content">
			<view class="zd_wrapper">
				<view class="zd-row border-bottom">
					<view class="zd-col-7">
						<!-- <span class="filter_label">区域</span> -->
						<span class="filter_label">{{$t('filter.area')}}</span>
					</view>
					<view class="zd-col-24 filter_select">
						<uni-data-select v-model="index" :localdata="options" placeholder="" @change="selectChange"></uni-data-select>
					</view>
				</view>
			</view>
			<view class="zd_wrapper grid-wraper">
				<view class="zd-header">
					<view class="legend">
						<view class="legend-item">
							<view class="status-dot has-goods"></view>
							<text>有货</text>
						</view>
						<view class="legend-item">
							<view class="status-dot no-goods"></view>
							<text>无货</text>
						</view>
					</view>
				</view>
				
				<!-- 按排号分组显示 -->
				<view 
					v-for="(group, rowNum) in groupedPoints" 
					:key="rowNum" 
					class="row-group"
				>
					<!-- <view class="row-title">第{{ rowNum }}排</view> -->
					<view class="points-container">
						<view 
							v-for="item in group" 
							:key="item.point_code"
							class="point-item"
							:class="item.point_status === '2' ? 'has-goods' : 'no-goods'"
						>
							<!-- 左上角状态标识 -->
							<!-- <view class="status-indicator" :class="item.status === '2' ? 'has-goods' : 'no-goods'"></view> -->
							<!-- <view class="point-code">{{ item.point_code }}</view> -->
							<view class="point-name">{{ item.point_name }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue'
	import SearchBox from '@/components/SearchBox.vue'
	import { confirmAction } from '@/utils/utils.js'
	import {selectRegions, selectPointInfo} from '@/utils/getData4.js'
	export default {
		components: {
			NavBar,
			SearchBox
		},
		data() {
			return {
				title: '',
				options: [],
				index: '',
				dataList: [
					{
					"point_code": "R6_01_01", 
					"point_status": "1", //1-无货 2-有货
					"row_num": "1",
					"point_name": "1区域01排01列"
					},
					{
					"point_code": "R6_01_02", 
					"point_status": "2", 
					"row_num": "1",
					"point_name": "1区域01排02列"
					},
					{
					"point_code": "R6_01_03", 
					"point_status": "1", 
					"row_num": "1",
					"point_name": "1区域01排03列"
					},
					{
					"point_code": "R6_01_04", 
					"point_status": "2", 
					"row_num": "1",
					"point_name": "1区域01排04列"
					},
					{
					"point_code": "R6_01_05", 
					"point_status": "1", 
					"row_num": "1",
					"point_name": "1区域01排05列"
					},
					{
					"point_code": "R6_01_06", 
					"point_status": "2", 
					"row_num": "1",
					"point_name": "1区域01排06列"
					},
					{
					"point_code": "R6_02_01", 
					"point_status": "2", 
					"row_num": "2",
					"point_name": "1区域02排01列"
					},
					{
					"point_code": "R6_02_02", 
					"point_status": "1", 
					"row_num": "2",
					"point_name": "1区域02排02列"
					},
					{
					"point_code": "R6_02_03", 
					"point_status": "2", 
					"row_num": "2",
					"point_name": "1区域02排03列"
					},
					{
					"point_code": "R6_02_04", 
					"point_status": "1", 
					"row_num": "2",
					"point_name": "1区域02排04列"
					},
					{
					"point_code": "R6_02_05", 
					"point_status": "2", 
					"row_num": "2",
					"point_name": "1区域02排05列"
					},
					{
					"point_code": "R6_03_01", 
					"point_status": "1", 
					"row_num": "3",
					"point_name": "1区域03排01列"
					},
					{
					"point_code": "R6_03_02", 
					"point_status": "2", 
					"row_num": "3",
					"point_name": "1区域03排02列"
					},
					{
					"point_code": "R6_03_03", 
					"point_status": "2", 
					"row_num": "3",
					"point_name": "1区域03排03列"
					},
					{
					"point_code": "R6_03_04", 
					"point_status": "1", 
					"row_num": "3",
					"point_name": "1区域03排04列"
					}
				],
				rowCapacity: 5 // 每行显示的点位数量，可以调整
			};
		},
		onLoad (options) {
			this.title = options.title
		},
		computed: {
			// 按row_num分组
			groupedPoints() {
			const groups = {}
			this.dataList.forEach(item => {
				if (!groups[item.row_num]) {
					groups[item.row_num] = []
				}
				groups[item.row_num].push(item)
			})
				return groups
			}
		},
		created () {
			this._selectRegions()
		},
		methods: {
			async _selectRegions () {
				try {
					let res = await selectRegions()
					if (res) {
						this.options = res.data
					} else {
						this.options =[]
					}
				} catch (e) {
					this.options = []
				}
			},
			selectChange (e) {
				this.index = e
				this.searchList()
				setTimeout(() => {
					this._selectPointInfo()
				}, 9000)
			},
			searchList () {
				this.dataList = []
				this._selectPointInfo()
			},
			async _selectPointInfo () {
				let res = await selectPointInfo(this.index)
				if (res.code === '200') {
					this.dataList = res.data
				}
			}
		}
	}
</script>
<style lang="stylus" scoped>
.zd-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #e8e8e8;
}

// .zd-title {
//   font-size: 44rpx;
//   font-weight: bold;
//   color: #333;
// }

.legend {
  display: flex;
  gap: 30rpx;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10rpx;
  font-size: 28rpx;
  color: #666;
}

.status-dot {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
}

.status-dot.has-goods {
  background-color: #52c41a;
}

.status-dot.no-goods {
  background-color: #bfbfbf;
}

.row-group {
  margin-bottom: 40rpx;
}

.row-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
  background-color: #f0f8ff;
  padding: 15rpx 20rpx;
  border-radius: 8rpx;
  border-left: 6rpx solid #1890ff;
}

.points-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.point-item {
  position: relative;
  border: 2rpx solid #e8e8e8;
  border-radius: 12rpx;
  padding: 25rpx 20rpx;
  text-align: center;
  background-color: #fafafa;
  width: calc(20% - 16rpx); /* 每行5个，根据rowCapacity计算 */
  box-sizing: border-box;
  transition: all 0.3s;
}

/* 有货状态 - 绿色背景 */
.point-item.has-goods {
  background-color: #f6ffed;
  border-color: #b7eb8f;
}

/* 无货状态 - 默认背景 */
.point-item.no-goods {
  background-color: #fafafa;
  border-color: #e8e8e8;
}

/* 状态指示器 - 左上角圆点 */
.status-indicator {
  position: absolute;
  top: 12rpx;
  left: 12rpx;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
}

.status-indicator.has-goods {
  background-color: #52c41a;
}

.status-indicator.no-goods {
  background-color: #bfbfbf;
}

.point-code {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
  color: #333;
}

.point-name {
  font-size: 24rpx;
  color: #666;
}
</style>