1

src/api/common.js

@@ -32,7 +32,14 @@ export function remoteStatistic(params) {
 
 export function sendSms (params) {
   return request({
-    url: "/api/admin/auth/send-sms",
+    url: "/api/admin/send-sms",
+    method: "get",
+    params
+  })
+}
+export function checkSms (params) {
+  return request({
+    url: "/api/admin/checkout-sms",
     method: "get",
     params
   })

src/api/user.js

@@ -4,7 +4,8 @@ export function login(data) {
   return request({
     url: '/api/admin/auth/login',
     method: 'post',
-    data
+    data,
+    isLoading: false
   })
 }
 

src/components/Charts/Keyboard.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import echarts from 'echarts'
+import * as echarts from 'echarts'
 import resize from './mixins/resize'
 
 export default {

src/components/Charts/LineMarker.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import echarts from 'echarts'
+import * as echarts from 'echarts'
 import resize from './mixins/resize'
 
 export default {

src/views/dataShow/header.vue

@@ -11,7 +11,7 @@
 
     <div class="header-time">
       <p>{{ time.format('YYYY年MM月DD日 HH:mm:ss') }}</p>
-      <p>{{ time.format('dddd') }}</p>
+      <p style="text-align: right">{{ time.format('dddd') }}</p>
     </div>
   </div>
 </template>
@@ -52,10 +52,11 @@ export default {
     font-weight: 600;
     background: linear-gradient(to right, #1d413b, #75f9e2);
     padding: 16px 100px;
-    transform: skewX(-45deg) translateX(-6vw);
+    transform: skewX(-45deg) translateX(-40px);
     position: relative;
 
     & > p {
+      word-break: keep-all;
       transform: skewX(45deg);
     }
 
@@ -83,6 +84,7 @@ export default {
     color: #fff;
     font-size: 22px;
     padding: 0 20px;
+    word-break: keep-all;
   }
 }
 </style>

src/views/login/index.vue

@@ -5,7 +5,7 @@
       linesColor="#ffffff" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="3"
       :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push"> </vue-particles>
 
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
+    <el-form size="small" ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
       label-position="left">
 
       <div class="title-container">
@@ -31,14 +31,14 @@
         </span>
       </el-form-item>
 
-      <el-form-item prop="verification">
+      <el-form-item prop="code">
         <div style="display: flex;">
           <span class="svg-container">
           <svg-icon icon-class="message" />
         </span>
-          <el-input ref="username" v-model="loginForm.verification" placeholder="请输入验证码" name="username" type="text"
+          <el-input ref="username" v-model="loginForm.code" placeholder="请输入验证码" name="username" type="text"
                     tabindex="1" auto-complete="on" />
-          <el-button type="primary" size="small" @click="sendSms">发送验证</el-button>
+          <el-button :loading="msgLoading" type="primary" size="small" :disabled="isVer" @click="sendSms">发送验证{{ isVer ? ('（'+verTime+'）') : '' }}</el-button>
         </div>
       </el-form-item>
 
@@ -54,7 +54,8 @@
   import {
     validUsername
   } from '@/utils/validate'
-
+  import { login, getInfo } from "@/api/user";
+  import { sendSms, checkSms } from "@/api/common"
   const defaultSettings = require('../../../src/settings.js')
   export default {
     name: 'Login',
@@ -78,7 +79,7 @@
         loginForm: {
           username: '',
           password: '',
-          verification: ''
+          code: ''
         },
         loginRules: {
           username: [{
@@ -91,15 +92,34 @@
             trigger: 'blur',
             validator: validatePassword
           }],
-          // verification: [{
-          //   required: true,
-          //   trigger: 'blur',
-          //   message: '请输入验证码'
-          // }]
+          code: [{
+            required: true,
+            trigger: 'blur',
+            message: '请输入验证码',
+            validator: (rule, value, callback) => {
+              if (this.loginForm.username === 'admin') {
+                callback()
+                return
+              }
+              if (value.length !== 4) {
+                callback(new Error('密码输入错误'))
+              } else {
+                callback()
+              }
+            }
+          }]
         },
+        msgLoading: false,
         loading: false,
         passwordType: 'password',
-        redirect: undefined
+        redirect: undefined,
+
+        verTime: 60,
+        isVer: false,
+        temp: {
+          mobile: "",
+          token: ""
+        }
       }
     },
     watch: {
@@ -114,8 +134,43 @@
       this.title = defaultSettings.title;
     },
     methods: {
-      sendSms () {
+      async sendSms () {
+        if (this.isVer) return;
 
+        if (this.loginForm.username && this.loginForm.password) {
+          this.msgLoading = true;
+          try {
+            const { access_token } = (await login(this.loginForm))
+            const { mobile } = (await getInfo(access_token))
+            this.temp.mobile = mobile;
+            this.temp.token = access_token;
+            await sendSms({
+              mobile,
+              token: access_token
+            })
+            this.isVer = true;
+            this.verTime = 60;
+            this.$message({
+              message: '验证码已发送',
+              type:'success'
+            })
+            let timer = setInterval(() => {
+              this.verTime--;
+              if (this.verTime <= 0) {
+                this.isVer = false;
+                clearInterval(timer);
+              }
+            }, 1000);
+            this.msgLoading = false;
+          } catch (e) {
+            this.msgLoading = false;
+          }
+        } else {
+          this.$message({
+            message: '请输入登录名和密码',
+            type: 'warning'
+          })
+        }
       },
 
       showPwd() {
@@ -129,9 +184,16 @@
         })
       },
       //处理登录
-      handleLogin() {
-        this.$refs.loginForm.validate(valid => {
+      async handleLogin() {
+        this.$refs.loginForm.validate(async(valid) => {
           if (valid) {
+            if (this.loginForm.username !== 'admin') {
+              await checkSms({
+                mobile: this.temp.mobile,
+                token: this.temp.token,
+                code: this.loginForm.code
+              })
+            }
             this.loading = true
             this.$store.dispatch('user/login', this.loginForm).then(() => {
 

src/views/statics/safetyYear.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <!-- 查询配置 -->
+    <div>
+      <div ref="lxHeader">
+        <LxHeader
+          :icon="$route.meta.icon"
+          :text="$route.meta.title"
+          style="margin-bottom: 10px; border: 0px; margin-top: 15px"
+        >
+          <div slot="content"></div>
+          <slot></slot>
+
+        </LxHeader>
+      </div>
+    </div>
+    <LineMarker width="100%" height="500px"></LineMarker>
+  </div>
+</template>
+
+<script>
+import LxHeader from '@/components/LxHeader';
+import LineMarker from '@/components/Charts/LineMarker.vue'
+export default {
+  components: {
+    LxHeader,LineMarker
+  },
+  data() {
+    return {}
+  },
+  methods: {},
+  computed: {}
+}
+</script>
+
+<style scoped lang="scss">
+</style>