From 00133f33b93bf7321f27e448ce907cc05efd03eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E9=91=AB?= <zhangxin@zhehekeji.com>
Date: Thu, 31 Dec 2020 10:58:59 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8E=86=E5=8F=B2=E6=95=B0=E6=8D=AE=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2tables=E5=AD=97=E6=AE=B5=E6=8C=89=E5=8E=9F=E5=9E=8B?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                            |  15 +-
 src/plugins/antd.js                    |   8 +-
 src/views/historyMonitoring/index.vue  | 218 +++++++++++++------------
 src/views/realTimeMonitoring/index.vue |   1 -
 4 files changed, 132 insertions(+), 110 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d3cd875..81fe8a3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,22 @@
 <template>
-    <div id="app">
-        <router-view v-if="isRouterAlive"/>
-    </div>
+    <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(){ //提供
diff --git a/src/plugins/antd.js b/src/plugins/antd.js
index 2622d27..96f26a2 100644
--- a/src/plugins/antd.js
+++ b/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;
diff --git a/src/views/historyMonitoring/index.vue b/src/views/historyMonitoring/index.vue
index f6acf1f..1196a19 100644
--- a/src/views/historyMonitoring/index.vue
+++ b/src/views/historyMonitoring/index.vue
@@ -1,50 +1,37 @@
 <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>
+        <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-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>
-        <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: {
-                autoplay: true,
-                muted: true,
-                language: "zh-CN",
-                height: 500,
-                sources: [
-                    {
-                        src: ""
-                    }
-                ]
+            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 // 改变每页数量时更新显示
             },
-            search: "",
+            loading: false,
             columns: [
                 {
                     title: "工单号",
                     dataIndex: "orderNum",
+                },
+                {
+                    title: "巷道",
+                    dataIndex: "str",
                     width: 90
                 },
                 {
-                    title: "仓位号",
-                    dataIndex: "positionNum",
-                    width: 170
+                    title: "货架类型",
+                    dataIndex: "type",
                 },
                 {
-                    title: "创建时间",
-                    dataIndex: "createTime",
-                    width: 200
+                    title: "货位",
+                    dataIndex: "address",
                 },
                 {
-                    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"
+                    title: "时间",
+                    dataIndex: "time",
+                },
+                {
+                    title: "照片（入库 货位 出库）",
+                    dataIndex: "pic",
+                },
+                {
+                    title: "视频状态",
+                    dataIndex: "status",
+                },
+                {
+                    title: "视频时长",
+                    dataIndex: "mediaTime",
+                },
+                {
+                    title: "球机1",
+                    dataIndex: "camera1",
+                },
+                {
+                    title: "球机2",
+                    dataIndex: "camera2",
+                },
             ],
-            drawer: false,
-            showDrawer: {}
         };
     },
+    mounted() {
+        this.handleGetHistoryList()
+    },
     methods: {
-        handleSearch() {
-            console.log(this.$api)
-            this.query();
+        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();
         },
-        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;
-                }).catch(err => {
+        request() {
+            this.$api.httpApi.queryList({
+                data: {
+                    pageNum:this.pageNum,
+                    pageSize:this.pageSize,
+                    ...this.queryParam
+                }
+            }).then(res => {
+                console.log(res)
+            }).catch(err => {
 
-                });
+            });
         },
-        handlePopup(type, url) {
-            this.drawer = true;
-            this.showDrawer.type = type;
-            this.playerOptions.sources[0].src = url;
+        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')
         },
-        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>
diff --git a/src/views/realTimeMonitoring/index.vue b/src/views/realTimeMonitoring/index.vue
index 97249f8..1c1e49d 100644
--- a/src/views/realTimeMonitoring/index.vue
+++ b/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