hb_sis_zhfx/src/views/WindSite/pages/Map1.vue

<template>
    <div class="map-1">
        <div class="btn-group-tabs">
            <BtnGroup2
                :btnGroups="btnGroups"
                :rowIndex="0"
                :index="1"
                @select="select"
            ></BtnGroup2>
        </div>
        <div class="panel-title">
            <div class="panel-title-name">
                <span class="svg-icon svg-icon-green svg-icon-sm">
                    <SvgIcon svgid="svg-wind-site"></SvgIcon>
                </span>
                <span class="green">某某某风电场</span>
                <div class="sub-title-item">
                    <img src="../../../assets/map/fan/black.png" />
                    <span class="sub-title gray">接入台数</span>
                    <span class="sub-count font-num white">256</span>
                </div>
                <div class="sub-title-item">
                    <img src="../../../assets/map/fan/green.png" />
                    <span class="sub-title green">待机台数</span>
                    <span class="sub-count font-num green">56</span>
                </div>
                <div class="sub-title-item">
                    <img src="../../../assets/map/fan/blue.png" />
                    <span class="sub-title blue">并网台数</span>
                    <span class="sub-count font-num blue">256</span>
                </div>
                <div class="sub-title-item">
                    <img src="../../../assets/map/fan/purple.png" />
                    <span class="sub-title pink">限电台数</span>
                    <span class="sub-count font-num pink">3</span>
                </div>
                <div class="sub-title-item">
                    <img src="../../../assets/map/fan/red.png" />
                    <span class="sub-title red">故障台数</span>
                    <span class="sub-count font-num red">5</span>
                </div>
                <div class="sub-title-item">
                    <img src="../../../assets/map/fan/orange.png" />
                    <span class="sub-title orange">检修台数</span>
                    <span class="sub-count font-num orange">20</span>
                </div>
                <div class="sub-title-item">
                    <img src="../../../assets/map/fan/white.png" />
                    <span class="sub-title white">受累台数</span>
                    <span class="sub-count font-num white">256</span>
                </div>
                <div class="sub-title-item">
                    <img src="../../../assets/map/fan/black.png" />
                    <span class="sub-title gray">离线台数</span>
                    <span class="sub-count font-num gray">2</span>
                </div>
            </div>
        </div>
        <div class="panel-body">
            <arcgis @when="when" ref="arcgis" :data="arcgisData" @clickMap="clickMap">
                <template v-slot:test>
                    <div class="panel-box">
                        <!-- <div class="panel-item" v-for="index of 80" :key="index"></div> -->
                        <img :src="tempImg" style="width: 800px; height: 700px;">
                    </div>
                </template>
            </arcgis>
        </div>
    </div>
</template>

<script>
import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
import SvgIcon from "@com/coms/icon/svg-icon.vue";
import arcgis from "@com/arcgis/arcgis.vue";

export default {
    // 名称
    name: "Map1",
    // 使用组件
    components: {
        BtnGroup2,
        SvgIcon,
        arcgis,
    },
    // 数据
    data() {
        return {
            btnGroups: [
                {
                    icon: "svg-wind-site",
                    btns: [
                        {
                            text: "某某风场",
                            code: "mmfdc1",
                        },
                        {
                            text: "某某风场",
                            code: "mhsfc",
                        },
                        {
                            text: "某某风场",
                            code: "mmfdc2",
                        },
                        {
                            text: "某某风场",
                            code: "mmfdc3",
                        },
                        {
                            text: "某某风场",
                            code: "mmfdc4",
                        },
                    ],
                },
                {
                    icon: "svg-photovoltaic",
                    btns: [
                        {
                            text: "某某风场",
                            code: "mmgf1",
                        },
                        {
                            text: "某某风场",
                            code: "mmgf2",
                        },
                        {
                            text: "某某风场",
                            code: "mmgf3",
                        },
                        {
                            text: "某某风场",
                            code: "mmgf4",
                        },
                    ],
                },
            ],
            arcgisData: {
                mode: "2D", // 模式 2D 3D
                title: "宁夏地图", // 标题
                center: [106.60768412800003, 37.806672373000006], // 初始中心点
                height: 654, // 3D地图初始相机高度
                tilt: 65, // 俯视角
                scale: 15000,
            },
            tempImg: require("@assets/temp1.png"),
        };
    },
    // 函数
    methods: {
        when: function () {
        //    this.$refs.arcgis.addImagePoint([106.60768412800003, 37.806672373000006], "@assets/temp1.png", "160px", "140px");
           this.$refs.arcgis.addHtmlPoint([106.60768412800003, 37.806672373000006], "test",  400, 350);
        },
        clickMap: function (info) {
            console.log(info)
        },
    },
    // 生命周期钩子
    beforeCreate() {
        // 创建前
    },
    created() {
        // 创建后
    },
    beforeMount() {
        // 渲染前
    },
    mounted() {
        // 渲染后
    },
    beforeUpdate() {
        // 数据更新前
    },
    updated() {
        // 数据更新后
    },
};
</script>

<style lang="less" scoped>
@titleHeight: 3.704vh;

.map-1 {
    width: 100%;
    height: calc(100vh - 90px);
    display: flex;
    flex-direction: column;

    .btn-group-tabs {
        display: flex;
        flex-direction: row;
    }

    .panel-title {
        width: 100%;
        background-color: fade(@darkgray, 40%);
        margin-top: 1.481vh;
        padding: 6px;
        display: flex;
        align-items: center;

        .panel-title-name {
            color: @green;
            display: flex;
            align-items: center;
            line-height: 0;
            font-size: 0;

            i,
            span {
                margin: 0 0 0 1.481vh;
                line-height: 0;
                font-size: 13px;
            }
        }

        .sub-title-item {
            display: flex;
            align-items: center;
            margin-left: 16px;
            
            .sub-title {
                font-size: 13px;
                margin-left: 6px;
            }

            .sub-count {
                font-size: 13px;
                font-weight: 500;
            }
            
            img {
                height: 31px;
            }
        }
    }

    .panel-body {
        flex-grow: 1;
        background-color: fade(@darkgray, 20%);
        padding: 0.741vh;
        overflow: auto;
        position: relative;

        .map-popup-panel {
            width: 679px;
            position: absolute;
            left: 71px;
            top: 22px;

            .map-popup-panel-header {
                width: 100%;
                background: fade(#152221, 90%);
                display: flex;

                .map-popup-panel-title {
                    padding: 17px 24px;
                    font-size: @fontsize-s;
                    position: relative;

                    &::before,
                    &::after {
                        position: absolute;
                        width: calc(50% - 6px);
                        bottom: 0;
                        border-bottom: 2px solid @green;
                    }

                    &::before {
                        content: "";
                        left: 0;
                    }

                    &::after {
                        content: "";
                        right: 0;
                    }

                    span {
                        position: absolute;
                        width: 11.3px;
                        height: 11.3px;
                        border-left: 2px solid @green;
                        border-top: 2px solid @green;
                        left: calc(50% - 5.65px);
                        bottom: -3px;
                        transform: rotate(45deg);
                    }
                }

                .map-popup-panel-date {
                    flex-grow: 1;
                    padding: 17px 24px;
                    font-size: @fontsize-s;
                    text-align: right;
                    border-bottom: 2px solid @green;
                }

                .map-popup-panel-back {
                    margin-left: auto;
                    width: 54px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    cursor: pointer;

                    &::after {
                        content: "";
                        position: absolute;
                        left: 0;
                        height: 50%;
                        border-left: 1px solid @gray;
                        top: 25%;
                    }
                }
            }

            .map-popup-panel-body {
                background: fade(#152221, 75%);
                border: 1px solid fade(@darkgray, 40);
                border-top: 0px;

                .table-form {
                    .text,
                    .unit {
                        font-weight: 400;
                    }

                    .unit {
                        min-width: auto;
                    }

                    .value,
                    .unit {
                        text-align: left;
                    }
                }
            }
        }
    }

    .panel-box {
        width: 800px;
        display: flex;
        flex-wrap: wrap;

        .panel-item {
            width: 100px;
            height: 100px;
            padding: 20px;
            background: #536268B8;
            margin-top: -20px;
            margin-left: -20px;
        }

    }
}
</style>