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="#bfbfbf"
                    style="width: 30px; height: 20px; margin-right: 6px"
                ></a-tag>
                未盘点
            </span>
            <span class="info-text">
                <a-tag
                    color="#4c71d8"
                    style="width: 30px; height: 20px; margin-right: 6px"
                ></a-tag>
                人工核对
            </span>
            <span class="info-text">
                <a-tag
                    color="#bc55cf"
                    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="19">
            <!--左货架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>
        <a-col :span="5">
            <div
                        class="img-box"
                        style=""
                    >
                        <ul>
                            <li class="img-box-item">
                                <span class="img-box-title">
                                    盘点批次:
                                </span>
                                <span class="img-box-value">
                                    {{params.lotnum }}
                                </span>
                                   
                            </li>
                            <li class="img-box-item">
                                <span class="img-box-title">
                                    盘点个数:
                                </span>
                                <span class="img-box-value">
                                   {{params.size}}
                                </span>
                            </li>
                            <li class="img-box-item">
                                <span class="img-box-title">
                                    品规个数:
                                </span>
                                <span class="img-box-value">
                                   
{{params.sizeCategory }}
                                </span>
                            </li><li class="img-box-item">
                                <span class="img-box-title">
                                    其他货物:
                                </span>
                                <span class="img-box-value">
                                   
{{params.type4        }}
                                </span>
                                

                            </li><li class="img-box-item">
                                <span class="img-box-title">
                                    盘点正常:
                                </span>
                                <span class="img-box-value">
                                    
{{params.type2        }}
                                </span>
                                </li>
                                <li class="img-box-item">
                                <span class="img-box-title">
                                    盘点异常:
                                </span>
                                <span class="img-box-value">
                                   
{{params.type1        }}
                                </span>
                            </li><li class="img-box-item">
                                <span class="img-box-title">
                                    人工盘点:
                                </span>
                                <span class="img-box-value">
                                   
{{params.type3        }}
                                </span>
                            </li>
                            <li class="img-box-item">
                                <span class="img-box-title">
                                    盘点时间:
                                </span>
                                <span class="img-box-value">
                                    {{params.time }}
                                </span>
                                   
                            </li>
                        </ul>
            </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";
import { notification } from 'ant-design-vue';

export default {
    name: "checkManage",
    data() {
        return {
            timer: "",
            leftSide: 1,
            rightSide: 1,
            data: [],
            params:[],
            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.openNotification();
        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.openNotification();
            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]);
                    }
                    console.log(document.cookie);
                    if (document.cookie.length > 0) {
                        console.log(document.cookie);
                        var c_start = document.cookie.indexOf(c_name + "=");
                        //如果document.cookie对象里面有cookie则查找是否有指定的cookie，如果有则返回指定的cookie值，如果没有则返回空字符串
                        if (c_start != -1) {
                            c_start = c_start + c_name.length + 1;
                            var c_end = document.cookie.indexOf(";", c_start);
                            if (c_end == -1) c_end = document.cookie.length;
                            console.log(
                                document.cookie.substring(c_start, c_end)
                            );
                            this.select = Number(
                                document.cookie.substring(c_start, c_end)
                            );
                        }
                    }
                    //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) => {});
        },
        openNotification(){
            //概况
            this.$api.httpApi
                .getoverview({})
                .then((res) => {
                    console.log(res);
                    console.log(res.data.lotnum);

                    this.params = res.data;
                    // notification.open({
                    //     message: '盘点批次号：'+res.data.lotnum,
                    //     description:
                    //         '共盘点'+res.data.size+'个货位，'+res.data.sizeCategory+'个品规，'+res.data.type4+'个其他货物，其中'
                    //         +res.data.type2+'个盘点成功，'+res.data.type1+'个盘点异常，'+res.data.type3+'个人工盘点',
                    //     duration: 0,
                    // });
                })
                .catch((err) => {

                });

            
        },
        //获取巷道列表
        request() {
            this.$api.httpApi
                .getAllStreet({})
                .then((res) => {
                    for (let i = 0; i < res.data.length; i++) {
                        console.log(res);
                        this.$set(this.data, i, res.data[i]);
                    }

                    this.select = res.data[0].id;
                    this.selectName = res.data[0].name;

                    if (document.cookie.length > 0) {
                        var c_name = "streetId";
                        console.log(document.cookie);
                        var c_start = document.cookie.indexOf(c_name + "=");
                        //如果document.cookie对象里面有cookie则查找是否有指定的cookie，如果有则返回指定的cookie值，如果没有则返回空字符串
                        if (c_start != -1) {
                            c_start = c_start + c_name.length + 1;
                            var c_end = document.cookie.indexOf(";", c_start);
                            if (c_end == -1) c_end = document.cookie.length;
                            console.log(
                                document.cookie.substring(c_start, c_end)
                            );
                            this.select = Number(
                                document.cookie.substring(c_start, c_end)
                            );
                        }
                    }

                    for (let i = 0; i < res.data.length; i++) {
                        if (res.data[i].id == this.select) {
                            this.selectName = res.data[i].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;

            document.cookie = "streetId=" + value + ";";

            for (let i = 0; i < this.data.length; i++) {
                if (this.data[i].id == this.select) {
                    this.selectName = this.data[i].name;
                }
            }
            console.log(document.cookie);
            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) => {});
        },
    },
    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;
        }
    }
}

.img-box {
                display: flex;
                padding: 50px;
                margin-right: 56px;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                font-size: 17px;
                height: 900px;
                margin-right: 10px;
                img {
                    height: 100%;
                }

                p {
                    height: 25px;
                }
                ul {
                    width: 100%;
                    height: 100%;
                    margin-bottom: 0;
                    padding-inline-start: 0;
                    .img-box-item {
                        background-color: #fed54d;
                        margin: 10px 0;
                        padding: 5px;
                        font-size: 16px;
                        font-weight: 600;
                        color: #494e52;
                        .img-box-title {
                            width: 40%;
                            display: inline-block;
                        }
                        .img-box-value {
                            display: inline-block;
                            width: calc(100% - 130px);
                            overflow: hidden;
                            width: 60%;
                            position: relative;
                            top: 5px;
                        }
                    }
                }
            }

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

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