Project.vue

<template>
    <v-card 
        width="100%"
        height="850px"
        class="elevation-0 "
    >    
        <v-card-title class="blue-grey white--text ">PROJECT</v-card-title>
            <v-container>
                <v-row>
                    <v-col cols="4">
                        <v-card
                            :class="step === 0 ?'elevation-12':'elevation-0'"
                            :color="step === 0 ? '' : 'grey lighten-2'"
                            class="d-flex justify-center align-center"
                            height="740"
                        >
                            <v-row
                                class="fill-height"
                                align-content="center"
                                justify="center"
                            >
                                <v-col
                                    class="text-center"
                                    cols="12"
                                >
                                    <span v-if="step > 0" class="text-h4">블루투스 연결 <v-icon color="success"  class="pb-4" x-large>mdi-check-bold</v-icon> </span>                                        
                                    <span v-else class="text-h4 "><strong>블루투스</strong>를 연결해주세요</span>
                                </v-col>
                                <v-col v-if="step === 0" cols="8">
                                    <v-progress-linear
                                        color="blue-grey"
                                        indeterminate
                                        rounded
                                        height="8"
                                    ></v-progress-linear>
                                </v-col>
                            </v-row>
                        </v-card>
                    </v-col>
                    <v-col cols="4">
                        <v-card
                            :class="step === 1 ?'elevation-12':'elevation-0'"
                            :color="step === 1 ? '' : 'grey lighten-2'"
                            class="d-flex justify-center align-center "
                            height="740"
                        >
                            <v-row
                                class="fill-height"
                                align-content="center"
                                justify="center"
                            >
                                <v-col
                                    class="text-center"
                                    cols="12"
                                >
                                    <span v-if="step > 1" class="text-h4">데이터 연동<v-icon color="success" class="pb-4" x-large>mdi-check-bold</v-icon> </span>                                        
                                    <div v-else class="text-h4 "><strong>서버</strong>와 DB 연동</div>
                                    <!-- <p class="text-h4 "><strong>S/N : {{id}}</strong></p></div> -->
                                </v-col>
                                <v-col v-if="step === 1" cols="8">
                                    <v-progress-linear
                                        color="blue-grey"
                                        indeterminate
                                        rounded
                                        height="8"
                                    ></v-progress-linear>
                                </v-col>
                            </v-row>
                        </v-card>
                    </v-col>
                    <v-col cols="4">
                        <v-card
                            :class="step === 2 ?'elevation-12':'elevation-0'"
                            :color="step === 2 ? '' : 'grey lighten-2'"
                            class="d-flex justify-center align-center"
                            height="740"
                        >
                            <v-row
                                class="fill-height"
                                align-content="center"
                                justify="center"
                            >
                                <v-col
                                    class="text-center"
                                    cols="12"
                                >
                                
                                    <span v-if="step > 2" class="text-h4">세팅 초기화<v-icon color="success"  class="pb-4" x-large>mdi-check-bold</v-icon> </span>                                        
                                    <span v-else class="text-h4 "><strong>세팅</strong> 초기화</span>
                                </v-col>
                                <v-col v-if="step === 2" cols="8">
                                    <v-progress-linear
                                        color="blue-grey"
                                        indeterminate
                                        rounded
                                        height="8"
                                    ></v-progress-linear>
                                </v-col>
                            </v-row>
                        </v-card>
                    </v-col>
                </v-row>
            </v-container>
    </v-card>
</template>

<script>
import wpoService from '@/service/wpo'
import managerService from '@/service/manager'
import projectService from '@/service/project'

import projectGQL from '@/gql/project'
import aoiGQL from '@/gql/aoi'

import { mapActions } from 'vuex'

import { EventBus } from '@/event-bus'

export default {
    data () {
      return {
            message: '준비중...',
            step:0,
            id:'',
        }
    },

    props: {
        project: Object,
    },

    created(){
        this.getAoi()
        this.getAois()
        this.network()
    },

    methods: {
        ...mapActions([
            'getAois',
        ]),

        async getAoi(){
            let id = await wpoService.getWpoId()  //웹서버에 지정한 WPO ID 가져오기
            this.id = id
        },

        async network(){
            EventBus.$emit('openBluetooth')

            try{
                const msg  = new Object()
                msg.cmd = "network_check"
                let response = await managerService.request(msg)
                if(JSON.parse(response.data).status){
                    EventBus.$emit('closeBluetooth')
                    setTimeout(() => {
                        this.step = 1 
                    }, 3000);
                }else{
                    this.network()
                }    
            }catch(e){
                // EventBus.$emit('openAlert',`${e.message}`, 'error')
            }
        },


        async projectUpdate(){
            let result = await projectGQL.update(this.project)

            if(result){ 
                projectService.save({})
                setTimeout(() => {
                    this.step = 2 
                }, 3000);
            }
        },

        async aoiInit(){
            let aoi = this.$store.state.aoi.aois.filter( aoi => { return aoi.serial === this.id } )
            
            let result = await aoiGQL.updateAoi(aoi[0])

            if(Object.keys(result).length !== 0){
                setTimeout(() => {
                    this.step = 2 
                    EventBus.$emit('setInit')
                }, 3000);
            } 
        },

    },

    watch:{
        async step(current) {
            switch(current) {
                case 1:
                    this.projectUpdate()
                break;

                case 2:
                    this.aoiInit()
                break;
            }
        }
    }
}
</script>

<style>

</style>