- 1、本文档共40页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
项目6 工业标识解析在产品设备层创新应用——创建标识注册窗口部件
创建标识注册窗口部件如图所示,本案例中茶叶溯源标识的注册信息包括茶叶编码、茶叶名称、包装规格、生产地区、茶叶分类、生产线、原料编码、生产日期、质检情况和企业前缀等十项内容,所有项都有默认填充内容。这个窗口部件的功能模拟了茶叶包装环节的标识注册和标签打印,一旦操作员输入产品所有信息并单击“注册”按钮,系统会自动生成一个唯一的产品标识编码及对应二维码标签,单击“打印”按钮,就可以打印二维码标签(类似3.3.2小节的操作)。
创建标识注册窗口部件由于目前茶叶行业没有标识编码规范,本案例中的产品标识编码采用类似线缆的编码规范:“企业前缀/茶叶分类.企业自定义代码(茶叶编码).厂区产线.日期.产品随机码”图示展示了单击“注册”按钮后生成的标识编码和相应的二维码。
创建标识注册窗口部件1.HTML和CSS资源相比6.2小节介绍的登录授权功能,标识注册需要生成二维码,表现在外部资源是多了一个二维码相关的js文件,如图所示。
创建标识注册窗口部件HTML部分还是采用表格布局,但比登录授权窗口复杂一些,可以将标识注册界面看成六行两列加上最后一行显示结果的表格布局,HTML代码结构如图所示,前六行分别对应从第6、26、46、66、86和106行折叠的代码。
创建标识注册窗口部件图示以第一个dx-field区块为例(第6-25行代码),里面有一个boxOptions区块,包括两个结构一致的区块(第8-15行和第16-23行)。这两个div区块的class属性为“box”,还定义了“data-options”属性;这里可以把box理解为方框所包含的容器空间。每个box里又有一个dx-field区块,相当于在容器里填充内容,内含两个子区块。两个子区块的class属性分别为“dx-field-label”和“dx-field-value”,对应方框里的两列。
创建标识注册窗口部件以第一个方框为例,第一列“dx-field-label”的值为“茶叶编码”,如第10行代码所示;第二列“dx-field-value”的值是一个id为cycode的变量,它的样式(方框)和值(“6632338570308”)都会在JavaScript中定义。对比第8-15行和第16-23行两部分代码,可以看出“data-options”属性中确定了两个box容器的占比(ratio)为1:1,即UI组件宽度一样。后面四行内容的代码(分别从第26、46、66、86行开始折叠)与第一行(这里的“行”是指表格布局里的行)类似,请参考JavaScript部分cydata字段后自行补充。
创建标识注册窗口部件现在来看最后两行,如图626所示,两个按钮的布局类似前面五行,即在boxOptions区域里放两个占比1:1的box区块。而结果显示区域(第116-121行)又分为两个div区块,第一个div区块的id为cyid,会在可见的方框里显示注册后的标识编码;第二个div区块的id为qrcode,会在方框后不可见的区域里显示标识对应的二维码,这个区块还设置style属性为text-align=center以及height属性为180px。
创建标识注册窗口部件CSS部分代码与登录授权窗口部件相同,参见图。
创建标识注册窗口部件2.JavaScript完成HTML和CSS资源后,下面就通过JavaScript代码来设置窗口部件的动态效果。如图展示了JavaScript代码结构,与登录授权部分一样,在完成数据初始化后,通过self.onInit完成部件的初始化,继续调用self的textLayout和btnLayout方法,其中self.btnLayout方法还会调用两个自定义函数,用于完成标识编码的拼接和标识的注册。这里多了两个工具函数,分别用于生成随机数和字符转码。
创建标识注册窗口部件(1)定义数据字段并初始化可以参考标识注册窗口界面定义数据字段,也可以根据实际需求增减字段。如图所示,除了产品随机码cyno和标识编码cyid,其余10个字段分别对应HTML中相应的id,所有字段都是字符串类型,字段初始值仅供参考。这里企业前缀prefix的初始值“88.121.19792”已经在前序章节中多次使用,如需要注册其他企业前缀,可修改该值。
创建标识注册窗口部件(2)重写窗口部件的初始化方法onInit如图所示,重写的self.onInit方法直接调用了textLayout和btnLayout方法,初始化窗口部件并设置按钮事件。至于第19-22行代码的作用,可以先自行思考,会在后面说明。
创建标识注册窗口部件(3)重写self.textLayout方法如图所示,调用jQuery对象的相关方法,设置输入框的初始值和输入要求等。其中包含
您可能关注的文档
- 1 工业互联网标识解析认知.pptx
- 2.1 二级节点及标识编码规范.pptx
- 2.2 二级节点业务管理.pptx
- 3.1 标识载体与实训平台介绍.pptx
- 3.2 条码标识标签的制作与识别.pptx
- 3.3 RFID标识标签的制作与识别.pptx
- 4.1 接口基础知识.pptx
- 4.2 标识解析二级节点接口.pptx
- 5.3 Web前端开发基础.pptx
- 6.1 二级节点登录授权.pptx
- 黑龙江省鸡西市鸡东县第二中学2025届物理高一第一学期期末达标检测试题含解析.doc
- 浙江绍兴一中2025届物理高二上期中达标检测模拟试题含解析.doc
- 2025届黑龙江省齐齐哈尔市甘南一中物理高二上期中质量检测试题含解析.doc
- 福建省莆田市第九中学2025届高二物理第一学期期末达标测试试题含解析.doc
- 2025届陕西省富平县物理高一第一学期期中达标检测试题含解析.doc
- 2025届辽宁省葫芦岛锦化高中高一物理第一学期期末学业质量监测试题含解析.doc
- 四川省眉山市青神中学2025届物理高一上期末考试试题含解析.doc
- 黑龙江青冈县一中2025届物理高一第一学期期中综合测试试题含解析.doc
- 2025届辽宁省营口市物理高三上期末联考试题含解析.doc
- 2025届云南省曲靖市宜良县第八中学物理高二第一学期期末复习检测试题含解析.doc
文档评论(0)