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="lineTreeData"
        :props="defaultProps"
        :expand-on-click-node="false"
        ref="tree"
        node-key="id"
        highlight-current
        @node-click="handleNodeClick"
        :current-node-key="currentNodekey"
      >
      </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 {
  getLineTreeListJoggle,
  getTerminalPhotoListJoggle,
} 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"; //右侧参数区

export default {
  components: {
    treeSide,
    picturemain,
    paramArea,
    carouselChart,
  },
  data() {
    return {
      photoData: "",
      childData: "",
      currentNodekey: "",
      showBigPic: true,
      defaultKey: "",
      lineTreeData: [],
      defaultProps: {
        //指定参数格式回显数据
        children: "list",
        label: "name",
      },
      currentNodekey: "", //默认选中的节点树,
    };
  },
  watch: {},

  mounted() {},
  created() {
    this.getLineTreeList();
  },

  methods: {
    //获取左侧树结构
    getLineTreeList() {
      getLineTreeListJoggle()
        .then((res) => {
          console.log(res);
          this.lineTreeData = res.data.list;
          console.log(this.lineTreeData);
          if (this.lineTreeData.length > 0) {
            this.currentNodekey = this.lineTreeData[0].id;
            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
            });
          }
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //获取图片
    getTerminalPhotoList() {},
    //点击获取当前点击的tree数据
    handleNodeClick(data, node) {
      console.log(data, node);
      if (data.list) {
        this.$refs.tree.setCurrentKey(data.list[0].id);
      }
    },
  },
};
</script>

<style lang="less">
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  // 设置颜色
  color: #fff;
  background: #2d8cf0 !important;
}

.el-tree-node > .el-tree-node__content:hover {
  background-color: #c1ddf0;
}

.monitor-container {
  display: flex;
  height: 100%;
  border: 1px solid @border-color-base;
  box-sizing: border-box;
  background: @color-white;
  .sideBar {
    width: 300px;
    border-right: 1px solid @border-color-base;
    overflow: auto;
    .el-tree {
      .el-tree-node__content {
        height: 40px;
      }
    }
  }
  .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>