<!--
|
* @Date: 2024-01-13 20:46:33
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-01-13 21:37:22
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/workshop/device.vue
|
-->
|
<template>
|
<div class="device-item">
|
<el-checkbox class="care" v-model="care" @change="change"></el-checkbox>
|
<p>YKX123123213</p>
|
<div class="device-item-box">
|
<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="./img/machine.png" alt="">
|
</div>
|
<ul>
|
<li>
|
<img src="./img/sd.png" alt="">
|
<div>
|
<p>{{ item.cycleCount }}</p>
|
<p>能力利用率</p>
|
</div>
|
</li>
|
<li>
|
<img src="./img/sd.png" alt="">
|
<div>
|
<p>{{ item.cycleCount }}</p>
|
<p>日利用率</p>
|
</div>
|
</li>
|
<li>
|
<img src="./img/sd.png" alt="">
|
<div>
|
<p>{{ item.cycleCount }}</p>
|
<p>完工件数</p>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { getRequest,getUrl } from '@/api/Api'
|
export default {
|
props: ['item'],
|
data () {
|
return {
|
care: false,
|
}
|
},
|
methods: {
|
change (val) {
|
console.log(val)
|
getRequest('machineConcern',{concern: val ? 1 : 0,id: this.item.id}).then(res => {
|
console.log(res)
|
})
|
}
|
},
|
}
|
</script>
|
<style lang="scss" scoped>
|
.device-item {
|
width: 394px;
|
height: 321px;
|
border-radius: 10px;
|
border: 1px solid #3C4249;
|
padding: 20px;
|
display: flex;
|
flex-direction: column;
|
position: relative;
|
.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;
|
top: 50%;
|
left: 0;
|
transform: translateY(-50%);
|
width: 60px;
|
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: 60px;
|
height: 1px;
|
background: linear-gradient(90deg, #65A5D6 0%, rgba(11,70,115,0) 100%);
|
}
|
&>div.device-item-box {
|
flex: 1 1 auto;
|
margin-top: 20px;
|
display: flex;
|
align-items: center;
|
margin-bottom: 20px;
|
|
overflow: hidden;
|
|
.img {
|
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>
|
