|
|
@@ -2,16 +2,18 @@
|
|
|
<div class="realtimeData-content">
|
|
|
|
|
|
<div v-loading="loading" class="mec-content">
|
|
|
- <div class="mec-item" v-for="(item, index) in deviceStateData" :key="index">
|
|
|
+ <div class="mec-item" v-for="(item, index) in varDictMecGroupData" :key="index">
|
|
|
<div class="mec-title">
|
|
|
- {{ item.GroupName }}
|
|
|
+ {{ (item.MecType
|
|
|
+ ? (dictStore.getDictLabel("mec_type", item.MecType) as any)
|
|
|
+ : undefined
|
|
|
+ )?.dict_label || detailFormData.MecType }}
|
|
|
</div>
|
|
|
<div class="mec-content-item">
|
|
|
<div class="number-type-content" v-for="(temp, index1) in item.numberTypeList" :key="index1">
|
|
|
<span>{{ temp.VarName }}</span>
|
|
|
<div>
|
|
|
<span style="font-size: 22px;">{{ temp.Value }}</span>
|
|
|
- <span style="font-size: 22px;">{{ temp.UnitValue }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="margin-top: 30px;">
|
|
|
@@ -26,20 +28,27 @@
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
-<script setup>
|
|
|
+<script setup lang="ts">
|
|
|
import BizVarDictAPI, { } from '@/api/module_business/vardict'
|
|
|
import { useRoute } from 'vue-router'
|
|
|
+import { useDictStore } from "@/store";
|
|
|
+import mqtt, { MqttClient } from 'mqtt';
|
|
|
//import MqttService from '@/utils/mqttService';
|
|
|
//import { getCraneMecTree } from '@/api/crane';
|
|
|
//import { mecDataFormat, gearCalculation } from '@/utils/hooks'
|
|
|
|
|
|
const route = useRoute()
|
|
|
-const deviceStateData = ref([])
|
|
|
+const receiveData = inject<(data: { craneName: string; isShowHomeButton: boolean }) => void>('receiveData');
|
|
|
+const craneInfo = JSON.parse(localStorage.getItem('craneInfo') || '{}')
|
|
|
+const varDictMecGroupData = ref([])
|
|
|
const loading = ref(true);
|
|
|
+const MQTT_WS_URL = import.meta.env.VITE_APP_WS_ENDPOINT || 'ws://127.0.0.1:9001';
|
|
|
+const VAR_TOPIC = 'gc/var/' + craneInfo.crane_no;
|
|
|
+let mqttClient: MqttClient | null = null;
|
|
|
const getCraneMecTreeData = async () => {
|
|
|
- const response = await BizVarDictAPI.varDictMecTree(route.params.craneId);
|
|
|
- console.log(response.data.data)
|
|
|
- deviceStateData.value = mecDataFormat(data.data)
|
|
|
+ const response = await BizVarDictAPI.varDictMecGroup(craneInfo.id);
|
|
|
+ varDictMecGroupData.value = mecDataFormat(response.data.data)
|
|
|
+ console.log(varDictMecGroupData.value)
|
|
|
//localStorage.setItem('varDict', JSON.stringify(deviceStateData.value))
|
|
|
}
|
|
|
|
|
|
@@ -50,8 +59,8 @@ const mecDataFormat = (mecData) => {
|
|
|
const numberTypelist = []
|
|
|
const boolTypeList = []
|
|
|
const gearList = []
|
|
|
- item.vardict_list.forEach((simpleItem) => {
|
|
|
- if (simpleItem.DataType === 1) {
|
|
|
+ item.varList_simple.forEach((simpleItem) => {
|
|
|
+ if (simpleItem.data_type === 1) {
|
|
|
boolTypeList.push({
|
|
|
VarName: simpleItem.var_name,
|
|
|
Value: true,
|
|
|
@@ -59,31 +68,24 @@ const mecDataFormat = (mecData) => {
|
|
|
SwitchType: simpleItem.switch_type
|
|
|
})
|
|
|
} else {
|
|
|
- if (simpleItem.VarCategory === 11) {
|
|
|
- simpleItem.UnitValue = '挡'
|
|
|
- }
|
|
|
numberTypelist.push({
|
|
|
- VarName: simpleItem.VarName,
|
|
|
+ VarName: simpleItem.var_name,
|
|
|
Value: 0,
|
|
|
- UnitValue: simpleItem.UnitValue,
|
|
|
- VarCategory: simpleItem.VarCategory,
|
|
|
- VarCode: simpleItem.VarCode
|
|
|
+ VarCategory: simpleItem.var_category,
|
|
|
+ VarCode: simpleItem.var_code
|
|
|
})
|
|
|
}
|
|
|
- if (simpleItem.VarCategory != 1) {
|
|
|
-
|
|
|
- } else {
|
|
|
+ if (simpleItem.var_category == 1) {
|
|
|
gearList.push({
|
|
|
- VarName: simpleItem.VarName,
|
|
|
+ VarName: simpleItem.var_name,
|
|
|
Value: false,
|
|
|
- VarCode: simpleItem.VarCode,
|
|
|
- VarCategory: simpleItem.VarCategory
|
|
|
+ VarCode: simpleItem.var_code,
|
|
|
+ VarCategory: simpleItem.var_category
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
resultData.push({
|
|
|
- GroupName: item.GroupName,
|
|
|
- MecType: item.MecType,
|
|
|
+ MecType: item.mec_type,
|
|
|
numberTypeList: numberTypelist,
|
|
|
boolTypeList: boolTypeList,
|
|
|
gearList: gearList
|
|
|
@@ -93,6 +95,12 @@ const mecDataFormat = (mecData) => {
|
|
|
return reactive(resultData);
|
|
|
}
|
|
|
|
|
|
+// 字典仓库与需要加载的字典类型
|
|
|
+const dictStore = useDictStore()
|
|
|
+const dictTypes: any = [
|
|
|
+ 'mec_type'
|
|
|
+]
|
|
|
+
|
|
|
const getData = () => {
|
|
|
getCraneMecTreeData()
|
|
|
}
|
|
|
@@ -108,42 +116,97 @@ const getBgColor = (bool, type) => {
|
|
|
return bool ? 'pilot-lamp-bg-green' : 'pilot-lamp-bg-red';
|
|
|
}
|
|
|
}
|
|
|
-//const mqttService = new MqttService();
|
|
|
-const topics = ['gc/var/' + route.params.craneNo];
|
|
|
|
|
|
-onMounted(() => {
|
|
|
+//初始化 MQTT 连接并订阅主题
|
|
|
+const initMqttClient = () => {
|
|
|
+ // 避免重复连接
|
|
|
+ if (mqttClient && mqttClient.connected) {
|
|
|
+ console.log('[MQTT] 客户端已连接,无需重复初始化');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ console.log(`[MQTT] 开始连接 Broker: ${MQTT_WS_URL}`);
|
|
|
+
|
|
|
+ // 创建 MQTT 客户端
|
|
|
+ mqttClient = mqtt.connect(MQTT_WS_URL);
|
|
|
+
|
|
|
+ // 连接成功回调
|
|
|
+ mqttClient.on('connect', () => {
|
|
|
+ console.log('[MQTT] 连接成功');
|
|
|
+
|
|
|
+ // 同时订阅两个主题
|
|
|
+ mqttClient?.subscribe([VAR_TOPIC], (err) => {
|
|
|
+ if (err) {
|
|
|
+ console.error('[MQTT] 订阅主题失败:', err);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ console.log(`[MQTT] 订阅主题成功:${VAR_TOPIC}`);
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 接收消息回调(统一处理所有主题消息)
|
|
|
+ mqttClient.on('message', (topic, payload) => {
|
|
|
+ console.log(`[MQTT] 收到主题 ${topic} 的消息:`, payload.toString());
|
|
|
+ try {
|
|
|
+ const message = JSON.parse(payload.toString());
|
|
|
+ //挡位计算
|
|
|
+ message = gearCalculation(message, varDictMecGroupData.value)
|
|
|
+ message.data.forEach(msgItem => {
|
|
|
+ deviceStateData.value.forEach(item => {
|
|
|
+ item.numberTypeList.forEach(numberItem => {
|
|
|
+ if (msgItem.var_code === numberItem.VarCode) {
|
|
|
+ numberItem.Value = msgItem.value
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ item.boolTypeList.forEach(boolItem => {
|
|
|
+ if (msgItem.var_code === boolItem.VarCode) {
|
|
|
+ boolItem.Value = msgItem.value
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+ loading.value = false
|
|
|
+ } catch (err) {
|
|
|
+ console.error('[MQTT] 解析消息失败:', err);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 连接断开回调
|
|
|
+ mqttClient.on('close', () => {
|
|
|
+ console.log('[MQTT] 连接已断开');
|
|
|
+ });
|
|
|
+
|
|
|
+ // 连接错误回调
|
|
|
+ mqttClient.on('error', (err) => {
|
|
|
+ console.error('[MQTT] 连接错误:', err);
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ if (dictTypes.length > 0) {
|
|
|
+ await dictStore.getDict(dictTypes)
|
|
|
+ }
|
|
|
+ if (receiveData) {
|
|
|
+ receiveData({ craneName: craneInfo.crane_name ?? '', isShowHomeButton: true });
|
|
|
+ }
|
|
|
getData()
|
|
|
- // mqttService.connect();
|
|
|
- // topics.forEach(topic => {
|
|
|
- // mqttService.subscribe(topic, (message) => {
|
|
|
- // //挡位计算
|
|
|
- // message = gearCalculation(message, deviceStateData.value)
|
|
|
- // message.data.forEach(msgItem => {
|
|
|
- // deviceStateData.value.forEach(item => {
|
|
|
- // item.numberTypeList.forEach(numberItem => {
|
|
|
- // if (msgItem.var_code === numberItem.VarCode) {
|
|
|
- // numberItem.Value = msgItem.value
|
|
|
- // return;
|
|
|
- // }
|
|
|
- // })
|
|
|
- // item.boolTypeList.forEach(boolItem => {
|
|
|
- // if (msgItem.var_code === boolItem.VarCode) {
|
|
|
- // boolItem.Value = msgItem.value
|
|
|
- // return;
|
|
|
- // }
|
|
|
- // })
|
|
|
- // })
|
|
|
- // })
|
|
|
- // loading.value = false
|
|
|
- // });
|
|
|
- // });
|
|
|
+ mqttService.connect();
|
|
|
+ topics.forEach(topic => {
|
|
|
+ mqttService.subscribe(topic, (message) => {
|
|
|
+
|
|
|
+ });
|
|
|
+ });
|
|
|
});
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
- // topics.forEach(topic => {
|
|
|
- // mqttService.unsubscribe(topic);
|
|
|
- // });
|
|
|
- // mqttService.disconnect();
|
|
|
+ // 页面销毁时主动断开 MQTT 连接
|
|
|
+ if (mqttClient) {
|
|
|
+ mqttClient.end(true, () => {
|
|
|
+ console.log('[MQTT] 主动断开连接');
|
|
|
+ mqttClient = null;
|
|
|
+ });
|
|
|
+ }
|
|
|
});
|
|
|
|
|
|
</script>
|