통합구현 2022/03/16(Admin)

파일명 components/AdminView.js

<template>
    <div>
        <h3>Admin</h3>
        <hr/>
        대분류
        <table border="1">
            <thead>
                <tr>
                    <th>번호</th>
                    <th>대분류코드</th>
                    <th>전체개수</th>
                    <th>가격합계</th>
                    <th>수량합계</th>
                </tr>
            </thead>

            <tbody>
                <tr v-for="(tmp, idx) in state.items" :key="tmp">
                    <td>{{ idx + 1 }}</td>
                    <td>{{tmp._id}}</td>
                    <td>{{tmp.count}}</td>
                    <td>{{tmp.pricetotal}}</td>
                    <td>{{tmp.quantitytotal}}</td>
                </tr>
            </tbody>
        </table>

        <hr/>
        중분류코드 : <input type="text" v-model="state.code2"/>
        <button @click="handleCode2">조회하기</button>
        <table border="1">
            <thead>
                <tr>
                    <th>번호</th>
                    <th>중분류코드</th>
                    <th>전체개수</th>
                    <th>가격합계</th>
                    <th>수량합계</th>
                </tr>
            </thead>
            
            <tbody>
                <tr v-for="(tmp, idx) in state.items2" :key="tmp">
                    <td>{{ idx + 1 }}</td>
                    <td>{{tmp._id}}</td>
                    <td>{{tmp.count}}</td>
                    <td>{{tmp.pricetotal}}</td>
                    <td>{{tmp.quantitytotal}}</td>
                </tr>                
            </tbody>
        </table>

        <hr/>
        소분류코드 : <input type="text" v-model="state.code3" />
        <button @click="handleCode3">조회하기</button>
        <table border="1">
            <thead>
                <tr>
                    <th>번호</th>
                    <th>소분류코드</th>
                    <th>전체개수</th>
                    <th>가격합계</th>
                    <th>수량합계</th>
                </tr>
            </thead>
            
            <tbody>
                <tr v-for="(tmp, idx) in state.items3" :key="tmp">
                    <td>{{ idx + 1 }}</td>
                    <td>{{tmp._id}}</td>
                    <td>{{tmp.count}}</td>
                    <td>{{tmp.pricetotal}}</td>
                    <td>{{tmp.quantitytotal}}</td>
                </tr>                
            </tbody>
        </table>
    </div>
</template>

<script>
import axios from 'axios';
import { onMounted, reactive, getCurrentInstance } from 'vue';

export default {
    setup () {
        // main.js에 등록했던 변수 가져오기
        const app = getCurrentInstance();
        const socket = app.appContext.config.globalProperties.$socket;
        console.log(socket);

        const state = reactive({
            code2 : '',
            code3 : '',

        })

        const handleData = async()=> {
            const url = `/item/groupcode1`;
            const headers = {"Content-Type":"application/json"};
            const response = await axios.get(url, {headers});
            console.log(response.data);

            if(response.data.status === 200){
                state.items = response.data.result;
            }
        }

        const handleCode2 = async() => {
            const url = `/item/groupcode2?code=${state.code2}`;
            const headers = {"Content-Type":"application/json"};
            const response = await axios.get(url, {headers});
            console.log(response.data);

            if(response.data.status === 200){
                state.items2 = response.data.result;
            }
        }

        const handleCode3 = async() => {
            const url = `/item/groupcode3?code=${state.code3}`;
            const headers = {"Content-Type":"application/json"};
            const response = await axios.get(url, {headers});
            console.log(response.data);

            if(response.data.status === 200){
                state.items3 = response.data.result;
            }
        }

        onMounted(() => {
            handleData();

            socket.on('subscribe', (recv)=>{
                console.log(recv);
                // {userid: 'aaa', username: 'insert'}
                if(recv.username === 'insert'){
                    handleData();
                }
            })
        })

        return { state, handleCode2, handleCode3 }
    }
}
</script>

<style lang="scss" scoped>

</style>

파일명 components/Admin1View.js

<template>
    <div>
        <h3>Admin1</h3>
        
        <vue3-chart-js v-bind="barChart" ref="chartRef"></vue3-chart-js>

    </div>
</template>

<script>
import Vue3ChartJs from '@j-t-mcc/vue3-chartjs';
import axios from 'axios';
import { onMounted, reactive, ref, getCurrentInstance } from 'vue';


export default {
    
    components : {
        Vue3ChartJs
    },

    setup () {     
        const chartRef = ref(0);

        // main.js에 등록했던 변수 가져오기
        const app = getCurrentInstance();
        const socket = app.appContext.config.globalProperties.$socket;
        console.log(socket);

        // 차트 설정
        const barChart = reactive({
            type : "bar",
            options : {
                
            },
            data : {
                labels: [],
                datasets : [
                    {
                        label : "전체개수",
                        backgroundColor : [],
                        data : []
                    },
                    {
                        label : "가격합계",
                        backgroundColor : [],
                        data : []
                    },
                    {
                        label : "수량합계",
                        backgroundColor : [],
                        data : []
                    }
                ],
            }
        });

        const handleData = async()=> {
            const url = `/item/groupcode1`;
            const headers = {"Content-Type":"application/json"};
            const response = await axios.get(url, {headers});
            console.log(response.data);
            
            // [{},{},{}] => [] 이렇게 만들줄 알아야함
            if(response.data.status === 200){
                // _id만 가져와서 보관 하기 위해서
                const arr1 = []; // ['101','102'....]

                // 전체 개수를 보관하기 위해
                const arr2 = []; //[4,4,5...]
                const arr2color = [];

                // 가격 합계 보관
                const arr3 = []; 
                const arr3color = [];
                // 수량 합계 보관
                const arr4 = []; 
                const arr4color = [];

                for(let tmp of response.data.result){
                    console.log(tmp);
                    arr1.push(tmp._id);

                    arr2.push(tmp.count);
                    arr2color.push('#1abc9c');

                    arr3.push(tmp.pricetotal);
                    arr3color.push('#cf4e4e');

                    arr4.push(tmp.quantitytotal);
                    arr4color.push('#4e95cf');
                }
                console.log(arr1);

                // 라벨
                barChart.data.labels = arr1;
                // 전체 개수
                barChart.data.datasets[0].backgroundColor = arr2color;
                barChart.data.datasets[0].data = arr2;
                // 가격 합계
                barChart.data.datasets[1].backgroundColor = arr3color;
                barChart.data.datasets[1].data = arr3;
                // 수량 합계
                barChart.data.datasets[2].backgroundColor = arr4color;
                barChart.data.datasets[2].data = arr4;

                chartRef.value.update(200);
            }
        }

        onMounted(() => {
            handleData();

            socket.on('subscribe', (recv)=>{
                console.log(recv);
                // {userid: 'aaa', username: 'insert'}
                if(recv.username === 'insert'){
                    handleData();
                }
            })
        })

        return { barChart, chartRef }
    }
}
</script>

<style lang="scss" scoped>

</style>