修改点离线样式

src/components/mt-edit/components/layout/right-aside/select-item-bind-setting/index.vue

@@ -5,7 +5,7 @@
                 label="监测点"
                 size="small"
                 class="mt-10px"
-                v-if="item_title == '绑定监测点' || item_title == '绑定指标'"
+               
             >
                 <div>
                     <el-cascader

src/components/mt-preview-ypt/index.vue

@@ -296,7 +296,7 @@ const onMouseWheel = (e: WheelEvent) => {
 
         // 如果缩放中心是鼠标位置，计算新的平移值以保持视觉中心
         if (canvasAreaRef.value) {
-            const rect = canvasAreaRef.value.getBoundingClientRect()
+            const rect = canvasAreaRef.value?.getBoundingClientRect()
             const mouseX = e.clientX - rect.left
             const mouseY = e.clientY - rect.top
 

src/components/mt-preview-zl/index.ts

@@ -0,0 +1,3 @@
+import MtPreview from './index.vue'
+
+export default MtPreview

src/components/mt-preview/index.vue

@@ -588,6 +588,7 @@ const setImportJson = (exportJson: IExportJson) => {
                 //报警设备闪烁
                 if (findTransmissionDeviceIdsByKeyList(list.value).includes(item.id)) {
                     // item.props.fill.val = '#fcfc57'
+
                     item.props.fill.val = sendColor.value
                     item.common_animations.val = 'flash'
                     if (findTransmissionDeviceIdsByKeyList(listMax.value).includes(item.id)) {
@@ -1027,16 +1028,26 @@ const setMqtt = async () => {
         await mqttClient.value.subscribe('/zl/rtData/#')
 
         // 设置消息接收回调
-        mqttClient.value.onMessage((subscribe: string, message: any) => {
+        mqttClient.value.onMessage(async (subscribe: string, message: any) => {
             const msg: any = uint8ArrayToObject(message)
             console.log('🚀 ~ 接受消息:', msg)
-            setTimeout(() => {
+            list.value = [...new Set(msg.filter((item: any) => item.devStatus === 1).map((item: any) => item.lineId))]
+            sendColor.value = '#ff0000'
+            // await setImportJson(savedExportJson.value)
+
+            await setTimeout(() => {
                 done_json.value.forEach(item => {
                     msg.forEach((msgValue: any) => {
                         if (item.id == msgValue.id) {
                             item.props.text.val = item.props.text.val.replace(/#{3}/g, msgValue.value) //'B相负载电流-CP95:31'
                         }
                     })
+                    list.value.forEach((listValue: any) => {
+                        if (listValue == item.lineId && item.type == 'svg') {
+                            item.props.fill.val = '#ff0000'
+                            // item.common_animations.val = 'flash'
+                        }
+                    })
                 })
             }, 100)
         })

src/export.ts

@@ -8,5 +8,6 @@ import MtDzr from '@/components/mt-dzr'
 import MtEdit from '@/components/mt-edit'
 import MtPreview from '@/components/mt-preview'
 import MtPreviewYpt from '@/components/mt-preview-ypt'
+import MtPreviewZl from '@/components/mt-preview-zl'
 import { leftAsideStore } from '@/components/mt-edit/store/left-aside'
-export { MtDzr, MtEdit, MtPreview, leftAsideStore, MtPreviewYpt }
+export { MtDzr, MtEdit, MtPreview, leftAsideStore, MtPreviewYpt,MtPreviewZl }

src/router/index.ts

@@ -25,6 +25,12 @@ export const constantRoutes = [
         path: '/preview_YPT',
         component: () => import('../views/preview/index_YPT.vue')
     },
+    {
+        // 云平台预览页面
+        name: 'preview_ZL',
+        path: '/preview_ZL',
+        component: () => import('../views/preview/index_ZL.vue')
+    },
     {
         name: 'edit-load',
         path: '/edit-load',

src/utils/mqtt.ts

@@ -55,7 +55,7 @@ class MQTT {
             // const mqttUrl = 'ws://192.168.1.103:8083/mqtt'
             const mqttUrl =
                 localStorage.getItem('MQTTZUTAI') == 'null'
-                    ? 'ws://192.168.1.24:8085/mqtt'
+                    ? 'ws://192.168.1.103:8083/mqtt'
                     : localStorage.getItem('MQTTZUTAI')
             console.log('🚀 ~ MQTT ~ init ~ mqttUrl:', mqttUrl)
             this.client = mqtt.connect(mqttUrl, this.defaultOptions as IClientOptions)

src/utils/request.ts

@@ -19,11 +19,11 @@ class HttpRequest {
         instance.interceptors.request.use(
             config => {
                 // 添加全局的loading..
-                // config.headers['Authorization'] =
-                //     'bearer ' + JSON.parse(window.localStorage.getItem('adminInfo') || '{}').access_token // 请求头带上token token要在登录的时候保存在localStorage中
-
                 config.headers['Authorization'] =
-                    'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySW5kZXgiOiJmYTM3YjkzY2M5MGQ0YzE3ODRjYThmNmRlYmRkZWUxYSIsInVzZXJfbmFtZSI6InJvb3QiLCJzY29wZSI6WyJhbGwiXSwibmlja25hbWUiOiLotoXnuqfnrqHnkIblkZgiLCJ1c2VyVHlwZSI6MCwiZGVwdEluZGV4IjoiNTY5OWU1OTE2YTE4YTYzODFlMWFjOTJkYTViZDI2MjgiLCJleHAiOjE4MjE4MTc2MTksImF1dGhvcml0aWVzIjpbInJvb3QiXSwianRpIjoiMmJiM2Q5ZTYtNmY3Yy00Yjg1LThiM2EtZDI2ODdmMTUzMDg5IiwiY2xpZW50X2lkIjoibmpjbnRlc3QiLCJoZWFkU2N1bHB0dXJlIjoicmVzb3VyY2VEYXRhLzMxNzRDRUFFOUQ0MjRGMjJCQjkxQTU4OURENjdCMDUxLmpwZyJ9.WjeYl1lvvJdDE1FUGIhS99rE5qKaBXOypWxmxK0svWweGqEbu1XCLjKm_YkiTwjZJ_oIcn5JOO9rvHFkkea76BUsYo5wlzuBBiy7sKqM1fFzOFQq6hdFevNTJAbYH9FiBxYxI-e9DZ5mvLGE6umOjUfn_FAsku2w6Uj5DtvpOKBWYzLEPTEifOqNI9he4zJAmVZniUUMf26SDoEdfu0TyrIS1j_qKaEb-cqR1XDhivdthEBK5m9vxJyXFZ5kofNxwQQkit_oiqJRkCZIt9TWAjCh-frzMHCvA30hkAr-VCD2JfCmmEr3hW_lmwfINaPtFVbHCdCKqdrl6VmF1HObaQ'
+                    'bearer ' + JSON.parse(window.localStorage.getItem('adminInfo') || '{}').access_token // 请求头带上token token要在登录的时候保存在localStorage中
+
+                // config.headers['Authorization'] =
+                //     'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySW5kZXgiOiJmYTM3YjkzY2M5MGQ0YzE3ODRjYThmNmRlYmRkZWUxYSIsInVzZXJfbmFtZSI6InJvb3QiLCJzY29wZSI6WyJhbGwiXSwibmlja25hbWUiOiLotoXnuqfnrqHnkIblkZgiLCJ1c2VyVHlwZSI6MCwiZGVwdEluZGV4IjoiNTY5OWU1OTE2YTE4YTYzODFlMWFjOTJkYTViZDI2MjgiLCJleHAiOjE4MjE4MTc2MTksImF1dGhvcml0aWVzIjpbInJvb3QiXSwianRpIjoiMmJiM2Q5ZTYtNmY3Yy00Yjg1LThiM2EtZDI2ODdmMTUzMDg5IiwiY2xpZW50X2lkIjoibmpjbnRlc3QiLCJoZWFkU2N1bHB0dXJlIjoicmVzb3VyY2VEYXRhLzMxNzRDRUFFOUQ0MjRGMjJCQjkxQTU4OURENjdCMDUxLmpwZyJ9.WjeYl1lvvJdDE1FUGIhS99rE5qKaBXOypWxmxK0svWweGqEbu1XCLjKm_YkiTwjZJ_oIcn5JOO9rvHFkkea76BUsYo5wlzuBBiy7sKqM1fFzOFQq6hdFevNTJAbYH9FiBxYxI-e9DZ5mvLGE6umOjUfn_FAsku2w6Uj5DtvpOKBWYzLEPTEifOqNI9he4zJAmVZniUUMf26SDoEdfu0TyrIS1j_qKaEb-cqR1XDhivdthEBK5m9vxJyXFZ5kofNxwQQkit_oiqJRkCZIt9TWAjCh-frzMHCvA30hkAr-VCD2JfCmmEr3hW_lmwfINaPtFVbHCdCKqdrl6VmF1HObaQ'
                 // 请求头携带token
                 return config
             },

src/views/preview/index_ZL.vue

@@ -0,0 +1,19 @@
+<template>
+    <mt-preview-zl ref="MtPreviewRef" @on-event-call-back="onEventCallBack"></mt-preview-zl>
+</template>
+<script setup lang="ts">
+import { MtPreviewZl } from '@/export'
+import { onMounted, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+const MtPreviewRef = ref<InstanceType<typeof MtPreviewZl>>()
+const onEventCallBack = (type: string, item_id: string) => {
+    console.log(type, item_id)
+
+    if (type == 'test-dialog') {
+        ElMessage.success(`获取到了id:${item_id}`)
+    }
+}
+onMounted(() => {
+    MtPreviewRef.value?.setImportJson(JSON.parse(sessionStorage.getItem('exportJson') as any))
+})
+</script>