315 lines
7.3 KiB
Vue
315 lines
7.3 KiB
Vue
<template>
|
||
<view :class="{ gray: store.isgray == 1 }">
|
||
|
||
|
||
<view>
|
||
<!-- 标题行 -->
|
||
<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>
|
||
|
||
</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>
|
||
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
onMounted,
|
||
computed,
|
||
nextTick,
|
||
watchEffect
|
||
} from 'vue';
|
||
import {
|
||
onLoad
|
||
} from '@dcloudio/uni-app';
|
||
import {
|
||
queryJldZcList,
|
||
queryJldDataByZc
|
||
} from '@/api/shengchan.js';
|
||
import {
|
||
formatDate,
|
||
getDateAfterDays
|
||
} from '@/utils/dateTime.js';
|
||
import {
|
||
beforeJump
|
||
} from '@/utils/index.js';
|
||
import {
|
||
useStore
|
||
} from '@/store';
|
||
const store = useStore();
|
||
|
||
const stationList = ref([])
|
||
// 控制弹窗显示与隐藏
|
||
const popupSelect = ref(null);
|
||
const stationID = ref("")
|
||
const stationName = ref("")
|
||
|
||
const jlData = ref([])
|
||
|
||
const sssjUrl = ref('wss://10.75.166.6:9999/Gyk/websocket/')
|
||
const jlByzc = ref('http://10.75.166.6:9999/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) => {
|
||
console.log(3, res, stationName.value)
|
||
jlData.value = JSON.parse(res.data.result).JlData;
|
||
console.log(4, jlData.value)
|
||
}
|
||
})
|
||
|
||
}
|
||
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> |