可视化大屏

基于vue3+ts搭建的搭配可视化项目，使用image2d、image3d、echarts等多种绘图方式支持。

Issues

使用的时候遇到任何问题或有好的建议，请点击进入issue，欢迎参与维护！

如何启动本地编辑？

首先，你需要确保本地安装了node.js，然后，执行下面命令安装项目依赖：

npm install

接着，启动下面命令会自动打开页面，修改内容页面也自动刷新：

npm run dev

如果你想发布开发的代码，执行下面命令进行打包：

npm run build

一些说明

图表组件封装

为了方便使用，我们对依赖的库或别的依赖进行了二次封装：

ECharts ：用于提供常用的图表
Image2D ：绘制一些特殊的图表
Image3D ：用于个性化的3D图形绘制

统一弹框设计

为了方便弹框的实现，我们进行了统一的设计（下面，我们以alert弹框为例来说明）。

首先，你需要准备好弹框的模板，很简单，在src/dialogs下新建一个.vue文件即可。

打卡warning.vue文件，可以看见，里面的内容是通过data来接收的，这个数据也就是调用这个弹框的时候传递的initdata这项。

当然，新建完毕后，别忘了在src/dialogs/lazy-load.ts中进行懒加载注册。

现在，已经可以使用这个弹框了，在这里，使用的例子就是：

this.$store.commit('openDialog', {
    id: "warning",
    initdata: ['alert', "你刚刚进行的操作成功了", "温馨提示", "确定"],
    callback: function () {
       // 回调
    }
});

对于普通的弹框，到这里就可以了，不过，由于alert等比较特殊，经常使用到，由此，我们对一些常用的，进行了更简单的封装，下面列举一下：

this.$alert(msg, title, funPos) ：一些小提示
this.$confirm(title, msg, actionPos, actionNeg, mesPos, mesNeg)：确认提示

新增"边框"和"图表"

首先，你需要在src/components/下的border和chart下方便新增需要的组件，然后在对应的lazy-load.ts中进行引入。

此时，页面中已经可以使用这些组件了，只不过，为了在选中配置界面可选，还需要在config/下的border和chart文件夹中进行登记。

关于地图

比如echarts中配置地图的话，需要提前安装对应的geoJSON包，如果还没有安装，可以去datapool中寻找，如果没有找到，可以去issue给留言说明。

安装好了以后，就需要去./src/map-lazy.js中添加，添加完毕后，比如**：

export default {
    china: () => import('@datapool/china.geojson')
};

然后，echarts这样配置就可以使用了：

{
    ......
    type: "map",
    map: "china",
}

有任何疑惑都可以去给我们留言哦~，当然，也欢迎你帮助我们改进此项目。

开源协议

MIT

wuchunfu/big-screen-dataview