gaosp
2024-01-16 677697e36b35ff80e3b45bb07a0e008fac8e9bd9
src/container/Map/index.vue
@@ -1,32 +1,22 @@
<!--
 * @Date: 2024-01-05 22:26:22
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-13 23:14:55
 * @LastEditTime: 2024-01-16 00:30:16
 * @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">
            <LeftStatus class="left" :info="info">
                <template>
                    <div @click="editMap" class="edit-btn">
                        {{ id ? '进入编辑状态' : '新增' }}
                    </div>
                    <el-select clearable class="left-select" v-model="id" placeholder="请选择">
        <Map :id="id" :status="status" :currentMap="currentMap" @out="out" :name="plantName">
            <template slot="tool">
                <div class="workshop-tool">
                    <span v-show="id">车间地图:</span>
                    <el-select v-show="id" class="wkshoplist" clearable 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" :status="2" :currentMap="currentMap" @out="out" />
                </div>
            </div>
        </div>
            </template>
        </Map>
    </div>
</template>
<script>
@@ -57,22 +47,22 @@
            } 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
                }
            })
            // 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() {
@@ -81,18 +71,7 @@
            currentMap: [],
            plantName: '',
            mapList: [],
            status: 2, // 0 新增 1编辑 2查看
            info: {
                runRate: '',
                cutRate: '',
                alarmRate: '',
                threeShiftRate: '',
                twoShiftRate: '',
                run: '',
                alarm: '',
                stop: '',
                idle: '',
            }
            status: 1, // 0 新增 1编辑 2查看
        }
    },
    methods: {
@@ -106,20 +85,17 @@
                        this.status = 0
                    }
                    this.id = this.mapList[0].id
                    this.status = 1
                } catch (error) {
                    console.error(error)
                }
            })
        },
        editMap() {
            if (this.id) {
                this.status = 1
            } else {
                this.status = 0
            }
        addMap() {
            this.status = 0
            this.id = ''
        },
        out() {
            this.status = 2
            this.getMapList()
        },
    },
@@ -141,24 +117,18 @@
.workshop {
    width: 100%;
    height: 100%;
    .preview {
        width: 100%;
        height: 100%;
    .workshop-tool {
        // width: 200px;
        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;
            }
        align-items: center;
        span {
            font-size: 12px;
            color: #fff;
            width: 100px;
        }
        .wkshoplist {
            width: 200px;
            margin-right: 20px;
        }
    }
}