frontend/src/views/realTimeMonitor/index.vue

<template>
    <div class="monitor-container">
        <!-- 左侧数据列表树 -->
        <div class="sideBar">
            <!-- <treeSide></treeSide> -->
            <!-- <el-tree ref="tree" :data="barData" @node-click="handleNodeClick" :props="defaultProps"></el-tree> -->
            <el-tree
                :data="barData"
                :props="defaultProps"
                :current-node-key="current_node_key"
                ref="tree"
                node-key="id"
                highlight-current
                :default-expanded-keys="defaultKey"
                check-on-click-node
                @node-click="handleNodeClick"
            >
            </el-tree>
        </div>
        <!-- <router-view></router-view> -->
        <!-- 中心内容 -->

        <picturemain :photoData="photoData" v-if="showBigPic"></picturemain>
        <!-- 带参数的中心内容右侧参数区 -->
        <div class="picSetBox" v-else>
            <div class="swiperBox">
                <carouselChart></carouselChart>
            </div>
            <paramArea></paramArea>
        </div>
    </div>
</template>

<script>
// import { getHostDeviceDataByVoltage } from '@/utils/api/index';
import carouselChart from '../components/carouselChart.vue';
import treeSide from './components/treeSide.vue';
import picturemain from './picturemain.vue'; //照片展示
import paramArea from './paramArea.vue'; //右侧参数区
import testjson from '../../testjson';

export default {
    components: {
        treeSide,
        picturemain,
        paramArea,
        carouselChart
    },
    data() {
        return {
            photoData: '',
            childData: '',
            currentNodekey: '',
            showBigPic: true,
            defaultKey: '',
           
            barData: [],
            defaultProps: {
                //指定参数格式回显数据
                children: 'children',
                label: 'text'
            },
            current_node_key: '2e24a182-b1a5-4135-b473-b8eee2c5193e'
        };
    },
    watch: {},

    mounted() {
        this.$nextTick(() => {
            var currentData = testjson.data[0].children[0].children[0];
            this.handleNodeClick(currentData);
            this.defaultKey = [currentData.id];
        });
    },
    created() {
        this.getTree();
        //装置数量统计
        // getHostDeviceDataByVoltage().then((res) => {
        //     console.log(res);
        // });
    },

    methods: {
        handleNodeClick(data) {
            console.log(data);
            if (data.children.length === 0 && data.dataType === 'tower') {
                // this.photoData = data;
                this.showBigPic = false;
                this.childData = data.text;
            } else if (data.children.length && data.dataType === 'line') {
                this.showBigPic = true;
                this.photoData = data;
            }
        },
        getTree() {
            this.barData = testjson.data;
            console.log(this.barData);
        }
    }
};
</script>

<style lang="less">
.monitor-container {
    display: flex;
    height: 100%;
    border: 1px solid #e4e7ed;
    box-sizing: border-box;
    background: #fff;
    .sideBar {
        width: 300px;
        border-right: 1px solid #e4e7ed;
        overflow: auto;
        .el-tree {
            //background: transparent;
            //color: #409eff;
            .el-tree-node__content {
                height: 40px;
            }
            // .is-current {
            //     background-color: #256eb1;
            // }
            // .el-tree-node__content:hover,
            // .el-upload-list__item:hover {
            //     background-color: #256eb1;
            // }
        }
    }
    .picSetBox {
        display: flex;
        width: 100%;
        height: 100%;
        //background: #fcc;
        flex: 1;
        overflow: hidden;
        .swiperBox {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            width: auto;
            overflow: hidden;
        }
    }
}
</style>