18.实验室列表

一、实验室列表页面的实现

 1.table标签

 完善剩下的内容

 

 实验室类型也是如上方法实现。

 2.tag标签

 

 3.预览功能的实现

3.1、link链接

 

 3.2、click点击绑定事件

 对可视化内容进行封装，再调用封装的组件

3.2、封装组件

1）在components文件夹中创建组件

 2）导入

在setup中导入组件即为注册成功

 3.4.再在组件中写需要的代码

现在暂时把数据写死

<template>
    <div style="min-height: 500px; justify-content: center;position: relative" id="map" />
</template>

<script setup>
import { onMounted } from "vue";
import { Scene, ImageLayer, PointLayer } from '@antv/l7';
import { Map } from '@antv/l7-maps';

let scene;
onMounted(() => {
    // 创建Scene场景
    scene = new Scene({
        id: 'map',
        map: new Map({
            // center中心坐标，很关键，将来这个中心坐标的位置就是500，500的这样一个位置。将来我们要靠它来计算我们的偏移量的。
            center: [500, 500],
            // zoom放大：现在是放大3倍
            zoom: 3,
            version: 'SIMPLE',
            mapSize: 1000,
            // 最大是5倍
            maxZoom: 5,
            // 最小是2倍
            minZoom: 2,
            pitchEnabled: false,
            // 旋转：禁用
            rotateEnabled: false
        })
    });
    // 设置背景颜色
    scene.setBgColor('rgb(94, 182, 140)');

    // 创建imagelayer图片场景
    const imagelayer = new ImageLayer({}).source(
        '/bg.jpg',
        {
            parser: {
                type: 'image',
                // 左下角它的一个坐标位置360✖400
                // 右上角的是640✖600
                extent: [360, 400, 640, 600]
            }
        }
    );
    scene.on('loaded', () => {
        addTextLayer([
            {
                x: 500,
                y: 500,
                t: "aaa"
            }
        ])
        scene.addLayer(imagelayer);

    });
})

const addTextLayer = (data) => {
    const textlayer = new PointLayer({ zIndex: 2 })
        .source(
            data,
            {
                parser: {
                    type: 'json',
                    x: 'x',
                    y: 'y'
                }
            }
        )
        .shape('t', 'text')
        .size(14)
        .active({
            color: '#00f',
            mix: 0.9
        })
        .color('rgb(13,71,161)')
        .style({
            textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
            spacing: 2, // 字符间距
            fontWeight: '800',
            padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
            stroke: '#ffffff', // 描边颜色
            strokeWidth: 2, // 描边宽度
            textAllowOverlap: true
        });
    scene.addLayer(textlayer);
}

</script>

<style>

</style>

3.5、nextTick

看到页面效果我们会发现这张图被压缩了失帧了。还是我们之前说过的问题就是dialog的DOM节点创建的问题，第一次它是创建，创建的时候我们的LabMap组件开始渲染，而组件里面算是有获取原生DOM的一个节点操作，那此时我们这个组件刚刚创建出来，它的宽度是不可获取的，我们可以使用获取一下原生DOM节点的一种方式强行的来获取它的clientWidth测试一下，看看能不能获取到此时的宽度。我们都知道组件里面的宽度是百分之百，因为我们没有设置宽度，但div默认是百分之百的。它能不能拿到组件外面的dialog呢，因为全屏就是百分之百的跟我们视口的宽度是一样的。它走onMounted的时候我们外面dialog组件是刚创建的，所以我们是拿不到的。

 

 我们之前也解决过，就是放在nextTick中去做这些初始化就表示等待我们你的都已经完成都结束了我们再进行next的调用这个方法，好在下一次开局的时候在调用它，那这样我们获取了这个宽度肯定就是我们此时视口的宽度了。

<template>
    <div style="min-height: 500px; justify-content: center;position: relative" id="map" />
</template>

<script setup>
import { onMounted, nextTick } from "vue";
import { Scene, ImageLayer, PointLayer } from '@antv/l7';
import { Map } from '@antv/l7-maps';

let scene;
onMounted(() => {
    nextTick(() => {
        // 创建Scene场景
        console.log(document.getElementById("map").clientWidth)
        scene = new Scene({
            id: 'map',
            map: new Map({
                // center中心坐标，很关键，将来这个中心坐标的位置就是500，500的这样一个位置。将来我们要靠它来计算我们的偏移量的。
                center: [500, 500],
                // zoom放大：现在是放大3倍
                zoom: 3,
                version: 'SIMPLE',
                mapSize: 1000,
                // 最大是5倍
                maxZoom: 5,
                // 最小是2倍
                minZoom: 2,
                pitchEnabled: false,
                // 旋转：禁用
                rotateEnabled: false
            })
        });
        // 设置背景颜色
        scene.setBgColor('rgb(94, 182, 140)');

        // 创建imagelayer图片场景
        const imagelayer = new ImageLayer({}).source(
            '/bg.jpg',
            {
                parser: {
                    type: 'image',
                    // 左下角它的一个坐标位置360✖400
                    // 右上角的是640✖600
                    extent: [360, 400, 640, 600]
                }
            }
        );
        scene.on('loaded', () => {
            addTextLayer([
                {
                    x: 500,
                    y: 500,
                    t: "aaa"
                }
            ])
            scene.addLayer(imagelayer);

        });
    })
})

const addTextLayer = (data) => {
    const textlayer = new PointLayer({ zIndex: 2 })
        .source(
            data,
            {
                parser: {
                    type: 'json',
                    x: 'x',
                    y: 'y'
                }
            }
        )
        .shape('t', 'text')
        .size(14)
        .active({
            color: '#00f',
            mix: 0.9
        })
        .color('rgb(13,71,161)')
        .style({
            textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
            spacing: 2, // 字符间距
            fontWeight: '800',
            padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
            stroke: '#ffffff', // 描边颜色
            strokeWidth: 2, // 描边宽度
            textAllowOverlap: true
        });
    scene.addLayer(textlayer);
}

</script>

<style></style>

这样我们的地图效果就出来了。

3.6、父传子

通过我们的父传子属性

只要我们创建完LabMap组件之后，在loaded这里我们就把X、Y、T传给addTextLayer，它就对应的把我们这个数据到文本标注textlayer那里把它创建出来展示在我们的页面中。

 然后我们就实现了点谁就创建谁了。

 为了更加好的体验，我们把创建的点把它放在中心位置

 我们还把它放大了5倍

6.v-if

 但是我们退出再点另一个实验室的时候会发现它不会改变了，除非再属性重进。因为我们没有写更新生命周期，目前是dialog只创建一次就不创建了。解决方案：我们可以使用v-if，因为v-if是动态创建和删除节点。虽然这样对浏览器非常不友好，因为每点一次就不断的在创建和删除，但是对于我们开发人员来说确实是一种好用的方案。

二、实验室列表的更新和删除

1.更新

1.1前端

1.1、可以复制addLab.vue里面所需要的代码进行修改

点击更新按钮弹出对话框

 1.2、获取当前这一项的数据到对话框中

 ​​​​​

 1.3、点击确定强行进行校验，获取最新内容

1.3、修正字符串类型

因为我们后端设置了对应的lab传过来的内容我们要求接收的是capacity是int类型，而现在capacity是字符串是我们要遵守前后端的约定，要不然将来出了一些不可预期的错误字符传来的这个数据类型不对。

 

 通过number修饰符就可以将我们这个数据类型给纠正过来

 修改成功

 我们要把X和Y给删掉，因为我们不更新坐标地址。

1.4、发送put请求给后端

记录更新这一条数据的内容currentItem.value

我们可以测试一下前端发送请求是否正确，打开Network，准备好监听，一点击确定我们会得到一个404，因为我们后端还没对应的响应接口。

 这些传过去的内容都是正确的，我们前端测试成功。接下来就可以写后端了。

1.2、后端

 测试

 

 

 2.删除

2.1、前端

 2.2、后端

还是一如既往的操作步骤

 

 测试，直接在页面进行删除，删除成功说明前后端成功。