前言
最近一段时间看了阿里的datav系统,使用了七天,感觉dataV很强大,页面做的很高大上,构建页面只需几分钟,大大节约了开发页面的时间.所以,我们要尝试自己搭建一套可视化大屏系统,接下来就是构建咱们的开发利器-PowerEditor
PowerEditor系统的主要功能
1.连接数据库.数据库包含oracle,mysql.
2.图片资源管理.图片可以上传,浏览,预览等
3.项目管理.管理可视化编辑器制作的项目
3.编辑器主体框架的构建
3.1 标尺: 显示屏幕尺子
3.2 缩略图: 快速移动面板
3.3 网格线: 网格线是用于定位组件位置
3.4 组件列表: 组件包含已完成封装的文字,图片,形状,折线图,柱状图,地图等
3.5 数据属性面板: 编辑组件的属性.(这里是动态面板,参考政采云前端团队的一篇文章,通过配置文件生成属性面板)
3.6 部分源码引用了项目quarkh5的架构.不懂qurakh5的可以去github上查询下
PowerEditor系统的架构
1.vue + koa + mongodb
核心代码展示
client/base目录下是构建编辑器页面的自定义的UI组件,参考element-ui和dataV
client/components目录下是构建页面的拆分的组件
client/plugins目录下是我们将要打包到server的自定义组件
client/pages/power-editor目录是我们的编辑器主体,如图所示
<y-tabs position='top' @switchTab="onSwitchTab">
<y-tab-panel :iconClass="item.info.iconClass" :name="item.info.title" v-for="(item,index) in localProps" :key="index">
<y-form-item :title="fItem.title"
:width="fItem.width?fItem.width:70"
:height="fItem.align ==='topToBottom'? 'auto' : fItem.height?fItem.height:40"
v-for="(fItem, fIndex) in item.fields"
:key="fIndex"
:align="fItem.align"
:staticTitle = "fItem.staticTitle"
>
<div v-if="fItem.type !== 'group'" class="config-content_wrap">
<component :is="fItem.type"
v-bind="{...fItem.value}"
v-model="item.fields[0].value[fItem.value.value]"
v-if="fItem.value.valueType && fItem.value.valueType === 'refer'"/>
<component :is="fItem.type" v-bind="{...fItem.value}" v-model="fItem.value.value" v-else/>
</div>
<div v-else class="config-value_item" :class="fItem.value[0].align">
<div v-for="(vItem,vIndex) in fItem.value" :key="vIndex">
<div v-if="vItem.showTitle" class="config-value_item_wrap">
<y-form-item :title="vItem.title"
:width="vItem.width?vItem.width:70" :height="vItem.height?vItem.height:40"
:align="vItem.align"
:staticTitle = "vItem.staticTitle">
<div v-if="vItem.value.valueType && vItem.value.valueType === 'refer'" class="config-refer_item">
<component :is="vItem.type"
v-bind="{...vItem.value}"
v-model="fItem.value[0].value[vItem.value.value]"
/>
</div>
<div v-else class="config-refer_item">
<component :is="vItem.type" v-bind="{...vItem.value}" v-model="vItem.value.value"/>
</div>
</y-form-item>
</div>
<div v-else class="config-value_item_wrap">
<div v-if="vItem.value.valueType && vItem.value.valueType === 'refer'" class="config-refer_item">
<component :is="vItem.type" v-bind="{...vItem.value}" v-model="fItem.value[0].value[vItem.value.value]"/>
</div>
<div v-else class="config-refer_item">
<component :is="vItem.type" v-bind="{...vItem.value}" v-model="vItem.value.value"/>
</div>
</div>
</div>
</div>
</y-form-item>
</y-tab-panel>
</y-tabs>
项目运行
1.前置条件,需要mongodb用户配置信息,组件配置信息,配置完成
2.开启服务器,然后开启客户端.由于没有服务器,无法搭建在线演示网站,现只能在本地跑.
演示
现在新冠疫情流行,大家都宅在家里,访问最多的页面必然是BAT的新冠疫情实时信息页面,我做了一个页面,仅仅要
十几分钟就做了一个页面喔.大家可以自己动手操作.快捷键: ctrl+c是复制组件 enter是删除组件,请看演示
总结
1.页面组件最好自己写一套UI,仿照element-ui代码,自己造轮子,才能发现自己的不足,还能自定义自己的组件的功能,有时候是有个性化需求的.
2.代码要尽量的注释,这方面略有不足,代码要整洁,多借鉴开源项目.
