monkey92/cepianyi-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

数据接入

Browse Source
This commit is contained in:
szz 2025-06-05 16:39:33 +08:00
parent f18274a5f3
commit d8e92c9c31
3 changed files with 210 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/store/modules/equipment.js Normal file
View File

@ -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
}
}
}
);

86
src/views/equipment/common/AddMonitorData.vue
View File

@ -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: '导体直径椭圆度'
}
]

118
src/views/equipment/equipmentDetails.vue
View File

@ -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 { useMqtt } from '@/utils/mqttClient.js';
import {ElMessage, ElMessageBox} from "element-plus";
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('lkk40a9bc')
const clientId = ref('vue-client-' + Math.random().toString(16).substring(2, 8))
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 = () => {
if (currentIndex.value > 0) {
currentIndex.value--
}
const handlePrevious = (index, index1, currentIndex) => {
useEquipment.setSelectIndex(index, index1, currentIndex, 'prev')
}
const handleNext = () => {
if (currentIndex.value < toleranceList.length - 1) {
currentIndex.value++
}
const handleNext = (index, index1, currentIndex) => {
useEquipment.setSelectIndex(index, index1, currentIndex, 'next')
}
// 图像预览
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
// if(message){
// deviceMode.value = message.global_dev.device.sports_mode
// console.log(deviceMode.value)
// xRayStatus.value = message.scanner1.xray.enable_status
// }
})
//图像预览
subscribe(`v1/cpy/${deviceInfo.value?.deviceCode}/collect`, (message) => {
console.log('图像预览数据:', message)
chartDataList.value.forEach(item => {
item.list.forEach(listItem => {
if (listItem.calculationValue.length > 0) {
let values = listItem.calculationValue.split('@')
listItem.value = message[values[0]][values[1]]
}
})
})
// 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 {