From 8971e33a507083b9f2306f1f95a16315e9fe916d Mon Sep 17 00:00:00 2001
From: zhujiyan <17812234322@163.com>
Date: Sat, 12 Oct 2024 11:40:07 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E6=97=B6=E6=95=B0=E6=8D=AE-=E9=A1=B5?=
=?UTF-8?q?=E9=9D=A2=E8=B0=83=E6=95=B4&=E6=8E=A5=E5=8F=A3=E8=B0=83?=
=?UTF-8?q?=E8=AF=95&=E6=95=B0=E6=8D=AE=E8=AE=A1=E7=AE=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/api/cs-device-boot/EquipmentDelivery.ts | 18 +-
src/views/govern/device/control/index.vue | 231 +++++++++++--
.../govern/device/control/tabs/realtime.vue | 305 ++++++++++++------
3 files changed, 430 insertions(+), 124 deletions(-)
diff --git a/src/api/cs-device-boot/EquipmentDelivery.ts b/src/api/cs-device-boot/EquipmentDelivery.ts
index 481a767..64911d5 100644
--- a/src/api/cs-device-boot/EquipmentDelivery.ts
+++ b/src/api/cs-device-boot/EquipmentDelivery.ts
@@ -1,7 +1,7 @@
import createAxios from '@/utils/request'
// 装置基础数据和模板数据
-export function getDeviceData(deviceId: string, type: string, lineId:string) {
+export function getDeviceData(deviceId: string, type: string, lineId: string) {
let form = new FormData()
form.append('deviceId', deviceId)
form.append('lineId', lineId)
@@ -25,6 +25,22 @@ export function getTabsDataByType(data: any) {
})
}
+/**** 获取基础实施数据 ****/
+export function getBasicRealData(id: any) {
+ return createAxios({
+ url: `/cs-harmonic-boot/realData/getBaseRealData?lineId=${id}`,
+ method: 'POST'
+ })
+}
+
+/**** 获取谐波实时数据 ****/
+export function getHarmRealData(target: any) {
+ return createAxios({
+ url: `/cs-harmonic-boot/realData/getHarmRealData?lineId=${id}&target=${target}`,
+ method: 'POST'
+ })
+}
+
//获取实时数据列表数据
export function getRealTimeTableList() {
return createAxios({
diff --git a/src/views/govern/device/control/index.vue b/src/views/govern/device/control/index.vue
index f39fe44..2101992 100644
--- a/src/views/govern/device/control/index.vue
+++ b/src/views/govern/device/control/index.vue
@@ -110,6 +110,12 @@
查询
+
+ 实时趋势
+
+
+ 谐波频谱
+
-->
- 返回
+ 返回
@@ -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({})
+
+ //每隔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)
+})