历史页面实时部分

src/components/common/the-aside.vue

@@ -1,16 +1,11 @@
 <template>
     <div class="aside">
-        <transition name="slide">
-            <div class="aside-logo" v-show="!aside_collapsed">
-                <span>昆船随行式垛机监测系统</span>
-            </div>
-        </transition>
         <a-menu
             :selectedKeys="selectedKeys"
             :openKeys.sync="openKeys"
             @click="clickMenu"
             mode="inline"
-            theme="dark"
+            theme="light"
             :inline-collapsed="aside_collapsed"
         >
             <template v-for="item in routes">
@@ -132,25 +127,7 @@ export default {
     position: relative;
     box-shadow: 2px 0px 6px 0px rgba(0, 21, 41, 0.35);
     z-index: 1000;
-    .slide-enter-active {
+    background-color: #fff;
-        transition: all 1s;
-    }
-    .slide-enter,
-    .slide-leave-to {
-        width: 0;
-        opacity: 0;
-    }
-    &-logo {
-        height: 65px;
-        display: flex;
-        align-items: center;
-        background-color: #00284d;
-        span {
-            font-size: 18px;
-            font-weight: bold;
-            margin-left: 24px;
-        }
-    }
     .ant-menu-inline {
         width: 256px;
     }

src/components/common/the-header.vue

@@ -1,15 +1,16 @@
 <template>
     <div class="header">
         <div class="header-top">
-            <a-icon :type="aside_collapsed ? 'menu-unfold' : 'menu-fold'" @click="setCollapsed"></a-icon>
+            <div class="header-top-company">昆船随行式垛机监测系统</div>
             <div class="header-top-right">
-                <a-popover v-model="visible" placement="bottom" trigger="click">
+                <div class="header-top-right-circle" @click="visible = !visible"></div>
+                <a-popover id="popover" v-model="visible" placement="bottom" trigger="click">
                     <a href="javascript:;">
                         {{
                         userInfo.name ? userInfo.name : "userName"
                         }}
                     </a>
-                    <div class="flex flex-column" :style="{ 'min-width': '56px' }" slot="content">
+                    <div class="flex flex-column" :style="{ 'min-width': '78px' }" slot="content">
                         <a
                             class="block mb16"
                             href="javascript:;"
@@ -20,14 +21,6 @@
                 </a-popover>
             </div>
         </div>
-        <div class="header-breadcrumb">
-            <!-- 面包屑 -->
-            <a-breadcrumb class="main-breadcrumb-cover">
-                <a-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
-                    <span>{{ item.meta.name }}</span>
-                </a-breadcrumb-item>
-            </a-breadcrumb>
-        </div>
     </div>
 </template>
 
@@ -36,79 +29,55 @@ import { mapState, mapMutations } from "vuex";
 export default {
     name: "the-header",
     computed: {
-        ...mapState(["aside_collapsed", "userInfo"])
+        ...mapState(["userInfo"])
     },
     data() {
         return {
-            breadcrumbList: [],
             visible: false
         };
     },
-    watch: {
-        $route(data) {
-            this.processBread(data);
-        }
-    },
     methods: {
         ...mapMutations(["setState"]),
-        setCollapsed() {
-            this.setState({ aside_collapsed: !this.aside_collapsed });
-        },
         logout() {
             this.visible = false;
             sessionStorage.clear();
             this.$router.push({ name: "login" });
-        },
-        /**
-         * 处理全局面包屑
-         * @param route 当前路由信息
-         */
-        processBread(route) {
-            this.breadcrumbList = route.matched.filter((el, index) => {
-                return el.name && (el.meta.unfold || index);
-            });
-
-            this.breadcrumbList.forEach(el => {
-                if (el.name === route.name) {
-                    el.query = route.query;
-                }
-            });
         }
-    },
-    mounted() {
-        this.processBread(this.$route);
     }
 };
 </script>
 
 <style lang="scss">
 .header {
-    background: #fff;
+    background: #eeeeee;
     &-top {
         z-index: 10;
-        height: 64px;
+        height: 48px;
         box-shadow: 0 1px 4px 0 rgba(0, 21, 41, 0.12);
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 0 24px;
-
+        background-color: #001529;
-        .station-selector {
+        &-company {
-            &-select {
+            font-size: 18px;
-                width: 220px;
+            font-family: PingFangSC, PingFangSC-Medium;
-            }
+            font-weight: 500;
-        }
+            text-align: center;
-        .anticon {
+            color: #ffffff;
-            font-size: 20px;
-            cursor: pointer;
         }
         &-right {
             display: flex;
-            align-items: center;
+            align-items: flex-start;
+            &-circle {
+                width: 24px;
+                height: 24px;
+                border-radius: 50%;
+                background-color: #fff;
+                margin-right: 8px;
+                cursor: pointer;
             }
         }
-    &-breadcrumb {
-        padding: 16px 32px;
     }
 }
 </style>

src/utils/index.js

@@ -7,6 +7,37 @@ export default {
         var seconds = (time % (1000 * 60)) / 1000;
         return days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒 ";
     },
+    // 时间处理
+    timerFormat() {
+        let date = new Date();
+        let year = date.getFullYear();
+        let month = date.getMonth() + 1;
+        let day = date.getDate();
+        let h =
+            date.getHours() < 10 ?
+                "0" + date.getHours() :
+                date.getHours();
+        let m =
+            date.getMinutes() < 10 ?
+                "0" + date.getMinutes() :
+                date.getMinutes();
+        let s =
+            date.getSeconds() < 10 ?
+                "0" + date.getSeconds() :
+                date.getSeconds();
+        return year +
+            "年" +
+            month +
+            "月" +
+            day +
+            "日" +
+            " " +
+            h +
+            ":" +
+            m +
+            ":" +
+            s;
+    },
     //计算字符串长度，英文1个字符，中文2个字符
     computedStrLen(str) {
         var len = 0;

src/views/center.vue

@@ -1,12 +1,66 @@
 <template>
-    <div class="center"></div>
+    <div class="center bg-white">
+        <div class="center-table">
+            <a-row>
+                <a-col span="4">登录账户</a-col>
+                <a-col span="8">{{userInfo.account || '-'}}</a-col>
+
+                <a-col span="4">用户姓名</a-col>
+                <a-col span="8">{{userInfo.name || '-'}}</a-col>
+            </a-row>
+
+            <a-row>
+                <a-col span="4">手机号码</a-col>
+                <a-col span="8">{{userInfo.phone || '-'}}</a-col>
+
+                <a-col span="4">邮箱</a-col>
+                <a-col span="8">{{userInfo.email || '-'}}</a-col>
+            </a-row>
+        </div>
+        <a-row>
+            <a-col span="24" align="center">
+                <a-button class="mt16">修改密码</a-button>
+            </a-col>
+        </a-row>
+    </div>
 </template>
 
 <script>
 export default {
-    name: "center"
+    name: "center",
+    data() {
+        return {
+            userInfo: {}
+        };
+    }
 };
 </script>
 
-<style>
+<style lang='scss'>
+.center {
+    padding: 24px;
+    &-table {
+        .ant-row {
+            display: flex;
+            border-right: 1px solid #e9e9e9;
+            div {
+                padding: 16px;
+                border-top: 1px solid #e9e9e9;
+                border-left: 1px solid #e9e9e9;
+                font-size: 14px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: rgba(0, 0, 0, 0.65);
+                display: flex;
+                align-items: center;
+            }
+            .ant-col-4 {
+                background-color: #fafafa;
+            }
+        }
+        .ant-row:last-child {
+            border-bottom: 1px solid #e9e9e9;
+        }
+    }
+}
 </style>

src/views/history/index.vue

@@ -1,12 +1,65 @@
 <template>
-    <div class="history"></div>
+    <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 :columns="columns" :dataSource="dataSource"></a-table>
+    </div>
 </template>
 
 <script>
 export default {
-    name: "history"
+    name: "history",
+    data() {
+        return {
+            search: "",
+            columns: [
+                {
+                    title: "货位号",
+                    dataIndex: ""
+                },
+                {
+                    title: "视频录制时间",
+                    dataIndex: ""
+                },
+                {
+                    title: "历史视频播放地址",
+                    dataIndex: "",
+                    scopedSlot: {
+                        customRender: ""
+                    }
+                },
+                {
+                    title: "取货前照片",
+                    dataIndex: "",
+                    scopedSlot: {
+                        customRender: ""
+                    }
+                },
+                {
+                    title: "取货后照片",
+                    dataIndex: "",
+                    scopedSlot: {
+                        customRender: ""
+                    }
+                }
+            ],
+            dataSource: []
+        };
+    },
+    methods: {
+        handleSearch() {}
+    }
 };
 </script>
 
-<style>
+<style lang='scss'>
+.history {
+    padding: 24px;
+}
 </style>

src/views/main.vue

@@ -1,14 +1,21 @@
 <template>
     <div class="mainIndex">
-        <div class="mainIndex-aside">
-            <the-aside></the-aside>
-        </div>
-        <div class="mainIndex-container">
-            <div class="mainIndex-container-header">
         <the-header></the-header>
-            </div>
+        <div class="mainIndex-container">
+            <the-aside></the-aside>
             <div class="mainIndex-container-content">
-                <router-view></router-view>
+                <div class="mainIndex-container-content-breadcrumb">
+                    <!-- 面包屑 -->
+                    <a-breadcrumb class="main-breadcrumb-cover">
+                        <a-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
+                            <span>{{ item.meta.name }}</span>
+                        </a-breadcrumb-item>
+                    </a-breadcrumb>
+                    <!-- 当前时间 -->
+                    <div class="mainIndex-container-content-breadcrumb-time">当前时间：{{current}}</div>
+                </div>
+                <router-view class="sss"></router-view>
+                <div class="mainIndex-container-content-footer">Copyright © 昆船随行式垛机监测系统</div>
             </div>
         </div>
     </div>
@@ -16,24 +23,126 @@
 
 <script>
 export default {
-    name: "mainIndex"
+    name: "mainIndex",
+    data() {
+        return {
+            breadcrumbList: [],
+            current: ""
+        };
+    },
+    watch: {
+        $route(data) {
+            this.processBread(data);
+        }
+    },
+    methods: {
+        /**
+         * 处理全局面包屑
+         * @param route 当前路由信息
+         */
+        processBread(route) {
+            this.breadcrumbList = route.matched.filter((el, index) => {
+                return el.name && (el.meta.unfold || index);
+            });
+
+            this.breadcrumbList.forEach(el => {
+                if (el.name === route.name) {
+                    el.query = route.query;
+                }
+            });
+        },
+        // 当前时间
+        getCurrentTime() {
+            let time = null;
+            let _this = this;
+            function timerFormat() {
+                if (!time) clearTimeout(time);
+                time = setTimeout(() => {
+                    let date = new Date();
+                    let year = date.getFullYear();
+                    let month = date.getMonth() + 1;
+                    let day = date.getDate();
+                    let h =
+                        date.getHours() < 10
+                            ? "0" + date.getHours()
+                            : date.getHours();
+                    let m =
+                        date.getMinutes() < 10
+                            ? "0" + date.getMinutes()
+                            : date.getMinutes();
+                    let s =
+                        date.getSeconds() < 10
+                            ? "0" + date.getSeconds()
+                            : date.getSeconds();
+                    _this.current =
+                        year +
+                        "年" +
+                        month +
+                        "月" +
+                        day +
+                        "日" +
+                        " " +
+                        h +
+                        ":" +
+                        m +
+                        ":" +
+                        s;
+                    timerFormat();
+                }, 1000);
+            }
+            timerFormat();
+        }
+    },
+    mounted() {
+        this.getCurrentTime();
+        this.processBread(this.$route);
+    }
 };
 </script>
 
 <style lang="scss">
 .mainIndex {
     display: flex;
+    flex-direction: column;
     &-aside {
         background: #001529;
     }
     &-container {
         flex: 1;
         display: flex;
-        flex-direction: column;
         &-content {
             background-color: #eeeeee;
             flex: 1;
             padding: 24px;
+            display: flex;
+            flex-direction: column;
+            &-breadcrumb {
+                display: flex;
+                justify-content: space-between;
+                margin-bottom: 16px;
+                .main-breadcrumb-cover {
+                    span {
+                        font-size: 16px;
+                        font-family: PingFangSC, PingFangSC-Medium;
+                        font-weight: 600;
+                        color: rgba(0, 0, 0, 0.85);
+                    }
+                }
+                &-time {
+                    font-size: 14px;
+                    font-family: PingFangSC, PingFangSC-Medium;
+                    font-weight: 500;
+                    color: rgba(0, 0, 0, 0.65);
+                }
+            }
+            .sss {
+                flex: 1;
+            }
+            &-footer {
+                width: 100%;
+                text-align: center;
+                padding: 16px 0;
+            }
         }
     }
 }

src/views/realTime/index.vue

@@ -1,12 +1,66 @@
 <template>
-    <div class="realTime bg-white"></div>
+    <div class="realTime bg-white">
+        <div class="realTime-position">
+            <div class="realTime-position-label">选择位置：</div>
+            <div class="realTime-position-box">
+                <div class="realTime-position-box-btns"></div>
+                <div class="realTime-position-box-control" @click="handleUpDown">
+                    {{controlLabel ? '收起' : '展开'}}
+                    <a-icon type="up" :class="{'anticon-rotate': !controlLabel}"></a-icon>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
 export default {
-    name: "realTime"
+    name: "realTime",
+    data() {
+        return {
+            // 收起true  展开false
+            controlLabel: true
+        };
+    },
+    methods: {
+        // 展开收起
+        handleUpDown() {
+            this.controlLabel = !this.controlLabel;
+        }
+    }
 };
 </script>
 
 <style lang='scss'>
+.realTime {
+    padding: 24px;
+    &-position {
+        display: flex;
+        justify-content: space-between;
+        &-box {
+            flex: 1;
+            display: flex;
+            justify-content: space-between;
+            &-btns {
+                flex: 1;
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: flex-start;
+            }
+            &-control {
+                text-align: right;
+                cursor: pointer;
+                color: #55a4ff;
+                .anticon {
+                    transform: rotate(0deg);
+                    transform-origin: center;
+                    transition: all 0.2s linear;
+                }
+                .anticon-rotate {
+                    transform: rotate(180deg);
+                }
+            }
+        }
+    }
+}
 </style>