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"
        ref="tree"
        node-key="id"
        highlight-current
        :default-expand-all="true"
        @node-click="handleNodeClick"
        :current-node-key="currentNodekey"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span v-if="data.list" class="iconfont icon-dianli"> </span>
          <span
            v-else
            class="iconfont icon-dianlihangye"
            style="margin-right: 3px"
          ></span>
          <span>{{ node.label }}</span>
        </span>
      </el-tree>
    </div>
    <!-- <router-view></router-view> -->
    <!-- 中心内容 -->

    <!-- <picturemain :photoData="photoData" v-if="showBigPic"></picturemain> -->
    <!-- 带参数的中心内容右侧参数区 -->
    <div class="picSetBox">
      <div class="swiperBox">
        <carouselChart :terminalPhoto="terminalPhoto"></carouselChart>
      </div>
      <div class="parameterArea">
        <div class="paramsDate">
          <h3>日期选择</h3>
          <el-date-picker
            v-model="dateValue"
            type="date"
            placeholder="选择日期"
            value-format="timestamp"
            @change="changedate"
          >
          </el-date-picker>
        </div>
        <div class="monitorItemBox">
          <h3>通道</h3>
          <el-select
            v-model="channelValue"
            placeholder="请选择"
            @change="changeChannelId"
          >
            <el-option
              v-for="item in channelOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="paramsDate">
          <el-button type="primary" @click.native.stop="handleSetSchedule()" >时间表设置</el-button>
        </div>
      </div>
      <!-- <paramArea></paramArea> -->
    </div>
  </div>
</template>

<script>
import {
  getdyTreeListJoggle,
  getChannelListJoggle,
  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 {
      showBigPic: true,
      defaultKey: "",
      lineTreeData: [],
      defaultProps: {
        //指定参数格式回显数据
        children: "list",
        label: "name",
      },
      currentNodekey: "", //默认选中的节点树,
      channelId: "", //通道id
      channelList: "", //通道数据
      channelOption: [], //通道分类
      channelValue: "",
      terminalPhoto: [], //获取拍照装置当前数据
      dateValue: "", //日期
    };
  },
  watch: {},

  mounted() {},
  created() {
    this.getLineTreeList();
    this.getDateTime();
    console.log(this.dateValue);
  },
  methods: {
    //获取当前时间
    getDateTime() {
      this.dateValue = new Date().getTime();
    },
    //选择时间
    changedate() {
      console.log(this.dateValue);
      console.log(this.channelList);
      this.getTerminalPhotoList(
        this.channelList[0].id,
        this.dateValue,
        this.channelList[0].termId
      );
    },
    //获取左侧树结构
    getLineTreeList() {
      getdyTreeListJoggle()
        .then((res) => {
          console.log(res);
          this.lineTreeData = res.data.list;
          console.log(this.lineTreeData[0].list[0].list);
          if (this.lineTreeData[0].list[0].list.length > 0) {
            this.currentNodekey = this.lineTreeData[0].list[0].list[0].id; //第一个数据
            console.log(this.currentNodekey);
            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
              console.log(this.currentNodekey);
              this.channelId = this.currentNodekey;
              console.log(this.channelId);
            });
          }
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
      this.getChannelList(this.channelId); //获取通道id接口
    },
    //点击获取当前点击的tree数据
    handleNodeClick(data, node) {
      console.log(data, node);
      if (data.list) {
        this.$refs.tree.setCurrentKey(data.list[0].id);
      }
      this.channelId = data.id; //获取当前点击的id
      this.getChannelList(this.channelId); //获取通道id接口
    },

    //获取通道的接口
    getChannelList(id) {
      getChannelListJoggle({ termid: id })
        .then((res) => {
          console.log(res);
          this.channelList = res.data.list;
          console.log(this.channelList);
          this.getTerminalPhotoList(
            this.channelList[0].id,
            this.dateValue,
            this.channelList[0].termId
          ); //获取图片列表是传当前设备的 id 和termid
          this.channelOption = [];
          this.channelList.forEach((item) => {
            this.channelOption.push({
              label: item.channelName,
              value: item.id,
              termid: item.termId,
            });
          }); // 选择通道一通道二select框
          this.channelValue = this.channelOption[0].label; //默认选中第一个
          console.log(this.channelOption);
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //获取图片
    getTerminalPhotoList(id, date, termId) {
      console.log(id, date, termId);
      getTerminalPhotoListJoggle({
        channelid: id,
        time: date,
        terminalid: termId,
      })
        .then((res) => {
          console.log(res);
          this.terminalPhoto = res.data.list;
          console.log(this.terminalPhoto);
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //切换通道
    changeChannelId(val) {
      console.log(val);
      let channelObj = {};
      channelObj = this.channelOption.find(function (i) {
        return i.value === val;
      });
      console.log(channelObj);
      this.getTerminalPhotoList(val, this.dateValue, channelObj.termid);
    },
    //设置时间表
    handleSetSchedule(){
      
    }
  },
};
</script>

<style lang="less">
.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;
      }
    }
    .el-tree--highlight-current
      .el-tree-node.is-current
      > .el-tree-node__content {
      // 设置颜色
      color: #fff;
      background: #2d8cf0;
    }
  }
  .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;
    }
  }
  .parameterArea {
    width: 300px;
    padding: 16px 16px;
    border-left: 1px solid #dcdfe6;
    .monitorItemBox,
    .paramsDate {
      margin-bottom: 16px;
      h3 {
        font-size: 16px;
        font-weight: normal;
        color: @color-text-primary;
        margin-bottom: 8px;
      }
      .el-date-editor.el-input {
        width: 215px;
      }
    }
  }
}
</style>