添加井口压力

This commit is contained in:
liaodeyun 2025-10-17 18:20:57 +08:00
parent 2d0c4ff808
commit a7a41c3715
6 changed files with 420 additions and 10 deletions

View File

@ -12,7 +12,8 @@
<wd-col-picker label="选择目录" v-model="selectedValue" :columns="dataSource" :column-change="columnChange"
@confirm="handleConfirm" :display-format="displayFormat"></wd-col-picker>
<iframe id="bdIframe" :src="fileUrl" ref="bdIframe" style="border: none;" class="iframe" v-if="fileUrl" />
<view v-if="fileUrl2" class="bdIframe" @click="onlinePreview(item.path)" v-for="(item, i) in fileUrl2" style="padding: 15px 0 0 0">
<view v-if="fileUrl2" class="bdIframe" @click="onlinePreview(item.path)" v-for="(item, i) in fileUrl2"
style="padding: 15px 0 0 0">
<wd-card :title="item.name"></wd-card>
</view>
<view v-else style="padding: 20px;">
@ -76,10 +77,12 @@
let insFlag = res.result.insFlag
if (url) {
if (isH5()) {
fileUrl.value = 'https://szcx.zyyt.sinopec.com/preview/onlinePreview?url=' + encodeURIComponent(
fileUrl.value = 'https://szcx.zyyt.sinopec.com/preview/onlinePreview?url=' +
encodeURIComponent(
Base64.encode(baseUrl + url))
} else {
fileUrl.value = 'https://szcx.zyyt.sinopec.com/preview/onlinePreview?url=' + encodeURIComponent(
fileUrl.value = 'https://szcx.zyyt.sinopec.com/preview/onlinePreview?url=' +
encodeURIComponent(
new base64().encode(baseUrl + url))
}
} else if (/^-?\d+$/.test(quote) && !insFlag) {

View File

@ -26,6 +26,12 @@
<wd-button size="small" @click="gotoGycsSssj" plain>查看详情</wd-button>
</template>
</wd-card>
<wd-card title="井口压力实时数据">
井口压力实时数据
<template #footer>
<wd-button size="small" @click="gotoJkYlSssj" plain>查看详情</wd-button>
</template>
</wd-card>
<wd-card title="可燃气体报警实时数据">
各站场可燃气体报警仪实时数据
<template #footer>
@ -64,6 +70,12 @@
})
}
function gotoJkYlSssj() {
uni.navigateTo({
url: '/pages-production/shishishuju/jkYtYali'
})
}
function gotoKrqtbjSssj() {
uni.navigateTo({
url: '/pages-production/shishishuju/krqtSssj'

View File

@ -0,0 +1,385 @@
<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 v-for="(item, index) in jlData" :key="index" class="card">
<view class="field-item">
<text class="titlejl">{{ item.jh }}{{item.jldn}}</text>
<!-- <view class="status-circle"
:style="{ backgroundColor: item.yxzt==='运行' ? '#4CAF50' : '#F44336' }">
{{item.yxzt}}
</view> -->
</view>
<view class="field-list" v-if="item.jldn==null">
<!-- 压力 -->
<view class="field-item">
<text class="field-labelssll" @click="openSssjChart(item)">油压(MPa)</text>
<text class=" field-value">{{ formatNumber(item.yyyl) || '-' }}</text>
</view>
<!-- 电量 -->
<view class="field-item">
<text class="field-label">电量(%)</text>
<text class="field-value">{{ formatNumber(item.yydl) || '-' }}</text>
</view>
<!-- 电压 -->
<view class="field-item">
<text class="field-label">电压(V)</text>
<text class="field-value">{{ formatNumber(item.yydy) || '-' }}</text>
</view>
<!-- 信号强度 -->
<view class="field-item">
<text class="field-label">信号强度(dB)</text>
<text class="field-value">{{ formatNumber(item.yyqd) || '-' }}</text>
</view>
<view class="field-item">
<text class="field-labelssll" @click="openSssjChart(item)">套压(MPa)</text>
<text class=" field-value">{{ formatNumber(item.ytyl) || '-' }}</text>
</view>
<!-- 电量 -->
<view class="field-item">
<text class="field-label">电量(%)</text>
<text class="field-value">{{ formatNumber(item.ytdl) || '-' }}</text>
</view>
<!-- 电压 -->
<view class="field-item">
<text class="field-label">电压(V)</text>
<text class="field-value">{{ formatNumber(item.ytdy) || '-' }}</text>
</view>
<!-- 信号强度 -->
<view class="field-item">
<text class="field-label">信号强度(dB)</text>
<text class="field-value">{{ formatNumber(item.ytqd) || '-' }}</text>
</view>
</view>
<view class="field-list" v-if="item.jldn">
<view class="field-item">
<text class="field-labelssll" @click="openSssjChart(item)">压力(MPa)</text>
<text class=" field-value">{{ formatNumber(item.jtyl) || '-' }}</text>
</view>
<!-- 电量 -->
<view class="field-item">
<text class="field-label">电量(%)</text>
<text class="field-value">{{ formatNumber(item.jtdl) || '-' }}</text>
</view>
<!-- 电压 -->
<view class="field-item">
<text class="field-label">电压(V)</text>
<text class="field-value">{{ formatNumber(item.jtdy) || '-' }}</text>
</view>
<!-- 信号强度 -->
<view class="field-item">
<text class="field-label">信号强度(dB)</text>
<text class="field-value">{{ formatNumber(item.jtqd) || '-' }}</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 sssjUrl = ref('wss://szcx.zyyt.sinopec.com/Gyk/websocket/')
const jlByzc = ref('https://szcx.zyyt.sinopec.com/ThingsBoard/tingsboard/list')
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()
}
getScData();
}, 1000);
};
onMounted(() => {
websocketheart()
// stationID.value = "1267633458481725442"
})
onUnmounted(() => {
clearInterval(timer2.value);
})
onHide(() => {
console.log('页面隐藏,清除定时器')
clearInterval(timer2.value);
timer2.value = null;
})
onShow(() => {
//
websocketheart()
})
const getScData = () => {
// console.log(jldData.value)
uni.request({
url: jlByzc.value + '?zhanc=' + stationID.value + '&jldLx=0',
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 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: 60px;
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>

View File

@ -677,6 +677,15 @@
"navigationBarTitleText": "实时数据 "
}
},
{
"path": "shishishuju/jkYtYali",
"type": "page",
"layout": "default",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "井口油套压实时数据"
}
},
{
"path": "shishishuju/krqtSssj",
"type": "page",

View File

@ -137,12 +137,12 @@
})
} else {
/*开发环境 */
// params.captcha = 'app';
params.captcha = 'app';
/*生产环境 */
params = {
username: Base64.encode(encodeURIComponent(userName.value)),
password: Base64.encode(encodeURIComponent(password.value)),
};
// params = {
// username: Base64.encode(encodeURIComponent(userName.value)),
// password: Base64.encode(encodeURIComponent(password.value)),
// };
}
login(params)
}

View File

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