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

<template>
    <div class="history bg-white">
        <a-input-search
            class="mb24"
            style="width: 40%;"
            placeholder="请输入工单号搜索"
            v-model="search"
            enter-button="搜索"
            @search="handleSearch"
        ></a-input-search>'
        <a-table :rowKey="record => record.id" :columns="columns" :dataSource="dataSource">
            <div slot="mediaPath" slot-scope="text, record">
                <a :href="record.mediaPath" target="_blank">
                    <img
                        v-if="imglist.some(item => record.mediaType.toLowerCase() === item)"
                        :src="record.mediaPath"
                        alt="内容图片"
                        style="width: 140px; cursor:pointer;"
                    />

                    <span v-else style="color: #40a9ff; cursor:pointer;">{{ record.mediaPath }}</span>
                </a>
            </div>
        </a-table>
        <a-drawer placement="bottom" :visible="drawer" @close="onClose">
            <img
                v-if="showDrawer.type === 'image'"
                :src="showDrawer.url"
                alt="内容图片"
                style="height: 500px"
            />

            <!-- <video-player
                v-else
                class="flex"
                style="height: 500px;"
                ref="videoPlayer"
                :options="playerOptions"
            ></video-player>-->
        </a-drawer>
    </div>
</template>

<script>
// require styles
// import "video.js/dist/video-js.css";
// import { videoPlayer } from "vue-video-player";
export default {
    name: "historyMonitoring",
    components: {
        // videoPlayer
    },
    data() {
        return {
            playerOptions: {
                autoplay: true,
                muted: true,
                language: "zh-CN",
                height: 500,
                sources: [
                    {
                        src: ""
                    }
                ]
            },
            search: "",
            columns: [
                {
                    title: "工单号",
                    dataIndex: "orderNum",
                    width: 90
                },
                {
                    title: "仓位号",
                    dataIndex: "positionNum",
                    width: 170
                },
                {
                    title: "创建时间",
                    dataIndex: "createTime",
                    width: 200
                },
                {
                    title: "内容",
                    dataIndex: "mediaPath",
                    scopedSlots: {
                        customRender: "mediaPath"
                    },
                    width: 300
                }
            ],
            dataSource: [],
            imglist: ["png", "jpg", "jpeg", "bmp", "gif"],
            videolist: [
                "mp4",
                "m2v",
                "mkv",
                "rmvb",
                "wmv",
                "avi",
                "flv",
                "mov",
                "m4v"
            ],
            drawer: false,
            showDrawer: {}
        };
    },
    methods: {
        handleSearch() {
            console.log(this.$api)
            this.query();
        },
        query() {
            this.$api.httpApi
                .queryList({
                    data: {
                        orderNum: this.search
                    }
                })
                .then(res => {
                    // res.data[1].mediaPath =
                    //     "http://gitlab.zhehekeji.com/security_check/security_front/raw/1.0.0/src/assets/video/video2.mp4";
                    this.dataSource = res.data;
                });
        },
        handlePopup(type, url) {
            this.drawer = true;
            this.showDrawer.type = type;
            this.playerOptions.sources[0].src = url;
        },
        onClose() {
            this.drawer = false;
        }
    },
    mounted() {}
};
</script>

<style lang="scss">
.history {
    padding: 24px;
}
.ant-drawer-content-wrapper {
    height: auto !important;
}
.ant-drawer-body {
    text-align: center;
}
</style>