zhzn
/
WindDataTrans


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据导入</title>
    <!-- Bootstrap 5 CSS -->
    <link href="./static/bootstrap.min.css" rel="stylesheet">
    <style>
        .data-block {
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            margin-bottom: 20px;
            color: #fff; /* 文字颜色为白色 */
        }

        .data-block h3 {
            margin-bottom: 10px;
            font-size: 1.5rem;
        }

        .data-block p {
            font-size: 1.2rem;
        }

        /* 为每个数据块设置不同的背景颜色 */
        .data-block.success {
            background-color: #28a745; /* 绿色 */
        }

        .data-block.info {
            background-color: #17a2b8; /* 青色 */
        }

        .data-block.warning {
            background-color: #dc3545; /* 红色 */
        }

        .filter-section {
            margin-bottom: 20px;
        }

        .filter-section .form-control {
            margin-right: 10px;
        }

        .add-button {
            float: right;
        }
    </style>
</head>
<body>
<div class="container mt-5">
    <!-- 标题 -->
    <h1 class="text-center mb-4">数据导入及转化</h1>

    <!-- 数据块 -->
    <div class="row">
        <div class="col-md-4">
            <div class="data-block info">
                <h3>数据入库风场统计(个)</h3>
                <p>25</p>
            </div>
        </div>

        <div class="col-md-4">
            <div class="data-block success">
                <h3>转换成功任务数量(个)</h3>
                <p>150/200</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="data-block warning">
                <h3>转换失败任务数量(个)</h3>
                <p>49</p>
            </div>
        </div>
    </div>

    <br>
    <br>
    <br>
    <br>

    <!-- 筛选框和新增按钮 -->
    <div class="filter-section">
        <div class="row align-items-center">
            <div class="col-md-3">
                <select class="form-control">
                    <option>选择风场</option>
                    <option>风场A</option>
                    <option>风场B</option>
                    <option>风场C</option>
                </select>
            </div>
            <div class="col-md-3">
                <select class="form-control">
                    <option>选择转化类型</option>
                    <option>类型A</option>
                    <option>类型B</option>
                    <option>类型C</option>
                </select>
            </div>
            <div class="col-md-3">
                <select class="form-control">
                    <option>选择转化状态</option>
                    <option>成功</option>
                    <option>失败</option>
                    <option>进行中</option>
                </select>
            </div>
            <div class="col-md-3">
                <button class="btn btn-primary w-100" data-bs-toggle="modal" data-bs-target="#addModal">新增转换
                </button>
            </div>
        </div>
    </div>

    <!-- 表格 -->
    <div class="table-responsive">
        <table class="table table-bordered table-hover">
            <thead>
            <tr>
                <th>风场名称</th>
                <th>任务名称</th>
                <th>转化类型</th>
                <th>转化状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <!-- 示例数据 -->
            <tr data-bs-toggle="collapse" data-bs-target="#row1" aria-expanded="false" aria-controls="row1">
                <td>张崾先风电场</td>
                <td>张崾先2024年10月到2024年12月分钟数据</td>
                <td>SCADA分钟</td>
                <td>转化完成</td>
                <td>
                    <!--                    <button class="btn btn-sm btn-primary">编辑</button>-->
                    <!--                    <button class="btn btn-sm btn-danger">删除</button>-->
                    <!--                    <button class="btn btn-sm btn-warning">重新转化</button>-->
                </td>
            </tr>
            <tr class="collapse" id="row1">
                <td colspan="5">
                    <div class="p-3">
                        <p><strong>风场编号:</strong> 001</p>
                        <p><strong>风场名称:</strong> 张崾先风电场</p>
                        <p><strong>任务名称:</strong> 张崾先2024年10月到2024年12月分钟数据</p>
                        <p><strong>收资人:</strong> 魏志亮</p>
                        <p><strong>原始数据读取路径:</strong> /data/download/collection_data/1进行中/张崾先风电场-陕西-华电/收资数据/sec</p>
                        <p><strong>标准化数据保存保存路径:</strong> 归档地址</p>
                        <p><strong>时间跨度:</strong> 2024-10-01 00:00:00 ~ 2024-12-31 23:50:00</p>
                        <p><strong>时间颗粒度(秒):</strong> 600</p>
                    </div>
                </td>
            </tr>
            <!-- 更多行数据 -->
            <tr data-bs-toggle="collapse" data-bs-target="#row2" aria-expanded="false" aria-controls="row2">
                <td>风场B</td>
                <td>任务2</td>
                <td>SCADA秒级</td>
                <td>转化失败</td>
                <td>
                    <button class="btn btn-sm btn-primary">编辑</button>
                    <button class="btn btn-sm btn-danger">删除</button>
                    <button class="btn btn-sm btn-warning">重新转化</button>
                </td>
            </tr>
            <tr class="collapse" id="row2">
                <td colspan="5">
                    <div class="p-3">
                        <p><strong>风场编号:</strong> 002</p>
                        <p><strong>风场名称:</strong> 风场B</p>
                        <p><strong>任务名称:</strong> 任务2</p>
                        <p><strong>收资人:</strong> 魏志亮</p>
                        <p><strong>读取路径:</strong> /path/to/data</p>
                        <p><strong>归档保存地址:</strong></p>
                        <p><strong>数据最小时间:</strong> 2024-10-01 00:00:00</p>
                        <p><strong>数据最大时间:</strong> 2024-12-31 23:59:59</p>
                        <p><strong>时间颗粒度(秒):</strong> 5</p>

                        <p><strong>失败原因:</strong> 因为测试所以失败</p>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <!-- 分页 -->
    <nav aria-label="Page navigation">
        <ul class="pagination justify-content-center">
            <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
            </li>
            <li class="page-item active"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item">
                <a class="page-link" href="#">下一页</a>
            </li>
        </ul>
    </nav>

    <!-- 新增转换弹窗 -->
    <div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addModalLabel">新增转换</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="mb-3">
                            <label for="taskName" class="form-label">任务名称</label>
                            <input type="text" class="form-control" id="taskName" placeholder="请输入任务名称">
                        </div>
                        <div class="mb-3">
                            <label for="windFarm" class="form-label">选择风场名称</label>
                            <select class="form-control" id="windFarm">
                                <option>风场A</option>
                                <option>风场B</option>
                                <option>风场C</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="convertType" class="form-label">选择转化类型</label>
                            <select class="form-control" id="convertType">
                                <option>类型A</option>
                                <option>类型B</option>
                                <option>类型C</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="readPath" class="form-label">选择读取路径</label>
                            <input type="text" class="form-control" id="readPath" placeholder="请输入读取路径">
                        </div>

                        <div class="mb-3">
                            <label for="dataCollector" class="form-label">收资人</label>
                            <input type="text" class="form-control" id="dataCollector" placeholder="">
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary">提交</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap 5 JS -->
<script src="./static/bootstrap.bundle.min.js"></script>
</body>
</html>