AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

漏刻有时数据可视化大屏引导页设计（php原生开发、主背景图片更换、标题设置）

2023-07-25 402
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 漏刻有时数据可视化大屏引导页设计（php原生开发、主背景图片更换、标题设置）

在制作数据可视化大屏时，尤其是在触摸屏演示时，需要开发和设计对应的数据大屏引导页。基于常见场景，单独开发数据大屏引导页。

  1. 前端可自行配置大屏引导页背景图、标题信息；
  2. 前端可自行引导菜单（根据大屏的特殊要求，案例菜单最多6个，最少1个）；
  3. 基于php原生代码开发，未使用任何模版引擎；
  4. 适合于菜鸟入门使用；


1.引入外部js库

项目使用到layui.js的图标和弹窗功能，因此作为常备js库引入页面；其他都外部文件为项目自定义文件。

 <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/functions.js"></script>
    <!--layui封装库-->
    <script src="js/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <!--核心样式表-->
    <link rel="stylesheet" href="css/common.css">

2.HTML排版

  • 为实现大屏背景的自行配置，body的背景css直接写在了页面中，通过style="background: #0a0d26 url('./images/mainbg1.jpg')进行代码的切换。
<body style="background: #0a0d26 url('./images/mainbg1.jpg') no-repeat top center; ">
<div class="panel">
    <div class="title">
        <p>科为数据可视化服务中心</p>
        <p>Kewei Data Visualization Service Center</p>
    </div>
    <div class="guid_menu">
                                <a href="https://www.baidu.com/"><div class="subMenu sub_bg1">
                <p><i class="layui-icon layui-icon-website"></i></p>
                <p>数据中心</p>
                <p>Kewei Service</p>
            </div></a>
                                <a href="https://www.baidu.com/"><div class="subMenu sub_bg2">
                <p><i class="layui-icon layui-icon-upload-drag"></i></p>
                <p>用户中心</p>
                <p>Kewei Service</p>
            </div></a>
                                <a href="https://www.baidu.com/"><div class="subMenu sub_bg3">
                <p><i class="layui-icon layui-icon-user"></i></p>
                <p>后台管理</p>
                <p>Kewei Service</p>
            </div></a>
                                <a href="https://www.baidu.com/"><div class="subMenu sub_bg4">
                <p><i class="layui-icon layui-icon-set"></i></p>
                <p>服务支持</p>
                <p>Kewei Service</p>
            </div></a>
                                <a href="https://www.baidu.com/"><div class="subMenu sub_bg5">
                <p><i class="layui-icon layui-icon-app"></i></p>
                <p>产品概况</p>
                <p>Kewei Service</p>
            </div></a>
                                <a href="https://www.baidu.com/"><div class="subMenu sub_bg6">
                <p><i class="layui-icon layui-icon-tabs"></i></p>
                <p>城市管理</p>
                <p>Kewei Service</p>
            </div></a>
            </div>
</div>


3.项目配置文件

项目配置文件位置:conf/config.php。初始代码如下，可以通过表单进行全局更新。

<?php return [
    'sys_title' => '数据可视化服务中心',
    'sys_title_en' => 'Data Visualization Service Center',
    'sys_bg_img' => './images/mainbg3.jpg',
    'links' => [
        ['title' => '数据中心', 'links' => 'http://www.baidu.com/'],
        ['title' => '用户中心', 'links' => 'http://www.baidu.com/'],
        ['title' => '后台管理', 'links' => 'http://www.baidu.com/'],
        ['title' => '服务支持', 'links' => 'http://www.baidu.com/'],
        ['title' => '产品概况', 'links' => 'http://www.baidu.com/'],
        ['title' => '智慧城市', 'links' => 'http://www.baidu.com/']
    ]
];


4.菜单图标自动匹配

通过循环配置文件conf/config.php中’links’数据，来判断不同菜单的坐标显示方式。

function getIcon($num)
{
    switch ($num) {
        case 1:
            echo 'layui-icon-website';
            break;
        case 2:
            echo 'layui-icon-upload-drag';
            break;
        case 3:
            echo 'layui-icon-user';
            break;
        case 4:
            echo 'layui-icon-set';
            break;
        case 5:
            echo 'layui-icon-app';
            break;
        case 6:
            echo 'layui-icon-tabs';
            break;
        default:
            echo 'layui-icon-website';
    }
}


5.php与html混排

示例代码为生产环境下，php和 html共同作用展示项目内容。

<body style="background: #0a0d26 url('<?php echo $DATA['sys_bg_img'] ?>') no-repeat top center; ">
<div class="panel">
    <div class="title">
        <p><?php echo $DATA['sys_title'] ?></p>
        <p><?php echo $DATA['sys_title_en'] ?></p>
    </div>
    <div class="guid_menu">
        <?php for ($i = 0; $i < count($DATA['links']); $i++) { ?>
            <?php if ($DATA['links'][$i]['title'] !="" && $DATA['links'][$i]['links'] !="") {?>
            <a href="<?php echo $DATA['links'][$i]['links'] ?>"><div class="subMenu sub_bg<?php echo ($i + 1) ?>">
                <p><i class="layui-icon <?php getIcon(($i + 1)) ?>"></i></p>
                <p><?php echo $DATA['links'][$i]['title'] ?></p>
                <p>Kewei Service</p>
            </div></a>
        <?php }} ?>
    </div>
    <div class="copyright"><p><span onclick="getZoomUrl('导航链接', 'links.php', '', '', '')"><i class="layui-icon layui-icon-component"></i> </span>  备案号：<a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备2022021238号-2</a> </p></div>
</div>


6.CSS样式表

主要是导航菜单的CSS

/*导航菜单*/
.guid_menu {
    text-align: center;
    margin: 5% 0 10% 0;
    width: 100%;
}
.subMenu {
    display: inline-block;
    color: #fff;
    text-align: center;
    padding: 2%;
    margin: 0 1%;
    border-radius: 5%;
}
.sub_bg1 {
    background-image: linear-gradient(-120deg, #c8d138, #51933b);
}
.sub_bg2 {
    background-image: linear-gradient(-120deg, #31c9a3, #107392);
}
.sub_bg3 {
    background-image: linear-gradient(-120deg, #4ccaf3, #326eea);
}
.sub_bg4 {
    background-image: linear-gradient(-120deg, #4a8fea, #1749bc);
}
.sub_bg5 {
    background-image: linear-gradient(-120deg, #5451e8, #611eb9);
}
.sub_bg6 {
    background-image: linear-gradient(-120deg, #bb3a8c, #ba6e3d);
}
.subMenu:hover {
    background: #cc0058;
    cursor: pointer;
}
.subMenu > p {
    margin: 8px 0;
    font-family: "宋体";
}
.subMenu > p:first-child > i {
    font-size: 26px;
}
.subMenu > p:nth-child(2) {
    font-size: 18px;
    font-weight: bold;
}
.subMenu > p:nth-child(3) {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-family: "Arial";
}


7.添加/编辑信息

<div class="layui-fluid" style="margin-top: 20px;">
    <form class="layui-form layui-form-pane" lay-filter="component-form-group">
        <div class="layui-card">
            <div class="layui-card-header" style="font-weight: bold;text-align: center;">导航链接配置</div>
            <div class="layui-card-body" style="padding: 15px;">
                <div class="layui-form-item">
                    <label class="layui-form-label">系统标题<span class="x-red">*</span></label>
                    <div class="layui-input-inline"><input type="text" id="sys_title" name="sys_title" autocomplete="off" lay-verify="required" class="layui-input" value="科为数据可视化服务中心"></div>
                    <label class="layui-form-label">英文标题<span class="x-red">*</span></label>
                    <div class="layui-input-inline"><input type="text" id="sys_title_en" name="sys_title_en" autocomplete="off" lay-verify="required" class="layui-input" value="Kewei Data Visualization Service Center"></div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">背景图片<span class="x-red">*</span></label>
                    <div class="layui-input-inline">
                        <select name="sys_bg_img" id="sys_bg_img" class="layui-select">
                            <option value="./images/mainbg1.jpg" selected>mainbg1.jpg</option>
                            <option value="./images/mainbg2.jpg" >mainbg2.jpg</option>
                            <option value="./images/mainbg3.jpg" >mainbg3.jpg</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">链接名称1<span class="x-red">*</span></label>
                    <div class="layui-input-inline"><input type="text" id="title1" name="title1" autocomplete="off" lay-verify="required" class="layui-input" value="数据中心"></div>
                    <label class="layui-form-label">链接地址1<span class="x-red">*</span></label>
                    <div class="layui-input-inline"><input type="text" id="links1" name="links1" autocomplete="off" lay-verify="required" class="layui-input" value="https://www.baidu.com/"></div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">链接名称2</label>
                    <div class="layui-input-inline"><input type="text" id="title2" name="title2" autocomplete="off" class="layui-input" value="用户中心"></div>
                    <label class="layui-form-label">链接地址2</label>
                    <div class="layui-input-inline"><input type="text" id="links2" name="links2" autocomplete="off" class="layui-input" value="https://www.baidu.com/"></div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">链接名称3</label>
                    <div class="layui-input-inline"><input type="text" id="title3" name="title3" autocomplete="off" class="layui-input" value="后台管理"></div>
                    <label class="layui-form-label">链接地址3</label>
                    <div class="layui-input-inline"><input type="text" id="links3" name="links3" autocomplete="off" class="layui-input" value="https://www.baidu.com/"></div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">链接名称4</label>
                    <div class="layui-input-inline"><input type="text" id="title4" name="title4" autocomplete="off" class="layui-input" value="服务支持"></div>
                    <label class="layui-form-label">链接地址4</label>
                    <div class="layui-input-inline"><input type="text" id="links4" name="links4" autocomplete="off" class="layui-input" value="https://www.baidu.com/"></div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">链接名称5</label>
                    <div class="layui-input-inline"><input type="text" id="title5" name="title5" autocomplete="off" class="layui-input" value="产品概况"></div>
                    <label class="layui-form-label">链接地址5</label>
                    <div class="layui-input-inline"><input type="text" id="links5" name="links5" autocomplete="off" class="layui-input" value="https://www.baidu.com/"></div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">链接名称6</label>
                    <div class="layui-input-inline"><input type="text" id="title6" name="title6" autocomplete="off" class="layui-input" value="城市管理"></div>
                    <label class="layui-form-label">链接地址6</label>
                    <div class="layui-input-inline"><input type="text" id="links6" name="links6" autocomplete="off" class="layui-input" value="https://www.baidu.com/"></div>
                </div>
                <div class="layui-form-item">
                    <a class="layui-btn layui-btn-fluid layui-btn-normal" lay-filter="save" id="L_add" lay-submit=""><i class="layui-icon layui-icon-search"></i> 确定配置 </a>
                </div>
            </div>
        </div>
    </form>
</div>


8.生成配置文件

$act = $_GET['act'];
if ($act == "annual") {
    $sys_title = $_POST['sys_title'];
    $sys_title_en = $_POST['sys_title_en'];
    $sys_bg_img = $_POST['sys_bg_img'];
    $title1 = $_POST['title1'];
    $links1 = $_POST['links1'];
    $title2 = $_POST['title2'];
    $links2 = $_POST['links2'];
    $title3 = $_POST['title3'];
    $links3 = $_POST['links3'];
    $title4 = $_POST['title4'];
    $links4 = $_POST['links4'];
    $title5 = $_POST['title5'];
    $links5 = $_POST['links5'];
    $title6 = $_POST['title6'];
    $links6 = $_POST['links6'];
    //生成数据分表的配置文件config.sys.php
    $config_table = "<?php return [
    'sys_title' => '" . $sys_title . "',
    'sys_title_en' => '" . $sys_title_en . "',
    'sys_bg_img' => '" . $sys_bg_img . "',
    'links' => [
        ['title' => '" . $title1 . "','links' =>'" . $links1 . "'],
        ['title' => '" . $title2 . "','links' =>'" . $links2 . "'],
        ['title' => '" . $title3 . "','links' =>'" . $links3 . "'],
        ['title' => '" . $title4 . "','links' =>'" . $links4 . "'],
        ['title' => '" . $title5 . "','links' =>'" . $links5 . "'],
        ['title' => '" . $title6 . "','links' =>'" . $links6 . "']
        ]
    ];";
    //对应文件夹具备权限;
    @file_put_contents('conf/config.php', $config_table);
    $res['code'] = 1;
    $res['msg'] = "配置成功";
    die(json_encode($res));


@漏刻有时

文章标签：
JavaScript
PHP
前端开发
数据可视化
关键词：
PHP开发
PHP原生
PHP原生开发
PHP设置
数据可视化PHP
漏刻有时
目录
相关文章
API小知识
|
数据采集 存储 缓存
PHP爬虫的使用与开发
本文深入探讨了PHP爬虫的使用与开发，涵盖基本原理、关键技术、开发实践及优化策略。从发送HTTP请求、解析HTML到数据存储，再到处理反爬机制，全面指导读者构建高效可靠的爬虫程序。
API小知识
378 3
代码bug生产队
|
11月前
|
安全 PHP
PHP 8 新特性实战：提升开发效率的利器
PHP 8 新特性实战：提升开发效率的利器
代码bug生产队
296 87
代码bug生产队
|
11月前
|
安全 PHP
PHP 8 新特性实战：提升开发效率的利器
PHP 8 新特性实战：提升开发效率的利器
代码bug生产队
347 88
代码bug生产队
|
11月前
|
安全 编译器 PHP
PHP 8 新特性：现代开发的强力引擎
PHP 8 新特性：现代开发的强力引擎
代码bug生产队
305 89
代码bug生产队
|
11月前
|
安全 编译器 PHP
PHP 8 新特性：现代化开发的飞跃
PHP 8 新特性：现代化开发的飞跃
代码bug生产队
425 89
代码bug生产队
|
11月前
|
安全 大数据 PHP
PHP 7+ 新特性实战指南：提升开发效率
PHP 7+ 新特性实战指南：提升开发效率
代码bug生产队
298 87
游客4v3gpgavlizks
|
9月前
|
消息中间件 人工智能 Java
抖音微信爆款小游戏大全：免费休闲/竞技/益智/PHP+Java全筏开源开发
本文基于2025年最新行业数据，深入解析抖音/微信爆款小游戏的开发逻辑，重点讲解PHP+Java双引擎架构实战，涵盖技术选型、架构设计、性能优化与开源生态，提供完整开源工具链，助力开发者从理论到落地打造高留存、高并发的小游戏产品。
游客4v3gpgavlizks
1622 1
卓伊凡
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗？-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗？-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
卓伊凡
763 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗？-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
ly~
|
存储 供应链 小程序
除了微信小程序，PHP 还可以用于开发哪些类型的小程序？
除了微信小程序，PHP 还可用于开发多种类型的小程序，包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域，PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时，在企业内部，PHP 可提升工作效率，实现审批流程、文件共享、生产计划等功能；在医疗和教育等行业，PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
519 6
miadk
|
存储 消息中间件 前端开发
PHP后端与uni-app前端协同的校园圈子系统：校园社交场景的跨端开发实践
校园圈子系统校园论坛小程序采用uni-app前端框架，支持多端运行，结合PHP后端（如ThinkPHP/Laravel），实现用户认证、社交关系管理、动态发布与实时聊天功能。前端通过组件化开发和uni.request与后端交互，后端提供RESTful API处理业务逻辑并存储数据于MySQL。同时引入Redis缓存热点数据，RabbitMQ处理异步任务，优化系统性能。核心功能包括JWT身份验证、好友系统、WebSocket实时聊天及活动管理，确保高效稳定的用户体验。
miadk
717 4
PHP后端与uni-app前端协同的校园圈子系统：校园社交场景的跨端开发实践

热门文章

最新文章

  • 1
    PHP的数组最多可以容纳多少个元素？底层原理是什么？
  • 2
    php缓冲区与header函数之间的秘密
  • 3
    php 即使客户端或者服务器断开(如关掉浏览器)脚本也可以继续执行
  • 4
    公司官网建站笔记（二）：在云服务器部署PHP服务（公网访问首页
  • 5
    PHP对大小写敏感问题的处理比较乱，写代码时可能偶尔出问题，所以这里总结一下。以便用到的出现错误
  • 6
    PHPExcel在高版本PHP7中，Writer-&gt;save出现ERR_INVALID_RESPONSE错误的解决方法
  • 7
    MongoDB在Windows系统下的安装 以及让PHP扩展支持MongoDB
  • 8
    PHP对比两个数据中不同的元素
  • 9
    CentOS6.4 安装 PHP
  • 10
    VSCode插件 code runner执行PHP,JavaScript,Python
  • 1
    深入理解PHP的垃圾回收机制
    194
  • 2
    Pikachu PHP 反序列化通关解析
    665
  • 3
    PHP中的异常处理：深入理解与实践
    207
  • 4
    PHP中的异常处理：深入理解try-catch语句
    439
  • 5
    PHP的生命周期：从诞生到现代Web开发
    251
  • 6
    深入理解PHP中的异常处理
    163
  • 7
    探索PHP中的闭包和匿名函数
    164
  • 8
    深入理解PHP中的异常处理机制
    146
  • 9
    构建未来：云原生技术在企业数字化转型中的关键作用深入理解PHP中的命名空间
    221
  • 10
    深入理解PHP的命名空间与自动加载机制
    203

    • 相关课程

    更多
  • PHP进阶教程 - 由浅入深掌握面向对象开发 - 第二阶段
  • PHP完全自学手册文档教程

    • 相关电子书

    更多
  • PHP安全开发:从白帽角度做安全
  • PHP 2017.北京 全球开发者大会——高可用的PHP
  • 复杂PHP系统性能瓶颈排查及优化
    • 下一篇
    小红书笔记详情API深度解析与实战指南（2025年最新版）