前端列表数据含图片

最新推荐文章于 2024-05-09 11:32:07 发布

_半夏曲

最新推荐文章于 2024-05-09 11:32:07 发布

阅读量402

点赞数 10

分类专栏： pacs 文章标签：前端

本文链接：https://blog.csdn.net/qq_46135702/article/details/134787396

版权

pacs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

数据：{ "total": 1, "rows": [ { "imagesUuid": "76c7653a-3a7b3589-cfd2edb4-5d8affd4-481135bc", "seriesNumber": null, "imagesNum": null, "modality": "OT", "seriesDescription": null, "acquisitionTime": null, "bodyPartExamined": null, "manufacturer": null, "labels": null, "singleImageMultiFrameState": false } ], "code": 200, "msg": "查询成功" }，实现列表展示，并并根据studyUuid去调用http://lcoalhsot:8000//{studyUuid}/images接口，此接口返回数据为return ResponseEntity.ok() .contentLength(response.getBody().length) .contentType(MediaType.IMAGE_PNG) .body(resource);，在列表同一列展示图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据列表</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>数据列表</h1>
    <table id="medicalData">
        <tr>
            <th>Images UUID</th>
            <th>Modality</th>
            <th>Series Description</th>
            <th>Acquisition Time</th>
            <th>Body Part Examined</th>
            <th>Manufacturer</th>
            <th>Labels</th>
            <th>Image</th>
        </tr>
    </table>

    <script>
        // 模拟获取数据
        const data = {
            "total": 1,
            "rows": [
                {
                    "imagesUuid": "76c7653a-3a7b3589-cfd2edb4-5d8affd4-481135bc",
                    "seriesNumber": null,
                    "imagesNum": null,
                    "modality": "OT",
                    "seriesDescription": null,
                    "acquisitionTime": null,
                    "bodyPartExamined": null,
                    "manufacturer": null,
                    "labels": null,
                    "singleImageMultiFrameState": false
                }
            ],
            "code": 200,
            "msg": "查询成功"
        };

        const table = document.getElementById('medicalData');

        // 遍历数据并添加到表格中
        data.rows.forEach(rowData => {
            const row = table.insertRow(-1);
            row.insertCell(0).innerHTML = rowData.imagesUuid;
            row.insertCell(1).innerHTML = rowData.modality;
            row.insertCell(2).innerHTML = rowData.seriesDescription || '';
            row.insertCell(3).innerHTML = rowData.acquisitionTime || '';
            row.insertCell(4).innerHTML = rowData.bodyPartExamined || '';
            row.insertCell(5).innerHTML = rowData.manufacturer || '';
            row.insertCell(6).innerHTML = rowData.labels || '';

            // 创建图片元素并添加到表格中
            const imgCell = row.insertCell(7);
            const img = new Image();
            img.src = `http://10.151.110.180:8000/dicom/instances/${rowData.imagesUuid}/images`;
            img.alt = 'Medical Image';
            img.width = 200; // 设定图片的宽度，根据需要进行调整
            img.height = 200; // 设定图片的高度，根据需要进行调整
            imgCell.appendChild(img);
        });
    </script>
</body>
</html>

实现效果：

若data数据为获取接口，则代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>医学影像数据列表</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>医学影像数据列表</h1>
    <table id="medicalData">
        <tr>
            <th>Images UUID</th>
            <th>Modality</th>
            <th>Series Description</th>
            <th>Acquisition Time</th>
            <th>Body Part Examined</th>
            <th>Manufacturer</th>
            <th>Labels</th>
            <th>Image</th>
        </tr>
    </table>

    <script>
        const url = 'http://localhsot:8000/9b56c284-aed1ee30-041e9bb3-90f672a6-f75cdb8a/series';

        fetch(url)
            .then(response => response.json())
            .then(data => {
                const table = document.getElementById('medicalData');

                // 遍历数据并添加到表格中
                data.rows.forEach(rowData => {
                    const row = table.insertRow(-1);
                    row.insertCell(0).innerHTML = rowData.imagesUuid;
                    row.insertCell(1).innerHTML = rowData.modality;
                    row.insertCell(2).innerHTML = rowData.seriesDescription || '';
                    row.insertCell(3).innerHTML = rowData.acquisitionTime || '';
                    row.insertCell(4).innerHTML = rowData.bodyPartExamined || '';
                    row.insertCell(5).innerHTML = rowData.manufacturer || '';
                    row.insertCell(6).innerHTML = rowData.labels || '';

                    // 创建图片元素并添加到表格中
                    const imgCell = row.insertCell(7);
                    const img = new Image();
                    img.src = `http://localhsot:8000/${rowData.imagesUuid}/images`;
                    img.alt = 'Medical Image';
                    img.width = 200; // 设定图片的宽度，根据需要进行调整
                    img.height = 200; // 设定图片的高度，根据需要进行调整
                    imgCell.appendChild(img);
                });
            })
            .catch(error => console.error(error));
    </script>
</body>
</html>

实现效果：