告警视频路由配置，页面构建！

src/router/index.js

@@ -48,6 +48,15 @@ const routes = [{
             },
             component: () => import('@/views/historyMonitoring/index')
         },
+        {
+            path: 'alarmVideos',
+            name: 'alarmVideos',
+            meta: {
+                icon: 'alert',
+                name: '告警视频'
+            },
+            component: () => import('@/views/alarmVideos/index')
+        },
         //设置二级菜单
         // {
         //     path: 'checkManage',

src/views/alarmVideos/index.vue

@@ -0,0 +1,138 @@
+<template>
+    <div class="alarm 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">
+                        <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="16" 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: "time",
+                },
+                {
+                    title: "球机所属巷道 ",
+                    dataIndex: "pic",
+                },
+                {
+                    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')
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+    .alarm {
+        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>

src/views/historyMonitoring/index.vue

@@ -10,7 +10,9 @@
                     </a-col>
                     <a-col :span="8">
                         <a-form-item class="ageInput" label="时间">
-                            <a-range-picker @change="onTimeChange"   v-model="queryParam.time" />
+                            <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">
@@ -123,17 +125,17 @@ export default {
             this.request();
         },
         request() {
-            this.$api.httpApi.queryList({
+            // this.$api.httpApi.queryList({
-                data: {
+            //     data: {
-                    pageNum:this.pageNum,
+            //         pageNum:this.pageNum,
-                    pageSize:this.pageSize,
+            //         pageSize:this.pageSize,
-                    ...this.queryParam
+            //         ...this.queryParam
-                }
+            //     }
-            }).then(res => {
+            // }).then(res => {
-                console.log(res)
+            //     console.log(res)
-            }).catch(err => {
+            // }).catch(err => {
-
+            //
-            });
+            // });
         },
         onTimeChange(date, dateString) {
             console.log(date)
@@ -141,6 +143,11 @@ export default {
             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>