Merge branch 'master' of http://101.133.214.75:3000/xf15575941817/PC_FiveFollowing

public/static/config.js

@@ -1,6 +1,6 @@
 // api 请求路径
 var PLATFROM_CONFIG = {};
-// PLATFROM_CONFIG.baseUrl = "http://172.16.120.155:8010/" //杨强本地
+// PLATFROM_CONFIG.baseUrl = "http://172.16.120.229:8010/" //杨强本地
 // PLATFROM_CONFIG.baseUrl = "http://172.16.1.196:8010/"  //超博本地
 
 PLATFROM_CONFIG.baseUrl = "https://wx.ewoogi.com/api" //线上

src/api/login/user.js

@@ -1,24 +1,36 @@
 import request from '@/utils/request'
 
-export function login(data) {
-    return request({
-      url: ``,
-      method: 'post',
-      data
-    })
-  }
-  
-  export function getInfo(data) {
-    return request({
-      url: '',
-      method: 'post',
-      data
-    })
-  }
-  
-  export function logout() {
-    return request({
-      url: '',
-      method: 'post',
-    })
-  }
+export default {
+
+    // 站点总数数据请求
+    login_api(params) {
+        return request({
+            url: `/user/login`,
+            method: 'GET',
+            params: params
+        })
+    },
+}
+
+// export function login(data) {
+//     return request({
+//       url: ``,
+//       method: 'post',
+//       data
+//     })
+//   }
+
+//   export function getInfo(data) {
+//     return request({
+//       url: '',
+//       method: 'post',
+//       data
+//     })
+//   }
+
+//   export function logout() {
+//     return request({
+//       url: '',
+//       method: 'post',
+//     })
+//   }

src/views/login.vue

@@ -1,29 +1,178 @@
 <template>
   <div class="loginBox">
-     <!-- <div class=" absCenterBox"></div> -->
     <div class="loginInnerBox">
       <h2 class="bigTit">智慧用电监控平台</h2>
-
       <p class="loginTitle">用户登录</p>
-      <div class="oneSec">
-        <img class="icon" src="../assets/images/userIcon.png" alt="" />
-        <input type="text" placeholder="请输入登录ID" />
-      </div>
-      <div class="oneSec">
-        <img class="icon" src="../assets/images/passwordIcon.png" alt="" />
-        <input type="text" placeholder="请输入密码" />
-      </div>
-      <div class="remember">
-        <el-checkbox label="记住密码"></el-checkbox>
-      </div>
-      <div class="submitBox">登 录</div>
+
+      <el-form
+        :label-position="labelPosition"
+        :model="loginForm"
+        :rules="rules"
+        ref="loginForm"
+        class="demo-loginForm"
+      >
+        <el-form-item prop="username" class="oneSec">
+          <img class="icon" src="../assets/images/userIcon.png" alt="" />
+          <el-input
+            v-model="loginForm.username"
+            placeholder="请输入登录ID"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item prop="password" class="oneSec">
+          <img class="icon" src="../assets/images/passwordIcon.png" alt="" />
+          <el-input
+            v-model="loginForm.password"
+            type="password"
+            placeholder="请输入密码"
+            auto-complete="new-password"
+            clearable
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <div class="remember">
+          <el-checkbox label="记住密码" v-model="isChecked"></el-checkbox>
+        </div>
+        <el-form-item>
+          <el-button @click="submitForm" class="submitBox">登录</el-button>
+          <!-- <el-button @click="resetForm">重置</el-button> -->
+        </el-form-item>
+      </el-form>
     </div>
   </div>
 </template>
 <script>
+import api from "../api/login/user.js";
 export default {
   data() {
-    return {};
+    return {
+      loginData: "",
+
+      labelPosition: "right",
+
+      loginForm: {
+        username: "",
+        password: "",
+      },
+
+      rules: {
+        username: [
+          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
+          { required: true, message: "请输入用户名", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        password: [
+          { required: true, message: "请输密码", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "密码长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+      },
+
+      isChecked: true, // 记住密码
+    };
+  },
+  mounted() {
+    this.getCookie();
+  },
+
+  methods: {
+    //登录数据对接
+    login_api(query = {}) {
+      api.login_api(query).then((requset) => {
+        this.loginData = requset.data;
+        console.log(this.loginData);
+      });
+    },
+
+    submitForm() {
+      // ref 用在组件中，就表示当前组件  通过 $refs.xxx可以拿到所有ref的集合
+      // this.$refs.loginForm  //当前的表单对象
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          //valid成功为ture，失败为false
+          //发送请求 ，调用登录接口
+          console.log(this.loginForm);
+
+          this.login_api({
+            name: this.loginForm.username,
+            password: this.loginForm.password,
+          });
+
+          // this.$router.push({ path: "/" });
+          // alert('submit!');
+        } else {
+          console.log("校验失败");
+          return false;
+        }
+      });
+
+
+
+
+      if (this.isChecked) {
+        // 记住密码
+        this.setCookie(this.loginForm.username, this.loginForm.password, 30); // 保存期限为30天
+      } else {
+        this.clearCookie(); // 清空 Cookie
+      }
+    },
+
+
+
+
+
+    // 设置Cookie
+    setCookie(username, password, exdays) {
+      // 用户名, 密码, 保存天数
+      let exdate = new Date(); // 获取时间
+      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays);
+      // 字符串拼接cookie
+      window.document.cookie =
+        "userName=" + username + ";path=/;expires=" + exdate.toGMTString();
+      window.document.cookie =
+        "userPwd=" + password + ";path=/;expires=" + exdate.toGMTString();
+    },
+
+    // 读取Cookie
+    getCookie() {
+      // console.log(document.cookie);
+      if (document.cookie.length > 0) {
+        let arr = document.cookie.split("; "); // 这里显示的格式需要切割一下自己可输出看下
+        for (let i = 0; i < arr.length; i++) {
+          let arr2 = arr[i].split("="); // 再次切割
+          // 判断查找相对应的值
+          if (arr2[0] == "userName") {
+            this.loginForm.usernameText = arr2[1]; // 保存到保存数据的地方
+          } else if (arr2[0] == "userPwd") {
+            this.loginForm.passwordText = arr2[1];
+          }
+        }
+      }
+    },
+
+    // 清除Cookie
+    clearCookie() {
+      this.setCookie("", "", -1); // 修改2值都为空，天数为负1天就好了
+    },
+
+    // resetForm() {
+    //   //表单重置
+    //   this.$refs.loginForm.resetFields();
+    // },
+
+
+
+
+
   },
 };
 </script>
@@ -35,13 +184,13 @@ export default {
 .bigTit {
   position: absolute;
   top: -90px;
-    left: 7px;
-    text-align: center;
-    width: 100%;
+  left: 7px;
+  text-align: center;
+  width: 100%;
   color: #00e1eb;
   font-size: 0.625rem;
-  
-//   margin-left:-0.775rem;
+
+  //   margin-left:-0.775rem;
   font-family: PangMenZhengDao Regular, PangMenZhengDao Regular-Regular;
   font-weight: bold;
   letter-spacing: 17px;
@@ -128,13 +277,13 @@ export default {
     }
     .submitBox {
       width: 6.85rem;
-      height: 0.7375rem;
+      // height: 0.7375rem;
       opacity: 1;
       background: #00e1eb;
       color: #001a2b;
       font-size: 0.45rem;
       text-align: center;
-      line-height: 0.7375rem;
+      // line-height: 0.7375rem;
       cursor: pointer;
     }
   }

src/views/site/components/Overview/barChart.vue

@@ -122,7 +122,7 @@ export default {
         grid: {
           left: "6%",
           top: "18%",
-          right: "8%",
+          right: "2%",
           bottom: "22%",
         },
         legend: {