|
@@ -0,0 +1,346 @@
|
|
|
+<template>
|
|
|
+ <el-container id="login">
|
|
|
+ <!-- 顶部 -->
|
|
|
+ <el-header style="height: 114px;">
|
|
|
+ <!-- 左边logo -->
|
|
|
+ <div class="header-left">
|
|
|
+ 安徽省农产品质量安全监测系统
|
|
|
+ </div>
|
|
|
+ </el-header>
|
|
|
+ <el-form class="form" ref="loginForm" :model="loginForm" label-position="top" :rules="rulesLoginForm" label-width="70px" @keyup.enter="submitForm">
|
|
|
+ <!-- <el-radio v-model="loginForm.user_flag" label="1">监管机构</el-radio>
|
|
|
+ <el-radio v-model="loginForm.user_flag" label="2">检测机构</el-radio> -->
|
|
|
+ <el-form-item prop="login_name">
|
|
|
+ <el-input prefix-icon="el-icon-user-solid" class="login_input" placeholder="用户名称" v-model="loginForm.login_name" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="pwd">
|
|
|
+ <el-input prefix-icon="el-icon-c-scale-to-original" placeholder="密码" v-model="loginForm.pwd" show-password clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <input type="button" name="" value="登录" class="btn" @click="submitForm">
|
|
|
+ <!-- <el-button ref="loginButton" type="success" @click="submitForm"> -->
|
|
|
+ <!-- 登录 -->
|
|
|
+ <!-- </el-button> -->
|
|
|
+ </el-form>
|
|
|
+ <div class="footer">
|
|
|
+ <p>主办单位:安徽省农业农村厅</p>
|
|
|
+ <!-- <p>承办单位:安徽省北斗精准农业信息工程实验室</p> -->
|
|
|
+ <p>技术支持:安徽省北斗精准农业信息工程实验室 农产品安全安徽省重点实验室</p>
|
|
|
+ </div>
|
|
|
+ </el-container>
|
|
|
+
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ name: 'Login',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ met:null,
|
|
|
+ loginForm: {
|
|
|
+ login_name: '',
|
|
|
+ pwd: ''
|
|
|
+ },
|
|
|
+ msg: null,
|
|
|
+ rend:null,
|
|
|
+ containers:null,
|
|
|
+ // 长度校验
|
|
|
+ rulesLoginForm: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 方法绑定
|
|
|
+ methods: {
|
|
|
+ // 检测是否初始化系统
|
|
|
+ // async isSysteInit () {
|
|
|
+ // const formData = JSON.stringify({ useraction: 'isSystemInit' })
|
|
|
+ // const result = await this.$http.post('/user/', formData)
|
|
|
+ // // 判断业务逻辑
|
|
|
+ // if (result.data.ret === 1) {
|
|
|
+ // this.$router.push('init')
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // 表单提交方法
|
|
|
+ submitForm() {
|
|
|
+ // 设置按钮状态
|
|
|
+ const message = this.$message
|
|
|
+ const route = this.$router
|
|
|
+ this.$refs.loginForm.validate(async valid => {
|
|
|
+ window.localStorage.setItem('token', '')
|
|
|
+
|
|
|
+ var loginButton = this.$refs.loginButton
|
|
|
+ // 判断是否合法
|
|
|
+ if (valid) {
|
|
|
+ // loginButton.loading = true
|
|
|
+ const result = await this.$http.post('login', this.loginForm)
|
|
|
+ if (result.data.code == 0) {
|
|
|
+ // loginButton.loading = false
|
|
|
+ // 登录成功保存用户账号
|
|
|
+ // 存储token
|
|
|
+ // 存身份信息
|
|
|
+ // window.sessionStorage.setItem('token', result.data.data.token)
|
|
|
+ window.localStorage.setItem('token', result.data.data.token)
|
|
|
+ // window.sessionStorage.setItem('groupname', result.data.data.groupname)
|
|
|
+ // window.sessionStorage.setItem('name', result.data.data.name)
|
|
|
+ // window.sessionStorage.setItem('qydm', result.data.data.qydm)
|
|
|
+ // window.sessionStorage.setItem('rybh', result.data.data.rybh)
|
|
|
+ // window.sessionStorage.setItem('rymc', result.data.data.rymc)
|
|
|
+ this.containers.style.cssText=("z-index:-1;height:0px;")
|
|
|
+ // this.met.visible=false;
|
|
|
+ // this.rend.setSize(0,0)
|
|
|
+ let di = document.getElementById('3d')
|
|
|
+ di.remove(di.selectedIndex)
|
|
|
+ if(result.data.data.groupname=="检测机构"){
|
|
|
+ route.push('/jc')
|
|
|
+ }else{
|
|
|
+ route.push('/admin')
|
|
|
+ }
|
|
|
+
|
|
|
+ } else if (result.data.code != 0) {
|
|
|
+ // loginButton.loading = false
|
|
|
+ this.containers.style.cssText=("z-index:-1")
|
|
|
+ this.msg = result.data.msg
|
|
|
+ message({
|
|
|
+ message: this.msg,
|
|
|
+ type: 'error',
|
|
|
+ showClose: true,
|
|
|
+ center: true
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ beforeDestroy() {
|
|
|
+ if (this.timer) {
|
|
|
+ clearInterval(this.timer) // 在Vue实例销毁前,清除定时器
|
|
|
+ }
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ container = document.createElement("div");
|
|
|
+ document.body.appendChild(container);
|
|
|
+ this.containers=container
|
|
|
+ camera = new THREE.THREE.PerspectiveCamera(
|
|
|
+ 75,
|
|
|
+ window.innerWidth / window.innerHeight,
|
|
|
+ 1,
|
|
|
+ 10000
|
|
|
+ );
|
|
|
+ container.style.cssText = "position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:1";
|
|
|
+ container.id="3d";
|
|
|
+ camera.position.z = 1000;
|
|
|
+
|
|
|
+ scene =new THREE.THREE.Scene();
|
|
|
+
|
|
|
+ particles = new Array();
|
|
|
+
|
|
|
+ var PI2 = Math.PI * 2;
|
|
|
+
|
|
|
+ var material =new THREE.THREE.ParticleCanvasMaterial({
|
|
|
+ color: 0xe1e1e1,
|
|
|
+ program: function(context) {
|
|
|
+ context.beginPath();
|
|
|
+ context.arc(0, 0, 0.6, 0, PI2, true);
|
|
|
+ context.fill();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.met=material;
|
|
|
+ var i = 0;
|
|
|
+
|
|
|
+ for (var ix = 0; ix < AMOUNTX; ix++) {
|
|
|
+ for (var iy = 0; iy < AMOUNTY; iy++) {
|
|
|
+ particle = particles[i++] = new THREE.THREE.Particle(material);
|
|
|
+ particle.position.x = ix * SEPARATION - AMOUNTX * SEPARATION / 2;
|
|
|
+ particle.position.z = iy * SEPARATION - AMOUNTY * SEPARATION / 2;
|
|
|
+ scene.add(particle);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ renderer =new THREE.THREE.CanvasRenderer();
|
|
|
+ renderer.setSize(window.innerWidth, window.innerHeight);
|
|
|
+ this.rend=renderer;
|
|
|
+ container.appendChild(renderer.domElement);
|
|
|
+
|
|
|
+ document.addEventListener("mousemove", this.onDocumentMouseMove, false);
|
|
|
+ document.addEventListener("touchstart", this.onDocumentTouchStart, false);
|
|
|
+ document.addEventListener("touchmove",this. onDocumentTouchMove, false);
|
|
|
+
|
|
|
+ //
|
|
|
+
|
|
|
+ window.addEventListener("resize", this.onWindowResize, false);
|
|
|
+ },
|
|
|
+ onWindowResize() {
|
|
|
+ windowHalfX = window.innerWidth / 2;
|
|
|
+ windowHalfY = window.innerHeight / 2;
|
|
|
+
|
|
|
+ camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
+ camera.updateProjectionMatrix();
|
|
|
+
|
|
|
+ renderer.setSize(window.innerWidth, window.innerHeight);
|
|
|
+ },
|
|
|
+ onDocumentMouseMove(event) {
|
|
|
+ mouseX = event.clientX - windowHalfX;
|
|
|
+ mouseY = event.clientY - windowHalfY;
|
|
|
+ },
|
|
|
+ onDocumentTouchStart(event) {
|
|
|
+ if (event.touches.length === 1) {
|
|
|
+ event.preventDefault();
|
|
|
+
|
|
|
+ mouseX = event.touches[0].pageX - windowHalfX;
|
|
|
+ mouseY = event.touches[0].pageY - windowHalfY;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onDocumentTouchMove(event) {
|
|
|
+ if (event.touches.length === 1) {
|
|
|
+ event.preventDefault();
|
|
|
+
|
|
|
+ mouseX = event.touches[0].pageX - windowHalfX;
|
|
|
+ mouseY = event.touches[0].pageY - windowHalfY;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ animate() {
|
|
|
+ requestAnimationFrame(this.animate);
|
|
|
+
|
|
|
+ this.render();
|
|
|
+ },
|
|
|
+ render() {
|
|
|
+ camera.position.x += (mouseX - camera.position.x) * 0.05;
|
|
|
+ camera.position.y = 364;
|
|
|
+ camera.position.y += (-mouseY - camera.position.y) * 0.05;
|
|
|
+ camera.lookAt(scene.position);
|
|
|
+
|
|
|
+ var i = 0;
|
|
|
+
|
|
|
+ for (var ix = 0; ix < AMOUNTX; ix++) {
|
|
|
+ for (var iy = 0; iy < AMOUNTY; iy++) {
|
|
|
+ particle = particles[i++];
|
|
|
+ particle.position.y =
|
|
|
+ Math.sin((ix + count) * 0.3) * 50 +
|
|
|
+ Math.sin((iy + count) * 0.5) * 50;
|
|
|
+ particle.scale.x = particle.scale.y =
|
|
|
+ (Math.sin((ix + count) * 0.3) + 1) * 2 +
|
|
|
+ (Math.sin((iy + count) * 0.5) + 1) * 2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ renderer.render(scene, camera);
|
|
|
+
|
|
|
+ count += 0.1;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // this.getImgCode();
|
|
|
+ this.init()
|
|
|
+ this.animate()
|
|
|
+ },
|
|
|
+
|
|
|
+ created() {
|
|
|
+ this.timer = setInterval(this.getTime, 1000)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.el-container{
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+ .el-header {
|
|
|
+ height: 114px;
|
|
|
+ color: black;
|
|
|
+ font-size: 1;
|
|
|
+ line-height: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-left {
|
|
|
+ // float: left;
|
|
|
+ margin-top: 160px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 70px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img {
|
|
|
+ height: 300px;
|
|
|
+ width: 1700px;
|
|
|
+ /* margin: 0 auto; */
|
|
|
+ margin-left: 100px;
|
|
|
+ }
|
|
|
+ .form{
|
|
|
+ z-index: 100000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-right {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ .btn:hover {
|
|
|
+ background: -webkit-linear-gradient(left,#5bd4fd,#2f98fb);
|
|
|
+}
|
|
|
+.btn {
|
|
|
+ background: #43cc99;
|
|
|
+ color: #fff;
|
|
|
+ transition: all .5s;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 300px;
|
|
|
+ height: 56px;
|
|
|
+ border: none;
|
|
|
+ border-radius: 50px;
|
|
|
+}
|
|
|
+
|
|
|
+ .header_time {
|
|
|
+ text-align: center;
|
|
|
+ line-height: 44px;
|
|
|
+ height: 44px;
|
|
|
+ background-color: #468b37;
|
|
|
+ color: white;
|
|
|
+ font-size: 16px;
|
|
|
+ width: 290px;
|
|
|
+ border-bottom-left-radius: 15px;
|
|
|
+ border-bottom-right-radius: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form {
|
|
|
+ // padding: 40px 20px 20px 0px;
|
|
|
+ // background-color: rgba(234, 234, 234, 0.7);
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 400px;
|
|
|
+ height: 250px;
|
|
|
+ margin-top: 200px;
|
|
|
+ color: #333;
|
|
|
+ text-align: center;
|
|
|
+ // line-height: 180px;
|
|
|
+ // border-radius: 10px;
|
|
|
+ // box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
|
|
|
+
|
|
|
+ >div {
|
|
|
+ margin: 28px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .login_input{
|
|
|
+ border-radius: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #login {
|
|
|
+ height: 100%;
|
|
|
+ // background: url(../assets/img/bg01.jpg) bottom center no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer {
|
|
|
+ // background-color: rgb(40,119,22);
|
|
|
+ // background-color: rgba(40, 119, 22, 0.6);
|
|
|
+ // display: flex;
|
|
|
+ // flex-direction: row;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0px;
|
|
|
+ color: #ffffff;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ height: 70px;
|
|
|
+ // padding-top: 5px;
|
|
|
+ // opacity: 0.6;
|
|
|
+ font-weight: 550;
|
|
|
+ // font: 24px bold #0055ff;
|
|
|
+ }
|
|
|
+</style>
|