multiple-police-situations/src/views/login.vue

<template>
  <div class="login-content">
    <div class="ttop">
      <div class="login-card">
        <div style="width: 100%; text-align: center">
          <img style="width: 100px; height: 100px" src="./page/imag/gw.png" alt="" />
        </div>
        <div style="width: 100%; text-align: center; color: #1290f6; font-size: 24px; font-weight: 600; margin-bottom: 20px">多元警情</div>
        <div style="width: 100%; text-align: center; color: #1290f6; font-size: 24px; font-weight: 600; margin-top: 10px">融合及预警管控平台</div>
        <a-form class="margin" :model="loginParams" :rules="loginParamsRule" ref="formRef" style="margin-top: 40px">
          <a-form-item label="账号" name="userNameOrTelephone">
            <a-input placeholder="请输入账号/手机号" v-model:value="loginParams.userNameOrTelephone" />
          </a-form-item>
          <a-form-item label="密码" name="passWord">
            <a-input-password placeholder="请输入密码" v-model:value="loginParams.passWord" />
          </a-form-item>
          <a-form-item :wrapper-col="{span: 24}">
            <a-button type="primary" style="width: 100%" @click="login">登录</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>
<!--  -->
<script setup lang="ts">
import {JsonResult} from '@/axios'
import api from '@/axios'
import {ElMessage} from 'element-plus'
import {ref, onMounted} from 'vue'
import {useRouter} from 'vue-router'
import {useUserStore} from '@/stores/modules/userStore'
import {md5} from 'js-md5'
import {FormInstance} from 'ant-design-vue'
import {notification} from 'ant-design-vue'
import {Rule} from 'ant-design-vue/es/form'
const formRef = ref<FormInstance>(null)
const router = useRouter()
const userStore = useUserStore()
//验证码
const codeBase64Url = ref<string>('')
const loginParamsRule: Record<string, Rule[]> = {
  userNameOrTelephone: [
    {required: true, message: '请输入账号/手机号', trigger: 'change'},
    {min: 3, max: 20, message: '账号长度最小为6最长为20', trigger: 'blur'}
  ],
  passWord: [
    {required: true, message: '请输入密码', trigger: 'change'},
    {min: 3, max: 20, message: '密码长度最小为6最长为20', trigger: 'blur'}
  ],
  code: [
    {required: true, message: '请输入验证码', trigger: 'change'},
    {len: 4, message: '验证码长度为4', trigger: 'blur'}
  ]
}
const loginParams = ref<{
  userNameOrTelephone: string
  passWord: string
  code: string
}>({
  userNameOrTelephone: import.meta.env.VITE_APP_ENV === 'development' ? 'test001' : '',
  passWord: import.meta.env.VITE_APP_ENV === 'development' ? '123456' : '',
  code: import.meta.env.VITE_APP_ENV === 'development' ? '1234' : ''
})

const login = async () => {
  //校验表单
  await formRef.value.validate()
  //执行登录逻辑
  const resp: JsonResult<any> = await api.post<string>(
    '/common/client/user/login',
    {
      // clientType: CLIENT_TYPE,
      name: loginParams.value.userNameOrTelephone,
      password: md5(loginParams.value.passWord)
      // code: loginParams.value.code
    },
    {
      loading: true
    }
  )

  //保存用户信息
  api
    .post('/common/client/user/org/tree4', {
      name: loginParams.value.userNameOrTelephone
    })
    .then((res) => {
      if (res.code == 0) {
        localStorage.setItem('tree4data', JSON.stringify(res.data))
      } else {
      }
    })
  userStore.saveUserInfo(resp.data)
  // console.log('登录',resp.data,loginParams.value.userNameOrTelephone)
  localStorage.setItem('loginname', loginParams.value.userNameOrTelephone)
  localStorage.setItem('geoCode', resp.data.geoCode)
  api
    .post('multialarm/system/alarm/total', {
      name: loginParams.value.userNameOrTelephone,
      parent: resp.data.geoCode
    })
    .then((res) => {
      if (res.code == 0) {
        localStorage.setItem('totaldata', JSON.stringify(res.data))
      }
    })
  // 'https://www.hndyjqrh.cn/api/multialarm/pic/download?creator=geo&file=430000.geojson'
  const url = 'https://www.hndyjqrh.cn/api/multialarm/pic/download?creator=geo&file=' + resp.data.geoCode + '.geojson'
  fetch(url)
    .then((response) => {
      var status = response['status']
      if (status == 500) {
        return new Promise((resovle) => {
          resovle('无数据')
        })
      } else {
        //return  response.json();
        return response.text()
      }
    })
    .then((data: any) => {
      localStorage.setItem('mapdata', data)
      router.push('/index/indexmin').then(() => {
        notification.success({
          message: '登录成功',
          duration: 2,
          placement: 'topLeft'
        })
      })
    })
}
// 验证码
const getCode = async () => {
  const data = await api.get<string>('/common/generate/verification/code', {
    type: 'LOGIN'
  })
  codeBase64Url.value = data.data
}
onMounted(() => {
  if (window.screen.width < 1680 || window.screen.height < 1050) {
    ElMessage.error('当前设备屏幕分辨率过低、可能导致列表出现滚动条、推荐使用1920×1080以上分辨率显示器')
  }
  // getCode();
})
</script>
<style lang="scss" scoped>
.ttop {
  width: 700px;
  height: 400px;
  border-radius: 5px;
  background: linear-gradient(to top, #0b57e4, #4caaf1);
}

.login-content {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to top, #064cd2, #159efe);

  // background: url('/src/assets/images/login/bg.jpg') no-repeat;
  // background-size: 100% 100%;
  .header {
    width: 100%;
    height: 80px;
    background-color: rgba(47, 58, 70, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
  }

  .login-card {
    width: 50%;
    height: 100%;
    border-radius: 0 5px 5px 0;
    background: #fff;
    margin: 0 0 0 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  .bottom {
    width: 100%;
    height: 50px;
    background-color: rgba(47, 58, 70, 0.2);
  }
}
</style>