7 Star 140 Fork 42

yuanjinwie / DM_screen_web

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

DM_screen_web

介绍

🔥🔥Vue3 + TS + Echarts + Pinia 优秀可视化数据大屏解决方案,包括移动端与 PC 端的响应式适配处理
账号:yuan
密码:123456

项目地址

http://124.221.177.11/#/login

gitee开源地址https://gitee.com/yuanjinwei/DM_screen_web

github开源地址https://github.com/williamyuanjw/DM_screen_web

软件架构

node v16.14.2

项目展示

  • 登录页

img

  • PC 端首页

img

  • 小于 576px 设备效果

img

操作文档

登录项目之后,在首页以关注度图表为例

  1. 图表可支持左右滑动,图表内长按鼠标左滑或者右滑进行不同月份的展示
  2. 右上角从左到右图标的功能分别为:切换至折线图、切换至柱状图、详情弹窗
  3. 打开详情弹窗后可以通过下拉搜索框进行输入搜索选择要添加至图表的项目,也可进行删除

img

img

项目中间部分的雷达图和虚拟列表可以进行交互,点击列表的项目可以添加至雷达图,点击雷达图某个项目可以展示详情,点击 remove 可以移除

img

img

使用说明

  1. npm install 或 yarn
  2. npm run dev
  3. 代码提交需要符合 Eslint、Commitlint、Stylelint 等规范
  4. 使用前请在 vscode 安装 Prettier Eslint Stylelint 等插件,方便格式化代码

项目亮点

  • 实现对不同大小的屏幕/设备的良好适配以及针对小屏幕设备有不同的布局以及兼容
  • 不定高无限滚动加载虚拟列表的实现,控制列表渲染数据量的同时实现列表无限滚动
参数/事件 说明 类型 默认值
dataSource 传入的数组 Array 必传
loading 分页加载loading状态 Boolean 必传
@scrollEnd 列表滚动到底部触发的方法 Function -
// 2023.11月更新过
<new-virtual-list
	:data-source="github.dataSource"
	:loading="github.loading"
	@scroll-end="github.addData"
	class="virtual-list"
>
	<template #item="{ item }">
		<a-tooltip placement="top" color="rgba(73, 146, 255, 0.8)">
			<template #title>
				<span>项目名:{{ item.name }}</span>
			</template>
			<div class="virtual-list-item" @click="radarFirst.chart.addRadarData(item.name)">
				<span class="virtual-list-item-col">{{ item.name }}</span>
				<span class="virtual-list-item-col">{{ item.influence }}</span>
				<span class="virtual-list-item-col">{{ item.trend }}</span>
				<span class="virtual-list-item-col">{{ item.response }}</span>
				<span class="virtual-list-item-col">{{ item.activity }}</span>
				<span class="virtual-list-item-col">{{ item.github }}</span>
			</div>
		</a-tooltip>
	</template>
</new-virtual-list>
  • Echarts 图表相关 hooks 的封装,提高如折柱混合图、图表详情弹窗的代码复用性
  • 实现下拉搜索选择框、列表与图表之间的增删交互,根据文档解决雷达图等图表增删时的异常问题
  • 使用 transition 标签以及图片预加载来优化图片未加载完全等导致的用户视觉体验问题
  • 实现 Echarts 等组件的按需加载。在打包过程中对项目大体积模块进行分块打包以及优化项目字体文件大小

参与贡献

  1. 根据 dev 分支创建新分支
  2. 在新分支上开发 提交代码时 pull dev 分支的代码再提交
  3. 之后在 gitee 上发起代码合并请求,请求将代码合并至 master
  4. 有问题与想法欢迎大家提Issues
MIT License Copyright (c) 2023 yuanjinwie 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.

简介

🔥🔥Vue3 + TS + Echarts 可视化数据大屏优秀实践,包括响应式页面布局,移动端与PC端的兼容适配 展开 收起
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/yuanjinwei/DM_screen_web.git
git@gitee.com:yuanjinwei/DM_screen_web.git
yuanjinwei
DM_screen_web
DM_screen_web
master

搜索帮助