<!--
|
* @Date: 2024-01-05 22:26:22
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-01-16 22:50:48
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/mapPreview/index.vue
|
-->
|
<template>
|
<div class="workshop">
|
<div class="preview">
|
<LeftStatus class="left" :info="info">
|
<template>
|
<el-select clearable class="left-select" v-model="id" placeholder="请选择">
|
<el-option v-for="item in mapList" :key="item.id" :label="item.name" :value="item.id">
|
</el-option>
|
</el-select>
|
</template>
|
</LeftStatus>
|
<div class="right">
|
<Status v-show="id" :info="info" />
|
<div class="preview-map">
|
<Map v-if="id" :id="id" :status="2" :currentMap="currentMap" @out="out" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import Map from './Map.vue';
|
import Status from '@/components/newComp/Status'
|
import LeftStatus from './LeftStatus.vue'
|
import { getRequest, getUrl } from '@/api/Api'
|
import { mapGetters } from 'vuex'
|
|
export default {
|
components: {
|
Map,
|
Status,
|
LeftStatus
|
},
|
computed: {
|
...mapGetters(['workshopList'])
|
},
|
watch: {
|
id(val) {
|
if (!val) {
|
this.currentMap = ''
|
this.plantName = ''
|
return
|
}
|
try {
|
this.currentMap = JSON.parse(this.mapList.find(item => item.id === this.id).gridSetting)
|
this.plantName = this.mapList.find(item => item.id === this.id).name
|
} catch (error) {
|
|
}
|
getRequest('machineList', {
|
plantId: this.id,
|
}).then(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
|
}
|
})
|
}
|
},
|
data() {
|
return {
|
id: '',
|
currentMap: [],
|
plantName: '',
|
mapList: [],
|
status: 2, // 0 新增 1编辑 2查看
|
info: {
|
runRate: '',
|
cutRate: '',
|
alarmRate: '',
|
threeShiftRate: '',
|
twoShiftRate: '',
|
run: '',
|
alarm: '',
|
stop: '',
|
idle: '',
|
}
|
}
|
},
|
methods: {
|
getMapList() {
|
this.$store.dispatch('GetPlanList', {}).then(res => {
|
try {
|
this.mapList = this.workshopList.filter(v => v.gridSetting && v.gridSetting != '{}')
|
if (this.mapList.length === 0) {
|
this.status = 0
|
}
|
this.id = this.mapList[0].id
|
} catch (error) {
|
console.error(error)
|
}
|
})
|
},
|
},
|
mounted() {
|
this.getMapList()
|
}
|
}
|
</script>
|
<style lang="scss">
|
.left-select {
|
.el-input__inner {
|
background: #435F9E;
|
color: #C6DCE0;
|
border: none;
|
}
|
}
|
</style>
|
<style lang="scss" scoped>
|
.workshop {
|
width: 100%;
|
height: 100%;
|
|
.preview {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
|
.right {
|
width: calc(100% - 194px);
|
padding-top: 30px;
|
flex: 0 1 auto;
|
display: flex;
|
flex-direction: column;
|
|
.preview-map {
|
margin-top: 20px;
|
flex: 1 1 auto;
|
overflow: hidden;
|
}
|
}
|
}
|
}
|
</style>
|
