update

gaosp

2024-01-16 f5c206358932991d6d6f125185078a46ae842617

 src/container/Map/index.vue

@@ -1,21 +1,135 @@
<!--
 * @Date: 2024-01-05 22:26:22
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-05 23:12:49
 * @LastEditTime: 2024-01-16 00:30:16
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/Map/index.vue
-->
<template>
    <div style="color: red">车间地图</div>
    <div class="workshop">
        <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>
                </div>
            </template>
        </Map>
    </div>
</template>
<script>
    export default {
        methods: {
            getMapList() {
                this.$post('')
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: 1, // 0 新增 1编辑 2查看
        }
    },
    methods: {
        getMapList() {
            // this.$store.dispatch('GetPlanList', {})

            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
                    this.status = 1
                } catch (error) {
                    console.error(error)
                }
            })
        },
        mounted () {
        addMap() {
            this.status = 0
            this.id = ''
        },
        out() {
            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%;
    .workshop-tool {
        // width: 200px;
        display: flex;
        align-items: center;
        span {
            font-size: 12px;
            color: #fff;
            width: 100px;
        }
        .wkshoplist {
            width: 200px;
            margin-right: 20px;
        }
    }
</script>
}
</style>