l
<template>
    <div class="pd10" v-loading="isLoading" element-loading-text="数据加载中">
        <el-row>
            <el-col>
                <el-tabs v-model.trim="activeName" @tab-click="handleClick" type="border-card">
                    <el-tab-pane label="导航" name="1" :style="'height:' + vh + 'px;'">
                        <Navigation
                            @Loading="Loading"
                            @treenodes="treenodes"
                            @Statistics="Statistics"
                            @analysis="analysis"
                            @Administration="Administration"
                        />
                    </el-tab-pane>
                    <el-tab-pane label="事件统计" name="2" :style="'height:' + vh + 'px;'">
                        <Statistics @Loading="Loading" v-if="activeName == 2" />
                    </el-tab-pane>
                    <el-tab-pane label="事件分析" name="3" :style="'height:' + vh + 'px;'">
                        <analysis @Loading="Loading" v-if="activeName == 3" />
                    </el-tab-pane>
                    <el-tab-pane label="运行情况" name="4" :style="'height:' + vh + 'px;'">
                        <situation @Loading="Loading" v-if="activeName == 4" />
                    </el-tab-pane>
                </el-tabs>
                <!-- <div class="wzhi">
          <i
            style="color: #339966; font-size: 20px"
            class="el-icon-location-information"
          ></i>
          当前位置:<span class="zt">
            {{
              treenode != undefined
                ? treenode.parent.parent.parent.data.name +
                  `>` +
                  treenode.parent.parent.data.name +
                  `>` +
                  treenode.parent.data.name +
                  `>` +
                  treenode.data.name +
                  `>` +
                  JCDname
                : ""
            }}</span
          >
        </div> -->
                <div class="wzhisd">
                    <div style="width: 130px; text-align: end">
                        <i style="color: #339966; font-size: 20px" class="el-icon-location-information"></i>
                        <span style="color: #000">当前位置:</span>
                    </div>
                    <div style="width: 400px; overflow: hidden">
                        <p class="zt14 animate3 h3">
                            {{
                                treenode != undefined
                                    ? treenode.parent.parent.parent.data.name +
                                      `>` +
                                      treenode.parent.parent.data.name +
                                      `>` +
                                      treenode.parent.data.name +
                                      `>` +
                                      treenode.data.name +
                                      `>` +
                                      JCDname
                                    : ''
                            }}
                        </p>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import Navigation from '@/views/Event-boot/components/monitoringpoint/Navigation.vue'
import analysis from '@/views/Event-boot/components/monitoringpoint/analysis.vue'
import situation from '@/views/Event-boot/components/monitoringpoint/situation.vue'
import Statistics from '@/views/Event-boot/components/monitoringpoint/Statistics.vue'

export default {
    name: 'temporarydroponline',
    components: { Navigation, analysis, situation, Statistics },
    data() {
        return {
            vh: undefined,
            activeName: '1',
            treenode: undefined,
            JCDname: '',
            isLoading: true
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 72
        },
        Loading(e) {
            this.isLoading = e
        },
        treenodes(e, name) {
            this.treenode = e
            this.JCDname = name
        },
        handleClick(tab, event) {
            // console.log(tab, event);
        },
        Statistics() {
            this.activeName = '2'
        },
        analysis() {
            this.activeName = '3'
        },
        Administration() {
            this.activeName = '4'
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');
::v-deep .el-table .cell {
    text-align: center;
}
::v-deep.boxee {
    height: auto;
} //自适应高度
::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 10px;
}

::v-deep.wzhisd {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 14px;
    font-weight: 550;
    display: flex;
    // width: 400px;
    z-index: 1;
}
</style>
<style lang="scss" scoped>
::v-deep .zt14 {
    color: $themeColor;
}

::v-deep .animate3 {
    padding-left: 20px;
    font-size: 12px;
    color: #000;
    display: inline-block;
    white-space: nowrap;
    animation: 10s wordsLoop linear infinite normal;
}
@keyframes wordsLoop {
    0% {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}

@-webkit-keyframes wordsLoop {
    0% {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}
</style>
