<!--
|
* @Date: 2024-01-13 20:46:33
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-03-10 15:07:26
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/workshop/device.vue
|
-->
|
<template>
|
<div class="device-item">
|
<el-checkbox v-show="canconcern" class="care" v-model="concern" @change="change"></el-checkbox>
|
<p>{{ machineName }}</p>
|
<div class="device-item-box" @click="toDetail">
|
<div class="img">
|
<span class="img-status" v-if="item.status === 'STOP'">停机</span>
|
<span class="img-status run" v-if="item.status === 'RUN'">运行</span>
|
<span class="img-status standby" v-if="item.status === 'IDLE'">待机</span>
|
<span class="img-status alerm" v-if="item.status === 'ALARM'">报警</span>
|
<img :src="pic || devicePng" alt="">
|
</div>
|
<ul>
|
<li>
|
<img src="./img/sd.png" alt="">
|
<div>
|
<p>{{ efficiency }}</p>
|
<p>能力利用率</p>
|
</div>
|
</li>
|
<li>
|
<img src="./img/sd.png" alt="">
|
<div>
|
<p>{{ utilizationDaily }}</p>
|
<p>日利用率</p>
|
</div>
|
</li>
|
<li>
|
<img src="./img/sd.png" alt="">
|
<div>
|
<p>{{ info.cycleCount }}</p>
|
<p>完工件数</p>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { getRequest, getUrl } from '@/api/Api'
|
import devicePng from './img/machine.png'
|
export default {
|
props: {
|
canconcern: {
|
type: Boolean,
|
default: false
|
},
|
id: {
|
type: [String, Number]
|
},
|
info: {
|
type: Object,
|
default: function () {
|
return {}
|
}
|
},
|
deviceList: {
|
type: Array,
|
default: function () {
|
return []
|
}
|
},
|
plantDeviceList: {
|
type: Array,
|
default: function () {
|
return []
|
}
|
}
|
},
|
data() {
|
return {
|
devicePng,
|
scale: 1,
|
concern: false,
|
item: {}
|
}
|
},
|
computed: {
|
efficiency() {
|
return this.info.efficiency || 0
|
},
|
utilizationDaily() {
|
return this.info.utilizationDaily || 0
|
},
|
cycleCount() {
|
return this.info.cycleCount || 0
|
},
|
machineName() {
|
let machineName = ''
|
if (this.info.machineName) return this.info.machineName
|
if (this.plantDeviceList.length > 0) {
|
try {
|
machineName = this.plantDeviceList.find(item => item.machineId === this.id).machineName
|
} catch (error) {
|
// console.info(error)
|
}
|
}
|
if (this.deviceList.length > 0) {
|
try {
|
machineName = this.deviceList.find(item => item.machineId === this.id).machineName
|
} catch (error) {
|
// console.info(error)
|
}
|
}
|
|
|
if (machineName) {
|
return machineName
|
}
|
return ''
|
},
|
pic() {
|
let pic = ''
|
if (this.info.pic) return this.info.pic
|
if (this.plantDeviceList.length > 0) {
|
try {
|
pic = this.plantDeviceList.find(item => item.machineId === this.id).pic
|
} catch (error) {
|
}
|
}
|
if (this.deviceList.length > 0) {
|
try {
|
pic = this.deviceList.find(item => item.machineId === this.id).pic
|
} catch (error) {
|
}
|
}
|
|
if (pic) {
|
return pic
|
}
|
return ''
|
}
|
},
|
mounted () {
|
this.concern = !!this.info.concern
|
console.log(this.$el.getBoundingClientRect().width,'/////',this.$el.getBoundingClientRect().width / 200)
|
this.$nextTick(() => {
|
//if (this.$el.getBoundingClientRect().width < 400) {
|
//this.$el.querySelector('.device-item-box').style = `transform:scale(${this.$el.getBoundingClientRect().width / 360})`
|
//}
|
})
|
|
|
|
},
|
methods: {
|
toDetail () {
|
this.$emit('toDetail')
|
},
|
change(val) {
|
console.log(val)
|
getRequest('machineConcern', { concern: val ? 1 : 0, id: this.id }).then(res => {
|
console.log(res)
|
})
|
},
|
getInfo() {
|
this.item = {}
|
}
|
},
|
}
|
</script>
|
<style lang="scss" scoped>
|
.device-item {
|
width: 100%;
|
height: 100%;
|
max-width: 394px;
|
max-height: 394px;
|
border-radius: 10px;
|
border: 1px solid #3C4249;
|
padding: 20px;
|
display: flex;
|
flex-direction: column;
|
position: relative;
|
p {
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
.care {
|
position: absolute;
|
right: 5px;
|
top: 5px;
|
z-index: 999;
|
}
|
|
&>p {
|
color: #E9FFFF;
|
text-shadow: 0px 1px 11px #549BD4;
|
background: linear-gradient(180deg, #9AFEFE 0%, #4B78CD 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
text-align: center;
|
position: relative;
|
}
|
|
&>p:before {
|
content: '';
|
position: absolute;
|
z-index: 0;
|
top: 50%;
|
left: 0;
|
transform: translateY(-50%);
|
width: 30px;
|
height: 1px;
|
background: linear-gradient(270deg, #65A5D6 0%, rgba(11, 70, 115, 0) 100%);
|
}
|
|
&>p:after {
|
content: '';
|
position: absolute;
|
top: 50%;
|
right: 0;
|
transform: translateY(-50%);
|
width: 30px;
|
height: 1px;
|
background: linear-gradient(90deg, #65A5D6 0%, rgba(11, 70, 115, 0) 100%);
|
}
|
|
&>div.device-item-box {
|
min-width: 100px;
|
flex: 1 1 auto;
|
margin-top: 20px;
|
display: flex;
|
align-items: center;
|
margin-bottom: 20px;
|
|
overflow: hidden;
|
|
.img {
|
// min-width: 100px;
|
width: 50%;
|
height: 100%;
|
border: 1px solid #444C55;
|
border-radius: 10px;
|
position: relative;
|
|
.img-status {
|
position: absolute;
|
font-size: 12px;
|
right: 10px;
|
top: 10px;
|
background: rgba(216, 216, 216, 0.09);
|
border-radius: 11px;
|
// border: 1px solid #FFFFFF;
|
padding: 5px 10px;
|
}
|
|
.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;
|
}
|
|
img {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
width: 80%;
|
}
|
}
|
|
ul {
|
flex: 1 1 auto;
|
height: 100%;
|
margin-left: 20px;
|
list-style: none;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-around;
|
|
li {
|
width: 100%;
|
display: flex;
|
font-size: 12px;
|
align-items: center;
|
|
&>div {
|
margin-left: 20px;
|
;
|
}
|
|
p {
|
color: #E9FFFF;
|
text-shadow: 0px 1px 11px #549BD4;
|
}
|
|
img {
|
width: 40px;
|
height: 40px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
