no message

2026-07-26 14:07:47 +08:00
parent c3831a0568
commit fe5546aab2
5025 changed files with 180002 additions and 97654 deletions
@@ -0,0 +1,25 @@
+# 2026-07-25
+
+## visual-html 项目改造为 Vue3+TS+Vite
+
+- **项目性质**：可视化大屏模板集合导航页（66 个模板卡片、10 个分类），原为纯静态 HTML + jQuery + animate.css。
+- **备份**：原 `index.html` + `static/` 已移入 `bak/` 目录。
+- **新架构**：
+  - Vue 3.5 + TypeScript + Vite 5（`vue-tsc` 类型检查 + `vite build` 均通过）
+  - `src/data/templates.ts`：66 条卡片数据（从原 index.html 提取），类型见 `src/types.ts`
+  - 组件：`App.vue` + `components/NavBar.vue`（锚点导航）+ `CategorySection.vue` + `TemplateCard.vue`（hover 动画 rubberBand→shake 用 Vue class 绑定替代 jQuery）
+  - `src/utils/device.ts`：TS 重写 device.js 移动端检测；移动端访问隐藏导航并 alert
+  - 样式：reset.css / animate.css / main.css 拷至 `src/assets/styles/`，背景图在 `src/assets/images/`
+- **关键决策**：`resource/`（3000+ 文件的大屏模板库）整体移到 `public/resource/`，保证卡片链接 `./resource/html/...` 不变、构建后可直接部署。
+- **环境注意**：本机 `~/.npm` 缓存目录权限有问题，npm install 需加 `--cache /tmp/...` 绕过。
+- dev server: `npm run dev`（端口 5173），已验证首页/大屏子页/预览图/favicon 均 200。
+
+## resource 大屏全部改写为 Vue（进行中）
+
+- **用户决策**：monorepo 单仓多页；echarts 走 npm（装的是 **echarts@4.9.0 + @types/echarts@4.9.22**，兼容老模板 `itemStyle.normal` 语法，原项目内置 echarts 4.0.4）；jQuery 用 Vue 重写；66 个页面一次性全改。
+- **架构**：vue-router，`/dashboard/<分类>/<编号>` 路由；每个大屏在 `src/dashboards/<分类>/<编号>/` 下自包含（index.vue + assets/ + components/），方便整目录拷贝。样式用 scoped，body 选择器改写到根类 `.dash-root`。
+- **通用模式**：`initChart(id, option)` 收集实例 + onUnmounted dispose；window resize 统一 onResize；滚动列表用响应式数组 rotate + transition；rollNum 插件重写为 `RollNum.vue`（CSS transition + tops 数组驱动，02/04 是 40px 变体）；高德地图用动态 script 注入（key 保留原样）；`china.js` 转 ESM：perl 剥 UMD 壳 → `assets/china.ts`（@ts-nocheck）；高德点位 china.js → `assets/points.ts`（2.1MB，sed 改 export）。
+- **已完成**：01vehicles 全部 8 页（01 数字滚动+8图、02 高德聚合+预警滚动、03 中国地图流向+仪表盘、04 高德+进度条、05 Bootstrap 布局+地图、06/08 新能源孪生页、07 3D 相册 Carousel3D+文字滚动）。tsc 全过。
+- **进度更新（第二次会话）**：02agriculture(2)、03traffic(3)、04logistics(8 全)、05Ecommerce(4 全) 已完成。05Ecommerce/02 五屏用 jQuery 保真提取（mapIndex/mapSecond/mapTest.ts + initMap 返回清理函数包装 window.setInterval/setTimeout）；home.vue 用 iframe 指向子路由轮播。main.css 首页全局样式已限定 `.home-page` 前缀防污染。新增依赖：jquery+@types/jquery、echarts-liquidfill@2.0.6（echarts4 兼容）。
+- **踩坑记录**：UMD 剥壳后地图文件顶层 `return;` 需清除（13 个文件已修）；原 HTML 常见畸形标签（多余 `</ul>`/缺 `</div>`）会破坏 Vue 编译，用脚本统计 div 平衡修复；css 中游离 `*/`、缺失字体文件引用、`max-width: : 100%` 这类原站容错写法会被 vite/postcss 拒绝，需清理。
+- **待做**：06government(13，已完成 01+02 共 6 路由)、07universal(8)、08bigData(5)、09others(15)、10layout(11)；templates.ts 卡片链接改路由；预览图迁移；删 public/resource；全量 build。
@@ -0,0 +1,24 @@
+# 2026-07-26 工作日志
+
+## Vue3+TS+Vite 改造 — 全部完成 ✅
+
+### 今日完成
+- 06government 04-09 全部重做（前一版会话产物在 /tmp 已丢失；05 用 vendored Highcharts `assets/highcharts.js`+`hunanMap.js`，07 用高德地图动态加载，08 用 iframe 嵌 fqMap.svg + `.contents()` 访问 svg）
+- 07universal 01-08（comon0 系列模板、设备监控模板、粉色 ECharts 模板、联心菜市场、山东地图模板）
+- 08bigData 01-05（01 用 vendored echarts 2.x `echarts-all.js` 全局 echarts + bootstrap-table 插件 vendor；04 工程模板；05 浙江地图）
+- 09others 01-13 共 15 路由（02 Vue2 模板转直出 DOM；04 echarts-wordcloud vendor；08 echarts-gl 3D 地球需 `glob.ts` 先注入 `window.echarts` 再动态/顺序 import gl；09 百度地图 ak 动态加载 + bmap.min.js；12 工业物联网含 Vue2 数据绑定，提取 `scnData.ts` 注入 setup）
+- 10layout 01-11 纯布局骨架批量生成
+- 收尾：`templates.ts` 77 个卡片链接全部改为 `/dashboard/...` 路由；预览图迁移至 `public/previews/<cat>/`；删除 `public/resource/` 原始代码目录；链接-路由交叉校验 77/77 通过；`vue-tsc` 0 错误；`vite build` 通过（dist 91MB）
+
+### 最终规模
+- 85 条路由，66 个大屏模板 + 子页面，全部 self-contained 于 `src/dashboards/<cat>/<id>/`
+- 依赖：echarts@4.9 + @types/echarts、jquery+@types/jquery、echarts-liquidfill@2.0.6、vue-router@4
+
+### 修复模式备忘（复用价值高）
+- UMD 剥壳 `perl -0777` 两种头：`function (exports, echarts) {` 带空格与不带空格变体都要处理，尾 `}));` 与 `});` 变体；剥后必查顶层 `return;` 守卫
+- 批量提取脚本统一包装：`initPage(): () => void` 返回清理函数，hook window.setInterval/setTimeout/addEventListener 收集定时器与监听
+- 通用 echarts 清理：`document.querySelectorAll('div[_echarts_instance_]')` + `echarts.getInstanceByDom().dispose()`
+- 原站容错但构建器拒绝的写法：css 嵌套规则、游离 `*/`、`[;...;]` IE hack、`max-width: : 100%`、keyframes 名加引号、`url(./images/line\(1\).png)` 转义括号、模板里 `</a>`/`</ul>` 多余闭合、缺 `</div>`
+- body 提取常见残留：`<script>` 片段、`</head>`、`<body>`、内联 `<style>`（迁移到组件 scoped style）
+- 数据文件 js 需补 `;` 结尾；UMD 数据数组注意开头 `[` 被 sed 行号截掉的问题
+- 首页预览图路径修复：`templates.ts` 中所有 `image` 路径去掉多余的 `/images/` 段，从 `/previews/<cat>/images/xx.png` 改为 `/previews/<cat>/xx.png`，与 `public/previews/` 实际目录结构一致。
@@ -1,3 +1,14 @@
+# Dependencies
+node_modules/
+
+# Vite build output
+dist/
+dist-ssr/
+*.local
+
+# Editor
+.DS_Store
+
 # Build and Release Folders
 bin-debug/
 bin-release/
@@ -0,0 +1,405 @@
+<!--
+ * @Author: chenxuan
+ * @Date: 2021-09-23 09:04:52
+ * @LastEditTime: 2023-10-18 15:56:22
+ * @LastEditors: chenxuan
+-->
+<!DOCTYPE html>
+<html>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1" />
+<title>Chenxuan-可视化大屏HTML</title>
+<meta name="keywords" content="Chenxuan可视化大屏">
+<meta name="description" content="基于html、echarts、jquery的可视化大屏看板">
+<link rel="icon" href="./static/images/favicon.ico" type="image/x-icon">
+<link rel="stylesheet" type="text/css" href="./static/css/reset.css"/>
+<link rel="stylesheet" type="text/css" href="./static/css/animate.css"/>
+<link rel="stylesheet" type="text/css" href="./static/css/main.css"/>
+</head>
+<body>
+    <ul class="nav">
+        <a href="#1F">01车联网可视化(8)</a>
+        <a href="#2F">02智慧农业(2)</a>
+        <a href="#3F">03交通大数据可视化(3)</a>
+        <a href="#4F">04物流大数据可视化(8)</a>
+        <a href="#5F">05电子商务数据可视化(4)</a>
+        <a href="#6F">06政务可视化(13)</a>
+        <a href="#7F">07通用数据可视化(8)</a>
+        <a href="#8F">08大数据可视化(5)</a>
+        <a href="#9F">09其他(15)</a>
+        <a href="#10F">10页面布局模板(11)</a>
+    </ul>
+    <!-- <a href="https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-21753976784.2.1db83e6cW5gpAh&id=654294629905" target="_blank" title="数据可视化模板源码" class="giveMoney"></a> -->
+    <div class="main zoomIn a-time2">
+        <div class="unitContainer">
+            <h1 id="1F">01车联网可视化</h1>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/01vehicles/01/index.html' target="_blank">
+                <p>北斗车联网大数据服务平台</p>
+                <img class="zt-img" src="./resource/html/01vehicles/images/01.png" alt="北斗车联网大数据服务平台">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/01vehicles/02/index.html' target="_blank">
+                <p>重点营运车辆监控与预警</p>
+                <img class="zt-img" src="./resource/html/01vehicles/images/02.png" alt="重点营运车辆监控与预警">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/01vehicles/03/index.html' target="_blank">
+                <p>省级联网联控大数据服务平台</p>
+                <img class="zt-img" src="./resource/html/01vehicles/images/03.png" alt="省级联网联控大数据服务平台">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/01vehicles/04/index.html' target="_blank">
+                <p>中山北斗公共运行平台</p>
+                <img class="zt-img" src="./resource/html/01vehicles/images/04.png" alt="中山北斗公共运行平台">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/01vehicles/05/index.html' target="_blank">
+                <p>北斗车联网大数据服务平台</p>
+                <img class="zt-img" src="./resource/html/01vehicles/images/05.png" alt="北斗车联网大数据服务平台">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/01vehicles/06/index.html' target="_blank">
+                <p>新能源车联网综合大数据平台</p>
+                <img class="zt-img" src="./resource/html/01vehicles/images/06.png" alt="新能源车联网综合大数据平台">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/01vehicles/07/index.html' target="_blank">
+                <p>车辆综合管理平台</p>
+                <img class="zt-img" src="./resource/html/01vehicles/images/07.png" alt="车辆综合管理平台">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/01vehicles/08/index.html' target="_blank">
+                <p>新能源车联网综合大数据平台</p>
+                <img class="zt-img" src="./resource/html/01vehicles/images/08.png" alt="车辆综合管理平台">
+            </a>
+        </div>
+         <!-- ------------------------------------------------------------------------------------------------------- -->
+        <div class="unitContainer">
+            <h1 id="2F">02智慧农业</h1>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/02agriculture/01/index.html' target="_blank">
+                <p>某茶园可视化监控1</p>
+                <img class="zt-img" src="./resource/html/02agriculture/images/01.png" alt="某茶园可视化监控1">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/02agriculture/02/index.html' target="_blank">
+                <p>某茶园可视化监控2</p>
+                <img class="zt-img" src="./resource/html/02agriculture/images/02.png" alt="某茶园可视化监控2">
+            </a>
+        </div>
+        <!-- ------------------------------------------------------------------------------------------------------- -->
+        <div class="unitContainer">
+            <h1 id="3F">03交通大数据可视化</h1>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/03traffic/01/index.html' target="_blank">
+                <p>晋城高速管控大数据平台</p>
+                <img class="zt-img" src="./resource/html/03traffic/images/01.png" alt="晋城高速管控大数据平台">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/03traffic/02/index.html' target="_blank">
+                <p >某生产建设兵团交通运输局</p>
+                <img class="zt-img" src="./resource/html/03traffic/images/02.png" alt="某生产建设兵团交通运输局">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/03traffic/03/index.html' target="_blank">
+                <p >北斗自由流收费管理平台</p>
+                <img class="zt-img" src="./resource/html/03traffic/images/03.png" alt="北斗自由流收费管理平台">
+            </a>
+        </div>
+        <!-- ------------------------------------------------------------------------------------------------------- -->
+        <div class="unitContainer">
+            <h1 id="4F">04物流大数据可视化</h1> 
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/04logistics/01/index.html' target="_blank">
+                <p>物流大数据平台</p>
+                <img class="zt-img" src="./resource/html/04logistics/images/01.png" alt="物流大数据平台">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/04logistics/02/survey.html' target="_blank">
+                <p>物流大数据展示系统1</p>
+                <img class="zt-img" src="./resource/html/04logistics/images/02-1.png" alt="物流大数据展示系统">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/04logistics/02/bigdata.html' target="_blank">
+                <p>物流大数据展示系统2</p>
+                <img class="zt-img" src="./resource/html/04logistics/images/02-2.png" alt="物流大数据展示系统">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/04logistics/02/index2.html' target="_blank">
+                <p>物流大数据展示系统3</p>
+                <img class="zt-img" src="./resource/html/04logistics/images/02-3.png" alt="物流大数据展示系统">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/04logistics/02/index3.html' target="_blank">
+                <p>物流大数据展示系统4</p>
+                <img class="zt-img" src="./resource/html/04logistics/images/02-4.png" alt="物流大数据展示系统">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/04logistics/03/index.html' target="_blank">
+                <p>物流大数据服务平台</p>
+                <img class="zt-img" src="./resource/html/04logistics/images/03.png" alt="物流大数据服务平台">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/04logistics/04/index.html' target="_blank">
+                <p>智慧物流服务中心</p>
+                <img class="zt-img" src="./resource/html/04logistics/images/04.png" alt="智慧物流服务中心">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/04logistics/05/index.html' target="_blank">
+                <p>物流云数据看板平台</p>
+                <img class="zt-img" src="./resource/html/04logistics/images/05.png" alt="物流云数据看板平台">
+            </a>
+        </div>
+        <!-- ------------------------------------------------------------------------------------------------------- -->
+        <div class="unitContainer">
+            <h1 id="5F">05电子商务数据可视化</h1>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/05Ecommerce/01/index.html' target="_blank">
+                <p>广西电子商务公共服务平台大数据中心</p>
+                <img class="zt-img" src="./resource/html/05Ecommerce/images/01.png" alt="广西电子商务公共服务平台大数据中心">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/05Ecommerce/02/index.html' target="_blank">
+                <p>全国图书零售监测数据</p>
+                <img class="zt-img" src="./resource/html/05Ecommerce/images/02.png" alt="全国图书零售监测数据">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/05Ecommerce/03/index.html' target="_blank">
+                <p>某品牌销售数据</p>
+                <img class="zt-img" src="./resource/html/05Ecommerce/images/03.png" alt="某品牌销售数据">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/05Ecommerce/04/index.html' target="_blank">
+                <p>某品牌门店销售数据</p>
+                <img class="zt-img" src="./resource/html/05Ecommerce/images/04.png" alt="某品牌门店销售数据">
+            </a>
+        </div>
+        <!-- ------------------------------------------------------------------------------------------------------- -->
+        <div class="unitContainer">
+            <h1 id="6F">06政务可视化</h1>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/06government/01/index.html' target="_blank">
+                <p>政务大数据共享交换平台</p>
+                <img class="zt-img" src="./resource/html/06government/images/01.png" alt="政务大数据共享交换平台">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/06government/02/activity.html' target="_blank">
+                <p>康定市公安数据可视化1</p>
+                <img class="zt-img" src="./resource/html/06government/images/02-1.png" alt="康定市公安数据可视化">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/06government/02/people.html' target="_blank">
+                <p>康定市公安数据可视化2</p>
+                <img class="zt-img" src="./resource/html/06government/images/02-2.png" alt="康定市公安数据可视化">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/06government/02/analysis.html' target="_blank">
+                <p>康定市公安数据可视化3</p>
+                <img class="zt-img" src="./resource/html/06government/images/02-3.png" alt="康定市公安数据可视化">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/06government/02/activity.html' target="_blank">
+                <p>康定市公安数据可视化4</p>
+                <img class="zt-img" src="./resource/html/06government/images/02-4.png" alt="康定市公安数据可视化">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/06government/02/traffic.html' target="_blank">
+                <p>康定市公安数据可视化5</p>
+                <img class="zt-img" src="./resource/html/06government/images/02-5.png" alt="康定市公安数据可视化">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/06government/03/index.html' target="_blank">
+                <p>智慧社区内网比对平台</p>
+                <img class="zt-img" src="./resource/html/06government/images/03.png" alt="某品智慧社区内网比对平台牌门店销售数据">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/06government/04/index.html' target="_blank">
+                <p>某办税渠道运行状态大数据监控平台</p>
+                <img class="zt-img" src="./resource/html/06government/images/04.png" alt="某办税渠道运行状态大数据监控平台">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/06government/05/index.html' target="_blank">
+                <p>湖南土地交易数据可视化</p>
+                <img class="zt-img" src="./resource/html/06government/images/05.png" alt="湖南土地交易数据可视化">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/06government/06/index.html' target="_blank">
+                <p>大连市突发预警实时监控</p>
+                <img class="zt-img" src="./resource/html/06government/images/06.png" alt="大连市突发预警实时监控">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/06government/07/index.html' target="_blank">
+                <p>公安综合监控大屏</p>
+                <img class="zt-img" src="./resource/html/06government/images/07.png" alt="公安综合监控大屏">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/06government/08/index.html' target="_blank">
+                <p>枫桥镇惠民服务平台</p>
+                <img class="zt-img" src="./resource/html/06government/images/08.png" alt="枫桥镇惠民服务平台">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/06government/09/index.html' target="_blank">
+                <p>上海警务综合管理平台</p>
+                <img class="zt-img" src="./resource/html/06government/images/09.png" alt="上海警务综合管理平台">
+            </a>
+        </div>
+        <!-- ------------------------------------------------------------------------------------------------------- -->
+        <div class="unitContainer">
+            <h1 id="7F">07通用数据可视化</h1>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/07universal/01/index.html' target="_blank">
+                <p>模板1</p>
+                <img class="zt-img" src="./resource/html/07universal/images/01.png" alt="模板">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/07universal/02/index.html' target="_blank">
+                <p>模板2</p>
+                <img class="zt-img" src="./resource/html/07universal/images/02.png" alt="模板">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/07universal/03/index.html' target="_blank">
+                <p>模板3</p>
+                <img class="zt-img" src="./resource/html/07universal/images/03.png" alt="模板">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/07universal/04/index.html' target="_blank">
+                <p>模板4</p>
+                <img class="zt-img" src="./resource/html/07universal/images/04.png" alt="模板">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/07universal/05/index.html' target="_blank">
+                <p>模板5</p>
+                <img class="zt-img" src="./resource/html/07universal/images/05.png" alt="模板">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/07universal/06/index.html' target="_blank">
+                <p>模板6</p>
+                <img class="zt-img" src="./resource/html/07universal/images/06.png" alt="模板">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/07universal/07/index.html' target="_blank">
+                <p>模板7</p>
+                <img class="zt-img" src="./resource/html/07universal/images/07.png" alt="模板7">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/07universal/08/index.html' target="_blank">
+                <p>模板8</p>
+                <img class="zt-img" src="./resource/html/07universal/images/08.png" alt="模板8">
+            </a>
+        </div>
+         <!-- ------------------------------------------------------------------------------------------------------- -->
+        <div class="unitContainer">
+            <h1 id="8F">08大数据可视化</h1>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/08bigData/01/index.html' target="_blank">
+                <p>大数据分析系统</p>
+                <img class="zt-img" src="./resource/html/08bigData/images/01.png" alt="大数据分析系统">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/08bigData/02/index.html' target="_blank">
+                <p>某公司大数据监控平台</p>
+                <img class="zt-img" src="./resource/html/08bigData/images/02.png" alt="某公司大数据监控平台">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/08bigData/03/index.html' target="_blank">
+                <p>某服务大数据可视化监管平台</p>
+                <img class="zt-img" src="./resource/html/08bigData/images/03.png" alt="某服务大数据可视化监管平台">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/08bigData/04/index.html' target="_blank">
+                <p>工程数据可视化</p>
+                <img class="zt-img" src="./resource/html/08bigData/images/04.png" alt="工程数据可视化">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/08bigData/05/index.html' target="_blank">
+                <p>无线网络大数据平台</p>
+                <img class="zt-img" src="./resource/html/08bigData/images/05.png" alt="无线网络大数据平台">
+            </a>
+        </div>
+        <!-- ------------------------------------------------------------------------------------------------------- -->
+    
+        <div class="unitContainer">
+            <h1 id="9F">09其他</h1>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/09others/01/index.html' target="_blank">
+                <p>水质情况实时监测预警系统</p>
+                <img class="zt-img" src="./resource/html/09others/images/01.png" alt="水质情况实时监测预警系统">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/09others/02/index.html' target="_blank">
+                <p>南方草牧商品交易所</p>
+                <img class="zt-img" src="./resource/html/09others/images/02.png" alt="南方草牧商品交易所">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/09others/03/index.html' target="_blank">
+                <p>酒机运行状态监控</p>
+                <img class="zt-img" src="./resource/html/09others/images/03.png" alt="酒机运行状态监控">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/09others/04/index.html' target="_blank">
+                <p>作战指挥室</p>
+                <img class="zt-img" src="./resource/html/09others/images/04.png" alt="作战指挥室">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/09others/05/index.html' target="_blank">
+                <p>设备环境监测平台</p>
+                <img class="zt-img" src="./resource/html/09others/images/05.png" alt="设备环境监测平台">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/09others/06/index.html' target="_blank">
+                <p>压力容器监管大屏</p>
+                <img class="zt-img" src="./resource/html/09others/images/06.png" alt="压力容器监管大屏">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/09others/07/index.html' target="_blank">
+                <p>厅店营业效能分析</p>
+                <img class="zt-img" src="./resource/html/09others/images/07.png" alt="厅店营业效能分析">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/09others/08/index.html' target="_blank">
+                <p>气象监控</p>
+                <img class="zt-img" src="./resource/html/09others/images/08.png" alt="气象监控">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/09others/09/views/trend.html' target="_blank">
+                <p>传染病监控1</p>
+                <img class="zt-img" src="./resource/html/09others/images/09-1.png" alt="传染病监控">
+            </a> 
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/09others/09/views/quota.html' target="_blank">
+                <p>传染病监控2</p>
+                <img class="zt-img" src="./resource/html/09others/images/09-2.png" alt="传染病监控">
+            </a> 
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/09others/09/views/index.html' target="_blank">
+                <p>传染病监控3</p>
+                <img class="zt-img" src="./resource/html/09others/images/09-3.png" alt="传染病监控">
+            </a> 
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/09others/10/index.html' target="_blank">
+                <p>消防监控</p>
+                <img class="zt-img" src="./resource/html/09others/images/10.png" alt="消防监控">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/09others/11/index.html' target="_blank">
+                <p>智慧小区</p>
+                <img class="zt-img" src="./resource/html/09others/images/11.png" alt="智慧小区">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/09others/12/index.html' target="_blank">
+                <p>物联网</p>
+                <img class="zt-img" src="./resource/html/09others/images/12.png" alt="物联网">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/09others/13/index.html' target="_blank">
+                <p>某集团大数据</p>
+                <img class="zt-img" src="./resource/html/09others/images/13.png" alt="某集团大数据">
+            </a>
+           
+        </div>
+
+        <div class="unitContainer">
+            <h1 id="10F">10页面布局模板</h1>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/10layout/01/index.html' target="_blank">
+                <p>模板1</p>
+                <img class="zt-img" src="./resource/html/10layout/images/01.png" alt="模板1">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/10layout/02/index.html' target="_blank">
+                <p>模板2</p>
+                <img class="zt-img" src="./resource/html/10layout/images/02.png" alt="模板2">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/10layout/03/index.html' target="_blank">
+                <p>模板3</p>
+                <img class="zt-img" src="./resource/html/10layout/images/03.png" alt="模板3">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/10layout/04/index.html' target="_blank">
+                <p>模板4</p>
+                <img class="zt-img" src="./resource/html/10layout/images/04.png" alt="模板4">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/10layout/05/index.html' target="_blank">
+                <p>模板5</p>
+                <img class="zt-img" src="./resource/html/10layout/images/05.png" alt="模板5">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/10layout/06/index.html' target="_blank">
+                <p>模板6</p>
+                <img class="zt-img" src="./resource/html/10layout/images/06.png" alt="模板6">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/10layout/07/index.html' target="_blank">
+                <p>模板7</p>
+                <img class="zt-img" src="./resource/html/10layout/images/07.png" alt="模板7">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/10layout/08/index.html' target="_blank">
+                <p>模板8</p>
+                <img class="zt-img" src="./resource/html/10layout/images/08.png" alt="模板8">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/10layout/09/views/trend.html' target="_blank">
+                <p>模板9</p>
+                <img class="zt-img" src="./resource/html/10layout/images/09.png" alt="模板9">
+            </a> 
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/10layout/10/index.html' target="_blank">
+                <p>模板10</p>
+                <img class="zt-img" src="./resource/html/10layout/images/10.png" alt="模板10">
+            </a>
+            <a class="zt-img-div rubberBand a-time2" href='./resource/html/10layout/11/index.html' target="_blank">
+                <p>模板11</p>
+                <img class="zt-img" src="./resource/html/10layout/images/11.png" alt="模板11">
+            </a>
+        </div>
+    </div>
+    <script src="./static/js/devide.js"></script>
+    <script src="./static/js/jquery-2.1.1.min.js"></script>
+    <script>
+        if(device.mobile() || device.tablet()){
+            $('.nav').css('display','none');
+            alert('亲，用电脑访问更帅哟!')
+        }
+        $('.zt-img-div').hover(function () {
+            $(this).removeClass('rubberBand')
+            $(this).addClass('shake')
+        }, function () {
+            $(this).removeClass('shake')
+        })
+
+        $('.zt-img-div').on('click', function () {
+            $(this).children('p').attr('href') ? window.open($(this).children('p').attr('href')) : ''
+        })
+    </script>
+    
+</body>
+
+</html>
--- a/Show More
+++ b/Show More