添加井口压力
This commit is contained in:
parent
2d0c4ff808
commit
a7a41c3715
@ -12,7 +12,8 @@
|
|||||||
<wd-col-picker label="选择目录" v-model="selectedValue" :columns="dataSource" :column-change="columnChange"
|
<wd-col-picker label="选择目录" v-model="selectedValue" :columns="dataSource" :column-change="columnChange"
|
||||||
@confirm="handleConfirm" :display-format="displayFormat"></wd-col-picker>
|
@confirm="handleConfirm" :display-format="displayFormat"></wd-col-picker>
|
||||||
<iframe id="bdIframe" :src="fileUrl" ref="bdIframe" style="border: none;" class="iframe" v-if="fileUrl" />
|
<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>
|
<wd-card :title="item.name"></wd-card>
|
||||||
</view>
|
</view>
|
||||||
<view v-else style="padding: 20px;">
|
<view v-else style="padding: 20px;">
|
||||||
@ -76,10 +77,12 @@
|
|||||||
let insFlag = res.result.insFlag
|
let insFlag = res.result.insFlag
|
||||||
if (url) {
|
if (url) {
|
||||||
if (isH5()) {
|
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))
|
Base64.encode(baseUrl + url))
|
||||||
} else {
|
} 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))
|
new base64().encode(baseUrl + url))
|
||||||
}
|
}
|
||||||
} else if (/^-?\d+$/.test(quote) && !insFlag) {
|
} else if (/^-?\d+$/.test(quote) && !insFlag) {
|
||||||
|
|||||||
@ -26,6 +26,12 @@
|
|||||||
<wd-button size="small" @click="gotoGycsSssj" plain>查看详情</wd-button>
|
<wd-button size="small" @click="gotoGycsSssj" plain>查看详情</wd-button>
|
||||||
</template>
|
</template>
|
||||||
</wd-card>
|
</wd-card>
|
||||||
|
<wd-card title="井口压力实时数据">
|
||||||
|
井口压力实时数据
|
||||||
|
<template #footer>
|
||||||
|
<wd-button size="small" @click="gotoJkYlSssj" plain>查看详情</wd-button>
|
||||||
|
</template>
|
||||||
|
</wd-card>
|
||||||
<wd-card title="可燃气体报警实时数据">
|
<wd-card title="可燃气体报警实时数据">
|
||||||
各站场可燃气体报警仪实时数据
|
各站场可燃气体报警仪实时数据
|
||||||
<template #footer>
|
<template #footer>
|
||||||
@ -64,6 +70,12 @@
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function gotoJkYlSssj() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages-production/shishishuju/jkYtYali'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
function gotoKrqtbjSssj() {
|
function gotoKrqtbjSssj() {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages-production/shishishuju/krqtSssj'
|
url: '/pages-production/shishishuju/krqtSssj'
|
||||||
|
|||||||
385
src/pages-production/shishishuju/jkYtYali.vue
Normal file
385
src/pages-production/shishishuju/jkYtYali.vue
Normal 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>
|
||||||
@ -677,6 +677,15 @@
|
|||||||
"navigationBarTitleText": "实时数据 "
|
"navigationBarTitleText": "实时数据 "
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "shishishuju/jkYtYali",
|
||||||
|
"type": "page",
|
||||||
|
"layout": "default",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTitleText": "井口油套压实时数据"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "shishishuju/krqtSssj",
|
"path": "shishishuju/krqtSssj",
|
||||||
"type": "page",
|
"type": "page",
|
||||||
|
|||||||
@ -137,12 +137,12 @@
|
|||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
/*开发环境 */
|
/*开发环境 */
|
||||||
// params.captcha = 'app';
|
params.captcha = 'app';
|
||||||
/*生产环境 */
|
/*生产环境 */
|
||||||
params = {
|
// params = {
|
||||||
username: Base64.encode(encodeURIComponent(userName.value)),
|
// username: Base64.encode(encodeURIComponent(userName.value)),
|
||||||
password: Base64.encode(encodeURIComponent(password.value)),
|
// password: Base64.encode(encodeURIComponent(password.value)),
|
||||||
};
|
// };
|
||||||
}
|
}
|
||||||
login(params)
|
login(params)
|
||||||
}
|
}
|
||||||
|
|||||||
1
src/types/uni-pages.d.ts
vendored
1
src/types/uni-pages.d.ts
vendored
@ -81,6 +81,7 @@ interface NavigateToOptions {
|
|||||||
"/pages-production/shishishuju/aqbjSssj" |
|
"/pages-production/shishishuju/aqbjSssj" |
|
||||||
"/pages-production/shishishuju/gycsSssj" |
|
"/pages-production/shishishuju/gycsSssj" |
|
||||||
"/pages-production/shishishuju/index" |
|
"/pages-production/shishishuju/index" |
|
||||||
|
"/pages-production/shishishuju/jkYtYali" |
|
||||||
"/pages-production/shishishuju/krqtSssj" |
|
"/pages-production/shishishuju/krqtSssj" |
|
||||||
"/pages-production/shishishuju/nyxhSssj" |
|
"/pages-production/shishishuju/nyxhSssj" |
|
||||||
"/pages-production/shishishuju/trqSssj" |
|
"/pages-production/shishishuju/trqSssj" |
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user