# 1. 技术栈
Vue 3.x、Vuex、ElementUI 3.x、Bootstrap、ZTree、AMap、JQuery。
# 2. 目录说明
├── build -- webpack build
├── config -- webpack config
├── dist -- 静态资源
│ └── static
│ ├── css
│ ├── fonts
│ ├── images
│ ├── img
│ └── js
├── public -- 公共部分（JSON Server）
├── src -- 源代码
│ ├── api -- API接口声明
│ ├── assets -- 静态资源
│ │ ├── css
│ │ ├── fonts
│ │ └── images
│ ├── components -- 自定义组件
│ │ ├── amap -- 高德地图组件
│ │ ├── dropdown -- 下拉组件
│ │ ├── form -- 表单组件
│ │ ├── menu -- 表格组件
│ │ ├── progressbar -- 进度条组件
│ │ ├── select -- Select组件
│ │ ├── table -- 表格组件
│ │ ├── tree -- 树形组件（ZTree）
│ │ └── upload -- 上传组件
│ ├── directives -- 自定义指令
│ ├── mock -- 测试
│ │ └── data
│ ├── router -- 路由
│ ├── store -- 存储（Vuex）
│ │ └── modules
│ ├── utils -- 工具类
│ └── views -- 视图（模块页面）
│ ├── alarm -- 报警
│ ├── bashboard -- 看板
│ ├── carmodel -- 车型
│ ├── center -- 监控中心
│ ├── device -- 设备管理
│ ├── dictionary -- 字典管理
│ ├── driverinfo -- 驾驶员
│ ├── fence -- 电子围栏
│ ├── generator -- 代码生成
│ ├── global -- 全局
│ ├── history -- 历史轨迹
│ ├── home -- 首页
│ ├── job -- 定时调度
│ ├── labelpoint -- 标注点
│ ├── layout -- 页面布局
│ ├── line -- 线路管理
│ ├── login -- 登录
│ ├── menu -- 菜单
│ ├── message -- 消息
│ ├── monitoring -- 监控
│ ├── organization-- 组织
│ ├── permission -- 权限
│ ├── protocol -- 协议
│ ├── resource -- 资源
│ ├── role -- 角色
│ ├── serverresource -- 运维
│ ├── sim -- SIM卡管理
│ ├── system -- 系统管理
│ ├── terminal -- 终端管理
│ ├── trace
│ ├── traditioncar
│ ├── user -- 用户管理
│ └── usergroup -- 用户组
├── static -- 静态资源
├── theme -- 主题（重写了Element-UI）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
# 3. 常用组件
# 3.1 AsideLayout 侧边栏伸缩布局
组件截图
AsideLayout Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| leftWidth | 侧边栏宽度 | Number | -- | 300 |
AsideLayout Slot
| name | 说明 |
|---|---|
| left | 左侧组件 |
| right | 右侧组件 |
# 3.2 BottomButtons 底部按钮
组件截图
BottomButtons Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| data | 生成按钮的数据 | Array | -- | null |
| btnSize | 按钮尺寸 | String | medium / small / mini | null |
data属性说明
[
{
text: '取消',//按钮显示文字
click: _ => this.$emit('close'),//按钮点击执行事件
permission: 'base:vehicle:cancel',//按钮权限控制
disabled: true,//按钮是否禁用
title: '点击取消按钮将关闭该页面'//按钮title
},
{
text: '保存',
click: this.save
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 3.3 Dialog 弹出框组件
组件截图
Dialog Attibutes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| title | 弹框标题 | String | -- | null |
| appendToBody | 是否渲染到body上 | Boolean | -- | true |
| visible | 弹出框是否显示 | Boolean | -- | false |
| showClose | 是否显示关闭按钮 | Boolean | -- | true |
| bottomBtns | 底部按钮 | Array | 参考BottomButtons组件data属性 | null |
Dialog Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| closed | 弹框关闭完 | -- |
# 3.4 Drawer 抽屉组件
组件截图
Drawer Attibutes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| title | 弹框标题 | String | -- | null |
| appendToBody | 是否渲染到body上 | Boolean | -- | true |
| visible | 弹出框是否显示 | Boolean | -- | false |
| showClose | 是否显示关闭按钮 | Boolean | -- | true |
| bottomBtns | 底部按钮 | Array | 参考BottomButtons组件data属性 | null |
Drawer Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| closed | 抽屉关闭完 | -- |
# 3.5 DynamicColTable 动态表格组件
组件截图
DynamicColTable Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| btnWidth | rowBtns生成的列宽 | String | -- | 160px |
| colConfig | 表格列配置信息 | Array | -- | -- |
| tableData | 表格数据 | Array | -- | -- |
| tableHeight | 表格高度 | Number | -- | 150 |
| total | 表格分页数据-总条数 | Number | -- | 0 |
| rowNo | 表格是否显示行标 | Boolean | -- | true |
| rowCheckbox | 表格行是否显示复选框 | Boolean | -- | false |
| rowBtns | 表格行尾操作按钮列（已废弃，使用colConfig/contentType=btns代替） | Boolean/Array | -- | false |
| loading | 表格数据加载中动画是否显示 | Boolean | -- | false |
| filterable | 表格列是否支持用户过滤 | Boolean | -- | true |
| isPagination | 是否显示分页组件 | Boolean | -- | false |
| cellClick | 单元格点击事件回调函数 | Function | -- | null |
| index | 行号计算函数（可不传） | Function | -- | null |
| pageTurning | 翻页事件回调函数,组件加载完毕自动调用一次 | Function | -- | -- |
| pageNum | 分页组件页码 | Number | -- | -- |
| pageSize | 分页组件页容量 | Number | -- | -- |
| selectedRows | 复选框被选中的表格行集合 | Array | -- | [] |
| currentRow | 当前选中行 | Object | -- | {} |
| treeConfig | 属性表格配置项 | Object | -- | null |
| title | 标题，用于在表格顶部显示标题文字 | String/Number | -- | null |
| autoHeight | 表格高度自适应，为true时tableHeight失效 | Boolean | -- | false |
DynamicColTable Methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| setTableHeight | 重新设置表格高度，autoHeight为true时生效 | -- |
| doLayout | 重新调整表格高度、布局 | -- |
colConfig属性说明
[{
name: 'createTime', //列对应的数据属性名称
title: '创建时间', //列头显示的问文字
formatter: row => row.id + row.name //格式化单元格回调函数
},
{
name: 'state',
title: '状态',
minWidth: 60,
formatter: row =>
row.usedCount > 0 ? '已使用' : '未使用'
},
{
contentType: 'btns',
width: 130,
data: [
{
type: 'detail',//按钮类型
click: this.openDetail,//按钮点击事件
permission: 'base:carmodel:detail',//按钮权限控制
filter: row => row.confirm == 1,//按钮是否过滤回调函数
disable: row => row.usedCount > 0//按钮是否禁用回调函数
},
{
type: 'edit',
text: '确认',
click: this.openEdit,
permission: 'base:carmodel:confirm',
filter: row => row.confirm == 0
},
{
type: 'edit',
click: this.openEdit,
permission: 'base:carmodel:edit'
},
{
type: 'delete',
click: row => this.delete([row.id]),
permission: 'base:carmodel:delete'
}
]
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
# 3.6 Form 表单组件
组件截图
Form Attibutes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| title | 表单标题 | String | -- | null |
| data | 表单初始化配置 | Array | -- | -- |
| formModel | 表单绑定数据对象，一般传入空对象，表单自动根据配置填充数据 | Object | -- | {} |
| colsCount | 表单布局一行显示几列 | Number | -- | 2 |
| labelWidth | 表单label宽度 | String | auto/100px | 80px |
| readonly | 表单是否只读 | Boolean | -- | false |
Form Methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| resetFields | 重置表单 | -- |
| validate | 校验表单 | success：校验成功回调函数，error：校验失败回调函数 |
| clearValidate | 清空表单校验结果 | -- |
Form data属性示例
[
{
prop: 'partsCode',//表单元素绑定的属性名
label: '图号',//表单元素label
dataType: 'varchar',//后台数据类型，组件内部会转换成对应的type
required: true,//是否必填项
readonly: this.row.usedCount > 0,//是否只读字段
minlength: 5,//数据最小长度
maxlength: 20,//数据最大长度
rules: [{ trigger: 'blur', validator: this.validatePartsCode }]//自定义校验规则，同element-ui
},
{
prop: 'partsName',
label: '名称',
dataType: 'varchar',
required: true,
maxlength: 20
},
{
prop: 'supplierCode',
label: '供应商',
type: 'searchSelect',//表单元素需要生成的组件类型
searchType: 'supplier',//查询搜索下拉框需要配置的搜索类型，同时需要在SearchSelect组件listConfig属性配置相关查询配置
dataType: 'varchar',
required: false,
rules: []
},
{
prop: 'remark',
type: 'textarea',
label: '备注信息',
dataType: 'varchar',
maxlength: 100,
required: false,
rules: []
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
# 3.7 IndexLayout 列表页面通用布局组件
组件截图
IndexLayout Attibutes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| searchTitle | 查询组件标题 | String | -- | null |
| statistics | 头部统计组件配置数据 | Array | -- | null |
| search | 查询组件配置数据,同TableSearch | Array | -- | null |
| searchExtension | 查询组件高级搜索配置数据，同search | Array | -- | null |
| searchParam | 查询组件查询参数对象，一般传一个空对象 | Object | -- | null |
| searchBtns | 查询组件附加按钮配置，同TableButtons | Array | -- | [] |
| tableBtns | 表格顶部按钮配置，同TableButtons | Array | -- | null |
| table | 表格配置，同DynamicColTable | Object | -- | null |
| drawerData | 抽屉组件配置 | Object | -- | null |
| dialogData | 弹框组件配置 | Object | -- | null |
IndexLayout Methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| tableDoLayout | 重新调整表格布局 | -- |
| closeDrawer | 关闭抽屉 | -- |
| closeDialog | 关闭弹框 | -- |
IndexLayout Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| updated | 弹框或者抽屉组件内部组件的updated事件 | -- |
| search | 表格数据查询事件，默认加载完毕或者点击查询按钮执行一次 | 查询组件参数对象或者分页参数对象 |
IndexLayout drawerData属性示例
{
activedIndex: null,//当前抽屉显示的内容，取contents数组中对应元素下标，为null时不显示
contents: [modelForm],//抽屉中需要展示的组件，可以通过activedIndex设置切换
prop: {
id: null, scoreType: ''//为抽屉内部组件传入参数，支持动态修改。内部组件可以通过props接收该参数
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
IndexLayout dialogData属性示例
{
activedIndex: null,//当前弹框显示的内容，取contents数组中对应元素下标，为null时不显示
contents: [modelForm],//弹框中需要展示的组件，可以通过activedIndex设置切换
prop: {
id: null, scoreType: ''//为弹框内部组件传入参数，支持动态修改。内部组件可以通过props接收该参数
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 3.8 SearchSelect 搜索下拉框组件
组件截图
SearchSelect Attibutes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| v-model | 下拉框选中项的值，多选时为数组 | Number/String/Array | -- | |
| type | 搜索组件类型 | String | user/role/... | -- |
| readonly | 组件是否为只读状态 | Boolean | -- | false |
| placeholder | 占位符 | String | -- | -- |
| multiple | 是否支持多选 | Boolean | -- | false |
| delay | 延迟查询（ms） | Number | -- | 500 |
| defaultSelect | 如果查询结果只有一条时，是否默认选中 | Boolean | -- | true |
| displayMember | 下拉框选项显示值绑定的属性名，不传时取组件内部配置 | String | -- | null |
| valueMember | 下拉框选项实际值绑定的属性名 | String | -- | null |
| useSearchMethodForDetail | 使用查询列表的api初始化选中项详情 | Boolean | -- | false |
| keywordMinLength | 触发查询的最小关键字长度 | Number | -- | 0 |
SearchSelect Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 选中项发生改变时的回调函数 | 选中项的值，多选时为数组 |
# 3.9 SelectInput 选择弹框组件
组件截图
SelectInput Attibutes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| label | label属性 | String | -- | -- |
| placeholder | 占位符 | String | -- | -- |
| width | 组件宽度 | Boolean | -- | false |
| placeholder | 占位符 | String | -- | -- |
| clearable | 是否可以清空内容 | Boolean | -- | true |
SelectInput Methods
| 方法名 | 说明 | 回调参数 |
|---|---|---|
| showSlot | 显示插槽弹框 | -- |
| hideSlot | 隐藏插槽弹框 | -- |
# 3.10 StateStatistics 状态统计组件
组件截图
StateStatistics Attibutes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| stateList | 统计数据,最多显示5条数据，超出部分左右按钮点击滚动显示 | Array | -- | -- |
StateStatistics stateList属性示例
[
{
title: '升级总台次',
text1: '1234'
},
{
title: '升级成功总台次',
text1: '343'
},
{
title: '升级车辆数',
text1: '345'
},
{
title: '升级成功率',
text1: '99%'
},
{
title: '任务数',
text1: '345'
},
{
title: '未完结',
text1: '23'
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# 3.11 TableButtons 表格按钮组件
组件截图
TableButtons Attibutes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| btnsData | 按钮初始化数据 | Array | -- | -- |
TableButtons btnsData属性示例
[
{
type: 'add',
click: this.openCreate,
permission: 'base:upgrade:add'
}，
{
type: 'delete',
click: this.delete,
permission: 'base:upgrade:delete'
}，
{
type: 'export',
click: this.export,
permission: 'base:upgrade:export'
}，
{
type: 'import',
click: this.import,
permission: 'base:upgrade:import'
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 3.12 TableSearch 表格查询组件
组件截图
TableSearch Attibutes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| data | 查询表单初始化数据 | Array | -- | -- |
| searchParam | 查询参数，一般传入空对象 | Object | -- | -- |
| btns | 查询组件扩展按钮配置，同TableButtons | Array | -- | [] |
| extension | 是否为扩展查询参数/高级搜索配置 | Boolean | -- | false |
| labelWidth | label宽度，auto时全部按最长文字宽度显示 | String | 100px/auto | auto |
TableSearch Methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| search | 生成查询参数并触发父组件search事件 | -- |
| reset | 重置查询参数 | -- |
TableSearch Events
| 方法名 | 说明 | 回调参数 |
|---|---|---|
| search | 查询数据事件 | 查询参数 |
TableSearch data属性示例
[
{
type: 'text',
label: '计划名称',
prop: 'planName',
defaultValue: '',
maxlength: 30
},
{
type: 'list',
label: '计划状态',
prop: 'curSteps',
placeholder: '全部',
listData: [
{
label:'状态1',
value:1
},
{
label:'状态2',
value:2
}
]
},
{
type: 'dateRange',
label: '创建时间',
prop: 'createTime',
defaultValue: ''
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31