jeecgBootUniapp/src/pages/production/shishishuju/trqSssj.vue

<template>
	<PageLayout :navbarShow="false">
		<!-- 标题行 -->
		<view class="header-row">
			<view class="title">天然气实时数据</view>
			<view style="min-width: 200px;">
				<cxc-szcx-stationJl-select v-model="stationID" returnCodeOrID="id" @change="onChange">
				</cxc-szcx-stationJl-select>
			</view>
		</view>
		<button size="mini" @click="getData">连接WebSocket</button>

		<view class="container">
			<view v-for="(item, index) in jlData" :key="index" class="card">
				<view class="field-item">
					<text class="titlejl">{{ stationName }}--{{ item.jldname }}</text>
					<view class="status-circle"
						:style="{ backgroundColor:   item.yxzt==='运行' ? '#4CAF50' : '#F44336'  }">
						{{item.yxzt}}
					</view>

				</view>

				<view class="field-list">
					<!-- 压力 -->
					<view class="field-item">
						<text class="field-label">压力(MPa)</text>
						<text class="field-value">{{ formatNumber(item.yl) || '-' }}</text>
					</view>
					<!-- 差压 -->
					<view class="field-item">
						<text class="field-label">差压(kPa)</text>
						<text class="field-value">{{ formatNumber(item.yc) || '-' }}</text>
					</view>
					<!-- 温度 -->
					<view class="field-item">
						<text class="field-label">温度(℃)</text>
						<text class="field-value">{{ formatNumber(item.wd) || '-' }}</text>
					</view>
					<!-- 瞬时流量 -->
					<view class="field-item">
						<text class="field-label">瞬时流量(m³/d)</text>
						<text class="field-value">{{ formatNumber(item.ssll) || '-' }}</text>
					</view>

					<!-- 今日流量 -->
					<view class="field-item">
						<text class="field-label">今日流量(m³)</text>
						<text class="field-value">{{ formatNumber(item.jrl) || '-' }}</text>
					</view>

					<!-- 昨日流量 -->
					<view class="field-item">
						<text class="field-label">昨日流量(m³)</text>
						<text class="field-value">{{ formatNumber(item.zrl) || '-' }}</text>
					</view>

					<!-- 昨日时间 -->
					<view class="field-item">
						<text class="field-label">昨日时间(min)</text>
						<text class="field-value">{{ formatNumber(item.zrsj) || '-' }}</text>
					</view>

					<!-- 今日时间 -->
					<view class="field-item">
						<text class="field-label">今日时间(min)</text>
						<text class="field-value">{{ formatNumber(item.jrsj) || '-' }}</text>
					</view>
				</view>
			</view>
		</view>
	</PageLayout>
</template>

<script setup>
	import {
		queryJldZcList,
		queryJldDataByZc
	} from '@/api/production'
	import {
		formatDate,
		getDateAfterDays
	} from '@/utils/dateTime';

	const stationList = ref([])
	// 控制弹窗显示与隐藏
	const popupSelect = ref(null);
	const stationID = ref("")
	const stationName = ref("")

	const jlData = ref([])

	const sssjUrl = ref('wss://szcx.zyyt.sinopec.com/Gyk/websocket/')
	const jlByzc = ref('https://szcx.zyyt.sinopec.com/Gyk/sssj/GetJlByZc')

	//首先链接的地址要先拿在websocket在线调试去调试是否能连接通 不然下面的操作就不知道错误
	// 建立websocket
	function connectSocketInit() {
		console.log(11, )
		let userID = '1412198011559055361'
		// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
		uni.connectSocket({
			// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
			// url: 'wss://'+this.$api.sellerWebsocket+'/'+this.userinfo.id,
			url: sssjUrl.value + userID,
			success(data) {
				console.log(data);
				console.log('websocket连接成功');
			}
		});
		// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
		uni.onSocketOpen(function(res) {
			console.log('WebSocket连接已打开！');
		});
		uni.onSocketMessage(function(res) {
			console.log('收到服务器内容：' + res.data);
			// 语音播放 start
			const innerAudioContext = uni.createInnerAudioContext();
			innerAudioContext.autoplay = true;
			innerAudioContext.src = 'https://wzs1.oss-cn-beijing.aliyuncs.com/music.mp3';
			innerAudioContext.onPlay(() => {
				console.log('开始播放');
			});
			innerAudioContext.onError(res => {
				console.log(res.errMsg);
				console.log(res.errCode);
			});
			//语音播放 end
		});
		// 这里仅是事件监听【如果socket关闭了会执行】
		uni.onSocketClose(function(res) {
			console.log('WebSocket 已关闭！');
		});
	}

	function getData() {
		connectSocketInit()
	}

	function onChange(e, data) {
		console.log(2, e, data.value);
		stationID.value = e
		stationName.value = data.value.title
		uni.request({
			url: jlByzc.value + '?zhanc=' + stationID.value + '&jldLx=0',
			method: 'GET',
			success: (res) => {
				jlData.value = JSON.parse(res.data.result).JlData;
			}
		})

	}
	const websock = ref(null);
	const timer2 = ref(null);
	// 封装心跳函数
	const websocketheart = () => {
		timer2.value = setInterval(() => {
			if (websock.value && websock.value.readyState === 1) {
				// 如果连接正常，发送心跳消息
				connectSocketInit()
			}
		}, 1000);
	};

	onMounted(() => {
		queryJldZcList({
			pId: '1267633406031953921'
		}).then((res) => {

			if (res.success) {
				stationList.value = res.result
				console.log(1, stationList.value)

			}
		})

		websocketheart()
	})



	// 数字格式化
	const formatNumber = (num) => {
		let temp = 0;
		try {
			temp = parseFloat(num);
		} catch (error) {
			//TODO handle the exception
		}

		return temp.toFixed(4).replace(/\.?0+$/, '');
	};
</script>

<style scoped>
	.header-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10 10rpx;
		border-bottom: 1rpx solid #eee;
		margin-left: 10px;
		margin-right: 10px;
	}

	.title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}

	.titlejl {
		font-size: 20rpx;
		vertical-align: middle;
		font-weight: bold;
		color: #0055ff;
		margin-bottom: 15px;
	}

	.container {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 16px;
		padding: 16px;
	}

	.card {
		background: #fff;
		border-radius: 8px;
		padding: 5px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	}

	.field-list {
		margin-top: 10px;
		display: flex;
		flex-wrap: wrap;
		/* 允许子元素换行 */
		gap: 3px;
	}

	.field-item {
		display: flex;
		height: 30px;
		justify-content: space-between;
		align-items: center;
		padding: 5px 5px;
		background: #f8f9fa;
		border-radius: 4px;
		flex-basis: calc(50%-10px);
		/* 每个元素占据约一半宽度，减去间隙 */
		box-sizing: border-box;
		/* 包含内边距和边框 */
	}

	/* 当屏幕宽度较小时，每个元素占据整行 */
	@media (max-width: 200px) {
		.field-item {
			flex-basis: 100%;
		}
	}

	.field-label {
		color: #666;
		font-size: 8px;
		flex: 1;
		margin-right: 2px;
		width: 80px;
		font-weight: 500;
	}

	.field-value {
		color: #1890ff;
		font-weight: 500;
		font-size: 12px;
		text-align: right;
		width: 60px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.status-circle {
		width: 70rpx;
		height: 30rpx;
		font-size: 12px;
		vertical-align: middle;


	}
</style>