{"id":13679733,"url":"https://github.com/daidaibg/IofTV-Screen","last_synced_at":"2025-04-29T19:31:51.299Z","repository":{"id":37673130,"uuid":"488788465","full_name":"daidaibg/IofTV-Screen","owner":"daidaibg","description":"🔥大屏，物联网大屏，一个基于 vue、datav、Echart 框架的大数据可视化（大屏展示）模板","archived":false,"fork":false,"pushed_at":"2024-09-04T01:37:49.000Z","size":3579,"stargazers_count":477,"open_issues_count":0,"forks_count":67,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-11-11T22:35:35.684Z","etag":null,"topics":["datav","echarts","vue"],"latest_commit_sha":null,"homepage":"https://www.daidaibg.com/bigscreen","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/daidaibg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-05T00:58:52.000Z","updated_at":"2024-11-09T11:51:45.000Z","dependencies_parsed_at":"2024-08-29T11:22:12.413Z","dependency_job_id":null,"html_url":"https://github.com/daidaibg/IofTV-Screen","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daidaibg%2FIofTV-Screen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daidaibg%2FIofTV-Screen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daidaibg%2FIofTV-Screen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daidaibg%2FIofTV-Screen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daidaibg","download_url":"https://codeload.github.com/daidaibg/IofTV-Screen/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251569549,"owners_count":21610575,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["datav","echarts","vue"],"created_at":"2024-08-02T13:01:08.852Z","updated_at":"2025-04-29T19:31:46.279Z","avatar_url":"https://github.com/daidaibg.png","language":"Vue","funding_links":[],"categories":["可视化大屏框架"],"sub_categories":[],"readme":"\r\n\r\n## 项目描述\r\n\r\n\r\n\r\n根据奔跑吧面条的**[vue-big-screen](https://gitee.com/MTrun/big-screen-vue-datav)**开源框架基础上进行修改。\r\n\r\n- 项目需要全屏展示（按 F11）。\r\n\r\n- 项目部分区域使用了全局注册方式，增加了打包体积，在实际运用中请使用 **按需引入**。\r\n\r\n- 项目环境：Vue-cli、DataV、Echarts、Webpack、Npm、Node，axios,mock。\r\n\r\n- 请拉取 master 分支的代码，其余分支是开发分支。\r\n\r\n- 在项目public目录下存放地图数据合集，根据地市编存放。\r\n\r\n\r\n友情链接：\r\n\r\n1. [Vue 官方文档](https://gitee.com/link?target=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fguide%2Finstance.html)\r\n2. [DataV 官方文档](https://gitee.com/link?target=http%3A%2F%2Fdatav.jiaminghi.com%2Fguide%2F)\r\n3. [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)\r\n4. [mock.js官网](http://mockjs.com/examples.html)\r\n5. [axios官网](https://axios-http.com/)\r\n\r\n**项目展示** \r\n\r\n![项目展示](https://www.daidaibg.com/bigscreen/a-img/home.png)\r\n\r\n### 项目预览地址\r\n\r\n[https://www.daidaibg.com/bigscreen](https://www.daidaibg.com/bigscreen)\r\n\r\n### 项目仓库地址\r\n\r\n**github地址**\r\n\r\n[https://github.com/daidaibg/IofTV-Screen](https://github.com/daidaibg/IofTV-Screen)\r\n\r\n**Gitee地址**\r\n\r\n[https://gitee.com/daidaibg/IofTV-Screen](https://gitee.com/daidaibg/IofTV-Screen)\r\n\r\n### vue3+vite版本地址\r\n\r\n**github地址**\r\n\r\n[https://github.com/daidaibg/IofTV-Screen-Vue3](https://github.com/daidaibg/IofTV-Screen-Vue3)\r\n\r\n**Gitee地址**\r\n\r\n[https://gitee.com/daidaibg/IofTV-Screen-Vue3](https://gitee.com/daidaibg/IofTV-Screen-Vue3)\r\n\r\n### 1.1.0版本开始采用自适应组件方式，不再使用mixin方式。\r\n\r\n###  滚动设置，自适应设置 \r\n\r\n项目中可以进行滚动配置，内容是否滚动\r\n\r\n点击右上角设置按钮\r\n![设置](https://www.daidaibg.com/bigscreen/a-img/setting.png)\r\n\r\n\r\n\r\n可以进行以下配置，可以自行代码中进行修改或增加配置\r\n\r\n\r\n\r\n![在这里插入图片描述](https://www.daidaibg.com/bigscreen/a-img/setting2.png)\r\n\r\n\r\n\r\n##  2、主要文件介绍\r\n\r\n| 文件              | 作用/功能                                                    |\r\n| ----------------- | ------------------------------------------------------------ |\r\n| main.js           | 主目录文件，引入 Echart/DataV 等文件                         |\r\n| utils             | 工具函数与 mixins 函数等                                     |\r\n| views/ home.vue   | 项目主结构                                                   |\r\n| views/其余文件    | 界面各个区域组件（按照位置来命名）                           |\r\n| assets            | 静态资源目录，放置 logo 与背景图片                           |\r\n| assets / css/     | 通用 CSS 文件，全局项目快捷样式调节                          |\r\n| components/echart | 所有 echart 图表（按照位置来命名）                           |\r\n| common/...        | 全局封装的 ECharts 和 flexible 插件代码（适配屏幕尺寸，可定制化修改） |\r\n| api/api.js        | 接口封装文件                                                 |\r\n| mock              | 模拟数据接口地址                                             |\r\n\r\n###  \r\n\r\n## 使用介绍\r\n\r\n### 安装\r\n\r\n```npm\r\nnpm install   \r\n```\r\n### 启动\r\n\r\n```npm\r\nnpm start \r\n```\r\n\r\n[接下来跟面条的差不多还是看面条的文档吧](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)\r\n\r\nhttps://gitee.com/MTrun/big-screen-vue-datav/tree/master#%E4%B8%89%E4%BD%BF%E7%94%A8%E4%BB%8B%E7%BB%8D\r\n\r\n### 取消mock模拟数据\r\n取消后请对接自己后端接口\r\n```javascript\r\n// src\\main.js文件\r\n把下面这句话注释掉就可以了。\r\nrequire('./mock/mock')//是否使用mock\r\n```\r\n\r\n## 自适应缩放组件\r\n\r\n### 注意\r\n\r\n采用Scale方式，会自动给组件父元素添加overflow:hidden \r\n\r\n### 使用\r\n\r\n```vue\r\n\u003ctemplate\u003e\r\n  \u003cscale-screen width=\"1920\" height=\"1080\"\u003e\r\n    \u003cdiv\u003e\r\n      \u003cv-chart\u003e....\u003c/v-chart\u003e\r\n      \u003cv-chart\u003e....\u003c/v-chart\u003e\r\n      \u003cv-chart\u003e....\u003c/v-chart\u003e\r\n      \u003cv-chart\u003e....\u003c/v-chart\u003e\r\n      \u003cv-chart\u003e....\u003c/v-chart\u003e\r\n    \u003c/div\u003e\r\n  \u003c/scale-screen\u003e\r\n\u003c/template\u003e\r\n\r\n\u003cscript\u003e\r\nimport ScaleScreen from 'scale-screen'\r\n\r\nexport default {\r\n  name:'Demo',\r\n  components:{\r\n    VScaleScreen\r\n  }\r\n}\r\n\u003c/script\u003e\r\n```\r\n### API\r\n| 属性         | 说明                                                         | 类型                             | 默认值 |\r\n| ------------ | ------------------------------------------------------------ | -------------------------------- | ------ |\r\n| selfAdaption | 是否进行自适应                                               | Boolean                          | true   |\r\n| width        | 大屏宽度                                                     | `Number` or `String`             | 1920   |\r\n| height       | 大屏高度                                                     | `Number` or `String`             | 1080   |\r\n| autoScale    | 自适应配置，配置为boolean类型时，为启动或者关闭自适应，配置为对象时，若x为true，x轴产生边距，y为true时，y轴产生边距，启用fullScreen时此配置失效 | Boolean or {x:boolean,y:boolean} | true   |\r\n| delay        | 窗口变化防抖延迟时间                                         | Number                           | 500    |\r\n| fullScreen   | 全屏自适应，启用此配置项时会存在拉伸效果，同时autoScale失效，非必要情况下不建议开启 | Boolean                          | false  |\r\n| boxStyle     | 修改容器样式，如居中展示时侧边背景色，符合Vue双向绑定style标准格式 | Object                           | null   |\r\n| wrapperStyle | 修改自适应区域样式，符合Vue双向绑定style标准格式             | Object                           | null   |\r\n\r\n## 公用组件\r\n\r\n封装了除面条外个别用到的组件\r\n\r\n### 5.1 message消息提示\r\n\r\n因为刚开始没想着用第三方提示库，自己简单封装了一个。\r\n\r\n注：组件内部目前只有warning，类型，如果需要其他类型自己组件内添加。\r\n\r\n因在main.js注册全局可以直接使用，不需要引入\r\n\r\n```js\r\n  this.$Message({\r\n      text: res.msg,\r\n      type: 'warning'\r\n  })\r\n//也可以这样\r\nthis.$Message.warning(res.msg)\r\n```\r\n\r\n| 参数 |   描述   | 默认值  |  类型  | 可选值  |\r\n| :--: | :------: | :-----: | :----: | :-----: |\r\n| text | 提示文字 |    -    | string |    -    |\r\n| type | 弹窗类型 | warning | string | warning |\r\n\r\n### 5.2 外边框\r\n\r\n因为我的项目外边框几乎一样，还有title,所以封装了此组件。\r\n\r\n根据自己需求更改，更换外边框（src\\components\\item-wrap\\item-wrap.vue）下更换。\r\n\r\n```vue\r\n\u003cItemWrap\r\n    title=\"我是title\"\r\n    \u003e\r\n       \u003cdiv\u003e我是谁？\u003c/div\u003e\r\n\u003c/ItemWrap\u003e\r\n```\r\n\r\n| 参数  | 描述 | 默认值 |  类型  | 可选值 |\r\n| :---: | :--: | :----: | :----: | :----: |\r\n| title | 标头 |   -    | string |   -    |\r\n\r\n## 中间地图\r\n\r\n### 南海显隐控制\r\n\r\n 根据需求来，**修改此值请刷新页面**\r\n\r\n```indexs/center-map.vue``` 文件中```isSouthChinaSea```变量 默认不显示南海(false),为```true```的时候显示南海\r\n\r\n```\r\nisSouthChinaSea:false,//默认不显示南海，改为true可显示南海\r\n```\r\n\r\n## 全局参数\r\n\r\n### filter\r\n\r\n监测数据项统一过滤，保留两位小数。\r\n\r\n```vue\r\n{{10.23123|montionFilter }}\r\n```\r\n\r\n##  大屏交流反馈（面条的群）\r\n\r\n### 大屏QQ群\r\n\r\nQQ群号：\r\n\r\n一群：713105837 （已满）\r\n\r\n二群：495755841\r\n\r\n\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaidaibg%2FIofTV-Screen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaidaibg%2FIofTV-Screen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaidaibg%2FIofTV-Screen/lists"}