1233 lines
35 KiB
Vue
1233 lines
35 KiB
Vue
<template>
|
||
<div
|
||
id="screen"
|
||
class="allShow"
|
||
:style="{
|
||
width: `${style.width}px`,
|
||
height: `${style.height}px`,
|
||
transform: `${style.transform}`,
|
||
}"
|
||
>
|
||
<div class="first-station">
|
||
<el-row style="box-shadow: inset 0 0 30px rgb(24, 78, 135)">
|
||
<div style="height: 80px; width: 1918px">
|
||
<el-col :span="6">
|
||
<div
|
||
style="
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 0px;
|
||
height: 80px;
|
||
margin-left: 10px;
|
||
"
|
||
>
|
||
<img style="height: 60px; margin-left: 50px" :src="titlePng" />
|
||
<img
|
||
style="height: 40px; margin-left: 50px; width: 140px"
|
||
:src="titlePng1"
|
||
/>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div style="font-size: 3rem; color: white; text-align: center">
|
||
<span
|
||
style="
|
||
font-size: 3rem;
|
||
text-align: center;
|
||
letter-spacing: 5px;
|
||
font-weight: bolder;
|
||
background: linear-gradient(to bottom, white, #add8e6);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
color: transparent;
|
||
"
|
||
>清智智能系统</span
|
||
>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div
|
||
style="
|
||
color: white;
|
||
float: right;
|
||
font-size: 1.7rem;
|
||
margin-top: 20px;
|
||
margin-right: 25%;
|
||
"
|
||
>
|
||
<el-col style="font-size: 30px">
|
||
<span>{{ this.year + "/" + this.month + "/" + this.day }}</span>
|
||
<span style="margin-left: 10px">{{
|
||
this.hour + ":" + this.minute + ":" + this.second
|
||
}}</span>
|
||
</el-col>
|
||
</div>
|
||
</el-col>
|
||
</div>
|
||
</el-row>
|
||
<el-row style="box-shadow: inset 0 0 30px #082049; height: 1000px">
|
||
<el-col
|
||
:span="2"
|
||
style="height: 960px; background-color: rgb(219 219 219)"
|
||
>
|
||
<div style="display: flex; flex-direction: column">
|
||
<div id="menu_1" class="show-label-title" @click="selectPage(1)">
|
||
设备信息
|
||
</div>
|
||
<div id="menu_2" class="show-label-title" @click="selectPage(2)">
|
||
产量信息
|
||
</div>
|
||
<div id="menu_3" class="show-label-title" @click="selectPage(3)">
|
||
质量管理
|
||
</div>
|
||
<div id="menu_4" class="show-label-title" @click="selectPage(4)">
|
||
刀具管理
|
||
</div>
|
||
<div id="menu_5" class="show-label-title" @click="selectPage(5)">
|
||
能源管理
|
||
</div>
|
||
<div id="menu_6" class="show-label-title" @click="selectPage(6)">
|
||
工艺管理
|
||
</div>
|
||
<div id="menu_7" class="show-label-title" @click="selectPage(7)">
|
||
程序管理
|
||
</div>
|
||
<div id="menu_8" class="show-label-title" @click="selectPage(8)">
|
||
报警管理
|
||
</div>
|
||
<div
|
||
id="menu_999"
|
||
class="show-label-title"
|
||
@click="selectPage(999)"
|
||
>
|
||
退出
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="22" style="height: 1000px; background-color: #082049">
|
||
<div style="background-color: #082049; margin: 0; height: 1000px">
|
||
<deviceManagementPage
|
||
ref="deviceManagementPage"
|
||
v-if="pageIndexShow === 1"
|
||
/>
|
||
<planeManagementPage
|
||
v-else-if="pageIndexShow === 2"
|
||
:opname="station"
|
||
/>
|
||
<qualityAssurancePage
|
||
v-else-if="pageIndexShow === 3"
|
||
:opname="station"
|
||
/>
|
||
<toolManagementPage
|
||
v-else-if="pageIndexShow === 4"
|
||
:opname="station"
|
||
/>
|
||
<energyManagementPage
|
||
v-else-if="pageIndexShow === 5"
|
||
:opname="station"
|
||
/>
|
||
<processManagementPage
|
||
v-else-if="pageIndexShow === 6"
|
||
:opname="station"
|
||
/>
|
||
<program-management-page
|
||
v-else-if="pageIndexShow === 7"
|
||
:opname="station"
|
||
/>
|
||
<alarm-management-page
|
||
v-else-if="pageIndexShow === 8"
|
||
:opname="station"
|
||
/>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { wsuri, opname, opnameBs, mqttIp, mqttPort } from "@/utils/request";
|
||
import mqtt from "mqtt";
|
||
// import { formatTime } from '@/utils/tool'
|
||
import orderManagementPage from "@/views/page/orderManagementPage";
|
||
import qualityAssurancePage from "@/views/page/qualityAssurancePage";
|
||
import toolManagementPage from "@/views/page/toolManagementPage";
|
||
import planeManagementPage from "@/views/page/planeManagementPage";
|
||
import andonCallPage1 from "@/views/page/andonCallPage1";
|
||
import deviceManagementPage from "@/views/page/deviceManagementPage";
|
||
import processManagementPage from "@/views/page/processManagementPage";
|
||
import energyManagementPage from "@/views/page/energyManagementPage";
|
||
import programManagementPage from "@/views/page/programManagementPage";
|
||
import alarmManagementPage from "@/views/page/alarmManagementPage";
|
||
import axios from "axios";
|
||
import $ from "jquery";
|
||
export default {
|
||
components: {
|
||
orderManagementPage: orderManagementPage,
|
||
qualityAssurancePage: qualityAssurancePage,
|
||
toolManagementPage: toolManagementPage,
|
||
planeManagementPage: planeManagementPage,
|
||
andonCallPage1: andonCallPage1,
|
||
deviceManagementPage: deviceManagementPage,
|
||
processManagementPage: processManagementPage,
|
||
energyManagementPage: energyManagementPage,
|
||
alarmManagementPage: alarmManagementPage,
|
||
programManagementPage: programManagementPage,
|
||
},
|
||
data() {
|
||
return {
|
||
style: {
|
||
width: "1920",
|
||
height: "1080",
|
||
transform: "scaleY(1) scaleX(1) translate(-50%, -50%)",
|
||
},
|
||
titlePng: "",
|
||
titlePng1: "",
|
||
IsAllowConnect: true,
|
||
mqttClient: null,
|
||
flag: false,
|
||
currentBeat: 0,
|
||
planBeat: 0,
|
||
AndonCallList: [],
|
||
FeedRate: 100,
|
||
SpindleSpeed: 100,
|
||
pageType: 0,
|
||
dialogVisible: false,
|
||
websock: null,
|
||
DTSRC: "",
|
||
test1: "",
|
||
programeNumber: "LG00125A", // 配方 名称
|
||
ProductNumber: "LG00125B", // 产品编号
|
||
productTypeNumber: "LG00125C", // 产品型号代码
|
||
operator: "员工1",
|
||
shift: "班次一",
|
||
dailyOutput: "1000",
|
||
stationName: "", // 工位名称
|
||
scanner: "", // 扫描枪
|
||
ProductType: "", // 产品型号
|
||
lightStatus: {
|
||
auto: 0, // 自动模式
|
||
manual: 0, // 手动模式
|
||
emergency: 0, // 急停模式
|
||
shutdown: 0, // 停机模式
|
||
work: 0, // 加工状态
|
||
ready: 0, // 待机状态
|
||
off: 1, // 关机状态
|
||
alarm: 0, // 报警状态
|
||
},
|
||
communicationStatus: "",
|
||
activeName: "first1",
|
||
title: "",
|
||
loading: false,
|
||
tableData: [],
|
||
tableData1: [],
|
||
ID: "",
|
||
station: "",
|
||
stationOutput: "",
|
||
stationNumberID: "",
|
||
partID: "",
|
||
titleEdit: "",
|
||
date: new Date(),
|
||
month: "",
|
||
day: "",
|
||
minute: "",
|
||
hour: "",
|
||
year: "",
|
||
second: "",
|
||
week: "",
|
||
machineInfo_position: {},
|
||
machineInfo_position1: {
|
||
relative: [0, 0, 0, 0, 0],
|
||
absolute: [0, 0, 0, 0, 0],
|
||
machine: [0, 0, 0, 0, 0],
|
||
distance: [0, 0, 0, 0, 0],
|
||
feedRateAxis: [0, 0, 0, 0, 0],
|
||
servoLoad: [0, 0, 0, 0, 0],
|
||
spindleSpeedAxis: [0, 0, 0, 0, 0],
|
||
},
|
||
machineInfo_tool: {
|
||
toolNum: 0,
|
||
toolLife: 1,
|
||
surplus: 100,
|
||
toolCount: 0,
|
||
thresholdValue1: 0,
|
||
thresholdValue2: 0,
|
||
residue: 0,
|
||
},
|
||
machineInfo_time: {
|
||
startTime: "0 H 0 M 0 S",
|
||
cuttingTime: "0 H 0 M 0 S",
|
||
workTime: "0 H 0 M 0 S",
|
||
cyclingTime: "0 H 0 M 0 S",
|
||
},
|
||
machineInfo_work: {
|
||
partCount: "0",
|
||
spindleSpeed: "0",
|
||
feedRate: "0",
|
||
currentToolNum: "0",
|
||
servoLoad: [0, 0, 0],
|
||
programNumber: "[0] [0]",
|
||
},
|
||
processColor: "#16c1a0",
|
||
timer: null,
|
||
timerInit: null,
|
||
notifyPromise: Promise.resolve(),
|
||
pageIndexShow: 1,
|
||
pageIndexShow_Last: 1,
|
||
};
|
||
},
|
||
// 通过路由把index3中 点击的工位号 和 是否存在订单 值传进本页
|
||
watch: {
|
||
$route: {
|
||
handler(route) {
|
||
this.station = this.$route.query.OP;
|
||
this.stationId = this.$route.query.工位号id;
|
||
this.DTSRC = "http://127.0.0.1:8082/#/?" + this.station;
|
||
// this.DTSRC = 'http://192.168.63.15:8956/#/?' + this.station
|
||
},
|
||
immediate: true,
|
||
},
|
||
},
|
||
computed: {},
|
||
mounted() {
|
||
document.getElementById(`menu_1`).style.backgroundColor = "#fff";
|
||
document.getElementById(`menu_1`).style.color = "#000000";
|
||
this.initMqtt();
|
||
const _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
|
||
this.timer = setInterval(() => {
|
||
_this.date = new Date(); // 修改数据date
|
||
this.year =
|
||
new Date().getFullYear() + 1 < 10
|
||
? "0" + (new Date().getFullYear() + 1)
|
||
: new Date().getFullYear();
|
||
this.month =
|
||
new Date().getMonth() + 1 < 10
|
||
? "0" + (new Date().getMonth() + 1)
|
||
: new Date().getMonth() + 1;
|
||
this.day =
|
||
new Date().getDate() < 10
|
||
? "0" + new Date().getDate()
|
||
: new Date().getDate();
|
||
this.hour =
|
||
new Date().getHours() < 10
|
||
? "0" + new Date().getHours()
|
||
: new Date().getHours();
|
||
this.minute =
|
||
new Date().getMinutes() < 10
|
||
? "0" + new Date().getMinutes()
|
||
: new Date().getMinutes();
|
||
this.second =
|
||
new Date().getSeconds() < 10
|
||
? "0" + new Date().getSeconds()
|
||
: new Date().getSeconds();
|
||
this.week = "日一二三四五六".charAt(new Date().getDay());
|
||
}, 1000);
|
||
this.timer = setInterval(() => {
|
||
this.init();
|
||
}, 5000);
|
||
this.setScale();
|
||
/* 窗口改变事件*/
|
||
$(window).resize(() => {
|
||
this.setScale();
|
||
});
|
||
},
|
||
created() {
|
||
this.getLogo();
|
||
},
|
||
beforeDestroy() {
|
||
if (this.websock) this.websock.onclose(wsuri);
|
||
clearInterval(this.timer);
|
||
clearInterval(this.timerInit);
|
||
if (this.mqttClient) this.mqttClient.end();
|
||
},
|
||
methods: {
|
||
getScale() {
|
||
const w = window.innerWidth / this.style.width;
|
||
const h = window.innerHeight / this.style.height;
|
||
return { x: w, y: h };
|
||
},
|
||
setScale() {
|
||
const scale = this.getScale();
|
||
this.style.transform =
|
||
"scaleY(" + scale.y + ") scaleX(" + scale.x + ") translate(-50%, -50%)";
|
||
},
|
||
selectPage(pageIndex) {
|
||
if (pageIndex === 999) {
|
||
this.$router.push("/");
|
||
return;
|
||
}
|
||
document.getElementById(`menu_${pageIndex}`).style.backgroundColor =
|
||
"#fff";
|
||
document.getElementById(`menu_${pageIndex}`).style.color = "#000000";
|
||
if (this.pageIndexShow_Last !== pageIndex) {
|
||
document.getElementById(
|
||
`menu_${this.pageIndexShow_Last}`
|
||
).style.backgroundColor = "#ffaa13";
|
||
document.getElementById(`menu_${this.pageIndexShow_Last}`).style.color =
|
||
"#fff";
|
||
}
|
||
this.pageIndexShow = pageIndex;
|
||
this.pageIndexShow_Last = pageIndex;
|
||
},
|
||
init() {},
|
||
format(percentage) {
|
||
return `剩余${percentage}%`;
|
||
},
|
||
initWebsocket() {
|
||
// 初始化websocket
|
||
this.websock = new WebSocket(wsuri); // 这里面的this都指向vue
|
||
this.websock.onopen = this.websocketopen;
|
||
this.websock.onmessage = this.websocketonmessage;
|
||
this.websock.onclose = this.websocketclose;
|
||
this.websock.onerror = this.websocketerror;
|
||
},
|
||
websocketopen() {
|
||
// 打开
|
||
this.$message.success("连接成功!");
|
||
this.websock.send("{<" + opname + ">}");
|
||
setTimeout(() => {
|
||
this.websockeSendMessage("B_C_DT_WebLoaded", this.station);
|
||
}, 2000);
|
||
},
|
||
websocketonmessage(msg) {
|
||
// 数据接收
|
||
this.msg = msg;
|
||
try {
|
||
// 返回的数据msg.data，包含了协议中的4部分9
|
||
// TOBS??SCADADetailed?MES|Current|opName|电流^电压
|
||
var arrays_signal = msg.data.split("|");
|
||
var interFaceType = arrays_signal[0];
|
||
var m_Opname = arrays_signal[1];
|
||
var dataType = arrays_signal[2];
|
||
var m_data = arrays_signal[3];
|
||
if (this.pageIndexShow !== 1) return;
|
||
switch (interFaceType) {
|
||
case "MES":
|
||
switch (dataType) {
|
||
case "C_B_MoveInfo":
|
||
{
|
||
const J_data = JSON.parse(m_data);
|
||
this.$refs.deviceManagementPage.receiveMessage(
|
||
"C_B_MoveInfo",
|
||
m_Opname,
|
||
J_data
|
||
);
|
||
}
|
||
break;
|
||
case "C_B_TimeInfo":
|
||
{
|
||
const J_data = JSON.parse(m_data);
|
||
this.$refs.deviceManagementPage.receiveMessage(
|
||
"C_B_TimeInfo",
|
||
m_Opname,
|
||
J_data
|
||
);
|
||
}
|
||
break;
|
||
case "C_B_WorkInfo":
|
||
{
|
||
const J_data = JSON.parse(m_data);
|
||
this.$refs.deviceManagementPage.receiveMessage(
|
||
"C_B_WorkInfo",
|
||
m_Opname,
|
||
J_data
|
||
);
|
||
}
|
||
break;
|
||
case "C_B_StatusInfo":
|
||
{
|
||
const J_data = JSON.parse(m_data);
|
||
this.$refs.deviceManagementPage.receiveMessage(
|
||
"C_B_StatusInfo",
|
||
m_Opname,
|
||
J_data
|
||
);
|
||
}
|
||
break;
|
||
case "C_B_QtyInfo":
|
||
{
|
||
const J_data = JSON.parse(m_data);
|
||
this.$refs.deviceManagementPage.receiveMessage(
|
||
"C_B_QtyInfo",
|
||
m_Opname,
|
||
J_data
|
||
);
|
||
}
|
||
break;
|
||
}
|
||
break;
|
||
}
|
||
} catch (exception) {
|
||
var error = exception.toString();
|
||
console.log(error);
|
||
}
|
||
},
|
||
websocketclose() {
|
||
// 关闭
|
||
this.$message.error("WebSocket断开连接!重新连接");
|
||
setTimeout(() => {
|
||
this.initWebsocket();
|
||
}, 2000);
|
||
},
|
||
websocketerror() {
|
||
// 失败
|
||
console.log("WebSocket连接失败");
|
||
},
|
||
websockeSendMessage(dataType, data) {
|
||
this.websock.send(opnameBs + dataType + "|" + data);
|
||
},
|
||
searchTableOpName() {
|
||
var param = [];
|
||
param[0] = ["stationNumber", this.stationId];
|
||
var Data1 = this.CreateData("11", "AAA临工看板_工位信息_查询数据", param);
|
||
this.ExecDatabase(Data1).then((response) => {
|
||
this.stationName = response.data[0].工位名称;
|
||
this.station = response.data[0].工位号;
|
||
});
|
||
},
|
||
initMqtt() {
|
||
const scope = this;
|
||
const connection = {
|
||
host: mqttIp,
|
||
port: mqttPort,
|
||
endpoint: "/mqtt",
|
||
clean: true, // 保留会话
|
||
connectTimeout: 4000, // 超时时间
|
||
reconnectPeriod: 4000, // 重连时间间隔
|
||
// 认证信息
|
||
clientId: "mqttjs_3be2c321" + new Date().getTime(), // 同一个ID 无法二次连接
|
||
username: "DT_WEB2",
|
||
password: "",
|
||
};
|
||
const subscription = {
|
||
topic: opname,
|
||
qos: 0,
|
||
};
|
||
const { host, port, endpoint, ...options } = connection;
|
||
const connectUrl = `ws://${host}:${port}${endpoint}`;
|
||
try {
|
||
this.mqttClient = mqtt.connect(connectUrl, options);
|
||
} catch (error) {
|
||
console.log("MQTT connect error", error);
|
||
}
|
||
|
||
this.mqttClient.on("connect", () => {
|
||
this.$message.success("加载完成，连接MQTT服务器成功！");
|
||
console.log("MQTT Connection succeeded!");
|
||
const { topic, qos } = subscription;
|
||
this.mqttClient.subscribe(topic, { qos }, (error, res) => {
|
||
if (error) {
|
||
console.log("Subscribe to topics error", error);
|
||
}
|
||
});
|
||
});
|
||
this.mqttClient.on("error", (error) => {
|
||
console.log("MQTT Connection failed", error);
|
||
try {
|
||
scope.$message.error("MQTT服务器连接失败");
|
||
if (scope.IsAllowConnect) {
|
||
// 显示一下
|
||
scope.$message.warning("重新连接MQTT服务器");
|
||
console.log("重新连接MQTT服务器");
|
||
// 重新连接,打开计时器
|
||
setTimeout(function () {
|
||
scope.initMqtt();
|
||
}, 5000);
|
||
}
|
||
} catch (exception) {
|
||
const error = exception.toString();
|
||
scope.$message.error("MQTT服务器出现错误,关闭连接" + error);
|
||
}
|
||
});
|
||
// 接收消息
|
||
this.mqttClient.on("message", (topic, message) => {
|
||
try {
|
||
scope.websocketonmessage({ data: message.toString() });
|
||
} catch (exception) {
|
||
console.log(exception.toString());
|
||
}
|
||
});
|
||
},
|
||
// 查询机床状态
|
||
searchMachineStatus() {
|
||
var param = [];
|
||
param[0] = ["opName", this.station];
|
||
var Data = this.CreateData(
|
||
"11",
|
||
"LG_临工看板_设备管理_查询当前状态",
|
||
param
|
||
);
|
||
this.ExecDatabase(Data).then((res) => {
|
||
if (res.data.length > 0) {
|
||
const datum = res.data[0];
|
||
if (datum.StatusCode === 5) {
|
||
this.lightStatus.alarm = 0;
|
||
this.lightStatus.ready = 0;
|
||
this.lightStatus.work = 0;
|
||
this.lightStatus.off = 1;
|
||
} else {
|
||
this.lightStatus.alarm = 0;
|
||
this.lightStatus.ready = 1;
|
||
this.lightStatus.work = 0;
|
||
this.lightStatus.off = 0;
|
||
if (datum.StatusCode === 1) {
|
||
this.lightStatus.alarm = 0;
|
||
this.lightStatus.work = 1;
|
||
} else if (datum.StatusCode === 2) {
|
||
this.lightStatus.alarm = 1;
|
||
this.lightStatus.work = 0;
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 查询机床工作模式
|
||
searchMachineStatus_WorkMode() {
|
||
var param = [];
|
||
param[0] = ["opName", this.station];
|
||
var Data = this.CreateData(
|
||
"11",
|
||
"LG_临工看板_设备管理_查询当前状态_工作模式",
|
||
param
|
||
);
|
||
this.ExecDatabase(Data).then((res) => {
|
||
if (res.data.length > 0) {
|
||
const datum = res.data[0];
|
||
this.lightStatus.shutdown = datum.shutdown;
|
||
this.lightStatus.emergency = datum.emergency;
|
||
this.lightStatus.auto = datum.auto;
|
||
this.lightStatus.manual = datum.manual;
|
||
} else {
|
||
this.lightStatus.shutdown = 0;
|
||
this.lightStatus.emergency = 0;
|
||
this.lightStatus.auto = 0;
|
||
this.lightStatus.manual = 0;
|
||
}
|
||
});
|
||
},
|
||
searchTablePartId() {
|
||
var param = [];
|
||
param[0] = ["stationNumber", this.stationId];
|
||
var Data1 = this.CreateData(
|
||
"3",
|
||
"select top 1 * from [dbo].[LG_工位扫描信息视图] where opName = " +
|
||
`'OP70'` +
|
||
"AND [type] = 1 order by scanTime desc",
|
||
param
|
||
);
|
||
this.ExecDatabase(Data1).then((response) => {
|
||
this.ProductNumber = response.data[0].partId;
|
||
});
|
||
},
|
||
searchCurrentTool(toolNum) {
|
||
var param = [];
|
||
param[0] = ["所在工位号", this.station];
|
||
param[1] = ["刀具号", toolNum];
|
||
var Data1 = this.CreateData(
|
||
"11",
|
||
"LG_临工看板_刀具管理_当前刀具信息查询",
|
||
param
|
||
);
|
||
this.ExecDatabase(Data1).then((response) => {
|
||
if (response.data.length > 0) {
|
||
this.machineInfo_tool.thresholdValue1 = response.data[0].预警值1;
|
||
this.machineInfo_tool.thresholdValue2 = response.data[0].预警值2;
|
||
this.machineInfo_tool.toolLife = response.data[0].刀具额定寿命;
|
||
this.machineInfo_tool.toolNum = response.data[0].刀具代码;
|
||
this.machineInfo_tool.toolCount = response.data[0].已用寿命;
|
||
this.machineInfo_tool.surplus =
|
||
Math.floor(
|
||
(1 -
|
||
this.machineInfo_tool.toolCount /
|
||
this.machineInfo_tool.toolLife) *
|
||
100 *
|
||
100
|
||
) / 100;
|
||
}
|
||
});
|
||
},
|
||
toolInfoColor() {
|
||
const info = this.machineInfo_tool;
|
||
const toolLife = info.toolLife;
|
||
if (parseInt(toolLife) === 0) {
|
||
this.processColor = "#16c1a0";
|
||
} else {
|
||
const toolCount = info.toolCount;
|
||
const thresholdValue1 = info.thresholdValue1;
|
||
const thresholdValue2 = info.thresholdValue2;
|
||
const used = (toolCount / toolLife) * 100;
|
||
console.log(used);
|
||
if (used <= thresholdValue1) {
|
||
this.processColor = "#16c1a0";
|
||
}
|
||
if (used > thresholdValue1 && used <= thresholdValue2) {
|
||
this.processColor = "#efa52e";
|
||
}
|
||
if (used > thresholdValue2) {
|
||
this.processColor = "#a30015";
|
||
}
|
||
}
|
||
},
|
||
showPage(type) {
|
||
this.title = "";
|
||
this.flag = true;
|
||
this.dialogVisible = true;
|
||
this.pageType = type;
|
||
switch (type) {
|
||
case 1:
|
||
this.title = "设备管理";
|
||
break;
|
||
case 2:
|
||
this.title = "计划管理";
|
||
break;
|
||
case 3:
|
||
this.title = "产品管理";
|
||
break;
|
||
case 4:
|
||
this.title = "质量管理";
|
||
break;
|
||
case 5:
|
||
this.title = "刀具管理";
|
||
break;
|
||
case 6:
|
||
this.title = "Andon管理";
|
||
break;
|
||
case 7:
|
||
this.title = "工艺管理";
|
||
break;
|
||
case 8:
|
||
this.title = "能源管理";
|
||
break;
|
||
case 9:
|
||
this.title = "基础参数管理";
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
},
|
||
// OEE图形
|
||
drawLine501() {
|
||
const myChart6395AArrr1 = this.$echarts.init(
|
||
document.getElementById("myChart6395AArrr1")
|
||
);
|
||
myChart6395AArrr1.setOption({
|
||
tooltip: {
|
||
formatter: "{a} <br/>{c} {b}",
|
||
},
|
||
series: [
|
||
{
|
||
name: "进给倍率",
|
||
type: "gauge",
|
||
min: 0,
|
||
max: 150,
|
||
startAngle: 200,
|
||
endAngle: -20,
|
||
splitNumber: 6,
|
||
radius: "100%",
|
||
axisLine: {
|
||
// 坐标轴线
|
||
lineStyle: {
|
||
// 属性lineStyle控制线条样式
|
||
color: [
|
||
[0.2, "#ff4500"],
|
||
[0.8, "#27d500"],
|
||
[1, "#ff4500"],
|
||
],
|
||
width: 3,
|
||
},
|
||
},
|
||
axisLabel: {
|
||
// 坐标轴小标记
|
||
textStyle: {
|
||
// 属性lineStyle控制线条样式
|
||
fontWeight: "bolder",
|
||
color: "#fff",
|
||
shadowColor: "#fff", // 默认透明
|
||
shadowBlur: 1,
|
||
},
|
||
},
|
||
axisTick: {
|
||
// 坐标轴小标记
|
||
length: 5, // 属性length控制线长
|
||
lineStyle: {
|
||
// 属性lineStyle控制线条样式
|
||
color: "auto",
|
||
shadowColor: "#fff", // 默认透<E8AEA4><E9808F><EFBFBD>
|
||
shadowBlur: 1,
|
||
},
|
||
},
|
||
splitLine: {
|
||
// 分隔线
|
||
length: 10, // 属性length控制线长
|
||
lineStyle: {
|
||
// 属性lineStyle（详见lineStyle）控制线条样式
|
||
width: 1,
|
||
color: "#fff",
|
||
shadowColor: "#fff", // 默认透明
|
||
shadowBlur: 1,
|
||
},
|
||
},
|
||
title: {
|
||
textStyle: {
|
||
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||
fontWeight: "bolder",
|
||
fontSize: 14,
|
||
color: "#fff",
|
||
shadowColor: "#fff", // 默认透明
|
||
shadowBlur: 5,
|
||
},
|
||
offsetCenter: [0, "40%"],
|
||
},
|
||
detail: {
|
||
formatter: this.machineInfo_work.feedRate + "%",
|
||
shadowBlur: 3,
|
||
offsetCenter: [0, "70%"], // x, y，单位px
|
||
textStyle: {
|
||
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||
fontWeight: "bolder",
|
||
color: "#fff",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
data: [{ name: "进给倍率", value: this.machineInfo_work.feedRate }],
|
||
},
|
||
],
|
||
});
|
||
const myChart6395dadadsAArrr1 = this.$echarts.init(
|
||
document.getElementById("myChart6395dadadsAArrr1")
|
||
);
|
||
myChart6395dadadsAArrr1.setOption({
|
||
tooltip: {
|
||
formatter: "{a} <br/>{c} {b}%",
|
||
},
|
||
series: [
|
||
{
|
||
name: "主轴倍率",
|
||
type: "gauge",
|
||
min: 0,
|
||
max: 150,
|
||
startAngle: 200,
|
||
endAngle: -20,
|
||
splitNumber: 6,
|
||
radius: "100%",
|
||
axisLine: {
|
||
// 坐标轴线
|
||
lineStyle: {
|
||
// 属性lineStyle控制线条样式
|
||
color: [
|
||
[0.2, "#ff4500"],
|
||
[0.8, "#27d500"],
|
||
[1, "#ff4500"],
|
||
],
|
||
width: 3,
|
||
},
|
||
},
|
||
axisLabel: {
|
||
// 坐标轴小标记
|
||
textStyle: {
|
||
// 属性lineStyle控制线条样式
|
||
fontWeight: "bolder",
|
||
color: "#fff",
|
||
shadowColor: "#fff", // 默认透明
|
||
shadowBlur: 1,
|
||
},
|
||
},
|
||
axisTick: {
|
||
// 坐标轴小标记
|
||
length: 5, // 属性length控制线长
|
||
lineStyle: {
|
||
// 属性lineStyle控制线条样式
|
||
color: "auto",
|
||
shadowColor: "#fff", // 默认透<E8AEA4><E9808F><EFBFBD>
|
||
shadowBlur: 1,
|
||
},
|
||
},
|
||
splitLine: {
|
||
// 分隔线
|
||
length: 10, // 属性length控制线长
|
||
lineStyle: {
|
||
// 属性lineStyle（详见lineStyle）控制线条样式
|
||
width: 1,
|
||
color: "#fff",
|
||
shadowColor: "#fff", // 默认透明
|
||
shadowBlur: 1,
|
||
},
|
||
},
|
||
title: {
|
||
textStyle: {
|
||
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||
fontWeight: "bolder",
|
||
fontSize: 14,
|
||
color: "#fff",
|
||
shadowColor: "#fff", // 默认透明
|
||
shadowBlur: 5,
|
||
},
|
||
offsetCenter: [0, "40%"],
|
||
},
|
||
detail: {
|
||
formatter: this.machineInfo_work.spindleSpeed + "%",
|
||
shadowBlur: 3,
|
||
offsetCenter: [0, "70%"], // x, y，单位px
|
||
textStyle: {
|
||
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||
fontWeight: "bolder",
|
||
color: "#fff",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
data: [
|
||
{ name: "主轴倍率", value: this.machineInfo_work.spindleSpeed },
|
||
],
|
||
},
|
||
],
|
||
});
|
||
},
|
||
// 获取Andon实时表
|
||
searchTableAndon() {
|
||
var param = [];
|
||
param[0] = ["opname", this.station];
|
||
var Data = this.CreateData(
|
||
"11",
|
||
"LG_临工看板_Andon管理_当前Andon",
|
||
param
|
||
);
|
||
this.ExecDatabase(Data).then((response) => {
|
||
if (response.data.length > 0) {
|
||
for (const info of response.data) {
|
||
this.solveAndonList(
|
||
this.station,
|
||
info.AndonName + "呼叫",
|
||
info.TriggerTime
|
||
);
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 接收andon
|
||
solveAndonList(opName, AndonName, TriggerTime) {
|
||
const _this = this;
|
||
this.notifyPromise = this.notifyPromise
|
||
.then(this.$nextTick)
|
||
.then(function () {
|
||
_this.$notify({
|
||
title: opName + "-" + AndonName,
|
||
dangerouslyUseHTMLString: true,
|
||
type: "warning",
|
||
duration: 3000,
|
||
position: "bottom-right",
|
||
message: `
|
||
<div>
|
||
<span style="font-size: 16px">内容：</span>
|
||
<span style="font-size: 16px">${AndonName}</span>
|
||
</div>
|
||
<div>
|
||
<span style="font-size: 16px">时间：</span>
|
||
<span style="font-size: 16px">${TriggerTime}</span>
|
||
</div>
|
||
`,
|
||
});
|
||
});
|
||
},
|
||
// 接收报警 展示
|
||
solveAlarm(opName, content, time) {
|
||
this.$notify({
|
||
title: opName + "-设备报警",
|
||
dangerouslyUseHTMLString: true,
|
||
type: "danger",
|
||
duration: 3000,
|
||
position: "bottom-right",
|
||
message: `
|
||
<div>
|
||
<span style="font-size: 16px">内容：</span>
|
||
<span style="font-size: 16px">${content}</span>
|
||
</div>
|
||
<div>
|
||
<span style="font-size: 16px">时间：</span>
|
||
<span style="font-size: 16px">${time}</span>
|
||
</div>
|
||
`,
|
||
});
|
||
},
|
||
// 查询基础参数 计划时间
|
||
searchBasicParams() {
|
||
this.planBeat = 0;
|
||
var param = [];
|
||
param[0] = ["opname", this.station];
|
||
var Data = this.CreateData(
|
||
"11",
|
||
"LG_临工看板_设备管理_基础参数时间查询",
|
||
param
|
||
);
|
||
this.ExecDatabase(Data).then((response) => {
|
||
if (response.data.length !== 0) {
|
||
this.planBeat = response.data[0].产品额定时间;
|
||
}
|
||
});
|
||
},
|
||
// 监听基础参数设定成功后 查询
|
||
setBasicParamSuccess() {
|
||
this.searchBasicParams();
|
||
},
|
||
closePage() {
|
||
window.location.href = "about:blank";
|
||
window.close();
|
||
},
|
||
getLogo() {
|
||
axios
|
||
.get("../../zhlogo.png", {
|
||
responseType: "arraybuffer",
|
||
})
|
||
.then((res) => {
|
||
this.titlePng =
|
||
"data:image/jpeg;base64," +
|
||
btoa(
|
||
new Uint8Array(res.data).reduce(
|
||
(data, byte) => data + String.fromCharCode(byte),
|
||
""
|
||
)
|
||
);
|
||
});
|
||
axios
|
||
.get("../../MESlogo.png", {
|
||
responseType: "arraybuffer",
|
||
})
|
||
.then((res) => {
|
||
this.titlePng1 =
|
||
"data:image/jpeg;base64," +
|
||
btoa(
|
||
new Uint8Array(res.data).reduce(
|
||
(data, byte) => data + String.fromCharCode(byte),
|
||
""
|
||
)
|
||
);
|
||
});
|
||
axios
|
||
.get("../../run.png", {
|
||
responseType: "arraybuffer",
|
||
})
|
||
.then((res) => {
|
||
this.titlePng2 =
|
||
"data:image/jpeg;base64," +
|
||
btoa(
|
||
new Uint8Array(res.data).reduce(
|
||
(data, byte) => data + String.fromCharCode(byte),
|
||
""
|
||
)
|
||
);
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style>
|
||
HTML {
|
||
overflow: auto;
|
||
}
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
width: 1920px;
|
||
height: 1080px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
/*css主要部分的样式*/
|
||
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
|
||
::-webkit-scrollbar {
|
||
width: 5px; /*对垂直流动条有效*/
|
||
height: 5px; /*对水平流动条有效*/
|
||
}
|
||
|
||
/*定义滚动条的轨道颜色、内阴影及圆角*/
|
||
::-webkit-scrollbar-track {
|
||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||
background-color: #0e3261ff;
|
||
/*background-color: #ffffff;*/
|
||
border-radius: 2px;
|
||
}
|
||
|
||
/*定义滑块颜色、内阴影及圆角*/
|
||
::-webkit-scrollbar-thumb {
|
||
border-radius: 5px;
|
||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||
background-color: rgb(10, 35, 82);
|
||
}
|
||
|
||
/*定义两端按钮的样式*/
|
||
::-webkit-scrollbar-button {
|
||
display: none;
|
||
}
|
||
|
||
/*定义右下角汇合处的样式*/
|
||
::-webkit-scrollbar-corner {
|
||
background: #dedede;
|
||
}
|
||
</style>
|
||
<style scoped>
|
||
.allShow {
|
||
overflow-y: hidden;
|
||
z-index: 100;
|
||
transform-origin: 0 0;
|
||
position: fixed;
|
||
left: 50%;
|
||
top: 50%;
|
||
transition: 0.3s;
|
||
color: white;
|
||
font-family: "Microsoft YaHei", 微软雅黑, "PingFang SC", "Helvetica Neue",
|
||
Helvetica, Arial, sans-serif;
|
||
background-image: url("../../../public/背景.png");
|
||
}
|
||
.is-selected {
|
||
color: #1989fa;
|
||
}
|
||
.first-station {
|
||
width: 1920px;
|
||
height: 1080px;
|
||
background-color: rgb(8, 31, 72);
|
||
color: white;
|
||
background-size: 100%;
|
||
}
|
||
/*警示灯提示文字*/
|
||
.leftTips {
|
||
float: right;
|
||
font-size: 1.2rem;
|
||
font-weight: bolder;
|
||
margin-right: 30px;
|
||
color: white;
|
||
margin-top: -3px;
|
||
}
|
||
.rightTips {
|
||
float: right;
|
||
margin-right: 30px;
|
||
font-size: 1.2rem;
|
||
font-weight: bolder;
|
||
color: white;
|
||
margin-top: -3px;
|
||
}
|
||
/*警示灯*/
|
||
.lamp {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
.data-box1 {
|
||
color: white;
|
||
position: absolute;
|
||
-webkit-box-shadow: rgb(24, 78, 135) 0 0 10px;
|
||
-moz-box-shadow: rgb(24, 78, 135) 0 0 10px;
|
||
box-shadow: inset 0 0 30px rgb(24, 78, 135);
|
||
}
|
||
.boxBorder {
|
||
position: absolute;
|
||
padding: 10px;
|
||
border-style: solid;
|
||
border-color: rgb(71, 209, 226);
|
||
}
|
||
.borderLeft1 {
|
||
border-width: 2px 0 0 2px;
|
||
top: -2px;
|
||
left: -2px;
|
||
}
|
||
.borderLeft2 {
|
||
border-width: 2px 2px 0 0;
|
||
top: -2px;
|
||
right: -2px;
|
||
}
|
||
.borderRight1 {
|
||
border-width: 0 0 2px 2px;
|
||
bottom: -2px;
|
||
left: -2px;
|
||
}
|
||
.borderRight2 {
|
||
border-width: 0 2px 2px 0;
|
||
bottom: -2px;
|
||
right: -2px;
|
||
}
|
||
.indicatorBlock {
|
||
float: left;
|
||
margin: 12px 0 0 30px;
|
||
width: 15px;
|
||
height: 26px;
|
||
background-color: #016eea;
|
||
}
|
||
.indicatorText {
|
||
margin: 16px 0 0 20px;
|
||
float: left;
|
||
font-size: 20px;
|
||
}
|
||
</style>
|
||
<style scoped lang="scss">
|
||
.show-label-title {
|
||
cursor: pointer;
|
||
border-radius: 5px;
|
||
font-size: 28px;
|
||
margin: 10px 5px;
|
||
background-color: #ffad1b;
|
||
height: 60px;
|
||
text-align: center;
|
||
line-height: 60px;
|
||
border: 1px solid #00893d;
|
||
}
|
||
::v-deep .yellowLight {
|
||
background-color: yellow;
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 15px;
|
||
text-align: center;
|
||
height: 20px;
|
||
width: 20px;
|
||
margin: 0px 0px 0px 10px;
|
||
}
|
||
::v-deep .greyLight {
|
||
background-color: white;
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 15px;
|
||
text-align: center;
|
||
height: 20px;
|
||
width: 20px;
|
||
margin: 0px 0px 0px 10px;
|
||
}
|
||
::v-deep .greenLight {
|
||
background: green;
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 15px;
|
||
text-align: center;
|
||
height: 20px;
|
||
width: 20px;
|
||
margin: 0px 0px 0px 10px;
|
||
}
|
||
::v-deep .redLight {
|
||
background: red;
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 15px;
|
||
text-align: center;
|
||
height: 20px;
|
||
width: 20px;
|
||
margin: 0px 0px 0px 10px;
|
||
}
|
||
::v-deep .el-divider--horizontal {
|
||
margin: 5px 0;
|
||
}
|
||
::v-deep .el-dialog__title {
|
||
font-size: 26px;
|
||
}
|
||
::v-deep .el-form-item__label {
|
||
color: #000000;
|
||
}
|
||
.andonCallList {
|
||
width: 200px;
|
||
height: 80px;
|
||
font-size: 20px;
|
||
text-align: center;
|
||
margin-left: 5px;
|
||
line-height: 2;
|
||
color: #fff;
|
||
}
|
||
.alarmInfo {
|
||
font-size: 20px;
|
||
}
|
||
</style>
|
||
|