luoshiwen
/
tobaccoFactory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mqtt功能增加

This commit is contained in:
luoshiwen 2024-11-27 17:05:31 +08:00
parent 55a9957b38
commit fd5ca3e6f5
12 changed files with 1088 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist.zip
View File

Binary file not shown.

733
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -16,6 +16,7 @@
"element-plus": "^2.3.14",
"less": "^4.2.0",
"moment": "^2.30.1",
"mqtt": "^5.10.3",
"three": "^0.164.1",
"video.js": "^7.21.6",
"vue": "^3.3.4",

8
src/api/equipmentManagement/index.js
View File

@ -61,6 +61,14 @@ export function allDevicId(params){
params
})
}
// 获取设备编号
export function getEquipCodeByName(params){
return request({
url:'/api/equipManage/GetEquipCodeByName',
method:'get',
params
})
}
// 易损件
export function getPageDamageEquip(params){
return request({

16
src/components/equipmentManagement/components/health/index.vue
View File

@ -138,6 +138,7 @@ import {
getPageFaultAnalysisInfo,
allDeviceNames,
allDevicId,
getEquipCodeByName
} from "@/api/equipmentManagement/index";
// import { pa } from "element-plus/es/locale";
const emit = defineEmits(["close"]);
@ -199,17 +200,18 @@ function getAllDeviceNames() {
//获取设备编号
function getEquipCode() {
let dataMap = {
name: params.facName,
equipName: params.facName,
};
allDevicId(dataMap)
getEquipCodeByName(dataMap)
.then((res) => {
// console.log(res,'xxxxxxxx');
deviceIdList.value = res.result
.map((item) => item.models) // 提取每个对象中的 models 数组
.flat() // 展平数组，合并成一个单一的数组
.map((models) => models.split(",")) // 将每个 "SFTR-003,SFTR-002" 字符串分割成数组
.flat();
console.log(deviceIdList.value, "deviceIdList.value");
// .map((item) => item.models) // 提取每个对象中的 models 数组
// .flat() // 展平数组，合并成一个单一的数组
// .map((models) => models.split(",")) // 将每个 "SFTR-003,SFTR-002" 字符串分割成数组
// .flat();
// console.log(deviceIdList.value, "deviceIdList.value");
if (props.title === "备件更换统计") {
getPageSparePart(params).then((res) => {
tableList.value = res.result.data;

2
src/components/equipmentManagement/healthManagement.vue
View File

@ -67,7 +67,7 @@
<div class="maintenance-left">
<img src="@/assets/images/dialog/statistics.png" alt="" />
<div class="avg">
<span>平均维修时间</span>
<span>平均恢复时间</span>
<span>
{{ maintenanceList[2] }}
<span

4
src/components/productionInformation/inOutMachine.vue
View File

@ -1,5 +1,5 @@
<template>
<!-- 喂丝机 装箱 -->
<!-- 出入库统计 -->
<div class="el-overlay">
<div class="box">
<div class="box-header">
@ -92,7 +92,7 @@ function drawChart1(data) {
newData.push({ name: key, value: values });
});
// console.log(newData);
console.log(newData);
// console.log(arr);
let color = [
"rgba(25, 174, 250, 1)",

80
src/main.js
View File

@ -5,7 +5,7 @@ import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import router from "./router/router.js"
import mqttConfig from './utils/mqttConfig.js';
// // 动态调整根字体大小的函数
@ -32,5 +32,83 @@ window.addEventListener('resize', updateRootFontSize);
// 初始化时立即设置一次字体大小
updateRootFontSize();
//mqtt订阅
var currentTopics = null;
var client = null; //mqtt客户端连接
var callback = null; //回调
let mqtt = new mqttConfig(currentTopics); // 初始化mqtt
//订阅mqtt
window.PubScribe = function (topic, _callback,) {
callback = _callback;
topic = ['faults_now']
if (currentTopics != null) {
//取消currentTopics主题订阅
if (client != null) {
client.unsubscribe(currentTopics);
currentTopics = null;
}
}
if (client == null) {
client = mqtt.createConnect(() => {
//客户端订阅主题
client.subscribe(topic, {
qos: 0
}, (err) => {
if (!err) {
console.log("订阅成功", topic);
} else {
console.log('订阅失败');
}
});
//订阅数据
client.on("message", (topic, message) => {
console.log(topic,);
//数据分类
try {
callback(topic, message);
} catch (error) {
}
});
});
} else {
if (topic != null) {
console.log("topic", topic)
currentTopics = topic;
client.subscribe(currentTopics, {
qos: 0
}, (err) => {
if (!err) {
console.log("订阅成功");
} else {
console.log('消息订阅失败！')
}
});
}
}
}
function realInfo(topic, message) {
if (topic == 'faults_now') {
console.log('接收数据1',message);
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
console.log("temp", temp)
// window.parent.getMqttData(temp)
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
setTimeout(()=>{
window.parent.getMqttData(msg)
console.log(window.parent.getMqttData,'xxxxxxxxxxx',msg);
},1000)
}
}
const app = createApp(App)
app.use(ElementPlus, { locale: zhCn }).use(router).mount('#app')

80
src/utils/mqttConfig.js Normal file
View File

@ -0,0 +1,80 @@
import mqtt from "mqtt";
class mqttHandle {
constructor() {
this.connect = {
// host: vm.mqttHost,
// port: vm.mqttPort,
endpoint: "/mqtt",
clean: true, // 保留会话
cleanSession: true,
connectTimeout: 7000, // 超时时间
reconnectPeriod: 7000, // 重连时间间隔
host: '172.16.1.106',
// host: '172.16.1.253',
port: '8083',
// 认证信息
clientId: Number(new Date()).toString(),
// clientId: 'JBFY',
username: "lxw",
password: "123456",
}
// this.subscription = {
// topic: subscribe, //需要传入数组的包含订阅的名称
// qos: 0,
// }
this.mqttClient = null;
}
/**
* 创建链接
* @returns client
*/
createConnect(onConnected) {
//配置链接000
// console.log("connectUrl",connectUrl)
const { host, port, endpoint, ...options } = this.connect;
// const connectUrl = 'ws://138.227.208.100:1884/mqtt';
const connectUrl = 'ws://172.16.1.106:8083/mqtt';
// const connectUrl = 'ws://172.16.1.253:1884/mqtt';
if (this.mqttClient == undefined) {
this.mqttClient = mqtt.connect(connectUrl, options);
this.mqttClient.on("connect", () => {
console.log("Connection succeeded!");
onConnected();
});
this.mqttClient.on('reconnect', (error) => {
console.log('正在重连')
})
this.mqttClient.on("error", (error) => {
console.log("Connection failed");
});
}
return this.mqttClient;
// try {
// } catch (error) {
// console.log("mqtt.connect error", error);
// }
}
MySub(subscriptions) {
this.mqttClient.subscribe(subscriptions, { qos: 0 }, (err) => {
if (!err) {
console.log("订阅成功：" + subscriptions);
} else {
console.log('消息订阅失败！' + subscriptions)
}
});
}
MyUnSub(subscription) {
}
}
export default mqttHandle;

9
src/views/home/components/homeDialog/inventoryNews.vue
View File

@ -7,11 +7,12 @@
</div>
<div class="box-content">
<el-table :data="list" style="width: 100%">
<el-table-column prop="itemDesc" label="品牌" width="180" />
<el-table-column prop="batchNum" label="批次号" width="180" />
<el-table-column prop="inTime" label="入库时间" />
<el-table-column prop="weight" label="重量(kg)" />
<el-table-column prop="itemDesc" label="品牌" width="150" />
<el-table-column prop="batchNum" label="批次号" width="250"/>
<el-table-column prop="inTime" label="入库时间" width="240"/>
<el-table-column prop="weight" label="重量(kg)" width="160"/>
<el-table-column prop="boxCount" label="箱数" />
<el-table-column prop="status" label="是否入库" />
</el-table>
</div>
</div>

227
src/views/home/components/homeDialog/messageDialog.vue
View File

@ -11,7 +11,7 @@
</div>
<el-table :data="list" style="width: 100%" @row-click="rowClick">
<el-table-column prop="batch" label="批次" width="180" />
<el-table-column prop="conveyType" label="任务类型" width="180" />
<el-table-column prop="conveyType" label="任务类型" />
<el-table-column prop="itemDesc" label="货箱类型" />
<el-table-column prop="palletNum" label="托盘号" />
<el-table-column prop="startDate" label="任务开始时间" />
@ -23,7 +23,7 @@
</div>
<el-table :data="list1" style="width: 100%" @row-click="rowClick">
<el-table-column prop="facCode" label="设备代码" width="180" />
<el-table-column prop="errorName" label="故障名称" width="180" />
<el-table-column prop="errorName" label="故障名称" />
<el-table-column prop="errorDateTime" label="故障日期" />
<el-table-column prop="reason" label="故障原因" />
<el-table-column prop="reporter" label="记录者" />
@ -32,7 +32,7 @@
</div>
</div>
<!-- 维修提醒的弹窗 -->
<div class="el-overlay" v-show="dialogBoxShow">
<!-- <div class="el-overlay" v-show="dialogBoxShow">
<div class="dialog-box">
<div class="dialog-box-header">
<div class="dialog-box-title">维修提醒</div>
@ -94,7 +94,7 @@
</el-form>
</div>
</div>
</div>
</div> -->
</template>
<script setup>
import { onMounted, reactive, ref, toRefs } from "vue";
@ -102,119 +102,132 @@ import {getCarErrorIn12,getOverTransmission} from '@/api/home'
import getPath from "@/utils/getPath";
const emit = defineEmits(["closeMsg"]);
const list = ref([
{
code: "car15",
roundName: "刹车电源故障",
date: "2023-03-08 06:02",
cause: "",
repairPersonnel: "",
},
{
code: "car15",
roundName: "刹车电源故障",
date: "2023-03-08 06:02",
cause: "",
repairPersonnel: "",
},
{
code: "car15",
roundName: "刹车电源故障",
date: "2023-03-08 06:02",
cause: "",
repairPersonnel: "",
},
{
code: "car15",
roundName: "刹车电源故障",
date: "2023-03-08 06:02",
cause: "",
repairPersonnel: "",
},
{
code: "car15",
roundName: "刹车电源故障",
date: "2023-03-08 06:02",
cause: "",
repairPersonnel: "",
},
{
code: "car15",
roundName: "刹车电源故障",
date: "2023-03-08 06:02",
cause: "",
repairPersonnel: "",
},
{
code: "car15",
roundName: "刹车电源故障",
date: "2023-03-08 06:02",
cause: "",
repairPersonnel: "",
},
{
code: "car15",
roundName: "刹车电源故障",
date: "2023-03-08 06:02",
cause: "",
repairPersonnel: "",
},
{
code: "car15",
roundName: "刹车电源故障",
date: "2023-03-08 06:02",
cause: "",
repairPersonnel: "",
},
{
code: "car15",
roundName: "刹车电源故障",
date: "2023-03-08 06:02",
cause: "",
repairPersonnel: "",
},
{
code: "car15",
roundName: "刹车电源故障",
date: "2023-03-08 06:02",
cause: "",
repairPersonnel: "",
},
{
code: "car15",
roundName: "刹车电源故障",
date: "2023-03-08 06:02",
cause: "",
repairPersonnel: "",
},
{
code: "car15",
roundName: "刹车电源故障",
date: "2023-03-08 06:02",
cause: "",
repairPersonnel: "",
},
{
code: "car15",
roundName: "刹车电源故障",
date: "2023-03-08 06:02",
cause: "",
repairPersonnel: "",
},
// {
// code: "car15",
// roundName: "刹车电源故障",
// date: "2023-03-08 06:02",
// cause: "",
// repairPersonnel: "",
// },
// {
// code: "car15",
// roundName: "刹车电源故障",
// date: "2023-03-08 06:02",
// cause: "",
// repairPersonnel: "",
// },
// {
// code: "car15",
// roundName: "刹车电源故障",
// date: "2023-03-08 06:02",
// cause: "",
// repairPersonnel: "",
// },
// {
// code: "car15",
// roundName: "刹车电源故障",
// date: "2023-03-08 06:02",
// cause: "",
// repairPersonnel: "",
// },
// {
// code: "car15",
// roundName: "刹车电源故障",
// date: "2023-03-08 06:02",
// cause: "",
// repairPersonnel: "",
// },
// {
// code: "car15",
// roundName: "刹车电源故障",
// date: "2023-03-08 06:02",
// cause: "",
// repairPersonnel: "",
// },
// {
// code: "car15",
// roundName: "刹车电源故障",
// date: "2023-03-08 06:02",
// cause: "",
// repairPersonnel: "",
// },
// {
// code: "car15",
// roundName: "刹车电源故障",
// date: "2023-03-08 06:02",
// cause: "",
// repairPersonnel: "",
// },
// {
// code: "car15",
// roundName: "刹车电源故障",
// date: "2023-03-08 06:02",
// cause: "",
// repairPersonnel: "",
// },
// {
// code: "car15",
// roundName: "刹车电源故障",
// date: "2023-03-08 06:02",
// cause: "",
// repairPersonnel: "",
// },
// {
// code: "car15",
// roundName: "刹车电源故障",
// date: "2023-03-08 06:02",
// cause: "",
// repairPersonnel: "",
// },
// {
// code: "car15",
// roundName: "刹车电源故障",
// date: "2023-03-08 06:02",
// cause: "",
// repairPersonnel: "",
// },
// {
// code: "car15",
// roundName: "刹车电源故障",
// date: "2023-03-08 06:02",
// cause: "",
// repairPersonnel: "",
// },
// {
// code: "car15",
// roundName: "刹车电源故障",
// date: "2023-03-08 06:02",
// cause: "",
// repairPersonnel: "",
// },
]);
const list1 = ref([])
function close() {
emit("closeMsg", false);
}
// 接受mqtt数据
function realInfo(topic, message) {
if (topic == 'faults_now') {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
list1.value = msg
}
}
onMounted(()=>{
//
getCarErrorIn12().then(res=>{
list1.value = res.result
})
// 维修
// getCarErrorIn12().then(res=>{
// list1.value = res.result
// })
// 超时
getOverTransmission().then(res=>{
list.value = res.result
})
// 维修
window.PubScribe(null, realInfo)
})
// 维修提醒的弹窗
const options = [

126
src/views/home/index.vue
View File

@ -1,7 +1,7 @@
<template>
<Nav />
<div class="unity">
<iframe src="model/index.html" frameborder="0"></iframe>
<!-- <iframe src="model/index.html" frameborder="0"></iframe> -->
</div>
<div class="home">
<div class="home-left">
@ -11,7 +11,11 @@
<!-- <span class="home-title-more"> </span> -->
</div>
<div class="home-left-device">
<div class="home-left-device-box" v-for="(s, i) in deviceList" :key="'d' + i">
<div
class="home-left-device-box"
v-for="(s, i) in deviceList"
:key="'d' + i"
>
<img :src="s.deviceImg" alt="" />
<div>
<p>{{ s.deviceStatus }}</p>
@ -25,14 +29,21 @@
<span class="home-title-more" @click="brandShow = true"> </span>
</div>
<div class="home-left-brand" id="brand">
<div v-for="(item, index) in brandList" :key="'brand' + index" class="item">
<div
v-for="(item, index) in brandList"
:key="'brand' + index"
class="item"
>
<div class="home-left-brand-title">
<span>{{ item.name }}</span
><span class="pct"
>{{ item.stockNum
}}<span class="kg"
>箱
<span> &nbsp; {{ formatNumber(item.weight) }}<span class="kg">公斤</span></span>
<span>
&nbsp; {{ formatNumber(item.weight)
}}<span class="kg">公斤</span></span
>
</span>
</span>
</div>
@ -51,13 +62,18 @@
</div>
<div class="home-left-messageReminder">
<el-timeline>
<el-timeline-item v-for="(activity, index) in messageReminder" :key="index">
<el-timeline-item
v-for="(activity, index) in messageReminder"
:key="index"
>
<p>{{ activity.msg }}</p>
<p class="home-left-messageReminder-data">
<span style="color: rgba(148, 219, 255, 1)">{{
<span style="color: rgba(148, 219, 255, 1)" class="home-left-messageReminder-font">{{
activity.reminderMsg
}}</span>
<span style="color: rgba(192, 192, 192, 1)">{{ activity.date }}</span>
<span style="color: rgba(192, 192, 192, 1)">{{
activity.date
}}</span>
</p>
</el-timeline-item>
</el-timeline>
@ -205,6 +221,7 @@ import { Search } from "@element-plus/icons-vue"; //出入库工单
import * as echarts from "echarts";
import { ref, onMounted, proxyRefs, getCurrentInstance } from "vue";
import getPath from "@/utils/getPath";
import mqtt from "mqtt";
import {
getEquipStatus,
getInventoryInfo,
@ -489,7 +506,7 @@ function drawInventoryNewsEcahrt(result) {
scaleData.push(box);
}
scaleData.forEach((el, index) => {
el.radius1 = [43 + index * 8 + "%" + "", 45 + index * 8 + "%" + ""];
el.radius1 = [35 + index * 8 + "%" + "", 37 + index * 8 + "%" + ""];
});
var placeHolderStyle = {
label: {
@ -540,7 +557,8 @@ function drawInventoryNewsEcahrt(result) {
},
},
{
value: scaleData[0].value - scaleData[i].value,
// value:scaleData[i].value,
name: "",
itemStyle: placeHolderStyle,
},
@ -557,8 +575,8 @@ function drawInventoryNewsEcahrt(result) {
type: "image",
style: {
image: getPath.homeIcon, // 图片地址
width: fontSize(0.5),
height: fontSize(0.5),
width: fontSize(0.4),
height: fontSize(0.4),
},
// left: '18.5%',
left: "17.5%", // 【主要代码1】
@ -573,11 +591,11 @@ function drawInventoryNewsEcahrt(result) {
legend: {
icon: "circle",
orient: "vertical",
x: "60%",
x: "46%",
y: "center",
itemWidth: fontSize(0.1),
itemHeight: fontSize(0.1),
itemGap: fontSize(0.2),
itemWidth: fontSize(0.07),
itemHeight: fontSize(0.07),
itemGap: fontSize(0.1),
data: scaleData.map((el, index) => {
return el.name;
}),
@ -597,7 +615,7 @@ function drawInventoryNewsEcahrt(result) {
fontSize: ".875rem",
textAlign: "right",
// width: "40",
padding: [0, 0, 0, 10],
padding: [0, 0, 0, 5],
// color: color,
},
},
@ -609,7 +627,9 @@ function drawInventoryNewsEcahrt(result) {
total = scaleData[i].value;
}
}
return `{name|${name}} {val|${total}}`;
return `{name|${name}} {val|${
name == "库存总量" ? total + "公斤" : total
}}`;
},
},
toolbox: {
@ -631,8 +651,8 @@ function drawInventoryNewsEcahrt(result) {
type: "image",
style: {
image: getPath.homeIcon, // 图片地址
width: fontSize(0.5),
height: fontSize(0.5),
width: fontSize(0.4),
height: fontSize(0.4),
},
// left: '18.5%',
left: "17.5%", // 【主要代码1】
@ -645,23 +665,23 @@ function drawInventoryNewsEcahrt(result) {
orient: "vertical",
x: "60%",
y: "center",
itemWidth: fontSize(0.1),
itemHeight: fontSize(0.1),
itemGap: fontSize(0.2),
itemWidth: fontSize(0.07),
itemHeight: fontSize(0.07),
itemGap: fontSize(0.1),
data: scaleData.map((el) => {
return el.name;
}),
show: true,
textStyle: {
color: "#fff",
fontSize: "0.875rem",
fontSize: "0.7rem",
rich: {
name: {
color: "#fff",
fontSize: "0.875rem",
fontSize: "0.7rem",
},
val: {
fontSize: ".875rem",
fontSize: ".7rem",
textAlign: "right",
// width: "40",
@ -819,14 +839,14 @@ function getBrandData() {
}
// 消息提醒
async function getMessageReminder() {
await getCarErrorIn12().then((res) => {
res.result.slice(0, 1).forEach((el) => {
el.msg = "维修提醒";
el.reminderMsg = el.facName + el.facCode + " 需要维修";
el.date = el.errorDateTime;
messageReminder.value.push(el);
});
});
// await getCarErrorIn12().then((res) => {
// res.result.slice(0, 1).forEach((el) => {
// el.msg = "维修提醒";
// el.reminderMsg = el.facName + el.facCode + " 需要维修";
// el.date = el.errorDateTime;
// messageReminder.value.push(el);
// });
// });
await getOverTransmission().then((res) => {
res.result.slice(0, 1).forEach((el) => {
el.msg = "超时提醒";
@ -836,6 +856,10 @@ async function getMessageReminder() {
});
});
}
// 获取mqtt数据
function getMqtt(msg){
console.log(msg,'数据');
}
// 获取库存消息接口方法
function getInventory() {
getLocInfo().then((res) => {
@ -874,16 +898,41 @@ function formatNumber(num) {
throw new Error("Invalid input"); // 非法输入时抛出错误
}
}
// 接受mqtt数据
function realInfo(topic, message) {
if (topic == 'faults_now') {
console.log('接收数据1',message);
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
console.log("temp", temp)
// window.parent.getMqttData(temp)
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
console.log(msg,'xxxxxxxxxx');
msg.forEach((el) => {
el.msg = "维修提醒";
el.reminderMsg = el.facCode + " 需要维修";
el.date = el.errorDateTime;
messageReminder.value.push(el);
});
getMessageReminder(); //消息提醒
}
}
onMounted(() => {
getDeviceStatus(); //获取设备状态
getBrandData(); //获取各品牌库存情况
getMessageReminder(); //消息提醒
getInventory(); //库存消息
getOutboundWorkOrder(); //出库工单
getInboundWorkOrder(); //入库工单
window.getMqttData = getMqtt
window.PubScribe(null, realInfo)
});
</script>
<style scoped lang="scss">
@ -939,7 +988,7 @@ onMounted(() => {
position: relative;
z-index: 99;
width: vw(358);
width: vw(320);
}
&-left {
background-image: url("@/assets/images/home/左侧遮罩.png");
@ -1006,15 +1055,22 @@ onMounted(() => {
background: linear-gradient(79deg, #19aefa 0%, #94dbff 100%);
}
}
&-messageReminder::-webkit-scrollbar{
display: none;
}
&-messageReminder {
height: vh(180);
padding: vh(22) vw(12);
overflow-y: scroll;
box-sizing: border-box;
&-data {
font-size: 0.8rem;
display: flex;
justify-content: space-between;
}
&-font{
width: vw(130);
}
}
&-search {
:deep(.el-input__inner) {