duoji-frontend/src/views/checkManage/index.vue

<template>
    <div class="check-page">
        <div class="button-box">
            
            <a-popconfirm
                title="是否清空全部盘点"
                ok-text="是"
                cancel-text="否"
                @confirm="allStockClear"
            >
                <a-button type="primary" class="export-all">
                    盘点清空
                </a-button>
            </a-popconfirm>
            <a-popconfirm
                title="是否确定要全部盘点"
                ok-text="是"
                cancel-text="否"
                @confirm="allStockCheck"
            >
                <a-button type="primary" class="export-all">
                    全部盘点
                </a-button>
            </a-popconfirm>

            <a-button type="primary" @click="exportStock" class="export-all">
                导出巷道盘点数据
            </a-button>
            <a-button type="primary" @click="exportAllStock" class="export-all">
                导出全部巷道盘点数据
            </a-button>
        </div>
        <div class="title-info">
            <span class="explain">颜色说明：</span>
            <span class="info-text">
                <a-tag
                    color="#d81e06"
                    style="width: 30px; height: 20px; margin-right: 6px"
                ></a-tag>
                盘点错误
            </span>
            <span class="info-text">
                <a-tag
                    color="#1afa29"
                    style="width: 30px; height: 20px; margin-right: 6px"
                ></a-tag>
                盘点正确
            </span>
            <!-- <span class="info-text">
                <a-tag
                    color="#f2ed48"
                    style="width: 30px; height: 20px; margin-right: 6px"
                ></a-tag>
                需盘点
            </span> -->
            <span class="info-text">
                <a-tag
                    color="#bfbfbf"
                    style="width: 30px; height: 20px; margin-right: 6px"
                ></a-tag>
                未盘点
            </span>
        </div>

        <div style="margin: 10px">
            <a-select
                @change="handleChange"
                style="width: 200px"
                v-model="select"
            >
                <a-select-option v-for="i in data" :key="i.name" :value="i.id">
                    {{ i.name }}
                    <a-icon type="exclamation-circle" theme="filled"  v-if="i.statusCount> 0"  style="color: #f3e73f;  text-align: right;"/>
                </a-select-option>
            </a-select>
        </div>

        <a-col :span="24">
            <!--左货架DOM-->
            <div class="center-box">
                <span class="shelf-number"> 左侧货架 </span>

                <a-radio-group
                    v-model="leftSide"
                    style="margin: 10px 0"
                    v-if="streetDetail.leftType == 1"
                >
                    <a-radio-button :value="1"> 浅侧货架 </a-radio-button>
                    <a-radio-button :value="2"> 深侧货架 </a-radio-button>
                </a-radio-group>
            </div>

            <div class="check-content" v-for="item in data" :key="item.id">
                <subsection
                    v-if="item.id == select"
                    :total="{ row: item.leftRow, column: item.leftColumn }"
                    :side="leftSide"
                    :direction="1"
                    :streetId="item.id"
                    :streetName="item.name"
                >
                </subsection>
            </div>

            <!--单伸类型右货架DOM-->
            <div class="center-box">
                <span class="shelf-number"> 右侧货架 </span>

                <a-radio-group
                    v-model="rightSide"
                    style="margin: 10px 0"
                    v-if="streetDetail.rightType == 1"
                >
                    <a-radio-button :value="1"> 浅侧货架 </a-radio-button>
                    <a-radio-button :value="2"> 深测货架 </a-radio-button>
                </a-radio-group>
            </div>

            <div class="check-content" v-for="item in data" :key="item.name">
                <subsection
                    v-if="item.id == select"
                    :total="{ row: item.rightRow, column: item.rightColumn }"
                    :side="rightSide"
                    :direction="2"
                    :streetId="item.id"
                    :streetName="item.name"
                >
                </subsection>
            </div>
        </a-col>
        <!-- websocket推送信息 -->
        <!-- <a-col :span="6" style="height: 80vh; overflow-y: scroll">
            <a-timeline style="margin: 20px">
                <a-timeline-item v-for="i in wsData" :key="i.id">{{
        getWsData(i)}}</a-timeline-item>
            </a-timeline></a-col
        > -->
    </div>
</template>
<script>
import Subsection from "./Subsection";
import message from "ant-design-vue";

export default {
    name: "checkManage",
    data() {
        return {
            timer: "",
            leftSide: 1,
            rightSide: 1,
            data: [],
            wsData: [],
            select: "",
            streetId: 0,
            streetDetail: {},
            streetStockStatusMap:{},
        };
    },
    computed: {},

    mounted() {
        this.request();
        
    },
    created() {},
    activated() {
        if (!this.$route.meta.isUseCache) {
            console.log("$route.meta.isUseCache false");
            // 清空原有数据
            this.request(); // 这是我们获取数据的函数
        } else {
            console.log("$route.meta.isUseCache true");
            //this.request();
        }
    },

    created() {
        this.initWebSocket();
        
        this.timerRequestData = window.setInterval(this.requestData, 10000);
        //设置定时器,注意：只有在 created 生命周期中设置的定时器 才能在beforeDestroy 中销毁
        this.timer = window.setInterval(() => {
            setTimeout(this.pollingFunc(), 0);
        }, 2000);
    },
    beforeDestroy(){
        clearInterval(this.timerRequestData);
    },
    destroyed() {
        this.websock.close(); //离开路由之后断开websocket连接
    },
    methods: {
        //获取巷道列表
        requestData() {
            this.$api.httpApi
                .getAllStreetStock({})
                .then((res) => {
                    console.log("update data");
                    console.log(res)
                    for (let i = 0; i < res.data.length; i++) {
                        this.$set(this.data, i, res.data[i]);
                    }
                    //this.select = res.data[0].id;
                    //this.selectName = res.data[0].name;
                    //this.$set(this.select,res.data.list[0].id,0)
                    //this.getStreetDetail(this.select);
                })
                .catch((err) => {});
        },
        //获取巷道列表
        request() {
            this.$api.httpApi
                .getAllStreet({})
                .then((res) => {
                    console.log("update data");
                    console.log(res)
                    for (let i = 0; i < res.data.length; i++) {
                        this.$set(this.data, i, res.data[i]);
                    }
                    this.select = res.data[0].id;
                    this.selectName = res.data[0].name;
                    //this.$set(this.select,res.data.list[0].id,0)
                    this.getStreetDetail(this.select);
                })
                .catch((err) => {});
        },
        //获取巷道列表
        getWsData(e) {
            console.log(e)
            console.log(this.wsData)
            console.log( e.message.streetName + (e.message.fromDirection == 1 ?"左侧":"右侧") + e.message.fromRow +"行" +e.message.fromColumn + "列" + (e.message.separation1 == 2 ?"外侧货架":"内侧货架")+"发生盘点")
            return ( e.message.streetName + (e.message.fromDirection == 1 ?"左侧":"右侧") + e.message.fromRow +"行" +e.message.fromColumn + "列" + (e.message.separation1 == 2 ?"外侧货架":"内侧货架")+"发生盘点")
        },
        //获取巷道详情
        getStreetDetail(id) {
            this.$axios
                .get("/street/" + id, {
                    data: {},
                })
                .then((res) => {
                    this.streetDetail = res.data;
                    //this.getStockRowColumn()
                })
                .catch((err) => {});
        },

        handleChange(value) {
            this.select = value;

            this.getStreetDetail(value);
        },

        exportStock() {
            this.$api.httpApi
                .exportStock({
                    params: {
                        streetId: this.select,
                    },
                })
                .then((res) => {
                    let blob = new Blob([res], {
                        type: "application/vnd.ms-excel",
                    });
                    this.$utils.downloadFile(
                        this.streetDetail.name + "-盘点列表.xls",
                        blob
                    );
                })
                .catch((err) => {});
        },
        exportAllStock() {
            this.$utils.downloadFileUrl("盘点列表.xls", "/api/stock/exportAll");
        },
        allStockCheck() {
            console.log("全部盘点");
            this.$api.httpApi
                .allStockCheck({})
                .then((res) => {
                    message.success("全部盘点完成", 10);
                })
                .catch((err) => {});
        },
        allStockClear() {
            console.log("清空盘点");
            this.$api.httpApi
                .allStockClear({})
                .then((res) => {
                    message.success("盘点清空", 10);
                })
                .catch((err) => {});
        },
        // initWebSocket() {
        //     //初始化weosocket
        //     const wsuri = "ws://127.0.0.1:8099/ws/111";
        //     this.websock = new WebSocket(wsuri);
        //     this.websock.onmessage = this.websocketonmessage;
        //     this.websock.onopen = this.websocketonopen;
        //     this.websock.onerror = this.websocketonerror;
        //     this.websock.onclose = this.websocketclose;
        // },
        // websocketonopen() {
        //     //连接建立之后执行send方法发送数据
        //     this.websocketsend(JSON.stringify(actions));
        // },
        // websocketonerror() {
        //     //连接建立失败重连
        //     this.initWebSocket();
        // },
        // websocketonmessage(e) {
        //     console.log("aaaa");
        //     var el = JSON.parse(e.data)
        //     console.log(el.type);

        //     if (el.type == "InventoryPush") {
        //         this.wsData.push(el);
        //     }
        //     //数据接收
        //     const redata = JSON.parse(e.data);
        // },
        // websocketsend(Data) {
        //     //数据发送
        //     this.websock.send(Data);
        // },
        // websocketclose(e) {
        //     //关闭
        //     console.log("断开连接", e);
        // },
    },
    components: {
        Subsection,
    },
};
</script>
<style lang="scss" scoped>
.check-page {
    position: relative;

    .title-info {
        display: flex;
        align-items: center;
        justify-content: start;

        .explain {
            font-weight: 600;
        }

        .info-text {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
        }
    }

    .ant-tag {
        margin-right: 0;
        display: block;
        line-height: 25px;
        text-align: center;
        cursor: pointer;
    }

    .roadway-top,
    roadway-buttom {
        padding: 5px 0;
        width: 100%;
    }

    .roadway-box {
        transform: rotateX(180deg);
        padding: 10px 10px 0 0;
        .line {
            display: flex;
            transform: rotateX(
                180deg
            ); //两次垂直镜像翻转让原本由上到下排列的div 更改为由下到上

            .el {
                width: 46px;
                height: 25px;
                line-height: 25px;
                margin: 2px;
                font-size: 12px;
                text-align: center;
                border-radius: 4px;
                cursor: pointer;
                position: relative;
                .default {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                }
            }
        }
    }

    .center-box {
        width: 500px;
        height: 52px;
        line-height: 52px;
        .shelf-number {
            display: inline-block;
            width: 200px;
        }
    }
}

.button-box {
    position: absolute;
    top: 20px;
    right: 40px;
    display: flex;
    align-items: center;
    justify-content: center;

    .export-all {
        margin-right: 20px;
    }
}
</style>