Merge branch 'develop'

Author: lisgroup

README.md

@@ -10,12 +10,12 @@ Laravel Vue admin 管理系统
 ### 主要技术栈
 
 - 后端框架： Laravel 5.5.x
-- 前端 MVVM 框架： Vue 2.5.x
-- 开发工作流： Webpack 4.x
+- 前端 MVVM 框架： Vue 2.6.10
+- 前端构建： Vue-cli
 - 路由： Vue-Router 3.x
 - 数据交互： Axios
 - 代码风格检测： Eslint
-- UI框架： Element-UI 2.4.11
+- UI框架： Element-UI 2.7.2
 - Laravel 的运行环境要求 PHP5.6 以上。
 
 ## 案例演示

admin/package.json

@@ -15,7 +15,8 @@
     "git": "git add ../laravel/public/static/* && git add ../laravel/public/index.html && git commit -m \"chore(view): 构建前端\"",
     "test:unit": "jest --clearCache && vue-cli-service test:unit",
     "test:ci": "npm run lint && npm run test:unit",
-    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
+    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -w -r 0"
   },
   "dependencies": {
     "axios": ">=0.18.1",
@@ -36,7 +37,7 @@
     "@babel/core": "7.0.0",
     "@babel/register": "7.0.0",
     "@vue/cli-plugin-babel": "3.6.0",
-    "@vue/cli-plugin-eslint": "3.6.0",
+    "@vue/cli-plugin-eslint": "^3.9.1",
     "@vue/cli-plugin-unit-jest": "3.6.3",
     "@vue/cli-service": "3.6.0",
     "@vue/test-utils": "1.0.0-beta.29",

admin/src/components/FloatButton/index.vue

@@ -0,0 +1,141 @@
+<template>
+  <div
+    ref="div"
+    class="ys-float-btn"
+    :style="{'width':itemWidth+'px','height':itemHeight+'px','left':left+'px','top':top+'px'}"
+    @click="onBtnClicked"
+  >
+    <slot name="icon" />
+    <p :style="{'font-size': fontSize+'px'}">{{ text }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FloatButton',
+  props: {
+    text: {
+      type: String,
+      default: '默认文字'
+    },
+    itemWidth: {
+      type: Number,
+      default: 60
+    },
+    itemHeight: {
+      type: Number,
+      default: 60
+    },
+    gapWidth: {
+      type: Number,
+      default: 10
+    },
+    coefficientHeight: {
+      type: Number,
+      default: 0.8
+    },
+    fontSize: {
+      type: Number,
+      default: 12
+    }
+  },
+  data() {
+    return {
+      timer: null,
+      currentTop: 0,
+      clientWidth: 0,
+      clientHeight: 0,
+      left: 0,
+      top: 0
+    }
+  },
+  created() {
+    this.clientWidth = document.documentElement.clientWidth
+    this.clientHeight = document.documentElement.clientHeight
+    this.left = this.clientWidth - this.itemWidth - this.gapWidth
+    this.top = this.clientHeight * this.coefficientHeight
+  },
+  mounted() {
+    window.addEventListener('scroll', this.handleScrollStart)
+    this.$nextTick(() => {
+      const div = this.$refs.div
+      div.addEventListener('touchstart', () => {
+        div.style.transition = 'none'
+      })
+      div.addEventListener('touchmove', (e) => {
+        if (e.targetTouches.length === 1) {
+          const touch = event.targetTouches[0]
+          this.left = touch.clientX - this.itemWidth / 2
+          this.top = touch.clientY - this.itemHeight / 2
+        }
+      })
+      div.addEventListener('touchend', () => {
+        div.style.transition = 'all 0.3s'
+        if (this.left > this.clientWidth / 2) {
+          this.left = this.clientWidth - this.itemWidth - this.gapWidth
+        } else {
+          this.left = this.gapWidth
+        }
+      })
+    })
+  },
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.handleScrollStart)
+  },
+  methods: {
+    onBtnClicked() {
+      this.$emit('onFloatBtnClicked')
+    },
+    handleScrollStart() {
+      this.timer && clearTimeout(this.timer)
+      this.timer = setTimeout(() => {
+        this.handleScrollEnd()
+      }, 300)
+      this.currentTop = document.documentElement.scrollTop || document.body.scrollTop
+      if (this.left > this.clientWidth / 2) {
+        this.left = this.clientWidth - this.itemWidth / 2
+      } else {
+        this.left = -this.itemWidth / 2
+      }
+    },
+    handleScrollEnd() {
+      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
+      if (scrollTop === this.currentTop) {
+        if (this.left > this.clientWidth / 2) {
+          this.left = this.clientWidth - this.itemWidth - this.gapWidth
+        } else {
+          this.left = this.gapWidth
+        }
+        clearTimeout(this.timer)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .ys-float-btn {
+    background: rgb(255, 255, 255);
+    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    color: #666666;
+    z-index: 20;
+    transition: all 0.3s;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    position: fixed;
+    bottom: 20vw;
+  }
+
+  .ys-float-btn img {
+    width: 50%;
+    height: 50%;
+    object-fit: contain;
+    margin-bottom: 3px;
+  }
+
+</style>

admin/src/views/home/line.vue

@@ -22,17 +22,21 @@
       <el-table-column prop="carCode" label="车牌" width="" />
       <el-table-column prop="ArrivalTime" label="进站时间" width="" />
     </el-table>
+
+    <float-button :text="Flush" :font-size="16" @onFloatBtnClicked="handleReload()" />
   </div>
 </template>
 
 <script>
 import request from '@/utils/request'
 import fieldSet from '../../components/common/fieldSet'
+import FloatButton from '../../components/FloatButton'
 
 export default {
   name: 'Lines',
   components: {
-    fieldSet
+    fieldSet,
+    FloatButton
   },
   data() {
     return {
@@ -42,7 +46,8 @@ export default {
       to: '',
       href: '',
       tableData: [],
-      tableLine: []
+      tableLine: [],
+      Flush: '刷新'
     }
   },
   created() {