[EF] 登录页

security-protection-platform/src/api/login/index.js

@@ -0,0 +1,13 @@
import http from '@/http'
const { $default } = http
const api = {
  // 出勤(饼状图)
  doLogin (data) {
    return $default.post('/sp/login/login', data).then(resp => {
      return resp.data
    })
  }
}
export default api

security-protection-platform/src/conf/axios.config.js

@@ -39,7 +39,9 @@ const conf = {
  },
  root: {
    default: {
      baseURL: 'http://10.19.90.34:8018'
      // baseURL: 'http://10.19.90.34:8018'
      // baseURL: 'http://localhost:8018'
      baseURL: '/'
    },
    picurl: {
      baseURL: 'http://10.19.90.34:19000/tool-image/'

security-protection-platform/src/modules/login/index.vue

@@ -0,0 +1,154 @@
<template>
  <div :style="`background-image: url(${loginbg})`" class="index" style="overflow:hidden;" @keydown.enter="onLoginButtonClick">
    <div class="user-form-box">
      <div class="from">
        <h2 class="hello">
          您好,
        </h2>
        <h3 class="welcome">欢迎登录 <span class="system-name">AISI安防一体化管理平台</span></h3>
        <t-form ref="loginForm" :model="loginForm" :rules="loginFormRules">
          <t-form-item prop="userName">
            <t-input v-model="loginForm.userName" placeholder="admin" icon="user-outline" >
            </t-input>
          </t-form-item>
          <t-form-item prop="password">
            <t-input v-model="loginForm.password" placeholder="Abc@1234" type="password" icon="lock-outline" >
            </t-input>
          </t-form-item>
          <t-form-item prop="verifyCode">
            <t-input v-model="loginForm.verifyCode"
                     placeholder="请输入验证码" >
              <img slot="append"
                   :src="verifiyCode"
                   title="点击以刷新验证码"
                   style="height:30px; margin: 0 -12px;cursor:pointer"
                   @click="onVerifiyCodeClick"/>
            </t-input>
          </t-form-item>
          <t-form-item class="mb-0">
            <t-button :loading="loging"
                      color="primary"
                      block
                      @click="onLoginButtonClick">
              <span v-if="!loging">登录</span>
              <span v-else>正在登录...</span>
            </t-button>
          </t-form-item>
        </t-form>
      </div>
    </div>
  </div>
</template>
<script>
import loginbg from '@/assets/images/loginbg.png'
import verifiyCode from '@/assets/images/verifiyCode.jpg'
import loginapi from '@/api/login'
export default {
  filters: {
  },
  components: {
  },
  data() {
    return {
      loginbg: loginbg,
      loging: false,
      rememberMe: false,
      verifiyCode: verifiyCode,
      loginForm: {
        userName: 'admin',
        password: 'Abc@1234',
        verifyCode: 'zubk'
      },
      loginFormRules: {
        userName: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        verifyCode: [
          { required: true, message: '验证码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
  },
  mounted () {
  },
  methods: {
    onVerifiyCodeClick() {
    },
    onLoginButtonClick () {
      if (this.loging) {
        return
      }
      this.loging = true
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          loginapi.doLogin({userCode: this.loginForm.userName, passWord: this.loginForm.password}).then((data) => {
            this.$store.commit('setLogged', true)
            if (this.rememberMe) {
              localStorage.setItem('userName', data.userName)
            } else {
              localStorage.removeItem('userName')
            }
            this.$router.push({ name: 'dashboard' })
          }).catch((e) => {
            this.loging = false
            this.$Message.danger(e)
          })
        } else {
          this.loging = false
          this.$Message.danger(this.$t('aidp.common.input_incorrect', { field: this.$t('aidp.account.username') + this.$t('aidp.common.or') + this.$t('aidp.account.password') }))
        }
      })
    }
  }
}
</script>
<style lang="scss">
.index{
  height:100vh;
  -moz-background-size:100% 100%;
  background-size:100% 100%;
  .user-form-box{
    padding: 20px 40px 20px 40px;
    background-color: #003561;
    position:fixed;
    left:70%;
    top:20%;
    width: 25%;
    height: 65%;
    .from{
      width: 100%;
      height: 100%;
      .hello {
        height:36px;
        font-size:26px;
        font-weight:500;
        color: white;
        line-height:36px;
        margin-bottom: 4px;
      }
      .welcome {
        height:36px;
        font-size:14px;
        font-weight:500;
        color:rgba(0,0,0,1);
        line-height:36px;
        margin-bottom: 24px;
        color: white;
      }
      .system-name {
        font-size: 14px;
        font-weight: 500;
        color: #0079BE;
      }
    }
  }
}
</style>

security-protection-platform/src/modules/videoSurveillance/index.vue

@@ -86,19 +86,19 @@ export default {
        let start = document.getElementsByClassName('vjs-play-control vjs-control vjs-button')
        let volume = document.getElementsByClassName('vjs-volume-panel vjs-control vjs-volume-panel-horizontal')
        let text = document.getElementsByClassName('vjs-live-control vjs-control')
        time.forEach(item => {
          item.remove()
        })
        start.forEach(item => {
          item.remove()
        })
        volume.forEach(item => {
          item.remove()
        })
        text.forEach(item => {
          item.remove()
        })
        bars.forEach((item, index) => {
          time.forEach(item => {
            item.remove()
          })
          start.forEach(item => {
            item.remove()
          })
          volume.forEach(item => {
            item.remove()
          })
          text.forEach(item => {
            item.remove()
          })
          let txt = document.createElement('span')
          txt.innerHTML = '集控室（人脸识别）'
          txt.style.marginLeft = '12px'

security-protection-platform/src/router.js

@@ -27,7 +27,32 @@ export default () => {
  router.beforeEach(async(to, from, next) => {
    // TGlobalLoading.start()
    // const accessRoutes = await store.dispatch('permission/generateRoutes', 'user')
    next()
    /*
     * 在每次视图切换时检查当前用户是否处于登
     * 录状态，如果没有登录则跳转到登录视图
     * 注意此时是调用getter中的isLogged获
     * 取客户端缓存的登录状态。
     * 真实登录状态仅在应用初始化和每次服务
     * 调用时检查即可，在视图（路由）切换时，
     * 为了提升视图切换性能（少请求一次服务），
     * 只需要调用getter中的isLogged进行简
     * 单客户端判断。
     * 参见src/frame.vue和src/store.js文件中的逻辑。
     */
    let isLogged = router.app.$options.store.getters.getLogged
    if (to.meta.ignoreAuth === true) {
      if (isLogged === true && to.path === '/login') {
        router.replace({ name: 'dashboard' })
      } else {
        next()
      }
    } else {
      if (isLogged === false) {
        router.replace({ name: 'login' })
      } else {
        next()
      }
    }
  })
  router.afterEach(() => {

security-protection-platform/src/routes.js

@@ -18,6 +18,13 @@ export const constantRoutes = [
    hidden: true
  },
  {
    name: 'login',
    path: '/login',
    component: () => import('./modules/login'),
    meta: { title: '登录页', icon: 'home', ignoreAuth: true},
    hidden: true
  },
  {
    name: 'dashboard',
    path: '/dashboard',
    redirect: '/',

security-protection-platform/src/store/getters.js

@@ -2,6 +2,7 @@ const getters = {
  sidebar: state => state.app.sidebar,
  size: state => state.app.size,
  device: state => state.app.device,
  permission_routes: state => state.permission.routes
  permission_routes: state => state.permission.routes,
  getLogged: state => state.isLogged
}
export default getters

security-protection-platform/src/store/index.js

@@ -21,7 +21,24 @@ export default () => {
  console.log(getters, modules)
  const store = new Vuex.Store({
    modules,
    getters
    getters,
    state: {
      currentTitle: '',
      screenIsLocked: false,
      lang: 'zh-CN',
      gistoken: '',
      map_param: {
        center: [33.597844, 123.647472],
        zoom: 11
      },
      reLoad: false,
      isLogged: false
    },
    mutations: {
      setLogged(state, token) {
        state.isLogged = token
      }
    }
  })
  console.log(store)
  return store