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

<template>
    <div class="history bg-white">
        <div class="ant-advanced-search-form">
            <a-form layout="inline" :form="queryParam">
                <a-row :gutter="12">
                    <a-col :span="8" style="text-align: left">
                        <a-form-item label="工单号">
                            <a-input v-model="queryParam.orderNum" 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"
        >
            <span slot="pics" slot-scope="text">
            <template>
                <span v-if="text.putPath || text.goodsPath ||text.outputPath">
                    <viewer :images="text.pics">
                       <img class="historyImg" v-for="(src,index) in text.pics" :src="imgUrl+src"
                            :key="index"/>
                    </viewer>
                </span>
                <span v-else>
                    暂无图片
                </span>
            </template>
          </span>
            <span slot="status" slot-scope="text">
              <span :style="text.status == 1 ?' color:red': ''">
                 {{ text.status == null ? '-' : text.status == 0 ? '正常' : '告警' }}
              </span>
          </span>
            <span slot="videoPath1" slot-scope="text">
              <a-button type="link" v-if="text.videoPath1" @click="showModel(text.videoPath1)">
                  查看视频
              </a-button>
              <span v-else>

              </span>
          </span>
            <span slot="videoPath2" slot-scope="text">
              <a-button type="link" v-if="text.videoPath2" @click="showModel(text.videoPath2)">
                  查看视频
              </a-button>
              <span v-else>

              </span>
          </span>
        </a-table>
        <Model
            :visible.sync="visible"
            :vid.sync="vid"
            @close="closeModel"
        />
    </div>
</template>

<script>
    import {imgUrl, videoUrl} from "@/api/importExcel";
    import Model from "./model.vue"

    export default {
        name: "historyMonitoring",
        data() {
            return {
                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,
            imgUrl: imgUrl,
            columns: [
                {
                    title: "工单号",
                    dataIndex: "orderNum",
                },
                {
                    title: "巷道",
                    dataIndex: "str",
                    width: 90
                },
                {
                    title: "货架类型",
                    dataIndex: "type",
                },
                {
                    title: "货位",
                    dataIndex: "address",
                },
                {
                    title: "时间",
                    dataIndex: "startTime",
                },
                {
                    title: "照片（入库 货位 出库）",
                    // dataIndex: "pic",
                    scopedSlots: {customRender: 'pics'}
                },
                {
                    title: "视频状态",
                    // dataIndex: "status",
                    scopedSlots: {customRender: 'status'}
                },
                {
                    title: "视频时长",
                    dataIndex: "mediaTime",
                },
                {
                    title: "球机1",
                    // dataIndex: "videoPath1",
                    scopedSlots: {customRender: 'videoPath1'}
                },
                {
                    title: "球机2",
                    // dataIndex: "videoPath2",
                    scopedSlots: {customRender: 'videoPath2'}
                },
            ],
            visible: false,
            vid: ''
        };
    },
    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 => {
                // let pics =new Array()
                res.data.map(function (item) {
                    console.log(item)
                    console.log('000')
                    var pic = [
                        item.putPath, item.goodsPath, item.outputPath
                    ]
                    item.pics = pic
                })
                console.log(res.data)
                this.data = res.data
            }).catch(err => {

            });
        },
        onTimeChange(date, dateString) {
            this.handleReset()
            console.log(date)
            console.log(date[0].format('X'))
            this.queryParam.startTimestamp = date[0].format('X')
            this.queryParam.endTimestamp = date[1].format('X')
        },
        handleReset() {
            this.queryParam.startTimestamp = ""
            this.queryParam.endTimestamp = ""
            this.time = ""
        },
        showModel(data) {
            this.visible = true
            this.vid = videoUrl + data
        },
        closeModel(visible, data) {
            this.visible = visible
            this.vid = data
        },
    },
    components: {
        Model
    }
};
</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%;
}

.historyImg {
    width: 80px;
    margin: 5px;
}
</style>