fd_dwgz_zhyw/src/views/WindSite/pages/Map2.vue

<template>
    <div>
        <div class="btn-group-tabs">
            <BtnGroup2 :gsGroups="gsGroups" :selectValue="gsselectValue" :btnGroups="btnGroups" :rowIndex="rowIndex"
                :index="selectIndex" @select="select" @selectChange="selectChange" :wpId="wpId"></BtnGroup2>
        </div>
        <div class="period">
            期次：
            <div class="period-item" :class="{ active: periodIndex == val.id }"
                v-for="(val, index) in btnGroups[rowIndex]?.btns[selectIndex]?.pjls" :key="index"
                @click="handleChange(val)">{{ val.name }}</div>
        </div>
        <!-- 羊头崖 -->
         <ytyMap v-if="periodIndex === 'YTY01_GC'" ref="maps"></ytyMap>
        <!-- 败虎堡三期 -->
        <bhb3Map v-if="periodIndex === 'BHB301_GC'" ref="maps"></bhb3Map>
        <!-- 高家堰 -->
        <gjyMap v-if="periodIndex === 'GJY01_GC'" ref="maps"></gjyMap>
        <gjyMap2 v-if="periodIndex === 'GJY02_GC'" ref="maps"></gjyMap2>
        <!-- 红石峁 -->
        <hsmMap v-if="periodIndex === 'HSM01_GC'" ref="maps"></hsmMap>
        <!-- 尹灵芝 -->
        <ylzMap v-if="periodIndex === 'YLZ01_GC'" ref="maps"></ylzMap>
        <!-- 丁家窑 -->
        <djyMap v-if="periodIndex === 'DJY01_GC'" ref="maps"></djyMap>
        <djyMap2 v-if="periodIndex === 'DJY02_GC'" ref="maps"></djyMap2>
        <!-- 牛家岭 -->
        <njlMap v-if="periodIndex === 'NJL01_GC'" ref="maps"></njlMap>
        <njlMap2 v-if="periodIndex === 'NJL02_GC'" ref="maps"></njlMap2>
        <!-- 盘道梁 -->
        <pdlMap v-if="periodIndex === 'PDL01_GC'" ref="maps"></pdlMap>
        <!-- 小五台 -->
        <xwtMap v-if="periodIndex === 'XWT01_GC'" ref="maps"></xwtMap>
        <!-- 败虎堡  一期 -->
        <bhbMap v-if="periodIndex === 'BHB01_GC'" ref="maps"></bhbMap>
        <!-- 平头镇 -->
        <ptzMap v-if="periodIndex === 'PTZ01_GC'" ref="maps"></ptzMap>
        <ptzMap2 v-if="periodIndex === 'PTZ02_GC'" ref="maps"></ptzMap2>
        <!-- 禹风 败虎堡 -->
        <bhbMap2 v-if="periodIndex === 'YF01_GC'" ref="maps"></bhbMap2>
        <yfMap2 v-if="periodIndex === 'YF02_GC'" ref="maps"></yfMap2>
        <!-- 平鲁大河堡 -->
        <pldhbMap v-if="periodIndex === 'GJY03_GC'" ref="maps"></pldhbMap>
        <!-- 朱坑一期 -->
        <zkyqMap v-if="periodIndex === 'ZK01_GC'" ref="maps"></zkyqMap>
        <!-- 米梁局 -->
        <mljMap v-if="periodIndex === 'MLJ01_GC'" ref="maps"></mljMap>
        <!-- 山阴二期 -->
        <syMap2 v-if="periodIndex === 'SY02_GC'" ref="maps"></syMap2>
        <!-- 山阴一期 -->
        <syMap v-if="periodIndex === 'SY01_GC'" ref="maps"></syMap>
    </div>
</template>
<script>
import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
import api from "@api/cockpit/matrix/index.js";
import gjyMap from "./components/gjy-map.vue";
import gjyMap2 from "./components/gjy-map2.vue";
import hsmMap from "./components/hsm-map.vue";
import ylzMap from "./components/ylz-map.vue";
import ytyMap from "./components/yty-map.vue";
import bhb3Map from "./components/bhb3-map.vue";
import djyMap from "./components/djy-map.vue";
import djyMap2 from "./components/djy-map2.vue";
import njlMap from "./components/njl-map.vue";
import njlMap2 from "./components/njl-map2.vue";
import pdlMap from "./components/pdl-map.vue";
import ptzMap from "./components/ptz-map.vue";
import ptzMap2 from "./components/ptz2-map.vue";
import xwtMap from "./components/xwt-map.vue";
import yfMap2 from "./components/yf2-map.vue";
import bhbMap2 from "./components/bhb2-map.vue";
import bhbMap from "./components/bhb-map.vue";
import pldhbMap from "./components/pldhb-map.vue";
import zkyqMap from "./components/zkyq-map.vue";
import mljMap from "./components/mlj-map.vue";
import syMap2 from "./components/sy2-map.vue";
import syMap from "./components/sy-map.vue";

export default {
    components: {
        mljMap,
        zkyqMap,
        pldhbMap,
        BtnGroup2,
        gjyMap,
        gjyMap2,
        hsmMap,
        ylzMap,
        ytyMap,
        bhb3Map,
        djyMap,
        djyMap2,
        njlMap,
        njlMap2,
        pdlMap,
        ptzMap,
        ptzMap2,
        xwtMap,
        yfMap2,
        bhbMap,
        bhbMap2,
        syMap2,
        syMap
    },
    data() {
        return {
            // 定时器
            timer: "",
            gsGroups: [],
            gsselectValue: '',
            selectIndex: 0,
            rowIndex: 0,
            periodIndex: '',
            windturbineList: [],
            btnGroups: [
                {
                    icon: "svg-wind-site",
                    btns: [],
                },
                {
                    icon: "svg-photovoltaic",
                    btns: [],
                },
            ],
        }
    },
    created() {
        this.wpId = this.$route.params.wpId;
        this.$nextTick(() => {
            this.getGS();
            this.timer = setInterval(() => {
                this.getWinds()
            }, 3000);
        });
    },
    methods: {
        getGS() {
            api.companysAjax().then(res => {
                if (res.data) {
                    this.gsselectValue = res.data[0].id
                    this.gsGroups = res.data
                    this.getWp()
                }
            })
        },
        selectChange(val) {
            this.gsselectValue = val
            this.getWp()
        },
        getWp() {
            api.windfarmByCmAjax({
                cmId: this.gsselectValue
            }).then((res) => {
                let btnGroups = [
                    {
                        icon: "svg-wind-site",
                        btns: [],
                    },
                    {
                        icon: "svg-photovoltaic",
                        btns: [],
                    },
                ];

                res.data.forEach((ele, index) => {
                    if (ele.id.indexOf("FDC") !== -1) {
                        btnGroups[0].btns.push({
                            text: ele.name,
                            code: ele.id,
                            pjls: ele.pjls
                        });
                    } else {
                        btnGroups[1].btns.push({
                            text: ele.name,
                            code: ele.id,
                            pjls: ele.pjls
                        });
                    }
                });
                this.btnGroups = btnGroups;
                this.renderBtnActiveIndex();
            });
        },
        getWinds() {
            api.windturbineByPjIdAjax({
                pjId: this.periodIndex
            }).then(res => {
                if (res.data.length > 0 && this.$refs.maps) {
                    this.$refs.maps.dayaDeal(res.data)
                }
            })
        },
        renderBtnActiveIndex() {
            this.btnGroups.forEach((pEle, pIndex) => {
                pEle.btns.forEach((cEle, cIndex) => {
                    if (cEle.code === this.wpId) {
                        this.rowIndex = pIndex;
                        this.selectIndex = cIndex;
                    }
                });
            });
            this.periodIndex = this.btnGroups[this.rowIndex]?.btns[this.selectIndex]?.pjls[0].id
            this.getWinds()
        },
        handleChange(val) {
            this.periodIndex = val.id
            this.getWinds()
        },
        select(res) {
            this.$router.replace({
                path: `/monitor/windsite/map2/${res.code}`,
            });
        },
    },
    unmounted() {
        clearInterval(this.timer);
        this.timer = null;
    },
    watch: {
        $route(res) {
            this.wpId = res.params.wpId;
            if (res.params.wpId) {
                this.getWp();
            }
            this.renderBtnActiveIndex();
        },
    },
}
</script>
<style lang="less" scoped>
.period {
    display: flex;
    flex-direction: row;

    .period-item {
        line-height: 23px;
        font-size: 12px;
        text-align: center;
        margin-right: 4px;
        border: 1px solid #606769;
        border-radius: 2px;
        padding: 0px 5px;
        margin-bottom: 10px;

        &.active {
            color: #ffffff;
            background-color: rgba(75, 85, 174, 0.6);
            border-color: rgba(75, 85, 174, 0.6);
        }
    }
}
</style>