count-pass-app/pages/home/home.vue

<template>
	<view class="home">
		<u-sticky bgColor="#f5f7fa" class="main-sticky">
			<view class="data-panel">
				<view class="lane-selector">
					<u-cell-group :border="false" >
						<u-cell
							@click="showPopup('popupLane')"
							:title="currentLane.name"
							value="切换"
							center
							:isLink="true"
							arrowDirection="down"
						></u-cell>
				</u-cell-group>
				</view>
				
				<view class="status-cards">
					<view class="status-card">
						<view class="label">品种</view>
						<view class="value kind">{{ currentData.materialName || ' ' }}</view>
					</view>
					<view class="status-card">
						<view class="label">预装数</view>
						<view class="value">{{ currentData.number || '0'}}</view>
					</view>
					<view class="status-card">
						<view class="label">已装数</view>
						<view class="value highlight">{{ currentData.hasNum || '0' }}</view>
					</view>
				</view>
			</view>
			</u-sticky>

    <!-- 订单列表区域 -->
    <view class="order-list">
      <view class="section-title">
				<span>包装任务</span>
				<view>
					<u-button style="height:64rpx;padding:0 40rpx" type="primary" shape="circle" @click="toAdd">新增</u-button>
				</view>
			</view>
      <view class="order-cards">
        <view 
          v-for="order in orders" 
          :key="order.id" 
          class="order-card"
        >
          <view class="order-header">
            <span class="lane">{{ order.lane }}车道</span>
            <span class="time">{{ order.roadName }}</span>
          </view>
          <view class="order-content">
            <view class="info-row">
              <span class="label">品种：</span>
              <span class="value">{{ order.materialName }}</span>
            </view>
            <view class="info-row">
              <span class="label">客户：</span>
              <span class="value">{{ order.companyName }}</span>
            </view>
            <view class="info-row">
              <span class="label">车号：</span>
              <span class="value">{{ order.vehicle }}</span>
            </view>
            <view class="info-row">
              <span class="label">装车数量：</span>
              <span class="value highlight">{{ order.number }}吨</span>
            </view>
						<view class="info-row">
              <span class="label">下单时间：</span>
              <span class="value">{{ order.setDate }}</span>
            </view>
          </view>
        </view>
      </view>
    </view>
		<Bars></Bars>
		<PopupSelect ref="popupLane" :option="laneOption" @onConfirm="onConfirm" />
	</view>
</template>

<script>
	import PopupSelect from '../../components/popup-select/index.vue'
	import Bars from '../../components/tabBar/tabBar.vue';
	import { getOrder,getLaneList } from '../../api/order'
	
	export default {
		components: {
			Bars,
			PopupSelect
		},
		data() {
			return {
				ws:null,
				wsUrl:'',
				currentData:{},
				orders:[],
				currentLane:{
					name:'',
					id:''
				},
				laneOption:[],
			}
		},
		watch: {
			
		},
		computed: {
			
		},
		onShow() {
			this.getList()
		},
		onLoad(options) {
			uni.hideTabBar()
			this.getLaneList()
			// this.connectSocket()
		},
		beforeUnmount() {
			this.ws.close(); // 组件销毁前关闭连接
		},
		methods: {
			//连接车道ws
			connectSocket(){
				console.log(this.wsUrl);
				if(!this.wsUrl) return
				if(this.ws){
					this.ws.close(); // 组件销毁前关闭连接
				}
				// 创建 WebSocket 连接（替换为你的服务端地址）
				this.ws = new WebSocket(this.wsUrl);

				// 监听连接成功
				this.ws.onopen = () => {
					console.log('WebSocket 连接已建立');
				};

				// 监听消息接收
				this.ws.onmessage = (event) => {
					console.log('1111111111111111',event);
					
					this.currentData = JSON.parse(event.data)
				};

				// 监听错误
				this.ws.onerror = (error) => {
					console.error('WebSocket 错误:', error);
				};

				// 监听连接关闭
				this.ws.onclose = () => {
					console.log('WebSocket 连接已关闭');
					setTimeout(() => this.connectSocket(), 3000); // 3秒后重连
				};
			},
		
			//去新增订单
			toAdd(){
				uni.navigateTo({ url: '/pages/other/addOrder' })
			},
			//显示选择
			showPopup(refs) {
				this.$refs[refs].showPicker = true
			},
			//获取车道
			getLaneList(){
				getLaneList().then(res=>{
					if(res.statusCode === 200){
						this.laneOption = res.data.data.map(item=>{
							return {
								text:item.roadName,
								value:item.roadCode,
								...item
							}
						})
						if(this.laneOption.length){
							this.currentLane.name = this.laneOption[0].text
							this.currentLane.id = this.laneOption[0].value
							this.wsUrl = this.laneOption[0].monitorAddress
							this.connectSocket()
						}
					}
				})
			},
			
			//获取包装任务
			getList(){
				let data = {

				}
				getOrder().then(res=>{
					if(res.statusCode === 200){
						this.orders = res.data.data.records
					}
				})
			},
			//车道确定
			onConfirm(value) {
				console.log(value);
				
				if (value.value && value.value !== this.currentLane.id) {
					this.currentLane.name = value.text
					this.currentLane.id = value.value
					this.wsUrl = value.monitorAddress
					this.connectSocket()
				}
			},
		}
	}
</script>
<style scope>
	/* #ifndef APP-NVUE */
	page {
		background-color: #f5f7fa;
	}
	/* #endif */
</style>
<style lang="scss" scoped>
.main-sticky{
	padding: 24rpx;
}
	.loading-status {
  padding: 32rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.data-panel {
  background: white;
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.1);
}

.lane-selector {
  margin:-32rpx -32rpx 32rpx;
}

.lane-selector :deep(.el-select) {
  width: 100%;
}

.status-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24rpx;
}

.status-card {
  background: #f8f9fb;
	display: flex;
	flex-direction: column;
  border-radius: 16rpx;
  padding: 24rpx;
  text-align: center;
}

.status-card .label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 16rpx;
}

.status-card .value {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
	flex: 1;
	display:flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.status-card .kind{
	font-size: 28rpx;
}

.status-card .value.highlight {
  color: #409eff;
}

.order-list {
  margin: 24rpx;
}

.section-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 24rpx;
  color: #333;
}

.order-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.order-card {
  background: white;
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.1);
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24rpx;
  padding-bottom: 16rpx;
  border-bottom: 1px solid #eee;
}

.order-header .lane {
  font-weight: bold;
  color: #409eff;
}

.order-header .time {
  color: #999;
}

.info-row {
  display: flex;
  margin-bottom: 16rpx;
}

.info-row .label {
  color: #666;
  width: 160rpx;
}

.info-row .value {
  color: #333;
  flex: 1;
}

.info-row .value.highlight {
  color: #409eff;
  font-weight: bold;
}
</style>