frontend/src/views/realTimeMonitor/index.vue

<template>
  <div class="monitorBox">
    <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"
            v-if="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" v-if="channelOption.length !== 0">
            <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="setTimebtn">
            <h3>设置</h3>
            <div class="buttonGroup">
              <el-button type="primary" @click.native.stop="handleSetSchedule()"
                >时间表设置</el-button
              >
              <el-button type="primary">手动拍照</el-button>
            </div>
          </div>
        </div>
      </div>
      <!-- <paramArea></paramArea> -->
      <setschedule ref="setschedule_ref"></setschedule>
    </div>
  </div>
</template>

<script>
import {
  getdyTreeListJoggle,
  getChannelByTermidJoggle,
  getTerminalPhotoListJoggle,
} from "@/utils/api/index";
import carouselChart from "../components/carouselChart.vue";

import picturemain from "./picturemain.vue"; //照片展示
import paramArea from "./paramArea.vue"; //右侧参数区
import setschedule from "./components/setschedule.vue";

export default {
  components: {
    picturemain,
    paramArea,
    carouselChart,
    setschedule,
  },
  data() {
    return {
      showBigPic: true,
      defaultKey: "",
      lineTreeData: [],
      defaultProps: {
        //指定参数格式回显数据
        children: "list",
        label: "name",
      },
      currentNodekey: "", //默认选中的节点树,
      channelId: "", //通道id
      channelList: "", //通道数据
      channelOption: [], //通道分类
      channelValue: "",
      terminalPhoto: [], //获取拍照装置当前数据
      dateValue: "", //日期
      nopicPath: require("@/assets/img/noPhoto.png"),
    };
  },
  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);
              this.getChannelList(this.channelId); //获取通道id接口
            });
          }
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //点击获取当前点击的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.channelOption = [];
      this.getChannelList(this.channelId); //获取通道id接口
    },

    //获取通道的接口
    getChannelList(id) {
      getChannelByTermidJoggle({ termid: id })
        .then((res) => {
          console.log(res);
          this.channelList = res.data.list;
          console.log(this.channelList);
          this.getTerminalPhotoList(
            this.channelList[0].channelid,
            this.dateValue,
            this.channelList[0].termId
          ); //获取图片列表是传当前设备的 id 和termid
          this.channelOption = [];
          this.channelList.forEach((item) => {
            this.channelOption.push({
              label: item.channelname,
              value: item.channelid,
              termid: item.termId,
            });
          }); // 选择通道一通道二select框
          this.channelValue = this.channelOption[0].label; //默认选中第一个
          console.log(this.channelOption);
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //获取图片
    getTerminalPhotoList(id, date, termId) {
      this.terminalPhoto = [];
      console.log(id, date, termId);
      getTerminalPhotoListJoggle({
        channelid: id,
        time: date,
        terminalid: termId,
      })
        .then((res) => {
          console.log(res);
          if (res.data.list.length == 0) {
            this.terminalPhoto = [
              {
                path: this.nopicPath,
              },
            ];
            //alert("没有数据哈");
          } else {
            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() {
      this.$refs.setschedule_ref.display();
      this.$refs.setschedule_ref.getSingleAccess(this.channelId);
      this.$refs.setschedule_ref.deviceList();
    },
  },
};
</script>

<style lang="less">
.monitorBox {
  width: calc(100% - 16px);
  height: calc(100% - 32px);
  padding: 16px 8px;
  background: #ffffff;
  .monitor-container {
    display: flex;
    height: 100%;
    box-sizing: border-box;
    background: @color-white;
    border: 1px solid #dddddd;
    border-radius: 4px;
    .sideBar {
      width: 300px;
      border-right: 1px solid @border-color-base;
      overflow: auto;
      padding: 16px 0px;
      .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: 220px;
      padding: 16px 16px;
      border-left: 1px solid #dcdfe6;
      .monitorItemBox,
      .paramsDate,
      .setTimebtn {
        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>