331 lines
9.0 KiB
Vue
331 lines
9.0 KiB
Vue
<!--
|
|
* @FilePath: index.vue
|
|
* @Author: zz
|
|
* @Date: 2024-07-18 17:18:08
|
|
* @LastEditors: Please set LastEditors
|
|
* @LastEditTime: 2024-07-20 17:23:36
|
|
* @Descripttion:
|
|
-->
|
|
<template>
|
|
<div class="container">
|
|
<div class="header">
|
|
<div class="title">
|
|
<header3
|
|
ref="headerref"
|
|
:width="'100%'"
|
|
:height="'100px'"
|
|
:title="title"
|
|
:titleTip="[]"
|
|
:typeFun="['time', 'comback']"
|
|
:alarmType="[]"
|
|
></header3>
|
|
</div>
|
|
</div>
|
|
<div class="border-box">
|
|
<dv-border-box-1 class="box-left" style="width: 30%"
|
|
><h2 class="title2">设备运行</h2>
|
|
<LeftTop :data="ringData" :title="'设备实时状态'"></LeftTop>
|
|
<LeftBottom :tipList="tipList"></LeftBottom>
|
|
</dv-border-box-1>
|
|
|
|
<dv-border-box-1 class="box-center" style="width: 50%"
|
|
><h2 class="title2">设备绩效</h2>
|
|
<CenterTop :data="gaugeData"></CenterTop>
|
|
<Center :data="lineData"></Center>
|
|
<CenterBottom :data="prodData" :title="'当日生产情况'"></CenterBottom>
|
|
</dv-border-box-1>
|
|
|
|
<dv-border-box-1 class="box-right" style="width: 30%"
|
|
><h2 class="title2">设备信息</h2>
|
|
<Right
|
|
:deviceList="deviceList"
|
|
:comList="comList"
|
|
:CurList="CurList"
|
|
:communication="communication"
|
|
:deviceStatus="deviceStatus"
|
|
></Right>
|
|
</dv-border-box-1>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {
|
|
ref,
|
|
reactive,
|
|
onMounted,
|
|
onUnmounted,
|
|
getCurrentInstance,
|
|
watch,
|
|
onUpdated,
|
|
computed,
|
|
} from "vue";
|
|
import header3 from "./../../components/headerBox/header3.vue";
|
|
import LeftTop from "./components/LeftTop.vue";
|
|
import LeftBottom from "./components/LeftBottom.vue";
|
|
import CenterTop from "./components/CenterTop.vue";
|
|
import { useRoute } from "vue-router";
|
|
import Center from "./components/Center.vue";
|
|
import CenterBottom from "./components/CenterBottom.vue";
|
|
import Right from "./components/Right.vue";
|
|
import {
|
|
reqdevicebyid,
|
|
reqtelectricity,
|
|
reqproinfo,
|
|
reqfaultinfo,
|
|
reqstopinfo,
|
|
reqtalarm,
|
|
} from "@/http/changHao";
|
|
import { caozuomoshi, yunxingmoshi } from "./config.js";
|
|
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
|
|
let route = useRoute();
|
|
let device_id = route.params.id;
|
|
// console.log(device_id, "device_id");
|
|
let timer = null;
|
|
let devnum = reactive({
|
|
on: 0,
|
|
off: 0,
|
|
wait: 0,
|
|
});
|
|
let title = ref("设备云眼");
|
|
let ringData = ref([
|
|
{ key: "a046", name: "运行时长", value: "5" },
|
|
{ key: "a036", name: "故障时长", value: "5" },
|
|
{ key: "a044", name: "停机时长", value: "5" },
|
|
{ key: "idletime", name: "空闲时长", value: "5" },
|
|
{ key: "stoptime", name: "急停时长", value: "5" },
|
|
]);
|
|
|
|
// let deviceList = ref([]);
|
|
// let comList = ref([]);
|
|
// let CurList = ref([]);
|
|
let communication = ref(5);
|
|
let deviceStatus = ref(0);
|
|
|
|
let deviceList = ref([
|
|
{ key: "devicenum", label: "设备编号", value: " F-20240723456111" },
|
|
{ key: "serialnumber", label: "设备序列号", value: "iFc023456789154" },
|
|
{ key: "description", label: "设备描述", value: "1600立车" },
|
|
{ key: "modelnumber", label: "设备型号", value: "Series" },
|
|
]);
|
|
function getData() {
|
|
setTimeout(() => {
|
|
prodData.value = [
|
|
{
|
|
procedurename: "0",
|
|
knifenum: "0",
|
|
pronum: "0",
|
|
operate: "0",
|
|
run: "0",
|
|
machining: "1.0",
|
|
axisstatus: 0,
|
|
processingtime: "0",
|
|
},
|
|
];
|
|
}, 0);
|
|
}
|
|
const comList = ref([
|
|
{ key: "a017", label: "主轴伺服温度", unit: "℃", value: "E-2" },
|
|
{ key: "a082", label: "累计待机时长", unit: "分钟", value: "iF" },
|
|
{ key: "a021", label: "X轴DC电压", unit: "V", value: "16" },
|
|
{ key: "a085", label: "累计上电时长", unit: "分钟", value: "Ser" },
|
|
{ key: "a022", label: "Y轴DC电压", unit: "V", value: "E-2" },
|
|
{ key: "a006", label: "主轴转速", unit: "R/min", value: "iF" },
|
|
{ key: "a023", label: "Z轴DC电压", unit: "V", value: "16" },
|
|
{ key: "a007", label: "进给速度", unit: "mm/min", value: "589" },
|
|
{ key: "a083", label: "累计故障时长", unit: "秒", value: "789" },
|
|
{ key: "a084", label: "累计运行时长", unit: "分钟", value: "524" },
|
|
]);
|
|
const CurList = ref([
|
|
{ key: "aphasev", label: "A相电压", unit: "V", value: "6.0" },
|
|
{ key: "aphasea", label: "A相电流", unit: "A", value: "8" },
|
|
{ key: "bphasev", label: "B相电压", unit: "V", value: "2" },
|
|
{ key: "bphasea", label: "B相电流", unit: "A", value: "3" },
|
|
{ key: "cphasev", label: "C相电压", unit: "V", value: "5" },
|
|
{ key: "cphasea", label: "C相电流", unit: "A", value: "4" },
|
|
]);
|
|
// }
|
|
|
|
// 模设备告警数据
|
|
const tipList = ref([{ name: "设备A", alarmcode: "001", alarminfo: "温度过高" }]);
|
|
// 仪表盘数据
|
|
let gaugeData = ref([
|
|
{ key: "utilizationRate", name: "稼动率", value: "46.9" },
|
|
{ key: "a006", name: "主轴转速", value: "91.1" },
|
|
{ key: "a007", name: "进给速度", value: "31.5" },
|
|
]);
|
|
|
|
// 折线图数据日耗电曲线
|
|
let lineData = ref({
|
|
y: [120, 135, 101, 134, 90, 230, 210],
|
|
x: ["07-05", "07-06", "07-07", "07-08", "07-09", "07-10", "07-11"],
|
|
});
|
|
// 生产情况数据
|
|
let prodData = ref([]);
|
|
let deviceinfo = ref({});
|
|
|
|
// 设备信息接口数据
|
|
function getdevicebyid() {
|
|
reqdevicebyid({ id: device_id }).then((res: any) => {
|
|
if (res.code == 0) {
|
|
title.value = res.data.name;
|
|
deviceList.value = [
|
|
{ key: "devicenum", label: "设备编号", value: res.data.devicenum },
|
|
{ key: "serialnumber", label: "设备序列号", value: res.data.serialnumber },
|
|
{ key: "description", label: "设备描述", value: res.data.description },
|
|
{ key: "modelnumber", label: "设备型号", value: res.data.modelnumber },
|
|
];
|
|
}
|
|
});
|
|
}
|
|
|
|
//耗电量接口
|
|
function getelectricity() {
|
|
reqtelectricity({ id: device_id }).then((res: any) => {
|
|
if (res.code == 0) {
|
|
lineData.value.x = res.data.x;
|
|
lineData.value.y = res.data.y;
|
|
}
|
|
});
|
|
}
|
|
|
|
// 生产情况接口
|
|
// function getproinfo() {
|
|
// reqproinfo({ id: device_id }).then((res: any) => {
|
|
// if (res.code == 0) {
|
|
// prodData.value = res.data;
|
|
// }
|
|
// });
|
|
// }
|
|
// 设备告警接口
|
|
function getalarm() {
|
|
reqtalarm({ id: device_id }).then((res: any) => {
|
|
if (res.code == 0) {
|
|
tipList.value = res.data;
|
|
}
|
|
});
|
|
}
|
|
// 故障时长接口
|
|
function getstopinfo() {
|
|
reqstopinfo({ id: device_id }).then((res: any) => {
|
|
if (res.code == 0) {
|
|
ringData.value = ringData.value.map((item) => {
|
|
if (item.key == "a036") {
|
|
item.value = res.data.alltime;
|
|
}
|
|
if (item.key == "stoptime") {
|
|
item.value = res.data.allstoptime;
|
|
}
|
|
return item;
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
let a036 = 0;
|
|
//socket
|
|
function getWebsocket(val) {
|
|
try {
|
|
let data = JSON.parse(val);
|
|
if (data.type == "deviceinfo" && data.msg.id == device_id) {
|
|
let obj = data.msg;
|
|
if (obj.a036 != a036) {
|
|
getalarm();
|
|
a036 = obj.a036;
|
|
}
|
|
// 运行状态
|
|
ringData.value = ringData.value.map((item) => {
|
|
item.value = obj[item.key];
|
|
// item.key
|
|
return item;
|
|
});
|
|
// 仪表盘
|
|
gaugeData.value = gaugeData.value.map((item) => {
|
|
item.value = obj[item.key];
|
|
return item;
|
|
});
|
|
// 当日生产情况
|
|
prodData.value = [
|
|
{
|
|
procedurename: obj.a039,
|
|
knifenum: obj.a008,
|
|
pronum: obj.a005,
|
|
operate: caozuomoshi[obj.a032] || "未知状态",
|
|
run: yunxingmoshi[obj.a033] || "未知状态",
|
|
machining: obj.cycletimeInMinutes,
|
|
axisstatus: obj.a034,
|
|
processingtime: obj.a048,
|
|
},
|
|
];
|
|
// 通讯状态
|
|
communication.value = obj.a041;
|
|
|
|
let tempcomList = comList.value.map((item) => {
|
|
item.value = obj[item.key];
|
|
return item;
|
|
});
|
|
comList.value = tempcomList;
|
|
|
|
// 设备状态
|
|
deviceStatus.value = obj.a038;
|
|
// 电压电流
|
|
}
|
|
if (data.type == "electinfo" && data.msg.id == device_id) {
|
|
let obj = data.msg;
|
|
|
|
CurList.value = CurList.value.map((item) => {
|
|
item.value = obj[item.key];
|
|
return item;
|
|
});
|
|
}
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
}
|
|
function errWebsocket(val) {
|
|
// console.log(val);
|
|
}
|
|
onMounted(() => {
|
|
getdevicebyid();
|
|
getelectricity();
|
|
// getData();
|
|
// getproinfo();
|
|
getalarm();
|
|
getstopinfo();
|
|
timer = setInterval(() => {
|
|
getstopinfo();
|
|
getalarm();
|
|
}, 1800000);
|
|
connectWebsocket(null, null, getWebsocket, errWebsocket);
|
|
});
|
|
onUnmounted(() => {
|
|
clearInterval(timer);
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
height: 1080px;
|
|
width: 1920px;
|
|
color: #ffffff;
|
|
background: url("./../../assets/img/CHBJ.png") no-repeat center center / 100% 100%;
|
|
background-color: #0e0e0e;
|
|
position: relative;
|
|
}
|
|
.header {
|
|
height: 100px;
|
|
width: 1920px;
|
|
}
|
|
.border-box {
|
|
width: 100%;
|
|
height: 90%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.title2 {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|