byh24/11/9完成登录和用户管理

src/lsjbxm/jituangongneng/rule.vue

@@ -446,7 +446,9 @@ export default {
                 });
 
 
-            }).catch(()=>{})
+            }).catch((error)=>{
+                console.error("失败:", error);
+            })
 
         },
 
@@ -547,7 +549,9 @@ export default {
                     console.error("删除失败:", error);
                 });
 
-            }).catch(()=>{})
+            }).catch(error=>{
+                console.error("失败:", error);
+            })
 
         },
 

src/lsjbxm/jituangongneng/yonghuguanli.vue

@@ -19,21 +19,21 @@
                         <el-col :span="5">
                             <div class="grid-content ep-bg-purple">
                                 <span>用户名称</span>
-                                <el-input v-model="yhmc" style="width: 170px" placeholder="请输入用户名称" />
+                                <el-input v-model="username" style="width: 170px" placeholder="请输入用户名称" />
                             </div>
                         </el-col>
                         <el-col :span="5">
                             <div class="grid-content ep-bg-purple">
                                 <span>手机号码</span>
-                                <el-input v-model="sjhm" style="width: 170px" placeholder="请输入手机号码" />
+                                <el-input v-model="dianhua" style="width: 170px" placeholder="请输入手机号码" />
                             </div>
                         </el-col>
                         <el-col :span="5">
                             <div class="grid-content ep-bg-purple">
                                 <span>状态</span>
-                                <el-select v-model="zt" placeholder="用户状态" style="width: 170px">
-                                    <el-option> 0</el-option>
-                                    <el-option> 1</el-option>
+                                <el-select v-model="zhuangtai" placeholder="用户状态" clearable="true" style="width: 170px">
+                                    <el-option label="正常" value="1"/>
+                                    <el-option label="停用" value="0"/>
                                 </el-select>
                             </div>
                         </el-col>
@@ -42,35 +42,32 @@
                                 <span>创建时间</span>
                                 <div class="demo-datetime-picker">
                                     <el-date-picker
-                                        v-model="chuangjianshijian"
+                                        v-model="chuangjiantime"
                                         type="daterange"
-                                        start-placeholder="开始日期"
-                                        end-placeholder="结束日期"
+                                        start-placeholder="开始"
+                                        range-separator="到"
+                                        end-placeholder="结束"
                                         format="YYYY-MM-DD HH:mm:ss"
                                         date-format="YYYY/MM/DD ddd"
                                         time-format="A hh:mm:ss"
                                     />
                                 </div>
-
-
-
                             </div>
                         </el-col>
-
                     </el-row>
 
                     <el-row :gutter="0">
-                        <el-col :span="3">
+                        <el-col :span="12">
                             <div class="grid-content ep-bg-purple">
-                                <el-button type="primary" >
+                                <el-button type="primary" @click="listyh">
                                     <el-icon><Search /></el-icon>搜索
                                 </el-button>
-                                <el-button  >
+                                <el-button @click="clear_input">
                                     <el-icon><Refresh /></el-icon>重置
                                 </el-button>
                             </div>
                         </el-col>
-                        <el-col :span="21">
+                        <el-col :span="12">
                             <div class="grid-content ep-bg-purple">
 
                             </div>
@@ -80,13 +77,13 @@
                     <el-row :gutter="0">
                         <el-col :span="12">
                             <div class="grid-content ep-bg-purple">
-                                <el-button type="primary" plain  @click="dialogFormVisible = true">
+                                <el-button type="primary" plain  @click="open_button_add">
                                     <el-icon><Plus /></el-icon>新增
                                 </el-button>
                                 <el-button type="success" plain >
                                     <el-icon><EditPen /></el-icon>修改
                                 </el-button>
-                                <el-button type="danger" plain >
+                                <el-button type="danger" plain @click="open_button_delete">
                                     <el-icon><Delete /></el-icon>删除
                                 </el-button>
                                 <el-button type="info" plain >
@@ -139,9 +136,13 @@
                         </el-table-column>
                         <el-table-column label="操作" align="center">
                             <template v-slot:default="scope">
-                                <el-button type="text" size="small">修改</el-button>
+                                <el-button type="text"
+                                           size="small"
+                                           @click="this.table_update_row=scope.row,open_table_update()">
+                                    修改
+                                </el-button>
                                 <el-button
-                                    @click.prevent="deleteRow(scope.$index, yonghuxinxi)"
+                                    @click.prevent="deleteyh_table(scope.row)"
                                     type="text"
                                     size="small">
                                     删除
@@ -178,14 +179,88 @@
 
 
   <!--    按钮添加用户弹出框-->
-    <el-dialog v-model="dialogFormVisible" title="添加用户" width="500">
+    <el-dialog v-model="dialog_button_add" title="添加用户" width="500">
+        <el-form :model="form">
+            <el-row :gutter="0">
+                <el-col :span="12">
+                    <el-form-item label="状态" label-width="100">
+                        <el-radio-group v-model="form.zhuangtai">
+                            <el-radio label="正常" value="1"/>
+                            <el-radio label="停用" value="0"/>
+                        </el-radio-group>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="归属部门" label-width="100">
+                        <el-select v-model="form.bumen" placeholder="请选择归属部门" clearable="true">
+                            <el-option v-for="(item) in guishubumen" :key="item" :value="item" :label="item">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <el-row :gutter="0">
+                <el-col :span="12">
+                    <el-form-item label="用户名称" required label-width="100">
+                        <el-input v-model="form.username" type="text" placeholder="请输入用户名称" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="用户密码" required label-width="100">
+                        <el-input v-model="form.password" type="password" placeholder="请输入用户密码" show-password/>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="0">
+                <el-col :span="12">
+                    <el-form-item label="角色" label-width="100">
+                        <el-select v-model="form.yonghuleixing" placeholder="请选择角色" clearable="true">
+                            <el-option v-for="(item) in xaunzejuese" :key="item" :value="item" :label="item">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+
+                </el-col>
+            </el-row>
+
+        </el-form>
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button type="primary" @click="addyh">确定</el-button>
+                <el-button @click="dialog_button_add = false">取消</el-button>
+
+            </div>
+        </template>
+    </el-dialog>
+
+    <!--    按钮删除用户弹出框-->
+    <el-dialog v-model="dialog_button_delete" title="修改规则" width="500">
+        <el-form :model="form">
+            <el-form-item label="要删除的用户名称" :label-width="150" label-position="left" required>
+                <el-input v-model="form.username" placeholder="请输入要删除的用户名称" style="width: 200px"/>
+            </el-form-item>
+
+        </el-form>
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button type="primary" @click="deleteyh_button">确定</el-button>
+                <el-button @click="dialog_button_delete = false">取消</el-button>
+            </div>
+        </template>
+    </el-dialog>
+
+    <!--    列表修改用户弹出框-->
+    <el-dialog v-model="dialog_table_update" title="修改用户" width="500">
         <el-form :model="form">
             <el-row :gutter="0">
                 <el-col :span="12">
                     <el-form-item label="状态" label-width="100">
-                        <el-radio-group v-model="yhstate">
-                            <el-radio :value=true>正常</el-radio>
-                            <el-radio :value=false>停用</el-radio>
+                        <el-radio-group v-model="form.zhuangtai">
+                            <el-radio label="正常" value="1"/>
+                            <el-radio label="停用" value="0"/>
                         </el-radio-group>
                     </el-form-item>
                 </el-col>
@@ -202,19 +277,19 @@
             <el-row :gutter="0">
                 <el-col :span="12">
                     <el-form-item label="用户名称" required label-width="100">
-                        <el-input v-model="form.name" type="text" placeholder="请输入用户名称" />
+                        <el-input v-model="form.newusername" type="text" placeholder="请输入用户名称" />
                     </el-form-item>
                 </el-col>
                 <el-col :span="12">
                     <el-form-item label="用户密码" required label-width="100">
-                        <el-input v-model="form.pass" type="password" placeholder="请输入用户密码" show-password/>
+                        <el-input v-model="form.password" type="password" placeholder="请输入用户密码" show-password/>
                     </el-form-item>
                 </el-col>
             </el-row>
             <el-row :gutter="0">
                 <el-col :span="12">
                     <el-form-item label="角色" label-width="100">
-                        <el-select v-model="form.juese" placeholder="请选择角色" clearable="true">
+                        <el-select v-model="form.yonghuleixing" placeholder="请选择角色" clearable="true">
                             <el-option v-for="(item) in xaunzejuese" :key="item" :value="item" :label="item">
                             </el-option>
                         </el-select>
@@ -228,8 +303,8 @@
         </el-form>
         <template #footer>
             <div class="dialog-footer">
-                <el-button type="primary" @click="addYongHuXinXi">确定</el-button>
-                <el-button @click="dialogFormVisible = false">取消</el-button>
+                <el-button type="primary" @click="updateyh_table">确定</el-button>
+                <el-button @click="dialog_table_update = false">取消</el-button>
 
             </div>
         </template>
@@ -252,14 +327,14 @@ export default {
     },
     data() {
         return{
-            yhstate:true,
-            yhmc:"",
-            sjhm:"",
-            zt:"",
+            table_update_row:'',
+            username:'',
+            dianhua:'',
+            zhuangtai:'',
+            chuangjiantime:'',
             // state: "",
-            xaunzejuese:['角色1','角色2','角色3','角色4',],
-            guishubumen:['部门1','部门2','部门3','部门4',],
-            chuangjianshijian:"",
+            xaunzejuese:['供应商','粮库'],
+            guishubumen:['bumen1','bumen2','bumen3','bumen4'],
             yonghuxinxi:[],
             //树形控件
             data:[
@@ -279,12 +354,19 @@ export default {
             },
 
 
-            form:{},
+            form:{
+                newusername:'',
+                fromdate:'',
+                todate:'',
+            },
             yonghulist:[],
-            state:false,
+            fromdate:'',
+            todate:'',
 
             dialogTableVisible:false,
-            dialogFormVisible:false,//按钮添加用户弹出框
+            dialog_button_add:false,    //按钮添加用户弹窗
+            dialog_button_delete:false, //按钮删除用户弹窗
+            dialog_table_update:false,  //列表修改用户弹窗
             formLabelWidth:'140px',
 
 
@@ -295,51 +377,156 @@ export default {
         this.listyh()
     },
     methods:{
+        //拆分日期
+        apart_date_from(){
+            if(this.chuangjiantime.length==0){
+                return ''
+
+            }else {
+                return this.formatDate(new Date(this.chuangjiantime[0])).toString()
+            }
+
+        },
+        apart_date_to(){
+            if(this.chuangjiantime.length==0){
+                return ''
+
+            }else {
+                return this.formatDate(new Date(this.chuangjiantime[1])).toString()
+            }
+
+        },
         //列出用户
         listyh(){
-            http.lsjbGet("/yonghu/queryYongHu.yonghu", null).then(res=>{
-
+            let obj={
+                username: this.username,
+                dianhua: this.dianhua,//有问题后端接不到
+                zhuangtai: this.zhuangtai,
+                // fromdate: this.apart_date_from(),
+                // todate: this.apart_date_to(),
+            }
+            // 根据日期条件动态添加fromdate和todate
+            if (this.chuangjiantime != '') {
+                obj.fromdate = this.apart_date_from();
+                obj.todate = this.apart_date_to();
+            }
+            http.lsjbGet("/yonghu/queryYongHu.yonghu", obj).then(res=>{
                 this.yonghulist = res
+
             })
         },
-        //树形控件
-        generateNumberNodes(start, end) {
-            return Array.from({ length: end - start + 1 }, (_, i) => ({
-                label: `${(start + i).toString().padStart(6, '0')}`, // 为每个节点设置标签
-                // 这里可以添加其他属性，如果需要的话
-            }));
+        //清空输入框
+        clear_input(){
+            this.username=''
+            this.dianhua=''
+            this.zhuangtai=''
+            this.chuangjiantime=''
+        },
+        //清空表单
+        clear_form(){
+            this.form.zhuangtai= '1'//用户状态默认是正常
+            this.form.bumen= ''
+            this.form.username= ''
+            this.form.password= ''
+            this.form.yonghuleixing= ''
+        },
+        //打开按钮添加用户弹窗
+        open_button_add(){
+            this.clear_form()
+            // 打开按钮添加窗口
+            this.dialog_button_add=true
+        },
+        //添加用户
+        addyh(){
+            http.lsjbPost("/yonghu/addYongHu.yonghu",this.form).then(() => {
+                // 更新显示的规则列表
+                return this.listyh(); // 返回 Promise
+            }).then(() => {
+                // 关闭按钮添加窗口
+                this.dialog_button_add = false;
+            }).catch(error => {
+                console.error("添加失败:", error);
+            });
+        },
+        //列表删除用户
+        deleteyh_table(row){
+            this.$confirm("确认删除"+row.username+"吗？").then(()=>{
+                let obj = {
+                    username : row.username
+                }
+                http.lsjbPost("/yonghu/deleteYongHu.yonghu",obj).then(()=>{
+                    //更新显示的规则列表
+                    return this.listyh()
+                }).catch(error => {
+                    console.error("删除失败:", error);
+                });
+            }).catch((error)=>{
+                console.error("失败:", error);
+            })
+        },
+
+        //打开按钮删除用户弹窗
+        open_button_delete(){
+          this.clear_form()
+            //打开按钮删除用户弹窗
+          this.dialog_button_delete = true
+        },
+        //按钮删除用户
+        deleteyh_button(){
+            this.$confirm("确认删除"+this.form.username+"吗？").then(()=>{
+                let obj = {
+                    username : this.form.username
+                }
+                http.lsjbPost("/yonghu/deleteYongHu.yonghu",obj).then(()=>{
+                    //更新显示的规则列表
+                    return this.listyh()
+                }).then(()=>{
+                    //关闭按钮删除规则弹窗
+                    this.dialog_button_delete = false
+                }).catch(error => {
+                    console.error("删除失败:", error);
+                });
+
+            }).catch(error=>{
+                console.error("失败:", error);
+            })
         },
 
-        addYongHuXinXi() {
-            let YH={
-                state:this.yhstate,
-                name:this.form.name,
-                pass:this.form.pass,
-                bumen:this.form.bumen,
-                juese:this.form.juese,
-                date: this.formatDate(new Date()),
+        open_table_update(){
+            this.clear_form()
+            //打开按钮修改用户弹窗
+            this.dialog_table_update = true
+        },
 
+        //列表修改用户
+        updateyh_table() {
+            let obj={
+                username: this.table_update_row.username,         //原名称
+                zhuangtai: this.form.zhuangtai,
+                bumen: this.form.bumen,
+                newusername: this.form.newusername,        //新名称
+                password: this.form.password,
+                yonghuleixing: this.form.yonghuleixing,
             }
-            this.yonghuxinxi.push(YH)
 
-            // 重置表单
-            this.clear()
+            http.lsjbPost("/yonghu/updateYongHu.yonghu",obj).then(()=>{
+                //更新显示的规则列表
+                return this.listyh()
 
-            //关闭弹出框
-            this.dialogFormVisible = false
-
-        },
-        clear(){
-            this.form.name=''
-            this.form.pass=''
-            this.form.bmuen=''
-            this.form.juese=''
-            // 重置用户状态
-            this.yhstate=true
+            }).then(() => {
+                // 关闭列表修改窗口
+                this.dialog_table_update = false;
+            }).catch(error => {
+                console.error("修改失败:", error);
+            });
         },
-        deleteRow(index, rows) {
-            rows.splice(index, 1);
-            // this.yonghuxinxi.pop(this.yonghuxinxi[index])
+
+        //树形控件
+        generateNumberNodes(start, end) {
+            return Array.from({ length: end - start + 1 }, (_, i) => ({
+                label: `${(start + i).toString().padStart(6, '0')}`, // 为每个节点设置标签
+                // 这里可以添加其他属性，如果需要的话
+            }));
         },
         // 设置date格式
         formatDate(date) {
@@ -351,6 +538,32 @@ export default {
             let seconds = date.getSeconds().toString().padStart(2, '0');
             return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
         }
+        // addYongHuXinXi() {
+        //     let YH={
+        //         state:this.yhstate,
+        //         name:this.form.name,
+        //         pass:this.form.pass,
+        //         bumen:this.form.bumen,
+        //         juese:this.form.juese,
+        //         date: this.formatDate(new Date()),
+        //
+        //     }
+        //     this.yonghuxinxi.push(YH)
+        //
+        //     // 重置表单
+        //     this.clear()
+        //
+        //     //关闭弹出框
+        //     this.dialogFormVisible = false
+        //
+        // },
+
+        // deleteRow(index, rows) {
+        //     rows.splice(index, 1);
+        //     // this.yonghuxinxi.pop(this.yonghuxinxi[index])
+        // },
+
+
 
     }
 

src/lsjbxm/xiangmuLogin.vue

@@ -1,74 +1,150 @@
 <template>
-  <div :style=" loginImageDiv">
-  <el-form style="text-align: center;"     class="login" ref="form" :model="form" >
-    <el-form-item style="display: inline-block; margin-top: 10px;" label="粮食集团竞价后台管理系统" >
-    </el-form-item>
-    <el-form-item style=" margin-left: 13px;margin-right: 13px;">
-      <el-input  v-model="form.username" placeholder="账号" :prefix-icon="UserFilled" ></el-input>
-    </el-form-item>
-    <el-form-item style=" margin-left: 13px;margin-right: 13px;">
-      <el-input type="password" v-model="form.password" placeholder="密码" :prefix-icon="Lock" ></el-input>
-    </el-form-item>
-    <el-form-item style=" margin-left: 13px;margin-right: 13px;">
-      <el-input style=" width: 60%" v-model="form.code" placeholder="验证码" ></el-input>
-      <el-image style="margin-left: 13px;width: 100px; height: 30px" :src="require('@/lsjbxm/image/yzm.png')"  ></el-image>
-    </el-form-item>
-    <el-form-item style=" margin-left: 13px;margin-right: 13px;">
-      <el-checkbox-group v-model="form.type">
-        <el-checkbox label="记住密码" name="type"></el-checkbox>
-      </el-checkbox-group>
-    </el-form-item >
-    <el-form-item style=" margin-left: 13px;margin-right: 13px;">
-    <el-button type="primary"  @click="jump" style=" width: 100%">登录</el-button>
-    </el-form-item >
-  </el-form>
+    <div :style=" loginImageDiv">
+        <el-form style="text-align: center;" class="login" ref="form" :model="form">
+            <el-form-item style="display: inline-block; margin-top: 10px;" label="粮食集团竞价后台管理系统">
+            </el-form-item>
+            <el-form-item style=" margin-left: 13px;margin-right: 13px;">
+                <el-input v-model="form.adname" placeholder="账号" :prefix-icon="UserFilled"></el-input>
+            </el-form-item>
+            <el-form-item style=" margin-left: 13px;margin-right: 13px;">
+                <el-input type="password" v-model="form.adpass" placeholder="密码" :prefix-icon="Lock"></el-input>
+            </el-form-item>
+            <el-form-item style=" margin-left: 13px;margin-right: 13px;">
+                <el-input style=" width: 60%" v-model="yzm" placeholder="验证码"></el-input>
+<!--                <el-image style="margin-left: 13px;width: 100px; height: 30px"-->
+<!--                          :src="require('@/lsjbxm/image/yzm.png')"></el-image>-->
+                <div style="margin: 0px; width: 100px; height: 30px" @click="refreshCode">
+                    <!--验证码组件-->
+                    <y-zm :identifyCode="identifyCode"></y-zm>
+                </div>
+
+            </el-form-item>
+            <el-form-item style=" margin-left: 13px;margin-right: 13px;">
+                <el-checkbox-group v-model="rememberpass">
+                    <el-checkbox label="记住密码" name="rememberpass"></el-checkbox>
+                </el-checkbox-group>
+            </el-form-item>
+            <el-form-item style=" margin-left: 13px;margin-right: 13px;">
+                <el-button type="primary" @click="jump" style=" width: 100%">登录</el-button>
+            </el-form-item>
+        </el-form>
     </div>
 </template>
 
 <script>
 
 
-import {UserFilled,Lock} from "@element-plus/icons-vue";
+import {UserFilled, Lock} from "@element-plus/icons-vue";
+import http from "@/lsjbxm/lsjbhttp";
+// 验证码组件
+import YZm from "@/lsjbxm/yzm.vue";
 export default {
 
-  name: "xiangmuLogin",
-  data() {
-    return {
-      UserFilled,
-      Lock,
-      form: {
-        username: '',
-        password: '',
-        code: '',
-      },
-      loginImageDiv: {
-        backgroundImage: "url(" + require("./image/login.png") + ") ",
-        backgroundRepeat: "no-repeat",
-        backgroundSize: "cover",
-        height: "100vh",
-        width: "100%",
-      },
-    }
-  },
-  methods: {
-    jump(){
-      this.$router.replace('/shouye')
+    name: "xiangmuLogin",
+    components: {YZm},
+    data() {
+        return {
+            UserFilled,
+            Lock,
+
+            loginImageDiv: {
+                backgroundImage: "url(" + require("./image/login.png") + ") ",
+                backgroundRepeat: "no-repeat",
+                backgroundSize: "cover",
+                height: "100vh",
+                width: "100%",
+            },
+
+            form: {},
+            adlist:[],
+            an_ad:{},
+
+            yzm:'',
+            rememberpass:'',
+
+            identifyCodes: '1234567890abcdefjhijklinopqrsduvwxyz',//随机串内容
+            identifyCode: '',
+        }
     },
-  }
+    mounted() {
+        //初始化adlist
+        this.queryad()
+        // 初始化验证码
+        this.refreshCode()
+    },
+
+    methods: {
+        queryad(){
+            let obj={
+                adname:this.form.adname,
+                adpass:this.form.adpass,
+            }
+            http.lsjbGet("/ad/queryAd.ad", obj).then(res=>{
+                this.adlist = res
+            })
+        },
+        reset(){
+          this.form.adname = ''
+          this.form.adpass = ''
+          this.yzm = ''
+        },
+        jump() {
+            let obj = {
+                adname: this.form.adname,
+                adpass: this.form.adpass,
+            };
+            let check = false;
+            for (let i = 0; i < this.adlist.length; i++) {
+                this.an_ad = this.adlist[i];
+                if (this.an_ad.adname == obj.adname &&
+                    this.an_ad.adpass == obj.adpass &&
+                    this.yzm == this.identifyCode) {
+                    check = true;
+                    //验证成功跳出循环
+                    break;
+                }
+            }
+            if (check) {
+                //登陆成功
+                this.$router.replace('/shouye');
+            } else {
+                //清空表单
+                this.reset();
+                //刷新验证码
+                this.refreshCode();
+                // this.$router.replace('/');
+            }
+        },
+
+        //验证码
+        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)]
+            }
+        },
+        randomNum (min, max) {
+            return Math.floor(Math.random() * (max - min) + min)
+        },
+
+    }
 }
 </script>
 
 <style scoped>
-.login{
-  position: absolute;
-  top: 30%;
-  left: 0;
-  right: 0;
-  margin: 0 auto;
-  width: 323px;
-  padding: 5px;
-  background-color:white;
-  border-radius: 4px;
+.login {
+    position: absolute;
+    top: 30%;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    width: 323px;
+    padding: 5px;
+    background-color: white;
+    border-radius: 4px;
 
 }
 </style>

src/lsjbxm/yzm.vue

@@ -0,0 +1,146 @@
+
+<template>
+    <div class="s-canvas">
+        <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "yZm",
+    props: {
+        identifyCode: {
+            type: String,
+            default: '1234'
+        },
+        fontSizeMin: {
+            type: Number,
+            default: 25
+        },
+        fontSizeMax: {
+            type: Number,
+            default: 30
+        },
+        backgroundColorMin: {
+            type: Number,
+            default: 255
+        },
+        backgroundColorMax: {
+            type: Number,
+            default: 255
+        },
+        colorMin: {
+            type: Number,
+            default: 0
+        },
+        colorMax: {
+            type: Number,
+            default: 160
+        },
+        lineColorMin: {
+            type: Number,
+            default: 100
+        },lineColorMax: {
+            type: Number,
+            default: 255
+        },
+        dotColorMin: {
+            type: Number,
+            default: 0
+        },
+        dotColorMax: {
+            type: Number,
+            default: 255
+        },
+        contentWidth: {
+            type: Number,
+            default: 112
+        },
+        contentHeight: {
+            type: Number,
+            default: 31
+        }
+    },
+    methods: {
+        // 生成一个随机数
+        randomNum(min, max) {
+            return Math.floor(Math.random() * (max - min) + min)
+        },
+        // 生成一个随机的颜色
+        randomColor(min, max) {
+            let r = this.randomNum(min, max)
+            let g = this.randomNum(min, max)
+            let b = this.randomNum(min, max)
+            return 'rgb(' + r + ',' + g + ',' + b + ')'
+        },
+        drawPic() {
+            let canvas = document.getElementById('s-canvas')
+            let 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'
+            let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
+            let 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 < 5; 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 < 80; 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>
+
+<style scoped>
+.s-canvas {
+    height: 38px;
+
+}
+.s-canvas canvas{
+    margin-top: 1px;
+    margin-left: 5px;
+}
+</style>
+