2021-12-13-CSDN博客

本文链接：https://blog.csdn.net/qq_45984446/article/details/121898172

2021SC@SDUSC

智能研究中心快递柜学习笔记13

首先因为是基于jeecgboot代码生成器生成的代码，所以有部分无效代码存在

格子柜

sducabinet_form

柜子表单的信息：简单描述、详细描述、类型、经、纬度、地点、管理员、用户/教师列表。每一个实体柜子有id、类型、序号、使用模式、开箱码、使用时间、使用者等信息

sducabinet_list

柜子查询界面，根据柜子的描述、类型、地点、用户、操作等信息搜索查询

echart柜子的二位图标呈现，绘制了柜子的echart图表，根据柜子的实际位置、大小，每个柜子有开门、结束使用两个操作

 methods: {
      // 开启柜门
      openGate() {
        console.log(this.temp);
        let url = '/cabinet/sduCabinet_/open';
        let params = {
          cabinetId: this.temp.cabinetId,
          gateId: this.temp.id,
        };
        getAction(url, params).then(res => {
          console.log(res)
        }).finally(() => {
          console.log("---testConsole---end")
        })

      },

// 结束使用
      closeUse() {
        console.log(this.temp);

      },

渲染的柜子点击时还有相应事件发生

点击时改变颜色

myChart.on('click', function (params) {
          console.log(params);
          console.log(params.data.index)
          that.temp = params.data
         
        });

根据四种工作模式设置成不同颜色

根据工作模式渲染，使颜色固定

if (i.mode) {
            i.itemStyle = styleMap[i.mode];
          }

条件渲染颜色，防止修改时颜色抖动

 if (!i.itemStyle) {
            i.itemStyle = {normal: {color: '#'+Math.floor(Math.random()*16777215).toString(16)}};
          }

sduCabinetGateUsageRecordForm

选择柜子的界面，获取用户id，输入格子柜序号，选择开始时间、结束时间，设置开箱码，就可以提交选择了

角色信息界面

sduTeacher_Form 输入老师的姓名、手机微信号、描述、是否为书记、头像等信息

sduTeacher_List 老师表管理界面列出老师表，可以进行新增、删除、导入导出、批量操作，

柜子的详细信息

sduCabinetType_Form 主表单区域展示了柜子的类型名称、生产商、宽高厚尺寸信息等

<!-- 主表单区域 -->
      <a-form :form="form" slot="detail">
        <a-row>
          <a-col :span="24" >
            <a-form-item label="类型的名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['name', validatorRules.name]" placeholder="请输入类型的名称"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24" >
            <a-form-item label="生产商" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['manufacturer', validatorRules.manufacturer]" placeholder="请输入生产商"></a-input>
            </a-form-item>
          </a-col>
......

duCabinetType_list 柜子类型管理页面

同样有增删改查功能，不再赘述。

views视图界面的实现，有账户、仪表板、列表、使用者、404、405等的出错状况等等

他们的层次逻辑关系：

account，后台对用户的统计概况，app.vue界面展示了活跃用户、新增用户的情况

settings，主要是用户基本信息设置界面

settings修改的总体导航页面，可以跳转到基本设置、安全设置、个性化、账户绑定、新消息通知页面

AvatarModal：修改、上传头像界面

BaseSetting：昵称、电子邮件、密码等信息的设置和修改

Custom 个性化：页面整体风格设置，主题色选择配色亮或暗

notification：新消息通知

Security 安全设置：

data: [
          { title: '账户密码' , description: '当前密码强度', value: '强', actions: { title: '修改', callback: () => { this.$message.info('This is a normal message'); } } },
          { title: '密保手机' , description: '已绑定手机', value: '138****8293', actions: { title: '修改', callback: () => { this.$message.success('This is a message of success'); } }  },
          { title: '密保问题' , description: '未设置密保问题，密保问题可有效保护账户安全', value: '', actions: { title: '设置', callback: () => { this.$message.error('This is a message of error'); } }  },
          { title: '备用邮箱' , description: '已绑定邮箱', value: 'ant***sign.com', actions: { title: '修改', callback: () => { this.$message.warning('This is message of warning'); } }  },
          { title: 'MFA 设备' , description: '未绑定 MFA 设备，绑定后，可以进行二次确认', value: '', actions: { title: '绑定', callback: () => { this.$message.info('This is a normal message'); } }  },
        ]