ldeyun/jeecgBootUniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加工艺参数、可燃气体报警仪、压缩机参数的实时数据页面。

Browse Source
This commit is contained in:
liaodeyun 2025-10-01 19:58:57 +08:00
commit c705efe142
15 changed files with 1304 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
env/.env.development vendored
View File

@ -7,13 +7,11 @@ VITE_SHOW_SOURCEMAP = true
# 是否启用读取配置文件 min
#VITE_WEBAPP = 'D://opt//AppUpdateTest'
VITE_WEBAPP = ''
#VITE_SERVER_BASEURL = 'http://10.75.15.247:8080/jeecg-boot'
VITE_SERVER_BASEURL = 'http://10.75.166.6:8080/jeecg-boot'
#VITE_SERVER_BASEURL = 'http://10.75.173.194:8080/jeecg-boot'
#VITE_SERVER_BASEURL = 'http://10.75.166.6:8080/jeecg-boot'
#VITE_SERVER_BASEURL = 'https://10.75.166.6/test'
#VITE_SERVER_BASEURL = 'https://36.112.48.190/jeecg-boot'
#VITE_SERVER_BASEURL = 'https://szcx.zyyt.sinopec.com/jeecg-boot'
VITE_SERVER_BASEURL = 'https://szcx.zyyt.sinopec.com/jeecg-boot'
#VITE_SERVER_BASEURL = 'https://szcx.zyyt.sinopec.com/wwapi'

37
src/api/devicecontrol/officedevice.ts
View File

@ -10,6 +10,33 @@ export function gethomelist(config : object) { // 获取房间信息
})
}
// export function gethomelistforApp(config : object) { // 获取房间信息
// return http({
// url: '/RoomOperation/RoomOperation/gethomelistforApp',
// method: 'GET',
// data: config
// })
// }
//张祥瑞20250925修改为该方法
export function gethomelistforApp(config : object) { // 获取房间信息
return http({
url: '/RoomAPP/RoomAPP/gethomelistforApp',
method: 'GET',
data: config
})
}
//张祥瑞20250925添加方法，传参为房间表id
export function getfjkzbmforfjidApp(config : object) { // 查询开关状态
return http({
url: mqtturl +
"/mqttcontroller/mqttcontroller/getfjkzbmforfjid",
method: 'GET',
data: config
})
}
export function testcontiont(config : object) { // 获取房间信息
return http({
url: mqtturl + '/mqttSubclient/mqttSubclient/testgetcontint',
@ -78,9 +105,17 @@ export function listAllRegions(config : object) { // 查询开关状态
})
}
// export function Selecthomelist(config : object) { // 查询开关状态
// return http({
// url: '/RoomOperation/RoomOperation/Selecthomelist',
// method: 'GET',
// data: config
// })
// }
//张祥瑞，20250925修改为该方法
export function Selecthomelist(config : object) { // 查询开关状态
return http({
url: '/RoomOperation/RoomOperation/Selecthomelist',
url: '/RoomAPP/RoomAPP/SelecthomelistForApp',
method: 'GET',
data: config
})

8
src/api/production/index.ts
View File

@ -64,4 +64,12 @@ export function queryJldRbDataByJldID(params : object) { // 获取计量点日
method: 'GET',
data: params
})
}
export function queryGyKrDataByZc(params : object) { // 获取工艺和可燃气体实时数据
return http({
url: '/http://10.75.166.6:9999/Gyk/sssj/GetGyKrByZc',
method: 'GET',
data: params
})
}

2
src/api/system/user.ts
View File

@ -29,7 +29,7 @@ export function editUserApi(config : object) {
/*根据部门Cod和角色Id查询用户信息*/
export function queryUserByOrgRoleApi(config : object) {
return http({
url: '/cxcChangesInPersonnel/cxcChangesInPersonnel/queryByDepCodRoleId',
url: '/sys/user/queryByDepCodRoleId',
method: 'GET',
data: config
})

10
src/common/socket.ts
View File

@ -7,7 +7,7 @@ const baseUrl = import.meta.env.VITE_SERVER_BASEURL
class socket {
constructor() {
console.log(77777777777777)
// console.log(77777777777777)
this.socketUrl = baseUrl
this.socketStart = false
this.socketType = ''
@ -50,7 +50,7 @@ class socket {
})
// update-end-author:taoyan date:20220422 for: v2.4.6 的 websocket 服务端，存在性能和安全问题。 #3278
uni.onSocketOpen((res) => {
console.log("连接进来了--------53333333333323----")
// console.log("连接进来了--------53333333333323----")
this.socketStart = true
callback && callback()
console.log('WebSocket连接已打开！')
@ -85,10 +85,10 @@ class socket {
socketReceive() {
const _this = this
uni.onSocketMessage(function (res) {
console.log('APP:--》收到服务器内容：', res)
console.log('连接路径----：', baseUrl)
// console.log('APP:--》收到服务器内容：', res)
// console.log('连接路径----：', baseUrl)
if (res.data.startsWith('CONNECTED') || res.data.startsWith('MESSAGE') || res.data.startsWith('RECEIPT')) {
console.log('放行----------：', res)
// console.log('放行----------：', res)
// 放行 STOMP 协议消息，交给 socketTask.onMessage 处理 by 闵
return;
}

38
src/pages-home/device-control/office/ALLleader.vue
View File

@ -39,7 +39,7 @@
</view>
</view>
</view>
<!--
<!--
<view class="connection-section">
<button v-if="!connected" @click="connectWebSocket" class="connect-btn">
连接WebSocket
@ -84,7 +84,8 @@
getMqttPushClient,
treeChildList,
listAllRegions,
Selecthomelist
Selecthomelist,
getfjkzbmforfjidApp
} from '@/api/devicecontrol/officedevice';
// import socketforleader from '@/common/socketforleader'
@ -127,7 +128,7 @@
if (res.success) {
homelist.value = res.result.map((item, index) => ({
...item, // 保留原有字段
homezt: 0, // 添加homezt字段，默认为0
// homezt: 0, // 添加homezt字段，默认为0
}));
//添加楼层情况
}
@ -176,6 +177,21 @@
}
}
}
/**
* 房间信息订阅
*
*/
const getfjkzbmforfjid = () => {
//查询开关状态
for (const item of filteredFloors.value) {
console.log("00000000000--------------",item)
getfjkzbmforfjidApp({fjbid:item.id}).then((res) => {
console.log("订阅成功--------------",res)
}).catch((err) => {
console.log("订阅失败："+item.fjh+"。失败信息："+err);
});
}
}
const getfjkzbm = async (item) => {
// console.log("5555----------",item.id)
let fjkzbm = {};
@ -288,8 +304,10 @@
filteredFloors.value = groupByFloor(selectBydata)
// console.log("数据分组-555---", filteredFloors.value[0].rooms)
//分组完进行房间状态查询，张祥瑞
getAllswitchByids()
console.log("进入房间订阅：")
getfjkzbmforfjid();
// getAllswitchByids()
}
}
//----------------树状展示end-----------
@ -297,7 +315,7 @@
//------------------------以上为数据处理---end-------------
//处理返回的消息
const handlesocketMessage = (jsonString) => {
console.log("1300--666666666666666---", jsonString)
// console.log("1300--666666666666666---", jsonString)
try {
const messageObj = JSON.parse(jsonString);
@ -378,12 +396,12 @@
uni.sendSocketMessage({
data: connectFrame
});
console.log("77777777777")
// console.log("77777777777")
});
// 监听消息
socketTask.onMessage((res) => {
console.log("8888888888888888888")
// console.log("8888888888888888888")
const data = res.data;
const [commandLine, ...headerLines] = data.split('\n');
const emptyLineIndex = headerLines.findIndex(line => line === '');
@ -395,8 +413,8 @@
}
const body = headerLines.slice(emptyLineIndex + 1).join('\n').replace(/\x00$/, '');
console.log("999999999999999", res)
console.log("121212121212", commandLine)
// console.log("999999999999999", res)
// console.log("121212121212", commandLine)
switch (commandLine) {
case 'CONNECTED':
connectionStatus.value = 'STOMP已连接';

50
src/pages-home/device-control/office/Personaldevices.vue
View File

@ -13,30 +13,11 @@
<text class="info-value">{{ room.ssbmname }}</text>
</view>
</view>
<!-- 补位元素，确保网格始终保持两列布局 -->
<view v-if="floor.rooms.length % 2 !== 0" class="room-placeholder"></view>
</view>
</view>
</view>
<!-- <view class="connection-section">
<button v-if="!connected" @click="connectWebSocket" class="connect-btn">
连接WebSocket
</button>
<button @click="disconnectWebSocket" class="disconnect-btn">
断开连接
</button>
<text :class="['status', connected ? 'connected' : 'disconnected']">
{{ connectionStatus }}
</text>
</view>
<view class="message-container">
<text class="subtitle">消息记录</text>
<scroll-view scroll-y="true" class="message-list">
<view v-for="(item, index) in messages" :key="index" :class="['message-item', item.type]">
<text class="message-content">{{ item.content }}</text>
</view>
</scroll-view>
</view> -->
</view>
</template>
@ -48,11 +29,13 @@
} from 'vue'
import {
gethomelist,
gethomelistforApp,
getMqttPushClient,
selectfjkzbmforfjid,
createdSwitch,
listAllRegions,
Selecthomelist
Selecthomelist,
getfjkzbmforfjidApp
} from '@/api/devicecontrol/officedevice';
// import useWebSocketService from '@/api/devicecontrol/webSocketService'
@ -90,18 +73,33 @@
//获取房间信息
const getofficehomelist = async () => {
await gethomelist().then((res) => {
//20250811,张祥瑞,修改查询接口
await gethomelistforApp().then((res) => {
if (res.success) {
homelist.value = res.result.map((item, index) => ({
...item,
homezt: 0, // 添加homezt字段，默认为0
// homezt: 0, // 添加homezt字段，默认为0
}));
}
}).catch((err) => {
console.log(err);
});
filteredFloors.value = groupByFloor(homelist)
getAllswitchByids();
// getAllswitchByids();
//获取完房间信息然后订阅
getfjkzbmforfjid();
}
//订阅房间信息
const getfjkzbmforfjid = () => {
for (const item of filteredFloors.value) {
getfjkzbmforfjidApp({fjbid:item.id}).then((res) => {
console.log("订阅成功--------------",res)
}).catch((err) => {
console.log("订阅失败："+item.fjh+"。失败信息："+err);
});
}
}
// 数据分组处理
@ -246,7 +244,7 @@
if (res.success) {
selectBydata.value = res.result;
filteredFloors.value = groupByFloor(selectBydata)
getAllswitchByids()
// getAllswitchByids()
}
}
//----------------树状展示end-----------

6
src/pages-home/device-control/office/officehomedevice.vue
View File

@ -62,15 +62,15 @@
<view class="ac-controls" v-if="ktpd">
<button class="ac-btn" :class="{ 'active': acMode === 1 }" @click="conditioning(1)">
<uni-icons type="snow" size="20" color="#3498db"></uni-icons>
<!-- <uni-icons type="snow" size="20" color="#3498db"></uni-icons> -->
<text>制冷 25°C</text>
</button>
<button class="ac-btn" :class="{ 'active': acMode === 2 }" @click="conditioning(2)">
<uni-icons type="fire" size="20" color="#e74c3c"></uni-icons>
<!-- <uni-icons type="fire" size="20" color="#e74c3c"></uni-icons> -->
<text>制热 27°C</text>
</button>
<button class="ac-btn" :class="{ 'active': acMode === 0 }" @click="conditioning(0)">
<uni-icons type="close" size="20" color="#7f8c8d"></uni-icons>
<!-- <uni-icons type="close" size="20" color="#7f8c8d"></uni-icons> -->
<text>关闭空调</text>
</button>
</view>

20
src/pages-humanResource/absence/add.vue
View File

@ -335,17 +335,13 @@
roleId: '1554379432313397250',
orgCode: code
}).then(res => {
if (res.result.length > 0) {
model.hr = res.result[0].username
}
if (!code) {
hrData.value = res.result.map(item => {
return {
label: item.realname,
value: item.username
}
})
}
model.hr = res.result.user.username
hrData.value = res.result.list.map(item => {
return {
label: item.realname,
value: item.username
}
})
})
}
@ -364,8 +360,6 @@
getZwmcAndExa()
/*获取工作单位*/
queryDepName()
/*获取劳资员*/
getHrList()
/*获取*/
queryHisDate()
});

334
src/pages-production/shishishuju/gycsSssj.vue
View File

@ -1,8 +1,336 @@
<route lang="json5" type="page">
{
layout: 'default',
style: {
navigationStyle: 'custom',
navigationBarTitleText: '站场工艺参数实时数据',
},
}
</route>
<template>
</template>
<PageLayout navTitle="站场工艺参数实时数据" routeMethod="pushTab">
<!-- 标题行 -->
<wd-text :text="stationName ? stationName: ' '"
style="color: blue;font-size:18px;text-align: center;margin: 5px;"></wd-text>
<wd-cell :title="'时间:' + nowDateTime " center>
<wd-button custom-class="custom-value" size="small" plain clickable
@click="handleStop">{{caijiText}}</wd-button>
<wd-button custom-class="custom-value" size="small" plain clickable
@click="handleRightClick">选择站场</wd-button>
<script>
</wd-cell>
<scroll-view direction="vertical" class="scroll-container">
<view class="container">
<view>
<view class="field-item">
<text class="titlejl">参数名称</text>
<text class="field-value">参数数值</text>
<text class="field-dw">单位</text>
</view>
</view>
<view v-for="(item, index) in jlData" :key="index" class="card">
<view>
<view class="field-item">
<text class="titlejl">{{ item.jldname }}:</text>
<text class="field-value">{{ formatNumber(item.gyvalue) || '-' }}</text>
<text class="field-dw">{{ (item.jlddw) || '-' }}
</text>
</view>
</view>
</view>
</view>
</scroll-view>
<wd-popup v-model="selectZc" position="bottom" custom-style="width:100%;height: 300px;" @close="handleClose">
<view style="font-size: 18px;text-align: center;color: blue;margin: 10px;">选择采输气站场</view>
<cxc-szcx-stationJl-select v-model="stationID" returnCodeOrID="id" @change="onChange">
</cxc-szcx-stationJl-select>
</wd-popup>
<wd-popup v-model="sssjFlag" position="bottom" custom-style="width:100%;height: 70vh;" @close="handleClose">
<sssj-chart :jldData="jldData"></sssj-chart>
</wd-popup>
<wd-popup v-model="lssjFlag" position="bottom" custom-style="width:100%;height: 70vh;" @close="handleClose">
<lssj-chart :jldData="jldData"></lssj-chart>
</wd-popup>
</PageLayout>
</template>
<script setup>
import {
queryJldZcList,
queryJldDataByZc
} from '@/api/production'
import {
ref,
onMounted,
computed,
nextTick,
watchEffect,
onUnmounted,
} from 'vue';
import {
onHide,
onShow
} from '@dcloudio/uni-app'
import {
formatDate
} from '@/utils/dateTime.ts';
import SssjChart from './chart/sssjChart'
import LssjChart from './chart/lssjChart'
const res = wx.getSystemInfoSync();
const statusHeight = res.statusBarHeight; //状态栏高度
const cusnavbarheight = (statusHeight + 30) + "px";
const selectZc = ref(false)
const lssjFlag = ref(false)
const sssjFlag = ref(false)
const nowDateTime = ref("")
const caijiText = ref("停止采集")
const stationList = ref([])
const stationID = ref("")
const stationName = ref(" ")
const jlData = ref([])
const jldData = ref({})
const GyKrByzc = ref('https://szcx.zyyt.sinopec.com/Gyk/sssj/GetGyKrByZc')
function openSssjChart(e) {
sssjFlag.value = true;
console.log(11, e)
jldData.value = e
console.log(selectZc.value)
}
function openlssjChart(e) {
lssjFlag.value = true;
jldData.value = e
console.log(selectZc.value)
}
function handleRightClick() {
selectZc.value = true;
console.log(selectZc.value)
}
function handleClose() {
console.log(selectZc.value)
}
function onChange(e, data) {
console.log(2, e, data.value);
stationID.value = e
stationName.value = data.value.title
getScData(); //获取生产数据
}
function handleStop() {
if (caijiText.value === "停止采集") {
console.log('清除定时器,停止采集')
caijiText.value = "开始采集"
clearInterval(timer2.value);
timer2.value = null;
} else {
console.log('开始采集，打开定时器')
caijiText.value = "停止采集"
websocketheart()
}
}
const websock = ref(null);
const timer2 = ref(null);
// 封装心跳函数
const websocketheart = () => {
// 先清除之前的定时器
if (timer2.value) {
clearInterval(timer2.value);
timer2.value = null;
}
timer2.value = setInterval(() => {
nowDateTime.value = formatDate(new Date(), "YYYY-MM-DD HH:mm:ss")
if (websock.value && websock.value.readyState === 1) {
// 如果连接正常，发送心跳消息
// connectSocketInit()
}
if (stationID.value) {
getScData();
}
}, 1000);
};
onMounted(() => {
websocketheart()
// stationID.value = "1267633458481725442"
})
onUnmounted(() => {
clearInterval(timer2.value);
})
onHide(() => {
console.log('页面隐藏，清除定时器')
clearInterval(timer2.value);
timer2.value = null;
})
onShow(() => {
// 页面显示时重新启动定时器
websocketheart()
})
const getScData = () => {
uni.request({
url: GyKrByzc.value + '?zhanc=' + stationID.value + '&jldLx=1',
method: 'GET',
success: (res) => {
console.log(res)
jlData.value = JSON.parse(res.data.result).JlData;
}
})
}
// 数字格式化
const formatNumber = (num) => {
let temp = 0;
try {
temp = parseFloat(num);
} catch (error) {
//TODO handle the exception
}
return temp.toFixed(4).replace(/\.?0+$/, '');
};
</script>
<style>
<style lang="scss" 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-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: 10px;
flex: 1;
margin-right: 2px;
width: 80px;
font-weight: 500;
}
.field-labelssll {
color: #0000ff;
text-decoration: underline;
font-size: 10px;
flex: 1;
margin-right: 2px;
width: 80px;
font-weight: 500;
}
.field-value {
color: #1890ff;
font-weight: 500;
font-size: 12px;
text-align: right;
width: 40vw;
overflow: hidden;
text-overflow: ellipsis;
}
.field-dw {
color: #1890ff;
font-weight: 500;
font-size: 12px;
text-align: center;
width: 20vw;
overflow: hidden;
text-overflow: ellipsis;
}
.status-circle {
width: 70rpx;
height: 30rpx;
font-size: 12px;
vertical-align: middle;
}
.page-layout {
display: flex;
flex-direction: column;
height: 100vh;
}
.scroll-container {
flex: 1;
overflow-y: auto;
}
</style>

45
src/pages-production/shishishuju/index.vue
View File

@ -14,18 +14,31 @@
<date-time-show></date-time-show>
</view>
<wd-card title="天然气实时数据">
天然气实时数据汇总计算结果，用标签显示出各类天然气的实时数据，需要工业库后台进行计算
天然气计量实时数据
<template #footer>
<wd-button size="small" @click="gotoTrqSssj" plain>查看详情</wd-button>
</template>
</wd-card>
<wd-card title="管道运行实时数据">
各条管线的天然气实时数据汇总计算结果，用标签显示出各类天然气的实时数据，需要工业库后台进行计算
<wd-card title="工艺参数实时数据">
各站场工艺参数实时数据
<template #footer>
<wd-button size="small" @click="gotoGdSssj" plain>查看详情</wd-button>
<wd-button size="small" @click="gotoGycsSssj" plain>查看详情</wd-button>
</template>
</wd-card>
<wd-card title="可燃气体报警实时数据">
各站场可燃气体报警仪实时数据
<template #footer>
<wd-button size="small" @click="gotoKrqtbjSssj" plain>查看详情</wd-button>
</template>
</wd-card>
<wd-card title="压缩机实时数据">
各站场压缩机运行参数实时数据
<template #footer>
<wd-button size="small" @click="gotoYsjSssj" plain>查看详情</wd-button>
</template>
</wd-card>
</view>
</PageLayout>
</template>
@ -40,6 +53,30 @@
}
function gotoGdSssj() {
uni.navigateTo({
url: '/pages-production/shishishuju/gycsSssj'
})
}
function gotoGycsSssj() {
uni.navigateTo({
url: '/pages-production/shishishuju/gycsSssj'
})
}
function gotoKrqtbjSssj() {
uni.navigateTo({
url: '/pages-production/shishishuju/krqtSssj'
})
}
function gotoYsjSssj() {
uni.navigateTo({
url: '/pages-production/shishishuju/ysjSssj'
})
}
function gotoScSssj() {
uni.navigateTo({
url: '/pages-production/shishishuju/trqSssj'
})

336
src/pages-production/shishishuju/krqtSssj.vue Normal file
View File

@ -0,0 +1,336 @@
<route lang="json5" type="page">
{
layout: 'default',
style: {
navigationStyle: 'custom',
navigationBarTitleText: '可燃气体浓度实时数据',
},
}
</route>
<template>
<PageLayout navTitle="可燃气体浓度实时数据" routeMethod="pushTab">
<!-- 标题行 -->
<wd-text :text="stationName ? stationName: ' '"
style="color: blue;font-size:18px;text-align: center;margin: 5px;"></wd-text>
<wd-cell :title="'时间:' + nowDateTime " center>
<wd-button custom-class="custom-value" size="small" plain clickable
@click="handleStop">{{caijiText}}</wd-button>
<wd-button custom-class="custom-value" size="small" plain clickable
@click="handleRightClick">选择站场</wd-button>
</wd-cell>
<scroll-view direction="vertical" class="scroll-container">
<view class="container">
<view>
<view class="field-item">
<text class="titlejl">安装位置</text>
<text class="field-value">参数数值</text>
<text class="field-dw">运行状态 </text>
</view>
</view>
<view v-for="(item, index) in jlData" :key="index" class="card">
<view>
<view class="field-item">
<text class="titlejl">{{ item.jldname }}:</text>
<text class="field-value">{{ formatNumber(item.krvalue) || '-' }}%</text>
<text class="field-dw">{{ item.krzt }} </text>
</view>
</view>
</view>
</view>
</scroll-view>
<wd-popup v-model="selectZc" position="bottom" custom-style="width:100%;height: 300px;" @close="handleClose">
<view style="font-size: 18px;text-align: center;color: blue;margin: 10px;">选择采输气站场</view>
<cxc-szcx-stationJl-select v-model="stationID" returnCodeOrID="id" @change="onChange">
</cxc-szcx-stationJl-select>
</wd-popup>
<wd-popup v-model="sssjFlag" position="bottom" custom-style="width:100%;height: 70vh;" @close="handleClose">
<sssj-chart :jldData="jldData"></sssj-chart>
</wd-popup>
<wd-popup v-model="lssjFlag" position="bottom" custom-style="width:100%;height: 70vh;" @close="handleClose">
<lssj-chart :jldData="jldData"></lssj-chart>
</wd-popup>
</PageLayout>
</template>
<script setup>
import {
queryJldZcList,
queryJldDataByZc
} from '@/api/production'
import {
ref,
onMounted,
computed,
nextTick,
watchEffect,
onUnmounted,
} from 'vue';
import {
onHide,
onShow
} from '@dcloudio/uni-app'
import {
formatDate
} from '@/utils/dateTime.ts';
import SssjChart from './chart/sssjChart'
import LssjChart from './chart/lssjChart'
const res = wx.getSystemInfoSync();
const statusHeight = res.statusBarHeight; //状态栏高度
const cusnavbarheight = (statusHeight + 30) + "px";
const selectZc = ref(false)
const lssjFlag = ref(false)
const sssjFlag = ref(false)
const nowDateTime = ref("")
const caijiText = ref("停止采集")
const stationList = ref([])
const stationID = ref("")
const stationName = ref(" ")
const jlData = ref([])
const jldData = ref({})
const GyKrByzc = ref('https://szcx.zyyt.sinopec.com/Gyk/sssj/GetGyKrByZc')
function openSssjChart(e) {
sssjFlag.value = true;
console.log(11, e)
jldData.value = e
console.log(selectZc.value)
}
function openlssjChart(e) {
lssjFlag.value = true;
jldData.value = e
console.log(selectZc.value)
}
function handleRightClick() {
selectZc.value = true;
console.log(selectZc.value)
}
function handleClose() {
console.log(selectZc.value)
}
function onChange(e, data) {
console.log(2, e, data.value);
stationID.value = e
stationName.value = data.value.title
getScData(); //获取生产数据
}
function handleStop() {
if (caijiText.value === "停止采集") {
console.log('清除定时器,停止采集')
caijiText.value = "开始采集"
clearInterval(timer2.value);
timer2.value = null;
} else {
console.log('开始采集，打开定时器')
caijiText.value = "停止采集"
websocketheart()
}
}
const websock = ref(null);
const timer2 = ref(null);
// 封装心跳函数
const websocketheart = () => {
// 先清除之前的定时器
if (timer2.value) {
clearInterval(timer2.value);
timer2.value = null;
}
timer2.value = setInterval(() => {
nowDateTime.value = formatDate(new Date(), "YYYY-MM-DD HH:mm:ss")
if (websock.value && websock.value.readyState === 1) {
// 如果连接正常，发送心跳消息
// connectSocketInit()
}
if (stationID.value) {
getScData();
}
}, 1000);
};
onMounted(() => {
websocketheart()
// stationID.value = "1267633458481725442"
})
onUnmounted(() => {
clearInterval(timer2.value);
})
onHide(() => {
console.log('页面隐藏，清除定时器')
clearInterval(timer2.value);
timer2.value = null;
})
onShow(() => {
// 页面显示时重新启动定时器
websocketheart()
})
const getScData = () => {
uni.request({
url: GyKrByzc.value + '?zhanc=' + stationID.value + '&jldLx=2',
method: 'GET',
success: (res) => {
console.log(res)
jlData.value = JSON.parse(res.data.result).JlData;
}
})
}
// 数字格式化
const formatNumber = (num) => {
let temp = 0;
try {
temp = parseFloat(num);
} catch (error) {
//TODO handle the exception
}
return temp.toFixed(8).replace(/\.?0+$/, '');
};
</script>
<style lang="scss" 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-weight: bold;
color: #333;
}
.titlejl {
font-size: 20rpx;
vertical-align: middle;
font-weight: bold;
color: #0055ff;
margin-bottom: 15px;
width: 40vw;
}
.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: 10px;
flex: 1;
margin-right: 2px;
width: 80px;
font-weight: 500;
}
.field-labelssll {
color: #0000ff;
text-decoration: underline;
font-size: 10px;
flex: 1;
margin-right: 2px;
width: 80px;
font-weight: 500;
}
.field-value {
color: #1890ff;
font-weight: 500;
font-size: 12px;
text-align: right;
width: 40vw;
overflow: hidden;
text-overflow: ellipsis;
}
.field-dw {
color: #1890ff;
font-weight: 500;
font-size: 12px;
text-align: center;
width: 20vw;
overflow: hidden;
text-overflow: ellipsis;
}
.status-circle {
width: 70rpx;
height: 30rpx;
font-size: 12px;
vertical-align: middle;
}
.page-layout {
display: flex;
flex-direction: column;
height: 100vh;
}
.scroll-container {
flex: 1;
overflow-y: auto;
}
</style>

463
src/pages-production/shishishuju/ysjSssj.vue
View File

@ -1,8 +1,465 @@
<route lang="json5" type="page">
{
layout: 'default',
style: {
navigationStyle: 'custom',
navigationBarTitleText: '压缩机实时数据',
},
}
</route>
<template>
</template>
<PageLayout navTitle="压缩机实时数据" routeMethod="pushTab">
<!-- 标题行 -->
<wd-text :text="stationName ? stationName: ' '"
style="color: blue;font-size:18px;text-align: center;margin: 5px;"></wd-text>
<wd-cell :title="'时间:' + nowDateTime " center>
<wd-button custom-class="custom-value" size="small" plain clickable
@click="handleStop">{{caijiText}}</wd-button>
<wd-button custom-class="custom-value" size="small" plain clickable
@click="handleRightClick">选择站场</wd-button>
<script>
</wd-cell>
<scroll-view direction="vertical" class="scroll-container">
<view class="container">
<view v-for="(item, index) in jlData" :key="index" class="card">
<view class="field-item">
<text class="titlejl">{{ item.jzname }}</text>
<view class="status-circle"
:style="{ backgroundColor: item.jzzt==='运行' ? '#4CAF50' : '#F44336' }">
{{item.jzzt}}
</view>
</view>
<view class="field-list">
<view v-for="(itempar, indexpar) in item.data" :key="index" class="card">
<view class="field-itemData">
<text class="titlejl">{{itempar.jldname}}</text>
<text class="field-value">{{ formatNumber(itempar.ysvalue) || '' }}</text>
<text class="field-dw">{{ (itempar.jlddw) || '' }}</text>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
<wd-popup v-model="selectZc" position="bottom" custom-style="width:100%;height: 300px;" @close="handleClose">
<view style="font-size: 18px;text-align: center;color: blue;margin: 10px;">选择采输气站场</view>
<cxc-szcx-stationJl-select v-model="stationID" returnCodeOrID="id" @change="onChange">
</cxc-szcx-stationJl-select>
</wd-popup>
<wd-popup v-model="sssjFlag" position="bottom" custom-style="width:100%;height: 70vh;" @close="handleClose">
<sssj-chart :jldData="jldData"></sssj-chart>
</wd-popup>
<wd-popup v-model="lssjFlag" position="bottom" custom-style="width:100%;height: 70vh;" @close="handleClose">
<lssj-chart :jldData="jldData"></lssj-chart>
</wd-popup>
</PageLayout>
</template>
<script setup>
import {
queryJldZcList,
queryJldDataByZc
} from '@/api/production'
import {
ref,
onMounted,
computed,
nextTick,
watchEffect,
onUnmounted,
} from 'vue';
import {
onHide,
onShow
} from '@dcloudio/uni-app'
import {
formatDate
} from '@/utils/dateTime.ts';
import SssjChart from './chart/sssjChart'
import LssjChart from './chart/lssjChart'
const res = wx.getSystemInfoSync();
const statusHeight = res.statusBarHeight; //状态栏高度
const cusnavbarheight = (statusHeight + 30) + "px";
const selectZc = ref(false)
const lssjFlag = ref(false)
const sssjFlag = ref(false)
const nowDateTime = ref("")
const caijiText = ref("停止采集")
const stationList = ref([])
const stationID = ref("")
const stationName = ref(" ")
const jlData = ref([])
const jldData = ref({})
const sssjUrl = ref('wss://szcx.zyyt.sinopec.com/Gyk/websocket/')
const ysByzc = ref('https://szcx.zyyt.sinopec.com/Gyk/sssj/GetYsByZc')
function openSssjChart(e) {
sssjFlag.value = true;
console.log(11, e)
jldData.value = e
console.log(selectZc.value)
}
function openlssjChart(e) {
lssjFlag.value = true;
jldData.value = e
console.log(selectZc.value)
}
function handleRightClick() {
selectZc.value = true;
console.log(selectZc.value)
}
function handleClose() {
console.log(selectZc.value)
}
function onChange(e, data) {
console.log(2, e, data.value);
stationID.value = e
stationName.value = data.value.title
getScData(); //获取生产数据
}
function handleStop() {
if (caijiText.value === "停止采集") {
console.log('清除定时器,停止采集')
caijiText.value = "开始采集"
clearInterval(timer2.value);
timer2.value = null;
} else {
console.log('开始采集，打开定时器')
caijiText.value = "停止采集"
websocketheart()
}
}
const websock = ref(null);
const timer2 = ref(null);
// 封装心跳函数
const websocketheart = () => {
// 先清除之前的定时器
if (timer2.value) {
clearInterval(timer2.value);
timer2.value = null;
}
timer2.value = setInterval(() => {
nowDateTime.value = formatDate(new Date(), "YYYY-MM-DD HH:mm:ss")
if (websock.value && websock.value.readyState === 1) {
// 如果连接正常，发送心跳消息
// connectSocketInit()
}
if (stationID.value) {
getScData();
}
}, 1000);
};
onMounted(() => {
websocketheart()
// stationID.value = "1267633458481725442"
})
onUnmounted(() => {
clearInterval(timer2.value);
})
onHide(() => {
console.log('页面隐藏，清除定时器')
clearInterval(timer2.value);
timer2.value = null;
})
onShow(() => {
// 页面显示时重新启动定时器
websocketheart()
})
const getScData = () => {
uni.request({
url: ysByzc.value + '?zhanc=' + stationID.value,
method: 'GET',
success: (res) => {
console.log(1111, res)
jlData.value = processCompressorData(res.data.result);
console.log(jlData.value)
}
})
}
/**
* 完整的数据分类和整理方法
* @param {Array} data - 原始数据数组
* @param {Array} fields - 需要保留的字段数组
* @returns {Array} 分组整理后的数据
*/
function processCompressorData(data, fields = ['id', 'station_id', 'depart_id', 'zhan', 'gykbz', 'jlddw', 'ysvalue']) {
// 数据验证
if (!Array.isArray(data)) {
console.error('数据必须是数组');
return [];
}
if (!Array.isArray(fields)) {
console.error('字段列表必须是数组');
return [];
}
const groupMap = new Map();
const validFields = new Set(fields);
// 添加必要的字段
validFields.add('jldname');
// 处理每个数据项
data.forEach((item, index) => {
try {
// 跳过无效数据
if (!item || typeof item !== 'object') {
console.warn(`跳过无效数据项 ${index}`);
return;
}
// 解析机组名称和参数名称
if (!item.jldname || typeof item.jldname !== 'string') {
console.warn(`跳过无jldname的数据项 ${index}`);
return;
}
const jldnameParts = item.jldname.split('*');
if (jldnameParts.length < 3) {
console.warn(`无效的jldname格式: ${item.jldname}`);
return;
}
const jzname = jldnameParts[1].trim();
const paramName = jldnameParts[2].trim();
if (!jzname) {
console.warn(`无法解析机组名称: ${item.jldname}`);
return;
}
// 初始化或获取机组分组
if (!groupMap.has(jzname)) {
groupMap.set(jzname, {
jzname: jzname,
jzzt: '停止', // 默认状态
data: []
});
}
const group = groupMap.get(jzname);
// 检查发动机转速以确定机组状态
if (paramName.includes('发动机转速')) {
const speed = parseFloat(item.ysvalue) || 0;
if (speed > 0) {
group.jzzt = '运行';
} else {
group.jzzt = '停运';
}
}
// 创建精简的参数数据
const paramData = {};
validFields.forEach(field => {
if (item.hasOwnProperty(field)) {
// 特殊处理：参数名称使用解析后的名称
if (field === 'jldname') {
paramData[field] = paramName;
} else {
paramData[field] = item[field];
}
}
});
// 添加到机组数据
group.data.push(paramData);
} catch (error) {
console.error(`处理数据项 ${index} 时出错:`, error);
}
});
// 转换为数组
const result = Array.from(groupMap.values());
// 按机组名称排序
result.sort((a, b) => a.jzname.localeCompare(b.jzname));
// 对每个机组的数据按参数名称排序
result.forEach(group => {
group.data.sort((a, b) => a.jldname.localeCompare(b.jldname));
});
return result;
}
// 数字格式化
const formatNumber = (num) => {
let temp = 0;
try {
temp = parseFloat(num);
} catch (error) {
//TODO handle the exception
}
return temp.toFixed(4).replace(/\.?0+$/, '');
};
</script>
<style>
<style lang="scss" 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-weight: bold;
color: #333;
}
.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: 10px;
flex: 1;
margin-right: 2px;
width: 80px;
font-weight: 500;
}
.field-labelssll {
color: #0000ff;
text-decoration: underline;
font-size: 10px;
flex: 1;
margin-right: 2px;
width: 80px;
font-weight: 500;
}
.field-itemData {
display: flex;
width: 40vw;
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;
/* 包含内边距和边框 */
}
.field-title {
font-size: 20rpx;
vertical-align: middle;
font-weight: bold;
color: #0055ff;
margin-bottom: 15px;
width: 40%;
}
.field-value {
color: #1890ff;
font-weight: 500;
font-size: 12px;
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
width: 30%;
}
.field-dw {
color: #1890ff;
font-weight: 500;
font-size: 12px;
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
width: 20%;
}
.status-circle {
width: 70rpx;
height: 30rpx;
font-size: 12px;
vertical-align: middle;
}
.page-layout {
display: flex;
flex-direction: column;
height: 100vh;
}
.scroll-container {
flex: 1;
overflow-y: auto;
}
</style>

23
src/pages.json
View File

@ -643,7 +643,12 @@
},
{
"path": "shishishuju/gycsSssj",
"type": "page"
"type": "page",
"layout": "default",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "站场工艺参数实时数据"
}
},
{
"path": "shishishuju/index",
@ -654,6 +659,15 @@
"navigationBarTitleText": "实时数据 "
}
},
{
"path": "shishishuju/krqtSssj",
"type": "page",
"layout": "default",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "可燃气体浓度实时数据"
}
},
{
"path": "shishishuju/nyxhSssj",
"type": "page"
@ -669,7 +683,12 @@
},
{
"path": "shishishuju/ysjSssj",
"type": "page"
"type": "page",
"layout": "default",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "压缩机实时数据"
}
},
{
"path": "shishishuju/chart/lssjChart",

1
src/types/uni-pages.d.ts vendored
View File

@ -79,6 +79,7 @@ interface NavigateToOptions {
"/pages-production/shishishuju/aqbjSssj" |
"/pages-production/shishishuju/gycsSssj" |
"/pages-production/shishishuju/index" |
"/pages-production/shishishuju/krqtSssj" |
"/pages-production/shishishuju/nyxhSssj" |
"/pages-production/shishishuju/trqSssj" |
"/pages-production/shishishuju/ysjSssj" |