no message
This commit is contained in:
-1786
File diff suppressed because it is too large
Load Diff
Binary file not shown.
-704
@@ -1,704 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>可视化大屏模板系统 - 软件说明书</title>
|
||||
<style>
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 2.5cm;
|
||||
@top-center {
|
||||
content: "可视化大屏模板系统软件说明书";
|
||||
font-size: 8pt;
|
||||
color: #7A7A84;
|
||||
border-bottom: 1.5pt solid #3B6D8A;
|
||||
padding-bottom: 5pt;
|
||||
}
|
||||
@bottom-center {
|
||||
content: counter(page);
|
||||
font-size: 8pt;
|
||||
color: #7A7A84;
|
||||
}
|
||||
}
|
||||
|
||||
@page :first {
|
||||
@top-center { content: none; }
|
||||
@bottom-center { content: none; }
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Noto Sans CJK SC", "WenQuanYi Zen Hei", "Microsoft YaHei", sans-serif;
|
||||
font-size: 10.5pt;
|
||||
line-height: 1.6;
|
||||
color: #2C2C30;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
/* 封面样式 */
|
||||
.cover {
|
||||
page-break-after: always;
|
||||
text-align: center;
|
||||
padding-top: 8cm;
|
||||
}
|
||||
|
||||
.cover-title {
|
||||
font-size: 28pt;
|
||||
font-weight: bold;
|
||||
color: #1A1E24;
|
||||
margin-bottom: 0.5cm;
|
||||
}
|
||||
|
||||
.cover-subtitle {
|
||||
font-size: 18pt;
|
||||
color: #3B6D8A;
|
||||
margin-bottom: 2cm;
|
||||
}
|
||||
|
||||
.cover-line {
|
||||
width: 60%;
|
||||
height: 2pt;
|
||||
background-color: #3B6D8A;
|
||||
margin: 1cm auto;
|
||||
}
|
||||
|
||||
.cover-info {
|
||||
font-size: 12pt;
|
||||
color: #7A7A84;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
/* 标题样式 */
|
||||
h1 {
|
||||
font-size: 18pt;
|
||||
font-weight: bold;
|
||||
color: #3B6D8A;
|
||||
margin-top: 20pt;
|
||||
margin-bottom: 12pt;
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 14pt;
|
||||
font-weight: bold;
|
||||
color: #2C2C30;
|
||||
margin-top: 15pt;
|
||||
margin-bottom: 8pt;
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 12pt;
|
||||
font-weight: bold;
|
||||
color: #2C2C30;
|
||||
margin-top: 12pt;
|
||||
margin-bottom: 6pt;
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
/* 段落样式 */
|
||||
p {
|
||||
margin-bottom: 8pt;
|
||||
text-indent: 2em;
|
||||
}
|
||||
|
||||
p.no-indent {
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
/* 列表样式 */
|
||||
ul, ol {
|
||||
margin-left: 2em;
|
||||
margin-bottom: 8pt;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 4pt;
|
||||
}
|
||||
|
||||
/* 图片样式 */
|
||||
.figure {
|
||||
margin: 12pt 0;
|
||||
text-align: center;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
.figure img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 1pt solid #E6EFF5;
|
||||
}
|
||||
|
||||
.figure-caption {
|
||||
font-size: 9pt;
|
||||
color: #7A7A84;
|
||||
margin-top: 6pt;
|
||||
text-align: center;
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
/* 代码块样式 */
|
||||
pre {
|
||||
background-color: #F5F5F5;
|
||||
border: 1pt solid #E6EFF5;
|
||||
border-radius: 4pt;
|
||||
padding: 8pt;
|
||||
margin: 8pt 0;
|
||||
font-family: "Courier New", monospace;
|
||||
font-size: 9pt;
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: "Courier New", monospace;
|
||||
font-size: 9pt;
|
||||
background-color: #F5F5F5;
|
||||
padding: 2pt 4pt;
|
||||
border-radius: 2pt;
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 12pt 0;
|
||||
font-size: 9pt;
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 1pt solid #E6EFF5;
|
||||
padding: 6pt;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #3B6D8A;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #F8F9FA;
|
||||
}
|
||||
|
||||
/* 强调样式 */
|
||||
strong {
|
||||
font-weight: bold;
|
||||
color: #1A1E24;
|
||||
}
|
||||
|
||||
/* 分页控制 */
|
||||
.page-break {
|
||||
page-break-before: always;
|
||||
}
|
||||
|
||||
/* 目录样式 */
|
||||
.toc {
|
||||
page-break-after: always;
|
||||
}
|
||||
|
||||
.toc h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 20pt;
|
||||
}
|
||||
|
||||
.toc-item {
|
||||
margin: 4pt 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* 附录样式 */
|
||||
.appendix h1 {
|
||||
color: #3B6D8A;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 封面 -->
|
||||
<div class="cover">
|
||||
<div class="cover-title">可视化大屏模板系统</div>
|
||||
<div class="cover-subtitle">软件说明书</div>
|
||||
<div class="cover-line"></div>
|
||||
<div class="cover-info">
|
||||
<strong>版本号:V1.0</strong><br>
|
||||
开发完成日期:2026年7月
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 目录 -->
|
||||
<div class="toc">
|
||||
<h1>目 录</h1>
|
||||
<div class="toc-item"><span>一、软件概述</span></div>
|
||||
<div class="toc-item"><span style="margin-left: 2em;">1.1 软件名称</span></div>
|
||||
<div class="toc-item"><span style="margin-left: 2em;">1.2 软件版本</span></div>
|
||||
<div class="toc-item"><span style="margin-left: 2em;">1.3 软件用途</span></div>
|
||||
<div class="toc-item"><span style="margin-left: 2em;">1.4 技术架构</span></div>
|
||||
<div class="toc-item"><span style="margin-left: 2em;">1.5 主要特点</span></div>
|
||||
<div class="toc-item"><span style="margin-left: 2em;">1.6 主要功能</span></div>
|
||||
<div class="toc-item"><span style="margin-left: 4em;">1.6.1 模板浏览与检索</span></div>
|
||||
<div class="toc-item"><span style="margin-left: 4em;">1.6.2 大屏可视化展示</span></div>
|
||||
<div class="toc-item"><span style="margin-left: 4em;">1.6.3 实时数据刷新</span></div>
|
||||
<div class="toc-item"><span style="margin-left: 4em;">1.6.4 响应式布局适配</span></div>
|
||||
<div class="toc-item"><span style="margin-left: 4em;">1.6.5 路由管理</span></div>
|
||||
<div class="toc-item"><span style="margin-left: 4em;">1.6.6 组件化复用</span></div>
|
||||
<div class="toc-item"><span style="margin-left: 4em;">1.6.7 多屏轮播切换</span></div>
|
||||
<div class="toc-item"><span style="margin-left: 4em;">1.6.8 地图交互</span></div>
|
||||
<div class="toc-item"><span style="margin-left: 4em;">1.6.9 数据图表交互</span></div>
|
||||
<div class="toc-item"><span>二、运行环境</span></div>
|
||||
<div class="toc-item"><span style="margin-left: 2em;">2.1 硬件环境</span></div>
|
||||
<div class="toc-item"><span style="margin-left: 2em;">2.2 软件环境</span></div>
|
||||
<div class="toc-item"><span style="margin-left: 2em;">2.3 安装与部署</span></div>
|
||||
<div class="toc-item"><span>三、功能模块介绍</span></div>
|
||||
<div class="toc-item"><span style="margin-left: 2em;">3.1 系统整体架构</span></div>
|
||||
<div class="toc-item"><span style="margin-left: 2em;">3.2 导航首页模块</span></div>
|
||||
<div class="toc-item"><span style="margin-left: 2em;">3.3 大屏页面模块</span></div>
|
||||
<div class="toc-item"><span style="margin-left: 2em;">3.4 路由管理模块</span></div>
|
||||
<div class="toc-item"><span style="margin-left: 2em;">3.5 车辆监控模块</span></div>
|
||||
<div class="toc-item"><span style="margin-left: 2em;">3.6 数据可视化组件</span></div>
|
||||
<div class="toc-item"><span>四、操作说明</span></div>
|
||||
<div class="toc-item"><span style="margin-left: 2em;">4.1 启动软件</span></div>
|
||||
<div class="toc-item"><span style="margin-left: 2em;">4.2 浏览与筛选模板</span></div>
|
||||
<div class="toc-item"><span style="margin-left: 2em;">4.3 查看模板详情</span></div>
|
||||
<div class="toc-item"><span style="margin-left: 2em;">4.4 进入大屏页面</span></div>
|
||||
<div class="toc-item"><span style="margin-left: 2em;">4.5 退出大屏页面</span></div>
|
||||
<div class="toc-item"><span>五、模板分类说明</span></div>
|
||||
<div class="toc-item"><span>六、附录</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 正文内容 -->
|
||||
<h1>一、软件概述</h1>
|
||||
|
||||
<h2>1.1 软件名称</h2>
|
||||
<p class="no-indent"><strong>可视化大屏模板系统(Visual Dashboard Template System)</strong></p>
|
||||
|
||||
<h2>1.2 软件版本</h2>
|
||||
<p class="no-indent"><strong>V1.0</strong></p>
|
||||
|
||||
<h2>1.3 软件用途</h2>
|
||||
<p>可视化大屏模板系统是一款面向企业级用户的数据可视化大屏模板聚合与展示平台。软件汇集了涵盖车辆监控、农业数据、交通运输、物流数据、电商数据、政务大数据、通用模板、大数据分析、行业垂直应用及布局组件等十大类共 66 个数据大屏模板,提供丰富的可视化看板选择与预览功能。</p>
|
||||
|
||||
<p>用户可在模板首页中快速浏览、检索、预览各行业数据大屏模板,点击即可进入对应的大屏页面。每个大屏页面独立封装,支持图表交互、实时数据刷新、地图展示等能力,可广泛用于大数据分析、企业监控、指挥调度、态势感知等场景。</p>
|
||||
|
||||
<h2>1.4 技术架构</h2>
|
||||
<p>本软件基于 B/S 架构设计,前端采用 Vue 3 + TypeScript + Vite 技术栈:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>前端框架</strong>:Vue 3 + TypeScript</li>
|
||||
<li><strong>构建工具</strong>:Vite 4.x</li>
|
||||
<li><strong>路由管理</strong>:Vue Router 4.x</li>
|
||||
<li><strong>图表库</strong>:ECharts 4.x(支持柱状图、折线图、饼图、散点图、地图、雷达图、仪表盘、水球图、词云等)</li>
|
||||
<li><strong>地图能力</strong>:支持中国地图、省市地图、GIS 地图</li>
|
||||
<li><strong>组件化设计</strong>:每个大屏页面自包含其全部资源(样式、图片、数据配置、子组件),支持独立拷贝与部署</li>
|
||||
</ul>
|
||||
|
||||
<h2>1.5 主要特点</h2>
|
||||
<ul>
|
||||
<li>十大行业分类,共 66 个高质量数据大屏模板</li>
|
||||
<li>支持地图可视化(中国地图、省市地图、GIS 地图)</li>
|
||||
<li>丰富的图表类型:柱状图、折线图、饼图、雷达图、仪表盘、水球图、词云图等</li>
|
||||
<li>每个大屏页面独立封装,可单独拷贝使用</li>
|
||||
<li>响应式布局,适配主流显示分辨率</li>
|
||||
<li>前端框架化设计,基于 Vue 3 + TypeScript,可维护性强</li>
|
||||
</ul>
|
||||
|
||||
<h2>1.6 主要功能</h2>
|
||||
<p>本系统提供以下核心功能模块,满足企业级数据可视化需求:</p>
|
||||
|
||||
<h3>模板浏览与检索功能</h3>
|
||||
<p>系统提供直观的模板首页,支持多种浏览方式。用户可以通过顶部分类标签快速筛选特定行业的模板,也可以通过关键词搜索精确查找目标模板。每个模板卡片展示高清预览图、模板名称和功能描述,鼠标悬停时呈现优雅的浮起动画效果,提升用户交互体验。系统支持66个模板的完整展示,覆盖车辆监控、农业数据、交通运输等十大行业领域。</p>
|
||||
|
||||
<h3>大屏可视化展示功能</h3>
|
||||
<p>每个大屏页面采用独立封装设计,包含完整的可视化组件和数据交互能力。系统支持ECharts 4.x图表库的多种图表类型,包括柱状图、折线图、饼图、散点图、雷达图、仪表盘、水球图和词云图等。地图可视化功能支持中国地图、省市地图以及GIS地图展示,可实时呈现地理空间数据分布。数字滚动效果为关键指标提供动态展示,增强数据表现力。</p>
|
||||
|
||||
<h3>实时数据刷新功能</h3>
|
||||
<p>系统内置定时器机制,支持数据的自动刷新和动态更新。大屏页面可按配置的时间间隔自动获取最新数据,确保展示内容始终处于最新状态。实时数据刷新功能适用于监控场景,如车辆位置追踪、交通流量监测、物流状态更新等需要持续关注的业务场景。</p>
|
||||
|
||||
<h3>响应式布局适配功能</h3>
|
||||
<p>所有大屏页面采用响应式设计,可根据浏览器窗口尺寸自动调整图表和组件的布局。系统适配主流显示分辨率,从1920×1080到4K超高清屏幕均可正常展示。图表组件支持自动缩放,确保在不同设备上保持最佳的可视化效果。</p>
|
||||
|
||||
<h3>路由管理与页面导航功能</h3>
|
||||
<p>系统基于Vue Router实现完整的单页面应用路由管理,共注册85条路由。支持首页路由、大屏详情路由、子页面路由以及通配路由,确保用户在任何页面都能快速导航。每个大屏模板拥有独立的路由地址,支持直接访问和书签收藏。</p>
|
||||
|
||||
<h3>组件化复用功能</h3>
|
||||
<p>系统采用模块化设计,公共组件包括导航栏、分类筛选区、模板卡片等均可复用。每个大屏页面自包含其全部资源,包括样式文件、图片资源、数据配置和子组件,支持独立拷贝和快速部署。组件化设计大幅降低了二次开发和定制化的工作量。</p>
|
||||
|
||||
<h3>多屏轮播切换功能</h3>
|
||||
<p>部分多页大屏模板支持自动轮播和手动切换两种模式。自动轮播可按设定时间间隔循环展示多个子页面,适用于展厅、会议室等需要循环播放的场景。手动切换允许用户通过点击或手势控制页面切换,提供更灵活的交互方式。</p>
|
||||
|
||||
<h3>地图交互功能</h3>
|
||||
<p>地图组件支持丰富的交互操作,包括缩放、拖拽、区域选择和点击事件。用户可以通过鼠标滚轮或手势缩放地图,查看不同层级的地理信息。地图上的数据点支持悬停提示,点击可触发详细信息展示或页面跳转。</p>
|
||||
|
||||
<h3>数据图表交互功能</h3>
|
||||
<p>所有ECharts图表支持标准的交互操作,包括鼠标悬停显示数据详情提示框、图例点击筛选数据系列、数据区域缩放等。图表支持点击事件绑定,可实现下钻分析或页面跳转等高级交互。</p>
|
||||
|
||||
<h1>二、运行环境</h1>
|
||||
|
||||
<h2>2.1 硬件环境</h2>
|
||||
<ol>
|
||||
<li><strong>处理器</strong>:Intel Core i5 及以上或兼容处理器</li>
|
||||
<li><strong>内存</strong>:8GB 及以上</li>
|
||||
<li><strong>显卡</strong>:支持 WebGL 的独立显卡或集成显卡</li>
|
||||
<li><strong>显示器分辨率</strong>:1920×1080 及以上</li>
|
||||
</ol>
|
||||
|
||||
<h2>2.2 软件环境</h2>
|
||||
<ol>
|
||||
<li><strong>操作系统</strong>:Windows 10/11、macOS 11+、Linux</li>
|
||||
<li><strong>浏览器</strong>:Chrome 90+、Edge 90+、Firefox 88+、Safari 14+</li>
|
||||
<li><strong>运行时</strong>:Node.js 18+ 或兼容版本</li>
|
||||
<li><strong>包管理</strong>:npm 9+ 或 pnpm 8+</li>
|
||||
</ol>
|
||||
|
||||
<h2>2.3 安装与部署</h2>
|
||||
|
||||
<h3>开发环境运行</h3>
|
||||
<p><strong>步骤一:解压源代码至目标目录</strong></p>
|
||||
<p>将项目源代码解压到本地工作目录。</p>
|
||||
|
||||
<p><strong>步骤二:安装依赖</strong></p>
|
||||
<pre>npm install</pre>
|
||||
<p>或</p>
|
||||
<pre>pnpm install</pre>
|
||||
|
||||
<p><strong>步骤三:启动开发服务器</strong></p>
|
||||
<pre>npm run dev</pre>
|
||||
<p>或</p>
|
||||
<pre>pnpm dev</pre>
|
||||
|
||||
<p><strong>步骤四:访问系统</strong></p>
|
||||
<p>在浏览器地址栏输入 http://localhost:5173 即可访问系统。</p>
|
||||
|
||||
<h3>生产环境部署</h3>
|
||||
<p><strong>步骤一:构建生产版本</strong></p>
|
||||
<pre>npm run build</pre>
|
||||
|
||||
<p><strong>步骤二:部署</strong></p>
|
||||
<p>将 dist/ 目录下的静态文件部署到 Web 服务器(如 Nginx、Apache)或 CDN。</p>
|
||||
|
||||
<h1>三、功能模块介绍</h1>
|
||||
|
||||
<h2>3.1 系统整体架构</h2>
|
||||
<p>本软件采用单页面应用(SPA)架构,主要功能模块如下:</p>
|
||||
|
||||
<pre>
|
||||
┌────────────────────────────────────────────┐
|
||||
│ 导航首页 (HomePage) │
|
||||
│ ┌─────────┐ ┌──────────────────────────┐ │
|
||||
│ │ 导航栏 │ │ 分类筛选区 │ │
|
||||
│ │ (NavBar) │ │ (CategorySection) │ │
|
||||
│ └─────────┘ │ ┌─────┐ ┌─────┐ ┌─────┐ │ │
|
||||
│ │ │模板1 │ │模板2 │ │模板3 │ │ │
|
||||
│ │ │(Card)│ │(Card)│ │(Card)│ │ │
|
||||
│ │ └─────┘ └─────┘ └─────┘ │ │
|
||||
│ └──────────────────────────┘ │
|
||||
└────────────────────────────────────────────┘
|
||||
│
|
||||
▼ 路由跳转
|
||||
┌────────────────────────────────────────────┐
|
||||
│ 大屏详情页 (Dashboard Pages) │
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ 数据可视化大屏(图表/地图/数据展示) │ │
|
||||
│ │ ECharts 图表 | 地图 | 实时数据 | 动画│ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
└────────────────────────────────────────────┘
|
||||
</pre>
|
||||
|
||||
<h2>3.2 导航首页模块</h2>
|
||||
<p>导航首页是用户访问系统的入口页面,包含以下子模块:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>导航栏(NavBar)</strong>:展示软件名称"可视化大屏模板系统",支持搜索功能</li>
|
||||
<li><strong>分类筛选区(CategorySection)</strong>:按行业分类展示大屏模板标签,支持点击切换分类</li>
|
||||
<li><strong>模板卡片(TemplateCard)</strong>:每个模板展示预览图、名称和描述,点击可进入对应大屏页面</li>
|
||||
</ul>
|
||||
|
||||
<div class="figure">
|
||||
<img src="public/previews/01vehicles/01.png" alt="导航首页界面">
|
||||
<p class="figure-caption">图 1:导航首页界面 - 展示系统入口和模板分类</p>
|
||||
</div>
|
||||
|
||||
<h2>3.3 大屏页面模块</h2>
|
||||
<p>每个大屏页面独立封装于 <code>src/dashboards/<分类>/<编号>/</code> 目录下,包含以下核心能力:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>ECharts 图表渲染</strong>:支持柱状图、折线图、饼图、地图、雷达图、仪表盘等多种图表类型</li>
|
||||
<li><strong>中国地图/省市地图</strong>:支持全国及各省市行政区划地图展示</li>
|
||||
<li><strong>实时数据刷新</strong>:通过定时器实现数据的动态更新与刷新</li>
|
||||
<li><strong>数字滚动效果</strong>:支持数值动态滚动展示效果</li>
|
||||
<li><strong>轮播切换</strong>:部分多屏模板支持多页面自动/手动轮播切换</li>
|
||||
<li><strong>响应式适配</strong>:图表随窗口尺寸自动缩放</li>
|
||||
</ul>
|
||||
|
||||
<div class="figure">
|
||||
<img src="public/previews/01vehicles/02.png" alt="大屏页面效果">
|
||||
<p class="figure-caption">图 2:大屏页面效果 - 车辆监控数据可视化展示</p>
|
||||
</div>
|
||||
|
||||
<h2>3.4 路由管理模块</h2>
|
||||
<p>路由模块(<code>src/router/index.ts</code>)负责管理所有大屏页面的路由映射,共注册 85 条路由,支持以下功能:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>首页路由("/")</strong>:导航首页</li>
|
||||
<li><strong>大屏路由("/dashboard/<分类>/<编号>")</strong>:大屏详情页</li>
|
||||
<li><strong>子页面路由</strong>:部分多页大屏支持子路由(如 "/dashboard/05Ecommerce/02/second")</li>
|
||||
<li><strong>通配路由</strong>:未匹配路由重定向到首页</li>
|
||||
</ul>
|
||||
|
||||
<h2>3.5 车辆监控模块</h2>
|
||||
<p>车辆监控是本系统的重点功能模块之一,提供以下核心功能:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>实时车辆位置追踪</strong>:在地图上实时展示车辆位置</li>
|
||||
<li><strong>车辆状态监控</strong>:监控车辆运行状态、速度、里程等信息</li>
|
||||
<li><strong>历史轨迹回放</strong>:支持查看车辆历史行驶轨迹</li>
|
||||
<li><strong>报警信息展示</strong>:实时展示车辆异常报警信息</li>
|
||||
<li><strong>数据统计分析</strong>:提供车辆运行数据的统计分析</li>
|
||||
</ul>
|
||||
|
||||
<div class="figure">
|
||||
<img src="public/previews/01vehicles/03.png" alt="车辆监控大屏">
|
||||
<p class="figure-caption">图 3:车辆监控大屏 - 数据统计面板和图表分析</p>
|
||||
</div>
|
||||
|
||||
<h2>3.6 数据可视化组件</h2>
|
||||
<p>系统提供丰富的数据可视化组件:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>柱状图</strong>:用于对比不同类别的数据量</li>
|
||||
<li><strong>折线图</strong>:展示数据随时间变化的趋势</li>
|
||||
<li><strong>饼图/环形图</strong>:展示数据占比分布</li>
|
||||
<li><strong>雷达图</strong>:多维数据对比分析</li>
|
||||
<li><strong>仪表盘</strong>:关键指标实时监控</li>
|
||||
<li><strong>水球图</strong>:百分比数据可视化</li>
|
||||
<li><strong>词云图</strong>:文本数据频率展示</li>
|
||||
<li><strong>地图</strong>:地理空间数据展示</li>
|
||||
</ul>
|
||||
|
||||
<div class="figure">
|
||||
<img src="public/previews/01vehicles/04.png" alt="数据可视化组件">
|
||||
<p class="figure-caption">图 4:数据可视化组件 - 多种图表综合应用展示</p>
|
||||
</div>
|
||||
|
||||
<h1>四、操作说明</h1>
|
||||
|
||||
<h2>4.1 启动软件</h2>
|
||||
<p>在浏览器地址栏输入系统 URL(开发环境默认 http://localhost:5173),进入导航首页。</p>
|
||||
|
||||
<div class="figure">
|
||||
<img src="public/previews/01vehicles/05.png" alt="软件启动界面">
|
||||
<p class="figure-caption">图 5:软件启动界面 - 导航首页整体布局</p>
|
||||
</div>
|
||||
|
||||
<h2>4.2 浏览与筛选模板</h2>
|
||||
<p>在导航首页,用户可通过以下方式浏览大屏模板:</p>
|
||||
|
||||
<ol>
|
||||
<li><strong>分类筛选</strong>:点击页面顶部的分类标签(如"车辆监控"、"交通运输"等),页面将筛选并展示该分类下的所有模板</li>
|
||||
<li><strong>滚动浏览</strong>:向下滚动页面,浏览所有展示的模板卡片</li>
|
||||
<li><strong>关键词搜索</strong>:在顶部导航栏输入关键词,快速定位目标模板</li>
|
||||
</ol>
|
||||
|
||||
<h2>4.3 查看模板详情</h2>
|
||||
<p>每个模板卡片展示预览图、模板名称和简短描述。用户将鼠标悬停在卡片上时,卡片会显示浮起效果。</p>
|
||||
|
||||
<h2>4.4 进入大屏页面</h2>
|
||||
<p>点击任意模板卡片,系统将在新标签页中打开对应的大屏详细页面。大屏页面将自动加载并渲染 ECharts 图表、地图等可视化内容。</p>
|
||||
|
||||
<p>大屏页面支持以下交互:</p>
|
||||
<ul>
|
||||
<li><strong>图表交互</strong>:鼠标悬停数据点显示详情提示框</li>
|
||||
<li><strong>地图交互</strong>:支持缩放、拖拽、区域选择</li>
|
||||
<li><strong>子页面切换</strong>:多页大屏支持页面间自动轮播或手动切换</li>
|
||||
</ul>
|
||||
|
||||
<h2>4.5 退出大屏页面</h2>
|
||||
<p>关闭大屏页面所在的浏览器标签页即可返回导航首页。</p>
|
||||
|
||||
<h1>五、模板分类说明</h1>
|
||||
|
||||
<p>本系统共提供十大类 66 个数据大屏模板:</p>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>分类</th>
|
||||
<th>模板数量</th>
|
||||
<th>应用场景</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>车辆监控</td>
|
||||
<td>8 个</td>
|
||||
<td>物流运输、公共交通、车队管理</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>农业数据</td>
|
||||
<td>2 个</td>
|
||||
<td>智慧农业、精准农业</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>交通运输</td>
|
||||
<td>3 个</td>
|
||||
<td>智能交通管理</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>物流数据</td>
|
||||
<td>5 个</td>
|
||||
<td>供应链管理、物流调度</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>电商数据</td>
|
||||
<td>4 个</td>
|
||||
<td>电商平台数据监控</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>政务大数据</td>
|
||||
<td>9 个</td>
|
||||
<td>智慧城市、政务决策</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>通用模板</td>
|
||||
<td>8 个</td>
|
||||
<td>多种业务场景快速搭建</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>大数据分析</td>
|
||||
<td>5 个</td>
|
||||
<td>大数据可视化分析</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>其他行业</td>
|
||||
<td>13 个</td>
|
||||
<td>医疗、教育、能源、工业等</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>布局组件</td>
|
||||
<td>11 个</td>
|
||||
<td>布局模板和组件式可视化</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h1>六、附录</h1>
|
||||
|
||||
<h2>6.1 项目文件结构</h2>
|
||||
|
||||
<pre>
|
||||
visual-html./
|
||||
├── index.html # 入口 HTML 文件
|
||||
├── package.json # 项目配置与依赖
|
||||
├── tsconfig.json # TypeScript 配置
|
||||
├── vite.config.ts # Vite 构建配置
|
||||
├── src/ # 源代码目录
|
||||
│ ├── main.ts # 应用入口
|
||||
│ ├── App.vue # 根组件
|
||||
│ ├── types.ts # 类型定义
|
||||
│ ├── router/index.ts # 路由配置(85条路由)
|
||||
│ ├── data/templates.ts # 模板数据
|
||||
│ ├── utils/device.ts # 工具函数
|
||||
│ ├── assets/ # 静态资源(样式文件)
|
||||
│ ├── views/HomePage.vue # 导航首页
|
||||
│ ├── components/ # 公共组件
|
||||
│ │ ├── NavBar.vue # 导航栏组件
|
||||
│ │ ├── CategorySection.vue # 分类筛选组件
|
||||
│ │ └── TemplateCard.vue # 模板卡片组件
|
||||
│ └── dashboards/ # 66个大屏页面
|
||||
│ ├── 01vehicles/ # 车辆监控(8个)
|
||||
│ ├── 02agriculture/ # 农业数据(2个)
|
||||
│ ├── 03traffic/ # 交通运输(3个)
|
||||
│ ├── 04logistics/ # 物流数据(5个)
|
||||
│ ├── 05Ecommerce/ # 电商数据(4个)
|
||||
│ ├── 06government/ # 政务大数据(9个)
|
||||
│ ├── 07universal/ # 通用模板(8个)
|
||||
│ ├── 08bigData/ # 大数据(5个)
|
||||
│ ├── 09others/ # 其他行业(13个)
|
||||
│ └── 10layout/ # 布局组件(11个)
|
||||
└── public/previews/ # 模板预览图
|
||||
</pre>
|
||||
|
||||
<h2>6.2 技术依赖</h2>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>依赖项</th>
|
||||
<th>版本</th>
|
||||
<th>说明</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vue</td>
|
||||
<td>3.3.x</td>
|
||||
<td>前端框架</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>TypeScript</td>
|
||||
<td>5.0+</td>
|
||||
<td>类型系统</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vite</td>
|
||||
<td>4.x</td>
|
||||
<td>构建工具</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vue Router</td>
|
||||
<td>4.x</td>
|
||||
<td>路由管理</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ECharts</td>
|
||||
<td>4.x</td>
|
||||
<td>图表库</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Node.js</td>
|
||||
<td>18+</td>
|
||||
<td>运行环境</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>6.3 浏览器兼容性</h2>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>浏览器</th>
|
||||
<th>最低版本</th>
|
||||
<th>支持状态</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Chrome</td>
|
||||
<td>90+</td>
|
||||
<td>完全支持</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Edge</td>
|
||||
<td>90+</td>
|
||||
<td>完全支持</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td>88+</td>
|
||||
<td>完全支持</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Safari</td>
|
||||
<td>14+</td>
|
||||
<td>完全支持</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<hr>
|
||||
|
||||
<p class="no-indent" style="text-align: center; color: #7A7A84; font-size: 9pt; margin-top: 20pt;">
|
||||
<strong>文档版本</strong>:V1.0 | <strong>最后更新</strong>:2026年7月<br>
|
||||
<strong>版权所有</strong>:可视化大屏模板系统开发团队
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
-393
@@ -1,393 +0,0 @@
|
||||
---
|
||||
title: "可视化大屏模板系统"
|
||||
subtitle: "软件说明书 V1.0"
|
||||
date: "2026年7月"
|
||||
author: ""
|
||||
geometry: margin=2.5cm
|
||||
fontsize: 11pt
|
||||
mainfont: "Noto Sans CJK SC"
|
||||
sansfont: "Noto Sans CJK SC"
|
||||
monofont: "Noto Sans Mono CJK SC"
|
||||
CJKmainfont: "Noto Sans CJK SC"
|
||||
papersize: a4
|
||||
header-includes:
|
||||
- \\usepackage{xeCJK}
|
||||
- \\setCJKmainfont{Noto Sans CJK SC}
|
||||
- \\setCJKsansfont{Noto Sans CJK SC}
|
||||
- \\usepackage{graphicx}
|
||||
- \\usepackage{float}
|
||||
- \\usepackage{caption}
|
||||
- \\captionsetup{font=small,labelfont=bf}
|
||||
- \\usepackage{xcolor}
|
||||
- \\definecolor{accent}{HTML}{3B6D8A}
|
||||
- \\definecolor{dark}{HTML}{1A1E24}
|
||||
- \\usepackage{titling}
|
||||
- \\pretitle{\\begin{center}\\LARGE\\bfseries\\color{dark}}
|
||||
- \\posttitle{\\par\\end{center}\\vskip 0.5em}
|
||||
- \\preauthor{\\begin{center}\\large}
|
||||
- \\postauthor{\\par\\end{center}}
|
||||
- \\predate{\\begin{center}\\large}
|
||||
- \\postdate{\\par\\end{center}\\vskip 1em}
|
||||
---
|
||||
|
||||
\\thispagestyle{empty}
|
||||
\\begin{center}
|
||||
\\vspace*{3cm}
|
||||
|
||||
{\\Huge\\bfseries\\color{dark} 可视化大屏模板系统}\\
|
||||
\\vspace{0.5cm}
|
||||
{\\Large 软件说明书}\\
|
||||
|
||||
\\vspace{2cm}
|
||||
|
||||
\\rule{0.6\\textwidth}{1pt}
|
||||
|
||||
\\vspace{1cm}
|
||||
|
||||
{\\large 版本号:V1.0}\\
|
||||
{\\large 开发完成日期:2026年7月}\\
|
||||
|
||||
\\vspace{3cm}
|
||||
|
||||
\\end{center}
|
||||
|
||||
\\newpage
|
||||
|
||||
# 一、软件概述
|
||||
|
||||
## 1.1 软件名称
|
||||
|
||||
**可视化大屏模板系统(Visual Dashboard Template System)**
|
||||
|
||||
## 1.2 软件版本
|
||||
|
||||
**V1.0**
|
||||
|
||||
## 1.3 软件用途
|
||||
|
||||
可视化大屏模板系统是一款面向企业级用户的数据可视化大屏模板聚合与展示平台。软件汇集了涵盖车辆监控、农业数据、交通运输、物流数据、电商数据、政务大数据、通用模板、大数据分析、行业垂直应用及布局组件等十大类共 66 个数据大屏模板,提供丰富的可视化看板选择与预览功能。
|
||||
|
||||
用户可在模板首页中快速浏览、检索、预览各行业数据大屏模板,点击即可进入对应的大屏页面。每个大屏页面独立封装,支持图表交互、实时数据刷新、地图展示等能力,可广泛用于大数据分析、企业监控、指挥调度、态势感知等场景。
|
||||
|
||||
## 1.4 技术架构
|
||||
|
||||
本软件基于 B/S 架构设计,前端采用 Vue 3 + TypeScript + Vite 技术栈:
|
||||
|
||||
- **前端框架**:Vue 3 + TypeScript
|
||||
- **构建工具**:Vite 4.x
|
||||
- **路由管理**:Vue Router 4.x
|
||||
- **图表库**:ECharts 4.x(支持柱状图、折线图、饼图、散点图、地图、雷达图、仪表盘、水球图、词云等)
|
||||
- **地图能力**:支持中国地图、省市地图、GIS 地图
|
||||
- **组件化设计**:每个大屏页面自包含其全部资源(样式、图片、数据配置、子组件),支持独立拷贝与部署
|
||||
|
||||
## 1.5 主要特点
|
||||
|
||||
- 十大行业分类,共 66 个高质量数据大屏模板
|
||||
- 支持地图可视化(中国地图、省市地图、GIS 地图)
|
||||
- 丰富的图表类型:柱状图、折线图、饼图、雷达图、仪表盘、水球图、词云图等
|
||||
- 每个大屏页面独立封装,可单独拷贝使用
|
||||
- 响应式布局,适配主流显示分辨率
|
||||
- 前端框架化设计,基于 Vue 3 + TypeScript,可维护性强
|
||||
|
||||
# 二、运行环境
|
||||
|
||||
## 2.1 硬件环境
|
||||
|
||||
1. **处理器**:Intel Core i5 及以上或兼容处理器
|
||||
2. **内存**:8GB 及以上
|
||||
3. **显卡**:支持 WebGL 的独立显卡或集成显卡
|
||||
4. **显示器分辨率**:1920×1080 及以上
|
||||
|
||||
## 2.2 软件环境
|
||||
|
||||
1. **操作系统**:Windows 10/11、macOS 11+、Linux
|
||||
2. **浏览器**:Chrome 90+、Edge 90+、Firefox 88+、Safari 14+
|
||||
3. **运行时**:Node.js 18+ 或兼容版本
|
||||
4. **包管理**:npm 9+ 或 pnpm 8+
|
||||
|
||||
## 2.3 安装与部署
|
||||
|
||||
### 开发环境运行
|
||||
|
||||
**步骤一:解压源代码至目标目录**
|
||||
|
||||
将项目源代码解压到本地工作目录。
|
||||
|
||||
**步骤二:安装依赖**
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
或
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
```
|
||||
|
||||
**步骤三:启动开发服务器**
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
或
|
||||
|
||||
```bash
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
**步骤四:访问系统**
|
||||
|
||||
在浏览器地址栏输入 http://localhost:5173 即可访问系统。
|
||||
|
||||
### 生产环境部署
|
||||
|
||||
**步骤一:构建生产版本**
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
**步骤二:部署**
|
||||
|
||||
将 `dist/` 目录下的静态文件部署到 Web 服务器(如 Nginx、Apache)或 CDN。
|
||||
|
||||
# 三、功能模块介绍
|
||||
|
||||
## 3.1 系统整体架构
|
||||
|
||||
本软件采用单页面应用(SPA)架构,主要功能模块如下:
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────────┐
|
||||
│ 导航首页 (HomePage) │
|
||||
│ ┌─────────┐ ┌──────────────────────────┐ │
|
||||
│ │ 导航栏 │ │ 分类筛选区 │ │
|
||||
│ │ (NavBar) │ │ (CategorySection) │ │
|
||||
│ └─────────┘ │ ┌─────┐ ┌─────┐ ┌─────┐ │ │
|
||||
│ │ │模板1 │ │模板2 │ │模板3 │ │ │
|
||||
│ │ │(Card)│ │(Card)│ │(Card)│ │ │
|
||||
│ │ └─────┘ └─────┘ └─────┘ │ │
|
||||
│ └──────────────────────────┘ │
|
||||
└────────────────────────────────────────────┘
|
||||
│
|
||||
▼ 路由跳转
|
||||
┌────────────────────────────────────────────┐
|
||||
│ 大屏详情页 (Dashboard Pages) │
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ 数据可视化大屏(图表/地图/数据展示) │ │
|
||||
│ │ ECharts 图表 | 地图 | 实时数据 | 动画│ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
└────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## 3.2 导航首页模块
|
||||
|
||||
导航首页是用户访问系统的入口页面,包含以下子模块:
|
||||
|
||||
- **导航栏(NavBar)**:展示软件名称"可视化大屏模板系统",支持搜索功能
|
||||
- **分类筛选区(CategorySection)**:按行业分类展示大屏模板标签,支持点击切换分类
|
||||
- **模板卡片(TemplateCard)**:每个模板展示预览图、名称和描述,点击可进入对应大屏页面
|
||||
|
||||

|
||||
|
||||
上图展示了导航首页的整体布局,包含顶部导航栏、分类筛选标签区和模板卡片展示区。
|
||||
|
||||
## 3.3 大屏页面模块
|
||||
|
||||
每个大屏页面独立封装于 `src/dashboards/<分类>/<编号>/` 目录下,包含以下核心能力:
|
||||
|
||||
- **ECharts 图表渲染**:支持柱状图、折线图、饼图、地图、雷达图、仪表盘等多种图表类型
|
||||
- **中国地图/省市地图**:支持全国及各省市行政区划地图展示
|
||||
- **实时数据刷新**:通过定时器实现数据的动态更新与刷新
|
||||
- **数字滚动效果**:支持数值动态滚动展示效果
|
||||
- **轮播切换**:部分多屏模板支持多页面自动/手动轮播切换
|
||||
- **响应式适配**:图表随窗口尺寸自动缩放
|
||||
|
||||

|
||||
|
||||
上图展示了车辆监控类大屏模板的典型效果,包含地图展示、数据图表和实时统计信息。
|
||||
|
||||
## 3.4 路由管理模块
|
||||
|
||||
路由模块(`src/router/index.ts`)负责管理所有大屏页面的路由映射,共注册 85 条路由,支持以下功能:
|
||||
|
||||
- **首页路由("/")**:导航首页
|
||||
- **大屏路由("/dashboard/<分类>/<编号>")**:大屏详情页
|
||||
- **子页面路由**:部分多页大屏支持子路由(如 "/dashboard/05Ecommerce/02/second")
|
||||
- **通配路由**:未匹配路由重定向到首页
|
||||
|
||||
## 3.5 车辆监控模块
|
||||
|
||||
车辆监控是本系统的重点功能模块之一,提供以下核心功能:
|
||||
|
||||
- **实时车辆位置追踪**:在地图上实时展示车辆位置
|
||||
- **车辆状态监控**:监控车辆运行状态、速度、里程等信息
|
||||
- **历史轨迹回放**:支持查看车辆历史行驶轨迹
|
||||
- **报警信息展示**:实时展示车辆异常报警信息
|
||||
- **数据统计分析**:提供车辆运行数据的统计分析
|
||||
|
||||

|
||||
|
||||
上图展示了车辆监控大屏的数据统计面板,包含各类车辆统计指标和图表分析。
|
||||
|
||||
## 3.6 数据可视化组件
|
||||
|
||||
系统提供丰富的数据可视化组件:
|
||||
|
||||
- **柱状图**:用于对比不同类别的数据量
|
||||
- **折线图**:展示数据随时间变化的趋势
|
||||
- **饼图/环形图**:展示数据占比分布
|
||||
- **雷达图**:多维数据对比分析
|
||||
- **仪表盘**:关键指标实时监控
|
||||
- **水球图**:百分比数据可视化
|
||||
- **词云图**:文本数据频率展示
|
||||
- **地图**:地理空间数据展示
|
||||
|
||||

|
||||
|
||||
上图展示了多种数据可视化组件的综合应用效果。
|
||||
|
||||
# 四、操作说明
|
||||
|
||||
## 4.1 启动软件
|
||||
|
||||
在浏览器地址栏输入系统 URL(开发环境默认 http://localhost:5173),进入导航首页。
|
||||
|
||||

|
||||
|
||||
上图展示了软件启动后的导航首页界面。
|
||||
|
||||
## 4.2 浏览与筛选模板
|
||||
|
||||
在导航首页,用户可通过以下方式浏览大屏模板:
|
||||
|
||||
1. **分类筛选**:点击页面顶部的分类标签(如"车辆监控"、"交通运输"等),页面将筛选并展示该分类下的所有模板
|
||||
2. **滚动浏览**:向下滚动页面,浏览所有展示的模板卡片
|
||||
3. **关键词搜索**:在顶部导航栏输入关键词,快速定位目标模板
|
||||
|
||||
## 4.3 查看模板详情
|
||||
|
||||
每个模板卡片展示预览图、模板名称和简短描述。用户将鼠标悬停在卡片上时,卡片会显示浮起效果。
|
||||
|
||||
## 4.4 进入大屏页面
|
||||
|
||||
点击任意模板卡片,系统将在新标签页中打开对应的大屏详细页面。大屏页面将自动加载并渲染 ECharts 图表、地图等可视化内容。
|
||||
|
||||
大屏页面支持以下交互:
|
||||
|
||||
- **图表交互**:鼠标悬停数据点显示详情提示框
|
||||
- **地图交互**:支持缩放、拖拽、区域选择
|
||||
- **子页面切换**:多页大屏支持页面间自动轮播或手动切换
|
||||
|
||||
## 4.5 退出大屏页面
|
||||
|
||||
关闭大屏页面所在的浏览器标签页即可返回导航首页。
|
||||
|
||||
# 五、模板分类说明
|
||||
|
||||
本系统共提供十大类 66 个数据大屏模板:
|
||||
|
||||
## 5.1 车辆监控(8 个模板)
|
||||
|
||||
专注于车辆定位、状态监控、轨迹追踪等场景,适用于物流运输、公共交通、车队管理等领域。
|
||||
|
||||
## 5.2 农业数据(2 个模板)
|
||||
|
||||
涵盖农业环境监测、作物生长数据、气象信息等,适用于智慧农业、精准农业场景。
|
||||
|
||||
## 5.3 交通运输(3 个模板)
|
||||
|
||||
包含交通流量监测、路况分析、公交调度等,适用于智能交通管理系统。
|
||||
|
||||
## 5.4 物流数据(5 个模板)
|
||||
|
||||
覆盖仓储管理、配送跟踪、物流网络分析等,适用于供应链管理、物流调度。
|
||||
|
||||
## 5.5 电商数据(4 个模板)
|
||||
|
||||
包含销售分析、用户行为、商品热度等,适用于电商平台数据监控。
|
||||
|
||||
## 5.6 政务大数据(9 个模板)
|
||||
|
||||
涵盖城市运行指标、人口数据、经济指标等,适用于智慧城市、政务决策。
|
||||
|
||||
## 5.7 通用模板(8 个模板)
|
||||
|
||||
提供通用的数据展示模板,适用于多种业务场景快速搭建。
|
||||
|
||||
## 5.8 大数据分析(5 个模板)
|
||||
|
||||
专注于大数据可视化分析,包含数据流向、关联分析等复杂场景。
|
||||
|
||||
## 5.9 其他行业(13 个模板)
|
||||
|
||||
覆盖医疗、教育、能源、工业等垂直行业应用。
|
||||
|
||||
## 5.10 布局组件(11 个模板)
|
||||
|
||||
提供布局模板和组件式可视化方案,支持灵活定制。
|
||||
|
||||
# 六、附录
|
||||
|
||||
## 6.1 项目文件结构
|
||||
|
||||
```
|
||||
visual-html./
|
||||
├── index.html # 入口 HTML 文件
|
||||
├── package.json # 项目配置与依赖
|
||||
├── tsconfig.json # TypeScript 配置
|
||||
├── vite.config.ts # Vite 构建配置
|
||||
├── src/ # 源代码目录
|
||||
│ ├── main.ts # 应用入口
|
||||
│ ├── App.vue # 根组件
|
||||
│ ├── types.ts # 类型定义
|
||||
│ ├── router/index.ts # 路由配置(85条路由)
|
||||
│ ├── data/templates.ts # 模板数据
|
||||
│ ├── utils/device.ts # 工具函数
|
||||
│ ├── assets/ # 静态资源(样式文件)
|
||||
│ ├── views/HomePage.vue # 导航首页
|
||||
│ ├── components/ # 公共组件
|
||||
│ │ ├── NavBar.vue # 导航栏组件
|
||||
│ │ ├── CategorySection.vue # 分类筛选组件
|
||||
│ │ └── TemplateCard.vue # 模板卡片组件
|
||||
│ └── dashboards/ # 66个大屏页面
|
||||
│ ├── 01vehicles/ # 车辆监控(8个)
|
||||
│ ├── 02agriculture/ # 农业数据(2个)
|
||||
│ ├── 03traffic/ # 交通运输(3个)
|
||||
│ ├── 04logistics/ # 物流数据(5个)
|
||||
│ ├── 05Ecommerce/ # 电商数据(4个)
|
||||
│ ├── 06government/ # 政务大数据(9个)
|
||||
│ ├── 07universal/ # 通用模板(8个)
|
||||
│ ├── 08bigData/ # 大数据(5个)
|
||||
│ ├── 09others/ # 其他行业(13个)
|
||||
│ └── 10layout/ # 布局组件(11个)
|
||||
└── public/previews/ # 模板预览图
|
||||
```
|
||||
|
||||
## 6.2 技术依赖
|
||||
|
||||
| 依赖项 | 版本 | 说明 |
|
||||
|--------|------|------|
|
||||
| Vue | 3.3.x | 前端框架 |
|
||||
| TypeScript | 5.0+ | 类型系统 |
|
||||
| Vite | 4.x | 构建工具 |
|
||||
| Vue Router | 4.x | 路由管理 |
|
||||
| ECharts | 4.x | 图表库 |
|
||||
| Node.js | 18+ | 运行环境 |
|
||||
|
||||
## 6.3 浏览器兼容性
|
||||
|
||||
| 浏览器 | 最低版本 | 支持状态 |
|
||||
|--------|----------|----------|
|
||||
| Chrome | 90+ | 完全支持 |
|
||||
| Edge | 90+ | 完全支持 |
|
||||
| Firefox | 88+ | 完全支持 |
|
||||
| Safari | 14+ | 完全支持 |
|
||||
|
||||
---
|
||||
|
||||
**文档版本**:V1.0
|
||||
**最后更新**:2026年7月
|
||||
**版权所有**:可视化大屏模板系统开发团队
|
||||
Binary file not shown.
@@ -1,71 +0,0 @@
|
||||
# 可视化大屏模板系统 - 软著登记材料清单
|
||||
|
||||
## 一、已生成材料(可直接提交)
|
||||
|
||||
| 序号 | 材料名称 | 文件路径 | 说明 | 状态 |
|
||||
|------|----------|----------|------|------|
|
||||
| 1 | 源程序文档(程序鉴别材料) | `docs/源程序文档.pdf` | 严格 60 页,前 30 页+后 30 页,每页 60 行代码 | ✅ 已就绪 |
|
||||
| 2 | 软件说明书(文档鉴别材料) | `docs/软件说明书.pdf` | 5 页,含概述/运行环境/功能模块/操作说明/模板分类/附录 | ✅ 已就绪 |
|
||||
| 3 | 申请表填写指南 | `docs/软著登记申请表填写指南.md` / `.docx` | 逐字段建议填写值,可直接复制到系统 | ✅ 已就绪 |
|
||||
|
||||
## 二、需申请人自行准备的材料
|
||||
|
||||
| 序号 | 材料名称 | 要求 | 状态 |
|
||||
|------|----------|------|------|
|
||||
| 4 | 身份证正反面扫描件 | 四角完整、文字清晰、在有效期内,PDF 或 JPG 格式 | ⚠️ 待提供 |
|
||||
| 5 | 手持身份证照片(如有要求) | 面部与身份证信息清晰可见 | ⚠️ 待确认是否需要 |
|
||||
|
||||
## 三、在线系统填写项(参考值)
|
||||
|
||||
| 字段 | 填写内容 |
|
||||
|------|----------|
|
||||
| 软件全称 | 可视化大屏模板系统 |
|
||||
| 软件简称 | 大屏模板系统 |
|
||||
| 版本号 | V1.0 |
|
||||
| 权利范围 | 全部权利 |
|
||||
| 软件分类 | 应用软件 |
|
||||
| 软件说明 | 原创 |
|
||||
| 开发方式 | 单独开发 |
|
||||
| 开发完成日期 | 2026-07-26 |
|
||||
| 发表状态 | 未发表 |
|
||||
| 开发的硬件环境 | PC 机;Intel Core i5 及以上;内存 8GB 及以上;硬盘 256GB 及以上;分辨率 1920×1080 及以上 |
|
||||
| 运行的硬件环境 | PC 机或服务器;Intel Core i5 及以上;内存 8GB 及以上;硬盘 256GB 及以上;支持 WebGL 显卡;分辨率 1920×1080 及以上 |
|
||||
| 开发操作系统 | macOS 12 / Windows 10 / Windows 11 |
|
||||
| 开发工具 | Node.js 18+、npm 9+、Vite 5、Visual Studio Code、TypeScript 5.7 |
|
||||
| 运行平台 | Windows 10/11、macOS 11+、Linux |
|
||||
| 支撑环境 | Chrome 90+、Edge 90+、Firefox 88+、Safari 14+ |
|
||||
| 编程语言 | TypeScript、HTML、CSS、Vue |
|
||||
| 源程序量 | 约 105,000 行(197 个源文件) |
|
||||
| 开发目的 | 为企业和个人提供开箱即用的数据可视化大屏模板集合 |
|
||||
| 面向领域 | 数据可视化、大数据分析、企业监控、智慧城市、指挥调度、物联网、电子商务、政务管理、物流运输 |
|
||||
| 主要功能 | 大屏模板导航、模板预览、大屏展示、多屏轮播、独立页面封装、响应式图表、路由管理 |
|
||||
| 技术特点 | Vue3+TS+Vite 架构;ECharts 4.x 图表引擎;中国/省市地图;组件化设计;约 10.5 万行/85 条路由 |
|
||||
|
||||
## 四、提交前核对清单
|
||||
|
||||
- [ ] 源程序文档.pdf 确认为 **60 页**(前 30 + 后 30)
|
||||
- [ ] 软件说明书.pdf 确认为 **5 页**
|
||||
- [ ] 两个 PDF 上传成功,无格式错误
|
||||
- [ ] 身份证正反面扫描件已上传,清晰有效
|
||||
- [ ] 软件全称、版本号、开发完成日期与 PDF 材料中一致
|
||||
- [ ] 著作权人信息(姓名、身份证号)与身份证件一致
|
||||
- [ ] 所有带 `*` 必填字段均已完成
|
||||
- [ ] 发表状态选择正确(未发表 or 已发表+日期)
|
||||
- [ ] 提交前预览确认无遗漏
|
||||
|
||||
## 五、文件清单总览
|
||||
|
||||
```
|
||||
docs/
|
||||
├── 源程序文档.pdf ← 程序鉴别材料(60页)
|
||||
├── 软件说明书.pdf ← 文档鉴别材料(5页)
|
||||
├── 源程序文档.docx ← 源文件备份
|
||||
├── 软件说明书.docx ← 源文件备份
|
||||
├── 软著登记申请表填写指南.md ← 各字段填写参考
|
||||
├── 软著登记申请表填写指南.docx ← 同上(Word版)
|
||||
└── 软著登记材料清单.md ← 本文件
|
||||
|
||||
需自行准备:
|
||||
── 身份证正面扫描件(PDF/JPG)
|
||||
── 身份证反面扫描件(PDF/JPG)
|
||||
```
|
||||
@@ -1,116 +0,0 @@
|
||||
# 中国版权保护中心 — 软件著作权登记申请表填写指南
|
||||
|
||||
> 对应项目:可视化大屏模板系统(Visual Dashboard Template System)
|
||||
> 版本号:V1.0
|
||||
> 生成日期:2026年7月26日
|
||||
|
||||
---
|
||||
|
||||
## 一、软件基本信息
|
||||
|
||||
| 表单字段 | 建议填写内容 | 说明 |
|
||||
|---|---|---|
|
||||
| **软件全称** | 可视化大屏模板系统 | |
|
||||
| **软件简称** | 大屏模板系统 | 可留空;填写便于识别。 |
|
||||
| **版本号** | V1.0 | 与材料中版本号保持一致。 |
|
||||
| **权利范围** | 全部权利 | 原创作品,选择全部权利。 |
|
||||
| **软件分类** | 应用软件 | 在系统中选择对应分类;可对应分类号「应用软件」或「信息应用软件」。 |
|
||||
| **软件说明** | 原创 | 本项目为原创开发,非翻译/合成软件。 |
|
||||
| **开发方式** | 单独开发 | 截图中显示为个人著作权人,选择单独开发。 |
|
||||
| **开发完成日期** | 2026-07-26 | 以最终改造完成日期为准。 |
|
||||
| **发表状态** | 未发表 | 如尚未公开发布,选择未发表;若已发布网站/开源,选择已发表并填写首次发表日期与地点。 |
|
||||
|
||||
---
|
||||
|
||||
## 二、著作权人信息
|
||||
|
||||
| 表单字段 | 截图已有内容 | 核对建议 |
|
||||
|---|---|---|
|
||||
| 国籍/地区 | 中国 | 已填写,核对无误 |
|
||||
| 省份/城市 | 湖北 / 武汉 | 已填写,核对无误 |
|
||||
| 身份类型 | 自然人 | 已填写,核对无误 |
|
||||
| 姓名 | 陈银军 | 已填写,核对与身份证一致 |
|
||||
| 证件类型 | 居民身份证 | 已填写,核对无误 |
|
||||
| 证件号码 | 已填写 | 请务必核对与身份证完全一致 |
|
||||
|
||||
> 提示:自然人申请需额外上传身份证正反面扫描件(PDF 或图片),请确保身份证在有效期内、四角完整、文字清晰。
|
||||
|
||||
---
|
||||
|
||||
## 三、开发/运行环境
|
||||
|
||||
| 表单字段 | 建议填写内容 |
|
||||
|---|---|
|
||||
| **开发的硬件环境** | PC 机;Intel Core i5 及以上 CPU;内存 8GB 及以上;硬盘 256GB 及以上;显示器分辨率 1920×1080 及以上。 |
|
||||
| **运行的硬件环境** | PC 机或服务器;Intel Core i5 及以上 CPU;内存 8GB 及以上;硬盘 256GB 及以上;支持 WebGL 的显卡;显示器分辨率 1920×1080 及以上。 |
|
||||
| **开发该软件的操作系统** | macOS 12 / Windows 10 / Windows 11 |
|
||||
| **软件开发环境 / 开发工具** | Node.js 18+、npm 9+、Vite 5、Visual Studio Code、TypeScript 5.7、Vue Language Features |
|
||||
| **该软件的运行平台 / 操作系统** | Windows 10/11、macOS 11+、Linux 各发行版 |
|
||||
| **软件运行支撑环境 / 支持软件** | Chrome 90+、Microsoft Edge 90+、Firefox 88+、Safari 14+ 等现代浏览器 |
|
||||
| **编程语言** | TypeScript、HTML、CSS、Vue |
|
||||
| **源程序量** | 约 105,000 行(197 个源文件) |
|
||||
|
||||
---
|
||||
|
||||
## 四、软件功能与技术特点
|
||||
|
||||
### 4.1 开发目的
|
||||
|
||||
为企业和个人提供一套开箱即用的数据可视化大屏模板集合,降低大屏开发成本,提升数据展示效率,适用于车辆监控、农业数据、交通运输、物流数据、电商数据、政务大数据、通用模板、大数据分析、行业垂直应用及布局组件等多种场景。
|
||||
|
||||
### 4.2 面向领域 / 行业
|
||||
|
||||
数据可视化、大数据分析、企业监控、智慧城市、指挥调度、态势感知、物联网、电子商务、政务管理、物流运输。
|
||||
|
||||
### 4.3 软件的主要功能
|
||||
|
||||
1. **大屏模板导航**:首页以卡片形式展示 10 大分类、66 个数据大屏模板,用户可按分类筛选、关键词搜索、滚动浏览。
|
||||
2. **模板预览**:每个模板卡片展示预览图、名称和描述,帮助用户快速识别目标大屏。
|
||||
3. **大屏页面展示**:点击卡片进入对应大屏详情页,页面内集成 ECharts 图表、地图、数字滚动、轮播切换等可视化效果。
|
||||
4. **多屏模板支持**:部分复杂模板包含多个子页面,支持自动轮播或手动切换。
|
||||
5. **独立页面封装**:每个大屏页面自包含样式、图片、数据配置及子组件,便于单独拷贝复用。
|
||||
6. **响应式图表**:图表随浏览器窗口尺寸变化自动缩放,适配主流显示分辨率。
|
||||
7. **路由管理**:基于 Vue Router 实现单页面应用路由,共注册 85 条路由,支持首页、大屏页及子页面导航。
|
||||
|
||||
### 4.4 软件的技术特点
|
||||
|
||||
- **前端框架**:基于 Vue 3 + TypeScript + Vite 构建,采用 Composition API 与 `<script setup>` 语法。
|
||||
- **路由方案**:使用 Vue Router 4 实现 SPA 路由管理,首页与大屏页面之间无缝跳转。
|
||||
- **可视化引擎**:集成 ECharts 4.x,支持柱状图、折线图、饼图、散点图、地图、雷达图、仪表盘、水球图、词云图等 20 余种图表。
|
||||
- **地图能力**:支持中国地图、省级地图及 GIS 地图展示,地图数据以 ESM 模块形式封装。
|
||||
- **组件化设计**:公共组件(NavBar、CategorySection、TemplateCard)与页面组件解耦,便于维护与扩展。
|
||||
- **自包含结构**:每个大屏模板独立存放于 `src/dashboards/<分类>/<编号>/` 目录,包含 `.vue` 主文件、`assets/` 资源与 `components/` 子组件。
|
||||
- **代码规模**:源程序约 105,000 行,197 个源文件,覆盖 85 条路由页面。
|
||||
|
||||
> 表单中「软件的技术特点」若为多选,可勾选:**大数据软件**、**智慧城市软件**、**物联网软件**、**信息安全软件**(如适用);并在文本框中补充上述技术特点说明。
|
||||
|
||||
---
|
||||
|
||||
## 五、鉴别材料上传
|
||||
|
||||
| 上传项 | 应上传文件 | 文件状态 |
|
||||
|---|---|---|
|
||||
| **程序鉴别材料** | `docs/源程序文档.pdf` | ✅ 已生成,60 页(前 30 页 + 后 30 页),每页 60 行 |
|
||||
| **文档鉴别材料** | `docs/软件说明书.pdf` | ✅ 已生成,5 页(不足 60 页,全部提交) |
|
||||
| **其他相关证明文件** | 无需上传 | 个人原创单独开发,无合作/委托/任务开发协议 |
|
||||
|
||||
> 注意:版权中心要求上传 PDF 格式。已生成的 PDF 文件位于 `docs/` 目录下,请在上传前再次检查文件名、页数及清晰度。
|
||||
|
||||
---
|
||||
|
||||
## 六、提交前核对清单
|
||||
|
||||
- [ ] 软件全称、版本号、开发完成日期与鉴别材料中一致
|
||||
- [ ] 著作权人姓名、身份证号与身份证正反面扫描件一致
|
||||
- [ ] 身份证扫描件四角完整、文字清晰、在有效期内
|
||||
- [ ] 源程序文档 PDF 为 60 页(前 30 + 后 30)
|
||||
- [ ] 软件说明书 PDF 已全部包含(5 页)
|
||||
- [ ] 上传文件均为 PDF 格式,大小符合系统限制
|
||||
- [ ] 申请表中所有带 * 号字段均已填写
|
||||
- [ ] 确认「发表状态」选择正确(未发表/已发表)
|
||||
|
||||
---
|
||||
|
||||
## 七、联系方式/备注
|
||||
|
||||
如在填写过程中遇到系统字段字数限制,可对上述建议内容进行适当精简,但核心信息(名称、版本、开发完成日期、行数、功能、技术特点)需保持一致。
|
||||
@@ -0,0 +1,382 @@
|
||||
# -*- coding: utf-8 -*-
|
||||
"""生成软著文档鉴别材料PDF
|
||||
|
||||
将软件说明书.md 转换为文档鉴别材料PDF(前30页 + 后30页)。
|
||||
自动适配 Windows / macOS / Linux 的中文字体。
|
||||
"""
|
||||
|
||||
import os
|
||||
import sys
|
||||
import platform
|
||||
from reportlab.lib.pagesizes import A4
|
||||
from reportlab.lib.styles import getSampleStyleSheet, ParagraphStyle
|
||||
from reportlab.lib.units import cm
|
||||
from reportlab.platypus import (
|
||||
SimpleDocTemplate,
|
||||
Paragraph,
|
||||
Spacer,
|
||||
PageBreak,
|
||||
)
|
||||
from reportlab.pdfbase import pdfmetrics
|
||||
from reportlab.pdfbase.ttfonts import TTFont
|
||||
from reportlab.lib.enums import TA_CENTER, TA_JUSTIFY
|
||||
from reportlab.lib import colors
|
||||
|
||||
# ============================================================
|
||||
# 配置
|
||||
# ============================================================
|
||||
|
||||
SCRIPT_DIR = os.path.dirname(os.path.abspath(__file__))
|
||||
INPUT_MD = os.path.join(SCRIPT_DIR, "软件说明书.md")
|
||||
OUTPUT_PDF = os.path.join(SCRIPT_DIR, "文档鉴别材料_软件说明书.pdf")
|
||||
|
||||
# 软件信息
|
||||
SOFTWARE_NAME = "数据可视化大屏展示系统V1.0"
|
||||
SOFTWARE_VERSION = "V1.0"
|
||||
COPYRIGHT_OWNER = "[著作权人姓名]"
|
||||
|
||||
# 分页参数
|
||||
LINES_PER_PAGE = 45
|
||||
PAGES_FRONT = 30
|
||||
PAGES_BACK = 30
|
||||
|
||||
|
||||
# ============================================================
|
||||
# 字体注册(自动适配多平台)
|
||||
# ============================================================
|
||||
|
||||
def find_chinese_fonts():
|
||||
"""在当前操作系统中查找可用的中文字体"""
|
||||
system = platform.system()
|
||||
|
||||
if system == "Windows":
|
||||
candidates = [
|
||||
("SimSun", "C:/Windows/Fonts/simsun.ttc"),
|
||||
("SimHei", "C:/Windows/Fonts/simhei.ttf"),
|
||||
("MSYH", "C:/Windows/Fonts/msyh.ttc"),
|
||||
]
|
||||
elif system == "Darwin": # macOS
|
||||
candidates = [
|
||||
("PingFang", "/System/Library/Fonts/PingFang.ttc"),
|
||||
("STHeiti", "/System/Library/Fonts/STHeiti Medium.ttc"),
|
||||
("STSong", "/Library/Fonts/Songti.ttc"),
|
||||
]
|
||||
else: # Linux
|
||||
candidates = [
|
||||
("NotoSansCJK", "/usr/share/fonts/opentype/noto/NotoSansCJK-Regular.ttc"),
|
||||
("NotoSansCJK", "/usr/share/fonts/noto-cjk/NotoSansCJK-Regular.ttc"),
|
||||
("NotoSansCJK-OTF", "/usr/share/fonts/opentype/noto/NotoSansCJKsc-Regular.otf"),
|
||||
("WenQuanYi", "/usr/share/fonts/wenquanyi/wqy-zenhei/wqy-zenhei.ttc"),
|
||||
("WenQuanYi-Micro", "/usr/share/fonts/wenquanyi/wqy-microhei/wqy-microhei.ttc"),
|
||||
("DroidSans", "/usr/share/fonts/truetype/droid/DroidSansFallbackFull.ttf"),
|
||||
]
|
||||
|
||||
# 也可从环境变量覆盖
|
||||
env_font = os.environ.get("SOFTCOPY_FONT_PATH")
|
||||
env_font_name = os.environ.get("SOFTCOPY_FONT_NAME", "CustomFont")
|
||||
if env_font and os.path.exists(env_font):
|
||||
candidates.insert(0, (env_font_name, env_font))
|
||||
|
||||
found = []
|
||||
for name, path in candidates:
|
||||
if os.path.exists(path):
|
||||
found.append((name, path))
|
||||
|
||||
return found
|
||||
|
||||
|
||||
def register_fonts():
|
||||
"""注册中文字体,返回 (body_font, heading_font)"""
|
||||
fonts = find_chinese_fonts()
|
||||
|
||||
if not fonts:
|
||||
print("错误: 未找到可用的中文字体!")
|
||||
print("请安装中文字体或设置环境变量 SOFTCOPY_FONT_PATH")
|
||||
if platform.system() == "Linux":
|
||||
print(" Ubuntu/Debian: sudo apt install fonts-noto-cjk")
|
||||
sys.exit(1)
|
||||
|
||||
# 注册第一个找到的字体作为正文字体
|
||||
body_name, body_path = fonts[0]
|
||||
pdfmetrics.registerFont(TTFont(body_name, body_path))
|
||||
print(f"正文字体: {body_name} ({body_path})")
|
||||
|
||||
# 尝试找一个不同的字体作为标题字体
|
||||
heading_name = body_name
|
||||
for name, path in fonts[1:]:
|
||||
if name != body_name:
|
||||
pdfmetrics.registerFont(TTFont(name, path))
|
||||
heading_name = name
|
||||
print(f"标题字体: {heading_name} ({path})")
|
||||
break
|
||||
else:
|
||||
heading_name = body_name
|
||||
|
||||
return body_name, heading_name
|
||||
|
||||
|
||||
# ============================================================
|
||||
# Markdown 解析
|
||||
# ============================================================
|
||||
|
||||
def parse_markdown(content):
|
||||
"""解析Markdown内容为段落列表"""
|
||||
paragraphs = []
|
||||
lines = content.split("\n")
|
||||
i = 0
|
||||
|
||||
while i < len(lines):
|
||||
line = lines[i]
|
||||
|
||||
# 空行
|
||||
if not line.strip():
|
||||
i += 1
|
||||
continue
|
||||
|
||||
# 标题
|
||||
if line.startswith("# "):
|
||||
paragraphs.append(("h1", line[2:].strip()))
|
||||
i += 1
|
||||
elif line.startswith("## "):
|
||||
paragraphs.append(("h2", line[3:].strip()))
|
||||
i += 1
|
||||
elif line.startswith("### "):
|
||||
paragraphs.append(("h3", line[4:].strip()))
|
||||
i += 1
|
||||
elif line.startswith("#### "):
|
||||
paragraphs.append(("h4", line[5:].strip()))
|
||||
i += 1
|
||||
# 代码块
|
||||
elif line.startswith("```"):
|
||||
code_lines = []
|
||||
i += 1
|
||||
while i < len(lines) and not lines[i].startswith("```"):
|
||||
code_lines.append(lines[i])
|
||||
i += 1
|
||||
i += 1 # skip ```
|
||||
paragraphs.append(("code", "\n".join(code_lines)))
|
||||
# 表格行(简单处理,作为普通段落)
|
||||
elif line.startswith("|"):
|
||||
para_lines = [line]
|
||||
i += 1
|
||||
while i < len(lines) and lines[i].strip() and lines[i].startswith("|"):
|
||||
para_lines.append(lines[i])
|
||||
i += 1
|
||||
paragraphs.append(("p", "\n".join(para_lines)))
|
||||
# 普通段落
|
||||
else:
|
||||
para_lines = [line]
|
||||
i += 1
|
||||
while (
|
||||
i < len(lines)
|
||||
and lines[i].strip()
|
||||
and not lines[i].startswith("#")
|
||||
and not lines[i].startswith("```")
|
||||
and not lines[i].startswith("|")
|
||||
):
|
||||
para_lines.append(lines[i])
|
||||
i += 1
|
||||
paragraphs.append(("p", "\n".join(para_lines)))
|
||||
|
||||
return paragraphs
|
||||
|
||||
|
||||
# ============================================================
|
||||
# PDF 生成
|
||||
# ============================================================
|
||||
|
||||
def generate_pdf(paragraphs, body_font, heading_font):
|
||||
"""生成文档鉴别材料PDF"""
|
||||
doc = SimpleDocTemplate(
|
||||
OUTPUT_PDF,
|
||||
pagesize=A4,
|
||||
rightMargin=2.5 * cm,
|
||||
leftMargin=2.5 * cm,
|
||||
topMargin=2.5 * cm,
|
||||
bottomMargin=2.5 * cm,
|
||||
)
|
||||
|
||||
# 定义样式
|
||||
title_style = ParagraphStyle(
|
||||
"DocTitle",
|
||||
fontName=heading_font,
|
||||
fontSize=22,
|
||||
alignment=TA_CENTER,
|
||||
spaceAfter=30,
|
||||
spaceBefore=20,
|
||||
)
|
||||
|
||||
h1_style = ParagraphStyle(
|
||||
"H1",
|
||||
fontName=heading_font,
|
||||
fontSize=16,
|
||||
spaceAfter=15,
|
||||
spaceBefore=20,
|
||||
textColor=colors.HexColor("#1a1a1a"),
|
||||
)
|
||||
|
||||
h2_style = ParagraphStyle(
|
||||
"H2",
|
||||
fontName=heading_font,
|
||||
fontSize=14,
|
||||
spaceAfter=12,
|
||||
spaceBefore=15,
|
||||
textColor=colors.HexColor("#2a2a2a"),
|
||||
)
|
||||
|
||||
h3_style = ParagraphStyle(
|
||||
"H3",
|
||||
fontName=heading_font,
|
||||
fontSize=12,
|
||||
spaceAfter=10,
|
||||
spaceBefore=12,
|
||||
textColor=colors.HexColor("#3a3a3a"),
|
||||
leftIndent=0.5 * cm,
|
||||
)
|
||||
|
||||
h4_style = ParagraphStyle(
|
||||
"H4",
|
||||
fontName=heading_font,
|
||||
fontSize=11,
|
||||
spaceAfter=8,
|
||||
spaceBefore=10,
|
||||
textColor=colors.HexColor("#4a4a4a"),
|
||||
leftIndent=1 * cm,
|
||||
)
|
||||
|
||||
p_style = ParagraphStyle(
|
||||
"BodyText",
|
||||
fontName=body_font,
|
||||
fontSize=10.5,
|
||||
leading=18,
|
||||
alignment=TA_JUSTIFY,
|
||||
spaceAfter=8,
|
||||
firstLineIndent=0.7 * cm,
|
||||
)
|
||||
|
||||
code_style = ParagraphStyle(
|
||||
"CodeBlock",
|
||||
fontName=body_font,
|
||||
fontSize=8,
|
||||
leading=12,
|
||||
leftIndent=1 * cm,
|
||||
rightIndent=1 * cm,
|
||||
spaceAfter=10,
|
||||
spaceBefore=10,
|
||||
backColor=colors.HexColor("#f5f5f5"),
|
||||
borderWidth=0.5,
|
||||
borderColor=colors.HexColor("#ddd"),
|
||||
borderPadding=5,
|
||||
)
|
||||
|
||||
story = []
|
||||
|
||||
# 封面页
|
||||
story.append(Spacer(1, 4 * cm))
|
||||
story.append(Paragraph("文档鉴别材料", title_style))
|
||||
story.append(Spacer(1, 1 * cm))
|
||||
story.append(Paragraph("(软件说明书)", title_style))
|
||||
story.append(Spacer(1, 3 * cm))
|
||||
|
||||
# 封面信息
|
||||
info_style = ParagraphStyle(
|
||||
"Info",
|
||||
fontName=body_font,
|
||||
fontSize=12,
|
||||
leading=24,
|
||||
alignment=TA_CENTER,
|
||||
)
|
||||
story.append(Paragraph(f"软件全称:{SOFTWARE_NAME}", info_style))
|
||||
story.append(Paragraph(f"版本号:{SOFTWARE_VERSION}", info_style))
|
||||
story.append(Paragraph(f"著作权人:{COPYRIGHT_OWNER}", info_style))
|
||||
story.append(PageBreak())
|
||||
|
||||
# 正文
|
||||
story.append(Paragraph("—— 软件说明书前30页 ——", title_style))
|
||||
story.append(Spacer(1, 0.5 * cm))
|
||||
|
||||
page_count = 0
|
||||
line_count = 0
|
||||
|
||||
for para_type, para_content in paragraphs:
|
||||
if para_type == "h1":
|
||||
story.append(Paragraph(para_content, h1_style))
|
||||
line_count += 2
|
||||
elif para_type == "h2":
|
||||
story.append(Paragraph(para_content, h2_style))
|
||||
line_count += 1.5
|
||||
elif para_type == "h3":
|
||||
story.append(Paragraph(para_content, h3_style))
|
||||
line_count += 1.2
|
||||
elif para_type == "h4":
|
||||
story.append(Paragraph(para_content, h4_style))
|
||||
line_count += 1
|
||||
elif para_type == "code":
|
||||
code_lines = para_content.split("\n")
|
||||
safe_code = (
|
||||
para_content.replace("&", "&")
|
||||
.replace("<", "<")
|
||||
.replace(">", ">")
|
||||
.replace("\n", "<br/>")
|
||||
)
|
||||
story.append(Paragraph(safe_code, code_style))
|
||||
line_count += len(code_lines) * 0.5 + 1
|
||||
else:
|
||||
safe_text = (
|
||||
para_content.replace("&", "&")
|
||||
.replace("<", "<")
|
||||
.replace(">", ">")
|
||||
)
|
||||
story.append(Paragraph(safe_text, p_style))
|
||||
text_len = len(para_content)
|
||||
est_lines = max(1, text_len / 50)
|
||||
line_count += est_lines
|
||||
|
||||
# 检查是否需要分页
|
||||
if line_count >= LINES_PER_PAGE:
|
||||
page_count += 1
|
||||
line_count = 0
|
||||
if page_count == PAGES_FRONT:
|
||||
story.append(PageBreak())
|
||||
story.append(Paragraph("—— 软件说明书后30页 ——", title_style))
|
||||
story.append(Spacer(1, 0.5 * cm))
|
||||
elif page_count < PAGES_FRONT + PAGES_BACK:
|
||||
story.append(PageBreak())
|
||||
|
||||
doc.build(story)
|
||||
print(f"PDF已生成: {OUTPUT_PDF}")
|
||||
print(f"总页数约: {page_count} 页")
|
||||
|
||||
|
||||
# ============================================================
|
||||
# 主流程
|
||||
# ============================================================
|
||||
|
||||
if __name__ == "__main__":
|
||||
print("=" * 60)
|
||||
print("文档鉴别材料PDF生成工具")
|
||||
print(f"输入文件: {INPUT_MD}")
|
||||
print(f"输出文件: {OUTPUT_PDF}")
|
||||
print("=" * 60)
|
||||
|
||||
# 注册字体
|
||||
body_font, heading_font = register_fonts()
|
||||
|
||||
# 读取软件说明书
|
||||
print("\n正在读取软件说明书...")
|
||||
if not os.path.exists(INPUT_MD):
|
||||
print(f"错误: 找不到文件 {INPUT_MD}")
|
||||
sys.exit(1)
|
||||
|
||||
with open(INPUT_MD, "r", encoding="utf-8") as f:
|
||||
content = f.read()
|
||||
|
||||
# 解析Markdown
|
||||
print("正在解析Markdown...")
|
||||
paragraphs = parse_markdown(content)
|
||||
print(f"共解析 {len(paragraphs)} 个段落")
|
||||
|
||||
# 生成PDF
|
||||
print("正在生成PDF...")
|
||||
generate_pdf(paragraphs, body_font, heading_font)
|
||||
print("完成!")
|
||||
@@ -0,0 +1,280 @@
|
||||
# -*- coding: utf-8 -*-
|
||||
"""生成软著程序鉴别材料PDF
|
||||
|
||||
从项目 src 目录收集源代码,生成前30页 + 后30页的程序鉴别材料PDF。
|
||||
自动适配 Windows / macOS / Linux 的中文字体。
|
||||
"""
|
||||
|
||||
import os
|
||||
import sys
|
||||
import glob
|
||||
import platform
|
||||
from reportlab.lib.pagesizes import A4
|
||||
from reportlab.lib.styles import getSampleStyleSheet, ParagraphStyle
|
||||
from reportlab.lib.units import cm
|
||||
from reportlab.platypus import SimpleDocTemplate, Paragraph, Spacer, PageBreak
|
||||
from reportlab.pdfbase import pdfmetrics
|
||||
from reportlab.pdfbase.ttfonts import TTFont
|
||||
from reportlab.lib.enums import TA_CENTER
|
||||
|
||||
# ============================================================
|
||||
# 配置
|
||||
# ============================================================
|
||||
|
||||
# 项目根目录(脚本所在目录的上级目录)
|
||||
SCRIPT_DIR = os.path.dirname(os.path.abspath(__file__))
|
||||
PROJECT_DIR = os.path.dirname(SCRIPT_DIR)
|
||||
OUTPUT_PDF = os.path.join(SCRIPT_DIR, "程序鉴别材料_源代码.pdf")
|
||||
|
||||
# 软件信息
|
||||
SOFTWARE_NAME = "数据可视化大屏展示系统V1.0"
|
||||
SOFTWARE_VERSION = "V1.0"
|
||||
COPYRIGHT_OWNER = "[著作权人姓名]"
|
||||
|
||||
# 分页参数
|
||||
LINES_PER_PAGE = 55 # 每页约55行代码
|
||||
PAGES_FRONT = 30 # 前30页
|
||||
PAGES_BACK = 30 # 后30页
|
||||
|
||||
|
||||
# ============================================================
|
||||
# 字体注册(自动适配多平台)
|
||||
# ============================================================
|
||||
|
||||
def find_chinese_fonts():
|
||||
"""在当前操作系统中查找可用的中文字体"""
|
||||
system = platform.system()
|
||||
|
||||
if system == "Windows":
|
||||
candidates = [
|
||||
("SimSun", "C:/Windows/Fonts/simsun.ttc"),
|
||||
("SimHei", "C:/Windows/Fonts/simhei.ttf"),
|
||||
("MSYH", "C:/Windows/Fonts/msyh.ttc"),
|
||||
]
|
||||
elif system == "Darwin": # macOS
|
||||
candidates = [
|
||||
("PingFang", "/System/Library/Fonts/PingFang.ttc"),
|
||||
("STHeiti", "/System/Library/Fonts/STHeiti Medium.ttc"),
|
||||
("STSong", "/Library/Fonts/Songti.ttc"),
|
||||
]
|
||||
else: # Linux
|
||||
candidates = [
|
||||
("NotoSansCJK", "/usr/share/fonts/opentype/noto/NotoSansCJK-Regular.ttc"),
|
||||
("NotoSansCJK", "/usr/share/fonts/noto-cjk/NotoSansCJK-Regular.ttc"),
|
||||
("NotoSansCJK-OTF", "/usr/share/fonts/opentype/noto/NotoSansCJKsc-Regular.otf"),
|
||||
("WenQuanYi", "/usr/share/fonts/wenquanyi/wqy-zenhei/wqy-zenhei.ttc"),
|
||||
("WenQuanYi-Micro", "/usr/share/fonts/wenquanyi/wqy-microhei/wqy-microhei.ttc"),
|
||||
("DroidSans", "/usr/share/fonts/truetype/droid/DroidSansFallbackFull.ttf"),
|
||||
]
|
||||
|
||||
# 也可从环境变量覆盖
|
||||
env_font = os.environ.get("SOFTCOPY_FONT_PATH")
|
||||
env_font_name = os.environ.get("SOFTCOPY_FONT_NAME", "CustomFont")
|
||||
if env_font and os.path.exists(env_font):
|
||||
candidates.insert(0, (env_font_name, env_font))
|
||||
|
||||
found = []
|
||||
for name, path in candidates:
|
||||
if os.path.exists(path):
|
||||
found.append((name, path))
|
||||
|
||||
return found
|
||||
|
||||
|
||||
def register_fonts():
|
||||
"""注册中文字体,返回 (body_font, heading_font)"""
|
||||
fonts = find_chinese_fonts()
|
||||
|
||||
if not fonts:
|
||||
print("错误: 未找到可用的中文字体!")
|
||||
print("请安装中文字体或设置环境变量 SOFTCOPY_FONT_PATH")
|
||||
if platform.system() == "Linux":
|
||||
print(" Ubuntu/Debian: sudo apt install fonts-noto-cjk")
|
||||
sys.exit(1)
|
||||
|
||||
# 注册第一个找到的字体作为正文字体
|
||||
body_name, body_path = fonts[0]
|
||||
pdfmetrics.registerFont(TTFont(body_name, body_path))
|
||||
print(f"正文字体: {body_name} ({body_path})")
|
||||
|
||||
# 尝试找一个不同的字体作为标题字体
|
||||
heading_name = body_name
|
||||
for name, path in fonts[1:]:
|
||||
if name != body_name:
|
||||
pdfmetrics.registerFont(TTFont(name, path))
|
||||
heading_name = name
|
||||
print(f"标题字体: {heading_name} ({path})")
|
||||
break
|
||||
else:
|
||||
# 如果只有一个字体,标题也用它
|
||||
heading_name = body_name
|
||||
|
||||
return body_name, heading_name
|
||||
|
||||
|
||||
# ============================================================
|
||||
# 源代码收集
|
||||
# ============================================================
|
||||
|
||||
def collect_source_files():
|
||||
"""收集项目 src 目录下的所有源代码文件"""
|
||||
extensions = ["*.vue", "*.ts", "*.js", "*.css", "*.scss", "*.less"]
|
||||
source_files = []
|
||||
src_dir = os.path.join(PROJECT_DIR, "src")
|
||||
|
||||
for ext in extensions:
|
||||
pattern = os.path.join(src_dir, "**", ext)
|
||||
files = glob.glob(pattern, recursive=True)
|
||||
# 排除 node_modules
|
||||
files = [f for f in files if "node_modules" not in f]
|
||||
source_files.extend(sorted(files))
|
||||
|
||||
return source_files
|
||||
|
||||
|
||||
def read_all_code(files):
|
||||
"""读取所有代码内容,返回行列表"""
|
||||
all_lines = []
|
||||
for filepath in files:
|
||||
try:
|
||||
with open(filepath, "r", encoding="utf-8") as f:
|
||||
lines = f.readlines()
|
||||
rel_path = os.path.relpath(filepath, PROJECT_DIR)
|
||||
all_lines.append(f"\n{'=' * 70}")
|
||||
all_lines.append(f"文件: {rel_path}")
|
||||
all_lines.append(f"{'=' * 70}\n")
|
||||
for line in lines:
|
||||
all_lines.append(line.rstrip("\n"))
|
||||
except Exception as e:
|
||||
print(f"警告: 无法读取文件 {filepath}: {e}")
|
||||
return all_lines
|
||||
|
||||
|
||||
# ============================================================
|
||||
# PDF 生成
|
||||
# ============================================================
|
||||
|
||||
def generate_pdf(lines_front, lines_back, body_font, heading_font):
|
||||
"""生成程序鉴别材料PDF"""
|
||||
doc = SimpleDocTemplate(
|
||||
OUTPUT_PDF,
|
||||
pagesize=A4,
|
||||
rightMargin=2 * cm,
|
||||
leftMargin=2 * cm,
|
||||
topMargin=2 * cm,
|
||||
bottomMargin=2 * cm,
|
||||
)
|
||||
|
||||
styles = getSampleStyleSheet()
|
||||
|
||||
# 代码样式
|
||||
code_style = ParagraphStyle(
|
||||
"CodeStyle",
|
||||
parent=styles["Normal"],
|
||||
fontName=body_font,
|
||||
fontSize=8,
|
||||
leading=12,
|
||||
leftIndent=0,
|
||||
spaceAfter=0,
|
||||
wordWrap="CJK",
|
||||
)
|
||||
|
||||
# 标题样式
|
||||
title_style = ParagraphStyle(
|
||||
"TitleStyle",
|
||||
parent=styles["Title"],
|
||||
fontName=heading_font,
|
||||
fontSize=16,
|
||||
alignment=TA_CENTER,
|
||||
spaceAfter=20,
|
||||
)
|
||||
|
||||
story = []
|
||||
|
||||
# 封面页
|
||||
story.append(Paragraph("程序鉴别材料", title_style))
|
||||
story.append(Paragraph("(源代码)", title_style))
|
||||
story.append(Spacer(1, 30))
|
||||
story.append(Paragraph(f"软件全称:{SOFTWARE_NAME}", code_style))
|
||||
story.append(Paragraph(f"版本号:{SOFTWARE_VERSION}", code_style))
|
||||
story.append(Paragraph(f"著作权人:{COPYRIGHT_OWNER}", code_style))
|
||||
story.append(PageBreak())
|
||||
|
||||
# 前30页
|
||||
story.append(Paragraph("—— 源代码前30页 ——", title_style))
|
||||
story.append(Spacer(1, 10))
|
||||
|
||||
for i, line in enumerate(lines_front):
|
||||
if i > 0 and i % LINES_PER_PAGE == 0:
|
||||
story.append(PageBreak())
|
||||
|
||||
# 转义HTML特殊字符
|
||||
safe_line = line.replace("&", "&").replace("<", "<").replace(">", ">")
|
||||
# 处理空格
|
||||
safe_line = safe_line.replace(" ", " ")
|
||||
|
||||
p = Paragraph(safe_line, code_style)
|
||||
story.append(p)
|
||||
|
||||
story.append(PageBreak())
|
||||
|
||||
# 后30页
|
||||
story.append(Paragraph("—— 源代码后30页 ——", title_style))
|
||||
story.append(Spacer(1, 10))
|
||||
|
||||
for i, line in enumerate(lines_back):
|
||||
if i > 0 and i % LINES_PER_PAGE == 0:
|
||||
story.append(PageBreak())
|
||||
|
||||
safe_line = line.replace("&", "&").replace("<", "<").replace(">", ">")
|
||||
safe_line = safe_line.replace(" ", " ")
|
||||
|
||||
p = Paragraph(safe_line, code_style)
|
||||
story.append(p)
|
||||
|
||||
doc.build(story)
|
||||
print(f"PDF已生成: {OUTPUT_PDF}")
|
||||
|
||||
|
||||
# ============================================================
|
||||
# 主流程
|
||||
# ============================================================
|
||||
|
||||
if __name__ == "__main__":
|
||||
print("=" * 60)
|
||||
print("程序鉴别材料PDF生成工具")
|
||||
print(f"项目目录: {PROJECT_DIR}")
|
||||
print(f"输出文件: {OUTPUT_PDF}")
|
||||
print("=" * 60)
|
||||
|
||||
# 注册字体
|
||||
body_font, heading_font = register_fonts()
|
||||
|
||||
# 收集源代码文件
|
||||
print("\n正在收集源代码文件...")
|
||||
files = collect_source_files()
|
||||
print(f"找到 {len(files)} 个源代码文件")
|
||||
|
||||
# 读取代码内容
|
||||
print("正在读取代码内容...")
|
||||
all_lines = read_all_code(files)
|
||||
print(f"总代码行数: {len(all_lines)}")
|
||||
|
||||
# 计算前后30页
|
||||
total_lines_needed = (PAGES_FRONT + PAGES_BACK) * LINES_PER_PAGE
|
||||
|
||||
if len(all_lines) <= total_lines_needed:
|
||||
# 代码不足60页,全部提交
|
||||
lines_front = all_lines[: len(all_lines) // 2]
|
||||
lines_back = all_lines[len(all_lines) // 2 :]
|
||||
else:
|
||||
lines_front = all_lines[: PAGES_FRONT * LINES_PER_PAGE]
|
||||
lines_back = all_lines[-PAGES_BACK * LINES_PER_PAGE :]
|
||||
|
||||
print(f"前30页: {len(lines_front)} 行")
|
||||
print(f"后30页: {len(lines_back)} 行")
|
||||
|
||||
# 生成PDF
|
||||
print("\n正在生成PDF...")
|
||||
generate_pdf(lines_front, lines_back, body_font, heading_font)
|
||||
print("完成!")
|
||||
@@ -0,0 +1,117 @@
|
||||
# -*- coding: utf-8 -*-
|
||||
"""测试系统中文字体可用性
|
||||
|
||||
支持 Windows / macOS / Linux 三大平台字体检测。
|
||||
运行后会输出找到的中文字体及其路径,供 generate_source_code_pdf.py
|
||||
和 generate_document_pdf.py 使用。
|
||||
"""
|
||||
|
||||
import os
|
||||
import platform
|
||||
import glob
|
||||
|
||||
|
||||
def get_font_candidates():
|
||||
"""根据操作系统返回候选中文字体路径"""
|
||||
system = platform.system()
|
||||
|
||||
if system == "Windows":
|
||||
return [
|
||||
("SimSun", "C:/Windows/Fonts/simsun.ttc"),
|
||||
("SimHei", "C:/Windows/Fonts/simhei.ttf"),
|
||||
("MSYH", "C:/Windows/Fonts/msyh.ttc"),
|
||||
("MSYH", "C:/Windows/Fonts/msyh.ttf"),
|
||||
("KaiTi", "C:/Windows/Fonts/simkai.ttf"),
|
||||
("FangSong","C:/Windows/Fonts/simfang.ttf"),
|
||||
]
|
||||
elif system == "Darwin": # macOS
|
||||
return [
|
||||
("PingFang", "/System/Library/Fonts/PingFang.ttc"),
|
||||
("STHeiti", "/System/Library/Fonts/STHeiti Medium.ttc"),
|
||||
("STHeiti-L", "/System/Library/Fonts/STHeiti Light.ttc"),
|
||||
("STSong", "/Library/Fonts/Songti.ttc"),
|
||||
("STKaiti", "/Library/Fonts/Kaiti.ttc"),
|
||||
("Hiragino", "/System/Library/Fonts/Hiragino Sans GB.ttc"),
|
||||
]
|
||||
else: # Linux
|
||||
return [
|
||||
("NotoSansCJK", "/usr/share/fonts/opentype/noto/NotoSansCJK-Regular.ttc"),
|
||||
("NotoSansCJK", "/usr/share/fonts/noto-cjk/NotoSansCJK-Regular.ttc"),
|
||||
("NotoSansCJK-OTF","/usr/share/fonts/opentype/noto/NotoSansCJKsc-Regular.otf"),
|
||||
("NotoSerifCJK", "/usr/share/fonts/opentype/noto/NotoSerifCJK-Regular.ttc"),
|
||||
("WenQuanYi", "/usr/share/fonts/wenquanyi/wqy-zenhei/wqy-zenhei.ttc"),
|
||||
("WenQuanYi-Micro", "/usr/share/fonts/wenquanyi/wqy-microhei/wqy-microhei.ttc"),
|
||||
("DroidSans", "/usr/share/fonts/truetype/droid/DroidSansFallbackFull.ttf"),
|
||||
]
|
||||
|
||||
|
||||
def main():
|
||||
print("=" * 60)
|
||||
print("中文字体检测工具")
|
||||
print(f"操作系统: {platform.system()} {platform.release()}")
|
||||
print("=" * 60)
|
||||
|
||||
candidates = get_font_candidates()
|
||||
found_fonts = []
|
||||
missing_fonts = []
|
||||
|
||||
print("\n检测候选字体:")
|
||||
for name, path in candidates:
|
||||
if os.path.exists(path):
|
||||
print(f" [✓] {name}: {path}")
|
||||
found_fonts.append((name, path))
|
||||
else:
|
||||
print(f" [✗] {name}: {path}")
|
||||
missing_fonts.append((name, path))
|
||||
|
||||
# Linux 额外搜索
|
||||
if platform.system() == "Linux":
|
||||
print("\n搜索系统中所有中文字体 (fc-list 或 glob):")
|
||||
search_paths = [
|
||||
"/usr/share/fonts/**/*.ttc",
|
||||
"/usr/share/fonts/**/*.ttf",
|
||||
"/usr/share/fonts/**/*.otf",
|
||||
"/usr/local/share/fonts/**/*.ttc",
|
||||
"/usr/local/share/fonts/**/*.ttf",
|
||||
]
|
||||
all_fonts = []
|
||||
for sp in search_paths:
|
||||
all_fonts.extend(glob.glob(sp, recursive=True))
|
||||
|
||||
if all_fonts:
|
||||
# 过滤可能包含中文的字体
|
||||
cjk_keywords = ["noto", "cjk", "wqy", "wenquanyi", "droid", "source", "simsun", "simhei"]
|
||||
cjk_fonts = [f for f in all_fonts if any(k in f.lower() for k in cjk_keywords)]
|
||||
if cjk_fonts:
|
||||
print(f" 找到 {len(cjk_fonts)} 个可能的中文字体:")
|
||||
for f in cjk_fonts[:20]:
|
||||
print(f" {f}")
|
||||
else:
|
||||
print(" 未找到已知中文字体,列出所有字体:")
|
||||
for f in all_fonts[:20]:
|
||||
print(f" {f}")
|
||||
else:
|
||||
print(" 未找到任何字体文件")
|
||||
|
||||
# 输出结果
|
||||
print("\n" + "=" * 60)
|
||||
if found_fonts:
|
||||
print(f"检测结果: 找到 {len(found_fonts)} 个可用字体")
|
||||
print("\n可在 PDF 生成脚本中使用以下字体:")
|
||||
for name, path in found_fonts:
|
||||
print(f' TTFont("{name}", "{path}")')
|
||||
else:
|
||||
print("检测结果: 未找到中文字体!")
|
||||
if platform.system() == "Linux":
|
||||
print("\n建议安装中文字体:")
|
||||
print(" Ubuntu/Debian: sudo apt install fonts-noto-cjk")
|
||||
print(" 或: sudo apt install fonts-wqy-zenhei")
|
||||
elif platform.system() == "Darwin":
|
||||
print("\nmacOS 通常自带 PingFang 字体,请检查路径是否正确")
|
||||
else:
|
||||
print("\nWindows 通常自带 SimSun/SimHei 字体,请检查路径是否正确")
|
||||
print("=" * 60)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
@@ -0,0 +1,453 @@
|
||||
# 数据可视化大屏展示系统 V1.0 软件说明书
|
||||
|
||||
## 一、软件概述
|
||||
|
||||
### 1.1 软件名称
|
||||
数据可视化大屏展示系统 V1.0
|
||||
|
||||
### 1.2 开发背景
|
||||
随着大数据时代的到来,数据可视化大屏已成为企业和组织展示数据分析结果、辅助决策的重要手段。各行各业对数据可视化的需求日益增长,但传统的数据展示方式存在信息表达不清晰、交互性差、视觉效果单一等问题。为了满足不同行业的数据可视化大屏展示需求,开发了本软件——数据可视化大屏展示系统。
|
||||
|
||||
本软件基于现代化的前端技术栈,采用组件化开发模式,提供了丰富多样的数据可视化大屏模板,涵盖车联网、智慧农业、交通、物流、电商、政务、通用、大数据分析等多个行业领域,帮助用户快速构建专业级的数据可视化大屏界面。
|
||||
|
||||
### 1.3 开发目的
|
||||
本软件旨在解决以下问题:
|
||||
- 提供多行业大数据可视化大屏解决方案
|
||||
- 降低数据可视化开发门槛
|
||||
- 支持多种图表类型和展示形式
|
||||
- 实现响应式布局,适配不同显示设备
|
||||
- 提供高性能的数据渲染能力
|
||||
- 支持动态交互和实时数据更新
|
||||
|
||||
### 1.4 适用范围
|
||||
本软件适用于以下场景:
|
||||
- 企业大数据展示大屏
|
||||
- 政府数据监控中心
|
||||
- 车联网与交通数据监控
|
||||
- 物流大数据平台
|
||||
- 电商数据分析大屏
|
||||
- 政务数据可视化
|
||||
- 工业物联网监控
|
||||
- 气象与环境监测
|
||||
- 公共安全与消防监控
|
||||
|
||||
## 二、系统架构
|
||||
|
||||
### 2.1 技术架构
|
||||
本软件采用前端单页应用(SPA)架构模式,基于Vue.js 3.x框架,使用TypeScript进行类型安全的开发,通过Vite构建工具进行项目构建。
|
||||
|
||||
#### 2.1.1 前端架构
|
||||
- **核心框架**:Vue 3.5 + Composition API
|
||||
- **类型系统**:TypeScript 5.7
|
||||
- **构建工具**:Vite 5.4
|
||||
- **路由管理**:Vue Router 4.6
|
||||
- **数据可视化**:ECharts 4.9、echarts-liquidfill
|
||||
- **辅助库**:jQuery 3.7(部分模板兼容使用)
|
||||
- **文档处理**:docx、pdfmake(报表导出)
|
||||
- **自动化测试**:Playwright(截图生成)
|
||||
- **样式**:CSS3、响应式布局
|
||||
|
||||
#### 2.1.2 数据层
|
||||
- **静态数据**:TypeScript/JavaScript数据文件
|
||||
- **地图数据**:GeoJSON格式的中国地图数据
|
||||
- **数据接口**:RESTful API接口(预留扩展)
|
||||
|
||||
### 2.2 项目结构
|
||||
```
|
||||
visual-html/
|
||||
├── public/ # 静态资源
|
||||
│ ├── favicon.ico # 网站图标
|
||||
│ └── previews/ # 模板预览缩略图
|
||||
├── src/
|
||||
│ ├── assets/ # 静态资源(图片、样式)
|
||||
│ │ ├── images/ # 图片资源
|
||||
│ │ └── styles/ # 全局样式
|
||||
│ ├── components/ # 通用组件
|
||||
│ │ ├── NavBar.vue # 导航栏
|
||||
│ │ ├── CategorySection.vue # 分类区域
|
||||
│ │ └── TemplateCard.vue # 模板卡片
|
||||
│ ├── dashboards/ # 大屏模板
|
||||
│ │ ├── 01vehicles/ # 车联网可视化(8套)
|
||||
│ │ ├── 02agriculture/ # 智慧农业(2套)
|
||||
│ │ ├── 03traffic/ # 交通大数据(3套)
|
||||
│ │ ├── 04logistics/ # 物流大数据(8套)
|
||||
│ │ ├── 05Ecommerce/ # 电子商务(4套)
|
||||
│ │ ├── 06government/ # 政务可视化(13套)
|
||||
│ │ ├── 07universal/ # 通用模板(8套)
|
||||
│ │ ├── 08bigData/ # 大数据可视化(5套)
|
||||
│ │ ├── 09others/ # 其他行业(15套)
|
||||
│ │ └── 10layout/ # 布局模板(11套)
|
||||
│ ├── data/ # 数据配置
|
||||
│ │ └── templates.ts # 模板分类配置
|
||||
│ ├── router/ # 路由配置
|
||||
│ │ └── index.ts # 路由定义
|
||||
│ ├── utils/ # 工具函数
|
||||
│ │ └── device.ts # 设备检测
|
||||
│ ├── views/ # 页面视图
|
||||
│ │ └── HomePage.vue # 首页导航
|
||||
│ ├── App.vue # 根组件
|
||||
│ ├── main.ts # 入口文件
|
||||
│ ├── types.ts # 类型定义
|
||||
│ └── vite-env.d.ts # 环境变量声明
|
||||
├── vite.config.ts # Vite配置
|
||||
├── tsconfig.json # TypeScript配置
|
||||
├── package.json # 项目依赖
|
||||
└── index.html # 入口HTML
|
||||
```
|
||||
|
||||
## 三、主要功能模块
|
||||
|
||||
### 3.1 首页导航系统
|
||||
|
||||
#### 3.1.1 功能描述
|
||||
首页提供所有可视化大屏模板的分类导航和缩略图预览,用户可以快速浏览和选择需要的模板。主要功能包括:
|
||||
- **分类导航栏**:左侧固定导航,按行业分类快速定位
|
||||
- **模板卡片展示**:每个模板以卡片形式展示,包含标题和预览图
|
||||
- **设备适配检测**:自动检测移动端访问并提示使用电脑浏览
|
||||
- **动画交互效果**:卡片悬停动画效果
|
||||
|
||||
#### 3.1.2 技术实现
|
||||
- 使用Vue 3 Composition API和TypeScript开发
|
||||
- 响应式布局适配不同屏幕宽度
|
||||
- CSS3动画效果增强用户体验
|
||||
- 路由懒加载优化首屏性能
|
||||
|
||||
### 3.2 车联网可视化模块(01vehicles)
|
||||
|
||||
#### 3.2.1 功能描述
|
||||
车联网可视化模块包含8套大屏模板,覆盖车联网各类应用场景:
|
||||
- **北斗车联网大数据服务平台**:车辆类型统计、企业车辆统计、在线车辆分布
|
||||
- **重点营运车辆监控与预警**:车辆实时监控、预警信息、运行轨迹
|
||||
- **省级联网联控大数据服务平台**:全省车辆联网联控数据展示
|
||||
- **北斗公共运行平台**:北斗系统运行数据监控
|
||||
- **新能源车联网综合大数据平台**:新能源车辆数据、充电桩分布
|
||||
- **车辆综合管理平台**:车辆管理综合数据展示
|
||||
|
||||
#### 3.2.2 技术实现
|
||||
- 使用ECharts实现柱状图、折线图、饼图等多种图表
|
||||
- 中国地图数据可视化(GeoJSON)
|
||||
- 数字翻牌器组件实现数据动态展示
|
||||
- 3D轮播组件实现车辆展示
|
||||
- 实时数据模拟更新
|
||||
|
||||
### 3.3 智慧农业模块(02agriculture)
|
||||
|
||||
#### 3.3.1 功能描述
|
||||
智慧农业模块包含2套大屏模板:
|
||||
- **茶园可视化监控1**:茶园环境数据监控、设备状态展示
|
||||
- **茶园可视化监控2**:茶园生产数据、气象数据展示
|
||||
|
||||
#### 3.3.2 技术实现
|
||||
- ECharts图表组件展示环境数据
|
||||
- 实时数据更新机制
|
||||
- 响应式布局适配大屏展示
|
||||
|
||||
### 3.4 交通大数据可视化模块(03traffic)
|
||||
|
||||
#### 3.4.1 功能描述
|
||||
交通大数据模块包含3套大屏模板:
|
||||
- **晋城高速管控大数据平台**:高速公路管控数据、车流量统计
|
||||
- **交通运输局数据平台**:交通运输综合数据展示
|
||||
- **北斗自由流收费管理平台**:北斗收费管理系统数据
|
||||
|
||||
#### 3.4.2 技术实现
|
||||
- 中国地图可视化展示交通路网
|
||||
- 里程计数据展示组件
|
||||
- 多维度交通数据分析图表
|
||||
|
||||
### 3.5 物流大数据可视化模块(04logistics)
|
||||
|
||||
#### 3.5.1 功能描述
|
||||
物流大数据模块包含8套大屏模板:
|
||||
- **物流大数据平台**:物流综合数据展示
|
||||
- **物流大数据展示系统**:多页面物流数据展示(4个子页面)
|
||||
- **物流大数据服务平台**:物流服务数据监控
|
||||
- **智慧物流服务中心**:智慧物流运营数据
|
||||
- **物流云数据看板平台**:物流云数据可视化看板
|
||||
|
||||
#### 3.5.2 技术实现
|
||||
- 多页面路由切换展示不同维度数据
|
||||
- ECharts多种图表组合展示
|
||||
- 数据滚动展示组件
|
||||
|
||||
### 3.6 电子商务数据可视化模块(05Ecommerce)
|
||||
|
||||
#### 3.6.1 功能描述
|
||||
电商数据可视化模块包含4套大屏模板:
|
||||
- **电子商务公共服务平台大数据中心**:电商公共服务数据
|
||||
- **全国图书零售监测数据**:图书零售行业数据监测
|
||||
- **品牌销售数据**:品牌销售统计分析
|
||||
- **品牌门店销售数据**:门店销售数据展示
|
||||
|
||||
#### 3.6.2 技术实现
|
||||
- 多页面数据展示与切换
|
||||
- 销售数据分析图表
|
||||
- 数据排名和趋势展示
|
||||
|
||||
### 3.7 政务数据可视化模块(06government)
|
||||
|
||||
#### 3.7.1 功能描述
|
||||
政务可视化模块包含13套大屏模板,是模板数量最多的模块:
|
||||
- **政务大数据共享交换平台**:政务数据共享交换统计
|
||||
- **康定市公安数据可视化**:公安数据多维度展示(5个子页面)
|
||||
- **智慧社区内网比对平台**:社区数据比对分析
|
||||
- **办税渠道运行状态大数据监控平台**:办税渠道监控
|
||||
- **湖南土地交易数据可视化**:土地交易数据展示
|
||||
- **大连市突发预警实时监控**:突发预警实时监控
|
||||
- **公安综合监控大屏**:公安综合数据监控
|
||||
- **枫桥镇惠民服务平台**:惠民服务数据展示
|
||||
- **上海警务综合管理平台**:警务综合管理数据
|
||||
|
||||
#### 3.7.2 技术实现
|
||||
- 多页面路由实现复杂数据展示
|
||||
- 数据滚动轮播组件
|
||||
- 地图数据可视化
|
||||
- 实时监控数据更新
|
||||
|
||||
### 3.8 通用数据可视化模块(07universal)
|
||||
|
||||
#### 3.8.1 功能描述
|
||||
通用可视化模块包含8套通用数据可视化模板,适用于多种行业场景的数据展示需求。
|
||||
|
||||
#### 3.8.2 技术实现
|
||||
- 标准化布局设计
|
||||
- 可复用的图表组件
|
||||
- 灵活的数据配置接口
|
||||
|
||||
### 3.9 大数据可视化模块(08bigData)
|
||||
|
||||
#### 3.9.1 功能描述
|
||||
大数据可视化模块包含5套大屏模板:
|
||||
- **大数据分析系统**:综合大数据分析展示
|
||||
- **公司大数据监控平台**:企业运营数据监控
|
||||
- **服务大数据可视化监管平台**:服务数据监管
|
||||
- **工程数据可视化**:工程数据展示
|
||||
- **无线网络大数据平台**:无线网络数据可视化
|
||||
|
||||
#### 3.9.2 技术实现
|
||||
- 粒子动画背景效果
|
||||
- 数字滚动展示组件
|
||||
- 标签云组件
|
||||
- Bootstrap样式兼容
|
||||
|
||||
### 3.10 其他行业可视化模块(09others)
|
||||
|
||||
#### 3.10.1 功能描述
|
||||
其他行业模块包含15套大屏模板,覆盖多种行业应用场景:
|
||||
- **水质情况实时监测预警系统**:水质数据实时监测
|
||||
- **南方草牧商品交易所**:商品交易数据展示
|
||||
- **酒机运行状态监控**:设备运行状态监控
|
||||
- **作战指挥室**:指挥调度数据展示
|
||||
- **设备环境监测平台**:设备环境数据监测
|
||||
- **压力容器监管大屏**:压力容器监管数据
|
||||
- **厅店营业效能分析**:营业效能数据分析
|
||||
- **气象监控**:气象数据实时监控
|
||||
- **传染病监控**:传染病数据多维度展示(3个子页面)
|
||||
- **消防监控**:消防数据实时监控
|
||||
- **智慧小区**:小区智能化数据展示
|
||||
- **物联网**:物联网设备数据展示
|
||||
- **集团大数据**:集团综合数据展示
|
||||
|
||||
#### 3.10.2 技术实现
|
||||
- 行业定制化图表组件
|
||||
- 实时数据监控机制
|
||||
- 多维度数据分析展示
|
||||
|
||||
### 3.11 页面布局模板模块(10layout)
|
||||
|
||||
#### 3.11.1 功能描述
|
||||
布局模板模块包含11套大屏布局骨架模板,提供标准化的页面布局结构,方便开发者快速搭建大屏页面:
|
||||
- 多种布局结构(三栏、四栏、网格等)
|
||||
- 可复用的面板组件
|
||||
- 统一的边框和装饰样式
|
||||
|
||||
#### 3.11.2 技术实现
|
||||
- CSS Grid和Flexbox布局
|
||||
- 模块化面板组件设计
|
||||
- 可扩展的布局结构
|
||||
|
||||
## 四、技术特点
|
||||
|
||||
### 4.1 高性能渲染
|
||||
- **路由懒加载**:所有页面组件按需加载,减少首屏加载时间
|
||||
- **代码分割**:Vite自动代码分割,按需加载
|
||||
- **组件复用**:通用组件设计,减少重复代码
|
||||
- **按需引入**:ECharts按需引入所需图表模块
|
||||
|
||||
### 4.2 响应式设计
|
||||
- **自适应布局**:基于Flexbox和Grid的响应式布局
|
||||
- **分辨率适配**:支持1920x1080、1366x768等多种分辨率
|
||||
- **设备检测**:自动检测移动端并提示
|
||||
|
||||
### 4.3 组件化开发
|
||||
- **高复用性**:组件设计遵循单一职责原则
|
||||
- **可配置性**:组件通过Props灵活配置
|
||||
- **类型安全**:TypeScript类型定义贯穿全项目
|
||||
|
||||
### 4.4 类型安全
|
||||
- **TypeScript**:全项目TypeScript类型覆盖
|
||||
- **接口定义**:统一的接口类型定义文件
|
||||
- **类型推断**:自动类型推断减少冗余代码
|
||||
|
||||
### 4.5 工程化规范
|
||||
- **Vite构建**:极速冷启动和热更新
|
||||
- **代码分割**:合理的模块划分
|
||||
- **环境配置**:开发/生产环境分离
|
||||
|
||||
## 五、使用说明
|
||||
|
||||
### 5.1 环境要求
|
||||
|
||||
#### 5.1.1 开发环境
|
||||
- **操作系统**:Windows 10/11、macOS、Linux
|
||||
- **Node.js**:v18或更高版本
|
||||
- **包管理器**:npm 9.x或更高版本
|
||||
- **浏览器**:Chrome 90+、Firefox 88+、Edge 90+
|
||||
|
||||
#### 5.1.2 运行环境
|
||||
- **操作系统**:Windows 7+、macOS 10.14+、Linux
|
||||
- **浏览器**:Chrome 90+、Firefox 88+、Edge 90+、Safari 14+
|
||||
- **分辨率**:推荐1920x1080及以上
|
||||
|
||||
### 5.2 安装部署
|
||||
|
||||
#### 5.2.1 开发环境搭建
|
||||
1. 安装Node.js(推荐v18+)
|
||||
2. 克隆项目代码
|
||||
3. 执行`npm install`安装依赖
|
||||
4. 执行`npm run dev`启动开发服务器
|
||||
5. 浏览器访问`http://localhost:5173`
|
||||
|
||||
#### 5.2.2 生产环境部署
|
||||
1. 执行`npm run build`构建项目
|
||||
2. 将`dist`目录部署到Web服务器
|
||||
3. 配置Nginx/Apache等Web服务器
|
||||
4. 配置域名和SSL证书(如需HTTPS)
|
||||
|
||||
### 5.3 使用指南
|
||||
|
||||
#### 5.3.1 模板选择
|
||||
访问首页`/`可查看所有模板的分类导航和缩略图预览,点击对应模板进入:
|
||||
- `/dashboard/01vehicles/01` ~ `/dashboard/01vehicles/08` - 车联网可视化
|
||||
- `/dashboard/02agriculture/01` ~ `/dashboard/02agriculture/02` - 智慧农业
|
||||
- `/dashboard/03traffic/01` ~ `/dashboard/03traffic/03` - 交通大数据
|
||||
- `/dashboard/04logistics/01` ~ `/dashboard/04logistics/05` - 物流大数据
|
||||
- `/dashboard/05Ecommerce/01` ~ `/dashboard/05Ecommerce/04` - 电子商务
|
||||
- `/dashboard/06government/01` ~ `/dashboard/06government/09` - 政务可视化
|
||||
- `/dashboard/07universal/01` ~ `/dashboard/07universal/08` - 通用模板
|
||||
- `/dashboard/08bigData/01` ~ `/dashboard/08bigData/05` - 大数据可视化
|
||||
- `/dashboard/09others/01` ~ `/dashboard/09others/13` - 其他行业
|
||||
- `/dashboard/10layout/01` ~ `/dashboard/10layout/11` - 布局模板
|
||||
|
||||
#### 5.3.2 数据配置
|
||||
各模板的数据可通过以下方式配置:
|
||||
- **静态数据**:修改对应目录下的TypeScript/JavaScript数据文件
|
||||
- **API接口**:替换为真实后端接口地址
|
||||
|
||||
### 5.4 自定义开发
|
||||
|
||||
#### 5.4.1 新增模板
|
||||
1. 在`src/dashboards`目录下创建新模板目录
|
||||
2. 编写Vue组件文件
|
||||
3. 在`src/router/index.ts`中添加路由配置
|
||||
4. 在`src/data/templates.ts`中添加模板信息
|
||||
5. 在首页导航中添加入口
|
||||
|
||||
#### 5.4.2 自定义组件
|
||||
1. 在对应模板目录下创建`components`文件夹
|
||||
2. 编写可复用的Vue组件
|
||||
3. 通过Props传递数据和配置
|
||||
4. 使用TypeScript确保类型安全
|
||||
|
||||
## 六、技术参数
|
||||
|
||||
### 6.1 编程语言
|
||||
- HTML5
|
||||
- CSS3
|
||||
- TypeScript
|
||||
- JavaScript
|
||||
|
||||
### 6.2 代码规模
|
||||
- 总源代码行数:约175,875行
|
||||
- Vue组件文件:93个
|
||||
- TypeScript/JavaScript文件:120个
|
||||
- CSS文件:112个
|
||||
- 源代码文件总数:325个
|
||||
|
||||
### 6.3 依赖库
|
||||
- Vue 3.5.13
|
||||
- Vue Router 4.6.4
|
||||
- ECharts 4.9.0
|
||||
- echarts-liquidfill 2.0.6
|
||||
- jQuery 3.7.1
|
||||
- TypeScript 5.7.2
|
||||
- Vite 5.4.11
|
||||
- vue-tsc 2.2.0
|
||||
|
||||
### 6.4 性能指标
|
||||
- **首屏加载时间**:< 3秒(生产环境)
|
||||
- **图表渲染时间**:< 500ms
|
||||
- **路由切换延迟**:< 200ms
|
||||
- **内存占用**:< 200MB(Chrome浏览器)
|
||||
- **兼容性**:支持ES6+的现代浏览器
|
||||
|
||||
## 七、界面展示
|
||||
|
||||
### 7.1 首页导航
|
||||
首页采用深色背景主题,左侧固定分类导航栏,主区域以卡片网格形式展示所有大屏模板的缩略图预览,用户可以快速浏览和选择需要的模板。
|
||||
|
||||
### 7.2 大屏展示效果
|
||||
各模板均采用深色背景主题,搭配高对比度的数据展示色彩,确保在展示大屏上有良好的视觉效果。
|
||||
|
||||
#### 7.2.1 色彩方案
|
||||
- **主色调**:深蓝(#0f1c30)
|
||||
- **强调色**:亮蓝(#00d4ff)
|
||||
- **警告色**:橙黄(#ffaa00)
|
||||
- **危险色**:红色(#ff4444)
|
||||
- **成功色**:绿色(#00cc66)
|
||||
|
||||
#### 7.2.2 布局特点
|
||||
- 采用网格化布局系统
|
||||
- 统一的边距和间距规范
|
||||
- 卡片式信息组织
|
||||
- 层次分明的信息架构
|
||||
|
||||
## 八、维护与升级
|
||||
|
||||
### 8.1 版本历史
|
||||
- **V1.0**(2026年):初始版本,包含10个大类共84套可视化大屏模板
|
||||
|
||||
### 8.2 已知问题
|
||||
- 部分模板在低配置设备上可能存在性能问题
|
||||
- 地图数据需要定期更新
|
||||
|
||||
### 8.3 后续计划
|
||||
- 增加更多行业模板
|
||||
- 支持数据源配置化
|
||||
- 增加图表配置导出功能
|
||||
- 支持主题定制
|
||||
|
||||
## 九、版权声明
|
||||
|
||||
本软件著作权归著作权人所有。
|
||||
|
||||
软件全称:数据可视化大屏展示系统V1.0
|
||||
版本号:V1.0
|
||||
开发完成日期:2026年07月27日
|
||||
|
||||
未经著作权人书面许可,任何单位或个人不得以任何方式复制、修改、传播本软件的全部或部分内容。
|
||||
|
||||
## 十、技术支持
|
||||
|
||||
### 10.1 联系方式
|
||||
- 著作权人:[请填写著作权人姓名]
|
||||
- 邮箱:[请填写联系邮箱]
|
||||
- 电话:[请填写联系电话]
|
||||
|
||||
### 10.2 文档更新
|
||||
本文档版本:V1.0
|
||||
最后更新日期:2026年07月
|
||||
|
||||
---
|
||||
|
||||
**本文档版权归著作权人所有**
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,270 @@
|
||||
# 软件著作权申请表填写指南
|
||||
|
||||
## 软件基本信息
|
||||
|
||||
### 软件全称
|
||||
**建议填写**:数据可视化大屏展示系统V1.0
|
||||
|
||||
> 说明:软件全称应包含软件名称和版本号,与材料中的名称保持一致。
|
||||
|
||||
### 软件简称
|
||||
**建议填写**:可视化大屏系统
|
||||
|
||||
> 说明:软件简称应简洁明了,便于日常称呼。
|
||||
|
||||
### 版本号
|
||||
**建议填写**:V1.0
|
||||
|
||||
> 说明:与软件全称中的版本号保持一致。
|
||||
|
||||
---
|
||||
|
||||
## 软件基本信息(续)
|
||||
|
||||
### 软件分类
|
||||
**建议选择**:应用软件
|
||||
|
||||
> 说明:本软件属于前端数据可视化应用软件,非系统软件或支撑软件。
|
||||
|
||||
### 软件说明
|
||||
**建议选择**:原创
|
||||
|
||||
> 说明:本软件为独立开发的原创作品,非修改或翻译作品。
|
||||
|
||||
### 开发方式
|
||||
**建议选择**:单独开发
|
||||
|
||||
> 说明:本软件由著作权人独立开发完成,无合作开发、委托开发或下达任务开发的情况。
|
||||
|
||||
### 开发完成日期
|
||||
**建议填写**:2026年07月27日
|
||||
|
||||
> 说明:填写软件实际开发完成的日期,需要与后续材料中的开发完成日期保持一致。
|
||||
|
||||
### 发表状态
|
||||
**建议选择**:未发表
|
||||
|
||||
> 说明:本软件尚未公开发表,仅用于个人学习和展示。
|
||||
|
||||
---
|
||||
|
||||
## 著作权人信息
|
||||
|
||||
### 著作权人
|
||||
|
||||
**国家/地区**:中国
|
||||
|
||||
**省份/城市**:[请填写所在省份 / 城市]
|
||||
|
||||
**身份类别**:自然人
|
||||
|
||||
**姓名**:[请填写著作权人姓名]
|
||||
|
||||
**证件类型**:居民身份证
|
||||
|
||||
**证件号码**:[请填写身份证号码]
|
||||
|
||||
> 说明:以上信息根据著作权人实际情况填写。
|
||||
|
||||
---
|
||||
|
||||
## 软硬件环境
|
||||
|
||||
### 开发的硬件环境
|
||||
**建议填写**:Intel Core i5/i7 处理器,8GB 内存,256GB SSD 硬盘,集成显卡
|
||||
|
||||
> 说明:填写开发时使用的计算机硬件配置。本软件为前端项目,对硬件要求不高,普通的开发电脑即可。
|
||||
|
||||
### 运行的硬件环境
|
||||
**建议填写**:Intel Core i3 及以上处理器,4GB 内存,128GB 硬盘,支持 WebGL 的显卡(3D图表需要)
|
||||
|
||||
> 说明:填写软件运行所需的最低硬件配置。本软件为Web应用,主要依赖浏览器运行。
|
||||
|
||||
### 开发该软件的操作系统
|
||||
**建议填写**:Windows 10 / Windows 11 / macOS
|
||||
|
||||
> 说明:填写开发时使用的操作系统。
|
||||
|
||||
---
|
||||
|
||||
## 开发环境与运行平台
|
||||
|
||||
### 软件开发环境 / 开发工具
|
||||
**建议填写**:
|
||||
- Visual Studio Code(代码编辑器)
|
||||
- Node.js v18+(JavaScript 运行时环境)
|
||||
- Vite 5.4(前端构建工具)
|
||||
- Chrome / Edge(调试浏览器)
|
||||
|
||||
> 说明:填写开发时使用的主要工具和环境。注意字数限制(50字以内)。
|
||||
|
||||
### 该软件的运行平台 / 操作系统
|
||||
**建议填写**:Windows 7+ / macOS 10.14+ / Linux(浏览器环境)
|
||||
|
||||
> 说明:本软件为Web应用,可在任何支持现代浏览器的操作系统上运行。
|
||||
|
||||
### 软件运行支撑环境 / 支持软件
|
||||
**建议填写**:Chrome 90+ / Firefox 88+ / Edge 90+ / Safari 14+
|
||||
|
||||
> 说明:填写运行本软件所需的浏览器环境。注意字数限制(50字以内)。
|
||||
|
||||
---
|
||||
|
||||
## 编程语言与代码量
|
||||
|
||||
### 编程语言
|
||||
**建议选择**:HTML + 其他编程语言
|
||||
|
||||
**其他编程语言**:TypeScript、JavaScript、CSS
|
||||
|
||||
> 说明:本软件主要使用 Vue 3 + TypeScript 开发,同时包含 HTML、CSS 等前端技术。
|
||||
|
||||
### 源程序量
|
||||
**建议填写**:175875
|
||||
|
||||
> 说明:本软件源代码总行数约为 175,875 行(含注释和空行)。
|
||||
|
||||
---
|
||||
|
||||
## 软件描述信息
|
||||
|
||||
### 开发目的
|
||||
**建议填写**:
|
||||
提供多行业大数据可视化大屏解决方案,覆盖车联网、农业、交通、物流、电商、政务等领域,支持多种图表类型和响应式布局。
|
||||
|
||||
> 说明:简要描述开发本软件的目的和意图。注意字数限制(50字以内),可精简为:
|
||||
> **精简版**:提供多行业大数据可视化大屏方案,支持多种图表和响应式布局。
|
||||
|
||||
### 面向领域 / 行业
|
||||
**建议填写**:大数据 / 信息技术
|
||||
|
||||
> 说明:本软件属于大数据可视化领域的信息技术类软件。
|
||||
|
||||
### 软件的主要功能
|
||||
**建议填写**:
|
||||
本软件是一款基于 Vue 3 + TypeScript + Vite 的前端数据可视化大屏展示系统,包含10个大类共84套完整的数据可视化大屏模板,覆盖车联网、智慧农业、交通大数据、物流大数据、电子商务、政务数据、通用可视化、大数据分析、其他行业和布局模板等多种应用场景。主要功能包括:
|
||||
(1)车联网可视化:北斗车联网大数据服务平台、重点营运车辆监控与预警、省级联网联控、新能源车联网综合大数据平台等8套大屏
|
||||
(2)智慧农业:茶园可视化监控等2套大屏
|
||||
(3)交通大数据可视化:高速管控大数据平台、交通运输局数据、北斗自由流收费管理等3套大屏
|
||||
(4)物流大数据可视化:物流大数据平台、智慧物流服务中心、物流云数据看板等8套大屏
|
||||
(5)电子商务数据可视化:电子商务公共服务平台、品牌销售数据、图书零售监测等4套大屏
|
||||
(6)政务数据可视化:政务大数据共享交换平台、公安数据可视化、办税渠道监控、突发预警实时监控等13套大屏
|
||||
(7)通用数据可视化:8套通用数据可视化模板
|
||||
(8)大数据可视化:大数据分析系统、公司大数据监控平台、工程数据可视化等5套大屏
|
||||
(9)其他行业:水质监测预警、作战指挥室、气象监控、传染病监控、消防监控、物联网等15套大屏
|
||||
(10)页面布局模板:11套大屏布局骨架模板
|
||||
|
||||
> 说明:详细描述软件的主要功能和应用场景。字数要求:500-1300字。
|
||||
|
||||
---
|
||||
|
||||
### 软件的技术特点
|
||||
**建议选择**:大数据软件
|
||||
|
||||
**其他技术特点**:
|
||||
基于 Vue 3.5 Composition API 和 TypeScript 5.7 构建,采用组件化架构设计;集成 ECharts 4.x 及 echarts-liquidfill 扩展插件,支持多种2D/3D图表;使用 Vite 5.4 构建工具,支持路由懒加载和代码分割;采用响应式布局设计,支持大屏自适应;代码量约 175,875 行,包含 93 个 Vue 组件和 120 个 TypeScript/JavaScript 文件。
|
||||
|
||||
> 说明:字数限制100字以内。可精简为:
|
||||
> **精简版**:基于Vue3+TS构建,集成ECharts及扩展插件,支持多种2D/3D图表、响应式布局、路由懒加载。
|
||||
|
||||
---
|
||||
|
||||
## 鉴别材料
|
||||
|
||||
### 程序鉴别材料
|
||||
**建议选择**:一般交存
|
||||
|
||||
**提交内容**:源程序前连续的30页和后连续的30页
|
||||
|
||||
> 说明:一般交存方式适用于源代码页数超过60页的情况。已生成的程序鉴别材料PDF文件为:
|
||||
> `程序鉴别材料_源代码.pdf`
|
||||
|
||||
### 文档鉴别材料
|
||||
**建议选择**:一般交存
|
||||
|
||||
**提交内容**:提交任何一种文档的前连续的30页和后连续的30页
|
||||
|
||||
> 说明:文档可以选择软件说明书、设计文档或使用手册。已生成的文档鉴别材料PDF文件为:
|
||||
> `文档鉴别材料_软件说明书.pdf`
|
||||
|
||||
---
|
||||
|
||||
## 其他相关证明文件
|
||||
|
||||
本项为非必填项。如有以下情况可上传相关证明文件:
|
||||
- 合作开发协议(如为合作开发)
|
||||
- 委托开发协议(如为委托开发)
|
||||
- 任务书(如为下达任务开发)
|
||||
- 其他权属证明文件
|
||||
|
||||
> 说明:本软件为单独开发的原创作品,无需额外证明文件。
|
||||
|
||||
---
|
||||
|
||||
## 材料清单
|
||||
|
||||
已准备的软著申请材料清单:
|
||||
|
||||
| 序号 | 材料名称 | 文件路径 | 说明 |
|
||||
|------|---------|---------|------|
|
||||
| 1 | 程序鉴别材料PDF | `soft_copy_right/程序鉴别材料_源代码.pdf` | 源程序前30页+后30页 |
|
||||
| 2 | 文档鉴别材料PDF | `soft_copy_right/文档鉴别材料_软件说明书.pdf` | 软件说明书前30页+后30页 |
|
||||
| 3 | 软件说明书完整版 | `soft_copy_right/软件说明书_完整版.md` | 完整的软件说明书Markdown文档 |
|
||||
| 4 | 申请表填写指南 | `soft_copy_right/软著申请表填写指南.md` | 本文件 |
|
||||
|
||||
---
|
||||
|
||||
## 提交注意事项
|
||||
|
||||
1. **所有材料中的软件名称、版本号、开发完成日期、著作权人信息必须保持一致**
|
||||
2. **程序鉴别材料PDF和文档鉴别材料PDF通过运行Python脚本生成**
|
||||
3. **申请表中带有红色星号(*)的字段为必填项,请务必准确填写**
|
||||
4. **开发完成日期一旦确定,后续材料中的日期需保持一致**
|
||||
5. **如果软件有多个著作权人,需要所有著作权人共同申请或提供权属证明**
|
||||
6. **建议提前准备好身份证正反面扫描件(电子版),申请时可能需要上传**
|
||||
7. **线上申请通过后,可能需要邮寄纸质材料,请保留好PDF原件**
|
||||
|
||||
---
|
||||
|
||||
## PDF材料生成方法
|
||||
|
||||
### 环境准备
|
||||
|
||||
1. 安装 Python 3.8+
|
||||
2. 安装依赖库:
|
||||
```bash
|
||||
pip install reportlab
|
||||
```
|
||||
3. 确认系统中文字体可用(运行 `python test_font.py` 检查)
|
||||
|
||||
### 生成程序鉴别材料PDF
|
||||
|
||||
```bash
|
||||
cd soft_copy_right
|
||||
python generate_source_code_pdf.py
|
||||
```
|
||||
|
||||
### 生成文档鉴别材料PDF
|
||||
|
||||
```bash
|
||||
cd soft_copy_right
|
||||
python generate_document_pdf.py
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 申请流程参考
|
||||
|
||||
1. 登录中国版权保护中心官网(https://www.ccopyright.com.cn)
|
||||
2. 注册账号并完成实名认证
|
||||
3. 在线填写申请表(按本指南填写)
|
||||
4. 上传程序鉴别材料PDF和文档鉴别材料PDF
|
||||
5. 提交申请并缴费
|
||||
6. 等待审查(一般30个工作日左右)
|
||||
7. 审查通过后领取证书
|
||||
|
||||
---
|
||||
|
||||
**本指南仅供参考,具体填写请以中国版权保护中心官网要求为准。**
|
||||
|
||||
**如有疑问,建议咨询中国版权保护中心客服或专业代理机构。**
|
||||
Reference in New Issue
Block a user