hb_sis_zhfx/src/views/WindSite/pages/Map.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 class="arcgis-layer" @when="when" ref="arcgis" :data="arcgisData" @clickMap="clickMap"></arcgis>
            <div class="map-popup-panel" v-show="showPopup">
                <div class="map-popup-panel-header">
                    <div class="map-popup-panel-title green">
                        某某风电场总貌<span></span>
                    </div>
                    <div class="map-popup-panel-date gray">2020年5月10日</div>
                    <div class="map-popup-panel-back" @click="popupBack">
                        <span class="svg-icon svg-icon-white svg-icon-sm">
                            <SvgIcon svgid="svg-arrow-dpwn-1"></SvgIcon>
                        </span>
                    </div>
                </div>
                <div class="map-popup-panel-body">
                    <table class="table-form">
                        <tr>
                            <td class="text white">装机容量</td>
                            <td class="value green">49.5</td>
                            <td class="unit white">M/W</td>
                            <td class="text white">装机台数</td>
                            <td class="value green">33</td>
                            <td class="unit white">台</td>
                            <td class="text white">风机型号</td>
                            <td class="value green" colspan="2">UP82/77-1500</td>
                        </tr>
                        <tr>
                            <td class="text white">实时功率</td>
                            <td class="value green">50.81</td>
                            <td class="unit white">M/W</td>
                            <td class="text white">平均风速</td>
                            <td class="value green">14.66</td>
                            <td class="unit white">m/s</td>
                            <td class="text white">运行台数</td>
                            <td class="value green">33</td>
                            <td class="unit white">台</td>
                        </tr>
                        <tr>
                            <td class="text white">待机台数</td>
                            <td class="value green">0</td>
                            <td class="unit white">台</td>
                            <td class="text white">故障台数</td>
                            <td class="value green">0</td>
                            <td class="unit white">台</td>
                            <td class="text white">维护台数</td>
                            <td class="value green">0</td>
                            <td class="unit white">台</td>
                        </tr>
                        <tr>
                            <td class="text white">离线台数</td>
                            <td class="value green">0</td>
                            <td class="unit white">台</td>
                            <td class="text white"></td>
                            <td class="value green"></td>
                            <td class="unit white"></td>
                            <td class="text white"></td>
                            <td class="value green"></td>
                            <td class="unit white"></td>
                        </tr>
                        <tr>
                            <td class="text white">日发电量</td>
                            <td class="value green">49.5</td>
                            <td class="unit white">万kWh</td>
                            <td class="text white">月发电量</td>
                            <td class="value green">49.5</td>
                            <td class="unit white">万kWh</td>
                            <td class="text white"></td>
                            <td class="value green"></td>
                            <td class="unit white"></td>
                        </tr>
                        <tr>
                            <td class="text white">年发电量</td>
                            <td class="value green">49.5</td>
                            <td class="unit white">万kWh</td>
                            <td class="text white">总发电量</td>
                            <td class="value green">49.5</td>
                            <td class="unit white">万kWh</td>
                            <td class="text white"></td>
                            <td class="value green"></td>
                            <td class="unit white"></td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="map-tool">
                <div class="m-btn" :class="{'active': mapToolIndex == 0}" @click="clickMapTool(0)">风机排布</div>
                <div class="m-btn" :class="{'active': mapToolIndex == 1}" @click="clickMapTool(1)">巡检路线</div>
            </div>
        </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";
import dataService from "@/helper/data.js";

export default {
    // 名称
    name: "Map",
    // 使用组件
    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: [107.0391975, 37.31469028], // 初始中心点 106.230909, 38.487193
                height: 654, // 3D地图初始相机高度
                tilt: 65, // 俯视角
                scale: 30000,
                rotation: -45,
                ox: -600,
                oy: -50,
            },
            showPopup: true,
            mapToolIndex: 0,
        };
    },
    // 函数
    methods: {
        when: function () {
            let jsonObj = dataService.get("arcgis-nx-fc1");
            let data = [{id: "MG13", state: "yx"},{id: "MG12", state: "xd"},{id: "MG34", state: "gz"},{id: "MG39", state: "jc"},
                        {id: "MG02", state: "lx"}, {id: "MG19", state: "sl"}]
            jsonObj.forEach(item => {
                let obj = data.find(t => t.id == item.attributes.code);
                if (obj) {
                    item.attributes.state = obj.state;
                } else {
                    item.attributes.state = "dj";
                }
            });
            let lineJsonObj = dataService.get("arcgis-nx-fc1-line");
            this.$refs.arcgis.addFanByJson(jsonObj, lineJsonObj);
        },
        clickMap: function (info) {
            console.log(info)
            this.showPopup = true;
        },
        popupBack: function () {
            this.showPopup = false;
        },
        clickMapTool: function (index) {
            this.mapToolIndex = index;
        },
    },
    // 生命周期钩子
    beforeCreate() {
        // 创建前
    },
    created() {
        // 创建后
    },
    beforeMount() {
        // 渲染前
    },
    mounted() {
        // 渲染后
    },
    beforeUpdate() {
        // 数据更新前
    },
    updated() {
        // 数据更新后
    },
};
</script>

<style lang="less" scoped>
@titleHeight: 40px;

.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: 16px;
        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 16px;
                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: 8px;
        overflow: auto;
        position: relative;

        .arcgis-layer {
            z-index: 1;
        }

        .map-popup-panel {
            width: 760px;
            position: absolute;
            left: 71px;
            top: 22px;
            z-index: 2;

            .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;
                    }
                }
            }
        }

        .map-tool {
            position: absolute;
            right: 22px;
            top: 22px;
            z-index: 2;
            background: #152221AF;
            padding: 18px 14px;

            .m-btn {
                width: 124px;
                height: 44px;
                background: #152221BF;
                border: 1px solid #152221BF;
                color: #FFFFFF;
                transition: all .3s;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;

                &:hover,
                &.active {
                    background: #05BB4C33;
                    border: 1px solid #05BB4C;
                    color: #05BB4C;
                }

                +.m-btn {
                    margin-top: 16px;
                }
            }
        }
    }
}
</style>