<!--
|
* @Date: 2024-01-06 17:40:19
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-03-11 19:38:21
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/workshop/index.vue
|
-->
|
<template>
|
<div class="workshop">
|
<Nav :name="`车间列表 / ${$route.query.name}`"></Nav>
|
<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: auto;">
|
<el-button :type="concernFlag === '' ? 'primary' : 'ghost'" size="mini"
|
@click="query('')">全部</el-button>
|
<el-button :type="concernFlag === 1 ? 'primary' : 'ghost'" size="mini"
|
@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;display: flex;">
|
<el-input v-model="searchWord" placeholder="请输入关键词"></el-input>
|
<el-button style="margin-left:8px;" type="primary" size="mini" @click="search">搜索</el-button>
|
</div>
|
</template>
|
</Status>
|
<div class="list-box">
|
<div class="list">
|
<Item class="list-item" @toDetail="toDetail(item)" canconcern v-for="item in listFilter" :id="item.id" :info="item" :key="item.id"></Item>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import LeftStatus from '../mapPreview/LeftStatus.vue';
|
import Status from '@/components/newComp/Status';
|
import { getRequest, getUrl } from '@/api/Api'
|
import Item from './device.vue'
|
import Nav from '@/components/nav'
|
export default {
|
components: {
|
Nav,
|
LeftStatus,
|
Status,
|
Item
|
},
|
data() {
|
return {
|
concernFlag: '',
|
searchWord: '',
|
list: [],
|
info: {
|
runRate: '',
|
cutRate: '',
|
alarmRate: '',
|
threeShiftRate: '',
|
twoShiftRate: '',
|
run: '',
|
alarm: '',
|
stop: '',
|
idle: '',
|
},
|
listFilter: []
|
}
|
},
|
watch: {
|
'$route.params.id'() {
|
this.query()
|
}
|
},
|
mounted() {
|
this.query()
|
},
|
methods: {
|
toDetail(v) {
|
window.localStorage.setItem('deviceInfo',JSON.stringify(v))
|
this.$router.push({
|
name: 'mapPreviewDetail',
|
query: {
|
id: v.id,
|
name: this.$route.query.name
|
}
|
})
|
},
|
search () {
|
if (!this.searchWord) return this.query()
|
else {
|
this.listFilter = this.list.filter(item => item.machineName.indexOf(this.searchWord) > -1 )
|
}
|
|
},
|
query(flag) {
|
if (flag !== undefined) {
|
this.concernFlag = flag
|
}
|
getRequest('machineList', {
|
workshopId: this.$route.params.id,
|
concernFlag: this.concernFlag,
|
}).then(res => {
|
console.log(res)
|
this.list = res.data.list
|
this.listFilter = 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 {
|
width: 382px;
|
height: 232px;
|
margin: 10px;
|
}
|
}
|
|
}
|
}
|
|
}
|
}</style>
|
