<!--
|
* @Date: 2024-01-06 17:40:19
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-01-13 22:21:35
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/workshop/index.vue
|
-->
|
<template>
|
<div class="workshop">
|
<div class="nav">车间列表 / {{ this.$route.query.name }}</div>
|
<div class="workshop-box">
|
<LeftStatus :info="info" />
|
<div class="right">
|
<Status class="right-status" :info="info" style="justify-content: flex-start;">
|
<template slot="before">
|
<div style="margin-right: 200px;">
|
<el-button type="primary" size="mini" :class="concernFlag === 0 ? 'active' : ''"
|
@click="query(0)">全部</el-button>
|
<el-button type="primary" size="mini" :class="concernFlag === 1 ? 'active' : ''"
|
@click="query(1)">关注</el-button>
|
<!-- <el-button type="primary" size="mini" style="margin-right: auto;">我的关注</el-button> -->
|
</div>
|
</template>
|
<template slot="after">
|
<div style="margin-left: auto;margin-right: 20px;">
|
<el-input v-model="searchWord" placeholder="请输入关键词"></el-input>
|
</div>
|
</template>
|
</Status>
|
<div class="list-box">
|
<div class="list">
|
<Item v-for="item in list" :item="item" :key="item.id"></Item>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import LeftStatus from '../Map/LeftStatus.vue';
|
import Status from '@/components/newComp/Status';
|
import { getRequest, getUrl } from '@/api/Api'
|
import Item from './device.vue'
|
export default {
|
components: {
|
LeftStatus,
|
Status,
|
Item
|
},
|
data() {
|
return {
|
concernFlag: 0,
|
searchWord: '',
|
list: [],
|
info: {
|
runRate: '',
|
cutRate: '',
|
alarmRate: '',
|
threeShiftRate: '',
|
twoShiftRate: '',
|
run: '',
|
alarm: '',
|
stop: '',
|
idle: '',
|
}
|
}
|
},
|
watch: {
|
'$route.params.id'() {
|
this.query()
|
}
|
},
|
mounted() {
|
this.query()
|
},
|
methods: {
|
query(flag) {
|
if (flag !== undefined) {
|
this.concernFlag = flag
|
}
|
getRequest('machineList', {
|
plantId: this.$route.params.id,
|
concernFlag: this.concernFlag,
|
}).then(res => {
|
console.log(res)
|
this.list = res.data.list
|
this.info = {
|
runRate: res.data.runRate,
|
cutRate: res.data.cutRate,
|
alarmRate: res.data.alarmRate,
|
threeShiftRate: res.data.threeShiftRate,
|
twoShiftRate: res.data.twoShiftRate,
|
run: res.data.run,
|
alarm: res.data.alarm,
|
stop: res.data.stop,
|
idle: res.data.idle
|
}
|
})
|
}
|
},
|
}
|
</script>
|
<style lang="scss" scoped>
|
.workshop {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
color: #FFF;
|
display: flex;
|
flex-direction: column;
|
|
.nav {
|
padding: 10px 30px;
|
font-size: 14px;
|
}
|
|
.workshop-box {
|
width: 100%;
|
height: 100%;
|
flex: 1 1 auto;
|
display: flex;
|
|
.right {
|
width: 100%;
|
height: 100%;
|
flex: 1 1 auto;
|
display: flex;
|
flex-direction: column;
|
.right-status {
|
margin-bottom: 20px;
|
}
|
.list-box {
|
width: 100%;
|
height: 100%;
|
overflow: auto;
|
flex: 1 1 auto;
|
// border: 1px solid red;
|
padding: 20px;
|
.list {
|
display: flex;
|
flex-wrap: wrap;
|
width: 100%;
|
&>div {
|
margin: 10px;
|
}
|
}
|
|
}
|
}
|
|
}
|
}</style>
|
