验证码

Signed-off-by: lijunqing <lijunqing@dashoo.cn>

src/dashoo.cn/frontend_web/src/components/VCode.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="s-canvas">
+    <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
+  </div>
+</template>
+<script>
+export default {
+  name: 'SIdentify',
+  props: {
+    identifyCode: {
+      type: String,
+      default: '1234'
+    },
+    fontSizeMin: {
+      type: Number,
+      default: 16
+    },
+    fontSizeMax: {
+      type: Number,
+      default: 40
+    },
+    backgroundColorMin: {
+      type: Number,
+      default: 180
+    },
+    backgroundColorMax: {
+      type: Number,
+      default: 240
+    },
+    colorMin: {
+      type: Number,
+      default: 50
+    },
+    colorMax: {
+      type: Number,
+      default: 160
+    },
+    lineColorMin: {
+      type: Number,
+      default: 40
+    },
+    lineColorMax: {
+      type: Number,
+      default: 180
+    },
+    dotColorMin: {
+      type: Number,
+      default: 0
+    },
+    dotColorMax: {
+      type: Number,
+      default: 255
+    },
+    contentWidth: {
+      type: Number,
+      default: 112
+    },
+    contentHeight: {
+      type: Number,
+      default: 38
+    }
+  },
+  methods: {
+    // 生成一个随机数
+    randomNum(min, max) {
+      return Math.floor(Math.random() * (max - min) + min)
+    },
+    // 生成一个随机的颜色
+    randomColor(min, max) {
+      var r = this.randomNum(min, max)
+      var g = this.randomNum(min, max)
+      var b = this.randomNum(min, max)
+      return 'rgb(' + r + ',' + g + ',' + b + ')'
+    },
+    drawPic() {
+      var canvas = document.getElementById('s-canvas')
+      var ctx = canvas.getContext('2d')
+      ctx.textBaseline = 'bottom'
+      // 绘制背景
+      ctx.fillStyle = this.randomColor(
+        this.backgroundColorMin,
+        this.backgroundColorMax
+      )
+      ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
+      // 绘制文字
+      for (let i = 0; i < this.identifyCode.length; i++) {
+        this.drawText(ctx, this.identifyCode[i], i)
+      }
+      this.drawLine(ctx)
+      this.drawDot(ctx)
+    },
+    drawText(ctx, txt, i) {
+      ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
+      ctx.font =
+        this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'
+      var x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
+      var y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
+      var deg = this.randomNum(-45, 45)
+      // 修改坐标原点和旋转角度
+      ctx.translate(x, y)
+      ctx.rotate(deg * Math.PI / 180)
+      ctx.fillText(txt, 0, 0)
+      // 恢复坐标原点和旋转角度
+      ctx.rotate(-deg * Math.PI / 180)
+      ctx.translate(-x, -y)
+    },
+    drawLine(ctx) {
+      // 绘制干扰线
+      for (let i = 0; i < 8; i++) {
+        ctx.strokeStyle = this.randomColor(
+          this.lineColorMin,
+          this.lineColorMax
+        )
+        ctx.beginPath()
+        ctx.moveTo(
+          this.randomNum(0, this.contentWidth),
+          this.randomNum(0, this.contentHeight)
+        )
+        ctx.lineTo(
+          this.randomNum(0, this.contentWidth),
+          this.randomNum(0, this.contentHeight)
+        )
+        ctx.stroke()
+      }
+    },
+    drawDot(ctx) {
+      // 绘制干扰点
+      for (let i = 0; i < 100; i++) {
+        ctx.fillStyle = this.randomColor(0, 255)
+        ctx.beginPath()
+        ctx.arc(
+          this.randomNum(0, this.contentWidth),
+          this.randomNum(0, this.contentHeight),
+          1,
+          0,
+          2 * Math.PI
+        )
+        ctx.fill()
+      }
+    }
+  },
+  watch: {
+    identifyCode() {
+      this.drawPic()
+    }
+  },
+  mounted() {
+    this.drawPic()
+  }
+}
+</script>

src/dashoo.cn/frontend_web/src/pages/login.vue

@@ -19,7 +19,7 @@
 
     <div v-if="activeIndex==0">
       <div class="top-wrapper">
-        <img src="../assets/img/title_login.png" style="height:100px; margin-top: 2px;">
+        <img src="../assets/img/title_login.png" style="height:100px; margin-top: 2px; margin-left: -250px;">
       </div>
       <div class="back-width">
         <div class="login-body">
@@ -82,9 +82,25 @@
                         type="password"
                         v-model="model.password"
                         placeholder="请输入密码"
-                        @keyup.enter.native="loginall()"
                       />
                     </el-form-item>
+                    <el-row>
+                      <el-col :span="16">
+                        <el-form-item label="验证码" prop="verifycode">
+                          <el-input v-model="model.verifycode" placeholder="请输入验证码" @keyup.enter.native="loginall()"></el-input>
+                        </el-form-item>
+                      </el-col>
+                      <el-col :span="8">
+                        <el-form-item>
+                            <div class="identifybox">
+                              <div @click="refreshCode" title="看不清，换一张">
+                                <s-identify :identifyCode="identifyCode"></s-identify>
+                              </div>
+                              <!-- <el-button @click="refreshCode" type='text' class="textbtn">看不清，换一张</el-button> -->
+                            </div>
+                        </el-form-item>
+                      </el-col>
+                    </el-row>
                     <el-button
                       type="primary"
                       :loading="loading"
@@ -177,13 +193,24 @@ import Vue from "vue";
 import Component from "class-component";
 import Sticky from "@/components/Sticky";
 import api from "@/api/rtxservice/rtx";
+import SIdentify from '@/components/VCode.vue'
 @Component({
   data() {
+    const validateVerifycode = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请输入验证码'))
+      } else if (value !== this.identifyCode) {
+        callback(new Error('验证码不正确'))
+      } else {
+        callback()
+      }
+    }
     // form model
     // TODO: remove default values
     const model = {
       username: "",
-      password: ""
+      password: "",
+      verifycode:""
     };
 
     // form validate rules
@@ -191,14 +218,23 @@ import api from "@/api/rtxservice/rtx";
       username: [
         {
           required: true,
+          trigger: 'blur', 
           message: "请输入用户名"
         }
       ],
       password: [
         {
           required: true,
+          trigger: 'blur', 
           message: "请输入密码"
         }
+      ],
+       verifycode: [
+          { 
+            required: true, 
+            trigger: 'blur', 
+            validator: validateVerifycode 
+          }
       ]
     };
 
@@ -212,18 +248,40 @@ import api from "@/api/rtxservice/rtx";
       fileList: [], //文档列表
       activeName: "first",
       activeIndex: "0",
-      flag: 0
+      flag: 0,
+      identifyCode: '',
+      identifyCodes: '1234567890'
     };
   },
 
   created() {
     this.initNoticeListData();
     this.initFileListData();
+    this.identifyCode = ''
+    this.makeCode(this.identifyCodes, 4)
   },
   components: {
-    Sticky
+    Sticky,
+    SIdentify
   },
   methods: {
+      // 生成随机数
+    randomNum(min, max) {
+      return Math.floor(Math.random() * (max - min) + min)
+    },
+    // 切换验证码
+    refreshCode() {
+      this.identifyCode = ''
+      this.makeCode(this.identifyCodes, 4)
+    },
+    // 生成四位随机验证码
+    makeCode(o, l) {
+      for (let i = 0; i < l; i++) {
+        this.identifyCode += this.identifyCodes[
+          this.randomNum(0, this.identifyCodes.length)
+        ]
+      }
+    },
     //获取通知列表
     initNoticeListData() {
       let _this = this;
@@ -304,7 +362,11 @@ import api from "@/api/rtxservice/rtx";
       if (this.loginMode == 1) {
         this.login();
       } else {
-        this.loginptr();
+        this.$refs.user.validate((valid)=> {
+          if(valid){
+            this.loginptr();
+          } 
+        })
       }
     },
     loginptr() {
@@ -326,10 +388,14 @@ import api from "@/api/rtxservice/rtx";
           }else {
             this.$message.warning("账号或密码错误");
           }
+          this.identifyCode = ''
+          this.makeCode(this.identifyCodes, 4)
         })
         .catch(err => {
           this.$message.warning("账号或密码错误");
           console.error(err);
+          this.identifyCode = ''
+          this.makeCode(this.identifyCodes, 4)
         });
     }
   }
@@ -372,6 +438,8 @@ export default class Login extends Vue {
         }else{
           this.$message.warning("账号或密码错误");
         }
+        this.identifyCode = ''
+        this.makeCode(this.identifyCodes, 4)
       } finally {
         this.logging = false;
       }
@@ -386,6 +454,15 @@ export default class Login extends Vue {
 <style lang="scss" scoped>
 @import "../assets/styles/base/variables";
 
+
+.identifybox{
+  margin-top:50px;
+  margin-left: 20px;
+}
+
+.identifybox:hover{
+  cursor:pointer;
+}
 .components-container div {
   margin-top: 20px;
 }
@@ -494,7 +571,7 @@ export default class Login extends Vue {
   right: 0;
   top: 0;
   width: 100%;
-  height: 520px;
+  height: 580px;
 
   /*margin: auto;
   left: 0px;
@@ -525,7 +602,7 @@ export default class Login extends Vue {
   width: 100%;*/
   position: relative;
   max-width: 27rem;
-  top: 40px;
+  top: 17px;
   left: 50%;
   margin-left: 100px;
   font-size: 0.875rem;

src/dashoo.cn/frontend_web/src/pages/oilsupplier/badrecord/index.vue

@@ -71,7 +71,7 @@
         <el-table-column label="不良行为时间" prop="Bak2" align="center" width="100px">
           <template slot-scope="scope">{{changeVal(scope.row.Bak2) }}</template>
         </el-table-column>
-        <el-table-column label="不良行为" prop="Record" align="center" width="900px"></el-table-column>
+        <el-table-column label="不良行为" prop="Record" align="center" width="600px"></el-table-column>
         <el-table-column label="状态" align="center" width="100px">
           <template slot-scope="scope">
             <span v-if="scope.row.Bak3=='1'" style="color:#67C23A">有效</span>
@@ -82,7 +82,7 @@
         <el-table-column label="恢复时间" prop="Bak4" align="center" width="100px"></el-table-column>
 
         <!--内框表格操作栏显示-->
-        <el-table-column label="操作" align="center" fixed="right">
+        <el-table-column label="操作" align="center" fixed="right" width="250px">
           <template slot-scope="scope">
             <el-button type="primary" plain title="编辑" size="mini" @click="edit(scope.row)">编辑</el-button>
             <el-button

src/dashoo.cn/frontend_web/src/pages/system/permission.vue

@@ -8,7 +8,7 @@
         <el-breadcrumb class="heading" style="float: left; margin-left: 5px">
           <el-breadcrumb-item :to="{ path: '/' }">平台首页</el-breadcrumb-item>
           <el-breadcrumb-item :to="{ path: '/system/permission' }">权限管理</el-breadcrumb-item>
-          <el-button @click="changeallpwd">修改默认密码为新的（只用一次）</el-button>
+          <!-- <el-button @click="changeallpwd">修改默认密码为新的（只用一次）</el-button> -->
         </el-breadcrumb>
         <span style="float: right;">
           <el-button size="mini" type="primary" style="margin-left:10px; margin-top: -4px;" @click="opendatadialog(1,null,-1);resetForm('organizeform')">新增权限</el-button>