<!--
|
* @Date: 2024-04-09 22:11:21
|
* @LastEditors: 李喆(开发组) lzhe@yxqiche.com
|
* @LastEditTime: 2025-05-28 13:45:33
|
* @FilePath: /cps-web/src/views/mdc/realtime-status/index.vue
|
实时看板
|
-->
|
<template>
|
<div class="realtime-main">
|
<div>
|
<el-radio-group v-model="station" @change="changestatus">
|
<el-radio-button label="状态视图" value="状态视图" />
|
<el-radio-button label="标签视图" value="标签视图" />
|
</el-radio-group>
|
<span class="setSpan">
|
<el-icon class="setIcon">
|
<Setting />
|
</el-icon>
|
<span class="setBtn" @click="goSet">分析设置</span>
|
</span>
|
</div>
|
<ul class="status-view-box" v-if="station == '状态视图'">
|
<li v-for="(item, index) in devicestatus" @click="searchstatus(item, index)"
|
:class="{ 'active': item.active }">
|
<el-icon :style="{ 'color': item.color }">
|
<component :is='item.icon'></component>
|
</el-icon>
|
<span>{{ item.statusName }}</span>
|
<span class="view-box-num">{{ item.deviceNum }}</span>
|
</li>
|
</ul>
|
<el-radio-group v-model="stationlabel" @change="changestationlabel" v-if="station == '标签视图'"
|
style="margin-top:8px;">
|
<el-radio-button v-for="item in stationlabelList" :label="item.groupName" :value="item.groupId" />
|
</el-radio-group>
|
<div class="status-content-cardBox">
|
<div class="status-prev" @click="prev">
|
<el-icon>
|
<ArrowLeft />
|
</el-icon>
|
</div>
|
<div class="status-next" @click="next">
|
<el-icon>
|
<ArrowRight />
|
</el-icon>
|
</div>
|
<div class="status-content-cardp" v-for="(item, index) in timestatus"
|
:style="{ 'width': (100 / column) + '%' }">
|
<div class="status-card-box" style="border-color: #ccc;">
|
<div class="status-card-top">
|
<div class="status-card-detail">
|
<div class="status-card-detail-name" :title="item.name">{{ item.name }}</div>
|
<div class="status-card-detail-status">
|
<div class="status-card-detail-point" :style="{ 'background-color': item.statusStyle }">
|
</div>{{ item.statusName }}
|
<div class="status-card-detail-time" :style="{ 'color': item.statusStyle }">{{ item.time }}
|
</div>
|
</div>
|
</div>
|
<div class="status-card-machine" style="border-color: #ccc;">
|
<div class="status-card-machine-img">
|
<img :src="item.avatar" width="68" height="68">
|
|
</div>
|
<div class="status-card-machine-mesg">
|
<div class="status-card-machine-mesg-form">
|
<div class="status-card-machine-mesg-label">工位编号</div>
|
<div class="status-card-machine-mesg-value">{{ item.code }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="status-card-bottom">
|
<div class="status-card-bottom-realtime" @click="showvisible(item, index)"><i
|
class="iconfont saber-xiangqing status-card-bottom-icon"></i> 实时数据</div>
|
<div class="status-card-bottom-detail" @click="gostatus(item)"><i
|
class="iconfont saber-shuju status-card-bottom-icon"></i> 工位详情</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<el-dialog :title="titleMap" v-model="visible" :width="740" v-if="visible">
|
<div class="dialogstyle">
|
<el-table :data="timestatus[clickIndex].properties" style="width: 100%" border>
|
<el-table-column prop="name" label="数据点"></el-table-column>
|
<el-table-column prop="code" label="值"></el-table-column>
|
<el-table-column prop="moment" label="采集时间"></el-table-column>
|
</el-table>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import station from "./station1.jpg";
|
import moment from 'moment';
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
let icons = []
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
icons.push(key)
|
}
|
export default {
|
components: {
|
...ElementPlusIconsVue
|
},
|
data() {
|
return {
|
station: station,
|
clickIndex: 0,
|
allwcs: [],
|
statusStyle: "#ccc",
|
titleMap: "",
|
visible: false,
|
visibleList: [],
|
devicestatus: [],
|
timestatus: [],
|
station: "状态视图",
|
stationlabel: "",
|
stationlabelList: [],
|
current: "1",
|
size: "9",
|
total: 0,
|
workStationGroupIdList: [],
|
line: "",
|
column: ""
|
}
|
},
|
mounted() {
|
this.deviceStatus = this.$route.query.currentTag ? [...this.$route.query.currentTag] : [];
|
this.getstationlabelList(); //获取标签视图下的list
|
this.getprocess(); //获取颜色==》获取顶部title==》设置几行几列==》ws
|
//每一分钟执行一次
|
var intervalId = setInterval(() => {
|
this.getdevicestatus();
|
}, 60000);
|
},
|
methods: {
|
getSetting() {
|
this.$HTTP.get(`/api/blade-system/param/detail?paramKey=mdc.realtime.setting`).then(res => {
|
if (res.code == 200) {
|
var paramValue = JSON.parse(res.data.paramValue);
|
this.line = paramValue.line == 0 ? 1 : paramValue.line;
|
this.column = paramValue.column;
|
this.current = "1";
|
this.size = this.line * this.column;
|
this.gettimestatus(); //ws
|
}
|
})
|
},
|
changestationlabel(name) {
|
this.stationlabel = name;
|
this.stationlabelList.forEach(item => {
|
if (item.groupName == name) {
|
this.workStationGroupIdList = [item.groupId];
|
}
|
})
|
this.gettimestatus(); //查询列表
|
},
|
getstationlabelList() {
|
this.$HTTP.get("/api/smis/group/get-mdc-group").then(res => {
|
if (res.code == 200) {
|
this.stationlabelList = res.data;
|
if (res.data.length != 0) {
|
this.stationlabel = res.data[0].groupName;
|
}
|
}
|
})
|
},
|
changestatus(name) {
|
if (this.stationlabelList.length == 0) {
|
this.station = "状态视图";
|
this.$message.error('未选定实时看板查询组，请到"分析设置 -> 实时看板查询组设置"中选择工位组');
|
return;
|
}
|
this.station = name;
|
if (this.station == '状态视图') {
|
this.workStationGroupIdList = [];
|
} else {
|
this.stationlabel = this.stationlabelList[0].groupName;
|
this.workStationGroupIdList = [this.stationlabelList[0].groupId];
|
}
|
this.clickIndex = 0;
|
this.gettimestatus(); //查询列表
|
},
|
showvisible(item, index) {
|
if(item.properties.length == 0) {
|
this.$message({
|
message: '该工位没有配置数据点',
|
type: 'warning'
|
});
|
return;
|
}
|
this.clickIndex = index;
|
this.visible = true;
|
},
|
searchstatus(item, index) {
|
this.devicestatus.forEach(item => {
|
item.active = false;
|
})
|
this.devicestatus[index].active = true;
|
if(item.status == 10) { //全部
|
this.deviceStatus = [];
|
}else {
|
this.deviceStatus = [item.status];
|
}
|
this.current = "1";
|
this.gettimestatus();
|
},
|
prev() {
|
if (this.current == "1") return;
|
this.current = this.current - 1;
|
this.gettimestatus();
|
},
|
next() {
|
if ((this.current * this.line) < this.total / this.column) {
|
this.current = Number(this.current) + 1;
|
this.gettimestatus();
|
}
|
},
|
goSet() {
|
this.$router.push('/mdc/configuration?isShowSearch=1'); //分析设置(isShowSearch表示即时信息来)
|
},
|
gostatus(item) {
|
this.$router.push('/mdc/station-live?code=' + item.id);
|
},
|
getprocess() { //颜色状态
|
this.$HTTP.get(`/api/smis/global_wcs/list?code=&name=`).then(res => {
|
if (res.code == 200) {
|
this.allwcs = res.data;
|
this.getdevicestatus(); //获取顶部title/具体数据
|
this.getSetting(); //获取几行几列
|
}
|
})
|
},
|
changeTime(time,diffTime) {
|
// 使用Moment.js解析这两个日期字符串
|
var date1 = moment(time);
|
var date2 = moment(diffTime);
|
// 计算两个日期之间的差异（毫秒）
|
var differenceInMilliseconds = date1.diff(date2); // 注意：date1 - date2 给出正数差异
|
// 使用duration对象将差异转换为更易于处理的单位
|
var duration = moment.duration(differenceInMilliseconds);
|
// 提取天数、小时数、分钟数和秒数
|
var differenceInDays = duration.asDays();
|
var differenceInHours = duration.hours(); // 直接使用hours()方法获取小时数
|
var differenceInMinutes = duration.minutes(); // 直接使用minutes()方法获取分钟数
|
var differenceInSeconds = duration.seconds(); // 直接使用seconds()方法获取秒数
|
// 输出结果（使用Math.floor确保整数）
|
return Math.floor(differenceInDays) + "天" + Math.floor(differenceInHours) + "时" + Math.floor(differenceInMinutes) + "分" + Math.floor(differenceInSeconds) + "秒";
|
},
|
gettimestatus() {
|
var that = this;
|
var obj = {
|
deviceStatus: this.deviceStatus,
|
workStationGroupIdList: this.workStationGroupIdList
|
}
|
this.timestatus = [];
|
this.$HTTP.post(`/api/smis/workstation/real-time-status?current=${this.current || 0}&size=${this.size || 6}`, obj).then(res => {
|
if (res.code == 200) {
|
var ids = [];
|
res.data.records.forEach(item => {
|
if(item.avatar == "") {
|
item.avatar = station;
|
}
|
ids.push(item.id);
|
})
|
this.timestatus = res.data.records;
|
this.total = res.data.total;
|
//发送websocket
|
var obj = {
|
type: "realTimeData",
|
workstationIdList: ids
|
}
|
if (this.$TOOL.socket.websocket == null) { //没有建立先建立
|
this.$TOOL.socket.connectToWebSocket(this.$TOOL.cookie.get("TOKEN"));
|
}
|
var intervalId123 = setInterval(function () {
|
if (that.$TOOL.socket.websocket.readyState == 1) {
|
clearInterval(intervalId123);
|
that.$TOOL.socket.sendDataToWebSocket(obj); //发送
|
}
|
}, 500);
|
this.$TOOL.socket.websocket.onmessage = function (event) {
|
var eventData = JSON.parse(event.data);
|
if (that.timestatus.length == 0) return; //没值不用循环
|
that.timestatus.forEach((item, index) => { //第一步把v放到code里
|
if (eventData.id == item.id) {
|
if (item.properties == null) {
|
item.properties = [];
|
return;
|
}
|
if (eventData.data.DeviceStatus) {
|
var time = moment(eventData.data.DeviceStatus.t).format('YYYY-MM-DD HH:mm:ss');
|
var preT = moment(eventData.data.DeviceStatus.preT).format('YYYY-MM-DD HH:mm:ss');
|
var diffTime = that.changeTime(time,preT); //转换成差值（时分秒）
|
var diffTime = diffTime;
|
item.time = diffTime;
|
that.allwcs.forEach(item1 => {
|
if (item1.code == eventData.data.DeviceStatus.v) {
|
item.statusName = item1.name;
|
item.statusStyle = item1.color;
|
}
|
})
|
} else {
|
if (item.time == undefined || item.time == "--") {
|
item.time = "--";
|
item.statusName = "未知";
|
item.statusStyle = '#ccc';
|
}
|
}
|
item.properties.forEach((item1, index1) => {
|
if (item1.key == "DeviceStatus") { //机器状态
|
that.allwcs.forEach(item2 => {
|
if(eventData.data.DeviceStatus && item2.code == eventData.data.DeviceStatus.v) {
|
item1.value = item2.code;
|
item1.code = item2.name;
|
item1.moment = that.timestampChangeTime(eventData.data[item1.key].t); //时间戳转化成日期
|
}
|
})
|
if (Object.keys(eventData.data).length == 0) { //ws没有data数据，给默认值
|
item1.code = "";
|
item1.moment = "";
|
};
|
} else {
|
if(eventData.data[item1.key]) {
|
if(item1.key == "Alarm") {
|
try {
|
var vJson = JSON.parse(eventData.data[item1.key].v);
|
item1.code = JSON.stringify(vJson[0]);
|
} catch (e) {
|
item1.code = eventData.data[item1.key].v;
|
}
|
}else {
|
item1.code = eventData.data[item1.key].v;
|
}
|
item1.moment = that.timestampChangeTime(eventData.data[item1.key].t); //时间戳转化成日期
|
}else {
|
item1.code = "";
|
item1.moment = "";
|
}
|
}
|
|
})
|
}
|
});
|
};
|
}
|
})
|
},
|
timestampChangeTime(timestamp) { //时间戳转换成时间
|
var date = new Date(timestamp);
|
//提取年月日小时分钟秒
|
var year = date.getFullYear();
|
var month = date.getMonth() + 1; // 月份从0开始，所以要加1
|
var day = date.getDate();
|
var hours = date.getHours();
|
var minutes = date.getMinutes();
|
var seconds = date.getSeconds();
|
// 格式化日期字符串
|
var formattedDate = `${year}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day} ${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
|
return formattedDate;
|
},
|
getdevicestatus() {
|
this.$HTTP.get(`/api/mdc/work-station-analysis/device-status-statistics`).then(res => {
|
if (res.code == 200) {
|
var deviceNumAll = 0;
|
var newResData = [];
|
res.data.forEach(item => {
|
item.active = false;
|
this.allwcs.forEach(item1 => {
|
if (item.status == item1.code) {
|
item.color = item1.color;
|
}
|
})
|
if (this.$route.query.currentTag == item.status) {
|
item.active = true;
|
}
|
deviceNumAll += item.deviceNum;
|
if(item.statusName != '调试') {
|
newResData.push(item);
|
}
|
if(item.statusName == '报警') {
|
item.icon = "Position";
|
}else if(item.statusName == '待机') {
|
item.icon = "Loading";
|
}else if(item.statusName == '离线') {
|
item.icon = "Clock";
|
}else {
|
item.icon = "Odometer";
|
}
|
})
|
newResData.push({
|
active: false,
|
color: "#08f1f4",
|
deviceNum: deviceNumAll,
|
icon: "price-tag",
|
status: "10",
|
statusName: "全部",
|
})
|
this.devicestatus = newResData;
|
}
|
})
|
}
|
},
|
}
|
</script>
|
|
<style scoped>
|
.realtime-main {
|
background-color: #fff;
|
margin: 8px;
|
padding: 8px;
|
}
|
|
.setSpan {
|
vertical-align: sub;
|
font-size: 14px;
|
}
|
|
.setBtn {
|
margin-left: 2px;
|
color: #409eff;
|
margin-left: 8px;
|
cursor: pointer;
|
}
|
|
.setIcon {
|
color: #409eff;
|
margin-left: 15px;
|
vertical-align: -2px;
|
}
|
|
.status-view-box {
|
display: flex;
|
padding: 8px 0 0;
|
}
|
|
.status-view-box li {
|
list-style: none;
|
border-radius: 2px;
|
background: #f6f6f6;
|
cursor: pointer;
|
padding: 13px 37px 13px 17px;
|
margin: 0 8px;
|
flex-direction: row;
|
display: flex;
|
align-items: center;
|
}
|
|
.status-view-box li i {
|
margin-right: 6px;
|
font-size: 14px;
|
font-weight: bold;
|
}
|
|
.view-box-num {
|
font-size: 25px;
|
margin-left: 6px;
|
}
|
|
.status-content-cardBox {
|
display: flex;
|
flex-direction: row;
|
-ms-flex-wrap: wrap;
|
flex-wrap: wrap;
|
align-items: flex-start;
|
justify-content: flex-start;
|
align-content: flex-start;
|
height: 100%;
|
width: 100%;
|
padding: 4px;
|
box-sizing: border-box;
|
position: relative;
|
}
|
|
.status-content-cardBox:hover .status-next,
|
.status-content-cardBox:hover .status-prev {
|
display: block;
|
}
|
|
.status-content-cardp {
|
height: 50%;
|
min-height: 170px;
|
margin: 0;
|
padding: 4px;
|
box-sizing: border-box;
|
}
|
|
.status-card-box {
|
height: 100%;
|
border: 1px solid;
|
font-size: 14px;
|
box-sizing: border-box;
|
border-radius: 2px;
|
}
|
|
.status-card-top {
|
height: calc(100% - 45px);
|
padding: 12px;
|
box-sizing: border-box;
|
}
|
|
.status-card-detail {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.status-card-detail-name {
|
font-weight: 700;
|
font-size: 16px;
|
color: #333;
|
max-width: 37%;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
|
.status-card-detail-status {
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
}
|
|
.status-card-detail-point {
|
width: 12px;
|
height: 12px;
|
border-radius: 6px;
|
margin-right: 2px;
|
}
|
|
.status-card-detail-time {
|
line-height: 12px;
|
margin-left: 2px;
|
}
|
|
.status-card-machine {
|
display: -webkit-box;
|
display: -ms-flexbox;
|
display: flex;
|
-webkit-box-align: center;
|
-ms-flex-align: center;
|
align-items: center;
|
-webkit-box-pack: start;
|
-ms-flex-pack: start;
|
justify-content: flex-start;
|
padding-top: 12px;
|
}
|
|
.status-card-machine-img {
|
width: 68px;
|
height: 68px;
|
border-radius: 2px;
|
}
|
|
.status-card-machine-mesg {
|
padding-left: 16px;
|
}
|
|
.status-card-machine-mesg-form {
|
display: flex;
|
align-items: center;
|
justify-content: flex-start;
|
padding: 8px 0;
|
}
|
|
.status-card-machine-mesg-label {
|
font-weight: 400;
|
font-size: 12px;
|
text-align: left;
|
color: #666;
|
width: 70px;
|
}
|
|
.status-card-machine-mesg-value {
|
font-weight: 400;
|
font-size: 12px;
|
text-align: left;
|
color: #333;
|
}
|
|
.status-card-bottom {
|
font-weight: 700;
|
font-size: 14px;
|
color: #409eff;
|
display: flex;
|
align-items: center;
|
justify-content: flex-start;
|
border-top: 1px solid #e1e1e2;
|
padding: 12px 0;
|
}
|
|
.status-card-bottom-realtime {
|
width: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
}
|
|
.status-card-bottom-detail,
|
.status-card-bottom-realtime {
|
width: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
}
|
|
.status-card-bottom-icon {
|
margin-right: 8px;
|
}
|
|
.status-next,
|
.status-prev {
|
position: absolute;
|
top: 50%;
|
font-size: 36px;
|
font-weight: 700;
|
width: 48px;
|
height: 48px;
|
text-align: center;
|
line-height: 48px;
|
background: hsla(0, 0%, 100%, .7);
|
border-radius: 2px;
|
cursor: pointer;
|
display: none;
|
z-index: 99;
|
}
|
|
.status-next {
|
right: 0;
|
}
|
|
.status-prev {
|
left: 0;
|
}
|
|
.active {
|
border: 1px solid #317d7b !important
|
}
|
|
.realtime-analysis-card {
|
border-radius: 2px;
|
margin: 8px;
|
height: 88px;
|
display: flex;
|
}
|
|
.realtime-analysis-card .card-name,
|
.realtime-analysis-card .card-value {
|
display: flex;
|
align-items: center;
|
}
|
|
.realtime-analysis-card .card-name {
|
width: 98px;
|
height: 88px;
|
justify-content: center;
|
color: #fff;
|
}
|
|
.realtime-analysis-card .card-value {
|
min-width: 118px;
|
max-width: 396px;
|
height: 100%;
|
padding: 0 8px;
|
overflow: hidden;
|
word-break: break-all;
|
box-sizing: border-box;
|
}
|
|
.dialogstyle {
|
display: flex;
|
width: 100%;
|
flex-wrap: wrap;
|
}
|
|
.card-value-bg1 {
|
background-color: rgba(115, 209, 61, 0.14);
|
}
|
|
.card-value-bg2 {
|
background-color: rgba(55, 12, 13, 0.14);
|
}
|
</style>
|
