IofTV-Screen-Vue3:Vue3+Vite 大屏可视化解决方案，自适应组件与图表封装

项目简介

IofTV-Screen 是基于 Vue3+vite 技术栈开发的版本。

与 Vue2 版本的对比

功能

本项目与 Vue2 版本在功能上保持一致。

由于需与 Vue2 版本兼容，部分组件在 Vue3 上不兼容，如胶囊柱图、数字滚动等，这些组件已重新封装以适应 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.gaobug.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

自适应组件与滚动设置

本项目采用自适应组件设计，并提供了滚动设置和自适应设置功能。

项目中允许配置内容滚动与否，通过点击右上角设置按钮：

进行以下配置，也可以在代码中自行修改或增加配置：

主要文件介绍

文件	作用/功能
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

取消模拟数据的使用

// 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 或 String	1920
height	高度设定，适用于大屏显示	Number 或 String	1080
autoScale	自适应配置项，布尔值类型用于开启或关闭自适应；对象类型中，x 为 true 时，x 轴会添加边距，y 为 true 时，y 轴会添加边距。当启用全屏模式时此配置无效	Boolean 或 {x:Boolean, y:Boolean}	true
delay	防抖时间设置，用于窗口尺寸变化的延迟处理	Number	500
fullScreen	全屏自适应模式，启用此选项将导致拉伸效果，同时使 autoScale 配置失效。非必要情况下不建议使用	Boolean	false
boxStyle	容器样式自定义，如居中显示时的侧边背景色，需遵循 Vue 的双向绑定样式格式	Object	null
wrapperStyle	自适应区域样式自定义，遵循 Vue 的双向绑定样式格式	Object	null

外边框组件

鉴于项目中外边框样式基本一致，并且包含标题元素，因此封装了此组件以供复用。

根据具体需求进行自定义修改，可在组件代码（src/components/item-wrap/item-wrap.vue）中进行外边框样式的更改。

<ItemWrap
    title="我是title"
    >
       <div>我是谁？</div>
</ItemWrap>

参数	描述	默认值	类型	可选值
title	标头	-	string	-

CountUp 数字滚动

以下属性同 countup.js 配置项（与 countup.js 的配置项相同）

Props

名称	类型	默认值	描述
endVal	Number | String	-	结束值
startVal	Number | String	0	起始值
duration	Number	2.5	动画时长，单位：秒
options	Object	-	countUp.js 配置项

以下为组件特有属性（扩展属性）

名称	类型	默认值	描述
autoplay	Boolean	true	是否自动计数
loop	Boolean | Number	false	循环次数，有限次数 / 无限循环
delay	Number	0	loop 循环的间隔时间，单位：秒

插槽（slots）

名称	描述
prefix	前缀
suffix	后缀

事件（Events）

名称	描述	返回值
@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可显示南海

大屏幕互动反馈区（面条社群）

大屏幕QQ交流群

QQ群号码如下：

主群：713105837（成员已满）

次群：495755841