## 项目描述
根据奔跑吧面条的**[vue-big-screen](https://gitee.com/MTrun/big-screen-vue-datav)**开源框架基础上进行修改。
- 项目需要全屏展示(按 F11)。
- 项目部分区域使用了全局注册方式,增加了打包体积,在实际运用中请使用 **按需引入**。
- 项目环境:Vue-cli、DataV、Echarts、Webpack、Npm、Node,axios,mock。
- 请拉取 master 分支的代码,其余分支是开发分支。
- 在项目public目录下存放地图数据合集,根据地市编存放。
友情链接:
1. [Vue 官方文档](https://gitee.com/link?target=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fguide%2Finstance.html)
2. [DataV 官方文档](https://gitee.com/link?target=http%3A%2F%2Fdatav.jiaminghi.com%2Fguide%2F)
3. [echarts 实例](https://gitee.com/link?target=https%3A%2F%2Fecharts.apache.org%2Fexamples%2Fzh%2Findex.html),[echarts API 文档](https://gitee.com/link?target=https%3A%2F%2Fecharts.apache.org%2Fzh%2Fapi.html%23echarts)
4. [mock.js官网](http://mockjs.com/examples.html)
5. [axios官网](https://axios-http.com/)
**项目展示**
![项目展示](https://www.daidaibg.com/bigscreen/a-img/home.png)
### 项目预览地址
[https://www.daidaibg.com/bigscreen](https://www.daidaibg.com/bigscreen)
### 项目仓库地址
**github地址**
[https://github.com/daidaibg/IofTV-Screen](https://github.com/daidaibg/IofTV-Screen)
**Gitee地址**
[https://gitee.com/daidaibg/IofTV-Screen](https://gitee.com/daidaibg/IofTV-Screen)
### vue3+vite版本地址
**github地址**
[https://github.com/daidaibg/IofTV-Screen-Vue3](https://github.com/daidaibg/IofTV-Screen-Vue3)
**Gitee地址**
[https://gitee.com/daidaibg/IofTV-Screen-Vue3](https://gitee.com/daidaibg/IofTV-Screen-Vue3)
### 1.1.0版本开始采用自适应组件方式,不再使用mixin方式。
### 滚动设置,自适应设置
项目中可以进行滚动配置,内容是否滚动
点击右上角设置按钮
![设置](https://www.daidaibg.com/bigscreen/a-img/setting.png)
可以进行以下配置,可以自行代码中进行修改或增加配置
![在这里插入图片描述](https://www.daidaibg.com/bigscreen/a-img/setting2.png)
## 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 | 模拟数据接口地址 |
###
## 使用介绍
### 安装
```npm
npm install
```
### 启动
```npm
npm start
```
[接下来跟面条的差不多还是看面条的文档吧](https://gitee.com/MTrun/big-screen-vue-datav/tree/master#%E4%B8%89%E4%BD%BF%E7%94%A8%E4%BB%8B%E7%BB%8D)
https://gitee.com/MTrun/big-screen-vue-datav/tree/master#%E4%B8%89%E4%BD%BF%E7%94%A8%E4%BB%8B%E7%BB%8D
### 取消mock模拟数据
```javascript
// src\main.js文件
把下面这句话注释掉就可以了。
require('./mock/mock')//是否使用mock
```
## 自适应缩放组件
### 注意
采用Scale方式,会自动给组件父元素添加overflow:hidden
### 使用
```vue
<template>
<scale-screen width="1920" height="1080">
<div>
<v-chart>....</v-chart>
<v-chart>....</v-chart>
<v-chart>....</v-chart>
<v-chart>....</v-chart>
<v-chart>....</v-chart>
</div>
</scale-screen>
</template>
<script>
import ScaleScreen from 'scale-screen'
export default {
name:'Demo',
components:{
VScaleScreen
}
}
</script>
```
### API
| 属性 | 说明 | 类型 | 默认值 |
| ------------ | ------------------------------------------------------------ | -------------------------------- | ------ |
| selfAdaption | 是否进行自适应 | Boolean | true |
| width | 大屏宽度 | `Number` or `String` | 1920 |
| height | 大屏高度 | `Number` or `String` | 1080 |
| autoScale | 自适应配置,配置为boolean类型时,为启动或者关闭自适应,配置为对象时,若x为true,x轴产生边距,y为true时,y轴产生边距,启用fullScreen时此配置失效 | Boolean or {x:boolean,y:boolean} | true |
| delay | 窗口变化防抖延迟时间 | Number | 500 |
| fullScreen | 全屏自适应,启用此配置项时会存在拉伸效果,同时autoScale失效,非必要情况下不建议开启 | Boolean | false |
| boxStyle | 修改容器样式,如居中展示时侧边背景色,符合Vue双向绑定style标准格式 | Object | null |
| wrapperStyle | 修改自适应区域样式,符合Vue双向绑定style标准格式 | Object | null |
## 公用组件
封装了除面条外个别用到的组件
### 5.1 message消息提示
因为刚开始没想着用第三方提示库,自己简单封装了一个。
注:组件内部目前只有warning,类型,如果需要其他类型自己组件内添加。
因在main.js注册全局可以直接使用,不需要引入
```js
this.$Message({
text: res.msg,
type: 'warning'
})
//也可以这样
this.$Message.warning(res.msg)
```
| 参数 | 描述 | 默认值 | 类型 | 可选值 |
| :--: | :------: | :-----: | :----: | :-----: |
| text | 提示文字 | - | string | - |
| type | 弹窗类型 | warning | string | warning |
### 5.2 外边框
因为我的项目外边框几乎一样,还有title,所以封装了此组件。
根据自己需求更改,更换外边框(src\components\item-wrap\item-wrap.vue)下更换。
```vue
<ItemWrap
title="我是title"
>
<div>我是谁?</div>
</ItemWrap>
```
| 参数 | 描述 | 默认值 | 类型 | 可选值 |
| :---: | :--: | :----: | :----: | :----: |
| title | 标头 | - | string | - |
## 中间地图
### 南海显隐控制
根据需求来,**修改此值请刷新页面**
```indexs/center-map.vue``` 文件中```isSouthChinaSea```变量 默认不显示南海(false),为```true```的时候显示南海
```
isSouthChinaSea:false,//默认不显示南海,改为true可显示南海
```
## 全局参数
### filter
监测数据项统一过滤,保留两位小数。
```vue
{{10.23123|montionFilter }}
```
## 大屏交流反馈(面条的群)
### 大屏QQ群
QQ群号:713105837
### 大屏二维码
QQ群二维码:
![输入图片说明](https://gitee.com/MTrun/big-screen-vue-datav/raw/master/public/image.png)
没有合适的资源?快使用搜索试试~ 我知道了~
大屏,物联网大屏,一个基于 vue、datav、Echart 框架的大数据可视化(大屏展示)模板.zip
共120个文件
json:41个
vue:19个
js:19个
需积分: 5 0 下载量 36 浏览量
2024-03-04
21:30:21
上传
评论
收藏 3.73MB ZIP 举报
温馨提示
大屏,物联网大屏,一个基于 vue、datav、Echart 框架的大数据可视化(大屏展示)模板.zip
资源推荐
资源详情
资源评论
收起资源包目录
大屏,物联网大屏,一个基于 vue、datav、Echart 框架的大数据可视化(大屏展示)模板.zip (120个子文件)
.babelrc 219B
index.css 499KB
style.css 1KB
iconfont.css 532B
index.css 500B
.env.dev 260B
.gitignore 263B
index.html 881B
favicon.ico 162KB
currency.js 11KB
mock.js 6KB
xzqCode.js 5KB
api.js 5KB
vue.config.js 4KB
dd-moment.js 2KB
index.js 2KB
setting.js 2KB
drawMixin.js 2KB
main.js 2KB
index.js 1KB
types.js 1KB
message.js 1KB
index.js 848B
UtilVar.js 760B
index.js 746B
index.js 659B
filters.js 293B
index.js 193B
china.json 3.49MB
package-lock.json 984KB
china.json 569KB
chinaNanhai.json 569KB
440000.json 188KB
430000.json 172KB
450000.json 164KB
370000.json 164KB
510000.json 161KB
500000.json 158KB
210000.json 158KB
420000.json 152KB
410000.json 150KB
220000.json 144KB
230000.json 143KB
540000.json 131KB
810000.json 130KB
520000.json 127KB
340000.json 124KB
530000.json 120KB
360000.json 119KB
330000.json 118KB
650000.json 116KB
350000.json 112KB
620000.json 103KB
110000.json 99KB
630000.json 96KB
320000.json 95KB
310000.json 81KB
150000.json 78KB
130000.json 72KB
610000.json 70KB
120000.json 69KB
140000.json 59KB
640000.json 48KB
460000.json 33KB
820000.json 13KB
710000.json 4KB
package.json 1KB
devcontainer.json 894B
jsconfig.json 399B
LICENSE 1KB
README.md 8KB
test.png 1.03MB
pageBg.png 289KB
guang.png 62KB
center_map.png 26KB
frame.png 15KB
top.png 9KB
left_top_hong.png 9KB
left_top_huang.png 9KB
left_top_lv.png 9KB
left_top_lan.png 8KB
zuo_xuxian.png 2KB
juxing1.png 2KB
juxing2.png 2KB
xieyou.png 2KB
xiezuo.png 2KB
you.png 2KB
zuo.png 2KB
.env.production 303B
index.scss 7KB
home.scss 6KB
public.scss 3KB
reset.scss 2KB
variables.scss 1KB
variable.scss 1KB
.env.test 118B
element-icons.ttf 55KB
iconfont.ttf 2KB
center-map.vue 10KB
right-top.vue 8KB
共 120 条
- 1
- 2
资源评论
日刷百题
- 粉丝: 5608
- 资源: 951
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功