当前位置：首页 > news >正文

DataGear结合AI工具制作多端适配的数据看板

news 2025/7/10 3:16:03

DataGear的数据看板采用原生HTML作为模板，可以直接导入HTML网页，可以在看板设计时直接粘贴HTML代码，因而可以结合AI工具生成HTML代码，快速制作多端适配的数据看板。

本文将使用阿里的通义（https://tongyi.aliyun.com/）AI工具，生成一个支持移动端、平板端、PC端的，且支持实时显示当前日期时间的HTML代码，然后使用这个HTML代码，在DataGear中制作数据看板。

首先，注册并登录通义AI工具，点击下面对话框中的代码模式按钮，然后在输入框里分三次输入下面的提示词，生成HTML代码：

第一个：

写一个html页面，包含一个两行一列的网格布局，填满整个屏幕，第一行填写“看板”，自适应内容高度，第二行填满剩余高度

第二个：

在这个页面第二行里插入一个三行三列的网格布局，网格条目里留空，支持移动端、平板端、PC端，在移动端时按一列布局，在平板端时按两列布局，在PC端时按三列布局，在移动端、平板端每行高度设为300像素，在PC端每行均分高度

第三个：

在这个页面右上角实时显示当前日期时间，在移动端时不显示

最终，将生成如下HTML代码（可能略有不同）：


<!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>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: Arial, sans-serif;
        }
        .container {
            display: grid;
            grid-template-rows: auto 1fr;
            height: 100vh;
            position: relative;
        }
        .header {
            background-color: #f0f0f0;
            padding: 20px;
            text-align: center;
            position: relative;
        }
        .content {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
            padding: 20px;
        }
        .grid-item {
            background-color: #ffffff;
            border: 1px solid #ccc;
            height: 300px; /* 移动端和平板端每行高度 */
        }

        @media (min-width: 768px) {
            .content {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (min-width: 1024px) {
            .content {
                grid-template-columns: repeat(3, 1fr);
                grid-auto-rows: minmax(auto, 1fr); /* PC端每行均分高度 */
            }
            .grid-item {
                height: auto; /* 取消固定高度以便均分 */
            }
        }

        .datetime {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 14px;
            color: #333;
        }

        @media (max-width: 767px) {
            .datetime {
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            看板
            <div id="datetime" class="datetime"></div>
        </div>
        <div class="content">
            <div class="grid-item"></div>
            <div class="grid-item"></div>
            <div class="grid-item"></div>
            <div class="grid-item"></div>
            <div class="grid-item"></div>
            <div class="grid-item"></div>
            <div class="grid-item"></div>
            <div class="grid-item"></div>
            <div class="grid-item"></div>
        </div>
    </div>

    <script>
        function updateDateTime() {
            const now = new Date();
            const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' };
            document.getElementById('datetime').textContent = now.toLocaleDateString('zh-CN', options);
        }

        setInterval(updateDateTime, 1000);
        updateDateTime(); // 初始化调用
    </script>
</body>
</html>

然后，在DataGear里新建一个看板，点击【保存并设计】打开设计页面，在index.html页签内的【源码模式】编辑区内粘贴上述由AI生成的HTML代码，点击可视模式切换到可视编辑模式，依次点击选中页面中的网格条目，点击【插入】-【内部后置插入】-【图表（选择）】，插入已建立好的图表。

至此，一个支持移动端、平板端、PC端的简单数据看板制作完成！

各端效果图如下：

移动端：

在这里插入图片描述
平板端：