Merge branch 'feature-mobile' into develop

README.md

@@ -1,7 +1,7 @@
 <!--
  * @Date: 2021-11-29 11:14:13
  * @LastEditors: JinxuChen
- * @LastEditTime: 2021-12-08 16:55:53
+ * @LastEditTime: 2021-12-10 10:56:47
  * @FilePath: \GpsCardAdmin\README.md
  * @description:
 -->
@@ -57,4 +57,11 @@ FIX
 FEATURE
 - 增加 localStorage存储 src\store\localStorage.js
 - 增加 页面显示用户名
-- 修改 首页背景图
+- 修改 首页背景图
+
+## v1.0.6F
+`2021年12月10日`
+- 增加 标签栏头部logo
+- 增加 移动端分页页码跳转按钮
+- 增加 移动端表格弹窗适配
+- 增加 头部固定配置

src/App.vue

@@ -1,7 +1,7 @@
 <!--
  * @Date: 2021-11-29 11:20:34
  * @LastEditors: JinxuChen
- * @LastEditTime: 2021-11-30 15:13:57
+ * @LastEditTime: 2021-12-10 10:42:56
  * @FilePath: \GpsCardAdmin\src\App.vue
  * @description:
 -->
@@ -34,7 +34,7 @@ export default {
             });
         },
         debug() {
-            if (process.env.NODE_ENV !== "production") {
+            if (process.env.NODE_ENV !== "production" && document.body.clientWidth - 1 < 991) {
                 const script = document.createElement("script");
                 script.src = "//cdn.jsdelivr.net/npm/eruda";
                 document.body.appendChild(script);

src/components/Pagination/index.vue

@@ -1,102 +1,194 @@
 <template>
-  <div :class="{'hidden':hidden}" class="pagination-container">
-    <el-pagination
-      :background="background"
-      :current-page.sync="currentPage"
-      :page-size.sync="pageSize"
-      :layout="layout"
-      :page-sizes="pageSizes"
-      :total="total"
-      v-bind="$attrs"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-    />
-  </div>
+    <div :class="{'hidden':hidden}" class="pagination-container">
+        <el-row class="pagination-row">
+            <el-col :xs="20" :sm="20" :md="20" :lg="16" :xl="12">
+                <el-pagination
+                    :background="background"
+                    :current-page.sync="currentPage"
+                    :page-size.sync="pageSize"
+                    :layout="layout"
+                    :page-sizes="pageSizes"
+                    small
+                    ref="pagination"
+                    :total="total"
+                    v-bind="$attrs"
+                    @size-change="handleSizeChange"
+                    @current-change="handleCurrentChange"
+                />
+            </el-col>
+            <el-col :span="4" class="jump-button" v-show="isMobile">
+                <el-button type="primary" @click="onJump">跳转</el-button>
+            </el-col>
+        </el-row>
+    </div>
 </template>
 
 <script>
-import { scrollTo } from '@/utils/scroll-to'
+import { scrollTo } from "@/utils/scroll-to";
 
+const { body } = document;
 export default {
-  name: 'Pagination',
-  props: {
-    total: {
-      required: true,
-      type: Number
+    name: "Pagination",
+    data() {
+        return {
+            screenWidth: document.body.clientWidth,
+            /* isMobile: false */
+        };
     },
-    page: {
-      type: Number,
-      default: 1
+    props: {
+        total: {
+            required: true,
+            type: Number
+        },
+        page: {
+            type: Number,
+            default: 1
+        },
+        limit: {
+            type: Number,
+            default: 20
+        },
+        pageSizes: {
+            type: Array,
+            default() {
+                return [10, 20, 30, 50];
+            }
+        },
+        layout: {
+            type: String,
+            default: "total, sizes, prev, pager, next, jumper" //total, sizes, prev, pager, next, jumper
+        },
+        background: {
+            type: Boolean,
+            default: true
+        },
+        autoScroll: {
+            type: Boolean,
+            default: true
+        },
+        hidden: {
+            type: Boolean,
+            default: false
+        }
     },
-    limit: {
-      type: Number,
-      default: 20
+    computed: {
+        currentPage: {
+            get() {
+                return this.page;
+            },
+            set(val) {
+                this.$emit("update:page", val);
+            }
+        },
+        pageSize: {
+            get() {
+                return this.limit;
+            },
+            set(val) {
+                this.$emit("update:limit", val);
+            }
+        },
+        // 防止在移动端刷新按钮消失
+        isMobile: {
+            get() {
+                if(this.screenWidth < 991) {
+                    return true
+                } else {
+                    return false
+                }
+            },
+            set(val) {
+                this.screenWidth
+            }
+        }
     },
-    pageSizes: {
-      type: Array,
-      default() {
-        return [10, 20, 30, 50]
-      }
+    watch: {
+        // 监听浏览器可视窗口变化
+        screenWidth(val){
+            console.log(val);
+            const IWIDTH = 991;
+            if(val - 1 < IWIDTH) {
+                this.isMobile = true;
+            } else {
+                this.isMobile = false;
+            }
+        }
     },
-    layout: {
-      type: String,
-      default: 'total, sizes, prev, pager, next, jumper'
+    mounted() {
+        this.getScreenWidth();
     },
-    background: {
-      type: Boolean,
-      default: true
-    },
-    autoScroll: {
-      type: Boolean,
-      default: true
-    },
-    hidden: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    currentPage: {
-      get() {
-        return this.page
-      },
-      set(val) {
-        this.$emit('update:page', val)
-      }
-    },
-    pageSize: {
-      get() {
-        return this.limit
-      },
-      set(val) {
-        this.$emit('update:limit', val)
-      }
+    methods: {
+        handleSizeChange(val) {
+            this.$emit("pagination", { page: this.currentPage, limit: val });
+            if (this.autoScroll) {
+                scrollTo(0, 800);
+            }
+        },
+        handleCurrentChange(val) {
+            this.$emit("pagination", { page: val, limit: this.pageSize });
+            if (this.autoScroll) {
+                scrollTo(0, 800);
+            }
+        },
+        // 跳转确认
+        onJump() {
+            let evtObj;
+            let elevatorDiv = document.getElementsByClassName(
+                "el-pagination__editor"
+            );
+            if (elevatorDiv && elevatorDiv.length > 0) {
+                let pageInput = elevatorDiv[0].getElementsByTagName("input")[0];
+                if (window.KeyEvent) {
+                    //firefox 浏览器下模拟事件
+                    evtObj = document.createEvent("KeyEvents");
+                    evtObj.initKeyEvent(
+                        "keyup",
+                        true,
+                        true,
+                        window,
+                        true,
+                        false,
+                        false,
+                        false,
+                        13,
+                        0
+                    );
+                } else {
+                    //chrome 浏览器下模拟事件
+                    evtObj = document.createEvent("UIEvents");
+                    evtObj.initUIEvent("keyup", true, true, window, 1);
+                    delete evtObj.keyCode;
+                    if (typeof evtObj.keyCode === "undefined") {
+                        //为了模拟keycode
+                        Object.defineProperty(evtObj, "keyCode", { value: 13 });
+                    } else {
+                        evtObj.key = String.fromCharCode(13);
+                    }
+                }
+                pageInput.dispatchEvent(evtObj);
+            }
+        },
+        // 获取浏览器可视化宽度
+        getScreenWidth() {
+            let that = this;
+            window.onresize = () => {
+                return (() => {
+                    window.screenWidth = document.body.clientWidth;
+                    that.screenWidth = window.screenWidth;
+                })();
+            };
+        }
     }
-  },
-  methods: {
-    handleSizeChange(val) {
-      this.$emit('pagination', { page: this.currentPage, limit: val })
-      if (this.autoScroll) {
-        scrollTo(0, 800)
-      }
-    },
-    handleCurrentChange(val) {
-      this.$emit('pagination', { page: val, limit: this.pageSize })
-      if (this.autoScroll) {
-        scrollTo(0, 800)
-      }
-    }
-  }
-}
+};
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .pagination-container {
-  width: 50%;
-  background: #fff;
-  padding: 32px 16px;
+    width: 100%;
+    background: #fff;
+    padding: 32px 16px;
 }
 .pagination-container.hidden {
-  display: none;
+    display: none;
 }
 </style>

src/layout/components/Sidebar/Logo.vue

@@ -1,7 +1,7 @@
 <!--
  * @Date: 2021-11-29 11:20:35
  * @LastEditors: JinxuChen
- * @LastEditTime: 2021-11-29 16:59:54
+ * @LastEditTime: 2021-12-09 18:00:28
  * @FilePath: \GpsCardAdmin\src\layout\components\Sidebar\Logo.vue
  * @description:
 -->
@@ -32,7 +32,7 @@ export default {
   data() {
     return {
       title: '禁入区域告警系统',
-      logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
+      logo: require('@/assets/telpo.png')
     }
   }
 }
@@ -53,7 +53,7 @@ export default {
   width: 100%;
   height: 50px;
   line-height: 50px;
-  background: #2b2f3a;
+  background: #304156;
   text-align: center;
   overflow: hidden;
 

src/layout/mixin/ResizeHandler.js

@@ -1,8 +1,14 @@
+/*
+ * @Date: 2021-11-30 15:34:45
+ * @LastEditors: JinxuChen
+ * @LastEditTime: 2021-12-10 10:19:10
+ * @FilePath: \GpsCardAdmin\src\layout\mixin\ResizeHandler.js
+ * @description:
+ */
 import store from '@/store'
 
 const { body } = document
 const WIDTH = 992 // refer to Bootstrap's responsive design
-
 export default {
   watch: {
     $route(route) {

src/settings.js

@@ -1,7 +1,7 @@
 /*
  * @Date: 2021-11-29 11:20:34
  * @LastEditors: JinxuChen
- * @LastEditTime: 2021-11-29 17:01:03
+ * @LastEditTime: 2021-12-10 10:53:56
  * @FilePath: \GpsCardAdmin\src\settings.js
  * @description:
  */
@@ -13,11 +13,11 @@ module.exports = {
    * @type {boolean} true | false
    * @description Whether fix the header
    */
-  fixedHeader: false,
+  fixedHeader: true,
 
   /**
    * @type {boolean} true | false
    * @description Whether show the logo in sidebar
    */
-  sidebarLogo: false
+  sidebarLogo: true
 }

src/store/localStore.js

@@ -1,7 +1,7 @@
 /*
  * @Date: 2021-12-08 16:13:09
  * @LastEditors: JinxuChen
- * @LastEditTime: 2021-12-08 16:24:19
+ * @LastEditTime: 2021-12-10 10:19:33
  * @FilePath: \GpsCardAdmin\src\store\localStore.js
  * @description: store 使用local Storage
  */

src/styles/element-ui.scss

@@ -22,8 +22,17 @@
   left: 0;
   position: relative;
   margin: 0 auto;
+  width: 50%;
+  min-width: 375px;
 }
 
+.el-pagination {
+    white-space: pre-wrap;
+    padding: 2px 5px;
+    color: #303133;
+    font-weight: 700;
+    width: 100%;
+}
 // refine element ui upload
 .upload-container {
   .el-upload {

src/styles/index.scss

@@ -62,4 +62,7 @@ div:focus {
 // main-container global css
 .app-container {
   padding: 20px 10px;
+  .filter-container {
+      margin: 30px 10px;
+  }
 }

src/utils/model.js

@@ -1,8 +1,8 @@
 /*
  * @Date: 2021-11-30 15:09:25
  * @LastEditors: JinxuChen
- * @LastEditTime: 2021-12-08 14:55:27
+ * @LastEditTime: 2021-12-10 10:57:51
  * @FilePath: \GpsCardAdmin\src\utils\model.js
  * @description: 版本号
  */
-export const VersionModel = '1.0.5';
+export const VersionModel = '1.0.6';

src/views/off-limits-manage/off-limits-main/off-limits-type/index.vue

@@ -1,10 +1,10 @@
 <!--
  * @Author: your name
  * @Date: 2021-12-07 15:14:51
- * @LastEditTime: 2021-12-08 15:43:52
- * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-12-09 14:10:49
+ * @LastEditors: JinxuChen
  * @Description:  自动报警分类
- * @FilePath: \GpsCardAdmin\src\views\off-limits-manage\off-limits-main\off-limits-type\newIndex.vue
+ * @FilePath: \GpsCardAdmin\src\views\off-limits-manage\off-limits-main\off-limits-type\index.vue
 -->
 
 <template>
@@ -25,6 +25,7 @@
           :rules="[{ required: true, message: '类别不能为空' }]"
         >
           <el-input
+            :xs="24" :sm="24" :lg="8"
             v-model="currentAddType.typeLabel"
             placeholder="请输入类别"
           ></el-input>

src/views/off-limits-manage/user-exception/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Date: 2021-11-30 09:44:24
  * @LastEditors: JinxuChen
- * @LastEditTime: 2021-12-08 15:13:12
+ * @LastEditTime: 2021-12-09 16:49:54
  * @FilePath: \GpsCardAdmin\src\views\off-limits-manage\user-exception\index.vue
  * @description:
 -->
@@ -10,7 +10,7 @@
         <div class="filter-container">
             <el-button
                 class="filter-item"
-                style="margin-left: 10px;"
+                style="margin-left: 10px"
                 type="primary"
                 icon="el-icon-circle-plus"
                 @click="onAdd"
@@ -52,14 +52,16 @@
             @transform="onTransform"
         ></TTable>
         <!-- 分页 -->
-        <pagination
-            v-show="total>0"
-            :total="total"
-            ref="pages"
-            :page.sync="page"
-            :limit.sync="limit"
-            @pagination="getList"
-        />
+<!--         <div class="page-container"> -->
+            <pagination
+                v-show="total>0"
+                :total="total"
+                ref="pages"
+                :page.sync="page"
+                :limit.sync="limit"
+                @pagination="getList"
+            />
+        <!-- </div> -->
         <!-- 修改弹窗 -->
         <el-dialog :visible.sync="dialogPvVisible" :title="dialogTitle">
             <el-form