数据接入

src/store/modules/equipment.js

@@ -0,0 +1,53 @@
+import {defineStore} from 'pinia';
+
+export const useEquipmentStore = defineStore(
+    'equipment',
+    {
+        state: () => ({
+            deviceStatus: []
+        }),
+        actions: {
+            setDeviceStatus(status) {
+                this.deviceStatus = status;
+            },
+            getDeviceStatus() {
+                if (this.deviceStatus.length === 0) {
+                    let defaultData = [
+                        {
+                            value: '0',
+                            label: '数据组1',
+                            list: []
+                        }, {
+                            value: '1',
+                            label: '数据组2',
+                            list: []
+                        }, {
+                            value: '2',
+                            label: '数据组3',
+                            list: []
+                        }
+                    ]
+                    this.setDeviceStatus(defaultData)
+                }
+                console.log(this.deviceStatus, 'this.deviceStatus')
+                return this.deviceStatus;
+            },
+            setDeviceData(index, data) {
+                this.deviceStatus[Number(index)].list.push(data)
+                console.log(this.deviceStatus)
+            },
+            removeDeviceData(index, index1) {
+                this.deviceStatus[Number(index)].list.splice(index1, 1)
+            },
+            setSelectIndex(index, index1, currentIndex, type) {
+                if (type === 'next') {
+                    currentIndex = currentIndex === this.deviceStatus[Number(index)].list[index1].lists.length - 1 ? 0 : currentIndex + 1
+                } else if (type === 'prev') {
+                    currentIndex = currentIndex === 0 ? this.deviceStatus[Number(index)].list[index1].lists.length - 1 : currentIndex - 1
+                }
+                console.log(currentIndex,'currentIndex')
+                this.deviceStatus[Number(index)].list[index1].defIndex = currentIndex
+            }
+        }
+    }
+);

src/views/equipment/common/AddMonitorData.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import {ref} from 'vue'
 
 const dialogVisible = ref(false)
 const form = ref({
@@ -33,19 +33,95 @@ const options = [
     label: '导体直径',
     children: [
       {
-        value: 'conductorDiameter',
+        value: {
+          title: '导体直径',
+          calculationValue: 'DmCORE@0',
+          productValue: '',
+          lists: [
+            {
+              name: '同心度报警门槛值',
+              value: '',
+              unit: 'mm',
+              label: 'bjmkztxd', // 同心度报警门槛值
+            }, {
+              name: '同心度公差',
+              value: '',
+              unit: 'mm',
+              label: 'gctxd'
+            }, {
+              name: '偏心报警门槛值',
+              value: '',
+              unit: 'mm',
+              label: 'bjmkzpx'
+            }, {
+              name: '偏心度公差',
+              value: '',
+              unit: 'mm',
+              label: 'gcpxd'
+            }, {
+              name: '偏心公差',
+              value: '',
+              unit: 'mm',
+              label: 'gcpx'
+            }, {
+              name: '收缩率',
+              value: '',
+              unit: 'mm',
+              label: 'ssl'
+            }, {
+              name: '负报警门槛值',
+              value: '',
+              unit: 'mm',
+              label: 'fbjmkz'
+            }, {
+              name: '正报警门槛值',
+              value: '',
+              unit: 'mm',
+              label: 'zbjmkz'
+            }, {
+              name: '负公差',
+              value: '',
+              unit: 'mm',
+              label: 'fgc'
+            }, {
+              name: '正公差',
+              value: '',
+              unit: 'mm',
+              label: 'zgc'
+            }, {
+              name: '标称值',
+              value: '',
+              unit: 'mm',
+              label: 'bcz'
+            }],
+          defIndex: 0,
+          value:'',
+          unit:''
+        },
         label: '导体直径'
       },
       {
-        value: 'conductorDiameterX',
+        value: {
+          title: '导体直径X',
+          calculationValue: ['DmCORE@1'],
+          productValue: ['']
+        },
         label: '导体直径X'
       },
       {
-        value: 'conductorDiameterY',
+        value: {
+          title: '导体直径Y',
+          calculationValue: ['DmCORE@2'],
+          productValue: ['']
+        },
         label: '导体直径Y'
       },
       {
-        value: 'conductorDiameterOval',
+        value: {
+          title: '导体直径椭圆度',
+          calculationValue: ['DmCORE'],
+          productValue: ['DmCORE']
+        },
         label: '导体直径椭圆度'
       }
     ]

src/views/equipment/equipmentDetails.vue

@@ -52,15 +52,16 @@
     <div class="chart-container">
       <div class="chart-box">
         <el-tabs
-            v-model="activeName"
+            v-model="activeIndex"
             type="card"
             class="demo-tabs"
-            @tab-click="handleClick"
+            @tab-change="cardClick"
         >
-          <el-tab-pane label="数据组1" name="first">
+          <el-tab-pane v-for="cardList in chartDataList" :key="cardList.value" :label="cardList.label"
+                       :value="cardList.value">
             <div class="card-container">
               <div class="card-list">
-                <div class="eccentricity-card" v-for="(item, index) in cardList" :key="index">
+                <div class="eccentricity-card" v-for="(item, index) in cardList.list" :key="index">
                   <div class="card-header">
                     <span class="title">{{item.title}}</span>
                     <el-icon class="close-icon" @click="deleteCard(index)"><Close /></el-icon>
@@ -81,36 +82,36 @@
 
 
                       <div class="value">
-                        21.15<span class="unit">%</span>
+                        {{ item.value }}<span class="unit">{{ item.unit }}</span>
                       </div>
                     </div>
 
-                    <div class="tolerance-section">
+                    <div class="tolerance-section" v-if="item.lists">
                       <el-button
                           type="primary"
                           plain
                           class="switch-btn left"
-                          @click="handlePrevious"
+                          @click="handlePrevious(activeIndex,index,item.defIndex)"
                       >
                         <el-icon><ArrowLeft /></el-icon>
                       </el-button>
 
                       <div class="tolerance-text">
-                        偏心度公差 {{ toleranceList[currentIndex] }}
+                        {{ item.lists[item.defIndex].name }}{{ item.lists[item.defIndex].value }}
                       </div>
 
                       <el-button
                           type="primary"
                           plain
                           class="switch-btn right"
-                          @click="handleNext"
+                          @click="handleNext(activeIndex,index,item.defIndex)"
                       >
                         <el-icon><ArrowRight /></el-icon>
                       </el-button>
                     </div>
                   </div>
                 </div>
-                <div class="eccentricity-card" @click="openDialog">
+                <div class="eccentricity-card add-card" @click="openDialog(index)" v-if="cardList.list.length < 6">
                   <div style="display: flex;justify-content: center;align-content: center;cursor: pointer">
                     <el-icon style="font-size: 50px;color:red"><Plus></Plus></el-icon>
                   </div>
@@ -120,8 +121,7 @@
 
             </div>
           </el-tab-pane>
-          <el-tab-pane label="数据组2" name="second">数据组2</el-tab-pane>
+
-          <el-tab-pane label="数据组3" name="third">数据组3</el-tab-pane>
         </el-tabs>
       </div>
     </div>
@@ -260,20 +260,22 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import {computed, onMounted, ref} from 'vue'
 import {getDeviceDetailApi} from "@/api/equipment/index.js";
-import {Close, ArrowLeft, ArrowRight, Timer, Refresh, Plus} from '@element-plus/icons-vue'
+import {ArrowLeft, ArrowRight, Close, Plus, Timer} from '@element-plus/icons-vue'
 import TemperatureChart from './common/TemperatureChart.vue'
 import RealtimeChart from './common/RealtimeChart.vue';
 import DeviceStatus from './common/DeviceStatus.vue';
-import DeviceSetting from './common/DeviceSetting.vue';
 import DualChannelChart from './common/DualChannelChart.vue';
 import CurveChart from './common/CurveChart.vue';
 import CircleDetectionChart from "./common/CircleDetectionChart.vue";
 import HistoryDataDialog from './common/HistoryDataDialog.vue';
-import {ElMessageBox, ElMessage} from "element-plus";
+import {ElMessage, ElMessageBox} from "element-plus";
-import { useMqtt } from '@/utils/mqttClient.js';
+import {useMqtt} from '@/utils/mqttClient.js';
 import {useRoute} from 'vue-router';
+//引入设备存储信息
+import {useEquipmentStore} from '@/store/modules/equipment.js';
+
 import AddMonitorData from './common/AddMonitorData.vue';
 import { base64Decode, base64Encode } from '@/utils/base64'
 import { timestampArrayToTime } from '@/utils/time'
@@ -286,8 +288,7 @@ const {
   disconnect,
   publish
 } = useMqtt()
-// const clientId = ref('lkk' + Math.random().toString(16).substring(2, 8))
+const clientId = ref('vue-client-' + Math.random().toString(16).substring(2, 8))
-const clientId = ref('lkk40a9bc')
 const deviceInfo = ref({})
 const deviceData = ref(null)
 const deviceMode = ref(null)
@@ -325,7 +326,7 @@ const dualChart2Ref = ref(null)
 const dualChart1PageRef = ref(null)
 const dualChart2PageRef = ref(null)
 const bowlCurvePageRef = ref(null)
-const activeName = ref('first')
+const activeIndex = ref('0')
 const activeTwoName = ref('first')
 const activeThreeName = ref('first')
 const bowlCurveRef = ref(null)
@@ -351,6 +352,8 @@ const cardList = ref([
 ])
 const warningList = ref([])
 const warningInserted = ref(false)
+const useEquipment = useEquipmentStore();
+let chartDataList = computed(() => useEquipment.getDeviceStatus());
 
 // 示意图数据
 const innerLayerData = ref([0.68, 0.85, 1.07, 1.18, 1.13, 0.97, 0.67, 0.98])
@@ -382,11 +385,15 @@ const arm2ChartData = ref({
   b: Array.from({ length: 100 }, () => Math.random() * 9000)
 })
 // 打开新增设备弹框
-const openDialog = () => {
+const openDialog = (index) => {
   addMonitorRef.value.showDialog()
 }
+const cardClick = (e) => {
+  console.log(e)
+}
 const handleDataConfirm = (dataType) => {
   console.log('选择的数据项:', dataType)
+  useEquipment.setDeviceData(activeIndex.value, dataType)
   // 这里处理选择的数据项
 }
 // mqtt连接
@@ -415,7 +422,7 @@ const deleteCard = (index) => {
         type: 'warning'
       }
   ).then(() => {
-    cardList.value.splice(index, 1)
+    useEquipment.removeDeviceData(activeIndex.value, index)
     ElMessage.success('删除成功')
   }).catch(() => {
     // 用户取消删除
@@ -495,16 +502,12 @@ const handleClick = (tab, event) => {
     }
   })
 }
-const handlePrevious = () => {
+const handlePrevious = (index, index1, currentIndex) => {
-  if (currentIndex.value > 0) {
+  useEquipment.setSelectIndex(index, index1, currentIndex, 'prev')
-    currentIndex.value--
-  }
 }
 
-const handleNext = () => {
+const handleNext = (index, index1, currentIndex) => {
-  if (currentIndex.value < toleranceList.length - 1) {
+  useEquipment.setSelectIndex(index, index1, currentIndex, 'next')
-    currentIndex.value++
-  }
 }
 // 图像预览
 const handleDataUpdate = (data) => {
@@ -585,7 +588,13 @@ const handleGenerateReport = () => {
 // 设备分享
 const handleDeviceShare = () => {
 }
-const initSubscribe = () => {
+const initSubscribe = async () => {
+  console.log(clientId.value, 'clientId')
+  await publish(`v1/cpy/${deviceInfo.value.deviceCode}/control`, JSON.stringify({
+    method: 'follow',
+    cid: clientId.value,
+    value: "true" //  1开 0关
+  }))
   // 设备信息
   subscribe(`v1/cpy/${deviceInfo.value?.deviceCode}/infos`, (message) => {
     console.log('设备信息消息:', message)
@@ -621,16 +630,15 @@ const initSubscribe = () => {
   // 计算数据
   subscribe(`v1/cpy/${deviceInfo.value?.deviceCode}/calculation`, (message) => {
     console.log('计算数据:', message)
-    // deviceData.value = message
+    chartDataList.value.forEach(item => {
-    // if(message){
+      item.list.forEach(listItem => {
-    //   deviceMode.value = message.global_dev.device.sports_mode
+        if (listItem.calculationValue.length > 0) {
-    //   console.log(deviceMode.value)
+          let values = listItem.calculationValue.split('@')
-    //   xRayStatus.value = message.scanner1.xray.enable_status
+          listItem.value = message[values[0]][values[1]]
-    // }
+        }
-  })
+
- //图像预览
+      })
-  subscribe(`v1/cpy/${deviceInfo.value?.deviceCode}/collect`, (message) => {
+    })
-    console.log('图像预览数据:', message)
     // deviceData.value = message
     // if(message){
     //   deviceMode.value = message.global_dev.device.sports_mode
@@ -690,6 +698,26 @@ const sendDeviceTrend = async () => {
   } catch (error) {
     ElMessage.error('发送命令失败')
   }
+  publish(`v1/cpy/1/request`, JSON.stringify({
+    method: 'temperature',
+  }))
+  //产品表
+  subscribe(`v1/cpy/${deviceInfo.value?.deviceCode}/product`, (message) => {
+    console.log('产品表:', message)
+  })
+
+  // try {
+  //   publish(`v1/cpy/1/request`, JSON.stringify({
+  //     method: 'temperature',
+  //   }))
+  //   ElMessage.success('发送命令成功')
+  //
+  // } catch (error) {
+  //   ElMessage.error('发送命令失败')
+  // }
+  // subscribe(`v1/cpy/${clientId.value}/receive`, (message) => {
+  //   console.log('设备温度:', message)
+  // })
 }
 // 获取设备详细信息
 const getDeviceDetail = async () => {
@@ -816,7 +844,6 @@ onBeforeUnmount(() => {
   border-radius: 4px;
   padding: 14px;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-
   .card-header {
     display: flex;
     justify-content: space-between;
@@ -884,6 +911,13 @@ onBeforeUnmount(() => {
     }
   }
 }
+
+.add-card {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
 .card-container {
 
   .card-list {