简介 #
本文介绍如何将已有的静态模板转化为 SmartChart 可用的仪表盘。支持两种方式：AI 辅助生成模板和手动迁移静态模板，适用于已有 HTML/CSS/JS 大屏基础的开发者。
应用场景 #
- 已有开发好的非smartchart静态大屏模板
- 如果你已购买专业版本, 可联系客服提供100+静态大屏模板
- 对js, css及smartchart使用方法已有初步了解
- 业务需求展示有合适的模板, 变化可能性不大
AI模板 #
提示词参考如下 #
请基于我的需求生成一个静态模板，要求html,
demo数据请用带表头的二维数组格式，如：let df0=[['head1','head2'],['val1','val2']]
如涉及到保存数据，请把要提交的数据整理成JSON格式，如:let dataset={'name1':'value1','name2':'value2'}格式
### 以下是我的需求：
$prompt
转化方法 #
- 直接将生成的html复制到仪表盘的模板中，点击保存后重新打开模板
- 会自动整体移到{%block footer%}{%endblock%}中，结构如下：
{%block footer%}
<script>
let ds=ds_refresh(0,null,'list');
let EQUIPMENT_LIST=ds.df0;
let MAINTENANCE_RECORDS=ds.df1;
....
</script>
{%endblock%}
- 只需要新建懒加载数据集，将生成demo数据用ds_refresh(数据集序号,null,’list’) 替换即可
你也可以先新建0号数据集，可以写入多段查询，然后把查询出来的数据，直接粘给AI让他自由发挥展示方式
请基于我的需求生成一个静态模板，要求html,我的demo数据如下：
let ds={df0:[[]],df1:[[]],...}
### 以下是我的需求：
$prompt
Skill安装 #
你也可以安装smartchart的skill来生成静态模板
安装方法 #
在技能市场中搜索 SmartChart，然后点击“安装”。 或将提示词发送给你的 AI 安装该 skills：
请根据 https://skillhub.cn/install/skillhub.md，安装 @indiv-smartchart/smartchart。
将生成好的html直接贴入模板中即可直接使用，实现分钟级完成开发。
Workbuddy测试 #
静态模板 #
你也可以使用前端已开发好的静态模板
- 准备好静态大屏模板, 将css, img, js等文件或文件夹打包
- 打开静态大屏模板, 一般是index.html, 右键查看网页源码
转化步骤【方法比较老，参考即可，推荐直接AI的方式】 #
模板迁移 #
- 新建仪表盘,打开模板
- 在模板中上传打包的资源文件
- 复制静态大屏网页源码中的head区间中的内容到模板对应的位置
- 复制静态大屏网页源码中的body区间中的内容到模板对应的位置
- 复制静态大屏网页源码中的script区间中的内容到模板对应的位置
- 移除script中的关于jquery, echarts的引用
- 替换相关的资源文件地址的引用
- 逐步按照图形块,在 body 中进行替换
以上过程建意观看视屏
数据集与图形转化 #
- 此过程与常规smartchart图形开发一致,建意学习第2/3 章节
- 模板开发操作相关, 请学习第6章节–>低代码开发
- 转化后的效果参考视屏