Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

实时数据-页面调整&接口调试&数据计算

Browse Source
This commit is contained in:
zhujiyan
2024-10-12 11:40:07 +08:00
parent 328837eb31
commit 8971e33a50
3 changed files with 430 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
src/views/govern/device/control/index.vue
View File

@@ -110,6 +110,12 @@
</el-select>
</el-form-item>
<el-button type="primary" icon="el-icon-Search" @click="handleClick">查询</el-button>
<el-button type="primary" v-if="realTimeFlag" :icon="DataLine" @click="handleHarmonicSpectrum">
实时趋势
</el-button>
<el-button type="primary" v-if="realTimeFlag" :icon="TrendCharts" @click="handleTrend">
谐波频谱
</el-button>
</el-form>
<div
style="height: calc(100vh - 300px)"
@@ -242,15 +248,15 @@
v-if="dataSet.indexOf('_realtimedata') != -1"
v-loading="tableLoading"
>
<div class="view_top_btn" v-if="realTimeFlag">
<!-- <el-button type="primary" :icon="Platform" @click="handleRecordWaves">
<!-- <div class="view_top_btn" v-if="realTimeFlag">
<el-button type="primary" :icon="Platform" @click="handleRecordWaves">
实时录波
</el-button> -->
</el-button>
<el-button type="primary" :icon="DataLine" @click="handleHarmonicSpectrum">实时趋势</el-button>
<el-button type="primary" :icon="TrendCharts" @click="handleTrend">谐波频谱</el-button>
</div>
</div> -->
<div class="view_top_btn" v-if="!realTimeFlag">
<el-button type="primary" :icon="ArrowLeft" @click="handleReturn">返回</el-button>
<el-button :icon="Back" @click="handleReturn">返回</el-button>
</div>
<!-- 实时数据主界面组件 -->
<realTime v-if="realTimeFlag" ref="realTimeRef"></realTime>
@@ -288,9 +294,9 @@ import Detail from './detail.vue'
import PointTree from '@/components/tree/govern/pointTree.vue'
import { mainHeight } from '@/utils/layout'
import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
import { getDeviceData, getTabsDataByType } from '@/api/cs-device-boot/EquipmentDelivery'
import { getDeviceData, getTabsDataByType, getBasicRealData } from '@/api/cs-device-boot/EquipmentDelivery'
import { deviceHisData, deviceRtData, getGroup } from '@/api/cs-device-boot/csGroup'
import { ref, reactive, nextTick, onMounted, watch } from 'vue'
import { ref, reactive, nextTick, onMounted, watch, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import DatePicker from '@/components/form/datePicker/index.vue'
import Trend from './tabs/trend.vue' //趋势数据
@@ -301,6 +307,7 @@ import recordWoves from './tabs/components/recordwoves.vue' //实时数据-实
import offLineDataImport from './offLineDataImport/index.vue'
import Event from './tabs/event.vue'
import { useRouter } from 'vue-router'
import TableHeader from '@/components/table/header/index.vue'
import { defineConfig, loadEnv } from 'vite'
import type { UserConfig, ConfigEnv } from 'vite'
import {
@@ -312,9 +319,11 @@ import {
DataAnalysis,
Odometer,
Monitor,
Timer
Timer,
Back
} from '@element-plus/icons-vue'
import analysisList from './analysisList/index.vue'
import mqtt from 'mqtt'
defineOptions({
name: 'govern/device/control'
})
@@ -472,23 +481,42 @@ const pointTypeChange = (val: any, obj: any) => {
nodeClick(obj)
}
const realTimeRef: any = ref()
const intRealTime = async (val: any) => {
await getTabsDataByType(val).then(res => {
realTimeRef.value && realTimeRef.value.getRealTimeData(res.data)
})
timer.value = window.setInterval(async () => {
await getTabsDataByType(val).then(res => {
realTimeRef.value && realTimeRef.value.getRealTimeData(res.data)
})
}, 5000)
}
//趋势数据组件
const trendRef: any = ref()
//暂态事件组件
const eventRef: any = ref()
const timer: any = ref()
const mqttRef = ref()
const connectMqtt = () => {
if (mqttRef.value) {
if (mqttRef.value.connected) {
return
}
}
const options: any = {
protocolId: 'MQTT',
qos: 2,
clean: true,
connectTimeout: 30 * 1000,
clientId: 'mqttjs' + Math.random(),
username: 't_user',
password: 'njcnpqs'
}
// 线上
// const url = 'wss://pqmcn.com:8087/mqtt'
const url = 'ws://192.168.1.24:8085/mqtt'
mqttRef.value = mqtt.connect(url, options)
}
//tab点击事件
const realDataTimer: any = ref()
const handleClick = async (tab?: any) => {
if (realDataTimer.value) {
window.clearInterval(realDataTimer.value)
}
tableLoading.value = true
//点击tab时更新dataSet最新值
if (tab && tab.props && tab.props.name && dataSet.value != tab.props.name) {
@@ -548,6 +576,7 @@ const handleClick = async (tab?: any) => {
}
//查询实时数据
if (dataSet.value.includes('_realtimedata')) {
console.log(66666)
//查询实时数据显示实时录波、实时趋势、谐波频谱
realTimeFlag.value = true
let obj = {
@@ -556,10 +585,163 @@ const handleClick = async (tab?: any) => {
devId: deviceId.value, //e.id
lineId: lineId.value //e.pid
}
intRealTime(obj)
setTimeout(() => {
tableLoading.value = false
}, 1500)
//新的实时数据
//1.调用接口
getBasicRealData(lineId.value).then((res: any) => {
console.log(res, '获取基础实时数据')
})
//2.建立mqtt通讯
const mqttMessage = ref<any>({})
//每隔30s调用一下接口，通知后台推送mqtt消息
realDataTimer.value = setInterval(() => {
getBasicRealData(lineId.value).then((res: any) => {
console.log(res, '获取基础实时数据')
})
}, 30000)
connectMqtt()
mqttRef.value.on('connect', (e: any) => {
// ElMessage.success('连接mqtt服务器成功!')
console.log('mqtt客户端已连接....')
// mqttRef.value.subscribe('/Web/Progress')
mqttRef.value.subscribe('/Web/RealData/+')
//假数据
})
mqttRef.value.on('message', (topic: any, message: any) => {
// console.log('mqtt接收到消息', message,topic)
console.log('mqtt接收到消息', JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))))
let obj = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
console.log(obj, '620=================>')
//处理mqtt数据 1转2除 2转1乘
//如果消息返回值是二次值，下拉框是二次值只需要单位换算 除以1000
//如果消息返回值是一次值，下拉框是一次值只需要单位换算 除以1000
if (obj.dataLevel == formInline.dataLevel) {
obj = {
...obj,
// 电压有效值
vRmsA: obj.vRmsA / 1000,
vRmsB: obj.vRmsB / 1000,
vRmsC: obj.vRmsC / 1000,
//基波电压幅值
v1A: obj.v1A / 1000,
v1B: obj.v1B / 1000,
v1C: obj.v1C / 1000,
//有功功率
pA: obj.pA / 1000,
pB: obj.pB / 1000,
pC: obj.pC / 1000,
pTot: obj.pTot / 1000,
//无功功率
qA: obj.qA / 1000,
qB: obj.qB / 1000,
qC: obj.qC / 1000,
qTot: obj.qTot / 1000,
//视在功率
sA: obj.sA / 1000,
sB: obj.sB / 1000,
sC: obj.sC / 1000,
sTot: obj.sTot / 1000
}
}
//如果消息返回值是二次值，下拉框是一次值需要单位换算 除以1000 并且乘以pt ct
if (obj.dataLevel == 'Secondary' && formInline.dataLevel == 'Primary') {
obj = {
...obj,
// 电压有效值
vRmsA: (obj.vRmsA * obj.pt) / 1000,
vRmsB: (obj.vRmsA * obj.pt) / 1000,
vRmsC: (obj.vRmsA * obj.pt) / 1000,
// 电流有效值
iRmsA: obj.iRmsA * obj.ct,
iRmsB: obj.iRmsA * obj.ct,
iRmsC: obj.iRmsA * obj.ct,
//基波电压幅值
v1A: (obj.v1A * obj.pt) / 1000,
v1B: (obj.v1B * obj.pt) / 1000,
v1C: (obj.v1C * obj.pt) / 1000,
//基波电流幅值
i1A: obj.i1A * obj.ct,
i1B: obj.i1B * obj.ct,
i1C: obj.i1C * obj.ct,
//有功功率
pA: (obj.pA * obj.pt * obj.ct) / 1000,
pB: (obj.pB * obj.pt * obj.ct) / 1000,
pC: (obj.pC * obj.pt * obj.ct) / 1000,
pTot: (obj.pTot * obj.pt * obj.ct) / 1000,
//无功功率
qA: (obj.qA * obj.pt * obj.ct) / 1000,
qB: (obj.qB * obj.pt * obj.ct) / 1000,
qC: (obj.qC * obj.pt * obj.ct) / 1000,
qTot: (obj.qTot * obj.pt * obj.ct) / 1000,
//视在功率
sA: (obj.sA * obj.pt * obj.ct) / 1000,
sB: (obj.sB * obj.pt * obj.ct) / 1000,
sC: (obj.sC * obj.pt * obj.ct) / 1000,
sTot: (obj.sTot * obj.pt * obj.ct) / 1000
}
}
//如果消息返回值是一次值，下拉框是二次值需要单位换算 乘以1000 并且除以pt ct
if (obj.dataLevel == 'Primary' && formInline.dataLevel == 'Secondary') {
console.log(6666)
obj = {
...obj,
// 电压有效值
vRmsA: (obj.vRmsA / obj.pt) * 1000,
vRmsB: (obj.vRmsA / obj.pt) * 1000,
vRmsC: (obj.vRmsA / obj.pt) * 1000,
// 电流有效值
iRmsA: obj.iRmsA / obj.ct,
iRmsB: obj.iRmsA / obj.ct,
iRmsC: obj.iRmsA / obj.ct,
//基波电压幅值
v1A: (obj.v1A / obj.pt) * 1000,
v1B: (obj.v1B / obj.pt) * 1000,
v1C: (obj.v1C / obj.pt) * 1000,
//基波电流幅值
i1A: obj.i1A / obj.ct,
i1B: obj.i1B / obj.ct,
i1C: obj.i1C / obj.ct,
//有功功率
pA: (obj.pA / obj.pt / obj.ct) * 1000,
pB: (obj.pB / obj.pt / obj.ct) * 1000,
pC: (obj.pC / obj.pt / obj.ct) * 1000,
pTot: (obj.pTot / obj.pt / obj.ct) * 1000,
//无功功率
qA: (obj.qA / obj.pt / obj.ct) * 1000,
qB: (obj.qB / obj.pt / obj.ct) * 1000,
qC: (obj.qC / obj.pt / obj.ct) * 1000,
qTot: (obj.qTot / obj.pt / obj.ct) * 1000,
//视在功率
sA: (obj.sA / obj.pt / obj.ct) * 1000,
sB: (obj.sB / obj.pt / obj.ct) * 1000,
sC: (obj.sC / obj.pt / obj.ct) * 1000,
sTot: (obj.sTot / obj.pt / obj.ct) * 1000
}
}
//保留两位小数
for (var i in obj) {
if (typeof obj[i] == 'number' && obj[i] != 0) {
obj[i] = obj[i].toFixed(2)
}
}
mqttMessage.value = obj
realTimeRef.value && realTimeRef.value.setRealData(mqttMessage.value)
})
mqttRef.value.on('error', (error: any) => {
console.log('mqtt连接失败...', error)
mqttRef.value.end()
})
mqttRef.value.on('close', function () {
console.log('mqtt客户端已断开连接.....')
})
}
//查询暂态事件
if (dataSet.value.includes('_event')) {
@@ -598,6 +780,13 @@ const handleClick = async (tab?: any) => {
}, 1500)
})
}
if (!dataSet.value.includes('_realtimedata')) {
clearInterval(timer.value)
clearInterval(realDataTimer.value)
if (mqttRef.value) {
mqttRef.value.end()
}
}
}
//模版下载
const handleDownLoadTemplate = () => {}
@@ -663,6 +852,10 @@ const openGroup = () => {
}
onMounted(() => {})
onUnmounted(() => {
clearInterval(timer.value)
clearInterval(realDataTimer.value)
})
</script>
<style lang="scss">