物联网可视化大屏

511 阅读2分钟

1、项目描述

根据奔跑吧面条的**vue-big-screen**开源框架基础上进行修改。

  • 项目需要全屏展示(按 F11)。

  • 项目部分区域使用了全局注册方式,增加了打包体积,在实际运用中请使用 按需引入

  • 项目环境:Vue-cli、DataV、Echarts、Webpack、Npm、Node,axios,mock。

  • 请拉取 master 分支的代码,其余分支是开发分支。

  • 在项目public目录下存放地图数据合集,根据地市编存放。

友情链接:

  1. Vue 官方文档
  2. DataV 官方文档
  3. echarts 实例echarts API 文档
  4. mock.js官网
  5. axios官网

项目展示

微信图片_20220505101049.png

github地址

github.com/daidaibg/Io…

Gitee地址

gitee.com/memeda520/I…

2、主要文件介绍

文件作用/功能
main.js主目录文件,引入 Echart/DataV 等文件
utils工具函数与 mixins 函数等
views/ home.vue项目主结构
views/其余文件界面各个区域组件(按照位置来命名)
assets静态资源目录,放置 logo 与背景图片
assets / css/通用 CSS 文件,全局项目快捷样式调节
components/echart所有 echart 图表(按照位置来命名)
common/...全局封装的 ECharts 和 flexible 插件代码(适配屏幕尺寸,可定制化修改)
api/api.js接口封装文件
mock模拟数据接口地址

3、使用介绍

安装

npm install   

启动

npm start 

接下来跟面条的差不多还是看面条的文档吧

gitee.com/MTrun/big-s…

4、公用组件

封装了除面条外个别用到的组件

4.1 message消息提示

因为刚开始没想着用第三方提示库,自己简单封装了一个。

注:组件内部目前只有warning,类型,如果需要其他类型自己组件内添加。

因在main.js注册全局可以直接使用,不需要引入

  this.$Message({
      text: res.msg,
      type: 'warning'
  })
//也可以这样
this.$Message.warning(res.msg)
参数描述默认值类型可选值
text提示文字-string-
type弹窗类型warningstringwarning

4.2 外边框

因为我的项目外边框几乎一样,还有title,所以封装了此组件。

根据自己需求更改,更换外边框(src\components\item-wrap\item-wrap.vue)下更换。

<ItemWrap
    title="我是title"
    >
       <div>我是谁?</div>
</ItemWrap>
参数描述默认值类型可选值
title标头-string-

5、全局参数

5.1filter

监测数据项统一过滤,保留两位小数。

{{10.23123|montionFilter }}