plan-demo/src/views/Home.vue

<template>
    <div class="persagyPlan">
        <basePlan @onMousedown="onMousedown" @postDeviceIds="postDeviceIds" ref="planEl"></basePlan>
        <tooltip ref="tooltip_map" v-show="showtip" class="toolTip">
            <div class="title">
                {{ this.tooltipName }}
            </div>
            <div class="tip-body">
                <div class="info">
                    <p v-for="(item, index) in device_params" :key="index">
                        <span class="label">{{ item.infoName }}：</span>
                        <span class="value">{{ showData(item) }}</span>
                        <span class="unit">{{ item.unit }}</span>
                    </p>
                </div>
            </div>
            <div class="tip-footer">查看设备详情</div>
        </tooltip>
    </div>
</template>
<script>
import { readPubGroup, readDeviceParams, readDeviceStatus } from "@/api/plan"; // 引入获取底图得接口
import basePlan from "@/components/basePlan.vue";
import tooltip from "@/components/tooltip.vue";
export default {
    components: { basePlan, tooltip },
    data() {
        return {
            showtip: false,
            tooltipName: "",
            device_params: [],
            deviceIds: [],
            graphId: "e4c6b131ced74032b02b5721cb496b77",
            id: "ad1195f2492f41e3a06f792d6701365c",
        };
    },
    mounted() {
        let _this = this;
        let canvasEl = document.getElementsByTagName("canvas")[0];
        window._resizeTimer = null;
        window.addEventListener("resize", () => {
            clearTimeout(window._resizeTimer);
            window._resizeTimer = setTimeout(() => {
                canvasEl.height = document.body.clientHeight;
                canvasEl.width = document.body.clientWidth;
                _this.$refs.planEl.fixWindow();
            }, 50);
        });
    },
    beforeMount() {
        let searchStr = window.location.search.substr(1);
        // 设备
        // searchStr =
        //     'projectId=Pj1101050029&&buildingId=Bd1101050029cb77fbd1846611eaac87cd1cd6a961c6&floorId=Fl11010500295de391e3e5564ce58003c7e5391dc5e4&id=c57264b1252245e6b2713f1cbb9c4148&graphId=cbe7180ead0f420782acf1c39382319a&floorMap=base/ebd53bb00d3511eb9a1db95f725712e8.jsonz'

        // 设备 + 空间
        searchStr =
            "projectId=Pj1101050029&&buildingId=Bd1101050029cb77fbd1846611eaac87cd1cd6a961c6&floorId=Fl1101050029f18b92c5ceaf408d893e257bf03692df&id=0234df7a9a7b40dca38358b7e0a71ce9&graphId=e43a9c03d9bb482ca96b3b545735be35&floorMap=base/a5f453020d4111eb9a1d57eee76e51f1.jsonz";
        // buildingId=Bd1101050029cb77fbd1846611eaac87cd1cd6a961c6&floorId=Fl1101050029f18b92c5ceaf408d893e257bf03692df&name=%E5%BE%88%E8%B4%B9%E5%8A%B2&id=0234df7a9a7b40dca38358b7e0a71ce9&graphId=e43a9c03d9bb482ca96b3b545735be35&version=1.1.1&floorMap=base%2Fa5f453020d4111eb9a1d57eee76e51f1.jsonz
        // 项目id,建筑id,楼层id,图id,图graphId,底图floorMap
        const params = this.queryURLParams(searchStr);
        Object.entries(params).map((arr) => {
            this[arr[0]] = arr[1];
            window[`_${arr[0]}`] = arr[1];
        });
        console.log(params);
        // console.log("here");
        // console.log("id:", this.id);
        // console.log("graphId:", this.graphId);
        // console.log("url:", this.url);
        // console.log("projectId:", this.projectId);
    },

    methods: {
        /**
         * 查询url参数
         */
        queryURLParams(url) {
            let obj = {};
            url.replace(/([^?=&#]+)=([^?=&#]+)/g, (_, key, value) => (obj[key] = value));
            url.replace(/#([^?=&#]+)/g, (_, hash) => (obj["HASH"] = hash));
            return obj;
        },
        postDeviceIds(ids) {
            this.deviceIds = ids;
            if (ids.length > 0) {
                readDeviceStatus({ objectIds: ids }).then((res) => {
                    // console.log('res')
                    // console.log(res)
                    window.parse.nodes.forEach((nodeItem) => {
                        let sItem = res.content.find((_item) => {
                            return _item.objectId == nodeItem._data.attachObjectIds[0];
                        });

                        // if(sItem == null){
                        //   sItem = res.content[0]
                        // }
                        let key = null;
                        /**
             *  0: 灰
                1：蓝
                2：红
                3：黄
                4：绿
                5：棕
             *
             */
                        if (sItem) {
                            switch (sItem.status) {
                                case 0:
                                    // 空
                                    key = 0;
                                    break;
                                case 1:
                                    // 运行
                                    key = 1;
                                    break;
                                case 2:
                                    // 关闭
                                    key = 0;
                                    break;
                                default:
                                    break;
                            }
                            let picUrl = nodeItem._data.properties.state.find((item) => {
                                return item.state == key;
                            }).pic;
                            if (nodeItem.__picUrl && nodeItem.__picUrl == picUrl) {
                            } else {
                                nodeItem.__picUrl = picUrl;
                                nodeItem.url = window.img_baseurl + "/image-service/common/image_get?systemId=dataPlatform&key=" + picUrl;
                                // nodeItem.url ='/dp-auxiliary/image-service/common/image_get?systemId=dataPlatform&key='+picUrl
                            }
                        }
                    });
                });
            }
        },
        showData(item) {
            if (item.dataSource) {
                return item.dataSource.find((item) => {
                    return item.code == "0";
                }).name;
            } else {
                return item.data;
            }
        },
        onMousedown(item, e) {
            let time = new Date().getTime();
            window._now = console.log("item:", item);
            setTimeout(() => {
                if (item) {
                    clearTimeout(window._caller);
                    let operationType = "click";
                    console.log(111);
                    this.showtip = true;
                    this.tooltipName = "test";
                    this.device_params = [
                        {
                            infoName: "hhh",
                            unit: "g",
                        },
                    ];
                    this.$refs.tooltip_map.$el.style.left = e[0].offsetX + "px";
                    this.$refs.tooltip_map.$el.style.top = e[0].offsetY + "px";
                    return;
                    let deviceId = item.data.attachObjectIds[0];
                    if (window._now) {
                        let diff = time - window._now;
                        console.log("diff:", diff);
                        if (diff < 400) {
                            operationType = "dbclick";
                            // 双击
                        } else {
                            // 单击
                        }
                    }
                    window._now = time;
                    if (operationType == "click") {
                        // 单击
                        window._caller = setTimeout(() => {
                            readDeviceParams({ objectId: deviceId }).then((res) => {
                                this.tooltipName = item.data.name;
                                this.device_params = res.content;
                                this.$refs.tooltip_map.$el.style.left = e[0].offsetX + "px";
                                this.$refs.tooltip_map.$el.style.top = e[0].offsetY + "px";
                                this.showtip = true;
                            });
                        }, 300);
                    } else {
                        // 双击
                        try {
                            window.postMsgToU3d(JSON.stringify({ time: new Date(), data: { deviceId: deviceId } }));
                        } catch (error) {
                            console.error("to u3d error", error);
                        }
                    }
                } else {
                    this.showtip = false;
                }
            }, 200);
        },

        // 移入
        onMousedownx(item, e) {
            // return false;

            let deviceId = item.data.attachObjectIds[0];
            let res = readDeviceParams(deviceId);
            this.tooltipName = item.data.name;
            this.device_params = res.content;
            this.showtip = true;
            console.log(e[0].offsetX + "px");
            this.$refs.tooltip_map.$el.style.left = e[0].offsetX + "px";
            this.$refs.tooltip_map.$el.style.top = e[0].offsetY + "px";
        },
    },
};
</script>
<style lang="less">
.persagyPlan {
    padding: 6 px 10px 6px 10px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.title {
    padding: 10px 16px;
    line-height: 22px;
    color: #ebeef5;
    font-size: 16px;
    font-weight: 600;
}
.toolTip {
    min-width: 40px;
    box-shadow: 0px 2px 4px 0px rgba(31, 36, 41, 0.1);
    border: 1px solid #5d6177;
    // padding: 6px 10px 6px 10px;
    position: absolute;
    border-radius: 8px;
    box-shadow: 0px 1px 13px rgba(0, 0, 0, 0.189549), 0px 1px 11px rgba(0, 0, 0, 0.5);
}
.tip-body {
    border-top: 1px solid #5d6177;
    border-bottom: 1px solid #5d6177;
}
.info {
    padding: 16px;
    max-height: 280px;
    overflow: auto;
    line-height: 29px;
    span {
        color: #a7abc0;
    }
    .value {
        color: #fff;
        // margin-left: 12px;
    }
    .unit {
        margin-left: 0;
    }
}
.tip-footer {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    text-align: center;
    color: #a7abc0;
    transition: background-color 0.3s;
    cursor: pointer;
    &:hover {
        color: #fff;
        background-color: rgba(0, 145, 255, 0.295974);
    }
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    border-radius: 0;
}

::-webkit-scrollbar-thumb {
    background-color: #21262f;
    border-radius: 3px;

    &:hover {
        background-color: #21262f;
    }
}
</style>