历史数据页面tables字段按原型更新

src/App.vue

@@ -1,15 +1,22 @@
 <template>
+    <a-config-provider :locale="locale">
         <div id="app">
             <router-view v-if="isRouterAlive"/>
         </div>
+    </a-config-provider>
 </template>
 
 <script>
+import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
+import moment from 'moment'
+import 'moment/locale/zh-cn'
+moment.locale('zh-cn')
 export default {
     name: 'App',
     data () {
         return {
-            isRouterAlive: true
+            isRouterAlive: true,
+            locale: zhCN
         }
     },
     provide(){ //提供

src/plugins/antd.js

@@ -1,7 +1,9 @@
 import Vue from "vue";
 import {
     Layout,
+    ConfigProvider,
     Input,
+    InputNumber,
     Tabs,
     Table,
     Pagination,
@@ -22,10 +24,13 @@ import {
     Tooltip,
     Tag,
     Drawer,
-    Divider
+    Divider,
+    DatePicker
 } from "ant-design-vue";
 Vue.use(Layout);
+Vue.use(ConfigProvider);
 Vue.use(Input);
+Vue.use(InputNumber);
 Vue.use(Tabs);
 Vue.use(Table);
 Vue.use(Pagination);
@@ -46,6 +51,7 @@ Vue.use(Tooltip)
 Vue.use(Tag)
 Vue.use(Drawer)
 Vue.use(Divider)
+Vue.use(DatePicker )
 Vue.prototype.$message = message;
 Vue.prototype.$info = Modal.info;
 Vue.prototype.$success = Modal.success;

src/views/historyMonitoring/index.vue

@@ -1,50 +1,37 @@
 <template>
     <div class="history bg-white">
-        <a-input-search
+        <div class="ant-advanced-search-form">
-            class="mb24"
+            <a-form layout="inline" :label-col="labelCol" :wrapper-col="wrapperCol" :form="queryParam">
-            style="width: 40%;"
+                <a-row :gutter="12">
-            placeholder="请输入工单号搜索"
+                    <a-col :span="8" style="text-align: left">
-            v-model="search"
+                        <a-form-item label="工单号">
-            enter-button="搜索"
+                            <a-input v-model="queryParam.con_code" placeholder="请输入" />
-            @search="handleSearch"
+                        </a-form-item>
-        ></a-input-search>'
+                    </a-col>
-        <a-table :rowKey="record => record.id" :columns="columns" :dataSource="dataSource">
+                    <a-col :span="8">
-            <div slot="mediaPath" slot-scope="text, record">
+                        <a-form-item class="ageInput" label="时间">
-                <a :href="record.mediaPath" target="_blank">
+                            <a-range-picker @change="onTimeChange"   v-model="queryParam.time" />
-                    <img
+                        </a-form-item>
-                        v-if="imglist.some(item => record.mediaType.toLowerCase() === item)"
+                    </a-col>
-                        :src="record.mediaPath"
+                    <a-col :span="8" style="text-align: right">
-                        alt="内容图片"
+                        <a-button type="primary" @click="handleSearch">搜索</a-button>
-                        style="width: 140px; cursor:pointer;"
+<!--                        <a-button style="margin-left: 8px" @click="reset">重置</a-button>-->
-                    />
+                    </a-col>
-
+                </a-row>
-                    <span v-else style="color: #40a9ff; cursor:pointer;">{{ record.mediaPath }}</span>
+            </a-form>
-                </a>
         </div>
+        <a-table
+            :columns="columns"
+            :row-key="record => record.id"
+            :data-source="data"
+            :pagination="pagination"
+            @change="handleGetHistoryList"
+        >
         </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: {
@@ -52,94 +39,113 @@ export default {
     },
     data() {
         return {
-            playerOptions: {
+            labelCol: { span: 6 },
-                autoplay: true,
+            wrapperCol: { span: 18 },
-                muted: true,
+            queryParam: {},
-                language: "zh-CN",
+            pageNum:1,
-                height: 500,
+            pageSize:10,
-                sources: [
+            data: [],
-                    {
+            pagination:{
-                        src: ""
+                total:0,
-                    }
+                defaultPageSize:10, // 默认每页显示数量
-                ]
+                showTotal: total => `共 ${total} 条数据`, // 显示总数
+                showSizeChanger:true, // 显示可改变每页数量
+                pageSizeOptions: ['10', '20', '30'],
+                onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize // 改变每页数量时更新显示
             },
-            search: "",
+            loading: false,
             columns: [
                 {
                     title: "工单号",
                     dataIndex: "orderNum",
+                },
+                {
+                    title: "巷道",
+                    dataIndex: "str",
                     width: 90
                 },
                 {
-                    title: "仓位号",
+                    title: "货架类型",
-                    dataIndex: "positionNum",
+                    dataIndex: "type",
-                    width: 170
                 },
                 {
-                    title: "创建时间",
+                    title: "货位",
-                    dataIndex: "createTime",
+                    dataIndex: "address",
-                    width: 200
                 },
                 {
-                    title: "内容",
+                    title: "时间",
-                    dataIndex: "mediaPath",
+                    dataIndex: "time",
-                    scopedSlots: {
+                },
-                        customRender: "mediaPath"
+                {
+                    title: "照片（入库 货位 出库）",
+                    dataIndex: "pic",
+                },
+                {
+                    title: "视频状态",
+                    dataIndex: "status",
+                },
+                {
+                    title: "视频时长",
+                    dataIndex: "mediaTime",
+                },
+                {
+                    title: "球机1",
+                    dataIndex: "camera1",
+                },
+                {
+                    title: "球机2",
+                    dataIndex: "camera2",
                 },
-                    width: 300
-                }
-            ],
-            dataSource: [],
-            imglist: ["png", "jpg", "jpeg", "bmp", "gif"],
-            videolist: [
-                "mp4",
-                "m2v",
-                "mkv",
-                "rmvb",
-                "wmv",
-                "avi",
-                "flv",
-                "mov",
-                "m4v"
             ],
-            drawer: false,
-            showDrawer: {}
         };
     },
+    mounted() {
+        this.handleGetHistoryList()
+    },
     methods: {
-        handleSearch() {
+        handleSearch(){
-            console.log(this.$api)
+            delete this.queryParam.time
-            this.query();
+            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();
         },
-        query() {
+        request() {
-            this.$api.httpApi
+            this.$api.httpApi.queryList({
-                .queryList({
                 data: {
-                        orderNum: this.search
+                    pageNum:this.pageNum,
+                    pageSize:this.pageSize,
+                    ...this.queryParam
                 }
-                })
+            }).then(res => {
-                .then(res => {
+                console.log(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;
             }).catch(err => {
 
             });
         },
-        handlePopup(type, url) {
+        onTimeChange(date, dateString) {
-            this.drawer = true;
+            console.log(date)
-            this.showDrawer.type = type;
+            console.log(date[0].format('X'))
-            this.playerOptions.sources[0].src = url;
+            this.queryParam.start_time = date[0].format('X')
+            this.queryParam.end_time = date[1].format('X')
         },
-        onClose() {
-            this.drawer = false;
-        }
     },
-    mounted() {}
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .history {
     padding: 24px;
 }
@@ -149,4 +155,8 @@ export default {
 .ant-drawer-body {
     text-align: center;
 }
+.ant-advanced-search-form .ant-form-item {
+    display: flex;
+    width: 100%;
+}
 </style>

src/views/realTimeMonitoring/index.vue

@@ -127,7 +127,6 @@ export default {
             console.log(key)
         },
         showModel(item){
-            console.log(11111)
             console.log(item)
             this.visible = true
             this.modelData=item