7 Star 150 Fork 73

daidai / IofTV-Screen-Vue3

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

项目描述

IofTV-Screen 的 Vue3+vite版本,

与vue2版本对比

功能

功能采用与vue2版本相同功能

因为要与vue2版本相同功能,有些组件不兼容vue3版本,例如:胶囊柱图,数字滚动皆重新封装为组件,整体来说,功能属实相同。根据自己需求选择vue2版本与[vue3](#本项目地址 vue3+vite)版本

样式

进行微调,整体看着更加美观

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

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

  • 项目环境:Vite、Echarts、Npm、Node,axios,mock,vue3。

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

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

友情链接:

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

项目展示

项目展示

项目预览地址

https://www.daidaibg.com/bigscreen-vue3

项目仓库地址

本项目地址 vue3+vite

github地址

https://github.com/daidaibg/IofTV-Screen-Vue3

Gitee地址

https://gitee.com/daidaibg/IofTV-Screen-Vue3

vue2版本地址

github地址

https://github.com/daidaibg/IofTV-Screen

Gitee地址

https://gitee.com/daidaibg/IofTV-Screen

采用自适应组件方式,

滚动设置,自适应设置

项目中可以进行滚动配置,内容是否滚动

点击右上角设置按钮 设置

可以进行以下配置,可以自行代码中进行修改或增加配置

在这里插入图片描述

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 install   

启动

npm run dev

取消mock模拟数据

// src\main.ts文件
把下面两行代码注释掉就可以了
import { mockXHR } from "@/mock/index";
mockXHR()

公用组件

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

自适应缩放组件

注意

采用Scale方式,会自动给组件父元素添加overflow:hidden

使用

<template>
  <scale-screen width="1920" height="1080">
    <div>
   			content
    </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

外边框

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

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

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

CountUp 数字滚动

以下属性同 coutup.js 配置项(same as countup.js properties)

Props

Name Type Default Description
endVal Number | String - 结束值
startVal Number | String 0 起始值
duration Number 2.5 动画时长,单位:秒
options Object - countUp.js options 配置项

以下为组件特有属性(extension properties)

Name Type Default Description
autoplay Boolean true 是否自动计数
loop Boolean | Number false 循环次数,有限次数 / 无限循环
delay Number 0 loop 循环的间隔时间,单位:秒

插槽(slots)

Name Description
prefix 前缀
suffix 后缀

事件(Events)

Name Description return
@init CountUp 实例初始化完成触发 CountUp 实例
@finished 计数结束时触发 -

countup.js 配置项说明

interface CountUpOptions {
  startVal?: number // number to start at (0) 开始数值,默认 0
  decimalPlaces?: number // number of decimal places (0) 小数点 位数
  duration?: number // animation duration in seconds (2) 动画时长
  useGrouping?: boolean // example: 1,000 vs 1000 (true) 是否使用千分位
  useEasing?: boolean // ease animation (true) 是否开启动画过渡,默认动画函数为easeOutExpo 
  smartEasingThreshold?: number // smooth easing for large numbers above this if useEasing (999)
  smartEasingAmount?: number // amount to be eased for numbers above threshold (333)
  separator?: string // grouping separator (',') 千分位分隔符
  decimal?: string // decimal ('.') 小数点分隔符
  // easingFn: easing function for animation (easeOutExpo) 动画函数
  easingFn?: (t: number, b: number, c: number, d: number) => number
  formattingFn?: (n: number) => string // this function formats result 格式化结果
  prefix?: string // text prepended to result 数值前缀
  suffix?: string // text appended to result 数值后缀
  numerals?: string[] // numeral glyph substitution 数字符号替换 0 - 9,例如替换为 [a,b,c,d,e,f,g,h,i,j]
  enableScrollSpy?: boolean // start animation when target is in view 在可视范围内才开始动画
  scrollSpyDelay?: number // delay (ms) after target comes into view  目标进入可视范围内后的延迟时间(毫秒)
}

胶囊柱图

Props

属性 说明 类型 可选值 默认值
data 柱数据 Array<Object> data属性 []
config 基础配置 Object config属性 false

config属性

属性 说明 类型 可选值 默认值
unit 单位 String --- ''
colors 环颜色 Array<String> [1] [2]
showValue 显示数值 Boolean --- false

注释config注释

[1] 颜色支持hex|rgb|rgba|颜色关键字等四种类型。

[2] 默认配色为['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']

data属性

属性 说明 类型 可选值 默认值
name 柱名称 String --- ---
value 柱对应值 Number --- ---

无缝轮播组件

看此文档 优化次源码

https://doc.wssio.com/opensource/vue3-seamless-scroll/

中间地图

南海显隐控制

根据需求来,修改此值请刷新页面

indexs/center-map.vue 文件中isSouthChinaSea变量 默认不显示南海(false),为true的时候显示南海

isSouthChinaSea:false,//默认不显示南海,改为true可显示南海

全局参数

filter

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

{{10.23123|montionFilter }}

大屏交流反馈(面条的群)

大屏QQ群

QQ群号:

一群:713105837 (已满)

二群:495755841

MIT License Copyright (c) 2022 daidai Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

🔥(IofTV-Screen Vue3版本)一个基于 vue3、vite、Echart 框架的物联网可视化(大屏展示)模板,提供数据动态刷新渲染、屏幕适应、数据滚动配置,内部图表自由替换,持续更新.... 展开 收起
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/daidaibg/IofTV-Screen-Vue3.git
git@gitee.com:daidaibg/IofTV-Screen-Vue3.git
daidaibg
IofTV-Screen-Vue3
IofTV-Screen-Vue3
master

搜索帮助