<!--
|
* @Date: 2024-01-05 22:26:22
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-03-12 21:10:54
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/mapPreviewDetail/index.vue
|
-->
|
<template>
|
<div class="workshop">
|
<Nav :name="name">
|
<template>
|
<span class="back" @click="back">
|
返回车间地图
|
</span>
|
</template>
|
</Nav>
|
<div class="workshop-box">
|
<div class="left">
|
<div class="left_1">
|
<div>
|
<span>{{ deviceInfo.runRate || 0 }}%</span>
|
<span>开机运行率</span>
|
</div>
|
<div>
|
<span>{{ deviceInfo.efficiency || 0 }}%</span>
|
<span>能力利用率</span>
|
</div>
|
</div>
|
<div class="left_2 table">
|
<el-table stripe :data="axislist" style="width: 100%;margin-top: 20px;">
|
<el-table-column prop="name" label="轴" width="180">
|
</el-table-column>
|
<el-table-column prop="position" label="坐标" width="180">
|
</el-table-column>
|
<el-table-column prop="servoLoad" label="扭矩">
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="left_2 table">
|
<el-table stripe :data="axislist1" style="width: 100%;margin-top: 20px;">
|
<el-table-column prop="name" label="轴" width="180">
|
</el-table-column>
|
<el-table-column prop="position" label="坐标" width="180">
|
</el-table-column>
|
<el-table-column prop="servoLoad" label="扭矩">
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
<div class="center">
|
<div class="center-top">
|
<!-- spindleLoad -->
|
<div>
|
<span class="zz" :style="`transform: rotate(${260/100 * (status.spindleLoad || 0) - 220}deg)`"></span>
|
<span class="name">主轴负载</span>
|
</div>
|
<!-- rate -->
|
<div>
|
<span class="zz" :style="`transform: rotate(${260/100 * (status.rate || 0) - 220}deg)`"></span>
|
<span class="name">主轴倍率</span>
|
</div>
|
<!-- feed -->
|
<div>
|
<span class="zz" :style="`transform: rotate(${260/100 * (status.feed || 100) - 220}deg)`"></span>
|
<span class="name">进给倍率</span>
|
</div>
|
</div>
|
<div class="center-bottom">
|
<img :src="deviceInfo.pic || png" alt="">
|
</div>
|
</div>
|
<div class="right">
|
<div class="right_1">
|
<p>工段: {{ deviceInfo.section }}</p>
|
<p>名称: {{ deviceInfo.machineName }}</p>
|
<div class="line"></div>
|
<ul>
|
<li>
|
<img src="./img/sd.png" alt="">
|
<div>
|
<p>{{ cycleTime || 0 }}秒</p>
|
<p>运行时间</p>
|
</div>
|
</li>
|
<li>
|
<img src="./img/sd.png" alt="">
|
<div>
|
<p>{{ status.utilizationDaily || 0}}%</p>
|
<p>日利用率</p>
|
</div>
|
</li>
|
<li>
|
<img src="./img/sd.png" alt="">
|
<div>
|
<p>{{ status.utilizationweeks || 0 }}%</p>
|
<p>周利用率</p>
|
</div>
|
</li>
|
<li>
|
<img src="./img/sd.png" alt="">
|
<div>
|
<p>{{ status.utilizationmonths || 0 }}%</p>
|
<p>月利用率</p>
|
</div>
|
</li>
|
<li>
|
<img src="./img/sd.png" alt="">
|
<div>
|
<p>{{ status.cycleCount || 0 }}%</p>
|
<p>完工件数</p>
|
</div>
|
</li>
|
</ul>
|
<div class="line"></div>
|
<p>机床状态:
|
<span class="img-status" v-if="deviceInfo.status === 'STOP'">停机</span>
|
<span class="img-status run" v-if="deviceInfo.status === 'RUN'">运行</span>
|
<span class="img-status standby" v-if="deviceInfo.status === 'IDLE'">待机</span>
|
<span class="img-status alerm" v-if="deviceInfo.status === 'ALARM'">报警</span>
|
</p>
|
<p>待机原因: {{status.yy}}</p>
|
</div>
|
<div class="right_2">
|
<p>加工数据</p>
|
<ul>
|
<li>
|
<span>程序名称:</span>
|
<span>{{ status.progName }}</span>
|
</li>
|
<li>
|
<span>零件号:</span>
|
<span>{{ status.componentId }}</span>
|
</li>
|
<li>
|
<span>控制模型:</span>
|
<span>{{ status.progContent }}</span>
|
</li>
|
<li>
|
<span>工序号:</span>
|
<span>{{ status.processId }}</span>
|
</li>
|
<li>
|
<span>主轴转速:</span>
|
<span>{{ status.speed }}</span>
|
</li>
|
<li>
|
<span>进给速度:</span>
|
<span>{{ status.feedspeed }}</span>
|
</li>
|
</ul>
|
</div>
|
<div class="right_3 table">
|
<el-table stripe :data="tableData" style="width: 100%;margin-top: 20px;">
|
<el-table-column prop="alarmNo" label="报警号" width="180">
|
</el-table-column>
|
<el-table-column prop="alarmMsg" label="报警内容" width="180">
|
</el-table-column>
|
<el-table-column prop="time" label="报警时间">
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import Nav from '@/components/nav'
|
import png from './img/jq.png'
|
import { getRequest, getFormRequest } from '@/api/Api'
|
export default {
|
components: {
|
Nav
|
},
|
data() {
|
return {
|
png,
|
cycleTime: '',
|
name: '',
|
deviceInfo: {
|
section: '', // 工段
|
},
|
status: {
|
progName: '',
|
componentId: '',
|
progContent: '',
|
processId: '',
|
speed: '',
|
feedspeed: '',
|
spindleLoad: '',
|
rate: '',
|
feed: '',
|
utilizationDaily: '',
|
utilizationweeks: '',
|
utilizationmonths: '',
|
cycleCount: '',
|
},
|
tableData: [],
|
axislist: [
|
{
|
name: '',
|
position: '',
|
servoLoad: ''
|
},
|
{
|
name: '',
|
position: '',
|
servoLoad: ''
|
},
|
{
|
name: '',
|
position: '',
|
servoLoad: ''
|
}
|
],
|
axislist1: [
|
{
|
name: '',
|
position: '',
|
servoLoad: ''
|
},
|
{
|
name: '',
|
position: '',
|
servoLoad: ''
|
},
|
{
|
name: '',
|
position: '',
|
servoLoad: ''
|
}
|
],
|
}
|
},
|
methods: {
|
back() {
|
this.$router.go(-1)
|
},
|
init() {
|
getFormRequest('getbyid', {
|
machineId: this.$route.query.id
|
}).then(res => {
|
var axisNames
|
if (res.data.status.var4 != null) {
|
axisNames = res.status.var4.split(':')
|
}
|
var positions
|
if (res.data.status.var5 != null) {
|
positions = res.status.var5.split(':')
|
}
|
var servoLoads
|
if (res.data.status.var6 != null) {
|
servoLoads = res.status.var6.split(':')
|
}
|
for (let i = 0; i < 3; i++) {
|
if ((axisNames == null) || (axisNames[i] == null) || (axisNames[i] === '')) {
|
this.axislist[i].name = ''
|
} else {
|
this.axislist[i].name = axisNames[i]
|
}
|
if (positions == null) {
|
this.axislist[i].position = ''
|
} else {
|
this.axislist[i].position = positions[i]
|
}
|
if (servoLoads == null) {
|
this.axislist[i].servoLoad = ''
|
} else {
|
this.axislist[i].servoLoad = servoLoads[i]
|
}
|
}
|
for (let i = 3; i < 6; i++) {
|
if ((axisNames == null) || (axisNames[i] == null) || (axisNames[i] === '')) {
|
this.axislist1[i - 3].name = ''
|
} else {
|
this.axislist1[i - 3].name = axisNames[i]
|
}
|
if (positions == null) {
|
this.axislist1[i - 3].position = ''
|
} else {
|
this.axislist1[i - 3].position = positions[i]
|
}
|
if (servoLoads == null) {
|
this.axislist1[i - 3].servoLoad = ''
|
} else {
|
this.axislist1[i - 3].servoLoad = servoLoads[i]
|
}
|
}
|
this.status = res.data.status
|
this.tableData = res.data.list
|
this.cycleTime = this.formatSeconds(res.data.msg.cycleTime)// 运行时间
|
console.log(res)
|
})
|
try {
|
this.deviceInfo = JSON.parse(window.localStorage.getItem('deviceInfo'))
|
} catch (error) {
|
this.deviceInfo = {}
|
}
|
this.name = `车间列表 / ${this.$route.query.name ? this.$route.query.name + '/' : ''} ${this.deviceInfo.machineName}`
|
},
|
formatSeconds(value) {
|
var secondTime = parseInt(value)// 秒
|
var minuteTime = 0// 分
|
var hourTime = 0// 小时
|
if (secondTime > 60) { // 如果秒数大于60，将秒数转换成整数
|
// 获取分钟，除以60取整数，得到整数分钟
|
minuteTime = parseInt(secondTime / 60)
|
// 获取秒数，秒数取佘，得到整数秒数
|
secondTime = parseInt(secondTime % 60)
|
// 如果分钟大于60，将分钟转换成小时
|
if (minuteTime > 60) {
|
// 获取小时，获取分钟除以60，得到整数小时
|
hourTime = parseInt(minuteTime / 60)
|
// 获取小时后取佘的分，获取分钟除以60取佘的分
|
minuteTime = parseInt(minuteTime % 60)
|
}
|
}
|
var result = '' + parseInt(secondTime) + '秒'
|
|
if (minuteTime > 0) {
|
result = '' + parseInt(minuteTime) + '分' + result
|
}
|
if (hourTime > 0) {
|
result = '' + parseInt(hourTime) + '小时' + result
|
}
|
return result
|
}
|
},
|
mounted() {
|
this.init()
|
}
|
}
|
</script>
|
<style lang="scss">
|
.table {
|
.el-table::before {
|
background-color: transparent;
|
}
|
|
.el-table th {
|
color: #E6E5E5;
|
background-color: #182D54;
|
border-bottom: none;
|
}
|
|
.el-table {
|
color: #E6E5E5;
|
background: transparent;
|
background-color: transparent;
|
border-bottom: none;
|
padding: 0;
|
}
|
|
.el-table__fixed-right::before,
|
.el-table__fixed::before {
|
background: transparent;
|
}
|
|
.el-table td,
|
.el-table--striped .el-table__body tr.el-table__row--striped td,
|
.el-table--enable-row-hover .el-table__body tr:hover>td {
|
color: #E6E5E5;
|
border-bottom: none;
|
background: transparent;
|
background-color: transparent;
|
// padding: 0;
|
}
|
|
.el-table tr {
|
color: #E6E5E5;
|
border-bottom: none;
|
background: transparent;
|
background-color: transparent;
|
border-bottom: none;
|
padding: 0;
|
}
|
|
.el-table tr.el-table__row--striped {
|
background-color: #182D54 !important;
|
|
}
|
|
// .el-table__header {
|
// color: #E6E5E5;
|
// background: transparent;
|
// background-color: transparent;
|
// border-bottom: none;
|
// padding: 0;
|
// }
|
// .el-table__body-wrapper {
|
// color: #E6E5E5;
|
// background: transparent;
|
// background-color: transparent;
|
// border-bottom: none;
|
// padding: 0;
|
// }
|
.el-table__header-wrapper {
|
border: none;
|
border-bottom: none;
|
padding: 0;
|
}
|
}
|
</style>
|
<style lang="scss" scoped>
|
.workshop {
|
width: 100%;
|
height: 100%;
|
color: #FFF;
|
|
.back {
|
margin-left: auto;
|
text-align: center;
|
width: 92px;
|
height: 28px;
|
background: rgba(23, 38, 67, 0.6);
|
border-radius: 50px;
|
border: 1px solid #ddd;
|
border-image: linear-gradient(130deg, rgba(255, 51, 51, 1), rgba(242, 191, 36, 1)) 1 1;
|
;
|
font-size: 12px;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 500;
|
color: #F7F8FA;
|
line-height: 22px;
|
background: linear-gradient(130deg, #FF3333 0%, #F2BF24 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
cursor: pointer;
|
|
}
|
|
.workshop-box {
|
width: 100%;
|
height: 100%;
|
padding: 0 20px;
|
display: flex;
|
|
.left {
|
width: 462px;
|
|
.left_1 {
|
width: 100%;
|
height: 251px;
|
background: url('./img/left_1.png');
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
|
&>div {
|
width: 189px;
|
height: 197px;
|
background: url('./img/circle.png');
|
position: relative;
|
background-size: contain;
|
|
span:first-child {
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
font-size: 26px;
|
font-weight: bold;
|
color: #C3E1E1;
|
}
|
|
span:last-child {
|
position: absolute;
|
left: 50%;
|
bottom: 20%;
|
transform: translate(-50%, -50%);
|
font-size: 18px;
|
color: #C3E1E1;
|
}
|
}
|
}
|
|
.left_2 {
|
margin-top: 16px;
|
width: 100%;
|
height: 324px;
|
background: url('./img/left_2.png');
|
}
|
}
|
|
.center {
|
flex: 1 1 auto;
|
display: flex;
|
flex-direction: column;
|
.center-top {
|
display: flex;
|
justify-content: space-around;
|
|
&>div {
|
position: relative;
|
width: 180px;
|
height: 180px;
|
background: url('./img/yq.png');
|
background-size: contain;
|
|
span.zz {
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
width: 40%;
|
height: 2px;
|
margin-top: -2px;
|
transform: rotate(-220deg);
|
transform-origin: left center;
|
color: #fff;
|
background: #FFF;
|
}
|
|
span.name {
|
font-size: 18px;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 400;
|
color: #C3E1E1;
|
position: absolute;
|
bottom: 0;
|
width: 100%;
|
text-align: center;
|
}
|
}
|
|
&>div:last-child {
|
span.zz {
|
transform: rotate(40deg);
|
}
|
}
|
}
|
|
.center-bottom {
|
flex: 1 1 auto;
|
margin-bottom: 50px;
|
margin-top: 50px;
|
display: flex;
|
justify-content: center;
|
|
img {
|
max-width: 100%;
|
max-height: 100%;
|
}
|
}
|
}
|
|
.right {
|
width: 463px;
|
|
.right_1 {
|
width: 100%;
|
height: 418px;
|
background: url('./img/right_1.png');
|
padding: 0 14px;
|
overflow: hidden;
|
background-size: contain;
|
&>p {
|
font-size: 21px;
|
font-family: PingFangSC, PingFang SC;
|
color: #C3E1E1;
|
line-height: 32px;
|
padding-left: 34px;
|
padding-right: 14px;
|
position: relative;
|
}
|
|
&>p:first-child {
|
margin-top: 32px;
|
margin-bottom: 12px;
|
|
}
|
|
&>p:last-child {
|
margin-top: 14px;
|
margin-bottom: 12px;
|
|
}
|
|
&>p:before {
|
content: '';
|
position: absolute;
|
top: 50%;
|
left: 14px;
|
transform: translateY(-50%);
|
width: 7px;
|
height: 7px;
|
border-radius: 7px;
|
background: linear-gradient(180deg, #9AFEFE 0%, #4B78CD 100%);
|
}
|
|
div.line {
|
margin-top: 14px;
|
height: 0;
|
border-bottom: 1px dashed #C3E1E1;
|
margin-bottom: 14px;
|
}
|
|
ul {
|
list-style: none;
|
display: flex;
|
flex-wrap: wrap;
|
|
li {
|
display: flex;
|
align-items: center;
|
padding: 4px 12px;
|
font-size: 12px;
|
|
img {
|
width: 46px;
|
height: 46px;
|
margin-right: 12px;
|
}
|
}
|
|
li~li {
|
// margin: 0 12px;
|
}
|
}
|
}
|
|
.right_2 {
|
|
margin-top: 16px;
|
width: 100%;
|
height: 208px;
|
background: url('./img/right_2.png');
|
background-size: contain;
|
p {
|
font-size: 16px;
|
color: #F7F8FA;
|
line-height: 22px;
|
padding: 8px 14px;
|
}
|
|
ul {
|
list-style: none;
|
display: flex;
|
flex-wrap: wrap;
|
|
li {
|
flex: 0 0 auto;
|
width: 50%;
|
padding: 14px;
|
}
|
}
|
}
|
|
.right_2 {
|
margin-top: 16px;
|
width: 100%;
|
height: 208px;
|
background: url('./img/right_2.png');
|
background-size: contain;
|
}
|
|
.right_3 {
|
margin-top: 16px;
|
width: 100%;
|
height: 265px;
|
background: url('./img/right_3.png');
|
}
|
}
|
}
|
}
|
|
.img-status {
|
position: absolute;
|
width: 68px;
|
height: 30px;
|
margin-left: 14px;
|
color: #000;
|
font-size: 12px;
|
background: rgba(216, 216, 216, 0.09);
|
border-radius: 15px;
|
text-align: center;
|
}
|
|
.img-status.standby {
|
background: linear-gradient(130deg, #FF3333 0%, #F2BF24 100%);
|
}
|
|
.img-status.run {
|
background: linear-gradient(130deg, #EAF224 0%, #3DF297 100%);
|
}
|
|
.img-status.alerm {
|
background: #FF3333;
|
color: #fff;
|
}
|
</style>
|
