<!--
|
* @Date: 2024-01-05 22:26:22
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-01-12 22:37:43
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/Map/index.vue
|
-->
|
<template>
|
<div class="workshop">
|
<Map v-if="status===0 || status === 1 && id" :status="status" :currentMap="currentMap" :name="plantName" :id="id" @out="out" />
|
<div v-else class="preview">
|
<div class="left">
|
<div @click="editMap" class="edit-btn">
|
{{id ? '进入编辑状态' : '新增'}}
|
</div>
|
<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>
|
<div class="left-item left-1">
|
<div>44%</div>
|
<div>开机率</div>
|
</div>
|
<div class="left-item left-2">
|
<div>44%</div>
|
<div>故障率</div>
|
</div>
|
<div class="left-item left-3">
|
<div>44%</div>
|
<div>切削率</div>
|
</div>
|
<div class="left-item left-4">
|
<div>44%</div>
|
<div>二班开工率</div>
|
</div>
|
<div class="left-item left-5">
|
<div>44%</div>
|
<div>三班开工率</div>
|
</div>
|
</div>
|
<div class="right">
|
<Status v-show="false"/>
|
<div class="preview-map">
|
<Map v-if="id" :status="2" :currentMap="currentMap" @out="out" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import Map from './Map.vue'
|
import Status from '@/components/newComp/Status'
|
export default {
|
components: {
|
Map,
|
Status
|
},
|
watch: {
|
id (val) {
|
if (!val) {
|
this.currentMap = ''
|
this.plantName = ''
|
return
|
}
|
this.currentMap = JSON.parse(this.mapList.find(item => item.id ===this.id).gridSetting)
|
this.plantName = this.mapList.find(item => item.id ===this.id).name
|
}
|
},
|
data () {
|
return {
|
id: '',
|
currentMap: [],
|
plantName: '',
|
mapList: [],
|
status: 2, // 0 新增 1编辑 2查看
|
}
|
},
|
methods: {
|
getMapList() {
|
this.$store.dispatch('GetPlanList', {}).then(res => {
|
this.mapList = res.data.filter (v => v.gridSetting && v.gridSetting!='{}')
|
if (this.mapList.length === 0) {
|
this.status = 0
|
} else {
|
this.status = 2
|
}
|
})
|
},
|
editMap () {
|
if (this.id) {
|
this.status = 1
|
} else {
|
this.status = 0
|
}
|
},
|
out () {
|
this.status = 2
|
this.getMapList()
|
},
|
},
|
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;
|
.left {
|
flex: 0 0 auto;
|
width: 194px;
|
height: 100%;
|
margin-left: 20px;
|
background: url('./img//left_icon.png') 100% center no-repeat;
|
.edit-btn {
|
margin-top: 20px;
|
color: #C6DCE0;
|
text-align: center;
|
line-height: 38px;
|
width: 150px;
|
height: 38px;
|
background: url('./img//btn.png') 100% center no-repeat;
|
background-size: contain;
|
font-size: 16px;
|
cursor: pointer;
|
}
|
.left-select {
|
margin-top: 20px;
|
width: 150px;
|
}
|
.left-item:first-child {
|
margin-top: 138px;
|
}
|
.left-item {
|
margin-top: 20px;
|
width: 138px;
|
height: 138px;
|
background: url('./img/left_1.png') 0 0 no-repeat;
|
background-size: contain;
|
color: #D6EEEF;
|
position: relative;
|
& > div:first-child {
|
font-size: 23px;
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%,-50%);
|
}
|
& > div:last-child {
|
font-size: 12px;
|
position: absolute;
|
left: 50%;
|
bottom: 25px;
|
transform: translate(-50%,-50%);
|
}
|
}
|
.left-2 {
|
background-image: url('./img/left_2.png');
|
}
|
.left-3 {
|
background-image: url('./img/left_3.png');
|
}
|
.left-4 {
|
background-image: url('./img/left_4.png');
|
}
|
.left-5 {
|
background-image: url('./img/left_5.png');
|
}
|
}
|
.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>
|
