WEB组态

# 主功能区

说明

主功能区包含开始、插入、绘图、图表、vue组件、下载等板块，主要功能可以对元素样式设置，基础图形、视频组件、图表、Vue组件、绘制图形等内置元素的插入，以及Html工程、Vue组件等资源下载功能，具体内容如下。

  • 开始

开始

  • 插入

插入

  • 绘图

绘图

  • 图表

图表

  • vue组件

vue组件

  • 下载

下载

# 开始

TIP

开始菜单主要实现对选中元素的样式进行 快捷的更改，支持单个元素和多个元素样式的同时更改 主要有文字工具、形状工具、填充工具、边框工具、阴影工具
更多更详尽的配置项请在样式栏中进行更多配置

# 文字工具

文字工具

  • 修改字体
    字体支持的格式有： 宋体、 黑体、 微软雅黑、 楷体、 仿宋、 幼圆、 方正姚体、 华文彩云、 华文琥珀、 华文隶书、 Allura、 BlackAndWhitePicture、 Bungee、 BungeeOutline、 DancingScript-Medium、 DigitalNumbers、 Facon、 FasterOne、 FrederickatheGreat、 Frizon、 Italiana、 JiyeSpiral、 Limelight、 McDonaldsFries、 MoonRocks、 MountainsofChristmas-Regular、 NereusItalic-Light、 Nosifer、 Parisienne、 PirataOne、 RobotoSlab-VariableFont_wght、 RubikMaze、 Sacramento、 Satisfy、 Shojumaru、 SpecialElite、 仓耳与墨W01、 仓耳与墨W02、 仓耳与墨W03、 仓耳与墨W04、 仓耳与墨W05、 仓耳小丸子、 仓耳舒圆体W01、 仓耳舒圆体W02、 仓耳舒圆体W03、 仓耳舒圆体W04、 仓耳舒圆体W05、 仓耳非白W01、 仓耳非白W02、 仓耳非白W03、 仓耳非白W04、 仓耳非白W05、 优设标题黑、 品如手写体、 庞门正道标题体增强版、 庞门正道真贵楷体、 文道潮黑体、 文鼎PL简中楷、 智勇手书体、 逐浪萌芽字、 钟齐志莽行书、

  • 字体大小
    输入框；数字控制大小
    A+ ：字体相对当前增大2
    A- ：字体相对当前减小2

  • 字体类型
    加粗
    斜体
    下划线
    删除线
    大写字母

  • 字体颜色
    弹出色板：颜色、透明度
    取色笔

  • 行距
    单倍行距、 1.1 倍行距、 1.25 倍行距、 1.5 倍行距、 1.75 倍行距、 2 倍行距、 3 倍行距、 5 倍行距

  • 对齐方式
    垂直（居上、居中、居下）对齐
    水平（局左、居中、居右）对齐

# 形状工具

文字工具
形状工具内置常用几何形状（矩形、星形、多边形、圆形、椭圆、扇形、环形、扇环、文本、直线、箭头、表格等），可通过拖动，快速应用到图纸中

# 填充工具

填充工具
填充工具包含填充颜色的更改

# 边框工具

边框工具
边框工具包含边框颜色颜色、边框大小

# 阴影工具

阴影工具
阴影工具 包含阴影颜色、阴影大小、横下偏移、纵向便宜等内容的快速修改

# 插入

TIP

插入菜单主要包含常用组件元素，包含了基础形状、媒体组件、扩展组件等

# 基础形状

基础形状
基础形状包含了常用几何图形（矩形、星形、多边形、圆形、椭圆、扇形、环形、扇环、文本、直线、箭头、表格、富文本），基础形状可直接编辑使用，无需进行拓展性配置

# 媒体组件

媒体组件
媒体组件主要包含MP4格式视频、HLS直播流、FLV格式、WebRTC格式、音乐文件格式的流媒体支持，可通过该组件实现视频播放、直播、摄像头监控等功能

# 扩展组件

扩展组件
扩展组件包含Iframe组件，可内嵌外部网页

# 绘图

TIP

绘图菜单主要功能为用户通过鼠标自由绘制图形的功能，主要的功能菜单有画笔类型、画笔工具、阴影工具等

# 画笔类型

画笔类型
画笔类型支持（画笔、钢笔、橡皮）

# 画笔工具

画笔工具
画笔工具支持画笔大小调整、画笔颜色调整、画笔线形（直线、虚线、点虚线等6种类型）、断点形状（锐利、圆滑、平方）、边角形状（直角、圆角、斜接）、闭合端点等

# 阴影工具

阴影工具
阴影工具包含画笔线的阴影宽度、阴影颜色、横向偏移、纵向偏移

# 图表

TIP

图表组件内嵌Echarts图表，主要有基础图表、地图图表、3D图表

# 基础图表

基础图表
基础图表
基础图表包含常用的折线图、柱状图、饼状图、散点图、K线图、雷达图、盒须图、热力图、关系图、树图、矩形图树图、旭日图、平行图、桑基图、漏斗图、仪表盘、象形图、河流图等

# 地图图表

地图图表
地图图表包含Svg地图、geo地图、百度地图

# 3D图表

3D图表
3D图表包含3D柱状图、3D散点图、3D曲面图、3D地图、3D地图、3D折线图、3D地球等

# vue组件

TIP

Vue组件内置 Vue语法支持和ElementUI组件，可通过配置的方式使用
（其中表格组件使用vxe-table）

# 基础图表

基础图表
基础图表
基础图表
基础图表包含自定义空组件、单选框、多选框、输入框、下拉选择器、开关、滑块、日期选择器、上传、穿梭框、form表单、表格、进度条、菜单（横向）、菜单（竖向）、标签页、下拉菜单、对话框、提示框、卡片、走马灯、折叠面板、日历、图片预览、抽屉等组件，用户可根据语法规则自定义内容

# 下载

TIP

下载菜单下，支持图纸下载、构建工具下载、数据源下载

# 图纸下载

图纸下载

  • 下载Html工程：将工程导出为Html
  • 下载全图图片：将图纸导出成图片

# 构建工具

构建工具

  • Gif制作工具：轻量免安装的Gif录制小工具
  • nginx：前端服务器
  • Vue工程模板：vue组件的示例应用代码

# 数据源下载

数据源下载
官方示例的后端数据源代码模板

← 素材区 →