一种基于VUE的组件开发及展示方法

    公开(公告)号:CN112162729A

    公开(公告)日:2021-01-01

    申请号:CN202011012228.4

    申请日:2020-09-23

    Abstract: 本发明公开了一种基于VUE的组件开发及展示方法,包括创建组件工程配置环境,实现自定义组件库,展示组件功能、代码块及配置说明,打包发布至npm。本发明解决了软件开发过程中现有开源UI组件库无法满足越来越复杂的需求,开发团队内部组件库的技术问题,增强可控性,通过对各类组件展示方式的研究,以示例、源码方式展示组件配置及功能,使开发人员快速掌握并使用组件,提高网站开发人员的工作效率。

    显示屏幕面板的数据维护系统图形用户界面

    公开(公告)号:CN308027563S

    公开(公告)日:2023-05-09

    申请号:CN202230494749.1

    申请日:2022-08-01

    Abstract: 1.本外观设计产品的名称:显示屏幕面板的数据维护系统图形用户界面。
    2.本外观设计产品的用途:用于显示信息。
    3.本外观设计产品的设计要点:在于屏幕中的图形用户界面。
    4.最能表明设计要点的图片或照片:主视图。
    5.图形用户界面的用途:本图形用户界面为显示屏幕面板的数据维护系统图形用户界面,用于管理和维护设备主数据管理平台系统信息;该显示屏幕可用于手机、计算机、平板电脑。
    本外观设计产品用于管理和维护设备主数据管理平台系统信息。
    具体地,在程序界面完成相应指令后,进入主视图,在主视图中,点击 “园区设备”信息栏中的“专业”按钮,显示界面变化状态图1。
    在界面变化状态图1中,点击“新增”按钮,显示界面变化状态图2。
    在界面变化状态图2中,点击“选择参数”按钮,显示界面变化状态图3。
    在界面变化状态图3中,点击“数据项配置”按钮,显示界面变化状态图4。
    在界面变化状态图4中,点击“已选配置项”信息栏,显示界面变化状态图5。
    在界面变化状态图5中,点击“系统管理”按钮,显示界面变化状态图6。
    在界面变化状态图6中,点击“角色管理”按钮,显示界面变化状态图7。
    在界面变化状态图7中,点击“菜单管理”按钮,显示界面变化状态图8。
    在界面变化状态图8中,点击“系统日志”按钮,显示界面变化状态图9。

    显示屏幕面板的空间主数据维护图形用户界面

    公开(公告)号:CN307725666S

    公开(公告)日:2022-12-13

    申请号:CN202230494739.8

    申请日:2022-08-01

    Abstract: 1.本外观设计产品的名称:显示屏幕面板的空间主数据维护图形用户界面。
    2.本外观设计产品的用途:用于显示信息。
    3.本外观设计产品的设计要点:在于屏幕中的图形用户界面。
    4.最能表明设计要点的图片或照片:主视图。
    5.图形用户界面的用途:本图形用户界面为显示屏幕面板的空间主数据维护图形用户界面,用于管理和维护空间结构数据信息;该显示屏幕可用于手机、计算机、平板电脑、可穿戴终端设备。
    6.图形用户界面的人机交互方式:本外观设计产品用于管理和维护空间结构数据信息。
    具体地,在程序界面完成相应指令后,进入主视图,在主视图中,点击“新建园区”按钮,显示界面变化状态图1。
    在界面变化状态图1中,输入“园区信息”,点击“保存”按钮,显示界面变化状态图2。
    在界面变化状态图2中,点击园区信息栏右侧的输入按钮,显示界面变化状态图3。
    在界面变化状态图3中,输入“区域信息”,点击“保存”按钮,显示界面变化状态图4。
    在界面变化状态图4中,点击“操作”栏中的“查看”按钮,显示界面变化状态图5。
    在界面变化状态图5中,点击“区域信息”栏中的“区域名称”按钮,显示界面变化状态图6。
    在界面变化状态图6中,下滑界面显示界面变化状态图7。
    在界面变化状态图4中,点击界面左侧的分枝按钮,显示界面变化状态图8。
    在界面变化状态图8中,点击界面左侧的分枝按钮中具体的建筑之一,显示界面变化状态图9。
    在界面变化状态图8中,上滑界面显示界面变化状态图9。
    在界面变化状态图8中,点击界面左侧的分枝按钮中具体的建筑之二,显示界面变化状态图10。
    在界面变化状态图8中,点击界面左侧的分枝按钮中具体的楼号按钮,显示界面变化状态图11。
    在界面变化状态图11中,点击界面左侧的具体的楼层按钮,显示界面变化状态图12。
    在界面变化状态图12中,下滑界面显示界面变化状态图13。
    在界面变化状态图13中,上滑界面显示界面变化状态图14。
    在界面变化状态图14中,点击上传按钮,将图纸上传至界面中,显示界面变化状态图15。
    在界面变化状态图15中,点击上传的空间模块弹出“绑定空间”按钮,点击“绑定空间”按钮,显示界面变化状态图16。
    在界面变化状态图16中,界面显示已绑定的空间模块,点击已绑定的空间模块,弹出信息弹窗,显示界面变化状态图17。
    在界面变化状态图17中,点击“数据项配置”按钮,显示界面变化状态图18。
    在界面变化状态图18中,点击“系统管理”按钮,显示界面变化状态图19。
    在界面变化状态图19中,点击“角色管理”按钮,显示界面变化状态图20。
    在界面变化状态图20中,点击“菜单管理”按钮,显示界面变化状态图21。
    在界面变化状态图21中,点击“系统日志”按钮,显示界面变化状态图22。

    带物联网平台系统图形用户界面显示屏幕面板

    公开(公告)号:CN306004159S

    公开(公告)日:2020-08-21

    申请号:CN201930690651.1

    申请日:2019-12-10

    Abstract: 1.本外观设计产品的名称:带物联网平台系统图形用户界面显示屏幕面板。
    2.本外观设计产品的用途:用于平板、电脑,用于进行系统间对接通信、物联感知终端集成、终端设备控制、存储感知历史数据、感知数据统计分析。
    3.本外观设计产品的设计要点:在于面板显示的运行配置和运行情况的界面内容。
    4.最能表明设计要点的图片或照片:界面变化状态图1。
    5.图形用户界面的用途:产品的图形用户界面用于多种协议物联网平台的配置和设备控制管理。
    在主视图中输入用户名、密码之后,点击“立即登录”按键后,进入界面变化状态图1。
    Ⅰ. 在界面变化状态图1中,点击“通讯服务”显示界面变化状态图2。
    A.在界面变化状态图2中,点击“通讯流程”标签显示界面变化状态图3。
    A1.在界面变化状态图3中,点击“新增”按钮显示界面变化状态图4。
    A2.在界面变化状态图4中,选中左侧“MQTT监听”并拖拽入中间白色区域,显示界面变化状态图5。
    A3.在界面变化状态图5中,点击左侧“转发”后选中并拖拽“MQTT转发”,显示界面变化状态图6。
    B.在界面变化状态图2中,点击“通讯引擎”标签后,显示界面变化状态图7。
    B1.在界面变化状态图7中,点击“查看详情”按钮,显示界面变化状态图8。
    B2.在界面变化状态图8中,点击“MQTT监听”显示界面变化状态图9。
    Ⅱ. 在界面变化状态图1中,点击“设备管理”,进入界面变化状态图10。
    A.在界面变化状态图10中,点击“设备对象”标签显示界面变化状态图11。
    A1.在界面变化状态图11中,点击“设备名称”列的链接显示界面变化状态图12。
    A2.在界面变化状态图12中,拖动横向滚动条至右侧,显示界面变化状态图13。
    A3.在界面变化状态图13中,点击“读写”按钮,显示界面变化状态图14。
    A4.在界面变化状态图13中,点击“绑定协议”列的“详情”链接,显示界面变化状态图15。
    B.在界面变化状态图10中,点击“设备检索”标签后,显示界面变化状态图16。
    C.在界面变化状态图10中,点击“设备模型”标签后,显示界面变化状态图17。
    D.在界面变化状态图10中,点击“专业维护”标签后,显示界面变化状态图18。
    E.在界面变化状态图10中,点击“空间管理”标签后,显示界面变化状态图19。
    F.在界面变化状态图10中,点击“设备空间”标签后,显示界面变化状态图20。
    Ⅲ. 在界面变化状态图1中,点击菜单的选项“协议配置”,显示界面变化状态图21。
    A.在界面变化状态图21中,鼠标浮动到“Http配置”后,点击“HttpClient配置”标签,显示界面变化状态图22。
    A1. 在界面变化状态图22中,点击“+”添加按钮,显示界面变化状态图23。
    A2.在界面变化状态图23中,输入内容,点击“保存”按钮,显示界面变化状态图24。
    A3.在界面变化状态图24中,点击“详情”按钮,进入界面变化状态图25。
    B.在界面变化状态图21中,点击“BACnet配置”标签后,显示界面变化状态图26。
    B1. 在界面变化状态图26中,点击“+”添加按钮,显示界面变化状态图27。
    B2. 在界面变化状态图26中,点击“详情”按钮,显示界面变化状态图28。
    B3. 在界面变化状态图28中,点击“新增”按钮,显示界面变化状态图29。
    B4. 在界面变化状态图29中,输入内容,点击“保存”按钮,显示界面变化状态图30。
    B5. 在界面变化状态图30中,点击“扫描”按钮,显示界面变化状态图31。
    B6. 在界面变化状态图31中,点击“扫描”按钮,显示界面变化状态图32。
    B7. 在界面变化状态图32中,点击“添加全部”按钮后,再点击“返回”按钮,显示界面变化状态图33。
    B8. 在界面变化状态图33中,点击“属性路径”列的输入框,输入内容后自动保存,显示界面变化状态图34。
    B9. 在界面变化状态图34中,鼠标点击“属性路径”列的链接,显示界面变化状态图35。
    B10. 在界面变化状态图33中,点击“属性映射”按钮,显示界面变化状态图36。
    B11. 在界面变化状态图36中,输入“设备”后并选择,显示界面变化状态图37。
    C.在界面变化状态图21中,点击“Modbus配置”标签后,显示界面变化状态图38。
    C1. 在界面变化状态图38中,点击“详情”按钮,显示界面变化状态图39。
    C2. 在界面变化状态图39中,点击“编辑”按钮,显示界面变化状态图40。
    C3. 在界面变化状态图39中,点击“详情”按钮,显示界面变化状态图41。
    Ⅳ. 在界面变化状态图1中,点击“数据服务”,显示界面变化状态图42。
    A.在界面变化状态图42中,点击“设备组装”标签后,显示界面变化状态图43。
    A1.在界面变化状态图43中,点击“+”添加按钮,显示界面变化状态图44。
    A2.在界面变化状态图44中,输入内容,点击“保存”按钮,显示界面变化状态图45。
    A3.在界面变化状态图45中,点击“详情”按钮,显示界面变化状态图46。
    A4.在界面变化状态图46中,点击“搜索”按钮,显示界面变化状态图47。
    B.在界面变化状态图42中,点击“数据授权”标签后,显示界面变化状态图48。
    Ⅴ. 在界面变化状态图1中,点击“全局配置”,显示界面变化状态图49。
    A.在界面变化状态图49中,点击“属性值监听”标签后,显示界面变化状态图50。
    A1.在界面变化状态图50中,点击“监听范围”为“指定设备”的“详情”按钮,显示界面变化状态图51。
    A2.在界面变化状态图51中,点击左侧列表的“搜索”按钮,显示界面变化状态图52。
    A3.在界面变化状态图50中,点击“监听范围”为“指定属性”的“详情”按钮,显示界面变化状态图53。
    A4.在界面变化状态图53中,在左侧部分输入“属性名称”,点击“搜索”按钮,显示界面变化状态图54。
    A5.在界面变化状态图54中,勾选列表行后,点击“向右添加”按钮,显示界面变化状态图55。
    B.在界面变化状态图49中,鼠标移至“系统设置”后,点击“功能维护”标签后,显示界面变化状态图56。
    C.在界面变化状态图49中,鼠标移至“系统设置”后,点击“角色管理”标签后,显示界面变化状态图57。
    Ⅵ. 在界面变化状态图1中,点击“日志管理”,显示界面变化状态图58。
    A.在界面变化状态图58中,点击“采集异常监测”标签后,显示界面变化状态图59。
    A1.在界面变化状态图59中,点击“异常摘要”列的链接,显示界面变化状态图60。

    带有图形用户界面的电脑(系统配置平台)

    公开(公告)号:CN305801621S

    公开(公告)日:2020-05-22

    申请号:CN201930460071.3

    申请日:2019-08-23

    Abstract: 1.本外观设计产品的名称:带有图形用户界面的电脑(系统配置平台)。
    2.本外观设计产品的用途:用于运行程序及通信。
    3.本外观设计产品的设计要点:在于电脑显示的图形用户界面的界面内容。
    4.最能表明设计要点的图片或照片:界面变化状态图19。
    5.无设计要点,省略后视图、左视图、右视图、俯视图、仰视图。
    6.图形用户界面的用途:系统配置平台界面为系统配置内容及参数的展示。
    主视图用于用户登录;在主视图中输入用户名、密码之后,点击“登录”按键后,进入界面变化状态图1;在界面变化状态图1中,点击右上方的Notifications图标按钮,弹出浮动框,进入界面变化状态图2;在界面变化状态图1中,点击右上方的Tasks图标按钮,弹出下拉选项,进入界面变化状态图3;在界面变化状态图1中,点击右上方的Messages图标按钮,弹出下拉选项,进入界面变化状态图4;在界面变化状态图1中,鼠标点击“个人中心”后,再点击退出,进入界面变化状态图5;在界面变化状态图1中,点击菜单“Basic基础”,进入界面变化状态图6;在界面变化状态图6中,点击“Transition过渡动画”,进入界面变化状态图7;在界面变化状态图1中,点击菜单“Form表单”,进入界面变化状态图8;在界面变化状态图1中,点击菜单“Data数据”,进入界面变化状态图9;在界面变化状态图9中,点击“Pagination分页”,进入界面变化状态图10;在界面变化状态图1中,点击菜单“Notice通知”,进入界面变化状态图11;在界面变化状态图11中,点击“Loading加载”,进入界面变化状态图12;在界面变化状态图1中,点击菜单“Navigation”,进入界面变化状态图13;在界面变化状态图1中,点击菜单“Others其他组件”,进入界面变化状态图14;在界面变化状态图14中,点击“Anchor锚点”,进入界面变化状态图15;在界面变化状态图14中,点击“Drawer抽屉”,进入界面变化状态图16;在界面变化状态图1中,点击菜单“fontawesome图标”,进入界面变化状态图17;在界面变化状态图1中,点击菜单“demoPage实例页面”,进入界面变化状态图18;在界面变化状态图18中,点击“园首应用”,进入界面变化状态图19;在界面变化状态图18中,点击“Table折叠行”,进入界面变化状态图20;在界面变化状态图18中,点击“Gallery图片集”,进入界面变化状态图21;在界面变化状态图18中,点击“Login登录”,进入界面变化状态图22;在界面变化状态图1中,点击菜单“更新日志”,进入界面变化状态图23。

    带事件处理管理图形用户界面的显示屏幕面板

    公开(公告)号:CN306512517S

    公开(公告)日:2021-05-04

    申请号:CN202030706561.X

    申请日:2020-11-20

    Abstract: 1.本外观设计产品的名称:带事件处理管理图形用户界面的显示屏幕面板。
    2.本外观设计产品的用途:用于电脑、平板,用于显示图形用户界面。
    3.本外观设计产品的设计要点:在于显示屏幕面板显示的界面内容。
    4.最能表明设计要点的图片或照片:界面变化状态图1。
    5.本外观设计的后视图、左视图、右视图、俯视图、仰视图无设计要点,省略后视图、左视图、右视图、俯视图、仰视图。
    6.图形用户界面的用途:产品的图形用户界面用于进行事件处理管理。
    主视图为事件处理管理软件的首页。
    在主视图中点击左侧导航栏的“事件管理”显示界面变化状态图1;在界面变化状态图1中拖动列表横向滚动条显示界面变化状态图2;在界面变化状态图2中点击列表操作列“指派”按钮显示界面变化状态图3;在界面变化状态图1中点击列表详情列的展开按钮显示界面变化状态图4。
    在主视图中点击左侧导航栏的“维修验收”显示界面变化状态图5;在界面变化状态图5中拖动列表横向滚动条显示界面变化状态图6;在界面变化状态图5中点击列表订单号列中的数字编码显示界面变化状态图7。
    在主视图中点击左侧导航栏的“事件投诉”显示界面变化状态图8;在界面变化状态图8中点击列表操作列“投诉”按钮显示界面变化状态图9。
    在主视图中点击左侧导航栏的“投诉处理”显示界面变化状态图10;在界面变化状态图10中点击列表操作列“待处理,点击处理”按钮显示界面变化状态图11。
    在主视图中点击左侧导航栏的“报修分类维护”显示界面变化状态图12;在界面变化状态图12中点击列表“一级分类”行显示界面变化状态图13。

    用于电脑的图形用户界面(系统管理平台)

    公开(公告)号:CN305631136S

    公开(公告)日:2020-02-28

    申请号:CN201930424187.1

    申请日:2019-08-06

    Abstract: 1.本外观设计产品的名称:用于电脑的图形用户界面(系统管理平台)。
    2.本外观设计产品的用途:用于运行软件及进行通信。
    3.本外观设计产品的设计要点:在于电脑显示的系统管理平台界面内容。
    4.最能表明设计要点的图片或照片:界面变化状态图6。
    5.惯常设计,省略左视图、右视图、后视图、仰视图、俯视图。
    6.图形用户界面的用途:产品的系统管理平台界面用于各专业平台的监管和控制。
    主视图用于用户登录,在主视图中输入用户名、密码之后,点击“登录”按键后,进入界面变化状态图1。
    Ⅰ. 在界面变化状态图1中,点击右上方的“任务”图标按钮,弹出浮动框,进入界面变化状态图2。
    Ⅱ. 在界面变化状态图1中,点击右上方的“username”,弹出下拉选项,进入界面变化状态图3。
    在界面变化状态图1中,鼠标置于“个人中心”,点击后,进入界面变化状态图4。
    Ⅲ. 在界面变化状态图1中,点击菜单“demoPage示例页面”,进入界面变化状态图5。
    在界面变化状态图5中,点击菜单“路线列表”,进入界面变化状态图6。
    在界面变化状态图6中,点击图标按钮“”,进入界面变化状态图7。
    在界面变化状态图6中,点击图标按钮“查询”,进入界面变化状态图8。
    在界面变化状态图6中,点击图标按钮“新建”,进入界面变化状态图9。
    在界面变化状态图9中,输入表单内容后,点击“确定”按钮,进入界面变化状态图10。
    在界面变化状态图6中,点击图标按钮“新建”,进入界面变化状态图11。
    在界面变化状态图11中,点击“确定”按钮,如果无法删除进入界面变化状态图12,如果删除成功界面变化状态图13。
    在界面变化状态图6中,鼠标置于“10条/每页”,点击后进入界面变化状态图14。
    Ⅳ. 在界面变化状态图1中,点击菜单“Table 折叠行”,进入界面变化状态图15。
    在界面变化状态图15中,点击列表内“”折叠按钮后,进入界面变化状态图16。
    Ⅴ. 在界面变化状态图1中,点击菜单“Gallery 图片集”,进入界面变化状态图17。
    在界面变化状态图17中,鼠标置于图片上,进入界面变化状态图18。
    在界面变化状态图18中,点击“放大”按钮,进入界面变化状态图19。
    在界面变化状态图19中,鼠标置于右侧箭头“”上,进入界面变化状态图20。
    在界面变化状态图19中,点击右上方“缩略图”按钮,进入界面变化状态图21。
    在界面变化状态图19中,点击右上方“播放”按钮,进入界面变化状态图22。
    Ⅵ. 在界面变化状态图1中,如果无网络情况下,进入界面变化状态图23。

Patent Agency Ranking