1618 lines
40 KiB
Markdown
1618 lines
40 KiB
Markdown
# Ciyon 数据大屏开发指南
|
||
|
||
## 技术架构
|
||
|
||
### 技术栈
|
||
- **前端框架**：ciybigscreen.js（自定义大屏面板框架）
|
||
- **数据可视化**：ECharts
|
||
- **3D地图**：Cesium
|
||
- **后端语言**：PHP（命名空间结构）
|
||
- **辅助库**：ciy.js（通用工具库）
|
||
|
||
### 目录结构
|
||
```
|
||
web/admin/demo/bs/
|
||
├── index.html # 大屏入口页面
|
||
├── index.php # 后端数据接口
|
||
└── b64/ # 图表组件JS文件
|
||
├── bank1_c1.js # 银行大屏-中心上部数字卡片
|
||
├── bank1_c2.js # 银行大屏-中心地图
|
||
├── bank1_l1.js # 银行大屏-左侧饼图
|
||
├── farm1_bg_cemap.js # 农场大屏-3D地图背景
|
||
└── ... # 其他组件
|
||
```
|
||
|
||
---
|
||
|
||
## 核心开发模式
|
||
|
||
### bigpanel 面板系统
|
||
|
||
**核心对象**：`ciyclass.bigpanel`
|
||
|
||
```javascript
|
||
// 创建面板
|
||
var chtpls = {};
|
||
chtpls['bank1'] = new ciyclass.bigpanel({
|
||
name: 'panel_bank1', // 面板唯一标识
|
||
jspath: './b64/', // 组件JS文件路径
|
||
style: 'position:absolute;top:4em;left:5px;right:5px;bottom:20px;',
|
||
animation: 'ani1', // 动画效果
|
||
mask: '' // 遮罩层颜色
|
||
});
|
||
```
|
||
|
||
**关键方法**：
|
||
|
||
| 方法 | 说明 | 示例 |
|
||
|------|------|------|
|
||
| `addplot(opn)` | 添加图表组件 | `addplot({jsname: 'bank1_c1', style: '...'})` |
|
||
| `run(fsec)` | 启动数据轮询 | `run({'bank_c1': 50})` // 50秒刷新一次 |
|
||
| `setbtns(opn)` | 设置关闭按钮 | `setbtns({template: 'close1'})` |
|
||
| `resize()` | 窗口大小改变时调用 | 自动调用所有组件的resize方法 |
|
||
| `distory()` | 销毁面板 | 清理所有组件和定时器 |
|
||
|
||
---
|
||
|
||
### 图表组件开发规范
|
||
|
||
每个图表组件是一个独立的JS文件，必须遵循以下规范：
|
||
|
||
**文件命名**：`{面板名}_{位置标识}.js`
|
||
- 位置标识：`c1`(中上)、`c2`(中)、`l1`(左上)、`l2`(左中)、`l3`(左下)、`r1`(右上)、`r2`(右中)、`r3`(右下)
|
||
|
||
**基本结构**：
|
||
|
||
```javascript
|
||
function ciy_chart_bank1_c1(opdata) {
|
||
var thos = this;
|
||
|
||
// 必须定义：指定需要调用的后端接口
|
||
this.func = ['bank_c1'];
|
||
|
||
// 组件变量
|
||
this.lastdata = {};
|
||
var chart1 = null; // ECharts实例
|
||
|
||
// 必须实现：数据设置方法
|
||
this.setdata = function (funame, data) {
|
||
if (!data) return;
|
||
this.lastdata[funame] = data;
|
||
|
||
// 更新DOM元素
|
||
$5('[data-num="n1"]', opdata.container).text(data.n1);
|
||
|
||
// 或更新ECharts图表
|
||
chart1.setOption({...});
|
||
}
|
||
|
||
// 必须实现：响应窗口大小变化
|
||
this.resize = function () {
|
||
if (chart1) chart1.resize();
|
||
}
|
||
|
||
// 必须实现：清理资源
|
||
this.distory = function () {
|
||
if (chart1) chart1.dispose();
|
||
clearInterval(timer);
|
||
}
|
||
|
||
// 组件初始化：添加DOM结构
|
||
opdata.container.append(`
|
||
<div id="chart1" style="height:100%;"></div>
|
||
`);
|
||
|
||
// 初始化ECharts
|
||
chart1 = echarts.init($5('#chart1', opdata.container)[0], 'dark');
|
||
chart1.setOption(option);
|
||
}
|
||
```
|
||
|
||
**关键属性**：
|
||
|
||
| 属性 | 说明 | 示例 |
|
||
|------|------|------|
|
||
| `this.func` | 需要调用的后端接口数组 | `['bank_c1', 'bank_c2']` |
|
||
| `this.prefunc` | 接口前缀（可选） | `'farm_'` |
|
||
| `opdata.container` | 组件容器DOM | 用于添加子元素 |
|
||
|
||
---
|
||
|
||
### 后端接口开发规范
|
||
|
||
**PHP类结构**：
|
||
|
||
```php
|
||
<?php
|
||
namespace web\admin\demo\bs;
|
||
|
||
class index {
|
||
// 初始化接口
|
||
public static function json_init() {
|
||
$ret['title'] = '演示大屏';
|
||
$ret['orgid'] = 1;
|
||
return succjson($ret);
|
||
}
|
||
|
||
// 图表数据接口：命名规则 json_{面板名}_{图表名}
|
||
public static function json_bank_c1() {
|
||
$ret['n1'] = '11,303.2';
|
||
$ret['n2'] = '9,395.1';
|
||
$ret['n3'] = '53';
|
||
$ret['name'] = '中国农业银行';
|
||
return succjson($ret);
|
||
}
|
||
|
||
// 复杂数据：返回数组
|
||
public static function json_bank_l1() {
|
||
$ret['pie'] = array();
|
||
for ($i = 1; $i < 4; $i++) {
|
||
$ret['pie'][] = array(
|
||
'id' => $i,
|
||
'name' => '风控' . $i,
|
||
'value' => rand(100, 300)
|
||
);
|
||
}
|
||
return succjson($ret);
|
||
}
|
||
}
|
||
```
|
||
|
||
**命名规范**：
|
||
- 方法名：`json_{面板名}_{图表名}`
|
||
- 返回格式：使用 `succjson($ret)` 统一返回JSON
|
||
- 数据结构：简单类型、数组、对象均可
|
||
|
||
---
|
||
|
||
## 数据流机制
|
||
|
||
### 轮询机制
|
||
|
||
```javascript
|
||
// 面板启动时设置刷新频率（单位：0.5秒）
|
||
chtpls['bank1'].run({
|
||
'bank_c1': 50, // 每25秒刷新一次
|
||
'bank_c2': 10, // 每5秒刷新一次
|
||
'bplant': 50 // 每25秒刷新一次
|
||
});
|
||
```
|
||
|
||
### 数据请求流程
|
||
|
||
```
|
||
1. bigpanel.run() 启动定时器（500ms间隔）
|
||
2. 检查每个func的倒计时
|
||
3. 倒计时为0时调用 ciyfn.callfunc()
|
||
4. 请求后端：POST json_{func}
|
||
5. 返回JSON数据
|
||
6. 调用对应组件的 setdata(funame, data)
|
||
7. 组件更新DOM或图表
|
||
8. 重置倒计时
|
||
```
|
||
|
||
### 跨组件数据共享
|
||
|
||
```javascript
|
||
// 全局数据对象
|
||
var Glob = {
|
||
post: {}, // 传递给后端的公共参数
|
||
bet: 1, // 屏幕缩放比例
|
||
fontsize: 14 // 字体大小
|
||
};
|
||
|
||
// 设置公共参数
|
||
ciyfn.callfunc('init', {}, function (json) {
|
||
Glob.post.orgid = json.orgid;
|
||
Glob.myparam = { title: json.title };
|
||
});
|
||
|
||
// 组件内使用
|
||
// 后端接口会自动合并 Glob.post 和 thos.post
|
||
```
|
||
|
||
---
|
||
|
||
## 常用组件类型
|
||
|
||
### 数字卡片组件
|
||
|
||
```javascript
|
||
// bank1_c1.js
|
||
function ciy_chart_bank1_c1(opdata) {
|
||
this.func = ['bank_c1'];
|
||
this.setdata = function (funame, data) {
|
||
$5('[data-num="n1"]', opdata.container).text(data.n1);
|
||
$5('[data-num="n2"]', opdata.container).text(data.n2);
|
||
$5('[data-bank]', opdata.container).text(data.name);
|
||
}
|
||
|
||
opdata.container.append(`
|
||
<div class="num" data-num="n1">--</div>
|
||
<div class="title">贷款金额 (万元)</div>
|
||
`);
|
||
}
|
||
```
|
||
|
||
### ECharts饼图组件
|
||
|
||
```javascript
|
||
// bank1_l1.js
|
||
function ciy_chart_bank1_l1(opdata) {
|
||
this.func = ['bank_l1'];
|
||
var chart1 = null;
|
||
|
||
this.setdata = function (funame, data) {
|
||
var option = {
|
||
series: [{
|
||
type: 'pie',
|
||
radius: ['25%', '40%'],
|
||
data: data.pie
|
||
}]
|
||
};
|
||
chart1.setOption(option);
|
||
}
|
||
|
||
opdata.container.append('<div id="chart1"></div>');
|
||
chart1 = echarts.init($5('#chart1')[0], 'dark');
|
||
|
||
// 自动高亮动画
|
||
var idx = -1;
|
||
setInterval(function () {
|
||
chart1.dispatchAction({ type: 'highlight', dataIndex: idx });
|
||
idx = (idx + 1) % data.pie.length;
|
||
}, 2200);
|
||
}
|
||
```
|
||
|
||
### Cesium地图组件
|
||
|
||
```javascript
|
||
// bank1_c2.js
|
||
function ciy_chart_bank1_c2(opdata) {
|
||
this.func = ['bank_c2'];
|
||
var thos = this;
|
||
var ce = null;
|
||
|
||
this.setdata = function (funame, data) {
|
||
if (ce) return; // 只初始化一次
|
||
|
||
ce = new ciyearth();
|
||
ce.init({
|
||
domid: 'map1',
|
||
wmts_source: 4,
|
||
wmts_style: 2
|
||
});
|
||
|
||
// 添加标记点
|
||
for (var i in data.bplants) {
|
||
var marker = ce.addmarker({
|
||
lat: data.bplants[i].lat,
|
||
lng: data.bplants[i].lng,
|
||
img: '/ud/bill/map' + data.bplants[i].cmcode + '.png'
|
||
});
|
||
marker.ciydata = data.bplants[i];
|
||
}
|
||
|
||
// 点击事件
|
||
ce.ciyevent = function (type, act, data) {
|
||
if (type == 'entity' && act == 'leftclick') {
|
||
showfarm(data.entity.ciydata);
|
||
}
|
||
};
|
||
}
|
||
|
||
this.distory = function () {
|
||
if (ce) ce.destroy();
|
||
}
|
||
|
||
opdata.container.append('<div id="map1"></div>');
|
||
}
|
||
```
|
||
|
||
### 图片轮播组件
|
||
|
||
```javascript
|
||
function ciy_chart_farm_l3(opdata) {
|
||
this.func = ['farm_l3'];
|
||
var thos = this;
|
||
var cyc = null;
|
||
|
||
this.setdata = function (funame, data) {
|
||
var imgs = data.farm.picszz.split('~');
|
||
|
||
cyc = new ciyclass.bigcychange({
|
||
values: imgs,
|
||
cycsec: 5,
|
||
changecb: function (img) {
|
||
$5('img', opdata.container).attr('src', img);
|
||
}
|
||
});
|
||
}
|
||
|
||
this.distory = function () {
|
||
if (cyc) cyc.distory();
|
||
}
|
||
|
||
opdata.container.append('<img src="" style="width:100%;height:100%;">');
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 高级功能
|
||
|
||
### 弹窗面板
|
||
|
||
```javascript
|
||
function showvideo(mas) {
|
||
var chtname = 'video1';
|
||
chtpls[chtname] = new ciyclass.bigpanel({
|
||
name: 'panel_' + chtname,
|
||
jspath: './b64/',
|
||
animation: 'small',
|
||
style: 'position:absolute;top:50px;left:50px;right:50px;bottom:50px;z-index:2010;'
|
||
});
|
||
|
||
chtpls[chtname].post = { videoid: mas.id, img: mas.capture };
|
||
chtpls[chtname].addplot({
|
||
jsname: chtname + '_c1',
|
||
style: 'position:absolute;left:1em;right:1em;bottom:1em;top:5em;'
|
||
});
|
||
|
||
chtpls[chtname].setbtns({ template: 'close1', hideopacity: 0.8 });
|
||
chtpls[chtname].run({});
|
||
}
|
||
```
|
||
|
||
### 地图弹窗提示
|
||
|
||
```javascript
|
||
this.showpopup = function (html, pos) {
|
||
if (thos.popup) thos.popup.remove();
|
||
|
||
var oset = $5(opdata.container).offset();
|
||
thos.popup = $5('<div class="popup-box"><div class="box">' + html + '</div><div class="line"></div><div class="rlc"></div></div>');
|
||
thos.popup.css({
|
||
top: pos.y - oset.top,
|
||
left: pos.x - oset.left,
|
||
opacity: 1
|
||
});
|
||
opdata.container.append(thos.popup);
|
||
}
|
||
```
|
||
|
||
### 屏幕自适应
|
||
|
||
```javascript
|
||
// 设置基准分辨率
|
||
ciyfn.big_resolution(1536, 864);
|
||
ciyfn.big_setbetsize(1536);
|
||
|
||
// 响应窗口大小变化
|
||
window.addEventListener("resize", function () {
|
||
ciyfn.big_setbetsize(1536);
|
||
for (var ipl in chtpls) {
|
||
chtpls[ipl].resize();
|
||
}
|
||
});
|
||
```
|
||
|
||
---
|
||
|
||
## 开发最佳实践
|
||
|
||
### 性能优化
|
||
|
||
1. **减少重复初始化**
|
||
```javascript
|
||
this.setdata = function (funame, data) {
|
||
if (ce) return; // 地图只初始化一次
|
||
// ...初始化代码
|
||
}
|
||
```
|
||
|
||
2. **使用全局缩放比例**
|
||
```javascript
|
||
var option = {
|
||
fontSize: 18 * Glob.bet, // 根据屏幕缩放
|
||
borderRadius: 4 * Glob.bet
|
||
};
|
||
```
|
||
|
||
3. **及时清理定时器**
|
||
```javascript
|
||
this.distory = function () {
|
||
clearInterval(t_autohight);
|
||
if (chart1) chart1.dispose();
|
||
}
|
||
```
|
||
|
||
### 样式规范
|
||
|
||
```css
|
||
/* 渐变文字 */
|
||
background: linear-gradient(to bottom, #ffffff, #50c4eb 60%);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
|
||
/* 动画 */
|
||
@keyframes opa {
|
||
0% { opacity: 1; }
|
||
10% { opacity: 0.5; }
|
||
20% { opacity: 1; }
|
||
}
|
||
|
||
/* 弹窗样式 */
|
||
.popup-box {
|
||
position: absolute;
|
||
z-index: 999;
|
||
transform: translateX(-50%) translateY(-100%);
|
||
pointer-events: none;
|
||
transition: all 0.5s;
|
||
}
|
||
```
|
||
|
||
### 调试技巧
|
||
|
||
```javascript
|
||
// 开发模式
|
||
if (urlp.dev) {
|
||
console.log('组件名称', data);
|
||
// ...调试代码
|
||
}
|
||
|
||
// 查看当前刷新频率
|
||
console.log(funcsecs); // 查看所有接口的倒计时
|
||
|
||
// 手动刷新所有组件
|
||
setdata();
|
||
```
|
||
|
||
---
|
||
|
||
## 常见问题
|
||
|
||
### Q1: 组件不显示数据？
|
||
**检查**：
|
||
1. `this.func` 数组是否正确
|
||
2. 后端接口命名是否匹配 `json_{func}`
|
||
3. `setdata()` 方法是否正确处理数据
|
||
|
||
### Q2: 地图不显示？
|
||
**检查**：
|
||
1. 容器是否有高度：`style="height:100%"`
|
||
2. 初始化前是否已添加DOM
|
||
3. Cesium资源是否加载：`/zces108/Cesium.js`
|
||
|
||
### Q3: 窗口调整后图表变形？
|
||
**解决**：
|
||
```javascript
|
||
window.addEventListener("resize", function () {
|
||
chtpls[ipl].resize(); // 调用每个面板的resize
|
||
});
|
||
```
|
||
|
||
### Q4: 数据刷新太频繁？
|
||
**调整**：
|
||
```javascript
|
||
chtpls['bank1'].run({
|
||
'bank_c1': 100 // 增加刷新间隔（单位：0.5秒）
|
||
});
|
||
```
|
||
|
||
---
|
||
|
||
## 开发流程
|
||
|
||
### 新建大屏步骤
|
||
|
||
1. **创建目录和文件**
|
||
```
|
||
web/admin/demo/bs/
|
||
├── index.html
|
||
├── index.php
|
||
└── b64/
|
||
```
|
||
|
||
2. **编写 index.html**
|
||
- 引入必要JS库
|
||
- 创建 `ciyclass.bigpanel`
|
||
- 添加图表组件
|
||
|
||
3. **编写 index.php**
|
||
- 创建 `json_init()` 接口
|
||
- 为每个组件创建数据接口
|
||
|
||
4. **开发组件JS文件**
|
||
- 实现 `setdata()`、`resize()`、`distory()`
|
||
- 添加DOM结构
|
||
- 初始化ECharts或其他库
|
||
|
||
5. **测试调试**
|
||
- 使用 `urlp.dev` 开发模式
|
||
- 检查数据流
|
||
- 优化性能
|
||
|
||
---
|
||
|
||
## 参考资源
|
||
|
||
### 技术文档
|
||
- ECharts: https://echarts.apache.org/
|
||
- Cesium: https://cesium.com/
|
||
- jQuery: https://jquery.com/
|
||
|
||
### 内部资源
|
||
- 样式文件：`/jscss/style.css`
|
||
- 大屏样式：`/ud/bigscreen/bigscr.css`
|
||
- 图片资源：`/ud/bigscreen/`
|
||
- 字体资源：`/ud/bigscreen/`
|
||
|
||
### 示例代码
|
||
- 银行大屏：`web/admin/demo/bs/`
|
||
- 参考组件：`b64/bank1_*.js`
|
||
|
||
---
|
||
|
||
## bigscreen CSS 资源详解
|
||
|
||
### 目录结构
|
||
|
||
```
|
||
/web/ud/bigscreen/
|
||
├── bigscr.css # 大屏核心样式文件
|
||
├── bg/ # 背景图片（bg01.png - bg04.png）
|
||
├── border/ # 边框图片（34种通用边框 + 4种文本边框）
|
||
├── caption/ # 标题样式（11种大标题 + 1种底部样式）
|
||
├── cir/ # 圆形装饰
|
||
├── font/ # 字体文件（15种）
|
||
├── fontweb/ # Web字体
|
||
├── icon/ # 图标
|
||
├── orn/ # 装饰元素
|
||
└── tit/ # 小标题（6种）
|
||
```
|
||
|
||
### 字体资源（15种）
|
||
|
||
#### 中文/装饰字体（7种）
|
||
|
||
| 字体名 | 文件路径 | 用途场景 | 推荐使用 |
|
||
|--------|----------|----------|----------|
|
||
| `fnt01` | font/fnt01.ttf | 大屏主标题（cap02, cap06, cap07, cap09, cap10, cap11） | ⭐⭐⭐⭐⭐ |
|
||
| `fnt02` | font/fnt02.ttf | 中等标题（cap03, cap05） | ⭐⭐⭐⭐ |
|
||
| `fnt03` | fontweb/fnt03.ttf | 网页特殊字体 | ⭐⭐⭐ |
|
||
| `fnt04-fnt07` | font/fnt04~07.ttf | 装饰字体备用 | ⭐⭐ |
|
||
|
||
#### 小标题字体（4种）
|
||
|
||
| 字体名 | 文件路径 | 格式 |
|
||
|--------|----------|------|
|
||
| `xt01` | font/xt01.ttf | .ttf |
|
||
| `xt02` | font/xt02.otf | .otf |
|
||
| `xt03` | font/xt03.otf | .otf |
|
||
| `xt04` | font/xt04.ttf | .ttf |
|
||
|
||
#### 英文/数字字体（2种）
|
||
|
||
| 字体名 | 文件路径 | 用途 | 推荐使用 |
|
||
|--------|----------|------|----------|
|
||
| `eng01` | font/eng01.ttf | 英文/数字1 | ⭐⭐⭐ |
|
||
| `eng02` | font/eng02.ttf | 英文/数字2（数字卡片常用） | ⭐⭐⭐⭐⭐ |
|
||
|
||
#### 黑体系列（3种）
|
||
|
||
| 字体名 | 文件路径 | 粗细 |
|
||
|--------|----------|------|
|
||
| `hs-bold` | font/hs-bold.ttf | 粗体 |
|
||
| `hs-light` | font/hs-light.ttf | 细体 |
|
||
| `hs-normal` | font/hs-normal.ttf | 常规 |
|
||
|
||
**使用示例**：
|
||
```css
|
||
/* 大屏标题 */
|
||
font-family: fnt01;
|
||
|
||
/* 数字卡片 */
|
||
font-family: eng02;
|
||
font-size: 1.8em;
|
||
letter-spacing: 4px;
|
||
|
||
/* 复合标题 */
|
||
font-family: SimHei, STHeiti, 黑体;
|
||
```
|
||
|
||
### 背景样式（4种）
|
||
|
||
| 类名 | 背景图片 | 渐变配色 | 适用场景 |
|
||
|------|----------|----------|----------|
|
||
| `.bd01` | bg/bg01.png | `radial-gradient(#232f5a, #232f5a)` | 通用深蓝大屏 |
|
||
| `.bd02` | bg/bg02.png | `radial-gradient(#232f5a, #0b1121)` | 深蓝+黑色渐变 |
|
||
| `.bd03` | bg/bg03.png | `radial-gradient(#232f5a, #0b1121)` | 备用深色背景 |
|
||
| `.bd04` | bg/bg04.png | `radial-gradient(#092b46, #041320)` | 现代海蓝色 ⭐ |
|
||
|
||
**共同特性**：
|
||
- `height: 100vh`
|
||
- `color: #ffffff`
|
||
- 背景图片设置为 `repeat` 重复平铺
|
||
|
||
**使用示例**：
|
||
```html
|
||
<body class="bd04">
|
||
<!-- 大屏内容 -->
|
||
</body>
|
||
```
|
||
|
||
### 边框样式（38种）
|
||
|
||
#### 通用边框（34种）
|
||
|
||
| 类名 | 切割值 | 边框宽度 | 内边距 | 重复模式 | 背景色 | 推荐度 |
|
||
|------|--------|----------|--------|----------|--------|--------|
|
||
| `.brimg01` | 15 22 19 16 | 15px 22px 19px 16px | 10px 15px 15px 10px | - | - | ⭐⭐⭐⭐ |
|
||
| `.brimg02` | 15 21 20 16 | 15px 21px 20px 16px | 10px 15px 15px 10px | - | - | ⭐⭐⭐⭐ |
|
||
| `.brimg03` | 13 13 13 13 | 13px 13px 13px 13px | 10px 10px | - | `#00000011` | ⭐⭐⭐ |
|
||
| `.brimg04` | 103 168 103 168 | 103px 168px 103px 168px | 10px 10px | - | - | ⭐⭐ |
|
||
| `.brimg05` | 97 76 97 76 | 97px 76px 97px 76px | 15px | - | - | ⭐⭐ |
|
||
| `.brimg10` | 14 | 14px | 8px | - | `#00000011` | ⭐⭐⭐ |
|
||
| `.brimg21` | 50 28 50 28 | 50px 28px 50px 28px | 3px 8px 3px 8px | - | `transparent` | ⭐⭐⭐ |
|
||
| `.brimg33` | 315 315 315 315 | 315px 315px 315px 315px | 7px | - | `transparent` | ⭐⭐ |
|
||
| `.brimg34` | 20 21 20 21 | 20px 21px 20px 21px | 7px | - | `#00000011` | ⭐⭐⭐⭐⭐ |
|
||
|
||
**推荐使用**：
|
||
- `.brimg34` - 常用边框（地图容器常用）⭐⭐⭐⭐⭐
|
||
- `.brimg03` / `.brimg10` / `.brimg19` - 简薄边框（带半透明背景）⭐⭐⭐
|
||
- `.brimg21` / `.brimg23` / `.brimg24` / `.brimg25` - 透明边框⭐⭐⭐
|
||
|
||
#### 文本边框（4种）
|
||
|
||
| 类名 | 切割值 | 边框宽度 | 内边距 | 特色 |
|
||
|------|--------|----------|--------|------|
|
||
| `.brtxt01` | 2 23 22 23 | 2px 23px 22px 23px | 3px 10px | 红色警告边框，字体加粗 |
|
||
| `.brtxt02` | 35 60 35 60 | 35px 60px 35px 60px | 10px 20px | 装饰文本边框1 |
|
||
| `.brtxt03` | 30 54 30 54 | 30px 54px 30px 54px | 10px 20px | 装饰文本边框2 |
|
||
| `.brtxt04` | 31 93 31 71 | 31px 93px 31px 71px | 10px 20px | 装饰文本边框3 |
|
||
|
||
**brtxt01 特有样式**：
|
||
```css
|
||
background: #ff000029;
|
||
color: #cc0000;
|
||
text-shadow: 1px 1px 0 #000000;
|
||
font-weight: bold;
|
||
```
|
||
|
||
**使用示例**：
|
||
```html
|
||
<!-- 常用边框 -->
|
||
<div class="brimg34" style="padding:2px;">
|
||
<div id="map1" style="height:100%;"></div>
|
||
</div>
|
||
|
||
<!-- 薄边框 -->
|
||
<div class="brimg03" style="padding:10px;">
|
||
<div id="chart1" style="height:100%;"></div>
|
||
</div>
|
||
|
||
<!-- 警告文本 -->
|
||
<div class="brtxt01">警告信息</div>
|
||
```
|
||
|
||
### 标题样式（11种大标题 + 1种底部样式）
|
||
|
||
#### 大标题（11种）
|
||
|
||
| 类名 | 高度 | 最小宽度 | 字体 | 渐变色 | 特色 | 推荐度 |
|
||
|------|------|----------|------|--------|------|--------|
|
||
| `.cap01` | 100px | 1000px | 默认 | 白→白70%→青 | 倒影效果 | ⭐⭐⭐⭐ |
|
||
| `.cap02` | 50px | 1200px | fnt01 | 白→浅蓝 | 简洁大标题 | ⭐⭐⭐⭐ |
|
||
| `.cap03` | 40px | 1000px | fnt02 | 白30%→深蓝 | 紧凑标题 | ⭐⭐⭐ |
|
||
| `.cap04` | 40px | 1000px | 默认 | 白→浅蓝 | 线条装饰 | ⭐⭐⭐ |
|
||
| `.cap05` | 40px | 1000px | fnt02 | 白→青色 | 青色渐变 | ⭐⭐⭐ |
|
||
| `.cap06` | 120px | 1200px | fnt01 | 白→青色 | 大标题带装饰 | ⭐⭐⭐ |
|
||
| `.cap07` | 80px | 1600px | fnt01 | 白→青色 | 超宽标题 | ⭐⭐⭐ |
|
||
| `.cap08` | 65px | 900px | SimHei | - | 复合标题（h1+h2） | ⭐⭐⭐⭐ |
|
||
| `.cap09` | 48px | 1300px | fnt01 | 白→浅蓝60% | 倒影效果 | ⭐⭐⭐⭐⭐ |
|
||
| `.cap10` | 42px | 950px | fnt01 | 深蓝→白50% | 蓝白渐变 | ⭐⭐⭐⭐ |
|
||
| `.cap11` | 60px | 1260px | fnt01 | 白→浅蓝50% | 双行标题（h1+h2） | ⭐⭐⭐⭐ |
|
||
|
||
**通用标题样式**：
|
||
```css
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
text-align: center;
|
||
```
|
||
|
||
**倒影效果**（cap01, cap09）：
|
||
```css
|
||
-webkit-box-reflect: below -35px -webkit-linear-gradient(transparent, transparent 20%, rgba(0,0,0,0.23));
|
||
```
|
||
|
||
#### 底部样式（1种）
|
||
|
||
| 类名 | 高度 | 背景 | 对齐 |
|
||
|------|------|------|------|
|
||
| `.btm01` | 20px | btm01.png（底部居中） | 居中 |
|
||
|
||
**使用示例**：
|
||
```html
|
||
<!-- 推荐标题：带倒影大标题 -->
|
||
<div class="cap09">
|
||
<div data-title>数据大屏标题</div>
|
||
</div>
|
||
|
||
<!-- 简洁大标题 -->
|
||
<div class="cap02">
|
||
<div>简洁标题</div>
|
||
</div>
|
||
|
||
<!-- 复合标题 -->
|
||
<div class="cap08">
|
||
<h1>主标题</h1>
|
||
<h2>副标题</h2>
|
||
</div>
|
||
|
||
<!-- 底部装饰 -->
|
||
<div class="btm01">
|
||
<div>底部文字</div>
|
||
</div>
|
||
```
|
||
|
||
### 小标题样式（6种）
|
||
|
||
| 类名 | 高度 | 左边距 | 最小宽度 | 背景图 |
|
||
|------|------|--------|----------|--------|
|
||
| `.tit05` | 30px | 50px | 230px | tit/05.png（左上角） |
|
||
|
||
```css
|
||
.tit05 {
|
||
height: 30px;
|
||
display: inline-block;
|
||
padding: 4px 0 0 50px;
|
||
min-width: 230px;
|
||
background: url(./tit/05.png) top left no-repeat;
|
||
background-size: contain;
|
||
}
|
||
```
|
||
|
||
### 动画效果（1种）
|
||
|
||
#### 立方体展开动画
|
||
|
||
```css
|
||
@keyframes ani01_cube {
|
||
0% {
|
||
transform: scale(0) rotate(0deg) translate(-50%, -50%);
|
||
opacity: 0.2;
|
||
}
|
||
5% {
|
||
transform: scale(50) rotate(660deg) translate(-50%, -50%);
|
||
opacity: 0;
|
||
}
|
||
100% {
|
||
transform: scale(50) rotate(660deg) translate(-50%, -50%);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.ani01 li {
|
||
position: absolute;
|
||
top: 50vh;
|
||
left: 50vw;
|
||
width: 10px;
|
||
height: 10px;
|
||
border: solid 1px #0039ad;
|
||
color: transparent;
|
||
transform-origin: top left;
|
||
transform: scale(0) rotate(0deg) translate(-50%, -50%);
|
||
animation: ani01_cube 20s ease-in forwards infinite;
|
||
}
|
||
```
|
||
|
||
**效果**：屏幕中心的边框立方体快速放大旋转消失，形成炫酷的展开效果
|
||
|
||
### 全局基础样式
|
||
|
||
```css
|
||
* {
|
||
user-select: none; /* 禁止文本选择 */
|
||
-webkit-user-select: none;
|
||
}
|
||
|
||
span {
|
||
vertical-align: middle; /* span垂直居中 */
|
||
}
|
||
|
||
img {
|
||
vertical-align: middle; /* 图片垂直居中 */
|
||
}
|
||
```
|
||
|
||
### 资源速查表
|
||
|
||
**字体选择**：
|
||
```css
|
||
font-family: fnt01; /* 大屏主标题 ⭐⭐⭐⭐⭐ */
|
||
font-family: fnt02; /* 中等标题 ⭐⭐⭐⭐ */
|
||
font-family: eng02; /* 数字展示 ⭐⭐⭐⭐⭐ */
|
||
font-family: SimHei; /* 复合标题（cap08） ⭐⭐⭐⭐ */
|
||
```
|
||
|
||
**背景选择**：
|
||
```html
|
||
<body class="bd04"> <!-- 推荐：现代海蓝色 ⭐⭐⭐⭐⭐ -->
|
||
<body class="bd01"> <!-- 通用深蓝 ⭐⭐⭐⭐ -->
|
||
<body class="bd02"> <!-- 深蓝+黑 ⭐⭐⭐ -->
|
||
<body class="bd03"> <!-- 备用深色 ⭐⭐⭐ -->
|
||
```
|
||
|
||
**边框选择**：
|
||
```html
|
||
<div class="brimg34"> <!-- 推荐：常用边框 ⭐⭐⭐⭐⭐ -->
|
||
<div class="brimg03"> <!-- 薄边框+半透明背景 ⭐⭐⭐ -->
|
||
<div class="brimg21"> <!-- 透明边框 ⭐⭐⭐ -->
|
||
<div class="brtxt01"> <!-- 红色警告文本框 ⭐⭐⭐ -->
|
||
```
|
||
|
||
**标题选择**：
|
||
```html
|
||
<div class="cap09"> <!-- 推荐：带倒影大标题 ⭐⭐⭐⭐⭐ -->
|
||
<div class="cap01"> <!-- 倒影效果 ⭐⭐⭐⭐ -->
|
||
<div class="cap02"> <!-- 简洁大标题 ⭐⭐⭐⭐ -->
|
||
<div class="cap08"> <!-- 复合标题 ⭐⭐⭐⭐ -->
|
||
<div class="btm01"> <!-- 底部装饰 ⭐⭐⭐ -->
|
||
```
|
||
|
||
---
|
||
|
||
## ciybigscreen.js API 详解
|
||
|
||
### 类：`ciyclass.bigpanel`
|
||
|
||
**功能**：大屏面板管理核心类
|
||
|
||
#### 构造函数参数
|
||
|
||
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|
||
|------|------|------|--------|------|
|
||
| `name` | String | ✓ | - | 面板唯一标识（用于DOM的id） |
|
||
| `jspath` | String | ✓ | - | 组件JS文件路径（如 `'./b64/'`） |
|
||
| `style` | String | - | `''` | 面板容器内联样式 |
|
||
| `prop` | String | - | `''` | 面板容器HTML属性 |
|
||
| `animation` | String | - | - | 动画类型（'ani1', 'ani2', 'small'） |
|
||
| `mask` | String | - | - | 遮罩层颜色（如 `'rgba(0,0,0,0.5)'`） |
|
||
|
||
**使用示例**：
|
||
```javascript
|
||
var chtpls = {};
|
||
chtpls['bank1'] = new ciyclass.bigpanel({
|
||
name: 'panel_bank1', // 必填
|
||
jspath: './b64/', // 必填
|
||
style: 'position:absolute;top:4em;left:5px;right:5px;bottom:20px;',
|
||
animation: 'ani1',
|
||
mask: 'rgba(0,0,0,0.5)'
|
||
});
|
||
```
|
||
|
||
#### 实例属性
|
||
|
||
| 属性 | 类型 | 说明 |
|
||
|------|------|------|
|
||
| `this.container` | jQuery对象 | 面板容器DOM对象 |
|
||
| `this.post` | Object | 传递给后端的公共参数（每个组件独有） |
|
||
|
||
**使用示例**：
|
||
```javascript
|
||
chtpls['bank1'].post = {
|
||
bankid: 123,
|
||
orgid: 1
|
||
};
|
||
```
|
||
|
||
#### 方法详解
|
||
|
||
**1. `addplot(opn)` - 添加图表组件**
|
||
|
||
**参数**：
|
||
| 参数 | 类型 | 必填 | 说明 |
|
||
|------|------|------|------|
|
||
| `opn.jsname` | String | ✓ | 组件名称（如 `'bank1_c1'`） |
|
||
| `opn.style` | String | - | 组件容器样式 |
|
||
| `opn.prop` | String | - | 组件容器HTML属性 |
|
||
|
||
**使用示例**：
|
||
```javascript
|
||
chtpls['bank1'].addplot({
|
||
jsname: 'bank1_c1',
|
||
style: 'position:absolute;left:0;top:0;width:33%;height:33%;',
|
||
prop: 'data-id="chart1"'
|
||
});
|
||
```
|
||
|
||
**内部流程**：
|
||
```
|
||
1. 创建组件加载状态：plots[opn.jsname] = { load: 0 }
|
||
2. 动态加载JS文件：ciyfn.loadjs('ciy_chart_' + opn.jsname, ...)
|
||
3. 加载成功后创建容器：load = 1
|
||
4. 添加到面板容器：load = 2
|
||
5. 实例化组件类：new window['ciy_chart_' + opn.jsname]()
|
||
```
|
||
|
||
**2. `setbtns(opn)` - 设置按钮**
|
||
|
||
**参数**：
|
||
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|
||
|------|------|------|--------|------|
|
||
| `opn.template` | String | - | - | 模板类型（如 `'close1'`） |
|
||
| `opn.html` | String | - | `''` | 自定义按钮HTML |
|
||
| `opn.hideopacity` | Number | - | `0.9` | 隐藏时透明度（0-1） |
|
||
| `opn.hidesec` | Number | - | `5` | 鼠标静止X秒后隐藏 |
|
||
| `opn.top` | String | - | `'2px'` | 按钮顶部位置 |
|
||
| `opn.click` | Function | - | - | 自定义点击事件 |
|
||
|
||
**使用示例**：
|
||
```javascript
|
||
// 使用内置模板
|
||
chtpls['bank1'].setbtns({
|
||
template: 'close1',
|
||
hideopacity: 0.9,
|
||
hidesec: 5,
|
||
top: '2px'
|
||
});
|
||
|
||
// 自定义按钮
|
||
chtpls['bank1'].setbtns({
|
||
html: '<button data-act="close">关闭</button>',
|
||
click: function(e) {
|
||
console.log('按钮被点击');
|
||
}
|
||
});
|
||
```
|
||
|
||
**内置模板**：
|
||
- `close1` - 关闭按钮（右上角×）
|
||
|
||
**自动隐藏机制**：
|
||
- 监听 `mousemove` 事件更新时间戳
|
||
- 每500ms检查是否超过 `hidesec` 秒未操作
|
||
- 超时则降低透明度到 `hideopacity`
|
||
|
||
**3. `run(fsec)` - 启动数据轮询**
|
||
|
||
**参数**：
|
||
| 参数 | 类型 | 必填 | 说明 |
|
||
|------|------|------|------|
|
||
| `fsec` | Object | ✓ | 刷新频率配置（键为接口名，值为0.5秒的倍数） |
|
||
|
||
**使用示例**：
|
||
```javascript
|
||
chtpls['bank1'].run({
|
||
'bank_c1': 50, // 每25秒刷新一次（50 × 0.5秒）
|
||
'bank_c2': 10, // 每5秒刷新一次（10 × 0.5秒）
|
||
'bplant': 50 // 每25秒刷新一次
|
||
});
|
||
```
|
||
|
||
**内部流程**：
|
||
|
||
```
|
||
初始化阶段（仅执行一次）
|
||
└─ 遍历所有组件
|
||
└─ 读取组件的 this.func 数组
|
||
└─ 为每个接口创建 funcsecs 对象
|
||
└─ 设置初始倒计时 t=0 和最大间隔 max
|
||
|
||
轮询阶段（每500ms执行一次）
|
||
└─ 遍历 funcsecs
|
||
├─ t == 0？发起请求
|
||
│ ├─ 合并参数：Glob.post + thos.post
|
||
│ ├─ 调用 ciyfn.callfunc(ifu, post, callback)
|
||
│ ├─ 成功：
|
||
│ │ ├─ 重置倒计时：t = max
|
||
│ │ └─ 分发数据到所有相关组件
|
||
│ └─ 失败：t = 5（5秒后重试）
|
||
└─ t--（倒计时递减）
|
||
```
|
||
|
||
**数据分发逻辑**：
|
||
```javascript
|
||
// 遍历所有组件
|
||
for (var iplot in plots) {
|
||
// 检查组件是否匹配（通过 prefunc）
|
||
if (plots[iplot].clss.prefunc != funcsecs[ifu].prefunc) continue;
|
||
|
||
// 提取函数名（去掉前缀）
|
||
var funcstr = ifu.substring(funcsecs[ifu].prefunc.length);
|
||
|
||
// 检查组件是否需要此数据
|
||
if (plots[iplot].clss.func.indexOf(funcstr) == -1) continue;
|
||
|
||
// 调用组件的 setdata 方法
|
||
if (typeof (plots[iplot].clss.setdata) == 'function') {
|
||
plots[iplot].clss.setdata(funcstr, jsondata);
|
||
}
|
||
}
|
||
```
|
||
|
||
**4. `setdata()` - 手动刷新所有组件**
|
||
|
||
**参数**：无
|
||
|
||
**功能**：临时方法，用于调试或手动触发刷新
|
||
|
||
**使用示例**：
|
||
```javascript
|
||
chtpls['bank1'].setdata();
|
||
```
|
||
|
||
**5. `resize()` - 窗口大小改变响应**
|
||
|
||
**参数**：无
|
||
|
||
**功能**：遍历所有组件，调用其 `resize()` 方法
|
||
|
||
**使用示例**：
|
||
```javascript
|
||
window.addEventListener("resize", function () {
|
||
ciyfn.big_setbetsize(1536);
|
||
for (var ipl in chtpls) {
|
||
chtpls[ipl].resize();
|
||
}
|
||
});
|
||
```
|
||
|
||
**6. `distory()` - 销毁面板**
|
||
|
||
**参数**：无
|
||
|
||
**功能**：清理面板资源，包括定时器、组件、DOM元素
|
||
|
||
**清理流程**：
|
||
```
|
||
1. 清除定时器：tick, tick_btns
|
||
2. 遍历所有组件
|
||
└─ 调用组件的 distory() 方法
|
||
└─ 删除组件对象
|
||
3. 播放关闭动画（如果设置了 animation）
|
||
4. 移除DOM元素
|
||
```
|
||
|
||
**使用示例**：
|
||
```javascript
|
||
chtpls['bank1'].distory();
|
||
delete chtpls['bank1'];
|
||
```
|
||
|
||
---
|
||
|
||
### 工具函数：`ciyfn.big_setbetsize(basewidth, fontsize)`
|
||
|
||
**功能**：设置大屏缩放比例和字体大小
|
||
|
||
**参数**：
|
||
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|
||
|------|------|------|--------|------|
|
||
| `basewidth` | Number | ✓ | - | 基准设计宽度（如 1536） |
|
||
| `fontsize` | Number/String | - | `'auto'` | 字体大小（'auto' 或 具体数值） |
|
||
|
||
**返回值**：无
|
||
|
||
**使用示例**：
|
||
```javascript
|
||
ciyfn.big_setbetsize(1536); // 自动计算
|
||
ciyfn.big_setbetsize(1536, 16); // 指定字体大小
|
||
ciyfn.big_setbetsize(1536, 0); // 不调整字体
|
||
```
|
||
|
||
**计算逻辑**：
|
||
|
||
```
|
||
1. 获取屏幕宽度：window.screen.width
|
||
2. 开发模式特殊处理（urlp.dev）
|
||
└─ devicePixelRatio < 0.8 时放大屏幕宽度
|
||
3. 屏幕宽度 > 基准宽度？
|
||
└─ 是：计算缩放比例 bet = screenwidth / basewidth
|
||
└─ 是：计算字体 fontsize = 14 * bet
|
||
4. 设置全局样式
|
||
└─ $5('body').css('fontSize', fontsize)
|
||
5. 更新全局变量
|
||
└─ Glob.fontsize = fontsize - 2
|
||
└─ Glob.bet = bet
|
||
```
|
||
|
||
**使用场景**：
|
||
```javascript
|
||
// 页面加载时
|
||
ciyfn.big_resolution(1536, 864);
|
||
ciyfn.big_setbetsize(1536);
|
||
|
||
// 窗口大小改变时
|
||
window.addEventListener("resize", function () {
|
||
ciyfn.big_setbetsize(1536);
|
||
for (var ipl in chtpls) {
|
||
chtpls[ipl].resize();
|
||
}
|
||
});
|
||
```
|
||
|
||
---
|
||
|
||
### 工具函数：`ciyfn.big_resolution(width, height)`
|
||
|
||
**功能**：检查屏幕分辨率是否匹配建议值
|
||
|
||
**参数**：
|
||
| 参数 | 类型 | 必填 | 说明 |
|
||
|------|------|------|------|
|
||
| `width` | Number | ✓ | 基准宽度 |
|
||
| `height` | Number | ✓ | 基准高度 |
|
||
|
||
**返回值**：无
|
||
|
||
**使用示例**：
|
||
```javascript
|
||
ciyfn.big_resolution(1536, 864);
|
||
```
|
||
|
||
**检查流程**：
|
||
|
||
```
|
||
1. 检查物理分辨率：window.screen.width/height
|
||
└─ 不匹配？提示："最佳分辨率为:1536 x 864"
|
||
|
||
2. 检查窗口宽度：window.innerWidth
|
||
└─ 不等于基准宽度？返回（判断为调试模式）
|
||
|
||
3. 检查窗口高度：window.innerHeight
|
||
└─ 小于基准高度？提示："请按F11，进入全屏模式"
|
||
```
|
||
|
||
**使用场景**：
|
||
```javascript
|
||
// 页面加载时检查
|
||
ciyfn.big_resolution(1536, 864);
|
||
```
|
||
|
||
---
|
||
|
||
### 类：`ciyclass.bigcychange`
|
||
|
||
**功能**：值循环切换工具（用于图片轮播、数据切换等）
|
||
|
||
#### 构造函数参数
|
||
|
||
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|
||
|------|------|------|--------|------|
|
||
| `values` | Array | ✓ | - | 值数组 |
|
||
| `changecb` | Function | ✓ | - | 值改变时的回调函数 |
|
||
| `cycsec` | Number | - | `5` | 切换间隔（秒） |
|
||
|
||
**使用示例**：
|
||
```javascript
|
||
var cyc = new ciyclass.bigcychange({
|
||
values: ['img1.jpg', 'img2.jpg', 'img3.jpg'],
|
||
cycsec: 5,
|
||
changecb: function (img) {
|
||
$5('img', opdata.container).attr('src', img);
|
||
}
|
||
});
|
||
```
|
||
|
||
#### 实例属性
|
||
|
||
| 属性 | 类型 | 说明 |
|
||
|------|------|------|
|
||
| `this.value` | Any | 当前值 |
|
||
|
||
#### 方法详解
|
||
|
||
**1. `change(mm, longsec)` - 手动切换到指定值**
|
||
|
||
**参数**：
|
||
| 参数 | 类型 | 必填 | 说明 |
|
||
|------|------|------|------|
|
||
| `mm` | Any | ✓ | 要切换到的值 |
|
||
| `longsec` | Number | - | 停留时长（秒），默认使用 cycsec |
|
||
|
||
**返回值**：Boolean（成功返回 true，失败返回 false）
|
||
|
||
**使用示例**：
|
||
```javascript
|
||
cyc.change('img2.jpg', 10); // 切换到'img2.jpg'，停留10秒
|
||
cyc.change('img1.jpg'); // 切换到'img1.jpg'，使用默认间隔
|
||
```
|
||
|
||
**2. `distory()` - 销毁定时器**
|
||
|
||
**参数**：无
|
||
|
||
**返回值**：无
|
||
|
||
**使用示例**：
|
||
```javascript
|
||
cyc.distory();
|
||
```
|
||
|
||
**完整使用示例**：
|
||
```javascript
|
||
function ciy_chart_farm_l3(opdata) {
|
||
this.func = ['farm_l3'];
|
||
var thos = this;
|
||
var cyc = null;
|
||
|
||
this.setdata = function (funame, data) {
|
||
var imgs = data.farm.picszz.split('~');
|
||
|
||
cyc = new ciyclass.bigcychange({
|
||
values: imgs,
|
||
cycsec: 5,
|
||
changecb: function (img) {
|
||
$5('img', opdata.container).attr('src', img);
|
||
}
|
||
});
|
||
}
|
||
|
||
this.distory = function () {
|
||
if (cyc) cyc.distory();
|
||
}
|
||
|
||
opdata.container.append('<img src="" style="width:100%;height:100%;">');
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### 全局变量：`Glob`
|
||
|
||
| 属性 | 类型 | 说明 |
|
||
|------|------|------|
|
||
| `Glob.post` | Object | 传递给后端的公共参数（所有面板共享） |
|
||
| `Glob.bet` | Number | 屏幕缩放比例 |
|
||
| `Glob.fontsize` | Number | 字体大小 |
|
||
| `Glob.myparam` | Object | 自定义参数 |
|
||
|
||
**使用示例**：
|
||
```javascript
|
||
// 页面加载时设置公共参数
|
||
ciyfn.callfunc('init', {}, function (json) {
|
||
Glob.post.orgid = json.orgid;
|
||
Glob.myparam = { title: json.title };
|
||
});
|
||
|
||
// 组件内使用
|
||
var option = {
|
||
fontSize: 18 * Glob.bet,
|
||
borderRadius: 4 * Glob.bet
|
||
};
|
||
```
|
||
|
||
---
|
||
|
||
## 样式命名规范与最佳实践
|
||
|
||
### CSS命名规范
|
||
|
||
为避免样式冲突，组件内部CSS应遵循以下规范：
|
||
|
||
#### BEM命名法
|
||
|
||
```css
|
||
/* 面板_组件__元素 */
|
||
.bank1-c1__num { }
|
||
.bank1-c1__title { }
|
||
.farm1-l2__info { }
|
||
.farm1-l2__item { }
|
||
```
|
||
|
||
**示例**：
|
||
```javascript
|
||
opdata.container.append(`
|
||
<div class="bank1-c1">
|
||
<div class="bank1-c1__num" data-num="n1">--</div>
|
||
<div class="bank1-c1__title">贷款金额</div>
|
||
</div>
|
||
`);
|
||
|
||
// 动态注入样式
|
||
var style = document.createElement("style");
|
||
style.innerHTML = `
|
||
.bank1-c1__num {
|
||
font-size: 1.8em;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
}
|
||
.bank1-c1__title {
|
||
font-size: 0.8em;
|
||
color: #6dcdee;
|
||
}
|
||
`;
|
||
window.document.head.appendChild(style);
|
||
```
|
||
|
||
#### ID选择器（配合 opdata.container）
|
||
|
||
```javascript
|
||
// 添加元素时指定ID
|
||
opdata.container.append('<div id="chart1"></div>');
|
||
|
||
// 访问时限定在容器内
|
||
var chart1 = echarts.init($5('#chart1', opdata.container)[0], 'dark');
|
||
```
|
||
|
||
#### data-* 属性选择器
|
||
|
||
```javascript
|
||
// 添加元素
|
||
opdata.container.append(`
|
||
<div data-num="n1">--</div>
|
||
<div data-bank>银行名称</div>
|
||
`);
|
||
|
||
// 更新数据
|
||
$5('[data-num="n1"]', opdata.container).text(data.n1);
|
||
$5('[data-bank]', opdata.container).text(data.name);
|
||
```
|
||
|
||
### 使用 bigscreen 资源
|
||
|
||
#### 字体选择
|
||
|
||
```css
|
||
/* 大屏主标题 */
|
||
font-family: fnt01;
|
||
font-size: 2em;
|
||
letter-spacing: 0.2em;
|
||
|
||
/* 中等标题 */
|
||
font-family: fnt02;
|
||
font-size: 1.5em;
|
||
|
||
/* 数字展示 */
|
||
font-family: eng02;
|
||
font-size: 1.8em;
|
||
letter-spacing: 4px;
|
||
```
|
||
|
||
#### 边框选择
|
||
|
||
```javascript
|
||
// 添加边框容器
|
||
opdata.container.append(`
|
||
<div class="brimg34" style="padding:2px;height:100%;">
|
||
<div id="map1" style="height:100%;"></div>
|
||
</div>
|
||
`);
|
||
|
||
// 或在HTML中定义
|
||
var chartHTML = `
|
||
<div class="brimg03" style="padding:10px;background:#00000011;">
|
||
<div style="pointer-events:none;min-width:180px;padding-left:1.5em;">
|
||
<span style="color:#fffffd;font-weight:bolder;letter-spacing:2px;">信贷团队统计</span>
|
||
</div>
|
||
<div id="chart1" style="height:100%;z-index:5;"></div>
|
||
</div>
|
||
`;
|
||
opdata.container.append(chartHTML);
|
||
```
|
||
|
||
#### 标题选择
|
||
|
||
```javascript
|
||
// 面板内部小标题
|
||
var titleHTML = `
|
||
<div style="pointer-events:none;min-width:180px;padding-left:1.5em;">
|
||
<span style="color:#fffffd;font-weight:bolder;letter-spacing:2px;">图表标题</span>
|
||
<div style="position:relative;margin-top:0.6em;">
|
||
<img src="/ud/bigscreen/tit/05.png" style="height:0.3em;display:block;">
|
||
<div style="position:absolute;left:12em;right:1.5em;border-bottom:0.05em solid #64ecf7;"></div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
opdata.container.append(titleHTML);
|
||
```
|
||
|
||
### 渐变文字效果
|
||
|
||
```javascript
|
||
// 标题渐变
|
||
var captionHTML = `
|
||
<div style="font-family:fnt01;position:absolute;top:0;left:0;right:0;z-index:10;">
|
||
<img src="/ud/bigscreen/caption/09-og.png" style="height:3.5em;margin:auto;display:block;" />
|
||
<div data-title style="min-width:50em;position:absolute;top:0;left:0;right:0;text-align:center;line-height:1.7em;font-size:2em;
|
||
background: linear-gradient(to bottom, #ffffff, #50c4eb 60%);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
color: transparent;">
|
||
大屏标题
|
||
</div>
|
||
</div>
|
||
`;
|
||
opdata.container.append(captionHTML);
|
||
```
|
||
|
||
### 使用全局缩放比例
|
||
|
||
```javascript
|
||
// 在所有尺寸计算中使用 Glob.bet
|
||
var option = {
|
||
textStyle: {
|
||
fontSize: Glob.fontsize
|
||
},
|
||
series: [{
|
||
itemStyle: {
|
||
borderRadius: 4 * Glob.bet,
|
||
borderWidth: 1 * Glob.bet
|
||
},
|
||
label: {
|
||
fontSize: 18 * Glob.bet,
|
||
padding: [18 * Glob.bet, 0, 8 * Glob.bet, 0]
|
||
},
|
||
labelLine: {
|
||
length: 20 * Glob.bet,
|
||
length2: 80 * Glob.bet
|
||
}
|
||
}]
|
||
};
|
||
|
||
// CSS样式
|
||
var style = document.createElement("style");
|
||
style.innerHTML = `
|
||
.bank1-c1__num {
|
||
font-size: 1.8em;
|
||
padding: 10px * ${Glob.bet};
|
||
}
|
||
`;
|
||
```
|
||
|
||
### 动画效果
|
||
|
||
```javascript
|
||
// 透明度动画
|
||
@keyframes opa {
|
||
0% { opacity: 1; }
|
||
10% { opacity: 0.5; }
|
||
20% { opacity: 1; }
|
||
}
|
||
|
||
.ani-fade {
|
||
animation: opa 5s infinite;
|
||
}
|
||
|
||
// ECharts自动高亮动画
|
||
var idx_autohight = -1;
|
||
var t_autohight = setInterval(function () {
|
||
var option = chart1.getOption();
|
||
chart1.dispatchAction({
|
||
type: 'downplay',
|
||
dataIndex: idx_autohight
|
||
});
|
||
idx_autohight = (idx_autohight + 1) % option.series[0].data.length;
|
||
chart1.dispatchAction({
|
||
type: 'highlight',
|
||
dataIndex: idx_autohight
|
||
});
|
||
}, 2200);
|
||
|
||
// 记得在 distory() 中清理
|
||
this.distory = function () {
|
||
clearInterval(t_autohight);
|
||
if (chart1) chart1.dispose();
|
||
}
|
||
```
|
||
|
||
### 弹窗样式
|
||
|
||
```javascript
|
||
// 弹窗样式
|
||
var style = document.createElement("style");
|
||
style.innerHTML = `
|
||
.popup-box {
|
||
position: absolute;
|
||
z-index: 999;
|
||
transform: translateX(calc(-50%)) translateY(calc(-100% + 4px));
|
||
pointer-events: none;
|
||
transition: all 0.5s;
|
||
opacity: 0;
|
||
}
|
||
.popup-box > .box {
|
||
border: 1px solid #6d8ef4;
|
||
background: linear-gradient(344deg, #0753b2, #05254e);
|
||
border-radius: 0.5em;
|
||
padding: 0.5em;
|
||
white-space: nowrap;
|
||
color: #ffffff;
|
||
pointer-events: all;
|
||
}
|
||
.popup-box > .line {
|
||
height: 3em;
|
||
width: 1px;
|
||
margin: auto;
|
||
border-left: 1px solid #0753b2;
|
||
}
|
||
.popup-box > .rlc {
|
||
width: 7px;
|
||
height: 7px;
|
||
background: #0753b2;
|
||
margin: auto;
|
||
border-radius: 4px;
|
||
}
|
||
`;
|
||
window.document.head.appendChild(style);
|
||
```
|
||
|
||
### 性能优化建议
|
||
|
||
1. **减少重复初始化**
|
||
```javascript
|
||
this.setdata = function (funame, data) {
|
||
if (ce) return; // 地图只初始化一次
|
||
if (chart1) return; // 图表只初始化一次
|
||
// ...初始化代码
|
||
}
|
||
```
|
||
|
||
2. **使用事件委托**
|
||
```javascript
|
||
// 不推荐
|
||
$5('.item').on('click', function() {
|
||
// ...
|
||
});
|
||
|
||
// 推荐
|
||
opdata.container.on('click', '.item', function() {
|
||
// ...
|
||
});
|
||
```
|
||
|
||
3. **及时清理资源**
|
||
```javascript
|
||
this.distory = function () {
|
||
clearInterval(t_autohight);
|
||
if (chart1) chart1.dispose();
|
||
if (cyc) cyc.distory();
|
||
if (ce) ce.destroy();
|
||
// 移除动态添加的样式
|
||
if (thos.style) thos.style.remove();
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 总结
|
||
|
||
Ciyon数据大屏系统采用**组件化**、**模块化**的设计理念：
|
||
|
||
✅ **优点**：
|
||
- 组件独立开发，易于维护
|
||
- 数据轮询自动化
|
||
- 屏幕自适应
|
||
- 支持多种可视化类型
|
||
- 丰富的CSS资源库（73个样式类 + 15种字体）
|
||
|
||
📌 **核心要点**：
|
||
1. 遵循命名规范（文件、接口、方法、CSS类名）
|
||
2. 实现三个核心方法：`setdata()`、`resize()`、`distory()`
|
||
3. 合理设置刷新频率，避免性能问题
|
||
4. 及时清理资源，防止内存泄漏
|
||
5. 使用BEM命名法避免CSS冲突
|
||
6. 充分利用bigscreen资源库（字体、边框、标题）
|
||
7. 使用 `Glob.bet` 实现屏幕自适应
|
||
|
||
🎨 **资源使用建议**：
|
||
- 字体：`fnt01`（大标题）、`eng02`（数字）
|
||
- 背景：`bd04`（现代海蓝色）
|
||
- 边框：`brimg34`（常用）、`brimg03`（薄边框）
|
||
- 标题：`cap09`（带倒影）、`cap02`（简洁）
|
||
|
||
🔧 **API核心**：
|
||
- `ciyclass.bigpanel` - 面板管理
|
||
- `ciyfn.big_setbetsize()` - 屏幕缩放
|
||
- `ciyfn.big_resolution()` - 分辨率检查
|
||
- `ciyclass.bigcychange` - 值循环切换
|
||
|
||
---
|
||
|
||
**版本**：v2.0
|
||
**更新时间**：2026-03-15
|
||
**维护团队**：Ciyon开发团队 |