<!--
|
* @Date: 2024-04-09 22:11:21
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-04-09 22:12:14
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/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">
|
<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>
|
<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 in timestatus" style="width: 33.3333%; height: 50%;">
|
<div class="status-card-box" style="border-color: rgb(89, 89, 89);">
|
<div class="status-card-top">
|
<div class="status-card-detail">
|
<div title="461" class="status-card-detail-name">{{item.code}}</div>
|
<div class="status-card-detail-status">
|
<div class="status-card-detail-point" style="background-color: rgb(89, 89, 89);"></div>{{item.statusName}}
|
<div class="status-card-detail-time" style="color: rgb(89, 89, 89);">---</div>
|
</div>
|
</div>
|
<div class="status-card-machine" style="border-color: rgb(89, 89, 89);">
|
<div class="status-card-machine-img">
|
<img src="./station.png" 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 class="status-card-machine-mesg-form">
|
<div class="status-card-machine-mesg-label">工单</div>
|
<div class="status-card-machine-mesg-value">-</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="status-card-bottom">
|
<div class="status-card-bottom-realtime" @click="showvisible(item)"><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">
|
<div class="dialogstyle">
|
<div class="realtime-analysis-card" v-for="item in visibleList">
|
<div class="card-name" :style="{'background-color': item.namecolor}">{{item.name}}</div>
|
<div class="card-value" :style="{'background-color': item.statuscolor}">{{item.statusName}}</div>
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
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 {
|
titleMap: "",
|
visible: false,
|
visibleList: [],
|
devicestatus: [],
|
timestatus: [],
|
station: "状态视图",
|
current: "1",
|
total: 0,
|
deviceStatus: [],
|
workStationGroupIdList: []
|
}
|
},
|
mounted() {
|
this.getdevicestatus(); //获取顶部title
|
},
|
methods: {
|
changestatus(name) {
|
console.log(name)
|
},
|
showvisible(item) {
|
if(item.properties == null) {
|
this.$message({
|
message: '请配置采集项',
|
type: 'warning'
|
});
|
return;
|
}
|
var visibleList = JSON.parse(JSON.stringify(item.properties));
|
visibleList.forEach(item=> {
|
if(item.statusName) {
|
item.namecolor = "rgb(89, 89, 89)";
|
item.statuscolor = "rgba(89, 89, 89, 0.14)";
|
}else {
|
item.namecolor = "rgb(127, 192, 192)";
|
item.statuscolor = "rgba(127, 192, 192, 0.14)";
|
}
|
|
})
|
this.titleMap = "实时数据(" + item.code + ")";
|
this.visibleList = visibleList;
|
this.visible = true;
|
console.log(this.visibleList)
|
},
|
searchstatus(item,index) {
|
console.log(item)
|
this.devicestatus.forEach(item=> {
|
item.active = false;
|
})
|
this.devicestatus[index].active = true;
|
this.deviceStatus = [item.status];
|
this.gettimestatus();
|
},
|
prev() {
|
if(this.current == "1") return;
|
this.current = this.current - 1;
|
this.gettimestatus();
|
},
|
next() {
|
if((this.total/9 - this.current) < 0) return;
|
this.current = Number(this.current) + 1;
|
this.gettimestatus();
|
},
|
goSet() {
|
this.$router.push('/mdc/configuration');
|
},
|
gostatus(item) {
|
this.$router.push('/mdc/station-live?code='+item.id);
|
},
|
gettimestatus() {
|
var obj = {
|
deviceStatus: this.deviceStatus,
|
workStationGroupIdList: this.workStationGroupIdList
|
}
|
this.$HTTP.post(`/api/blade-cps/workstation/real-time-status?current=${this.current}&size=9`,obj).then(res=> {
|
if(res.code == 200) {
|
var records = JSON.parse(JSON.stringify(res.data.records));
|
records.forEach(item=> {
|
item.statusName = "未知";
|
if(item.properties != null) {
|
item.properties.forEach(item1=> {
|
this.devicestatus.forEach(item2=> {
|
if(item2.status == item1.value) {
|
item.statusName = item2.statusName;
|
item1.statusName = item2.statusName;
|
}
|
})
|
})
|
}
|
|
})
|
this.timestatus = records;
|
this.total = res.data.total;
|
}
|
})
|
},
|
getdevicestatus() {
|
this.$HTTP.get(`/api/blade-mdc/work-station-analysis/device-status-statistics`).then(res=> {
|
if(res.code == 200) {
|
res.data.forEach(item=> {
|
item.active = false;
|
})
|
res.data[0].color = "#73D13D";
|
res.data[1].color = "#370C0D";
|
res.data[2].color = "#FFC53D";
|
res.data[3].color = "#595959";
|
res.data[4].color = "#40A9FF";
|
res.data[0].icon = "Position";
|
res.data[1].icon = "Loading";
|
res.data[2].icon = "Clock";
|
res.data[3].icon = "Warning";
|
res.data[4].icon = "Odometer";
|
this.devicestatus = res.data;
|
this.gettimestatus(); //获取机器
|
}
|
})
|
}
|
}
|
}
|
</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 {
|
min-width: 266px;
|
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;
|
width: 33%;
|
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: 8px;
|
}
|
.status-card-detail-time {
|
line-height: 12px;
|
margin-left: 16px;
|
}
|
.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: #3b8e8e;
|
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;
|
}
|
.status-card-bottom-detail, .status-card-bottom-realtime {
|
width: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.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;
|
}
|
</style>
|
