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

<template>
    <div class="history bg-white">
        <div class="ant-advanced-search-form">
            <a-form layout="inline" :label-col="labelCol" :wrapper-col="wrapperCol" :form="queryParam">
                <a-row :gutter="12">
                    <a-col :span="8" style="text-align: left">
                        <a-form-item label="工单号">
                            <a-input v-model="queryParam.con_code" placeholder="请输入" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item class="ageInput" label="时间">
                            <a-range-picker @change="onTimeChange"   v-model="queryParam.time" >
                                <a-icon slot="suffixIcon" type="calendar" />
                            </a-range-picker>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8" style="text-align: right">
                        <a-button type="primary" @click="handleSearch">搜索</a-button>
<!--                        <a-button style="margin-left: 8px" @click="reset">重置</a-button>-->
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <a-table
            :columns="columns"
            :row-key="record => record.id"
            :data-source="data"
            :pagination="pagination"
            @change="handleGetHistoryList"
        >
        </a-table>
    </div>
</template>

<script>
export default {
    name: "historyMonitoring",
    components: {
        // videoPlayer
    },
    data() {
        return {
            labelCol: { span: 6 },
            wrapperCol: { span: 18 },
            queryParam: {},
            pageNum:1,
            pageSize:10,
            data: [],
            pagination:{
                total:0,
                defaultPageSize:10, // 默认每页显示数量
                showTotal: total => `共 ${total} 条数据`, // 显示总数
                showSizeChanger:true, // 显示可改变每页数量
                pageSizeOptions: ['10', '20', '30'],
                onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize // 改变每页数量时更新显示
            },
            loading: false,
            columns: [
                {
                    title: "工单号",
                    dataIndex: "orderNum",
                },
                {
                    title: "巷道",
                    dataIndex: "str",
                    width: 90
                },
                {
                    title: "货架类型",
                    dataIndex: "type",
                },
                {
                    title: "货位",
                    dataIndex: "address",
                },
                {
                    title: "时间",
                    dataIndex: "time",
                },
                {
                    title: "照片（入库 货位 出库）",
                    dataIndex: "pic",
                },
                {
                    title: "视频状态",
                    dataIndex: "status",
                },
                {
                    title: "视频时长",
                    dataIndex: "mediaTime",
                },
                {
                    title: "球机1",
                    dataIndex: "camera1",
                },
                {
                    title: "球机2",
                    dataIndex: "camera2",
                },
            ],
        };
    },
    mounted() {
        this.handleGetHistoryList()
    },
    methods: {
        handleSearch(){
            delete this.queryParam.time
            console.log(this.queryParam)
            if(this.queryParam.con_code || this.queryParam.start_time && this.queryParam.end_time ){
                this.handleGetHistoryList()
            }else{
                this.$message.error('请输入搜索条件')
            }
        },
        handleGetHistoryList(pagination) {
            console.log(pagination)
            if(pagination){
                this.pagination.current = pagination.current;
                this.pagination.pageSize = pagination.pageSize;
                this.pageNum = pagination.current;
                this.pageSize = pagination.pageSize;
            }
            this.request();
        },
        request() {
            // this.$api.httpApi.queryList({
            //     data: {
            //         pageNum:this.pageNum,
            //         pageSize:this.pageSize,
            //         ...this.queryParam
            //     }
            // }).then(res => {
            //     console.log(res)
            // }).catch(err => {
            //
            // });
        },
        onTimeChange(date, dateString) {
            console.log(date)
            console.log(date[0].format('X'))
            this.queryParam.start_time = date[0].format('X')
            this.queryParam.end_time = date[1].format('X')
        },
        handleReset() {
            this.queryParam.start_time=""
            this.queryParam.end_time=""
            this.time=""
        },
    },
};
</script>

<style lang="scss" scoped>
.history {
    padding: 24px;
}
.ant-drawer-content-wrapper {
    height: auto !important;
}
.ant-drawer-body {
    text-align: center;
}
.ant-advanced-search-form .ant-form-item {
    display: flex;
    width: 100%;
}
</style>